@almadar/ui 2.18.0 → 2.19.0

package/dist/marketing/index.cjs

@@ -1,6 +1,6 @@
 'use strict';
 
-var React4 = require('react');
+var React5 = require('react');
 var jsxRuntime = require('react/jsx-runtime');
 var LucideIcons = require('lucide-react');
 
@@ -24,7 +24,7 @@ function _interopNamespace(e) {
   return Object.freeze(n);
 }
 
-var React4__default = /*#__PURE__*/_interopDefault(React4);
+var React5__default = /*#__PURE__*/_interopDefault(React5);
 var LucideIcons__namespace = /*#__PURE__*/_interopNamespace(LucideIcons);
 
 // node_modules/.pnpm/clsx@2.1.1/node_modules/clsx/dist/clsx.mjs
@@ -2506,7 +2506,7 @@ var twMerge = /* @__PURE__ */ createTailwindMerge(getDefaultConfig);
 function cn(...inputs) {
   return twMerge(clsx(inputs));
 }
-var EventBusContext = React4.createContext(null);
+var EventBusContext = React5.createContext(null);
 
 // hooks/useEventBus.ts
 function getGlobalEventBus() {
@@ -2576,7 +2576,7 @@ var fallbackEventBus = {
   }
 };
 function useEventBus() {
-  const context = React4.useContext(EventBusContext);
+  const context = React5.useContext(EventBusContext);
   return context ?? getGlobalEventBus() ?? fallbackEventBus;
 }
 var paddingStyles = {
@@ -2681,7 +2681,7 @@ var positionStyles = {
   fixed: "fixed",
   sticky: "sticky"
 };
-var Box = React4__default.default.forwardRef(
+var Box = React5__default.default.forwardRef(
   ({
     padding,
     paddingX,
@@ -2710,20 +2710,20 @@ var Box = React4__default.default.forwardRef(
     ...rest
   }, ref) => {
     const eventBus = useEventBus();
-    const handleClick = React4.useCallback((e) => {
+    const handleClick = React5.useCallback((e) => {
       if (action) {
         e.stopPropagation();
         eventBus.emit(`UI:${action}`, actionPayload ?? {});
       }
       onClick?.(e);
     }, [action, actionPayload, eventBus, onClick]);
-    const handleMouseEnter = React4.useCallback((e) => {
+    const handleMouseEnter = React5.useCallback((e) => {
       if (hoverEvent) {
         eventBus.emit(`UI:${hoverEvent}`, { hovered: true });
       }
       onMouseEnter?.(e);
     }, [hoverEvent, eventBus, onMouseEnter]);
-    const handleMouseLeave = React4.useCallback((e) => {
+    const handleMouseLeave = React5.useCallback((e) => {
       if (hoverEvent) {
         eventBus.emit(`UI:${hoverEvent}`, { hovered: false });
       }
@@ -3107,7 +3107,7 @@ function resolveIconProp(value, sizeClass) {
     const IconComp = value;
     return /* @__PURE__ */ jsxRuntime.jsx(IconComp, { className: sizeClass });
   }
-  if (React4__default.default.isValidElement(value)) {
+  if (React5__default.default.isValidElement(value)) {
     return value;
   }
   if (typeof value === "object" && value !== null && "render" in value) {
@@ -3116,7 +3116,7 @@ function resolveIconProp(value, sizeClass) {
   }
   return value;
 }
-var Button = React4__default.default.forwardRef(
+var Button = React5__default.default.forwardRef(
   ({
     className,
     variant = "primary",
@@ -3211,7 +3211,7 @@ var sizeStyles3 = {
   md: "px-2.5 py-1 text-sm",
   lg: "px-3 py-1.5 text-base"
 };
-var Badge = React4__default.default.forwardRef(
+var Badge = React5__default.default.forwardRef(
   ({ className, variant = "default", size = "sm", amount, label, icon, children, ...props }, ref) => {
     const iconSizes = { sm: "w-3 h-3", md: "w-3.5 h-3.5", lg: "w-4 h-4" };
     const resolvedIcon = typeof icon === "string" ? (() => {
@@ -3280,7 +3280,7 @@ var shadowStyles2 = {
   md: "shadow-[var(--shadow-main)]",
   lg: "shadow-[var(--shadow-lg)]"
 };
-var Card = React4__default.default.forwardRef(
+var Card = React5__default.default.forwardRef(
   ({
     className,
     variant = "bordered",
@@ -3316,9 +3316,9 @@ var Card = React4__default.default.forwardRef(
   }
 );
 Card.displayName = "Card";
-var CardHeader = React4__default.default.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: cn("mb-4", className), ...props }));
+var CardHeader = React5__default.default.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: cn("mb-4", className), ...props }));
 CardHeader.displayName = "CardHeader";
-var CardTitle = React4__default.default.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+var CardTitle = React5__default.default.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
   "h3",
   {
     ref,
@@ -3331,11 +3331,11 @@ var CardTitle = React4__default.default.forwardRef(({ className, ...props }, ref
   }
 ));
 CardTitle.displayName = "CardTitle";
-var CardContent = React4__default.default.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: cn("", className), ...props }));
+var CardContent = React5__default.default.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: cn("", className), ...props }));
 CardContent.displayName = "CardContent";
 var CardBody = CardContent;
 CardBody.displayName = "CardBody";
-var CardFooter = React4__default.default.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
+var CardFooter = React5__default.default.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxRuntime.jsx(
   "div",
   {
     ref,
@@ -3492,7 +3492,7 @@ var paddingClasses = {
   md: "py-16",
   lg: "py-24"
 };
-var ContentSection = React4__default.default.forwardRef(
+var ContentSection = React5__default.default.forwardRef(
   ({ children, background = "default", padding = "lg", id, className }, ref) => {
     return /* @__PURE__ */ jsxRuntime.jsx(
       Box,
@@ -3516,8 +3516,8 @@ var InstallBox = ({
   label,
   className
 }) => {
-  const [copied, setCopied] = React4.useState(false);
-  const handleCopy = React4.useCallback(() => {
+  const [copied, setCopied] = React5.useState(false);
+  const handleCopy = React5.useCallback(() => {
     void navigator.clipboard.writeText(command);
     setCopied(true);
     const timer = setTimeout(() => setCopied(false), 2e3);
@@ -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
       ]
@@ -4063,7 +4069,7 @@ var StepFlow = ({
   className
 }) => {
   if (orientation === "vertical") {
-    return /* @__PURE__ */ jsxRuntime.jsx(VStack, { gap: "none", className: cn("w-full", className), children: steps.map((step, index) => /* @__PURE__ */ jsxRuntime.jsx(React4__default.default.Fragment, { children: /* @__PURE__ */ jsxRuntime.jsxs(HStack, { gap: "md", align: "start", className: "w-full", children: [
+    return /* @__PURE__ */ jsxRuntime.jsx(VStack, { gap: "none", className: cn("w-full", className), children: steps.map((step, index) => /* @__PURE__ */ jsxRuntime.jsx(React5__default.default.Fragment, { children: /* @__PURE__ */ jsxRuntime.jsxs(HStack, { gap: "md", align: "start", className: "w-full", children: [
       /* @__PURE__ */ jsxRuntime.jsxs(VStack, { gap: "none", align: "center", children: [
         /* @__PURE__ */ jsxRuntime.jsx(StepCircle, { step, index }),
         showConnectors && index < steps.length - 1 && /* @__PURE__ */ jsxRuntime.jsx(Box, { className: "w-px h-8 bg-[var(--color-border)]" })
@@ -4074,7 +4080,7 @@ var StepFlow = ({
       ] })
     ] }) }, index)) });
   }
-  return /* @__PURE__ */ jsxRuntime.jsx(Box, { className: cn("w-full flex flex-col md:flex-row items-start gap-0", className), children: steps.map((step, index) => /* @__PURE__ */ jsxRuntime.jsxs(React4__default.default.Fragment, { children: [
+  return /* @__PURE__ */ jsxRuntime.jsx(Box, { className: cn("w-full flex flex-col md:flex-row items-start gap-0", className), children: steps.map((step, index) => /* @__PURE__ */ jsxRuntime.jsxs(React5__default.default.Fragment, { children: [
     /* @__PURE__ */ jsxRuntime.jsxs(VStack, { gap: "sm", align: "center", className: "flex-1 w-full md:w-auto", children: [
       /* @__PURE__ */ jsxRuntime.jsx(StepCircle, { step, index }),
       /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "h4", className: "text-center", children: step.title }),
@@ -4589,10 +4595,10 @@ var AnimatedCounter = ({
   duration = 1500,
   className
 }) => {
-  const ref = React4.useRef(null);
-  const [displayValue, setDisplayValue] = React4.useState("0");
-  const [hasAnimated, setHasAnimated] = React4.useState(false);
-  const animate = React4.useCallback(() => {
+  const ref = React5.useRef(null);
+  const [displayValue, setDisplayValue] = React5.useState("0");
+  const [hasAnimated, setHasAnimated] = React5.useState(false);
+  const animate = React5.useCallback(() => {
     const { num, prefix, suffix, decimals } = parseValue(value);
     if (num === 0) {
       setDisplayValue(value);
@@ -4613,7 +4619,7 @@ var AnimatedCounter = ({
     };
     requestAnimationFrame(tick);
   }, [value, duration]);
-  React4.useEffect(() => {
+  React5.useEffect(() => {
     if (hasAnimated) return;
     const el = ref.current;
     if (!el) return;

package/dist/marketing/index.js

@@ -1,4 +1,4 @@
-import React4, { createContext, useCallback, useContext, useState, useRef, useEffect } from 'react';
+import React5, { createContext, useCallback, useContext, useState, useRef, useEffect } from 'react';
 import { jsx, jsxs } from 'react/jsx-runtime';
 import * as LucideIcons from 'lucide-react';
 import { Loader2, Check, User } from 'lucide-react';
@@ -2657,7 +2657,7 @@ var positionStyles = {
   fixed: "fixed",
   sticky: "sticky"
 };
-var Box = React4.forwardRef(
+var Box = React5.forwardRef(
   ({
     padding,
     paddingX,
@@ -3083,7 +3083,7 @@ function resolveIconProp(value, sizeClass) {
     const IconComp = value;
     return /* @__PURE__ */ jsx(IconComp, { className: sizeClass });
   }
-  if (React4.isValidElement(value)) {
+  if (React5.isValidElement(value)) {
     return value;
   }
   if (typeof value === "object" && value !== null && "render" in value) {
@@ -3092,7 +3092,7 @@ function resolveIconProp(value, sizeClass) {
   }
   return value;
 }
-var Button = React4.forwardRef(
+var Button = React5.forwardRef(
   ({
     className,
     variant = "primary",
@@ -3187,7 +3187,7 @@ var sizeStyles3 = {
   md: "px-2.5 py-1 text-sm",
   lg: "px-3 py-1.5 text-base"
 };
-var Badge = React4.forwardRef(
+var Badge = React5.forwardRef(
   ({ className, variant = "default", size = "sm", amount, label, icon, children, ...props }, ref) => {
     const iconSizes = { sm: "w-3 h-3", md: "w-3.5 h-3.5", lg: "w-4 h-4" };
     const resolvedIcon = typeof icon === "string" ? (() => {
@@ -3256,7 +3256,7 @@ var shadowStyles2 = {
   md: "shadow-[var(--shadow-main)]",
   lg: "shadow-[var(--shadow-lg)]"
 };
-var Card = React4.forwardRef(
+var Card = React5.forwardRef(
   ({
     className,
     variant = "bordered",
@@ -3292,9 +3292,9 @@ var Card = React4.forwardRef(
   }
 );
 Card.displayName = "Card";
-var CardHeader = React4.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, className: cn("mb-4", className), ...props }));
+var CardHeader = React5.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, className: cn("mb-4", className), ...props }));
 CardHeader.displayName = "CardHeader";
-var CardTitle = React4.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var CardTitle = React5.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   "h3",
   {
     ref,
@@ -3307,11 +3307,11 @@ var CardTitle = React4.forwardRef(({ className, ...props }, ref) => /* @__PURE__
   }
 ));
 CardTitle.displayName = "CardTitle";
-var CardContent = React4.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, className: cn("", className), ...props }));
+var CardContent = React5.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, className: cn("", className), ...props }));
 CardContent.displayName = "CardContent";
 var CardBody = CardContent;
 CardBody.displayName = "CardBody";
-var CardFooter = React4.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var CardFooter = React5.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   "div",
   {
     ref,
@@ -3468,7 +3468,7 @@ var paddingClasses = {
   md: "py-16",
   lg: "py-24"
 };
-var ContentSection = React4.forwardRef(
+var ContentSection = React5.forwardRef(
   ({ children, background = "default", padding = "lg", id, className }, ref) => {
     return /* @__PURE__ */ jsx(
       Box,
@@ -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
       ]
@@ -4039,7 +4045,7 @@ var StepFlow = ({
   className
 }) => {
   if (orientation === "vertical") {
-    return /* @__PURE__ */ jsx(VStack, { gap: "none", className: cn("w-full", className), children: steps.map((step, index) => /* @__PURE__ */ jsx(React4.Fragment, { children: /* @__PURE__ */ jsxs(HStack, { gap: "md", align: "start", className: "w-full", children: [
+    return /* @__PURE__ */ jsx(VStack, { gap: "none", className: cn("w-full", className), children: steps.map((step, index) => /* @__PURE__ */ jsx(React5.Fragment, { children: /* @__PURE__ */ jsxs(HStack, { gap: "md", align: "start", className: "w-full", children: [
       /* @__PURE__ */ jsxs(VStack, { gap: "none", align: "center", children: [
         /* @__PURE__ */ jsx(StepCircle, { step, index }),
         showConnectors && index < steps.length - 1 && /* @__PURE__ */ jsx(Box, { className: "w-px h-8 bg-[var(--color-border)]" })
@@ -4050,7 +4056,7 @@ var StepFlow = ({
       ] })
     ] }) }, index)) });
   }
-  return /* @__PURE__ */ jsx(Box, { className: cn("w-full flex flex-col md:flex-row items-start gap-0", className), children: steps.map((step, index) => /* @__PURE__ */ jsxs(React4.Fragment, { children: [
+  return /* @__PURE__ */ jsx(Box, { className: cn("w-full flex flex-col md:flex-row items-start gap-0", className), children: steps.map((step, index) => /* @__PURE__ */ jsxs(React5.Fragment, { children: [
     /* @__PURE__ */ jsxs(VStack, { gap: "sm", align: "center", className: "flex-1 w-full md:w-auto", children: [
       /* @__PURE__ */ jsx(StepCircle, { step, index }),
       /* @__PURE__ */ jsx(Typography, { variant: "h4", className: "text-center", children: step.title }),

package/dist/providers/EventBusProvider.d.ts

@@ -9,11 +9,21 @@
  *
  * @packageDocumentation
  */
-import { type ReactNode } from 'react';
+import React, { type ReactNode } from 'react';
 import type { EventBusContextType } from '../hooks/event-bus-types';
-import { EventBusContext } from '../internals/event-bus-context';
-import type { EventBusContextTypeExtended } from '../internals/event-bus-context';
-export { EventBusContext, type EventBusContextTypeExtended };
+/**
+ * Extended context type for backward compatibility.
+ *
+ * @deprecated getSelectedEntity and clearSelectedEntity are deprecated.
+ * Use SelectionProvider and useSelection hook instead.
+ */
+export interface EventBusContextTypeExtended extends EventBusContextType {
+    /** @deprecated Use useSelection from SelectionProvider instead. */
+    getSelectedEntity: () => unknown | null;
+    /** @deprecated Use useSelection from SelectionProvider instead. */
+    clearSelectedEntity: () => void;
+}
+export declare const EventBusContext: React.Context<EventBusContextTypeExtended | null>;
 interface EventBusProviderProps {
     children: ReactNode;
     /** Enable debug logging in development */

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');
@@ -283,9 +284,6 @@ var ThemeProvider = ({
   );
   return /* @__PURE__ */ jsxRuntime.jsx(ThemeContext.Provider, { value: contextValue, children });
 };
-var EventBusContext = React110.createContext(null);
-
-// hooks/useEventBus.ts
 function setGlobalEventBus(bus) {
   if (typeof window !== "undefined") {
     window.__kflowEventBus = bus;
@@ -358,9 +356,10 @@ var fallbackEventBus = {
   }
 };
 function useEventBus() {
-  const context = React110.useContext(EventBusContext);
+  const context = React110.useContext(providers.EventBusContext);
   return context ?? getGlobalEventBus() ?? fallbackEventBus;
 }
+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());
@@ -476,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) => {
@@ -3426,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';
@@ -253,9 +254,6 @@ var ThemeProvider = ({
   );
   return /* @__PURE__ */ jsx(ThemeContext.Provider, { value: contextValue, children });
 };
-var EventBusContext = createContext(null);
-
-// hooks/useEventBus.ts
 function setGlobalEventBus(bus) {
   if (typeof window !== "undefined") {
     window.__kflowEventBus = bus;
@@ -331,6 +329,7 @@ function useEventBus() {
   const context = useContext(EventBusContext);
   return context ?? getGlobalEventBus() ?? fallbackEventBus;
 }
+var EventBusContext2 = createContext(null);
 function EventBusProvider({ children, debug: debug2 = false }) {
   const listenersRef = useRef(/* @__PURE__ */ new Map());
   const anyListenersRef = useRef(/* @__PURE__ */ new Set());
@@ -446,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) => {
@@ -3396,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';