@cratis/scene 0.223.0 → 0.223.1

package/dist/PrototypeComponentRegistry.d.ts

@@ -1,6 +1,6 @@
 import { UIElement } from './UIElement';
 import type { ComponentState, IComponent, PrototypeComponentConstructor } from './IComponent';
-import type { PrototypeSurfaceElement } from './Prototypes/Editor/editorTypes';
+import type { PrototypeSurfaceElement } from './Prototypes/prototypeTypes';
 declare global {
     interface Window {
         __cratisPrototypeComponents?: Record<string, Record<string, PrototypeComponentConstructor>>;

package/dist/Prototypes/index.d.ts

@@ -1,2 +1,2 @@
 export * from './Rendering';
-export * from './Editor/editorTypes';
+export * from './prototypeTypes';

package/dist/Prototypes/index.js

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

package/dist/Prototypes/{Editor/editorTypes.d.ts → prototypeTypes.d.ts}

@@ -1,6 +1,6 @@
-import { AnchorEdges } from '../../AnchorEdges';
-import { PrototypeLayout } from '../../Layout/PrototypeLayout';
-import type { IComponent } from '../../IComponent';
+import { AnchorEdges } from '../AnchorEdges';
+import { PrototypeLayout } from '../Layout/PrototypeLayout';
+import type { IComponent } from '../IComponent';
 export type ResizeHandle = 'n' | 's' | 'e' | 'w' | 'nw' | 'ne' | 'sw' | 'se';
 export type PrototypeSurfaceElementType = string;
 export type PrototypeElementType = PrototypeSurfaceElementType;

package/dist/scene.css

@@ -1,2 +1,2 @@
-.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}
+.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-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}
 /*$vite$:1*/

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cratis/scene",
-  "version": "0.223.0",
+  "version": "0.223.1",
   "description": "Cratis Scene: renders Studio prototypes as thumbnails and previews.",
   "license": "MIT",
   "author": "Cratis",
@@ -9,14 +9,11 @@
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
   "scripts": {
-    "dev": "yarn g:dev",
-    "build": "yarn g:build",
     "lint": "yarn g:lint",
     "lint:ci": "yarn g:lint:ci",
     "test": "yarn g:test",
     "test:watch": "yarn g:test:watch",
     "compile": "yarn g:compile",
-    "preview": "yarn g:preview",
     "up": "yarn g:up",
     "dev:storybook": "yarn g:dev:storybook --port 6010",
     "build-storybook": "yarn g:build:storybook",
@@ -32,10 +29,6 @@
       "types": "./dist/Prototypes/index.d.ts",
       "import": "./dist/Prototypes/index.js"
     },
-    "./ScreenEditor": {
-      "types": "./dist/ScreenEditor/index.d.ts",
-      "import": "./dist/ScreenEditor/index.js"
-    },
     "./styles": "./dist/scene.css"
   },
   "files": [
@@ -54,10 +47,6 @@
         "types": "./dist/Prototypes/index.d.ts",
         "import": "./dist/Prototypes/index.js"
       },
-      "./ScreenEditor": {
-        "types": "./dist/ScreenEditor/index.d.ts",
-        "import": "./dist/ScreenEditor/index.js"
-      },
       "./styles": "./dist/scene.css"
     }
   },

package/dist/Prototypes/Editor/PrototypeOverlayFrame.d.ts

@@ -1,23 +0,0 @@
-import React, { type ReactNode } from 'react';
-export declare const inspectorWidth = 360;
-export interface OverlaySize {
-    width: number;
-    height: number;
-}
-export interface PrototypeOverlayFrameState {
-    size: OverlaySize;
-    setSize: (size: OverlaySize) => void;
-    isInspectorOpen: boolean;
-    toggleInspector: () => void;
-    close: () => void;
-}
-export interface PrototypeOverlayFrameProps {
-    sourceRect: DOMRect;
-    initialSize?: OverlaySize;
-    centerOffsetX?: number;
-    children: (state: PrototypeOverlayFrameState) => ReactNode;
-    renderInspector?: (state: PrototypeOverlayFrameState) => ReactNode;
-    canClose?: (size: OverlaySize) => Promise<boolean>;
-    onClosed: (size: OverlaySize) => void;
-}
-export declare const PrototypeOverlayFrame: ({ sourceRect, initialSize, centerOffsetX, children, renderInspector, canClose, onClosed }: PrototypeOverlayFrameProps) => React.JSX.Element;

