openplanr 2.2640.8 → 2.2641.0

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

@@ -0,0 +1,1844 @@
+
+
+  // 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);
+  }