@happyvertical/smrt-svelte 0.43.3 → 0.43.5

package/dist/state/form-context.js

@@ -1,11 +1,83 @@
 /**
  * SMRT Form context for field registration and coordination
  */
-import { getContext, setContext } from 'svelte';
+import { getAllContexts, getContext, setContext } from 'svelte';
 /**
  * Context key for SMRT form
  */
 export const SMRT_FORM_KEY = Symbol('smrt-form');
+// Svelte gives every component its own context map, copying inherited values
+// into that map. Cache a facade by this map rather than by the inherited
+// context value: repeated calls from one component share ownership, while
+// descendants that inherit a facade receive their own ownership boundary.
+const callerFormContextFacades = new WeakMap();
+function createFormContextFacade(ctx) {
+    const registrations = new Map();
+    const facade = {
+        get mode() {
+            return ctx.mode;
+        },
+        registerField(field) {
+            const registeredName = field.name;
+            const registeredDisposer = ctx.registerField(field);
+            const disposeField = typeof registeredDisposer === 'function'
+                ? registeredDisposer
+                : () => ctx.unregisterField(registeredName);
+            let active = true;
+            const dispose = () => {
+                if (!active)
+                    return;
+                active = false;
+                const ownedRegistrations = registrations.get(registeredName);
+                ownedRegistrations?.delete(dispose);
+                if (ownedRegistrations?.size === 0) {
+                    registrations.delete(registeredName);
+                }
+                disposeField();
+            };
+            const ownedRegistrations = registrations.get(registeredName) ?? new Set();
+            ownedRegistrations.add(dispose);
+            registrations.set(registeredName, ownedRegistrations);
+            return dispose;
+        },
+        unregisterField(name) {
+            const ownedRegistrations = registrations.get(name);
+            const dispose = ownedRegistrations?.values().next().value;
+            dispose?.();
+        },
+        getFieldSchema: () => ctx.getFieldSchema(),
+        get isFormListening() {
+            return ctx.isFormListening;
+        },
+        get isExtracting() {
+            return ctx.isExtracting;
+        },
+        toggleListening: () => ctx.toggleListening(),
+        get interactionRegistry() {
+            return ctx.interactionRegistry;
+        },
+        get formId() {
+            return ctx.formId;
+        },
+    };
+    return facade;
+}
+function getCallerFormContext(required) {
+    const contextMap = getAllContexts();
+    const existingFacade = callerFormContextFacades.get(contextMap);
+    if (existingFacade)
+        return existingFacade;
+    const ctx = getContext(SMRT_FORM_KEY);
+    if (!ctx) {
+        if (!required)
+            return null;
+        throw new Error('Form context not found. Make sure to wrap your inputs with <SMRTForm>');
+    }
+    const facade = createFormContextFacade(ctx);
+    callerFormContextFacades.set(contextMap, facade);
+    setContext(SMRT_FORM_KEY, facade);
+    return facade;
+}
 /**
  * Set form context (used by SMRTForm)
  */
