@jxsuite/studio 6.1.0 → 6.1.2

package/src/panels/jump-bar.ts

@@ -63,8 +63,9 @@
  * @docs studio/interface
  */
 
-import { displayTagName } from "@jxsuite/schema/guards";
-import { childList, getNodeAtPath, nodeLabel, pathsEqual, projectState } from "../store";
+import { displayTagName, isNonNullObject, isString } from "@jxsuite/schema/guards";
+import { getNodeAtPath } from "@jxsuite/schema/doc-ops";
+import { childList, nodeLabel, pathsEqual, projectState } from "../store";
 import { effect, effectScope } from "../reactivity";
 import { activePane, workspace } from "../workspace/workspace";
 import { derivationOfPane, tabOfPane } from "../canvas/canvas-surface";
@@ -74,14 +75,21 @@ import { runReported } from "../commands/run-reported";
 import { openMenu } from "../surfaces/menu";
 import { rectOf } from "../utils/geometry";
 import { mountJumpBarSurface } from "../surfaces/jump-bar";
-import type { CommandArgs, CommandRegistry } from "../commands/registry";
+import type { CommandRegistry } from "../commands/registry";
 import type { FormulaEditDef, FunctionEditDef } from "../types";
 import type { JxPath } from "../state";
-import type { MenuHandle, MenuRowProjection } from "../surfaces/menu";
+import type {
+  MenuHandle,
+  MenuRowProjection,
+  OpenMenuOptions,
+  ViewportPoint,
+} from "../surfaces/menu";
 import type { JumpBarSurface, ProjectedStep } from "../surfaces/jump-bar";
 import type { Tab } from "../tabs/tab";
 import type { PaneDerivation } from "../workspace/workspace";
 import type { EffectScope } from "@vue/reactivity";
+import type { JxMutableNode } from "@jxsuite/schema/types";
+import type { CommandArgValues } from "../commands/command-args";
 
 /**
  * The region the trail stamps on itself. It is the status bar's DOCUMENT field: the document, and
@@ -108,7 +116,7 @@ export type JumpSegmentKind = "file" | "editor" | "node";
 export interface JumpChoice {
   label: string;
   command: string;
-  args?: CommandArgs;
+  args?: CommandArgValues;
   /** The choice you are already on. Marked, never hidden — a menu that omits it loses its place. */
   current?: boolean;
 }
@@ -121,7 +129,7 @@ export interface JumpSegment {
   title?: string;
   /** The command that MOVES you here, or `null` when you are already here. */
   command: string | null;
-  args?: CommandArgs;
+  args?: CommandArgValues;
   /** Where else this step could go. Fewer than two is not a choice, and renders no control. */
   choices: readonly JumpChoice[];
 }
