@astryxdesign/core 0.7.4 → 0.7.5-canary.0418c47

package/dist/Chat/index.d.ts

@@ -3,47 +3,47 @@
  *
  * SYNC: When modified, update /packages/core/src/index.ts
  */
-export { ChatComposer } from './ChatComposer';
-export type { ChatComposerProps, ChatComposerStatus, ChatComposerDensity, } from './ChatComposer';
-export { ChatSendButton } from './ChatSendButton';
-export type { ChatSendButtonProps } from './ChatSendButton';
-export { ChatComposerDrawer } from './ChatComposerDrawer';
-export type { ChatComposerDrawerProps } from './ChatComposerDrawer';
-export { ChatComposerInput, ChatComposerTokenElement } from './ChatComposerInput';
-export type { ChatComposerInputProps, ChatComposerInputHandle, ChatComposerTokenElementProps, ChatComposerToken, ChatComposerTrigger, ChatComposerTriggerItem, } from './ChatComposerInput';
-export { ChatTokenizedText } from './ChatTokenizedText';
-export type { ChatTokenizedTextProps } from './ChatTokenizedText';
-export { ChatMessageList } from './ChatMessageList';
-export type { ChatMessageListProps } from './ChatMessageList';
-export { ChatMessage } from './ChatMessage';
-export type { ChatMessageProps } from './ChatMessage';
-export { ChatMessageBubble } from './ChatMessageBubble';
-export type { ChatMessageBubbleProps, ChatMessageBubbleVariant, } from './ChatMessageBubble';
-export { ChatMessageMetadata } from './ChatMessageMetadata';
-export type { ChatMessageMetadataProps, ChatMessageStatus, } from './ChatMessageMetadata';
-export { ChatSystemMessage } from './ChatSystemMessage';
-export type { ChatSystemMessageProps, ChatSystemMessageVariant, } from './ChatSystemMessage';
-export { useChatStreamScroll } from './useChatStreamScroll';
-export type { ChatScrollToBottomOptions, UseChatStreamScrollOptions, UseChatStreamScrollReturn, } from './useChatStreamScroll';
-export { useChatNewMessages } from './useChatNewMessages';
-export type { UseChatNewMessagesOptions, UseChatNewMessagesReturn, } from './useChatNewMessages';
-export { useChatPasteAsToken } from './useChatPasteAsToken';
-export type { UseChatPasteAsTokenOptions, UseChatPasteAsTokenReturn, } from './useChatPasteAsToken';
-export { useChatComposerTokens } from './useChatComposerTokens';
-export type { UseChatComposerTokensOptions, UseChatComposerTokensReturn, TokenPortal, } from './useChatComposerTokens';
-export type { ChatMessageSender, ChatDensity } from './ChatContext';
-export { useChatLayoutContext, useChatComposerContext } from './ChatContext';
-export type { ChatComposerContextValue, ChatComposerInputControl, } from './ChatContext';
-export { ChatToolCalls } from './ChatToolCalls';
-export type { ChatToolCallsProps, ChatToolCallItem, ChatToolCallStatus, } from './ChatToolCalls';
-export { ChatLayout } from './ChatLayout';
-export { ChatLayoutScrollButton } from './ChatLayoutScrollButton';
-export type { ChatLayoutScrollButtonProps } from './ChatLayoutScrollButton';
-export type { ChatLayoutProps } from './ChatLayout';
-export { useSpeechRecognition } from './useSpeechRecognition';
-export type { UseSpeechRecognitionOptions, UseSpeechRecognitionReturn, } from './useSpeechRecognition';
-export { useChatDictation } from './useChatDictation';
-export type { UseChatDictationOptions, UseChatDictationReturn, } from './useChatDictation';
-export { ChatDictationButton } from './ChatDictationButton';
-export type { ChatDictationButtonProps } from './ChatDictationButton';
+export { ChatComposer } from './ChatComposer.js';
+export type { ChatComposerProps, ChatComposerStatus, ChatComposerDensity, } from './ChatComposer.js';
+export { ChatSendButton } from './ChatSendButton.js';
+export type { ChatSendButtonProps } from './ChatSendButton.js';
+export { ChatComposerDrawer } from './ChatComposerDrawer.js';
+export type { ChatComposerDrawerProps } from './ChatComposerDrawer.js';
+export { ChatComposerInput, ChatComposerTokenElement } from './ChatComposerInput.js';
+export type { ChatComposerInputProps, ChatComposerInputHandle, ChatComposerTokenElementProps, ChatComposerToken, ChatComposerTrigger, ChatComposerTriggerItem, } from './ChatComposerInput.js';
+export { ChatTokenizedText } from './ChatTokenizedText.js';
+export type { ChatTokenizedTextProps } from './ChatTokenizedText.js';
+export { ChatMessageList } from './ChatMessageList.js';
+export type { ChatMessageListProps } from './ChatMessageList.js';
+export { ChatMessage } from './ChatMessage.js';
+export type { ChatMessageProps } from './ChatMessage.js';
+export { ChatMessageBubble } from './ChatMessageBubble.js';
+export type { ChatMessageBubbleProps, ChatMessageBubbleVariant, } from './ChatMessageBubble.js';
+export { ChatMessageMetadata } from './ChatMessageMetadata.js';
+export type { ChatMessageMetadataProps, ChatMessageStatus, } from './ChatMessageMetadata.js';
+export { ChatSystemMessage } from './ChatSystemMessage.js';
+export type { ChatSystemMessageProps, ChatSystemMessageVariant, } from './ChatSystemMessage.js';
+export { useChatStreamScroll } from './useChatStreamScroll.js';
+export type { ChatScrollToBottomOptions, UseChatStreamScrollOptions, UseChatStreamScrollReturn, } from './useChatStreamScroll.js';
+export { useChatNewMessages } from './useChatNewMessages.js';
+export type { UseChatNewMessagesOptions, UseChatNewMessagesReturn, } from './useChatNewMessages.js';
+export { useChatPasteAsToken } from './useChatPasteAsToken.js';
+export type { UseChatPasteAsTokenOptions, UseChatPasteAsTokenReturn, } from './useChatPasteAsToken.js';
+export { useChatComposerTokens } from './useChatComposerTokens.js';
+export type { UseChatComposerTokensOptions, UseChatComposerTokensReturn, TokenPortal, } from './useChatComposerTokens.js';
+export type { ChatMessageSender, ChatDensity } from './ChatContext.js';
+export { useChatLayoutContext, useChatComposerContext } from './ChatContext.js';
+export type { ChatComposerContextValue, ChatComposerInputControl, } from './ChatContext.js';
+export { ChatToolCalls } from './ChatToolCalls.js';
+export type { ChatToolCallsProps, ChatToolCallItem, ChatToolCallStatus, } from './ChatToolCalls.js';
+export { ChatLayout } from './ChatLayout.js';
+export { ChatLayoutScrollButton } from './ChatLayoutScrollButton.js';
+export type { ChatLayoutScrollButtonProps } from './ChatLayoutScrollButton.js';
+export type { ChatLayoutProps } from './ChatLayout.js';
+export { useSpeechRecognition } from './useSpeechRecognition.js';
+export type { UseSpeechRecognitionOptions, UseSpeechRecognitionReturn, } from './useSpeechRecognition.js';
+export { useChatDictation } from './useChatDictation.js';
+export type { UseChatDictationOptions, UseChatDictationReturn, } from './useChatDictation.js';
+export { ChatDictationButton } from './ChatDictationButton.js';
+export type { ChatDictationButtonProps } from './ChatDictationButton.js';
 //# sourceMappingURL=index.d.ts.map

