@thomasfosterau/components 0.0.0-stage → 0.1.0

package/dist/fields/Textarea.svelte

@@ -0,0 +1,22 @@
+<!-- @component
+A daisyUI `textarea` with a bindable `value` and `FieldControl` wiring. `rows` defaults to `4`.
+-->
+<!--
+  Textarea — daisyUI `textarea` with a bindable `value` and the same
+  `FieldControl` wiring as `TextInput`.
+
+  ARIA contract: a native `<textarea>`; the component adds `aria-describedby`
+  and `aria-invalid` and nothing else.
+-->
+<script lang="ts">import { textareaSize } from "./field-types.js";
+let { value = $bindable(""), size = "md", invalid = false, describedBy = "", rows = 4, class: className, ...rest } = $props();
+</script>
+
+<textarea
+  {...rest}
+  {rows}
+  bind:value
+  aria-invalid={invalid ? 'true' : undefined}
+  aria-describedby={describedBy === '' ? undefined : describedBy}
+  class={['textarea w-full', textareaSize[size], invalid && 'textarea-error', className]}
+></textarea>

package/dist/fields/Textarea.svelte.d.ts

@@ -0,0 +1,25 @@
+import type { HTMLTextareaAttributes } from 'svelte/elements';
+import { type FieldSize } from './field-types.ts';
+interface Props extends Omit<HTMLTextareaAttributes, 'value'> {
+    /**
+     * The text. Bindable.
+     * @defaultValue `''`
+     */
+    value?: string | undefined;
+    /**
+     * daisyUI size step.
+     * @defaultValue `'md'`
+     */
+    size?: FieldSize | undefined;
+    /** `FieldControl`: the field is in error — sets `aria-invalid` and the error style. */
+    invalid?: boolean | undefined;
+    /**
+     * `FieldControl`: space-separated ids for `aria-describedby`.
+     * @defaultValue `''`
+     */
+    describedBy?: string | undefined;
+}
+/** A daisyUI `textarea` with a bindable `value` and `FieldControl` wiring. `rows` defaults to `4`. */
+declare const Textarea: import("svelte").Component<Props, {}, "value">;
+type Textarea = ReturnType<typeof Textarea>;
+export default Textarea;

package/dist/fields/Toggle.svelte

