@hearthlog/shell 0.0.0-stage → 0.1.1

package/src/components/history/LogMap.svelte

@@ -0,0 +1,293 @@
+<script lang="ts">
+    import type { LogSummary } from '@hearthlog/runtime/ledger/index.js';
+    import type { HistoryPoint } from '@hearthlog/runtime/history/contracts.js';
+    import type { LogNode } from '@hearthlog/runtime/history/lineage.js';
+    import { logMap, type MapSpan } from '@hearthlog/runtime/history/log-map.js';
+    import { formatForkPoint } from '@hearthlog/runtime/history/log-format.js';
+
+    let {
+        nodes,
+        logs,
+        currentLogId,
+        points = [],
+        span,
+        openActionId = null,
+        range = null,
+        disabled = false,
+        onOpen,
+        onPick,
+        onReveal,
+    }: {
+        /** Shown logs in tree order. */
+        nodes: LogNode[];
+        /** Every log, to place copied actions on the source's line even past hidden logs. */
+        logs: LogSummary[];
+        currentLogId: string | null;
+        /** The current log's actions within the map. */
+        points?: HistoryPoint[];
+        /** The time the map covers. */
+        span: MapSpan;
+        /** The action open in the list. */
+        openActionId?: string | null;
+        /** The time span of the actions on screen in the list below. */
+        range?: { from: number; to: number } | null;
+        disabled?: boolean;
+        /** Open another log. */
+        onOpen: (logId: string) => void;
+        /** Open an action in the list. */
+        onPick: (actionId: string) => void;
+        /** Scroll the list to an action without opening it. */
+        onReveal: (actionId: string) => void;
+    } = $props();
+
+    // One clock per panel visit; the map does not need to tick.
+    const now = Date.now();
+    const model = $derived(logMap(nodes, { currentLogId, now, span }));
+    const currentRow = $derived(model.rows.find(row => row.node.log.id === currentLogId) ?? null);
+
+    /** Each action on the line of the log it was made in: copied ones on their source's line. */
+    const marks = $derived.by(() => {
+        if (!currentRow) return [];
+        const byId = new Map(logs.map(log => [log.id, log]));
+        const rowY = new Map(model.rows.map(row => [row.node.log.id, row.y]));
+        return points.map(point => {
+            let log = byId.get(currentLogId ?? '');
+            let y = currentRow.y;
+            while (log?.sourceLogId && point.version !== null && point.version <= (log.sourceVersion ?? 0)) {
+                log = byId.get(log.sourceLogId);
+                const shown = log ? rowY.get(log.id) : undefined;
+                if (shown !== undefined) y = shown;
+            }
+            return { ...point, x: model.x(point.timestamp), y, copied: y !== currentRow.y };
+        });
+    });
+
+    const bracket = $derived.by(() => {
+        if (!currentRow || !range) return null;
+        const from = model.x(range.from) - 4;
+        const to = model.x(range.to) + 4;
+        return { x: from, width: Math.max(8, to - from) };
+    });
+
+    let svg = $state<SVGSVGElement | null>(null);
+    let box = $state<HTMLDivElement | null>(null);
+    let hover = $state<(typeof marks)[number] | null>(null);
+    let scrubbing = $state(false);
+    let pressed: string | null = null;
+    let suppressOpen = false;
+    let frame = 0;
+
+    function path(row: (typeof model.rows)[number]): string {
+        if (!row.fork) return `M${row.x0} ${row.y} H${row.x1}`;
+        const bend = Math.min(6, row.y - row.fork.y);
+        return `M${row.fork.x} ${row.fork.y} V${row.y - bend} Q${row.fork.x} ${row.y} ${row.fork.x + bend} ${row.y} H${Math.max(row.x1, row.fork.x + bend)}`;
+    }
+
+    function openable(node: LogNode): boolean {
+        return node.log.id !== currentLogId && node.log.status !== 'preparing';
+    }
+
+    /** The pointer in map units. */
+    function local(event: PointerEvent): { x: number; y: number } | null {
+        const rect = svg?.getBoundingClientRect();
+        if (!rect || rect.width === 0) return null;
+        return {
+            x: ((event.clientX - rect.left) / rect.width) * model.width,
+            y: ((event.clientY - rect.top) / rect.height) * model.height,
+        };
+    }
+
+    /** The mark under the pointer, if one is close enough to aim at. */
+    function markAt(at: { x: number; y: number }, reach: number) {
+        let best: (typeof marks)[number] | null = null;
+        let distance = reach * reach;
+        // Marks come newest first; within a stack the newest answers unless another is clearly closer.
+        for (const mark of marks) {
+            const d = (mark.x - at.x) ** 2 + ((mark.y - at.y) * 1.5) ** 2;
+            if (best ? d < distance - 1 : d <= distance) { best = mark; distance = d; }
+        }
+        return best;
+    }
+
+    /** The action closest in time to a place on the axis. */
+    function nearestInTime(x: number) {
+        let best: (typeof marks)[number] | null = null;
+        for (const mark of marks) if (!best || Math.abs(mark.x - x) < Math.abs(best.x - x)) best = mark;
+        return best;
+    }
+
+    function scrubTo(x: number): void {
+        if (frame) cancelAnimationFrame(frame);
+        frame = requestAnimationFrame(() => {
+            frame = 0;
+            const mark = nearestInTime(x);
+            if (mark) { hover = mark; onReveal(mark.id); }
+        });
+    }
+
+    function reach(event: PointerEvent): number {
+        return event.pointerType === 'touch' ? 16 : 9;
+    }
+
+    function pointerdown(event: PointerEvent): void {
+        const at = local(event);
+        if (!at || disabled || event.button !== 0) return;
+        const mark = markAt(at, reach(event));
+        if (mark) {
+            pressed = mark.id;
+            suppressOpen = true;
+            return;
+        }
+        suppressOpen = false;
+        if ((event.target as Element | null)?.closest('[data-log]')) return;
+        scrubbing = true;
+        svg?.setPointerCapture(event.pointerId);
+        scrubTo(at.x);
+    }
+
+    function pointermove(event: PointerEvent): void {
+        const at = local(event);
+        if (!at) return;
+        if (scrubbing) { scrubTo(at.x); return; }
+        hover = markAt(at, reach(event));
+    }
+
+    function pointerup(event: PointerEvent): void {
+        const at = local(event);
+        if (pressed && at && markAt(at, reach(event))?.id === pressed) onPick(pressed);
+        pressed = null;
+        if (scrubbing) {
+            scrubbing = false;
+            if (svg?.hasPointerCapture(event.pointerId)) svg.releasePointerCapture(event.pointerId);
+        }
+    }
+
+    function openLog(logId: string): void {
+        if (suppressOpen) { suppressOpen = false; return; }
+        if (!disabled) onOpen(logId);
+    }
+
+    function keydown(event: KeyboardEvent, node: LogNode): void {
+        if (event.key !== 'Enter' && event.key !== ' ') return;
+        event.preventDefault();
+        if (openable(node) && !disabled) onOpen(node.log.id);
+    }
+
+    // The wheel over the map scrolls the list, as a minimap does.
+    $effect(() => {
+        const element = box;
+        if (!element) return;
+        const wheel = (event: WheelEvent) => {
+            const body = element.closest('[data-stor-drawer]')?.querySelector<HTMLElement>('.stor-drawer-body');
+            if (!body) return;
+            event.preventDefault();
+            body.scrollBy({ top: event.deltaY + event.deltaX });
+        };
+        element.addEventListener('wheel', wheel, { passive: false });
+        return () => element.removeEventListener('wheel', wheel);
+    });
+
+    $effect(() => () => { if (frame) cancelAnimationFrame(frame); });
+
+    /** Other actions drawn on the same spot, which the label can only count. */
+    const nearby = $derived(hover ? marks.filter(mark => mark.id !== hover!.id && mark.y === hover!.y && Math.abs(mark.x - hover!.x) < 2.5).length : 0);
+
+    const tooltip = $derived(hover ? {
+        left: (hover.x / model.width) * 100,
+        top: (hover.y / model.height) * 100,
+        shift: hover.x < model.width * 0.25 ? '-8px' : hover.x > model.width * 0.75 ? 'calc(-100% + 8px)' : '-50%',
+    } : null);
+</script>
+
+<div bind:this={box} class="log-map rounded-2xl bg-[var(--stor-surface-muted)] px-1.5 pt-0.5">
+    <div class="relative">
+        <svg
+            bind:this={svg}
+            viewBox="0 0 {model.width} {model.height}"
+            class="block w-full touch-none select-none {scrubbing ? 'cursor-grabbing' : hover ? 'cursor-pointer' : 'cursor-ew-resize'}"
+            role="group"
+            aria-label="Map of your logs over time. Drag along it to move through the list."
+            onpointerdown={pointerdown}
+            onpointermove={pointermove}
+            onpointerup={pointerup}
+            onpointercancel={pointerup}
+            onpointerleave={() => { if (!scrubbing) hover = null; }}
+        >
+            <line class="axis" x1="8" x2={model.width - 8} y1={model.axisY} y2={model.axisY} />
+            {#each model.ticks as tick (tick.label + tick.x)}
+                <text class="tick" x={tick.x} y={model.axisY + 11} text-anchor={tick.anchor}>{tick.label}</text>
+            {/each}
+            {#if bracket}
+                <rect class="range" x={bracket.x} y="4" width={bracket.width} height={model.axisY - 4} rx="5" />
+            {/if}
+            {#each model.rows as row (row.node.log.id)}
+                {@const log = row.node.log}
+                {@const current = log.id === currentLogId}
+                {#if row.clipped}
+                    <line class="lead-in" x1="2" x2={row.x0 + 10} y1={row.y} y2={row.y} />
+                {/if}
+                {#if openable(row.node)}
+                    <g
+                        class="log"
+                        class:hidden-log={Boolean(log.hiddenAt)}
+                        data-log={log.id}
+                        role="button"
+                        tabindex="0"
+                        aria-label={`Open ${log.name}`}
+                        aria-disabled={disabled}
+                        onclick={() => openLog(log.id)}
+                        onkeydown={(event) => keydown(event, row.node)}
+                    >
+                        <path class="hit" d={path(row)} />
+                        <path class="line" d={path(row)} />
+                        <text class="name" x={row.label.x} y={row.y - 6} text-anchor={row.label.anchor}>{log.name}</text>
+                    </g>
+                {:else}
+                    <g class="log" class:current class:preparing={log.status === 'preparing'} aria-hidden="true">
+                        <path class="line" d={path(row)} />
+                        <text class="name" x={row.label.x} y={row.y - 6} text-anchor={row.label.anchor}>{log.name}{log.status === 'preparing' ? ' · preparing' : ''}</text>
+                    </g>
+                {/if}
+            {/each}
+            <g aria-hidden="true">
+                {#each marks as mark (mark.id)}
+                    <circle class="mark" class:copied={mark.copied} cx={mark.x} cy={mark.y} r="2.3" />
+                {/each}
+                {#each marks.filter(mark => mark.id === openActionId || mark.id === hover?.id) as mark (mark.id)}
+                    <circle class="mark-on" cx={mark.x} cy={mark.y} r="4.2" />
+                {/each}
+            </g>
+        </svg>
+        {#if hover && tooltip}
+            <div
+                class="pointer-events-none absolute z-10 w-max max-w-[16rem] rounded-lg bg-[var(--stor-ink)] px-2 py-1 text-xs leading-snug text-[var(--stor-surface)] shadow-[var(--stor-shadow-md)]"
+                style="left: {tooltip.left}%; top: {tooltip.top}%; transform: translate({tooltip.shift}, calc(-100% - 8px));"
+                aria-hidden="true"
+            >
+                <span class="block truncate font-semibold">{hover.label}</span>
+                <span class="block whitespace-nowrap opacity-75">{formatForkPoint(hover.timestamp)}{hover.copied ? ' · copied' : ''}{nearby ? ` · +${nearby} nearby` : ''}</span>
+            </div>
+        {/if}
+    </div>
+</div>
+
+<style>
+    .axis { stroke: var(--stor-border); stroke-width: 1; }
+    .tick { font-size: 9.5px; fill: var(--stor-muted-text); }
+    .line { fill: none; stroke: color-mix(in srgb, var(--stor-muted-text) 75%, transparent); stroke-width: 2; stroke-linecap: round; }
+    .hit { fill: none; stroke: transparent; stroke-width: 12; }
+    .name { font-size: 10.5px; font-weight: 550; fill: var(--stor-muted-text); }
+    .log[role='button'] { cursor: pointer; outline: none; }
+    .log[role='button']:hover .line, .log[role='button']:focus-visible .line { stroke: var(--stor-ink); }
+    .log[role='button']:hover .name, .log[role='button']:focus-visible .name { fill: var(--stor-ink); }
+    .log[role='button']:focus-visible .hit { stroke: color-mix(in srgb, var(--stor-focus) 22%, transparent); }
+    .current .line { stroke: var(--stor-ink); stroke-width: 3; }
+    .current .name { fill: var(--stor-ink); font-weight: 700; }
+    .preparing .line { stroke-dasharray: 3 4; }
+    .hidden-log { opacity: 0.55; }
+    .lead-in { stroke: color-mix(in srgb, var(--stor-muted-text) 60%, transparent); stroke-width: 2; stroke-dasharray: 2 3; }
+    .mark { fill: var(--stor-ink); stroke: var(--stor-surface-muted); stroke-width: 1.2; pointer-events: none; }
+    .mark.copied { fill: var(--stor-muted-text); }
+    .mark-on { fill: var(--stor-surface); stroke: var(--stor-ink); stroke-width: 2; pointer-events: none; }
+    .range { fill: color-mix(in srgb, var(--stor-ink) 7%, transparent); stroke: color-mix(in srgb, var(--stor-ink) 30%, transparent); stroke-width: 1; pointer-events: none; }
+</style>

package/src/components/history/LogTree.svelte

@@ -0,0 +1,124 @@
+<script lang="ts">
+    import type { LogNode } from '@hearthlog/runtime/history/lineage.js';
+    import { ownChanges } from '@hearthlog/runtime/history/lineage.js';
+    import { formatLogDay } from '@hearthlog/runtime/history/log-format.js';
+    import { formatNumber } from '@hearthlog/ui/utils/number-format.js';
+    import IconCheck from '~icons/mdi/check';
+    import IconEyeOff from '~icons/mdi/eye-off-outline';
+    import IconEye from '~icons/mdi/eye-outline';
+
+    let {
+        nodes,
+        currentLogId,
+        switchingLogId = null,
+        busyLogId = null,
+        hideDisabledReason,
+        onOpen,
+        onHide,
+    }: {
+        nodes: LogNode[];
+        currentLogId: string | null;
+        switchingLogId?: string | null;
+        busyLogId?: string | null;
+        /** Why hiding is unavailable, such as being offline. */
+        hideDisabledReason?: string;
+        onOpen: (logId: string) => void;
+        onHide: (logId: string, hidden: boolean) => void;
+    } = $props();
+
+    // From the fourth level down, logs stop indenting; their meta line names the source.
+    const FLAT_DEPTH = 3;
+
+    function meta(node: LogNode): string {
+        const log = node.log;
+        const parts: string[] = [];
+        if (log.hiddenAt) parts.push('Hidden');
+        if (log.sourceLogId) {
+            parts.push(`from ${log.sourceLogName ?? 'another log'}`);
+            const forked = formatLogDay(log.sourceTimestamp ?? log.createdAt);
+            if (forked) parts.push(forked);
+            if (log.status === 'preparing') {
+                parts.push('preparing its files');
+            } else {
+                const own = ownChanges(log);
+                parts.push(own === 0 ? 'no changes of its own' : `${formatNumber(own)} own ${own === 1 ? 'change' : 'changes'}`);
+                if (own > 0 && log.lastUpdatedAt) parts.push(formatLogDay(log.lastUpdatedAt));
+            }
+        } else if (log.headVersion === 0) {
+            parts.push('Empty');
+            const created = formatLogDay(log.createdAt);
+            if (created) parts.push(`created ${created}`);
+        } else {
+            parts.push(`${formatNumber(log.headVersion)} ${log.headVersion === 1 ? 'change' : 'changes'}`);
+            if (log.lastUpdatedAt) parts.push(`last change ${formatLogDay(log.lastUpdatedAt)}`);
+        }
+        return parts.join(' · ');
+    }
+</script>
+
+{#snippet branch(items: LogNode[], depth: number)}
+    <ul class="log-tree" class:nested={depth > 0 && depth <= FLAT_DEPTH}>
+        {#each items as node (node.log.id)}
+            {@const log = node.log}
+            {@const current = log.id === currentLogId}
+            <li>
+                <div class="flex items-start gap-1">
+                    <button
+                        type="button"
+                        class="flex min-h-12 min-w-0 flex-1 items-start gap-3 rounded-xl px-3 py-2 text-left transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--stor-focus)] disabled:cursor-default {current
+                            ? 'bg-[var(--stor-surface-raised)] shadow-[0_0_0_1px_color-mix(in_srgb,var(--stor-border)_70%,transparent),0_1px_3px_rgb(16_42_67/0.07)]'
+                            : 'hover:bg-[var(--stor-surface-hover)]'} {log.hiddenAt ? 'opacity-70' : ''}"
+                        aria-current={current ? 'true' : undefined}
+                        aria-label={current ? `${log.name}, current log` : log.status === 'preparing' ? `${log.name}, preparing` : `Open ${log.name}`}
+                        disabled={current || log.status === 'preparing' || switchingLogId !== null}
+                        onclick={() => onOpen(log.id)}
+                    >
+                        <span class="min-w-0 flex-1">
+                            <span class="block break-words text-sm font-semibold text-[var(--stor-ink)]">{log.name}</span>
+                            <span class="mt-0.5 block break-words text-xs text-[var(--stor-muted-text)]">{meta(node)}</span>
+                        </span>
+                        {#if current}
+                            <span class="mt-0.5 flex shrink-0 items-center gap-1 text-xs font-semibold text-[var(--stor-ink)]"><IconCheck class="h-4 w-4" />Current</span>
+                        {:else if log.status === 'preparing'}
+                            <span class="mt-0.5 shrink-0 rounded-full bg-[var(--stor-info-soft)] px-2 py-0.5 text-xs font-medium text-[var(--stor-info)]">Preparing</span>
+                        {:else if switchingLogId === log.id}
+                            <span class="mt-0.5 shrink-0 text-xs text-[var(--stor-muted-text)]" role="status">Opening…</span>
+                        {/if}
+                    </button>
+                    {#if !current && log.status !== 'preparing'}
+                        <button
+                            type="button"
+                            class="flex h-11 w-11 shrink-0 items-center justify-center rounded-xl text-[var(--stor-muted-text)] 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)] disabled:opacity-40 sm:h-9 sm:w-9"
+                            aria-label={log.hiddenAt ? `Show ${log.name}` : `Hide ${log.name}`}
+                            title={hideDisabledReason ?? (log.hiddenAt ? 'Show in the tree' : 'Hide from the tree')}
+                            disabled={Boolean(hideDisabledReason) || busyLogId !== null}
+                            onclick={() => onHide(log.id, !log.hiddenAt)}
+                        >
+                            {#if log.hiddenAt}<IconEye class="h-4 w-4" />{:else}<IconEyeOff class="h-4 w-4" />{/if}
+                        </button>
+                    {/if}
+                </div>
+                {#if node.children.length > 0}
+                    {@render branch(node.children, depth + 1)}
+                {/if}
+            </li>
+        {/each}
+    </ul>
+{/snippet}
+
+<nav aria-label="Your logs">
+    {@render branch(nodes, 0)}
+</nav>
+
+<style>
+    .log-tree { display: flex; flex-direction: column; gap: 2px; margin: 0; padding: 0; list-style: none; }
+    .log-tree.nested { position: relative; margin-top: 2px; padding-left: 22px; }
+    .log-tree.nested > li { position: relative; }
+    /* An elbow from the parent's line to each fork, and the line on to later siblings. */
+    .log-tree.nested > li::before {
+        content: ''; position: absolute; left: -12px; top: 0; width: 10px; height: 26px;
+        border-left: 1.5px solid var(--stor-border); border-bottom: 1.5px solid var(--stor-border); border-bottom-left-radius: 8px;
+    }
+    .log-tree.nested > li::after { content: ''; position: absolute; left: -12px; top: 0; bottom: 0; border-left: 1.5px solid var(--stor-border); }
+    .log-tree.nested > li:last-child::after { display: none; }
+</style>

package/src/components/layout/AccountMenu.svelte

@@ -0,0 +1,111 @@
+<script lang="ts">
+    import { Popover } from 'bits-ui';
+    import type { Component } from 'svelte';
+    import { ACCESS_LOGOUT_ENDPOINT, LOCAL_USER_EMAIL } from '@hearthlog/runtime/access/user-session.js';
+    import { beginAccessLogout } from '@hearthlog/runtime/access/session.js';
+    import Tooltip from '@hearthlog/ui/components/ui/Tooltip.svelte';
+    import AppearanceOptions from './AppearanceOptions.svelte';
+    import IconDots from '~icons/mdi/dots-vertical';
+    import IconLogout from '~icons/mdi/logout';
+
+    interface SettingsLink {
+        path: string;
+        label: string;
+        subtitle: string;
+        icon: Component;
+    }
+
+    let {
+        userEmail,
+        settings,
+        collapsed = false,
+        isActive,
+    }: {
+        userEmail: string;
+        settings: SettingsLink[];
+        collapsed?: boolean;
+        isActive: (path: string) => boolean;
+    } = $props();
+
+    let open = $state(false);
+    const initial = $derived((userEmail || '?').trim().charAt(0).toUpperCase());
+    const canLogOut = $derived(Boolean(userEmail) && userEmail !== LOCAL_USER_EMAIL);
+
+    function logout(event: MouseEvent): void {
+        // Full document navigation through Access so the edge clears the session.
+        event.preventDefault();
+        open = false;
+        beginAccessLogout('/');
+    }
+</script>
+
+{#snippet accountTrigger(tip: Record<string, unknown> = {})}
+    <Popover.Trigger
+        {...tip}
+        class="group flex items-center rounded-xl text-left transition hover:bg-[color-mix(in_srgb,var(--stor-ink),transparent_95%)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--stor-focus)] {collapsed ? 'mx-auto h-11 w-11 justify-center' : 'w-full gap-2.5 p-1.5'}"
+        aria-label={`Account and settings, ${userEmail}`}
+        data-testid={collapsed ? 'account-menu-collapsed' : 'account-menu'}
+    >
+        <span class="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-[linear-gradient(140deg,var(--stor-accent-soft),color-mix(in_srgb,var(--stor-accent),var(--stor-surface)_72%))] text-xs font-bold text-[var(--stor-accent-strong)]" aria-hidden="true">{initial}</span>
+        {#if !collapsed}
+            <span class="min-w-0 flex-1 truncate text-xs font-semibold text-[var(--stor-ink)]">{userEmail}</span>
+            <IconDots class="h-4 w-4 shrink-0 text-[var(--stor-muted-text)]" />
+        {/if}
+    </Popover.Trigger>
+{/snippet}
+
+<Popover.Root bind:open>
+    {#if collapsed}
+        <!-- The rail has no label, so the avatar names itself in a tooltip. -->
+        <Tooltip content={`${userEmail} · Settings and appearance`} side="right" delayDuration={150}>
+            {#snippet trigger({ props })}{@render accountTrigger(props)}{/snippet}
+        </Tooltip>
+    {:else}
+        {@render accountTrigger()}
+    {/if}
+    <Popover.Portal>
+        <Popover.Content
+            side={collapsed ? 'right' : 'top'}
+            align={collapsed ? 'end' : 'start'}
+            sideOffset={10}
+            class="stor-menu z-[var(--stor-layer-menu)] w-72 p-2 outline-none"
+        >
+            <div class="flex items-center gap-2.5 px-2 pb-2 pt-1">
+                <span class="flex h-9 w-9 shrink-0 items-center justify-center rounded-full bg-[var(--stor-accent-soft)] text-sm font-bold text-[var(--stor-accent-strong)]" aria-hidden="true">{initial}</span>
+                <span class="min-w-0 truncate text-sm font-semibold text-[var(--stor-ink)]" data-testid="current-user-email">{userEmail}</span>
+            </div>
+            <h2 class="px-2 pb-1.5 pt-2 text-[10.5px] font-semibold uppercase tracking-[0.1em] text-[var(--stor-muted-text)]">Appearance</h2>
+            <AppearanceOptions compact />
+            {#if settings.length}
+                <h2 class="px-2 pb-1 pt-3 text-[10.5px] font-semibold uppercase tracking-[0.1em] text-[var(--stor-muted-text)]">Settings</h2>
+                {#each settings as link}
+                    {@const Icon = link.icon}
+                    <a
+                        href={link.path}
+                        class="flex items-center gap-2.5 rounded-xl p-2 transition hover:bg-[var(--stor-surface-hover)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--stor-focus)]"
+                        aria-current={isActive(link.path) ? 'page' : undefined}
+                        onclick={() => (open = false)}
+                    >
+                        <span class="flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-[var(--stor-surface-muted)] text-[var(--stor-muted-text)]"><Icon class="h-4 w-4" /></span>
+                        <span class="min-w-0">
+                            <span class="block text-sm font-semibold text-[var(--stor-ink)]">{link.label}</span>
+                            <span class="block truncate text-xs text-[var(--stor-muted-text)]">{link.subtitle}</span>
+                        </span>
+                    </a>
+                {/each}
+            {/if}
+            {#if canLogOut}
+                <div class="mx-1 my-2 h-px bg-[var(--stor-border)]"></div>
+                <a
+                    href={ACCESS_LOGOUT_ENDPOINT}
+                    onclick={logout}
+                    class="flex items-center gap-2.5 rounded-xl p-2 text-sm font-semibold 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)]"
+                    data-testid="logout-link"
+                >
+                    <span class="flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-[var(--stor-surface-muted)] text-[var(--stor-muted-text)]"><IconLogout class="h-4 w-4" /></span>
+                    Log out
+                </a>
+            {/if}
+        </Popover.Content>
+    </Popover.Portal>
+</Popover.Root>

package/src/components/layout/AppearanceOptions.svelte

@@ -0,0 +1,78 @@
+<script lang="ts">
+    import { appearance } from "@hearthlog/runtime/theme/appearance.svelte.js";
+    import type { ThemePreference } from "@hearthlog/contracts/tenant/theme";
+    import IconDesktop from "~icons/mdi/monitor";
+    import IconLight from "~icons/mdi/white-balance-sunny";
+    import IconDark from "~icons/mdi/weather-night";
+
+    let { compact = false }: { compact?: boolean } = $props();
+
+    const options: {
+        value: ThemePreference;
+        label: string;
+        description: string;
+        icon: typeof IconDesktop;
+    }[] = [
+        { value: "system", label: "System", description: "Match this device", icon: IconDesktop },
+        { value: "light", label: "Light", description: "Always use light mode", icon: IconLight },
+        { value: "dark", label: "Dark", description: "Always use dark mode", icon: IconDark },
+    ];
+</script>
+
+{#if compact}
+<fieldset class="grid grid-cols-3 gap-1 rounded-xl bg-[var(--stor-surface-muted)] p-1" aria-label="Appearance">
+    <legend class="sr-only">Appearance</legend>
+    {#each options as option}
+        {@const Icon = option.icon}
+        {@const selected = appearance.preference === option.value}
+        <label
+            class="flex min-h-11 cursor-pointer flex-col items-center justify-center gap-1 rounded-lg px-1 py-1.5 text-xs font-semibold transition has-[:focus-visible]:ring-2 has-[:focus-visible]:ring-[var(--stor-focus)] sm:min-h-14 {selected
+                ? 'bg-[var(--stor-surface-raised)] text-[var(--stor-ink)] shadow-[var(--stor-shadow-sm)]'
+                : 'text-[var(--stor-muted-text)] hover:text-[var(--stor-ink)]'}"
+        >
+            <input
+                class="sr-only"
+                type="radio"
+                name="stor-appearance-compact"
+                value={option.value}
+                checked={selected}
+                onchange={() => appearance.setPreference(option.value)}
+            />
+            <Icon class="h-4 w-4" />
+            <span>{option.label}</span>
+        </label>
+    {/each}
+</fieldset>
+{:else}
+<fieldset class="grid gap-1" aria-label="Appearance">
+    <legend class="sr-only">Appearance</legend>
+    {#each options as option}
+        {@const Icon = option.icon}
+        <label
+            class="flex min-h-11 cursor-pointer items-center gap-3 rounded-lg px-2.5 py-2 text-left transition hover:bg-[var(--stor-surface-hover)]"
+            class:bg-[var(--stor-selected)]={appearance.preference === option.value}
+        >
+            <input
+                class="sr-only"
+                type="radio"
+                name="stor-appearance"
+                value={option.value}
+                checked={appearance.preference === option.value}
+                onchange={() => appearance.setPreference(option.value)}
+            />
+            <span class="flex h-8 w-8 shrink-0 items-center justify-center rounded-lg bg-[var(--stor-surface-raised)] text-[var(--stor-accent-strong)] ring-1 ring-[var(--stor-border)]">
+                <Icon class="h-4 w-4" />
+            </span>
+            <span class="min-w-0">
+                <span class="block text-sm font-semibold text-[var(--stor-ink)]">{option.label}</span>
+                <span class="block text-xs text-[var(--stor-muted-text)]">{option.description}</span>
+            </span>
+            <span
+                class="ml-auto h-2.5 w-2.5 rounded-full border border-[var(--stor-field-border)]"
+                class:bg-[var(--stor-action)]={appearance.preference === option.value}
+                aria-hidden="true"
+            ></span>
+        </label>
+    {/each}
+</fieldset>
+{/if}

package/src/components/layout/BrandWordmark.svelte

@@ -0,0 +1,12 @@
+<script lang="ts">
+    import { wordmarkParts } from "@hearthlog/contracts/tenant/brand";
+
+    let { title }: { title: string } = $props();
+    const parts = $derived(wordmarkParts(title));
+</script>
+
+{#if parts}
+    <span class="stor-wordmark" role="img" aria-label={title}>{parts.before}<span class="stor-mark"></span>{parts.after}</span>
+{:else}
+    {title}
+{/if}

package/src/components/layout/ErrorToast.svelte

@@ -0,0 +1,34 @@
+<script lang="ts">
+    let {
+        message,
+        onDismiss,
+    }: {
+        message: string;
+        onDismiss: () => void;
+    } = $props();
+</script>
+
+<div
+    class="fixed bottom-4 right-4 bg-red-500 text-white px-4 py-3 rounded-lg shadow-[var(--stor-elevation-3)] flex items-center space-x-3 max-w-sm z-50"
+>
+    <span class="flex-1 text-sm">{message}</span>
+    <button
+        onclick={onDismiss}
+        class="shrink-0 text-white hover:text-red-100 focus:outline-none"
+        aria-label="Dismiss error"
+    >
+        <svg
+            class="w-5 h-5"
+            fill="none"
+            stroke="currentColor"
+            viewBox="0 0 24 24"
+        >
+            <path
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                stroke-width="2"
+                d="M6 18L18 6M6 6l12 12"
+            ></path>
+        </svg>
+    </button>
+</div>