@windforge/ui 0.1.0

package/dist/index.js

@@ -0,0 +1,3628 @@
+// src/components/layout.tsx
+import * as React from "react";
+import { Slot } from "@radix-ui/react-slot";
+import { cva } from "class-variance-authority";
+
+// src/lib/utils.ts
+import { clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+
+// src/components/layout.tsx
+import { jsx } from "react/jsx-runtime";
+var surface = cva("", {
+  variants: {
+    padding: {
+      none: "p-none",
+      xs: "p-xs",
+      sm: "p-sm",
+      md: "p-md",
+      lg: "p-lg",
+      xl: "p-xl",
+      "2xl": "p-2xl",
+      nbsp: "p-nbsp",
+      card: "p-card",
+      gutter: "p-gutter",
+      section: "p-section",
+      page: "p-page"
+    },
+    paddingX: {
+      none: "px-none",
+      xs: "px-xs",
+      sm: "px-sm",
+      md: "px-md",
+      lg: "px-lg",
+      xl: "px-xl",
+      "2xl": "px-2xl",
+      nbsp: "px-nbsp",
+      card: "px-card",
+      gutter: "px-gutter",
+      section: "px-section",
+      page: "px-page"
+    },
+    paddingY: {
+      none: "py-none",
+      xs: "py-xs",
+      sm: "py-sm",
+      md: "py-md",
+      lg: "py-lg",
+      xl: "py-xl",
+      "2xl": "py-2xl",
+      nbsp: "py-nbsp",
+      card: "py-card",
+      gutter: "py-gutter",
+      section: "py-section",
+      page: "py-page"
+    },
+    background: {
+      none: "",
+      surface: "bg-surface",
+      subtle: "bg-surface-subtle",
+      inset: "bg-surface-inset",
+      inverse: "bg-surface-inverse text-inverse",
+      brand: "bg-brand-subtle"
+    },
+    border: { none: "", default: "border border-border", subtle: "border border-subtle", strong: "border border-strong" },
+    borderRadius: { none: "rounded-none", sm: "rounded-sm", md: "rounded-md", lg: "rounded-lg", xl: "rounded-xl", "2xl": "rounded-2xl", full: "rounded-full" },
+    boxShadow: { none: "shadow-none", sm: "shadow-sm", md: "shadow-md", lg: "shadow-lg", xl: "shadow-xl" },
+    // Page-width constraint (absorbs the old Container). Pair with className="mx-auto" to center.
+    maxWidth: { sm: "max-w-2xl", md: "max-w-4xl", lg: "max-w-6xl", xl: "max-w-7xl", prose: "max-w-prose", full: "max-w-none" }
+  }
+});
+var flex = cva("flex", {
+  variants: {
+    direction: { row: "flex-row", column: "flex-col" },
+    gap: {
+      none: "gap-none",
+      xs: "gap-xs",
+      sm: "gap-sm",
+      md: "gap-md",
+      lg: "gap-lg",
+      xl: "gap-xl",
+      "2xl": "gap-2xl",
+      nbsp: "gap-nbsp",
+      card: "gap-card",
+      gutter: "gap-gutter",
+      section: "gap-section",
+      page: "gap-page"
+    },
+    align: { start: "items-start", center: "items-center", end: "items-end", stretch: "items-stretch", baseline: "items-baseline" },
+    justify: { start: "justify-start", center: "justify-center", end: "justify-end", between: "justify-between", around: "justify-around" },
+    wrap: { true: "flex-wrap", false: "flex-nowrap" }
+  },
+  defaultVariants: { direction: "column", gap: "md" }
+});
+var Box = React.forwardRef(
+  ({ className, asChild, padding, paddingX, paddingY, background, border, borderRadius, boxShadow, maxWidth, ...props }, ref) => {
+    const Comp = asChild ? Slot : "div";
+    return /* @__PURE__ */ jsx(
+      Comp,
+      {
+        ref,
+        className: cn(surface({ padding, paddingX, paddingY, background, border, borderRadius, boxShadow, maxWidth }), className),
+        ...props
+      }
+    );
+  }
+);
+Box.displayName = "Box";
+var Stack = React.forwardRef(
+  ({
+    className,
+    asChild,
+    direction,
+    gap,
+    align,
+    justify,
+    wrap,
+    padding,
+    paddingX,
+    paddingY,
+    background,
+    border,
+    borderRadius,
+    boxShadow,
+    maxWidth,
+    ...props
+  }, ref) => {
+    const Comp = asChild ? Slot : "div";
+    return /* @__PURE__ */ jsx(
+      Comp,
+      {
+        ref,
+        className: cn(
+          flex({ direction, gap, align, justify, wrap }),
+          surface({ padding, paddingX, paddingY, background, border, borderRadius, boxShadow, maxWidth }),
+          className
+        ),
+        ...props
+      }
+    );
+  }
+);
+Stack.displayName = "Stack";
+var grid = cva("grid", {
+  variants: {
+    cols: {
+      1: "grid-cols-1",
+      2: "grid-cols-2",
+      3: "grid-cols-3",
+      4: "grid-cols-4",
+      5: "grid-cols-5",
+      6: "grid-cols-6",
+      12: "grid-cols-12"
+    },
+    // responsive breakpoint at md — the common "stack on mobile, grid on desktop"
+    mdCols: {
+      1: "md:grid-cols-1",
+      2: "md:grid-cols-2",
+      3: "md:grid-cols-3",
+      4: "md:grid-cols-4",
+      5: "md:grid-cols-5",
+      6: "md:grid-cols-6",
+      12: "md:grid-cols-12"
+    },
+    gap: {
+      none: "gap-none",
+      xs: "gap-xs",
+      sm: "gap-sm",
+      md: "gap-md",
+      lg: "gap-lg",
+      xl: "gap-xl",
+      "2xl": "gap-2xl",
+      nbsp: "gap-nbsp",
+      card: "gap-card",
+      gutter: "gap-gutter",
+      section: "gap-section",
+      page: "gap-page"
+    },
+    align: { start: "items-start", center: "items-center", end: "items-end", stretch: "items-stretch" },
+    justify: { start: "justify-items-start", center: "justify-items-center", end: "justify-items-end", stretch: "justify-items-stretch" }
+  },
+  defaultVariants: { cols: 1, gap: "md" }
+});
+var Grid = React.forwardRef(
+  ({ className, asChild, cols, mdCols, gap, align, justify, ...props }, ref) => {
+    const Comp = asChild ? Slot : "div";
+    return /* @__PURE__ */ jsx(Comp, { ref, className: cn(grid({ cols, mdCols, gap, align, justify }), className), ...props });
+  }
+);
+Grid.displayName = "Grid";
+var layoutVocabulary = {
+  spacing: ["none", "xs", "sm", "md", "lg", "xl", "2xl", "nbsp", "card", "gutter", "section", "page"],
+  direction: ["row", "column"],
+  align: ["start", "center", "end", "stretch", "baseline"],
+  justify: ["start", "center", "end", "between", "around"],
+  background: ["none", "surface", "subtle", "inset", "inverse", "brand"],
+  border: ["none", "default", "subtle", "strong"],
+  borderRadius: ["none", "sm", "md", "lg", "xl", "2xl", "full"],
+  boxShadow: ["none", "sm", "md", "lg", "xl"],
+  maxWidth: ["sm", "md", "lg", "xl", "prose", "full"],
+  gridCols: [1, 2, 3, 4, 5, 6, 12]
+};
+
+// src/catalog.ts
+var catalog = {
+  // ── layout primitives ──────────────────────────────────────────────────────
+  Box: {
+    summary: "A padded, optionally-surfaced container \u2014 the on-system replacement for a bare <div>.",
+    props: {
+      padding: layoutVocabulary.spacing,
+      paddingX: layoutVocabulary.spacing,
+      paddingY: layoutVocabulary.spacing,
+      background: layoutVocabulary.background,
+      border: layoutVocabulary.border,
+      borderRadius: layoutVocabulary.borderRadius,
+      boxShadow: layoutVocabulary.boxShadow,
+      maxWidth: layoutVocabulary.maxWidth
+    },
+    flags: {
+      asChild: "Render as a child element (polymorphic, replaces MUI component=)"
+    }
+  },
+  Stack: {
+    summary: "A flex Box \u2014 the primary way to arrange children in a row or column with on-scale gap.",
+    props: {
+      direction: layoutVocabulary.direction,
+      gap: layoutVocabulary.spacing,
+      align: layoutVocabulary.align,
+      justify: layoutVocabulary.justify,
+      padding: layoutVocabulary.spacing,
+      paddingX: layoutVocabulary.spacing,
+      paddingY: layoutVocabulary.spacing,
+      background: layoutVocabulary.background,
+      border: layoutVocabulary.border,
+      borderRadius: layoutVocabulary.borderRadius,
+      boxShadow: layoutVocabulary.boxShadow,
+      maxWidth: layoutVocabulary.maxWidth
+    },
+    flags: {
+      wrap: "flex-wrap when true",
+      asChild: "Render as a child element (polymorphic)"
+    }
+  },
+  Grid: {
+    summary: "A closed-vocabulary CSS grid with responsive column counts and on-scale gap.",
+    props: {
+      cols: layoutVocabulary.gridCols.map(String),
+      mdCols: layoutVocabulary.gridCols.map(String),
+      gap: layoutVocabulary.spacing,
+      align: ["start", "center", "end", "stretch"],
+      justify: ["start", "center", "end", "stretch"]
+    },
+    flags: {
+      asChild: "Render as a child element (polymorphic)"
+    }
+  },
+  // ── typography ─────────────────────────────────────────────────────────────
+  Text: {
+    summary: "The typography primitive \u2014 renders a <p> by default; use asChild for semantics.",
+    props: {
+      size: ["sm", "base", "lg", "xl", "2xl", "3xl", "4xl", "5xl", "6xl"],
+      weight: ["light", "regular", "medium", "semibold", "bold"],
+      tone: ["default", "muted", "subtle", "disabled", "inverse", "brand", "link", "gradient"],
+      align: ["left", "center", "right"],
+      variant: ["inline-code"]
+    },
+    flags: {
+      truncate: "Adds CSS truncation (single line ellipsis)",
+      mono: "Switches to monospace font",
+      span: "Render inline as a <span> instead of a block <p>",
+      asChild: "Render as the wrapped child element for semantic control"
+    }
+  },
+  H1: {
+    summary: "Semantic headings: H1\u2013H6 render the matching <h1>\u2013<h6> with a sensible size default per level; override size freely. (H2\u2026H6 share this API.)",
+    props: {
+      size: ["sm", "base", "lg", "xl", "2xl", "3xl", "4xl", "5xl", "6xl"],
+      weight: ["light", "regular", "medium", "semibold", "bold"],
+      tone: ["default", "muted", "subtle", "disabled", "inverse", "brand", "link"],
+      align: ["left", "center", "right"]
+    },
+    flags: {
+      truncate: "Adds CSS truncation"
+    }
+  },
+  // ── action ─────────────────────────────────────────────────────────────────
+  Button: {
+    summary: "The primary action element. Hierarchy is expressed through variant, never hue.",
+    props: {
+      variant: ["primary", "secondary", "tertiary", "link", "destructive"],
+      size: ["sm", "md", "lg", "icon"]
+    },
+    flags: {
+      asChild: "Render as a child element (e.g. router link)"
+    }
+  },
+  ButtonGroup: {
+    summary: "Joins a row of Buttons into a segmented control with shared edges and a single outer radius.",
+    flags: {
+      "children (Button elements)": "Any Button variant; the group collapses the seams"
+    }
+  },
+  ToggleButton: {
+    summary: "A pressable button inside ToggleButtonGroup that tracks selected state.",
+    flags: {
+      value: "String identifier used by ToggleButtonGroup to track selection"
+    }
+  },
+  ToggleButtonGroup: {
+    summary: 'Segmented control; type="single" allows one selection, type="multiple" allows many.',
+    props: {
+      type: ["single", "multiple"]
+    }
+  },
+  Link: {
+    summary: "An inline anchor styled in the link color. Use asChild to wrap a router link.",
+    props: {
+      underline: ["hover", "always", "none"]
+    },
+    flags: {
+      asChild: "Render as a child element, keeping Link styling"
+    }
+  },
+  // ── display / status ───────────────────────────────────────────────────────
+  Badge: {
+    summary: "A static label pill for status, category, or count. Non-interactive.",
+    props: {
+      variant: ["brand", "subtle", "neutral", "outline", "success", "warning", "error", "info"],
+      size: ["sm", "md"]
+    }
+  },
+  Chip: {
+    summary: "An interactive pill for filtering or selection. Distinct from Badge. Pass onDelete for a removable chip.",
+    props: {
+      size: ["sm", "md"]
+    },
+    flags: {
+      selected: "Boolean \u2014 shows the neutral selected (inverse) fill when true",
+      clickable: "Set implicitly when onClick is provided",
+      onDelete: "Renders a trailing \u2715 dismiss button",
+      disabled: "Dims and disables interaction",
+      icon: "Optional leading ReactNode (e.g. an icon)"
+    }
+  },
+  Alert: {
+    summary: "An inline status message. Icon carries the hue; body text stays neutral.",
+    props: {
+      variant: ["neutral", "info", "success", "warning", "error"]
+    },
+    flags: {
+      title: "Heading (ReactNode)",
+      description: "Body text (ReactNode)",
+      icon: "Leading status icon (a lucide element)",
+      actions: "Trailing actions, typically buttons (ReactNode)"
+    }
+  },
+  Avatar: {
+    summary: "A circular image or fallback initials display. The fallback text scales with size.",
+    props: {
+      size: ["sm", "md", "lg", "xl"]
+    },
+    flags: {
+      "AvatarImage src": "Image URL; falls back to AvatarFallback when unresolvable",
+      "AvatarFallback": "Text shown while image loads or if it fails"
+    }
+  },
+  // ── surface / container ────────────────────────────────────────────────────
+  Card: {
+    summary: "A Box preset with surface background, default border, 2xl radius, and sm shadow. Accepts all Box props except className/style.",
+    props: {
+      padding: layoutVocabulary.spacing,
+      paddingX: layoutVocabulary.spacing,
+      paddingY: layoutVocabulary.spacing,
+      background: layoutVocabulary.background,
+      border: layoutVocabulary.border,
+      borderRadius: layoutVocabulary.borderRadius,
+      boxShadow: layoutVocabulary.boxShadow
+    },
+    flags: {
+      title: "Heading (ReactNode)",
+      description: "Sub-heading body text (ReactNode)",
+      headerAction: "Trailing header content opposite the title, e.g. a Badge (ReactNode)",
+      footer: "Footer content, typically buttons (ReactNode)",
+      children: "Card body content"
+    }
+  },
+  // ── form fields ────────────────────────────────────────────────────────────
+  Input: {
+    summary: "A styled text input. Pass standard HTML input props (type, placeholder, disabled, \u2026).",
+    flags: {
+      type: "HTML input type (text, email, password, number, \u2026)",
+      placeholder: "Placeholder text",
+      disabled: "Dims and disables the field",
+      invalid: "Error state \u2014 red outline + aria-invalid (usually set by FormField)"
+    }
+  },
+  Textarea: {
+    summary: "A styled multiline text input. Pass standard HTML textarea props.",
+    flags: {
+      placeholder: "Placeholder text",
+      disabled: "Dims and disables the field",
+      rows: "Number of visible text rows",
+      invalid: "Error state \u2014 red outline + aria-invalid (usually set by FormField)"
+    }
+  },
+  Label: {
+    summary: "A form label that connects to a field via htmlFor (Radix Label under the hood)."
+  },
+  FormField: {
+    summary: "Renders a labelled control and wires the label, description, required marker, and error state with correct ids and ARIA. Renders an Input by default; pass a child to wrap Textarea/Select/Autocomplete. The on-system way to build accessible forms.",
+    flags: {
+      label: "Field label (ReactNode); rendered as a <Label> bound to the control",
+      description: "Helper text below the label \u2014 normal foreground, meant to be read",
+      placeholder: "Placeholder forwarded onto the control (a prop on the child wins)",
+      type: "Input type for the default control (text, email, password, \u2026)",
+      error: "Error message (ReactNode); its presence sets the control to invalid",
+      required: "Adds a required marker and aria-required",
+      children: "Escape hatch \u2014 a non-Input control to wrap; omit to render an Input"
+    }
+  },
+  Select: {
+    summary: "A styled dropdown select. Pass an options array, or compose the primitives for groups/labels/custom triggers.",
+    flags: {
+      options: "Array of { value: string; label: ReactNode; disabled?: boolean } \u2014 the props API",
+      placeholder: "Placeholder shown before a value is chosen",
+      value: "Controlled value",
+      onValueChange: "Callback with the selected value",
+      disabled: "Disables the trigger",
+      invalid: "Error state \u2014 red trigger outline + aria-invalid (usually set by FormField)",
+      "SelectTrigger": "Escape hatch: the visible trigger element",
+      "SelectContent": "Escape hatch: the dropdown panel",
+      "SelectItem": "Escape hatch: an individual option (value, children)",
+      "SelectGroup": "Escape hatch: groups items under a SelectLabel",
+      "SelectLabel": "Escape hatch: a non-selectable group heading",
+      "SelectValue": "Escape hatch: renders the current value inside SelectTrigger"
+    }
+  },
+  Autocomplete: {
+    summary: "A searchable single-select combobox with keyboard navigation.",
+    flags: {
+      options: "Array of { value: string; label: string }",
+      value: "Controlled current value (string | null)",
+      onValueChange: "Called with the new value or null on clear",
+      placeholder: "Input placeholder text",
+      emptyText: "Message shown when filter yields no results",
+      disabled: "Dims and disables the field",
+      invalid: "Error state \u2014 red field outline + aria-invalid (usually set by FormField)"
+    }
+  },
+  MultiSelect: {
+    summary: "A searchable multi-value combobox. Selected values render as removable tags; the dropdown filters as you type. Controlled via value/onValueChange.",
+    flags: {
+      options: "Array of { value: string; label: string }",
+      value: "Controlled selected values (string[])",
+      onValueChange: "Called with the new value array",
+      placeholder: "Field placeholder when nothing is selected",
+      emptyText: "Message shown when the filter yields no results",
+      disabled: "Dims and disables the field",
+      invalid: "Error state \u2014 red outline + aria-invalid (usually set by FormField)"
+    }
+  },
+  DatePicker: {
+    summary: "A single-date field: a styled trigger that opens the Calendar in a Popover. Controlled via value/onValueChange. For ranges, use Calendar directly.",
+    flags: {
+      value: "Selected Date (or undefined)",
+      onValueChange: "Called with the chosen Date (or undefined)",
+      placeholder: "Trigger text before a date is chosen",
+      disabled: "Dims and disables the trigger",
+      invalid: "Error state \u2014 red outline + aria-invalid (usually set by FormField)",
+      formatOptions: "Intl.DateTimeFormatOptions for the displayed value"
+    }
+  },
+  Calendar: {
+    summary: 'The date grid (react-day-picker), token-styled with no vendor CSS. Pass any react-day-picker prop \u2014 mode="single|range|multiple", selected, onSelect.',
+    props: {
+      mode: ["single", "multiple", "range"]
+    },
+    flags: {
+      selected: "Selected date(s) \u2014 shape depends on mode",
+      onSelect: "Selection callback \u2014 shape depends on mode",
+      showOutsideDays: "Render days from adjacent months (default true)"
+    }
+  },
+  Command: {
+    summary: "A fast, filterable command menu / palette (cmdk). Compose Command > CommandInput + CommandList (CommandEmpty/CommandGroup/CommandItem/CommandSeparator), or use CommandDialog for a \u2318K palette.",
+    flags: {
+      "CommandInput": "The search field",
+      "CommandList": "Scrollable results region",
+      "CommandEmpty": "Shown when nothing matches",
+      "CommandGroup": "A labelled group (heading prop)",
+      "CommandItem": "A selectable row (onSelect, value)",
+      "CommandSeparator": "A divider between groups",
+      "CommandShortcut": "Trailing keyboard hint",
+      "CommandDialog": "The palette in a centered overlay (open, onOpenChange)"
+    }
+  },
+  Checkbox: {
+    summary: "A binary toggle. Pair with Label for an accessible label.",
+    flags: {
+      checked: "Controlled checked state",
+      onCheckedChange: "Callback with the new boolean",
+      disabled: "Disables the checkbox"
+    }
+  },
+  RadioGroup: {
+    summary: "A group of mutually exclusive RadioGroupItem options.",
+    flags: {
+      value: "Controlled value",
+      onValueChange: "Callback with the selected value",
+      "RadioGroupItem value": "The string value for each item; pair with Label"
+    }
+  },
+  Switch: {
+    summary: "A toggle switch (on/off). Pair with Label for an accessible label.",
+    flags: {
+      checked: "Controlled checked state",
+      onCheckedChange: "Callback with the new boolean",
+      disabled: "Disables the switch"
+    }
+  },
+  Slider: {
+    summary: "A range slider for numeric input.",
+    flags: {
+      value: "Controlled value array e.g. [50]",
+      onValueChange: "Callback with the new value array",
+      min: "Minimum value (default 0)",
+      max: "Maximum value (default 100)",
+      step: "Step increment",
+      disabled: "Disables the slider"
+    }
+  },
+  // ── navigation / disclosure ────────────────────────────────────────────────
+  Tabs: {
+    summary: "Tabbed content switcher. Pass an items array, or compose TabsList/TabsTrigger/TabsContent by hand.",
+    flags: {
+      items: "Array of { value, label, content, disabled? } \u2014 the props API",
+      defaultValue: "Initially active tab value",
+      value: "Controlled active tab value",
+      onValueChange: "Callback with new tab value",
+      "TabsList / TabsTrigger / TabsContent": "Escape hatch primitives for hand-composition"
+    }
+  },
+  Accordion: {
+    summary: 'Vertically stacked collapsible sections. Pass an items array, or compose the primitives. type="single" or "multiple".',
+    props: {
+      type: ["single", "multiple"]
+    },
+    flags: {
+      items: "Array of { value, trigger, content, disabled? } \u2014 the props API",
+      collapsible: 'When type="single", allows deselecting the open item',
+      "AccordionItem / AccordionTrigger / AccordionContent": "Escape hatch primitives for hand-composition"
+    }
+  },
+  Breadcrumb: {
+    summary: "Navigation trail. Pass an items array; the last item is the current (non-link) page.",
+    flags: {
+      items: "Array of { label: ReactNode, href?: string }; the final item renders as the current page",
+      separator: "Divider between crumbs; defaults to a ChevronRight (ReactNode)"
+    }
+  },
+  Pagination: {
+    summary: "Controlled page navigation with previous/next buttons, a window of sibling pages, and ellipses.",
+    flags: {
+      page: "1-based current page number",
+      count: "Total number of pages",
+      onPageChange: "Callback with the new page number",
+      siblingCount: "Number of pages to show on each side of the current (default 1)"
+    }
+  },
+  Stepper: {
+    summary: "Linear progress through a sequence of named steps.",
+    props: {
+      orientation: ["horizontal", "vertical"]
+    },
+    flags: {
+      steps: "Array of { label: string; description?: string }",
+      activeStep: "0-based index of the current step"
+    }
+  },
+  // ── overlays ───────────────────────────────────────────────────────────────
+  Dialog: {
+    summary: "A convenience overlay with title, description, and footer actions \u2014 built on Modal.",
+    props: {
+      size: ["sm", "md", "lg", "xl"]
+    },
+    flags: {
+      trigger: "The element that opens the dialog",
+      title: "Heading text (required)",
+      description: "Body text below the title",
+      actions: "ReactNode for the footer, typically buttons",
+      open: "Controlled open state",
+      onOpenChange: "Callback when open state changes"
+    }
+  },
+  Modal: {
+    summary: "Low-level composable overlay (Radix Dialog). Use Dialog for the common case.",
+    props: {
+      size: ["sm", "md", "lg", "xl"]
+    },
+    flags: {
+      "ModalTrigger": "The trigger element; use asChild to keep your button",
+      "ModalContent": "The panel; size prop sets max-width",
+      "ModalClose": "Programmatic close trigger; use asChild",
+      hideClose: "Hide the default corner \u2715 on ModalContent"
+    }
+  },
+  Popover: {
+    summary: "A small floating panel anchored to a trigger. Compose: Popover > PopoverTrigger + PopoverContent.",
+    flags: {
+      "PopoverTrigger asChild": "Attach the trigger to your own element",
+      "PopoverContent align": "Alignment relative to the trigger (start|center|end)",
+      "PopoverContent sideOffset": "Distance from the trigger in px (default 6)"
+    }
+  },
+  Sheet: {
+    summary: "A slide-in drawer anchored to a screen edge.",
+    props: {
+      side: ["top", "bottom", "left", "right"]
+    },
+    flags: {
+      "SheetTrigger asChild": "Attach the trigger to your own element",
+      "SheetContent title": "Accessible sheet title (ReactNode)",
+      "SheetContent description": "Supporting body text (ReactNode)",
+      "SheetContent footer": "Action row pinned to the bottom (ReactNode)",
+      "SheetClose asChild": "Programmatic close trigger"
+    }
+  },
+  DropdownMenu: {
+    summary: "A contextual menu anchored to a trigger. Pass trigger + items for the common case, or compose the primitives for checkboxes, radios, and sub-menus.",
+    flags: {
+      trigger: "The element that opens the menu (rendered via asChild)",
+      items: 'Array of { label, icon?, shortcut?, onSelect?, disabled? } | { type: "separator" } | { type: "label", label } \u2014 the props API',
+      "DropdownMenuTrigger asChild": "Escape hatch: use your own element as the trigger",
+      "DropdownMenuContent": "Escape hatch: the floating menu panel",
+      "DropdownMenuItem": "Escape hatch: a clickable item; inset adds left padding",
+      "DropdownMenuCheckboxItem": "Escape hatch: a checkable item",
+      "DropdownMenuRadioGroup / DropdownMenuRadioItem": "Escape hatch: radio group + items",
+      "DropdownMenuLabel / DropdownMenuSeparator / DropdownMenuShortcut": "Escape hatch: label, divider, shortcut",
+      "DropdownMenuSub / DropdownMenuSubTrigger / DropdownMenuSubContent": "Escape hatch: nested sub-menus"
+    }
+  },
+  Tooltip: {
+    summary: "A floating label on hover/focus. Wrap with TooltipProvider at the app root.",
+    flags: {
+      "TooltipProvider": "Render once near the app root to share delay",
+      "TooltipTrigger asChild": "Attach the tooltip to your own element",
+      "TooltipContent": "The tooltip bubble; sideOffset adjusts distance"
+    }
+  },
+  // ── feedback / progress ────────────────────────────────────────────────────
+  Progress: {
+    summary: "A horizontal progress bar. value is 0\u2013100.",
+    flags: {
+      value: "Number 0\u2013100 representing completion percentage",
+      indeterminate: "Looping animation for work of unknown duration; ignores value"
+    }
+  },
+  Skeleton: {
+    summary: "An animated placeholder while content loads. Size with width/height via className on Box.",
+    flags: {
+      "className (via Box wrapper)": "Use Box className to size the skeleton"
+    }
+  },
+  Toast: {
+    summary: "Transient status notifications. Call toast({...}) imperatively; render <Toaster /> once near root.",
+    props: {
+      variant: ["neutral", "success", "error", "warning", "info"]
+    },
+    flags: {
+      title: "Heading text",
+      description: "Body text",
+      duration: "Auto-dismiss time in ms (default 5000; 0 = permanent)",
+      action: "ReactNode action slot inside the toast",
+      "Toaster": "Place once near the app root to render active toasts"
+    }
+  },
+  // ── data display ───────────────────────────────────────────────────────────
+  Table: {
+    summary: "A semantic table. Pass columns + data for the common case, or compose the primitives for full control.",
+    flags: {
+      columns: "Array of { header, accessor: key | (row) => ReactNode, align? } \u2014 the props API",
+      data: "Array of row objects rendered against columns",
+      caption: "Caption rendered below the table (ReactNode)",
+      "TableHeader / TableBody / TableFooter": "Escape hatch: thead / tbody / tfoot wrappers",
+      "TableRow": "Escape hatch: tr with hover and selected states",
+      "TableHead / TableCell": 'Escape hatch: th / td; both take align="left|center|right"',
+      "TableCaption": "Escape hatch: caption rendered below the table"
+    }
+  },
+  DataTable: {
+    summary: "The batteries-included table: column sorting, row selection, and optional client-side pagination, built on the Table primitives. Pass columns + data + rowKey.",
+    flags: {
+      columns: "Array of { header, accessor, align?, sortable?, sortAccessor? }",
+      data: "Array of row objects",
+      rowKey: "(row) => string \u2014 stable id for selection and keys (required)",
+      selectable: "Adds a select-all + per-row checkbox column",
+      selected: "Controlled selection (array of ids); omit for uncontrolled",
+      onSelectedChange: "Callback with the new selected id array",
+      pageSize: "Enable client-side pagination at this page size",
+      caption: "Caption rendered below the table",
+      emptyState: "Content shown when there are no rows"
+    }
+  },
+  Chart: {
+    summary: "A token-driven ECharts surface. Pass a standard ECharts option; palette, axes, tooltip, and fonts are themed from the live --wf-* tokens and re-skin with the brand and color mode automatically. Auto-resizes.",
+    flags: {
+      option: "A standard ECharts option object (xAxis/yAxis/series/\u2026)",
+      height: "Pixel or CSS height; width fills the container (default 320)",
+      notMerge: "Replace the previous option wholesale instead of merging (default true)",
+      onEvents: "Map of ECharts event name \u2192 handler"
+    }
+  },
+  // ── utility / decoration ──────────────────────────────────────────────────
+  Separator: {
+    summary: "A horizontal or vertical visual divider.",
+    props: {
+      orientation: ["horizontal", "vertical"]
+    }
+  },
+  CodeBlock: {
+    summary: "A syntax-highlighted code surface. Highlighting runs locally (prism-react-renderer, no API); the theme is built from --wf-* tokens, so it re-skins with mode and brand automatically.",
+    flags: {
+      code: "The source string to render",
+      language: "Prism language id (default 'tsx')",
+      filename: "Optional header filename, shown with the language label",
+      showLineNumbers: "Render a 1-based line-number gutter",
+      highlightLines: "Array of 1-based line numbers to emphasize",
+      wrap: "Soft-wrap long lines instead of scrolling",
+      maxHeight: "Max height before vertical scroll, e.g. '24rem'",
+      copyable: "Show the copy button (default true)"
+    }
+  },
+  // ── app chrome / layout ────────────────────────────────────────────────────
+  AppShell: {
+    summary: "The guaranteed-layout frame: fixed sidebar on desktop, Sheet drawer on mobile, sticky header, scrollable main. Pass header and sidebar as slots.",
+    flags: {
+      header: "Top-bar slot, typically an <AppBar>",
+      sidebar: "Side-navigation slot, typically a <SideNav>",
+      fullBleed: "Drop the default main padding for edge-to-edge content"
+    }
+  },
+  AppBar: {
+    summary: "The sticky top bar slot for AppShell: menu toggle, logo, title, and actions. Drop a <ModeToggle/> into actions for the light/dark/system switch.",
+    props: {
+      variant: ["glass", "solid"],
+      color: ["surface", "subtle", "inset"]
+    },
+    flags: {
+      title: "Optional title text",
+      logo: "Optional logo ReactNode",
+      actions: "Right-aligned action ReactNode(s) \u2014 e.g. a <ModeToggle/>",
+      onMenuClick: "Override the menu-button handler (defaults to toggling the nav)"
+    }
+  },
+  SideNav: {
+    summary: "The data-driven side navigation: pass a typed items tree (item | group | section | divider); renders active state, nesting, and mobile drawer integration.",
+    flags: {
+      items: "NavItem[] \u2014 the navigation tree (item/group/section/divider)",
+      activePath: "The currently active path, highlighted in the tree",
+      onNavigate: "Called with a path when a leaf is activated",
+      logo: "Optional logo ReactNode pinned to the nav header"
+    }
+  },
+  ThemeProvider: {
+    summary: "Provides color mode (light/dark/system) and optional runtime --wf-* token overrides for live re-skinning. Wrap the app once near the root.",
+    flags: {
+      defaultMode: "Initial color mode: light | dark | system (default system)",
+      tokens: "A --wf-* override map, or (mode) => map for mode-aware brand swaps",
+      persist: "Persist the chosen mode to localStorage (default true)"
+    }
+  }
+};
+
+// src/lib/use-media-query.ts
+import * as React2 from "react";
+function useMediaQuery(query) {
+  const subscribe = React2.useCallback(
+    (onChange) => {
+      const mq = window.matchMedia(query);
+      mq.addEventListener("change", onChange);
+      return () => mq.removeEventListener("change", onChange);
+    },
+    [query]
+  );
+  return React2.useSyncExternalStore(
+    subscribe,
+    () => window.matchMedia(query).matches,
+    () => false
+  );
+}
+
+// src/lib/recipes.ts
+var focusRing = "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background";
+var focusRingInset = "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring";
+var focusRingField = "focus-visible:outline-none focus-visible:border-focus focus-visible:ring-2 focus-visible:ring-ring";
+var floatingPanel = "z-50 rounded-lg border border-border bg-surface text-primary shadow-md outline-none";
+var menuItem = "relative flex cursor-pointer select-none items-center rounded-md text-sm outline-none transition-colors data-[disabled]:pointer-events-none data-[disabled]:opacity-50";
+var overlayBackdrop = "fixed inset-0 z-50 bg-overlay animate-fade-in";
+var dismissButton = "absolute right-4 top-4 rounded-md p-1 text-secondary opacity-70 transition-opacity hover:opacity-100";
+
+// src/components/button.tsx
+import * as React3 from "react";
+import { Slot as Slot2 } from "@radix-ui/react-slot";
+import { cva as cva2 } from "class-variance-authority";
+import { jsx as jsx2 } from "react/jsx-runtime";
+var buttonVariants = cva2(
+  "inline-flex items-center justify-center gap-nbsp whitespace-nowrap rounded-lg font-medium transition-colors duration-normal " + focusRing + " disabled:pointer-events-none disabled:opacity-50 [&_svg]:size-4 [&_svg]:shrink-0",
+  {
+    variants: {
+      variant: {
+        primary: "bg-brand text-contrast hover:bg-brand-hover active:bg-brand-active shadow-xs",
+        secondary: "border-[length:var(--wf-border-width-control)] border-strong bg-surface text-primary hover:bg-surface-subtle active:bg-surface-inset",
+        tertiary: "text-primary hover:bg-surface-inset active:bg-surface-inset",
+        link: "text-link underline-offset-4 hover:underline hover:text-link-hover",
+        destructive: "border-[length:var(--wf-border-width-control)] border-error bg-surface text-error hover:bg-error-subtle active:bg-error-muted"
+      },
+      size: {
+        sm: "h-8 px-3 text-sm",
+        md: "h-10 px-4 text-sm",
+        lg: "h-12 px-6 text-base",
+        icon: "h-10 w-10"
+      }
+    },
+    defaultVariants: { variant: "primary", size: "md" }
+  }
+);
+var Button = React3.forwardRef(
+  ({ variant, size, asChild = false, ...props }, ref) => {
+    const Comp = asChild ? Slot2 : "button";
+    return /* @__PURE__ */ jsx2(Comp, { ref, className: cn(buttonVariants({ variant, size })), ...props });
+  }
+);
+Button.displayName = "Button";
+
+// src/components/button-group.tsx
+import * as React4 from "react";
+import { jsx as jsx3 } from "react/jsx-runtime";
+var ButtonGroup = React4.forwardRef(
+  ({ ...props }, ref) => /* @__PURE__ */ jsx3(
+    "div",
+    {
+      ref,
+      role: "group",
+      className: cn(
+        "inline-flex isolate",
+        "[&>*]:rounded-none [&>*:first-child]:rounded-l-lg [&>*:last-child]:rounded-r-lg",
+        "[&>*:not(:first-child)]:-ml-px hover:[&>*]:z-10 focus-visible:[&>*]:z-10"
+      ),
+      ...props
+    }
+  )
+);
+ButtonGroup.displayName = "ButtonGroup";
+
+// src/components/toggle-button.tsx
+import * as React5 from "react";
+import { cva as cva3 } from "class-variance-authority";
+import { jsx as jsx4 } from "react/jsx-runtime";
+var ToggleGroupContext = React5.createContext(null);
+function ToggleButtonGroup({
+  type = "single",
+  value,
+  onValueChange,
+  children,
+  ...props
+}) {
+  const contextValue = React5.useMemo(() => {
+    if (type === "multiple") {
+      const values = value ?? [];
+      return {
+        isSelected: (itemValue) => values.includes(itemValue),
+        toggle: (itemValue) => onValueChange(
+          values.includes(itemValue) ? values.filter((existing) => existing !== itemValue) : [...values, itemValue]
+        )
+      };
+    }
+    return {
+      isSelected: (itemValue) => value === itemValue,
+      toggle: (itemValue) => onValueChange(value === itemValue ? null : itemValue)
+    };
+  }, [type, value, onValueChange]);
+  return /* @__PURE__ */ jsx4(ToggleGroupContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx4(
+    "div",
+    {
+      role: "group",
+      className: cn(
+        "inline-flex isolate",
+        "[&>*]:rounded-none [&>*:first-child]:rounded-l-lg [&>*:last-child]:rounded-r-lg [&>*:not(:first-child)]:-ml-px"
+      ),
+      ...props,
+      children
+    }
+  ) });
+}
+var toggleButton = cva3(
+  "inline-flex h-10 items-center justify-center gap-2 border border-strong px-4 text-sm font-medium transition-colors disabled:opacity-50 disabled:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 " + focusRingInset,
+  {
+    variants: {
+      selected: {
+        true: "z-10 bg-surface-inverse text-inverse border-transparent",
+        false: "bg-surface text-secondary hover:bg-surface-subtle hover:text-primary"
+      }
+    }
+  }
+);
+var ToggleButton = React5.forwardRef(
+  ({ value, onClick, ...props }, ref) => {
+    const group = React5.useContext(ToggleGroupContext);
+    const selected = group?.isSelected(value) ?? false;
+    return /* @__PURE__ */ jsx4(
+      "button",
+      {
+        ref,
+        type: "button",
+        "aria-pressed": selected,
+        className: cn(toggleButton({ selected })),
+        onClick: (event) => {
+          group?.toggle(value);
+          onClick?.(event);
+        },
+        ...props
+      }
+    );
+  }
+);
+ToggleButton.displayName = "ToggleButton";
+
+// src/components/badge.tsx
+import { cva as cva4 } from "class-variance-authority";
+import { jsx as jsx5 } from "react/jsx-runtime";
+var badgeVariants = cva4(
+  "inline-flex items-center gap-1 rounded-lg border font-medium transition-colors [&_svg]:size-3",
+  {
+    variants: {
+      variant: {
+        brand: "border-transparent bg-brand text-contrast",
+        subtle: "border-transparent bg-brand-subtle text-brand",
+        neutral: "border-border bg-surface-subtle text-secondary",
+        outline: "border-strong text-primary",
+        success: "border-transparent bg-success-subtle text-primary",
+        warning: "border-transparent bg-warning-subtle text-primary",
+        error: "border-transparent bg-error-subtle text-primary",
+        info: "border-transparent bg-info-subtle text-primary"
+      },
+      size: {
+        sm: "px-2 py-0.5 text-sm",
+        md: "px-2.5 py-0.5 text-sm"
+      }
+    },
+    defaultVariants: { variant: "neutral", size: "md" }
+  }
+);
+function Badge({ variant, size, ...props }) {
+  return /* @__PURE__ */ jsx5("span", { className: cn(badgeVariants({ variant, size })), ...props });
+}
+
+// src/components/chip.tsx
+import * as React6 from "react";
+import { X } from "lucide-react";
+import { cva as cva5 } from "class-variance-authority";
+import { jsx as jsx6, jsxs } from "react/jsx-runtime";
+var chip = cva5(
+  "inline-flex items-center gap-1.5 rounded-full border text-sm font-medium transition-colors [&_svg]:size-3.5 disabled:opacity-50 disabled:pointer-events-none",
+  {
+    variants: {
+      selected: {
+        true: "border-transparent bg-surface-inverse text-inverse",
+        false: "border-strong bg-surface text-primary hover:bg-surface-subtle"
+      },
+      clickable: { true: "cursor-pointer " + focusRingInset, false: "" },
+      size: {
+        sm: "px-2 py-0.5",
+        md: "px-3 py-1"
+      }
+    },
+    defaultVariants: { selected: false, clickable: false, size: "md" }
+  }
+);
+var Chip = React6.forwardRef(
+  ({ selected, size, onClick, onDelete, disabled, icon, children, ...props }, ref) => {
+    const clickable = !!onClick;
+    const Comp = clickable ? "button" : "span";
+    return /* @__PURE__ */ jsxs(
+      Comp,
+      {
+        ref,
+        className: cn(chip({ selected, clickable, size })),
+        ...clickable ? { type: "button", onClick, disabled, "aria-pressed": !!selected } : {},
+        ...props,
+        children: [
+          icon,
+          children,
+          onDelete && /* @__PURE__ */ jsx6(
+            "button",
+            {
+              type: "button",
+              "aria-label": "Remove",
+              disabled,
+              onClick: (event) => {
+                event.stopPropagation();
+                onDelete();
+              },
+              className: cn("-mr-1 ml-0.5 rounded-full p-0.5 opacity-70 hover:opacity-100", focusRingInset),
+              children: /* @__PURE__ */ jsx6(X, {})
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+Chip.displayName = "Chip";
+
+// src/components/text.tsx
+import * as React7 from "react";
+import { Slot as Slot3 } from "@radix-ui/react-slot";
+import { cva as cva6 } from "class-variance-authority";
+import { jsx as jsx7 } from "react/jsx-runtime";
+var text = cva6("", {
+  variants: {
+    size: {
+      sm: "text-sm",
+      base: "text-base",
+      lg: "text-lg",
+      xl: "text-xl",
+      "2xl": "text-2xl",
+      "3xl": "text-3xl",
+      "4xl": "text-4xl",
+      "5xl": "text-5xl",
+      "6xl": "text-6xl"
+    },
+    weight: {
+      light: "font-light",
+      regular: "font-normal",
+      medium: "font-medium",
+      semibold: "font-semibold",
+      bold: "font-bold"
+    },
+    tone: {
+      default: "text-primary",
+      muted: "text-secondary",
+      subtle: "text-tertiary",
+      disabled: "text-disabled",
+      inverse: "text-inverse",
+      brand: "text-brand",
+      link: "text-link",
+      // A brand→secondary gradient clipped to the glyphs — for hero/display type.
+      gradient: "bg-gradient-to-r from-brand to-brand-secondary bg-clip-text text-transparent"
+    },
+    align: { left: "text-left", center: "text-center", right: "text-right" },
+    truncate: { true: "truncate", false: "" },
+    mono: { true: "font-mono", false: "" },
+    // `variant="inline-code"` renders a <code> element styled as inline code:
+    // monospace, a subtle fill, em-sized so it scales with the surrounding text.
+    // Listed last so its text-size wins; no horizontal padding so it hugs the text.
+    variant: {
+      "inline-code": "rounded border border-subtle bg-surface-inset py-0.5 font-mono text-[0.875em] text-primary"
+    }
+  },
+  defaultVariants: { size: "base", tone: "default" }
+});
+var Text = React7.forwardRef(
+  ({ asChild, span, size, weight, tone, align, truncate, mono, variant, ...props }, ref) => {
+    const Comp = asChild ? Slot3 : span ? "span" : variant === "inline-code" ? "code" : "p";
+    return /* @__PURE__ */ jsx7(
+      Comp,
+      {
+        ref,
+        className: cn(text({ size, weight, tone, align, truncate, mono, variant })),
+        ...props
+      }
+    );
+  }
+);
+Text.displayName = "Text";
+var HEADING_SIZE = {
+  1: "3xl",
+  2: "2xl",
+  3: "xl",
+  4: "lg",
+  5: "base",
+  6: "sm"
+};
+function createHeading(level) {
+  const Tag2 = `h${level}`;
+  const Component = React7.forwardRef(
+    ({ size, weight = "bold", tone, align, truncate, ...props }, ref) => /* @__PURE__ */ jsx7(
+      Tag2,
+      {
+        ref,
+        className: cn(text({ size: size ?? HEADING_SIZE[level], weight, tone, align, truncate }), "tracking-tight"),
+        ...props
+      }
+    )
+  );
+  Component.displayName = `H${level}`;
+  return Component;
+}
+var H1 = createHeading(1);
+var H2 = createHeading(2);
+var H3 = createHeading(3);
+var H4 = createHeading(4);
+var H5 = createHeading(5);
+var H6 = createHeading(6);
+
+// src/components/link.tsx
+import * as React8 from "react";
+import { Slot as Slot4 } from "@radix-ui/react-slot";
+import { cva as cva7 } from "class-variance-authority";
+import { jsx as jsx8 } from "react/jsx-runtime";
+var link = cva7(
+  "text-link underline-offset-2 hover:text-link-hover hover:underline rounded-sm transition-colors " + focusRingInset,
+  {
+    variants: {
+      underline: { hover: "", always: "underline", none: "no-underline hover:no-underline" }
+    },
+    defaultVariants: { underline: "hover" }
+  }
+);
+var Link = React8.forwardRef(
+  ({ asChild, underline, ...props }, ref) => {
+    const Comp = asChild ? Slot4 : "a";
+    return /* @__PURE__ */ jsx8(Comp, { ref, className: cn(link({ underline })), ...props });
+  }
+);
+Link.displayName = "Link";
+
+// src/components/card.tsx
+import * as React9 from "react";
+import { jsx as jsx9, jsxs as jsxs2 } from "react/jsx-runtime";
+var SECTION_PADDING = {
+  none: "p-none",
+  xs: "p-xs",
+  sm: "p-sm",
+  md: "p-md",
+  lg: "p-lg",
+  xl: "p-xl",
+  "2xl": "p-2xl",
+  nbsp: "p-nbsp",
+  card: "p-card",
+  gutter: "p-gutter",
+  section: "p-section",
+  page: "p-page"
+};
+var Card = React9.forwardRef(
+  ({ title, description, headerAction, footer, children, padding = "card", ...props }, ref) => {
+    const hasHeader = title != null || description != null || headerAction != null;
+    const pad = SECTION_PADDING[padding];
+    return /* @__PURE__ */ jsxs2(
+      Box,
+      {
+        ref,
+        background: "surface",
+        border: "default",
+        borderRadius: "2xl",
+        boxShadow: "sm",
+        className: cn("text-primary"),
+        ...props,
+        children: [
+          hasHeader && /* @__PURE__ */ jsxs2("div", { className: cn("flex flex-col gap-1.5", pad), children: [
+            (title != null || headerAction != null) && /* @__PURE__ */ jsxs2("div", { className: cn("flex items-center justify-between gap-3"), children: [
+              title != null && /* @__PURE__ */ jsx9("div", { className: cn("text-lg font-semibold leading-snug tracking-tight"), children: title }),
+              headerAction
+            ] }),
+            description != null && /* @__PURE__ */ jsx9("div", { className: cn("text-sm text-primary"), children: description })
+          ] }),
+          children != null && /* @__PURE__ */ jsx9("div", { className: cn(pad, hasHeader && "pt-0"), children }),
+          footer != null && /* @__PURE__ */ jsx9("div", { className: cn("flex items-center gap-3", pad, (hasHeader || children != null) && "pt-0"), children: footer })
+        ]
+      }
+    );
+  }
+);
+Card.displayName = "Card";
+
+// src/components/input.tsx
+import * as React10 from "react";
+import { jsx as jsx10 } from "react/jsx-runtime";
+var Input = React10.forwardRef(
+  ({ type, invalid, ...props }, ref) => /* @__PURE__ */ jsx10(
+    "input",
+    {
+      type,
+      ref,
+      "aria-invalid": invalid || void 0,
+      className: cn(
+        "flex h-10 w-full rounded-lg border border-strong bg-surface px-3 py-2 text-sm text-primary",
+        "transition-colors placeholder:text-tertiary",
+        focusRingField,
+        "disabled:cursor-not-allowed disabled:opacity-50",
+        "file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-primary",
+        invalid && "border-error focus-visible:border-error"
+      ),
+      ...props
+    }
+  )
+);
+Input.displayName = "Input";
+
+// src/components/textarea.tsx
+import * as React11 from "react";
+import { jsx as jsx11 } from "react/jsx-runtime";
+var Textarea = React11.forwardRef(
+  ({ invalid, ...props }, ref) => /* @__PURE__ */ jsx11(
+    "textarea",
+    {
+      ref,
+      "aria-invalid": invalid || void 0,
+      className: cn(
+        "flex min-h-20 w-full rounded-lg border border-strong bg-surface px-3 py-2 text-sm text-primary",
+        "transition-colors placeholder:text-tertiary",
+        focusRingField,
+        "disabled:cursor-not-allowed disabled:opacity-50",
+        invalid && "border-error focus-visible:border-error"
+      ),
+      ...props
+    }
+  )
+);
+Textarea.displayName = "Textarea";
+
+// src/components/label.tsx
+import * as React12 from "react";
+import * as LabelPrimitive from "@radix-ui/react-label";
+import { jsx as jsx12 } from "react/jsx-runtime";
+var Label = React12.forwardRef(({ ...props }, ref) => /* @__PURE__ */ jsx12(
+  LabelPrimitive.Root,
+  {
+    ref,
+    className: cn(
+      "text-sm font-medium leading-none text-primary peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+    ),
+    ...props
+  }
+));
+Label.displayName = LabelPrimitive.Root.displayName;
+
+// src/components/form-field.tsx
+import * as React13 from "react";
+import { CircleAlert } from "lucide-react";
+import { jsx as jsx13, jsxs as jsxs3 } from "react/jsx-runtime";
+var FormField = React13.forwardRef(
+  ({ label, description, placeholder, type, error, required, children, ...props }, ref) => {
+    const uid = React13.useId();
+    const field = children ?? /* @__PURE__ */ jsx13(Input, {});
+    const childProps = field.props;
+    const fieldId = childProps.id ?? `${uid}-field`;
+    const descId = description ? `${uid}-desc` : void 0;
+    const errId = error ? `${uid}-err` : void 0;
+    const describedBy = [childProps["aria-describedby"], descId, errId].filter(Boolean).join(" ") || void 0;
+    const invalid = error != null || childProps.invalid;
+    const control = React13.cloneElement(field, {
+      id: fieldId,
+      invalid: invalid || void 0,
+      placeholder: childProps.placeholder ?? placeholder,
+      type: childProps.type ?? type,
+      "aria-describedby": describedBy,
+      "aria-required": required || void 0
+    });
+    return /* @__PURE__ */ jsxs3("div", { ref, className: cn("flex flex-col gap-1.5"), ...props, children: [
+      label != null && /* @__PURE__ */ jsxs3(Label, { htmlFor: fieldId, children: [
+        label,
+        required && /* @__PURE__ */ jsx13("span", { "aria-hidden": "true", className: "text-error", children: " *" })
+      ] }),
+      control,
+      description != null && error == null && /* @__PURE__ */ jsx13(Text, { span: true, size: "sm", id: descId, children: description }),
+      error != null && /* @__PURE__ */ jsxs3("div", { id: errId, className: "flex items-start gap-1.5 text-sm text-primary", children: [
+        /* @__PURE__ */ jsx13(CircleAlert, { className: "mt-0.5 size-3.5 shrink-0 text-error", "aria-hidden": "true" }),
+        /* @__PURE__ */ jsx13("span", { children: error })
+      ] })
+    ] });
+  }
+);
+FormField.displayName = "FormField";
+
+// src/components/separator.tsx
+import * as React14 from "react";
+import * as SeparatorPrimitive from "@radix-ui/react-separator";
+import { jsx as jsx14 } from "react/jsx-runtime";
+var Separator = React14.forwardRef(({ orientation = "horizontal", decorative = true, ...props }, ref) => /* @__PURE__ */ jsx14(
+  SeparatorPrimitive.Root,
+  {
+    ref,
+    decorative,
+    orientation,
+    className: cn(
+      "shrink-0 bg-border",
+      orientation === "horizontal" ? "h-px w-full" : "h-full w-px"
+    ),
+    ...props
+  }
+));
+Separator.displayName = SeparatorPrimitive.Root.displayName;
+
+// src/components/skeleton.tsx
+import { jsx as jsx15 } from "react/jsx-runtime";
+function Skeleton({ ...props }) {
+  return /* @__PURE__ */ jsx15("div", { className: cn("h-full w-full animate-pulse rounded-md bg-surface-inset"), ...props });
+}
+
+// src/components/code-block.tsx
+import * as React15 from "react";
+import { Highlight } from "prism-react-renderer";
+import { Check, Copy } from "lucide-react";
+import { jsx as jsx16, jsxs as jsxs4 } from "react/jsx-runtime";
+var prismTheme = {
+  plain: { color: "var(--wf-color-text-primary)", backgroundColor: "transparent" },
+  styles: [
+    { types: ["comment", "prolog", "doctype", "cdata"], style: { color: "var(--wf-color-text-tertiary)", fontStyle: "italic" } },
+    { types: ["punctuation"], style: { color: "var(--wf-color-text-secondary)" } },
+    { types: ["tag", "keyword", "selector", "operator", "builtin"], style: { color: "var(--wf-color-brand-primary)" } },
+    { types: ["function", "class-name", "function-variable"], style: { color: "var(--wf-color-status-info-default)" } },
+    { types: ["attr-name", "property", "variable", "entity"], style: { color: "var(--wf-color-status-error-default)" } },
+    { types: ["string", "char", "attr-value", "inserted", "regex"], style: { color: "var(--wf-color-status-success-default)" } },
+    { types: ["number", "boolean", "constant", "symbol"], style: { color: "var(--wf-color-status-warning-default)" } }
+  ]
+};
+function CodeBlock({
+  code,
+  language = "tsx",
+  filename,
+  showLineNumbers,
+  highlightLines,
+  wrap,
+  maxHeight,
+  copyable = true
+}) {
+  const [copied, setCopied] = React15.useState(false);
+  const text2 = code.replace(/\n+$/, "");
+  const highlightSet = React15.useMemo(() => new Set(highlightLines ?? []), [highlightLines]);
+  const copy = () => {
+    void navigator.clipboard?.writeText(text2);
+    setCopied(true);
+    window.setTimeout(() => setCopied(false), 1400);
+  };
+  const copyButton = /* @__PURE__ */ jsx16(
+    "button",
+    {
+      type: "button",
+      onClick: copy,
+      "aria-label": copied ? "Copied" : "Copy code",
+      className: cn(
+        "inline-flex size-8 items-center justify-center rounded-md text-secondary opacity-70 transition-opacity",
+        "hover:bg-surface-subtle hover:opacity-100 [&_svg]:size-4",
+        focusRingInset
+      ),
+      children: copied ? /* @__PURE__ */ jsx16(Check, { className: "text-success" }) : /* @__PURE__ */ jsx16(Copy, {})
+    }
+  );
+  return /* @__PURE__ */ jsxs4("div", { className: "relative overflow-hidden rounded-xl border border-border bg-surface-inset text-sm", children: [
+    filename != null && /* @__PURE__ */ jsxs4("div", { className: "flex items-center justify-between gap-2 border-b border-border px-4 py-2", children: [
+      /* @__PURE__ */ jsx16("span", { className: "truncate font-mono text-sm text-secondary", children: filename }),
+      /* @__PURE__ */ jsxs4("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ jsx16("span", { className: "select-none text-sm uppercase tracking-wide text-tertiary", children: language }),
+        copyable && copyButton
+      ] })
+    ] }),
+    filename == null && copyable && /* @__PURE__ */ jsx16("div", { className: "absolute right-2 top-2 z-10", children: copyButton }),
+    /* @__PURE__ */ jsx16(Highlight, { code: text2, language, theme: prismTheme, children: ({ style, tokens, getLineProps, getTokenProps }) => /* @__PURE__ */ jsx16(
+      "pre",
+      {
+        className: cn("m-0 overflow-auto py-3 font-mono text-sm leading-relaxed", filename == null && copyable && "pr-12"),
+        style: { ...style, background: "transparent", maxHeight },
+        children: tokens.map((line, i) => {
+          const lineProps = getLineProps({ line });
+          const isHot = highlightSet.has(i + 1);
+          return /* @__PURE__ */ jsxs4(
+            "div",
+            {
+              ...lineProps,
+              className: cn(lineProps.className, "flex px-4", wrap && "whitespace-pre-wrap", isHot && "bg-brand-subtle"),
+              children: [
+                showLineNumbers && /* @__PURE__ */ jsx16("span", { className: "mr-4 inline-block w-6 shrink-0 select-none text-right text-tertiary", children: i + 1 }),
+                /* @__PURE__ */ jsx16("span", { className: cn("flex-1", wrap && "break-words"), children: line.map((token, key) => /* @__PURE__ */ jsx16("span", { ...getTokenProps({ token }) }, key)) })
+              ]
+            },
+            i
+          );
+        })
+      }
+    ) })
+  ] });
+}
+
+// src/components/alert.tsx
+import * as React16 from "react";
+import { cva as cva8 } from "class-variance-authority";
+import { jsx as jsx17, jsxs as jsxs5 } from "react/jsx-runtime";
+var alertVariants = cva8(
+  "relative w-full rounded-xl border p-4 flex gap-3 text-primary [&_svg]:size-5 [&_svg]:shrink-0 [&_svg]:mt-0.5",
+  {
+    variants: {
+      variant: {
+        neutral: "border-border bg-surface [&_svg]:text-secondary",
+        info: "border-info bg-info-subtle [&_svg]:text-info",
+        success: "border-success bg-success-subtle [&_svg]:text-success",
+        warning: "border-warning bg-warning-subtle [&_svg]:text-warning",
+        error: "border-error bg-error-subtle [&_svg]:text-error"
+      }
+    },
+    defaultVariants: { variant: "neutral" }
+  }
+);
+var Alert = React16.forwardRef(
+  ({ variant, title, description, icon, actions, children, ...props }, ref) => /* @__PURE__ */ jsxs5("div", { ref, role: "alert", className: cn(alertVariants({ variant })), ...props, children: [
+    icon,
+    /* @__PURE__ */ jsxs5("div", { className: "min-w-0 flex-1", children: [
+      title && /* @__PURE__ */ jsx17("h5", { className: cn("mb-0.5 font-semibold leading-snug"), children: title }),
+      description && /* @__PURE__ */ jsx17("div", { className: cn("text-sm text-primary"), children: description }),
+      children,
+      actions && /* @__PURE__ */ jsx17("div", { className: "mt-3 flex flex-wrap items-center gap-3", children: actions })
+    ] })
+  ] })
+);
+Alert.displayName = "Alert";
+
+// src/components/switch.tsx
+import * as React17 from "react";
+import * as SwitchPrimitives from "@radix-ui/react-switch";
+import { jsx as jsx18 } from "react/jsx-runtime";
+var Switch = React17.forwardRef(({ ...props }, ref) => /* @__PURE__ */ jsx18(
+  SwitchPrimitives.Root,
+  {
+    ref,
+    className: cn(
+      "peer inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors",
+      focusRing,
+      "disabled:cursor-not-allowed disabled:opacity-50",
+      // Selected state matches every other control (neutral inverse fill), not a hue.
+      "data-[state=checked]:bg-surface-inverse data-[state=unchecked]:bg-surface-track"
+    ),
+    ...props,
+    children: /* @__PURE__ */ jsx18(
+      SwitchPrimitives.Thumb,
+      {
+        className: cn(
+          "pointer-events-none block h-5 w-5 rounded-full bg-white shadow-sm ring-0 transition-transform",
+          "data-[state=checked]:bg-inverse",
+          "data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0"
+        )
+      }
+    )
+  }
+));
+Switch.displayName = SwitchPrimitives.Root.displayName;
+
+// src/components/checkbox.tsx
+import * as React18 from "react";
+import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
+import { Check as Check2 } from "lucide-react";
+import { jsx as jsx19 } from "react/jsx-runtime";
+var Checkbox = React18.forwardRef(({ ...props }, ref) => /* @__PURE__ */ jsx19(
+  CheckboxPrimitive.Root,
+  {
+    ref,
+    className: cn(
+      "peer h-5 w-5 shrink-0 rounded-sm border border-strong transition-colors",
+      focusRing,
+      "disabled:cursor-not-allowed disabled:opacity-50",
+      "data-[state=checked]:border-transparent data-[state=checked]:bg-surface-inverse data-[state=checked]:text-inverse"
+    ),
+    ...props,
+    children: /* @__PURE__ */ jsx19(CheckboxPrimitive.Indicator, { className: cn("flex items-center justify-center text-current"), children: /* @__PURE__ */ jsx19(Check2, { className: "h-3.5 w-3.5", strokeWidth: 3 }) })
+  }
+));
+Checkbox.displayName = CheckboxPrimitive.Root.displayName;
+
+// src/components/radio-group.tsx
+import * as React19 from "react";
+import * as RadioGroupPrimitive from "@radix-ui/react-radio-group";
+import { Circle } from "lucide-react";
+import { jsx as jsx20 } from "react/jsx-runtime";
+var RadioGroup = React19.forwardRef(({ ...props }, ref) => /* @__PURE__ */ jsx20(RadioGroupPrimitive.Root, { ref, className: cn("grid gap-2.5"), ...props }));
+RadioGroup.displayName = RadioGroupPrimitive.Root.displayName;
+var RadioGroupItem = React19.forwardRef(({ ...props }, ref) => /* @__PURE__ */ jsx20(
+  RadioGroupPrimitive.Item,
+  {
+    ref,
+    className: cn(
+      "aspect-square h-5 w-5 rounded-full border border-strong text-primary transition-colors",
+      focusRing,
+      "disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:border-strong"
+    ),
+    ...props,
+    children: /* @__PURE__ */ jsx20(RadioGroupPrimitive.Indicator, { className: "flex items-center justify-center", children: /* @__PURE__ */ jsx20(Circle, { className: "h-2.5 w-2.5 fill-primary text-primary" }) })
+  }
+));
+RadioGroupItem.displayName = RadioGroupPrimitive.Item.displayName;
+
+// src/components/tabs.tsx
+import * as React20 from "react";
+import * as TabsPrimitive from "@radix-ui/react-tabs";
+import { jsx as jsx21, jsxs as jsxs6 } from "react/jsx-runtime";
+var Tabs = React20.forwardRef(({ items, children, ...props }, ref) => {
+  if (!items) return /* @__PURE__ */ jsx21(TabsPrimitive.Root, { ref, ...props, children });
+  return /* @__PURE__ */ jsxs6(TabsPrimitive.Root, { ref, ...props, children: [
+    /* @__PURE__ */ jsx21(TabsList, { children: items.map((t) => /* @__PURE__ */ jsx21(TabsTrigger, { value: t.value, disabled: t.disabled, children: t.label }, t.value)) }),
+    items.map((t) => /* @__PURE__ */ jsx21(TabsContent, { value: t.value, children: t.content }, t.value))
+  ] });
+});
+Tabs.displayName = "Tabs";
+var TabsList = React20.forwardRef(({ ...props }, ref) => /* @__PURE__ */ jsx21(
+  TabsPrimitive.List,
+  {
+    ref,
+    className: cn(
+      "inline-flex h-10 items-center justify-center gap-1 rounded-lg bg-surface-inset p-1 text-secondary"
+    ),
+    ...props
+  }
+));
+TabsList.displayName = TabsPrimitive.List.displayName;
+var TabsTrigger = React20.forwardRef(({ ...props }, ref) => /* @__PURE__ */ jsx21(
+  TabsPrimitive.Trigger,
+  {
+    ref,
+    className: cn(
+      "inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-1.5 text-sm font-medium transition-all",
+      focusRing,
+      "disabled:pointer-events-none disabled:opacity-50",
+      "data-[state=active]:bg-surface data-[state=active]:text-primary data-[state=active]:shadow-sm"
+    ),
+    ...props
+  }
+));
+TabsTrigger.displayName = TabsPrimitive.Trigger.displayName;
+var TabsContent = React20.forwardRef(({ ...props }, ref) => /* @__PURE__ */ jsx21(
+  TabsPrimitive.Content,
+  {
+    ref,
+    className: cn("mt-lg focus-visible:outline-none"),
+    ...props
+  }
+));
+TabsContent.displayName = TabsPrimitive.Content.displayName;
+
+// src/components/tooltip.tsx
+import * as React21 from "react";
+import * as TooltipPrimitive from "@radix-ui/react-tooltip";
+import { jsx as jsx22 } from "react/jsx-runtime";
+var TooltipProvider = TooltipPrimitive.Provider;
+var Tooltip = TooltipPrimitive.Root;
+var TooltipTrigger = TooltipPrimitive.Trigger;
+var TooltipContent = React21.forwardRef(({ sideOffset = 6, ...props }, ref) => /* @__PURE__ */ jsx22(TooltipPrimitive.Portal, { children: /* @__PURE__ */ jsx22(
+  TooltipPrimitive.Content,
+  {
+    ref,
+    sideOffset,
+    className: cn(
+      "z-50 overflow-hidden rounded-md bg-surface-inverse px-2.5 py-1.5 text-sm font-medium text-inverse shadow-md",
+      "animate-scale-in"
+    ),
+    ...props
+  }
+) }));
+TooltipContent.displayName = TooltipPrimitive.Content.displayName;
+
+// src/components/select.tsx
+import * as React22 from "react";
+import * as SelectPrimitive from "@radix-ui/react-select";
+import { Check as Check3, ChevronDown, ChevronUp } from "lucide-react";
+import { jsx as jsx23, jsxs as jsxs7 } from "react/jsx-runtime";
+var SelectGroup = SelectPrimitive.Group;
+var SelectValue = SelectPrimitive.Value;
+function Select({ options, placeholder, invalid, id, children, ...props }) {
+  if (!options) return /* @__PURE__ */ jsx23(SelectPrimitive.Root, { ...props, children });
+  return /* @__PURE__ */ jsxs7(SelectPrimitive.Root, { ...props, children: [
+    /* @__PURE__ */ jsx23(SelectTrigger, { invalid, id, "aria-describedby": props["aria-describedby"], children: /* @__PURE__ */ jsx23(SelectValue, { placeholder }) }),
+    /* @__PURE__ */ jsx23(SelectContent, { children: options.map((o) => /* @__PURE__ */ jsx23(SelectItem, { value: o.value, disabled: o.disabled, children: o.label }, o.value)) })
+  ] });
+}
+var SelectTrigger = React22.forwardRef(({ children, invalid, ...props }, ref) => /* @__PURE__ */ jsxs7(
+  SelectPrimitive.Trigger,
+  {
+    ref,
+    "aria-invalid": invalid || void 0,
+    className: cn(
+      "flex h-10 w-full items-center justify-between gap-2 rounded-lg border border-strong bg-surface px-3 py-2 text-sm text-primary",
+      "placeholder:text-tertiary focus:outline-none focus:border-focus focus:ring-2 focus:ring-ring",
+      "disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1 data-[placeholder]:text-tertiary",
+      invalid && "border-error focus:border-error"
+    ),
+    ...props,
+    children: [
+      children,
+      /* @__PURE__ */ jsx23(SelectPrimitive.Icon, { asChild: true, children: /* @__PURE__ */ jsx23(ChevronDown, { className: "h-4 w-4 opacity-60" }) })
+    ]
+  }
+));
+SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
+var SelectContent = React22.forwardRef(({ children, position = "popper", ...props }, ref) => /* @__PURE__ */ jsx23(SelectPrimitive.Portal, { children: /* @__PURE__ */ jsxs7(
+  SelectPrimitive.Content,
+  {
+    ref,
+    position,
+    className: cn(
+      floatingPanel,
+      "relative max-h-96 min-w-32 overflow-hidden animate-scale-in",
+      position === "popper" && "data-[side=bottom]:translate-y-1"
+    ),
+    ...props,
+    children: [
+      /* @__PURE__ */ jsx23(SelectPrimitive.ScrollUpButton, { className: "flex items-center justify-center py-1", children: /* @__PURE__ */ jsx23(ChevronUp, { className: "h-4 w-4" }) }),
+      /* @__PURE__ */ jsx23(
+        SelectPrimitive.Viewport,
+        {
+          className: cn("p-1", position === "popper" && "w-full min-w-[var(--radix-select-trigger-width)]"),
+          children
+        }
+      ),
+      /* @__PURE__ */ jsx23(SelectPrimitive.ScrollDownButton, { className: "flex items-center justify-center py-1", children: /* @__PURE__ */ jsx23(ChevronDown, { className: "h-4 w-4" }) })
+    ]
+  }
+) }));
+SelectContent.displayName = SelectPrimitive.Content.displayName;
+var SelectLabel = React22.forwardRef(({ ...props }, ref) => /* @__PURE__ */ jsx23(SelectPrimitive.Label, { ref, className: cn("px-2 py-1.5 text-sm font-semibold text-tertiary"), ...props }));
+SelectLabel.displayName = SelectPrimitive.Label.displayName;
+var SelectItem = React22.forwardRef(({ children, ...props }, ref) => /* @__PURE__ */ jsxs7(
+  SelectPrimitive.Item,
+  {
+    ref,
+    className: cn(menuItem, "w-full py-1.5 pl-8 pr-2 focus:bg-surface-inset focus:text-primary"),
+    ...props,
+    children: [
+      /* @__PURE__ */ jsx23("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ jsx23(SelectPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx23(Check3, { className: "h-4 w-4" }) }) }),
+      /* @__PURE__ */ jsx23(SelectPrimitive.ItemText, { children })
+    ]
+  }
+));
+SelectItem.displayName = SelectPrimitive.Item.displayName;
+
+// src/components/autocomplete.tsx
+import * as React23 from "react";
+import * as Popover from "@radix-ui/react-popover";
+import { Check as Check4, ChevronsUpDown } from "lucide-react";
+import { jsx as jsx24, jsxs as jsxs8 } from "react/jsx-runtime";
+function Autocomplete({
+  options,
+  value,
+  onValueChange,
+  placeholder = "Search\u2026",
+  emptyText = "No results",
+  disabled,
+  id,
+  invalid,
+  "aria-describedby": ariaDescribedBy
+}) {
+  const [open, setOpen] = React23.useState(false);
+  const [query, setQuery] = React23.useState("");
+  const [highlight, setHighlight] = React23.useState(0);
+  const anchorRef = React23.useRef(null);
+  const listId = React23.useId();
+  const selected = options.find((option) => option.value === value) ?? null;
+  const display = open ? query : selected?.label ?? "";
+  const filtered = React23.useMemo(
+    () => open && query ? options.filter((option) => option.label.toLowerCase().includes(query.toLowerCase())) : options,
+    [open, query, options]
+  );
+  const optionId = (index) => `${listId}-opt-${index}`;
+  React23.useEffect(() => {
+    setHighlight((current) => Math.min(current, Math.max(0, filtered.length - 1)));
+  }, [filtered.length]);
+  const choose = (opt) => {
+    onValueChange?.(opt.value);
+    setQuery("");
+    setOpen(false);
+  };
+  const onKeyDown = (event) => {
+    if (event.key === "ArrowDown") {
+      event.preventDefault();
+      if (!open) setOpen(true);
+      setHighlight((current) => Math.min(current + 1, filtered.length - 1));
+    } else if (event.key === "ArrowUp") {
+      event.preventDefault();
+      setHighlight((current) => Math.max(current - 1, 0));
+    } else if (event.key === "Enter") {
+      if (open && filtered[highlight]) {
+        event.preventDefault();
+        choose(filtered[highlight]);
+      }
+    } else if (event.key === "Escape") {
+      setOpen(false);
+    }
+  };
+  return /* @__PURE__ */ jsxs8(Popover.Root, { open, onOpenChange: setOpen, children: [
+    /* @__PURE__ */ jsx24(Popover.Anchor, { asChild: true, children: /* @__PURE__ */ jsxs8(
+      "div",
+      {
+        ref: anchorRef,
+        className: cn(
+          "flex h-10 items-center gap-2 rounded-lg border border-strong bg-surface px-3 text-sm text-primary",
+          "focus-within:border-focus focus-within:ring-2 focus-within:ring-ring",
+          disabled && "opacity-50 pointer-events-none",
+          invalid && "border-error focus-within:border-error"
+        ),
+        children: [
+          /* @__PURE__ */ jsx24(
+            "input",
+            {
+              id,
+              role: "combobox",
+              "aria-expanded": open,
+              "aria-controls": listId,
+              "aria-invalid": invalid || void 0,
+              "aria-describedby": ariaDescribedBy,
+              "aria-autocomplete": "list",
+              "aria-activedescendant": open && filtered[highlight] ? optionId(highlight) : void 0,
+              disabled,
+              value: display,
+              placeholder,
+              onChange: (event) => {
+                setQuery(event.target.value);
+                setHighlight(0);
+                setOpen(true);
+              },
+              onFocus: () => setOpen(true),
+              onKeyDown,
+              className: "w-full bg-transparent placeholder:text-tertiary outline-none"
+            }
+          ),
+          /* @__PURE__ */ jsx24(ChevronsUpDown, { className: "size-4 shrink-0 text-tertiary" })
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ jsx24(Popover.Portal, { children: /* @__PURE__ */ jsx24(
+      Popover.Content,
+      {
+        role: "listbox",
+        id: listId,
+        align: "start",
+        sideOffset: 4,
+        onOpenAutoFocus: (event) => event.preventDefault(),
+        onCloseAutoFocus: (event) => event.preventDefault(),
+        onInteractOutside: (event) => {
+          const target = event.detail.originalEvent.target;
+          if (target && anchorRef.current?.contains(target)) event.preventDefault();
+        },
+        className: cn(
+          floatingPanel,
+          "max-h-60 w-[var(--radix-popover-trigger-width)] overflow-auto p-1 shadow-lg animate-scale-in"
+        ),
+        children: filtered.length === 0 ? /* @__PURE__ */ jsx24("div", { className: "px-2 py-1.5 text-sm text-tertiary", children: emptyText }) : filtered.map((option, index) => {
+          const isSelected = option.value === value;
+          return /* @__PURE__ */ jsxs8(
+            "div",
+            {
+              id: optionId(index),
+              role: "option",
+              "aria-selected": isSelected,
+              onMouseEnter: () => setHighlight(index),
+              onMouseDown: (event) => {
+                event.preventDefault();
+                choose(option);
+              },
+              className: cn(
+                menuItem,
+                "gap-2 px-2 py-1.5",
+                index === highlight ? "bg-surface-inset text-primary" : "text-secondary"
+              ),
+              children: [
+                /* @__PURE__ */ jsx24(Check4, { className: cn("size-4 shrink-0", isSelected ? "opacity-100 text-primary" : "opacity-0") }),
+                option.label
+              ]
+            },
+            option.value
+          );
+        })
+      }
+    ) })
+  ] });
+}
+
+// src/components/modal.tsx
+import * as React24 from "react";
+import * as DialogPrimitive from "@radix-ui/react-dialog";
+import { X as X2 } from "lucide-react";
+import { cva as cva9 } from "class-variance-authority";
+import { jsx as jsx25, jsxs as jsxs9 } from "react/jsx-runtime";
+var Modal = DialogPrimitive.Root;
+var ModalTrigger = DialogPrimitive.Trigger;
+var ModalClose = DialogPrimitive.Close;
+var ModalPortal = DialogPrimitive.Portal;
+var ModalOverlay = React24.forwardRef(({ ...props }, ref) => /* @__PURE__ */ jsx25(DialogPrimitive.Overlay, { ref, className: cn(overlayBackdrop), ...props }));
+ModalOverlay.displayName = DialogPrimitive.Overlay.displayName;
+var modalContent = cva9(
+  "fixed left-1/2 top-1/2 z-50 grid w-full -translate-x-1/2 -translate-y-1/2 gap-4 rounded-2xl border border-border bg-surface p-6 shadow-xl animate-scale-in",
+  {
+    variants: {
+      size: { sm: "max-w-sm", md: "max-w-lg", lg: "max-w-2xl", xl: "max-w-4xl" }
+    },
+    defaultVariants: { size: "md" }
+  }
+);
+var ModalContent = React24.forwardRef(({ children, size, hideClose, ...props }, ref) => /* @__PURE__ */ jsxs9(ModalPortal, { children: [
+  /* @__PURE__ */ jsx25(ModalOverlay, {}),
+  /* @__PURE__ */ jsxs9(DialogPrimitive.Content, { ref, className: cn(modalContent({ size })), ...props, children: [
+    children,
+    !hideClose && /* @__PURE__ */ jsx25(
+      DialogPrimitive.Close,
+      {
+        className: cn(dismissButton, "hover:bg-surface-inset focus:outline-none", focusRingInset),
+        "aria-label": "Close",
+        children: /* @__PURE__ */ jsx25(X2, { className: "h-4 w-4" })
+      }
+    )
+  ] })
+] }));
+ModalContent.displayName = DialogPrimitive.Content.displayName;
+
+// src/components/dialog.tsx
+import * as DialogPrimitive2 from "@radix-ui/react-dialog";
+import { jsx as jsx26, jsxs as jsxs10 } from "react/jsx-runtime";
+function Dialog({
+  title,
+  description,
+  actions,
+  trigger,
+  children,
+  size,
+  open,
+  defaultOpen,
+  onOpenChange
+}) {
+  return /* @__PURE__ */ jsxs10(Modal, { open, defaultOpen, onOpenChange, children: [
+    trigger && /* @__PURE__ */ jsx26(ModalTrigger, { asChild: true, children: trigger }),
+    /* @__PURE__ */ jsxs10(ModalContent, { size, children: [
+      /* @__PURE__ */ jsxs10("div", { className: cn("flex flex-col gap-1.5 text-left"), children: [
+        /* @__PURE__ */ jsx26(DialogPrimitive2.Title, { className: cn("text-lg font-semibold leading-snug tracking-tight"), children: title }),
+        description && /* @__PURE__ */ jsx26(DialogPrimitive2.Description, { className: cn("text-sm text-primary"), children: description })
+      ] }),
+      children,
+      actions && /* @__PURE__ */ jsx26("div", { className: cn("flex flex-col-reverse gap-2 sm:flex-row sm:justify-end"), children: actions })
+    ] })
+  ] });
+}
+
+// src/components/pagination.tsx
+import * as React25 from "react";
+import { ChevronLeft, ChevronRight } from "lucide-react";
+import { jsx as jsx27, jsxs as jsxs11 } from "react/jsx-runtime";
+var DOTS = "dots";
+function range(start, end) {
+  return Array.from({ length: end - start + 1 }, (_, i) => start + i);
+}
+function usePageItems(page, count, siblingCount) {
+  return React25.useMemo(() => {
+    const total = siblingCount * 2 + 5;
+    if (count <= total) return range(1, count);
+    const left = Math.max(page - siblingCount, 1);
+    const right = Math.min(page + siblingCount, count);
+    const showLeftDots = left > 2;
+    const showRightDots = right < count - 1;
+    if (!showLeftDots && showRightDots) return [...range(1, 3 + siblingCount * 2), DOTS, count];
+    if (showLeftDots && !showRightDots) return [1, DOTS, ...range(count - (2 + siblingCount * 2), count)];
+    return [1, DOTS, ...range(left, right), DOTS, count];
+  }, [page, count, siblingCount]);
+}
+var cell = "inline-flex h-9 min-w-9 items-center justify-center rounded-md px-2 text-sm font-medium transition-colors disabled:opacity-40 disabled:pointer-events-none [&_svg]:size-4 " + focusRingInset;
+function Pagination({ page, count, onPageChange, siblingCount = 1, ...props }) {
+  const pageItems = usePageItems(page, count, siblingCount);
+  const goToPage = (targetPage) => onPageChange(Math.min(count, Math.max(1, targetPage)));
+  return /* @__PURE__ */ jsxs11("nav", { role: "navigation", "aria-label": "Pagination", className: cn("flex items-center gap-1"), ...props, children: [
+    /* @__PURE__ */ jsx27("button", { type: "button", className: cn(cell, "text-secondary hover:bg-surface-inset hover:text-primary"), onClick: () => goToPage(page - 1), disabled: page <= 1, "aria-label": "Previous page", children: /* @__PURE__ */ jsx27(ChevronLeft, {}) }),
+    pageItems.map(
+      (pageItem, index) => pageItem === DOTS ? /* @__PURE__ */ jsx27("span", { className: "inline-flex h-9 min-w-9 items-center justify-center text-tertiary", children: "\u2026" }, `dots-${index}`) : /* @__PURE__ */ jsx27(
+        "button",
+        {
+          type: "button",
+          "aria-current": pageItem === page ? "page" : void 0,
+          onClick: () => goToPage(pageItem),
+          className: cn(cell, pageItem === page ? "bg-surface-inverse text-inverse" : "text-secondary hover:bg-surface-inset hover:text-primary"),
+          children: pageItem
+        },
+        pageItem
+      )
+    ),
+    /* @__PURE__ */ jsx27("button", { type: "button", className: cn(cell, "text-secondary hover:bg-surface-inset hover:text-primary"), onClick: () => goToPage(page + 1), disabled: page >= count, "aria-label": "Next page", children: /* @__PURE__ */ jsx27(ChevronRight, {}) })
+  ] });
+}
+
+// src/components/stepper.tsx
+import { Check as Check5 } from "lucide-react";
+import { jsx as jsx28, jsxs as jsxs12 } from "react/jsx-runtime";
+function StepDot({ state, stepNumber }) {
+  return /* @__PURE__ */ jsx28(
+    "span",
+    {
+      className: cn(
+        "grid size-8 shrink-0 place-items-center rounded-full border text-sm font-semibold transition-colors [&_svg]:size-4",
+        state === "complete" && "border-transparent bg-surface-inverse text-inverse",
+        state === "active" && "border-strong bg-surface-inset text-primary",
+        state === "upcoming" && "border-strong bg-surface text-tertiary"
+      ),
+      children: state === "complete" ? /* @__PURE__ */ jsx28(Check5, {}) : stepNumber
+    }
+  );
+}
+function Stepper({ steps, activeStep, orientation = "horizontal", ...props }) {
+  const vertical = orientation === "vertical";
+  const stateOf = (index) => index < activeStep ? "complete" : index === activeStep ? "active" : "upcoming";
+  return /* @__PURE__ */ jsx28("ol", { className: cn(vertical ? "flex flex-col" : "flex items-start"), ...props, children: steps.map((step, index) => {
+    const state = stateOf(index);
+    const isLast = index === steps.length - 1;
+    return /* @__PURE__ */ jsxs12(
+      "li",
+      {
+        "aria-current": state === "active" ? "step" : void 0,
+        className: cn("flex", vertical ? "gap-3" : "flex-1 items-start", !isLast && !vertical && "pr-2"),
+        children: [
+          /* @__PURE__ */ jsxs12("div", { className: cn("flex", vertical ? "flex-col items-center" : "flex-col items-center", vertical && "self-stretch"), children: [
+            /* @__PURE__ */ jsx28(StepDot, { state, stepNumber: index + 1 }),
+            !isLast && vertical && /* @__PURE__ */ jsx28("span", { className: cn("my-1 w-px flex-1", index < activeStep ? "bg-surface-inverse" : "bg-border") })
+          ] }),
+          /* @__PURE__ */ jsxs12("div", { className: cn(vertical ? "pb-6 pt-1" : "mt-2 text-center", vertical ? "text-left" : "flex-1"), children: [
+            /* @__PURE__ */ jsx28("div", { className: cn("text-sm font-medium", state === "upcoming" ? "text-secondary" : "text-primary"), children: step.label }),
+            step.description && /* @__PURE__ */ jsx28("div", { className: "text-sm text-tertiary", children: step.description })
+          ] }),
+          !isLast && !vertical && /* @__PURE__ */ jsx28("span", { className: cn("mt-4 h-px flex-1", index < activeStep ? "bg-surface-inverse" : "bg-border") })
+        ]
+      },
+      step.label
+    );
+  }) });
+}
+
+// src/components/toast.tsx
+import * as React26 from "react";
+import { createPortal } from "react-dom";
+import { CheckCircle2, XCircle, AlertTriangle, Info, X as X3 } from "lucide-react";
+import { jsx as jsx29, jsxs as jsxs13 } from "react/jsx-runtime";
+var toasts = [];
+var listeners = /* @__PURE__ */ new Set();
+var emit = () => listeners.forEach((listener) => listener());
+var nextId = 0;
+function toast(options) {
+  const id = nextId++;
+  const duration = options.duration ?? 5e3;
+  toasts = [...toasts, { variant: "neutral", ...options, duration, id }];
+  emit();
+  if (duration > 0) window.setTimeout(() => dismissToast(id), duration);
+  return id;
+}
+function dismissToast(id) {
+  toasts = toasts.filter((existing) => existing.id !== id);
+  emit();
+}
+function useToasts() {
+  return React26.useSyncExternalStore(
+    (onStoreChange) => {
+      listeners.add(onStoreChange);
+      return () => listeners.delete(onStoreChange);
+    },
+    () => toasts,
+    () => toasts
+  );
+}
+var ICONS = {
+  neutral: null,
+  success: /* @__PURE__ */ jsx29(CheckCircle2, { className: "text-success" }),
+  error: /* @__PURE__ */ jsx29(XCircle, { className: "text-error" }),
+  warning: /* @__PURE__ */ jsx29(AlertTriangle, { className: "text-warning" }),
+  info: /* @__PURE__ */ jsx29(Info, { className: "text-info" })
+};
+function ToastItem({ toast: toast2 }) {
+  const urgent = toast2.variant === "error" || toast2.variant === "warning";
+  return /* @__PURE__ */ jsxs13(
+    "li",
+    {
+      role: urgent ? "alert" : "status",
+      "aria-live": urgent ? "assertive" : "polite",
+      className: "pointer-events-auto flex w-80 gap-3 rounded-xl border border-border bg-surface p-4 text-primary shadow-lg animate-scale-in [&_svg]:size-5 [&_svg]:shrink-0",
+      children: [
+        toast2.variant && toast2.variant !== "neutral" && /* @__PURE__ */ jsx29("span", { className: "mt-0.5", children: ICONS[toast2.variant] }),
+        /* @__PURE__ */ jsxs13("div", { className: "min-w-0 flex-1", children: [
+          toast2.title && /* @__PURE__ */ jsx29("div", { className: "font-semibold leading-snug", children: toast2.title }),
+          toast2.description && /* @__PURE__ */ jsx29("div", { className: "text-sm text-primary", children: toast2.description }),
+          toast2.action && /* @__PURE__ */ jsx29("div", { className: "mt-2", children: toast2.action })
+        ] }),
+        /* @__PURE__ */ jsx29(
+          "button",
+          {
+            type: "button",
+            "aria-label": "Dismiss",
+            onClick: () => dismissToast(toast2.id),
+            className: cn("-mr-1 -mt-1 h-fit rounded-md p-1 text-secondary opacity-70 transition-opacity hover:opacity-100", focusRingInset),
+            children: /* @__PURE__ */ jsx29(X3, { className: "h-4 w-4" })
+          }
+        )
+      ]
+    }
+  );
+}
+var emptySubscribe = () => () => {
+};
+function Toaster() {
+  const activeToasts = useToasts();
+  const mounted = React26.useSyncExternalStore(emptySubscribe, () => true, () => false);
+  if (!mounted) return null;
+  return createPortal(
+    /* @__PURE__ */ jsx29("ol", { className: "pointer-events-none fixed bottom-4 right-4 z-[100] flex w-80 flex-col gap-2", children: activeToasts.map((toast2) => /* @__PURE__ */ jsx29(ToastItem, { toast: toast2 }, toast2.id)) }),
+    document.body
+  );
+}
+
+// src/components/accordion.tsx
+import * as React27 from "react";
+import * as AccordionPrimitive from "@radix-ui/react-accordion";
+import { ChevronDown as ChevronDown2 } from "lucide-react";
+import { jsx as jsx30, jsxs as jsxs14 } from "react/jsx-runtime";
+var Accordion = React27.forwardRef(({ items, children, ...props }, ref) => {
+  if (!items) return /* @__PURE__ */ jsx30(AccordionPrimitive.Root, { ref, ...props, children });
+  return /* @__PURE__ */ jsx30(AccordionPrimitive.Root, { ref, ...props, children: items.map((item) => /* @__PURE__ */ jsxs14(AccordionItem, { value: item.value, disabled: item.disabled, children: [
+    /* @__PURE__ */ jsx30(AccordionTrigger, { children: item.trigger }),
+    /* @__PURE__ */ jsx30(AccordionContent, { children: item.content })
+  ] }, item.value)) });
+});
+Accordion.displayName = "Accordion";
+var AccordionItem = React27.forwardRef(({ ...props }, ref) => /* @__PURE__ */ jsx30(AccordionPrimitive.Item, { ref, className: cn("border-b border-border"), ...props }));
+AccordionItem.displayName = "AccordionItem";
+var AccordionTrigger = React27.forwardRef(({ children, ...props }, ref) => /* @__PURE__ */ jsx30(AccordionPrimitive.Header, { className: "flex", children: /* @__PURE__ */ jsxs14(
+  AccordionPrimitive.Trigger,
+  {
+    ref,
+    className: cn(
+      "flex flex-1 items-center justify-between py-4 text-sm font-medium text-primary transition-all",
+      "rounded-sm hover:text-link",
+      focusRingInset,
+      "[&[data-state=open]>svg]:rotate-180"
+    ),
+    ...props,
+    children: [
+      children,
+      /* @__PURE__ */ jsx30(ChevronDown2, { className: "h-4 w-4 shrink-0 text-secondary transition-transform duration-200" })
+    ]
+  }
+) }));
+AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName;
+var AccordionContent = React27.forwardRef(({ children, ...props }, ref) => /* @__PURE__ */ jsx30(
+  AccordionPrimitive.Content,
+  {
+    ref,
+    className: "overflow-hidden text-sm text-primary data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down",
+    ...props,
+    children: /* @__PURE__ */ jsx30("div", { className: cn("pb-4 pt-0"), children })
+  }
+));
+AccordionContent.displayName = AccordionPrimitive.Content.displayName;
+
+// src/components/avatar.tsx
+import * as React28 from "react";
+import * as AvatarPrimitive from "@radix-ui/react-avatar";
+import { cva as cva10 } from "class-variance-authority";
+import { jsx as jsx31 } from "react/jsx-runtime";
+var avatar = cva10("relative flex shrink-0 overflow-hidden rounded-full", {
+  variants: {
+    size: {
+      sm: "h-8 w-8",
+      md: "h-10 w-10",
+      lg: "h-12 w-12",
+      xl: "h-16 w-16"
+    }
+  },
+  defaultVariants: { size: "md" }
+});
+var FALLBACK_TEXT = {
+  sm: "text-sm",
+  md: "text-sm",
+  lg: "text-base",
+  xl: "text-lg"
+};
+var AvatarSizeContext = React28.createContext("md");
+var Avatar = React28.forwardRef(({ size, ...props }, ref) => /* @__PURE__ */ jsx31(AvatarSizeContext.Provider, { value: size ?? "md", children: /* @__PURE__ */ jsx31(AvatarPrimitive.Root, { ref, className: cn(avatar({ size })), ...props }) }));
+Avatar.displayName = AvatarPrimitive.Root.displayName;
+var AvatarImage = React28.forwardRef(({ ...props }, ref) => /* @__PURE__ */ jsx31(AvatarPrimitive.Image, { ref, className: cn("aspect-square h-full w-full object-cover"), ...props }));
+AvatarImage.displayName = AvatarPrimitive.Image.displayName;
+var AvatarFallback = React28.forwardRef(({ ...props }, ref) => {
+  const size = React28.useContext(AvatarSizeContext);
+  return /* @__PURE__ */ jsx31(
+    AvatarPrimitive.Fallback,
+    {
+      ref,
+      className: cn("flex h-full w-full items-center justify-center rounded-full bg-surface-inset font-medium text-primary", FALLBACK_TEXT[size]),
+      ...props
+    }
+  );
+});
+AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName;
+
+// src/components/progress.tsx
+import * as React29 from "react";
+import * as ProgressPrimitive from "@radix-ui/react-progress";
+import { jsx as jsx32 } from "react/jsx-runtime";
+var Progress = React29.forwardRef(({ value = 0, indeterminate, ...props }, ref) => /* @__PURE__ */ jsx32(
+  ProgressPrimitive.Root,
+  {
+    ref,
+    value: indeterminate ? null : value,
+    className: cn("relative h-2 w-full overflow-hidden rounded-full bg-surface-track"),
+    ...props,
+    children: /* @__PURE__ */ jsx32(
+      ProgressPrimitive.Indicator,
+      {
+        className: cn(
+          "h-full bg-surface-inverse",
+          indeterminate ? "w-2/5 rounded-full animate-progress-indeterminate" : "w-full flex-1 transition-transform duration-slow"
+        ),
+        style: indeterminate ? void 0 : { transform: `translateX(-${100 - (value || 0)}%)` }
+      }
+    )
+  }
+));
+Progress.displayName = ProgressPrimitive.Root.displayName;
+
+// src/components/slider.tsx
+import * as React30 from "react";
+import * as SliderPrimitive from "@radix-ui/react-slider";
+import { jsx as jsx33, jsxs as jsxs15 } from "react/jsx-runtime";
+var Slider = React30.forwardRef(({ ...props }, ref) => /* @__PURE__ */ jsxs15(
+  SliderPrimitive.Root,
+  {
+    ref,
+    className: cn("relative flex w-full touch-none select-none items-center"),
+    ...props,
+    children: [
+      /* @__PURE__ */ jsx33(SliderPrimitive.Track, { className: "relative h-2 w-full grow overflow-hidden rounded-full bg-surface-track", children: /* @__PURE__ */ jsx33(SliderPrimitive.Range, { className: "absolute h-full bg-surface-inverse" }) }),
+      /* @__PURE__ */ jsx33(
+        SliderPrimitive.Thumb,
+        {
+          className: cn(
+            "block h-5 w-5 rounded-full border-2 border-strong bg-surface shadow-sm transition-colors",
+            focusRing,
+            "disabled:pointer-events-none disabled:opacity-50"
+          )
+        }
+      )
+    ]
+  }
+));
+Slider.displayName = SliderPrimitive.Root.displayName;
+
+// src/components/popover.tsx
+import * as React31 from "react";
+import * as PopoverPrimitive from "@radix-ui/react-popover";
+import { jsx as jsx34 } from "react/jsx-runtime";
+var Popover2 = PopoverPrimitive.Root;
+var PopoverTrigger = PopoverPrimitive.Trigger;
+var PopoverAnchor = PopoverPrimitive.Anchor;
+var PopoverContent = React31.forwardRef(({ align = "center", sideOffset = 6, ...props }, ref) => /* @__PURE__ */ jsx34(PopoverPrimitive.Portal, { children: /* @__PURE__ */ jsx34(
+  PopoverPrimitive.Content,
+  {
+    ref,
+    align,
+    sideOffset,
+    className: cn(floatingPanel, "w-72 rounded-xl p-4 shadow-lg animate-scale-in"),
+    ...props
+  }
+) }));
+PopoverContent.displayName = PopoverPrimitive.Content.displayName;
+
+// src/components/dropdown-menu.tsx
+import * as React32 from "react";
+import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
+import { Check as Check6, ChevronRight as ChevronRight2, Circle as Circle2 } from "lucide-react";
+import { jsx as jsx35, jsxs as jsxs16 } from "react/jsx-runtime";
+var DropdownMenuTrigger = DropdownMenuPrimitive.Trigger;
+var DropdownMenuGroup = DropdownMenuPrimitive.Group;
+var DropdownMenuPortal = DropdownMenuPrimitive.Portal;
+var DropdownMenuSub = DropdownMenuPrimitive.Sub;
+var DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup;
+var DropdownMenuContent = React32.forwardRef(({ sideOffset = 6, ...props }, ref) => /* @__PURE__ */ jsx35(DropdownMenuPrimitive.Portal, { children: /* @__PURE__ */ jsx35(
+  DropdownMenuPrimitive.Content,
+  {
+    ref,
+    sideOffset,
+    className: cn(floatingPanel, "min-w-48 overflow-hidden p-1 animate-scale-in"),
+    ...props
+  }
+) }));
+DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName;
+var DropdownMenuItem = React32.forwardRef(({ inset, ...props }, ref) => /* @__PURE__ */ jsx35(
+  DropdownMenuPrimitive.Item,
+  {
+    ref,
+    className: cn(
+      menuItem,
+      "gap-2 px-2 py-1.5 focus:bg-surface-inset focus:text-primary [&_svg]:size-4",
+      inset && "pl-8"
+    ),
+    ...props
+  }
+));
+DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName;
+var DropdownMenuCheckboxItem = React32.forwardRef(({ children, checked, ...props }, ref) => /* @__PURE__ */ jsxs16(
+  DropdownMenuPrimitive.CheckboxItem,
+  {
+    ref,
+    checked,
+    className: cn(menuItem, "py-1.5 pl-8 pr-2 focus:bg-surface-inset focus:text-primary"),
+    ...props,
+    children: [
+      /* @__PURE__ */ jsx35("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ jsx35(DropdownMenuPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx35(Check6, { className: "h-4 w-4" }) }) }),
+      children
+    ]
+  }
+));
+DropdownMenuCheckboxItem.displayName = DropdownMenuPrimitive.CheckboxItem.displayName;
+var DropdownMenuRadioItem = React32.forwardRef(({ children, ...props }, ref) => /* @__PURE__ */ jsxs16(
+  DropdownMenuPrimitive.RadioItem,
+  {
+    ref,
+    className: cn(menuItem, "py-1.5 pl-8 pr-2 focus:bg-surface-inset focus:text-primary"),
+    ...props,
+    children: [
+      /* @__PURE__ */ jsx35("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ jsx35(DropdownMenuPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx35(Circle2, { className: "h-2 w-2 fill-current" }) }) }),
+      children
+    ]
+  }
+));
+DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName;
+var DropdownMenuLabel = React32.forwardRef(({ inset, ...props }, ref) => /* @__PURE__ */ jsx35(
+  DropdownMenuPrimitive.Label,
+  {
+    ref,
+    className: cn("px-2 py-1.5 text-sm font-semibold text-tertiary", inset && "pl-8"),
+    ...props
+  }
+));
+DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName;
+var DropdownMenuSeparator = React32.forwardRef(({ ...props }, ref) => /* @__PURE__ */ jsx35(DropdownMenuPrimitive.Separator, { ref, className: cn("-mx-1 my-1 h-px bg-border"), ...props }));
+DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName;
+function DropdownMenuShortcut({ ...props }) {
+  return /* @__PURE__ */ jsx35("span", { className: cn("ml-auto text-sm tracking-widest text-tertiary"), ...props });
+}
+var DropdownMenuSubTrigger = React32.forwardRef(({ inset, children, ...props }, ref) => /* @__PURE__ */ jsxs16(
+  DropdownMenuPrimitive.SubTrigger,
+  {
+    ref,
+    className: cn(menuItem, "px-2 py-1.5 focus:bg-surface-inset focus:text-primary", inset && "pl-8"),
+    ...props,
+    children: [
+      children,
+      /* @__PURE__ */ jsx35(ChevronRight2, { className: "ml-auto h-4 w-4" })
+    ]
+  }
+));
+DropdownMenuSubTrigger.displayName = DropdownMenuPrimitive.SubTrigger.displayName;
+var DropdownMenuSubContent = React32.forwardRef(({ ...props }, ref) => /* @__PURE__ */ jsx35(
+  DropdownMenuPrimitive.SubContent,
+  {
+    ref,
+    className: cn(floatingPanel, "min-w-32 overflow-hidden p-1 animate-scale-in"),
+    ...props
+  }
+));
+DropdownMenuSubContent.displayName = DropdownMenuPrimitive.SubContent.displayName;
+function DropdownMenu({ trigger, items, children, ...props }) {
+  if (!items) return /* @__PURE__ */ jsx35(DropdownMenuPrimitive.Root, { ...props, children });
+  return /* @__PURE__ */ jsxs16(DropdownMenuPrimitive.Root, { ...props, children: [
+    trigger && /* @__PURE__ */ jsx35(DropdownMenuTrigger, { asChild: true, children: trigger }),
+    /* @__PURE__ */ jsx35(DropdownMenuContent, { children: items.map((item, i) => {
+      if (item.type === "separator") return /* @__PURE__ */ jsx35(DropdownMenuSeparator, {}, i);
+      if (item.type === "label") return /* @__PURE__ */ jsx35(DropdownMenuLabel, { children: item.label }, i);
+      return /* @__PURE__ */ jsxs16(DropdownMenuItem, { onSelect: item.onSelect, disabled: item.disabled, children: [
+        item.icon,
+        item.label,
+        item.shortcut && /* @__PURE__ */ jsx35(DropdownMenuShortcut, { children: item.shortcut })
+      ] }, i);
+    }) })
+  ] });
+}
+
+// src/components/table.tsx
+import * as React33 from "react";
+import { Fragment, jsx as jsx36, jsxs as jsxs17 } from "react/jsx-runtime";
+var alignClass = { left: "text-left", center: "text-center", right: "text-right" };
+function TableInner({ columns, data, caption, children, ...props }, ref) {
+  return /* @__PURE__ */ jsx36("div", { className: "relative w-full overflow-auto rounded-xl border border-border", children: /* @__PURE__ */ jsxs17("table", { ref, className: cn("w-full caption-bottom text-sm"), ...props, children: [
+    caption != null && /* @__PURE__ */ jsx36(TableCaption, { children: caption }),
+    columns && data ? /* @__PURE__ */ jsxs17(Fragment, { children: [
+      /* @__PURE__ */ jsx36(TableHeader, { children: /* @__PURE__ */ jsx36(TableRow, { children: columns.map((col, i) => /* @__PURE__ */ jsx36(TableHead, { align: col.align, children: col.header }, i)) }) }),
+      /* @__PURE__ */ jsx36(TableBody, { children: data.map((row, r) => /* @__PURE__ */ jsx36(TableRow, { children: columns.map((col, c) => /* @__PURE__ */ jsx36(TableCell, { align: col.align, children: typeof col.accessor === "function" ? col.accessor(row) : row[col.accessor] }, c)) }, r)) })
+    ] }) : children
+  ] }) });
+}
+var Table = React33.forwardRef(TableInner);
+Table.displayName = "Table";
+var TableHeader = React33.forwardRef(
+  ({ ...props }, ref) => /* @__PURE__ */ jsx36("thead", { ref, className: cn("[&_tr]:border-b [&_tr]:border-border"), ...props })
+);
+TableHeader.displayName = "TableHeader";
+var TableBody = React33.forwardRef(
+  ({ ...props }, ref) => /* @__PURE__ */ jsx36("tbody", { ref, className: cn("[&_tr:last-child]:border-0"), ...props })
+);
+TableBody.displayName = "TableBody";
+var TableFooter = React33.forwardRef(
+  ({ ...props }, ref) => /* @__PURE__ */ jsx36("tfoot", { ref, className: cn("border-t border-border bg-surface-subtle font-medium"), ...props })
+);
+TableFooter.displayName = "TableFooter";
+var TableRow = React33.forwardRef(
+  ({ ...props }, ref) => /* @__PURE__ */ jsx36("tr", { ref, className: cn("border-b border-border transition-colors hover:bg-surface-subtle data-[state=selected]:bg-surface-inset"), ...props })
+);
+TableRow.displayName = "TableRow";
+var TableHead = React33.forwardRef(({ align = "left", ...props }, ref) => /* @__PURE__ */ jsx36("th", { ref, className: cn("h-11 px-4 align-middle text-sm font-semibold uppercase tracking-wide text-tertiary", alignClass[align]), ...props }));
+TableHead.displayName = "TableHead";
+var TableCell = React33.forwardRef(({ align = "left", ...props }, ref) => /* @__PURE__ */ jsx36("td", { ref, className: cn("px-4 py-3 align-middle", alignClass[align]), ...props }));
+TableCell.displayName = "TableCell";
+var TableCaption = React33.forwardRef(
+  ({ ...props }, ref) => /* @__PURE__ */ jsx36("caption", { ref, className: cn("mt-4 text-sm text-secondary"), ...props })
+);
+TableCaption.displayName = "TableCaption";
+
+// src/components/data-table.tsx
+import * as React34 from "react";
+import { ChevronUp as ChevronUp2, ChevronDown as ChevronDown3, ChevronsUpDown as ChevronsUpDown2 } from "lucide-react";
+import { jsx as jsx37, jsxs as jsxs18 } from "react/jsx-runtime";
+function sortValue(col, row) {
+  if (col.sortAccessor) return col.sortAccessor(row);
+  if (typeof col.accessor !== "function") {
+    const v = row[col.accessor];
+    return typeof v === "number" ? v : String(v ?? "");
+  }
+  return "";
+}
+function DataTable({
+  columns,
+  data,
+  rowKey,
+  caption,
+  selectable,
+  selected,
+  onSelectedChange,
+  pageSize,
+  emptyState
+}) {
+  const [sort, setSort] = React34.useState(null);
+  const [page, setPage] = React34.useState(1);
+  const [internalSel, setInternalSel] = React34.useState([]);
+  const sel = selected ?? internalSel;
+  const setSel = (ids) => {
+    onSelectedChange?.(ids);
+    if (selected === void 0) setInternalSel(ids);
+  };
+  const sorted = React34.useMemo(() => {
+    if (!sort) return [...data];
+    const col = columns[sort.index];
+    const dir = sort.dir === "asc" ? 1 : -1;
+    return [...data].sort((a, b) => {
+      const av = sortValue(col, a);
+      const bv = sortValue(col, b);
+      if (av < bv) return -1 * dir;
+      if (av > bv) return 1 * dir;
+      return 0;
+    });
+  }, [data, sort, columns]);
+  const pageCount = pageSize ? Math.max(1, Math.ceil(sorted.length / pageSize)) : 1;
+  const current = Math.min(page, pageCount);
+  const rows = pageSize ? sorted.slice((current - 1) * pageSize, current * pageSize) : sorted;
+  const pageIds = rows.map(rowKey);
+  const allOnPageSelected = pageIds.length > 0 && pageIds.every((id) => sel.includes(id));
+  const toggleAll = () => setSel(allOnPageSelected ? sel.filter((id) => !pageIds.includes(id)) : [.../* @__PURE__ */ new Set([...sel, ...pageIds])]);
+  const toggleRow = (id) => setSel(sel.includes(id) ? sel.filter((x) => x !== id) : [...sel, id]);
+  const toggleSort = (index) => setSort(
+    (s) => s?.index !== index ? { index, dir: "asc" } : s.dir === "asc" ? { index, dir: "desc" } : null
+  );
+  const colCount = columns.length + (selectable ? 1 : 0);
+  return /* @__PURE__ */ jsxs18("div", { className: "flex flex-col gap-3", children: [
+    /* @__PURE__ */ jsxs18(Table, { caption, children: [
+      /* @__PURE__ */ jsx37(TableHeader, { children: /* @__PURE__ */ jsxs18(TableRow, { children: [
+        selectable && /* @__PURE__ */ jsx37(TableHead, { align: "center", children: /* @__PURE__ */ jsx37(
+          Checkbox,
+          {
+            checked: allOnPageSelected,
+            onCheckedChange: toggleAll,
+            "aria-label": "Select all rows on this page"
+          }
+        ) }),
+        columns.map((col, i) => {
+          const active = sort?.index === i;
+          const SortIcon = !active ? ChevronsUpDown2 : sort.dir === "asc" ? ChevronUp2 : ChevronDown3;
+          return /* @__PURE__ */ jsx37(TableHead, { align: col.align, children: col.sortable ? /* @__PURE__ */ jsxs18(
+            "button",
+            {
+              type: "button",
+              onClick: () => toggleSort(i),
+              "aria-label": `Sort by ${typeof col.header === "string" ? col.header : "column"}`,
+              className: cn(
+                "inline-flex items-center gap-1 rounded-sm transition-colors hover:text-primary",
+                "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+                active ? "text-primary" : "text-tertiary"
+              ),
+              children: [
+                col.header,
+                /* @__PURE__ */ jsx37(SortIcon, { className: "size-3.5 shrink-0", "aria-hidden": "true" })
+              ]
+            }
+          ) : col.header }, i);
+        })
+      ] }) }),
+      /* @__PURE__ */ jsx37(TableBody, { children: rows.length === 0 ? /* @__PURE__ */ jsx37(TableRow, { children: /* @__PURE__ */ jsx37(TableCell, { align: "center", colSpan: colCount, children: /* @__PURE__ */ jsx37("div", { className: "py-6 text-sm text-secondary", children: emptyState ?? "No results." }) }) }) : rows.map((row) => {
+        const id = rowKey(row);
+        const isSelected = sel.includes(id);
+        return /* @__PURE__ */ jsxs18(TableRow, { "data-state": isSelected ? "selected" : void 0, children: [
+          selectable && /* @__PURE__ */ jsx37(TableCell, { align: "center", children: /* @__PURE__ */ jsx37(
+            Checkbox,
+            {
+              checked: isSelected,
+              onCheckedChange: () => toggleRow(id),
+              "aria-label": "Select row"
+            }
+          ) }),
+          columns.map((col, c) => /* @__PURE__ */ jsx37(TableCell, { align: col.align, children: typeof col.accessor === "function" ? col.accessor(row) : row[col.accessor] }, c))
+        ] }, id);
+      }) })
+    ] }),
+    pageSize && pageCount > 1 && /* @__PURE__ */ jsxs18("div", { className: "flex items-center justify-between", children: [
+      /* @__PURE__ */ jsxs18("span", { className: "text-sm text-secondary", children: [
+        selectable && sel.length > 0 ? `${sel.length} selected \xB7 ` : "",
+        sorted.length,
+        " ",
+        sorted.length === 1 ? "row" : "rows"
+      ] }),
+      /* @__PURE__ */ jsx37(Pagination, { page: current, count: pageCount, onPageChange: setPage })
+    ] })
+  ] });
+}
+
+// src/components/breadcrumb.tsx
+import * as React35 from "react";
+import { ChevronRight as ChevronRight3 } from "lucide-react";
+import { jsx as jsx38, jsxs as jsxs19 } from "react/jsx-runtime";
+var Breadcrumb = React35.forwardRef(
+  ({ items, separator, ...props }, ref) => /* @__PURE__ */ jsx38("nav", { ref, "aria-label": "breadcrumb", ...props, children: /* @__PURE__ */ jsx38("ol", { className: cn("flex flex-wrap items-center gap-1.5 text-sm text-secondary"), children: items.map((item, index) => {
+    const isLast = index === items.length - 1;
+    return /* @__PURE__ */ jsxs19(React35.Fragment, { children: [
+      /* @__PURE__ */ jsx38("li", { className: cn("inline-flex items-center gap-1.5"), children: isLast || item.href == null ? /* @__PURE__ */ jsx38(Text, { span: true, size: "sm", weight: "medium", role: "link", "aria-disabled": "true", "aria-current": "page", children: item.label }) : /* @__PURE__ */ jsx38("a", { href: item.href, className: cn("transition-colors hover:text-link cursor-pointer"), children: item.label }) }),
+      !isLast && /* @__PURE__ */ jsx38("li", { role: "presentation", "aria-hidden": "true", className: cn("[&_svg]:size-3.5 text-tertiary"), children: separator ?? /* @__PURE__ */ jsx38(ChevronRight3, {}) })
+    ] }, index);
+  }) }) })
+);
+Breadcrumb.displayName = "Breadcrumb";
+
+// src/components/sheet.tsx
+import * as React36 from "react";
+import * as DialogPrimitive3 from "@radix-ui/react-dialog";
+import { cva as cva11 } from "class-variance-authority";
+import { X as X4 } from "lucide-react";
+import { jsx as jsx39, jsxs as jsxs20 } from "react/jsx-runtime";
+var Sheet = DialogPrimitive3.Root;
+var SheetTrigger = DialogPrimitive3.Trigger;
+var SheetClose = DialogPrimitive3.Close;
+var SheetPortal = DialogPrimitive3.Portal;
+var SheetOverlay = React36.forwardRef(({ ...props }, ref) => /* @__PURE__ */ jsx39(DialogPrimitive3.Overlay, { ref, className: cn(overlayBackdrop), ...props }));
+SheetOverlay.displayName = DialogPrimitive3.Overlay.displayName;
+var sheetVariants = cva11(
+  "fixed z-50 gap-4 bg-surface shadow-xl transition ease-in-out",
+  {
+    variants: {
+      side: {
+        top: "inset-x-0 top-0 border-b border-border",
+        bottom: "inset-x-0 bottom-0 border-t border-border",
+        left: "inset-y-0 left-0 h-full w-3/4 max-w-sm border-r border-border",
+        right: "inset-y-0 right-0 h-full w-3/4 max-w-sm border-l border-border"
+      }
+    },
+    defaultVariants: { side: "right" }
+  }
+);
+var SheetContent = React36.forwardRef(({ side = "right", title, description, footer, children, ...props }, ref) => /* @__PURE__ */ jsxs20(SheetPortal, { children: [
+  /* @__PURE__ */ jsx39(SheetOverlay, {}),
+  /* @__PURE__ */ jsxs20(DialogPrimitive3.Content, { ref, className: cn(sheetVariants({ side }), "flex flex-col p-6 animate-fade-in"), ...props, children: [
+    (title != null || description != null) && /* @__PURE__ */ jsxs20("div", { className: cn("flex flex-col gap-1.5"), children: [
+      title != null && /* @__PURE__ */ jsx39(DialogPrimitive3.Title, { className: cn("text-lg font-semibold text-primary"), children: title }),
+      description != null && /* @__PURE__ */ jsx39(DialogPrimitive3.Description, { className: cn("text-sm text-primary"), children: description })
+    ] }),
+    children,
+    footer != null && /* @__PURE__ */ jsx39("div", { className: cn("mt-auto flex flex-col gap-2"), children: footer }),
+    /* @__PURE__ */ jsx39(
+      DialogPrimitive3.Close,
+      {
+        className: cn(dismissButton, "focus:outline-none", focusRingInset),
+        "aria-label": "Close",
+        children: /* @__PURE__ */ jsx39(X4, { className: "h-4 w-4" })
+      }
+    )
+  ] })
+] }));
+SheetContent.displayName = DialogPrimitive3.Content.displayName;
+
+// src/components/multi-select.tsx
+import * as React37 from "react";
+import * as Popover3 from "@radix-ui/react-popover";
+import { Check as Check7, ChevronsUpDown as ChevronsUpDown3, X as X5 } from "lucide-react";
+import { jsx as jsx40, jsxs as jsxs21 } from "react/jsx-runtime";
+function MultiSelect({
+  options,
+  value,
+  onValueChange,
+  placeholder = "Select\u2026",
+  emptyText = "No results",
+  disabled,
+  invalid,
+  id,
+  "aria-describedby": ariaDescribedBy
+}) {
+  const [open, setOpen] = React37.useState(false);
+  const [query, setQuery] = React37.useState("");
+  const [highlight, setHighlight] = React37.useState(0);
+  const inputRef = React37.useRef(null);
+  const anchorRef = React37.useRef(null);
+  const listId = React37.useId();
+  const selectedOptions = value.map((v) => options.find((o) => o.value === v)).filter((o) => !!o);
+  const filtered = React37.useMemo(
+    () => query ? options.filter((o) => o.label.toLowerCase().includes(query.toLowerCase())) : options,
+    [query, options]
+  );
+  React37.useEffect(() => {
+    setHighlight((c) => Math.min(c, Math.max(0, filtered.length - 1)));
+  }, [filtered.length]);
+  const toggle = (v) => onValueChange(value.includes(v) ? value.filter((x) => x !== v) : [...value, v]);
+  const onKeyDown = (event) => {
+    if (event.key === "ArrowDown") {
+      event.preventDefault();
+      if (!open) setOpen(true);
+      setHighlight((c) => Math.min(c + 1, filtered.length - 1));
+    } else if (event.key === "ArrowUp") {
+      event.preventDefault();
+      setHighlight((c) => Math.max(c - 1, 0));
+    } else if (event.key === "Enter" && open && filtered[highlight]) {
+      event.preventDefault();
+      toggle(filtered[highlight].value);
+    } else if (event.key === "Backspace" && !query && value.length) {
+      onValueChange(value.slice(0, -1));
+    } else if (event.key === "Escape") {
+      setOpen(false);
+    }
+  };
+  const optionId = (i) => `${listId}-opt-${i}`;
+  return /* @__PURE__ */ jsxs21(Popover3.Root, { open, onOpenChange: setOpen, children: [
+    /* @__PURE__ */ jsx40(Popover3.Anchor, { asChild: true, children: /* @__PURE__ */ jsxs21(
+      "div",
+      {
+        ref: anchorRef,
+        className: cn(
+          "flex min-h-10 w-full flex-wrap items-center gap-1.5 rounded-lg border border-strong bg-surface px-2 py-1.5 text-sm text-primary",
+          "focus-within:border-focus focus-within:ring-2 focus-within:ring-ring",
+          disabled && "pointer-events-none opacity-50",
+          invalid && "border-error focus-within:border-error"
+        ),
+        onMouseDown: (e) => {
+          if (e.target === e.currentTarget) inputRef.current?.focus();
+        },
+        children: [
+          selectedOptions.map((o) => /* @__PURE__ */ jsxs21(
+            "span",
+            {
+              className: "inline-flex items-center gap-1 rounded-full border border-transparent bg-surface-inset px-2 py-0.5 text-sm text-primary",
+              children: [
+                o.label,
+                /* @__PURE__ */ jsx40(
+                  "button",
+                  {
+                    type: "button",
+                    "aria-label": `Remove ${o.label}`,
+                    onMouseDown: (e) => {
+                      e.preventDefault();
+                      e.stopPropagation();
+                    },
+                    onClick: () => toggle(o.value),
+                    className: "rounded-full opacity-70 transition-opacity hover:opacity-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring [&_svg]:size-3",
+                    children: /* @__PURE__ */ jsx40(X5, {})
+                  }
+                )
+              ]
+            },
+            o.value
+          )),
+          /* @__PURE__ */ jsx40(
+            "input",
+            {
+              ref: inputRef,
+              id,
+              role: "combobox",
+              "aria-expanded": open,
+              "aria-controls": listId,
+              "aria-autocomplete": "list",
+              "aria-invalid": invalid || void 0,
+              "aria-describedby": ariaDescribedBy,
+              "aria-activedescendant": open && filtered[highlight] ? optionId(highlight) : void 0,
+              disabled,
+              value: query,
+              placeholder: selectedOptions.length ? "" : placeholder,
+              onChange: (e) => {
+                setQuery(e.target.value);
+                setHighlight(0);
+                setOpen(true);
+              },
+              onFocus: () => setOpen(true),
+              onKeyDown,
+              className: "min-w-16 flex-1 bg-transparent placeholder:text-tertiary outline-none"
+            }
+          ),
+          /* @__PURE__ */ jsx40(ChevronsUpDown3, { className: "size-4 shrink-0 text-tertiary" })
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ jsx40(Popover3.Portal, { children: /* @__PURE__ */ jsx40(
+      Popover3.Content,
+      {
+        role: "listbox",
+        "aria-multiselectable": true,
+        id: listId,
+        align: "start",
+        sideOffset: 4,
+        onOpenAutoFocus: (e) => e.preventDefault(),
+        onCloseAutoFocus: (e) => e.preventDefault(),
+        onInteractOutside: (event) => {
+          const target = event.detail.originalEvent.target;
+          if (target && anchorRef.current?.contains(target)) event.preventDefault();
+        },
+        className: cn(floatingPanel, "max-h-60 w-[var(--radix-popover-trigger-width)] overflow-auto p-1 shadow-lg animate-scale-in"),
+        children: filtered.length === 0 ? /* @__PURE__ */ jsx40("div", { className: "px-2 py-1.5 text-sm text-tertiary", children: emptyText }) : filtered.map((option, index) => {
+          const isSelected = value.includes(option.value);
+          return /* @__PURE__ */ jsxs21(
+            "div",
+            {
+              id: optionId(index),
+              role: "option",
+              "aria-selected": isSelected,
+              onMouseEnter: () => setHighlight(index),
+              onMouseDown: (e) => {
+                e.preventDefault();
+                toggle(option.value);
+              },
+              className: cn(menuItem, "gap-2 px-2 py-1.5", index === highlight ? "bg-surface-inset text-primary" : "text-secondary"),
+              children: [
+                /* @__PURE__ */ jsx40(Check7, { className: cn("size-4 shrink-0", isSelected ? "opacity-100 text-primary" : "opacity-0") }),
+                option.label
+              ]
+            },
+            option.value
+          );
+        })
+      }
+    ) })
+  ] });
+}
+
+// src/components/command.tsx
+import * as React38 from "react";
+import * as DialogPrimitive4 from "@radix-ui/react-dialog";
+import { Command as CommandPrimitive } from "cmdk";
+import { Search } from "lucide-react";
+import { jsx as jsx41, jsxs as jsxs22 } from "react/jsx-runtime";
+var Command = React38.forwardRef(({ ...props }, ref) => /* @__PURE__ */ jsx41(
+  CommandPrimitive,
+  {
+    ref,
+    className: cn("flex h-full w-full flex-col overflow-hidden rounded-xl bg-surface text-primary"),
+    ...props
+  }
+));
+Command.displayName = "Command";
+var CommandInput = React38.forwardRef(({ ...props }, ref) => /* @__PURE__ */ jsxs22("div", { className: "flex items-center gap-2 border-b border-border px-3", children: [
+  /* @__PURE__ */ jsx41(Search, { className: "size-4 shrink-0 text-tertiary" }),
+  /* @__PURE__ */ jsx41(
+    CommandPrimitive.Input,
+    {
+      ref,
+      className: cn(
+        "flex h-11 w-full bg-transparent py-3 text-sm text-primary outline-none placeholder:text-tertiary",
+        "disabled:cursor-not-allowed disabled:opacity-50"
+      ),
+      ...props
+    }
+  )
+] }));
+CommandInput.displayName = "CommandInput";
+var CommandList = React38.forwardRef(({ ...props }, ref) => /* @__PURE__ */ jsx41(CommandPrimitive.List, { ref, className: cn("max-h-80 overflow-y-auto overflow-x-hidden p-1"), ...props }));
+CommandList.displayName = "CommandList";
+var CommandEmpty = React38.forwardRef(({ ...props }, ref) => /* @__PURE__ */ jsx41(CommandPrimitive.Empty, { ref, className: cn("py-6 text-center text-sm text-tertiary"), ...props }));
+CommandEmpty.displayName = "CommandEmpty";
+var CommandGroup = React38.forwardRef(({ ...props }, ref) => /* @__PURE__ */ jsx41(
+  CommandPrimitive.Group,
+  {
+    ref,
+    className: cn(
+      "overflow-hidden p-1 text-primary",
+      "[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-sm [&_[cmdk-group-heading]]:font-semibold [&_[cmdk-group-heading]]:text-tertiary"
+    ),
+    ...props
+  }
+));
+CommandGroup.displayName = "CommandGroup";
+var CommandSeparator = React38.forwardRef(({ ...props }, ref) => /* @__PURE__ */ jsx41(CommandPrimitive.Separator, { ref, className: cn("-mx-1 my-1 h-px bg-border"), ...props }));
+CommandSeparator.displayName = "CommandSeparator";
+var CommandItem = React38.forwardRef(({ ...props }, ref) => /* @__PURE__ */ jsx41(
+  CommandPrimitive.Item,
+  {
+    ref,
+    className: cn(
+      menuItem,
+      "gap-2 px-2 py-2 text-primary [&_svg]:size-4 [&_svg]:text-secondary",
+      "data-[selected=true]:bg-surface-inset data-[selected=true]:text-primary"
+    ),
+    ...props
+  }
+));
+CommandItem.displayName = "CommandItem";
+function CommandShortcut({ ...props }) {
+  return /* @__PURE__ */ jsx41("span", { className: cn("ml-auto text-sm tracking-widest text-tertiary"), ...props });
+}
+function CommandDialog({ open, onOpenChange, children, label = "Command palette" }) {
+  return /* @__PURE__ */ jsx41(DialogPrimitive4.Root, { open, onOpenChange, children: /* @__PURE__ */ jsxs22(DialogPrimitive4.Portal, { children: [
+    /* @__PURE__ */ jsx41(DialogPrimitive4.Overlay, { className: cn(overlayBackdrop) }),
+    /* @__PURE__ */ jsxs22(
+      DialogPrimitive4.Content,
+      {
+        className: cn(
+          "fixed left-1/2 top-[15%] z-50 w-full max-w-2xl -translate-x-1/2 overflow-hidden",
+          "rounded-2xl border border-border bg-surface shadow-xl animate-scale-in"
+        ),
+        children: [
+          /* @__PURE__ */ jsx41(DialogPrimitive4.Title, { className: "sr-only", children: label }),
+          /* @__PURE__ */ jsx41(Command, { children })
+        ]
+      }
+    )
+  ] }) });
+}
+
+// src/components/calendar.tsx
+import { DayPicker } from "react-day-picker";
+import { ChevronLeft as ChevronLeft2, ChevronRight as ChevronRight4 } from "lucide-react";
+import { jsx as jsx42 } from "react/jsx-runtime";
+var navButton = cn(
+  "inline-flex h-7 w-7 items-center justify-center rounded-md border border-strong bg-surface text-primary",
+  "transition-colors hover:bg-surface-subtle disabled:opacity-40 disabled:pointer-events-none",
+  focusRingInset
+);
+function Calendar({ showOutsideDays = true, classNames, ...props }) {
+  return /* @__PURE__ */ jsx42(
+    DayPicker,
+    {
+      showOutsideDays,
+      className: "p-3",
+      classNames: {
+        months: "flex flex-col gap-4",
+        month: "flex flex-col gap-3",
+        month_caption: "relative flex h-7 items-center justify-center",
+        caption_label: "text-sm font-medium text-primary",
+        nav: "absolute inset-x-0 flex items-center justify-between",
+        button_previous: navButton,
+        button_next: navButton,
+        month_grid: "w-full border-collapse",
+        weekdays: "flex",
+        weekday: "w-9 text-sm font-normal text-tertiary",
+        week: "mt-1 flex w-full",
+        day: "relative h-9 w-9 p-0 text-center text-sm text-primary",
+        day_button: cn(
+          "inline-flex h-9 w-9 items-center justify-center rounded-md transition-colors",
+          "hover:bg-surface-inset",
+          focusRingInset
+        ),
+        today: "font-semibold underline underline-offset-4",
+        selected: "[&_button]:bg-surface-inverse [&_button]:text-inverse [&_button:hover]:bg-surface-inverse",
+        outside: "text-disabled",
+        disabled: "text-disabled opacity-50",
+        range_start: "rounded-l-md bg-surface-inset [&_button]:bg-surface-inverse [&_button]:text-inverse",
+        range_end: "rounded-r-md bg-surface-inset [&_button]:bg-surface-inverse [&_button]:text-inverse",
+        range_middle: "rounded-none bg-surface-inset [&_button]:bg-transparent [&_button]:text-primary",
+        hidden: "invisible",
+        ...classNames
+      },
+      components: {
+        Chevron: ({ orientation }) => orientation === "left" ? /* @__PURE__ */ jsx42(ChevronLeft2, { className: "size-4" }) : /* @__PURE__ */ jsx42(ChevronRight4, { className: "size-4" })
+      },
+      ...props
+    }
+  );
+}
+Calendar.displayName = "Calendar";
+
+// src/components/date-picker.tsx
+import * as React39 from "react";
+import * as PopoverPrimitive2 from "@radix-ui/react-popover";
+import { Calendar as CalendarIcon } from "lucide-react";
+import { jsx as jsx43, jsxs as jsxs23 } from "react/jsx-runtime";
+function DatePicker({
+  value,
+  onValueChange,
+  placeholder = "Pick a date",
+  disabled,
+  invalid,
+  id,
+  "aria-describedby": ariaDescribedBy,
+  formatOptions = { dateStyle: "medium" }
+}) {
+  const [open, setOpen] = React39.useState(false);
+  const label = value ? new Intl.DateTimeFormat(void 0, formatOptions).format(value) : null;
+  return /* @__PURE__ */ jsxs23(Popover2, { open, onOpenChange: setOpen, children: [
+    /* @__PURE__ */ jsx43(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxs23(
+      "button",
+      {
+        type: "button",
+        id,
+        disabled,
+        "aria-invalid": invalid || void 0,
+        "aria-describedby": ariaDescribedBy,
+        className: cn(
+          "flex h-10 w-full items-center gap-2 rounded-lg border border-strong bg-surface px-3 text-left text-sm",
+          "transition-colors hover:bg-surface-subtle",
+          focusRingField,
+          "disabled:cursor-not-allowed disabled:opacity-50",
+          invalid && "border-error focus-visible:border-error"
+        ),
+        children: [
+          /* @__PURE__ */ jsx43(CalendarIcon, { className: "size-4 shrink-0 text-tertiary" }),
+          /* @__PURE__ */ jsx43("span", { className: cn("flex-1", label ? "text-primary" : "text-tertiary"), children: label ?? placeholder })
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ jsx43(PopoverPrimitive2.Portal, { children: /* @__PURE__ */ jsx43(
+      PopoverPrimitive2.Content,
+      {
+        align: "start",
+        sideOffset: 6,
+        className: cn(floatingPanel, "w-auto rounded-xl shadow-lg animate-scale-in"),
+        children: /* @__PURE__ */ jsx43(
+          Calendar,
+          {
+            mode: "single",
+            selected: value,
+            onSelect: (date) => {
+              onValueChange?.(date);
+              setOpen(false);
+            },
+            autoFocus: true
+          }
+        )
+      }
+    ) })
+  ] });
+}
+
+// src/components/chart.tsx
+import * as React40 from "react";
+import * as echarts from "echarts/core";
+import { LineChart, BarChart, PieChart, ScatterChart } from "echarts/charts";
+import {
+  TitleComponent,
+  TooltipComponent,
+  GridComponent,
+  LegendComponent,
+  DataZoomComponent,
+  MarkLineComponent,
+  MarkAreaComponent
+} from "echarts/components";
+import { CanvasRenderer } from "echarts/renderers";
+import { jsx as jsx44 } from "react/jsx-runtime";
+echarts.use([
+  LineChart,
+  BarChart,
+  PieChart,
+  ScatterChart,
+  TitleComponent,
+  TooltipComponent,
+  GridComponent,
+  LegendComponent,
+  DataZoomComponent,
+  MarkLineComponent,
+  MarkAreaComponent,
+  CanvasRenderer
+]);
+var cssVar = (name) => getComputedStyle(document.documentElement).getPropertyValue(name).trim();
+function buildTheme() {
+  const text2 = cssVar("--wf-color-text-primary");
+  const muted = cssVar("--wf-color-text-secondary");
+  const faint = cssVar("--wf-color-text-tertiary");
+  const line = cssVar("--wf-color-border-default");
+  const subtle = cssVar("--wf-color-border-subtle");
+  const surface2 = cssVar("--wf-color-background-paper");
+  const font = cssVar("--wf-font-sans");
+  const palette = [
+    cssVar("--wf-color-brand-primary"),
+    cssVar("--wf-color-status-info-default"),
+    cssVar("--wf-color-status-success-default"),
+    cssVar("--wf-color-status-warning-default"),
+    cssVar("--wf-color-status-error-default"),
+    cssVar("--wf-color-brand-secondary")
+  ].filter(Boolean);
+  const axis = {
+    axisLine: { lineStyle: { color: line } },
+    axisTick: { lineStyle: { color: line } },
+    axisLabel: { color: muted },
+    splitLine: { lineStyle: { color: subtle } }
+  };
+  return {
+    color: palette,
+    backgroundColor: "transparent",
+    textStyle: { color: text2, fontFamily: font },
+    title: { textStyle: { color: text2 }, subtextStyle: { color: faint } },
+    legend: { textStyle: { color: muted } },
+    tooltip: {
+      backgroundColor: surface2,
+      borderColor: line,
+      textStyle: { color: text2, fontFamily: font },
+      axisPointer: { lineStyle: { color: muted }, crossStyle: { color: muted } }
+    },
+    categoryAxis: axis,
+    valueAxis: axis,
+    logAxis: axis,
+    timeAxis: axis,
+    // Series labels (notably pie's outside labels) don't inherit the global
+    // textStyle — pin them to the foreground token so they stay readable in both
+    // modes, and tint the connector lines with the border token.
+    pie: {
+      label: { color: text2, fontFamily: font },
+      labelLine: { lineStyle: { color: line } }
+    }
+  };
+}
+function Chart({ option, height = 320, notMerge = true, onEvents }) {
+  const elRef = React40.useRef(null);
+  const chartRef = React40.useRef(null);
+  const [themeKey, bump] = React40.useReducer((x) => x + 1, 0);
+  React40.useEffect(() => {
+    const mo = new MutationObserver(() => bump());
+    mo.observe(document.documentElement, { attributes: true, attributeFilter: ["class", "style"] });
+    return () => mo.disconnect();
+  }, []);
+  React40.useEffect(() => {
+    if (!elRef.current) return;
+    const chart = echarts.init(elRef.current, buildTheme());
+    chartRef.current = chart;
+    chart.setOption(option, notMerge);
+    if (onEvents) for (const [name, handler] of Object.entries(onEvents)) chart.on(name, handler);
+    const ro = new ResizeObserver(() => chart.resize());
+    ro.observe(elRef.current);
+    return () => {
+      ro.disconnect();
+      chart.dispose();
+      chartRef.current = null;
+    };
+  }, [themeKey]);
+  React40.useEffect(() => {
+    chartRef.current?.setOption(option, notMerge);
+  }, [option, notMerge]);
+  return /* @__PURE__ */ jsx44("div", { ref: elRef, role: "img", style: { height, width: "100%" } });
+}
+
+// src/icons/forge-icon.tsx
+import * as React41 from "react";
+import { jsx as jsx45, jsxs as jsxs24 } from "react/jsx-runtime";
+var WINDFORGE_PATH = "M403.1,144.03 403.39,140.32 401.1,134.61 349.97,85.76 345.97,84.05 340.26,84.62 328.27,95.47 324.84,95.47 283.14,58.34 270,52.06 262,52.63 252.86,57.77 200.02,115.75 196.59,122.04 199.44,131.75 261.71,190.02 256,202.02 236.01,230.58 236.29,232.58 260.28,236.01 290.56,242.86 327.69,257.14 351.69,273.14 390.53,310.27 394.53,311.98 399.67,311.41 403.39,308.27 455.37,248.86 461.09,236.86 461.09,229.44 456.52,219.72 394.82,160.88 394.82,157.46 403.1,144.03Z M138.03,155.46 150.6,154.89 159.74,157.17 180.31,169.74 177.16,161.45 169.74,150.03 156.31,137.75 143.17,130.89 130.04,127.46 110.61,127.46 95.76,131.46 78.62,141.17 66.34,153.46 56.06,171.17 50.91,192.3 50.91,204.3 53.77,219.72 57.77,230.58 66.34,244.86 86.05,263.43 102.61,272.57 115.18,277.14 148.89,283.42 183.73,284.56 246.57,279.99 272.85,280.56 295.13,283.42 316.27,288.56 334.55,295.42 355.69,306.27 372.82,318.27 373.68,317.41 351.12,293.7 339.69,283.99 320.84,271.42 297.99,260.57 257.43,249.14 167.17,236.58 139.75,228.01 124.89,219.44 115.47,210.01 111.47,203.16 108.61,193.45 109.18,180.88 113.75,170.02 120.89,162.31 131.18,156.6 138.03,155.46Z M277.42,296.56 276.28,294.28 248.29,293.13 182.59,297.13 88.62,402.53 84.05,412.24 83.48,424.81 85.76,432.24 92.05,442.52 102.04,451.95 116.32,458.8 129.46,459.94 143.75,454.23 277.42,296.56Z";
+var ForgeIcon = React41.forwardRef(
+  ({ className, ...props }, ref) => {
+    const gradId = `forge-${React41.useId().replace(/:/g, "")}`;
+    return /* @__PURE__ */ jsxs24(
+      "svg",
+      {
+        ref,
+        viewBox: "0 0 512 512",
+        role: "img",
+        "aria-label": "Windforge",
+        className: cn("h-6 w-6", className),
+        ...props,
+        children: [
+          /* @__PURE__ */ jsx45("defs", { children: /* @__PURE__ */ jsxs24("linearGradient", { id: gradId, x1: "0", y1: "1", x2: "1", y2: "0", children: [
+            /* @__PURE__ */ jsx45("stop", { offset: "0", stopColor: "var(--wf-color-brand-primary-active)" }),
+            /* @__PURE__ */ jsx45("stop", { offset: "1", stopColor: "var(--wf-color-brand-secondary)" })
+          ] }) }),
+          /* @__PURE__ */ jsx45("path", { fill: `url(#${gradId})`, fillRule: "evenodd", d: WINDFORGE_PATH })
+        ]
+      }
+    );
+  }
+);
+ForgeIcon.displayName = "ForgeIcon";
+function WindforgeLogo({ className, markOnly = false }) {
+  return /* @__PURE__ */ jsxs24("span", { className: cn("inline-flex items-center gap-2.5", className), children: [
+    /* @__PURE__ */ jsx45(ForgeIcon, { className: "h-8 w-8 drop-shadow-sm" }),
+    !markOnly && /* @__PURE__ */ jsx45("span", { className: "text-base font-bold tracking-tight text-primary leading-none", children: "WindForge" })
+  ] });
+}
+
+// src/icons/svg-icon.tsx
+import * as React42 from "react";
+import { jsx as jsx46 } from "react/jsx-runtime";
+var SVGIcon = React42.forwardRef(
+  ({ viewBox = "0 0 24 24", label, children, ...props }, ref) => /* @__PURE__ */ jsx46(
+    "svg",
+    {
+      ref,
+      xmlns: "http://www.w3.org/2000/svg",
+      viewBox,
+      width: 24,
+      height: 24,
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: 2,
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      role: label ? "img" : void 0,
+      "aria-label": label,
+      "aria-hidden": label ? void 0 : true,
+      ...props,
+      children
+    }
+  )
+);
+SVGIcon.displayName = "SVGIcon";
+
+// src/icons/icon-set.ts
+import {
+  ArrowUp,
+  ArrowDown,
+  ArrowLeft,
+  ArrowRight,
+  ArrowUpRight,
+  ChevronUp as ChevronUp3,
+  ChevronDown as ChevronDown4,
+  ChevronLeft as ChevronLeft3,
+  ChevronRight as ChevronRight5,
+  ChevronsUpDown as ChevronsUpDown4,
+  ChevronsLeft,
+  ChevronsRight,
+  CornerDownLeft,
+  Menu,
+  MoreHorizontal,
+  MoreVertical,
+  Home,
+  Search as Search2,
+  LayoutDashboard,
+  LayoutGrid,
+  PanelLeft,
+  PanelRight,
+  PanelTop,
+  Map,
+  MapPin,
+  Globe,
+  ExternalLink,
+  Link as Link2,
+  Filter,
+  Plus,
+  Minus,
+  X as X6,
+  Check as Check8,
+  Copy as Copy2,
+  ClipboardCheck,
+  Pencil,
+  Trash2,
+  Save,
+  Download,
+  Upload,
+  Share2,
+  RefreshCw,
+  RotateCw,
+  Settings,
+  SlidersHorizontal,
+  Send,
+  Eye,
+  EyeOff,
+  Maximize2,
+  Info as Info2,
+  AlertTriangle as AlertTriangle2,
+  AlertCircle,
+  CheckCircle2 as CheckCircle22,
+  XCircle as XCircle2,
+  HelpCircle,
+  Ban,
+  ShieldCheck,
+  Shield,
+  Bell,
+  BellRing,
+  BellOff,
+  LoaderCircle,
+  Star,
+  Heart,
+  Bookmark,
+  Flag,
+  ThumbsUp,
+  File,
+  FileText,
+  Folder,
+  FolderOpen,
+  Image as Image2,
+  Paperclip,
+  Inbox,
+  Archive,
+  Package,
+  Box as Box2,
+  Boxes,
+  Database,
+  Server,
+  Cloud,
+  Calendar as Calendar2,
+  Clock,
+  Mail,
+  MessageSquare,
+  MessageCircle,
+  Phone,
+  AtSign,
+  Hash,
+  Megaphone,
+  Rss,
+  Play,
+  Pause,
+  SkipForward,
+  SkipBack,
+  Volume2,
+  VolumeX,
+  Mic,
+  MicOff,
+  Camera,
+  Video,
+  Music,
+  Bold,
+  Italic,
+  Underline,
+  AlignLeft,
+  AlignCenter,
+  AlignRight,
+  AlignJustify,
+  List as List2,
+  ListOrdered,
+  ListChecks,
+  Type,
+  Code2,
+  Quote,
+  User,
+  Users,
+  UserPlus,
+  CircleUser,
+  LogIn,
+  LogOut,
+  CreditCard,
+  ShoppingCart,
+  DollarSign,
+  Wallet,
+  Gift,
+  Briefcase,
+  Building2,
+  ToggleLeft,
+  ToggleRight,
+  Circle as Circle3,
+  CircleDot,
+  CircleDashed,
+  Square,
+  CheckSquare,
+  Shapes,
+  Tag,
+  Palette,
+  SwatchBook,
+  Sun,
+  Moon,
+  MonitorSmartphone,
+  Sparkles,
+  Rocket,
+  Zap,
+  Layers,
+  Ruler,
+  Gauge,
+  Accessibility,
+  Lock,
+  Unlock,
+  Bot,
+  Terminal,
+  GitBranch,
+  TrendingUp,
+  Activity
+} from "lucide-react";
+var commonIconGroups = [
+  { label: "Arrows & chevrons", icons: { ArrowUp, ArrowDown, ArrowLeft, ArrowRight, ArrowUpRight, ChevronUp: ChevronUp3, ChevronDown: ChevronDown4, ChevronLeft: ChevronLeft3, ChevronRight: ChevronRight5, ChevronsUpDown: ChevronsUpDown4, ChevronsLeft, ChevronsRight, CornerDownLeft } },
+  { label: "Navigation & layout", icons: { Menu, MoreHorizontal, MoreVertical, Home, Search: Search2, LayoutDashboard, LayoutGrid, PanelLeft, PanelRight, PanelTop, Map, MapPin, Globe, ExternalLink, Link: Link2, Filter } },
+  { label: "Actions", icons: { Plus, Minus, X: X6, Check: Check8, Copy: Copy2, ClipboardCheck, Pencil, Trash2, Save, Download, Upload, Share2, RefreshCw, RotateCw, Settings, SlidersHorizontal, Send, Eye, EyeOff, Maximize2 } },
+  { label: "Status & feedback", icons: { Info: Info2, AlertTriangle: AlertTriangle2, AlertCircle, CheckCircle2: CheckCircle22, XCircle: XCircle2, HelpCircle, Ban, ShieldCheck, Shield, Bell, BellRing, BellOff, LoaderCircle, Star, Heart, Bookmark, Flag, ThumbsUp } },
+  { label: "Files & data", icons: { File, FileText, Folder, FolderOpen, Image: Image2, Paperclip, Inbox, Archive, Package, Box: Box2, Boxes, Database, Server, Cloud, Calendar: Calendar2, Clock } },
+  { label: "Communication", icons: { Mail, MessageSquare, MessageCircle, Phone, AtSign, Hash, Megaphone, Rss } },
+  { label: "Media", icons: { Play, Pause, SkipForward, SkipBack, Volume2, VolumeX, Mic, MicOff, Camera, Video, Music } },
+  { label: "Text & formatting", icons: { Bold, Italic, Underline, AlignLeft, AlignCenter, AlignRight, AlignJustify, List: List2, ListOrdered, ListChecks, Type, Code2, Quote } },
+  { label: "People & commerce", icons: { User, Users, UserPlus, CircleUser, LogIn, LogOut, CreditCard, ShoppingCart, DollarSign, Wallet, Gift, Briefcase, Building2 } },
+  { label: "Toggles & shapes", icons: { ToggleLeft, ToggleRight, Circle: Circle3, CircleDot, CircleDashed, Square, CheckSquare, Shapes, Tag } },
+  { label: "Theming & system", icons: { Palette, SwatchBook, Sun, Moon, MonitorSmartphone, Sparkles, Rocket, Zap, Layers, Ruler, Gauge, Accessibility, Lock, Unlock, Bot, Terminal, GitBranch, TrendingUp, Activity } }
+];
+var commonIcons = Object.assign({}, ...commonIconGroups.map((g) => g.icons));
+
+// src/layouts/theme-provider.tsx
+import * as React43 from "react";
+import { jsx as jsx47 } from "react/jsx-runtime";
+var MODE_KEY = "wf-mode";
+function themeInitScript(storageKey = MODE_KEY) {
+  return `(function(){try{var m=localStorage.getItem('${storageKey}')||'system';var d=m==='dark'||(m==='system'&&window.matchMedia('(prefers-color-scheme: dark)').matches);var e=document.documentElement;e.classList.toggle('dark',d);e.style.colorScheme=d?'dark':'light';}catch(e){}})()`;
+}
+var canUseDOM = typeof window !== "undefined";
+var readStoredMode = () => {
+  try {
+    return canUseDOM ? localStorage.getItem(MODE_KEY) : null;
+  } catch {
+    return null;
+  }
+};
+var prefersDark = () => canUseDOM && window.matchMedia("(prefers-color-scheme: dark)").matches;
+var resolveMode = (mode) => mode === "system" ? prefersDark() ? "dark" : "light" : mode;
+var nextMode = (mode) => mode === "light" ? "dark" : mode === "dark" ? "system" : "light";
+var ThemeContext = React43.createContext(null);
+function ThemeProvider({ children, defaultMode = "system", tokens, persist = true }) {
+  const [mode, setModeState] = React43.useState(
+    () => persist && readStoredMode() || defaultMode
+  );
+  const [resolvedMode, setResolvedMode] = React43.useState(() => resolveMode(mode));
+  const applyMode = (mode2) => {
+    const resolved = resolveMode(mode2);
+    setResolvedMode(resolved);
+    if (!canUseDOM) return;
+    const root = document.documentElement;
+    const noTransitions = document.createElement("style");
+    noTransitions.textContent = "*,*::before,*::after{transition:none!important}";
+    document.head.appendChild(noTransitions);
+    root.classList.toggle("dark", resolved === "dark");
+    root.style.colorScheme = resolved;
+    void root.offsetHeight;
+    window.setTimeout(() => noTransitions.remove(), 1);
+  };
+  const setMode = (mode2) => {
+    setModeState(mode2);
+    if (persist) {
+      try {
+        localStorage.setItem(MODE_KEY, mode2);
+      } catch {
+      }
+    }
+    applyMode(mode2);
+  };
+  React43.useEffect(() => {
+    if (mode !== "system") return;
+    const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
+    const onSystemChange = () => applyMode("system");
+    mediaQuery.addEventListener("change", onSystemChange);
+    return () => mediaQuery.removeEventListener("change", onSystemChange);
+  }, [mode]);
+  const value = { mode, resolvedMode, setMode, cycleMode: () => setMode(nextMode(mode)) };
+  const resolvedTokens = typeof tokens === "function" ? tokens(resolvedMode) : tokens;
+  const tokenSig = resolvedTokens ? JSON.stringify(resolvedTokens) : "";
+  React43.useLayoutEffect(() => {
+    if (!canUseDOM || !tokenSig) return;
+    const map = JSON.parse(tokenSig);
+    const root = document.documentElement;
+    const keys = Object.keys(map);
+    for (const key of keys) root.style.setProperty(key, map[key]);
+    return () => {
+      for (const key of keys) root.style.removeProperty(key);
+    };
+  }, [tokenSig]);
+  return /* @__PURE__ */ jsx47(ThemeContext.Provider, { value, children });
+}
+function useTheme() {
+  const ctx = React43.useContext(ThemeContext);
+  if (!ctx) throw new Error("useTheme must be used within a <ThemeProvider>");
+  return ctx;
+}
+
+// src/layouts/app-shell.tsx
+import * as React44 from "react";
+import { jsx as jsx48, jsxs as jsxs25 } from "react/jsx-runtime";
+var NAV_WIDTH = 256;
+var AppShellContext = React44.createContext(null);
+var useAppShell = () => React44.useContext(AppShellContext);
+function AppShell({ header, sidebar, children, fullBleed = false, defaultNavOpen = true }) {
+  const isMobile = useMediaQuery("(max-width: 1023px)");
+  const [navOpen, setNavOpen] = React44.useState(defaultNavOpen);
+  const [drawerOpen, setDrawerOpen] = React44.useState(false);
+  const ctx = React44.useMemo(
+    () => ({
+      toggleNav: () => isMobile ? setDrawerOpen((o) => !o) : setNavOpen((o) => !o),
+      closeNav: () => setDrawerOpen(false)
+    }),
+    [isMobile]
+  );
+  const desktopNavVisible = !isMobile && navOpen;
+  return /* @__PURE__ */ jsx48(AppShellContext.Provider, { value: ctx, children: /* @__PURE__ */ jsxs25("div", { className: "flex min-h-screen bg-background text-primary", children: [
+    desktopNavVisible && sidebar && /* @__PURE__ */ jsx48("aside", { className: "fixed inset-y-0 left-0 z-20 shrink-0", style: { width: NAV_WIDTH }, children: sidebar }),
+    /* @__PURE__ */ jsx48(Sheet, { open: isMobile && drawerOpen, onOpenChange: setDrawerOpen, children: /* @__PURE__ */ jsx48(SheetContent, { side: "left", children: /* @__PURE__ */ jsx48(Box, { className: "-m-6 h-[calc(100%+3rem)] w-64", children: sidebar }) }) }),
+    /* @__PURE__ */ jsxs25(
+      "div",
+      {
+        className: "flex min-w-0 flex-1 flex-col transition-[margin] duration-normal",
+        style: { marginLeft: desktopNavVisible ? NAV_WIDTH : 0 },
+        children: [
+          header,
+          /* @__PURE__ */ jsx48("main", { className: cn("flex-1 overflow-auto", !fullBleed && "px-gutter py-lg md:px-xl"), children })
+        ]
+      }
+    )
+  ] }) });
+}
+
+// src/layouts/side-nav.tsx
+import * as React45 from "react";
+import * as AccordionPrimitive2 from "@radix-ui/react-accordion";
+import { ChevronDown as ChevronDown5 } from "lucide-react";
+import { Fragment as Fragment3, jsx as jsx49, jsxs as jsxs26 } from "react/jsx-runtime";
+var NavList = ({ className, ...props }) => /* @__PURE__ */ jsx49("ul", { className: cn("flex flex-col", className), ...props });
+var navButtonBase = "group relative flex w-full items-center gap-2.5 rounded-md px-3 py-1.5 text-left text-sm font-medium transition-colors disabled:opacity-40 disabled:pointer-events-none [&_svg]:size-[18px] [&_svg]:shrink-0 focus-visible:ring-inset " + focusRingInset;
+var NavButton = React45.forwardRef(
+  ({ className, active, ...props }, ref) => /* @__PURE__ */ jsx49(
+    "button",
+    {
+      ref,
+      type: "button",
+      className: cn(
+        navButtonBase,
+        active ? "bg-surface-inset text-primary" : "text-secondary hover:bg-surface-inset hover:text-primary",
+        className
+      ),
+      ...props
+    }
+  )
+);
+NavButton.displayName = "NavButton";
+var NavSubheader = ({ className, ...props }) => /* @__PURE__ */ jsx49(
+  "li",
+  {
+    className: cn(
+      "mt-md px-3 pb-1.5 pt-1 text-sm font-semibold uppercase tracking-wider text-tertiary first:mt-none",
+      className
+    ),
+    ...props
+  }
+);
+var indent = (depth) => ({
+  paddingLeft: depth > 0 ? `calc(0.75rem + ${depth} * var(--wf-spacing-md))` : void 0
+});
+function NavLeaf({
+  item,
+  active,
+  depth,
+  onNavigate
+}) {
+  return /* @__PURE__ */ jsx49("li", { children: /* @__PURE__ */ jsxs26(
+    NavButton,
+    {
+      active,
+      disabled: item.disabled,
+      "aria-current": active ? "page" : void 0,
+      style: indent(depth),
+      onClick: () => {
+        item.onClick?.();
+        if (item.path) onNavigate(item.path);
+      },
+      children: [
+        active && /* @__PURE__ */ jsx49("span", { className: "absolute left-0 top-1/2 h-5 w-0.5 -translate-y-1/2 rounded-full bg-surface-inverse" }),
+        item.icon,
+        /* @__PURE__ */ jsx49("span", { className: "truncate", children: item.label }),
+        item.badge && /* @__PURE__ */ jsx49("span", { className: "ml-auto", children: item.badge })
+      ]
+    }
+  ) });
+}
+function NavGroup({
+  item,
+  activePath,
+  depth,
+  onNavigate
+}) {
+  const containsActive = React45.useMemo(() => hasActivePath(item.children, activePath), [item.children, activePath]);
+  const defaultValue = item.defaultOpen ?? containsActive ? "group" : void 0;
+  return /* @__PURE__ */ jsx49("li", { children: /* @__PURE__ */ jsx49(AccordionPrimitive2.Root, { type: "single", collapsible: true, defaultValue, children: /* @__PURE__ */ jsxs26(AccordionPrimitive2.Item, { value: "group", children: [
+    /* @__PURE__ */ jsx49(AccordionPrimitive2.Header, { className: "flex", children: /* @__PURE__ */ jsx49(AccordionPrimitive2.Trigger, { asChild: true, children: /* @__PURE__ */ jsxs26(
+      NavButton,
+      {
+        style: indent(depth),
+        className: "data-[state=open]:[&_svg:last-of-type]:rotate-180",
+        children: [
+          item.icon,
+          /* @__PURE__ */ jsx49("span", { className: "truncate", children: item.label }),
+          /* @__PURE__ */ jsx49(ChevronDown5, { className: "ml-auto !size-4 transition-transform duration-200" })
+        ]
+      }
+    ) }) }),
+    /* @__PURE__ */ jsx49(AccordionPrimitive2.Content, { className: "overflow-hidden data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down", children: /* @__PURE__ */ jsx49(NavList, { children: item.children.map((child, index) => /* @__PURE__ */ jsx49(NavRenderer, { item: child, activePath, depth: depth + 1, onNavigate }, index)) }) })
+  ] }) }) });
+}
+function NavRenderer({
+  item,
+  activePath,
+  depth,
+  onNavigate
+}) {
+  if (item.type === "divider") return /* @__PURE__ */ jsx49("li", { role: "separator", className: "my-sm h-px bg-border" });
+  if (item.type === "section") {
+    return /* @__PURE__ */ jsxs26(Fragment3, { children: [
+      /* @__PURE__ */ jsx49(NavSubheader, { children: item.label }),
+      item.items.map((child, index) => /* @__PURE__ */ jsx49(NavRenderer, { item: child, activePath, depth, onNavigate }, index))
+    ] });
+  }
+  if (item.type === "group") {
+    return /* @__PURE__ */ jsx49(NavGroup, { item, activePath, depth, onNavigate });
+  }
+  return /* @__PURE__ */ jsx49(NavLeaf, { item, active: !!item.path && activePath === item.path, depth, onNavigate });
+}
+function hasActivePath(items, activePath) {
+  return items.some((item) => {
+    if (item.type === "group") return hasActivePath(item.children, activePath);
+    if (item.type === "section") return hasActivePath(item.items, activePath);
+    if (!item.type || item.type === "item") return item.path === activePath;
+    return false;
+  });
+}
+function SideNav({ items, activePath = "/", onNavigate = () => {
+}, logo }) {
+  const appShell = useAppShell();
+  const handleNavigate = (path) => {
+    onNavigate(path);
+    appShell?.closeNav();
+  };
+  return /* @__PURE__ */ jsxs26("nav", { "aria-label": "Main navigation", className: "flex h-full flex-col border-r border-border bg-surface-subtle", children: [
+    logo && /* @__PURE__ */ jsx49("div", { className: "flex h-16 shrink-0 items-center border-b border-border px-4", children: logo }),
+    /* @__PURE__ */ jsx49(NavList, { className: "flex-1 overflow-y-auto px-sm py-sm", children: items.map((item, index) => /* @__PURE__ */ jsx49(NavRenderer, { item, activePath, depth: 0, onNavigate: handleNavigate }, index)) })
+  ] });
+}
+
+// src/layouts/app-bar.tsx
+import { cva as cva12 } from "class-variance-authority";
+import { Menu as Menu2, Sun as Sun2, Moon as Moon2, MonitorSmartphone as MonitorSmartphone2 } from "lucide-react";
+import { jsx as jsx50, jsxs as jsxs27 } from "react/jsx-runtime";
+var appBarVariants = cva12(
+  "sticky top-0 z-30 flex h-16 items-center gap-2 border-b border-border px-4",
+  {
+    variants: {
+      variant: { glass: "backdrop-blur-md", solid: "" },
+      color: { surface: "", subtle: "", inset: "" }
+    },
+    compoundVariants: [
+      { variant: "glass", color: "surface", class: "bg-surface/80" },
+      { variant: "glass", color: "subtle", class: "bg-surface-subtle/80" },
+      { variant: "glass", color: "inset", class: "bg-surface-inset/80" },
+      { variant: "solid", color: "surface", class: "bg-surface" },
+      { variant: "solid", color: "subtle", class: "bg-surface-subtle" },
+      { variant: "solid", color: "inset", class: "bg-surface-inset" }
+    ],
+    defaultVariants: { variant: "glass", color: "surface" }
+  }
+);
+var modeIcon = {
+  light: /* @__PURE__ */ jsx50(Sun2, { className: "h-5 w-5" }),
+  dark: /* @__PURE__ */ jsx50(Moon2, { className: "h-5 w-5" }),
+  system: /* @__PURE__ */ jsx50(MonitorSmartphone2, { className: "h-5 w-5" })
+};
+var modeLabel = {
+  light: "Light \u2014 switch to dark",
+  dark: "Dark \u2014 switch to system",
+  system: "System \u2014 switch to light"
+};
+function ModeToggle() {
+  const { mode, cycleMode } = useTheme();
+  return /* @__PURE__ */ jsx50(TooltipProvider, { children: /* @__PURE__ */ jsxs27(Tooltip, { children: [
+    /* @__PURE__ */ jsx50(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx50(Button, { variant: "tertiary", size: "icon", onClick: cycleMode, "aria-label": modeLabel[mode], children: modeIcon[mode] }) }),
+    /* @__PURE__ */ jsx50(TooltipContent, { children: modeLabel[mode] })
+  ] }) });
+}
+function AppBar({
+  title,
+  logo,
+  actions,
+  onMenuClick,
+  variant,
+  color
+}) {
+  const appShell = useAppShell();
+  const handleMenu = onMenuClick ?? appShell?.toggleNav;
+  return /* @__PURE__ */ jsxs27("header", { className: cn(appBarVariants({ variant, color })), children: [
+    handleMenu && /* @__PURE__ */ jsx50(Button, { variant: "tertiary", size: "icon", onClick: handleMenu, "aria-label": "Toggle navigation", children: /* @__PURE__ */ jsx50(Menu2, { className: "h-5 w-5" }) }),
+    logo,
+    title && /* @__PURE__ */ jsx50("span", { className: "text-sm font-semibold text-secondary", children: title }),
+    /* @__PURE__ */ jsx50("div", { className: "ml-auto flex items-center gap-1", children: actions })
+  ] });
+}
+
+// src/index.ts
+export * from "@windforge/tokens";
+export {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+  Alert,
+  AppBar,
+  AppShell,
+  Autocomplete,
+  Avatar,
+  AvatarFallback,
+  AvatarImage,
+  Badge,
+  Box,
+  Breadcrumb,
+  Button,
+  ButtonGroup,
+  Calendar,
+  Card,
+  Chart,
+  Checkbox,
+  Chip,
+  CodeBlock,
+  Command,
+  CommandDialog,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+  CommandSeparator,
+  CommandShortcut,
+  DataTable,
+  DatePicker,
+  Dialog,
+  DropdownMenu,
+  DropdownMenuCheckboxItem,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuPortal,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
+  DropdownMenuTrigger,
+  ForgeIcon,
+  FormField,
+  Grid,
+  H1,
+  H2,
+  H3,
+  H4,
+  H5,
+  H6,
+  Input,
+  Label,
+  Link,
+  Modal,
+  ModalClose,
+  ModalContent,
+  ModalOverlay,
+  ModalPortal,
+  ModalTrigger,
+  ModeToggle,
+  MultiSelect,
+  Pagination,
+  Popover2 as Popover,
+  PopoverAnchor,
+  PopoverContent,
+  PopoverTrigger,
+  Progress,
+  RadioGroup,
+  RadioGroupItem,
+  SVGIcon,
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectLabel,
+  SelectTrigger,
+  SelectValue,
+  Separator,
+  Sheet,
+  SheetClose,
+  SheetContent,
+  SheetPortal,
+  SheetTrigger,
+  SideNav,
+  Skeleton,
+  Slider,
+  Stack,
+  Stepper,
+  Switch,
+  Table,
+  TableBody,
+  TableCaption,
+  TableCell,
+  TableFooter,
+  TableHead,
+  TableHeader,
+  TableRow,
+  Tabs,
+  TabsContent,
+  TabsList,
+  TabsTrigger,
+  Text,
+  Textarea,
+  ThemeProvider,
+  Toaster,
+  ToggleButton,
+  ToggleButtonGroup,
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+  WindforgeLogo,
+  badgeVariants,
+  buttonVariants,
+  catalog,
+  chip as chipVariants,
+  cn,
+  commonIconGroups,
+  commonIcons,
+  dismissButton,
+  dismissToast,
+  floatingPanel,
+  focusRing,
+  focusRingField,
+  focusRingInset,
+  layoutVocabulary,
+  link as linkVariants,
+  menuItem,
+  modalContent,
+  overlayBackdrop,
+  text as textVariants,
+  themeInitScript,
+  toast,
+  useAppShell,
+  useMediaQuery,
+  useTheme
+};