@jxsuite/studio 0.19.0 → 0.21.0

package/src/panels/data-explorer.js

@@ -7,13 +7,18 @@ import { classMap } from "lit-html/directives/class-map.js";
 const expandedDataKeys = new Set();
 
 /** Unwrap a Vue ref (has .value and .__v_isRef) to get the underlying value. */
-function unwrapSignal(/** @type {any} */ value) {
-  if (value && typeof value === "object" && value.__v_isRef) return value.value;
+function unwrapSignal(/** @type {unknown} */ value) {
+  if (
+    value &&
+    typeof value === "object" &&
+    /** @type {Record<string, unknown>} */ (value).__v_isRef
+  )
+    return /** @type {Record<string, unknown>} */ (value).value;
   return value;
 }
 
 /** Type label for a signal value in the data explorer. */
-function dataTypeLabel(/** @type {any} */ value) {
+function dataTypeLabel(/** @type {unknown} */ value) {
   const v = unwrapSignal(value);
   if (v === null) return "null";
   if (v === undefined) return "pending";
@@ -25,15 +30,15 @@ function dataTypeLabel(/** @type {any} */ value) {
 /**
  * Render the data explorer tab showing live resolved values.
  *
- * @param {Record<string, any>} state - S.document.state (the $defs definitions)
- * @param {Record<string, any> | null} liveScope - Cached live scope from runtime rendering
+ * @param {Record<string, unknown>} state - S.document.state (the $defs definitions)
+ * @param {Record<string, unknown> | null} liveScope - Cached live scope from runtime rendering
  * @param {{
  *   renderCanvas: () => void;
  *   renderLeftPanel: () => void;
- *   defCategory: (def: any) => string;
- *   defBadgeLabel: (def: any) => string;
+ *   defCategory: (def: unknown) => string;
+ *   defBadgeLabel: (def: unknown) => string;
  * }} callbacks
- * @returns {any}
+ * @returns {import("lit-html").TemplateResult}
  */
 export function renderDataExplorerTemplate(state, liveScope, callbacks) {
   const { renderCanvas, renderLeftPanel, defCategory, defBadgeLabel } = callbacks;
@@ -91,11 +96,11 @@ export function renderDataExplorerTemplate(state, liveScope, callbacks) {
 /**
  * Recursively render a JSON value as a tree view (Lit template).
  *
- * @returns {any}
+ * @returns {import("lit-html").TemplateResult}
  */
 export function renderDataTreeTemplate(
-  /** @type {any} */ value,
-  /** @type {any} */ depth,
+  /** @type {unknown} */ value,
+  /** @type {number} */ depth,
   maxDepth = 5,
 ) {
   const indent = `${(depth + 1) * 12}px`;
@@ -150,10 +155,11 @@ export function renderDataTreeTemplate(
   }
 
   // Object
-  const keys = Object.keys(value);
+  const obj = /** @type {Record<string, unknown>} */ (value);
+  const keys = Object.keys(obj);
   const cap = 30;
   const items = keys.slice(0, cap).map((key) => {
-    const v = value[key];
+    const v = obj[key];
     if (v === null || v === undefined || typeof v !== "object") {
       const valText =
         typeof v === "string" && v.length > 80 ? `"${v.slice(0, 80)}\u2026"` : JSON.stringify(v);

package/src/panels/dnd.js

@@ -3,6 +3,19 @@
  * on layer rows, component cards, and element cards.
  */
 
+/**
+ * @typedef {{ element: HTMLElement; input: { clientX: number; clientY: number } }} DragCanDragArgs
+ *
+ * @typedef {{ source: { data: Record<string, unknown>; element: HTMLElement } }} DragDropSourceArgs
+ *
+ * @typedef {{ self: { data: Record<string, unknown> } }} DragSelfArgs
+ *
+ * @typedef {{
+ *   source: { data: Record<string, unknown>; element: HTMLElement };
+ *   location: { current: { dropTargets: { data: Record<string, unknown> }[] } };
+ * }} DragMonitorDropArgs
+ */
+
 import {
   draggable,
   dropTargetForElements,
@@ -32,14 +45,18 @@ import { defaultDef, unsafeTags } from "./shared.js";
 /** Register DnD on layer rows — called from left-panel.js after render */
 export function registerLayersDnD() {
   requestAnimationFrame(() => {
-    const container = /** @type {any} */ (leftPanel)?.querySelector(".layers-container");
+    const container = /** @type {HTMLElement | null} */ (
+      leftPanel?.querySelector(".layers-container")
+    );
     if (!container) return;
 
-    container.querySelectorAll("[data-dnd-row]").forEach(
-      /** @param {any} row */ (row) => {
-        const rowPath = /** @type {string} */ (row.dataset.path)
-          .split("/")
-          .map((/** @type {any} */ s) => (/^\d+$/.test(s) ? parseInt(s) : s));
+    /** @type {NodeListOf<HTMLElement>} */ (container.querySelectorAll("[data-dnd-row]")).forEach(
+      (row) => {
+        const rowPath = /** @type {JxPath} */ (
+          /** @type {string} */ (row.dataset.path)
+            .split("/")
+            .map((/** @type {string} */ s) => (/^\d+$/.test(s) ? parseInt(s) : s))
+        );
         const rowDepth = parseInt(/** @type {string} */ (row.dataset.dndDepth)) || 0;
         const isVoid = row.hasAttribute("data-dnd-void");
         const isExpanded = row.hasAttribute("data-dnd-expanded");
@@ -47,7 +64,7 @@ export function registerLayersDnD() {
         const cleanup = combine(
           draggable({
             element: row,
-            canDrag(/** @type {any} */ { element: _el, input }) {
+            canDrag(/** @type {DragCanDragArgs} */ { element: _el, input }) {
               const target = /** @type {HTMLElement} */ (
                 document.elementFromPoint(input.clientX, input.clientY)
               );
@@ -73,28 +90,30 @@ export function registerLayersDnD() {
           }),
           dropTargetForElements({
             element: row,
-            canDrop(/** @type {any} */ { source }) {
-              const srcPath = source.data.path;
+            canDrop(/** @type {DragDropSourceArgs} */ { source }) {
+              const srcPath = /** @type {JxPath | undefined} */ (source.data.path);
               if (srcPath && isAncestor(srcPath, rowPath)) return false;
               return true;
             },
             getData(/** @type {any} */ { input, element }) {
-              return attachInstruction(
-                { path: rowPath },
-                /** @type {any} */ ({
-                  input,
-                  element,
-                  currentLevel: rowDepth,
-                  indentPerLevel: 16,
-                  mode: isExpanded ? "expanded" : "standard",
-                  block: isVoid ? ["make-child"] : [],
-                }),
+              return /** @type {Record<string | symbol, unknown>} */ (
+                attachInstruction(
+                  { path: rowPath },
+                  {
+                    input,
+                    element,
+                    currentLevel: rowDepth,
+                    indentPerLevel: 16,
+                    mode: isExpanded ? "expanded" : "standard",
+                    block: isVoid ? ["make-child"] : [],
+                  },
+                )
               );
             },
-            onDragEnter(/** @type {any} */ { self }) {
+            onDragEnter(/** @type {DragSelfArgs} */ { self }) {
               showLayerDropGap(row, self.data, container);
             },
-            onDrag(/** @type {any} */ { self }) {
+            onDrag(/** @type {DragSelfArgs} */ { self }) {
               showLayerDropGap(row, self.data, container);
             },
             onDragLeave() {
@@ -111,14 +130,14 @@ export function registerLayersDnD() {
 
     // Global monitor
     const monitorCleanup = monitorForElements({
-      onDrop(/** @type {any} */ { source, location }) {
+      onDrop(/** @type {DragMonitorDropArgs} */ { source, location }) {
         clearLayerDropGap(container);
         const target = location.current.dropTargets[0];
         if (!target) return;
         const instruction = extractInstruction(target.data);
         if (!instruction || instruction.type === "instruction-blocked") return;
         const srcData = source.data;
-        const targetPath = target.data.path;
+        const targetPath = /** @type {JxPath} */ (target.data.path);
 
         // If the source had children, persist collapse at the new location
         const srcRow = srcData.type === "tree-node" && source.element;
@@ -143,56 +162,62 @@ export function registerLayersDnD() {
 /** Register DnD on component rows — called from renderLeftPanel when tab=components */
 export function registerComponentsDnD() {
   requestAnimationFrame(() => {
-    const container = /** @type {any} */ (leftPanel)?.querySelector(".components-section");
+    const container = /** @type {HTMLElement | null} */ (
+      leftPanel?.querySelector(".components-section")
+    );
     if (!container) return;
 
-    container.querySelectorAll("[data-component-tag]").forEach(
-      /** @param {any} row */ (row) => {
-        const tagName = row.dataset.componentTag;
-        if (!tagName) return;
-        const comp = componentRegistry.find(/** @param {any} c */ (c) => c.tagName === tagName);
-        if (!comp) return;
+    /** @type {NodeListOf<HTMLElement>} */ (
+      container.querySelectorAll("[data-component-tag]")
+    ).forEach((row) => {
+      const tagName = row.dataset.componentTag;
+      if (!tagName) return;
+      const comp = componentRegistry.find(
+        (/** @type {import("../files/components.js").ComponentEntry} */ c) => c.tagName === tagName,
+      );
+      if (!comp) return;
 
-        // Fill preview with live rendered component
-        const preview = row.querySelector(".element-card-preview");
-        if (preview && !preview.querySelector(tagName)) {
-          renderComponentPreview(comp).then((/** @type {any} */ el) => {
-            preview.textContent = "";
-            preview.appendChild(el);
-          });
-        }
+      // Fill preview with live rendered component
+      const preview = row.querySelector(".element-card-preview");
+      if (preview && !preview.querySelector(tagName)) {
+        renderComponentPreview(comp).then((/** @type {HTMLElement} */ el) => {
+          preview.textContent = "";
+          preview.appendChild(el);
+        });
+      }
 
-        const instanceDef = {
-          tagName: comp.tagName,
-          $props: comp.props
-            ? Object.fromEntries(
-                comp.props.map((/** @type {any} */ p) => [
+      const instanceDef = {
+        tagName: comp.tagName,
+        $props: comp.props
+          ? Object.fromEntries(
+              comp.props.map(
+                (/** @type {{ name: string; default?: unknown; [k: string]: unknown }} */ p) => [
                   p.name,
                   p.default !== undefined ? p.default : "",
-                ]),
-              )
-            : {},
-        };
-        const cleanup = draggable({
-          element: row,
-          getInitialData() {
-            return { type: "block", fragment: structuredClone(instanceDef) };
-          },
-        });
-        view.dndCleanups.push(cleanup);
-      },
-    );
+                ],
+              ),
+            )
+          : {},
+      };
+      const cleanup = draggable({
+        element: row,
+        getInitialData() {
+          return { type: "block", fragment: structuredClone(instanceDef) };
+        },
+      });
+      view.dndCleanups.push(cleanup);
+    });
   });
 }
 
 /** Register DnD on element (HTML block) rows */
 export function registerElementsDnD() {
   requestAnimationFrame(() => {
-    const container = /** @type {any} */ (leftPanel)?.querySelector(".panel-body");
+    const container = /** @type {HTMLElement | null} */ (leftPanel?.querySelector(".panel-body"));
     if (!container) return;
-    container.querySelectorAll("[data-block-tag]").forEach(
-      /** @param {any} row */ (row) => {
-        const tag = row.dataset.blockTag;
+    /** @type {NodeListOf<HTMLElement>} */ (container.querySelectorAll("[data-block-tag]")).forEach(
+      (row) => {
+        const tag = /** @type {string} */ (row.dataset.blockTag);
         const preview = row.querySelector(".element-card-preview");
         if (preview && !preview.firstChild) {
           const el = document.createElement(unsafeTags.has(tag) ? "span" : tag);
@@ -215,23 +240,23 @@ export function registerElementsDnD() {
 /**
  * Hide descendant rows of the dragged item so it appears collapsed during drag.
  *
- * @param {any} parentRow
- * @param {any} container
+ * @param {HTMLElement} parentRow
+ * @param {HTMLElement} container
  */
 function hideDescendantRows(parentRow, container) {
   const prefix = parentRow.dataset.path + "/";
   const rows = container.querySelectorAll(".layers-tree .layer-row");
   for (const r of rows) {
-    if (/** @type {any} */ (r).dataset.path?.startsWith(prefix)) {
-      /** @type {any} */ (r).style.display = "none";
+    if (/** @type {HTMLElement} */ (r).dataset.path?.startsWith(prefix)) {
+      /** @type {HTMLElement} */ (r).style.display = "none";
     }
   }
 }
 
 /**
- * @param {any} rowEl
- * @param {any} data
- * @param {any} container
+ * @param {HTMLElement} rowEl
+ * @param {Record<string, unknown>} data
+ * @param {HTMLElement} container
  */
 export function showLayerDropGap(rowEl, data, container) {
   const instruction = extractInstruction(data);
@@ -262,37 +287,39 @@ export function showLayerDropGap(rowEl, data, container) {
   const gap = view.layerDragSourceHeight;
 
   for (let i = 0; i < rows.length; i++) {
-    if (/** @type {any} */ (rows[i]).classList.contains("dragging")) continue;
+    if (/** @type {HTMLElement} */ (rows[i]).classList.contains("dragging")) continue;
     if (instruction.type === "reorder-above") {
-      /** @type {any} */ (rows[i]).style.transform = i >= targetIdx ? `translateY(${gap}px)` : "";
+      /** @type {HTMLElement} */ (rows[i]).style.transform =
+        i >= targetIdx ? `translateY(${gap}px)` : "";
     } else {
-      /** @type {any} */ (rows[i]).style.transform = i > targetIdx ? `translateY(${gap}px)` : "";
+      /** @type {HTMLElement} */ (rows[i]).style.transform =
+        i > targetIdx ? `translateY(${gap}px)` : "";
     }
   }
 }
 
-/** @param {any} container */
+/** @param {HTMLElement} container */
 export function clearLayerDropGap(container) {
   if (view._currentDropTargetRow) {
     view._currentDropTargetRow.classList.remove("drop-target");
     view._currentDropTargetRow = null;
   }
   const rows = container.querySelectorAll(".layers-tree .layer-row");
-  for (const r of rows) /** @type {any} */ (r).style.transform = "";
+  for (const r of rows) /** @type {HTMLElement} */ (r).style.transform = "";
 }
 
 /**
  * Apply a DnD instruction to the state
  *
- * @param {any} instruction
- * @param {any} srcData
- * @param {any} targetPath
+ * @param {{ type: string }} instruction
+ * @param {Record<string, unknown>} srcData
+ * @param {JxPath} targetPath
  */
 export function applyDropInstruction(instruction, srcData, targetPath) {
-  const document = activeTab.value?.doc.document;
+  const doc = /** @type {JxMutableNode} */ (activeTab.value?.doc.document);
   if (srcData.type === "tree-node") {
-    const fromPath = srcData.path;
-    const targetParent = /** @type {any} */ (parentElementPath(targetPath));
+    const fromPath = /** @type {JxPath} */ (srcData.path);
+    const targetParent = /** @type {JxPath} */ (parentElementPath(targetPath));
     const targetIdx = /** @type {number} */ (childIndex(targetPath));
 
     switch (instruction.type) {
@@ -305,64 +332,89 @@ export function applyDropInstruction(instruction, srcData, targetPath) {
         );
         break;
       case "make-child": {
-        const target = getNodeAtPath(document, targetPath);
+        const target = getNodeAtPath(doc, targetPath);
         const len = target?.children?.length || 0;
         transactDoc(activeTab.value, (t) => mutateMoveNode(t, fromPath, targetPath, len));
         break;
       }
     }
   } else if (srcData.type === "block") {
-    const targetParent = /** @type {any} */ (parentElementPath(targetPath));
+    const targetParent = /** @type {JxPath} */ (parentElementPath(targetPath));
     const targetIdx = /** @type {number} */ (childIndex(targetPath));
 
     switch (instruction.type) {
       case "reorder-above":
         transactDoc(activeTab.value, (t) =>
-          mutateInsertNode(t, targetParent, targetIdx, structuredClone(srcData.fragment)),
+          mutateInsertNode(
+            t,
+            targetParent,
+            targetIdx,
+            structuredClone(/** @type {JxMutableNode} */ (srcData.fragment)),
+          ),
         );
         break;
       case "reorder-below":
         transactDoc(activeTab.value, (t) =>
-          mutateInsertNode(t, targetParent, targetIdx + 1, structuredClone(srcData.fragment)),
+          mutateInsertNode(
+            t,
+            targetParent,
+            targetIdx + 1,
+            structuredClone(/** @type {JxMutableNode} */ (srcData.fragment)),
+          ),
         );
         break;
       case "make-child": {
-        const target = getNodeAtPath(document, targetPath);
+        const target = getNodeAtPath(doc, targetPath);
         const len = target?.children?.length || 0;
         transactDoc(activeTab.value, (t) =>
-          mutateInsertNode(t, targetPath, len, structuredClone(srcData.fragment)),
+          mutateInsertNode(
+            t,
+            targetPath,
+            len,
+            structuredClone(/** @type {JxMutableNode} */ (srcData.fragment)),
+          ),
         );
         break;
       }
     }
 
     // Auto-import to $elements if the dropped block is a custom component
-    const tag = srcData.fragment?.tagName;
+    const fragment = /** @type {JxMutableNode | undefined} */ (srcData.fragment);
+    const tag = fragment?.tagName;
     if (tag && tag.includes("-")) {
-      const comp = componentRegistry.find((/** @type {any} */ c) => c.tagName === tag);
+      const comp = componentRegistry.find(
+        (/** @type {import("../files/components.js").ComponentEntry} */ c) => c.tagName === tag,
+      );
       if (comp) {
         const tab = activeTab.value;
         const elements = tab?.doc.document?.$elements || [];
         if (comp.source === "npm") {
           const specifier = comp.modulePath ? `${comp.package}/${comp.modulePath}` : comp.package;
+          if (!specifier) return;
           const alreadyImported = elements.some(
-            (/** @type {any} */ e) => e === specifier || e === comp.package,
+            (/** @type {JxMutableNode | string | { $ref: string }} */ e) =>
+              e === specifier || e === comp.package,
           );
           if (!alreadyImported) {
-            transact(activeTab.value, (/** @type {any} */ doc) => {
+            transact(activeTab.value, (/** @type {JxMutableNode} */ doc) => {
               if (!doc.$elements) doc.$elements = [];
               doc.$elements.push(specifier);
             });
           }
         } else {
           const alreadyImported = elements.some(
-            (/** @type {any} */ e) =>
-              e.$ref &&
-              (e.$ref === `./${comp.path}` || e.$ref.endsWith(comp.path.split("/").pop())),
+            (/** @type {JxMutableNode | string | { $ref: string }} */ e) => {
+              const ref = typeof e === "object" && e !== null ? e.$ref : undefined;
+              return (
+                ref &&
+                (ref === `./${comp.path}` ||
+                  ref.endsWith(/** @type {string} */ (comp.path.split("/").pop())))
+              );
+            },
           );
           if (!alreadyImported) {
             const relPath = computeRelativePath(tab?.documentPath, comp.path);
-            transact(activeTab.value, (/** @type {any} */ doc) => {
+            transact(activeTab.value, (/** @type {JxMutableNode} */ doc) => {
               if (!doc.$elements) doc.$elements = [];
               doc.$elements.push({ $ref: relPath });
             });

package/src/panels/editors.js

@@ -3,6 +3,8 @@
  * completion provider for state scope variables.
  */
 
+/** @typedef {import("../services/code-services.js").OxLintDiagnostic} OxLintDiagnostic */
+
 import * as monaco from "monaco-editor/esm/vs/editor/editor.api.js";
 import { html, render as litRender, nothing } from "lit-html";
 import { ref } from "lit-html/directives/ref.js";
@@ -13,12 +15,15 @@ import { transactDoc, mutateUpdateDef, mutateUpdateProperty } from "../tabs/tran
 import { view } from "../view.js";
 import { codeService, setLintMarkers, getFunctionArgs } from "../services/code-services.js";
 
-function getFunctionBody(/** @type {any} */ editing) {
+/** @typedef {{ type: "def"; defName: string } | { type: "event"; path: JxPath; eventKey: string }} EditingTarget */
+
+/** @param {EditingTarget | null | undefined} editing */
+function getFunctionBody(editing) {
   const document = activeTab.value?.doc.document;
-  if (editing.type === "def") {
+  if (editing?.type === "def") {
     return document?.state?.[editing.defName]?.body || "";
-  } else if (editing.type === "event") {
-    const node = getNodeAtPath(document, editing.path);
+  } else if (editing?.type === "event") {
+    const node = getNodeAtPath(/** @type {JxMutableNode} */ (document), editing.path);
     return node?.[editing.eventKey]?.body || "";
   }
   return "";
@@ -26,7 +31,9 @@ function getFunctionBody(/** @type {any} */ editing) {
 
 /** @param {() => void} closeFunctionEditor */
 export function renderFunctionEditor(closeFunctionEditor) {
-  const editing = activeTab.value?.session.ui.editingFunction;
+  const editing = /** @type {EditingTarget | null | undefined} */ (
+    activeTab.value?.session.ui.editingFunction
+  );
 
   // If editor already exists and matches current target, just sync value
   if (view.functionEditor && view.functionEditor._editingTarget === JSON.stringify(editing)) {
@@ -66,7 +73,7 @@ export function renderFunctionEditor(closeFunctionEditor) {
 
   const tab = activeTab.value;
   const docName = tab?.documentPath?.split("/").pop() || tab?.doc.document?.tagName || "document";
-  const ed = /** @type {any} */ (editing);
+  const ed = /** @type {EditingTarget} */ (editing);
   const funcLabel = ed.type === "def" ? `ƒ ${ed.defName}` : `ƒ ${ed.eventKey}`;
 
   // Editor container
@@ -94,22 +101,29 @@ export function renderFunctionEditor(closeFunctionEditor) {
   );
 
   const body = getFunctionBody(editing);
-  const args = getFunctionArgs(editing, activeTab.value?.doc.document);
-
-  view.functionEditor = monaco.editor.create(/** @type {any} */ (editorContainer), {
-    value: body,
-    language: "javascript",
-    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,
-  });
+  const args = getFunctionArgs(
+    /** @type {EditingTarget} */ (editing),
+    activeTab.value?.doc.document,
+  );
+
+  view.functionEditor = monaco.editor.create(
+    /** @type {HTMLElement} */ (/** @type {unknown} */ (editorContainer)),
+    {
+      value: body,
+      language: "javascript",
+      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.functionEditor._editingTarget = JSON.stringify(editing);
+  const editor = view.functionEditor;
 
   // Format on open — show pretty-printed code, then run initial lint
   codeService("format", { code: body, args }).then((result) => {
@@ -120,29 +134,32 @@ export function renderFunctionEditor(closeFunctionEditor) {
   });
   codeService("lint", { code: body, args }).then((result) => {
     if (result?.diagnostics && view.functionEditor)
-      setLintMarkers(view.functionEditor, result.diagnostics);
+      setLintMarkers(view.functionEditor, /** @type {OxLintDiagnostic[]} */ (result.diagnostics));
   });
 
   // Debounced sync back to state + lint on edit
-  /** @type {any} */
+  /** @type {ReturnType<typeof setTimeout> | undefined} */
   let syncDebounce;
-  /** @type {any} */
+  /** @type {ReturnType<typeof setTimeout> | undefined} */
   let lintDebounce;
   let lintGen = 0;
-  view.functionEditor.onDidChangeModelContent(() => {
-    if (view.functionEditor._ignoreNextChange) {
-      view.functionEditor._ignoreNextChange = false;
+  editor.onDidChangeModelContent(() => {
+    if (editor._ignoreNextChange) {
+      editor._ignoreNextChange = false;
       return;
     }
 
     clearTimeout(syncDebounce);
     syncDebounce = setTimeout(() => {
-      const newBody = view.functionEditor.getValue();
-      const ed = /** @type {any} */ (editing);
+      const newBody = editor.getValue();
+      const ed = /** @type {EditingTarget} */ (editing);
       if (ed.type === "def") {
         transactDoc(activeTab.value, (t) => mutateUpdateDef(t, ed.defName, { body: newBody }));
       } else if (ed.type === "event") {
-        const node = getNodeAtPath(activeTab.value?.doc.document, ed.path);
+        const node = getNodeAtPath(
+          /** @type {JxMutableNode} */ (activeTab.value?.doc.document),
+          ed.path,
+        );
         const current = node?.[ed.eventKey] || {};
         transactDoc(activeTab.value, (t) =>
           mutateUpdateProperty(t, ed.path, ed.eventKey, {
@@ -158,11 +175,14 @@ export function renderFunctionEditor(closeFunctionEditor) {
     clearTimeout(lintDebounce);
     lintDebounce = setTimeout(() => {
       const gen = ++lintGen;
-      const currentCode = view.functionEditor.getValue();
+      const currentCode = editor.getValue();
       codeService("lint", { code: currentCode, args }).then((result) => {
         if (gen !== lintGen) return;
         if (result?.diagnostics && view.functionEditor)
-          setLintMarkers(view.functionEditor, result.diagnostics);
+          setLintMarkers(
+            view.functionEditor,
+            /** @type {OxLintDiagnostic[]} */ (result.diagnostics),
+          );
       });
     }, 750);
   });
@@ -187,11 +207,11 @@ export function registerFunctionCompletions() {
       const suggestions = Object.entries(defs).map(([key, def]) => {
         let kind = monaco.languages.CompletionItemKind.Variable;
         if (
-          /** @type {any} */ (def)?.$prototype === "Function" ||
-          /** @type {any} */ (def)?.$handler
+          /** @type {JxPrototypeDef} */ (def)?.$prototype === "Function" ||
+          /** @type {{ $handler?: unknown }} */ (def)?.$handler
         )
           kind = monaco.languages.CompletionItemKind.Function;
-        else if (/** @type {any} */ (def)?.$prototype)
+        else if (/** @type {JxPrototypeDef} */ (def)?.$prototype)
           kind = monaco.languages.CompletionItemKind.Property;
         return {
           label: `state.${key}`,