@jxsuite/studio 1.3.0 → 1.5.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Kevin Shenk
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/canvas.html

@@ -0,0 +1,51 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>Jx Canvas</title>
+    <style>
+      html,
+      body {
+        margin: 0;
+        height: 100%;
+        /* The iframe is sized to its content and NEVER scrolls internally (the parent canvas pans
+           instead, and the parent overlay can't track an internal scroll). Clip here to enforce that:
+           when the content is shorter than the fixed 800px query viewport below, the viewport's empty
+           excess would otherwise become a scrollbar exposing the white iframe background. */
+        overflow: hidden;
+      }
+      /* Fixed-size query container. The runtime transposes the document's viewport units (vh/vw/…) to
+         container units (cqh/cqw/…) in the studio canvas (see runtime `transposeCanvasUnits`), so they
+         resolve against THIS predictable design-viewport box instead of the iframe element. That
+         decouples them from the iframe's height, so the host can size the iframe to its content height
+         (no internal scroll → the parent overlay stays glued) without a `100vh` section feeding back
+         into an ever-growing height. `#jx-canvas-root` overflows this box freely (no paint/overflow
+         containment) and is what the host measures. */
+      #jx-canvas-viewport {
+        container-type: size;
+        container-name: jx-canvas;
+        width: 100%;
+        height: var(--jx-design-viewport-height, 800px);
+      }
+      #jx-canvas-root {
+        min-height: 100%;
+      }
+      /* A page's root should fill the design viewport (short pages still look like real pages —
+         footer at the bottom, full-height heroes). A component DEFINITION is a fragment, not a page:
+         flooring it to the viewport leaves dead space below a short component. When the render stamps
+         the root as a definition (see makeStamper's `data-jx-definition-root`), drop the floor so the
+         host sizes the iframe to the component's own content. */
+      #jx-canvas-root:has(> [data-jx-definition-root]) {
+        min-height: 0;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="jx-canvas-viewport"><div id="jx-canvas-root"></div></div>
+    <!-- Dev: cache-bust so each iframe mount loads the freshest canvas bundle. -->
+    <script type="module">
+      import(`./dist/iframe-entry.js?t=${Date.now()}`);
+    </script>
+  </body>
+</html>

package/dist/iframe-entry.js

@@ -649,7 +649,7 @@ function track(target, type, key) {
         type,
         key
       });
-    }
+    } else {}
   }
 }
 function trigger(target, type, key, newValue, oldValue, oldTarget) {
@@ -669,7 +669,7 @@ function trigger(target, type, key, newValue, oldValue, oldTarget) {
           oldValue,
           oldTarget
         });
-      }
+      } else {}
     }
   };
   startBatch();
@@ -1334,7 +1334,7 @@ class RefImpl {
         type: "get",
         key: "value"
       });
-    }
+    } else {}
     return this._value;
   }
   set value(newValue) {
@@ -1352,7 +1352,7 @@ class RefImpl {
           newValue,
           oldValue
         });
-      }
+      } else {}
     }
   }
 }
@@ -1954,6 +1954,12 @@ var SCHEMA_KEYWORDS = new Set([
 function isMappedArray(value) {
   return isJsonObject(value) && value.$prototype === "Array";
 }
+function isTemplateString(value) {
+  return typeof value === "string" && value.includes("${");
+}
+function bodyReturnsValue(body) {
+  return /\breturn\b/.test(body);
+}
 function isEventBinding(value) {
   return isRef2(value) || isFunctionDef(value) || isExpressionDef(value);
 }
@@ -2347,9 +2353,9 @@ async function resolveFunction(def2, state, key, base) {
   let isComputed = false;
   if (!hasParams) {
     if (typeof def2.body === "string") {
-      isComputed = /\breturn\b/.test(def2.body);
+      isComputed = bodyReturnsValue(def2.body);
     } else if (fn) {
-      isComputed = fn.length <= 1 && /\breturn\b/.test(fn.toString());
+      isComputed = fn.length <= 1 && bodyReturnsValue(fn.toString());
     }
   }
   if (isComputed) {
@@ -2395,6 +2401,7 @@ var RESERVED_KEYS = new Set([
   "cases",
   "observedAttributes"
 ]);
+var warnedRefChildren = new Set;
 function renderNode(def2, state, options) {
   const path = options?._path ?? [];
   if (typeof def2 === "string" || typeof def2 === "number" || typeof def2 === "boolean") {
@@ -2415,12 +2422,22 @@ function renderNode(def2, state, options) {
       localState[key] = isRefObj(val) ? resolveRef(val.$ref, state) : val;
     }
   }
+  if ("$ref" in def2 && !def2.tagName) {
+    const refTarget = String(def2.$ref ?? "");
+    if (!warnedRefChildren.has(refTarget)) {
+      warnedRefChildren.add(refTarget);
+      console.warn(`Jx: a $ref child ("${refTarget}") is not a supported component instance; register the ` + `component in $elements and use its custom-element tag instead (spec §13).`);
+    }
+  }
   const tagName = def2.tagName ?? "div";
   const isCustomEl = tagName.includes("-") && customElements.get(tagName);
   if (def2.$props && isCustomEl) {
     return renderCustomElementWithProps(def2, localState, options, path);
   }
   if (def2.$props) {
+    if (tagName.includes("-")) {
+      return renderCustomElementWithProps(def2, localState, options, path);
+    }
     const { $props: _$props, ...rest } = def2;
     return renderNode(rest, mergeProps(def2, localState), options);
   }
@@ -2451,9 +2468,6 @@ function renderNode(def2, state, options) {
   }
   return el;
 }
-function isTemplateString(val) {
-  return typeof val === "string" && val.includes("${");
-}
 function applyProperties(el, def2, state) {
   for (const [key, val] of Object.entries(def2)) {
     if (RESERVED_KEYS.has(key)) {
@@ -6938,5 +6952,5 @@ export {
   bootCanvasIframe
 };
 
-//# debugId=4938332B50832C2764756E2164756E21
+//# debugId=81835478E00D339C64756E2164756E21
 //# sourceMappingURL=iframe-entry.js.map