@happyvertical/smrt-svelte 0.43.4 → 0.43.5

package/AGENTS.md

@@ -19,6 +19,13 @@ subpath you are editing. This file keeps what holds in every module.
 | `src/web/webmcp-provider.ts` | Provider config for generated data/model WebMCP tools: definitions, effect policy, namespace, budget, legacy/canonical filters, and fetcher seams (#2520) | — |
 | `src/web/webmcp-ui.ts` | Fixed, low-cardinality WebMCP adapter over the Provider's mounted form-control and data-surface registries (#2521) | — |
 
+The composed WebMCP fixture in
+`src/web/__tests__/webmcp-composed.integration.svelte.test.ts` mounts a real
+Provider, rich Form, DataTable/DataSurface, and a bespoke `useWebMcpTool`
+component intent. Preserve its lifecycle assertions: SSR and missing
+`document.modelContext` are no-ops, mounted tools are fixed-cardinality, and
+all registrations abort when their owning component unmounts.
+
 ## The UI split — primitive-adoption contract (#1589)
 
 SMRT's shared UI primitives are split by concern: **`smrt-ui` owns the
@@ -55,6 +62,17 @@ migration; flips strict per package as it adopts the primitives).
 
 Wraps app in `+layout.svelte`. Provides auth state, permissions, WebSocket, and AI capabilities.
 
+The rich `Form` uses smrt-ui's shared staged-edit review contract. Agent
+proposals never mutate field bindings directly: they remain staged until a
+human applies or discards them in the form's local review surface. Keep this
+state machine in smrt-ui; smrt-svelte contributes Provider-backed field
+registration and consumes the shared component rather than duplicating it.
+The generated WebMCP form tool proposes registry stages; it never writes or
+submits field values directly.
+Rich `FieldDefinition` registrations may carry a `subject` for record-qualified
+identity. The Form bridge also folds live DOM disabled/read-only state into the
+registry and omits those fields from WebMCP schemas and staging.
+
 ```svelte
 <script>
   let { data, children } = $props();
@@ -100,6 +118,11 @@ adapter for a prefix; configure distinct prefixes for intentional coexistence.
 
 ## AI System
 
+- Rich Form WebMCP tools only stage review proposals. Structured payloads are
+  limited to published schema properties, money uses safe integer minor units,
+  and injected legacy registries without `executeBatch` use ordered `execute`
+  calls.
+
 - **Preload strategies**: `none`, `eager`, `idle` (recommended), `on-visible`
 - **Warm client cache**: module-level Map survives navigation/remounts -- avoids re-downloading WASM/models
 - **Adapters**: STT (browser-speech, whisper-cpp, whisper-wasm), TTS (browser-synthesis), LLM (webllm, transformers-llm)

package/README.md

@@ -156,6 +156,15 @@ hidden data-surface columns are not serialized. Read responses are marked as
 untrusted content. Bespoke `useWebMcpTool` and `<Form webmcp>` tools retain their
 existing lifecycle and submit behavior.
 
+Custom rich fields may continue to call `registerField(field)` and later
+`unregisterField(name)`. New code should retain and invoke the disposer returned
+by `registerField`: it is bound to that exact registration, so cleanup cannot
+remove a same-name replacement. The return value is additive; legacy form
+contexts whose `registerField` returns `void` remain supported. Context accessors
+bind legacy name-based cleanup to registrations made by that caller, so
+overlapping same-name fields can unmount in either order without retaining a
+detached control.
+
 ### Form Components
 
 ```svelte

package/dist/components/forms/AddressInput.svelte

@@ -1,12 +1,16 @@
 <script lang="ts">
 import { useI18n } from '@happyvertical/smrt-ui/i18n';
-import { onDestroy, onMount } from 'svelte';
+import { untrack } from 'svelte';
 import { useAppState } from '../../hooks/useAppState.svelte.js';
 import { M } from '../../i18n/strings.forms.js';
 import {
   type FieldDefinition,
   tryGetFormContext,
 } from '../../state/form-context.js';
+import {
+  invalidStagedValue,
+  prepareTextFieldValue,
+} from './prepare-field-value.js';
 import type { AddressValue } from './types.js';
 
 const { t } = useI18n();
