banhaten 0.4.0 → 0.6.0

package/registry/components/thinking-reasoning.tsx

@@ -0,0 +1,253 @@
+"use client"
+
+import * as React from "react"
+import { ChevronDownIcon } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+import {
+  Collapsible,
+  CollapsiblePanel,
+  CollapsibleTrigger,
+} from "@/components/ui/collapsible"
+import { ShimmerText } from "@/components/ui/shimmer-text"
+import { useControllableState } from "@/hooks/use-controllable-state"
+
+import "./thinking-reasoning.css"
+
+type ThinkingReasoningStatus = "thinking" | "done"
+
+type ThinkingReasoningLabels = {
+  /** Header label while the agent is still reasoning. */
+  thinking: string
+  /**
+   * Verb shown in the summary once reasoning ends, for example "Thought".
+   * With the duration it also names the summary toggle: "Thought for 5s".
+   */
+  thought: string
+  /** Duration suffix rendered after the verb, for example "for 5s". */
+  duration: (seconds: number) => React.ReactNode
+}
+
+type ThinkingReasoningProps = Omit<React.ComponentProps<"div">, "children"> & {
+  defaultOpen?: boolean
+  /** Elapsed seconds for the summary. Measured from mount when omitted. */
+  duration?: number
+  labels?: Partial<ThinkingReasoningLabels>
+  onOpenChange?: (open: boolean) => void
+  /** Controls whether the finished reasoning is unfolded. */
+  open?: boolean
+  /**
+   * Keeps the block height stable while the reasoning folds into its summary
+   * so content below does not jump. Off by default for chat threads.
+   */
+  reserveSpace?: boolean
+  status?: ThinkingReasoningStatus
+  /** Reasoning sentences in arrival order. Append to stream new ones. */
+  steps: readonly string[]
+}
+
+const defaultLabels: ThinkingReasoningLabels = {
+  duration: (seconds) => ` for ${seconds}s`,
+  thinking: "Thinking…",
+  thought: "Thought",
+}
+
+type ViewportMetrics = {
+  contentHeight: number
+  fade: number
+  maxHeight: number
+}
+
+function readLength(element: HTMLElement, property: string) {
+  const value = window.getComputedStyle(element).getPropertyValue(property)
+  const parsed = Number.parseFloat(value)
+  return Number.isFinite(parsed) ? parsed : 0
+}
+
+/**
+ * Collapsible reasoning block. While thinking, sentences reveal in sequence
+ * and auto-scroll behind a soft fade; once done the header folds into a
+ * "Thought for Ns" summary that unfolds the full, scrollable reasoning.
+ */
+const ThinkingReasoning = React.forwardRef<HTMLDivElement, ThinkingReasoningProps>(
+  function ThinkingReasoning(
+    {
+      className,
+      defaultOpen = false,
+      duration,
+      labels: labelOverrides,
+      onOpenChange,
+      open: controlledOpen,
+      reserveSpace = false,
+      status = "thinking",
+      steps,
+      ...props
+    },
+    ref
+  ) {
+    const labels = { ...defaultLabels, ...labelOverrides }
+    const done = status === "done"
+    const [open, setOpenState] = useControllableState({
+      defaultValue: defaultOpen,
+      onChange: onOpenChange,
+      value: controlledOpen,
+    })
+    const expanded = done ? open : true
+    const scrollable = done && open
+
+    // Measured from the first thinking render. A block that mounts already
+    // done has nothing to measure, so its summary omits the duration.
+    const startedAt = React.useRef<number | null>(null)
+    const [measuredSeconds, setMeasuredSeconds] = React.useState<number>()
+    React.useEffect(() => {
+      if (done) {
+        if (startedAt.current !== null) {
+          setMeasuredSeconds(
+            Math.max(1, Math.round((Date.now() - startedAt.current) / 1000))
+          )
+        }
+        return
+      }
+      startedAt.current = Date.now()
+    }, [done])
+    const seconds = duration ?? measuredSeconds
+
+    const viewportRef = React.useRef<HTMLDivElement>(null)
+    const streamRef = React.useRef<HTMLDivElement>(null)
+    const [metrics, setMetrics] = React.useState<ViewportMetrics>({
+      contentHeight: 0,
+      fade: 0,
+      maxHeight: 0,
+    })
+    const [scrollFade, setScrollFade] = React.useState({
+      bottom: true,
+      top: false,
+    })
+
+    const measure = React.useCallback(() => {
+      const viewport = viewportRef.current
+      const stream = streamRef.current
+      if (!viewport || !stream) return
+      setMetrics({
+        contentHeight: stream.offsetHeight,
+        fade: readLength(viewport, "--thinking-reasoning-fade"),
+        maxHeight: readLength(viewport, "--thinking-reasoning-max-height"),
+      })
+    }, [])
+
+    // A folded block unmounts its content, so measuring and observing start
+    // again whenever it unfolds.
+    React.useLayoutEffect(measure, [expanded, measure, steps, status])
+    React.useEffect(() => {
+      const stream = streamRef.current
+      if (!stream || typeof ResizeObserver === "undefined") return
+      const observer = new ResizeObserver(measure)
+      observer.observe(stream)
+      return () => observer.disconnect()
+    }, [expanded, measure])
+
+    const capped =
+      metrics.maxHeight > 0 && metrics.contentHeight > metrics.maxHeight
+    const viewportHeight = capped ? metrics.maxHeight : metrics.contentHeight
+    const translate =
+      scrollable || !capped
+        ? 0
+        : metrics.maxHeight - metrics.fade - metrics.contentHeight
+    const fadeTop = scrollable ? scrollFade.top : capped
+    const fadeBottom = scrollable ? scrollFade.bottom : capped
+
+    const setOpen = (next: boolean) => {
+      if (next) {
+        if (viewportRef.current) viewportRef.current.scrollTop = 0
+        setScrollFade({ bottom: true, top: false })
+      }
+      setOpenState(next)
+    }
+
+    const handleScroll = () => {
+      const viewport = viewportRef.current
+      if (!viewport) return
+      setScrollFade({
+        bottom:
+          viewport.scrollTop + viewport.clientHeight <
+          viewport.scrollHeight - 1,
+        top: viewport.scrollTop > 1,
+      })
+    }
+
+    return (
+      <Collapsible
+        asChild
+        disabled={!done}
+        onOpenChange={setOpen}
+        open={expanded}
+      >
+        <div
+          data-open={expanded ? "true" : "false"}
+          data-reserve-space={reserveSpace ? "true" : "false"}
+          data-slot="thinking-reasoning"
+          data-state={status}
+          ref={ref}
+          className={cn("flex min-w-0 flex-col items-start", className)}
+          {...props}
+        >
+          {/* No aria-label: the label and summary it shows are its name. */}
+          <CollapsibleTrigger asChild>
+            <button data-slot="thinking-reasoning-trigger" type="button">
+              {done ? (
+                <span data-slot="thinking-reasoning-label">
+                  <span data-slot="thinking-reasoning-verb">{labels.thought}</span>
+                  {seconds !== undefined ? labels.duration(seconds) : null}
+                </span>
+              ) : (
+                <span aria-live="polite" data-slot="thinking-reasoning-label">
+                  <ShimmerText>{labels.thinking}</ShimmerText>
+                </span>
+              )}
+              {done ? (
+                <ChevronDownIcon
+                  aria-hidden="true"
+                  data-slot="thinking-reasoning-chevron"
+                  strokeWidth="var(--bh-icon-stroke-180)"
+                />
+              ) : null}
+            </button>
+          </CollapsibleTrigger>
+
+          <CollapsiblePanel data-slot="thinking-reasoning-collapsible">
+            <div
+              data-capped={capped ? "true" : "false"}
+              data-fade-bottom={fadeBottom ? "true" : "false"}
+              data-fade-top={fadeTop ? "true" : "false"}
+              data-scrollable={scrollable ? "true" : "false"}
+              data-slot="thinking-reasoning-viewport"
+              onScroll={scrollable ? handleScroll : undefined}
+              ref={viewportRef}
+              style={{ height: `${viewportHeight}px` }}
+              tabIndex={scrollable ? 0 : undefined}
+            >
+              <div
+                data-slot="thinking-reasoning-stream"
+                ref={streamRef}
+                style={{ transform: `translateY(${translate}px)` }}
+              >
+                {steps.map((step, index) => (
+                  <p data-slot="thinking-reasoning-step" key={index}>
+                    {step}
+                  </p>
+                ))}
+              </div>
+            </div>
+          </CollapsiblePanel>
+        </div>
+      </Collapsible>
+    )
+  }
+)
+
+export { ThinkingReasoning }
+export type {
+  ThinkingReasoningLabels,
+  ThinkingReasoningProps,
+  ThinkingReasoningStatus,
+}

