banhaten 0.4.0 → 0.6.0

package/registry/components/agent-input.tsx

@@ -0,0 +1,382 @@
+"use client"
+
+import * as React from "react"
+import { ArrowUpIcon } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+import { Button } from "@/components/ui/button"
+import { ShimmerText } from "@/components/ui/shimmer-text"
+import { Spinner } from "@/components/ui/spinner"
+import { useControllableState } from "@/hooks/use-controllable-state"
+
+import {
+  AddMenu,
+  ChipRow,
+  SlashPalette,
+  useChipPresence,
+  useEnhancePill,
+  useFilePicker,
+  usePromptEnhancement,
+  useSlashPalette,
+} from "./agent-input-parts"
+import {
+  attachmentKind,
+  chipsOf,
+  withoutSlashToken,
+  type AgentInputAttachment,
+  type AgentInputLabels,
+  type AgentInputModel,
+  type AgentInputPayload,
+  type AgentInputSkill,
+} from "./agent-input-state"
+
+import "./agent-input.css"
+
+type AgentInputProps = Omit<
+  React.ComponentProps<"div">,
+  "defaultValue" | "onSubmit"
+> & {
+  /** Controlled attachment chips. Omit to let the field own picked files. */
+  attachments?: readonly AgentInputAttachment[]
+  defaultModel?: string
+  defaultSelectedSkills?: readonly string[]
+  defaultValue?: string
+  disabled?: boolean
+  labels?: Partial<AgentInputLabels>
+  model?: string
+  models?: readonly AgentInputModel[]
+  onAttachmentsChange?: (attachments: AgentInputAttachment[]) => void
+  /** Enables the Enhance Prompt action. Resolve to the rewritten prompt. */
+  onEnhance?: (prompt: string, signal: AbortSignal) => Promise<string>
+  onModelChange?: (model: string) => void
+  onSelectedSkillsChange?: (skills: string[]) => void
+  onSend?: (payload: AgentInputPayload) => void
+  onValueChange?: (value: string) => void
+  selectedSkills?: readonly string[]
+  skills?: readonly AgentInputSkill[]
+  value?: string
+}
+
+const defaultLabels: AgentInputLabels = {
+  addFiles: "Attach files",
+  addMenu: "Add attachment or switch model",
+  addPhotos: "Add photos",
+  enhance: "Enhance prompt",
+  enhancing: "Enhancing prompt",
+  model: "Model",
+  noSkills: "No matching skills",
+  placeholder: "Ask AI Agent",
+  removeAttachment: (name) => `Remove ${name}`,
+  removeSkill: (name) => `Remove ${name}`,
+  revert: "Revert",
+  send: "Send",
+  skills: "Skills",
+}
+
+/**
+ * Prompt composer for agent conversations: attachments, skills, model choice,
+ * a slash-command palette, and prompt enhancement inside one field.
+ */
+const AgentInput = React.forwardRef<HTMLDivElement, AgentInputProps>(
+  function AgentInput(
+    {
+      attachments: controlledAttachments,
+      className,
+      defaultModel,
+      defaultSelectedSkills = [],
+      defaultValue = "",
+      disabled = false,
+      labels: labelOverrides,
+      model: controlledModel,
+      models = [],
+      onAttachmentsChange,
+      onEnhance,
+      onModelChange,
+      onSelectedSkillsChange,
+      onSend,
+      onValueChange,
+      selectedSkills: controlledSkills,
+      skills = [],
+      value: controlledValue,
+      ...props
+    },
+    ref
+  ) {
+    const labels = { ...defaultLabels, ...labelOverrides }
+    const [value, setValue] = useControllableState({
+      defaultValue,
+      onChange: onValueChange,
+      value: controlledValue,
+    })
+    const [selectedModel, setModel] = useControllableState({
+      defaultValue: defaultModel ?? "",
+      onChange: onModelChange,
+      value: controlledModel,
+    })
+    // An empty id means nothing is picked yet. Fall back to the first model at
+    // read time so a list that arrives after mount still yields a selection
+    // in the payload and the menu.
+    const model = selectedModel || models[0]?.id
+    // State stays readonly; the change callbacks receive fresh arrays.
+    const [attachments, setAttachments] = useControllableState<
+      readonly AgentInputAttachment[]
+    >({
+      defaultValue: [],
+      onChange: (next) => onAttachmentsChange?.([...next]),
+      value: controlledAttachments,
+    })
+    const [selectedSkills, setSelectedSkills] = useControllableState<readonly string[]>({
+      defaultValue: defaultSelectedSkills,
+      onChange: (next) => onSelectedSkillsChange?.([...next]),
+      value: controlledSkills,
+    })
+
+    const fieldRef = React.useRef<HTMLTextAreaElement>(null)
+    const frameRef = React.useRef<HTMLDivElement>(null)
+    const nextId = React.useRef(1)
+    // Differs per mount, so picked ids stay unique when the field remounts
+    // while the host still holds earlier attachments.
+    const attachmentIdPrefix = React.useId()
+
+    const focusField = () => window.requestAnimationFrame(() => fieldRef.current?.focus())
+    // The editor unmounts while enhancing, so focus returns to it afterwards
+    // unless the user has meanwhile moved to a control outside the field.
+    const refocusField = () => {
+      const active = document.activeElement
+      if (active && active !== document.body && !frameRef.current?.contains(active)) return
+      focusField()
+    }
+
+    const slash = useSlashPalette(skills)
+    const enhancement = usePromptEnhancement({
+      frameRef,
+      onEnhance,
+      onFinish: refocusField,
+      onStart: slash.close,
+      setValue,
+      value,
+    })
+    const hasText = value.trim().length > 0
+    const sendActive = hasText && !enhancement.enhancing && !disabled
+    const pill = useEnhancePill(
+      Boolean(onEnhance) && hasText && !enhancement.enhancing && !disabled,
+      enhancement.enhancing
+    )
+    const presence = useChipPresence(chipsOf(selectedSkills, attachments))
+    const picker = useFilePicker((files, pickerKind) => {
+      setAttachments([
+        ...attachments,
+        ...files.map((file) => ({
+          file,
+          id: `${attachmentIdPrefix}-${nextId.current++}`,
+          kind: attachmentKind(file, pickerKind),
+          name: file.name,
+        })),
+      ])
+      focusField()
+    })
+    const skillName = (id: string) =>
+      skills.find((skill) => skill.id === id)?.name ?? id
+
+    // Auto-grow the editor with its content up to the token max height.
+    React.useLayoutEffect(() => {
+      const field = fieldRef.current
+      if (!field) return
+      field.style.height = "auto"
+      field.style.height = `${field.scrollHeight}px`
+    }, [value, enhancement.enhancing])
+
+    // Picking from the palette swaps the "/query" token for a skill chip.
+    const applySlash = (skill: AgentInputSkill) => {
+      const field = fieldRef.current
+      const token = slash.token.current
+      if (field && token) {
+        setValue(withoutSlashToken(value, token))
+        window.requestAnimationFrame(() => {
+          field.focus()
+          field.setSelectionRange(token.start, token.start)
+        })
+      }
+      if (!selectedSkills.includes(skill.id)) {
+        setSelectedSkills([...selectedSkills, skill.id])
+      }
+      slash.close()
+    }
+
+    const removeChip = (key: string) => {
+      const chip = presence.leave(key)
+      if (chip?.kind === "skill") {
+        setSelectedSkills(selectedSkills.filter((id) => id !== chip.skillId))
+      } else if (chip?.kind === "attachment") {
+        setAttachments(attachments.filter((item) => item.id !== chip.attachment.id))
+      }
+    }
+
+    const toggleSkill = (skillId: string) => {
+      if (selectedSkills.includes(skillId)) {
+        removeChip(`skill-${skillId}`)
+        return
+      }
+      setSelectedSkills([...selectedSkills, skillId])
+      focusField()
+    }
+
+    const send = () => {
+      if (!sendActive) return
+      onSend?.({ attachments, model, skills: selectedSkills, text: value.trim() })
+      setValue("")
+      if (attachments.length > 0) setAttachments([])
+      if (selectedSkills.length > 0) setSelectedSkills([])
+      enhancement.reset()
+      slash.close()
+      focusField()
+    }
+
+    const handleKeyDown = (event: React.KeyboardEvent<HTMLTextAreaElement>) => {
+      // Keys that pick or confirm an IME candidate (Japanese, Chinese, Korean)
+      // belong to the composition, so they never send or move the palette.
+      // Safari reports the confirming Enter with keyCode 229 instead.
+      if (event.nativeEvent.isComposing || event.keyCode === 229) return
+      if (slash.handleKey(event, applySlash)) return
+      if (event.key === "Enter" && !event.shiftKey) {
+        event.preventDefault()
+        send()
+      }
+    }
+
+    return (
+      <div
+        data-disabled={disabled ? "true" : "false"}
+        data-phase={enhancement.phase}
+        data-slot="agent-input"
+        ref={ref}
+        className={cn("min-w-0 max-w-full", className)}
+        {...props}
+      >
+        <input {...picker.inputProps} />
+        {/* Stays mounted so the text it gains is announced: a live region
+            inserted together with its text is often skipped. */}
+        <span className="sr-only" data-slot="agent-input-status" role="status">
+          {enhancement.enhancing ? labels.enhancing : null}
+        </span>
+
+        <div
+          data-enhancing={enhancement.enhancing ? "true" : "false"}
+          data-slot="agent-input-frame"
+          ref={frameRef}
+        >
+          <ChipRow
+            chips={presence.chips}
+            disabled={disabled}
+            labels={labels}
+            onExited={presence.settle}
+            onRemove={removeChip}
+            skillName={skillName}
+          />
+
+          <div data-slot="agent-input-editor">
+            {enhancement.enhancing ? (
+              <div data-slot="agent-input-enhancing">
+                <ShimmerText tone="default">{value}</ShimmerText>
+              </div>
+            ) : (
+              <textarea
+                aria-activedescendant={slash.nav.activeOptionId}
+                aria-autocomplete="list"
+                aria-controls={slash.open ? slash.id : undefined}
+                aria-haspopup="listbox"
+                aria-label={labels.placeholder}
+                data-slot="agent-input-field"
+                disabled={disabled}
+                onBlur={slash.close}
+                onChange={(event) => {
+                  setValue(event.target.value)
+                  if (enhancement.phase === "enhanced") enhancement.reset()
+                  slash.detect(event.target.value, event.target.selectionStart)
+                }}
+                onClick={(event) =>
+                  slash.detect(event.currentTarget.value, event.currentTarget.selectionStart)
+                }
+                onKeyDown={handleKeyDown}
+                onKeyUp={(event) => {
+                  if (["ArrowUp", "ArrowDown", "Enter", "Tab", "Escape"].includes(event.key))
+                    return
+                  slash.detect(event.currentTarget.value, event.currentTarget.selectionStart)
+                }}
+                placeholder={labels.placeholder}
+                ref={fieldRef}
+                rows={1}
+                value={value}
+              />
+            )}
+
+            {slash.open && !enhancement.enhancing ? (
+              <SlashPalette labels={labels} onPick={applySlash} slash={slash} />
+            ) : null}
+          </div>
+
+          <div data-slot="agent-input-row">
+            <AddMenu
+              disabled={disabled || enhancement.enhancing}
+              labels={labels}
+              model={model}
+              models={models}
+              onModelChange={setModel}
+              onPickFiles={picker.open}
+              onToggleSkill={toggleSkill}
+              selectedSkills={selectedSkills}
+              skills={skills}
+            />
+
+            <div data-slot="agent-input-actions">
+              {enhancement.enhancing ? (
+                <span data-slot="agent-input-spinner">
+                  <Spinner />
+                </span>
+              ) : pill.mounted ? (
+                <Button
+                  data-exit={pill.exiting ? "true" : "false"}
+                  data-slot="agent-input-enhance"
+                  onClick={() => {
+                    if (enhancement.phase === "enhanced") {
+                      enhancement.revert()
+                      focusField()
+                      return
+                    }
+                    void enhancement.run()
+                  }}
+                  ref={pill.ref}
+                  size="xs"
+                  variant="soft"
+                >
+                  {enhancement.phase === "enhanced" ? labels.revert : labels.enhance}
+                </Button>
+              ) : null}
+              <Button
+                aria-label={labels.send}
+                data-slot="agent-input-send"
+                disabled={!sendActive}
+                onClick={send}
+                size="icon-xs"
+                variant={sendActive ? "default" : "soft"}
+              >
+                <ArrowUpIcon />
+              </Button>
+            </div>
+          </div>
+        </div>
+      </div>
+    )
+  }
+)
+
+export { AgentInput }
+export type {
+  AgentInputAttachment,
+  AgentInputLabels,
+  AgentInputModel,
+  AgentInputPayload,
+  AgentInputPhase,
+  AgentInputSkill,
+} from "./agent-input-state"
+export type { AgentInputProps }

