@tanishqkancharla/maui 0.0.60 → 0.0.62

package/dist/components/ActivityIndicator.d.ts

@@ -0,0 +1,13 @@
+export type ActivityIndicatorVariant = "primary" | "accent" | "muted";
+export type ActivityIndicatorProps = {
+    size?: string;
+    variant?: ActivityIndicatorVariant;
+    className?: string;
+    "aria-label"?: string;
+};
+/**
+ * iOS-style spinner: eight rounded spokes with a fading tail. The wheel
+ * rotates in discrete 45° steps, like UIActivityIndicatorView, so the bright
+ * spoke appears to hop clockwise.
+ */
+export declare function ActivityIndicator({ size, variant, className, "aria-label": ariaLabel, }: ActivityIndicatorProps): import("react").JSX.Element;

package/dist/components/ActivityIndicator.js

@@ -0,0 +1,56 @@
+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 { cls } from "../utils/cls";
+// Geometry is in a 24×24 viewBox. Spokes end this far from the center.
+const VIEWBOX_CENTER = 12;
+const SPOKE_OUTER_RADIUS = 9.5;
+const SPOKE_COUNT = 8;
+const SPOKE_LENGTH = 2.75;
+const SPOKE_WIDTH = 2.5;
+const MIN_SPOKE_OPACITY = 0.15;
+const ROTATION_MS = 800;
+const SPOKE_TOP = VIEWBOX_CENTER - SPOKE_OUTER_RADIUS;
+// The top spoke leads; spokes counterclockwise from it fade toward the tail.
+const spokes = Array.from({ length: SPOKE_COUNT }, (_, index) => {
+    const distanceBehindHead = (SPOKE_COUNT - index) % SPOKE_COUNT;
+    return {
+        angle: (index * 360) / SPOKE_COUNT,
+        opacity: 1 - (distanceBehindHead * (1 - MIN_SPOKE_OPACITY)) / (SPOKE_COUNT - 1),
+    };
+});
+/**
+ * iOS-style spinner: eight rounded spokes with a fading tail. The wheel
+ * rotates in discrete 45° steps, like UIActivityIndicatorView, so the bright
+ * spoke appears to hop clockwise.
+ */
+export function ActivityIndicator({ size = "1em", variant = "accent", className, "aria-label": ariaLabel = "Loading", }) {
+    const svgRef = useRef(null);
+    const rootClassName = useStyles(rootClass, variantStyles[variant]);
+    useEffect(() => {
+        const animation = svgRef.current?.animate([{ transform: "rotate(0deg)" }, { transform: "rotate(360deg)" }], {
+            duration: ROTATION_MS,
+            iterations: Infinity,
+            easing: `steps(${SPOKE_COUNT})`,
+        });
+        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))) }) }));
+}
+const variantStyles = {
+    primary: style({
+        color: "currentColor",
+    }),
+    accent: style({
+        color: colors.accent[10],
+    }),
+    muted: style({
+        color: colors.gray[11],
+    }),
+};
+const rootClass = style({
+    display: "inline-flex",
+    verticalAlign: "-0.125em",
+    flexShrink: 0,
+});

package/dist/components/Button.js

@@ -9,7 +9,7 @@ import { backgroundColor, surfaceMixPercent, surfaceWash, } from "../tokens/back
 import { colors } from "../tokens/colors";
 import { focusRing } from "../tokens/focusRing";
 import { radius } from "../tokens/radius";
-import { shadowVars } from "../tokens/shadow";
+import { shadowVars, tintedControl } from "../tokens/shadow";
 import { controlSize, iconSizeValues } from "../tokens/sizing";
 import { spacing } from "../tokens/spacing";
 import { text } from "../tokens/text";
