@jxsuite/studio 0.11.0 → 0.13.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jxsuite/studio",
-  "version": "0.11.0",
+  "version": "0.13.0",
   "description": "Jx Studio — visual builder for Jx documents",
   "license": "MIT",
   "repository": {
@@ -30,7 +30,7 @@
   "dependencies": {
     "@atlaskit/pragmatic-drag-and-drop": "^1.8.1",
     "@atlaskit/pragmatic-drag-and-drop-hitbox": "^1.1.0",
-    "@jxsuite/runtime": "^0.10.2",
+    "@jxsuite/runtime": "^0.12.0",
     "@spectrum-web-components/accordion": "^1.12.1",
     "@spectrum-web-components/action-bar": "1.12.1",
     "@spectrum-web-components/action-button": "^1.12.1",
@@ -60,6 +60,7 @@
     "@spectrum-web-components/theme": "^1.12.1",
     "@spectrum-web-components/toast": "^1.12.1",
     "@spectrum-web-components/tooltip": "^1.12.1",
+    "@vue/reactivity": "3.5.34",
     "lit-html": "^3.3.3",
     "monaco-editor": "^0.55.1",
     "remark-directive": "^4.0.0",
@@ -75,5 +76,6 @@
     "@webref/css": "^8.5.6",
     "@webref/elements": "^2.7.1",
     "@webref/idl": "^3.78.0"
-  }
+  },
+  "//vue-reactivity": "Exact pin required — must match @jxsuite/runtime to avoid cross-boundary proxy bugs"
 }

package/src/canvas/canvas-diff.js

