@workerdeck/ui 0.6.0

package/src/components/prompt-area/file-strip.tsx

@@ -0,0 +1,250 @@
+'use client'
+
+import { useEffect, useRef, useState } from 'react'
+import { cn } from '../../lib/utils.ts'
+import { RemoveButton } from './remove-button.tsx'
+import type { PromptAreaFile } from './types.ts'
+
+type IconProps = { className?: string }
+
+/** Shared SVG wrapper matching the lucide icon defaults (no dependency). */
+function Svg({ className, children }: IconProps & { children: React.ReactNode }) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      aria-hidden="true"
+      className={className}>
+      {children}
+    </svg>
+  )
+}
+
+const FileBody = (
+  <>
+    <path d="M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z" />
+    <path d="M14 2v5a1 1 0 0 0 1 1h5" />
+  </>
+)
+
+const File = ({ className }: IconProps) => <Svg className={className}>{FileBody}</Svg>
+const FileText = ({ className }: IconProps) => (
+  <Svg className={className}>
+    {FileBody}
+    <path d="M10 9H8" />
+    <path d="M16 13H8" />
+    <path d="M16 17H8" />
+  </Svg>
+)
+const FileSpreadsheet = ({ className }: IconProps) => (
+  <Svg className={className}>
+    {FileBody}
+    <path d="M8 13h2" />
+    <path d="M14 13h2" />
+    <path d="M8 17h2" />
+    <path d="M14 17h2" />
+  </Svg>
+)
+const FileCode = ({ className }: IconProps) => (
+  <Svg className={className}>
+    {FileBody}
+    <path d="M10 12.5 8 15l2 2.5" />
+    <path d="m14 12.5 2 2.5-2 2.5" />
+  </Svg>
+)
+const ImageIcon = ({ className }: IconProps) => (
+  <Svg className={className}>
+    <rect width="18" height="18" x="3" y="3" rx="2" ry="2" />
+    <circle cx="9" cy="9" r="2" />
+    <path d="m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21" />
+  </Svg>
+)
+
+type FileStripProps = {
+  files: PromptAreaFile[]
+  onRemove?: (file: PromptAreaFile) => void
+  onClick?: (file: PromptAreaFile) => void
+  className?: string
+}
+
+/** Threshold above which collapse activates automatically. */
+const COLLAPSE_THRESHOLD = 3
+
+/** Pick a lucide icon key based on MIME type. */
+function getFileIconKey(type?: string): 'pdf' | 'spreadsheet' | 'code' | 'image' | 'default' {
+  if (!type) return 'default'
+  if (type === 'application/pdf') return 'pdf'
+  if (type.includes('spreadsheet') || type === 'text/csv') return 'spreadsheet'
+  if (
+    type.startsWith('text/') ||
+    type.includes('javascript') ||
+    type.includes('json') ||
+    type.includes('xml')
+  )
+    return 'code'
+  if (type.startsWith('image/')) return 'image'
+  return 'default'
+}
+
+const FILE_ICONS = {
+  pdf: FileText,
+  spreadsheet: FileSpreadsheet,
+  code: FileCode,
+  image: ImageIcon,
+  default: File,
+} as const
+
+/** Format bytes into a human-readable string. */
+function formatFileSize(bytes: number): string {
+  if (bytes < 1024) return `${bytes} B`
+  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`
+  if (bytes < 1024 * 1024 * 1024) return `${(bytes / (1024 * 1024)).toFixed(1)} MB`
+  return `${(bytes / (1024 * 1024 * 1024)).toFixed(1)} GB`
+}
+
+/** Extract a short extension label from a filename (e.g., "PDF", "CSV"). */
+function getExtensionLabel(name: string): string | null {
+  const dot = name.lastIndexOf('.')
+  if (dot === -1 || dot === name.length - 1) return null
+  return name.slice(dot + 1).toUpperCase()
+}
+
+function FileCard({
+  file,
+  compact,
+  onRemove,
+  onClick,
+}: {
+  file: PromptAreaFile
+  compact: boolean
+  onRemove?: (file: PromptAreaFile) => void
+  onClick?: (file: PromptAreaFile) => void
+}) {
+  const ext = getExtensionLabel(file.name)
+  const sizeStr = file.size != null ? formatFileSize(file.size) : null
+  const meta = [ext, sizeStr].filter(Boolean).join(' · ')
+
+  return (
+    <div
+      role="listitem"
+      className={cn(
+        'border-border relative flex flex-shrink-0 items-center gap-2 overflow-hidden rounded-lg border transition-colors',
+        'hover:bg-surface-hover',
+        compact ? 'h-10 w-36 px-2' : 'h-14 w-48 px-3',
+        onClick && 'cursor-pointer',
+      )}
+      onClick={() => onClick?.(file)}>
+      {(() => {
+        const Icon = FILE_ICONS[getFileIconKey(file.type)]
+        return (
+          <Icon
+            className={cn('text-muted-foreground flex-shrink-0', compact ? 'h-4 w-4' : 'h-5 w-5')}
+          />
+        )
+      })()}
+      <div className="min-w-0 flex-1">
+        <div
+          className={cn('truncate font-medium', compact ? 'text-xs' : 'text-sm')}
+          title={file.name}>
+          {file.name}
+        </div>
+        {!compact && meta && <div className="text-muted-foreground truncate text-xs">{meta}</div>}
+      </div>
+
+      {file.loading && (
+        <div className="absolute inset-0 flex items-center justify-center bg-black/40">
+          <div className="h-4 w-4 animate-spin rounded-full border-2 border-white border-t-transparent" />
+        </div>
+      )}
+
+      {onRemove && <RemoveButton onClick={() => onRemove(file)} label={`Remove ${file.name}`} />}
+    </div>
+  )
+}
+
+export function FileStrip({ files, onRemove, onClick, className }: FileStripProps) {
+  const [expanded, setExpanded] = useState(false)
+  const popoverRef = useRef<HTMLDivElement>(null)
+  const toggleRef = useRef<HTMLButtonElement>(null)
+
+  useEffect(() => {
+    if (!expanded) return
+    const handleClick = (e: MouseEvent) => {
+      const target = e.target
+      if (!(target instanceof Node)) return
+      if (
+        popoverRef.current &&
+        !popoverRef.current.contains(target) &&
+        !toggleRef.current?.contains(target)
+      ) {
+        setExpanded(false)
+      }
+    }
+    document.addEventListener('mousedown', handleClick)
+    return () => document.removeEventListener('mousedown', handleClick)
+  }, [expanded])
+
+  if (files.length === 0) return null
+
+  const collapsible = files.length > COLLAPSE_THRESHOLD
+  const compact = collapsible
+  const hiddenCount = files.length - COLLAPSE_THRESHOLD
+  const visibleFiles = files.slice(0, COLLAPSE_THRESHOLD)
+
+  return (
+    <div className={cn('relative', className)}>
+      <div className="flex flex-wrap gap-2" role="list" aria-label="Attached files">
+        {(collapsible ? visibleFiles : files).map((file) => (
+          <FileCard
+            key={file.id}
+            file={file}
+            compact={compact}
+            onRemove={onRemove}
+            onClick={onClick}
+          />
+        ))}
+        {collapsible && (
+          <div role="listitem">
+            <button
+              ref={toggleRef}
+              type="button"
+              onClick={() => setExpanded((v) => !v)}
+              className={cn(
+                'border-border text-muted-foreground hover:bg-surface-hover flex flex-shrink-0 cursor-pointer items-center justify-center rounded-lg border transition-colors',
+                compact ? 'h-10 px-3 text-xs' : 'h-14 px-4 text-sm',
+              )}>
+              {expanded ? 'Show less' : `+${hiddenCount} more`}
+            </button>
+          </div>
+        )}
+      </div>
+
+      {expanded && (
+        <div
+          ref={popoverRef}
+          className={cn(
+            'bg-surface border-border absolute bottom-full left-0 z-10 mb-2 max-h-48 overflow-y-auto rounded-lg border p-2 shadow-lg',
+          )}>
+          <div className="flex flex-wrap gap-2" role="list" aria-label="More attached files">
+            {files.slice(COLLAPSE_THRESHOLD).map((file) => (
+              <FileCard
+                key={file.id}
+                file={file}
+                compact={compact}
+                onRemove={onRemove}
+                onClick={onClick}
+              />
+            ))}
+          </div>
+        </div>
+      )}
+    </div>
+  )
+}

package/src/components/prompt-area/html-to-markdown.ts

@@ -0,0 +1,278 @@
+/**
+ * Hand-rolled, dependency-free HTML -> Markdown converter.
+ *
+ * Used by the paste handler: when the editor is in markdown mode and the
+ * clipboard carries rich `text/html` (web pages, Notion, Google Docs, GitHub,
+ * Slack, etc.), we convert it to markdown SOURCE text so the paste keeps its
+ * formatting. The resulting string flows through the same insertion path as a
+ * plain-text paste, and the editor's inline decorators render `*`/`**`/`***`
+ * and bare URLs automatically.
+ *
+ * Design constraints (see .size-limit.json): no runtime deps. Parsing uses the
+ * ambient `DOMParser`, walking is a small recursive switch. Type-safe: no
+ * `any`, DOM narrowed via the guards in `dom-helpers.ts`.
+ */
+import { isHTMLElement, isTextNode } from './dom-helpers.ts'
+
+// ---------------------------------------------------------------------------
+// Inline style / emphasis detection
+// ---------------------------------------------------------------------------
+
+/** Reads a single declaration value from an inline `style` attribute string. */
+function getStyleValue(style: string, prop: string): string {
+  const match = new RegExp(`(?:^|;)\\s*${prop}\\s*:\\s*([^;]+)`, 'i').exec(style)
+  return match ? match[1].trim().toLowerCase() : ''
+}
+
+/** Whether a CSS font-weight value is bold (`bold`, `bolder`, or >= 600). */
+function isBoldWeight(value: string): boolean {
+  if (value === 'bold' || value === 'bolder') return true
+  const numeric = Number.parseInt(value, 10)
+  return !Number.isNaN(numeric) && numeric >= 600
+}
+
+/**
+ * Computes the markdown emphasis markers for an element from BOTH its tag and
+ * its inline style. Google Docs emits `<span style="font-weight:700">` rather
+ * than `<b>`, and wraps everything in `<b style="font-weight:normal">`, so an
+ * explicit `font-weight`/`font-style` always wins over the tag name.
+ */
+function inlineEmphasis(node: HTMLElement): { prefix: string; suffix: string } {
+  const tag = node.tagName
+  const style = node.getAttribute('style') ?? ''
+
+  const weight = getStyleValue(style, 'font-weight')
+  const bold = weight ? isBoldWeight(weight) : tag === 'B' || tag === 'STRONG'
+
+  const fontStyle = getStyleValue(style, 'font-style')
+  const italic = fontStyle
+    ? fontStyle === 'italic' || fontStyle === 'oblique'
+    : tag === 'I' || tag === 'EM'
+
+  const decoration = getStyleValue(style, 'text-decoration')
+  const strike =
+    tag === 'S' || tag === 'DEL' || tag === 'STRIKE' || decoration.includes('line-through')
+
+  const prefix = (strike ? '~~' : '') + (bold ? '**' : '') + (italic ? '*' : '')
+  const suffix = (italic ? '*' : '') + (bold ? '**' : '') + (strike ? '~~' : '')
+  return { prefix, suffix }
+}
+
+// ---------------------------------------------------------------------------
+// Text handling
+// ---------------------------------------------------------------------------
+
+/** Collapses HTML whitespace runs (incl. `&nbsp;` -> U+00A0) to single spaces. */
+function collapseWhitespace(text: string): string {
+  return text.replace(/\s+/g, ' ')
+}
+
+/** Escapes literal `*` from HTML text so prose isn't re-read as emphasis. */
+function escapeText(text: string): string {
+  return text.replace(/\*/g, '\\*')
+}
+
+// ---------------------------------------------------------------------------
+// Block serializers
+// ---------------------------------------------------------------------------
+
+/** Derives a fenced-block language from `class="language-ts"` or `lang="ts"`. */
+function detectCodeLang(pre: HTMLElement): string {
+  const code = pre.querySelector('code')
+  const classNames = `${pre.className} ${code?.className ?? ''}`
+  const fromClass = /(?:language|lang)-([\w-]+)/.exec(classNames)
+  if (fromClass) return fromClass[1]
+  return pre.getAttribute('lang') ?? code?.getAttribute('lang') ?? ''
+}
+
+function serializePre(pre: HTMLElement): string {
+  const lang = detectCodeLang(pre)
+  const raw = (pre.textContent ?? '').replace(/\n$/, '')
+  return `\n\n\`\`\`${lang}\n${raw}\n\`\`\`\n\n`
+}
+
+function serializeInlineCode(node: HTMLElement): string {
+  const content = node.textContent ?? ''
+  if (content.includes('`')) return `\`\` ${content} \`\``
+  return `\`${content}\``
+}
+
+/** http(s)/mailto only; drops `#`, empty, and `javascript:` hrefs. */
+function isSafeHref(href: string): boolean {
+  return /^(https?:|mailto:)/i.test(href)
+}
+
+function serializeAnchor(node: HTMLElement, depth: number): string {
+  const href = node.getAttribute('href') ?? ''
+  const label = serializeChildren(node, depth).trim()
+  if (!isSafeHref(href)) return label
+  if (!label || label === href) return href
+  return `[${label}](${href})`
+}
+
+function serializeImage(node: HTMLElement): string {
+  const src = node.getAttribute('src') ?? ''
+  // Gate the src through the same allow-list as anchors: only http(s)/mailto
+  // survive, so a `javascript:`/`vbscript:`/`data:` src never reaches the
+  // emitted markdown (defense-in-depth for consumers that render it as HTML).
+  if (!src || !isSafeHref(src)) return ''
+  return `![${node.getAttribute('alt') ?? ''}](${src})`
+}
+
+function serializeBlockquote(node: HTMLElement, depth: number): string {
+  const inner = serializeChildren(node, depth).trim()
+  const quoted = inner
+    .split('\n')
+    .map((line) => (line ? `> ${line}` : '>'))
+    .join('\n')
+  return `\n\n${quoted}\n\n`
+}
+
+/**
+ * Serializes a `<ul>`/`<ol>` at nesting `depth` (0 = top level). Each `<li>`'s
+ * own inline content becomes the marker line; a nested `<ul>`/`<ol>` child is
+ * serialized at `depth + 1` and appended indented below its parent item.
+ */
+function serializeList(list: HTMLElement, depth: number): string {
+  const ordered = list.tagName === 'OL'
+  const start = Number.parseInt(list.getAttribute('start') ?? '', 10)
+  let index = Number.isNaN(start) ? 1 : start
+  const indent = '  '.repeat(depth)
+  const lines: string[] = []
+
+  for (const child of Array.from(list.childNodes)) {
+    if (!isHTMLElement(child) || child.tagName !== 'LI') continue
+
+    const marker = ordered ? `${index}. ` : '- '
+    index++
+
+    let label = ''
+    let nested = ''
+    for (const liChild of Array.from(child.childNodes)) {
+      if (isHTMLElement(liChild) && (liChild.tagName === 'UL' || liChild.tagName === 'OL')) {
+        nested += `\n${serializeList(liChild, depth + 1)}`
+      } else {
+        label += serializeNode(liChild, depth)
+      }
+    }
+    lines.push(`${indent}${marker}${label.trim()}${nested}`)
+  }
+
+  return lines.join('\n')
+}
+
+function serializeTable(table: HTMLElement, depth: number): string {
+  const rows = Array.from(table.querySelectorAll('tr'))
+  if (rows.length === 0) return ''
+
+  const cells = rows.map((row) =>
+    Array.from(row.children)
+      .filter((cell) => cell.tagName === 'TD' || cell.tagName === 'TH')
+      .map((cell) =>
+        serializeChildren(cell, depth).replace(/\n+/g, ' ').replace(/\|/g, '\\|').trim(),
+      ),
+  )
+
+  const header = cells[0]
+  const separator = header.map(() => '---')
+  const toRow = (row: string[]): string => `| ${row.join(' | ')} |`
+
+  return [toRow(header), toRow(separator), ...cells.slice(1).map(toRow)].join('\n')
+}
+
+// ---------------------------------------------------------------------------
+// Recursive walker
+// ---------------------------------------------------------------------------
+
+function serializeChildren(node: Node, depth: number): string {
+  let out = ''
+  node.childNodes.forEach((child) => {
+    out += serializeNode(child, depth)
+  })
+  return out
+}
+
+function serializeNode(node: Node, depth: number): string {
+  if (isTextNode(node)) return escapeText(collapseWhitespace(node.textContent ?? ''))
+  if (!isHTMLElement(node)) return ''
+
+  const tag = node.tagName
+  switch (tag) {
+    case 'SCRIPT':
+    case 'STYLE':
+    case 'NOSCRIPT':
+    case 'HEAD':
+    case 'TITLE':
+      return ''
+    case 'BR':
+      return '\n'
+    case 'HR':
+      return '\n\n---\n\n'
+    case 'H1':
+    case 'H2':
+    case 'H3':
+    case 'H4':
+    case 'H5':
+    case 'H6':
+      return `\n\n${'#'.repeat(Number(tag[1]))} ${serializeChildren(node, depth).trim()}\n\n`
+    case 'P':
+      return `\n\n${serializeChildren(node, depth).trim()}\n\n`
+    case 'DIV':
+      return `\n${serializeChildren(node, depth).trim()}\n`
+    case 'BLOCKQUOTE':
+      return serializeBlockquote(node, depth)
+    case 'UL':
+    case 'OL':
+      return `\n\n${serializeList(node, depth)}\n\n`
+    case 'LI':
+      // A stray <li> outside a list wrapper — emit its content as a line.
+      return `${serializeChildren(node, depth).trim()}\n`
+    case 'PRE':
+      return serializePre(node)
+    case 'CODE':
+      // Inline code only: <pre> handles its own <code> via textContent.
+      return serializeInlineCode(node)
+    case 'A':
+      return serializeAnchor(node, depth)
+    case 'IMG':
+      return serializeImage(node)
+    case 'TABLE':
+      return `\n\n${serializeTable(node, depth)}\n\n`
+    default: {
+      // Inline emphasis (B/STRONG/I/EM/S/DEL + styled SPAN/FONT) and the
+      // "span soup" unwrap case both resolve here: emphasis markers when the
+      // tag or inline style is meaningful, otherwise a bare unwrap.
+      const { prefix, suffix } = inlineEmphasis(node)
+      return prefix + serializeChildren(node, depth) + suffix
+    }
+  }
+}
+
+// ---------------------------------------------------------------------------
+// Output normalization
+// ---------------------------------------------------------------------------
+
+/** Trims trailing spaces and caps consecutive blank lines at one. */
+function normalizeOutput(markdown: string): string {
+  return markdown
+    .replace(/[ \t]+\n/g, '\n')
+    .replace(/\n[ \t]*\n[ \t\n]*/g, '\n\n')
+    .trim()
+}
+
+// ---------------------------------------------------------------------------
+// Public API
+// ---------------------------------------------------------------------------
+
+/**
+ * Converts an HTML string to markdown source text. Returns '' for empty or
+ * body-less input. Block markdown (headings, lists, quotes, fences, tables,
+ * links) is emitted as literal markdown text — that is the editor's intended
+ * display; only `*`/`**`/`***` and bare URLs get visually decorated inline.
+ */
+export function htmlToMarkdown(html: string): string {
+  if (!html) return ''
+  const doc = new DOMParser().parseFromString(html, 'text/html')
+  if (!doc.body) return ''
+  return normalizeOutput(serializeChildren(doc.body, 0))
+}

