@happyvertical/smrt-ui 0.38.26 → 0.39.0

package/dist/components/forms/ToggleButton.svelte

@@ -0,0 +1,79 @@
+<script lang="ts">
+import type { Snippet } from 'svelte';
+import type { HTMLButtonAttributes } from 'svelte/elements';
+import {
+  emitControlChange,
+  highlightControl,
+  revealControl,
+} from './control-dom.js';
+import type { ControlInteractionOptions } from './control-interaction.js';
+import { tryGetControlInteractionContext } from './control-interaction-context.js';
+import { useControlRegistration } from './use-control-registration.svelte.js';
+
+export interface Props extends Omit<HTMLButtonAttributes, 'class'> {
+  pressed?: boolean;
+  class?: string;
+  interaction?: ControlInteractionOptions | false;
+  children?: Snippet;
+}
+let {
+  pressed = $bindable(false),
+  id,
+  name,
+  disabled = false,
+  class: className = '',
+  interaction,
+  children,
+  onclick,
+  'aria-label': ariaLabel,
+  ...rest
+}: Props = $props();
+const instanceId = $props.id();
+const interactionContext = tryGetControlInteractionContext();
+let buttonEl = $state<HTMLButtonElement | null>(null);
+const resolvedId = $derived(id ?? `smrt-toggle-button-${instanceId}`);
+const controlId = $derived(
+  interaction === false ? undefined : (interaction?.id ?? name ?? resolvedId),
+);
+function setPressed(next: unknown) {
+  pressed = Boolean(next);
+  if (buttonEl) emitControlChange(buttonEl);
+}
+function handleClick(event: MouseEvent & { currentTarget: HTMLButtonElement }) {
+  pressed = !pressed;
+  onclick?.(event);
+}
+useControlRegistration(() => {
+  const element = buttonEl;
+  if (!element || interaction === false) return false;
+  return {
+    controlId,
+    subject: interaction?.subject,
+    metadata: {
+      kind: 'toggle-button',
+      label: ariaLabel ?? (element.textContent?.trim() || undefined),
+      description: interaction?.description,
+      sensitivity: interaction?.sensitivity ?? 'public',
+      readable: interaction?.readable,
+      writable: interaction?.writable,
+    },
+    getValue: () => pressed,
+    setValue: setPressed,
+    clear: () => setPressed(false),
+    focus: () => element.focus(),
+    reveal: () => revealControl(element),
+    highlight: (durationMs) => highlightControl(element, durationMs),
+    getState: () => ({ disabled: element.disabled }),
+  };
+});
+</script>
+<button bind:this={buttonEl} id={resolvedId} type="button" {name} {disabled} class="toggle-button {className}" class:pressed
+  aria-pressed={pressed} aria-label={ariaLabel} data-smrt-control={controlId} data-smrt-form={interactionContext?.formId}
+  onclick={handleClick} {...rest}>{@render children?.()}</button>
+<style>
+  .toggle-button { display: inline-flex; align-items: center; justify-content: center; min-height: 2.5rem; padding: 0 var(--smrt-spacing-4); border: 1px solid var(--smrt-color-outline); border-radius: var(--smrt-radius-full); background: var(--smrt-color-surface); color: var(--smrt-color-on-surface); cursor: pointer; }
+  .toggle-button.pressed { background: var(--smrt-color-secondary-container); color: var(--smrt-color-on-secondary-container); border-color: var(--smrt-color-secondary); }
+  .toggle-button:focus-visible { outline: 2px solid var(--smrt-color-primary); outline-offset: 2px; }
+  .toggle-button:disabled { opacity: .5; cursor: not-allowed; }
+  .toggle-button[data-smrt-highlighted='true'] { outline: 3px solid var(--smrt-color-tertiary); outline-offset: 4px; }
+</style>

package/dist/components/forms/ToggleButton.svelte.d.ts

