@hearthlog/ui 0.0.0-stage → 0.1.0

package/src/state/notifications.svelte.ts

@@ -0,0 +1,49 @@
+export type NotificationType = "success" | "error" | "info" | "progress";
+
+export interface NotificationAction {
+    label: string;
+    run: () => void | Promise<void>;
+}
+
+export interface AppNotification {
+    id: string;
+    type: NotificationType;
+    message: string;
+    action?: NotificationAction;
+    duration: number;
+}
+
+export const notificationState = $state<{ items: AppNotification[] }>({
+    items: [],
+});
+
+function push(
+    type: NotificationType,
+    message: string,
+    action?: NotificationAction,
+    duration = action ? 8000 : 4500,
+): string {
+    const id = crypto.randomUUID();
+    notificationState.items.push({ id, type, message, action, duration });
+    return id;
+}
+
+export function dismissNotification(id: string): void {
+    notificationState.items = notificationState.items.filter(
+        (item) => item.id !== id,
+    );
+}
+
+export const notify = {
+    success: (message: string, action?: NotificationAction) =>
+        push("success", message, action),
+    error: (message: string, action?: NotificationAction) =>
+        push("error", message, action, 7000),
+    info: (message: string, action?: NotificationAction) =>
+        push("info", message, action),
+    /**
+     * A sticky notification for an async task. The caller keeps the returned
+     * id and dismisses it with `dismissNotification` when the task settles.
+     */
+    progress: (message: string) => push("progress", message, undefined, 0),
+};

package/src/state/page-context.ts

@@ -0,0 +1,9 @@
+import { getContext, setContext } from 'svelte';
+const pageResourceContext = Symbol('page-resource');
+type PageContext = { loading: boolean; error?: unknown; measurement?: { id: string } };
+export function providePageResource(resource: () => PageContext): void {
+    setContext(pageResourceContext, resource);
+}
+export function currentPageResource(): (() => PageContext) | undefined {
+    return getContext(pageResourceContext);
+}

package/src/state/readiness.ts

@@ -0,0 +1,20 @@
+import { get, writable } from 'svelte/store';
+
+/** Read readiness is separate from both the mounted shell and network sync. */
+export const workspaceReadiness = writable({ ready: false, key: '', error: null as unknown });
+
+export function beginWorkspaceTransition(): void {
+    workspaceReadiness.update((state) => ({ ...state, ready: false, error: null }));
+}
+
+export function completeWorkspaceTransition(key: string): void {
+    workspaceReadiness.set({ ready: true, key, error: null });
+}
+
+export function failWorkspaceTransition(error: unknown): void {
+    workspaceReadiness.update((state) => ({ ...state, ready: false, error }));
+}
+
+export function workspaceIsReady(): boolean {
+    return get(workspaceReadiness).ready;
+}

package/src/state/sheet-stack.svelte.ts

@@ -0,0 +1,49 @@
+/**
+ * The sheets open on screen, oldest first. On phones a sheet opened from another
+ * sheet takes its place: the ones below hide, the top one shows a back arrow
+ * that closes it (the sheet below comes back as it was left), and its × closes
+ * them all. `Drawer` and `Modal` register here while they are open.
+ */
+import { untrack } from 'svelte';
+
+interface OpenSheet {
+    id: number;
+    close: () => void;
+}
+
+class SheetStack {
+    entries = $state<OpenSheet[]>([]);
+    #next = 0;
+
+    open(close: () => void): number {
+        const id = ++this.#next;
+        // Called from the sheet's effect: writing must not make that effect depend on the stack.
+        untrack(() => { this.entries = [...this.entries, { id, close }]; });
+        return id;
+    }
+
+    remove(id: number): void {
+        untrack(() => { this.entries = this.entries.filter((entry) => entry.id !== id); });
+    }
+
+    indexOf(id: number | null): number {
+        return id === null ? -1 : this.entries.findIndex((entry) => entry.id === id);
+    }
+
+    /** Whether another sheet sits on top of this one. */
+    covered(id: number | null): boolean {
+        const index = this.indexOf(id);
+        return index >= 0 && index < this.entries.length - 1;
+    }
+
+    /** Whether this sheet was opened over another one. */
+    stacked(id: number | null): boolean {
+        return this.indexOf(id) > 0;
+    }
+
+    closeAll(): void {
+        for (const entry of [...this.entries].reverse()) entry.close();
+    }
+}
+
+export const sheetStack = new SheetStack();