@@ -0,0 +1,184 @@
+/**
+ * Canvas Diff — computes visual diff between original and current Jx documents.
+ *
+ * Compares two document trees recursively, marking nodes as added/removed/modified, and propagates
+ * "modified" status up the tree for structural changes (children added/removed/reordered).
+ */
+
+/**
+ * @typedef {Record<string, any>} JxNode
+ *
+ * @typedef {"added" | "removed" | "modified"} DiffStatus
+ *
+ * @typedef {{ byPath: Map<string, DiffStatus>; allPaths: Set<string> }} DiffResult
+ */
+
+/**
+ * Deep equality check for two values. Ignores function and ref properties.
+ *
+ * @param {any} a
+ * @param {any} b
+ * @returns {boolean}
+ */
+function valuesEqual(a, b) {
+  if (a === b) return true;
+  if (typeof a !== "object" || typeof b !== "object" || !a || !b) return false;
+  if (Array.isArray(a) !== Array.isArray(b)) return false;
+
+  if (Array.isArray(a)) {
+    if (a.length !== b.length) return false;
+    return a.every((/** @type {any} */ v, /** @type {number} */ i) => valuesEqual(v, b[i]));
+  }
+
+  const keysA = Object.keys(a).filter(
+    (/** @type {string} */ k) => !k.startsWith("on") && k !== "$ref",
+  );
+  const keysB = Object.keys(b).filter(
+    (/** @type {string} */ k) => !k.startsWith("on") && k !== "$ref",
+  );
+
+  if (keysA.length !== keysB.length) return false;
+  if (!keysA.every((/** @type {string} */ k) => keysB.includes(k))) return false;
+
+  return keysA.every((/** @type {string} */ k) => valuesEqual(a[k], b[k]));
+}
+
+/**
+ * Filter element children from a node's children array.
+ *
+ * @param {any} node
+ * @returns {any[]}
+ */
+function elementChildren(node) {
+  if (!node?.children || !Array.isArray(node.children)) return [];
+  return node.children.filter((/** @type {any} */ c) => c != null && typeof c === "object");
+}
+
+/**
+ * Mark an entire subtree with a diff status.
+ *
+ * @param {any} node
+ * @param {DiffStatus} status
+ * @param {string} path
+ * @param {Map<string, DiffStatus>} diffMap
+ * @param {Set<string>} allPaths
+ */
+function markRecursive(node, status, path, diffMap, allPaths) {
+  allPaths.add(path);
+  diffMap.set(path, status);
+  const children = elementChildren(node);
+  for (let i = 0; i < children.length; i++) {
+    const childPath = `${path}/children/${i}`;
+    markRecursive(children[i], status, childPath, diffMap, allPaths);
+  }
+}
+
+/**
+ * Compute structural diff between original and current documents.
+ *
+ * @param {any} originalDoc - Original document (from git)
+ * @param {any} currentDoc - Current document (in memory/on disk)
+ * @returns {DiffResult}
+ */
+export function computeDocumentDiff(originalDoc, currentDoc) {
+  /** @type {Map<string, DiffStatus>} */
+  const diffMap = new Map();
+  /** @type {Set<string>} */
+  const allPaths = new Set();
+
+  /**
+   * Walk both trees in parallel and mark differences.
+   *
+   * @param {any} origNode
+   * @param {any} currNode
+   * @param {string} path
+   */
+  const walk = (origNode, currNode, path = "") => {
+    const pathKey = path || "/";
+    allPaths.add(pathKey);
+
+    // Both exist but differ
+    if (origNode != null && currNode != null) {
+      if (!valuesEqual(origNode, currNode)) {
+        diffMap.set(pathKey, "modified");
+      }
+
+      // Walk children
+      if (origNode.children && currNode.children) {
+        const origChildren = elementChildren(origNode);
+        const currChildren = elementChildren(currNode);
+
+        for (let i = 0; i < Math.max(origChildren.length, currChildren.length); i++) {
+          const childPath = pathKey === "/" ? `children/${i}` : `${pathKey}/children/${i}`;
+          walk(origChildren[i], currChildren[i], childPath);
+        }
+      }
+      return;
+    }
+
+    // In current only (added)
+    if (currNode != null && origNode == null) {
+      diffMap.set(pathKey, "added");
+      const children = elementChildren(currNode);
+      for (let i = 0; i < children.length; i++) {
+        const childPath = pathKey === "/" ? `children/${i}` : `${pathKey}/children/${i}`;
+        markRecursive(children[i], "added", childPath, diffMap, allPaths);
+      }
+      return;
+    }
+
+    // In original only (removed)
+    if (origNode != null && currNode == null) {
+      diffMap.set(pathKey, "removed");
+      const children = elementChildren(origNode);
+      for (let i = 0; i < children.length; i++) {
+        const childPath = pathKey === "/" ? `children/${i}` : `${pathKey}/children/${i}`;
+        markRecursive(children[i], "removed", childPath, diffMap, allPaths);
+      }
+      return;
+    }
+  };
+
+  // Start comparison
+  walk(originalDoc, currentDoc, "");
+
+  // Propagate "modified" status to parents of added/removed children
+  const propagateModified = () => {
+    let changed = false;
+    for (const [path, status] of diffMap.entries()) {
+      if ((status === "added" || status === "removed") && path !== "/") {
+        const parentPath = path.split("/").slice(0, -2).join("/") || "/";
+        if (parentPath !== "/") {
+          const parentStatus = diffMap.get(parentPath);
+          if (
+            parentStatus !== "modified" &&
+            parentStatus !== "added" &&
+            parentStatus !== "removed"
+          ) {
+            diffMap.set(parentPath, "modified");
+            changed = true;
+          }
+        }
+      }
+    }
+    return changed;
+  };
+
+  // Propagate upwards until no more changes
+  while (propagateModified()) {}
+
+  return { byPath: diffMap, allPaths };
+}
+
+/**
+ * Clear diff highlighting from all elements in a canvas.
+ *
+ * @param {HTMLElement} canvas
+ */
+export function clearDiffHighlight(canvas) {
+  canvas
+    .querySelectorAll(".element-diff-added, .element-diff-removed, .element-diff-modified")
+    .forEach((/** @type {Element} */ el) => {
+      el.classList.remove("element-diff-added", "element-diff-removed", "element-diff-modified");
+    });
+}

