@cratis/scene 0.114.1 → 0.115.0

package/dist/Prototypes/Rendering/index.d.ts

@@ -7,3 +7,5 @@ export * from './PrototypeThumbnail';
 export * from './PrototypePreview';
 export * from './PrototypePreviewFit';
 export * from './fitPrototypePreview';
+export * from './prototypeElementReading';
+export * from './renderPrototypeElement';

package/dist/Prototypes/Rendering/prototypeElementReading.d.ts

@@ -0,0 +1,15 @@
+import type { IComponent } from '../../IComponent';
+import type { UIElement } from '../../UIElement';
+export declare const elementPosition: (element: UIElement | IComponent) => {
+    x: number;
+    y: number;
+};
+export declare const elementSize: (element: UIElement | IComponent) => {
+    width: number;
+    height: number;
+};
+export declare const nativePreview: (element: UIElement | IComponent) => {
+    type: string;
+    label: string;
+} | undefined;
+export declare const elementCaption: (element: UIElement | IComponent) => string;

package/dist/Prototypes/Rendering/renderPrototypeElement.d.ts

@@ -0,0 +1,4 @@
+import type { ReactNode } from 'react';
+import type { IComponent } from '../../IComponent';
+import type { UIElement } from '../../UIElement';
+export declare const renderPrototypeElement: (element: UIElement | IComponent) => ReactNode;

package/dist/Prototypes/index.js

