@workerdeck/ui 0.6.0

package/src/components/prompt-area/use-trigger-search.ts

@@ -0,0 +1,115 @@
+'use client'
+
+import { useCallback, useEffect, useRef, useState } from 'react'
+import type { TriggerConfig, TriggerSuggestion } from './types.ts'
+
+// ---------------------------------------------------------------------------
+// Types
+// ---------------------------------------------------------------------------
+
+type UseTriggerSearchReturn = {
+  suggestions: TriggerSuggestion[]
+  suggestionsLoading: boolean
+  suggestionsError: string | null
+  /** Run a search for the given query using the trigger's onSearch config. */
+  search: (query: string, config: TriggerConfig) => void
+  /** Cancel any in-flight search and reset state. */
+  reset: () => void
+}
+
+// ---------------------------------------------------------------------------
+// Hook
+// ---------------------------------------------------------------------------
+
+/**
+ * Manages async trigger search lifecycle: debouncing, AbortController
+ * cancellation, race-condition prevention, loading/error state.
+ *
+ * Extracted from `usePromptArea` so the main hook stays focused on
+ * editing concerns while this hook owns the data-fetching side.
+ */
+export function useTriggerSearch(): UseTriggerSearchReturn {
+  const [suggestions, setSuggestions] = useState<TriggerSuggestion[]>([])
+  const [suggestionsLoading, setSuggestionsLoading] = useState(false)
+  const [suggestionsError, setSuggestionsError] = useState<string | null>(null)
+
+  // Version counter – belt-and-suspenders alongside AbortController
+  const searchVersion = useRef(0)
+  // AbortController for cancelling in-flight async searches
+  const abortController = useRef<AbortController | null>(null)
+  // Debounce timer for search queries
+  const debounceTimer = useRef<ReturnType<typeof setTimeout> | null>(null)
+
+  const reset = useCallback(() => {
+    abortController.current?.abort()
+    if (debounceTimer.current) clearTimeout(debounceTimer.current)
+    setSuggestions([])
+    setSuggestionsLoading(false)
+    setSuggestionsError(null)
+  }, [])
+
+  const search = useCallback((query: string, config: TriggerConfig) => {
+    if (!config.onSearch) return
+
+    // Cancel any previous in-flight request and pending debounce
+    abortController.current?.abort()
+    if (debounceTimer.current) clearTimeout(debounceTimer.current)
+
+    setSuggestionsLoading(true)
+    setSuggestionsError(null)
+    searchVersion.current++
+    const version = searchVersion.current
+
+    const controller = new AbortController()
+    abortController.current = controller
+    const { onSearch, onSearchError, searchDebounceMs } = config
+
+    const executeSearch = () => {
+      const result = onSearch(query, { signal: controller.signal })
+
+      if (result instanceof Promise) {
+        void result.then(
+          (items) => {
+            if (controller.signal.aborted || searchVersion.current !== version) return
+            setSuggestions(items)
+            setSuggestionsLoading(false)
+          },
+          (error: unknown) => {
+            if (controller.signal.aborted || searchVersion.current !== version) return
+            // Silently ignore AbortError (expected when superseded)
+            if (error instanceof DOMException && error.name === 'AbortError') return
+            setSuggestionsError(error instanceof Error ? error.message : 'Search failed')
+            setSuggestionsLoading(false)
+            onSearchError?.(error)
+          },
+        )
+      } else {
+        setSuggestions(result)
+        setSuggestionsLoading(false)
+      }
+    }
+
+    // Debounce subsequent searches but fire immediately for the initial empty query
+    if (searchDebounceMs && searchDebounceMs > 0 && query.length > 0) {
+      debounceTimer.current = setTimeout(executeSearch, searchDebounceMs)
+    } else {
+      executeSearch()
+    }
+  }, [])
+
+  // Clean up on unmount
+  useEffect(() => {
+    return () => {
+      abortController.current?.abort()
+      if (debounceTimer.current) clearTimeout(debounceTimer.current)
+    }
+  }, [])
+
+  return {
+    suggestions,
+    suggestionsLoading,
+    suggestionsError,
+    search,
+    reset,
+  }
+}

package/src/components/ui/AlertDialog.tsx

