@workerdeck/ui 0.22.0 → 1.0.0

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

@@ -21,7 +21,8 @@ function Svg({ className, children }: IconProps & { children: React.ReactNode })
       strokeLinecap="round"
       strokeLinejoin="round"
       aria-hidden="true"
-      className={className}>
+      className={className}
+    >
       {children}
     </svg>
   )
@@ -34,38 +35,48 @@ const FileBody = (
   </>
 )
 
-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>
-)
+function File({ className }: IconProps) {
+  return <Svg className={className}>{FileBody}</Svg>
+}
+function FileText({ className }: IconProps) {
+  return (
+    <Svg className={className}>
+      {FileBody}
+      <path d="M10 9H8" />
+      <path d="M16 13H8" />
+      <path d="M16 17H8" />
+    </Svg>
+  )
+}
+function FileSpreadsheet({ className }: IconProps) {
+  return (
+    <Svg className={className}>
+      {FileBody}
+      <path d="M8 13h2" />
+      <path d="M14 13h2" />
+      <path d="M8 17h2" />
+      <path d="M14 17h2" />
+    </Svg>
+  )
+}
+function FileCode({ className }: IconProps) {
+  return (
+    <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>
+  )
+}
+function ImageIcon({ className }: IconProps) {
+  return (
+    <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[]
@@ -79,17 +90,21 @@ 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')
-  )
+  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'
+  }
+  if (type.startsWith('image/')) {
+    return 'image'
+  }
   return 'default'
 }
 
