Component import from other project

.claude/settings.local.json

@@ -0,0 +1,16 @@
+{
+  "permissions": {
+    "allow": [
+      "Bash(find c:Usersmarc.lorenzlimelight-commn-web-componentsCommonWebComponents -not -path */.git/* -type f)",
+      "Bash(npm install:*)",
+      "Bash(npm run:*)",
+      "Bash(mkdir -p src/components src/utils assets fonts)",
+      "Bash(mv LimelightButton.vue src/components/)",
+      "Bash(mv webviewer.ts src/utils/)",
+      "Bash(mv webviewer.d.ts src/utils/)",
+      "Bash(mv index.ts src/index.ts)",
+      "Bash(find c:Usersmarc.lorenzlimelight-commn-web-componentsCommonWebComponents -name *.test.* -o -name *.spec.*)",
+      "Bash(npm test:*)"
+    ]
+  }
+}

.gitea/workflows/ci.yml

@@ -0,0 +1,28 @@
+name: CI
+
+on:
+  push:
+    branches: [main]
+  pull_request:
+    branches: [main]
+
+jobs:
+  test-and-build:
+    runs-on: ubuntu-latest
+
+    steps:
+      - uses: actions/checkout@v4
+
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 22
+          cache: npm
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Run tests
+        run: npm test
+
+      - name: Build
+        run: npm run build

.gitignore

@@ -1,11 +1,7 @@
+node_modules/
+dist/
+
 # ---> Vue
-# gitignore template for Vue.js projects
-#
-# Recommended template: Node.gitignore
-
-# TODO: where does this rule come from?
 docs/_book
-
-# TODO: where does this rule come from?
 test/
 

font.css

@@ -0,0 +1,79 @@
+/* Light */
+@font-face {
+  font-family: 'Open Sans';
+  src: url('./fonts/Open_Sans/OpenSans-Light.ttf') format('truetype');
+  font-weight: 300;
+  font-style: normal;
+  font-display: swap;
+}
+@font-face {
+  font-family: 'Open Sans';
+  src: url('./fonts/Open_Sans/OpenSans-LightItalic.ttf') format('truetype');
+  font-weight: 300;
+  font-style: italic;
+  font-display: swap;
+}
+
+/* Regular */
+@font-face {
+  font-family: 'Open Sans';
+  src: url('./fonts/Open_Sans/OpenSans-Regular.ttf') format('truetype');
+  font-weight: 400;
+  font-style: normal;
+  font-display: swap;
+}
+@font-face {
+  font-family: 'Open Sans';
+  src: url('./fonts/Open_Sans/OpenSans-Italic.ttf') format('truetype');
+  font-weight: 400;
+  font-style: italic;
+  font-display: swap;
+}
+
+/* SemiBold */
+@font-face {
+  font-family: 'Open Sans';
+  src: url('./fonts/Open_Sans/OpenSans-SemiBold.ttf') format('truetype');
+  font-weight: 600;
+  font-style: normal;
+  font-display: swap;
+}
+@font-face {
+  font-family: 'Open Sans';
+  src: url('./fonts/Open_Sans/OpenSans-SemiBoldItalic.ttf') format('truetype');
+  font-weight: 600;
+  font-style: italic;
+  font-display: swap;
+}
+
+/* Bold */
+@font-face {
+  font-family: 'Open Sans';
+  src: url('./fonts/Open_Sans/OpenSans-Bold.ttf') format('truetype');
+  font-weight: 700;
+  font-style: normal;
+  font-display: swap;
+}
+@font-face {
+  font-family: 'Open Sans';
+  src: url('./fonts/Open_Sans/OpenSans-BoldItalic.ttf') format('truetype');
+  font-weight: 700;
+  font-style: italic;
+  font-display: swap;
+}
+
+/* ExtraBold */
+@font-face {
+  font-family: 'Open Sans';
+  src: url('./fonts/Open_Sans/OpenSans-ExtraBold.ttf') format('truetype');
+  font-weight: 800;
+  font-style: normal;
+  font-display: swap;
+}
+@font-face {
+  font-family: 'Open Sans';
+  src: url('./fonts/Open_Sans/OpenSans-ExtraBoldItalic.ttf') format('truetype');
+  font-weight: 800;
+  font-style: italic;
+  font-display: swap;
+}

