@almadar/ui 2.50.0 → 2.51.0

package/dist/avl/index.js

@@ -22072,7 +22072,9 @@ var CodeBlock = React125__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";
@@ -22243,7 +22245,37 @@ var CodeBlock = React125__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,
@@ -22263,7 +22295,7 @@ var CodeBlock = React125__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";
 
@@ -44581,7 +44613,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: [
@@ -46435,6 +46467,9 @@ function OrbitalProvider({
   );
 }
 OrbitalProvider.displayName = "OrbitalProvider";
+
+// runtime/OrbPreview.tsx
+init_useEventBus();
 function useResolvedSchema(schema, pageName) {
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState(null);
@@ -47204,7 +47239,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();
@@ -47245,10 +47280,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;
@@ -47294,7 +47330,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;
@@ -47334,7 +47370,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 }) })
   ] }) }) });
@@ -47351,6 +47395,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") {
@@ -47408,13 +47462,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
+          }
+        ) }) })
+      ]
     }
   );
 }
@@ -48292,6 +48359,11 @@ function OrbInspector({ node, schema, editable = false, onSchemaChange, onClose
     ] }),
     /* @__PURE__ */ jsx(Box, { className: "flex-1 overflow-y-auto", children: activeTab === "code" ? (
       /* ── Code Tab ── */
+      /* GAP-51: when editable, the CodeBlock molecule renders the existing
+         Textarea atom internally and forwards keystrokes via UI:CODE_CHANGE
+         on the EventBus. The consumer (builder workspace) listens, debounces,
+         parses via safeParseOrbitalSchema, and calls setSchema. Read-only
+         consumers (editable=false) see the existing syntax-highlighted view. */
       /* @__PURE__ */ jsx(Box, { className: "p-2", children: /* @__PURE__ */ jsx(
         CodeBlock,
         {
@@ -48299,7 +48371,9 @@ function OrbInspector({ node, schema, editable = false, onSchemaChange, onClose
           language: "orb",
           showCopyButton: true,
           showLanguageBadge: true,
-          maxHeight: "100%"
+          maxHeight: "100%",
+          editable,
+          onChange: editable ? (code) => eventBus.emit("UI:CODE_CHANGE", { code }) : void 0
         }
       ) })
     ) : (
@@ -48592,6 +48666,7 @@ function FlowCanvasInner({
   height = 500,
   onNodeClick,
   onLevelChange,
+  onOrbitalDoubleClick,
   initialOrbital,
   initialLevel,
   initialSelectedNode,
@@ -48668,8 +48743,16 @@ function FlowCanvasInner({
       setExpandedOrbital(d.orbitalName ?? node.id);
       setLevel("expanded");
       onLevelChange?.("expanded", d.orbitalName ?? node.id);
+      return;
+    }
+    if (level === "expanded") {
+      const d = node.data;
+      const orbitalName = d.orbitalName ?? node.id;
+      if (orbitalName && onOrbitalDoubleClick) {
+        onOrbitalDoubleClick(orbitalName);
+      }
     }
-  }, [level, onLevelChange, atBehaviorLevel, composeLevel]);
+  }, [level, onLevelChange, onOrbitalDoubleClick, atBehaviorLevel, composeLevel]);
   const handleNodeClick = useCallback((_, node) => {
     const nodeData = node.data;
     if (level === "expanded") {
@@ -48764,10 +48847,10 @@ function FlowCanvasInner({
   return /* @__PURE__ */ jsx(ScreenSizeContext.Provider, { value: screenSize, children: /* @__PURE__ */ jsx(PatternSelectionContext.Provider, { value: patternSelectionValue, children: /* @__PURE__ */ jsxs(
     Box,
     {
-      className: `flex ${className ?? ""}`,
+      className: `flex h-full ${className ?? ""}`,
       style: { width, height },
       children: [
-        /* @__PURE__ */ jsxs(Box, { className: "relative flex-1 min-w-0", children: [
+        /* @__PURE__ */ jsxs(Box, { className: "relative flex-1 min-w-0 h-full", children: [
           /* @__PURE__ */ jsxs(
             ReactFlow,
             {
@@ -48784,6 +48867,7 @@ function FlowCanvasInner({
               minZoom: 0.1,
               maxZoom: 2,
               fitView: true,
+              fitViewOptions: { padding: 0.15 },
               nodesDraggable: true,
               elementsSelectable: true,
               proOptions: { hideAttribution: true },
@@ -49203,7 +49287,8 @@ var AvlOrbitalsCosmicZoom = ({
   color = "var(--color-primary, #4A90D9)",
   animated = true,
   width = "100%",
-  height = 450
+  height = 450,
+  highlightedOrbital
 }) => {
   const parsedSchema = useMemo(() => {
     if (typeof schemaProp === "string") return JSON.parse(schemaProp);
@@ -49257,43 +49342,49 @@ var AvlOrbitalsCosmicZoom = ({
             containerH
           }
         ),
-        orbitalViews.map((view) => /* @__PURE__ */ jsx(
-          Box,
-          {
-            role: "button",
-            tabIndex: 0,
-            onClick: () => handleSelect(view.name),
-            onKeyDown: (e) => {
-              if (e.key === "Enter" || e.key === " ") handleSelect(view.name);
-            },
-            "aria-label": `Orbital: ${view.name}`,
-            position: "absolute",
-            style: {
-              left: view.cx - UNIT_DISPLAY_W / 2,
-              top: view.cy - UNIT_DISPLAY_H / 2,
-              width: UNIT_DISPLAY_W,
-              height: UNIT_DISPLAY_H,
-              cursor: "pointer",
-              transition: "transform 0.2s ease, filter 0.2s ease",
-              transform: selected === view.name ? "scale(1.05)" : "scale(1)",
-              filter: selected && selected !== view.name ? "opacity(0.5)" : "none",
-              zIndex: selected === view.name ? 10 : 1
+        orbitalViews.map((view) => {
+          const isHighlighted = view.name === highlightedOrbital;
+          return /* @__PURE__ */ jsx(
+            Box,
+            {
+              role: "button",
+              tabIndex: 0,
+              onClick: () => handleSelect(view.name),
+              onKeyDown: (e) => {
+                if (e.key === "Enter" || e.key === " ") handleSelect(view.name);
+              },
+              "aria-label": `Orbital: ${view.name}${isHighlighted ? " (highlighted)" : ""}`,
+              position: "absolute",
+              style: {
+                left: view.cx - UNIT_DISPLAY_W / 2,
+                top: view.cy - UNIT_DISPLAY_H / 2,
+                width: UNIT_DISPLAY_W,
+                height: UNIT_DISPLAY_H,
+                cursor: "pointer",
+                transition: "transform 0.2s ease, filter 0.2s ease, box-shadow 0.3s ease",
+                transform: selected === view.name ? "scale(1.05)" : "scale(1)",
+                filter: selected && selected !== view.name ? "opacity(0.5)" : "none",
+                // GAP-52: persistent highlight ring (independent from user selection)
+                boxShadow: isHighlighted ? `0 0 0 3px ${color}, 0 0 24px 4px ${color}` : "none",
+                borderRadius: isHighlighted ? "12px" : void 0,
+                zIndex: isHighlighted ? 11 : selected === view.name ? 10 : 1
+              },
+              children: /* @__PURE__ */ jsx(
+                AvlOrbitalUnit,
+                {
+                  entityName: view.entityName,
+                  fields: view.fieldCount,
+                  persistence: view.persistence,
+                  traits: view.traits,
+                  pages: view.pages,
+                  color,
+                  animated: animated && (selected === view.name || isHighlighted)
+                }
+              )
             },
-            children: /* @__PURE__ */ jsx(
-              AvlOrbitalUnit,
-              {
-                entityName: view.entityName,
-                fields: view.fieldCount,
-                persistence: view.persistence,
-                traits: view.traits,
-                pages: view.pages,
-                color,
-                animated: animated && selected === view.name
-              }
-            )
-          },
-          view.name
-        )),
+            view.name
+          );
+        }),
         selectedView && /* @__PURE__ */ jsx(
           InfoPanel,
           {

package/dist/components/index.cjs

@@ -9209,7 +9209,9 @@ var CodeBlock = React90__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";
@@ -9380,7 +9382,37 @@ var CodeBlock = React90__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,
@@ -9400,7 +9432,7 @@ var CodeBlock = React90__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";
 init_Typography();
@@ -34914,7 +34946,7 @@ var Timeline = ({
     title && /* @__PURE__ */ jsxRuntime.jsx(exports.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: [

package/dist/components/index.js

@@ -9164,7 +9164,9 @@ var CodeBlock = React90__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";
@@ -9335,7 +9337,37 @@ var CodeBlock = React90__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,
@@ -9355,7 +9387,7 @@ var CodeBlock = React90__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";
 init_Typography();
@@ -34869,7 +34901,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: [

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,12 @@ 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;
 }
 export declare const AvlOrbitalsCosmicZoom: React.FC<AvlOrbitalsCosmicZoomProps>;

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

@@ -28,6 +28,16 @@ export interface FlowCanvasProps {
         transition?: string;
     }) => void;
     onLevelChange?: (level: ViewLevel, orbital?: string) => void;
+    /**
+     * GAP-52: fired when the user double-clicks an orbital while ALREADY at
+     * `level === 'expanded'`. Consumers (e.g. the builder workspace) use this as
+     * the trigger to enter cosmic mode (`AvlOrbitalsCosmicZoom`) for the focused
+     * orbital. This does NOT replace the existing overview→expanded drill —
+     * that path still fires `onLevelChange('expanded', ...)` as before.
+     * The callback runs unconditionally; persona / permission gating is the
+     * consumer's responsibility.
+     */
+    onOrbitalDoubleClick?: (orbital: string) => void;
     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";