@almadar/ui 2.17.0 → 2.19.0

package/dist/hooks/index.js

@@ -1,4 +1,5 @@
-import React3, { createContext, useCallback, useState, useEffect, useMemo, useContext, useRef, useSyncExternalStore } from 'react';
+import React2, { createContext, useCallback, useState, useEffect, useMemo, useContext, useRef, useSyncExternalStore } from 'react';
+import { EventBusContext } from '@almadar/ui/providers';
 import 'react/jsx-runtime';
 import { useQueryClient, useMutation, useQuery } from '@tanstack/react-query';
 
@@ -865,9 +866,6 @@ function useDeepAgentGeneration() {
     submitInterruptDecisions
   };
 }
-var EventBusContext = createContext(null);
-
-// hooks/useEventBus.ts
 function getGlobalEventBus() {
   if (typeof window !== "undefined") {
     return window.__kflowEventBus ?? null;
@@ -1233,7 +1231,7 @@ function EntityDataProvider({
   adapter,
   children
 }) {
-  return React3.createElement(
+  return React2.createElement(
     EntityDataContext.Provider,
     { value: adapter },
     children

package/dist/marketing/index.cjs

@@ -3656,8 +3656,14 @@ var HeroSection = ({
         ),
         installCommand && /* @__PURE__ */ jsxRuntime.jsx(InstallBox, { command: installCommand }),
         (primaryAction || secondaryAction) && /* @__PURE__ */ jsxRuntime.jsxs(HStack, { gap: "md", align: "center", children: [
-          primaryAction && /* @__PURE__ */ jsxRuntime.jsx(Button, { variant: "primary", size: "lg", children: primaryAction.label }),
-          secondaryAction && /* @__PURE__ */ jsxRuntime.jsx(Button, { variant: "secondary", size: "lg", children: secondaryAction.label })
+          primaryAction && /* @__PURE__ */ jsxRuntime.jsx(Button, { variant: "primary", size: "lg", onClick: () => {
+            const external = primaryAction.href.startsWith("http");
+            window.open(primaryAction.href, external ? "_blank" : "_self");
+          }, children: primaryAction.label }),
+          secondaryAction && /* @__PURE__ */ jsxRuntime.jsx(Button, { variant: "secondary", size: "lg", onClick: () => {
+            const external = secondaryAction.href.startsWith("http");
+            window.open(secondaryAction.href, external ? "_blank" : "_self");
+          }, children: secondaryAction.label })
         ] }),
         children
       ]

package/dist/marketing/index.js

@@ -3632,8 +3632,14 @@ var HeroSection = ({
         ),
         installCommand && /* @__PURE__ */ jsx(InstallBox, { command: installCommand }),
         (primaryAction || secondaryAction) && /* @__PURE__ */ jsxs(HStack, { gap: "md", align: "center", children: [
-          primaryAction && /* @__PURE__ */ jsx(Button, { variant: "primary", size: "lg", children: primaryAction.label }),
-          secondaryAction && /* @__PURE__ */ jsx(Button, { variant: "secondary", size: "lg", children: secondaryAction.label })
+          primaryAction && /* @__PURE__ */ jsx(Button, { variant: "primary", size: "lg", onClick: () => {
+            const external = primaryAction.href.startsWith("http");
+            window.open(primaryAction.href, external ? "_blank" : "_self");
+          }, children: primaryAction.label }),
+          secondaryAction && /* @__PURE__ */ jsx(Button, { variant: "secondary", size: "lg", onClick: () => {
+            const external = secondaryAction.href.startsWith("http");
+            window.open(secondaryAction.href, external ? "_blank" : "_self");
+          }, children: secondaryAction.label })
         ] }),
         children
       ]

package/dist/providers/EventBusProvider.d.ts

@@ -18,15 +18,9 @@ import type { EventBusContextType } from '../hooks/event-bus-types';
  * Use SelectionProvider and useSelection hook instead.
  */
 export interface EventBusContextTypeExtended extends EventBusContextType {
-    /**
-     * @deprecated Use useSelection from SelectionProvider instead.
-     * This method now returns null - selection state moved to SelectionProvider.
-     */
+    /** @deprecated Use useSelection from SelectionProvider instead. */
     getSelectedEntity: () => unknown | null;
-    /**
-     * @deprecated Use useSelection from SelectionProvider instead.
-     * This method is now a no-op - selection state moved to SelectionProvider.
-     */
+    /** @deprecated Use useSelection from SelectionProvider instead. */
     clearSelectedEntity: () => void;
 }
 export declare const EventBusContext: React.Context<EventBusContextTypeExtended | null>;

package/dist/providers/index.cjs

@@ -2,6 +2,7 @@
 
 var React110 = require('react');
 var jsxRuntime = require('react/jsx-runtime');
+var providers = require('@almadar/ui/providers');
 require('react-dom');
 require('@almadar/ui/context');
 var LucideIcons = require('lucide-react');
@@ -355,10 +356,10 @@ var fallbackEventBus = {
   }
 };
 function useEventBus() {
-  const context = React110.useContext(EventBusContext);
+  const context = React110.useContext(providers.EventBusContext);
   return context ?? getGlobalEventBus() ?? fallbackEventBus;
 }
-var EventBusContext = React110.createContext(null);
+var EventBusContext2 = React110.createContext(null);
 function EventBusProvider({ children, debug: debug2 = false }) {
   const listenersRef = React110.useRef(/* @__PURE__ */ new Map());
   const anyListenersRef = React110.useRef(/* @__PURE__ */ new Set());
@@ -474,7 +475,7 @@ function EventBusProvider({ children, debug: debug2 = false }) {
       setGlobalEventBus(null);
     };
   }, [contextValue]);
-  return /* @__PURE__ */ jsxRuntime.jsx(EventBusContext.Provider, { value: contextValue, children });
+  return /* @__PURE__ */ jsxRuntime.jsx(EventBusContext2.Provider, { value: contextValue, children });
 }
 var SelectionContext = React110.createContext(null);
 var defaultCompareEntities = (a, b) => {
@@ -3424,7 +3425,7 @@ function useOptionalOfflineMode() {
   return React110.useContext(OfflineModeContext);
 }
 
-exports.EventBusContext = EventBusContext;
+exports.EventBusContext = EventBusContext2;
 exports.EventBusProvider = EventBusProvider;
 exports.FetchedDataContext = FetchedDataContext;
 exports.FetchedDataProvider = FetchedDataProvider;

package/dist/providers/index.js

@@ -1,6 +1,7 @@
 import * as React110 from 'react';
 import React110__default, { createContext, useCallback, useState, useRef, useLayoutEffect, useEffect, lazy, useContext, useMemo } from 'react';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { EventBusContext } from '@almadar/ui/providers';
 import 'react-dom';
 import '@almadar/ui/context';
 import * as LucideIcons from 'lucide-react';
@@ -328,7 +329,7 @@ function useEventBus() {
   const context = useContext(EventBusContext);
   return context ?? getGlobalEventBus() ?? fallbackEventBus;
 }
-var EventBusContext = createContext(null);
+var EventBusContext2 = createContext(null);
 function EventBusProvider({ children, debug: debug2 = false }) {
   const listenersRef = useRef(/* @__PURE__ */ new Map());
   const anyListenersRef = useRef(/* @__PURE__ */ new Set());
@@ -444,7 +445,7 @@ function EventBusProvider({ children, debug: debug2 = false }) {
       setGlobalEventBus(null);
     };
   }, [contextValue]);
-  return /* @__PURE__ */ jsx(EventBusContext.Provider, { value: contextValue, children });
+  return /* @__PURE__ */ jsx(EventBusContext2.Provider, { value: contextValue, children });
 }
 var SelectionContext = createContext(null);
 var defaultCompareEntities = (a, b) => {
@@ -3394,4 +3395,4 @@ function useOptionalOfflineMode() {
   return useContext(OfflineModeContext);
 }
 
-export { EventBusContext, EventBusProvider, FetchedDataContext, FetchedDataProvider, OfflineModeProvider, OrbitalProvider, SelectionContext, SelectionProvider, VerificationProvider, useFetchedData, useFetchedDataContext, useFetchedEntity, useOfflineMode, useOptionalOfflineMode, useSelection, useSelectionOptional };
+export { EventBusContext2 as EventBusContext, EventBusProvider, FetchedDataContext, FetchedDataProvider, OfflineModeProvider, OrbitalProvider, SelectionContext, SelectionProvider, VerificationProvider, useFetchedData, useFetchedDataContext, useFetchedEntity, useOfflineMode, useOptionalOfflineMode, useSelection, useSelectionOptional };

package/dist/runtime/OrbPreview.d.ts

@@ -0,0 +1,39 @@
+/**
+ * OrbPreview Component
+ *
+ * Renders a live preview of an Orbital schema (.orb program).
+ * Lazily loads the full runtime stack (providers, context, state machines)
+ * and renders the schema's UI via UISlotRenderer.
+ *
+ * Usage:
+ *   <OrbPreview schema={orbJsonStringOrObject} />
+ *
+ * @packageDocumentation
+ */
+import React from 'react';
+export interface OrbPreviewProps {
+    /** The orbital schema. Accepts a JSON string or a parsed object. */
+    schema: string | Record<string, unknown>;
+    /** Mock entity data keyed by entity name. */
+    mockData?: Record<string, unknown[]>;
+    /** Preview container height. Default: '400px'. */
+    height?: string;
+    /** CSS class for the outer container. */
+    className?: string;
+}
+/**
+ * Renders a live preview of an Orbital schema.
+ *
+ * Lazily loads the full Almadar runtime (providers, state machines, slot system)
+ * and renders the schema's UI. Suitable for documentation sites, playgrounds,
+ * and any context where you want to show a running .orb program.
+ *
+ * @example
+ * ```tsx
+ * <OrbPreview schema={orbJsonString} height="300px" />
+ * ```
+ */
+export declare function OrbPreview({ schema, mockData, height, className, }: OrbPreviewProps): React.ReactElement;
+export declare namespace OrbPreview {
+    var displayName: string;
+}

package/dist/runtime/index.cjs

@@ -1,6 +1,7 @@
 'use strict';
 
 var React110 = require('react');
+var providers = require('@almadar/ui/providers');
 var jsxRuntime = require('react/jsx-runtime');
 require('@tanstack/react-query');
 require('react-dom');
@@ -56,7 +57,6 @@ var dark__default = /*#__PURE__*/_interopDefault(dark);
 var __defProp = Object.defineProperty;
 var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
 var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
-var EventBusContext = React110.createContext(null);
 function getGlobalEventBus() {
   if (typeof window !== "undefined") {
     return window.__kflowEventBus ?? null;
@@ -124,7 +124,7 @@ var fallbackEventBus = {
   }
 };
 function useEventBus() {
-  const context = React110.useContext(EventBusContext);
+  const context = React110.useContext(providers.EventBusContext);
   return context ?? getGlobalEventBus() ?? fallbackEventBus;
 }
 React110.createContext(null);
@@ -255,6 +255,7 @@ function useTranslate() {
 }
 typeof process !== "undefined" && process.env?.VITE_API_URL ? process.env.VITE_API_URL : "http://localhost:3000";
 React110.createContext(void 0);
+React110.createContext(null);
 var FetchedDataContext = React110.createContext(null);
 function useFetchedDataContext() {
   return React110.useContext(FetchedDataContext);
@@ -3013,8 +3014,144 @@ function useSlotsActions() {
   }
   return actions;
 }
+var runtimeCache = null;
+async function loadRuntime() {
+  if (runtimeCache) return runtimeCache;
+  const [providers, context, runtime, components] = await Promise.all([
+    import('@almadar/ui/providers'),
+    import('@almadar/ui/context'),
+    import('@almadar/ui/runtime'),
+    import('@almadar/ui/components')
+  ]);
+  runtimeCache = {
+    OrbitalProvider: providers.OrbitalProvider,
+    UISlotProvider: context.UISlotProvider,
+    SlotsProvider: runtime.SlotsProvider,
+    EntitySchemaProvider: runtime.EntitySchemaProvider,
+    VerificationProvider: providers.VerificationProvider,
+    UISlotRenderer: components.UISlotRenderer,
+    useResolvedSchema: runtime.useResolvedSchema,
+    useTraitStateMachine: runtime.useTraitStateMachine,
+    useSlotsActions: runtime.useSlotsActions,
+    useSlots: runtime.useSlots,
+    useUISlots: context.useUISlots
+  };
+  return runtimeCache;
+}
+function normalizeChild(child) {
+  const { type, children, ...rest } = child;
+  const normalizedChildren = Array.isArray(children) ? children.map((c) => normalizeChild(c)) : children;
+  return {
+    type,
+    props: { ...rest, ...normalizedChildren !== void 0 ? { children: normalizedChildren } : {} }
+  };
+}
+function SlotBridge({ rt }) {
+  const slots = rt.useSlots();
+  const { render, clear } = rt.useUISlots();
+  React110.useEffect(() => {
+    for (const [slotName, slotState] of Object.entries(slots)) {
+      if (slotState.patterns.length === 0) {
+        clear(slotName);
+        continue;
+      }
+      const entry = slotState.patterns[slotState.patterns.length - 1];
+      const { type: patternType, children, ...inlineProps } = entry.pattern;
+      const normalizedChildren = Array.isArray(children) ? children.map((c) => normalizeChild(c)) : children;
+      render({
+        target: slotName,
+        pattern: patternType,
+        props: {
+          ...inlineProps,
+          ...entry.props,
+          ...normalizedChildren !== void 0 ? { children: normalizedChildren } : {}
+        },
+        sourceTrait: slotState.source?.trait
+      });
+    }
+  }, [slots]);
+  return null;
+}
+function TraitInitializer({ rt, traits: traits2 }) {
+  const slotsActions = rt.useSlotsActions();
+  const { sendEvent } = rt.useTraitStateMachine(traits2, slotsActions, {});
+  React110.useEffect(() => {
+    const t = setTimeout(() => sendEvent("INIT"), 50);
+    return () => clearTimeout(t);
+  }, [traits2]);
+  return null;
+}
+function SchemaRunner({ rt, schema, mockData }) {
+  const { traits: traits2, allEntities, ir } = rt.useResolvedSchema(schema);
+  const allPageTraits = React110.useMemo(() => {
+    if (!ir?.pages || ir.pages.size <= 1) return traits2;
+    const combined = [];
+    const seen = /* @__PURE__ */ new Set();
+    for (const page of ir.pages.values()) {
+      for (const t of page.traits) {
+        const binding = t;
+        const traitObj = binding.trait;
+        const name = traitObj?.name ?? binding.name ?? "";
+        if (name && !seen.has(name)) {
+          seen.add(name);
+          combined.push(t);
+        }
+      }
+    }
+    return combined.length > 0 ? combined : traits2;
+  }, [ir, traits2]);
+  return /* @__PURE__ */ jsxRuntime.jsx(rt.VerificationProvider, { enabled: true, children: /* @__PURE__ */ jsxRuntime.jsx(rt.SlotsProvider, { children: /* @__PURE__ */ jsxRuntime.jsxs(rt.EntitySchemaProvider, { entities: Array.from(allEntities.values()), children: [
+    /* @__PURE__ */ jsxRuntime.jsx(TraitInitializer, { rt, traits: allPageTraits }),
+    /* @__PURE__ */ jsxRuntime.jsx(SlotBridge, { rt }),
+    /* @__PURE__ */ jsxRuntime.jsx(Box, { className: "min-h-full p-4", children: /* @__PURE__ */ jsxRuntime.jsx(rt.UISlotRenderer, { includeHud: true, hudMode: "inline", includeFloating: true }) })
+  ] }) }) });
+}
+function OrbPreview({
+  schema,
+  mockData = {},
+  height = "400px",
+  className
+}) {
+  const [rt, setRt] = React110.useState(null);
+  const [error, setError] = React110.useState(null);
+  const parsedSchema = React110.useMemo(() => {
+    if (typeof schema === "string") {
+      try {
+        return JSON.parse(schema);
+      } catch (e) {
+        return { error: String(e) };
+      }
+    }
+    return schema;
+  }, [schema]);
+  React110.useEffect(() => {
+    loadRuntime().then(setRt).catch((e) => setError(String(e)));
+  }, []);
+  if (parsedSchema.error) {
+    return /* @__PURE__ */ jsxRuntime.jsx(Box, { className, style: { height }, children: /* @__PURE__ */ jsxRuntime.jsxs(Typography, { as: "pre", color: "error", variant: "small", className: "font-mono whitespace-pre-wrap break-all m-0 p-4", children: [
+      "Parse error: ",
+      parsedSchema.error
+    ] }) });
+  }
+  if (error) {
+    return /* @__PURE__ */ jsxRuntime.jsx(Box, { className, style: { height }, children: /* @__PURE__ */ jsxRuntime.jsx(Typography, { as: "pre", color: "error", variant: "small", className: "font-mono whitespace-pre-wrap break-all m-0 p-4", children: error }) });
+  }
+  if (!rt) {
+    return /* @__PURE__ */ jsxRuntime.jsx(Box, { className: `flex items-center justify-center ${className ?? ""}`, style: { height }, children: /* @__PURE__ */ jsxRuntime.jsx(Typography, { color: "muted", variant: "small", children: "Loading runtime..." }) });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Box,
+    {
+      className: `overflow-auto border border-[var(--color-border)] rounded-[var(--radius-md)] ${className ?? ""}`,
+      style: { height },
+      children: /* @__PURE__ */ jsxRuntime.jsx(rt.OrbitalProvider, { initialData: mockData, skipTheme: true, verification: true, children: /* @__PURE__ */ jsxRuntime.jsx(rt.UISlotProvider, { children: /* @__PURE__ */ jsxRuntime.jsx(SchemaRunner, { rt, schema: parsedSchema, mockData }) }) })
+    }
+  );
+}
+OrbPreview.displayName = "OrbPreview";
 
 exports.EntitySchemaProvider = EntitySchemaProvider;
+exports.OrbPreview = OrbPreview;
 exports.SlotsProvider = SlotsProvider;
 exports.TraitContext = TraitContext;
 exports.TraitProvider = TraitProvider;

package/dist/runtime/index.d.ts

@@ -12,4 +12,5 @@ export { EntitySchemaProvider, useEntitySchema, useEntityDefinition, type Entity
 export { TraitProvider, TraitContext, useTraitContext, useTrait, type TraitContextValue, type TraitInstance, type TraitProviderProps, } from './TraitProvider';
 export { SlotsProvider, useSlots, useSlotContent, useSlotsActions, type SlotsState, type SlotState, type SlotPatternEntry, type SlotSource, type SlotsActions, type SlotsProviderProps, } from './ui/SlotsContext';
 export { createClientEffectHandlers, type ClientEventBus, type SlotSetter, type CreateClientEffectHandlersOptions, } from './createClientEffectHandlers';
+export { OrbPreview, type OrbPreviewProps } from './OrbPreview';
 export type { ResolvedTraitBinding, ResolvedTrait, ResolvedEntity, ResolvedPage, ResolvedIR, } from './types';

package/dist/runtime/index.js

@@ -1,5 +1,6 @@
 import * as React110 from 'react';
 import React110__default, { createContext, useCallback, useState, useRef, useLayoutEffect, useEffect, lazy, useContext, useMemo } from 'react';
+import { EventBusContext } from '@almadar/ui/providers';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import '@tanstack/react-query';
 import 'react-dom';
@@ -26,7 +27,6 @@ import { StateMachineManager, createContextFromBindings, interpolateValue, Effec
 var __defProp = Object.defineProperty;
 var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
 var __publicField = (obj, key, value) => __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
-var EventBusContext = createContext(null);
 function getGlobalEventBus() {
   if (typeof window !== "undefined") {
     return window.__kflowEventBus ?? null;
@@ -225,6 +225,7 @@ function useTranslate() {
 }
 typeof process !== "undefined" && process.env?.VITE_API_URL ? process.env.VITE_API_URL : "http://localhost:3000";
 createContext(void 0);
+createContext(null);
 var FetchedDataContext = createContext(null);
 function useFetchedDataContext() {
   return useContext(FetchedDataContext);
@@ -2983,5 +2984,140 @@ function useSlotsActions() {
   }
   return actions;
 }
+var runtimeCache = null;
+async function loadRuntime() {
+  if (runtimeCache) return runtimeCache;
+  const [providers, context, runtime, components] = await Promise.all([
+    import('@almadar/ui/providers'),
+    import('@almadar/ui/context'),
+    import('@almadar/ui/runtime'),
+    import('@almadar/ui/components')
+  ]);
+  runtimeCache = {
+    OrbitalProvider: providers.OrbitalProvider,
+    UISlotProvider: context.UISlotProvider,
+    SlotsProvider: runtime.SlotsProvider,
+    EntitySchemaProvider: runtime.EntitySchemaProvider,
+    VerificationProvider: providers.VerificationProvider,
+    UISlotRenderer: components.UISlotRenderer,
+    useResolvedSchema: runtime.useResolvedSchema,
+    useTraitStateMachine: runtime.useTraitStateMachine,
+    useSlotsActions: runtime.useSlotsActions,
+    useSlots: runtime.useSlots,
+    useUISlots: context.useUISlots
+  };
+  return runtimeCache;
+}
+function normalizeChild(child) {
+  const { type, children, ...rest } = child;
+  const normalizedChildren = Array.isArray(children) ? children.map((c) => normalizeChild(c)) : children;
+  return {
+    type,
+    props: { ...rest, ...normalizedChildren !== void 0 ? { children: normalizedChildren } : {} }
+  };
+}
+function SlotBridge({ rt }) {
+  const slots = rt.useSlots();
+  const { render, clear } = rt.useUISlots();
+  useEffect(() => {
+    for (const [slotName, slotState] of Object.entries(slots)) {
+      if (slotState.patterns.length === 0) {
+        clear(slotName);
+        continue;
+      }
+      const entry = slotState.patterns[slotState.patterns.length - 1];
+      const { type: patternType, children, ...inlineProps } = entry.pattern;
+      const normalizedChildren = Array.isArray(children) ? children.map((c) => normalizeChild(c)) : children;
+      render({
+        target: slotName,
+        pattern: patternType,
+        props: {
+          ...inlineProps,
+          ...entry.props,
+          ...normalizedChildren !== void 0 ? { children: normalizedChildren } : {}
+        },
+        sourceTrait: slotState.source?.trait
+      });
+    }
+  }, [slots]);
+  return null;
+}
+function TraitInitializer({ rt, traits: traits2 }) {
+  const slotsActions = rt.useSlotsActions();
+  const { sendEvent } = rt.useTraitStateMachine(traits2, slotsActions, {});
+  useEffect(() => {
+    const t = setTimeout(() => sendEvent("INIT"), 50);
+    return () => clearTimeout(t);
+  }, [traits2]);
+  return null;
+}
+function SchemaRunner({ rt, schema, mockData }) {
+  const { traits: traits2, allEntities, ir } = rt.useResolvedSchema(schema);
+  const allPageTraits = useMemo(() => {
+    if (!ir?.pages || ir.pages.size <= 1) return traits2;
+    const combined = [];
+    const seen = /* @__PURE__ */ new Set();
+    for (const page of ir.pages.values()) {
+      for (const t of page.traits) {
+        const binding = t;
+        const traitObj = binding.trait;
+        const name = traitObj?.name ?? binding.name ?? "";
+        if (name && !seen.has(name)) {
+          seen.add(name);
+          combined.push(t);
+        }
+      }
+    }
+    return combined.length > 0 ? combined : traits2;
+  }, [ir, traits2]);
+  return /* @__PURE__ */ jsx(rt.VerificationProvider, { enabled: true, children: /* @__PURE__ */ jsx(rt.SlotsProvider, { children: /* @__PURE__ */ jsxs(rt.EntitySchemaProvider, { entities: Array.from(allEntities.values()), children: [
+    /* @__PURE__ */ jsx(TraitInitializer, { rt, traits: allPageTraits }),
+    /* @__PURE__ */ jsx(SlotBridge, { rt }),
+    /* @__PURE__ */ jsx(Box, { className: "min-h-full p-4", children: /* @__PURE__ */ jsx(rt.UISlotRenderer, { includeHud: true, hudMode: "inline", includeFloating: true }) })
+  ] }) }) });
+}
+function OrbPreview({
+  schema,
+  mockData = {},
+  height = "400px",
+  className
+}) {
+  const [rt, setRt] = useState(null);
+  const [error, setError] = useState(null);
+  const parsedSchema = useMemo(() => {
+    if (typeof schema === "string") {
+      try {
+        return JSON.parse(schema);
+      } catch (e) {
+        return { error: String(e) };
+      }
+    }
+    return schema;
+  }, [schema]);
+  useEffect(() => {
+    loadRuntime().then(setRt).catch((e) => setError(String(e)));
+  }, []);
+  if (parsedSchema.error) {
+    return /* @__PURE__ */ jsx(Box, { className, style: { height }, children: /* @__PURE__ */ jsxs(Typography, { as: "pre", color: "error", variant: "small", className: "font-mono whitespace-pre-wrap break-all m-0 p-4", children: [
+      "Parse error: ",
+      parsedSchema.error
+    ] }) });
+  }
+  if (error) {
+    return /* @__PURE__ */ jsx(Box, { className, style: { height }, children: /* @__PURE__ */ jsx(Typography, { as: "pre", color: "error", variant: "small", className: "font-mono whitespace-pre-wrap break-all m-0 p-4", children: error }) });
+  }
+  if (!rt) {
+    return /* @__PURE__ */ jsx(Box, { className: `flex items-center justify-center ${className ?? ""}`, style: { height }, children: /* @__PURE__ */ jsx(Typography, { color: "muted", variant: "small", children: "Loading runtime..." }) });
+  }
+  return /* @__PURE__ */ jsx(
+    Box,
+    {
+      className: `overflow-auto border border-[var(--color-border)] rounded-[var(--radius-md)] ${className ?? ""}`,
+      style: { height },
+      children: /* @__PURE__ */ jsx(rt.OrbitalProvider, { initialData: mockData, skipTheme: true, verification: true, children: /* @__PURE__ */ jsx(rt.UISlotProvider, { children: /* @__PURE__ */ jsx(SchemaRunner, { rt, schema: parsedSchema, mockData }) }) })
+    }
+  );
+}
+OrbPreview.displayName = "OrbPreview";
 
-export { EntitySchemaProvider, SlotsProvider, TraitContext, TraitProvider, clearSchemaCache, createClientEffectHandlers, useEntityDefinition, useEntitySchema, useResolvedSchema, useSlotContent, useSlots, useSlotsActions, useTrait, useTraitContext, useTraitStateMachine };
+export { EntitySchemaProvider, OrbPreview, SlotsProvider, TraitContext, TraitProvider, clearSchemaCache, createClientEffectHandlers, useEntityDefinition, useEntitySchema, useResolvedSchema, useSlotContent, useSlots, useSlotsActions, useTrait, useTraitContext, useTraitStateMachine };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@almadar/ui",
-  "version": "2.17.0",
+  "version": "2.19.0",
   "description": "React UI components, hooks, and providers for Almadar",
   "type": "module",
   "main": "./dist/components/index.js",