@almadar/ui 2.51.0 → 2.53.0

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.51.0",
+  "version": "2.53.0",
   "description": "React UI components, hooks, and providers for Almadar",
   "type": "module",
   "main": "./dist/components/index.js",