@cratis/scene 0.105.6

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

@@ -0,0 +1,35 @@
+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;
+export type PrototypeTool = PrototypeSurfaceElementType | 'select';
+export interface PrototypeComponentReference {
+    name: string;
+    category: string;
+    library: string;
+    bundlePath: string;
+    type: string;
+}
+export interface PrototypeComponentDefinition extends PrototypeComponentReference {
+    component?: IComponent;
+}
+export interface PrototypeComponentCategoryDefinition {
+    name: string;
+    components: PrototypeComponentDefinition[];
+}
+export interface PrototypeComponentLibraryDefinition {
+    name: string;
+    bundlePath: string;
+    categories: PrototypeComponentCategoryDefinition[];
+}
+/** The payload describing a component dragged from the toolbox onto the prototype surface. */
+export interface PrototypeDropItem {
+    type: PrototypeSurfaceElementType;
+    component?: PrototypeComponentDefinition;
+}
+export type PrototypeSurfaceElement = IComponent;
+export type PrototypeElement = PrototypeSurfaceElement;
+export declare const allAnchorEdgesForEditor: AnchorEdges;
+export { AnchorEdges, PrototypeLayout };

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

@@ -0,0 +1,21 @@
+import React from 'react';
+import type { IComponent } from '../../IComponent';
+import type { UIElement } from '../../UIElement';
+import { PrototypeLayout } from '../../Layout/PrototypeLayout';
+export interface PrototypeThumbnailProps {
+    elements: readonly (UIElement | IComponent)[];
+    /**
+     * The size of the prototype editor window this thumbnail previews (the outer window size, including
+     * the title bar). The canvas region is scaled down uniformly to this aspect ratio so the preview is an
+     * exact, smaller copy. Falls back to the editor's default window size when the window has not been
+     * resized yet.
+     */
+    windowSize?: {
+        width: number;
+        height: number;
+    };
+    /** 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;
+}
+export declare const PrototypeThumbnail: React.FC<PrototypeThumbnailProps>;

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

@@ -0,0 +1,6 @@
+export interface SceneMessages {
+    prototypeThumbnail: {
+        openEditor: string;
+        windowTitle: string;
+    };
+}

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

@@ -0,0 +1,3 @@
+import type { SceneMessages } from './SceneMessages';
+export declare const SceneMessagesContext: import("react").Context<SceneMessages>;
+export declare const useSceneMessages: () => SceneMessages;

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

@@ -0,0 +1,7 @@
+import React from 'react';
+import type { SceneMessages } from './SceneMessages';
+export interface SceneMessagesProviderProps {
+    messages: SceneMessages;
+    children?: React.ReactNode;
+}
+export declare const SceneMessagesProvider: ({ messages, children }: SceneMessagesProviderProps) => React.JSX.Element;

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

@@ -0,0 +1,9 @@
+export interface TrafficLightsProps {
+    /**
+     * Optional pixel diameter for each light. When omitted the lights use the CSS default (12px) of the
+     * full-size window. Pass a smaller value (e.g. for the thumbnail) to render the same colored lights at
+     * a fixed, legible size that does not scale with the window.
+     */
+    size?: number;
+}
+export declare const TrafficLights: ({ size }: TrafficLightsProps) => import("react").JSX.Element;

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

@@ -0,0 +1,2 @@
+import type { SceneMessages } from './SceneMessages';
+export declare const defaultSceneMessages: SceneMessages;

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

@@ -0,0 +1,6 @@
+export * from './SceneMessages';
+export * from './defaultSceneMessages';
+export * from './SceneMessagesContext';
+export * from './SceneMessagesProvider';
+export * from './TrafficLights';
+export * from './PrototypeThumbnail';

package/dist/Prototypes/index.d.ts

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

package/dist/Prototypes/index.js

