@almadar/ui 2.50.0 → 2.51.0

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";
 
@@ -32022,7 +32054,7 @@ var Timeline = ({
     title && /* @__PURE__ */ jsxRuntime.jsx(Typography, { variant: "h5", weight: "semibold", children: title }),
     /* @__PURE__ */ jsxRuntime.jsx(VStack, { gap: "none", className: "relative", children: items.map((item, idx) => {
       const status = item.status || "pending";
-      const style = STATUS_STYLES3[status];
+      const style = STATUS_STYLES3[status] || STATUS_STYLES3.pending;
       const ItemIcon = item.icon || style.icon;
       const isLast = idx === items.length - 1;
       return /* @__PURE__ */ jsxRuntime.jsxs(HStack, { gap: "md", align: "start", className: "relative", children: [
@@ -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";
 
@@ -31977,7 +32009,7 @@ var Timeline = ({
     title && /* @__PURE__ */ jsx(Typography, { variant: "h5", weight: "semibold", children: title }),
     /* @__PURE__ */ jsx(VStack, { gap: "none", className: "relative", children: items.map((item, idx) => {
       const status = item.status || "pending";
-      const style = STATUS_STYLES3[status];
+      const style = STATUS_STYLES3[status] || STATUS_STYLES3.pending;
       const ItemIcon = item.icon || style.icon;
       const isLast = idx === items.length - 1;
       return /* @__PURE__ */ jsxs(HStack, { gap: "md", align: "start", className: "relative", children: [
@@ -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.0",
+  "version": "2.51.0",
   "description": "React UI components, hooks, and providers for Almadar",
   "type": "module",
   "main": "./dist/components/index.js",
@@ -122,7 +122,7 @@
     "@almadar/evaluator": ">=2.5.4",
     "@almadar/patterns": ">=2.10.0",
     "@almadar/std": ">=5.2.0",
-    "@almadar/syntax": ">=1.2.0",
+    "@almadar/syntax": ">=1.2.1",
     "@almadar/runtime": ">=2.0.0",
     "@xyflow/react": "12.10.1",
     "clsx": "^2.1.0",