fonts/Open_Sans/LICENSE.txt

@@ -0,0 +1,202 @@
+
+                                 Apache License
+                           Version 2.0, January 2004
+                        http://www.apache.org/licenses/
+
+   TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
+
+   1. Definitions.
+
+      "License" shall mean the terms and conditions for use, reproduction,
+      and distribution as defined by Sections 1 through 9 of this document.
+
+      "Licensor" shall mean the copyright owner or entity authorized by
+      the copyright owner that is granting the License.
+
+      "Legal Entity" shall mean the union of the acting entity and all
+      other entities that control, are controlled by, or are under common
+      control with that entity. For the purposes of this definition,
+      "control" means (i) the power, direct or indirect, to cause the
+      direction or management of such entity, whether by contract or
+      otherwise, or (ii) ownership of fifty percent (50%) or more of the
+      outstanding shares, or (iii) beneficial ownership of such entity.
+
+      "You" (or "Your") shall mean an individual or Legal Entity
+      exercising permissions granted by this License.
+
+      "Source" form shall mean the preferred form for making modifications,
+      including but not limited to software source code, documentation
+      source, and configuration files.
+
+      "Object" form shall mean any form resulting from mechanical
+      transformation or translation of a Source form, including but
+      not limited to compiled object code, generated documentation,
+      and conversions to other media types.
+
+      "Work" shall mean the work of authorship, whether in Source or
+      Object form, made available under the License, as indicated by a
+      copyright notice that is included in or attached to the work
+      (an example is provided in the Appendix below).
+
+      "Derivative Works" shall mean any work, whether in Source or Object
+      form, that is based on (or derived from) the Work and for which the
+      editorial revisions, annotations, elaborations, or other modifications
+      represent, as a whole, an original work of authorship. For the purposes
+      of this License, Derivative Works shall not include works that remain
+      separable from, or merely link (or bind by name) to the interfaces of,
+      the Work and Derivative Works thereof.
+
+      "Contribution" shall mean any work of authorship, including
+      the original version of the Work and any modifications or additions
+      to that Work or Derivative Works thereof, that is intentionally
+      submitted to Licensor for inclusion in the Work by the copyright owner
+      or by an individual or Legal Entity authorized to submit on behalf of
+      the copyright owner. For the purposes of this definition, "submitted"
+      means any form of electronic, verbal, or written communication sent
+      to the Licensor or its representatives, including but not limited to
+      communication on electronic mailing lists, source code control systems,
+      and issue tracking systems that are managed by, or on behalf of, the
+      Licensor for the purpose of discussing and improving the Work, but
+      excluding communication that is conspicuously marked or otherwise
+      designated in writing by the copyright owner as "Not a Contribution."
+
+      "Contributor" shall mean Licensor and any individual or Legal Entity
+      on behalf of whom a Contribution has been received by Licensor and
+      subsequently incorporated within the Work.
+
+   2. Grant of Copyright License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      copyright license to reproduce, prepare Derivative Works of,
+      publicly display, publicly perform, sublicense, and distribute the
+      Work and such Derivative Works in Source or Object form.
+
+   3. Grant of Patent License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      (except as stated in this section) patent license to make, have made,
+      use, offer to sell, sell, import, and otherwise transfer the Work,
+      where such license applies only to those patent claims licensable
+      by such Contributor that are necessarily infringed by their
+      Contribution(s) alone or by combination of their Contribution(s)
+      with the Work to which such Contribution(s) was submitted. If You
+      institute patent litigation against any entity (including a
+      cross-claim or counterclaim in a lawsuit) alleging that the Work
+      or a Contribution incorporated within the Work constitutes direct
+      or contributory patent infringement, then any patent licenses
+      granted to You under this License for that Work shall terminate
+      as of the date such litigation is filed.
+
+   4. Redistribution. You may reproduce and distribute copies of the
+      Work or Derivative Works thereof in any medium, with or without
+      modifications, and in Source or Object form, provided that You
+      meet the following conditions:
+
+      (a) You must give any other recipients of the Work or
+          Derivative Works a copy of this License; and
+
+      (b) You must cause any modified files to carry prominent notices
+          stating that You changed the files; and
+
+      (c) You must retain, in the Source form of any Derivative Works
+          that You distribute, all copyright, patent, trademark, and
+          attribution notices from the Source form of the Work,
+          excluding those notices that do not pertain to any part of
+          the Derivative Works; and
+
+      (d) If the Work includes a "NOTICE" text file as part of its
+          distribution, then any Derivative Works that You distribute must
+          include a readable copy of the attribution notices contained
+          within such NOTICE file, excluding those notices that do not
+          pertain to any part of the Derivative Works, in at least one
+          of the following places: within a NOTICE text file distributed
+          as part of the Derivative Works; within the Source form or
+          documentation, if provided along with the Derivative Works; or,
+          within a display generated by the Derivative Works, if and
+          wherever such third-party notices normally appear. The contents
+          of the NOTICE file are for informational purposes only and
+          do not modify the License. You may add Your own attribution
+          notices within Derivative Works that You distribute, alongside
+          or as an addendum to the NOTICE text from the Work, provided
+          that such additional attribution notices cannot be construed
+          as modifying the License.
+
+      You may add Your own copyright statement to Your modifications and
+      may provide additional or different license terms and conditions
+      for use, reproduction, or distribution of Your modifications, or
+      for any such Derivative Works as a whole, provided Your use,
+      reproduction, and distribution of the Work otherwise complies with
+      the conditions stated in this License.
+
+   5. Submission of Contributions. Unless You explicitly state otherwise,
+      any Contribution intentionally submitted for inclusion in the Work
+      by You to the Licensor shall be under the terms and conditions of
+      this License, without any additional terms or conditions.
+      Notwithstanding the above, nothing herein shall supersede or modify
+      the terms of any separate license agreement you may have executed
+      with Licensor regarding such Contributions.
+
+   6. Trademarks. This License does not grant permission to use the trade
+      names, trademarks, service marks, or product names of the Licensor,
+      except as required for reasonable and customary use in describing the
+      origin of the Work and reproducing the content of the NOTICE file.
+
+   7. Disclaimer of Warranty. Unless required by applicable law or
+      agreed to in writing, Licensor provides the Work (and each
+      Contributor provides its Contributions) on an "AS IS" BASIS,
+      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
+      implied, including, without limitation, any warranties or conditions
+      of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
+      PARTICULAR PURPOSE. You are solely responsible for determining the
+      appropriateness of using or redistributing the Work and assume any
+      risks associated with Your exercise of permissions under this License.
+
+   8. Limitation of Liability. In no event and under no legal theory,
+      whether in tort (including negligence), contract, or otherwise,
+      unless required by applicable law (such as deliberate and grossly
+      negligent acts) or agreed to in writing, shall any Contributor be
+      liable to You for damages, including any direct, indirect, special,
+      incidental, or consequential damages of any character arising as a
+      result of this License or out of the use or inability to use the
+      Work (including but not limited to damages for loss of goodwill,
+      work stoppage, computer failure or malfunction, or any and all
+      other commercial damages or losses), even if such Contributor
+      has been advised of the possibility of such damages.
+
+   9. Accepting Warranty or Additional Liability. While redistributing
+      the Work or Derivative Works thereof, You may choose to offer,
+      and charge a fee for, acceptance of support, warranty, indemnity,
+      or other liability obligations and/or rights consistent with this
+      License. However, in accepting such obligations, You may act only
+      on Your own behalf and on Your sole responsibility, not on behalf
+      of any other Contributor, and only if You agree to indemnify,
+      defend, and hold each Contributor harmless for any liability
+      incurred by, or claims asserted against, such Contributor by reason
+      of your accepting any such warranty or additional liability.
+
+   END OF TERMS AND CONDITIONS
+
+   APPENDIX: How to apply the Apache License to your work.
+
+      To apply the Apache License to your work, attach the following
+      boilerplate notice, with the fields enclosed by brackets "[]"
+      replaced with your own identifying information. (Don't include
+      the brackets!)  The text should be enclosed in the appropriate
+      comment syntax for the file format. We also recommend that a
+      file or class name and description of purpose be included on the
+      same "printed page" as the copyright notice for easier
+      identification within third-party archives.
+
+   Copyright [yyyy] [name of copyright owner]
+
+   Licensed under the Apache License, Version 2.0 (the "License");
+   you may not use this file except in compliance with the License.
+   You may obtain a copy of the License at
+
+       http://www.apache.org/licenses/LICENSE-2.0
+
+   Unless required by applicable law or agreed to in writing, software
+   distributed under the License is distributed on an "AS IS" BASIS,
+   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+   See the License for the specific language governing permissions and
+   limitations under the License.

