openplanr 3.1.1 → 3.3.0

package/lib/host-packages/openai/openplanr/runtime/design/scripts/runtime/packages/design/templates/studio/studio.js.sources/21-design-studio.js

@@ -0,0 +1,1597 @@
+
+
+  // lib/design/ui/studio-chrome.mjs
+  function mountDesignChrome(input) {
+    return mountDesignStudioChrome(input);
+  }
+  function mountDesignPanels(input) {
+    return mountStudioPanelDialogs(input);
+  }
+
+  // lib/design/ui/studio.mjs
+  function mountDesignStudio({ payload, stage: artifactStage }) {
+    let design = payload.document, entries = payload.entries, options2 = globalThis.__OPENPLANR_DESIGN_STUDIO_OPTIONS__ ?? {}, storageKey = `openplanr.design-studio.${design.id}`, q = (selector) => document.querySelector(selector), qa = (selector) => [...document.querySelectorAll(selector)], clone = (value) => JSON.parse(JSON.stringify(value)), clamp2 = (value, min2, max2) => Math.min(max2, Math.max(min2, value)), readyVariants = design.variants.filter(({ status: status2 }) => status2 === "ready"), views = ["canvas", "prototype", "walkthrough"], validId = (items, id, fallback) => items.some((item) => (typeof item == "string" ? item : item.id) === id) ? id : fallback, normalizedViewport = (value) => !Number.isFinite(value?.x) || !Number.isFinite(value?.y) || !Number.isFinite(value?.zoom) ? null : {
+      x: clamp2(value.x, -1e7, 1e7),
+      y: clamp2(value.y, -1e7, 1e7),
+      zoom: clamp2(value.zoom, 0.05, 2)
+    };
+    function normalizeState(input = {}) {
+      let view = views.includes(input.view) ? input.view : design.defaultView, viewports = {};
+      for (let name of views) {
+        let viewport = normalizedViewport(input.viewports?.[name]);
+        viewport && (viewports[name] = viewport);
+      }
+      let legacyViewport = Number.isFinite(input.zoom) ? normalizedViewport({
+        x: Number.isFinite(input.camera?.x) ? input.camera.x : 40,
+        y: Number.isFinite(input.camera?.y) ? input.camera.y : 40,
+        zoom: input.zoom
+      }) : null, activeViewport = viewports[view] ?? legacyViewport ?? { x: 40, y: 40, zoom: 0.5 }, state2 = {
+        schemaVersion: "1.1.0",
+        view,
+        screenId: validId(design.screenOrder, input.screenId, design.screenOrder[0]),
+        frameId: validId(design.frames, input.frameId, design.frames[0].id),
+        variantId: validId(readyVariants, input.variantId, design.selectedVariant),
+        selectedVariant: validId(readyVariants, input.selectedVariant, design.selectedVariant),
+        compare: !!input.compare,
+        navOpen: input.navOpen === void 0 ? !0 : !!input.navOpen,
+        reviewOpen: input.reviewOpen === void 0 ? !0 : !!input.reviewOpen,
+        inspectionScale: input.inspectionScale === "actual" ? "actual" : "fit",
+        zoom: activeViewport.zoom,
+        camera: { x: activeViewport.x, y: activeViewport.y },
+        viewports,
+        ratings: {},
+        remix: {},
+        preferences: { selected: [], rejected: [] }
+      };
+      for (let variant of readyVariants) {
+        let rating = input.ratings?.[variant.id];
+        Number.isInteger(rating) && rating >= 1 && rating <= 5 && (state2.ratings[variant.id] = rating), typeof input.remix?.[variant.id] == "string" && (state2.remix[variant.id] = input.remix[variant.id].slice(0, 8192));
+      }
+      for (let kind of ["selected", "rejected"])
+        state2.preferences[kind] = [
+          ...new Set(
+            (Array.isArray(input.preferences?.[kind]) ? input.preferences[kind] : []).filter(
+              (id) => readyVariants.some((variant) => variant.id === id)
+            )
+          )
+        ];
+      return state2;
+    }
+    let savedDraft = null;
+    try {
+      savedDraft = JSON.parse(localStorage.getItem(storageKey) ?? "null");
+    } catch {
+    }
+    let state = normalizeState({
+      ...savedDraft?.state ?? {},
+      ...payload.state ?? {}
+    });
+    function linkedState() {
+      let params = new URLSearchParams(location.hash.slice(1)), linked = {};
+      for (let [key, query] of [
+        ["screenId", "screen"],
+        ["frameId", "frame"],
+        ["variantId", "direction"],
+        ["view", "view"]
+      ])
+        params.has(query) && (linked[key] = params.get(query));
+      return linked;
+    }
+    state = normalizeState({ ...state, ...linkedState() });
+    function recordLocation() {
+      let next = `#${new URLSearchParams({
+        screen: state.screenId,
+        frame: state.frameId,
+        direction: state.variantId,
+        view: state.view
+      })}`;
+      location.hash !== next && history.pushState(null, "", next);
+    }
+    let revision = payload.revision, layout = clone(design.layout ?? {}), undoMoves = [], redoMoves = [], layoutOperations = [], pendingLayoutDraft = savedDraft?.pendingLayout ?? null, layoutSaving = !1, layoutFailed = !1, sessionLost = !1, startupSettled = !1, layoutDragDirty = !1, activeLayoutOperation = null, layoutBlocked = !1, legacyMigrated = !1, legacyServerPositions = payload.state?.positions, stateVersion = null, stage = null, root = null, chrome = null, scroll = null, scrollSize = null, surface = null, grid = null, canvasAttached = !1, canvas = createCanvas({
+      label: "Design canvas",
+      zoom: { min: 0.05, max: 2 },
+      lod: !1,
+      motion: "none",
+      keyboard: { arrows: "none" },
+      shortcutsEnabled: () => !1
+    }), cameraFrame = null, selectionOutline = null, dirty = !1, contentDirty = !1, contentSerial = 0, reviewDirty = !1, reviewSerial = 0, reviewSaving = Promise.resolve(), reviewTimer = null, latestReview = null, serial = 0, saveTimer = null, saving = Promise.resolve(), pollTimer = null, noticeTimer = null, activeNotice = null, dismissedNotices = /* @__PURE__ */ new Map(), readyReported = !1, readyReporting = !1, destroyed = !1, panEnabled = !1, spacePan = !1, spaceReturnTool = null, activeTool = "interact", changingTool = !1, previousReviewMode = "interact", gesture = null, rendering = !1, previousStageZoom = 100, compactViewport = !1, activeArtifactId = "", inspectedSelection = null, viewContextTimer = null, viewContextPending = null, viewContextSignature = null, viewContextConflictRevision = null, viewContextSaving = !1, framesUsedWithComments = /* @__PURE__ */ new Set(), frameReload = 0, walkthroughTransition = null, pendingScreen = null, screenRequest = 0, frameDemandTimer = null, failedSelection = null, frameDemandKey = "", frameDemandGeneration = 0, queuedSelection = null, noteScreenId = null, notesReturnFocus = null, panels = /* @__PURE__ */ new Map(), sectionHeadings = [], sectionZoom = null, canvasPointers = /* @__PURE__ */ new Set(), cleanup = [];
+    function listen(target, event, handler, settings) {
+      target?.addEventListener(event, handler, settings), cleanup.push(() => target?.removeEventListener(event, handler, settings));
+    }
+    function status(message, phase = "saved") {
+      if (!destroyed && !(phase === "saved" && hasPendingLayout())) {
+        if (chrome) chrome.update({ saveLabel: message, savePhase: phase });
+        else {
+          let node = q("[data-design-save-state]");
+          node.textContent = message, node.dataset.status = phase;
+        }
+        q("[data-design-save-state]").title = message;
+      }
+    }
+    function hideNotice() {
+      clearTimeout(noticeTimer);
+      let node = q(".design-notice"), restoreFocus = node.contains(document.activeElement);
+      node.hidden = !0, activeNotice = null, q("[data-design-retry-layout]")?.remove(), q("[data-design-reload-studio]")?.remove(), restoreFocus && q(`button[data-design-view="${state.view}"]`)?.focus();
+    }
+    function clearNotice(key) {
+      dismissedNotices.delete(key), activeNotice?.key === key && hideNotice();
+    }
+    function clearFailedSelection() {
+      failedSelection && clearNotice(`preview-load:${failedSelection.artifactId}`), failedSelection = null;
+    }
+    function notice(message, persistent = !1, key = message) {
+      if (destroyed || dismissedNotices.get(key) === message || sessionLost && key !== "studio-restart" || layoutFailed && hasPendingLayout() && !["layout-save", "studio-restart"].includes(key))
+        return;
+      let node = q(".design-notice");
+      clearTimeout(noticeTimer), q("[data-design-retry-layout]")?.remove(), q("[data-design-reload-studio]")?.remove(), activeNotice = { key, message, persistent }, q("[data-design-notice-message]").textContent = message, node.hidden = !1, persistent || (noticeTimer = setTimeout(hideNotice, 6e3));
+    }
+    function storeDraft() {
+      try {
+        localStorage.setItem(
+          storageKey,
+          JSON.stringify({
+            revision,
+            stateVersion,
+            state: !legacyMigrated && (legacyServerPositions || savedDraft?.state?.positions) ? {
+              ...state,
+              positions: { ...savedDraft?.state?.positions, ...legacyServerPositions }
+            } : state,
+            unsaved: contentDirty,
+            personalPending: dirty && !contentDirty,
+            pendingLayout: pendingLayoutDraft ?? (layoutOperations.length ? {
+              contentIdentity: payload.contentIdentity,
+              operations: layoutOperations.map((operation) => ({
+                revision: operation.revision ?? revision,
+                boards: operation.replayBoards ?? operation.input().boards
+              }))
+            } : void 0)
+          })
+        );
+      } catch (error) {
+        notice(`The browser draft could not be stored: ${error.message}`, !0, "draft-storage");
+      }
+    }
+    async function jsonRequest(url, init = {}) {
+      let response = await fetch(url, { credentials: "same-origin", ...init }), result = await response.json().catch(() => ({}));
+      if (!response.ok) {
+        let error = new Error(
+          result.error?.message ?? result.error ?? result.message ?? `Save failed (${response.status}).`
+        );
+        throw error.conflict = response.status === 409, error.statusCode = response.status, error;
+      }
+      return result;
+    }
+    function stageSize() {
+      let size4 = scrollSize ?? { width: scroll.clientWidth, height: scroll.clientHeight };
+      return typeof ResizeObserver == "function" && (scrollSize = size4), size4;
+    }
+    function scheduleViewContext() {
+      if (!options2.viewContextUrl || !stage || !scroll || destroyed || state.view === "canvas" && !canvasAttached || viewContextConflictRevision !== null && revision === viewContextConflictRevision) return;
+      viewContextConflictRevision = null, inspectedSelection?.artifactId !== activeArtifactId && (inspectedSelection = null);
+      let board = ({ screenId, frameId, variantId }) => ({ screenId, frameId, variantId }), viewport = state.view === "canvas" ? stageSize() : null, visible = state.view === "canvas" ? visibleEntries().filter((entry) => {
+        let bounds = placedBoardBounds(entry);
+        if (!bounds) return !1;
+        let { width, height } = bounds, { x, y } = canvas.worldToScreen(bounds);
+        return x < viewport.width && y < viewport.height && x + width * state.zoom > 0 && y + height * state.zoom > 0;
+      }) : [entryFor()];
+      visible.sort(
+        (a, b) => design.screenOrder.indexOf(a.screenId) - design.screenOrder.indexOf(b.screenId)
+      );
+      let context = {
+        revision,
+        view: state.view,
+        visibleScreens: visible.map(board),
+        selected: { ...board(state), planrId: inspectedSelection?.planrId ?? null },
+        dirty: contentDirty || reviewDirty || layoutDragDirty || layoutOperations.length > 0
+      }, signature = JSON.stringify(context);
+      signature !== viewContextSignature && (viewContextSignature = signature, viewContextPending = signature, clearTimeout(viewContextTimer), viewContextTimer = setTimeout(() => {
+        viewContextTimer = null, flushViewContext();
+      }, 250));
+    }
+    async function flushViewContext() {
+      if (viewContextSaving || !viewContextPending || destroyed) return;
+      let body = viewContextPending;
+      viewContextPending = null, viewContextSaving = !0;
+      try {
+        await jsonRequest(options2.viewContextUrl, {
+          method: "PUT",
+          headers: { "Content-Type": "application/json", "x-openplanr-design": "1" },
+          body
+        }), clearNotice("view-context");
+      } catch (error) {
+        viewContextSignature = null, error.conflict ? (viewContextConflictRevision = JSON.parse(body).revision, viewContextPending = null, clearTimeout(viewContextTimer), viewContextTimer = null, clearNotice("view-context"), revision !== viewContextConflictRevision && scheduleViewContext()) : notice(`View context could not be synchronized: ${error.message}`, !1, "view-context");
+      } finally {
+        viewContextSaving = !1, viewContextPending && viewContextTimer === null && flushViewContext();
+      }
+    }
+    function persist({ content = !1 } = {}) {
+      dirty = !0, serial += 1, content && (contentDirty = !0, contentSerial += 1, status("Saving changes", "saving")), storeDraft(), scheduleViewContext(), root.dispatchEvent(
+        new CustomEvent("planr:design-state-change", {
+          bubbles: !0,
+          detail: clone(state)
+        })
+      ), clearTimeout(saveTimer), saveTimer = setTimeout(flush, 180);
+    }
+    function flushState() {
+      if (clearTimeout(saveTimer), !dirty) return saving;
+      let captured = clone(state), capturedSerial = serial, capturedContent = contentDirty, capturedContentSerial = contentSerial;
+      return saving = saving.catch(() => {
+      }).then(async () => {
+        if (!destroyed)
+          try {
+            !legacyMigrated && (legacyServerPositions || savedDraft?.state?.positions) && (captured.positions = { ...savedDraft?.state?.positions, ...legacyServerPositions });
+            let result;
+            !capturedContent && typeof options2.savePersonalState == "function" ? result = await options2.savePersonalState(captured, { revision, stateVersion }) : typeof options2.saveState == "function" ? result = await options2.saveState(captured, {
+              revision,
+              stateVersion,
+              personal: !capturedContent
+            }) : options2.stateUrl && (result = await jsonRequest(options2.stateUrl, {
+              method: "PUT",
+              headers: { "Content-Type": "application/json" },
+              body: JSON.stringify({ state: captured, revision, stateVersion })
+            })), result?.stateVersion !== void 0 && (stateVersion = result.stateVersion), result?.revision !== void 0 && (revision = result.revision), clearNotice("personal-save"), capturedContent && clearNotice("content-save"), capturedSerial === serial && (dirty = !1), capturedContent && capturedContentSerial === contentSerial && (contentDirty = !1, !reviewDirty && !layoutOperations.length && status(
+              options2.stateUrl || options2.saveState ? "All changes saved" : "Saved in this browser"
+            )), storeDraft(), scheduleViewContext();
+          } catch (error) {
+            capturedContent && status(
+              error.conflict ? "Save conflict" : "Disconnected · unsaved",
+              error.conflict ? "failed" : "disconnected"
+            ), notice(
+              capturedContent ? error.conflict ? "This review changed in another window. Your unsaved edits remain in this browser. Reload to read the saved review before applying them again." : "Changes could not be saved. Your draft remains in this browser; reconnect to retry." : "Canvas preferences could not be synchronized. Your arrangement remains saved in this browser.",
+              !0,
+              capturedContent ? "content-save" : "personal-save"
+            ), storeDraft();
+          }
+      }), saving;
+    }
+    function layoutUrl() {
+      return options2.layoutUrl ?? options2.stateUrl?.replace(/design-state$/, "design-layout");
+    }
+    function canSaveLayout() {
+      return !!(options2.saveLayout || layoutUrl());
+    }
+    function hasPendingLayout() {
+      return !!(pendingLayoutDraft || layoutOperations.length || layoutSaving || layoutDragDirty);
+    }
+    function studioRestarted() {
+      sessionLost = !0, storeDraft(), status(hasPendingLayout() ? "Layout unsaved · reload required" : "Reload required", "failed"), notice(
+        "Studio restarted. Reload to reconnect; pending board moves remain in this browser.",
+        !0,
+        "studio-restart"
+      );
+      let reload = document.createElement("button");
+      reload.type = "button", reload.dataset.designReloadStudio = "", reload.textContent = "Reload", reload.addEventListener("click", () => {
+        storeDraft(), window.location.reload();
+      }), q(".design-notice").append(reload);
+    }
+    function applyBoardMoves(boards) {
+      for (let [key, point2] of Object.entries(boards))
+        layout.boards ??= {}, point2 === null ? delete layout.boards[key] : layout.boards[key] = { ...layout.boards[key], ...point2 };
+    }
+    function restorePendingLayout() {
+      if (!pendingLayoutDraft) return;
+      let pending = pendingLayoutDraft;
+      if (pendingLayoutDraft = null, layoutBlocked || !payload.contentIdentity || pending.contentIdentity !== payload.contentIdentity) {
+        storeDraft(), notice(
+          "Pending board moves were dropped because authored content changed. Review the current design before moving boards again.",
+          !0,
+          "layout-dropped"
+        );
+        return;
+      }
+      if (!(Array.isArray(pending.operations) && pending.operations.every(
+        (operation) => typeof operation?.revision == "string" && operation.boards && typeof operation.boards == "object" && !Array.isArray(operation.boards) && Object.entries(operation.boards).every(
+          ([key, point2]) => entries.some((entry) => boardKey(entry) === key) && (point2 === null || Number.isFinite(point2?.x) && Number.isFinite(point2?.y) && Math.abs(point2.x) <= 1e7 && Math.abs(point2.y) <= 1e7)
+        )
+      ))) {
+        storeDraft(), notice(
+          "Pending board moves could not be recovered because the browser draft contains invalid positions.",
+          !0,
+          "layout-dropped"
+        );
+        return;
+      }
+      for (let operation of pending.operations) {
+        let boards = clone(operation.boards);
+        applyBoardMoves(boards), layoutOperations.push({ revision, input: () => ({ boards }) });
+      }
+      storeDraft(), render(), layoutOperations.length && status("Recovering layout", "saving");
+    }
+    function newRevisionNotice() {
+      notice(
+        "A new design revision is ready. Save or recover this browser’s unsaved changes before reloading.",
+        !0,
+        "new-revision"
+      );
+    }
+    async function rebaseLayout({ announce = !0, expectedRevision = revision } = {}) {
+      let url = options2.statusUrl ?? options2.stateUrl?.replace(/design-state$/, "design-status");
+      if (!url) throw new Error("Layout conflict recovery requires a design status URL.");
+      let current = await jsonRequest(url);
+      if (revision !== expectedRevision) return !0;
+      if (typeof current.revision != "string" || typeof current.contentIdentity != "string")
+        throw new Error("Design status did not return a revision and authored content identity.");
+      if (current.contentIdentity !== payload.contentIdentity)
+        return layoutBlocked = !0, layoutOperations.length = 0, layoutFailed = !1, storeDraft(), status("Design changed · reload required", "failed"), notice(
+          "A new design revision is ready. Pending board moves were dropped because authored content changed. Reload to read the current design.",
+          !0,
+          "new-revision"
+        ), !1;
+      revision = current.revision, layout = clone(current.layout ?? {});
+      let discardedRestores = layoutOperations.some((operation) => operation.restore);
+      for (let index2 = layoutOperations.length - 1; index2 >= 0; index2--)
+        layoutOperations[index2].restore && layoutOperations.splice(index2, 1);
+      for (let moves of [undoMoves, redoMoves])
+        for (let index2 = moves.length - 1; index2 >= 0; index2--)
+          moves[index2].afterRevision !== null && moves.splice(index2, 1);
+      for (let operation of layoutOperations) {
+        operation.revision = revision;
+        let boards = operation.input().boards;
+        if (operation.move?.applied && (operation.move.before = clone(layout)), applyBoardMoves(boards), operation.move?.applied) operation.move.after = clone(layout);
+        else if (operation.move) {
+          let move = operation.move, movedBoard = move.after.boards?.[move.key];
+          move.before = clone(layout), move.after = clone(layout), movedBoard ? move.after.boards = { ...move.after.boards, [move.key]: movedBoard } : move.after.boards && delete move.after.boards[move.key];
+        }
+      }
+      return storeDraft(), render(), announce && notice(
+        `The layout changed in another window. Pending board moves were rebased onto the current revision.${discardedRestores ? " Stale undo and redo operations were dropped." : ""}`,
+        !0,
+        "layout-rebase"
+      ), !0;
+    }
+    function flushLayout() {
+      return layoutSaving || layoutBlocked || sessionLost || !layoutOperations.length || (layoutSaving = !0, status("Saving layout", "saving"), saving = saving.then(async () => {
+        let rebased = !1;
+        try {
+          for (; layoutOperations.length; ) {
+            let operation = layoutOperations[0], input = { revision, ...operation.input() };
+            activeLayoutOperation = operation, operation.attempted = !0, operation.appliedAtSave = operation.move?.applied, status("Saving layout", "saving");
+            let result;
+            try {
+              if (typeof options2.saveLayout == "function") result = await options2.saveLayout(input);
+              else if (layoutUrl())
+                result = await jsonRequest(layoutUrl(), {
+                  method: "PUT",
+                  headers: { "Content-Type": "application/json", "x-openplanr-design": "1" },
+                  body: JSON.stringify(input)
+                });
+              else
+                throw new Error("Layout save requires a studio layout URL or saveLayout callback.");
+            } catch (error) {
+              if (activeLayoutOperation = null, operation.canceled = !1, !error.conflict || rebased) throw error;
+              if (rebased = !0, !await rebaseLayout()) return;
+              continue;
+            }
+            if (typeof result.revision != "string")
+              throw new Error("Layout save did not return a design revision.");
+            operation.saved?.(revision, result.revision), revision = result.revision, layoutOperations.shift(), activeLayoutOperation = null, storeDraft(), scheduleViewContext();
+          }
+          layoutFailed = !1, clearNotice("layout-save");
+        } catch (error) {
+          if (layoutFailed = !0, storeDraft(), error.statusCode === 404) {
+            studioRestarted();
+            return;
+          }
+          status(error.conflict ? "Layout conflict" : "Layout unsaved", "failed"), notice(`Board layout could not be saved: ${error.message}`, !0, "layout-save");
+          let retry = document.createElement("button");
+          retry.type = "button", retry.dataset.designRetryLayout = "", retry.textContent = "Retry", retry.addEventListener("click", () => {
+            flushLayout();
+          }), q(".design-notice").append(retry);
+        } finally {
+          activeLayoutOperation = null, layoutSaving = !1, !hasPendingLayout() && !contentDirty && !reviewDirty && !layoutBlocked && !sessionLost && status("All changes saved");
+        }
+      })), saving;
+    }
+    function boardKey(entry) {
+      return `${entry.screenId}/${entry.frameId}/${entry.variantId}`;
+    }
+    function queueMove(move) {
+      let point2 = (value) => {
+        let board = value.boards?.[move.key];
+        return board ? { x: board.x, y: board.y } : null;
+      }, operation = {
+        revision,
+        move,
+        boards: { [move.key]: point2(move.after) },
+        input: () => ({ boards: operation.boards }),
+        saved(previous, next) {
+          if (operation.appliedAtSave && (move.beforeRevision = previous, move.afterRevision = next), operation.canceled) {
+            let boards = { [move.key]: point2(layout) };
+            layoutOperations.push({ input: () => ({ boards }) });
+          }
+        }
+      };
+      layoutOperations.push(operation), storeDraft(), scheduleViewContext(), flushLayout();
+    }
+    function completeMove(entry, before) {
+      let after = clone(layout);
+      if (JSON.stringify(before) === JSON.stringify(after)) return;
+      let move = {
+        key: boardKey(entry),
+        before,
+        after,
+        beforeRevision: null,
+        afterRevision: null,
+        applied: !0
+      };
+      undoMoves.push(move), redoMoves.length = 0, storeDraft(), canSaveLayout() && queueMove(move);
+    }
+    function restoreMove(redo) {
+      let source = redo ? redoMoves : undoMoves, target = redo ? undoMoves : redoMoves, move = source.pop();
+      if (move && (move.applied = redo, layout = clone(redo ? move.after : move.before), target.push(move), render(), !!canSaveLayout())) {
+        if (move.beforeRevision === null || move.afterRevision === null) {
+          let pending = layoutOperations.find((operation) => operation.move === move);
+          if (pending) {
+            let board = layout.boards?.[move.key];
+            pending.boards = { [move.key]: board ? { x: board.x, y: board.y } : null };
+          }
+          pending === activeLayoutOperation && pending ? pending.canceled = !redo : pending?.attempted || (pending && layoutOperations.splice(layoutOperations.indexOf(pending), 1), redo && queueMove(move)), !layoutOperations.length && !layoutSaving && (layoutFailed = !1, clearNotice("layout-save"), !contentDirty && !reviewDirty && status("All changes saved")), storeDraft(), scheduleViewContext();
+          return;
+        }
+        layoutOperations.push({
+          revision,
+          restore: !0,
+          replayBoards: {
+            [move.key]: layout.boards?.[move.key] ? {
+              x: layout.boards[move.key].x,
+              y: layout.boards[move.key].y
+            } : null
+          },
+          input: () => ({ restoreRevision: redo ? move.afterRevision : move.beforeRevision })
+        }), storeDraft(), scheduleViewContext(), flushLayout();
+      }
+    }
+    function migrateLegacyPositions() {
+      if (layoutBlocked) return;
+      if (!legacyServerPositions && !savedDraft?.state?.positions) {
+        legacyMigrated = !0;
+        return;
+      }
+      let boards = {};
+      for (let positions of [legacyServerPositions, savedDraft?.state?.positions])
+        for (let entry of entries) {
+          let key = boardKey(entry), point2 = positions?.[entry.artifactId];
+          layout.boards?.[key] !== void 0 || boards[key] !== void 0 || !point2 || !Number.isFinite(point2.x) || !Number.isFinite(point2.y) || Math.abs(point2.x) > 1e7 || Math.abs(point2.y) > 1e7 || (boards[key] = { x: Math.round(point2.x), y: Math.round(point2.y) });
+        }
+      Object.keys(boards).length && (layout.boards = { ...layout.boards, ...boards }), render();
+      let migrated = () => {
+        legacyMigrated = !0, legacyServerPositions = void 0, storeDraft(), options2.stateUrl && persist();
+      };
+      Object.keys(boards).length && canSaveLayout() ? (layoutOperations.push({ revision, input: () => ({ boards }), saved: migrated }), storeDraft()) : canSaveLayout() && migrated();
+    }
+    function reviewUrl() {
+      return options2.reviewUrl ?? (options2.stateUrl ? options2.stateUrl.replace(/design-state$/, "review") : null);
+    }
+    function storeReviewDraft() {
+      if (latestReview)
+        try {
+          localStorage.setItem(
+            `${storageKey}.review`,
+            JSON.stringify({ review: latestReview, unsaved: reviewDirty })
+          );
+        } catch {
+        }
+    }
+    function flushReview() {
+      if (clearTimeout(reviewTimer), !reviewDirty || !latestReview) return reviewSaving;
+      let captured = clone(latestReview), capturedSerial = reviewSerial;
+      return reviewSaving = reviewSaving.catch(() => {
+      }).then(async () => {
+        try {
+          reviewUrl() && await jsonRequest(reviewUrl(), {
+            method: "PUT",
+            headers: { "Content-Type": "application/json" },
+            body: JSON.stringify({ review: captured })
+          }), clearNotice("review-save"), capturedSerial === reviewSerial && (reviewDirty = !1, !contentDirty && !layoutOperations.length && status(reviewUrl() ? "All changes saved" : "Saved in this browser")), storeReviewDraft(), scheduleViewContext();
+        } catch (error) {
+          status("Comments unsaved", "disconnected"), notice(
+            `Comments could not be saved: ${error.message} Your draft remains in this browser.`,
+            !0,
+            "review-save"
+          ), storeReviewDraft();
+        }
+      }), reviewSaving;
+    }
+    function flush() {
+      return Promise.all([flushState(), flushLayout(), flushReview()]);
+    }
+    function entryFor(screenId = state.screenId, variantId = state.variantId, frameId = state.frameId) {
+      return entries.find(
+        (entry) => entry.screenId === screenId && entry.variantId === variantId && entry.frameId === frameId
+      );
+    }
+    function viewportFor(entry) {
+      let frame = design.frames.find(({ id }) => id === entry.frameId);
+      return stage.getState().artifacts.find(({ id }) => id === entry.artifactId)?.viewport ?? designFrameViewport(design, frame);
+    }
+    function visibleEntries() {
+      return entries.filter(
+        (entry) => (state.view === "canvas" && state.compare || entry.variantId === state.variantId) && (state.view === "canvas" || entry.screenId === state.screenId && entry.frameId === state.frameId)
+      );
+    }
+    function syncFrameGestures(frame, panel) {
+      frame?.__openPlanrBridge?.setViewportGestures?.(state.view === "canvas" && !panel.hidden);
+    }
+    function updatePan() {
+      root.dataset.designPanActive = String(state.view === "canvas" && (panEnabled || spacePan)), root.dataset.designTool = activeTool, canvas.setPointerMode(root.dataset.designInspect === "true" ? "none" : "pan"), q("[data-design-pan]").setAttribute("aria-pressed", String(activeTool === "pan")), q('[data-planr-mode="interact"]').setAttribute(
+        "aria-pressed",
+        String(activeTool === "interact")
+      ), q('[data-planr-mode="comment"]').setAttribute(
+        "aria-pressed",
+        String(activeTool === "annotate")
+      ), q("[data-design-inspect-mode]")?.setAttribute("aria-pressed", String(activeTool === "inspect"));
+      for (let [id, panel] of panels) {
+        let frame = stage.getFrame(id);
+        if (frame) {
+          let tabIndex = activeTool === "interact" && !panel.hidden && stage.getState().status === "ready" ? 0 : -1;
+          frame.tabIndex !== tabIndex && (frame.tabIndex = tabIndex), syncFrameGestures(frame, panel);
+        }
+      }
+    }
+    function finishGesture() {
+      if (!gesture) return;
+      let completed = gesture, pointerId = completed.pointerId;
+      gesture = null, layoutDragDirty = !1;
+      try {
+        scroll.hasPointerCapture?.(pointerId) && scroll.releasePointerCapture(pointerId);
+      } catch {
+      }
+      updatePan(), completed.mode === "artboard" ? completeMove(
+        entries.find((entry) => entry.artifactId === completed.artifactId),
+        completed.before
+      ) : persist(), scheduleViewContext();
+    }
+    function noteFramesUsedWithComments() {
+      if (!(state.view !== "canvas" || activeTool !== "annotate"))
+        for (let id of stage.getLoadedArtifactIds()) framesUsedWithComments.add(id);
+    }
+    function reloadFrameUsedWithComments(artifactId) {
+      if (!framesUsedWithComments.delete(artifactId) || !stage.getLoadedArtifactIds().includes(artifactId)) return;
+      let reload = ++frameReload;
+      root.dataset.designScreenLoading = "true";
+      let settle = () => destroyed || reload !== frameReload ? !1 : (pendingScreen || delete root.dataset.designScreenLoading, updateFramePlaceholders(), !0);
+      stage.retryFrames([artifactId]).then(settle, (error) => {
+        !settle() || error.name === "AbortError" || notice(
+          "This screen could not reload. Select it again to retry; your review is preserved.",
+          !0,
+          `preview-load:${artifactId}`
+        );
+      });
+    }
+    function setTool(tool) {
+      if (["interact", "annotate", "pan", "inspect"].includes(tool) && !(tool === "pan" && state.view !== "canvas") && !(tool === "annotate" && root.hasAttribute("data-planr-room-comments-paused"))) {
+        if (finishWalkthroughTransition(), finishGesture(), canvasAttached && canvasPointers.size) {
+          saveViewport();
+          for (let pointerId of canvasPointers)
+            scroll.hasPointerCapture?.(pointerId) && scroll.releasePointerCapture(pointerId);
+          canvasPointers.clear();
+        }
+        spacePan = !1, spaceReturnTool = null, activeTool = tool, panEnabled = tool === "pan", previousReviewMode = tool === "annotate" ? "comment" : "interact", changingTool = !0;
+        try {
+          stage.dispatch({ type: "set-review-mode", reviewMode: previousReviewMode });
+        } finally {
+          changingTool = !1;
+        }
+        noteFramesUsedWithComments(), root.dispatchEvent(new CustomEvent("planr:design-tool-change", { detail: { tool } })), updatePan();
+      }
+    }
+    function releaseTemporaryPan() {
+      let previous = spaceReturnTool;
+      finishGesture(), spacePan && setTool(previous || "interact");
+    }
+    function readCanvasCamera() {
+      if (!canvasAttached || state.view !== "canvas") return;
+      let { x, y, scale } = cameraToScreenTranslate(canvas.getCamera());
+      state.camera = { x, y }, state.zoom = scale;
+    }
+    function applyCanvasCamera() {
+      canvas.setCamera(cameraFromScreenTranslate({ ...state.camera, scale: state.zoom })), saveViewport();
+    }
+    function saveViewport() {
+      readCanvasCamera(), state.viewports[state.view] = {
+        x: state.camera.x,
+        y: state.camera.y,
+        zoom: state.zoom
+      };
+    }
+    function restoreViewport(view) {
+      let viewport = state.viewports[view];
+      return viewport ? (state.camera = { x: viewport.x, y: viewport.y }, state.zoom = viewport.zoom, canvasAttached && view === "canvas" && applyCanvasCamera(), !0) : !1;
+    }
+    function switchView(view, { save = !0 } = {}) {
+      if (!views.includes(view)) throw new TypeError(`Unknown design view: ${view}`);
+      if (view === state.view) return;
+      let queued = pendingScreen ? null : queuedSelection;
+      finishWalkthroughTransition(), closeDesignNotes(), saveViewport(), state.view = view;
+      let restored = view === "canvas" && restoreViewport(view);
+      setTool(view === "canvas" && activeTool === "annotate" ? "annotate" : "interact"), root.dispatchEvent(new CustomEvent("planr:design-view-change", { detail: { view } })), render(), restored || fit({ save: !1 }), queued && selectEntry(queued.entry, { ...queued.settings, save: !1 }), save && (persist(), recordLocation());
+    }
+    function syncCanvasChrome() {
+      if (!canvasAttached) return;
+      let stageRect = scroll.getBoundingClientRect();
+      for (let [id, selector, open] of [
+        ["toolbar", ".design-toolbar", !0],
+        ["tools", ".design-canvas-tools", !0],
+        ["context", ".design-stage-context", !0],
+        ["navigator", ".design-navigator", state.navOpen],
+        ["review", ".planr-review-rail", stage.getState().railOpen]
+      ]) {
+        let rect2 = q(selector).getBoundingClientRect(), x = Math.max(0, rect2.left - stageRect.left), y = Math.max(0, rect2.top - stageRect.top), width = Math.max(0, Math.min(stageRect.width, rect2.right - stageRect.left) - x), height = Math.max(0, Math.min(stageRect.height, rect2.bottom - stageRect.top) - y), edge = width >= height ? y + height / 2 < stageRect.height / 2 ? "top" : "bottom" : x + width / 2 < stageRect.width / 2 ? "left" : "right";
+        canvas.setChrome({
+          id,
+          edge,
+          rect: { x, y, width, height },
+          open: open && width > 0 && height > 0
+        });
+      }
+    }
+    function placedBoardBounds(entry) {
+      let panel = panels.get(entry.artifactId);
+      if (!panel || panel.hidden) return null;
+      let bounds = {
+        ...viewportFor(entry),
+        x: parseFloat(panel.style.left),
+        y: parseFloat(panel.style.top)
+      };
+      return Object.values(bounds).every(Number.isFinite) ? bounds : null;
+    }
+    function syncCanvasNodes() {
+      if (!canvasAttached) return;
+      grid.style.setProperty("--design-zoom", String(state.zoom));
+      let placed = visibleEntries().flatMap((entry) => {
+        let bounds = placedBoardBounds(entry);
+        return bounds ? [{ entry, bounds }] : [];
+      }), nodes = placed.flatMap(({ entry, bounds }) => [
+        { id: entry.artifactId, bounds },
+        {
+          id: `label:${entry.artifactId}`,
+          bounds: { ...bounds, y: bounds.y - 34 / state.zoom, height: 28 / state.zoom }
+        }
+      ]), labels = placed.map(({ entry }) => {
+        let label = panels.get(entry.artifactId).querySelector(".design-artboard-label"), title = label.querySelector("strong"), size4 = label.querySelector("span");
+        return label.title = `${title.textContent} · ${size4.textContent}`, size4.hidden = !1, { title, size: size4 };
+      });
+      sectionHeadings.forEach((heading, index2) => {
+        let section = layout.sections[index2];
+        heading.hidden = !1, heading.style.fontSize = `${clamp2(28 * state.zoom, 14, 28) / state.zoom}px`, section.maxW && (heading.style.maxWidth = `${section.maxW / state.zoom}px`);
+      });
+      let headingSizes = sectionHeadings.map((heading) => ({
+        width: heading.offsetWidth,
+        height: heading.offsetHeight
+      })), truncated = labels.map(
+        ({ title, size: size4 }) => title.scrollWidth > title.clientWidth || size4.scrollWidth > size4.clientWidth
+      );
+      sectionHeadings.forEach((heading, index2) => {
+        let section = layout.sections[index2], { width, height } = headingSizes[index2], below = placed.filter(
+          ({ bounds: board }) => board.y >= section.y && section.x < board.x + board.width && section.x + width > board.x
+        ), bottom = Math.min(section.y, ...below.map(({ bounds: bounds2 }) => bounds2.y - 42 / state.zoom));
+        heading.style.top = `${bottom - height}px`;
+        let bounds = {
+          x: parseFloat(heading.style.left),
+          y: parseFloat(heading.style.top),
+          width,
+          height
+        };
+        heading.hidden = nodes.some(
+          ({ bounds: other }) => bounds.x < other.x + other.width && bounds.x + bounds.width > other.x && bounds.y < other.y + other.height && bounds.y + bounds.height > other.y
+        ), !heading.hidden && Object.values(bounds).every(Number.isFinite) && nodes.push({ id: `section:${section.id}`, bounds });
+      }), labels.forEach(({ size: size4 }, index2) => {
+        size4.hidden = truncated[index2];
+      }), sectionZoom = state.zoom, canvas.setNodes(nodes);
+      for (let { entry } of placed)
+        canvas.registerNodeElement(entry.artifactId, panels.get(entry.artifactId));
+      canvas.setSelection(
+        placed.some(({ entry }) => entry.artifactId === activeArtifactId) ? [activeArtifactId] : []
+      );
+    }
+    function syncCanvas() {
+      if (state.view !== "canvas") {
+        canvasAttached && canvas.detach(), canvasPointers.clear(), canvasAttached = !1;
+        return;
+      }
+      canvasAttached || (canvas.attach({ stage: scroll, world: grid }), canvasAttached = !0, applyCanvasCamera()), syncCanvasNodes(), syncCanvasChrome();
+    }
+    function centerEntry(entry) {
+      state.view !== "canvas" || !placedBoardBounds(entry) || fit({ selection: entry, save: !1, maxZoom: state.zoom });
+    }
+    function updateDesignNotes() {
+      let notes = q("[data-design-notes]");
+      if (!notes) return;
+      notes.querySelector(":scope > summary").setAttribute("aria-expanded", String(notes.open));
+      for (let button of qa("[data-design-note]"))
+        button.setAttribute(
+          "aria-expanded",
+          String(notes.open && button.dataset.designNote === noteScreenId)
+        );
+      if (!notes.open) return;
+      let panel = q(".design-guidance-panel"), anchor = notes.querySelector(":scope > summary").getBoundingClientRect(), width = panel.getBoundingClientRect().width || Math.min(340, window.innerWidth - 24), top = clamp2(anchor.bottom + 7, 12, Math.max(12, window.innerHeight - 100));
+      panel.style.left = `${clamp2(anchor.right - width, 12, Math.max(12, window.innerWidth - width - 12))}px`, panel.style.top = `${top}px`, panel.style.maxHeight = `${Math.min(520, Math.max(60, window.innerHeight - top - 12))}px`;
+    }
+    function closeDesignNotes({ restoreFocus = !1 } = {}) {
+      let notes = q("[data-design-notes]");
+      notes?.open && (notes.open = !1, noteScreenId = null, updateDesignNotes(), restoreFocus && (notesReturnFocus?.isConnected ? notesReturnFocus : notes.querySelector(":scope > summary"))?.focus({ preventScroll: !0 }), notesReturnFocus = null);
+    }
+    function openDesignNote(screenId, trigger) {
+      let notes = q("[data-design-notes]");
+      if (!notes) return;
+      if (notes.open && noteScreenId === screenId) {
+        closeDesignNotes();
+        return;
+      }
+      notesReturnFocus = trigger, noteScreenId = screenId, notes.open = !0;
+      let target = null;
+      for (let item of qa("[data-design-note-screen]")) {
+        let selected = item.dataset.designNoteScreen === screenId;
+        item.open = selected, item.dataset.active = String(selected), selected && (target = item);
+      }
+      updateDesignNotes();
+      let panel = q(".design-guidance-panel");
+      target && (panel.scrollTop = Math.max(0, target.offsetTop - panel.querySelector("header").offsetHeight));
+    }
+    function render() {
+      if (!(!stage || rendering || destroyed)) {
+        rendering = !0;
+        try {
+          window.innerWidth <= 680 ? root.style.setProperty(
+            "--planr-toolbar-height",
+            `${q(".design-toolbar").getBoundingClientRect().height}px`
+          ) : root.style.removeProperty("--planr-toolbar-height");
+          let screen = design.screens.find(({ id }) => id === state.screenId), variant = design.variants.find(({ id }) => id === state.variantId), stageState = stage.getState();
+          root.dataset.designView = state.view, root.dataset.designNavOpen = String(state.navOpen);
+          let navigator2 = q(".design-navigator");
+          navigator2.inert = !state.navOpen, navigator2.setAttribute("aria-hidden", String(!state.navOpen));
+          for (let toggle of qa("[data-design-toggle-nav]"))
+            toggle.setAttribute("aria-expanded", String(state.navOpen));
+          for (let button of qa("[data-design-view]"))
+            button.tagName === "BUTTON" && button.setAttribute("aria-pressed", String(button.dataset.designView === state.view));
+          for (let button of qa("[data-design-screen]"))
+            button.setAttribute(
+              "aria-current",
+              button.dataset.designScreen === state.screenId ? "page" : "false"
+            );
+          q("[data-design-variant]").value = failedSelection?.variantId ?? state.variantId, q("[data-design-frame]").value = failedSelection?.frameId ?? state.frameId, q("[data-design-compare]") && (q("[data-design-compare]").checked = state.compare), q("[data-design-screen-title]").textContent = state.view === "canvas" ? design.title : screen.title, q("[data-design-stage-description]").textContent = state.view === "canvas" ? `${design.screenOrder.length} screens · ${design.frames.length} responsive ${design.frames.length === 1 ? "frame" : "frames"}${state.compare ? ` · ${readyVariants.length} directions` : ""}` : state.view === "prototype" ? "Explore the working journey" : "A guided journey through the design", q("[data-design-direction-label]").textContent = variant.label;
+          let chosen = state.selectedVariant === state.variantId && state.preferences.selected.includes(state.variantId);
+          q("[data-design-selected-direction]").textContent = chosen ? "Selected" : "", q("[data-design-select-direction]").disabled = chosen, q("[data-design-select-direction]").textContent = chosen ? "Selected direction" : "Use this direction";
+          for (let button of qa("[data-design-rating]")) {
+            let selected = Number(button.dataset.designRating) <= (state.ratings[state.variantId] ?? 0);
+            button.setAttribute("aria-pressed", String(selected)), button.textContent = selected ? "★" : "☆";
+          }
+          document.activeElement !== q("[data-design-remix]") && (q("[data-design-remix]").value = state.remix[state.variantId] ?? ""), q("[data-design-pan]").hidden = state.view !== "canvas";
+          for (let control of qa("[data-design-zoom]")) control.hidden = state.view !== "canvas";
+          q("[data-design-actual-size]").hidden = state.view === "canvas", q("[data-design-actual-size]").setAttribute(
+            "aria-pressed",
+            String(state.inspectionScale === "actual")
+          ), root.dataset.designInspectionScale = state.inspectionScale, q(".design-canvas-tools").setAttribute(
+            "aria-label",
+            state.view === "canvas" ? "Canvas controls" : "Screen controls"
+          );
+          let fitControl = q("[data-design-fit]");
+          fitControl.textContent = state.view === "canvas" ? "Fit" : "Fit screen", fitControl.setAttribute(
+            "aria-label",
+            state.view === "canvas" ? "Fit all visible artboards" : "Fit screen"
+          );
+          let comparison = q("[data-design-compare]");
+          comparison && (comparison.closest("label").hidden = state.view !== "canvas");
+          let caption = q(".design-walkthrough-caption");
+          caption.hidden = state.view !== "walkthrough", q("[data-design-step]").textContent = `Step ${design.screenOrder.indexOf(state.screenId) + 1} of ${design.screenOrder.length}`, q("[data-design-narrative-title]").textContent = screen.title, q("[data-design-narrative]").textContent = screen.description ?? design.flows?.find((flow) => flow.screens.includes(screen.id))?.title ?? design.brief?.text ?? "", q('[data-design-step-change="-1"]').disabled = requestedScreen() === design.screenOrder[0], q('[data-design-step-change="1"]').disabled = requestedScreen() === design.screenOrder.at(-1);
+          for (let item of qa("[data-design-note-screen]"))
+            item.dataset.active = String(item.dataset.designNoteScreen === state.screenId);
+          for (let heading of sectionHeadings) heading.hidden = state.view !== "canvas";
+          let visible = visibleEntries(), visibleIds = new Set(visible.map(({ artifactId }) => artifactId));
+          for (let entry of entries) {
+            let panel = panels.get(entry.artifactId), isVisible = visibleIds.has(entry.artifactId), outgoing = walkthroughTransition?.from === entry.artifactId;
+            panel.hidden = !isVisible && !outgoing, panel.dataset.designActive = String(entry.artifactId === activeArtifactId);
+            let frameElement = stage.getFrame(entry.artifactId), layer = panel.querySelector("[data-planr-annotation-layer]"), ready = stageState.status === "ready" && (!stage.frameBudget || frameElement.dataset.planrFrameState === "ready");
+            if (frameElement.tabIndex = isVisible && ready && stageState.reviewMode === "interact" ? 0 : -1, layer.tabIndex = isVisible && ready && stageState.reviewMode === "comment" ? 0 : -1, layer.setAttribute("aria-disabled", String(layer.tabIndex < 0)), !isVisible && !outgoing) continue;
+            let placement = boardPlacement(design, entry, {
+              layout,
+              compare: state.compare,
+              variantId: state.variantId
+            }), { x, y } = placement;
+            state.view !== "canvas" && (x = 0, y = 0), panel.style.left = `${x}px`, panel.style.top = `${y}px`, panel.querySelector(".design-artboard-drag strong").textContent = placement.title;
+          }
+          grid.style.width = "1px", grid.style.height = "1px", surface.style.width = "100%", surface.style.height = "100%", syncCanvas(), updatePan(), renderCamera(), chrome?.update({ view: state.view, navOpen: state.navOpen, reviewOpen: stageState.railOpen }), state.view !== "canvas" && activeArtifactId && reloadFrameUsedWithComments(activeArtifactId), root.dispatchEvent(new CustomEvent("planr:design-render", { detail: clone(state) }));
+        } finally {
+          rendering = !1;
+        }
+      }
+    }
+    function scheduleCamera() {
+      cameraFrame !== null || destroyed || (cameraFrame = requestAnimationFrame(() => {
+        cameraFrame = null, renderCamera();
+      }));
+    }
+    function renderCamera() {
+      if (!stage || destroyed) return;
+      if (cameraFrame !== null && (cancelAnimationFrame(cameraFrame), cameraFrame = null), readCanvasCamera(), state.view !== "canvas") {
+        let frame = viewportFor(entryFor()), inset = window.innerWidth <= 680 ? 12 : 24;
+        state.zoom = state.inspectionScale === "actual" ? 1 : Math.max(
+          1e-3,
+          Math.min(
+            1,
+            Math.max(1, scroll.clientWidth - inset * 2) / frame.width,
+            Math.max(1, scroll.clientHeight - inset * 2) / frame.height
+          )
+        ), state.camera = {
+          x: state.inspectionScale === "actual" ? inset : (scroll.clientWidth - frame.width * state.zoom) / 2,
+          y: state.inspectionScale === "actual" ? inset : (scroll.clientHeight - frame.height * state.zoom) / 2
+        }, state.inspectionScale === "actual" && (surface.style.width = `${Math.max(scroll.clientWidth, frame.width + inset * 2)}px`, surface.style.height = `${Math.max(scroll.clientHeight, frame.height + inset * 2)}px`), saveViewport();
+      }
+      let zoom = String(state.zoom);
+      grid.style.getPropertyValue("--design-zoom") !== zoom && grid.style.setProperty("--design-zoom", zoom), state.view === "canvas" && sectionZoom !== state.zoom && syncCanvasNodes(), state.view !== "canvas" && (grid.style.transform = `translate(${state.camera.x}px, ${state.camera.y}px) scale(${state.zoom})`);
+      let active = entries.find((entry) => entry.artifactId === activeArtifactId), bounds = active ? placedBoardBounds(active) : null;
+      if (selectionOutline && (selectionOutline.hidden = state.view !== "canvas" || !bounds, !selectionOutline.hidden)) {
+        let frame = design.frames.find((item) => item.id === active.frameId), ratio = window.devicePixelRatio || 1, pixel = (value) => Math.round(value * ratio) / ratio, x = pixel(state.camera.x + bounds.x * state.zoom), y = pixel(state.camera.y + bounds.y * state.zoom);
+        selectionOutline.style.transform = `translate3d(${x - 3}px, ${y - 3}px, 0)`, selectionOutline.style.width = `${pixel(frame.width * state.zoom) + 6}px`, selectionOutline.style.height = `${pixel(viewportFor(active).height * state.zoom) + 6}px`;
+      }
+      let label = `${Math.round(state.zoom * 100)}%`, reset = q('[data-design-zoom="reset"]');
+      reset.textContent !== label && (reset.textContent = label), scheduleFrameDemand(), root.dispatchEvent(
+        new CustomEvent("planr:design-camera", {
+          detail: { view: state.view, zoom: state.zoom, camera: { ...state.camera } }
+        })
+      );
+    }
+    function updateFramePlaceholders() {
+      if (!(!stage?.frameBudget || destroyed))
+        for (let [id, panel] of panels) {
+          let frame = stage.getFrame(id), placeholder = panel.querySelector("[data-design-load-frame]");
+          if (syncFrameGestures(frame, panel), !placeholder) continue;
+          let status2 = frame.dataset.planrFrameState || "unloaded";
+          placeholder.hidden = status2 === "ready", placeholder.disabled = status2 === "loading";
+          let copy = status2 === "loading" ? "Loading screen…" : status2 === "error" ? "Retry screen" : "Open screen";
+          placeholder.textContent !== copy && (placeholder.textContent = copy), frame.style.visibility = status2 === "ready" ? "" : "hidden";
+        }
+    }
+    function scheduleFrameDemand() {
+      if (!stage?.frameBudget || destroyed) return;
+      clearTimeout(frameDemandTimer);
+      let generation = frameDemandGeneration;
+      frameDemandTimer = setTimeout(() => {
+        if (destroyed || generation !== frameDemandGeneration || !readyReported || pendingScreen || walkthroughTransition || state.view !== "canvas" || root.dataset.sharedOpening || document.querySelector(".design-welcome[open]"))
+          return;
+        let box = scroll.getBoundingClientRect(), nearby = visibleEntries().map((entry) => {
+          let rect2 = panels.get(entry.artifactId).getBoundingClientRect();
+          return {
+            id: entry.artifactId,
+            visible: rect2.right > box.left && rect2.left < box.right && rect2.bottom > box.top && rect2.top < box.bottom,
+            distance: Math.hypot(
+              (rect2.left + rect2.right - box.left - box.right) / 2,
+              (rect2.top + rect2.bottom - box.top - box.bottom) / 2
+            )
+          };
+        }).filter((item) => item.visible).sort((a, b) => a.distance - b.distance), ids = [
+          ...new Set([activeArtifactId, ...nearby.map((item) => item.id)].filter(Boolean))
+        ].slice(0, stage.frameBudget), key = ids.join("|");
+        key !== frameDemandKey && (frameDemandKey = key, stage.ensureFrames(ids, () => !destroyed && generation === frameDemandGeneration).then(() => {
+          noteFramesUsedWithComments(), updateFramePlaceholders();
+        }).catch((error) => {
+          !destroyed && error.name !== "AbortError" && (frameDemandKey = "", updateFramePlaceholders());
+        }));
+      }, 120);
+    }
+    function finishWalkthroughTransition({ continueQueued = !1 } = {}) {
+      let transition = walkthroughTransition, queued = continueQueued ? queuedSelection : null;
+      if (queuedSelection = null, !!transition) {
+        walkthroughTransition = null, cancelAnimationFrame(transition.frame), clearTimeout(transition.timeout);
+        for (let animation of transition.animations ?? []) animation.cancel();
+        for (let visual of transition.visuals ?? []) delete visual.dataset.designTransitionVisual;
+        for (let id of [transition.from, transition.to]) {
+          let panel = panels.get(id);
+          panel.inert = !1, panel.removeAttribute("aria-hidden"), delete panel.dataset.designTransitionOutgoing, delete panel.dataset.designTransitionIncoming;
+        }
+        delete root.dataset.designTransition, render(), queued && !destroyed && selectEntry(queued.entry, queued.settings);
+      }
+    }
+    function prepareWalkthroughTransition(entry) {
+      let from = activeArtifactId, outgoing = panels.get(from), incoming = panels.get(entry.artifactId), direction = design.screenOrder.indexOf(entry.screenId) < design.screenOrder.indexOf(state.screenId) ? -1 : 1, transition = {
+        from,
+        to: entry.artifactId,
+        direction,
+        frame: null,
+        timeout: null,
+        animations: [],
+        visuals: []
+      };
+      walkthroughTransition = transition, root.dataset.designTransition = "preparing", outgoing.dataset.designTransitionOutgoing = "", incoming.dataset.designTransitionIncoming = "", outgoing.contains(document.activeElement) && q(`[data-design-step-change="${direction}"]`).focus({ preventScroll: !0 }), outgoing.inert = incoming.inert = !0, outgoing.setAttribute("aria-hidden", "true");
+      let finish = () => {
+        walkthroughTransition === transition && finishWalkthroughTransition({ continueQueued: !0 });
+      };
+      transition.timeout = setTimeout(finish, 1e3), transition.frame = requestAnimationFrame(() => {
+        transition.frame = requestAnimationFrame(() => {
+          if (walkthroughTransition !== transition || destroyed) return;
+          if (document.hidden || window.matchMedia?.("(prefers-reduced-motion: reduce)")?.matches || typeof incoming.animate != "function") {
+            finish();
+            return;
+          }
+          root.dataset.designTransition = "running";
+          let frameVisual = incoming.querySelector(".planr-frame iframe"), annotationVisual = incoming.querySelector("[data-planr-annotation-layer]");
+          transition.visuals = [frameVisual, annotationVisual].filter(Boolean);
+          for (let visual of transition.visuals) visual.dataset.designTransitionVisual = "";
+          let options3 = { duration: 220, easing: "cubic-bezier(0.22, 1, 0.36, 1)", fill: "both" };
+          transition.animations = [
+            frameVisual.animate(
+              [
+                { opacity: 0, transform: `translate3d(${direction * 12 / state.zoom}px, 0, 0)` },
+                { opacity: 1, transform: "translate3d(0, 0, 0)" }
+              ],
+              options3
+            )
+          ], annotationVisual && transition.animations.push(
+            annotationVisual.animate([{ opacity: 0 }, { opacity: 1 }], options3)
+          ), Promise.all(transition.animations.map((animation) => animation.finished)).then(
+            finish,
+            () => {
+            }
+          );
+        });
+      });
+    }
+    function requestedSelection() {
+      return pendingScreen?.entry ?? queuedSelection?.entry ?? failedSelection ?? state;
+    }
+    function requestedEntry(changes = {}) {
+      let requested = requestedSelection();
+      return entryFor(
+        changes.screenId ?? requested.screenId,
+        changes.variantId ?? requested.variantId,
+        changes.frameId ?? requested.frameId
+      );
+    }
+    function requestedScreen() {
+      return requestedSelection().screenId;
+    }
+    function selectEntry(entry, { save = !0, reveal = !1, loaded = !1 } = {}) {
+      if (!entry) return !1;
+      if (stage.frameBudget && !loaded && (pendingScreen || !stage.getLoadedArtifactIds().includes(entry.artifactId))) {
+        if (queuedSelection = null, pendingScreen?.entry.artifactId === entry.artifactId) return !0;
+        clearFailedSelection();
+        let request = ++screenRequest;
+        pendingScreen = { entry }, root.dataset.designScreenLoading = "true";
+        let ids = [...new Set([activeArtifactId, entry.artifactId].filter(Boolean))];
+        return stage.ensureFrames(ids).then(() => {
+          destroyed || request !== screenRequest || (pendingScreen = null, delete root.dataset.designScreenLoading, selectEntry(entry, { save, reveal, loaded: !0 }), updateFramePlaceholders());
+        }).catch((error) => {
+          destroyed || request !== screenRequest || error.name === "AbortError" || (pendingScreen = null, failedSelection = entry, delete root.dataset.designScreenLoading, notice(
+            "This screen could not load. Select it again to retry; your review is preserved.",
+            !0,
+            `preview-load:${entry.artifactId}`
+          ), render(), updateFramePlaceholders());
+        }), !0;
+      }
+      clearFailedSelection();
+      let sameFrame = entry.frameId === state.frameId && entry.variantId === state.variantId;
+      return walkthroughTransition && state.view === "walkthrough" && sameFrame ? (queuedSelection = entry.artifactId === activeArtifactId ? null : { entry, settings: { save, reveal } }, q('[data-design-step-change="-1"]').disabled = requestedScreen() === design.screenOrder[0], q('[data-design-step-change="1"]').disabled = requestedScreen() === design.screenOrder.at(-1), !0) : (finishWalkthroughTransition(), state.view === "walkthrough" && sameFrame && readyReported && entry.artifactId !== activeArtifactId && !document.hidden && prepareWalkthroughTransition(entry), state.screenId = entry.screenId, state.frameId = entry.frameId, state.variantId = entry.variantId, activeArtifactId = entry.artifactId, stage.dispatch({ type: "set-active", artifactId: entry.artifactId }), render(), reveal && centerEntry(entry), save && (persist(), recordLocation()), !0);
+    }
+    function fit({ save = !0, selection = null, maxZoom = 1 } = {}) {
+      if (state.inspectionScale = "fit", render(), state.view !== "canvas") {
+        save && persist();
+        return;
+      }
+      syncCanvasChrome();
+      for (let attempt = 0; attempt < 12; attempt++) {
+        let previousZoom = state.zoom;
+        if (canvas.fit(selection ? [selection.artifactId, `label:${selection.artifactId}`] : "all", {
+          padding: 36,
+          maxZoom
+        }), saveViewport(), renderCamera(), Math.abs(state.zoom - previousZoom) < 1e-6) break;
+      }
+      save && persist();
+    }
+    function zoomTo(value, point2 = null) {
+      if (state.view !== "canvas") return;
+      let rect2 = scroll.getBoundingClientRect();
+      canvas.zoomAt(
+        value / canvas.getCamera().zoom,
+        point2 ? { x: point2.x - rect2.left, y: point2.y - rect2.top } : void 0
+      ), saveViewport(), renderCamera(), persist();
+    }
+    async function exportArtifact(kind) {
+      let artifactId = activeArtifactId;
+      try {
+        let blob;
+        if (kind === "png") {
+          let result = typeof options2.exportPng == "function" ? await options2.exportPng({ artifactId }) : await stage.getFrame(artifactId)?.__openPlanrBridge?.exportPng("screen"), dataUrl = typeof result == "string" ? result : result?.dataUrl;
+          if (!dataUrl?.startsWith("data:image/png;base64,"))
+            throw new Error(
+              "PNG capture is unavailable. Open the local review with the artifact bridge and retry."
+            );
+          let bytes = Uint8Array.from(
+            atob(dataUrl.split(",")[1]),
+            (character) => character.charCodeAt(0)
+          );
+          blob = new Blob([bytes], { type: "image/png" });
+        } else {
+          let result = typeof options2.exportHtml == "function" ? await options2.exportHtml({ artifactId }) : null;
+          if (result instanceof Blob) blob = result;
+          else if (typeof result == "string")
+            blob = new Blob([result], { type: "text/html;charset=utf-8" });
+          else
+            throw new Error(
+              "Portable export is unavailable in this viewer. Use the design export utility from the project."
+            );
+        }
+        let url = URL.createObjectURL(blob), anchor = document.createElement("a");
+        anchor.href = url, anchor.download = `${design.id}-${state.screenId}.${kind === "png" ? "png" : "html"}`, anchor.click(), setTimeout(() => URL.revokeObjectURL(url), 1e3), q(".design-export").open = !1, notice(kind === "png" ? "Screen PNG exported." : "Portable HTML exported.");
+      } catch (error) {
+        notice(error.message, !0);
+      }
+    }
+    function editable2(target) {
+      return !!target?.closest?.('input,textarea,select,[contenteditable="true"]');
+    }
+    function installEvents() {
+      if (listen(scroll, "focusin", (event) => {
+        event.target.closest("[data-design-note]") && event.stopImmediatePropagation();
+      }), listen(scroll, "keydown", (event) => {
+        if (state.view === "canvas") {
+          if (["Escape", " ", "Enter", "Home", "End"].includes(event.key) || event.code === "Space") {
+            if (event.stopImmediatePropagation(), event.key !== "Escape" || event.defaultPrevented || event.isComposing || editable2(event.target) || event.ctrlKey || event.metaKey || event.altKey)
+              return;
+            if (q(".planr-more-menu:not([hidden])")) {
+              q('[data-planr-action="more"]')?.click();
+              return;
+            }
+            if (!root.dispatchEvent(new CustomEvent("planr:design-escape", { cancelable: !0 })))
+              return;
+            stage.getState().railOpen && (stage.dispatch({ type: "set-rail-open", railOpen: !1 }), q('[data-planr-action="feedback"]')?.focus());
+            return;
+          }
+          canvas.handleKey(event) && event.stopPropagation();
+        }
+      }), listen(scroll, "gotpointercapture", (event) => {
+        canvasAttached && gesture?.pointerId !== event.pointerId && canvasPointers.add(event.pointerId);
+      }), listen(root, "planr:design-camera", scheduleViewContext), listen(root, "planr:design-inspection-change", (event) => {
+        let { screenId, frameId, variantId, planrId } = event.detail;
+        screenId !== state.screenId || frameId !== state.frameId || variantId !== state.variantId || (inspectedSelection = { artifactId: activeArtifactId, planrId }, scheduleViewContext());
+      }), listen(window, "message", (event) => {
+        if (event.origin !== "null" || !["openplanr:design-size", "openplanr:design-size-error"].includes(event.data?.type))
+          return;
+        let entry = entries.find(
+          ({ artifactId }) => stage.getFrame(artifactId)?.contentWindow === event.source
+        );
+        if (!entry) return;
+        let frame = design.frames.find(({ id }) => id === entry.frameId);
+        if (frame.height !== "auto") return;
+        if (event.data.type === "openplanr:design-size-error") {
+          notice(`Could not measure ${entry.screenId}: ${event.data.message}`, !0);
+          return;
+        }
+        let { screenId, width, height } = event.data;
+        if (screenId !== entry.screenId || width !== frame.width || !Number.isInteger(height) || height < 1 || height > 16384)
+          return;
+        let viewport = viewportFor(entry);
+        viewport.height !== height && (viewport.height = height, panels.get(entry.artifactId).style.setProperty("--planr-artifact-height", `${height}px`), render());
+      }), listen(root, "planr:artifact-viewport-zoom", (event) => {
+        if (state.view !== "canvas") return;
+        let entry = entries.find((item) => stage.getFrame(item.artifactId) === event.target);
+        if (!entry || panels.get(entry.artifactId)?.hidden) return;
+        let { x, y, deltaY } = event.detail, frame = design.frames.find((item) => item.id === entry.frameId), rect2 = event.target.getBoundingClientRect();
+        chrome?.update({ exportMenuOpen: !1 }), zoomTo(
+          canvas.getCamera().zoom * clamp2(Math.exp(-deltaY * 0.01), 0.8, 1.25),
+          {
+            x: rect2.left + x * rect2.width / frame.width,
+            y: rect2.top + y * rect2.height / viewportFor(entry).height
+          },
+          { scheduled: !0 }
+        );
+      }), listen(root, "planr:artifact-viewport-pan", (event) => {
+        if (state.view !== "canvas") return;
+        let entry = entries.find((item) => stage.getFrame(item.artifactId) === event.target);
+        !entry || panels.get(entry.artifactId)?.hidden || (chrome?.update({ exportMenuOpen: !1 }), canvas.panBy(event.detail.deltaX, event.detail.deltaY), saveViewport(), scheduleCamera(), persist());
+      }), listen(
+        root,
+        "click",
+        (event) => {
+          let button = event.target.closest('[data-planr-mode],[data-planr-action="add-comment"]');
+          !button || button.disabled || setTool(button.dataset.planrMode === "interact" ? "interact" : "annotate");
+        },
+        !0
+      ), listen(
+        document,
+        "keydown",
+        (event) => {
+          if (editable2(event.target) || event.altKey || event.ctrlKey || event.metaKey || document.querySelector("dialog[open],[role=dialog][data-state=open]"))
+            return;
+          let key = event.key.toLowerCase();
+          if (["i", "c", "h"].includes(key)) {
+            if (key === "h" && state.view !== "canvas") return;
+            event.preventDefault(), setTool({ i: "interact", c: "annotate", h: "pan" }[key]);
+          } else event.key === "Escape" && (panEnabled || spacePan || gesture || activeTool === "inspect") && !q("[data-design-notes][open]") && !q("[data-planr-annotation-composer]") && (event.preventDefault(), setTool("interact"), event.stopPropagation(), q('[data-planr-mode="interact"]').focus());
+        },
+        !0
+      ), typeof ResizeObserver == "function") {
+        let observer = new ResizeObserver(() => {
+          scrollSize = null, state.view !== "canvas" && root.dataset.designRestoring !== "true" && fit({ save: !1 }), syncCanvasChrome(), updateDesignNotes(), scheduleViewContext();
+        });
+        for (let selector of [
+          ".design-toolbar",
+          ".design-canvas-tools",
+          ".design-stage-context",
+          ".design-navigator",
+          ".planr-review-rail"
+        ])
+          observer.observe(q(selector));
+        observer.observe(scroll), cleanup.push(() => observer.disconnect());
+      }
+      let notes = q("[data-design-notes]");
+      listen(notes?.querySelector(":scope > summary"), "click", (event) => {
+        event.preventDefault(), notes.open ? closeDesignNotes() : (notesReturnFocus = event.currentTarget, notes.open = !0, updateDesignNotes());
+      }), listen(notes, "toggle", updateDesignNotes), listen(
+        document,
+        "pointerdown",
+        (event) => {
+          notes?.open && !notes.contains(event.target) && !event.target.closest?.("[data-design-note]") && closeDesignNotes();
+        },
+        !0
+      ), listen(
+        document,
+        "keydown",
+        (event) => {
+          event.key === "Escape" && notes?.open && (event.preventDefault(), event.stopPropagation(), closeDesignNotes({ restoreFocus: !0 }));
+        },
+        !0
+      ), listen(root, "click", (event) => {
+        let button = event.target.closest("button");
+        if (button)
+          if (button.dataset.designLoadFrame)
+            selectEntry(
+              entries.find((item) => item.artifactId === button.dataset.designLoadFrame),
+              { reveal: !0 }
+            );
+          else if (button.hasAttribute("data-design-actual-size"))
+            state.inspectionScale = "actual", render(), persist();
+          else if (button.hasAttribute("data-design-focus"))
+            state.navOpen = !1, state.reviewOpen = !1, stage.dispatch({ type: "set-rail-open", railOpen: !1 }), state.view === "canvas" && switchView("prototype"), render(), persist();
+          else if (button.dataset.designView)
+            switchView(button.dataset.designView);
+          else if (button.hasAttribute("data-design-toggle-nav"))
+            state.navOpen = !state.navOpen, !state.navOpen && button.closest(".design-navigator") && q(".design-toolbar [data-design-toggle-nav]").focus(), render(), persist();
+          else if (button.dataset.designScreen)
+            selectEntry(requestedEntry({ screenId: button.dataset.designScreen }), {
+              reveal: state.view === "canvas"
+            });
+          else if (button.dataset.designNote)
+            openDesignNote(button.dataset.designNote, button);
+          else if (button.hasAttribute("data-design-close-notes"))
+            closeDesignNotes({ restoreFocus: !0 });
+          else if (button.hasAttribute("data-design-fit")) fit();
+          else if (button.dataset.designZoom)
+            zoomTo(
+              button.dataset.designZoom === "reset" ? 1 : state.zoom * (button.dataset.designZoom === "in" ? 1.2 : 1 / 1.2)
+            );
+          else if (button.hasAttribute("data-design-pan")) {
+            if (state.view !== "canvas") return;
+            setTool(activeTool === "pan" ? "interact" : "pan");
+          } else if (button.dataset.designStepChange) {
+            let index2 = clamp2(
+              design.screenOrder.indexOf(requestedScreen()) + Number(button.dataset.designStepChange),
+              0,
+              design.screenOrder.length - 1
+            );
+            selectEntry(requestedEntry({ screenId: design.screenOrder[index2] }));
+          } else if (button.dataset.designRating) {
+            let rating = Number(button.dataset.designRating);
+            state.ratings[state.variantId] = rating, rating <= 2 ? state.preferences.rejected = [
+              .../* @__PURE__ */ new Set([...state.preferences.rejected, state.variantId])
+            ] : state.preferences.rejected = state.preferences.rejected.filter(
+              (id) => id !== state.variantId
+            ), render(), persist({ content: !0 });
+          } else button.hasAttribute("data-design-select-direction") ? (state.selectedVariant = state.variantId, state.preferences.selected = [.../* @__PURE__ */ new Set([...state.preferences.selected, state.variantId])], state.preferences.rejected = state.preferences.rejected.filter(
+            (id) => id !== state.variantId
+          ), render(), persist({ content: !0 })) : button.hasAttribute("data-design-save-remix") ? (state.remix[state.variantId] = q("[data-design-remix]").value.trim(), persist({ content: !0 }), notice("Refinement note saved for the next design iteration.")) : button.dataset.designExport && exportArtifact(button.dataset.designExport);
+      }), listen(
+        q("[data-design-variant]"),
+        "change",
+        (event) => selectEntry(requestedEntry({ variantId: event.target.value }))
+      ), listen(q("[data-design-frame]"), "change", (event) => {
+        selectEntry(requestedEntry({ frameId: event.target.value }), {
+          reveal: state.view === "canvas"
+        });
+      }), listen(q("[data-design-compare]"), "change", (event) => {
+        state.compare = event.target.checked, render(), persist();
+      }), listen(root, "planr:stage-change", (event) => {
+        let next = event.detail;
+        !changingTool && next.reviewMode !== previousReviewMode && setTool(next.reviewMode === "comment" ? "annotate" : "interact");
+        let reviewChanged = typeof next.railOpen == "boolean" && next.railOpen !== state.reviewOpen;
+        reviewChanged && (state.reviewOpen = next.railOpen);
+        let entry = entries.find(({ artifactId }) => artifactId === next.activeArtifactId);
+        entry && entry.artifactId !== activeArtifactId && (stage.frameBudget && !stage.getLoadedArtifactIds().includes(entry.artifactId) ? selectEntry(entry, { save: !1 }) : (finishWalkthroughTransition(), activeArtifactId = entry.artifactId, state.screenId = entry.screenId, state.frameId = entry.frameId, state.variantId = entry.variantId)), next.zoom !== previousStageZoom && (state.zoom = clamp2(next.zoom / 100, 0.05, 2), canvasAttached && applyCanvasCamera(), previousStageZoom = next.zoom, saveViewport()), render(), reviewChanged && persist();
+      }), listen(root, "planr:artifact-review-change", (event) => {
+        latestReview = clone(event.detail), reviewDirty = !0, scheduleViewContext(), reviewSerial += 1, status("Saving comments", "saving"), storeReviewDraft(), clearTimeout(reviewTimer), reviewTimer = setTimeout(flushReview, 180);
+      }), listen(
+        root,
+        "pointerdown",
+        (event) => {
+          let panel = event.target.closest(".planr-artifact-panel");
+          event.button === 0 && panel && !panEnabled && !spacePan && !event.target.closest("[data-design-note]") && selectEntry(
+            entries.find(({ artifactId }) => artifactId === panel.dataset.artifactId),
+            { save: !1 }
+          );
+        },
+        !0
+      ), listen(scroll, "pointerdown", (event) => {
+        if (state.view !== "canvas" || root.dataset.designInspect === "true" || event.button !== 0 && event.button !== 1) return;
+        let label = event.target.closest("[data-design-drag]");
+        if (!(event.button === 0 && state.view === "canvas" && label && !panEnabled && !spacePan)) return;
+        event.preventDefault();
+        let panel = label?.closest(".planr-artifact-panel"), entry = entries.find((item) => item.artifactId === panel.dataset.artifactId), bounds = placedBoardBounds(entry);
+        bounds && (gesture = {
+          pointerId: event.pointerId,
+          x: event.clientX,
+          y: event.clientY,
+          mode: "artboard",
+          artifactId: panel.dataset.artifactId,
+          left: bounds.x,
+          top: bounds.y,
+          before: clone(layout)
+        }, scroll.setPointerCapture?.(event.pointerId), updatePan());
+      }), listen(scroll, "pointermove", (event) => {
+        if (!gesture || gesture.pointerId !== event.pointerId) return;
+        let dx = event.clientX - gesture.x, dy = event.clientY - gesture.y, entry = entries.find((item) => item.artifactId === gesture.artifactId), key = boardKey(entry), point2 = {
+          x: Math.round(clamp2(gesture.left + dx / state.zoom, -1e7, 1e7)),
+          y: Math.round(clamp2(gesture.top + dy / state.zoom, -1e7, 1e7))
+        };
+        layout.boards = { ...layout.boards, [key]: { ...layout.boards?.[key], ...point2 } };
+        let panel = panels.get(gesture.artifactId);
+        layoutDragDirty = point2.x !== gesture.left || point2.y !== gesture.top, layoutDragDirty && status("Moving board", "saving"), panel.style.left = `${point2.x}px`, panel.style.top = `${point2.y}px`, syncCanvasNodes(), scheduleCamera();
+      });
+      for (let eventName of ["pointerup", "pointercancel", "lostpointercapture"])
+        listen(scroll, eventName, (event) => {
+          canvasPointers.delete(event.pointerId), !(!gesture || gesture.pointerId !== event.pointerId) && (eventName === "pointerup" ? finishGesture() : releaseTemporaryPan());
+        });
+      listen(
+        document,
+        "keydown",
+        (event) => {
+          if (!editable2(event.target) && state.view === "canvas" && event.code === "Space" && !event.defaultPrevented && !event.ctrlKey && !event.metaKey && !event.altKey && !document.querySelector("dialog[open],[role=dialog][data-state=open]") && !event.target.closest("button,[data-planr-annotation-layer]")) {
+            if (event.preventDefault(), event.stopPropagation(), event.repeat) return;
+            let previous = activeTool;
+            setTool("pan"), panEnabled = !1, spacePan = !0, spaceReturnTool = previous, updatePan();
+          }
+        },
+        !0
+      ), listen(document, "keydown", (event) => {
+        if (editable2(event.target)) return;
+        if (state.view === "canvas" && !event.defaultPrevented && !event.altKey && (event.metaKey || event.ctrlKey) && event.key.toLowerCase() === "z" && !document.querySelector("dialog[open],[role=dialog][data-state=open]")) {
+          event.preventDefault(), restoreMove(event.shiftKey);
+          return;
+        }
+        let label = event.target.closest("[data-design-drag]");
+        if (label && state.view === "canvas" && ["ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight"].includes(event.key)) {
+          event.preventDefault();
+          let panel = label.closest(".planr-artifact-panel"), distance = event.shiftKey ? 40 : 8, entry = entries.find((item) => item.artifactId === panel.dataset.artifactId), bounds = placedBoardBounds(entry);
+          if (!bounds) return;
+          let key = boardKey(entry), before = clone(layout), point2 = {
+            x: Math.round(
+              clamp2(
+                bounds.x + (event.key === "ArrowRight" ? distance : event.key === "ArrowLeft" ? -distance : 0),
+                -1e7,
+                1e7
+              )
+            ),
+            y: Math.round(
+              clamp2(
+                bounds.y + (event.key === "ArrowDown" ? distance : event.key === "ArrowUp" ? -distance : 0),
+                -1e7,
+                1e7
+              )
+            )
+          };
+          layout.boards = { ...layout.boards, [key]: { ...layout.boards?.[key], ...point2 } }, render(), completeMove(entry, before);
+        } else if (state.view === "walkthrough" && ["ArrowLeft", "ArrowRight"].includes(event.key) && !event.target.closest('button,[role="radio"]')) {
+          event.preventDefault();
+          let index2 = clamp2(
+            design.screenOrder.indexOf(requestedScreen()) + (event.key === "ArrowRight" ? 1 : -1),
+            0,
+            design.screenOrder.length - 1
+          );
+          selectEntry(requestedEntry({ screenId: design.screenOrder[index2] }));
+        }
+      }), listen(document, "keyup", (event) => {
+        event.code === "Space" && releaseTemporaryPan();
+      }), listen(window, "blur", () => {
+        releaseTemporaryPan(), document.activeElement?.tagName === "IFRAME" && closeDesignNotes();
+      }), listen(document, "visibilitychange", () => {
+        document.hidden && (releaseTemporaryPan(), finishWalkthroughTransition());
+      }), listen(
+        window.matchMedia?.("(prefers-reduced-motion: reduce)"),
+        "change",
+        () => finishWalkthroughTransition()
+      ), listen(window, "resize", () => {
+        let compact = window.innerWidth <= 960;
+        compact && !compactViewport && (state.navOpen = !1, state.reviewOpen = !1, stage.dispatch({ type: "set-rail-open", railOpen: !1 }), persist()), compactViewport = compact, render(), state.view !== "canvas" && root.dataset.designRestoring !== "true" && fit({ save: !1 }), updateDesignNotes();
+      }), listen(window, "online", () => {
+        (dirty || reviewDirty || layoutOperations.length) && flush(), viewContextSignature = null, scheduleViewContext();
+      }), listen(window, "beforeunload", (event) => {
+        clearTimeout(frameDemandTimer), frameDemandGeneration += 1, frameDemandKey = "", storeDraft(), storeReviewDraft(), (contentDirty || reviewDirty || layoutOperations.length) && (options2.stateUrl || options2.saveState || options2.layoutUrl || options2.saveLayout || reviewUrl()) && (event.preventDefault(), event.returnValue = "");
+      }), listen(window, "message", (event) => {
+        if (event.origin !== "null" || !["openplanr:design-navigate", "navigate"].includes(event.data?.type) || typeof event.data.screenId != "string")
+          return;
+        let source = entries.find(
+          ({ artifactId }) => stage.getFrame(artifactId)?.contentWindow === event.source
+        );
+        if (!source || !design.screenOrder.includes(event.data.screenId)) return;
+        let nonce = stage.getFrame(source.artifactId)?.__openPlanrBridge?.getPrototypeNonce?.();
+        nonce && (event.data.type === "navigate" && (event.data.channel !== nonce || event.data.viewId !== source.artifactId || event.data.schemaVersion !== "1.0.0") || state.view !== "canvas" && (source.artifactId !== activeArtifactId || walkthroughTransition) || (chrome?.update({ exportMenuOpen: !1 }), selectEntry(entryFor(event.data.screenId, source.variantId, source.frameId))));
+      });
+    }
+    async function refreshSavedState() {
+      if (options2.stateUrl)
+        try {
+          let observedRevision = revision, result = await jsonRequest(options2.stateUrl);
+          if (destroyed) return;
+          observedRevision === revision && result.revision !== void 0 && result.revision !== revision && await rebaseLayout({ announce: !1, expectedRevision: observedRevision }), result.stateVersion !== void 0 && (stateVersion = result.stateVersion), legacyServerPositions = result.state?.positions ?? legacyServerPositions, result.state && !dirty && (state = normalizeState({ ...result.state, ...linkedState() }), canvasAttached && state.view === "canvas" && applyCanvasCamera(), compactViewport && (state.navOpen = !1, state.reviewOpen = !1), stage.dispatch({ type: "set-rail-open", railOpen: state.reviewOpen })), savedDraft?.unsaved && notice(
+            "A previous unsaved draft is available in this browser. The saved review is shown; your draft has not overwritten it.",
+            !0
+          ), selectEntry(entryFor(), { save: !1 }), layoutOperations.length || status("All changes saved");
+        } catch {
+          status("Disconnected · local draft", "disconnected");
+        }
+    }
+    function renderVerification(verification) {
+      q("[data-design-verification]").textContent = verification === "verified" ? "Browser inspection complete" : verification === "failed" ? "Browser inspection failed" : "Browser inspection pending";
+    }
+    async function pollRevision() {
+      if (!(!options2.statusUrl || destroyed || sessionLost)) {
+        try {
+          let observedRevision = revision, result = await jsonRequest(options2.statusUrl);
+          if (destroyed) return;
+          if (typeof result.verification == "string" && renderVerification(result.verification), observedRevision === revision && result.revision !== void 0 && revision !== null && result.revision !== revision)
+            if (contentDirty || reviewDirty || layoutOperations.length || layoutSaving)
+              newRevisionNotice();
+            else {
+              storeDraft(), window.location.reload();
+              return;
+            }
+          result.status === "failed" && notice(
+            result.message ?? "The new revision failed. This working design remains available.",
+            !0
+          );
+        } catch (error) {
+          error.statusCode === 404 ? studioRestarted() : !dirty && !hasPendingLayout() && status("Disconnected", "disconnected");
+        }
+        pollTimer = setTimeout(pollRevision, 4e3);
+      }
+    }
+    async function reportReady() {
+      if (!(!startupSettled || readyReported || readyReporting || destroyed)) {
+        readyReporting = !0;
+        try {
+          let requiredEntries = [entryFor()];
+          if (await stage.ensureFrames(requiredEntries.map((entry) => entry.artifactId)), destroyed) return;
+          let loaded = requiredEntries.filter(({ artifactId }) => {
+            let frame = stage.getFrame(artifactId);
+            return (frame?.src?.startsWith("blob:") || !!frame?.srcdoc) && frame.dataset.planrFrameState === "ready" && frame.dataset.planrArtifactDigest && (!frame.__openPlanrBridge || frame.dataset.planrBridgeTrusted === "true");
+          });
+          if (loaded.length !== requiredEntries.length) throw new Error("Preview bridge is not ready.");
+          if (readyReported = !0, render(), await new Promise((resolve) => requestAnimationFrame(() => requestAnimationFrame(resolve))), destroyed) return;
+          root.dataset.designReady = "true", root.dataset.sharedOpening || delete document.documentElement.dataset.designOpening, chrome?.update({ previewLabel: "Preview ready" }), chrome || (q("[data-design-preview-state]").textContent = "Preview ready"), !contentDirty && !reviewDirty && !layoutOperations.length && (!options2.stateUrl || stateVersion !== null) && status(options2.stateUrl ? "All changes saved" : "Local preview");
+          let detail = {
+            revision,
+            status: "ready",
+            artifacts: loaded.map((entry) => entry.artifactId)
+          };
+          if (root.dispatchEvent(new CustomEvent("planr:design-ready", { bubbles: !0, detail })), typeof options2.onReady == "function" && await options2.onReady(detail), options2.readyUrl)
+            try {
+              await jsonRequest(options2.readyUrl, {
+                method: "POST",
+                headers: { "Content-Type": "application/json" },
+                body: JSON.stringify(detail)
+              });
+            } catch {
+              status("Server disconnected · local draft", "disconnected");
+            }
+        } catch {
+          if (destroyed) return;
+          delete document.documentElement.dataset.designOpening, chrome?.update({ previewLabel: "Preview unavailable" }), chrome || (q("[data-design-preview-state]").textContent = "Preview unavailable"), notice(
+            "This preview could not load. Use Retry screen; your saved feedback remains available.",
+            !0
+          );
+        } finally {
+          readyReporting = !1;
+        }
+      }
+    }
+    function mount() {
+      if (stage = artifactStage, !stage)
+        return status("Review runtime unavailable", "failed"), null;
+      root = q(".planr-shell");
+      let structuralStyle = document.createElement("style");
+      structuralStyle.textContent = styles_default, document.head.prepend(structuralStyle), cleanup.push(() => structuralStyle.remove()), cleanup.push(
+        canvas.on("camera", () => {
+          if (!canvasAttached || state.view !== "canvas") return;
+          let previous = state.viewports.canvas;
+          saveViewport(), renderCamera();
+          let next = state.viewports.canvas;
+          (previous?.x !== next.x || previous?.y !== next.y || previous?.zoom !== next.zoom) && persist();
+        })
+      ), chrome = mountDesignChrome({ root, title: design.title, state }), hasPendingLayout() && status("Recovering layout", "saving"), chrome && cleanup.push(() => chrome.destroy()), previousReviewMode = stage.getState().reviewMode, activeTool = previousReviewMode === "comment" ? "annotate" : "interact", scroll = q(".planr-stage-scroll"), surface = q(".planr-stage-surface"), grid = q(".planr-frame-grid"), selectionOutline = document.createElement("div"), selectionOutline.className = "design-selection-outline", selectionOutline.setAttribute("aria-hidden", "true"), selectionOutline.hidden = !0, scroll.append(selectionOutline);
+      for (let section of layout.sections ?? []) {
+        let heading = document.createElement("div");
+        heading.className = "design-section-heading", heading.setAttribute("role", "heading"), heading.setAttribute("aria-level", "2"), heading.textContent = section.text, heading.style.left = `${section.x}px`, heading.style.top = `${section.y}px`, section.maxW && (heading.style.maxWidth = `${section.maxW}px`), grid.append(heading), sectionHeadings.push(heading);
+      }
+      for (let entry of entries) {
+        let panel = stage.getPanel(entry.artifactId);
+        if (!panel)
+          return status("Missing design preview", "failed"), null;
+        panels.set(entry.artifactId, panel);
+        let nodeId = panel.getAttribute("data-canvas-node-id");
+        panel.dataset.canvasNodeId = entry.artifactId, cleanup.push(() => {
+          nodeId === null ? panel.removeAttribute("data-canvas-node-id") : panel.setAttribute("data-canvas-node-id", nodeId);
+        });
+        let screen = design.screens.find(({ id }) => id === entry.screenId), variant = design.variants.find(({ id }) => id === entry.variantId), frame = design.frames.find(({ id }) => id === entry.frameId), iframe = stage.getFrame(entry.artifactId), syncGestures = () => syncFrameGestures(iframe, panel);
+        if (listen(iframe, "planr:artifact-bridge-ready", syncGestures), listen(iframe, "load", syncGestures), frame.height === "auto") {
+          let measure = () => iframe.contentWindow?.postMessage({ type: "openplanr:design-measure" }, "*");
+          listen(iframe, "planr:artifact-bridge-ready", measure), listen(iframe, "load", measure), measure();
+        }
+        let label = document.createElement("div");
+        label.className = "design-artboard-label", label.setAttribute("role", "group");
+        let drag = document.createElement("button");
+        drag.type = "button", drag.className = "design-artboard-drag", drag.dataset.designDrag = entry.artifactId, drag.setAttribute(
+          "aria-label",
+          `Move ${screen.title}, ${variant.label}, ${frame.label}. Use arrow keys to arrange.`
+        );
+        let title = document.createElement("strong");
+        title.textContent = `${screen.title}${readyVariants.length > 1 ? ` / ${variant.label}` : ""}`;
+        let size4 = document.createElement("span");
+        if (size4.textContent = designFrameLabel(frame), drag.append(title, size4), label.append(drag), screen.description) {
+          let note = document.createElement("button");
+          note.type = "button", note.className = "design-artboard-note", note.dataset.designNote = screen.id, note.setAttribute("aria-controls", "design-guidance-panel"), note.setAttribute("aria-expanded", "false"), note.title = screen.description, note.setAttribute("aria-label", `Open design notes for ${screen.title}`), note.textContent = "i", label.append(note);
+        }
+        if (panel.prepend(label), stage.frameBudget) {
+          let load = document.createElement("button");
+          load.type = "button", load.className = "design-frame-placeholder", load.dataset.designLoadFrame = entry.artifactId, load.setAttribute("aria-label", `Open screen: ${screen.title}, ${frame.label}`), load.textContent = "Open screen", panel.querySelector(".planr-frame").append(load);
+        }
+      }
+      renderVerification(payload.verification?.status);
+      let prototypeState = createPrototypeStateRelay({
+        contextId: `${design.id}:${payload.revision ?? payload.reviewOf ?? "local"}`,
+        parentWindow: window,
+        frames: () => entries.map((entry) => ({
+          screenId: entry.screenId,
+          viewId: entry.artifactId,
+          window: stage.getFrame(entry.artifactId)?.contentWindow ?? null,
+          nonce: stage.getFrame(entry.artifactId)?.__openPlanrBridge?.getPrototypeNonce?.() ?? null,
+          generation: stage.getFrame(entry.artifactId)?.__openPlanrBridge?.getPrototypeGeneration?.(),
+          aliases: options2.prototypeStateAliases?.[entry.screenId]
+        }))
+      });
+      cleanup.push(() => prototypeState.dispose()), installEvents(), listen(q("[data-design-dismiss-notice]"), "click", () => {
+        activeNotice?.persistent && dismissedNotices.set(activeNotice.key, activeNotice.message), hideNotice();
+      });
+      function previewHealth() {
+        for (let entry of entries) {
+          let frame = stage.getFrame(entry.artifactId), nonce = frame?.__openPlanrBridge?.getPrototypeNonce?.() ?? null;
+          nonce && prototypeState.restore({
+            screenId: entry.screenId,
+            viewId: entry.artifactId,
+            window: frame.contentWindow,
+            nonce,
+            generation: frame.__openPlanrBridge?.getPrototypeGeneration?.(),
+            aliases: options2.prototypeStateAliases?.[entry.screenId]
+          });
+        }
+        let selected = stage.getFrameDiagnostics?.().find((item) => item.artifactId === activeArtifactId), node = q("[data-design-preview-state]"), phase = selected?.status ?? stage.getState().status, previewLabel = phase === "ready" ? "Preview ready" : phase === "error" || phase === "invalid" ? "Preview unavailable" : "Loading preview";
+        chrome ? chrome.update({ previewLabel }) : node.textContent = previewLabel, node.dataset.status = phase, selected && (node.title = `${selected.phase} · ${Math.round(selected.elapsedMs ?? 0)} ms${selected.code ? ` · ${selected.code}` : ""}`), !readyReported && phase === "ready" && reportReady();
+      }
+      listen(root, "planr:artifact-frame-state", previewHealth), listen(root, "planr:artifact-state", previewHealth), previewHealth();
+      let search = q("[data-design-screen-search]"), group = q("[data-design-screen-group]");
+      function filterScreens() {
+        let term = search.value.trim().toLocaleLowerCase(), flow = design.flows?.find((item) => item.id === group?.value), count3 = 0;
+        for (let button of qa("[data-design-screen]"))
+          button.hidden = !(button.textContent.toLocaleLowerCase().includes(term) && (!flow || flow.screens.includes(button.dataset.designScreen))), button.hidden || count3++;
+        q("[data-design-search-empty]").hidden = count3 > 0;
+      }
+      listen(search, "input", filterScreens), listen(group, "change", filterScreens);
+      function followLocation() {
+        let next = normalizeState({ ...state, ...linkedState() });
+        next.view !== state.view && switchView(next.view, { save: !1 }), selectEntry(entryFor(next.screenId, next.variantId, next.frameId), { save: !1 });
+      }
+      if (listen(window, "popstate", followLocation), listen(window, "hashchange", followLocation), stage.frameBudget && (listen(root, "planr:artifact-frame-state", updateFramePlaceholders), updateFramePlaceholders()), compactViewport = window.innerWidth <= 960, compactViewport ? (state.navOpen = !1, state.reviewOpen = !1, stage.dispatch({ type: "set-rail-open", railOpen: !1 })) : stage.dispatch({ type: "set-rail-open", railOpen: state.reviewOpen }), selectEntry(entryFor(), { save: !1 }), !reviewUrl() && !stage.review.getState().review)
+        try {
+          let storedReview = JSON.parse(localStorage.getItem(`${storageKey}.review`) ?? "null");
+          storedReview?.review && stage.review.replaceReview(storedReview.review);
+        } catch {
+        }
+      let panelDialogs = mountDesignPanels({
+        root,
+        closePanel(side) {
+          side === "left" ? state.navOpen = !1 : (state.reviewOpen = !1, stage.dispatch({ type: "set-rail-open", railOpen: !1 })), render(), persist(), q(
+            side === "left" ? ".design-toolbar [data-design-toggle-nav]" : ".design-toolbar [data-planr-action=feedback]"
+          )?.focus();
+        }
+      });
+      cleanup.push(() => panelDialogs.destroy());
+      let controller = Object.freeze({
+        setTool,
+        getTool: () => activeTool,
+        getState: () => (readCanvasCamera(), clone(state)),
+        getLayout: () => clone(layout),
+        getViewport: (artifactId) => ({
+          ...viewportFor(entries.find((entry) => entry.artifactId === artifactId))
+        }),
+        getRevision: () => revision,
+        getSaveState: () => ({
+          dirty: contentDirty || reviewDirty || hasPendingLayout(),
+          personalPending: dirty && !contentDirty,
+          commentsPending: reviewDirty,
+          revision,
+          stateVersion
+        }),
+        selectScreen: (screenId) => selectEntry(requestedEntry({ screenId })),
+        selectEntry: (entry) => selectEntry(entry),
+        fitSelection: ({ save = !0 } = {}) => fit({ selection: entryFor(), save }),
+        setCamera(camera) {
+          state.view === "canvas" && (!Number.isFinite(camera?.x) || !Number.isFinite(camera?.y) || (state.camera = { x: clamp2(camera.x, -1e7, 1e7), y: clamp2(camera.y, -1e7, 1e7) }, Number.isFinite(camera.zoom) && (state.zoom = clamp2(camera.zoom, 0.05, 2)), applyCanvasCamera(), saveViewport(), renderCamera(), persist()));
+        },
+        setPanels({ navOpen = state.navOpen, reviewOpen = state.reviewOpen }, { save = !0 } = {}) {
+          state.navOpen = !!navOpen, state.reviewOpen = !!reviewOpen, stage.dispatch({ type: "set-rail-open", railOpen: state.reviewOpen }), render(), save && persist();
+        },
+        restorePresentation(snapshot) {
+          finishWalkthroughTransition();
+          let personal = {};
+          for (let key of [
+            "view",
+            "screenId",
+            "frameId",
+            "variantId",
+            "compare",
+            "navOpen",
+            "reviewOpen",
+            "inspectionScale",
+            "zoom",
+            "camera",
+            "viewports"
+          ])
+            snapshot[key] !== void 0 && (personal[key] = clone(snapshot[key]));
+          state = normalizeState({ ...state, ...personal }), canvasAttached && state.view === "canvas" && applyCanvasCamera(), stage.dispatch({ type: "set-rail-open", railOpen: state.reviewOpen }), selectEntry(entryFor(), { save: !1 }), render(), persist();
+        },
+        setView(view) {
+          switchView(view);
+        },
+        fit,
+        flush,
+        exportArtifact,
+        destroy() {
+          if (!destroyed) {
+            finishWalkthroughTransition(), root.dispatchEvent(new CustomEvent("planr:design-destroy"));
+            for (let { artifactId } of entries)
+              stage.getFrame(artifactId)?.__openPlanrBridge?.setViewportGestures?.(!1);
+            destroyed = !0, canvasAttached = !1, canvas.destroy(), ++screenRequest, pendingScreen = null, failedSelection = null, clearTimeout(frameDemandTimer), clearTimeout(saveTimer), clearTimeout(reviewTimer), clearTimeout(pollTimer), clearTimeout(noticeTimer), clearTimeout(viewContextTimer), cameraFrame !== null && cancelAnimationFrame(cameraFrame);
+            for (let heading of sectionHeadings) heading.remove();
+            selectionOutline?.remove();
+            for (let remove of cleanup.splice(0)) remove();
+          }
+        }
+      });
+      return refreshSavedState().then(async () => (restorePendingLayout(), migrateLegacyPositions(), await flushLayout(), startupSettled = !0, reportReady())), pollTimer = setTimeout(pollRevision, 4e3), controller;
+    }
+    return mount();
+  }
+
+  // lib/design/ui/studio-runtime.mjs
+  var PAYLOAD_ID = "planr-design-studio-payload", STAGE_TIMEOUT_MS = 15e3;
+  function documentReady() {
+    return document.readyState !== "loading" ? Promise.resolve() : new Promise((resolve) => {
+      document.addEventListener("DOMContentLoaded", resolve, { once: !0 });
+    });
+  }
+  function stageBefore(deadline) {
+    let timer, timeout = new Promise((resolve) => {
+      timer = setTimeout(resolve, Math.max(0, deadline - Date.now()), null);
+    });
+    return Promise.race([whenArtifactStage(window), timeout]).finally(() => clearTimeout(timer));
+  }
+  async function start(payloadNode2, payload, deadline) {
+    let current = () => document.getElementById(PAYLOAD_ID) === payloadNode2;
+    if (await documentReady(), !current()) return;
+    let stage = await stageBefore(deadline);
+    if (!current()) return;
+    let studio = mountDesignStudio({ payload, stage });
+    if (!studio) return;
+    window.__openPlanrDesignStudio = studio;
+    let { experience, handoffCenter } = mountDesignEnhancements({ payload, studio, stage });
+    window.__openPlanrDesignExperience = experience, handoffCenter && (window.__openPlanrDesignHandoffCenter = handoffCenter);
+  }
+  var script = document.currentScript, payloadNode = document.getElementById(PAYLOAD_ID);
+  (!script || script.isConnected) && payloadNode && start(payloadNode, JSON.parse(payloadNode.textContent), Date.now() + STAGE_TIMEOUT_MS);