@jxsuite/studio 0.33.0 → 0.35.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jxsuite/studio",
-  "version": "0.33.0",
+  "version": "0.35.0",
   "description": "Jx Studio — visual builder for Jx documents",
   "license": "MIT",
   "repository": {
@@ -17,7 +17,8 @@
   "exports": {
     ".": "./src/studio.ts",
     "./platform": "./src/platform.ts",
-    "./types": "./src/types.ts"
+    "./types": "./src/types.ts",
+    "./import-client": "./src/services/import-client.ts"
   },
   "publishConfig": {
     "provenance": true
@@ -36,10 +37,10 @@
   "dependencies": {
     "@atlaskit/pragmatic-drag-and-drop": "^2.0.1",
     "@atlaskit/pragmatic-drag-and-drop-hitbox": "^2.0.0",
-    "@jxsuite/ai": "^0.1.0",
-    "@jxsuite/parser": "^0.33.0",
-    "@jxsuite/runtime": "^0.33.0",
-    "@jxsuite/schema": "^0.33.0",
+    "@jxsuite/ai": "^0.33.0",
+    "@jxsuite/parser": "^0.35.0",
+    "@jxsuite/runtime": "^0.34.1",
+    "@jxsuite/schema": "^0.34.0",
     "@spectrum-web-components/accordion": "^1.12.1",
     "@spectrum-web-components/action-bar": "1.12.1",
     "@spectrum-web-components/action-button": "^1.12.1",
@@ -82,15 +83,14 @@
     "lit": "^3.3.3",
     "lit-html": "^3.3.3",
     "monaco-editor": "^0.55.1",
-    "quikchat": "^1.2.7",
     "yaml": "^2.9.0"
   },
   "devDependencies": {
     "@happy-dom/global-registrator": "^20.10.6",
     "@types/mdast": "^4.0.4",
-    "@webref/css": "^8.6.0",
+    "@webref/css": "^8.6.1",
     "@webref/elements": "^2.7.1",
-    "@webref/idl": "^3.81.1"
+    "@webref/idl": "^3.81.2"
   },
   "//vue-reactivity": "Exact pin required — must match @jxsuite/runtime to avoid cross-boundary proxy bugs"
 }

package/src/browse/browse.ts

@@ -18,9 +18,11 @@ import type { SchemaProperty } from "../settings/schema-field-ui";
 import { invalidateMediaCache } from "../ui/media-picker";
 import { statusMessage } from "../panels/statusbar";
 import { componentRegistry } from "../files/components";
+import { rectOf } from "../utils/geometry";
 
 import { renderPopover, showDialog } from "../ui/layers";
-import { renderComponentPreview } from "../panels/stylebook-panel";
+import { loopbackAssetSrc } from "../canvas/canvas-origin";
+import { renderComponentPreview } from "../panels/component-preview";
 import { buildScope, renderNode, setSkipServerFunctions } from "@jxsuite/runtime";
 import { parseSourceForPath } from "../files/file-ops";
 import {
@@ -448,7 +450,7 @@ function showBrowseContextMenu(
         }
         requestAnimationFrame(() => {
           const popover = el as HTMLElement;
-          const menuRect = popover.getBoundingClientRect();
+          const menuRect = rectOf(popover);
           if (x + menuRect.width > window.innerWidth) {
             x = window.innerWidth - menuRect.width - 4;
           }
@@ -694,6 +696,11 @@ async function loadPreview(el: Element, file: { path: string; category: string }
     return;
   }
 
+  // Component/doc previews instantiate a real runtime custom element that sets img.src verbatim to
+  // A relative path — not a direct-parent lit literal, so it cannot be pre-rewritten via
+  // LoopbackAssetSrc at this template layer. The desktop MutationObserver (plus activate()'s initial
+  // Sweep) still recovers these; the brief stray views:// request is a known cosmetic residual we
+  // Intentionally do NOT over-engineer with a per-component rewrite.
   let preview: HTMLElement | undefined = _previewCache.get(file.path);
   if (!preview) {
     try {
@@ -756,7 +763,7 @@ function renderCard(
       >
         ${isImg
           ? html`<img
-              src="/${file.path}"
+              src=${loopbackAssetSrc(`/${file.path}`)}
               style="max-width:100%;max-height:100%;object-fit:contain"
             />`
           : needsPreview
@@ -916,7 +923,7 @@ export async function renderBrowse(
                 >
                   <sp-table-cell class="browse-name-cell"
                     >${isImage(f.ext)
-                      ? html`<img class="browse-thumb" src="/${f.path}" />`
+                      ? html`<img class="browse-thumb" src=${loopbackAssetSrc(`/${f.path}`)} />`
                       : nothing}${f.name}</sp-table-cell
                   >
                   <sp-table-cell>${f.category}</sp-table-cell>

package/src/canvas/canvas-helpers.ts

@@ -5,31 +5,11 @@
  * multiple canvas-related modules: element lookup, zoom, panel resolution, inline bubbling.
  */
 
-import { canvasPanels, elToPath, getNodeAtPath, parentElementPath, pathsEqual } from "../store";
+import { canvasPanels, getNodeAtPath, parentElementPath } from "../store";
 import { activeTab } from "../workspace/workspace";
 import { isInlineInContext } from "../editor/inline-edit";
 import type { JxPath } from "../state";
 import type { JxMutableNode } from "@jxsuite/schema/types";
-import type { CanvasPanel } from "../panels/canvas-dnd.js";
-
-let _ctx: { getCanvasMode: () => string; getZoom: () => number } | null = null;
-
-/**
- * Initialize the canvas helpers module.
- *
- * @param {{ getCanvasMode: () => string; getZoom: () => number }} ctx
- */
-export function initCanvasHelpers(ctx: { getCanvasMode: () => string; getZoom: () => number }) {
-  _ctx = ctx;
-}
-
-/** Effective zoom scale — always 1 in edit (content) mode, actual zoom otherwise. */
-export function effectiveZoom() {
-  const ctx = _ctx!;
-  return ctx.getCanvasMode() === "edit"
-    ? 1
-    : (ctx.getZoom?.() ?? activeTab.value?.session.ui.zoom ?? 1);
-}
 
 /**
  * Convert a canvas panel's mediaName to an activeMedia value. Panels without a breakpoint (content
@@ -137,39 +117,5 @@ export function findCanvasElement(path: JxPath, canvasEl: HTMLElement) {
     i += 2;
   }
 
-  if (el) {
-    const elPath = elToPath.get(el);
-    if (elPath && pathsEqual(elPath, path)) {
-      return el;
-    }
-  }
-
-  for (const candidate of canvasEl.querySelectorAll("*")) {
-    const p = elToPath.get(candidate);
-    if (p && pathsEqual(p, path)) {
-      return candidate as HTMLElement;
-    }
-  }
-  return null;
-}
-
-/**
- * Build an overlay box descriptor (no DOM creation).
- *
- * @param {Element} el
- * @param {string} type
- * @param {import("../panels/canvas-dnd.js").CanvasPanel} panel
- */
-export function overlayBoxDescriptor(el: Element, type: string, panel: CanvasPanel) {
-  const viewport = panel.viewport as HTMLElement;
-  const vpRect = viewport.getBoundingClientRect();
-  const elRect = el.getBoundingClientRect();
-  const scale = effectiveZoom();
-  return {
-    cls: `overlay-box overlay-${type}`,
-    height: `${elRect.height / scale}px`,
-    left: `${(elRect.left - vpRect.left + viewport.scrollLeft) / scale}px`,
-    top: `${(elRect.top - vpRect.top + viewport.scrollTop) / scale}px`,
-    width: `${elRect.width / scale}px`,
-  };
+  return el ?? null;
 }