@astryxdesign/core 0.7.1-canary.ff40b78 → 0.7.1

package/dist/CodeBlock/CodeBlock.js

@@ -15,9 +15,10 @@ import "../theme/tokens.stylex.js";
 import { colorVars, spacingVars, radiusVars, typographyVars, fontWeightVars, typeScaleVars, borderVars, durationVars, easeVars } from "../theme/tokens.stylex.js";
 import { mergeProps } from "../utils/index.js";
 import { useClipboard } from "../hooks/useClipboard.js";
+import { useScrollableArea } from "../hooks/useScrollableArea.js";
 import { Icon } from "../Icon/index.js";
 import { IconButton } from "../IconButton/index.js";
-import { tokenize, tokenizeAsync, flatTokensToLines, SYNC_TOKENIZE_THRESHOLD } from "./tokenizer.js";
+import { tokenize, tokenizeAsync, splitDiffLines, flatTokensToLines, SYNC_TOKENIZE_THRESHOLD } from "./tokenizer.js";
 import { ensureHighlightStyles } from "./highlightStyles.js";
 import { applyHighlightRangesChunked } from "./highlightRanges.js";
 import { themeProps } from "../utils/themeProps.js";
@@ -114,6 +115,7 @@ const styles = {
   code: {
     k1xSpc: "x1lliihq",
     kUk6DE: "x98rzlu",
+    k7Eaqz: "xk8lq53",
     k8WAf4: "x8o8v82",
     kg3NbH: "x1pzlopt",
     kogj98: "x1ghz6dp",
@@ -126,6 +128,7 @@ const styles = {
     $$css: true
   },
   codeWrapped: {
+    k7Eaqz: "x15x72sd",
     khDVqt: "x126k92a",
     kTgw9: "x1yn0g08",
     kHjlTd: "x1mzt3pk",
@@ -144,6 +147,61 @@ const styles = {
     kloYau: "x2q1x1w",
     $$css: true
   },
+  line: {
+    kLWn49: "x17iicif",
+    $$css: true
+  },
+  lineNumbered: {
+    k1xSpc: "xrvj5dj",
+    kumcoG: "x1xx4m37",
+    k1C7PZ: "xf5zn4v",
+    kgeoSG: "x46gnpd",
+    krRUto: "x17gn2l9",
+    kOrBnS: "x19ds33d",
+    kKZZS1: "x1wnbjh8",
+    kxBb7d: "xtkarl4",
+    kUY6Iu: "x1rbqspl",
+    kQcDng: "x3nzp0f",
+    $$css: true
+  },
+  lineHighlighted: {
+    kWkggS: "xgcxg3y",
+    kUOVxO: "x1ng9b9t",
+    kg3NbH: "x1pzlopt",
+    $$css: true
+  },
+  lineAdded: {
+    kWkggS: "xjqijk9",
+    kUOVxO: "x1ng9b9t",
+    kg3NbH: "x1pzlopt",
+    kxBb7d: "x147exv5",
+    $$css: true
+  },
+  lineRemoved: {
+    kWkggS: "xv48ua2",
+    kUOVxO: "x1ng9b9t",
+    kg3NbH: "x1pzlopt",
+    kxBb7d: "x16hy5kr",
+    $$css: true
+  },
+  lineDiffHeader: {
+    kWkggS: "x11ds9ch",
+    kMwMTN: "xt5rlkq",
+    kUOVxO: "x1ng9b9t",
+    kg3NbH: "x1pzlopt",
+    $$css: true
+  },
+  lineDiff: {
+    k1xSpc: "xrvj5dj",
+    kumcoG: "xrnahuw",
+    k1C7PZ: "xak3so",
+    $$css: true
+  },
+  lineDiffNumbered: {
+    kumcoG: "x1v9b7p9",
+    k1C7PZ: "x1o1pmfc",
+    $$css: true
+  },
   sizeSm: {
     kGuDYH: "x141an7d",
     $$css: true
@@ -178,40 +236,34 @@ const CodeChunk = /*#__PURE__*/React.memo(function CodeChunk({
   lines,
   startIndex,
   highlightSet,
+  diffKinds,
   renderLineContent,
   lineNumbers
 }) {
   return /*#__PURE__*/_jsx(_Fragment, {
     children: lines.map((line, j) => {
       const i = startIndex + j;
+      const diffKind = diffKinds?.[i];
       return /*#__PURE__*/_jsx("div", {
         "data-line": i + 1,
-        ...{
-          0: {
-            className: "x17iicif"
-          },
-          2: {
-            className: "x17iicif xrvj5dj x1xx4m37 xf5zn4v x46gnpd x17gn2l9 x19ds33d x1wnbjh8 xtkarl4 x1rbqspl x3nzp0f"
-          },
-          1: {
-            className: "x17iicif xgcxg3y x1ng9b9t x1pzlopt"
-          },
-          3: {
-            className: "x17iicif xrvj5dj x1xx4m37 xf5zn4v x46gnpd x17gn2l9 x19ds33d x1wnbjh8 xtkarl4 x1rbqspl x3nzp0f xgcxg3y x1ng9b9t x1pzlopt"
-          }
-        }[!!lineNumbers << 1 | !!(highlightSet?.has(i + 1) ?? false) << 0],
+        "data-diff": diffKind === 'context' ? undefined : diffKind,
+        ...stylex.props(styles.line, lineNumbers && styles.lineNumbered, diffKinds != null && styles.lineDiff, diffKinds != null && lineNumbers && styles.lineDiffNumbered, diffKind === 'added' && styles.lineAdded, diffKind === 'removed' && styles.lineRemoved, diffKind === 'header' && styles.lineDiffHeader,
+        // Last on purpose: a highlight replaces a diff tint rather than
+        // stacking on it, so tokens keep their single-paint contrast.
+        (highlightSet?.has(i + 1) ?? false) && styles.lineHighlighted),
         children: renderLineContent(line, i)
       }, i);
     })
   });
 });
-function renderLines(lines, highlightSet, renderLineContent, lineNumbers, chunkSize = LINE_CHUNK_SIZE) {
+function renderLines(lines, highlightSet, diffKinds, renderLineContent, lineNumbers, chunkSize = LINE_CHUNK_SIZE) {
   chunkSize = Math.max(1, Math.floor(chunkSize));
   if (lines.length < LINE_CHUNK_THRESHOLD) {
     return /*#__PURE__*/_jsx(CodeChunk, {
       lines: lines,
       startIndex: 0,
       highlightSet: highlightSet,
+      diffKinds: diffKinds,
       renderLineContent: renderLineContent,
       lineNumbers: lineNumbers
     });
@@ -233,6 +285,7 @@ function renderLines(lines, highlightSet, renderLineContent, lineNumbers, chunkS
         lines: chunkLines,
         startIndex: start,
         highlightSet: highlightSet,
+        diffKinds: diffKinds,
         renderLineContent: renderLineContent,
         lineNumbers: lineNumbers
       })
@@ -349,6 +402,8 @@ function SpanCodeContent({
   lines,
   tokenLines,
   highlightSet,
+  diffKinds,
+  diff,
   isWrapped,
   sizeStyle,
   hasLineNumbers,
@@ -359,6 +414,49 @@ function SpanCodeContent({
   }, []);
   const renderLineContent = useCallback((line, lineIndex) => {
     const tokens = tokenLines[lineIndex] ?? [];
+    if (diff) {
+      // Header rows show their raw text; every other row shows its glyph in
+      // the marker column and the base-language tokens of the rest.
+      const kind = diff.kinds[lineIndex];
+      const content = kind === 'header' ? line : diff.content[lineIndex];
+      return /*#__PURE__*/_jsxs(_Fragment, {
+        children: [/*#__PURE__*/_jsx("span", {
+          "data-diff-marker": "",
+          ...{
+            0: {
+              className: "xv1l7n4 x87ps6o x1sdyfia"
+            },
+            4: {
+              className: "xv1l7n4 x87ps6o x1sdyfia x6w1cxl x1pezmd8"
+            },
+            2: {
+              className: "x87ps6o x1sdyfia x1wxerb0"
+            },
+            6: {
+              className: "x87ps6o x1sdyfia x6w1cxl x1pezmd8 x1wxerb0"
+            },
+            1: {
+              className: "x87ps6o x1sdyfia x103bwea"
+            },
+            5: {
+              className: "x87ps6o x1sdyfia x6w1cxl x1pezmd8 x103bwea"
+            },
+            3: {
+              className: "x87ps6o x1sdyfia x103bwea"
+            },
+            7: {
+              className: "x87ps6o x1sdyfia x6w1cxl x1pezmd8 x103bwea"
+            }
+          }[!!hasLineNumbers << 2 | !!(kind === 'added') << 1 | !!(kind === 'removed') << 0],
+          children: diff.glyphs[lineIndex] || ' '
+        }), /*#__PURE__*/_jsx("span", {
+          ...{
+            className: "xeuugli"
+          },
+          children: kind === 'header' ? content || '\u200b' : buildSpanLine(content, tokens)
+        })]
+      });
+    }
     // Wrap tokens in a single element so they occupy one grid cell when line
     // numbers are on (see `lineNumbered`); an inline span is a no-op when off.
     return /*#__PURE__*/_jsx("span", {
@@ -367,10 +465,10 @@ function SpanCodeContent({
       },
       children: buildSpanLine(line, tokens)
     });
-  }, [tokenLines]);
+  }, [tokenLines, diff, hasLineNumbers]);
   return /*#__PURE__*/_jsx("code", {
     ...stylex.props(styles.code, sizeStyle, isWrapped && styles.codeWrapped, hasLineNumbers && styles.codeNumbered, hasLineNumbers && dynamicStyles.gutterWidth(maxDigits)),
-    children: renderLines(lines, highlightSet, renderLineContent, hasLineNumbers)
+    children: renderLines(lines, highlightSet, diffKinds, renderLineContent, hasLineNumbers)
   });
 }
 
@@ -382,6 +480,7 @@ function RangeCodeContent({
   lines,
   tokenLines,
   highlightSet,
+  diffKinds,
   isWrapped,
   sizeStyle,
   hasLineNumbers,
@@ -407,7 +506,7 @@ function RangeCodeContent({
   return /*#__PURE__*/_jsx("code", {
     ref: codeRef,
     ...stylex.props(styles.code, sizeStyle, isWrapped && styles.codeWrapped, hasLineNumbers && styles.codeNumbered, hasLineNumbers && dynamicStyles.gutterWidth(maxDigits)),
-    children: renderLines(lines, highlightSet, renderLineContent, hasLineNumbers)
+    children: renderLines(lines, highlightSet, diffKinds, renderLineContent, hasLineNumbers)
   });
 }
 
@@ -431,6 +530,7 @@ export function CodeBlock({
   hasLanguageLabel = true,
   hasLineNumbers = false,
   highlightLines,
+  isDiff = false,
   hasCopyButton = true,
   onCopy,
   isWrapped = false,
@@ -459,7 +559,7 @@ export function CodeBlock({
   } = useClipboard({
     announce: t('@astryx.codeBlock.copied')
   });
-  const useSpans = highlightMode === 'spans' || highlightMode === 'auto' && !hasHighlightAPI() || highlightMode === 'auto' && isSafari();
+  const useSpans = isDiff || highlightMode === 'spans' || highlightMode === 'auto' && !hasHighlightAPI() || highlightMode === 'auto' && isSafari();
   const lines = useMemo(() => {
     const l = code.split('\n');
     if (l.length > 1 && l[l.length - 1] === '') {
@@ -467,7 +567,13 @@ export function CodeBlock({
     }
     return l;
   }, [code]);
-  const tokenLines = useTokenLines(code, language, customTokenizer);
+
+  // In diff mode the base language sees the code with the glyph column set
+  // aside, so a `tsx` diff still highlights as `tsx` on every line; headers
+  // contribute an empty line and are rendered as their raw text.
+  const diff = useMemo(() => isDiff ? splitDiffLines(lines) : null, [isDiff, lines]);
+  const tokenLines = useTokenLines(diff ? diff.content.join('\n') : code, language, customTokenizer);
+  const diffKinds = diff?.kinds ?? null;
   const highlightSet = useMemo(() => highlightLines ? new Set(highlightLines) : null, [highlightLines]);
   const handleCopy = useCallback(async () => {
     const didCopy = await copy(code);
@@ -478,7 +584,10 @@ export function CodeBlock({
   const sizeStyle = size === 'sm' ? styles.sizeSm : styles.sizeMd;
   // Digits in the largest line number — sizes the gutter column width.
   const maxLineDigits = String(lines.length).length;
-  const languageLabel = hasLanguageLabel && language !== 'plaintext' ? language : null;
+  // With the diff layer on, the label and viewport name say so: `diff` over
+  // plaintext, `tsx diff` over a language — so a diff keeps its header,
+  // collapse control, and a name that still matches a `diff` fence.
+  const languageLabel = !hasLanguageLabel ? null : isDiff ? language === 'plaintext' ? 'diff' : `${language} diff` : language !== 'plaintext' ? language : null;
   const showHeader = title != null || languageLabel != null;
 
   // A collapsed body must never outlive the visible header that controls it.
@@ -494,7 +603,23 @@ export function CodeBlock({
   // pattern). The region stays mounted when collapsed (CSS grid animation), so
   // this is always a resolvable reference — aria-controls can be unconditional.
   const regionId = useId();
-  const scrollContainerRef = useRef(null);
+
+  // The code viewport enters the Tab order only while its content actually
+  // overflows (AST-025 FR12–FR13): the shared scroll capability measures
+  // both axes, keeps focus where it is when overflow goes away, and owns the
+  // overflow declarations. role="group" (not "region") so several code
+  // blocks on a page don't create duplicate same-named landmarks.
+  const {
+    getViewportProps,
+    getContentProps
+  } = useScrollableArea({
+    axis: 'both',
+    keyboardAccess: {
+      owner: 'viewport',
+      role: 'group',
+      label: languageLabel ?? t('@astryx.codeBlock.code')
+    }
+  });
   const scrollStyle = maxHeight != null ? {
     maxHeight: typeof maxHeight === 'number' ? `${maxHeight}px` : maxHeight
   } : undefined;
@@ -570,33 +695,27 @@ export function CodeBlock({
     }), copyButtonEl]
   }) : null;
   const codeBody = /*#__PURE__*/_jsx("div", {
-    ref: scrollContainerRef
-    // The scroll container is keyboard-focusable so keyboard users can
-    // scroll long or wide code that overflows the viewport. Uses
-    // role="group" (not "region") so multiple code blocks on a page don't
-    // create duplicate same-named landmarks (axe: landmark-unique).
-    ,
-    tabIndex: 0,
-    role: "group",
-    "aria-label": languageLabel ?? t('@astryx.codeBlock.code'),
-    ...mergeProps({
-      className: "xw2csxc x1odjw0f"
-    }, {
+    ...getViewportProps({
+      ...{
+        className: "x2lwn1j"
+      },
       style: scrollStyle
     }),
     children: /*#__PURE__*/_jsx("div", {
-      ...{
+      ...getContentProps({
         0: {
           className: "x78zum5 x1pshirs"
         },
         1: {
           className: "x78zum5 x1pshirs x1ajqlyv"
         }
-      }[!!(showHeader && !hasLineNumbers) << 0],
+      }[!!(showHeader && !hasLineNumbers) << 0]),
       children: useSpans ? /*#__PURE__*/_jsx(SpanCodeContent, {
         lines: lines,
         tokenLines: tokenLines,
         highlightSet: highlightSet,
+        diffKinds: diffKinds,
+        diff: diff,
         isWrapped: isWrapped,
         sizeStyle: sizeStyle,
         hasLineNumbers: hasLineNumbers,
@@ -605,6 +724,7 @@ export function CodeBlock({
         lines: lines,
         tokenLines: tokenLines,
         highlightSet: highlightSet,
+        diffKinds: diffKinds,
         isWrapped: isWrapped,
         sizeStyle: sizeStyle,
         hasLineNumbers: hasLineNumbers,
@@ -625,7 +745,7 @@ export function CodeBlock({
       // While collapsed, the region is only hidden visually (0fr grid
       // row); inert also removes it from the tab order and accessibility
       // tree so keyboard users cannot Tab into the invisible scroll
-      // container (tabIndex=0). aria-controls pointing at an inert
+      // container (a tab stop while it overflows). aria-controls pointing at an inert
       // element remains a valid, resolvable reference.
       ,
       inert: isCollapsed ? true : undefined,

package/dist/CodeBlock/tokenizer.d.ts

@@ -8,6 +8,45 @@ export type SyntaxToken = {
  * line-relative start/end offsets (0 = start of line).
  */
 export type TokenLine = SyntaxToken[];
+/** How a unified-diff line reads: what it adds, removes, frames, or keeps. */
+export type DiffLineKind = 'added' | 'removed' | 'header' | 'context';
+/**
+ * Read a Markdown fence info string the way CodeBlock renders it: `diff` is
+ * the diff layer over plaintext, `diff-<lang>` (the common convention) is the
+ * diff layer over `<lang>`, anything else is a language.
+ */
+export declare function parseFenceLanguage(info: string | undefined): {
+    language: string;
+    isDiff: boolean;
+};
+/**
+ * Split a diff into the glyph column and the code the base language sees:
+ * every added, removed, or space-led context line loses its first character
+ * (the `+`, `-`, or space); a context line with no leading space keeps all
+ * of it; header lines contribute an empty line so offsets stay per line.
+ */
+export declare function splitDiffLines(lines: ReadonlyArray<string>): {
+    kinds: DiffLineKind[];
+    glyphs: string[];
+    content: string[];
+};
+/**
+ * Classify one line of a unified diff by its first character: `+` added,
+ * `-` removed, `@@` header, anything else context. A `--- ` line (with its
+ * space) directly followed by a `+++ ` line and then an `@@` line is a file
+ * header (both lines), wherever it occurs; every other `---`/`+++` line is
+ * removed or added, so a removed line that starts with `--` — `---i;`
+ * included — is never misread. The glyph is part of the text and is never
+ * removed.
+ */
+export declare function diffLineKind(line: string, { isFileHeader }?: {
+    isFileHeader?: boolean;
+}): DiffLineKind;
+/**
+ * The indexes of the `--- `/`+++ ` lines (unified-diff form, with the space)
+ * that form a file header directly before an `@@`; `---i;` is a change.
+ */
+export declare function fileHeaderLines(lines: ReadonlyArray<string>): Set<number>;
 /** Threshold below which we tokenize synchronously (characters). */
 export declare const SYNC_TOKENIZE_THRESHOLD = 2000;
 /**

package/dist/CodeBlock/tokenizer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tokenizer.d.ts","sourceRoot":"","sources":["../../src/CodeBlock/tokenizer.ts"],"names":[],"mappings":"AAmBA,MAAM,MAAM,WAAW,GAAG;IAAC,IAAI,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAC;IAAC,GAAG,EAAE,MAAM,CAAA;CAAC,CAAC;AAErE;;;GAGG;AACH,MAAM,MAAM,SAAS,GAAG,WAAW,EAAE,CAAC;AAsStC,oEAAoE;AACpE,eAAO,MAAM,uBAAuB,OAAO,CAAC;AA+D5C;;;;;;;;;GASG;AACH,wBAAgB,QAAQ,CAAC,IAAI,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,GAAG,SAAS,EAAE,CAiBpE;AAED;;;GAGG;AACH,wBAAsB,aAAa,CACjC,IAAI,EAAE,MAAM,EACZ,QAAQ,EAAE,MAAM,EAChB,MAAM,CAAC,EAAE,WAAW,GACnB,OAAO,CAAC,SAAS,EAAE,CAAC,CA2BtB;AAED;;;;GAIG;AACH,wBAAsB,iBAAiB,CACrC,IAAI,EAAE,MAAM,EACZ,QAAQ,EAAE,MAAM,EAChB,OAAO,EAAE,CAAC,KAAK,EAAE,SAAS,EAAE,EAAE,SAAS,EAAE,MAAM,KAAK,IAAI,EACxD,MAAM,CAAC,EAAE,WAAW,GACnB,OAAO,CAAC,IAAI,CAAC,CAmCf;AAED;;;;GAIG;AACH,wBAAgB,iBAAiB,CAC/B,MAAM,EAAE;IAAC,IAAI,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAC;IAAC,GAAG,EAAE,MAAM,CAAA;CAAC,EAAE,EACpD,IAAI,EAAE,MAAM,GACX,SAAS,EAAE,CA4Bb"}
+{"version":3,"file":"tokenizer.d.ts","sourceRoot":"","sources":["../../src/CodeBlock/tokenizer.ts"],"names":[],"mappings":"AAmBA,MAAM,MAAM,WAAW,GAAG;IAAC,IAAI,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAC;IAAC,GAAG,EAAE,MAAM,CAAA;CAAC,CAAC;AAErE;;;GAGG;AACH,MAAM,MAAM,SAAS,GAAG,WAAW,EAAE,CAAC;AAsStC,8EAA8E;AAC9E,MAAM,MAAM,YAAY,GAAG,OAAO,GAAG,SAAS,GAAG,QAAQ,GAAG,SAAS,CAAC;AAEtE;;;;GAIG;AACH,wBAAgB,kBAAkB,CAAC,IAAI,EAAE,MAAM,GAAG,SAAS,GAAG;IAC5D,QAAQ,EAAE,MAAM,CAAC;IACjB,MAAM,EAAE,OAAO,CAAC;CACjB,CAUA;AAED;;;;;GAKG;AACH,wBAAgB,cAAc,CAAC,KAAK,EAAE,aAAa,CAAC,MAAM,CAAC,GAAG;IAC5D,KAAK,EAAE,YAAY,EAAE,CAAC;IACtB,MAAM,EAAE,MAAM,EAAE,CAAC;IACjB,OAAO,EAAE,MAAM,EAAE,CAAC;CACnB,CAuBA;AAED;;;;;;;;GAQG;AACH,wBAAgB,YAAY,CAC1B,IAAI,EAAE,MAAM,EACZ,EAAC,YAAoB,EAAC,GAAE;IAAC,YAAY,CAAC,EAAE,OAAO,CAAA;CAAM,GACpD,YAAY,CAWd;AAED;;;GAGG;AACH,wBAAgB,eAAe,CAAC,KAAK,EAAE,aAAa,CAAC,MAAM,CAAC,GAAG,GAAG,CAAC,MAAM,CAAC,CAazE;AAMD,oEAAoE;AACpE,eAAO,MAAM,uBAAuB,OAAO,CAAC;AA+D5C;;;;;;;;;GASG;AACH,wBAAgB,QAAQ,CAAC,IAAI,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,GAAG,SAAS,EAAE,CAiBpE;AAED;;;GAGG;AACH,wBAAsB,aAAa,CACjC,IAAI,EAAE,MAAM,EACZ,QAAQ,EAAE,MAAM,EAChB,MAAM,CAAC,EAAE,WAAW,GACnB,OAAO,CAAC,SAAS,EAAE,CAAC,CA2BtB;AAED;;;;GAIG;AACH,wBAAsB,iBAAiB,CACrC,IAAI,EAAE,MAAM,EACZ,QAAQ,EAAE,MAAM,EAChB,OAAO,EAAE,CAAC,KAAK,EAAE,SAAS,EAAE,EAAE,SAAS,EAAE,MAAM,KAAK,IAAI,EACxD,MAAM,CAAC,EAAE,WAAW,GACnB,OAAO,CAAC,IAAI,CAAC,CAmCf;AAED;;;;GAIG;AACH,wBAAgB,iBAAiB,CAC/B,MAAM,EAAE;IAAC,IAAI,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAC;IAAC,GAAG,EAAE,MAAM,CAAA;CAAC,EAAE,EACpD,IAAI,EAAE,MAAM,GACX,SAAS,EAAE,CA4Bb"}

package/dist/CodeBlock/tokenizer.js

@@ -524,6 +524,114 @@ function buildLanguagePatterns(lang) {
   }
 }
 
+// ---------------------------------------------------------------------------
+// Diff lines
+// ---------------------------------------------------------------------------
+
+/** How a unified-diff line reads: what it adds, removes, frames, or keeps. */
+
+/**
+ * Read a Markdown fence info string the way CodeBlock renders it: `diff` is
+ * the diff layer over plaintext, `diff-<lang>` (the common convention) is the
+ * diff layer over `<lang>`, anything else is a language.
+ */
+export function parseFenceLanguage(info) {
+  const value = (info ?? '').trim();
+  if (value === 'diff') {
+    return {
+      language: 'plaintext',
+      isDiff: true
+    };
+  }
+  const layered = /^diff-(.+)$/.exec(value);
+  if (layered) {
+    return {
+      language: layered[1],
+      isDiff: true
+    };
+  }
+  return {
+    language: value || 'plaintext',
+    isDiff: false
+  };
+}
+
+/**
+ * Split a diff into the glyph column and the code the base language sees:
+ * every added, removed, or space-led context line loses its first character
+ * (the `+`, `-`, or space); a context line with no leading space keeps all
+ * of it; header lines contribute an empty line so offsets stay per line.
+ */
+export function splitDiffLines(lines) {
+  const kinds = [];
+  const glyphs = [];
+  const content = [];
+  const fileHeaders = fileHeaderLines(lines);
+  lines.forEach((line, index) => {
+    const kind = diffLineKind(line, {
+      isFileHeader: fileHeaders.has(index)
+    });
+    kinds.push(kind);
+    if (kind === 'header') {
+      glyphs.push('');
+      content.push('');
+    } else if (kind === 'context' && !line.startsWith(' ')) {
+      // A context line without its leading space (an unindented diff, or
+      // an empty line) has no glyph: the marker column is empty and the
+      // whole line is code.
+      glyphs.push('');
+      content.push(line);
+    } else {
+      glyphs.push(line.slice(0, 1));
+      content.push(line.slice(1));
+    }
+  });
+  return {
+    kinds,
+    glyphs,
+    content
+  };
+}
+
+/**
+ * Classify one line of a unified diff by its first character: `+` added,
+ * `-` removed, `@@` header, anything else context. A `--- ` line (with its
+ * space) directly followed by a `+++ ` line and then an `@@` line is a file
+ * header (both lines), wherever it occurs; every other `---`/`+++` line is
+ * removed or added, so a removed line that starts with `--` — `---i;`
+ * included — is never misread. The glyph is part of the text and is never
+ * removed.
+ */
+export function diffLineKind(line, {
+  isFileHeader = false
+} = {}) {
+  if (line.startsWith('@@') || isFileHeader) {
+    return 'header';
+  }
+  if (line.startsWith('+')) {
+    return 'added';
+  }
+  if (line.startsWith('-')) {
+    return 'removed';
+  }
+  return 'context';
+}
+
+/**
+ * The indexes of the `--- `/`+++ ` lines (unified-diff form, with the space)
+ * that form a file header directly before an `@@`; `---i;` is a change.
+ */
+export function fileHeaderLines(lines) {
+  const headers = new Set();
+  for (let i = 0; i + 2 < lines.length; i++) {
+    if (lines[i].startsWith('--- ') && lines[i + 1].startsWith('+++ ') && lines[i + 2].startsWith('@@')) {
+      headers.add(i);
+      headers.add(i + 1);
+    }
+  }
+  return headers;
+}
+
 // ---------------------------------------------------------------------------
 // Core tokenizer
 // ---------------------------------------------------------------------------

package/dist/CommandPalette/CommandPalette.d.ts

@@ -1,6 +1,7 @@
 /**
  * @file CommandPalette.tsx
- * @input Uses React, Dialog, Layout, CommandPaletteContext, SearchSource, useCombobox, useAnnounce
+ * @input Uses React, Dialog, Layout, CommandPaletteContext, SearchSource,
+ *   useCombobox, useAnnounce, useAnnounceRenderedText
  * @output Exports CommandPalette root component and props
  * @position Core root component; dialog shell with searchSource-driven items
  *
@@ -42,7 +43,9 @@ export interface CommandPaletteProps<T extends SearchableItem = SearchableItem>
     footer?: ReactNode;
     /**
      * Per-item render function. Receives the item and whether it is currently selected.
-     * Auto-grouping by `auxiliaryData.group` is preserved.
+     * Return non-interactive presentation content; buttons and links cannot be
+     * nested inside the rendered option. Auto-grouping by `auxiliaryData.group`
+     * is preserved.
      * When omitted, renders each item's `label` text.
      */
     renderItem?: (item: T, isSelected: boolean) => ReactNode;
@@ -82,9 +85,10 @@ export interface CommandPaletteProps<T extends SearchableItem = SearchableItem>
  * Uses `searchSource` for all search logic — same interface as Typeahead.
  * For static lists, use `createStaticSource` from `@astryxdesign/core/Typeahead`.
  *
- * Keyboard navigation is handled by `useCombobox` from Selector,
- * ensuring consistent arrow key, Home/End, Enter, and Escape behavior
- * across all combobox-pattern components.
+ * Keyboard navigation is handled by `useCombobox` from Selector for arrows,
+ * PageUp/PageDown, and Enter. Home/End remain native caret keys. Modal Escape
+ * dismissal delegates to Dialog's shared layer stack so nested surfaces handle
+ * the first press.
  *
  * Input and footer are rendered by default — only pass them to replace the defaults.
  *

package/dist/CommandPalette/CommandPalette.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CommandPalette.d.ts","sourceRoot":"","sources":["../../src/CommandPalette/CommandPalette.tsx"],"names":[],"mappings":"AAGA;;;;;;;;;GASG;AAEH,OAAO,EASL,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAGf,OAAO,KAAK,EAAC,YAAY,EAAE,cAAc,EAAC,MAAM,cAAc,CAAC;AAU/D,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAI5C,MAAM,WAAW,mBAAmB,CAClC,CAAC,SAAS,cAAc,GAAG,cAAc,CACzC,SAAQ,IAAI,CAAC,SAAS,CAAC,iBAAiB,CAAC,EAAE,UAAU,CAAC;IACtD,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,CAAC;IACnC,2CAA2C;IAC3C,MAAM,EAAE,OAAO,CAAC;IAEhB;;;;;OAKG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,0DAA0D;IAC1D,YAAY,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IAExC;;;;OAIG;IACH,YAAY,EAAE,YAAY,CAAC,CAAC,CAAC,CAAC;IAE9B;;;OAGG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAElB;;;OAGG;IACH,MAAM,CAAC,EAAE,SAAS,CAAC;IAEnB;;;;OAIG;IACH,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,EAAE,UAAU,EAAE,OAAO,KAAK,SAAS,CAAC;IAEzD;;;OAGG;IACH,eAAe,CAAC,EAAE,SAAS,CAAC;IAE5B;;;OAGG;IACH,kBAAkB,CAAC,EAAE,SAAS,CAAC;IAE/B,mDAAmD;IACnD,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf,8CAA8C;IAC9C,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAExC;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAExB;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CAC7B;AAiID;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,wBAAgB,cAAc,CAAC,CAAC,SAAS,cAAc,GAAG,cAAc,EAAE,EACxE,GAAG,EACH,MAAM,EACN,QAAQ,EACR,YAAY,EACZ,YAAY,EACZ,KAAK,EACL,MAAM,EACN,UAAU,EACV,eAAe,EAAE,wBAAwB,EACzC,kBAAkB,EAAE,2BAA2B,EAC/C,KAAK,EAAE,eAAe,EACtB,aAAa,EACb,KAAK,EAAE,cAAc,EACrB,KAAW,EACX,SAAe,EACf,GAAG,IAAI,EACR,EAAE,mBAAmB,CAAC,CAAC,CAAC,+BAsXxB;yBAvYe,cAAc"}
+{"version":3,"file":"CommandPalette.d.ts","sourceRoot":"","sources":["../../src/CommandPalette/CommandPalette.tsx"],"names":[],"mappings":"AAGA;;;;;;;;;;GAUG;AAEH,OAAO,EASL,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAGf,OAAO,KAAK,EAAC,YAAY,EAAE,cAAc,EAAC,MAAM,cAAc,CAAC;AAU/D,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAK5C,MAAM,WAAW,mBAAmB,CAClC,CAAC,SAAS,cAAc,GAAG,cAAc,CACzC,SAAQ,IAAI,CAAC,SAAS,CAAC,iBAAiB,CAAC,EAAE,UAAU,CAAC;IACtD,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,iBAAiB,CAAC,CAAC;IACnC,2CAA2C;IAC3C,MAAM,EAAE,OAAO,CAAC;IAEhB;;;;;OAKG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB,0DAA0D;IAC1D,YAAY,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IAExC;;;;OAIG;IACH,YAAY,EAAE,YAAY,CAAC,CAAC,CAAC,CAAC;IAE9B;;;OAGG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAElB;;;OAGG;IACH,MAAM,CAAC,EAAE,SAAS,CAAC;IAEnB;;;;;;OAMG;IACH,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,EAAE,UAAU,EAAE,OAAO,KAAK,SAAS,CAAC;IAEzD;;;OAGG;IACH,eAAe,CAAC,EAAE,SAAS,CAAC;IAE5B;;;OAGG;IACH,kBAAkB,CAAC,EAAE,SAAS,CAAC;IAE/B,mDAAmD;IACnD,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf,8CAA8C;IAC9C,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAExC;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAExB;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CAC7B;AAiID;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,wBAAgB,cAAc,CAAC,CAAC,SAAS,cAAc,GAAG,cAAc,EAAE,EACxE,GAAG,EACH,MAAM,EACN,QAAQ,EACR,YAAY,EACZ,YAAY,EACZ,KAAK,EACL,MAAM,EACN,UAAU,EACV,eAAe,EAAE,wBAAwB,EACzC,kBAAkB,EAAE,2BAA2B,EAC/C,KAAK,EAAE,eAAe,EACtB,aAAa,EACb,KAAK,EAAE,cAAc,EACrB,KAAW,EACX,SAAe,EACf,GAAG,IAAI,EACR,EAAE,mBAAmB,CAAC,CAAC,CAAC,+BA2YxB;yBA5Ze,cAAc"}