@cratis/scene 0.105.6

package/README.md

@@ -0,0 +1,96 @@
+# Scene
+
+TypeScript models for the Studio's low-code canvas: UIElement hierarchy, ExternalComponent, and the prototype surface component system.
+
+## Serialized prototype previews
+
+`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.
+
+## 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.
+
+### Why extends ExternalComponent?
+
+Commands that carry elements use `UIElement[]` as their type on both the C# and TypeScript sides. Before this design, `Component` was a separate class that implemented `IComponent` and had to be converted to a wire-format plain object before assignment (`toWireElement`). That conversion was a callsite smell that hid serialization failures and required every consumer to know about it.
+
+Now `Component extends ExternalComponent implements IComponent`. An `InputText` instance IS a `UIElement` — pass it directly:
+
+```ts
+command.elements = updatedElements as unknown as typeof command.elements;
+```
+
+The `as unknown as` cast is still needed because TypeScript sees `UIElement[]` (with `id: Guid`) while the editor's `PrototypeSurfaceElement` type has `id: string`. The runtime values are correct; only the declared types diverge at this boundary.
+
+### How serialization works
+
+The Fundamentals `JsonSerializer` walks `Object.getOwnPropertyNames(instance)` and serializes each own property. The design of `Component` ensures only JSON-safe values appear as own properties:
+
+| What | Own property? | Why |
+|---|---|---|
+| `id` | Yes — string accessor via `Object.defineProperty` | C# `System.Text.Json` parses a UUID string as `Guid` automatically |
+| `ZIndex`, `anchoring`, `width`, `height`, `name`, `properties`, `slots`, `componentName` | Yes — class fields set in `initialize()` | All are plain values; safely serialized |
+| `_derivedTypeId` | Yes — set explicitly in `initialize()` | Tells Fundamentals to deserialize as `ExternalComponent` on the server |
+| `toolbarIcon` | **No** — prototype getter | React-icons components are regular functions with a `prototype.constructor` self-reference; serializing them causes infinite recursion. Being a prototype getter keeps them out of `Object.getOwnPropertyNames` entirely |
+| `RenderPrototype` | No — abstract prototype method | Same reason; a method on the prototype is never an own property of the instance |
+| `label`, `position`, `size`, `children`, `type` | No — prototype getters | Computed bridges; not serializable data |
+
+### The id bridge
+
+`SceneObject` declares `id: Guid` (via `@field(Guid)`). `IComponent` declares `id: string`. The constructor replaces the class-field own property with a plain-string accessor:
+
+```ts
+let _id = '';
+Object.defineProperty(this, 'id', {
+    get() { return _id; },
+    set(value: string) { _id = String(value ?? ''); },
+    enumerable: true,
+    configurable: true,
+});
+```
+
+The serializer reads the string UUID; C# parses it as `Guid`. Editor code that compares IDs uses `string` equality throughout.
+
+### The `_derivedTypeId` own property
+
+`DerivedType.get(constructor)` uses `Reflect.getOwnMetadata`, which does **not** traverse the prototype chain. The `@derivedType('externalComponent')` decorator is on `ExternalComponent`, so `DerivedType.get(InputText)` returns `undefined`. Without the explicit own property the JSON output would have no `_derivedTypeId` and the C# deserializer would not know to construct an `ExternalComponent`.
+
+`initialize()` sets it directly:
+
+```ts
+(this as unknown as Record<string, unknown>)['_derivedTypeId'] = 'externalComponent';
+```
+
+### The type key
+
+After `initialize()`, `componentName` is updated to the full library-qualified key (`'PrimeReact.InputText'`). Before `initialize()` the subclass class field holds the short name (`'InputText'`). The `type` getter always returns the fully qualified key by splitting on `.` and re-joining with `library`:
+
+```ts
+get type(): string {
+    const cn = this.componentName ?? '';
+    const shortName = cn.split('.').pop() ?? cn;
+    return this.library ? `${this.library}.${shortName}` : shortName;
+}
+```
+
+### Subclass authoring
+
+Implement these members:
+
+```ts
+export default class InputText extends Component {
+    readonly componentName = 'InputText'; // short name; initialize() stores the full key
+    readonly category = 'Form';
+    readonly library = 'PrimeReact';
+    readonly initialSize = { width: 220, height: 42 };
+    readonly resizeBehavior = 'horizontal' as const;
+
+    // MUST be a getter — not a class field.
+    // Class fields are own instance properties and cause infinite recursion in Fundamentals' serializer.
+    override get toolbarIcon() { return FaKeyboard; }
+
+    RenderPrototype({ label }: PrototypeComponentRenderProps): ReactNode { ... }
+}
+```
+
+`toolbarIcon` **must** be an `override get`. A class field (`readonly toolbarIcon = FaKeyboard`) makes `FaKeyboard` an own instance property. Fundamentals' serializer then calls `Object.getOwnPropertyNames(FaKeyboard)` which includes `prototype`, whose `constructor` points back to `FaKeyboard`, causing unbounded recursion and a `RangeError`.

package/dist/AnchorEdges.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Represents the edges of a UI element to which it is anchored. Multiple edges can be combined using bitwise operations.
+ */
+export declare enum AnchorEdges {
+    none = 0,
+    top = 1,
+    right = 2,
+    bottom = 4,
+    left = 8
+}
+export declare const allAnchorEdges: number;

package/dist/CategoryAttribute.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Declares the category a type belongs to. Categories group components in the Low Code environment — mirroring how component libraries such as PrimeReact and Cratis Components organise their documentation — so that tools can present palettes and pickers in a familiar structure.
+ */
+export declare class CategoryAttribute {
+    /**
+     * Gets the name of the category.
+     */
+    name: string;
+}

package/dist/Component.d.ts

@@ -0,0 +1,38 @@
+import { ExternalComponent } from './ExternalComponent';
+import type { ComponentState, IComponent, PrototypeComponentRenderProps } from './IComponent';
+import type { ComponentType, ReactNode } from 'react';
+import type { Position } from './Position';
+import type { Size } from './Size';
+/**
+ * Abstract base class for all prototype surface components.
+ * Extends ExternalComponent so instances are proper UIElement subtypes serializable
+ * by Fundamentals without any manual wire-format conversion.
+ */
+export declare abstract class Component extends ExternalComponent implements IComponent {
+    id: string;
+    readonly initialSize: Size;
+    readonly resizeBehavior: IComponent['resizeBehavior'];
+    readonly acceptsChildren: boolean;
+    abstract readonly category: string;
+    abstract readonly library: string;
+    /**
+     * Icon shown in the editor toolbar. Declared as an abstract getter so implementations
+     * land on the prototype — NOT as an own instance property. Own function-valued properties
+     * cause infinite recursion in the Fundamentals serializer.
+     */
+    abstract get toolbarIcon(): ComponentType<{
+        className?: string;
+    }> | undefined;
+    constructor();
+    get label(): string;
+    set label(value: string);
+    get position(): Position;
+    set position(value: Position);
+    get size(): Size;
+    set size(value: Size);
+    get children(): IComponent[];
+    set children(value: IComponent[]);
+    get type(): string;
+    abstract RenderPrototype(props: PrototypeComponentRenderProps): ReactNode;
+    initialize(state: Partial<ComponentState>): this;
+}

package/dist/ComponentLibraryAttribute.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Declares the name of the component library assembly. Applied at the assembly level, this attribute identifies which component library (e.g., PrimeReact, Cratis Components) a project represents, enabling tools to discover and display components from known libraries.
+ */
+export declare class ComponentLibraryAttribute {
+    /**
+     * Gets the name of the component library.
+     */
+    name: string;
+}

package/dist/ContentControl.d.ts

@@ -0,0 +1,11 @@
+import { Control } from './Control';
+import { UIElement } from './UIElement';
+/**
+ * Represents a {@link Control} that contains a single piece of content. This is the XAML-style base for components that display one child element, such as buttons, cards and framed containers.
+ */
+export declare class ContentControl extends Control {
+    /**
+     * Gets or sets the content of the control.
+     */
+    content?: UIElement;
+}

package/dist/Control.d.ts

@@ -0,0 +1,43 @@
+import { FrameworkElement } from './FrameworkElement';
+import { Thickness } from './Layout/Thickness';
+/**
+ * Represents the base class for an interactive control. A {@link Control} adds the appearance surface — colors, padding, border and typography — used by most components.
+ */
+export declare class Control extends FrameworkElement {
+    /**
+     * Gets or sets the background color of the control.
+     */
+    background?: string;
+    /**
+     * Gets or sets the foreground (typically text) color of the control.
+     */
+    foreground?: string;
+    /**
+     * Gets or sets the border color of the control.
+     */
+    borderBrush?: string;
+    /**
+     * Gets or sets the thickness of the control's border.
+     */
+    borderThickness: Thickness;
+    /**
+     * Gets or sets the inner padding of the control.
+     */
+    padding: Thickness;
+    /**
+     * Gets or sets the font family of any text rendered by the control.
+     */
+    fontFamily?: string;
+    /**
+     * Gets or sets the font size of any text rendered by the control.
+     */
+    fontSize?: number;
+    /**
+     * Gets or sets the font weight of any text rendered by the control.
+     */
+    fontWeight?: string;
+    /**
+     * Gets or sets the tab index of the control, controlling focus order.
+     */
+    tabIndex: number;
+}

package/dist/ExternalComponent.d.ts

@@ -0,0 +1,15 @@
+import { FrameworkElement } from './FrameworkElement';
+import { UIElement } from './UIElement';
+/**
+ * Represents an external component that is not modelled by a dedicated Scene type. This is the primary extension point used by the Low Code environment to represent components sourced from libraries such as PrimeReact or Cratis Components.
+ */
+export declare class ExternalComponent extends FrameworkElement {
+    /**
+     * Gets or sets the {@link ComponentName} identifying the component.
+     */
+    componentName: string;
+    /**
+     * Gets the named slots of the component. Each slot is a named projection of child elements — the analogue of named template regions such as PrimeReact's `header`, `footer` or `item` templates.
+     */
+    slots: Record<string, UIElement[]>;
+}

package/dist/FrameworkElement.d.ts

@@ -0,0 +1,41 @@
+import { HorizontalAlignment } from './Layout/HorizontalAlignment';
+import { Thickness } from './Layout/Thickness';
+import { UIElement } from './UIElement';
+import { VerticalAlignment } from './Layout/VerticalAlignment';
+/**
+ * Represents an element that participates in layout. A {@link FrameworkElement} adds sizing, alignment, margin and naming capabilities on top of {@link UIElement}.
+ */
+export declare class FrameworkElement extends UIElement {
+    /**
+     * Gets or sets the design-time name of the element. This is the analogue of XAML's `x:Name` and is used by the Low Code environment to refer to the element.
+     */
+    name?: string;
+    /**
+     * Gets or sets the minimum width of the element.
+     */
+    minWidth: number;
+    /**
+     * Gets or sets the maximum width of the element.
+     */
+    maxWidth: number;
+    /**
+     * Gets or sets the minimum height of the element.
+     */
+    minHeight: number;
+    /**
+     * Gets or sets the maximum height of the element.
+     */
+    maxHeight: number;
+    /**
+     * Gets or sets the outer margin of the element.
+     */
+    margin: Thickness;
+    /**
+     * Gets or sets the horizontal alignment within the layout slot allocated by the parent.
+     */
+    horizontalAlignment: HorizontalAlignment;
+    /**
+     * Gets or sets the vertical alignment within the layout slot allocated by the parent.
+     */
+    verticalAlignment: VerticalAlignment;
+}

package/dist/IComponent.d.ts

@@ -0,0 +1,52 @@
+import type { ComponentType, ReactNode } from 'react';
+import type { AnchorEdges } from './AnchorEdges';
+import type { Position } from './Position';
+import type { ResizeBevhavior } from './ResizeBevhavior';
+import type { Size } from './Size';
+export interface PrototypeComponentRenderProps {
+    component: IComponent;
+    label: string;
+    /** Whether the component is currently being hovered by a dragged item. */
+    isDragOver?: boolean;
+}
+export interface ComponentState {
+    id: string;
+    label: string;
+    position: Position;
+    size: Size;
+    ZIndex: number;
+    anchoring: AnchorEdges;
+    children?: IComponent[];
+}
+export interface IComponent {
+    id: string;
+    label: string;
+    position: Position;
+    size: Size;
+    /** Stack order — matches the backend PrototypeElement.ZIndex field name. */
+    ZIndex: number;
+    /** Anchor edges bitmask — matches the backend PrototypeElement.anchoring field name. */
+    anchoring: AnchorEdges;
+    /** The component type name within its library (e.g. "Button"). */
+    readonly componentName: string;
+    readonly type: string;
+    readonly category?: string;
+    readonly library?: string;
+    /** Icon displayed in the editor toolbar for this component type. */
+    readonly toolbarIcon?: ComponentType<{
+        className?: string;
+    }>;
+    readonly initialSize?: {
+        width: number;
+        height: number;
+    };
+    readonly resizeBehavior?: ResizeBevhavior;
+    /** When true, this component acts as a drop target and can receive child components. */
+    readonly acceptsChildren?: boolean;
+    /** Child components dropped into this component. Positions are relative to this component's top-left. */
+    children?: IComponent[];
+    RenderPrototype(props: PrototypeComponentRenderProps): ReactNode;
+}
+export interface PrototypeComponentConstructor {
+    new (): IComponent;
+}

package/dist/IPrototypeComponentDiscovery.d.ts

@@ -0,0 +1,2 @@
+export declare class IPrototypeComponentDiscovery {
+}

package/dist/IUIElement.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Marker interface implemented by {@link UIElement} and used as the DerivedType target for all concrete visual element types so that polymorphic UIElement collections can be serialized and deserialized correctly.
+ */
+export declare class IUIElement {
+}

package/dist/ItemsControl.d.ts

@@ -0,0 +1,16 @@
+import { Control } from './Control';
+import { Panel } from './Panel';
+import { UIElement } from './UIElement';
+/**
+ * Represents a {@link Control} that presents a collection of items. This is the XAML-style base for components that display a variable list of children, such as lists, tables, menus and selectors.
+ */
+export declare class ItemsControl extends Control {
+    /**
+     * Gets the collection of items displayed by the control.
+     */
+    items: UIElement[];
+    /**
+     * Gets or sets the panel used to lay out {@link Items}. When `null` the control's default items panel is used.
+     */
+    itemsPanel?: Panel;
+}

package/dist/Layout/HorizontalAlignment.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Describes how an element is horizontally positioned or stretched within a parent's allocated layout slot.
+ */
+export declare enum HorizontalAlignment {
+    left = 0,
+    center = 1,
+    right = 2,
+    stretch = 3
+}

package/dist/Layout/PrototypeLayout.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Describes how a prototype surface arranges the elements placed on it.
+ */
+export declare enum PrototypeLayout {
+    absolute = 0,
+    flexRow = 1,
+    flexColumn = 2,
+    grid = 3
+}

package/dist/Layout/Thickness.d.ts

@@ -0,0 +1,21 @@
+/**
+ * Describes the thickness of a frame around a rectangle.
+ */
+export declare class Thickness {
+    /**
+     * The thickness of the left edge.
+     */
+    left: number;
+    /**
+     * The thickness of the top edge.
+     */
+    top: number;
+    /**
+     * The thickness of the right edge.
+     */
+    right: number;
+    /**
+     * The thickness of the bottom edge.
+     */
+    bottom: number;
+}

package/dist/Layout/VerticalAlignment.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Describes how an element is vertically positioned or stretched within a parent's allocated layout slot.
+ */
+export declare enum VerticalAlignment {
+    top = 0,
+    center = 1,
+    bottom = 2,
+    stretch = 3
+}

package/dist/Layout/Visibility.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Describes the visibility of a {@link UIElement}.
+ */
+export declare enum Visibility {
+    visible = 0,
+    hidden = 1,
+    collapsed = 2
+}

package/dist/Panel.d.ts

@@ -0,0 +1,15 @@
+import { FrameworkElement } from './FrameworkElement';
+import { UIElement } from './UIElement';
+/**
+ * Represents the abstract base for components that lay out a collection of {@link UIElement} children. Panels are the primary visual layout primitive in the Scene object model.
+ */
+export declare class Panel extends FrameworkElement {
+    /**
+     * Gets the child elements of the panel.
+     */
+    children: UIElement[];
+    /**
+     * Gets or sets the background color of the panel.
+     */
+    background?: string;
+}

package/dist/Position.d.ts

@@ -0,0 +1,4 @@
+export interface Position {
+    x: number;
+    y: number;
+}

package/dist/PrototypeComponentDiscovery.d.ts

@@ -0,0 +1,22 @@
+export declare class PrototypeComponentDescriptor {
+    name: string;
+    namespace: string;
+    category: string;
+    library: string;
+    bundlePath: string;
+    type: string;
+}
+/**
+ * Represents an implementation of {@link IPrototypeComponentDiscovery} that scans loaded assemblies for {@link ComponentLibraryAttribute}-decorated component libraries via reflection.
+ */
+export declare class PrototypeComponentDiscovery {
+}
+export declare class PrototypeComponentCategoryDescriptor {
+    name: string;
+    components: PrototypeComponentDescriptor[];
+}
+export declare class PrototypeComponentLibraryDescriptor {
+    name: string;
+    bundlePath: string;
+    categories: PrototypeComponentCategoryDescriptor[];
+}

package/dist/PrototypeComponentRegistry-FLUzIk5a.js

@@ -0,0 +1,148 @@
+import { DerivedType as v, Guid as y, field as d } from "@cratis/fundamentals";
+function a(e, o) {
+  if (typeof Reflect == "object" && typeof Reflect.metadata == "function") return Reflect.metadata(e, o);
+}
+function p(e, o, t, n) {
+  var r = arguments.length, i = r < 3 ? o : n === null ? n = Object.getOwnPropertyDescriptor(o, t) : n, c;
+  if (typeof Reflect == "object" && typeof Reflect.decorate == "function") i = Reflect.decorate(e, o, t, n);
+  else for (var s = e.length - 1; s >= 0; s--) (c = e[s]) && (i = (r < 3 ? c(i) : r > 3 ? c(o, t, i) : c(o, t)) || i);
+  return r > 3 && i && Object.defineProperty(o, t, i), i;
+}
+var O = /* @__PURE__ */ (function(e) {
+  return e[e.none = 0] = "none", e[e.top = 1] = "top", e[e.right = 2] = "right", e[e.bottom = 4] = "bottom", e[e.left = 8] = "left", e;
+})({}), T = 15, b = class {
+  id;
+  properties;
+};
+p([d(y), a("design:type", typeof y > "u" ? Object : y)], b.prototype, "id", void 0);
+p([d(Object), a("design:type", typeof Record > "u" ? Object : Record)], b.prototype, "properties", void 0);
+var j = /* @__PURE__ */ (function(e) {
+  return e[e.visible = 0] = "visible", e[e.hidden = 1] = "hidden", e[e.collapsed = 2] = "collapsed", e;
+})({}), u = class extends b {
+  visibility;
+  isEnabled;
+  opacity;
+  width;
+  height;
+  ZIndex;
+  anchoring;
+};
+p([d(Number), a("design:type", typeof j > "u" ? Object : j)], u.prototype, "visibility", void 0);
+p([d(Boolean), a("design:type", Boolean)], u.prototype, "isEnabled", void 0);
+p([d(Number), a("design:type", Number)], u.prototype, "opacity", void 0);
+p([d(Number), a("design:type", Number)], u.prototype, "width", void 0);
+p([d(Number), a("design:type", Number)], u.prototype, "height", void 0);
+p([d(Number), a("design:type", Number)], u.prototype, "ZIndex", void 0);
+p([d(Number), a("design:type", typeof O > "u" ? Object : O)], u.prototype, "anchoring", void 0);
+var S = /* @__PURE__ */ (function(e) {
+  return e[e.absolute = 0] = "absolute", e[e.flexRow = 1] = "flexRow", e[e.flexColumn = 2] = "flexColumn", e[e.grid = 3] = "grid", e;
+})({}), m = () => (window.__cratisPrototypeComponents ??= {}, window.__cratisPrototypeComponents), N = () => (window.__cratisPrototypeBundleLoads ??= {}, window.__cratisPrototypeBundleLoads), _ = (e) => {
+  const o = [e], t = e.split(".").pop();
+  return t && t !== e && o.push(t), o;
+}, l = (e, o) => {
+  if (typeof window > "u") return;
+  const t = m()[e];
+  if (t)
+    for (const n of _(o)) {
+      const r = t[n];
+      if (r) return r;
+    }
+}, E = (e, o) => {
+  m()[e] = o;
+  for (const [t, n] of Object.entries(o)) {
+    if (!t.includes(".")) continue;
+    v.set(n, t);
+    let r = Object.getPrototypeOf(n.prototype);
+    for (; r && r.constructor && r.constructor !== Object; )
+      v.set(n, t, r.constructor), r = Object.getPrototypeOf(r);
+  }
+}, x = (e) => {
+  if ("RenderPrototype" in e && typeof e.RenderPrototype == "function") return e;
+  const o = "_derivedTypeId" in e && typeof e._derivedTypeId == "string" && e._derivedTypeId.includes(".") ? e._derivedTypeId : "componentName" in e && typeof e.componentName == "string" ? e.componentName : "", t = o.indexOf(".");
+  if (t < 1) return e;
+  const n = l(o.slice(0, t), o.slice(t + 1));
+  if (!n) return e;
+  const r = Object.fromEntries(Object.entries(e).filter(([i]) => ![
+    "type",
+    "label",
+    "position",
+    "size",
+    "children"
+  ].includes(i)));
+  if ("slots" in e && e.slots && typeof e.slots == "object") {
+    let i;
+    for (const [c, s] of Object.entries(e.slots)) {
+      if (!Array.isArray(s)) continue;
+      let f;
+      for (const [C, w] of s.entries()) {
+        const g = x(w);
+        g !== w && (f ??= s.slice(), f[C] = g);
+      }
+      f && (i ??= { ...e.slots }, i[c] = f);
+    }
+    i && (r.slots = i);
+  }
+  return Object.assign(new n(), r);
+}, P = (e, o) => {
+  const t = l(e, o);
+  return t ? new t() : void 0;
+}, z = (e, o, t) => {
+  const n = l(e, o);
+  if (!n) return;
+  const r = new n();
+  return typeof r.initialize == "function" ? r.initialize(t) : (Object.assign(r, t), r);
+}, R = async (e) => {
+  const o = N();
+  if (o[e]) {
+    await o[e];
+    return;
+  }
+  o[e] = new Promise((t, n) => {
+    const r = document.querySelector(`script[data-prototype-bundle="${e}"]`);
+    if (r) {
+      r.addEventListener("load", () => t(), { once: !0 }), r.addEventListener("error", () => n(/* @__PURE__ */ new Error(`Failed to load prototype bundle '${e}'.`)), { once: !0 });
+      return;
+    }
+    const i = document.createElement("script");
+    i.src = e, i.async = !0, i.dataset.prototypeBundle = e, i.onload = () => t(), i.onerror = () => n(/* @__PURE__ */ new Error(`Failed to load prototype bundle '${e}'.`)), document.head.appendChild(i);
+  }), await o[e];
+}, D = async (e) => {
+  const o = [...new Set(e.filter(Boolean))];
+  await Promise.all(o.map(R)), B();
+}, B = () => {
+  const e = m();
+  for (const o of Object.values(e)) for (const [t, n] of Object.entries(o))
+    t.includes(".") && v.set(n, t, u);
+}, h = (e) => {
+  const o = e, t = o.componentName;
+  if (!t) return e;
+  const n = t.indexOf(".");
+  if (n < 0) return e;
+  const r = t.substring(0, n), i = t.substring(n + 1), c = l(r, i);
+  if (!c) return e;
+  const s = new c();
+  Object.assign(s, e);
+  const f = o.slots;
+  return f?.children?.length && (s.slots = {
+    ...f,
+    children: f.children.map(h)
+  }), s;
+}, F = (e) => e.map(h);
+export {
+  F as a,
+  E as c,
+  j as d,
+  b as f,
+  a as g,
+  p as h,
+  h as i,
+  S as l,
+  T as m,
+  R as n,
+  x as o,
+  O as p,
+  P as r,
+  D as s,
+  z as t,
+  u
+};

package/dist/PrototypeComponentRegistry.d.ts

@@ -0,0 +1,28 @@
+import { UIElement } from './UIElement';
+import type { ComponentState, IComponent, PrototypeComponentConstructor } from './IComponent';
+import type { PrototypeSurfaceElement } from './Prototypes/Editor/editorTypes';
+declare global {
+    interface Window {
+        __cratisPrototypeComponents?: Record<string, Record<string, PrototypeComponentConstructor>>;
+        __cratisPrototypeBundleLoads?: Partial<Record<string, Promise<void>>>;
+    }
+}
+export declare const registerPrototypeComponentLibrary: (libraryName: string, components: Record<string, PrototypeComponentConstructor>) => void;
+export declare const hydratePrototypeElement: (element: UIElement | IComponent) => UIElement | IComponent;
+export declare const getPrototypeComponent: (libraryName: string, type: string) => IComponent | undefined;
+export declare const createPrototypeComponentInstance: (libraryName: string, type: string, state: Partial<ComponentState>) => IComponent | undefined;
+export declare const ensurePrototypeComponentBundle: (bundlePath: string) => Promise<void>;
+export declare const loadPrototypeComponentLibraries: (bundlePaths: string[]) => Promise<void>;
+/**
+ * Reconstruct a server-loaded element as the specific Component subclass it represents.
+ * When elements round-trip through the server they arrive as plain data objects, not class
+ * instances — so even though the discriminator now carries the real type (e.g. 'PrimeReact.Button'),
+ * the canvas still needs the concrete Component subclass re-instantiated to regain full IComponent
+ * behavior including RenderPrototype(). The componentName field identifies the class to construct.
+ */
+export declare const hydrateElement: (element: PrototypeSurfaceElement) => PrototypeSurfaceElement;
+/**
+ * Hydrate all elements in a list, reconstructing each ExternalComponent as the specific
+ * Component subclass identified by its componentName.
+ */
+export declare const hydrateElements: (elements: PrototypeSurfaceElement[]) => PrototypeSurfaceElement[];