openplanr 3.1.1 → 3.2.0

package/lib/host-packages/cursor/openplanr/runtime/design/scripts/runtime/packages/design/templates/studio/studio.js.sources/17-design-studio.js

@@ -1,1844 +0,0 @@
-
-
-  // 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 }) {
-    const design = payload.document;
-    const entries = payload.entries;
-    const options2 = globalThis.__OPENPLANR_DESIGN_STUDIO_OPTIONS__ ?? {};
-    const storageKey = `openplanr.design-studio.${design.id}`;
-    const q = (selector) => document.querySelector(selector);
-    const qa = (selector) => [...document.querySelectorAll(selector)];
-    const clone = (value) => JSON.parse(JSON.stringify(value));
-    const clamp2 = (value, min2, max2) => Math.min(max2, Math.max(min2, value));
-    const readyVariants = design.variants.filter(({ status: status2 }) => status2 === "ready");
-    const views = ["canvas", "prototype", "walkthrough"];
-    const validId = (items, id, fallback) => items.some((item) => (typeof item === "string" ? item : item.id) === id) ? id : fallback;
-    const normalizedViewport = (value) => {
-      if (!Number.isFinite(value?.x) || !Number.isFinite(value?.y) || !Number.isFinite(value?.zoom))
-        return null;
-      return {
-        x: clamp2(value.x, -1e7, 1e7),
-        y: clamp2(value.y, -1e7, 1e7),
-        zoom: clamp2(value.zoom, 0.05, 2)
-      };
-    };
-    function normalizeState(input = {}) {
-      const view = views.includes(input.view) ? input.view : design.defaultView;
-      const viewports = {};
-      for (const name of views) {
-        const viewport = normalizedViewport(input.viewports?.[name]);
-        if (viewport) viewports[name] = viewport;
-      }
-      const 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;
-      const activeViewport = viewports[view] ?? legacyViewport ?? { x: 40, y: 40, zoom: 0.5 };
-      const 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: Boolean(input.compare),
-        navOpen: input.navOpen === void 0 ? true : Boolean(input.navOpen),
-        reviewOpen: input.reviewOpen === void 0 ? true : Boolean(input.reviewOpen),
-        inspectionScale: input.inspectionScale === "actual" ? "actual" : "fit",
-        zoom: activeViewport.zoom,
-        camera: { x: activeViewport.x, y: activeViewport.y },
-        viewports,
-        positions: {},
-        ratings: {},
-        remix: {},
-        preferences: { selected: [], rejected: [] }
-      };
-      for (const entry of entries) {
-        const point = input.positions?.[entry.artifactId];
-        if (Number.isFinite(point?.x) && Number.isFinite(point?.y)) {
-          state2.positions[entry.artifactId] = {
-            x: clamp2(point.x, -1e7, 1e7),
-            y: clamp2(point.y, -1e7, 1e7)
-          };
-        }
-      }
-      for (const variant of readyVariants) {
-        const rating = input.ratings?.[variant.id];
-        if (Number.isInteger(rating) && rating >= 1 && rating <= 5)
-          state2.ratings[variant.id] = rating;
-        if (typeof input.remix?.[variant.id] === "string")
-          state2.remix[variant.id] = input.remix[variant.id].slice(0, 8192);
-      }
-      for (const 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() {
-      const params = new URLSearchParams(location.hash.slice(1));
-      const linked = {};
-      for (const [key, query] of [
-        ["screenId", "screen"],
-        ["frameId", "frame"],
-        ["variantId", "direction"],
-        ["view", "view"]
-      ])
-        if (params.has(query)) linked[key] = params.get(query);
-      return linked;
-    }
-    state = normalizeState({ ...state, ...linkedState() });
-    function recordLocation() {
-      const params = new URLSearchParams({
-        screen: state.screenId,
-        frame: state.frameId,
-        direction: state.variantId,
-        view: state.view
-      });
-      const next = `#${params}`;
-      if (location.hash !== next) history.pushState(null, "", next);
-    }
-    let revision = payload.revision;
-    let stateVersion = null;
-    let stage = null;
-    let root = null;
-    let chrome = null;
-    let scroll = null;
-    let surface = null;
-    let grid = null;
-    let canvasBackground = null;
-    let cameraFrame = null;
-    let selectionOutline = null;
-    let dirty = false;
-    let contentDirty = false;
-    let contentSerial = 0;
-    let reviewDirty = false;
-    let reviewSerial = 0;
-    let reviewSaving = Promise.resolve();
-    let reviewTimer = null;
-    let latestReview = null;
-    let serial = 0;
-    let saveTimer = null;
-    let saving = Promise.resolve();
-    let pollTimer = null;
-    let noticeTimer = null;
-    let activeNotice = null;
-    const dismissedNotices = /* @__PURE__ */ new Map();
-    let readyReported = false;
-    let readyReporting = false;
-    let destroyed = false;
-    let panEnabled = false;
-    let spacePan = false;
-    let spaceReturnTool = null;
-    let activeTool = "interact";
-    let changingTool = false;
-    let previousReviewMode = "interact";
-    let gesture = null;
-    let rendering = false;
-    let previousStageZoom = 100;
-    let compactViewport = false;
-    let activeArtifactId = "";
-    let walkthroughTransition = null;
-    let pendingScreen = null, screenRequest = 0, frameDemandTimer = null;
-    let failedSelection = null;
-    let frameDemandKey = "";
-    let frameDemandGeneration = 0;
-    let queuedSelection = null;
-    let noteScreenId = null;
-    let notesReturnFocus = null;
-    const panels = /* @__PURE__ */ new Map();
-    const 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) return;
-      if (chrome) chrome.update({ saveLabel: message, savePhase: phase });
-      else {
-        const node = q("[data-design-save-state]");
-        node.textContent = message;
-        node.dataset.status = phase;
-      }
-    }
-    function hideNotice() {
-      clearTimeout(noticeTimer);
-      const node = q(".design-notice");
-      const restoreFocus = node.contains(document.activeElement);
-      node.hidden = true;
-      activeNotice = null;
-      if (restoreFocus) q(`button[data-design-view="${state.view}"]`)?.focus();
-    }
-    function clearNotice(key) {
-      dismissedNotices.delete(key);
-      if (activeNotice?.key === key) hideNotice();
-    }
-    function clearFailedSelection() {
-      if (failedSelection) clearNotice(`preview-load:${failedSelection.artifactId}`);
-      failedSelection = null;
-    }
-    function notice(message, persistent = false, key = message) {
-      if (destroyed || dismissedNotices.get(key) === message) return;
-      const node = q(".design-notice");
-      clearTimeout(noticeTimer);
-      activeNotice = { key, message, persistent };
-      q("[data-design-notice-message]").textContent = message;
-      node.hidden = false;
-      if (!persistent) noticeTimer = setTimeout(hideNotice, 6e3);
-    }
-    function storeDraft() {
-      try {
-        localStorage.setItem(
-          storageKey,
-          JSON.stringify({
-            revision,
-            stateVersion,
-            state,
-            unsaved: contentDirty,
-            personalPending: dirty && !contentDirty
-          })
-        );
-      } catch {
-      }
-    }
-    async function jsonRequest(url, init = {}) {
-      const response = await fetch(url, { credentials: "same-origin", ...init });
-      const result = await response.json().catch(() => ({}));
-      if (!response.ok) {
-        const error = new Error(
-          result.error?.message ?? result.error ?? result.message ?? `Save failed (${response.status}).`
-        );
-        error.conflict = response.status === 409;
-        throw error;
-      }
-      return result;
-    }
-    function persist({ content = false } = {}) {
-      dirty = true;
-      serial += 1;
-      if (content) {
-        contentDirty = true;
-        contentSerial += 1;
-        status("Saving changes", "saving");
-      }
-      storeDraft();
-      root.dispatchEvent(
-        new CustomEvent("planr:design-state-change", {
-          bubbles: true,
-          detail: clone(state)
-        })
-      );
-      clearTimeout(saveTimer);
-      saveTimer = setTimeout(flush, 180);
-    }
-    function flushState() {
-      clearTimeout(saveTimer);
-      if (!dirty) return saving;
-      const captured = clone(state);
-      const capturedSerial = serial;
-      const capturedContent = contentDirty;
-      const capturedContentSerial = contentSerial;
-      saving = saving.catch(() => {
-      }).then(async () => {
-        if (destroyed) return;
-        try {
-          let result;
-          if (!capturedContent && typeof options2.savePersonalState === "function") {
-            result = await options2.savePersonalState(captured, { revision, stateVersion });
-          } else if (typeof options2.saveState === "function") {
-            result = await options2.saveState(captured, {
-              revision,
-              stateVersion,
-              personal: !capturedContent
-            });
-          } else if (options2.stateUrl) {
-            result = await jsonRequest(options2.stateUrl, {
-              method: "PUT",
-              headers: { "Content-Type": "application/json" },
-              body: JSON.stringify({ state: captured, revision, stateVersion })
-            });
-          }
-          if (result?.stateVersion !== void 0) stateVersion = result.stateVersion;
-          if (result?.revision !== void 0) revision = result.revision;
-          clearNotice("personal-save");
-          if (capturedContent) clearNotice("content-save");
-          if (capturedSerial === serial) {
-            dirty = false;
-          }
-          if (capturedContent && capturedContentSerial === contentSerial) {
-            contentDirty = false;
-            if (!reviewDirty)
-              status(
-                options2.stateUrl || options2.saveState ? "All changes saved" : "Saved in this browser"
-              );
-          }
-          storeDraft();
-        } catch (error) {
-          if (capturedContent)
-            status(
-              error.conflict ? "Save conflict" : "Disconnected · unsaved",
-              error.conflict ? "failed" : "disconnected"
-            );
-          notice(
-            !capturedContent ? "Canvas preferences could not be synchronized. Your arrangement remains saved in this browser." : 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.",
-            true,
-            capturedContent ? "content-save" : "personal-save"
-          );
-          storeDraft();
-        }
-      });
-      return saving;
-    }
-    function reviewUrl() {
-      return options2.reviewUrl ?? (options2.stateUrl ? options2.stateUrl.replace(/design-state$/, "review") : null);
-    }
-    function storeReviewDraft() {
-      if (!latestReview) return;
-      try {
-        localStorage.setItem(
-          `${storageKey}.review`,
-          JSON.stringify({ review: latestReview, unsaved: reviewDirty })
-        );
-      } catch {
-      }
-    }
-    function flushReview() {
-      clearTimeout(reviewTimer);
-      if (!reviewDirty || !latestReview) return reviewSaving;
-      const captured = clone(latestReview);
-      const capturedSerial = reviewSerial;
-      reviewSaving = reviewSaving.catch(() => {
-      }).then(async () => {
-        try {
-          if (reviewUrl())
-            await jsonRequest(reviewUrl(), {
-              method: "PUT",
-              headers: { "Content-Type": "application/json" },
-              body: JSON.stringify({ review: captured })
-            });
-          clearNotice("review-save");
-          if (capturedSerial === reviewSerial) {
-            reviewDirty = false;
-            if (!contentDirty) status(reviewUrl() ? "All changes saved" : "Saved in this browser");
-          }
-          storeReviewDraft();
-        } catch (error) {
-          status("Comments unsaved", "disconnected");
-          notice(
-            `Comments could not be saved: ${error.message} Your draft remains in this browser.`,
-            true,
-            "review-save"
-          );
-          storeReviewDraft();
-        }
-      });
-      return reviewSaving;
-    }
-    function flush() {
-      return Promise.all([flushState(), 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 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 updatePan() {
-      root.dataset.designPanActive = String(state.view === "canvas" && (panEnabled || spacePan));
-      root.dataset.designTool = activeTool;
-      root.dataset.designDragging = String(gesture?.mode === "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 (const [id, panel] of panels) {
-        const frame = stage.getFrame(id);
-        if (frame) {
-          const tabIndex = activeTool === "interact" && !panel.hidden && stage.getState().status === "ready" ? 0 : -1;
-          if (frame.tabIndex !== tabIndex) frame.tabIndex = tabIndex;
-          frame.__openPlanrBridge?.setViewportGestures?.(state.view === "canvas" && !panel.hidden);
-        }
-      }
-    }
-    function finishGesture() {
-      if (!gesture) return;
-      const pointerId = gesture.pointerId;
-      gesture = null;
-      try {
-        if (scroll.hasPointerCapture?.(pointerId)) scroll.releasePointerCapture(pointerId);
-      } catch {
-      }
-      updatePan();
-      persist();
-    }
-    function setTool(tool) {
-      if (!["interact", "annotate", "pan", "inspect"].includes(tool)) return;
-      if (tool === "pan" && state.view !== "canvas") return;
-      if (tool === "annotate" && root.hasAttribute("data-planr-room-comments-paused")) return;
-      finishWalkthroughTransition();
-      finishGesture();
-      spacePan = false;
-      spaceReturnTool = null;
-      activeTool = tool;
-      panEnabled = tool === "pan";
-      previousReviewMode = tool === "annotate" ? "comment" : "interact";
-      changingTool = true;
-      try {
-        stage.dispatch({ type: "set-review-mode", reviewMode: previousReviewMode });
-      } finally {
-        changingTool = false;
-      }
-      root.dispatchEvent(new CustomEvent("planr:design-tool-change", { detail: { tool } }));
-      updatePan();
-    }
-    function releaseTemporaryPan() {
-      const previous = spaceReturnTool;
-      finishGesture();
-      if (spacePan) setTool(previous || "interact");
-    }
-    function saveViewport() {
-      state.viewports[state.view] = {
-        x: state.camera.x,
-        y: state.camera.y,
-        zoom: state.zoom
-      };
-    }
-    function restoreViewport(view) {
-      const viewport = state.viewports[view];
-      if (!viewport) return false;
-      state.camera = { x: viewport.x, y: viewport.y };
-      state.zoom = viewport.zoom;
-      return true;
-    }
-    function switchView(view, { save = true } = {}) {
-      if (!views.includes(view)) throw new TypeError(`Unknown design view: ${view}`);
-      if (view === state.view) return;
-      const queued = pendingScreen ? null : queuedSelection;
-      finishWalkthroughTransition();
-      closeDesignNotes();
-      saveViewport();
-      state.view = view;
-      setTool(view === "canvas" && activeTool === "annotate" ? "annotate" : "interact");
-      root.dispatchEvent(new CustomEvent("planr:design-view-change", { detail: { view } }));
-      const restored = view === "canvas" && restoreViewport(view);
-      render();
-      if (!restored) fit({ save: false });
-      if (queued) selectEntry(queued.entry, { ...queued.settings, save: false });
-      if (save) {
-        persist();
-        recordLocation();
-      }
-    }
-    function defaultPosition(entry, variant) {
-      const gap = 96;
-      const top = 72;
-      const frame = design.frames.find(({ id }) => id === entry.frameId);
-      const variants = state.compare ? readyVariants : [variant];
-      const variantIndex = variants.findIndex(({ id }) => id === entry.variantId);
-      const groupWidth = design.frames.reduce((sum, item) => sum + item.width, 0) + gap * Math.max(0, design.frames.length - 1) + 160;
-      return {
-        x: variantIndex * groupWidth + design.frames.slice(0, design.frames.indexOf(frame)).reduce((sum, item) => sum + item.width + gap, 0),
-        y: top + design.screenOrder.indexOf(entry.screenId) * (Math.max(...design.frames.map(({ height }) => height)) + 176)
-      };
-    }
-    function contentBounds(selection = null) {
-      const visible = selection ? [selection] : visibleEntries();
-      if (!visible.length) return { minX: 0, minY: 0, maxX: 1, maxY: 1 };
-      return visible.reduce(
-        (bounds, entry) => {
-          const panel = panels.get(entry.artifactId);
-          const frame = design.frames.find(({ id }) => id === entry.frameId);
-          const x = Number.parseFloat(panel.style.left) || 0;
-          const y = Number.parseFloat(panel.style.top) || 0;
-          bounds.minX = Math.min(bounds.minX, x);
-          bounds.minY = Math.min(bounds.minY, y - 64);
-          bounds.maxX = Math.max(bounds.maxX, x + frame.width);
-          bounds.maxY = Math.max(bounds.maxY, y + frame.height);
-          return bounds;
-        },
-        { minX: Infinity, minY: Infinity, maxX: -Infinity, maxY: -Infinity }
-      );
-    }
-    function centerEntry(entry) {
-      const panel = panels.get(entry.artifactId);
-      const frame = design.frames.find(({ id }) => id === entry.frameId);
-      const x = Number.parseFloat(panel.style.left) || 0;
-      const y = Number.parseFloat(panel.style.top) || 0;
-      state.camera = {
-        x: scroll.clientWidth / 2 - (x + frame.width / 2) * state.zoom,
-        y: scroll.clientHeight / 2 - (y + frame.height / 2) * state.zoom
-      };
-      saveViewport();
-      render();
-    }
-    function updateDesignNotes() {
-      const notes = q("[data-design-notes]");
-      if (!notes) return;
-      notes.querySelector(":scope > summary").setAttribute("aria-expanded", String(notes.open));
-      for (const button of qa("[data-design-note]"))
-        button.setAttribute(
-          "aria-expanded",
-          String(notes.open && button.dataset.designNote === noteScreenId)
-        );
-      if (!notes.open) return;
-      const panel = q(".design-guidance-panel");
-      const anchor = notes.querySelector(":scope > summary").getBoundingClientRect();
-      const width = panel.getBoundingClientRect().width || Math.min(340, window.innerWidth - 24);
-      const 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 = false } = {}) {
-      const notes = q("[data-design-notes]");
-      if (!notes?.open) return;
-      notes.open = false;
-      noteScreenId = null;
-      updateDesignNotes();
-      if (restoreFocus) {
-        const target = notesReturnFocus?.isConnected ? notesReturnFocus : notes.querySelector(":scope > summary");
-        target?.focus({ preventScroll: true });
-      }
-      notesReturnFocus = null;
-    }
-    function openDesignNote(screenId, trigger) {
-      const notes = q("[data-design-notes]");
-      if (!notes) return;
-      if (notes.open && noteScreenId === screenId) {
-        closeDesignNotes();
-        return;
-      }
-      notesReturnFocus = trigger;
-      noteScreenId = screenId;
-      notes.open = true;
-      let target = null;
-      for (const item of qa("[data-design-note-screen]")) {
-        const selected = item.dataset.designNoteScreen === screenId;
-        item.open = selected;
-        item.dataset.active = String(selected);
-        if (selected) target = item;
-      }
-      updateDesignNotes();
-      const panel = q(".design-guidance-panel");
-      if (target)
-        panel.scrollTop = Math.max(0, target.offsetTop - panel.querySelector("header").offsetHeight);
-    }
-    function render() {
-      if (!stage || rendering || destroyed) return;
-      rendering = true;
-      try {
-        if (window.innerWidth <= 680)
-          root.style.setProperty(
-            "--planr-toolbar-height",
-            `${q(".design-toolbar").getBoundingClientRect().height}px`
-          );
-        else root.style.removeProperty("--planr-toolbar-height");
-        const screen = design.screens.find(({ id }) => id === state.screenId);
-        const variant = design.variants.find(({ id }) => id === state.variantId);
-        const stageState = stage.getState();
-        root.dataset.designView = state.view;
-        root.dataset.designNavOpen = String(state.navOpen);
-        const navigator2 = q(".design-navigator");
-        navigator2.inert = !state.navOpen;
-        navigator2.setAttribute("aria-hidden", String(!state.navOpen));
-        for (const toggle of qa("[data-design-toggle-nav]"))
-          toggle.setAttribute("aria-expanded", String(state.navOpen));
-        for (const button of qa("[data-design-view]")) {
-          if (button.tagName === "BUTTON")
-            button.setAttribute("aria-pressed", String(button.dataset.designView === state.view));
-        }
-        for (const 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;
-        if (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;
-        const 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 (const button of qa("[data-design-rating]")) {
-          const selected = Number(button.dataset.designRating) <= (state.ratings[state.variantId] ?? 0);
-          button.setAttribute("aria-pressed", String(selected));
-          button.textContent = selected ? "★" : "☆";
-        }
-        if (document.activeElement !== q("[data-design-remix]"))
-          q("[data-design-remix]").value = state.remix[state.variantId] ?? "";
-        q("[data-design-pan]").hidden = state.view !== "canvas";
-        for (const 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"
-        );
-        const 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"
-        );
-        const comparison = q("[data-design-compare]");
-        if (comparison) comparison.closest("label").hidden = state.view !== "canvas";
-        const 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 (const item of qa("[data-design-note-screen]"))
-          item.dataset.active = String(item.dataset.designNoteScreen === state.screenId);
-        const visible = visibleEntries();
-        const visibleIds = new Set(visible.map(({ artifactId }) => artifactId));
-        for (const entry of entries) {
-          const panel = panels.get(entry.artifactId);
-          const isVisible = visibleIds.has(entry.artifactId);
-          const outgoing = walkthroughTransition?.from === entry.artifactId;
-          panel.hidden = !isVisible && !outgoing;
-          panel.dataset.designActive = String(entry.artifactId === activeArtifactId);
-          const frameElement = stage.getFrame(entry.artifactId);
-          const layer = panel.querySelector("[data-planr-annotation-layer]");
-          const ready = stageState.status === "ready" && (!stage.frameBudget || frameElement.dataset.planrFrameState === "ready");
-          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));
-          if (!isVisible && !outgoing) continue;
-          let { x, y } = defaultPosition(entry, variant);
-          if (state.view === "canvas") ({ x, y } = state.positions[entry.artifactId] ?? { x, y });
-          else {
-            x = 0;
-            y = 0;
-          }
-          panel.style.left = `${x}px`;
-          panel.style.top = `${y}px`;
-        }
-        grid.style.width = "1px";
-        grid.style.height = "1px";
-        surface.style.width = "100%";
-        surface.style.height = "100%";
-        updatePan();
-        renderCamera();
-        chrome?.update({ view: state.view, navOpen: state.navOpen, reviewOpen: stageState.railOpen });
-        root.dispatchEvent(new CustomEvent("planr:design-render", { detail: clone(state) }));
-      } finally {
-        rendering = false;
-      }
-    }
-    function scheduleCamera() {
-      if (cameraFrame !== null || destroyed) return;
-      cameraFrame = requestAnimationFrame(() => {
-        cameraFrame = null;
-        renderCamera();
-      });
-    }
-    function renderCamera() {
-      if (!stage || destroyed) return;
-      if (cameraFrame !== null) {
-        cancelAnimationFrame(cameraFrame);
-        cameraFrame = null;
-      }
-      if (state.view !== "canvas") {
-        const frame = design.frames.find((item) => item.id === state.frameId);
-        const 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
-        };
-        if (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();
-      }
-      const zoom = String(state.zoom);
-      if (grid.style.getPropertyValue("--design-zoom") !== zoom)
-        grid.style.setProperty("--design-zoom", zoom);
-      grid.style.transform = `translate(${state.camera.x}px, ${state.camera.y}px) scale(${state.zoom})`;
-      const pixelRatio = window.devicePixelRatio || 1;
-      const backgroundOffset = (value) => Math.round(value % 24 * pixelRatio) / pixelRatio;
-      canvasBackground.style.transform = `translate3d(${backgroundOffset(state.camera.x)}px, ${backgroundOffset(state.camera.y)}px, 0)`;
-      const active = entries.find((entry) => entry.artifactId === activeArtifactId);
-      const panel = panels.get(activeArtifactId);
-      if (selectionOutline) {
-        selectionOutline.hidden = state.view !== "canvas" || !active || !panel || panel.hidden;
-        if (!selectionOutline.hidden) {
-          const frame = design.frames.find((item) => item.id === active.frameId);
-          const ratio = window.devicePixelRatio || 1;
-          const pixel = (value) => Math.round(value * ratio) / ratio;
-          const x = pixel(state.camera.x + Number.parseFloat(panel.style.left) * state.zoom);
-          const y = pixel(state.camera.y + Number.parseFloat(panel.style.top) * 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(frame.height * state.zoom) + 6}px`;
-        }
-      }
-      const label = `${Math.round(state.zoom * 100)}%`;
-      const reset = q('[data-design-zoom="reset"]');
-      if (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) return;
-      for (const [id, panel] of panels) {
-        const frame = stage.getFrame(id), placeholder = panel.querySelector("[data-design-load-frame]");
-        if (!placeholder) continue;
-        const status2 = frame.dataset.planrFrameState || "unloaded";
-        placeholder.hidden = status2 === "ready";
-        placeholder.disabled = status2 === "loading";
-        const copy = status2 === "loading" ? "Loading screen…" : status2 === "error" ? "Retry screen" : "Open screen";
-        if (placeholder.textContent !== copy) placeholder.textContent = copy;
-        frame.style.visibility = status2 === "ready" ? "" : "hidden";
-      }
-    }
-    function scheduleFrameDemand() {
-      if (!stage?.frameBudget || destroyed) return;
-      clearTimeout(frameDemandTimer);
-      const generation = frameDemandGeneration;
-      frameDemandTimer = setTimeout(() => {
-        if (destroyed || generation !== frameDemandGeneration || !readyReported || pendingScreen || walkthroughTransition || state.view !== "canvas" || root.dataset.sharedOpening || document.querySelector(".design-welcome[open]"))
-          return;
-        const box = scroll.getBoundingClientRect();
-        const nearby = visibleEntries().map((entry) => {
-          const rect = panels.get(entry.artifactId).getBoundingClientRect();
-          return {
-            id: entry.artifactId,
-            visible: rect.right > box.left && rect.left < box.right && rect.bottom > box.top && rect.top < box.bottom,
-            distance: Math.hypot(
-              (rect.left + rect.right - box.left - box.right) / 2,
-              (rect.top + rect.bottom - box.top - box.bottom) / 2
-            )
-          };
-        }).filter((item) => item.visible).sort((a, b) => a.distance - b.distance);
-        const ids = [
-          ...new Set([activeArtifactId, ...nearby.map((item) => item.id)].filter(Boolean))
-        ].slice(0, stage.frameBudget);
-        const key = ids.join("|");
-        if (key === frameDemandKey) return;
-        frameDemandKey = key;
-        void stage.ensureFrames(ids, () => !destroyed && generation === frameDemandGeneration).then(updateFramePlaceholders).catch((error) => {
-          if (!destroyed && error.name !== "AbortError") {
-            frameDemandKey = "";
-            updateFramePlaceholders();
-          }
-        });
-      }, 120);
-    }
-    function finishWalkthroughTransition({ continueQueued = false } = {}) {
-      const transition = walkthroughTransition;
-      const queued = continueQueued ? queuedSelection : null;
-      queuedSelection = null;
-      if (!transition) return;
-      walkthroughTransition = null;
-      cancelAnimationFrame(transition.frame);
-      clearTimeout(transition.timeout);
-      for (const animation of transition.animations ?? []) animation.cancel();
-      for (const visual of transition.visuals ?? []) delete visual.dataset.designTransitionVisual;
-      for (const id of [transition.from, transition.to]) {
-        const panel = panels.get(id);
-        panel.inert = false;
-        panel.removeAttribute("aria-hidden");
-        delete panel.dataset.designTransitionOutgoing;
-        delete panel.dataset.designTransitionIncoming;
-      }
-      delete root.dataset.designTransition;
-      render();
-      if (queued && !destroyed) selectEntry(queued.entry, queued.settings);
-    }
-    function prepareWalkthroughTransition(entry) {
-      const from = activeArtifactId;
-      const outgoing = panels.get(from);
-      const incoming = panels.get(entry.artifactId);
-      const direction = design.screenOrder.indexOf(entry.screenId) < design.screenOrder.indexOf(state.screenId) ? -1 : 1;
-      const transition = {
-        from,
-        to: entry.artifactId,
-        direction,
-        frame: null,
-        timeout: null,
-        animations: [],
-        visuals: []
-      };
-      walkthroughTransition = transition;
-      root.dataset.designTransition = "preparing";
-      outgoing.dataset.designTransitionOutgoing = "";
-      incoming.dataset.designTransitionIncoming = "";
-      if (outgoing.contains(document.activeElement))
-        q(`[data-design-step-change="${direction}"]`).focus({ preventScroll: true });
-      outgoing.inert = incoming.inert = true;
-      outgoing.setAttribute("aria-hidden", "true");
-      const finish = () => {
-        if (walkthroughTransition === transition)
-          finishWalkthroughTransition({ continueQueued: true });
-      };
-      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";
-          const frameVisual = incoming.querySelector(".planr-frame iframe");
-          const annotationVisual = incoming.querySelector("[data-planr-annotation-layer]");
-          transition.visuals = [frameVisual, annotationVisual].filter(Boolean);
-          for (const visual of transition.visuals) visual.dataset.designTransitionVisual = "";
-          const 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
-            )
-          ];
-          if (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 = {}) {
-      const 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 = true, reveal = false, loaded = false } = {}) {
-      if (!entry) return false;
-      if (stage.frameBudget && !loaded && (pendingScreen || !stage.getLoadedArtifactIds().includes(entry.artifactId))) {
-        queuedSelection = null;
-        if (pendingScreen?.entry.artifactId === entry.artifactId) return true;
-        clearFailedSelection();
-        const request = ++screenRequest;
-        pendingScreen = { entry };
-        root.dataset.designScreenLoading = "true";
-        const ids = [...new Set([activeArtifactId, entry.artifactId].filter(Boolean))];
-        void stage.ensureFrames(ids).then(() => {
-          if (destroyed || request !== screenRequest) return;
-          pendingScreen = null;
-          delete root.dataset.designScreenLoading;
-          selectEntry(entry, { save, reveal, loaded: true });
-          updateFramePlaceholders();
-        }).catch((error) => {
-          if (destroyed || request !== screenRequest || error.name === "AbortError") return;
-          pendingScreen = null;
-          failedSelection = entry;
-          delete root.dataset.designScreenLoading;
-          notice(
-            "This screen could not load. Select it again to retry; your review is preserved.",
-            true,
-            `preview-load:${entry.artifactId}`
-          );
-          render();
-          updateFramePlaceholders();
-        });
-        return true;
-      }
-      clearFailedSelection();
-      const sameFrame = entry.frameId === state.frameId && entry.variantId === state.variantId;
-      if (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);
-        return true;
-      }
-      finishWalkthroughTransition();
-      if (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();
-      if (reveal) centerEntry(entry);
-      if (save) {
-        persist();
-        recordLocation();
-      }
-      return true;
-    }
-    function fit({ save = true, selection = null } = {}) {
-      state.inspectionScale = "fit";
-      render();
-      if (state.view !== "canvas") {
-        if (save) persist();
-        return;
-      }
-      const bounds = contentBounds(selection);
-      const width = Math.max(1, bounds.maxX - bounds.minX);
-      const height = Math.max(1, bounds.maxY - bounds.minY);
-      const availableWidth = Math.max(100, scroll.clientWidth - 96);
-      const availableHeight = Math.max(100, scroll.clientHeight - 96);
-      state.zoom = clamp2(
-        Math.min(availableWidth / Math.max(1, width), availableHeight / Math.max(1, height)),
-        0.05,
-        1
-      );
-      state.camera = {
-        x: (scroll.clientWidth - width * state.zoom) / 2 - bounds.minX * state.zoom,
-        y: (scroll.clientHeight - height * state.zoom) / 2 - bounds.minY * state.zoom
-      };
-      saveViewport();
-      renderCamera();
-      if (save) persist();
-    }
-    function zoomTo(value, point = null, { scheduled = false } = {}) {
-      if (state.view !== "canvas") return;
-      const previous = state.zoom;
-      const next = clamp2(value, 0.05, 2);
-      const rect = scroll.getBoundingClientRect();
-      const x = point ? point.x - rect.left : scroll.clientWidth / 2;
-      const y = point ? point.y - rect.top : scroll.clientHeight / 2;
-      state.camera = {
-        x: x - (x - state.camera.x) * next / previous,
-        y: y - (y - state.camera.y) * next / previous
-      };
-      state.zoom = next;
-      saveViewport();
-      if (scheduled) scheduleCamera();
-      else renderCamera();
-      persist();
-    }
-    async function exportArtifact(kind) {
-      const artifactId = activeArtifactId;
-      try {
-        let blob;
-        if (kind === "png") {
-          const result = typeof options2.exportPng === "function" ? await options2.exportPng({ artifactId }) : await stage.getFrame(artifactId)?.__openPlanrBridge?.exportPng("screen");
-          const 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."
-            );
-          const bytes = Uint8Array.from(
-            atob(dataUrl.split(",")[1]),
-            (character) => character.charCodeAt(0)
-          );
-          blob = new Blob([bytes], { type: "image/png" });
-        } else {
-          const 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."
-            );
-        }
-        const url = URL.createObjectURL(blob);
-        const 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 = false;
-        notice(kind === "png" ? "Screen PNG exported." : "Portable HTML exported.");
-      } catch (error) {
-        notice(error.message, true);
-      }
-    }
-    function editable(target) {
-      return Boolean(target?.closest?.('input,textarea,select,[contenteditable="true"]'));
-    }
-    function installEvents() {
-      listen(root, "planr:artifact-viewport-zoom", (event) => {
-        if (state.view !== "canvas") return;
-        const entry = entries.find((item) => stage.getFrame(item.artifactId) === event.target);
-        if (!entry || panels.get(entry.artifactId)?.hidden) return;
-        const { x, y, deltaY } = event.detail;
-        const frame = design.frames.find((item) => item.id === entry.frameId);
-        const rect = event.target.getBoundingClientRect();
-        chrome?.update({ exportMenuOpen: false });
-        zoomTo(
-          state.zoom * Math.exp(-deltaY * 4e-3),
-          {
-            x: rect.left + x * rect.width / frame.width,
-            y: rect.top + y * rect.height / frame.height
-          },
-          { scheduled: true }
-        );
-      });
-      listen(root, "planr:artifact-viewport-pan", (event) => {
-        if (state.view !== "canvas") return;
-        const entry = entries.find((item) => stage.getFrame(item.artifactId) === event.target);
-        if (!entry || panels.get(entry.artifactId)?.hidden) return;
-        chrome?.update({ exportMenuOpen: false });
-        state.camera = {
-          x: clamp2(state.camera.x - event.detail.deltaX, -1e7, 1e7),
-          y: clamp2(state.camera.y - event.detail.deltaY, -1e7, 1e7)
-        };
-        saveViewport();
-        scheduleCamera();
-        persist();
-      });
-      listen(
-        root,
-        "click",
-        (event) => {
-          const button = event.target.closest('[data-planr-mode],[data-planr-action="add-comment"]');
-          if (!button || button.disabled) return;
-          setTool(button.dataset.planrMode === "interact" ? "interact" : "annotate");
-        },
-        true
-      );
-      listen(
-        document,
-        "keydown",
-        (event) => {
-          if (editable(event.target) || event.altKey || event.ctrlKey || event.metaKey || document.querySelector("dialog[open],[role=dialog][data-state=open]"))
-            return;
-          const 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 if (event.key === "Escape" && (panEnabled || spacePan || gesture || activeTool === "inspect") && !q("[data-design-notes][open]") && !q("[data-planr-annotation-composer]")) {
-            event.preventDefault();
-            setTool("interact");
-            q('[data-planr-mode="interact"]').focus();
-          }
-        },
-        true
-      );
-      if (typeof ResizeObserver === "function") {
-        const observer = new ResizeObserver(() => {
-          if (state.view !== "canvas" && root.dataset.designRestoring !== "true")
-            fit({ save: false });
-          updateDesignNotes();
-        });
-        observer.observe(scroll);
-        cleanup.push(() => observer.disconnect());
-      }
-      const notes = q("[data-design-notes]");
-      listen(notes?.querySelector(":scope > summary"), "click", (event) => {
-        event.preventDefault();
-        if (notes.open) closeDesignNotes();
-        else {
-          notesReturnFocus = event.currentTarget;
-          notes.open = true;
-          updateDesignNotes();
-        }
-      });
-      listen(notes, "toggle", updateDesignNotes);
-      listen(
-        document,
-        "pointerdown",
-        (event) => {
-          if (notes?.open && !notes.contains(event.target) && !event.target.closest?.("[data-design-note]"))
-            closeDesignNotes();
-        },
-        true
-      );
-      listen(
-        document,
-        "keydown",
-        (event) => {
-          if (event.key === "Escape" && notes?.open) {
-            event.preventDefault();
-            event.stopPropagation();
-            closeDesignNotes({ restoreFocus: true });
-          }
-        },
-        true
-      );
-      listen(root, "click", (event) => {
-        const button = event.target.closest("button");
-        if (!button) return;
-        if (button.dataset.designLoadFrame) {
-          selectEntry(
-            entries.find((item) => item.artifactId === button.dataset.designLoadFrame),
-            { reveal: true }
-          );
-        } else if (button.hasAttribute("data-design-actual-size")) {
-          state.inspectionScale = "actual";
-          render();
-          persist();
-        } else if (button.hasAttribute("data-design-focus")) {
-          state.navOpen = false;
-          state.reviewOpen = false;
-          stage.dispatch({ type: "set-rail-open", railOpen: false });
-          if (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;
-          if (!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: true });
-        } 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) {
-          const 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) {
-          const rating = Number(button.dataset.designRating);
-          state.ratings[state.variantId] = rating;
-          if (rating <= 2)
-            state.preferences.rejected = [
-              .../* @__PURE__ */ new Set([...state.preferences.rejected, state.variantId])
-            ];
-          else
-            state.preferences.rejected = state.preferences.rejected.filter(
-              (id) => id !== state.variantId
-            );
-          render();
-          persist({ content: true });
-        } else if (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: true });
-        } else if (button.hasAttribute("data-design-save-remix")) {
-          state.remix[state.variantId] = q("[data-design-remix]").value.trim();
-          persist({ content: true });
-          notice("Refinement note saved for the next design iteration.");
-        } else if (button.dataset.designExport) void 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) => {
-        const next = event.detail;
-        if (!changingTool && next.reviewMode !== previousReviewMode)
-          setTool(next.reviewMode === "comment" ? "annotate" : "interact");
-        const reviewChanged = typeof next.railOpen === "boolean" && next.railOpen !== state.reviewOpen;
-        if (reviewChanged) state.reviewOpen = next.railOpen;
-        const entry = entries.find(({ artifactId }) => artifactId === next.activeArtifactId);
-        if (entry && entry.artifactId !== activeArtifactId) {
-          if (stage.frameBudget && !stage.getLoadedArtifactIds().includes(entry.artifactId)) {
-            selectEntry(entry, { save: false });
-          } else {
-            finishWalkthroughTransition();
-            activeArtifactId = entry.artifactId;
-            state.screenId = entry.screenId;
-            state.frameId = entry.frameId;
-            state.variantId = entry.variantId;
-          }
-        }
-        if (next.zoom !== previousStageZoom) {
-          state.zoom = clamp2(next.zoom / 100, 0.05, 2);
-          previousStageZoom = next.zoom;
-          saveViewport();
-        }
-        render();
-        if (reviewChanged) persist();
-      });
-      listen(root, "planr:artifact-review-change", (event) => {
-        latestReview = clone(event.detail);
-        reviewDirty = true;
-        reviewSerial += 1;
-        status("Saving comments", "saving");
-        storeReviewDraft();
-        clearTimeout(reviewTimer);
-        reviewTimer = setTimeout(flushReview, 180);
-      });
-      listen(
-        root,
-        "pointerdown",
-        (event) => {
-          const panel = event.target.closest(".planr-artifact-panel");
-          if (event.button === 0 && panel && !panEnabled && !spacePan && !event.target.closest("[data-design-note]")) {
-            selectEntry(
-              entries.find(({ artifactId }) => artifactId === panel.dataset.artifactId),
-              { save: false }
-            );
-          }
-        },
-        true
-      );
-      listen(
-        scroll,
-        "wheel",
-        (event) => {
-          if (state.view !== "canvas") return;
-          event.preventDefault();
-          if (event.ctrlKey || event.metaKey) {
-            zoomTo(
-              state.zoom * Math.exp(-event.deltaY * 4e-3),
-              {
-                x: event.clientX,
-                y: event.clientY
-              },
-              { scheduled: true }
-            );
-            return;
-          }
-          state.camera = {
-            x: state.camera.x - (event.shiftKey ? event.deltaY : event.deltaX),
-            y: state.camera.y - (event.shiftKey ? 0 : event.deltaY)
-          };
-          saveViewport();
-          scheduleCamera();
-          persist();
-        },
-        { passive: false }
-      );
-      listen(scroll, "pointerdown", (event) => {
-        if (state.view !== "canvas") return;
-        if (root.dataset.designInspect === "true") return;
-        if (event.button !== 0 && event.button !== 1) return;
-        const label = event.target.closest("[data-design-drag]");
-        const dragging = event.button === 0 && state.view === "canvas" && label && !panEnabled && !spacePan;
-        const panning = event.button === 1 || panEnabled || spacePan || event.target === scroll || event.target === grid || event.target === surface;
-        if (!dragging && !panning) return;
-        event.preventDefault();
-        const panel = label?.closest(".planr-artifact-panel");
-        gesture = {
-          pointerId: event.pointerId,
-          x: event.clientX,
-          y: event.clientY,
-          mode: dragging ? "artboard" : "pan",
-          artifactId: dragging ? panel.dataset.artifactId : null,
-          left: dragging ? parseFloat(panel.style.left) : state.camera.x,
-          top: dragging ? parseFloat(panel.style.top) : state.camera.y
-        };
-        scroll.setPointerCapture?.(event.pointerId);
-        updatePan();
-      });
-      listen(scroll, "pointermove", (event) => {
-        if (!gesture || gesture.pointerId !== event.pointerId) return;
-        const dx = event.clientX - gesture.x;
-        const dy = event.clientY - gesture.y;
-        if (gesture.mode === "pan") {
-          state.camera = {
-            x: clamp2(gesture.left + dx, -1e7, 1e7),
-            y: clamp2(gesture.top + dy, -1e7, 1e7)
-          };
-          saveViewport();
-          scheduleCamera();
-        } else {
-          state.positions[gesture.artifactId] = {
-            x: clamp2(gesture.left + dx / state.zoom, -1e7, 1e7),
-            y: clamp2(gesture.top + dy / state.zoom, -1e7, 1e7)
-          };
-          const panel = panels.get(gesture.artifactId);
-          panel.style.left = `${state.positions[gesture.artifactId].x}px`;
-          panel.style.top = `${state.positions[gesture.artifactId].y}px`;
-          scheduleCamera();
-        }
-      });
-      for (const eventName of ["pointerup", "pointercancel", "lostpointercapture"])
-        listen(scroll, eventName, (event) => {
-          if (!gesture || gesture.pointerId !== event.pointerId) return;
-          if (eventName === "pointerup") finishGesture();
-          else releaseTemporaryPan();
-        });
-      listen(document, "keydown", (event) => {
-        if (editable(event.target)) return;
-        if (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]")) {
-          event.preventDefault();
-          if (event.repeat) return;
-          const previous = activeTool;
-          setTool("pan");
-          panEnabled = false;
-          spacePan = true;
-          spaceReturnTool = previous;
-          updatePan();
-        }
-        const label = event.target.closest("[data-design-drag]");
-        if (label && state.view === "canvas" && ["ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight"].includes(event.key)) {
-          event.preventDefault();
-          const panel = label.closest(".planr-artifact-panel");
-          const distance = event.shiftKey ? 40 : 8;
-          state.positions[panel.dataset.artifactId] = {
-            x: clamp2(
-              parseFloat(panel.style.left) + (event.key === "ArrowRight" ? distance : event.key === "ArrowLeft" ? -distance : 0),
-              -1e7,
-              1e7
-            ),
-            y: clamp2(
-              parseFloat(panel.style.top) + (event.key === "ArrowDown" ? distance : event.key === "ArrowUp" ? -distance : 0),
-              -1e7,
-              1e7
-            )
-          };
-          render();
-          persist();
-        } else if (state.view === "walkthrough" && ["ArrowLeft", "ArrowRight"].includes(event.key) && !event.target.closest('button,[role="radio"]')) {
-          event.preventDefault();
-          const 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) => {
-        if (event.code === "Space") {
-          releaseTemporaryPan();
-        }
-      });
-      listen(window, "blur", () => {
-        releaseTemporaryPan();
-        if (document.activeElement?.tagName === "IFRAME") closeDesignNotes();
-      });
-      listen(document, "visibilitychange", () => {
-        if (document.hidden) {
-          releaseTemporaryPan();
-          finishWalkthroughTransition();
-        }
-      });
-      listen(
-        window.matchMedia?.("(prefers-reduced-motion: reduce)"),
-        "change",
-        () => finishWalkthroughTransition()
-      );
-      listen(window, "resize", () => {
-        const compact = window.innerWidth <= 960;
-        if (compact && !compactViewport) {
-          state.navOpen = false;
-          state.reviewOpen = false;
-          stage.dispatch({ type: "set-rail-open", railOpen: false });
-          persist();
-        }
-        compactViewport = compact;
-        render();
-        if (state.view !== "canvas" && root.dataset.designRestoring !== "true") fit({ save: false });
-        updateDesignNotes();
-      });
-      listen(window, "online", () => {
-        if (dirty || reviewDirty) void flush();
-      });
-      listen(window, "beforeunload", (event) => {
-        clearTimeout(frameDemandTimer);
-        frameDemandGeneration += 1;
-        frameDemandKey = "";
-        storeDraft();
-        storeReviewDraft();
-        if ((contentDirty || reviewDirty) && (options2.stateUrl || options2.saveState || 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;
-        const source = entries.find(
-          ({ artifactId }) => stage.getFrame(artifactId)?.contentWindow === event.source
-        );
-        if (!source || !design.screenOrder.includes(event.data.screenId)) return;
-        const nonce = stage.getFrame(source.artifactId)?.__openPlanrBridge?.getPrototypeNonce?.();
-        if (!nonce) return;
-        if (event.data.type === "navigate" && (event.data.channel !== nonce || event.data.viewId !== source.artifactId || event.data.schemaVersion !== "1.0.0"))
-          return;
-        if (state.view !== "canvas" && (source.artifactId !== activeArtifactId || walkthroughTransition))
-          return;
-        chrome?.update({ exportMenuOpen: false });
-        selectEntry(entryFor(event.data.screenId, source.variantId, source.frameId));
-      });
-    }
-    async function refreshSavedState() {
-      if (!options2.stateUrl) return;
-      try {
-        const result = await jsonRequest(options2.stateUrl);
-        if (destroyed) return;
-        if (result.revision !== void 0) revision = result.revision;
-        if (result.stateVersion !== void 0) stateVersion = result.stateVersion;
-        if (result.state && !dirty) {
-          state = normalizeState({ ...result.state, ...linkedState() });
-          if (compactViewport) {
-            state.navOpen = false;
-            state.reviewOpen = false;
-          }
-          stage.dispatch({ type: "set-rail-open", railOpen: state.reviewOpen });
-        }
-        if (savedDraft?.unsaved)
-          notice(
-            "A previous unsaved draft is available in this browser. The saved review is shown; your draft has not overwritten it.",
-            true
-          );
-        selectEntry(entryFor(), { save: false });
-        status("All changes saved");
-      } catch {
-        status("Disconnected · local draft", "disconnected");
-      }
-    }
-    async function pollRevision() {
-      if (!options2.statusUrl || destroyed) return;
-      try {
-        const result = await jsonRequest(options2.statusUrl);
-        if (destroyed) return;
-        if (typeof result.verification === "string")
-          q("[data-design-verification]").textContent = result.verification === "verified" ? "Browser inspection complete" : "Browser inspection pending";
-        if (result.revision !== void 0 && revision !== null && result.revision !== revision) {
-          if (contentDirty || reviewDirty)
-            notice(
-              "A new design revision is ready. Save or recover this browser’s unsaved changes before reloading.",
-              true
-            );
-          else {
-            storeDraft();
-            window.location.reload();
-            return;
-          }
-        }
-        if (result.status === "failed")
-          notice(
-            result.message ?? "The new revision failed. This working design remains available.",
-            true
-          );
-      } catch {
-        if (!dirty) status("Disconnected", "disconnected");
-      }
-      pollTimer = setTimeout(pollRevision, 4e3);
-    }
-    async function reportReady() {
-      if (readyReported || readyReporting || destroyed) return;
-      readyReporting = true;
-      try {
-        const requiredEntries = [entryFor()];
-        await stage.ensureFrames(requiredEntries.map((entry) => entry.artifactId));
-        if (destroyed) return;
-        const loaded = requiredEntries.filter(({ artifactId }) => {
-          const frame = stage.getFrame(artifactId);
-          return (frame?.src?.startsWith("blob:") || Boolean(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.");
-        readyReported = true;
-        render();
-        await new Promise((resolve) => requestAnimationFrame(() => requestAnimationFrame(resolve)));
-        if (destroyed) return;
-        root.dataset.designReady = "true";
-        if (!root.dataset.sharedOpening) delete document.documentElement.dataset.designOpening;
-        chrome?.update({ previewLabel: "Preview ready" });
-        if (!chrome) q("[data-design-preview-state]").textContent = "Preview ready";
-        if (!contentDirty && !reviewDirty && (!options2.stateUrl || stateVersion !== null))
-          status(options2.stateUrl ? "All changes saved" : "Local preview");
-        const detail = {
-          revision,
-          status: "ready",
-          artifacts: loaded.map((entry) => entry.artifactId)
-        };
-        root.dispatchEvent(new CustomEvent("planr:design-ready", { bubbles: true, detail }));
-        if (typeof options2.onReady === "function") await options2.onReady(detail);
-        if (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" });
-        if (!chrome) q("[data-design-preview-state]").textContent = "Preview unavailable";
-        notice(
-          "This preview could not load. Use Retry screen; your saved feedback remains available.",
-          true
-        );
-      } finally {
-        readyReporting = false;
-      }
-    }
-    function mount() {
-      stage = artifactStage;
-      if (!stage) {
-        status("Review runtime unavailable", "failed");
-        return null;
-      }
-      root = q(".planr-shell");
-      chrome = mountDesignChrome({ root, title: design.title, state });
-      if (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");
-      canvasBackground = document.createElement("div");
-      canvasBackground.className = "design-canvas-background";
-      canvasBackground.setAttribute("aria-hidden", "true");
-      scroll.prepend(canvasBackground);
-      selectionOutline = document.createElement("div");
-      selectionOutline.className = "design-selection-outline";
-      selectionOutline.setAttribute("aria-hidden", "true");
-      selectionOutline.hidden = true;
-      scroll.append(selectionOutline);
-      for (const entry of entries) {
-        const panel = stage.getPanel(entry.artifactId);
-        if (!panel) {
-          status("Missing design preview", "failed");
-          return null;
-        }
-        panels.set(entry.artifactId, panel);
-        const screen = design.screens.find(({ id }) => id === entry.screenId);
-        const variant = design.variants.find(({ id }) => id === entry.variantId);
-        const frame = design.frames.find(({ id }) => id === entry.frameId);
-        const label = document.createElement("div");
-        label.className = "design-artboard-label";
-        label.setAttribute("role", "group");
-        const 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.`
-        );
-        const title = document.createElement("strong");
-        title.textContent = `${screen.title}${readyVariants.length > 1 ? ` / ${variant.label}` : ""}`;
-        const size4 = document.createElement("span");
-        size4.textContent = `${frame.label} · ${frame.width} × ${frame.height}`;
-        drag.append(title, size4);
-        label.append(drag);
-        if (screen.description) {
-          const 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);
-        }
-        panel.prepend(label);
-        if (stage.frameBudget) {
-          const 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);
-        }
-      }
-      const verified = payload.verification?.status === "verified";
-      q("[data-design-verification]").textContent = verified ? "Browser inspection complete" : "Browser inspection pending";
-      const 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", () => {
-        if (activeNotice?.persistent) dismissedNotices.set(activeNotice.key, activeNotice.message);
-        hideNotice();
-      });
-      function previewHealth() {
-        for (const entry of entries) {
-          const frame = stage.getFrame(entry.artifactId);
-          const nonce = frame?.__openPlanrBridge?.getPrototypeNonce?.() ?? null;
-          if (nonce)
-            prototypeState.restore({
-              screenId: entry.screenId,
-              viewId: entry.artifactId,
-              window: frame.contentWindow,
-              nonce,
-              generation: frame.__openPlanrBridge?.getPrototypeGeneration?.(),
-              aliases: options2.prototypeStateAliases?.[entry.screenId]
-            });
-        }
-        const selected = stage.getFrameDiagnostics?.().find((item) => item.artifactId === activeArtifactId);
-        const node = q("[data-design-preview-state]");
-        const phase = selected?.status ?? stage.getState().status;
-        const previewLabel = phase === "ready" ? "Preview ready" : phase === "error" || phase === "invalid" ? "Preview unavailable" : "Loading preview";
-        if (chrome) chrome.update({ previewLabel });
-        else node.textContent = previewLabel;
-        node.dataset.status = phase;
-        if (selected)
-          node.title = `${selected.phase} · ${Math.round(selected.elapsedMs ?? 0)} ms${selected.code ? ` · ${selected.code}` : ""}`;
-        if (!readyReported && phase === "ready") void reportReady();
-      }
-      listen(root, "planr:artifact-frame-state", previewHealth);
-      listen(root, "planr:artifact-state", previewHealth);
-      previewHealth();
-      const search = q("[data-design-screen-search]"), group = q("[data-design-screen-group]");
-      function filterScreens() {
-        const term = search.value.trim().toLocaleLowerCase();
-        const flow = design.flows?.find((item) => item.id === group?.value);
-        let count3 = 0;
-        for (const button of qa("[data-design-screen]")) {
-          button.hidden = !(button.textContent.toLocaleLowerCase().includes(term) && (!flow || flow.screens.includes(button.dataset.designScreen)));
-          if (!button.hidden) count3++;
-        }
-        q("[data-design-search-empty]").hidden = count3 > 0;
-      }
-      listen(search, "input", filterScreens);
-      listen(group, "change", filterScreens);
-      function followLocation() {
-        const next = normalizeState({ ...state, ...linkedState() });
-        if (next.view !== state.view) switchView(next.view, { save: false });
-        selectEntry(entryFor(next.screenId, next.variantId, next.frameId), { save: false });
-      }
-      listen(window, "popstate", followLocation);
-      listen(window, "hashchange", followLocation);
-      if (stage.frameBudget) {
-        listen(root, "planr:artifact-frame-state", updateFramePlaceholders);
-        updateFramePlaceholders();
-      }
-      compactViewport = window.innerWidth <= 960;
-      if (compactViewport) {
-        state.navOpen = false;
-        state.reviewOpen = false;
-        stage.dispatch({ type: "set-rail-open", railOpen: false });
-      } else stage.dispatch({ type: "set-rail-open", railOpen: state.reviewOpen });
-      selectEntry(entryFor(), { save: false });
-      if (!reviewUrl() && !stage.review.getState().review) {
-        try {
-          const storedReview = JSON.parse(localStorage.getItem(`${storageKey}.review`) ?? "null");
-          if (storedReview?.review) stage.review.replaceReview(storedReview.review);
-        } catch {
-        }
-      }
-      const panelDialogs = mountDesignPanels({
-        root,
-        closePanel(side) {
-          if (side === "left") state.navOpen = false;
-          else {
-            state.reviewOpen = false;
-            stage.dispatch({ type: "set-rail-open", railOpen: false });
-          }
-          render();
-          persist();
-          q(
-            side === "left" ? ".design-toolbar [data-design-toggle-nav]" : ".design-toolbar [data-planr-action=feedback]"
-          )?.focus();
-        }
-      });
-      cleanup.push(() => panelDialogs.destroy());
-      const controller = Object.freeze({
-        setTool,
-        getTool: () => activeTool,
-        getState: () => clone(state),
-        getRevision: () => revision,
-        getSaveState: () => ({
-          dirty: contentDirty || reviewDirty,
-          personalPending: dirty && !contentDirty,
-          commentsPending: reviewDirty,
-          revision,
-          stateVersion
-        }),
-        selectScreen: (screenId) => selectEntry(requestedEntry({ screenId })),
-        selectEntry: (entry) => selectEntry(entry),
-        fitSelection: ({ save = true } = {}) => fit({ selection: entryFor(), save }),
-        setCamera(camera) {
-          if (state.view !== "canvas") return;
-          if (!Number.isFinite(camera?.x) || !Number.isFinite(camera?.y)) return;
-          state.camera = { x: clamp2(camera.x, -1e7, 1e7), y: clamp2(camera.y, -1e7, 1e7) };
-          if (Number.isFinite(camera.zoom)) state.zoom = clamp2(camera.zoom, 0.05, 2);
-          saveViewport();
-          renderCamera();
-          persist();
-        },
-        setPanels({ navOpen = state.navOpen, reviewOpen = state.reviewOpen }, { save = true } = {}) {
-          state.navOpen = Boolean(navOpen);
-          state.reviewOpen = Boolean(reviewOpen);
-          stage.dispatch({ type: "set-rail-open", railOpen: state.reviewOpen });
-          render();
-          if (save) persist();
-        },
-        restorePresentation(snapshot) {
-          finishWalkthroughTransition();
-          const personal = {};
-          for (const key of [
-            "view",
-            "screenId",
-            "frameId",
-            "variantId",
-            "compare",
-            "navOpen",
-            "reviewOpen",
-            "inspectionScale",
-            "zoom",
-            "camera",
-            "viewports",
-            "positions"
-          ])
-            if (snapshot[key] !== void 0) personal[key] = clone(snapshot[key]);
-          state = normalizeState({ ...state, ...personal });
-          stage.dispatch({ type: "set-rail-open", railOpen: state.reviewOpen });
-          selectEntry(entryFor(), { save: false });
-          render();
-          persist();
-        },
-        setView(view) {
-          switchView(view);
-        },
-        fit,
-        flush,
-        exportArtifact,
-        destroy() {
-          finishWalkthroughTransition();
-          root.dispatchEvent(new CustomEvent("planr:design-destroy"));
-          for (const { artifactId } of entries)
-            stage.getFrame(artifactId)?.__openPlanrBridge?.setViewportGestures?.(false);
-          destroyed = true;
-          ++screenRequest;
-          pendingScreen = null;
-          failedSelection = null;
-          clearTimeout(frameDemandTimer);
-          clearTimeout(saveTimer);
-          clearTimeout(reviewTimer);
-          clearTimeout(pollTimer);
-          clearTimeout(noticeTimer);
-          if (cameraFrame !== null) cancelAnimationFrame(cameraFrame);
-          canvasBackground?.remove();
-          selectionOutline?.remove();
-          for (const remove of cleanup.splice(0)) remove();
-        }
-      });
-      void refreshSavedState().then(reportReady);
-      pollTimer = setTimeout(pollRevision, 4e3);
-      return controller;
-    }
-    return mount();
-  }
-
-  // lib/design/ui/studio-runtime.mjs
-  var PAYLOAD_ID = "planr-design-studio-payload";
-  var STAGE_TIMEOUT_MS = 15e3;
-  function documentReady() {
-    if (document.readyState !== "loading") return Promise.resolve();
-    return new Promise((resolve) => {
-      document.addEventListener("DOMContentLoaded", resolve, { once: true });
-    });
-  }
-  function stageBefore(deadline) {
-    let timer;
-    const 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) {
-    const current = () => document.getElementById(PAYLOAD_ID) === payloadNode2;
-    await documentReady();
-    if (!current()) return;
-    const stage = await stageBefore(deadline);
-    if (!current()) return;
-    const studio = mountDesignStudio({ payload, stage });
-    if (!studio) return;
-    window.__openPlanrDesignStudio = studio;
-    const { experience, handoffCenter } = mountDesignEnhancements({ payload, studio, stage });
-    window.__openPlanrDesignExperience = experience;
-    if (handoffCenter) window.__openPlanrDesignHandoffCenter = handoffCenter;
-  }
-  var script = document.currentScript;
-  var payloadNode = document.getElementById(PAYLOAD_ID);
-  if ((!script || script.isConnected) && payloadNode) {
-    void start(payloadNode, JSON.parse(payloadNode.textContent), Date.now() + STAGE_TIMEOUT_MS);
-  }