nudge-ui 0.2.1 → 0.2.3

package/dist/inspector/canvas/canvasStore.js

@@ -1,29 +1,48 @@
+import { iterationId, contentSourceUrl, contentEditTarget } from "./frameContent.js";
+import { recordCanvasChange, discardCanvasHistory, isDraftLocked, forgetDraft } from "../changes/draftChanges.js";
+import { targetKey } from "../drafts/model.js";
 import { useSyncExternalStore } from "react";
+import { DEFAULT_CAMERA, getBoardCamera, placeBoardCamera, restoreCanvasView, setCanvasMode, } from "./viewStore.js";
 import { normalizeUrl, normalizedUrlKey } from "./normalizeUrl.js";
-export const MIN_CAMERA_ZOOM = 0.25;
-export const MAX_CAMERA_ZOOM = 3;
+import { removeHtmlArtifact } from "../iterations/client.js";
+import { applyLayoutShifts, boundsOf, centerCamera, fitCamera, layoutShifts, nextCardPosition, pushOverlappingCards, reinsertInRecordedOrder, iterationPosition, } from "./layout.js";
+const frameGroups = new Map();
+export function setFrameGroup(group) { frameGroups.set(group.id, group); }
+export function getFrameGroup(id) { return frameGroups.get(id); }
+export function removeFrameGroup(id) { frameGroups.delete(id); }
+export function getFrameGroups() {
+    return [...frameGroups.values()].filter((group) => cards.some((card) => card.groupId === group.id));
+}
+export function isFrameGroup(value) {
+    if (!value || typeof value !== "object")
+        return false;
+    const group = value;
+    if (typeof group.id !== "string" || group.id.length > 256)
+        return false;
+    return group.kind === "agent" && typeof group.label === "string" && typeof group.agentId === "string"
+        && Array.isArray(group.routes) && group.routes.every((route) => {
+        try {
+            return typeof route.url === "string" && new URL(route.url).origin === window.location.origin;
+        }
+        catch {
+            return false;
+        }
+    });
+}
 export const CARD_GAP = 40;
 export const FIT_ALL_PADDING = 80;
 export const PRIMARY_CARD_INSET = 40;
-const DEFAULT_CAMERA = { x: 0, y: 0, zoom: 1 };
 function defaultViewportSize() {
     return {
         width: window.innerWidth || 1024,
         height: window.innerHeight || 768,
     };
 }
-let mode = "inspect";
-let presentation = "focus";
-let presentationTransitioning = false;
-let presentationTransitionTimer = null;
 let cards = [];
-let comparisonGroups = [];
 let focusedCardId = null;
 let selectedCardId = null;
 let cardIdCounter = 0;
-let cachedBoardCamera = { ...DEFAULT_CAMERA };
 let lastUsedCardSize = null;
-let fitAllRan = false;
 const listeners = new Set();
 function subscribe(cb) {
     listeners.add(cb);
@@ -31,102 +50,39 @@ function subscribe(cb) {
         listeners.delete(cb);
     };
 }
-function getMode() {
-    return mode;
-}
-function getPresentation() {
-    return presentation;
-}
-function getPresentationTransitioning() {
-    return presentationTransitioning;
-}
 function getCards() {
     return cards;
 }
