@workerdeck/ui 0.6.0

package/src/index.ts

@@ -0,0 +1,99 @@
+// 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 {
+  AlertDialog,
+  AlertDialogClose,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogTitle,
+  AlertDialogTrigger,
+} from './components/ui/AlertDialog.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'
+export { Spinner } from './components/ui/Spinner.tsx'
+export { CodeBlock, type CodeBlockProps } from './components/ui/CodeBlock.tsx'
+export { ProgressRing, type ProgressRingProps } from './components/ui/ProgressRing.tsx'
+// Prompt input (vendored just-marketing/prompt-area, themed to these tokens)
+export {
+  PromptArea,
+  usePromptAreaState,
+  commandTrigger,
+  mentionTrigger,
+  hashtagTrigger,
+  segmentsToPlainText,
+  plainTextToSegments,
+  isSegmentsEmpty,
+  getChipsByTrigger,
+  type PromptAreaHandle,
+  type PromptAreaProps,
+  type Segment,
+  type ChipSegment,
+  type TextSegment,
+  type TriggerConfig,
+  type TriggerSuggestion,
+} from './components/prompt-area/index.ts'
+
+// Agent-control components
+export { SessionPanel, type SessionPanelProps } from './components/agent/SessionPanel.tsx'
+export { Transcript, type TranscriptProps } from './components/agent/Transcript.tsx'
+export {
+  Conversation,
+  ConversationContent,
+  ConversationScrollButton,
+  type ConversationProps,
+} from './components/agent/Conversation.tsx'
+export { Message, MessageContent, type MessageProps } from './components/agent/Message.tsx'
+export { Response, type ResponseProps } from './components/agent/Response.tsx'
+export { Reasoning, type ReasoningProps } from './components/agent/Reasoning.tsx'
+export { Loader } from './components/agent/Loader.tsx'
+export { ToolCallCard, type ToolCallCardProps, type ToolCallItem } from './components/agent/ToolCallCard.tsx'
+export { FileCard, type FileCardProps, type FileDeliveredItem } from './components/agent/FileCard.tsx'
+export { PermissionPrompt, type PermissionPromptProps } from './components/agent/PermissionPrompt.tsx'
+export {
+  QuestionPrompt,
+  QUESTION_BEHAVIORS,
+  parseUserQuestions,
+  type QuestionPromptProps,
+  type QuestionBehaviorMeta,
+} from './components/agent/QuestionPrompt.tsx'
+export { Composer, type ComposerProps } from './components/agent/Composer.tsx'
+export { ModelSelect, type ModelSelectProps } from './components/agent/ModelSelect.tsx'
+export {
+  PERMISSION_MODES,
+  PermissionModeSelect,
+  type PermissionModeMeta,
+  type PermissionModeSelectProps,
+} from './components/agent/PermissionModeSelect.tsx'
+export { StatusBar, type StatusBarProps } from './components/agent/StatusBar.tsx'
+export {
+  SessionList,
+  SessionListItem,
+  type SessionListItemProps,
+  type SessionListProps,
+} from './components/agent/SessionList.tsx'
+export { STATUS_META } from './components/agent/status.ts'
+
+// Utilities
+export { cn } from './lib/utils.ts'
+export {
+  formatBytes,
+  formatCost,
+  formatCountdown,
+  formatDuration,
+  formatRelativeTime,
+  formatTokens,
+  toolInputPreview,
+} from './lib/format.ts'

package/src/lib/format.ts

