@almadar/ui 2.50.1 → 2.52.0

package/dist/components/molecules/markdown/CodeBlock.d.ts

@@ -23,5 +23,17 @@ export interface CodeBlockProps {
     foldable?: boolean;
     /** Additional CSS classes */
     className?: string;
+    /**
+     * GAP-51: when true, render an editable surface (composes the `Textarea` atom)
+     * instead of the syntax-highlighted read-only display. Folding + Prism
+     * highlighting are skipped in editable mode for the first cut. Default: false
+     * (existing read-only behavior unchanged).
+     */
+    editable?: boolean;
+    /**
+     * GAP-51: called with the new code on every keystroke when `editable === true`.
+     * Consumers should debounce + parse downstream — `CodeBlock` does not.
+     */
+    onChange?: (code: string) => void;
 }
 export declare const CodeBlock: React.NamedExoticComponent<CodeBlockProps>;

package/dist/components/organisms/avl/AvlOrbitalsCosmicZoom.d.ts

@@ -27,5 +27,28 @@ export interface AvlOrbitalsCosmicZoomProps {
     width?: number | string;
     /** Container height */
     height?: number | string;
+    /**
+     * GAP-52: name of the orbital to highlight with a persistent ring/glow.
+     * Independent from user-driven selection (click). Used by the builder workspace
+     * when entering cosmic mode from a focused orbital — the focused orbital is
+     * highlighted while the user can still click any other orbital to select it.
+     */
+    highlightedOrbital?: string;
+    /**
+     * GAP-55: fired when the user clicks an orbital tile. Consumers (e.g. the
+     * builder workspace) use this as the trigger to drill INTO the clicked
+     * orbital — typically by switching back to the canvas tab and opening the
+     * clicked orbital at L2 expanded. Local `selected` toggle (visual highlight +
+     * info panel) still fires regardless of whether the callback is provided.
+     */
+    onOrbitalSelect?: (orbital: string) => void;
+    /**
+     * GAP-54: minimum zoom factor when scroll-wheel zooming. Default 0.4.
+     */
+    minZoom?: number;
+    /**
+     * GAP-54: maximum zoom factor when scroll-wheel zooming. Default 3.
+     */
+    maxZoom?: number;
 }
 export declare const AvlOrbitalsCosmicZoom: React.FC<AvlOrbitalsCosmicZoomProps>;

package/dist/components/organisms/avl/FlowCanvas.d.ts

@@ -28,6 +28,30 @@ export interface FlowCanvasProps {
         transition?: string;
     }) => void;
     onLevelChange?: (level: ViewLevel, orbital?: string) => void;
+    /**
+     * GAP-52: fired when the user double-clicks an orbital. Consumers (e.g. the
+     * builder workspace) use this as the trigger to enter cosmic mode
+     * (`AvlOrbitalsCosmicZoom`) for the focused orbital.
+     *
+     * The level at which this fires is controlled by `cosmicEntryLevel` (default
+     * `'expanded'`). At `'expanded'` the existing overview→expanded drill is
+     * preserved — the callback fires only on the second double-click. At
+     * `'overview'` the callback fires on the FIRST double-click and the existing
+     * drill is suppressed for that interaction. `'both'` fires at either level.
+     *
+     * The callback runs unconditionally — persona / permission gating is the
+     * consumer's responsibility.
+     */
+    onOrbitalDoubleClick?: (orbital: string) => void;
+    /**
+     * GAP-53: which level the `onOrbitalDoubleClick` callback fires at.
+     * - `'expanded'` (default, non-breaking) — fires only at L2 expanded; the
+     *   first overview double-click still drills overview→expanded.
+     * - `'overview'` — fires at L1 overview on the FIRST double-click. The
+     *   overview→expanded drill is suppressed when the callback is provided.
+     * - `'both'` — fires at either level.
+     */
+    cosmicEntryLevel?: 'expanded' | 'overview' | 'both';
     initialOrbital?: string;
     /** Start at Level 2 (expanded) when initialOrbital is set. Default: 'overview'. */
     initialLevel?: ViewLevel;