@@ -0,0 +1,72 @@
+<!-- @component
+A switch for an on/off setting that takes effect immediately, rather than a checkbox submitted with a form.
+-->
+<!--
+  Toggle — a switch: an on/off setting that takes effect immediately, rather
+  than a checkbox whose value is submitted with a form.
+
+  ARIA contract: a native `<input type="checkbox">` carrying `role="switch"`,
+  so the platform supplies the keyboard (Space) and the checked state while
+  the role tells assistive technology to announce "on"/"off" rather than
+  "ticked". The visible `label` is inside the `<label>` and so IS the
+  accessible name; `description` is deliberately outside it and reached
+  through `aria-describedby`, because a paragraph of explanation inside the
+  label would be read as part of the name every time focus lands.
+
+  Why the control is NOT `bind:checked`: the browser flips a checkbox the
+  instant it is clicked, but `onChange` may refuse the change — the
+  registration failed, the reader denied a permission, the server said no.
+  So the switch reports an INTENTION, and whatever `onChange` resolves to is
+  written back onto the control. Without that write-back a refused change
+  leaves the switch showing a state that is not true until the next reload.
+  A thrown `onChange` is treated as a refusal for the same reason, and left
+  for the caller to report — a switch is not the place to render an error.
+-->
+<script lang="ts">import { toggleSize } from "./field-types.js";
+let { checked = $bindable(false), label, description, onChange, size = "md", invalid = false, describedBy = "", disabled = false, class: className, ...rest } = $props();
+const uid = $props.id();
+const descriptionId = `${uid}-description`;
+let pending = $state(false);
+const described = $derived([description === undefined ? "" : descriptionId, describedBy].filter((part) => part !== "").join(" "));
+const settle = async (control) => {
+	const next = control.checked;
+	if (onChange === undefined) {
+		checked = next;
+		return;
+	}
+	if (pending) {
+		control.checked = checked;
+		return;
+	}
+	pending = true;
+	try {
+		checked = await onChange(next);
+	} catch {} finally {
+		pending = false;
+		control.checked = checked;
+	}
+};
+</script>
+
+<div class={['flex flex-col gap-1', className]}>
+  <label class="label cursor-pointer justify-start gap-3">
+    <input
+      {...rest}
+      type="checkbox"
+      role="switch"
+      {checked}
+      disabled={disabled || pending}
+      aria-busy={pending ? 'true' : undefined}
+      aria-invalid={invalid ? 'true' : undefined}
+      aria-describedby={described === '' ? undefined : described}
+      onchange={(event) => {
+        void settle(event.currentTarget);
+      }}
+      class={['toggle', toggleSize[size], invalid && 'toggle-error']}
+    />
+    <span>{label}</span>
+  </label>
+  {#if description !== undefined}
+    <p id={descriptionId} class="fieldset-label">{description}</p>
+  {/if}
+</div>

package/dist/fields/Toggle.svelte.d.ts

@@ -0,0 +1,32 @@
+import type { HTMLInputAttributes } from 'svelte/elements';
+import { type FieldSize } from './field-types.ts';
+interface Props extends Omit<HTMLInputAttributes, 'type' | 'checked' | 'size' | 'onchange'> {
+    /** Whether the switch is on. Bindable. */
+    checked?: boolean | undefined;
+    /** Text beside the switch; becomes its accessible name. */
+    label: string;
+    /** Explanation under the switch, reached through `aria-describedby`. */
+    description?: string | undefined;
+    /**
+     * Apply the change. Whatever it resolves to is what the switch ends up
+     * showing, so returning `false` from a request for `true` rejects it.
+     * Omitted, the switch is uncontrolled and simply follows the click.
+     */
+    onChange?: ((next: boolean) => Promise<boolean> | boolean) | undefined;
+    /**
+     * daisyUI size step.
+     * @defaultValue `'md'`
+     */
+    size?: FieldSize | undefined;
+    /** `FieldControl`: the field is in error — sets `aria-invalid` and the error style. */
+    invalid?: boolean | undefined;
+    /**
+     * `FieldControl`: space-separated ids for `aria-describedby`.
+     * @defaultValue `''`
+     */
+    describedBy?: string | undefined;
+}
+/** A switch for an on/off setting that takes effect immediately, rather than a checkbox submitted with a form. */
+declare const Toggle: import("svelte").Component<Props, {}, "checked">;
+type Toggle = ReturnType<typeof Toggle>;
+export default Toggle;

package/dist/fields/VideoInput.svelte

@@ -0,0 +1,35 @@
+<!-- @component
+A `FileInput` plus the progress readout for an upload the caller performs.
+-->
+<!--
+  VideoInput — a `FileInput` plus the progress readout for an upload the
+  CALLER performs.
+
+  The division is deliberate and is the same one `FileInput` states: this owns
+  the SELECTION and the PROGRESS UI, the caller owns the transfer. It receives
+  the chosen file through `onSelect`, drives the upload however it likes —
+  resumable, direct-to-storage, whatever the provider needs — and reports back
+  by writing `progress`. A tus or S3 client is a real dependency and belongs
+  in the app, not in a package every page imports.
+
+  ARIA contract: `FileInput`'s, plus a native `<progress>` named by
+  `progressLabel`. The bar appears only while a transfer is actually in
+  flight (0 < progress < 100), so a reader is not handed a permanently
+  stalled-looking control.
+-->
+<script lang="ts">import FileInput from "./FileInput.svelte";
+let { file = $bindable(), progress = $bindable(0), progressLabel = "Upload progress", accept = "video/*", onSelect, class: className, ...rest } = $props();
+const uploading = $derived(file !== undefined && progress > 0 && progress < 100);
+const select = (chosen) => {
+	progress = 0;
+	onSelect?.(chosen);
+};
+</script>
+
+<div class={['flex flex-col gap-2', className]}>
+  <FileInput {...rest} {accept} bind:file onSelect={select} />
+  {#if uploading}
+    <progress class="progress progress-primary w-full" value={progress} max="100" aria-label={progressLabel}
+    ></progress>
+  {/if}
+</div>

package/dist/fields/VideoInput.svelte.d.ts

@@ -0,0 +1,40 @@
+import type { HTMLInputAttributes } from 'svelte/elements';
+import type { FieldSize } from './field-types.ts';
+interface Props extends Omit<HTMLInputAttributes, 'type' | 'value' | 'files' | 'size'> {
+    /** The chosen file. */
+    file?: File | undefined;
+    /**
+     * Transfer progress, 0–100. The caller writes this as its upload advances.
+     * @defaultValue `0`
+     */
+    progress?: number | undefined;
+    /**
+     * Accessible name of the progress bar.
+     * @defaultValue `'Upload progress'`
+     */
+    progressLabel?: string | undefined;
+    /**
+     * The `accept` filter passed to the file input.
+     * @defaultValue `'video/*'`
+     */
+    accept?: string | undefined;
+    /** Largest accepted file, in bytes; a larger file is rejected with `tooLargeMessage`. */
+    maxBytes?: number | undefined;
+    /**
+     * Shown when the chosen file exceeds `maxBytes`.
+     * @defaultValue `'That file is too large.'` (from `FileInput`)
+     */
+    tooLargeMessage?: string | undefined;
+    /** Called with the accepted file — the caller starts the transfer here. */
+    onSelect?: ((file: File | undefined) => void) | undefined;
+    /** daisyUI size step. */
+    size?: FieldSize | undefined;
+    /** `FieldControl`: the field is in error — sets `aria-invalid` and the error style. */
+    invalid?: boolean | undefined;
+    /** `FieldControl`: space-separated ids for `aria-describedby`. */
+    describedBy?: string | undefined;
+}
+/** A `FileInput` plus the progress readout for an upload the caller performs. */
+declare const VideoInput: import("svelte").Component<Props, {}, "progress" | "file">;
+type VideoInput = ReturnType<typeof VideoInput>;
+export default VideoInput;

package/dist/fields/field-types.d.ts

@@ -0,0 +1,51 @@
+/**
+ * The control props `<FormField>` hands its `children` snippet, and every
+ * field primitive accepts by spread: `<TextInput {...control} bind:value />`.
+ * Carrying the ids this way is what keeps `aria-describedby` and
+ * `aria-invalid` on the control in step with the hint and error paragraphs
+ * `FormField` renders, without either side knowing the other's markup.
+ *
+ * The daisyUI size tables live here for the same reason `ui/tones.ts` holds
+ * the button ones: Tailwind only generates classes it can see verbatim, so a
+ * `input-${size}` template string emits nothing at build time. Every field
+ * component looks a complete class name up rather than building one.
+ *
+ * @module
+ */
+/** Wiring a field primitive receives from its enclosing `FormField`. */
+export interface FieldControl {
+    /** The control's `id`; the `FormField` label points at it. */
+    readonly id: string;
+    /** Space-separated ids of the hint / error paragraphs; empty when neither is shown. */
+    readonly describedBy: string;
+    /** The field currently shows an error. */
+    readonly invalid: boolean;
+    readonly required: boolean;
+}
+/** Size steps shared by the field primitives (daisyUI has no `xl` field). */
+export type FieldSize = 'xs' | 'sm' | 'md' | 'lg';
+/** One entry of a `Select`, `RadioGroup` or `CheckboxGroup`. */
+export interface FieldOption {
+    readonly value: string;
+    readonly label: string;
+    readonly disabled?: boolean | undefined;
+}
+/**
+ * What an options prop accepts: full options, or bare strings for the common
+ * case where the value and the label are the same word.
+ */
+export type FieldOptionInput = FieldOption | string;
+/** Widen the bare-string shorthand into full {@link FieldOption}s. */
+export declare function toFieldOptions(options: readonly FieldOptionInput[]): readonly FieldOption[];
+/** Literal daisyUI class per `FieldSize` for `TextInput`; a lookup table so Tailwind's scanner sees every class. */
+export declare const inputSize: Record<FieldSize, string>;
+/** Literal daisyUI class per `FieldSize` for `Textarea`; a lookup table so Tailwind's scanner sees every class. */
+export declare const textareaSize: Record<FieldSize, string>;
+/** Literal daisyUI class per `FieldSize` for `Select`; a lookup table so Tailwind's scanner sees every class. */
+export declare const selectSize: Record<FieldSize, string>;
+/** Literal daisyUI class per `FieldSize` for `Checkbox`; a lookup table so Tailwind's scanner sees every class. */
+export declare const checkboxSize: Record<FieldSize, string>;
+/** Literal daisyUI class per `FieldSize` for `Toggle`; a lookup table so Tailwind's scanner sees every class. */
+export declare const toggleSize: Record<FieldSize, string>;
+/** Literal daisyUI class per `FieldSize` for `FileInput`; a lookup table so Tailwind's scanner sees every class. */
+export declare const fileInputSize: Record<FieldSize, string>;

package/dist/fields/field-types.js

@@ -0,0 +1,60 @@
+/**
+ * The control props `<FormField>` hands its `children` snippet, and every
+ * field primitive accepts by spread: `<TextInput {...control} bind:value />`.
+ * Carrying the ids this way is what keeps `aria-describedby` and
+ * `aria-invalid` on the control in step with the hint and error paragraphs
+ * `FormField` renders, without either side knowing the other's markup.
+ *
+ * The daisyUI size tables live here for the same reason `ui/tones.ts` holds
+ * the button ones: Tailwind only generates classes it can see verbatim, so a
+ * `input-${size}` template string emits nothing at build time. Every field
+ * component looks a complete class name up rather than building one.
+ *
+ * @module
+ */
+/** Widen the bare-string shorthand into full {@link FieldOption}s. */
+export function toFieldOptions(options) {
+    return options.map((option) => typeof option === 'string' ? { value: option, label: option } : option);
+}
+/** Literal daisyUI class per `FieldSize` for `TextInput`; a lookup table so Tailwind's scanner sees every class. */
+export const inputSize = {
+    xs: 'input-xs',
+    sm: 'input-sm',
+    md: 'input-md',
+    lg: 'input-lg',
+};
+/** Literal daisyUI class per `FieldSize` for `Textarea`; a lookup table so Tailwind's scanner sees every class. */
+export const textareaSize = {
+    xs: 'textarea-xs',
+    sm: 'textarea-sm',
+    md: 'textarea-md',
+    lg: 'textarea-lg',
+};
+/** Literal daisyUI class per `FieldSize` for `Select`; a lookup table so Tailwind's scanner sees every class. */
+export const selectSize = {
+    xs: 'select-xs',
+    sm: 'select-sm',
+    md: 'select-md',
+    lg: 'select-lg',
+};
+/** Literal daisyUI class per `FieldSize` for `Checkbox`; a lookup table so Tailwind's scanner sees every class. */
+export const checkboxSize = {
+    xs: 'checkbox-xs',
+    sm: 'checkbox-sm',
+    md: 'checkbox-md',
+    lg: 'checkbox-lg',
+};
+/** Literal daisyUI class per `FieldSize` for `Toggle`; a lookup table so Tailwind's scanner sees every class. */
+export const toggleSize = {
+    xs: 'toggle-xs',
+    sm: 'toggle-sm',
+    md: 'toggle-md',
+    lg: 'toggle-lg',
+};
+/** Literal daisyUI class per `FieldSize` for `FileInput`; a lookup table so Tailwind's scanner sees every class. */
+export const fileInputSize = {
+    xs: 'file-input-xs',
+    sm: 'file-input-sm',
+    md: 'file-input-md',
+    lg: 'file-input-lg',
+};

package/dist/fields/index.d.ts

@@ -0,0 +1,34 @@
+/**
+ * fields — form controls wired through `FormField`'s `FieldControl` contract.
+ *
+ * The shape every control in here shares: `FormField` (or `Fieldset`) owns
+ * the label, the hint and the errors, derives one `id` into a `describedBy`
+ * and an `invalid` flag, and hands that `FieldControl` to its `children`
+ * snippet. A control spreads it — `<TextInput {...control} bind:value />` —
+ * and so carries `aria-describedby`, `aria-invalid` and `required` without
+ * either side knowing the other's markup.
+ *
+ * Optional props are declared `T | undefined` rather than `prop?: T`: the
+ * workspace compiles with `exactOptionalPropertyTypes`, under which a caller
+ * forwarding its own optional prop would not compile otherwise.
+ *
+ * @module
+ */
+export { default as Checkbox } from './Checkbox.svelte';
+export { default as CheckboxGroup } from './CheckboxGroup.svelte';
+export { default as Combobox } from './Combobox.svelte';
+export { default as DateInput } from './DateInput.svelte';
+export { default as FieldErrors } from './FieldErrors.svelte';
+export { default as Fieldset } from './Fieldset.svelte';
+export { default as FileInput } from './FileInput.svelte';
+export { default as FormField } from './FormField.svelte';
+export { default as ImageInput } from './ImageInput.svelte';
+export { default as RadioGroup } from './RadioGroup.svelte';
+export { default as SearchInput } from './SearchInput.svelte';
+export { default as Select } from './Select.svelte';
+export { default as Textarea } from './Textarea.svelte';
+export { default as TextInput } from './TextInput.svelte';
+export { default as Toggle } from './Toggle.svelte';
+export { default as PushToggle, type PushDeclineReason, type PushEnableResult, } from './PushToggle.svelte';
+export { default as VideoInput } from './VideoInput.svelte';
+export * from './field-types.ts';

package/dist/fields/index.js

@@ -0,0 +1,34 @@
+/**
+ * fields — form controls wired through `FormField`'s `FieldControl` contract.
+ *
+ * The shape every control in here shares: `FormField` (or `Fieldset`) owns
+ * the label, the hint and the errors, derives one `id` into a `describedBy`
+ * and an `invalid` flag, and hands that `FieldControl` to its `children`
+ * snippet. A control spreads it — `<TextInput {...control} bind:value />` —
+ * and so carries `aria-describedby`, `aria-invalid` and `required` without
+ * either side knowing the other's markup.
+ *
+ * Optional props are declared `T | undefined` rather than `prop?: T`: the
+ * workspace compiles with `exactOptionalPropertyTypes`, under which a caller
+ * forwarding its own optional prop would not compile otherwise.
+ *
+ * @module
+ */
+export { default as Checkbox } from './Checkbox.svelte';
+export { default as CheckboxGroup } from './CheckboxGroup.svelte';
+export { default as Combobox } from './Combobox.svelte';
+export { default as DateInput } from './DateInput.svelte';
+export { default as FieldErrors } from './FieldErrors.svelte';
+export { default as Fieldset } from './Fieldset.svelte';
+export { default as FileInput } from './FileInput.svelte';
+export { default as FormField } from './FormField.svelte';
+export { default as ImageInput } from './ImageInput.svelte';
+export { default as RadioGroup } from './RadioGroup.svelte';
+export { default as SearchInput } from './SearchInput.svelte';
+export { default as Select } from './Select.svelte';
+export { default as Textarea } from './Textarea.svelte';
+export { default as TextInput } from './TextInput.svelte';
+export { default as Toggle } from './Toggle.svelte';
+export { default as PushToggle, } from './PushToggle.svelte';
+export { default as VideoInput } from './VideoInput.svelte';
+export * from "./field-types.js";

package/dist/formatting/DateTime.svelte

@@ -0,0 +1,35 @@
+<!-- @component
+A `<time>` element with the ISO instant in `datetime` and the `Intl.DateTimeFormat` rendering as its text.
+-->
+<!--
+  DateTime — a `<time>` element carrying the ISO instant in `datetime` and
+  `Intl.DateTimeFormat`'s locale rendering as its text.
+
+  ARIA contract: none beyond the native `<time>` semantics — the `datetime`
+  attribute is what makes the value machine-readable; a screen reader still
+  announces the formatted text content (or the `children` snippet, when
+  given), never the ISO string.
+
+  `options` (raw `Intl.DateTimeFormatOptions`) wins over `dateStyle`/
+  `timeStyle` when both are supplied, so a caller that needs a field-level
+  combination (`{ year: 'numeric', month: 'long' }`) isn't stuck with the
+  coarse style presets.
+-->
+<script lang="ts">import { getComponentsContext } from "../context.svelte.js";
+let { value, locales = getComponentsContext().locale(), dateStyle = "medium", timeStyle, options, children, ...rest } = $props();
+const instant = $derived(new Date(value));
+// The formatter and the formatted string are separate `$derived` values so
+// constructing the (relatively expensive) `Intl.DateTimeFormat` is skipped
+// when only `value` changes, not when locale/options change. See
+// PERF-CPU-003 in docs/specs/performance-invariants.md.
+const format = $derived(new Intl.DateTimeFormat(locales, options ?? {
+	dateStyle,
+	timeStyle
+}));
+const formatted = $derived(format.format(instant));
+const iso = $derived(instant.toISOString());
+</script>
+
+<time {...rest} datetime={iso}>
+  {#if children}{@render children()}{:else}{formatted}{/if}
+</time>

package/dist/formatting/DateTime.svelte.d.ts

@@ -0,0 +1,26 @@
+import type { Snippet } from 'svelte';
+import type { HTMLTimeAttributes } from 'svelte/elements';
+interface Props extends Omit<HTMLTimeAttributes, 'children'> {
+    /** The instant: a `Date`, epoch milliseconds or an ISO string. */
+    value: Date | number | string;
+    /**
+     * Locale(s) for `Intl` formatting.
+     * @defaultValue the components context's `locale()`
+     */
+    locales?: string | readonly string[] | undefined;
+    /**
+     * `Intl.DateTimeFormat` `dateStyle`.
+     * @defaultValue `'medium'`
+     */
+    dateStyle?: Intl.DateTimeFormatOptions['dateStyle'] | undefined;
+    /** `Intl.DateTimeFormat` `timeStyle`; omitted, no time is shown. */
+    timeStyle?: Intl.DateTimeFormatOptions['timeStyle'] | undefined;
+    /** Raw `Intl.DateTimeFormatOptions`; wins over `dateStyle`/`timeStyle` when given. */
+    options?: Intl.DateTimeFormatOptions | undefined;
+    /** Replaces the formatted text; the `datetime` attribute stays machine-readable. */
+    children?: Snippet<[]> | undefined;
+}
+/** A `<time>` element with the ISO instant in `datetime` and the `Intl.DateTimeFormat` rendering as its text. */
+declare const DateTime: import("svelte").Component<Props, {}, "">;
+type DateTime = ReturnType<typeof DateTime>;
+export default DateTime;

package/dist/formatting/FormatList.svelte

@@ -0,0 +1,31 @@
+<!-- @component
+Renders `items` through `Intl.ListFormat`, with each item drawn by the `children` snippet and the joining words from the locale.
+-->
+<!--
+  FormatList<T> — renders `items` through `Intl.ListFormat`, letting the
+  `children` snippet render each element while literal text ("and", ", ")
+  comes from the locale's own conjunction/disjunction rules.
+
+  No wrapping element of its own — it emits `children(item)` and text nodes
+  in sequence, so the caller controls the surrounding markup entirely.
+-->
+<script lang="ts" generics="T">import { getComponentsContext } from "../context.svelte.js";
+let { items, style = "long", type = "conjunction", locales = getComponentsContext().locale(), children } = $props();
+const format = $derived(new Intl.ListFormat(locales, {
+	style,
+	type
+}));
+// `Intl.ListFormat` only formats strings, so format the items' *indices*
+// and map each "element" part back to the real item by index — that way
+// the snippet gets the original `T`, not its stringified form.
+const indices = $derived(items.map((_, index) => index.toString()));
+const parts = $derived(format.formatToParts(indices));
+</script>
+
+{#each parts as part, i (i)}
+  {#if part.type === 'element'}
+    {@render children(items[Number.parseInt(part.value, 10)] as T)}
+  {:else}
+    {part.value}
+  {/if}
+{/each}

package/dist/formatting/FormatList.svelte.d.ts

@@ -0,0 +1,46 @@
+import type { Snippet } from 'svelte';
+declare function $$render<T>(): {
+    props: {
+        /** The items to join, each rendered by `children`. */
+        items: readonly T[];
+        /**
+         * `Intl.ListFormat` style.
+         * @defaultValue `'long'`
+         */
+        style?: Intl.ListFormatOptions["style"] | undefined;
+        /**
+         * `Intl.ListFormat` type.
+         * @defaultValue `'conjunction'`
+         */
+        type?: Intl.ListFormatOptions["type"] | undefined;
+        /**
+         * Locale(s) for `Intl` formatting.
+         * @defaultValue the components context's `locale()`
+         */
+        locales?: string | readonly string[] | undefined;
+        /** Renders one item. */
+        children: Snippet<[T]>;
+    };
+    exports: {};
+    bindings: "";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<T> {
+    props(): ReturnType<typeof $$render<T>>['props'];
+    events(): ReturnType<typeof $$render<T>>['events'];
+    slots(): ReturnType<typeof $$render<T>>['slots'];
+    bindings(): "";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <T>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T>['props']>, ReturnType<__sveltets_Render<T>['events']>, ReturnType<__sveltets_Render<T>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<T>['bindings']>;
+    } & ReturnType<__sveltets_Render<T>['exports']>;
+    <T>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {}): ReturnType<__sveltets_Render<T>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+/** Renders `items` through `Intl.ListFormat`, with each item drawn by the `children` snippet and the joining words from the locale. */
+declare const FormatList: $$IsomorphicComponent;
+type FormatList<T> = InstanceType<typeof FormatList<T>>;
+export default FormatList;

package/dist/formatting/Highlight.svelte

@@ -0,0 +1,47 @@
+<!-- @component
+Best-effort client-side highlighting of query tokens in a search result.
+-->
+<!--
+  Highlight — best-effort client-side token highlight for search results.
+
+  Splits `query` on whitespace, escapes regex metacharacters, and wraps
+  case-insensitive matches in `<mark>`. Intentionally naive: no stemming, no
+  FTS-aware tokenisation, no diacritic folding — the authoritative match is
+  whatever server-side search produced; this is a UX nicety, and its highlights should not be read as
+  "this is exactly what full-text search matched".
+-->
+<script lang="ts" module>function escapeRegex(value) {
+	return value.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+}
+export function tokenise(text, query) {
+	const tokens = query.trim().split(/\s+/).filter((token) => token.length > 0).map(escapeRegex);
+	if (tokens.length === 0 || text.length === 0) {
+		return [{
+			text,
+			match: false
+		}];
+	}
+	// `String.prototype.split` with a single capturing group interleaves the
+	// captured matches into the result at odd indices: [before, match,
+	// between, match, …]. Read `match` from that index parity rather than
+	// re-testing each segment — testing each part against a *global* regex
+	// would leave `lastIndex` advanced on non-matching segments, which can
+	// misclassify later segments and drop highlights. Map first (parity is
+	// meaningful on the raw split array), then filter empties.
+	const pattern = new RegExp(`(${tokens.join("|")})`, "gi");
+	return text.split(pattern).map((part, index) => ({
+		text: part,
+		match: index % 2 === 1
+	})).filter((segment) => segment.text.length > 0);
+}
+</script>
+
+<script lang="ts">const { text, query } = $props();
+const segments = $derived(tokenise(text, query));
+</script>
+
+{#each segments as segment, i (i)}
+  {#if segment.match}
+    <mark class="bg-warning/30 text-base-content rounded-sm px-0.5">{segment.text}</mark>
+  {:else}{segment.text}{/if}
+{/each}

package/dist/formatting/Highlight.svelte.d.ts

@@ -0,0 +1,15 @@
+interface Segment {
+    text: string;
+    match: boolean;
+}
+export declare function tokenise(text: string, query: string): Segment[];
+interface Props {
+    /** The full text to render. */
+    text: string;
+    /** The user's search query. Tokens are highlighted within `text`. */
+    query: string;
+}
+/** Best-effort client-side highlighting of query tokens in a search result. */
+declare const Highlight: import("svelte").Component<Props, {}, "">;
+type Highlight = ReturnType<typeof Highlight>;
+export default Highlight;

package/dist/formatting/Number.svelte

@@ -0,0 +1,35 @@
+<!-- @component
+A `<data>` element whose text is the `Intl.NumberFormat` rendering and whose `value` attribute keeps the raw number.
+-->
+<!--
+  NumberFormat — a `<data>` element whose text is `Intl.NumberFormat`'s
+  rendering and whose `value` attribute is the raw number/bigint, so the
+  machine-readable figure survives locale formatting.
+
+  Exported as `NumberFormat` (not `Number`) to avoid shadowing the global.
+
+  ARIA contract: none beyond native `<data>` semantics — `value` carries the
+  machine-readable figure, the rendered text carries the locale-formatted one.
+-->
+<script lang="ts">import { getComponentsContext } from "../context.svelte.js";
+let { value, locales = getComponentsContext().locale(), style = "decimal", unit, unitDisplay = "short", currency, currencyDisplay = "symbol", maximumFractionDigits, minimumFractionDigits, signDisplay, notation, options, ...rest } = $props();
+// The formatter and the formatted string are separate `$derived` values so
+// constructing the (relatively expensive) `Intl.NumberFormat` is skipped
+// when only `value` changes. See PERF-CPU-003 in
+// docs/specs/performance-invariants.md.
+const format = $derived(new Intl.NumberFormat(locales, options ?? {
+	style,
+	unit,
+	unitDisplay,
+	currency,
+	currencyDisplay,
+	maximumFractionDigits,
+	minimumFractionDigits,
+	signDisplay,
+	notation
+}));
+const formatted = $derived(format.format(value));
+const raw = $derived(String(value));
+</script>
+
+<data {...rest} value={raw}>{formatted}</data>