@workerdeck/ui 0.22.0 → 1.0.0

package/src/components/ui/Splitter.tsx

@@ -1,56 +1,19 @@
-import {
-  useCallback,
-  useRef,
-  type KeyboardEvent as ReactKeyboardEvent,
-  type PointerEvent as ReactPointerEvent,
-} from 'react'
+import { useCallback, useRef, type KeyboardEvent as ReactKeyboardEvent, type PointerEvent as ReactPointerEvent } from 'react'
 import { cn } from '../../lib/utils.ts'
 
 export interface SplitterProps {
-  /**
-   * ARIA's sense of the word: a `vertical` splitter is a vertical bar between
-   * two side-by-side panes, and it resizes a **width**. A `horizontal` one sits
-   * between stacked panes and resizes a **height**.
-   */
   orientation: 'vertical' | 'horizontal'
-  /** Current size of the pane this splitter controls, in pixels. */
   value: number
   onValueChange: (value: number) => void
   min: number
   max: number
-  /** Keyboard step. */
   step?: number
-  /**
-   * Size to snap back to on a double-click — the convention every pane divider
-   * that can be dragged is expected to honour. Omit and a double-click does
-   * nothing, which is the honest behaviour when there is no default to mean.
-   */
   defaultValue?: number
-  /** Set when dragging the splitter *away* from the origin should shrink the
-   * controlled pane — i.e. the pane is on the right or the bottom. */
   inverted?: boolean
-  /** Required: "Resize" alone does not say which of two splitters this is. */
   'aria-label': string
   className?: string
 }
 
