@tanishqkancharla/maui 0.0.63 → 0.0.65

package/README.md

@@ -41,6 +41,8 @@ function App() {
 
 Put the exported `themeFoucScript` in a classic inline `<script>` in `<head>` so `data-theme` is correct on first paint.
 
+`CodeBlock` uses Shiki's JavaScript regex engine with Maui themes and lazy-loaded languages. No highlighting configuration is required.
+
 ## Develop
 
 ```bash
@@ -63,7 +65,21 @@ Vite serves the gallery at [http://localhost:5173/](http://localhost:5173/).
 
 The default package export is compiled `dist/` JavaScript and declarations. TypeScript source remains available through the `source` export condition and `maui/src`. Patterns, demo apps, and the gallery `Panel` preview frame are reference implementations, not package components.
 
-Pushes to `main` publish a new patch of `@tanishqkancharla/maui` to npm (tag `vX.Y.Z`, provenance). Add `[skip release]` to the merge commit message to skip. Manual `git tag vX.Y.Z && git push origin vX.Y.Z` still publishes when the tag matches `package.json`. The gallery deploys to [maui.tanishqkancharla.dev](https://maui.tanishqkancharla.dev) through Vercel on `main`.
+Push directly to `main`; PRs are not required. Each push prepares the next version of `@tanishqkancharla/maui`, creates a `vX.Y.Z` tag, and stages the verified tarball on npm with provenance. **Staging does not make the version public.** Add `[skip release]` to the push's head commit message to skip staging. Manual `vX.Y.Z` tag pushes also stage a release when the tag matches `package.json`.
+
+To publish, review the version in npm's **Staged Packages** tab and approve it with 2FA. With npm 11.15.0 or newer, you can also use `npm stage list @tanishqkancharla/maui`, `npm stage view <stage-id>`, `npm stage download <stage-id>`, and `npm stage approve <stage-id>`. Approve versions in increasing order so an older approval does not move `latest` backward. Git tags reserve version numbers even while approval is pending or after a staged version is rejected; the next branch release uses a new version. A failed staging upload can be retried by manually running the workflow against its existing `vX.Y.Z` tag.
+
+### Required npm security settings
+
+In the package's npm settings:
+
+1. Configure the GitHub trusted publisher for `tanishqkancharla/maui`, workflow filename `publish.yml`, with **stage-only** permission. Do not allow direct `npm publish` or dist-tag management. Audit all trusted publisher entries, not just this workflow's entry. If npm requires replacing an existing connection, copy its repository/workflow details, replace it with a stage-only connection, and complete the first staged upload within two days before the new connection expires.
+2. Set **Publishing access** to **Require two-factor authentication and disallow bypass 2fa tokens (recommended)**. Revoke unused automation tokens.
+3. Keep 2FA enabled on maintainer accounts. CI must never approve its own staged release.
+
+These npm-side restrictions are essential: changing the workflow command alone does not prevent a modified workflow from attempting a direct publish. See npm's [staged publishing](https://docs.npmjs.com/staged-publishing) and [trusted publisher](https://docs.npmjs.com/trusted-publishers) documentation.
+
+`npm run release` also stages rather than publishing directly and requires npm 11.15.0 or newer. The gallery still deploys independently to [maui.tanishqkancharla.dev](https://maui.tanishqkancharla.dev) through Vercel on `main`; npm approval does not gate that deployment.
 
 Agent conventions for consuming Maui: [`skills/maui`](./skills/maui/SKILL.md).
 

package/dist/components/ActivityIndicator.d.ts

@@ -1,6 +1,8 @@
+import { type IconSize } from "../tokens/sizing";
 export type ActivityIndicatorVariant = "primary" | "accent" | "muted";
 export type ActivityIndicatorProps = {
-    size?: string;
+    /** Icon t-shirt size, or a custom CSS length. Defaults to 1em. */
+    size?: IconSize | (string & {});
     variant?: ActivityIndicatorVariant;
     className?: string;
     "aria-label"?: string;

package/dist/components/ActivityIndicator.js

@@ -2,6 +2,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { useEffect, useRef } from "react";
 import { style, useStyles } from "purse-styles";
 import { colors } from "../tokens/colors";
+import { iconSizeValues } from "../tokens/sizing";
 import { cls } from "../utils/cls";
 // Geometry is in a 24×24 viewBox. Spokes end this far from the center.
 const VIEWBOX_CENTER = 12;
@@ -28,6 +29,9 @@ const spokes = Array.from({ length: SPOKE_COUNT }, (_, index) => {
 export function ActivityIndicator({ size = "1em", variant = "accent", className, "aria-label": ariaLabel = "Loading", }) {
     const svgRef = useRef(null);
     const rootClassName = useStyles(rootClass, variantStyles[variant]);
+    const dimension = Object.hasOwn(iconSizeValues, size)
+        ? iconSizeValues[size]
+        : size;
     useEffect(() => {
         const animation = svgRef.current?.animate([{ transform: "rotate(0deg)" }, { transform: "rotate(360deg)" }], {
             duration: ROTATION_MS,
@@ -36,7 +40,7 @@ export function ActivityIndicator({ size = "1em", variant = "accent", className,
         });
         return () => animation?.cancel();
     }, []);
-    return (_jsx("span", { role: "status", "aria-label": ariaLabel, className: cls(rootClassName, className), style: { width: size, height: size }, children: _jsx("svg", { ref: svgRef, "aria-hidden": "true", focusable: "false", viewBox: "0 0 24 24", width: "100%", height: "100%", children: spokes.map(({ angle, opacity }) => (_jsx("line", { x1: VIEWBOX_CENTER, y1: SPOKE_TOP, x2: VIEWBOX_CENTER, y2: SPOKE_TOP + SPOKE_LENGTH, stroke: "currentColor", strokeWidth: SPOKE_WIDTH, strokeLinecap: "round", opacity: opacity, transform: `rotate(${angle} ${VIEWBOX_CENTER} ${VIEWBOX_CENTER})` }, angle))) }) }));
+    return (_jsx("span", { role: "status", "aria-label": ariaLabel, className: cls(rootClassName, className), style: { width: dimension, height: dimension }, children: _jsx("svg", { ref: svgRef, "aria-hidden": "true", focusable: "false", viewBox: "0 0 24 24", width: "100%", height: "100%", children: spokes.map(({ angle, opacity }) => (_jsx("line", { x1: VIEWBOX_CENTER, y1: SPOKE_TOP, x2: VIEWBOX_CENTER, y2: SPOKE_TOP + SPOKE_LENGTH, stroke: "currentColor", strokeWidth: SPOKE_WIDTH, strokeLinecap: "round", opacity: opacity, transform: `rotate(${angle} ${VIEWBOX_CENTER} ${VIEWBOX_CENTER})` }, angle))) }) }));
 }
 const variantStyles = {
     primary: style({

package/dist/components/Button.d.ts

@@ -24,6 +24,8 @@ export type ButtonProps = Omit<RACButtonProps, "children" | "className"> & {
     size?: ButtonSize;
     variant?: ButtonVariant;
     variantColor?: ButtonVariantColor;
+    /** Visible text beside the indicator while pending. Defaults to children. */
+    pendingLabel?: string;
 };
 export declare function useButton(props: Pick<ButtonProps, "onClick" | "onFocus">, forwardedRef?: React.ForwardedRef<HTMLButtonElement>): [
     ButtonData,
@@ -40,5 +42,7 @@ export declare const Button: React.ForwardRefExoticComponent<Omit<RACButtonProps
     size?: ButtonSize;
     variant?: ButtonVariant;
     variantColor?: ButtonVariantColor;
+    /** Visible text beside the indicator while pending. Defaults to children. */
+    pendingLabel?: string;
 } & React.RefAttributes<HTMLButtonElement>>;
 export {};

package/dist/components/Button.js

@@ -1,8 +1,10 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import React, { useCallback } from "react";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { useCallback, useLayoutEffect, useState } from "react";
+import { AnimatePresence, motion, useIsPresent, useReducedMotion, } from "motion/react";
 import { useId, useObjectRef } from "react-aria";
-import { Button as RACButton, } from "react-aria-components";
+import { Button as RACButton, ProgressBar, } from "react-aria-components";
 import { style, useStyles } from "purse-styles";
+import { ActivityIndicator } from "./ActivityIndicator";
 import { useFocus } from "../hooks/useFocus";
 import { useRefCurrent } from "../hooks/useRefCurrent";
 import { backgroundColor, surfaceMixPercent, surfaceWash, } from "../tokens/background";
@@ -15,6 +17,7 @@ import { spacing } from "../tokens/spacing";
 import { text } from "../tokens/text";
 import { memoize } from "../utils/memoize";
 const buttonShadow = shadowVars.control;
+const pendingTransition = { duration: 0.15, ease: "easeInOut" };
 const disabledRaised = {
     cursor: "default",
     opacity: 1,
@@ -43,21 +46,28 @@ const buttonBaseClass = style(text({ size: "xs", fontWeight: 500, color: "highCo
     textOverflow: "ellipsis",
     overflow: "hidden",
     whiteSpace: "nowrap",
-    "& > svg": {
+    transition: `padding-inline-start ${pendingTransition.duration}s ease-in-out`,
+    "@media (prefers-reduced-motion: reduce)": {
+        transition: "none",
+    },
+    "& > svg, & [data-button-content] > svg": {
         flexShrink: 0,
     },
-    "&:has(> svg)": {
+    "&:has(> svg), &:has([data-button-content] > svg)": {
         paddingBlock: spacing.value(3),
     },
-    "&:has(> svg:first-child:not(:only-child))": {
+    "&:has(> svg:first-child:not(:only-child)), &:has([data-button-content] > svg:first-child:not(:only-child))": {
         paddingInlineStart: spacing.value(4),
     },
-    "&:has(> svg:last-child:not(:only-child))": {
+    "&:has(> svg:last-child:not(:only-child)), &:has([data-button-content] > svg:last-child:not(:only-child))": {
         paddingInlineEnd: spacing.value(4),
     },
-    "&:has(> svg:only-child)": {
+    "&:has(> svg:only-child), &:has([data-button-content] > svg:only-child)": {
         paddingInline: spacing.value(3),
     },
+    "&[data-pending]": {
+        paddingInlineStart: `calc((${controlSize.height} - ${iconSizeValues.xs}) / 2)`,
+    },
     "&:disabled": disabledRaised,
 });
 const buttonTextClass = style({
@@ -65,32 +75,60 @@ const buttonTextClass = style({
     minWidth: 0,
     textBox: "trim-both cap alphabetic",
 });
+const pendingIndicatorClass = style({
+    display: "inline-flex",
+    flexShrink: 0,
+    "& > span": { display: "inline-flex" },
+});
+const contentRootClass = style({
+    position: "relative",
+    display: "inline-flex",
+    alignItems: "center",
+    justifyContent: "center",
+    gap: "inherit",
+    minWidth: 0,
+});
+const contentLayerClass = style({
+    display: "inline-flex",
+    alignItems: "center",
+    gap: "inherit",
+    flexShrink: 0,
+    "&[inert]": {
+        position: "absolute",
+        insetBlock: 0,
+        insetInlineStart: 0,
+        width: "max-content",
+    },
+});
 const smallButtonClass = style(text({ size: "2xs", fontWeight: 500, color: "highContrast" }), {
     height: controlSize.smHeight,
     gap: spacing.value(1),
     paddingInline: spacing.value(4),
     paddingBlock: spacing.value(2),
-    "& > svg": {
+    "& > svg, & [data-button-content] > svg": {
         width: iconSizeValues.xs,
         height: iconSizeValues.xs,
     },
-    "&:has(> svg)": {
+    "&:has(> svg), &:has([data-button-content] > svg)": {
         paddingBlock: spacing.value(2),
     },
-    "&:has(> svg:first-child:not(:only-child))": {
+    "&:has(> svg:first-child:not(:only-child)), &:has([data-button-content] > svg:first-child:not(:only-child))": {
         paddingInlineStart: spacing.value(3),
     },
-    "&:has(> svg:last-child:not(:only-child))": {
+    "&:has(> svg:last-child:not(:only-child)), &:has([data-button-content] > svg:last-child:not(:only-child))": {
         paddingInlineEnd: spacing.value(3),
     },
-    "&:has(> svg:only-child)": {
+    "&:has(> svg:only-child), &:has([data-button-content] > svg:only-child)": {
         width: controlSize.smHeight,
         paddingInline: 0,
     },
+    "&[data-pending]": {
+        paddingInlineStart: `calc((${controlSize.smHeight} - ${iconSizeValues["2xs"]}) / 2)`,
+    },
 });
 const buttonClass = style(buttonBaseClass, {
     backgroundColor: backgroundColor.element,
-    "&:hover:not(:disabled)": {
+    "&:hover:not(:disabled):not([data-pending])": {
         backgroundColor: backgroundColor.elementHover,
     },
 });
@@ -101,7 +139,7 @@ const quietClass = memoize((color, hoverColor, wash) => style(buttonBaseClass, f
     color,
     backgroundColor: "transparent",
     boxShadow: "none",
-    "&:hover:not(:disabled)": {
+    "&:hover:not(:disabled):not([data-pending])": {
         color: hoverColor,
         backgroundColor: surfaceWash(wash, surfaceMixPercent.hover),
     },
@@ -163,7 +201,7 @@ const primaryClass = memoize((fill, textColor, lightEdge) => {
         backgroundColor: fill,
         backgroundImage: gradient,
         boxShadow: primaryShadow,
-        "&:hover:not(:disabled)": {
+        "&:hover:not(:disabled):not([data-pending])": {
             backgroundImage: `${primaryHoverSheen}, ${gradient}`,
         },
         "&:disabled": disabledRaised,
@@ -209,13 +247,37 @@ export const buttonStyles = {
     label: buttonTextClass,
 };
 export const Button = React.forwardRef(function Button(props, forwardedRef) {
-    const { children, className: classNameProp, onClick, onFocus, type = "button", size = "default", variant = "default", variantColor, isDisabled, ...buttonProps } = props;
+    const { children, className: classNameProp, onClick, onFocus, type = "button", size = "default", variant = "default", variantColor, isDisabled, pendingLabel, ...buttonProps } = props;
     const [, attributes] = useButton({ onClick, onFocus }, forwardedRef);
     const className = useStyles(buttonStyles.root({ variant, size, variantColor }));
     const textClassName = useStyles(buttonStyles.label);
+    const indicatorClassName = useStyles(pendingIndicatorClass);
     const mergedClassName = [className, classNameProp].filter(Boolean).join(" ");
-    return (_jsx(RACButton, { ...buttonProps, ref: attributes.ref, type: type, isDisabled: isDisabled, className: mergedClassName, onClick: attributes.onClick, onFocus: attributes.onFocus, children: renderButtonChildren(children, textClassName) }));
+    return (_jsx(RACButton, { ...buttonProps, ref: attributes.ref, type: type, isDisabled: isDisabled, className: mergedClassName, onClick: attributes.onClick, onFocus: attributes.onFocus, children: ({ isPending }) => (_jsxs(ButtonContents, { isPending: isPending, children: [isPending && (_jsx(ProgressBar, { isIndeterminate: true, "aria-label": "Pending", className: indicatorClassName, children: _jsx("span", { "aria-hidden": "true", children: _jsx(ActivityIndicator, { variant: "primary", size: size === "sm" ? "2xs" : "xs" }) }) })), renderButtonChildren(isPending ? (pendingLabel ?? children) : children, textClassName)] })) }));
 });
+function ButtonContents({ isPending, children, }) {
+    const [width, setWidth] = useState();
+    const reduceMotion = useReducedMotion();
+    const className = useStyles(contentRootClass);
+    const transition = reduceMotion ? { duration: 0 } : pendingTransition;
+    return (_jsx(motion.span, { className: className, initial: false, animate: { width: width ?? "auto" }, transition: transition, children: _jsx(AnimatePresence, { initial: false, children: _jsx(ButtonContentLayer, { onResize: setWidth, transition: transition, children: children }, isPending ? "pending" : "ready") }) }));
+}
+function ButtonContentLayer({ children, onResize, transition, }) {
+    const ref = React.useRef(null);
+    const isPresent = useIsPresent();
+    const className = useStyles(contentLayerClass);
+    useLayoutEffect(() => {
+        const node = ref.current;
+        if (!node || !isPresent)
+            return;
+        const measure = () => onResize(node.getBoundingClientRect().width);
+        measure();
+        const observer = new ResizeObserver(measure);
+        observer.observe(node);
+        return () => observer.disconnect();
+    }, [isPresent, onResize, ref]);
+    return (_jsx(motion.span, { ref: ref, className: className, "data-button-content": isPresent ? "" : undefined, "aria-hidden": !isPresent || undefined, inert: !isPresent || undefined, initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 }, transition: transition, children: children }));
+}
 function buttonVariantClass(variant, variantColor) {
     if (variant === "primary") {
         return coloredButtonClass("primary", variantColor ?? "accent");

package/dist/utils/shiki.js

@@ -1,5 +1,5 @@
 import { createHighlighterCore } from "shiki/core";
-import { createOnigurumaEngine } from "shiki/engine/oniguruma";
+import { createJavaScriptRegexEngine } from "shiki/engine/javascript";
 import { mauiShikiThemeDark, mauiShikiThemeLight } from "./mauiShikiTheme";
 /** Canonical Shiki language ids loaded into the highlighter. */
 export const supportedCodeLangs = [
@@ -36,7 +36,7 @@ function getHighlighter() {
                 import("@shikijs/langs/json"),
                 import("@shikijs/langs/bash"),
             ],
-            engine: createOnigurumaEngine(import("shiki/wasm")),
+            engine: createJavaScriptRegexEngine(),
         });
     }
     return highlighterPromise;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@tanishqkancharla/maui",
-	"version": "0.0.63",
+	"version": "0.0.65",
 	"description": "Maui design system",
 	"type": "module",
 	"main": "./dist/maui.js",
@@ -74,32 +74,32 @@
 		"test": "vitest",
 		"mcp:browser": "node .cursor/libretto-browser-mcp.mjs",
 		"mcp:agentation": "node .cursor/agentation-mcp.mjs",
-		"release": "npm publish --access public --provenance"
+		"release": "npm stage publish --access public --provenance"
 	},
 	"author": "Tanishq Kancharla",
 	"license": "MIT",
 	"devDependencies": {
 		"@base-ui/react": "^1.9.0",
-		"@modelcontextprotocol/sdk": "^1.32.1",
+		"@modelcontextprotocol/sdk": "^1.32.2",
 		"@resvg/resvg-js": "^2.6.2",
 		"@silk-hq/components": "^0.10.1",
-		"@tiptap/core": "^3.32.0",
-		"@tiptap/extension-placeholder": "^3.32.0",
-		"@tiptap/markdown": "^3.32.0",
-		"@tiptap/pm": "^3.32.0",
-		"@tiptap/react": "^3.32.0",
-		"@tiptap/starter-kit": "^3.32.0",
+		"@tiptap/core": "^3.32.1",
+		"@tiptap/extension-placeholder": "^3.32.1",
+		"@tiptap/markdown": "^3.32.1",
+		"@tiptap/pm": "^3.32.1",
+		"@tiptap/react": "^3.32.1",
+		"@tiptap/starter-kit": "^3.32.1",
 		"@types/lodash": "^4.17.27",
-		"@types/node": "^26.6.5",
+		"@types/node": "^26.6.6",
 		"@types/react": "^19.3.0",
 		"@types/react-dom": "^19.3.0",
 		"@vitejs/plugin-react": "^6.1.2",
 		"agentation": "^3.1.2",
 		"agentation-mcp": "^1.3.2",
-		"dialkit": "^2.0.2",
+		"dialkit": "^2.1.0",
 		"esbuild": "^0.28.2",
 		"libretto-browser-tools": "^0.1.2",
-		"motion": "^14.6.0",
+		"motion": "^14.8.0",
 		"process": "^0.11.10",
 		"satori": "^0.63.2",
 		"serve": "^14.2.6",
@@ -119,7 +119,6 @@
 		"@fontsource/commit-mono": "^5.3.0",
 		"@lezer/highlight": "^1.2.5",
 		"@radix-ui/colors": "^3.0.0",
-		"@streamdown/code": "^2.0.0",
 		"@types/inline-style-prefixer": "^5.0.3",
 		"@uiw/react-codemirror": "^4.25.12",
 		"beautiful-mermaid": "^1.1.3",

package/skills/maui/references/components/activity-indicator.md

@@ -2,15 +2,14 @@
 
 Gallery: `/components/activity-indicator`. Import from `"maui"`.
 
-iOS-style spinner: eight spokes with a fading tail that rotate in 45° steps. `size` is a CSS length (default `1em`). `variant`: `"accent"` (default) | `"primary"` (currentColor) | `"muted"`. `aria-label` defaults to `"Loading"`.
+iOS-style spinner: eight spokes with a fading tail that rotate in 45° steps. `size` accepts the icon t-shirt scale (`"2xs"`–`"xl"`, including large-scale sizing) or a CSS length; default `1em`. `variant`: `"accent"` (default) | `"primary"` (currentColor) | `"muted"`. `aria-label` defaults to `"Loading"`.
 
 On an accent fill, such as a primary button, pass `variant="primary"` so the spinner takes the button text color.
 
 Use it for loading: fetching, saving, syncing, and other indeterminate waits. When waiting on LLM inference, use [Thinking](thinking.md) instead. The `Spinner` icon is a static glyph, not this component.
 
 ```tsx
-<Button variant="primary">
-  <ActivityIndicator variant="primary" aria-label="Saving" />
-  Saving
-</Button>
+<ActivityIndicator size="xs" aria-label="Syncing" />
+<ActivityIndicator size="37px" />
+<Button variant="primary" isPending pendingLabel="Saving…">Save</Button>
 ```

package/skills/maui/references/components/buttons.md

@@ -14,6 +14,7 @@ Styled React Aria `Button` (default `type="button"`). Consumes `ButtonContext`,
 <Button variant="primary" variantColor="#6366f1">Indigo</Button>
 <Button size="sm">Compact</Button>
 <Button isDisabled>Wait</Button>
+<Button isPending={isSaving} pendingLabel="Saving…">Save</Button>
 <Button aria-label="Search"><Search size="sm" /></Button>
 <Button>
   <Plus size="sm" />
@@ -27,6 +28,8 @@ Styled React Aria `Button` (default `type="button"`). Consumes `ButtonContext`,
 | `variant` | `"default"` (raised element) \| `"quiet"` (no shadow, transparent) \| `"primary"` (solid fill) |
 | `variantColor` | Palette name or opaque `#hex` / `rgb(...)`. Primary default is `"accent"`. Quiet ignores color unless set; when set, tints the label with no fill |
 | `isDisabled` | React Aria name. Maps to native `disabled`. **No `disabled` React prop** |
+| `isPending` | Shows a current-color indicator beside visible content: `xs` (14px) by default, `2xs` (12px) for small buttons, with equal leading/top/bottom insets. Crossfades content and resizes over 150ms in both directions; reduced motion switches instantly. Blocks activation immediately and suppresses hover fill, retaining focusability and variant color. Controlled by the caller, not by returned promises |
+| `pendingLabel` | Optional visible string replacing children while pending (e.g. `"Saving…"`). Omit to keep children; provide it to replace an icon with progress text |
 | `onClick` | Still supported. React Aria also exposes `onPress` |
 | `children` | Text is wrapped for cap-height trim; SVG icons sit beside text. Icon-only needs `aria-label` |
 

package/skills/maui/references/components/code.md

@@ -8,7 +8,7 @@ Gallery: `/components/code`. Import from `"maui"`.
 <CodeBlock lang="ts">{`const n = 1`}</CodeBlock>
 ```
 
-`CodeBlock` highlights with Shiki using the resolved theme. `lang` is required. Unsupported langs / pending highlight render a plain `<pre>`.
+`CodeBlock` highlights with Shiki's JavaScript engine using the resolved theme. `lang` is required. Unsupported langs / pending highlight render a plain `<pre>`.
 
 ## Styles
 

package/src/components/ActivityIndicator.test.tsx

@@ -0,0 +1,30 @@
+import { renderToStaticMarkup } from "react-dom/server"
+import { PurseProvider } from "purse-styles"
+import { afterAll, beforeAll, expect, it, vi } from "vitest"
+import { iconSizeValues } from "../tokens/sizing"
+import { ActivityIndicator } from "./ActivityIndicator"
+
+beforeAll(() => {
+	vi.stubGlobal("document", { createElement: () => ({}) })
+})
+
+afterAll(() => {
+	vi.unstubAllGlobals()
+})
+
+it("uses icon scale tokens for t-shirt sizes while preserving CSS lengths and the default", () => {
+	for (const [size, expected] of [
+		["2xs", iconSizeValues["2xs"]],
+		["xs", iconSizeValues.xs],
+		["37px", "37px"],
+		[undefined, "1em"],
+	] as const) {
+		const html = renderToStaticMarkup(
+			<PurseProvider>
+				<ActivityIndicator size={size} />
+			</PurseProvider>,
+		)
+		expect(html).toContain(`width:${expected}`)
+		expect(html).toContain(`height:${expected}`)
+	}
+})

package/src/components/ActivityIndicator.tsx

@@ -1,6 +1,7 @@
 import { useEffect, useRef } from "react"
 import { style, useStyles } from "purse-styles"
 import { colors } from "../tokens/colors"
+import { iconSizeValues, type IconSize } from "../tokens/sizing"
 import { cls } from "../utils/cls"
 
 // Geometry is in a 24×24 viewBox. Spokes end this far from the center.
@@ -27,7 +28,8 @@ const spokes = Array.from({ length: SPOKE_COUNT }, (_, index) => {
 export type ActivityIndicatorVariant = "primary" | "accent" | "muted"
 
 export type ActivityIndicatorProps = {
-	size?: string
+	/** Icon t-shirt size, or a custom CSS length. Defaults to 1em. */
+	size?: IconSize | (string & {})
 	variant?: ActivityIndicatorVariant
 	className?: string
 	"aria-label"?: string
@@ -46,6 +48,9 @@ export function ActivityIndicator({
 }: ActivityIndicatorProps) {
 	const svgRef = useRef<SVGSVGElement>(null)
 	const rootClassName = useStyles(rootClass, variantStyles[variant])
+	const dimension = Object.hasOwn(iconSizeValues, size)
+		? iconSizeValues[size as IconSize]
+		: size
 
 	useEffect(() => {
 		const animation = svgRef.current?.animate(
@@ -64,7 +69,7 @@ export function ActivityIndicator({
 			role="status"
 			aria-label={ariaLabel}
 			className={cls(rootClassName, className)}
-			style={{ width: size, height: size }}
+			style={{ width: dimension, height: dimension }}
 		>
 			<svg
 				ref={svgRef}

package/src/components/Button.test.tsx

@@ -0,0 +1,46 @@
+import { renderToStaticMarkup } from "react-dom/server"
+import { ButtonContext } from "react-aria-components"
+import { PurseProvider } from "purse-styles"
+import { afterAll, beforeAll, expect, it, vi } from "vitest"
+import { Button } from "./Button"
+
+// Maui's client-only focus store has no server snapshot.
+vi.mock("../hooks/useFocus", () => ({
+	useFocus: () => [false, {}],
+}))
+
+beforeAll(() => {
+	vi.stubGlobal("document", { createElement: () => ({}) })
+})
+
+afterAll(() => {
+	vi.unstubAllGlobals()
+})
+
+it("shows progress beside a visible label only while pending, including from context", () => {
+	const render = (isPending: boolean, pendingLabel?: string) =>
+		renderToStaticMarkup(
+			<PurseProvider>
+				<ButtonContext.Provider value={{ isPending }}>
+					<Button pendingLabel={pendingLabel}>Save changes</Button>
+				</ButtonContext.Provider>
+			</PurseProvider>,
+		)
+
+	const pending = render(true, "Saving changes…")
+	expect(pending).toContain("Saving changes…")
+	expect(pending).not.toContain("Save changes")
+	expect(pending).toContain('role="progressbar"')
+	expect(pending).toContain('aria-label="Pending"')
+	expect(pending).toContain('aria-disabled="true"')
+	expect(pending).not.toMatch(/\sdisabled=/)
+
+	const fallback = render(true)
+	expect(fallback).toContain("Save changes")
+	expect(fallback).toContain('role="progressbar"')
+
+	const ready = render(false, "Saving changes…")
+	expect(ready).toContain("Save changes")
+	expect(ready).not.toContain("Saving changes…")
+	expect(ready).not.toContain('role="progressbar"')
+})

package/src/components/Button.tsx

@@ -1,10 +1,19 @@
-import React, { useCallback } from "react"
+import React, { useCallback, useLayoutEffect, useState } from "react"
+import {
+	AnimatePresence,
+	motion,
+	useIsPresent,
+	useReducedMotion,
+	type Transition,
+} from "motion/react"
 import { useId, useObjectRef } from "react-aria"
 import {
 	Button as RACButton,
+	ProgressBar,
 	type ButtonProps as RACButtonProps,
 } from "react-aria-components"
 import { style, useStyles } from "purse-styles"
+import { ActivityIndicator } from "./ActivityIndicator"
 import { useFocus } from "../hooks/useFocus"
 import { useRefCurrent } from "../hooks/useRefCurrent"
 import {
@@ -26,6 +35,8 @@ export type ButtonSize = "default" | "sm"
 
 const buttonShadow = shadowVars.control
 
+const pendingTransition = { duration: 0.15, ease: "easeInOut" } as const
+
 const disabledRaised = {
 	cursor: "default",
 	opacity: 1,
@@ -61,21 +72,30 @@ const buttonBaseClass = style(
 		textOverflow: "ellipsis",
 		overflow: "hidden",
 		whiteSpace: "nowrap",
-		"& > svg": {
+		transition: `padding-inline-start ${pendingTransition.duration}s ease-in-out`,
+		"@media (prefers-reduced-motion: reduce)": {
+			transition: "none",
+		},
+		"& > svg, & [data-button-content] > svg": {
 			flexShrink: 0,
 		},
-		"&:has(> svg)": {
+		"&:has(> svg), &:has([data-button-content] > svg)": {
 			paddingBlock: spacing.value(3),
 		},
-		"&:has(> svg:first-child:not(:only-child))": {
-			paddingInlineStart: spacing.value(4),
-		},
-		"&:has(> svg:last-child:not(:only-child))": {
-			paddingInlineEnd: spacing.value(4),
-		},
-		"&:has(> svg:only-child)": {
+		"&:has(> svg:first-child:not(:only-child)), &:has([data-button-content] > svg:first-child:not(:only-child))":
+			{
+				paddingInlineStart: spacing.value(4),
+			},
+		"&:has(> svg:last-child:not(:only-child)), &:has([data-button-content] > svg:last-child:not(:only-child))":
+			{
+				paddingInlineEnd: spacing.value(4),
+			},
+		"&:has(> svg:only-child), &:has([data-button-content] > svg:only-child)": {
 			paddingInline: spacing.value(3),
 		},
+		"&[data-pending]": {
+			paddingInlineStart: `calc((${controlSize.height} - ${iconSizeValues.xs}) / 2)`,
+		},
 		"&:disabled": disabledRaised,
 	},
 )
@@ -86,6 +106,34 @@ const buttonTextClass = style({
 	textBox: "trim-both cap alphabetic",
 })
 
+const pendingIndicatorClass = style({
+	display: "inline-flex",
+	flexShrink: 0,
+	"& > span": { display: "inline-flex" },
+})
+
+const contentRootClass = style({
+	position: "relative",
+	display: "inline-flex",
+	alignItems: "center",
+	justifyContent: "center",
+	gap: "inherit",
+	minWidth: 0,
+})
+
+const contentLayerClass = style({
+	display: "inline-flex",
+	alignItems: "center",
+	gap: "inherit",
+	flexShrink: 0,
+	"&[inert]": {
+		position: "absolute",
+		insetBlock: 0,
+		insetInlineStart: 0,
+		width: "max-content",
+	},
+})
+
 const smallButtonClass = style(
 	text({ size: "2xs", fontWeight: 500, color: "highContrast" }),
 	{
@@ -93,29 +141,34 @@ const smallButtonClass = style(
 		gap: spacing.value(1),
 		paddingInline: spacing.value(4),
 		paddingBlock: spacing.value(2),
-		"& > svg": {
+		"& > svg, & [data-button-content] > svg": {
 			width: iconSizeValues.xs,
 			height: iconSizeValues.xs,
 		},
-		"&:has(> svg)": {
+		"&:has(> svg), &:has([data-button-content] > svg)": {
 			paddingBlock: spacing.value(2),
 		},
-		"&:has(> svg:first-child:not(:only-child))": {
-			paddingInlineStart: spacing.value(3),
-		},
-		"&:has(> svg:last-child:not(:only-child))": {
-			paddingInlineEnd: spacing.value(3),
-		},
-		"&:has(> svg:only-child)": {
+		"&:has(> svg:first-child:not(:only-child)), &:has([data-button-content] > svg:first-child:not(:only-child))":
+			{
+				paddingInlineStart: spacing.value(3),
+			},
+		"&:has(> svg:last-child:not(:only-child)), &:has([data-button-content] > svg:last-child:not(:only-child))":
+			{
+				paddingInlineEnd: spacing.value(3),
+			},
+		"&:has(> svg:only-child), &:has([data-button-content] > svg:only-child)": {
 			width: controlSize.smHeight,
 			paddingInline: 0,
 		},
+		"&[data-pending]": {
+			paddingInlineStart: `calc((${controlSize.smHeight} - ${iconSizeValues["2xs"]}) / 2)`,
+		},
 	},
 )
 
 const buttonClass = style(buttonBaseClass, {
 	backgroundColor: backgroundColor.element,
-	"&:hover:not(:disabled)": {
+	"&:hover:not(:disabled):not([data-pending])": {
 		backgroundColor: backgroundColor.elementHover,
 	},
 })
@@ -129,7 +182,7 @@ const quietClass = memoize((color: string, hoverColor: string, wash: string) =>
 		color,
 		backgroundColor: "transparent",
 		boxShadow: "none",
-		"&:hover:not(:disabled)": {
+		"&:hover:not(:disabled):not([data-pending])": {
 			color: hoverColor,
 			backgroundColor: surfaceWash(wash, surfaceMixPercent.hover),
 		},
@@ -213,7 +266,7 @@ const primaryClass = memoize(
 			backgroundColor: fill,
 			backgroundImage: gradient,
 			boxShadow: primaryShadow,
-			"&:hover:not(:disabled)": {
+			"&:hover:not(:disabled):not([data-pending])": {
 				backgroundImage: `${primaryHoverSheen}, ${gradient}`,
 			},
 			"&:disabled": disabledRaised,
@@ -262,6 +315,8 @@ export type ButtonProps = Omit<RACButtonProps, "children" | "className"> & {
 	size?: ButtonSize
 	variant?: ButtonVariant
 	variantColor?: ButtonVariantColor
+	/** Visible text beside the indicator while pending. Defaults to children. */
+	pendingLabel?: string
 }
 
 export function useButton(
@@ -329,6 +384,7 @@ export const Button = React.forwardRef(function Button(
 		variant = "default",
 		variantColor,
 		isDisabled,
+		pendingLabel,
 		...buttonProps
 	} = props
 	const [, attributes] = useButton({ onClick, onFocus }, forwardedRef)
@@ -336,6 +392,7 @@ export const Button = React.forwardRef(function Button(
 		buttonStyles.root({ variant, size, variantColor }),
 	)
 	const textClassName = useStyles(buttonStyles.label)
+	const indicatorClassName = useStyles(pendingIndicatorClass)
 	const mergedClassName = [className, classNameProp].filter(Boolean).join(" ")
 
 	return (
@@ -348,11 +405,104 @@ export const Button = React.forwardRef(function Button(
 			onClick={attributes.onClick}
 			onFocus={attributes.onFocus}
 		>
-			{renderButtonChildren(children, textClassName)}
+			{({ isPending }) => (
+				<ButtonContents isPending={isPending}>
+					{isPending && (
+						<ProgressBar
+							isIndeterminate
+							aria-label="Pending"
+							className={indicatorClassName}
+						>
+							<span aria-hidden="true">
+								<ActivityIndicator
+									variant="primary"
+									size={size === "sm" ? "2xs" : "xs"}
+								/>
+							</span>
+						</ProgressBar>
+					)}
+					{renderButtonChildren(
+						isPending ? (pendingLabel ?? children) : children,
+						textClassName,
+					)}
+				</ButtonContents>
+			)}
 		</RACButton>
 	)
 })
 
+function ButtonContents({
+	isPending,
+	children,
+}: {
+	isPending: boolean
+	children: React.ReactNode
+}) {
+	const [width, setWidth] = useState<number>()
+	const reduceMotion = useReducedMotion()
+	const className = useStyles(contentRootClass)
+	const transition = reduceMotion ? { duration: 0 } : pendingTransition
+
+	return (
+		<motion.span
+			className={className}
+			initial={false}
+			animate={{ width: width ?? "auto" }}
+			transition={transition}
+		>
+			<AnimatePresence initial={false}>
+				<ButtonContentLayer
+					key={isPending ? "pending" : "ready"}
+					onResize={setWidth}
+					transition={transition}
+				>
+					{children}
+				</ButtonContentLayer>
+			</AnimatePresence>
+		</motion.span>
+	)
+}
+
+function ButtonContentLayer({
+	children,
+	onResize,
+	transition,
+}: {
+	children: React.ReactNode
+	onResize: (width: number) => void
+	transition: Transition
+}) {
+	const ref = React.useRef<HTMLSpanElement>(null)
+	const isPresent = useIsPresent()
+	const className = useStyles(contentLayerClass)
+
+	useLayoutEffect(() => {
+		const node = ref.current
+		if (!node || !isPresent) return
+		const measure = () => onResize(node.getBoundingClientRect().width)
+		measure()
+		const observer = new ResizeObserver(measure)
+		observer.observe(node)
+		return () => observer.disconnect()
+	}, [isPresent, onResize, ref])
+
+	return (
+		<motion.span
+			ref={ref}
+			className={className}
+			data-button-content={isPresent ? "" : undefined}
+			aria-hidden={!isPresent || undefined}
+			inert={!isPresent || undefined}
+			initial={{ opacity: 0 }}
+			animate={{ opacity: 1 }}
+			exit={{ opacity: 0 }}
+			transition={transition}
+		>
+			{children}
+		</motion.span>
+	)
+}
+
 function buttonVariantClass(
 	variant: ButtonVariant,
 	variantColor: ButtonVariantColor | undefined,

package/src/pages/ActivityIndicatorPage.tsx

@@ -2,7 +2,9 @@ import { style, useStyles } from "purse-styles"
 import { Panel } from "./Panel"
 import { ActivityIndicator } from "../components/ActivityIndicator"
 import { Button } from "../components/Button"
+import { Code } from "../components/Code"
 import { Prose } from "../components/Prose"
+import { Text } from "../components/Text"
 import { H2, H3, P } from "../components/Typography"
 import { flex } from "../tokens/layout"
 import { text } from "../tokens/text"
@@ -40,22 +42,33 @@ export function ActivityIndicatorPage() {
 			</Panel>
 
 			<H3>Sizes</H3>
+			<P>
+				Use the same t-shirt sizes as icons, from <Code>2xs</Code> to{" "}
+				<Code>xl</Code>, or a custom CSS length. The default is 1em.
+			</P>
 			<Panel className={rowClassName}>
-				<ActivityIndicator size="1em" aria-label="Loading, small" />
-				<ActivityIndicator size="20px" aria-label="Loading, medium" />
-				<ActivityIndicator size="37px" aria-label="Loading, large" />
+				{(["2xs", "xs", "sm", "md", "lg", "xl"] as const).map((size) => (
+					<div className={columnClassName} key={size}>
+						<ActivityIndicator size={size} aria-label={`Loading, ${size}`} />
+						<Text size="xs" color="lowContrast">
+							{size}
+						</Text>
+					</div>
+				))}
+				<div className={columnClassName}>
+					<ActivityIndicator size="37px" aria-label="Loading, custom size" />
+					<Text size="xs" color="lowContrast">
+						37px
+					</Text>
+				</div>
 			</Panel>
 
 			<H3>In a button</H3>
 			<Panel className={rowClassName}>
-				<Button variant="primary">
-					<ActivityIndicator variant="primary" aria-label="Saving" />
+				<Button variant="primary" isPending>
 					Saving
 				</Button>
-				<Button>
-					<ActivityIndicator aria-label="Refreshing" />
-					Refreshing
-				</Button>
+				<Button isPending>Refreshing</Button>
 			</Panel>
 		</Prose>
 	)

package/src/pages/ButtonsPage.tsx

@@ -1,4 +1,4 @@
-import { useState } from "react"
+import { useEffect, useState } from "react"
 import { Button } from "../components/Button"
 import { Code } from "../components/Code"
 import {
@@ -9,6 +9,7 @@ import {
 } from "../components/Dialog"
 import { Overlay } from "../components/Overlay"
 import { Prose } from "../components/Prose"
+import { Text } from "../components/Text"
 import { H2, H3, P } from "../components/Typography"
 import { Flex } from "../components/Utils"
 import { Archive, DotsHorizontal, Plus, Search } from "../icons"
@@ -19,6 +20,17 @@ import { borderColor } from "../tokens/borders"
 export function ButtonsPage() {
 	const [dialogOpen, setDialogOpen] = useState(false)
 	const [overlayOpen, setOverlayOpen] = useState(false)
+	const [isSaving, setIsSaving] = useState(false)
+	const [saveCount, setSaveCount] = useState(0)
+
+	useEffect(() => {
+		if (!isSaving) return
+		const timeout = setTimeout(() => {
+			setIsSaving(false)
+			setSaveCount((count) => count + 1)
+		}, 2000)
+		return () => clearTimeout(timeout)
+	}, [isSaving])
 
 	return (
 		<Prose style={{ marginBottom: "32px" }}>
@@ -80,6 +92,52 @@ export function ButtonsPage() {
 				</Button>
 			</Flex>
 
+			<H3>Pending</H3>
+			<P>
+				<Code>isPending</Code> shows an activity indicator beside the label,
+				keeps the button’s color and focus, and prevents repeat activation. Use{" "}
+				<Code>pendingLabel</Code> for visible progress text; otherwise the
+				original children stay visible.
+			</P>
+			<Flex row alignItems="center" gap={4} style={{ flexWrap: "wrap" }}>
+				<Button isPending>Submitting</Button>
+				<Button variant="primary" isPending pendingLabel="Saving…">
+					Save
+				</Button>
+				<Button variant="quiet" isPending pendingLabel="Syncing…">
+					Sync
+				</Button>
+				<Button
+					variant="primary"
+					variantColor="blue"
+					isPending
+					pendingLabel="Uploading…"
+				>
+					Upload
+				</Button>
+				<Button size="sm" isPending pendingLabel="Creating…">
+					<Plus />
+					Create
+				</Button>
+			</Flex>
+			<Flex row alignItems="center" gap={4} style={{ flexWrap: "wrap" }}>
+				<Button
+					variant="primary"
+					isPending={isSaving}
+					pendingLabel="Saving changes…"
+					onPress={() => setIsSaving(true)}
+				>
+					Save changes
+				</Button>
+				<Text size="sm" color="lowContrast" role="status">
+					{isSaving
+						? "Saving for two seconds…"
+						: saveCount > 0
+							? `Saved ${saveCount} ${saveCount === 1 ? "time" : "times"}. Try again.`
+							: "Click to try the pending state."}
+				</Text>
+			</Flex>
+
 			<H3>Primary</H3>
 			<P>
 				<Code>variant="primary"</Code> fills with step 9 of{" "}
@@ -140,9 +198,8 @@ export function ButtonsPage() {
 			<H3>Quiet</H3>
 			<P>
 				<Code>variant="quiet"</Code> has no fill. <Code>variantColor</Code>{" "}
-				tints the label and icon. Hover mixes <Code>grayAlpha[9]</Code> (or
-				that color’s alpha 9) into transparent using the shared 3.5% control
-				wash.
+				tints the label and icon. Hover mixes <Code>grayAlpha[9]</Code> (or that
+				color’s alpha 9) into transparent using the shared 3.5% control wash.
 			</P>
 			<Flex row alignItems="center" gap={4} style={{ flexWrap: "wrap" }}>
 				<Button variant="quiet">Button</Button>

package/src/patterns/AssistantMessage.tsx

@@ -6,7 +6,6 @@ import {
 	defaultRehypePlugins,
 	useIsCodeFenceIncomplete,
 } from "streamdown"
-import { code } from "@streamdown/code"
 import { style, useStyles } from "purse-styles"
 import { CodeBlock } from "../components/CodeBlock"
 import { proseContainerStyle } from "../components/Prose"
@@ -143,7 +142,6 @@ export function AssistantMessage({
 			<Streamdown
 				className={streamdownClassName}
 				components={streamdownComponents}
-				plugins={{ code }}
 				rehypePlugins={rehypePlugins}
 				// `animated` must stay stably enabled; only `isAnimating` toggles.
 				// Flipping `animated`/`mode` with the stream resets stagger state and

package/src/utils/shiki.ts

@@ -1,5 +1,5 @@
 import { createHighlighterCore } from "shiki/core"
-import { createOnigurumaEngine } from "shiki/engine/oniguruma"
+import { createJavaScriptRegexEngine } from "shiki/engine/javascript"
 import type { HighlighterCore } from "shiki"
 import type { ResolvedTheme } from "../theme/ThemeContext"
 import { mauiShikiThemeDark, mauiShikiThemeLight } from "./mauiShikiTheme"
@@ -44,7 +44,7 @@ function getHighlighter() {
 				import("@shikijs/langs/json"),
 				import("@shikijs/langs/bash"),
 			],
-			engine: createOnigurumaEngine(import("shiki/wasm")),
+			engine: createJavaScriptRegexEngine(),
 		})
 	}