@workerdeck/ui 0.23.0 → 1.0.0

package/src/components/terminal/surface.tsx

@@ -1,69 +1,20 @@
 import type { CSSProperties, HTMLAttributes } from 'react'
 import { cn } from '../../lib/utils.ts'
-import {
-  AffordanceProvider,
-  resolveAffordances,
-  type TerminalAffordances,
-} from './affordances.tsx'
+import { AffordanceProvider, resolveAffordances, type TerminalAffordances } from './affordances.tsx'
 
-/**
- * The root of the terminal theme: the element that establishes the character
- * cell every row inside it lands on.
- *
- * It exists as a component rather than a class because the cell has to be *set*
- * somewhere — the font, the size and the line height together are what make
- * `1ch` mean one column and `--term-line` mean one row — and because that is the
- * one place a host is allowed to change the metrics. Everything below this
- * element measures itself in those two units and never in pixels.
- *
- * The geometry and the palette live in `styles/terminal.css`; this only names
- * the element and hands down the two numbers.
- */
 export interface TerminalSurfaceProps extends HTMLAttributes<HTMLDivElement> {
-  /**
-   * Cell size in **whole pixels**. Fractional values put every other row on a
-   * half-pixel: text softens and the diff bands show a seam, which is exactly
-   * what a grid renderer must not do. Defaults (13/18) are the CLI's own.
-   */
   fontSize?: number
   lineHeight?: number
-  /**
-   * How far a full-bleed band reaches past the content edge — normally the
-   * scroller's own horizontal padding. A band cancels it with matched negative
-   * margin and padding, so a diff hunk's wash runs to the viewport edge the way
-   * a terminal's line does, instead of stopping at a gutter.
-   */
   bleed?: string
-  /**
-   * The things a real terminal cannot do — the pointer hover fill, the
-   * hover-revealed copy actions. `false` turns them all off, an object picks.
-   * Default: all on. See {@link TerminalAffordances}; none of them costs layout,
-   * so switching them off changes no glyph's position.
-   */
   affordances?: TerminalAffordances | boolean
 }
 