package/dist/Prototypes/Editor/fitOverlay.d.ts

@@ -1,14 +0,0 @@
-export interface OverlayViewport {
-    width: number;
-    height: number;
-}
-export interface FittedOverlay {
-    width: number;
-    height: number;
-    offsetX: number;
-}
-export declare const overlayMargin = 8;
-export declare function fitOverlay(size: {
-    width: number;
-    height: number;
-}, viewport: OverlayViewport, requestedOffsetX: number): FittedOverlay;

package/dist/Prototypes/Editor/layoutContainers/LayoutArrangement.d.ts

@@ -1,8 +0,0 @@
-export declare enum LayoutArrangement {
-    Row = "row",
-    Column = "column",
-    Grid = "grid",
-    Wrap = "wrap",
-    Freeform = "freeform",
-    Grouping = "grouping"
-}

package/dist/Prototypes/Editor/layoutContainers/LayoutContainerDescriptor.d.ts

@@ -1,10 +0,0 @@
-import type { ComponentType } from 'react';
-import type { LayoutArrangement } from './LayoutArrangement';
-export interface LayoutContainerDescriptor {
-    type: string;
-    name: string;
-    arrangement: LayoutArrangement;
-    icon?: ComponentType<{
-        className?: string;
-    }>;
-}

package/dist/Prototypes/Editor/layoutContainers/LayoutContainerSurface.d.ts

@@ -1,7 +0,0 @@
-import type { PrototypeComponentRenderProps } from '../../../IComponent';
-import { LayoutArrangement } from './LayoutArrangement';
-export interface LayoutContainerSurfaceProps extends PrototypeComponentRenderProps {
-    arrangement: LayoutArrangement;
-}
-export declare const LayoutContainerSurface: ({ component, arrangement, isDragOver }: LayoutContainerSurfaceProps) => import("react").JSX.Element;
-export { LayoutArrangement };

package/dist/Prototypes/Editor/layoutContainers/arrangementStyle.d.ts

@@ -1,4 +0,0 @@
-import type { CSSProperties } from 'react';
-import { LayoutArrangement } from './LayoutArrangement';
-export declare const arrangementStyle: (arrangement: LayoutArrangement) => CSSProperties;
-export declare const isFlowArrangement: (arrangement: LayoutArrangement) => boolean;

package/dist/Prototypes/Editor/layoutContainers/createLayoutContainerComponent.d.ts

@@ -1,5 +0,0 @@
-import type { PrototypeComponentConstructor } from '../../../IComponent';
-import type { LayoutContainerDescriptor } from './LayoutContainerDescriptor';
-export declare const layoutContainerLibrary = "StudioLayout";
-export declare const layoutContainerCategory = "Layout";
-export declare const createLayoutContainerComponent: (descriptor: LayoutContainerDescriptor) => PrototypeComponentConstructor;

package/dist/Prototypes/Editor/layoutContainers/index.d.ts

@@ -1,5 +0,0 @@
-export * from './LayoutArrangement';
-export * from './LayoutContainerDescriptor';
-export * from './arrangementStyle';
-export * from './createLayoutContainerComponent';
-export * from './registerLayoutContainers';

package/dist/Prototypes/Editor/layoutContainers/registerLayoutContainers.d.ts

@@ -1,3 +0,0 @@
-import type { PrototypeComponentLibraryDefinition } from '../editorTypes';
-import type { LayoutContainerDescriptor } from './LayoutContainerDescriptor';
-export declare const registerLayoutContainers: (descriptors: LayoutContainerDescriptor[]) => PrototypeComponentLibraryDefinition;

package/dist/ScreenEditor/index.d.ts

@@ -1,2 +0,0 @@
-export * from '../Prototypes/Editor/PrototypeOverlayFrame';
-export * from '../Prototypes/Editor/layoutContainers';

package/dist/ScreenEditor/index.js

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

package/dist/renderPrototypeElement-Xm7OIVPs.js

@@ -1,58 +0,0 @@
-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
-};