main.css

@@ -0,0 +1,31 @@
+@import 'tailwindcss';
+
+@import './font.css';
+
+@theme {
+  --color-black: #000;
+  --color-white: #fff;
+
+  --color-primary: #ffff00;
+  --color-primary-dark: #504e18;
+  --color-primary-light: #ffff7b;
+
+  --color-secondary: #404040;
+  --color-secondary-light: #6b6b6b;
+  --color-secondary-dark: #2a2800;
+
+  --color-alive: oklch(69.6% 0.17 162.48); /* Tailwind emerald-500*/
+
+  --color-green: oklch(62.7% 0.194 149.214); /* Tailwind green-600 */
+  --color-yellow: oklch(68.1% 0.162 75.834); /* Tailwind yellow-600 */
+  --color-red: oklch(57.7% 0.245 27.325); /* Tailwind red-600 */
+
+  --color-on-primary: var(--color-secondary);
+  --color-on-secondary: var(--color-white);
+  --color-hover: var(--color-primary-dark);
+
+  --font-limelight: 'Open Sans';
+  --default-font-family: var(--font-limelight);
+  --breakpoint-3xl: 112rem;
+  --breakpoint-4xl: 128rem;
+}

package.json

@@ -0,0 +1,41 @@
+{
+  "name": "limelight-common-web-components",
+  "version": "0.1.0",
+  "type": "module",
+  "files": [
+    "dist",
+    "font.css",
+    "theme.css",
+    "fonts"
+  ],
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "exports": {
+    ".": {
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    },
+    "./style.css": "./dist/index.css",
+    "./theme.css": "./theme.css"
+  },
+  "peerDependencies": {
+    "vue": "^3.0.0"
+  },
+  "devDependencies": {
+    "@tailwindcss/vite": "^4.0.0",
+    "@vitejs/plugin-vue": "^5.0.0",
+    "@vue/test-utils": "^2.4.6",
+    "jsdom": "^27.0.1",
+    "tailwindcss": "^4.0.0",
+    "typescript": "^5.0.0",
+    "vite": "^6.0.0",
+    "vitest": "^3.2.4",
+    "vue": "^3.5.0"
+  },
+  "scripts": {
+    "build": "vite build",
+    "dev": "vite build --watch",
+    "test": "vitest run",
+    "test:watch": "vitest"
+  }
+}

