@jxsuite/studio 0.28.4 → 0.29.0

package/src/panels/canvas-dnd.ts

@@ -20,7 +20,7 @@ import type { CanvasPanel } from "../types";
 
 import type { JxPath } from "../state";
 
-export type { CanvasPanel };
+export type { CanvasPanel } from "../types";
 
 interface DropInstruction {
   type: "reorder-above" | "reorder-below" | "make-child";
@@ -125,34 +125,63 @@ export function registerPanelDnD(panel: CanvasPanel) {
   });
   view.canvasDndCleanups.push(monitorCleanup);
 
-  const document = activeTab.value?.doc.document;
   for (const el of allEls) {
-    const elPath = elToPath.get(el);
-    if (!elPath) {
+    if (!elToPath.get(el)) {
       continue;
     }
+    registerElementDropTarget(el);
+  }
+}
 
-    const node = getNodeAtPath(document!, elPath);
-    const tag = (node?.tagName || "div").toLowerCase();
-    const hasElementChildren =
-      Array.isArray(node?.children) &&
-      node.children.some((c: unknown) => c != null && typeof c === "object");
-    const isLeaf = VOID_ELEMENTS.has(tag) || !hasElementChildren;
+/**
+ * Register one canvas element as a drop target. Path and leaf-ness are read live from elToPath and
+ * the current document at drag time, so surgical patches that remap sibling paths never leave stale
+ * closures behind.
+ *
+ * @param {Element} el
+ */
+function registerElementDropTarget(el: Element) {
+  const cleanup = dropTargetForElements({
+    canDrop({ source }) {
+      const elPath = elToPath.get(el);
+      if (!elPath) {
+        return false;
+      }
+      const srcPath = source.data.path as JxPath | undefined;
+      if (srcPath && isAncestor(srcPath, elPath)) {
+        return false;
+      }
+      return true;
+    },
+    element: /** @type {HTMLElement} */ el,
+    getData() {
+      const elPath = elToPath.get(el) ?? [];
+      const document = activeTab.value?.doc.document;
+      const node = document ? getNodeAtPath(document, elPath) : undefined;
+      const tag = (node?.tagName || "div").toLowerCase();
+      const hasElementChildren =
+        Array.isArray(node?.children) &&
+        node.children.some((c: unknown) => c != null && typeof c === "object");
+      return { _isVoid: VOID_ELEMENTS.has(tag) || !hasElementChildren, path: elPath };
+    },
+  });
+  view.canvasDndCleanups.push(cleanup);
+}
 
-    const cleanup = dropTargetForElements({
-      canDrop({ source }) {
-        const srcPath = source.data.path as JxPath | undefined;
-        if (srcPath && isAncestor(srcPath, elPath)) {
-          return false;
-        }
-        return true;
-      },
-      element: /** @type {HTMLElement} */ el,
-      getData() {
-        return { _isVoid: isLeaf, path: elPath };
-      },
-    });
-    view.canvasDndCleanups.push(cleanup);
+/**
+ * Register drop targets for a freshly patched-in subtree (root plus descendants). Cleanups join
+ * view.canvasDndCleanups and are released by the next full render like all canvas DnD handlers.
+ *
+ * @param {HTMLElement} rootEl
+ */
+export function registerSubtreeDnD(rootEl: HTMLElement) {
+  if (elToPath.get(rootEl)) {
+    registerElementDropTarget(rootEl);
+  }
+  for (const el of rootEl.querySelectorAll("*")) {
+    if (elToPath.get(el)) {
+      registerElementDropTarget(el);
+    }
   }
 }
 
