@nebutra/ui 0.1.0 → 0.2.0

package/dist/patterns/index.js

@@ -0,0 +1,3004 @@
+"use client";
+import * as React14 from 'react';
+import { useState, useRef, useCallback, useMemo, Fragment as Fragment$1 } from 'react';
+import { clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { ChevronRight, Check, Status, ChevronUpDown, Pencil, FileText, TextBold, TextItalic, Code, Hash, ListUnordered, Link, Image, ChevronUp, ChevronDown, Calendar, Eye, Bookmark, StarFill, Share, Flag, Pin, MoreHorizontal } from '@nebutra/icons';
+import { cva } from 'class-variance-authority';
+import { Menu } from '@base-ui/react/menu';
+import { Tabs as Tabs$1 } from '@base-ui/react/tabs';
+import { colors } from '@nebutra/brand';
+import { Tooltip as Tooltip$1 } from '@base-ui/react/tooltip';
+import ReactMarkdown from 'react-markdown';
+import remarkGfm from 'remark-gfm';
+import { Separator as Separator$1 } from '@base-ui/react/separator';
+import { Avatar as Avatar$1 } from '@base-ui/react/avatar';
+import { AnimatePresence, motion } from 'framer-motion';
+
+// src/patterns/Card/Card.tsx
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+var CardContext = React14.createContext(null);
+var paddingMap = {
+  none: "",
+  sm: "p-4",
+  md: "p-6",
+  lg: "p-8"
+};
+var variantStyles = {
+  default: "bg-card border border-border",
+  elevated: "bg-card border border-border shadow-lg",
+  bordered: "bg-transparent border-2 border-border",
+  ghost: "bg-transparent",
+  gradient: "bg-gradient-to-br from-card to-muted border border-border"
+};
+var CardRoot = React14.forwardRef(
+  ({ className, variant = "default", padding = "md", children, ...props }, ref) => {
+    return /* @__PURE__ */ jsx(CardContext.Provider, { value: { variant }, children: /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        className: cn(
+          "rounded-[var(--radius-xl)] transition-all duration-200",
+          variantStyles[variant],
+          paddingMap[padding],
+          className
+        ),
+        ...props,
+        children
+      }
+    ) });
+  }
+);
+CardRoot.displayName = "Card";
+var CardHeader = React14.forwardRef(
+  ({ className, spacing: gap = "md", children, ...props }, ref) => {
+    const gapMap = { sm: "gap-2", md: "gap-3", lg: "gap-4" };
+    return /* @__PURE__ */ jsx("div", { ref, className: cn("flex items-start", gapMap[gap], className), ...props, children });
+  }
+);
+CardHeader.displayName = "Card.Header";
+var CardBody = React14.forwardRef(
+  ({ className, children, ...props }, ref) => {
+    return /* @__PURE__ */ jsx("div", { ref, className: cn("mt-4", className), ...props, children });
+  }
+);
+CardBody.displayName = "Card.Body";
+var CardFooter = React14.forwardRef(
+  ({ className, children, ...props }, ref) => {
+    return /* @__PURE__ */ jsx("div", { ref, className: cn("mt-6 pt-4 border-t border-border/50", className), ...props, children });
+  }
+);
+CardFooter.displayName = "Card.Footer";
+var CardIcon = React14.forwardRef(
+  ({ className, size = "md", children, ...props }, ref) => {
+    const sizeMap = {
+      sm: "w-8 h-8",
+      md: "w-10 h-10",
+      lg: "w-12 h-12"
+    };
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        className: cn(
+          "flex items-center justify-center rounded-[var(--radius-lg)] bg-muted/50 shrink-0",
+          sizeMap[size],
+          className
+        ),
+        ...props,
+        children
+      }
+    );
+  }
+);
+CardIcon.displayName = "Card.Icon";
+var CardTitle = React14.forwardRef(
+  ({ className, as: Tag = "h3", children, ...props }, ref) => {
+    return /* @__PURE__ */ jsx(Tag, { ref, className: cn("text-lg font-semibold text-foreground", className), ...props, children });
+  }
+);
+CardTitle.displayName = "Card.Title";
+var CardDescription = React14.forwardRef(({ className, as: Tag = "p", children, ...props }, ref) => {
+  return React14.createElement(
+    Tag,
+    {
+      ref,
+      className: cn("text-sm text-muted-foreground leading-relaxed", className),
+      ...props
+    },
+    children
+  );
+});
+CardDescription.displayName = "Card.Description";
+var Card = Object.assign(CardRoot, {
+  Header: CardHeader,
+  Body: CardBody,
+  Footer: CardFooter,
+  Icon: CardIcon,
+  Title: CardTitle,
+  Description: CardDescription
+});
+var CommandBox = React14.forwardRef(
+  ({
+    className,
+    command,
+    prefix = "$",
+    showCopyButton = true,
+    variant = "default",
+    onCopy,
+    ...props
+  }, ref) => {
+    const [copied, setCopied] = React14.useState(false);
+    const handleCopy = React14.useCallback(async () => {
+      try {
+        await navigator.clipboard.writeText(command);
+        setCopied(true);
+        onCopy?.();
+        setTimeout(() => setCopied(false), 2e3);
+      } catch (_err) {
+      }
+    }, [command, onCopy]);
+    const variantStyles3 = {
+      default: "bg-[var(--neutral-2)] border border-[var(--neutral-7)] rounded-[var(--radius-lg)]",
+      minimal: "bg-[var(--neutral-1)] border border-[var(--neutral-7)] rounded-[var(--radius-md)]",
+      pill: "bg-[var(--neutral-2)] border border-[var(--neutral-7)] rounded-full"
+    };
+    return (
+      // biome-ignore lint/a11y/useSemanticElements: ARIA pattern
+      /* @__PURE__ */ jsxs(
+        "div",
+        {
+          ref,
+          className: cn(
+            "group relative flex items-center gap-3 px-4 py-2.5 font-mono text-sm cursor-pointer transition-all hover:bg-[var(--neutral-3)]",
+            variantStyles3[variant],
+            className
+          ),
+          onClick: handleCopy,
+          role: "button",
+          tabIndex: 0,
+          onKeyDown: (e) => {
+            if (e.key === "Enter" || e.key === " ") {
+              e.preventDefault();
+              handleCopy();
+            }
+          },
+          "aria-label": `Copy command: ${command}`,
+          ...props,
+          children: [
+            /* @__PURE__ */ jsx("span", { className: "text-emerald-400 shrink-0 select-none", children: prefix }),
+            /* @__PURE__ */ jsx("span", { className: "flex-1 text-[var(--neutral-11)] truncate", children: command }),
+            showCopyButton && /* @__PURE__ */ jsx(
+              "span",
+              {
+                className: cn(
+                  "shrink-0 text-xs transition-colors",
+                  copied ? "text-emerald-400" : "text-[var(--neutral-9)] group-hover:text-[var(--neutral-11)]"
+                ),
+                children: copied ? /* @__PURE__ */ jsx(CopiedIcon, { className: "w-4 h-4" }) : /* @__PURE__ */ jsx(CopyIcon, { className: "w-4 h-4" })
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              "span",
+              {
+                className: cn(
+                  "absolute -top-8 left-1/2 -translate-x-1/2 px-2 py-1 text-xs rounded bg-zinc-700 text-[var(--neutral-11)] opacity-0 transition-opacity pointer-events-none",
+                  "group-hover:opacity-100",
+                  copied && "opacity-100"
+                ),
+                children: copied ? "Copied!" : "Click to copy"
+              }
+            )
+          ]
+        }
+      )
+    );
+  }
+);
+CommandBox.displayName = "CommandBox";
+function CopyIcon({ className }) {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      "aria-hidden": "true",
+      className,
+      xmlns: "http://www.w3.org/2000/svg",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      children: [
+        /* @__PURE__ */ jsx("rect", { x: "9", y: "9", width: "13", height: "13", rx: "2", ry: "2" }),
+        /* @__PURE__ */ jsx("path", { d: "M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1" })
+      ]
+    }
+  );
+}
+function CopiedIcon({ className }) {
+  return /* @__PURE__ */ jsx(
+    "svg",
+    {
+      "aria-hidden": "true",
+      className,
+      xmlns: "http://www.w3.org/2000/svg",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      children: /* @__PURE__ */ jsx("polyline", { points: "20 6 9 17 4 12" })
+    }
+  );
+}
+var badgeVariants = cva(
+  "inline-flex justify-center items-center align-middle shrink-0 rounded-full font-sans font-medium whitespace-nowrap tabular-nums transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 border border-transparent",
+  {
+    variants: {
+      variant: {
+        // ─── Semantic / brand variants ────────────────────────────────────────
+        default: "border-transparent bg-primary text-primary-foreground hover:bg-primary/80",
+        secondary: "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        destructive: "border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80",
+        outline: "border-border text-foreground",
+        success: "border-transparent bg-success text-success-foreground hover:bg-success/80",
+        warning: "border-transparent bg-warning text-warning-foreground hover:bg-warning/80",
+        info: "border-transparent bg-info text-info-foreground hover:bg-info/80",
+        error: "border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80",
+        // ─── Geist-style color palette ────────────────────────────────────────
+        gray: "bg-geist-gray-700 text-white fill-white",
+        "gray-subtle": "bg-geist-gray-200 text-geist-gray-1000 fill-geist-gray-1000 border-transparent",
+        blue: "bg-blue-700 text-white fill-white",
+        "blue-subtle": "bg-blue-200 text-blue-900 fill-blue-900 border-transparent",
+        purple: "bg-purple-700 text-white fill-white",
+        "purple-subtle": "bg-purple-200 text-purple-900 fill-purple-900 border-transparent",
+        amber: "bg-amber-700 text-black fill-black",
+        "amber-subtle": "bg-amber-200 text-amber-900 fill-amber-900 border-transparent",
+        red: "bg-red-700 text-white fill-white",
+        "red-subtle": "bg-red-200 text-red-900 fill-red-900 border-transparent",
+        pink: "bg-pink-700 text-white fill-white",
+        "pink-subtle": "bg-pink-300 text-pink-900 fill-pink-900 border-transparent",
+        green: "bg-green-700 text-white fill-white",
+        "green-subtle": "bg-green-200 text-green-900 fill-green-900 border-transparent",
+        teal: "bg-teal-700 text-white fill-white",
+        "teal-subtle": "bg-teal-300 text-teal-900 fill-teal-900 border-transparent",
+        inverted: "bg-geist-gray-1000 text-geist-gray-100 fill-geist-gray-100",
+        trial: "bg-gradient-to-br from-trial-start to-trial-end text-white fill-white",
+        turbo: "bg-gradient-to-br from-turbo-start to-turbo-end text-white fill-white",
+        pill: "bg-background text-foreground fill-foreground !border-gray-alpha-400 hover:bg-muted/50 focus-visible:bg-muted/50 dark:!border-border",
+        // ─── Semantic tone variants (nav badges, ownership, featured) ─────────
+        beta: "border-transparent bg-muted text-muted-foreground",
+        new: "border-transparent bg-blue-100 text-blue-700 dark:bg-blue-950/50 dark:text-blue-300",
+        owner: "border-border bg-transparent text-foreground",
+        featured: "border-transparent text-white bg-[image:var(--brand-gradient)] [text-shadow:0_0_1px_rgba(0,0,0,0.2)]",
+        "coming-soon": "border-transparent bg-muted/60 text-muted-foreground italic"
+      },
+      size: {
+        sm: "text-[11px] h-5 px-1.5 tracking-[0.2px] gap-[3px] [&_svg]:h-[11px] [&_svg]:w-[11px]",
+        md: "text-[12px] h-6 px-2.5 tracking-normal gap-1 [&_svg]:h-[14px] [&_svg]:w-[14px]",
+        lg: "text-[14px] h-8 px-3 tracking-normal gap-1.5 [&_svg]:h-[16px] [&_svg]:w-[16px]"
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "md"
+    }
+  }
+);
+var dotColorMap = {
+  success: "bg-success-foreground",
+  warning: "bg-warning-foreground",
+  info: "bg-info-foreground",
+  error: "bg-destructive-foreground",
+  destructive: "bg-destructive-foreground",
+  "gray-subtle": "bg-geist-gray-500",
+  "green-subtle": "bg-green-500",
+  "amber-subtle": "bg-amber-500",
+  "red-subtle": "bg-red-500",
+  "blue-subtle": "bg-blue-500",
+  "purple-subtle": "bg-purple-500",
+  "pink-subtle": "bg-pink-500",
+  "teal-subtle": "bg-teal-500",
+  default: "bg-primary-foreground",
+  secondary: "bg-secondary-foreground",
+  outline: "bg-muted-foreground"
+};
+function Badge({
+  className,
+  variant = "default",
+  size = "md",
+  dot,
+  icon,
+  asChild,
+  children,
+  ...props
+}) {
+  const badgeClassName = cn(badgeVariants({ variant, size }), className);
+  const renderContent = (label) => /* @__PURE__ */ jsxs(Fragment, { children: [
+    dot && /* @__PURE__ */ jsx(
+      "span",
+      {
+        "aria-hidden": "true",
+        className: cn(
+          "h-1.5 w-1.5 shrink-0 rounded-full",
+          dotColorMap[variant ?? "default"] ?? "bg-current"
+        )
+      }
+    ),
+    icon && /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: "shrink-0 flex items-center justify-center", children: icon }),
+    label
+  ] });
+  if (asChild) {
+    const childArray = React14.Children.toArray(children);
+    const child = childArray.length === 1 ? childArray[0] : null;
+    if (React14.isValidElement(child)) {
+      const childProps = child.props;
+      return React14.cloneElement(child, {
+        ...props,
+        ...childProps,
+        "data-slot": "badge",
+        className: cn(badgeClassName, childProps.className),
+        style: { ...props.style, ...childProps.style },
+        children: renderContent(childProps.children)
+      });
+    }
+  }
+  return /* @__PURE__ */ jsx("span", { "data-slot": "badge", className: badgeClassName, ...props, children: renderContent(children) });
+}
+var DropdownMenu = Menu.Root;
+var DropdownMenuTrigger = React14.forwardRef(
+  ({ asChild, children, render, ...props }, ref) => {
+    const renderElement = asChild && React14.isValidElement(children) ? children : render;
+    return /* @__PURE__ */ jsx(
+      Menu.Trigger,
+      {
+        ref,
+        render: renderElement,
+        ...renderElement ? props : { ...props, children }
+      }
+    );
+  }
+);
+DropdownMenuTrigger.displayName = "DropdownMenuTrigger";
+Menu.Group;
+Menu.Portal;
+Menu.SubmenuRoot;
+Menu.RadioGroup;
+var DropdownMenuSubTrigger = React14.forwardRef(({ className, inset, children, ...props }, ref) => /* @__PURE__ */ jsxs(
+  Menu.SubmenuTrigger,
+  {
+    ref,
+    className: cn(
+      "flex cursor-default select-none items-center rounded-[var(--radius-md)] px-2 py-1.5 text-sm outline-none focus:bg-accent data-[popup-open]:bg-accent",
+      inset && "pl-8",
+      className
+    ),
+    ...props,
+    children: [
+      children,
+      /* @__PURE__ */ jsx(ChevronRight, { className: "ml-auto size-4" })
+    ]
+  }
+));
+DropdownMenuSubTrigger.displayName = "DropdownMenuSubTrigger";
+var DropdownMenuSubContent = React14.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(Menu.Portal, { children: /* @__PURE__ */ jsx(Menu.Positioner, { children: /* @__PURE__ */ jsx(
+  Menu.Popup,
+  {
+    ref,
+    className: cn(
+      "z-50 min-w-32 overflow-hidden rounded-xl border bg-background/90 backdrop-blur-md p-1 text-popover-foreground shadow-xl transition-[opacity,transform,display] duration-flow ease-out data-[starting-style]:zoom-out-95 data-[ending-style]:zoom-out-95 data-[starting-style]:fade-out-0 data-[ending-style]:fade-out-0",
+      className
+    ),
+    ...props
+  }
+) }) }));
+DropdownMenuSubContent.displayName = "DropdownMenuSubContent";
+var DropdownMenuContent = React14.forwardRef(
+  ({ className, sideOffset = 4, align = "center", alignOffset = 0, side = "bottom", ...props }, ref) => /* @__PURE__ */ jsx(Menu.Portal, { children: /* @__PURE__ */ jsx(
+    Menu.Positioner,
+    {
+      sideOffset,
+      align,
+      alignOffset,
+      side,
+      children: /* @__PURE__ */ jsx(
+        Menu.Popup,
+        {
+          ref,
+          className: cn(
+            "z-50 min-w-32 overflow-hidden rounded-xl border bg-background/90 backdrop-blur-md p-1 text-popover-foreground shadow-xl transition-[opacity,transform,display] duration-flow ease-out outline-none data-[starting-style]:zoom-out-95 data-[ending-style]:zoom-out-95 data-[starting-style]:fade-out-0 data-[ending-style]:fade-out-0",
+            className
+          ),
+          ...props
+        }
+      )
+    }
+  ) })
+);
+DropdownMenuContent.displayName = "DropdownMenuContent";
+var DropdownMenuItem = React14.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ jsx(
+  Menu.Item,
+  {
+    ref,
+    className: cn(
+      "relative flex cursor-default select-none items-center rounded-[var(--radius-md)] px-2 py-1.5 text-sm outline-none transition-colors data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      inset && "pl-8",
+      className
+    ),
+    ...props
+  }
+));
+DropdownMenuItem.displayName = "DropdownMenuItem";
+var DropdownMenuCheckboxItem = React14.forwardRef(({ className, children, checked, ...props }, ref) => /* @__PURE__ */ jsxs(
+  Menu.CheckboxItem,
+  {
+    ref,
+    className: cn(
+      "relative flex cursor-default select-none items-center rounded-[var(--radius-md)] py-1.5 pl-8 pr-2 text-sm outline-none transition-colors data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      className
+    ),
+    ...checked !== void 0 && { checked },
+    ...props,
+    children: [
+      /* @__PURE__ */ jsx("span", { className: "absolute left-2 flex size-3.5 items-center justify-center", children: /* @__PURE__ */ jsx(Menu.CheckboxItemIndicator, { children: /* @__PURE__ */ jsx(Check, { className: "size-4" }) }) }),
+      children
+    ]
+  }
+));
+DropdownMenuCheckboxItem.displayName = "DropdownMenuCheckboxItem";
+var DropdownMenuRadioItem = React14.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(
+  Menu.RadioItem,
+  {
+    ref,
+    className: cn(
+      "relative flex cursor-default select-none items-center rounded-[var(--radius-md)] py-1.5 pl-8 pr-2 text-sm outline-none transition-colors data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      className
+    ),
+    ...props,
+    children: [
+      /* @__PURE__ */ jsx("span", { className: "absolute left-2 flex size-3.5 items-center justify-center", children: /* @__PURE__ */ jsx(Menu.RadioItemIndicator, { children: /* @__PURE__ */ jsx(Status, { className: "size-2 fill-current" }) }) }),
+      children
+    ]
+  }
+));
+DropdownMenuRadioItem.displayName = "DropdownMenuRadioItem";
+var DropdownMenuLabel = React14.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ jsx(
+  Menu.GroupLabel,
+  {
+    ref,
+    className: cn("px-2 py-1.5 text-sm font-semibold", inset && "pl-8", className),
+    ...props
+  }
+));
+DropdownMenuLabel.displayName = "DropdownMenuLabel";
+var DropdownMenuSeparator = React14.forwardRef(({ className, orientation = "horizontal", ...props }, ref) => /* @__PURE__ */ jsx(
+  Menu.Separator,
+  {
+    ref,
+    orientation,
+    className: cn("-mx-1 my-1 h-px bg-muted", className),
+    ...props
+  }
+));
+DropdownMenuSeparator.displayName = "DropdownMenuSeparator";
+var iconToneStyles = {
+  neutral: "bg-muted text-muted-foreground",
+  blue: "bg-blue-50 text-blue-700 dark:bg-blue-950/40 dark:text-blue-300",
+  cyan: "bg-cyan-50 text-cyan-700 dark:bg-cyan-950/40 dark:text-cyan-300",
+  purple: "bg-purple-50 text-purple-700 dark:bg-purple-950/40 dark:text-purple-300",
+  amber: "bg-amber-50 text-amber-700 dark:bg-amber-950/40 dark:text-amber-300",
+  green: "bg-green-50 text-green-700 dark:bg-green-950/40 dark:text-green-300",
+  pink: "bg-pink-50 text-pink-700 dark:bg-pink-950/40 dark:text-pink-300"
+};
+var badgeToneToVariant = {
+  beta: "beta",
+  new: "new",
+  owner: "owner",
+  featured: "featured",
+  "coming-soon": "coming-soon"
+};
+var cardClassName = cn(
+  "group relative block rounded-xl border border-border bg-card text-card-foreground p-5 text-left",
+  "transition-all duration-150",
+  "hover:border-neutral-7 hover:shadow-sm hover:-translate-y-px",
+  "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
+);
+function GalleryCardActionsMenu({ actions, title }) {
+  const stop = React14.useCallback((event) => {
+    event.stopPropagation();
+  }, []);
+  return /* @__PURE__ */ jsx("div", { onClickCapture: stop, onPointerDownCapture: stop, children: /* @__PURE__ */ jsxs(DropdownMenu, { children: [
+    /* @__PURE__ */ jsx(
+      DropdownMenuTrigger,
+      {
+        render: /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            "aria-label": `Actions for ${title}`,
+            className: cn(
+              "inline-flex h-7 w-7 items-center justify-center rounded-md",
+              "text-muted-foreground transition-colors",
+              "hover:bg-accent hover:text-accent-foreground",
+              "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1"
+            ),
+            children: /* @__PURE__ */ jsx(MoreHorizontal, { className: "h-4 w-4" })
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ jsx(DropdownMenuContent, { align: "end", sideOffset: 6, children: actions.map((action) => /* @__PURE__ */ jsx(
+      DropdownMenuItem,
+      {
+        onClick: (event) => {
+          event.stopPropagation();
+          action.onSelect();
+        },
+        className: cn(
+          action.destructive && "text-destructive data-[highlighted]:bg-destructive/10 data-[highlighted]:text-destructive"
+        ),
+        children: action.label
+      },
+      action.id
+    )) })
+  ] }) });
+}
+function GalleryCardBody({
+  title,
+  description,
+  icon,
+  iconTone,
+  badge,
+  pinned,
+  metadata,
+  actions
+}) {
+  const hasActions = Boolean(actions && actions.length > 0);
+  const hasMetadataStrip = Boolean(metadata?.author || metadata?.metric || metadata?.trailing);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs("div", { className: "mb-3 flex items-start justify-between gap-2", children: [
+      icon ? /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: cn(
+            "flex h-10 w-10 shrink-0 items-center justify-center rounded-lg text-base",
+            iconToneStyles[iconTone]
+          ),
+          "aria-hidden": "true",
+          children: icon
+        }
+      ) : /* @__PURE__ */ jsx("span", { className: "h-10 w-10 shrink-0", "aria-hidden": "true" }),
+      (pinned || hasActions) && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
+        pinned && /* @__PURE__ */ jsx(Pin, { className: "h-3.5 w-3.5 fill-amber-400 text-amber-500", "aria-label": "Pinned" }),
+        hasActions && actions ? /* @__PURE__ */ jsx(GalleryCardActionsMenu, { actions, title }) : null
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "mb-1.5 flex items-center gap-2", children: [
+      /* @__PURE__ */ jsx("h3", { className: "line-clamp-1 text-[15px] font-semibold leading-tight", children: title }),
+      badge && /* @__PURE__ */ jsx(Badge, { variant: badgeToneToVariant[badge.tone], size: "sm", children: badge.label })
+    ] }),
+    /* @__PURE__ */ jsx("p", { className: "mb-4 line-clamp-2 min-h-[2.5rem] text-sm text-muted-foreground", children: description ?? "\xA0" }),
+    hasMetadataStrip && /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-2 border-t border-border pt-3 text-xs text-muted-foreground", children: [
+      /* @__PURE__ */ jsx("span", { className: "truncate", children: metadata?.author ?? "" }),
+      /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-2", children: [
+        metadata?.metric && /* @__PURE__ */ jsx("span", { className: "tabular-nums", children: metadata.metric }),
+        metadata?.trailing
+      ] })
+    ] })
+  ] });
+}
+function GalleryCard(props) {
+  const {
+    title,
+    description,
+    icon,
+    iconTone = "neutral",
+    badge,
+    pinned,
+    metadata,
+    actions,
+    onClick,
+    href,
+    renderLink,
+    className
+  } = props;
+  const body = /* @__PURE__ */ jsx(
+    GalleryCardBody,
+    {
+      title,
+      description,
+      icon,
+      iconTone,
+      badge,
+      pinned,
+      metadata,
+      actions
+    }
+  );
+  const composedClassName = cn(cardClassName, "cursor-pointer", className);
+  if (href) {
+    if (renderLink) {
+      return renderLink({
+        href,
+        className: composedClassName,
+        "aria-label": title,
+        children: body
+      });
+    }
+    return /* @__PURE__ */ jsx("a", { href, "aria-label": title, className: composedClassName, onClick, children: body });
+  }
+  if (onClick) {
+    return /* @__PURE__ */ jsx("button", { type: "button", "aria-label": title, className: composedClassName, onClick, children: body });
+  }
+  return /* @__PURE__ */ jsx("div", { className: cn(cardClassName, "cursor-default", className), children: body });
+}
+GalleryCard.displayName = "GalleryCard";
+var Slot = React14.forwardRef(
+  ({ children, className, style, ...props }, ref) => {
+    const childArray = React14.Children.toArray(children);
+    const child = childArray.length === 1 ? childArray[0] : null;
+    if (child == null || !React14.isValidElement(child)) {
+      return /* @__PURE__ */ jsx("span", { ref, className, style, ...props, children });
+    }
+    const childProps = child.props;
+    const mergedRef = (node) => {
+      if (typeof ref === "function") ref(node);
+      else if (ref) ref.current = node;
+      const childRef = child.ref;
+      if (typeof childRef === "function") childRef(node);
+      else if (childRef && "current" in childRef) {
+        childRef.current = node;
+      }
+    };
+    const mergedClass = [className, childProps.className].filter(Boolean).join(" ");
+    const merged = {
+      ...childProps,
+      ...props,
+      ref: mergedRef,
+      className: mergedClass,
+      style: { ...childProps.style, ...style }
+    };
+    return React14.cloneElement(
+      child,
+      merged
+    );
+  }
+);
+Slot.displayName = "Slot";
+var buttonVariants = cva(
+  [
+    "inline-flex items-center justify-center gap-2 whitespace-nowrap",
+    "rounded-[var(--radius-md)] text-sm font-medium",
+    "transition-colors duration-150 ease-out",
+    "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+    "disabled:pointer-events-none disabled:opacity-50",
+    "aria-busy:cursor-wait"
+  ].join(" "),
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground hover:bg-primary/90",
+        ink: "bg-[var(--neutral-12)] text-[var(--neutral-1)] ring-1 ring-inset ring-white/[0.04] hover:bg-[var(--neutral-11)] hover:-translate-y-px active:translate-y-0 transition-[transform,background-color] duration-150",
+        destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90",
+        outline: "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
+        secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        ghost: "hover:bg-accent hover:text-accent-foreground",
+        link: "text-primary underline-offset-4 hover:underline",
+        tertiary: "border border-transparent bg-transparent text-muted-foreground hover:bg-accent hover:text-accent-foreground hover:border-input",
+        warning: "bg-warning text-warning-foreground hover:bg-warning/90"
+      },
+      size: {
+        tiny: "h-6 rounded-[var(--radius-sm)] px-2 text-[11px]",
+        // 24px
+        sm: "h-8 rounded-[var(--radius-sm)] px-3 text-xs",
+        // 32px
+        default: "h-10 px-4 py-2",
+        // 40px
+        lg: "h-12 rounded-[var(--radius-lg)] px-5 text-base",
+        // 48px
+        icon: "h-10 w-10"
+        // 40×40px (kept for backward compat)
+      },
+      shape: {
+        default: "",
+        square: "",
+        circle: ""
+      }
+    },
+    compoundVariants: [
+      // shape="square" — width = height, no horizontal padding
+      { shape: "square", size: "tiny", className: "w-6 px-0" },
+      { shape: "square", size: "sm", className: "w-8 px-0" },
+      { shape: "square", size: "default", className: "w-10 px-0" },
+      { shape: "square", size: "lg", className: "w-12 px-0" },
+      // shape="circle" — width = height + rounded-full
+      { shape: "circle", size: "tiny", className: "w-6 px-0 rounded-full" },
+      { shape: "circle", size: "sm", className: "w-8 px-0 rounded-full" },
+      { shape: "circle", size: "default", className: "w-10 px-0 rounded-full" },
+      { shape: "circle", size: "lg", className: "w-12 px-0 rounded-full" }
+    ],
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+      shape: "default"
+    }
+  }
+);
+function Spinner({ className }) {
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      "aria-hidden": "true",
+      className: cn(
+        "block rounded-full border-2 border-current border-t-transparent animate-[spinner_0.6s_linear_infinite]",
+        className
+      )
+    }
+  );
+}
+function getIconSizeClass(size) {
+  switch (size) {
+    case "tiny":
+      return "[&>svg]:size-3";
+    // 12px
+    case "sm":
+      return "[&>svg]:size-3.5";
+    // 14px
+    case "lg":
+      return "[&>svg]:size-4.5";
+    // 18px
+    default:
+      return "[&>svg]:size-4";
+  }
+}
+function getSpinnerSizeClass(size) {
+  switch (size) {
+    case "tiny":
+      return "size-3";
+    // 12px
+    case "sm":
+      return "size-3.5";
+    // 14px
+    case "lg":
+      return "size-4.5";
+    // 18px
+    default:
+      return "size-4";
+  }
+}
+var SHADOW_CLASSES = {
+  sm: "shadow-sm",
+  md: "shadow-md",
+  lg: "shadow-lg"
+};
+function resolveShadowClass(shadow) {
+  if (!shadow) return void 0;
+  const level = shadow === true ? "md" : shadow;
+  return SHADOW_CLASSES[level];
+}
+function ButtonContent({ loading, prefix, suffix, size, children }) {
+  const iconSizeClass = getIconSizeClass(size);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    loading && /* @__PURE__ */ jsx(Spinner, { className: getSpinnerSizeClass(size) }),
+    prefix != null && /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: cn("shrink-0", iconSizeClass), children: prefix }),
+    children,
+    suffix != null && /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: cn("shrink-0", iconSizeClass), children: suffix })
+  ] });
+}
+var Button = React14.forwardRef(
+  ({
+    className,
+    variant,
+    size,
+    shape,
+    asChild = false,
+    loading = false,
+    disabled,
+    prefix,
+    suffix,
+    shadow,
+    children,
+    ...props
+  }, ref) => {
+    const Comp = asChild ? Slot : "button";
+    const isDisabled = disabled ?? loading;
+    const shadowClass = resolveShadowClass(shadow);
+    return /* @__PURE__ */ jsx(
+      Comp,
+      {
+        ref,
+        className: cn(buttonVariants({ variant, size, shape }), shadowClass, className),
+        disabled: isDisabled,
+        "aria-busy": loading || void 0,
+        ...props,
+        children: asChild ? children : /* @__PURE__ */ jsx(ButtonContent, { loading, prefix, suffix, size, children })
+      }
+    );
+  }
+);
+Button.displayName = "Button";
+var ButtonLink = React14.forwardRef(
+  ({
+    className,
+    variant,
+    size,
+    shape,
+    prefix,
+    suffix,
+    shadow,
+    loading = false,
+    children,
+    ...props
+  }, ref) => {
+    const shadowClass = resolveShadowClass(shadow);
+    const loadingProps = loading ? {
+      "aria-busy": "true",
+      "aria-disabled": "true",
+      tabIndex: -1
+    } : {};
+    return /* @__PURE__ */ jsx(
+      "a",
+      {
+        ref,
+        className: cn(
+          buttonVariants({ variant, size, shape }),
+          shadowClass,
+          loading && "pointer-events-none opacity-50",
+          className
+        ),
+        ...loadingProps,
+        ...props,
+        children: /* @__PURE__ */ jsx(ButtonContent, { loading, prefix, suffix, size, children })
+      }
+    );
+  }
+);
+ButtonLink.displayName = "ButtonLink";
+({
+  // Nebutra Blue (云毓蓝) — technology & trust — VI: #0033FE
+  blue50: colors.primary[50],
+  blue100: colors.primary[100],
+  blue200: colors.primary[200],
+  blue300: colors.primary[300],
+  blue400: colors.primary[400],
+  blue500: colors.primary[500],
+  // brand primary
+  blue600: colors.primary[600],
+  blue700: colors.primary[700],
+  blue800: colors.primary[800],
+  blue900: colors.primary[900],
+  blue950: colors.primary[950],
+  // Nebutra Cyan (云毓青) — data flow & intelligence — VI: #0BF1C3
+  cyan50: colors.accent[50],
+  cyan100: colors.accent[100],
+  cyan200: colors.accent[200],
+  cyan300: colors.accent[300],
+  cyan400: colors.accent[400],
+  cyan500: colors.accent[500],
+  // brand secondary
+  cyan600: colors.accent[600],
+  cyan700: colors.accent[700],
+  cyan800: colors.accent[800],
+  cyan900: colors.accent[900],
+  cyan950: colors.accent[950],
+  // Neutral (blue-undertone gray scale)
+  neutral50: colors.neutral[50],
+  neutral100: colors.neutral[100],
+  neutral200: colors.neutral[200],
+  neutral300: colors.neutral[300],
+  neutral400: colors.neutral[400],
+  neutral500: colors.neutral[500],
+  neutral600: colors.neutral[600],
+  neutral700: colors.neutral[700],
+  neutral800: colors.neutral[800],
+  neutral900: colors.neutral[900],
+  neutral950: colors.neutral[950],
+  white: colors.white,
+  black: colors.black
+});
+({
+  /** Hero sections, primary CTA buttons, logo fills — VI signature gradient */
+  primary: colors.gradient.primary,
+  /** Hover states, secondary gradient elements */
+  reverse: colors.gradient.primaryReverse,
+  /** Vertical layout dividers, page section separators */
+  vertical: colors.gradient.primaryVertical,
+  /** Background halos, focus glow effects, radial emphasis */
+  radial: colors.gradient.primaryRadial});
+var primitiveSpacing = {
+  1: 4,
+  2: 8,
+  3: 12,
+  4: 16,
+  5: 20,
+  20: 80,
+  24: 96
+};
+var primitiveSizing = {
+  /** Geist button-specific size (24px). Larger than xs by design. */
+  tiny: 24,
+  sm: 32,
+  md: 40,
+  lg: 48};
+var primitiveRadius = {
+  md: 6,
+  // Geist default — slightly more rounded than 4px
+  lg: 8,
+  full: 9999
+};
+var primitiveFontSize = {
+  xs: 12,
+  sm: 14,
+  base: 16,
+  lg: 18};
+var primitiveTransition = {
+  duration: {
+    // hover, focus, small state changes
+    flow: 200},
+  easing: {
+    inOut: "cubic-bezier(0.4, 0, 0.2, 1)"
+  }
+};
+var primitiveFocusRing = {
+  width: 2,
+  // px
+  offset: 2
+  // px — gap between element and ring
+};
+
+// src/tokens/components/tabs.ts
+var tabsSizes = {
+  xs: {
+    height: primitiveSizing.tiny,
+    padding: primitiveSpacing[1],
+    paddingX: primitiveSpacing[2],
+    gap: primitiveSpacing[1],
+    triggerGap: primitiveSpacing[1],
+    iconSize: primitiveFontSize.sm,
+    fontSize: primitiveFontSize.xs,
+    minWidth: 56
+  },
+  sm: {
+    height: primitiveSizing.sm,
+    padding: primitiveSpacing[1],
+    paddingX: primitiveSpacing[3],
+    gap: primitiveSpacing[1],
+    triggerGap: primitiveSpacing[1] + primitiveSpacing[1] / 2,
+    iconSize: primitiveFontSize.sm,
+    fontSize: primitiveFontSize.xs,
+    minWidth: 64
+  },
+  md: {
+    height: primitiveSizing.md,
+    padding: primitiveSpacing[1],
+    paddingX: primitiveSpacing[3],
+    gap: primitiveSpacing[2],
+    triggerGap: primitiveSpacing[1] + primitiveSpacing[1] / 2,
+    iconSize: primitiveFontSize.base,
+    fontSize: primitiveFontSize.sm,
+    minWidth: 72
+  },
+  lg: {
+    height: primitiveSizing.lg,
+    padding: primitiveSpacing[1],
+    paddingX: primitiveSpacing[4],
+    gap: primitiveSpacing[2] + primitiveSpacing[1] / 2,
+    triggerGap: primitiveSpacing[2],
+    iconSize: primitiveFontSize.lg,
+    fontSize: primitiveFontSize.sm,
+    minWidth: 88
+  }
+};
+var tabsTokens = {
+  radius: primitiveRadius.lg,
+  triggerRadius: primitiveRadius.md,
+  pillRadius: primitiveRadius.full,
+  lineThickness: 2,
+  panelGap: primitiveSpacing[3],
+  badgeHeight: primitiveSpacing[5],
+  badgePaddingX: primitiveSpacing[1] + primitiveSpacing[1] / 2,
+  badgeFontSize: primitiveFontSize.xs,
+  focusRingWidth: primitiveFocusRing.width,
+  focusRingOffset: primitiveFocusRing.offset,
+  motion: {
+    duration: primitiveTransition.duration.flow,
+    easing: primitiveTransition.easing.inOut
+  }
+};
+
+// src/utils/primitive-props.ts
+function withHtmlProps(Component) {
+  return Component;
+}
+var DEFAULT_TOOLTIP_DELAY_MS = 150;
+var TooltipProvider = ({
+  children,
+  delayDuration = DEFAULT_TOOLTIP_DELAY_MS
+}) => {
+  return /* @__PURE__ */ jsx(Tooltip$1.Provider, { delay: delayDuration, children });
+};
+var Tooltip = ({
+  delayDuration,
+  children,
+  ...props
+}) => {
+  const delay = delayDuration ?? DEFAULT_TOOLTIP_DELAY_MS;
+  return /* @__PURE__ */ jsx(Tooltip$1.Provider, { delay, children: /* @__PURE__ */ jsx(Tooltip$1.Root, { ...props, children }) });
+};
+var TooltipTrigger = React14.forwardRef(({ asChild, children, ...props }, ref) => {
+  if (asChild && React14.isValidElement(children)) {
+    return /* @__PURE__ */ jsx(
+      Tooltip$1.Trigger,
+      {
+        ref,
+        ...props,
+        render: children
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(Tooltip$1.Trigger, { ref, ...props, children });
+});
+TooltipTrigger.displayName = "TooltipTrigger";
+var TooltipContent = React14.forwardRef(
+  ({ className, side = "top", align = "center", sideOffset = 4, alignOffset = 0, ...props }, ref) => /* @__PURE__ */ jsx(Tooltip$1.Portal, { children: /* @__PURE__ */ jsx(
+    Tooltip$1.Positioner,
+    {
+      side,
+      align,
+      sideOffset,
+      alignOffset,
+      className: "z-50",
+      children: /* @__PURE__ */ jsx(
+        Tooltip$1.Popup,
+        {
+          ref,
+          className: cn(
+            "z-50 overflow-hidden rounded-xl border bg-background/90 backdrop-blur-md px-3 py-1.5 text-sm text-popover-foreground shadow-xl transition-[opacity,transform,display] duration-200 data-starting-style:animate-in data-starting-style:fade-in-0 data-starting-style:zoom-in-95 data-ending-style:animate-out data-ending-style:fade-out-0 data-ending-style:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+            className
+          ),
+          ...props
+        }
+      )
+    }
+  ) })
+);
+TooltipContent.displayName = "TooltipContent";
+var BaseRoot = withHtmlProps(Tabs$1.Root);
+var BaseList = withHtmlProps(Tabs$1.List);
+var BaseTrigger = withHtmlProps(Tabs$1.Tab);
+var BaseContent = withHtmlProps(Tabs$1.Panel);
+var BaseIndicator = withHtmlProps(Tabs$1.Indicator);
+var tabsListVariants = cva(
+  "relative z-0 inline-flex max-w-full shrink-0 items-center overflow-x-auto overscroll-x-contain scrollbar-none",
+  {
+    variants: {
+      variant: {
+        default: "gap-[var(--tabs-gap)] rounded-[var(--tabs-radius)] border border-border bg-muted p-[var(--tabs-padding)] text-muted-foreground",
+        button: "gap-[var(--tabs-gap)] text-muted-foreground",
+        line: "gap-[calc(var(--tabs-gap)*3)] border-b border-border text-muted-foreground",
+        secondary: "gap-[var(--tabs-gap)] rounded-[var(--tabs-radius)] bg-transparent text-muted-foreground"
+      },
+      shape: {
+        default: "",
+        pill: "[&_[role=tab]]:rounded-[var(--tabs-pill-radius)]"
+      }
+    },
+    compoundVariants: [
+      {
+        variant: "default",
+        shape: "pill",
+        className: "rounded-[var(--tabs-pill-radius)]"
+      },
+      {
+        variant: "button",
+        shape: "pill",
+        className: "[&_[role=tab]]:rounded-[var(--tabs-pill-radius)]"
+      },
+      {
+        variant: "secondary",
+        shape: "pill",
+        className: "rounded-[var(--tabs-pill-radius)]"
+      }
+    ],
+    defaultVariants: {
+      shape: "default",
+      variant: "default"
+    }
+  }
+);
+var tabsTriggerVariants = cva(
+  "relative inline-flex h-[calc(var(--tabs-height)-var(--tabs-padding)*2)] min-w-[var(--tabs-trigger-min-width)] shrink-0 cursor-pointer items-center justify-center gap-[var(--tabs-trigger-gap)] whitespace-nowrap rounded-[var(--tabs-trigger-radius)] px-[var(--tabs-trigger-padding-x)] font-medium text-[length:var(--tabs-font-size)] outline-none transition-[background-color,border-color,box-shadow,color,opacity] duration-[var(--tabs-duration)] ease-[var(--tabs-easing)] focus-visible:ring-[length:var(--tabs-focus-ring-width)] focus-visible:ring-ring focus-visible:ring-offset-[length:var(--tabs-focus-ring-offset)] focus-visible:ring-offset-background disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 data-[disabled]:pointer-events-none data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50 [&_svg]:size-[var(--tabs-icon-size)] [&_svg]:shrink-0",
+  {
+    variants: {
+      variant: {
+        default: "hover:text-foreground data-[active]:text-foreground",
+        button: "border border-border bg-background text-muted-foreground shadow-[var(--shadow-xs)] hover:border-ring/40 hover:text-foreground data-[active]:border-ring/40 data-[active]:text-foreground",
+        line: "min-w-0 rounded-none px-0 hover:text-foreground data-[active]:text-foreground",
+        secondary: "hover:bg-muted hover:text-foreground data-[active]:bg-muted data-[active]:text-foreground"
+      }
+    },
+    defaultVariants: {
+      variant: "default"
+    }
+  }
+);
+var tabsIndicatorVariants = cva(
+  "pointer-events-none absolute transition-[left,top,width,height,bottom,background-color] duration-[var(--tabs-duration)] ease-[var(--tabs-easing)] motion-reduce:transition-none",
+  {
+    variants: {
+      variant: {
+        default: "z-[-1] rounded-[var(--tabs-trigger-radius)] bg-background shadow-[var(--shadow-xs)]",
+        button: "z-[-1] rounded-[var(--tabs-trigger-radius)] bg-muted",
+        line: "bottom-0 h-[var(--tabs-line-thickness)] rounded-[var(--tabs-pill-radius)] bg-foreground",
+        secondary: "z-[-1] rounded-[var(--tabs-trigger-radius)] bg-muted"
+      },
+      shape: {
+        default: "",
+        pill: "rounded-[var(--tabs-pill-radius)]"
+      }
+    },
+    defaultVariants: {
+      shape: "default",
+      variant: "default"
+    }
+  }
+);
+var tabsContentVariants = cva(
+  "mt-[var(--tabs-panel-gap)] text-[length:var(--tabs-font-size)] text-muted-foreground focus-visible:outline-none focus-visible:ring-[length:var(--tabs-focus-ring-width)] focus-visible:ring-ring focus-visible:ring-offset-[length:var(--tabs-focus-ring-offset)] focus-visible:ring-offset-background",
+  {
+    variants: {
+      variant: {
+        default: ""
+      }
+    },
+    defaultVariants: {
+      variant: "default"
+    }
+  }
+);
+var TabsContext = React14.createContext({
+  activationMode: "manual",
+  disabled: false,
+  shape: "default",
+  size: "md",
+  variant: "default"
+});
+function getTabsStyle(size, style) {
+  const token = tabsSizes[size];
+  return {
+    "--tabs-height": `${token.height}px`,
+    "--tabs-padding": `${token.padding}px`,
+    "--tabs-gap": `${token.gap}px`,
+    "--tabs-trigger-gap": `${token.triggerGap}px`,
+    "--tabs-trigger-padding-x": `${token.paddingX}px`,
+    "--tabs-trigger-min-width": `${token.minWidth}px`,
+    "--tabs-icon-size": `${token.iconSize}px`,
+    "--tabs-font-size": `${token.fontSize}px`,
+    "--tabs-radius": `${tabsTokens.radius}px`,
+    "--tabs-trigger-radius": `${tabsTokens.triggerRadius}px`,
+    "--tabs-pill-radius": `${tabsTokens.pillRadius}px`,
+    "--tabs-line-thickness": `${tabsTokens.lineThickness}px`,
+    "--tabs-focus-ring-width": `${tabsTokens.focusRingWidth}px`,
+    "--tabs-focus-ring-offset": `${tabsTokens.focusRingOffset}px`,
+    "--tabs-panel-gap": `${tabsTokens.panelGap}px`,
+    "--tabs-badge-height": `${tabsTokens.badgeHeight}px`,
+    "--tabs-badge-padding-x": `${tabsTokens.badgePaddingX}px`,
+    "--tabs-badge-font-size": `${tabsTokens.badgeFontSize}px`,
+    "--tabs-duration": `${tabsTokens.motion.duration}ms`,
+    "--tabs-easing": tabsTokens.motion.easing,
+    ...style
+  };
+}
+function getFirstEnabledValue(tabs) {
+  return tabs?.find((tab) => !tab.disabled)?.value;
+}
+function Tabs({
+  "aria-label": ariaLabel,
+  activationMode = "manual",
+  className,
+  defaultValue,
+  disabled = false,
+  listClassName,
+  onValueChange,
+  orientation = "horizontal",
+  selected,
+  setSelected,
+  shape = "default",
+  size = "md",
+  style,
+  tabs,
+  value,
+  variant = "default",
+  children,
+  ...props
+}) {
+  const rootValue = selected ?? value;
+  const rootDefaultValue = defaultValue ?? getFirstEnabledValue(tabs);
+  const context = React14.useMemo(
+    () => ({ activationMode, disabled, shape, size, variant }),
+    [activationMode, disabled, shape, size, variant]
+  );
+  function handleValueChange(nextValue) {
+    onValueChange?.(nextValue);
+    setSelected?.(nextValue);
+  }
+  return /* @__PURE__ */ jsx(TabsContext.Provider, { value: context, children: /* @__PURE__ */ jsx(
+    BaseRoot,
+    {
+      "data-slot": "tabs",
+      "data-disabled": disabled ? "" : void 0,
+      value: rootValue,
+      defaultValue: rootValue === void 0 ? rootDefaultValue : void 0,
+      onValueChange: handleValueChange,
+      orientation,
+      className: cn("w-full", className),
+      style: getTabsStyle(size, style),
+      ...props,
+      children: tabs ? /* @__PURE__ */ jsx(
+        TabsCollection,
+        {
+          tabs,
+          ariaLabel,
+          className: listClassName,
+          variant,
+          shape,
+          disabled
+        }
+      ) : children
+    }
+  ) });
+}
+function TabsCollection({
+  ariaLabel,
+  tabs,
+  className,
+  variant,
+  shape,
+  disabled
+}) {
+  const hasTooltip = tabs.some((tab) => tab.tooltip);
+  const list = /* @__PURE__ */ jsx(
+    TabsList,
+    {
+      "aria-label": ariaLabel ?? "Sections",
+      className,
+      variant,
+      shape,
+      children: tabs.map((tab) => /* @__PURE__ */ jsx(TabsCollectionTrigger, { disabled, tab }, tab.value))
+    }
+  );
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    hasTooltip ? /* @__PURE__ */ jsx(TooltipProvider, { delayDuration: 150, children: list }) : list,
+    tabs.map(
+      (tab) => tab.content === void 0 ? null : /* @__PURE__ */ jsx(TabsContent, { value: tab.value, children: tab.content }, tab.value)
+    )
+  ] });
+}
+function TabsCollectionTrigger({ tab, disabled }) {
+  const trigger = /* @__PURE__ */ jsx(
+    TabsTrigger,
+    {
+      value: tab.value,
+      disabled: disabled || tab.disabled,
+      icon: tab.icon,
+      badge: tab.badge,
+      children: tab.title
+    }
+  );
+  if (!tab.tooltip) return trigger;
+  return /* @__PURE__ */ jsxs(Tooltip, { children: [
+    /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx("span", { className: "inline-flex", children: trigger }) }),
+    /* @__PURE__ */ jsx(TooltipContent, { children: tab.tooltip })
+  ] });
+}
+function TabsList({
+  activateOnFocus,
+  className,
+  loop = true,
+  shape,
+  variant,
+  children,
+  ...props
+}) {
+  const context = React14.useContext(TabsContext);
+  const resolvedVariant = variant ?? context.variant;
+  const resolvedShape = shape ?? context.shape;
+  const resolvedActivateOnFocus = activateOnFocus ?? context.activationMode === "automatic";
+  const listContext = React14.useMemo(
+    () => ({ ...context, shape: resolvedShape, variant: resolvedVariant }),
+    [context, resolvedShape, resolvedVariant]
+  );
+  return /* @__PURE__ */ jsx(TabsContext.Provider, { value: listContext, children: /* @__PURE__ */ jsxs(
+    BaseList,
+    {
+      "data-slot": "tabs-list",
+      activateOnFocus: resolvedActivateOnFocus,
+      loopFocus: loop,
+      className: cn(
+        tabsListVariants({ variant: resolvedVariant, shape: resolvedShape }),
+        className
+      ),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx(
+          BaseIndicator,
+          {
+            "aria-hidden": "true",
+            "data-slot": "tabs-indicator",
+            className: tabsIndicatorVariants({ variant: resolvedVariant, shape: resolvedShape }),
+            style: {
+              left: "var(--active-tab-left)",
+              top: resolvedVariant === "line" ? "auto" : "var(--active-tab-top)",
+              bottom: resolvedVariant === "line" ? "0" : "auto",
+              width: "var(--active-tab-width)",
+              height: resolvedVariant === "line" ? "var(--tabs-line-thickness)" : "var(--active-tab-height)"
+            }
+          }
+        ),
+        children
+      ]
+    }
+  ) });
+}
+function TabsTrigger({ badge, children, className, disabled, icon, ...props }) {
+  const context = React14.useContext(TabsContext);
+  const isDisabled = disabled ?? context.disabled;
+  return /* @__PURE__ */ jsxs(
+    BaseTrigger,
+    {
+      "data-slot": "tabs-trigger",
+      disabled: isDisabled,
+      className: cn(tabsTriggerVariants({ variant: context.variant }), className),
+      ...props,
+      children: [
+        icon,
+        /* @__PURE__ */ jsx("span", { className: "truncate", children }),
+        badge ? /* @__PURE__ */ jsx("span", { className: "inline-flex h-[var(--tabs-badge-height)] items-center rounded-[var(--tabs-pill-radius)] bg-muted px-[var(--tabs-badge-padding-x)] text-[length:var(--tabs-badge-font-size)] text-muted-foreground", children: badge }) : null
+      ]
+    }
+  );
+}
+function TabsContent({ className, forceMount, keepMounted, variant, ...props }) {
+  return /* @__PURE__ */ jsx(
+    BaseContent,
+    {
+      "data-slot": "tabs-content",
+      keepMounted: keepMounted ?? forceMount,
+      className: cn(tabsContentVariants({ variant }), className),
+      ...props
+    }
+  );
+}
+
+// src/tokens/components/textarea.ts
+var textareaTokens = {
+  sizes: {
+    sm: {
+      minHeight: primitiveSpacing[20],
+      paddingX: primitiveSpacing[2],
+      paddingY: primitiveSpacing[2],
+      fontSize: primitiveFontSize.xs,
+      radius: primitiveRadius.md
+    },
+    md: {
+      minHeight: primitiveSpacing[24],
+      paddingX: primitiveSpacing[3],
+      paddingY: primitiveSpacing[2],
+      fontSize: primitiveFontSize.sm,
+      radius: primitiveRadius.md
+    },
+    lg: {
+      minHeight: primitiveSpacing[24],
+      paddingX: primitiveSpacing[4],
+      paddingY: primitiveSpacing[3],
+      fontSize: primitiveFontSize.base,
+      radius: primitiveRadius.lg
+    }
+  },
+  labelSize: primitiveFontSize.sm,
+  focusRingWidth: 3,
+  fieldGap: primitiveSpacing[2] - primitiveSpacing[1] / 2};
+var fieldMessageClassName = "text-xs text-muted-foreground";
+var fieldErrorClassName = "text-xs font-medium text-destructive";
+function getTextareaStyle(size, style) {
+  const token = textareaTokens.sizes[size];
+  return {
+    "--textarea-min-height": `${token.minHeight}px`,
+    "--textarea-padding-x": `${token.paddingX}px`,
+    "--textarea-padding-y": `${token.paddingY}px`,
+    "--textarea-font-size": `${token.fontSize}px`,
+    "--textarea-radius": `${token.radius}px`,
+    "--textarea-focus-ring-width": `${textareaTokens.focusRingWidth}px`,
+    borderRadius: "var(--textarea-radius)",
+    outline: "none",
+    ...style
+  };
+}
+function getTextareaFieldStyle() {
+  return {
+    "--textarea-field-gap": `${textareaTokens.fieldGap}px`,
+    "--textarea-label-size": `${textareaTokens.labelSize}px`
+  };
+}
+function joinDescriptionIds(...ids) {
+  return ids.filter(Boolean).join(" ") || void 0;
+}
+function isInvalid(error, ariaInvalid) {
+  return error === true || typeof error === "string" || ariaInvalid === true || ariaInvalid === "true";
+}
+var Textarea = React14.forwardRef(
+  ({
+    className,
+    style,
+    size = "md",
+    label,
+    description,
+    error,
+    fieldClassName,
+    id,
+    onChange,
+    onValueChange,
+    "aria-describedby": ariaDescribedBy,
+    "aria-invalid": ariaInvalid,
+    ...props
+  }, ref) => {
+    const baseId = React14.useId();
+    const textareaId = id ?? (label || description || typeof error === "string" ? baseId : void 0);
+    const resolvedInvalid = isInvalid(error, ariaInvalid);
+    const descriptionId = description && textareaId ? `${textareaId}-description` : void 0;
+    const errorId = typeof error === "string" && textareaId ? `${textareaId}-error` : void 0;
+    const describedBy = joinDescriptionIds(ariaDescribedBy, descriptionId, errorId);
+    const handleChange = React14.useCallback(
+      (event) => {
+        onValueChange?.(event.currentTarget.value);
+        onChange?.(event);
+      },
+      [onChange, onValueChange]
+    );
+    const control = /* @__PURE__ */ jsx(
+      "textarea",
+      {
+        className: cn(
+          "flex min-h-[var(--textarea-min-height)] w-full resize-y rounded-[var(--textarea-radius)] border border-input bg-background",
+          "px-[var(--textarea-padding-x)] py-[var(--textarea-padding-y)] text-[length:var(--textarea-font-size)] text-foreground shadow-[var(--shadow-xs)]",
+          "transition-[background-color,border-color,box-shadow,color] duration-micro ease-out placeholder:text-muted-foreground",
+          "outline-none focus:border-ring focus:ring-[length:var(--textarea-focus-ring-width)] focus:ring-ring/30",
+          "disabled:cursor-not-allowed disabled:opacity-50 read-only:cursor-default read-only:bg-muted/70",
+          "aria-invalid:border-destructive/60 aria-invalid:focus:border-destructive aria-invalid:focus:ring-destructive/20",
+          className
+        ),
+        ref,
+        id: textareaId,
+        "aria-invalid": resolvedInvalid || void 0,
+        "aria-describedby": describedBy,
+        style: getTextareaStyle(size, style),
+        onChange: handleChange,
+        ...props
+      }
+    );
+    if (!label && !description && typeof error !== "string" && !fieldClassName) {
+      return control;
+    }
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        "data-slot": "textarea-field",
+        className: cn("grid gap-[var(--textarea-field-gap)]", fieldClassName),
+        style: getTextareaFieldStyle(),
+        children: [
+          label && /* @__PURE__ */ jsx(
+            "label",
+            {
+              htmlFor: textareaId,
+              className: "text-[length:var(--textarea-label-size)] font-medium text-foreground",
+              children: label
+            }
+          ),
+          control,
+          description && !error && /* @__PURE__ */ jsx("p", { id: descriptionId, className: fieldMessageClassName, children: description }),
+          typeof error === "string" && /* @__PURE__ */ jsx("p", { id: errorId, role: "alert", className: fieldErrorClassName, children: error })
+        ]
+      }
+    );
+  }
+);
+Textarea.displayName = "Textarea";
+function MarkdownRenderer({ content, className }) {
+  return /* @__PURE__ */ jsx("div", { className: cn("prose prose-sm dark:prose-invert max-w-none", className), children: /* @__PURE__ */ jsx(
+    ReactMarkdown,
+    {
+      remarkPlugins: [remarkGfm],
+      components: {
+        // Inline + block code use semantic tokens so they read in light + dark
+        // themes without hardcoded slate/blue.
+        code(props) {
+          const { className: codeClassName, children, ...rest } = props;
+          const isBlock = /language-/.test(codeClassName ?? "");
+          if (isBlock) {
+            return /* @__PURE__ */ jsx(
+              "code",
+              {
+                ...rest,
+                className: cn(
+                  "block overflow-x-auto rounded-[var(--radius-md)] border border-border bg-muted p-4 font-mono text-foreground text-sm",
+                  codeClassName
+                ),
+                children
+              }
+            );
+          }
+          return /* @__PURE__ */ jsx(
+            "code",
+            {
+              ...rest,
+              className: cn(
+                "rounded bg-muted px-1.5 py-0.5 font-mono text-foreground text-sm",
+                codeClassName
+              ),
+              children
+            }
+          );
+        },
+        // Anchor: open external links in a new tab; protect against
+        // tabnabbing with rel="noopener noreferrer".
+        a({ href, children, ...rest }) {
+          const external = typeof href === "string" && /^https?:/.test(href);
+          return /* @__PURE__ */ jsx(
+            "a",
+            {
+              href,
+              className: "text-primary underline-offset-4 hover:underline",
+              ...external ? { target: "_blank", rel: "noopener noreferrer" } : {},
+              ...rest,
+              children
+            }
+          );
+        },
+        blockquote({ children, ...rest }) {
+          return /* @__PURE__ */ jsx(
+            "blockquote",
+            {
+              ...rest,
+              className: "my-4 border-primary border-l-4 bg-muted py-2 pl-4 text-foreground italic",
+              children
+            }
+          );
+        }
+      },
+      children: content
+    }
+  ) });
+}
+function QuoteGlyph(props) {
+  return /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 16 16", fill: "currentColor", "aria-hidden": "true", className: props.className, children: [
+    /* @__PURE__ */ jsx("title", { children: "Block quote" }),
+    /* @__PURE__ */ jsx("path", { d: "M4 4h2l-1.5 4H6v4H2V8l2-4Zm6 0h2l-1.5 4H12v4H8V8l2-4Z" })
+  ] });
+}
+function MarkdownEditor({
+  value,
+  onChange,
+  placeholder = "Write your answer here\u2026",
+  minHeight = 250,
+  className
+}) {
+  const [tab, setTab] = useState("write");
+  const textareaRef = useRef(null);
+  const insertMarkdown = useCallback(
+    (before, after = "", forceNewLine = false) => {
+      const el = textareaRef.current;
+      if (!el) return;
+      const start = el.selectionStart;
+      const end = el.selectionEnd;
+      const selected = value.slice(start, end);
+      const needsLeadingNl = forceNewLine && start > 0 && value[start - 1] !== "\n";
+      const insert = (needsLeadingNl ? "\n" : "") + before + selected + after;
+      const next = value.slice(0, start) + insert + value.slice(end);
+      onChange(next);
+      requestAnimationFrame(() => {
+        el.focus();
+        const caretStart = start + (needsLeadingNl ? 1 : 0) + before.length;
+        el.setSelectionRange(caretStart, caretStart + selected.length);
+      });
+    },
+    [value, onChange]
+  );
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn("overflow-hidden rounded-[var(--radius-md)] border border-border", className),
+      children: [
+        /* @__PURE__ */ jsxs(Tabs, { value: tab, onValueChange: (v) => setTab(v), className: "w-full", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-2 border-border border-b bg-muted/30 px-3 py-2", children: [
+            /* @__PURE__ */ jsxs(TabsList, { className: "grid w-fit grid-cols-2", children: [
+              /* @__PURE__ */ jsxs(TabsTrigger, { value: "write", className: "text-xs", children: [
+                /* @__PURE__ */ jsx(Pencil, { className: "mr-1 h-3 w-3", "aria-hidden": "true" }),
+                "Write"
+              ] }),
+              /* @__PURE__ */ jsxs(TabsTrigger, { value: "preview", className: "text-xs", children: [
+                /* @__PURE__ */ jsx(FileText, { className: "mr-1 h-3 w-3", "aria-hidden": "true" }),
+                "Preview"
+              ] })
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-1", children: [
+              /* @__PURE__ */ jsx(ToolbarButton, { "aria-label": "Bold (Ctrl+B)", onClick: () => insertMarkdown("**", "**"), children: /* @__PURE__ */ jsx(TextBold, { className: "h-3.5 w-3.5", "aria-hidden": "true" }) }),
+              /* @__PURE__ */ jsx(ToolbarButton, { "aria-label": "Italic (Ctrl+I)", onClick: () => insertMarkdown("*", "*"), children: /* @__PURE__ */ jsx(TextItalic, { className: "h-3.5 w-3.5", "aria-hidden": "true" }) }),
+              /* @__PURE__ */ jsx(ToolbarButton, { "aria-label": "Inline code", onClick: () => insertMarkdown("`", "`"), children: /* @__PURE__ */ jsx(Code, { className: "h-3.5 w-3.5", "aria-hidden": "true" }) }),
+              /* @__PURE__ */ jsx(ToolbarButton, { "aria-label": "Heading", onClick: () => insertMarkdown("\n## ", "", true), children: /* @__PURE__ */ jsx(Hash, { className: "h-3.5 w-3.5", "aria-hidden": "true" }) }),
+              /* @__PURE__ */ jsx(
+                ToolbarButton,
+                {
+                  "aria-label": "Block quote",
+                  onClick: () => insertMarkdown("\n> ", "", true),
+                  children: /* @__PURE__ */ jsx(QuoteGlyph, { className: "h-3.5 w-3.5" })
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                ToolbarButton,
+                {
+                  "aria-label": "Bullet list",
+                  onClick: () => insertMarkdown("\n- ", "", true),
+                  children: /* @__PURE__ */ jsx(ListUnordered, { className: "h-3.5 w-3.5", "aria-hidden": "true" })
+                }
+              ),
+              /* @__PURE__ */ jsx(ToolbarButton, { "aria-label": "Link", onClick: () => insertMarkdown("[", "](url)"), children: /* @__PURE__ */ jsx(Link, { className: "h-3.5 w-3.5", "aria-hidden": "true" }) }),
+              /* @__PURE__ */ jsx(ToolbarButton, { "aria-label": "Image", onClick: () => insertMarkdown("![alt text](", ")"), children: /* @__PURE__ */ jsx(Image, { className: "h-3.5 w-3.5", "aria-hidden": "true" }) }),
+              /* @__PURE__ */ jsx(
+                ToolbarButton,
+                {
+                  "aria-label": "Fenced code block",
+                  onClick: () => insertMarkdown("\n```javascript\n", "\n```\n", true),
+                  children: /* @__PURE__ */ jsx(FileText, { className: "h-3.5 w-3.5", "aria-hidden": "true" })
+                }
+              )
+            ] })
+          ] }),
+          /* @__PURE__ */ jsx(TabsContent, { value: "write", className: "mt-0", children: /* @__PURE__ */ jsx(
+            Textarea,
+            {
+              ref: textareaRef,
+              value,
+              onChange: (e) => onChange(e.target.value),
+              placeholder,
+              className: "resize-none rounded-none border-0 font-mono text-sm shadow-none focus-visible:ring-0",
+              style: { minHeight }
+            }
+          ) }),
+          /* @__PURE__ */ jsx(TabsContent, { value: "preview", className: "mt-0", children: /* @__PURE__ */ jsx("div", { className: "bg-background p-4", style: { minHeight }, children: value ? /* @__PURE__ */ jsx(MarkdownRenderer, { content: value }) : /* @__PURE__ */ jsx("div", { className: "flex h-32 items-center justify-center text-muted-foreground text-sm italic", children: "Nothing to preview." }) }) })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between border-border border-t bg-muted/30 px-3 py-2 text-muted-foreground text-xs", children: [
+          /* @__PURE__ */ jsx("span", { children: "Markdown supported" }),
+          /* @__PURE__ */ jsxs("span", { children: [
+            value.length,
+            " characters"
+          ] })
+        ] })
+      ]
+    }
+  );
+}
+function ToolbarButton({
+  children,
+  onClick,
+  "aria-label": ariaLabel
+}) {
+  return /* @__PURE__ */ jsx(
+    Button,
+    {
+      type: "button",
+      variant: "ghost",
+      size: "sm",
+      className: "h-7 w-7 p-0",
+      onClick,
+      "aria-label": ariaLabel,
+      children
+    }
+  );
+}
+var Card2 = React14.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      className: cn(
+        "rounded-[var(--radius-lg)] border border-border bg-card text-card-foreground shadow-sm",
+        className
+      ),
+      ...props
+    }
+  )
+);
+Card2.displayName = "Card";
+var CardHeader2 = React14.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, className: cn("flex flex-col space-y-1.5 p-6", className), ...props })
+);
+CardHeader2.displayName = "CardHeader";
+var CardTitle2 = React14.forwardRef(
+  ({ className, children, ...props }, ref) => /* @__PURE__ */ jsx(
+    "h3",
+    {
+      ref,
+      className: cn("text-2xl font-semibold leading-none tracking-tight", className),
+      ...props,
+      children
+    }
+  )
+);
+CardTitle2.displayName = "CardTitle";
+var CardDescription2 = React14.forwardRef(({ className, as: Tag = "p", ...props }, ref) => {
+  return React14.createElement(Tag, {
+    ref,
+    className: cn("text-sm text-muted-foreground", className),
+    ...props
+  });
+});
+CardDescription2.displayName = "CardDescription";
+var CardContent = React14.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, className: cn("p-6 pt-0", className), ...props })
+);
+CardContent.displayName = "CardContent";
+var CardFooter2 = React14.forwardRef(
+  ({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, className: cn("flex items-center p-6 pt-0", className), ...props })
+);
+CardFooter2.displayName = "CardFooter";
+var Separator = React14.forwardRef(({ className, orientation = "horizontal", decorative: _decorative = true, ...props }, ref) => /* @__PURE__ */ jsx(
+  Separator$1,
+  {
+    ref,
+    orientation,
+    className: cn(
+      "shrink-0 bg-border",
+      orientation === "horizontal" ? "h-[1px] w-full" : "h-full w-[1px]",
+      className
+    ),
+    ...props
+  }
+));
+Separator.displayName = "Separator";
+var sizeClasses = {
+  xs: { root: "h-5 w-5", fallback: "text-[8px]" },
+  sm: { root: "h-8 w-8", fallback: "text-xs" },
+  md: { root: "h-10 w-10", fallback: "text-sm" },
+  lg: { root: "h-14 w-14", fallback: "text-xl" },
+  xl: { root: "h-20 w-20", fallback: "text-2xl" }
+};
+var numericAvatarClass = "h-[var(--avatar-size)] w-[var(--avatar-size)]";
+var AvatarContext = React14.createContext(null);
+function isPresetSize(size) {
+  return typeof size === "string";
+}
+function getAvatarRootClass(size) {
+  return isPresetSize(size) ? sizeClasses[size].root : numericAvatarClass;
+}
+function getAvatarFallbackClass(size) {
+  return isPresetSize(size) ? sizeClasses[size].fallback : "text-[var(--avatar-font-size)]";
+}
+function getAvatarStyle(size, style) {
+  if (typeof size !== "number") return style;
+  return {
+    "--avatar-size": `${size}px`,
+    "--avatar-font-size": `${Math.max(10, Math.round(size * 0.375))}px`,
+    ...style
+  };
+}
+function getAvatarInitials(value) {
+  const cleaned = value.trim();
+  if (!cleaned) return "";
+  const parts = cleaned.split(/[\s._-]+/).filter(Boolean);
+  if (parts.length === 1) return (parts[0] ?? "").slice(0, 2).toUpperCase();
+  return parts.slice(0, 2).map((part) => part[0] ?? "").join("").toUpperCase();
+}
+function normalizeAvatarLabel({
+  alt,
+  title,
+  username
+}) {
+  return title ?? alt ?? username ?? "Avatar";
+}
+var Avatar = React14.forwardRef(
+  ({
+    className,
+    size = "md",
+    src,
+    alt,
+    title,
+    letter,
+    username,
+    placeholder,
+    fallbackDelayMs,
+    children,
+    style,
+    ...props
+  }, ref) => {
+    const label = normalizeAvatarLabel({ alt, title, username });
+    const fallback = letter ?? getAvatarInitials(title ?? username ?? alt ?? "");
+    const contextTitle = title ?? alt ?? username;
+    const contextValue = contextTitle === void 0 ? { size } : { size, title: contextTitle };
+    const shouldRenderConvenienceContent = children === void 0 && (src !== void 0 || placeholder === true || fallback.length > 0);
+    return /* @__PURE__ */ jsx(AvatarContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx(
+      Avatar$1.Root,
+      {
+        ref,
+        className: cn(
+          "relative flex shrink-0 overflow-hidden rounded-full bg-muted",
+          getAvatarRootClass(size),
+          className
+        ),
+        style: getAvatarStyle(size, style),
+        ...props,
+        children: shouldRenderConvenienceContent ? /* @__PURE__ */ jsxs(Fragment, { children: [
+          src && /* @__PURE__ */ jsx(AvatarImage, { src, alt: label }),
+          /* @__PURE__ */ jsx(AvatarFallback, { size, delay: fallbackDelayMs, children: placeholder ? /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Loading avatar" }) : fallback })
+        ] }) : children
+      }
+    ) });
+  }
+);
+Avatar.displayName = "Avatar";
+var AvatarImage = React14.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  Avatar$1.Image,
+  {
+    ref,
+    className: cn("aspect-square h-full w-full object-cover", className),
+    ...props
+  }
+));
+AvatarImage.displayName = "AvatarImage";
+var AvatarFallback = React14.forwardRef(
+  ({ className, size, children, "aria-label": ariaLabel, style, ...props }, ref) => {
+    const context = React14.useContext(AvatarContext);
+    const resolvedSize = size ?? context?.size ?? "md";
+    const fallbackLabel = ariaLabel ?? (typeof children === "string" && children.trim().length > 0 ? `Avatar with initials: ${children}` : context?.title);
+    return /* @__PURE__ */ jsx(
+      Avatar$1.Fallback,
+      {
+        ref,
+        "aria-label": fallbackLabel,
+        className: cn(
+          "flex h-full w-full items-center justify-center rounded-full bg-muted font-medium text-muted-foreground",
+          getAvatarFallbackClass(resolvedSize),
+          className
+        ),
+        style: getAvatarStyle(resolvedSize, style),
+        ...props,
+        children
+      }
+    );
+  }
+);
+AvatarFallback.displayName = "AvatarFallback";
+function initials(name) {
+  return name.split(/\s+/).map((part) => part.charAt(0).toUpperCase()).join("").slice(0, 2);
+}
+function UserInfo({ author, timestamp, verb = "asked", className }) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn("flex items-start gap-3 rounded-[var(--radius-md)] bg-muted/40 p-3", className),
+      children: [
+        /* @__PURE__ */ jsxs(Avatar, { className: "h-8 w-8 shrink-0", children: [
+          author.avatar && /* @__PURE__ */ jsx(AvatarImage, { src: author.avatar, alt: author.name }),
+          /* @__PURE__ */ jsx(AvatarFallback, { children: initials(author.name) })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-1 flex-col gap-1", children: [
+          /* @__PURE__ */ jsxs("span", { className: "text-muted-foreground text-xs", children: [
+            verb,
+            " ",
+            timestamp
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [
+            /* @__PURE__ */ jsx("span", { className: "font-medium text-foreground text-sm", children: author.name }),
+            /* @__PURE__ */ jsx("span", { className: "font-bold text-muted-foreground text-xs tabular-nums", children: author.reputation.toLocaleString() }),
+            author.badges.gold > 0 && /* @__PURE__ */ jsx(Badge2, { color: "bg-yellow-500", count: author.badges.gold, label: "gold" }),
+            author.badges.silver > 0 && /* @__PURE__ */ jsx(Badge2, { color: "bg-gray-400", count: author.badges.silver, label: "silver" }),
+            author.badges.bronze > 0 && /* @__PURE__ */ jsx(Badge2, { color: "bg-amber-600", count: author.badges.bronze, label: "bronze" })
+          ] })
+        ] })
+      ]
+    }
+  );
+}
+function Badge2({ color, count, label }) {
+  return /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-1", children: [
+    /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: cn("h-2 w-2 rounded-full", color) }),
+    /* @__PURE__ */ jsxs("span", { className: "text-muted-foreground text-xs", children: [
+      /* @__PURE__ */ jsxs("span", { className: "sr-only", children: [
+        label,
+        " badges: "
+      ] }),
+      count
+    ] })
+  ] });
+}
+function voteDelta(userVote) {
+  if (userVote === "up") return 1;
+  if (userVote === "down") return -1;
+  return 0;
+}
+function VoteButtons({
+  votes,
+  userVote,
+  onVote,
+  size = "default",
+  label = "post"
+}) {
+  const iconSize = size === "large" ? "h-5 w-5" : "h-4 w-4";
+  const scoreSize = size === "large" ? "text-lg" : "text-base";
+  const score = votes + voteDelta(userVote);
+  return /* @__PURE__ */ jsxs("fieldset", { className: "flex flex-col items-center gap-2", children: [
+    /* @__PURE__ */ jsxs("legend", { className: "sr-only", children: [
+      "Vote on ",
+      label
+    ] }),
+    /* @__PURE__ */ jsx(
+      Button,
+      {
+        type: "button",
+        variant: "ghost",
+        size: size === "large" ? "default" : "sm",
+        "aria-label": `Upvote ${label}`,
+        "aria-pressed": userVote === "up",
+        onClick: () => onVote("up"),
+        className: cn("p-2", userVote === "up" && "bg-primary/10 text-primary hover:bg-primary/15"),
+        children: /* @__PURE__ */ jsx(ChevronUp, { className: iconSize, "aria-hidden": "true" })
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "span",
+      {
+        className: cn(
+          "font-bold tabular-nums",
+          scoreSize,
+          userVote === "up" && "text-primary",
+          userVote === "down" && "text-muted-foreground"
+        ),
+        "aria-live": "polite",
+        "aria-atomic": "true",
+        children: score
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      Button,
+      {
+        type: "button",
+        variant: "ghost",
+        size: size === "large" ? "default" : "sm",
+        "aria-label": `Downvote ${label}`,
+        "aria-pressed": userVote === "down",
+        onClick: () => onVote("down"),
+        className: cn(
+          "p-2",
+          userVote === "down" && "bg-muted text-muted-foreground hover:bg-muted"
+        ),
+        children: /* @__PURE__ */ jsx(ChevronDown, { className: iconSize, "aria-hidden": "true" })
+      }
+    )
+  ] });
+}
+function QAPage({
+  initialQuestion,
+  initialAnswers,
+  currentAuthor = {
+    name: "you",
+    reputation: 0,
+    badges: { gold: 0, silver: 0, bronze: 0 }
+  },
+  onSubmitAnswer,
+  onVoteAnswer,
+  onVoteQuestion,
+  onAcceptAnswer,
+  onBookmark,
+  className
+}) {
+  const [question, setQuestion] = useState(initialQuestion);
+  const [answers, setAnswers] = useState(initialAnswers);
+  const [draft, setDraft] = useState("");
+  const handleQuestionVote = (next) => {
+    const userVote = question.userVote === next ? null : next;
+    setQuestion((q) => ({ ...q, userVote }));
+    onVoteQuestion?.(userVote);
+  };
+  const handleAnswerVote = (id, next) => {
+    setAnswers(
+      (list) => list.map((a) => a.id === id ? { ...a, userVote: a.userVote === next ? null : next } : a)
+    );
+    const fresh = answers.find((a) => a.id === id);
+    const userVote = fresh && fresh.userVote === next ? null : next;
+    onVoteAnswer?.(id, userVote);
+  };
+  const handleAccept = (id) => {
+    setAnswers(
+      (list) => list.map((a) => ({ ...a, isAccepted: a.id === id ? !a.isAccepted : false }))
+    );
+    onAcceptAnswer?.(id);
+  };
+  const handleBookmarkToggle = () => {
+    setQuestion((q) => {
+      const next = !q.bookmarked;
+      onBookmark?.(next);
+      return { ...q, bookmarked: next };
+    });
+  };
+  const handleSubmit = () => {
+    const trimmed = draft.trim();
+    if (!trimmed) return;
+    const newAnswer = {
+      id: Date.now(),
+      content: trimmed,
+      author: currentAuthor,
+      votes: 0,
+      timestamp: "just now",
+      isAccepted: false,
+      userVote: null
+    };
+    setAnswers((list) => [...list, newAnswer]);
+    setDraft("");
+    onSubmitAnswer?.(trimmed);
+  };
+  const sortedAnswers = useMemo(() => {
+    return [...answers].sort((a, b) => {
+      if (a.isAccepted !== b.isAccepted) return a.isAccepted ? -1 : 1;
+      const aScore = a.votes + (a.userVote === "up" ? 1 : a.userVote === "down" ? -1 : 0);
+      const bScore = b.votes + (b.userVote === "up" ? 1 : b.userVote === "down" ? -1 : 0);
+      return bScore - aScore;
+    });
+  }, [answers]);
+  return /* @__PURE__ */ jsxs("div", { className: cn("mx-auto w-full max-w-5xl p-4 md:p-6", className), children: [
+    /* @__PURE__ */ jsxs("header", { className: "mb-6", children: [
+      /* @__PURE__ */ jsx("h1", { className: "mb-4 font-bold text-2xl leading-tight text-foreground", children: question.title }),
+      /* @__PURE__ */ jsxs("div", { className: "mb-4 flex items-center gap-4 text-muted-foreground text-sm", children: [
+        /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-1", children: [
+          /* @__PURE__ */ jsx(Calendar, { "aria-hidden": "true", className: "h-4 w-4" }),
+          "Asked ",
+          question.timestamp
+        ] }),
+        /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-1", children: [
+          /* @__PURE__ */ jsx(Eye, { "aria-hidden": "true", className: "h-4 w-4" }),
+          "Viewed ",
+          question.views.toLocaleString(),
+          " times"
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-2", children: question.tags.map((tag) => /* @__PURE__ */ jsx(Badge, { variant: "secondary", className: "text-xs", children: tag }, tag)) })
+    ] }),
+    /* @__PURE__ */ jsx(Card2, { className: "mb-8", children: /* @__PURE__ */ jsxs(CardContent, { className: "flex gap-6 p-6", children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-4", children: [
+        /* @__PURE__ */ jsx(
+          VoteButtons,
+          {
+            votes: question.votes,
+            userVote: question.userVote,
+            onVote: handleQuestionVote,
+            size: "large",
+            label: "question"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            type: "button",
+            variant: "ghost",
+            size: "sm",
+            "aria-label": question.bookmarked ? "Remove bookmark" : "Bookmark question",
+            "aria-pressed": question.bookmarked,
+            onClick: handleBookmarkToggle,
+            className: cn("p-2", question.bookmarked && "bg-warning/10 text-warning"),
+            children: /* @__PURE__ */ jsx(Bookmark, { className: "h-4 w-4", "aria-hidden": "true" })
+          }
+        )
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-1 flex-col", children: [
+        /* @__PURE__ */ jsx(MarkdownRenderer, { content: question.content }),
+        /* @__PURE__ */ jsx(
+          PostActions,
+          {
+            className: "mt-6",
+            author: question.author,
+            timestamp: question.timestamp,
+            verb: "asked",
+            shareLabel: "Share Question",
+            editLabel: "Edit Question",
+            flagLabel: "Flag Question"
+          }
+        )
+      ] })
+    ] }) }),
+    /* @__PURE__ */ jsx("div", { className: "mb-6 flex items-center justify-between", children: /* @__PURE__ */ jsxs("h2", { className: "font-semibold text-foreground text-xl", children: [
+      answers.length,
+      " ",
+      answers.length === 1 ? "Answer" : "Answers"
+    ] }) }),
+    /* @__PURE__ */ jsx("div", { className: "mb-8", children: sortedAnswers.map((answer, index) => /* @__PURE__ */ jsxs(Fragment$1, { children: [
+      /* @__PURE__ */ jsx(Card2, { className: cn("mb-6", answer.isAccepted && "ring-2 ring-success/40"), children: /* @__PURE__ */ jsxs(CardContent, { className: "flex gap-6 p-6", children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-4", children: [
+          /* @__PURE__ */ jsx(
+            VoteButtons,
+            {
+              votes: answer.votes,
+              userVote: answer.userVote,
+              onVote: (v) => handleAnswerVote(answer.id, v),
+              size: "large",
+              label: "answer"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              type: "button",
+              variant: "ghost",
+              size: "sm",
+              "aria-label": answer.isAccepted ? "Unaccept this answer" : "Accept this answer",
+              "aria-pressed": answer.isAccepted,
+              onClick: () => handleAccept(answer.id),
+              className: cn("p-2", answer.isAccepted && "bg-success/10 text-success"),
+              children: /* @__PURE__ */ jsx(Check, { className: "h-5 w-5", "aria-hidden": "true" })
+            }
+          ),
+          answer.isAccepted && /* @__PURE__ */ jsxs("div", { className: "text-center", children: [
+            /* @__PURE__ */ jsx(StarFill, { "aria-hidden": "true", className: "mx-auto mb-1 h-4 w-4 text-success" }),
+            /* @__PURE__ */ jsx("span", { className: "font-medium text-success text-xs", children: "Accepted" })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-1 flex-col", children: [
+          /* @__PURE__ */ jsx(MarkdownRenderer, { content: answer.content }),
+          /* @__PURE__ */ jsx(
+            PostActions,
+            {
+              className: "mt-6",
+              author: answer.author,
+              timestamp: answer.timestamp,
+              verb: "answered",
+              shareLabel: "Share Answer",
+              editLabel: "Edit Answer",
+              flagLabel: "Flag Answer"
+            }
+          )
+        ] })
+      ] }) }),
+      index < sortedAnswers.length - 1 && /* @__PURE__ */ jsx(Separator, { className: "mb-6" })
+    ] }, answer.id)) }),
+    /* @__PURE__ */ jsxs(Card2, { children: [
+      /* @__PURE__ */ jsx(CardHeader2, { children: /* @__PURE__ */ jsx("h3", { className: "font-semibold text-foreground text-lg", children: "Your Answer" }) }),
+      /* @__PURE__ */ jsxs(CardContent, { className: "space-y-4", children: [
+        /* @__PURE__ */ jsx(MarkdownEditor, { value: draft, onChange: setDraft, placeholder: "Write your answer here\u2026" }),
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+          /* @__PURE__ */ jsx("p", { className: "text-muted-foreground text-xs", children: "Thanks for contributing an answer!" }),
+          /* @__PURE__ */ jsxs("div", { className: "flex gap-2", children: [
+            /* @__PURE__ */ jsx(
+              Button,
+              {
+                type: "button",
+                variant: "outline",
+                onClick: () => setDraft(""),
+                disabled: !draft,
+                children: "Discard Draft"
+              }
+            ),
+            /* @__PURE__ */ jsx(Button, { type: "button", onClick: handleSubmit, disabled: !draft.trim(), children: "Post Your Answer" })
+          ] })
+        ] })
+      ] })
+    ] })
+  ] });
+}
+function PostActions({
+  author,
+  timestamp,
+  verb,
+  shareLabel,
+  editLabel,
+  flagLabel,
+  className
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: cn("flex flex-wrap items-center justify-between gap-3", className), children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
+      /* @__PURE__ */ jsxs(Button, { type: "button", variant: "ghost", size: "sm", className: "text-xs", children: [
+        /* @__PURE__ */ jsx(Share, { className: "mr-1 h-3 w-3", "aria-hidden": "true" }),
+        shareLabel
+      ] }),
+      /* @__PURE__ */ jsxs(Button, { type: "button", variant: "ghost", size: "sm", className: "text-xs", children: [
+        /* @__PURE__ */ jsx(Pencil, { className: "mr-1 h-3 w-3", "aria-hidden": "true" }),
+        editLabel
+      ] }),
+      /* @__PURE__ */ jsxs(Button, { type: "button", variant: "ghost", size: "sm", className: "text-xs", children: [
+        /* @__PURE__ */ jsx(Flag, { className: "mr-1 h-3 w-3", "aria-hidden": "true" }),
+        flagLabel
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx(UserInfo, { author, timestamp, verb })
+  ] });
+}
+var CollapsibleContext = React14.createContext({});
+var Collapsible = React14.forwardRef(({ className, open: openProp, defaultOpen, onOpenChange, disabled, children, ...props }, ref) => {
+  const [uncontrolledOpen, setUncontrolledOpen] = React14.useState(defaultOpen || false);
+  const isControlled = openProp !== void 0;
+  const open = isControlled ? openProp : uncontrolledOpen;
+  const handleOpenChange = React14.useCallback(
+    (nextOpen) => {
+      if (!isControlled) {
+        setUncontrolledOpen(nextOpen);
+      }
+      onOpenChange?.(nextOpen);
+    },
+    [isControlled, onOpenChange]
+  );
+  return /* @__PURE__ */ jsx(CollapsibleContext.Provider, { value: { open, onOpenChange: handleOpenChange, disabled }, children: /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      className,
+      "data-state": open ? "open" : "closed",
+      "data-disabled": disabled ? "" : void 0,
+      ...props,
+      children
+    }
+  ) });
+});
+Collapsible.displayName = "Collapsible";
+var CollapsibleTrigger = React14.forwardRef(({ className, asChild, children, ...props }, ref) => {
+  const { open, onOpenChange, disabled } = React14.useContext(CollapsibleContext);
+  const handleClick = React14.useCallback(
+    (e) => {
+      if (disabled) return;
+      onOpenChange?.(!open);
+      props.onClick?.(e);
+    },
+    [disabled, open, onOpenChange, props.onClick]
+  );
+  if (asChild && React14.isValidElement(children)) {
+    return React14.cloneElement(children, {
+      ref,
+      onClick: handleClick,
+      "data-state": open ? "open" : "closed",
+      "data-disabled": disabled ? "" : void 0,
+      "aria-expanded": open,
+      "aria-controls": props["aria-controls"],
+      disabled: disabled || props.disabled,
+      ...props
+    });
+  }
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      ref,
+      type: "button",
+      onClick: handleClick,
+      "data-state": open ? "open" : "closed",
+      "data-disabled": disabled ? "" : void 0,
+      "aria-expanded": open,
+      disabled: disabled || props.disabled,
+      className,
+      ...props,
+      children
+    }
+  );
+});
+CollapsibleTrigger.displayName = "CollapsibleTrigger";
+var CollapsibleContent = React14.forwardRef(
+  ({ className, children, ...props }, ref) => {
+    const { open } = React14.useContext(CollapsibleContext);
+    return /* @__PURE__ */ jsx(AnimatePresence, { initial: false, children: open && /* @__PURE__ */ jsx(
+      motion.div,
+      {
+        initial: "collapsed",
+        animate: "open",
+        exit: "collapsed",
+        variants: {
+          open: { opacity: 1, height: "auto" },
+          collapsed: { opacity: 0, height: 0 }
+        },
+        transition: { duration: 0.3, ease: [0.04, 0.62, 0.23, 0.98] },
+        className: "overflow-hidden",
+        children: /* @__PURE__ */ jsx("div", { ref, "data-state": "open", className: cn("", className), ...props, children })
+      },
+      "content"
+    ) });
+  }
+);
+CollapsibleContent.displayName = "CollapsibleContent";
+var ITEM_BASE_CLASSES = "flex items-center gap-2 rounded-md px-2.5 py-1.5 text-[13px] leading-5 transition-colors";
+var ITEM_DEFAULT_CLASSES = "text-foreground hover:bg-accent hover:text-accent-foreground";
+var ITEM_ACTIVE_CLASSES = "bg-accent text-accent-foreground font-medium";
+var ITEM_DISABLED_CLASSES = "opacity-50 pointer-events-none";
+var ITEM_COLLAPSED_CLASSES = "justify-center px-0 size-8 mx-auto";
+var ICON_CLASSES = "size-3.5 shrink-0";
+function defaultRenderLink({
+  href,
+  children,
+  className,
+  "aria-current": ariaCurrent,
+  "aria-label": ariaLabel,
+  onClick
+}) {
+  return /* @__PURE__ */ jsx(
+    "a",
+    {
+      href,
+      className,
+      "aria-current": ariaCurrent,
+      "aria-label": ariaLabel,
+      onClick,
+      children
+    }
+  );
+}
+function ItemContent({
+  item,
+  collapsed,
+  showChevron,
+  chevronOpen
+}) {
+  const Icon = item.icon;
+  if (collapsed) {
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      Icon ? /* @__PURE__ */ jsx(Icon, { className: ICON_CLASSES }) : null,
+      /* @__PURE__ */ jsx("span", { className: "sr-only", children: item.label })
+    ] });
+  }
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    Icon ? /* @__PURE__ */ jsx(Icon, { className: ICON_CLASSES }) : null,
+    /* @__PURE__ */ jsx("span", { className: "flex-1 truncate", children: item.label }),
+    item.badge ? /* @__PURE__ */ jsx(Badge, { variant: item.badge.tone, size: "sm", children: item.badge.label }) : null,
+    showChevron ? /* @__PURE__ */ jsx(
+      ChevronRight,
+      {
+        className: cn(
+          "h-3.5 w-3.5 shrink-0 text-muted-foreground transition-transform",
+          chevronOpen && "rotate-90"
+        ),
+        "aria-hidden": "true"
+      }
+    ) : null
+  ] });
+}
+function InteractiveItem({
+  item,
+  collapsed,
+  itemClassName,
+  renderLink,
+  nested = false
+}) {
+  const isActive = item.isActive === true;
+  const isDisabled = item.disabled === true;
+  const classes = cn(
+    ITEM_BASE_CLASSES,
+    isActive ? ITEM_ACTIVE_CLASSES : ITEM_DEFAULT_CLASSES,
+    isDisabled && ITEM_DISABLED_CLASSES,
+    collapsed && ITEM_COLLAPSED_CLASSES,
+    !collapsed && nested && "pl-9",
+    itemClassName
+  );
+  const ariaCurrent = isActive ? "page" : void 0;
+  const ariaDisabled = isDisabled ? true : void 0;
+  const inner = /* @__PURE__ */ jsx(ItemContent, { item, collapsed });
+  let element;
+  if (item.href && !isDisabled) {
+    if (item.external) {
+      element = /* @__PURE__ */ jsx(
+        "a",
+        {
+          href: item.href,
+          target: "_blank",
+          rel: "noopener noreferrer",
+          className: classes,
+          "aria-current": ariaCurrent,
+          "aria-label": collapsed ? item.label : void 0,
+          onClick: item.onClick,
+          children: inner
+        }
+      );
+    } else {
+      element = renderLink({
+        href: item.href,
+        className: classes,
+        children: inner,
+        "aria-current": ariaCurrent,
+        "aria-label": collapsed ? item.label : void 0,
+        onClick: item.onClick
+      });
+    }
+  } else {
+    element = /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        className: cn(classes, "w-full text-left"),
+        "aria-current": ariaCurrent,
+        "aria-disabled": ariaDisabled,
+        "aria-label": collapsed ? item.label : void 0,
+        disabled: isDisabled,
+        onClick: item.onClick,
+        children: inner
+      }
+    );
+  }
+  if (collapsed) {
+    return /* @__PURE__ */ jsxs(Tooltip, { children: [
+      /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: element }),
+      /* @__PURE__ */ jsx(TooltipContent, { side: "right", sideOffset: 8, children: item.label })
+    ] });
+  }
+  return element;
+}
+function ParentItem({
+  item,
+  collapsed,
+  itemClassName,
+  renderLink
+}) {
+  const hasActiveChild = React14.useMemo(
+    () => item.children?.some((c) => c.isActive === true) ?? false,
+    [item.children]
+  );
+  const [open, setOpen] = React14.useState(item.isActive === true || hasActiveChild);
+  if (collapsed) {
+    return /* @__PURE__ */ jsx(
+      InteractiveItem,
+      {
+        item,
+        collapsed: true,
+        itemClassName,
+        renderLink
+      }
+    );
+  }
+  const isActive = item.isActive === true;
+  const isDisabled = item.disabled === true;
+  const triggerClasses = cn(
+    ITEM_BASE_CLASSES,
+    "w-full text-left",
+    isActive ? ITEM_ACTIVE_CLASSES : ITEM_DEFAULT_CLASSES,
+    isDisabled && ITEM_DISABLED_CLASSES,
+    itemClassName
+  );
+  return /* @__PURE__ */ jsxs(Collapsible, { open, onOpenChange: setOpen, children: [
+    /* @__PURE__ */ jsx(
+      CollapsibleTrigger,
+      {
+        className: triggerClasses,
+        "aria-current": isActive ? "page" : void 0,
+        disabled: isDisabled,
+        children: /* @__PURE__ */ jsx(ItemContent, { item, collapsed: false, showChevron: true, chevronOpen: open })
+      }
+    ),
+    /* @__PURE__ */ jsx(CollapsibleContent, { children: /* @__PURE__ */ jsx("ul", { className: "mt-1 flex flex-col gap-0.5", children: item.children?.map((child) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(
+      InteractiveItem,
+      {
+        item: child,
+        collapsed: false,
+        itemClassName,
+        renderLink,
+        nested: true
+      }
+    ) }, child.id)) }) })
+  ] });
+}
+function SidebarNav({
+  sections,
+  collapsed = false,
+  className,
+  itemClassName,
+  header,
+  footer,
+  renderLink = defaultRenderLink
+}) {
+  return /* @__PURE__ */ jsx(TooltipProvider, { delayDuration: 200, children: /* @__PURE__ */ jsxs(
+    "nav",
+    {
+      "aria-label": "Sidebar",
+      className: cn(
+        "flex h-full flex-col gap-4",
+        collapsed ? "px-2 py-2.5" : "px-2.5 py-3",
+        className
+      ),
+      children: [
+        header ? /* @__PURE__ */ jsx("div", { className: "shrink-0", children: header }) : null,
+        /* @__PURE__ */ jsx("div", { className: "flex-1 space-y-4 overflow-y-auto", children: sections.map((section) => /* @__PURE__ */ jsxs("div", { children: [
+          section.label && !collapsed ? /* @__PURE__ */ jsx("div", { className: "mb-1.5 px-2.5 text-[10px] font-semibold uppercase tracking-[0.14em] text-muted-foreground", children: section.label }) : null,
+          /* @__PURE__ */ jsx("ul", { className: "flex flex-col gap-0.5", children: section.items.map((item) => {
+            const hasChildren = Array.isArray(item.children) && item.children.length > 0;
+            return /* @__PURE__ */ jsx("li", { children: hasChildren ? /* @__PURE__ */ jsx(
+              ParentItem,
+              {
+                item,
+                collapsed,
+                itemClassName,
+                renderLink
+              }
+            ) : /* @__PURE__ */ jsx(
+              InteractiveItem,
+              {
+                item,
+                collapsed,
+                itemClassName,
+                renderLink
+              }
+            ) }, item.id);
+          }) })
+        ] }, section.id)) }),
+        footer ? /* @__PURE__ */ jsx("div", { className: "shrink-0 border-t border-border pt-3", children: footer }) : null
+      ]
+    }
+  ) });
+}
+var TerminalContext = React14.createContext(null);
+var variantStyles2 = {
+  default: "bg-[var(--neutral-2)] border border-[var(--neutral-7)]",
+  minimal: "bg-[var(--neutral-1)] border border-[var(--neutral-7)]",
+  glass: "bg-[var(--neutral-2)] backdrop-blur-md border border-[var(--neutral-7)]"
+};
+var TerminalRoot = React14.forwardRef(
+  ({ className, variant = "default", children, ...props }, ref) => {
+    return /* @__PURE__ */ jsx(TerminalContext.Provider, { value: { variant }, children: /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        className: cn(
+          "rounded-[var(--radius-xl)] overflow-hidden font-mono text-sm",
+          variantStyles2[variant],
+          className
+        ),
+        ...props,
+        children
+      }
+    ) });
+  }
+);
+TerminalRoot.displayName = "Terminal";
+var TerminalHeader = React14.forwardRef(
+  ({ className, title, showControls = true, children, ...props }, ref) => {
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref,
+        className: cn(
+          "flex items-center gap-2 px-4 py-3 border-b border-[var(--neutral-7)] bg-[var(--neutral-3)]",
+          className
+        ),
+        ...props,
+        children: [
+          showControls && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5", children: [
+            /* @__PURE__ */ jsx("span", { className: "w-3 h-3 rounded-full bg-red-500/80", "aria-hidden": true }),
+            /* @__PURE__ */ jsx("span", { className: "w-3 h-3 rounded-full bg-yellow-500/80", "aria-hidden": true }),
+            /* @__PURE__ */ jsx("span", { className: "w-3 h-3 rounded-full bg-green-500/80", "aria-hidden": true })
+          ] }),
+          title && /* @__PURE__ */ jsx("span", { className: "ml-2 text-xs text-[var(--neutral-9)]", children: title }),
+          children
+        ]
+      }
+    );
+  }
+);
+TerminalHeader.displayName = "Terminal.Header";
+var TerminalBody = React14.forwardRef(
+  ({ className, children, ...props }, ref) => {
+    return /* @__PURE__ */ jsx("div", { ref, className: cn("p-4 space-y-1", className), ...props, children });
+  }
+);
+TerminalBody.displayName = "Terminal.Body";
+var TerminalLine = React14.forwardRef(
+  ({ className, prompt = "$", output = false, highlight = false, children, ...props }, ref) => {
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref,
+        className: cn(
+          "flex items-start gap-2",
+          highlight && "bg-[var(--neutral-3)] -mx-2 px-2 py-0.5 rounded",
+          className
+        ),
+        ...props,
+        children: [
+          !output && /* @__PURE__ */ jsx("span", { className: "text-emerald-400 shrink-0 select-none", children: prompt }),
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: cn("flex-1", output ? "text-[var(--neutral-9)]" : "text-[var(--neutral-11)]"),
+              children
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+TerminalLine.displayName = "Terminal.Line";
+var Terminal = Object.assign(TerminalRoot, {
+  Header: TerminalHeader,
+  Body: TerminalBody,
+  Line: TerminalLine
+});
+var modifierOrder = ["meta", "shift", "alt", "ctrl"];
+var appleModifierSymbols = {
+  meta: "\u2318",
+  shift: "\u21E7",
+  alt: "\u2325",
+  ctrl: "\u2303"
+};
+var otherModifierSymbols = {
+  meta: "Ctrl",
+  shift: "Shift",
+  alt: "Alt",
+  ctrl: "Ctrl"
+};
+var modifierLabels = {
+  meta: "Command or Control",
+  shift: "Shift",
+  alt: "Option or Alt",
+  ctrl: "Control"
+};
+function getClientPlatform() {
+  const platform = window.navigator.platform.toLowerCase();
+  const userAgent = window.navigator.userAgent.toLowerCase();
+  const isApple = /mac|iphone|ipad|ipod/.test(platform) || /mac|iphone|ipad|ipod/.test(userAgent);
+  return isApple ? "apple" : "other";
+}
+function subscribePlatform() {
+  return () => void 0;
+}
+function usePlatform() {
+  return React14.useSyncExternalStore(subscribePlatform, getClientPlatform, () => "apple");
+}
+function normalizeKey(children) {
+  if (typeof children !== "string") {
+    return children;
+  }
+  const trimmed = children.trim();
+  if (/^[a-z]$/.test(trimmed)) {
+    return trimmed.toUpperCase();
+  }
+  return trimmed;
+}
+function getModifierSymbols(platform) {
+  return platform === "apple" ? appleModifierSymbols : otherModifierSymbols;
+}
+var Kbd = React14.forwardRef(
+  ({ meta, shift, alt, ctrl, small, children, className, "aria-label": ariaLabel, ...props }, ref) => {
+    const platform = usePlatform();
+    const symbols = getModifierSymbols(platform);
+    const activeModifiers = modifierOrder.filter((modifier) => {
+      if (modifier === "meta") return meta;
+      if (modifier === "shift") return shift;
+      if (modifier === "alt") return alt;
+      return ctrl;
+    });
+    const normalizedKey = normalizeKey(children);
+    const visualParts = [
+      ...activeModifiers.map((modifier) => symbols[modifier]),
+      normalizedKey
+    ].filter(Boolean);
+    const accessibleName = ariaLabel ?? [
+      ...activeModifiers.map((modifier) => modifierLabels[modifier]),
+      typeof normalizedKey === "string" ? normalizedKey : void 0
+    ].filter(Boolean).join(" ");
+    return /* @__PURE__ */ jsx(
+      "kbd",
+      {
+        ref,
+        "aria-label": accessibleName || void 0,
+        className: cn(
+          "inline-flex select-none items-center justify-center gap-0.5 rounded-[var(--radius-sm)] border border-border bg-muted font-mono font-medium leading-none text-muted-foreground tabular-nums",
+          small ? "min-h-4 min-w-4 px-1 py-0 text-xs" : "min-h-5 min-w-5 px-1.5 py-0.5 text-xs",
+          className
+        ),
+        ...props,
+        children: visualParts.join("")
+      }
+    );
+  }
+);
+Kbd.displayName = "Kbd";
+function computeInitials(user) {
+  if (user.initials && user.initials.trim().length > 0) {
+    return user.initials.toUpperCase().slice(0, 2);
+  }
+  const source = (user.name ?? "").trim() || (user.email ?? "").trim();
+  if (!source) return "?";
+  const tokens = source.split(/\s+/).filter(Boolean);
+  if (tokens.length >= 2) {
+    const first = tokens[0]?.[0] ?? "";
+    const second = tokens[1]?.[0] ?? "";
+    return (first + second).toUpperCase();
+  }
+  return source.slice(0, 2).toUpperCase();
+}
+function DefaultTrigger({ user }) {
+  const initials2 = computeInitials(user);
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      "aria-label": "Open user menu",
+      className: cn(
+        "inline-flex h-8 w-8 shrink-0 items-center justify-center overflow-hidden rounded-full",
+        "outline-none transition-all hover:opacity-90",
+        "focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background",
+        "hover:ring-1 hover:ring-border"
+      ),
+      children: /* @__PURE__ */ jsxs(Avatar, { size: "sm", children: [
+        user.avatarUrl ? /* @__PURE__ */ jsx(AvatarImage, { src: user.avatarUrl, alt: user.name }) : null,
+        /* @__PURE__ */ jsx(AvatarFallback, { size: "sm", className: "bg-[image:var(--brand-gradient)] text-white", children: initials2 })
+      ] })
+    }
+  );
+}
+function UserMenuItemContent({ item }) {
+  const Icon = item.icon;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    Icon ? /* @__PURE__ */ jsx(Icon, { className: "mr-2 h-4 w-4 shrink-0", "aria-hidden": true }) : null,
+    /* @__PURE__ */ jsx("span", { className: "flex-1 truncate", children: item.label }),
+    item.shortcut ? /* @__PURE__ */ jsx(Kbd, { className: "ml-2", small: true, children: item.shortcut }) : null
+  ] });
+}
+function UserMenu(props) {
+  const {
+    user,
+    groups,
+    workspaceSlot,
+    renderTrigger,
+    renderLink,
+    className,
+    align = "end"
+  } = props;
+  const initials2 = computeInitials(user);
+  return /* @__PURE__ */ jsxs(DropdownMenu, { children: [
+    /* @__PURE__ */ jsx(DropdownMenuTrigger, { asChild: true, children: renderTrigger ? renderTrigger(user) : /* @__PURE__ */ jsx(DefaultTrigger, { user }) }),
+    /* @__PURE__ */ jsxs(DropdownMenuContent, { align, sideOffset: 8, className: cn("w-[280px] p-1", className), children: [
+      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 p-3", children: [
+        /* @__PURE__ */ jsxs(Avatar, { size: "md", children: [
+          user.avatarUrl ? /* @__PURE__ */ jsx(AvatarImage, { src: user.avatarUrl, alt: user.name }) : null,
+          /* @__PURE__ */ jsx(AvatarFallback, { size: "md", className: "bg-[image:var(--brand-gradient)] text-white", children: initials2 })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-1 flex-col", children: [
+          /* @__PURE__ */ jsx("span", { className: "truncate text-sm font-medium text-foreground", children: user.name }),
+          user.email ? /* @__PURE__ */ jsx("span", { className: "truncate text-xs text-muted-foreground", children: user.email }) : null
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx(DropdownMenuSeparator, {}),
+      workspaceSlot ? /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx("div", { className: "px-1 py-1", children: workspaceSlot }),
+        /* @__PURE__ */ jsx(DropdownMenuSeparator, {})
+      ] }) : null,
+      groups.map((group, groupIndex) => {
+        const isLastGroup = groupIndex === groups.length - 1;
+        return /* @__PURE__ */ jsxs(React14.Fragment, { children: [
+          group.label ? /* @__PURE__ */ jsx("div", { className: "px-2 py-1 text-xs font-medium uppercase tracking-wider text-muted-foreground", children: group.label }) : null,
+          group.items.map((item) => {
+            const itemClassName = cn(
+              "flex w-full cursor-pointer items-center",
+              item.destructive && "text-destructive focus:bg-destructive focus:text-destructive-foreground data-[highlighted]:bg-destructive data-[highlighted]:text-destructive-foreground"
+            );
+            if (item.href && !item.disabled) {
+              const linkContent = /* @__PURE__ */ jsx(UserMenuItemContent, { item });
+              const linkElement = renderLink ? renderLink({ href: item.href, children: linkContent }) : /* @__PURE__ */ jsx("a", { href: item.href, children: linkContent });
+              return /* @__PURE__ */ jsx(
+                DropdownMenuItem,
+                {
+                  className: itemClassName,
+                  onClick: item.onSelect,
+                  render: linkElement
+                },
+                item.id
+              );
+            }
+            return /* @__PURE__ */ jsx(
+              DropdownMenuItem,
+              {
+                className: itemClassName,
+                disabled: item.disabled,
+                onClick: () => {
+                  if (!item.disabled) item.onSelect?.();
+                },
+                children: /* @__PURE__ */ jsx(UserMenuItemContent, { item })
+              },
+              item.id
+            );
+          }),
+          !isLastGroup ? /* @__PURE__ */ jsx(DropdownMenuSeparator, {}) : null
+        ] }, group.id);
+      })
+    ] })
+  ] });
+}
+UserMenu.displayName = "UserMenu";
+function getInitials(workspace) {
+  if (workspace.initials) return workspace.initials.slice(0, 2).toUpperCase();
+  const trimmed = workspace.name.trim();
+  if (!trimmed) return "??";
+  const parts = trimmed.split(/\s+/).filter(Boolean);
+  if (parts.length >= 2) {
+    return `${parts[0][0] ?? ""}${parts[1][0] ?? ""}`.toUpperCase();
+  }
+  return trimmed.slice(0, 2).toUpperCase();
+}
+function roleLabel(role) {
+  switch (role) {
+    case "owner":
+      return "Owner";
+    case "admin":
+      return "Admin";
+    case "member":
+      return "Member";
+    case "guest":
+      return "Guest";
+  }
+}
+function WorkspaceAvatar({ workspace, size = "sm", className }) {
+  const initials2 = getInitials(workspace);
+  return /* @__PURE__ */ jsxs(Avatar, { size, className: cn("rounded-md", className), children: [
+    workspace.avatarUrl && /* @__PURE__ */ jsx(AvatarImage, { src: workspace.avatarUrl, alt: workspace.name, className: "rounded-md" }),
+    /* @__PURE__ */ jsx(
+      AvatarFallback,
+      {
+        size,
+        className: "rounded-md bg-[image:var(--brand-gradient)] text-white font-semibold",
+        children: initials2
+      }
+    )
+  ] });
+}
+var TriggerButton = React14.forwardRef(
+  ({ activeWorkspace, variant, showRoleBadge, disabled, className }, ref) => {
+    const isOwner = activeWorkspace.role === "owner";
+    if (variant === "compact") {
+      return /* @__PURE__ */ jsxs(
+        "button",
+        {
+          ref,
+          type: "button",
+          "aria-label": "Switch workspace",
+          disabled,
+          className: cn(
+            "inline-flex items-center gap-1 rounded-md p-1 outline-none transition-colors",
+            "hover:bg-accent hover:text-accent-foreground",
+            "focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1",
+            "disabled:cursor-not-allowed disabled:opacity-50",
+            className
+          ),
+          children: [
+            /* @__PURE__ */ jsx(WorkspaceAvatar, { workspace: activeWorkspace, size: "sm" }),
+            /* @__PURE__ */ jsx(ChevronUpDown, { "aria-hidden": "true", className: "h-3.5 w-3.5 text-muted-foreground" })
+          ]
+        }
+      );
+    }
+    return /* @__PURE__ */ jsxs(
+      "button",
+      {
+        ref,
+        type: "button",
+        "aria-label": "Switch workspace",
+        disabled,
+        className: cn(
+          "inline-flex w-full items-center gap-2 rounded-md border border-border bg-background px-2 py-1 text-left outline-none transition-colors",
+          "hover:bg-accent hover:text-accent-foreground",
+          "focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1",
+          "disabled:cursor-not-allowed disabled:opacity-50",
+          className
+        ),
+        children: [
+          /* @__PURE__ */ jsx(WorkspaceAvatar, { workspace: activeWorkspace, size: "sm" }),
+          /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-1 items-center gap-2", children: [
+            /* @__PURE__ */ jsx("span", { className: "truncate font-medium text-[13px] text-foreground", children: activeWorkspace.name }),
+            showRoleBadge && isOwner && /* @__PURE__ */ jsx(Badge, { variant: "owner", size: "sm", children: "Owner" })
+          ] }),
+          /* @__PURE__ */ jsx(ChevronUpDown, { "aria-hidden": "true", className: "size-3.5 shrink-0 text-muted-foreground" })
+        ]
+      }
+    );
+  }
+);
+TriggerButton.displayName = "WorkspaceSwitcherTrigger";
+function WorkspaceItem({ workspace, isActive, onSelect }) {
+  return /* @__PURE__ */ jsxs(
+    DropdownMenuItem,
+    {
+      onClick: onSelect,
+      "aria-current": isActive ? "true" : void 0,
+      className: "flex items-center gap-2 py-1.5",
+      children: [
+        /* @__PURE__ */ jsx(WorkspaceAvatar, { workspace, size: "sm" }),
+        /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-1 flex-col", children: [
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: cn(
+                "truncate text-sm text-foreground",
+                isActive ? "font-semibold" : "font-medium"
+              ),
+              children: workspace.name
+            }
+          ),
+          workspace.plan && /* @__PURE__ */ jsxs("span", { className: "truncate text-xs text-muted-foreground", children: [
+            workspace.plan,
+            workspace.role && workspace.role !== "owner" ? ` \xB7 ${roleLabel(workspace.role)}` : ""
+          ] }),
+          !workspace.plan && workspace.role && /* @__PURE__ */ jsx("span", { className: "truncate text-xs text-muted-foreground", children: roleLabel(workspace.role) })
+        ] }),
+        isActive && /* @__PURE__ */ jsx(Check, { "aria-hidden": "true", className: "ml-auto h-4 w-4 shrink-0 text-foreground" })
+      ]
+    }
+  );
+}
+function WorkspaceSwitcher({
+  workspaces,
+  activeWorkspaceId,
+  onSwitch,
+  variant = "expanded",
+  footerSlot,
+  headerSlot,
+  className,
+  showRoleBadge = true,
+  disabled = false
+}) {
+  const activeWorkspace = workspaces.find((ws) => ws.id === activeWorkspaceId) ?? workspaces[0];
+  const handleSelect = (id) => {
+    const result = onSwitch(id);
+    if (result instanceof Promise) {
+      result.catch((err) => {
+        console.error("WorkspaceSwitcher.onSwitch failed:", err);
+      });
+    }
+  };
+  if (!activeWorkspace) {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: cn(
+          "inline-flex items-center gap-2 rounded-md border border-dashed border-border px-2 py-1.5 text-sm text-muted-foreground",
+          className
+        ),
+        children: "No workspaces"
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs(DropdownMenu, { children: [
+    /* @__PURE__ */ jsx(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsx(
+      TriggerButton,
+      {
+        activeWorkspace,
+        variant,
+        showRoleBadge,
+        disabled,
+        className
+      }
+    ) }),
+    /* @__PURE__ */ jsxs(
+      DropdownMenuContent,
+      {
+        align: "start",
+        sideOffset: 6,
+        className: "w-[min(20rem,calc(100vw-2rem))] p-1",
+        children: [
+          headerSlot && /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx("div", { className: "px-2 py-1.5", children: headerSlot }),
+            /* @__PURE__ */ jsx(DropdownMenuSeparator, {})
+          ] }),
+          /* @__PURE__ */ jsx("div", { className: "px-2 py-1.5 text-xs font-medium uppercase tracking-wider text-muted-foreground", children: "Workspaces" }),
+          /* @__PURE__ */ jsx("div", { className: "max-h-72 overflow-y-auto", children: workspaces.map((ws) => /* @__PURE__ */ jsx(
+            WorkspaceItem,
+            {
+              workspace: ws,
+              isActive: ws.id === activeWorkspaceId,
+              onSelect: () => handleSelect(ws.id)
+            },
+            ws.id
+          )) }),
+          footerSlot && /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx(DropdownMenuSeparator, {}),
+            /* @__PURE__ */ jsx("div", { className: "px-1 py-0.5", children: footerSlot })
+          ] })
+        ]
+      }
+    )
+  ] });
+}
+
+export { Card, CardBody, CardDescription, CardFooter, CardHeader, CardIcon, CardRoot, CardTitle, CommandBox, GalleryCard, MarkdownEditor, MarkdownRenderer, QAPage, SidebarNav, Terminal, TerminalBody, TerminalHeader, TerminalLine, TerminalRoot, UserInfo, UserMenu, VoteButtons, WorkspaceSwitcher };
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map