src/components/LimelightButton.test.ts

@@ -0,0 +1,98 @@
+import { describe, it, expect } from 'vitest';
+import { mount } from '@vue/test-utils';
+import LimelightButton from './LimelightButton.vue';
+
+describe('LimelightButton', () => {
+  it('renders slot content', () => {
+    const wrapper = mount(LimelightButton, { slots: { default: 'Click me' } });
+    expect(wrapper.text()).toContain('Click me');
+  });
+
+  it('renders a <button> element', () => {
+    const wrapper = mount(LimelightButton, { slots: { default: 'Test' } });
+    expect(wrapper.element.tagName).toBe('BUTTON');
+  });
+
+  it('applies the variant class', () => {
+    const wrapper = mount(LimelightButton, {
+      props: { variant: 'danger' },
+      slots: { default: 'Delete' },
+    });
+    expect(wrapper.classes()).toContain('btn--danger');
+  });
+
+  it.each(['primary', 'outline', 'ghost', 'danger'] as const)(
+    'applies btn--%s class for variant %s',
+    (variant) => {
+      const wrapper = mount(LimelightButton, {
+        props: { variant },
+        slots: { default: 'Btn' },
+      });
+      expect(wrapper.classes()).toContain(`btn--${variant}`);
+    },
+  );
+
+  it('is disabled when disabled prop is true', () => {
+    const wrapper = mount(LimelightButton, {
+      props: { disabled: true },
+      slots: { default: 'Disabled' },
+    });
+    expect((wrapper.element as HTMLButtonElement).disabled).toBe(true);
+    expect(wrapper.classes()).toContain('btn--disabled');
+  });
+
+  it('emits click when clicked', async () => {
+    const wrapper = mount(LimelightButton, { slots: { default: 'Click' } });
+    await wrapper.trigger('click');
+    expect(wrapper.emitted('click')).toBeTruthy();
+  });
+
+  it('does not emit click when disabled', async () => {
+    const wrapper = mount(LimelightButton, {
+      props: { disabled: true },
+      slots: { default: 'Click' },
+    });
+    await wrapper.trigger('click');
+    // Native disabled button blocks the click event
+    expect((wrapper.element as HTMLButtonElement).disabled).toBe(true);
+  });
+
+  it('always has the btn base class', () => {
+    const wrapper = mount(LimelightButton, { slots: { default: 'Btn' } });
+    expect(wrapper.classes()).toContain('btn');
+  });
+
+  it('has type="button" to prevent accidental form submission', () => {
+    const wrapper = mount(LimelightButton, { slots: { default: 'Btn' } });
+    expect((wrapper.element as HTMLButtonElement).type).toBe('button');
+  });
+
+  it('does not add a variant class when variant is omitted', () => {
+    const wrapper = mount(LimelightButton, { slots: { default: 'Btn' } });
+    const variantClasses = wrapper.classes().filter((c) => c.startsWith('btn--'));
+    expect(variantClasses).toEqual([]);
+  });
+
+  it('keeps the variant class when also disabled', () => {
+    const wrapper = mount(LimelightButton, {
+      props: { variant: 'primary', disabled: true },
+      slots: { default: 'Btn' },
+    });
+    expect(wrapper.classes()).toContain('btn--primary');
+    expect(wrapper.classes()).toContain('btn--disabled');
+  });
+
+  it('is not disabled by default', () => {
+    const wrapper = mount(LimelightButton, { slots: { default: 'Btn' } });
+    expect((wrapper.element as HTMLButtonElement).disabled).toBe(false);
+    expect(wrapper.classes()).not.toContain('btn--disabled');
+  });
+
+  it('renders HTML slot content', () => {
+    const wrapper = mount(LimelightButton, {
+      slots: { default: '<strong>Bold</strong>' },
+    });
+    expect(wrapper.find('strong').exists()).toBe(true);
+    expect(wrapper.find('strong').text()).toBe('Bold');
+  });
+});

