@hearthlog/shell 0.0.0-stage → 0.1.1

package/src/components/layout/nav-indicator.ts

@@ -0,0 +1,128 @@
+const SELECTED = 'a[data-nav-link][aria-current="page"]';
+
+/** Smoothing constant: the pill covers 95% of the distance in about 280 ms, the same as `--stor-tab-motion`. */
+const TIME_CONSTANT_MS = 93;
+
+/** Keep following the row after a change, so the pill tracks sub-lists that are still opening or closing. */
+const FOLLOW_MS = 320;
+
+interface Box {
+    x: number;
+    y: number;
+    w: number;
+    h: number;
+}
+
+/** Position of `el` inside the positioned `nav`, read from layout offsets so scrolling and transforms do not matter. */
+function boxIn(el: HTMLElement, nav: HTMLElement): Box {
+    let x = 0;
+    let y = 0;
+    let node: HTMLElement | null = el;
+    while (node && node !== nav) {
+        x += node.offsetLeft;
+        y += node.offsetTop;
+        node = node.offsetParent as HTMLElement | null;
+    }
+    return { x, y, w: el.offsetWidth, h: el.offsetHeight };
+}
+
+/**
+ * Sliding selection pill for the sidebar navigation, the vertical sibling of
+ * `tabIndicator`.
+ *
+ * Measures the selected top-level link (`a[data-nav-link]` with
+ * `aria-current`) and glides a raised pill to it. The pill keeps following the
+ * row while a sub-list above it opens or closes, so it lands on the row's
+ * resting position rather than where the row was when the page changed. The
+ * selected link keeps its own background until the pill is placed, and reduced
+ * motion snaps.
+ *
+ * Usage: `{@attach navIndicator}` on the positioned `<nav>` that holds the links.
+ */
+export function navIndicator(nav: HTMLElement): () => void {
+    const pill = document.createElement('span');
+    pill.className = 'stor-nav-indicator';
+    pill.setAttribute('aria-hidden', 'true');
+    pill.setAttribute('role', 'presentation');
+    nav.insertBefore(pill, nav.firstChild);
+
+    const reducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)');
+    let shown: Box | null = null;
+    let frame = 0;
+    let previous = 0;
+    let followUntil = 0;
+    let destroyed = false;
+
+    const paint = (box: Box): void => {
+        pill.style.width = `${box.w}px`;
+        pill.style.height = `${box.h}px`;
+        pill.style.transform = `translate(${box.x}px, ${box.y}px)`;
+    };
+
+    const step = (now: number): void => {
+        frame = 0;
+        if (destroyed) return;
+        const selected = nav.querySelector<HTMLElement>(SELECTED);
+        if (!selected || selected.offsetWidth === 0) {
+            shown = null;
+            nav.classList.remove('stor-nav-sliding');
+            return;
+        }
+        const target = boxIn(selected, nav);
+        if (!shown || reducedMotion.matches) {
+            shown = target;
+        } else {
+            const k = 1 - Math.exp(-Math.min(48, now - previous) / TIME_CONSTANT_MS);
+            shown = {
+                x: shown.x + (target.x - shown.x) * k,
+                y: shown.y + (target.y - shown.y) * k,
+                w: shown.w + (target.w - shown.w) * k,
+                h: shown.h + (target.h - shown.h) * k,
+            };
+        }
+        previous = now;
+        paint(shown);
+        nav.classList.add('stor-nav-sliding');
+        const distance =
+            Math.abs(target.x - shown.x) + Math.abs(target.y - shown.y) +
+            Math.abs(target.w - shown.w) + Math.abs(target.h - shown.h);
+        if (distance > 0.5 || now < followUntil) {
+            frame = requestAnimationFrame(step);
+        } else {
+            shown = target;
+            paint(target);
+        }
+    };
+
+    const follow = (): void => {
+        if (destroyed) return;
+        followUntil = performance.now() + FOLLOW_MS;
+        if (!frame) {
+            previous = performance.now();
+            frame = requestAnimationFrame(step);
+        }
+    };
+
+    const mutations = new MutationObserver(follow);
+    mutations.observe(nav, {
+        attributes: true,
+        childList: true,
+        subtree: true,
+        attributeFilter: ['aria-current', 'data-open'],
+    });
+    const resizes = new ResizeObserver(follow);
+    resizes.observe(nav);
+    window.addEventListener('resize', follow);
+    void document.fonts.ready.then(follow);
+    follow();
+
+    return () => {
+        destroyed = true;
+        cancelAnimationFrame(frame);
+        mutations.disconnect();
+        resizes.disconnect();
+        window.removeEventListener('resize', follow);
+        nav.classList.remove('stor-nav-sliding');
+        pill.remove();
+    };
+}