@@ -229,7 +258,7 @@ function nearestChildEdge(children: HTMLElement[], cursorY: number, parentPath:
   let closestIdx = children.length - 1;
 
   for (let i = 0; i < children.length; i++) {
-    const rect = children[i].getBoundingClientRect();
+    const rect = children[i]!.getBoundingClientRect();
     const topDist = Math.abs(cursorY - rect.top);
     const bottomDist = Math.abs(cursorY - rect.bottom);
 
@@ -248,7 +277,7 @@ function nearestChildEdge(children: HTMLElement[], cursorY: number, parentPath:
   const childPath = [...parentPath, "children", closestIdx];
   return {
     instruction,
-    referenceEl: children[closestIdx],
+    referenceEl: children[closestIdx]!,
     targetPath: childPath,
   };
 }

package/src/panels/data-explorer.ts

@@ -9,7 +9,7 @@ import type { TemplateResult } from "lit-html";
 const expandedDataKeys = new Set();
 
 /** Unwrap a Vue ref (has .value and .__v_isRef) to get the underlying value. */
-function unwrapSignal(value: unknown) {
+export function unwrapSignal(value: unknown) {
   if (value && typeof value === "object" && (value as Record<string, unknown>).__v_isRef) {
     return (value as Record<string, unknown>).value;
   }
@@ -17,7 +17,7 @@ function unwrapSignal(value: unknown) {
 }
 
 /** Type label for a signal value in the data explorer. */
-function dataTypeLabel(value: unknown) {
+export function dataTypeLabel(value: unknown) {
   const v = unwrapSignal(value);
   if (v === null) {
     return "null";
@@ -164,7 +164,9 @@ export function renderDataTreeTemplate(
           ><span class="data-value data-${item === null ? "null" : typeof item}">${valText}</span>
         </div>`;
       }
-      const label = Array.isArray(item) ? `Array(${item.length})` : `{${Object.keys(item).length}}`;
+      const label = Array.isArray(item)
+        ? `Array(${item.length})`
+        : `{${Object.keys(item as object).length}}`;
       return html`
         <div class="data-branch" style="padding-left:${indent}">
           <span class="data-key">[${i}] </span

package/src/panels/dnd.ts

@@ -27,7 +27,11 @@ import {
 import { mutateInsertNode, mutateMoveNode, transact, transactDoc } from "../tabs/transact";
 import { activeTab } from "../workspace/workspace";
 import { view } from "../view";
-import { componentRegistry, computeRelativePath } from "../files/components";
+import {
+  buildComponentInstance,
+  componentRegistry,
+  computeRelativePath,
+} from "../files/components";
 import { renderComponentPreview } from "./stylebook-panel";
 import { defaultDef, unsafeTags } from "./shared";
 import type { JxPath } from "../state";
@@ -205,25 +209,13 @@ export function registerComponentsDnD() {
       // Fill preview with live rendered component
       const preview = row.querySelector(".element-card-preview");
       if (preview && !preview.querySelector(tagName)) {
-        renderComponentPreview(comp).then((el: HTMLElement) => {
+        void renderComponentPreview(comp).then((el: HTMLElement) => {
           preview.textContent = "";
           preview.append(el);
         });
       }
 
-      const instanceDef = {
-        $props: comp.props
-          ? Object.fromEntries(
-              comp.props.map(
-                (/** @type {{ name: string; default?: unknown; [k: string]: unknown }} */ p) => [
-                  p.name,
-                  p.default !== undefined ? p.default : "",
-                ],
-              ),
-            )
-          : {},
-        tagName: comp.tagName,
-      };
+      const instanceDef = buildComponentInstance(comp);
       const cleanup = draggable({
         element: row,
         getInitialData() {
@@ -336,6 +328,11 @@ export function clearLayerDropGap(container: HTMLElement) {
   const rows = container.querySelectorAll(".layers-tree .layer-row");
   for (const r of rows) {
     (r as HTMLElement).style.transform = "";
+    // Also clear `display:none` left by hideDescendantRows. The `.layer-row` div has no `style`
+    // Lit binding and rows aren't keyed, so lit reuses these DOM nodes positionally on the
+    // Post-drop re-render — a stale `display:none` would otherwise hide whichever row lands on the
+    // Reused node (e.g. a sibling of the moved subtree).
+    (r as HTMLElement).style.display = "";
   }
 }
 

package/src/panels/editors.ts

@@ -38,8 +38,7 @@ function getFunctionBody(editing: EditingTarget | null | undefined) {
   return "";
 }
 
-/** @param {() => void} closeFunctionEditor */
-export function renderFunctionEditor(closeFunctionEditor: () => void) {
+export function renderFunctionEditor() {
   const editing = activeTab.value?.session.ui.editingFunction as EditingTarget | null | undefined;
 
   // If editor already exists and matches current target, just sync value
@@ -79,27 +78,10 @@ export function renderFunctionEditor(closeFunctionEditor: () => void) {
   canvasWrap.style.flexDirection = "column";
   canvasWrap.style.alignItems = "stretch";
 
-  // Toolbar breadcrumb handles context display — re-render it
-  renderOnly("toolbar");
-
-  const tab = activeTab.value;
-  const docName = tab?.documentPath?.split("/").pop() || tab?.doc.document?.tagName || "document";
-  const ed = editing as EditingTarget;
-  const funcLabel = ed.type === "def" ? `ƒ ${ed.defName}` : `ƒ ${ed.eventKey}`;
-
-  // Editor container
+  // The tab bar renders the Back button + breadcrumb context for the function editor.
   let editorContainer: HTMLDivElement | null = null;
   litRender(
     html`<div class="source-wrap">
-      <div class="source-toolbar">
-        <sp-action-button size="s" @click=${closeFunctionEditor}>
-          <sp-icon-back slot="icon"></sp-icon-back>
-          Back
-        </sp-action-button>
-        <span class="breadcrumb-item">${docName}</span>
-        <span class="breadcrumb-sep"> › </span>
-        <span class="breadcrumb-item current">${funcLabel}</span>
-      </div>
       <div
         class="source-editor"
         ${ref((el) => {
@@ -135,13 +117,13 @@ export function renderFunctionEditor(closeFunctionEditor: () => void) {
   const editor = view.functionEditor;
 
   // Format on open — show pretty-printed code, then run initial lint
-  codeService("format", { args, code: body }).then((result) => {
+  void codeService("format", { args, code: body }).then((result) => {
     if (result?.code != null && view.functionEditor) {
       view.functionEditor._ignoreNextChange = true;
       view.functionEditor.setValue(result.code);
     }
   });
-  codeService("lint", { args, code: body }).then((result) => {
+  void codeService("lint", { args, code: body }).then((result) => {
     if (result?.diagnostics && view.functionEditor) {
       setLintMarkers(view.functionEditor, result.diagnostics as OxLintDiagnostic[]);
     }
@@ -183,7 +165,7 @@ export function renderFunctionEditor(closeFunctionEditor: () => void) {
     lintDebounce = setTimeout(() => {
       const gen = (lintGen += 1);
       const currentCode = editor.getValue();
-      codeService("lint", { args, code: currentCode }).then((result) => {
+      void codeService("lint", { args, code: currentCode }).then((result) => {
         if (gen !== lintGen) {
           return;
         }

package/src/panels/elements-panel.ts

@@ -7,7 +7,7 @@ import { activeTab } from "../workspace/workspace";
 import { mutateInsertNode, transactDoc } from "../tabs/transact";
 import { view } from "../view";
 import { getEffectiveElements } from "../site-context";
-import { componentRegistry } from "../files/components";
+import { buildComponentInstance, componentRegistry } from "../files/components";
 
 import type { ComponentEntry } from "../files/components";
 import type { JxElement, JxMutableNode } from "@jxsuite/schema/types";
@@ -134,17 +134,7 @@ export function renderElementsTemplate(ctx: {
                       const parentPath = t?.session.selection || [];
                       const parent = getNodeAtPath(t!.doc.document, parentPath);
                       const idx = childList(parent).length;
-                      const instanceDef = {
-                        $props: Object.fromEntries(
-                          (comp.props || []).map(
-                            (/** @type {{ name: string; default?: unknown }} */ p) => [
-                              p.name,
-                              p.default !== undefined ? p.default : "",
-                            ],
-                          ),
-                        ),
-                        tagName: comp.tagName,
-                      };
+                      const instanceDef = buildComponentInstance(comp);
                       transactDoc(t!, (tr) =>
                         mutateInsertNode(tr, parentPath, idx, structuredClone(instanceDef)),
                       );

package/src/panels/events-panel.ts

@@ -266,7 +266,7 @@ export function eventsSidebarTemplate(helpers: { isCustomElementDoc: () => boole
             if (functionDefs.length > 0) {
               transactDoc(activeTab.value, (t) =>
                 mutateUpdateProperty(t, selection, evName, {
-                  $ref: `#/state/${functionDefs[0][0]}`,
+                  $ref: `#/state/${functionDefs[0]![0]}`,
                 }),
               );
             } else {

package/src/panels/git-panel.ts

@@ -132,7 +132,7 @@ async function gitAction(action: string, body?: unknown) {
   updateUi("gitLoading", true);
   updateUi("gitError", null);
   try {
-    await plat[action](body);
+    await plat[action]!(body);
     await refreshGitStatus();
   } catch (error) {
     updateUi("gitError", errorMessage(error));
@@ -191,7 +191,7 @@ export function renderGitPanel(
   const loading = S.ui.gitLoading;
 
   if (!status && !loading) {
-    refreshGitStatus();
+    void refreshGitStatus();
     return html`<div class="git-panel">
       <div class="git-loading">Loading...</div>
     </div>`;
@@ -232,7 +232,7 @@ export function renderGitPanel(
   if (!_pollTimer) {
     _pollTimer = setInterval(() => {
       if (view.leftTab === "git" && !S.ui.gitLoading) {
-        refreshGitStatus();
+        void refreshGitStatus();
       }
     }, 30_000);
   }
@@ -417,7 +417,7 @@ export function renderGitPanel(
   const switchTab = (tab: string) => {
     _gitSubTab = tab;
     if (tab === "history" && !S.ui.gitLogEntries) {
-      fetchGitLog();
+      void fetchGitLog();
     }
     renderOnly("leftPanel");
   };
@@ -453,7 +453,7 @@ export function renderGitPanel(
         @keydown=${(e: KeyboardEvent) => {
           if (e.ctrlKey && e.key === "Enter") {
             e.preventDefault();
-            doCommit();
+            void doCommit();
           }
         }}
       ></sp-textfield>
@@ -489,7 +489,7 @@ export function renderGitPanel(
                   "hidden",
                   "",
                 );
-                doCommit();
+                void doCommit();
               }}
             >
               Commit (don't sync)

package/src/panels/head-panel.ts

@@ -334,7 +334,7 @@ export function renderHeadTemplate({
   let layoutSection: TemplateResult | symbol = nothing;
   if (isPage) {
     if (layoutEntries === null) {
-      loadLayoutEntries();
+      void loadLayoutEntries();
     } else {
       const currentLayout = doc.$layout;
       const defaultLayout = projectState?.projectConfig?.defaults?.layout;