src/components/LimelightButton.vue

@@ -0,0 +1,84 @@
+<template>
+  <button
+    type="button"
+    class="btn"
+    :class="[variant && `btn--${variant}`, { 'btn--disabled': disabled }]"
+    :disabled="disabled"
+  >
+    <slot />
+  </button>
+</template>
+
+<script setup lang="ts">
+defineProps<{
+  variant?: 'primary' | 'outline' | 'ghost' | 'danger'
+  disabled?: boolean
+}>()
+</script>
+
+<style scoped>
+@import 'tailwindcss';
+.btn {
+  @apply h-10 text-sm;
+  padding: 0 1.5rem;
+  font-family: 'Barlow', sans-serif;
+  font-weight: 700;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  cursor: pointer;
+  border: none;
+  clip-path: polygon(8px 0%, 100% 0%, calc(100% - 8px) 100%, 0% 100%);
+  transition:
+    background 0.15s,
+    color 0.15s,
+    border-color 0.15s,
+    transform 0.1s;
+  @apply select-none;
+}
+.btn--primary {
+  background: var(--color-primary);
+  color: var(--color-secondary-dark);
+}
+.btn--primary:hover {
+  background: var(--color-primary-light);
+  transform: scaleX(1.03);
+}
+
+.btn--outline {
+  background: transparent;
+  color: var(--color-primary);
+  border: 1.5px solid var(--color-primary);
+}
+.btn--outline:hover {
+  background: var(--color-primary-dark);
+  transform: scaleX(1.03);
+}
+
+.btn--ghost {
+  background: transparent;
+  color: var(--color-secondary-light);
+  border: 1px solid var(--color-secondary-light);
+}
+.btn--ghost:hover {
+  color: var(--color-primary);
+  border-color: var(--color-primary);
+  transform: scaleX(1.03);
+}
+
+.btn--danger {
+  background: var(--color-red);
+  color: #fff;
+}
+.btn--danger:hover {
+  filter: brightness(1.2);
+  transform: scaleX(1.03);
+}
+
+.btn:active {
+  transform: scale(0.97);
+}
+.btn--disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+</style>

src/index.ts

