@almadar/ui 2.50.1 → 2.52.0

package/dist/avl/index.js

@@ -19342,13 +19342,13 @@ var MapViewImpl = lazy(async () => {
     shadowSize: [41, 41]
   });
   L.Marker.prototype.options.icon = defaultIcon;
-  const { useEffect: useEffect87, useRef: useRef87, useCallback: useCallback124, useState: useState124 } = React125__default;
+  const { useEffect: useEffect88, useRef: useRef88, useCallback: useCallback124, useState: useState124 } = React125__default;
   const { Typography: Typography2 } = await Promise.resolve().then(() => (init_Typography(), Typography_exports));
   const { useEventBus: useEventBus3 } = await Promise.resolve().then(() => (init_useEventBus(), useEventBus_exports));
   function MapUpdater({ centerLat, centerLng, zoom }) {
     const map = useMap();
-    const prevRef = useRef87({ centerLat, centerLng, zoom });
-    useEffect87(() => {
+    const prevRef = useRef88({ centerLat, centerLng, zoom });
+    useEffect88(() => {
       const prev = prevRef.current;
       if (prev.centerLat !== centerLat || prev.centerLng !== centerLng || prev.zoom !== zoom) {
         map.setView([centerLat, centerLng], zoom);
@@ -19359,7 +19359,7 @@ var MapViewImpl = lazy(async () => {
   }
   function MapClickHandler({ onMapClick }) {
     const map = useMap();
-    useEffect87(() => {
+    useEffect88(() => {
       if (!onMapClick) return;
       const handler = (e) => {
         onMapClick(e.latlng.lat, e.latlng.lng);
@@ -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";
 
@@ -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
+          }
+        ) }) })
+      ]
     }
   );
 }
@@ -47662,12 +47729,18 @@ var OrbPreviewNodeInner = (props) => {
       el = el.parentElement;
       if (!el || el === contentRef.current) break;
     }
+    const containerNode = {
+      orbitalName: data.orbitalName,
+      traitName: data.traitName,
+      transitionEvent: data.transitionEvent
+    };
     const containerPath = el?.dataset?.patternPath;
     if (!containerPath) {
-      eventBus.emit("UI:PATTERN_INSERT", {
+      eventBus.emit("UI:PATTERN_DROP", {
         parentPath: "root",
         patternType: payload.data.type,
-        index: 0
+        index: 0,
+        containerNode
       });
       return;
     }
@@ -47684,12 +47757,13 @@ var OrbPreviewNodeInner = (props) => {
         break;
       }
     }
-    eventBus.emit("UI:PATTERN_INSERT", {
+    eventBus.emit("UI:PATTERN_DROP", {
       parentPath: containerPath,
       patternType: payload.data.type,
-      index: insertIndex
+      index: insertIndex,
+      containerNode
     });
-  }, [eventBus]);
+  }, [eventBus, data.orbitalName, data.traitName, data.transitionEvent]);
   const handlePreviewDragOver = useCallback((e) => {
     if (!e.dataTransfer.types.includes(ALMADAR_DND_MIME)) return;
     e.preventDefault();
@@ -48292,6 +48366,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 +48378,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 +48673,8 @@ function FlowCanvasInner({
   height = 500,
   onNodeClick,
   onLevelChange,
+  onOrbitalDoubleClick,
+  cosmicEntryLevel = "expanded",
   initialOrbital,
   initialLevel,
   initialSelectedNode,
@@ -48665,11 +48748,24 @@ function FlowCanvasInner({
     }
     if (level === "overview") {
       const d = node.data;
-      setExpandedOrbital(d.orbitalName ?? node.id);
+      const orbitalName = d.orbitalName ?? node.id;
+      if (onOrbitalDoubleClick && (cosmicEntryLevel === "overview" || cosmicEntryLevel === "both")) {
+        onOrbitalDoubleClick(orbitalName);
+        return;
+      }
+      setExpandedOrbital(orbitalName);
       setLevel("expanded");
-      onLevelChange?.("expanded", d.orbitalName ?? node.id);
+      onLevelChange?.("expanded", orbitalName);
+      return;
     }
-  }, [level, onLevelChange, atBehaviorLevel, composeLevel]);
+    if (level === "expanded") {
+      const d = node.data;
+      const orbitalName = d.orbitalName ?? node.id;
+      if (orbitalName && onOrbitalDoubleClick && (cosmicEntryLevel === "expanded" || cosmicEntryLevel === "both")) {
+        onOrbitalDoubleClick(orbitalName);
+      }
+    }
+  }, [level, onLevelChange, onOrbitalDoubleClick, cosmicEntryLevel, atBehaviorLevel, composeLevel]);
   const handleNodeClick = useCallback((_, node) => {
     const nodeData = node.data;
     if (level === "expanded") {
@@ -48764,10 +48860,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 +48880,7 @@ function FlowCanvasInner({
               minZoom: 0.1,
               maxZoom: 2,
               fitView: true,
+              fitViewOptions: { padding: 0.15 },
               nodesDraggable: true,
               elementsSelectable: true,
               proOptions: { hideAttribution: true },
@@ -49203,7 +49300,11 @@ var AvlOrbitalsCosmicZoom = ({
   color = "var(--color-primary, #4A90D9)",
   animated = true,
   width = "100%",
-  height = 450
+  height = 450,
+  highlightedOrbital,
+  onOrbitalSelect,
+  minZoom = 0.4,
+  maxZoom = 3
 }) => {
   const parsedSchema = useMemo(() => {
     if (typeof schemaProp === "string") return JSON.parse(schemaProp);
@@ -49234,10 +49335,83 @@ var AvlOrbitalsCosmicZoom = ({
   );
   const [selected, setSelected] = useState(null);
   const handleSelect = useCallback(
-    (name) => setSelected((prev) => prev === name ? null : name),
-    []
+    (name) => {
+      setSelected((prev) => prev === name ? null : name);
+      onOrbitalSelect?.(name);
+    },
+    [onOrbitalSelect]
   );
   const selectedView = orbitalViews.find((o) => o.name === selected);
+  const [zoom, setZoom] = useState(1);
+  const [pan, setPan] = useState({ x: 0, y: 0 });
+  const dragStateRef = useRef(null);
+  const transformWrapperRef = useRef(null);
+  const clampZoom = useCallback(
+    (z) => Math.max(minZoom, Math.min(maxZoom, z)),
+    [minZoom, maxZoom]
+  );
+  const handlePointerDown = useCallback((e) => {
+    if (e.target.closest("[data-orbital-tile]")) return;
+    dragStateRef.current = {
+      startX: e.clientX,
+      startY: e.clientY,
+      panX: pan.x,
+      panY: pan.y
+    };
+    e.target.setPointerCapture(e.pointerId);
+  }, [pan]);
+  const handlePointerMove = useCallback((e) => {
+    const drag = dragStateRef.current;
+    if (!drag) return;
+    setPan({
+      x: drag.panX + (e.clientX - drag.startX),
+      y: drag.panY + (e.clientY - drag.startY)
+    });
+  }, []);
+  const handlePointerUp = useCallback((e) => {
+    if (!dragStateRef.current) return;
+    dragStateRef.current = null;
+    try {
+      e.target.releasePointerCapture(e.pointerId);
+    } catch {
+    }
+  }, []);
+  const panRef = useRef(pan);
+  const zoomRef = useRef(zoom);
+  useEffect(() => {
+    panRef.current = pan;
+  }, [pan]);
+  useEffect(() => {
+    zoomRef.current = zoom;
+  }, [zoom]);
+  useEffect(() => {
+    const wrapper = transformWrapperRef.current;
+    if (!wrapper) return;
+    const wheelListener = (e) => {
+      e.preventDefault();
+      const rect = wrapper.getBoundingClientRect();
+      const cursorX = e.clientX - rect.left;
+      const cursorY = e.clientY - rect.top;
+      const currentZoom = zoomRef.current;
+      const currentPan = panRef.current;
+      const worldX = (cursorX - currentPan.x) / currentZoom;
+      const worldY = (cursorY - currentPan.y) / currentZoom;
+      const delta = e.deltaY > 0 ? -0.1 : 0.1;
+      const nextZoom = clampZoom(currentZoom * (1 + delta));
+      const nextPanX = cursorX - worldX * nextZoom;
+      const nextPanY = cursorY - worldY * nextZoom;
+      setZoom(nextZoom);
+      setPan({ x: nextPanX, y: nextPanY });
+    };
+    wrapper.addEventListener("wheel", wheelListener, { passive: false });
+    return () => wrapper.removeEventListener("wheel", wheelListener);
+  }, [clampZoom]);
+  const zoomIn = useCallback(() => setZoom((z) => clampZoom(z * 1.2)), [clampZoom]);
+  const zoomOut = useCallback(() => setZoom((z) => clampZoom(z / 1.2)), [clampZoom]);
+  const resetZoom = useCallback(() => {
+    setZoom(1);
+    setPan({ x: 0, y: 0 });
+  }, []);
   return /* @__PURE__ */ jsxs(
     Box,
     {
@@ -49247,59 +49421,115 @@ var AvlOrbitalsCosmicZoom = ({
       style: { width, height: containerH },
       children: [
         /* @__PURE__ */ jsx(
-          EventWireOverlay,
+          "div",
           {
-            orbitalViews,
-            crossLinks,
-            color,
-            animated,
-            containerW,
-            containerH
+            ref: transformWrapperRef,
+            onPointerDown: handlePointerDown,
+            onPointerMove: handlePointerMove,
+            onPointerUp: handlePointerUp,
+            onPointerCancel: handlePointerUp,
+            style: {
+              position: "absolute",
+              inset: 0,
+              overflow: "hidden",
+              cursor: dragStateRef.current ? "grabbing" : "grab",
+              touchAction: "none"
+            },
+            children: /* @__PURE__ */ jsxs(
+              "div",
+              {
+                style: {
+                  position: "absolute",
+                  inset: 0,
+                  transform: `translate(${pan.x}px, ${pan.y}px) scale(${zoom})`,
+                  transformOrigin: "0 0"
+                },
+                children: [
+                  /* @__PURE__ */ jsx(
+                    EventWireOverlay,
+                    {
+                      orbitalViews,
+                      crossLinks,
+                      color,
+                      animated,
+                      containerW,
+                      containerH
+                    }
+                  ),
+                  orbitalViews.map((view) => {
+                    const isHighlighted = view.name === highlightedOrbital;
+                    return /* @__PURE__ */ jsx(
+                      Box,
+                      {
+                        role: "button",
+                        tabIndex: 0,
+                        "data-orbital-tile": "true",
+                        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)
+                          }
+                        )
+                      },
+                      view.name
+                    );
+                  }),
+                  selectedView && /* @__PURE__ */ jsx(
+                    InfoPanel,
+                    {
+                      view: selectedView,
+                      crossLinks,
+                      color
+                    }
+                  )
+                ]
+              }
+            )
           }
         ),
-        orbitalViews.map((view) => /* @__PURE__ */ jsx(
+        /* @__PURE__ */ jsxs(
           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
+              top: 12,
+              right: 12,
+              display: "flex",
+              flexDirection: "column",
+              gap: 4,
+              zIndex: 30
             },
-            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
-        )),
-        selectedView && /* @__PURE__ */ jsx(
-          InfoPanel,
-          {
-            view: selectedView,
-            crossLinks,
-            color
+            children: [
+              /* @__PURE__ */ jsx(Button, { variant: "secondary", size: "sm", onClick: zoomIn, title: "Zoom in", action: "COSMIC_ZOOM_IN", children: /* @__PURE__ */ jsx(Icon, { name: "plus", size: "sm" }) }),
+              /* @__PURE__ */ jsx(Button, { variant: "secondary", size: "sm", onClick: zoomOut, title: "Zoom out", action: "COSMIC_ZOOM_OUT", children: /* @__PURE__ */ jsx(Icon, { name: "minus", size: "sm" }) }),
+              /* @__PURE__ */ jsx(Button, { variant: "secondary", size: "sm", onClick: resetZoom, title: "Reset", action: "COSMIC_ZOOM_RESET", children: /* @__PURE__ */ jsx(Icon, { name: "maximize", size: "sm" }) })
+            ]
           }
         )
       ]

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();

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();