@happyvertical/smrt-svelte 0.30.0

package/dist/components/forms/SelectInput.svelte

@@ -0,0 +1,254 @@
+<script lang="ts">
+import { Icon } from '@happyvertical/smrt-ui';
+import { matchOption } 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 type { SelectOption } from './types.js';
+
+export interface Props {
+  /** Field name */
+  name: string;
+  /** Field label */
+  label?: string;
+  /** Description for voice extraction */
+  description?: string;
+  /** Available options */
+  options: SelectOption[];
+  /** Placeholder text */
+  placeholder?: string;
+  /** Current value (bindable) */
+  value?: string;
+  /** Disabled state */
+  disabled?: boolean;
+  /** Required field */
+  required?: boolean;
+  /** Called when value changes */
+  onchange?: (value: string) => void;
+}
+
+let {
+  name,
+  label,
+  description,
+  options,
+  placeholder = 'Select an option...',
+  value = $bindable(''),
+  disabled = false,
+  required = false,
+  onchange,
+}: Props = $props();
+
+const app = useAppState();
+const formContext = tryGetFormContext();
+
+let isFocused = $state(false);
+const isSmrt = $derived(app.state.mode === 'smrt');
+
+// Helper to update value
+function updateValue(newValue: string) {
+  value = newValue;
+  onchange?.(value);
+}
+
+// Register with form context
+onMount(() => {
+  if (formContext) {
+    const optionsDesc = options.map((o) => o.label).join(', ');
+    const fullDescription = description
+      ? `${description}. Options: ${optionsDesc}`
+      : `Options: ${optionsDesc}`;
+
+    const fieldDef: FieldDefinition = {
+      name,
+      type: 'select',
+      label,
+      description: fullDescription,
+      setValue: (v: unknown) => {
+        const strVal = String(v ?? '');
+        const matched = matchOption(strVal, options);
+        if (matched) {
+          updateValue(matched);
+        } else if (options.some((o) => o.value === strVal)) {
+          updateValue(strVal);
+        }
+      },
+      getValue: () => value,
+    };
+    formContext.registerField(fieldDef);
+  }
+});
+
+onDestroy(() => {
+  if (formContext) {
+    formContext.unregisterField(name);
+  }
+});
+
+function handleChange(e: Event) {
+  const target = e.target as HTMLSelectElement;
+  updateValue(target.value);
+}
+</script>
+
+<div 
+  class="smrt-select-field" 
+  class:smrt-mode={isSmrt} 
+  class:focused={isFocused} 
+  class:disabled
+  class:has-value={!!value}
+>
+  <div class="container">
+    <div class="content">
+      {#if label}
+        <label for={name} class="label">
+          {label}{#if required}*{/if}
+        </label>
+      {/if}
+      <select
+        id={name}
+        {name}
+        {value}
+        {disabled}
+        {required}
+        class="input"
+        aria-describedby={`${name}-supporting`}
+        onchange={handleChange}
+        onfocus={() => isFocused = true}
+        onblur={() => isFocused = false}
+      >
+        <option value="" disabled selected={!value}>{placeholder}</option>
+        {#each options as option (option.value)}
+          <option value={option.value}>{option.label}</option>
+        {/each}
+      </select>
+    </div>
+
+    <div class="trailing-icon">
+      <Icon name="chevron-down" size={24} />
+    </div>
+
+    <div class="active-indicator"></div>
+  </div>
+
+  <div id={`${name}-supporting`} class="supporting-text" aria-live="polite">
+    {#if description && isFocused}
+      <span class="info">{description}</span>
+    {/if}
+  </div>
+</div>
+
+<style>
+  .smrt-select-field {
+    --field-color: var(--smrt-color-on-surface-variant);
+    --field-bg: var(--smrt-color-surface-container-highest);
+    --field-active: var(--smrt-color-primary);
+    
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    min-width: 240px;
+  }
+
+  .container {
+    position: relative;
+    display: flex;
+    align-items: center;
+    background-color: var(--field-bg);
+    border-radius: var(--smrt-radius-sm, 4px) var(--smrt-radius-sm, 4px) 0 0;
+    min-height: 56px;
+    padding: 0 var(--smrt-spacing-4, 16px);
+    transition: background-color var(--smrt-duration-short3, 200ms) var(--smrt-easing-standard, cubic-bezier(0.2, 0, 0, 1));
+  }
+
+  .container:hover {
+    background-color: var(--smrt-color-surface-container-high);
+  }
+
+  .content {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    height: 100%;
+    padding-top: var(--smrt-spacing-2, 8px);
+  }
+
+  .label {
+    font-size: var(--smrt-typography-body-large-size, 1rem);
+    line-height: var(--smrt-typography-body-large-line-height, 1.5);
+    letter-spacing: var(--smrt-typography-body-large-tracking, 0.5px);
+    color: var(--field-color);
+    pointer-events: none;
+    transition: all var(--smrt-duration-short3, 200ms) var(--smrt-easing-standard, cubic-bezier(0.2, 0, 0, 1));
+    transform-origin: top left;
+  }
+
+  .focused .label, .has-value .label {
+    transform: translateY(-8px) scale(0.75);
+    color: var(--field-active);
+  }
+
+  .input {
+    border: none;
+    background: transparent;
+    font-size: var(--smrt-typography-body-large-size, 1rem);
+    line-height: var(--smrt-typography-body-large-line-height, 1.5);
+    letter-spacing: var(--smrt-typography-body-large-tracking, 0.5px);
+    color: var(--smrt-color-on-surface);
+    width: 100%;
+    padding: 0;
+    margin: 0;
+    height: 24px;
+    appearance: none;
+    cursor: pointer;
+  }
+
+  .input:focus {
+    outline: none;
+  }
+
+  .trailing-icon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: var(--field-color);
+    pointer-events: none;
+    margin-right: -4px;
+  }
+
+  .active-indicator {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    height: 1px;
+    background-color: var(--field-color);
+    transition: all 200ms cubic-bezier(0.2, 0, 0, 1);
+  }
+
+  .focused .active-indicator {
+    height: 2px;
+    background-color: var(--field-active);
+  }
+
+  .supporting-text {
+    padding: var(--smrt-spacing-1, 4px) var(--smrt-spacing-4, 16px) 0;
+    font-size: var(--smrt-typography-body-small-size, 0.75rem);
+  }
+
+  .info { color: var(--smrt-color-on-surface-variant); }
+
+  .disabled {
+    opacity: 0.38;
+    pointer-events: none;
+  }
+
+  /* Smrt mode overrides */
+  .smrt-mode {
+    --field-active: var(--smrt-color-tertiary);
+  }
+</style>

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

@@ -0,0 +1,25 @@
+import type { SelectOption } from './types.js';
+export interface Props {
+    /** Field name */
+    name: string;
+    /** Field label */
+    label?: string;
+    /** Description for voice extraction */
+    description?: string;
+    /** Available options */
+    options: SelectOption[];
+    /** Placeholder text */
+    placeholder?: string;
+    /** Current value (bindable) */
+    value?: string;
+    /** Disabled state */
+    disabled?: boolean;
+    /** Required field */
+    required?: boolean;
+    /** Called when value changes */
+    onchange?: (value: string) => void;
+}
+declare const SelectInput: import("svelte").Component<Props, {}, "value">;
+type SelectInput = ReturnType<typeof SelectInput>;
+export default SelectInput;
+//# sourceMappingURL=SelectInput.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SelectInput.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/forms/SelectInput.svelte.ts"],"names":[],"mappings":"AAWA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,YAAY,CAAC;AAG/C,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,wBAAwB;IACxB,OAAO,EAAE,YAAY,EAAE,CAAC;IACxB,uBAAuB;IACvB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,+BAA+B;IAC/B,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;AA2GD,QAAA,MAAM,WAAW,gDAAwC,CAAC;AAC1D,KAAK,WAAW,GAAG,UAAU,CAAC,OAAO,WAAW,CAAC,CAAC;AAClD,eAAe,WAAW,CAAC"}

package/dist/components/forms/TextInput.svelte

@@ -0,0 +1,415 @@
+<script lang="ts">
+import { Icon, ripple } from '@happyvertical/smrt-ui';
+import { useI18n } from '@happyvertical/smrt-ui/i18n';
+import {
+  formatEmail,
+  formatText,
+} from '@happyvertical/smrt-ui/utils/forms/formatters.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';
+import {
+  type FieldDefinition,
+  tryGetFormContext,
+} from '../../state/form-context.js';
+
+const { t } = useI18n();
+
+export interface Props {
+  /** Field name */
+  name: string;
+  /** Field label */
+  label?: string;
+  /** Description for LLM field extraction */
+  description?: string;
+  /** Input type */
+  type?: 'text' | 'email';
+  /** Placeholder text */
+  placeholder?: string;
+  /** Current value (bindable) */
+  value?: string;
+  /** Disabled state */
+  disabled?: boolean;
+  /** Required field */
+  required?: boolean;
+  /** Append to existing value instead of overwriting */
+  appendMode?: boolean;
+  /** Called when value changes */
+  onchange?: (value: string) => void;
+}
+
+let {
+  name,
+  label,
+  description,
+  type = 'text',
+  placeholder = '',
+  value = $bindable(''),
+  disabled = false,
+  required = false,
+  appendMode = false,
+  onchange,
+}: Props = $props();
+
+const app = useAppState();
+const stt = useSTT();
+const formContext = tryGetFormContext();
+
+let inputEl: HTMLInputElement | null = $state(null);
+let isHolding = $state(false);
+let isProcessing = $state(false);
+let isFocused = $state(false);
+let valueBeforeRecording = '';
+let processError = $state<string | null>(null);
+let recordingStartTime = 0;
+
+// Minimum hold time in ms before processing (prevents accidental clicks)
+const MIN_HOLD_TIME = 500;
+// Minimum transcript length to process
+const MIN_TRANSCRIPT_LENGTH = 2;
+
+// Check if we're in smrt mode
+const isSmrt = $derived(app.state.mode === 'smrt');
+
+// Track STT initialization and download progress
+const isInitializing = $derived(stt.isInitializing);
+const downloadProgress = $derived(stt.downloadProgress);
+
+// Validation
+const isValidEmail = $derived.by(() => {
+  if (type !== 'email' || !value) return true;
+  return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value);
+});
+const showInvalid = $derived(type === 'email' && value && !isValidEmail);
+
+// Helper to update value (works with $bindable)
+function updateValue(newValue: string) {
+  value = newValue;
+  onchange?.(value);
+}
+
+// Register with form context
+onMount(() => {
+  if (formContext) {
+    const fieldDef: FieldDefinition = {
+      name,
+      type: type === 'email' ? 'email' : 'text',
+      label,
+      description,
+      setValue: (v: unknown) => {
+        updateValue(String(v ?? ''));
+      },
+      getValue: () => value,
+    };
+    formContext.registerField(fieldDef);
+  }
+});
+
+onDestroy(() => {
+  if (formContext) {
+    formContext.unregisterField(name);
+  }
+});
+
+async function startHoldRecording() {
+  if (!isSmrt || disabled || isProcessing) return;
+
+  // Initialize STT with Whisper v2 for speed + accuracy
+  if (!stt.isReady || stt.adapterType !== 'whisper-wasm') {
+    await stt.initialize({ type: 'whisper-wasm' });
+  }
+
+  // Store current value for append mode
+  valueBeforeRecording = value;
+  processError = null;
+  recordingStartTime = Date.now();
+  isHolding = true;
+
+  // Use continuous mode to capture all speech while holding
+  await stt.start({ continuous: true, interimResults: false });
+}
+
+async function stopHoldRecording() {
+  if (!isHolding) return;
+
+  const holdDuration = Date.now() - recordingStartTime;
+  isHolding = false;
+  await stt.stop();
+
+  if (holdDuration < MIN_HOLD_TIME) return;
+
+  const maxWait = 3000;
+  const startWait = Date.now();
+  while (stt.isListening && Date.now() - startWait < maxWait) {
+    await new Promise((resolve) => setTimeout(resolve, 100));
+  }
+  await new Promise((resolve) => setTimeout(resolve, 100));
+
+  const finalTranscript = stt.lastResult?.trim() || '';
+
+  if (!finalTranscript || finalTranscript.length < MIN_TRANSCRIPT_LENGTH) {
+    processError = 'No speech detected. Hold longer and speak clearly.';
+    return;
+  }
+
+  isProcessing = true;
+  processError = null;
+
+  try {
+    const validatedValue =
+      type === 'email'
+        ? formatEmail(finalTranscript)
+        : formatText(finalTranscript);
+
+    if (appendMode && valueBeforeRecording) {
+      updateValue(`${valueBeforeRecording} ${validatedValue}`);
+    } else {
+      updateValue(validatedValue);
+    }
+  } catch (err) {
+    processError =
+      err instanceof Error ? err.message : 'Failed to process speech';
+  } finally {
+    isProcessing = false;
+  }
+}
+
+function handleMouseDown(e: MouseEvent) {
+  if (e.button !== 0) return;
+  startHoldRecording();
+}
+
+function handleMouseUp() {
+  stopHoldRecording();
+}
+
+function handleMouseLeave() {
+  stopHoldRecording();
+}
+
+function handleTouchStart(e: TouchEvent) {
+  e.preventDefault();
+  startHoldRecording();
+}
+
+function handleTouchEnd() {
+  stopHoldRecording();
+}
+
+function handleMicClick(e: MouseEvent) {
+  e.preventDefault();
+  e.stopPropagation();
+}
+
+function handleInput(e: Event) {
+  const target = e.target as HTMLInputElement;
+  updateValue(target.value);
+}
+</script>
+
+<div 
+  class="smrt-text-field" 
+  class:smrt-mode={isSmrt} 
+  class:focused={isFocused} 
+  class:invalid={showInvalid}
+  class:disabled
+  class:has-value={!!value}
+  class:listening={isHolding}
+>
+  <div class="container">
+    <div class="content">
+      {#if label}
+        <label for={name} class="label">{label}{#if required}*{/if}</label>
+      {/if}
+      <input
+        bind:this={inputEl}
+        id={name}
+        {name}
+        type={type}
+        placeholder={isFocused ? placeholder : ''}
+        {value}
+        disabled={disabled || isProcessing}
+        {required}
+        class="input"
+        aria-invalid={showInvalid ? 'true' : undefined}
+        aria-describedby={`${name}-supporting`}
+        oninput={handleInput}
+        onfocus={() => isFocused = true}
+        onblur={() => isFocused = false}
+        onmousedown={isSmrt ? handleMouseDown : undefined}
+        onmouseup={isSmrt ? handleMouseUp : undefined}
+        onmouseleave={isSmrt ? handleMouseLeave : undefined}
+        ontouchstart={isSmrt ? handleTouchStart : undefined}
+        ontouchend={isSmrt ? handleTouchEnd : undefined}
+      />
+    </div>
+
+    {#if isSmrt}
+      <button
+        type="button"
+        class="mic-btn"
+        class:active={isHolding}
+        {disabled}
+        use:ripple
+        onclick={handleMicClick}
+        onmousedown={(e) => { e.stopPropagation(); if (e.button === 0) startHoldRecording(); }}
+        onmouseup={handleMouseUp}
+        onmouseleave={handleMouseLeave}
+        ontouchstart={(e) => { e.stopPropagation(); e.preventDefault(); startHoldRecording(); }}
+        ontouchend={handleTouchEnd}
+        aria-label={t(M['ui.text_input.mic_aria_label'])}
+      >
+        <Icon name="mic" size={20} />
+      </button>
+    {/if}
+
+    <div class="active-indicator"></div>
+  </div>
+
+  <div id={`${name}-supporting`} class="supporting-text" aria-live="polite">
+    {#if isInitializing}
+      <span class="info">{t(M['ui.text_input.downloading_model'], { progress: downloadProgress })}</span>
+    {:else if isHolding}
+      <span class="success">Recording...</span>
+    {:else if isProcessing}
+      <span class="info">Processing...</span>
+    {:else if processError}
+      <span class="error">{processError}</span>
+    {:else if showInvalid}
+      <span class="error">{t(M['ui.text_input.invalid_email'])}</span>
+    {:else if description && isFocused}
+      <span class="info">{description}</span>
+    {/if}
+  </div>
+</div>
+
+<style>
+  .smrt-text-field {
+    --field-color: var(--smrt-color-on-surface-variant);
+    --field-bg: var(--smrt-color-surface-container-highest);
+    --field-active: var(--smrt-color-primary);
+    
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    min-width: 240px;
+  }
+
+  .container {
+    position: relative;
+    display: flex;
+    align-items: center;
+    background-color: var(--field-bg);
+    border-radius: var(--smrt-radius-sm, 4px) var(--smrt-radius-sm, 4px) 0 0;
+    min-height: 56px;
+    padding: 0 var(--smrt-spacing-4, 16px);
+    transition: background-color var(--smrt-duration-short3, 200ms) var(--smrt-easing-standard, cubic-bezier(0.2, 0, 0, 1));
+  }
+
+  .container:hover {
+    background-color: var(--smrt-color-surface-container-high);
+  }
+
+  .content {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    height: 100%;
+    padding-top: var(--smrt-spacing-2, 8px);
+  }
+
+  .label {
+    font-size: var(--smrt-typography-body-large-size, 1rem);
+    line-height: var(--smrt-typography-body-large-line-height, 1.5);
+    letter-spacing: var(--smrt-typography-body-large-tracking, 0.5px);
+    color: var(--field-color);
+    pointer-events: none;
+    transition: all var(--smrt-duration-short3, 200ms) var(--smrt-easing-standard, cubic-bezier(0.2, 0, 0, 1));
+    transform-origin: top left;
+  }
+
+  /* Label float logic */
+  .focused .label, .has-value .label, .listening .label {
+    transform: translateY(-8px) scale(0.75);
+    color: var(--field-active);
+  }
+
+  .input {
+    border: none;
+    background: transparent;
+    font-size: var(--smrt-typography-body-large-size, 1rem);
+    line-height: var(--smrt-typography-body-large-line-height, 1.5);
+    letter-spacing: var(--smrt-typography-body-large-tracking, 0.5px);
+    color: var(--smrt-color-on-surface);
+    width: 100%;
+    padding: 0;
+    margin: 0;
+    height: 24px;
+  }
+
+  .input:focus {
+    outline: none;
+  }
+
+  .active-indicator {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    height: 1px;
+    background-color: var(--field-color);
+    transition: all var(--smrt-duration-short3, 200ms) var(--smrt-easing-standard, cubic-bezier(0.2, 0, 0, 1));
+  }
+
+  .focused .active-indicator {
+    height: 2px;
+    background-color: var(--field-active);
+  }
+
+  .mic-btn {
+    width: 40px;
+    height: 40px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border: none;
+    background: transparent;
+    color: var(--field-color);
+    border-radius: var(--smrt-radius-full, 9999px);
+    cursor: pointer;
+    margin-right: -8px;
+    transition: all 200ms;
+  }
+
+  .mic-btn.active {
+    color: var(--smrt-color-primary);
+    background-color: var(--smrt-color-primary-container);
+  }
+
+  .supporting-text {
+    padding: var(--smrt-spacing-1, 4px) var(--smrt-spacing-4, 16px) 0;
+    font-size: var(--smrt-typography-body-small-size, 0.75rem);
+    min-height: 16px;
+  }
+
+  .info { color: var(--smrt-color-on-surface-variant); }
+  .error { color: var(--smrt-color-error); }
+  .success { color: var(--smrt-color-primary); }
+
+  /* States */
+  .invalid {
+    --field-active: var(--smrt-color-error);
+    --field-color: var(--smrt-color-error);
+  }
+
+  .listening {
+    background-color: var(--smrt-color-primary-container);
+  }
+
+  .disabled {
+    opacity: 0.38;
+    pointer-events: none;
+  }
+</style>