@cratis/scene 0.108.0 → 0.108.1

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

@@ -0,0 +1,15 @@
+import React from 'react';
+import type { IComponent } from '../../IComponent';
+import type { UIElement } from '../../UIElement';
+import { PrototypeLayout } from '../../Layout/PrototypeLayout';
+export interface PrototypePreviewProps {
+    elements: readonly (UIElement | IComponent)[];
+    windowSize?: {
+        width: number;
+        height: number;
+    };
+    layout?: PrototypeLayout;
+    sourceRect?: DOMRect;
+    onClose: () => void;
+}
+export declare const PrototypePreview: ({ elements, windowSize, layout, sourceRect, onClose }: PrototypePreviewProps) => React.JSX.Element;

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

@@ -0,0 +1,5 @@
+export interface PrototypePreviewFit {
+    width: number;
+    titleBarHeight: number;
+    canvasHeight: number;
+}

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

@@ -17,5 +17,8 @@ export interface PrototypeThumbnailProps {
     /** The layout the surface arranges its elements with, so the preview flows them the same way the editor does. */
     layout?: PrototypeLayout;
     onClick?: (event: React.MouseEvent<HTMLElement>) => void;
+    width?: number;
+    titleBarHeight?: number;
+    openTitle?: string;
 }
 export declare const PrototypeThumbnail: React.FC<PrototypeThumbnailProps>;

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

@@ -2,5 +2,10 @@ export interface SceneMessages {
     prototypeThumbnail: {
         openEditor: string;
         windowTitle: string;
+        openPreview?: string;
+    };
+    prototypePreview?: {
+        title: string;
+        close: string;
     };
 }

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

@@ -0,0 +1,8 @@
+import type { PrototypePreviewFit } from './PrototypePreviewFit';
+export declare const fitPrototypePreview: (windowSize: {
+    width: number;
+    height: number;
+} | undefined, viewport: {
+    width: number;
+    height: number;
+}) => PrototypePreviewFit;

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

@@ -4,3 +4,6 @@ export * from './SceneMessagesContext';
 export * from './SceneMessagesProvider';
 export * from './TrafficLights';
 export * from './PrototypeThumbnail';
+export * from './PrototypePreview';
+export * from './PrototypePreviewFit';
+export * from './fitPrototypePreview';

package/dist/Prototypes/index.js