package/dist/providers/index.cjs

@@ -4094,7 +4094,9 @@ var CodeBlock = React114__namespace.default.memo(
     showLanguageBadge = true,
     maxHeight = "60vh",
     foldable: foldableProp,
-    className
+    className,
+    editable = false,
+    onChange
   }) => {
     const code = typeof rawCode === "string" ? rawCode : String(rawCode ?? "");
     const isOrb = language === "orb";
@@ -4265,7 +4267,37 @@ var CodeBlock = React114__namespace.default.memo(
           ]
         }
       ),
-      /* @__PURE__ */ jsxRuntime.jsx(
+      editable ? (
+        /* GAP-51: editable mode — composes the Textarea atom. Plain text editing,
+           no Prism highlighting overlay (follow-up). The textarea is uncontrolled
+           on the value side: we pass `code` as the initial value and forward
+           every keystroke via onChange — the consumer is responsible for
+           debouncing and re-deriving `code` only after the user stops typing
+           so the cursor doesn't fight a re-render. */
+        /* @__PURE__ */ jsxRuntime.jsx(
+          Textarea,
+          {
+            defaultValue: code,
+            onChange: (e) => onChange?.(e.target.value),
+            spellCheck: false,
+            style: {
+              fontFamily: 'ui-monospace, SFMono-Regular, Menlo, Monaco, "Cascadia Mono", "Courier New", monospace',
+              fontSize: "13px",
+              lineHeight: "1.5",
+              backgroundColor: "#1e1e1e",
+              color: "#e6e6e6",
+              borderRadius: hasHeader ? "0 0 0.5rem 0.5rem" : "0.5rem",
+              border: "none",
+              padding: "1rem",
+              resize: "none",
+              minHeight: "160px",
+              maxHeight,
+              width: "100%",
+              outline: "none"
+            }
+          }
+        )
+      ) : /* @__PURE__ */ jsxRuntime.jsx(
         "div",
         {
           ref: scrollRef,
@@ -4285,7 +4317,7 @@ var CodeBlock = React114__namespace.default.memo(
       )
     ] });
   },
-  (prev, next) => prev.language === next.language && prev.code === next.code && prev.showCopyButton === next.showCopyButton && prev.maxHeight === next.maxHeight && prev.foldable === next.foldable
+  (prev, next) => prev.language === next.language && prev.code === next.code && prev.showCopyButton === next.showCopyButton && prev.maxHeight === next.maxHeight && prev.foldable === next.foldable && prev.editable === next.editable && prev.onChange === next.onChange
 );
 CodeBlock.displayName = "CodeBlock";
 

package/dist/providers/index.js

@@ -4049,7 +4049,9 @@ var CodeBlock = React114__default.memo(
     showLanguageBadge = true,
     maxHeight = "60vh",
     foldable: foldableProp,
-    className
+    className,
+    editable = false,
+    onChange
   }) => {
     const code = typeof rawCode === "string" ? rawCode : String(rawCode ?? "");
     const isOrb = language === "orb";
@@ -4220,7 +4222,37 @@ var CodeBlock = React114__default.memo(
           ]
         }
       ),
