@jxsuite/studio 0.28.2 → 0.28.4

package/src/canvas/canvas-utils.ts

@@ -5,16 +5,18 @@
  */
 
 import { html, render as litRender, nothing } from "lit-html";
+import type { CanvasPanel } from "../types";
 import { ref } from "lit-html/directives/ref.js";
 import { classMap } from "lit-html/directives/class-map.js";
 import { styleMap } from "lit-html/directives/style-map.js";
 import { ifDefined } from "lit-html/directives/if-defined.js";
 
-import { renderOnly, updateUi, canvasWrap, canvasPanels } from "../store";
+import { canvasPanels, canvasWrap, renderOnly, updateUi } from "../store";
 import { activeTab } from "../workspace/workspace";
 import { view } from "../view";
 import { getLayerSlot } from "../ui/layers";
-import { getActivePanel, findCanvasElement } from "./canvas-helpers";
+import { findCanvasElement, getActivePanel, panelMediaToActiveMedia } from "./canvas-helpers";
+import type { TemplateResult } from "lit-html";
 
 let _ctx: {
   getCanvasMode: () => string;
@@ -57,34 +59,28 @@ export function canvasPanelTemplate(
   label: string | null,
   fullWidth: boolean,
   width: number | null = null,
-) {
-  const panel: {
-    mediaName: string;
-    element: HTMLElement | null;
-    canvas: HTMLElement | null;
-    overlay: HTMLElement | null;
-    overlayClk: HTMLElement | null;
-    viewport: HTMLElement | null;
-    scrollContainer: HTMLElement | null;
-    dropLine: HTMLElement | null;
-    _width: number | null;
-  } = {
-    mediaName: mediaName || "",
-    element: null,
+): { tpl: TemplateResult; panel: CanvasPanel } {
+  // The DOM fields start null and are wired by the template's ref() directives,
+  // Which lit runs synchronously during render — before any consumer reads them.
+  const panel = {
+    _width: width || null,
     canvas: null,
+    dropLine: null,
+    element: null,
+    mediaName: mediaName || "",
     overlay: null,
     overlayClk: null,
-    viewport: null,
     scrollContainer: null,
-    dropLine: null,
-    _width: width || null,
-  };
+    viewport: null,
+  } as unknown as CanvasPanel;
   const tpl = html`
     <div
       class=${classMap({ "canvas-panel": true, "full-width": fullWidth })}
       data-media=${ifDefined(mediaName !== null ? mediaName : undefined)}
       ${ref((el) => {
-        if (el) panel.element = el as HTMLElement;
+        if (el) {
+          panel.element = el as HTMLElement;
+        }
       })}
     >
       ${label
@@ -92,7 +88,7 @@ export function canvasPanelTemplate(
             <div
               class="canvas-panel-header"
               @click=${() => {
-                updateUi("activeMedia", mediaName === "base" ? null : mediaName);
+                updateUi("activeMedia", panelMediaToActiveMedia(mediaName));
               }}
             >
               ${label}
@@ -103,45 +99,57 @@ export function canvasPanelTemplate(
         class="canvas-panel-viewport"
         style=${styleMap({ width: width && !fullWidth ? `${width}px` : "" })}
         ${ref((el) => {
-          if (el) panel.viewport = el as HTMLElement;
+          if (el) {
+            panel.viewport = el as HTMLElement;
+          }
         })}
       >
         <div
           class="canvas-panel-canvas"
           style=${styleMap({ width: width ? `${width}px` : "" })}
           ${ref((el) => {
-            if (el) panel.canvas = el as HTMLElement;
+            if (el) {
+              panel.canvas = el as HTMLElement;
+            }
           })}
         ></div>
         <div
           class="canvas-panel-overlay"
           ${ref((el) => {
-            if (el) panel.overlay = el as HTMLElement;
+            if (el) {
+              panel.overlay = el as HTMLElement;
+            }
           })}
         >
           <div
             class="canvas-drop-indicator"
             style="display:none"
             ${ref((el) => {
-              if (el) panel.dropLine = el as HTMLElement;
+              if (el) {
+                panel.dropLine = el as HTMLElement;
+              }
             })}
           ></div>
         </div>
         <div
           class="canvas-panel-click"
           ${ref((el) => {
-            if (el) panel.overlayClk = el as HTMLElement;
+            if (el) {
+              panel.overlayClk = el as HTMLElement;
+            }
           })}
         ></div>
       </div>
     </div>
   `;
-  return { tpl, panel };
+  return { panel, tpl };
 }
 
 /** Center canvas horizontally in viewport, top-aligned vertically. */
 export function centerCanvas() {
-  if (!view.panzoomWrap) return;
+  if (!view.panzoomWrap) {
+    return;
+  }
   const wrapWidth = canvasWrap.clientWidth;
   const contentWidth = view.panzoomWrap.scrollWidth;
   const zoom = _ctx.getZoom();
@@ -159,7 +167,9 @@ export function observeCenterUntilStable() {
     view.centerObserver.disconnect();
     view.centerObserver = null;
   }
-  if (!view.panzoomWrap) return;
+  if (!view.panzoomWrap) {
+    return;
+  }
   view.needsCenter = true;
   view.centerObserver = new ResizeObserver(() => {
     if (!view.needsCenter) {
@@ -176,17 +186,23 @@ export function observeCenterUntilStable() {
 
 /** Apply the current zoom + pan transform to the panzoom wrapper. */
 export function applyTransform() {
-  if (!view.panzoomWrap) return;
+  if (!view.panzoomWrap) {
+    return;
+  }
   const zoom = _ctx.getZoom();
   view.panzoomWrap.style.transform = `translate(${view.panX}px, ${view.panY}px) scale(${zoom})`;
   renderZoomIndicator();
   renderOnly("overlays");
-  if (_ctx.getCanvasMode() === "stylebook") _ctx.renderStylebookOverlays();
+  if (_ctx.getCanvasMode() === "stylebook") {
+    _ctx.renderStylebookOverlays();
+  }
 }
 
 /** Calculate zoom + pan to fit all panels within the viewport. */
 export function fitToScreen() {
-  if (!view.panzoomWrap) return;
+  if (!view.panzoomWrap) {
+    return;
+  }
   const wrapWidth = canvasWrap.clientWidth;
   const wrapHeight = canvasWrap.clientHeight;
   const gap = 24;
@@ -204,7 +220,7 @@ export function fitToScreen() {
 
   const fitZoomW = wrapWidth / totalPanelWidth;
   const fitZoomH = wrapHeight / maxPanelHeight;
-  const fitZoom = Math.min(5.0, Math.max(0.05, Math.min(fitZoomW, fitZoomH)));
+  const fitZoom = Math.min(5, Math.max(0.05, Math.min(fitZoomW, fitZoomH)));
 
   _ctx.setZoomDirect(fitZoom);
 
@@ -217,7 +233,9 @@ export function fitToScreen() {
 
 /** Reset zoom to 100% and re-center horizontally. */
 export function resetZoom() {
-  if (!view.panzoomWrap) return;
+  if (!view.panzoomWrap) {
+    return;
+  }
   _ctx.setZoomDirect(1);
   centerCanvas();
   applyTransform();
@@ -244,21 +262,23 @@ function _panToEl(el: HTMLElement, panel?: { scrollContainer?: HTMLElement | nul
 
   if (panel?.scrollContainer) {
     panel.scrollContainer.scrollTo({
-      top: panel.scrollContainer.scrollTop - offsetY,
       behavior: "smooth",
+      top: panel.scrollContainer.scrollTop - offsetY,
     });
   } else {
     const startY = view.panY;
     const targetY = startY + offsetY;
     const start = performance.now();
     const duration = 250;
-    function step(now: number) {
+    const step = (now: number) => {
       const t = Math.min((now - start) / duration, 1);
       const ease = t * (2 - t);
       view.panY = startY + (targetY - startY) * ease;
       applyTransform();
-      if (t < 1) requestAnimationFrame(step);
-    }
+      if (t < 1) {
+        requestAnimationFrame(step);
+      }
+    };
     requestAnimationFrame(step);
   }
 }
@@ -270,9 +290,13 @@ function _panToEl(el: HTMLElement, panel?: { scrollContainer?: HTMLElement | nul
  */
 export function panToElement(path: (string | number)[]) {
   const panel = getActivePanel();
-  if (!panel?.canvas) return;
+  if (!panel?.canvas) {
+    return;
+  }
   const el = findCanvasElement(path, panel.canvas);
-  if (!el) return;
+  if (!el) {
+    return;
+  }
   _panToEl(el, panel);
 }
 
@@ -337,7 +361,9 @@ export function renderZoomIndicator() {
 
 /** Position the zoom indicator relative to canvas-wrap bounds. */
 export function positionZoomIndicator() {
-  if (!_zoomIndicatorEl) return;
+  if (!_zoomIndicatorEl) {
+    return;
+  }
   const rect = canvasWrap.getBoundingClientRect();
   _zoomIndicatorEl.style.left = `${rect.left + rect.width / 2}px`;
   _zoomIndicatorEl.style.top = `${rect.bottom - 32}px`;

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

@@ -2,21 +2,27 @@
  * 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 {import("@jxsuite/schema/types").JxStyle} 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: Record<string, any>, scope: string) {
+import type { JxStyle } from "@jxsuite/schema/types";
+
+export function buildNestedSiteCSS(styleObj: JxStyle, scope: string) {
   let css = "";
 
-  function emit(parentSel: string, rules: Record<string, any>) {
+  function emit(parentSel: string, rules: JxStyle) {
     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`;
+    if (props) {
+      css += `${parentSel} { ${props} }\n`;
+    }
     for (const [sel, sub] of Object.entries(rules)) {
-      if (sub === null || typeof sub !== "object" || Array.isArray(sub)) continue;
+      if (sub === null || typeof sub !== "object" || Array.isArray(sub)) {
+        continue;
+      }
       const resolved = sel.startsWith("&")
         ? sel.replace("&", parentSel)
         : sel.startsWith("[") || sel.startsWith(":") || sel.startsWith(".")
@@ -27,7 +33,9 @@ export function buildNestedSiteCSS(styleObj: Record<string, any>, scope: string)
   }
 
   for (const [k, v] of Object.entries(styleObj)) {
-    if (v === null || typeof v !== "object" || Array.isArray(v)) continue;
+    if (v === null || typeof v !== "object" || Array.isArray(v)) {
+      continue;
+    }
     const resolved = k.startsWith("&")
       ? k.replace("&", scope)
       : k.startsWith("[") || k.startsWith(":") || k.startsWith(".")
@@ -46,5 +54,5 @@ export function buildNestedSiteCSS(styleObj: Record<string, any>, scope: string)
  * @returns {string}
  */
 function camelToKebab(s: string) {
-  return s.replace(/[A-Z]/g, (m) => `-${m.toLowerCase()}`);
+  return s.replaceAll(/[A-Z]/g, (m) => `-${m.toLowerCase()}`);
 }

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

@@ -5,24 +5,25 @@
  */
 
 import {
-  updateUi,
-  renderOnly,
-  getNodeAtPath,
-  parentElementPath,
-  childIndex,
   canvasPanels,
+  childIndex,
   elToPath,
+  getNodeAtPath,
+  parentElementPath,
+  renderOnly,
+  updateUi,
 } from "../store";
 import { activeTab } from "../workspace/workspace";
 import type { JxPath } from "../state";
 import {
-  transactDoc,
-  mutateRemoveNode,
   mutateInsertNode,
+  mutateRemoveNode,
   mutateUpdateProperty,
+  transactDoc,
 } from "../tabs/transact";
 import { view } from "../view";
-import { isSlashMenuOpen, showSlashMenu, dismissSlashMenu } from "./slash-menu";
+import { panelMediaToActiveMedia } from "../canvas/canvas-helpers";
+import { dismissSlashMenu, isSlashMenuOpen, showSlashMenu } from "./slash-menu";
 import { renderBlockActionBar } from "../panels/block-action-bar";
 import { defaultDef } from "../panels/shared";
 
@@ -64,15 +65,27 @@ export function enterComponentInlineEdit(el: HTMLElement, path: JxPath) {
   }
 
   const node = getNodeAtPath(activeTab.value!.doc.document, path);
-  if (!node) return;
+  if (!node) {
+    return;
+  }
 
   const tc = node.textContent;
-  if (node.$props && (node.tagName || "").includes("-")) return;
-  if (Array.isArray(node.children) && node.children.length > 0) return;
-  if (node.children && typeof node.children === "object") return;
-  if (tc && typeof tc === "object") return;
+  if (node.$props && (node.tagName || "").includes("-")) {
+    return;
+  }
+  if (Array.isArray(node.children) && node.children.length > 0) {
+    return;
+  }
+  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 = p.overlay.querySelectorAll(".overlay-box") as NodeListOf<HTMLElement>;
@@ -94,9 +107,9 @@ export function enterComponentInlineEdit(el: HTMLElement, path: JxPath) {
 
   view.componentInlineEdit = {
     el,
-    path,
-    originalText: rawText,
     mediaName: canvasPanels.find((p) => p.canvas.contains(el))?.mediaName || null,
+    originalText: rawText,
+    path,
   };
 
   el.focus();
@@ -115,31 +128,43 @@ export function enterComponentInlineEdit(el: HTMLElement, path: JxPath) {
       document.removeEventListener("mousedown", outsideHandler, true);
       return;
     }
-    if (view.componentInlineEdit.el.contains(evt.target as Node)) return;
-    if (isSlashMenuOpen()) return;
-    if (view.blockActionBarEl && view.blockActionBarEl.contains(evt.target as Node)) return;
+    if (view.componentInlineEdit.el.contains(evt.target as Node)) {
+      return;
+    }
+    if (isSlashMenuOpen()) {
+      return;
+    }
+    if (view.blockActionBarEl && view.blockActionBarEl.contains(evt.target as Node)) {
+      return;
+    }
     document.removeEventListener("mousedown", outsideHandler, true);
 
-    let hitPath: (string | number)[] | null = null,
-      hitMedia = null;
+    let hitMedia = null;
+    let hitPath: (string | number)[] | null = null;
     for (const p of canvasPanels) {
       const els = p.canvas.querySelectorAll("*") as NodeListOf<HTMLElement>;
-      for (const el of els) el.style.pointerEvents = "auto";
+      for (const child of els) {
+        child.style.pointerEvents = "auto";
+      }
       p.overlayClk.style.display = "none";
       const found = document.elementsFromPoint(evt.clientX, evt.clientY);
       p.overlayClk.style.display = "";
-      for (const el of els) el.style.pointerEvents = "none";
+      for (const child of els) {
+        child.style.pointerEvents = "none";
+      }
       for (const hit of found) {
         if (p.canvas.contains(hit) && hit !== p.canvas) {
-          const path = elToPath.get(hit);
-          if (path) {
-            hitPath = path;
+          const hitElPath = elToPath.get(hit);
+          if (hitElPath) {
+            hitPath = hitElPath;
             hitMedia = p.mediaName;
             break;
           }
         }
       }
-      if (hitPath) break;
+      if (hitPath) {
+        break;
+      }
     }
 
     const { el: editEl, path: editPath, originalText } = view.componentInlineEdit;
@@ -151,8 +176,8 @@ export function enterComponentInlineEdit(el: HTMLElement, path: JxPath) {
 
     if (hitPath) {
       let hp = hitPath;
-      const media = hitMedia === "base" ? null : (hitMedia ?? null);
-      updateUi("pendingInlineEdit", { path: hp, mediaName: hitMedia });
+      const media = panelMediaToActiveMedia(hitMedia);
+      updateUi("pendingInlineEdit", { mediaName: hitMedia, path: hp });
       activeTab.value!.session.ui.activeMedia = media;
       if (isEmpty && pPath) {
         transactDoc(activeTab.value, (t) => {
@@ -167,7 +192,7 @@ export function enterComponentInlineEdit(el: HTMLElement, path: JxPath) {
             hitIdx > removedIdx
           ) {
             hp = [...pPath, "children", hitIdx - 1];
-            updateUi("pendingInlineEdit", { path: hp, mediaName: hitMedia });
+            updateUi("pendingInlineEdit", { mediaName: hitMedia, path: hp });
           }
           t.session.selection = hp;
         });
@@ -179,17 +204,15 @@ export function enterComponentInlineEdit(el: HTMLElement, path: JxPath) {
       } else {
         activeTab.value!.session.selection = hp;
       }
+    } else if (isEmpty && pPath) {
+      transactDoc(activeTab.value, (t) => mutateRemoveNode(t, editPath));
+    } else if (newText !== originalText) {
+      transactDoc(activeTab.value, (t) =>
+        mutateUpdateProperty(t, editPath, "textContent", newText || undefined),
+      );
     } else {
-      if (isEmpty && pPath) {
-        transactDoc(activeTab.value, (t) => mutateRemoveNode(t, editPath));
-      } else if (newText !== originalText) {
-        transactDoc(activeTab.value, (t) =>
-          mutateUpdateProperty(t, editPath, "textContent", newText || undefined),
-        );
-      } else {
-        renderOnly("canvas");
-        renderOnly("overlays");
-      }
+      renderOnly("canvas");
+      renderOnly("overlays");
     }
   };
   document.addEventListener("mousedown", outsideHandler, true);
@@ -200,8 +223,8 @@ export function enterComponentInlineEdit(el: HTMLElement, path: JxPath) {
 
 /** @param {KeyboardEvent} e */
 function componentInlineKeydown(e: KeyboardEvent) {
-  if (isSlashMenuOpen()) {
-    if (["ArrowDown", "ArrowUp", "Enter", "Escape"].includes(e.key)) return;
+  if (isSlashMenuOpen() && ["ArrowDown", "ArrowUp", "Enter", "Escape"].includes(e.key)) {
+    return;
   }
 
   if (e.key === "Enter" && !e.shiftKey) {
@@ -215,7 +238,9 @@ function componentInlineKeydown(e: KeyboardEvent) {
 }
 
 function splitParagraph() {
-  if (!view.componentInlineEdit) return;
+  if (!view.componentInlineEdit) {
+    return;
+  }
   const { el, path, mediaName } = view.componentInlineEdit;
 
   const sel = el.ownerDocument.defaultView?.getSelection() as Selection | null;
@@ -235,7 +260,9 @@ function splitParagraph() {
   const tag = "p";
   const pPath = parentElementPath(path) as JxPath;
   const idx = childIndex(path) as number;
-  if (!pPath) return;
+  if (!pPath) {
+    return;
+  }
 
   const newDef = { tagName: tag, textContent: textAfter };
   const newPath = [...pPath, "children", idx + 1];
@@ -248,11 +275,13 @@ function splitParagraph() {
     t.session.selection = newPath;
   });
 
-  updateUi("pendingInlineEdit", { path: newPath, mediaName });
+  updateUi("pendingInlineEdit", { mediaName, path: newPath });
 }
 
 function _commitComponentInlineEdit() {
-  if (!view.componentInlineEdit) return;
+  if (!view.componentInlineEdit) {
+    return;
+  }
   const { el, path, originalText } = view.componentInlineEdit;
   const newText = (el.textContent ?? "").trim();
 
@@ -272,7 +301,9 @@ function _commitComponentInlineEdit() {
 }
 
 function cancelComponentInlineEdit() {
-  if (!view.componentInlineEdit) return;
+  if (!view.componentInlineEdit) {
+    return;
+  }
   const { el } = view.componentInlineEdit;
   cleanupComponentInlineEdit(el);
   renderOnly("canvas");
@@ -305,7 +336,9 @@ function cleanupComponentInlineEdit(el: HTMLElement) {
 // ─── Component-mode slash commands ──────────────────────────────────────────
 
 function componentInlineInput() {
-  if (!view.componentInlineEdit) return;
+  if (!view.componentInlineEdit) {
+    return;
+  }
   const { el, originalText } = view.componentInlineEdit;
   const text = el.textContent || "";
 
@@ -319,11 +352,15 @@ function componentInlineInput() {
 
 /** @param {{ tag: string; label: string; description: string }} cmd */
 function handleComponentSlashSelect(cmd: { tag: string; label: string; description: string }) {
-  if (!view.componentInlineEdit) return;
+  if (!view.componentInlineEdit) {
+    return;
+  }
   const { el, path, mediaName } = view.componentInlineEdit;
   const pPath = parentElementPath(path);
   const idx = childIndex(path) as number;
-  if (!pPath) return;
+  if (!pPath) {
+    return;
+  }
 
   cleanupComponentInlineEdit(el);
 
@@ -337,5 +374,7 @@ function handleComponentSlashSelect(cmd: { tag: string; label: string; descripti
   });
 
   const hasText = newDef.textContent != null;
-  if (hasText) updateUi("pendingInlineEdit", { path: newPath, mediaName });
+  if (hasText) {
+    updateUi("pendingInlineEdit", { mediaName, path: newPath });
+  }
 }