@almadar/ui 2.51.0 → 2.53.0

package/dist/components/index.cjs

@@ -9223,6 +9223,26 @@ var CodeBlock = React90__namespace.default.memo(
     const codeRef = React90.useRef(null);
     const savedScrollLeftRef = React90.useRef(0);
     const [copied, setCopied] = React90.useState(false);
+    const [editableValue, setEditableValue] = React90.useState(code);
+    const [editableTextareaKey, setEditableTextareaKey] = React90.useState(0);
+    const lastPropCodeRef = React90.useRef(code);
+    const editableTextareaRef = React90.useRef(null);
+    const editableOverlayRef = React90.useRef(null);
+    React90.useEffect(() => {
+      if (code !== lastPropCodeRef.current) {
+        lastPropCodeRef.current = code;
+        setEditableValue(code);
+        setEditableTextareaKey((k) => k + 1);
+      }
+    }, [code]);
+    const handleEditableScroll = React90.useCallback(() => {
+      const ta = editableTextareaRef.current;
+      const ov = editableOverlayRef.current;
+      if (ta && ov) {
+        ov.scrollTop = ta.scrollTop;
+        ov.scrollLeft = ta.scrollLeft;
+      }
+    }, []);
     const isFoldable = foldableProp ?? (language === "orb" || language === "json");
     const [collapsed, setCollapsed] = React90.useState(() => /* @__PURE__ */ new Set());
     const foldRegions = React90.useMemo(
@@ -9383,33 +9403,106 @@ var CodeBlock = React90__namespace.default.memo(
         }
       ),
       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,
+        /* GAP-77: editable mode = transparent Textarea on top + Prism-highlighted
+                     overlay underneath. The textarea is uncontrolled (defaultValue + key)
+                     to avoid cursor jumps; the overlay reads `editableValue` which is
+                     mirrored from the textarea via onChange. Both elements share IDENTICAL
+                     font / line-height / padding so the highlighted text aligns with the
+                     textarea's invisible glyphs.
+        
+                     Scroll sync: the overlay has `pointer-events: none` and the textarea
+                     scrolls; `handleEditableScroll` keeps the overlay's scroll matched. */
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          Box,
           {
-            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",
+              position: "relative",
               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"
-            }
+              overflow: "hidden"
+            },
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "div",
+                {
+                  ref: editableOverlayRef,
+                  "aria-hidden": true,
+                  style: {
+                    position: "absolute",
+                    inset: 0,
+                    overflow: "hidden",
+                    pointerEvents: "none",
+                    maxHeight
+                  },
+                  children: /* @__PURE__ */ jsxRuntime.jsx(
+                    SyntaxHighlighter__default.default,
+                    {
+                      PreTag: "div",
+                      language,
+                      style: activeStyle,
+                      customStyle: {
+                        backgroundColor: "transparent",
+                        borderRadius: 0,
+                        padding: "1rem",
+                        margin: 0,
+                        whiteSpace: "pre",
+                        minWidth: "100%",
+                        minHeight: "160px",
+                        fontFamily: 'ui-monospace, SFMono-Regular, Menlo, Monaco, "Cascadia Mono", "Courier New", monospace',
+                        fontSize: "13px",
+                        lineHeight: "1.5"
+                      },
+                      codeTagProps: {
+                        style: {
+                          fontFamily: 'ui-monospace, SFMono-Regular, Menlo, Monaco, "Cascadia Mono", "Courier New", monospace',
+                          fontSize: "13px",
+                          lineHeight: "1.5"
+                        }
+                      },
+                      children: editableValue || " "
+                    }
+                  )
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                Textarea,
+                {
+                  ref: editableTextareaRef,
+                  defaultValue: code,
+                  onChange: (e) => {
+                    setEditableValue(e.target.value);
+                    onChange?.(e.target.value);
+                  },
+                  onScroll: handleEditableScroll,
+                  spellCheck: false,
+                  style: {
+                    position: "relative",
+                    zIndex: 1,
+                    fontFamily: 'ui-monospace, SFMono-Regular, Menlo, Monaco, "Cascadia Mono", "Courier New", monospace',
+                    fontSize: "13px",
+                    lineHeight: "1.5",
+                    backgroundColor: "transparent",
+                    color: "transparent",
+                    caretColor: "#e6e6e6",
+                    borderRadius: hasHeader ? "0 0 0.5rem 0.5rem" : "0.5rem",
+                    border: "none",
+                    padding: "1rem",
+                    resize: "none",
+                    minHeight: "160px",
+                    maxHeight,
+                    width: "100%",
+                    height: "100%",
+                    outline: "none",
+                    whiteSpace: "pre",
+                    overflowWrap: "normal",
+                    overflow: "auto"
+                  }
+                },
+                editableTextareaKey
+              )
+            ]
           }
         )
       ) : /* @__PURE__ */ jsxRuntime.jsx(

package/dist/components/index.js

@@ -9178,6 +9178,26 @@ var CodeBlock = React90__default.memo(
     const codeRef = useRef(null);
     const savedScrollLeftRef = useRef(0);
     const [copied, setCopied] = useState(false);
+    const [editableValue, setEditableValue] = useState(code);
+    const [editableTextareaKey, setEditableTextareaKey] = useState(0);
+    const lastPropCodeRef = useRef(code);
+    const editableTextareaRef = useRef(null);
+    const editableOverlayRef = useRef(null);
+    useEffect(() => {
+      if (code !== lastPropCodeRef.current) {
+        lastPropCodeRef.current = code;
+        setEditableValue(code);
+        setEditableTextareaKey((k) => k + 1);
+      }
+    }, [code]);
+    const handleEditableScroll = useCallback(() => {
+      const ta = editableTextareaRef.current;
+      const ov = editableOverlayRef.current;
+      if (ta && ov) {
+        ov.scrollTop = ta.scrollTop;
+        ov.scrollLeft = ta.scrollLeft;
+      }
+    }, []);
     const isFoldable = foldableProp ?? (language === "orb" || language === "json");
     const [collapsed, setCollapsed] = useState(() => /* @__PURE__ */ new Set());
     const foldRegions = useMemo(
@@ -9338,33 +9358,106 @@ var CodeBlock = React90__default.memo(
         }
       ),
       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,
+        /* GAP-77: editable mode = transparent Textarea on top + Prism-highlighted
+                     overlay underneath. The textarea is uncontrolled (defaultValue + key)
+                     to avoid cursor jumps; the overlay reads `editableValue` which is
+                     mirrored from the textarea via onChange. Both elements share IDENTICAL
+                     font / line-height / padding so the highlighted text aligns with the
+                     textarea's invisible glyphs.
+        
+                     Scroll sync: the overlay has `pointer-events: none` and the textarea
+                     scrolls; `handleEditableScroll` keeps the overlay's scroll matched. */
+        /* @__PURE__ */ jsxs(
+          Box,
           {
-            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",
+              position: "relative",
               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"
-            }
+              overflow: "hidden"
+            },
+            children: [
+              /* @__PURE__ */ jsx(
+                "div",
+                {
+                  ref: editableOverlayRef,
+                  "aria-hidden": true,
+                  style: {
+                    position: "absolute",
+                    inset: 0,
+                    overflow: "hidden",
+                    pointerEvents: "none",
+                    maxHeight
+                  },
+                  children: /* @__PURE__ */ jsx(
+                    SyntaxHighlighter,
+                    {
+                      PreTag: "div",
+                      language,
+                      style: activeStyle,
+                      customStyle: {
+                        backgroundColor: "transparent",
+                        borderRadius: 0,
+                        padding: "1rem",
+                        margin: 0,
+                        whiteSpace: "pre",
+                        minWidth: "100%",
+                        minHeight: "160px",
+                        fontFamily: 'ui-monospace, SFMono-Regular, Menlo, Monaco, "Cascadia Mono", "Courier New", monospace',
+                        fontSize: "13px",
+                        lineHeight: "1.5"
+                      },
+                      codeTagProps: {
+                        style: {
+                          fontFamily: 'ui-monospace, SFMono-Regular, Menlo, Monaco, "Cascadia Mono", "Courier New", monospace',
+                          fontSize: "13px",
+                          lineHeight: "1.5"
+                        }
+                      },
+                      children: editableValue || " "
+                    }
+                  )
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                Textarea,
+                {
+                  ref: editableTextareaRef,
+                  defaultValue: code,
+                  onChange: (e) => {
+                    setEditableValue(e.target.value);
+                    onChange?.(e.target.value);
+                  },
+                  onScroll: handleEditableScroll,
+                  spellCheck: false,
+                  style: {
+                    position: "relative",
+                    zIndex: 1,
+                    fontFamily: 'ui-monospace, SFMono-Regular, Menlo, Monaco, "Cascadia Mono", "Courier New", monospace',
+                    fontSize: "13px",
+                    lineHeight: "1.5",
+                    backgroundColor: "transparent",
+                    color: "transparent",
+                    caretColor: "#e6e6e6",
+                    borderRadius: hasHeader ? "0 0 0.5rem 0.5rem" : "0.5rem",
+                    border: "none",
+                    padding: "1rem",
+                    resize: "none",
+                    minHeight: "160px",
+                    maxHeight,
+                    width: "100%",
+                    height: "100%",
+                    outline: "none",
+                    whiteSpace: "pre",
+                    overflowWrap: "normal",
+                    overflow: "auto"
+                  }
+                },
+                editableTextareaKey
+              )
+            ]
           }
         )
       ) : /* @__PURE__ */ jsx(

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

@@ -24,10 +24,15 @@ export interface CodeBlockProps {
     /** 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).
+     * When true, render an editable surface that composes a transparent `Textarea`
+     * over a Prism-highlighted overlay. The overlay re-tokenizes on each keystroke
+     * (driven from a local mirror of the textarea value), so users see syntax-highlighted
+     * code while still being able to type. Folding is skipped in editable mode.
+     *
+     * History: GAP-51 first-cut shipped plain (no-highlighting) editable text;
+     * GAP-77 (2026-04-12) added the Prism overlay layer.
+     *
+     * Default: false (existing read-only behavior unchanged).
      */
     editable?: boolean;
     /**

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

@@ -34,5 +34,21 @@ export interface AvlOrbitalsCosmicZoomProps {
      * 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

@@ -29,15 +29,29 @@ export interface FlowCanvasProps {
     }) => 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
+     * 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

@@ -4108,6 +4108,26 @@ var CodeBlock = React114__namespace.default.memo(
     const codeRef = React114.useRef(null);
     const savedScrollLeftRef = React114.useRef(0);
     const [copied, setCopied] = React114.useState(false);
+    const [editableValue, setEditableValue] = React114.useState(code);
+    const [editableTextareaKey, setEditableTextareaKey] = React114.useState(0);
+    const lastPropCodeRef = React114.useRef(code);
+    const editableTextareaRef = React114.useRef(null);
+    const editableOverlayRef = React114.useRef(null);
+    React114.useEffect(() => {
+      if (code !== lastPropCodeRef.current) {
+        lastPropCodeRef.current = code;
+        setEditableValue(code);
+        setEditableTextareaKey((k) => k + 1);
+      }
+    }, [code]);
+    const handleEditableScroll = React114.useCallback(() => {
+      const ta = editableTextareaRef.current;
+      const ov = editableOverlayRef.current;
+      if (ta && ov) {
+        ov.scrollTop = ta.scrollTop;
+        ov.scrollLeft = ta.scrollLeft;
+      }
+    }, []);
     const isFoldable = foldableProp ?? (language === "orb" || language === "json");
     const [collapsed, setCollapsed] = React114.useState(() => /* @__PURE__ */ new Set());
     const foldRegions = React114.useMemo(
@@ -4268,33 +4288,106 @@ var CodeBlock = React114__namespace.default.memo(
         }
       ),
       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,
+        /* GAP-77: editable mode = transparent Textarea on top + Prism-highlighted
+                     overlay underneath. The textarea is uncontrolled (defaultValue + key)
+                     to avoid cursor jumps; the overlay reads `editableValue` which is
+                     mirrored from the textarea via onChange. Both elements share IDENTICAL
+                     font / line-height / padding so the highlighted text aligns with the
+                     textarea's invisible glyphs.
+        
+                     Scroll sync: the overlay has `pointer-events: none` and the textarea
+                     scrolls; `handleEditableScroll` keeps the overlay's scroll matched. */
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          Box,
           {
-            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",
+              position: "relative",
               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"
-            }
+              overflow: "hidden"
+            },
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "div",
+                {
+                  ref: editableOverlayRef,
+                  "aria-hidden": true,
+                  style: {
+                    position: "absolute",
+                    inset: 0,
+                    overflow: "hidden",
+                    pointerEvents: "none",
+                    maxHeight
+                  },
+                  children: /* @__PURE__ */ jsxRuntime.jsx(
+                    SyntaxHighlighter__default.default,
+                    {
+                      PreTag: "div",
+                      language,
+                      style: activeStyle,
+                      customStyle: {
+                        backgroundColor: "transparent",
+                        borderRadius: 0,
+                        padding: "1rem",
+                        margin: 0,
+                        whiteSpace: "pre",
+                        minWidth: "100%",
+                        minHeight: "160px",
+                        fontFamily: 'ui-monospace, SFMono-Regular, Menlo, Monaco, "Cascadia Mono", "Courier New", monospace',
+                        fontSize: "13px",
+                        lineHeight: "1.5"
+                      },
+                      codeTagProps: {
+                        style: {
+                          fontFamily: 'ui-monospace, SFMono-Regular, Menlo, Monaco, "Cascadia Mono", "Courier New", monospace',
+                          fontSize: "13px",
+                          lineHeight: "1.5"
+                        }
+                      },
+                      children: editableValue || " "
+                    }
+                  )
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                Textarea,
+                {
+                  ref: editableTextareaRef,
+                  defaultValue: code,
+                  onChange: (e) => {
+                    setEditableValue(e.target.value);
+                    onChange?.(e.target.value);
+                  },
+                  onScroll: handleEditableScroll,
+                  spellCheck: false,
+                  style: {
+                    position: "relative",
+                    zIndex: 1,
+                    fontFamily: 'ui-monospace, SFMono-Regular, Menlo, Monaco, "Cascadia Mono", "Courier New", monospace',
+                    fontSize: "13px",
+                    lineHeight: "1.5",
+                    backgroundColor: "transparent",
+                    color: "transparent",
+                    caretColor: "#e6e6e6",
+                    borderRadius: hasHeader ? "0 0 0.5rem 0.5rem" : "0.5rem",
+                    border: "none",
+                    padding: "1rem",
+                    resize: "none",
+                    minHeight: "160px",
+                    maxHeight,
+                    width: "100%",
+                    height: "100%",
+                    outline: "none",
+                    whiteSpace: "pre",
+                    overflowWrap: "normal",
+                    overflow: "auto"
+                  }
+                },
+                editableTextareaKey
+              )
+            ]
           }
         )
       ) : /* @__PURE__ */ jsxRuntime.jsx(