@@ -160,19 +168,19 @@ export interface SelectionCrumb {
  * array pseudo-element ("Repeater") and its template both visible instead of collapsing the array
  * into a bare `[index]`.
  */
-export function selectionCrumbs(document: unknown, selection: JxPath): SelectionCrumb[] {
+export function selectionCrumbs(document: JxMutableNode, selection: JxPath): SelectionCrumb[] {
   const crumbs: SelectionCrumb[] = [];
   for (let i = 0; i < selection.length;) {
     const seg = selection[i];
     const step = seg === "map" ? 1 : 2;
-    const path = selection.slice(0, i + step) as JxPath;
-    const node = getNodeAtPath(document as never, path);
+    const path = selection.slice(0, i + step);
+    const node = getNodeAtPath(document, path);
     const fallbackTag = node?.tag;
     const label =
       node?.$prototype === "Array"
         ? "Repeater"
         : displayTagName(node?.tagName) ||
-          (typeof fallbackTag === "string" ? fallbackTag : "") ||
+          (isString(fallbackTag) ? fallbackTag : "") ||
           (seg === "cases" ? String(selection[i + 1]) : `[${selection[i + 1]}]`);
     crumbs.push({ label, path });
     i += step;
@@ -191,7 +199,7 @@ export function selectionCrumbs(document: unknown, selection: JxPath): Selection
  * addressable, so both drop out and the segment renders no control at all.
  */
 export function crumbSiblings(
-  document: unknown,
+  document: JxMutableNode,
   crumbs: readonly SelectionCrumb[],
   index: number,
 ): JumpChoice[] {
@@ -199,17 +207,17 @@ export function crumbSiblings(
   if (!crumb) {
     return [];
   }
-  const parentPath = (index === 0 ? [] : crumbs[index - 1]!.path) as JxPath;
-  const parent = getNodeAtPath(document as never, parentPath);
+  const parentPath: JxPath = index === 0 ? [] : crumbs[index - 1]!.path;
+  const parent = getNodeAtPath(document, parentPath);
   const key = crumb.path.at(-2);
   const own = crumb.path;
   if (key === "cases") {
     const cases = parent?.cases;
-    if (!cases || typeof cases !== "object") {
+    if (!isNonNullObject(cases)) {
       return [];
     }
     return Object.keys(cases).map((name) => {
-      const path = [...parentPath, "cases", name] as JxPath;
+      const path: JxPath = [...parentPath, "cases", name];
       return choiceFor(document, path, name, own);
     });
   }
@@ -218,17 +226,22 @@ export function crumbSiblings(
   }
   const choices: JumpChoice[] = [];
   for (const [i, child] of childList(parent).entries()) {
-    if (typeof child === "string") {
+    if (isString(child)) {
       continue;
     }
-    const path = [...parentPath, "children", i] as JxPath;
+    const path: JxPath = [...parentPath, "children", i];
     choices.push(choiceFor(document, path, nodeLabel(child), own));
   }
   return choices;
 }
 
-function choiceFor(document: unknown, path: JxPath, fallback: string, own: JxPath): JumpChoice {
-  const node = getNodeAtPath(document as never, path);
+function choiceFor(
+  document: JxMutableNode,
+  path: JxPath,
+  fallback: string,
+  own: JxPath,
+): JumpChoice {
+  const node = getNodeAtPath(document, path);
   const label = node ? nodeLabel(node) : fallback;
   const choice: JumpChoice = { args: { path }, command: "selection.set", label };
   // `pathsEqual`, not a joined key: a separator is a guess about what a segment cannot contain,
@@ -278,8 +291,7 @@ export function jumpSegments(
 
   // A logic editor is the leaf of the address, and it has no selection under it: the Monaco buffer
   // And the formula workspace are editing a definition, not a node of the document tree.
-  const editingFunction = tab.session.ui.editingFunction as FunctionEditDef | null;
-  const editingFormula = tab.session.ui.editingFormula as FormulaEditDef | null;
+  const { editingFormula, editingFunction } = tab.session.ui;
   if (editingFunction) {
     segments.push(editorSegment("ƒ", editingFunction));
     return segments;
@@ -333,9 +345,7 @@ function editorSegment(sigil: string, def: FunctionEditDef | FormulaEditDef): Ju
  */
 function stepKey(segment: JumpSegment): string {
   const path = segment.args?.path;
-  return segment.kind === "node" && Array.isArray(path)
-    ? `node:${(path as JxPath).join("/")}`
-    : segment.kind;
+  return segment.kind === "node" && Array.isArray(path) ? `node:${path.join("/")}` : segment.kind;
 }
 
 /** Whether the registry can actually run this id right now. */
@@ -446,7 +456,7 @@ function openChoices(segment: JumpSegment, anchor: HTMLElement | null): void {
     },
     title: choice.label,
   }));
-  const handle = openMenu({
+  const options: OpenMenuOptions = {
     label: `Go to a sibling of ${segment.label}`,
     onClosed: (closed) => {
       if (_menu === closed) {
@@ -455,10 +465,13 @@ function openChoices(segment: JumpSegment, anchor: HTMLElement | null): void {
     },
     opener: anchor,
     placement: ABOVE_OPENER,
-    ...(anchor ? { place: (box: DOMRect) => aboveOpener(anchor, box) } : {}),
     region: "jump-bar",
     rows,
-  });
+  };
+  if (anchor) {
+    options.place = (box: DOMRect) => aboveOpener(anchor, box);
+  }
+  const handle = openMenu(options);
   _menu = handle;
 }
 
@@ -466,13 +479,19 @@ function openChoices(segment: JumpSegment, anchor: HTMLElement | null): void {
  * The menu's corner when it hangs above `anchor`: its bottom on the anchor's top, leading edges
  * aligned.
  */
-export function aboveOpener(anchor: HTMLElement, box: DOMRect): { x: number; y: number } {
+export function aboveOpener(anchor: HTMLElement, box: DOMRect): ViewportPoint {
   const rect = rectOf(anchor);
   return { x: Math.round(rect.left), y: Math.max(0, Math.round(rect.top - box.height)) };
 }
 
 /** The address of the focused pane, and the segments behind it. */
-function projectFocused(): { steps: ProjectedStep[]; segments: JumpSegment[] } {
+interface FocusedAddress {
+  steps: ProjectedStep[];
+  segments: JumpSegment[];
+}
+
+/** Projects {@link FocusedAddress} for the focused pane. */
+function projectFocused(): FocusedAddress {
   const paneId = activePane().id;
   const segments = jumpSegments(tabOfPane(paneId), derivationOfPane(paneId));
   const registry = activeRegistry();

package/src/panels/layers-panel.ts

@@ -47,7 +47,15 @@
  */
 
 import { nothing } from "lit-html";
-import { displayTagName, isTagExpression, tagNameCandidates } from "@jxsuite/schema/guards";
+import {
+  displayTagName,
+  isMappedArray,
+  isNonNullObject,
+  isNumber,
+  isString,
+  isTagExpression,
+  tagNameCandidates,
+} from "@jxsuite/schema/guards";
 import {
   VOID_ELEMENTS,
   childIndex,
@@ -60,7 +68,7 @@ import {
 } from "../store";
 import { activeTab } from "../workspace/workspace";
 import {
-  isSelected as isPathSelected,
+  isSelected,
   primarySelection,
   rangeSelection,
   selectionAnchor,
@@ -72,7 +80,12 @@ import { mutateUpdateProperty, transactDoc } from "../tabs/transact";
 import { view } from "../view";
 import { setActivityTab } from "../shell";
 import { registerPanel } from "./panel-registry";
-import { detachStylebookLayers, mountStylebookLayersPanel } from "./stylebook-layers-panel";
+import {
+  INDENT_BASE,
+  INDENT_STEP,
+  detachStylebookLayers,
+  mountStylebookLayersPanel,
+} from "./stylebook-layers-panel";
 import { selectStylebookTag, stylebookMeta } from "./stylebook-panel";
 import { isInlineElement } from "../editor/inline-edit";
 import { showContextMenu } from "../editor/context-menu";
@@ -115,17 +128,17 @@ const TEXT_PREVIEW_MAX = 40;
  * Deliberately short. `section`, `ul` and `table` are omitted: "Section" next to a `section` badge
  * is the repetition this function exists to remove.
  */
-const LANDMARK_NAMES: Readonly<Record<string, string>> = {
-  article: "Article",
-  aside: "Sidebar",
-  dialog: "Dialog",
-  figure: "Figure",
-  footer: "Footer",
-  form: "Form",
-  header: "Header",
-  main: "Main",
-  nav: "Navigation",
-};
+const LANDMARK_NAMES: ReadonlyMap<string, string> = new Map([
+  ["article", "Article"],
+  ["aside", "Sidebar"],
+  ["dialog", "Dialog"],
+  ["figure", "Figure"],
+  ["footer", "Footer"],
+  ["form", "Form"],
+  ["header", "Header"],
+  ["main", "Main"],
+  ["nav", "Navigation"],
+]);
 
 /** Trim and ellipsize to {@link LABEL_MAX}. */
 function truncate(text: string): string {
@@ -141,17 +154,17 @@ function truncate(text: string): string {
  * five-buttons-per-row build already cost it.
  */
 function firstText(node: JxMutableNode, depth = 0): string {
-  if (typeof node.textContent === "string" && node.textContent.trim()) {
+  if (isString(node.textContent) && node.textContent.trim()) {
     return node.textContent.trim();
   }
   if (depth >= 3 || !Array.isArray(node.children)) {
     return "";
   }
   for (const child of node.children) {
-    if (typeof child === "string" && child.trim()) {
+    if (isString(child) && child.trim()) {
       return child.trim();
     }
-    if (child && typeof child === "object") {
+    if (isNonNullObject(child)) {
       const found = firstText(child, depth + 1);
       if (found) {
         return found;
@@ -164,7 +177,7 @@ function firstText(node: JxMutableNode, depth = 0): string {
 /** The node's first class name, when it has a plain (unbound) `class` attribute. */
 function firstClass(node: JxMutableNode): string {
   const value = node.attributes?.class;
-  return typeof value === "string" ? (value.trim().split(/\s+/u)[0] ?? "") : "";
+  return isString(value) ? (value.trim().split(/\s+/u)[0] ?? "") : "";
 }
 
 /**
@@ -188,14 +201,14 @@ export function outlineLabel(node: JxMutableNode): string {
   if (node.$id) {
     return `#${truncate(node.$id)}`;
   }
-  if (typeof node.textContent === "string" && node.textContent.trim()) {
+  if (isString(node.textContent) && node.textContent.trim()) {
     return truncate(node.textContent);
   }
   const cls = firstClass(node);
   if (cls) {
     return `.${truncate(cls)}`;
   }
-  const landmark = LANDMARK_NAMES[displayTagName(node.tagName).toLowerCase()];
+  const landmark = LANDMARK_NAMES.get(displayTagName(node.tagName).toLowerCase());
   if (landmark) {
     return landmark;
   }
@@ -256,12 +269,11 @@ export function rowCommandViews(
 // ─── The tree, as a keyboard surface ─────────────────────────────────────────
 
 /**
- * Pixels of indent per level, the depth past which the column stops paying, and the row's own
- * gutter.
+ * The depth past which the column stops paying. The pixels per level and the row's own gutter are
+ * the Stylebook layers panel's {@link INDENT_STEP} and {@link INDENT_BASE}, so the two trees indent
+ * alike.
  */
-const INDENT_STEP = 16;
 const INDENT_MAX_DEPTH = 6;
-const INDENT_BASE = 8;
 
 /**
  * The indent for `depth`, capped.
@@ -275,7 +287,7 @@ export function indentWidth(depth: number): number {
 
 /** The inverse of {@link pathKey}: numeric segments come back as numbers, as the doc stores them. */
 function pathFromKey(key: string): JxPath {
-  return key ? (key.split("/").map((s) => (/^\d+$/u.test(s) ? Number(s) : s)) as JxPath) : [];
+  return key ? key.split("/").map((s) => (/^\d+$/u.test(s) ? Number(s) : s)) : [];
 }
 
 // ─── The row model, and the window onto it ───────────────────────────────────
@@ -288,7 +300,7 @@ function pathFromKey(key: string): JxPath {
  * window only. Splitting the two is the whole saving — the expensive half is the kit elements a
  * row's cluster mounts, not the walk that finds it.
  */
-interface OutlineRow {
+interface OutlineRowFacts {
   /** `pathKey(path)` — the drag-and-drop and roving-focus key, and the `$map`'s reconcile key. */
   key: string;
   path: JxPath;
@@ -303,7 +315,6 @@ interface OutlineRow {
    * than quietly start selecting text nodes.
    */
   item: boolean;
-  node: JxMutableNode | string | number | boolean;
   nodeType: string;
   /** 1-based position among the row's `role="treeitem"` siblings — see {@link numberOutlineSets}. */
   posInSet: number;
@@ -311,6 +322,20 @@ interface OutlineRow {
   setSize: number;
 }
 
+/** A `role="treeitem"` row: an element, a repeater, a template or a case, always an object node. */
+interface OutlineItemRow extends OutlineRowFacts {
+  item: true;
+  node: JxMutableNode;
+}
+
+/** A text-node row: drawn, but not a tree item. Its node is the bare child primitive. */
+interface OutlineTextRow extends OutlineRowFacts {
+  item: false;
+  node: JxMutableNode | string | number | boolean;
+}
+
+type OutlineRow = OutlineItemRow | OutlineTextRow;
+
 /**
  * The declared height of one row — `surfaces/panel-outline.json`'s `[part="row"] { block-size }`.
  *
@@ -456,6 +481,11 @@ function watchOutlineTree(): void {
  * reorder, canvas to Outline sync, a collaborator's cursor, a jump from Problems — needs the
  * unambiguous one.
  */
+/** Whether a decoded `data-jx-path` is a path: an array of string and number segments. */
+function isJxPath(value: unknown): value is JxPath {
+  return Array.isArray(value) && value.every((segment) => isString(segment) || isNumber(segment));
+}
+
 export function outlineRowPath(el: Element | null): JxPath | null {
   const row = el?.closest<HTMLElement>("[data-jx-path]");
   if (!row?.dataset.jxPath) {
@@ -463,7 +493,7 @@ export function outlineRowPath(el: Element | null): JxPath | null {
   }
   try {
     const parsed: unknown = JSON.parse(row.dataset.jxPath);
-    return Array.isArray(parsed) ? (parsed as JxPath) : null;
+    return isJxPath(parsed) ? parsed : null;
   } catch {
     return null;
   }
@@ -674,7 +704,7 @@ function outlineRowLabel(row: OutlineRow): string {
     const text = String(row.node);
     return text.length > TEXT_PREVIEW_MAX ? `${text.slice(0, TEXT_PREVIEW_MAX)}…` : text;
   }
-  const node = row.node as JxMutableNode;
+  const { node } = row;
   return row.nodeType === "case-ref" ? node.$ref || "external" : outlineLabel(node);
 }
 
@@ -733,7 +763,7 @@ export function startLayerTitleEdit(path: JxPath, rerender: () => void) {
   /* The row's own node, not a second `getNodeAtPath` walk: the model already holds it, and reading
      it back off the model is what makes "a text line has no `$title` to write" a real branch rather
      than a defensive null check nothing can reach. */
-  if (!row?.item || typeof row.node !== "object") {
+  if (!row?.item) {
     return;
   }
   _editing = { key: row.key, rerender, text: row.node.$title || "" };
@@ -827,9 +857,11 @@ function buildOutlineRows(doc: JxMutableNode, mode: string, collapsed: Set<strin
     }
 
     const isText = nodeType === "text";
+    /** The row's node when it is a tree item; `null` for a text-node row. */
+    let element: JxMutableNode | null = null;
     if (!isText) {
       // After the text-node branch, a row's node is a JxMutableNode or it is not a row at all.
-      if (typeof node !== "object" || node === null) {
+      if (!isNonNullObject(node)) {
         continue;
       }
       if (path.length >= 2 && nodeType === "element") {
@@ -839,22 +871,28 @@ function buildOutlineRows(doc: JxMutableNode, mode: string, collapsed: Set<strin
           continue;
         }
       }
+      element = node;
     }
 
     while (ancestors.length > 0 && rows[ancestors.at(-1)!]!.depth >= depth) {
       ancestors.pop();
     }
-    rows.push({
-      depth,
-      item: !isText,
-      key,
-      node,
-      nodeType,
-      parent: ancestors.at(-1) ?? -1,
-      path,
-      posInSet: 0,
-      setSize: 0,
-    });
+    const parent = ancestors.at(-1) ?? -1;
+    rows.push(
+      element === null
+        ? { depth, item: false, key, node, nodeType, parent, path, posInSet: 0, setSize: 0 }
+        : {
+            depth,
+            item: true,
+            key,
+            node: element,
+            nodeType,
+            parent,
+            path,
+            posInSet: 0,
+            setSize: 0,
+          },
+    );
     ancestors.push(rows.length - 1);
   }
   return numberOutlineSets(rows);
@@ -890,30 +928,20 @@ function numberOutlineSets(rows: OutlineRow[]): OutlineRow[] {
 
 /** Whether the row has anything under it — children, a map template, or `$switch` cases. */
 function isExpandable(row: OutlineRow): boolean {
-  if (!row.item || typeof row.node !== "object") {
+  if (!row.item) {
     return false;
   }
-  const node = row.node as JxMutableNode;
+  const { node } = row;
   const hasChildren = Array.isArray(node.children) && node.children.length > 0;
-  const hasMapChildren =
-    node.children !== undefined &&
-    typeof node.children === "object" &&
-    (node.children as unknown as Record<string, unknown>).$prototype === "Array";
+  const hasMapChildren = isMappedArray(node.children);
   const hasCases =
-    Boolean(node.$switch) &&
-    typeof node.cases === "object" &&
-    node.cases !== null &&
-    Object.keys(node.cases).length > 0;
+    Boolean(node.$switch) && isNonNullObject(node.cases) && Object.keys(node.cases).length > 0;
   return hasChildren || hasMapChildren || hasCases || (row.nodeType === "map" && Boolean(node.map));
 }
 
 /** The badge: what it says, which of the six drawings it gets, and what it says on hover. */
-function rowBadge(row: OutlineRow): {
-  badge: string;
-  badgeKind: string;
-  badgeTitle: string | null;
-} {
-  const node = row.node as JxMutableNode;
+function rowBadge(row: OutlineItemRow): Pick<OutlineRowView, "badge" | "badgeKind" | "badgeTitle"> {
+  const { node } = row;
   if (row.nodeType === "map") {
     return { badge: "↻", badgeKind: "map", badgeTitle: "Repeating list — one copy per item" };
   }
@@ -930,9 +958,7 @@ function rowBadge(row: OutlineRow): {
       badge: "▣",
       badgeKind: "slot",
       badgeTitle:
-        typeof slotName === "string" && slotName.trim()
-          ? `Slot "${slotName.trim()}"`
-          : "Default slot",
+        isString(slotName) && slotName.trim() ? `Slot "${slotName.trim()}"` : "Default slot",
     };
   }
   /* The ROW BADGE, which is the one place the tag is shown as itself rather than folded into a
@@ -994,10 +1020,9 @@ function outlineRowView(
   if (!row.item) {
     return textRowView(row);
   }
-  const { depth, key, nodeType, path } = row;
-  const node = row.node as JxMutableNode;
+  const { depth, key, node, nodeType, path } = row;
 
-  const selected = isPathSelected(doc.selection, path);
+  const selected = isSelected(doc.selection, path);
   const expandable = isExpandable(row);
   // Array nodes can't accept dropped children (their content is the single map template), so they
   // Block the make-child drop instruction like void elements do.
@@ -1006,8 +1031,7 @@ function outlineRowView(
   // Array (repeater) nodes are first-class structural nodes — movable/draggable/deletable like
   // Elements. Both sit at a numeric child index; templates (path tail "map") and case nodes do
   // Not, so they stay selectable/editable but not structurally manipulable.
-  const structural =
-    (nodeType === "element" || nodeType === "map") && typeof childIndex(path) === "number";
+  const structural = (nodeType === "element" || nodeType === "map") && isNumber(childIndex(path));
   const isRoot = doc.mode === "content" ? path.length === 0 : path.length < 2;
   const grabbable = structural && !isRoot;
   const open = expandable && !collapsed.has(key);
@@ -1187,7 +1211,7 @@ function revealChangedSelection(): void {
 function revealSelectedRow(): void {
   const drawn = _outlineList?.querySelector(`${ROW_SELECTOR}[aria-selected="true"]`);
   if (drawn) {
-    drawn.scrollIntoView?.({ behavior: "smooth", block: "nearest" });
+    drawn.scrollIntoView({ behavior: "smooth", block: "nearest" });
     return;
   }
   revealOutlineRow(outlineIndexOfPath(primarySelection(activeTab.value?.session.selection)));
@@ -1244,9 +1268,9 @@ export function mountOutlinePanel(
     standing = {
       handle: mountOutlineSurface(target, values, {
         contextMenu: (_scope, event) => {
-          const path = outlineRowPath(event.target as Element | null);
-          if (path) {
-            showContextMenu(event as MouseEvent, path, { rerender: () => _outlineRerender?.() });
+          const path = outlineRowPath(event.target instanceof Element ? event.target : null);
+          if (path && event instanceof MouseEvent) {
+            showContextMenu(event, path, { rerender: () => _outlineRerender?.() });
             redrawOutline();
           }
         },
@@ -1260,10 +1284,9 @@ export function mountOutlinePanel(
              mount would, and the host decides when it is worth anything. An unconnected input
              cannot take focus. */
           queueMicrotask(() => {
-            const input = element as HTMLInputElement;
-            if (input.isConnected) {
-              input.focus();
-              input.select?.();
+            if (element instanceof HTMLInputElement && element.isConnected) {
+              element.focus();
+              element.select();
             }
           });
         },

package/src/panels/left-panel.ts

@@ -27,7 +27,7 @@
  */
 
 import { render as litRender } from "lit-html";
-import { leftPanel } from "../store";
+import { leftPanel, requireShellRef } from "../store";
 import { effect, effectScope } from "../reactivity";
 import { activeTab } from "../workspace/workspace";
 import { shell } from "../shell";
@@ -72,7 +72,7 @@ export function mount(deps: NavigatorPanelDeps) {
   _deps = deps;
   registerNavigatorPanels();
   _dock = mountNavigatorDock(
-    leftPanel,
+    requireShellRef(leftPanel, "left-panel"),
     { panels: [panelView()] },
     {
       onContent: (panelId, host) => {
@@ -180,7 +180,7 @@ function navigatorDocument(): NavigatorDocument | null {
     return null;
   }
   return {
-    canvas: aTab.session.canvas as Record<string, unknown> | null,
+    canvas: aTab.session.canvas,
     content: aTab.doc.content,
     document: aTab.doc.document,
     documentPath: aTab.documentPath,