-function getComparisonGroups() {
-    return comparisonGroups;
-}
-function notify() {
-    listeners.forEach((l) => l());
-}
-function computeNewCardPosition(existingCards, gap) {
-    if (existingCards.length === 0)
-        return { x: 0, y: 0 };
-    let rightmostEdge = -Infinity;
-    for (const c of existingCards) {
-        const edge = c.x + c.width + gap;
-        if (edge > rightmostEdge)
-            rightmostEdge = edge;
-    }
-    const rowY = existingCards[0].y;
-    return { x: rightmostEdge, y: rowY };
-}
-function boundsOf(cards) {
-    let minX = Infinity;
-    let minY = Infinity;
-    let maxX = -Infinity;
-    let maxY = -Infinity;
-    for (const card of cards) {
-        minX = Math.min(minX, card.x);
-        minY = Math.min(minY, card.y);
-        maxX = Math.max(maxX, card.x + card.width);
-        maxY = Math.max(maxY, card.y + card.height);
+let notificationDepth = 0;
+let notificationPending = false;
+export function batchCanvasChanges(operation) {
+    notificationDepth += 1;
+    try {
+        return operation();
     }
-    return { minX, minY, maxX, maxY };
-}
-export function setCanvasMode(newMode) {
-    if (mode === newMode)
-        return;
-    mode = newMode;
-    notify();
-}
-/**
- * Changes how the mounted iframe workspace is presented.
- *
- * Canvas starts from the active card centered in the supplied viewport. Card
- * geometry remains durable, but the camera does not carry over from a prior
- * Canvas session.
- */
-export function setCanvasPresentation(next, viewport) {
-    if (presentation === next)
-        return;
-    if (next === "canvas")
-        resetCameraToActiveCard(viewport);
-    presentation = next;
-    presentationTransitioning = !window.matchMedia?.("(prefers-reduced-motion: reduce)").matches;
-    if (presentationTransitionTimer !== null)
-        window.clearTimeout(presentationTransitionTimer);
-    presentationTransitionTimer = presentationTransitioning
-        ? window.setTimeout(() => {
-            presentationTransitionTimer = null;
-            presentationTransitioning = false;
+    finally {
+        notificationDepth -= 1;
+        if (notificationDepth === 0 && notificationPending) {
+            notificationPending = false;
             notify();
-        }, 220)
-        : null;
-    notify();
+        }
+    }
 }
-function resetCameraToActiveCard(viewport) {
-    const activeCardId = selectedCardId ?? focusedCardId;
-    const activeCard = cards.find((card) => card.id === activeCardId) ?? cards[0];
-    if (!activeCard) {
-        cachedBoardCamera = { ...DEFAULT_CAMERA };
+function notify() {
+    if (notificationDepth > 0) {
+        notificationPending = true;
         return;
     }
-    const zoom = 0.9;
-    const view = viewport ?? defaultViewportSize();
-    cachedBoardCamera = {
-        x: view.width / 2 - (activeCard.x + activeCard.width / 2) * zoom,
-        y: view.height / 2 - (activeCard.y + activeCard.height / 2) * zoom,
-        zoom,
-    };
+    listeners.forEach((l) => l());
 }
 /** Adds one card while retaining the existing placement policy. */
 export function addCanvasCard(url, title) {
+    const before = cards;
     const size = lastUsedCardSize ?? defaultViewportSize();
-    const pos = computeNewCardPosition(cards, CARD_GAP);
+    const pos = nextCardPosition(cards, CARD_GAP);
     const card = {
         id: `card-${++cardIdCounter}`,
-        url,
+        content: { kind: "route", url },
         title: title ?? null,
         x: pos.x,
         y: pos.y,
@@ -135,65 +91,90 @@ export function addCanvasCard(url, title) {
     };
     cards = [...cards, card];
     lastUsedCardSize = { width: size.width, height: size.height };
+    recordCreation(before, [card]);
     notify();
     return card;
 }
-/**
- * Appends an agent-created comparison group without disturbing existing cards.
- * Callers validate route URLs and labels at the command boundary; this store
- * function only enforces the durable identity and placement invariants.
- */
-export function appendCanvasComparisonGroup(input) {
-    if (!input.id || !input.label || !input.agentId || input.routes.length === 0)
-        return null;
-    if (comparisonGroups.some((group) => group.id === input.id))
+export function appendAgentRouteCards(groupId, routes) {
+    if (!groupId || routes.length === 0)
         return null;
+    const before = cards;
     const nextCards = [];
     let nextCardsSnapshot = cards;
-    for (const route of input.routes) {
+    for (const route of routes) {
         const size = lastUsedCardSize ?? defaultViewportSize();
-        const pos = computeNewCardPosition(nextCardsSnapshot, CARD_GAP);
+        const pos = nextCardPosition(nextCardsSnapshot, CARD_GAP);
         const card = {
             id: `card-${++cardIdCounter}`,
-            url: route.url,
+            content: { kind: "route", url: route.url },
             title: route.title ?? null,
             x: pos.x,
             y: pos.y,
             width: size.width,
             height: size.height,
-            comparisonGroupId: input.id,
+            groupId: groupId,
         };
         nextCards.push(card);
         nextCardsSnapshot = [...nextCardsSnapshot, card];
         lastUsedCardSize = { width: size.width, height: size.height };
     }
-    const group = {
-        id: input.id,
-        label: input.label,
-        owner: "agent",
-        agentId: input.agentId,
-        cardIds: nextCards.map((card) => card.id),
-        routes: input.routes.map((route) => ({ ...route })),
-    };
     cards = [...cards, ...nextCards];
-    comparisonGroups = [...comparisonGroups, group];
-    notify();
-    return { group, cards: nextCards };
-}
-export function getCanvasComparisonGroup(id) {
-    return comparisonGroups.find((group) => group.id === id);
-}
-/** Removes a group and exactly the cards owned by that group. */
-export function removeCanvasComparisonGroup(id) {
-    const group = getCanvasComparisonGroup(id);
-    if (!group)
-        return null;
-    const groupCardIds = new Set(group.cardIds);
-    cards = cards.filter((card) => !groupCardIds.has(card.id));
-    comparisonGroups = comparisonGroups.filter((candidate) => candidate.id !== id);
-    selectFallbackAfterRemoval(groupCardIds);
+    recordCreation(before, nextCards);
     notify();
-    return group;
+    return nextCards;
+}
+let activateHistoryCard = () => undefined;
+/** Connects canvas replay to the draft controller without coupling the stores. */
+export function setCanvasHistoryActivator(activate) {
+    activateHistoryCard = activate;
+}
+function recordCreation(before, created) {
+    const createdIds = new Set(created.map((card) => card.id));
+    const after = cards.map((card) => ({ ...card }));
+    const createdGroups = new Map(created.flatMap((card) => {
+        const group = card.groupId ? getFrameGroup(card.groupId) : undefined;
+        return group ? [[group.id, group]] : [];
+    }));
+    const oldFocus = selectedCardId ?? focusedCardId ?? before[0]?.id;
+    const shifts = layoutShifts(before, cards);
+    const restore = (redo) => {
+        if (!redo) {
+            // Direct creation drags finish placement after the creation was recorded.
+            // Redo must recover the dropped position, dimensions, and loaded title.
+            for (const [index, recorded] of after.entries()) {
+                const current = createdIds.has(recorded.id) && cards.find((card) => card.id === recorded.id);
+                if (current)
+                    after[index] = { ...current };
+            }
+        }
+        cards = applyLayoutShifts(cards.filter((card) => !createdIds.has(card.id)), shifts, redo);
+        if (redo)
+            cards = reinsertInRecordedOrder(cards, after, createdIds);
+        for (const [id, group] of createdGroups) {
+            if (!cards.some((card) => card.groupId === id))
+                removeFrameGroup(id);
+            else if (!getFrameGroup(id))
+                setFrameGroup(group);
+        }
+        const focus = redo ? created[0]?.id : oldFocus;
+        const target = cards.find((card) => card.id === focus) ?? cards[0];
+        focusedCardId = target?.id ?? null;
+        selectedCardId = focusedCardId;
+        if (target) {
+            activateHistoryCard(target.id);
+            focusCanvasCards([target.id]);
+        }
+        notify();
+    };
+    recordCanvasChange({
+        cardIds: [...createdIds],
+        undo: () => restore(false),
+        redo: () => restore(true),
+        dispose: () => {
+            for (const card of created)
+                releaseUnusedIteration(card);
+        },
+    });
 }
 function selectFallbackAfterRemoval(removedIds) {
     const fallbackId = cards[0]?.id ?? null;
@@ -202,65 +183,98 @@ function selectFallbackAfterRemoval(removedIds) {
     if (removedIds.has(focusedCardId ?? ""))
         focusedCardId = fallbackId;
 }
-/** Clears group metadata while leaving ordinary cards intact. */
-export function clearCanvasComparisonGroups() {
-    if (comparisonGroups.length === 0 && !cards.some((card) => card.comparisonGroupId))
+function releaseUnusedIteration(card) {
+    const artifactId = iterationId(card.content);
+    if (!artifactId || cards.some((candidate) => iterationId(candidate.content) === artifactId))
         return;
-    cards = cards.map(({ comparisonGroupId: _comparisonGroupId, ...card }) => card);
-    comparisonGroups = [];
-    notify();
+    forgetDraft(targetKey(contentEditTarget(card.content)));
+    void removeHtmlArtifact(artifactId).catch((error) => {
+        console.warn("Nudge UI could not remove an unused HTML iteration:", error);
+    });
 }
-/**
- * Finds the route paired with `cardId` inside the agent group `groupId` and
- * replaces that group with `patchGroup`, which receives the paired route
- * index.
- */
-function updateComparisonGroupRoutes(groupId, cardId, patchGroup) {
-    comparisonGroups = comparisonGroups.map((group) => {
-        if (group.id !== groupId)
-            return group;
-        const routeIndex = group.cardIds.indexOf(cardId);
-        if (routeIndex < 0)
-            return group;
-        return patchGroup(group, routeIndex);
+function recordRemoval(before, removed) {
+    let snapshot = removed;
+    const group = removed.groupId ? getFrameGroup(removed.groupId) : undefined;
+    recordCanvasChange({
+        cardIds: [removed.id],
+        undo: () => {
+            cards = reinsertInRecordedOrder(cards, before.map((card) => card.id === removed.id ? snapshot : card), new Set([removed.id]));
+            if (group)
+                setFrameGroup(group);
+            selectCard(removed.id);
+            activateHistoryCard(removed.id);
+            focusCanvasCards([removed.id]);
+        },
+        redo: () => {
+            snapshot = cards.find((card) => card.id === removed.id) ?? snapshot;
+            cards = cards.filter((card) => card.id !== removed.id);
+            selectFallbackAfterRemoval(new Set([removed.id]));
+            notify();
+        },
+        dispose: () => releaseUnusedIteration(snapshot),
     });
 }
-export function removeCanvasCard(id) {
+export function removeCanvasCard(id, { undoable = false } = {}) {
+    if (isDraftLocked())
+        return;
     const removed = cards.find((card) => card.id === id);
     if (!removed)
         return;
+    const before = cards;
+    if (!undoable)
+        discardCanvasHistory(id);
     cards = cards.filter((c) => c.id !== id);
     selectFallbackAfterRemoval(new Set([id]));
-    if (removed?.comparisonGroupId) {
-        updateComparisonGroupRoutes(removed.comparisonGroupId, id, (group, routeIndex) => ({
-            ...group,
-            cardIds: group.cardIds.filter((_cardId, index) => index !== routeIndex),
-            routes: group.routes.filter((_route, index) => index !== routeIndex),
-        }));
-        comparisonGroups = comparisonGroups.filter((group) => group.cardIds.length > 0);
-    }
+    if (undoable)
+        recordRemoval(before, removed);
     notify();
+    if (!undoable)
+        releaseUnusedIteration(removed);
 }
 /**
  * Opens one editor target in the iframe workspace without replacing restored
  * cards or their dimensions.
  */
-export function activateIframeWorkspace(url, viewport) {
+export function activateIframeWorkspace(url, viewport, options = {}) {
     const normalized = normalizeUrl(url);
     if (!normalized || normalized.origin !== window.location.origin)
         return null;
     const targetHref = new URL(url).href;
-    mode = "canvas";
+    setCanvasMode("canvas");
+    const active = cards.find((card) => card.id === (selectedCardId ?? focusedCardId));
+    if (options.preserveIterationFocus && active?.content.kind === "iteration") {
+        const sourceRoute = normalizeUrl(active.content.sourceUrl);
+        if (sourceRoute && normalizedUrlKey(sourceRoute) === normalizedUrlKey(normalized)) {
+            focusedCardId = active.id;
+            selectedCardId = active.id;
+            notify();
+            return active;
+        }
+    }
+    if (options.replaceActiveCard && active && !iterationId(active.content)) {
+        const oldRoute = normalizeUrl(contentSourceUrl(active.content));
+        const changedRoute = !oldRoute || normalizedUrlKey(oldRoute) !== normalizedUrlKey(normalized);
+        const next = {
+            ...active,
+            content: { kind: "route", url: targetHref, ...(contentSourceUrl(active.content) !== targetHref ? { navigationUrl: targetHref } : {}) },
+            ...(changedRoute ? { title: null, groupId: undefined, entrance: undefined } : {}),
+        };
+        cards = cards.map((card) => card.id === active.id ? next : card);
+        focusedCardId = active.id;
+        selectedCardId = active.id;
+        notify();
+        return next;
+    }
     const focused = cards.find((card) => card.id === focusedCardId);
-    const focusedUrl = focused ? normalizeUrl(focused.url) : null;
+    const focusedUrl = focused?.content.kind === "route" ? normalizeUrl(focused.content.url) : null;
     const existing = focused && focusedUrl
         && normalizedUrlKey(focusedUrl) === normalizedUrlKey(normalized)
         ? focused
-        : cards.find((card) => card.url === targetHref) ?? findCardByNormalizedUrl(normalized);
+        : cards.find((card) => card.content.kind === "route" && card.content.url === targetHref) ?? findCardByNormalizedUrl(normalized);
     if (existing) {
         let activated = existing;
-        if (existing.url !== targetHref) {
-            activated = { ...existing, url: targetHref, navigationUrl: targetHref };
+        if (contentSourceUrl(existing.content) !== targetHref) {
+            activated = { ...existing, content: { kind: "route", url: targetHref, navigationUrl: targetHref } };
             cards = cards.map((card) => card.id === existing.id ? activated : card);
         }
         focusedCardId = existing.id;
@@ -273,7 +287,7 @@ export function activateIframeWorkspace(url, viewport) {
         const height = Math.max(150, viewport.height - PRIMARY_CARD_INSET * 2);
         const card = {
             id: `card-${++cardIdCounter}`,
-            url: targetHref,
+            content: { kind: "route", url: targetHref },
             title: null,
             x: 0,
             y: 0,
@@ -284,8 +298,7 @@ export function activateIframeWorkspace(url, viewport) {
         lastUsedCardSize = { width, height };
         focusedCardId = card.id;
         selectedCardId = card.id;
-        cachedBoardCamera = { x: PRIMARY_CARD_INSET, y: PRIMARY_CARD_INSET, zoom: 1 };
-        fitAllRan = true;
+        placeBoardCamera({ x: PRIMARY_CARD_INSET, y: PRIMARY_CARD_INSET, zoom: 1 });
         notify();
         return card;
     }
@@ -296,46 +309,51 @@ export function activateIframeWorkspace(url, viewport) {
     return card;
 }
 export function updateCardTitle(id, title) {
-    const card = cards.find((candidate) => candidate.id === id);
     cards = cards.map((c) => (c.id === id ? { ...c, title } : c));
-    if (card?.comparisonGroupId) {
-        updateComparisonGroupRoutes(card.comparisonGroupId, id, (group, routeIndex) => ({
-            ...group,
-            routes: group.routes.map((route, index) => index === routeIndex ? { ...route, title } : route),
-        }));
-    }
     notify();
 }
 export function updateCardUrl(id, url) {
-    const card = cards.find((candidate) => candidate.id === id);
-    cards = cards.map((c) => (c.id === id ? { ...c, url } : c));
-    if (card?.comparisonGroupId) {
-        updateComparisonGroupRoutes(card.comparisonGroupId, id, (group, routeIndex) => ({
-            ...group,
-            routes: group.routes.map((route, index) => index === routeIndex ? { ...route, url } : route),
-        }));
-    }
+    cards = cards.map((c) => (c.id === id && c.content.kind === "route" ? { ...c, content: { ...c.content, url } } : c));
     notify();
 }
 export function duplicateCard(sourceId) {
+    const before = cards;
     const source = cards.find((c) => c.id === sourceId);
-    if (!source)
+    if (!source || source.content.kind !== "route")
         return null;
     const size = lastUsedCardSize ?? { width: source.width, height: source.height };
-    const pos = computeNewCardPosition(cards, CARD_GAP);
     const card = {
         id: `card-${++cardIdCounter}`,
-        url: source.url,
+        content: { kind: "route", url: source.content.url },
+        entrance: "linked",
         title: source.title,
-        x: pos.x,
-        y: pos.y,
+        x: source.x + source.width + CARD_GAP,
+        y: source.y,
         width: size.width,
         height: size.height,
     };
-    cards = [...cards, card];
+    const index = cards.indexOf(source);
+    cards = [...cards.slice(0, index + 1), card, ...cards.slice(index + 1)];
+    cards = pushOverlappingCards(cards, new Set([source.id, card.id]), CARD_GAP);
     lastUsedCardSize = { width: size.width, height: size.height };
+    recordCreation(before, [card]);
     notify();
-    return card;
+    return cards.find((c) => c.id === card.id);
+}
+export function addCanvasIteration(sourceId, artifactId, position, animateEntrance = true) {
+    const before = cards;
+    const source = cards.find((card) => card.id === sourceId);
+    if (!source)
+        return null;
+    const { x, y } = position ?? iterationPosition(cards, source, CARD_GAP);
+    const iteration = {
+        id: `card-${++cardIdCounter}`, content: { kind: "iteration", sourceUrl: contentSourceUrl(source.content), artifactId }, title: source.title,
+        width: source.width, height: source.height, x, y, entrance: "iteration", animateEntrance,
+    };
+    cards = [...cards, iteration];
+    recordCreation(before, [iteration]);
+    notify();
+    return iteration;
 }
 export function resizeCard(id, width, height, position) {
     cards = cards.map((c) => (c.id === id
@@ -344,88 +362,33 @@ export function resizeCard(id, width, height, position) {
     lastUsedCardSize = { width, height };
     notify();
 }
-export function getBoardCamera() {
-    return cachedBoardCamera;
-}
-export function setBoardCamera(camera) {
-    cachedBoardCamera = {
-        x: camera.x,
-        y: camera.y,
-        zoom: Math.max(MIN_CAMERA_ZOOM, Math.min(MAX_CAMERA_ZOOM, camera.zoom)),
-    };
-    notify();
-}
-export function updateBoardCamera(partial) {
-    const next = { ...cachedBoardCamera, ...partial };
-    if (partial.zoom !== undefined) {
-        next.zoom = Math.max(MIN_CAMERA_ZOOM, Math.min(MAX_CAMERA_ZOOM, partial.zoom));
-    }
-    cachedBoardCamera = next;
-    notify();
-}
 export function fitAllCards(viewport) {
-    fitCanvasCards(cards.map((card) => card.id), viewport);
-}
-/** Fits a selected set of cards while preserving cards outside that set. */
-export function fitCanvasCards(cardIds, viewport) {
-    const selectedIds = new Set(cardIds);
-    const selectedCards = cards.filter((card) => selectedIds.has(card.id));
-    if (selectedCards.length === 0)
-        return false;
-    const { minX, minY, maxX, maxY } = boundsOf(selectedCards);
-    const contentW = maxX - minX;
-    const contentH = maxY - minY;
-    if (contentW <= 0 || contentH <= 0) {
-        cachedBoardCamera = { ...DEFAULT_CAMERA };
-        fitAllRan = true;
-        notify();
-        return true;
-    }
-    const viewW = Math.max(1, (viewport?.width ?? window.innerWidth) - FIT_ALL_PADDING * 2);
-    const viewH = Math.max(1, (viewport?.height ?? window.innerHeight) - FIT_ALL_PADDING * 2);
-    const zoomX = viewW / contentW;
-    const zoomY = viewH / contentH;
-    const zoom = Math.max(MIN_CAMERA_ZOOM, Math.min(zoomX, zoomY, MAX_CAMERA_ZOOM));
-    const contentCenterX = minX + contentW / 2;
-    const contentCenterY = minY + contentH / 2;
-    cachedBoardCamera = {
-        x: -(contentCenterX * zoom) + (viewport?.width ?? window.innerWidth) / 2,
-        y: -(contentCenterY * zoom) + (viewport?.height ?? window.innerHeight) / 2,
-        zoom,
-    };
-    fitAllRan = true;
-    notify();
-    return true;
+    const bounds = selectedBounds(cards.map((card) => card.id));
+    if (!bounds)
+        return;
+    placeBoardCamera(fitCamera(bounds, viewport ?? windowViewport(), FIT_ALL_PADDING) ?? DEFAULT_CAMERA);
 }
 /** Centers a selected set of cards without changing the current zoom. */
 export function focusCanvasCards(cardIds, viewport) {
-    const selectedIds = new Set(cardIds);
-    const selectedCards = cards.filter((card) => selectedIds.has(card.id));
-    if (selectedCards.length === 0)
+    const bounds = selectedBounds(cardIds);
+    if (!bounds)
         return false;
-    const { minX, minY, maxX, maxY } = boundsOf(selectedCards);
-    const viewW = viewport?.width ?? window.innerWidth;
-    const viewH = viewport?.height ?? window.innerHeight;
-    const contentCenterX = minX + (maxX - minX) / 2;
-    const contentCenterY = minY + (maxY - minY) / 2;
-    cachedBoardCamera = {
-        x: -(contentCenterX * cachedBoardCamera.zoom) + viewW / 2,
-        y: -(contentCenterY * cachedBoardCamera.zoom) + viewH / 2,
-        zoom: cachedBoardCamera.zoom,
-    };
-    fitAllRan = true;
-    notify();
+    placeBoardCamera(centerCamera(bounds, getBoardCamera().zoom, viewport ?? windowViewport()));
     return true;
 }
-export function hasFitAllRan() {
-    return fitAllRan;
+function selectedBounds(cardIds) {
+    const selectedIds = new Set(cardIds);
+    const selected = cards.filter((card) => selectedIds.has(card.id));
+    return selected.length ? boundsOf(selected) : null;
 }
-export function resetFitAllFlag() {
-    fitAllRan = false;
+function windowViewport() {
+    return { width: window.innerWidth, height: window.innerHeight };
 }
 export function findCardByNormalizedUrl(normalized) {
     return cards.find((c) => {
-        const n = normalizeUrl(c.url);
+        if (c.content.kind !== "route")
+            return false;
+        const n = normalizeUrl(c.content.url);
         if (!n)
             return false;
         return normalizedUrlKey(n) === normalizedUrlKey(normalized);
@@ -461,20 +424,18 @@ export function setCardPosition(id, x, y) {
     cards = cards.map((c) => (c.id === id ? { ...c, x, y } : c));
     notify();
 }
-export function hydrateCanvasStore(newMode, newCards, newCamera, newComparisonGroups = [], restoredFocusedCardId = null) {
-    mode = newMode;
-    cards = newCards.map((card) => ({ ...card }));
-    comparisonGroups = newComparisonGroups.map((group) => ({
-        ...group,
-        owner: "agent",
-        cardIds: [...group.cardIds],
-        routes: group.routes.map((route) => ({ ...route })),
+export function hydrateCanvasStore(newMode, newCards, newCamera, restoredFocusedCardId = null, restoredPresentation = "focus", restoredGroups = []) {
+    frameGroups.clear();
+    for (const group of restoredGroups)
+        frameGroups.set(group.id, group);
+    cards = newCards.map((card) => ({
+        ...card,
+        groupId: card.content.kind === "route" && card.groupId && frameGroups.has(card.groupId) ? card.groupId : undefined,
     }));
     focusedCardId = newCards.some((card) => card.id === restoredFocusedCardId)
         ? restoredFocusedCardId
         : null;
     selectedCardId = null;
-    cachedBoardCamera = { ...newCamera };
     const lastCard = newCards.at(-1);
     lastUsedCardSize = lastCard
         ? { width: lastCard.width, height: lastCard.height }
@@ -491,25 +452,31 @@ export function hydrateCanvasStore(newMode, newCards, newCamera, newComparisonGr
         }
         cardIdCounter = Math.max(cardIdCounter, maxNum);
     }
-    fitAllRan = true;
+    restoreCanvasView({ mode: newMode, presentation: restoredPresentation, camera: newCamera });
     notify();
 }
-export { subscribe, getMode, getCards, getComparisonGroups, getMode as getCanvasMode, getCards as getCanvasCards, getComparisonGroups as getCanvasComparisonGroups, };
-export function useCanvasMode() {
-    return useSyncExternalStore(subscribe, getMode, getMode);
-}
-export function useCanvasPresentation() {
-    return useSyncExternalStore(subscribe, getPresentation, getPresentation);
-}
-export function useCanvasPresentationTransitioning() {
-    return useSyncExternalStore(subscribe, getPresentationTransitioning, getPresentationTransitioning);
-}
+export { subscribe, getCards, getCards as getCanvasCards, };
 export function useCanvasCards() {
     return useSyncExternalStore(subscribe, getCards, getCards);
 }
-export function useCanvasComparisonGroups() {
-    return useSyncExternalStore(subscribe, getComparisonGroups, getComparisonGroups);
+function frameRoute(card) {
+    const sourceUrl = contentSourceUrl(card.content);
+    const normalized = normalizeUrl(sourceUrl);
+    if (!normalized)
+        return { key: sourceUrl, label: sourceUrl };
+    return {
+        key: `${normalized.origin}${normalized.pathname}`,
+        label: normalized.pathname,
+    };
 }
-export function useBoardCamera() {
-    return useSyncExternalStore(subscribe, getBoardCamera, getBoardCamera);
+/** Returns a route-based label that distinguishes copies and HTML iterations. */
+export function getCanvasCardLabel(card, frameCards = cards) {
+    const route = frameRoute(card);
+    const candidates = frameCards.some((candidate) => candidate.id === card.id) ? frameCards : [...frameCards, card];
+    const matchingFrames = candidates.filter((candidate) => frameRoute(candidate).key === route.key);
+    const matchingKind = matchingFrames.filter((candidate) => candidate.content.kind === card.content.kind);
+    const number = matchingKind.findIndex((candidate) => candidate.id === card.id) + 1;
+    if (card.content.kind === "iteration")
+        return `${route.label} · Iteration ${number}`;
+    return number === 1 ? route.label : `${route.label} · Copy ${number}`;
 }