@@ -0,0 +1,151 @@
+import { l as n, o as A, p as q } from "../PrototypeComponentRegistry-FLUzIk5a.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
+}), C = [
+  "#f66",
+  "#fa0",
+  "#3c3"
+], D = ({ size: e }) => /* @__PURE__ */ i(x, { children: C.map((t, r) => /* @__PURE__ */ i("div", {
+  className: "prototype-window-traffic-light",
+  style: {
+    border: `${e ? Math.max(1, e / 8) : 1.5}px solid ${t}`,
+    ...e ? {
+      width: e,
+      height: e
+    } : {}
+  }
+}, r)) }), F = (e) => {
+  switch (e) {
+    case n.flexRow:
+      return {
+        display: "flex",
+        flexDirection: "row",
+        flexWrap: "wrap",
+        gap: 12,
+        padding: 12,
+        alignContent: "flex-start"
+      };
+    case n.flexColumn:
+      return {
+        display: "flex",
+        flexDirection: "column",
+        gap: 12,
+        padding: 12
+      };
+    case n.grid:
+      return {
+        display: "grid",
+        gridTemplateColumns: "repeat(auto-fill, minmax(180px, 1fr))",
+        gap: 12,
+        padding: 12,
+        alignContent: "flex-start"
+      };
+    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
+  };
+  const r = t.properties?.canvas ?? {};
+  return {
+    x: r.x ?? 0,
+    y: r.y ?? 0
+  };
+}, U = (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
+  };
+}, 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", {
+    className: "prototype-thumbnail-title-bar",
+    style: { height: v },
+    children: [/* @__PURE__ */ i(D, { size: 6 }), /* @__PURE__ */ i("span", {
+      className: "prototype-thumbnail-title",
+      children: s.windowTitle
+    })]
+  }), /* @__PURE__ */ i("div", {
+    className: "prototype-thumbnail-body",
+    inert: !0,
+    children: /* @__PURE__ */ i("div", {
+      className: "prototype-thumbnail-canvas-scaler",
+      style: {
+        width: l,
+        height: d,
+        transform: `scale(${h})`,
+        transformOrigin: "top left",
+        ...F(r)
+      },
+      children: e.filter(Boolean).map((L) => {
+        const o = A(L), y = String(o.id), g = $(o), a = U(o), u = E ? {
+          position: "relative",
+          width: H ? "100%" : a.width,
+          height: a.height,
+          flexShrink: 0
+        } : {
+          position: "absolute",
+          left: g.x,
+          top: g.y,
+          width: a.width,
+          height: a.height
+        };
+        if ("RenderPrototype" in o && typeof o.RenderPrototype == "function") return /* @__PURE__ */ i("div", {
+          style: {
+            ...u,
+            pointerEvents: "none",
+            overflow: "hidden"
+          },
+          children: o.RenderPrototype({
+            component: o,
+            label: o.label
+          })
+        }, y);
+        const N = "type" in o && typeof o.type == "string" ? ` prototype-thumbnail-element--${o.type}` : "";
+        return /* @__PURE__ */ i("div", {
+          className: `prototype-thumbnail-element${N}`,
+          style: u
+        }, y);
+      })
+    })
+  })] }), m = {
+    width: I,
+    height: v + _
+  };
+  return p ? /* @__PURE__ */ i("button", {
+    className: "prototype-thumbnail",
+    onClick: p,
+    title: s.openEditor,
+    style: m,
+    children: c
+  }) : /* @__PURE__ */ i("div", {
+    className: "prototype-thumbnail",
+    role: "img",
+    "aria-label": s.windowTitle,
+    style: m,
+    children: c
+  });
+}, X = 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
+};

package/dist/ResizeBevhavior.d.ts

@@ -0,0 +1 @@
+export type ResizeBevhavior = 'none' | 'horizontal' | 'vertical' | 'both';

package/dist/SceneObject.d.ts

@@ -0,0 +1,14 @@
+import { Guid } from '@cratis/fundamentals';
+/**
+ * Represents the abstract root of the Scene object model. Every object in a Scene has a stable {@link Id} and an open-ended {@link Properties} bag for low-code metadata, attached properties and values not covered by the typed API.
+ */
+export declare class SceneObject {
+    /**
+     * Gets or sets the unique identifier of this scene object.
+     */
+    id: Guid;
+    /**
+     * Gets or sets an open-ended property bag used to represent values that are not modelled as typed properties. This is the primary extension point used by the Low Code environment to store attached properties, design-time metadata and values for external components.
+     */
+    properties: Record<string, Record<string, unknown>>;
+}

package/dist/Size.d.ts

@@ -0,0 +1,4 @@
+export interface Size {
+    width: number;
+    height: number;
+}

package/dist/UIElement.d.ts

