@almadar/ui 2.54.0 → 2.55.0

package/dist/components/index.js

@@ -9166,7 +9166,8 @@ var CodeBlock = React90__default.memo(
     foldable: foldableProp,
     className,
     editable = false,
-    onChange
+    onChange,
+    errorLines
   }) => {
     const code = typeof rawCode === "string" ? rawCode : String(rawCode ?? "");
     const isOrb = language === "orb";
@@ -9198,6 +9199,28 @@ var CodeBlock = React90__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(
@@ -9358,24 +9381,40 @@ var CodeBlock = React90__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: [
@@ -9386,10 +9425,12 @@ var CodeBlock = React90__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,
@@ -9397,6 +9438,8 @@ var CodeBlock = React90__default.memo(
                       PreTag: "div",
                       language,
                       style: activeStyle,
+                      wrapLines: errorLines && errorLines.size > 0,
+                      lineProps: errorLineProps,
                       customStyle: {
                         backgroundColor: "transparent",
                         borderRadius: 0,
@@ -9404,7 +9447,6 @@ var CodeBlock = React90__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"
@@ -9433,23 +9475,23 @@ var CodeBlock = React90__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"
@@ -9480,7 +9522,7 @@ var CodeBlock = React90__default.memo(
       )
     ] });
   },
-  (prev, next) => prev.language === next.language && prev.code === next.code && prev.showCopyButton === next.showCopyButton && prev.maxHeight === next.maxHeight && prev.foldable === next.foldable && prev.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";
 init_Typography();

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

@@ -40,5 +40,13 @@ export interface CodeBlockProps {
      * Consumers should debounce + parse downstream — `CodeBlock` does not.
      */
     onChange?: (code: string) => void;
+    /**
+     * GAP-80: line-level error/warning highlights for editable mode.
+     * Map of 1-based line number → severity. The overlay paints a colored
+     * background on each line: error = red, warning = yellow. Pass undefined
+     * (default) to disable. The consumer is responsible for computing the
+     * path → line map from the schema + validation results.
+     */
+    errorLines?: Map<number, 'error' | 'warning'>;
 }
 export declare const CodeBlock: React.NamedExoticComponent<CodeBlockProps>;

package/dist/providers/index.cjs

@@ -4096,7 +4096,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";
@@ -4128,6 +4129,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(
@@ -4288,24 +4311,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: [
@@ -4316,10 +4355,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,
@@ -4327,6 +4368,8 @@ var CodeBlock = React114__namespace.default.memo(
                       PreTag: "div",
                       language,
                       style: activeStyle,
+                      wrapLines: errorLines && errorLines.size > 0,
+                      lineProps: errorLineProps,
                       customStyle: {
                         backgroundColor: "transparent",
                         borderRadius: 0,
@@ -4334,7 +4377,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"
@@ -4363,23 +4405,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"
@@ -4410,7 +4452,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/providers/index.js

@@ -4051,7 +4051,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";
@@ -4083,6 +4084,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(
@@ -4243,24 +4266,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: [
@@ -4271,10 +4310,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,
@@ -4282,6 +4323,8 @@ var CodeBlock = React114__default.memo(
                       PreTag: "div",
                       language,
                       style: activeStyle,
+                      wrapLines: errorLines && errorLines.size > 0,
+                      lineProps: errorLineProps,
                       customStyle: {
                         backgroundColor: "transparent",
                         borderRadius: 0,
@@ -4289,7 +4332,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"
@@ -4318,23 +4360,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"
@@ -4365,7 +4407,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";