@@ -0,0 +1,13 @@
+import type { Snippet } from 'svelte';
+import type { HTMLButtonAttributes } from 'svelte/elements';
+import type { ControlInteractionOptions } from './control-interaction.js';
+export interface Props extends Omit<HTMLButtonAttributes, 'class'> {
+    pressed?: boolean;
+    class?: string;
+    interaction?: ControlInteractionOptions | false;
+    children?: Snippet;
+}
+declare const ToggleButton: import("svelte").Component<Props, {}, "pressed">;
+type ToggleButton = ReturnType<typeof ToggleButton>;
+export default ToggleButton;
+//# sourceMappingURL=ToggleButton.svelte.d.ts.map

package/dist/components/forms/ToggleButton.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToggleButton.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/forms/ToggleButton.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AACtC,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,iBAAiB,CAAC;AAM5D,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,0BAA0B,CAAC;AAK1E,MAAM,WAAW,KAAM,SAAQ,IAAI,CAAC,oBAAoB,EAAE,OAAO,CAAC;IAChE,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,yBAAyB,GAAG,KAAK,CAAC;IAChD,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAiED,QAAA,MAAM,YAAY,kDAAwC,CAAC;AAC3D,KAAK,YAAY,GAAG,UAAU,CAAC,OAAO,YAAY,CAAC,CAAC;AACpD,eAAe,YAAY,CAAC"}

package/dist/components/forms/__tests__/composite-controls.fixture.svelte

@@ -0,0 +1,29 @@
+<script lang="ts">
+import Combobox from '../Combobox.svelte';
+import type { ControlInteractionRegistry } from '../control-interaction.js';
+import Form from '../Form.svelte';
+import Listbox from '../Listbox.svelte';
+import MultiSelect from '../MultiSelect.svelte';
+import TagsInput from '../TagsInput.svelte';
+
+interface Props {
+  registry: ControlInteractionRegistry;
+}
+let { registry }: Props = $props();
+const countries = [
+  { value: 'ca', label: 'Canada' },
+  { value: 'us', label: 'United States' },
+  { value: 'mx', label: 'Mexico' },
+];
+let country = $state('');
+let channels = $state<Array<string | number>>([]);
+let tags = $state<string[]>([]);
+let region = $state<string | number>('west');
+</script>
+
+<Form formId="profile" interactionRegistry={registry} aria-label="Profile">
+  <Combobox name="country" label="Country" options={countries} bind:value={country} />
+  <MultiSelect name="channels" label="Channels" options={[{ value: 'email', label: 'Email' }, { value: 'sms', label: 'SMS' }]} bind:values={channels} />
+  <TagsInput name="topics" label="Topics" bind:values={tags} />
+  <Listbox name="region" label="Region" options={[{ value: 'west', label: 'West' }, { value: 'east', label: 'East' }]} bind:value={region} />
+</Form>

package/dist/components/forms/__tests__/composite-controls.fixture.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { ControlInteractionRegistry } from '../control-interaction.js';
+interface Props {
+    registry: ControlInteractionRegistry;
+}
+declare const CompositeControls: import("svelte").Component<Props, {}, "">;
+type CompositeControls = ReturnType<typeof CompositeControls>;
+export default CompositeControls;
+//# sourceMappingURL=composite-controls.fixture.svelte.d.ts.map

package/dist/components/forms/__tests__/composite-controls.fixture.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"composite-controls.fixture.svelte.d.ts","sourceRoot":"","sources":["../../../../src/components/forms/__tests__/composite-controls.fixture.svelte.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,0BAA0B,EAAE,MAAM,2BAA2B,CAAC;AAO5E,UAAU,KAAK;IACb,QAAQ,EAAE,0BAA0B,CAAC;CACtC;AA8BD,QAAA,MAAM,iBAAiB,2CAAwC,CAAC;AAChE,KAAK,iBAAiB,GAAG,UAAU,CAAC,OAAO,iBAAiB,CAAC,CAAC;AAC9D,eAAe,iBAAiB,CAAC"}

package/dist/components/forms/__tests__/composite-controls.test.js