-      /* @__PURE__ */ jsx(
+      editable ? (
+        /* GAP-51: editable mode — composes the Textarea atom. Plain text editing,
+           no Prism highlighting overlay (follow-up). The textarea is uncontrolled
+           on the value side: we pass `code` as the initial value and forward
+           every keystroke via onChange — the consumer is responsible for
+           debouncing and re-deriving `code` only after the user stops typing
+           so the cursor doesn't fight a re-render. */
+        /* @__PURE__ */ jsx(
+          Textarea,
+          {
+            defaultValue: code,
+            onChange: (e) => onChange?.(e.target.value),
+            spellCheck: false,
+            style: {
+              fontFamily: 'ui-monospace, SFMono-Regular, Menlo, Monaco, "Cascadia Mono", "Courier New", monospace',
+              fontSize: "13px",
+              lineHeight: "1.5",
+              backgroundColor: "#1e1e1e",
+              color: "#e6e6e6",
+              borderRadius: hasHeader ? "0 0 0.5rem 0.5rem" : "0.5rem",
+              border: "none",
+              padding: "1rem",
+              resize: "none",
+              minHeight: "160px",
+              maxHeight,
+              width: "100%",
+              outline: "none"
+            }
+          }
+        )
+      ) : /* @__PURE__ */ jsx(
         "div",
         {
           ref: scrollRef,
@@ -4240,7 +4272,7 @@ var CodeBlock = React114__default.memo(
       )
     ] });
   },
-  (prev, next) => prev.language === next.language && prev.code === next.code && prev.showCopyButton === next.showCopyButton && prev.maxHeight === next.maxHeight && prev.foldable === next.foldable
+  (prev, next) => prev.language === next.language && prev.code === next.code && prev.showCopyButton === next.showCopyButton && prev.maxHeight === next.maxHeight && prev.foldable === next.foldable && prev.editable === next.editable && prev.onChange === next.onChange
 );
 CodeBlock.displayName = "CodeBlock";
 

package/dist/runtime/index.cjs

@@ -10014,7 +10014,9 @@ var CodeBlock = React114__namespace.default.memo(
     showLanguageBadge = true,
     maxHeight = "60vh",
     foldable: foldableProp,
-    className
+    className,
+    editable = false,
+    onChange
   }) => {
     const code = typeof rawCode === "string" ? rawCode : String(rawCode ?? "");
     const isOrb = language === "orb";
@@ -10185,7 +10187,37 @@ var CodeBlock = React114__namespace.default.memo(
           ]
         }
       ),
-      /* @__PURE__ */ jsxRuntime.jsx(
+      editable ? (
+        /* GAP-51: editable mode — composes the Textarea atom. Plain text editing,
+           no Prism highlighting overlay (follow-up). The textarea is uncontrolled
+           on the value side: we pass `code` as the initial value and forward
+           every keystroke via onChange — the consumer is responsible for
+           debouncing and re-deriving `code` only after the user stops typing
+           so the cursor doesn't fight a re-render. */
+        /* @__PURE__ */ jsxRuntime.jsx(
+          Textarea,
+          {
+            defaultValue: code,
+            onChange: (e) => onChange?.(e.target.value),
+            spellCheck: false,
+            style: {
+              fontFamily: 'ui-monospace, SFMono-Regular, Menlo, Monaco, "Cascadia Mono", "Courier New", monospace',
+              fontSize: "13px",
+              lineHeight: "1.5",
+              backgroundColor: "#1e1e1e",
+              color: "#e6e6e6",
+              borderRadius: hasHeader ? "0 0 0.5rem 0.5rem" : "0.5rem",
+              border: "none",
+              padding: "1rem",
+              resize: "none",
+              minHeight: "160px",
+              maxHeight,
+              width: "100%",
+              outline: "none"
+            }
+          }
+        )
+      ) : /* @__PURE__ */ jsxRuntime.jsx(
         "div",
         {
           ref: scrollRef,
@@ -10205,7 +10237,7 @@ var CodeBlock = React114__namespace.default.memo(
       )
     ] });
   },
-  (prev, next) => prev.language === next.language && prev.code === next.code && prev.showCopyButton === next.showCopyButton && prev.maxHeight === next.maxHeight && prev.foldable === next.foldable
+  (prev, next) => prev.language === next.language && prev.code === next.code && prev.showCopyButton === next.showCopyButton && prev.maxHeight === next.maxHeight && prev.foldable === next.foldable && prev.editable === next.editable && prev.onChange === next.onChange
 );
 CodeBlock.displayName = "CodeBlock";
 
