@almadar/ui 2.54.0 → 2.55.0

package/dist/runtime/index.cjs

@@ -10016,7 +10016,8 @@ var CodeBlock = React114__namespace.default.memo(
     foldable: foldableProp,
     className,
     editable = false,
-    onChange
+    onChange,
+    errorLines
   }) => {
     const code = typeof rawCode === "string" ? rawCode : String(rawCode ?? "");
     const isOrb = language === "orb";
@@ -10048,6 +10049,28 @@ var CodeBlock = React114__namespace.default.memo(
         ov.scrollLeft = ta.scrollLeft;
       }
     }, []);
+    const errorLineProps = React114.useMemo(() => {
+      if (!errorLines || errorLines.size === 0) {
+        return LINE_PROPS_FN;
+      }
+      return (lineNumber) => {
+        const severity = errorLines.get(lineNumber);
+        if (!severity) {
+          return { "data-line": String(lineNumber - 1) };
+        }
+        return {
+          "data-line": String(lineNumber - 1),
+          style: {
+            display: "block",
+            backgroundColor: severity === "error" ? "rgba(248, 113, 113, 0.18)" : "rgba(251, 191, 36, 0.18)",
+            // amber-400 @ 18%
+            borderLeft: `3px solid ${severity === "error" ? "#ef4444" : "#f59e0b"}`,
+            paddingLeft: "0.5rem",
+            marginLeft: "-0.5rem"
+          }
+        };
+      };
+    }, [errorLines]);
     const isFoldable = foldableProp ?? (language === "orb" || language === "json");
     const [collapsed, setCollapsed] = React114.useState(() => /* @__PURE__ */ new Set());
     const foldRegions = React114.useMemo(
@@ -10208,24 +10231,40 @@ var CodeBlock = React114__namespace.default.memo(
         }
       ),
       editable ? (
-        /* 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.
+        /* GAP-77 / GAP-82 / GAP-83: editable mode = transparent textarea on
+                     top of a Prism-highlighted SyntaxHighlighter overlay.
+        
+                     Layout: BOTH children are `position: absolute, inset: 0` so neither
+                     contributes to flow. The parent Box has `height: 100%` so it fills
+                     whatever container the consumer provides (the consumer is
+                     responsible for giving the parent a real height — usually via flex
+                     column with `minHeight: 0`).
+        
+                     Stacking: the overlay is FIRST in DOM order so it paints first
+                     (behind), the textarea is SECOND so it paints second (on top). No
+                     explicit z-index — DOM order alone determines stacking inside the
+                     parent's stacking context. The textarea has `color: transparent`
+                     plus `WebkitTextFillColor: transparent` (Safari) so its glyphs
+                     never paint, but the caret stays visible via `caretColor`.
         
-                     Scroll sync: the overlay has `pointer-events: none` and the textarea
-                     scrolls; `handleEditableScroll` keeps the overlay's scroll matched. */
+                     Scroll sync: textarea scrolls naturally; `handleEditableScroll`
+                     mirrors its scrollTop/scrollLeft onto the overlay div so the
+                     highlighted spans stay aligned with the textarea content.
+        
+                     Error highlights (GAP-80): `errorLines` prop accepts a Map of
+                     1-based line numbers → severity. The overlay's SyntaxHighlighter
+                     uses `wrapLines` + `lineProps` to paint a colored background on
+                     those lines. */
         /* @__PURE__ */ jsxRuntime.jsxs(
           Box,
           {
             style: {
               position: "relative",
-              backgroundColor: "#1e1e1e",
-              borderRadius: hasHeader ? "0 0 0.5rem 0.5rem" : "0.5rem",
+              height: "100%",
               minHeight: "160px",
               maxHeight,
+              backgroundColor: "#1e1e1e",
+              borderRadius: hasHeader ? "0 0 0.5rem 0.5rem" : "0.5rem",
               overflow: "hidden"
             },
             children: [
@@ -10236,10 +10275,12 @@ var CodeBlock = React114__namespace.default.memo(
                   "aria-hidden": true,
                   style: {
                     position: "absolute",
-                    inset: 0,
+                    top: 0,
+                    left: 0,
+                    width: "100%",
+                    height: "100%",
                     overflow: "hidden",
-                    pointerEvents: "none",
-                    maxHeight
+                    pointerEvents: "none"
                   },
                   children: /* @__PURE__ */ jsxRuntime.jsx(
                     SyntaxHighlighter__default.default,
@@ -10247,6 +10288,8 @@ var CodeBlock = React114__namespace.default.memo(
                       PreTag: "div",
                       language,
                       style: activeStyle,
+                      wrapLines: errorLines && errorLines.size > 0,
+                      lineProps: errorLineProps,
                       customStyle: {
                         backgroundColor: "transparent",
                         borderRadius: 0,
@@ -10254,7 +10297,6 @@ var CodeBlock = React114__namespace.default.memo(
                         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"
@@ -10283,23 +10325,23 @@ var CodeBlock = React114__namespace.default.memo(
                   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,
+                    position: "absolute",
+                    top: 0,
+                    left: 0,
                     width: "100%",
                     height: "100%",
+                    padding: "1rem",
+                    margin: 0,
+                    border: "none",
                     outline: "none",
+                    resize: "none",
+                    backgroundColor: "transparent",
+                    color: "transparent",
+                    caretColor: "#e6e6e6",
+                    WebkitTextFillColor: "transparent",
+                    fontFamily: 'ui-monospace, SFMono-Regular, Menlo, Monaco, "Cascadia Mono", "Courier New", monospace',
+                    fontSize: "13px",
+                    lineHeight: "1.5",
                     whiteSpace: "pre",
                     overflowWrap: "normal",
                     overflow: "auto"
@@ -10330,7 +10372,7 @@ var CodeBlock = React114__namespace.default.memo(
       )
     ] });
   },
-  (prev, next) => prev.language === next.language && prev.code === next.code && prev.showCopyButton === next.showCopyButton && prev.maxHeight === next.maxHeight && prev.foldable === next.foldable && prev.editable === next.editable && prev.onChange === next.onChange
+  (prev, next) => prev.language === next.language && prev.code === next.code && prev.showCopyButton === next.showCopyButton && prev.maxHeight === next.maxHeight && prev.foldable === next.foldable && prev.editable === next.editable && prev.onChange === next.onChange && prev.errorLines === next.errorLines
 );
 CodeBlock.displayName = "CodeBlock";
 

package/dist/runtime/index.js

@@ -9971,7 +9971,8 @@ var CodeBlock = React114__default.memo(
     foldable: foldableProp,
     className,
     editable = false,
-    onChange
+    onChange,
+    errorLines
   }) => {
     const code = typeof rawCode === "string" ? rawCode : String(rawCode ?? "");
     const isOrb = language === "orb";
@@ -10003,6 +10004,28 @@ var CodeBlock = React114__default.memo(
         ov.scrollLeft = ta.scrollLeft;
       }
     }, []);
+    const errorLineProps = useMemo(() => {
+      if (!errorLines || errorLines.size === 0) {
+        return LINE_PROPS_FN;
+      }
+      return (lineNumber) => {
+        const severity = errorLines.get(lineNumber);
+        if (!severity) {
+          return { "data-line": String(lineNumber - 1) };
+        }
+        return {
+          "data-line": String(lineNumber - 1),
+          style: {
+            display: "block",
+            backgroundColor: severity === "error" ? "rgba(248, 113, 113, 0.18)" : "rgba(251, 191, 36, 0.18)",
+            // amber-400 @ 18%
+            borderLeft: `3px solid ${severity === "error" ? "#ef4444" : "#f59e0b"}`,
+            paddingLeft: "0.5rem",
+            marginLeft: "-0.5rem"
+          }
+        };
+      };
+    }, [errorLines]);
     const isFoldable = foldableProp ?? (language === "orb" || language === "json");
     const [collapsed, setCollapsed] = useState(() => /* @__PURE__ */ new Set());
     const foldRegions = useMemo(
@@ -10163,24 +10186,40 @@ var CodeBlock = React114__default.memo(
         }
       ),
       editable ? (
-        /* 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.
+        /* GAP-77 / GAP-82 / GAP-83: editable mode = transparent textarea on
+                     top of a Prism-highlighted SyntaxHighlighter overlay.
+        
+                     Layout: BOTH children are `position: absolute, inset: 0` so neither
+                     contributes to flow. The parent Box has `height: 100%` so it fills
+                     whatever container the consumer provides (the consumer is
+                     responsible for giving the parent a real height — usually via flex
+                     column with `minHeight: 0`).
+        
+                     Stacking: the overlay is FIRST in DOM order so it paints first
+                     (behind), the textarea is SECOND so it paints second (on top). No
+                     explicit z-index — DOM order alone determines stacking inside the
+                     parent's stacking context. The textarea has `color: transparent`
+                     plus `WebkitTextFillColor: transparent` (Safari) so its glyphs
+                     never paint, but the caret stays visible via `caretColor`.
         
-                     Scroll sync: the overlay has `pointer-events: none` and the textarea
-                     scrolls; `handleEditableScroll` keeps the overlay's scroll matched. */
+                     Scroll sync: textarea scrolls naturally; `handleEditableScroll`
+                     mirrors its scrollTop/scrollLeft onto the overlay div so the
+                     highlighted spans stay aligned with the textarea content.
+        
+                     Error highlights (GAP-80): `errorLines` prop accepts a Map of
+                     1-based line numbers → severity. The overlay's SyntaxHighlighter
+                     uses `wrapLines` + `lineProps` to paint a colored background on
+                     those lines. */
         /* @__PURE__ */ jsxs(
           Box,
           {
             style: {
               position: "relative",
-              backgroundColor: "#1e1e1e",
-              borderRadius: hasHeader ? "0 0 0.5rem 0.5rem" : "0.5rem",
+              height: "100%",
               minHeight: "160px",
               maxHeight,
+              backgroundColor: "#1e1e1e",
+              borderRadius: hasHeader ? "0 0 0.5rem 0.5rem" : "0.5rem",
               overflow: "hidden"
             },
             children: [
@@ -10191,10 +10230,12 @@ var CodeBlock = React114__default.memo(
                   "aria-hidden": true,
                   style: {
                     position: "absolute",
-                    inset: 0,
+                    top: 0,
+                    left: 0,
+                    width: "100%",
+                    height: "100%",
                     overflow: "hidden",
-                    pointerEvents: "none",
-                    maxHeight
+                    pointerEvents: "none"
                   },
                   children: /* @__PURE__ */ jsx(
                     SyntaxHighlighter,
@@ -10202,6 +10243,8 @@ var CodeBlock = React114__default.memo(
                       PreTag: "div",
                       language,
                       style: activeStyle,
+                      wrapLines: errorLines && errorLines.size > 0,
+                      lineProps: errorLineProps,
                       customStyle: {
                         backgroundColor: "transparent",
                         borderRadius: 0,
@@ -10209,7 +10252,6 @@ var CodeBlock = React114__default.memo(
                         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"
@@ -10238,23 +10280,23 @@ var CodeBlock = React114__default.memo(
                   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,
+                    position: "absolute",
+                    top: 0,
+                    left: 0,
                     width: "100%",
                     height: "100%",
+                    padding: "1rem",
+                    margin: 0,
+                    border: "none",
                     outline: "none",
+                    resize: "none",
+                    backgroundColor: "transparent",
+                    color: "transparent",
+                    caretColor: "#e6e6e6",
+                    WebkitTextFillColor: "transparent",
+                    fontFamily: 'ui-monospace, SFMono-Regular, Menlo, Monaco, "Cascadia Mono", "Courier New", monospace',
+                    fontSize: "13px",
+                    lineHeight: "1.5",
                     whiteSpace: "pre",
                     overflowWrap: "normal",
                     overflow: "auto"
@@ -10285,7 +10327,7 @@ var CodeBlock = React114__default.memo(
       )
     ] });
   },
-  (prev, next) => prev.language === next.language && prev.code === next.code && prev.showCopyButton === next.showCopyButton && prev.maxHeight === next.maxHeight && prev.foldable === next.foldable && prev.editable === next.editable && prev.onChange === next.onChange
+  (prev, next) => prev.language === next.language && prev.code === next.code && prev.showCopyButton === next.showCopyButton && prev.maxHeight === next.maxHeight && prev.foldable === next.foldable && prev.editable === next.editable && prev.onChange === next.onChange && prev.errorLines === next.errorLines
 );
 CodeBlock.displayName = "CodeBlock";
 

package/package.json

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