@jxsuite/studio 0.19.0 → 0.21.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jxsuite/studio",
-  "version": "0.19.0",
+  "version": "0.21.0",
   "description": "Jx Studio — visual builder for Jx documents",
   "license": "MIT",
   "repository": {
@@ -22,19 +22,24 @@
     "provenance": true
   },
   "scripts": {
-    "build": "bun build ./src/studio.js --outdir dist --target browser --sourcemap=linked && bun build ../../node_modules/monaco-editor/esm/vs/editor/editor.worker.js --outdir dist/workers --target browser --entry-naming editor.worker.js && bun build ../../node_modules/monaco-editor/esm/vs/language/json/json.worker.js --outdir dist/workers --target browser --entry-naming json.worker.js && bun build ../../node_modules/monaco-editor/esm/vs/language/typescript/ts.worker.js --outdir dist/workers --target browser --entry-naming ts.worker.js",
+    "build": "bun build ./src/studio.js --outdir dist --target browser --sourcemap=linked && bun build ./node_modules/monaco-editor/esm/vs/editor/editor.worker.js --outdir dist/workers --target browser --entry-naming editor.worker.js && bun build ./node_modules/monaco-editor/esm/vs/language/json/json.worker.js --outdir dist/workers --target browser --entry-naming json.worker.js && bun build ./node_modules/monaco-editor/esm/vs/language/typescript/ts.worker.js --outdir dist/workers --target browser --entry-naming ts.worker.js",
     "gen:webdata": "bun run scripts/gen-webdata.js",
-    "test": "bun test",
+    "test": "bun test --isolate",
+    "test:coverage": "bun test --isolate --coverage",
     "upgrade": "bunx npm-check-updates -u && bun install"
   },
   "dependencies": {
     "@atlaskit/pragmatic-drag-and-drop": "^1.8.1",
     "@atlaskit/pragmatic-drag-and-drop-hitbox": "^1.1.0",
-    "@jxsuite/runtime": "^0.18.0",
+    "@jxsuite/parser": "^0.21.0",
+    "@jxsuite/runtime": "^0.21.0",
+    "@jxsuite/schema": "^0.21.0",
     "@spectrum-web-components/accordion": "^1.12.1",
     "@spectrum-web-components/action-bar": "1.12.1",
     "@spectrum-web-components/action-button": "^1.12.1",
     "@spectrum-web-components/action-group": "^1.12.1",
+    "@spectrum-web-components/base": "^1.12.1",
+    "@spectrum-web-components/button": "^1.12.1",
     "@spectrum-web-components/checkbox": "^1.12.1",
     "@spectrum-web-components/color-area": "^1.12.1",
     "@spectrum-web-components/color-handle": "^1.12.1",
@@ -42,7 +47,10 @@
     "@spectrum-web-components/combobox": "^1.12.1",
     "@spectrum-web-components/dialog": "^1.12.1",
     "@spectrum-web-components/divider": "^1.12.1",
+    "@spectrum-web-components/field-label": "^1.12.1",
+    "@spectrum-web-components/help-text": "^1.12.1",
     "@spectrum-web-components/icon": "^1.12.1",
+    "@spectrum-web-components/icons-ui": "^1.12.1",
     "@spectrum-web-components/icons-workflow": "^1.12.1",
     "@spectrum-web-components/menu": "^1.12.1",
     "@spectrum-web-components/number-field": "^1.12.1",
@@ -60,9 +68,12 @@
     "@spectrum-web-components/theme": "^1.12.1",
     "@spectrum-web-components/toast": "^1.12.1",
     "@spectrum-web-components/tooltip": "^1.12.1",
-    "@vue/reactivity": "3.5.34",
+    "@spectrum-web-components/underlay": "^1.12.1",
+    "@vue/reactivity": "3.5.35",
+    "lit": "^3.3.3",
     "lit-html": "^3.3.3",
     "monaco-editor": "^0.55.1",
+    "quikchat": "^1.2.7",
     "remark-directive": "^4.0.0",
     "remark-frontmatter": "^5.0.0",
     "remark-gfm": "^4.0.1",
@@ -73,9 +84,10 @@
   },
   "devDependencies": {
     "@happy-dom/global-registrator": "^20.9.0",
-    "@webref/css": "^8.5.6",
+    "@types/mdast": "^4.0.4",
+    "@webref/css": "^8.5.7",
     "@webref/elements": "^2.7.1",
-    "@webref/idl": "^3.78.0"
+    "@webref/idl": "^3.79.0"
   },
   "//vue-reactivity": "Exact pin required — must match @jxsuite/runtime to avoid cross-boundary proxy bugs"
 }