package/src/canvas/canvas-helpers.js

@@ -3,14 +3,8 @@
  * multiple canvas-related modules: element lookup, zoom, panel resolution, inline bubbling.
  */
 
-import {
-  getState,
-  canvasPanels,
-  elToPath,
-  pathsEqual,
-  getNodeAtPath,
-  parentElementPath,
-} from "../store.js";
+import { canvasPanels, elToPath, pathsEqual, getNodeAtPath, parentElementPath } from "../store.js";
+import { activeTab } from "../workspace/workspace.js";
 import { isInlineInContext } from "../editor/inline-edit.js";
 
 /** @type {any} */
@@ -19,25 +13,27 @@ let _ctx = null;
 /**
  * Initialize the canvas helpers module.
  *
- * @param {{ getCanvasMode: () => string }} ctx
+ * @param {{ getCanvasMode: () => string; getZoom: () => number }} ctx
  */
 export function initCanvasHelpers(ctx) {
   _ctx = ctx;
 }
 
-/** Effective zoom scale — always 1 in edit (content) mode, S.ui.zoom otherwise. */
+/** Effective zoom scale — always 1 in edit (content) mode, actual zoom otherwise. */
 export function effectiveZoom() {
-  return _ctx.getCanvasMode() === "edit" ? 1 : getState().ui.zoom;
+  return _ctx.getCanvasMode() === "edit"
+    ? 1
+    : (_ctx.getZoom?.() ?? activeTab.value?.session.ui.zoom ?? 1);
 }
 
 /** Return the active canvas panel based on the current activeMedia setting. */
 export function getActivePanel() {
   if (canvasPanels.length === 0) return null;
   if (canvasPanels.length === 1) return canvasPanels[0];
-  const S = getState();
+  const activeMedia = activeTab.value?.session.ui.activeMedia ?? null;
   for (const p of canvasPanels) {
-    if (S.ui.activeMedia === null && (p.mediaName === "base" || p.mediaName === null)) return p;
-    if (p.mediaName === S.ui.activeMedia) return p;
+    if (activeMedia === null && (p.mediaName === "base" || p.mediaName === null)) return p;
+    if (p.mediaName === activeMedia) return p;
   }
   return canvasPanels[0];
 }

package/src/canvas/canvas-live-render.js

@@ -5,6 +5,7 @@
  */
 
 import { elToPath, stripEventHandlers, projectState } from "../store.js";