-/**
- * A draggable pane divider.
- *
- * Hand-rolled rather than depended on: `@base-ui/react` ships no splitter, the
- * behaviour is a hundred lines of pointer events, and this repo's instinct at
- * this layer is to own it (the composer is vendored for the same reason).
- *
- * Pointer capture is what makes it survive a fast drag — without it the pointer
- * leaves the 5px bar within a frame and the moves go to whatever is underneath,
- * which for this layout is an iframe-free but still selection-happy code pane.
- * The drag origin is captured on pointerdown and every move is measured against
- * it, so the pane cannot drift relative to the cursor over a long drag the way
- * per-move deltas do once clamping is involved.
- *
- * Keyboard-operable and announced as a separator, because a pane you can only
- * size by dragging is a pane some people cannot size.
- */
 export function Splitter({
   orientation,
   value,
@@ -69,8 +32,9 @@ export function Splitter({
   const clamp = useCallback((next: number) => Math.min(max, Math.max(min, next)), [min, max])
 
   const onPointerDown = (event: ReactPointerEvent<HTMLDivElement>) => {
-    // Secondary buttons open context menus; they are not drags.
-    if (event.button !== 0) return
+    if (event.button !== 0) {
+      return
+    }
     event.preventDefault()
     event.currentTarget.setPointerCapture(event.pointerId)
     drag.current = { origin: vertical ? event.clientX : event.clientY, start: value }
@@ -78,43 +42,52 @@ export function Splitter({
 
   const onPointerMove = (event: ReactPointerEvent<HTMLDivElement>) => {
     const state = drag.current
-    if (!state) return
+    if (!state) {
+      return
+    }
     const delta = (vertical ? event.clientX : event.clientY) - state.origin
     onValueChange(clamp(state.start + (inverted ? -delta : delta)))
   }
 
   const endDrag = (event: ReactPointerEvent<HTMLDivElement>) => {
-    if (!drag.current) return
+    if (!drag.current) {
+      return
+    }
     drag.current = null
     if (event.currentTarget.hasPointerCapture(event.pointerId)) {
       event.currentTarget.releasePointerCapture(event.pointerId)
     }
   }
 
-  // The second click of a double-click has already started a drag, so the reset
-  // has to land after `endDrag` — which it does: dblclick fires after pointerup.
+  // Reached after `endDrag` — the second click of a double-click has already started a drag, and dblclick fires after pointerup.
   const onDoubleClick = () => {
-    if (defaultValue !== undefined) onValueChange(clamp(defaultValue))
+    if (defaultValue !== undefined) {
+      onValueChange(clamp(defaultValue))
+    }
   }
 
   const onKeyDown = (event: ReactKeyboardEvent<HTMLDivElement>) => {
-    // The arrows that move *along* this splitter's axis of travel; the other
-    // pair is left to the page, which is what a separator should do with them.
     const grow = vertical ? 'ArrowRight' : 'ArrowDown'
     const shrink = vertical ? 'ArrowLeft' : 'ArrowUp'
     const direction = inverted ? -1 : 1
-    if (event.key === grow) onValueChange(clamp(value + step * direction))
-    else if (event.key === shrink) onValueChange(clamp(value - step * direction))
-    else if (event.key === 'Home') onValueChange(min)
-    else if (event.key === 'End') onValueChange(max)
-    else return
+    if (event.key === grow) {
+      onValueChange(clamp(value + step * direction))
+    } else if (event.key === shrink) {
+      onValueChange(clamp(value - step * direction))
+    } else if (event.key === 'Home') {
+      onValueChange(min)
+    } else if (event.key === 'End') {
+      onValueChange(max)
+    } else {
+      return
+    }
     event.preventDefault()
   }
 
   return (
     <div
-      data-slot='splitter'
-      role='separator'
+      data-slot="splitter"
+      role="separator"
       tabIndex={0}
       aria-label={label}
       aria-orientation={orientation}
@@ -128,20 +101,13 @@ export function Splitter({
       onDoubleClick={onDoubleClick}
       onKeyDown={onKeyDown}
       className={cn(
-        // A 1px line that reads as a border, with a larger invisible grab area
-        // around it — a hairline is an honest divider and a cruel target.
         'group relative shrink-0 touch-none bg-border transition-colors',
         'hover:bg-border-strong focus-visible:bg-accent focus-visible:outline-none',
         vertical ? 'w-px cursor-col-resize' : 'h-px cursor-row-resize',
         className,
-      )}>
-      <span
-        aria-hidden
-        className={cn(
-          'absolute',
-          vertical ? '-inset-x-[3px] inset-y-0' : '-inset-y-[3px] inset-x-0',
-        )}
-      />
+      )}
+    >
+      <span aria-hidden className={cn('absolute', vertical ? '-inset-x-[3px] inset-y-0' : '-inset-y-[3px] inset-x-0')} />
     </div>
   )
 }

package/src/components/ui/Textarea.tsx

@@ -1,13 +1,10 @@
 import { type TextareaHTMLAttributes, forwardRef } from 'react'
 import { cn } from '../../lib/utils.ts'
 
-export const Textarea = forwardRef<
-  HTMLTextAreaElement,
-  TextareaHTMLAttributes<HTMLTextAreaElement>
->(({ className, ...props }, ref) => (
+export const Textarea = forwardRef<HTMLTextAreaElement, TextareaHTMLAttributes<HTMLTextAreaElement>>(({ className, ...props }, ref) => (
   <textarea
     ref={ref}
-    data-slot='textarea'
+    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',

package/src/components/ui/Tooltip.tsx

@@ -10,9 +10,9 @@ export const TooltipContent: FunctionComponent<
 > = ({ className, side = 'top', sideOffset = 6, ...props }) => (
   <TooltipPrimitive.Portal>
     <PortalScope>
-      <TooltipPrimitive.Positioner side={side} sideOffset={sideOffset} className='isolate z-90'>
+      <TooltipPrimitive.Positioner side={side} sideOffset={sideOffset} className="isolate z-90">
         <TooltipPrimitive.Popup
-          data-slot='tooltip-content'
+          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,
@@ -24,14 +24,6 @@ export const TooltipContent: FunctionComponent<
   </TooltipPrimitive.Portal>
 )
 
-/**
- * Convenience wrapper: `<Tip content="..."><Button/></Tip>`.
- *
- * Pass `render` when the trigger must *be* an element you already have — a tab, a
- * row — rather than something wrapped in a span. The default span is fine beside
- * a button but would break any layout that styles its own children (a flex tab
- * strip gets an extra box between the container and its items).
- */
 export function Tip({
   content,
   render,
@@ -45,9 +37,7 @@ export function Tip({
 }) {
   return (
     <TooltipPrimitive.Root>
-      <TooltipPrimitive.Trigger render={render ?? <span className='inline-flex' />}>
-        {children}
-      </TooltipPrimitive.Trigger>
+      <TooltipPrimitive.Trigger render={render ?? <span className="inline-flex" />}>{children}</TooltipPrimitive.Trigger>
       <TooltipContent side={side}>{content}</TooltipContent>
     </TooltipPrimitive.Root>
   )

package/src/format.ts

@@ -1,11 +1,2 @@
-/**
- * The formatting helpers, on their own entry point.
- *
- * `src/index.ts` pulls in React and every component with it; a host that renders
- * session readings *outside* React — the VS Code extension host drawing them in
- * the window status bar, say — needs the numbers spelled the same way without
- * paying for that. These functions are pure and dependency-free, so the subpath
- * costs nothing and keeps one truth for what "45.2k" and "2h 10m" mean.
- */
 export * from './lib/format.ts'
 export * from './lib/status.ts'

package/src/index.ts

@@ -1,17 +1,9 @@
-// Primitives
 export { Button, buttonVariants, type ButtonProps } from './components/ui/Button.tsx'
 export { Badge, badgeVariants, type BadgeProps } from './components/ui/Badge.tsx'
 export { Card, CardContent, CardHeader, CardTitle } from './components/ui/Card.tsx'
 export { Input } from './components/ui/Input.tsx'
 export { Textarea } from './components/ui/Textarea.tsx'
-export {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectItemText,
-  SelectTrigger,
-  SelectValue,
-} from './components/ui/Select.tsx'
+export { Select, SelectContent, SelectItem, SelectItemText, SelectTrigger, SelectValue } from './components/ui/Select.tsx'
 export {
   AlertDialog,
   AlertDialogClose,
@@ -20,22 +12,8 @@ export {
   AlertDialogTitle,
   AlertDialogTrigger,
 } from './components/ui/AlertDialog.tsx'
-export {
-  Menu,
-  MenuContent,
-  MenuItem,
-  MenuSeparator,
-  MenuTrigger,
-} from './components/ui/Menu.tsx'
-export {
-  Dialog,
-  DialogBody,
-  DialogClose,
-  DialogContent,
-  DialogHeader,
-  DialogRow,
-  DialogTrigger,
-} from './components/ui/Dialog.tsx'
+export { Menu, MenuContent, MenuItem, MenuSeparator, MenuTrigger } from './components/ui/Menu.tsx'
+export { Dialog, DialogBody, DialogClose, DialogContent, DialogHeader, DialogRow, DialogTrigger } from './components/ui/Dialog.tsx'
 export { Tip, TooltipContent, TooltipProvider } from './components/ui/Tooltip.tsx'
 export { Toaster, toast } from './components/ui/Sonner.tsx'
 export { CopyButton, type CopyButtonProps } from './components/ui/CopyButton.tsx'
@@ -44,7 +22,6 @@ export { CodeBlock, type CodeBlockProps } from './components/ui/CodeBlock.tsx'
 export { Splitter, type SplitterProps } from './components/ui/Splitter.tsx'
 export { Empty, EmptyKey } from './components/ui/Empty.tsx'
 export { ProgressRing, type ProgressRingProps } from './components/ui/ProgressRing.tsx'
-// Prompt input (vendored just-marketing/prompt-area, themed to these tokens)
 export {
   PromptArea,
   usePromptAreaState,
@@ -64,7 +41,6 @@ export {
   type TriggerSuggestion,
 } from './components/prompt-area/index.ts'
 
-// Agent-control components
 export {
   SessionPanel,
   type SessionControls,
@@ -73,48 +49,17 @@ export {
   type SessionVitals,
   type TerminalMetrics,
 } from './components/agent/SessionPanel.tsx'
-// The workspace layout and its Monaco editor live at `@workerdeck/ui/workspace`
-// — deliberately unreachable from here, so importing this entry never drags
-// Monaco into the bundle. See `src/workspace.ts`.
 export { Transcript, type TranscriptProps } from './components/agent/Transcript.tsx'
-// The terminal theme. `SessionPanel`/`Transcript` reach it through
-// `variant: 'terminal'` and most embedders need nothing else — these are for a
-// host composing the surface by hand (a prompt outside the panel, a status line
-// in its own chrome) and for the primitives, so a host's own row lands on the
-// same character cell as ours.
-export {
-  TerminalSurface,
-  type TerminalSurfaceProps,
-} from './components/terminal/surface.tsx'
-export {
-  TerminalTranscript,
-  TerminalItemView,
-  type TerminalTranscriptProps,
-} from './components/terminal/TerminalTranscript.tsx'
+export { TerminalSurface, type TerminalSurfaceProps } from './components/terminal/surface.tsx'
+export { TerminalTranscript, TerminalItemView, type TerminalTranscriptProps } from './components/terminal/TerminalTranscript.tsx'
 export { TerminalStatusLine, type TerminalStatusLineProps } from './components/terminal/StatusLine.tsx'
-export {
-  TerminalPermissionPrompt,
-  type TerminalPermissionPromptProps,
-} from './components/terminal/PermissionPrompt.tsx'
-export {
-  TerminalQuestionPrompt,
-  type TerminalQuestionPromptProps,
-} from './components/terminal/QuestionPrompt.tsx'
+export { TerminalPermissionPrompt, type TerminalPermissionPromptProps } from './components/terminal/PermissionPrompt.tsx'
+export { TerminalQuestionPrompt, type TerminalQuestionPromptProps } from './components/terminal/QuestionPrompt.tsx'
 export { TerminalDiff, previewPatch } from './components/terminal/diff.tsx'
 export { TerminalMarkdown, type TerminalMarkdownProps } from './components/terminal/markdown.tsx'
 export { Band, Blank, Ink, Row, type RowProps, type Tone } from './components/terminal/row.tsx'
-export {
-  CopyAction,
-  WithActions,
-  useAffordances,
-  type TerminalAffordances,
-} from './components/terminal/affordances.tsx'
-export {
-  Conversation,
-  ConversationContent,
-  ConversationScrollButton,
-  type ConversationProps,
-} from './components/agent/Conversation.tsx'
+export { CopyAction, WithActions, useAffordances, type TerminalAffordances } from './components/terminal/affordances.tsx'
+export { Conversation, ConversationContent, ConversationScrollButton, type ConversationProps } from './components/agent/Conversation.tsx'
 export { Message, MessageContent, type MessageProps } from './components/agent/Message.tsx'
 export {
   TranscriptDensityProvider,
@@ -138,13 +83,7 @@ export {
   type QuestionPromptProps,
   type QuestionBehaviorMeta,
 } from './components/agent/QuestionPrompt.tsx'
-export {
-  Composer,
-  skillPrompt,
-  type ComposerFileMatch,
-  type ComposerHandle,
-  type ComposerProps,
-} from './components/agent/Composer.tsx'
+export { Composer, skillPrompt, type ComposerFileMatch, type ComposerHandle, type ComposerProps } from './components/agent/Composer.tsx'
 export { ModelSelect, type ModelSelectProps } from './components/agent/ModelSelect.tsx'
 export {
   PERMISSION_MODES,
@@ -159,59 +98,23 @@ export { StatusBar, type StatusBarProps } from './components/agent/StatusBar.tsx
 export { ContextDialog, type ContextDialogProps } from './components/agent/ContextDialog.tsx'
 export { UsageDialog, type UsageDialogProps } from './components/agent/UsageDialog.tsx'
 export { UsageMeters, useMinuteClock } from './components/agent/UsageMeters.tsx'
-export {
-  SessionInfoDialog,
-  type SessionInfoDialogProps,
-} from './components/agent/SessionInfoDialog.tsx'
+export { SessionInfoDialog, type SessionInfoDialogProps } from './components/agent/SessionInfoDialog.tsx'
 export { McpDialog, type McpDialogProps } from './components/agent/McpDialog.tsx'
 export { SkillsDialog, type SkillsDialogProps } from './components/agent/SkillsDialog.tsx'
 export { HostFilesDialog, type HostFilesDialogProps } from './components/agent/HostFilesDialog.tsx'
-export {
-  SessionList,
-  SessionListItem,
-  type SessionListItemProps,
-  type SessionListProps,
-} from './components/agent/SessionList.tsx'
-export {
-  SessionBrowser,
-  rowShapeClass,
-  type SessionBrowserProps,
-} from './components/agent/SessionBrowser.tsx'
-// The session card itself — one component, every client. `SessionBrowser` is the
-// dashboard's list *around* it; a host that wants only the card (the VS Code
-// sidebar does, because the filtering chrome above it is native) takes this.
+export { SessionList, SessionListItem, type SessionListItemProps, type SessionListProps } from './components/agent/SessionList.tsx'
+export { SessionBrowser, rowShapeClass, type SessionBrowserProps } from './components/agent/SessionBrowser.tsx'
 export { SessionItem, type SessionItemProps } from './components/agent/SessionItem.tsx'
 export { SessionStatusIcon } from './components/agent/SessionStatusIcon.tsx'
-// Lifted out of the VS Code sidebar once the dashboard grew a collapsed rail
-// that needs the same glyph — two copies of a trademark set is one too many.
-export {
-  EngineIcon,
-  engineMark,
-  vendorMarkClass,
-  vendorTextClass,
-} from './components/agent/EngineIcon.tsx'
-// Lifted out of the sidebar for the same reason: the work under a row is a
-// protocol fact, so every list annotates it with one component.
-export {
-  type Step,
-  StepRow,
-  StepToggle,
-  runningSteps,
-  sessionSteps,
-} from './components/agent/SessionSteps.tsx'
-// The sub-agent takeover's one line. Exported for hosts that draw their own
-// panel chrome; the panel raises it itself.
+export { EngineIcon, engineMark, vendorMarkClass, vendorTextClass } from './components/agent/EngineIcon.tsx'
+export { type Step, StepRow, StepToggle, runningSteps, sessionSteps } from './components/agent/SessionSteps.tsx'
 export { SubagentStrip } from './components/agent/SubagentStrip.tsx'
 export { ProjectIcon } from './components/agent/ProjectIcon.tsx'
-export {
-  SessionEmptyState,
-  type SessionEmptyStateProps,
-} from './components/agent/SessionEmptyState.tsx'
+export { SessionEmptyState, type SessionEmptyStateProps } from './components/agent/SessionEmptyState.tsx'
 export { PromptTokenText } from './components/agent/PromptTokenText.tsx'
 export { STATUS_META } from './components/agent/status.ts'
 export { ContextRing } from './components/agent/ContextRing.tsx'
 
-// Utilities
 export { cn } from './lib/utils.ts'
 export { copyText } from './lib/clipboard.ts'
 export { isMutatingTool, toolIcon } from './lib/tool-icon.ts'

package/src/lib/clipboard.ts

@@ -1,47 +1,25 @@
-/**
- * Copy text to the clipboard, on origins where the modern API does not exist.
- *
- * `navigator.clipboard` is gated on a **secure context**: HTTPS, or localhost.
- * A WorkerDeck dashboard reached the way it is meant to be reached — plain HTTP
- * on a LAN address, from a laptop or a phone — is neither, so `navigator.clipboard`
- * is `undefined` there and touching `.writeText` throws outright. That is the
- * normal deployment, not an edge case, which is why this falls back rather than
- * feature-detecting into a disabled button.
- *
- * The fallback is `document.execCommand('copy')` over an off-screen textarea.
- * It is deprecated and it is also the only thing that works here; every browser
- * still implements it. Returns whether the text actually landed, so a caller can
- * avoid claiming success it did not have.
- */
 export async function copyText(value: string): Promise<boolean> {
-  // Optional-chained, not `in`-checked: on an insecure origin the property is
-  // absent entirely, and some embedded webviews expose a `clipboard` object
-  // whose `writeText` rejects. Both end up in the fallback.
+  // Optional-chained, not `in`-checked: some embedded webviews expose a `clipboard` object whose `writeText` rejects.
   try {
     if (navigator.clipboard?.writeText) {
       await navigator.clipboard.writeText(value)
       return true
     }
-  } catch {
-    // Permission denied, or a webview that lied about having the API.
-  }
+  } catch {}
   return legacyCopy(value)
 }
 
 function legacyCopy(value: string): boolean {
-  if (typeof document === 'undefined') return false
+  if (typeof document === 'undefined') {
+    return false
+  }
   const textarea = document.createElement('textarea')
   textarea.value = value
-  // Off-screen rather than hidden: `display: none` and `visibility: hidden`
-  // elements cannot hold a selection, so the copy would silently do nothing.
-  // `readOnly` keeps the mobile keyboard from appearing for the instant it exists.
   textarea.setAttribute('readonly', '')
   textarea.style.position = 'fixed'
   textarea.style.top = '-9999px'
   textarea.style.opacity = '0'
   document.body.appendChild(textarea)
-  // Preserve where the user was: selecting steals the current selection, and on
-  // a text field mid-edit that is visible and annoying.
   const previous = document.activeElement
   try {
     textarea.select()
@@ -51,6 +29,8 @@ function legacyCopy(value: string): boolean {
     return false
   } finally {
     document.body.removeChild(textarea)
-    if (previous instanceof HTMLElement) previous.focus()
+    if (previous instanceof HTMLElement) {
+      previous.focus()
+    }
   }
 }

package/src/lib/css.ts

@@ -0,0 +1,8 @@
+/**
+ * Pass a colour through only if this engine can actually parse it. Category colours arrive
+ * from the CLI as untrusted strings, and an unparseable one must fall back to the token
+ * colour rather than reaching the DOM.
+ */
+export function cssColor(color: string): string | undefined {
+  return typeof CSS !== 'undefined' && CSS.supports('color', color) ? color : undefined
+}