@@ -146,10 +146,6 @@ function onSolidText(color) {
 function fillShade(color, lightnessOffset, alpha = 1) {
     return `oklch(from ${color} calc(l - ${lightnessOffset}) c h / ${alpha})`;
 }
-/** Dark-only top highlight, a fill-tinted lift (half strength in dark mode), and an edge painted beneath the lift: the fill's alpha step 6 in light mode, a near-black tint of the fill in dark mode. */
-function primaryButtonShadow(color, lightEdge) {
-    return `inset 0 .5px light-dark(transparent, rgb(255 255 255 / 0.15)), 0 1px 2px light-dark(${fillShade(color, 0, 0.35)}, ${fillShade(color, 0, 0.18)}), 0 3px 8px -3px light-dark(${fillShade(color, 0, 0.6)}, ${fillShade(color, 0, 0.3)}), 0 0 0 .5px light-dark(${lightEdge}, oklch(from ${color} 0.18 calc(c * 0.5) h))`;
-}
 /**
  * Diagonal from a slightly darker, more saturated, warmer-rotated fill to the
  * fill. The offsets are the OKLCH delta between Campsite's #FB432C → #FF591E.
@@ -160,7 +156,7 @@ function primaryButtonGradient(color) {
 /** Hover lightens the top of the gradient instead of replacing the fill. */
 const primaryHoverSheen = `linear-gradient(to bottom, rgb(255 255 255 / 0.12), rgb(255 255 255 / 0))`;
 const primaryClass = memoize((fill, textColor, lightEdge) => {
-    const primaryShadow = primaryButtonShadow(fill, lightEdge);
+    const primaryShadow = tintedControl(fill, lightEdge);
     const gradient = primaryButtonGradient(fill);
     return style(buttonBaseClass, focusRing("&:focus-visible", primaryShadow), {
         color: textColor,

package/dist/components/Checkbox.js

@@ -27,11 +27,11 @@ const check = style(motion.standard("opacity", "transform"), {
     height: checkboxSize.checkmark,
     paddingTop: "0.5px",
     paddingLeft: "0.5px",
-    fill: colors.gray[3],
+    fill: "white",
     opacity: 0,
     transform: "scale(0)",
 });
-const root = style(flex({ alignItems: "center", gap: 3 }), focusRing(`&[data-focus-visible] ${box}`, shadowVars.control), {
+const root = style(flex({ alignItems: "center", gap: 3 }), focusRing(`&[data-focus-visible] ${box}`, shadowVars.control), focusRing(`&[data-selected][data-focus-visible] ${box}`, shadowVars.selectedControl), {
     position: "relative",
     width: "fit-content",
     minHeight: controlSize.minTarget,
@@ -41,6 +41,7 @@ const root = style(flex({ alignItems: "center", gap: 3 }), focusRing(`&[data-foc
     },
     [`&[data-selected] ${box}`]: {
         backgroundColor: colors.accent[9],
+        boxShadow: shadowVars.selectedControl,
     },
     [`&[data-selected][data-hovered] ${box}`]: {
         backgroundColor: surfaceWash(colors.gray[12], surfaceMixPercent.hover, colors.accent[9]),

package/dist/components/LoadingScreen.d.ts

@@ -4,7 +4,7 @@ export type LoadingScreenProps = {
 };
 /**
  * Full-size loading state. A `progressLabel` on the first render fades the
- * Thinking indicator and label in together. Without a label, the indicator
+ * activity indicator and label in together. Without a label, the indicator
  * waits 2s before fading in; a label that arrives later animates in and
  * shifts the indicator so the pair stays centered.
  */

package/dist/components/LoadingScreen.js

@@ -7,9 +7,9 @@ import { radius } from "../tokens/radius";
 import { spacing } from "../tokens/spacing";
 import { text } from "../tokens/text";
 import { cls } from "../utils/cls";
+import { ActivityIndicator } from "./ActivityIndicator";
 import { Crossfade } from "./Crossfade";
 import { Text } from "./Text";
-import { Thinking } from "./Thinking";
 const INDICATOR_DELAY_MS = 2000;
 function resolvedLabel(progressLabel) {
     const trimmed = progressLabel?.trim();
@@ -17,7 +17,7 @@ function resolvedLabel(progressLabel) {
 }
 /**
  * Full-size loading state. A `progressLabel` on the first render fades the
- * Thinking indicator and label in together. Without a label, the indicator
+ * activity indicator and label in together. Without a label, the indicator
  * waits 2s before fading in; a label that arrives later animates in and
  * shifts the indicator so the pair stays centered.
  */
@@ -53,7 +53,7 @@ export function LoadingScreen({ progressLabel, className, }) {
         }, INDICATOR_DELAY_MS);
         return () => window.clearTimeout(timeoutId);
     }, [hadLabelAtStart, label, showIndicator]);
-    return (_jsx("div", { className: cls(rootClassName, className), role: "status", "aria-live": "polite", "aria-busy": "true", children: _jsx(AnimatePresence, { children: showIndicator ? (_jsxs(motion.div, { className: stackClassName, initial: { opacity: 0 }, animate: { opacity: 1 }, transition: transition, children: [_jsx(Thinking, { variant: "accent", size: "0.8em", "aria-label": label ?? "Loading" }), _jsx(AnimatePresence, { initial: false, children: showLabel && label ? (_jsx(motion.div, { className: labelSlotClassName, initial: reduceMotion
+    return (_jsx("div", { className: cls(rootClassName, className), role: "status", "aria-live": "polite", "aria-busy": "true", children: _jsx(AnimatePresence, { children: showIndicator ? (_jsxs(motion.div, { className: stackClassName, initial: { opacity: 0 }, animate: { opacity: 1 }, transition: transition, children: [_jsx(ActivityIndicator, { size: "1.25em", "aria-label": label ?? "Loading" }), _jsx(AnimatePresence, { initial: false, children: showLabel && label ? (_jsx(motion.div, { className: labelSlotClassName, initial: reduceMotion
                                 ? { opacity: 0 }
                                 : { opacity: 0, height: 0 }, animate: reduceMotion
                                 ? { opacity: 1 }

package/dist/components/Radio.js

@@ -22,10 +22,10 @@ const dot = style(radius.circle, motion.standard("transform"), {
     left: "4px",
     width: "6px",
     height: "6px",
-    backgroundColor: colors.gray[3],
+    backgroundColor: "white",
     transform: "scale(0)",
 });
-const root = style(flex({ alignItems: "center", gap: 3 }), focusRing(`&[data-focus-visible] ${circle}`, shadowVars.control), {
+const root = style(flex({ alignItems: "center", gap: 3 }), focusRing(`&[data-focus-visible] ${circle}`, shadowVars.control), focusRing(`&[data-selected][data-focus-visible] ${circle}`, shadowVars.selectedControl), {
     position: "relative",
     width: "fit-content",
     [`&[data-hovered] ${circle}`]: {
@@ -33,6 +33,7 @@ const root = style(flex({ alignItems: "center", gap: 3 }), focusRing(`&[data-foc
     },
     [`&[data-selected] ${circle}`]: {
         backgroundColor: colors.accent[9],
+        boxShadow: shadowVars.selectedControl,
     },
     [`&[data-selected][data-hovered] ${circle}`]: {
         backgroundColor: surfaceWash(colors.gray[12], surfaceMixPercent.hover, colors.accent[9]),

package/dist/components/Switch.js

@@ -42,7 +42,7 @@ const thumb = style(radius.circle, motion.standard("transform"), {
     backgroundColor: "#ffffff",
     boxShadow: "0 1px 2px rgba(0, 0, 0, 0.16)",
 });
-const root = style(flex({ alignItems: "center", gap: 3 }), focusRing(`&[data-focus-visible] ${track}`, shadowVars.control), {
+const root = style(flex({ alignItems: "center", gap: 3 }), focusRing(`&[data-focus-visible] ${track}`, shadowVars.control), focusRing(`&[data-selected][data-focus-visible] ${track}`, shadowVars.selectedControl), {
     position: "relative",
     width: "fit-content",
     minHeight: controlSize.minTarget,
@@ -51,6 +51,7 @@ const root = style(flex({ alignItems: "center", gap: 3 }), focusRing(`&[data-foc
     },
     [`&[data-selected] ${track}`]: {
         backgroundColor: colors.accent[9],
+        boxShadow: shadowVars.selectedControl,
     },
     [`&[data-selected][data-hovered] ${track}`]: {
         backgroundColor: switchOnHover,

package/dist/maui.d.ts

@@ -35,6 +35,7 @@ export { Overlay } from "./components/Overlay";
 export { Drawer, drawerStyles, type DrawerProps, type DrawerSide, } from "./components/Drawer";
 export { Table, TableHeader, TableHead, TableBody, TableFooter, TableRow, TableCell, TableCaption, tableStyles, type TableAlign, type TableProps, type TableHeaderProps, type TableHeadProps, type TableBodyProps, type TableFooterProps, type TableRowProps, type TableCellProps, } from "./components/Table";
 export { Prose, useProseSize, proseContainerStyle, proseMaxWidth } from "./components/Prose";
+export { ActivityIndicator, type ActivityIndicatorProps, type ActivityIndicatorVariant, } from "./components/ActivityIndicator";
 export { Thinking, type ThinkingProps, type ThinkingVariant, } from "./components/Thinking";
 export { Crossfade, type CrossfadeProps, type CrossfadeDirection, } from "./components/Crossfade";
 export { LoadingScreen, type LoadingScreenProps, } from "./components/LoadingScreen";

package/dist/maui.js

@@ -38,6 +38,7 @@ export { Overlay } from "./components/Overlay";
 export { Drawer, drawerStyles, } from "./components/Drawer";
 export { Table, TableHeader, TableHead, TableBody, TableFooter, TableRow, TableCell, TableCaption, tableStyles, } from "./components/Table";
 export { Prose, useProseSize, proseContainerStyle, proseMaxWidth } from "./components/Prose";
+export { ActivityIndicator, } from "./components/ActivityIndicator";
 export { Thinking, } from "./components/Thinking";
 export { Crossfade, } from "./components/Crossfade";
 export { LoadingScreen, } from "./components/LoadingScreen";

package/dist/tokens/shadow.d.ts

@@ -1,8 +1,11 @@
+/** Dark-only top highlight, fill-tinted lift, and a 0.5px edge beneath the lift. */
+export declare function tintedControl(color: string, lightEdge: string): string;
 export declare const shadowVars: import("purse-styles").VariableGroup<{
     readonly control: {
         readonly default: `0 .5px 1px #00000018, 0 0 4px -1px #0001, 0 0 0 .5px ${string}`;
         readonly ":root[data-theme=\"dark\"]": "inset 0 .5px rgb(255 255 255 / 0.09), 0 1px .5px #00000018, 0 0 3px -1px #0005, 0 0 0 .5px rgb(0 0 0 / 0.8)";
     };
+    readonly selectedControl: string;
     readonly subtle: `rgba(var(--${string}), 0.08) 0px 0px 0px 1px, rgba(0, 0, 0, var(--${string})) 0px 1px 1px -0.5px, rgba(0, 0, 0, var(--${string})) 0px 3px 3px -1.5px`;
     readonly medium: `rgba(var(--${string}), 0.08) 0px 0px 0px 1px, rgba(0, 0, 0, var(--${string})) 0px 1px 1px -0.5px, rgba(0, 0, 0, var(--${string})) 0px 3px 3px -1.5px, rgba(0, 0, 0, var(--${string})) 0px 6px 6px -3px`;
     readonly strong: `rgba(var(--${string}), 0.08) 0px 0px 0px 1px, rgba(0, 0, 0, var(--${string})) 0px 1px 1px -0.5px, rgba(0, 0, 0, var(--${string})) 0px 3px 3px -1.5px, rgba(0, 0, 0, var(--${string})) 0px 6px 6px -3px, rgba(0, 0, 0, calc(var(--${string}) * 0.67)) 0px 12px 12px -6px, rgba(0, 0, 0, calc(var(--${string}) * 0.67)) 0px 24px 24px -12px`;

package/dist/tokens/shadow.js

@@ -13,6 +13,10 @@ const shadowParams = defineVars({
 });
 const rgb = shadowParams.foregroundRgb;
 const blur = shadowParams.blurOpacity;
+/** Dark-only top highlight, fill-tinted lift, and a 0.5px edge beneath the lift. */
+export function tintedControl(color, lightEdge) {
+    return `inset 0 .5px light-dark(transparent, rgb(255 255 255 / 0.15)), 0 1px 2px light-dark(oklch(from ${color} l c h / 0.35), oklch(from ${color} l c h / 0.18)), 0 3px 8px -3px light-dark(oklch(from ${color} l c h / 0.6), oklch(from ${color} l c h / 0.3)), 0 0 0 .5px light-dark(${lightEdge}, oklch(from ${color} 0.18 calc(c * 0.5) h))`;
+}
 export const shadowVars = defineVars({
     control: {
         // 0.5px edge listed last, so it paints beneath the drop: light reads as a
@@ -20,6 +24,7 @@ export const shadowVars = defineVars({
         default: `0 .5px 1px #00000018, 0 0 4px -1px #0001, 0 0 0 .5px ${colors.grayAlpha[6]}`,
         [DARK_THEME]: `inset 0 .5px rgb(255 255 255 / 0.09), 0 1px .5px #00000018, 0 0 3px -1px #0005, 0 0 0 .5px rgb(0 0 0 / 0.8)`,
     },
+    selectedControl: tintedControl(colors.accent[9], colors.accentAlpha[6]),
     subtle: `rgba(${rgb}, 0.08) 0px 0px 0px 1px, rgba(0, 0, 0, ${blur}) 0px 1px 1px -0.5px, rgba(0, 0, 0, ${blur}) 0px 3px 3px -1.5px`,
     medium: `rgba(${rgb}, 0.08) 0px 0px 0px 1px, rgba(0, 0, 0, ${blur}) 0px 1px 1px -0.5px, rgba(0, 0, 0, ${blur}) 0px 3px 3px -1.5px, rgba(0, 0, 0, ${blur}) 0px 6px 6px -3px`,
     strong: `rgba(${rgb}, 0.08) 0px 0px 0px 1px, rgba(0, 0, 0, ${blur}) 0px 1px 1px -0.5px, rgba(0, 0, 0, ${blur}) 0px 3px 3px -1.5px, rgba(0, 0, 0, ${blur}) 0px 6px 6px -3px, rgba(0, 0, 0, calc(${blur} * 0.67)) 0px 12px 12px -6px, rgba(0, 0, 0, calc(${blur} * 0.67)) 0px 24px 24px -12px`,

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@tanishqkancharla/maui",
-	"version": "0.0.60",
+	"version": "0.0.62",
 	"description": "Maui design system",
 	"type": "module",
 	"main": "./dist/maui.js",

package/skills/maui/SKILL.md

@@ -30,6 +30,7 @@ Use Maui components. When one can't do what you need, build from the matching `r
 | Prose            | [prose.md](references/components/prose.md) (`Prose`, `H1`–`H4`, `P`, lists, `Label`, `Link`) |
 | Editor / MarkdownEditor | [editor.md](references/components/editor.md) (optional TipTap peers; separate imports) |
 | Thinking         | [thinking.md](references/components/thinking.md)                                             |
+| Activity indicator | [activity-indicator.md](references/components/activity-indicator.md)                     |
 | Crossfade        | [crossfade.md](references/components/crossfade.md)                                           |
 | Loading screen   | [loading-screen.md](references/components/loading-screen.md)                                 |
 | Text             | [text.md](references/components/text.md)                                                     |

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

@@ -0,0 +1,16 @@
+# Activity indicator
+
+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"`.
+
+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>
+```

package/skills/maui/references/components/loading-screen.md

@@ -1,8 +1,8 @@
 # Loading screen
 
-Gallery: `/components/loading-screen`. Import from `"maui"`. Uses [Thinking](thinking.md) and [Crossfade](crossfade.md).
+Gallery: `/components/loading-screen`. Import from `"maui"`. Uses [Activity indicator](activity-indicator.md) and [Crossfade](crossfade.md).
 
-Fills available width and height (`flex: 1`, `width/height: 100%`). Centered `Thinking` (accent, `0.8em`), with `spacing.value(12)` (24px at the default scale) above the label.
+Fills available width and height (`flex: 1`, `width/height: 100%`). Centered `ActivityIndicator` (accent, `1.25em`), with `spacing.value(12)` (24px at the default scale) above the label.
 
 ```tsx
 <LoadingScreen />
@@ -11,7 +11,7 @@ Fills available width and height (`flex: 1`, `width/height: 100%`). Centered `Th
 
 | First paint | Later `progressLabel` |
 | --- | --- |
-| Label present | Thinking + label fade in together. Later labels Crossfade `up`. Label punctuation is preserved; nothing is appended |
-| No label | Thinking waits **2s**, then fades in. A label before 2s fades both in immediately. A label after 2s animates in and shifts Thinking so the pair stays centered |
+| Label present | Indicator + label fade in together. Later labels Crossfade `up`. Label punctuation is preserved; nothing is appended |
+| No label | The indicator waits **2s**, then fades in. A label before 2s fades both in immediately. A label after 2s animates in and shifts the indicator so the pair stays centered |
 
 `role="status"` `aria-busy` `aria-live="polite"`.

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

@@ -4,6 +4,8 @@ Gallery: `/components/thinking`. Import from `"maui"`.
 
 3×3 Game of Life, text-sized. `size` is a CSS length (default `1em`). `variant`: `"primary"` (currentColor) | `"accent"` | `"muted"`.
 
+Use Thinking only while waiting on LLM inference, such as a model drafting a reply or an agent working. For ordinary loading (fetching, saving, syncing), use [Activity indicator](activity-indicator.md).
+
 ```tsx
 <Flex row alignItems="center" gap={4}>
   <Thinking size="0.75em" variant="muted" />

package/src/apps/JsxEditor/catalog.ts

@@ -42,6 +42,7 @@ import {
 import { Text } from "../../components/Text"
 import { TabBar } from "../../components/TabBar"
 import { Thinking } from "../../components/Thinking"
+import { ActivityIndicator } from "../../components/ActivityIndicator"
 import { Crossfade } from "../../components/Crossfade"
 import { LoadingScreen } from "../../components/LoadingScreen"
 import { Tooltip } from "../../components/Tooltip"
@@ -529,6 +530,16 @@ export const catalog: CatalogComponent[] = [
 			{ name: "className" },
 		],
 	},
+	{
+		name: "ActivityIndicator",
+		info: "iOS-style spinner. Eight spokes with a fading tail rotate in 45° steps. Accent by default.",
+		attributes: [
+			{ name: "size", info: "CSS length, default 1em" },
+			{ name: "variant", values: ["accent", "primary", "muted"] },
+			{ name: "aria-label", info: "Default Loading" },
+			{ name: "className" },
+		],
+	},
 	{
 		name: "Crossfade",
 		info: "When contentKey changes, fades previous children out and the next in. Omit direction for an in-place opacity fade. Pass up, down, left, or right to slide. contentKey is required.",
@@ -544,11 +555,11 @@ export const catalog: CatalogComponent[] = [
 	},
 	{
 		name: "LoadingScreen",
-		info: "Full-size loading state. Optional progressLabel is shown in accent, medium weight, with trailing .... Small accent Thinking. Delays 2s when no label at start; label changes Crossfade up.",
+		info: "Full-size loading state. Optional progressLabel is shown in accent, medium weight, with trailing .... Accent ActivityIndicator. Delays 2s when no label at start; label changes Crossfade up.",
 		attributes: [
 			{
 				name: "progressLabel",
-				info: "Optional status under the Thinking indicator",
+				info: "Optional status under the activity indicator",
 			},
 			{ name: "className" },
 		],
@@ -600,6 +611,7 @@ export const previewScope: Record<string, unknown> = {
 	Text,
 	TabBar,
 	Thinking,
+	ActivityIndicator,
 	Crossfade,
 	LoadingScreen,
 	Tooltip,

package/src/components/ActivityIndicator.tsx

@@ -0,0 +1,112 @@
+import { useEffect, useRef } from "react"
+import { style, useStyles } from "purse-styles"
+import { colors } from "../tokens/colors"
+import { cls } from "../utils/cls"
+
+// Geometry is in a 24×24 viewBox. Spokes end this far from the center.
+const VIEWBOX_CENTER = 12
+const SPOKE_OUTER_RADIUS = 9.5
+const SPOKE_COUNT = 8
+const SPOKE_LENGTH = 2.75
+const SPOKE_WIDTH = 2.5
+const MIN_SPOKE_OPACITY = 0.15
+const ROTATION_MS = 800
+
+const SPOKE_TOP = VIEWBOX_CENTER - SPOKE_OUTER_RADIUS
+
+// The top spoke leads; spokes counterclockwise from it fade toward the tail.
+const spokes = Array.from({ length: SPOKE_COUNT }, (_, index) => {
+	const distanceBehindHead = (SPOKE_COUNT - index) % SPOKE_COUNT
+	return {
+		angle: (index * 360) / SPOKE_COUNT,
+		opacity:
+			1 - (distanceBehindHead * (1 - MIN_SPOKE_OPACITY)) / (SPOKE_COUNT - 1),
+	}
+})
+
+export type ActivityIndicatorVariant = "primary" | "accent" | "muted"
+
+export type ActivityIndicatorProps = {
+	size?: string
+	variant?: ActivityIndicatorVariant
+	className?: string
+	"aria-label"?: string
+}
+
+/**
+ * iOS-style spinner: eight rounded spokes with a fading tail. The wheel
+ * rotates in discrete 45° steps, like UIActivityIndicatorView, so the bright
+ * spoke appears to hop clockwise.
+ */
+export function ActivityIndicator({
+	size = "1em",
+	variant = "accent",
+	className,
+	"aria-label": ariaLabel = "Loading",
+}: ActivityIndicatorProps) {
+	const svgRef = useRef<SVGSVGElement>(null)
+	const rootClassName = useStyles(rootClass, variantStyles[variant])
+
+	useEffect(() => {
+		const animation = svgRef.current?.animate(
+			[{ transform: "rotate(0deg)" }, { transform: "rotate(360deg)" }],
+			{
+				duration: ROTATION_MS,
+				iterations: Infinity,
+				easing: `steps(${SPOKE_COUNT})`,
+			},
+		)
+		return () => animation?.cancel()
+	}, [])
+
+	return (
+		<span
+			role="status"
+			aria-label={ariaLabel}
+			className={cls(rootClassName, className)}
+			style={{ width: size, height: size }}
+		>
+			<svg
+				ref={svgRef}
+				aria-hidden="true"
+				focusable="false"
+				viewBox="0 0 24 24"
+				width="100%"
+				height="100%"
+			>
+				{spokes.map(({ angle, opacity }) => (
+					<line
+						key={angle}
+						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})`}
+					/>
+				))}
+			</svg>
+		</span>
+	)
+}
+
+const variantStyles = {
+	primary: style({
+		color: "currentColor",
+	}),
+	accent: style({
+		color: colors.accent[10],
+	}),
+	muted: style({
+		color: colors.gray[11],
+	}),
+} as const
+
+const rootClass = style({
+	display: "inline-flex",
+	verticalAlign: "-0.125em",
+	flexShrink: 0,
+})

package/src/components/Button.tsx

@@ -15,7 +15,7 @@ import {
 import { colors, type ColorName, type ColorScale } from "../tokens/colors"
 import { focusRing } from "../tokens/focusRing"
 import { radius } from "../tokens/radius"
-import { shadowVars } from "../tokens/shadow"
+import { shadowVars, tintedControl } from "../tokens/shadow"
 import { controlSize, iconSizeValues } from "../tokens/sizing"
 import { spacing } from "../tokens/spacing"
 import { text } from "../tokens/text"
@@ -193,11 +193,6 @@ function fillShade(color: string, lightnessOffset: number, alpha = 1) {
 	return `oklch(from ${color} calc(l - ${lightnessOffset}) c h / ${alpha})`
 }
 
-/** Dark-only top highlight, a fill-tinted lift (half strength in dark mode), and an edge painted beneath the lift: the fill's alpha step 6 in light mode, a near-black tint of the fill in dark mode. */
-function primaryButtonShadow(color: string, lightEdge: string) {
-	return `inset 0 .5px light-dark(transparent, rgb(255 255 255 / 0.15)), 0 1px 2px light-dark(${fillShade(color, 0, 0.35)}, ${fillShade(color, 0, 0.18)}), 0 3px 8px -3px light-dark(${fillShade(color, 0, 0.6)}, ${fillShade(color, 0, 0.3)}), 0 0 0 .5px light-dark(${lightEdge}, oklch(from ${color} 0.18 calc(c * 0.5) h))`
-}
-
 /**
  * Diagonal from a slightly darker, more saturated, warmer-rotated fill to the
  * fill. The offsets are the OKLCH delta between Campsite's #FB432C → #FF591E.
@@ -211,7 +206,7 @@ const primaryHoverSheen = `linear-gradient(to bottom, rgb(255 255 255 / 0.12), r
 
 const primaryClass = memoize(
 	(fill: string, textColor: string, lightEdge: string) => {
-		const primaryShadow = primaryButtonShadow(fill, lightEdge)
+		const primaryShadow = tintedControl(fill, lightEdge)
 		const gradient = primaryButtonGradient(fill)
 		return style(buttonBaseClass, focusRing("&:focus-visible", primaryShadow), {
 			color: textColor,

package/src/components/Checkbox.tsx

@@ -44,7 +44,7 @@ const check = style(motion.standard("opacity", "transform"), {
 	height: checkboxSize.checkmark,
 	paddingTop: "0.5px",
 	paddingLeft: "0.5px",
-	fill: colors.gray[3],
+	fill: "white",
 	opacity: 0,
 	transform: "scale(0)",
 })
@@ -52,6 +52,10 @@ const check = style(motion.standard("opacity", "transform"), {
 const root = style(
 	flex({ alignItems: "center", gap: 3 }),
 	focusRing(`&[data-focus-visible] ${box}`, shadowVars.control),
+	focusRing(
+		`&[data-selected][data-focus-visible] ${box}`,
+		shadowVars.selectedControl,
+	),
 	{
 		position: "relative",
 		width: "fit-content",
@@ -62,6 +66,7 @@ const root = style(
 		},
 		[`&[data-selected] ${box}`]: {
 			backgroundColor: colors.accent[9],
+			boxShadow: shadowVars.selectedControl,
 		},
 		[`&[data-selected][data-hovered] ${box}`]: {
 			backgroundColor: surfaceWash(

package/src/components/LoadingScreen.tsx

@@ -10,9 +10,9 @@ import { radius } from "../tokens/radius"
 import { spacing } from "../tokens/spacing"
 import { text } from "../tokens/text"
 import { cls } from "../utils/cls"
+import { ActivityIndicator } from "./ActivityIndicator"
 import { Crossfade } from "./Crossfade"
 import { Text } from "./Text"
-import { Thinking } from "./Thinking"
 
 const INDICATOR_DELAY_MS = 2000
 
@@ -28,7 +28,7 @@ function resolvedLabel(progressLabel: string | undefined) {
 
 /**
  * Full-size loading state. A `progressLabel` on the first render fades the
- * Thinking indicator and label in together. Without a label, the indicator
+ * activity indicator and label in together. Without a label, the indicator
  * waits 2s before fading in; a label that arrives later animates in and
  * shifts the indicator so the pair stays centered.
  */
@@ -87,9 +87,8 @@ export function LoadingScreen({
 						animate={{ opacity: 1 }}
 						transition={transition}
 					>
-						<Thinking
-							variant="accent"
-							size="0.8em"
+						<ActivityIndicator
+							size="1.25em"
 							aria-label={label ?? "Loading"}
 						/>
 						<AnimatePresence initial={false}>

package/src/components/Radio.tsx

@@ -40,13 +40,17 @@ const dot = style(radius.circle, motion.standard("transform"), {
 	left: "4px",
 	width: "6px",
 	height: "6px",
-	backgroundColor: colors.gray[3],
+	backgroundColor: "white",
 	transform: "scale(0)",
 })
 
 const root = style(
 	flex({ alignItems: "center", gap: 3 }),
 	focusRing(`&[data-focus-visible] ${circle}`, shadowVars.control),
+	focusRing(
+		`&[data-selected][data-focus-visible] ${circle}`,
+		shadowVars.selectedControl,
+	),
 	{
 		position: "relative",
 		width: "fit-content",
@@ -55,6 +59,7 @@ const root = style(
 		},
 		[`&[data-selected] ${circle}`]: {
 			backgroundColor: colors.accent[9],
+			boxShadow: shadowVars.selectedControl,
 		},
 		[`&[data-selected][data-hovered] ${circle}`]: {
 			backgroundColor: surfaceWash(

package/src/components/Switch.tsx

@@ -58,6 +58,10 @@ const thumb = style(radius.circle, motion.standard("transform"), {
 const root = style(
 	flex({ alignItems: "center", gap: 3 }),
 	focusRing(`&[data-focus-visible] ${track}`, shadowVars.control),
+	focusRing(
+		`&[data-selected][data-focus-visible] ${track}`,
+		shadowVars.selectedControl,
+	),
 	{
 		position: "relative",
 		width: "fit-content",
@@ -67,6 +71,7 @@ const root = style(
 		},
 		[`&[data-selected] ${track}`]: {
 			backgroundColor: colors.accent[9],
+			boxShadow: shadowVars.selectedControl,
 		},
 		[`&[data-selected][data-hovered] ${track}`]: {
 			backgroundColor: switchOnHover,

package/src/maui.ts

@@ -139,6 +139,11 @@ export {
 	type TableCellProps,
 } from "./components/Table"
 export { Prose, useProseSize, proseContainerStyle, proseMaxWidth } from "./components/Prose"
+export {
+	ActivityIndicator,
+	type ActivityIndicatorProps,
+	type ActivityIndicatorVariant,
+} from "./components/ActivityIndicator"
 export {
 	Thinking,
 	type ThinkingProps,

package/src/pages/ActivityIndicatorPage.tsx

@@ -0,0 +1,81 @@
+import { style, useStyles } from "purse-styles"
+import { Panel } from "./Panel"
+import { ActivityIndicator } from "../components/ActivityIndicator"
+import { Button } from "../components/Button"
+import { Prose } from "../components/Prose"
+import { H2, H3, P } from "../components/Typography"
+import { flex } from "../tokens/layout"
+import { text } from "../tokens/text"
+
+export function ActivityIndicatorPage() {
+	const pageClassName = useStyles(pageClass)
+	const rowClassName = useStyles(rowClass)
+	const columnClassName = useStyles(columnClass)
+	const inlineExampleClassName = useStyles(inlineExampleClass)
+
+	return (
+		<Prose className={pageClassName}>
+			<H2>Activity indicator</H2>
+			<P>
+				An iOS-style spinner. Eight rounded spokes fade from the leading spoke
+				to the tail, and the wheel rotates in 45° steps so the bright spoke hops
+				clockwise. It is text-sized and accent-colored by default. Use it for
+				loading; use Thinking when waiting on LLM inference.
+			</P>
+
+			<H3>Variants</H3>
+			<Panel className={columnClassName}>
+				<p className={inlineExampleClassName}>
+					<ActivityIndicator variant="accent" aria-label="Loading, accent" />
+					Loading messages
+				</p>
+				<p className={inlineExampleClassName}>
+					<ActivityIndicator variant="primary" aria-label="Loading, primary" />
+					Syncing calendar
+				</p>
+				<p className={inlineExampleClassName}>
+					<ActivityIndicator variant="muted" aria-label="Loading, muted" />
+					Fetching attachments
+				</p>
+			</Panel>
+
+			<H3>Sizes</H3>
+			<Panel className={rowClassName}>
+				<ActivityIndicator size="1em" aria-label="Loading, small" />
+				<ActivityIndicator size="20px" aria-label="Loading, medium" />
+				<ActivityIndicator size="37px" aria-label="Loading, large" />
+			</Panel>
+
+			<H3>In a button</H3>
+			<Panel className={rowClassName}>
+				<Button variant="primary">
+					<ActivityIndicator variant="primary" aria-label="Saving" />
+					Saving
+				</Button>
+				<Button>
+					<ActivityIndicator aria-label="Refreshing" />
+					Refreshing
+				</Button>
+			</Panel>
+		</Prose>
+	)
+}
+
+const pageClass = style({
+	maxWidth: "1200px",
+	paddingBottom: "32px",
+})
+
+const rowClass = style(flex({ alignItems: "center", gap: 6 }))
+
+const columnClass = style(flex({ direction: "column", gap: 6 }))
+
+const inlineExampleClass = style(
+	text({ size: "md", fontWeight: 400, color: "highContrast" }),
+	{
+		display: "flex",
+		alignItems: "center",
+		gap: "6px",
+		margin: 0,
+	},
+)

package/src/pages/LoadingScreenPage.tsx

@@ -98,7 +98,7 @@ export function LoadingScreenPage() {
 				Fills whatever width and height it is given, with{" "}
 				<Code>radius.lg</Code> on the surface. Pass{" "}
 				<Code>progressLabel</Code> to show a status under a small, accent
-				Thinking indicator. The label is accent, medium weight, and keeps the
+				activity indicator. The label is accent, medium weight, and keeps the
 				punctuation you provide. Label changes Crossfade up. With no label at
 				mount, the indicator waits 2s before fading in.
 			</P>
@@ -136,7 +136,7 @@ export function LoadingScreenPage() {
 
 			<H3>No label — wait 2 seconds</H3>
 			<P>
-				Mounts empty. After 2 seconds the Thinking indicator fades in,
+				Mounts empty. After 2 seconds the activity indicator fades in,
 				centered, with no label.
 			</P>
 			<Flex column gap={4}>

package/src/pages/Maui.tsx

@@ -1,6 +1,5 @@
 import type React from "react"
 import { Suspense, useEffect, useState } from "react"
-import { useFilter } from "react-aria"
 import {
 	Link as WouterLink,
 	Redirect,
@@ -13,6 +12,7 @@ import {
 import { defineVars, style, useStyles } from "purse-styles"
 import { Button } from "../components/Button"
 import { Drawer } from "../components/Drawer"
+import { FuzzyString } from "../components/FuzzyString"
 import { SearchField } from "../components/Input"
 import { Select, SelectItem } from "../components/Select"
 import { H3, Label } from "../components/Typography"
@@ -26,8 +26,10 @@ import { text } from "../tokens/text"
 import { type ThemePreference, useTheme } from "../theme/ThemeContext"
 import { isScalePreference, useScale } from "../theme/ScaleContext"
 import { LARGE_SCALE } from "../theme/dataScale"
+import { fuzzyMatch } from "../utils/fuzzyMatch"
 import { galleryCompactMedia } from "./galleryCompact"
 import { ReadmePage } from "./ReadmePage"
+import { ActivityIndicatorPage } from "./ActivityIndicatorPage"
 import { AvatarPage } from "./AvatarPage"
 import { BadgePage } from "./BadgePage"
 import { BackgroundColorTokenPage } from "./BackgroundColorTokenPage"
@@ -152,6 +154,11 @@ const navigation: NavEntry[] = [
 			},
 			{ label: "Editor", path: "/components/editor", page: EditorPage },
 			{ label: "Thinking", path: "/components/thinking", page: ThinkingPage },
+			{
+				label: "Activity indicator",
+				path: "/components/activity-indicator",
+				page: ActivityIndicatorPage,
+			},
 			{
 				label: "Crossfade",
 				path: "/components/crossfade",
@@ -363,19 +370,18 @@ function MauiNavigation() {
 	const emptyClassName = useStyles(navEmptyClass)
 	const { preference, setPreference } = useTheme()
 	const { preference: scale, setPreference: setScale } = useScale()
-	const { contains } = useFilter({ sensitivity: "base" })
 	const normalizedQuery = query.trim()
+	const matches = (label: string) =>
+		fuzzyMatch(normalizedQuery, label) !== undefined
 	const filteredNavigation = normalizedQuery
 		? navigation.flatMap<NavEntry>((entry) => {
 				if (!isNavGroup(entry)) {
-					return contains(entry.label, normalizedQuery) ? [entry] : []
+					return matches(entry.label) ? [entry] : []
 				}
 
-				const children = contains(entry.label, normalizedQuery)
+				const children = matches(entry.label)
 					? entry.children
-					: entry.children.filter((item) =>
-							contains(item.label, normalizedQuery),
-						)
+					: entry.children.filter((item) => matches(item.label))
 				return children.length > 0 ? [{ ...entry, children }] : []
 			})
 		: navigation
@@ -459,15 +465,21 @@ function MauiNavigation() {
 				{filteredNavigation.map((entry) =>
 					isNavGroup(entry) ? (
 						<li className={groupClassName} key={entry.label}>
-							<Label>{entry.label}</Label>
+							<Label>
+								<HighlightedLabel label={entry.label} query={normalizedQuery} />
+							</Label>
 							<ul className={childrenClassName}>
 								{entry.children.map((item) => (
-									<NavLink key={item.path} item={item} />
+									<NavLink
+										key={item.path}
+										item={item}
+										query={normalizedQuery}
+									/>
 								))}
 							</ul>
 						</li>
 					) : (
-						<NavLink key={entry.path} item={entry} />
+						<NavLink key={entry.path} item={entry} query={normalizedQuery} />
 					),
 				)}
 				{filteredNavigation.length === 0 ? (
@@ -480,7 +492,12 @@ function MauiNavigation() {
 	)
 }
 
-function NavLink(props: { item: NavItem }) {
+function HighlightedLabel(props: { label: string; query: string }) {
+	const match = props.query ? fuzzyMatch(props.query, props.label) : undefined
+	return match ? <FuzzyString match={match} /> : props.label
+}
+
+function NavLink(props: { item: NavItem; query: string }) {
 	const className = useStyles(navLinkClass)
 	const [selected] = useRoute(props.item.path)
 
@@ -491,7 +508,7 @@ function NavLink(props: { item: NavItem }) {
 				href={props.item.path}
 				aria-current={selected ? "page" : undefined}
 			>
-				{props.item.label}
+				<HighlightedLabel label={props.item.label} query={props.query} />
 			</WouterLink>
 		</li>
 	)

package/src/tokens/shadow.ts

@@ -16,6 +16,11 @@ const shadowParams = defineVars({
 const rgb = shadowParams.foregroundRgb
 const blur = shadowParams.blurOpacity
 
+/** Dark-only top highlight, fill-tinted lift, and a 0.5px edge beneath the lift. */
+export function tintedControl(color: string, lightEdge: string) {
+	return `inset 0 .5px light-dark(transparent, rgb(255 255 255 / 0.15)), 0 1px 2px light-dark(oklch(from ${color} l c h / 0.35), oklch(from ${color} l c h / 0.18)), 0 3px 8px -3px light-dark(oklch(from ${color} l c h / 0.6), oklch(from ${color} l c h / 0.3)), 0 0 0 .5px light-dark(${lightEdge}, oklch(from ${color} 0.18 calc(c * 0.5) h))`
+}
+
 export const shadowVars = defineVars({
 	control: {
 		// 0.5px edge listed last, so it paints beneath the drop: light reads as a
@@ -23,6 +28,7 @@ export const shadowVars = defineVars({
 		default: `0 .5px 1px #00000018, 0 0 4px -1px #0001, 0 0 0 .5px ${colors.grayAlpha[6]}`,
 		[DARK_THEME]: `inset 0 .5px rgb(255 255 255 / 0.09), 0 1px .5px #00000018, 0 0 3px -1px #0005, 0 0 0 .5px rgb(0 0 0 / 0.8)`,
 	},
+	selectedControl: tintedControl(colors.accent[9], colors.accentAlpha[6]),
 	subtle: `rgba(${rgb}, 0.08) 0px 0px 0px 1px, rgba(0, 0, 0, ${blur}) 0px 1px 1px -0.5px, rgba(0, 0, 0, ${blur}) 0px 3px 3px -1.5px`,
 	medium: `rgba(${rgb}, 0.08) 0px 0px 0px 1px, rgba(0, 0, 0, ${blur}) 0px 1px 1px -0.5px, rgba(0, 0, 0, ${blur}) 0px 3px 3px -1.5px, rgba(0, 0, 0, ${blur}) 0px 6px 6px -3px`,
 	strong: `rgba(${rgb}, 0.08) 0px 0px 0px 1px, rgba(0, 0, 0, ${blur}) 0px 1px 1px -0.5px, rgba(0, 0, 0, ${blur}) 0px 3px 3px -1.5px, rgba(0, 0, 0, ${blur}) 0px 6px 6px -3px, rgba(0, 0, 0, calc(${blur} * 0.67)) 0px 12px 12px -6px, rgba(0, 0, 0, calc(${blur} * 0.67)) 0px 24px 24px -12px`,