@@ -0,0 +1,2 @@
+export { default as LimelightButton } from './components/LimelightButton.vue'
+export * from './utils/webviewer'

src/utils/webviewer.d.ts

@@ -0,0 +1,82 @@
+/**
+ * TypeScript definitions for the FileMaker WebViewer JavaScript API
+ *
+ * These bindings cover the `FileMaker` global object injected into web viewers
+ * by Claris FileMaker Pro / WebDirect (FileMaker 19+).
+ *
+ * @see https://help.claris.com/en/pro-help/content/scripting-javascript-in-web-viewers.html
+ */
+
+// ---------------------------------------------------------------------------
+// Core FileMaker global namespace
+// ---------------------------------------------------------------------------
+
+/**
+ * The `FileMaker` object is automatically injected into every web viewer's
+ * JavaScript context by the FileMaker runtime.  It is **not** available in
+ * ordinary browsers.
+ *
+ * ### Important notes
+ * - All `PerformScript*` calls are **asynchronous** – FileMaker does not block
+ *   JavaScript execution while the script runs.
+ * - The object is only available after the web page has **finished loading**.
+ * - The web viewer must have *"Allow JavaScript to perform FileMaker scripts"*
+ *   enabled in its object settings.
+ * - In WebDirect the page source must use the `data:text/html,` MIME prefix
+ *   (not `data:text/html; charset=UTF-8,`) for these calls to work.
+ */
+export interface FileMakerAPI {
+  /**
+   * Calls a FileMaker script by name.
+   *
+   * Runs asynchronously – JavaScript does not wait for the script to finish
+   * and no return value is provided back to JavaScript.
+   *
+   * @param script    - Name of the FileMaker script to execute (not
+   *                    case-sensitive).
+   * @param parameter - Optional string parameter accessible inside the script
+   *                    via `Get(ScriptParameter)`.
+   *
+   * @example
+   * FileMaker.PerformScript("Save Record", JSON.stringify({ id: 42 }));
+   */
+  PerformScript(script: string, parameter?: string): void
+
+  /**
+   * Calls a FileMaker script by name with an explicit concurrency option.
+   *
+   * Behaves identically to `PerformScript` when `option` is `"0"` (pause
+   * current script).
+   *
+   * @param script    - Name of the FileMaker script to execute.
+   * @param parameter - Optional string parameter for the script.
+   * @param option    - How to handle any currently running script.
+   *                    See {@link ScriptOption} for the full table.
+   *
+   * @example
+   * // Run concurrently without disturbing existing scripts
+   * FileMaker.PerformScriptWithOption("Sync Data", "", "3");
+   */
+  PerformScriptWithOption(script: string, parameter?: string, option?: ScriptOption): void
+}
+
+// ---------------------------------------------------------------------------
+// Global augmentation
+// ---------------------------------------------------------------------------
+
+declare global {
+  /**
+   * Global `FileMaker` object injected by the FileMaker runtime.
+   *
+   * May be `undefined` when the page is loaded outside of a FileMaker web
+   * viewer (e.g. in a regular browser during development).
+   *
+   * Always guard access with a runtime check:
+   * ```ts
+   * if (typeof FileMaker !== "undefined") {
+   *   FileMaker.PerformScript("My Script");
+   * }
+   * ```
+   */
+  const FileMaker: FileMakerAPI | undefined
+}

src/utils/webviewer.ts

