tembro 1.0.0

package/packages/cli/vendor/src/components/inputs/simple-select.tsx

@@ -0,0 +1,165 @@
+import * as React from "react"
+import { CheckIcon, LoaderCircleIcon, SearchIcon, XIcon } from "lucide-react"
+
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select"
+import { cn, stopInteractivePropagation } from "@/lib/utils"
+
+export type SimpleSelectOption = {
+  label: React.ReactNode
+  value: string
+  disabled?: boolean
+  description?: React.ReactNode
+  keywords?: string[]
+}
+
+export type SimpleSelectProps = Omit<
+  React.ComponentProps<typeof Select>,
+  "value" | "onValueChange"
+> & {
+  value?: string
+  onValueChange?: (value: string | undefined) => void
+  options: SimpleSelectOption[]
+  placeholder?: string
+  searchPlaceholder?: string
+  emptyLabel?: React.ReactNode
+  clearLabel?: string
+  size?: "sm" | "default"
+  clearable?: boolean
+  searchable?: boolean
+  loading?: boolean
+  loadingLabel?: React.ReactNode
+  disabled?: boolean
+  triggerClassName?: string
+  contentClassName?: string
+  itemClassName?: string
+  searchClassName?: string
+  renderOption?: (option: SimpleSelectOption, state: { selected: boolean }) => React.ReactNode
+  invalid?: boolean
+}
+
+function optionMatchesSearch(option: SimpleSelectOption, search: string) {
+  const normalized = search.trim().toLowerCase()
+  if (!normalized) return true
+
+  const labelText = typeof option.label === "string" || typeof option.label === "number" ? String(option.label) : option.value
+  const haystack = [labelText, option.value, ...(option.keywords ?? [])].join(" ").toLowerCase()
+  return haystack.includes(normalized)
+}
+
+function SimpleSelect({
+  value,
+  onValueChange,
+  options,
+  placeholder = "Select",
+  searchPlaceholder = "Search options...",
+  emptyLabel = "No options found",
+  clearLabel = "Clear selection",
+  size = "default",
+  clearable = false,
+  searchable = false,
+  loading = false,
+  loadingLabel = "Loading options...",
+  disabled = false,
+  triggerClassName,
+  contentClassName,
+  itemClassName,
+  searchClassName,
+  renderOption,
+  invalid,
+  ...props
+}: SimpleSelectProps) {
+  const [search, setSearch] = React.useState("")
+  const selectedOption = options.find((option) => option.value === value)
+  const filteredOptions = options.filter((option) => optionMatchesSearch(option, search))
+
+  return (
+    <Select value={value} onValueChange={(val) => onValueChange?.(val as string)} disabled={disabled || loading} {...props}>
+      <SelectTrigger
+        size={size}
+        aria-invalid={invalid || undefined}
+        className={cn(
+          "w-full",
+          triggerClassName
+        )}
+      >
+        <SelectValue placeholder={placeholder}>{selectedOption?.label}</SelectValue>
+        {loading ? <LoaderCircleIcon className="size-4 animate-spin text-muted-foreground" /> : null}
+        {clearable && value && !disabled && !loading ? (
+          <button
+            type="button"
+            aria-label={clearLabel}
+            className="ml-1 rounded-sm p-0.5 text-muted-foreground hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+            onClick={(event) => {
+              event.preventDefault()
+              stopInteractivePropagation(event)
+              onValueChange?.(undefined)
+            }}
+            onMouseDown={stopInteractivePropagation}
+            onDoubleClick={stopInteractivePropagation}
+          >
+            <XIcon className="size-3.5" />
+          </button>
+        ) : null}
+      </SelectTrigger>
+      <SelectContent
+        className={cn(
+          "w-(--anchor-width)",
+          contentClassName
+        )}
+      >
+        {searchable ? (
+          <div data-slot="select-search" className="sticky top-0 z-10 mb-1 flex items-center gap-2 rounded-[min(var(--radius-lg),14px)] border px-2.5 py-2 text-sm">
+            <SearchIcon className="size-4 text-muted-foreground" />
+            <input
+              value={search}
+              onChange={(event) => setSearch(event.target.value)}
+              placeholder={searchPlaceholder}
+              className={cn("min-w-0 flex-1 bg-transparent outline-none placeholder:text-muted-foreground", searchClassName)}
+            />
+          </div>
+        ) : null}
+
+        {loading ? (
+          <div data-slot="select-state" className="flex items-center gap-2 rounded-[min(var(--radius-lg),14px)] px-3 py-2.5 text-sm text-muted-foreground">
+            <LoaderCircleIcon className="size-4 animate-spin" />
+            {loadingLabel}
+          </div>
+        ) : filteredOptions.length === 0 ? (
+          <div data-slot="select-state" className="rounded-[min(var(--radius-lg),14px)] px-3 py-2.5 text-sm text-muted-foreground">{emptyLabel}</div>
+        ) : (
+          filteredOptions.map((option) => {
+            const selected = option.value === value
+            return (
+              <SelectItem
+                key={option.value}
+                value={option.value}
+                disabled={option.disabled}
+                className={cn("rounded-[min(var(--radius-lg),14px)]", itemClassName)}
+              >
+                {renderOption ? (
+                  renderOption(option, { selected })
+                ) : (
+                  <span className="flex min-w-0 flex-1 flex-col">
+                    <span className="flex min-w-0 items-center gap-2">
+                      <span className="truncate">{option.label}</span>
+                      {selected ? <CheckIcon className="ml-auto size-3.5 text-primary" /> : null}
+                    </span>
+                    {option.description && <span className="truncate text-xs text-muted-foreground">{option.description}</span>}
+                  </span>
+                )}
+              </SelectItem>
+            )
+          })
+        )}
+      </SelectContent>
+    </Select>
+  )
+}
+
+export { SimpleSelect }

