@jxsuite/studio 0.28.2 → 0.28.4

package/src/panels/imports-panel.ts

@@ -46,14 +46,22 @@ function componentSpecifier(comp: ComponentEntry) {
  * @returns {boolean}
  */
 function isComponentEnabled(comp: ComponentEntry, elements: ElementsEntry[]) {
-  if (!elements?.length) return false;
+  if (!elements?.length) {
+    return false;
+  }
   const specifier = componentSpecifier(comp);
   for (const entry of elements) {
-    if (typeof entry !== "string") continue;
+    if (typeof entry !== "string") {
+      continue;
+    }
     // Cherry-picked subpath match
-    if (entry === specifier) return true;
+    if (entry === specifier) {
+      return true;
+    }
     // Legacy full-package match
-    if (entry === comp.package) return true;
+    if (entry === comp.package) {
+      return true;
+    }
   }
   return false;
 }
@@ -64,10 +72,14 @@ function isComponentEnabled(comp: ComponentEntry, elements: ElementsEntry[]) {
  * @returns {Map<string, ComponentEntry[]>}
  */
 function groupByPackage() {
-  const groups: Map<string, ComponentEntry[]> = new Map();
+  const groups = new Map<string, ComponentEntry[]>();
   for (const comp of componentRegistry) {
-    if (comp.source !== "npm" || !comp.package || !comp.modulePath) continue;
-    if (!groups.has(comp.package)) groups.set(comp.package, []);
+    if (comp.source !== "npm" || !comp.package || !comp.modulePath) {
+      continue;
+    }
+    if (!groups.has(comp.package)) {
+      groups.set(comp.package, []);
+    }
     groups.get(comp.package)?.push(comp);
   }
   return groups;
@@ -90,10 +102,10 @@ export function renderImportsTemplate({
   }
 
   return renderDocumentLevelImports({
-    renderLeftPanel,
-    documentPath,
-    documentElements,
     applyMutation,
+    documentElements,
+    documentPath,
+    renderLeftPanel,
   });
 }
 
@@ -155,7 +167,9 @@ function renderSiteLevelImports(renderLeftPanel: () => void) {
               const pathField = form?.querySelector(".import-add-path") as HTMLInputElement;
               const name = nameField?.value?.trim();
               const path = pathField?.value?.trim();
-              if (!name || !path) return;
+              if (!name || !path) {
+                return;
+              }
               nameField.value = "";
               pathField.value = "";
               const updated = { ...siteImports, [name]: path };
@@ -183,13 +197,15 @@ function renderSiteLevelImports(renderLeftPanel: () => void) {
                     confirmLabel: "Remove",
                     destructive: true,
                   });
-                  if (!confirmed) return;
+                  if (!confirmed) {
+                    return;
+                  }
                   try {
                     const platform = getPlatform();
                     await platform.removePackage(pkg);
                     // Also remove all cherry-picked elements for this package
                     const updatedElements = siteElements.filter(
-                      (e: ElementsEntry) => typeof e !== "string" || !e.startsWith(pkg + "/"),
+                      (e: ElementsEntry) => typeof e !== "string" || !e.startsWith(`${pkg}/`),
                     );
                     const { loadComponentRegistry } = await import("../files/components.js");
                     await loadComponentRegistry();
@@ -197,8 +213,8 @@ function renderSiteLevelImports(renderLeftPanel: () => void) {
                       $elements: updatedElements as (string | JxElement)[],
                     });
                     renderLeftPanel();
-                  } catch (e) {
-                    console.error("Failed to remove package:", e);
+                  } catch (error) {
+                    console.error("Failed to remove package:", error);
                   }
                 }}
               >
