@hearthlog/ui 0.0.0-stage → 0.1.0

package/src/components/ui/Button.svelte

@@ -0,0 +1,53 @@
+<script lang="ts">
+    import { Button as BitsButton } from "bits-ui";
+    import { cva, type VariantProps } from "class-variance-authority";
+    import type { Snippet } from "svelte";
+    import type { HTMLButtonAttributes } from "svelte/elements";
+    import { cn } from "../../utils/cn.js";
+
+    const buttonVariants = cva(
+        "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-xl text-sm font-semibold transition-[background-color,color,box-shadow,transform,filter] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--stor-focus)] duration-100 active:translate-y-px motion-reduce:transition-none motion-reduce:active:translate-y-0 disabled:pointer-events-none disabled:opacity-50 disabled:shadow-none",
+        {
+            variants: {
+                variant: {
+                    default: "bg-[var(--stor-action)] text-[var(--stor-action-text)] hover:bg-[var(--stor-action-hover)] active:brightness-95",
+                    secondary: "bg-[var(--stor-surface-raised)] shadow-[var(--stor-elevation-2)] text-[var(--stor-ink)] hover:shadow-[var(--stor-elevation-3)] active:brightness-95",
+                    ghost: "text-[var(--stor-muted-text)] hover:bg-[var(--stor-accent-soft)] hover:text-[var(--stor-accent-strong)]",
+                    destructive: "bg-[var(--stor-negative)] text-[var(--stor-negative-text)] hover:brightness-90 active:brightness-95",
+                },
+                size: {
+                    sm: "h-11 px-3 sm:h-9",
+                    md: "h-11 px-4 sm:h-9",
+                    icon: "h-11 w-11 p-0 sm:h-9 sm:w-9",
+                },
+            },
+            defaultVariants: {
+                variant: "default",
+                size: "md",
+            },
+        },
+    );
+
+    type ButtonProps = HTMLButtonAttributes &
+        VariantProps<typeof buttonVariants> & {
+            children?: Snippet;
+        };
+
+    let {
+        class: className = "",
+        variant = "default",
+        size = "md",
+        type = "button",
+        children,
+        ...restProps
+    }: ButtonProps = $props();
+</script>
+
+<BitsButton.Root
+    {type}
+    data-stor-button-variant={variant}
+    class={cn(buttonVariants({ variant, size }), className)}
+    {...restProps}
+>
+    {@render children?.()}
+</BitsButton.Root>

package/src/components/ui/Checkbox.svelte

@@ -0,0 +1,29 @@
+<script lang="ts">
+    import { Checkbox } from "bits-ui";
+    import type { Snippet } from "svelte";
+    import { cn } from "../../utils/cn.js";
+    import IconCheck from "~icons/mdi/check";
+
+    let {
+        checked = false,
+        onCheckedChange = () => {},
+        disabled = false,
+        class: className = "",
+        children,
+        ...restProps
+    }: Checkbox.RootProps & { children?: Snippet } = $props();
+</script>
+
+<Checkbox.Root
+    {checked}
+    {onCheckedChange}
+    {disabled}
+    class={cn(
+        "inline-flex h-5 w-5 shrink-0 items-center justify-center rounded-md border border-[var(--stor-field-border)] stor-well text-[var(--stor-action-text)] transition data-[state=checked]:border-[var(--stor-accent)] data-[state=checked]:bg-[var(--stor-action)] data-[state=checked]:shadow-[0_1px_2px_rgb(0_0_0/.18),inset_0_1px_0_rgb(255_255_255/.22)] disabled:cursor-not-allowed disabled:opacity-50 [&[data-state=checked]_.checkbox-check]:opacity-100",
+        className,
+    )}
+    {...restProps}
+>
+    <IconCheck class="checkbox-check h-3.5 w-3.5 opacity-0" />
+    {@render children?.()}
+</Checkbox.Root>

package/src/components/ui/ChoiceChips.svelte

