@workerdeck/ui 2.15.0 → 3.1.0

package/src/components/prompt-area/prompt-area-list-ops.ts

@@ -304,28 +304,25 @@ export function normalizeListPrefixText(text: string, markdownEnabled: boolean):
  * preserved, while an unterminated fence does not suppress later bullets.
  */
 export function normalizeListPrefixes(segments: Segment[], markdownEnabled: boolean): Segment[] {
-  const globalLines: string[] = []
-  segments.forEach((seg) => {
-    if (seg.type === 'text') {
-      globalLines.push(...seg.text.split('\n'))
-    }
-  })
-  const protectedLines = fenceProtectedLineIndices(globalLines)
+  const protectedLines = fenceProtectedLineIndices(segmentsToPlainText(segments).split('\n'))
 
-  let globalIndex = 0
+  let line = 0
+  // A chip is inline, so text right after one continues its line rather than starting a new one.
+  let atLineStart = true
   let changed = false
   const result = segments.map((seg) => {
     if (seg.type !== 'text') {
+      atLineStart = false
       return seg
     }
-    const newText = seg.text
-      .split('\n')
-      .map((line) => {
-        const out = protectedLines.has(globalIndex) ? line : swapListPrefixLine(line, markdownEnabled)
-        globalIndex++
-        return out
-      })
+    const pieces = seg.text.split('\n')
+    const newText = pieces
+      .map((piece, k) => ((k > 0 || atLineStart) && !protectedLines.has(line + k) ? swapListPrefixLine(piece, markdownEnabled) : piece))
       .join('\n')
+    line += pieces.length - 1
+    if (pieces.length > 1 || seg.text !== '') {
+      atLineStart = pieces[pieces.length - 1] === ''
+    }
     if (newText === seg.text) {
       return seg
     }

package/src/components/prompt-area/use-prompt-area-keydown.ts

@@ -383,10 +383,12 @@ export function usePromptAreaKeydown({
         const launcher = triggers.find((t) => t.mode === 'launch' && t.char === e.key)
         const editor = editorRef.current
         if (launcher?.onActivate && editor) {
-          const cursorPos = getCursorOffset(editor)
-          if (cursorPos !== null) {
+          const caret = getCursorOffset(editor)
+          if (caret !== null) {
             const segments = readSegmentsFromDOM()
             const plainText = segmentsToPlainText(segments)
+            // An emptied editor keeps the browser's filler <br>: the reader drops it, the caret count does not.
+            const cursorPos = Math.min(caret, plainText.length)
             if (isValidTriggerPosition(plainText, cursorPos, launcher.position)) {
               e.preventDefault()
               launcher.onActivate({

package/src/components/terminal/PermissionPrompt.tsx

@@ -1,7 +1,8 @@
 import { useState } from 'react'
 import type { PermissionRequest } from '@workerdeck/protocol'
 import { toolInputPreview } from '../../lib/format.ts'
-import { planFromRequest } from '../../lib/plan-request.ts'
+import { permissionPromptModel } from '../../lib/permission-prompt.ts'
+import { shellRequestLines } from '../../lib/shell-request.ts'
 import { TerminalDiff, previewPatch } from './diff.tsx'
 import { TerminalMarkdown } from './markdown.tsx'
 import { Choices, Hint, PromptInput, PromptTitle, Rule } from './prompt.tsx'
@@ -28,10 +29,10 @@ export function TerminalPermissionPrompt({ request, onApprove, onDeny, className
     setDenying(false)
   }
 
-  const plan = planFromRequest(request)
-  const patch = plan ? undefined : previewPatch(request.input)
-  const summary = plan ? '' : toolInputPreview(request.input)
-  const heading = plan ? 'Plan ready for review' : (request.displayName ?? request.title ?? 'Permission needed')
+  const model = permissionPromptModel(request)
+  const { plan, shell, heading } = model
+  const patch = plan || shell ? undefined : previewPatch(request.input)
+  const summary = plan || shell ? '' : toolInputPreview(request.input)
   const subject = patch?.path ?? (summary || undefined)
 
   const reasonInput = denying ? (
@@ -40,25 +41,16 @@ export function TerminalPermissionPrompt({ request, onApprove, onDeny, className
       onChange={setReason}
       onSubmit={() => deny(false)}
       onCancel={() => setDenying(false)}
-      placeholder={
-        plan
-          ? 'What should change? (optional) - the agent keeps planning and reads this'
-          : 'Reason (optional) - the agent reads this and can try something else'
-      }
+      placeholder={model.denyPlaceholder}
     />
   ) : undefined
 
-  const options = plan
-    ? [
-        { key: 'allow', label: 'Approve plan' },
-        { key: 'deny', label: 'Keep planning - tell it what to change', detail: reasonInput },
-        { key: 'stop', label: 'No, and stop the turn', danger: true },
-      ]
-    : [
-        { key: 'allow', label: 'Yes' },
-        { key: 'deny', label: 'No, and tell the agent what to do differently', detail: reasonInput },
-        { key: 'stop', label: 'No, and stop the turn', danger: true },
-      ]
+  const options = model.choices.map((choice) => ({
+    key: choice.key,
+    label: choice.option,
+    danger: choice.danger,
+    detail: choice.key === 'deny' ? reasonInput : undefined,
+  }))
 
   return (
     <div
@@ -82,20 +74,30 @@ export function TerminalPermissionPrompt({ request, onApprove, onDeny, className
           <Blank />
           <Rule dashed />
         </>
+      ) : shell ? (
+        <>
+          {shellRequestLines(shell).map((line, index) => (
+            <Row key={index} bold>
+              {line}
+            </Row>
+          ))}
+          <Blank />
+          <Rule dashed />
+        </>
       ) : patch ? (
         <>
           <TerminalDiff patch={patch} />
           <Blank />
           <Rule dashed />
         </>
-      ) : request.description ? (
+      ) : model.description ? (
         <>
-          <Row tone="dim">{request.description}</Row>
+          <Row tone="dim">{model.description}</Row>
           <Blank />
         </>
       ) : null}
-      {request.decisionReason ? <Row tone="faint">{request.decisionReason}</Row> : null}
-      <Row>{plan ? 'Ready to implement this plan?' : (request.title ?? `Do you want to proceed?`)}</Row>
+      {model.decisionReason ? <Row tone="faint">{model.decisionReason}</Row> : null}
+      <Row>{model.question}</Row>
       <Choices
         label={heading}
         options={options}
@@ -103,11 +105,12 @@ export function TerminalPermissionPrompt({ request, onApprove, onDeny, className
         onFocus={setFocused}
         active={!denying}
         onChoose={(index) => {
-          if (index === 0) {
+          const key = model.choices[index]?.key
+          if (key === 'allow') {
             onApprove(request.id)
-          } else if (index === 1) {
+          } else if (key === 'deny') {
             setDenying(true)
-          } else {
+          } else if (key === 'stop') {
             deny(true)
           }
         }}

package/src/components/terminal/QuestionPrompt.tsx

@@ -1,21 +1,10 @@
 import { useState } from 'react'
 import type { PermissionRequest, UserQuestion } from '@workerdeck/protocol'
 import { parseUserQuestions } from '../agent/QuestionPrompt.tsx'
+import { answerFor, useQuestionAnswers, type Selection } from '../../lib/question-answers.ts'
 import { Box, Choices, Hint, PromptInput, Rule, TabStrip, type Choice } from './prompt.tsx'
 import { Blank, Ink, Row } from './row.tsx'
 
-type Selection = { labels: string[]; other: string; otherActive: boolean }
-
-const EMPTY: Selection = { labels: [], other: '', otherActive: false }
-
-function answerFor(selection: Selection): string {
-  const parts = [...selection.labels]
-  if (selection.otherActive && selection.other.trim()) {
-    parts.push(selection.other.trim())
-  }
-  return parts.join(', ')
-}
-
 export interface TerminalQuestionPromptProps {
   request: PermissionRequest
   onAnswer: (requestId: string, updatedInput: Record<string, unknown>) => void
@@ -25,43 +14,15 @@ export interface TerminalQuestionPromptProps {
 
 export function TerminalQuestionPrompt({ request, onAnswer, onDismiss, className }: TerminalQuestionPromptProps) {
   const questions = parseUserQuestions(request.input)
-  const [selections, setSelections] = useState<Selection[]>(() => questions.map(() => EMPTY))
+  const { selectionFor, answered, complete, update, toggle, toggleOther, answers } = useQuestionAnswers(questions)
   const [cursors, setCursors] = useState<number[]>(() => questions.map(() => 0))
   const [tab, setTab] = useState(0)
   const [reviewCursor, setReviewCursor] = useState(0)
 
   const review = tab >= questions.length
-  const selection = selections[tab] ?? EMPTY
-  const answered = (index: number) => answerFor(selections[index] ?? EMPTY) !== ''
-  const complete = questions.every((_, index) => answered(index))
-
-  const update = (index: number, patch: Partial<Selection>) =>
-    setSelections((prev) => prev.map((s, i) => (i === index ? { ...s, ...patch } : s)))
-
-  const toggle = (index: number, label: string, multiSelect: boolean) => {
-    setSelections((prev) =>
-      prev.map((current, i) => {
-        if (i !== index) {
-          return current
-        }
-        if (!multiSelect) {
-          return { ...current, labels: [label], otherActive: false }
-        }
-        return {
-          ...current,
-          labels: current.labels.includes(label) ? current.labels.filter((l) => l !== label) : [...current.labels, label],
-        }
-      }),
-    )
-  }
+  const selection = selectionFor(tab)
 
-  const submit = () => {
-    const answers: Record<string, string> = {}
-    questions.forEach((question, index) => {
-      answers[question.question] = answerFor(selections[index] ?? EMPTY)
-    })
-    onAnswer(request.id, { ...request.input, answers })
-  }
+  const submit = () => onAnswer(request.id, { ...request.input, answers: answers() })
 
   const dismiss = () => onDismiss(request.id, 'Question dismissed by user')
 
@@ -100,7 +61,7 @@ export function TerminalQuestionPrompt({ request, onAnswer, onDismiss, className
       {review ? (
         <ReviewStep
           questions={questions}
-          answers={questions.map((_, index) => answerFor(selections[index] ?? EMPTY))}
+          answers={questions.map((_, index) => answerFor(selectionFor(index)))}
           complete={complete}
           cursor={reviewCursor}
           onCursor={setReviewCursor}
@@ -115,8 +76,9 @@ export function TerminalQuestionPrompt({ request, onAnswer, onDismiss, className
           selection={selection}
           cursor={cursors[tab] ?? 0}
           onCursor={(next) => setCursors((prev) => prev.map((c, i) => (i === tab ? next : c)))}
-          onToggle={(label) => toggle(tab, label, questions[tab]!.multiSelect === true)}
+          onToggle={(label) => toggle(tab, label)}
           onOther={(patch) => update(tab, patch)}
+          onToggleOther={() => toggleOther(tab)}
           onAdvance={() => move(1)}
           onDismiss={dismiss}
         />
@@ -138,6 +100,7 @@ function QuestionStep({
   onCursor,
   onToggle,
   onOther,
+  onToggleOther,
   onAdvance,
   onDismiss,
 }: {
@@ -147,6 +110,7 @@ function QuestionStep({
   onCursor: (index: number) => void
   onToggle: (label: string) => void
   onOther: (patch: Partial<Selection>) => void
+  onToggleOther: () => void
   onAdvance: () => void
   onDismiss: () => void
 }) {
@@ -214,7 +178,7 @@ function QuestionStep({
             return
           }
           if (index === question.options.length) {
-            onOther({ otherActive: !selection.otherActive })
+            onToggleOther()
             return
           }
           if (multiSelect && index === question.options.length + 1) {

package/src/components/terminal/TerminalTranscript.tsx

@@ -1,8 +1,7 @@
-import { Fragment, useEffect, useMemo, useState } from 'react'
-import type { TranscriptItem, TranscriptState } from '@workerdeck/react'
+import { Fragment, useMemo, useState } from 'react'
+import type { TranscriptItem } from '@workerdeck/react'
 import { cn } from '../../lib/utils.ts'
-import type { TerminalAffordances } from './affordances.tsx'
-import { OpenSubagentAction, WithActions } from './affordances.tsx'
+import { ActionPlacementProvider, OpenSubagentAction, WithActions } from './affordances.tsx'
 import {
   AssistantRow,
   CompactionRow,
@@ -15,30 +14,26 @@ import {
   ToolRow,
   TurnResultRow,
   UserRow,
-  WorkingRow,
 } from './items.tsx'
-import { blockNeedsBlank, taskChildItems, terminalBlocks, type TaskBlock } from './blocks.ts'
+import { blockNeedsBlank, taskChildItems, type TaskBlock } from './blocks.ts'
 import { usePulse } from '../agent/pulse.tsx'
-import { PeerNamesProvider } from './peer-names.tsx'
 import { Pressable, useRevealOnOpen } from './press.tsx'
 import { isPeerSend, taskBrief, taskBusy, taskFailed, taskSummary } from './tool-run.ts'
 import { BRIEF_LINES } from './height.ts'
 import { Blank, Row } from './row.tsx'
-import { TerminalSurface } from './surface.tsx'
 
-export interface TerminalTranscriptProps {
-  state: TranscriptState
+export function TerminalItemView({
+  item,
+  fileUrl,
+  attachmentUrl,
+}: {
+  item: TranscriptItem
   fileUrl?: (path: string) => string
-  fontSize?: number
-  lineHeight?: number
-  affordances?: TerminalAffordances | boolean
-  className?: string
-}
-
-export function TerminalItemView({ item, fileUrl }: { item: TranscriptItem; fileUrl?: (path: string) => string }) {
+  attachmentUrl?: (attachmentId: string) => string
+}) {
   switch (item.kind) {
     case 'user': {
-      return <UserRow item={item} />
+      return <UserRow item={item} attachmentUrl={attachmentUrl} />
     }
     case 'assistant_text': {
       return <AssistantRow item={item} />
@@ -122,12 +117,16 @@ export function TaskRow({
       {open ? (
         <div className="term-nested">
           {brief ? <BriefRow text={brief} terminal /> : null}
-          {block.children.map((leaf, index) => (
-            <Fragment key={leaf.key}>
-              {index > 0 && blockNeedsBlank(block.children[index - 1]!, leaf) ? <Blank /> : null}
-              {'run' in leaf ? <RunRow items={leaf.run} /> : <TerminalItemView item={leaf.item} fileUrl={fileUrl} />}
-            </Fragment>
-          ))}
+          {block.children.map((leaf, index) => {
+            const next = block.children[index + 1]
+            const view = 'run' in leaf ? <RunRow items={leaf.run} /> : <TerminalItemView item={leaf.item} fileUrl={fileUrl} />
+            return (
+              <Fragment key={leaf.key}>
+                {index > 0 && blockNeedsBlank(block.children[index - 1]!, leaf) ? <Blank /> : null}
+                {next && !blockNeedsBlank(leaf, next) ? <ActionPlacementProvider value="inline">{view}</ActionPlacementProvider> : view}
+              </Fragment>
+            )
+          })}
         </div>
       ) : null}
     </div>
@@ -138,68 +137,3 @@ export function TaskRow({
     <WithActions actions={<OpenSubagentAction onOpen={() => onOpenSubagent(block.task.id)} />}>{row}</WithActions>
   )
 }
-
-function useRunStart(status: TranscriptState['status']): number | undefined {
-  const running = status === 'running' || status === 'starting'
-  const [startedAt, setStartedAt] = useState<number | undefined>(undefined)
-  useEffect(() => {
-    setStartedAt((previous) => (running ? (previous ?? Date.now()) : undefined))
-  }, [running])
-  return running ? startedAt : undefined
-}
-
-function working(state: TranscriptState): boolean {
-  if (state.status !== 'running' && state.status !== 'starting') {
-    return false
-  }
-  const last = state.items.at(-1)
-  if (!last) {
-    return true
-  }
-  if (last.kind === 'assistant_text' && last.streaming) {
-    return false
-  }
-  if (last.kind === 'thinking' && last.id === 'streaming-thinking') {
-    return false
-  }
-  return true
-}
-
-export function TerminalTranscript({ state, fileUrl, fontSize, lineHeight, affordances, className }: TerminalTranscriptProps) {
-  const runStartedAt = useRunStart(state.status)
-  const blocks = useMemo(() => terminalBlocks(state.items), [state.items])
-  return (
-    <TerminalSurface
-      fontSize={fontSize}
-      lineHeight={lineHeight}
-      affordances={affordances}
-      bleed="1ch"
-      className={cn('term-transcript', className)}
-    >
-      <PeerNamesProvider items={state.items}>
-        {blocks.map((block, index) => (
-          <Fragment key={block.key}>
-            {index > 0 && blockNeedsBlank(blocks[index - 1]!, block) ? <Blank /> : null}
-            {'run' in block ? (
-              <RunRow items={block.run} />
-            ) : 'item' in block ? (
-              <TerminalItemView item={block.item} fileUrl={fileUrl} />
-            ) : (
-              <TaskRow block={block} fileUrl={fileUrl} />
-            )}
-          </Fragment>
-        ))}
-        {working(state) ? (
-          <>
-            {state.items.length > 0 ? <Blank /> : null}
-            <WorkingRow
-              label={state.status === 'starting' ? 'Starting…' : 'Working…'}
-              startedAt={runStartedAt}
-              tokens={state.contextUsage?.totalTokens}
-            />
-          </>
-        ) : null}
-      </PeerNamesProvider>
-    </TerminalSurface>
-  )
-}

package/src/components/terminal/affordances.tsx

@@ -1,14 +1,15 @@
+import { Bot, BotOff, Check, Copy, Maximize2, SquareTerminal, Star, X, type LucideIcon } from 'lucide-react'
 import { createContext, useContext, useState, type ReactNode } from 'react'
 import { copyText } from '../../lib/clipboard.ts'
-import { SHELL_KILL_GLYPH } from './shell-row.ts'
 import { cn } from '../../lib/utils.ts'
 
 export type TerminalAffordances = {
   hover?: boolean
   actions?: boolean
+  labels?: boolean
 }
 
-const DEFAULTS: Required<TerminalAffordances> = { hover: true, actions: true }
+const DEFAULTS: Required<TerminalAffordances> = { hover: true, actions: true, labels: false }
 
 const AffordanceContext = createContext<Required<TerminalAffordances>>(DEFAULTS)
 
@@ -18,7 +19,7 @@ export function useAffordances(): Required<TerminalAffordances> {
 
 export function resolveAffordances(value: TerminalAffordances | boolean | undefined): Required<TerminalAffordances> {
   if (value === false) {
-    return { hover: false, actions: false }
+    return { hover: false, actions: false, labels: false }
   }
   if (value === true || value === undefined) {
     return DEFAULTS
@@ -30,22 +31,79 @@ export function AffordanceProvider({ value, children }: { value: Required<Termin
   return <AffordanceContext.Provider value={value}>{children}</AffordanceContext.Provider>
 }
 
-export function WithActions({ actions, children, className }: { actions: ReactNode; children: ReactNode; className?: string }) {
+export type ActionPlacement = 'below' | 'inline'
+
+const PlacementContext = createContext<ActionPlacement>('below')
+
+export function ActionPlacementProvider({ value, children }: { value: ActionPlacement; children: ReactNode }) {
+  return <PlacementContext.Provider value={value}>{children}</PlacementContext.Provider>
+}
+
+export function WithActions({
+  actions,
+  children,
+  className,
+  placement,
+}: {
+  actions: ReactNode
+  children: ReactNode
+  className?: string
+  placement?: ActionPlacement
+}) {
   const { actions: enabled } = useAffordances()
+  const inherited = useContext(PlacementContext)
   if (!enabled) {
     return <>{children}</>
   }
   return (
-    <div className={cn('term-hoverable', className)}>
-      {children}
+    <div className={cn('term-hoverable', className)} data-placement={placement ?? inherited}>
+      <PlacementContext.Provider value="below">{children}</PlacementContext.Provider>
       <div className="term-actions">{actions}</div>
     </div>
   )
 }
 
+type Tone = 'magenta' | 'yellow' | 'red' | 'danger'
+
+function ActionButton({
+  icon: Icon,
+  word,
+  label,
+  tone,
+  pressed,
+  filled,
+  onPress,
+}: {
+  icon: LucideIcon
+  word: string
+  label: string
+  tone?: Tone
+  pressed?: boolean
+  filled?: boolean
+  onPress: () => void
+}) {
+  const { labels } = useAffordances()
+  return (
+    <button
+      type="button"
+      className="term-action"
+      title={label}
+      aria-label={label}
+      aria-pressed={pressed}
+      data-tone={tone}
+      onClick={(event) => {
+        event.stopPropagation()
+        onPress()
+      }}
+    >
+      <Icon aria-hidden className="term-action-icon" fill={filled ? 'currentColor' : 'none'} />
+      {labels ? <span className="term-action-word">{word}</span> : null}
+    </button>
+  )
+}
+
 // Bookmarks are a host concern (which items, where they persist); the transcript only needs
-// membership and a toggle. A missing provider renders no action at all, so embeddings that
-// never wire bookmarks pay nothing - the same contract AffordanceContext has.
+// membership and a toggle. A missing provider renders no action at all.
 export type BookmarkHandle = {
   has: (itemId: string) => boolean
   toggle: (itemId: string) => void
@@ -63,87 +121,52 @@ export function BookmarkAction({ id }: { id: string }) {
     return null
   }
   const active = handle.has(id)
-  const label = active ? 'Remove bookmark' : 'Bookmark'
   return (
-    <button
-      type="button"
-      className="term-action"
-      title={label}
-      aria-label={label}
-      aria-pressed={active}
-      onClick={(event) => {
-        event.stopPropagation()
-        handle.toggle(id)
-      }}
-    >
-      {active ? '★' : '☆'}
-    </button>
+    <ActionButton
+      icon={Star}
+      filled
+      word={active ? 'bookmarked' : 'bookmark'}
+      label={active ? 'Remove bookmark' : 'Bookmark'}
+      tone={active ? 'yellow' : undefined}
+      pressed={active}
+      onPress={() => handle.toggle(id)}
+    />
   )
 }
 
 export function OpenSubagentAction({ onOpen, label = 'Open sub-agent' }: { onOpen: () => void; label?: string }) {
-  return (
-    <button
-      type="button"
-      className="term-action"
-      title={label}
-      aria-label={label}
-      onClick={(event) => {
-        event.stopPropagation()
-        onOpen()
-      }}
-    >
-      ⤢
-    </button>
-  )
+  return <ActionButton icon={Maximize2} word="open" label={label} onPress={onOpen} />
 }
 
 export function OpenShellAction({ onOpen, label = 'Open terminal' }: { onOpen: () => void; label?: string }) {
-  return (
-    <button
-      type="button"
-      className="term-action"
-      title={label}
-      aria-label={label}
-      data-tone="magenta"
-      onClick={(event) => {
-        event.stopPropagation()
-        onOpen()
-      }}
-    >
-      ⤢
-    </button>
-  )
+  return <ActionButton icon={SquareTerminal} word="enter shell" label={label} tone="magenta" onPress={onOpen} />
 }
 
 export function KillShellAction({ onKill, label = 'Kill this shell' }: { onKill: () => void; label?: string }) {
+  return <ActionButton icon={X} word="kill" label={label} tone="danger" onPress={onKill} />
+}
+
+export function AgentWriteAction({ granted, label, onToggle }: { granted: boolean; label: string; onToggle: () => void }) {
   return (
-    <button
-      type="button"
-      className="term-action"
-      title={label}
-      aria-label={label}
-      data-tone="red"
-      onClick={(event) => {
-        event.stopPropagation()
-        onKill()
-      }}
-    >
-      {SHELL_KILL_GLYPH}
-    </button>
+    <ActionButton
+      icon={granted ? Bot : BotOff}
+      word={granted ? 'agent can type' : 'agent read-only'}
+      label={label}
+      tone={granted ? 'yellow' : undefined}
+      pressed={granted}
+      onPress={onToggle}
+    />
   )
 }
 
 export function CopyAction({ text, label = 'Copy' }: { text: string; label?: string }) {
   const [copied, setCopied] = useState(false)
   return (
-    <button
-      type="button"
-      className="term-action"
-      title={label}
-      aria-label={label}
-      onClick={(event) => {
-        event.stopPropagation()
+    <ActionButton
+      icon={copied ? Check : Copy}
+      word={copied ? 'copied' : 'copy'}
+      label={label}
+      onPress={() => {
         void copyText(text).then((ok) => {
           if (!ok) {
             return
@@ -152,8 +175,11 @@ export function CopyAction({ text, label = 'Copy' }: { text: string; label?: str
           setTimeout(() => setCopied(false), 1200)
         })
       }}
-    >
-      {copied ? '✓' : '⧉'}
-    </button>
+    />
   )
 }
+
+export function AgentWriteIcon({ granted, className }: { granted: boolean; className?: string }) {
+  const Icon = granted ? Bot : BotOff
+  return <Icon aria-hidden className={className} />
+}