package/src/styles/base.css

@@ -0,0 +1,243 @@
+/* Keep the first rendered font for this navigation if a local font arrives late. */
+@font-face {
+    font-family: 'Inter Variable';
+    font-style: normal;
+    font-display: optional;
+    font-weight: 100 900;
+    src: url('../assets/fonts/inter-latin-ui.woff2') format('woff2-variations');
+    unicode-range: U+0020-007E, U+00A0, U+00B0, U+00B5, U+00B7, U+00C1, U+00C4, U+00C9, U+00CD, U+00D3, U+00D4, U+00D7, U+00DA, U+00DD, U+00E1, U+00E4, U+00E9, U+00ED, U+00F3, U+00F4, U+00FA, U+00FD, U+2013-2014, U+2018-201D, U+2022, U+2026, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215;
+}
+@font-face {
+    font-family: 'Inter Variable';
+    font-style: normal;
+    font-display: optional;
+    font-weight: 100 900;
+    src: url('../assets/fonts/inter-latin-ext-ui.woff2') format('woff2-variations');
+    unicode-range: U+010C-010D, U+010E-0111, U+011A-011B, U+0139-013A, U+013D-013E, U+0147-0148, U+0154-0159, U+0160-0165, U+016E-0171, U+0179-017E;
+}
+@font-face {
+    font-family: 'Fira Code Variable';
+    font-style: normal;
+    font-display: optional;
+    font-weight: 300 700;
+    src: url('../assets/fonts/fira-code-latin-ui.woff2') format('woff2-variations');
+    unicode-range: U+0020-007E, U+00A0, U+00B0, U+00B5, U+00B7, U+00C1, U+00C4, U+00C9, U+00CD, U+00D3, U+00D4, U+00D7, U+00DA, U+00DD, U+00E1, U+00E4, U+00E9, U+00ED, U+00F3, U+00F4, U+00FA, U+00FD, U+2013-2014, U+2018-201D, U+2022, U+2026, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215;
+}
+@font-face {
+    font-family: 'Fira Code Variable';
+    font-style: normal;
+    font-display: optional;
+    font-weight: 300 700;
+    src: url('../assets/fonts/fira-code-latin-ext-ui.woff2') format('woff2-variations');
+    unicode-range: U+010C-010D, U+010E-0111, U+011A-011B, U+0139-013A, U+013D-013E, U+0147-0148, U+0154-0159, U+0160-0165, U+016E-0171, U+0179-017E;
+}
+@theme {
+    --font-sans: var(--stor-font-sans);
+    --font-mono: var(--stor-font-mono);
+    /* Push desktop-plus breakpoint so multi-column only appears on very wide screens */
+    --breakpoint-2xl: 1920px;
+    /* Four radii: 8 small tiles, 12 controls and inner blocks, 20 panels, full pills.
+       md and 2xl fold into that set instead of adding 6px and 16px corners. */
+    --radius-md: 0.5rem;
+    --radius-2xl: 1.25rem;
+}
+:root {
+    /* Stacking scale. Shell chrome stays at z-10 to z-55; everything that floats above a page uses these. */
+    --stor-layer-sticky: 10;
+    --stor-layer-sheet: 70;
+    --stor-layer-sheet-content: 71;
+    --stor-layer-menu: 90;
+    --stor-layer-menu-sub: 91;
+    --stor-layer-dialog: 100;
+    --stor-layer-dialog-content: 101;
+    --stor-layer-toast: 110;
+    --stor-layer-tooltip: 120;
+    --stor-font-serif: ui-serif, "New York", "Iowan Old Style", Charter, Georgia, "Times New Roman", serif;
+    color-scheme: light;
+    font-family: var(--stor-font-sans);
+    background: var(--stor-bg);
+    /* Shared shell geometry; page actions and content clearance use the same stack. */
+    --stor-mobile-header-height: calc(3.25rem + env(safe-area-inset-top));
+    --stor-mobile-nav-height: 4rem;
+    --stor-mobile-bottom-inset: max(12px, env(safe-area-inset-bottom));
+    --stor-mobile-action-height: 2.75rem;
+    --stor-mobile-stack-gap: 10px;
+    --stor-section-gap: 16px;
+    /* Padding at least the 20px panel radius keeps content clear of the curve. */
+    --stor-panel-padding: 20px;
+    --stor-panel-radius: 20px;
+    --stor-sidebar-width: 224px;
+    /* Page gutters, panel padding and gaps; phones tighten them below. */
+    --stor-sidebar-rail-width: 5rem;
+    /* One short panel slide keeps the form legible as soon as it opens. */
+    --stor-drawer-shift: 1.5rem;
+    --stor-drawer-enter-motion: 190ms cubic-bezier(0.2, 0.8, 0.2, 1);
+    --stor-drawer-enter-fade: 150ms ease-out;
+    --stor-drawer-exit-motion: 150ms ease-in;
+    --stor-drawer-exit-fade: 120ms ease-in;
+    --stor-overlay-enter-fade: 180ms ease-out;
+    --stor-overlay-exit-fade: 150ms ease-in;
+    /* The selected tab pill slides between triggers. */
+    --stor-tab-motion: 280ms cubic-bezier(0.22, 1, 0.36, 1);
+}
+html[data-theme="dark"] {
+    color-scheme: dark;
+}
+html {
+    overflow: hidden;
+    background: var(--stor-bg);
+}
+body {
+    margin: 0;
+    font-size: 14px;
+    font-variant-numeric: tabular-nums;
+    min-width: 320px;
+    background: var(--stor-bg);
+    color: var(--stor-ink);
+}
+body,
+button,
+input,
+select,
+textarea {
+    transition:
+        background-color 160ms ease,
+        border-color 160ms ease,
+        color 160ms ease;
+}
+button,
+a,
+input,
+select,
+textarea {
+    outline-color: var(--stor-focus);
+    outline-offset: 2px;
+}
+button:focus-visible,
+a:focus-visible,
+input:focus-visible,
+select:focus-visible,
+textarea:focus-visible {
+    outline: 2px solid var(--stor-focus);
+}
+::selection {
+    background: var(--stor-accent-soft);
+    color: var(--stor-accent-strong);
+}
+.mobile-scroll {
+    scrollbar-width: none;
+}
+.mobile-scroll::-webkit-scrollbar {
+    display: none;
+}
+input, select, textarea { accent-color: var(--stor-action); }
+[class~="bg-[var(--stor-action)]"] { color: var(--stor-action-text); }
+[class~="data-[selected]:bg-[var(--stor-action)]"][data-selected],
+[class~="data-[state=checked]:bg-[var(--stor-action)]"][data-state="checked"] {
+    color: var(--stor-action-text);
+}
+@media (prefers-reduced-motion: reduce) {
+    *, *::before, *::after { scroll-behavior: auto !important; transition-duration: 0s !important; animation-duration: 0s !important; }
+}
+/*
+ * Compatibility layer for existing Tailwind color utilities. Shared semantic
+ * tokens remain the source of truth while route markup is migrated naturally.
+ */
+html[data-theme="dark"] [class~="bg-white"] { background-color: var(--stor-surface) !important; }
+html[data-theme="dark"] [class~="bg-white/95"] { background-color: color-mix(in srgb, var(--stor-surface), transparent 5%) !important; }
+html[data-theme="dark"] [class~="bg-white/90"] { background-color: color-mix(in srgb, var(--stor-surface), transparent 10%) !important; }
+html[data-theme="dark"] [class~="bg-white/80"] { background-color: color-mix(in srgb, var(--stor-surface), transparent 20%) !important; }
+html[data-theme="dark"] [class~="bg-white/70"] { background-color: color-mix(in srgb, var(--stor-surface), transparent 30%) !important; }
+html[data-theme="dark"] [class~="bg-white/60"] { background-color: color-mix(in srgb, var(--stor-surface), transparent 40%) !important; }
+html[data-theme="dark"] [class~="bg-white/50"] { background-color: color-mix(in srgb, var(--stor-surface), transparent 50%) !important; }
+html[data-theme="dark"] [class~="bg-stone-50"],
+html[data-theme="dark"] [class~="bg-stone-100"],
+html[data-theme="dark"] [class~="bg-gray-50"],
+html[data-theme="dark"] [class~="bg-gray-100"] { background-color: var(--stor-surface-muted) !important; }
+html[data-theme="dark"] [class~="bg-stone-200"],
+html[data-theme="dark"] [class~="bg-gray-200"] { background-color: var(--stor-border) !important; }
+html[data-theme="dark"] [class~="text-stone-950"],
+html[data-theme="dark"] [class~="text-stone-900"],
+html[data-theme="dark"] [class~="text-stone-800"],
+html[data-theme="dark"] [class~="text-gray-950"],
+html[data-theme="dark"] [class~="text-gray-900"],
+html[data-theme="dark"] [class~="text-gray-800"] { color: var(--stor-ink) !important; }
+html[data-theme="dark"] [class~="text-stone-700"],
+html[data-theme="dark"] [class~="text-stone-600"],
+html[data-theme="dark"] [class~="text-stone-500"],
+html[data-theme="dark"] [class~="text-gray-700"],
+html[data-theme="dark"] [class~="text-gray-600"],
+html[data-theme="dark"] [class~="text-gray-500"] { color: var(--stor-muted-text) !important; }
+html[data-theme="dark"] [class~="border-stone-100"],
+html[data-theme="dark"] [class~="border-stone-200"],
+html[data-theme="dark"] [class~="border-gray-100"],
+html[data-theme="dark"] [class~="border-gray-200"] { border-color: var(--stor-border) !important; }
+html[data-theme="dark"] [class~="border-stone-300"],
+html[data-theme="dark"] [class~="border-gray-300"] { border-color: var(--stor-field-border) !important; }
+html[data-theme="dark"] [class~="ring-stone-200"],
+html[data-theme="dark"] [class~="ring-gray-200"] { --tw-ring-color: var(--stor-border) !important; }
+html[data-theme="dark"] [class~="hover:bg-white"]:hover,
+html[data-theme="dark"] [class~="focus:bg-white"]:focus,
+html[data-theme="dark"] [class~="focus-within:bg-white"]:focus-within,
+html[data-theme="dark"] [class~="data-[state=active]:bg-white"][data-state="active"] {
+    background-color: var(--stor-surface-hover) !important;
+}
+html[data-theme="dark"] [class~="hover:text-stone-950"]:hover,
+html[data-theme="dark"] [class~="hover:text-stone-900"]:hover,
+html[data-theme="dark"] [class~="hover:text-stone-800"]:hover {
+    color: var(--stor-ink) !important;
+}
+html[data-theme="dark"] [class~="bg-red-50"],
+html[data-theme="dark"] [class~="bg-red-50/80"],
+html[data-theme="dark"] [class~="bg-red-50/35"],
+html[data-theme="dark"] [class~="bg-red-100"],
+html[data-theme="dark"] [class~="bg-red-100/70"] { background-color: var(--stor-negative-soft) !important; }
+html[data-theme="dark"] [class~="text-red-600"],
+html[data-theme="dark"] [class~="text-red-700"],
+html[data-theme="dark"] [class~="text-red-800"],
+html[data-theme="dark"] [class~="text-red-900"] { color: var(--stor-negative) !important; }
+html[data-theme="dark"] [class~="border-red-100"],
+html[data-theme="dark"] [class~="border-red-200"],
+html[data-theme="dark"] [class~="border-red-300"] { border-color: color-mix(in srgb, var(--stor-negative), transparent 35%) !important; }
+html[data-theme="dark"] [class~="bg-amber-50"],
+html[data-theme="dark"] [class~="bg-amber-50/80"],
+html[data-theme="dark"] [class~="bg-amber-100"] { background-color: var(--stor-warning-soft) !important; }
+html[data-theme="dark"] [class~="text-amber-600"],
+html[data-theme="dark"] [class~="text-amber-700"],
+html[data-theme="dark"] [class~="text-amber-800"],
+html[data-theme="dark"] [class~="text-amber-900"],
+html[data-theme="dark"] [class~="text-amber-950"] { color: var(--stor-warning) !important; }
+html[data-theme="dark"] [class~="border-amber-100"],
+html[data-theme="dark"] [class~="border-amber-200"],
+html[data-theme="dark"] [class~="border-amber-300"] { border-color: color-mix(in srgb, var(--stor-warning), transparent 35%) !important; }
+html[data-theme="dark"] [class~="bg-emerald-50"],
+html[data-theme="dark"] [class~="bg-emerald-100"],
+html[data-theme="dark"] [class~="bg-green-50"],
+html[data-theme="dark"] [class~="bg-green-100"] { background-color: var(--stor-positive-soft) !important; }
+html[data-theme="dark"] [class~="text-emerald-600"],
+html[data-theme="dark"] [class~="text-emerald-700"],
+html[data-theme="dark"] [class~="text-emerald-800"],
+html[data-theme="dark"] [class~="text-emerald-900"],
+html[data-theme="dark"] [class~="text-green-600"],
+html[data-theme="dark"] [class~="text-green-700"],
+html[data-theme="dark"] [class~="text-green-800"] { color: var(--stor-positive) !important; }
+html[data-theme="dark"] [class~="border-emerald-200"] { border-color: color-mix(in srgb, var(--stor-positive), transparent 35%) !important; }
+html[data-theme="dark"] [class~="bg-sky-50"],
+html[data-theme="dark"] [class~="bg-sky-50/60"],
+html[data-theme="dark"] [class~="bg-sky-100"],
+html[data-theme="dark"] [class~="bg-blue-50"],
+html[data-theme="dark"] [class~="bg-blue-100"] { background-color: var(--stor-info-soft) !important; }
+html[data-theme="dark"] [class~="text-sky-700"],
+html[data-theme="dark"] [class~="text-sky-800"],
+html[data-theme="dark"] [class~="text-sky-950"],
+html[data-theme="dark"] [class~="text-blue-600"],
+html[data-theme="dark"] [class~="text-blue-700"],
+html[data-theme="dark"] [class~="text-blue-800"] { color: var(--stor-info) !important; }
+html[data-theme="dark"] [class~="border-sky-200"] { border-color: var(--stor-info-border) !important; }
+@media print {
+    *, *::before, *::after {
+        color-scheme: light !important;
+        box-shadow: none !important;
+    }
+}
+/* Borderless surfaces: ordinary information stays on the canvas. */

