@tanishqkancharla/maui 0.0.62 → 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/Banner.d.ts

@@ -0,0 +1,32 @@
+import type { ComponentPropsWithoutRef, ReactNode } from "react";
+export type BannerTone = "neutral" | "info" | "success" | "warning" | "danger";
+export type BannerLayout = "inline" | "stacked";
+export type BannerProps = Omit<ComponentPropsWithoutRef<"div">, "title"> & {
+    tone?: BannerTone;
+    /** Use stacked for multi-sentence messages or a title with supporting text. */
+    layout?: BannerLayout;
+    title?: ReactNode;
+    /** A decorative icon. Defaults to the tone's icon; false hides it. */
+    icon?: ReactNode | false;
+    actions?: ReactNode;
+    /** Adds a close button. The caller owns visibility. */
+    onDismiss?: () => void;
+    dismissLabel?: string;
+};
+/** Plain div parts; icon is decorative. Layout changes action placement, not semantics. */
+export declare const bannerStyles: {
+    readonly root: (args_0?: {
+        tone?: BannerTone;
+    } | undefined) => import("purse-styles").StyleElement;
+    readonly icon: import("purse-styles").StyleElement;
+    readonly body: (args_0?: {
+        layout?: BannerLayout;
+    } | undefined) => import("purse-styles").StyleElement;
+    readonly content: import("purse-styles").StyleElement;
+    readonly title: import("purse-styles").StyleElement;
+    readonly description: import("purse-styles").StyleElement;
+    readonly actions: import("purse-styles").StyleElement;
+    readonly dismiss: import("purse-styles").StyleElement;
+};
+/** Persistent in-flow message. Set role="status" or role="alert" explicitly to announce it. */
+export declare function Banner({ tone, layout, title, children, icon, actions, onDismiss, dismissLabel, className, ...props }: BannerProps): import("react").JSX.Element;

package/dist/components/Banner.js

@@ -0,0 +1,106 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { style, useStyles } from "purse-styles";
+import { Button } from "./Button";
+import { Text } from "./Text";
+import { CheckCircle } from "../icons/CheckCircle";
+import { Close } from "../icons/Close";
+import { CircleX } from "../icons/CircleX";
+import { Information } from "../icons/Information";
+import { WarningTriangle } from "../icons/WarningTriangle";
+import { colors } from "../tokens/colors";
+import { radius } from "../tokens/radius";
+import { controlSize } from "../tokens/sizing";
+import { spacing } from "../tokens/spacing";
+import { text } from "../tokens/text";
+import { cls } from "../utils/cls";
+import { memoize } from "../utils/memoize";
+const palettes = {
+    neutral: "gray",
+    info: "blue",
+    success: "green",
+    warning: "amber",
+    danger: "red",
+};
+const icons = {
+    neutral: Information,
+    info: Information,
+    success: CheckCircle,
+    warning: WarningTriangle,
+    danger: CircleX,
+};
+const root = memoize(({ tone = "neutral" } = {}) => style(text({ size: "sm" }), radius.lg, spacing.padding({ all: 3 }), {
+    display: "flex",
+    alignItems: "flex-start",
+    gap: spacing.value(3),
+    minWidth: 0,
+    backgroundColor: colors[palettes[tone]][2],
+    border: `1px solid ${colors[palettes[tone]][6]}`,
+    // Give text and icons the same inset beside standard-height controls.
+    "--banner-text-inset": `max(0px, calc((${controlSize.height} - 1lh) / 2))`,
+    "--banner-icon-color": colors[palettes[tone]][11],
+}));
+const icon = style({
+    flex: "0 0 auto",
+    width: "1lh",
+    height: "1lh",
+    marginBlockStart: "var(--banner-text-inset)",
+    color: "var(--banner-icon-color)",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    "& > svg": { width: "100%", height: "100%" },
+});
+const body = memoize(({ layout = "inline" } = {}) => style({
+    display: "flex",
+    flex: "1 1 auto",
+    minWidth: 0,
+    flexDirection: layout === "stacked" ? "column" : "row",
+    flexWrap: "wrap",
+    alignItems: "flex-start",
+    gap: spacing.value(4),
+    "& > :first-child": {
+        flex: layout === "inline" ? "1 1 12rem" : "0 1 auto",
+    },
+}));
+const content = style({
+    minWidth: 0,
+    maxWidth: "100%",
+    paddingBlock: "var(--banner-text-inset)",
+    overflowWrap: "anywhere",
+});
+const title = style({ display: "block" });
+const description = style({ display: "block" });
+const actions = style({
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "flex-end",
+    flexWrap: "wrap",
+    gap: spacing.value(4),
+    maxWidth: "100%",
+    marginInlineStart: "auto",
+});
+const dismiss = style({ flexShrink: 0 });
+/** Plain div parts; icon is decorative. Layout changes action placement, not semantics. */
+export const bannerStyles = {
+    root,
+    icon,
+    body,
+    content,
+    title,
+    description,
+    actions,
+    dismiss,
+};
+/** Persistent in-flow message. Set role="status" or role="alert" explicitly to announce it. */
+export function Banner({ tone = "neutral", layout = "inline", title, children, icon, actions, onDismiss, dismissLabel = "Dismiss notification", className, ...props }) {
+    const rootClassName = useStyles(bannerStyles.root({ tone }));
+    const iconClassName = useStyles(bannerStyles.icon);
+    const bodyClassName = useStyles(bannerStyles.body({ layout }));
+    const contentClassName = useStyles(bannerStyles.content);
+    const titleClassName = useStyles(bannerStyles.title);
+    const descriptionClassName = useStyles(bannerStyles.description, title != null && style({ color: colors.gray[11] }));
+    const actionsClassName = useStyles(bannerStyles.actions);
+    const dismissClassName = useStyles(bannerStyles.dismiss);
+    const Icon = icons[tone];
+    return (_jsxs("div", { ...props, className: cls(rootClassName, className), children: [icon !== false && (_jsx("div", { className: iconClassName, "aria-hidden": "true", children: icon ?? _jsx(Icon, {}) })), _jsxs("div", { className: bodyClassName, children: [_jsxs("div", { className: contentClassName, children: [title != null && (_jsx(Text, { size: "sm", fontWeight: 500, className: titleClassName, children: title })), children != null && (_jsx("div", { className: descriptionClassName, children: children }))] }), actions != null && actions !== false && (_jsx("div", { className: actionsClassName, children: actions }))] }), onDismiss && (_jsx(Button, { variant: "quiet", variantColor: palettes[tone], "aria-label": dismissLabel, onPress: onDismiss, className: dismissClassName, children: _jsx(Close, { size: "sm" }) }))] }));
+}

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

