@happyvertical/smrt-svelte 0.30.0

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

@@ -0,0 +1,26 @@
+import type { Snippet } from 'svelte';
+import type { LLMModelId, STTAdapterType } from './types.js';
+export interface Props {
+    /** Form children */
+    children: Snippet;
+    /** Show mode toggle button */
+    showModeToggle?: boolean;
+    /** Show form-level listen button */
+    showFormListen?: boolean;
+    /** Silence timeout in seconds before stopping */
+    silenceTimeout?: number;
+    /** STT adapter type */
+    sttAdapter?: STTAdapterType;
+    /** LLM model for extraction (or 'none' for regex-only) */
+    llmModel?: LLMModelId;
+    /** Called when form is submitted (if provided, prevents native submission) */
+    onsubmit?: (data: Record<string, unknown>) => void;
+    /** HTTP method for native form submission (default: GET) */
+    method?: 'GET' | 'POST';
+    /** Form action URL for native form submission */
+    action?: string;
+}
+declare const Form: import("svelte").Component<Props, {}, "">;
+type Form = ReturnType<typeof Form>;
+export default Form;
+//# sourceMappingURL=Form.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Form.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/forms/Form.svelte.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAUtC,OAAO,KAAK,EAAE,UAAU,EAAE,cAAc,EAAE,MAAM,YAAY,CAAC;AAG7D,MAAM,WAAW,KAAK;IACpB,oBAAoB;IACpB,QAAQ,EAAE,OAAO,CAAC;IAClB,8BAA8B;IAC9B,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,oCAAoC;IACpC,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,iDAAiD;IACjD,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,uBAAuB;IACvB,UAAU,CAAC,EAAE,cAAc,CAAC;IAC5B,0DAA0D;IAC1D,QAAQ,CAAC,EAAE,UAAU,CAAC;IACtB,8EAA8E;IAC9E,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,KAAK,IAAI,CAAC;IACnD,4DAA4D;IAC5D,MAAM,CAAC,EAAE,KAAK,GAAG,MAAM,CAAC;IACxB,iDAAiD;IACjD,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AA0hBD,QAAA,MAAM,IAAI,2CAAwC,CAAC;AACnD,KAAK,IAAI,GAAG,UAAU,CAAC,OAAO,IAAI,CAAC,CAAC;AACpC,eAAe,IAAI,CAAC"}

package/dist/components/forms/FormGroup.svelte

