@happyvertical/smrt-svelte 0.51.39 → 0.53.0

package/dist/components/forms/__tests__/FileUpload.native-form.test.js

@@ -0,0 +1,249 @@
+/**
+ * FileUpload native-form wiring (#3260).
+ *
+ * jsdom has no `DataTransfer` constructor, so these tests cover attribute
+ * forwarding, the visually-hidden (not `hidden`) input, the required-error
+ * announcement, and the no-DataTransfer fallback. The DataTransfer path and the
+ * `new FormData(form)` post are proven in a real browser by
+ * `e2e/file-upload.spec.ts`; the form-reset cases below also run the mirror
+ * against a jsdom `DataTransfer` stand-in.
+ */
+import { expectNoA11yViolations } from '@happyvertical/smrt-ui/test-support/a11y';
+import { fireEvent, render, screen } from '@testing-library/svelte';
+import userEvent from '@testing-library/user-event';
+import { tick } from 'svelte';
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+import FileUpload from '../FileUpload.svelte';
+import FileUploadResetFixture from './FileUploadReset.fixture.svelte';
+function fileInput(container) {
+    const input = container.querySelector('input[type="file"]');
+    if (!input)
+        throw new Error('file input not found');
+    return input;
+}
+const txt = (name, size = 4) => new File(['a'.repeat(size)], name, { type: 'text/plain' });
+describe('FileUpload — native form wiring', () => {
+    it('forwards name, capture and required to the file input', () => {
+        const { container } = render(FileUpload, {
+            props: { name: 'photo', capture: 'environment', required: true },
+        });
+        const input = fileInput(container);
+        expect(input).toHaveAttribute('name', 'photo');
+        expect(input).toHaveAttribute('capture', 'environment');
+        expect(input).toBeRequired();
+    });
+    it('omits name, capture and required by default', () => {
+        const { container } = render(FileUpload);
+        const input = fileInput(container);
+        expect(input).not.toHaveAttribute('name');
+        expect(input).not.toHaveAttribute('capture');
+        expect(input).not.toBeRequired();
+    });
+    it('keeps the input focusable for native validation but out of the a11y tree and tab order', () => {
+        const { container } = render(FileUpload, { props: { required: true } });
+        const input = fileInput(container);
+        // `hidden` would make the control unfocusable, so the browser could not
+        // show its required bubble and would silently block the submit.
+        expect(input).not.toHaveAttribute('hidden');
+        expect(input).toHaveClass('file-upload__input');
+        expect(input).toHaveAttribute('aria-hidden', 'true');
+        expect(input).toHaveAttribute('tabindex', '-1');
+        // Not nested inside the role="button" drop zone (nested-interactive).
+        expect(screen.getByRole('button').contains(input)).toBe(false);
+    });
+    it('announces a failed required check through the error live region', async () => {
+        const { container } = render(FileUpload, { props: { required: true } });
+        const input = fileInput(container);
+        expect(input.checkValidity()).toBe(false);
+        await fireEvent(input, new Event('invalid'));
+        expect(screen.getByRole('alert').textContent?.trim()).not.toBe('');
+    });
+    it('is axe-clean with name, capture and required', async () => {
+        const { container } = render(FileUpload, {
+            props: {
+                label: 'Mill cert photo',
+                name: 'photo',
+                capture: 'environment',
+                required: true,
+            },
+        });
+        await expectNoA11yViolations(container);
+    });
+});
+describe('FileUpload — fallback without the DataTransfer constructor', () => {
+    it('runs in an environment without DataTransfer', () => {
+        expect(typeof globalThis.DataTransfer).toBe('undefined');
+    });
+    it('keeps the native selection when it matches the accepted list', async () => {
+        const { container } = render(FileUpload, { props: { name: 'doc' } });
+        const input = fileInput(container);
+        await userEvent.upload(input, txt('a.txt'));
+        expect(screen.getByText('a.txt')).toBeInTheDocument();
+        expect(input.files).toHaveLength(1);
+        expect(input.files?.[0].name).toBe('a.txt');
+    });
+    it('clears the input when a file is removed, so it never posts', async () => {
+        const { container } = render(FileUpload, { props: { name: 'doc' } });
+        const input = fileInput(container);
+        await userEvent.upload(input, txt('a.txt'));
+        await userEvent.click(screen.getByRole('button', { name: /remove a\.txt/i }));
+        expect(input.files).toHaveLength(0);
+    });
+    it('clears the input when the pick is rejected, so it never posts', async () => {
+        const { container } = render(FileUpload, {
+            props: { name: 'doc', maxSize: 1 },
+        });
+        const input = fileInput(container);
+        await userEvent.upload(input, txt('big.txt'));
+        expect(screen.queryByText('big.txt')).not.toBeInTheDocument();
+        expect(input.files).toHaveLength(0);
+    });
+    it('clears the input when an accumulated list no longer matches it', async () => {
+        const { container } = render(FileUpload, {
+            props: { name: 'doc', multiple: true },
+        });
+        const input = fileInput(container);
+        await userEvent.upload(input, txt('a.txt'));
+        await userEvent.upload(input, txt('b.txt'));
+        expect(screen.getByText('a.txt')).toBeInTheDocument();
+        expect(screen.getByText('b.txt')).toBeInTheDocument();
+        expect(input.files).toHaveLength(0);
+    });
+});
+/**
+ * A real jsdom `FileList` holding `files`: jsdom's `input.files` setter only
+ * accepts genuine instances and has no constructor, so the list comes from a
+ * detached input and is filled through its implementation object (mirrors
+ * smrt-ui's capture test environment).
+ */
+function createFileList(files) {
+    const implOf = (wrapper, guard) => {
+        const holder = wrapper;
+        const key = Object.getOwnPropertySymbols(wrapper).find((s) => guard(holder[s]));
+        if (!key)
+            throw new Error('jsdom wrapper has no implementation symbol');
+        return holder[key];
+    };
+    const list = document.createElement('input');
+    list.type = 'file';
+    const fileList = list.files;
+    const impl = implOf(fileList, Array.isArray);
+    for (const file of files) {
+        impl.push(implOf(file, (v) => typeof v === 'object' && v !== null));
+    }
+    return fileList;
+}
+/** Browser-shaped `DataTransfer` for jsdom: `items.add()` plus a real `files`. */
+class TestDataTransfer {
+    #files = [];
+    items = {
+        add: (file) => {
+            this.#files.push(file);
+            return null;
+        },
+    };
+    get files() {
+        return createFileList(this.#files);
+    }
+}
+/**
+ * A reset of the owning form (#3260): SvelteKit `enhance`'s `update()` after a
+ * success, `createFormRetry()`'s conditional reset, a reset button and
+ * `form.reset()` all empty a native file input, so the list must empty with
+ * it. jsdom's reset does not empty file inputs (browsers do), so these
+ * assertions prove the component empties its own input.
+ */
+describe.each([
+    ['the DataTransfer mirror', true],
+    ['the no-DataTransfer fallback', false],
+])('FileUpload — form reset with %s', (_label, withDataTransfer) => {
+    beforeEach(() => {
+        if (withDataTransfer)
+            vi.stubGlobal('DataTransfer', TestDataTransfer);
+    });
+    afterEach(() => {
+        vi.unstubAllGlobals();
+    });
+    function mount(props = {}) {
+        const onchange = vi.fn();
+        const result = render(FileUploadResetFixture, {
+            props: { onchange, ...props },
+        });
+        const form = result.container.querySelector('form');
+        const bound = () => screen.getByTestId('bound').getAttribute('data-files');
+        return {
+            ...result,
+            form,
+            onchange,
+            bound,
+            input: fileInput(result.container),
+        };
+    }
+    async function pick(input, files) {
+        input.files = createFileList(files);
+        await fireEvent.change(input);
+    }
+    /** Names of the non-empty `doc` entries a native submit would post. */
+    const posted = (form) => new FormData(form).getAll('doc')
+        .filter((file) => file.name !== '')
+        .map((file) => file.name);
+    it('form.reset() empties the list, its error and what posts', async () => {
+        const { form, input, onchange, bound } = mount({ maxSize: 10 });
+        await pick(input, [txt('a.txt'), txt('big.txt', 50)]);
+        expect(screen.getByText('a.txt')).toBeInTheDocument();
+        expect(bound()).toBe('a.txt');
+        expect(screen.getByRole('alert')).toBeInTheDocument();
+        if (withDataTransfer)
+            expect(posted(form)).toEqual(['a.txt']);
+        form.reset();
+        await tick();
+        expect(screen.queryByText('a.txt')).not.toBeInTheDocument();
+        expect(screen.queryByRole('alert')).not.toBeInTheDocument();
+        expect(onchange).toHaveBeenLastCalledWith([]);
+        expect(bound()).toBe('');
+        expect(input.files).toHaveLength(0);
+        expect(posted(form)).toEqual([]);
+        // The next pick posts alone; the reset list is never re-mirrored.
+        await pick(input, [txt('b.txt')]);
+        expect(screen.getByText('b.txt')).toBeInTheDocument();
+        expect(screen.queryByText('a.txt')).not.toBeInTheDocument();
+        expect(posted(form)).toEqual(['b.txt']);
+    });
+    it('a reset button empties the list and required blocks again', async () => {
+        const { form, input } = mount({ required: true });
+        await pick(input, [txt('a.txt')]);
+        expect(input.checkValidity()).toBe(true);
+        await fireEvent.click(screen.getByRole('button', { name: 'Reset form' }));
+        expect(screen.queryByText('a.txt')).not.toBeInTheDocument();
+        expect(posted(form)).toEqual([]);
+        expect(input.validity.valueMissing).toBe(true);
+    });
+    it('empties the list even while disabled, as it empties a disabled input', async () => {
+        const { form, input, rerender, bound } = mount();
+        await pick(input, [txt('a.txt')]);
+        await rerender({ disabled: true });
+        expect(screen.getByText('a.txt')).toBeInTheDocument();
+        form.reset();
+        await tick();
+        expect(screen.queryByText('a.txt')).not.toBeInTheDocument();
+        expect(bound()).toBe('');
+        expect(input.files).toHaveLength(0);
+    });
+    it('does not report an empty list that was already empty', async () => {
+        const { form, onchange } = mount();
+        form.reset();
+        await tick();
+        expect(onchange).not.toHaveBeenCalled();
+    });
+    it('ignores the reset of another form', async () => {
+        const { input, onchange } = mount();
+        await pick(input, [txt('a.txt')]);
+        onchange.mockClear();
+        const other = document.createElement('form');
+        document.body.append(other);
+        other.reset();
+        await tick();
+        expect(screen.getByText('a.txt')).toBeInTheDocument();
+        expect(onchange).not.toHaveBeenCalled();
+    });
+});

package/dist/components/forms/__tests__/FileUploadReset.fixture.svelte

@@ -0,0 +1,24 @@
+<script lang="ts">
+import FileUpload from '../FileUpload.svelte';
+
+let {
+  disabled = false,
+  required = false,
+  maxSize,
+  onchange,
+}: {
+  disabled?: boolean;
+  required?: boolean;
+  maxSize?: number;
+  onchange?: (files: File[]) => void;
+} = $props();
+
+let files = $state<File[]>([]);
+</script>
+
+<!-- A plain form with a bound list and a native reset button (#3260). -->
+<form>
+  <FileUpload name="doc" multiple {disabled} {required} {maxSize} {onchange} bind:files />
+  <output data-testid="bound" data-files={files.map((file) => file.name).join(',')}></output>
+  <button type="reset">Reset form</button>
+</form>

package/dist/components/forms/__tests__/FileUploadReset.fixture.svelte.d.ts

@@ -0,0 +1,10 @@
+type $$ComponentProps = {
+    disabled?: boolean;
+    required?: boolean;
+    maxSize?: number;
+    onchange?: (files: File[]) => void;
+};
+declare const FileUploadReset: import("svelte").Component<$$ComponentProps, {}, "">;
+type FileUploadReset = ReturnType<typeof FileUploadReset>;
+export default FileUploadReset;
+//# sourceMappingURL=FileUploadReset.fixture.svelte.d.ts.map

package/dist/components/forms/__tests__/FileUploadReset.fixture.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FileUploadReset.fixture.svelte.d.ts","sourceRoot":"","sources":["../../../../src/components/forms/__tests__/FileUploadReset.fixture.svelte.ts"],"names":[],"mappings":"AAKC,KAAK,gBAAgB,GAAI;IACxB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,IAAI,EAAE,KAAK,IAAI,CAAC;CACpC,CAAC;AAuBF,QAAA,MAAM,eAAe,sDAAwC,CAAC;AAC9D,KAAK,eAAe,GAAG,UAAU,CAAC,OAAO,eAAe,CAAC,CAAC;AAC1D,eAAe,eAAe,CAAC"}

package/dist/components/forms/__tests__/Form.ui-controls.test.js

@@ -0,0 +1,119 @@
+import { createControlInteractionRegistry } from '@happyvertical/smrt-ui/forms';
+import { render, screen, waitFor } from '@testing-library/svelte';
+import userEvent from '@testing-library/user-event';
+import { tick } from 'svelte';
+import { afterEach, describe, expect, it, vi } from 'vitest';
+vi.mock('../../../hooks/useAppState.svelte.js', () => ({
+    useAppState: () => ({ state: { mode: 'default' }, setMode: vi.fn() }),
+}));
+vi.mock('../../../hooks/useSTT.svelte.js', () => ({
+    useSTT: () => ({
+        isListening: false,
+        lastResult: '',
+        isReady: false,
+        adapterType: null,
+        initialize: vi.fn(),
+        start: vi.fn(),
+        stop: vi.fn(),
+    }),
+}));
+import Fixture from './form-with-ui-controls.fixture.svelte';
+function captureTools() {
+    const registered = [];
+    document.modelContext = {
+        async registerTool(tool) {
+            registered.push(tool);
+        },
+    };
+    return registered;
+}
+afterEach(() => {
+    delete document.modelContext;
+});
+describe('rich Form: native attributes, enhance, and smrt-ui controls', () => {
+    it('passes native form attributes and attachments through to <form>', async () => {
+        const attach = vi.fn();
+        render(Fixture, { props: { attach } });
+        const form = screen.getByTestId('network-form');
+        expect(form.tagName).toBe('FORM');
+        expect(form).toHaveAttribute('enctype', 'multipart/form-data');
+        expect(form).toHaveAttribute('novalidate');
+        expect(form).toHaveAttribute('method', 'POST');
+        expect(form).toHaveAttribute('action', '?/create');
+        expect(form).toHaveAccessibleName('Set up your network');
+        expect(attach).toHaveBeenCalledWith(form);
+    });
+    it('applies an enhance action to the form and tears it down on unmount', () => {
+        const destroy = vi.fn();
+        const enhance = vi.fn(() => ({ destroy }));
+        const { unmount } = render(Fixture, { props: { enhance } });
+        expect(enhance).toHaveBeenCalledWith(screen.getByTestId('network-form'));
+        unmount();
+        expect(destroy).toHaveBeenCalledTimes(1);
+    });
+    it('lets an enhanced submit through without preventing it', async () => {
+        let submitted;
+        const enhance = (form) => {
+            const listener = (event) => {
+                submitted = event;
+                event.preventDefault();
+            };
+            form.addEventListener('submit', listener);
+            return { destroy: () => form.removeEventListener('submit', listener) };
+        };
+        render(Fixture, { props: { enhance } });
+        await userEvent.click(screen.getByRole('button', { name: 'Create' }));
+        expect(submitted).toBeDefined();
+    });
+    it('describes smrt-ui controls and rich fields in one stage-only tool', async () => {
+        const registered = captureTools();
+        render(Fixture);
+        await tick();
+        await vi.waitFor(() => expect(registered.length).toBeGreaterThan(0));
+        const tool = registered.at(-1);
+        expect(tool.name).toBe('setup-network_stage_changes');
+        expect(tool.inputSchema).toMatchObject({
+            type: 'object',
+            properties: {
+                tagline: { type: 'string', title: 'Tagline' },
+                name: { type: 'string', title: 'Network name' },
+                kind: { type: 'string', title: 'Kind of network' },
+                town: {
+                    type: 'string',
+                    title: 'Home town',
+                    enum: ['lacombe', 'blackfalds'],
+                },
+            },
+        });
+    });
+    it('stages smrt-ui control proposals for review and never writes them', async () => {
+        const registered = captureTools();
+        const registry = createControlInteractionRegistry();
+        render(Fixture, { props: { interactionRegistry: registry } });
+        await tick();
+        await vi.waitFor(() => expect(registered.length).toBeGreaterThan(0));
+        const tool = registered.at(-1);
+        const result = await tool.execute({
+            name: 'Central Alberta News',
+            town: 'blackfalds',
+            tagline: 'Local first',
+        });
+        expect(result).toBe('Staged 3 changes for review');
+        expect(screen.getByRole('textbox', { name: 'Network name' })).toHaveValue('');
+        await waitFor(() => expect(screen.getByRole('region', { name: 'Review proposed changes' })).toBeInTheDocument());
+        expect(registry.get({ formId: 'setup-network', controlId: 'name' })?.state.staged
+            ?.value).toBe('Central Alberta News');
+        expect(screen.queryByText(/setup-network\//)).not.toBeInTheDocument();
+    });
+    it('marks a staged smrt-ui proposal stale when the person types over it', async () => {
+        const registered = captureTools();
+        const registry = createControlInteractionRegistry();
+        render(Fixture, { props: { interactionRegistry: registry } });
+        await tick();
+        await vi.waitFor(() => expect(registered.length).toBeGreaterThan(0));
+        await registered.at(-1).execute({ name: 'Proposed' });
+        await userEvent.type(screen.getByRole('textbox', { name: 'Network name' }), 'Mine');
+        await waitFor(() => expect(registry.get({ formId: 'setup-network', controlId: 'name' })?.state
+            .staged?.stale).toBe(true));
+    });
+});

package/dist/components/forms/__tests__/Form.webmcp.test.js

@@ -1251,7 +1251,9 @@ describe('Form WebMCP staged-edit intent', () => {
         const fullname = screen.getByRole('textbox', { name: 'Full name' });
         expect(fullname).toHaveAttribute('data-smrt-subject-type', 'person');
         expect(fullname).toHaveAttribute('data-smrt-subject-id', 'person-1');
-        expect(await screen.findByText(/person:person-1/)).toBeInTheDocument();
+        // The review names the field, not the registry subject (plain labels).
+        expect(await screen.findByRole('button', { name: 'Apply Full name' })).toBeInTheDocument();
+        expect(screen.queryByText(/person:person-1/)).not.toBeInTheDocument();
         await view.rerender({
             webmcp: true,
             showAge: false,
@@ -1263,12 +1265,12 @@ describe('Form WebMCP staged-edit intent', () => {
         await vi.waitFor(() => expect(registered.length).toBeGreaterThan(_regLenBefore));
         expect(await registered.at(-1)?.execute({ fullname: 'Grace' })).toBe('Staged 1 change for review');
         expect(fullname).toHaveAttribute('data-smrt-subject-id', 'person-2');
-        expect(await screen.findByText(/person:person-2/)).toBeInTheDocument();
+        expect(await screen.findByRole('button', { name: 'Apply Full name' })).toBeInTheDocument();
         await userEvent.click(screen.getByRole('button', { name: 'Mutate subject' }));
         await tick();
         expect(await registered.at(-1)?.execute({ fullname: 'Katherine' })).toBe('Staged 1 change for review');
         expect(fullname).toHaveAttribute('data-smrt-subject-id', 'person-mutated');
-        expect(await screen.findByText(/person:person-mutated/)).toBeInTheDocument();
+        expect(await screen.findByRole('button', { name: 'Apply Full name' })).toBeInTheDocument();
     });
     it('publishes money in integer minor units and applies cents without rescaling', async () => {
         const registered = [];

package/dist/components/forms/__tests__/FormScope.test.js

@@ -0,0 +1,39 @@
+import { createControlInteractionRegistry } from '@happyvertical/smrt-ui/forms';
+import { render, screen, waitFor } from '@testing-library/svelte';
+import { tick } from 'svelte';
+import { afterEach, describe, expect, it, vi } from 'vitest';
+import Fixture from './form-scope.fixture.svelte';
+afterEach(() => {
+    delete document.modelContext;
+});
+describe('FormScope', () => {
+    it('registers a stage-only tool for the smrt-ui controls inside a plain container', async () => {
+        const registered = [];
+        document.modelContext = {
+            async registerTool(tool) {
+                registered.push(tool);
+            },
+        };
+        const registry = createControlInteractionRegistry();
+        const { container, rerender } = render(Fixture, {
+            props: { interactionRegistry: registry },
+        });
+        expect(container.querySelector('form')).toBeNull();
+        await tick();
+        await vi.waitFor(() => expect(registered.length).toBeGreaterThan(0));
+        const tool = registered.at(-1);
+        expect(tool.name).toBe('new_site_stage_changes');
+        expect(Object.keys(tool.inputSchema.properties).sort()).toEqual([
+            'name',
+            'town',
+        ]);
+        const result = JSON.parse(await tool.execute({ name: 'Lacombe News', key: 'x' }));
+        expect(result).toMatchObject({ ok: true, staged: 1, skipped: ['key'] });
+        expect(screen.getByRole('textbox', { name: 'Site name' })).toHaveValue('');
+        await waitFor(() => expect(screen.getByRole('region', { name: 'Review proposed changes' })).toBeInTheDocument());
+        const before = registered.length;
+        await rerender({ interactionRegistry: registry, showTown: false });
+        await vi.waitFor(() => expect(registered.length).toBeGreaterThan(before));
+        expect(Object.keys(registered.at(-1).inputSchema.properties)).toEqual(['name']);
+    });
+});

package/dist/components/forms/__tests__/form-scope.fixture.svelte

@@ -0,0 +1,30 @@
+<script lang="ts">
+import {
+  type ControlInteractionRegistry,
+  FormGroup,
+  Input,
+} from '@happyvertical/smrt-ui/forms';
+import FormScope from '../FormScope.svelte';
+
+let {
+  interactionRegistry = undefined,
+  showTown = true,
+}: {
+  interactionRegistry?: ControlInteractionRegistry;
+  showTown?: boolean;
+} = $props();
+let name = $state('');
+let town = $state('');
+let secret = $state('');
+</script>
+
+<FormScope formId="new-site" purpose="Start a new town site" {interactionRegistry}>
+  <div class="wizard">
+    <FormGroup label="Site name" id="site-name"><Input name="name" bind:value={name} /></FormGroup>
+    {#if showTown}
+      <FormGroup label="Town" id="site-town"><Input name="town" bind:value={town} /></FormGroup>
+    {/if}
+    <FormGroup label="Access key" id="site-key"><Input name="key" type="password" bind:value={secret} /></FormGroup>
+    <button type="button">Continue</button>
+  </div>
+</FormScope>

package/dist/components/forms/__tests__/form-scope.fixture.svelte.d.ts

@@ -0,0 +1,10 @@
+import { type ControlInteractionRegistry } from '@happyvertical/smrt-ui/forms';
+import FormScope from '../FormScope.svelte';
+type $$ComponentProps = {
+    interactionRegistry?: ControlInteractionRegistry;
+    showTown?: boolean;
+};
+declare const FormScope: import("svelte").Component<$$ComponentProps, {}, "">;
+type FormScope = ReturnType<typeof FormScope>;
+export default FormScope;
+//# sourceMappingURL=form-scope.fixture.svelte.d.ts.map

package/dist/components/forms/__tests__/form-scope.fixture.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"form-scope.fixture.svelte.d.ts","sourceRoot":"","sources":["../../../../src/components/forms/__tests__/form-scope.fixture.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,EACL,KAAK,0BAA0B,EAGhC,MAAM,8BAA8B,CAAC;AACtC,OAAO,SAAS,MAAM,qBAAqB,CAAC;AAE3C,KAAK,gBAAgB,GAAI;IACxB,mBAAmB,CAAC,EAAE,0BAA0B,CAAC;IACjD,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,CAAC;AA2BF,QAAA,MAAM,SAAS,sDAAwC,CAAC;AACxD,KAAK,SAAS,GAAG,UAAU,CAAC,OAAO,SAAS,CAAC,CAAC;AAC9C,eAAe,SAAS,CAAC"}

package/dist/components/forms/__tests__/form-with-ui-controls.fixture.svelte

@@ -0,0 +1,84 @@
+<script lang="ts">
+/** Rich Form hosting smrt-ui primitives, native attributes, and `enhance`. */
+import {
+  Combobox,
+  type ControlInteractionRegistry,
+  FormGroup,
+  Input,
+  Select,
+} from '@happyvertical/smrt-ui/forms';
+import type { Attachment } from 'svelte/attachments';
+import Form, { type FormEnhance } from '../Form.svelte';
+import TextInput from '../TextInput.svelte';
+
+let {
+  enhance = undefined,
+  attach = undefined,
+  interactionRegistry = undefined,
+  nameValue = $bindable(''),
+}: {
+  enhance?: FormEnhance;
+  attach?: Attachment<HTMLFormElement>;
+  interactionRegistry?: ControlInteractionRegistry;
+  nameValue?: string;
+} = $props();
+let kind = $state('news');
+let town = $state('lacombe');
+let tagline = $state('');
+</script>
+
+{#if attach}
+  <Form
+    formId="setup-network"
+    webmcp
+    method="POST"
+    action="?/create"
+    enctype="multipart/form-data"
+    novalidate
+    aria-label="Set up your network"
+    data-testid="network-form"
+    {enhance}
+    {interactionRegistry}
+    {@attach attach}
+  >
+    {@render fields()}
+  </Form>
+{:else}
+  <Form
+    formId="setup-network"
+    webmcp
+    method="POST"
+    action="?/create"
+    enctype="multipart/form-data"
+    novalidate
+    aria-label="Set up your network"
+    data-testid="network-form"
+    {enhance}
+    {interactionRegistry}
+  >
+    {@render fields()}
+  </Form>
+{/if}
+
+{#snippet fields()}
+  <FormGroup label="Network name" id="name">
+    <Input name="name" bind:value={nameValue} />
+  </FormGroup>
+  <FormGroup label="Kind of network" id="kind">
+    <Select name="kind" bind:value={kind}>
+      <option value="news">News</option>
+      <option value="aggregator">Roundup</option>
+    </Select>
+  </FormGroup>
+  <Combobox
+    name="town"
+    label="Home town"
+    options={[
+      { value: 'lacombe', label: 'Lacombe' },
+      { value: 'blackfalds', label: 'Blackfalds' },
+    ]}
+    bind:value={town}
+  />
+  <TextInput name="tagline" label="Tagline" bind:value={tagline} />
+  <button type="submit">Create</button>
+{/snippet}

package/dist/components/forms/__tests__/form-with-ui-controls.fixture.svelte.d.ts

@@ -0,0 +1,14 @@
+/** Rich Form hosting smrt-ui primitives, native attributes, and `enhance`. */
+import { type ControlInteractionRegistry } from '@happyvertical/smrt-ui/forms';
+import type { Attachment } from 'svelte/attachments';
+import { type FormEnhance } from '../Form.svelte';
+type $$ComponentProps = {
+    enhance?: FormEnhance;
+    attach?: Attachment<HTMLFormElement>;
+    interactionRegistry?: ControlInteractionRegistry;
+    nameValue?: string;
+};
+declare const FormWithUiControls: import("svelte").Component<$$ComponentProps, {}, "nameValue">;
+type FormWithUiControls = ReturnType<typeof FormWithUiControls>;
+export default FormWithUiControls;
+//# sourceMappingURL=form-with-ui-controls.fixture.svelte.d.ts.map

package/dist/components/forms/__tests__/form-with-ui-controls.fixture.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"form-with-ui-controls.fixture.svelte.d.ts","sourceRoot":"","sources":["../../../../src/components/forms/__tests__/form-with-ui-controls.fixture.svelte.ts"],"names":[],"mappings":"AAGA,8EAA8E;AAC9E,OAAO,EAEL,KAAK,0BAA0B,EAIhC,MAAM,8BAA8B,CAAC;AACtC,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC;AACrD,OAAa,EAAE,KAAK,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAGvD,KAAK,gBAAgB,GAAI;IACxB,OAAO,CAAC,EAAE,WAAW,CAAC;IACtB,MAAM,CAAC,EAAE,UAAU,CAAC,eAAe,CAAC,CAAC;IACrC,mBAAmB,CAAC,EAAE,0BAA0B,CAAC;IACjD,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAiDF,QAAA,MAAM,kBAAkB,+DAAwC,CAAC;AACjE,KAAK,kBAAkB,GAAG,UAAU,CAAC,OAAO,kBAAkB,CAAC,CAAC;AAChE,eAAe,kBAAkB,CAAC"}

package/dist/components/forms/index.d.ts

@@ -16,6 +16,7 @@ export { default as DateTimeInput } from './DateTimeInput.svelte';
 export { default as FileUpload } from './FileUpload.svelte';
 export { default as Form } from './Form.svelte';
 export { default as FormMicButton } from './FormMicButton.svelte';
+export { default as FormScope } from './FormScope.svelte';
 export { default as MeasurementInput } from './MeasurementInput.svelte';
 export { default as MoneyInput } from './MoneyInput.svelte';
 export { default as NumberInput } from './NumberInput.svelte';

package/dist/components/forms/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/forms/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AAGH,OAAO,EACL,SAAS,EACT,KAAK,EACL,MAAM,EACN,QAAQ,EACR,MAAM,GACP,MAAM,8BAA8B,CAAC;AAGtC,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,uBAAuB,CAAC;AAChE,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,wBAAwB,CAAC;AAClE,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,yBAAyB,CAAC;AACpE,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,wBAAwB,CAAC;AAClE,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,qBAAqB,CAAC;AAC5D,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,eAAe,CAAC;AAChD,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,wBAAwB,CAAC;AAClE,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,2BAA2B,CAAC;AACxE,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,qBAAqB,CAAC;AAC5D,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAC9D,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,qBAAqB,CAAC;AAC5D,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAC9D,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAC9D,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,wBAAwB,CAAC;AAClE,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAG1D,YAAY,EACV,YAAY,EACZ,cAAc,EACd,UAAU,EACV,eAAe,EACf,gBAAgB,EAChB,YAAY,EACZ,cAAc,GACf,MAAM,YAAY,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/forms/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AAGH,OAAO,EACL,SAAS,EACT,KAAK,EACL,MAAM,EACN,QAAQ,EACR,MAAM,GACP,MAAM,8BAA8B,CAAC;AAGtC,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,uBAAuB,CAAC;AAChE,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,wBAAwB,CAAC;AAClE,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,yBAAyB,CAAC;AACpE,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,wBAAwB,CAAC;AAClE,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,qBAAqB,CAAC;AAC5D,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,eAAe,CAAC;AAChD,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,wBAAwB,CAAC;AAClE,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAC1D,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,2BAA2B,CAAC;AACxE,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,qBAAqB,CAAC;AAC5D,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAC9D,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,qBAAqB,CAAC;AAC5D,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAC9D,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAC9D,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,wBAAwB,CAAC;AAClE,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAG1D,YAAY,EACV,YAAY,EACZ,cAAc,EACd,UAAU,EACV,eAAe,EACf,gBAAgB,EAChB,YAAY,EACZ,cAAc,GACf,MAAM,YAAY,CAAC"}

package/dist/components/forms/index.js

@@ -18,6 +18,7 @@ export { default as DateTimeInput } from './DateTimeInput.svelte';
 export { default as FileUpload } from './FileUpload.svelte';
 export { default as Form } from './Form.svelte';
 export { default as FormMicButton } from './FormMicButton.svelte';
+export { default as FormScope } from './FormScope.svelte';
 export { default as MeasurementInput } from './MeasurementInput.svelte';
 export { default as MoneyInput } from './MoneyInput.svelte';
 export { default as NumberInput } from './NumberInput.svelte';