@@ -0,0 +1,67 @@
+export function formatCost(usd: number | undefined): string {
+  if (usd === undefined || Number.isNaN(usd)) return '—'
+  if (usd === 0) return '$0.00'
+  if (usd < 0.01) return '<$0.01'
+  return `$${usd.toFixed(2)}`
+}
+
+export function formatDuration(ms: number): string {
+  if (ms < 1000) return `${Math.round(ms)}ms`
+  const s = ms / 1000
+  if (s < 60) return `${s.toFixed(1)}s`
+  const m = Math.floor(s / 60)
+  return `${m}m ${Math.round(s % 60)}s`
+}
+
+/** Compact token count, Claude Code-style: 850 → "850", 359_000 → "359.0k", 1_200_000 → "1.2M". */
+export function formatTokens(tokens: number): string {
+  if (tokens >= 1_000_000) return `${(tokens / 1_000_000).toFixed(1)}M`
+  if (tokens >= 1000) return `${(tokens / 1000).toFixed(1)}k`
+  return String(Math.round(tokens))
+}
+
+export function formatBytes(bytes: number): string {
+  if (bytes >= 1024 * 1024) return `${(bytes / (1024 * 1024)).toFixed(1)} MB`
+  if (bytes >= 1024) return `${(bytes / 1024).toFixed(1)} KB`
+  return `${bytes} B`
+}
+
+/** Countdown to an epoch-ms deadline: "2h 18m", "12m", "<1m"; "now" once passed. */
+export function formatCountdown(untilEpochMs: number, now = Date.now()): string {
+  const remaining = untilEpochMs - now
+  if (remaining <= 0) return 'now'
+  const minutes = Math.ceil(remaining / 60_000)
+  if (minutes < 1) return '<1m'
+  if (minutes < 60) return `${minutes}m`
+  const days = Math.floor(minutes / (60 * 24))
+  if (days >= 1) return `${days}d ${Math.floor((minutes % (60 * 24)) / 60)}h`
+  return `${Math.floor(minutes / 60)}h ${minutes % 60}m`
+}
+
+export function formatRelativeTime(epochMs: number | undefined, now = Date.now()): string {
+  if (!epochMs) return '—'
+  const diff = Math.max(0, now - epochMs)
+  const s = Math.floor(diff / 1000)
+  if (s < 60) return 'just now'
+  const m = Math.floor(s / 60)
+  if (m < 60) return `${m}m ago`
+  const h = Math.floor(m / 60)
+  if (h < 24) return `${h}h ago`
+  const d = Math.floor(h / 24)
+  return `${d}d ago`
+}
+
+/** Compact one-line preview of a tool input for card headers. */
+export function toolInputPreview(input: unknown, max = 80): string {
+  if (input === null || input === undefined) return ''
+  if (typeof input === 'object') {
+    const o = input as Record<string, unknown>
+    const primary =
+      o.command ?? o.file_path ?? o.path ?? o.url ?? o.pattern ?? o.query ?? o.description
+    if (typeof primary === 'string') {
+      return primary.length > max ? primary.slice(0, max - 1) + '…' : primary
+    }
+  }
+  const text = JSON.stringify(input) ?? ''
+  return text.length > max ? text.slice(0, max - 1) + '…' : text
+}

package/src/lib/utils.ts

@@ -0,0 +1,33 @@
+import { clsx, type ClassValue } from 'clsx'
+import { extendTailwindMerge } from 'tailwind-merge'
+
+// Register the custom text-* font-size utilities as a font-size class group, or
+// tailwind-merge collapses a size class and a color class (e.g. `text-label
+// text-muted-foreground`) into one bucket and silently drops the size.
+const twMerge = extendTailwindMerge({
+  extend: {
+    classGroups: {
+      'font-size': [
+        {
+          text: [
+            'display-xl',
+            'display-lg',
+            'display-md',
+            'display-sm',
+            'heading-1',
+            'heading-2',
+            'heading-3',
+            'body',
+            'body-sm',
+            'label',
+            'code',
+          ],
+        },
+      ],
+    },
+  },
+})
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs))
+}

package/src/styles/theme.css