package/src/components/prompt-area/image-strip.tsx

@@ -0,0 +1,49 @@
+'use client'
+
+import { cn } from '../../lib/utils.ts'
+import { RemoveButton } from './remove-button.tsx'
+import type { PromptAreaImage } from './types.ts'
+
+type ImageStripProps = {
+  images: PromptAreaImage[]
+  onRemove?: (image: PromptAreaImage) => void
+  onClick?: (image: PromptAreaImage) => void
+  className?: string
+}
+
+export function ImageStrip({ images, onRemove, onClick, className }: ImageStripProps) {
+  if (images.length === 0) return null
+
+  return (
+    <div className={cn('flex flex-wrap gap-2', className)} role="list" aria-label="Attached images">
+      {images.map((image) => (
+        <div
+          key={image.id}
+          role="listitem"
+          className={cn(
+            'border-border relative h-16 w-16 flex-shrink-0 overflow-hidden rounded-md border',
+            onClick && 'cursor-pointer',
+          )}
+          onClick={() => onClick?.(image)}>
+          {/* eslint-disable-next-line @next/next/no-img-element -- registry component used outside Next.js */}
+          <img
+            src={image.url}
+            alt={image.alt ?? 'Attached image'}
+            className="h-full w-full object-cover"
+          />
+          {image.loading && (
+            <div className="absolute inset-0 flex items-center justify-center bg-black/40">
+              <div className="h-4 w-4 animate-spin rounded-full border-2 border-white border-t-transparent" />
+            </div>
+          )}
+          {onRemove && (
+            <RemoveButton
+              onClick={() => onRemove(image)}
+              label={`Remove ${image.alt ?? 'image'}`}
+            />
+          )}
+        </div>
+      ))}
+    </div>
+  )
+}

package/src/components/prompt-area/index.ts

@@ -0,0 +1,23 @@
+/**
+ * Vendored from just-marketing/prompt-area (MIT) via its shadcn registry, so the
+ * popover/chips can be themed with this package's tokens. Upstream:
+ * https://github.com/just-marketing/prompt-area
+ */
+export { PromptArea } from './prompt-area.tsx'
+export { usePromptAreaState } from './use-prompt-area-state.ts'
+export { commandTrigger, mentionTrigger, hashtagTrigger } from './trigger-presets.ts'
+export {
+  segmentsToPlainText,
+  plainTextToSegments,
+  isSegmentsEmpty,
+  getChipsByTrigger,
+} from './segment-helpers.ts'
+export type {
+  PromptAreaHandle,
+  PromptAreaProps,
+  Segment,
+  ChipSegment,
+  TextSegment,
+  TriggerConfig,
+  TriggerSuggestion,
+} from './types.ts'