+import { activeTab } from "../workspace/workspace.js";
 import { view } from "../view.js";
 import {
   renderNode as runtimeRenderNode,
@@ -82,7 +83,6 @@ function markLayoutNodes(/** @type {any} */ node) {
  * Initialize the canvas live render module.
  *
  * @param {{
- *   getState: () => any;
  *   getCanvasMode: () => string;
  * }} ctx
  */
@@ -100,7 +100,8 @@ export function initCanvasLiveRender(ctx) {
  * @param {any} canvasEl
  */
 export async function renderCanvasLive(gen, doc, canvasEl) {
-  const S = _ctx.getState();
+  const tab = activeTab.value;
+  const S = { documentPath: tab?.documentPath, mode: tab?.doc.mode, document: tab?.doc.document };
   const canvasMode = _ctx.getCanvasMode();
 
   // Suppress server function resolution in non-preview modes to avoid

package/src/canvas/canvas-render.js

@@ -8,6 +8,7 @@ import { ref } from "lit-html/directives/ref.js";
 import * as monaco from "monaco-editor/esm/vs/editor/editor.api.js";
 
 import { canvasWrap, canvasPanels, updateCanvas } from "../store.js";
+import { activeTab } from "../workspace/workspace.js";
 import { view } from "../view.js";
 import {
   canvasPanelTemplate,
@@ -29,6 +30,7 @@ import { renderCanvasLive } from "./canvas-live-render.js";
 import { renderCanvasNode } from "../panels/preview-render.js";
 import { registerPanelDnD } from "../panels/canvas-dnd.js";
 import { registerPanelEvents } from "../panels/panel-events.js";
+import { computeDocumentDiff } from "./canvas-diff.js";
 import { updateForcedPseudoPreview } from "../panels/pseudo-preview.js";
 import { renderStylebookMode } from "../panels/stylebook-panel.js";
 import { dismissLinkPopover, dismissBlockActionBar } from "../panels/block-action-bar.js";
@@ -49,10 +51,10 @@ let _ctx = null;
  * @param {{
  *   getCanvasMode: () => string;
  *   setCanvasMode: (mode: string) => void;
- *   getState: () => any;
- *   update: (s: any) => void;
  *   openFileFromTree: (path: string) => void;
  *   exportFile: () => void;
+ *   gitDiffState: any;
+ *   setGitDiffState: (state: any) => void;
  * }} ctx
  */
 export function initCanvasRender(ctx) {
@@ -60,7 +62,9 @@ export function initCanvasRender(ctx) {
 }
 
 export function renderCanvas() {
-  const S = _ctx.getState();
+  const tab = activeTab.value;
+  if (!tab) return;
+  const S = { document: tab.doc.document, ui: tab.session.ui, mode: tab.doc.mode };
   const canvasMode = _ctx.getCanvasMode();
 
   // Advance render generation so stale async renders from the previous cycle bail out
@@ -230,7 +234,9 @@ export function renderCanvas() {
       debounce = setTimeout(() => {
         try {
           const parsed = JSON.parse(view.monacoEditor.getValue());
-          _ctx.update({ ..._ctx.getState(), document: parsed, dirty: true });
+          const tab = activeTab.value;
+          tab.doc.document = parsed;
+          tab.doc.dirty = true;
         } catch {
           // Invalid JSON — don't update state
         }
@@ -239,6 +245,75 @@ export function renderCanvas() {
     return;
   }
 
+  // Git diff mode — render original (left) and current (right) side-by-side
+  if (canvasMode === "git-diff") {
+    if (!_ctx.gitDiffState) {
+      // Fallback to design mode if diff state is missing
+      _ctx.setCanvasMode("design");
+      renderCanvas();
+      return;
+    }
+
+    canvasWrap.style.padding = "0";
+    canvasWrap.style.overflow = "hidden";
+
+    const gitDiffState = _ctx.gitDiffState;
+    const { tpl: origPanelTpl, panel: origPanel } = canvasPanelTemplate(
+      "git-diff-original",
+      "Original",
+      false,
+      "50%",
+    );
+    const { tpl: currPanelTpl, panel: currPanel } = canvasPanelTemplate(
+      "git-diff-current",
+      "Current",
+      false,
+      "50%",
+    );
+
+    const diffTpl = html`
+      <div style="display: flex; height: 100%; gap: 0;">
+        <div style="flex: 1; overflow: hidden; display: flex; flex-direction: column;">
+          ${origPanelTpl}
+        </div>
+        <div style="flex: 1; overflow: hidden; display: flex; flex-direction: column;">
+          ${currPanelTpl}
+        </div>
+      </div>
+    `;
+
+    litRender(diffTpl, canvasWrap);
+    canvasPanels.push(/** @type {any} */ (origPanel));
+    canvasPanels.push(/** @type {any} */ (currPanel));
+
+    // Parse original document from git content
+    let originalDoc = null;
+    try {
+      if (gitDiffState.isMarkdown) {
+        // For markdown, we need to convert it to Jx format
+        // For now, use a simple placeholder until we have markdown parsing
+        originalDoc = {
+          tagName: "div",
+          children: [{ tagName: "p", textContent: "Original (markdown)" }],
+        };
+      } else {
+        // Parse as JSON
+        originalDoc = JSON.parse(gitDiffState.originalContent);
+      }
+    } catch {
+      originalDoc = {
+        tagName: "div",
+        children: [{ tagName: "p", textContent: "Failed to parse original" }],
+      };
+    }
+
+    const currDoc = S.document;
+
+    renderCanvasIntoPanel(origPanel, new Set(), S.ui.featureToggles, originalDoc, gitDiffState);
+    renderCanvasIntoPanel(currPanel, new Set(), S.ui.featureToggles, currDoc, gitDiffState);
+    return;
+  }
+
   // Edit (content) mode — centered column, no panzoom, always 100%
   if (canvasMode === "edit") {
     if (modeChanged) {
@@ -257,7 +332,7 @@ export function renderCanvas() {
       </div>
     `;
     litRender(editTpl, canvasWrap);
-    canvasPanels.push(panel);
+    canvasPanels.push(/** @type {any} */ (panel));
     renderCanvasIntoPanel(panel, new Set(), S.ui.featureToggles);
     return;
   }
@@ -302,7 +377,7 @@ export function renderCanvas() {
       `,
       canvasWrap,
     );
-    canvasPanels.push(panel);
+    canvasPanels.push(/** @type {any} */ (panel));
     renderCanvasIntoPanel(panel, new Set(), featureToggles);
     applyTransform();
     if (modeChanged) {
@@ -354,7 +429,7 @@ export function renderCanvas() {
   );
 
   for (const { panel, activeSet } of panelEntries) {
-    canvasPanels.push(panel);
+    canvasPanels.push(/** @type {any} */ (panel));
     renderCanvasIntoPanel(panel, activeSet, featureToggles);
   }
 
@@ -376,29 +451,51 @@ export function renderCanvas() {
  * structural preview.
  *
  * @param {any} panel
- * @param {any} activeBreakpoints
+ * @param {Set<string>} activeBreakpoints
  * @param {any} featureToggles
+ * @param {any} [docOverride] - Optional document to render (for diff mode). Uses active tab doc if
+ *   not provided.
+ * @param {any} [gitDiffState] - Optional diff state. If provided, computes and applies diff
+ *   highlighting.
  */
-function renderCanvasIntoPanel(panel, activeBreakpoints, featureToggles) {
+function renderCanvasIntoPanel(
+  panel,
+  activeBreakpoints,
+  featureToggles,
+  docOverride = null,
+  gitDiffState = null,
+) {
   const gen = view.renderGeneration;
-  const S = _ctx.getState();
-  renderCanvasLive(gen, S.document, panel.canvas).then((/** @type {any} */ scope) => {
+  const tab = activeTab.value;
+  const docToRender = docOverride || tab?.doc.document;
+
+  renderCanvasLive(gen, docToRender, panel.canvas).then((/** @type {any} */ scope) => {
     // Skip post-render setup if a newer render has started
     if (gen !== view.renderGeneration) return;
     if (scope) {
       updateCanvas({ status: "ready", scope, error: null });
       applyCanvasMediaOverrides(panel.canvas, activeBreakpoints);
       statusMessage("Runtime render OK", 1500);
+
+      // Apply diff highlighting if in git-diff mode
+      if (gitDiffState && docOverride) {
+        // Determine which document is original and which is current
+        const isOriginal = docOverride === (gitDiffState.originalDoc || gitDiffState.original);
+        const origDoc = isOriginal ? docOverride : gitDiffState.currentDoc || tab?.doc.document;
+        const currDoc = isOriginal ? gitDiffState.currentDoc || tab?.doc.document : docOverride;
+
+        const { byPath: diffMap } = computeDocumentDiff(origDoc, currDoc);
+
+        // Can't iterate WeakMap, so apply styling by walking the canvas
+        const { elToPath } = scope;
+        if (elToPath instanceof WeakMap) {
+          applyDiffHighlightToCanvas(panel.canvas, diffMap);
+        }
+      }
     } else {
       // Fallback to structural preview
       updateCanvas({ status: "ready", scope: null, error: null });
-      renderCanvasNode(
-        _ctx.getState().document,
-        [],
-        panel.canvas,
-        activeBreakpoints,
-        featureToggles,
-      );
+      renderCanvasNode(docToRender, [], panel.canvas, activeBreakpoints, featureToggles);
     }
     registerPanelDnD(panel);
     registerPanelEvents(panel);
@@ -407,6 +504,40 @@ function renderCanvasIntoPanel(panel, activeBreakpoints, featureToggles) {
   });
 }
 
+/**
+ * Apply diff highlighting to canvas elements based on elToPath mapping. Walks the canvas DOM and
+ * applies classes based on diff status.
+ *
+ * @param {HTMLElement} canvas
+ * @param {Map<string, "added" | "removed" | "modified">} diffMap
+ */
+function applyDiffHighlightToCanvas(canvas, diffMap) {
+  if (!diffMap || diffMap.size === 0) return;
+
+  // Walk all elements in canvas and check their data attributes or other markers
+  const walkCanvas = (/** @type {HTMLElement} */ el, /** @type {string} */ path = "") => {
+    const pathKey = path || "/";
+
+    if (diffMap.has(pathKey)) {
+      const status = diffMap.get(pathKey);
+      if (status === "added") el.classList.add("element-diff-added");
+      else if (status === "removed") el.classList.add("element-diff-removed");
+      else if (status === "modified") el.classList.add("element-diff-modified");
+    }
+
+    // Check for child elements (heuristic: children array markers)
+    let childIdx = 0;
+    for (const child of el.children) {
+      const childPath =
+        pathKey === "/" ? `children/${childIdx}` : `${pathKey}/children/${childIdx}`;
+      walkCanvas(/** @type {HTMLElement} */ (child), childPath);
+      childIdx++;
+    }
+  };
+
+  walkCanvas(canvas, "");
+}
+
 /**
  * Apply media query overrides as inline styles on matching canvas elements. Needed because the
  * runtime renders base styles as inline — @media CSS rules in the injected stylesheet can't win
@@ -417,8 +548,9 @@ function renderCanvasIntoPanel(panel, activeBreakpoints, featureToggles) {
  */
 function applyCanvasMediaOverrides(canvasEl, activeBreakpoints) {
   if (!activeBreakpoints.size) return;
-  const S = _ctx.getState();
-  const docMedia = getEffectiveMedia(S.document.$media || {});
+  const tab = activeTab.value;
+  if (!tab) return;
+  const docMedia = getEffectiveMedia(tab.doc.document.$media || {});
   const validBreakpoints = new Set();
   for (const name of activeBreakpoints) {
     if (docMedia[name]) validBreakpoints.add(name);

package/src/canvas/canvas-utils.js

@@ -8,8 +8,8 @@ import { ref } from "lit-html/directives/ref.js";
 import { styleMap } from "lit-html/directives/style-map.js";
 import { ifDefined } from "lit-html/directives/if-defined.js";
 
-import { getState, renderOnly, updateUi, canvasWrap, canvasPanels } from "../store.js";
-import { ensureLitState } from "../panels/shared.js";
+import { renderOnly, updateUi, canvasWrap, canvasPanels } from "../store.js";
+import { activeTab } from "../workspace/workspace.js";
 import { view } from "../view.js";
 
 /** @type {any} */
@@ -44,14 +44,14 @@ export function initCanvasUtils(ctx) {
 export function canvasPanelTemplate(mediaName, label, fullWidth, width = null) {
   /**
    * @type {{
-   *   mediaName: any;
-   *   element: Element | null;
-   *   canvas: Element | null;
-   *   overlay: Element | null;
-   *   overlayClk: Element | null;
-   *   viewport: Element | null;
-   *   dropLine: Element | null;
-   *   _width: any;
+   *   mediaName: string;
+   *   element: HTMLElement | null;
+   *   canvas: HTMLElement | null;
+   *   overlay: HTMLElement | null;
+   *   overlayClk: HTMLElement | null;
+   *   viewport: HTMLElement | null;
+   *   dropLine: HTMLElement | null;
+   *   _width: number | null;
    * }}
    */
   const panel = {
@@ -69,7 +69,7 @@ export function canvasPanelTemplate(mediaName, label, fullWidth, width = null) {
       class=${`canvas-panel${fullWidth ? " full-width" : ""}`}
       data-media=${ifDefined(mediaName !== null ? mediaName : undefined)}
       ${ref((el) => {
-        if (el) panel.element = el;
+        if (el) panel.element = /** @type {HTMLElement} */ (el);
       })}
     >
       ${label
@@ -88,34 +88,34 @@ export function canvasPanelTemplate(mediaName, label, fullWidth, width = null) {
         class="canvas-panel-viewport"
         style=${styleMap({ width: width && !fullWidth ? `${width}px` : "" })}
         ${ref((el) => {
-          if (el) panel.viewport = el;
+          if (el) panel.viewport = /** @type {HTMLElement} */ (el);
         })}
       >
         <div
           class="canvas-panel-canvas"
           style=${styleMap({ width: width ? `${width}px` : "" })}
           ${ref((el) => {
-            if (el) panel.canvas = el;
+            if (el) panel.canvas = /** @type {HTMLElement} */ (el);
           })}
         ></div>
         <div
           class="canvas-panel-overlay"
           ${ref((el) => {
-            if (el) panel.overlay = el;
+            if (el) panel.overlay = /** @type {HTMLElement} */ (el);
           })}
         >
           <div
             class="canvas-drop-indicator"
             style="display:none"
             ${ref((el) => {
-              if (el) panel.dropLine = el;
+              if (el) panel.dropLine = /** @type {HTMLElement} */ (el);
             })}
           ></div>
         </div>
         <div
           class="canvas-panel-click"
           ${ref((el) => {
-            if (el) panel.overlayClk = el;
+            if (el) panel.overlayClk = /** @type {HTMLElement} */ (el);
           })}
         ></div>
       </div>
@@ -207,7 +207,6 @@ export function fitToScreen() {
 
 /** Reset the zoom indicator (clear its content). Called when switching to non-panzoom modes. */
 export function resetZoomIndicator() {
-  ensureLitState(zoomIndicatorHost);
   litRender(nothing, zoomIndicatorHost);
 }
 
@@ -220,7 +219,6 @@ export function renderZoomIndicator() {
   if (!zoomIndicatorHost.isConnected) {
     document.body.appendChild(zoomIndicatorHost);
   }
-  ensureLitState(zoomIndicatorHost);
   litRender(
     html`
       <div class="zoom-indicator">
@@ -263,14 +261,14 @@ export function positionZoomIndicator() {
 
 /** Toggle "active" class on canvas panel headers based on activeMedia. */
 export function updateActivePanelHeaders() {
-  const S = getState();
+  const activeMedia = activeTab.value?.session.ui.activeMedia ?? null;
   for (const p of canvasPanels) {
-    const header = p.element.querySelector(".canvas-panel-header");
+    const header = p.element?.querySelector(".canvas-panel-header");
     if (header) {
       const isActive =
-        (S.ui.activeMedia === null && p.mediaName === "base") ||
-        (S.ui.activeMedia === null && p.mediaName === null) ||
-        S.ui.activeMedia === p.mediaName;
+        (activeMedia === null && p.mediaName === "base") ||
+        (activeMedia === null && p.mediaName === null) ||
+        activeMedia === p.mediaName;
       header.classList.toggle("active", isActive);
     }
   }