@hearthlog/shell 0.0.0-stage → 0.1.0

package/src/components/layout/LogCreateDrawer.svelte

@@ -0,0 +1,111 @@
+<script lang="ts">
+    const drawerId = $props.id();
+    const drawerFormId0 = drawerId + "-0";
+
+    import { tick } from "svelte";
+    import Drawer from "@hearthlog/ui/components/Drawer.svelte";
+    import Button from "@hearthlog/ui/components/ui/Button.svelte";
+    import Input from "@hearthlog/ui/components/ui/Input.svelte";
+    import Label from "@hearthlog/ui/components/ui/Label.svelte";
+
+    let {
+        show,
+        onClose,
+        onCreate,
+    }: {
+        show: boolean;
+        onClose: () => void;
+        onCreate: (name: string) => Promise<void>;
+    } = $props();
+
+    let name = $state("");
+    let saving = $state(false);
+    let errorMessage = $state("");
+    let opened = false;
+
+    $effect(() => {
+        if (!show) {
+            opened = false;
+            return;
+        }
+        if (opened) return;
+        opened = true;
+        name = "";
+        errorMessage = "";
+        void tick().then(() => {
+            document.querySelector<HTMLInputElement>(
+                '[data-testid="new-log-name"]',
+            )?.focus();
+        });
+    });
+
+    async function submit(event: SubmitEvent): Promise<void> {
+        event.preventDefault();
+        if (saving) return;
+
+        const trimmedName = name.trim();
+        if (!trimmedName) {
+            errorMessage = "Enter a log name.";
+            return;
+        }
+
+        saving = true;
+        errorMessage = "";
+        try {
+            await onCreate(trimmedName);
+            onClose();
+        } catch (error) {
+            errorMessage =
+                error instanceof Error
+                    ? error.message
+                    : "The log could not be created.";
+        } finally {
+            saving = false;
+        }
+    }
+</script>
+
+<Drawer
+    {show}
+    title="Create new log"
+    description="Create an empty event log and start using it immediately."
+    {onClose}
+>
+    <form id={drawerFormId0} class="space-y-4" onsubmit={submit}>
+        <Label class="block">
+            Log name
+            <Input
+                data-testid="new-log-name"
+                bind:value={name}
+                placeholder="Personal, work, archive..."
+                autocomplete="off"
+                class="mt-1.5"
+                disabled={saving}
+            />
+        </Label>
+
+        <p class="text-xs leading-5 text-[var(--stor-muted-text)]">
+            The new log will become the active log in this browser. Existing logs
+            remain unchanged.
+        </p>
+
+        {#if errorMessage}
+            <div
+                class="rounded-xl border border-red-200 bg-red-50 px-3 py-2 text-sm text-red-700"
+                role="alert"
+            >
+                {errorMessage}
+            </div>
+        {/if}
+
+        </form>
+    {#snippet footer()}
+            <Button variant="secondary" size="sm" onclick={onClose} disabled={saving}>
+                Cancel
+            </Button>
+            <Button type="submit" form={drawerFormId0} size="sm" disabled={saving || !name.trim()}>
+                {saving ? "Creating..." : "Create log"}
+            </Button>
+
+    {/snippet}
+</Drawer>

package/src/components/layout/LogPanel.svelte

@@ -0,0 +1,225 @@
+<script lang="ts">
+    import { untrack } from 'svelte';
+    import { historyRouteUrl, navigateHistory } from '@hearthlog/runtime/history/navigation.js';
+    import { historyUrlState } from '@hearthlog/runtime/history/url.js';
+    import Drawer from '@hearthlog/ui/components/Drawer.svelte';
+    import Button from '@hearthlog/ui/components/ui/Button.svelte';
+    import Input from '@hearthlog/ui/components/ui/Input.svelte';
+    import Select from '@hearthlog/ui/components/ui/Select.svelte';
+    import LogHistory from '../history/LogHistory.svelte';
+    import LogMap from '../history/LogMap.svelte';
+    import LogTree from '../history/LogTree.svelte';
+    import ForkComposer from '../history/ForkComposer.svelte';
+    import { queryDatabase } from '@hearthlog/runtime/db/read-repositories.js';
+    import { FEATURES } from '@hearthlog/contracts/features/registry';
+    import { isFeatureEnabled } from '@hearthlog/contracts/tenant/config';
+    import type { LogLineageIndex, LogSummary } from '@hearthlog/runtime/ledger/index.js';
+    import { flattenTree, logAncestors, logTree } from '@hearthlog/runtime/history/lineage.js';
+    import { mapSpan, type MapSpan } from '@hearthlog/runtime/history/log-map.js';
+    import type { HistoryPoint } from '@hearthlog/runtime/history/contracts.js';
+    import { logs as logStore } from '@hearthlog/runtime/store/logs.svelte.js';
+    import { events } from '@hearthlog/runtime/store/events.svelte.js';
+    import { syncStatus } from '@hearthlog/runtime/store/sync.svelte.js';
+    import { notify } from '@hearthlog/ui/state/notifications.svelte.js';
+    import IconLayers from '~icons/mdi/layers-outline';
+    import IconCopy from '~icons/mdi/content-copy';
+    import IconPlus from '~icons/mdi/plus';
+
+    let {
+        show,
+        logs,
+        lineage,
+        currentLogId,
+        currentLogName,
+        onClose,
+        onSwitch,
+        onCreate,
+        onOpenSyncIssues = () => {},
+        createDisabled = false,
+        createDisabledReason,
+    }: {
+        show: boolean;
+        logs: LogSummary[];
+        lineage: LogLineageIndex | null;
+        currentLogId: string | null;
+        currentLogName: string | null;
+        onClose: () => void;
+        onSwitch: (logId: string) => Promise<void>;
+        onCreate: () => void;
+        onOpenSyncIssues?: () => void;
+        createDisabled?: boolean;
+        createDisabledReason?: string;
+    } = $props();
+
+    const view = $derived(historyUrlState(historyRouteUrl()));
+    const tree = $derived(logTree(logs, lineage, { currentLogId, showHidden: view.showHidden }));
+    const shown = $derived(flattenTree(tree));
+    const ancestors = $derived(logAncestors(logs, currentLogId));
+    const hiddenCount = $derived(logs.filter(log => log.hiddenAt && log.id !== currentLogId).length);
+    const featureOptions = [{ value: 'all', label: 'All features' }, ...FEATURES.filter(feature => isFeatureEnabled(feature.id))
+        .map(feature => ({ value: feature.id, label: feature.page?.label ?? feature.id }))];
+
+    let switchingLogId = $state<string | null>(null);
+    let hidingLogId = $state<string | null>(null);
+    let forkBusy = $state(false);
+    let error = $state('');
+    let range = $state<{ from: number; to: number } | null>(null);
+    let points = $state<HistoryPoint[]>([]);
+    let span = $state<MapSpan | null>(null);
+    let reveal = $state<{ id: string; nonce: number } | null>(null);
+    let query = $state('');
+
+    function navigate(values: Record<string, string | null>, replace = false) {
+        const url = new URL(window.location.href);
+        for (const [key, value] of Object.entries(values)) {
+            if (value) url.searchParams.set(key, value); else url.searchParams.delete(key);
+        }
+        navigateHistory(url, replace);
+    }
+
+    $effect(() => { query = view.search; });
+    $effect(() => {
+        const search = query;
+        if (search === untrack(() => view.search)) return;
+        const timer = setTimeout(() => navigate({ historySearch: search }, true), 250);
+        return () => clearTimeout(timer);
+    });
+
+    // The map's span ends at the newest action; its points are read from SQL for that span.
+    $effect(() => {
+        const scope = currentLogId;
+        const nodes = shown;
+        void events.updatedAt;
+        if (!show || !scope || view.tab !== 'history') return;
+        let cancelled = false;
+        void queryDatabase(async r => {
+            const now = Date.now();
+            const next = mapSpan(nodes, now, await r.history.newest());
+            return { next, rows: await r.history.points(next.start, next.end) };
+        }).then(({ next, rows }) => { if (!cancelled) { span = next; points = rows; } })
+            .catch(() => { if (!cancelled) points = []; });
+        return () => { cancelled = true; };
+    });
+
+    async function openLog(logId: string): Promise<void> {
+        if (logId === currentLogId || switchingLogId || forkBusy) return;
+        const log = logs.find(item => item.id === logId);
+        if (!log || log.status === 'preparing') return;
+        switchingLogId = logId;
+        error = '';
+        try {
+            await onSwitch(logId);
+            onClose();
+        } catch (cause) {
+            error = cause instanceof Error ? cause.message : 'Could not open this log.';
+        } finally {
+            switchingLogId = null;
+        }
+    }
+
+    async function setHidden(logId: string, hidden: boolean): Promise<void> {
+        const log = logs.find(item => item.id === logId);
+        if (!log || hidingLogId) return;
+        hidingLogId = logId;
+        try {
+            await logStore.setHidden(logId, hidden);
+            if (hidden) {
+                notify.success(`Hid ${log.name}`, { label: 'Undo', run: async () => {
+                    try { await logStore.setHidden(logId, false); } catch (cause) { notify.error(cause instanceof Error ? cause.message : 'Could not show this log.'); }
+                } });
+            }
+        } catch (cause) {
+            notify.error(cause instanceof Error ? cause.message : `Could not ${hidden ? 'hide' : 'show'} this log.`);
+        } finally {
+            hidingLogId = null;
+        }
+    }
+
+    function changeTab(tab: 'history' | 'logs'): void {
+        error = '';
+        navigate({ logPanel: tab === 'logs' ? 'logs' : 'activity', historyStep: null });
+    }
+
+    function createEmptyLog(): void {
+        onClose();
+        onCreate();
+    }
+</script>
+
+<Drawer {show} title={currentLogName ?? 'Your log'} onClose={() => { if (!forkBusy) onClose(); }}
+    footer={view.tab === 'logs' || view.step === 'copy' || (view.step === 'fork' && view.action) ? panelFooter : undefined}>
+    {#snippet lead()}
+        <div class="space-y-3">
+            {#if ancestors.length > 0}
+                <p class="-mt-2 flex flex-wrap items-center gap-x-1 gap-y-0.5 text-xs text-[var(--stor-muted-text)]" aria-label="Where this log came from">
+                    <IconLayers class="mr-0.5 h-3.5 w-3.5" />
+                    {#each ancestors as ancestor (ancestor.id)}
+                        <button type="button" class="rounded-md px-1 py-0.5 font-medium hover:bg-[var(--stor-surface-hover)] hover:text-[var(--stor-ink)] disabled:hover:bg-transparent"
+                            disabled={switchingLogId !== null || forkBusy} onclick={() => void openLog(ancestor.id)}>{ancestor.name}</button>
+                        <span aria-hidden="true" class="text-[var(--stor-border)]">›</span>
+                    {/each}
+                    <span class="px-1 font-semibold text-[var(--stor-ink)]">{currentLogName}</span>
+                </p>
+            {/if}
+            <div class="flex items-center gap-2">
+                <div class="stor-segmented-control flex min-w-0 flex-1" role="group" aria-label="Show">
+                    <button type="button" class="stor-segmented-option flex-1" aria-pressed={view.tab === 'history'} onclick={() => changeTab('history')}>History</button>
+                    <button type="button" class="stor-segmented-option flex-1" aria-pressed={view.tab === 'logs'} onclick={() => changeTab('logs')}>Logs</button>
+                </div>
+                <Button variant="secondary" size="sm" disabled={forkBusy} aria-pressed={view.step === 'copy'}
+                    onclick={() => navigate({ logPanel: 'activity', historyStep: view.step === 'copy' ? null : 'copy', historyAction: null })}>
+                    <IconCopy class="h-4 w-4" />Copy this log
+                </Button>
+            </div>
+            {#if view.tab === 'history'}
+                {#if shown.length > 0 && span}
+                    <LogMap nodes={shown} {logs} {currentLogId} {points} {span} {range} openActionId={view.action}
+                        disabled={switchingLogId !== null || forkBusy} onOpen={(id) => void openLog(id)}
+                        onPick={(id) => navigate({ historyAction: id, historyStep: null })}
+                        onReveal={(id) => { reveal = { id, nonce: (reveal?.nonce ?? 0) + 1 }; }} />
+                {/if}
+                <div class="grid grid-cols-[minmax(0,1fr)_8rem] gap-2 sm:grid-cols-[minmax(0,1fr)_9rem]">
+                    <Input type="search" aria-label="Search history" placeholder="Search history" bind:value={query} />
+                    <Select ariaLabel="Filter history by feature" value={view.feature || 'all'} options={featureOptions}
+                        onValueChange={value => navigate({ historyFeature: value === 'all' ? null : value })} />
+                </div>
+            {/if}
+            {#if error}<p role="alert" class="text-sm text-[var(--stor-negative)]">{error}</p>{/if}
+        </div>
+    {/snippet}
+
+    {#if view.tab === 'logs'}
+        {#if logs.length === 0}
+            <p class="rounded-2xl bg-[var(--stor-surface-muted)] p-5 text-sm text-[var(--stor-muted-text)]">No logs yet. Create an empty log to get started.</p>
+        {:else}
+            <LogTree nodes={tree} {currentLogId} {switchingLogId} busyLogId={hidingLogId}
+                hideDisabledReason={syncStatus.isOnline ? undefined : 'Connect to hide or show logs.'}
+                onOpen={(id) => void openLog(id)} onHide={(id, hidden) => void setHidden(id, hidden)} />
+        {/if}
+    {:else}
+        <LogHistory {currentLogId} {currentLogName} {logs} {lineage} showHidden={view.showHidden} {switchingLogId} {reveal} locked={forkBusy}
+            onOpenLog={(id) => void openLog(id)} {onOpenSyncIssues} onRange={(value) => { range = value; }} />
+    {/if}
+
+</Drawer>
+
+{#snippet panelFooter()}
+    {#if view.tab === 'logs'}
+        <div class="flex w-full flex-wrap items-center justify-between gap-2">
+            {#if hiddenCount > 0 || view.showHidden}
+                <Button variant="ghost" size="sm" aria-pressed={view.showHidden} onclick={() => navigate({ hiddenLogs: view.showHidden ? null : '1' }, true)}>
+                    {view.showHidden ? 'Hide hidden logs' : `Show ${hiddenCount} hidden`}
+                </Button>
+            {:else}
+                <span></span>
+            {/if}
+            <Button variant="secondary" size="sm" disabled={createDisabled} title={createDisabled ? createDisabledReason : undefined} onclick={createEmptyLog}>
+                <IconPlus class="h-4 w-4" />New empty log
+            </Button>
+        </div>
+    {:else if view.step === 'copy' || (view.step === 'fork' && view.action)}
+        <ForkComposer step={view.step} actionId={view.action} {currentLogId} {currentLogName} {logs}
+            onCancel={() => navigate({ historyStep: null })} onSwitch={onSwitch} onDone={onClose}
+            onBusyChange={(busy) => { forkBusy = busy; }} />
+    {/if}
+{/snippet}

package/src/components/layout/LogStatusChip.svelte

@@ -0,0 +1,137 @@
+<script lang="ts" module>
+    export type LogStatusTone = 'neutral' | 'success' | 'warning' | 'danger';
+</script>
+
+<script lang="ts">
+    import Tooltip from '@hearthlog/ui/components/ui/Tooltip.svelte';
+    import { formatNumber } from '@hearthlog/ui/utils/number-format.js';
+    import IconLayers from '~icons/mdi/layers-outline';
+    import IconUnfold from '~icons/mdi/unfold-more-horizontal';
+
+    let {
+        currentLogName,
+        statusLine,
+        statusTitle,
+        tone,
+        version = null,
+        pulsing = false,
+        variant = 'foot',
+        expanded = false,
+        disabled = false,
+        note,
+        onOpen,
+    }: {
+        currentLogName: string | null;
+        /** Short sync state, e.g. "Synced · 12:09". */
+        statusLine: string;
+        /** Full sync sentence for the tooltip and accessible description. */
+        statusTitle: string;
+        tone: LogStatusTone;
+        /** Head version of the active log; hidden when the log has no changes yet. */
+        version?: number | null;
+        pulsing?: boolean;
+        /** `foot` in the sidebar, `tile` in the collapsed rail, `row` in the phone sheet, `pill` or `round` in the phone top bar. */
+        variant?: 'foot' | 'tile' | 'row' | 'pill' | 'round';
+        expanded?: boolean;
+        disabled?: boolean;
+        /** A small positive tag at the end of a `row`, such as "Available offline". */
+        note?: string;
+        onOpen: () => void;
+    } = $props();
+
+    const logLabel = $derived(currentLogName || (disabled ? 'Loading log…' : 'Choose a log'));
+    const versionLabel = $derived(version !== null && version > 0 ? `v${formatNumber(version)}` : null);
+    const descriptionId = $props.id();
+    const danger = $derived(tone === 'danger');
+    // Sync that is fine stays silent. A dot marks the exception: saving, offline or needing review.
+    const showDot = $derived(tone !== 'success');
+    const dotClass = $derived({
+        success: 'bg-[var(--stor-positive)]',
+        warning: 'bg-[var(--stor-warning)]',
+        danger: 'bg-[var(--stor-negative)]',
+        neutral: 'bg-[var(--stor-surface)] ring-2 ring-inset ring-[var(--stor-muted-text)]',
+    }[tone]);
+    // The ring around the dot matches the surface the tile sits on.
+    const ringClass = $derived(
+        variant === 'row'
+            ? 'shadow-[0_0_0_2px_var(--stor-surface-muted)]'
+            : 'shadow-[0_0_0_2px_var(--stor-sidebar)]',
+    );
+</script>
+
+{#snippet versionTag()}
+    {#if versionLabel}
+        <span class="shrink-0 rounded-full bg-[color-mix(in_srgb,var(--stor-ink)_8%,transparent)] px-1.5 text-[10px] font-semibold leading-4 tabular-nums {danger ? '' : 'text-[var(--stor-muted-text)]'}">{versionLabel}</span>
+    {/if}
+{/snippet}
+
+{#snippet chip(tip: Record<string, unknown> = {})}
+    <button
+        {...tip}
+        type="button"
+        class="stor-log-chip group flex items-center text-left transition focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--stor-focus)] disabled:cursor-wait disabled:opacity-60 {variant === 'foot'
+            ? 'w-full gap-2.5 rounded-xl p-1.5'
+            : variant === 'row'
+              ? 'w-full gap-2.5 rounded-2xl py-2 pl-2 pr-2.5'
+              : variant === 'tile'
+                ? 'mx-auto h-11 w-11 justify-center rounded-xl'
+                : variant === 'round'
+                  ? 'relative h-10 w-10 shrink-0 justify-center rounded-full'
+                : 'h-9 min-w-0 max-w-full gap-2 rounded-full pl-2.5 pr-2 text-xs font-semibold'} {danger
+            ? 'bg-[var(--stor-negative-soft)] text-[var(--stor-negative)] ring-1 ring-inset ring-[color-mix(in_srgb,var(--stor-negative),transparent_70%)]'
+            : variant === 'pill' || variant === 'round'
+              ? 'bg-[var(--stor-surface-raised)] text-[var(--stor-ink)] shadow-[var(--stor-shadow-sm)] hover:shadow-[var(--stor-shadow-md)]'
+              : variant === 'row'
+                ? 'bg-[var(--stor-surface-muted)] text-[var(--stor-ink)]'
+                : 'text-[var(--stor-ink)] hover:bg-[var(--stor-nav-hover)]'}"
+        title={variant === 'tile' ? undefined : `${logLabel}${versionLabel ? ` ${versionLabel}` : ''} · ${statusTitle}`}
+        aria-label={currentLogName ? `Active log: ${currentLogName}` : 'Open your logs'}
+        aria-describedby={descriptionId}
+        aria-haspopup="dialog"
+        aria-expanded={expanded}
+        {disabled}
+        onclick={(event) => {
+            (tip.onclick as ((event: MouseEvent) => void) | undefined)?.(event);
+            onOpen();
+        }}
+        data-testid="log-status-chip"
+        data-tone={tone}
+    >
+        <span id={descriptionId} class="sr-only">{versionLabel ? `${statusTitle} Log version ${version}.` : statusTitle}</span>
+        {#if variant === 'round'}
+            <IconLayers class="h-[18px] w-[18px] text-[var(--stor-muted-text)]" />
+            {#if showDot}<span class="absolute right-1.5 top-1.5 h-2.5 w-2.5 rounded-full {dotClass} {pulsing ? 'motion-safe:animate-pulse' : ''} shadow-[0_0_0_2px_var(--stor-surface-raised)]" aria-hidden="true"></span>{/if}
+        {:else if variant === 'pill'}
+            {#if showDot}<span class="h-2 w-2 shrink-0 rounded-full {dotClass} {pulsing ? 'motion-safe:animate-pulse' : ''}" aria-hidden="true"></span>{/if}
+            <span class="min-w-0 truncate">{logLabel}</span>
+            {@render versionTag()}
+            <span class="hidden shrink-0 font-medium opacity-70 min-[380px]:inline">· {statusLine}</span>
+            <IconUnfold class="h-3.5 w-3.5 shrink-0 opacity-60" />
+        {:else}
+            <span class="relative flex h-8 w-8 shrink-0 items-center justify-center rounded-[10px] {danger ? 'bg-[color-mix(in_srgb,var(--stor-negative),transparent_85%)]' : 'bg-[var(--stor-accent-soft)] text-[var(--stor-accent-strong)]'}">
+                <IconLayers class="h-4 w-4" />
+                {#if showDot}<span class="absolute -bottom-0.5 -right-0.5 h-2.5 w-2.5 rounded-full {dotClass} {pulsing ? 'motion-safe:animate-pulse' : ''} {ringClass}" aria-hidden="true"></span>{/if}
+            </span>
+            {#if variant !== 'tile'}
+                <span class="flex min-w-0 flex-1 flex-col leading-tight">
+                    <span class="flex min-w-0 items-center gap-1.5">
+                        <span class="truncate text-[13px] font-semibold">{logLabel}</span>
+                        {@render versionTag()}
+                    </span>
+                    <span class="truncate text-[11px] {danger ? '' : 'text-[var(--stor-muted-text)]'}">{statusLine}</span>
+                </span>
+                {#if note}<span class="shrink-0 text-[11px] font-semibold text-[var(--stor-positive)]">{note}</span>{/if}
+                <IconUnfold class="h-4 w-4 shrink-0 {danger ? '' : 'text-[var(--stor-muted-text)]'}" />
+            {/if}
+        {/if}
+    </button>
+{/snippet}
+
+{#if variant === 'tile'}
+    <!-- The rail has no label, so the tile names the log and its sync state in a tooltip. -->
+    <Tooltip content={`${logLabel}${versionLabel ? ` ${versionLabel}` : ''}: ${statusLine}`} side="right" delayDuration={150}>
+        {#snippet trigger({ props })}{@render chip(props)}{/snippet}
+    </Tooltip>
+{:else}
+    {@render chip()}
+{/if}

package/src/components/layout/MobilePageAction.svelte

@@ -0,0 +1,44 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import CommandOnly from '@hearthlog/ui/components/commands/CommandOnly.svelte';
+
+	let {
+		children,
+		hideWhenModalOpen = false,
+		isModalOpen = false,
+		hidden = false
+	}: {
+		children: Snippet;
+		/** Set while a drawer/scanner/dialog from this page is open. */
+		hideWhenModalOpen?: boolean;
+		isModalOpen?: boolean;
+		/** Set while another surface (for example a selection bar) owns the mobile action area. */
+		hidden?: boolean;
+	} = $props();
+
+	const isHidden = $derived(hidden || (hideWhenModalOpen && isModalOpen));
+
+	// Any scroll (the page or its list) shrinks a pill with a `.stor-action-label` to its icon until it rests.
+	let moving = $state(false);
+	$effect(() => {
+		let rest: ReturnType<typeof setTimeout> | undefined;
+		const onScroll = () => {
+			moving = true;
+			clearTimeout(rest);
+			rest = setTimeout(() => (moving = false), 500);
+		};
+		document.addEventListener('scroll', onScroll, { capture: true, passive: true });
+		return () => {
+			clearTimeout(rest);
+			document.removeEventListener('scroll', onScroll, { capture: true });
+		};
+	});
+</script>
+
+{#if !isHidden}
+	<CommandOnly>
+		<div class="stor-mobile-action lg:hidden" data-moving={moving ? '' : undefined}>
+			{@render children()}
+		</div>
+	</CommandOnly>
+{/if}

package/src/components/layout/MovedBanner.svelte

@@ -0,0 +1,51 @@
+<script lang="ts">
+    import { onMount } from "svelte";
+    import Button from "@hearthlog/ui/components/ui/Button.svelte";
+    import { clearMovedWorkspace, movedWorkspace, restoreMovedWorkspace } from "@hearthlog/runtime/store/moved.svelte.js";
+    import { exportPendingWork } from "@hearthlog/runtime/store/pending-work-transfer.js";
+    import { notify } from "@hearthlog/ui/state/notifications.svelte.js";
+    import { sync } from "@hearthlog/runtime/store/sync.svelte.js";
+
+    let busy = $state(false);
+    onMount(() => { void restoreMovedWorkspace(); });
+
+    const destination = $derived(movedWorkspace.value?.destination ?? null);
+
+    async function exportWork(): Promise<void> {
+        busy = true;
+        try {
+            const { file, name } = await exportPendingWork();
+            const url = URL.createObjectURL(new Blob([JSON.stringify(file, null, 2)], { type: "application/json" }));
+            const link = Object.assign(document.createElement("a"), { href: url, download: name });
+            link.click();
+            URL.revokeObjectURL(url);
+            notify.success(file.operations.length === 0 ? "Nothing was waiting to be sent" : `Exported ${file.operations.length} pending change${file.operations.length === 1 ? "" : "s"}`);
+        } catch (error) {
+            notify.error(error instanceof Error ? error.message : "Could not export the pending changes");
+        } finally {
+            busy = false;
+        }
+    }
+
+    async function tryAgain(): Promise<void> {
+        await clearMovedWorkspace();
+        void sync("manual").catch(() => undefined);
+    }
+</script>
+
+{#if movedWorkspace.value}
+    <div class="m-2.5 sm:m-3 rounded-xl border border-[var(--stor-border)] bg-[var(--stor-surface-muted)] p-3 text-sm" role="alert">
+        <p class="font-medium text-[var(--stor-ink)]">This workspace moved</p>
+        <p class="mt-1 text-[var(--stor-muted-text)]">
+            {#if destination}It lives at {destination} now.{:else}It lives somewhere else now.{/if}
+            Changes made here stay on this device until you export them.
+        </p>
+        <div class="mt-3 flex flex-wrap gap-2">
+            <Button variant="secondary" size="sm" onclick={exportWork} disabled={busy}>Export pending changes</Button>
+            {#if destination}
+                <Button variant="secondary" size="sm" onclick={() => location.assign(destination)}>Open new location</Button>
+            {/if}
+            <Button variant="ghost" size="sm" onclick={tryAgain} disabled={busy}>Try again here</Button>
+        </div>
+    </div>
+{/if}