package/registry/components/thinking-state.css

@@ -0,0 +1,8 @@
+[data-slot="thinking-state"] {
+  color: var(--bh-content-subtle);
+  font-family: var(--bh-font-family);
+  font-size: var(--bh-text-body-xs-medium-font-size);
+  font-weight: var(--bh-text-body-xs-medium-font-weight);
+  letter-spacing: var(--bh-text-body-xs-medium-letter-spacing);
+  line-height: var(--bh-text-body-xs-medium-line-height);
+}

package/registry/components/thinking-state.tsx

@@ -0,0 +1,46 @@
+"use client"
+
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+import { ShimmerText, type ShimmerTextTone } from "@/components/ui/shimmer-text"
+
+import "./thinking-state.css"
+
+type ThinkingStateStatus = "thinking" | "done"
+
+type ThinkingStateProps = React.ComponentProps<"span"> & {
+  /** `done` stops the sweep and leaves the label as static text. */
+  status?: ThinkingStateStatus
+  tone?: ShimmerTextTone
+}
+
+/**
+ * Minimal "Thinking" status: a shimmering label that signals the agent is
+ * working before its first token arrives. Pass localized `children`.
+ */
+const ThinkingState = React.forwardRef<HTMLSpanElement, ThinkingStateProps>(
+  function ThinkingState(
+    { children = "Thinking", className, status = "thinking", tone, ...props },
+    ref
+  ) {
+    return (
+      <span
+        aria-live="polite"
+        data-slot="thinking-state"
+        data-state={status}
+        ref={ref}
+        role="status"
+        className={cn("inline-flex min-w-0 items-center", className)}
+        {...props}
+      >
+        <ShimmerText animated={status === "thinking"} tone={tone}>
+          {children}
+        </ShimmerText>
+      </span>
+    )
+  }
+)
+
+export { ThinkingState }
+export type { ThinkingStateProps, ThinkingStateStatus }