@@ -0,0 +1,36 @@
+import { AnchorEdges } from './AnchorEdges';
+import { SceneObject } from './SceneObject';
+import { Visibility } from './Layout/Visibility';
+/**
+ * Represents the abstract base of every visual element in the Scene object model. A {@link UIElement} exposes the core visual behaviors — visibility, input responsiveness, opacity, size, z-order and anchoring — that are shared by every component.
+ */
+export declare class UIElement extends SceneObject {
+    /**
+     * Gets or sets the visibility of the element.
+     */
+    visibility: Visibility;
+    /**
+     * Gets or sets a value indicating whether the element participates in user input.
+     */
+    isEnabled: boolean;
+    /**
+     * Gets or sets the opacity of the element on a scale from 0.0 (fully transparent) to 1.0 (fully opaque).
+     */
+    opacity: number;
+    /**
+     * Gets or sets the explicit width of the element. When `null` the width is auto-sized.
+     */
+    width?: number;
+    /**
+     * Gets or sets the explicit height of the element. When `null` the height is auto-sized.
+     */
+    height?: number;
+    /**
+     * Gets or sets the z-order index controlling the stacking position relative to sibling elements.
+     */
+    ZIndex: number;
+    /**
+     * Gets or sets the edges to which the element is anchored within its parent.
+     */
+    anchoring: AnchorEdges;
+}

package/dist/WellKnownCategories.d.ts

@@ -0,0 +1,20 @@
+export declare const WellKnownCategories: {
+    readonly Layout: 'Layout';
+    readonly Containers: 'Containers';
+    readonly Form: 'Form';
+    readonly Button: 'Button';
+    readonly Buttons: 'Buttons';
+    readonly Data: 'Data';
+    readonly Panel: 'Panel';
+    readonly Panels: 'Panels';
+    readonly Overlay: 'Overlay';
+    readonly File: 'File';
+    readonly Menu: 'Menu';
+    readonly Menus: 'Menus';
+    readonly Chart: 'Chart';
+    readonly Charts: 'Charts';
+    readonly Messages: 'Messages';
+    readonly Media: 'Media';
+    readonly Misc: 'Misc';
+};
+export declare function getCategoryIcon(category: string): string;

package/dist/index.d.ts

@@ -0,0 +1,23 @@
+export * from './CategoryAttribute';
+export * from './ComponentLibraryAttribute';
+export * from './ContentControl';
+export * from './Control';
+export * from './ExternalComponent';
+export * from './FrameworkElement';
+export * from './IComponent';
+export * from './Component';
+export * from './IPrototypeComponentDiscovery';
+export * from './ItemsControl';
+export * from './IUIElement';
+export * from './Panel';
+export * from './Position';
+export * from './PrototypeComponentDiscovery';
+export * from './SceneObject';
+export * from './Size';
+export * from './ResizeBevhavior';
+export * from './AnchorEdges';
+export * from './Layout/Visibility';
+export * from './Layout/PrototypeLayout';
+export * from './UIElement';
+export * from './PrototypeComponentRegistry';
+export * from './WellKnownCategories';

package/dist/index.js