@@ -20,6 +20,7 @@ export { prose, proseRhythm, proseHtml, proseStreamingMarkers, type ProseSize, }
 export { visuallyHidden } from "./tokens/visuallyHidden";
 export { Avatar, avatarStyles } from "./components/Avatar";
 export { Badge, badgeStyles } from "./components/Badge";
+export { Banner, bannerStyles, type BannerProps, type BannerTone, type BannerLayout, } from "./components/Banner";
 export { LogoIcon, type LogoIconProps } from "./components/LogoIcon";
 export { Button, buttonStyles, useButton, type ButtonCssColor, type ButtonProps, type ButtonSize, type ButtonVariant, type ButtonVariantColor, } from "./components/Button";
 export { TabBar, tabBarStyles, type TabBarItem, type TabBarProps, } from "./components/TabBar";

package/dist/maui.js

@@ -23,6 +23,7 @@ export { visuallyHidden } from "./tokens/visuallyHidden";
 // Components
 export { Avatar, avatarStyles } from "./components/Avatar";
 export { Badge, badgeStyles } from "./components/Badge";
+export { Banner, bannerStyles, } from "./components/Banner";
 export { LogoIcon } from "./components/LogoIcon";
 export { Button, buttonStyles, useButton, } from "./components/Button";
 export { TabBar, tabBarStyles, } from "./components/TabBar";

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.62",
+	"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/SKILL.md

@@ -5,10 +5,8 @@ description: Conventions for installing, updating, and consuming the Maui design
 
 # Maui
 
-Read the reference for the work you are doing:
-
 - When installing or updating the Maui package, read [installing_maui.md](references/installing_maui.md).
-- When designing, implementing, or reviewing UI with Maui, read [design_conventions.md](references/design_conventions.md), then open every matching component, pattern, or app reference below.
+- For Maui UI work, read [design_conventions.md](references/design_conventions.md) and all matching references below.
 
 Use Maui components. When one can't do what you need, build from the matching `react-aria-components` element with that component's exported styles (`buttonStyles`, `listBoxStyles`, …).
 
@@ -24,6 +22,7 @@ Use Maui components. When one can't do what you need, build from the matching `r
 | ---------------- | -------------------------------------------------------------------------------------------- |
 | Avatar           | [avatar.md](references/components/avatar.md)                                                 |
 | Badge            | [badge.md](references/components/badge.md)                                                   |
+| Banner           | [banner.md](references/components/banner.md)                                                 |
 | Buttons          | [buttons.md](references/components/buttons.md) (`Button`, `Overlay`, `Dialog`)               |
 | Tab bar          | [tab-bar.md](references/components/tab-bar.md)                                               |
 | Drawer           | [drawer.md](references/components/drawer.md)                                                 |

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/banner.md

@@ -0,0 +1,42 @@
+# Banner
+
+Gallery: `/components/banner`. Import `Banner` from `"maui"`.
+
+Persistent in-flow message. Use `layout="inline"` (default) for one sentence,
+even when it wraps. Always use `layout="stacked"` for multiple sentences or a
+title with supporting text. Choose layout explicitly; Banner does not parse copy.
+
+```tsx
+<Banner
+	tone="info"
+	actions={<Button variant="quiet" variantColor="blue" onPress={reload}>Reload</Button>}
+>
+	A new version is available.
+</Banner>
+
+<Banner
+	tone="warning"
+	layout="stacked"
+	title="Your connection was interrupted."
+	actions={<Button variant="quiet" variantColor="amber" onPress={reconnect}>Reconnect</Button>}
+>
+	Changes are saved on this device. Reconnect to sync.
+</Banner>
+```
+
+- `tone`: `neutral` (default), `info`, `success`, `warning`, `danger`.
+- Compose `actions` with quiet buttons in the matching palette: gray, blue, green,
+  amber, red respectively. Banner does not restyle supplied actions. Stacked and
+  wrapped actions align right.
+- `title` and children accept React nodes. `icon` defaults to the tone's icon;
+  supply a decorative SVG or `false` to hide it. Icons match the first line height.
+  Icon-to-text gap and outer padding share spacing step 3 (6px; 8px at large scale).
+- `onDismiss` adds a close button; caller owns visibility. `dismissLabel` defaults
+  to `"Dismiss notification"`. No timer or automatic dismissal.
+- No automatic announcements. Set `role="status"` for live updates or
+  `role="alert"` for urgent failures; tone does not determine urgency.
+
+## Styles
+
+**Banner** — `bannerStyles`: `root({ tone })`, `icon`, `body({ layout })`, `content`,
+`title`, `description`, `actions`, `dismiss`. Plain div parts; icon is decorative.

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