package/src/components/layout/sidebar-size.ts

@@ -0,0 +1,31 @@
+// Pure size rules for the resizable desktop sidebar. app.template.html repeats the clamp in its boot script.
+export const SIDEBAR_RAIL_WIDTH = 80;
+export const SIDEBAR_MIN_WIDTH = 192;
+export const SIDEBAR_DEFAULT_WIDTH = 224;
+export const SIDEBAR_MAX_WIDTH = 336;
+/** Halfway between the rail and the minimum: dragging narrower than this folds the sidebar. */
+export const SIDEBAR_FOLD_WIDTH = 136;
+/** A drag within this many pixels of the default width lands on it exactly. */
+export const SIDEBAR_SNAP_RANGE = 8;
+export const SIDEBAR_KEY_STEP = 16;
+export const SIDEBAR_WIDTH_KEY = 'stor:sidebar-width';
+
+export function clampSidebarWidth(width: number): number {
+    return Math.min(SIDEBAR_MAX_WIDTH, Math.max(SIDEBAR_MIN_WIDTH, Math.round(width)));
+}
+
+/** Where a drag ends up for a requested width; `width` is null when the drag folds the sidebar. */
+export function resolveSidebarDrag(width: number): { folded: boolean; width: number | null } {
+    if (width < SIDEBAR_FOLD_WIDTH) return { folded: true, width: null };
+    const snapped = Math.abs(width - SIDEBAR_DEFAULT_WIDTH) <= SIDEBAR_SNAP_RANGE ? SIDEBAR_DEFAULT_WIDTH : width;
+    return { folded: false, width: clampSidebarWidth(snapped) };
+}
+
+export function readSidebarWidth(storage: Pick<Storage, 'getItem'>): number {
+    try {
+        const value = Number(storage.getItem(SIDEBAR_WIDTH_KEY));
+        return Number.isFinite(value) && value > 0 ? clampSidebarWidth(value) : SIDEBAR_DEFAULT_WIDTH;
+    } catch {
+        return SIDEBAR_DEFAULT_WIDTH;
+    }
+}

package/src/components/sync/SyncIssuesDrawer.svelte