@@ -33657,6 +33689,9 @@ function UISlotRenderer({
 }
 UISlotRenderer.displayName = "UISlotRenderer";
 
+// runtime/OrbPreview.tsx
+init_useEventBus();
+
 // runtime/ServerBridge.tsx
 init_useEventBus();
 var ServerBridgeContext = React114.createContext(null);
@@ -33889,7 +33924,7 @@ function SlotBridge() {
   }, [slots, render, clear]);
   return null;
 }
-function TraitInitializer({ traits: traits2, orbitalNames, onNavigate }) {
+function TraitInitializer({ traits: traits2, orbitalNames, onNavigate, onLocalFallback }) {
   const slotsActions = useSlotsActions();
   const bridge = useServerBridge();
   const entityStore = providers.useEntityStore();
@@ -33930,10 +33965,11 @@ function TraitInitializer({ traits: traits2, orbitalNames, onNavigate }) {
     const fallback = setTimeout(() => {
       if (!initSentRef.current) {
         sendEvent("INIT");
+        onLocalFallback?.();
       }
     }, 5e3);
     return () => clearTimeout(fallback);
-  }, [traits2, orbitalNames, sendEvent]);
+  }, [traits2, orbitalNames, sendEvent, onLocalFallback]);
   React114.useEffect(() => {
     if (!bridge.connected || !orbitalNames?.length || initSentRef.current) return;
     initSentRef.current = true;
@@ -33979,7 +34015,7 @@ function TraitInitializer({ traits: traits2, orbitalNames, onNavigate }) {
   }, [bridge.connected, orbitalNames, bridge.sendEvent, slotsActions]);
   return null;
 }