@@ -0,0 +1,33 @@
+import { render, screen } from '@testing-library/svelte';
+import userEvent from '@testing-library/user-event';
+import { describe, expect, it } from 'vitest';
+import { expectNoA11yViolations } from '../../../test-support/a11y';
+import { createControlInteractionRegistry } from '../control-interaction.js';
+import Fixture from './composite-controls.fixture.svelte';
+describe('composite controls', () => {
+    it('supports searchable, multiple, tag, and listbox selection', async () => {
+        const registry = createControlInteractionRegistry();
+        render(Fixture, { props: { registry } });
+        const country = screen.getByRole('combobox', { name: 'Country' });
+        await userEvent.type(country, 'Can');
+        await userEvent.click(screen.getByRole('option', { name: 'Canada' }));
+        expect(country).toHaveValue('Canada');
+        await userEvent.click(screen.getByRole('button', { name: /Channels.*Select options/ }));
+        await userEvent.click(screen.getByRole('option', { name: 'Email' }));
+        expect(screen.getByRole('option', { name: 'Email' })).toHaveAttribute('aria-selected', 'true');
+        await userEvent.type(screen.getByRole('textbox', { name: 'Topics' }), 'svelte{Enter}');
+        expect(screen.getByText('svelte')).toBeInTheDocument();
+        await userEvent.click(screen.getByRole('option', { name: 'East' }));
+        expect(screen.getByRole('option', { name: 'East' })).toHaveAttribute('aria-selected', 'true');
+    });
+    it('registers stable controls for agent adapters', () => {
+        const registry = createControlInteractionRegistry();
+        render(Fixture, { props: { registry } });
+        expect(registry.list('profile').map((item) => item.identity.controlId)).toEqual(['country', 'channels', 'topics', 'region']);
+    });
+    it('is axe-clean', async () => {
+        const registry = createControlInteractionRegistry();
+        const { container } = render(Fixture, { props: { registry } });
+        await expectNoA11yViolations(container);
+    });
+});

package/dist/components/forms/__tests__/control-interaction.test.js

@@ -0,0 +1,95 @@
+import { describe, expect, it, vi } from 'vitest';
+import { createControlInteractionRegistry, } from '../control-interaction.js';
+const identity = {
+    formId: 'profile',
+    controlId: 'display-name',
+};
+describe('control interaction registry', () => {
+    it('discovers serializable metadata and current state', () => {
+        let value = 'Ada';
+        const registry = createControlInteractionRegistry();
+        registry.register({
+            identity,
+            metadata: { kind: 'text', label: 'Display name' },
+            getValue: () => value,
+            setValue: (next) => {
+                value = String(next);
+            },
+            getState: () => ({ valid: true }),
+        });
+        expect(registry.list('profile')).toEqual([
+            expect.objectContaining({
+                identity,
+                metadata: expect.objectContaining({
+                    kind: 'text',
+                    label: 'Display name',
+                    capabilities: expect.arrayContaining(['read', 'stage', 'apply']),
+                }),
+                state: expect.objectContaining({ value: 'Ada', valid: true }),
+            }),
+        ]);
+    });
+    it('stages without mutation, requires agent consent to apply, and supports undo', async () => {
+        let value = 'Ada';
+        const setValue = vi.fn((next) => {
+            value = String(next);
+        });
+        const registry = createControlInteractionRegistry();
+        registry.register({
+            identity,
+            metadata: { kind: 'text', label: 'Display name' },
+            getValue: () => value,
+            setValue,
+        });
+        await registry.execute({ action: 'stage', identity, value: 'Grace' }, { source: 'agent' });
+        expect(value).toBe('Ada');
+        expect(registry.get(identity)?.state.stagedValue).toBe('Grace');
+        const denied = await registry.execute({ action: 'apply', identity }, { source: 'agent' });
+        expect(denied).toMatchObject({ ok: false, reason: 'consent_required' });
+        const applied = await registry.execute({ action: 'apply', identity }, { source: 'agent', confirmed: true });
+        expect(applied.ok).toBe(true);
+        expect(value).toBe('Grace');
+        await registry.execute({ action: 'undo', identity }, { source: 'agent', confirmed: true });
+        expect(value).toBe('Ada');
+    });
+    it('redacts and denies secret controls by default', async () => {
+        let value = 'token';
+        const registry = createControlInteractionRegistry();
+        registry.register({
+            identity,
+            metadata: { kind: 'password', sensitivity: 'secret' },
+            getValue: () => value,
+            setValue: (next) => {
+                value = String(next);
+            },
+        });
+        const snapshot = registry.get(identity);
+        expect(snapshot?.state).toMatchObject({
+            value: undefined,
+            valueRedacted: true,
+        });
+        expect(snapshot?.metadata.capabilities).not.toEqual(expect.arrayContaining(['read', 'stage', 'apply', 'clear', 'undo']));
+        const result = await registry.execute({ action: 'stage', identity, value: 'replacement' }, { source: 'agent' });
+        expect(result).toMatchObject({ ok: false, reason: 'sensitive_control' });
+        expect(value).toBe('token');
+    });
+    it('runs focus, reveal, and highlight without coupling to a DOM implementation', async () => {
+        const focus = vi.fn();
+        const reveal = vi.fn();
+        const highlight = vi.fn();
+        const registry = createControlInteractionRegistry();
+        registry.register({
+            identity,
+            metadata: { kind: 'text' },
+            focus,
+            reveal,
+            highlight,
+        });
+        await registry.execute({ action: 'focus', identity });
+        await registry.execute({ action: 'reveal', identity });
+        await registry.execute({ action: 'highlight', identity, durationMs: 400 });
+        expect(focus).toHaveBeenCalledOnce();
+        expect(reveal).toHaveBeenCalledOnce();
+        expect(highlight).toHaveBeenCalledWith(400);
+    });
+});