@@ -0,0 +1,149 @@
+<script lang="ts">
+    import { invalidate } from "$app/navigation";
+    import { MODULE_REFRESH_KEYS } from '#generated/modules';
+    import Drawer from "@hearthlog/ui/components/Drawer.svelte";
+    import {
+        discardSyncIssue,
+        getSyncIssues,
+        reapplyLocalSyncIssue,
+        rebaseSyncIssue,
+        useTheirsSyncIssue,
+        type SyncIssue,
+    } from "@hearthlog/runtime/store/sync-issues.js";
+    import { describeClash, formatClashValue, humanizeField } from "@hearthlog/runtime/store/conflict-merge.js";
+    import { refreshEntitySyncState } from "@hearthlog/runtime/store/entity-sync-state.svelte.js";
+    import { notify } from "@hearthlog/ui/state/notifications.svelte.js";
+    import { runSyncCoordinator, signalLocalChange } from "@hearthlog/runtime/store/sync.svelte.js";
+
+    let { show, onClose }: { show: boolean; onClose: () => void } = $props();
+    let issues = $state<SyncIssue[]>([]);
+    let loading = $state(false);
+    let actingOn = $state<string | null>(null);
+
+    async function load(): Promise<void> {
+        loading = true;
+        try {
+            issues = await getSyncIssues();
+        } catch (error) {
+            notify.error(error instanceof Error ? error.message : "Could not load sync issues");
+        } finally {
+            loading = false;
+        }
+    }
+
+    async function refreshApp(): Promise<void> {
+        await refreshEntitySyncState();
+        await Promise.all([
+            ...MODULE_REFRESH_KEYS.map((key) => invalidate(key)),
+            invalidate("app:entities"),
+        ]);
+        await load();
+    }
+
+    async function act(issue: SyncIssue, action: "rebase" | "reapply" | "discard" | "theirs"): Promise<void> {
+        actingOn = issue.operationId;
+        try {
+            if (action === "rebase") await rebaseSyncIssue(issue.operationId);
+            if (action === "reapply") await reapplyLocalSyncIssue(issue.operationId);
+            if (action === "discard") await discardSyncIssue(issue.operationId);
+            if (action === "theirs") await useTheirsSyncIssue(issue.operationId);
+            if (action !== "discard") {
+                signalLocalChange();
+                await runSyncCoordinator("manual");
+            }
+            await refreshApp();
+            notify.success(action === "discard" ? "Local change discarded"
+                : action === "theirs" ? "Kept the other device's values"
+                : "Local change queued again");
+        } catch (error) {
+            notify.error(error instanceof Error ? error.message : "Could not resolve sync issue");
+        } finally {
+            actingOn = null;
+        }
+    }
+
+    function formatTime(value: string): string {
+        return new Intl.DateTimeFormat(undefined, { dateStyle: "medium", timeStyle: "short" }).format(new Date(value));
+    }
+
+    $effect(() => {
+        if (show) void load();
+    });
+</script>
+
+<Drawer {show} title="Sync issues" description="Resolve local changes the Ledger could not accept." {onClose}>
+    {#if loading && issues.length === 0}
+        <p class="py-10 text-center text-sm text-[var(--stor-muted-text)]">Loading sync issues…</p>
+    {:else if issues.length === 0}
+        <section class="rounded-xl border border-emerald-200 bg-emerald-50 p-5">
+            <h3 class="font-semibold text-emerald-900">No blocked changes</h3>
+            <p class="mt-1 text-sm text-emerald-700">Local changes can sync normally.</p>
+        </section>
+    {:else}
+        <div class="space-y-4">
+            {#each issues as issue (issue.operationId)}
+                <article class="rounded-xl border border-red-200 bg-white p-4 ">
+                    <div class="flex items-start justify-between gap-3">
+                        <div class="min-w-0">
+                            <div class="text-sm font-semibold text-stone-950">{issue.conflicts.length > 0 ? "Edited on two devices" : issue.errorCode ?? "Ledger rejected this change"}</div>
+                            {#if issue.conflicts.length === 0}
+                                <p class="mt-1 text-sm leading-5 text-stone-600">{issue.errorMessage ?? "The remote log could not accept this local operation."}</p>
+                            {/if}
+                        </div>
+                        <span class="rounded-full bg-red-50 px-2 py-1 text-[10.5px] font-bold uppercase text-red-700">Blocked</span>
+                    </div>
+                    {#if issue.conflicts.length > 0}
+                        <ul class="mt-3 space-y-2" aria-label="Conflicting changes">
+                            {#each issue.conflicts as clash}
+                                <li class="rounded-xl bg-[var(--stor-surface-muted)] p-3 text-sm">
+                                    {#if clash.kind === "field"}
+                                        <div class="font-semibold text-[var(--stor-ink)]">{humanizeField(clash.field)}</div>
+                                        <dl class="mt-1 grid grid-cols-2 gap-3 text-xs">
+                                            <div><dt class="text-[var(--stor-muted-text)]">Yours</dt><dd class="break-words text-[var(--stor-ink)]">{formatClashValue(clash.mine)}</dd></div>
+                                            <div><dt class="text-[var(--stor-muted-text)]">Theirs</dt><dd class="break-words text-[var(--stor-ink)]">{formatClashValue(clash.theirs)}</dd></div>
+                                        </dl>
+                                    {:else}
+                                        <p class="text-[var(--stor-ink)]">{describeClash(clash)}</p>
+                                    {/if}
+                                </li>
+                            {/each}
+                        </ul>
+                    {/if}
+                    <dl class="mt-3 grid grid-cols-2 gap-2 text-xs text-[var(--stor-muted-text)]">
+                        <div><dt class="font-semibold text-stone-700">Attempts</dt><dd>{issue.retryCount} retries · {issue.rebaseCount} rebases</dd></div>
+                        <div><dt class="font-semibold text-stone-700">Last attempt</dt><dd>{formatTime(issue.updatedAt)}</dd></div>
+                    </dl>
+                    {#if issue.affectedEntities.length > 0}
+                        <div class="mt-3 flex flex-wrap gap-1.5">
+                            {#each issue.affectedEntities as entity}
+                                <span class="rounded-md bg-[var(--stor-surface-muted)] px-2 py-1 font-mono text-[10.5px] text-stone-600">{entity}</span>
+                            {/each}
+                        </div>
+                    {/if}
+                    <details class="mt-3 rounded-xl bg-[var(--stor-surface-muted)] p-3 text-xs text-stone-600">
+                        <summary class="cursor-pointer font-semibold text-stone-700">Inspect events and history</summary>
+                        <div class="mt-3 space-y-2">
+                            {#each issue.events as event}
+                                <div class="rounded-lg bg-[var(--stor-surface-muted)] p-2"><span class="font-mono font-semibold">{event.type}</span><div class="mt-1 break-all text-[var(--stor-muted-text)]">{event.id}</div></div>
+                            {/each}
+                            {#each issue.history as entry}
+                                <div class="border-l-2 border-[var(--stor-border)] pl-2"><span class="font-semibold">{entry.action}</span> · {formatTime(entry.createdAt)}</div>
+                            {/each}
+                        </div>
+                    </details>
+                    <div class="mt-4 grid gap-2 sm:grid-cols-2">
+                        {#if issue.canRebase}
+                            <button type="button" class="rounded-xl bg-stone-950 px-3 py-2.5 text-sm font-semibold text-white disabled:opacity-50" disabled={actingOn !== null} onclick={() => void act(issue, "rebase")}>{issue.conflicts.length > 0 ? "Keep mine" : "Retry with latest"}</button>
+                        {/if}
+                        {#if issue.conflicts.length > 0}
+                            <button type="button" class="rounded-xl border border-[var(--stor-field-border)] bg-white px-3 py-2.5 text-sm font-semibold text-stone-800 disabled:opacity-50" disabled={actingOn !== null} onclick={() => void act(issue, "theirs")}>Use theirs</button>
+                        {:else if issue.canReapply}
+                            <button type="button" class="rounded-xl border border-[var(--stor-field-border)] bg-white px-3 py-2.5 text-sm font-semibold text-stone-800 disabled:opacity-50" disabled={actingOn !== null} onclick={() => void act(issue, "reapply")}>Reapply as new</button>
+                        {/if}
+                        <button type="button" class="rounded-xl border border-red-200 bg-red-50 px-3 py-2.5 text-sm font-semibold text-red-700 disabled:opacity-50" disabled={actingOn !== null} onclick={() => void act(issue, "discard")}>Discard local</button>
+                    </div>
+                </article>
+            {/each}
+        </div>
+    {/if}
+</Drawer>

package/src/components/sync/SyncStateBadge.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+    import { getEntitySyncState } from "@hearthlog/runtime/store/entity-sync-state.svelte.js";
+
+    let { entityId }: { entityId: string } = $props();
+    const state = $derived(getEntitySyncState(entityId));
+</script>
+
+{#if state}
+    <span
+        class="shrink-0 rounded-full border px-1.5 py-0.5 text-[10.5px] font-semibold {state === 'blocked'
+            ? 'border-red-200 bg-red-50 text-red-700'
+            : 'border-amber-200 bg-amber-50 text-amber-700'}"
+        title={state === "blocked" ? "This local change needs attention" : "Waiting to sync"}
+    >
+        {state === "blocked" ? "Blocked" : "Pending"}
+    </span>
+{/if}