-function SchemaRunner({ schema, serverUrl, mockData, pageName, onNavigate }) {
+function SchemaRunner({ schema, serverUrl, mockData, pageName, onNavigate, onLocalFallback }) {
   const { traits: traits2, allEntities, ir } = useResolvedSchema(schema, pageName);
   const allPageTraits = React114.useMemo(() => {
     if (pageName && traits2.length > 0) return traits2;
@@ -34019,7 +34055,15 @@ function SchemaRunner({ schema, serverUrl, mockData, pageName, onNavigate }) {
     }
   }, [mockKey, serverUrl, mockData, entityStore]);
   const inner = /* @__PURE__ */ jsxRuntime.jsx(providers.VerificationProvider, { enabled: true, children: /* @__PURE__ */ jsxRuntime.jsx(SlotsProvider, { children: /* @__PURE__ */ jsxRuntime.jsxs(EntitySchemaProvider, { entities: Array.from(allEntities.values()), children: [
-    /* @__PURE__ */ jsxRuntime.jsx(TraitInitializer, { traits: allPageTraits, orbitalNames: serverUrl ? orbitalNames : void 0, onNavigate }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      TraitInitializer,
+      {
+        traits: allPageTraits,
+        orbitalNames: serverUrl ? orbitalNames : void 0,
+        onNavigate,
+        onLocalFallback
+      }
+    ),
     /* @__PURE__ */ jsxRuntime.jsx(SlotBridge, {}),
     /* @__PURE__ */ jsxRuntime.jsx(Box, { className: "min-h-full p-4", children: /* @__PURE__ */ jsxRuntime.jsx(UISlotRenderer, { includeHud: true, hudMode: "inline", includeFloating: true }) })
   ] }) }) });
@@ -34036,6 +34080,16 @@ function OrbPreview({
   className,
   serverUrl
 }) {
+  const [localFallback, setLocalFallback] = React114.useState(false);
+  const eventBus = useEventBus();
+  const handleLocalFallback = React114.useCallback(() => {
+    if (localFallback) return;
+    setLocalFallback(true);
+    eventBus.emit("UI:NOTIFY", {
+      message: "Preview server unreachable \u2014 running locally without server-side state.",
+      severity: "warning"
+    });
+  }, [localFallback, eventBus]);
   const parseResult = React114.useMemo(() => {
     let parsed;
     if (typeof schema === "string") {
@@ -34093,13 +34147,26 @@ function OrbPreview({
     el.addEventListener("click", handler, true);
     return () => el.removeEventListener("click", handler, true);
   }, [pages, handleNavigate]);
-  return /* @__PURE__ */ jsxRuntime.jsx(
+  return /* @__PURE__ */ jsxRuntime.jsxs(
     Box,
     {
       ref: containerRef,
       className: `overflow-auto border border-[var(--color-border)] rounded-[var(--radius-md)] ${className ?? ""}`,
       style: { height },
-      children: /* @__PURE__ */ jsxRuntime.jsx(providers.OrbitalProvider, { initialData: effectiveMockData, skipTheme: true, verification: true, children: /* @__PURE__ */ jsxRuntime.jsx(context.UISlotProvider, { children: /* @__PURE__ */ jsxRuntime.jsx(SchemaRunner, { schema: parsedSchema, serverUrl, mockData: effectiveMockData, pageName: currentPage, onNavigate: handleNavigate }) }) })
+      children: [
+        localFallback && /* @__PURE__ */ jsxRuntime.jsx(Box, { className: "px-3 py-2 bg-[var(--color-warning)] bg-opacity-10 border-b border-[var(--color-warning)] flex items-center gap-2", children: /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "caption", className: "text-[var(--color-warning-foreground)] flex-1", children: "Preview server unreachable \u2014 running locally. Server-side state and persistence are disabled." }) }),
+        /* @__PURE__ */ jsxRuntime.jsx(providers.OrbitalProvider, { initialData: effectiveMockData, skipTheme: true, verification: true, children: /* @__PURE__ */ jsxRuntime.jsx(context.UISlotProvider, { children: /* @__PURE__ */ jsxRuntime.jsx(
+          SchemaRunner,
+          {
+            schema: parsedSchema,
+            serverUrl,
+            mockData: effectiveMockData,
+            pageName: currentPage,
+            onNavigate: handleNavigate,
+            onLocalFallback: handleLocalFallback
+          }
+        ) }) })
+      ]
     }
   );
 }

package/dist/runtime/index.js

@@ -9969,7 +9969,9 @@ var CodeBlock = React114__default.memo(
     showLanguageBadge = true,
     maxHeight = "60vh",
     foldable: foldableProp,
-    className
+    className,
+    editable = false,
+    onChange
   }) => {
     const code = typeof rawCode === "string" ? rawCode : String(rawCode ?? "");
     const isOrb = language === "orb";
@@ -10140,7 +10142,37 @@ var CodeBlock = React114__default.memo(
           ]
         }
       ),
-      /* @__PURE__ */ jsx(
+      editable ? (
+        /* GAP-51: editable mode — composes the Textarea atom. Plain text editing,
+           no Prism highlighting overlay (follow-up). The textarea is uncontrolled
+           on the value side: we pass `code` as the initial value and forward
+           every keystroke via onChange — the consumer is responsible for
+           debouncing and re-deriving `code` only after the user stops typing
+           so the cursor doesn't fight a re-render. */
+        /* @__PURE__ */ jsx(
+          Textarea,
+          {
+            defaultValue: code,
+            onChange: (e) => onChange?.(e.target.value),
+            spellCheck: false,
+            style: {
+              fontFamily: 'ui-monospace, SFMono-Regular, Menlo, Monaco, "Cascadia Mono", "Courier New", monospace',
+              fontSize: "13px",
+              lineHeight: "1.5",
+              backgroundColor: "#1e1e1e",
+              color: "#e6e6e6",
+              borderRadius: hasHeader ? "0 0 0.5rem 0.5rem" : "0.5rem",
+              border: "none",
+              padding: "1rem",
+              resize: "none",
+              minHeight: "160px",
+              maxHeight,
+              width: "100%",
+              outline: "none"
+            }
+          }
+        )
+      ) : /* @__PURE__ */ jsx(
         "div",
         {
           ref: scrollRef,
@@ -10160,7 +10192,7 @@ var CodeBlock = React114__default.memo(
       )
     ] });
   },
-  (prev, next) => prev.language === next.language && prev.code === next.code && prev.showCopyButton === next.showCopyButton && prev.maxHeight === next.maxHeight && prev.foldable === next.foldable
+  (prev, next) => prev.language === next.language && prev.code === next.code && prev.showCopyButton === next.showCopyButton && prev.maxHeight === next.maxHeight && prev.foldable === next.foldable && prev.editable === next.editable && prev.onChange === next.onChange
 );
 CodeBlock.displayName = "CodeBlock";
 
