@almadar/ui 2.54.0 → 2.55.1

package/dist/components/index.js

@@ -12,25 +12,25 @@ import ReactMarkdown from 'react-markdown';
 import remarkGfm from 'remark-gfm';
 import remarkMath from 'remark-math';
 import rehypeKatex from 'rehype-katex';
-import SyntaxHighlighter from 'react-syntax-highlighter/dist/esm/prism-light';
-import dark from 'react-syntax-highlighter/dist/esm/styles/prism/vsc-dark-plus';
+import SyntaxHighlighter from 'react-syntax-highlighter/dist/esm/prism-light.js';
+import dark from 'react-syntax-highlighter/dist/esm/styles/prism/vsc-dark-plus.js';
 import { orbLanguage, loloLanguage, ORB_COLORS } from '@almadar/syntax';
-import langJson from 'react-syntax-highlighter/dist/esm/languages/prism/json';
-import langJavascript from 'react-syntax-highlighter/dist/esm/languages/prism/javascript';
-import langTypescript from 'react-syntax-highlighter/dist/esm/languages/prism/typescript';
-import langJsx from 'react-syntax-highlighter/dist/esm/languages/prism/jsx';
-import langTsx from 'react-syntax-highlighter/dist/esm/languages/prism/tsx';
-import langCss from 'react-syntax-highlighter/dist/esm/languages/prism/css';
-import langMarkdown from 'react-syntax-highlighter/dist/esm/languages/prism/markdown';
-import langBash from 'react-syntax-highlighter/dist/esm/languages/prism/bash';
-import langYaml from 'react-syntax-highlighter/dist/esm/languages/prism/yaml';
-import langRust from 'react-syntax-highlighter/dist/esm/languages/prism/rust';
-import langPython from 'react-syntax-highlighter/dist/esm/languages/prism/python';
-import langSql from 'react-syntax-highlighter/dist/esm/languages/prism/sql';
-import langDiff from 'react-syntax-highlighter/dist/esm/languages/prism/diff';
-import langToml from 'react-syntax-highlighter/dist/esm/languages/prism/toml';
-import langGo from 'react-syntax-highlighter/dist/esm/languages/prism/go';
-import langGraphql from 'react-syntax-highlighter/dist/esm/languages/prism/graphql';
+import langJson from 'react-syntax-highlighter/dist/esm/languages/prism/json.js';
+import langJavascript from 'react-syntax-highlighter/dist/esm/languages/prism/javascript.js';
+import langTypescript from 'react-syntax-highlighter/dist/esm/languages/prism/typescript.js';
+import langJsx from 'react-syntax-highlighter/dist/esm/languages/prism/jsx.js';
+import langTsx from 'react-syntax-highlighter/dist/esm/languages/prism/tsx.js';
+import langCss from 'react-syntax-highlighter/dist/esm/languages/prism/css.js';
+import langMarkdown from 'react-syntax-highlighter/dist/esm/languages/prism/markdown.js';
+import langBash from 'react-syntax-highlighter/dist/esm/languages/prism/bash.js';
+import langYaml from 'react-syntax-highlighter/dist/esm/languages/prism/yaml.js';
+import langRust from 'react-syntax-highlighter/dist/esm/languages/prism/rust.js';
+import langPython from 'react-syntax-highlighter/dist/esm/languages/prism/python.js';
+import langSql from 'react-syntax-highlighter/dist/esm/languages/prism/sql.js';
+import langDiff from 'react-syntax-highlighter/dist/esm/languages/prism/diff.js';
+import langToml from 'react-syntax-highlighter/dist/esm/languages/prism/toml.js';
+import langGo from 'react-syntax-highlighter/dist/esm/languages/prism/go.js';
+import langGraphql from 'react-syntax-highlighter/dist/esm/languages/prism/graphql.js';
 import { useUISlots } from '@almadar/ui/context';
 import { getComponentForPattern as getComponentForPattern$1 } from '@almadar/patterns';
 import { Link, Outlet, useLocation } from 'react-router-dom';
@@ -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

@@ -15,25 +15,25 @@ var ReactMarkdown = require('react-markdown');
 var remarkGfm = require('remark-gfm');
 var remarkMath = require('remark-math');
 var rehypeKatex = require('rehype-katex');
-var SyntaxHighlighter = require('react-syntax-highlighter/dist/esm/prism-light');
-var dark = require('react-syntax-highlighter/dist/esm/styles/prism/vsc-dark-plus');
+var SyntaxHighlighter = require('react-syntax-highlighter/dist/esm/prism-light.js');
+var dark = require('react-syntax-highlighter/dist/esm/styles/prism/vsc-dark-plus.js');
 var syntax = require('@almadar/syntax');
-var langJson = require('react-syntax-highlighter/dist/esm/languages/prism/json');
-var langJavascript = require('react-syntax-highlighter/dist/esm/languages/prism/javascript');
-var langTypescript = require('react-syntax-highlighter/dist/esm/languages/prism/typescript');
-var langJsx = require('react-syntax-highlighter/dist/esm/languages/prism/jsx');
-var langTsx = require('react-syntax-highlighter/dist/esm/languages/prism/tsx');
-var langCss = require('react-syntax-highlighter/dist/esm/languages/prism/css');
-var langMarkdown = require('react-syntax-highlighter/dist/esm/languages/prism/markdown');
-var langBash = require('react-syntax-highlighter/dist/esm/languages/prism/bash');
-var langYaml = require('react-syntax-highlighter/dist/esm/languages/prism/yaml');
-var langRust = require('react-syntax-highlighter/dist/esm/languages/prism/rust');
-var langPython = require('react-syntax-highlighter/dist/esm/languages/prism/python');
-var langSql = require('react-syntax-highlighter/dist/esm/languages/prism/sql');
-var langDiff = require('react-syntax-highlighter/dist/esm/languages/prism/diff');
-var langToml = require('react-syntax-highlighter/dist/esm/languages/prism/toml');
-var langGo = require('react-syntax-highlighter/dist/esm/languages/prism/go');
-var langGraphql = require('react-syntax-highlighter/dist/esm/languages/prism/graphql');
+var langJson = require('react-syntax-highlighter/dist/esm/languages/prism/json.js');
+var langJavascript = require('react-syntax-highlighter/dist/esm/languages/prism/javascript.js');
+var langTypescript = require('react-syntax-highlighter/dist/esm/languages/prism/typescript.js');
+var langJsx = require('react-syntax-highlighter/dist/esm/languages/prism/jsx.js');
+var langTsx = require('react-syntax-highlighter/dist/esm/languages/prism/tsx.js');
+var langCss = require('react-syntax-highlighter/dist/esm/languages/prism/css.js');
+var langMarkdown = require('react-syntax-highlighter/dist/esm/languages/prism/markdown.js');
+var langBash = require('react-syntax-highlighter/dist/esm/languages/prism/bash.js');
+var langYaml = require('react-syntax-highlighter/dist/esm/languages/prism/yaml.js');
+var langRust = require('react-syntax-highlighter/dist/esm/languages/prism/rust.js');
+var langPython = require('react-syntax-highlighter/dist/esm/languages/prism/python.js');
+var langSql = require('react-syntax-highlighter/dist/esm/languages/prism/sql.js');
+var langDiff = require('react-syntax-highlighter/dist/esm/languages/prism/diff.js');
+var langToml = require('react-syntax-highlighter/dist/esm/languages/prism/toml.js');
+var langGo = require('react-syntax-highlighter/dist/esm/languages/prism/go.js');
+var langGraphql = require('react-syntax-highlighter/dist/esm/languages/prism/graphql.js');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
@@ -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";