@jxsuite/studio 5.0.0 → 5.1.0

package/dist/chunks/studio-zdn2g6dt.js

@@ -0,0 +1,148 @@
+import {
+  getPlatform2
+} from "./studio-6nzaktvy.js";
+import {
+  projectState
+} from "./studio-6ewqv390.js";
+
+// ../schema/src/component-meta.ts
+function collectSlotDefs(node, out = []) {
+  if (!node || typeof node !== "object" || Array.isArray(node)) {
+    return out;
+  }
+  const el = node;
+  if (el.tagName === "slot") {
+    const attrs = el.attributes;
+    const rawName = attrs?.name;
+    const name = typeof rawName === "string" ? rawName.trim() : "";
+    const { children } = el;
+    out.push({
+      name,
+      ...Array.isArray(children) && children.length > 0 ? { fallback: children } : {}
+    });
+  }
+  if (Array.isArray(el.children)) {
+    for (const c of el.children) {
+      collectSlotDefs(c, out);
+    }
+  }
+  return out;
+}
+function isPropEntry(def) {
+  if (def == null) {
+    return false;
+  }
+  if (typeof def !== "object") {
+    return true;
+  }
+  const obj = def;
+  return !obj.$prototype && !obj.$handler && !obj.$compute;
+}
+function componentMetaFrom(doc, path) {
+  if (!doc || typeof doc !== "object" || Array.isArray(doc)) {
+    return null;
+  }
+  const content = doc;
+  const { tagName } = content;
+  if (typeof tagName !== "string" || !tagName.includes("-")) {
+    return null;
+  }
+  const slots = collectSlotDefs(content);
+  const state = content.state ?? {};
+  return {
+    $id: typeof content.$id === "string" && content.$id ? content.$id : null,
+    hasElements: Array.isArray(content.$elements) && content.$elements.length > 0,
+    path,
+    props: Object.entries(state).filter(([, def]) => isPropEntry(def)).map(([name, def]) => {
+      if (typeof def !== "object" || def === null) {
+        return { default: def, name, type: typeof def };
+      }
+      const obj = def;
+      return {
+        default: obj.default,
+        format: obj.format,
+        name,
+        type: obj.type
+      };
+    }),
+    ...slots.length > 0 ? { slots } : {},
+    tagName
+  };
+}
+
+// src/files/components.ts
+var componentRegistry2 = [];
+var _componentRegistryLoaded = false;
+async function loadComponentRegistry2() {
+  try {
+    const platform = getPlatform2();
+    componentRegistry2 = await platform.discoverComponents(projectState?.projectRoot || undefined);
+    _componentRegistryLoaded = true;
+  } catch {
+    _componentRegistryLoaded = true;
+  }
+}
+function noteComponentSaved2(path, doc) {
+  if (!path) {
+    return false;
+  }
+  const index = componentRegistry2.findIndex((c) => c.path === path);
+  const meta = componentMetaFrom(doc, path);
+  if (!meta) {
+    if (index === -1) {
+      return false;
+    }
+    componentRegistry2.splice(index, 1);
+    return true;
+  }
+  const entry = meta;
+  if (index === -1) {
+    componentRegistry2.push(entry);
+  } else {
+    componentRegistry2[index] = entry;
+  }
+  return true;
+}
+function buildComponentInstance2(comp) {
+  const $props = Object.fromEntries((comp.props ?? []).map((p) => [p.name, p.default !== undefined ? p.default : ""]));
+  const children = [];
+  for (const slot of comp.slots ?? []) {
+    for (const child of structuredClone(slot.fallback ?? [])) {
+      if (!slot.name) {
+        children.push(child);
+      } else if (typeof child === "object" && child !== null && typeof child.tagName === "string") {
+        child.attributes = { slot: slot.name, ...child.attributes };
+        children.push(child);
+      } else {
+        children.push({ attributes: { slot: slot.name }, children: [child], tagName: "span" });
+      }
+    }
+  }
+  return {
+    $props,
+    tagName: comp.tagName,
+    ...children.length > 0 ? { children } : {}
+  };
+}
+function computeRelativePath2(fromDocPath, toCompPath) {
+  if (!fromDocPath) {
+    return `./${toCompPath}`;
+  }
+  const from = fromDocPath.replaceAll("\\", "/");
+  const to = toCompPath.replaceAll("\\", "/");
+  const fromDir = from.includes("/") ? from.slice(0, from.lastIndexOf("/")) : "";
+  const fromParts = fromDir.split("/").filter(Boolean);
+  const toParts = to.split("/").filter(Boolean);
+  let common = 0;
+  while (common < fromParts.length && common < toParts.length && fromParts[common] === toParts[common]) {
+    common += 1;
+  }
+  const ups = fromParts.length - common;
+  const remaining = toParts.slice(common);
+  return (ups > 0 ? "../".repeat(ups) : "./") + remaining.join("/");
+}
+
+export { componentMetaFrom, componentRegistry2, loadComponentRegistry2, noteComponentSaved2, buildComponentInstance2, computeRelativePath2 };
+
+//# debugId=466165F8ABAECB0564756E2164756E21
+//# sourceMappingURL=studio-zdn2g6dt.js.map

