@astryxdesign/core 0.7.5-canary.fccd771 → 0.7.5

package/dist/Chat/ChatComposerInput.js

@@ -152,6 +152,9 @@ export function ChatComposerInput(props) {
     style,
     ...rest
   } = props;
+  // Keep focus/blur observation available, but do not forward activation or
+  // editing callbacks from the disabled root (including capture handlers).
+  const rootProps = isDisabled ? Object.fromEntries(Object.entries(rest).filter(([key]) => !/^on[A-Z]/.test(key) || /^on(Focus|Blur)/.test(key))) : rest;
   const label = labelFromProps ?? t('@astryx.chat.composerInput.label');
   const placeholder = placeholderFromProps ?? composerCtx?.placeholder ?? t('@astryx.chat.composer.placeholder');
   const composerOnChange = composerCtx?.onChange;
@@ -185,6 +188,7 @@ export function ChatComposerInput(props) {
   // Stable refs for imperative handle callbacks (avoid re-creating handle on every render)
   const insertTokenRef = useRef(() => undefined);
   const insertTextRef = useRef(() => {});
+  const expandTokenRef = useRef(() => {});
 
   // A single handle object shared between the forwarded ref (via
   // `useImperativeHandle`) and `selfRef` (used by internal consumers
@@ -249,7 +253,7 @@ export function ChatComposerInput(props) {
   }, []);
   const handle = {
     insertToken: token => insertTokenRef.current(token),
-    expandToken: id => tokens.expandToken(id),
+    expandToken: id => expandTokenRef.current(id),
     insertText: text => insertTextRef.current(text),
     focus: focusEditable,
     getValue: () => serialize(editableRef.current ?? document.createElement('div'))
@@ -316,7 +320,7 @@ export function ChatComposerInput(props) {
   const cleanupPortalsRef = useRef(null);
   const emitChangeVersionRef = useRef(0);
   const emitChange = useCallback(() => {
-    if (!editableRef.current) {
+    if (isDisabled || !editableRef.current) {
       return;
     }
     const text = serialize(editableRef.current);
@@ -330,7 +334,7 @@ export function ChatComposerInput(props) {
     emitChangeVersionRef.current += 1;
     onChange?.(nextValue);
     cleanupPortalsRef.current?.();
-  }, [onChange]);
+  }, [isDisabled, onChange]);
 
   // --- Token management (via hook) ---
   const tokens = useChatComposerTokens({
@@ -356,9 +360,11 @@ export function ChatComposerInput(props) {
     emitChange();
   }, [emitChange, insertTextWithoutEmit]);
 
-  // Keep stable refs in sync for imperative handle
-  insertTokenRef.current = tokens.insertToken;
-  insertTextRef.current = insertText;
+  // A caller may retain a handle across renders. Resolve mutation permission
+  // through the latest callbacks rather than the render that created it.
+  insertTokenRef.current = isDisabled ? () => undefined : tokens.insertToken;
+  insertTextRef.current = isDisabled ? () => {} : insertText;
+  expandTokenRef.current = isDisabled ? () => {} : tokens.expandToken;
 
   // --- Trigger menu ---
   const triggerMenu = useTriggerMenu({
@@ -369,11 +375,34 @@ export function ChatComposerInput(props) {
     onEmitChange: emitChange,
     debounceMs
   });
+  const editorAriaProps = isDisabled && triggerMenu.ariaProps.role === 'combobox' ? {
+    ...triggerMenu.ariaProps,
+    'aria-expanded': false,
+    'aria-controls': undefined,
+    'aria-activedescendant': undefined
+  } : triggerMenu.ariaProps;
+  useEffect(() => {
+    if (isDisabled && triggerMenu.state.isActive) {
+      // Reset also cancels pending searches, so late results cannot reopen
+      // suggestions after disablement or a subsequent re-enable.
+      triggerMenu.reset();
+    }
+  }, [isDisabled, triggerMenu]);
   const handleInput = useCallback(() => {
+    if (isDisabled) {
+      return;
+    }
     emitChange();
     triggerMenu.handleInput();
-  }, [emitChange, triggerMenu]);
+  }, [isDisabled, emitChange, triggerMenu]);
   const handleKeyDown = useCallback(e => {
+    if (isDisabled) {
+      if (e.key === 'Enter' || e.key === ' ') {
+        e.preventDefault();
+      }
+      // Native selection, copying, and Tab navigation remain available.
+      return;
+    }
     // Let trigger menu consume the event first
     if (triggerMenu.handleKeyDown(e)) {
       return;
@@ -510,8 +539,12 @@ export function ChatComposerInput(props) {
         e.preventDefault();
       }
     }
-  }, [hasHistory, onSubmit, onChange, emitChange, triggerMenu, onKeyDownProp]);
+  }, [isDisabled, hasHistory, onSubmit, onChange, emitChange, triggerMenu, onKeyDownProp]);
   const handlePaste = useCallback(e => {
+    if (isDisabled) {
+      e.preventDefault();
+      return;
+    }
     const editable = editableRef.current;
     if (!editable) {
       return;
@@ -555,13 +588,17 @@ export function ChatComposerInput(props) {
     }
     insertTextAtCursor(editable, text);
     emitChange();
-  }, [onFiles, onPasteProp, emitChange, tokens, pasteAsToken]);
+  }, [isDisabled, onFiles, onPasteProp, emitChange, tokens, pasteAsToken]);
   const handleDragOver = useCallback(e => {
     if (Array.from(e.dataTransfer.types).includes('Files')) {
       e.preventDefault();
     }
   }, []);
   const handleDrop = useCallback(e => {
+    if (isDisabled) {
+      e.preventDefault();
+      return;
+    }
     const files = Array.from(e.dataTransfer.files);
     if (files.length === 0) {
       return;
@@ -569,15 +606,13 @@ export function ChatComposerInput(props) {
     // File drops navigate the page by default. The input owns that drop
     // target even when no callback is supplied, so keep the user in place.
     e.preventDefault();
-    if (!isDisabled) {
-      onFiles?.(files);
-    }
+    onFiles?.(files);
   }, [isDisabled, onFiles]);
   const maxHeight = maxRows * LINE_HEIGHT_PX;
   return /*#__PURE__*/_jsxs("div", {
     ref: ref,
     ...mergeProps(themeProps('chat-composer-input'), stylex.props(styles.root, isDisabled && styles.disabled, xstyle), className, style),
-    ...rest,
+    ...rootProps,
     children: [isEmpty && /*#__PURE__*/_jsx("div", {
       ...{
         className: "x10l6tqk x13vifvy x1o0tod xtijo5x x47corl xv1l7n4 xjm74w1 xf9zqsd x19v9tvf x9ynric x87ps6o x7a5moj"
@@ -587,6 +622,10 @@ export function ChatComposerInput(props) {
     }), /*#__PURE__*/_jsx("div", {
       ref: editableRef,
       "aria-label": label,
+      "aria-describedby": rest['aria-describedby']
+      // Explicit in both states: losing editability must not lose focus.
+      ,
+      tabIndex: 0,
       contentEditable: !isDisabled,
       suppressContentEditableWarning: true,
       onInput: handleInput,
@@ -594,7 +633,7 @@ export function ChatComposerInput(props) {
       onPaste: handlePaste,
       onDragOver: handleDragOver,
       onDrop: handleDrop,
-      ...triggerMenu.ariaProps,
+      ...editorAriaProps,
       "aria-disabled": isDisabled || undefined,
       ...mergeProps({
         className: "x1a2a7pz x126k92a x13faqbe x1odjw0f xjm74w1 xf9zqsd x19v9tvf x9ynric x1tgivj0 xxugrtn x7a5moj"
@@ -603,7 +642,7 @@ export function ChatComposerInput(props) {
           maxHeight: `${maxHeight}px`
         }
       })
-    }), triggerMenu.renderMenu(), tokens.tokenPortals.filter(({
+    }), !isDisabled && triggerMenu.renderMenu(), tokens.tokenPortals.filter(({
       span
     }) => span.isConnected).map(({
       id,
@@ -613,7 +652,7 @@ export function ChatComposerInput(props) {
       children: token.render()
     }, id) : token.value.length > (pasteAsToken === null ? Infinity : 200) ? /*#__PURE__*/_jsx(ChatPastedTextToken, {
       text: token.value,
-      onExpand: () => tokens.expandToken(id)
+      onExpand: () => expandTokenRef.current(id)
     }, id) : /*#__PURE__*/_jsx(Badge, {
       label: token.label,
       variant: token.variant,

package/dist/Chat/ChatMessageMetadata.js

@@ -121,13 +121,13 @@ export function ChatMessageMetadata({
           className: "x3nfvp2 x6s0dn4 xzye2dw"
         },
         2: {
-          className: "x3nfvp2 x6s0dn4 xzye2dw xjt36v0"
+          className: "x3nfvp2 x6s0dn4 xzye2dw x1wj83wy"
         },
         1: {
           className: "x3nfvp2 x6s0dn4 xzye2dw xcx56e2 xmg6eyc x4hg4is xa4qsjk x1aquc0h"
         },
         3: {
-          className: "x3nfvp2 x6s0dn4 xzye2dw xjt36v0 xcx56e2 xmg6eyc x4hg4is xa4qsjk x1aquc0h"
+          className: "x3nfvp2 x6s0dn4 xzye2dw x1wj83wy xcx56e2 xmg6eyc x4hg4is xa4qsjk x1aquc0h"
         }
       }[!!(status === 'error') << 1 | !!(status === 'sending') << 0],
       children: [/*#__PURE__*/_jsx(Icon, {

package/dist/Chat/ChatPastedTextToken.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ChatPastedTextToken.d.ts","sourceRoot":"","sources":["../../src/Chat/ChatPastedTextToken.tsx"],"names":[],"mappings":"AAiCA,MAAM,WAAW,wBAAwB;IACvC,4BAA4B;IAC5B,IAAI,EAAE,MAAM,CAAC;IACb,mFAAmF;IACnF,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;CACvB;AAiDD,wBAAgB,mBAAmB,CAAC,EAClC,IAAI,EACJ,QAAQ,GACT,EAAE,wBAAwB,+BA8B1B;yBAjCe,mBAAmB"}
+{"version":3,"file":"ChatPastedTextToken.d.ts","sourceRoot":"","sources":["../../src/Chat/ChatPastedTextToken.tsx"],"names":[],"mappings":"AAiCA,MAAM,WAAW,wBAAwB;IACvC,4BAA4B;IAC5B,IAAI,EAAE,MAAM,CAAC;IACb,mFAAmF;IACnF,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;CACvB;AAkDD,wBAAgB,mBAAmB,CAAC,EAClC,IAAI,EACJ,QAAQ,GACT,EAAE,wBAAwB,+BA8B1B;yBAjCe,mBAAmB"}

package/dist/Chat/ChatPastedTextToken.js

@@ -4,7 +4,7 @@
 
 /**
  * @file ChatPastedTextToken.tsx
- * @input Uses React, StyleX, Badge, HoverCard, Button, CodeBlock
+ * @input Uses React, StyleX, Badge, HoverCard, Button, provider-bound translator
  * @output Exports ChatPastedTextToken component
  * @position Inline token for pasted text with hover card preview + expand
  *
@@ -32,10 +32,11 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime"; // =============
 // Helpers
 // =============================================================================
 
-function formatLabel(text) {
-  const lines = text.split('\n').length;
-  const chars = text.length;
-  return lines > 1 ? `${lines} lines, ${chars} chars` : `${chars} chars`;
+function formatLabel(text, t) {
+  return t('@astryx.chat.pastedText.label', {
+    lines: text.split('\n').length,
+    chars: text.length
+  });
 }
 
 // =============================================================================
@@ -47,7 +48,7 @@ export function ChatPastedTextToken({
   onExpand
 }) {
   const t = useTranslator();
-  const label = formatLabel(text);
+  const label = formatLabel(text, t);
   const cardContent = /*#__PURE__*/_jsxs("div", {
     ...{
       className: "x78zum5 xdt5ytf x1txdalj x17fpy1y"

package/dist/Chat/ChatToolCalls.js

@@ -102,11 +102,11 @@ const styles = {
     $$css: true
   },
   colorComplete: {
-    kMwMTN: "xtjic6",
+    kMwMTN: "x1vau044",
     $$css: true
   },
   colorError: {
-    kMwMTN: "xjt36v0",
+    kMwMTN: "xskb5cx",
     $$css: true
   }
 };
@@ -214,12 +214,12 @@ function CallRow({
       },
       children: [call.additions != null && /*#__PURE__*/_jsxs("span", {
         ...{
-          className: "xtjic6"
+          className: "x1caiuuo"
         },
         children: ["+", call.additions]
       }), call.deletions != null && /*#__PURE__*/_jsxs("span", {
         ...{
-          className: "xjt36v0"
+          className: "x1wj83wy"
         },
         children: ["-", call.deletions]
       }), call.stats]

package/dist/ClickableCard/ClickableCard.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ClickableCard.d.ts","sourceRoot":"","sources":["../../src/ClickableCard/ClickableCard.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AAEH,OAAO,EAAC,KAAK,SAAS,EAAE,KAAK,UAAU,EAAU,KAAK,GAAG,EAAC,MAAM,OAAO,CAAC;AASxE,OAAO,KAAK,EAAC,SAAS,EAAE,WAAW,EAAE,SAAS,EAAC,MAAM,gBAAgB,CAAC;AAGtE,OAAO,KAAK,EAAC,WAAW,EAAC,MAAM,cAAc,CAAC;AAE9C,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAwI5C,MAAM,WAAW,kBAAmB,SAAQ,SAAS;IACnD,yCAAyC;IACzC,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;IAE1B;;;;;OAKG;IACH,KAAK,EAAE,MAAM,CAAC;IAEd;;;OAGG;IACH,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC;IAEnD;;;OAGG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAEhB;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;IAErB;;;OAGG;IACH,OAAO,CAAC,EAAE,WAAW,CAAC;IAEtB;;;OAGG;IACH,OAAO,CAAC,EAAE,WAAW,CAAC;IAEtB;;;;OAIG;IACH,SAAS,CAAC,EAAE,SAAS,CAAC;IAEtB,yBAAyB;IACzB,KAAK,CAAC,EAAE,SAAS,CAAC;IAElB,0BAA0B;IAC1B,MAAM,CAAC,EAAE,SAAS,CAAC;IAEnB,iCAAiC;IACjC,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAMD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+BG;AACH,wBAAgB,aAAa,CAAC,EAC5B,KAAK,EACL,OAAO,EAAE,WAAW,EACpB,SAAS,EAAE,aAAa,EACxB,IAAI,EACJ,MAAM,EACN,UAAkB,EAClB,QAAQ,EACR,OAAO,EACP,OAAmB,EACnB,SAAkB,EAClB,KAAK,EACL,MAAM,EACN,QAAQ,EACR,GAAG,EACH,MAAM,EAAE,UAAU,EAClB,SAAS,EAAE,aAAa,EACxB,KAAK,EACL,GAAG,KAAK,EACT,EAAE,kBAAkB,+BAyFpB;yBA5Ge,aAAa"}
+{"version":3,"file":"ClickableCard.d.ts","sourceRoot":"","sources":["../../src/ClickableCard/ClickableCard.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AAEH,OAAO,EAAC,KAAK,SAAS,EAAE,KAAK,UAAU,EAAU,KAAK,GAAG,EAAC,MAAM,OAAO,CAAC;AASxE,OAAO,KAAK,EAAC,SAAS,EAAE,WAAW,EAAE,SAAS,EAAC,MAAM,gBAAgB,CAAC;AAGtE,OAAO,KAAK,EAAC,WAAW,EAAC,MAAM,cAAc,CAAC;AAE9C,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAwJ5C,MAAM,WAAW,kBAAmB,SAAQ,SAAS;IACnD,yCAAyC;IACzC,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;IAE1B;;;;;OAKG;IACH,KAAK,EAAE,MAAM,CAAC;IAEd;;;OAGG;IACH,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,UAAU,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC;IAEnD;;;OAGG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAEhB;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,SAAS,CAAC;IAErB;;;OAGG;IACH,OAAO,CAAC,EAAE,WAAW,CAAC;IAEtB;;;OAGG;IACH,OAAO,CAAC,EAAE,WAAW,CAAC;IAEtB;;;;OAIG;IACH,SAAS,CAAC,EAAE,SAAS,CAAC;IAEtB,yBAAyB;IACzB,KAAK,CAAC,EAAE,SAAS,CAAC;IAElB,0BAA0B;IAC1B,MAAM,CAAC,EAAE,SAAS,CAAC;IAEnB,iCAAiC;IACjC,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAMD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA+BG;AACH,wBAAgB,aAAa,CAAC,EAC5B,KAAK,EACL,OAAO,EAAE,WAAW,EACpB,SAAS,EAAE,aAAa,EACxB,IAAI,EACJ,MAAM,EACN,UAAkB,EAClB,QAAQ,EACR,OAAO,EACP,OAAmB,EACnB,SAAkB,EAClB,KAAK,EACL,MAAM,EACN,QAAQ,EACR,GAAG,EACH,MAAM,EAAE,UAAU,EAClB,SAAS,EAAE,aAAa,EACxB,KAAK,EACL,GAAG,KAAK,EACT,EAAE,kBAAkB,+BAyFpB;yBA5Ge,aAAa"}

package/dist/ClickableCard/ClickableCard.js

@@ -51,7 +51,11 @@ import { disabledInteractionProps } from "../utils/disabledInteraction.js";
 // 1 while on and 1 → 0 over the release, and inherited resolved by the
 // `::after` that paints it. See interactionOverlay.stylex.ts.
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const pressedOverlayColor = 'var(--_press-paint)';
+const pressedOverlayImage = 'var(--_press-paint-image)';
+/** Written by the press controller while it paints a press. */
+const PRESSED_ON = '[data-astryx-press="on"]';
+/** Written by the press controller for the press's release. */
+const PRESSED_FADING = '[data-astryx-press="fading"]';
 const styles = {
   interactive: {
     kVAEAm: "x1n2onr6",
@@ -61,16 +65,16 @@ const styles = {
     $$css: true
   },
   overlay: {
-    "--_press-overlay": "x1s9pv7w xb8awce x1a5qima x1sad4of x1s2lk0z xmfmiv1 x1hn5ov8",
-    "--_press-overlay-transition": "x1wkyqe6 xbb2ue6 x1wphrdb",
+    "--_press-overlay": "x1s9pv7w xb8awce x1a5qima xmfmiv1 x1hn5ov8",
     k5JduY: "x1s928wv",
     kwXMNM: "x1j6awrg",
     kv0HGH: "xarstr8",
     kloYau: "x2q1x1w",
-    kRicXK: "x1ywzrc5",
-    kPNhGg: "x18w5vxb",
+    kRicXK: "x1ywzrc5 x1xg7wox x15tr235",
+    kPNhGg: "x97pup0",
     kA8PQs: "x1dlmc9c",
-    ks3ayO: "x1l0fnur",
+    ks3ayO: "x1l0fnur x1l0866b x7bosnz",
+    kNctxI: "x1rd1oi2 xlif165",
     $$css: true
   },
   borderless: {

package/dist/CodeBlock/CodeBlock.d.ts

@@ -1,10 +1,19 @@
 import * as React from 'react';
 import type { BaseProps } from '../BaseProps.js';
+import type { CodeLanguage } from './grammar.js';
 import { type SyntaxThemeDefinition } from '../theme/syntax/index.js';
 export interface CodeBlockProps extends BaseProps<HTMLPreElement> {
     ref?: React.Ref<HTMLPreElement>;
     code: string;
-    language?: string;
+    /**
+     * The code's language: a built-in identifier such as `'rust'`, or a
+     * language value — a module imported on its own, such as `graphql` from
+     * `@astryxdesign/core/CodeBlock/languages/graphql`, or one made with
+     * `createCodeLanguage`. A string selects only a built-in grammar; the label
+     * shows the string, or the value's `name`.
+     * @default 'plaintext'
+     */
+    language?: string | CodeLanguage;
     title?: string;
     hasLanguageLabel?: boolean;
     hasLineNumbers?: boolean;
@@ -20,6 +29,14 @@ export interface CodeBlockProps extends BaseProps<HTMLPreElement> {
     isDiff?: boolean;
     hasCopyButton?: boolean;
     onCopy?: () => void;
+    /**
+     * Your own controls, shown just before Copy: in the header when the block
+     * has one, otherwise beside the code in the top inline-end corner, never
+     * over it. It never creates a header, and activating it never collapses the
+     * block. You own each control's label, state, and action; ghost `sm`
+     * IconButtons match Copy's size and variant.
+     */
+    endContent?: React.ReactNode;
     isWrapped?: boolean;
     maxHeight?: number | string;
     isCollapsible?: boolean;
@@ -43,6 +60,12 @@ export interface CodeBlockProps extends BaseProps<HTMLPreElement> {
      * @default 'card'
      */
     container?: 'card' | 'section';
+    /**
+     * @deprecated Pass a custom language as `language` instead:
+     * `language={createCodeLanguage({name, identifiers, tokenize})}` takes this
+     * same function as `tokenize`. Still works exactly as released and wins
+     * over `language`'s grammar; `astryx upgrade` rewrites static uses.
+     */
     tokenizer?: (code: string, language: string) => {
         type: string;
         start: number;
@@ -67,7 +90,7 @@ export interface CodeBlockProps extends BaseProps<HTMLPreElement> {
  * <CodeBlock code="const x = 42;" language="javascript" />
  * ```
  */
-export declare function CodeBlock({ code, language, title, hasLanguageLabel, hasLineNumbers, highlightLines, isDiff, hasCopyButton, onCopy, isWrapped, maxHeight, isCollapsible, collapsibleThreshold, size, width: widthProp, container, tokenizer: customTokenizer, highlightMode, syntaxTheme, xstyle, className, style, ref, ...props }: CodeBlockProps): React.JSX.Element;
+export declare function CodeBlock({ code, language, title, hasLanguageLabel, hasLineNumbers, highlightLines, isDiff, hasCopyButton, onCopy, endContent, isWrapped, maxHeight, isCollapsible, collapsibleThreshold, size, width: widthProp, container, tokenizer: customTokenizer, highlightMode, syntaxTheme, xstyle, className, style, ref, ...props }: CodeBlockProps): React.JSX.Element;
 export declare namespace CodeBlock {
     var displayName: string;
 }

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

@@ -1 +1 @@
-{"version":3,"file":"CodeBlock.d.ts","sourceRoot":"","sources":["../../src/CodeBlock/CodeBlock.tsx"],"names":[],"mappings":"AAoBA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAgC5C,OAAO,EAAc,KAAK,qBAAqB,EAAC,MAAM,iBAAiB,CAAC;AAwcxE,MAAM,WAAW,cAAe,SAAQ,SAAS,CAAC,cAAc,CAAC;IAC/D,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC,IAAI,EAAE,MAAM,CAAC;IACb,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,cAAc,CAAC,EAAE,MAAM,EAAE,CAAC;IAC1B;;;;;;;OAOG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC5B,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IACnB;;;;;;OAMG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;;;;;;OAQG;IACH,SAAS,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC/B,SAAS,CAAC,EAAE,CACV,IAAI,EAAE,MAAM,EACZ,QAAQ,EAAE,MAAM,KACb;QAAC,IAAI,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAC;QAAC,GAAG,EAAE,MAAM,CAAA;KAAC,EAAE,CAAC;IAClD,aAAa,CAAC,EAAE,MAAM,GAAG,QAAQ,GAAG,OAAO,CAAC;IAC5C;;;;;;OAMG;IACH,WAAW,CAAC,EAAE,qBAAqB,CAAC;CACrC;AA0SD;;;;;;;;GAQG;AACH,wBAAgB,SAAS,CAAC,EACxB,IAAI,EACJ,QAAsB,EACtB,KAAK,EACL,gBAAuB,EACvB,cAAsB,EACtB,cAAc,EACd,MAAc,EACd,aAAoB,EACpB,MAAM,EACN,SAAiB,EACjB,SAAS,EACT,aAAqB,EACrB,oBAAyB,EACzB,IAAW,EACX,KAAK,EAAE,SAAyB,EAChC,SAAkB,EAClB,SAAS,EAAE,eAAe,EAC1B,aAAsB,EACtB,WAAW,EACX,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,EACH,GAAG,KAAK,EACT,EAAE,cAAc,qBAmRhB;yBA5Se,SAAS"}
+{"version":3,"file":"CodeBlock.d.ts","sourceRoot":"","sources":["../../src/CodeBlock/CodeBlock.tsx"],"names":[],"mappings":"AAoBA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AA2B5C,OAAO,KAAK,EAAC,YAAY,EAAC,MAAM,WAAW,CAAC;AAY5C,OAAO,EAAc,KAAK,qBAAqB,EAAC,MAAM,iBAAiB,CAAC;AAuexE,MAAM,WAAW,cAAe,SAAQ,SAAS,CAAC,cAAc,CAAC;IAC/D,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;IAChC,IAAI,EAAE,MAAM,CAAC;IACb;;;;;;;OAOG;IACH,QAAQ,CAAC,EAAE,MAAM,GAAG,YAAY,CAAC;IACjC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,cAAc,CAAC,EAAE,MAAM,EAAE,CAAC;IAC1B;;;;;;;OAOG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB;;;;;;OAMG;IACH,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC7B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC5B,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IACnB;;;;;;OAMG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;;;;;;OAQG;IACH,SAAS,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC/B;;;;;OAKG;IACH,SAAS,CAAC,EAAE,CACV,IAAI,EAAE,MAAM,EACZ,QAAQ,EAAE,MAAM,KACb;QAAC,IAAI,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAC;QAAC,GAAG,EAAE,MAAM,CAAA;KAAC,EAAE,CAAC;IAClD,aAAa,CAAC,EAAE,MAAM,GAAG,QAAQ,GAAG,OAAO,CAAC;IAC5C;;;;;;OAMG;IACH,WAAW,CAAC,EAAE,qBAAqB,CAAC;CACrC;AAgUD;;;;;;;;GAQG;AACH,wBAAgB,SAAS,CAAC,EACxB,IAAI,EACJ,QAAsB,EACtB,KAAK,EACL,gBAAuB,EACvB,cAAsB,EACtB,cAAc,EACd,MAAc,EACd,aAAoB,EACpB,MAAM,EACN,UAAU,EACV,SAAiB,EACjB,SAAS,EACT,aAAqB,EACrB,oBAAyB,EACzB,IAAW,EACX,KAAK,EAAE,SAAyB,EAChC,SAAkB,EAClB,SAAS,EAAE,eAAe,EAC1B,aAAsB,EACtB,WAAW,EACX,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,EACH,GAAG,KAAK,EACT,EAAE,cAAc,qBA8ShB;yBAxUe,SAAS"}

package/dist/CodeBlock/CodeBlock.js

@@ -13,12 +13,13 @@ import * as React from 'react';
 import * as stylex from '@stylexjs/stylex';
 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 { isRenderable, 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, splitDiffLines, flatTokensToLines, SYNC_TOKENIZE_THRESHOLD } from "./tokenizer.js";
+import { isCustomCodeLanguage, languageKey, languageLabel as languageWord, sameCodeLanguage } from "./grammar.js";
 import { ensureHighlightStyles } from "./highlightStyles.js";
 import { applyHighlightRangesChunked } from "./highlightRanges.js";
 import { themeProps } from "../utils/themeProps.js";
@@ -83,6 +84,12 @@ const styles = {
     kVQacm: "xb3r6kr",
     $$css: true
   },
+  rootCorner: {
+    k1xSpc: "xrvj5dj",
+    kumcoG: "xju1xpo",
+    k9llMU: "x5o4joa",
+    $$css: true
+  },
   header: {
     k1xSpc: "x78zum5",
     kGNEyG: "x6s0dn4",
@@ -213,12 +220,6 @@ const styles = {
   copyButton: {
     kMwMTN: "x1mjzq1q",
     $$css: true
-  },
-  copyButtonAbsolute: {
-    kVAEAm: "x10l6tqk",
-    k87sOh: "xctzyg",
-    kt4wiu: "x72tfeb",
-    $$css: true
   }
 };
 
@@ -322,19 +323,32 @@ function isSafari() {
 /**
  * Hook: per-line tokens with sync/async + custom tokenizer compat.
  */
-function useTokenLines(code, language, customTokenizer) {
+function useTokenLines(code, languageProp, customTokenizer) {
+  // Keep one language while it paints the same, so an inline
+  // `createCodeLanguage({...})` — the form the `tokenizer` codemod writes —
+  // tokenizes once, as `tokenizer` did (adjusting state during render).
+  const [language, setLanguage] = useState(languageProp);
+  if (!sameCodeLanguage(language, languageProp)) {
+    setLanguage(languageProp);
+  }
   const [asyncTokenResult, setAsyncTokenResult] = useState(null);
   const syncTokens = useMemo(() => {
     if (customTokenizer) {
-      return flatTokensToLines(customTokenizer(code, language), code);
+      return flatTokensToLines(customTokenizer(code, languageWord(language)), code);
     }
-    if (code.length >= SYNC_TOKENIZE_THRESHOLD) {
+    // A custom language paints synchronously at any length, as `tokenizer`
+    // does, so the codemod's rewrite keeps the same first paint (FR13).
+    if (code.length >= SYNC_TOKENIZE_THRESHOLD && !isCustomCodeLanguage(language)) {
       return null;
     }
     return tokenize(code, language);
   }, [code, language, customTokenizer]);
+
+  // Synchronizes long code with a scheduler-yielding tokenize task: it starts
+  // when the code, language, or tokenizer changes, and the
+  // cleanup aborts the previous one.
   useEffect(() => {
-    if (code.length < SYNC_TOKENIZE_THRESHOLD || customTokenizer) {
+    if (code.length < SYNC_TOKENIZE_THRESHOLD || customTokenizer || isCustomCodeLanguage(language)) {
       return;
     }
     const abortController = new AbortController();
@@ -543,6 +557,7 @@ export function CodeBlock({
   isDiff = false,
   hasCopyButton = true,
   onCopy,
+  endContent,
   isWrapped = false,
   maxHeight,
   isCollapsible = false,
@@ -597,7 +612,11 @@ export function CodeBlock({
   // 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;
+  // A language value labels with its `name` and reflects its first
+  // identifier as `data-language`, so theme selectors keep matching (FR13).
+  const languageName = languageWord(language);
+  const languageAttr = languageKey(language);
+  const languageLabel = !hasLanguageLabel ? null : isDiff ? languageName === 'plaintext' ? 'diff' : `${languageName} diff` : languageName !== 'plaintext' ? languageName : null;
   const showHeader = title != null || languageLabel != null;
 
   // A collapsed body must never outlive the visible header that controls it.
@@ -633,6 +652,11 @@ export function CodeBlock({
   const scrollStyle = maxHeight != null ? {
     maxHeight: typeof maxHeight === 'number' ? `${maxHeight}px` : maxHeight
   } : undefined;
+
+  // Caller controls render before Copy; together they are the block's controls,
+  // in the header when there is one and in the corner cluster otherwise.
+  const hasEndContent = isRenderable(endContent);
+  const hasControls = hasCopyButton || hasEndContent;
   const copyButtonEl = hasCopyButton ? /*#__PURE__*/_jsx(IconButton, {
     variant: "ghost",
     size: "sm",
@@ -653,13 +677,13 @@ export function CodeBlock({
       e.stopPropagation();
       void handleCopy();
     },
-    xstyle: [styles.copyButton, !showHeader && styles.copyButtonAbsolute],
+    xstyle: styles.copyButton,
     ...themeProps('code-block-copy-button')
   }) : null;
   const headerEl = showHeader ? /*#__PURE__*/_jsxs("div", {
     ...mergeProps(themeProps('code-block-header', {
       size,
-      language,
+      language: languageAttr,
       container
     }), {
       0: {
@@ -686,7 +710,7 @@ export function CodeBlock({
       children: /*#__PURE__*/_jsxs("span", {
         ...mergeProps(themeProps('code-block-title', {
           size,
-          language
+          language: languageAttr
         }), {
           className: "x78zum5 x6s0dn4 x141an7d x9m5x89 x1e4wzip x1mjzq1q x1ghz6dp x1ltkj2j"
         }),
@@ -702,7 +726,12 @@ export function CodeBlock({
           })
         }), title, title && languageLabel ? ' — ' : '', languageLabel]
       })
-    }), copyButtonEl]
+    }), hasControls ? /*#__PURE__*/_jsxs("div", {
+      ...{
+        className: "x78zum5 x6s0dn4 xzye2dw x2lah0s"
+      },
+      children: [hasEndContent ? endContent : null, copyButtonEl]
+    }) : null]
   }) : null;
   const codeBody = /*#__PURE__*/_jsx("div", {
     ...getViewportProps({
@@ -746,9 +775,9 @@ export function CodeBlock({
     ref: ref,
     ...mergeProps(themeProps('code-block', {
       size,
-      language,
+      language: languageAttr,
       container
-    }), stylex.props(styles.root, dynamicStyles.width(widthProp), containerStyles[container], xstyle), className, style),
+    }), stylex.props(styles.root, hasControls && !showHeader && styles.rootCorner, dynamicStyles.width(widthProp), containerStyles[container], xstyle), className, style),
     ...props,
     children: [headerEl, canCollapse ? /*#__PURE__*/_jsx("div", {
       id: regionId
@@ -773,7 +802,17 @@ export function CodeBlock({
         },
         children: codeBody
       })
-    }) : codeBody, !showHeader && copyButtonEl]
+    }) : codeBody, hasControls && !showHeader ? /*#__PURE__*/_jsxs("div", {
+      ...{
+        0: {
+          className: "x78zum5 x6s0dn4 xzye2dw x1y8v6su x16j26i2 xlgwz2i"
+        },
+        1: {
+          className: "x78zum5 x6s0dn4 xzye2dw x1y8v6su x16j26i2 x166xdbf"
+        }
+      }[!!(size === 'sm') << 0],
+      children: [hasEndContent ? endContent : null, copyButtonEl]
+    }) : null]
   });
   return syntaxTheme ? /*#__PURE__*/_jsx(SyntaxTheme, {
     theme: syntaxTheme,