@jxsuite/studio 0.9.0 → 0.10.2

package/src/panels/block-action-bar.js

@@ -23,6 +23,7 @@ import { isEditing, getActiveElement, getInlineActions } from "../editor/inline-
 import { toggleInlineFormat, isTagActiveInSelection } from "../editor/inline-format.js";
 import { componentRegistry } from "../files/components.js";
 import { convertToComponent } from "../editor/convert-to-component.js";
+import { findCanvasElement, getActivePanel } from "../canvas/canvas-helpers.js";
 
 /** @type {any} */
 let _ctx = null;
@@ -32,8 +33,6 @@ let _ctx = null;
  *
  * @param {{
  *   getCanvasMode: () => string;
- *   findCanvasElement: Function;
- *   getActivePanel: Function;
  *   navigateToComponent: Function;
  *   createFloatingContainer: Function;
  * }} ctx
@@ -186,6 +185,11 @@ export function dismissLinkPopover() {
   if (view.linkPopoverHost) litRender(nothing, view.linkPopoverHost);
 }
 
+/** Dismiss the block action bar. */
+export function dismissBlockActionBar() {
+  if (view.blockActionBarEl) litRender(nothing, view.blockActionBarEl);
+}
+
 /** @param {any} anchorBtn */
 function showLinkPopover(anchorBtn) {
   litRender(nothing, view.linkPopoverHost);
@@ -312,12 +316,12 @@ export function renderBlockActionBar() {
     return;
   }
 
-  const activePanel = _ctx.getActivePanel();
+  const activePanel = getActivePanel();
   if (!activePanel) {
     litRender(nothing, view.blockActionBarEl);
     return;
   }
-  const el = _ctx.findCanvasElement(S.selection, activePanel.canvas);
+  const el = findCanvasElement(S.selection, activePanel.canvas);
   const node = el && getNodeAtPath(S.document, S.selection);
   if (!el || !node) {
     litRender(nothing, view.blockActionBarEl);

package/src/panels/canvas-dnd.js

@@ -18,18 +18,7 @@ import {
 } from "../store.js";
 import { view } from "../view.js";
 import { applyDropInstruction } from "../panels/dnd.js";
-
-/** @type {any} */
-let _ctx = null;
-
-/**
- * Initialize the canvas DnD module.
- *
- * @param {{ effectiveZoom: () => number }} ctx
- */
-export function initCanvasDnD(ctx) {
-  _ctx = ctx;
-}
+import { effectiveZoom } from "../canvas/canvas-helpers.js";
 
 /**
  * Register all canvas elements in a panel as DnD drop targets.
@@ -133,7 +122,7 @@ function showCanvasDropIndicator(el, elPath, isVoid, panel) {
     return;
   }
 
-  const scale = _ctx.effectiveZoom();
+  const scale = effectiveZoom();
   const wrapRect = viewport.getBoundingClientRect();
   const elRect = el.getBoundingClientRect();
   const left = (elRect.left - wrapRect.left + viewport.scrollLeft) / scale;

package/src/panels/imports-panel.js

@@ -3,8 +3,8 @@
  *
  * When editing project.json: shows Class Imports, Dependencies (add/remove packages), and
  * per-package component toggles for cherry-picking individual elements. When editing a
- * page/layout/component/collection: shows Component Imports ($ref picker) and per-package component
- * toggles.
+ * page/layout/component/content type: shows Component Imports ($ref picker) and per-package
+ * component toggles.
  */
 
 import { html, nothing } from "lit-html";

package/src/panels/left-panel.js

@@ -15,7 +15,6 @@ import {
   applyMutation,
   updateFrontmatter,
 } from "../store.js";
-import { view } from "../view.js";
 import { ensureLitState } from "./shared.js";
 import { renderLayersTemplate } from "./layers-panel.js";
 import { renderStylebookLayersTemplate } from "./stylebook-layers-panel.js";
@@ -96,7 +95,7 @@ function _render() {
       updateSession,
     });
   else if (tab === "data")
-    content = _ctx.renderDataExplorerTemplate(S.document.state, view.liveScope, {
+    content = _ctx.renderDataExplorerTemplate(S.document.state, S.canvas?.scope ?? null, {
       renderCanvas: _ctx.renderCanvas,
       renderLeftPanel: render,
       defCategory: _ctx.defCategory,

package/src/panels/overlays.js

@@ -6,6 +6,11 @@
 import { html, render as litRender, nothing } from "lit-html";
 import { getState, canvasPanels, pathsEqual, subscribe } from "../store.js";
 import { view } from "../view.js";
+import {
+  findCanvasElement,
+  getActivePanel,
+  overlayBoxDescriptor,
+} from "../canvas/canvas-helpers.js";
 
 /** @type {any} */
 let _ctx = null;
@@ -16,8 +21,7 @@ let _unsub = null;
 /**
  * Mount the overlays panel.
  *
- * @param {any} ctx — { effectiveZoom, getCanvasMode, isEditing, renderBlockActionBar,
- *   findCanvasElement, getActivePanel }
+ * @param {any} ctx — { getCanvasMode, isEditing, renderBlockActionBar }
  */
 export function mount(ctx) {
   _ctx = ctx;
@@ -32,24 +36,6 @@ export function unmount() {
   _ctx = null;
 }
 
-/**
- * @param {any} el
- * @param {any} type
- * @param {any} panel
- */
-function overlayBoxDescriptor(el, type, panel) {
-  const vpRect = panel.viewport.getBoundingClientRect();
-  const elRect = el.getBoundingClientRect();
-  const scale = _ctx.effectiveZoom();
-  return {
-    cls: `overlay-box overlay-${type}`,
-    top: `${(elRect.top - vpRect.top + panel.viewport.scrollTop) / scale}px`,
-    left: `${(elRect.left - vpRect.left + panel.viewport.scrollLeft) / scale}px`,
-    width: `${elRect.width / scale}px`,
-    height: `${elRect.height / scale}px`,
-  };
-}
-
 export function render() {
   if (!_ctx) return;
   const S = getState();
@@ -98,12 +84,12 @@ export function render() {
     const boxes = [];
 
     if (S.hover && !pathsEqual(S.hover, S.selection)) {
-      const el = _ctx.findCanvasElement(S.hover, p.canvas);
+      const el = findCanvasElement(S.hover, p.canvas);
       if (el) boxes.push(overlayBoxDescriptor(el, "hover", p));
     }
 
-    if (S.selection && p === _ctx.getActivePanel()) {
-      const el = _ctx.findCanvasElement(S.selection, p.canvas);
+    if (S.selection && p === getActivePanel()) {
+      const el = findCanvasElement(S.selection, p.canvas);
       if (el) {
         const desc = overlayBoxDescriptor(el, "selection", p);
         if (view.componentInlineEdit || _ctx.isEditing()) /** @type {any} */ (desc).border = "none";

package/src/panels/panel-events.js

@@ -6,6 +6,7 @@
 
 import {
   update,
+  updateUi,
   selectNode,
   hoverNode,
   elToPath,
@@ -21,6 +22,7 @@ import { stopEditing, isEditing, isEditableBlock } from "../editor/inline-edit.j
 import { showContextMenu } from "../editor/context-menu.js";
 import * as insertionHelper from "../editor/insertion-helper.js";
 import { defaultDef } from "../panels/shared.js";
+import { bubbleInlinePath, findCanvasElement, effectiveZoom } from "../canvas/canvas-helpers.js";
 
 /** @type {any} */
 let _ctx = null;
@@ -32,11 +34,8 @@ let _ctx = null;
  *   getState: () => any;
  *   setState: (s: any) => void;
  *   getCanvasMode: () => string;
- *   bubbleInlinePath: (doc: any, path: any) => any;
- *   findCanvasElement: (path: any, canvasEl: any) => any;
  *   enterInlineEdit: (el: any, path: any) => void;
  *   navigateToComponent: (path: any) => void;
- *   effectiveZoom: () => number;
  * }} ctx
  */
 export function initPanelEvents(ctx) {
@@ -90,12 +89,11 @@ export function registerPanelEvents(panel) {
         if (canvas.contains(el) && el !== canvas) {
           const originalPath = elToPath.get(el);
           if (originalPath) {
-            let path = _ctx.bubbleInlinePath(S.document, originalPath);
+            let path = bubbleInlinePath(S.document, originalPath);
             const newMedia = mediaName === "base" ? null : (mediaName ?? null);
             const withMedia = { ...S, ui: { ...S.ui, activeMedia: newMedia } };
 
-            const resolvedEl =
-              path === originalPath ? el : _ctx.findCanvasElement(path, canvas) || el;
+            const resolvedEl = path === originalPath ? el : findCanvasElement(path, canvas) || el;
 
             if (
               pathsEqual(path, S.selection) &&
@@ -108,7 +106,7 @@ export function registerPanelEvents(panel) {
             }
 
             if (canvasMode === "design" && S.mode !== "content") {
-              view.pendingInlineEdit = { path, mediaName };
+              updateUi("pendingInlineEdit", { path, mediaName });
               update(selectNode(withMedia, path));
               return;
             }
@@ -149,9 +147,8 @@ export function registerPanelEvents(panel) {
         if (canvas.contains(el) && el !== canvas) {
           const originalPath = elToPath.get(el);
           if (originalPath) {
-            const path = _ctx.bubbleInlinePath(S.document, originalPath);
-            const resolvedEl =
-              path === originalPath ? el : _ctx.findCanvasElement(path, canvas) || el;
+            const path = bubbleInlinePath(S.document, originalPath);
+            const resolvedEl = path === originalPath ? el : findCanvasElement(path, canvas) || el;
             if (isEditableBlock(resolvedEl)) {
               const newMedia = mediaName === "base" ? null : (mediaName ?? null);
               const withMedia = { ...S, ui: { ...S.ui, activeMedia: newMedia } };
@@ -188,7 +185,7 @@ export function registerPanelEvents(panel) {
         if (canvas.contains(el) && el !== canvas) {
           let path = elToPath.get(el);
           if (path) {
-            path = _ctx.bubbleInlinePath(S.document, path);
+            path = bubbleInlinePath(S.document, path);
             showContextMenu(e, path, S, { onEditComponent: _ctx.navigateToComponent });
             return;
           }
@@ -218,7 +215,7 @@ export function registerPanelEvents(panel) {
       if (el && canvas.contains(el) && el !== canvas) {
         let path = elToPath.get(el);
         if (path) {
-          path = _ctx.bubbleInlinePath(S.document, path);
+          path = bubbleInlinePath(S.document, path);
           if (!pathsEqual(path, S.hover)) {
             _ctx.setState(hoverNode(S, path));
             renderOnly("overlays");
@@ -249,7 +246,7 @@ export function registerPanelEvents(panel) {
     update,
     getCanvasMode: _ctx.getCanvasMode,
     withPanelPointerEvents,
-    effectiveZoom: _ctx.effectiveZoom,
+    effectiveZoom: effectiveZoom,
     defaultDef,
     insertNode,
     selectNode,

package/src/panels/properties-panel.js

@@ -27,7 +27,7 @@ import { renderFieldRow } from "../ui/field-row.js";
 import {
   attrLabel,
   inferInputType,
-  findCollectionSchema,
+  findContentTypeSchema,
   friendlyNameToVar,
   camelToLabel,
   parseCemType,
@@ -210,7 +210,7 @@ function kvRow(
 function renderFrontmatterOnlyPanel() {
   const S = getState();
   const fm = S.content?.frontmatter || {};
-  const col = findCollectionSchema(S.documentPath, projectState?.projectConfig);
+  const col = findContentTypeSchema(S.documentPath, projectState?.projectConfig);
   const schemaProps = col?.schema?.properties;
   const requiredFields = new Set(col?.schema?.required || []);
 
@@ -1276,7 +1276,7 @@ export function renderPropertiesPanelTemplate(ctx) {
     S.mode === "content"
       ? (() => {
           const fm = S.content?.frontmatter || {};
-          const col = findCollectionSchema(S.documentPath, projectState?.projectConfig);
+          const col = findContentTypeSchema(S.documentPath, projectState?.projectConfig);
           const schemaProps = col?.schema?.properties;
           const requiredFields = new Set(col?.schema?.required || []);
 

package/src/panels/pseudo-preview.js

@@ -5,18 +5,11 @@
 
 import { getState, getNodeAtPath } from "../store.js";
 import { view } from "../view.js";
+import { getActivePanel, findCanvasElement } from "../canvas/canvas-helpers.js";
 
-/** @type {any} */
-let _ctx = null;
-
-/**
- * Initialize the pseudo-preview module.
- *
- * @param {{ getActivePanel: Function; findCanvasElement: Function }} ctx
- */
-export function initPseudoPreview(ctx) {
-  _ctx = ctx;
-}
+const pseudoStyleHost = document.createElement("div");
+pseudoStyleHost.style.display = "contents";
+(document.querySelector("sp-theme") || document.body).appendChild(pseudoStyleHost);
 
 export function updateForcedPseudoPreview() {
   if (view.forcedStyleTag) {
@@ -32,9 +25,9 @@ export function updateForcedPseudoPreview() {
   const sel = S.ui?.activeSelector;
   if (!sel || !sel.startsWith(":") || !S.selection) return;
 
-  const panel = _ctx.getActivePanel();
+  const panel = getActivePanel();
   if (!panel) return;
-  const el = _ctx.findCanvasElement(S.selection, panel.canvas);
+  const el = findCanvasElement(S.selection, panel.canvas);
   if (!el) return;
 
   const node = getNodeAtPath(S.document, S.selection);
@@ -59,6 +52,6 @@ export function updateForcedPseudoPreview() {
 
   const tag = document.createElement("style");
   tag.textContent = `[data-studio-forced] { ${cssProps} }`;
-  document.head.appendChild(tag);
+  pseudoStyleHost.appendChild(tag);
   view.forcedStyleTag = tag;
 }

package/src/panels/shared.js

@@ -31,7 +31,7 @@ export function ensureLitState(container) {
   const start = part._$startNode;
   const end = part._$endNode;
   const startBad = start && start.parentNode !== container;
-  const endBad = end && end !== container && end.parentNode !== container;
+  const endBad = (end && end !== container && end.parentNode !== container) || (!end && start);
   if (startBad || endBad) {
     console.warn("ensureLitState: clearing corrupted Lit state on", container.id || container);
     container.textContent = "";

package/src/panels/stylebook-panel.js

@@ -1,6 +1,6 @@
 /**
  * Stylebook panel — renders the Settings mode canvas (element catalog, design variables,
- * definitions, collections). Extracted from studio.js Phase 4e.
+ * definitions, content types). Extracted from studio.js Phase 4e.
  */
 
 import { html, render as litRender, nothing } from "lit-html";
@@ -26,7 +26,7 @@ import { parseMediaEntries, activeBreakpointsForWidth } from "../utils/canvas-me
 import { mediaDisplayName } from "./shared.js";
 import { friendlyNameToVar, varDisplayName } from "../utils/studio-utils.js";
 import { renderDefsEditor } from "../settings/defs-editor.js";
-import { renderCollectionsEditor } from "../settings/collections-editor.js";
+import { renderContentTypesEditor } from "../settings/content-types-editor.js";
 import stylebookMeta from "../../data/stylebook-meta.json";
 
 export { stylebookMeta };
@@ -67,12 +67,12 @@ export function renderStylebookMode(ctx) {
       >
         <sp-tab label="Stylebook" value="stylebook"></sp-tab>
         <sp-tab label="Definitions" value="definitions"></sp-tab>
-        <sp-tab label="Collections" value="collections"></sp-tab>
+        <sp-tab label="Content Types" value="contentTypes"></sp-tab>
       </sp-tabs>
     </div>
   `;
 
-  if (settingsTab === "definitions" || settingsTab === "collections") {
+  if (settingsTab === "definitions" || settingsTab === "contentTypes") {
     /** @type {any} */ (canvasWrap).style.overflow = "hidden";
 
     litRender(
@@ -88,7 +88,7 @@ export function renderStylebookMode(ctx) {
       canvasWrap.querySelector(".settings-editor-container")
     );
     if (settingsTab === "definitions") renderDefsEditor(container);
-    else renderCollectionsEditor(container);
+    else renderContentTypesEditor(container);
     return;
   }
 
@@ -261,12 +261,6 @@ export function selectStylebookTag(tag, media) {
     },
   });
   renderStylebookOverlays();
-  requestAnimationFrame(() => {
-    if (canvasPanels.length > 0) {
-      const el = findStylebookEl(canvasPanels[0].canvas, tag);
-      if (el) el.scrollIntoView({ behavior: "smooth", block: "center" });
-    }
-  });
 }
 
 /** Draw selection + hover overlays for stylebook elements */
@@ -324,7 +318,7 @@ export function renderStylebookOverlays() {
   }
 }
 
-// ─── Internal helpers ─────────────────────────────────────────────────────────
+// ─── Internal helpers (exported for testing) ─────────────────────────────────
 
 /**
  * Build a DOM element tree from a stylebook-meta.json entry.
@@ -332,8 +326,9 @@ export function renderStylebookOverlays() {
  * @param {any} entry
  * @param {any} rootStyle
  * @param {any} activeBreakpoints
+ * @param {string | null} [parentTag]
  */
-function buildStylebookElement(entry, rootStyle, activeBreakpoints) {
+export function buildStylebookElement(entry, rootStyle, activeBreakpoints, parentTag = null) {
   const el = document.createElement(entry.tag);
   if (entry.text) el.textContent = entry.text;
   if (entry.attributes) {
@@ -344,7 +339,9 @@ function buildStylebookElement(entry, rootStyle, activeBreakpoints) {
     }
   }
   if (entry.style) el.style.cssText = entry.style;
-  const tagStyle = rootStyle[`& ${entry.tag}`];
+  const compoundSelector =
+    parentTag && parentTag !== entry.tag ? `& ${parentTag} ${entry.tag}` : null;
+  const tagStyle = (compoundSelector && rootStyle[compoundSelector]) || rootStyle[`& ${entry.tag}`];
   if (tagStyle) {
     for (const [prop, val] of Object.entries(tagStyle)) {
       if (typeof val === "string" || typeof val === "number") {
@@ -372,7 +369,7 @@ function buildStylebookElement(entry, rootStyle, activeBreakpoints) {
   }
   if (entry.children) {
     for (const child of entry.children) {
-      el.appendChild(buildStylebookElement(child, rootStyle, activeBreakpoints));
+      el.appendChild(buildStylebookElement(child, rootStyle, activeBreakpoints, entry.tag));
     }
   }
   return el;
@@ -429,13 +426,19 @@ function hasTagStyle(rootStyle, tag) {
  * @param {any} customizedOnly
  * @param {any} activeBreakpoints
  */
-function renderStylebookElementsIntoCanvas(
+export function renderStylebookElementsIntoCanvas(
   canvasEl,
   rootStyle,
   filter,
   customizedOnly,
   activeBreakpoints,
 ) {
+  for (const [k, v] of Object.entries(rootStyle)) {
+    if (k.startsWith("--") && (typeof v === "string" || typeof v === "number")) {
+      canvasEl.style.setProperty(k, String(v));
+    }
+  }
+
   /** @type {import("lit-html").TemplateResult[]} */
   const sectionTemplates = [];
 
@@ -462,10 +465,11 @@ function renderStylebookElementsIntoCanvas(
             view.stylebookElToTag.set(card, entry.tag);
             elToPath.set(card, ["__sb", entry.tag]);
             for (const child of el.querySelectorAll("*")) {
-              const tag = child.tagName.toLowerCase();
+              const childTag = child.tagName.toLowerCase();
               if (!view.stylebookElToTag.has(child)) {
-                view.stylebookElToTag.set(child, tag);
-                elToPath.set(child, ["__sb", tag]);
+                const compound = childTag === entry.tag ? entry.tag : `${entry.tag} ${childTag}`;
+                view.stylebookElToTag.set(child, compound);
+                elToPath.set(child, ["__sb", compound]);
               }
             }
           })}
@@ -473,7 +477,10 @@ function renderStylebookElementsIntoCanvas(
           <div
             class="element-card-preview"
             ${ref((c) => {
-              if (c && !c.firstChild) c.appendChild(el);
+              if (c) {
+                c.textContent = "";
+                c.appendChild(el);
+              }
             })}
           ></div>
           <div class="element-card-label">&lt;${entry.tag}&gt;</div>

package/src/platform.js

@@ -5,27 +5,30 @@
  * platform adapter at startup. All file I/O, project loading, and component discovery goes through
  * this interface.
  *
+ * Uses window.__jxPlatform so the platform can be registered from a separate script bundle (e.g.
+ * init.js) before studio.js loads.
+ *
  * See spec/desktop.md §3 for the full StudioPlatform interface.
  */
 
 /** @typedef {Record<string, any>} StudioPlatform */
 
-/** @type {StudioPlatform | null} */
-let _platform = null;
+/** @type {any} */
+const g = globalThis;
 
 /** @param {StudioPlatform} platform */
 export function registerPlatform(platform) {
-  _platform = platform;
+  g.__jxPlatform = platform;
 }
 
 /** @returns {StudioPlatform} */
 export function getPlatform() {
-  if (!_platform)
+  if (!g.__jxPlatform)
     throw new Error("No platform registered. Call registerPlatform() before starting Studio.");
-  return _platform;
+  return g.__jxPlatform;
 }
 
 /** @returns {boolean} */
 export function hasPlatform() {
-  return _platform !== null;
+  return g.__jxPlatform != null;
 }