banhaten 0.4.0 → 0.6.0

package/registry/components/approval-questions.tsx

@@ -0,0 +1,559 @@
+"use client"
+
+import * as React from "react"
+import {
+  ChevronDownIcon,
+  ChevronUpIcon,
+  MessageCircleQuestionIcon,
+} from "lucide-react"
+
+import { Button } from "@/components/ui/button"
+import { Kbd } from "@/components/ui/kbd"
+import { RollingCount } from "@/components/ui/rolling-count"
+import { useReducedMotion } from "@/hooks/use-reduced-motion"
+
+import { ApprovalFrame, type ApprovalCardBaseProps } from "./approval-frame"
+
+type ApprovalQuestion = {
+  id: string
+  options: readonly string[]
+  prompt: string
+}
+
+type ApprovalAnswers = Record<string, string>
+
+type ApprovalQuestionsPayload = {
+  /** Answers keyed by question id. */
+  answers: ApprovalAnswers
+}
+
+type ApprovalQuestionsLabels = {
+  customAnswer: string
+  customAnswerFor: (prompt: string) => string
+  nextQuestion: string
+  previousQuestion: string
+  questionOf: (current: number, total: number) => string
+}
+
+type ApprovalQuestionsProps = ApprovalCardBaseProps & {
+  labels?: Partial<ApprovalQuestionsLabels>
+  /** Fires once every question has an answer. */
+  onApprove?: (payload: ApprovalQuestionsPayload) => void
+  onReject?: () => void
+  /** Single-choice questions, answered one at a time. */
+  questions: readonly ApprovalQuestion[]
+  rejectLabel?: string
+}
+
+const defaultLabels: ApprovalQuestionsLabels = {
+  customAnswer: "Something else…",
+  customAnswerFor: (prompt) => `Custom answer for: ${prompt}`,
+  nextQuestion: "Next question",
+  previousQuestion: "Previous question",
+  questionOf: (current, total) => `Question ${current} of ${total}`,
+}
+
+// Beat between picking an option and sliding to the next question.
+const ADVANCE_MS = 320
+
+type QuestionChoice = { kind: "option"; option: string } | { kind: "custom" }
+
+/** A question's pick, plus its free-text draft kept while switching picks. */
+type QuestionEntry = { choice?: QuestionChoice; draft: string }
+
+const emptyEntry: QuestionEntry = { draft: "" }
+
+function answerOf(entry: QuestionEntry | undefined) {
+  if (entry?.choice?.kind === "option") return entry.choice.option
+  if (entry?.choice?.kind === "custom") return entry.draft.trim()
+  return ""
+}
+
+function collectAnswers(
+  questions: readonly ApprovalQuestion[],
+  entries: Record<string, QuestionEntry>
+) {
+  const answers: ApprovalAnswers = {}
+  for (const question of questions) {
+    const answer = answerOf(entries[question.id])
+    if (answer) answers[question.id] = answer
+  }
+  return answers
+}
+
+function isComplete(
+  questions: readonly ApprovalQuestion[],
+  answers: ApprovalAnswers
+) {
+  return (
+    questions.length > 0 &&
+    questions.every((question) => Boolean(answers[question.id]?.trim()))
+  )
+}
+
+/**
+ * Sizes the viewport to the active question and slides the track to it. When
+ * a slide would leave keyboard focus on a hidden question, focus follows to
+ * the visible one.
+ */
+function useQuestionTrack(
+  step: number,
+  questions: readonly ApprovalQuestion[],
+  entries: Record<string, QuestionEntry>
+) {
+  const viewportRef = React.useRef<HTMLDivElement>(null)
+  const questionRefs = React.useRef<Array<HTMLDivElement | null>>([])
+  const measured = React.useRef(false)
+  const [height, setHeight] = React.useState<number | null>(null)
+  const [offset, setOffset] = React.useState(0)
+  const [animate, setAnimate] = React.useState(false)
+  const reducedMotion = useReducedMotion()
+
+  const sync = React.useCallback(
+    (shouldAnimate: boolean) => {
+      const item = questionRefs.current[step]
+      const viewport = viewportRef.current
+      if (!item || !viewport) return
+      // The viewport pads the track so focus rings are not clipped.
+      const padding = Number.parseFloat(window.getComputedStyle(viewport).paddingTop) || 0
+      setHeight(item.offsetHeight + 2 * padding)
+      setOffset(item.offsetTop)
+      setAnimate(shouldAnimate && !reducedMotion)
+    },
+    [reducedMotion, step]
+  )
+
+  // Answers can change a question's height, so they re-measure too.
+  React.useLayoutEffect(() => {
+    const shouldAnimate = measured.current
+    measured.current = true
+    sync(shouldAnimate)
+  }, [entries, questions, sync])
+
+  React.useEffect(() => {
+    const frame = window.requestAnimationFrame(() => sync(measured.current))
+    return () => window.cancelAnimationFrame(frame)
+  }, [questions, sync])
+
+  React.useEffect(() => {
+    const viewport = viewportRef.current
+    const question = questionRefs.current[step]
+    const focused = document.activeElement
+    if (!viewport || !question || !focused) return
+    if (!viewport.contains(focused) || question.contains(focused)) return
+    const radio =
+      question.querySelector<HTMLInputElement>(
+        '[data-slot="approval-card-option-radio"]:checked'
+      ) ??
+      question.querySelector<HTMLInputElement>('[data-slot="approval-card-option-radio"]')
+    radio?.focus({ preventScroll: true })
+  }, [step])
+
+  return { animate, height, offset, questionRefs, viewportRef }
+}
+
+type QuestionStepNavProps = {
+  labels: ApprovalQuestionsLabels
+  onStep: (step: number) => void
+  step: number
+  total: number
+}
+
+/**
+ * Previous and next controls around a rolling "2 / 3" counter, grouped under
+ * "Question 2 of 3". A plain div cannot carry that name; a group can.
+ */
+function QuestionStepNav({ labels, onStep, step, total }: QuestionStepNavProps) {
+  return (
+    <div
+      aria-label={labels.questionOf(step + 1, total)}
+      data-slot="approval-card-step-nav"
+      role="group"
+    >
+      <Button
+        aria-label={labels.previousQuestion}
+        disabled={step <= 0}
+        onClick={() => onStep(step - 1)}
+        size="icon-xs"
+        variant="ghost"
+      >
+        <ChevronUpIcon />
+      </Button>
+      <span aria-live="polite" data-slot="approval-card-step">
+        <RollingCount value={`${step + 1} / ${total}`} />
+      </span>
+      <Button
+        aria-label={labels.nextQuestion}
+        disabled={step >= total - 1}
+        onClick={() => onStep(step + 1)}
+        size="icon-xs"
+        variant="ghost"
+      >
+        <ChevronDownIcon />
+      </Button>
+    </div>
+  )
+}
+
+type QuestionOptionsProps = {
+  active: boolean
+  entry: QuestionEntry
+  labels: ApprovalQuestionsLabels
+  name: string
+  /** Selects "Something else"; the field is focused separately. */
+  onChooseCustom: () => void
+  onCommitCustom: (draft: string) => void
+  /** Enter on the choices: advance, or approve from the last question. */
+  onConfirm: () => void
+  onEditCustom: (draft: string) => void
+  onPick: (option: string, advance: boolean) => void
+  promptId: string
+  question: ApprovalQuestion
+}
+
+/**
+ * One question's choices as native radios: one tab stop, arrow keys, and a
+ * letter per option. "Something else" is its own radio next to a text field;
+ * focusing or typing in the field selects it.
+ */
+function QuestionOptions({
+  active,
+  entry,
+  labels,
+  name,
+  onChooseCustom,
+  onCommitCustom,
+  onConfirm,
+  onEditCustom,
+  onPick,
+  promptId,
+  question,
+}: QuestionOptionsProps) {
+  const inputRef = React.useRef<HTMLInputElement>(null)
+  // Set by an arrow-key press so the radio change it causes moves the choice
+  // without advancing, the way a native radio group browses.
+  const arrowKey = React.useRef(false)
+  const custom = entry.choice?.kind === "custom"
+  const picked = entry.choice?.kind === "option" ? entry.choice.option : null
+
+  const chooseCustom = (focusField: boolean) => {
+    onChooseCustom()
+    if (focusField) window.requestAnimationFrame(() => inputRef.current?.focus())
+  }
+
+  // Letters pick options by their key hint; Enter confirms the current answer.
+  const handleKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {
+    if ((event.target as HTMLElement).dataset.slot === "approval-card-option-input") return
+    if (event.key.startsWith("Arrow")) {
+      arrowKey.current = true
+      return
+    }
+    if (event.key === "Enter") {
+      event.preventDefault()
+      onConfirm()
+      return
+    }
+    if (event.altKey || event.ctrlKey || event.metaKey || event.key.length !== 1) return
+    const index = event.key.toUpperCase().charCodeAt(0) - 65
+    if (index < 0 || index > question.options.length) return
+    event.preventDefault()
+    if (index === question.options.length) {
+      chooseCustom(true)
+      return
+    }
+    event.currentTarget
+      .querySelectorAll<HTMLInputElement>('[data-slot="approval-card-option-radio"]')
+      [index]?.focus()
+    onPick(question.options[index], true)
+  }
+
+  return (
+    <div
+      aria-labelledby={promptId}
+      data-slot="approval-card-options"
+      onKeyDown={handleKeyDown}
+      onPointerDown={() => {
+        arrowKey.current = false
+      }}
+      role="radiogroup"
+    >
+      {question.options.map((option, optionIndex) => {
+        const selected = picked === option
+        return (
+          <label
+            data-selected={selected ? "true" : "false"}
+            data-slot="approval-card-option"
+            key={option}
+          >
+            <input
+              checked={selected}
+              className="sr-only"
+              data-slot="approval-card-option-radio"
+              name={name}
+              onChange={() => {
+                if (active) onPick(option, !arrowKey.current)
+                arrowKey.current = false
+              }}
+              tabIndex={active ? undefined : -1}
+              type="radio"
+              value={option}
+            />
+            <Kbd aria-hidden="true" size="sm">
+              {String.fromCharCode(65 + optionIndex)}
+            </Kbd>
+            <span dir="auto">{option}</span>
+          </label>
+        )
+      })}
+      <div
+        data-other="true"
+        data-selected={custom ? "true" : "false"}
+        data-slot="approval-card-option"
+        onClick={(event) => {
+          if (event.target === event.currentTarget) inputRef.current?.focus()
+        }}
+      >
+        <label data-slot="approval-card-other-choice">
+          <input
+            aria-label={labels.customAnswer}
+            checked={custom}
+            className="sr-only"
+            data-slot="approval-card-option-radio"
+            name={name}
+            onChange={() => {
+              if (active) chooseCustom(!arrowKey.current)
+              arrowKey.current = false
+            }}
+            tabIndex={active ? undefined : -1}
+            type="radio"
+            value=""
+          />
+          <Kbd aria-hidden="true" size="sm">
+            {String.fromCharCode(65 + question.options.length)}
+          </Kbd>
+        </label>
+        <input
+          aria-label={labels.customAnswerFor(question.prompt)}
+          data-slot="approval-card-option-input"
+          onChange={(event) => {
+            if (active) onEditCustom(event.target.value)
+          }}
+          onFocus={() => {
+            if (active && !custom) chooseCustom(false)
+          }}
+          onKeyDown={(event) => {
+            event.stopPropagation()
+            if (!active) return
+            // Enter that confirms an IME candidate is part of the composition,
+            // not the answer (Safari reports it with keyCode 229).
+            if (event.nativeEvent.isComposing || event.keyCode === 229) return
+            if (event.key === "Enter") {
+              event.preventDefault()
+              onCommitCustom(event.currentTarget.value)
+            }
+          }}
+          placeholder={labels.customAnswer}
+          ref={inputRef}
+          tabIndex={active ? 0 : -1}
+          type="text"
+          value={entry.draft}
+        />
+      </div>
+    </div>
+  )
+}
+
+/**
+ * Pauses the agent for a few single-choice questions, one at a time, each with
+ * a free-text answer.
+ */
+const ApprovalQuestions = React.forwardRef<HTMLDivElement, ApprovalQuestionsProps>(
+  function ApprovalQuestions(
+    {
+      approveLabel = "Continue",
+      labels: labelOverrides,
+      onApprove,
+      onKeyDown,
+      onReject,
+      questions,
+      rejectLabel = "Skip",
+      title = "Questions",
+      ...props
+    },
+    ref
+  ) {
+    const labels = { ...defaultLabels, ...labelOverrides }
+    const [entries, setEntries] = React.useState<Record<string, QuestionEntry>>({})
+    const [step, setStep] = React.useState(0)
+    const advanceTimer = React.useRef<number | null>(null)
+    const groupId = React.useId()
+
+    React.useEffect(
+      () => () => {
+        if (advanceTimer.current) window.clearTimeout(advanceTimer.current)
+      },
+      []
+    )
+
+    const lastStep = Math.max(questions.length - 1, 0)
+    const safeStep = Math.min(step, lastStep)
+    const answers = collectAnswers(questions, entries)
+    const complete = isComplete(questions, answers)
+    const track = useQuestionTrack(safeStep, questions, entries)
+
+    const clearAdvance = () => {
+      if (advanceTimer.current) window.clearTimeout(advanceTimer.current)
+    }
+
+    const advance = () => setStep((current) => Math.min(current + 1, lastStep))
+
+    const goToStep = (next: number) => {
+      clearAdvance()
+      setStep(Math.min(Math.max(next, 0), lastStep))
+    }
+
+    const updateEntry = (questionId: string, patch: Partial<QuestionEntry>) =>
+      setEntries((previous) => ({
+        ...previous,
+        [questionId]: { ...(previous[questionId] ?? emptyEntry), ...patch },
+      }))
+
+    const approve = (current: ApprovalAnswers) => {
+      if (isComplete(questions, current)) onApprove?.({ answers: current })
+    }
+
+    // A click, Space, or letter picks and advances after a beat.
+    const pickOption = (questionId: string, option: string, advanceAfter: boolean) => {
+      updateEntry(questionId, { choice: { kind: "option", option } })
+      if (advanceAfter && safeStep < lastStep) {
+        clearAdvance()
+        advanceTimer.current = window.setTimeout(advance, ADVANCE_MS)
+      }
+    }
+
+    const chooseCustom = (questionId: string) => {
+      clearAdvance()
+      updateEntry(questionId, { choice: { kind: "custom" } })
+    }
+
+    const editCustom = (questionId: string, draft: string) =>
+      updateEntry(questionId, { choice: { kind: "custom" }, draft })
+
+    // Enter in the free-text field answers the question: it advances, or
+    // submits from the last question.
+    const commitCustom = (questionId: string, draft: string) => {
+      if (!draft.trim()) return
+      editCustom(questionId, draft)
+      if (safeStep < lastStep) {
+        clearAdvance()
+        advance()
+        return
+      }
+      approve({ ...answers, [questionId]: draft.trim() })
+    }
+
+    const confirm = (questionId: string) => {
+      if (!answerOf(entries[questionId])) return
+      if (safeStep < lastStep) {
+        clearAdvance()
+        advance()
+        return
+      }
+      approve(answers)
+    }
+
+    return (
+      <ApprovalFrame
+        {...props}
+        approveDisabled={!complete}
+        approveLabel={approveLabel}
+        footerStart={
+          <QuestionStepNav
+            labels={labels}
+            onStep={goToStep}
+            step={safeStep}
+            total={questions.length}
+          />
+        }
+        icon={<MessageCircleQuestionIcon />}
+        onApprove={() => approve(answers)}
+        onKeyDown={(event) => {
+          onKeyDown?.(event)
+          if (event.defaultPrevented || event.key !== "Enter") return
+          if (safeStep !== lastStep || !complete) return
+          const target = event.target as HTMLElement
+          if (target.tagName === "INPUT" || target.tagName === "TEXTAREA") return
+          if (target.closest("[data-slot='approval-card-buttons']")) return
+          event.preventDefault()
+          approve(answers)
+        }}
+        onSecondary={() => onReject?.()}
+        ref={ref}
+        secondaryLabel={rejectLabel}
+        title={title}
+        tone="info"
+      >
+        {questions.length > 0 ? (
+          <div
+            aria-live="polite"
+            data-animate={track.animate ? "true" : "false"}
+            data-slot="approval-card-questions"
+            ref={track.viewportRef}
+            style={track.height !== null ? { height: `${track.height}px` } : undefined}
+          >
+            <div
+              data-animate={track.animate ? "true" : "false"}
+              data-slot="approval-card-questions-track"
+              style={{ transform: `translate3d(0, ${-track.offset}px, 0)` }}
+            >
+              {questions.map((question, questionIndex) => {
+                const active = questionIndex === safeStep
+                const promptId = `${groupId}-${question.id}-prompt`
+
+                return (
+                  <div
+                    aria-hidden={active ? undefined : "true"}
+                    data-active={active ? "true" : "false"}
+                    data-slot="approval-card-question"
+                    key={question.id}
+                    ref={(element) => {
+                      track.questionRefs.current[questionIndex] = element
+                    }}
+                  >
+                    <div data-slot="approval-card-prompt" dir="auto" id={promptId}>
+                      {question.prompt}
+                    </div>
+                    <QuestionOptions
+                      active={active}
+                      entry={entries[question.id] ?? emptyEntry}
+                      labels={labels}
+                      name={`${groupId}-${question.id}`}
+                      onChooseCustom={() => chooseCustom(question.id)}
+                      onCommitCustom={(draft) => commitCustom(question.id, draft)}
+                      onConfirm={() => confirm(question.id)}
+                      onEditCustom={(draft) => editCustom(question.id, draft)}
+                      onPick={(option, advanceAfter) =>
+                        pickOption(question.id, option, advanceAfter)
+                      }
+                      promptId={promptId}
+                      question={question}
+                    />
+                  </div>
+                )
+              })}
+            </div>
+          </div>
+        ) : null}
+      </ApprovalFrame>
+    )
+  }
+)
+
+export { ApprovalQuestions }
+export type {
+  ApprovalAnswers,
+  ApprovalQuestion,
+  ApprovalQuestionsLabels,
+  ApprovalQuestionsPayload,
+  ApprovalQuestionsProps,
+}