@@ -1,28 +1,36 @@
-import { c as N, f as n, k as q } from "../Scene-DaQtzf1e.js";
-import { createContext as M, useContext as P } from "react";
-import { Fragment as x, jsx as i, jsxs as f } from "react/jsx-runtime";
-var W = { prototypeThumbnail: {
-  openEditor: "Open prototype editor",
-  windowTitle: "Prototype"
-} }, b = M(W), R = () => P(b), Q = ({ messages: e, children: t }) => /* @__PURE__ */ i(b.Provider, {
-  value: e,
-  children: t
+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 = {
+  prototypeThumbnail: {
+    openEditor: "Open prototype editor",
+    windowTitle: "Prototype",
+    openPreview: "Show prototype"
+  },
+  prototypePreview: {
+    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 = [
   "#f66",
   "#fa0",
   "#3c3"
-], D = ({ size: e }) => /* @__PURE__ */ i(x, { children: C.map((t, r) => /* @__PURE__ */ i("div", {
+], G = ({ size: t }) => /* @__PURE__ */ r(M, { children: C.map((e, o) => /* @__PURE__ */ r("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
     } : {}
   }
-}, r)) }), F = (e) => {
-  switch (e) {
-    case n.flexRow:
+}, o)) }), U = (t) => {
+  switch (t) {
+    case h.flexRow:
       return {
         display: "flex",
         flexDirection: "row",
@@ -31,14 +39,14 @@ var W = { prototypeThumbnail: {
         padding: 12,
         alignContent: "flex-start"
       };
-    case n.flexColumn:
+    case h.flexColumn:
       return {
         display: "flex",
         flexDirection: "column",
         gap: 12,
         padding: 12
       };
-    case n.grid:
+    case h.grid:
       return {
         display: "grid",
         gridTemplateColumns: "repeat(auto-fill, minmax(180px, 1fr))",
@@ -49,103 +57,161 @@ var W = { prototypeThumbnail: {
     default:
       return {};
   }
-}, O = 900, S = 640, B = 40, G = 150, v = 16, $ = (e) => {
-  const t = e;
-  if (t.position && typeof t.position.x == "number") return {
-    x: t.position.x,
-    y: t.position.y ?? 0
+}, 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
   };
-  const r = t.properties?.canvas ?? {};
+  const o = e.properties?.canvas ?? {};
   return {
-    x: r.x ?? 0,
-    y: r.y ?? 0
+    x: o.x ?? 0,
+    y: o.y ?? 0
   };
-}, U = (e) => {
-  const t = e;
-  return t.size && typeof t.size.width == "number" ? {
-    width: t.size.width,
-    height: t.size.height ?? 0
+}, Q = (t) => {
+  const e = t;
+  return e.size && typeof e.size.width == "number" ? {
+    width: e.size.width,
+    height: e.size.height ?? 0
   } : {
-    width: t.width ?? 0,
-    height: t.height ?? 0
+    width: e.width ?? 0,
+    height: e.height ?? 0
   };
-}, V = ({ elements: e, windowSize: t, layout: r = n.absolute, onClick: p }) => {
-  const s = R().prototypeThumbnail, w = t && t.width > 0 ? t.width : O, T = t && t.height > 0 ? t.height : S, E = r !== n.absolute, H = r === n.grid, l = w, d = Math.max(1, T - B), h = G / l, I = Math.round(l * h), _ = Math.round(d * h), c = /* @__PURE__ */ f(x, { children: [/* @__PURE__ */ f("div", {
+}, 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", {
     className: "prototype-thumbnail-title-bar",
-    style: { height: v },
-    children: [/* @__PURE__ */ i(D, { size: 6 }), /* @__PURE__ */ i("span", {
+    style: { height: i },
+    children: [/* @__PURE__ */ r(G, { size: Math.round(i * 0.375) }), /* @__PURE__ */ r("span", {
       className: "prototype-thumbnail-title",
-      children: s.windowTitle
+      children: l.windowTitle
     })]
-  }), /* @__PURE__ */ i("div", {
+  }), /* @__PURE__ */ r("div", {
     className: "prototype-thumbnail-body",
     inert: !0,
-    children: /* @__PURE__ */ i("div", {
+    children: /* @__PURE__ */ r("div", {
       className: "prototype-thumbnail-canvas-scaler",
       style: {
-        width: l,
-        height: d,
-        transform: `scale(${h})`,
+        width: d,
+        height: T,
+        transform: `scale(${w})`,
         transformOrigin: "top left",
-        ...F(r)
+        ...U(o)
       },
-      children: e.filter(Boolean).map((A) => {
-        const o = N(A), y = String(o.id), g = $(o), a = U(o), u = E ? {
+      children: t.filter(Boolean).map((D) => {
+        const a = R(D), E = String(a.id), H = K(a), y = Q(a), I = v ? {
           position: "relative",
-          width: H ? "100%" : a.width,
-          height: a.height,
+          width: p ? "100%" : y.width,
+          height: y.height,
           flexShrink: 0
         } : {
           position: "absolute",
-          left: g.x,
-          top: g.y,
-          width: a.width,
-          height: a.height
+          left: H.x,
+          top: H.y,
+          width: y.width,
+          height: y.height
         };
-        if ("RenderPrototype" in o && typeof o.RenderPrototype == "function") return /* @__PURE__ */ i("div", {
+        if ("RenderPrototype" in a && typeof a.RenderPrototype == "function") return /* @__PURE__ */ r("div", {
           style: {
-            ...u,
+            ...I,
             pointerEvents: "none",
             overflow: "hidden"
           },
-          children: o.RenderPrototype({
-            component: o,
-            label: o.label
+          children: a.RenderPrototype({
+            component: a,
+            label: a.label
           })
-        }, y);
-        const L = "type" in o && typeof o.type == "string" ? ` prototype-thumbnail-element--${o.type}` : "";
-        return /* @__PURE__ */ i("div", {
-          className: `prototype-thumbnail-element${L}`,
-          style: u
-        }, y);
+        }, 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);
       })
     })
-  })] }), m = {
-    width: I,
-    height: v + _
+  })] }), x = {
+    width: L,
+    height: i + N
   };
-  return p ? /* @__PURE__ */ i("button", {
+  return s ? /* @__PURE__ */ r("button", {
     className: "prototype-thumbnail",
-    onClick: p,
-    title: s.openEditor,
-    style: m,
-    children: c
-  }) : /* @__PURE__ */ i("div", {
+    onClick: s,
+    title: c ?? l.openEditor,
+    style: x,
+    children: b
+  }) : /* @__PURE__ */ r("div", {
     className: "prototype-thumbnail",
     role: "img",
-    "aria-label": s.windowTitle,
-    style: m,
-    children: c
+    "aria-label": l.windowTitle,
+    style: x,
+    children: b
+  });
+}, 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);
+  return {
+    width: i,
+    canvasHeight: Math.round(Math.max(1, s - _) * (i / o)),
+    titleBarHeight: Math.max(z, Math.round(_ * n))
+  };
+}, rt = () => 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();
+    };
+    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", {
+    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", {
+      className: "prototype-preview-window",
+      style: m ? { "--prototype-preview-from": m } : void 0,
+      onClick: (p) => p.stopPropagation(),
+      children: [/* @__PURE__ */ r(X, {
+        elements: t,
+        windowSize: e,
+        layout: o,
+        width: l.width,
+        titleBarHeight: l.titleBarHeight
+      }), /* @__PURE__ */ r("button", {
+        type: "button",
+        className: "prototype-preview-close",
+        "aria-label": i.close,
+        title: i.close,
+        onClick: n,
+        children: "×"
+      })]
+    })
   });
-}, X = 15;
+  return typeof document > "u" ? v : B(v, document.body);
+}, mt = 15;
 export {
-  q as AnchorEdges,
-  n as PrototypeLayout,
-  V as PrototypeThumbnail,
-  b as SceneMessagesContext,
-  Q as SceneMessagesProvider,
-  D as TrafficLights,
-  X as allAnchorEdgesForEditor,
-  W as defaultSceneMessages,
-  R as useSceneMessages
+  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
 };

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-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}}
 /*$vite$:1*/

package/package.json

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