@@ -0,0 +1,261 @@
+import { a as O, c as I, d as j, f as E, g as o, h as t, i as B, l as F, m as L, n as k, o as z, p as D, r as _, s as w, t as W, u as a } from "./PrototypeComponentRegistry-FLUzIk5a.js";
+import { derivedType as l, field as i } from "@cratis/fundamentals";
+var S = class {
+  name;
+};
+t([i(String), o("design:type", String)], S.prototype, "name", void 0);
+var C = class {
+  name;
+};
+t([i(String), o("design:type", String)], C.prototype, "name", void 0);
+var b = /* @__PURE__ */ (function(e) {
+  return e[e.left = 0] = "left", e[e.center = 1] = "center", e[e.right = 2] = "right", e[e.stretch = 3] = "stretch", e;
+})({}), n = class {
+  left;
+  top;
+  right;
+  bottom;
+};
+t([i(Number), o("design:type", Number)], n.prototype, "left", void 0);
+t([i(Number), o("design:type", Number)], n.prototype, "top", void 0);
+t([i(Number), o("design:type", Number)], n.prototype, "right", void 0);
+t([i(Number), o("design:type", Number)], n.prototype, "bottom", void 0);
+var f = /* @__PURE__ */ (function(e) {
+  return e[e.top = 0] = "top", e[e.center = 1] = "center", e[e.bottom = 2] = "bottom", e[e.stretch = 3] = "stretch", e;
+})({}), p = class extends a {
+  name;
+  minWidth;
+  maxWidth;
+  minHeight;
+  maxHeight;
+  margin;
+  horizontalAlignment;
+  verticalAlignment;
+};
+t([i(String), o("design:type", String)], p.prototype, "name", void 0);
+t([i(Number), o("design:type", Number)], p.prototype, "minWidth", void 0);
+t([i(Number), o("design:type", Number)], p.prototype, "maxWidth", void 0);
+t([i(Number), o("design:type", Number)], p.prototype, "minHeight", void 0);
+t([i(Number), o("design:type", Number)], p.prototype, "maxHeight", void 0);
+t([i(n), o("design:type", typeof n > "u" ? Object : n)], p.prototype, "margin", void 0);
+t([i(Number), o("design:type", typeof b > "u" ? Object : b)], p.prototype, "horizontalAlignment", void 0);
+t([i(Number), o("design:type", typeof f > "u" ? Object : f)], p.prototype, "verticalAlignment", void 0);
+var s = class extends p {
+  background;
+  foreground;
+  borderBrush;
+  borderThickness;
+  padding;
+  fontFamily;
+  fontSize;
+  fontWeight;
+  tabIndex;
+};
+t([i(String), o("design:type", String)], s.prototype, "background", void 0);
+t([i(String), o("design:type", String)], s.prototype, "foreground", void 0);
+t([i(String), o("design:type", String)], s.prototype, "borderBrush", void 0);
+t([i(n), o("design:type", typeof n > "u" ? Object : n)], s.prototype, "borderThickness", void 0);
+t([i(n), o("design:type", typeof n > "u" ? Object : n)], s.prototype, "padding", void 0);
+t([i(String), o("design:type", String)], s.prototype, "fontFamily", void 0);
+t([i(Number), o("design:type", Number)], s.prototype, "fontSize", void 0);
+t([i(String), o("design:type", String)], s.prototype, "fontWeight", void 0);
+t([i(Number), o("design:type", Number)], s.prototype, "tabIndex", void 0);
+var m = class extends s {
+  content;
+};
+t([i(a), o("design:type", typeof a > "u" ? Object : a)], m.prototype, "content", void 0);
+m = t([l("contentControl")], m);
+var g = class extends p {
+  componentName;
+  slots;
+};
+t([i(String), o("design:type", String)], g.prototype, "componentName", void 0);
+t([i(Object), o("design:type", typeof Record > "u" ? Object : Record)], g.prototype, "slots", void 0);
+g = t([l("externalComponent")], g);
+var N = class extends g {
+  initialSize = {
+    width: 220,
+    height: 72
+  };
+  resizeBehavior = "both";
+  acceptsChildren = !1;
+  constructor() {
+    super();
+    let e = "";
+    Object.defineProperty(this, "id", {
+      get() {
+        return e;
+      },
+      set(h) {
+        e = String(h ?? "");
+      },
+      enumerable: !0,
+      configurable: !0
+    });
+  }
+  get label() {
+    return this.name ?? "";
+  }
+  set label(e) {
+    this.name = e;
+  }
+  get position() {
+    const e = this.properties?.canvas ?? {};
+    return {
+      x: e.x ?? 0,
+      y: e.y ?? 0
+    };
+  }
+  set position(e) {
+    this.properties = {
+      ...this.properties ?? {},
+      canvas: {
+        x: e.x,
+        y: e.y
+      }
+    };
+  }
+  get size() {
+    return {
+      width: this.width ?? 0,
+      height: this.height ?? 0
+    };
+  }
+  set size(e) {
+    this.width = Math.trunc(e.width), this.height = Math.trunc(e.height);
+  }
+  get children() {
+    return this.slots?.children ?? [];
+  }
+  set children(e) {
+    this.slots = {
+      ...this.slots ?? {},
+      children: e
+    };
+  }
+  get type() {
+    const e = this.componentName ?? "", h = e.split(".").pop() ?? e;
+    return this.library ? `${this.library}.${h}` : h;
+  }
+  initialize(e) {
+    return e.id !== void 0 && (this.id = e.id), e.label !== void 0 && (this.label = e.label), e.position !== void 0 && (this.position = e.position), e.size !== void 0 && (this.size = e.size), e.ZIndex !== void 0 && (this.ZIndex = e.ZIndex), e.anchoring !== void 0 && (this.anchoring = e.anchoring), e.children !== void 0 && (this.children = e.children), this.name || (this.name = this.componentName), e.size || (this.size = { ...this.initialSize }), this.componentName = this.type, this;
+  }
+};
+i(String)(N.prototype, "id");
+var A = class {
+}, y = class extends p {
+  children;
+  background;
+};
+t([i(a, !0), o("design:type", Array)], y.prototype, "children", void 0);
+t([i(String), o("design:type", String)], y.prototype, "background", void 0);
+var c = class extends s {
+  items;
+  itemsPanel;
+};
+t([i(a, !0), o("design:type", Array)], c.prototype, "items", void 0);
+t([i(y), o("design:type", typeof y > "u" ? Object : y)], c.prototype, "itemsPanel", void 0);
+c = t([l("itemsControl")], c);
+var K = class {
+}, d = class {
+  name;
+  namespace;
+  category;
+  library;
+  bundlePath;
+  type;
+};
+t([i(String), o("design:type", String)], d.prototype, "name", void 0);
+t([i(String), o("design:type", String)], d.prototype, "namespace", void 0);
+t([i(String), o("design:type", String)], d.prototype, "category", void 0);
+t([i(String), o("design:type", String)], d.prototype, "library", void 0);
+t([i(String), o("design:type", String)], d.prototype, "bundlePath", void 0);
+t([i(String), o("design:type", String)], d.prototype, "type", void 0);
+var U = class {
+}, u = class {
+  name;
+  components;
+};
+t([i(String), o("design:type", String)], u.prototype, "name", void 0);
+t([i(d, !0), o("design:type", Array)], u.prototype, "components", void 0);
+var v = class {
+  name;
+  bundlePath;
+  categories;
+};
+t([i(String), o("design:type", String)], v.prototype, "name", void 0);
+t([i(String), o("design:type", String)], v.prototype, "bundlePath", void 0);
+t([i(u, !0), o("design:type", Array)], v.prototype, "categories", void 0);
+var r = {
+  Layout: "Layout",
+  Containers: "Containers",
+  Form: "Form",
+  Button: "Button",
+  Buttons: "Buttons",
+  Data: "Data",
+  Panel: "Panel",
+  Panels: "Panels",
+  Overlay: "Overlay",
+  File: "File",
+  Menu: "Menu",
+  Menus: "Menus",
+  Chart: "Chart",
+  Charts: "Charts",
+  Messages: "Messages",
+  Media: "Media",
+  Misc: "Misc"
+}, P = {
+  [r.Layout]: "pi pi-objects-column",
+  [r.Containers]: "pi pi-box",
+  [r.Form]: "pi pi-pencil",
+  [r.Button]: "pi pi-stop",
+  [r.Buttons]: "pi pi-stop",
+  [r.Data]: "pi pi-list",
+  [r.Panel]: "pi pi-table",
+  [r.Panels]: "pi pi-table",
+  [r.Overlay]: "pi pi-clone",
+  [r.File]: "pi pi-file",
+  [r.Menu]: "pi pi-bars",
+  [r.Menus]: "pi pi-bars",
+  [r.Chart]: "pi pi-chart-bar",
+  [r.Charts]: "pi pi-chart-bar",
+  [r.Messages]: "pi pi-envelope",
+  [r.Media]: "pi pi-image",
+  [r.Misc]: "pi pi-ellipsis-h"
+}, x = "pi pi-folder-open";
+function Y(e) {
+  return P[e] ?? x;
+}
+export {
+  D as AnchorEdges,
+  S as CategoryAttribute,
+  N as Component,
+  C as ComponentLibraryAttribute,
+  m as ContentControl,
+  s as Control,
+  g as ExternalComponent,
+  p as FrameworkElement,
+  A as IPrototypeComponentDiscovery,
+  K as IUIElement,
+  c as ItemsControl,
+  y as Panel,
+  u as PrototypeComponentCategoryDescriptor,
+  d as PrototypeComponentDescriptor,
+  U as PrototypeComponentDiscovery,
+  v as PrototypeComponentLibraryDescriptor,
+  F as PrototypeLayout,
+  E as SceneObject,
+  a as UIElement,
+  j as Visibility,
+  r as WellKnownCategories,
+  L as allAnchorEdges,
+  W as createPrototypeComponentInstance,
+  k as ensurePrototypeComponentBundle,
+  Y as getCategoryIcon,
+  _ as getPrototypeComponent,
+  B as hydrateElement,
+  O as hydrateElements,
+  z as hydratePrototypeElement,
+  w as loadPrototypeComponentLibraries,
+  I as registerPrototypeComponentLibrary
+};

package/dist/scene.css

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