package/src/browse/browse-modal.js

@@ -4,6 +4,7 @@
  */
 
 import { html } from "lit-html";
+import { ref } from "lit-html/directives/ref.js";
 import { renderBrowse } from "./browse.js";
 import { openFileInTab } from "../files/files.js";
 import { openModal } from "../ui/layers.js";
@@ -31,23 +32,25 @@ export function openBrowseModal() {
           <sp-icon-close slot="icon"></sp-icon-close>
         </sp-action-button>
       </div>
-      <div class="browse-modal-content"></div>
+      <div
+        class="browse-modal-content"
+        ${ref((el) => {
+          if (el) {
+            requestAnimationFrame(() => {
+              renderBrowse(/** @type {HTMLElement} */ (el), {
+                openFile: (/** @type {string} */ path) => {
+                  closeBrowseModal();
+                  openFileInTab(path);
+                },
+              });
+            });
+          }
+        })}
+      ></div>
     </div>
   `;
 
   _handle = openModal(tpl);
-
-  requestAnimationFrame(() => {
-    const container = _handle?.host.querySelector(".browse-modal-content");
-    if (container) {
-      renderBrowse(/** @type {HTMLElement} */ (container), {
-        openFile: (/** @type {string} */ path) => {
-          closeBrowseModal();
-          openFileInTab(path);
-        },
-      });
-    }
-  });
 }
 
 export function closeBrowseModal() {

package/src/browse/browse.js

@@ -15,6 +15,8 @@ import { yamlDefault } from "../settings/schema-field-ui.js";
 import { invalidateMediaCache } from "../ui/media-picker.js";
 import { statusMessage } from "../panels/statusbar.js";
 import { componentRegistry } from "../files/components.js";
+
+/** @typedef {import("../files/components.js").ComponentEntry} ComponentEntry */
 import { showDialog, renderPopover } from "../ui/layers.js";
 import { renderComponentPreview } from "../panels/stylebook-panel.js";
 import { renderNode, buildScope, setSkipServerFunctions } from "@jxsuite/runtime";
@@ -150,9 +152,9 @@ function contentTypeFor(filePath) {
   const config = projectState?.projectConfig;
   if (!config?.contentTypes) return null;
   for (const [name, def] of Object.entries(config.contentTypes)) {
-    const d = /** @type {any} */ (def);
+    const d = /** @type {ContentTypeDef} */ (def);
     if (!d.source) continue;
-    const prefix = d.source.replace(/^\.\//, "").split("/**")[0].split("/*")[0];
+    const prefix = d.source.replace(/^\.\//, "").replace(/\/$/, "");
     if (filePath.startsWith(prefix + "/") || filePath === prefix) {
       return name.charAt(0).toUpperCase() + name.slice(1);
     }
@@ -215,8 +217,8 @@ function buildFrontmatterYaml(contentTypeName) {
 
   let yaml = "";
   for (const [field, def] of Object.entries(col.schema.properties)) {
-    const d = /** @type {any} */ (def);
-    yaml += `${field}: ${yamlDefault(d.type, d.format)}\n`;
+    const d = /** @type {{ type?: string; format?: string }} */ (def);
+    yaml += `${field}: ${yamlDefault(d.type || "", d.format || "")}\n`;
   }
   return yaml || "title: Untitled\n";
 }
@@ -230,13 +232,13 @@ function getContentTypeTypes() {
   const config = projectState?.projectConfig;
   if (!config?.contentTypes) return [];
   return Object.entries(config.contentTypes).map(([name, def]) => {
-    const d = /** @type {any} */ (def);
-    const dir = d.source ? d.source.replace(/^\.\//, "").split("/")[0] : name;
+    const d = /** @type {ContentTypeDef} */ (def);
+    const dir = d.source ? d.source.replace(/^\.\//, "").replace(/\/$/, "") : name;
     return {
       key: `contentType:${name}`,
       label: name.charAt(0).toUpperCase() + name.slice(1),
       dir,
-      ext: ".md",
+      ext: `.${d.format || "md"}`,
       contentTypeName: name,
     };
   });
@@ -360,7 +362,22 @@ function showBrowseContextMenu(e, file, container, ctx) {
     y = e.clientY;
 
   _browseCtxHandle = renderPopover(
-    html`<sp-popover open style="position:fixed;left:${x}px;top:${y}px">
+    html`<sp-popover
+      open
+      style="position:fixed;left:${x}px;top:${y}px"
+      ${ref((el) => {
+        if (!el) return;
+        requestAnimationFrame(() => {
+          const popover = /** @type {HTMLElement} */ (el);
+          const menuRect = popover.getBoundingClientRect();
+          if (x + menuRect.width > window.innerWidth) x = window.innerWidth - menuRect.width - 4;
+          if (y + menuRect.height > window.innerHeight)
+            y = window.innerHeight - menuRect.height - 4;
+          popover.style.left = `${x}px`;
+          popover.style.top = `${y}px`;
+        });
+      })}
+    >
       <sp-menu>
         ${items.map((item) =>
           item.label === "\u2014"
@@ -384,18 +401,6 @@ function showBrowseContextMenu(e, file, container, ctx) {
       layer: "dialog",
     },
   );
-
-  requestAnimationFrame(() => {
-    const popover = /** @type {HTMLElement | null} */ (
-      _browseCtxHandle?.host.querySelector("sp-popover")
-    );
-    if (!popover) return;
-    const menuRect = popover.getBoundingClientRect();
-    if (x + menuRect.width > window.innerWidth) x = window.innerWidth - menuRect.width - 4;
-    if (y + menuRect.height > window.innerHeight) y = window.innerHeight - menuRect.height - 4;
-    popover.style.left = `${x}px`;
-    popover.style.top = `${y}px`;
-  });
 }
 
 /**
@@ -415,8 +420,8 @@ async function browseRenameFile(file, container, ctx) {
     invalidateBrowseCache();
     renderBrowse(container, ctx);
     statusMessage(`Renamed to ${newName}`);
-  } catch (/** @type {any} */ e) {
-    statusMessage(`Error: ${e.message}`);
+  } catch (/** @type {unknown} */ e) {
+    statusMessage(`Error: ${/** @type {Error} */ (e).message}`);
   }
 }
 
@@ -439,8 +444,8 @@ async function browseDuplicateFile(file, container, ctx) {
     invalidateBrowseCache();
     renderBrowse(container, ctx);
     statusMessage(`Duplicated as ${copyName}`);
-  } catch (/** @type {any} */ e) {
-    statusMessage(`Error: ${e.message}`);
+  } catch (/** @type {unknown} */ e) {
+    statusMessage(`Error: ${/** @type {Error} */ (e).message}`);
   }
 }
 
@@ -458,8 +463,8 @@ async function browseDeleteFile(file, container, ctx) {
     invalidateBrowseCache();
     renderBrowse(container, ctx);
     statusMessage(`Deleted ${file.name}`);
-  } catch (/** @type {any} */ e) {
-    statusMessage(`Error: ${e.message}`);
+  } catch (/** @type {unknown} */ e) {
+    statusMessage(`Error: ${/** @type {Error} */ (e).message}`);
   }
 }
 
@@ -495,7 +500,7 @@ function showRenameDialog(currentName) {
           style="width:100%"
           value=${value}
           @input=${(/** @type {Event} */ e) => {
-            value = /** @type {any} */ (e.target).value || "";
+            value = /** @type {HTMLInputElement} */ (e.target).value || "";
           }}
           @keydown=${(/** @type {KeyboardEvent} */ e) => {
             if (e.key === "Enter") confirm();
@@ -506,7 +511,7 @@ function showRenameDialog(currentName) {
 
     requestAnimationFrame(() => {
       const layer = document.getElementById("layer-dialog");
-      const tf = /** @type {any} */ (layer?.querySelector("sp-textfield"));
+      const tf = /** @type {HTMLElement | null} */ (layer?.querySelector("sp-textfield"));
       if (tf) {
         tf.focus();
         const input = tf.shadowRoot?.querySelector("input");
@@ -587,7 +592,9 @@ async function loadPreview(el, file) {
   let preview = _previewCache.get(file.path);
   if (!preview) {
     try {
-      const comp = componentRegistry.find((/** @type {any} */ c) => c.path === file.path);
+      const comp = componentRegistry.find(
+        (/** @type {ComponentEntry} */ c) => c.path === file.path,
+      );
       if (comp) {
         preview = /** @type {HTMLElement | undefined} */ (await renderComponentPreview(comp));
       } else {
@@ -686,8 +693,8 @@ export async function renderBrowse(container, ctx) {
       size="s"
       placeholder="Filter files..."
       .value=${searchQuery}
-      @input=${(/** @type {any} */ e) => {
-        searchQuery = e.target.value;
+      @input=${(/** @type {Event} */ e) => {
+        searchQuery = /** @type {HTMLInputElement} */ (e.target).value;
         renderBrowse(container, ctx);
       }}
       @submit=${(/** @type {Event} */ e) => e.preventDefault()}
@@ -698,7 +705,8 @@ export async function renderBrowse(container, ctx) {
       </sp-action-button>
       <sp-popover slot="click-content" tip>
         <sp-menu
-          @change=${(/** @type {any} */ e) => handleNewEntity(e.target.value, container, ctx)}
+          @change=${(/** @type {Event} */ e) =>
+            handleNewEntity(/** @type {HTMLSelectElement} */ (e.target).value, container, ctx)}
         >
           ${ENTITY_TYPES.map((t) => html`<sp-menu-item value=${t.key}>${t.label}</sp-menu-item>`)}
           ${contentTypeTypes.length
@@ -726,9 +734,10 @@ export async function renderBrowse(container, ctx) {
       accept=${UPLOAD_ACCEPT}
       class="browse-upload-input"
       style="display:none"
-      @change=${(/** @type {any} */ e) => {
-        if (e.target.files?.length) handleUpload(e.target.files, container, ctx);
-        e.target.value = "";
+      @change=${(/** @type {Event} */ e) => {
+        const input = /** @type {HTMLInputElement} */ (e.target);
+        if (input.files?.length) handleUpload(input.files, container, ctx);
+        input.value = "";
       }}
     />
     <div class="browse-view-switcher">

package/src/canvas/canvas-diff.js

@@ -6,7 +6,7 @@
  */
 
 /**
- * @typedef {Record<string, any>} JxNode
+ * @typedef {JxMutableNode} JxNode
  *
  * @typedef {"added" | "removed" | "modified"} DiffStatus
  *
@@ -16,8 +16,8 @@
 /**
  * Deep equality check for two values. Ignores function and ref properties.
  *
- * @param {any} a
- * @param {any} b
+ * @param {unknown} a
+ * @param {unknown} b
  * @returns {boolean}
  */
 function valuesEqual(a, b) {
@@ -26,38 +26,46 @@ function valuesEqual(a, b) {
   if (Array.isArray(a) !== Array.isArray(b)) return false;
 
   if (Array.isArray(a)) {
-    if (a.length !== b.length) return false;
-    return a.every((/** @type {any} */ v, /** @type {number} */ i) => valuesEqual(v, b[i]));
+    const bArr = /** @type {unknown[]} */ (b);
+    if (a.length !== bArr.length) return false;
+    return a.every((/** @type {unknown} */ v, /** @type {number} */ i) => valuesEqual(v, bArr[i]));
   }
 
-  const keysA = Object.keys(a).filter(
+  const aObj = /** @type {Record<string, unknown>} */ (a);
+  const bObj = /** @type {Record<string, unknown>} */ (b);
+
+  const keysA = Object.keys(aObj).filter(
     (/** @type {string} */ k) => !k.startsWith("on") && k !== "$ref",
   );
-  const keysB = Object.keys(b).filter(
+  const keysB = Object.keys(bObj).filter(
     (/** @type {string} */ k) => !k.startsWith("on") && k !== "$ref",
   );
 
   if (keysA.length !== keysB.length) return false;
   if (!keysA.every((/** @type {string} */ k) => keysB.includes(k))) return false;
 
-  return keysA.every((/** @type {string} */ k) => valuesEqual(a[k], b[k]));
+  return keysA.every((/** @type {string} */ k) => valuesEqual(aObj[k], bObj[k]));
 }
 
 /**
  * Filter element children from a node's children array.
  *
- * @param {any} node
- * @returns {any[]}
+ * @param {JxMutableNode | undefined} node
+ * @returns {JxMutableNode[]}
  */
 function elementChildren(node) {
   if (!node?.children || !Array.isArray(node.children)) return [];
-  return node.children.filter((/** @type {any} */ c) => c != null && typeof c === "object");
+  return /** @type {JxMutableNode[]} */ (
+    node.children.filter(
+      (/** @type {JxMutableNode | string} */ c) => c != null && typeof c === "object",
+    )
+  );
 }
 
 /**
  * Mark an entire subtree with a diff status.
  *
- * @param {any} node
+ * @param {JxMutableNode} node
  * @param {DiffStatus} status
  * @param {string} path
  * @param {Map<string, DiffStatus>} diffMap
@@ -76,8 +84,8 @@ function markRecursive(node, status, path, diffMap, allPaths) {
 /**
  * Compute structural diff between original and current documents.
  *
- * @param {any} originalDoc - Original document (from git)
- * @param {any} currentDoc - Current document (in memory/on disk)
+ * @param {JxMutableNode | undefined} originalDoc - Original document (from git)
+ * @param {JxMutableNode | undefined} currentDoc - Current document (in memory/on disk)
  * @returns {DiffResult}
  */
 export function computeDocumentDiff(originalDoc, currentDoc) {
@@ -89,8 +97,8 @@ export function computeDocumentDiff(originalDoc, currentDoc) {
   /**
    * Walk both trees in parallel and mark differences.
    *
-   * @param {any} origNode
-   * @param {any} currNode
+   * @param {JxMutableNode | undefined} origNode
+   * @param {JxMutableNode | undefined} currNode
    * @param {string} path
    */
   const walk = (origNode, currNode, path = "") => {

package/src/canvas/canvas-helpers.js

@@ -7,7 +7,7 @@ import { canvasPanels, elToPath, pathsEqual, getNodeAtPath, parentElementPath }
 import { activeTab } from "../workspace/workspace.js";
 import { isInlineInContext } from "../editor/inline-edit.js";
 
-/** @type {any} */
+/** @type {{ getCanvasMode: () => string; getZoom: () => number } | null} */
 let _ctx = null;
 
 /**
@@ -21,9 +21,10 @@ export function initCanvasHelpers(ctx) {
 
 /** Effective zoom scale — always 1 in edit (content) mode, actual zoom otherwise. */
 export function effectiveZoom() {
-  return _ctx.getCanvasMode() === "edit"
+  const ctx = /** @type {{ getCanvasMode: () => string; getZoom: () => number }} */ (_ctx);
+  return ctx.getCanvasMode() === "edit"
     ? 1
-    : (_ctx.getZoom?.() ?? activeTab.value?.session.ui.zoom ?? 1);
+    : (ctx.getZoom?.() ?? activeTab.value?.session.ui.zoom ?? 1);
 }
 
 /** Return the active canvas panel based on the current activeMedia setting. */
@@ -42,10 +43,11 @@ export function getActivePanel() {
  * Walk up the tree from a path, bubbling past inline elements until we find the nearest non-inline
  * ancestor. Returns the original path if already non-inline.
  *
- * @param {any} doc
- * @param {any} path
+ * @param {JxMutableNode | undefined} doc
+ * @param {JxPath} path
  */
 export function bubbleInlinePath(doc, path) {
+  if (!doc) return path;
   let currentPath = path;
   while (currentPath.length >= 2) {
     const node = getNodeAtPath(doc, currentPath);
@@ -55,7 +57,7 @@ export function bubbleInlinePath(doc, path) {
     const childTag = (node.tagName ?? "div").toLowerCase();
     const parentTag = (parentNode.tagName ?? "div").toLowerCase();
     if (!isInlineInContext(childTag, parentTag)) break;
-    currentPath = pPath;
+    currentPath = /** @type {JxPath} */ (pPath);
   }
   return currentPath;
 }
@@ -63,11 +65,13 @@ export function bubbleInlinePath(doc, path) {
 /**
  * Find a canvas DOM element by its document path.
  *
- * @param {any} path
- * @param {any} canvasEl
+ * @param {JxPath} path
+ * @param {HTMLElement} canvasEl
+ * @returns {HTMLElement | null}
  */
 export function findCanvasElement(path, canvasEl) {
-  let el = canvasEl.firstElementChild;
+  /** @type {HTMLElement | null | undefined} */
+  let el = /** @type {HTMLElement | null} */ (canvasEl.firstElementChild);
   if (!el) return null;
   if (path.length === 0) return el;
 
@@ -75,11 +79,11 @@ export function findCanvasElement(path, canvasEl) {
     if (path[i] !== "children" && path[i] !== "cases") return null;
     const idx = path[i + 1];
     if (idx === undefined) {
-      el = el.children[0];
+      el = /** @type {HTMLElement | undefined} */ (el.children[0]);
     } else if (idx === "map") {
-      el = el.children[0]?.children[0];
+      el = /** @type {HTMLElement | undefined} */ (el.children[0]?.children[0]);
     } else {
-      el = el.children[idx];
+      el = /** @type {HTMLElement | undefined} */ (el.children[/** @type {number} */ (idx)]);
     }
     if (!el) break;
   }
@@ -91,7 +95,7 @@ export function findCanvasElement(path, canvasEl) {
 
   for (const candidate of canvasEl.querySelectorAll("*")) {
     const p = elToPath.get(candidate);
-    if (p && pathsEqual(p, path)) return candidate;
+    if (p && pathsEqual(p, path)) return /** @type {HTMLElement} */ (candidate);
   }
   return null;
 }
@@ -99,18 +103,19 @@ export function findCanvasElement(path, canvasEl) {
 /**
  * Build an overlay box descriptor (no DOM creation).
  *
- * @param {any} el
- * @param {any} type
- * @param {any} panel
+ * @param {Element} el
+ * @param {string} type
+ * @param {import("./canvas-render.js").CanvasPanel} panel
  */
 export function overlayBoxDescriptor(el, type, panel) {
-  const vpRect = panel.viewport.getBoundingClientRect();
+  const viewport = /** @type {HTMLElement} */ (panel.viewport);
+  const vpRect = viewport.getBoundingClientRect();
   const elRect = el.getBoundingClientRect();
   const scale = 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`,
+    top: `${(elRect.top - vpRect.top + viewport.scrollTop) / scale}px`,
+    left: `${(elRect.left - vpRect.left + viewport.scrollLeft) / scale}px`,
     width: `${elRect.width / scale}px`,
     height: `${elRect.height / scale}px`,
   };