@@ -0,0 +1,206 @@
+// ---------------------------------------------------------------------------
+// Script execution options
+// ---------------------------------------------------------------------------
+
+/**
+ * Controls how a currently running FileMaker script is handled when a new
+ * script is started via `FileMaker.PerformScriptWithOption`.
+ *
+ * | Value | Behaviour                                                        |
+ * |-------|------------------------------------------------------------------|
+ * | "0"   | Pause the current script, run the new one, then resume          |
+ * | "1"   | Abort the current script and run the new one                    |
+ * | "2"   | Exit the current script and run the new one                     |
+ * | "3"   | Run the new script concurrently (default async behaviour)       |
+ * | "4"   | Trigger script (same as 3 but fires as a script trigger would)  |
+ * | "5"   | Suspend the current script; resume it after the new one exits   |
+ */
+export type ScriptOption = '0' | '1' | '2' | '3' | '4' | '5';
+
+// ---------------------------------------------------------------------------
+// Helper utilities
+// ---------------------------------------------------------------------------
+
+/**
+ * Type-safe wrapper that calls `FileMaker.PerformScript` only when the
+ * runtime is available (i.e. the page is running inside a web viewer).
+ *
+ * @returns `true` if the script was dispatched, `false` otherwise.
+ *
+ * @example
+ * performScript("Delete Record", String(recordId));
+ */
+export function performScript(script: string, parameter?: string): boolean {
+  if (typeof FileMaker === 'undefined') return false;
+  FileMaker.PerformScript(script, parameter);
+  return true;
+}
+
+/**
+ * Type-safe wrapper around `FileMaker.PerformScriptWithOption`.
+ *
+ * @returns `true` if the script was dispatched, `false` otherwise.
+ */
+export function performScriptWithOption(
+  script: string,
+  parameter?: string,
+  option?: ScriptOption,
+): boolean {
+  if (typeof FileMaker === 'undefined') return false;
+  FileMaker.PerformScriptWithOption(script, parameter, option);
+  return true;
+}
+
+// ---------------------------------------------------------------------------
+// Callback-based async bridge
+// ---------------------------------------------------------------------------
+
+/**
+ * A pending callback registered by {@link callFileMakerScript}.
+ * @internal
+ */
+interface PendingCallback {
+  resolve: (data: string) => void;
+  reject: (error: FileMakerScriptError) => void;
+}
+
+/** Error thrown when a FileMaker script signals failure. */
+export interface FileMakerScriptError {
+  /** The callback ID that was active when the error occurred. */
+  callbackId: number;
+  /** Optional error message forwarded from the FileMaker script. */
+  message?: string;
+}
+
+/**
+ * Pending callbacks keyed by an auto-incrementing integer ID.
+ * @internal
+ */
+const _pendingCallbacks = new Map<number, PendingCallback>();
+let _nextCallbackId = 1;
+
+/**
+ * The shape of the payload that `callFileMakerScript` wraps around the
+ * caller-supplied parameter before sending it to FileMaker.
+ * @internal
+ */
+interface WrappedPayload {
+  callbackId: number;
+  parameter: string;
+}
+
+/**
+ * Invokes a FileMaker script and returns a `Promise` that resolves when
+ * FileMaker calls back into JavaScript via {@link resolveFileMakerCallback}.
+ *
+ * **FileMaker side:** the script must eventually call
+ * *Perform JavaScript in Web Viewer* targeting `resolveFileMakerCallback`
+ * and pass back the same `callbackId` together with the result data.
+ *
+ * ```
+ * // FileMaker script (pseudocode)
+ * Set Variable [$payload ; Value: Get(ScriptParameter)]
+ * Set Variable [$id     ; Value: JSONGetElement($payload; "callbackId")]
+ * Set Variable [$result ; Value: \* … your work … *\]
+ * Perform JavaScript in Web Viewer [
+ *   Object Name: "MyWebViewer"
+ *   Function:    "resolveFileMakerCallback"
+ *   Parameters:  $id, $result
+ * ]
+ * ```
+ *
+ * @param script    - FileMaker script name.
+ * @param parameter - Arbitrary string payload for the script.
+ * @param timeout   - Optional ms before the promise is rejected automatically
+ *                    (defaults to no timeout).
+ *
+ * @example
+ * const json = await callFileMakerScript("Get Customer", String(customerId));
+ * const customer = JSON.parse(json);
+ */
+export function callFileMakerScript(
+  script: string,
+  parameter = '',
+  timeout?: number,
+): Promise<string> {
+  return new Promise<string>((resolve, reject) => {
+    if (typeof FileMaker === 'undefined') {
+      reject({ callbackId: -1, message: 'FileMaker runtime not available' });
+      return;
+    }
+
+    const callbackId = _nextCallbackId++;
+    _pendingCallbacks.set(callbackId, { resolve, reject });
+
+    const payload: WrappedPayload = { callbackId, parameter };
+    FileMaker.PerformScript(script, JSON.stringify(payload));
+
+    if (timeout !== undefined) {
+      setTimeout(() => {
+        if (_pendingCallbacks.has(callbackId)) {
+          _pendingCallbacks.delete(callbackId);
+          reject({ callbackId, message: `Timed out after ${timeout}ms` });
+        }
+      }, timeout);
+    }
+  });
+}
+
+/**
+ * Must be exposed as a global function so that FileMaker's
+ * *Perform JavaScript in Web Viewer* script step can invoke it.
+ *
+ * Call this from your FileMaker script to resolve a promise created by
+ * {@link callFileMakerScript}.
+ *
+ * @param callbackId - The numeric ID forwarded from the script parameter.
+ * @param result     - The string result to hand back to JavaScript.
+ * @param isError    - When truthy, the promise is rejected instead.
+ *
+ * @example
+ * // Expose globally so FileMaker can reach it
+ * (window as any).resolveFileMakerCallback = resolveFileMakerCallback;
+ */
+export function resolveFileMakerCallback(callbackId: string, result = '', isError?: boolean): void {
+  const callbackNumId = parseInt(callbackId);
+  const pending = _pendingCallbacks.get(callbackNumId);
+  if (!pending) return;
+  _pendingCallbacks.delete(callbackNumId);
+
+  if (isError) {
+    pending.reject({ callbackId: callbackNumId, message: result });
+  } else {
+    pending.resolve(result);
+  }
+}
+
+export function waitForFileMaker(
+  callback: () => void,
+  onError?: () => void,
+  maxAttempts = 10, // 1 Sekunde bei 100ms Intervall
+  attempt = 0,
+) {
+  if (isFileMakerEnvironment()) {
+    callback();
+  } else if (attempt >= maxAttempts) {
+    onError?.(); // Fehler-Callback aufrufen
+  } else {
+    setTimeout(() => waitForFileMaker(callback, onError, maxAttempts, attempt + 1), 100);
+  }
+}
+
+// ---------------------------------------------------------------------------
+// Environment detection
+// ---------------------------------------------------------------------------
+
+/**
+ * Returns `true` when the page is running inside a FileMaker web viewer.
+ *
+ * @example
+ * if (isFileMakerEnvironment()) {
+ *   FileMaker!.PerformScript("On Load");
+ * }
+ */
+export function isFileMakerEnvironment(): boolean {
+  return typeof FileMaker !== 'undefined';
+}