package/packages/cli/vendor/src/components/inputs/slider.tsx

@@ -0,0 +1,192 @@
+import * as React from "react"
+import type { CSSProperties } from "react"
+
+import { cn } from "@/lib/utils"
+
+function clampValue(value: number, min: number, max: number) {
+  return Math.min(Math.max(value, min), max)
+}
+
+function getProgressPercent(value: number, min: number, max: number) {
+  if (max <= min) return 0
+  return ((value - min) / (max - min)) * 100
+}
+
+function getSliderTrackStyle(value: number, min: number, max: number): CSSProperties {
+  const progress = getProgressPercent(clampValue(value, min, max), min, max)
+
+  return {
+    background: `linear-gradient(90deg, var(--aui-brand-strong) 0%, var(--aui-brand-strong) ${progress}%, var(--aui-control-bg) ${progress}%, var(--aui-control-bg) 100%)`,
+  }
+}
+
+export type SliderProps = Omit<React.ComponentProps<"input">, "type" | "value" | "defaultValue" | "onChange"> & {
+  value?: number
+  defaultValue?: number
+  onValueChange?: (value: number) => void
+  min?: number
+  max?: number
+  step?: number
+  label?: React.ReactNode
+  description?: React.ReactNode
+  showValue?: boolean
+  formatValue?: (value: number) => React.ReactNode
+}
+
+function Slider({
+  value,
+  defaultValue = 0,
+  onValueChange,
+  min = 0,
+  max = 100,
+  step = 1,
+  label,
+  description,
+  showValue = false,
+  formatValue,
+  className,
+  disabled,
+  ...props
+}: SliderProps) {
+  const [internalValue, setInternalValue] = React.useState(defaultValue)
+  const currentValue = value ?? internalValue
+  const resolvedValue = formatValue?.(currentValue) ?? currentValue
+
+  const updateValue = (nextValue: number) => {
+    if (value === undefined) setInternalValue(nextValue)
+    onValueChange?.(nextValue)
+  }
+
+  return (
+    <div data-slot="slider" className={cn("grid gap-3", className)}>
+      {(label || description || showValue) && (
+        <div className="flex items-start justify-between gap-3">
+          <div className="grid gap-1">
+            {label && <label className="text-sm font-semibold tracking-tight text-foreground">{label}</label>}
+            {description && <div className="text-xs leading-5 text-muted-foreground">{description}</div>}
+          </div>
+          {showValue && (
+            <div className="inline-flex min-h-8 items-center rounded-full border border-[color:var(--aui-surface-border)] bg-[color:var(--aui-control-bg)] px-3 text-sm font-semibold text-foreground shadow-sm">
+              {resolvedValue}
+            </div>
+          )}
+        </div>
+      )}
+      <input
+        data-slot="slider-input"
+        type="range"
+        value={currentValue}
+        min={min}
+        max={max}
+        step={step}
+        disabled={disabled}
+        style={getSliderTrackStyle(currentValue, min, max)}
+        className="h-3 w-full cursor-pointer appearance-none rounded-full border border-[color:var(--aui-surface-border)] bg-[color:var(--aui-control-bg)] shadow-[inset_0_1px_2px_rgba(15,23,42,0.08)] outline-none transition hover:brightness-[1.02] disabled:cursor-not-allowed disabled:opacity-50 [&::-moz-range-thumb]:size-5 [&::-moz-range-thumb]:rounded-full [&::-moz-range-thumb]:border-[3px] [&::-moz-range-thumb]:border-[color:var(--aui-page-bg)] [&::-moz-range-thumb]:bg-[color:var(--aui-brand-strong)] [&::-moz-range-thumb]:shadow-[0_8px_24px_rgba(16,185,129,0.24)] [&::-moz-range-thumb]:transition [&::-moz-range-track]:h-3 [&::-moz-range-track]:rounded-full [&::-webkit-slider-runnable-track]:h-3 [&::-webkit-slider-runnable-track]:rounded-full [&::-webkit-slider-thumb]:mt-[-5px] [&::-webkit-slider-thumb]:size-5 [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:border-[3px] [&::-webkit-slider-thumb]:border-[color:var(--aui-page-bg)] [&::-webkit-slider-thumb]:bg-[color:var(--aui-brand-strong)] [&::-webkit-slider-thumb]:shadow-[0_8px_24px_rgba(16,185,129,0.24)]"
+        onChange={(event) => updateValue(event.currentTarget.valueAsNumber)}
+        {...props}
+      />
+    </div>
+  )
+}
+
+export type RangeSliderValue = [number, number]
+
+export type RangeSliderProps = Omit<SliderProps, "value" | "defaultValue" | "onValueChange" | "showValue" | "formatValue"> & {
+  value?: RangeSliderValue
+  defaultValue?: RangeSliderValue
+  onValueChange?: (value: RangeSliderValue) => void
+  showValue?: boolean
+  formatValue?: (value: RangeSliderValue) => React.ReactNode
+}
+
+function getRangeFillStyle(value: RangeSliderValue, min: number, max: number): CSSProperties {
+  const start = getProgressPercent(clampValue(value[0], min, max), min, max)
+  const end = getProgressPercent(clampValue(value[1], min, max), min, max)
+
+  return {
+    left: `${start}%`,
+    width: `${Math.max(end - start, 0)}%`,
+  }
+}
+
+function RangeSlider({
+  value,
+  defaultValue = [0, 100],
+  onValueChange,
+  min = 0,
+  max = 100,
+  step = 1,
+  label,
+  description,
+  showValue = false,
+  formatValue,
+  className,
+  disabled,
+  ...props
+}: RangeSliderProps) {
+  const [internalValue, setInternalValue] = React.useState<RangeSliderValue>(defaultValue)
+  const currentValue = value ?? internalValue
+  const resolvedValue = formatValue?.(currentValue) ?? `${currentValue[0]} - ${currentValue[1]}`
+
+  const updateValue = (index: 0 | 1, nextPart: number) => {
+    const nextValue: RangeSliderValue = index === 0
+      ? [Math.min(nextPart, currentValue[1]), currentValue[1]]
+      : [currentValue[0], Math.max(nextPart, currentValue[0])]
+
+    if (value === undefined) setInternalValue(nextValue)
+    onValueChange?.(nextValue)
+  }
+
+  return (
+    <div data-slot="range-slider" className={cn("grid gap-3", className)}>
+      {(label || description || showValue) && (
+        <div className="flex items-start justify-between gap-3">
+          <div className="grid gap-1">
+            {label && <label className="text-sm font-semibold tracking-tight text-foreground">{label}</label>}
+            {description && <div className="text-xs leading-5 text-muted-foreground">{description}</div>}
+          </div>
+          {showValue && (
+            <div className="inline-flex min-h-8 items-center rounded-full border border-[color:var(--aui-surface-border)] bg-[color:var(--aui-control-bg)] px-3 text-sm font-semibold text-foreground shadow-sm">
+              {resolvedValue}
+            </div>
+          )}
+        </div>
+      )}
+      <div className="grid gap-3 rounded-2xl border border-[color:var(--aui-surface-border)] bg-[color:color-mix(in_srgb,var(--aui-control-bg)_82%,white_18%)] px-4 py-4 shadow-[inset_0_1px_0_rgba(255,255,255,0.3)] dark:bg-[color:color-mix(in_srgb,var(--aui-control-bg)_90%,black_10%)]">
+        <div className="relative h-6">
+          <div className="absolute top-1/2 h-3 w-full -translate-y-1/2 rounded-full border border-[color:var(--aui-surface-border)] bg-[color:var(--aui-control-bg)] shadow-[inset_0_1px_2px_rgba(15,23,42,0.08)]" />
+          <div
+            className="absolute top-1/2 h-3 -translate-y-1/2 rounded-full bg-[color:var(--aui-brand-strong)] shadow-[0_8px_24px_rgba(16,185,129,0.18)]"
+            style={getRangeFillStyle(currentValue, min, max)}
+          />
+        </div>
+        <div className="relative -mt-8 h-6">
+          <input
+            type="range"
+            value={currentValue[0]}
+            min={min}
+            max={max}
+            step={step}
+            disabled={disabled}
+            className="pointer-events-none absolute inset-0 h-6 w-full cursor-pointer appearance-none bg-transparent outline-none disabled:cursor-not-allowed disabled:opacity-50 [&::-moz-range-thumb]:pointer-events-auto [&::-moz-range-thumb]:size-5 [&::-moz-range-thumb]:rounded-full [&::-moz-range-thumb]:border-[3px] [&::-moz-range-thumb]:border-[color:var(--aui-page-bg)] [&::-moz-range-thumb]:bg-[color:var(--aui-brand-strong)] [&::-moz-range-thumb]:shadow-[0_8px_24px_rgba(16,185,129,0.24)] [&::-moz-range-track]:h-3 [&::-moz-range-track]:rounded-full [&::-moz-range-track]:bg-transparent [&::-webkit-slider-runnable-track]:h-3 [&::-webkit-slider-runnable-track]:rounded-full [&::-webkit-slider-runnable-track]:bg-transparent [&::-webkit-slider-thumb]:pointer-events-auto [&::-webkit-slider-thumb]:mt-[-5px] [&::-webkit-slider-thumb]:size-5 [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:border-[3px] [&::-webkit-slider-thumb]:border-[color:var(--aui-page-bg)] [&::-webkit-slider-thumb]:bg-[color:var(--aui-brand-strong)] [&::-webkit-slider-thumb]:shadow-[0_8px_24px_rgba(16,185,129,0.24)]"
+            onChange={(event) => updateValue(0, event.currentTarget.valueAsNumber)}
+            {...props}
+          />
+          <input
+            type="range"
+            value={currentValue[1]}
+            min={min}
+            max={max}
+            step={step}
+            disabled={disabled}
+            className="pointer-events-none absolute inset-0 h-6 w-full cursor-pointer appearance-none bg-transparent outline-none disabled:cursor-not-allowed disabled:opacity-50 [&::-moz-range-thumb]:pointer-events-auto [&::-moz-range-thumb]:size-5 [&::-moz-range-thumb]:rounded-full [&::-moz-range-thumb]:border-[3px] [&::-moz-range-thumb]:border-[color:var(--aui-page-bg)] [&::-moz-range-thumb]:bg-[color:var(--aui-brand-strong)] [&::-moz-range-thumb]:shadow-[0_8px_24px_rgba(16,185,129,0.24)] [&::-moz-range-track]:h-3 [&::-moz-range-track]:rounded-full [&::-moz-range-track]:bg-transparent [&::-webkit-slider-runnable-track]:h-3 [&::-webkit-slider-runnable-track]:rounded-full [&::-webkit-slider-runnable-track]:bg-transparent [&::-webkit-slider-thumb]:pointer-events-auto [&::-webkit-slider-thumb]:mt-[-5px] [&::-webkit-slider-thumb]:size-5 [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:border-[3px] [&::-webkit-slider-thumb]:border-[color:var(--aui-page-bg)] [&::-webkit-slider-thumb]:bg-[color:var(--aui-brand-strong)] [&::-webkit-slider-thumb]:shadow-[0_8px_24px_rgba(16,185,129,0.24)]"
+            onChange={(event) => updateValue(1, event.currentTarget.valueAsNumber)}
+            {...props}
+          />
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export { RangeSlider, Slider }

package/packages/cli/vendor/src/components/inputs/tag-input.tsx

@@ -0,0 +1,129 @@
+import * as React from "react"
+import { XIcon } from "lucide-react"
+
+import { Badge } from "@/components/ui/badge"
+import { Input } from "@/components/ui/input"
+import { cn, stopInteractivePropagation } from "@/lib/utils"
+
+export type TagInputProps = Omit<React.ComponentProps<"div">, "onChange"> & {
+  value?: string[]
+  defaultValue?: string[]
+  onValueChange?: (value: string[]) => void
+  placeholder?: string
+  disabled?: boolean
+  readOnly?: boolean
+  maxTags?: number
+  allowDuplicates?: boolean
+  separators?: string[]
+  normalizeTag?: (tag: string) => string
+}
+
+function TagInput({
+  value,
+  defaultValue = [],
+  onValueChange,
+  placeholder = "Add tag...",
+  disabled = false,
+  readOnly = false,
+  maxTags,
+  allowDuplicates = false,
+  separators = [",", "Enter"],
+  normalizeTag = (tag) => tag.trim(),
+  className,
+  ...props
+}: TagInputProps) {
+  const controlled = value !== undefined
+  const [internalValue, setInternalValue] = React.useState(defaultValue)
+  const [inputValue, setInputValue] = React.useState("")
+  const tags = controlled ? value : internalValue
+  const atLimit = maxTags !== undefined && tags.length >= maxTags
+
+  const setTags = React.useCallback(
+    (nextTags: string[]) => {
+      if (!controlled) setInternalValue(nextTags)
+      onValueChange?.(nextTags)
+    },
+    [controlled, onValueChange]
+  )
+
+  const addTag = React.useCallback(
+    (rawTag: string) => {
+      const tag = normalizeTag(rawTag)
+      if (!tag) return
+      if (maxTags !== undefined && tags.length >= maxTags) return
+      if (!allowDuplicates && tags.includes(tag)) return
+      setTags([...tags, tag])
+      setInputValue("")
+    },
+    [allowDuplicates, maxTags, normalizeTag, setTags, tags]
+  )
+
+  const removeTag = React.useCallback(
+    (tagToRemove: string) => {
+      setTags(tags.filter((tag) => tag !== tagToRemove))
+    },
+    [setTags, tags]
+  )
+
+  return (
+    <div data-slot="tag-input" className={cn("grid gap-2", className)} {...props}>
+      <div
+        className={cn(
+          "flex min-h-12 flex-wrap items-center gap-2 rounded-2xl border border-[color:var(--aui-surface-border)] bg-[color:color-mix(in_srgb,var(--aui-control-bg)_78%,white_22%)] px-3 py-2.5 shadow-sm transition focus-within:border-[color:var(--aui-brand-strong)] focus-within:ring-4 focus-within:ring-[color:color-mix(in_srgb,var(--aui-brand-strong)_14%,transparent)] dark:bg-[color:color-mix(in_srgb,var(--aui-control-bg)_90%,black_10%)]",
+          disabled && "opacity-60",
+          readOnly && "bg-muted/30"
+        )}
+      >
+        {tags.map((tag) => (
+          <Badge
+            key={tag}
+            variant="secondary"
+            className="h-8 gap-1 rounded-full border border-[color:var(--aui-surface-border)] bg-[color:var(--aui-page-bg)] px-3 pr-1 text-[13px] font-medium shadow-sm"
+          >
+            {tag}
+            {!readOnly && !disabled && (
+              <button
+                type="button"
+                className="inline-flex size-5 items-center justify-center rounded-full text-muted-foreground transition hover:bg-[color:var(--aui-control-bg)] hover:text-foreground"
+                onClick={(event) => {
+                  stopInteractivePropagation(event)
+                  removeTag(tag)
+                }}
+                onMouseDown={stopInteractivePropagation}
+                onDoubleClick={stopInteractivePropagation}
+              >
+                <XIcon className="size-3" />
+              </button>
+            )}
+          </Badge>
+        ))}
+        {!readOnly && (
+          <Input
+            value={inputValue}
+            disabled={disabled || atLimit}
+            placeholder={placeholder}
+            className="h-8 min-w-32 flex-1 border-0 bg-transparent px-1 text-sm shadow-none placeholder:text-[color:var(--aui-text-muted)] focus-visible:ring-0"
+            onChange={(event) => setInputValue(event.target.value)}
+            onBlur={() => addTag(inputValue)}
+            onKeyDown={(event) => {
+              if (separators.includes(event.key)) {
+                event.preventDefault()
+                addTag(inputValue)
+              }
+              if (event.key === "Backspace" && !inputValue && tags.length) {
+                removeTag(tags[tags.length - 1])
+              }
+            }}
+          />
+        )}
+        {maxTags !== undefined && (
+          <span className="ml-auto text-xs font-medium text-muted-foreground">
+            {tags.length}/{maxTags}
+          </span>
+        )}
+      </div>
+    </div>
+  )
+}
+
+export { TagInput }

package/packages/cli/vendor/src/components/inputs/time-picker.tsx

@@ -0,0 +1,55 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+export type TimePickerProps = Omit<React.ComponentProps<"input">, "type"> & {
+  label?: React.ReactNode
+}
+
+export type DateTimePickerProps = Omit<React.ComponentProps<"input">, "type"> & {
+  label?: React.ReactNode
+}
+
+export type TimeRangePickerProps = React.ComponentProps<"div"> & {
+  from?: string
+  to?: string
+  onFromChange?: (value: string) => void
+  onToChange?: (value: string) => void
+  disabled?: boolean
+}
+
+function FieldShell({ label, className, children }: { label?: React.ReactNode; className?: string; children: React.ReactNode }) {
+  return (
+    <label className={cn("grid gap-1.5 text-sm", className)}>
+      {label && <span className="font-medium">{label}</span>}
+      {children}
+    </label>
+  )
+}
+
+function TimePicker({ label, className, ...props }: TimePickerProps) {
+  return (
+    <FieldShell label={label}>
+      <input type="time" className={cn("h-10 rounded-md border bg-background px-3 text-sm outline-none ring-offset-background focus-visible:ring-2 focus-visible:ring-ring", className)} {...props} />
+    </FieldShell>
+  )
+}
+
+function DateTimePicker({ label, className, ...props }: DateTimePickerProps) {
+  return (
+    <FieldShell label={label}>
+      <input type="datetime-local" className={cn("h-10 rounded-md border bg-background px-3 text-sm outline-none ring-offset-background focus-visible:ring-2 focus-visible:ring-ring", className)} {...props} />
+    </FieldShell>
+  )
+}
+
+function TimeRangePicker({ from, to, onFromChange, onToChange, disabled, className, ...props }: TimeRangePickerProps) {
+  return (
+    <div data-slot="time-range-picker" className={cn("grid gap-2 sm:grid-cols-2", className)} {...props}>
+      <TimePicker value={from} disabled={disabled} onChange={(event) => onFromChange?.(event.target.value)} />
+      <TimePicker value={to} disabled={disabled} onChange={(event) => onToChange?.(event.target.value)} />
+    </div>
+  )
+}
+
+export { DateTimePicker, TimePicker, TimeRangePicker }

package/packages/cli/vendor/src/components/layout/app-header.tsx

@@ -0,0 +1,46 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+export type AppHeaderProps = React.ComponentProps<"header"> & {
+  left?: React.ReactNode
+  center?: React.ReactNode
+  right?: React.ReactNode
+  sticky?: boolean
+  heightClassName?: string
+}
+
+function AppHeader({
+  className,
+  left,
+  center,
+  right,
+  sticky = true,
+  heightClassName = "h-14",
+  children,
+  ...props
+}: AppHeaderProps) {
+  return (
+    <header
+      data-slot="app-header"
+      data-sticky={sticky || undefined}
+      className={cn(
+        "z-30 flex shrink-0 items-center gap-3 border-b bg-background/95 px-4 backdrop-blur supports-[backdrop-filter]:bg-background/80",
+        sticky && "sticky top-0",
+        heightClassName,
+        className
+      )}
+      {...props}
+    >
+      {children ?? (
+        <>
+          {left && <div className="flex min-w-0 flex-1 items-center gap-2">{left}</div>}
+          {center && <div className="hidden min-w-0 flex-1 items-center justify-center md:flex">{center}</div>}
+          {right && <div className="ml-auto flex shrink-0 items-center gap-2">{right}</div>}
+        </>
+      )}
+    </header>
+  )
+}
+
+export { AppHeader }