@horon-ai/react 0.1.4 → 0.1.6

package/package.json

@@ -1,12 +1,17 @@
 {
 	"name": "@horon-ai/react",
-	"version": "0.1.4",
+	"version": "0.1.6",
 	"repository": {
 		"type": "git",
 		"url": "git+https://github.com/horon-ai/design.git",
 		"directory": "packages/react"
 	},
 	"type": "module",
+	"sideEffects": [
+		"./src/index.ts",
+		"./src/styles/globals.css",
+		"./src/lib/cursor-ghost.ts"
+	],
 	"files": [
 		"src",
 		"README.md"
@@ -30,7 +35,7 @@
 	"dependencies": {
 		"@base-ui/react": "^1.9.0",
 		"@fontsource-variable/geist-mono": "^5.3.0",
-		"@horon-ai/tokens": "0.1.4",
+		"@horon-ai/tokens": "0.1.6",
 		"@phosphor-icons/react": "^2.1.10",
 		"@tanstack/react-table": "^9.3.1",
 		"pretendard": "^1.3.9",

package/src/components/agent-activity.tsx

@@ -138,7 +138,7 @@ export function StreamingText({ text, streaming = true, smooth = true, className
         <span
           aria-hidden
           className={cn(
-            "ml-px inline-block h-[1.15em] w-0.5 rounded-[1px] bg-interactive-primary align-[-0.2em]",
+            "ml-px inline-block h-[1.15em] w-0.5 rounded-full bg-interactive-primary align-[-0.2em]",
             !typing && "animate-caret",
           )}
         />
@@ -242,7 +242,7 @@ export function WorkLog({
     <details
       open
       className={cn(
-        "group flex w-full max-w-85 min-w-0 flex-col motion-details rounded-[16px] border border-border-default bg-bg-surface p-1.5",
+        "group flex w-full max-w-85 min-w-0 flex-col motion-details rounded-2xl border border-border-default bg-bg-surface p-1.5",
         className,
       )}
     >

package/src/components/agent-lane.tsx

@@ -68,10 +68,10 @@ export function AgentLane({ status, bot, elapsed, task, tool, output, usage, cla
     >
       <div className="flex items-center gap-2 text-caption text-text-secondary">
         {/* live-pulse draws its ring in currentColor, so the running wrapper carries the tile's sky tone. */}
-        <span className={cn("shrink-0 rounded-[5px]", status === "running" && "animate-live-pulse text-sky-400")}>
+        <span className={cn("shrink-0 rounded-xs", status === "running" && "animate-live-pulse text-sky-400")}>
           <span
             className={cn(
-              "flex size-4.5 items-center justify-center rounded-[5px] text-label-sm text-text-inverse motion-colors",
+              "flex size-4.5 items-center justify-center rounded-xs text-label-sm text-text-inverse motion-colors",
               botTile[status],
             )}
           >

package/src/components/agent-lanes-timeline.tsx

@@ -193,7 +193,7 @@ export function AgentLanesTimeline({
   return (
     <section
       className={cn(
-        "flex w-full max-w-252.5 min-w-0 flex-col overflow-clip rounded-[24px] border border-border-default bg-bg-surface",
+        "flex w-full max-w-252.5 min-w-0 flex-col overflow-clip rounded-xl border border-border-default bg-bg-surface",
         className,
       )}
       {...props}
@@ -261,7 +261,7 @@ export function AgentLanesTimeline({
             >
               <span
                 className={cn(
-                  "flex size-8.5 shrink-0 items-center justify-center rounded-[10px] text-label-md text-text-on-ink",
+                  "flex size-8.5 shrink-0 items-center justify-center rounded-md text-label-md text-text-on-ink",
                   avatarTone[bot.tone],
                 )}
               >
@@ -327,7 +327,7 @@ export function AgentLanesTimeline({
               <div
                 key={task.id}
                 className={cn(
-                  "absolute flex h-9 motion-rise items-center gap-1.5 overflow-clip rounded-[10px] px-2.5 text-label-sm transition-[left,width,background-color,color,border-color] duration-280 ease-emphasized [&>svg]:size-3.5",
+                  "absolute flex h-9 motion-rise items-center gap-1.5 overflow-clip rounded-md px-2.5 text-label-sm transition-[left,width,background-color,color,border-color] duration-280 ease-emphasized [&>svg]:size-3.5",
                   barTone[task.tone],
                 )}
                 style={{

package/src/components/agent-panel.tsx

@@ -34,7 +34,7 @@ export function AgentPanel({
   return (
     <section
       className={cn(
-        "flex min-w-0 flex-col items-stretch gap-3 rounded-[24px] border border-border-default bg-bg-surface px-5 pt-4 pb-2",
+        "flex min-w-0 flex-col items-stretch gap-3 rounded-xl border border-border-default bg-bg-surface px-5 pt-4 pb-2",
         className,
       )}
       {...props}
@@ -70,7 +70,7 @@ export function ComposerChip({ leading, tileClassName, className, children, ...p
       {typeof leading === "string" ? (
         <span
           className={cn(
-            "flex size-4 items-center justify-center rounded-[5px] text-label-sm text-text-inverse",
+            "flex size-4 items-center justify-center rounded-xs text-label-sm text-text-inverse",
             tileClassName ?? "bg-interactive-primary",
           )}
         >

package/src/components/agent-steering-panel.tsx

@@ -102,7 +102,7 @@ function SteeringNoteRow({
   return (
     <li
       className={cn(
-        "flex items-center gap-2.5 rounded-[10px] bg-overlay-ink-4 py-2 pr-2.5 pl-3.5",
+        "flex items-center gap-2.5 rounded-md bg-overlay-ink-4 py-2 pr-2.5 pl-3.5",
         leaving ? "animate-pop-out" : "motion-rise",
       )}
       onAnimationEnd={(event) => {
@@ -201,7 +201,7 @@ export function AgentSteeringPanel({
   return (
     <section
       className={cn(
-        "flex w-full max-w-130 min-w-0 flex-col overflow-clip rounded-[24px] border border-border-default bg-bg-surface",
+        "flex w-full max-w-130 min-w-0 flex-col overflow-clip rounded-xl border border-border-default bg-bg-surface",
         className,
       )}
       {...props}

package/src/components/bot-instructions-panel.tsx

@@ -259,7 +259,7 @@ export function BotInstructionsPanel({
   return (
     <section
       className={cn(
-        "flex w-full max-w-155 min-w-0 flex-col overflow-clip rounded-[24px] border border-border-default bg-bg-surface",
+        "flex w-full max-w-155 min-w-0 flex-col overflow-clip rounded-xl border border-border-default bg-bg-surface",
         className,
       )}
       {...props}
@@ -307,7 +307,7 @@ export function BotInstructionsPanel({
             onClick={onBotClick}
             className="flex h-7.5 shrink-0 motion-press cursor-pointer items-center gap-1.5 rounded-full bg-overlay-ink-6 pr-2.5 pl-1.5 text-label-sm text-text-primary hover:bg-overlay-ink-10 focus-visible:outline-2 focus-visible:outline-text-brand"
           >
-            <span className="flex size-4.5 items-center justify-center rounded-[5px] bg-interactive-primary text-label-sm text-text-inverse">
+            <span className="flex size-4.5 items-center justify-center rounded-xs bg-interactive-primary text-label-sm text-text-inverse">
               {bot.initial}
             </span>
             {bot.name}
@@ -315,7 +315,7 @@ export function BotInstructionsPanel({
           </button>
         ) : (
           <span className="flex h-7.5 shrink-0 items-center gap-1.5 rounded-full bg-overlay-ink-6 pr-2.5 pl-1.5 text-label-sm text-text-primary">
-            <span className="flex size-4.5 items-center justify-center rounded-[5px] bg-interactive-primary text-label-sm text-text-inverse">
+            <span className="flex size-4.5 items-center justify-center rounded-xs bg-interactive-primary text-label-sm text-text-inverse">
               {bot.initial}
             </span>
             {bot.name}

package/src/components/bot-memory-panel.tsx

@@ -139,7 +139,7 @@ export function BotMemoryPanel({
   return (
     <section
       className={cn(
-        "flex w-full max-w-140 min-w-0 flex-col overflow-clip rounded-[24px] border border-border-default bg-bg-surface",
+        "flex w-full max-w-140 min-w-0 flex-col overflow-clip rounded-xl border border-border-default bg-bg-surface",
         className,
       )}
       {...props}

package/src/components/bottom-sheet.tsx

@@ -94,7 +94,7 @@ export function BottomSheetContent({
         <Drawer.Popup
           className={cn(
             "relative flex max-h-[calc(100dvh-2rem)] w-full flex-col items-stretch overflow-clip px-4 pt-2 outline-none",
-            solid ? "rounded-t-xl bg-bg-surface pb-6" : "veil-overlay rounded-t-[32px] pb-5",
+            solid ? "rounded-t-xl bg-bg-surface pb-6" : "veil-overlay rounded-t-xl pb-5",
             "transition-[translate] duration-320 ease-out-quint data-ending-style:translate-y-full data-ending-style:duration-220 data-ending-style:ease-in data-starting-style:translate-y-full",
             detail ? "gap-4.5" : floating ? "gap-3" : "max-w-93.5 gap-1",
             className,
@@ -103,7 +103,7 @@ export function BottomSheetContent({
         >
           <span
             aria-hidden
-            className="relative mx-auto h-[5px] w-9 cursor-grab touch-none rounded-[3px] bg-overlay-ink-20 active:cursor-grabbing"
+            className="relative mx-auto h-[5px] w-9 cursor-grab touch-none rounded-full bg-overlay-ink-20 active:cursor-grabbing"
           />
           <Drawer.Content
             className={cn(

package/src/components/calendar.tsx

@@ -324,7 +324,7 @@ export function Calendar(props: CalendarProps) {
             ? "veil-overlay"
             : "bg-glass-thick",
         variant === "popover"
-          ? cn("rounded-[24px]", containerSizeClass[size].popover)
+          ? cn("rounded-xl", containerSizeClass[size].popover)
           : cn("rounded-xl", containerSizeClass[size].default),
         // Paper renders every popover day on the label scale; the default calendar mixes body and label.
         variant === "popover" && popoverDayTextClass[size],

package/src/components/chat-controls.tsx

@@ -152,13 +152,13 @@ export function VoiceInput({
         onClick={onStop}
         className="relative flex size-9 shrink-0 motion-press cursor-pointer items-center justify-center rounded-full bg-interactive-danger focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-text-brand"
       >
-        <span className="size-3 rounded-[3px] bg-interactive-on-danger" />
+        <span className="size-3 bg-interactive-on-danger" />
       </button>
       <div aria-hidden className="relative flex min-w-0 flex-1 items-center gap-[3px] overflow-hidden">
         {bars.map((bar, position) => (
           <span
             key={bar.id}
-            className={cn("w-[3px] shrink-0 rounded-[2px] bg-interactive-primary-75", recording && "animate-wave")}
+            className={cn("w-[3px] shrink-0 rounded-full bg-interactive-primary-75", recording && "animate-wave")}
             style={{ height: bar.height, animationDelay: recording ? `${position * 120}ms` : undefined }}
           />
         ))}

package/src/components/code-panel.tsx

@@ -27,7 +27,7 @@ export function CodePanel({ className, ...props }: CodePanelProps) {
   return (
     <pre
       className={cn(
-        "font-normal m-0 max-w-full overflow-x-auto rounded-[10px] border border-border-default bg-neutral-50 px-4 py-3.5 font-mono text-[12px]/[21px] whitespace-pre text-syntax-string dark:border-border-strong dark:bg-neutral-800",
+        "font-normal m-0 max-w-full overflow-x-auto rounded-md border border-border-default bg-neutral-50 px-4 py-3.5 font-mono text-[12px]/[21px] whitespace-pre text-syntax-string dark:border-border-strong dark:bg-neutral-800",
         className,
       )}
       {...props}

package/src/components/combobox.tsx

@@ -290,7 +290,7 @@ export function Combobox(props: ComboboxProps) {
                     {shortLabel(item)}
                     <BaseCombobox.ChipRemove
                       aria-label={`Remove ${item.label}`}
-                      className="flex cursor-pointer rounded-full p-0.5 text-text-secondary hover:bg-overlay-ink-10 hover:text-text-primary"
+                      className="flex cursor-pointer rounded-full p-0.5 text-text-secondary hover:bg-overlay-ink-10 hover:text-text-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-text-brand"
                     >
                       <X />
                     </BaseCombobox.ChipRemove>

package/src/components/command-palette.tsx

@@ -120,7 +120,7 @@ export function CommandPalette({
             aria-label={placeholder}
             className={cn(
               // 560px where it fits; the viewport's 8px gutters cap `w-full` below that.
-              "relative flex w-full max-w-140 motion-popup flex-col overflow-clip rounded-[24px] p-1.5",
+              "relative flex w-full max-w-140 motion-popup flex-col overflow-clip rounded-xl p-1.5",
               surface === "glass" ? "veil-overlay" : "border border-border-default bg-bg-surface shadow-palette",
               "duration-240 data-starting-style:translate-y-2",
               className,

package/src/components/composer.tsx

@@ -98,6 +98,7 @@ export function Composer({
       onSubmit={submit}
       className={cn(
         "relative flex max-w-full min-w-0 items-center overflow-clip rounded-full motion-colors has-[input:focus-visible]:border-border-strong",
+        "has-[input:focus-visible]:outline-2 has-[input:focus-visible]:outline-offset-2 has-[input:focus-visible]:outline-text-brand",
         surface === "glass" ? "veil-field" : "border border-border-default bg-bg-surface",
         sizeClass[size],
         className,

package/src/components/data-table.tsx

@@ -105,7 +105,7 @@ export function DataTableHeader({ icon, title, actions, className }: DataTableHe
   return (
     <div className={cn("flex items-center gap-3 px-6 py-4.5 group-data-[device=mobile]/dt:px-4.5", className)}>
       {icon && (
-        <span className="flex size-6.5 shrink-0 items-center justify-center rounded-[7px] bg-bg-brand text-text-brand [&>svg]:size-4">
+        <span className="flex size-6.5 shrink-0 items-center justify-center rounded-xs bg-bg-brand text-text-brand [&>svg]:size-4">
           {icon}
         </span>
       )}

package/src/components/directory-card.tsx

@@ -59,7 +59,7 @@ export function DirectoryCard({
       {...props}
     >
       {surface === "glass" && <LiquidGlass />}
-      <span className="relative flex size-10 shrink-0 items-center justify-center rounded-[10px] bg-sky-500 text-neutral-50 [&>svg]:size-5">
+      <span className="relative flex size-10 shrink-0 items-center justify-center rounded-md bg-sky-500 text-neutral-50 [&>svg]:size-5">
         {icon}
       </span>
       <span className="relative flex min-w-0 flex-1 flex-col gap-0.5">

package/src/components/document-extract-panel.tsx

@@ -217,7 +217,7 @@ export function DocumentExtractPanel({
   return (
     <section
       className={cn(
-        "@container flex w-full max-w-280 min-w-0 flex-col overflow-clip rounded-[24px] border border-border-default bg-bg-surface",
+        "@container flex w-full max-w-280 min-w-0 flex-col overflow-clip rounded-xl border border-border-default bg-bg-surface",
         className,
       )}
       {...props}
@@ -225,7 +225,7 @@ export function DocumentExtractPanel({
       <div className="flex flex-col @4xl:flex-row">
         <div className="flex min-w-0 flex-col @4xl:w-135 @4xl:shrink-0">
           <div className="flex flex-wrap items-center gap-2 px-5 py-3">
-            <span className="flex size-7 shrink-0 items-center justify-center rounded-[10px] bg-overlay-ink-5 text-text-danger">
+            <span className="flex size-7 shrink-0 items-center justify-center rounded-md bg-overlay-ink-5 text-text-danger">
               <FilePdf aria-hidden className="size-4" />
             </span>
             {onOpenFile ? (
@@ -331,7 +331,7 @@ export function DocumentExtractPanel({
                                 </span>
                               ) : null}
                             </div>
-                            <div className="flex flex-col overflow-x-auto rounded-[10px] border border-overlay-ink-10 px-3 py-0.5">
+                            <div className="flex flex-col overflow-x-auto rounded-md border border-overlay-ink-10 px-3 py-0.5">
                               <div className="flex min-w-52 flex-col">
                                 <div className="flex items-center gap-2 py-2 text-caption text-text-secondary">
                                   {field.columns.map((column) => (
@@ -384,7 +384,7 @@ export function DocumentExtractPanel({
                             onClick={() => resolve(field.id)}
                             aria-label={needsCheck ? `Confirm ${field.label}` : undefined}
                             className={cn(
-                              "flex h-9 min-w-0 flex-1 items-center gap-2 rounded-[10px] border px-3 text-start motion-colors",
+                              "flex h-9 min-w-0 flex-1 items-center gap-2 rounded-md border px-3 text-start motion-colors",
                               needsCheck
                                 ? "cursor-pointer border-border-danger bg-overlay-ink-12 hover:bg-overlay-ink-14 focus-visible:outline-2 focus-visible:outline-text-brand"
                                 : "cursor-default border-transparent bg-overlay-ink-4",
@@ -416,7 +416,7 @@ export function DocumentExtractPanel({
               </>
             ) : null}
             {view === "json" ? (
-              <pre className="animate-slide-shift-next overflow-x-auto rounded-[10px] bg-overlay-ink-4 p-3 font-mono text-caption whitespace-pre text-text-primary">
+              <pre className="animate-slide-shift-next overflow-x-auto rounded-md bg-overlay-ink-4 p-3 font-mono text-caption whitespace-pre text-text-primary">
                 {json}
               </pre>
             ) : null}
@@ -454,7 +454,7 @@ export function DocumentExtractPanel({
         <span className="min-w-0 flex-1" />
         {bot ? (
           <>
-            <span className="flex size-5 items-center justify-center rounded-[5px] bg-interactive-primary text-label-sm text-text-inverse">
+            <span className="flex size-5 items-center justify-center rounded-xs bg-interactive-primary text-label-sm text-text-inverse">
               {bot.initial}
             </span>
             <span className="text-caption text-text-secondary">

package/src/components/file-drop.tsx

@@ -94,7 +94,7 @@ export function FileDrop({
       onDragLeave={() => setDragging(false)}
       onDrop={onDrop}
       className={cn(
-        "relative flex w-full max-w-[550px] cursor-pointer items-center justify-center gap-2 overflow-clip rounded-[10px] border-[1.5px] border-dashed border-border-dashed px-4 py-3 text-label-md text-text-secondary motion-colors",
+        "relative flex w-full max-w-[550px] cursor-pointer items-center justify-center gap-2 overflow-clip rounded-md border-[1.5px] border-dashed border-border-dashed px-4 py-3 text-label-md text-text-secondary motion-colors",
         "has-[:focus-visible]:outline-2 has-[:focus-visible]:outline-offset-2 has-[:focus-visible]:outline-text-brand",
         // The dashed edge stays put (border-style cannot transition) and the active state adds an inner rim.
         "data-dragging:border-border-brand data-dragging:shadow-[inset_0_0_0_1px_var(--color-text-brand)]",

package/src/components/integration-row.tsx

@@ -95,7 +95,7 @@ export function IntegrationRow({
       {surface === "glass" && <LiquidGlass />}
       <span
         className={cn(
-          "relative flex size-10 shrink-0 items-center justify-center rounded-[10px] motion-colors [&>svg]:size-5",
+          "relative flex size-10 shrink-0 items-center justify-center rounded-md motion-colors [&>svg]:size-5",
           surface === "glass" && status === "not-connected"
             ? "bg-overlay-ink-6 text-text-secondary"
             : tileClass[status],

package/src/components/knowledge-base-panel.tsx

@@ -120,7 +120,7 @@ export function KnowledgeBasePanel({
   return (
     <section
       className={cn(
-        "flex w-full max-w-200 min-w-0 flex-col items-stretch gap-3 rounded-[24px] border border-border-default bg-bg-surface px-5 py-4.5",
+        "flex w-full max-w-200 min-w-0 flex-col items-stretch gap-3 rounded-xl border border-border-default bg-bg-surface px-5 py-4.5",
         className,
       )}
       {...props}

package/src/components/list-detail.tsx

@@ -121,7 +121,7 @@ export function ListDetail({
                 role="option"
                 aria-selected={item.id === selected?.id}
                 data-selected={item.id === selected?.id ? "" : undefined}
-                className="flex cursor-pointer flex-col gap-1 rounded-[10px] px-3 py-2.5 text-left motion-colors hover:bg-overlay-ink-4 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-text-brand data-selected:bg-overlay-ink-6 data-selected:hover:bg-overlay-ink-8"
+                className="flex cursor-pointer flex-col gap-1 rounded-md px-3 py-2.5 text-left motion-colors hover:bg-overlay-ink-4 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-text-brand data-selected:bg-overlay-ink-6 data-selected:hover:bg-overlay-ink-8"
                 onClick={() => {
                   setInner(item.id);
                   onValueChange?.(item.id);
@@ -165,7 +165,7 @@ export function ListDetailHeader({ icon, title, description, actions, className,
   return (
     <div className={cn("flex flex-wrap items-center gap-3", className)} {...props}>
       {icon && (
-        <span className="flex size-10 shrink-0 items-center justify-center rounded-[10px] bg-sky-100 text-sky-700 dark:bg-sky-900 dark:text-sky-300 [&_svg]:size-5">
+        <span className="flex size-10 shrink-0 items-center justify-center rounded-md bg-sky-100 text-sky-700 dark:bg-sky-900 dark:text-sky-300 [&_svg]:size-5">
           {icon}
         </span>
       )}
@@ -301,7 +301,7 @@ export function ListDetailInstructions({
             aria-label="Edit instructions"
             value={text}
             rows={6}
-            className="block w-full resize-y rounded-[10px] border border-border-default bg-bg-inset px-4 py-3.5 font-mono text-[12px]/[21px] text-text-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-text-brand"
+            className="block w-full resize-y rounded-md border border-border-default bg-bg-inset px-4 py-3.5 font-mono text-[12px]/[21px] text-text-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-text-brand"
             onChange={(event) => {
               setInner(event.target.value);
               onValueChange?.(event.target.value);

package/src/components/marketplace-card.tsx

@@ -85,7 +85,7 @@ export function MarketplaceCard({
       <div className="relative flex items-center gap-3">
         <span
           aria-hidden
-          className="flex size-10 shrink-0 items-center justify-center rounded-[10px] bg-neutral-900 text-label-md text-neutral-50"
+          className="flex size-10 shrink-0 items-center justify-center rounded-md bg-neutral-900 text-label-md text-neutral-50"
         >
           {initials}
         </span>

package/src/components/mcp-server-row.tsx

@@ -119,7 +119,7 @@ export function McpServerRow({
       )}
       {...props}
     >
-      <span className="flex size-10 shrink-0 items-center justify-center rounded-[10px] bg-sky-500 text-label-md text-neutral-50">
+      <span className="flex size-10 shrink-0 items-center justify-center rounded-md bg-sky-500 text-label-md text-neutral-50">
         {initials ?? name.slice(0, 2).toUpperCase()}
       </span>
       <div className="flex min-w-0 grow basis-40 flex-col gap-1">

package/src/components/menu.tsx

@@ -64,8 +64,8 @@ export type MenuContentProps = WithClass<ComponentProps<typeof BaseMenu.Popup>>
  */
 export const menuPopupClass = {
   glass: "rounded-xl veil-overlay",
-  solid: "rounded-[18px] bg-glass-fill-solid shadow-popover",
-  paper: "rounded-[14px] border border-border-default bg-bg-default shadow-[0_12px_32px_#0A142424]",
+  solid: "rounded-xl bg-glass-fill-solid shadow-popover",
+  paper: "rounded-lg border border-border-default bg-bg-default shadow-[0_12px_32px_#0A142424]",
 } as const;
 
 /**
@@ -168,7 +168,7 @@ export function MenuItem({
     <BaseMenu.Item
       className={cn(
         "relative flex w-full cursor-pointer items-center gap-2.5 motion-colors outline-none select-none data-disabled:cursor-not-allowed data-disabled:opacity-40 data-highlighted:bg-overlay-ink-6",
-        surface === "glass" ? "rounded-md px-3" : "rounded-[10px] px-2.5",
+        surface === "glass" ? "rounded-md px-3" : "rounded-md px-2.5",
         description ? "h-12" : surface === "glass" ? "h-10" : "h-9",
         selected && "bg-bg-brand data-highlighted:bg-bg-brand",
         className,

package/src/components/message-extras.tsx

@@ -116,11 +116,11 @@ export function Attachment({ name, detail, thumbnail, onRemove, removeLabel = "R
       {thumbnail ? (
         <span
           aria-hidden
-          className="size-10 shrink-0 rounded-[10px] bg-cover bg-center"
+          className="size-10 shrink-0 rounded-md bg-cover bg-center"
           style={{ backgroundImage: `url(${JSON.stringify(thumbnail)})` }}
         />
       ) : (
-        <span className="flex size-10 shrink-0 items-center justify-center rounded-[10px] bg-accent-sky-500-16 text-text-brand">
+        <span className="flex size-10 shrink-0 items-center justify-center rounded-md bg-accent-sky-500-16 text-text-brand">
           <FileText aria-hidden className="size-5" />
         </span>
       )}

package/src/components/orchestrator-panel.tsx

@@ -117,7 +117,7 @@ export function OrchestratorPanel({
   return (
     <section
       className={cn(
-        "flex w-full min-w-0 flex-col overflow-clip rounded-[24px] border border-border-default bg-bg-surface",
+        "flex w-full min-w-0 flex-col overflow-clip rounded-xl border border-border-default bg-bg-surface",
         className,
       )}
     >
@@ -151,7 +151,7 @@ export function OrchestratorPanel({
       <div role="separator" className="h-px bg-overlay-ink-8" />
       <div className="flex flex-col gap-2.5 px-5 pt-4 pb-5">
         <div className="flex flex-wrap items-center gap-2">
-          <span className="flex size-5.5 shrink-0 items-center justify-center rounded-[5px] bg-interactive-primary text-label-sm text-text-inverse">
+          <span className="flex size-5.5 shrink-0 items-center justify-center rounded-xs bg-interactive-primary text-label-sm text-text-inverse">
             {lead.initial}
           </span>
           <span className="min-w-0 truncate text-label-lg text-text-primary">{lead.name}</span>

package/src/components/page-header.tsx

@@ -54,7 +54,7 @@ export function PageHeader({
   return (
     <header
       className={cn(
-        "relative flex max-w-full min-w-0 flex-col gap-1.5 overflow-clip rounded-[28px] p-2",
+        "relative flex max-w-full min-w-0 flex-col gap-1.5 overflow-clip rounded-xl p-2",
         surface === "glass" ? "bg-glass-regular" : "border border-border-default bg-bg-surface",
         className,
       )}

package/src/components/plan-step.tsx

@@ -97,7 +97,7 @@ export function PlanStep({
         {!last && (
           <span
             className={cn(
-              "w-0.5 flex-1 rounded-[1px] motion-colors",
+              "w-0.5 flex-1 rounded-full motion-colors",
               status === "done" ? "bg-status-live" : "bg-border-default",
             )}
           />

package/src/components/plugin-row.tsx

@@ -116,7 +116,7 @@ export function PluginRow({
     >
       <span
         aria-hidden
-        className="flex size-10 shrink-0 items-center justify-center rounded-[10px] bg-sky-500 text-label-md text-neutral-50"
+        className="flex size-10 shrink-0 items-center justify-center rounded-md bg-sky-500 text-label-md text-neutral-50"
       >
         {initials}
       </span>

package/src/components/research-run-panel.tsx

@@ -155,7 +155,7 @@ export function ResearchRunPanel({
   return (
     <section
       className={cn(
-        "flex w-full max-w-150 min-w-0 flex-col overflow-clip rounded-[24px] border border-border-default bg-bg-surface",
+        "flex w-full max-w-150 min-w-0 flex-col overflow-clip rounded-xl border border-border-default bg-bg-surface",
         className,
       )}
       {...props}
@@ -188,7 +188,7 @@ export function ResearchRunPanel({
               >
                 <Spinner size={14} />
                 <span className="min-w-0 text-label-md text-text-primary">{statusLabel}</span>
-                <span aria-hidden className="h-3 w-0.5 shrink-0 animate-caret rounded-[1px] bg-interactive-primary" />
+                <span aria-hidden className="h-3 w-0.5 shrink-0 animate-caret rounded-full bg-interactive-primary" />
                 {meta.length > 0 && (
                   <span className="text-caption text-text-secondary tabular-nums">
                     {meta.map((entry, index) => (
@@ -205,7 +205,7 @@ export function ResearchRunPanel({
               <div aria-live="polite" className="flex flex-wrap items-center gap-x-1.5 gap-y-1">
                 <Spinner size={14} />
                 <span className="min-w-0 text-label-md text-text-primary">{statusLabel}</span>
-                <span aria-hidden className="h-3 w-0.5 shrink-0 animate-caret rounded-[1px] bg-interactive-primary" />
+                <span aria-hidden className="h-3 w-0.5 shrink-0 animate-caret rounded-full bg-interactive-primary" />
                 {meta.length > 0 && (
                   <span className="text-caption text-text-secondary tabular-nums">
                     {meta.map((entry, index) => (

package/src/components/settings-list.tsx

@@ -110,7 +110,7 @@ export function SettingsRowIcon({ className, ...props }: WithClass<ComponentProp
     <span
       aria-hidden
       className={cn(
-        "flex size-8 shrink-0 items-center justify-center rounded-[9px] bg-bg-subtle text-text-primary [&_svg]:size-4",
+        "flex size-8 shrink-0 items-center justify-center rounded-sm bg-bg-subtle text-text-primary [&_svg]:size-4",
         className,
       )}
       {...props}

package/src/components/sidebar.tsx

@@ -265,7 +265,7 @@ export function SidebarWorkspaceSwitch({ initial, name, className, ...props }: S
     <button
       type="button"
       className={cn(
-        "flex h-9 min-w-0 flex-1 cursor-pointer items-center gap-1.5 rounded-[10px] pr-1 pl-2 text-left motion-colors hover:bg-overlay-ink-6 data-popup-open:bg-overlay-ink-6",
+        "flex h-9 min-w-0 flex-1 cursor-pointer items-center gap-1.5 rounded-md pr-1 pl-2 text-left motion-colors hover:bg-overlay-ink-6 data-popup-open:bg-overlay-ink-6",
         "focus-visible:outline-2 focus-visible:outline-text-brand",
         className,
       )}
@@ -532,7 +532,7 @@ export function SidebarAccount({ initials, name, email, className, ...props }: S
       )}
       {...props}
     >
-      <span className="flex size-9 shrink-0 items-center justify-center rounded-[10px] bg-sky-200 text-label-md text-surface-ink">
+      <span className="flex size-9 shrink-0 items-center justify-center rounded-md bg-sky-200 text-label-md text-surface-ink">
         {initials}
       </span>
       <span className="flex min-w-0 flex-1 flex-col">
@@ -701,7 +701,7 @@ export function SidebarAddButton({ icon = addIcon, className, children, ...props
     <button
       type="button"
       className={cn(
-        "relative mt-2 flex h-9 w-full cursor-pointer items-center justify-center gap-1.5 rounded-[10px] text-label-md text-text-secondary motion-colors hover:bg-overlay-ink-4",
+        "relative mt-2 flex h-9 w-full cursor-pointer items-center justify-center gap-1.5 rounded-md text-label-md text-text-secondary motion-colors hover:bg-overlay-ink-4",
         "focus-visible:outline-2 focus-visible:outline-text-brand",
         className,
       )}

package/src/components/source-row.tsx

@@ -93,11 +93,11 @@ export function SourceRow({
         "flex flex-wrap items-center gap-x-3 gap-y-2 px-2 py-3",
         variant === "list"
           ? "relative after:absolute after:inset-x-2 after:bottom-0 after:h-px after:bg-overlay-ink-8 last:after:hidden"
-          : "rounded-[14px] border border-border-default bg-bg-surface px-3",
+          : "rounded-lg border border-border-default bg-bg-surface px-3",
         className,
       )}
     >
-      <span className="flex size-8 shrink-0 items-center justify-center rounded-[10px] bg-overlay-ink-5 text-text-primary [&>svg]:size-4">
+      <span className="flex size-8 shrink-0 items-center justify-center rounded-md bg-overlay-ink-5 text-text-primary [&>svg]:size-4">
         {icon}
       </span>
       <span className="flex min-w-0 flex-1 flex-col gap-0.5">

package/src/components/task-row.tsx

@@ -116,7 +116,7 @@ export function TaskRow({
       <div className="flex items-center gap-1.5 text-caption text-text-secondary">
         <span
           className={cn(
-            "flex size-4.5 shrink-0 items-center justify-center rounded-[5px] text-label-sm",
+            "flex size-4.5 shrink-0 items-center justify-center rounded-xs text-label-sm",
             bot.tileClassName ? cn("text-text-inverse", bot.tileClassName) : botTile[status],
           )}
         >

package/src/components/toast.tsx

@@ -92,6 +92,7 @@ function ToastList({ size, surface }: {
           aria-label="Close"
           className={cn(
             "relative flex shrink-0 motion-press cursor-pointer text-text-secondary motion-colors hover:text-text-primary",
+            "focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-text-brand",
             "after:absolute after:-inset-2 after:content-['']",
             closeSizeClass[size],
           )}

package/src/components/tool-call.tsx

@@ -168,7 +168,7 @@ function Section({
           </button>
         )}
       </div>
-      <div className="min-w-0 rounded-[10px] bg-bg-subtle px-3.5 py-3">{children}</div>
+      <div className="min-w-0 rounded-md bg-bg-subtle px-3.5 py-3">{children}</div>
       {footer}
     </div>
   );
@@ -250,14 +250,14 @@ export function ToolCall({
       <Collapsible.Panel className="motion-collapse">
         <div className="flex min-w-0 flex-col gap-3.5 px-4 pb-4">
           {status === "failed" && error && (
-            <div className="flex items-center gap-2.5 rounded-[10px] bg-bg-danger px-3.5 py-3">
+            <div className="flex items-center gap-2.5 rounded-md bg-bg-danger px-3.5 py-3">
               <WarningCircle aria-hidden className="size-4 shrink-0 text-text-danger" />
               <p className="min-w-0 flex-1 text-body-sm text-text-danger">{error}</p>
               {onRetry && (
                 <button
                   type="button"
                   onClick={onRetry}
-                  className="flex h-7.5 shrink-0 motion-press cursor-pointer items-center gap-1.5 rounded-full border border-border-default bg-bg-surface px-2.5 text-label-sm text-text-primary"
+                  className="flex h-7.5 shrink-0 motion-press cursor-pointer items-center gap-1.5 rounded-full border border-border-default bg-bg-surface px-2.5 text-label-sm text-text-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-text-brand"
                 >
                   <ArrowClockwise aria-hidden className="size-3.5" />
                   Retry

package/src/components/tool-calls-header.tsx

@@ -75,7 +75,7 @@ export function ToolCallsHeader({
         {chips.length > 0 && (
           <span className="flex shrink-0 items-center">
             {Children.map(chips, (icon) => (
-              <span className="-ml-2 flex size-7 shrink-0 items-center justify-center rounded-[10px] bg-bg-subtle text-text-secondary ring-2 ring-bg-surface first:ml-0 [&>svg]:size-3.5">
+              <span className="-ml-2 flex size-7 shrink-0 items-center justify-center rounded-md bg-bg-subtle text-text-secondary ring-2 ring-bg-surface first:ml-0 [&>svg]:size-3.5">
                 {icon}
               </span>
             ))}