@@ -80,8 +84,66 @@ let {
   onchange,
 }: Props = $props();
 
+function countryValues(): string[] {
+  return [...new Set(countries.map((option) => option.value))];
+}
+
+function provinceValues(): string[] {
+  return [
+    ...new Set([
+      ...(!required ? [''] : []),
+      ...provinces.map((option) => option.value),
+    ]),
+  ];
+}
+
+function schemaForField(field: AddressField): Record<string, unknown> {
+  if (field === 'country') return { type: 'string', enum: countryValues() };
+  if (field === 'province') return { type: 'string', enum: provinceValues() };
+  return { type: 'string' };
+}
+
+function validatesAddressMembers(candidate: unknown): boolean {
+  if (typeof candidate !== 'object' || Array.isArray(candidate)) return false;
+  const address = candidate as Record<string, unknown>;
+  if (
+    ![Object.prototype, null].includes(Object.getPrototypeOf(address)) ||
+    !Object.keys(address).every((key) =>
+      fields.includes(key as AddressField),
+    ) ||
+    !fields.every(
+      (field) =>
+        !Object.hasOwn(address, field) || typeof address[field] === 'string',
+    )
+  ) {
+    return false;
+  }
+  if (
+    (Object.hasOwn(address, 'country') &&
+      !countryValues().includes(address.country as string)) ||
+    (Object.hasOwn(address, 'province') &&
+      !provinceValues().includes(address.province as string))
+  ) {
+    return false;
+  }
+  return true;
+}
+
+function validatesAddressCandidate(candidate: unknown): boolean {
+  if (candidate === null || candidate === undefined) return !required;
+  if (!validatesAddressMembers(candidate)) return false;
+  if (!required) return true;
+  const address = candidate as Record<string, unknown>;
+  return fields.every(
+    (field) =>
+      typeof address[field] === 'string' && address[field].trim().length > 0,
+  );
+}
+
 const app = useAppState();
 const formContext = tryGetFormContext();
+const fieldOwnerId = $props.id();
+const fieldOwnerToken = `smrt-rich-field-${fieldOwnerId}`;
 
 const isSmrt = $derived(app.state.mode === 'smrt');
 
@@ -90,7 +152,7 @@ let street = $state(value.street ?? '');
 let city = $state(value.city ?? '');
 let province = $state(value.province ?? '');
 let postalCode = $state(value.postalCode ?? '');