package/dist/components/forms/__tests__/core-controls.fixture.svelte

@@ -0,0 +1,39 @@
+<script lang="ts">
+import Checkbox from '../Checkbox.svelte';
+import type { ControlInteractionRegistry } from '../control-interaction.js';
+import Form from '../Form.svelte';
+import Radio from '../Radio.svelte';
+import RadioGroup from '../RadioGroup.svelte';
+import RangeSlider from '../RangeSlider.svelte';
+import SegmentedControl from '../SegmentedControl.svelte';
+import Slider from '../Slider.svelte';
+import Switch from '../Switch.svelte';
+
+interface Props {
+  registry: ControlInteractionRegistry;
+}
+let { registry }: Props = $props();
+let accepted = $state(false);
+let notifications = $state(false);
+let role = $state('editor');
+let volume = $state(30);
+let range = $state({ min: 20, max: 80 });
+let view = $state<string | number>('grid');
+</script>
+
+<Form formId="settings" interactionRegistry={registry} aria-label="Settings">
+  <Checkbox name="accepted" label="Accept terms" bind:checked={accepted} />
+  <Switch name="notifications" label="Notifications" bind:checked={notifications} />
+  <RadioGroup name="role" label="Role" bind:value={role}>
+    <Radio value="editor" label="Editor" />
+    <Radio value="viewer" label="Viewer" />
+  </RadioGroup>
+  <Slider name="volume" label="Volume" bind:value={volume} />
+  <RangeSlider name="price" label="Price" bind:value={range} />
+  <SegmentedControl
+    name="view"
+    label="View"
+    options={[{ value: 'grid', label: 'Grid' }, { value: 'list', label: 'List' }]}
+    bind:value={view}
+  />
+</Form>

package/dist/components/forms/__tests__/core-controls.fixture.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { ControlInteractionRegistry } from '../control-interaction.js';
+interface Props {
+    registry: ControlInteractionRegistry;
+}
+declare const CoreControls: import("svelte").Component<Props, {}, "">;
+type CoreControls = ReturnType<typeof CoreControls>;
+export default CoreControls;
+//# sourceMappingURL=core-controls.fixture.svelte.d.ts.map