package/dist/Chat/useChatComposerTokens.d.ts

@@ -1,4 +1,4 @@
-import type { ChatComposerToken, ChatComposerTokenCustom } from './ChatComposerInput';
+import type { ChatComposerToken, ChatComposerTokenCustom } from './ChatComposerInput.js';
 export interface TokenPortal {
     id: string;
     span: HTMLSpanElement;

package/dist/Chat/useChatDictation.d.ts

@@ -1,4 +1,4 @@
-import type { ChatComposerInputHandle } from './ChatComposerInput';
+import type { ChatComposerInputHandle } from './ChatComposerInput.js';
 export interface UseChatDictationOptions {
     /** BCP-47 language tag. @default InternationalizationProvider locale */
     lang?: string;

package/dist/Chat/useChatPasteAsToken.d.ts

@@ -1,5 +1,5 @@
 import type { ClipboardEvent } from 'react';
-import type { ChatComposerInputHandle, ChatComposerToken } from './ChatComposerInput';
+import type { ChatComposerInputHandle, ChatComposerToken } from './ChatComposerInput.js';
 export interface UseChatPasteAsTokenOptions {
     /** Ref to the composer input handle for inserting tokens. */
     inputRef: React.RefObject<ChatComposerInputHandle | null>;

package/dist/Chat/useTriggerMenu.d.ts

@@ -18,8 +18,8 @@
  * - /packages/core/src/Chat/index.ts
  */
 import { type ReactNode } from 'react';
-import type { SearchableItem } from '../Typeahead/types';
-import type { ChatComposerTrigger, ChatComposerToken } from './ChatComposerInput';
+import type { SearchableItem } from '../Typeahead/types.js';
+import type { ChatComposerTrigger, ChatComposerToken } from './ChatComposerInput.js';
 export interface TriggerMenuState {
     isActive: boolean;
     activeTrigger: ChatComposerTrigger | null;

package/dist/CheckboxInput/CheckboxInput.d.ts

@@ -13,10 +13,10 @@
  */
 import { type ChangeEvent, type FocusEvent, type ReactNode } from 'react';
 import * as stylex from '@stylexjs/stylex';
-import type { BaseProps } from '../BaseProps';
-import type { SizeValue } from '../utils/types';
-import type { IconType } from '../Icon';
-import type { InputStatus } from '../Field/types';
+import type { BaseProps } from '../BaseProps.js';
+import type { SizeValue } from '../utils/types.js';
+import type { IconType } from '../Icon/index.js';
+import type { InputStatus } from '../Field/types.js';
 declare const wrapperSizeStyles: Readonly<{
     readonly sm: Readonly<{
         readonly width: stylex.StyleXClassNameFor<"width", 20>;

package/dist/CheckboxInput/index.d.ts

@@ -6,6 +6,6 @@
  *
  * SYNC: When modified, update this header and /packages/core/src/CheckboxInput/CheckboxInput.doc.mjs
  */
-export { CheckboxInput } from './CheckboxInput';
-export type { CheckboxInputProps, CheckboxInputSize, } from './CheckboxInput';
+export { CheckboxInput } from './CheckboxInput.js';
+export type { CheckboxInputProps, CheckboxInputSize, } from './CheckboxInput.js';
 //# sourceMappingURL=index.d.ts.map

package/dist/CheckboxList/CheckboxList.d.ts

@@ -12,10 +12,10 @@
  * - /packages/cli/assets/templates/blocks/components/CheckboxList/ (showcase blocks)
  */
 import { type ReactNode } from 'react';
-import { type FieldInputBaseProps } from '../Field/fieldParts';
-import type { SizeValue } from '../utils/types';
-import type { InputStatus } from '../Field/types';
-import type { ListDensity } from '../List/ListContext';
+import { type FieldInputBaseProps } from '../Field/fieldParts.js';
+import type { SizeValue } from '../utils/types.js';
+import type { InputStatus } from '../Field/types.js';
+import type { ListDensity } from '../List/ListContext.js';
 export interface CheckboxListProps extends Omit<FieldInputBaseProps<HTMLDivElement>, 'onChange'> {
     /** Ref forwarded to the `role="group"` element. */
     ref?: React.Ref<HTMLDivElement>;

package/dist/CheckboxList/CheckboxListItem.d.ts

@@ -13,8 +13,8 @@
  * - /packages/cli/assets/templates/blocks/components/CheckboxList/ (showcase blocks)
  */
 import { type ReactNode } from 'react';
-import type { BaseProps } from '../BaseProps';
-import type { ItemAlign } from '../Item';
+import type { BaseProps } from '../BaseProps.js';
+import type { ItemAlign } from '../Item/index.js';
 export interface CheckboxListItemProps extends BaseProps<HTMLLIElement> {
     /**
      * Vertical alignment of the start and end content against the label,

package/dist/CheckboxList/index.d.ts

@@ -6,8 +6,8 @@
  *
  * SYNC: When modified, update this header
  */
-export { CheckboxList } from './CheckboxList';
-export type { CheckboxListProps } from './CheckboxList';
-export { CheckboxListItem } from './CheckboxListItem';
-export type { CheckboxListItemProps } from './CheckboxListItem';
+export { CheckboxList } from './CheckboxList.js';
+export type { CheckboxListProps } from './CheckboxList.js';
+export { CheckboxListItem } from './CheckboxListItem.js';
+export type { CheckboxListItemProps } from './CheckboxListItem.js';
 //# sourceMappingURL=index.d.ts.map

package/dist/Citation/Citation.d.ts

@@ -13,7 +13,7 @@
  */
 import type React from 'react';
 import type { ReactNode } from 'react';
-import type { BaseProps } from '../BaseProps';
+import type { BaseProps } from '../BaseProps.js';
 export interface CitationSource {
     title?: string;
     url?: string;

package/dist/Citation/index.d.ts

@@ -4,6 +4,6 @@
  * @output Exports Citation, CitationProps, CitationSource
  * @position Component entry point; re-exported by /packages/core/src/index.ts
  */
-export { Citation } from './Citation';
-export type { CitationProps, CitationSource } from './Citation';
+export { Citation } from './Citation.js';
+export type { CitationProps, CitationSource } from './Citation.js';
 //# sourceMappingURL=index.d.ts.map

package/dist/ClickableCard/ClickableCard.d.ts

@@ -25,9 +25,9 @@
  * For toggle selection, use SelectableCard.
  */
 import { type ReactNode, type MouseEvent, type Ref } from 'react';
-import type { SizeValue, SpacingStep, Elevation } from '../utils/types';
-import type { CardVariant } from '../Card/Card';
-import type { BaseProps } from '../BaseProps';
+import type { SizeValue, SpacingStep, Elevation } from '../utils/types.js';
+import type { CardVariant } from '../Card/Card.js';
+import type { BaseProps } from '../BaseProps.js';
 export interface ClickableCardProps extends BaseProps {
     /** Ref forwarded to the root element. */
     ref?: Ref<HTMLDivElement>;

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/ClickableCard/index.d.ts

@@ -6,6 +6,6 @@
  *
  * SYNC: When modified, update /packages/core/src/ClickableCard/ClickableCard.doc.mjs
  */
-export { ClickableCard } from './ClickableCard';
-export type { ClickableCardProps } from './ClickableCard';
+export { ClickableCard } from './ClickableCard.js';
+export type { ClickableCardProps } from './ClickableCard.js';
 //# sourceMappingURL=index.d.ts.map

package/dist/Code/Code.d.ts

@@ -12,7 +12,7 @@
  * - /packages/cli/assets/templates/blocks/components/CodeBlock/ (showcase blocks)
  */
 import type { ReactNode } from 'react';
-import type { BaseProps } from '../BaseProps';
+import type { BaseProps } from '../BaseProps.js';
 /** Text color for {@link Code}, mirroring the primary/secondary/inherit subset of Text. */
 export type CodeColor = 'primary' | 'secondary' | 'inherit';
 /** Font size for {@link Code}. `'inherit'` adopts the surrounding text size. */

package/dist/Code/index.d.ts

@@ -4,5 +4,5 @@
  * @output Exports Code and its props type
  * @position Entry point for @astryxdesign/core/Code subpath export
  */
-export { Code, type CodeProps, type CodeColor, type CodeSize } from './Code';
+export { Code, type CodeProps, type CodeColor, type CodeSize } from './Code.js';
 //# sourceMappingURL=index.d.ts.map

package/dist/CodeBlock/CodeBlock.d.ts

@@ -1,10 +1,19 @@
 import * as React from 'react';
-import type { BaseProps } from '../BaseProps';
-import { type SyntaxThemeDefinition } from '../theme/syntax';
+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,