@jxsuite/studio 0.19.0 → 0.20.0

package/src/canvas/canvas-live-render.js

@@ -26,8 +26,11 @@ import {
 import { componentRegistry, computeRelativePath } from "../files/components.js";
 import { prepareForEditMode } from "../utils/edit-display.js";
 import { getActiveElement } from "../editor/inline-edit.js";
+import { buildNestedSiteCSS } from "./nested-site-style.js";
 
-/** @type {any} */
+export { buildNestedSiteCSS } from "./nested-site-style.js";
+
+/** @type {{ getCanvasMode: () => string } | null} */
 let _ctx = null;
 
 /** Set of DOM elements that originated from the layout (not page content). */
@@ -44,9 +47,9 @@ let _failedElementsDocPath = null;
  * the layout slot. Returns the path to the container whose children are the page content (first
  * non-$__layout children array).
  *
- * @param {any} node
- * @param {any[]} [path]
- * @returns {any[] | null}
+ * @param {JxMutableNode} node
+ * @param {(string | number)[]} [path]
+ * @returns {(string | number)[] | null}
  */
 function findPageContentPrefix(node, path = []) {
   if (!node || typeof node !== "object") return null;
@@ -75,14 +78,19 @@ export let activeLayoutPath = /** @type {string | null} */ (null);
  * Recursively mark all nodes in a layout doc tree with $__layout: true so we can identify which
  * rendered DOM elements came from the layout vs page content.
  */
-function markLayoutNodes(/** @type {any} */ node) {
+function markLayoutNodes(/** @type {JxMutableNode} */ node) {
   if (!node || typeof node !== "object") return;
   node.$__layout = true;
   if (Array.isArray(node.children)) {
-    for (const child of node.children) markLayoutNodes(child);
+    for (const child of node.children) {
+      if (typeof child === "string") continue;
+      markLayoutNodes(child);
+    }
   }
   if (node.$elements) {
-    for (const el of node.$elements) markLayoutNodes(el);
+    for (const el of node.$elements) {
+      if (typeof el !== "string") markLayoutNodes(el);
+    }
   }
 }
 
@@ -103,13 +111,13 @@ export function initCanvasLiveRender(ctx) {
  * failure.
  *
  * @param {number} gen - Render generation for staleness detection
- * @param {any} doc
- * @param {any} canvasEl
+ * @param {JxMutableNode} doc
+ * @param {HTMLElement} canvasEl
  */
 export async function renderCanvasLive(gen, doc, canvasEl) {
   const tab = activeTab.value;
   const S = { documentPath: tab?.documentPath, mode: tab?.doc.mode, document: tab?.doc.document };
-  const canvasMode = _ctx.getCanvasMode();
+  const canvasMode = /** @type {{ getCanvasMode: () => string }} */ (_ctx).getCanvasMode();
 
   if (S.documentPath !== _failedElementsDocPath) {
     _failedElements.clear();
@@ -137,7 +145,7 @@ export async function renderCanvasLive(gen, doc, canvasEl) {
     projectState?.isSiteProject &&
     (S.documentPath.startsWith("pages/") || S.documentPath.startsWith("./pages/"));
 
-  /** @type {any[] | null} Path prefix in merged doc where page children live */
+  /** @type {(string | number)[] | null} Path prefix in merged doc where page children live */
   let pageContentPrefix = null;
 
   if (isPage) {
@@ -162,18 +170,23 @@ export async function renderCanvasLive(gen, doc, canvasEl) {
   // so we can remap runtime paths (children,0,...) → (children,map,...)
   const mapParentPaths = new Set();
   if (canvasMode === "design" || canvasMode === "edit") {
-    (function findMapParents(/** @type {any} */ node, /** @type {any[]} */ path) {
+    (function findMapParents(
+      /** @type {JxMutableNode} */ node,
+      /** @type {(string | number)[]} */ path,
+    ) {
       if (!node || typeof node !== "object") return;
       if (
         node.children &&
         typeof node.children === "object" &&
-        node.children.$prototype === "Array"
+        /** @type {{ $prototype?: string }} */ (node.children).$prototype === "Array"
       ) {
         mapParentPaths.add(path.join("/"));
       }
       if (Array.isArray(node.children)) {
         for (let i = 0; i < node.children.length; i++) {
-          findMapParents(node.children[i], [...path, "children", i]);
+          const child = node.children[i];
+          if (typeof child === "string") continue;
+          findMapParents(child, [...path, "children", i]);
         }
       }
       if (node.$switch && node.cases) {
@@ -190,15 +203,19 @@ export async function renderCanvasLive(gen, doc, canvasEl) {
     const docBase = S.documentPath ? `${location.origin}/${docPrefix}${S.documentPath}` : undefined;
 
     // Register custom elements so the runtime can render them
-    let effectiveElements = getEffectiveElements(renderDoc.$elements);
+    let effectiveElements = getEffectiveElements(
+      /** @type {(JxElement | string)[]} */ (renderDoc.$elements),
+    );
 
     // In content mode (markdown), auto-discover components for directive-based
     // custom elements that have no explicit $elements registration.
     if (S.mode === "content" && componentRegistry.length > 0) {
       const existingRefs = new Set(
-        effectiveElements.map((/** @type {any} */ e) => (typeof e === "string" ? e : e?.$ref)),
+        effectiveElements.map((/** @type {JxElement | string} */ e) =>
+          typeof e === "string" ? e : e?.$ref,
+        ),
       );
-      /** @param {any} node */
+      /** @param {JxMutableNode} node */
       const collectTags = (node) => {
         /** @type {Set<string>} */
         const tags = new Set();
@@ -206,13 +223,16 @@ export async function renderCanvasLive(gen, doc, canvasEl) {
         if (node.tagName) tags.add(node.tagName);
         if (Array.isArray(node.children)) {
           for (const child of node.children) {
+            if (typeof child === "string") continue;
             for (const t of collectTags(child)) tags.add(t);
           }
         }
         return tags;
       };
       for (const tag of collectTags(renderDoc)) {
-        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 && comp.source !== "npm") {
           const relPath = computeRelativePath(S.documentPath, comp.path);
           if (!existingRefs.has(relPath)) {
@@ -224,28 +244,30 @@ export async function renderCanvasLive(gen, doc, canvasEl) {
     }
 
     if (effectiveElements.length) {
-      renderDoc.$elements = effectiveElements;
+      renderDoc.$elements = /** @type {(JxMutableNode | string | { $ref: string })[]} */ (
+        /** @type {unknown} */ (effectiveElements)
+      );
       for (const entry of effectiveElements) {
         if (typeof entry === "string") {
           try {
             const specifier =
               entry.startsWith("/") || entry.startsWith(".") ? entry : `/node_modules/${entry}`;
             await import(specifier);
-          } catch (/** @type {any} */ e) {
+          } catch (/** @type {unknown} */ e) {
             console.warn("Studio: failed to import package", entry, e);
           }
         } else if (entry?.$ref) {
           let href;
           try {
             href = new URL(entry.$ref, docBase).href;
-          } catch (/** @type {any} */ urlErr) {
+          } catch (/** @type {unknown} */ urlErr) {
             console.warn("Studio: invalid element URL", { ref: entry.$ref, docBase }, urlErr);
             continue;
           }
           if (_failedElements.has(href)) continue;
           try {
             await defineElement(href);
-          } catch (/** @type {any} */ e) {
+          } catch (/** @type {unknown} */ e) {
             _failedElements.add(href);
             console.warn("Studio: failed to register element", entry.$ref, e);
           }
@@ -265,17 +287,22 @@ export async function renderCanvasLive(gen, doc, canvasEl) {
     // This ensures project font-family, color, etc. override the
     // content-mode fallback typography rules in the stylesheet.
     // In edit mode, propagate to the .content-edit-canvas wrapper for seamless appearance.
-    const viewport = canvasEl.closest(".canvas-panel-viewport");
-    const editSurface = canvasMode === "edit" ? canvasEl.closest(".content-edit-canvas") : null;
+    const viewport = /** @type {HTMLElement | null} */ (canvasEl.closest(".canvas-panel-viewport"));
+    const editSurface =
+      canvasMode === "edit"
+        ? /** @type {HTMLElement | null} */ (canvasEl.closest(".content-edit-canvas"))
+        : null;
     const siteStyle = projectState?.projectConfig?.style;
     if (viewport) {
       viewport.style.cssText = "";
       if (siteStyle && typeof siteStyle === "object") {
         for (const [k, v] of Object.entries(siteStyle)) {
+          if (v !== null && typeof v === "object" && !Array.isArray(v)) continue;
           if (k.startsWith("--")) {
             viewport.style.setProperty(k, String(v));
           } else {
-            /** @type {any} */ (viewport.style)[k] = v;
+            /** @type {Record<string, string>} */ (/** @type {unknown} */ (viewport.style))[k] =
+              String(v);
           }
         }
       }
@@ -283,22 +310,42 @@ export async function renderCanvasLive(gen, doc, canvasEl) {
     if (editSurface) {
       if (siteStyle && typeof siteStyle === "object") {
         for (const [k, v] of Object.entries(siteStyle)) {
+          if (v !== null && typeof v === "object" && !Array.isArray(v)) continue;
           if (k.startsWith("--")) {
-            /** @type {any} */ (editSurface).style.setProperty(k, String(v));
+            editSurface.style.setProperty(k, String(v));
           } else {
-            /** @type {any} */ (editSurface.style)[k] = v;
+            /** @type {Record<string, string>} */ (/** @type {unknown} */ (editSurface.style))[k] =
+              String(v);
           }
         }
       }
     }
     if (siteStyle && typeof siteStyle === "object") {
       for (const [k, v] of Object.entries(siteStyle)) {
+        if (v !== null && typeof v === "object" && !Array.isArray(v)) continue;
         if (!k.startsWith("--")) {
-          /** @type {any} */ (canvasEl.style)[k] = v;
+          /** @type {Record<string, string>} */ (/** @type {unknown} */ (canvasEl.style))[k] =
+            String(v);
         }
       }
     }
 
+    // Generate a <style> tag for nested selector rules (e.g. table, thead, etc.)
+    if (siteStyle && typeof siteStyle === "object") {
+      const scopeAttr = `data-jx-site`;
+      canvasEl.setAttribute(scopeAttr, "");
+      const css = buildNestedSiteCSS(siteStyle, `[${scopeAttr}]`);
+
+      if (css) {
+        const existingStyleEl = document.getElementById("jx-site-style");
+        if (existingStyleEl) existingStyleEl.remove();
+        const styleEl = document.createElement("style");
+        styleEl.id = "jx-site-style";
+        styleEl.textContent = css;
+        document.head.appendChild(styleEl);
+      }
+    }
+
     // Inject site-level $media so runtime can resolve media queries in styles
     renderDoc.$media = getEffectiveMedia(renderDoc.$media);
 
@@ -310,13 +357,14 @@ export async function renderCanvasLive(gen, doc, canvasEl) {
         const tag = entry.tagName.toLowerCase();
         const attrs = { ...entry.attributes };
         for (const key of ["href", "src"]) {
+          const val = attrs[key];
           if (
-            attrs[key] &&
-            !attrs[key].startsWith("/") &&
-            !attrs[key].startsWith(".") &&
-            !attrs[key].startsWith("http")
+            typeof val === "string" &&
+            !val.startsWith("/") &&
+            !val.startsWith(".") &&
+            !val.startsWith("http")
           ) {
-            attrs[key] = `/node_modules/${attrs[key]}`;
+            attrs[key] = `/node_modules/${val}`;
           }
         }
         const selector = `${tag}${attrs.href ? `[href="${attrs.href}"]` : ""}${attrs.src ? `[src="${attrs.src}"]` : ""}`;
@@ -333,7 +381,12 @@ export async function renderCanvasLive(gen, doc, canvasEl) {
     if (gen !== view.renderGeneration) return null;
     const el = /** @type {HTMLElement} */ (
       runtimeRenderNode(renderDoc, $defs, {
-        onNodeCreated(/** @type {any} */ el, /** @type {any} */ path, /** @type {any} */ def) {
+        onNodeCreated(
+          /** @type {HTMLElement | Text} */ el,
+          /** @type {(string | number)[]} */ path,
+          /** @type {Record<string, unknown>} */ def,
+        ) {
+          if (!(el instanceof HTMLElement)) return;
           // Track layout-originated elements — don't store in elToPath to avoid
           // path collisions with remapped page content paths
           if (layoutWrapped && def?.$__layout) {
@@ -349,7 +402,9 @@ export async function renderCanvasLive(gen, doc, canvasEl) {
             const pfx = pageContentPrefix;
             if (
               path.length >= pfx.length &&
-              pfx.every((/** @type {any} */ seg, /** @type {number} */ i) => path[i] === seg)
+              pfx.every(
+                (/** @type {string | number} */ seg, /** @type {number} */ i) => path[i] === seg,
+              )
             ) {
               mappedPath = ["children", ...path.slice(pfx.length)];
             }
@@ -391,7 +446,7 @@ export async function renderCanvasLive(gen, doc, canvasEl) {
       // Disable pointer events on all rendered elements for edit mode
       el.style.pointerEvents = "none";
       for (const child of el.querySelectorAll("*")) {
-        /** @type {any} */ (child).style.pointerEvents = "none";
+        /** @type {HTMLElement} */ (child).style.pointerEvents = "none";
       }
     }
     // Clear and append atomically — ensures the canvas is never left empty if a
@@ -411,13 +466,13 @@ export async function renderCanvasLive(gen, doc, canvasEl) {
         for (const child of canvasEl.querySelectorAll("*")) {
           if (view.componentInlineEdit && child === view.componentInlineEdit.el) continue;
           if (editingEl && child === editingEl) continue;
-          /** @type {any} */ (child).style.pointerEvents = "none";
+          /** @type {HTMLElement} */ (child).style.pointerEvents = "none";
         }
       });
     }
     return $defs;
-  } catch (/** @type {any} */ err) {
-    console.warn("renderCanvasLive failed:", err.message, err);
+  } catch (/** @type {unknown} */ err) {
+    console.warn("renderCanvasLive failed:", /** @type {Error} */ (err).message, err);
     return null;
   }
 }