@jxsuite/studio 0.21.4 → 0.22.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jxsuite/studio",
-  "version": "0.21.4",
+  "version": "0.22.0",
   "description": "Jx Studio — visual builder for Jx documents",
   "license": "MIT",
   "repository": {
@@ -31,9 +31,9 @@
   "dependencies": {
     "@atlaskit/pragmatic-drag-and-drop": "^1.8.1",
     "@atlaskit/pragmatic-drag-and-drop-hitbox": "^1.1.0",
-    "@jxsuite/parser": "^0.21.4",
-    "@jxsuite/runtime": "^0.21.4",
-    "@jxsuite/schema": "^0.21.4",
+    "@jxsuite/parser": "^0.22.0",
+    "@jxsuite/runtime": "^0.22.0",
+    "@jxsuite/schema": "^0.22.0",
     "@spectrum-web-components/accordion": "^1.12.1",
     "@spectrum-web-components/action-bar": "1.12.1",
     "@spectrum-web-components/action-button": "^1.12.1",

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

@@ -13,7 +13,6 @@ import {
   buildScope,
   defineElement,
   setSkipServerFunctions,
-  setSkipContentResolution,
 } from "@jxsuite/runtime";
 import {
   getEffectiveElements,
@@ -139,7 +138,6 @@ export async function renderCanvasLive(gen, doc, canvasEl) {
   // failed proxy calls and infinite reactive retries (also covers
   // async custom element connectedCallbacks that run after this function returns)
   setSkipServerFunctions(canvasMode !== "preview");
-  setSkipContentResolution(canvasMode !== "preview");
 
   let renderDoc =
     canvasMode === "preview"
@@ -219,9 +217,9 @@ export async function renderCanvasLive(gen, doc, canvasEl) {
       /** @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) {
+    // In content mode (markdown) or when a layout is applied, auto-discover components
+    // for custom elements that have no explicit $elements registration.
+    if ((S.mode === "content" || layoutWrapped) && componentRegistry.length > 0) {
       const existingRefs = new Set(
         effectiveElements.map((/** @type {JxElement | string} */ e) =>
           typeof e === "string" ? e : e?.$ref,
@@ -367,6 +365,9 @@ export async function renderCanvasLive(gen, doc, canvasEl) {
       for (const entry of effectiveHead) {
         if (!entry?.tagName) continue;
         const tag = entry.tagName.toLowerCase();
+        // Skip inline scripts — they can contain arbitrary JS/HTML that throws
+        // when the browser tries to execute it in the studio context
+        if (tag === "script" && !entry.attributes?.src) continue;
         const attrs = { ...entry.attributes };
         for (const key of ["href", "src"]) {
           const val = attrs[key];

package/src/canvas/canvas-render.js

@@ -664,11 +664,12 @@ function applyCanvasMediaOverrides(canvasEl, activeBreakpoints) {
   const tab = activeTab.value;
   if (!tab) return;
   const docMedia = getEffectiveMedia(tab.doc.document.$media || {});
-  const validBreakpoints = new Set();
+  // Build a set of CSS condition texts that match active breakpoints
+  const activeConditions = new Set();
   for (const name of activeBreakpoints) {
-    if (docMedia[name]) validBreakpoints.add(name);
+    if (docMedia[name]) activeConditions.add(docMedia[name]);
   }
-  const overrides = collectMediaOverrides(document.styleSheets, validBreakpoints);
+  const overrides = collectMediaOverrides(document.styleSheets, activeConditions);
   applyOverridesToCanvas(canvasEl, overrides);
 }
 

package/src/editor/context-menu.js

@@ -1,6 +1,7 @@
 // ─── Clipboard & Context Menu ─────────────────────────────────────────────────
 import { html } from "lit-html";
 import { ref } from "lit-html/directives/ref.js";
+import { htmlToJx } from "@jxsuite/parser/html-to-jx";
 import { getNodeAtPath, parentElementPath, childIndex } from "../store.js";
 import { activeTab, workspace } from "../workspace/workspace.js";
 import {
@@ -26,33 +27,135 @@ import { startLayerTitleEdit } from "../panels/layers-panel.js";
  * @typedef {JxMutableNode} JxNode
  */
 
-// ─── Clipboard ────────────────────────────────────────────────────────────────
+// ─── Clipboard helpers ───────────────────────────────────────────────────────
 
-export function copyNode() {
+const JX_MIME = "web application/jx+json";
+
+/** @param {JxNode | string} node */
+function nodeToHtml(node) {
+  if (typeof node === "string") return node;
+  const tag = node.tagName || "div";
+  let attrs = "";
+  if (node.attributes) {
+    for (const [k, v] of Object.entries(node.attributes)) {
+      attrs += v === "" ? ` ${k}` : ` ${k}="${v.replace(/"/g, """)}"`;
+    }
+  }
+  if (node.style) {
+    const css = Object.entries(node.style)
+      .map(([k, v]) => `${k}:${v}`)
+      .join(";");
+    if (css) attrs += ` style="${css.replace(/"/g, """)}"`;
+  }
+  let inner = "";
+  if (node.textContent) {
+    inner = node.textContent;
+  } else if (node.children) {
+    inner = node.children.map((c) => nodeToHtml(c)).join("");
+  }
+  return `<${tag}${attrs}>${inner}</${tag}>`;
+}
+
+/**
+ * Write a Jx node to the system clipboard with both jx+json and text/html types.
+ *
+ * @param {object} json
+ */
+async function writeToClipboard(json) {
+  workspace.clipboard = json;
+  try {
+    await navigator.clipboard.write([
+      new ClipboardItem({
+        [JX_MIME]: new Blob([JSON.stringify(json)], { type: JX_MIME }),
+        "text/html": new Blob([nodeToHtml(json)], { type: "text/html" }),
+      }),
+    ]);
+  } catch {
+    // Fallback: write as plain text if custom MIME not supported
+    try {
+      await navigator.clipboard.writeText(JSON.stringify(json));
+    } catch {
+      // clipboard API unavailable — workspace.clipboard is the fallback
+    }
+  }
+}
+
+/**
+ * Read from the system clipboard. Returns Jx node(s) or null.
+ *
+ * @returns {Promise<JxNode[] | null>}
+ */
+async function readFromClipboard() {
+  try {
+    const items = await navigator.clipboard.read();
+    for (const item of items) {
+      if (item.types.includes(JX_MIME)) {
+        const blob = await item.getType(JX_MIME);
+        const json = JSON.parse(await blob.text());
+        return [json];
+      }
+      if (item.types.includes("text/html")) {
+        const blob = await item.getType("text/html");
+        const htmlStr = await blob.text();
+        const nodes = htmlToJx(htmlStr);
+        const jxNodes = /** @type {JxNode[]} */ (
+          nodes.map((n) => (typeof n === "string" ? { tagName: "p", textContent: n } : n))
+        );
+        if (jxNodes.length > 0) return jxNodes;
+      }
+      if (item.types.includes("text/plain")) {
+        const blob = await item.getType("text/plain");
+        const text = await blob.text();
+        // Try parsing as Jx JSON
+        try {
+          const parsed = JSON.parse(text);
+          if (parsed && parsed.tagName) return [parsed];
+        } catch {
+          // plain text → paragraph node
+        }
+        if (text.trim()) return [{ tagName: "p", textContent: text.trim() }];
+      }
+    }
+  } catch {
+    // clipboard API unavailable — use workspace fallback
+    if (workspace.clipboard) {
+      return [JSON.parse(JSON.stringify(workspace.clipboard))];
+    }
+  }
+  return null;
+}
+
+// ─── Clipboard actions ───────────────────────────────────────────────────────
+
+export async function copyNode() {
   const tab = activeTab.value;
   if (!tab?.session.selection) return;
   const node = getNodeAtPath(tab.doc.document, tab.session.selection);
   if (!node) return;
-  workspace.clipboard = structuredClone(node);
+  const json = JSON.parse(JSON.stringify(node));
+  await writeToClipboard(json);
   statusMessage("Copied");
 }
 
-export function cutNode() {
+export async function cutNode() {
   const tab = activeTab.value;
   if (!tab?.session.selection || tab.session.selection.length < 2) return;
   const sel = tab.session.selection;
   const node = getNodeAtPath(tab.doc.document, sel);
   if (!node) return;
-  workspace.clipboard = structuredClone(node);
+  const json = JSON.parse(JSON.stringify(node));
+  await writeToClipboard(json);
   transactDoc(tab, (t) => mutateRemoveNode(t, sel));
   statusMessage("Cut");
 }
 
-export function pasteNode() {
-  if (!workspace.clipboard) return;
+export async function pasteNode() {
   const tab = activeTab.value;
   if (!tab) return;
-  const clip = workspace.clipboard;
+
+  const nodes = await readFromClipboard();
+  if (!nodes || nodes.length === 0) return;
+
   const pPath = tab.session.selection || [];
   const parent = getNodeAtPath(tab.doc.document, pPath);
   if (!parent) return;
@@ -60,10 +163,18 @@ export function pasteNode() {
   if (tab.session.selection && tab.session.selection.length >= 2) {
     const pp = /** @type {JxPath} */ (parentElementPath(tab.session.selection));
     const idx = /** @type {number} */ (childIndex(tab.session.selection));
-    transactDoc(tab, (t) => mutateInsertNode(t, pp, idx + 1, structuredClone(clip)));
+    transactDoc(tab, (t) => {
+      for (let i = 0; i < nodes.length; i++) {
+        mutateInsertNode(t, pp, idx + 1 + i, nodes[i]);
+      }
+    });
   } else {
     const idx = parent.children ? parent.children.length : 0;
-    transactDoc(tab, (t) => mutateInsertNode(t, pPath, idx, structuredClone(clip)));
+    transactDoc(tab, (t) => {
+      for (let i = 0; i < nodes.length; i++) {
+        mutateInsertNode(t, pPath, idx + i, nodes[i]);
+      }
+    });
   }
   statusMessage("Pasted");
 }
@@ -214,28 +325,37 @@ export function showContextMenu(e, path, opts = {}) {
       danger: true,
     });
   }
-  if (workspace.clipboard) {
-    const clip = workspace.clipboard;
+  if (path.length >= 2) {
     items.push({ label: "—" });
     items.push({
       label: "Paste inside",
-      action: () => {
+      action: async () => {
+        const nodes = await readFromClipboard();
+        if (!nodes || nodes.length === 0) return;
         const idx = node.children ? node.children.length : 0;
-        transactDoc(activeTab.value, (t) => mutateInsertNode(t, path, idx, structuredClone(clip)));
+        transactDoc(activeTab.value, (t) => {
+          for (let i = 0; i < nodes.length; i++) {
+            mutateInsertNode(t, path, idx + i, nodes[i]);
+          }
+        });
+        statusMessage("Pasted");
+      },
+    });
+    items.push({
+      label: "Paste after",
+      action: async () => {
+        const nodes = await readFromClipboard();
+        if (!nodes || nodes.length === 0) return;
+        const pp = /** @type {JxPath} */ (parentElementPath(path));
+        const idx = /** @type {number} */ (childIndex(path));
+        transactDoc(activeTab.value, (t) => {
+          for (let i = 0; i < nodes.length; i++) {
+            mutateInsertNode(t, pp, idx + 1 + i, nodes[i]);
+          }
+        });
+        statusMessage("Pasted");
       },
     });
-    if (path.length >= 2) {
-      items.push({
-        label: "Paste after",
-        action: () => {
-          const pp = /** @type {JxPath} */ (parentElementPath(path));
-          const idx = /** @type {number} */ (childIndex(path));
-          transactDoc(activeTab.value, (t) =>
-            mutateInsertNode(t, pp, idx + 1, structuredClone(clip)),
-          );
-        },
-      });
-    }
   }
 
   let x = e.clientX,

package/src/editor/insertion-helper.js

@@ -129,7 +129,8 @@ function onMouseMove(e) {
   if (!_ctx || !_helper) return;
 
   const { getCanvasMode } = _ctx;
-  if (getCanvasMode() !== "design") {
+  const mode = getCanvasMode();
+  if (mode !== "design" && mode !== "edit") {
     hide();
     return;
   }
@@ -222,7 +223,7 @@ function showAt(el, edge, path, parentPath, idx) {
   // Set CSS anchor on target element
   if (_currentAnchor !== el) {
     clearAnchor();
-    el.style.anchorName = "--jx-insert";
+    /** @type {any} */ (el.style).anchorName = "--jx-insert";
     _currentAnchor = el;
   }
 
@@ -258,7 +259,7 @@ function hideNow() {
 
 function clearAnchor() {
   if (_currentAnchor) {
-    _currentAnchor.style.anchorName = "";
+    /** @type {any} */ (_currentAnchor.style).anchorName = "";
     _currentAnchor = null;
   }
 }

package/src/markdown/md-convert.js

@@ -843,6 +843,13 @@ function collapsePropsToAttrMap(propsObj) {
         mdAttrKey = key.slice(1);
       }
       // Strip @ prefix for media queries (inside style.* paths)
+      if (key === "@") {
+        // Bare "@" (no media name) — treat contents as base-level style props
+        if (value && typeof value === "object" && !Array.isArray(value)) {
+          walk(/** @type {Record<string, unknown>} */ (value), prefix);
+        }
+        continue;
+      }
       if (key.startsWith("@--")) {
         mdAttrKey = key.slice(1);
       }

package/src/panels/head-panel.js

@@ -9,11 +9,44 @@ import { html, nothing } from "lit-html";
 import { live } from "lit-html/directives/live.js";
 import { renderFieldRow } from "../ui/field-row.js";
 import { renderMediaPicker } from "../ui/media-picker.js";
-import { debouncedStyleCommit, projectState } from "../store.js";
+import { debouncedStyleCommit, renderOnly, projectState } from "../store.js";
 import { activeTab } from "../workspace/workspace.js";
 import { transactDoc, mutateUpdateFrontmatter } from "../tabs/transact.js";
 import { findContentTypeSchema } from "../utils/studio-utils.js";
 import { isGoogleFontEntry, isGoogleFontPreconnect } from "../utils/google-fonts.js";
+import { invalidateLayoutCache } from "../site-context.js";
+import { getPlatform } from "../platform.js";
+
+// ─── Layout picker ──────────────────────────────────────────────────────────
+
+/** @type {{ name: string; path: string }[] | null} */
+let layoutEntries = null;
+
+async function loadLayoutEntries() {
+  try {
+    const platform = getPlatform();
+    const listing = await platform.listDirectory("layouts");
+    layoutEntries = listing
+      .filter(
+        (/** @type {{ type: string; name: string }} */ f) =>
+          f.type === "file" && f.name.endsWith(".json"),
+      )
+      .map((/** @type {{ type: string; name: string }} */ f) => ({
+        name: f.name
+          .replace(/\.json$/, "")
+          .replace(/[-_]+/g, " ")
+          .replace(/\b\w/g, (c) => c.toUpperCase()),
+        path: `./layouts/${f.name}`,
+      }));
+  } catch {
+    layoutEntries = [];
+  }
+  renderOnly("leftPanel");
+}
+
+export function invalidateLayoutPickerCache() {
+  layoutEntries = null;
+}
 
 // ─── Field definitions ───────────────────────────────────────────────────
 
@@ -282,9 +315,79 @@ export function renderHeadTemplate({ document: doc, applyMutation, renderLeftPan
   const isContent = tab?.doc.mode === "content";
   const frontmatterSection = isContent ? renderFrontmatterSection() : nothing;
 
+  // Layout field
+  const isPage =
+    tab?.documentPath &&
+    projectState?.isSiteProject &&
+    (tab.documentPath.startsWith("pages/") || tab.documentPath.startsWith("./pages/"));
+
+  /** @type {import("lit-html").TemplateResult | symbol} */
+  let layoutSection = nothing;
+  if (isPage) {
+    if (layoutEntries === null) {
+      loadLayoutEntries();
+    } else {
+      const currentLayout = doc.$layout;
+      const defaultLayout = projectState?.projectConfig?.defaults?.layout;
+      const displayValue =
+        currentLayout === false ? "__none__" : currentLayout ? currentLayout : "__default__";
+      const defaultLabel = defaultLayout
+        ? defaultLayout
+            .replace(/^\.\/layouts\//, "")
+            .replace(/\.json$/, "")
+            .replace(/[-_]+/g, " ")
+            .replace(/\b\w/g, (/** @type {string} */ c) => c.toUpperCase())
+        : "";
+
+      layoutSection = html`
+        <div class="imports-section">
+          <div class="imports-section-header">
+            <span class="imports-section-title">Layout</span>
+          </div>
+          <div class="head-section-body">
+            ${renderFieldRow({
+              prop: "layout",
+              label: "Layout",
+              hasValue: currentLayout !== undefined,
+              onClear: () =>
+                applyMutation((/** @type {JxMutableNode} */ d) => {
+                  delete d.$layout;
+                }),
+              widget: html`
+                <sp-picker
+                  size="s"
+                  value=${displayValue}
+                  @change=${(/** @type {Event} */ e) => {
+                    const val = /** @type {HTMLInputElement} */ (e.target).value;
+                    applyMutation((/** @type {JxMutableNode} */ d) => {
+                      if (val === "__default__") delete d.$layout;
+                      else if (val === "__none__") d.$layout = false;
+                      else d.$layout = val;
+                    });
+                    invalidateLayoutCache();
+                  }}
+                >
+                  <sp-menu-item value="__default__"
+                    >Default${defaultLabel ? ` (${defaultLabel})` : ""}</sp-menu-item
+                  >
+                  <sp-menu-item value="__none__">None</sp-menu-item>
+                  <sp-menu-divider></sp-menu-divider>
+                  ${layoutEntries.map(
+                    (/** @type {{ name: string; path: string }} */ l) =>
+                      html`<sp-menu-item value=${l.path}>${l.name}</sp-menu-item>`,
+                  )}
+                </sp-picker>
+              `,
+            })}
+          </div>
+        </div>
+      `;
+    }
+  }
+
   return html`
     <div class="imports-panel">
-      ${frontmatterSection}
+      ${frontmatterSection} ${layoutSection}
 
       <!-- Page section -->
       <div class="imports-section">