package/dist/components/forms/__tests__/core-controls.fixture.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"core-controls.fixture.svelte.d.ts","sourceRoot":"","sources":["../../../../src/components/forms/__tests__/core-controls.fixture.svelte.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,0BAA0B,EAAE,MAAM,2BAA2B,CAAC;AAU5E,UAAU,KAAK;IACb,QAAQ,EAAE,0BAA0B,CAAC;CACtC;AAmCD,QAAA,MAAM,YAAY,2CAAwC,CAAC;AAC3D,KAAK,YAAY,GAAG,UAAU,CAAC,OAAO,YAAY,CAAC,CAAC;AACpD,eAAe,YAAY,CAAC"}

package/dist/components/forms/__tests__/core-controls.test.js

@@ -0,0 +1,90 @@
+import { render, screen } from '@testing-library/svelte';
+import userEvent from '@testing-library/user-event';
+import { describe, expect, it } from 'vitest';
+import { expectNoA11yViolations } from '../../../test-support/a11y';
+import Progress from '../../feedback/Progress.svelte';
+import Spinner from '../../feedback/Spinner.svelte';
+import { createControlInteractionRegistry } from '../control-interaction.js';
+import ErrorSummary from '../ErrorSummary.svelte';
+import Fixture from './core-controls.fixture.svelte';
+describe('core controls', () => {
+    it('provides distinct checkbox, switch, radio, slider, range, and segmented semantics', async () => {
+        const registry = createControlInteractionRegistry();
+        render(Fixture, { props: { registry } });
+        await userEvent.click(screen.getByRole('checkbox', { name: 'Accept terms' }));
+        expect(screen.getByRole('checkbox', { name: 'Accept terms' })).toBeChecked();
+        await userEvent.click(screen.getByRole('switch', { name: 'Notifications' }));
+        expect(screen.getByRole('switch', { name: 'Notifications' })).toBeChecked();
+        await userEvent.click(screen.getByRole('radio', { name: 'Viewer' }));
+        expect(screen.getByRole('radio', { name: 'Viewer' })).toBeChecked();
+        expect(screen.getAllByRole('slider')).toHaveLength(3);
+        await userEvent.click(screen.getByRole('radio', { name: 'List' }));
+        expect(screen.getByRole('radio', { name: 'List' })).toHaveAttribute('aria-checked', 'true');
+    });
+    it('registers all controls and lets an agent stage before confirmed apply', async () => {
+        const registry = createControlInteractionRegistry();
+        render(Fixture, { props: { registry } });
+        expect(registry.list('settings').map((item) => item.identity.controlId)).toEqual(expect.arrayContaining([
+            'accepted',
+            'notifications',
+            'role',
+            'volume',
+            'price',
+            'view',
+        ]));
+        await registry.execute({
+            action: 'stage',
+            identity: { formId: 'settings', controlId: 'volume' },
+            value: 55,
+        }, { source: 'agent' });
+        expect(screen.getByRole('slider', { name: 'Volume' })).toHaveValue('30');
+        await registry.execute({
+            action: 'apply',
+            identity: { formId: 'settings', controlId: 'volume' },
+        }, { source: 'agent', confirmed: true });
+        expect(screen.getByRole('slider', { name: 'Volume' })).toHaveValue('55');
+    });
+    it('is axe-clean as a composed form', async () => {
+        const registry = createControlInteractionRegistry();
+        const { container } = render(Fixture, { props: { registry } });
+        await expectNoA11yViolations(container);
+    });
+    it('focuses the usable control inside an error-summary target', async () => {
+        const { container } = render(ErrorSummary, {
+            props: {
+                errors: [
+                    {
+                        controlId: 'profile-photo',
+                        label: 'Profile photo',
+                        message: 'Choose a file',
+                    },
+                ],
+            },
+        });
+        const wrapper = document.createElement('div');
+        wrapper.dataset.smrtControl = 'profile-photo';
+        wrapper.scrollIntoView = () => undefined;
+        const hidden = document.createElement('input');
+        hidden.type = 'hidden';
+        const file = document.createElement('input');
+        file.type = 'file';
+        wrapper.append(hidden, file);
+        container.append(wrapper);
+        await userEvent.click(screen.getByRole('button', { name: 'Profile photo: Choose a file' }));
+        expect(file).toHaveFocus();
+    });
+});
+describe('progress feedback', () => {
+    it('distinguishes determinate and indeterminate progress', async () => {
+        const { rerender } = render(Progress, {
+            props: { label: 'Import', value: 40, showValue: true },
+        });
+        expect(screen.getByRole('progressbar', { name: 'Import' })).toHaveAttribute('aria-valuenow', '40');
+        await rerender({ label: 'Import', value: undefined });
+        expect(screen.getByRole('progressbar', { name: 'Import' })).not.toHaveAttribute('aria-valuenow');
+    });
+    it('announces a spinner label', () => {
+        render(Spinner, { props: { label: 'Saving changes' } });
+        expect(screen.getByRole('status')).toHaveTextContent('Saving changes');
+    });
+});