package/dist/chunks/{workspace-wrew8zk4.js → workspace-t55jdjbx.js}

@@ -27,10 +27,10 @@ import {
   moveTabToPane2,
   renameTab2,
   registerTabCommands2
-} from "./studio-az3zd49t.js";
+} from "./studio-k75n7vhp.js";
 import"./studio-q3x06vmj.js";
 import"./studio-6ewqv390.js";
-import"./studio-79y5sz51.js";
+import"./studio-vw7mzp6z.js";
 import"./studio-6nzaktvy.js";
 import"./studio-p1dw8wfw.js";
 import"./studio-7r42c6ca.js";
@@ -66,4 +66,4 @@ export {
 };
 
 //# debugId=38ABE52702AF922364756E2164756E21
-//# sourceMappingURL=workspace-wrew8zk4.js.map
+//# sourceMappingURL=workspace-t55jdjbx.js.map

package/dist/iframe-entry.js

@@ -28,7 +28,7 @@ var __chunks = (base, ids, nodes, entry) => {
   __chunkSeen ||= {};
   __preload(ids[entry], 1);
 };
-__chunks(import.meta.url,["f4ktqr2q","a73p0pqm","eptb614w","abk6qyee","780pvfbv","3sqv46sn","xgg3kfw7","yy10wk9r","5cndyft8","sp6tna8v","47z3ytva","2r16ez41","g7nm1rgb","t0n6h2rn","wbp1cdws","xbh5bhtr","v17df7b8","anwybnkn","44ez96fc","5e7jev23","s890b918","6v2ac08j","q99sy9rf","nbyxee1y","15g3n6xv","b27vq81n"],[["./iframe-entry.js"],["./chunks/tree-a73p0pqm.js"],["./chunks/tooltip-eptb614w.js",23],["./chunks/textfield-abk6qyee.js"],["./chunks/toast-780pvfbv.js",24],["./chunks/toast-host-3sqv46sn.js",24],["./chunks/color-xgg3kfw7.js",25],["./chunks/icons-yy10wk9r.js"],["./chunks/number-field-5cndyft8.js"],["./chunks/action-group-sp6tna8v.js"],["./chunks/popover-47z3ytva.js",23],["./chunks/select-2r16ez41.js"],["./chunks/split-g7nm1rgb.js"],["./chunks/swatch-group-t0n6h2rn.js"],["./chunks/tabs-wbp1cdws.js"],["./chunks/toolbar-xbh5bhtr.js"],["./chunks/color-area-v17df7b8.js",25],["./chunks/color-field-anwybnkn.js",25,23],["./chunks/color-slider-44ez96fc.js",25],["./chunks/combobox-5e7jev23.js",23],["./chunks/dialog-s890b918.js"],["./chunks/listbox-6v2ac08j.js"],["./chunks/menu-q99sy9rf.js",23],["./chunks/iframe-entry-nbyxee1y.js"],["./chunks/iframe-entry-15g3n6xv.js"],["./chunks/iframe-entry-b27vq81n.js"]],0);
+__chunks(import.meta.url,["1zk4r753","a73p0pqm","eptb614w","abk6qyee","780pvfbv","3sqv46sn","xgg3kfw7","yy10wk9r","5cndyft8","sp6tna8v","47z3ytva","2r16ez41","g7nm1rgb","t0n6h2rn","wbp1cdws","xbh5bhtr","v17df7b8","anwybnkn","44ez96fc","5e7jev23","s890b918","6v2ac08j","q99sy9rf","nbyxee1y","15g3n6xv","b27vq81n"],[["./iframe-entry.js"],["./chunks/tree-a73p0pqm.js"],["./chunks/tooltip-eptb614w.js",23],["./chunks/textfield-abk6qyee.js"],["./chunks/toast-780pvfbv.js",24],["./chunks/toast-host-3sqv46sn.js",24],["./chunks/color-xgg3kfw7.js",25],["./chunks/icons-yy10wk9r.js"],["./chunks/number-field-5cndyft8.js"],["./chunks/action-group-sp6tna8v.js"],["./chunks/popover-47z3ytva.js",23],["./chunks/select-2r16ez41.js"],["./chunks/split-g7nm1rgb.js"],["./chunks/swatch-group-t0n6h2rn.js"],["./chunks/tabs-wbp1cdws.js"],["./chunks/toolbar-xbh5bhtr.js"],["./chunks/color-area-v17df7b8.js",25],["./chunks/color-field-anwybnkn.js",25,23],["./chunks/color-slider-44ez96fc.js",25],["./chunks/combobox-5e7jev23.js",23],["./chunks/dialog-s890b918.js"],["./chunks/listbox-6v2ac08j.js"],["./chunks/menu-q99sy9rf.js",23],["./chunks/iframe-entry-nbyxee1y.js"],["./chunks/iframe-entry-15g3n6xv.js"],["./chunks/iframe-entry-b27vq81n.js"]],0);
 
 // src/canvas/iframe-channel.ts
 var ENVELOPE = "jx:canvas";