@@ -1,7 +1,8 @@
-import { c as C, f as p, k as ut } from "../Scene-DaQtzf1e.js";
-import { createContext as G, useContext as U, useEffect as S } from "react";
-import { Fragment as A, jsx as n, jsxs as T } from "react/jsx-runtime";
-import { createPortal as j } from "react-dom";
+import { c as $, f as l, k as ut } from "../Scene-DaQtzf1e.js";
+import { a as M, i as G, n as ft, r as U, t as bt } from "../renderPrototypeElement-Xm7OIVPs.js";
+import { createContext as S, useContext as j, useEffect as V } from "react";
+import { Fragment as A, jsx as n, jsxs as E } from "react/jsx-runtime";
+import { createPortal as q } from "react-dom";
 var L = {
   prototypeThumbnail: {
     openEditor: "Open prototype editor",
@@ -12,26 +13,26 @@ var L = {
     title: "Prototype preview",
     close: "Close preview"
   }
-}, D = G(L), k = () => U(D), xt = ({ messages: e, children: t }) => /* @__PURE__ */ n(D.Provider, {
-  value: e,
-  children: t
-}), V = [
+}, D = S(L), k = () => j(D), Ht = ({ messages: t, children: e }) => /* @__PURE__ */ n(D.Provider, {
+  value: t,
+  children: e
+}), J = [
   "#f66",
   "#fa0",
   "#3c3"
-], q = ({ size: e }) => /* @__PURE__ */ n(A, { children: V.map((t, o) => /* @__PURE__ */ n("div", {
+], K = ({ size: t }) => /* @__PURE__ */ n(A, { children: J.map((e, i) => /* @__PURE__ */ n("div", {
   className: "prototype-window-traffic-light",
   style: {
-    border: `${e ? Math.max(1, e / 8) : 1.5}px solid ${t}`,
-    ...e ? {
-      width: e,
-      height: e
+    border: `${t ? Math.max(1, t / 8) : 1.5}px solid ${e}`,
+    ...t ? {
+      width: t,
+      height: t
     } : {}
   }
-}, o)) }), M = 16, J = 8, K = {
+}, i)) }), W = 16, Q = 8, X = {
   width: 180,
   height: 36
-}, Q = {
+}, Y = {
   dataTable: {
     width: 360,
     height: 120
@@ -48,32 +49,32 @@ var L = {
     width: 300,
     height: 150
   }
-}, X = (e) => !(e.width > 0) || !(e.height > 0);
-function Y(e, t) {
-  let o = M;
-  return e.map((i) => {
-    if (!i.native || !X(i.size)) return {
-      position: i.position,
-      size: i.size
+}, Z = (t) => !(t.width > 0) || !(t.height > 0);
+function z(t, e) {
+  let i = W;
+  return t.map((o) => {
+    if (!o.native || !Z(o.size)) return {
+      position: o.position,
+      size: o.size
     };
-    const r = Q[i.name] ?? K;
-    if (!t) return {
-      position: i.position,
-      size: r
+    const a = Y[o.name] ?? X;
+    if (!e) return {
+      position: o.position,
+      size: a
     };
     const s = {
-      x: M,
-      y: o
+      x: W,
+      y: i
     };
-    return o += r.height + J, {
+    return i += a.height + Q, {
       position: s,
-      size: r
+      size: a
     };
   });
 }
-var Z = (e) => {
-  switch (e) {
-    case p.flexRow:
+var tt = (t) => {
+  switch (t) {
+    case l.flexRow:
       return {
         display: "flex",
         flexDirection: "row",
@@ -82,14 +83,14 @@ var Z = (e) => {
         padding: 12,
         alignContent: "flex-start"
       };
-    case p.flexColumn:
+    case l.flexColumn:
       return {
         display: "flex",
         flexDirection: "column",
         gap: 12,
         padding: 12
       };
-    case p.grid:
+    case l.grid:
       return {
         display: "grid",
         gridTemplateColumns: "repeat(auto-fill, minmax(180px, 1fr))",
@@ -100,52 +101,19 @@ var Z = (e) => {
     default:
       return {};
   }
-}, z = 900, tt = 640, et = 40, ot = 150, it = 16, rt = (e) => {
-  const t = e;
-  if (t.position && typeof t.position.x == "number") return {
-    x: t.position.x,
-    y: t.position.y ?? 0
-  };
-  const o = t.properties?.canvas ?? {};
-  return {
-    x: o.x ?? 0,
-    y: o.y ?? 0
-  };
-}, at = (e) => {
-  const t = e;
-  return t.size && typeof t.size.width == "number" ? {
-    width: t.size.width,
-    height: t.size.height ?? 0
-  } : {
-    width: t.width ?? 0,
-    height: t.height ?? 0
-  };
-}, N = (e) => {
-  const t = e;
-  if (typeof t.componentName != "string" || t.componentName.includes(".")) return;
-  const o = t.properties && typeof t.properties == "object" ? t.properties : {}, i = [
-    o.label,
-    o.text,
-    o.title,
-    t.componentName
-  ].find((r) => typeof r == "string" && r.length > 0);
-  return typeof i == "string" ? {
-    type: t.componentName,
-    label: i
-  } : void 0;
-}, nt = ({ elements: e, windowSize: t, layout: o = p.absolute, onClick: i, width: r = ot, titleBarHeight: s = it, openTitle: c }) => {
-  const h = k().prototypeThumbnail, w = t && t.width > 0 ? t.width : z, v = t && t.height > 0 ? t.height : tt, d = o !== p.absolute, l = o === p.grid, m = e.filter(Boolean).map(C), F = Y(m.map((a) => ({
-    native: N(a) !== void 0,
-    name: String(a.componentName ?? ""),
-    position: rt(a),
-    size: at(a)
-  })), !d), f = w, E = Math.max(1, v - et), b = r / f, R = Math.round(f * b), B = Math.round(E * b), O = m.map((a, g) => ({
-    element: a,
+}, et = 900, ot = 640, rt = 40, it = 150, at = 16, nt = ({ elements: t, windowSize: e, layout: i = l.absolute, onClick: o, width: a = it, titleBarHeight: s = at, openTitle: c }) => {
+  const h = k().prototypeThumbnail, w = e && e.width > 0 ? e.width : et, v = e && e.height > 0 ? e.height : ot, p = i !== l.absolute, d = i === l.grid, m = t.filter(Boolean).map($), F = z(m.map((r) => ({
+    native: M(r) !== void 0,
+    name: String(r.componentName ?? ""),
+    position: U(r),
+    size: G(r)
+  })), !p), f = w, x = Math.max(1, v - rt), b = a / f, R = Math.round(f * b), B = Math.round(x * b), C = m.map((r, g) => ({
+    element: r,
     ...F[g]
-  })), H = /* @__PURE__ */ T(A, { children: [/* @__PURE__ */ T("div", {
+  })), H = /* @__PURE__ */ E(A, { children: [/* @__PURE__ */ E("div", {
     className: "prototype-thumbnail-title-bar",
     style: { height: s },
-    children: [/* @__PURE__ */ n(q, { size: Math.round(s * 0.375) }), /* @__PURE__ */ n("span", {
+    children: [/* @__PURE__ */ n(K, { size: Math.round(s * 0.375) }), /* @__PURE__ */ n("span", {
       className: "prototype-thumbnail-title",
       children: h.windowTitle
     })]
@@ -156,15 +124,15 @@ var Z = (e) => {
       className: "prototype-thumbnail-canvas-scaler",
       style: {
         width: f,
-        height: E,
+        height: x,
         transform: `scale(${b})`,
         transformOrigin: "top left",
-        ...Z(o)
+        ...tt(i)
       },
-      children: O.map(({ element: a, position: g, size: y }) => {
-        const I = String(a.id), P = d ? {
+      children: C.map(({ element: r, position: g, size: y }) => {
+        const I = String(r.id), P = p ? {
           position: "relative",
-          width: l ? "100%" : y.width,
+          width: d ? "100%" : y.width,
           height: y.height,
           flexShrink: 0
         } : {
@@ -174,24 +142,24 @@ var Z = (e) => {
           width: y.width,
           height: y.height
         };
-        if ("RenderPrototype" in a && typeof a.RenderPrototype == "function") return /* @__PURE__ */ n("div", {
+        if ("RenderPrototype" in r && typeof r.RenderPrototype == "function") return /* @__PURE__ */ n("div", {
           style: {
             ...P,
             pointerEvents: "none",
             overflow: "hidden"
           },
-          children: a.RenderPrototype({
-            component: a,
-            label: a.label
+          children: r.RenderPrototype({
+            component: r,
+            label: r.label
           })
         }, I);
-        const x = N(a), $ = x ? " prototype-thumbnail-element--native" : "type" in a && typeof a.type == "string" ? ` prototype-thumbnail-element--${a.type}` : "";
+        const T = M(r), O = T ? " prototype-thumbnail-element--native" : "type" in r && typeof r.type == "string" ? ` prototype-thumbnail-element--${r.type}` : "";
         return /* @__PURE__ */ n("div", {
-          className: `prototype-thumbnail-element${$}`,
+          className: `prototype-thumbnail-element${O}`,
           style: P,
-          children: x && /* @__PURE__ */ n("span", {
+          children: T && /* @__PURE__ */ n("span", {
             className: "prototype-thumbnail-element__label",
-            children: x.label
+            children: T.label
           })
         }, I);
       })
@@ -200,9 +168,9 @@ var Z = (e) => {
     width: R,
     height: s + B
   };
-  return i ? /* @__PURE__ */ n("button", {
+  return o ? /* @__PURE__ */ n("button", {
     className: "prototype-thumbnail",
-    onClick: i,
+    onClick: o,
     title: c ?? h.openEditor,
     style: _,
     children: H
@@ -213,12 +181,12 @@ var Z = (e) => {
     style: _,
     children: H
   });
-}, st = 900, ht = 640, W = 40, pt = 24, lt = 0.9, dt = 0.85, ct = (e, t) => {
-  const o = e && e.width > 0 ? e.width : st, i = e && e.height > 0 ? e.height : ht, r = Math.max(0.1, Math.min(1, t.width * lt / o, t.height * dt / i)), s = Math.round(o * r);
+}, st = 900, ht = 640, N = 40, lt = 24, dt = 0.9, pt = 0.85, ct = (t, e) => {
+  const i = t && t.width > 0 ? t.width : st, o = t && t.height > 0 ? t.height : ht, a = Math.max(0.1, Math.min(1, e.width * dt / i, e.height * pt / o)), s = Math.round(i * a);
   return {
     width: s,
-    canvasHeight: Math.round(Math.max(1, i - W) * (s / o)),
-    titleBarHeight: Math.max(pt, Math.round(W * r))
+    canvasHeight: Math.round(Math.max(1, o - N) * (s / i)),
+    titleBarHeight: Math.max(lt, Math.round(N * a))
   };
 }, vt = () => typeof window > "u" ? {
   width: 1280,
@@ -226,36 +194,36 @@ var Z = (e) => {
 } : {
   width: window.innerWidth,
   height: window.innerHeight
-}, mt = (e, t, o, i) => {
-  if (!e || e.width <= 0) return;
-  const r = (i.width - t) / 2, s = (i.height - o) / 2;
-  return `translate(${Math.round(e.left - r)}px, ${Math.round(e.top - s)}px) scale(${(e.width / t).toFixed(4)})`;
-}, u = (e) => e.stopPropagation(), Tt = ({ elements: e, windowSize: t, layout: o = p.absolute, sourceRect: i, onClose: r }) => {
+}, mt = (t, e, i, o) => {
+  if (!t || t.width <= 0) return;
+  const a = (o.width - e) / 2, s = (o.height - i) / 2;
+  return `translate(${Math.round(t.left - a)}px, ${Math.round(t.top - s)}px) scale(${(t.width / e).toFixed(4)})`;
+}, u = (t) => t.stopPropagation(), _t = ({ elements: t, windowSize: e, layout: i = l.absolute, sourceRect: o, onClose: a }) => {
   const s = k().prototypePreview ?? L.prototypePreview;
-  S(() => {
-    const l = (m) => {
-      m.key === "Escape" && r();
+  V(() => {
+    const d = (m) => {
+      m.key === "Escape" && a();
     };
-    return window.addEventListener("keydown", l), () => window.removeEventListener("keydown", l);
-  }, [r]);
-  const c = vt(), h = ct(t, c), w = h.titleBarHeight + h.canvasHeight, v = mt(i, h.width, w, c), d = /* @__PURE__ */ n("div", {
+    return window.addEventListener("keydown", d), () => window.removeEventListener("keydown", d);
+  }, [a]);
+  const c = vt(), h = ct(e, c), w = h.titleBarHeight + h.canvasHeight, v = mt(o, h.width, w, c), p = /* @__PURE__ */ n("div", {
     className: "prototype-preview-backdrop",
     role: "dialog",
     "aria-modal": "true",
     "aria-label": s.title,
-    onClick: r,
+    onClick: a,
     onPointerDown: u,
     onMouseDown: u,
     onWheel: u,
     onDoubleClick: u,
-    children: /* @__PURE__ */ T("div", {
+    children: /* @__PURE__ */ E("div", {
       className: "prototype-preview-window",
       style: v ? { "--prototype-preview-from": v } : void 0,
-      onClick: (l) => l.stopPropagation(),
+      onClick: (d) => d.stopPropagation(),
       children: [/* @__PURE__ */ n(nt, {
-        elements: e,
-        windowSize: t,
-        layout: o,
+        elements: t,
+        windowSize: e,
+        layout: i,
         width: h.width,
         titleBarHeight: h.titleBarHeight
       }), /* @__PURE__ */ n("button", {
@@ -263,23 +231,28 @@ var Z = (e) => {
         className: "prototype-preview-close",
         "aria-label": s.close,
         title: s.close,
-        onClick: r,
+        onClick: a,
         children: "×"
       })]
     })
   });
-  return typeof document > "u" ? d : j(d, document.body);
-}, Et = 15;
+  return typeof document > "u" ? p : q(p, document.body);
+}, It = 15;
 export {
   ut as AnchorEdges,
-  p as PrototypeLayout,
-  Tt as PrototypePreview,
+  l as PrototypeLayout,
+  _t as PrototypePreview,
   nt as PrototypeThumbnail,
   D as SceneMessagesContext,
-  xt as SceneMessagesProvider,
-  q as TrafficLights,
-  Et as allAnchorEdgesForEditor,
+  Ht as SceneMessagesProvider,
+  K as TrafficLights,
+  It as allAnchorEdgesForEditor,
   L as defaultSceneMessages,
+  ft as elementCaption,
+  U as elementPosition,
+  G as elementSize,
   ct as fitPrototypePreview,
+  M as nativePreview,
+  bt as renderPrototypeElement,
   k as useSceneMessages
 };

package/dist/ScreenEditor/index.js

@@ -1,13 +1,14 @@
-import { u as q, x as A } from "../Scene-DaQtzf1e.js";
-import { useCallback as y, useEffect as B, useRef as S, useState as C } from "react";
-import { jsx as u, jsxs as b } from "react/jsx-runtime";
-var $ = 900, X = 640, J = 320, K = 300, at = 360, Q = (t) => t ? {
+import { c as B, u as q, x as A } from "../Scene-DaQtzf1e.js";
+import { i as J, r as K, t as Q } from "../renderPrototypeElement-Xm7OIVPs.js";
+import { useCallback as f, useEffect as V, useRef as W, useState as b } from "react";
+import { jsx as y, jsxs as x } from "react/jsx-runtime";
+var $ = 900, X = 640, Z = 320, tt = 300, dt = 360, et = (t) => t ? {
   width: t.width > 0 ? t.width : $,
   height: t.height > 0 ? t.height : X
 } : {
   width: $,
   height: X
-}, V = [
+}, ot = [
   "n",
   "s",
   "e",
@@ -16,152 +17,151 @@ var $ = 900, X = 640, J = 320, K = 300, at = 360, Q = (t) => t ? {
   "nw",
   "se",
   "sw"
-], st = ({ sourceRect: t, initialSize: n, centerOffsetX: i = 0, children: s, renderInspector: m, canClose: r, onClosed: x }) => {
-  const [d, z] = C("entering"), [a, D] = C(() => Q(n)), w = S(a);
-  w.current = a;
-  const [h, _] = C(!1), k = y(() => _((e) => !e), []), f = S(null);
-  B(() => {
-    const e = requestAnimationFrame(() => z("visible"));
+], ht = ({ sourceRect: t, initialSize: r, centerOffsetX: n = 0, children: a, renderInspector: g, canClose: s, onClosed: c }) => {
+  const [l, m] = b("entering"), [i, D] = b(() => et(r)), v = W(i);
+  v.current = i;
+  const [u, _] = b(!1), k = f(() => _((e) => !e), []), C = W(null);
+  V(() => {
+    const e = requestAnimationFrame(() => m("visible"));
     return () => cancelAnimationFrame(e);
   }, []);
-  const I = y(async () => {
-    r && !await r(w.current) || (z("closing"), setTimeout(() => x(w.current), 300));
-  }, [r, x]), L = (e, o) => {
-    o.stopPropagation(), o.preventDefault(), f.current = {
+  const I = f(async () => {
+    s && !await s(v.current) || (m("closing"), setTimeout(() => c(v.current), 300));
+  }, [s, c]), E = (e, o) => {
+    o.stopPropagation(), o.preventDefault(), C.current = {
       direction: e,
       startX: o.clientX,
       startY: o.clientY,
-      startWidth: a.width,
-      startHeight: a.height
+      startWidth: i.width,
+      startHeight: i.height
     }, o.target.setPointerCapture(o.pointerId);
-  }, R = y((e) => {
-    const o = f.current;
+  }, L = f((e) => {
+    const o = C.current;
     if (!o) return;
-    const { direction: p } = o;
-    let T = o.startWidth, W = o.startHeight;
-    if (p.includes("e") || p.includes("w")) {
-      const v = p.includes("e") ? e.clientX - o.startX : o.startX - e.clientX;
-      T = Math.max(J, o.startWidth + v * 2);
+    const { direction: d } = o;
+    let F = o.startWidth, T = o.startHeight;
+    if (d.includes("e") || d.includes("w")) {
+      const P = d.includes("e") ? e.clientX - o.startX : o.startX - e.clientX;
+      F = Math.max(Z, o.startWidth + P * 2);
     }
-    if (p.includes("s") || p.includes("n")) {
-      const v = p.includes("s") ? e.clientY - o.startY : o.startY - e.clientY;
-      W = Math.max(K, o.startHeight + v * 2);
+    if (d.includes("s") || d.includes("n")) {
+      const P = d.includes("s") ? e.clientY - o.startY : o.startY - e.clientY;
+      T = Math.max(tt, o.startHeight + P * 2);
     }
     D({
-      width: T,
-      height: W
+      width: F,
+      height: T
     });
-  }, []), N = y(() => {
-    f.current = null;
-  }, []), H = i - (h ? 360 / 2 : 0), F = {
-    size: a,
+  }, []), N = f(() => {
+    C.current = null;
+  }, []), H = n - (u ? 360 / 2 : 0), S = {
+    size: i,
     setSize: D,
-    isInspectorOpen: h,
+    isInspectorOpen: u,
     toggleInspector: k,
     close: () => {
       I();
     }
-  }, Y = t.left + t.width / 2, G = t.top + t.height / 2, M = window.innerWidth / 2 + H - a.width / 2, O = window.innerHeight / 2 - a.height / 2, E = `${Y - M}px ${G - O}px`, j = [
+  }, Y = t.left + t.width / 2, G = t.top + t.height / 2, M = window.innerWidth / 2 + H - i.width / 2, O = window.innerHeight / 2 - i.height / 2, R = `${Y - M}px ${G - O}px`, j = [
     "prototype-editor-overlay-content",
-    d === "visible" ? "prototype-editor-overlay-content--visible" : "",
-    d === "closing" ? "prototype-editor-overlay-content--closing" : ""
-  ].join(" "), U = ["prototype-editor-overlay-backdrop", d === "visible" ? "prototype-editor-overlay-backdrop--visible" : ""].join(" ");
-  return /* @__PURE__ */ b("div", {
+    l === "visible" ? "prototype-editor-overlay-content--visible" : "",
+    l === "closing" ? "prototype-editor-overlay-content--closing" : ""
+  ].join(" "), U = ["prototype-editor-overlay-backdrop", l === "visible" ? "prototype-editor-overlay-backdrop--visible" : ""].join(" ");
+  return /* @__PURE__ */ x("div", {
     className: U,
     onClick: I,
-    children: [/* @__PURE__ */ b("div", {
+    children: [/* @__PURE__ */ x("div", {
       className: j,
       style: {
-        transformOrigin: E,
-        width: a.width,
-        height: a.height,
-        marginLeft: -(a.width / 2) + H,
-        marginTop: -(a.height / 2)
+        transformOrigin: R,
+        width: i.width,
+        height: i.height,
+        marginLeft: -(i.width / 2) + H,
+        marginTop: -(i.height / 2)
       },
       onClick: (e) => e.stopPropagation(),
       onPointerDown: (e) => e.stopPropagation(),
-      children: [d === "visible" && V.map((e) => /* @__PURE__ */ u("div", {
+      children: [l === "visible" && ot.map((e) => /* @__PURE__ */ y("div", {
         className: `prototype-editor-overlay-resize prototype-editor-overlay-resize--${e}`,
-        onPointerDown: (o) => L(e, o),
-        onPointerMove: R,
+        onPointerDown: (o) => E(e, o),
+        onPointerMove: L,
         onPointerUp: N,
         onPointerCancel: N
-      }, e)), s(F)]
-    }), m && /* @__PURE__ */ u("aside", {
-      className: `prototype-editor-overlay-inspector${h && d === "visible" ? " prototype-editor-overlay-inspector--open" : ""}`,
+      }, e)), a(S)]
+    }), g && /* @__PURE__ */ y("aside", {
+      className: `prototype-editor-overlay-inspector${u && l === "visible" ? " prototype-editor-overlay-inspector--open" : ""}`,
       style: { width: 360 },
-      "aria-hidden": !h,
-      inert: !h,
+      "aria-hidden": !u,
+      inert: !u,
       onClick: (e) => e.stopPropagation(),
       onPointerDown: (e) => e.stopPropagation(),
-      children: m(F)
+      children: g(S)
     })]
   });
-}, l = /* @__PURE__ */ (function(t) {
+}, p = /* @__PURE__ */ (function(t) {
   return t.Row = "row", t.Column = "column", t.Grid = "grid", t.Wrap = "wrap", t.Freeform = "freeform", t.Grouping = "grouping", t;
-})({}), g = 8, Z = (t) => {
+})({}), w = 8, rt = (t) => {
   switch (t) {
-    case l.Row:
+    case p.Row:
       return {
         display: "flex",
         flexDirection: "row",
-        gap: g
+        gap: w
       };
-    case l.Wrap:
+    case p.Wrap:
       return {
         display: "flex",
         flexDirection: "row",
         flexWrap: "wrap",
-        gap: g
+        gap: w
       };
-    case l.Grid:
+    case p.Grid:
       return {
         display: "grid",
         gridTemplateColumns: "repeat(auto-fill, minmax(120px, 1fr))",
-        gap: g
+        gap: w
       };
-    case l.Freeform:
+    case p.Freeform:
       return { position: "relative" };
-    case l.Column:
-    case l.Grouping:
+    case p.Column:
+    case p.Grouping:
       return {
         display: "flex",
         flexDirection: "column",
-        gap: g
+        gap: w
       };
   }
-}, tt = (t) => t !== l.Freeform, et = ({ component: t, arrangement: n, isDragOver: i }) => {
-  const s = t.children ?? [], m = tt(n);
-  return /* @__PURE__ */ b("div", {
-    className: `prototype-layout-container${i ? " prototype-layout-container--drag-over" : ""}`,
-    "data-layout-arrangement": n,
-    style: Z(n),
-    children: [s.length === 0 && /* @__PURE__ */ u("div", {
+}, nt = (t) => t !== p.Freeform, it = ({ component: t, arrangement: r, isDragOver: n }) => {
+  const a = (t.children ?? []).filter(Boolean).map(B), g = nt(r);
+  return /* @__PURE__ */ x("div", {
+    className: `prototype-layout-container${n ? " prototype-layout-container--drag-over" : ""}`,
+    "data-layout-arrangement": r,
+    style: rt(r),
+    children: [a.length === 0 && /* @__PURE__ */ y("div", {
       className: "prototype-layout-container__empty",
       "aria-hidden": "true"
-    }), s.map((r) => /* @__PURE__ */ u("div", {
-      className: "prototype-layout-container__item",
-      style: m ? {
-        width: r.size.width,
-        height: r.size.height
-      } : {
-        position: "absolute",
-        left: r.position.x,
-        top: r.position.y,
-        width: r.size.width,
-        height: r.size.height
-      },
-      children: r.RenderPrototype({
-        component: r,
-        label: r.label
-      })
-    }, r.id))]
+    }), a.map((s) => {
+      const c = J(s), l = K(s), m = {
+        width: c.width > 0 ? c.width : void 0,
+        height: c.height > 0 ? c.height : void 0
+      };
+      return /* @__PURE__ */ y("div", {
+        className: "prototype-layout-container__item",
+        style: g ? m : {
+          position: "absolute",
+          left: l.x,
+          top: l.y,
+          ...m
+        },
+        children: Q(s)
+      }, String(s.id));
+    })]
   });
-}, c = "StudioLayout", P = "Layout", ot = (t) => {
-  class n extends A {
+}, h = "StudioLayout", z = "Layout", at = (t) => {
+  class r extends A {
     componentName = t.type;
-    category = P;
-    library = c;
+    category = z;
+    library = h;
     initialSize = {
       width: 260,
       height: 140
@@ -171,44 +171,44 @@ var $ = 900, X = 640, J = 320, K = 300, at = 360, Q = (t) => t ? {
     get toolbarIcon() {
       return t.icon;
     }
-    RenderPrototype(s) {
-      return /* @__PURE__ */ u(et, {
-        ...s,
+    RenderPrototype(a) {
+      return /* @__PURE__ */ y(it, {
+        ...a,
         arrangement: t.arrangement
       });
     }
   }
-  return n;
-}, lt = (t) => {
-  const n = {};
-  for (const i of t) {
-    const s = ot(i);
-    n[i.type] = s, n[`${c}.${i.type}`] = s;
+  return r;
+}, mt = (t) => {
+  const r = {};
+  for (const n of t) {
+    const a = at(n);
+    r[n.type] = a, r[`${h}.${n.type}`] = a;
   }
-  return q(c, n), {
-    name: c,
+  return q(h, r), {
+    name: h,
     bundlePath: "",
     categories: [{
-      name: P,
-      components: t.map((i) => ({
-        name: i.name,
-        category: P,
-        library: c,
+      name: z,
+      components: t.map((n) => ({
+        name: n.name,
+        category: z,
+        library: h,
         bundlePath: "",
-        type: `${c}.${i.type}`,
-        component: new n[i.type]()
+        type: `${h}.${n.type}`,
+        component: new r[n.type]()
       }))
     }]
   };
 };
 export {
-  l as LayoutArrangement,
-  st as PrototypeOverlayFrame,
-  Z as arrangementStyle,
-  ot as createLayoutContainerComponent,
-  at as inspectorWidth,
-  tt as isFlowArrangement,
-  P as layoutContainerCategory,
-  c as layoutContainerLibrary,
-  lt as registerLayoutContainers
+  p as LayoutArrangement,
+  ht as PrototypeOverlayFrame,
+  rt as arrangementStyle,
+  at as createLayoutContainerComponent,
+  dt as inspectorWidth,
+  nt as isFlowArrangement,
+  z as layoutContainerCategory,
+  h as layoutContainerLibrary,
+  mt as registerLayoutContainers
 };

package/dist/renderPrototypeElement-Xm7OIVPs.js

@@ -0,0 +1,58 @@
+import { c as p } from "./Scene-DaQtzf1e.js";
+import { jsx as s } from "react/jsx-runtime";
+var y = (n) => {
+  const e = n;
+  if (e.position && typeof e.position.x == "number") return {
+    x: e.position.x,
+    y: e.position.y ?? 0
+  };
+  const t = e.properties?.canvas ?? {};
+  return {
+    x: t.x ?? 0,
+    y: t.y ?? 0
+  };
+}, d = (n) => {
+  const e = n;
+  return e.size && typeof e.size.width == "number" ? {
+    width: e.size.width,
+    height: e.size.height ?? 0
+  } : {
+    width: e.width ?? 0,
+    height: e.height ?? 0
+  };
+}, a = (n) => {
+  const e = n;
+  if (typeof e.componentName != "string" || e.componentName.includes(".")) return;
+  const t = e.properties && typeof e.properties == "object" ? e.properties : {}, o = [
+    t.label,
+    t.text,
+    t.title,
+    e.componentName
+  ].find((r) => typeof r == "string" && r.length > 0);
+  return typeof o == "string" ? {
+    type: e.componentName,
+    label: o
+  } : void 0;
+}, i = (n) => {
+  const e = n, t = [e.name, e.componentName].find((o) => typeof o == "string" && o.length > 0);
+  return typeof t == "string" ? t : "";
+}, l = (n) => {
+  const e = p(n);
+  if ("RenderPrototype" in e && typeof e.RenderPrototype == "function") return e.RenderPrototype({
+    component: e,
+    label: e.label ?? i(e)
+  });
+  const t = a(e);
+  return /* @__PURE__ */ s("div", {
+    className: "prototype-unrendered-element",
+    "data-prototype-element": t?.type,
+    children: t?.label ?? i(e)
+  });
+};
+export {
+  a,
+  d as i,
+  i as n,
+  y as r,
+  l as t
+};

package/dist/scene.css

@@ -1,2 +1,2 @@
-.prototype-window-traffic-light{box-sizing:border-box;background:0 0;border-radius:50%;width:12px;height:12px}.prototype-thumbnail{cursor:default;box-sizing:border-box;background:var(--surface-card);border:none;flex-direction:column;flex-shrink:0;padding:0;display:flex;position:relative;overflow:hidden}.prototype-thumbnail:is(button){cursor:pointer}.prototype-thumbnail-title-bar{border-bottom:1px solid var(--surface-200);background:var(--surface-50);flex-shrink:0;align-items:center;gap:3px;padding:0 5px;display:flex;position:relative}.prototype-thumbnail-title{text-align:center;color:var(--text-color-secondary);pointer-events:none;font-family:system-ui,sans-serif;font-size:8px;position:absolute;left:0;right:0}.prototype-thumbnail-body{background:var(--surface-ground);flex:1;position:relative;overflow:hidden}.prototype-thumbnail-canvas-scaler{position:absolute;top:0;left:0}.prototype-thumbnail-element{box-sizing:border-box;background:var(--surface-200);border:1px solid var(--surface-300);border-radius:2px;position:absolute}.prototype-thumbnail-element--button,.prototype-thumbnail-element--button-hot{background:var(--surface-200);border:1px solid var(--surface-300)}.prototype-thumbnail-element--button-hot{background:var(--primary-color);border-color:var(--primary-color);opacity:.7}.prototype-thumbnail-element--native{color:var(--text-color);text-align:center;justify-content:center;align-items:center;padding:2px 6px;font-family:system-ui,sans-serif;font-size:12px;display:flex;overflow:hidden}.prototype-thumbnail-element__label{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.prototype-thumbnail-element--text-input{background:var(--surface-0);border:1px solid var(--surface-300)}.prototype-thumbnail-element--label{border-bottom:1px solid var(--surface-300);background:0 0}.prototype-thumbnail-element--checkbox,.prototype-thumbnail-element--radio,.prototype-thumbnail-element--dropdown{background:var(--surface-0);border:1px solid var(--surface-300)}.prototype-thumbnail-element--image{background:var(--surface-100);border:1px dashed var(--surface-300)}.prototype-thumbnail-element--panel{background:var(--surface-50);border:1px solid var(--surface-200)}.prototype-thumbnail-element--data-table{background:var(--surface-0);border:1px solid var(--surface-300)}.prototype-thumbnail-element--toolbar{background:var(--surface-100);border:1px solid var(--surface-200)}.prototype-thumbnail-element--kpi-card{background:var(--surface-100);border:1px solid var(--primary-300,var(--surface-300));border-radius:3px}.prototype-thumbnail-element--bar-chart{background:var(--surface-0);border:1px solid var(--surface-300);background-image:repeating-linear-gradient(to top, var(--primary-400,#7c6fe0) 0px, var(--primary-400,#7c6fe0) 60%, transparent 60%, transparent 100%);background-position:10% 0,35% 0,60% 0,85% 0;background-repeat:no-repeat;background-size:20% 100%}.prototype-thumbnail-element--line-chart{background:var(--surface-0);border:1px solid var(--surface-300)}.prototype-thumbnail-element--pie-chart{background:var(--surface-0);border:1px solid var(--surface-300);border-radius:50%}.prototype-thumbnail-element--progress-bar{background:var(--surface-100);border:1px solid var(--surface-300);background-image:linear-gradient(to right, var(--primary-400,#7c6fe0) 0%, var(--primary-400,#7c6fe0) 55%, transparent 55%)}.prototype-thumbnail-element--activity-feed{background:var(--surface-0);border:1px solid var(--surface-300);background-image:repeating-linear-gradient(to bottom, transparent 0px, transparent 3px, var(--surface-200) 3px, var(--surface-200) 4px);background-size:100% 8px}.prototype-thumbnail-element--nav-topbar{background:var(--surface-100);border:1px solid var(--surface-200);border-radius:2px 2px 0 0}.prototype-thumbnail-element--nav-footer{background:var(--surface-100);border:1px solid var(--surface-200);border-radius:0 0 2px 2px}.prototype-thumbnail-element--nav-sidebar{background:var(--surface-50);border:1px solid var(--surface-200);border-radius:2px 0 0 2px}.prototype-thumbnail-element--content-area{background:var(--surface-ground);border:1.5px dashed var(--surface-300)}.prototype-thumbnail-element--command-form{background:var(--surface-0);border:1px solid var(--surface-300);background-image:repeating-linear-gradient(to bottom, transparent 0px, transparent 5px, var(--surface-100) 5px, var(--surface-100) 8px);background-position:0 4px;background-size:100% 12px}.prototype-preview-backdrop{z-index:1000;cursor:default;background:#00000073;justify-content:center;align-items:center;animation:.16s ease-out prototype-preview-fade;display:flex;position:fixed;inset:0}.prototype-preview-window{border:1px solid var(--surface-300);transform-origin:0 0;border-radius:8px;animation:.22s cubic-bezier(.2,.8,.2,1) prototype-preview-zoom;position:relative;overflow:hidden;box-shadow:0 24px 64px #00000073}.prototype-preview-window .prototype-thumbnail-title{font-size:13px}.prototype-preview-window .prototype-thumbnail-title-bar{gap:8px;padding:0 12px}.prototype-preview-close{z-index:1;width:28px;height:28px;color:var(--text-color-secondary);cursor:pointer;background:0 0;border:none;border-radius:50%;font-size:18px;line-height:1;position:absolute;top:6px;right:8px}.prototype-preview-close:hover{background:var(--surface-200);color:var(--text-color)}@keyframes prototype-preview-zoom{0%{transform:var(--prototype-preview-from,scale(.9));opacity:.4}to{opacity:1;transform:none}}@keyframes prototype-preview-fade{0%{background:0 0}to{background:#00000073}}@media (prefers-reduced-motion:reduce){.prototype-preview-backdrop,.prototype-preview-window{animation:none}}.prototype-editor-overlay-backdrop{z-index:50;opacity:0;pointer-events:auto;background:#0000008c;justify-content:center;align-items:center;transition:opacity .28s;display:flex;position:fixed;inset:0}.prototype-editor-overlay-backdrop--visible{opacity:1}.prototype-editor-overlay-content{opacity:0;border-radius:10px;flex-direction:column;transition:transform .28s cubic-bezier(.4,0,.2,1),opacity .28s;display:flex;position:fixed;top:50%;left:50%;overflow:hidden;transform:scale(.08);box-shadow:0 24px 80px #0000008c}.prototype-editor-overlay-content--visible{opacity:1;transform:scale(1)}.prototype-editor-overlay-content--closing{opacity:0;transform:scale(.08)}.prototype-editor-overlay-resize{z-index:10;position:absolute}.prototype-editor-overlay-resize--n{cursor:ns-resize;height:6px;top:0;left:8px;right:8px}.prototype-editor-overlay-resize--s{cursor:ns-resize;height:6px;bottom:0;left:8px;right:8px}.prototype-editor-overlay-resize--e{cursor:ew-resize;width:6px;top:8px;bottom:8px;right:0}.prototype-editor-overlay-resize--w{cursor:ew-resize;width:6px;top:8px;bottom:8px;left:0}.prototype-editor-overlay-resize--ne{cursor:nesw-resize;width:12px;height:12px;top:0;right:0}.prototype-editor-overlay-resize--nw{cursor:nwse-resize;width:12px;height:12px;top:0;left:0}.prototype-editor-overlay-resize--se{cursor:nwse-resize;width:12px;height:12px;bottom:0;right:0}.prototype-editor-overlay-resize--sw{cursor:nesw-resize;width:12px;height:12px;bottom:0;left:0}.prototype-editor-overlay-inspector{background:var(--cratis-surface-card);color:var(--cratis-text-color);border-left:1px solid var(--cratis-surface-border);box-shadow:var(--cratis-shadow-overlay);z-index:12;flex-direction:column;transition:transform .24s cubic-bezier(.4,0,.2,1);display:flex;position:fixed;top:0;bottom:0;right:0;transform:translate(100%)}.prototype-editor-overlay-inspector--open{transform:translate(0)}.prototype-layout-container{box-sizing:border-box;border:1px dashed var(--cratis-surface-border);border-radius:var(--cratis-border-radius);background:color-mix(in srgb, var(--cratis-surface-card) 60%, transparent);width:100%;height:100%;padding:8px;overflow:hidden}.prototype-layout-container--drag-over{border:2px dashed var(--cratis-primary-color)}.prototype-layout-container__item{box-sizing:border-box;flex:none}.prototype-layout-container__empty{border-radius:var(--cratis-border-radius);background:repeating-linear-gradient(45deg, transparent, transparent 6px, var(--cratis-surface-hover) 6px, var(--cratis-surface-hover) 12px);pointer-events:none;flex:auto;min-height:32px}
+.prototype-unrendered-element{box-sizing:border-box;border:1px solid var(--cratis-surface-border,var(--surface-300));border-radius:var(--cratis-border-radius,4px);background:var(--cratis-surface-hover,var(--surface-200));min-height:28px;color:var(--cratis-text-secondary-color,var(--text-color-secondary));text-overflow:ellipsis;white-space:nowrap;padding:4px 8px;font-size:12px;overflow:hidden}.prototype-window-traffic-light{box-sizing:border-box;background:0 0;border-radius:50%;width:12px;height:12px}.prototype-thumbnail{cursor:default;box-sizing:border-box;background:var(--surface-card);border:none;flex-direction:column;flex-shrink:0;padding:0;display:flex;position:relative;overflow:hidden}.prototype-thumbnail:is(button){cursor:pointer}.prototype-thumbnail-title-bar{border-bottom:1px solid var(--surface-200);background:var(--surface-50);flex-shrink:0;align-items:center;gap:3px;padding:0 5px;display:flex;position:relative}.prototype-thumbnail-title{text-align:center;color:var(--text-color-secondary);pointer-events:none;font-family:system-ui,sans-serif;font-size:8px;position:absolute;left:0;right:0}.prototype-thumbnail-body{background:var(--surface-ground);flex:1;position:relative;overflow:hidden}.prototype-thumbnail-canvas-scaler{position:absolute;top:0;left:0}.prototype-thumbnail-element{box-sizing:border-box;background:var(--surface-200);border:1px solid var(--surface-300);border-radius:2px;position:absolute}.prototype-thumbnail-element--button,.prototype-thumbnail-element--button-hot{background:var(--surface-200);border:1px solid var(--surface-300)}.prototype-thumbnail-element--button-hot{background:var(--primary-color);border-color:var(--primary-color);opacity:.7}.prototype-thumbnail-element--native{color:var(--text-color);text-align:center;justify-content:center;align-items:center;padding:2px 6px;font-family:system-ui,sans-serif;font-size:12px;display:flex;overflow:hidden}.prototype-thumbnail-element__label{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.prototype-thumbnail-element--text-input{background:var(--surface-0);border:1px solid var(--surface-300)}.prototype-thumbnail-element--label{border-bottom:1px solid var(--surface-300);background:0 0}.prototype-thumbnail-element--checkbox,.prototype-thumbnail-element--radio,.prototype-thumbnail-element--dropdown{background:var(--surface-0);border:1px solid var(--surface-300)}.prototype-thumbnail-element--image{background:var(--surface-100);border:1px dashed var(--surface-300)}.prototype-thumbnail-element--panel{background:var(--surface-50);border:1px solid var(--surface-200)}.prototype-thumbnail-element--data-table{background:var(--surface-0);border:1px solid var(--surface-300)}.prototype-thumbnail-element--toolbar{background:var(--surface-100);border:1px solid var(--surface-200)}.prototype-thumbnail-element--kpi-card{background:var(--surface-100);border:1px solid var(--primary-300,var(--surface-300));border-radius:3px}.prototype-thumbnail-element--bar-chart{background:var(--surface-0);border:1px solid var(--surface-300);background-image:repeating-linear-gradient(to top, var(--primary-400,#7c6fe0) 0px, var(--primary-400,#7c6fe0) 60%, transparent 60%, transparent 100%);background-position:10% 0,35% 0,60% 0,85% 0;background-repeat:no-repeat;background-size:20% 100%}.prototype-thumbnail-element--line-chart{background:var(--surface-0);border:1px solid var(--surface-300)}.prototype-thumbnail-element--pie-chart{background:var(--surface-0);border:1px solid var(--surface-300);border-radius:50%}.prototype-thumbnail-element--progress-bar{background:var(--surface-100);border:1px solid var(--surface-300);background-image:linear-gradient(to right, var(--primary-400,#7c6fe0) 0%, var(--primary-400,#7c6fe0) 55%, transparent 55%)}.prototype-thumbnail-element--activity-feed{background:var(--surface-0);border:1px solid var(--surface-300);background-image:repeating-linear-gradient(to bottom, transparent 0px, transparent 3px, var(--surface-200) 3px, var(--surface-200) 4px);background-size:100% 8px}.prototype-thumbnail-element--nav-topbar{background:var(--surface-100);border:1px solid var(--surface-200);border-radius:2px 2px 0 0}.prototype-thumbnail-element--nav-footer{background:var(--surface-100);border:1px solid var(--surface-200);border-radius:0 0 2px 2px}.prototype-thumbnail-element--nav-sidebar{background:var(--surface-50);border:1px solid var(--surface-200);border-radius:2px 0 0 2px}.prototype-thumbnail-element--content-area{background:var(--surface-ground);border:1.5px dashed var(--surface-300)}.prototype-thumbnail-element--command-form{background:var(--surface-0);border:1px solid var(--surface-300);background-image:repeating-linear-gradient(to bottom, transparent 0px, transparent 5px, var(--surface-100) 5px, var(--surface-100) 8px);background-position:0 4px;background-size:100% 12px}.prototype-preview-backdrop{z-index:1000;cursor:default;background:#00000073;justify-content:center;align-items:center;animation:.16s ease-out prototype-preview-fade;display:flex;position:fixed;inset:0}.prototype-preview-window{border:1px solid var(--surface-300);transform-origin:0 0;border-radius:8px;animation:.22s cubic-bezier(.2,.8,.2,1) prototype-preview-zoom;position:relative;overflow:hidden;box-shadow:0 24px 64px #00000073}.prototype-preview-window .prototype-thumbnail-title{font-size:13px}.prototype-preview-window .prototype-thumbnail-title-bar{gap:8px;padding:0 12px}.prototype-preview-close{z-index:1;width:28px;height:28px;color:var(--text-color-secondary);cursor:pointer;background:0 0;border:none;border-radius:50%;font-size:18px;line-height:1;position:absolute;top:6px;right:8px}.prototype-preview-close:hover{background:var(--surface-200);color:var(--text-color)}@keyframes prototype-preview-zoom{0%{transform:var(--prototype-preview-from,scale(.9));opacity:.4}to{opacity:1;transform:none}}@keyframes prototype-preview-fade{0%{background:0 0}to{background:#00000073}}@media (prefers-reduced-motion:reduce){.prototype-preview-backdrop,.prototype-preview-window{animation:none}}.prototype-editor-overlay-backdrop{z-index:50;opacity:0;pointer-events:auto;background:#0000008c;justify-content:center;align-items:center;transition:opacity .28s;display:flex;position:fixed;inset:0}.prototype-editor-overlay-backdrop--visible{opacity:1}.prototype-editor-overlay-content{opacity:0;border-radius:10px;flex-direction:column;transition:transform .28s cubic-bezier(.4,0,.2,1),opacity .28s;display:flex;position:fixed;top:50%;left:50%;overflow:hidden;transform:scale(.08);box-shadow:0 24px 80px #0000008c}.prototype-editor-overlay-content--visible{opacity:1;transform:scale(1)}.prototype-editor-overlay-content--closing{opacity:0;transform:scale(.08)}.prototype-editor-overlay-resize{z-index:10;position:absolute}.prototype-editor-overlay-resize--n{cursor:ns-resize;height:6px;top:0;left:8px;right:8px}.prototype-editor-overlay-resize--s{cursor:ns-resize;height:6px;bottom:0;left:8px;right:8px}.prototype-editor-overlay-resize--e{cursor:ew-resize;width:6px;top:8px;bottom:8px;right:0}.prototype-editor-overlay-resize--w{cursor:ew-resize;width:6px;top:8px;bottom:8px;left:0}.prototype-editor-overlay-resize--ne{cursor:nesw-resize;width:12px;height:12px;top:0;right:0}.prototype-editor-overlay-resize--nw{cursor:nwse-resize;width:12px;height:12px;top:0;left:0}.prototype-editor-overlay-resize--se{cursor:nwse-resize;width:12px;height:12px;bottom:0;right:0}.prototype-editor-overlay-resize--sw{cursor:nesw-resize;width:12px;height:12px;bottom:0;left:0}.prototype-editor-overlay-inspector{background:var(--cratis-surface-card);color:var(--cratis-text-color);border-left:1px solid var(--cratis-surface-border);box-shadow:var(--cratis-shadow-overlay);z-index:12;flex-direction:column;transition:transform .24s cubic-bezier(.4,0,.2,1);display:flex;position:fixed;top:0;bottom:0;right:0;transform:translate(100%)}.prototype-editor-overlay-inspector--open{transform:translate(0)}.prototype-layout-container{box-sizing:border-box;border:1px dashed var(--cratis-surface-border);border-radius:var(--cratis-border-radius);background:color-mix(in srgb, var(--cratis-surface-card) 60%, transparent);width:100%;height:100%;padding:8px;overflow:hidden}.prototype-layout-container--drag-over{border:2px dashed var(--cratis-primary-color)}.prototype-layout-container__item{box-sizing:border-box;flex:none}.prototype-layout-container__empty{border-radius:var(--cratis-border-radius);background:repeating-linear-gradient(45deg, transparent, transparent 6px, var(--cratis-surface-hover) 6px, var(--cratis-surface-hover) 12px);pointer-events:none;flex:auto;min-height:32px}
 /*$vite$:1*/

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cratis/scene",
-  "version": "0.114.1",
+  "version": "0.115.0",
   "description": "Cratis Scene: renders Studio prototypes as thumbnails and previews.",
   "license": "MIT",
   "author": "Cratis",