@hearthlog/ui 0.0.0-stage → 0.1.0

package/src/components/ui/Label.svelte

@@ -0,0 +1,18 @@
+<script lang="ts">
+    import { Label as BitsLabel } from "bits-ui";
+    import type { Snippet } from "svelte";
+    import { cn } from "../../utils/cn.js";
+
+    let {
+        class: className = "",
+        children,
+        ...restProps
+    }: BitsLabel.RootProps & { children?: Snippet } = $props();
+</script>
+
+<BitsLabel.Root
+    class={cn("text-sm font-semibold text-stone-800", className)}
+    {...restProps}
+>
+    {@render children?.()}
+</BitsLabel.Root>

package/src/components/ui/Metric.svelte

@@ -0,0 +1,34 @@
+<script lang="ts">
+    import type { Snippet } from 'svelte';
+    import { cn } from '../../utils/cn.js';
+
+    let {
+        label,
+        detail = '',
+        tone = 'neutral',
+        size = 'md',
+        children,
+        class: className = '',
+    }: {
+        label: string;
+        detail?: string;
+        tone?: 'neutral' | 'muted' | 'positive' | 'negative' | 'accent';
+        size?: 'md' | 'lg';
+        children: Snippet;
+        class?: string;
+    } = $props();
+
+    const valueTone = {
+        neutral: 'text-[var(--stor-ink)]',
+        muted: 'text-[var(--stor-muted-text)] !text-base !font-medium !tracking-normal',
+        positive: 'text-[var(--stor-positive)]',
+        negative: 'text-[var(--stor-negative)]',
+        accent: 'text-[var(--stor-accent-text)]',
+    };
+</script>
+
+<div class={cn('stor-metric min-w-0', className)}>
+    <p class="stor-metric-label">{label}</p>
+    <p class={cn('stor-metric-value tabular-nums', size === 'md' && 'text-xl lg:text-2xl', valueTone[tone])}>{@render children()}</p>
+    {#if detail}<p class="stor-metric-support">{detail}</p>{/if}
+</div>

package/src/components/ui/MonthNavigator.svelte

@@ -0,0 +1,194 @@
+<script lang="ts">
+    import { Dialog, Popover } from 'bits-ui';
+    import IconArrowLeft from '~icons/mdi/arrow-left';
+    import IconArrowRight from '~icons/mdi/arrow-right';
+    import IconChevronDown from '~icons/mdi/chevron-down';
+    import IconClose from '~icons/mdi/close';
+
+    let {
+        year,
+        month,
+        currentYear,
+        currentMonth,
+        subtitle = '',
+        compact = false,
+        phoneArrows = true,
+        hrefForMonth,
+        onNavigate,
+        class: className = '',
+    }: {
+        year: number;
+        month: number;
+        currentYear: number;
+        currentMonth: number;
+        subtitle?: string;
+        compact?: boolean;
+        /** Off where a list already scrolls through the months: phones then keep only the month picker. */
+        phoneArrows?: boolean;
+        hrefForMonth?: (year: number, month: number) => string;
+        onNavigate: (year: number, month: number) => void | Promise<void>;
+        class?: string;
+    } = $props();
+
+    const monthNames = [
+        'January', 'February', 'March', 'April', 'May', 'June',
+        'July', 'August', 'September', 'October', 'November', 'December',
+    ];
+    let desktopOpen = $state(false);
+    let mobileOpen = $state(false);
+    let pickerYear = $state(0);
+    let choosingYear = $state(false);
+    const monthLabel = $derived(`${monthNames[month - 1]} ${year}`);
+    const isCurrentMonth = $derived(year === currentYear && month === currentMonth);
+    const previous = $derived(shiftMonth(-1));
+    const next = $derived(shiftMonth(1));
+    const firstYear = $derived(Math.floor(pickerYear / 12) * 12);
+    // Phones have no room for Today in the month row and a second row would push the page down, so it
+    // stays off there: the lists below float their own Today, and the month picker offers the current month.
+    const todayActionClass = 'max-sm:hidden col-span-3 col-start-1 row-start-2 flex h-11 items-center justify-center justify-self-end rounded-xl px-3 text-sm font-semibold text-[var(--stor-accent-strong)] hover:bg-[var(--stor-accent-soft)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--stor-focus)] sm:col-span-1 sm:row-start-1 sm:w-20 sm:justify-self-stretch sm:bg-[var(--stor-surface-raised)] sm:shadow-[var(--stor-shadow-sm)]';
+
+    function shiftMonth(amount: number): { year: number; month: number } {
+        const date = new Date(year, month - 1 + amount, 1);
+        return { year: date.getFullYear(), month: date.getMonth() + 1 };
+    }
+
+    function setOpen(kind: 'desktop' | 'mobile', open: boolean): void {
+        if (kind === 'desktop') desktopOpen = open;
+        else mobileOpen = open;
+        if (open) {
+            pickerYear = year;
+            choosingYear = false;
+        }
+    }
+
+    function navigateTo(targetYear: number, targetMonth: number): void {
+        desktopOpen = false;
+        mobileOpen = false;
+        void onNavigate(targetYear, targetMonth);
+    }
+</script>
+
+{#snippet pickerContent()}
+    <div data-month-picker>
+        <div class="flex items-center justify-between gap-3">
+            <button
+                type="button"
+                class="flex h-11 w-11 items-center justify-center rounded-xl text-[var(--stor-muted-text)] transition hover:bg-[var(--stor-surface-hover)] hover:text-[var(--stor-ink)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--stor-focus)]"
+                aria-label={choosingYear ? 'Previous 12 years' : 'Previous year'}
+                onclick={() => pickerYear -= choosingYear ? 12 : 1}
+            ><IconArrowLeft class="h-5 w-5" /></button>
+            <button
+                type="button"
+                class="flex h-11 items-center gap-1 rounded-xl px-3 text-lg font-semibold tabular-nums text-[var(--stor-ink)] transition hover:bg-[var(--stor-surface-hover)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--stor-focus)]"
+                aria-label={`Choose year, ${pickerYear}`}
+                aria-expanded={choosingYear}
+                onclick={() => choosingYear = !choosingYear}
+            >{pickerYear}<IconChevronDown class="h-4 w-4" /></button>
+            <button
+                type="button"
+                class="flex h-11 w-11 items-center justify-center rounded-xl text-[var(--stor-muted-text)] transition hover:bg-[var(--stor-surface-hover)] hover:text-[var(--stor-ink)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--stor-focus)]"
+                aria-label={choosingYear ? 'Next 12 years' : 'Next year'}
+                onclick={() => pickerYear += choosingYear ? 12 : 1}
+            ><IconArrowRight class="h-5 w-5" /></button>
+        </div>
+
+        <div class="mt-3 grid grid-cols-3 gap-2" aria-label={choosingYear ? 'Years' : 'Months'}>
+            {#if choosingYear}
+                {#each Array.from({ length: 12 }, (_, index) => firstYear + index) as optionYear}
+                    <button
+                        type="button"
+                        class="flex h-11 items-center justify-center rounded-xl text-sm font-semibold tabular-nums transition focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--stor-focus)] {optionYear === year ? 'bg-[var(--stor-action)] text-[var(--stor-action-text)]' : 'bg-[var(--stor-surface-muted)] text-[var(--stor-ink)] hover:bg-[var(--stor-surface-hover)]'}"
+                        aria-pressed={optionYear === year}
+                        onclick={() => { pickerYear = optionYear; choosingYear = false; }}
+                    >{optionYear}</button>
+                {/each}
+            {:else}
+                {#each monthNames as name, index}
+                    {@const optionMonth = index + 1}
+                    {@const selected = pickerYear === year && optionMonth === month}
+                    {@const current = pickerYear === currentYear && optionMonth === currentMonth}
+                    <button
+                        type="button"
+                        class="relative flex h-11 items-center justify-center rounded-xl text-sm font-semibold transition focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--stor-focus)] {selected ? 'bg-[var(--stor-action)] text-[var(--stor-action-text)]' : 'bg-[var(--stor-surface-muted)] text-[var(--stor-ink)] hover:bg-[var(--stor-surface-hover)]'} {current && !selected ? 'ring-1 ring-inset ring-[var(--stor-accent)]' : ''}"
+                        aria-label={`${name} ${pickerYear}${current ? ', current month' : ''}`}
+                        aria-pressed={selected}
+                        onclick={() => navigateTo(pickerYear, optionMonth)}
+                    >{name.slice(0, 3)}</button>
+                {/each}
+            {/if}
+        </div>
+
+        {#if !isCurrentMonth}
+            <button
+                type="button"
+                class="mt-3 flex h-11 w-full items-center justify-center rounded-xl text-sm font-semibold text-[var(--stor-accent-strong)] transition hover:bg-[var(--stor-accent-soft)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--stor-focus)]"
+                onclick={() => navigateTo(currentYear, currentMonth)}
+            >Go to current month</button>
+        {:else}
+            <div class="mt-3 h-11" aria-hidden="true"></div>
+        {/if}
+    </div>
+{/snippet}
+
+<section data-month-navigation class="grid w-full grid-cols-[2.75rem_minmax(0,1fr)_2.75rem] items-center gap-x-2 gap-y-1 {compact ? 'sm:grid-cols-[2.75rem_13rem_2.75rem_5rem] sm:justify-start' : 'sm:grid-cols-[minmax(0,1fr)_2.75rem_5rem_2.75rem]'} {phoneArrows ? '' : 'max-sm:flex max-sm:w-auto'} {className}" aria-label="Month navigation">
+    <div class="col-start-2 row-start-1 min-w-0 text-center {phoneArrows ? '' : 'max-sm:text-left'} {compact ? 'sm:col-start-2 sm:text-center' : 'sm:col-start-1 sm:text-left'}">
+        <h2 class="stor-serif-title text-lg text-[var(--stor-ink)] sm:text-[22px]">
+            <Popover.Root open={desktopOpen} onOpenChange={(open) => setOpen('desktop', open)}>
+                <Popover.Trigger
+                    class="hidden min-h-11 max-w-full items-center gap-1.5 rounded-xl px-1 text-left transition hover:bg-[var(--stor-surface-hover)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--stor-focus)] sm:inline-flex"
+                    aria-label={`Choose month, ${monthLabel}`}
+                    aria-expanded={desktopOpen}
+                ><span class="truncate">{monthLabel}</span><IconChevronDown class="h-4 w-4 shrink-0" /></Popover.Trigger>
+                <Popover.Portal>
+                    <Popover.Content side="bottom" align="start" sideOffset={8} class="stor-menu z-[var(--stor-layer-sheet)] hidden w-72 p-3 outline-none sm:block">
+                        <p class="sr-only">Choose month</p>
+                        {@render pickerContent()}
+                    </Popover.Content>
+                </Popover.Portal>
+            </Popover.Root>
+
+            <Dialog.Root open={mobileOpen} onOpenChange={(open) => setOpen('mobile', open)}>
+                <Dialog.Trigger
+                    class="inline-flex min-h-11 max-w-full items-center gap-1.5 rounded-xl px-1 transition hover:bg-[var(--stor-surface-hover)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--stor-focus)] sm:hidden"
+                    aria-label={`Choose month, ${monthLabel}`}
+                    aria-expanded={mobileOpen}
+                ><span class="truncate">{monthLabel}</span><IconChevronDown class="h-4 w-4 shrink-0" /></Dialog.Trigger>
+                <Dialog.Portal>
+                    <Dialog.Overlay class="fixed inset-0 z-[var(--stor-layer-sheet)] bg-[var(--stor-overlay)] sm:hidden" />
+                    <Dialog.Content class="stor-sheet fixed inset-x-0 bottom-0 z-[var(--stor-layer-sheet-content)] max-h-[calc(100dvh-env(safe-area-inset-top))] overflow-y-auto rounded-t-3xl px-4 pt-3 pb-[calc(1rem+env(safe-area-inset-bottom))] outline-none sm:hidden">
+                        <div class="mx-auto mb-4 h-1 w-10 rounded-full bg-[var(--stor-border)]" aria-hidden="true"></div>
+                        <div class="mb-2 flex items-center justify-between">
+                            <Dialog.Title level={3} class="text-xl font-semibold text-[var(--stor-ink)]">Choose month</Dialog.Title>
+                            <Dialog.Close class="flex h-11 w-11 items-center justify-center rounded-xl text-[var(--stor-muted-text)] hover:bg-[var(--stor-surface-hover)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--stor-focus)]" aria-label="Close month picker"><IconClose class="h-5 w-5" /></Dialog.Close>
+                        </div>
+                        {@render pickerContent()}
+                    </Dialog.Content>
+                </Dialog.Portal>
+            </Dialog.Root>
+        </h2>
+        <!-- A phone keeps the row to the month alone; the page repeats the figure lower down. -->
+        {#if subtitle}<p class="mt-0.5 text-sm leading-5 text-[var(--stor-muted-text)] max-sm:hidden">{subtitle}</p>{/if}
+    </div>
+
+    {#if hrefForMonth}
+        <a href={hrefForMonth(previous.year, previous.month)} class="{phoneArrows ? '' : 'max-sm:hidden'} col-start-1 row-start-1 flex h-11 w-11 items-center justify-center rounded-xl bg-[var(--stor-surface-raised)] text-[var(--stor-muted-text)] shadow-[var(--stor-shadow-sm)] transition hover:bg-[var(--stor-surface-hover)] hover:text-[var(--stor-ink)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--stor-focus)] {compact ? 'sm:col-start-1' : 'sm:col-start-2'}" aria-label="Previous month"><IconArrowLeft class="h-5 w-5" /></a>
+    {:else}
+        <button type="button" onclick={() => navigateTo(previous.year, previous.month)} class="{phoneArrows ? '' : 'max-sm:hidden'} col-start-1 row-start-1 flex h-11 w-11 items-center justify-center rounded-xl bg-[var(--stor-surface-raised)] text-[var(--stor-muted-text)] shadow-[var(--stor-shadow-sm)] transition hover:bg-[var(--stor-surface-hover)] hover:text-[var(--stor-ink)] {compact ? 'sm:col-start-1' : 'sm:col-start-2'} focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--stor-focus)]" aria-label="Previous month"><IconArrowLeft class="h-5 w-5" /></button>
+    {/if}
+
+    {#if !isCurrentMonth}
+        {#if hrefForMonth}
+            <a href={hrefForMonth(currentYear, currentMonth)} class={`${todayActionClass} ${compact ? 'sm:col-start-4' : 'sm:col-start-3'}`} aria-label="Go to current month">Today</a>
+        {:else}
+            <button type="button" onclick={() => navigateTo(currentYear, currentMonth)} class={`${todayActionClass} ${compact ? 'sm:col-start-4' : 'sm:col-start-3'}`} aria-label="Go to current month">Today</button>
+        {/if}
+    {:else}
+        <span class={`${todayActionClass} ${compact ? 'sm:col-start-4' : 'sm:col-start-3'} invisible`} aria-hidden="true">Today</span>
+    {/if}
+
+    {#if hrefForMonth}
+        <a href={hrefForMonth(next.year, next.month)} class="{phoneArrows ? '' : 'max-sm:hidden'} col-start-3 row-start-1 flex h-11 w-11 items-center justify-center rounded-xl bg-[var(--stor-surface-raised)] text-[var(--stor-muted-text)] shadow-[var(--stor-shadow-sm)] transition hover:bg-[var(--stor-surface-hover)] hover:text-[var(--stor-ink)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--stor-focus)] {compact ? 'sm:col-start-3' : 'sm:col-start-4'}" aria-label="Next month"><IconArrowRight class="h-5 w-5" /></a>
+    {:else}
+        <button type="button" onclick={() => navigateTo(next.year, next.month)} class="{phoneArrows ? '' : 'max-sm:hidden'} col-start-3 row-start-1 flex h-11 w-11 items-center justify-center rounded-xl bg-[var(--stor-surface-raised)] text-[var(--stor-muted-text)] shadow-[var(--stor-shadow-sm)] transition hover:bg-[var(--stor-surface-hover)] hover:text-[var(--stor-ink)] {compact ? 'sm:col-start-3' : 'sm:col-start-4'} focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--stor-focus)]" aria-label="Next month"><IconArrowRight class="h-5 w-5" /></button>
+    {/if}
+</section>

package/src/components/ui/Panel.svelte

@@ -0,0 +1,37 @@
+<script lang="ts">
+    import type { Snippet } from 'svelte';
+    import { cn } from '../../utils/cn.js';
+
+    let {
+        title = '',
+        description = '',
+        action,
+        children,
+        padding = 'body',
+        label,
+        class: className = '',
+    }: {
+        title?: string;
+        description?: string;
+        action?: Snippet;
+        children: Snippet;
+        padding?: 'none' | 'body' | 'all';
+        label?: string;
+        class?: string;
+    } = $props();
+</script>
+
+<section class={cn('stor-panel', padding === 'all' && 'p-[var(--stor-panel-padding)]', className)} aria-label={label}>
+    {#if title}
+        <div class={cn('stor-panel-header', padding === 'all' && '!p-0')}>
+            <div class="min-w-0">
+                <h2 class="text-base font-semibold tracking-tight text-[var(--stor-ink)]">{title}</h2>
+                {#if description}<p class="mt-0.5 text-xs text-[var(--stor-muted-text)]">{description}</p>{/if}
+            </div>
+            {@render action?.()}
+        </div>
+    {/if}
+    <div class={cn(padding === 'body' && 'stor-panel-body', padding === 'all' && title && 'mt-4')}>
+        {@render children()}
+    </div>
+</section>

package/src/components/ui/RouteTabs.svelte

@@ -0,0 +1,57 @@
+<script lang="ts">
+    import { tick, type Component } from 'svelte';
+    import { cn } from '../../utils/cn.js';
+    import DataValue from '../data/DataValue.svelte';
+    import { tabIndicator } from './tab-indicator.js';
+
+    export interface RouteTab {
+        label: string;
+        href: string;
+        active: boolean;
+        icon?: Component;
+        count?: number;
+    }
+
+    let {
+        label,
+        tabs,
+        variant = 'primary',
+        class: className = '',
+    }: {
+        label: string;
+        tabs: readonly RouteTab[];
+        variant?: 'primary' | 'section';
+        class?: string;
+    } = $props();
+
+    let nav = $state<HTMLElement | null>(null);
+
+    $effect(() => {
+        if (tabs.length === 0 || !nav) return;
+        void tick().then(() => {
+            const selected = nav?.querySelector<HTMLElement>('[aria-current="page"]');
+            if (selected && nav && nav.scrollWidth > nav.clientWidth) {
+                const selectedRect = selected.getBoundingClientRect();
+                const navRect = nav.getBoundingClientRect();
+                nav.scrollLeft += selectedRect.left - navRect.left - (nav.clientWidth - selectedRect.width) / 2;
+            }
+        });
+    });
+</script>
+
+<nav
+    bind:this={nav}
+    aria-label={label}
+    class={cn('stor-page-tabs mobile-scroll min-w-0 max-w-full items-center overflow-x-auto', variant === 'section' ? 'stor-section-tabs grid' : 'stor-primary-tabs flex', className)}
+    {@attach tabIndicator}
+>
+    {#each tabs as tab (tab.href)}
+        <a href={tab.href} aria-current={tab.active ? 'page' : undefined} class="stor-page-tab">
+            {#if tab.icon}{@const Icon = tab.icon}<Icon class="h-5 w-5 shrink-0" />{/if}
+            <span>{tab.label}</span>
+            {#if tab.count !== undefined}
+                <span class="stor-tab-count"><DataValue>{tab.count}</DataValue></span>
+            {/if}
+        </a>
+    {/each}
+</nav>

package/src/components/ui/Select.svelte

@@ -0,0 +1,93 @@
+<script lang="ts">
+    import { Select } from "bits-ui";
+    import type { Snippet } from "svelte";
+    import { cn } from "../../utils/cn.js";
+    import IconCheck from "~icons/mdi/check";
+    import IconChevronDown from "~icons/mdi/chevron-down";
+
+    export interface SelectOption {
+        value: string;
+        label: string;
+        disabled?: boolean;
+    }
+
+    let {
+        value = "",
+        options = [],
+        placeholder = "Select",
+        disabled = false,
+        id = "",
+        name = "",
+        ariaLabel = "",
+        onValueChange = () => {},
+        class: className = "",
+        triggerClass = "",
+        contentClass = "",
+        children,
+    }: {
+        value?: string;
+        options: SelectOption[];
+        placeholder?: string;
+        disabled?: boolean;
+        id?: string;
+        name?: string;
+        ariaLabel?: string;
+        onValueChange?: (value: string) => void;
+        class?: string;
+        triggerClass?: string;
+        contentClass?: string;
+        children?: Snippet;
+    } = $props();
+</script>
+
+<div class={className}>
+    <Select.Root
+        type="single"
+        {value}
+        items={options}
+        {disabled}
+        {name}
+        {onValueChange}
+        loop
+    >
+        <Select.Trigger
+            id={id || undefined}
+            aria-label={ariaLabel || undefined}
+            class={cn(
+                "flex w-full items-center justify-between gap-2 rounded-xl border border-[var(--stor-field-border)] stor-well focus:bg-[var(--stor-surface)] h-11 px-3 py-2.5 sm:h-9 sm:py-1.5 text-left text-sm text-[var(--stor-ink)] outline-none transition 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)]",
+                triggerClass,
+            )}
+        >
+            <Select.Value {placeholder} class="min-w-0 truncate" />
+            <IconChevronDown class="h-4 w-4 shrink-0 text-[var(--stor-muted-text)]" />
+        </Select.Trigger>
+        <Select.Portal>
+            <Select.Content
+                sideOffset={6}
+                class={cn(
+                    "stor-menu z-[var(--stor-layer-menu)] max-h-72 min-w-[var(--bits-select-anchor-width)] overflow-hidden py-1",
+                    contentClass,
+                )}
+            >
+                <Select.Viewport>
+                    {#each options as option (option.value)}
+                        <Select.Item
+                            value={option.value}
+                            label={option.label}
+                            disabled={option.disabled}
+                            class="flex cursor-default items-center justify-between gap-3 px-3 py-2 text-sm text-[var(--stor-ink)] outline-none data-[highlighted]:bg-[var(--stor-surface-muted)] data-[disabled]:opacity-45"
+                        >
+                            {#snippet children({ selected })}
+                                <span class="min-w-0 truncate">{option.label}</span>
+                                {#if selected}
+                                    <IconCheck class="h-4 w-4 shrink-0" />
+                                {/if}
+                            {/snippet}
+                        </Select.Item>
+                    {/each}
+                    {@render children?.()}
+                </Select.Viewport>
+            </Select.Content>
+        </Select.Portal>
+    </Select.Root>
+</div>

package/src/components/ui/Switch.svelte

@@ -0,0 +1,41 @@
+<script lang="ts">
+    import { cn } from "../../utils/cn.js";
+
+    /** An on/off switch: one row with a label, an optional short hint, and the toggle at the end. */
+    let {
+        checked = false,
+        label,
+        hint = "",
+        disabled = false,
+        onCheckedChange,
+        ariaLabel,
+        class: className = "",
+    }: {
+        checked?: boolean;
+        label: string;
+        hint?: string;
+        disabled?: boolean;
+        onCheckedChange: (checked: boolean) => void;
+        /** When the label is not shown, e.g. a switch at the end of a list row. */
+        ariaLabel?: string;
+        class?: string;
+    } = $props();
+</script>
+
+<button
+    type="button"
+    role="switch"
+    aria-checked={checked}
+    aria-label={ariaLabel}
+    {disabled}
+    class={cn("flex min-h-12 w-full items-center gap-3 text-left focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--stor-focus)] disabled:opacity-50", className)}
+    onclick={() => onCheckedChange(!checked)}
+>
+    {#if label}<span class="min-w-0 flex-1">
+        <span class="block text-[15px] font-medium text-[var(--stor-ink)]">{label}</span>
+        {#if hint}<span class="block text-[12.5px] text-[var(--stor-muted-text)]">{hint}</span>{/if}
+    </span>{/if}
+    <span class="relative h-[30px] w-12 shrink-0 rounded-full transition-colors {checked ? 'bg-[var(--stor-action)]' : 'bg-[var(--stor-surface-well)] shadow-[inset_0_0_0_1px_var(--stor-border)]'}" aria-hidden="true">
+        <span class="absolute top-[3px] h-6 w-6 rounded-full bg-white shadow transition-[left] {checked ? 'left-[21px]' : 'left-[3px]'}"></span>
+    </span>
+</button>

package/src/components/ui/Textarea.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+    import type { HTMLTextareaAttributes } from "svelte/elements";
+    import { cn } from "../../utils/cn.js";
+
+    let {
+        class: className = "",
+        value = $bindable(),
+        ...restProps
+    }: HTMLTextareaAttributes = $props();
+</script>
+
+<textarea
+    bind:value
+    class={cn(
+        "min-h-24 w-full rounded-xl border border-[var(--stor-field-border)] stor-well focus:bg-[var(--stor-surface)] px-3 py-2.5 text-base 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}
+></textarea>

package/src/components/ui/Tooltip.svelte

@@ -0,0 +1,53 @@
+<script lang="ts">
+    import { Tooltip as BitsTooltip } from "bits-ui";
+    import type { Snippet } from "svelte";
+    import { cn } from "../../utils/cn.js";
+
+    type TooltipSide = "top" | "right" | "bottom" | "left";
+    type TooltipAlign = "start" | "center" | "end";
+
+    let {
+        content,
+        side = "right",
+        align = "center",
+        sideOffset = 8,
+        delayDuration = 300,
+        disabled = false,
+        class: className = "",
+        trigger,
+    }: {
+        content: string;
+        side?: TooltipSide;
+        align?: TooltipAlign;
+        sideOffset?: number;
+        delayDuration?: number;
+        disabled?: boolean;
+        class?: string;
+        trigger: Snippet<[{ props: Record<string, unknown> }]>;
+    } = $props();
+</script>
+
+<BitsTooltip.Provider {delayDuration}>
+    <BitsTooltip.Root disabled={disabled || content.trim().length === 0}>
+        <BitsTooltip.Trigger>
+            {#snippet child({ props })}
+                {@render trigger({ props })}
+            {/snippet}
+        </BitsTooltip.Trigger>
+        <BitsTooltip.Portal>
+            <BitsTooltip.Content
+                {side}
+                {align}
+                {sideOffset}
+                collisionPadding={8}
+                class={cn(
+                    "z-[var(--stor-layer-tooltip)] rounded-lg bg-[var(--stor-tooltip)] px-2.5 py-1.5 text-xs font-semibold text-[var(--stor-tooltip-text)] shadow-[var(--stor-elevation-3)]",
+                    className,
+                )}
+            >
+                {content}
+                <BitsTooltip.Arrow class="fill-[var(--stor-tooltip)]" />
+            </BitsTooltip.Content>
+        </BitsTooltip.Portal>
+    </BitsTooltip.Root>
+</BitsTooltip.Provider>

package/src/components/ui/tab-indicator.ts

@@ -0,0 +1,84 @@
+const SELECTED_TAB =
+    '[data-state="active"], [aria-selected="true"], [aria-current="page"], [aria-current="true"]';
+
+/**
+ * Sliding selection pill for a tab row.
+ *
+ * Measures the selected trigger and animates a pill between tabs. The selected
+ * trigger keeps its own background until the pill is positioned, so the row
+ * never flashes unselected while the list is still laying out.
+ *
+ * Usage: `{@attach tabIndicator}` on a `.stor-page-tabs` row or a Bits UI
+ * `Tabs.List`. Motion is disabled by the global reduced-motion rule.
+ */
+export function tabIndicator(list: HTMLElement): () => void {
+    const pill = document.createElement('span');
+    pill.className = 'stor-tab-indicator';
+    pill.setAttribute('aria-hidden', 'true');
+    pill.setAttribute('role', 'presentation');
+    list.insertBefore(pill, list.firstChild);
+
+    let frame = 0;
+    let destroyed = false;
+
+    const place = (): boolean => {
+        const selected = list.querySelector<HTMLElement>(SELECTED_TAB);
+        if (!selected) return false;
+        const listRect = list.getBoundingClientRect();
+        const selectedRect = selected.getBoundingClientRect();
+        if (selectedRect.width === 0) return false;
+        pill.style.setProperty(
+            '--stor-tab-x',
+            `${selectedRect.left - listRect.left + list.scrollLeft - list.clientLeft}px`,
+        );
+        pill.style.setProperty('--stor-tab-w', `${selectedRect.width}px`);
+        return true;
+    };
+
+    const update = (): void => {
+        if (!place()) {
+            list.classList.remove('stor-tabs-sliding');
+            return;
+        }
+        list.classList.add('stor-tabs-sliding', 'stor-tabs-ready');
+    };
+
+    const schedule = (): void => {
+        if (destroyed) return;
+        cancelAnimationFrame(frame);
+        frame = requestAnimationFrame(update);
+    };
+
+    const sizes = new ResizeObserver(schedule);
+    const observeTabs = (): void => {
+        sizes.disconnect();
+        sizes.observe(list);
+        for (const child of list.children) {
+            if (child !== pill) sizes.observe(child);
+        }
+    };
+
+    const mutations = new MutationObserver(() => {
+        observeTabs();
+        update();
+    });
+    mutations.observe(list, {
+        attributes: true,
+        childList: true,
+        subtree: true,
+        attributeFilter: ['data-state', 'aria-selected', 'aria-current'],
+    });
+
+    observeTabs();
+    update();
+    void document.fonts.ready.then(schedule);
+
+    return () => {
+        destroyed = true;
+        cancelAnimationFrame(frame);
+        sizes.disconnect();
+        mutations.disconnect();
+        pill.remove();
+        list.classList.remove('stor-tabs-sliding', 'stor-tabs-ready');
+    };
+}

package/src/state/commands.ts

@@ -0,0 +1,22 @@
+import { derived, get } from 'svelte/store';
+import { workspaceReadiness } from './readiness.js';
+
+export interface CommandAvailability {
+    available: boolean;
+    unavailableReason: string | null;
+}
+
+export const commandAvailability = derived(workspaceReadiness, (workspace): CommandAvailability => ({
+    available: workspace.ready,
+    unavailableReason: workspace.ready ? null : 'Wait for local data to open.',
+}));
+
+export function runCommandAction(action: () => void): boolean {
+    if (!get(commandAvailability).available) return false;
+    action();
+    return true;
+}
+
+export function commandActionsAvailable(): boolean {
+    return get(commandAvailability).available;
+}