@happyvertical/smrt-svelte 0.43.3 → 0.43.5

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"}

package/dist/components/forms/DateTimeInput.svelte

@@ -1,7 +1,6 @@
 <script lang="ts">
 import { useI18n } from '@happyvertical/smrt-ui/i18n';
 import { importOptional } from '@happyvertical/smrt-ui/utils/import-optional.js';
-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';
@@ -10,6 +9,7 @@ import {
   type FieldDefinition,
   tryGetFormContext,
 } from '../../state/form-context.js';
+import { prepareTextFieldValue } from './prepare-field-value.js';
 
 const { t } = useI18n();
 
@@ -105,33 +105,67 @@ function formatForDisplay(isoValue: string): string {
   }
 }
 
+function isValidDateTimeValue(candidate: unknown): boolean {
+  if (typeof candidate !== 'string') return false;
+  if (candidate === '') return !required;
+  const match = includeTime
+    ? /^(\d{4})-(\d{2})-(\d{2})T(\d{2}):(\d{2})(?::(\d{2})(?:\.\d{1,3})?)?$/.exec(
+        candidate,
+      )
+    : /^(\d{4})-(\d{2})-(\d{2})$/.exec(candidate);
+  if (!match) return false;
+  const [, year, month, day, hour = '0', minute = '0', second = '0'] = match;
+  const date = new Date(
+    Date.UTC(
+      Number(year),
+      Number(month) - 1,
+      Number(day),
+      Number(hour),
+      Number(minute),
+      Number(second),
+    ),
+  );
+  return (
+    date.getUTCFullYear() === Number(year) &&
+    date.getUTCMonth() === Number(month) - 1 &&
+    date.getUTCDate() === Number(day) &&
+    date.getUTCHours() === Number(hour) &&
+    date.getUTCMinutes() === Number(minute) &&
+    date.getUTCSeconds() === Number(second)
+  );
+}
+
 // Update display when value changes
 $effect(() => {
   displayValue = formatForDisplay(value);
 });
 
 // Register with form context
-onMount(() => {
+$effect(() => {
   if (formContext) {
+    const registeredName = name;
     const fieldDef: FieldDefinition = {
-      name,
+      name: registeredName,
       type: 'datetime',
-      label,
-      description: description ?? (includeTime ? 'Date and time' : 'Date'),
+      get label() {
+        return label;
+      },
+      get description() {
+        return description ?? (includeTime ? 'Date and time' : 'Date');
+      },
       setValue: (v: unknown) => {
         updateValue(String(v ?? ''));
       },
       getValue: () => value,
-      constraints: { required },
-      validate: () => !required || value.trim().length > 0,
+      prepareValue: prepareTextFieldValue,
+      getState: () => ({ disabled }),
+      get constraints() {
+        return { required };
+      },
+      validateValue: isValidDateTimeValue,
+      validate: () => isValidDateTimeValue(value),
     };
-    formContext.registerField(fieldDef);
-  }
-});
-
-onDestroy(() => {
-  if (formContext) {
-    formContext.unregisterField(name);
+    return formContext.registerField(fieldDef);
   }
 });
 

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

@@ -1 +1 @@
-{"version":3,"file":"DateTimeInput.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/forms/DateTimeInput.svelte.ts"],"names":[],"mappings":"AAgBA,MAAM,WAAW,KAAK;IACpB,iBAAiB;IACjB,IAAI,EAAE,MAAM,CAAC;IACb,kBAAkB;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,2CAA2C;IAC3C,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,iCAAiC;IACjC,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,uBAAuB;IACvB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,2CAA2C;IAC3C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,qBAAqB;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,qBAAqB;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,gCAAgC;IAChC,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACpC;AA+UD,QAAA,MAAM,aAAa,gDAAwC,CAAC;AAC5D,KAAK,aAAa,GAAG,UAAU,CAAC,OAAO,aAAa,CAAC,CAAC;AACtD,eAAe,aAAa,CAAC"}
+{"version":3,"file":"DateTimeInput.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/forms/DateTimeInput.svelte.ts"],"names":[],"mappings":"AAgBA,MAAM,WAAW,KAAK;IACpB,iBAAiB;IACjB,IAAI,EAAE,MAAM,CAAC;IACb,kBAAkB;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,2CAA2C;IAC3C,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,iCAAiC;IACjC,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,uBAAuB;IACvB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,2CAA2C;IAC3C,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,qBAAqB;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,qBAAqB;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,gCAAgC;IAChC,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACpC;AAiXD,QAAA,MAAM,aAAa,gDAAwC,CAAC;AAC5D,KAAK,aAAa,GAAG,UAAU,CAAC,OAAO,aAAa,CAAC,CAAC;AACtD,eAAe,aAAa,CAAC"}