@@ -0,0 +1,56 @@
+import { type FunctionComponent } from 'react'
+import { AlertDialog as AlertDialogPrimitive } from '@base-ui/react/alert-dialog'
+import { cn } from '../../lib/utils.ts'
+
+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
+}) => (
+  <AlertDialogPrimitive.Portal>
+    <AlertDialogPrimitive.Backdrop
+      className={cn(
+        'fixed inset-0 z-70 bg-black/40 backdrop-blur-[1px]',
+        'transition-opacity duration-(--motion-base)',
+        'data-starting-style:opacity-0 data-ending-style:opacity-0',
+      )}
+    />
+    <AlertDialogPrimitive.Popup
+      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',
+        'transition-[opacity,transform] duration-(--motion-base)',
+        'data-starting-style:scale-95 data-starting-style:opacity-0',
+        'data-ending-style:scale-95 data-ending-style:opacity-0',
+        className,
+      )}
+      {...props}>
+      {children}
+    </AlertDialogPrimitive.Popup>
+  </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 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

@@ -0,0 +1,42 @@
+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: '',
+      },
+    },
+    defaultVariants: { variant: 'neutral', mono: false },
+  },
+)
+
+export interface BadgeProps
+  extends HTMLAttributes<HTMLSpanElement>,
+    VariantProps<typeof badgeVariants> {
+  /** Render a leading status dot in the variant's color. */
+  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}>
+      {dot ? <span aria-hidden className='size-1.5 rounded-full bg-current' /> : null}
+      {children}
+    </span>
+  )
+}
+
+export { badgeVariants }

package/src/components/ui/Button.tsx

@@ -0,0 +1,47 @@
+import { type ButtonHTMLAttributes, forwardRef } from 'react'
+import { type VariantProps, cva } from 'class-variance-authority'
+import { cn } from '../../lib/utils.ts'
+
+const buttonVariants = cva(
+  "group/button inline-flex shrink-0 items-center justify-center rounded-md border border-transparent bg-clip-padding text-sm font-medium whitespace-nowrap transition-colors outline-none select-none focus-visible:ring-2 focus-visible:ring-ring/60 focus-visible:ring-offset-1 focus-visible:ring-offset-bg disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+  {
+    variants: {
+      variant: {
+        default: 'bg-primary text-primary-foreground hover:bg-accent-hover',
+        outline: 'border-border bg-surface hover:border-border-strong hover:bg-surface-hover',
+        secondary: 'bg-secondary text-secondary-foreground hover:bg-surface-hover',
+        ghost: 'text-fg-2 hover:bg-surface-hover hover:text-foreground',
+        destructive: 'text-danger hover:bg-danger-bg',
+        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',
+        'icon-sm': 'size-7',
+      },
+    },
+    defaultVariants: { variant: 'default', size: 'default' },
+  },
+)
+
+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.displayName = 'Button'
+
+export { buttonVariants }

package/src/components/ui/Card.tsx

@@ -0,0 +1,29 @@
+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}
+    />
+  )
+}
+
+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}
+    />
+  )
+}
+
+export function CardTitle({ className, ...props }: HTMLAttributes<HTMLHeadingElement>) {
+  return <h3 className={cn('text-heading-3 font-semibold text-text', className)} {...props} />
+}
+
+export function CardContent({ className, ...props }: HTMLAttributes<HTMLDivElement>) {
+  return <div className={cn('px-4 pb-4', className)} {...props} />
+}

package/src/components/ui/CodeBlock.tsx

@@ -0,0 +1,31 @@
+import type { ReactNode } from 'react'
+import { CopyButton } from './CopyButton.tsx'
+import { cn } from '../../lib/utils.ts'
+
+export interface CodeBlockProps {
+  code: string
+  /** Header label, e.g. a language or "Parameters". */
+  label?: ReactNode
+  copyable?: boolean
+  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, className }: CodeBlockProps) {
+  return (
+    <div
+      data-slot='code-block'
+      className={cn('overflow-hidden rounded-md border border-border bg-code-bg', className)}>
+      {label !== undefined || copyable ? (
+        <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>
+    </div>
+  )
+}

package/src/components/ui/CopyButton.tsx

@@ -0,0 +1,28 @@
+import { useState } from 'react'
+import { Check, Copy } from 'lucide-react'
+import { Button, type ButtonProps } from './Button.tsx'
+import { cn } from '../../lib/utils.ts'
+
+export interface CopyButtonProps extends Omit<ButtonProps, 'onClick' | 'children'> {
+  value: string
+}
+
+export function CopyButton({ value, className, variant = 'ghost', size = 'icon-sm', ...props }: CopyButtonProps) {
+  const [copied, setCopied] = useState(false)
+  return (
+    <Button
+      variant={variant}
+      size={size}
+      aria-label='Copy'
+      className={cn('text-fg-3', className)}
+      onClick={() => {
+        void navigator.clipboard.writeText(value).then(() => {
+          setCopied(true)
+          setTimeout(() => setCopied(false), 1500)
+        })
+      }}
+      {...props}>
+      {copied ? <Check className='size-3.5 text-success' /> : <Copy className='size-3.5' />}
+    </Button>
+  )
+}

package/src/components/ui/Input.tsx

@@ -0,0 +1,20 @@
+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}
+    />
+  ),
+)
+Input.displayName = 'Input'