theme.css

@@ -0,0 +1,29 @@
+@import './font.css';
+
+@theme {
+  --color-black: #000;
+  --color-white: #fff;
+
+  --color-primary: #ffff00;
+  --color-primary-dark: #504e18;
+  --color-primary-light: #ffff7b;
+
+  --color-secondary: #404040;
+  --color-secondary-light: #6b6b6b;
+  --color-secondary-dark: #2a2800;
+
+  --color-alive: oklch(69.6% 0.17 162.48); /* Tailwind emerald-500*/
+
+  --color-green: oklch(62.7% 0.194 149.214); /* Tailwind green-600 */
+  --color-yellow: oklch(68.1% 0.162 75.834); /* Tailwind yellow-600 */
+  --color-red: oklch(57.7% 0.245 27.325); /* Tailwind red-600 */
+
+  --color-on-primary: var(--color-secondary);
+  --color-on-secondary: var(--color-white);
+  --color-hover: var(--color-primary-dark);
+
+  --font-limelight: 'Open Sans';
+  --default-font-family: var(--font-limelight);
+  --breakpoint-3xl: 112rem;
+  --breakpoint-4xl: 128rem;
+}

tsconfig.json

@@ -0,0 +1,17 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "module": "ESNext",
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "skipLibCheck": true,
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "isolatedModules": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    "strict": true
+  },
+  "include": ["**/*.ts", "**/*.vue"],
+  "exclude": ["node_modules", "dist"]
+}

vite.config.ts

@@ -0,0 +1,29 @@
+import { defineConfig } from 'vitest/config'
+import vue from '@vitejs/plugin-vue'
+import tailwindcss from '@tailwindcss/vite'
+import { resolve } from 'path'
+
+export default defineConfig({
+  plugins: [
+    tailwindcss(),
+    vue(),
+  ],
+  test: {
+    environment: 'jsdom',
+  },
+  build: {
+    lib: {
+      entry: resolve(__dirname, 'src/index.ts'),
+      name: 'LimelightCommonWebComponents',
+      fileName: 'index',
+    },
+    rollupOptions: {
+      external: ['vue'],
+      output: {
+        globals: {
+          vue: 'Vue',
+        },
+      },
+    },
+  },
+})