@@ -0,0 +1,413 @@
+/*
+ * @workerdeck/ui theme — design tokens + Tailwind v4 theme mapping.
+ *
+ * Consumer wiring (the app's tailwind entry CSS):
+ *
+ *   @import 'tailwindcss';
+ *   @import '@workerdeck/ui/theme.css';
+ *   @source '../node_modules/@workerdeck/ui';   (or the package src path in a monorepo)
+ *
+ * Do NOT import tailwindcss here — the consumer owns that. Theme switching is driven by
+ * <html data-theme="light|dark"> (set it before first paint to avoid a flash).
+ *
+ * Two tiers: a raw palette swapped by [data-theme], then `@theme inline` mapping raw
+ * tokens to Tailwind utilities (`inline` preserves the var() reference so flipping
+ * data-theme re-themes with zero JS).
+ */
+
+:root,
+[data-theme='light'] {
+  /* ---------- Backgrounds ---------- */
+  --bg: #ffffff;
+  --bg-surface: #fafafa;
+  --bg-surface-hover: #f2f2f2;
+  --bg-code: #f5f5f5;
+  --bg-elevated: #ffffffcc;
+
+  /* ---------- Borders ---------- */
+  --border: #ebebeb;
+  --border-light: #e0e0e0;
+  --border-strong: #c9c9c9;
+
+  /* ---------- Foreground / Text ---------- */
+  --fg-1: #171717;
+  --fg-2: #454545;
+  --fg-3: #737373;
+  --fg-4: #a1a1a1;
+  --fg-disabled: #c9c9c9;
+
+  /* ---------- Accent = the inverse of the canvas ---------- */
+  --accent: #171717;
+  --accent-hover: #000000;
+  --accent-dim: #737373;
+  --accent-bg: #f2f2f2;
+  --accent-ring: #17171733;
+
+  /* ---------- Semantic ---------- */
+  --success: #0f7b4f;
+  --success-bg: #edfaf3;
+  --warning: #a35200;
+  --warning-bg: #fff6ed;
+  --danger: #d93036;
+  --danger-bg: #fef1f1;
+  --info: #0072f5;
+  --info-bg: #eff6ff;
+
+  /* ---------- Elevation (flat by default; shadows are for overlays only) ---------- */
+  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.04);
+  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.06);
+  --shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
+  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.08);
+  --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.1);
+
+  /* ---------- Inset frame ---------- */
+  --shine: #dcdcdc;
+  --frame-shadow: var(--shadow-xs);
+
+  /* ---------- aliases (bridge for the @theme utilities) ---------- */
+  --surface: var(--bg-surface);
+  --sidebar: #f4f4f4;
+  --text: var(--fg-1);
+  --text-muted: var(--fg-3);
+  --accent-tint: var(--accent-bg);
+  --accent-fg: #ffffff;
+  --warn: var(--warning);
+  --ring: var(--fg-1);
+}
+
+[data-theme='dark'] {
+  /* ---------- Backgrounds ---------- */
+  --bg: #000000;
+  --bg-surface: #0a0a0a;
+  --bg-surface-hover: #141414;
+  --bg-code: #141414;
+  --bg-elevated: #0a0a0acc;
+
+  /* ---------- Borders ---------- */
+  --border: #1f1f1f;
+  --border-light: #292929;
+  --border-strong: #3d3d3d;
+
+  /* ---------- Foreground / Text ---------- */
+  --fg-1: #ededed;
+  --fg-2: #a1a1a1;
+  --fg-3: #8f8f8f;
+  --fg-4: #6e6e6e;
+  --fg-disabled: #454545;
+
+  /* ---------- Accent = the inverse of the canvas ---------- */
+  --accent: #ededed;
+  --accent-hover: #ffffff;
+  --accent-dim: #8f8f8f;
+  --accent-bg: #1f1f1f;
+  --accent-ring: #ffffff3d;
+
+  /* ---------- Semantic ---------- */
+  --success: #3ecf8e;
+  --success-bg: #0d2a1d;
+  --warning: #f5a623;
+  --warning-bg: #2a1f04;
+  --danger: #ff6166;
+  --danger-bg: #2a1114;
+  --info: #0091ff;
+  --info-bg: #0a1f33;
+
+  /* ---------- Elevation ---------- */
+  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.5);
+  --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.5);
+  --shadow: 0 4px 12px rgba(0, 0, 0, 0.6);
+  --shadow-md: 0 8px 20px rgba(0, 0, 0, 0.6);
+  --shadow-lg: 0 24px 48px rgba(0, 0, 0, 0.7);
+
+  /* ---------- Inset frame ---------- */
+  --shine: #303030;
+  --frame-shadow:
+    0 4px 24px rgba(0, 0, 0, 0.55),
+    0 2px 6px rgba(0, 0, 0, 0.45);
+
+  /* ---------- aliases ---------- */
+  --surface: var(--bg-surface);
+  --sidebar: #131313;
+  --text: var(--fg-1);
+  --text-muted: var(--fg-3);
+  --accent-tint: var(--accent-bg);
+  --accent-fg: #0a0a0a;
+  --warn: var(--warning);
+  --ring: var(--fg-1);
+}
+
+/* Theme-independent tokens — type tracking, easing, fonts.
+ * Hosts get real fonts by importing @fontsource/inter + @fontsource/jetbrains-mono;
+ * the stacks below degrade gracefully without them. */
+:root {
+  --tracking-tight: -0.02em;
+  --tracking-normal: 0;
+  --tracking-wide: 0.04em;
+  --tracking-caps: 0.1em;
+
+  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
+  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
+
+  --cw-font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
+  --cw-font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', 'Cascadia Code', Menlo, Consolas, monospace;
+
+  --motion-fast: 120ms;
+  --motion-base: 150ms;
+  --motion-slow: 220ms;
+
+  /* Stock-name bridge → raw custom properties (shadcn idiom compatibility). */
+  --primary: var(--accent);
+  --primary-foreground: var(--accent-fg);
+  --secondary: var(--surface);
+  --secondary-foreground: var(--text);
+  --muted: var(--sidebar);
+  --muted-foreground: var(--text-muted);
+  --background: var(--bg);
+  --foreground: var(--text);
+  --destructive: var(--danger);
+  --radius: var(--radius-md);
+}
+
+/* Drive dark: off the same <html data-theme> the tokens swap on. */
+@custom-variant dark (&:where([data-theme='dark'], [data-theme='dark'] *));
+
+@theme inline {
+  /* Semantic colors → utilities. */
+  --color-bg: var(--bg);
+  --color-surface: var(--surface);
+  --color-sidebar: var(--sidebar);
+  --color-border: var(--border);
+  --color-text: var(--text);
+  --color-accent: var(--accent);
+  --color-accent-hover: var(--accent-hover);
+  --color-accent-tint: var(--accent-tint);
+  --color-accent-fg: var(--accent-fg);
+  --color-success: var(--success);
+  --color-warn: var(--warn);
+  --color-danger: var(--danger);
+  --color-ring: var(--ring);
+
+  --color-surface-hover: var(--bg-surface-hover);
+  /* Named code-bg (not code) so it can't shadow the --text-code font-size token:
+     with a --color-code defined, `text-code` would resolve to the color namespace
+     and paint text in the code *background* color — invisible in both themes. */
+  --color-code-bg: var(--bg-code);
+  --color-border-light: var(--border-light);
+  --color-border-strong: var(--border-strong);
+  --color-fg-1: var(--fg-1);
+  --color-fg-2: var(--fg-2);
+  --color-fg-3: var(--fg-3);
+  --color-fg-4: var(--fg-4);
+  --color-accent-bg: var(--accent-bg);
+  --color-accent-dim: var(--accent-dim);
+  --color-success-bg: var(--success-bg);
+  --color-warning: var(--warning);
+  --color-warning-bg: var(--warning-bg);
+  --color-danger-bg: var(--danger-bg);
+  --color-info: var(--info);
+  --color-info-bg: var(--info-bg);
+
+  /* Stock-name bridge → utilities (bg-primary / text-muted-foreground / ...). */
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-destructive: var(--destructive);
+
+  /* Font roles */
+  --font-sans: var(--cw-font-sans);
+  --font-mono: var(--cw-font-mono);
+
+  /* Type scale — size + line-height. Display sizes carry tight tracking. */
+  --text-display-xl: 2.5rem;
+  --text-display-xl--line-height: 3rem;
+  --text-display-xl--letter-spacing: -0.02em;
+  --text-display-lg: 2rem;
+  --text-display-lg--line-height: 2.5rem;
+  --text-display-lg--letter-spacing: -0.02em;
+  --text-display-md: 1.5rem;
+  --text-display-md--line-height: 2rem;
+  --text-display-md--letter-spacing: -0.02em;
+  --text-display-sm: 1.25rem;
+  --text-display-sm--line-height: 1.75rem;
+  --text-display-sm--letter-spacing: -0.02em;
+  --text-heading-1: 1.5rem;
+  --text-heading-1--line-height: 2rem;
+  --text-heading-2: 1.25rem;
+  --text-heading-2--line-height: 1.75rem;
+  --text-heading-3: 1rem;
+  --text-heading-3--line-height: 1.5rem;
+  --text-body: 0.9375rem;
+  --text-body--line-height: 1.5rem;
+  --text-body-sm: 0.8125rem;
+  --text-body-sm--line-height: 1.25rem;
+  --text-label: 0.75rem;
+  --text-label--line-height: 1rem;
+  --text-label--letter-spacing: 0.02em;
+  --text-code: 0.84375rem;
+  --text-code--line-height: 1.375rem;
+
+  /* Radii — 6px is the workhorse. */
+  --radius-sm: 4px;
+  --radius-md: 6px;
+  --radius-lg: 8px;
+  --radius-full: 9999px;
+
+  /* Motion */
+  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
+  --ease-emphasized: cubic-bezier(0.3, 0, 0, 1);
+}
+
+@layer base {
+  * {
+    border-color: var(--border);
+  }
+
+  html {
+    -webkit-text-size-adjust: 100%;
+  }
+
+  body {
+    margin: 0;
+    background-color: var(--bg);
+    color: var(--text);
+    font-family: var(--cw-font-sans);
+    font-size: var(--text-body);
+    line-height: 1.5rem;
+    -webkit-font-smoothing: antialiased;
+    text-rendering: optimizeLegibility;
+  }
+
+  /* Standard focus ring: accent-derived, 2px + 2px offset. */
+  :focus-visible {
+    outline: 2px solid var(--ring);
+    outline-offset: 2px;
+    border-radius: 2px;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    *,
+    *::before,
+    *::after {
+      animation-duration: 0.001ms !important;
+      animation-iteration-count: 1 !important;
+      transition-duration: 0.001ms !important;
+      scroll-behavior: auto !important;
+    }
+  }
+
+  /* Lucide icons ship a hardcoded 24px; default them to 16px. :where() keeps specificity 0. */
+  :where(svg.lucide) {
+    width: 1rem;
+    height: 1rem;
+  }
+}
+
+/* The inset frame's gradient "shine" edge (app shells). Do NOT add bg-* on top. */
+.frame-shine {
+  border: 1px solid transparent;
+  background:
+    linear-gradient(var(--bg), var(--bg)) padding-box,
+    linear-gradient(
+        135deg,
+        var(--shine) 0%,
+        color-mix(in srgb, var(--shine) 55%, transparent) 55%,
+        color-mix(in srgb, var(--shine) 30%, transparent) 100%
+      )
+      border-box;
+  box-shadow: var(--frame-shadow);
+}
+
+/* ── prompt-area (vendored from just-marketing/prompt-area, MIT) ──────────────
+   Hand-authored styles its contentEditable chips/markers depend on; colors ride
+   the stock-name bridge vars above (--secondary/--foreground). */
+.prompt-area-chip {
+  display: inline-flex;
+  align-items: center;
+  padding: 1px 6px;
+  border-radius: 4px;
+  font-size: 0.8125rem;
+  font-weight: 500;
+  cursor: pointer;
+  user-select: none;
+  vertical-align: baseline;
+  margin: 0 1px;
+  background-color: var(--secondary);
+  color: var(--foreground);
+  transition:
+    background-color 0.2s ease,
+    transform 0.15s cubic-bezier(0.4, 0, 0.2, 1),
+    box-shadow 0.2s ease;
+  position: relative;
+  overflow: hidden;
+}
+.prompt-area-chip:hover {
+  background-color: color-mix(in srgb, var(--secondary) 80%, var(--foreground) 20%);
+  box-shadow: 0 1px 4px color-mix(in srgb, var(--foreground) 10%, transparent);
+}
+.prompt-area-chip:active {
+  transform: scale(0.93);
+  background-color: color-mix(in srgb, var(--secondary) 70%, var(--foreground) 30%);
+  box-shadow: 0 0 0 transparent;
+  transition:
+    background-color 0.05s ease,
+    transform 0.08s cubic-bezier(0.4, 0, 0.2, 1),
+    box-shadow 0.05s ease;
+}
+@keyframes prompt-area-chip-ripple {
+  0% {
+    transform: scale(0);
+    opacity: 0.4;
+  }
+  100% {
+    transform: scale(2.5);
+    opacity: 0;
+  }
+}
+.prompt-area-chip-ripple {
+  position: absolute;
+  border-radius: 50%;
+  width: 100%;
+  aspect-ratio: 1;
+  background: color-mix(in srgb, var(--foreground) 15%, transparent);
+  pointer-events: none;
+  animation: prompt-area-chip-ripple 0.45s ease-out forwards;
+}
+.prompt-area-md-marker {
+  font-size: 0;
+  display: inline;
+}
+.prompt-area-list-bullet {
+  font-size: 0;
+  display: inline-flex;
+  align-items: center;
+  vertical-align: middle;
+  transform: translateY(-1.5px);
+  margin-right: 4px;
+}
+.prompt-area-list-bullet::before {
+  content: '';
+  width: var(--prompt-area-bullet-size, 6px);
+  height: var(--prompt-area-bullet-size, 6px);
+  border-radius: 50%;
+  background: currentColor;
+}
+.prompt-area-list-indent {
+  display: inline-block;
+  white-space: pre;
+}
+.prompt-area-chip--inline {
+  padding: 0;
+  border-radius: 0;
+  margin: 0;
+  font-weight: 700;
+}
+@media (prefers-reduced-motion: reduce) {
+  .prompt-area-editor {
+    transition: none !important;
+  }
+}