@@ -3795,6 +3795,7 @@ function renderMappedArrayInto(parentEl, arrayDef, state, options) {
   parentEl.append(anchor);
   const { items: itemsSrc, map: mapDef, filter: filterRef, sort: sortRef, key: keyRef } = arrayDef;
   const keyPointer = isRefObj(keyRef) ? keyRef.$ref : null;
+  const instancePath = _instancePath;
   let warned = false;
   const warnOnce = (message) => {
     if (!warned) {
@@ -3882,7 +3883,7 @@ function renderMappedArrayInto(parentEl, arrayDef, state, options) {
     }
     pauseTracking();
     try {
-      reconcile(list, keys);
+      underInstancePath(reexpand(instancePath), () => reconcile(list, keys));
     } finally {
       resetTracking();
     }
@@ -3946,6 +3947,7 @@ function resolveTagName(tagName, scope) {
 function renderSwitch(def, state, options) {
   const path = options?._path ?? [];
   const container = document.createElement(resolveTagName(def.tagName, state));
+  const instancePath = _instancePath;
   if (options?.onNodeCreated) {
     options.onNodeCreated(container, path, def, state);
   }
@@ -3993,13 +3995,13 @@ function renderSwitch(def, state, options) {
           return;
         }
         container.replaceChildren();
-        scope.run(() => container.append(renderNode(doc, childScope, childOpts)));
+        underInstancePath(reexpand(instancePath), () => scope.run(() => container.append(renderNode(doc, childScope, childOpts))));
       }).catch((error) => console.error("Jx $switch: failed to load external case", caseDef.$ref, error));
       return;
     }
     pauseTracking();
     try {
-      scope.run(() => container.append(renderNode(caseDef, state, childOpts)));
+      underInstancePath(reexpand(instancePath), () => scope.run(() => container.append(renderNode(caseDef, state, childOpts))));
     } finally {
       resetTracking();
     }
@@ -4659,6 +4661,65 @@ async function registerElements(elements, base, ctx) {
     await defineElement(doc, href);
   }
 }
+var MAX_COMPONENT_NESTING = 32;
+var ROOT_INSTANCE_PATH = { expansion: 0, frames: [] };
+var _instancePath = ROOT_INSTANCE_PATH;
+function underInstancePath(path, fn) {
+  const was = _instancePath;
+  _instancePath = path;
+  try {
+    return fn();
+  } finally {
+    _instancePath = was;
+  }
+}
+function reexpand(path) {
+  return { expansion: path.frames.length, frames: path.frames };
+}
+function samePropValue(a, b) {
+  if (Object.is(a, b)) {
+    return true;
+  }
+  if (!isPlainData(a) || !isPlainData(b)) {
+    return false;
+  }
+  try {
+    return JSON.stringify(a) === JSON.stringify(b);
+  } catch {
+    return false;
+  }
+}
+function isPlainData(value) {
+  if (typeof value !== "object" || value === null) {
+    return false;
+  }
+  const raw = toRaw(value);
+  if (Array.isArray(raw)) {
+    return true;
+  }
+  const proto = Object.getPrototypeOf(raw);
+  return proto === Object.prototype || proto === null;
+}
+function sameFrame(a, b) {
+  if (a.tag !== b.tag) {
+    return false;
+  }
+  const keys = Object.keys(a.props);
+  if (keys.length !== Object.keys(b.props).length) {
+    return false;
+  }
+  return keys.every((key) => Object.hasOwn(b.props, key) && samePropValue(a.props[key], b.props[key]));
+}
+function extendInstancePath(path, frame) {
+  const chain = [...path.frames.map((f) => f.tag), frame.tag].join(" → ");
+  if (path.frames.slice(path.expansion).some((f) => sameFrame(f, frame))) {
+    throw new Error(`Component <${frame.tag}> renders itself: ${chain}. A component cannot appear inside its own ` + `definition with the same props — the expansion would never end.`);
+  }
+  if (path.frames.length >= MAX_COMPONENT_NESTING) {
+    throw new Error(`Component nesting exceeds ${MAX_COMPONENT_NESTING} levels: ${chain}. A component that renders itself with changing props needs a case that stops.`);
+  }
+  return { expansion: path.expansion, frames: [...path.frames, frame] };
+}
 var _definedSources = new Set;
 async function defineElement(source, baseUrl) {
   let base = baseUrl;
@@ -4701,6 +4762,8 @@ async function defineElement(source, baseUrl) {
         return;
       }
       this._jxInitialized = true;
+      const enclosingPath = _instancePath;
+      const supplied = {};
       const live = _elementDefs.get(tagName) ?? { base: initialBase, doc: initialDef };
       const def = live.doc;
       const defBase = live.base;
@@ -4708,6 +4771,7 @@ async function defineElement(source, baseUrl) {
       for (const attr of observedAttrs) {
         if (this.hasAttribute(attr)) {
           absorbAttribute(state, attr, this.getAttribute(attr));
+          supplied[attr] = this.getAttribute(attr);
         }
       }
       const propsAttr = this.dataset.jxProps;
@@ -4720,6 +4784,7 @@ async function defineElement(source, baseUrl) {
             }
             if (key in (def.state ?? {})) {
               state[key] = val;
+              supplied[key] = val;
             }
           }
         } catch {}
@@ -4734,6 +4799,7 @@ async function defineElement(source, baseUrl) {
         }
         if (key in (def.state ?? {})) {
           state[key] = this.getAttribute(name);
+          supplied[key] = this.getAttribute(name);
           this.removeAttribute(name);
         }
       }