package/dist/components/forms/control-dom.d.ts

@@ -0,0 +1,6 @@
+/** DOM adapter helpers shared by addressable control Implementations. */
+export declare function focusControl(node: HTMLElement): void;
+export declare function revealControl(node: HTMLElement): void;
+export declare function highlightControl(node: HTMLElement, durationMs?: number): void;
+export declare function emitControlChange(node: HTMLElement): void;
+//# sourceMappingURL=control-dom.d.ts.map

package/dist/components/forms/control-dom.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"control-dom.d.ts","sourceRoot":"","sources":["../../../src/components/forms/control-dom.ts"],"names":[],"mappings":"AAAA,yEAAyE;AAYzE,wBAAgB,YAAY,CAAC,IAAI,EAAE,WAAW,GAAG,IAAI,CAKpD;AAED,wBAAgB,aAAa,CAAC,IAAI,EAAE,WAAW,GAAG,IAAI,CAMrD;AAED,wBAAgB,gBAAgB,CAAC,IAAI,EAAE,WAAW,EAAE,UAAU,SAAO,GAAG,IAAI,CAK3E;AAED,wBAAgB,iBAAiB,CAAC,IAAI,EAAE,WAAW,GAAG,IAAI,CAMzD"}

package/dist/components/forms/control-dom.js

@@ -0,0 +1,38 @@
+/** DOM adapter helpers shared by addressable control Implementations. */
+const focusableControlSelector = [
+    'input:not([type="hidden"]):not(:disabled)',
+    'select:not(:disabled)',
+    'textarea:not(:disabled)',
+    'button:not(:disabled)',
+    'a[href]',
+    '[tabindex]:not([tabindex="-1"]):not([type="hidden"])',
+    '[contenteditable="true"]',
+].join(',');
+export function focusControl(node) {
+    const target = node.matches(focusableControlSelector)
+        ? node
+        : node.querySelector(focusableControlSelector);
+    target?.focus();
+}
+export function revealControl(node) {
+    node.scrollIntoView({
+        block: 'center',
+        inline: 'nearest',
+        behavior: 'smooth',
+    });
+}
+export function highlightControl(node, durationMs = 1600) {
+    node.dataset.smrtHighlighted = 'true';
+    globalThis.setTimeout(() => {
+        if (node.isConnected)
+            delete node.dataset.smrtHighlighted;
+    }, durationMs);
+}
+export function emitControlChange(node) {
+    queueMicrotask(() => {
+        if (!node.isConnected)
+            return;
+        node.dispatchEvent(new Event('input', { bubbles: true }));
+        node.dispatchEvent(new Event('change', { bubbles: true }));
+    });
+}

package/dist/components/forms/control-interaction-context.d.ts