@@ -17,15 +89,11 @@ export function setFormContext(ctx) {
  * @throws If called outside of SMRTForm
  */
 export function getFormContext() {
-    const ctx = getContext(SMRT_FORM_KEY);
-    if (!ctx) {
-        throw new Error('Form context not found. Make sure to wrap your inputs with <SMRTForm>');
-    }
-    return ctx;
+    return getCallerFormContext(true);
 }
 /**
  * Try to get form context (returns null if not available)
  */
 export function tryGetFormContext() {
-    return getContext(SMRT_FORM_KEY) ?? null;
+    return getCallerFormContext(false);
 }

package/dist/web/__tests__/provider-ui-registry.fixture.svelte

@@ -0,0 +1,43 @@
+<script lang="ts">
+import type {
+  ControlInteractionEvent,
+  ControlInteractionRegistry,
+} from '@happyvertical/smrt-ui/forms';
+import Form from '../../components/forms/Form.svelte';
+import TextInput from '../../components/forms/TextInput.svelte';
+import Provider from '../../Provider.svelte';
+
+let {
+  providerRegistry,
+  explicitRegistry,
+  enableUi = true,
+  onSharedInteraction,
+  onSiblingInteraction,
+  showSibling = true,
+}: {
+  providerRegistry: ControlInteractionRegistry;
+  explicitRegistry: ControlInteractionRegistry;
+  enableUi?: boolean;
+  onSharedInteraction?: (event: ControlInteractionEvent) => void;
+  onSiblingInteraction?: (event: ControlInteractionEvent) => void;
+  showSibling?: boolean;
+} = $props();
+</script>
+
+<Provider
+  webmcp={enableUi
+    ? { ui: { controlRegistry: providerRegistry } }
+    : { definitions: [] }}
+>
+  <Form formId="shared-form" oninteraction={onSharedInteraction}>
+    <TextInput name="shared-name" label="Shared name" />
+  </Form>
+  {#if showSibling}
+    <Form formId="sibling-form" oninteraction={onSiblingInteraction}>
+      <TextInput name="sibling-name" label="Sibling name" />
+    </Form>
+  {/if}
+  <Form formId="explicit-form" interactionRegistry={explicitRegistry}>
+    <TextInput name="explicit-name" label="Explicit name" />
+  </Form>
+</Provider>

package/dist/web/__tests__/provider-ui-registry.fixture.svelte.d.ts

@@ -0,0 +1,13 @@
+import type { ControlInteractionEvent, ControlInteractionRegistry } from '@happyvertical/smrt-ui/forms';
+type $$ComponentProps = {
+    providerRegistry: ControlInteractionRegistry;
+    explicitRegistry: ControlInteractionRegistry;
+    enableUi?: boolean;
+    onSharedInteraction?: (event: ControlInteractionEvent) => void;
+    onSiblingInteraction?: (event: ControlInteractionEvent) => void;
+    showSibling?: boolean;
+};
+declare const ProviderUiRegistry: import("svelte").Component<$$ComponentProps, {}, "">;
+type ProviderUiRegistry = ReturnType<typeof ProviderUiRegistry>;
+export default ProviderUiRegistry;
+//# sourceMappingURL=provider-ui-registry.fixture.svelte.d.ts.map

package/dist/web/__tests__/provider-ui-registry.fixture.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"provider-ui-registry.fixture.svelte.d.ts","sourceRoot":"","sources":["../../../src/web/__tests__/provider-ui-registry.fixture.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EACV,uBAAuB,EACvB,0BAA0B,EAC3B,MAAM,8BAA8B,CAAC;AAKrC,KAAK,gBAAgB,GAAI;IACxB,gBAAgB,EAAE,0BAA0B,CAAC;IAC7C,gBAAgB,EAAE,0BAA0B,CAAC;IAC7C,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,mBAAmB,CAAC,EAAE,CAAC,KAAK,EAAE,uBAAuB,KAAK,IAAI,CAAC;IAC/D,oBAAoB,CAAC,EAAE,CAAC,KAAK,EAAE,uBAAuB,KAAK,IAAI,CAAC;IAChE,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB,CAAC;AAmCF,QAAA,MAAM,kBAAkB,sDAAwC,CAAC;AACjE,KAAK,kBAAkB,GAAG,UAAU,CAAC,OAAO,kBAAkB,CAAC,CAAC;AAChE,eAAe,kBAAkB,CAAC"}

package/dist/web/__tests__/provider-ui-registry.test.js

@@ -0,0 +1,235 @@
+import { createControlInteractionRegistry } from '@happyvertical/smrt-ui/forms';
+import { render } from '@testing-library/svelte';
+import { tick } from 'svelte';
+import { afterEach, describe, expect, it, vi } from 'vitest';
+import Fixture from './provider-ui-registry.fixture.svelte';
+afterEach(() => {
+    delete document.modelContext;
+});
+describe('Provider WebMCP UI registry context', () => {
+    it('aggregates descendant forms while preserving explicit registry overrides', async () => {
+        const providerRegistry = createControlInteractionRegistry();
+        const explicitRegistry = createControlInteractionRegistry();
+        const signals = [];
+        const names = [];
+        document.modelContext = {
+            async registerTool(tool, options) {
+                names.push(tool.name);
+                if (options?.signal)
+                    signals.push(options.signal);
+            },
+        };
+        const view = render(Fixture, {
+            props: { providerRegistry, explicitRegistry },
+        });
+        await tick();
+        expect(names).toEqual([
+            'smrt_ui_list_form_controls',
+            'smrt_ui_inspect_form_control',
+            'smrt_ui_execute_form_control',
+            'smrt_ui_list_data_surfaces',
+            'smrt_ui_inspect_data_surface',
+            'smrt_ui_execute_data_surface_control',
+        ]);
+        expect(providerRegistry.list().map((entry) => entry.identity)).toEqual([
+            { formId: 'shared-form', controlId: 'shared-name' },
+            { formId: 'sibling-form', controlId: 'sibling-name' },
+        ]);
+        expect(explicitRegistry.list().map((entry) => entry.identity)).toEqual([
+            { formId: 'explicit-form', controlId: 'explicit-name' },
+        ]);
+        view.unmount();
+        expect(providerRegistry.list()).toEqual([]);
+        expect(explicitRegistry.list()).toEqual([]);
+        expect(signals).toHaveLength(6);
+        expect(signals.every((signal) => signal.aborted)).toBe(true);
+    });
+    it('keeps form interaction callbacks scoped when forms share a Provider registry', async () => {
+        const providerRegistry = createControlInteractionRegistry();
+        const onSharedInteraction = vi.fn();
+        const onSiblingInteraction = vi.fn();
+        const view = render(Fixture, {
+            props: {
+                providerRegistry,
+                explicitRegistry: createControlInteractionRegistry(),
+                onSharedInteraction,
+                onSiblingInteraction,
+            },
+        });
+        await tick();
+        onSharedInteraction.mockClear();
+        onSiblingInteraction.mockClear();
+        await providerRegistry.execute({
+            action: 'stage',
+            identity: { formId: 'sibling-form', controlId: 'sibling-name' },
+            value: 'private sibling value',
+        });
+        expect(onSharedInteraction).not.toHaveBeenCalled();
+        expect(onSiblingInteraction).toHaveBeenCalled();
+        expect(onSiblingInteraction.mock.calls.every(([event]) => event.identity.formId === 'sibling-form')).toBe(true);
+        view.unmount();
+    });
+    it('moves mounted controls when the Provider registry changes', async () => {
+        const firstRegistry = createControlInteractionRegistry();
+        const secondRegistry = createControlInteractionRegistry();
+        const explicitRegistry = createControlInteractionRegistry();
+        const view = render(Fixture, {
+            props: { providerRegistry: firstRegistry, explicitRegistry },
+        });
+        await tick();
+        expect(firstRegistry.list()).toHaveLength(2);
+        await view.rerender({
+            providerRegistry: secondRegistry,
+            explicitRegistry,
+        });
+        await tick();
+        expect(firstRegistry.list()).toEqual([]);
+        expect(secondRegistry.list()).toHaveLength(2);
+        view.unmount();
+    });
+    it('preserves staged sibling state when another field unmounts', async () => {
+        const providerRegistry = createControlInteractionRegistry();
+        const explicitRegistry = createControlInteractionRegistry();
+        const view = render(Fixture, {
+            props: { providerRegistry, explicitRegistry },
+        });
+        await tick();
+        await providerRegistry.execute({
+            action: 'stage',
+            identity: { formId: 'shared-form', controlId: 'shared-name' },
+            value: 'keep staged',
+        });
+        await view.rerender({
+            providerRegistry,
+            explicitRegistry,
+            showSibling: false,
+        });
+        await tick();
+        expect(providerRegistry.get({
+            formId: 'shared-form',
+            controlId: 'shared-name',
+        })?.state.stagedValue).toBe('keep staged');
+        view.unmount();
+    });
+    it('retries a shared identity after the existing registration unmounts', async () => {
+        const providerRegistry = createControlInteractionRegistry();
+        const unregisterExisting = providerRegistry.register({
+            identity: { formId: 'shared-form', controlId: 'shared-name' },
+            metadata: { kind: 'text', label: 'Existing' },
+            getValue: () => 'existing value',
+        });
+        const view = render(Fixture, {
+            props: {
+                providerRegistry,
+                explicitRegistry: createControlInteractionRegistry(),
+            },
+        });
+        await tick();
+        expect(providerRegistry.get({
+            formId: 'shared-form',
+            controlId: 'shared-name',
+        })?.state.value).toBe('existing value');
+        unregisterExisting();
+        await tick();
+        expect(providerRegistry.get({
+            formId: 'shared-form',
+            controlId: 'shared-name',
+        })?.metadata.label).toBe('Shared name');
+        view.unmount();
+        expect(providerRegistry.get({
+            formId: 'shared-form',
+            controlId: 'shared-name',
+        })).toBeUndefined();
+    });
+    it('recovers after its shared identity is displaced and removed', async () => {
+        const providerRegistry = createControlInteractionRegistry();
+        const view = render(Fixture, {
+            props: {
+                providerRegistry,
+                explicitRegistry: createControlInteractionRegistry(),
+            },
+        });
+        await tick();
+        const unregisterReplacement = providerRegistry.register({
+            identity: { formId: 'shared-form', controlId: 'shared-name' },
+            metadata: { kind: 'text', label: 'Replacement' },
+            getValue: () => 'replacement value',
+        });
+        await tick();
+        expect(providerRegistry.get({
+            formId: 'shared-form',
+            controlId: 'shared-name',
+        })?.state.value).toBe('replacement value');
+        unregisterReplacement();
+        await tick();
+        expect(providerRegistry.get({
+            formId: 'shared-form',
+            controlId: 'shared-name',
+        })?.metadata.label).toBe('Shared name');
+        view.unmount();
+    });
+    it('contains duplicate Provider prefixes without crashing the app', async () => {
+        const names = [];
+        document.modelContext = {
+            async registerTool(tool) {
+                names.push(tool.name);
+            },
+        };
+        const first = render(Fixture, {
+            props: {
+                providerRegistry: createControlInteractionRegistry(),
+                explicitRegistry: createControlInteractionRegistry(),
+            },
+        });
+        await tick();
+        const second = render(Fixture, {
+            props: {
+                providerRegistry: createControlInteractionRegistry(),
+                explicitRegistry: createControlInteractionRegistry(),
+            },
+        });
+        await tick();
+        expect(names).toHaveLength(6);
+        second.unmount();
+        first.unmount();
+    });
+    it('isolates throwing interaction observers from registry command outcomes', async () => {
+        const providerRegistry = createControlInteractionRegistry();
+        const view = render(Fixture, {
+            props: {
+                providerRegistry,
+                explicitRegistry: createControlInteractionRegistry(),
+                onSiblingInteraction: () => {
+                    throw new Error('observer failed');
+                },
+            },
+        });
+        await tick();
+        await expect(providerRegistry.execute({
+            action: 'stage',
+            identity: { formId: 'sibling-form', controlId: 'sibling-name' },
+            value: 'still staged',
+        })).resolves.toMatchObject({ ok: true, action: 'stage' });
+        view.unmount();
+    });
+    it('preserves legacy object configs that did not opt into UI tools', async () => {
+        const names = [];
+        const providerRegistry = createControlInteractionRegistry();
+        document.modelContext = {
+            async registerTool(tool) {
+                names.push(tool.name);
+            },
+        };
+        const view = render(Fixture, {
+            props: {
+                providerRegistry,
+                explicitRegistry: createControlInteractionRegistry(),
+                enableUi: false,
+            },
+        });
+        await tick();
+        expect(names).toEqual([]);
+        expect(providerRegistry.list()).toEqual([]);
+        view.unmount();
+    });
+});

package/dist/web/__tests__/webmcp-composed.child.fixture.svelte

@@ -0,0 +1,62 @@
+<script lang="ts">
+import type { DataSurfaceRegistry } from '@happyvertical/smrt-ui/data';
+import {
+  type DataSurfaceDescriptor,
+  DataTable,
+} from '@happyvertical/smrt-ui/data';
+import Form from '../../components/forms/Form.svelte';
+import TextInput from '../../components/forms/TextInput.svelte';
+import { useWebMcpTool } from '../webmcp.svelte.js';
+
+let { dataSurfaceRegistry }: { dataSurfaceRegistry: DataSurfaceRegistry } =
+  $props();
+
+useWebMcpTool(() => ({
+  name: 'fixture_component_preview',
+  description:
+    'Preview the composed fixture without changing application state.',
+  inputSchema: { type: 'object', properties: {} },
+  annotations: { readOnlyHint: true, openWorldHint: false },
+  execute: () => JSON.stringify({ ok: true, source: 'bespoke-component' }),
+}));
+
+const tableDescriptor: DataSurfaceDescriptor = {
+  version: 1,
+  identity: { surfaceId: 'fixture-items', kind: 'table' },
+  schemaVersion: 1,
+  label: 'Fixture items',
+  rowKey: 'id',
+  columns: [
+    { id: 'id', label: 'ID', capabilities: ['read', 'project'] },
+    {
+      id: 'name',
+      label: 'Name',
+      capabilities: ['read', 'search', 'filter', 'sort', 'project'],
+    },
+  ],
+  query: { modes: ['rows', 'count'], projectableColumnIds: ['id', 'name'] },
+  controls: ['set-search', 'toggle-sorting'].map((id) => ({ id, label: id })),
+  actions: [],
+  limits: { maxQueryRows: 50, maxQueryBytes: 10_000, maxSelectionSize: 10 },
+};
+
+const rows = [
+  { id: 'item-1', name: 'First' },
+  { id: 'item-2', name: 'Second' },
+];
+const columns = [
+  { id: 'id', label: 'ID', accessor: 'id' },
+  { id: 'name', label: 'Name', accessor: 'name', sortable: true },
+];
+</script>
+
+<Form formId="fixture-form">
+  <TextInput name="title" label="Title" />
+</Form>
+<DataTable
+  data={rows}
+  {columns}
+  rowKey="id"
+  sortable={true}
+  dataSurface={{ registry: dataSurfaceRegistry, descriptor: tableDescriptor }}
+/>

package/dist/web/__tests__/webmcp-composed.child.fixture.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { DataSurfaceRegistry } from '@happyvertical/smrt-ui/data';
+type $$ComponentProps = {
+    dataSurfaceRegistry: DataSurfaceRegistry;
+};
+declare const WebmcpComposed: import("svelte").Component<$$ComponentProps, {}, "">;
+type WebmcpComposed = ReturnType<typeof WebmcpComposed>;
+export default WebmcpComposed;
+//# sourceMappingURL=webmcp-composed.child.fixture.svelte.d.ts.map

package/dist/web/__tests__/webmcp-composed.child.fixture.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"webmcp-composed.child.fixture.svelte.d.ts","sourceRoot":"","sources":["../../../src/web/__tests__/webmcp-composed.child.fixture.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,6BAA6B,CAAC;AAStE,KAAK,gBAAgB,GAAI;IAAE,mBAAmB,EAAE,mBAAmB,CAAA;CAAE,CAAC;AAyDvE,QAAA,MAAM,cAAc,sDAAwC,CAAC;AAC7D,KAAK,cAAc,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AACxD,eAAe,cAAc,CAAC"}

package/dist/web/__tests__/webmcp-composed.fixture.svelte

@@ -0,0 +1,52 @@
+<script lang="ts">
+import type { DataSurfaceRegistry } from '@happyvertical/smrt-ui/data';
+import type {
+  RegisterWebMcpToolsOptions,
+  WebMcpToolDefinition,
+} from '@happyvertical/smrt-web';
+import Provider from '../../Provider.svelte';
+import type { WebMcpProviderConfig } from '../webmcp-provider.js';
+import Child from './webmcp-composed.child.fixture.svelte';
+
+let {
+  dataSurfaceRegistry,
+  generatedDefinitions = [],
+  fetchFn,
+  showChild = true,
+}: {
+  dataSurfaceRegistry: DataSurfaceRegistry;
+  generatedDefinitions?: readonly WebMcpToolDefinition[];
+  fetchFn?: RegisterWebMcpToolsOptions['fetchFn'];
+  showChild?: boolean;
+} = $props();
+
+let cachedDefinitions: readonly WebMcpToolDefinition[] | undefined;
+let cachedFetchFn: RegisterWebMcpToolsOptions['fetchFn'] | undefined;
+let cachedRegistry: DataSurfaceRegistry | undefined;
+let cachedWebmcp: WebMcpProviderConfig | undefined;
+const webmcp = $derived.by(() => {
+  if (
+    cachedWebmcp &&
+    cachedDefinitions === generatedDefinitions &&
+    cachedFetchFn === fetchFn &&
+    cachedRegistry === dataSurfaceRegistry
+  ) {
+    return cachedWebmcp;
+  }
+  cachedDefinitions = generatedDefinitions;
+  cachedFetchFn = fetchFn;
+  cachedRegistry = dataSurfaceRegistry;
+  cachedWebmcp = {
+    definitions: generatedDefinitions,
+    ...(fetchFn ? { fetchFn } : {}),
+    ui: { dataSurfaceRegistry },
+  };
+  return cachedWebmcp;
+});
+</script>
+
+<Provider {webmcp}>
+  {#if showChild}
+    <Child {dataSurfaceRegistry} />
+  {/if}
+</Provider>

package/dist/web/__tests__/webmcp-composed.fixture.svelte.d.ts

@@ -0,0 +1,12 @@
+import type { DataSurfaceRegistry } from '@happyvertical/smrt-ui/data';
+import type { RegisterWebMcpToolsOptions, WebMcpToolDefinition } from '@happyvertical/smrt-web';
+type $$ComponentProps = {
+    dataSurfaceRegistry: DataSurfaceRegistry;
+    generatedDefinitions?: readonly WebMcpToolDefinition[];
+    fetchFn?: RegisterWebMcpToolsOptions['fetchFn'];
+    showChild?: boolean;
+};
+declare const WebmcpComposed: import("svelte").Component<$$ComponentProps, {}, "">;
+type WebmcpComposed = ReturnType<typeof WebmcpComposed>;
+export default WebmcpComposed;
+//# sourceMappingURL=webmcp-composed.fixture.svelte.d.ts.map

package/dist/web/__tests__/webmcp-composed.fixture.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"webmcp-composed.fixture.svelte.d.ts","sourceRoot":"","sources":["../../../src/web/__tests__/webmcp-composed.fixture.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,6BAA6B,CAAC;AACvE,OAAO,KAAK,EACV,0BAA0B,EAC1B,oBAAoB,EACrB,MAAM,yBAAyB,CAAC;AAKhC,KAAK,gBAAgB,GAAI;IACxB,mBAAmB,EAAE,mBAAmB,CAAC;IACzC,oBAAoB,CAAC,EAAE,SAAS,oBAAoB,EAAE,CAAC;IACvD,OAAO,CAAC,EAAE,0BAA0B,CAAC,SAAS,CAAC,CAAC;IAChD,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB,CAAC;AAgDF,QAAA,MAAM,cAAc,sDAAwC,CAAC;AAC7D,KAAK,cAAc,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AACxD,eAAe,cAAc,CAAC"}