@workerdeck/ui 0.22.0 → 1.0.0

package/src/components/ui/CodeBlock.tsx

@@ -4,66 +4,39 @@ import { cn } from '../../lib/utils.ts'
 
 export interface CodeBlockProps {
   code: string
-  /** Header label, e.g. a language or "Parameters". */
   label?: ReactNode
   copyable?: boolean
-  /**
-   * `'panel'` (default) is the framed card: border, header strip, rounded.
-   * `'plain'` is the terminal treatment — the label is a dim line, the code a
-   * flat band, and copy is a character. For surfaces where a box around every
-   * payload is more chrome than content (the transcript's `lines` variant).
-   *
-   * A prop rather than a read of the transcript's variant context: this is a
-   * `ui/` primitive and has no business knowing what a transcript is. The agent
-   * component that renders it does.
-   */
   variant?: 'panel' | 'plain'
   className?: string
 }
 
-/** Plain (unhighlighted) code panel for structured data like tool inputs. Markdown code
- * inside assistant responses is highlighted by <Response> instead. */
-export function CodeBlock({
-  code,
-  label,
-  copyable = true,
-  variant = 'panel',
-  className,
-}: CodeBlockProps) {
+export function CodeBlock({ code, label, copyable = true, variant = 'panel', className }: CodeBlockProps) {
   const plain = variant === 'plain'
   const header = label !== undefined || copyable
 
   if (plain) {
     return (
-      <div data-slot='code-block' data-variant='plain' className={cn('min-w-0', className)}>
+      <div data-slot="code-block" data-variant="plain" className={cn('min-w-0', className)}>
         {header ? (
-          <div className='flex items-baseline justify-between gap-2'>
-            <span className='truncate text-label leading-5 text-fg-4'>{label}</span>
-            {copyable ? (
-              <CopyButton glyph value={code} className='size-5 shrink-0 rounded-sm' />
-            ) : null}
+          <div className="flex items-baseline justify-between gap-2">
+            <span className="truncate text-label leading-5 text-fg-4">{label}</span>
+            {copyable ? <CopyButton glyph value={code} className="size-5 shrink-0 rounded-sm" /> : null}
           </div>
         ) : null}
-        <pre className='max-h-64 overflow-auto bg-code-bg px-2 font-mono text-label leading-5 whitespace-pre-wrap text-fg-2'>
-          {code}
-        </pre>
+        <pre className="max-h-64 overflow-auto bg-code-bg px-2 font-mono text-label leading-5 whitespace-pre-wrap text-fg-2">{code}</pre>
       </div>
     )
   }
 
   return (
-    <div
-      data-slot='code-block'
-      className={cn('overflow-hidden rounded-md border border-border bg-code-bg', className)}>
+    <div data-slot="code-block" className={cn('overflow-hidden rounded-md border border-border bg-code-bg', className)}>
       {header ? (
-        <div className='flex h-8 items-center justify-between border-b border-border px-2.5'>
-          <span className='font-mono text-label text-fg-3'>{label}</span>
+        <div className="flex h-8 items-center justify-between border-b border-border px-2.5">
+          <span className="font-mono text-label text-fg-3">{label}</span>
           {copyable ? <CopyButton value={code} /> : null}
         </div>
       ) : null}
-      <pre className='max-h-64 overflow-auto px-3 py-2 font-mono text-label whitespace-pre-wrap text-fg-2'>
-        {code}
-      </pre>
+      <pre className="max-h-64 overflow-auto px-3 py-2 font-mono text-label whitespace-pre-wrap text-fg-2">{code}</pre>
     </div>
   )
 }

package/src/components/ui/CopyButton.tsx

@@ -6,47 +6,34 @@ import { cn } from '../../lib/utils.ts'
 
 export interface CopyButtonProps extends Omit<ButtonProps, 'onClick' | 'children'> {
   value: string
-  /** Draw the state as characters (`⧉` / `✓`) rather than line-art icons — for
-   * terminal-styled surfaces, where an SVG reads as another app's button. */
   glyph?: boolean
 }
 
-export function CopyButton({
-  value,
-  glyph,
-  className,
-  variant = 'ghost',
-  size = 'icon-sm',
-  ...props
-}: CopyButtonProps) {
+export function CopyButton({ value, glyph, className, variant = 'ghost', size = 'icon-sm', ...props }: CopyButtonProps) {
   const [copied, setCopied] = useState(false)
   return (
     <Button
       variant={variant}
       size={size}
-      aria-label='Copy'
+      aria-label="Copy"
       className={cn('text-fg-3', className)}
       onClick={() => {
-        // Through `copyText`, which falls back for insecure origins — the
-        // dashboard on a LAN address has no `navigator.clipboard` at all, and
-        // reaching straight for `.writeText` there throws.
         void copyText(value).then((ok) => {
-          // Only tick when it really copied: a check mark over an empty
-          // clipboard is worse than no feedback.
-          if (!ok) return
+          if (!ok) {
+            return
+          }
           setCopied(true)
           setTimeout(() => setCopied(false), 1500)
         })
       }}
-      {...props}>
+      {...props}
+    >
       {glyph ? (
-        <span className={cn('font-mono text-body-sm leading-5', copied && 'text-success')}>
-          {copied ? '✓' : '⧉'}
-        </span>
+        <span className={cn('font-mono text-body-sm leading-5', copied && 'text-success')}>{copied ? '✓' : '⧉'}</span>
       ) : copied ? (
-        <Check className='size-3.5 text-success' />
+        <Check className="size-3.5 text-success" />
       ) : (
-        <Copy className='size-3.5' />
+        <Copy className="size-3.5" />
       )}
     </Button>
   )

package/src/components/ui/Dialog.tsx

@@ -8,16 +8,12 @@ export const Dialog = DialogPrimitive.Root
 export const DialogTrigger = DialogPrimitive.Trigger
 export const DialogClose = DialogPrimitive.Close
 
-/**
- * A dismissible panel, sized for reading rather than confirming — the web
- * counterpart of the iOS app's detail sheets (context, usage, session info, MCP).
- *
- * Taller than {@link AlertDialogContent} and scrollable inside, because these
- * carry lists whose length is the engine's business, not the layout's.
- */
-export const DialogContent: FunctionComponent<
-  DialogPrimitive.Popup.Props & { size?: 'sm' | 'md' | 'lg' }
-> = ({ className, children, size = 'md', ...props }) => (
+export const DialogContent: FunctionComponent<DialogPrimitive.Popup.Props & { size?: 'sm' | 'md' | 'lg' }> = ({
+  className,
+  children,
+  size = 'md',
+  ...props
+}) => (
   <DialogPrimitive.Portal>
     <PortalScope>
       <DialogPrimitive.Backdrop
@@ -28,7 +24,7 @@ export const DialogContent: FunctionComponent<
         )}
       />
       <DialogPrimitive.Popup
-        data-slot='dialog-content'
+        data-slot="dialog-content"
         className={cn(
           'fixed top-1/2 left-1/2 z-70 flex max-h-[min(42rem,calc(100dvh-3rem))] -translate-x-1/2 -translate-y-1/2 flex-col',
           size === 'sm' && 'w-[min(24rem,calc(100vw-2rem))]',
@@ -40,56 +36,47 @@ export const DialogContent: FunctionComponent<
           'data-ending-style:scale-95 data-ending-style:opacity-0',
           className,
         )}
-        {...props}>
+        {...props}
+      >
         {children}
       </DialogPrimitive.Popup>
     </PortalScope>
   </DialogPrimitive.Portal>
 )
 
-/** Title row with the close button, pinned above the scrolling body. */
 export const DialogHeader: FunctionComponent<{
   title: string
   description?: string
-  /** Rendered between the title and the close button. */
   actions?: React.ReactNode
 }> = ({ title, description, actions }) => (
-  <div className='flex items-start gap-2 border-b border-border px-4 py-3'>
-    <div className='min-w-0 flex-1'>
-      <DialogPrimitive.Title className='truncate text-body-sm font-semibold text-text'>
-        {title}
-      </DialogPrimitive.Title>
+  <div className="flex items-start gap-2 border-b border-border px-4 py-3">
+    <div className="min-w-0 flex-1">
+      <DialogPrimitive.Title className="truncate text-body-sm font-semibold text-text">{title}</DialogPrimitive.Title>
       {description ? (
-        <DialogPrimitive.Description className='mt-0.5 text-label text-fg-4'>
-          {description}
-        </DialogPrimitive.Description>
+        <DialogPrimitive.Description className="mt-0.5 text-label text-fg-4">{description}</DialogPrimitive.Description>
       ) : null}
     </div>
     {actions}
     <DialogPrimitive.Close
-      aria-label='Close'
-      className='-mr-1 flex size-6 shrink-0 items-center justify-center rounded-md text-fg-3 transition-colors outline-none hover:bg-surface-hover hover:text-fg-1'>
-      <X className='size-3.5' />
+      aria-label="Close"
+      className="-mr-1 flex size-6 shrink-0 items-center justify-center rounded-md text-fg-3 transition-colors outline-none hover:bg-surface-hover hover:text-fg-1"
+    >
+      <X className="size-3.5" />
     </DialogPrimitive.Close>
   </div>
 )
 
-/** The scrolling region under the header. */
-export const DialogBody: FunctionComponent<React.HTMLAttributes<HTMLDivElement>> = ({
-  className,
-  ...props
-}) => <div className={cn('min-h-0 flex-1 overflow-y-auto p-4', className)} {...props} />
+export const DialogBody: FunctionComponent<React.HTMLAttributes<HTMLDivElement>> = ({ className, ...props }) => (
+  <div className={cn('min-h-0 flex-1 overflow-y-auto p-4', className)} {...props} />
+)
 
-/** A label/value row — the shape every one of these panels is mostly made of. */
 export const DialogRow: FunctionComponent<{
   label: string
   children: React.ReactNode
   mono?: boolean
 }> = ({ label, children, mono }) => (
-  <div className='flex items-baseline justify-between gap-4 py-1.5'>
-    <span className='shrink-0 text-label text-fg-3'>{label}</span>
-    <span className={cn('min-w-0 truncate text-right text-body-sm text-fg-1', mono && 'font-mono text-label')}>
-      {children}
-    </span>
+  <div className="flex items-baseline justify-between gap-4 py-1.5">
+    <span className="shrink-0 text-label text-fg-3">{label}</span>
+    <span className={cn('min-w-0 truncate text-right text-body-sm text-fg-1', mono && 'font-mono text-label')}>{children}</span>
   </div>
 )

package/src/components/ui/Empty.tsx

@@ -1,22 +1,6 @@
 import type { ReactNode } from 'react'
 import { Button } from './Button.tsx'
 
-/**
- * A view with nothing in it: icon, title, description, and at most one action.
- *
- * Centered and given room, because an empty view is the first thing a new
- * install shows and a flush-left sentence in the top corner reads like a bug
- * report. It lives here rather than in one client because every panel that can
- * be empty should be empty the same way — the extension's views and the
- * dashboard's four sidebars are the same shape of thing.
- *
- * **At most one action, and never one the view header already offers.** Creating
- * a session and adding a gateway are the `+` in the native title bar, exclusively
- * — so those empty states point at it in words rather than growing a second
- * button that does the same thing two inches lower. A button here is for the way
- * out of a state the header has no answer to: clearing a filter, widening a
- * scope.
- */
 export function Empty({
   icon,
   title,
@@ -31,16 +15,12 @@ export function Empty({
   onAction?: () => void
 }) {
   return (
-    <div className='flex flex-col items-center gap-2 px-5 py-8 text-center'>
-      <div className='text-fg-4 opacity-60 [&_svg]:size-7'>{icon}</div>
-      <p className='text-body-sm font-medium text-fg-2'>{title}</p>
-      {description ? (
-        <p className='max-w-[26ch] text-balance text-label leading-relaxed text-fg-4'>
-          {description}
-        </p>
-      ) : null}
+    <div className="flex flex-col items-center gap-2 px-5 py-8 text-center">
+      <div className="text-fg-4 opacity-60 [&_svg]:size-7">{icon}</div>
+      <p className="text-body-sm font-medium text-fg-2">{title}</p>
+      {description ? <p className="max-w-[26ch] text-balance text-label leading-relaxed text-fg-4">{description}</p> : null}
       {action && onAction ? (
-        <Button variant='outline' size='sm' className='mt-1' onClick={onAction}>
+        <Button variant="outline" size="sm" className="mt-1" onClick={onAction}>
           {action}
         </Button>
       ) : null}
@@ -48,9 +28,6 @@ export function Empty({
   )
 }
 
-/** A key or icon named inline in an empty state's description — "use the + above". */
 export function EmptyKey({ children }: { children: ReactNode }) {
-  return (
-    <span className='rounded border border-border px-1 font-mono text-fg-3'>{children}</span>
-  )
+  return <span className="rounded border border-border px-1 font-mono text-fg-3">{children}</span>
 }

package/src/components/ui/Input.tsx

@@ -1,20 +1,18 @@
 import { type InputHTMLAttributes, forwardRef } from 'react'
 import { cn } from '../../lib/utils.ts'
 
-export const Input = forwardRef<HTMLInputElement, InputHTMLAttributes<HTMLInputElement>>(
-  ({ className, ...props }, ref) => (
-    <input
-      ref={ref}
-      data-slot='input'
-      className={cn(
-        'h-8 w-full rounded-md border border-border bg-bg px-2.5 text-body-sm text-text',
-        'placeholder:text-fg-4 transition-colors outline-none',
-        'hover:border-border-strong focus-visible:border-ring focus-visible:ring-2 focus-visible:ring-ring/40',
-        'disabled:pointer-events-none disabled:opacity-50',
-        className,
-      )}
-      {...props}
-    />
-  ),
-)
+export const Input = forwardRef<HTMLInputElement, InputHTMLAttributes<HTMLInputElement>>(({ className, ...props }, ref) => (
+  <input
+    ref={ref}
+    data-slot="input"
+    className={cn(
+      'h-8 w-full rounded-md border border-border bg-bg px-2.5 text-body-sm text-text',
+      'placeholder:text-fg-4 transition-colors outline-none',
+      'hover:border-border-strong focus-visible:border-ring focus-visible:ring-2 focus-visible:ring-ring/40',
+      'disabled:pointer-events-none disabled:opacity-50',
+      className,
+    )}
+    {...props}
+  />
+))
 Input.displayName = 'Input'

package/src/components/ui/Menu.tsx

@@ -7,18 +7,13 @@ export const Menu = MenuPrimitive.Root
 export const MenuTrigger = MenuPrimitive.Trigger
 
 export const MenuContent: FunctionComponent<
-  MenuPrimitive.Popup.Props &
-    Pick<MenuPrimitive.Positioner.Props, 'align' | 'side' | 'sideOffset'>
+  MenuPrimitive.Popup.Props & Pick<MenuPrimitive.Positioner.Props, 'align' | 'side' | 'sideOffset'>
 > = ({ className, align = 'end', side = 'bottom', sideOffset = 6, ...props }) => (
   <MenuPrimitive.Portal>
     <PortalScope>
-      <MenuPrimitive.Positioner
-        align={align}
-        side={side}
-        sideOffset={sideOffset}
-        className='isolate z-80 outline-none'>
+      <MenuPrimitive.Positioner align={align} side={side} sideOffset={sideOffset} className="isolate z-80 outline-none">
         <MenuPrimitive.Popup
-          data-slot='menu-content'
+          data-slot="menu-content"
           className={cn(
             'min-w-48 rounded-md border border-border bg-surface p-1 text-fg-1 shadow-(--shadow-lg) outline-none',
             'transition-[opacity,transform] duration-(--motion-base)',
@@ -33,13 +28,9 @@ export const MenuContent: FunctionComponent<
   </MenuPrimitive.Portal>
 )
 
-export const MenuItem: FunctionComponent<MenuPrimitive.Item.Props & { destructive?: boolean }> = ({
-  className,
-  destructive,
-  ...props
-}) => (
+export const MenuItem: FunctionComponent<MenuPrimitive.Item.Props & { destructive?: boolean }> = ({ className, destructive, ...props }) => (
   <MenuPrimitive.Item
-    data-slot='menu-item'
+    data-slot="menu-item"
     className={cn(
       'flex cursor-pointer items-center gap-2 rounded-sm px-2 py-1.5 text-body-sm outline-none select-none',
       'data-highlighted:bg-surface-hover',
@@ -50,9 +41,6 @@ export const MenuItem: FunctionComponent<MenuPrimitive.Item.Props & { destructiv
   />
 )
 
-export const MenuSeparator: FunctionComponent<MenuPrimitive.Separator.Props> = ({
-  className,
-  ...props
-}) => (
+export const MenuSeparator: FunctionComponent<MenuPrimitive.Separator.Props> = ({ className, ...props }) => (
   <MenuPrimitive.Separator className={cn('my-1 h-px bg-border', className)} {...props} />
 )

package/src/components/ui/PortalScope.tsx

@@ -1,27 +1,7 @@
 import { type FunctionComponent, type ReactNode } from 'react'
 
-/**
- * Re-establishes the `.wd-root` styling scope inside a portal.
- *
- * The scoped stylesheet (`@workerdeck/ui/scoped.css`) rewrites every rule to
- * live under `.wd-root`, so an embedder's page keeps its own design system and
- * the panel keeps this one. Base UI popups (Menu, Dialog, AlertDialog, Select,
- * Tooltip) portal to `document.body` — OUTSIDE the embedder's wrapper — so
- * without this they would render unstyled, or worse, styled by the host.
- *
- * `display: contents` (inline, so no stylesheet needs to load for it) makes the
- * element generate no box: positioning, hit-testing and the popup's own layout
- * are untouched. It still carries the class, which is all the scope needs —
- * design tokens declared on `.wd-root` inherit through it, and every
- * `.wd-root <x>` rule matches below it. Theme keeps working because the dark
- * token block matches `[data-theme='dark']` on ANY ancestor, and `document.body`
- * sits under the host's themed `<html>` just like the panel does.
- *
- * Under the classic `theme.css` integration the class matches no rule and the
- * element is inert, so the wrapper is unconditional.
- */
 export const PortalScope: FunctionComponent<{ children?: ReactNode }> = ({ children }) => (
-  <div className='wd-root' style={{ display: 'contents' }}>
+  <div className="wd-root" style={{ display: 'contents' }}>
     {children}
   </div>
 )

package/src/components/ui/ProgressRing.tsx

@@ -1,46 +1,35 @@
 import { cn } from '../../lib/utils.ts'
 
 export interface ProgressRingProps {
-  /** Filled share, 0–100 (clamped). */
   value: number
-  /** Outer diameter in px. */
   size?: number
   strokeWidth?: number
   className?: string
 }
 
-/** Tiny SVG progress circle; stroke color comes from `currentColor` so callers set it
- * via text color classes (e.g. warning/danger past thresholds). */
 export function ProgressRing({ value, size = 13, strokeWidth = 2, className }: ProgressRingProps) {
   const clamped = Math.min(100, Math.max(0, value))
   const radius = (size - strokeWidth) / 2
   const circumference = 2 * Math.PI * radius
   return (
     <svg
-      data-slot='progress-ring'
+      data-slot="progress-ring"
       width={size}
       height={size}
       viewBox={`0 0 ${size} ${size}`}
-      role='img'
+      role="img"
       aria-label={`${Math.round(clamped)}%`}
-      className={cn('shrink-0 -rotate-90', className)}>
+      className={cn('shrink-0 -rotate-90', className)}
+    >
+      <circle cx={size / 2} cy={size / 2} r={radius} fill="none" stroke="currentColor" strokeOpacity={0.2} strokeWidth={strokeWidth} />
       <circle
         cx={size / 2}
         cy={size / 2}
         r={radius}
-        fill='none'
-        stroke='currentColor'
-        strokeOpacity={0.2}
+        fill="none"
+        stroke="currentColor"
         strokeWidth={strokeWidth}
-      />
-      <circle
-        cx={size / 2}
-        cy={size / 2}
-        r={radius}
-        fill='none'
-        stroke='currentColor'
-        strokeWidth={strokeWidth}
-        strokeLinecap='round'
+        strokeLinecap="round"
         strokeDasharray={circumference}
         strokeDashoffset={circumference * (1 - clamped / 100)}
       />

package/src/components/ui/Select.tsx

@@ -8,38 +8,27 @@ export const Select = SelectPrimitive.Root
 export const SelectValue = SelectPrimitive.Value
 export const SelectItemText = SelectPrimitive.ItemText
 
-export const SelectTrigger: FunctionComponent<SelectPrimitive.Trigger.Props> = ({
-  className,
-  children,
-  ...props
-}) => (
+export const SelectTrigger: FunctionComponent<SelectPrimitive.Trigger.Props> = ({ className, children, ...props }) => (
   <SelectPrimitive.Trigger
-    data-slot='select-trigger'
+    data-slot="select-trigger"
     className={cn(
       'inline-flex h-7 items-center justify-between gap-1.5 rounded-md border border-border bg-bg px-2 text-body-sm text-text',
       'transition-colors outline-none hover:border-border-strong focus-visible:border-ring focus-visible:ring-2 focus-visible:ring-ring/40',
       'data-popup-open:border-border-strong disabled:pointer-events-none disabled:opacity-50',
       className,
     )}
-    {...props}>
+    {...props}
+  >
     {children}
-    <SelectPrimitive.Icon className='text-fg-4'>
-      <ChevronsUpDown className='size-3.5' />
+    <SelectPrimitive.Icon className="text-fg-4">
+      <ChevronsUpDown className="size-3.5" />
     </SelectPrimitive.Icon>
   </SelectPrimitive.Trigger>
 )
 
 export const SelectContent: FunctionComponent<
-  SelectPrimitive.Popup.Props &
-    Pick<SelectPrimitive.Positioner.Props, 'align' | 'alignItemWithTrigger' | 'side' | 'sideOffset'>
-> = ({
-  className,
-  align = 'start',
-  alignItemWithTrigger = false,
-  side = 'bottom',
-  sideOffset = 6,
-  ...props
-}) => (
+  SelectPrimitive.Popup.Props & Pick<SelectPrimitive.Positioner.Props, 'align' | 'alignItemWithTrigger' | 'side' | 'sideOffset'>
+> = ({ className, align = 'start', alignItemWithTrigger = false, side = 'bottom', sideOffset = 6, ...props }) => (
   <SelectPrimitive.Portal>
     <PortalScope>
       <SelectPrimitive.Positioner
@@ -47,9 +36,10 @@ export const SelectContent: FunctionComponent<
         alignItemWithTrigger={alignItemWithTrigger}
         side={side}
         sideOffset={sideOffset}
-        className='isolate z-80 outline-none'>
+        className="isolate z-80 outline-none"
+      >
         <SelectPrimitive.Popup
-          data-slot='select-content'
+          data-slot="select-content"
           className={cn(
             'max-h-[min(24rem,var(--available-height))] min-w-[var(--anchor-width)] overflow-y-auto',
             'rounded-md border border-border bg-surface p-1 text-fg-1 shadow-(--shadow-lg) outline-none',
@@ -62,22 +52,19 @@ export const SelectContent: FunctionComponent<
   </SelectPrimitive.Portal>
 )
 
-export const SelectItem: FunctionComponent<SelectPrimitive.Item.Props> = ({
-  className,
-  children,
-  ...props
-}) => (
+export const SelectItem: FunctionComponent<SelectPrimitive.Item.Props> = ({ className, children, ...props }) => (
   <SelectPrimitive.Item
-    data-slot='select-item'
+    data-slot="select-item"
     className={cn(
       'flex cursor-pointer items-start gap-2 rounded-sm px-2 py-1.5 text-body-sm text-text outline-none select-none',
       'data-highlighted:bg-surface-hover',
       className,
     )}
-    {...props}>
-    <span className='flex min-w-0 flex-1 flex-col gap-0.5'>{children}</span>
-    <SelectPrimitive.ItemIndicator className='mt-0.5 text-fg-1'>
-      <Check className='size-3.5' />
+    {...props}
+  >
+    <span className="flex min-w-0 flex-1 flex-col gap-0.5">{children}</span>
+    <SelectPrimitive.ItemIndicator className="mt-0.5 text-fg-1">
+      <Check className="size-3.5" />
     </SelectPrimitive.ItemIndicator>
   </SelectPrimitive.Item>
 )

package/src/components/ui/Sonner.tsx

@@ -2,11 +2,10 @@ import { Toaster as SonnerToaster, toast } from 'sonner'
 
 export { toast }
 
-/** Token-themed toaster; relies on the [data-theme] swap, so no `theme` prop needed. */
 export function Toaster() {
   return (
     <SonnerToaster
-      position='bottom-right'
+      position="bottom-right"
       toastOptions={{
         style: {
           background: 'var(--surface)',

package/src/components/ui/Spinner.tsx

@@ -2,5 +2,5 @@ import { LoaderCircle } from 'lucide-react'
 import { cn } from '../../lib/utils.ts'
 
 export function Spinner({ className }: { className?: string }) {
-  return <LoaderCircle aria-label='Loading' className={cn('size-4 animate-spin text-fg-3', className)} />
+  return <LoaderCircle aria-label="Loading" className={cn('size-4 animate-spin text-fg-3', className)} />
 }