@@ -33612,6 +33644,9 @@ function UISlotRenderer({
 }
 UISlotRenderer.displayName = "UISlotRenderer";
 
+// runtime/OrbPreview.tsx
+init_useEventBus();
+
 // runtime/ServerBridge.tsx
 init_useEventBus();
 var ServerBridgeContext = createContext(null);
@@ -33844,7 +33879,7 @@ function SlotBridge() {
   }, [slots, render, clear]);
   return null;
 }
-function TraitInitializer({ traits: traits2, orbitalNames, onNavigate }) {
+function TraitInitializer({ traits: traits2, orbitalNames, onNavigate, onLocalFallback }) {
   const slotsActions = useSlotsActions();
   const bridge = useServerBridge();
   const entityStore = useEntityStore();
@@ -33885,10 +33920,11 @@ function TraitInitializer({ traits: traits2, orbitalNames, onNavigate }) {
     const fallback = setTimeout(() => {
       if (!initSentRef.current) {
         sendEvent("INIT");
+        onLocalFallback?.();
       }
     }, 5e3);
     return () => clearTimeout(fallback);
-  }, [traits2, orbitalNames, sendEvent]);
+  }, [traits2, orbitalNames, sendEvent, onLocalFallback]);
   useEffect(() => {
     if (!bridge.connected || !orbitalNames?.length || initSentRef.current) return;
     initSentRef.current = true;
@@ -33934,7 +33970,7 @@ function TraitInitializer({ traits: traits2, orbitalNames, onNavigate }) {
   }, [bridge.connected, orbitalNames, bridge.sendEvent, slotsActions]);
   return null;
 }
