@almadar/ui 2.52.0 → 2.53.0

package/dist/avl/index.cjs

@@ -22132,6 +22132,26 @@ var CodeBlock = React125__namespace.default.memo(
     const codeRef = React125.useRef(null);
     const savedScrollLeftRef = React125.useRef(0);
     const [copied, setCopied] = React125.useState(false);
+    const [editableValue, setEditableValue] = React125.useState(code);
+    const [editableTextareaKey, setEditableTextareaKey] = React125.useState(0);
+    const lastPropCodeRef = React125.useRef(code);
+    const editableTextareaRef = React125.useRef(null);
+    const editableOverlayRef = React125.useRef(null);
+    React125.useEffect(() => {
+      if (code !== lastPropCodeRef.current) {
+        lastPropCodeRef.current = code;
+        setEditableValue(code);
+        setEditableTextareaKey((k) => k + 1);
+      }
+    }, [code]);
+    const handleEditableScroll = React125.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] = React125.useState(() => /* @__PURE__ */ new Set());
     const foldRegions = React125.useMemo(
@@ -22292,33 +22312,106 @@ var CodeBlock = React125__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(
@@ -48449,7 +48542,7 @@ function OrbInspector({ node, schema, editable = false, onSchemaChange, onClose
                   onBlur: (e) => handlePropChange(propName, e.target.value)
                 }
               ) : /* @__PURE__ */ jsxRuntime.jsxs(Typography, { variant: "small", className: "text-[11px] text-muted-foreground", children: [
-                displayValue || (ps.types?.join(" | ") ?? "string"),
+                displayValue || "\u2014",
                 ps.required ? " *" : ""
               ] })
             ] }, propName);

package/dist/avl/index.js

@@ -22086,6 +22086,26 @@ var CodeBlock = React125__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(
@@ -22246,33 +22266,106 @@ var CodeBlock = React125__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(
@@ -48403,7 +48496,7 @@ function OrbInspector({ node, schema, editable = false, onSchemaChange, onClose
                   onBlur: (e) => handlePropChange(propName, e.target.value)
                 }
               ) : /* @__PURE__ */ jsxs(Typography, { variant: "small", className: "text-[11px] text-muted-foreground", children: [
-                displayValue || (ps.types?.join(" | ") ?? "string"),
+                displayValue || "\u2014",
                 ps.required ? " *" : ""
               ] })
             ] }, propName);

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/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(

package/dist/providers/index.js

@@ -4063,6 +4063,26 @@ var CodeBlock = React114__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(
@@ -4223,33 +4243,106 @@ var CodeBlock = React114__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/runtime/index.cjs

@@ -10028,6 +10028,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(
@@ -10188,33 +10208,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(

package/dist/runtime/index.js

@@ -9983,6 +9983,26 @@ var CodeBlock = React114__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(
@@ -10143,33 +10163,106 @@ var CodeBlock = React114__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/package.json

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