@@ -0,0 +1,86 @@
+<script lang="ts">
+import type { Snippet } from 'svelte';
+import {
+  type FormGroupContextValue,
+  nextFieldId,
+  setFormGroupContext,
+} from '../../state/form-group-context.js';
+
+export interface Props {
+  label: string;
+  id?: string;
+  error?: string;
+  hint?: string;
+  required?: boolean;
+  children: Snippet;
+}
+
+const { label, id, error, hint, required = false, children }: Props = $props();
+
+// Stable id so the label's `for` and the wrapped input's `id` agree even when
+// the consumer doesn't pass one.
+const fallbackId = nextFieldId();
+const fieldId = $derived(id ?? fallbackId);
+const hintId = $derived(hint && !error ? `${fieldId}-hint` : undefined);
+const errorId = $derived(error ? `${fieldId}-error` : undefined);
+const describedBy = $derived(
+  [hintId, errorId].filter(Boolean).join(' ') || undefined,
+);
+
+// Publish the wiring a base input auto-applies (getter stays reactive as
+// hint/error change).
+setFormGroupContext(
+  (): FormGroupContextValue => ({
+    inputId: fieldId,
+    describedBy,
+    invalid: !!error,
+  }),
+);
+</script>
+
+<div class="form-group">
+	<label for={fieldId} class="form-label">
+		{label}
+		{#if required}
+			<span class="required" aria-hidden="true">*</span>
+		{/if}
+	</label>
+	{@render children()}
+	{#if hintId}
+		<p id={hintId} class="form-hint">{hint}</p>
+	{/if}
+	{#if errorId}
+		<p id={errorId} class="form-error" role="alert">{error}</p>
+	{/if}
+</div>
+
+<style>
+	.form-group {
+		margin-bottom: 1rem;
+	}
+
+	.form-label {
+		display: block;
+		font-size: var(--smrt-typography-label-large-size, 0.875rem);
+		font-weight: var(--smrt-typography-weight-medium, 500);
+		color: var(--smrt-color-on-surface, #374151);
+		margin-bottom: 0.375rem;
+	}
+
+	.required {
+		color: var(--smrt-color-error, #ba1a1a);
+		margin-left: 0.125rem;
+	}
+
+	.form-hint {
+		margin: 0.25rem 0 0;
+		font-size: var(--smrt-typography-body-small-size, 0.75rem);
+		color: var(--smrt-color-on-surface-variant, #6b7280);
+	}
+
+	.form-error {
+		margin: 0.25rem 0 0;
+		font-size: var(--smrt-typography-body-small-size, 0.75rem);
+		color: var(--smrt-color-error, #ba1a1a);
+	}
+</style>

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

@@ -0,0 +1,13 @@
+import type { Snippet } from 'svelte';
+export interface Props {
+    label: string;
+    id?: string;
+    error?: string;
+    hint?: string;
+    required?: boolean;
+    children: Snippet;
+}
+declare const FormGroup: import("svelte").Component<Props, {}, "">;
+type FormGroup = ReturnType<typeof FormGroup>;
+export default FormGroup;
+//# sourceMappingURL=FormGroup.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"FormGroup.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/forms/FormGroup.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAQtC,MAAM,WAAW,KAAK;IACpB,KAAK,EAAE,MAAM,CAAC;IACd,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,EAAE,OAAO,CAAC;CACnB;AAiDD,QAAA,MAAM,SAAS,2CAAwC,CAAC;AACxD,KAAK,SAAS,GAAG,UAAU,CAAC,OAAO,SAAS,CAAC,CAAC;AAC9C,eAAe,SAAS,CAAC"}

package/dist/components/forms/FormMicButton.svelte

@@ -0,0 +1,179 @@
+<script lang="ts">
+import { useI18n } from '@happyvertical/smrt-ui/i18n';
+import { useAppState } from '../../hooks/useAppState.svelte.js';
+import { M } from '../../i18n/strings.forms.js';
+import { tryGetFormContext } from '../../state/form-context.js';
+
+const { t } = useI18n();
+
+export interface Props {
+  /** Size of the mic icon */
+  size?: number;
+  /** Additional CSS class */
+  class?: string;
+}
+
+let { size = 16, class: className = '' }: Props = $props();
+
+const app = useAppState();
+const formContext = tryGetFormContext();
+
+const isSmrt = $derived(app.state.mode === 'smrt');
+
+// Use $state + $effect to track context values since getters don't propagate reactivity
+let isListening = $state(false);
+let isExtracting = $state(false);
+
+// Poll the context state - this will update when the form state changes
+// Using a fast polling interval (50ms) to reduce UI lag
+$effect(() => {
+  const checkState = () => {
+    if (formContext) {
+      const newListening = formContext.isFormListening;
+      const newExtracting = formContext.isExtracting;
+      // Only log on change to reduce noise
+      if (newListening !== isListening || newExtracting !== isExtracting) {
+      }
+      isListening = newListening;
+      isExtracting = newExtracting;
+    }
+  };
+
+  // Check immediately
+  checkState();
+
+  // Set up fast polling interval for state changes
+  const interval = setInterval(checkState, 50);
+
+  return () => clearInterval(interval);
+});
+
+function handleClick() {
+  formContext?.toggleListening();
+}
+</script>
+
+{#if isSmrt && formContext}
+  <span
+    class="form-mic-icon {className}"
+    class:listening={isListening}
+    class:extracting={isExtracting}
+    onclick={handleClick}
+    onkeydown={(e) => e.key === 'Enter' && handleClick()}
+    role="button"
+    tabindex="0"
+    aria-label={isListening ? 'Stop listening' : 'Click to speak'}
+  >
+    {#if isExtracting}
+      <svg
+        width={size}
+        height={size}
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        stroke-width="2"
+        class="spinner"
+      >
+        <circle cx="12" cy="12" r="10" stroke-dasharray="32" stroke-dashoffset="12"/>
+      </svg>
+    {:else}
+      <svg
+        width={size}
+        height={size}
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        stroke-width="2"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      >
+        <path d="M12 2a3 3 0 0 0-3 3v7a3 3 0 0 0 6 0V5a3 3 0 0 0-3-3Z"/>
+        <path d="M19 10v2a7 7 0 0 1-14 0v-2"/>
+        <line x1="12" x2="12" y1="19" y2="22"/>
+      </svg>
+    {/if}
+    {#if isListening}
+      <span class="tooltip">{t(M['ui.form_mic_button.tooltip'])}</span>
+    {/if}
+  </span>
+{/if}
+
+<style>
+  .form-mic-icon {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    position: relative;
+    color: var(--smrt-color-on-surface-variant, #9ca3af);
+    cursor: pointer;
+    transition: color var(--smrt-duration-short2, 150ms) var(--smrt-easing-standard, ease);
+    vertical-align: middle;
+    margin-left: 0.5rem;
+  }
+
+  .form-mic-icon:hover {
+    color: var(--smrt-color-on-surface-variant, #6b7280);
+  }
+
+  .form-mic-icon.listening {
+    color: var(--smrt-color-primary, #22c55e);
+    animation: pulse 1.5s ease-in-out infinite;
+  }
+
+  .form-mic-icon.extracting {
+    color: var(--smrt-color-primary, #22c55e);
+  }
+
+  .tooltip {
+    position: absolute;
+    top: 100%;
+    left: 50%;
+    transform: translateX(-50%);
+    margin-top: 0.5rem;
+    padding: 0.5rem 0.75rem;
+    background: var(--smrt-color-on-surface, #1f2937);
+    color: white;
+    font-size: var(--smrt-typography-label-medium-size, 0.75rem);
+    font-weight: var(--smrt-typography-weight-normal, 400);
+    border-radius: 0.375rem;
+    white-space: nowrap;
+    z-index: var(--smrt-z-index-tooltip, 1600);
+    box-shadow: var(--smrt-elevation-2, 0 4px 6px -1px color-mix(in srgb, var(--smrt-color-shadow) 10%, transparent));
+  }
+
+  .tooltip::before {
+    content: '';
+    position: absolute;
+    bottom: 100%;
+    left: 50%;
+    transform: translateX(-50%);
+    border: 6px solid transparent;
+    border-bottom-color: var(--smrt-color-on-surface);
+  }
+
+  @keyframes pulse {
+    0%, 100% { opacity: 1; }
+    50% { opacity: 0.6; }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .form-mic-icon.listening {
+      animation: none;
+    }
+  }
+
+  .spinner {
+    animation: spin 1s linear infinite;
+  }
+
+  @keyframes spin {
+    from { transform: rotate(0deg); }
+    to { transform: rotate(360deg); }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .spinner {
+      animation: none;
+    }
+  }
+</style>

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

@@ -0,0 +1,10 @@
+export interface Props {
+    /** Size of the mic icon */
+    size?: number;
+    /** Additional CSS class */
+    class?: string;
+}
+declare const FormMicButton: import("svelte").Component<Props, {}, "">;
+type FormMicButton = ReturnType<typeof FormMicButton>;
+export default FormMicButton;
+//# sourceMappingURL=FormMicButton.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"FormMicButton.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/forms/FormMicButton.svelte.ts"],"names":[],"mappings":"AASA,MAAM,WAAW,KAAK;IACpB,2BAA2B;IAC3B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,2BAA2B;IAC3B,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAyED,QAAA,MAAM,aAAa,2CAAwC,CAAC;AAC5D,KAAK,aAAa,GAAG,UAAU,CAAC,OAAO,aAAa,CAAC,CAAC;AACtD,eAAe,aAAa,CAAC"}

package/dist/components/forms/Input.svelte

@@ -0,0 +1,83 @@
+<script lang="ts">
+import type { HTMLInputAttributes } from 'svelte/elements';
+import { tryGetFormGroupContext } from '../../state/form-group-context.js';
+
+export interface Props extends Omit<HTMLInputAttributes, 'class' | 'value'> {
+  value?: string | number;
+  class?: string;
+}
+
+let {
+  id,
+  type = 'text',
+  value = $bindable(''),
+  placeholder,
+  disabled = false,
+  readonly = false,
+  required = false,
+  name,
+  class: className = '',
+  'aria-describedby': ariaDescribedby,
+  'aria-invalid': ariaInvalid,
+  ...rest
+}: Props = $props();
+
+// When wrapped in a <FormGroup>, inherit the id (so its <label for> resolves),
+// the hint/error association, and the error state — unless set explicitly.
+const formGroup = tryGetFormGroupContext();
+const resolvedId = $derived(id ?? formGroup?.().inputId);
+const resolvedDescribedBy = $derived(
+  ariaDescribedby ?? formGroup?.().describedBy,
+);
+const resolvedInvalid = $derived(
+  ariaInvalid ?? (formGroup?.().invalid ? 'true' : undefined),
+);
+</script>
+
+<input
+	id={resolvedId}
+	{type}
+	bind:value
+	{placeholder}
+	{disabled}
+	{readonly}
+	{required}
+	{name}
+	aria-describedby={resolvedDescribedBy}
+	aria-invalid={resolvedInvalid}
+	class="input {className}"
+	{...rest}
+/>
+
+<style>
+	.input {
+		display: block;
+		width: 100%;
+		padding: 0.5rem 0.75rem;
+		font-size: var(--smrt-typography-body-medium-size, 0.875rem);
+		line-height: var(--smrt-typography-body-medium-line-height, 1.5);
+		color: var(--smrt-color-on-surface, #1f2937);
+		background-color: var(--smrt-color-surface, #fff);
+		border: 1px solid var(--smrt-color-outline-variant, #d1d5db);
+		border-radius: var(--smrt-radius-small, 0.375rem);
+		transition:
+			border-color var(--smrt-duration-short2, 150ms) var(--smrt-easing-standard, ease-in-out),
+			box-shadow var(--smrt-duration-short2, 150ms) var(--smrt-easing-standard, ease-in-out);
+	}
+
+	.input:focus {
+		outline: none;
+		border-color: var(--smrt-color-primary, #005ac1);
+		box-shadow: 0 0 0 3px color-mix(in srgb, var(--smrt-color-primary, #005ac1) 10%, transparent);
+	}
+
+	.input:disabled {
+		background-color: var(--smrt-color-surface-container-high, #f3f4f6);
+		cursor: not-allowed;
+		opacity: 0.7;
+	}
+
+	.input::placeholder {
+		color: var(--smrt-color-on-surface-variant, #9ca3af);
+	}
+</style>

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

@@ -0,0 +1,9 @@
+import type { HTMLInputAttributes } from 'svelte/elements';
+export interface Props extends Omit<HTMLInputAttributes, 'class' | 'value'> {
+    value?: string | number;
+    class?: string;
+}
+declare const Input: import("svelte").Component<Props, {}, "value">;
+type Input = ReturnType<typeof Input>;
+export default Input;
+//# sourceMappingURL=Input.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Input.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/forms/Input.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,iBAAiB,CAAC;AAI3D,MAAM,WAAW,KAAM,SAAQ,IAAI,CAAC,mBAAmB,EAAE,OAAO,GAAG,OAAO,CAAC;IACzE,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACxB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAuCD,QAAA,MAAM,KAAK,gDAAwC,CAAC;AACpD,KAAK,KAAK,GAAG,UAAU,CAAC,OAAO,KAAK,CAAC,CAAC;AACtC,eAAe,KAAK,CAAC"}