@@ -219,7 +235,9 @@ function renderSiteLevelImports(renderLeftPanel: () => void) {
                         // Remove legacy full-package import if present
                         updated = updated.filter((el: ElementsEntry) => el !== pkg);
                         if ((e.target as HTMLInputElement).checked) {
-                          if (!updated.includes(specifier)) updated.push(specifier);
+                          if (!updated.includes(specifier)) {
+                            updated.push(specifier);
+                          }
                         } else {
                           updated = updated.filter((el: ElementsEntry) => el !== specifier);
                         }
@@ -250,9 +268,13 @@ function renderSiteLevelImports(renderLeftPanel: () => void) {
             size="s"
             style="flex:1"
             @keydown=${async (e: KeyboardEvent) => {
-              if (e.key !== "Enter") return;
+              if (e.key !== "Enter") {
+                return;
+              }
               const name = (e.target as HTMLInputElement).value?.trim();
-              if (!name) return;
+              if (!name) {
+                return;
+              }
               (e.target as HTMLInputElement).value = "";
               try {
                 const platform = getPlatform();
@@ -260,8 +282,8 @@ function renderSiteLevelImports(renderLeftPanel: () => void) {
                 const { loadComponentRegistry } = await import("../files/components.js");
                 await loadComponentRegistry();
                 renderLeftPanel();
-              } catch (err) {
-                console.error("Failed to add package:", err);
+              } catch (error) {
+                console.error("Failed to add package:", error);
               }
             }}
           ></sp-textfield>
@@ -274,7 +296,9 @@ function renderSiteLevelImports(renderLeftPanel: () => void) {
                 .closest(".import-add-form")
                 ?.querySelector("sp-textfield");
               const name = (input as HTMLInputElement | null)?.value?.trim();
-              if (!name) return;
+              if (!name) {
+                return;
+              }
               (input as HTMLInputElement).value = "";
               try {
                 const platform = getPlatform();
@@ -282,8 +306,8 @@ function renderSiteLevelImports(renderLeftPanel: () => void) {
                 const { loadComponentRegistry } = await import("../files/components.js");
                 await loadComponentRegistry();
                 renderLeftPanel();
-              } catch (err) {
-                console.error("Failed to add package:", err);
+              } catch (error) {
+                console.error("Failed to add package:", error);
               }
             }}
           >
@@ -313,7 +337,10 @@ function renderDocumentLevelImports({
   const importedRefs = new Set(refEntries.map((e: ElementsEntry) => (e as { $ref: string }).$ref));
   const availableComponents = componentRegistry.filter(
     (c: ComponentEntry) =>
-      c.source !== "npm" && !importedRefs.has(`./${c.path}`) && !importedRefs.has(c.path),
+      c.source !== "npm" &&
+      c.path != null &&
+      !importedRefs.has(`./${c.path}`) &&
+      !importedRefs.has(c.path),
   );
 
   const packageGroups = groupByPackage();
@@ -368,13 +395,19 @@ function renderDocumentLevelImports({
                   class="import-picker"
                   @change=${(e: Event) => {
                     const tag = (e.target as HTMLInputElement).value;
-                    if (!tag) return;
+                    if (!tag) {
+                      return;
+                    }
                     (e.target as HTMLInputElement).value = "";
                     const comp = componentRegistry.find((c: ComponentEntry) => c.tagName === tag);
-                    if (!comp) return;
+                    if (!comp?.path) {
+                      return;
+                    }
                     const relPath = computeRelativePath(documentPath, comp.path);
                     applyMutation((doc: JxMutableNode) => {
-                      if (!doc.$elements) doc.$elements = [];
+                      if (!doc.$elements) {
+                        doc.$elements = [];
+                      }
                       doc.$elements.push({ $ref: relPath });
                     });
                     renderLeftPanel();
@@ -408,11 +441,15 @@ function renderDocumentLevelImports({
                       .checked=${enabled}
                       @change=${(e: Event) => {
                         applyMutation((doc: JxMutableNode) => {
-                          if (!doc.$elements) doc.$elements = [];
+                          if (!doc.$elements) {
+                            doc.$elements = [];
+                          }
                           // Remove legacy full-package import if present
                           doc.$elements = doc.$elements.filter((el: ElementsEntry) => el !== pkg);
                           if ((e.target as HTMLInputElement).checked) {
-                            if (!doc.$elements.includes(specifier)) doc.$elements.push(specifier);
+                            if (!doc.$elements.includes(specifier)) {
+                              doc.$elements.push(specifier);
+                            }
                           } else {
                             doc.$elements = doc.$elements.filter(
                               (el: ElementsEntry) => el !== specifier,

package/src/panels/layers-panel.ts

@@ -8,28 +8,30 @@ import { html, nothing } from "lit-html";
 import { classMap } from "lit-html/directives/class-map.js";
 import { ifDefined } from "lit-html/directives/if-defined.js";
 import {
+  VOID_ELEMENTS,
+  childIndex,
+  childList,
   flattenTree,
   getNodeAtPath,
+  nodeLabel,
+  parentElementPath,
   pathKey,
   pathsEqual,
-  parentElementPath,
-  childIndex,
-  nodeLabel,
-  VOID_ELEMENTS,
 } from "../store";
 import { activeTab } from "../workspace/workspace";
 import type { JxPath } from "../state";
 import type { JxMutableNode } from "@jxsuite/schema/types";
 import {
-  transactDoc,
   mutateMoveNode,
   mutateRemoveNode,
   mutateUpdateProperty,
+  transactDoc,
 } from "../tabs/transact";
 import { view } from "../view";
 import { isInlineElement } from "../editor/inline-edit";
 import { showContextMenu } from "../editor/context-menu";
 import { panToElement } from "../canvas/canvas-utils";
+import type { TemplateResult } from "lit-html";
 
 /**
  * Start inline title editing on a layer row.
@@ -40,14 +42,22 @@ import { panToElement } from "../canvas/canvas-utils";
 export function startLayerTitleEdit(path: JxPath, rerender: () => void) {
   const key = pathKey(path);
   const row = document.querySelector(`.layer-row[data-path="${key}"]`);
-  if (!row) return;
+  if (!row) {
+    return;
+  }
   const label = row.querySelector(".layer-label") as HTMLElement | null;
-  if (!label) return;
+  if (!label) {
+    return;
+  }
 
   const tab = activeTab.value;
-  if (!tab) return;
+  if (!tab) {
+    return;
+  }
   const node = getNodeAtPath(tab.doc.document, path);
-  if (!node) return;
+  if (!node) {
+    return;
+  }
 
   label.style.display = "none";
   const input = document.createElement("input");
@@ -65,7 +75,9 @@ export function startLayerTitleEdit(path: JxPath, rerender: () => void) {
     label.style.display = "";
   };
   const commit = () => {
-    if (committed) return;
+    if (committed) {
+      return;
+    }
     committed = true;
     cleanup();
     const val = input.value.trim();
@@ -73,7 +85,9 @@ export function startLayerTitleEdit(path: JxPath, rerender: () => void) {
     rerender();
   };
   const cancel = () => {
-    if (committed) return;
+    if (committed) {
+      return;
+    }
     committed = true;
     cleanup();
     rerender();
@@ -101,13 +115,15 @@ export function renderLayersTemplate(ctx: {
 }) {
   const tab = activeTab.value;
 
-  for (const fn of view.dndCleanups) fn();
+  for (const fn of view.dndCleanups) {
+    fn();
+  }
   view.dndCleanups = [];
 
   const rows = flattenTree(tab!.doc.document);
-  const collapsed = view._layersCollapsed || (view._layersCollapsed = new Set());
+  const collapsed = (view._layersCollapsed ||= new Set());
 
-  const layerRows: import("lit-html").TemplateResult[] = [];
+  const layerRows: TemplateResult[] = [];
   for (const { node, path, depth, nodeType } of rows) {
     let hidden = false;
     for (let d = 1; d <= path.length; d++) {
@@ -117,12 +133,16 @@ export function renderLayersTemplate(ctx: {
         break;
       }
     }
-    if (hidden) continue;
+    if (hidden) {
+      continue;
+    }
 
-    if (tab?.doc.mode === "content" && path.length === 0) continue;
+    if (tab?.doc.mode === "content" && path.length === 0) {
+      continue;
+    }
 
     if (nodeType === "text") {
-      const textPreview = String(node).length > 40 ? String(node).slice(0, 40) + "…" : String(node);
+      const textPreview = String(node).length > 40 ? `${String(node).slice(0, 40)}…` : String(node);
       layerRows.push(html`
         <div
           class="layer-row"
@@ -136,13 +156,17 @@ export function renderLayersTemplate(ctx: {
     }
 
     // After text-node skip, node is guaranteed to be JxMutableNode (not a primitive)
-    if (typeof node !== "object" || node === null) continue;
+    if (typeof node !== "object" || node === null) {
+      continue;
+    }
     const jxNode: JxMutableNode = node as JxMutableNode;
 
     if (path.length >= 2 && nodeType === "element") {
       const pPath = parentElementPath(path);
       const parentNode = pPath ? getNodeAtPath(tab!.doc.document, pPath) : null;
-      if (parentNode && isInlineElement(jxNode, parentNode)) continue;
+      if (parentNode && isInlineElement(jxNode, parentNode)) {
+        continue;
+      }
     }
 
     const key = pathKey(path);
@@ -173,8 +197,8 @@ export function renderLayersTemplate(ctx: {
       badgeTitle = "Repeater (mapped array)";
     } else if (nodeType === "case" || nodeType === "case-ref") {
       badgeClass = "layer-tag case-tag";
-      badgeText = path[path.length - 1];
-      badgeTitle = `$switch case: ${path[path.length - 1]}`;
+      badgeText = path.at(-1);
+      badgeTitle = `$switch case: ${path.at(-1)}`;
     } else if (jxNode.$switch) {
       badgeClass = "layer-tag switch-tag";
       badgeText = "⇄";
@@ -202,22 +226,33 @@ export function renderLayersTemplate(ctx: {
     const idx = isElement ? (childIndex(path) as number) : 0;
     const parentPath = isElement && !isRoot ? (parentElementPath(path) as JxPath) : null;
     const parentNode = parentPath ? getNodeAtPath(tab!.doc.document, parentPath) : null;
-    const siblingCount = parentNode?.children?.length || 0;
+    const siblingCount = childList(parentNode).length;
     const canMoveUp = isElement && !isRoot && idx > 0;
     const canMoveDown = isElement && !isRoot && idx < siblingCount - 1;
-    const prevSibling = canMoveUp && parentNode ? parentNode.children?.[idx - 1] : null;
+    const prevSibling = canMoveUp && parentNode ? childList(parentNode)[idx - 1] : null;
     const prevIsContainer = (() => {
-      if (!prevSibling || typeof prevSibling !== "object") return false;
-      if (VOID_ELEMENTS.has((prevSibling.tagName || "div").toLowerCase())) return false;
+      if (!prevSibling || typeof prevSibling !== "object") {
+        return false;
+      }
+      if (VOID_ELEMENTS.has((prevSibling.tagName || "div").toLowerCase())) {
+        return false;
+      }
       const ch = prevSibling.children;
-      if (!ch) return false;
+      if (!ch) {
+        return false;
+      }
       if (
         typeof ch === "object" &&
         (ch as unknown as Record<string, unknown>).$prototype === "Array"
-      )
+      ) {
         return true;
-      if (!Array.isArray(ch)) return false;
-      if (ch.length === 0) return true;
+      }
+      if (!Array.isArray(ch)) {
+        return false;
+      }
+      if (ch.length === 0) {
+        return true;
+      }
       return ch.some(
         (c) => typeof c === "object" && c !== null && !isInlineElement(c, prevSibling),
       );
@@ -227,7 +262,7 @@ export function renderLayersTemplate(ctx: {
       isElement && parentPath && parentPath.length >= 2
         ? (parentElementPath(parentPath) as JxPath)
         : null;
-    const canMoveOut = isElement && !isRoot && !!grandparentPath;
+    const canMoveOut = isElement && !isRoot && Boolean(grandparentPath);
 
     layerRows.push(html`
       <div
@@ -314,7 +349,7 @@ export function renderLayersTemplate(ctx: {
                         const pp = parentPath as JxPath;
                         const prevPath = [...pp, idx - 1];
                         const prev = getNodeAtPath(activeTab.value!.doc.document, prevPath);
-                        const len = prev?.children?.length || 0;
+                        const len = childList(prev).length;
                         transactDoc(activeTab.value!, (t) =>
                           mutateMoveNode(t, path, prevPath, len),
                         );
@@ -366,14 +401,23 @@ export function renderLayersTemplate(ctx: {
         class="layers-tree"
         @click=${(e: MouseEvent) => {
           const toggle = (e.target as HTMLElement).closest(".layer-toggle");
-          if (!toggle) return;
+          if (!toggle) {
+            return;
+          }
           e.stopPropagation();
           const row = toggle.closest(".layer-row");
-          if (!row) return;
+          if (!row) {
+            return;
+          }
           const key = (row as HTMLElement).dataset.path;
-          if (!key) return;
-          if (collapsed.has(key)) collapsed.delete(key);
-          else collapsed.add(key);
+          if (!key) {
+            return;
+          }
+          if (collapsed.has(key)) {
+            collapsed.delete(key);
+          } else {
+            collapsed.add(key);
+          }
           ctx.rerender();
         }}
       >