@@ -103,16 +118,24 @@ const FILE_ICONS = {
 
 /** 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`
+  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
+  if (dot === -1 || dot === name.length - 1) {
+    return null
+  }
   return name.slice(dot + 1).toUpperCase()
 }
 
@@ -140,19 +163,14 @@ function FileCard({
         compact ? 'h-10 w-36 px-2' : 'h-14 w-48 px-3',
         onClick && 'cursor-pointer',
       )}
-      onClick={() => onClick?.(file)}>
+      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')}
-          />
-        )
+        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}>
+        <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>}
@@ -175,15 +193,15 @@ export function FileStrip({ files, onRemove, onClick, className }: FileStripProp
   const toggleRef = useRef<HTMLButtonElement>(null)
 
   useEffect(() => {
-    if (!expanded) return
+    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)
-      ) {
+      if (!(target instanceof Node)) {
+        return
+      }
+      if (popoverRef.current && !popoverRef.current.contains(target) && !toggleRef.current?.contains(target)) {
         setExpanded(false)
       }
     }
@@ -191,7 +209,9 @@ export function FileStrip({ files, onRemove, onClick, className }: FileStripProp
     return () => document.removeEventListener('mousedown', handleClick)
   }, [expanded])
 
-  if (files.length === 0) return null
+  if (files.length === 0) {
+    return null
+  }
 
   const collapsible = files.length > COLLAPSE_THRESHOLD
   const compact = collapsible
@@ -202,13 +222,7 @@ export function FileStrip({ files, onRemove, onClick, className }: FileStripProp
     <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}
-          />
+          <FileCard key={file.id} file={file} compact={compact} onRemove={onRemove} onClick={onClick} />
         ))}
         {collapsible && (
           <div role="listitem">
@@ -219,7 +233,8 @@ export function FileStrip({ files, onRemove, onClick, className }: FileStripProp
               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>
@@ -231,16 +246,11 @@ export function FileStrip({ files, onRemove, onClick, className }: FileStripProp
           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}
-              />
+              <FileCard key={file.id} file={file} compact={compact} onRemove={onRemove} onClick={onClick} />
             ))}
           </div>
         </div>

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

@@ -14,9 +14,7 @@
  */
 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 {
@@ -26,7 +24,9 @@ function getStyleValue(style: string, prop: string): string {
 
 /** Whether a CSS font-weight value is bold (`bold`, `bolder`, or >= 600). */
 function isBoldWeight(value: string): boolean {
-  if (value === 'bold' || value === 'bolder') return true
+  if (value === 'bold' || value === 'bolder') {
+    return true
+  }
   const numeric = Number.parseInt(value, 10)
   return !Number.isNaN(numeric) && numeric >= 600
 }
@@ -45,22 +45,17 @@ function inlineEmphasis(node: HTMLElement): { prefix: string; suffix: string } {
   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 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 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. ` ` -> U+00A0) to single spaces. */
 function collapseWhitespace(text: string): string {
@@ -72,16 +67,16 @@ 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]
+  if (fromClass) {
+    return fromClass[1]
+  }
   return pre.getAttribute('lang') ?? code?.getAttribute('lang') ?? ''
 }
 
@@ -93,7 +88,9 @@ function serializePre(pre: HTMLElement): string {
 
 function serializeInlineCode(node: HTMLElement): string {
   const content = node.textContent ?? ''
-  if (content.includes('`')) return `\`\` ${content} \`\``
+  if (content.includes('`')) {
+    return `\`\` ${content} \`\``
+  }
   return `\`${content}\``
 }
 
@@ -105,8 +102,12 @@ function isSafeHref(href: string): boolean {
 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
+  if (!isSafeHref(href)) {
+    return label
+  }
+  if (!label || label === href) {
+    return href
+  }
   return `[${label}](${href})`
 }
 
@@ -115,7 +116,9 @@ function serializeImage(node: HTMLElement): string {
   // 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 ''
+  if (!src || !isSafeHref(src)) {
+    return ''
+  }
   return `![${node.getAttribute('alt') ?? ''}](${src})`
 }
 
@@ -141,7 +144,9 @@ function serializeList(list: HTMLElement, depth: number): string {
   const lines: string[] = []
 
   for (const child of Array.from(list.childNodes)) {
-    if (!isHTMLElement(child) || child.tagName !== 'LI') continue
+    if (!isHTMLElement(child) || child.tagName !== 'LI') {
+      continue
+    }
 
     const marker = ordered ? `${index}. ` : '- '
     index++
@@ -163,14 +168,14 @@ function serializeList(list: HTMLElement, depth: number): string {
 
 function serializeTable(table: HTMLElement, depth: number): string {
   const rows = Array.from(table.querySelectorAll('tr'))
-  if (rows.length === 0) return ''
+  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(),
-      ),
+      .map((cell) => serializeChildren(cell, depth).replace(/\n+/g, ' ').replace(/\|/g, '\\|').trim()),
   )
 
   const header = cells[0]
@@ -180,9 +185,7 @@ function serializeTable(table: HTMLElement, depth: number): string {
   return [toRow(header), toRow(separator), ...cells.slice(1).map(toRow)].join('\n')
 }
 
-// ---------------------------------------------------------------------------
 // Recursive walker
-// ---------------------------------------------------------------------------
 
 function serializeChildren(node: Node, depth: number): string {
   let out = ''
@@ -193,8 +196,12 @@ function serializeChildren(node: Node, depth: number): string {
 }
 
 function serializeNode(node: Node, depth: number): string {
-  if (isTextNode(node)) return escapeText(collapseWhitespace(node.textContent ?? ''))
-  if (!isHTMLElement(node)) return ''
+  if (isTextNode(node)) {
+    return escapeText(collapseWhitespace(node.textContent ?? ''))
+  }
+  if (!isHTMLElement(node)) {
+    return ''
+  }
 
   const tag = node.tagName
   switch (tag) {
@@ -202,42 +209,56 @@ function serializeNode(node: Node, depth: number): string {
     case 'STYLE':
     case 'NOSCRIPT':
     case 'HEAD':
-    case 'TITLE':
+    case 'TITLE': {
       return ''
-    case 'BR':
+    }
+    case 'BR': {
       return '\n'
-    case 'HR':
+    }
+    case 'HR': {
       return '\n\n---\n\n'
+    }
     case 'H1':
     case 'H2':
     case 'H3':
     case 'H4':
     case 'H5':
-    case 'H6':
+    case 'H6': {
       return `\n\n${'#'.repeat(Number(tag[1]))} ${serializeChildren(node, depth).trim()}\n\n`
-    case 'P':
+    }
+    case 'P': {
       return `\n\n${serializeChildren(node, depth).trim()}\n\n`
-    case 'DIV':
+    }
+    case 'DIV': {
       return `\n${serializeChildren(node, depth).trim()}\n`
-    case 'BLOCKQUOTE':
+    }
+    case 'BLOCKQUOTE': {
       return serializeBlockquote(node, depth)
+    }
     case 'UL':
-    case 'OL':
+    case 'OL': {
       return `\n\n${serializeList(node, depth)}\n\n`
-    case 'LI':
+    }
+    case 'LI': {
       // A stray <li> outside a list wrapper — emit its content as a line.
       return `${serializeChildren(node, depth).trim()}\n`
-    case 'PRE':
+    }
+    case 'PRE': {
       return serializePre(node)
-    case 'CODE':
+    }
+    case 'CODE': {
       // Inline code only: <pre> handles its own <code> via textContent.
       return serializeInlineCode(node)
-    case 'A':
+    }
+    case 'A': {
       return serializeAnchor(node, depth)
-    case 'IMG':
+    }
+    case 'IMG': {
       return serializeImage(node)
-    case 'TABLE':
+    }
+    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
@@ -248,9 +269,7 @@ function serializeNode(node: Node, depth: number): string {
   }
 }
 
-// ---------------------------------------------------------------------------
 // Output normalization
-// ---------------------------------------------------------------------------
 
 /** Trims trailing spaces and caps consecutive blank lines at one. */
 function normalizeOutput(markdown: string): string {
@@ -260,9 +279,7 @@ function normalizeOutput(markdown: string): string {
     .trim()
 }
 
-// ---------------------------------------------------------------------------
 // Public API
-// ---------------------------------------------------------------------------
 
 /**
  * Converts an HTML string to markdown source text. Returns '' for empty or
@@ -271,8 +288,12 @@ function normalizeOutput(markdown: string): string {
  * display; only `*`/`**`/`***` and bare URLs get visually decorated inline.
  */
 export function htmlToMarkdown(html: string): string {
-  if (!html) return ''
+  if (!html) {
+    return ''
+  }
   const doc = new DOMParser().parseFromString(html, 'text/html')
-  if (!doc.body) return ''
+  if (!doc.body) {
+    return ''
+  }
   return normalizeOutput(serializeChildren(doc.body, 0))
 }

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

@@ -12,7 +12,9 @@ type ImageStripProps = {
 }
 
 export function ImageStrip({ images, onRemove, onClick, className }: ImageStripProps) {
-  if (images.length === 0) return null
+  if (images.length === 0) {
+    return null
+  }
 
   return (
     <div className={cn('flex flex-wrap gap-2', className)} role="list" aria-label="Attached images">
@@ -20,28 +22,16 @@ export function ImageStrip({ images, onRemove, onClick, className }: ImageStripP
         <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"
-          />
+          className={cn('border-border relative h-16 w-16 flex-shrink-0 overflow-hidden rounded-md border', onClick && 'cursor-pointer')}
+          onClick={() => onClick?.(image)}
+        >
+          <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'}`}
-            />
-          )}
+          {onRemove && <RemoveButton onClick={() => onRemove(image)} label={`Remove ${image.alt ?? 'image'}`} />}
         </div>
       ))}
     </div>

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

@@ -6,18 +6,5 @@
 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'
+export { segmentsToPlainText, plainTextToSegments, isSegmentsEmpty, getChipsByTrigger } from './segment-helpers.ts'
+export type { PromptAreaHandle, PromptAreaProps, Segment, ChipSegment, TextSegment, TriggerConfig, TriggerSuggestion } from './types.ts'