@streamscloud/kit 0.2.42 → 0.9.1

package/dist/ui/numeral-input/cmp.numeral-input.svelte

@@ -0,0 +1,331 @@
+<script lang="ts">import { InputClearButton } from '../_internal/input-clear-button';
+import { Icon } from '../icon';
+import { formatNumeral, NumeralThousandGroupStyles, registerCursorTracker } from 'cleave-zen';
+const { size = 'md', disabled = false, readonly = false, inert = false, error = false, borderless = false, placeholder = '', title = '', name = '', id = null, autofocus = false, min = null, max = null, decimals = 2, suffix = '', 'aria-describedby': ariaDescribedby, 'aria-label': ariaLabel, 'aria-required': ariaRequired, icon, iconPosition = 'leading', secondaryIcon, ...mode } = $props();
+let inputEl = $state.raw(undefined);
+const formatOptions = $derived({
+    delimiter: ' ',
+    numeralDecimalScale: decimals,
+    numeralThousandsGroupStyle: NumeralThousandGroupStyles.THOUSAND,
+    numeralIntegerScale: 14
+});
+// Display string — formatted value + suffix, or empty when null.
+const displayValue = $derived(mode.value === null || mode.value === undefined ? '' : formatNumeral(String(mode.value), formatOptions) + (suffix && mode.value !== null ? suffix : ''));
+const clearButtonVisible = $derived(mode.clearable === true && !disabled && !readonly && !inert && mode.value !== null && mode.value !== undefined);
+/** Imperative API exposed via `bind:this`. */
+export const focus = () => inputEl?.focus();
+export const select = () => inputEl?.select();
+/** Parses the raw input string back to a number (or null when empty). Clamps to min/max. */
+const parseValue = (raw) => {
+    if (!raw.trim()) {
+        return null;
+    }
+    // Strip suffix + non-numeric chars except `.` `,` `-`, then normalize to dot-decimal.
+    let cleaned = suffix ? raw.replace(suffix, '') : raw;
+    cleaned = cleaned
+        .replace(/\s/g, '')
+        .replace(',', '.')
+        .replace(/[^0-9.-]/g, '');
+    const n = parseFloat(cleaned);
+    if (Number.isNaN(n)) {
+        return null;
+    }
+    let clamped = n;
+    if (min !== null && clamped < min) {
+        clamped = min;
+    }
+    if (max !== null && clamped > max) {
+        clamped = max;
+    }
+    return Number(clamped.toFixed(decimals));
+};
+const initInput = (node) => {
+    inputEl = node;
+    if (autofocus) {
+        node.focus();
+    }
+    registerCursorTracker({ input: node, delimiter: formatOptions.delimiter, delimiters: [] });
+    mode.on?.mounted?.({ input: node });
+};
+const emit = (parsed, kind) => {
+    if (mode.clearable) {
+        const cb = mode.on?.[kind];
+        cb?.(parsed);
+    }
+    else {
+        // RequiredProps callbacks take `number` (never null). Coerce null → 0 (the legacy contract).
+        if (parsed !== null) {
+            mode.on?.[kind]?.(parsed);
+        }
+    }
+};
+const handleInput = () => {
+    if (!inputEl) {
+        return;
+    }
+    // Reformat through cleave-zen so invalid characters are stripped and the decimal scale
+    // is capped to `decimals` while the user is typing. Strip suffix first so it doesn't
+    // get mangled, re-add nothing here (suffix re-appears on blur via displayValue resync).
+    const raw = suffix ? inputEl.value.replace(suffix, '') : inputEl.value;
+    let formatted = formatNumeral(raw, formatOptions);
+    // Clamp on the fly when typing pushes the value past min / max — re-format the clamped
+    // result so the visible input matches the emitted value.
+    const parsedRaw = parseFloat(formatted.replace(/\s/g, '').replace(',', '.'));
+    if (!Number.isNaN(parsedRaw)) {
+        let clamped = parsedRaw;
+        if (min !== null && clamped < min) {
+            clamped = min;
+        }
+        if (max !== null && clamped > max) {
+            clamped = max;
+        }
+        if (clamped !== parsedRaw) {
+            formatted = formatNumeral(String(Number(clamped.toFixed(decimals))), formatOptions);
+        }
+    }
+    if (inputEl.value !== formatted) {
+        inputEl.value = formatted;
+    }
+    const parsed = parseValue(inputEl.value);
+    emit(parsed, 'input');
+};
+const handleChange = () => {
+    if (!inputEl) {
+        return;
+    }
+    const parsed = parseValue(inputEl.value);
+    emit(parsed, 'change');
+};
+const handleClear = () => {
+    if (!inputEl) {
+        return;
+    }
+    inputEl.value = '';
+    emit(null, 'input');
+    emit(null, 'change');
+    inputEl.focus();
+};
+const handleBlur = () => {
+    if (!inputEl) {
+        return;
+    }
+    const parsed = parseValue(inputEl.value);
+    // Re-sync to the formatted display value so the input reflects clamped / canonical form.
+    inputEl.value = displayValue;
+    emit(parsed, 'blur');
+};
+const focusInput = () => inputEl?.focus();
+</script>
+
+<div
+  class="numeral-input numeral-input--{size}"
+  class:numeral-input--disabled={disabled}
+  class:numeral-input--readonly={readonly}
+  class:numeral-input--inert={inert}
+  class:numeral-input--error={error}
+  class:numeral-input--borderless={borderless}
+  onclick={focusInput}
+  onkeydown={() => undefined}
+  role="none">
+  {#if icon && iconPosition === 'leading'}
+    <span class="numeral-input__icon numeral-input__icon--leading" aria-hidden="true">
+      {#if typeof icon === 'string'}<Icon src={icon} />{:else}{@render icon()}{/if}
+    </span>
+  {/if}
+  {#if secondaryIcon && iconPosition === 'trailing'}
+    <span class="numeral-input__icon numeral-input__icon--leading" aria-hidden="true">
+      {#if typeof secondaryIcon === 'string'}<Icon src={secondaryIcon} />{:else}{@render secondaryIcon()}{/if}
+    </span>
+  {/if}
+
+  <!-- svelte-ignore a11y_autofocus -->
+  <input
+    use:initInput
+    class="numeral-input__el"
+    type="text"
+    inputmode="decimal"
+    name={name}
+    id={id}
+    placeholder={placeholder}
+    disabled={disabled}
+    readonly={readonly}
+    inert={inert}
+    autofocus={autofocus}
+    title={title}
+    value={displayValue}
+    aria-invalid={error ? 'true' : undefined}
+    aria-describedby={ariaDescribedby}
+    aria-label={ariaLabel}
+    aria-required={ariaRequired ? 'true' : undefined}
+    oninput={handleInput}
+    onchange={handleChange}
+    onblur={handleBlur}
+    onfocus={() => mode.on?.focus?.()} />
+
+  {#if clearButtonVisible}
+    <InputClearButton size={size} on={{ clear: handleClear }} />
+  {/if}
+
+  {#if icon && iconPosition === 'trailing'}
+    <span class="numeral-input__icon numeral-input__icon--trailing" aria-hidden="true">
+      {#if typeof icon === 'string'}<Icon src={icon} />{:else}{@render icon()}{/if}
+    </span>
+  {/if}
+  {#if secondaryIcon && iconPosition === 'leading'}
+    <span class="numeral-input__icon numeral-input__icon--trailing" aria-hidden="true">
+      {#if typeof secondaryIcon === 'string'}<Icon src={secondaryIcon} />{:else}{@render secondaryIcon()}{/if}
+    </span>
+  {/if}
+</div>
+
+<!--
+@component
+Formatted number input with locale-aware thousand separators, decimal scale, min/max clamping,
+optional suffix (` %`, ` kg`), and smooth cursor tracking while typing (via cleave-zen).
+Discriminated by `clearable`: `clearable: true` allows `null` (with × button); `clearable: false`
+requires a non-null value. CSS API mirrors `Input` for visual-language compatibility.
+
+### CSS Custom Properties
+| Property | Description | Default |
+|---|---|---|
+| `--sc-kit--numeral-input--height` | Container height | per size |
+| `--sc-kit--numeral-input--padding-inline` | Horizontal padding | per size |
+| `--sc-kit--numeral-input--gap` | Gap between value and icons / clear | `var(--sc-kit--space--2)` |
+| `--sc-kit--numeral-input--width` | Container width | `100%` |
+| `--sc-kit--numeral-input--background` | Container background | `var(--sc-kit--color--bg--field)` |
+| `--sc-kit--numeral-input--background--disabled` | Disabled / inert background | `var(--sc-kit--color--bg--field-alt)` |
+| `--sc-kit--numeral-input--border-color` | Border color | `var(--sc-kit--color--border--field)` |
+| `--sc-kit--numeral-input--border-color--hover` | Border color on hover | `var(--sc-kit--color--border--strong)` |
+| `--sc-kit--numeral-input--border-color--error` | Border color in error state | `var(--sc-kit--color--danger)` |
+| `--sc-kit--numeral-input--border-radius` | Border radius | `var(--sc-kit--radius--sm)` |
+| `--sc-kit--numeral-input--underline-color` | Inset bottom-underline indicator | `transparent` |
+| `--sc-kit--numeral-input--font-size` | Text font size | per size |
+| `--sc-kit--numeral-input--color` | Text color | `var(--sc-kit--color--text--primary)` |
+| `--sc-kit--numeral-input--placeholder--color` | Placeholder text color | `var(--sc-kit--color--text--placeholder)` |
+| `--sc-kit--numeral-input--icon--color` | Leading / trailing icon color (does NOT affect inner affordances) | `var(--sc-kit--color--text--muted)` |
+| `--sc-kit--numeral-input--icon--size` | Leading / trailing icon size (does NOT affect inner affordances) | per size |
+-->
+
+<style>.numeral-input {
+  --_ni--height: var(--sc-kit--numeral-input--height, var(--sc-kit--field--height--md));
+  --_ni--padding-inline: var(--sc-kit--numeral-input--padding-inline, var(--sc-kit--field--padding-inline--md));
+  --_ni--gap: var(--sc-kit--numeral-input--gap, var(--sc-kit--space--2));
+  --_ni--width: var(--sc-kit--numeral-input--width, 100%);
+  --_ni--background: var(--sc-kit--numeral-input--background, var(--sc-kit--color--bg--field));
+  --_ni--background-disabled: var(--sc-kit--numeral-input--background--disabled, var(--sc-kit--color--bg--field-alt));
+  --_ni--border-color: var(--sc-kit--numeral-input--border-color, var(--sc-kit--color--border--field));
+  --_ni--border-color-hover: var(--sc-kit--numeral-input--border-color--hover, var(--sc-kit--color--border--strong));
+  --_ni--border-color-error: var(--sc-kit--numeral-input--border-color--error, var(--sc-kit--color--danger));
+  --_ni--border-radius: var(--sc-kit--numeral-input--border-radius, var(--sc-kit--radius--sm));
+  --_ni--underline-color: var(--sc-kit--numeral-input--underline-color, transparent);
+  --_ni--font-size: var(--sc-kit--numeral-input--font-size, var(--sc-kit--font-size--md));
+  --_ni--color: var(--sc-kit--numeral-input--color, var(--sc-kit--color--text--primary));
+  --_ni--placeholder-color: var(--sc-kit--numeral-input--placeholder--color, var(--sc-kit--color--text--placeholder));
+  --_ni--icon-color: var(--sc-kit--numeral-input--icon--color, var(--sc-kit--color--text--muted));
+  --_ni--icon-size: var(--sc-kit--numeral-input--icon--size, var(--sc-kit--field--icon--size--md));
+  --_--input-affordance--opacity: 0;
+  --_--input-affordance--scale: 0;
+}
+.numeral-input:where(:hover), .numeral-input:where(:focus-within) {
+  --_--input-affordance--opacity: 1;
+  --_--input-affordance--scale: 1;
+}
+.numeral-input {
+  box-sizing: border-box;
+  display: inline-flex;
+  align-items: center;
+  width: var(--_ni--width);
+  max-width: 100%;
+  height: var(--_ni--height);
+  padding: 0 var(--_ni--padding-inline);
+  background: var(--_ni--background);
+  border: 1px solid var(--_ni--border-color);
+  border-radius: var(--_ni--border-radius);
+  color: var(--_ni--color);
+  font-size: var(--_ni--font-size);
+  line-height: var(--sc-kit--leading--tight);
+  cursor: text;
+  box-shadow: inset 0 -0.13em var(--_ni--underline-color);
+  transition: background-color var(--sc-kit--duration--base) var(--sc-kit--ease--default), border-color var(--sc-kit--duration--base) var(--sc-kit--ease--default), color var(--sc-kit--duration--base) var(--sc-kit--ease--default), box-shadow var(--sc-kit--duration--base) var(--sc-kit--ease--default);
+}
+.numeral-input--sm {
+  --sc-kit--numeral-input--height: var(--sc-kit--field--height--sm);
+  --sc-kit--numeral-input--padding-inline: var(--sc-kit--field--padding-inline--sm);
+  --sc-kit--numeral-input--font-size: var(--sc-kit--font-size--sm);
+  --sc-kit--numeral-input--icon--size: var(--sc-kit--field--icon--size--sm);
+}
+.numeral-input--md {
+  --sc-kit--numeral-input--height: var(--sc-kit--field--height--md);
+  --sc-kit--numeral-input--padding-inline: var(--sc-kit--field--padding-inline--md);
+  --sc-kit--numeral-input--font-size: var(--sc-kit--font-size--md);
+  --sc-kit--numeral-input--icon--size: var(--sc-kit--field--icon--size--md);
+}
+.numeral-input--lg {
+  --sc-kit--numeral-input--height: var(--sc-kit--field--height--lg);
+  --sc-kit--numeral-input--padding-inline: var(--sc-kit--field--padding-inline--lg);
+  --sc-kit--numeral-input--font-size: var(--sc-kit--font-size--lg);
+  --sc-kit--numeral-input--icon--size: var(--sc-kit--field--icon--size--lg);
+}
+.numeral-input:where(:hover) {
+  --sc-kit--numeral-input--border-color: var(--_ni--border-color-hover);
+}
+.numeral-input:where(:focus-within) {
+  --sc-kit--numeral-input--underline-color: var(--sc-kit--color--accent);
+}
+.numeral-input--error {
+  --sc-kit--numeral-input--border-color: var(--_ni--border-color-error);
+  --sc-kit--numeral-input--underline-color: var(--sc-kit--color--danger);
+}
+.numeral-input--disabled, .numeral-input--readonly, .numeral-input--inert {
+  --sc-kit--numeral-input--border-color: unset;
+  --sc-kit--numeral-input--underline-color: unset;
+  --_--input-affordance--opacity: 0;
+  --_--input-affordance--scale: 0;
+  cursor: default;
+}
+.numeral-input--disabled {
+  --sc-kit--numeral-input--background: var(--_ni--background-disabled);
+  --sc-kit--numeral-input--color: var(--sc-kit--color--text--muted);
+}
+.numeral-input--borderless {
+  --sc-kit--numeral-input--background: transparent;
+  --sc-kit--numeral-input--border-color: transparent;
+  --sc-kit--numeral-input--underline-color: transparent;
+  box-shadow: none;
+}
+.numeral-input__el {
+  flex: 1;
+  min-width: 0;
+  height: 100%;
+  padding: 0;
+  margin: 0;
+  border: none;
+  outline: none;
+  background: transparent;
+  color: inherit;
+  font-family: inherit;
+  font-size: inherit;
+  font-variant-numeric: tabular-nums;
+  line-height: inherit;
+}
+.numeral-input__el::placeholder {
+  color: var(--_ni--placeholder-color);
+}
+.numeral-input__el:disabled {
+  cursor: default;
+}
+.numeral-input__icon {
+  --sc-kit--icon--color: var(--_ni--icon-color);
+  --sc-kit--icon--size: var(--_ni--icon-size);
+  flex-shrink: 0;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  line-height: 0;
+}
+.numeral-input__icon--leading {
+  margin-inline-end: var(--_ni--gap);
+}
+.numeral-input__icon--trailing {
+  margin-inline-start: var(--_ni--gap);
+}</style>

package/dist/ui/numeral-input/cmp.numeral-input.svelte.d.ts

@@ -0,0 +1,97 @@
+import type { Snippet } from 'svelte';
+type BaseProps = {
+    /** @default 'md' */
+    size?: 'sm' | 'md' | 'lg';
+    disabled?: boolean;
+    /** Non-editable but selectable; value still submitted with a form. */
+    readonly?: boolean;
+    /** Visual display mode — non-focusable, no hover/focus animations, no clear button. */
+    inert?: boolean;
+    /** Visual error state — also sets `aria-invalid="true"`. */
+    error?: boolean;
+    /** Strip border + background + focus underline. */
+    borderless?: boolean;
+    placeholder?: string;
+    title?: string;
+    name?: string;
+    id?: string | null;
+    autofocus?: boolean;
+    /** Minimum allowed value (clamped on input). */
+    min?: number | null;
+    /** Maximum allowed value (clamped on input). */
+    max?: number | null;
+    /** Number of decimal places shown. @default 2 */
+    decimals?: number;
+    /** Suffix appended to the formatted value at rest (e.g. ` %`, ` kg`). */
+    suffix?: string;
+    'aria-describedby'?: string;
+    'aria-label'?: string;
+    'aria-required'?: boolean;
+    /** Primary icon — SVG source string or snippet. */
+    icon?: string | Snippet;
+    /** Side of the input where the primary icon sits. @default 'leading' */
+    iconPosition?: 'leading' | 'trailing';
+    /** Optional secondary icon — always on the opposite side from `icon`. */
+    secondaryIcon?: string | Snippet;
+};
+type ClearableProps = BaseProps & {
+    /** Value can be cleared to `null`. Trigger shows an × button when set. */
+    clearable: true;
+    value: number | null | undefined;
+    on?: {
+        input?: (value: number | null) => void;
+        change?: (value: number | null) => void;
+        mounted?: (data: {
+            input: HTMLInputElement;
+        }) => void;
+        blur?: (value: number | null) => void;
+        focus?: () => void;
+    };
+};
+type RequiredProps = BaseProps & {
+    /** Value is required; no clear button. */
+    clearable: false;
+    value: number;
+    on?: {
+        input?: (value: number) => void;
+        change?: (value: number) => void;
+        mounted?: (data: {
+            input: HTMLInputElement;
+        }) => void;
+        blur?: (value: number) => void;
+        focus?: () => void;
+    };
+};
+type Props = ClearableProps | RequiredProps;
+/**
+ * Formatted number input with locale-aware thousand separators, decimal scale, min/max clamping,
+ * optional suffix (` %`, ` kg`), and smooth cursor tracking while typing (via cleave-zen).
+ * Discriminated by `clearable`: `clearable: true` allows `null` (with × button); `clearable: false`
+ * requires a non-null value. CSS API mirrors `Input` for visual-language compatibility.
+ *
+ * ### CSS Custom Properties
+ * | Property | Description | Default |
+ * |---|---|---|
+ * | `--sc-kit--numeral-input--height` | Container height | per size |
+ * | `--sc-kit--numeral-input--padding-inline` | Horizontal padding | per size |
+ * | `--sc-kit--numeral-input--gap` | Gap between value and icons / clear | `var(--sc-kit--space--2)` |
+ * | `--sc-kit--numeral-input--width` | Container width | `100%` |
+ * | `--sc-kit--numeral-input--background` | Container background | `var(--sc-kit--color--bg--field)` |
+ * | `--sc-kit--numeral-input--background--disabled` | Disabled / inert background | `var(--sc-kit--color--bg--field-alt)` |
+ * | `--sc-kit--numeral-input--border-color` | Border color | `var(--sc-kit--color--border--field)` |
+ * | `--sc-kit--numeral-input--border-color--hover` | Border color on hover | `var(--sc-kit--color--border--strong)` |
+ * | `--sc-kit--numeral-input--border-color--error` | Border color in error state | `var(--sc-kit--color--danger)` |
+ * | `--sc-kit--numeral-input--border-radius` | Border radius | `var(--sc-kit--radius--sm)` |
+ * | `--sc-kit--numeral-input--underline-color` | Inset bottom-underline indicator | `transparent` |
+ * | `--sc-kit--numeral-input--font-size` | Text font size | per size |
+ * | `--sc-kit--numeral-input--color` | Text color | `var(--sc-kit--color--text--primary)` |
+ * | `--sc-kit--numeral-input--placeholder--color` | Placeholder text color | `var(--sc-kit--color--text--placeholder)` |
+ * | `--sc-kit--numeral-input--icon--color` | Leading / trailing icon color (does NOT affect inner affordances) | `var(--sc-kit--color--text--muted)` |
+ * | `--sc-kit--numeral-input--icon--size` | Leading / trailing icon size (does NOT affect inner affordances) | per size |
+ */
+declare const Cmp: import("svelte").Component<Props, {
+    /** Imperative API exposed via `bind:this`. */ focus: () => void;
+    select: () => void;
+}, "">;
+type Cmp = ReturnType<typeof Cmp>;
+export default Cmp;

package/dist/ui/numeral-input/index.d.ts

@@ -0,0 +1 @@
+export { default as NumeralInput } from './cmp.numeral-input.svelte';

package/dist/ui/numeral-input/index.js

@@ -0,0 +1 @@
+export { default as NumeralInput } from './cmp.numeral-input.svelte';

package/dist/ui/open-file-button/cmp.open-file-button.svelte

@@ -0,0 +1,42 @@
+<script lang="ts">import { FileValidator, openFile } from '../../core/files';
+import { Button } from '../button';
+const { size = 'md', variant = 'secondary', disabled = false, multiple = false, capture, validationRules, icon, iconPosition = 'leading', children, 'aria-label': ariaLabel, on } = $props();
+// Auto-derive native picker `accept` from any Mime-style rule that exposes its accept string.
+const accept = $derived(validationRules
+    ?.map((r) => r.accept)
+    .filter((a) => !!a)
+    .join(',') ?? '');
+const handleClick = async () => {
+    const files = await openFile({ multiple, accept, capture });
+    if (files.length === 0) {
+        return;
+    }
+    const results = validationRules && validationRules.length > 0
+        ? await FileValidator.validateMany(files, validationRules)
+        : files.map((file) => ({ file, isValid: true, errors: [] }));
+    on?.select?.(results);
+};
+</script>
+
+<Button
+  type="button"
+  size={size}
+  variant={variant}
+  disabled={disabled}
+  icon={icon}
+  iconPosition={iconPosition}
+  aria-label={ariaLabel}
+  on={{ click: handleClick }}>
+  {#if children}{@render children()}{/if}
+</Button>
+
+<!--
+@component
+Programmatic file-picker button — clicking opens a native file dialog, applies
+`validationRules` (if any), and emits `on.select(results: FileValidationResult[])`.
+A thin wrapper around `Button` and the `openFile()` helper from `core/files`. Same selector
+semantics as `FileUploader`, just exposed as a button instead of a drop zone.
+
+Error UX is consumer-owned — read `result.isValid` / `result.errors` and surface them via
+`Toastr`, a `Banner`, or anything else. The component does not render error UI.
+-->

package/dist/ui/open-file-button/cmp.open-file-button.svelte.d.ts

@@ -0,0 +1,45 @@
+import type { FileValidationResult, FileValidationRule } from '../../core/files';
+import type { ButtonSize, ButtonVariant } from '../button';
+import type { IconProp } from '../icon';
+import type { Snippet } from 'svelte';
+type Props = {
+    /** @default 'md' */
+    size?: ButtonSize;
+    /** @default 'secondary' */
+    variant?: ButtonVariant;
+    disabled?: boolean;
+    multiple?: boolean;
+    /** Optional file-picker capture hint (mobile camera / mic). */
+    capture?: 'user' | 'environment';
+    /**
+     * Rules applied to picked files. The native picker `accept` filter is auto-derived from
+     * any `FileRules.Mime(...)` rule's `accept` — pass the MIME pattern once via the rule.
+     */
+    validationRules?: FileValidationRule[];
+    /** Icon — forwarded to the underlying Button. */
+    icon?: IconProp;
+    /** Icon position. @default 'leading' */
+    iconPosition?: 'leading' | 'trailing';
+    children?: Snippet;
+    /** Required when no `children` (icon-only mode). */
+    'aria-label'?: string;
+    on?: {
+        /**
+         * Fires after the user picks files. Every result is delivered — consumer reads
+         * `isValid` / `errors` to decide what to do (toast / proceed / mix valid + invalid).
+         */
+        select?: (results: FileValidationResult[]) => void;
+    };
+};
+/**
+ * Programmatic file-picker button — clicking opens a native file dialog, applies
+ * `validationRules` (if any), and emits `on.select(results: FileValidationResult[])`.
+ * A thin wrapper around `Button` and the `openFile()` helper from `core/files`. Same selector
+ * semantics as `FileUploader`, just exposed as a button instead of a drop zone.
+ *
+ * Error UX is consumer-owned — read `result.isValid` / `result.errors` and surface them via
+ * `Toastr`, a `Banner`, or anything else. The component does not render error UI.
+ */
+declare const Cmp: import("svelte").Component<Props, {}, "">;
+type Cmp = ReturnType<typeof Cmp>;
+export default Cmp;

package/dist/ui/open-file-button/index.d.ts

@@ -0,0 +1 @@
+export { default as OpenFileButton } from './cmp.open-file-button.svelte';

package/dist/ui/open-file-button/index.js

@@ -0,0 +1 @@
+export { default as OpenFileButton } from './cmp.open-file-button.svelte';

package/dist/ui/option-pill/cmp.option-pill.svelte

@@ -0,0 +1,140 @@
+<script lang="ts" generics="T">const { options, disabled = false, compare = (a, b) => a === b, ...mode } = $props();
+const isSelected = (option) => {
+    if (mode.type === 'multi') {
+        return mode.value.some((v) => compare(v, option.value));
+    }
+    return mode.value !== null && compare(mode.value, option.value);
+};
+const toggle = (option) => {
+    if (disabled || option.disabled) {
+        return;
+    }
+    if (mode.type === 'multi') {
+        const next = mode.value.some((v) => compare(v, option.value)) ? mode.value.filter((v) => !compare(v, option.value)) : [...mode.value, option.value];
+        mode.on?.change?.(next);
+    }
+    else {
+        const next = mode.value !== null && compare(mode.value, option.value) ? null : option.value;
+        mode.on?.change?.(next);
+    }
+};
+export {};
+</script>
+
+<div class="option-pill" class:option-pill--disabled={disabled} role={mode.type === 'multi' ? 'group' : 'radiogroup'}>
+  {#each options as option (option.value)}
+    {@const selected = isSelected(option)}
+    <button
+      type="button"
+      class="option-pill__pill"
+      class:option-pill__pill--selected={selected}
+      role={mode.type === 'multi' ? 'checkbox' : 'radio'}
+      aria-checked={selected}
+      disabled={disabled || option.disabled}
+      onclick={() => toggle(option)}>
+      <span class="option-pill__thumb">
+        {#if option.thumb}{@render option.thumb()}{/if}
+      </span>
+      <span class="option-pill__label">{option.label}</span>
+    </button>
+  {/each}
+</div>
+
+<!--
+@component
+OptionPill — pill-shaped selection group with a thumbnail (icon, image, color swatch, avatar) on the
+left and a label on the right. Discriminated by `type`: pass `type="single"` with `value: T | null`,
+or `type="multi"` with `value: T[]`. Provide `compare` for non-primitive values.
+
+### CSS Custom Properties
+| Property | Description | Default |
+|---|---|---|
+| `--sc-kit--option-pill--gap` | Gap between pills | `var(--sc-kit--space--2)` |
+| `--sc-kit--option-pill--height` | Pill height | `32px` |
+| `--sc-kit--option-pill--background` | Pill background (unselected) | `var(--sc-kit--color--bg--field)` |
+| `--sc-kit--option-pill--background--hover` | Pill background on hover | `var(--sc-kit--color--bg--hover)` |
+| `--sc-kit--option-pill--border-color` | Pill border (unselected) | `var(--sc-kit--color--border--field)` |
+| `--sc-kit--option-pill--border-color--hover` | Pill border on hover | `var(--sc-kit--color--border--strong)` |
+| `--sc-kit--option-pill--label--color` | Label color (unselected) | `var(--sc-kit--color--text--secondary)` |
+| `--sc-kit--option-pill--selected--background` | Selected pill background | `var(--sc-kit--color--accent--soft)` |
+| `--sc-kit--option-pill--selected--border-color` | Selected pill border | `var(--sc-kit--color--accent)` |
+| `--sc-kit--option-pill--selected--color` | Selected label + thumb color | `var(--sc-kit--color--accent)` |
+| `--sc-kit--option-pill--thumb--size` | Thumbnail width (height fills the pill) | `28px` |
+| `--sc-kit--option-pill--thumb--background` | Thumbnail background | `var(--sc-kit--color--bg--active)` |
+| `--sc-kit--option-pill--thumb--color` | Thumbnail color | `var(--sc-kit--color--text--muted)` |
+-->
+<style>.option-pill {
+  --_op--gap: var(--sc-kit--option-pill--gap, var(--sc-kit--space--2));
+  --_op--height: var(--sc-kit--option-pill--height, 2rem);
+  --_op--background: var(--sc-kit--option-pill--background, var(--sc-kit--color--bg--field));
+  --_op--background-hover: var(--sc-kit--option-pill--background--hover, var(--sc-kit--color--bg--hover));
+  --_op--border-color: var(--sc-kit--option-pill--border-color, var(--sc-kit--color--border--field));
+  --_op--border-color-hover: var(--sc-kit--option-pill--border-color--hover, var(--sc-kit--color--border--strong));
+  --_op--label-color: var(--sc-kit--option-pill--label--color, var(--sc-kit--color--text--secondary));
+  --_op--selected-background: var(--sc-kit--option-pill--selected--background, var(--sc-kit--color--accent--soft));
+  --_op--selected-border-color: var(--sc-kit--option-pill--selected--border-color, var(--sc-kit--color--accent));
+  --_op--selected-color: var(--sc-kit--option-pill--selected--color, var(--sc-kit--color--accent));
+  --_op--thumb-size: var(--sc-kit--option-pill--thumb--size, 1.75rem);
+  --_op--thumb-background: var(--sc-kit--option-pill--thumb--background, var(--sc-kit--color--bg--active));
+  --_op--thumb-color: var(--sc-kit--option-pill--thumb--color, var(--sc-kit--color--text--muted));
+  display: inline-flex;
+  flex-wrap: wrap;
+  gap: var(--_op--gap);
+}
+.option-pill--disabled {
+  opacity: 0.6;
+  pointer-events: none;
+}
+.option-pill__pill {
+  display: inline-flex;
+  align-items: center;
+  height: var(--_op--height);
+  padding: 0 var(--sc-kit--space--3) 0 0;
+  background: var(--_op--background);
+  border: 1px solid var(--_op--border-color);
+  border-radius: var(--sc-kit--radius--pill);
+  font-family: inherit;
+  line-height: var(--sc-kit--leading--tight);
+  white-space: nowrap;
+  overflow: hidden;
+  cursor: pointer;
+  transition: color var(--sc-kit--duration--fast) var(--sc-kit--ease--default), background-color var(--sc-kit--duration--fast) var(--sc-kit--ease--default), border-color var(--sc-kit--duration--fast) var(--sc-kit--ease--default);
+}
+.option-pill__pill:hover:not(:disabled):not(.option-pill__pill--selected) {
+  background: var(--_op--background-hover);
+  border-color: var(--_op--border-color-hover);
+}
+.option-pill__pill:disabled {
+  cursor: default;
+  --_op--label-color: var(--sc-kit--color--text--muted);
+}
+.option-pill__pill:focus-visible {
+  outline: 2px solid var(--sc-kit--color--border--focus);
+  outline-offset: 2px;
+}
+.option-pill__pill--selected {
+  background: var(--_op--selected-background);
+  border-color: var(--_op--selected-border-color);
+  --_op--label-color: var(--_op--selected-color);
+  --_op--thumb-background: var(--sc-kit--color--bg--panel);
+  --_op--thumb-color: var(--_op--selected-color);
+}
+.option-pill__thumb {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  align-self: stretch;
+  flex-shrink: 0;
+  width: var(--_op--thumb-size);
+  border-radius: var(--sc-kit--radius--md);
+  background: var(--_op--thumb-background);
+  color: var(--_op--thumb-color);
+  overflow: hidden;
+  transition: color var(--sc-kit--duration--fast) var(--sc-kit--ease--default), background-color var(--sc-kit--duration--fast) var(--sc-kit--ease--default);
+}
+.option-pill__label {
+  padding-left: 0.625rem;
+  font-size: var(--sc-kit--option-pill--label--font-size, var(--sc-kit--font-size--md));
+  font-weight: var(--sc-kit--font-weight--medium);
+  color: var(--_op--label-color);
+}</style>