@cratis/scene 0.112.0 → 0.113.0

package/README.md

@@ -6,6 +6,12 @@ TypeScript models for the Studio's low-code canvas: UIElement hierarchy, Externa
 
 `PrototypeThumbnail` accepts both live `IComponent` instances and raw `UIElement` data from JSON documents. At render time Scene uses the element's library-qualified `_derivedTypeId` (or `componentName`) to construct a registered component and copy its saved state, recursively hydrating element arrays in all named slots without changing the source document. Without a registered library, it renders a positioned, sized placeholder rather than an empty prototype. Library registration does not trigger a React rerender by itself; rerender the thumbnail after loading bundles to replace placeholders with actual components. Without an open action the thumbnail is a named, non-focusable preview; with one it remains an editor-opening button. The board/document reader does not load bundles or depend on Studio Core.
 
+## Layout preview DTOs
+
+The six `StudioLayout.*` types (`Stack`, `Row`, `Grid`, `Container`, `Wrap`, and `Canvas`) are backend preview DTOs. They derive from the existing `FrameworkElement`/`UIElement` hierarchy and use the same on-wire `ComponentName`, inherited `Properties`, and `Slots` shape as `ExternalComponent`, so generic board previews can round-trip their nested children. They deliberately do not derive from `ExternalComponent`: the current derived-type converter treats a base with registered subclasses as a discriminator family and then cannot deserialize a generic `externalComponent` itself. This compatibility boundary avoids changing Fundamentals or breaking existing generic component, Dialog, and ConfirmDialog data.
+
+A `SceneDocument` is the sole editable model. Layout DTOs are produced only for the legacy board-preview projection; they are not a second Scene model, editor, resolver, or persistence authority.
+
 ## Component class — how it works
 
 `Component` (in `Component.ts`) is the abstract base class for every prototype surface component (e.g. the 89 PrimeReact wrappers under `Source/PrimeReact/`). It extends `ExternalComponent` so instances are proper `UIElement` subtypes that flow through the command pipeline without any manual wire-format conversion.

package/dist/Component.d.ts

@@ -1,3 +1,4 @@
+import { type Guid } from '@cratis/fundamentals';
 import { ExternalComponent } from './ExternalComponent';
 import type { ComponentState, IComponent, PrototypeComponentRenderProps } from './IComponent';
 import type { ComponentType, ReactNode } from 'react';