@@ -0,0 +1,9 @@
+import type { ControlInteractionRegistry } from './control-interaction.js';
+export interface ControlInteractionContextValue {
+    readonly formId: string;
+    readonly registry: ControlInteractionRegistry;
+}
+export declare function setControlInteractionContext(context: ControlInteractionContextValue): void;
+export declare function tryGetControlInteractionContext(): ControlInteractionContextValue | undefined;
+export declare function getControlInteractionContext(): ControlInteractionContextValue;
+//# sourceMappingURL=control-interaction-context.d.ts.map

package/dist/components/forms/control-interaction-context.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"control-interaction-context.d.ts","sourceRoot":"","sources":["../../../src/components/forms/control-interaction-context.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,0BAA0B,EAAE,MAAM,0BAA0B,CAAC;AAI3E,MAAM,WAAW,8BAA8B;IAC7C,QAAQ,CAAC,MAAM,EAAE,MAAM,CAAC;IACxB,QAAQ,CAAC,QAAQ,EAAE,0BAA0B,CAAC;CAC/C;AAED,wBAAgB,4BAA4B,CAC1C,OAAO,EAAE,8BAA8B,GACtC,IAAI,CAEN;AAED,wBAAgB,+BAA+B,IAC3C,8BAA8B,GAC9B,SAAS,CAIZ;AAED,wBAAgB,4BAA4B,IAAI,8BAA8B,CAQ7E"}

package/dist/components/forms/control-interaction-context.js

@@ -0,0 +1,15 @@
+import { getContext, setContext } from 'svelte';
+const CONTROL_INTERACTION_KEY = Symbol('smrt-control-interaction');
+export function setControlInteractionContext(context) {
+    setContext(CONTROL_INTERACTION_KEY, context);
+}
+export function tryGetControlInteractionContext() {
+    return getContext(CONTROL_INTERACTION_KEY);
+}
+export function getControlInteractionContext() {
+    const context = tryGetControlInteractionContext();
+    if (!context) {
+        throw new Error('Control interaction context not found. Wrap controls in <Form>.');
+    }
+    return context;
+}

package/dist/components/forms/control-interaction.d.ts