@@ -0,0 +1,53 @@
+<script lang="ts" generics="T extends string | number">
+    import { cn } from "../../utils/cn.js";
+    import IconChevronDown from "~icons/mdi/chevron-down";
+
+    /**
+     * A short list of choices as chips; the chosen one is tinted. `more` adds a
+     * last chip (All, Other, Pick…) that the form answers, e.g. by opening the
+     * full list or a field.
+     */
+    let {
+        options,
+        value,
+        label,
+        onChange,
+        more,
+        onMore,
+        moreActive = false,
+        class: className = "",
+    }: {
+        options: readonly { value: T; label: string }[];
+        value: T | null | undefined;
+        /** Names the group for assistive tech. */
+        label: string;
+        onChange: (value: T) => void;
+        more?: string;
+        onMore?: () => void;
+        moreActive?: boolean;
+        class?: string;
+    } = $props();
+
+    const chip = (on: boolean) => `inline-flex h-9 items-center gap-1 rounded-full px-3.5 text-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--stor-focus)] ${on ? "bg-[var(--stor-accent-soft)] font-semibold text-[var(--stor-accent-strong)]" : "bg-[var(--stor-surface-muted)] font-medium text-[var(--stor-ink)]"}`;
+
+    // Arrow keys move between chips so a row is one stop for Tab, like a radio group.
+    function moveFocus(event: KeyboardEvent): void {
+        const step = event.key === "ArrowRight" || event.key === "ArrowDown" ? 1 : event.key === "ArrowLeft" || event.key === "ArrowUp" ? -1 : 0;
+        if (!step) return;
+        const chips = [...(event.currentTarget as HTMLElement).querySelectorAll<HTMLButtonElement>("button")];
+        const next = chips[chips.indexOf(document.activeElement as HTMLButtonElement) + step];
+        if (!next) return;
+        event.preventDefault();
+        next.focus();
+    }
+</script>
+
+<!-- svelte-ignore a11y_no_static_element_interactions -->
+<div class={cn("flex flex-wrap gap-2", className)} role="group" aria-label={label} onkeydown={moveFocus}>
+    {#each options as option (option.value)}
+        <button type="button" class={chip(value === option.value)} aria-pressed={value === option.value} onclick={() => onChange(option.value)}>{option.label}</button>
+    {/each}
+    {#if more && onMore}
+        <button type="button" class={chip(moreActive)} aria-expanded={moreActive} onclick={onMore}>{more}<IconChevronDown class="h-4 w-4" /></button>
+    {/if}
+</div>

package/src/components/ui/CollectionToolbar.svelte

@@ -0,0 +1,29 @@
+<script lang="ts">
+    import type { Snippet } from 'svelte';
+    import { cn } from '../../utils/cn.js';
+    import Button from './Button.svelte';
+
+    let {
+        count,
+        noun,
+        clearVisible = false,
+        onClear = () => {},
+        children,
+        class: className = '',
+    }: {
+        count: number | null;
+        noun: string;
+        clearVisible?: boolean;
+        onClear?: () => void;
+        children: Snippet;
+        class?: string;
+    } = $props();
+</script>
+
+<section class={cn('stor-panel p-[var(--stor-panel-padding)]', className)} aria-label={`${noun} filters`}>
+    <div class="flex min-w-0 flex-wrap items-center gap-2 [&>*]:max-w-full">{@render children()}</div>
+    <div class="mt-2 flex min-h-9 flex-wrap items-center justify-between gap-x-3 gap-y-1 text-xs text-[var(--stor-muted-text)]">
+        <span role="status">{count === null ? 'Loading results…' : `Showing ${count} ${noun}${count === 1 ? '' : 's'}`}</span>
+        {#if clearVisible}<Button variant="ghost" size="sm" onclick={onClear}>Clear filters</Button>{/if}
+    </div>
+</section>

package/src/components/ui/DatePicker.svelte

@@ -0,0 +1,375 @@
+<script lang="ts">
+    import {
+        DatePicker as BitsDatePicker,
+        TimeField as BitsTimeField,
+    } from "bits-ui";
+    import {
+        CalendarDateTime,
+        Time,
+        parseDate,
+        parseDateTime,
+        today,
+        getLocalTimeZone,
+        type DateValue,
+    } from "@internationalized/date";
+    import { cn } from "../../utils/cn.js";
+    import IconCalendar from "~icons/mdi/calendar-month-outline";
+    import IconChevronLeft from "~icons/mdi/chevron-left";
+    import IconChevronRight from "~icons/mdi/chevron-right";
+    import IconClose from "~icons/mdi/close";
+    import IconMinus from "~icons/mdi/minus";
+    import IconPlus from "~icons/mdi/plus";
+
+    type PickerGranularity = "day" | "minute";
+
+    let {
+        value = $bindable(""),
+        id = "",
+        name = "",
+        placeholder = "",
+        disabled = false,
+        clearable = true,
+        granularity = "day",
+        locale = "en-GB",
+        class: className = "",
+        triggerClass = "",
+        contentClass = "",
+        onValueChange = () => {},
+    }: {
+        value?: string;
+        id?: string;
+        name?: string;
+        placeholder?: string;
+        disabled?: boolean;
+        clearable?: boolean;
+        granularity?: PickerGranularity;
+        locale?: string;
+        class?: string;
+        triggerClass?: string;
+        contentClass?: string;
+        onValueChange?: (value: string) => void;
+    } = $props();
+
+    let pickerValue = $derived(parsePickerValue(value, granularity));
+    let placeholderValue = $derived(
+        pickerValue ?? createPlaceholderValue(granularity),
+    );
+    let timeValue = $derived(getTimeValue(pickerValue));
+    let hasValue = $derived(value.trim().length > 0);
+    const timePlaceholder = new Time(0, 0, 0);
+
+    function parsePickerValue(
+        rawValue: string,
+        pickerGranularity: PickerGranularity,
+    ): DateValue | undefined {
+        const normalized = rawValue.trim();
+        if (!normalized) return undefined;
+
+        try {
+            if (pickerGranularity === "minute") {
+                const dateTime = normalized.includes("T")
+                    ? normalized.slice(0, 16)
+                    : normalized.replace(" ", "T").slice(0, 16);
+                return parseDateTime(dateTime);
+            }
+
+            return parseDate(normalized.slice(0, 10));
+        } catch {
+            return undefined;
+        }
+    }
+
+    function pad(value: number) {
+        return String(value).padStart(2, "0");
+    }
+
+    function createPlaceholderValue(pickerGranularity: PickerGranularity) {
+        const currentDate = today(getLocalTimeZone());
+        if (pickerGranularity === "minute") {
+            return new CalendarDateTime(
+                currentDate.year,
+                currentDate.month,
+                currentDate.day,
+                0,
+                0,
+                0,
+            );
+        }
+        return currentDate;
+    }
+
+    function toInputValue(nextValue: DateValue | undefined) {
+        if (!nextValue) return "";
+        if (granularity === "minute" && nextValue instanceof CalendarDateTime) {
+            return `${nextValue.year}-${pad(nextValue.month)}-${pad(nextValue.day)}T${pad(nextValue.hour)}:${pad(nextValue.minute)}`;
+        }
+        return nextValue.toString().slice(0, 10);
+    }
+
+    function getTimeValue(nextValue: DateValue | undefined) {
+        if (nextValue instanceof CalendarDateTime) {
+            return new Time(nextValue.hour, nextValue.minute, nextValue.second);
+        }
+        return undefined;
+    }
+
+    function getDateTimeBase() {
+        const parsedValue = parsePickerValue(value, "minute");
+        if (parsedValue instanceof CalendarDateTime) return parsedValue;
+        return createPlaceholderValue("minute") as CalendarDateTime;
+    }
+
+    function setTime(nextTime: Time | undefined) {
+        if (!nextTime) return;
+        const base = getDateTimeBase();
+        handleValueChange(
+            new CalendarDateTime(
+                base.year,
+                base.month,
+                base.day,
+                nextTime.hour,
+                nextTime.minute,
+                nextTime.second,
+            ),
+        );
+    }
+
+    function adjustTime(minutes: number) {
+        const currentTime = timeValue ?? timePlaceholder;
+        const currentMinutes = currentTime.hour * 60 + currentTime.minute;
+        const nextMinutes = (currentMinutes + minutes + 1440) % 1440;
+        setTime(
+            new Time(
+                Math.floor(nextMinutes / 60),
+                nextMinutes % 60,
+                currentTime.second,
+            ),
+        );
+    }
+
+    function handleValueChange(nextValue: DateValue | undefined) {
+        const nextInputValue = toInputValue(nextValue);
+        value = nextInputValue;
+        onValueChange(nextInputValue);
+    }
+
+    function clearValue() {
+        value = "";
+        onValueChange("");
+    }
+
+    function segmentClass(part: string) {
+        return cn(
+            "rounded px-0.5 tabular-nums outline-none",
+            part === "literal"
+                ? "text-[var(--stor-muted-text)]"
+                : "text-stone-950 focus:bg-stone-200",
+        );
+    }
+</script>
+
+<BitsDatePicker.Root
+    value={pickerValue}
+    placeholder={placeholderValue}
+    onValueChange={handleValueChange}
+    {disabled}
+    {granularity}
+    hourCycle={24}
+    hideTimeZone
+    closeOnDateSelect={granularity !== "minute"}
+    {locale}
+    weekStartsOn={1}
+    fixedWeeks
+    calendarLabel={placeholder || "Choose date"}
+>
+    <div
+        class={cn(
+            "flex min-w-0 w-full items-center rounded-xl border border-[var(--stor-field-border)] stor-well focus-within:bg-[var(--stor-surface)] text-base sm:text-sm text-stone-950 transition focus-within:border-[var(--stor-focus)] focus-within:ring-2 focus-within:ring-[var(--stor-selected)]",
+            disabled && "cursor-not-allowed bg-[var(--stor-surface-muted)] text-[var(--stor-muted-text)]",
+            className,
+        )}
+    >
+        <BitsDatePicker.Input
+            id={id || undefined}
+            {name}
+            data-date-value={value}
+            class={cn(
+                "flex h-11 sm:h-9 min-w-0 flex-1 items-center gap-0.5 px-3 py-2.5 sm:py-1.5 outline-none",
+                granularity === "minute"
+                    ? "flex-wrap gap-y-0.5"
+                    : "overflow-hidden whitespace-nowrap",
+            )}
+        >
+            {#snippet children({ segments })}
+                {#each segments as segment}
+                    <BitsDatePicker.Segment
+                        part={segment.part}
+                        class={segmentClass(segment.part)}
+                    >
+                        {segment.value}
+                    </BitsDatePicker.Segment>
+                {/each}
+            {/snippet}
+        </BitsDatePicker.Input>
+
+        {#if hasValue && !disabled && clearable}
+            <button
+                type="button"
+                class="mr-1 flex h-10 w-10 sm:h-8 sm:w-8 shrink-0 items-center justify-center rounded-lg text-[var(--stor-muted-text)] transition hover:bg-[var(--stor-surface-muted)] hover:text-stone-700"
+                aria-label={granularity === "minute"
+                    ? "Clear date and time"
+                    : "Clear date"}
+                onclick={clearValue}
+            >
+                <IconClose class="h-4 w-4" />
+            </button>
+        {/if}
+
+        <BitsDatePicker.Trigger
+            class={cn(
+                "mr-1 flex h-10 w-10 sm:h-8 sm:w-8 shrink-0 items-center justify-center rounded-lg text-[var(--stor-muted-text)] transition hover:bg-[var(--stor-surface-muted)] hover:text-stone-950 disabled:cursor-not-allowed disabled:opacity-50",
+                triggerClass,
+            )}
+            aria-label={granularity === "minute"
+                ? "Open date and time picker"
+                : "Open date picker"}
+        >
+            <IconCalendar class="h-4 w-4" />
+        </BitsDatePicker.Trigger>
+    </div>
+
+    <BitsDatePicker.Portal>
+        <BitsDatePicker.Content
+            sideOffset={6}
+            collisionPadding={8}
+            class={cn(
+                "stor-menu z-[var(--stor-layer-dialog)] p-3 outline-none",
+                contentClass,
+            )}
+        >
+            <BitsDatePicker.Calendar>
+                {#snippet children({ months, weekdays })}
+                    <BitsDatePicker.Header class="mb-2 flex items-center justify-between gap-2">
+                        <BitsDatePicker.PrevButton class="flex h-8 w-8 items-center justify-center rounded-lg text-[var(--stor-muted-text)] transition hover:bg-[var(--stor-surface-muted)] hover:text-stone-950 disabled:opacity-40">
+                            <IconChevronLeft class="h-4 w-4" />
+                        </BitsDatePicker.PrevButton>
+                        <BitsDatePicker.Heading class="text-sm font-semibold text-stone-900" />
+                        <BitsDatePicker.NextButton class="flex h-8 w-8 items-center justify-center rounded-lg text-[var(--stor-muted-text)] transition hover:bg-[var(--stor-surface-muted)] hover:text-stone-950 disabled:opacity-40">
+                            <IconChevronRight class="h-4 w-4" />
+                        </BitsDatePicker.NextButton>
+                    </BitsDatePicker.Header>
+
+                    {#each months as month (month.value.toString())}
+                        <BitsDatePicker.Grid class="w-full border-separate border-spacing-1">
+                            <BitsDatePicker.GridHead>
+                                <BitsDatePicker.GridRow>
+                                    {#each weekdays as day}
+                                        <BitsDatePicker.HeadCell class="h-7 w-8 text-center text-[10.5px] font-semibold uppercase text-[var(--stor-muted-text)]">
+                                            {day}
+                                        </BitsDatePicker.HeadCell>
+                                    {/each}
+                                </BitsDatePicker.GridRow>
+                            </BitsDatePicker.GridHead>
+                            <BitsDatePicker.GridBody>
+                                {#each month.weeks as week}
+                                    <BitsDatePicker.GridRow>
+                                        {#each week as date}
+                                            <BitsDatePicker.Cell
+                                                {date}
+                                                month={month.value}
+                                                class="p-0 text-center"
+                                            >
+                                                <BitsDatePicker.Day
+                                                    class="flex h-8 w-8 items-center justify-center rounded-lg text-sm font-medium text-[var(--stor-muted-text)] outline-none transition hover:bg-[var(--stor-accent-soft)] focus-visible:ring-2 focus-visible:ring-[var(--stor-focus)] data-[disabled]:pointer-events-none data-[disabled]:opacity-30 data-[outside-month]:text-[var(--stor-muted-text)] data-[selected]:bg-[var(--stor-action)] data-[selected]:text-[var(--stor-action-text)] data-[today]:ring-1 data-[today]:ring-[var(--stor-focus)] data-[unavailable]:text-[var(--stor-negative)]"
+                                                />
+                                            </BitsDatePicker.Cell>
+                                        {/each}
+                                    </BitsDatePicker.GridRow>
+                                {/each}
+                            </BitsDatePicker.GridBody>
+                        </BitsDatePicker.Grid>
+                    {/each}
+                {/snippet}
+            </BitsDatePicker.Calendar>
+
+            {#if granularity === "minute"}
+                <div class="mt-3 border-t border-[var(--stor-border)] pt-3">
+                    <div class="mb-2 flex items-center justify-between gap-3">
+                        <span class="text-xs font-semibold uppercase text-[var(--stor-muted-text)]">Time</span>
+                        <BitsDatePicker.Close class="rounded-lg px-2.5 py-1.5 text-xs font-semibold text-stone-600 transition hover:bg-[var(--stor-surface-muted)] hover:text-stone-950 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-stone-400">
+                            Done
+                        </BitsDatePicker.Close>
+                    </div>
+
+                    <div class="mb-2">
+                        <BitsTimeField.Root
+                            value={timeValue}
+                            placeholder={timePlaceholder}
+                            onValueChange={setTime}
+                            granularity="minute"
+                            hourCycle={24}
+                            hideTimeZone
+                            {locale}
+                            {disabled}
+                        >
+                            <BitsTimeField.Input
+                                aria-label="Selected time"
+                                class="flex min-h-9 items-center gap-0.5 rounded-lg border border-[var(--stor-border)] bg-[var(--stor-surface-muted)] px-3 py-2 text-sm text-stone-950 outline-none transition focus-within:border-stone-400 focus-within:bg-white focus-within:ring-2 focus-within:ring-stone-200"
+                            >
+                                {#snippet children({ segments })}
+                                    {#each segments as segment}
+                                        <BitsTimeField.Segment
+                                            part={segment.part}
+                                            class={segmentClass(segment.part)}
+                                        >
+                                            {segment.value}
+                                        </BitsTimeField.Segment>
+                                    {/each}
+                                {/snippet}
+                            </BitsTimeField.Input>
+                        </BitsTimeField.Root>
+                    </div>
+
+                    <div class="grid grid-cols-4 gap-1.5">
+                        <button
+                            type="button"
+                            class="flex h-8 items-center justify-center gap-1 rounded-2xl bg-[var(--stor-surface-raised)] px-2 text-xs font-medium text-stone-600 transition hover:bg-[var(--stor-surface-muted)] hover:text-stone-950 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-stone-400"
+                            aria-label="Decrease time by one hour"
+                            onclick={() => adjustTime(-60)}
+                        >
+                            <IconMinus class="h-3.5 w-3.5" />
+                            1h
+                        </button>
+                        <button
+                            type="button"
+                            class="flex h-8 items-center justify-center gap-1 rounded-2xl bg-[var(--stor-surface-raised)] px-2 text-xs font-medium text-stone-600 transition hover:bg-[var(--stor-surface-muted)] hover:text-stone-950 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-stone-400"
+                            aria-label="Increase time by one hour"
+                            onclick={() => adjustTime(60)}
+                        >
+                            <IconPlus class="h-3.5 w-3.5" />
+                            1h
+                        </button>
+                        <button
+                            type="button"
+                            class="flex h-8 items-center justify-center gap-1 rounded-2xl bg-[var(--stor-surface-raised)] px-2 text-xs font-medium text-stone-600 transition hover:bg-[var(--stor-surface-muted)] hover:text-stone-950 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-stone-400"
+                            aria-label="Decrease time by five minutes"
+                            onclick={() => adjustTime(-5)}
+                        >
+                            <IconMinus class="h-3.5 w-3.5" />
+                            5m
+                        </button>
+                        <button
+                            type="button"
+                            class="flex h-8 items-center justify-center gap-1 rounded-2xl bg-[var(--stor-surface-raised)] px-2 text-xs font-medium text-stone-600 transition hover:bg-[var(--stor-surface-muted)] hover:text-stone-950 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-stone-400"
+                            aria-label="Increase time by five minutes"
+                            onclick={() => adjustTime(5)}
+                        >
+                            <IconPlus class="h-3.5 w-3.5" />
+                            5m
+                        </button>
+                    </div>
+                </div>
+            {/if}
+        </BitsDatePicker.Content>
+    </BitsDatePicker.Portal>
+</BitsDatePicker.Root>

package/src/components/ui/DateTimePicker.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+    import DatePicker from "./DatePicker.svelte";
+
+    let {
+        value = $bindable(""),
+        placeholder = "Choose date and time",
+        ...restProps
+    } = $props();
+</script>
+
+<DatePicker
+    bind:value
+    {placeholder}
+    granularity="minute"
+    {...restProps}
+/>

package/src/components/ui/Field.svelte

@@ -0,0 +1,52 @@
+<script lang="ts">
+    import type { Snippet } from "svelte";
+    import type { HTMLAttributes } from "svelte/elements";
+    import Label from "./Label.svelte";
+    import { cn } from "../../utils/cn.js";
+
+    type FieldProps = HTMLAttributes<HTMLDivElement> & {
+        label?: string;
+        htmlFor?: string;
+        hint?: string;
+        error?: string;
+        required?: boolean;
+        labelClass?: string;
+        hintClass?: string;
+        children?: Snippet;
+    };
+
+    let {
+        class: className = "",
+        label = "",
+        htmlFor = "",
+        hint = "",
+        error = "",
+        required = false,
+        labelClass = "",
+        hintClass = "",
+        children,
+        ...restProps
+    }: FieldProps = $props();
+</script>
+
+<div class={cn("space-y-1.5", className)} {...restProps}>
+    {#if label}
+        <Label
+            for={htmlFor || undefined}
+            class={cn("ml-0.5 block", labelClass)}
+        >
+            {label}
+            {#if required}
+                <span class="text-[var(--stor-negative)]">*</span>
+            {/if}
+        </Label>
+    {/if}
+
+    {@render children?.()}
+
+    {#if error}
+        <p class="ml-0.5 text-xs font-medium text-[var(--stor-negative)]">{error}</p>
+    {:else if hint}
+        <p class={cn("ml-0.5 text-xs text-[var(--stor-muted-text)]", hintClass)}>{hint}</p>
+    {/if}
+</div>

package/src/components/ui/FoldLine.svelte

@@ -0,0 +1,38 @@
+<script lang="ts">
+    import type { Snippet } from "svelte";
+    import IconChevronRight from "~icons/mdi/chevron-right";
+
+    /**
+     * What a form fills in for you, or what it folds away, as one muted line.
+     * Tapping it opens the fields underneath; nothing in it is hidden or guessed.
+     */
+    let {
+        open = $bindable(false),
+        summary,
+        tone = "muted",
+        children,
+    }: {
+        open?: boolean;
+        summary: string;
+        /** `muted` for a line of defaults, `link` for a plain fold. */
+        tone?: "muted" | "link";
+        /** The fields it opens; without them the line only flips `open` for the form to show its own fields. */
+        children?: Snippet;
+    } = $props();
+</script>
+
+{#if open}
+    {#if children}<div class="flex flex-col gap-3">{@render children()}</div>{/if}
+{:else}
+    <button
+        type="button"
+        class="flex min-h-11 w-full items-center gap-2 text-left focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--stor-focus)] {tone === 'muted'
+            ? 'rounded-xl bg-[var(--stor-surface-muted)] px-3 py-2.5 text-[13px] font-medium leading-snug text-[var(--stor-muted-text)]'
+            : 'text-sm font-semibold text-[var(--stor-accent-text)]'}"
+        aria-expanded="false"
+        onclick={() => (open = true)}
+    >
+        <span class="min-w-0 flex-1">{summary}</span>
+        <IconChevronRight class="h-[18px] w-[18px] shrink-0" />
+    </button>
+{/if}

package/src/components/ui/Input.svelte

@@ -0,0 +1,21 @@
+<script lang="ts">
+    import type { HTMLInputAttributes } from "svelte/elements";
+    import { cn } from "../../utils/cn.js";
+
+    let {
+        class: className = "",
+        type = "text",
+        value = $bindable(),
+        ...restProps
+    }: HTMLInputAttributes = $props();
+</script>
+
+<input
+    {type}
+    bind:value
+    class={cn(
+        "w-full rounded-xl border border-[var(--stor-field-border)] stor-well focus:bg-[var(--stor-surface)] h-11 px-3 py-2.5 text-base sm:h-9 sm:py-1.5 sm:text-sm text-[var(--stor-ink)] outline-none transition placeholder:text-[var(--stor-muted-text)] focus:border-[var(--stor-focus)] focus:ring-2 focus:ring-[var(--stor-selected)] disabled:cursor-not-allowed disabled:bg-[var(--stor-surface-muted)] disabled:text-[var(--stor-muted-text)]",
+        className,
+    )}
+    {...restProps}
+/>