@@ -9,7 +10,7 @@ import type { Size } from './Size';
  * by Fundamentals without any manual wire-format conversion.
  */
 export declare abstract class Component extends ExternalComponent implements IComponent {
-    id: string;
+    id: Guid & string;
     readonly initialSize: Size;
     readonly resizeBehavior: IComponent['resizeBehavior'];
     readonly acceptsChildren: boolean;

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

@@ -0,0 +1,23 @@
+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/layoutContainers/LayoutArrangement.d.ts

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

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

@@ -0,0 +1,10 @@
+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

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

@@ -0,0 +1,4 @@
+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

@@ -0,0 +1,5 @@
+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

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

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

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

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

@@ -0,0 +1,19 @@
+export interface ThumbnailPoint {
+    x: number;
+    y: number;
+}
+export interface ThumbnailSize {
+    width: number;
+    height: number;
+}
+export interface ThumbnailBoxInput {
+    native: boolean;
+    name: string;
+    position: ThumbnailPoint;
+    size: ThumbnailSize;
+}
+export interface ThumbnailBox {
+    position: ThumbnailPoint;
+    size: ThumbnailSize;
+}
+export declare function thumbnailBoxes(inputs: readonly ThumbnailBoxInput[], stack: boolean): ThumbnailBox[];

package/dist/Prototypes/index.js

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

package/dist/ScreenEditor/index.d.ts

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

package/dist/ScreenEditor/index.js

@@ -0,0 +1,214 @@
+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 ? {
+  width: t.width > 0 ? t.width : $,
+  height: t.height > 0 ? t.height : X
+} : {
+  width: $,
+  height: X
+}, V = [
+  "n",
+  "s",
+  "e",
+  "w",
+  "ne",
+  "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"));
+    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 = {
+      direction: e,
+      startX: o.clientX,
+      startY: o.clientY,
+      startWidth: a.width,
+      startHeight: a.height
+    }, o.target.setPointerCapture(o.pointerId);
+  }, R = y((e) => {
+    const o = f.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);
+    }
+    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);
+    }
+    D({
+      width: T,
+      height: W
+    });
+  }, []), N = y(() => {
+    f.current = null;
+  }, []), H = i - (h ? 360 / 2 : 0), F = {
+    size: a,
+    setSize: D,
+    isInspectorOpen: h,
+    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 = [
+    "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", {
+    className: U,
+    onClick: I,
+    children: [/* @__PURE__ */ b("div", {
+      className: j,
+      style: {
+        transformOrigin: E,
+        width: a.width,
+        height: a.height,
+        marginLeft: -(a.width / 2) + H,
+        marginTop: -(a.height / 2)
+      },
+      onClick: (e) => e.stopPropagation(),
+      onPointerDown: (e) => e.stopPropagation(),
+      children: [d === "visible" && V.map((e) => /* @__PURE__ */ u("div", {
+        className: `prototype-editor-overlay-resize prototype-editor-overlay-resize--${e}`,
+        onPointerDown: (o) => L(e, o),
+        onPointerMove: R,
+        onPointerUp: N,
+        onPointerCancel: N
+      }, e)), s(F)]
+    }), m && /* @__PURE__ */ u("aside", {
+      className: `prototype-editor-overlay-inspector${h && d === "visible" ? " prototype-editor-overlay-inspector--open" : ""}`,
+      style: { width: 360 },
+      "aria-hidden": !h,
+      inert: !h,
+      onClick: (e) => e.stopPropagation(),
+      onPointerDown: (e) => e.stopPropagation(),
+      children: m(F)
+    })]
+  });
+}, l = /* @__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) => {
+  switch (t) {
+    case l.Row:
+      return {
+        display: "flex",
+        flexDirection: "row",
+        gap: g
+      };
+    case l.Wrap:
+      return {
+        display: "flex",
+        flexDirection: "row",
+        flexWrap: "wrap",
+        gap: g
+      };
+    case l.Grid:
+      return {
+        display: "grid",
+        gridTemplateColumns: "repeat(auto-fill, minmax(120px, 1fr))",
+        gap: g
+      };
+    case l.Freeform:
+      return { position: "relative" };
+    case l.Column:
+    case l.Grouping:
+      return {
+        display: "flex",
+        flexDirection: "column",
+        gap: g
+      };
+  }
+}, 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", {
+      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))]
+  });
+}, c = "StudioLayout", P = "Layout", ot = (t) => {
+  class n extends A {
+    componentName = t.type;
+    category = P;
+    library = c;
+    initialSize = {
+      width: 260,
+      height: 140
+    };
+    resizeBehavior = "both";
+    acceptsChildren = !0;
+    get toolbarIcon() {
+      return t.icon;
+    }
+    RenderPrototype(s) {
+      return /* @__PURE__ */ u(et, {
+        ...s,
+        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 q(c, n), {
+    name: c,
+    bundlePath: "",
+    categories: [{
+      name: P,
+      components: t.map((i) => ({
+        name: i.name,
+        category: P,
+        library: c,
+        bundlePath: "",
+        type: `${c}.${i.type}`,
+        component: new n[i.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
+};

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--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-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.112.0",
+  "version": "0.113.0",
   "description": "Cratis Scene: renders Studio prototypes as thumbnails and previews.",
   "license": "MIT",
   "author": "Cratis",
@@ -32,6 +32,10 @@
       "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": [
@@ -50,6 +54,10 @@
         "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"
     }
   },