@@ -4743,8 +4809,26 @@ async function defineElement(source, baseUrl) {
         }
         if (key in this && this[key] !== undefined && instanceSupplies(this, key)) {
           state[key] = this[key];
+          supplied[key] = this[key];
         }
       }
+      let ownPath;
+      try {
+        ownPath = extendInstancePath(enclosingPath, { props: supplied, tag: tagName });
+      } catch (error) {
+        this.replaceChildren();
+        if (!this.isConnected) {
+          return;
+        }
+        console.error(`Jx: <${tagName}> was not rendered:`, error);
+        this.dispatchEvent(new ErrorEvent("jx-error", {
+          bubbles: true,
+          composed: true,
+          error,
+          message: error instanceof Error ? error.message : String(error)
+        }));
+        return;
+      }
       for (const key of Object.keys(def.state ?? {})) {
         if (isPrivateStateKey(key)) {
           continue;
@@ -4774,9 +4858,11 @@ async function defineElement(source, baseUrl) {
       const wasInside = _canvasInsideStampedHost;
       _canvasInsideStampedHost ||= this.dataset.jxPath !== undefined;
       try {
-        for (const childDef of children) {
-          this.append(renderNode(childDef, state));
-        }
+        underInstancePath(ownPath, () => {
+          for (const childDef of children) {
+            this.append(renderNode(childDef, state));
+          }
+        });
       } finally {
         _canvasInsideStampedHost = wasInside;
       }
@@ -5074,13 +5160,14 @@ function adjacentBlock(container, path, direction, isEditable) {
 
 // ../site/src/site-style.ts
 var SITE_STYLE_ID = "jx-site-style";
-function buildSiteStyleCSS(siteStyle, mediaQueries, transpose) {
+function buildSiteStyleCSS(siteStyle, mediaQueries, transpose, resolveValue) {
   const rules = [];
   const push = (style, selector) => {
     for (const rule of buildStyleRules(style, {
       mediaQueries,
       scope: selector,
-      transposeValue: transpose
+      transposeValue: transpose,
+      ...resolveValue ? { resolveValue: (property, value) => resolveValue(property, value, selector) } : {}
     })) {
       rules.push(rule.text);
     }
@@ -9778,5 +9865,5 @@ export {
   startCanvasIframe
 };
 
-//# debugId=54293E8C2DCDA4AF64756E2164756E21
+//# debugId=2FA5492A7FC7235764756E2164756E21
 //# sourceMappingURL=iframe-entry.js.map