@jxsuite/studio 0.19.0 → 0.21.0

package/src/canvas/canvas-render.js

@@ -11,6 +11,8 @@ import { canvasWrap, canvasPanels, updateCanvas } from "../store.js";
 import { activeTab } from "../workspace/workspace.js";
 import { view } from "../view.js";
 import { loadMarkdown } from "../files/file-ops.js";
+import { renderWelcome } from "../panels/welcome-screen.js";
+import { projectState } from "../state.js";
 import {
   canvasPanelTemplate,
   applyTransform,
@@ -44,24 +46,43 @@ import { mediaDisplayName } from "../panels/shared.js";
 import { statusMessage } from "../panels/statusbar.js";
 import * as overlaysPanel from "../panels/overlays.js";
 
-/** @type {any} */
-let _ctx = null;
+/** @typedef {import("../panels/canvas-dnd.js").CanvasPanel} CanvasPanel */
 
-let _prevStylebookFilter = "";
-let _prevStylebookCustomizedOnly = false;
+/**
+ * @typedef {{
+ *   filePath: string;
+ *   originalContent: string;
+ *   currentContent: string;
+ *   isMarkdown: boolean;
+ *   fileStatus: string;
+ *   originalDoc?: JxMutableNode | null;
+ *   currentDoc?: JxMutableNode | null;
+ *   original?: JxMutableNode | null;
+ * }} GitDiffState
+ */
 
 /**
- * Initialize the canvas render module.
- *
- * @param {{
+ * @typedef {{
  *   getCanvasMode: () => string;
  *   setCanvasMode: (mode: string) => void;
  *   openFileFromTree: (path: string) => void;
  *   exportFile: () => void;
  *   closeFunctionEditor: () => void;
- *   gitDiffState: any;
- *   setGitDiffState: (state: any) => void;
- * }} ctx
+ *   gitDiffState: GitDiffState | null;
+ *   setGitDiffState: (state: GitDiffState | null) => void;
+ * }} CanvasRenderCtx
+ */
+
+/** @type {CanvasRenderCtx | null} */
+let _ctx = null;
+
+let _prevStylebookFilter = "";
+let _prevStylebookCustomizedOnly = false;
+
+/**
+ * Initialize the canvas render module.
+ *
+ * @param {CanvasRenderCtx} ctx
  */
 export function initCanvasRender(ctx) {
   _ctx = ctx;
@@ -69,9 +90,17 @@ export function initCanvasRender(ctx) {
 
 export function renderCanvas() {
   const tab = activeTab.value;
-  if (!tab) return;
+  if (!tab) {
+    if (!projectState) {
+      renderWelcome(canvasWrap);
+    } else {
+      canvasWrap.textContent = "";
+    }
+    return;
+  }
+  const ctx = /** @type {CanvasRenderCtx} */ (_ctx);
   const S = { document: tab.doc.document, ui: tab.session.ui, mode: tab.doc.mode };
-  const canvasMode = _ctx.getCanvasMode();
+  const canvasMode = ctx.getCanvasMode();
 
   // Advance render generation so stale async renders from the previous cycle bail out
   ++view.renderGeneration;
@@ -92,7 +121,7 @@ export function renderCanvas() {
 
   // Function editor mode: editing a function body in Monaco (JS)
   if (S.ui.editingFunction) {
-    renderFunctionEditor(_ctx.closeFunctionEditor);
+    renderFunctionEditor(ctx.closeFunctionEditor);
     return;
   }
 
@@ -203,7 +232,7 @@ export function renderCanvas() {
     litRender(
       html`<div class="source-wrap">
         <div class="source-toolbar">
-          <sp-action-button size="s" @click=${_ctx.exportFile}>
+          <sp-action-button size="s" @click=${ctx.exportFile}>
             <sp-icon-export slot="icon"></sp-icon-export>
             Export
           </sp-action-button>
@@ -224,25 +253,30 @@ export function renderCanvas() {
       lang === "json" ? JSON.stringify(S.document, null, 2) : S.document?.toString?.() || "";
     const modelUri = monaco.Uri.parse("file:///" + filePath);
     const model = monaco.editor.createModel(content, lang, modelUri);
-    view.monacoEditor = monaco.editor.create(/** @type {any} */ (editorContainer), {
-      model,
-      theme: "vs-dark",
-      automaticLayout: true,
-      minimap: { enabled: false },
-      fontSize: 12,
-      fontFamily: "'SF Mono', 'Fira Code', 'Consolas', monospace",
-      lineNumbers: "on",
-      scrollBeyondLastLine: false,
-      wordWrap: "on",
-      tabSize: 2,
-    });
+    view.monacoEditor = monaco.editor.create(
+      /** @type {HTMLElement} */ (/** @type {unknown} */ (editorContainer)),
+      {
+        model,
+        theme: "vs-dark",
+        automaticLayout: true,
+        minimap: { enabled: false },
+        fontSize: 12,
+        fontFamily: "'SF Mono', 'Fira Code', 'Consolas', monospace",
+        lineNumbers: "on",
+        scrollBeyondLastLine: false,
+        wordWrap: "on",
+        tabSize: 2,
+      },
+    );
 
     // Debounced sync back to state
-    /** @type {any} */
+    /** @type {ReturnType<typeof setTimeout> | undefined} */
     let debounce;
     view.monacoEditor.onDidChangeModelContent(() => {
-      if (view.monacoEditor._ignoreNextChange) {
-        view.monacoEditor._ignoreNextChange = false;
+      const editor = view.monacoEditor;
+      if (!editor) return;
+      if (editor._ignoreNextChange) {
+        editor._ignoreNextChange = false;
         return;
       }
       clearTimeout(debounce);
@@ -250,7 +284,7 @@ export function renderCanvas() {
         const tab = activeTab.value;
         if (lang === "json") {
           try {
-            tab.doc.document = JSON.parse(view.monacoEditor.getValue());
+            tab.doc.document = JSON.parse(editor.getValue());
             tab.doc.dirty = true;
           } catch {
             // Invalid JSON — don't update state
@@ -265,8 +299,8 @@ export function renderCanvas() {
 
   // Git diff mode — render original (left) and current (right) side-by-side on panzoom surface
   if (canvasMode === "git-diff") {
-    if (!_ctx.gitDiffState) {
-      _ctx.setCanvasMode("design");
+    if (!ctx.gitDiffState) {
+      ctx.setCanvasMode("design");
       renderCanvas();
       return;
     }
@@ -276,7 +310,7 @@ export function renderCanvas() {
       canvasWrap.style.overflow = "hidden";
     }
 
-    const gitDiffState = _ctx.gitDiffState;
+    const gitDiffState = ctx.gitDiffState;
     const panelWidth = 800;
 
     const { tpl: origTpl, panel: origPanel } = canvasPanelTemplate(
@@ -307,8 +341,8 @@ export function renderCanvas() {
       canvasWrap,
     );
 
-    canvasPanels.push(/** @type {any} */ (origPanel));
-    canvasPanels.push(/** @type {any} */ (currPanel));
+    canvasPanels.push(/** @type {CanvasPanel} */ (origPanel));
+    canvasPanels.push(/** @type {CanvasPanel} */ (currPanel));
 
     /** @param {string} content */
     const parseContent = (content) => {
@@ -329,8 +363,20 @@ export function renderCanvas() {
       parseContent(gitDiffState.originalContent || ""),
       parseContent(gitDiffState.currentContent || ""),
     ]).then(([originalDoc, currentDoc]) => {
-      renderCanvasIntoPanel(origPanel, new Set(), featureToggles, originalDoc, gitDiffState);
-      renderCanvasIntoPanel(currPanel, new Set(), featureToggles, currentDoc, gitDiffState);
+      renderCanvasIntoPanel(
+        /** @type {CanvasPanel} */ (origPanel),
+        new Set(),
+        featureToggles,
+        originalDoc,
+        gitDiffState,
+      );
+      renderCanvasIntoPanel(
+        /** @type {CanvasPanel} */ (currPanel),
+        new Set(),
+        featureToggles,
+        currentDoc,
+        gitDiffState,
+      );
     });
 
     applyTransform();
@@ -355,15 +401,15 @@ export function renderCanvas() {
       <div
         class="content-edit-canvas"
         ${ref((el) => {
-          panel.scrollContainer = /** @type {HTMLElement | null} */ (el);
+          panel.scrollContainer = /** @type {HTMLElement | null} */ (el || null);
         })}
       >
         <div class="content-edit-column" style="max-width:${baseWidth}px">${panelTpl}</div>
       </div>
     `;
     litRender(editTpl, canvasWrap);
-    canvasPanels.push(/** @type {any} */ (panel));
-    renderCanvasIntoPanel(panel, new Set(), S.ui.featureToggles);
+    canvasPanels.push(/** @type {CanvasPanel} */ (panel));
+    renderCanvasIntoPanel(/** @type {CanvasPanel} */ (panel), new Set(), S.ui.featureToggles);
     return;
   }
 
@@ -407,8 +453,8 @@ export function renderCanvas() {
       `,
       canvasWrap,
     );
-    canvasPanels.push(/** @type {any} */ (panel));
-    renderCanvasIntoPanel(panel, new Set(), featureToggles);
+    canvasPanels.push(/** @type {CanvasPanel} */ (panel));
+    renderCanvasIntoPanel(/** @type {CanvasPanel} */ (panel), new Set(), featureToggles);
     applyTransform();
     if (modeChanged) {
       observeCenterUntilStable();
@@ -436,7 +482,6 @@ export function renderCanvas() {
     });
   }
 
-  /** @type {{ tpl: any; panel: any; activeSet: any }[]} */
   const panelEntries = allPanelDefs.map((def) => {
     const label = `${def.displayName} (${def.width}px)`;
     const { tpl, panel } = canvasPanelTemplate(def.name, label, false, def.width);
@@ -459,8 +504,9 @@ export function renderCanvas() {
   );
 
   for (const { panel, activeSet } of panelEntries) {
-    canvasPanels.push(/** @type {any} */ (panel));
-    renderCanvasIntoPanel(panel, activeSet, featureToggles);
+    const p = /** @type {CanvasPanel} */ (panel);
+    canvasPanels.push(p);
+    renderCanvasIntoPanel(p, activeSet, featureToggles);
   }
 
   // Highlight active panel header
@@ -480,13 +526,13 @@ export function renderCanvas() {
  * Render document into a single canvas panel. Tries runtime rendering first, falls back to
  * structural preview.
  *
- * @param {any} panel
+ * @param {CanvasPanel} panel
  * @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.
+ * @param {Record<string, boolean>} featureToggles
+ * @param {JxMutableNode | null} [docOverride] - Optional document to render (for diff mode). Uses
+ *   active tab doc if not provided.
+ * @param {GitDiffState | null} [gitDiffState] - Optional diff state. If provided, computes and
+ *   applies diff highlighting.
  */
 function renderCanvasIntoPanel(
   panel,
@@ -497,15 +543,16 @@ function renderCanvasIntoPanel(
 ) {
   const gen = view.renderGeneration;
   const tab = activeTab.value;
-  const docToRender = docOverride || tab?.doc.document;
+  const docToRender = /** @type {JxMutableNode} */ (docOverride || tab?.doc.document);
+  const canvas = /** @type {HTMLElement} */ (panel.canvas);
 
-  renderCanvasLive(gen, docToRender, panel.canvas)
-    .then((/** @type {any} */ scope) => {
+  renderCanvasLive(gen, docToRender, canvas)
+    .then((/** @type {Record<string, unknown> | null} */ 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);
+        applyCanvasMediaOverrides(canvas, activeBreakpoints);
         statusMessage("Runtime render OK", 1500);
 
         // Apply diff highlighting if in git-diff mode
@@ -521,51 +568,50 @@ function renderCanvasIntoPanel(
           // Can't iterate WeakMap, so apply styling by walking the canvas
           const { elToPath } = scope;
           if (elToPath instanceof WeakMap) {
-            applyDiffHighlightToCanvas(panel.canvas, diffMap);
+            applyDiffHighlightToCanvas(canvas, diffMap);
           }
         }
       } else {
         // Fallback to structural preview
         updateCanvas({ status: "ready", scope: null, error: null });
-        panel.canvas.innerHTML = "";
-        renderCanvasNode(docToRender, [], panel.canvas, activeBreakpoints, featureToggles);
+        canvas.innerHTML = "";
+        renderCanvasNode(docToRender, [], canvas, activeBreakpoints, featureToggles);
       }
       try {
-        registerPanelDnD(panel);
-      } catch (/** @type {any} */ e) {
-        console.warn("registerPanelDnD failed:", e.message);
+        registerPanelDnD(/** @type {CanvasPanel} */ (panel));
+      } catch (/** @type {unknown} */ e) {
+        console.warn("registerPanelDnD failed:", /** @type {Error} */ (e).message);
       }
-      registerPanelEvents(panel);
+      registerPanelEvents(/** @type {CanvasPanel} */ (panel));
       renderOverlays();
       updateForcedPseudoPreview();
 
       // Process pending inline edit when canvas becomes ready
       const currentTab = activeTab.value;
       if (currentTab?.session.ui?.pendingInlineEdit) {
-        const { path, mediaName: mn } = /** @type {{ path: any; mediaName: string }} */ (
+        const { path, mediaName: mn } = /** @type {InlineEditDef} */ (
           currentTab.session.ui.pendingInlineEdit
         );
         currentTab.session.ui.pendingInlineEdit = null;
-        const targetPanel =
-          canvasPanels.find((/** @type {any} */ p) => p.mediaName === mn) || canvasPanels[0];
+        const targetPanel = canvasPanels.find((p) => p.mediaName === mn) || canvasPanels[0];
         if (targetPanel) {
           const el = findCanvasElement(path, targetPanel.canvas);
           if (el) enterComponentInlineEdit(el, path);
         }
       }
     })
-    .catch((/** @type {any} */ err) => {
+    .catch((/** @type {unknown} */ err) => {
       if (gen !== view.renderGeneration) return;
-      console.warn("renderCanvasLive rejected:", err?.message || err);
+      console.warn("renderCanvasLive rejected:", err instanceof Error ? err.message : err);
       updateCanvas({ status: "ready", scope: null, error: null });
-      panel.canvas.innerHTML = "";
-      renderCanvasNode(docToRender, [], panel.canvas, activeBreakpoints, featureToggles);
+      canvas.innerHTML = "";
+      renderCanvasNode(docToRender, [], canvas, activeBreakpoints, featureToggles);
       try {
-        registerPanelDnD(panel);
-      } catch (/** @type {any} */ e) {
-        console.warn("registerPanelDnD failed:", e.message);
+        registerPanelDnD(/** @type {CanvasPanel} */ (panel));
+      } catch (/** @type {unknown} */ e) {
+        console.warn("registerPanelDnD failed:", /** @type {Error} */ (e).message);
       }
-      registerPanelEvents(panel);
+      registerPanelEvents(/** @type {CanvasPanel} */ (panel));
       renderOverlays();
       updateForcedPseudoPreview();
     });

package/src/canvas/canvas-utils.js

@@ -15,8 +15,18 @@ import { view } from "../view.js";
 import { getLayerSlot } from "../ui/layers.js";
 import { getActivePanel, findCanvasElement } from "./canvas-helpers.js";
 
-/** @type {any} */
-let _ctx = null;
+/**
+ * @type {{
+ *   getCanvasMode: () => string;
+ *   getZoom: () => number;
+ *   setZoomDirect: (zoom: number) => void;
+ *   renderStylebookOverlays: () => void;
+ * }}
+ */
+let _ctx;
+
+/** @type {HTMLElement | null} */
+let _zoomIndicatorEl = null;
 
 /**
  * Initialize the canvas utils module.
@@ -35,10 +45,10 @@ export function initCanvasUtils(ctx) {
 /**
  * Create the DOM structure for a single canvas panel.
  *
- * @param {any} mediaName
- * @param {any} label
- * @param {any} fullWidth
- * @param {any} width
+ * @param {string | null} mediaName
+ * @param {string | null} label
+ * @param {boolean} fullWidth
+ * @param {number | null} width
  */
 export function canvasPanelTemplate(mediaName, label, fullWidth, width = null) {
   /**
@@ -55,7 +65,7 @@ export function canvasPanelTemplate(mediaName, label, fullWidth, width = null) {
    * }}
    */
   const panel = {
-    mediaName,
+    mediaName: mediaName || "",
     element: null,
     canvas: null,
     overlay: null,
@@ -201,6 +211,15 @@ export function fitToScreen() {
   applyTransform();
 }
 
+/** Reset zoom to 100% and re-center horizontally. */
+export function resetZoom() {
+  if (!view.panzoomWrap) return;
+  _ctx.setZoomDirect(1);
+  centerCanvas();
+  applyTransform();
+  renderZoomIndicator();
+}
+
 /** Reset the zoom indicator (clear its content). Called when switching to non-panzoom modes. */
 export function resetZoomIndicator() {
   litRender(nothing, getLayerSlot("popover", "zoom-indicator"));
@@ -272,15 +291,27 @@ export function renderZoomIndicator() {
   const host = getLayerSlot("popover", "zoom-indicator");
   litRender(
     html`
-      <div class="zoom-indicator">
+      <div
+        class="zoom-indicator"
+        ${ref((el) => {
+          _zoomIndicatorEl = /** @type {HTMLElement | null} */ (el || null);
+        })}
+      >
+        <span class="zoom-indicator-action" title="Reset to 100%" @click=${resetZoom}>
+          <svg
+            width="14"
+            height="14"
+            viewBox="0 0 16 16"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="1.5"
+          >
+            <circle cx="8" cy="8" r="5.5" />
+            <path d="M8 5.5v5M5.5 8h5" />
+          </svg>
+        </span>
         <span class="zoom-indicator-label">${Math.round(zoom * 100)}%</span>
-        <sp-action-button
-          quiet
-          size="s"
-          class="zoom-fit-btn"
-          title="Fit to screen"
-          @click=${fitToScreen}
-        >
+        <span class="zoom-indicator-action" title="Fit to screen" @click=${fitToScreen}>
           <svg
             width="14"
             height="14"
@@ -292,7 +323,7 @@ export function renderZoomIndicator() {
             <rect x="2" y="2" width="12" height="12" rx="1" />
             <path d="M2 6h12M6 2v12" />
           </svg>
-        </sp-action-button>
+        </span>
       </div>
     `,
     host,
@@ -302,12 +333,11 @@ export function renderZoomIndicator() {
 
 /** Position the zoom indicator relative to canvas-wrap bounds. */
 export function positionZoomIndicator() {
-  const indicator = /** @type {HTMLElement | null} */ (document.querySelector(".zoom-indicator"));
-  if (!indicator) return;
+  if (!_zoomIndicatorEl) return;
   const rect = canvasWrap.getBoundingClientRect();
-  indicator.style.left = `${rect.left + rect.width / 2}px`;
-  indicator.style.top = `${rect.bottom - 32}px`;
-  indicator.style.transform = "translateX(-50%)";
+  _zoomIndicatorEl.style.left = `${rect.left + rect.width / 2}px`;
+  _zoomIndicatorEl.style.top = `${rect.bottom - 32}px`;
+  _zoomIndicatorEl.style.transform = "translateX(-50%)";
 }
 
 /** Toggle "active" class on canvas panel headers based on activeMedia. */

package/src/canvas/nested-site-style.js

@@ -0,0 +1,50 @@
+/**
+ * Generate scoped CSS from nested style objects (e.g. `table: { width: "100%", thead: { ... } }`).
+ * Returns a CSS string with rules scoped under the given selector.
+ *
+ * @param {Record<string, any>} styleObj - The full style object (flat + nested)
+ * @param {string} scope - The scoping selector (e.g. `[data-jx-site]`)
+ * @returns {string} Generated CSS text
+ */
+export function buildNestedSiteCSS(styleObj, scope) {
+  let css = "";
+
+  function emit(/** @type {string} */ parentSel, /** @type {Record<string, any>} */ rules) {
+    const props = Object.entries(rules)
+      .filter(([, val]) => val === null || typeof val !== "object" || Array.isArray(val))
+      .map(([p, val]) => `${camelToKebab(p)}: ${val}`)
+      .join("; ");
+    if (props) css += `${parentSel} { ${props} }\n`;
+    for (const [sel, sub] of Object.entries(rules)) {
+      if (sub === null || typeof sub !== "object" || Array.isArray(sub)) continue;
+      const resolved = sel.startsWith("&")
+        ? sel.replace("&", parentSel)
+        : sel.startsWith("[") || sel.startsWith(":") || sel.startsWith(".")
+          ? `${parentSel}${sel}`
+          : `${parentSel} ${sel}`;
+      emit(resolved, sub);
+    }
+  }
+
+  for (const [k, v] of Object.entries(styleObj)) {
+    if (v === null || typeof v !== "object" || Array.isArray(v)) continue;
+    const resolved = k.startsWith("&")
+      ? k.replace("&", scope)
+      : k.startsWith("[") || k.startsWith(":") || k.startsWith(".")
+        ? `${scope}${k}`
+        : `${scope} ${k}`;
+    emit(resolved, v);
+  }
+
+  return css;
+}
+
+/**
+ * Convert camelCase to kebab-case.
+ *
+ * @param {string} s
+ * @returns {string}
+ */
+function camelToKebab(s) {
+  return s.replace(/[A-Z]/g, (m) => `-${m.toLowerCase()}`);
+}

package/src/editor/component-inline-edit.js

@@ -24,7 +24,7 @@ import { isSlashMenuOpen, showSlashMenu, dismissSlashMenu } from "./slash-menu.j
 import { renderBlockActionBar } from "../panels/block-action-bar.js";
 import { defaultDef } from "../panels/shared.js";
 
-/** @type {any} */
+/** @type {{ findCanvasElement: Function } | null} */
 let _ctx = null;
 
 /**
@@ -39,8 +39,8 @@ export function initComponentInlineEdit(ctx) {
 /**
  * Enter plaintext inline editing on a canvas element.
  *
- * @param {any} el
- * @param {any} path
+ * @param {HTMLElement} el
+ * @param {JxPath} path
  */
 export function enterComponentInlineEdit(el, path) {
   if (view.componentInlineEdit && view.componentInlineEdit.el === el) {
@@ -56,7 +56,7 @@ export function enterComponentInlineEdit(el, path) {
   if (node.children && typeof node.children === "object") return;
   if (tc && typeof tc === "object") return;
   const voids = new Set(["img", "input", "br", "hr", "video", "audio", "source", "embed", "slot"]);
-  if (voids.has(node.tagName)) return;
+  if (voids.has(node.tagName || "")) return;
 
   for (const p of canvasPanels) {
     const boxes = /** @type {NodeListOf<HTMLElement>} */ (
@@ -96,14 +96,15 @@ export function enterComponentInlineEdit(el, path) {
   el.addEventListener("keydown", componentInlineKeydown);
   el.addEventListener("input", componentInlineInput);
 
-  const outsideHandler = (/** @type {any} */ evt) => {
+  const outsideHandler = (/** @type {MouseEvent} */ evt) => {
     if (!view.componentInlineEdit) {
       document.removeEventListener("mousedown", outsideHandler, true);
       return;
     }
-    if (view.componentInlineEdit.el.contains(evt.target)) return;
+    if (view.componentInlineEdit.el.contains(/** @type {Node} */ (evt.target))) return;
     if (isSlashMenuOpen()) return;
-    if (view.blockActionBarEl && view.blockActionBarEl.contains(evt.target)) return;
+    if (view.blockActionBarEl && view.blockActionBarEl.contains(/** @type {Node} */ (evt.target)))
+      return;
     document.removeEventListener("mousedown", outsideHandler, true);
 
     /** @type {(string | number)[] | null} */
@@ -185,7 +186,7 @@ export function enterComponentInlineEdit(el, path) {
   renderBlockActionBar();
 }
 
-/** @param {any} e */
+/** @param {KeyboardEvent} e */
 function componentInlineKeydown(e) {
   if (isSlashMenuOpen()) {
     if (["ArrowDown", "ArrowUp", "Enter", "Escape"].includes(e.key)) return;
@@ -205,10 +206,10 @@ function splitParagraph() {
   if (!view.componentInlineEdit) return;
   const { el, path, mediaName } = view.componentInlineEdit;
 
-  const sel = /** @type {any} */ (el.ownerDocument.defaultView?.getSelection());
+  const sel = /** @type {Selection | null} */ (el.ownerDocument.defaultView?.getSelection());
   const fullText = el.textContent || "";
   let offset = fullText.length;
-  if (sel.rangeCount) {
+  if (sel && sel.rangeCount) {
     const range = sel.getRangeAt(0);
     const preRange = document.createRange();
     preRange.selectNodeContents(el);
@@ -220,7 +221,7 @@ function splitParagraph() {
   const textAfter = fullText.slice(offset);
 
   const tag = "p";
-  const pPath = /** @type {any} */ (parentElementPath(path));
+  const pPath = /** @type {JxPath} */ (parentElementPath(path));
   const idx = /** @type {number} */ (childIndex(path));
   if (!pPath) return;
 
@@ -266,7 +267,7 @@ function cancelComponentInlineEdit() {
   renderOnly("overlays");
 }
 
-/** @param {any} el */
+/** @param {HTMLElement} el */
 function cleanupComponentInlineEdit(el) {
   el.removeEventListener("keydown", componentInlineKeydown);
   el.removeEventListener("input", componentInlineInput);
@@ -304,7 +305,7 @@ function componentInlineInput() {
   }
 }
 
-/** @param {any} cmd */
+/** @param {{ tag: string; label: string; description: string }} cmd */
 function handleComponentSlashSelect(cmd) {
   if (!view.componentInlineEdit) return;
   const { el, path, mediaName } = view.componentInlineEdit;