package/registry/components/alert-dialog.tsx

@@ -15,8 +15,8 @@ const alertDialogContentVariants = cva(
   [
     "fixed left-1/2 top-1/2 z-[var(--bh-z-overlay)] flex max-h-[calc(100vh-(var(--bh-space-8xl-48)*2))] w-[var(--bh-alert-dialog-width)]",
     "max-w-[calc(100vw-(var(--bh-space-4xl-20)*2))] -translate-x-1/2 -translate-y-1/2 flex-col overflow-hidden",
-    "rounded-[var(--bh-radius-2xl-12)] bg-[var(--bh-bg-raised)] text-[var(--bh-content-default)] shadow-[var(--shadow-modal)] outline-none",
-    "[--bh-alert-dialog-border:var(--bh-border-subtle)] [--shadow-modal:inset_0px_0px_0px_var(--bh-border-width-default)_var(--bh-alert-dialog-border),var(--shadow-2xl)]",
+    "rounded-[var(--bh-radius-2xl-12)] bg-[var(--bh-bg-raised)] text-[var(--bh-content-default)] shadow-[var(--elevation-modal)] outline-none",
+    "[--bh-alert-dialog-border:var(--bh-border-subtle)] [--elevation-modal:inset_0px_0px_0px_var(--bh-border-width-default)_var(--bh-alert-dialog-border),var(--elevation-06)]",
   ],
   {
     variants: {

package/registry/components/alert.tsx

@@ -23,13 +23,13 @@ const alertVariants = cva(
     variants: {
       status: {
         danger:
-          "[--alert-bg:var(--bh-bg-danger-subtle)] [--alert-border:var(--bh-border-danger-subtle)] [--alert-title:var(--bh-content-danger-strong)] [--alert-description:var(--bh-content-danger-strong)] [--alert-icon:var(--bh-content-danger-default)]",
+          "[--alert-bg:var(--bh-bg-danger-subtle)] [--alert-border:var(--bh-border-danger-subtle)] [--alert-title:var(--bh-content-danger-strong)] [--alert-description:var(--bh-content-danger-default)] [--alert-icon:var(--bh-content-danger-default)]",
         success:
-          "[--alert-bg:var(--bh-bg-success-subtle)] [--alert-border:var(--bh-border-success-subtle)] [--alert-title:var(--bh-content-success-strong)] [--alert-description:var(--bh-content-success-strong)] [--alert-icon:var(--bh-content-success-default)]",
+          "[--alert-bg:var(--bh-bg-success-subtle)] [--alert-border:var(--bh-border-success-subtle)] [--alert-title:var(--bh-content-success-strong)] [--alert-description:var(--bh-content-success-default)] [--alert-icon:var(--bh-content-success-default)]",
         warning:
-          "[--alert-bg:var(--bh-bg-warning-subtle)] [--alert-border:var(--bh-border-warning-subtle)] [--alert-title:var(--bh-content-warning-strong)] [--alert-description:var(--bh-content-warning-strong)] [--alert-icon:var(--bh-content-warning-default)]",
+          "[--alert-bg:var(--bh-bg-warning-subtle)] [--alert-border:var(--bh-border-warning-subtle)] [--alert-title:var(--bh-content-warning-strong)] [--alert-description:var(--bh-content-warning-default)] [--alert-icon:var(--bh-content-warning-default)]",
         info:
-          "[--alert-bg:var(--bh-bg-info-subtle)] [--alert-border:var(--bh-border-info-subtle)] [--alert-title:var(--bh-content-brand-strong)] [--alert-description:var(--bh-content-brand-strong)] [--alert-icon:var(--bh-content-brand-default)]",
+          "[--alert-bg:var(--bh-bg-info-subtle)] [--alert-border:var(--bh-border-info-subtle)] [--alert-title:var(--bh-content-brand-strong)] [--alert-description:var(--bh-content-brand-default)] [--alert-icon:var(--bh-content-brand-default)]",
         neutral:
           "[--alert-bg:var(--bh-bg-neutral-subtle)] [--alert-border:var(--bh-border-subtle)] [--alert-title:var(--bh-content-default)] [--alert-description:var(--bh-content-default)] [--alert-icon:var(--bh-content-default)]",
       },
@@ -48,6 +48,7 @@ const alertVariants = cva(
 )
 
 type AlertStatus = "danger" | "success" | "warning" | "info" | "neutral"
+type AlertDescriptionColor = "status" | "default"
 type AlertDirection = "ltr" | "rtl"
 
 type AlertMessages = {
@@ -75,7 +76,11 @@ type AlertProps = Omit<
     actions?: AlertAction[]
     closeLabel?: string
     description?: React.ReactNode
+    /** "default" sets the description in content/default instead of the status colour. */
+    descriptionColor?: AlertDescriptionColor
     dir?: AlertDirection
+    /** Replaces the status icon. */
+    icon?: React.ReactNode
     messages?: Partial<AlertMessages>
     onClose?: () => void
     showActions?: boolean
@@ -91,7 +96,9 @@ const Alert = React.forwardRef<HTMLElement, AlertProps>(function Alert(
     className,
     closeLabel,
     description,
+    descriptionColor = "status",
     dir,
+    icon,
     isExpandable = false,
     messages: messageOverrides,
     onClose,
@@ -119,7 +126,10 @@ const Alert = React.forwardRef<HTMLElement, AlertProps>(function Alert(
   const requestedActions = (showActions ?? Boolean(actions?.length))
     ? (actions ?? [])
     : []
-  const expanded = Boolean(isExpandable && requestedActions.length > 0)
+  // The expanded layout shows the description, with or without actions.
+  const expanded = Boolean(
+    isExpandable && (description !== undefined || requestedActions.length > 0)
+  )
   const visibleActions = requestedActions.slice(0, expanded ? 2 : 1)
   const visibleCloseButton = showCloseButton ?? Boolean(onClose)
   const resolvedCloseLabel =
@@ -161,7 +171,7 @@ const Alert = React.forwardRef<HTMLElement, AlertProps>(function Alert(
           data-slot="alert-icon"
           className="inline-flex size-[var(--bh-alert-icon-slot-size)] shrink-0 items-center justify-center text-[var(--alert-icon)]"
         >
-          <AlertStatusIcon status={resolvedStatus} />
+          {icon ?? <AlertStatusIcon status={resolvedStatus} />}
         </span>
         <div
           data-slot="alert-copy"
@@ -195,7 +205,12 @@ const Alert = React.forwardRef<HTMLElement, AlertProps>(function Alert(
               <p
                 data-slot="alert-description"
                 dir="auto"
-                className="m-0 w-full break-words text-[length:var(--bh-text-body-sm-regular-font-size)] font-[var(--bh-font-weight-regular)] leading-[var(--bh-text-body-sm-regular-line-height)] tracking-[var(--bh-text-body-sm-regular-letter-spacing)] text-[var(--alert-description)]"
+                className={cn(
+                  "m-0 w-full break-words text-[length:var(--bh-text-body-sm-regular-font-size)] font-[var(--bh-font-weight-regular)] leading-[var(--bh-text-body-sm-regular-line-height)] tracking-[var(--bh-text-body-sm-regular-letter-spacing)]",
+                  descriptionColor === "default"
+                    ? "text-[var(--bh-content-default)]"
+                    : "text-[var(--alert-description)]"
+                )}
               >
                 {description}
               </p>
@@ -286,6 +301,7 @@ export {
   Alert,
   alertVariants,
   type AlertAction,
+  type AlertDescriptionColor,
   type AlertDirection,
   type AlertMessages,
   type AlertProps,

package/registry/components/app-header.tsx

@@ -0,0 +1,151 @@
+"use client"
+
+import * as React from "react"
+import { Slot } from "@radix-ui/react-slot"
+
+import { cn } from "@/lib/utils"
+
+type AppHeaderProps = React.ComponentProps<"header">
+type AppHeaderSectionProps = React.ComponentProps<"div">
+type AppHeaderSearchProps = React.ComponentProps<"form">
+type AppHeaderActionSize = "sm" | "md"
+type AppHeaderActionProps = React.ComponentProps<"button"> & {
+  asChild?: boolean
+  icon?: React.ReactNode
+  size?: AppHeaderActionSize
+}
+
+/** Workspace bar above page content: a location trail at the start and workspace tools at the end. */
+function AppHeader({ className, ...props }: AppHeaderProps) {
+  return (
+    <header
+      data-slot="app-header"
+      className={cn(
+        // The rule is an inset shadow, like a Figma inside stroke, so content centers on the full height.
+        "flex min-h-[var(--bh-app-header-height)] w-full min-w-0 shrink-0 items-center gap-[var(--bh-app-header-gap)] bg-[var(--bh-app-header-bg)] px-[var(--bh-app-header-padding-x)] text-[var(--bh-content-default)] shadow-[inset_0_calc(var(--bh-border-width-default)*-1)_0_0_var(--bh-app-header-border)]",
+        "[--bh-breadcrumbs-current-content:var(--bh-app-header-location-content)]",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+/** Flexible leading region for Breadcrumbs or a short location label. It keeps a minimum width so search shrinks first. */
+function AppHeaderStart({ className, ...props }: AppHeaderSectionProps) {
+  return (
+    <div
+      data-slot="app-header-start"
+      className={cn(
+        "flex min-w-[min(var(--bh-app-header-start-min-width),100%)] flex-1 items-center gap-[var(--bh-app-header-start-gap)]",
+        "text-[length:var(--bh-text-body-sm-medium-font-size)] font-[var(--bh-text-body-sm-medium-font-weight)] leading-[var(--bh-text-body-sm-medium-line-height)] tracking-[var(--bh-text-body-sm-medium-letter-spacing)] text-[var(--bh-app-header-location-content)]",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+/** Trailing group of search and actions, spaced on the header gap. */
+function AppHeaderEnd({ className, ...props }: AppHeaderSectionProps) {
+  return (
+    <div
+      data-slot="app-header-end"
+      className={cn(
+        "flex min-w-0 items-center gap-[var(--bh-app-header-gap)]",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+/** Search landmark that sizes a nested Input to the header search width. */
+function AppHeaderSearch({
+  className,
+  role = "search",
+  ...props
+}: AppHeaderSearchProps) {
+  return (
+    <form
+      data-slot="app-header-search"
+      role={role}
+      className={cn(
+        "flex w-[var(--bh-app-header-search-width)] min-w-0 max-w-full shrink items-center [--bh-input-width:100%]",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+/**
+ * Flush header action. At rest it occupies only its icon or label, as in the
+ * workspace bar design; padding and a matching negative margin extend the
+ * hover surface and pointer target past that footprint without moving it.
+ */
+const AppHeaderAction = React.forwardRef<
+  HTMLButtonElement,
+  AppHeaderActionProps
+>(function AppHeaderAction(
+  {
+    asChild = false,
+    children,
+    className,
+    icon,
+    size = "md",
+    type = "button",
+    ...props
+  },
+  ref
+) {
+  const Comp = asChild ? Slot : "button"
+  const iconOnly = icon != null && children == null
+
+  return (
+    <Comp
+      data-icon-only={iconOnly ? "true" : undefined}
+      data-size={size}
+      data-slot="app-header-action"
+      ref={ref}
+      type={asChild ? undefined : type}
+      className={cn(
+        "m-[calc(var(--bh-app-header-action-hit-inset)*-1)] inline-flex shrink-0 cursor-pointer items-center gap-[var(--bh-space-xs-4)] whitespace-nowrap rounded-[var(--bh-app-header-action-radius)] border-0 bg-transparent p-[var(--bh-app-header-action-hit-inset)] no-underline outline-none transition-[background-color,box-shadow]",
+        "hover:bg-[var(--bh-app-header-action-bg-hover)] focus-visible:shadow-[var(--elevation-button-focus)]",
+        "disabled:cursor-not-allowed disabled:bg-transparent disabled:text-[var(--bh-content-disabled)]",
+        "[&_svg]:size-[var(--bh-app-header-icon-size)] [&_svg]:shrink-0 [&>img]:size-[var(--bh-app-header-icon-size)] [&>img]:shrink-0",
+        iconOnly
+          ? "justify-center text-[var(--bh-app-header-action-content)]"
+          : size === "sm"
+            ? "min-w-[calc(var(--bh-app-header-action-sm-min-width)+var(--bh-app-header-action-hit-inset)*2)] justify-end text-[length:var(--bh-text-body-sm-medium-font-size)] font-[var(--bh-text-body-sm-medium-font-weight)] leading-[var(--bh-text-body-sm-medium-line-height)] tracking-[var(--bh-text-body-sm-medium-letter-spacing)] text-[var(--bh-app-header-action-sm-content)]"
+            : "justify-center text-[length:var(--bh-text-body-md-medium-font-size)] font-[var(--bh-text-body-md-medium-font-weight)] leading-[var(--bh-text-body-md-medium-line-height)] tracking-[var(--bh-text-body-md-medium-letter-spacing)] text-[var(--bh-app-header-action-content)]",
+        className
+      )}
+      {...props}
+    >
+      {asChild ? (
+        children
+      ) : (
+        <>
+          {icon}
+          {children}
+        </>
+      )}
+    </Comp>
+  )
+})
+
+export {
+  AppHeader,
+  AppHeaderAction,
+  AppHeaderEnd,
+  AppHeaderSearch,
+  AppHeaderStart,
+}
+export type {
+  AppHeaderActionProps,
+  AppHeaderActionSize,
+  AppHeaderProps,
+  AppHeaderSearchProps,
+  AppHeaderSectionProps,
+}