-function SchemaRunner({ schema, serverUrl, mockData, pageName, onNavigate }) {
+function SchemaRunner({ schema, serverUrl, mockData, pageName, onNavigate, onLocalFallback }) {
   const { traits: traits2, allEntities, ir } = useResolvedSchema(schema, pageName);
   const allPageTraits = useMemo(() => {
     if (pageName && traits2.length > 0) return traits2;
@@ -33974,7 +34010,15 @@ function SchemaRunner({ schema, serverUrl, mockData, pageName, onNavigate }) {
     }
   }, [mockKey, serverUrl, mockData, entityStore]);
   const inner = /* @__PURE__ */ jsx(VerificationProvider, { enabled: true, children: /* @__PURE__ */ jsx(SlotsProvider, { children: /* @__PURE__ */ jsxs(EntitySchemaProvider, { entities: Array.from(allEntities.values()), children: [
-    /* @__PURE__ */ jsx(TraitInitializer, { traits: allPageTraits, orbitalNames: serverUrl ? orbitalNames : void 0, onNavigate }),
+    /* @__PURE__ */ jsx(
+      TraitInitializer,
+      {
+        traits: allPageTraits,
+        orbitalNames: serverUrl ? orbitalNames : void 0,
+        onNavigate,
+        onLocalFallback
+      }
+    ),
     /* @__PURE__ */ jsx(SlotBridge, {}),
     /* @__PURE__ */ jsx(Box, { className: "min-h-full p-4", children: /* @__PURE__ */ jsx(UISlotRenderer, { includeHud: true, hudMode: "inline", includeFloating: true }) })
   ] }) }) });
@@ -33991,6 +34035,16 @@ function OrbPreview({
   className,
   serverUrl
 }) {
+  const [localFallback, setLocalFallback] = useState(false);
+  const eventBus = useEventBus();
+  const handleLocalFallback = useCallback(() => {
+    if (localFallback) return;
+    setLocalFallback(true);
+    eventBus.emit("UI:NOTIFY", {
+      message: "Preview server unreachable \u2014 running locally without server-side state.",
+      severity: "warning"
+    });
+  }, [localFallback, eventBus]);
   const parseResult = useMemo(() => {
     let parsed;
     if (typeof schema === "string") {
@@ -34048,13 +34102,26 @@ function OrbPreview({
     el.addEventListener("click", handler, true);
     return () => el.removeEventListener("click", handler, true);
   }, [pages, handleNavigate]);
-  return /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsxs(
     Box,
     {
       ref: containerRef,
       className: `overflow-auto border border-[var(--color-border)] rounded-[var(--radius-md)] ${className ?? ""}`,
       style: { height },
-      children: /* @__PURE__ */ jsx(OrbitalProvider, { initialData: effectiveMockData, skipTheme: true, verification: true, children: /* @__PURE__ */ jsx(UISlotProvider, { children: /* @__PURE__ */ jsx(SchemaRunner, { schema: parsedSchema, serverUrl, mockData: effectiveMockData, pageName: currentPage, onNavigate: handleNavigate }) }) })
+      children: [
+        localFallback && /* @__PURE__ */ jsx(Box, { className: "px-3 py-2 bg-[var(--color-warning)] bg-opacity-10 border-b border-[var(--color-warning)] flex items-center gap-2", children: /* @__PURE__ */ jsx(Typography, { variant: "caption", className: "text-[var(--color-warning-foreground)] flex-1", children: "Preview server unreachable \u2014 running locally. Server-side state and persistence are disabled." }) }),
+        /* @__PURE__ */ jsx(OrbitalProvider, { initialData: effectiveMockData, skipTheme: true, verification: true, children: /* @__PURE__ */ jsx(UISlotProvider, { children: /* @__PURE__ */ jsx(
+          SchemaRunner,
+          {
+            schema: parsedSchema,
+            serverUrl,
+            mockData: effectiveMockData,
+            pageName: currentPage,
+            onNavigate: handleNavigate,
+            onLocalFallback: handleLocalFallback
+          }
+        ) }) })
+      ]
     }
   );
 }

package/index.css

@@ -135,6 +135,46 @@ body {
     background: var(--color-foreground);
 }
 
+/**
+ * ReactFlow (@xyflow/react) Controls — theme overrides for FlowCanvas zoom buttons
+ *
+ * Without these, the bottom-left zoom in/out/fit buttons render as plain white
+ * squares from ReactFlow's default stylesheet, ignoring the active theme.
+ * Targets: .react-flow__controls + .react-flow__controls-button
+ */
+.react-flow__controls {
+    background: var(--color-card) !important;
+    border: 1px solid var(--color-border) !important;
+    border-radius: var(--radius-md) !important;
+    box-shadow: var(--shadow-main) !important;
+    overflow: hidden;
+}
+
+.react-flow__controls-button {
+    background: transparent !important;
+    border: none !important;
+    border-bottom: 1px solid var(--color-border) !important;
+    color: var(--color-foreground) !important;
+    fill: var(--color-foreground) !important;
+    width: 28px;
+    height: 28px;
+    transition: background var(--transition-fast) var(--transition-timing);
+}
+
+.react-flow__controls-button:last-child {
+    border-bottom: none !important;
+}
+
+.react-flow__controls-button:hover {
+    background: var(--color-muted) !important;
+}
+
+.react-flow__controls-button svg {
+    fill: var(--color-foreground) !important;
+    width: 14px;
+    height: 14px;
+}
+
 @layer utilities {
     .shadow-theme { box-shadow: var(--shadow-main); }
     .shadow-theme-sm { box-shadow: var(--shadow-sm); }

package/package.json

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