@tanishqkancharla/maui 0.0.40 → 0.0.42

package/dist/components/Button.js

@@ -6,10 +6,9 @@ import { style, useStyles } from "purse-styles";
 import { useFocus } from "../hooks/useFocus";
 import { useRefCurrent } from "../hooks/useRefCurrent";
 import { backgroundColor, surfaceMixPercent, surfaceWash, } from "../tokens/background";
-import { colors, } from "../tokens/colors";
+import { colors } from "../tokens/colors";
 import { focusRing } from "../tokens/focusRing";
 import { radius } from "../tokens/radius";
-import { motion } from "../tokens/motion";
 import { shadowVars } from "../tokens/shadow";
 import { controlSize } from "../tokens/sizing";
 import { spacing } from "../tokens/spacing";
@@ -30,7 +29,7 @@ const disabledQuiet = {
     backgroundColor: "transparent",
     boxShadow: "none",
 };
-const buttonBaseClass = style(text({ size: "xs", fontWeight: 400, color: "highContrast" }), focusRing("&:focus-visible", buttonShadow), motion.standard("box-shadow", "background-color", "color"), spacing.padding({ x: 6, y: 4 }), radius.sm, {
+const buttonBaseClass = style(text({ size: "xs", fontWeight: 400, color: "highContrast" }), focusRing("&:focus-visible", buttonShadow), spacing.padding({ x: 6, y: 4 }), radius.sm, {
     display: "inline-flex",
     alignItems: "center",
     justifyContent: "center",
@@ -65,30 +64,16 @@ const buttonTextClass = style({
     minWidth: 0,
     textBox: "trim-both cap alphabetic",
 });
-/**
- * RAC `data-pressed` is true while the pointer is down. MenuTrigger’s
- * PressResponder also keeps it while the menu is open. `aria-expanded`
- * covers Select / ComboBox / DatePicker / DialogTrigger overlays.
- */
-function pressedOrExpanded(styles) {
-    return {
-        "&:active:not(:disabled), &[data-pressed]:not(:disabled)": styles,
-        "&[aria-expanded='true']:not(:disabled)": styles,
-    };
-}
 const buttonClass = style(buttonBaseClass, {
     backgroundColor: backgroundColor.element,
     "&:hover:not(:disabled)": {
         backgroundColor: backgroundColor.elementHover,
     },
-    ...pressedOrExpanded({
-        backgroundColor: backgroundColor.elementActive,
-    }),
 });
 function paletteAlpha(name) {
     return colors[`${name}Alpha`];
 }
-const quietClass = memoize((color, hoverColor, wash) => style(buttonBaseClass, focusRing("&:focus-visible"), motion.standard("box-shadow", "color"), {
+const quietClass = memoize((color, hoverColor, wash) => style(buttonBaseClass, focusRing("&:focus-visible"), {
     color,
     backgroundColor: "transparent",
     boxShadow: "none",
@@ -96,10 +81,6 @@ const quietClass = memoize((color, hoverColor, wash) => style(buttonBaseClass, f
         color: hoverColor,
         backgroundColor: surfaceWash(wash, surfaceMixPercent.hover),
     },
-    ...pressedOrExpanded({
-        color: hoverColor,
-        backgroundColor: surfaceWash(wash, surfaceMixPercent.active),
-    }),
     "&:disabled": disabledQuiet,
 }));
 const quietButtonClass = quietClass(colors.gray[11], colors.gray[12], colors.grayAlpha[9]);
@@ -120,7 +101,7 @@ function paletteFill(name) {
 function opaqueColor(color) {
     return `oklch(from ${color} l c h / 1)`;
 }
-/** Hover/active of a one-off fill: same hue, a step darker. */
+/** Darken a one-off fill while preserving its hue. */
 function darkerFill(color) {
     return `oklch(from ${color} calc(l - 0.04) c h)`;
 }
@@ -138,7 +119,7 @@ const coloredButtonClass = memoize((variant, color) => {
     if (isCssColor(color)) {
         const fill = opaqueColor(color);
         if (variant === "primary") {
-            const hover = darkerFill(fill);
+            const hover = surfaceWash(colors.gray[12], surfaceMixPercent.hover, fill);
             const primaryShadow = primaryButtonShadow(fill);
             return style(buttonBaseClass, focusRing("&:focus-visible", primaryShadow), {
                 color: onSolidText(fill),
@@ -147,9 +128,6 @@ const coloredButtonClass = memoize((variant, color) => {
                 "&:hover:not(:disabled)": {
                     backgroundColor: hover,
                 },
-                ...pressedOrExpanded({
-                    backgroundColor: hover,
-                }),
                 "&:disabled": disabledRaised,
             });
         }
@@ -158,16 +136,14 @@ const coloredButtonClass = memoize((variant, color) => {
     const scale = paletteFill(color);
     if (variant === "primary") {
         const primaryShadow = primaryButtonShadow(scale[9]);
+        const hover = surfaceWash(colors.gray[12], surfaceMixPercent.hover, scale[9]);
         return style(buttonBaseClass, focusRing("&:focus-visible", primaryShadow), {
             color: darkTextOnSolid.has(color) ? scale[12] : "white",
             backgroundColor: scale[9],
             boxShadow: primaryShadow,
             "&:hover:not(:disabled)": {
-                backgroundColor: scale[10],
+                backgroundColor: hover,
             },
-            ...pressedOrExpanded({
-                backgroundColor: scale[10],
-            }),
             "&:disabled": disabledRaised,
         });
     }

package/dist/components/Checkbox.js

@@ -4,7 +4,7 @@ import { useCheckbox } from "react-aria";
 import { useToggleState } from "react-stately";
 import { defineVars, style, useStyles } from "purse-styles";
 import { LARGE_SCALE } from "../theme/dataScale";
-import { backgroundColor } from "../tokens/background";
+import { backgroundColor, surfaceMixPercent, surfaceWash, } from "../tokens/background";
 import { colors } from "../tokens/colors";
 import { focusRing } from "../tokens/focusRing";
 import { flex } from "../tokens/layout";
@@ -29,12 +29,15 @@ const checkboxClass = style(flex({ alignItems: "center", gap: 3 }), focusRing("&
     "& .checkbox-input:checked + .checkbox-toggle": {
         backgroundColor: colors.accent[9],
     },
+    "&:hover .checkbox-input:checked + .checkbox-toggle": {
+        backgroundColor: surfaceWash(colors.gray[12], surfaceMixPercent.hover, colors.accent[9]),
+    },
     "& .checkbox-input:checked + .checkbox-toggle .checkbox-icon": {
         opacity: 1,
         transform: "scale(1)",
     },
 });
-const checkboxToggleClass = style(flex({ alignItems: "center", justifyContent: "center" }), radius["2xs"], motion.standard("background-color"), shadow.control, {
+const checkboxToggleClass = style(flex({ alignItems: "center", justifyContent: "center" }), radius["2xs"], shadow.control, {
     pointerEvents: "none",
     flexShrink: 0,
     width: checkboxSize.box,

package/dist/components/Input.js

@@ -4,20 +4,19 @@ import { mergeProps, useButton, useLocale, useNumberField, useSearchField, useTe
 import { useNumberFieldState, useSearchFieldState } from "react-stately";
 import { defineVars, style, useStyles } from "purse-styles";
 import { LARGE_SCALE } from "../theme/dataScale";
-import { backgroundColor } from "../tokens/background";
+import { backgroundColor, surfaceMixPercent, surfaceWash, } from "../tokens/background";
 import { colors } from "../tokens/colors";
 import { focusRing } from "../tokens/focusRing";
-import { motion } from "../tokens/motion";
 import { radius } from "../tokens/radius";
 import { shadow, shadowVars } from "../tokens/shadow";
 import { controlSize, iconSizeValues } from "../tokens/sizing";
 import { spacing } from "../tokens/spacing";
 import { monospace, text } from "../tokens/text";
+import { CircleX, Minus, Plus } from "../icons";
 import { Kbd } from "./Code";
-import { Icons } from "./Icons";
 const inputText = text({ size: "sm", fontWeight: 400, color: "highContrast" });
 const numberFieldDivider = `color-mix(in oklch, ${colors.gray[12]} 5%, ${backgroundColor.element})`;
-const inputClass = style(inputText, focusRing("&:focus-visible", shadowVars.control), motion.standard("background", "border-color"), radius.sm, spacing.padding({ x: 4, y: 2 }), shadow.control, {
+const inputClass = style(inputText, focusRing("&:focus-visible", shadowVars.control), radius.sm, spacing.padding({ x: 4, y: 2 }), shadow.control, {
     width: "100%",
     minWidth: 0,
     height: controlSize.height,
@@ -127,12 +126,12 @@ export function SearchField(props) {
     const { isFocused, focusProps } = useKeyboardHint();
     const inputClassName = useStyles(inputClass);
     const searchClassName = useStyles(searchFieldClass);
-    return (_jsxs("div", { className: searchClassName, children: [_jsx("input", { className: inputClassName, ref: ref, ...mergeProps(inputProps, focusProps), "aria-keyshortcuts": ariaKeyShortcuts }), keyboardHint && !isFocused && state.value === "" ? (_jsx(KeyboardHint, { children: keyboardHint })) : null, state.value !== "" && (_jsx("button", { "aria-label": "Clear search", type: "button", onMouseDown: (event) => event.preventDefault(), onClick: () => state.setValue(""), children: _jsx(Icons.CircleX, {}) }))] }));
+    return (_jsxs("div", { className: searchClassName, children: [_jsx("input", { className: inputClassName, ref: ref, ...mergeProps(inputProps, focusProps), "aria-keyshortcuts": ariaKeyShortcuts }), keyboardHint && !isFocused && state.value === "" ? (_jsx(KeyboardHint, { children: keyboardHint })) : null, state.value !== "" && (_jsx("button", { "aria-label": "Clear search", type: "button", onMouseDown: (event) => event.preventDefault(), onClick: () => state.setValue(""), children: _jsx(CircleX, {}) }))] }));
 }
 const numberFieldSize = defineVars({
     stepperWidth: { default: "24px", [LARGE_SCALE]: "40px" },
 });
-const numberFieldClass = style(focusRing("&:has(:focus-visible)", shadowVars.control), motion.standard("background", "border-color"), radius.sm, shadow.control, {
+const numberFieldClass = style(focusRing("&:has(:focus-visible)", shadowVars.control), radius.sm, shadow.control, {
     display: "flex",
     alignItems: "center",
     width: "100%",
@@ -207,9 +206,9 @@ export function NumberField(props) {
     const { buttonProps: decrementProps } = useButton(decrementButtonProps, decrementRef);
     const inputClassName = useStyles(numberInputClass);
     const numberClassName = useStyles(numberFieldClass);
-    return (_jsxs("div", { className: numberClassName, ...groupProps, children: [_jsx("input", { className: inputClassName, ref: ref, ...inputProps }), _jsxs("div", { className: "number-stepper", children: [_jsx("button", { ...decrementProps, ref: decrementRef, type: "button", children: _jsx(Icons.Minus, {}) }), _jsx("button", { ...incrementProps, ref: incrementRef, type: "button", children: _jsx(Icons.Plus, {}) })] })] }));
+    return (_jsxs("div", { className: numberClassName, ...groupProps, children: [_jsx("input", { className: inputClassName, ref: ref, ...inputProps }), _jsxs("div", { className: "number-stepper", children: [_jsx("button", { ...decrementProps, ref: decrementRef, type: "button", children: _jsx(Minus, {}) }), _jsx("button", { ...incrementProps, ref: incrementRef, type: "button", children: _jsx(Plus, {}) })] })] }));
 }
-const quietInputClass = style(inputText, focusRing(), motion.standard("background", "border-color"), radius.sm, spacing.padding({ x: 4, y: 2 }), {
+const quietInputClass = style(inputText, focusRing(), radius.sm, spacing.padding({ x: 4, y: 2 }), {
     width: "100%",
     minWidth: 0,
     height: controlSize.height,
@@ -217,7 +216,7 @@ const quietInputClass = style(inputText, focusRing(), motion.standard("backgroun
     background: "transparent",
     border: "none",
     "&:hover:not(:disabled)": {
-        background: backgroundColor.elementHover,
+        background: surfaceWash(colors.gray[12], surfaceMixPercent.hover),
     },
     "&:disabled": {
         color: colors.gray[8],

package/dist/components/Radio.js

@@ -3,7 +3,7 @@ import { createContext, useContext, useRef } from "react";
 import { useRadio, useRadioGroup } from "react-aria";
 import { useRadioGroupState } from "react-stately";
 import { style, useStyles } from "purse-styles";
-import { backgroundColor } from "../tokens/background";
+import { backgroundColor, surfaceMixPercent, surfaceWash, } from "../tokens/background";
 import { colors } from "../tokens/colors";
 import { focusRing } from "../tokens/focusRing";
 import { flex } from "../tokens/layout";
@@ -30,11 +30,14 @@ const radioClass = style(flex({ alignItems: "center", gap: 3 }), focusRing("& .r
     "& .radio-input:checked + .radio-toggle": {
         backgroundColor: colors.accent[9],
     },
+    "&:hover .radio-input:checked + .radio-toggle": {
+        backgroundColor: surfaceWash(colors.gray[12], surfaceMixPercent.hover, colors.accent[9]),
+    },
     "& .radio-input:checked + .radio-toggle .radio-dot": {
         transform: "scale(1)",
     },
 });
-const radioToggleClass = style(radius.circle, motion.standard("background-color"), shadow.control, {
+const radioToggleClass = style(radius.circle, shadow.control, {
     pointerEvents: "none",
     position: "relative",
     width: "14px",

package/dist/components/Select.js

@@ -19,7 +19,7 @@ const selectClass = style({
     gap: spacing.value(3),
     width: "100%",
 });
-const triggerClass = style(text({ size: "sm", fontWeight: 400, color: "highContrast" }), focusRing("&:focus-visible", shadowVars.control), motion.standard("background", "border-color"), radius.sm, spacing.padding({ x: 4, y: 2 }), shadow.control, {
+const triggerClass = style(text({ size: "sm", fontWeight: 400, color: "highContrast" }), focusRing("&:focus-visible", shadowVars.control), radius.sm, spacing.padding({ x: 4, y: 2 }), shadow.control, {
     display: "flex",
     alignItems: "center",
     height: controlSize.height,

package/dist/components/Switch.js

@@ -5,6 +5,7 @@ import { useToggleState } from "react-stately";
 import { defineVars, style, useStyles } from "purse-styles";
 import { DARK_THEME } from "../theme/dataTheme";
 import { LARGE_SCALE } from "../theme/dataScale";
+import { surfaceMixPercent, surfaceWash } from "../tokens/background";
 import { colors } from "../tokens/colors";
 import { focusRing } from "../tokens/focusRing";
 import { flex } from "../tokens/layout";
@@ -25,26 +26,27 @@ const switchOff = defineVars({
         default: colors.gray[2],
         [DARK_THEME]: colors.gray[1],
     },
-    trackHover: {
-        default: colors.gray[3],
-        [DARK_THEME]: colors.gray[2],
-    },
 });
+const switchOffHover = surfaceWash(colors.gray[12], surfaceMixPercent.hover, switchOff.track);
+const switchOnHover = surfaceWash(colors.gray[12], surfaceMixPercent.hover, colors.accent[9]);
 const switchClass = style(flex({ alignItems: "center", gap: 3 }), focusRing("& .switch-input:focus-visible + .switch-toggle", shadowVars.control), {
     position: "relative",
     width: "fit-content",
     minHeight: controlSize.minTarget,
     "&:hover .switch-toggle": {
-        backgroundColor: switchOff.trackHover,
+        backgroundColor: switchOffHover,
     },
     "& .switch-input:checked + .switch-toggle": {
         backgroundColor: colors.accent[9],
     },
+    "&:hover .switch-input:checked + .switch-toggle": {
+        backgroundColor: switchOnHover,
+    },
     "& .switch-input:checked + .switch-toggle .switch-thumb": {
         transform: `translateX(calc(${switchSize.width} - ${switchSize.thumb} - 4px))`,
     },
 });
-const switchToggleClass = style(radius.pill, motion.standard("background-color"), shadow.control, {
+const switchToggleClass = style(radius.pill, shadow.control, {
     position: "relative",
     flexShrink: 0,
     width: switchSize.width,

package/dist/components/Table.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Cell as AriaCell, Checkbox as AriaCheckbox, Collection, Column as AriaColumn, Row as AriaRow, Table as AriaTable, TableBody as AriaTableBody, TableFooter as AriaTableFooter, TableHeader as AriaTableHeader, useTableOptions, } from "react-aria-components";
 import { style, useStyles } from "purse-styles";
-import { backgroundColor } from "../tokens/background";
+import { backgroundColor, surfaceMixPercent, surfaceWash, } from "../tokens/background";
 import { border, borderColor } from "../tokens/borders";
 import { colors } from "../tokens/colors";
 import { focusRing } from "../tokens/focusRing";
@@ -103,6 +103,9 @@ const tableSelectionCheckboxClass = style(flex({ alignItems: "center", justifyCo
     "&[data-selected] .checkbox-toggle, &[data-indeterminate] .checkbox-toggle": {
         backgroundColor: colors.accent[9],
     },
+    "&[data-hovered][data-selected] .checkbox-toggle, &[data-hovered][data-indeterminate] .checkbox-toggle": {
+        backgroundColor: surfaceWash(colors.gray[12], surfaceMixPercent.hover, colors.accent[9]),
+    },
     "&[data-selected] .checkbox-icon, &[data-indeterminate] .checkbox-icon": {
         opacity: 1,
         transform: "scale(1)",

package/dist/components/Tooltip.js

@@ -5,11 +5,11 @@ import ReactDOM from "react-dom";
 import { mergeProps, useOverlayPosition, useTooltip, useTooltipTrigger, } from "react-aria";
 import { useTooltipTriggerState } from "react-stately";
 import { style, useStyles } from "purse-styles";
+import { background } from "../tokens/background";
 import { radius } from "../tokens/radius";
 import { shadow } from "../tokens/shadow";
 import { spacing } from "../tokens/spacing";
 import { text } from "../tokens/text";
-import { background } from "../maui";
 export function Tooltip(props) {
     const { content, children, placement = "top", delay = 500, isDisabled, } = props;
     const state = useTooltipTriggerState({ delay, isDisabled });

package/dist/tokens/background.d.ts

@@ -1,9 +1,6 @@
-/** Transparent-wash percents (press is 2× hover). */
+/** Shared interactive surface washes. */
 export declare const surfaceMixPercent: {
-    readonly hover: {
-        readonly light: 6;
-        readonly dark: 9;
-    };
+    readonly hover: 3.5;
     readonly active: {
         readonly light: 12;
         readonly dark: 18;

package/dist/tokens/background.js

@@ -4,7 +4,7 @@ import { memoize } from "../utils/memoize";
 import { colors } from "./colors";
 const appSurface = defineVars({
     app: {
-        default: "#ffffff",
+        default: colors.gray[1],
         [DARK_THEME]: colors.gray[1],
     },
 });
@@ -14,9 +14,9 @@ const elementSurface = defineVars({
         [DARK_THEME]: colors.gray[2],
     },
 });
-/** Transparent-wash percents (press is 2× hover). */
+/** Shared interactive surface washes. */
 export const surfaceMixPercent = {
-    hover: { light: 6, dark: 9 },
+    hover: 3.5,
     active: { light: 12, dark: 18 },
 };
 /** `color-mix` of a foreground into `base` (transparent by default). */
@@ -34,7 +34,7 @@ const themeWash = memoize((foreground, percent, base) => defineVars({
 }).wash);
 // Craft-style foreground wash over the element's own surface.
 const elementStates = defineVars({
-    elementHover: surfaceWash(colors.gray[12], 3.5, elementSurface.element),
+    elementHover: surfaceWash(colors.gray[12], surfaceMixPercent.hover, elementSurface.element),
     elementActive: surfaceWash(colors.gray[12], 7, elementSurface.element),
 });
 export const backgroundColor = {

package/dist/tokens/shadow.d.ts

@@ -1,5 +1,8 @@
 export declare const shadowVars: import("purse-styles").VariableGroup<{
-    readonly control: "inset 0 1px #ffffff08, inset 0 0 1px .5px #fff1, 0 1px .5px #00000018, 0 0 3px -1px #000a";
+    readonly control: {
+        readonly default: "inset 0 1px #fff8, inset 0 0 1px 1px #fff8, 0 .5px 1px #00000018, 0 0 1px #0001, 0 0 4px -1px #0001";
+        readonly ":root[data-theme=\"dark\"]": "inset 0 1px #ffffff08, inset 0 0 1px .5px #fff1, 0 1px .5px #00000018, 0 0 3px -1px #000a";
+    };
     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,7 +13,10 @@ const shadowParams = defineVars({
 const rgb = shadowParams.foregroundRgb;
 const blur = shadowParams.blurOpacity;
 export const shadowVars = defineVars({
-    control: `inset 0 1px #ffffff08, inset 0 0 1px .5px #fff1, 0 1px .5px #00000018, 0 0 3px -1px #000a`,
+    control: {
+        default: `inset 0 1px #fff8, inset 0 0 1px 1px #fff8, 0 .5px 1px #00000018, 0 0 1px #0001, 0 0 4px -1px #0001`,
+        [DARK_THEME]: `inset 0 1px #ffffff08, inset 0 0 1px .5px #fff1, 0 1px .5px #00000018, 0 0 3px -1px #000a`,
+    },
     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.40",
+	"version": "0.0.42",
 	"description": "Maui design system",
 	"type": "module",
 	"main": "./dist/maui.js",
@@ -63,11 +63,13 @@
 		"clear": "mkdir -p dist && rm -rf dist/*",
 		"dev": "vite",
 		"build": "npm run og && vite build",
+		"build:review": "vite build --mode review --outDir ../website-review",
 		"build:lib": "tsc -p tsconfig.lib.json",
 		"prepack": "npm run build:lib",
 		"verify-package": "node scripts/verify-package.mjs",
 		"og": "node scripts/generate-og-image.mjs",
 		"serve": "vite preview",
+		"serve:review": "serve -s website-review",
 		"deploy": "npx vercel deploy",
 		"test": "vitest",
 		"mcp:browser": "node .cursor/libretto-browser-mcp.mjs",

package/src/apps/AiChat/AiChat.tsx

@@ -3,9 +3,9 @@ import type { Editor as TiptapEditor } from "@tiptap/react"
 import { style, useStyles } from "purse-styles"
 import { Button } from "../../components/Button"
 import { MarkdownEditor } from "../../components/MarkdownEditor"
-import { Icons } from "../../components/Icons"
 import { Thinking } from "../../components/Thinking"
 import { AssistantMessage } from "../../patterns/AssistantMessage"
+import { ArrowUp } from "../../icons"
 import { backgroundColor } from "../../tokens/background"
 import { border } from "../../tokens/borders"
 import { colors } from "../../tokens/colors"
@@ -105,10 +105,7 @@ function streamAssistantTurn(
 			onDone()
 			return
 		}
-		timeoutId = window.setTimeout(
-			tickText,
-			16 + Math.floor(Math.random() * 28),
-		)
+		timeoutId = window.setTimeout(tickText, 16 + Math.floor(Math.random() * 28))
 	}
 
 	const tickTools = () => {
@@ -313,7 +310,7 @@ export function AiChat() {
 							isDisabled={streaming || !draft.trim()}
 							onClick={send}
 						>
-							<Icons.ArrowUp size="sm" />
+							<ArrowUp size="sm" />
 						</Button>
 					</div>
 				</div>
@@ -398,7 +395,9 @@ const composerShellClass = style(
 	},
 )
 
-const composerActionsClass = style(flex({ alignItems: "center", justifyContent: "end", gap: 3 }))
+const composerActionsClass = style(
+	flex({ alignItems: "center", justifyContent: "end", gap: 3 }),
+)
 
 /** Filled circular send control — icon-only Button without the default shadow. */
 const sendButtonClass = style(radius.circle, {