@@ -0,0 +1,147 @@
+/**
+ * Transport-neutral interaction model for addressable form controls.
+ *
+ * The registry deliberately knows nothing about chat, agents, WebMCP, or the
+ * DOM. Controls register serializable metadata plus small imperative handles;
+ * adapters translate voice/chat/tutorial requests into commands.
+ */
+export type ControlKind = 'text' | 'email' | 'password' | 'number' | 'date' | 'time' | 'datetime' | 'textarea' | 'select' | 'listbox' | 'combobox' | 'multi-select' | 'tags-input' | 'checkbox' | 'radio-group' | 'switch' | 'toggle-button' | 'slider' | 'range-slider' | 'segmented-control' | 'file' | 'custom';
+export type ControlSensitivity = 'public' | 'personal' | 'sensitive' | 'secret';
+export type ControlCapability = 'read' | 'focus' | 'reveal' | 'highlight' | 'explain' | 'validate' | 'stage' | 'apply' | 'clear' | 'undo';
+export interface ControlSubject {
+    type: string;
+    id: string;
+    label?: string;
+}
+/** Stable address for a control, following AdminShell's Tool Identity pattern. */
+export interface ControlIdentity {
+    formId: string;
+    controlId: string;
+    subject?: ControlSubject;
+}
+export interface ControlOption {
+    value: string | number;
+    label: string;
+    disabled?: boolean;
+}
+export interface ControlConstraints {
+    required?: boolean;
+    min?: number | string;
+    max?: number | string;
+    step?: number | string;
+    minLength?: number;
+    maxLength?: number;
+    pattern?: string;
+}
+/** Optional declarative metadata shared by every control primitive. */
+export interface ControlInteractionOptions {
+    /** Stable id inside the enclosing form. Defaults to name, then DOM id. */
+    id?: string;
+    description?: string;
+    sensitivity?: ControlSensitivity;
+    readable?: boolean;
+    writable?: boolean;
+    subject?: ControlSubject;
+}
+export interface ControlMetadata {
+    kind: ControlKind;
+    label?: string;
+    description?: string;
+    sensitivity?: ControlSensitivity;
+    readable?: boolean;
+    writable?: boolean;
+    constraints?: ControlConstraints;
+    options?: ControlOption[];
+    unit?: string;
+    capabilities?: ControlCapability[];
+}
+export interface ControlRuntimeState {
+    disabled?: boolean;
+    readonly?: boolean;
+    valid?: boolean;
+    validationMessage?: string;
+}
+export interface ControlSnapshot {
+    identity: ControlIdentity;
+    metadata: ControlMetadata;
+    state: ControlRuntimeState & {
+        value?: unknown;
+        valueRedacted: boolean;
+        stagedValue?: unknown;
+        stagedValueRedacted?: boolean;
+    };
+}
+export interface ControlRegistration {
+    identity: ControlIdentity;
+    metadata: ControlMetadata;
+    getValue?: () => unknown;
+    setValue?: (value: unknown) => void | Promise<void>;
+    clear?: () => void | Promise<void>;
+    focus?: () => void | Promise<void>;
+    reveal?: () => void | Promise<void>;
+    highlight?: (durationMs?: number) => void | Promise<void>;
+    validate?: () => boolean | Promise<boolean>;
+    getState?: () => ControlRuntimeState;
+}
+export type ControlCommandAction = 'focus' | 'reveal' | 'highlight' | 'explain' | 'validate' | 'stage' | 'apply' | 'clear' | 'undo';
+export type ControlCommand = {
+    action: 'focus' | 'reveal' | 'explain' | 'validate' | 'undo';
+    identity: ControlIdentity;
+} | {
+    action: 'highlight';
+    identity: ControlIdentity;
+    durationMs?: number;
+} | {
+    action: 'stage';
+    identity: ControlIdentity;
+    value: unknown;
+} | {
+    action: 'apply';
+    identity: ControlIdentity;
+    value?: unknown;
+} | {
+    action: 'clear';
+    identity: ControlIdentity;
+};
+export type ControlCommandSource = 'user' | 'voice' | 'agent' | 'tutorial' | 'test';
+export interface ControlCommandContext {
+    source: ControlCommandSource;
+    /** Agent mutations require this explicit consent signal by default. */
+    confirmed?: boolean;
+    actorId?: string;
+    sessionId?: string;
+}
+export interface ControlPolicyDecision {
+    allowed: boolean;
+    reason?: string;
+}
+export type ControlInteractionPolicy = (command: ControlCommand, context: ControlCommandContext, snapshot: ControlSnapshot) => ControlPolicyDecision | Promise<ControlPolicyDecision>;
+export interface ControlCommandResult {
+    ok: boolean;
+    action: ControlCommandAction;
+    identity: ControlIdentity;
+    snapshot?: ControlSnapshot;
+    reason?: string;
+}
+export interface ControlInteractionEvent {
+    type: 'registered' | 'unregistered' | 'staged' | 'command';
+    identity: ControlIdentity;
+    command?: ControlCommand;
+    context?: ControlCommandContext;
+    result?: ControlCommandResult;
+    timestamp: number;
+}
+export interface ControlInteractionRegistry {
+    register(registration: ControlRegistration): () => void;
+    unregister(identity: ControlIdentity): void;
+    list(formId?: string): ControlSnapshot[];
+    get(identity: ControlIdentity): ControlSnapshot | undefined;
+    execute(command: ControlCommand, context?: ControlCommandContext): Promise<ControlCommandResult>;
+    subscribe(listener: (event: ControlInteractionEvent) => void): () => void;
+}
+export interface CreateControlInteractionRegistryOptions {
+    policy?: ControlInteractionPolicy;
+}
+/** Create an isolated registry; apps choose where and how it is exposed. */
+export declare function createControlInteractionRegistry(options?: CreateControlInteractionRegistryOptions): ControlInteractionRegistry;
+//# sourceMappingURL=control-interaction.d.ts.map