package/src/styles/index.css

@@ -0,0 +1,13 @@
+/*
+ * The design system's stylesheet: fonts, design tokens, base styles, the dark-mode remap of literal
+ * palette classes, and the generic recipes (panel, page, metric, menu, sheet, tabs, drawer...).
+ * Import it once, after Tailwind:
+ *
+ *     @import 'tailwindcss' source('./');
+ *     @import '@hearthlog/ui/styles/index.css';
+ */
+@import './base.css';
+@import './recipes.css';
+
+/* The package's own components use Tailwind classes; scan them wherever the host's source root is. */
+@source '../';

package/src/styles/recipes.css

@@ -0,0 +1,174 @@
+@layer components {
+    .stor-page { display: flex; min-width: 0; flex-direction: column; gap: var(--stor-section-gap); }
+    .stor-panel, .stor-today-card { border: 0; border-radius: var(--stor-panel-radius); background: var(--stor-surface); box-shadow: var(--stor-elevation-1); }
+    .stor-panel { overflow: hidden; }
+    .stor-panel-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: var(--stor-panel-padding); background: transparent; }
+    .stor-panel-body { padding: var(--stor-panel-padding); }
+    .stor-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
+    .stor-metric { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
+    .stor-metric-label { font-size: 13px; font-weight: 500; color: var(--stor-muted-text); }
+    .stor-metric-value { font-size: 28px; line-height: 1.2; font-weight: 600; letter-spacing: -.025em; color: var(--stor-ink); overflow-wrap: anywhere; }
+    .stor-metric-support { font-size: 12px; line-height: 16px; color: var(--stor-muted-text); }
+    /* A currency or unit after a large figure: smaller and quieter than the number. */
+    .stor-unit { font-size: .6em; font-weight: 600; letter-spacing: 0; color: var(--stor-muted-text); }
+    /* Elevation recipes. A component picks a level, never its own shadow (see docs/design-concepts/depth-2026-10-04). */
+    .stor-well { background: var(--stor-surface-well); box-shadow: var(--stor-well-shadow); }
+    .stor-menu { background: var(--stor-surface-overlay); box-shadow: var(--stor-elevation-3); border-radius: 16px; }
+    .stor-sheet { background: var(--stor-surface-sheet); box-shadow: var(--stor-elevation-4); }
+    /* Buttons: the primary and destructive faces carry a soft top highlight; pressing sinks them. */
+    [data-stor-button-variant="default"], [data-stor-button-variant="destructive"] {
+        background-image: linear-gradient(180deg, rgb(255 255 255 / .14), rgb(255 255 255 / 0));
+        box-shadow: 0 0 0 1px rgb(0 0 0 / .1), 0 1px 2px rgb(0 0 0 / .16), 0 4px 10px -4px rgb(0 0 0 / .22), inset 0 1px 0 rgb(255 255 255 / .22);
+    }
+    [data-stor-button-variant="default"]:active, [data-stor-button-variant="destructive"]:active { box-shadow: 0 0 0 1px rgb(0 0 0 / .12), inset 0 1px 2px rgb(0 0 0 / .24); }
+    [data-stor-button-variant="secondary"]:active { box-shadow: var(--stor-elevation-pressed); }
+    .stor-page-header { min-width: 0; padding-bottom: 4px; }
+    .stor-page-header h1, .stor-health-header h1 { font-size: 24px; line-height: 1.2; }
+    /* Section pages let the navigation name the place: the title is read by
+       assistive tech and shown as a compact label on mobile only. */
+    .stor-page-title { margin-bottom: 12px; }
+    .stor-page-label { margin-bottom: 8px; font-size: 18px; font-weight: 600; letter-spacing: -.01em; color: var(--stor-ink); }
+    /* Serif titles: page and overlay titles only. Controls, data, and body copy stay in Inter.
+       A system serif (New York on Apple devices) keeps first paint free of an extra font. */
+    .stor-page-title, .stor-page-label, .stor-serif-title { font-family: var(--stor-font-serif); font-weight: 600; letter-spacing: -.012em; font-optical-sizing: auto; }
+    .stor-page-header-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
+    /* Tabs: one capsule track with a raised active pill. Page-level links use
+       .stor-primary-tabs; compact in-panel rows use .stor-section-tabs. */
+    .stor-page-tabs, .stor-primary-tabs, .stor-section-tabs { position: relative; gap: 2px; border-radius: 9999px; background: var(--stor-surface-well); padding: 3px; box-shadow: var(--stor-well-shadow); }
+    .stor-page-tab { display: inline-flex; min-height: 44px; align-items: center; justify-content: center; flex-shrink: 0; gap: 8px; border-radius: 9999px; padding: 8px 16px; color: var(--stor-muted-text); font-size: 13px; font-weight: 600; white-space: nowrap; transition: color 160ms ease, background-color 160ms ease, box-shadow 160ms ease; }
+    .stor-page-tab:hover { color: var(--stor-ink); background: var(--stor-surface-hover); }
+    .stor-page-tab:focus-visible { outline: 2px solid var(--stor-focus); outline-offset: 2px; }
+    .stor-page-tab:is([data-state="active"], [aria-selected="true"], [aria-current="page"], [aria-current="true"]) { color: var(--stor-accent-strong); }
+    /* The measured pill replaces the selected tab's own background so it can slide. */
+    .stor-tabs-sliding .stor-page-tab { position: relative; z-index: 1; }
+    .stor-tabs-sliding .stor-page-tab:is([data-state="active"], [aria-selected="true"], [aria-current="page"], [aria-current="true"]) { background: transparent; box-shadow: none; }
+    .stor-tab-indicator { position: absolute; top: 3px; bottom: 3px; left: 0; width: var(--stor-tab-w, 0px); border-radius: 9999px; opacity: 0; pointer-events: none; transform: translateX(var(--stor-tab-x, 0px)); }
+    .stor-tabs-sliding .stor-tab-indicator { opacity: 1; }
+    .stor-tabs-ready .stor-tab-indicator { transition: transform var(--stor-tab-motion), width var(--stor-tab-motion), opacity 160ms ease; }
+    .stor-primary-tabs { width: fit-content; max-width: 100%; }
+    .stor-primary-tabs .stor-page-tab { font-size: 14px; padding-inline: 18px; }
+    /* Five sections fit a phone's row without scrolling the last one out of sight. */
+    @media (max-width: 639px) { .stor-primary-tabs .stor-page-tab { padding-inline: 12px; } }
+    .stor-section-tabs { width: 100%; grid-template-columns: repeat(2, minmax(0, 1fr)); }
+    .stor-section-tabs .stor-page-tab { min-width: 0; padding: 8px 12px; }
+    .stor-tab-count { display: inline-flex; min-width: 24px; align-items: center; justify-content: center; border-radius: 999px; background: color-mix(in srgb, var(--stor-border) 50%, transparent); padding: 2px 6px; color: var(--stor-muted-text); font-size: 11px; font-variant-numeric: tabular-nums; line-height: 1.25; transition: background-color 160ms ease, color 160ms ease; }
+    .stor-page-tab:is([data-state="active"], [aria-selected="true"], [aria-current="page"], [aria-current="true"]) .stor-tab-count { background: var(--stor-accent-soft); color: var(--stor-accent-strong); }
+    @media (min-width: 640px) {
+        .stor-page-tab { min-height: 38px; padding-block: 7px; }
+        .stor-section-tabs { width: fit-content; grid-template-columns: repeat(2, minmax(140px, 1fr)); }
+    }
+    .stor-segmented-control { gap: 2px; border-radius: 9999px; background: var(--stor-surface-well); padding: 3px; box-shadow: var(--stor-well-shadow); }
+    .stor-segmented-option { min-height: 36px; border-radius: 9999px; padding-inline: 12px; color: var(--stor-muted-text); font-size: 12px; font-weight: 600; }
+    .stor-segmented-option[aria-pressed="true"], .stor-segmented-option[data-state="active"] { color: var(--stor-accent-strong); }
+    /* The selected pill: navigation, page tabs, segmented options and the sliding indicators. */
+    .stor-nav-selected, .stor-nav-indicator, .stor-tab-indicator,
+    .stor-page-tab:is([data-state="active"], [aria-selected="true"], [aria-current="page"], [aria-current="true"]),
+    .stor-segmented-option:is([aria-pressed="true"], [data-state="active"]) { background: var(--stor-surface-raised); box-shadow: var(--stor-elevation-2); }
+    .stor-nav-sliding .stor-nav-selected,
+    .stor-tabs-sliding .stor-page-tab:is([data-state="active"], [aria-selected="true"], [aria-current="page"], [aria-current="true"]) { background: transparent; box-shadow: none; }
+}
+
+.stor-drawer {
+    height: 100dvh; max-width: none; background: var(--stor-surface-sheet); box-shadow: var(--stor-elevation-4);
+    transition:
+        transform var(--stor-drawer-enter-motion),
+        opacity var(--stor-drawer-enter-fade);
+}
+
+.stor-drawer-overlay {
+    transition: opacity var(--stor-overlay-enter-fade);
+}
+
+@media (max-width: 639px) {
+    .stor-drawer-footer > div > button[data-stor-button-variant="default"]:last-child { flex: 1; }
+}
+
+/* First paint of a mounted drawer slides it in from just off the edge. */
+
+@starting-style {
+    .stor-drawer {
+        opacity: 0;
+        transform: translateX(var(--stor-drawer-shift));
+    }
+    .stor-drawer-overlay {
+        opacity: 0;
+    }
+}
+
+.stor-drawer[data-ending-style] {
+    opacity: 0;
+    transform: translateX(var(--stor-drawer-shift));
+    transition:
+        transform var(--stor-drawer-exit-motion),
+        opacity var(--stor-drawer-exit-fade);
+}
+
+.stor-drawer-overlay[data-ending-style] {
+    opacity: 0;
+    transition: opacity var(--stor-overlay-exit-fade);
+}
+
+.stor-drawer-grabber { display: none; }
+
+/* Phones: a drawer is a sheet from the bottom, sized to its content, with the page dimmed above it.
+   It rides on the keyboard (--stor-keyboard, set while open), and closes by its × or the dimmed page. */
+
+@media (max-width: 767px) {
+    .stor-drawer {
+        top: auto; bottom: var(--stor-keyboard, 0px); height: auto;
+        max-height: calc(100dvh - var(--stor-keyboard, 0px) - env(safe-area-inset-top) - 2.5rem);
+        padding-top: 0; border-radius: 24px 24px 0 0;
+        transition: transform var(--stor-drawer-enter-motion), opacity var(--stor-drawer-enter-fade), bottom 120ms ease-out;
+    }
+    .stor-drawer[data-ending-style] { transform: translateY(2rem); }
+    .stor-drawer-grabber { display: block; width: 38px; height: 5px; flex: none; margin: 8px auto 0; border-radius: 3px; background: var(--stor-border); }
+    .stor-drawer-header { padding-top: 6px; padding-bottom: 8px; }
+    .stor-drawer-body { flex: 0 1 auto; padding-top: 4px; }
+    .stor-drawer-footer { border-top: 0; padding-top: 4px; }
+    [data-drawer-cancel] { display: none; }
+}
+
+/* A sheet opened over another takes its place; the one below waits, hidden, for Back. */
+
+[data-sheet-covered] { visibility: hidden; }
+
+@media (max-width: 767px) {
+    @starting-style { .stor-drawer { transform: translateY(2rem); } }
+}
+
+@media (max-width: 1023px) {
+    body:has([data-stor-drawer]) .stor-notifications { z-index: 60; }
+}
+
+@media (max-width: 767px) {
+    .stor-page-label, .stor-sidebar-owned-tabs { display: none; }
+}
+
+@media (min-width: 1024px) {
+    /* Two-level sidebar: the expanded sidebar lists sub-pages and names the place, so page tab rows and labels step aside. */
+    html:not([data-sidebar-collapsed="true"]) .stor-sidebar-owned-tabs { display: none; }
+    html:not([data-sidebar-collapsed="true"]) .stor-page-label { display: none; }
+    .stor-page-header h1, .stor-health-header h1 { font-size: 28px; }
+    .stor-metric-value { font-size: 32px; }
+    .stor-drawer { top: 16px; right: 16px; height: calc(100dvh - 32px); max-width: 28rem; border-radius: 24px; overflow: hidden; padding-top: 0; }
+    .stor-drawer[data-size="lg"] { max-width: 36rem; }
+    body:has([data-stor-drawer]) .stor-notifications { right: calc(28rem + 32px); max-width: calc(100vw - 28rem - 48px); }
+    body:has([data-stor-drawer][data-size="lg"]) .stor-notifications { right: calc(36rem + 32px); max-width: calc(100vw - 36rem - 48px); }
+}
+
+@media (max-width: 639px) {
+    .stor-page-label { margin-bottom: 6px; }
+}
+
+.stor-refined .stor-segmented-option { min-height: 44px; }
+
+.stor-performance-chart .stor-panel-header { flex-wrap: wrap; align-items: flex-start; }
+
+/* Lists that select by press and hold: rows have no checkbox until selecting starts. */
+
+@media (max-width: 767px) {
+    [data-selecting="false"] [data-row-check] { display: none; }
+    [data-selecting="false"] [data-row-id] { --check: 0px; padding-left: 0.375rem; }
+    [data-selecting="true"] [data-row-id] { -webkit-user-select: none; user-select: none; }
+    [data-row-id] { -webkit-touch-callout: none; }
+}

package/src/utils/cn.ts

@@ -0,0 +1,6 @@
+import { clsx, type ClassValue } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+export function cn(...inputs: ClassValue[]) {
+    return twMerge(clsx(inputs));
+}