package/registry/components/toast.tsx

@@ -36,7 +36,7 @@ const intentClassNames: Record<ToastIntent, string> = {
 }
 
 const toastClassName = [
-  "border border-[var(--bh-border-subtle)] bg-[var(--bh-bg-raised)] text-[var(--bh-content-default)] shadow-[var(--shadow-component-default)]",
+  "border border-[var(--bh-border-subtle)] bg-[var(--bh-bg-raised)] text-[var(--bh-content-default)] shadow-[var(--elevation-component-default)]",
   "rounded-[var(--bh-radius-xl-10)] font-[var(--bh-font-family)]",
   "[--normal-bg:var(--bh-bg-raised)] [--normal-border:var(--bh-border-subtle)] [--normal-text:var(--bh-content-default)]",
   "[--success-bg:var(--bh-bg-raised)] [--success-border:var(--bh-border-success-subtle)] [--success-text:var(--bh-content-default)]",

package/registry/components/toggle.tsx

@@ -13,7 +13,7 @@ type ToggleFieldControlPosition = "start" | "end"
 const toggleVariants = cva(
   [
     "peer group/toggle inline-flex shrink-0 items-center rounded-[var(--bh-radius-full)] bg-[var(--bh-interactive-switch-default)] p-[var(--bh-menu-switch-padding)] outline-none transition-[background-color,box-shadow]",
-    "focus-visible:shadow-[var(--shadow-social-button-focus-ring)]",
+    "focus-visible:shadow-[var(--elevation-social-button-focus-ring)]",
     "disabled:pointer-events-none data-[disabled]:cursor-not-allowed",
     "data-[state=unchecked]:hover:bg-[var(--bh-interactive-switch-hover)]",
     "data-[state=checked]:bg-[var(--bh-interactive-switch-active)] data-[state=checked]:hover:bg-[var(--bh-interactive-switch-active-hover)]",
@@ -78,7 +78,7 @@ const Toggle = React.forwardRef<
     >
       <SwitchPrimitive.Thumb
         data-slot="toggle-thumb"
-        className="pointer-events-none flex size-[var(--bh-toggle-handle-size)] translate-x-0 items-center justify-center rounded-[var(--bh-radius-full)] bg-[var(--bh-interactive-switch-handle)] text-[var(--bh-content-on-light)] shadow-[var(--shadow-md)] transition-[background-color,transform] group-data-[disabled]/toggle:bg-[var(--bh-interactive-switch-handle-disabled)] group-data-[state=checked]/toggle:translate-x-[var(--bh-toggle-offset)] rtl:group-data-[state=checked]/toggle:-translate-x-[var(--bh-toggle-offset)]"
+        className="pointer-events-none flex size-[var(--bh-toggle-handle-size)] translate-x-0 items-center justify-center rounded-[var(--bh-radius-full)] bg-[var(--bh-interactive-switch-handle)] text-[var(--bh-content-on-light)] shadow-[var(--elevation-03)] transition-[background-color,transform] group-data-[disabled]/toggle:bg-[var(--bh-interactive-switch-handle-disabled)] group-data-[state=checked]/toggle:translate-x-[var(--bh-toggle-offset)] rtl:group-data-[state=checked]/toggle:-translate-x-[var(--bh-toggle-offset)]"
       >
         {showIcon ? (
           <span

package/registry/components/toolbar.tsx

@@ -71,13 +71,13 @@ const toolbarSectionVariants = cva(
 )
 
 const toolbarButtonVariants = cva(
-  "group/toolbar-button inline-flex min-w-0 items-center justify-center whitespace-nowrap rounded-[var(--bh-control-default)] text-[length:var(--bh-text-button-font-size)] font-[var(--bh-text-button-font-weight)] leading-[var(--bh-text-button-line-height)] tracking-[var(--bh-text-button-letter-spacing)] outline-none transition-[background-color,border-color,color,box-shadow] focus-visible:shadow-[var(--shadow-button-focus)] disabled:pointer-events-none disabled:shadow-none aria-invalid:border-[length:var(--bh-border-width-default)] aria-invalid:border-[var(--bh-border-danger-strong)] aria-invalid:shadow-[var(--shadow-button-danger-focus)] [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-[var(--bh-button-icon-size)] [&_svg:not([class*='size-'])]:m-[calc((var(--bh-button-icon-slot-size)-var(--bh-button-icon-size))/2)] [&_svg[data-icon='inline-start']]:ms-[calc(var(--bh-button-icon-offset)+(var(--bh-button-icon-slot-size)-var(--bh-button-icon-size))/2)] [&_svg[data-icon='inline-end']]:me-[calc(var(--bh-button-icon-offset)+(var(--bh-button-icon-slot-size)-var(--bh-button-icon-size))/2)] rtl:[&_svg[data-rtl-flip='true']]:-scale-x-100",
+  "group/toolbar-button inline-flex min-w-0 items-center justify-center whitespace-nowrap rounded-[var(--bh-control-default)] text-[length:var(--bh-text-button-font-size)] font-[var(--bh-text-button-font-weight)] leading-[var(--bh-text-button-line-height)] tracking-[var(--bh-text-button-letter-spacing)] outline-none transition-[background-color,border-color,color,box-shadow] focus-visible:shadow-[var(--elevation-button-focus)] disabled:pointer-events-none disabled:shadow-none aria-invalid:border-[length:var(--bh-border-width-default)] aria-invalid:border-[var(--bh-border-danger-strong)] aria-invalid:shadow-[var(--elevation-button-danger-focus)] [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-[var(--bh-button-icon-size)] [&_svg:not([class*='size-'])]:m-[calc((var(--bh-button-icon-slot-size)-var(--bh-button-icon-size))/2)] [&_svg[data-icon='inline-start']]:ms-[calc(var(--bh-button-icon-offset)+(var(--bh-button-icon-slot-size)-var(--bh-button-icon-size))/2)] [&_svg[data-icon='inline-end']]:me-[calc(var(--bh-button-icon-offset)+(var(--bh-button-icon-slot-size)-var(--bh-button-icon-size))/2)] rtl:[&_svg[data-rtl-flip='true']]:-scale-x-100",
   {
     variants: {
       variant: {
         default:
-          "bg-[var(--bh-interactive-brand-default)] text-[var(--bh-content-on-brand)] shadow-[var(--shadow-button-raised)] hover:bg-[var(--bh-interactive-brand-hover)] active:bg-[var(--bh-interactive-brand-pressed)] disabled:bg-[var(--bh-interactive-brand-disabled)] disabled:text-[var(--bh-content-disabled)]",
-        soft: "border-[length:var(--bh-border-width-default)] border-transparent bg-[var(--bh-interactive-soft-default)] text-[var(--bh-content-default)] shadow-[var(--shadow-button-soft)] hover:bg-[var(--bh-interactive-soft-hover)] active:bg-[var(--bh-interactive-soft-pressed)] focus-visible:border-[var(--bh-border-brand-strong)] disabled:bg-[var(--bh-interactive-soft-disabled)] disabled:text-[var(--bh-content-disabled)]",
+          "bg-[var(--bh-interactive-brand-default)] text-[var(--bh-content-on-brand)] shadow-[var(--elevation-button-raised)] hover:bg-[var(--bh-interactive-brand-hover)] active:bg-[var(--bh-interactive-brand-pressed)] disabled:bg-[var(--bh-interactive-brand-disabled)] disabled:text-[var(--bh-content-disabled)]",
+        soft: "border-[length:var(--bh-border-width-default)] border-transparent bg-[var(--bh-interactive-soft-default)] text-[var(--bh-content-default)] shadow-[var(--elevation-button-soft)] hover:bg-[var(--bh-interactive-soft-hover)] active:bg-[var(--bh-interactive-soft-pressed)] focus-visible:border-[var(--bh-border-brand-strong)] disabled:bg-[var(--bh-interactive-soft-disabled)] disabled:text-[var(--bh-content-disabled)]",
         outline:
           "border-[length:var(--bh-border-width-default)] border-[var(--bh-border-default)] bg-[var(--bh-interactive-outlined-default)] text-[var(--bh-content-default)] hover:bg-[var(--bh-interactive-outlined-hover)] active:bg-[var(--bh-interactive-outlined-pressed)] focus-visible:border-[var(--bh-border-brand-strong)] disabled:border-[var(--bh-border-disabled)] disabled:bg-[var(--bh-interactive-outlined-disabled)] disabled:text-[var(--bh-content-disabled)]",
         ghost:
@@ -101,7 +101,7 @@ const toolbarButtonVariants = cva(
 )
 
 const toolbarSearchVariants = cva(
-  "flex max-w-full min-w-0 items-center gap-[var(--bh-input-content-gap)] rounded-[var(--bh-input-radius)] bg-[var(--bh-interactive-input-default)] text-[var(--bh-content-default)] shadow-[var(--shadow-input)] transition-[background-color,box-shadow] focus-within:shadow-[var(--shadow-input-focus-ring)] data-[disabled=true]:pointer-events-none data-[disabled=true]:bg-[var(--bh-interactive-input-disabled)] data-[disabled=true]:text-[var(--bh-content-disabled)]",
+  "flex max-w-full min-w-0 items-center gap-[var(--bh-input-content-gap)] rounded-[var(--bh-input-radius)] bg-[var(--bh-interactive-input-default)] text-[var(--bh-content-default)] shadow-[var(--elevation-input)] transition-[background-color,box-shadow] focus-within:shadow-[var(--elevation-input-focus-ring)] data-[disabled=true]:pointer-events-none data-[disabled=true]:bg-[var(--bh-interactive-input-disabled)] data-[disabled=true]:text-[var(--bh-content-disabled)]",
   {
     variants: {
       density: {
@@ -124,7 +124,7 @@ const toolbarSearchVariants = cva(
 )
 
 const toolbarSelectVariants = cva(
-  "inline-flex max-w-full min-w-0 items-center justify-between gap-[var(--bh-space-md-8)] rounded-[var(--bh-input-radius)] bg-[var(--bh-interactive-input-default)] px-[var(--bh-select-trigger-padding-x)] text-start 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-default)] shadow-[var(--shadow-select-trigger)] outline-none transition-[background-color,box-shadow] hover:bg-[var(--bh-bg-default-hover)] focus-visible:shadow-[var(--shadow-input-focus-ring)] disabled:pointer-events-none disabled:bg-[var(--bh-interactive-input-disabled)] disabled:text-[var(--bh-content-disabled)]",
+  "inline-flex max-w-full min-w-0 items-center justify-between gap-[var(--bh-space-md-8)] rounded-[var(--bh-input-radius)] bg-[var(--bh-interactive-input-default)] px-[var(--bh-select-trigger-padding-x)] text-start 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-default)] shadow-[var(--elevation-select-trigger)] outline-none transition-[background-color,box-shadow] hover:bg-[var(--bh-bg-default-hover)] focus-visible:shadow-[var(--elevation-input-focus-ring)] disabled:pointer-events-none disabled:bg-[var(--bh-interactive-input-disabled)] disabled:text-[var(--bh-content-disabled)]",
   {
     variants: {
       density: {
@@ -167,7 +167,7 @@ type ToolbarProps = React.ComponentProps<"div"> &
   VariantProps<typeof toolbarVariants>
 
 const Toolbar = React.forwardRef<HTMLDivElement, ToolbarProps>(function Toolbar(
-  { className, layout, wrap, role = "toolbar", ...props },
+  { className, layout, wrap, role = "group", ...props },
   ref
 ) {
   return (

package/registry/components/tooltip.tsx

@@ -29,16 +29,16 @@ const TOOLTIP_COLLISION_PADDING_PX = 8
 
 const tooltipContentVariants = cva(
   [
-    "z-[var(--bh-z-overlay)] overflow-visible bg-[var(--bh-tooltip-bg)] text-[var(--bh-tooltip-fg)] shadow-[var(--bh-tooltip-shadow)] outline-none",
+    "z-[var(--bh-z-overlay)] overflow-visible bg-[var(--bh-tooltip-bg)] text-[var(--bh-tooltip-fg)] shadow-[var(--bh-tooltip-elevation)] outline-none",
     "font-[var(--bh-font-family)] tracking-[var(--bh-text-base-letter-spacing)]",
   ],
   {
     variants: {
       variant: {
         dark:
-          "[--bh-tooltip-bg:var(--bh-bg-always-dark)] [--bh-tooltip-border:transparent] [--bh-tooltip-close-fg:var(--bh-content-on-color)] [--bh-tooltip-fg:var(--bh-content-on-color)] [--bh-tooltip-shadow:none] [--bh-tooltip-shortcut-bg:var(--bh-bg-neutral-soft)] [--bh-tooltip-shortcut-border:var(--bh-border-inverse-subtle)]",
+          "[--bh-tooltip-bg:var(--bh-bg-always-dark)] [--bh-tooltip-border:transparent] [--bh-tooltip-close-fg:var(--bh-content-on-color)] [--bh-tooltip-fg:var(--bh-content-on-color)] [--bh-tooltip-elevation:none] [--bh-tooltip-shortcut-bg:var(--bh-bg-neutral-soft)] [--bh-tooltip-shortcut-border:var(--bh-border-inverse-subtle)]",
         default:
-          "[--bh-tooltip-bg:var(--bh-bg-raised)] [--bh-tooltip-border:var(--bh-border-subtle)] [--bh-tooltip-close-fg:var(--bh-content-subtle)] [--bh-tooltip-fg:var(--bh-content-default)] [--bh-tooltip-shadow:inset_0px_0px_0px_var(--bh-border-width-default)_var(--bh-tooltip-border),var(--shadow-lg)] [--bh-tooltip-shortcut-bg:var(--bh-bg-neutral-subtle)] [--bh-tooltip-shortcut-border:var(--bh-border-subtle)]",
+          "[--bh-tooltip-bg:var(--bh-bg-raised)] [--bh-tooltip-border:var(--bh-border-subtle)] [--bh-tooltip-close-fg:var(--bh-content-subtle)] [--bh-tooltip-fg:var(--bh-content-default)] [--bh-tooltip-elevation:inset_0px_0px_0px_var(--bh-border-width-default)_var(--bh-tooltip-border),var(--elevation-04)] [--bh-tooltip-shortcut-bg:var(--bh-bg-neutral-subtle)] [--bh-tooltip-shortcut-border:var(--bh-border-subtle)]",
       },
       size: {
         sm:
@@ -244,11 +244,13 @@ function TooltipLargeContent({
 function TooltipShortcut({
   children = "/",
   className,
+  dir = "ltr",
   ...props
 }: TooltipShortcutProps) {
   return (
     <span
       data-slot="tooltip-shortcut"
+      dir={dir}
       className={cn(
         "flex h-[var(--bh-tooltip-shortcut-height)] min-w-[var(--bh-tooltip-shortcut-min-width)] shrink-0 items-center justify-center rounded-[var(--bh-radius-sm-4)] border border-[var(--bh-tooltip-shortcut-border)] bg-[var(--bh-tooltip-shortcut-bg)] px-[var(--bh-space-xs-4)] text-center text-[length:var(--bh-text-body-2xs-medium-font-size)] font-[var(--bh-text-body-2xs-medium-font-weight)] leading-[var(--bh-text-body-2xs-medium-line-height)] tracking-[var(--bh-text-body-2xs-medium-letter-spacing)]",
         className
@@ -272,7 +274,7 @@ function TooltipCloseButton({
       data-slot="tooltip-close"
       type={type || "button"}
       className={cn(
-        "inline-flex size-[var(--bh-tooltip-close-size)] shrink-0 items-center justify-center rounded-[var(--bh-radius-full)] border-0 bg-transparent p-0 text-[var(--bh-tooltip-close-fg)] outline-none transition-[background-color,box-shadow] hover:bg-[var(--bh-interactive-ghost-hover)] focus-visible:shadow-[var(--shadow-button-focus)]",
+        "inline-flex size-[var(--bh-tooltip-close-size)] shrink-0 items-center justify-center rounded-[var(--bh-radius-full)] border-0 bg-transparent p-0 text-[var(--bh-tooltip-close-fg)] outline-none transition-[background-color,box-shadow] hover:bg-[var(--bh-interactive-ghost-hover)] focus-visible:shadow-[var(--elevation-button-focus)]",
         className
       )}
       {...props}

package/registry/examples/agent-input-demo.tsx

@@ -0,0 +1,90 @@
+import * as React from "react"
+import {
+  BotIcon,
+  BrainIcon,
+  FileSearchIcon,
+  GlobeIcon,
+  ListCollapseIcon,
+  SparklesIcon,
+} from "lucide-react"
+
+import {
+  AgentInput,
+  type AgentInputModel,
+  type AgentInputPayload,
+  type AgentInputSkill,
+} from "@/components/ui/agent-input"
+
+const models: AgentInputModel[] = [
+  {
+    description: "Most capable for complex, multi-step reasoning.",
+    icon: <SparklesIcon />,
+    id: "reasoning-xl",
+    meta: "200k context",
+    name: "Reasoning XL",
+  },
+  {
+    description: "Fast all-rounder with strong tool use.",
+    icon: <BotIcon />,
+    id: "general-pro",
+    meta: "400k context",
+    name: "General Pro",
+  },
+  {
+    description: "Long-context model for large documents and codebases.",
+    icon: <BrainIcon />,
+    id: "long-context",
+    meta: "1M context",
+    name: "Long Context",
+  },
+]
+
+const skills: AgentInputSkill[] = [
+  { icon: <FileSearchIcon />, id: "deep-research", name: "Deep research" },
+  { icon: <ListCollapseIcon />, id: "code-review", name: "Code review" },
+  { icon: <GlobeIcon />, id: "web-search", name: "Web search" },
+  { icon: <SparklesIcon />, id: "summarize", name: "Summarize" },
+]
+
+const enhanced =
+  "Rewrite this prompt to be clear and specific: state the goal, add the relevant context and constraints, define the expected output format and tone, and note any assumptions. Ask a clarifying question first if key details are missing."
+
+/**
+ * Integration seam: replace the timeout with a request to your model API and
+ * honour the abort signal so an in-flight enhance can be cancelled.
+ */
+async function mockEnhance(_prompt: string, signal: AbortSignal) {
+  await new Promise((resolve) => setTimeout(resolve, 2500))
+  if (signal.aborted) throw new DOMException("Aborted", "AbortError")
+  return enhanced
+}
+
+export function AgentInputDemo() {
+  const [sent, setSent] = React.useState<AgentInputPayload | null>(null)
+  // Integration seam: picked attachments carry their File. Upload them here,
+  // or as soon as they arrive through onAttachmentsChange.
+  const files = sent?.attachments.flatMap((attachment) => attachment.file ?? []) ?? []
+
+  return (
+    <div className="grid w-full max-w-[var(--bh-space-19xl-384)] gap-[var(--bh-space-xl-12)]">
+      <AgentInput
+        models={models}
+        onEnhance={mockEnhance}
+        onSend={setSent}
+        skills={skills}
+      />
+
+      {sent ? (
+        <p
+          aria-live="polite"
+          className="text-[length:var(--bh-text-body-xs-regular-font-size)] leading-[var(--bh-text-body-xs-regular-line-height)] text-[var(--bh-content-subtle)]"
+        >
+          Sent to {sent.model}: {sent.text}
+          {files.length > 0
+            ? ` (${files.length} ${files.length === 1 ? "file" : "files"} ready to upload)`
+            : null}
+        </p>
+      ) : null}
+    </div>
+  )
+}

package/registry/examples/app-header-demo.tsx

@@ -0,0 +1,40 @@
+import { BellIcon } from "lucide-react"
+
+import {
+  AppHeader,
+  AppHeaderAction,
+  AppHeaderEnd,
+  AppHeaderSearch,
+  AppHeaderStart,
+} from "@/components/ui/app-header"
+import { Breadcrumbs } from "@/components/ui/expanded/Breadcrumbs"
+import { Input } from "@/components/ui/input"
+
+export function AppHeaderDemo() {
+  return (
+    <AppHeader>
+      <AppHeaderStart>
+        <Breadcrumbs
+          aria-label="Breadcrumb"
+          items={[{ label: "Recruiting", href: "#overview" }, { label: "Overview" }]}
+          size="sm"
+        />
+      </AppHeaderStart>
+      <AppHeaderEnd>
+        <AppHeaderSearch onSubmit={(event) => event.preventDefault()}>
+          <Input
+            aria-label="Search workspace"
+            hasHelperText={false}
+            hasLabel={false}
+            placeholder="Search workspace"
+            type="search"
+          />
+        </AppHeaderSearch>
+        <AppHeaderAction aria-label="Notifications" icon={<BellIcon />} />
+        <AppHeaderAction aria-label="EN, switch language to Arabic" size="sm">
+          EN
+        </AppHeaderAction>
+      </AppHeaderEnd>
+    </AppHeader>
+  )
+}

package/registry/examples/approval-card-demo.tsx

@@ -0,0 +1,83 @@
+import * as React from "react"
+
+import {
+  ApprovalCommand,
+  ApprovalPlan,
+  type ApprovalPlanStep,
+  type ApprovalQuestion,
+  ApprovalQuestions,
+} from "@/components/ui/approval-card"
+
+const questions: ApprovalQuestion[] = [
+  {
+    id: "auth",
+    options: ["Session cookies", "JWT bearer", "OAuth only"],
+    prompt: "Which auth approach should we use?",
+  },
+  {
+    id: "secrets",
+    options: [".env.local", "Vault / secrets manager", "CI only"],
+    prompt: "Where should secrets live?",
+  },
+  {
+    id: "flag",
+    options: ["Yes, gradual rollout", "No, full release"],
+    prompt: "Ship behind a feature flag?",
+  },
+]
+
+const plan: ApprovalPlanStep[] = [
+  { id: "p1", title: "Add migration for sessions table" },
+  { id: "p2", title: "Wire auth middleware" },
+  { id: "p3", title: "Update login flow and tests" },
+  { id: "p4", title: "Add account settings page" },
+  { id: "p5", title: "Tighten CSRF and rate limits" },
+  { id: "p6", title: "Write rollout notes" },
+]
+
+export function ApprovalCardDemo() {
+  const [status, setStatus] = React.useState<string | null>(null)
+
+  return (
+    <div className="grid w-full max-w-[var(--bh-space-19xl-384)] gap-[var(--bh-space-3xl-16)]">
+      <ApprovalQuestions
+        onApprove={({ answers }) =>
+          setStatus(`Answers: ${JSON.stringify(answers)}`)
+        }
+        onReject={() => setStatus("Questions skipped")}
+        questions={questions}
+      />
+
+      <ApprovalCommand
+        command="pnpm db:migrate && pnpm build"
+        cwd="~/acme"
+        onApprove={() => setStatus("Command approved")}
+        onReject={() => setStatus("Command skipped")}
+      />
+
+      <ApprovalPlan
+        autoApproveSeconds={30}
+        onApprove={({ source }) =>
+          setStatus(source === "timeout" ? "Plan auto-approved" : "Plan approved")
+        }
+        onDownload={() => setStatus("Plan downloaded")}
+        onExpand={() => setStatus("Plan expanded")}
+        onViewPlan={() => setStatus("Plan opened")}
+        plan={plan}
+        planSummary={
+          "Ship cookie-based sessions with middleware and tests.\nIncludes a safe rollout path for production."
+        }
+        planTitle="Session auth migration"
+      />
+
+      {status ? (
+        <p
+          aria-live="polite"
+          className="text-[length:var(--bh-text-body-xs-regular-font-size)] leading-[var(--bh-text-body-xs-regular-line-height)] text-[var(--bh-content-subtle)]"
+        >
+          {status}
+        </p>
+      ) : null}
+    </div>
+  )
+}

package/registry/examples/button-demo.tsx

@@ -16,6 +16,9 @@ export function ButtonDemo() {
         <Button variant="danger">Danger</Button>
         <Button variant="soft-danger">Soft Danger</Button>
         <Button variant="white">White</Button>
+        <Button variant="success">Success</Button>
+        <Button variant="warning">Warning</Button>
+        <Button variant="link">Link</Button>
       </div>
 
       <div className="flex flex-wrap items-center gap-[var(--bh-space-xl-12)]">

package/registry/examples/chart-block-demo.tsx

@@ -0,0 +1,5 @@
+import { ChartBlock } from "@/components/ui/chart-block"
+
+export function ChartBlockDemo() {
+  return <ChartBlock block="latency" />
+}