@happyvertical/smrt-svelte 0.30.0

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

@@ -0,0 +1,26 @@
+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;
+}
+declare const TextInput: import("svelte").Component<Props, {}, "value">;
+type TextInput = ReturnType<typeof TextInput>;
+export default TextInput;
+//# sourceMappingURL=TextInput.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TextInput.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/forms/TextInput.svelte.ts"],"names":[],"mappings":"AAmBA,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,iBAAiB;IACjB,IAAI,CAAC,EAAE,MAAM,GAAG,OAAO,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,sDAAsD;IACtD,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,gCAAgC;IAChC,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACpC;AA6ND,QAAA,MAAM,SAAS,gDAAwC,CAAC;AACxD,KAAK,SAAS,GAAG,UAAU,CAAC,OAAO,SAAS,CAAC,CAAC;AAC9C,eAAe,SAAS,CAAC"}

package/dist/components/forms/Textarea.svelte

@@ -0,0 +1,85 @@
+<script lang="ts">
+import type { HTMLTextareaAttributes } from 'svelte/elements';
+import { tryGetFormGroupContext } from '../../state/form-group-context.js';
+
+export interface Props extends Omit<HTMLTextareaAttributes, 'class' | 'value'> {
+  value?: string;
+  rows?: number;
+  class?: string;
+}
+
+let {
+  id,
+  value = $bindable(''),
+  placeholder,
+  disabled = false,
+  readonly = false,
+  required = false,
+  name,
+  rows = 4,
+  class: className = '',
+  'aria-describedby': ariaDescribedby,
+  'aria-invalid': ariaInvalid,
+  ...rest
+}: Props = $props();
+
+// Inherit id / hint+error association / error state from a wrapping FormGroup.
+const formGroup = tryGetFormGroupContext();
+const resolvedId = $derived(id ?? formGroup?.().inputId);
+const resolvedDescribedBy = $derived(
+  ariaDescribedby ?? formGroup?.().describedBy,
+);
+const resolvedInvalid = $derived(
+  ariaInvalid ?? (formGroup?.().invalid ? 'true' : undefined),
+);
+</script>
+
+<textarea
+	id={resolvedId}
+	bind:value
+	{placeholder}
+	{disabled}
+	{readonly}
+	{required}
+	{name}
+	{rows}
+	aria-describedby={resolvedDescribedBy}
+	aria-invalid={resolvedInvalid}
+	class="textarea {className}"
+	{...rest}
+></textarea>
+
+<style>
+	.textarea {
+		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: 0.375rem;
+		resize: vertical;
+		min-height: 80px;
+		transition:
+			border-color 0.15s ease-in-out,
+			box-shadow 0.15s ease-in-out;
+	}
+
+	.textarea: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);
+	}
+
+	.textarea:disabled {
+		background-color: var(--smrt-color-surface-container-high, #f3f4f6);
+		cursor: not-allowed;
+		opacity: 0.7;
+	}
+
+	.textarea::placeholder {
+		color: var(--smrt-color-on-surface-variant, #9ca3af);
+	}
+</style>

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"Textarea.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/forms/Textarea.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,iBAAiB,CAAC;AAI9D,MAAM,WAAW,KAAM,SAAQ,IAAI,CAAC,sBAAsB,EAAE,OAAO,GAAG,OAAO,CAAC;IAC5E,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAsCD,QAAA,MAAM,QAAQ,gDAAwC,CAAC;AACvD,KAAK,QAAQ,GAAG,UAAU,CAAC,OAAO,QAAQ,CAAC,CAAC;AAC5C,eAAe,QAAQ,CAAC"}

package/dist/components/forms/TextareaInput.svelte

@@ -0,0 +1,386 @@
+<script lang="ts">
+import { Icon, ripple } from '@happyvertical/smrt-ui';
+import { useI18n } from '@happyvertical/smrt-ui/i18n';
+import { 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 voice extraction */
+  description?: string;
+  /** Placeholder text */
+  placeholder?: string;
+  /** Current value (bindable) */
+  value?: string;
+  /** Number of rows */
+  rows?: number;
+  /** 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,
+  placeholder = '',
+  value = $bindable(''),
+  rows = 4,
+  disabled = false,
+  required = false,
+  appendMode = false,
+  onchange,
+}: Props = $props();
+
+const app = useAppState();
+const stt = useSTT();
+const formContext = tryGetFormContext();
+
+let textareaEl: HTMLTextAreaElement | 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;
+
+const MIN_HOLD_TIME = 500;
+const MIN_TRANSCRIPT_LENGTH = 2;
+
+const isSmrt = $derived(app.state.mode === 'smrt');
+const isInitializing = $derived(stt.isInitializing);
+const downloadProgress = $derived(stt.downloadProgress);
+
+function updateValue(newValue: string) {
+  value = newValue;
+  onchange?.(value);
+}
+
+// Register with form context
+onMount(() => {
+  if (formContext) {
+    const fieldDef: FieldDefinition = {
+      name,
+      type: 'textarea',
+      label,
+      description,
+      setValue: (v: unknown) => {
+        if (appendMode && value) {
+          updateValue(`${value}\n${String(v ?? '')}`);
+        } else {
+          updateValue(String(v ?? ''));
+        }
+      },
+      getValue: () => value,
+    };
+    formContext.registerField(fieldDef);
+  }
+});
+
+onDestroy(() => {
+  if (formContext) {
+    formContext.unregisterField(name);
+  }
+});
+
+async function startHoldRecording() {
+  if (!isSmrt || disabled || isProcessing) return;
+
+  if (!stt.isReady || stt.adapterType !== 'whisper-wasm') {
+    await stt.initialize({ type: 'whisper-wasm' });
+  }
+
+  valueBeforeRecording = value;
+  processError = null;
+  recordingStartTime = Date.now();
+  isHolding = true;
+
+  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 formattedValue = formatText(finalTranscript);
+
+    if (appendMode && valueBeforeRecording) {
+      updateValue(`${valueBeforeRecording}\n${formattedValue}`);
+    } else {
+      updateValue(formattedValue);
+    }
+  } 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 handleInput(e: Event) {
+  const target = e.target as HTMLTextAreaElement;
+  updateValue(target.value);
+}
+</script>
+
+<div 
+  class="smrt-text-field multiline" 
+  class:smrt-mode={isSmrt} 
+  class:focused={isFocused} 
+  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}
+      <textarea
+        bind:this={textareaEl}
+        id={name}
+        {name}
+        placeholder={isFocused ? placeholder : ''}
+        {value}
+        {rows}
+        disabled={disabled || isProcessing}
+        {required}
+        class="input"
+        aria-invalid={processError ? '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}
+      ></textarea>
+    </div>
+
+    {#if isSmrt}
+      <button
+        type="button"
+        class="mic-btn"
+        class:active={isHolding}
+        {disabled}
+        use:ripple
+        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.textarea_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.textarea_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 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%;
+  }
+
+  .container {
+    position: relative;
+    display: flex;
+    align-items: flex-start;
+    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;
+    padding-top: var(--smrt-spacing-2, 8px);
+    padding-bottom: 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;
+    margin-bottom: var(--smrt-spacing-1, 4px);
+  }
+
+  .focused .label, .has-value .label, .listening .label {
+    transform: translateY(-4px) 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;
+    resize: vertical;
+    font-family: inherit;
+  }
+
+  .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;
+    margin-top: var(--smrt-spacing-2, 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); }
+
+  .listening {
+    background-color: var(--smrt-color-primary-container);
+  }
+
+  .disabled {
+    opacity: 0.38;
+    pointer-events: none;
+  }
+
+  .smrt-mode {
+    --field-active: var(--smrt-color-tertiary);
+  }
+</style>

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

@@ -0,0 +1,26 @@
+export interface Props {
+    /** Field name */
+    name: string;
+    /** Field label */
+    label?: string;
+    /** Description for voice extraction */
+    description?: string;
+    /** Placeholder text */
+    placeholder?: string;
+    /** Current value (bindable) */
+    value?: string;
+    /** Number of rows */
+    rows?: number;
+    /** 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;
+}
+declare const TextareaInput: import("svelte").Component<Props, {}, "value">;
+type TextareaInput = ReturnType<typeof TextareaInput>;
+export default TextareaInput;
+//# sourceMappingURL=TextareaInput.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TextareaInput.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/forms/TextareaInput.svelte.ts"],"names":[],"mappings":"AAgBA,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,uBAAuB;IACvB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,+BAA+B;IAC/B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,qBAAqB;IACrB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,qBAAqB;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,qBAAqB;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,sDAAsD;IACtD,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,gCAAgC;IAChC,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACpC;AAuMD,QAAA,MAAM,aAAa,gDAAwC,CAAC;AAC5D,KAAK,aAAa,GAAG,UAAU,CAAC,OAAO,aAAa,CAAC,CAAC;AACtD,eAAe,aAAa,CAAC"}