@hearthlog/ui 0.0.0-stage → 0.1.0

package/src/components/JsonViewer.svelte

@@ -0,0 +1,113 @@
+<script lang="ts">
+    import { onMount } from "svelte";
+    import { formatJson, scheduleJsonHighlight } from "./json-viewer.js";
+
+    let {
+        value,
+        label = "JSON",
+        maxHeight = "24rem",
+    }: {
+        value: unknown;
+        label?: string;
+        maxHeight?: string;
+    } = $props();
+
+    const formattedJson = $derived(formatJson(value));
+    const lineCount = $derived(formattedJson.split("\n").length);
+    const lineNumberWidth = $derived(
+        Math.max(2, String(lineCount).length) + 2,
+    );
+    const lineNumbers = $derived(
+        Array.from({ length: lineCount }, (_, index) => index + 1),
+    );
+
+    $effect(() => {
+        formattedJson;
+        scheduleJsonHighlight();
+    });
+
+    onMount(() => {
+        scheduleJsonHighlight();
+        return scheduleJsonHighlight;
+    });
+</script>
+
+<!-- svelte-ignore a11y_no_noninteractive_tabindex (Scrollable code must be keyboard accessible.) -->
+<div
+    class="json-viewer overflow-auto rounded-xl stor-well"
+    style:max-height={maxHeight}
+    role="region"
+    aria-label={label}
+    tabindex="0"
+    data-json-viewer
+>
+    <div class="json-code-shell">
+        <div
+            class="json-line-numbers py-3 font-mono text-[11px] leading-5 sm:text-xs"
+            style={`width: ${lineNumberWidth}ch`}
+            aria-hidden="true"
+        >{#each lineNumbers as lineNumber}<span class="json-line-number">{lineNumber}</span>{/each}</div>
+        <pre class="json-code min-w-max py-3 font-mono text-[11px] leading-5 sm:text-xs"><code class="language-json">{formattedJson}</code></pre>
+    </div>
+</div>
+
+<style>
+    .json-viewer {
+        color: var(--stor-ink);
+        scrollbar-color: var(--stor-field-border) var(--stor-surface-muted);
+    }
+
+    .json-viewer:focus-visible {
+        outline: 2px solid var(--stor-accent);
+        outline-offset: 2px;
+    }
+
+    .json-code-shell {
+        display: flex;
+        min-width: max-content;
+    }
+
+    .json-line-numbers {
+        position: sticky;
+        left: 0;
+        z-index: 1;
+        flex: 0 0 auto;
+        box-sizing: border-box;
+        border-right: 1px solid var(--stor-border);
+        background: var(--stor-surface-muted);
+        padding-right: 1.25ch;
+        color: var(--stor-muted-text);
+        text-align: right;
+        user-select: none;
+        white-space: pre;
+    }
+
+    .json-line-number {
+        display: block;
+    }
+
+    .json-code {
+        margin: 0;
+        padding-inline: 1rem;
+    }
+
+    :global(::highlight(key)) {
+        color: var(--stor-code-key);
+    }
+
+    :global(::highlight(string)) {
+        color: var(--stor-code-string);
+    }
+
+    :global(::highlight(numeric)) {
+        color: var(--stor-code-number);
+    }
+
+    :global(::highlight(boolean)) {
+        color: var(--stor-code-literal);
+    }
+
+    :global(::highlight(constant)) {
+        color: var(--stor-muted-text);
+    }
+</style>

package/src/components/Modal.svelte

@@ -0,0 +1,76 @@
+<script lang="ts">
+    import { Dialog } from "bits-ui";
+    import type { Snippet } from "svelte";
+    import IconClose from "~icons/mdi/close";
+    import { sheetStack } from "../state/sheet-stack.svelte.js";
+    import IconBack from "~icons/mdi/arrow-left";
+
+    let {
+        show = false,
+        title = "",
+        onClose = () => {},
+        children,
+    }: {
+        show?: boolean;
+        title?: string;
+        onClose?: () => void;
+        children: Snippet;
+    } = $props();
+
+    function handleOpenChange(open: boolean) {
+        if (!open && show) onClose();
+    }
+
+    // Phones: a sheet opened over another takes its place (see sheet-stack).
+    let sheetId = $state<number | null>(null);
+    $effect(() => {
+        if (!show) return;
+        const id = sheetStack.open(() => onClose());
+        sheetId = id;
+        return () => {
+            sheetStack.remove(id);
+            sheetId = null;
+        };
+    });
+    const covered = $derived(sheetStack.covered(sheetId));
+    const stacked = $derived(sheetStack.stacked(sheetId));
+
+</script>
+
+<Dialog.Root open={show} onOpenChange={handleOpenChange}>
+    <Dialog.Portal>
+        <Dialog.Overlay
+            data-sheet-covered={covered ? "" : undefined}
+            class="fixed inset-0 z-[var(--stor-layer-sheet)] bg-[var(--stor-overlay)]"
+        />
+        <Dialog.Content
+            data-sheet-covered={covered ? "" : undefined}
+            class="stor-sheet fixed inset-x-0 bottom-0 z-[var(--stor-layer-sheet-content)] flex max-h-[calc(100dvh-env(safe-area-inset-top))] w-full flex-col overflow-hidden rounded-t-3xl pt-[env(safe-area-inset-top)] outline-none sm:left-1/2 sm:top-1/2 sm:bottom-auto sm:max-h-[90vh] sm:max-w-lg sm:-translate-x-1/2 sm:-translate-y-1/2 sm:rounded-[var(--stor-panel-radius)] sm:pt-0"
+        >
+            <header class="flex items-center justify-between border-b border-[var(--stor-border)] px-4 py-3 sm:px-6 sm:py-4">
+                {#if stacked}
+                    <button
+                        type="button"
+                        class="-ml-2 mr-1 flex h-11 w-11 shrink-0 items-center justify-center rounded-xl text-[var(--stor-muted-text)] hover:bg-[var(--stor-surface-muted)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--stor-focus)]"
+                        aria-label="Back"
+                        onclick={() => onClose()}
+                    ><IconBack class="h-5 w-5" /></button>
+                {/if}
+                <Dialog.Title level={3} class="stor-serif-title text-xl text-[var(--stor-ink)]">
+                    {title}
+                </Dialog.Title>
+                <Dialog.Close
+                    class="ml-auto flex h-11 w-11 shrink-0 items-center justify-center rounded-xl text-[var(--stor-muted-text)] transition-colors hover:bg-[var(--stor-surface-muted)] hover:text-[var(--stor-ink)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--stor-focus)]"
+                    aria-label="Close dialog"
+                    onclick={(event) => { if (stacked) { event.preventDefault(); sheetStack.closeAll(); } }}
+                >
+                    <IconClose class="h-5 w-5" />
+                </Dialog.Close>
+            </header>
+
+            <div class="max-h-[calc(100dvh-4.5rem-env(safe-area-inset-top))] overflow-y-auto px-4 py-4 pb-[calc(1rem+env(safe-area-inset-bottom))] sm:max-h-[70vh] sm:px-6 sm:py-6">
+                {@render children()}
+            </div>
+        </Dialog.Content>
+    </Dialog.Portal>
+</Dialog.Root>

package/src/components/NotificationCenter.svelte

@@ -0,0 +1,106 @@
+<script lang="ts">
+    import { onDestroy } from "svelte";
+    import {
+        dismissNotification,
+        notificationState,
+        type AppNotification,
+    } from "../state/notifications.svelte.js";
+    import IconCheck from "~icons/mdi/check-circle-outline";
+    import IconAlert from "~icons/mdi/alert-circle-outline";
+    import IconInfo from "~icons/mdi/information-outline";
+    import IconLoading from "~icons/mdi/loading";
+    import IconClose from "~icons/mdi/close";
+
+    const timers = new Map<string, ReturnType<typeof setTimeout>>();
+
+    $effect(() => {
+        const ids = new Set(notificationState.items.map((item) => item.id));
+
+        for (const item of notificationState.items) {
+            // A non-positive duration marks a sticky notification that the
+            // caller dismisses explicitly when its task settles.
+            if (item.duration > 0 && !timers.has(item.id)) {
+                timers.set(
+                    item.id,
+                    setTimeout(() => {
+                        dismissNotification(item.id);
+                        timers.delete(item.id);
+                    }, item.duration),
+                );
+            }
+        }
+
+        for (const [id, timer] of timers) {
+            if (!ids.has(id)) {
+                clearTimeout(timer);
+                timers.delete(id);
+            }
+        }
+    });
+
+    onDestroy(() => {
+        for (const timer of timers.values()) clearTimeout(timer);
+        timers.clear();
+    });
+
+    function iconFor(item: AppNotification) {
+        if (item.type === "success") return IconCheck;
+        if (item.type === "error") return IconAlert;
+        if (item.type === "progress") return IconLoading;
+        return IconInfo;
+    }
+
+    async function runAction(item: AppNotification) {
+        dismissNotification(item.id);
+        await item.action?.run();
+    }
+</script>
+
+<div
+    class="stor-notifications pointer-events-none fixed inset-x-3 top-[calc(4rem+env(safe-area-inset-top))] z-[var(--stor-layer-toast)] flex flex-col items-end gap-2 md:left-[104px] md:top-[calc(1rem+env(safe-area-inset-top))] lg:bottom-5 lg:left-auto lg:right-5 lg:top-auto lg:w-[24rem]"
+    aria-live="polite"
+    aria-relevant="additions"
+>
+    {#each notificationState.items as item (item.id)}
+        {@const Icon = iconFor(item)}
+        <div
+            class="pointer-events-auto flex w-full items-start gap-3 rounded-xl border bg-[var(--stor-surface-overlay)] px-4 py-3 shadow-[var(--stor-elevation-3)] {item.type ===
+            'error'
+                ? 'border-red-200'
+                : item.type === 'success'
+                  ? 'border-emerald-200'
+                  : 'border-[var(--stor-border)]'}"
+            role={item.type === "error" ? "alert" : "status"}
+        >
+            <Icon
+                class="mt-0.5 h-5 w-5 shrink-0 {item.type === 'error'
+                    ? 'text-red-600'
+                    : item.type === 'success'
+                      ? 'text-emerald-600'
+                      : item.type === 'progress'
+                        ? 'animate-spin text-[var(--stor-accent-strong)]'
+                        : 'text-stone-600'}"
+            />
+            <div class="min-w-0 flex-1 text-sm font-medium text-stone-800">
+                {item.message}
+            </div>
+            {#if item.action}
+                <button
+                    type="button"
+                    class="shrink-0 text-sm font-semibold text-stone-950 underline decoration-stone-300 underline-offset-4 hover:decoration-stone-900"
+                    onclick={() => runAction(item)}
+                >
+                    {item.action.label}
+                </button>
+            {/if}
+            <button
+                type="button"
+                class="-mr-1 shrink-0 rounded-lg p-1 text-[var(--stor-muted-text)] hover:bg-[var(--stor-surface-muted)] hover:text-stone-700"
+                aria-label="Dismiss notification"
+                onclick={() => dismissNotification(item.id)}
+            >
+                <IconClose class="h-4 w-4" />
+            </button>
+        </div>
+    {/each}
+</div>

package/src/components/PageHeader.svelte

@@ -0,0 +1,26 @@
+<script lang="ts">
+    import type { Snippet } from "svelte";
+
+    let { title, showTitle = false, children, context, tabs, sidebarTabs = false, class: className = "" }: {
+        title: string;
+        /** The expanded desktop sidebar lists these sub-pages, so the tab row hides there. */
+        sidebarTabs?: boolean;
+        /** Detail pages name their subject, so the title stays visible. */
+        showTitle?: boolean;
+        children?: Snippet; context?: Snippet; tabs?: Snippet;
+        class?: string;
+    } = $props();
+</script>
+<header class="stor-page-header {className}" data-stor-drag>
+    {#if showTitle}
+        <h1 class="stor-page-title">{title}</h1>
+    {:else}
+        <h1 class="sr-only">{title}</h1>
+        <p class="stor-page-label" aria-hidden="true">{title}</p>
+    {/if}
+    <div class="stor-page-header-row">
+        {#if tabs}<div class="min-w-0 max-w-full {sidebarTabs ? 'stor-sidebar-owned-tabs' : ''}">{@render tabs()}</div>{/if}
+        {#if children}<div class="stor-toolbar ml-auto justify-end">{@render children()}</div>{/if}
+    </div>
+    {#if context}<div class={tabs ? 'mt-3' : ''}>{@render context()}</div>{/if}
+</header>

package/src/components/commands/CommandConfirmDialog.svelte

@@ -0,0 +1,32 @@
+<script lang="ts">
+    import ConfirmDialog from "../ConfirmDialog.svelte";
+    import CommandOnly from "./CommandOnly.svelte";
+
+    let {
+        show = false,
+        title = "Confirm Action",
+        message = "Are you sure you want to proceed?",
+        confirmLabel = "Confirm",
+        alternateLabel = "",
+        tone = "danger",
+        onConfirm = () => {},
+        onAlternate = () => {},
+        onCancel = () => {},
+    }: {
+        show?: boolean;
+        title?: string;
+        message?: string;
+        confirmLabel?: string;
+        alternateLabel?: string;
+        tone?: "danger" | "primary";
+        onConfirm?: () => unknown;
+        onAlternate?: () => unknown;
+        onCancel?: () => unknown;
+    } = $props();
+</script>
+
+<CommandOnly onUnavailable={() => {
+    if (show) void onCancel();
+}}>
+    <ConfirmDialog {show} {title} {message} {confirmLabel} {alternateLabel} {tone} {onConfirm} {onAlternate} {onCancel} />
+</CommandOnly>

package/src/components/commands/CommandDrawer.svelte

@@ -0,0 +1,31 @@
+<script lang="ts">
+    import type { Snippet } from "svelte";
+    import Drawer from "../Drawer.svelte";
+    import CommandOnly from "./CommandOnly.svelte";
+
+    let {
+        show = false,
+        title = "",
+        description = "",
+        size = "md",
+        onClose = () => {},
+        children,
+        footer,
+    }: {
+        show?: boolean;
+        title?: string;
+        description?: string;
+        size?: "md" | "lg";
+        onClose?: () => void;
+        children: Snippet;
+        footer?: Snippet;
+    } = $props();
+</script>
+
+<CommandOnly onUnavailable={() => {
+    if (show) onClose();
+}}>
+    <Drawer {show} {title} {description} {size} {onClose} {footer}>
+        {@render children()}
+    </Drawer>
+</CommandOnly>

package/src/components/commands/CommandFieldset.svelte

@@ -0,0 +1,18 @@
+<script lang="ts">
+    import type { Snippet } from "svelte";
+    import { currentPageResource } from "../../state/page-context.js";
+    const resource = currentPageResource();
+    import { commandAvailability } from "../../state/commands.js";
+
+    let {
+        children,
+        class: className = "contents",
+    }: {
+        children: Snippet;
+        class?: string;
+    } = $props();
+</script>
+
+<fieldset disabled={!$commandAvailability.available || resource?.().loading} class={className}>
+    {@render children()}
+</fieldset>

package/src/components/commands/CommandModal.svelte

@@ -0,0 +1,25 @@
+<script lang="ts">
+    import type { Snippet } from "svelte";
+    import Modal from "../Modal.svelte";
+    import CommandOnly from "./CommandOnly.svelte";
+
+    let {
+        show = false,
+        title = "",
+        onClose = () => {},
+        children,
+    }: {
+        show?: boolean;
+        title?: string;
+        onClose?: () => void;
+        children: Snippet;
+    } = $props();
+</script>
+
+<CommandOnly onUnavailable={() => {
+    if (show) onClose();
+}}>
+    <Modal {show} {title} {onClose}>
+        {@render children()}
+    </Modal>
+</CommandOnly>

package/src/components/commands/CommandOnly.svelte

@@ -0,0 +1,26 @@
+<script lang="ts">
+    import { untrack, type Snippet } from "svelte";
+    import { currentPageResource } from "../../state/page-context.js";
+    import { commandAvailability } from "../../state/commands.js";
+
+    let {
+        children,
+        onUnavailable,
+    }: {
+        children?: Snippet;
+        onUnavailable?: () => void;
+    } = $props();
+
+    const resource = currentPageResource();
+    const available = $derived($commandAvailability.available && !resource?.().loading);
+
+    $effect(() => {
+        if (!available) untrack(() => onUnavailable?.());
+    });
+</script>
+
+{#if children}
+    <fieldset class="contents" disabled={!available} inert={!available} aria-disabled={!available}>
+        {@render children()}
+    </fieldset>
+{/if}

package/src/components/data/DataPlaceholder.svelte

@@ -0,0 +1,8 @@
+<script lang="ts">
+    let { rows = 3, label = 'Loading data', compact = false }: { rows?: number; label?: string; compact?: boolean } = $props();
+</script>
+<div class="grid {compact ? 'gap-2' : 'gap-3 p-5'}" role="status" aria-label={label}>
+    {#each Array(rows) as _, i}
+        <div class="{compact ? 'h-5' : 'h-8'} rounded-lg bg-[var(--stor-surface-muted)] motion-safe:animate-pulse" style:width={`${100 - (i % 3) * 12}%`} aria-hidden="true"></div>
+    {/each}
+</div>

package/src/components/data/DataRegion.svelte

@@ -0,0 +1,8 @@
+<script lang="ts">
+    import type { Snippet } from 'svelte';
+    import { providePageResource } from '../../state/page-context.js';
+    let { loading, children }: { loading: boolean; children: Snippet } = $props();
+    providePageResource(() => ({ loading }));
+</script>
+
+{@render children()}

package/src/components/data/DataValue.svelte

@@ -0,0 +1,11 @@
+<script lang="ts">
+    import type { Snippet } from 'svelte';
+    import { currentPageResource } from '../../state/page-context.js';
+    let { children }: { children: Snippet } = $props();
+    const resource = currentPageResource();
+</script>
+{#if resource?.().loading}
+    <span class="inline-block h-[0.85em] min-w-[3ch] rounded bg-stone-200/70 align-baseline tabular-nums motion-safe:animate-pulse" aria-label="Loading value"><span class="sr-only">Loading</span>&nbsp;</span>
+{:else}
+    {@render children()}
+{/if}

package/src/components/data-table/DataTable.svelte

@@ -0,0 +1,139 @@
+<script lang="ts">
+    import { FlexRender } from "@tanstack/svelte-table";
+    import type { Snippet } from "svelte";
+    import EmptyState from "../EmptyState.svelte";
+    import { createAppTable } from "./table.js";
+    import type { DataTableProps } from "./types.js";
+    import {
+        fromTableSortingState,
+        toTablePaginationState,
+        toTableSortingState,
+    } from "./types.js";
+
+    let {
+        columns,
+        data,
+        pagination,
+        sorting = { id: null, desc: false },
+        onSortingChange,
+        isLoading = false,
+        emptyTitle = "No rows",
+        emptyDescription = "There is nothing to show.",
+        emptyContent,
+        variant = "default",
+        label,
+        rowClass,
+        testId = "data-table",
+        scrollTestId = "data-table-scroll",
+    }: DataTableProps = $props();
+
+    const table = createAppTable({
+        get columns() {
+            return columns;
+        },
+        get data() {
+            return data;
+        },
+        getRowId: (row) => String(row.id ?? ""),
+        get rowCount() {
+            return pagination.rowCount;
+        },
+        get state() {
+            return {
+                pagination: toTablePaginationState(pagination),
+                sorting: toTableSortingState(sorting),
+            };
+        },
+        onSortingChange: (updater) => {
+            const next = fromTableSortingState(
+                typeof updater === "function"
+                    ? updater(toTableSortingState(sorting))
+                    : updater,
+            );
+            const current = fromTableSortingState(toTableSortingState(sorting));
+            if (
+                next.id === current.id &&
+                (next.id === null || next.desc === current.desc)
+            ) {
+                return;
+            }
+            onSortingChange?.(next);
+        },
+        manualPagination: true,
+        manualSorting: true,
+        enableSortingRemoval: true,
+        enableMultiSort: false,
+        sortDescFirst: false,
+    });
+
+    const rows = $derived(table.getRowModel().rows);
+    const quiet = $derived(variant === "quiet");
+</script>
+
+{#snippet emptyFallback()}
+    {#if emptyContent}
+        {@render emptyContent()}
+    {:else}
+        <EmptyState title={emptyTitle} description={emptyDescription} surface={false} />
+    {/if}
+{/snippet}
+
+{#if isLoading && rows.length === 0}
+    <div class="p-4">
+        <div
+            class="grid gap-3 p-5"
+            role="status"
+            aria-label="Loading table rows"
+        >
+            {#each Array(5) as _, index (index)}
+                <div
+                    class="h-8 rounded-lg bg-[var(--stor-surface-muted)] motion-safe:animate-pulse"
+                    style:width={`${100 - (index % 3) * 12}%`}
+                    aria-hidden="true"
+                ></div>
+            {/each}
+        </div>
+    </div>
+{:else if rows.length === 0}
+    <div class="p-4">
+        {@render emptyFallback()}
+    </div>
+{:else}
+    <div class="max-w-full overflow-x-auto" data-testid={scrollTestId}>
+        <table
+            class="w-full border-collapse text-left text-sm {quiet ? '' : 'min-w-max'}"
+            data-testid={testId}
+            aria-label={label}
+        >
+            <thead>
+                {#each table.getHeaderGroups() as headerGroup (headerGroup.id)}
+                    <tr class={quiet ? "" : "bg-[var(--stor-surface-muted)]"}>
+                        {#each headerGroup.headers as header (header.id)}
+                            <th
+                                scope="col"
+                                class="px-3 align-bottom {quiet
+                                    ? 'pb-2 pt-0 text-xs'
+                                    : 'border-b border-[var(--stor-border)] py-2.5'} {header.column.columnDef.meta?.className ?? ''}"
+                            >
+                                {#if !header.isPlaceholder}
+                                    <FlexRender {header} />
+                                {/if}
+                            </th>
+                        {/each}
+                    </tr>
+                {/each}
+            </thead>
+            <tbody class={quiet ? "divide-y divide-[color-mix(in_srgb,var(--stor-border)_55%,transparent)]" : "divide-y divide-[var(--stor-border)]"}>
+                {#each rows as row (row.id)}
+                    <tr class="align-middle transition-colors hover:bg-[var(--stor-surface-muted)]/70 {rowClass ? rowClass(row.original) : ''}">
+                        {#each row.getAllCells() as cell (cell.id)}
+                            <td class="max-w-[36rem] px-3 {quiet ? 'h-14' : 'py-2.5'} {cell.column.columnDef.meta?.className ?? ''}">
+                                <FlexRender {cell} />
+                            </td>
+                        {/each}
+                    </tr>
+                {/each}
+            </tbody>
+        </table>
+    </div>
+{/if}