Function bodies 541 total

function ComboBadgeSection() {
  const [tags, setTags] = useState([
    { id: 1, prefix: "Category", value: "Fraud", icon: Folder },
    { id: 2, prefix: "Region", value: "EMEA", icon: Globe },
    { id: 3, prefix: "Label", value: "Priority", icon: Tag },
  ])

  return (
    <div className="space-y-6">
      <div className="space-y-2">
        <h2 className="h2">Combo Badge</h2>
        <p className="p text-muted-foreground">
          A two-segment fused badge for category:value tag patterns. The prefix
          gets a stronger background and the value segment uses a lighter wash
          of the same tone.
        </p>
      </div>

      <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
        {/* Variants */}
        <Card level={1}>
          <CardHeader>
            <CardTitle className="label-md">Variants</CardTitle>
          </CardHeader>
          <CardContent className="flex flex-wrap gap-2">
            <ComboBadge icon={Tag} prefix="combo" variant="default">badge<

export default function BadgeGalleryPage() {
  return (
    <div className="space-y-16">
      {/* SECTION 1 — VARIANTS */}
      <div className="space-y-6">
        <div className="space-y-2">
          <h1 className="h1">Badges</h1>
          <p className="p text-muted-foreground">
            Semantic and structural badges used for labeling, status, and metadata.
          </p>
        </div>

        <div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-4 gap-6">
          {baseVariants.map((variant) => (
            <Card key={variant.name} level={1}>
              <CardHeader className="space-y-1">
                <CardTitle className="label-md">{variant.name}</CardTitle>
                <CardDescription className="p-sm text-card-foreground">{variant.description}</CardDescription>
              </CardHeader>
              <CardContent className="pt-4">
                <Badge variant={variant.name as any}>{variant.name}</Badge>
              </CardContent>
            </Car

export default function BreadcrumbGalleryPage() {
  return (
    <div className="space-y-16">
      {/* Header */}
      <div className="space-y-2">
        <h1 className="h1">Breadcrumb</h1>
        <p className="p text-muted-foreground">
          A navigation trail showing the user's location within a hierarchy.
          Built from composable sub-components for flexible breadcrumb patterns.
        </p>
      </div>

      {/* Examples */}
      <div className="space-y-6">
        <div className="space-y-2">
          <h2 className="h2">Examples</h2>
          <p className="p text-muted-foreground">
            Common breadcrumb patterns from simple trails to collapsed and
            custom-separator variants.
          </p>
        </div>

        <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
          {/* Basic */}
          <Card level={1}>
            <CardHeader>
              <CardTitle className="label-md">Basic</CardTitle>
              <CardDescription>A standar

export default function ButtonsPage() {
  return (
    <div className="space-y-10">
      <h1 className="h1">Buttons</h1>

      {/* -------------------------------- */}
      {/* Variants */}
      {/* -------------------------------- */}
      <section className="space-y-4">
        <h2 className="h2">Variants</h2>
        <div className="flex flex-wrap items-center gap-4">
          <Button variant="primary">Primary</Button>
          <Button variant="outline">Outline</Button>
          <Button variant="ghost">Ghost</Button>
          <Button variant="destructive">Destructive</Button>
          <Button variant="link">Link</Button>
        </div>
      </section>

      {/* -------------------------------- */}
      {/* Sizes */}
      {/* -------------------------------- */}
      <section className="space-y-4">
        <h2 className="h2">Sizes</h2>
        <p className="p-sm text-muted-foreground max-w-2xl">
          sm is the default. md is reserved for the most important action(

function InteractiveLegendChart() {
  const legend = useChartLegendInteractive(disputesConfig)

  return (
    <div className="flex flex-col gap-6">
      <ChartContainer config={disputesConfig} className="aspect-auto h-[280px] w-full">
        <ComposedChart data={composedData} margin={CHART_DEFAULT_MARGIN}>
          <CartesianGrid vertical={false} stroke="var(--border)" />
          <XAxis dataKey="month" tickLine={false} axisLine={false} />
          <YAxis
            yAxisId="left"
            width={CHART_DEFAULT_YAXIS_WIDTH}
            tickLine={false}
            axisLine={false}
          />
          <YAxis
            yAxisId="right"
            orientation="right"
            width={CHART_DEFAULT_YAXIS_WIDTH}
            tickLine={false}
            axisLine={false}
            tickFormatter={(v: number) =>
              v >= 1000 ? `$${(v / 1000).toFixed(0)}k` : `$${v}`
            }
          />
          <ChartTooltip content={<ChartTooltipContent />} />
          <Bar

export default function ChartPage() {
  return (
    <div className="space-y-10">
      <div className="space-y-2">
        <h1 className="h1">Chart</h1>
        <p className="p text-muted-foreground max-w-2xl">
          Design-system integration layer for Recharts. Provides themed colors,
          card-styled tooltips, wrapping left-aligned legends, and an interactive
          legend with Hide / Isolate.
        </p>
      </div>

      {/* -------------------------------- */}
      {/* Interactive legend — the headline */}
      {/* -------------------------------- */}
      <section className="space-y-4">
        <div className="space-y-1">
          <h2 className="h2">Interactive Legend</h2>
          <p className="p-sm text-muted-foreground max-w-2xl">
            Click a visible series to open Hide / Isolate. Click a hidden series
            to reveal it. Double-click a visible series to isolate it. Legend
            items wrap, align left, and sit flush with the chart's 0-a

export default function CollapsibleGalleryPage() {
  const [isOpen, setIsOpen] = useState(false)

  return (
    <div className="space-y-16">
      {/* Header */}
      <div className="space-y-2">
        <h1 className="h1">Collapsible</h1>
        <p className="p text-muted-foreground">
          A component that expands and collapses a content panel. Use for
          progressive disclosure of additional details, settings, or secondary
          content.
        </p>
      </div>

      {/* Examples */}
      <div className="space-y-6">
        <div className="space-y-2">
          <h2 className="h2">Examples</h2>
          <p className="p text-muted-foreground">
            Basic collapsible patterns with triggers and expandable content.
          </p>
        </div>

        <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
          {/* Basic */}
          <Card level={1}>
            <CardHeader>
              <CardTitle className="label-md">Basic</CardTitle>
              

export default function CommandPalettePage() {
  return (
    <div>
      <h1 className="h1">Command Palette</h1>
      <p className="p text-muted-foreground">Coming soon.</p>
    </div>
  )
}

function srgbToLinear(c: number): number {
  return c <= 0.04045 ? c / 12.92 : ((c + 0.055) / 1.055) ** 2.4
}

function relativeLuminance(r: number, g: number, b: number): number {
  return 0.2126 * srgbToLinear(r) + 0.7152 * srgbToLinear(g) + 0.0722 * srgbToLinear(b)
}

function wcagContrast(rgb1: [number, number, number], rgb2: [number, number, number]): number {
  let l1 = relativeLuminance(...rgb1)
  let l2 = relativeLuminance(...rgb2)
  if (l1 < l2) [l1, l2] = [l2, l1]
  return (l1 + 0.05) / (l2 + 0.05)
}

function apcaContrast(textRgb: [number, number, number], bgRgb: [number, number, number]): number {
  const yTxt = relativeLuminance(...textRgb)
  const yBg = relativeLuminance(...bgRgb)

  let sapc: number
  if (yBg > yTxt) {
    sapc = (yBg ** 0.56 - yTxt ** 0.57) * 1.14
  } else {
    sapc = (yBg ** 0.65 - yTxt ** 0.62) * 1.14
  }

  if (Math.abs(sapc) < 0.1) return 0
  return sapc > 0
    ? Math.round((sapc - 0.027) * 1000) / 10
    : Math.round((sapc + 0.027) * 1000) / 10
}

function wcagLevel(ratio: number): string {
  if (ratio >= 7) return "AAA"
  if (ratio >= 4.5) return "AA"
  if (ratio >= 3) return "AA Large"
  return "Fail"
}

function apcaTier(lc: number): string {
  const abs = Math.abs(lc)
  if (abs >= 90) return "Body text, small text, crucial content"
  if (abs >= 75) return "Standard text, non-critical content"
  if (abs >= 60) return "Medium text (24px+), large UI elements"
  if (abs >= 45) return "Large text (36px+), icons, design elements"
  if (abs >= 30) return "Incidental text, disabled elements"
  return "Not recommended for any text"
}

function resolveTokenToRgb(token: string): [number, number, number] | null {
  if (typeof document === "undefined") return null
  // Create a visible element so the browser fully resolves the color
  const el = document.createElement("div")
  el.style.position = "fixed"
  el.style.left = "-9999px"
  el.style.top = "-9999px"
  el.style.width = "1px"
  el.style.height = "1px"
  el.style.backgroundColor = `var(--${token})`
  document.body.appendChild(el)
  const computed = getComputedStyle(el).backgroundColor
  document.body.removeChild(el)
  // Parse rgb/rgba
  const match = computed.match(/rgba?\(\s*([\d.]+)[\s,]+([\d.]+)[\s,]+([\d.]+)/)
  if (match) {
    return [parseFloat(match[1]) / 255, parseFloat(match[2]) / 255, parseFloat(match[3]) / 255]
  }
  // If browser returned oklch or other format, use canvas to convert
  const canvas = document.createElement("canvas")
  canvas.width = 1
  canvas.height = 1
  const ctx = canvas.getContext("2d")
  if (!ctx) return null
  ctx.fillStyle = c

export function ContrastChecker() {
  const [tokenA, setTokenA] = useState("foreground")
  const [tokenB, setTokenB] = useState("background")
  const [result, setResult] = useState<{
    colorA: string
    colorB: string
    rgbA: [number, number, number]
    rgbB: [number, number, number]
    wcag: number
    apca: number
    apcaReverse: number
  } | null>(null)

  const compute = useCallback(() => {
    const rgbA = resolveTokenToRgb(tokenA)
    const rgbB = resolveTokenToRgb(tokenB)
    if (!rgbA || !rgbB) return

    setResult({
      colorA: `rgb(${Math.round(rgbA[0] * 255)}, ${Math.round(rgbA[1] * 255)}, ${Math.round(rgbA[2] * 255)})`,
      colorB: `rgb(${Math.round(rgbB[0] * 255)}, ${Math.round(rgbB[1] * 255)}, ${Math.round(rgbB[2] * 255)})`,
      rgbA,
      rgbB,
      wcag: Math.round(wcagContrast(rgbA, rgbB) * 100) / 100,
      apca: apcaContrast(rgbA, rgbB),
      apcaReverse: apcaContrast(rgbB, rgbA),
    })
  }, [tokenA, tokenB])

  useEffect(() => {
    compute()
  },

  function TokenPicker({ label, value, onValueChange }: { label: string; value: string; onValueChange: (v: string) => void }) {
    const [search, setSearch] = useState("")
    const [open, setOpen] = useState(false)
    const ref = React.useRef<HTMLDivElement>(null)

    useEffect(() => {
      if (!open) return
      function handleClick(e: MouseEvent) {
        if (ref.current && !ref.current.contains(e.target as Node)) {
          setOpen(false)
          setSearch("")
        }
      }
      document.addEventListener("mousedown", handleClick)
      return () => document.removeEventListener("mousedown", handleClick)
    }, [open])
    const filtered = search
      ? TOKEN_GROUPS.map((g) => ({
          ...g,
          tokens: g.tokens.filter((t) => t.includes(search.toLowerCase())),
        })).filter((g) => g.tokens.length > 0)
      : TOKEN_GROUPS

    return (
      <div ref={ref} className="space-y-1.5 relative">
        <div className="label-sm text-muted-foreground">{label}</

      function handleClick(e: MouseEvent) {
        if (ref.current && !ref.current.contains(e.target as Node)) {
          setOpen(false)
          setSearch("")
        }
      }

function GalleryNavLink({
  href,
  children,
  indent = false,
  onClick,
}: {
  href: string
  children: React.ReactNode
  /** Renders as an indented sub-link (smaller text, left padding) */
  indent?: boolean
  onClick?: () => void
}) {
  const pathname = usePathname()
  const isActive = pathname === href

  return (
    <a
      href={href}
      onClick={onClick}
      className={cn(
        "block rounded-md px-2 py-1 transition-colors",
        indent ? "p-sm pl-4 text-muted-foreground" : "p-sm",
        isActive
          ? "bg-accent text-foreground font-[520]"
          : "text-muted-foreground hover:bg-accent/50 hover:text-foreground",
      )}
    >
      {children}
    </a>
  )
}

function GalleryNavGroup({
  label,
  children,
}: {
  label: string
  children: React.ReactNode
}) {
  return (
    <div className="pt-4 space-y-0.5">
      <div className="label-sm text-foreground px-2 pb-1">{label}</div>
      {children}
    </div>
  )
}

export function PropTable({
  title = "Props",
  rows,
}: {
  title?: string
  rows: PropRow[]
}) {
  const hasRequired = rows.some((r) => r.required)

  return (
    <section className="space-y-3">
      <h3 className="h3">{title}</h3>
      <div className="rounded-[var(--radius)] border border-border overflow-hidden">
        <table className="w-full text-left border-collapse">
          <thead>
            <tr className="bg-secondary border-b border-border">
              <th className="px-4 py-2.5 label-sm text-muted-foreground font-normal w-40">
                Prop
              </th>
              <th className="px-4 py-2.5 label-sm text-muted-foreground font-normal w-56">
                Type
              </th>
              <th className="px-4 py-2.5 label-sm text-muted-foreground font-normal w-28">
                Default
              </th>
              <th className="px-4 py-2.5 label-sm text-muted-foreground font-normal">
                Description
              </th>
 

function WylloSymbol({ className, ...props }: React.SVGProps<SVGSVGElement>) {
  return (
    <svg
      xmlns="http://www.w3.org/2000/svg"
      viewBox="0 0 295.28 295.28"
      fill="currentColor"
      className={className}
      {...props}
    >
      <path d="M175.39,11.25l5.54,5.38c9.61,9.33,22.42,14.63,35.81,14.83l7.72.12c21.54.32,38.93,17.71,39.25,39.25l.12,7.72c.2,13.39,5.51,26.2,14.83,35.81l5.38,5.54c15,15.46,15,40.04,0,55.51l-5.38,5.54c-9.33,9.61-14.63,22.42-14.83,35.81l-.12,7.72c-.32,21.54-17.71,38.93-39.25,39.25l-7.72.12c-13.39.2-26.2,5.51-35.81,14.83l-5.54,5.38c-15.46,15-40.04,15-55.51,0l-5.54-5.38c-9.61-9.33-22.42-14.63-35.81-14.83l-7.72-.12c-21.54-.32-38.93-17.71-39.25-39.25l-.12-7.72c-.2-13.39-5.51-26.2-14.83-35.81l-5.38-5.54c-15-15.46-15-40.04,0-55.51l5.38-5.54c9.33-9.61,14.63-22.42,14.83-35.81l.12-7.72c.32-21.54,17.71-38.93,39.25-39.25l7.72-.12c13.39-.2,26.2-5.51,35.81-14.83l5.54-5.38c15.46-15,40.04-15,55.51,0ZM147.64,24.15c-68.2,0-123.49,55.29-123.49,123.49s55.29,1

export default function DataTablePage() {
  const [search, setSearch] = useState("")
  const [filterOpen, setFilterOpen] = useState(false)
  const [filterValues, setFilterValues] = useState<FilterValues>(defaultFilterValues)

  // Apply filters client-side for demo
  const filteredData = allData.filter((row) => {
    // Status filter
    const statusFilter = filterValues.status as string[] | undefined
    if (statusFilter && statusFilter.length < 4 && !statusFilter.includes(row.status)) return false

    // Category filter
    const categoryFilter = filterValues.category as string[] | undefined
    if (categoryFilter && categoryFilter.length < 4 && !categoryFilter.includes(row.category)) return false

    // Amount filter
    const amountFilter = filterValues.amount as { from: string; to: string } | undefined
    if (amountFilter) {
      if (amountFilter.from && row.amount < parseFloat(amountFilter.from)) return false
      if (amountFilter.to && row.amount > parseFloat(amountFilter.t

function Value({ label, value }: { label: string; value: string }) {
  return (
    <p className="p-sm text-muted-foreground">
      {label}: <span className="font-medium text-foreground">{value}</span>
    </p>
  )
}

export default function DatePickerPage() {
  // Basic
  const [basicDate, setBasicDate] = React.useState<Date | undefined>()

  // Date of birth
  const [dob, setDob] = React.useState<Date | undefined>()

  // Input
  const [inputDate, setInputDate] = React.useState<Date | undefined>()

  // Time
  const [timeDate, setTimeDate] = React.useState<Date | undefined>()

  // Natural language
  const [nlDate, setNlDate] = React.useState<Date | undefined>()

  // Range — with presets
  const [rangeDate, setRangeDate] = React.useState<DateRange | undefined>()

  // Range — without presets
  const [rangeNoPresets, setRangeNoPresets] = React.useState<DateRange | undefined>()

  return (
    <div className="space-y-12">

      {/* Page header */}
      <div className="space-y-2">
        <div className="h1">Date Picker</div>
        <p className="p text-muted-foreground">
          A versatile date input component with six variants — from a simple calendar
          popover to natural language pa

function PickerDemo({
  label,
  initialValue,
  showClear = true,
  align,
}: {
  label: string
  initialValue?: DateRange
  showClear?: boolean
  align?: "start" | "center" | "end"
}) {
  const [range, setRange] = React.useState<DateRange | undefined>(initialValue)

  return (
    <div className="flex flex-col gap-2">
      <div className="label-sm text-muted-foreground">{label}</div>
      <DateRangePicker
        value={range}
        onChange={setRange}
        onClear={showClear ? () => setRange(undefined) : undefined}
        align={align}
      />
    </div>
  )
}

export default function DateRangePickerPage() {
  const [filterRange, setFilterRange] = React.useState<DateRange | undefined>()

  // Pre-built ranges for demos
  const last30: DateRange = React.useMemo(() => {
    const to = new Date()
    const from = new Date()
    from.setDate(from.getDate() - 30)
    return { from, to }
  }, [])

  const last7: DateRange = React.useMemo(() => {
    const to = new Date()
    const from = new Date()
    from.setDate(from.getDate() - 7)
    return { from, to }
  }, [])

  return (
    <div className="space-y-12">

      {/* Page header */}
      <div className="space-y-2">
        <div className="h1">Date Range Picker</div>
        <p className="p text-muted-foreground">
          Filter control for selecting a date range. Includes quick presets, a two-month
          calendar, and a footer with day count and apply/clear actions.
        </p>
      </div>

      {/* ── Live interactive demo ── */}
      <Card>
        <CardHeader>
          <CardTitl

export default function EmptyStatePage() {
  return (
    <div className="space-y-16 pb-16">
      <div>
        <h2 className="h2 mb-1">Empty State</h2>
        <p className="p text-muted-foreground">
          Shown when a product or feature isn&apos;t activated yet. Communicates
          what&apos;s missing, why it matters, and what to do next. Hover the
          card to see the icon animation.
        </p>
      </div>

      {/* Account not activated */}
      <section className="space-y-4">
        <h3 className="h3">Account not activated</h3>
        <p className="p-sm text-muted-foreground">
          Shown when the merchant has created an account but hasn&apos;t
          connected their store or turned on any products yet.
        </p>
        <EmptyState
          icons={[Store, Zap, ShieldCheck]}
          title="Activate your account"
          description={
            "You're almost there. Connect your store to start screening orders for fraud,\nprotecting against char

function BrokenComponent() {
  throw new Error("HardHat is not defined (simulated component error)")
}

export default function ErrorStatesPage() {
  const [showBroken, setShowBroken] = useState(false)

  return (
    <div className="space-y-10">
      <div className="space-y-2">
        <h1 className="h1">Error States</h1>
        <p className="p text-muted-foreground max-w-2xl">
          Three error pages handle different failure modes. The gallery layout
          stays intact for route-level errors so users can navigate away.
        </p>
      </div>

      {/* -------------------------------- */}
      {/* Runtime Error (error.tsx) */}
      {/* -------------------------------- */}
      <section className="space-y-4">
        <div className="space-y-1">
          <h2 className="h2">Runtime Error</h2>
          <p className="p-sm text-muted-foreground max-w-2xl">
            Caught by <code className="label-sm">app/gallery/error.tsx</code>.
            Handles component-level errors like undefined references, failed
            API calls, or bad data. The sidebar stays intact so y

export default function GalleryError({
  error,
  reset,
}: {
  error: Error & { digest?: string }
  reset: () => void
}) {
  useEffect(() => {
    console.error(error)
  }, [error])

  return (
    <div className="flex min-h-[60vh] flex-col items-center justify-center px-4">
      <ErrorState
        title="Something went wrong"
        description="This page hit an error while rendering. This usually means a component referenced something that doesn't exist."
        icon={AlertTriangle}
        errorDetail={
          <CodeSnippet title="Error">{error.message}</CodeSnippet>
        }
      >
        <Button variant="link" size="sm" asChild>
          <a href="#" onClick={(e) => { e.preventDefault(); window.history.back() }}>
            Go back
          </a>
        </Button>
        <Button variant="primary" size="sm" onClick={reset}>
          Try again
        </Button>
      </ErrorState>
    </div>
  )
}

export default function FullScreenSheetPage() {
  const [basicOpen, setBasicOpen] = useState(false)
  const [footerOpen, setFooterOpen] = useState(false)

  return (
    <div className="space-y-16">
      <div className="space-y-2">
        <h1 className="h1">Full Screen Sheet</h1>
        <p className="p text-muted-foreground">
          A full-viewport overlay for complex workflows like multi-step forms, rule builders,
          or detail views. Sticky header with close button, scrollable body, and optional sticky footer.
        </p>
      </div>

      {/* Examples */}
      <div className="space-y-6">
        <h2 className="h2">Examples</h2>

        <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
          {/* Basic */}
          <Card level={1}>
            <CardHeader>
              <CardTitle className="label-md">Basic</CardTitle>
              <CardDescription>Header with title, description, actions, and close button.</CardDescription>
            </CardHeader>
      

function ActionsMenu() {
  return (
    <DropdownMenu>
      <DropdownMenuTrigger asChild>
        <Button variant="outline" size="sm" iconOnly aria-label="Order actions">
          <EllipsisVertical />
        </Button>
      </DropdownMenuTrigger>
      <DropdownMenuContent align="end">
        <DropdownMenuItem>Submit Chargeback</DropdownMenuItem>
        <DropdownMenuItem>Report Fraud</DropdownMenuItem>
        <DropdownMenuItem>Submit Abuse</DropdownMenuItem>
        <DropdownMenuItem>Mark as Passed by Merchant</DropdownMenuItem>
        <DropdownMenuItem>Edit Transaction</DropdownMenuItem>
      </DropdownMenuContent>
    </DropdownMenu>
  )
}

function ScrollDemo({
  children,
  label,
}: {
  children: (ref: React.RefObject<HTMLDivElement>) => React.ReactNode
  label: string
}) {
  const containerRef = React.useRef<HTMLDivElement>(null)
  return (
    <div className="space-y-2">
      <p className="label-sm text-muted-foreground">{label}</p>
      <div
        ref={containerRef}
        className="relative h-64 overflow-y-auto rounded-lg border border-border"
      >
        {children(containerRef as React.RefObject<HTMLDivElement>)}
        <div className="space-y-3 p-6">
          {Array.from({ length: 12 }).map((_, i) => (
            <div key={i} className="h-8 rounded bg-border-subtle" />
          ))}
        </div>
      </div>
      <p className="p-sm text-muted-foreground">↑ Scroll inside the box to see it condense</p>
    </div>
  )
}

function TabsScrollDemo({ label }: { label: string }) {
  const containerRef = React.useRef<HTMLDivElement>(null)
  const [activeTab, setActiveTab] = React.useState("overview")

  return (
    <div className="space-y-2">
      <p className="label-sm text-muted-foreground">{label}</p>

      {/* Mobile: full header visible, select takes the place of the tabs row */}
      <div className="sm:hidden rounded-lg border border-border overflow-hidden">
        <Header
          variant="sticky"
          title="ORD-0123"
          badge={<Badge variant="destructive">Cancelled</Badge>}
          metadata="Month DD, YYYY, 00:00 AM ET"
          rightMetadata="$1,234"
          actions={
            <Button variant="outline" size="md">
              Actions
            </Button>
          }
        />
        <div className="border-t border-border bg-background px-4 py-3">
          <Select value={activeTab} onValueChange={setActiveTab}>
            <SelectTrigger className="w-full">
           

export default function HeaderGalleryPage() {
  return (
    <div className="space-y-16 pb-16">
      <div>
        <h2 className="h2 mb-1">Header</h2>
        <p className="p text-muted-foreground">
          Page-level header with two variants: sticky (condenses on scroll) and fixed (static, no
          background).
        </p>
      </div>

      {/* ── STICKY ───────────────────────────────────────────────────── */}
      <section className="space-y-8">
        <h3 className="h3">Sticky</h3>

        <ScrollDemo label="Default">
          {(ref) => (
            <Header
              variant="sticky"
              title="ORD-0123"
              badge={<Badge variant="destructive">Cancelled</Badge>}
              metadata="Month DD, YYYY, 00:00 AM ET"
              rightMetadata="$1,234"
              actions={<ActionsMenu />}
              scrollContainerRef={ref}
            />
          )}
        </ScrollDemo>

        <TabsScrollDemo label="With tabs" />
      </section>

   

export default function GalleryLayout({
  children,
}: {
  children: React.ReactNode
}) {
  const [theme, setTheme] = useState<"light" | "dark">("light")
  const [mobileOpen, setMobileOpen] = useState(false)

  // Initialize theme from localStorage or system preference
  useEffect(() => {
    const stored = localStorage.getItem("theme") as "light" | "dark" | null
    if (stored) {
      setTheme(stored)
      return
    }

    const prefersDark = window.matchMedia("(prefers-color-scheme: dark)").matches
    setTheme(prefersDark ? "dark" : "light")
  }, [])

  // Sync theme to <html> + persist
  useEffect(() => {
    const root = document.documentElement

    if (theme === "dark") {
      root.classList.add("dark")
    } else {
      root.classList.remove("dark")
    }

    localStorage.setItem("theme", theme)
  }, [theme])

  return (
    <div className="min-h-screen flex bg-background text-foreground">
      {/* Desktop Sidebar */}
      <aside className="hidden lg:flex w-64 border-r 

export default function MetricPanelPage() {
  return (
    <div className="space-y-10">
      <div className="space-y-2">
        <h1 className="h1">Metric Panel</h1>
        <p className="p text-muted-foreground">
          Large stat tabs that expand to reveal detailed analytics.
        </p>
      </div>

      <MetricPanel
        title="Traffic by platform"
        subtitle="Select a platform to view the breakdown."
        defaultOpenKey={undefined}
        items={[
          {
            key: "desktop",
            label: "Desktop",
            value: "7,324",
            icon: <Laptop className="size-5" />,
            description: "Web",
            content: (
              <div className="rounded-[var(--radius)] border border-border bg-card p-6">
                <p className="p text-muted-foreground">Chart placeholder (Desktop)</p>
              </div>
            ),
          },
          {
            key: "mobile",
            label: "Mobile",
            value: "7,250",

export default function ModulesPage() {
  return (
    <div>
      <h1 className="h1">Modules</h1>
      <p className="p text-muted-foreground">Coming soon.</p>
    </div>
  )
}

export default function OverlayBackgroundPage() {
  return (
    <div className="space-y-12">

      {/* Page header */}
      <div className="space-y-2">
        <div className="h1">Overlay Background</div>
        <p className="p text-muted-foreground">
          Scrim and glass surface tokens for layered UI — dialogs, sheets, and floating surfaces.
        </p>
      </div>

      {/* ─── Overlay Scrim ─── */}
      <Card>
        <CardHeader>
          <CardTitle className="label-lg">Overlay Scrim</CardTitle>
          <CardDescription className="p-sm">
            The backdrop that sits behind dialogs and sheets. Semi-transparent with subtle blur
            so the content underneath remains perceptible.
          </CardDescription>
        </CardHeader>
        <CardContent className="space-y-6">

          {/* Live demo */}
          <div className="relative rounded-[var(--radius)] overflow-hidden border border-border" style={{ height: 280 }}>
            {/* Simulated page cont

export default function AlertDialogPage() {
  return (
    <div className="space-y-16 pb-16">
      <div className="space-y-2">
        <h1 className="h1">Alert Dialog</h1>
        <p className="p text-muted-foreground">
          A modal dialog for irreversible or destructive actions. Unlike Dialog, it cannot be
          dismissed by clicking outside or pressing Escape — the user must explicitly choose an action.
        </p>
      </div>

      {/* Basic destructive */}
      <section className="space-y-4">
        <div className="space-y-2">
          <h2 className="h2">Destructive confirmation</h2>
          <p className="p text-muted-foreground">The most common use case — confirming a deletion or irreversible action.</p>
        </div>
        <AlertDialog>
          <AlertDialogTrigger asChild>
            <Button variant="destructive" size="sm">Delete account</Button>
          </AlertDialogTrigger>
          <AlertDialogContent>
            <AlertDialogHeader>
              <A

export default function DialogPage() {
  return (
    <div className="space-y-16 pb-16">
      <div className="space-y-2">
        <h1 className="h1">Dialog</h1>
        <p className="p text-muted-foreground">
          A window that overlays the page for non-destructive interactions. Dismissible via X
          or clicking outside. For irreversible actions, use{" "}
          <a href="/gallery/overlays/dialog/alert" className="link">Alert Dialog</a> instead.
          For responsive mobile behavior, see{" "}
          <a href="/gallery/overlays/dialog/responsive" className="link">Responsive Dialog</a>.
        </p>
      </div>

      {/* Full anatomy */}
      <section className="space-y-4">
        <div className="space-y-2">
          <h2 className="h2">Full anatomy</h2>
          <p className="p text-muted-foreground">Header, body content, and a two-button footer.</p>
        </div>
        <Dialog>
          <DialogTrigger asChild>
            <Button variant="outline" size="sm">

export default function ResponsiveDialogPage() {
  return (
    <div className="space-y-16 pb-16">
      <div className="space-y-2">
        <h1 className="h1">Responsive Dialog</h1>
        <p className="p text-muted-foreground">
          A dialog that adapts to screen size. On desktop it renders as a centered Dialog.
          On mobile it becomes either a bottom drawer (default) or a full-screen sheet.
        </p>
      </div>

      {/* Drawer variant */}
      <section className="space-y-4">
        <div className="space-y-2">
          <h2 className="h2">Drawer variant (default)</h2>
          <p className="p text-muted-foreground">
            On mobile, the dialog becomes a vaul drawer with glass-top treatment, natural content
            height, and drag-to-dismiss. Best for short interactions.
          </p>
        </div>
        <ResponsiveDialog mobileVariant="drawer">
          <ResponsiveDialogTrigger asChild>
            <Button variant="outline" size="sm">Edit payout

export default function DrawerPage() {
  return (
    <div className="space-y-16 pb-16">
      <div className="space-y-2">
        <h1 className="h1">Drawer</h1>
        <p className="p text-muted-foreground">
          A bottom sheet that slides up from the screen edge. Built on vaul with glass treatment
          on the top edge and a drag handle for touch interaction. Best for mobile-first
          interactions and short forms.
        </p>
      </div>

      {/* Basic */}
      <section className="space-y-4">
        <div className="space-y-2">
          <h2 className="h2">Basic drawer</h2>
          <p className="p text-muted-foreground">
            Header, body content, and a footer with actions. The drag handle appears by default.
          </p>
        </div>
        <Drawer>
          <DrawerTrigger asChild>
            <Button variant="outline" size="sm">Open drawer</Button>
          </DrawerTrigger>
          <DrawerContent>
            <DrawerHeader>
              <Draw

export default function SheetGalleryPage() {
  return (
    <div className="space-y-16 pb-16">
      <div>
        <h2 className="h2 mb-1">Sheet</h2>
        <p className="p text-muted-foreground">
          A panel that slides in from any edge of the screen. Built on Radix
          Dialog — accessible, focus-trapped, and keyboard-dismissible.
        </p>
      </div>

      {/* Sides */}
      <section className="space-y-4">
        <h3 className="h3">Side</h3>
        <p className="p-sm text-muted-foreground">
          Open from any edge of the viewport using the <code>side</code> prop.
        </p>
        <div className="flex flex-wrap gap-3">
          {SIDES.map((side) => (
            <Sheet key={side}>
              <SheetTrigger asChild>
                <Button variant="outline" size="sm" className="capitalize">
                  Open {side}
                </Button>
              </SheetTrigger>
              <SheetContent side={side}>
                <SheetHeader>
       

function SectionHeading({
  icon: Icon,
  eyebrow,
  title,
  description,
}: {
  icon: React.ElementType
  eyebrow: string
  title: string
  description: string
}) {
  return (
    <div className="space-y-1">
      <div className="flex items-center gap-1.5">
        <Icon className="size-3.5 text-muted-foreground" />
        <span className="label-sm text-muted-foreground">{eyebrow}</span>
      </div>
      <h2 className="h3">{title}</h2>
      <p className="p text-muted-foreground">{description}</p>
    </div>
  )
}

function NavCard({
  title,
  description,
  href,
}: {
  title: string
  description: string
  href: string
}) {
  return (
    <Link href={href} className="group block h-full">
      <Card
        level={1}
        className="h-full transition-shadow hover:shadow-[var(--elevation-floating)]"
      >
        <CardHeader className="pb-5">
          <CardTitle className="flex items-center justify-between gap-2">
            {title}
            <ArrowRight className="size-4 shrink-0 text-muted-foreground opacity-0 transition-opacity group-hover:opacity-100" />
          </CardTitle>
          <CardDescription>{description}</CardDescription>
        </CardHeader>
      </Card>
    </Link>
  )
}

export default function GalleryHome() {
  return (
    <div className="max-w-4xl space-y-14 py-2">

      {/* Hero */}
      <div className="flex items-start gap-8">
        <div className="flex-1 space-y-4">
          <Badge variant="default">Design System · 64 components</Badge>
          <h1 className="h1">Big Wylly Style</h1>
          <p className="p-lg text-muted-foreground">
            A component library and design token system built on shadcn/ui, Radix UI, and
            Tailwind CSS v4. Includes OKLCH color primitives, a governance auditor, agentic
            skills for AI-assisted development, and machine-readable component metadata.
          </p>
        </div>
        <img
          src="/hero.gif"
          alt="Big Wylly Style"
          className="w-80 shrink-0 rounded-lg"
        />
      </div>

      <Separator />

      {/* Start here */}
      <section className="space-y-6">
        <SectionHeading
          icon={BookOpen}
          eyebrow="Start here"
      

function Step({ number, title, children }: { number: string; title: string; children: React.ReactNode }) {
  return (
    <Card level={1}>
      <CardHeader>
        <Badge variant="default" className="w-fit">{number}</Badge>
        <CardTitle className="mt-2">{title}</CardTitle>
      </CardHeader>
      <CardContent className="space-y-4">
        {children}
      </CardContent>
    </Card>
  )
}

function Inline({ children }: { children: React.ReactNode }) {
  return <code className="text-xs font-mono bg-secondary px-1.5 py-0.5 rounded border border-border-subtle">{children}</code>
}