Function bodies 541 total

export default function SetupPage() {
  return (
    <div className="max-w-3xl space-y-10 py-2">

      {/* Header */}
      <div className="space-y-4">
        <Badge variant="default">Getting Started</Badge>
        <h1 className="h1">Setup</h1>
        <p className="p-lg text-muted-foreground max-w-2xl">
          How to install and configure <span className="font-[520] text-foreground">@wyllo/ui</span> in
          a new Next.js project. Three steps, about five minutes.
        </p>
      </div>

      <Separator />

      {/* Prerequisites */}
      <section className="space-y-3">
        <h2 className="h2">Before you start</h2>
        <p className="p text-muted-foreground">
          Your project needs <span className="font-[520] text-foreground">Next.js 15+</span>,{" "}
          <span className="font-[520] text-foreground">React 18+</span>,{" "}
          <span className="font-[520] text-foreground">Tailwind CSS v4</span>, and{" "}
          <span className="font-[520] text-fo

function DemoSidebar({ children }: { children: React.ReactNode }) {
  return (
    <div className="w-56 shrink-0 border-r border-border bg-background flex flex-col h-full">
      {children}
    </div>
  )
}

function SidebarNavContent({
  view,
  setView,
}: {
  view: "main" | "account"
  setView: (v: "main" | "account") => void
}) {
  return (
    <>
      {/* Header */}
      <div className="flex items-center gap-2 p-3">
        <div className="flex size-7 items-center justify-center rounded-md bg-primary text-primary-foreground text-xs font-[620]">
          W
        </div>
        <span className="label-md">wyllo</span>
      </div>

      {/* Nav content */}
      <div className="flex-1 overflow-auto p-2">
        {view === "main" ? (
          <>
            <div className="px-2 py-1.5">
              <span className="text-xs font-medium text-sidebar-foreground/70">Platform</span>
            </div>
            <SidebarMenu>
              {platformNav.map((item) => (
                <SidebarMenuItem key={item.label}>
                  <SidebarMenuButton isActive={item.label === "Orders"}>
                    <item.icon className="size-4" />
                    <span>{item.label}</sp

export default function SidebarPage() {
  const [view, setView] = useState<"main" | "account">("main")
  const [device, setDevice] = useState<"desktop" | "mobile">("desktop")
  const [mobileOpen, setMobileOpen] = useState(false)

  return (
    <div className="space-y-16">
      <div className="space-y-2">
        <h1 className="h1">Sidebar</h1>
        <p className="p text-muted-foreground">
          Collapsible navigation sidebar with icon-only mode, mobile sheet drawer, keyboard shortcut (Cmd+B), and grouped menu structure.
        </p>
      </div>

      {/* Live demo */}
      <div className="space-y-6">
        <div className="flex items-center justify-between">
          <div className="space-y-2">
            <h2 className="h2">Example</h2>
            <p className="p text-muted-foreground">
              A typical app sidebar with drill-down navigation. Click &ldquo;Account&rdquo; to see the sub-page pattern.
            </p>
          </div>
          <ToggleGroup
         

function DemoContent() {
  const { openSidePanel, closeSidePanel, leftPanel, rightPanel } = useSidePanel()

  return (
    <div className="flex-1 overflow-y-auto p-6 space-y-4">
      <div className="flex items-center gap-2">
        <Button
          variant="outline"
          size="sm"
          onClick={() => {
            if (leftPanel) {
              closeSidePanel("left")
            } else {
              openSidePanel({
                side: "left",
                title: "Filters",
                content: (
                  <div className="p-4 space-y-4">
                    <div className="space-y-2">
                      <p className="label-sm">Status</p>
                      <div className="space-y-1">
                        {["Active", "Pending", "Closed"].map((s) => (
                          <label key={s} className="flex items-center gap-2 p-sm">
                            <input type="checkbox" defaultChecked className="rounded" />
                            

export default function SidePanelPage() {
  return (
    <div className="space-y-16">
      <div className="space-y-2">
        <h1 className="h1">Side Panel</h1>
        <p className="p text-muted-foreground">
          An inline panel that pushes page content to the side instead of overlaying it.
          Opens from the left (filters) or right (details). On mobile, becomes a full-width sheet.
        </p>
      </div>

      {/* Live demo */}
      <div className="space-y-6">
        <div className="space-y-2">
          <h2 className="h2">Example</h2>
          <p className="p text-muted-foreground">
            Open the left panel for filters or the right panel for details.
            Both can be open simultaneously. On screens below 768px, panels render as sheets.
          </p>
        </div>

        <Card level={1} className="overflow-hidden">
          <CardContent className="p-0">
            <SidePanelProvider>
              <SidePanelContainer className="h-[480px]">
     

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>
}

export default function CodebaseIndexFixPage() {
  return (
    <div className="max-w-3xl space-y-10 py-2">

      <div className="space-y-4">
        <Badge variant="default">Case Study</Badge>
        <h1 className="h1">Fixing the Codebase Indexer</h1>
        <p className="p-lg text-muted-foreground max-w-2xl">
          How we found and fixed a blind spot in the relationship graph that left
          every component showing zero connections.
        </p>
      </div>

      <Separator />

      <section className="space-y-4">
        <div className="space-y-2">
          <h2 className="h2">The symptom</h2>
          <p className="p text-muted-foreground">
            After restructuring the design system into a monorepo, we ran the codebase-index
            skill to generate the relationship graph. The indexer scanned all 64 components
            and reported 792 relationships found. But when we opened the output, every single
            component had <Inline>uses[0]</Inline> an

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>
}

export default function GovernanceAuditorPage() {
  return (
    <div className="max-w-3xl space-y-10 py-2">

      <div className="space-y-4">
        <Badge variant="default">Case Study</Badge>
        <h1 className="h1">Building the Governance Auditor</h1>
        <p className="p-lg text-muted-foreground max-w-2xl">
          How we encoded design intent into executable rules and ran our first audit &mdash;
          53 violations, 4 false positives, and a cleaner system on the other side.
        </p>
      </div>

      <Separator />

      <section className="space-y-4">
        <div className="space-y-2">
          <h2 className="h2">The problem we were solving</h2>
          <p className="p text-muted-foreground">
            We had a codebase index (the map) and component metadata (the contracts). Both told
            AI what exists and how to use it. What we didn&rsquo;t have was a way to check whether
            existing code actually followed the rules &mdash; a governanc

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>
}

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

      {/* -------------------------------- */}
      {/* Row of 3 — Level 0 */}
      {/* -------------------------------- */}
      <section className="space-y-4">
        <h2 className="h2">Level 0 — 3 Across</h2>
        <div className="grid grid-cols-1 gap-4 md:grid-cols-3">
          <StatCard
            surfaceLevel={0}
            icon={<ShoppingBag className="size-5" />}
            label="Total Orders"
            value="12,482"
            valueSize="md"
          />

          <StatCard
            surfaceLevel={0}
            icon={<ClipboardClock className="size-5" />}
            label="Orders in Review"
            value="184"
            valueSize="md"
          />

          <StatCard
            surfaceLevel={0}
            icon={<CircleCheck className="size-5" />}
            label="Pass Rate"
            value="96.8%"
            valueSize="md"
   

export default function Page() {
  const [sorting, setSorting] = React.useState<SortingState>([])

  const table = useReactTable({
    data,
    columns,
    getCoreRowModel: getCoreRowModel(),
    getSortedRowModel: getSortedRowModel(),
    onSortingChange: setSorting,
    state: { sorting },
  })

  return (
    <div className="p-10 space-y-8">
      <div className="space-y-2">
        <h1 className="h1">Tables</h1>
        <p className="p text-muted-foreground">
          Basic table without any controls.
        </p>
      </div>

      <section className="space-y-6">
        <div>
          <Table className="table-auto w-full">
            <TableHeader>
              {table.getHeaderGroups().map((headerGroup) => (
                <TableRow key={headerGroup.id} className="border-b" style={{ borderColor: "var(--color-border-subtle)" }}>
                  {headerGroup.headers.map((header) => (
                    <TableHead
                      key={header.id}
                      

export default function TabsPage() {
  const [value, setValue] = useState("orders")

  return (
    <>
    <Card level={1}>
      <CardContent className="space-y-8">
        <div className="space-y-2">
          <h2 className="h2">Tabs</h2>
          <p className="p text-muted-foreground">
            Line, pill, vertical, animated indicator, and mobile fallback.
          </p>
        </div>

        {/* Mobile Select Fallback */}
        <div className="sm:hidden relative">
          <select
            value={value}
            onChange={(e) => setValue(e.target.value)}
            className="w-full appearance-none rounded-md border border-input bg-card px-3 py-2 pr-8 label-md"
          >
            {tabItems.map((tab) => (
              <option key={tab} value={tab}>
                {tab}
              </option>
            ))}
          </select>
          <ChevronDown className="pointer-events-none absolute right-2 top-1/2 size-4 -translate-y-1/2 text-muted-foreground" />
     

export default function TogglePage() {
  const [formatting, setFormatting] = useState<string[]>([])
  const [alignment, setAlignment] = useState<string>("left")

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

      {/* ── CARD 1: TOGGLE ──────────────────────────────────────── */}
      <Card level={1}>
        <CardContent className="space-y-8">
          <div className="space-y-2">
            <h2 className="h2">Toggle</h2>
            <p className="p text-muted-foreground">
              A two-state button for toggling a single feature on or off.
            </p>
          </div>

          {/* Size */}
          <div className="space-y-3">
            <p className="label-md text-muted-foreground">Size</p>
            <div className="flex flex-wrap gap-3 items-center">
              {sizes.map((size) => (
                <Toggle key={size} size={size}>
                  <Bold className="size-4" />
                  <span className="capitalize">{size}</span>
                </Toggle>
  

  function contrastBadge(value: number, isApca: boolean) {
    if (isApca) {
      const abs = Math.abs(value)
      const color =
        abs >= 75 ? "text-success-foreground" :
        abs >= 60 ? "text-warning-foreground" :
        abs >= 45 ? "text-muted-foreground" :
        "text-destructive-foreground"
      return <span className={`tabular-nums ${color}`}>{value}</span>
    }
    const color =
      value >= 7 ? "text-success-foreground" :
      value >= 4.5 ? "text-success-foreground" :
      value >= 3 ? "text-warning-foreground" :
      "text-destructive-foreground"
    return <span className={`tabular-nums ${color}`}>{value}:1</span>
  }

  function Swatch({ entry, showFoundation, foundationName }: { entry: ColorEntry; showFoundation?: boolean; foundationName?: string }) {
    const isFoundation = foundationName === entry.name
    const lightness = parseInt(entry.name.split("-")[1])
    const isLight = lightness >= 65
    return (
      <div className="space-y-1">
        <div
          className={"relative h-10 w-full rounded-md border border-border-subtle" + (isFoundation ? " ring-2 ring-foreground ring-offset-2 ring-offset-background" : "")}
          style={{ backgroundColor: entry.oklch }}
        >
          {isFoundation && (
            <WylloSymbol
              className="absolute top-1 right-1 size-4 opacity-60"
              style={{ color: isLight ? "var(--gray-19)" : "var(--gray-98)" }}
            />
          )}
        </div>
        <div className="label-sm">{entry.name}</div>
        <div className="p-sm text-muted-foreground font-mono">{entry.oklch}</div>
        <div className="grid grid-cols-2 gap-

  function PaletteGrid({ label, entries, foundation }: { label: string; entries: ColorEntry[]; foundation?: string }) {
    return (
      <div className="space-y-3">
        <h3 className="label-lg">{label}</h3>
        <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-5 gap-3">
          {entries.map((e) => (
            <Swatch key={e.name} entry={e} showFoundation={!!foundation} foundationName={foundation} />
          ))}
        </div>
      </div>
    )
  }

export default function ColorsPage() {
  /* Live-resolved CSS values for the semantic token table */
  const [liveValues, setLiveValues] = useState<Record<string, string>>({})

  useEffect(() => {
    function readTokens() {
      if (typeof window === "undefined") return
      const style = getComputedStyle(document.documentElement)
      const next: Record<string, string> = {}
      for (const section of semanticColors) {
        for (const token of section.tokens) {
          next[token.cssVar] = style.getPropertyValue(token.cssVar).trim()
        }
      }
      setLiveValues(next)
    }

    readTokens()

    // Re-read when the theme (class on <html>) changes
    const observer = new MutationObserver(() => {
      // Small delay so CSS variables settle after class toggle
      requestAnimationFrame(readTokens)
    })
    observer.observe(document.documentElement, {
      attributes: true,
      attributeFilter: ["class"],
    })

    // Also re-read on media-query changes (system

    function readTokens() {
      if (typeof window === "undefined") return
      const style = getComputedStyle(document.documentElement)
      const next: Record<string, string> = {}
      for (const section of semanticColors) {
        for (const token of section.tokens) {
          next[token.cssVar] = style.getPropertyValue(token.cssVar).trim()
        }
      }
      setLiveValues(next)
    }

export default function TokensPage() {
  return (
    <div className="space-y-12">
      <div className="space-y-2">
        <h1 className="h1">Tokens</h1>
        <p className="p-lg text-muted-foreground max-w-2xl">
          The raw vocabulary of the design system — color primitives, semantic
          mappings, typography, corner radius, elevation, and surface rules.
          Everything a component references.
        </p>
      </div>

      <div className="grid gap-4 md:grid-cols-3">
        {sections.map((section) => (
          <Link key={section.href} href={section.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">
                  {section.title}
                  <ArrowRight className="size-4 shrink-0 text-muted-foregro

export default function SurfacesPage() {
  return (
    <div className="space-y-12">
      <div className="space-y-2">
        <h1 className="h1">Surfaces & Elevation</h1>
        <p className="p-lg text-muted-foreground">Corner radius, elevation shadows, overlay scrims, and glass surface tokens.</p>
      </div>

      {/* ═══════════════════════════════════════
       * 5. CORNER RADIUS
       * ═══════════════════════════════════════ */}
      <Card>
        <CardHeader>
          <CardTitle className="label-lg">Corner Radius</CardTitle>
          <CardDescription className="p">
            A four-tier semantic scale. Each tier is named for its purpose — not
            its size — so the right class is always obvious.
            Corner smoothing is set to 60% (Figma-style continuous curvature)
            via the <code className="font-mono p-sm">.smooth-corners</code>{" "}
            utility class using a CSS Houdini paint worklet (Chromium only,
            graceful fallback in o

export default function AspectRatioPage() {
  return (
    <div className="space-y-16">
      {/* Header */}
      <div className="space-y-2">
        <h1 className="h1">Aspect Ratio</h1>
        <p className="p text-muted-foreground">
          Displays content within a desired ratio. Built on Radix UI
          AspectRatio, this component maintains a consistent width-to-height
          ratio regardless of the container size.
        </p>
      </div>

      {/* Examples */}
      <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
        {/* 16:9 */}
        <Card level={1}>
          <CardHeader>
            <CardTitle className="label-md">16:9 Ratio</CardTitle>
            <CardDescription>
              A common widescreen ratio for video and hero images.
            </CardDescription>
          </CardHeader>
          <CardContent>
            <AspectRatio ratio={16 / 9} className="overflow-hidden rounded-md">
              <img
                src="https://images.unsplash.

export default function AvatarGalleryPage() {
  return (
    <div className="space-y-16">
      {/* Header */}
      <div className="space-y-2">
        <h1 className="h1">Avatar</h1>
        <p className="p text-muted-foreground">
          A circular image element with a text fallback. Use avatars to represent
          users, teams, or entities throughout the interface.
        </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 avatar patterns including images, fallback initials, sizes,
            and grouped layouts.
          </p>
        </div>

        <div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-4 gap-6">
          {/* With image */}
          <Card level={1}>
            <CardHeader>
              <CardTitle className="label-md">With Image</CardTitle>
              <CardDescription>Displays

export default function CommandGalleryPage() {
  return (
    <div className="space-y-16">
      {/* Header */}
      <div className="space-y-2">
        <h1 className="h1">Command</h1>
        <p className="p text-muted-foreground">
          A searchable command palette for quick actions and navigation. Built on
          cmdk, it provides fast keyboard-driven interaction with grouped items,
          search filtering, and shortcut hints.
        </p>
      </div>

      {/* Examples */}
      <div className="space-y-6">
        <div className="space-y-2">
          <h2 className="h2">Examples</h2>
          <p className="p text-muted-foreground">
            Inline command menus demonstrating groups, search, shortcuts, and
            empty states.
          </p>
        </div>

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

function BasicFormExample() {
  const form = useForm({
    defaultValues: {
      username: "",
      email: "",
    },
  })

  function onSubmit(data: { username: string; email: string }) {
    alert(JSON.stringify(data, null, 2))
  }

  return (
    <Form {...form}>
      <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
        <FormField
          control={form.control}
          name="username"
          rules={{ required: "Username is required" }}
          render={({ field }) => (
            <FormItem>
              <FormLabel>Username</FormLabel>
              <FormControl>
                <Input placeholder="johndoe" {...field} />
              </FormControl>
              <FormDescription>
                This is your public display name.
              </FormDescription>
              <FormMessage />
            </FormItem>
          )}
        />
        <FormField
          control={form.control}
          name="email"
          rules={{
            requi

  function onSubmit(data: { username: string; email: string }) {
    alert(JSON.stringify(data, null, 2))
  }

function ValidationExample() {
  const form = useForm({
    defaultValues: {
      name: "",
    },
    mode: "onBlur",
  })

  function onSubmit(data: { name: string }) {
    alert(JSON.stringify(data, null, 2))
  }

  return (
    <Form {...form}>
      <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-4">
        <FormField
          control={form.control}
          name="name"
          rules={{
            required: "Name is required",
            minLength: { value: 2, message: "Must be at least 2 characters" },
          }}
          render={({ field }) => (
            <FormItem>
              <FormLabel>Name</FormLabel>
              <FormControl>
                <Input placeholder="Enter your name" {...field} />
              </FormControl>
              <FormDescription>
                Try submitting empty or with a single character to see
                validation.
              </FormDescription>
              <FormMessage />
            </FormItem>
       

  function onSubmit(data: { name: string }) {
    alert(JSON.stringify(data, null, 2))
  }

export default function FormPage() {
  return (
    <div className="space-y-16">
      {/* Header */}
      <div className="space-y-2">
        <h1 className="h1">Form</h1>
        <p className="p text-muted-foreground">
          A set of form components that integrate with React Hook Form. Provides
          accessible labels, descriptions, error messages, and automatic aria
          attribute wiring for any form control.
        </p>
      </div>

      {/* Examples */}
      <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
        {/* Basic */}
        <Card level={1}>
          <CardHeader>
            <CardTitle className="label-md">Basic Form</CardTitle>
            <CardDescription>
              A simple form with two fields, descriptions, and submit.
            </CardDescription>
          </CardHeader>
          <CardContent>
            <BasicFormExample />
          </CardContent>
        </Card>

        {/* Validation */}
        <Card level={1}>
          <Card

export default function HoverCardGalleryPage() {
  return (
    <div className="space-y-16">
      {/* Header */}
      <div className="space-y-2">
        <h1 className="h1">Hover Card</h1>
        <p className="p text-muted-foreground">
          A floating content panel that appears when hovering over a trigger
          element. Ideal for previewing user profiles, link details, or
          supplemental information without navigating away.
        </p>
      </div>

      {/* Examples */}
      <div className="space-y-6">
        <div className="space-y-2">
          <h2 className="h2">Examples</h2>
          <p className="p text-muted-foreground">
            Hover card patterns with various trigger elements and content layouts.
          </p>
        </div>

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

export default function InputOTPPage() {
  const [value, setValue] = useState("")

  return (
    <div className="space-y-16">
      {/* Header */}
      <div className="space-y-2">
        <h1 className="h1">Input OTP</h1>
        <p className="p text-muted-foreground">
          A one-time password input with individual character slots, grouped
          segments, and visual separators. Built on top of{" "}
          <code className="font-mono p-sm">input-otp</code>.
        </p>
      </div>

      {/* Examples */}
      <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
        {/* 6-digit with separator */}
        <Card level={1}>
          <CardHeader>
            <CardTitle className="label-md">6-Digit with Separator</CardTitle>
            <CardDescription>
              Two groups of three slots separated by a dash.
            </CardDescription>
          </CardHeader>
          <CardContent className="flex flex-col gap-4">
            <InputOTP maxLength={6} value={val

export default function KbdGalleryPage() {
  return (
    <div className="space-y-16">
      {/* Header */}
      <div className="space-y-2">
        <h1 className="h1">Kbd</h1>
        <p className="p text-muted-foreground">
          Inline keyboard key indicators for displaying keyboard shortcuts and
          key combinations. Pairs with KbdGroup for multi-key sequences.
        </p>
      </div>

      {/* Examples */}
      <div className="space-y-6">
        <div className="space-y-2">
          <h2 className="h2">Examples</h2>
          <p className="p text-muted-foreground">
            Single keys, key combinations, and grouped shortcut displays.
          </p>
        </div>

        <div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-4 gap-6">
          {/* Single keys */}
          <Card level={1}>
            <CardHeader>
              <CardTitle className="label-md">Single Keys</CardTitle>
              <CardDescription>Individual key indicators for standalone r

export default function PaginationPage() {
  return (
    <div className="space-y-16">
      {/* Header */}
      <div className="space-y-2">
        <h1 className="h1">Pagination</h1>
        <p className="p text-muted-foreground">
          Navigation controls for moving between pages of content. Composed from
          semantic sub-components for previous, next, page numbers, and
          ellipsis.
        </p>
      </div>

      {/* Examples */}
      <div className="grid grid-cols-1 gap-6">
        {/* Basic */}
        <Card level={1}>
          <CardHeader>
            <CardTitle className="label-md">Basic Pagination</CardTitle>
            <CardDescription>
              Previous and next controls with numbered page links and ellipsis.
            </CardDescription>
          </CardHeader>
          <CardContent>
            <Pagination>
              <PaginationContent>
                <PaginationItem>
                  <PaginationPrevious href="#" />
                </Pagin

export default function ProgressPage() {
  const [animated, setAnimated] = useState(0)

  useEffect(() => {
    const timer = setTimeout(() => setAnimated(66), 500)
    return () => clearTimeout(timer)
  }, [])

  return (
    <div className="space-y-16">
      {/* Header */}
      <div className="space-y-2">
        <h1 className="h1">Progress</h1>
        <p className="p text-muted-foreground">
          A horizontal progress bar indicating completion status. Built on Radix
          UI Progress primitive with smooth transitions.
        </p>
      </div>

      {/* Examples */}
      <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
        {/* Static values */}
        {progressValues.map((item) => (
          <Card key={item.value} level={1}>
            <CardHeader>
              <CardTitle className="label-md">{item.label} Complete</CardTitle>
            </CardHeader>
            <CardContent>
              <Progress value={item.value} />
            </CardContent>
      

export default function ResizablePage() {
  return (
    <div className="space-y-16">
      {/* Header */}
      <div className="space-y-2">
        <h1 className="h1">Resizable</h1>
        <p className="p text-muted-foreground">
          Resizable panel groups built on react-resizable-panels. Create
          horizontally or vertically resizable layouts with draggable handles,
          optional grip icons, and persistent sizing via localStorage.
        </p>
      </div>

      {/* Examples */}
      <div className="grid grid-cols-1 gap-6">
        {/* Horizontal */}
        <Card level={1}>
          <CardHeader>
            <CardTitle className="label-md">Horizontal Layout</CardTitle>
            <CardDescription>
              Two panels side by side with a draggable handle.
            </CardDescription>
          </CardHeader>
          <CardContent>
            <ResizablePanelGroup
              direction="horizontal"
              className="min-h-[200px] max-w-full rounded-

export default function ScrollAreaPage() {
  return (
    <div className="space-y-16">
      {/* Header */}
      <div className="space-y-2">
        <h1 className="h1">Scroll Area</h1>
        <p className="p text-muted-foreground">
          A custom-styled scrollable container built on Radix UI ScrollArea. Provides
          consistent scrollbar styling across browsers with both vertical and
          horizontal scroll support.
        </p>
      </div>

      {/* Examples */}
      <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
        {/* Vertical */}
        <Card level={1}>
          <CardHeader>
            <CardTitle className="label-md">Vertical Scroll</CardTitle>
            <CardDescription>
              A long list of items in a fixed-height scrollable area.
            </CardDescription>
          </CardHeader>
          <CardContent>
            <ScrollArea className="h-72 w-full rounded-md border">
              <div className="p-4">
                <h4 classN

export default function SkeletonPage() {
  return (
    <div className="space-y-16">
      {/* Header */}
      <div className="space-y-2">
        <h1 className="h1">Skeleton</h1>
        <p className="p text-muted-foreground">
          Animated placeholder blocks that indicate loading content. Shape and
          size are controlled entirely through className utilities.
        </p>
      </div>

      {/* Examples */}
      <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
        {/* Text lines */}
        <Card level={1}>
          <CardHeader>
            <CardTitle className="label-md">Text Lines</CardTitle>
            <CardDescription>
              Simulates a paragraph of loading text content.
            </CardDescription>
          </CardHeader>
          <CardContent className="space-y-3">
            <Skeleton className="h-4 w-full" />
            <Skeleton className="h-4 w-4/5" />
            <Skeleton className="h-4 w-3/5" />
          </CardContent>
        </C

export default function SpinnerPage() {
  return (
    <div className="space-y-16">
      {/* Header */}
      <div className="space-y-2">
        <h1 className="h1">Spinner</h1>
        <p className="p text-muted-foreground">
          An animated loading indicator using the Loader2 icon from Lucide with
          a continuous spin animation. Size is controlled via className
          utilities.
        </p>
      </div>

      {/* Examples */}
      <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
        {/* Sizes */}
        <Card level={1}>
          <CardHeader>
            <CardTitle className="label-md">Sizes</CardTitle>
            <CardDescription>
              Control spinner size using Tailwind size utilities.
            </CardDescription>
          </CardHeader>
          <CardContent>
            <div className="flex items-center gap-6">
              {sizes.map((size) => (
                <div
                  key={size.label}
                  className="flex 

export default function ToastPage() {
  return (
    <div className="space-y-16">
      <Toaster />

      {/* Header */}
      <div className="space-y-2">
        <h1 className="h1">Toast</h1>
        <p className="p text-muted-foreground">
          Ephemeral notifications displayed at the edge of the viewport. Uses{" "}
          <code className="font-mono p-sm">sonner</code> under the hood with a
          themed <code className="font-mono p-sm">Toaster</code> wrapper from
          the design system.
        </p>
      </div>

      {/* Examples */}
      <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
        {/* Default */}
        <Card level={1}>
          <CardHeader>
            <CardTitle className="label-md">Default Toast</CardTitle>
            <CardDescription>
              A simple text notification with automatic dismiss.
            </CardDescription>
          </CardHeader>
          <CardContent>
            <Button
              variant="outline"
         

export default function TooltipGalleryPage() {
  return (
    <TooltipProvider>
      <div className="space-y-16">
        {/* Header */}
        <div className="space-y-2">
          <h1 className="h1">Tooltip</h1>
          <p className="p text-muted-foreground">
            A floating label that appears on hover or focus to provide brief,
            supplemental information about an element. Includes an arrow
            indicator pointing back to the trigger.
          </p>
        </div>

        {/* Examples */}
        <div className="space-y-6">
          <div className="space-y-2">
            <h2 className="h2">Examples</h2>
            <p className="p text-muted-foreground">
              Tooltips on buttons, icon buttons, and positioned on different
              sides.
            </p>
          </div>

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

export default function GlobalError({
  error,
  reset,
}: {
  error: Error & { digest?: string }
  reset: () => void
}) {
  return (
    <html lang="en">
      <body
        style={{
          margin: 0,
          minHeight: "100vh",
          display: "flex",
          alignItems: "center",
          justifyContent: "center",
          fontFamily:
            "Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif",
          background: "#fafafa",
          color: "#1a1a1a",
        }}
      >
        <div style={{ textAlign: "center", padding: "2rem", maxWidth: 480 }}>
          <div
            style={{
              width: 56,
              height: 56,
              borderRadius: 12,
              background: "#fee2e2",
              color: "#dc2626",
              display: "inline-flex",
              alignItems: "center",
              justifyContent: "center",
              marginBottom: 24,
              fontSize: 24,
            }}
          >
            !
       

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en" className={`${inter.variable} ${jetbrainsMono.variable}`} suppressHydrationWarning>
      <body>
        {/* eslint-disable-next-line react/no-danger */}
        <script dangerouslySetInnerHTML={{ __html: antiFlashScript }} />
        <SmoothCornersInit />
        {children}
      </body>
    </html>
  )
}

export default function NotFound() {
  return (
    <div className="flex min-h-screen flex-col items-center justify-center bg-background px-4 text-foreground">
      <ErrorState
        title="404"
        description="This page doesn't exist. It may have been moved or the URL is wrong."
        icon={FileQuestion}
        tone="neutral"
      >
        <Button variant="link" size="sm" asChild>
          <a href="/gallery">Back to gallery</a>
        </Button>
      </ErrorState>
    </div>
  )
}

export default function Home() {
  redirect("/gallery")
}

export function SmoothCornersInit() {
  useEffect(() => {
    if (typeof CSS !== "undefined" && "paintWorklet" in CSS) {
      // @ts-expect-error — paintWorklet is not in the TS DOM types yet
      CSS.paintWorklet.addModule("/smooth-corners.js")
    }
  }, [])

  return null
}

class SmoothCornersPainter {
  static get inputProperties() {
    return ["--corner-smoothing", "--corner-radius"];
  }

  paint(ctx, geom, properties) {
    const w = geom.width;
    const h = geom.height;

    const smoothingRaw = properties.get("--corner-smoothing");
    const radiusRaw = properties.get("--corner-radius");

    const smoothing = smoothingRaw ? parseFloat(smoothingRaw.toString()) : 0;
    const radius = radiusRaw ? parseFloat(radiusRaw.toString()) : 0;

    if (smoothing <= 0 || radius <= 0) {
      // Fall back to a plain filled rect (no masking effect)
      ctx.fillRect(0, 0, w, h);
      return;
    }

    const r = Math.min(radius, w / 2, h / 2);
    // Map 0-100% to superellipse exponent: 2 (circle) → 10 (squircle)
    const n = 2 + (Math.min(smoothing, 100) / 100) * 8;
    // How far the smoothed curve extends along each edge
    const arcLen = Math.min(r * (1 + (smoothing / 100) * 0.6), w / 2, h / 2);

    ctx.beginPath();

    // --- Top edge (left → right) 

  paint(ctx, geom, properties) {
    const w = geom.width;
    const h = geom.height;

    const smoothingRaw = properties.get("--corner-smoothing");
    const radiusRaw = properties.get("--corner-radius");

    const smoothing = smoothingRaw ? parseFloat(smoothingRaw.toString()) : 0;
    const radius = radiusRaw ? parseFloat(radiusRaw.toString()) : 0;

    if (smoothing <= 0 || radius <= 0) {
      // Fall back to a plain filled rect (no masking effect)
      ctx.fillRect(0, 0, w, h);
      return;
    }

    const r = Math.min(radius, w / 2, h / 2);
    // Map 0-100% to superellipse exponent: 2 (circle) → 10 (squircle)
    const n = 2 + (Math.min(smoothing, 100) / 100) * 8;
    // How far the smoothed curve extends along each edge
    const arcLen = Math.min(r * (1 + (smoothing / 100) * 0.6), w / 2, h / 2);

    ctx.beginPath();

    // --- Top edge (left → right) ---
    ctx.moveTo(arcLen, 0);
    ctx.lineTo(w - arcLen, 0);

    // --- Top-right corner ---
    this._smoothCorner(ctx

  _smoothCorner(ctx, x0, y0, cx, cy, x1, y1, _r, n) {
    // Standard circle-approximation kappa ≈ 0.5523
    // Scale it up as n grows to widen the curvature transition
    const kappa = 0.5522847498 * (1 + ((n - 2) / 8) * 0.35);

    const cp1x = x0 + (cx - x0) * kappa;
    const cp1y = y0 + (cy - y0) * kappa;
    const cp2x = x1 + (cx - x1) * kappa;
    const cp2y = y1 + (cy - y1) * kappa;

    ctx.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x1, y1);
  }

class TOONEncoder:
    """Encode Python data structures to TOON format"""
    
    def __init__(self, indent: int = 2, delimiter: str = ","):
        self.indent = indent
        self.delimiter = delimiter
        self.delimiter_display = {
            ",": "",  # implicit
            "\t": "\t",
            "|": "|",
        }.get(delimiter, "")
    
    def encode(self, data: Any, level: int = 0) -> str:
        """Encode data to TOON format"""
        if data is None or data == {}:
            return ""
        
        if isinstance(data, dict):
            return self._encode_object(data, level)
        elif isinstance(data, list):
            return self._encode_array(data, level)
        else:
            return self._encode_primitive(data)
    
    def _encode_object(self, obj: dict, level: int) -> str:
        """Encode object to TOON"""
        lines = []
        indent_str = " " * (level * self.indent)
        
        for key, value in obj.items():
            quoted_key =