package/src/components/ui/ProgressRing.tsx

@@ -0,0 +1,49 @@
+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'
+      width={size}
+      height={size}
+      viewBox={`0 0 ${size} ${size}`}
+      role='img'
+      aria-label={`${Math.round(clamped)}%`}
+      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'
+        strokeWidth={strokeWidth}
+        strokeLinecap='round'
+        strokeDasharray={circumference}
+        strokeDashoffset={circumference * (1 - clamped / 100)}
+      />
+    </svg>
+  )
+}

package/src/components/ui/Select.tsx

@@ -0,0 +1,80 @@
+import { type FunctionComponent } from 'react'
+import { Select as SelectPrimitive } from '@base-ui/react/select'
+import { Check, ChevronsUpDown } from 'lucide-react'
+import { cn } from '../../lib/utils.ts'
+
+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
+}) => (
+  <SelectPrimitive.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}>
+    {children}
+    <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.Portal>
+    <SelectPrimitive.Positioner
+      align={align}
+      alignItemWithTrigger={alignItemWithTrigger}
+      side={side}
+      sideOffset={sideOffset}
+      className='isolate z-60 outline-none'>
+      <SelectPrimitive.Popup
+        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',
+          className,
+        )}
+        {...props}
+      />
+    </SelectPrimitive.Positioner>
+  </SelectPrimitive.Portal>
+)
+
+export const SelectItem: FunctionComponent<SelectPrimitive.Item.Props> = ({
+  className,
+  children,
+  ...props
+}) => (
+  <SelectPrimitive.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' />
+    </SelectPrimitive.ItemIndicator>
+  </SelectPrimitive.Item>
+)

package/src/components/ui/Sonner.tsx

@@ -0,0 +1,22 @@
+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'
+      toastOptions={{
+        style: {
+          background: 'var(--surface)',
+          color: 'var(--text)',
+          border: '1px solid var(--border)',
+          boxShadow: 'var(--shadow-md)',
+          fontFamily: 'var(--cw-font-sans)',
+          fontSize: 'var(--text-body-sm)',
+        },
+      }}
+    />
+  )
+}

package/src/components/ui/Spinner.tsx

@@ -0,0 +1,6 @@
+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)} />
+}

package/src/components/ui/Textarea.tsx

@@ -0,0 +1,21 @@
+import { type TextareaHTMLAttributes, forwardRef } from 'react'
+import { cn } from '../../lib/utils.ts'
+
+export const Textarea = forwardRef<
+  HTMLTextAreaElement,
+  TextareaHTMLAttributes<HTMLTextAreaElement>
+>(({ className, ...props }, ref) => (
+  <textarea
+    ref={ref}
+    data-slot='textarea'
+    className={cn(
+      'w-full resize-none rounded-md border border-border bg-bg px-2.5 py-2 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}
+  />
+))
+Textarea.displayName = 'Textarea'

package/src/components/ui/Tooltip.tsx

@@ -0,0 +1,34 @@
+import { type FunctionComponent, type ReactNode } from 'react'
+import { Tooltip as TooltipPrimitive } from '@base-ui/react/tooltip'
+import { cn } from '../../lib/utils.ts'
+
+export const TooltipProvider = TooltipPrimitive.Provider
+
+export const TooltipContent: FunctionComponent<
+  TooltipPrimitive.Popup.Props & Pick<TooltipPrimitive.Positioner.Props, 'side' | 'sideOffset'>
+> = ({ className, side = 'top', sideOffset = 6, ...props }) => (
+  <TooltipPrimitive.Portal>
+    <TooltipPrimitive.Positioner side={side} sideOffset={sideOffset} className='isolate z-60'>
+      <TooltipPrimitive.Popup
+        data-slot='tooltip-content'
+        className={cn(
+          'rounded-md border border-border bg-surface px-2 py-1 text-label text-fg-2 shadow-(--shadow-md) outline-none',
+          className,
+        )}
+        {...props}
+      />
+    </TooltipPrimitive.Positioner>
+  </TooltipPrimitive.Portal>
+)
+
+/** Convenience wrapper: <Tip content="..."><Button/></Tip> */
+export function Tip({ content, children }: { content: ReactNode; children: ReactNode }) {
+  return (
+    <TooltipPrimitive.Root>
+      <TooltipPrimitive.Trigger render={<span className='inline-flex' />}>
+        {children}
+      </TooltipPrimitive.Trigger>
+      <TooltipContent>{content}</TooltipContent>
+    </TooltipPrimitive.Root>
+  )
+}