@hearthlog/shell 0.0.0-stage → 0.1.1

package/src/components/layout/NavFlyout.svelte

@@ -0,0 +1,132 @@
+<script lang="ts">
+    import type { Snippet } from 'svelte';
+    import type { NavChild } from '@hearthlog/contracts/features/navigation';
+    import type { AttentionTone } from '@hearthlog/runtime/store/attention.svelte.js';
+
+    type Badge = { count: number; tone: AttentionTone; label: string };
+    interface Item {
+        child: NavChild;
+        href: string;
+        active: boolean;
+        badge: Badge | null;
+    }
+
+    let {
+        label,
+        badge,
+        items,
+        trigger,
+    }: {
+        label: string;
+        /** The section's own badge, named in the flyout header. */
+        badge: Badge | null;
+        items: Item[];
+        /** The section link. It stays the real navigation target; the flyout only adds shortcuts. */
+        trigger: Snippet;
+    } = $props();
+
+    let root = $state<HTMLElement>();
+    let panel = $state<HTMLElement>();
+    let open = $state(false);
+    let top = $state(0);
+    let left = $state(0);
+    let openTimer: ReturnType<typeof setTimeout> | undefined;
+    let closeTimer: ReturnType<typeof setTimeout> | undefined;
+    /** Set while Escape hands focus back to the section link, which must not reopen the flyout. */
+    let returningFocus = false;
+
+    /** Sits 12px right of the rail, level with the section link, and stays inside the viewport. */
+    function place(): void {
+        const link = root?.querySelector<HTMLElement>('[data-nav-link]');
+        const rail = root?.closest('aside');
+        if (!link || !rail || !panel) return;
+        left = rail.getBoundingClientRect().right + 12;
+        top = Math.max(12, Math.min(link.getBoundingClientRect().top - 6, window.innerHeight - panel.offsetHeight - 12));
+    }
+
+    function show(): void {
+        clearTimeout(closeTimer);
+        place();
+        open = true;
+    }
+
+    function hide(): void {
+        clearTimeout(openTimer);
+        open = false;
+    }
+
+    // Hover opens after a short intent delay and only for a real mouse: a tap must navigate, not open.
+    function onPointerEnter(event: PointerEvent): void {
+        if (event.pointerType !== 'mouse') return;
+        clearTimeout(closeTimer);
+        openTimer = setTimeout(show, 90);
+    }
+
+    function onPointerLeave(event: PointerEvent): void {
+        if (event.pointerType !== 'mouse') return;
+        clearTimeout(openTimer);
+        closeTimer = setTimeout(hide, 120);
+    }
+
+    // Keyboard focus opens it so the pages are reachable without a mouse; a click or tap focus does not.
+    function onFocusIn(event: FocusEvent): void {
+        if (!returningFocus && (event.target as HTMLElement).matches(':focus-visible')) show();
+    }
+
+    function onFocusOut(event: FocusEvent): void {
+        if (!root?.contains(event.relatedTarget as Node | null)) hide();
+    }
+
+    function onKeydown(event: KeyboardEvent): void {
+        if (event.key !== 'Escape' || !open) return;
+        event.stopPropagation();
+        hide();
+        returningFocus = true;
+        root?.querySelector<HTMLElement>('[data-nav-link]')?.focus();
+        returningFocus = false;
+    }
+</script>
+
+<div
+    bind:this={root}
+    role="presentation"
+    onpointerenter={onPointerEnter}
+    onpointerleave={onPointerLeave}
+    onfocusin={onFocusIn}
+    onfocusout={onFocusOut}
+    onkeydown={onKeydown}
+    onclick={hide}
+>
+    {@render trigger()}
+    <div
+        bind:this={panel}
+        class="stor-nav-fly"
+        data-open={open ? '' : undefined}
+        style:top="{top}px"
+        style:left="{left}px"
+        role="group"
+        aria-label={`${label} pages`}
+    >
+        <div class="stor-nav-fly-head">
+            <span class="min-w-0 truncate">{label}</span>
+            {#if badge}
+                <span class="stor-nav-badge {badge.tone === 'negative' ? 'stor-nav-badge-negative' : 'stor-nav-badge-warning'} shrink-0">{badge.count} overdue</span>
+            {/if}
+        </div>
+        <ul>
+            {#each items as item (item.child.id)}
+                <li><a
+                    href={item.href}
+                    class="stor-nav-child {item.active ? 'stor-nav-child-active' : ''}"
+                    aria-current={item.active ? 'page' : undefined}
+                    aria-label={item.badge ? `${item.child.label}, ${item.badge.label}` : undefined}
+                >
+                    <span class="min-w-0 flex-1 truncate">{item.child.label}</span>
+                    {#if item.badge}
+                        <span class="stor-nav-badge {item.badge.tone === 'negative' ? 'stor-nav-badge-negative' : 'stor-nav-badge-warning'}" aria-hidden="true">{item.badge.count}</span>
+                    {/if}
+                </a></li>
+            {/each}
+        </ul>
+    </div>
+</div>

package/src/components/layout/NavItem.svelte

@@ -0,0 +1,36 @@
+<script lang="ts">
+    import type { Component } from 'svelte';
+    import type { HTMLAnchorAttributes } from 'svelte/elements';
+    import type { AttentionTone } from '@hearthlog/runtime/store/attention.svelte.js';
+
+    interface Props extends Omit<HTMLAnchorAttributes, 'class' | 'children'> {
+        icon: Component;
+        label: string;
+        active: boolean;
+        /** The rail: icon only, with the count as a dot. */
+        collapsed: boolean;
+        badge: { count: number; tone: AttentionTone; label: string } | null;
+        /** The count sits on the sub-page while a section is open, so the section hides it then. */
+        showCount?: boolean;
+    }
+
+    let { icon: Icon, label, active, collapsed, badge, showCount = true, ...rest }: Props = $props();
+</script>
+
+<!-- `rest` may carry tooltip props; the anchor is never a button, so its type is dropped. -->
+<a
+    {...rest}
+    type={undefined}
+    data-nav-link
+    class="relative flex h-9 items-center rounded-[10px] text-[13.5px] transition-[color,background-color,box-shadow] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-[var(--stor-focus)] {collapsed ? 'mx-auto h-10 w-11 justify-center' : 'gap-2.5 pl-3 pr-2'} {active
+        ? 'stor-nav-selected font-semibold text-[var(--stor-ink)]'
+        : 'font-medium text-[var(--stor-muted-text)] hover:bg-[var(--stor-nav-hover)] hover:text-[var(--stor-ink)]'}"
+    aria-current={active ? 'page' : undefined}
+    aria-label={badge ? `${label}, ${badge.label}` : label}
+>
+    <Icon class="h-[18px] w-[18px] shrink-0" />
+    {#if !collapsed}<span class="min-w-0 flex-1 truncate">{label}</span>{/if}
+    {#if badge && (collapsed || showCount)}
+        <span class="stor-nav-badge {badge.tone === 'negative' ? 'stor-nav-badge-negative' : 'stor-nav-badge-warning'} {collapsed ? 'stor-nav-badge-dot' : ''}" aria-hidden="true">{collapsed ? '' : badge.count}</span>
+    {/if}
+</a>

package/src/components/layout/NavMoreDialog.svelte

@@ -0,0 +1,179 @@
+<script lang="ts">
+    import { page } from "$app/state";
+    import { Dialog } from "bits-ui";
+    import type { Component } from "svelte";
+    import AppearanceOptions from "./AppearanceOptions.svelte";
+    import LogStatusChip, { type LogStatusTone } from "./LogStatusChip.svelte";
+    import IconLogout from "~icons/mdi/logout";
+    import IconChevronRight from "~icons/mdi/chevron-right";
+    import { ACCESS_LOGOUT_ENDPOINT, LOCAL_USER_EMAIL } from "@hearthlog/runtime/access/user-session.js";
+    import { beginAccessLogout } from "@hearthlog/runtime/access/session.js";
+
+    interface NavLink {
+        path: string;
+        label: string;
+        subtitle?: string;
+        icon: Component;
+        matchPaths?: string[];
+    }
+
+    let {
+        open,
+        userEmail = "",
+        links,
+        settings = [],
+        currentLogName,
+        syncLabel,
+        syncDescription,
+        statusLine,
+        statusTitle,
+        tone,
+        version = null,
+        pulsing = false,
+        dataReady = false,
+        offlineAvailable = false,
+        onOpenChange,
+        onOpenSyncIssues,
+        onOpenLogs,
+    }: {
+        open: boolean;
+        userEmail?: string;
+        links: NavLink[];
+        settings?: NavLink[];
+        currentLogName: string | null;
+        syncLabel: string;
+        syncDescription: string;
+        statusLine: string;
+        statusTitle: string;
+        tone: LogStatusTone;
+        version?: number | null;
+        pulsing?: boolean;
+        dataReady?: boolean;
+        offlineAvailable?: boolean;
+        onOpenChange: (open: boolean) => void;
+        onOpenSyncIssues: () => void;
+        onOpenLogs: () => void;
+    } = $props();
+
+    const initial = $derived((userEmail || "?").trim().charAt(0).toUpperCase());
+
+    function isActive(path: string): boolean {
+        if (path === "/") return page.url.pathname === "/";
+        return page.url.pathname === path || page.url.pathname.startsWith(`${path}/`);
+    }
+
+    function isLinkActive(link: NavLink): boolean {
+        return (link.matchPaths ?? [link.path]).some(isActive);
+    }
+
+    function close(): void {
+        onOpenChange(false);
+    }
+
+    function openSyncIssues(): void {
+        close();
+        onOpenSyncIssues();
+    }
+
+    function logout(event: MouseEvent): void {
+        event.preventDefault();
+        close();
+        beginAccessLogout("/");
+    }
+</script>
+
+<Dialog.Root {open} onOpenChange={onOpenChange}>
+    <Dialog.Portal>
+        <Dialog.Overlay class="fixed inset-0 z-[51] bg-[var(--stor-overlay)] md:hidden" />
+        <Dialog.Content
+            class="stor-sheet fixed inset-x-3 bottom-[calc(var(--stor-mobile-bottom-inset)+var(--stor-mobile-nav-height)+10px)] z-[52] max-h-[min(42rem,calc(100dvh-6rem))] overflow-y-auto rounded-[26px] p-3 outline-none md:hidden"
+            aria-label="More navigation and sync options"
+        >
+            <div class="mx-auto mb-2 h-1 w-10 rounded-full bg-[var(--stor-border)]" aria-hidden="true"></div>
+
+            {#if links.length}
+                <nav aria-label="More pages" class="grid gap-0.5">
+                    {#each links as link}
+                        {@const Icon = link.icon}
+                        {@const active = isLinkActive(link)}
+                        <a
+                            href={link.path}
+                            class="flex min-h-12 items-center gap-3 rounded-xl px-2 text-left focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--stor-focus)] {active ? 'bg-[var(--stor-selected)]' : 'hover:bg-[var(--stor-surface-hover)]'}"
+                            aria-current={active ? "page" : undefined}
+                            onclick={close}
+                        >
+                            <span class="flex h-9 w-9 shrink-0 items-center justify-center rounded-[10px] {active ? 'bg-[var(--stor-surface-raised)] text-[var(--stor-accent-strong)]' : 'bg-[var(--stor-surface-muted)] text-[var(--stor-muted-text)]'}"><Icon class="h-[18px] w-[18px]" /></span>
+                            <span class="min-w-0 flex-1">
+                                <span class="block text-sm font-semibold text-[var(--stor-ink)]">{link.label}</span>
+                                {#if link.subtitle}<span class="block truncate text-xs text-[var(--stor-muted-text)]">{link.subtitle}</span>{/if}
+                            </span>
+                            <IconChevronRight class="h-4 w-4 shrink-0 text-[var(--stor-muted-text)]" />
+                        </a>
+                    {/each}
+                </nav>
+                <div class="mx-1 my-2 h-px bg-[var(--stor-border)]"></div>
+            {/if}
+
+            <section aria-label="Log and sync" class="grid gap-2">
+                <LogStatusChip
+                    variant="row"
+                    {currentLogName}
+                    {statusLine}
+                    {statusTitle}
+                    {tone}
+                    {version}
+                    {pulsing}
+                    disabled={!dataReady}
+                    note={offlineAvailable && tone === "success" ? "Available offline" : undefined}
+                    onOpen={() => (tone === "danger" ? openSyncIssues() : onOpenLogs())}
+                />
+                <!-- Sync details appear by exception: when sync is fine the row says everything. -->
+                {#if tone !== "success"}
+                    <p class="px-1 text-xs text-[var(--stor-muted-text)]">
+                        <span class="font-semibold text-[var(--stor-ink)]">{syncLabel}</span> · {syncDescription}
+                    </p>
+                    <button type="button" class="flex min-h-11 items-center justify-center gap-1.5 rounded-xl bg-[var(--stor-surface-muted)] text-xs font-semibold text-[var(--stor-ink)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--stor-focus)]" onclick={openSyncIssues}>
+                        Sync details
+                    </button>
+                {/if}
+            </section>
+
+            <section class="mt-3" aria-labelledby="mobile-appearance-heading">
+                <h2 id="mobile-appearance-heading" class="px-1 pb-1.5 text-[10.5px] font-semibold uppercase tracking-[0.1em] text-[var(--stor-muted-text)]">Appearance</h2>
+                <AppearanceOptions compact />
+            </section>
+
+            {#if settings.length}
+                <section class="mt-3" aria-label="Settings">
+                    <h2 class="px-1 pb-1.5 text-[10.5px] font-semibold uppercase tracking-[0.1em] text-[var(--stor-muted-text)]">Settings</h2>
+                    <div class="grid grid-cols-2 gap-1.5">
+                        {#each settings as link}
+                            {@const Icon = link.icon}
+                            <a href={link.path} onclick={close} aria-current={isLinkActive(link) ? "page" : undefined} class="flex min-h-11 items-center justify-center gap-1.5 rounded-xl text-xs font-semibold focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--stor-focus)] {isLinkActive(link) ? 'bg-[var(--stor-selected)] text-[var(--stor-accent-strong)]' : 'bg-[var(--stor-surface-muted)] text-[var(--stor-ink)]'}">
+                                <Icon class="h-4 w-4" /> {link.label}
+                            </a>
+                        {/each}
+                    </div>
+                </section>
+            {/if}
+
+            <section class="mt-3 flex items-center gap-2.5 rounded-xl px-1 py-1" aria-label="Account">
+                <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>
+                <div class="min-w-0 flex-1">
+                    <div class="truncate text-xs font-semibold text-[var(--stor-ink)]" title={userEmail} data-testid="mobile-current-user-email">{userEmail || "Account"}</div>
+                </div>
+                {#if userEmail && userEmail !== LOCAL_USER_EMAIL}
+                    <a
+                        href={ACCESS_LOGOUT_ENDPOINT}
+                        onclick={logout}
+                        class="flex h-11 min-w-[44px] items-center justify-center gap-1.5 rounded-lg px-3 text-xs font-semibold text-[var(--stor-muted-text)] hover:bg-[var(--stor-surface-hover)]"
+                        aria-label="Log out"
+                        data-testid="mobile-logout-link"
+                    >
+                        <IconLogout class="h-4 w-4" /> Log out
+                    </a>
+                {/if}
+            </section>
+        </Dialog.Content>
+    </Dialog.Portal>
+</Dialog.Root>

package/src/components/layout/PageDataStatus.svelte

@@ -0,0 +1,36 @@
+<script lang="ts">
+    import { tick } from 'svelte';
+    import { refreshAll } from '$app/navigation';
+    import Button from '@hearthlog/ui/components/ui/Button.svelte';
+    import type { PageResource } from '@hearthlog/runtime/runtime/page-data.svelte.js';
+    let { resource }: { resource: PageResource<any> } = $props();
+    $effect(() => resource.attach());
+    $effect(() => {
+        resource.revision;
+        if (resource.pending || !resource.usable || resource.error) return;
+        const measurement = resource.measurement;
+        let cancelled = false;
+        let frame = 0;
+        void tick().then(() => {
+            if (cancelled) return;
+            frame = requestAnimationFrame(() => {
+                frame = requestAnimationFrame(() => {
+                    if (!cancelled) resource.rendered(measurement);
+                });
+            });
+        });
+        return () => { cancelled = true; cancelAnimationFrame(frame); };
+    });
+</script>
+
+{#if resource.error}
+    <div class="mx-3 my-2 flex flex-wrap items-center gap-2 rounded-xl bg-[var(--stor-negative-soft)] p-3 text-sm text-[var(--stor-negative)]" role="alert">
+        {resource.error instanceof Error ? resource.error.message : 'This page could not load its data.'}
+        <Button variant="secondary" size="sm" onclick={() => refreshAll()}>Retry</Button>
+    </div>
+{:else}
+    <span class="sr-only" role="status">{resource.loading ? 'Loading page data' : resource.refreshing ? 'Updating page data' : 'Page data ready'}</span>
+    {#if resource.refreshing}
+        <div class="pointer-events-none fixed right-3 top-2 z-40 rounded-full bg-[var(--stor-surface-raised)] px-2 py-1 text-xs text-[var(--stor-muted-text)] shadow-[var(--stor-shadow-sm)]" aria-hidden="true">Updating…</div>
+    {/if}
+{/if}

package/src/components/layout/PhoneGlance.svelte

@@ -0,0 +1,96 @@
+<script lang="ts">
+    import type { Snippet } from "svelte";
+    import Modal from "@hearthlog/ui/components/Modal.svelte";
+    import { phoneHeader } from "@hearthlog/runtime/runtime/phone-header.svelte.js";
+
+    /**
+     * The page's one figure in the phone top bar. Tapping it opens the summary
+     * sheet, which holds every figure the desktop shows (the page passes its
+     * desktop components as children). Wider screens never show the bar.
+     */
+    let {
+        label = "",
+        value = "",
+        unit = "",
+        tone = "default",
+        title,
+        ariaLabel,
+        context = null,
+        hideLog = false,
+        chip,
+        more,
+        children,
+    }: {
+        label?: string;
+        value?: string;
+        unit?: string;
+        tone?: "default" | "warning" | "negative" | "positive";
+        /** The sheet's title. */
+        title: string;
+        ariaLabel?: string;
+        /** Shown after the section name in the top bar, e.g. the day in view. */
+        context?: string | null;
+        /** A wide glance (Health's three figures) takes the log button's place. */
+        hideLog?: boolean;
+        /** Custom chip content instead of label and value. */
+        chip?: Snippet;
+        /** A way on from the sheet, e.g. the week; the sheet closes first. */
+        more?: { label: string; run: () => void } | { label: string; run: () => void }[];
+        children: Snippet;
+    } = $props();
+
+    let open = $state(false);
+
+    const toneClass = $derived({
+        default: "text-[var(--stor-ink)]",
+        warning: "text-[var(--stor-warning)]",
+        negative: "text-[var(--stor-negative)]",
+        positive: "text-[var(--stor-positive)]",
+    }[tone]);
+
+    $effect(() => {
+        phoneHeader.glance = glance;
+        return () => { if (phoneHeader.glance === glance) phoneHeader.glance = null; };
+    });
+    $effect(() => {
+        phoneHeader.context = context;
+        phoneHeader.hideLog = hideLog;
+        return () => { phoneHeader.context = null; phoneHeader.hideLog = false; };
+    });
+</script>
+
+{#snippet glance()}
+    <button
+        type="button"
+        class="stor-phone-glance flex h-10 min-w-0 shrink items-center rounded-full bg-[var(--stor-surface-raised)] px-3.5 text-left shadow-[var(--stor-elevation-1)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--stor-focus)]"
+        aria-label={ariaLabel ?? (label ? `${label}: ${value} ${unit}`.trim() : title)}
+        aria-haspopup="dialog"
+        aria-expanded={open}
+        data-testid="phone-glance"
+        onclick={() => (open = true)}
+    >
+        {#if chip}
+            {@render chip()}
+        {:else}
+            <span class="flex min-w-0 flex-col items-end leading-tight">
+                <span class="max-w-full truncate text-[10.5px] font-medium text-[var(--stor-muted-text)]">{label}</span>
+                <span class="max-w-full truncate text-[14.5px] font-semibold tabular-nums {toneClass}">{value}{#if unit}<span class="ml-0.5 text-[11px] font-medium text-[var(--stor-muted-text)]">{unit}</span>{/if}</span>
+            </span>
+        {/if}
+    </button>
+{/snippet}
+
+<Modal show={open} {title} onClose={() => (open = false)}>
+    {@render children()}
+    {#if more && (!Array.isArray(more) || more.length > 0)}
+        <div class="mt-3 grid gap-2" style:grid-template-columns="repeat({Array.isArray(more) ? more.length : 1}, minmax(0, 1fr))">
+            {#each Array.isArray(more) ? more : [more] as action (action.label)}
+                <button
+                    type="button"
+                    class="flex min-h-12 w-full items-center justify-center rounded-xl bg-[var(--stor-surface-muted)] text-sm font-semibold text-[var(--stor-ink)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--stor-focus)]"
+                    onclick={() => { open = false; action.run(); }}
+                >{action.label}</button>
+            {/each}
+        </div>
+    {/if}
+</Modal>

package/src/components/layout/SidebarResizer.svelte

@@ -0,0 +1,122 @@
+<script lang="ts">
+    import {
+        SIDEBAR_DEFAULT_WIDTH,
+        SIDEBAR_KEY_STEP,
+        SIDEBAR_MAX_WIDTH,
+        SIDEBAR_MIN_WIDTH,
+        SIDEBAR_RAIL_WIDTH,
+        clampSidebarWidth,
+        resolveSidebarDrag,
+    } from './sidebar-size.js';
+
+    // The edge of the sidebar card. A drag reports every frame with `final` false and once on release;
+    // Escape or a cancelled pointer reports the starting state as final.
+    let {
+        width,
+        folded,
+        onChange,
+    }: {
+        width: number;
+        folded: boolean;
+        onChange: (width: number, folded: boolean, final: boolean) => void;
+    } = $props();
+
+    type Drag = { moved: boolean; x: number; start: number; width: number; folded: boolean; raw: number; frame: number };
+    let drag: Drag | null = null;
+    let handle = $state<HTMLElement>();
+
+    const current = $derived(folded ? SIDEBAR_RAIL_WIDTH : width);
+
+    function setResizing(on: boolean): void {
+        document.documentElement.toggleAttribute('data-sidebar-resizing', on);
+    }
+
+    function apply(final: boolean): void {
+        if (!drag) return;
+        const resolved = resolveSidebarDrag(drag.raw);
+        onChange(resolved.width ?? drag.width, resolved.folded, final);
+    }
+
+    function onPointerDown(event: PointerEvent): void {
+        if (event.button !== 0 || !handle) return;
+        event.preventDefault();
+        handle.setPointerCapture(event.pointerId);
+        drag = { moved: false, x: event.clientX, start: current, width, folded, raw: current, frame: 0 };
+        setResizing(true);
+    }
+
+    function onPointerMove(event: PointerEvent): void {
+        if (!drag) return;
+        drag.raw = drag.start + (event.clientX - drag.x);
+        drag.moved = true;
+        if (drag.frame) return;
+        drag.frame = requestAnimationFrame(() => {
+            if (!drag) return;
+            drag.frame = 0;
+            apply(false);
+        });
+    }
+
+    function finish(cancel: boolean): void {
+        if (!drag) return;
+        cancelAnimationFrame(drag.frame);
+        const ended = drag;
+        drag = null;
+        setResizing(false);
+        if (!ended.moved) return;
+        if (cancel) onChange(ended.width, ended.folded, true);
+        else {
+            const resolved = resolveSidebarDrag(ended.raw);
+            onChange(resolved.width ?? ended.width, resolved.folded, true);
+        }
+    }
+
+    function onKeyDown(event: KeyboardEvent): void {
+        const open = (next: number) => onChange(clampSidebarWidth(next), false, true);
+        if (event.key === 'ArrowLeft') {
+            event.preventDefault();
+            if (folded) return;
+            if (width - SIDEBAR_KEY_STEP < SIDEBAR_MIN_WIDTH) onChange(width, true, true);
+            else open(width - SIDEBAR_KEY_STEP);
+        } else if (event.key === 'ArrowRight') {
+            event.preventDefault();
+            open(folded ? width : width + SIDEBAR_KEY_STEP);
+        } else if (event.key === 'Home') {
+            event.preventDefault();
+            open(SIDEBAR_MIN_WIDTH);
+        } else if (event.key === 'End') {
+            event.preventDefault();
+            open(SIDEBAR_MAX_WIDTH);
+        } else if (event.key === 'Enter') {
+            event.preventDefault();
+            onChange(width, !folded, true);
+        }
+    }
+
+    $effect(() => () => {
+        if (drag) cancelAnimationFrame(drag.frame);
+        setResizing(false);
+    });
+</script>
+
+<svelte:window onkeydown={(event) => { if (event.key === 'Escape' && drag) finish(true); }} />
+
+<div
+    bind:this={handle}
+    class="stor-sidebar-handle"
+    role="separator"
+    tabindex="0"
+    aria-orientation="vertical"
+    aria-label="Resize sidebar"
+    aria-valuemin={SIDEBAR_MIN_WIDTH}
+    aria-valuemax={SIDEBAR_MAX_WIDTH}
+    aria-valuenow={current}
+    aria-valuetext={folded ? 'Folded to rail' : `${width} pixels`}
+    data-stor-no-drag
+    onpointerdown={onPointerDown}
+    onpointermove={onPointerMove}
+    onpointerup={() => finish(false)}
+    onpointercancel={() => finish(true)}
+    ondblclick={() => onChange(SIDEBAR_DEFAULT_WIDTH, false, true)}
+    onkeydown={onKeyDown}
+></div>

package/src/components/layout/SyncIndicator.svelte

@@ -0,0 +1,24 @@
+<script lang="ts">
+    let { pendingCount }: { pendingCount: number } = $props();
+</script>
+
+{#if pendingCount > 0}
+    <div
+        class="fixed bottom-4 left-4 bg-amber-500 text-white px-3 py-2 rounded-lg shadow-[var(--stor-elevation-3)] flex items-center space-x-2 z-50"
+    >
+        <svg
+            class="w-4 h-4 animate-pulse"
+            fill="none"
+            stroke="currentColor"
+            viewBox="0 0 24 24"
+        >
+            <path
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                stroke-width="2"
+                d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"
+            ></path>
+        </svg>
+        <span class="text-sm font-medium">{pendingCount} pending</span>
+    </div>
+{/if}

package/src/components/layout/feature-icons.ts

@@ -0,0 +1,24 @@
+/**
+ * Icon assignments for feature navigation, shared by the navigation shell.
+ *
+ * Kept separate from the feature registry so the registry stays free of
+ * browser-only imports (Node build scripts import it directly).
+ */
+
+import type { Component } from "svelte";
+import IconCalendar from "~icons/mdi/calendar-month-outline";
+import IconCode from "~icons/mdi/code-tags";
+import IconDatabase from "~icons/mdi/database-cog-outline";
+import type { FeatureId } from "@hearthlog/contracts/features/registry";
+import { MODULE_ICONS } from "#generated/module-icons";
+
+export const FEATURE_ICONS: Record<FeatureId, Component> = {
+    ...MODULE_ICONS,
+    calendar: IconCalendar,
+};
+
+/** The policy-scoped Entities viewer (not a feature). */
+export const ENTITIES_ICON: Component = IconDatabase;
+
+/** The policy-scoped Developer page (not a feature). */
+export const DEVELOPER_ICON: Component = IconCode;