-export function TerminalSurface({
-  fontSize,
-  lineHeight,
-  bleed,
-  affordances,
-  className,
-  style,
-  children,
-  ...props
-}: TerminalSurfaceProps) {
+export function TerminalSurface({ fontSize, lineHeight, bleed, affordances, className, style, children, ...props }: TerminalSurfaceProps) {
   const resolved = resolveAffordances(affordances)
   return (
     <div
-      data-terminal=''
-      // A space-separated list so CSS can ask for one with `~=` — the styling
-      // half of the switch, where the JS half (whether a button exists at all)
-      // rides the context.
-      data-affordances={
-        [resolved.hover && 'hover', resolved.actions && 'actions'].filter(Boolean).join(' ') ||
-        undefined
-      }
+      data-terminal=""
+      data-affordances={[resolved.hover && 'hover', resolved.actions && 'actions'].filter(Boolean).join(' ') || undefined}
       className={cn('min-w-0', className)}
       style={
         {
@@ -73,7 +24,8 @@ export function TerminalSurface({
           ...style,
         } as CSSProperties
       }
-      {...props}>
+      {...props}
+    >
       <AffordanceProvider value={resolved}>{children}</AffordanceProvider>
     </div>
   )

package/src/components/terminal/todos.ts

@@ -0,0 +1,66 @@
+export type TodoStatus = 'pending' | 'in_progress' | 'completed'
+
+export type TodoEntry = { status: TodoStatus; text: string }
+
+export type TodoPreview = { summary: string; shown: TodoEntry[]; more?: string }
+
+const PREVIEW_TODOS = 8
+
+const GLYPH: Record<TodoStatus, string> = { pending: '☐', in_progress: '◐', completed: '☒' }
+
+function todoEntry(value: unknown): TodoEntry | undefined {
+  if (typeof value !== 'object' || value === null) {
+    return undefined
+  }
+  const raw = value as { content?: unknown; status?: unknown; activeForm?: unknown }
+  const status = raw.status
+  if (status !== 'pending' && status !== 'in_progress' && status !== 'completed') {
+    return undefined
+  }
+  const content = typeof raw.content === 'string' ? raw.content.trim() : ''
+  if (content === '') {
+    return undefined
+  }
+  const active = typeof raw.activeForm === 'string' ? raw.activeForm.trim() : ''
+  return { status, text: status === 'in_progress' && active !== '' ? active : content }
+}
+
+// Whole-or-nothing: a malformed entry (streaming, partial input) falls back to the generic preview rather than a half-drawn checklist.
+export function parseTodos(input: unknown): TodoEntry[] | undefined {
+  const todos = (input as { todos?: unknown } | null)?.todos
+  if (!Array.isArray(todos) || todos.length === 0) {
+    return undefined
+  }
+  const out: TodoEntry[] = []
+  for (const value of todos) {
+    const entry = todoEntry(value)
+    if (entry === undefined) {
+      return undefined
+    }
+    out.push(entry)
+  }
+  return out
+}
+
+export function todoPreview(name: string, input: unknown): TodoPreview | undefined {
+  if (name !== 'TodoWrite') {
+    return undefined
+  }
+  const todos = parseTodos(input)
+  if (todos === undefined) {
+    return undefined
+  }
+  const done = todos.reduce((n, todo) => n + (todo.status === 'completed' ? 1 : 0), 0)
+  const shown = todos.slice(0, PREVIEW_TODOS)
+  const hidden = todos.length - shown.length
+  return {
+    summary: `${done}/${todos.length} done`,
+    shown,
+    more: hidden > 0 ? `… +${hidden} more` : undefined,
+  }
+}
+
+// Height and render both draw this exact string — `toolRowHeight` counts what `TerminalTodos` paints.
+export function todoLine(todo: TodoEntry): string {
+  return `${GLYPH[todo.status]} ${todo.text}`
+}

package/src/components/terminal/tool-run.ts

@@ -1,71 +1,24 @@
-/**
- * What a folded run of tool calls is, and the one line that stands for it.
- *
- * The fold was shell-only, and the screenshot that started this made the cost
- * obvious: a run of six calls that happened to alternate `Bash` with an MCP tool
- * folded into *four* rows reading "Ran 1 shell command", "Ran 2 shell commands",
- * "Ran 1 shell command" — a count for every gap between the calls it could not
- * group. The grouping rule was right and the *membership* rule was too narrow.
- *
- * So any consecutive tool calls fold. The CLI's own line is the target
- * (`called roam-code, ran 1 shell command`), and the claim is unchanged from the
- * shell version: a tool call is almost never what you came back to read, and six
- * of them bury the sentence that is.
- *
- * Pure and separate because `items.tsx` draws this line and `height.ts` wraps it
- * to predict the row's pixel height without a DOM — the same reason
- * `result-preview.ts` exists. Two spellings would be two different heights.
- */
 import type { TranscriptItem } from '@workerdeck/react'
 import { toolInputPreview } from '../../lib/format.ts'
 import { isShellTool } from '../../lib/tool-icon.ts'
 
 type ToolCallItem = Extract<TranscriptItem, { kind: 'tool_call' }>
 
-/**
- * What breaks a run.
- *
- * *Consecutive* is still the whole rule, and it is the reason the fold is honest:
- * anything the model said between two calls breaks the run, because that
- * sentence is the reason the second one happened and a count spanning it would
- * claim the two were one act. The recap boundary breaks it too — the virtualized
- * shell folds each side separately — so a count never spans "what you already
- * read".
- *
- * `parentToolUseId` is the one addition the wider membership rule needs: a
- * subagent's calls are drawn stepped in behind a rule, and folding one together
- * with a top-level call would put rows from two different frames of reference
- * under a single count.
- */
 export function foldsTogether(a: ToolCallItem, b: ToolCallItem): boolean {
   return a.parentToolUseId === b.parentToolUseId
 }
 
-/**
- * The family a tool counts as in a run's breakdown.
- *
- * An MCP tool is `mcp__<server>__<tool>`, and the *server* is the useful unit:
- * "3 roam-code" is a thing that happened, where three separate tool names are a
- * list to read. Shell tools from both engines collapse to "shell" for the same
- * reason. Everything else is its own name, lowercased so the breakdown reads as
- * prose rather than as identifiers.
- */
 export function toolFamily(name: string): string {
-  if (isShellTool(name)) return 'shell'
+  if (isShellTool(name)) {
+    return 'shell'
+  }
   const mcp = /^mcp__([^_]+(?:_[^_]+)*?)__/.exec(name)
-  if (mcp?.[1]) return mcp[1].replace(/_/g, '-')
+  if (mcp?.[1]) {
+    return mcp[1].replace(/_/g, '-')
+  }
   return name.toLowerCase()
 }
 
-/**
- * The run's one line.
- *
- * A shell-only run keeps its old wording exactly — "Ran 3 shell commands" — both
- * because it is the commonest run by far and because it is already the sentence
- * people read here; widening the fold should not have re-worded the case that
- * was working. Anything mixed gets the count plus a breakdown, loudest family
- * first.
- */
 export function runSummary(items: readonly ToolCallItem[], busy: boolean): string {
   const verb = busy ? 'Running ' : 'Ran '
   const tail = busy ? '…' : ''
@@ -79,57 +32,25 @@ export function runSummary(items: readonly ToolCallItem[], busy: boolean): strin
   if (counts.size === 1 && counts.has('shell')) {
     return `${verb}${n} shell command${n === 1 ? '' : 's'}${tail}`
   }
-  // Descending by count, then alphabetical — a stable order matters more than it
-  // looks: this string is the row's measured height, so a run whose breakdown
-  // reordered between renders would remeasure for no reason.
   const breakdown = [...counts.entries()]
     .sort((a, b) => b[1] - a[1] || a[0].localeCompare(b[0]))
     .map(([family, count]) => `${count} ${family}`)
     .join(', ')
-  // The ellipsis trails the whole line, not the count — "Running 2 tools… · 1
-  // read, 1 shell" reads as though the sentence ended and then carried on.
   return `${verb}${n} tool${n === 1 ? '' : 's'} · ${breakdown}${tail}`
 }
 
-/* ── The task block's one line ─────────────────────────────────────────────
- *
- * A `Task` call and everything its subagent produced collapse to one row (see
- * `blocks.ts`), and these are that row's words. Same contract as `runSummary`:
- * `height.ts` wraps these exact strings to predict the row's pixel height with
- * no DOM, so the component must render them verbatim — two spellings would be
- * two different heights.
- */
-
-const clip = (text: string, max = 80): string =>
-  text.length > max ? text.slice(0, max - 1) + '…' : text
+function clip(text: string, max = 80): string {
+  return text.length > max ? text.slice(0, max - 1) + '…' : text
+}
 
-const trimmed = (value: unknown): string | undefined =>
-  typeof value === 'string' && value.trim() !== '' ? value.trim() : undefined
+function trimmed(value: unknown): string | undefined {
+  return typeof value === 'string' && value.trim() !== '' ? value.trim() : undefined
+}
 
-/**
- * The row's identity half: which task this is.
- *
- * The Claude SDK's `Task` input carries `subagent_type` (e.g. "Explore") and a
- * 3–5 word `description`, and both are worth the line: parallel tasks are the
- * whole reason the block exists, and two rows both reading `Task(…)` answer
- * nothing. `Task(Explore · find the auth check)` — falling back to the
- * ordinary input preview when an engine sends neither, so the header is never
- * emptier than a plain tool row's.
- */
 export function taskLabel(task: ToolCallItem): string {
   return `${task.name}(${taskIdentity(task)})`
 }
 
-/**
- * The inner half of {@link taskLabel} — `Explore · find the auth check` — without
- * the `Task(…)` wrapper.
- *
- * Split out for the sub-agent takeover's header, which names the agent it is
- * showing and has no room (or reason) to repeat the tool's own name: the whole
- * surface *is* that Task. Extracted rather than re-spelled so the header and the
- * row it was opened from cannot drift, and so both keep matching protocol's
- * `subagentLabel`, which reads the same two input fields for the sessions list.
- */
 export function taskIdentity(task: ToolCallItem): string {
   const input = task.input as { description?: unknown; subagent_type?: unknown } | null
   const description = trimmed(input?.description)
@@ -139,130 +60,38 @@ export function taskIdentity(task: ToolCallItem): string {
     : (agent ?? (description ? clip(description) : toolInputPreview(task.input)))
 }
 
-/**
- * **What this agent was actually asked** — the sub-agent's brief, or undefined
- * when the engine did not give us one.
- *
- * Measured against a live session rather than assumed: the Agent SDK's call
- * carries `{description, subagent_type, run_in_background, prompt}`, and
- * `prompt` is the instruction.
- *
- * **Whether it also arrives in the stream depends on the agent.** A foreground
- * `Task` forwards its brief as a real nested `user_message` (that is what
- * `forwardSubagentText` buys and what the reducer stamps a `parentToolUseId`
- * on), so `subagentItems` picks it up and the frame already has it. A
- * **background** agent does not: measured on a session with eight of them,
- * zero items carried a `parentToolUseId` on a `user` kind. Those runs are
- * exactly the ones you open a takeover on — an agent working while you read
- * something else — and their brief was nowhere at all.
- *
- * So this is the *fallback*, not the source: the callers splice it in only when
- * the frame carries no brief of its own, or the same instruction would be drawn
- * twice.
- *
- * `description` is deliberately not a fallback: it is the 3–5 word label the
- * header already prints, and repeating it as a brief would claim we know the
- * instruction when we do not. **Codex genuinely has none** — its `spawn_agent`
- * message is an encrypted blob on the wire — so on that engine this is
- * undefined and the row is not drawn, rather than drawn empty.
- */
 export function taskBrief(task: ToolCallItem): string | undefined {
   const input = task.input as { prompt?: unknown } | null
   return trimmed(input?.prompt)
 }
 
-const callBusy = (call: ToolCallItem): boolean =>
-  call.status === 'running' || call.status === 'pending'
+function callBusy(call: ToolCallItem): boolean {
+  return call.status === 'running' || call.status === 'pending'
+}
 
-/** Did this one call fail? Both spellings are needed: an out-of-loop execution
- * failure sets `status` with no `is_error` block to read, and an engine can flag
- * `is_error` on a call the reducer has not settled yet. */
-export const callFailed = (call: ToolCallItem): boolean =>
-  call.status === 'failed' || call.result?.isError === true
+export function callFailed(call: ToolCallItem): boolean {
+  return call.status === 'failed' || call.result?.isError === true
+}
 
-/**
- * Does a folded run colour red? **Only when its last call failed.**
- *
- * It used to be `some`, on the argument that a failure should colour the block
- * rather than fragment it. The argument was right about not fragmenting and
- * wrong about `some`: a run is a sequence the model worked through, and a
- * failure it recovered from two calls later is how work goes — a grep that
- * matched nothing, a build fixed on the second go. Reddening the whole run for
- * it means a normal working session is painted red, which spends the colour
- * that should have been left for the one thing still broken.
- *
- * The last call is the run's *outcome*, and an outcome is what a collapsed row
- * can honestly claim. The failures inside it are not hidden — they are one
- * press away, each red on its own row, and the recap counts every one. The
- * **scrubber agrees with this rule** rather than overriding it: it marks a
- * failed call only when the call is its row's outcome, which for a run is
- * exactly this one. It used to mark every member on the argument that the
- * rail asks a different question; against a real session that was nine alarms
- * on the rail for a transcript reddening one row.
- */
 export function runFailed(items: readonly ToolCallItem[]): boolean {
   const last = items[items.length - 1]
   return last !== undefined && callFailed(last)
 }
 
-/** Is anything inside still going? The call itself, normally — the Task
- * settles only when its subagent finishes — but a bridged or deferred child
- * can outlive it, and a pulse that stopped while a child still worked would
- * read as a hang. */
 export function taskBusy(task: ToolCallItem, children: readonly TranscriptItem[]): boolean {
   return callBusy(task) || children.some((child) => child.kind === 'tool_call' && callBusy(child))
 }
 
-/**
- * Does the row colour red? **The task's own outcome, and nothing else.**
- *
- * It used to be "or any child call's", which does not survive contact with a
- * real subagent: an agent that ran a hundred calls, one of them a grep that
- * matched nothing, came back with a red line saying it had failed. It had not —
- * it had done exactly what it was asked, and the transcript said otherwise in
- * the one colour reserved for things that need a human.
- *
- * This is the call `SubagentInfo.status` already makes, and it made it for this
- * reason (see `packages/protocol`): the sub-agent's **own** `tool_result`
- * `is_error`, deliberately not `taskFailed`. The argument there was that a
- * nothing-matched grep must not read as a failed run *beside a session name*;
- * what a hundred-call agent shows is that it must not read that way beside the
- * `Task` row either. Two surfaces, one rule, one spelling.
- *
- * Nothing is concealed by this. A failed child is red on its own row, one press
- * away, and the recap counts it. The **scrubber follows this rule too** and no
- * longer marks such a child: a red tick on the rail says precisely what this
- * row is forbidden from saying. The sub-agent band still says an agent ran
- * here, and the task's own red tick still says it came back broken — which is
- * what the two channels are for.
- */
 export function taskFailed(task: ToolCallItem): boolean {
   return callFailed(task)
 }
 
-/**
- * The collapsed task row's one line: identity, then scale.
- *
- * `Task(Explore · find the auth check) · 7 tools…` while the subagent works —
- * the count grows as it does, which is the row's progress reading, and the
- * trailing ellipsis is the same in-flight signal `runSummary` uses (the pulse
- * in the gutter carries the beat). Settled, the ellipsis drops:
- * `… · 7 tools`. "Tools" and not "tool calls" because `runSummary` already
- * chose that word for the same count one row over.
- *
- * The counts are counted from the absorbed children, never read from the
- * engine's structured Task output — WorkerDeck does not plumb structured tool
- * results to clients, so a transcript replayed tomorrow must spell the same
- * line from the same items it holds today.
- *
- * With no tool calls yet — the subagent thinking, or only its brief arrived —
- * the line says `working…`, because `0 tools…` reads as a stall; settled with
- * none it says `done`.
- */
 export function taskSummary(task: ToolCallItem, children: readonly TranscriptItem[]): string {
   const busy = taskBusy(task, children)
   const calls = children.reduce((n, child) => n + (child.kind === 'tool_call' ? 1 : 0), 0)
   const label = taskLabel(task)
-  if (calls === 0) return busy ? `${label} · working…` : `${label} · done`
+  if (calls === 0) {
+    return busy ? `${label} · working…` : `${label} · done`
+  }
   return `${label} · ${calls} tool${calls === 1 ? '' : 's'}${busy ? '…' : ''}`
 }

package/src/components/ui/AlertDialog.tsx

@@ -7,11 +7,7 @@ export const AlertDialog = AlertDialogPrimitive.Root
 export const AlertDialogTrigger = AlertDialogPrimitive.Trigger
 export const AlertDialogClose = AlertDialogPrimitive.Close
 
-export const AlertDialogContent: FunctionComponent<AlertDialogPrimitive.Popup.Props> = ({
-  className,
-  children,
-  ...props
-}) => (
+export const AlertDialogContent: FunctionComponent<AlertDialogPrimitive.Popup.Props> = ({ className, children, ...props }) => (
   <AlertDialogPrimitive.Portal>
     <PortalScope>
       <AlertDialogPrimitive.Backdrop
@@ -22,7 +18,7 @@ export const AlertDialogContent: FunctionComponent<AlertDialogPrimitive.Popup.Pr
         )}
       />
       <AlertDialogPrimitive.Popup
-        data-slot='alert-dialog-content'
+        data-slot="alert-dialog-content"
         className={cn(
           'fixed top-1/2 left-1/2 z-70 w-[min(28rem,calc(100vw-2rem))] -translate-x-1/2 -translate-y-1/2',
           'rounded-lg border border-border bg-surface p-5 shadow-(--shadow-lg) outline-none',
@@ -31,29 +27,18 @@ export const AlertDialogContent: FunctionComponent<AlertDialogPrimitive.Popup.Pr
           'data-ending-style:scale-95 data-ending-style:opacity-0',
           className,
         )}
-        {...props}>
+        {...props}
+      >
         {children}
       </AlertDialogPrimitive.Popup>
     </PortalScope>
   </AlertDialogPrimitive.Portal>
 )
 
-export const AlertDialogTitle: FunctionComponent<AlertDialogPrimitive.Title.Props> = ({
-  className,
-  ...props
-}) => (
-  <AlertDialogPrimitive.Title
-    className={cn('text-heading-3 font-semibold text-text', className)}
-    {...props}
-  />
+export const AlertDialogTitle: FunctionComponent<AlertDialogPrimitive.Title.Props> = ({ className, ...props }) => (
+  <AlertDialogPrimitive.Title className={cn('text-heading-3 font-semibold text-text', className)} {...props} />
 )
 
-export const AlertDialogDescription: FunctionComponent<AlertDialogPrimitive.Description.Props> = ({
-  className,
-  ...props
-}) => (
-  <AlertDialogPrimitive.Description
-    className={cn('mt-1.5 text-body-sm text-muted-foreground', className)}
-    {...props}
-  />
+export const AlertDialogDescription: FunctionComponent<AlertDialogPrimitive.Description.Props> = ({ className, ...props }) => (
+  <AlertDialogPrimitive.Description className={cn('mt-1.5 text-body-sm text-muted-foreground', className)} {...props} />
 )

package/src/components/ui/Badge.tsx

@@ -2,43 +2,32 @@ import { type HTMLAttributes } from 'react'
 import { type VariantProps, cva } from 'class-variance-authority'
 import { cn } from '../../lib/utils.ts'
 
-const badgeVariants = cva(
-  'inline-flex items-center gap-1.5 rounded-full border px-2 py-0.5 text-label font-medium whitespace-nowrap',
-  {
-    variants: {
-      variant: {
-        neutral: 'border-border bg-surface text-fg-2',
-        accent: 'border-transparent bg-accent-bg text-fg-1',
-        success: 'border-transparent bg-success-bg text-success',
-        warning: 'border-transparent bg-warning-bg text-warning',
-        danger: 'border-transparent bg-danger-bg text-danger',
-        info: 'border-transparent bg-info-bg text-info',
-      },
-      mono: {
-        true: 'font-mono text-code',
-        false: '',
-      },
+const badgeVariants = cva('inline-flex items-center gap-1.5 rounded-full border px-2 py-0.5 text-label font-medium whitespace-nowrap', {
+  variants: {
+    variant: {
+      neutral: 'border-border bg-surface text-fg-2',
+      accent: 'border-transparent bg-accent-bg text-fg-1',
+      success: 'border-transparent bg-success-bg text-success',
+      warning: 'border-transparent bg-warning-bg text-warning',
+      danger: 'border-transparent bg-danger-bg text-danger',
+      info: 'border-transparent bg-info-bg text-info',
+    },
+    mono: {
+      true: 'font-mono text-code',
+      false: '',
     },
-    defaultVariants: { variant: 'neutral', mono: false },
   },
-)
+  defaultVariants: { variant: 'neutral', mono: false },
+})
 
-export interface BadgeProps
-  extends HTMLAttributes<HTMLSpanElement>,
-    VariantProps<typeof badgeVariants> {
-  /** Render a leading status dot in the variant's color. */
+export interface BadgeProps extends HTMLAttributes<HTMLSpanElement>, VariantProps<typeof badgeVariants> {
   dot?: boolean
 }
 
 export function Badge({ className, variant = 'neutral', mono, dot, children, ...props }: BadgeProps) {
   return (
-    <span data-slot='badge' className={cn(badgeVariants({ variant, mono, className }))} {...props}>
-      {/* `self-center` so the dot stays put if a caller baseline-aligns the
-          badge — a no-op under the default `items-center`, and what lets the
-          badge's *text* be the baseline it contributes to a row (a status bar
-          aligning readings on one line needs that, and the dot's own box would
-          otherwise answer for it). */}
-      {dot ? <span aria-hidden className='size-1.5 shrink-0 self-center rounded-full bg-current' /> : null}
+    <span data-slot="badge" className={cn(badgeVariants({ variant, mono, className }))} {...props}>
+      {dot ? <span aria-hidden className="size-1.5 shrink-0 self-center rounded-full bg-current" /> : null}
       {children}
     </span>
   )

package/src/components/ui/Button.tsx

@@ -15,11 +15,11 @@ const buttonVariants = cva(
         link: 'text-primary underline-offset-4 hover:underline',
       },
       size: {
-        'default': 'h-8 gap-1.5 px-3',
-        'xs': "h-6 gap-1 px-2 text-xs [&_svg:not([class*='size-'])]:size-3",
-        'sm': 'h-7 gap-1 px-2.5 text-xs',
-        'lg': 'h-9 gap-1.5 px-3.5',
-        'icon': 'size-8',
+        default: 'h-8 gap-1.5 px-3',
+        xs: "h-6 gap-1 px-2 text-xs [&_svg:not([class*='size-'])]:size-3",
+        sm: 'h-7 gap-1 px-2.5 text-xs',
+        lg: 'h-9 gap-1.5 px-3.5',
+        icon: 'size-8',
         'icon-sm': 'size-7',
       },
     },
@@ -27,19 +27,11 @@ const buttonVariants = cva(
   },
 )
 
-export interface ButtonProps
-  extends ButtonHTMLAttributes<HTMLButtonElement>,
-    VariantProps<typeof buttonVariants> {}
+export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {}
 
 export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
   ({ className, variant = 'default', size = 'default', type = 'button', ...props }, ref) => (
-    <button
-      ref={ref}
-      type={type}
-      data-slot='button'
-      className={cn(buttonVariants({ variant, size, className }))}
-      {...props}
-    />
+    <button ref={ref} type={type} data-slot="button" className={cn(buttonVariants({ variant, size, className }))} {...props} />
   ),
 )
 Button.displayName = 'Button'

package/src/components/ui/Card.tsx

@@ -2,22 +2,11 @@ import { type HTMLAttributes } from 'react'
 import { cn } from '../../lib/utils.ts'
 
 export function Card({ className, ...props }: HTMLAttributes<HTMLDivElement>) {
-  return (
-    <div
-      data-slot='card'
-      className={cn('rounded-lg border border-border bg-surface', className)}
-      {...props}
-    />
-  )
+  return <div data-slot="card" className={cn('rounded-lg border border-border bg-surface', className)} {...props} />
 }
 
 export function CardHeader({ className, ...props }: HTMLAttributes<HTMLDivElement>) {
-  return (
-    <div
-      className={cn('flex items-start justify-between gap-3 px-4 pt-3.5 pb-3', className)}
-      {...props}
-    />
-  )
+  return <div className={cn('flex items-start justify-between gap-3 px-4 pt-3.5 pb-3', className)} {...props} />
 }
 
 export function CardTitle({ className, ...props }: HTMLAttributes<HTMLHeadingElement>) {