package/registry/components/attribute.tsx

@@ -79,10 +79,17 @@ const attributeListVariants = cva("grid min-w-0", {
         "overflow-hidden rounded-[var(--bh-radius-lg-8)] border border-[var(--bh-border-subtle)] [&>[data-slot='attribute-item']]:px-[var(--bh-space-3xl-16)] sm:[&>[data-slot='attribute-item']]:px-[var(--bh-space-4xl-20)]",
       false: "",
     },
+    // comfortable spaces the rows with a gap instead of row padding, as in the app-shell detail cards.
+    density: {
+      compact: "",
+      default: "",
+      comfortable: "gap-y-[var(--bh-space-3xl-16)]",
+    },
   },
   defaultVariants: {
     layout: "inline",
     bordered: false,
+    density: "default",
   },
 })
 
@@ -99,7 +106,7 @@ const attributeItemVariants = cva("min-w-0", {
     density: {
       compact: "py-[var(--bh-space-md-8)]",
       default: "py-[var(--bh-space-3xl-16)]",
-      comfortable: "py-[var(--bh-space-3xl-16)]",
+      comfortable: "py-[var(--bh-space-none)]",
     },
     divided: {
       true: "border-b border-[var(--bh-border-subtle)] last:border-b-0",
@@ -110,6 +117,13 @@ const attributeItemVariants = cva("min-w-0", {
       false: "",
     },
   },
+  compoundVariants: [
+    {
+      layout: "inline",
+      density: "comfortable",
+      class: "items-start gap-x-[var(--bh-space-3xl-16)]",
+    },
+  ],
   defaultVariants: {
     layout: "inline",
     density: "default",
@@ -119,21 +133,31 @@ const attributeItemVariants = cva("min-w-0", {
 })
 
 const attributeLabelVariants = cva(
-  [
-    "min-w-0 break-words text-[length:var(--bh-text-body-md-regular-font-size)]",
-    "font-[var(--bh-text-body-md-regular-font-weight)]",
-    "leading-[var(--bh-text-body-md-regular-line-height)]",
-    "tracking-[var(--bh-text-body-md-regular-letter-spacing)]",
-    "text-[var(--bh-content-subtle)]",
-  ],
+  ["min-w-0 break-words text-[var(--bh-content-subtle)]"],
   {
     variants: {
+      // Comfortable lists set the label in body-sm, one step below the value.
+      size: {
+        default: [
+          "text-[length:var(--bh-text-body-md-regular-font-size)]",
+          "font-[var(--bh-text-body-md-regular-font-weight)]",
+          "leading-[var(--bh-text-body-md-regular-line-height)]",
+          "tracking-[var(--bh-text-body-md-regular-letter-spacing)]",
+        ],
+        sm: [
+          "text-[length:var(--bh-text-body-sm-regular-font-size)]",
+          "font-[var(--bh-text-body-sm-regular-font-weight)]",
+          "leading-[var(--bh-text-body-sm-regular-line-height)]",
+          "tracking-[var(--bh-text-body-sm-regular-letter-spacing)]",
+        ],
+      },
       truncate: {
         true: "truncate",
         false: "",
       },
     },
     defaultVariants: {
+      size: "default",
       truncate: false,
     },
   }
@@ -258,11 +282,16 @@ const AttributeList = React.forwardRef<HTMLDListElement, AttributeListProps>(
     className,
     density = "default",
     dividers = false,
-    labelWidth = defaultAttributeContext.labelWidth,
+    labelWidth: labelWidthProp,
     layout = "inline",
     style,
     ...props
   }, ref) {
+    const labelWidth =
+      labelWidthProp ??
+      (density === "comfortable"
+        ? "var(--bh-attribute-comfortable-label-width)"
+        : defaultAttributeContext.labelWidth)
     const value = React.useMemo(
       () => ({
         density,
@@ -285,7 +314,7 @@ const AttributeList = React.forwardRef<HTMLDListElement, AttributeListProps>(
           data-slot="attribute-list"
           ref={ref}
           style={attributeStyle}
-          className={cn(attributeListVariants({ layout, bordered, className }))}
+          className={cn(attributeListVariants({ layout, bordered, density, className }))}
           {...props}
         />
       </AttributeContext.Provider>
@@ -343,7 +372,11 @@ const AttributeItem = React.forwardRef<HTMLDivElement, AttributeItemProps>(
         )}
         {...props}
       >
-        <AttributeLabel className={labelClassName} truncate={truncate}>
+        <AttributeLabel
+          className={labelClassName}
+          size={selectedDensity === "comfortable" ? "sm" : undefined}
+          truncate={truncate}
+        >
           {label}
         </AttributeLabel>
         <AttributeValue
@@ -363,12 +396,14 @@ type AttributeLabelProps = React.ComponentProps<"dt"> &
   VariantProps<typeof attributeLabelVariants>
 
 const AttributeLabel = React.forwardRef<HTMLElement, AttributeLabelProps>(
-  function AttributeLabel({ children, className, truncate, ...props }, ref) {
+  function AttributeLabel({ children, className, size, truncate, ...props }, ref) {
+    const context = React.useContext(AttributeContext)
+    const selectedSize = size ?? (context.density === "comfortable" ? "sm" : "default")
     return (
       <dt
         data-slot="attribute-label"
         ref={ref}
-        className={cn(attributeLabelVariants({ truncate, className }))}
+        className={cn(attributeLabelVariants({ size: selectedSize, truncate, className }))}
         {...props}
       >
         {renderAttributeText(children, "attribute-label-text")}