-let country = $state(value.country ?? 'CA');
+let country = $state(value.country ?? untrack(() => countries[0]?.value ?? ''));
 
 // Keep in sync with external value changes
 $effect(() => {
@@ -105,13 +167,18 @@ $effect(() => {
     country = value.country;
 });
 
-function updateValue() {
+function currentValue(): Partial<AddressValue> {
   const newValue: Partial<AddressValue> = {};
   if (fields.includes('street')) newValue.street = street;
   if (fields.includes('city')) newValue.city = city;
   if (fields.includes('province')) newValue.province = province;
   if (fields.includes('postalCode')) newValue.postalCode = postalCode;
   if (fields.includes('country')) newValue.country = country;
+  return newValue;
+}
+
+function updateValue() {
+  const newValue = currentValue();
   value = newValue;
   onchange?.(newValue);
 }
@@ -141,11 +208,16 @@ function parseSpokenAddress(text: string): Partial<AddressValue> {
     }
   }
 
-  // Try to extract country
-  if (/\bcanada\b/i.test(normalized)) {
-    result.country = 'CA';
-  } else if (/\bunited states\b|\busa\b|\bu\.?s\.?a?\.?\b/i.test(normalized)) {
-    result.country = 'US';
+  // Try to extract a currently configured country by its label or value.
+  for (const option of countries) {
+    const matches = [option.label, option.value].some((candidate) => {
+      const escaped = candidate.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+      return new RegExp(`(^|\\W)${escaped}(?=$|\\W)`, 'i').test(normalized);
+    });
+    if (matches) {
+      result.country = option.value;
+      break;
+    }
   }
 
   // Common city extraction patterns
@@ -192,26 +264,33 @@ const primaryFieldId = $derived.by(() => {
 });
 
 // Register with form context
-onMount(() => {
+$effect(() => {
   if (formContext) {
+    const registeredName = name;
     const fieldDef: FieldDefinition = {
-      name,
+      name: registeredName,
+      ownerToken: fieldOwnerToken,
       type: 'address',
-      label,
-      description:
-        description ||
-        'A mailing address with street, city, province, postal code, and country',
+      get label() {
+        return label;
+      },
+      get description() {
+        return (
+          description ||
+          'A mailing address with street, city, province, postal code, and country'
+        );
+      },
       setValue: (v: unknown) => {
         if (v === null || v === undefined) {
           street = '';
           city = '';
           province = '';
           postalCode = '';
-          country = 'CA';
+          country = countries[0]?.value ?? '';
           updateValue();
           return;
         }
-        if (typeof v === 'object' && v !== null) {
+        if (validatesAddressMembers(v)) {
           const addr = v as Partial<AddressValue>;
           if (addr.street !== undefined) street = addr.street;
           if (addr.city !== undefined) city = addr.city;
@@ -222,36 +301,70 @@ onMount(() => {
           return;
         }
         // Try to parse spoken address
-        const parsed = parseSpokenAddress(String(v));
-        if (Object.keys(parsed).length > 0) {
-          if (parsed.street) street = parsed.street;
-          if (parsed.city) city = parsed.city;
-          if (parsed.province) province = parsed.province;
-          if (parsed.postalCode) postalCode = parsed.postalCode;
-          if (parsed.country) country = parsed.country;
+        const parsed = Object.fromEntries(
+          Object.entries(parseSpokenAddress(String(v))).filter(([field]) =>
+            fields.includes(field as AddressField),
+          ),
+        ) as Partial<AddressValue>;
+        if (Object.keys(parsed).length > 0 && validatesAddressMembers(parsed)) {
+          if (parsed.street !== undefined) street = parsed.street;
+          if (parsed.city !== undefined) city = parsed.city;
+          if (parsed.province !== undefined) province = parsed.province;
+          if (parsed.postalCode !== undefined) postalCode = parsed.postalCode;
+          if (parsed.country !== undefined) country = parsed.country;
           updateValue();
         }
       },
-      getValue: () => value,
-      constraints: { required },
-      webMcpSchema: {
-        type: 'object',
-        properties: Object.fromEntries(
-          fields.map((field) => [field, { type: 'string' }]),
-        ),
-        ...(required ? { required: [...fields] } : {}),
+      getValue: currentValue,
+      prepareValue: (candidate) => {
+        if (candidate === null || candidate === undefined) {
+          return Object.fromEntries(
+            fields.map((field) => [
+              field,
+              field === 'country' ? (countries[0]?.value ?? '') : '',
+            ]),
+          );
+        }
+        if (typeof candidate === 'object' && !Array.isArray(candidate)) {
+          return candidate;
+        }
+        const parsed = parseSpokenAddress(prepareTextFieldValue(candidate));
+        const configured = Object.fromEntries(
+          Object.entries(parsed).filter(([field]) =>
+            fields.includes(field as AddressField),
+          ),
+        );
+        return Object.keys(configured).length > 0
+          ? { ...currentValue(), ...configured }
+          : invalidStagedValue();
+      },
+      clear: () => {
+        street = '';
+        city = '';
+        province = '';
+        postalCode = '';
+        country = countries[0]?.value ?? '';
+        updateValue();
+        return true;
+      },
+      getState: () => ({ disabled }),
+      get constraints() {
+        return { required };
+      },
+      get webMcpSchema() {
+        return {
+          type: 'object',
+          additionalProperties: false,
+          properties: Object.fromEntries(
+            fields.map((field) => [field, schemaForField(field)]),
+          ),
+          ...(required ? { required: [...fields] } : {}),
+        };
       },
-      validate: () =>
-        !required ||
-        fields.every((field) => String(value[field] ?? '').trim().length > 0),
+      validateValue: validatesAddressCandidate,
+      validate: () => validatesAddressCandidate(currentValue()),
     };
-    formContext.registerField(fieldDef);
-  }
-});
-
-onDestroy(() => {
-  if (formContext) {
-    formContext.unregisterField(name);
+    return formContext.registerField(fieldDef);
   }
 });
 
@@ -281,7 +394,7 @@ function handleCountryChange(e: Event) {
 }
 </script>
 
-  <div class="smrt-address">
+  <div class="smrt-address" data-smrt-field-owner={fieldOwnerToken}>
   {#if label}
     <label class="smrt-label" for={primaryFieldId}>
       {label}

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

@@ -1 +1 @@
-{"version":3,"file":"AddressInput.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/forms/AddressInput.svelte.ts"],"names":[],"mappings":"AAWA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,YAAY,CAAC;AAG/C,KAAK,YAAY,GAAG,MAAM,YAAY,CAAC;AAEvC,MAAM,WAAW,KAAK;IACpB,wBAAwB;IACxB,IAAI,EAAE,MAAM,CAAC;IACb,kBAAkB;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,uCAAuC;IACvC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,+BAA+B;IAC/B,KAAK,CAAC,EAAE,OAAO,CAAC,YAAY,CAAC,CAAC;IAC9B,2BAA2B;IAC3B,MAAM,CAAC,EAAE,YAAY,EAAE,CAAC;IACxB,qBAAqB;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,qBAAqB;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,+BAA+B;IAC/B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,mCAAmC;IACnC,SAAS,CAAC,EAAE,KAAK,CAAC;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;IACpD,0CAA0C;IAC1C,SAAS,CAAC,EAAE,KAAK,CAAC;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;IACpD,gCAAgC;IAChC,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,CAAC,YAAY,CAAC,KAAK,IAAI,CAAC;CACnD;AAmUD,QAAA,MAAM,YAAY,gDAAwC,CAAC;AAC3D,KAAK,YAAY,GAAG,UAAU,CAAC,OAAO,YAAY,CAAC,CAAC;AACpD,eAAe,YAAY,CAAC"}
+{"version":3,"file":"AddressInput.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/forms/AddressInput.svelte.ts"],"names":[],"mappings":"AAeA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,YAAY,CAAC;AAG/C,KAAK,YAAY,GAAG,MAAM,YAAY,CAAC;AAEvC,MAAM,WAAW,KAAK;IACpB,wBAAwB;IACxB,IAAI,EAAE,MAAM,CAAC;IACb,kBAAkB;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,uCAAuC;IACvC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,+BAA+B;IAC/B,KAAK,CAAC,EAAE,OAAO,CAAC,YAAY,CAAC,CAAC;IAC9B,2BAA2B;IAC3B,MAAM,CAAC,EAAE,YAAY,EAAE,CAAC;IACxB,qBAAqB;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,qBAAqB;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,+BAA+B;IAC/B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,mCAAmC;IACnC,SAAS,CAAC,EAAE,KAAK,CAAC;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;IACpD,0CAA0C;IAC1C,SAAS,CAAC,EAAE,KAAK,CAAC;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC;IACpD,gCAAgC;IAChC,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,CAAC,YAAY,CAAC,KAAK,IAAI,CAAC;CACnD;AAibD,QAAA,MAAM,YAAY,gDAAwC,CAAC;AAC3D,KAAK,YAAY,GAAG,UAAU,CAAC,OAAO,YAAY,CAAC,CAAC;AACpD,eAAe,YAAY,CAAC"}

package/dist/components/forms/CheckboxInput.svelte

@@ -1,12 +1,12 @@
 <script lang="ts">
 import { ripple } from '@happyvertical/smrt-ui';
 import { parseSpokenBoolean } from '@happyvertical/smrt-ui/utils/forms/formatters.js';
-import { onDestroy, onMount } from 'svelte';
 import { useAppState } from '../../hooks/useAppState.svelte.js';
 import {
   type FieldDefinition,
   tryGetFormContext,
 } from '../../state/form-context.js';
+import { invalidStagedValue } from './prepare-field-value.js';
 
 export interface Props {
   /** Field name */
@@ -46,13 +46,18 @@ function updateValue(newValue: boolean) {
 }
 
 // Register with form context
-onMount(() => {
+$effect(() => {
   if (formContext) {
+    const registeredName = name;
     const fieldDef: FieldDefinition = {
-      name,
+      name: registeredName,
       type: 'checkbox',
-      label,
-      description: description || `Yes or no for ${label || name}`,
+      get label() {
+        return label;
+      },
+      get description() {
+        return description || `Yes or no for ${label || name}`;
+      },
       setValue: (v: unknown) => {
         if (typeof v === 'boolean') {
           updateValue(v);
@@ -64,16 +69,38 @@ onMount(() => {
         }
       },
       getValue: () => checked,
-      constraints: { required },
+      prepareValue: (candidate) => {
+        if (typeof candidate === 'boolean') return candidate;
+        if (
+          candidate !== null &&
+          candidate !== undefined &&
+          typeof candidate !== 'string' &&
+          typeof candidate !== 'number'
+        ) {
+          return invalidStagedValue();
+        }
+        return (
+          parseSpokenBoolean(String(candidate ?? '')) ?? invalidStagedValue()
+        );
+      },
+      clear: () => {
+        updateValue(false);
+        return true;
+      },
+      getState: () => ({ disabled }),
+      get constraints() {
+        return { required };
+      },
+      validateValue: (candidate) => {
+        const next =
+          typeof candidate === 'boolean'
+            ? candidate
+            : parseSpokenBoolean(String(candidate ?? ''));
+        return next !== null && (!required || next);
+      },
       validate: () => !required || checked,
     };
-    formContext.registerField(fieldDef);
-  }
-});
-
-onDestroy(() => {
-  if (formContext) {
-    formContext.unregisterField(name);
+    return formContext.registerField(fieldDef);
   }
 });
 

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

@@ -1 +1 @@
-{"version":3,"file":"CheckboxInput.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/forms/CheckboxInput.svelte.ts"],"names":[],"mappings":"AAaA,MAAM,WAAW,KAAK;IACpB,iBAAiB;IACjB,IAAI,EAAE,MAAM,CAAC;IACb,kBAAkB;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,uCAAuC;IACvC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,+BAA+B;IAC/B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,qBAAqB;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,qBAAqB;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,gCAAgC;IAChC,QAAQ,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;CACvC;AA2FD,QAAA,MAAM,aAAa,kDAAwC,CAAC;AAC5D,KAAK,aAAa,GAAG,UAAU,CAAC,OAAO,aAAa,CAAC,CAAC;AACtD,eAAe,aAAa,CAAC"}
+{"version":3,"file":"CheckboxInput.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/forms/CheckboxInput.svelte.ts"],"names":[],"mappings":"AAaA,MAAM,WAAW,KAAK;IACpB,iBAAiB;IACjB,IAAI,EAAE,MAAM,CAAC;IACb,kBAAkB;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,uCAAuC;IACvC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,+BAA+B;IAC/B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,qBAAqB;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,qBAAqB;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,gCAAgC;IAChC,QAAQ,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;CACvC;AAsHD,QAAA,MAAM,aAAa,kDAAwC,CAAC;AAC5D,KAAK,aAAa,GAAG,UAAU,CAAC,OAAO,aAAa,CAAC,CAAC;AACtD,eAAe,aAAa,CAAC"}

package/dist/components/forms/DateRangeInput.svelte

@@ -1,6 +1,5 @@
 <script lang="ts">
 import { useI18n } from '@happyvertical/smrt-ui/i18n';
-import { onDestroy, onMount } from 'svelte';
 import { useAppState } from '../../hooks/useAppState.svelte.js';
 import { useSTT } from '../../hooks/useSTT.svelte.js';
 import { M } from '../../i18n/strings.forms.js';
@@ -9,6 +8,7 @@ import {
   type FieldDefinition,
   tryGetFormContext,
 } from '../../state/form-context.js';
+import { invalidStagedValue } from './prepare-field-value.js';
 import type { DateRangeValue } from './types.js';
 
 const { t } = useI18n();
@@ -61,6 +61,8 @@ let {
 const app = useAppState();
 const stt = useSTT();
 const formContext = tryGetFormContext();
+const fieldOwnerId = $props.id();
+const fieldOwnerToken = `smrt-rich-field-${fieldOwnerId}`;
 
 const isSmrt = $derived(app.state.mode === 'smrt');
 
@@ -68,6 +70,7 @@ let isRecording = $state(false);
 let isParsing = $state(false);
 let parseError = $state<string | null>(null);
 let recordingStartTime = 0;
+let primaryControl = $state<HTMLElement | null>(null);
 
 const MIN_HOLD_TIME = 500;
 const MIN_TRANSCRIPT_LENGTH = 2;
@@ -176,16 +179,37 @@ function formatToISO(date: Date): string {
   return `${year}-${month}-${day}`;
 }
 
+function isCanonicalCalendarDate(value: string): boolean {
+  const match = /^(\d{4})-(\d{2})-(\d{2})$/.exec(value);
+  if (!match) return false;
+  const year = Number(match[1]);
+  const month = Number(match[2]);
+  const day = Number(match[3]);
+  const date = new Date(Date.UTC(year, month - 1, day));
+  return (
+    date.getUTCFullYear() === year &&
+    date.getUTCMonth() === month - 1 &&
+    date.getUTCDate() === day
+  );
+}
+
 // Register with form context
-onMount(() => {
+$effect(() => {
   if (formContext) {
+    const registeredName = name;
     const fieldDef: FieldDefinition = {
-      name,
+      name: registeredName,
+      ownerToken: fieldOwnerToken,
       type: 'daterange',
-      label,
-      description:
-        description ||
-        'A date range with start and end dates (say "from [start] to [end]")',
+      get label() {
+        return label;
+      },
+      get description() {
+        return (
+          description ||
+          'A date range with start and end dates (say "from [start] to [end]")'
+        );
+      },
       setValue: (v: unknown) => {
         if (v === null || v === undefined) {
           updateValue('', '');
@@ -206,17 +230,102 @@ onMount(() => {
           .catch(() => {});
       },
       getValue: () => ({ startDate, endDate }),
-      constraints: { required },
+      prepareValue: (candidate) => {
+        if (candidate === null || candidate === undefined) {
+          return { startDate: '', endDate: '' };
+        }
+        if (
+          typeof candidate !== 'object' ||
+          Array.isArray(candidate) ||
+          ![Object.prototype, null].includes(Object.getPrototypeOf(candidate))
+        ) {
+          return invalidStagedValue();
+        }
+        return candidate;
+      },
+      prepareExtractedValue: async (candidate) => {
+        if (typeof candidate !== 'string') {
+          return invalidStagedValue();
+        }
+        const parsed = await parseNaturalLanguageRange(candidate);
+        if (!parsed) {
+          return invalidStagedValue();
+        }
+        return { startDate: parsed.start, endDate: parsed.end };
+      },
+      clear: () => {
+        updateValue('', '');
+        return true;
+      },
+      getState: () => ({
+        disabled: disabled || primaryControl?.matches(':disabled') === true,
+      }),
+      get constraints() {
+        return { required };
+      },
+      focus: () => primaryControl?.focus(),
+      get webMcpSchema() {
+        return {
+          type: 'object',
+          additionalProperties: false,
+          properties: {
+            startDate: {
+              type: 'string',
+              format: 'date',
+              ...(minDate ? { formatMinimum: minDate } : {}),
+              ...(maxDate ? { formatMaximum: maxDate } : {}),
+            },
+            endDate: {
+              type: 'string',
+              format: 'date',
+              ...(minDate ? { formatMinimum: minDate } : {}),
+              ...(maxDate ? { formatMaximum: maxDate } : {}),
+            },
+          },
+          ...(required ? { required: ['startDate', 'endDate'] } : {}),
+        };
+      },
+      validateValue: (candidate) => {
+        if (candidate === null || candidate === undefined) return !required;
+        if (
+          typeof candidate !== 'object' ||
+          Array.isArray(candidate) ||
+          ![Object.prototype, null].includes(Object.getPrototypeOf(candidate))
+        ) {
+          return false;
+        }
+        const range = candidate as Record<string, unknown>;
+        if (
+          !Object.keys(range).every((key) =>
+            ['startDate', 'endDate'].includes(key),
+          ) ||
+          !Object.hasOwn(range, 'startDate') ||
+          !Object.hasOwn(range, 'endDate') ||
+          typeof range.startDate !== 'string' ||
+          typeof range.endDate !== 'string'
+        ) {
+          return false;
+        }
+        const start = range.startDate;
+        const end = range.endDate;
+        if (required && (!start || !end)) return false;
+        if (
+          (start && !isCanonicalCalendarDate(start)) ||
+          (end && !isCanonicalCalendarDate(end)) ||
+          (start && minDate && start < minDate) ||
+          (start && maxDate && start > maxDate) ||
+          (end && minDate && end < minDate) ||
+          (end && maxDate && end > maxDate) ||
+          (start && end && start > end)
+        ) {
+          return false;
+        }
+        return true;
+      },
       validate: () =>
         !required || (startDate.trim().length > 0 && endDate.trim().length > 0),
     };
-    formContext.registerField(fieldDef);
-  }
-});
-
-onDestroy(() => {
-  if (formContext) {
-    formContext.unregisterField(name);
+    return formContext.registerField(fieldDef);
   }
 });
 
@@ -336,7 +445,12 @@ function handleMicKeydown(e: KeyboardEvent) {
 const primaryControlId = $derived(isSmrt ? `${name}_voice` : `${name}_start`);
 </script>
 
-<div class="smrt-daterange" class:listening={isRecording} class:parsing={isParsing}>
+<div
+  class="smrt-daterange"
+  class:listening={isRecording}
+  class:parsing={isParsing}
+  data-smrt-field-owner={fieldOwnerToken}
+>
   {#if label}
     <label class="smrt-label" for={primaryControlId}>
       {label}
@@ -363,6 +477,7 @@ const primaryControlId = $derived(isSmrt ? `${name}_voice` : `${name}_start`);
         </div>
 
         <button
+          bind:this={primaryControl}
           id={primaryControlId}
           type="button"
           class="mic-btn"
@@ -395,6 +510,7 @@ const primaryControlId = $derived(isSmrt ? `${name}_voice` : `${name}_start`);
         <div class="date-field">
           <label for="{name}_start" class="field-label">Start</label>
           <input
+            bind:this={primaryControl}
             id="{name}_start"
             name="{name}[startDate]"
             type="date"

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

@@ -1 +1 @@
-{"version":3,"file":"DateRangeInput.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/forms/DateRangeInput.svelte.ts"],"names":[],"mappings":"AAaA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,YAAY,CAAC;AAGjD,MAAM,WAAW,KAAK;IACpB,iBAAiB;IACjB,IAAI,EAAE,MAAM,CAAC;IACb,kBAAkB;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,uCAAuC;IACvC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,6BAA6B;IAC7B,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,2BAA2B;IAC3B,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,2DAA2D;IAC3D,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,yDAAyD;IACzD,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,8BAA8B;IAC9B,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,8BAA8B;IAC9B,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,qBAAqB;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,qBAAqB;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,+BAA+B;IAC/B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,gCAAgC;IAChC,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,cAAc,KAAK,IAAI,CAAC;CAC5C;AAqYD,QAAA,MAAM,cAAc,gEAAwC,CAAC;AAC7D,KAAK,cAAc,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AACxD,eAAe,cAAc,CAAC"}
+{"version":3,"file":"DateRangeInput.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/forms/DateRangeInput.svelte.ts"],"names":[],"mappings":"AAaA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,YAAY,CAAC;AAGjD,MAAM,WAAW,KAAK;IACpB,iBAAiB;IACjB,IAAI,EAAE,MAAM,CAAC;IACb,kBAAkB;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,uCAAuC;IACvC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,6BAA6B;IAC7B,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,2BAA2B;IAC3B,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,2DAA2D;IAC3D,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,yDAAyD;IACzD,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,8BAA8B;IAC9B,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,8BAA8B;IAC9B,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,qBAAqB;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,qBAAqB;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,+BAA+B;IAC/B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,gCAAgC;IAChC,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,cAAc,KAAK,IAAI,CAAC;CAC5C;AAkfD,QAAA,MAAM,cAAc,gEAAwC,CAAC;AAC7D,KAAK,cAAc,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AACxD,eAAe,cAAc,CAAC"}