@nebutra/ui 0.2.1 → 0.2.3

package/dist/patterns/index.js

@@ -1,26 +1,135 @@
 "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 { jsx, jsxs, Fragment as Fragment$1 } from 'react/jsx-runtime';
+import * as React from 'react';
+import { useState, useRef, useCallback, useMemo, Fragment, isValidElement } from 'react';
+import { Check, Copy, Pencil, FileText, TextBold, TextItalic, Code, Hash, ListUnordered, Link, Image, ChevronUp, ChevronDown, Calendar, Eye, Bookmark, StarFill, Share, Flag, ChevronUpDown, Pin, ChevronRight, 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 { Tabs as Tabs$1 } from '@base-ui/react/tabs';
 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';
+import { useReducedMotion, AnimatePresence, motion } from 'framer-motion';
 
-// src/patterns/Card/Card.tsx
+// src/utils/cn.ts
 function cn(...inputs) {
   return twMerge(clsx(inputs));
 }
-var CardContext = React14.createContext(null);
+function ArtifactShiftCard({
+  className,
+  contentClassName,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "group/card relative flex h-full min-h-[560px] flex-col overflow-hidden rounded-[var(--radius-panel)] border bg-background/90 transition-[transform,border-color,box-shadow] duration-500 ease-[cubic-bezier(0.23,1,0.32,1)] hover:-translate-y-1 hover:border-foreground/25 hover:shadow-ambient-lg focus-within:-translate-y-1 focus-within:border-foreground/25",
+        className
+      ),
+      "data-taste": "nebutra-shift-card",
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            "aria-hidden": "true",
+            className: "pointer-events-none absolute inset-0 bg-[radial-gradient(circle_at_1px_1px,var(--neutral-8)_1px,transparent_0)] bg-[length:22px_22px] opacity-[0.09]"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            "aria-hidden": "true",
+            className: "pointer-events-none absolute inset-x-0 top-0 h-32 bg-gradient-to-b from-primary/10 via-primary/5 to-transparent opacity-80"
+          }
+        ),
+        /* @__PURE__ */ jsx("div", { className: cn("relative flex h-full flex-col p-4 sm:p-5", contentClassName), children })
+      ]
+    }
+  );
+}
+function ArtifactShiftCardPreview({
+  filename,
+  language,
+  code,
+  label,
+  maxLines = 8,
+  signals = ["typed", "scoped", "ready"],
+  className,
+  ...props
+}) {
+  const lines = code.split("\n").slice(0, maxLines);
+  return /* @__PURE__ */ jsxs(
+    "section",
+    {
+      "aria-label": label,
+      className: cn(
+        "relative min-h-[260px] overflow-hidden rounded-[var(--radius-xl)] border border-border/60 bg-background/80 p-3 shadow-ambient-sm transition-[transform,border-color,box-shadow] duration-500 ease-[cubic-bezier(0.23,1,0.32,1)] group-hover/card:-translate-y-1 group-hover/card:border-foreground/20 group-hover/card:shadow-ambient-md group-focus-within/card:-translate-y-1 group-focus-within/card:border-foreground/20 sm:p-4",
+        className
+      ),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            "aria-hidden": "true",
+            className: "pointer-events-none absolute inset-0 bg-[radial-gradient(circle_at_1px_1px,var(--neutral-7)_1px,transparent_0)] bg-[length:18px_18px] opacity-[0.16]"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            "aria-hidden": "true",
+            className: "pointer-events-none absolute inset-x-0 top-0 h-24 bg-gradient-to-b from-primary/10 to-transparent opacity-80"
+          }
+        ),
+        /* @__PURE__ */ jsxs("div", { className: "relative flex items-center justify-between gap-3 rounded-[var(--radius-md)] border border-border/60 bg-background/85 px-3 py-2", children: [
+          /* @__PURE__ */ jsx("span", { className: "min-w-0 truncate font-mono text-[11px] text-foreground/80", translate: "no", children: filename }),
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: "rounded-full border border-border/70 bg-muted/40 px-2 py-0.5 font-mono text-[10px] text-muted-foreground uppercase",
+              translate: "no",
+              children: language
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "relative mt-3 space-y-1.5 rounded-[var(--radius-lg)] border border-border/50 bg-muted/25 p-3 font-mono text-[11px] leading-5", children: lines.map((line, index) => /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 gap-3", children: [
+          /* @__PURE__ */ jsx("span", { className: "w-5 shrink-0 text-right text-muted-foreground/55 tabular-nums", children: index + 1 }),
+          /* @__PURE__ */ jsx("code", { className: "min-w-0 truncate text-foreground/75", translate: "no", children: line || " " })
+        ] }, `${line}-${index}`)) }),
+        /* @__PURE__ */ jsx("div", { className: "relative mt-3 grid grid-cols-3 gap-2", children: signals.map((signal) => /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: "rounded-[var(--radius-md)] border border-border/55 bg-background/75 px-2 py-1.5 text-center font-mono text-[10px] text-muted-foreground uppercase tracking-[0.14em]",
+            children: signal
+          },
+          signal
+        )) })
+      ]
+    }
+  );
+}
+function ArtifactShiftCardFooter({ className, ...props }) {
+  return /* @__PURE__ */ jsx(
+    "footer",
+    {
+      className: cn(
+        "relative mt-4 flex flex-wrap items-center justify-between gap-3 rounded-[var(--radius-xl)] border border-border/60 bg-background/85 px-4 py-3 shadow-ambient-sm backdrop-blur-xl transition-[transform,border-color,box-shadow] duration-500 ease-[cubic-bezier(0.23,1,0.32,1)] group-hover/card:-translate-y-2 group-hover/card:border-foreground/20 group-hover/card:shadow-ambient-md group-focus-within/card:-translate-y-2 group-focus-within/card:border-foreground/20",
+        className
+      ),
+      ...props
+    }
+  );
+}
+var CardContext = React.createContext(null);
 var paddingMap = {
   none: "",
   sm: "p-4",
@@ -34,14 +143,14 @@ var variantStyles = {
   ghost: "bg-transparent",
   gradient: "bg-gradient-to-br from-card to-muted border border-border"
 };
-var CardRoot = React14.forwardRef(
+var CardRoot = React.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",
+          "rounded-[var(--radius-xl)] transition-[background-color,border-color,box-shadow,color] duration-micro",
           variantStyles[variant],
           paddingMap[padding],
           className
@@ -53,26 +162,26 @@ var CardRoot = React14.forwardRef(
   }
 );
 CardRoot.displayName = "Card";
-var CardHeader = React14.forwardRef(
+var CardHeader = React.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(
+var CardBody = React.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(
+var CardFooter = React.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(
+var CardIcon = React.forwardRef(
   ({ className, size = "md", children, ...props }, ref) => {
     const sizeMap = {
       sm: "w-8 h-8",
@@ -95,14 +204,14 @@ var CardIcon = React14.forwardRef(
   }
 );
 CardIcon.displayName = "Card.Icon";
-var CardTitle = React14.forwardRef(
+var CardTitle = React.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(
+var CardDescription = React.forwardRef(({ className, as: Tag = "p", children, ...props }, ref) => {
+  return React.createElement(
     Tag,
     {
       ref,
@@ -121,7 +230,7 @@ var Card = Object.assign(CardRoot, {
   Title: CardTitle,
   Description: CardDescription
 });
-var CommandBox = React14.forwardRef(
+var CommandBox = React.forwardRef(
   ({
     className,
     command,
@@ -131,20 +240,23 @@ var CommandBox = React14.forwardRef(
     onCopy,
     ...props
   }, ref) => {
-    const [copied, setCopied] = React14.useState(false);
-    const handleCopy = React14.useCallback(async () => {
+    const [copied, setCopied] = React.useState(false);
+    const handleCopy = React.useCallback(async () => {
       try {
         await navigator.clipboard.writeText(command);
         setCopied(true);
         onCopy?.();
         setTimeout(() => setCopied(false), 2e3);
-      } catch (_err) {
+      } catch (err) {
+        if (process.env.NODE_ENV !== "production") {
+          console.error("[CommandBox] clipboard write failed:", 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"
+      default: "bg-muted border border-border rounded-[var(--radius-lg)]",
+      minimal: "bg-background border border-border rounded-[var(--radius-md)]",
+      pill: "bg-muted border border-border rounded-full"
     };
     return (
       // biome-ignore lint/a11y/useSemanticElements: ARIA pattern
@@ -153,7 +265,7 @@ var CommandBox = React14.forwardRef(
         {
           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)]",
+            "group relative flex items-center gap-3 px-4 py-2.5 font-mono text-sm cursor-pointer transition-colors hover:bg-muted",
             variantStyles3[variant],
             className
           ),
@@ -170,13 +282,13 @@ var CommandBox = React14.forwardRef(
           ...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 }),
+            /* @__PURE__ */ jsx("span", { className: "flex-1 text-muted-foreground 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)]"
+                  copied ? "text-emerald-400" : "text-muted-foreground group-hover:text-muted-foreground"
                 ),
                 children: copied ? /* @__PURE__ */ jsx(CopiedIcon, { className: "w-4 h-4" }) : /* @__PURE__ */ jsx(CopyIcon, { className: "w-4 h-4" })
               }
@@ -185,7 +297,7 @@ var CommandBox = React14.forwardRef(
               "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",
+                  "absolute -top-8 left-1/2 -translate-x-1/2 px-2 py-1 text-xs rounded bg-zinc-700 text-muted-foreground opacity-0 transition-opacity pointer-events-none",
                   "group-hover:opacity-100",
                   copied && "opacity-100"
                 ),
@@ -236,13 +348,139 @@ function CopiedIcon({ className }) {
     }
   );
 }
+var metricToneClasses = {
+  neutral: "bg-muted/70 text-muted-foreground ring-border",
+  blue: "bg-info/10 text-info ring-info/20",
+  green: "bg-success/10 text-success ring-success/20",
+  amber: "bg-warning/10 text-warning ring-warning/20"
+};
+function DashboardCommandSurface({
+  status,
+  title,
+  description,
+  actions,
+  children,
+  className
+}) {
+  return /* @__PURE__ */ jsxs(
+    "section",
+    {
+      "data-pattern": "nebutra-dashboard-command",
+      className: cn(
+        "relative overflow-hidden rounded-[var(--radius-lg)] border border-border bg-card p-4 text-card-foreground shadow-sm",
+        "before:pointer-events-none before:absolute before:inset-x-0 before:top-0 before:h-px before:bg-[linear-gradient(90deg,transparent,hsl(var(--primary)/0.58),transparent)]",
+        "after:pointer-events-none after:absolute after:inset-0 after:bg-[radial-gradient(circle_at_top_left,hsl(var(--primary)/0.08),transparent_42%)]",
+        "sm:p-5",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "relative z-10 flex flex-col gap-4 lg:flex-row lg:items-end lg:justify-between", children: [
+          /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
+            status ? /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+              /* @__PURE__ */ jsx("span", { className: "size-1.5 rounded-full bg-success shadow-[0_0_0_3px_hsl(var(--success)/0.18)]" }),
+              /* @__PURE__ */ jsx("p", { className: "text-[11px] font-medium uppercase text-muted-foreground", children: status })
+            ] }) : null,
+            /* @__PURE__ */ jsx("h1", { className: "mt-2 text-2xl font-semibold tracking-normal text-card-foreground sm:text-[28px]", children: title }),
+            description ? /* @__PURE__ */ jsx("p", { className: "mt-2 max-w-2xl text-[13px] leading-5 text-muted-foreground", children: description }) : null
+          ] }),
+          actions ? /* @__PURE__ */ jsx("div", { className: "flex shrink-0 flex-wrap items-center gap-1.5", children: actions }) : null
+        ] }),
+        children ? /* @__PURE__ */ jsx("div", { className: "relative z-10 mt-4", children }) : null
+      ]
+    }
+  );
+}
+function DashboardPanel({
+  title,
+  description,
+  meta,
+  action,
+  children,
+  className,
+  headerClassName
+}) {
+  return /* @__PURE__ */ jsxs(
+    "section",
+    {
+      "data-pattern": "nebutra-dashboard-panel",
+      className: cn(
+        "rounded-[var(--radius-lg)] border border-border bg-card p-3.5 text-card-foreground shadow-sm sm:p-4",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: cn(
+              "mb-3 flex flex-col gap-2.5 border-b border-border pb-3 lg:flex-row lg:items-start lg:justify-between",
+              headerClassName
+            ),
+            children: [
+              /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
+                /* @__PURE__ */ jsx("h2", { className: "text-sm font-semibold tracking-normal text-card-foreground", children: title }),
+                description ? /* @__PURE__ */ jsx("p", { className: "mt-0.5 text-xs leading-5 text-muted-foreground", children: description }) : null
+              ] }),
+              (meta || action) && /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-wrap items-center gap-2 lg:justify-end", children: [
+                meta,
+                action
+              ] })
+            ]
+          }
+        ),
+        children
+      ]
+    }
+  );
+}
+function DashboardMetricTile({
+  label,
+  value,
+  detail,
+  source,
+  icon: Icon,
+  tone = "neutral",
+  className
+}) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "data-pattern": "nebutra-dashboard-metric",
+      className: cn(
+        "group h-full rounded-[var(--radius-lg)] border border-border bg-muted/40 p-3 transition-colors duration-micro",
+        "hover:border-muted-foreground/30 hover:bg-muted/65",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-2", children: [
+          /* @__PURE__ */ jsx("span", { className: "min-w-0 truncate text-xs font-medium text-muted-foreground", children: label }),
+          Icon ? /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: cn(
+                "inline-flex size-6 shrink-0 items-center justify-center rounded-[var(--radius-sm)] ring-1",
+                metricToneClasses[tone]
+              ),
+              children: /* @__PURE__ */ jsx(Icon, { className: "size-3.5", "aria-hidden": true })
+            }
+          ) : null
+        ] }),
+        /* @__PURE__ */ jsx("p", { className: "mt-2 text-2xl font-semibold tabular-nums tracking-normal text-card-foreground", children: value }),
+        (detail || source) && /* @__PURE__ */ jsxs("div", { className: "mt-1.5 space-y-0.5 text-xs leading-5 text-muted-foreground", children: [
+          detail ? /* @__PURE__ */ jsx("span", { className: "block", children: detail }) : null,
+          source ? /* @__PURE__ */ jsx("span", { className: "block text-[11px] text-muted-foreground/70", children: source }) : null
+        ] })
+      ]
+    }
+  );
+}
 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",
+  "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 border border-transparent",
   {
     variants: {
       variant: {
         // ─── Semantic / brand variants ────────────────────────────────────────
-        default: "border-transparent bg-primary text-primary-foreground hover:bg-primary/80",
+        // Recipe-driven default (solid | outline | … via --badge-default-*)
+        default: "badge-brand-default border",
         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",
@@ -250,32 +488,43 @@ var badgeVariants = cva(
         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) ─────────
+        // ─── Palette accents (decorative scale — not product chrome CTAs) ────
+        gray: "bg-muted text-muted-foreground fill-current",
+        "gray-subtle": "bg-muted/60 text-muted-foreground fill-current border-transparent",
+        blue: "bg-primary text-primary-foreground fill-current",
+        "blue-subtle": "bg-primary/10 text-primary fill-current border-transparent",
+        purple: "bg-secondary text-secondary-foreground fill-current",
+        "purple-subtle": "bg-secondary/40 text-secondary-foreground fill-current border-transparent",
+        amber: "bg-warning text-warning-foreground fill-current",
+        "amber-subtle": (
+          // --warning is a FILL (2.13:1). As ink on its own tint it measured 1.91:1.
+          // --warning-strong is the AA-safe amber foreground: 5.01:1 light / 6.20:1 dark.
+          "bg-warning/10 text-[hsl(var(--warning-strong))] fill-current border-transparent"
+        ),
+        red: "bg-destructive text-destructive-foreground fill-current",
+        "red-subtle": (
+          // --destructive is fill-only in dark (2.01:1 as ink on its own tint).
+          // --destructive-strong: 4.58:1 light / 4.97:1 dark.
+          "bg-destructive/10 text-[hsl(var(--destructive-strong))] fill-current border-transparent"
+        ),
+        pink: "bg-accent text-accent-foreground fill-current",
+        "pink-subtle": "bg-accent/40 text-accent-foreground fill-current border-transparent",
+        green: "bg-success text-success-foreground fill-current",
+        "green-subtle": (
+          // --success-strong closes the 4.49:1 light gap: 4.99:1 light / 4.83:1 dark.
+          "bg-success/10 text-[hsl(var(--success-strong))] fill-current border-transparent"
+        ),
+        teal: "bg-info text-info-foreground fill-current",
+        "teal-subtle": "bg-info/10 text-info fill-current border-transparent",
+        inverted: "bg-foreground text-background fill-current",
+        // Special visual treatments (intentional product design, not brand hex)
+        trial: "bg-gradient-to-br from-trial-start to-trial-end text-primary-foreground fill-current",
+        turbo: "bg-gradient-to-br from-turbo-start to-turbo-end text-primary-foreground fill-current",
+        pill: "bg-background text-foreground fill-foreground border-border hover:bg-muted/50 focus-visible:bg-muted/50",
         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",
+        new: "border-transparent bg-primary/10 text-primary",
         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)]",
+        featured: "badge-brand-default border [text-shadow:0_0_1px_hsl(var(--background)/0.2)]",
         "coming-soon": "border-transparent bg-muted/60 text-muted-foreground italic"
       },
       size: {
@@ -296,15 +545,16 @@ var dotColorMap = {
   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",
+  "gray-subtle": "bg-muted-foreground",
+  "green-subtle": "bg-success",
+  "amber-subtle": "bg-warning",
+  "red-subtle": "bg-destructive",
+  "blue-subtle": "bg-primary",
+  "purple-subtle": "bg-secondary-foreground",
+  "pink-subtle": "bg-accent-foreground",
+  "teal-subtle": "bg-info",
+  default: "bg-brand-mark-foreground",
+  featured: "bg-brand-mark-foreground",
   secondary: "bg-secondary-foreground",
   outline: "bg-muted-foreground"
 };
@@ -319,7 +569,7 @@ function Badge({
   ...props
 }) {
   const badgeClassName = cn(badgeVariants({ variant, size }), className);
-  const renderContent = (label) => /* @__PURE__ */ jsxs(Fragment, { children: [
+  const renderContent = (label) => /* @__PURE__ */ jsxs(Fragment$1, { children: [
     dot && /* @__PURE__ */ jsx(
       "span",
       {
@@ -334,11 +584,11 @@ function Badge({
     label
   ] });
   if (asChild) {
-    const childArray = React14.Children.toArray(children);
+    const childArray = React.Children.toArray(children);
     const child = childArray.length === 1 ? childArray[0] : null;
-    if (React14.isValidElement(child)) {
+    if (React.isValidElement(child)) {
       const childProps = child.props;
-      return React14.cloneElement(child, {
+      return React.cloneElement(child, {
         ...props,
         ...childProps,
         "data-slot": "badge",
@@ -350,133 +600,244 @@ function Badge({
   }
   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 }
-      }
-    );
+({
+  // 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)"
   }
-);
-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" })
-    ]
+};
+var primitiveFocusRing = {
+  width: 2,
+  // px
+  offset: 2
+  // px — gap between element and ring
+};
+
+// src/tokens/shadows.ts
+var shadowClasses = {
+  md: "shadow-md",
+  xl: "shadow-xl"};
+var overlayZIndex = {
+  popover: 1060,
+  tooltip: 1070
+};
+var overlayClassNames = {
+  menuSurface: [
+    "min-w-32 overflow-hidden rounded-[var(--radius-lg)] border border-border/70 bg-popover/95 p-1 text-popover-foreground backdrop-blur-md",
+    shadowClasses.xl,
+    "outline-none transition-[opacity,transform,display] duration-[var(--motion-duration-flow)] ease-[var(--ease-out)]",
+    "data-[starting-style]:scale-95 data-[starting-style]:opacity-0 data-[ending-style]:scale-95 data-[ending-style]:opacity-0",
+    "motion-reduce:transition-none motion-reduce:data-[starting-style]:transform-none motion-reduce:data-[ending-style]:transform-none"
+  ].join(" "),
+  tooltipSurface: [
+    "overflow-hidden rounded-[var(--radius-md)] border border-border/70 bg-popover/95 px-3 py-1.5 text-sm text-popover-foreground backdrop-blur-md",
+    shadowClasses.md,
+    "transition-[opacity,transform,display] duration-[var(--motion-duration-flow)] ease-[var(--ease-out)]",
+    "data-starting-style:scale-95 data-starting-style:opacity-0 data-ending-style:scale-95 data-ending-style:opacity-0",
+    "motion-reduce:transition-none motion-reduce:data-starting-style:transform-none motion-reduce:data-ending-style:transform-none"
+  ].join(" ")};
+
+// src/primitives/overlay.ts
+var menuItemBaseClassName = [
+  "relative flex cursor-default select-none items-center rounded-[var(--radius-sm)] px-2 py-1.5 text-sm",
+  "outline-none transition-colors duration-micro ease-out",
+  "data-[disabled]:pointer-events-none data-[disabled]:opacity-60"
+].join(" ");
+var menuHighlightedClassName = "data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground";
+var overlayPrimitiveClassNames = {
+  menuSurface: "rounded-[var(--radius-md)] border-border/70 bg-popover/95 shadow-md",
+  menuItem: [menuItemBaseClassName, menuHighlightedClassName].join(" ")};
+var DropdownMenuContext = React.createContext(null);
+function DropdownMenu({
+  open: controlledOpen,
+  defaultOpen = false,
+  onOpenChange,
+  children,
+  ...props
+}) {
+  const [uncontrolledOpen, setUncontrolledOpen] = React.useState(defaultOpen);
+  const open = controlledOpen ?? uncontrolledOpen;
+  function setOpen(nextOpen, eventDetails) {
+    if (controlledOpen === void 0) {
+      setUncontrolledOpen(nextOpen);
+    }
+    onOpenChange?.(nextOpen, eventDetails);
   }
-));
-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
+  const contextValue = { setOpen };
+  return /* @__PURE__ */ jsx(DropdownMenuContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx(Menu.Root, { open, onOpenChange: setOpen, ...props, children }) });
+}
+DropdownMenu.displayName = "DropdownMenu";
+var DropdownMenuTrigger = ({
+  asChild,
+  children,
+  render,
+  ref,
+  ...props
+}) => {
+  const context = React.use(DropdownMenuContext);
+  function openFromTrigger() {
+    context?.setOpen(true);
   }
-) }) }));
-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,
+  const childRenderElement = asChild && React.isValidElement(children) ? React.cloneElement(children, {
+    onMouseDown: (event) => {
+      children.props.onMouseDown?.(event);
+      if (!event.defaultPrevented) {
+        openFromTrigger();
+      }
+    },
+    onKeyDown: (event) => {
+      children.props.onKeyDown?.(event);
+      if (!event.defaultPrevented && (event.key === "Enter" || event.key === " ")) {
+        openFromTrigger();
+      }
+    }
+  }) : null;
+  const renderElement = childRenderElement ?? render;
+  return /* @__PURE__ */ jsx(
+    Menu.Trigger,
     {
-      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
-        }
-      )
+      ref,
+      render: renderElement,
+      ...renderElement ? props : { ...props, children }
     }
-  ) })
-);
+  );
+};
+DropdownMenuTrigger.displayName = "DropdownMenuTrigger";
+Menu.Group;
+Menu.Portal;
+Menu.SubmenuRoot;
+Menu.RadioGroup;
+var DropdownMenuContent = ({
+  className,
+  style,
+  sideOffset = 4,
+  align = "center",
+  alignOffset = 0,
+  side = "bottom",
+  ref,
+  ...props
+}) => /* @__PURE__ */ jsx(Menu.Portal, { children: /* @__PURE__ */ jsx(
+  Menu.Positioner,
+  {
+    sideOffset,
+    align,
+    alignOffset,
+    side,
+    children: /* @__PURE__ */ jsx(
+      Menu.Popup,
+      {
+        ref,
+        className: cn(
+          overlayClassNames.menuSurface,
+          overlayPrimitiveClassNames.menuSurface,
+          className
+        ),
+        style: { zIndex: overlayZIndex.popover, ...style },
+        ...props
+      }
+    )
+  }
+) });
 DropdownMenuContent.displayName = "DropdownMenuContent";
-var DropdownMenuItem = React14.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ jsx(
+var DropdownMenuItem = ({
+  className,
+  inset,
+  ref,
+  ...props
+}) => /* @__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
-    ),
+    className: cn(overlayPrimitiveClassNames.menuItem, 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(
+var DropdownMenuSeparator = ({
+  className,
+  orientation = "horizontal",
+  ref,
+  ...props
+}) => /* @__PURE__ */ jsx(
   Menu.Separator,
   {
     ref,
@@ -484,7 +845,7 @@ var DropdownMenuSeparator = React14.forwardRef(({ className, orientation = "hori
     className: cn("-mx-1 my-1 h-px bg-muted", className),
     ...props
   }
-));
+);
 DropdownMenuSeparator.displayName = "DropdownMenuSeparator";
 var iconToneStyles = {
   neutral: "bg-muted text-muted-foreground",
@@ -503,15 +864,15 @@ var badgeToneToVariant = {
   "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"
+  "group relative block rounded-[var(--radius-xl)] border border-border bg-card text-card-foreground p-5 text-left",
+  "transition-[border-color,box-shadow,transform] duration-micro motion-reduce:transition-none motion-reduce:transform-none",
+  "hover:border-neutral-7 hover:shadow-sm hover:-translate-y-px motion-reduce:hover:translate-y-0",
+  "focus-visible:outline-none"
 );
 function GalleryCardActionsMenu({ actions, title }) {
-  const stop = React14.useCallback((event) => {
+  function stop(event) {
     event.stopPropagation();
-  }, []);
+  }
   return /* @__PURE__ */ jsx("div", { onClickCapture: stop, onPointerDownCapture: stop, children: /* @__PURE__ */ jsxs(DropdownMenu, { children: [
     /* @__PURE__ */ jsx(
       DropdownMenuTrigger,
@@ -522,10 +883,10 @@ function GalleryCardActionsMenu({ actions, title }) {
             type: "button",
             "aria-label": `Actions for ${title}`,
             className: cn(
-              "inline-flex h-7 w-7 items-center justify-center rounded-md",
+              "inline-flex h-7 w-7 items-center justify-center rounded-[var(--radius-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"
+              "focus-visible:outline-none"
             ),
             children: /* @__PURE__ */ jsx(MoreHorizontal, { className: "h-4 w-4" })
           }
@@ -560,13 +921,13 @@ function GalleryCardBody({
 }) {
   const hasActions = Boolean(actions && actions.length > 0);
   const hasMetadataStrip = Boolean(metadata?.author || metadata?.metric || metadata?.trailing);
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
+  return /* @__PURE__ */ jsxs(Fragment$1, { 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",
+            "flex h-10 w-10 shrink-0 items-center justify-center rounded-[var(--radius-lg)] text-base",
             iconToneStyles[iconTone]
           ),
           "aria-hidden": "true",
@@ -620,36 +981,418 @@ function GalleryCard(props) {
       actions
     }
   );
-  const composedClassName = cn(cardClassName, "cursor-pointer", className);
-  if (href) {
-    if (renderLink) {
-      return renderLink({
-        href,
-        className: composedClassName,
-        "aria-label": title,
-        children: body
-      });
+  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";
+function lineTone(line) {
+  const trimmed = line.trim();
+  if (trimmed.startsWith("//") || trimmed.startsWith("--")) {
+    return "text-muted-foreground/55 italic";
+  }
+  if (/\b(await|const|export|return|CREATE|ALTER|POLICY|USING|ENABLE|TABLE)\b/.test(trimmed)) {
+    return "text-primary font-medium";
+  }
+  if (trimmed.includes(":")) {
+    return "text-emerald-600 dark:text-emerald-400";
+  }
+  return "text-foreground/78";
+}
+function renderIcon(icon) {
+  if (!icon) {
+    return null;
+  }
+  if (typeof icon === "function") {
+    const Icon = icon;
+    return /* @__PURE__ */ jsx(Icon, { "aria-hidden": true, className: "size-7 text-primary" });
+  }
+  if (isValidElement(icon)) {
+    return /* @__PURE__ */ jsx(
+      "span",
+      {
+        "aria-hidden": true,
+        className: "inline-grid place-items-center text-primary [&_svg]:size-7 [&_svg]:text-primary",
+        children: icon
+      }
+    );
+  }
+  return icon;
+}
+function KineticFeatureCard({
+  icon,
+  eyebrow,
+  title,
+  description,
+  children,
+  className,
+  ...props
+}) {
+  const renderedIcon = renderIcon(icon);
+  return /* @__PURE__ */ jsxs(
+    "article",
+    {
+      className: cn(
+        "group/kinetic relative flex h-full min-h-[540px] flex-col overflow-hidden rounded-[var(--radius-panel)] border border-border/65 bg-background/82 p-6 shadow-glass-md backdrop-blur-2xl transition-[transform,border-color,box-shadow,background-color] duration-500 ease-[cubic-bezier(0.23,1,0.32,1)] hover:-translate-y-1 hover:border-foreground/25 hover:bg-background/94 hover:shadow-glass-lg focus-within:-translate-y-1 focus-within:border-foreground/25 sm:p-7",
+        className
+      ),
+      "data-taste": "nebutra-texture-cutout-card",
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            "aria-hidden": "true",
+            className: "pointer-events-none absolute inset-0 bg-[radial-gradient(circle_at_1px_1px,var(--neutral-8)_1px,transparent_0)] bg-[length:18px_18px] opacity-[0.12]"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            "aria-hidden": "true",
+            className: "pointer-events-none absolute inset-x-0 top-0 h-40 bg-gradient-to-b from-primary/12 via-primary/5 to-transparent",
+            style: { maskImage: "linear-gradient(to bottom, black 45%, transparent 100%)" }
+          }
+        ),
+        /* @__PURE__ */ jsx("div", { className: "absolute right-0 top-0 z-10 rounded-bl-[2rem] border-b border-l border-border/60 bg-muted/55 px-4 py-2 backdrop-blur-xl", children: /* @__PURE__ */ jsx("span", { className: "font-mono text-[10px] font-semibold uppercase tracking-[0.18em] text-muted-foreground", children: eyebrow }) }),
+        /* @__PURE__ */ jsxs("div", { className: "relative z-10 flex h-full flex-col", children: [
+          /* @__PURE__ */ jsx("div", { className: "mb-8 flex items-start justify-between gap-4 pr-16", children: renderedIcon && /* @__PURE__ */ jsx("div", { className: "grid size-14 place-items-center rounded-[var(--radius-xl)] border border-border/65 bg-background/75 shadow-glass-sm transition-transform duration-500 group-hover/kinetic:-translate-y-1", children: renderedIcon }) }),
+          /* @__PURE__ */ jsx(
+            "h3",
+            {
+              className: "text-2xl font-semibold text-foreground text-balance",
+              style: { letterSpacing: "var(--tracking-heading)", lineHeight: "var(--leading-heading)" },
+              children: title
+            }
+          ),
+          /* @__PURE__ */ jsx("p", { className: "mt-4 text-base font-medium leading-7 text-muted-foreground text-balance", children: description }),
+          /* @__PURE__ */ jsx("div", { className: "mt-auto pt-8", children })
+        ] })
+      ]
+    }
+  );
+}
+function KineticCodePreview({
+  filename = "artifact.ts",
+  language = "ts",
+  lines,
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "relative overflow-hidden rounded-[var(--radius-xl)] border border-border/60 bg-muted/30 shadow-ambient-md transition-[transform,border-color,box-shadow] duration-500 group-hover/kinetic:-translate-y-2 group-hover/kinetic:border-foreground/20 group-hover/kinetic:shadow-ambient-lg",
+        className
+      ),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 border-b border-border/60 bg-background/70 px-4 py-3 backdrop-blur-xl", children: [
+          /* @__PURE__ */ jsx("span", { className: "size-2.5 rounded-full bg-border/90", "aria-hidden": true }),
+          /* @__PURE__ */ jsx("span", { className: "size-2.5 rounded-full bg-border/80", "aria-hidden": true }),
+          /* @__PURE__ */ jsx("span", { className: "size-2.5 rounded-full bg-border/70", "aria-hidden": true }),
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: "ml-3 min-w-0 truncate font-mono text-[11px] text-muted-foreground",
+              translate: "no",
+              children: filename
+            }
+          ),
+          /* @__PURE__ */ jsx("span", { className: "ml-auto rounded-full border border-border/60 bg-background/60 px-2 py-0.5 font-mono text-[10px] uppercase text-muted-foreground", children: language })
+        ] }),
+        /* @__PURE__ */ jsx("pre", { className: "relative max-h-[190px] overflow-hidden p-4 font-mono text-[12px] leading-5", children: lines.map((line, index) => /* @__PURE__ */ jsxs("span", { className: "flex min-w-0 gap-3", children: [
+          /* @__PURE__ */ jsx("span", { className: "w-5 shrink-0 text-right text-muted-foreground/45 tabular-nums", children: index + 1 }),
+          /* @__PURE__ */ jsx("code", { className: cn("min-w-0 truncate", lineTone(line)), translate: "no", children: line || " " })
+        ] }, `${line}-${index}`)) })
+      ]
+    }
+  );
+}
+function KineticConsoleFrame({
+  title = "operator@nebutra-sailor: ~",
+  status,
+  children,
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "group/kinetic relative flex h-full min-h-[460px] w-full flex-col overflow-hidden rounded-[2rem] border border-border/65 bg-background/84 shadow-glass-md backdrop-blur-3xl transition-[transform,border-color,box-shadow] duration-500 hover:-translate-y-1 hover:border-foreground/25 hover:shadow-glass-lg",
+        className
+      ),
+      "data-taste": "nebutra-terminal-animation",
+      ...props,
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex h-14 flex-none items-center gap-4 border-b border-border/60 bg-background/70 px-5 backdrop-blur-xl", children: [
+          /* @__PURE__ */ jsxs("div", { className: "flex gap-2", "aria-hidden": true, children: [
+            /* @__PURE__ */ jsx("span", { className: "size-3 rounded-full border border-border/80 bg-muted shadow-sm transition-colors group-hover/kinetic:bg-red-400/80" }),
+            /* @__PURE__ */ jsx("span", { className: "size-3 rounded-full border border-border/80 bg-muted shadow-sm transition-colors group-hover/kinetic:bg-amber-400/80" }),
+            /* @__PURE__ */ jsx("span", { className: "size-3 rounded-full border border-border/80 bg-muted shadow-sm transition-colors group-hover/kinetic:bg-emerald-400/80" })
+          ] }),
+          /* @__PURE__ */ jsx("div", { className: "min-w-0 flex-1 text-center", children: /* @__PURE__ */ jsx("span", { className: "inline-flex max-w-full items-center rounded-[var(--radius-md)] border border-border/50 bg-muted/35 px-4 py-1 font-mono text-[10px] font-semibold uppercase tracking-[0.16em] text-muted-foreground", children: /* @__PURE__ */ jsx("span", { className: "truncate", translate: "no", children: title }) }) }),
+          /* @__PURE__ */ jsx("div", { className: "hidden min-w-20 justify-end sm:flex", children: status && /* @__PURE__ */ jsx("span", { className: "rounded-full border border-border/55 bg-background/65 px-2 py-0.5 font-mono text-[10px] uppercase text-muted-foreground", children: status }) })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "relative flex-1 overflow-hidden bg-gradient-to-br from-background/55 via-background/25 to-muted/28 p-6 sm:p-8", children: [
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              "aria-hidden": "true",
+              className: "pointer-events-none absolute inset-0 bg-[linear-gradient(to_right,var(--neutral-6)_1px,transparent_1px),linear-gradient(to_bottom,var(--neutral-6)_1px,transparent_1px)] bg-[size:16px_24px] opacity-45"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              "aria-hidden": "true",
+              className: "pointer-events-none absolute inset-x-0 bottom-0 h-28 bg-gradient-to-t from-background/80 to-transparent"
+            }
+          ),
+          /* @__PURE__ */ jsx("div", { className: "relative z-10 h-full w-full", children })
+        ] })
+      ]
+    }
+  );
+}
+function KineticMorphSurface({
+  activeKey,
+  className,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "group/kinetic relative overflow-hidden rounded-[var(--radius-panel)] border border-border/65 bg-background/80 p-3 shadow-glass-md backdrop-blur-2xl transition-[border-color,box-shadow,background-color] duration-500 hover:border-foreground/20 hover:bg-background/92 hover:shadow-glass-lg sm:p-4 lg:p-5",
+        className
+      ),
+      "data-active-key": activeKey,
+      "data-taste": "nebutra-morph-surface",
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            "aria-hidden": "true",
+            className: "pointer-events-none absolute inset-0 bg-[radial-gradient(circle_at_1px_1px,var(--neutral-8)_1px,transparent_0)] bg-[length:20px_20px] opacity-[0.10]"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            "aria-hidden": "true",
+            className: "pointer-events-none absolute inset-x-0 top-0 h-36 bg-gradient-to-b from-primary/12 via-primary/4 to-transparent",
+            style: { maskImage: "linear-gradient(to bottom, black 45%, transparent 100%)" }
+          }
+        ),
+        /* @__PURE__ */ jsx("div", { className: "relative z-10", children })
+      ]
+    }
+  );
+}
+function KineticSignalMarquee({
+  eyebrow,
+  className,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "group/kinetic relative mx-auto overflow-hidden rounded-[var(--radius-panel)] border border-border/55 bg-background/72 px-3 py-8 shadow-glass-md backdrop-blur-2xl sm:px-5",
+        className
+      ),
+      "data-taste": "nebutra-provider-grid",
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            "aria-hidden": "true",
+            className: "pointer-events-none absolute inset-0 bg-[linear-gradient(to_right,var(--neutral-6)_1px,transparent_1px),linear-gradient(to_bottom,var(--neutral-6)_1px,transparent_1px)] bg-[size:32px_32px] opacity-25"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            "aria-hidden": "true",
+            className: "pointer-events-none absolute inset-y-0 left-0 w-28 bg-gradient-to-r from-background via-background/90 to-transparent z-20"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            "aria-hidden": "true",
+            className: "pointer-events-none absolute inset-y-0 right-0 w-28 bg-gradient-to-l from-background via-background/90 to-transparent z-20"
+          }
+        ),
+        eyebrow && /* @__PURE__ */ jsx("div", { className: "relative z-30 mb-6 text-center font-mono text-[10px] font-semibold uppercase tracking-[0.2em] text-muted-foreground", children: eyebrow }),
+        /* @__PURE__ */ jsx("div", { className: "relative z-10", children })
+      ]
+    }
+  );
+}
+function KineticCommandBox({
+  command,
+  copyLabel,
+  copiedLabel,
+  className,
+  ...props
+}) {
+  const [copied, setCopied] = useState(false);
+  const handleCopy = async () => {
+    await navigator.clipboard.writeText(command);
+    setCopied(true);
+    window.setTimeout(() => setCopied(false), 2e3);
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "group/kinetic relative flex flex-col items-stretch overflow-hidden rounded-[var(--radius-xl)] border border-border/65 bg-background/82 p-1.5 shadow-glass-sm backdrop-blur-2xl transition-[transform,border-color,box-shadow,background-color] duration-500 hover:-translate-y-1 hover:border-foreground/25 hover:bg-background/92 hover:shadow-glass-md sm:flex-row sm:items-center",
+        className
+      ),
+      "data-taste": "nebutra-texture-command",
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            "aria-hidden": "true",
+            className: "pointer-events-none absolute inset-0 bg-[radial-gradient(circle_at_1px_1px,var(--neutral-8)_1px,transparent_0)] bg-[length:16px_16px] opacity-[0.10]"
+          }
+        ),
+        /* @__PURE__ */ jsxs("code", { className: "relative z-10 flex-1 overflow-x-auto whitespace-nowrap px-4 py-3.5 font-mono text-xs text-foreground sm:px-5 sm:text-sm md:text-base", children: [
+          /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: "$" }),
+          " ",
+          command
+        ] }),
+        /* @__PURE__ */ jsxs(
+          "button",
+          {
+            type: "button",
+            onClick: handleCopy,
+            className: "relative z-10 mt-2 flex shrink-0 cursor-pointer items-center justify-center gap-2 rounded-[var(--radius-lg)] border border-primary/20 bg-foreground px-5 py-2.5 text-sm font-medium text-background shadow-sheen transition-[transform,opacity] hover:-translate-y-px hover:opacity-90 sm:mt-0",
+            children: [
+              copied ? /* @__PURE__ */ jsx(Check, { className: "size-4" }) : /* @__PURE__ */ jsx(Copy, { className: "size-4" }),
+              copied ? copiedLabel : copyLabel
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+function KineticStepRail({ className, children, ...props }) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "relative overflow-hidden rounded-[var(--radius-panel)] border border-border/65 bg-background/78 p-6 shadow-glass-md backdrop-blur-2xl md:p-10",
+        className
+      ),
+      "data-taste": "nebutra-grid-beam",
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            "aria-hidden": "true",
+            className: "pointer-events-none absolute inset-0 bg-[linear-gradient(to_right,var(--neutral-6)_1px,transparent_1px),linear-gradient(to_bottom,var(--neutral-6)_1px,transparent_1px)] bg-[size:36px_36px] opacity-30"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            "aria-hidden": "true",
+            className: "pointer-events-none absolute left-8 right-8 top-[5.7rem] hidden h-px bg-gradient-to-r from-transparent via-primary/45 to-transparent md:block"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            "aria-hidden": "true",
+            className: "pointer-events-none absolute left-1/2 top-8 bottom-8 w-px -translate-x-1/2 bg-gradient-to-b from-transparent via-primary/35 to-transparent md:hidden"
+          }
+        ),
+        /* @__PURE__ */ jsx("div", { className: "relative z-10", children })
+      ]
+    }
+  );
+}
+function KineticStep({
+  icon: Icon,
+  index,
+  title,
+  description,
+  phaseLabel,
+  className,
+  ...props
+}) {
+  const formatted = String(index).padStart(2, "0");
+  return /* @__PURE__ */ jsxs(
+    "article",
+    {
+      className: cn(
+        "group/kinetic relative flex h-full flex-col items-center rounded-[var(--radius-xl)] border border-border/60 bg-background/82 p-5 text-center shadow-ambient-md backdrop-blur-xl transition-[transform,border-color,box-shadow] duration-500 hover:-translate-y-1 hover:border-foreground/25 hover:shadow-ambient-lg",
+        className
+      ),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "relative mb-6 grid size-16 place-items-center rounded-[var(--radius-xl)] border border-border/65 bg-background shadow-glass-sm", children: [
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: "absolute -right-2 -top-2 rounded-full border border-border/60 bg-muted px-2 py-0.5 font-mono text-[10px] text-muted-foreground",
+              "aria-hidden": true,
+              children: formatted
+            }
+          ),
+          Icon && /* @__PURE__ */ jsx(
+            Icon,
+            {
+              "aria-hidden": true,
+              className: "size-7 text-primary transition-colors group-hover/kinetic:text-foreground"
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx("span", { className: "mb-4 rounded-full border border-primary/20 bg-primary/7 px-3 py-1 font-mono text-[10px] font-semibold uppercase tracking-[0.16em] text-primary", children: phaseLabel ?? `Phase ${formatted}` }),
+        /* @__PURE__ */ jsx("h3", { className: "text-lg font-semibold text-foreground", children: title }),
+        /* @__PURE__ */ jsx("p", { className: "mt-3 text-sm leading-6 text-muted-foreground text-balance", children: description })
+      ]
     }
-    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(
+var Slot = React.forwardRef(
   ({ children, className, style, ...props }, ref) => {
-    const childArray = React14.Children.toArray(children);
+    const childArray = React.Children.toArray(children);
     const child = childArray.length === 1 ? childArray[0] : null;
-    if (child == null || !React14.isValidElement(child)) {
+    if (child == null || !React.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;
+      const childRef = childProps.ref;
       if (typeof childRef === "function") childRef(node);
       else if (childRef && "current" in childRef) {
         childRef.current = node;
@@ -663,7 +1406,7 @@ var Slot = React14.forwardRef(
       className: mergedClass,
       style: { ...childProps.style, ...style }
     };
-    return React14.cloneElement(
+    return React.cloneElement(
       child,
       merged
     );
@@ -673,17 +1416,18 @@ 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",
+    "rounded-[var(--btn-default-radius,var(--radius-md))]",
+    "text-[length:var(--control-font-size-md,0.875rem)] font-[number:var(--font-weight-medium,500)]",
+    "transition-colors duration-micro ease-out",
     "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",
+        // Recipe-driven via packages/design/tokens/recipe.css (.btn-brand-default)
+        default: "btn-brand-default",
+        ink: "bg-[var(--neutral-12)] text-[var(--neutral-1)] ring-1 ring-inset ring-[color:var(--neutral-1)]/5 hover:bg-[var(--neutral-11)] hover:-translate-y-px active:translate-y-0 transition-[transform,background-color] duration-micro",
         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",
@@ -693,34 +1437,99 @@ var buttonVariants = cva(
         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)
+        tiny: "h-[var(--control-height-tiny,1.5rem)] rounded-[var(--radius-sm)] px-2 text-[length:var(--control-font-size-tiny,0.6875rem)]",
+        sm: "h-[var(--control-height-sm,2rem)] rounded-[var(--radius-sm)] px-3 text-[length:var(--control-font-size-sm,0.75rem)]",
+        default: "h-[var(--control-height-md,2.5rem)] px-[var(--btn-default-padding-x,1rem)] py-[var(--btn-default-padding-y,0.5rem)]",
+        lg: "h-[var(--control-height-lg,3rem)] rounded-[var(--radius-lg)] px-5 text-[length:var(--control-font-size-lg,1rem)]",
+        icon: "h-[var(--control-height-md,2.5rem)] w-[var(--control-height-md,2.5rem)]"
       },
       shape: {
         default: "",
-        square: "",
-        circle: ""
+        // Radius from --btn-default-radius / --radius-md — brand-switchable.
+        // Do not hardcode rounded-md here; a language must be able to retarget
+        // the corner treatment of every icon trigger at once.
+        square: "rounded-[var(--btn-default-radius,var(--radius-md))]",
+        // Pill radius token, not Tailwind rounded-full — same 9999px default,
+        // but a brand that ships a softer "circle" can override --radius-pill.
+        circle: "rounded-[var(--radius-pill,9999px)]",
+        pill: "rounded-[var(--radius-pill,9999px)]"
+      },
+      // Icon-only box size — orthogonal to `size` (which tunes text-button
+      // height/padding/font together) and to `shape` (which picks the
+      // corner treatment). Only takes effect combined with shape="square"
+      // or shape="circle" (see compoundVariants below); every other
+      // combination ignores it. 28/32/36 cover the icon-trigger sizes that
+      // actually occur in the app — 24/40/48 are already reachable via
+      // shape + size (tiny/default/lg). Heights read --control-height-icon-*
+      // so density-aware Brand Packages can scale them with the ladder.
+      iconSize: {
+        sm: "",
+        // 28px default
+        md: "",
+        // 32px default
+        lg: ""
+        // 36px default
       }
     },
     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" }
+      { shape: "square", size: "tiny", className: "w-[var(--control-height-tiny,1.5rem)] px-0" },
+      { shape: "square", size: "sm", className: "w-[var(--control-height-sm,2rem)] px-0" },
+      { shape: "square", size: "default", className: "w-[var(--control-height-md,2.5rem)] px-0" },
+      { shape: "square", size: "lg", className: "w-[var(--control-height-lg,3rem)] px-0" },
+      {
+        shape: "circle",
+        size: "tiny",
+        className: "w-[var(--control-height-tiny,1.5rem)] px-0"
+      },
+      {
+        shape: "circle",
+        size: "sm",
+        className: "w-[var(--control-height-sm,2rem)] px-0"
+      },
+      {
+        shape: "circle",
+        size: "default",
+        className: "w-[var(--control-height-md,2.5rem)] px-0"
+      },
+      {
+        shape: "circle",
+        size: "lg",
+        className: "w-[var(--control-height-lg,3rem)] px-0"
+      },
+      // iconSize wins over the size-driven box above — matched on shape +
+      // iconSize only, so it applies regardless of whatever `size` was
+      // passed (or left at its "default" fallback). Corner treatment stays
+      // on the shape variant (token-backed); only the box is set here.
+      {
+        shape: "square",
+        iconSize: "sm",
+        className: "h-[var(--control-height-icon-sm,1.75rem)] w-[var(--control-height-icon-sm,1.75rem)] px-0"
+      },
+      {
+        shape: "square",
+        iconSize: "md",
+        className: "h-[var(--control-height-icon-md,2rem)] w-[var(--control-height-icon-md,2rem)] px-0"
+      },
+      {
+        shape: "square",
+        iconSize: "lg",
+        className: "h-[var(--control-height-icon-lg,2.25rem)] w-[var(--control-height-icon-lg,2.25rem)] px-0"
+      },
+      {
+        shape: "circle",
+        iconSize: "sm",
+        className: "h-[var(--control-height-icon-sm,1.75rem)] w-[var(--control-height-icon-sm,1.75rem)] px-0"
+      },
+      {
+        shape: "circle",
+        iconSize: "md",
+        className: "h-[var(--control-height-icon-md,2rem)] w-[var(--control-height-icon-md,2rem)] px-0"
+      },
+      {
+        shape: "circle",
+        iconSize: "lg",
+        className: "h-[var(--control-height-icon-lg,2.25rem)] w-[var(--control-height-icon-lg,2.25rem)] px-0"
+      }
     ],
     defaultVariants: {
       variant: "default",
@@ -741,7 +1550,10 @@ function Spinner({ className }) {
     }
   );
 }
-function getIconSizeClass(size) {
+function getIconSizeClass(size, iconSize) {
+  if (iconSize === "sm") return "[&>svg]:size-3.5";
+  if (iconSize === "md") return "[&>svg]:size-3.5";
+  if (iconSize === "lg") return "[&>svg]:size-4";
   switch (size) {
     case "tiny":
       return "[&>svg]:size-3";
@@ -756,7 +1568,10 @@ function getIconSizeClass(size) {
       return "[&>svg]:size-4";
   }
 }
-function getSpinnerSizeClass(size) {
+function getSpinnerSizeClass(size, iconSize) {
+  if (iconSize === "sm") return "size-3.5";
+  if (iconSize === "md") return "size-3.5";
+  if (iconSize === "lg") return "size-4";
   switch (size) {
     case "tiny":
       return "size-3";
@@ -774,182 +1589,64 @@ function getSpinnerSizeClass(size) {
 var SHADOW_CLASSES = {
   sm: "shadow-sm",
   md: "shadow-md",
-  lg: "shadow-lg"
+  lg: "shadow-md"
 };
 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) }),
+function ButtonContent({ loading, prefix, suffix, size, iconSize, children }) {
+  const iconSizeClass = getIconSizeClass(size, iconSize);
+  return /* @__PURE__ */ jsxs(Fragment$1, { children: [
+    loading && /* @__PURE__ */ jsx(Spinner, { className: getSpinnerSizeClass(size, iconSize) }),
     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
+var Button = ({
+  className,
+  variant,
+  size,
+  shape,
+  iconSize,
+  asChild = false,
+  loading = false,
+  disabled,
+  prefix,
+  suffix,
+  shadow,
+  children,
+  ref,
+  ...props
+}) => {
+  const Comp = asChild ? Slot : "button";
+  const isDisabled = Boolean(disabled || loading);
+  const shadowClass = resolveShadowClass(shadow);
+  return /* @__PURE__ */ jsx(
+    Comp,
+    {
+      ref,
+      className: cn(buttonVariants({ variant, size, shape, iconSize }), shadowClass, className),
+      disabled: isDisabled,
+      "aria-busy": loading || void 0,
+      ...props,
+      children: asChild ? children : /* @__PURE__ */ jsx(
+        ButtonContent,
+        {
+          loading,
+          prefix,
+          suffix,
+          size,
+          iconSize,
+          children
+        }
+      )
+    }
+  );
 };
+Button.displayName = "Button";
 
 // src/tokens/components/tabs.ts
 var tabsSizes = {
@@ -1012,6 +1709,10 @@ var tabsTokens = {
 };
 
 // src/utils/primitive-props.ts
+function asPlainStyle(style) {
+  if (style == null || typeof style === "function") return {};
+  return style;
+}
 function withHtmlProps(Component) {
   return Component;
 }
@@ -1030,8 +1731,13 @@ var Tooltip = ({
   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)) {
+var TooltipTrigger = ({
+  asChild,
+  children,
+  ref,
+  ...props
+}) => {
+  if (asChild && React.isValidElement(children)) {
     return /* @__PURE__ */ jsx(
       Tooltip$1.Trigger,
       {
@@ -1042,31 +1748,36 @@ var TooltipTrigger = React14.forwardRef(({ asChild, children, ...props }, ref) =
     );
   }
   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
-        }
-      )
-    }
-  ) })
-);
+var TooltipContent = ({
+  className,
+  style,
+  side = "top",
+  align = "center",
+  sideOffset = 4,
+  alignOffset = 0,
+  ref,
+  ...props
+}) => /* @__PURE__ */ jsx(Tooltip$1.Portal, { children: /* @__PURE__ */ jsx(
+  Tooltip$1.Positioner,
+  {
+    side,
+    align,
+    sideOffset,
+    alignOffset,
+    style: { zIndex: overlayZIndex.tooltip },
+    children: /* @__PURE__ */ jsx(
+      Tooltip$1.Popup,
+      {
+        ref,
+        className: cn(overlayClassNames.tooltipSurface, className),
+        style: { zIndex: overlayZIndex.tooltip, ...style },
+        ...props
+      }
+    )
+  }
+) });
 TooltipContent.displayName = "TooltipContent";
 var BaseRoot = withHtmlProps(Tabs$1.Root);
 var BaseList = withHtmlProps(Tabs$1.List);
@@ -1112,12 +1823,12 @@ var tabsListVariants = cva(
   }
 );
 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",
+  "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)] 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",
+        button: "border border-border bg-background text-muted-foreground 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"
       }
@@ -1132,7 +1843,7 @@ var tabsIndicatorVariants = cva(
   {
     variants: {
       variant: {
-        default: "z-[-1] rounded-[var(--tabs-trigger-radius)] bg-background shadow-[var(--shadow-xs)]",
+        default: "z-[-1] rounded-[var(--tabs-trigger-radius)] bg-background 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"
@@ -1149,7 +1860,7 @@ var tabsIndicatorVariants = cva(
   }
 );
 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",
+  "mt-[var(--tabs-panel-gap)] text-[length:var(--tabs-font-size)] text-muted-foreground focus-visible:outline-none",
   {
     variants: {
       variant: {
@@ -1161,7 +1872,7 @@ var tabsContentVariants = cva(
     }
   }
 );
-var TabsContext = React14.createContext({
+var TabsContext = React.createContext({
   activationMode: "manual",
   disabled: false,
   shape: "default",
@@ -1191,7 +1902,7 @@ function getTabsStyle(size, style) {
     "--tabs-badge-font-size": `${tabsTokens.badgeFontSize}px`,
     "--tabs-duration": `${tabsTokens.motion.duration}ms`,
     "--tabs-easing": tabsTokens.motion.easing,
-    ...style
+    ...asPlainStyle(style)
   };
 }
 function getFirstEnabledValue(tabs) {
@@ -1219,7 +1930,7 @@ function Tabs({
 }) {
   const rootValue = selected ?? value;
   const rootDefaultValue = defaultValue ?? getFirstEnabledValue(tabs);
-  const context = React14.useMemo(
+  const context = React.useMemo(
     () => ({ activationMode, disabled, shape, size, variant }),
     [activationMode, disabled, shape, size, variant]
   );
@@ -1272,7 +1983,7 @@ function TabsCollection({
       children: tabs.map((tab) => /* @__PURE__ */ jsx(TabsCollectionTrigger, { disabled, tab }, tab.value))
     }
   );
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
+  return /* @__PURE__ */ jsxs(Fragment$1, { 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)
@@ -1305,11 +2016,11 @@ function TabsList({
   children,
   ...props
 }) {
-  const context = React14.useContext(TabsContext);
+  const context = React.use(TabsContext);
   const resolvedVariant = variant ?? context.variant;
   const resolvedShape = shape ?? context.shape;
   const resolvedActivateOnFocus = activateOnFocus ?? context.activationMode === "automatic";
-  const listContext = React14.useMemo(
+  const listContext = React.useMemo(
     () => ({ ...context, shape: resolvedShape, variant: resolvedVariant }),
     [context, resolvedShape, resolvedVariant]
   );
@@ -1346,7 +2057,7 @@ function TabsList({
   ) });
 }
 function TabsTrigger({ badge, children, className, disabled, icon, ...props }) {
-  const context = React14.useContext(TabsContext);
+  const context = React.use(TabsContext);
   const isDisabled = disabled ?? context.disabled;
   return /* @__PURE__ */ jsxs(
     BaseTrigger,
@@ -1403,6 +2114,12 @@ var textareaTokens = {
   labelSize: primitiveFontSize.sm,
   focusRingWidth: 3,
   fieldGap: primitiveSpacing[2] - primitiveSpacing[1] / 2};
+
+// src/primitives/form-control.ts
+var formControlFocusClassNames = {
+  textarea: "outline-none focus:border-ring focus:ring-[length:var(--textarea-focus-ring-width)] focus:ring-ring/30"};
+var formControlInvalidClassNames = {
+  textarea: "aria-invalid:border-destructive/60 aria-invalid:focus:border-destructive aria-invalid:focus:ring-destructive/20"};
 var fieldMessageClassName = "text-xs text-muted-foreground";
 var fieldErrorClassName = "text-xs font-medium text-destructive";
 function getTextareaStyle(size, style) {
@@ -1416,7 +2133,7 @@ function getTextareaStyle(size, style) {
     "--textarea-focus-ring-width": `${textareaTokens.focusRingWidth}px`,
     borderRadius: "var(--textarea-radius)",
     outline: "none",
-    ...style
+    ...asPlainStyle(style)
   };
 }
 function getTextareaFieldStyle() {
@@ -1427,86 +2144,85 @@ function getTextareaFieldStyle() {
 }
 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;
+}
+function isInvalid(error, ariaInvalid) {
+  return error === true || typeof error === "string" || ariaInvalid === true || ariaInvalid === "true";
+}
+var Textarea = ({
+  className,
+  style,
+  size = "md",
+  label,
+  description,
+  error,
+  fieldClassName,
+  id,
+  onChange,
+  onValueChange,
+  "aria-describedby": ariaDescribedBy,
+  "aria-invalid": ariaInvalid,
+  ref,
+  ...props
+}) => {
+  const baseId = React.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 = React.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-xs",
+        "transition-[background-color,border-color,box-shadow,color] duration-micro ease-out placeholder:text-muted-foreground",
+        formControlFocusClassNames.textarea,
+        "disabled:cursor-not-allowed disabled:opacity-50 read-only:cursor-default read-only:bg-muted/70",
+        formControlInvalidClassNames.textarea,
+        className
+      ),
+      ref,
+      id: textareaId,
+      "aria-invalid": resolvedInvalid || void 0,
+      "aria-describedby": describedBy,
+      style: getTextareaStyle(size, style),
+      onChange: handleChange,
+      ...props
     }
-    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 })
-        ]
-      }
-    );
+  );
+  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(
@@ -1665,7 +2381,7 @@ function MarkdownEditor({
               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",
+              className: "resize-none rounded-none border-0 font-mono text-sm shadow-none",
               style: { minHeight }
             }
           ) }),
@@ -1700,53 +2416,41 @@ function ToolbarButton({
     }
   );
 }
-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, {
+var Card2 = ({
+  className,
+  ref,
+  ...props
+}) => /* @__PURE__ */ jsx(
+  "div",
+  {
     ref,
-    className: cn("text-sm text-muted-foreground", className),
+    className: cn(
+      "rounded-[var(--radius-lg)] border border-border bg-card text-card-foreground shadow-sm",
+      className
+    ),
     ...props
-  });
-});
-CardDescription2.displayName = "CardDescription";
-var CardContent = React14.forwardRef(
-  ({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", { ref, className: cn("p-6 pt-0", className), ...props })
+  }
 );
+Card2.displayName = "Card";
+var CardHeader2 = ({
+  className,
+  ref,
+  ...props
+}) => /* @__PURE__ */ jsx("div", { ref, className: cn("flex flex-col space-y-1.5 p-6", className), ...props });
+CardHeader2.displayName = "CardHeader";
+var CardContent = ({
+  className,
+  ref,
+  ...props
+}) => /* @__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(
+var Separator = ({
+  className,
+  orientation = "horizontal",
+  decorative: _decorative = true,
+  ref,
+  ...props
+}) => /* @__PURE__ */ jsx(
   Separator$1,
   {
     ref,
@@ -1758,7 +2462,7 @@ var Separator = React14.forwardRef(({ className, orientation = "horizontal", dec
     ),
     ...props
   }
-));
+);
 Separator.displayName = "Separator";
 var sizeClasses = {
   xs: { root: "h-5 w-5", fallback: "text-[8px]" },
@@ -1768,7 +2472,7 @@ var sizeClasses = {
   xl: { root: "h-20 w-20", fallback: "text-2xl" }
 };
 var numericAvatarClass = "h-[var(--avatar-size)] w-[var(--avatar-size)]";
-var AvatarContext = React14.createContext(null);
+var AvatarContext = React.createContext(null);
 function isPresetSize(size) {
   return typeof size === "string";
 }
@@ -1780,9 +2484,18 @@ function getAvatarFallbackClass(size) {
 }
 function getAvatarStyle(size, style) {
   if (typeof size !== "number") return style;
-  return {
+  const numericVars = {
     "--avatar-size": `${size}px`,
-    "--avatar-font-size": `${Math.max(10, Math.round(size * 0.375))}px`,
+    "--avatar-font-size": `${Math.max(10, Math.round(size * 0.375))}px`
+  };
+  if (typeof style === "function") {
+    return (state) => ({
+      ...numericVars,
+      ...style(state)
+    });
+  }
+  return {
+    ...numericVars,
     ...style
   };
 }
@@ -1800,77 +2513,86 @@ function normalizeAvatarLabel({
 }) {
   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
-      }
-    ) });
-  }
-);
+var Avatar = ({
+  className,
+  size = "md",
+  src,
+  alt,
+  title,
+  letter,
+  username,
+  placeholder,
+  fallbackDelayMs,
+  children,
+  style,
+  ref,
+  ...props
+}) => {
+  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$1, { 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(
+var AvatarImage = ({
+  className,
+  ref,
+  ...props
+}) => /* @__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
-      }
-    );
-  }
 );
+AvatarImage.displayName = "AvatarImage";
+var AvatarFallback = ({
+  className,
+  size,
+  children,
+  "aria-label": ariaLabel,
+  style,
+  ref,
+  ...props
+}) => {
+  const context = React.use(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);
@@ -2048,7 +2770,7 @@ function QAPage({
       return bScore - aScore;
     });
   }, [answers]);
-  return /* @__PURE__ */ jsxs("div", { className: cn("mx-auto w-full max-w-5xl p-4 md:p-6", className), children: [
+  return /* @__PURE__ */ jsxs("div", { className: cn("mx-auto w-full max-w-[var(--container-content)] 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: [
@@ -2113,7 +2835,7 @@ function QAPage({
       " ",
       answers.length === 1 ? "Answer" : "Answers"
     ] }) }),
-    /* @__PURE__ */ jsx("div", { className: "mb-8", children: sortedAnswers.map((answer, index) => /* @__PURE__ */ jsxs(Fragment$1, { children: [
+    /* @__PURE__ */ jsx("div", { className: "mb-8", children: sortedAnswers.map((answer, index) => /* @__PURE__ */ jsxs(Fragment, { 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(
@@ -2213,12 +2935,21 @@ function PostActions({
     /* @__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);
+var CollapsibleContext = React.createContext({});
+var Collapsible = ({
+  className,
+  open: openProp,
+  defaultOpen,
+  onOpenChange,
+  disabled,
+  children,
+  ref,
+  ...props
+}) => {
+  const [uncontrolledOpen, setUncontrolledOpen] = React.useState(defaultOpen || false);
   const isControlled = openProp !== void 0;
   const open = isControlled ? openProp : uncontrolledOpen;
-  const handleOpenChange = React14.useCallback(
+  const handleOpenChange = React.useCallback(
     (nextOpen) => {
       if (!isControlled) {
         setUncontrolledOpen(nextOpen);
@@ -2238,11 +2969,17 @@ var Collapsible = React14.forwardRef(({ className, open: openProp, defaultOpen,
       children
     }
   ) });
-});
+};
 Collapsible.displayName = "Collapsible";
-var CollapsibleTrigger = React14.forwardRef(({ className, asChild, children, ...props }, ref) => {
-  const { open, onOpenChange, disabled } = React14.useContext(CollapsibleContext);
-  const handleClick = React14.useCallback(
+var CollapsibleTrigger = ({
+  className,
+  asChild,
+  children,
+  ref,
+  ...props
+}) => {
+  const { open, onOpenChange, disabled } = React.use(CollapsibleContext);
+  const handleClick = React.useCallback(
     (e) => {
       if (disabled) return;
       onOpenChange?.(!open);
@@ -2250,8 +2987,8 @@ var CollapsibleTrigger = React14.forwardRef(({ className, asChild, children, ...
     },
     [disabled, open, onOpenChange, props.onClick]
   );
-  if (asChild && React14.isValidElement(children)) {
-    return React14.cloneElement(children, {
+  if (asChild && React.isValidElement(children)) {
+    return React.cloneElement(children, {
       ref,
       onClick: handleClick,
       "data-state": open ? "open" : "closed",
@@ -2277,36 +3014,40 @@ var CollapsibleTrigger = React14.forwardRef(({ className, asChild, children, ...
       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 })
+var CollapsibleContent = ({
+  className,
+  children,
+  ref,
+  ...props
+}) => {
+  const { open } = React.use(CollapsibleContext);
+  const shouldReduceMotion = useReducedMotion();
+  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 }
       },
-      "content"
-    ) });
-  }
-);
+      transition: shouldReduceMotion ? { duration: 0 } : { 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_BASE_CLASSES = "group flex min-h-8 items-center gap-2 rounded-[var(--radius-md)] px-2.5 py-1.5 text-[13px] leading-5 transition-[background-color,color,box-shadow,transform]";
+var ITEM_DEFAULT_CLASSES = "text-sidebar-foreground/72 hover:bg-sidebar-accent hover:text-sidebar-accent-foreground";
+var ITEM_ACTIVE_CLASSES = "bg-sidebar-primary text-sidebar-primary-foreground font-medium shadow-sm shadow-sidebar-primary/10 hover:bg-sidebar-primary hover:text-sidebar-primary-foreground";
 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";
+var ICON_CLASSES = "size-4 shrink-0";
 function defaultRenderLink({
   href,
   children,
@@ -2335,12 +3076,12 @@ function ItemContent({
 }) {
   const Icon = item.icon;
   if (collapsed) {
-    return /* @__PURE__ */ jsxs(Fragment, { children: [
+    return /* @__PURE__ */ jsxs(Fragment$1, { children: [
       Icon ? /* @__PURE__ */ jsx(Icon, { className: ICON_CLASSES }) : null,
       /* @__PURE__ */ jsx("span", { className: "sr-only", children: item.label })
     ] });
   }
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
+  return /* @__PURE__ */ jsxs(Fragment$1, { 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,
@@ -2348,7 +3089,7 @@ function ItemContent({
       ChevronRight,
       {
         className: cn(
-          "h-3.5 w-3.5 shrink-0 text-muted-foreground transition-transform",
+          "size-3.5 shrink-0 text-muted-foreground transition-transform",
           chevronOpen && "rotate-90"
         ),
         "aria-hidden": "true"
@@ -2431,11 +3172,22 @@ function ParentItem({
   itemClassName,
   renderLink
 }) {
-  const hasActiveChild = React14.useMemo(
-    () => item.children?.some((c) => c.isActive === true) ?? false,
-    [item.children]
+  const hasActiveChild = item.children?.some((c) => c.isActive === true) ?? false;
+  const [uncontrolledOpen, setUncontrolledOpen] = React.useState(
+    item.isActive === true || hasActiveChild
+  );
+  const isControlled = item.expanded !== void 0 && item.onExpandedChange !== void 0;
+  const open = isControlled ? item.expanded : uncontrolledOpen;
+  const setOpen = React.useCallback(
+    (next) => {
+      if (isControlled) {
+        item.onExpandedChange?.(next);
+      } else {
+        setUncontrolledOpen(next);
+      }
+    },
+    [isControlled, item.onExpandedChange]
   );
-  const [open, setOpen] = React14.useState(item.isActive === true || hasActiveChild);
   if (collapsed) {
     return /* @__PURE__ */ jsx(
       InteractiveItem,
@@ -2491,48 +3243,69 @@ function SidebarNav({
     "nav",
     {
       "aria-label": "Sidebar",
+      "data-ui": "nebutra-sidebar-nav",
       className: cn(
-        "flex h-full flex-col gap-4",
-        collapsed ? "px-2 py-2.5" : "px-2.5 py-3",
+        "flex h-full flex-col",
+        collapsed ? "gap-3 px-2 py-3" : "gap-5 px-3 py-4",
         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
+        /* @__PURE__ */ jsx("div", { className: "flex-1 space-y-4 overflow-y-auto", children: sections.map((section) => {
+          const visibleActions = !collapsed && section.actions && section.actions.length > 0 ? section.actions.slice(0, 3) : null;
+          return /* @__PURE__ */ jsxs("section", { className: "group/section", children: [
+            section.label && !collapsed ? /* @__PURE__ */ jsxs("div", { className: "mb-1.5 flex items-center justify-between px-2.5", children: [
+              /* @__PURE__ */ jsx("span", { className: "text-[10px] font-semibold uppercase tracking-[0.18em] text-sidebar-foreground/45", children: section.label }),
+              visibleActions ? /* @__PURE__ */ jsx("div", { className: "flex items-center gap-0.5 opacity-0 transition-opacity duration-micro group-hover/section:opacity-100 focus-within:opacity-100", children: visibleActions.map((action) => {
+                const ActionIcon = action.icon;
+                const defaultButton = /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    type: "button",
+                    "aria-label": action.label,
+                    title: action.label,
+                    onClick: action.onClick,
+                    className: "inline-flex size-4 items-center justify-center rounded text-sidebar-foreground/50 transition-colors hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:outline-none",
+                    children: /* @__PURE__ */ jsx(ActionIcon, { className: "size-3" })
+                  }
+                );
+                return /* @__PURE__ */ jsx("span", { className: "contents", children: action.render ? action.render(defaultButton) : defaultButton }, action.id);
+              }) }) : null
+            ] }) : 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-sidebar-border pt-3", children: footer }) : null
       ]
     }
   ) });
 }
-var TerminalContext = React14.createContext(null);
+var TerminalContext = React.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)]"
+  default: "bg-muted border border-border",
+  minimal: "bg-background border border-border",
+  glass: "bg-muted backdrop-blur-md border border-border"
 };
-var TerminalRoot = React14.forwardRef(
+var TerminalRoot = React.forwardRef(
   ({ className, variant = "default", children, ...props }, ref) => {
     return /* @__PURE__ */ jsx(TerminalContext.Provider, { value: { variant }, children: /* @__PURE__ */ jsx(
       "div",
@@ -2550,14 +3323,14 @@ var TerminalRoot = React14.forwardRef(
   }
 );
 TerminalRoot.displayName = "Terminal";
-var TerminalHeader = React14.forwardRef(
+var TerminalHeader = React.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)]",
+          "flex items-center gap-2 px-4 py-3 border-b border-border bg-muted",
           className
         ),
         ...props,
@@ -2567,7 +3340,7 @@ var TerminalHeader = React14.forwardRef(
             /* @__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 }),
+          title && /* @__PURE__ */ jsx("span", { className: "ml-2 text-xs text-muted-foreground", children: title }),
           children
         ]
       }
@@ -2575,13 +3348,13 @@ var TerminalHeader = React14.forwardRef(
   }
 );
 TerminalHeader.displayName = "Terminal.Header";
-var TerminalBody = React14.forwardRef(
+var TerminalBody = React.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(
+var TerminalLine = React.forwardRef(
   ({ className, prompt = "$", output = false, highlight = false, children, ...props }, ref) => {
     return /* @__PURE__ */ jsxs(
       "div",
@@ -2589,19 +3362,13 @@ var TerminalLine = React14.forwardRef(
         ref,
         className: cn(
           "flex items-start gap-2",
-          highlight && "bg-[var(--neutral-3)] -mx-2 px-2 py-0.5 rounded",
+          highlight && "bg-muted -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
-            }
-          )
+          /* @__PURE__ */ jsx("span", { className: cn("flex-1", output ? "text-muted-foreground" : "text-muted-foreground"), children })
         ]
       }
     );
@@ -2642,7 +3409,7 @@ function subscribePlatform() {
   return () => void 0;
 }
 function usePlatform() {
-  return React14.useSyncExternalStore(subscribePlatform, getClientPlatform, () => "apple");
+  return React.useSyncExternalStore(subscribePlatform, getClientPlatform, () => "apple");
 }
 function normalizeKey(children) {
   if (typeof children !== "string") {
@@ -2657,41 +3424,50 @@ function normalizeKey(children) {
 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("")
-      }
-    );
-  }
-);
+var Kbd = ({
+  meta,
+  shift,
+  alt,
+  ctrl,
+  small,
+  children,
+  className,
+  "aria-label": ariaLabel,
+  ref,
+  ...props
+}) => {
+  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) {
@@ -2716,20 +3492,20 @@ function DefaultTrigger({ user }) {
       "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",
+        "outline-none transition-[box-shadow,opacity] hover:opacity-90",
+        "",
         "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 })
+        /* @__PURE__ */ jsx(AvatarFallback, { size: "sm", className: "bg-primary text-white", children: initials2 })
       ] })
     }
   );
 }
 function UserMenuItemContent({ item }) {
   const Icon = item.icon;
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
+  return /* @__PURE__ */ jsxs(Fragment$1, { 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
@@ -2752,7 +3528,7 @@ function UserMenu(props) {
       /* @__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__ */ jsx(AvatarFallback, { size: "md", className: "bg-primary 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 }),
@@ -2760,13 +3536,13 @@ function UserMenu(props) {
         ] })
       ] }),
       /* @__PURE__ */ jsx(DropdownMenuSeparator, {}),
-      workspaceSlot ? /* @__PURE__ */ jsxs(Fragment, { children: [
+      workspaceSlot ? /* @__PURE__ */ jsxs(Fragment$1, { 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: [
+        return /* @__PURE__ */ jsxs(React.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(
@@ -2812,7 +3588,7 @@ function getInitials(workspace) {
   if (!trimmed) return "??";
   const parts = trimmed.split(/\s+/).filter(Boolean);
   if (parts.length >= 2) {
-    return `${parts[0][0] ?? ""}${parts[1][0] ?? ""}`.toUpperCase();
+    return `${parts[0]?.[0] ?? ""}${parts[1]?.[0] ?? ""}`.toUpperCase();
   }
   return trimmed.slice(0, 2).toUpperCase();
 }
@@ -2830,43 +3606,35 @@ function roleLabel(role) {
 }
 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" }),
+  return /* @__PURE__ */ jsxs(Avatar, { size, className: cn("rounded-[var(--radius-md)]", className), children: [
+    workspace.avatarUrl && /* @__PURE__ */ jsx(
+      AvatarImage,
+      {
+        src: workspace.avatarUrl,
+        alt: workspace.name,
+        className: "rounded-[var(--radius-md)]"
+      }
+    ),
     /* @__PURE__ */ jsx(
       AvatarFallback,
       {
         size,
-        className: "rounded-md bg-[image:var(--brand-gradient)] text-white font-semibold",
+        className: "rounded-[var(--radius-md)] bg-primary 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" })
-          ]
-        }
-      );
-    }
+function TriggerButton({
+  activeWorkspace,
+  variant,
+  showRoleBadge,
+  disabled,
+  className,
+  ref
+}) {
+  const isOwner = activeWorkspace.role === "owner";
+  if (variant === "compact") {
     return /* @__PURE__ */ jsxs(
       "button",
       {
@@ -2875,24 +3643,44 @@ var TriggerButton = React14.forwardRef(
         "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",
+          "inline-flex items-center gap-1 rounded-[var(--radius-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__ */ 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" })
+          /* @__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-[var(--radius-md)] border border-border bg-background px-2 py-1 text-left outline-none transition-colors",
+        "hover:bg-accent hover:text-accent-foreground",
+        "",
+        "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(
@@ -2950,7 +3738,7 @@ function WorkspaceSwitcher({
       "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",
+          "inline-flex items-center gap-2 rounded-[var(--radius-md)] border border-dashed border-border px-2 py-1.5 text-sm text-muted-foreground",
           className
         ),
         children: "No workspaces"
@@ -2975,7 +3763,7 @@ function WorkspaceSwitcher({
         sideOffset: 6,
         className: "w-[min(20rem,calc(100vw-2rem))] p-1",
         children: [
-          headerSlot && /* @__PURE__ */ jsxs(Fragment, { children: [
+          headerSlot && /* @__PURE__ */ jsxs(Fragment$1, { children: [
             /* @__PURE__ */ jsx("div", { className: "px-2 py-1.5", children: headerSlot }),
             /* @__PURE__ */ jsx(DropdownMenuSeparator, {})
           ] }),
@@ -2989,7 +3777,7 @@ function WorkspaceSwitcher({
             },
             ws.id
           )) }),
-          footerSlot && /* @__PURE__ */ jsxs(Fragment, { children: [
+          footerSlot && /* @__PURE__ */ jsxs(Fragment$1, { children: [
             /* @__PURE__ */ jsx(DropdownMenuSeparator, {}),
             /* @__PURE__ */ jsx("div", { className: "px-1 py-0.5", children: footerSlot })
           ] })
@@ -2999,6 +3787,6 @@ function WorkspaceSwitcher({
   ] });
 }
 
-export { Card, CardBody, CardDescription, CardFooter, CardHeader, CardIcon, CardRoot, CardTitle, CommandBox, GalleryCard, MarkdownEditor, MarkdownRenderer, QAPage, SidebarNav, Terminal, TerminalBody, TerminalHeader, TerminalLine, TerminalRoot, UserInfo, UserMenu, VoteButtons, WorkspaceSwitcher };
+export { ArtifactShiftCard, ArtifactShiftCardFooter, ArtifactShiftCardPreview, Card, CardBody, CardDescription, CardFooter, CardHeader, CardIcon, CardRoot, CardTitle, CommandBox, DashboardCommandSurface, DashboardMetricTile, DashboardPanel, GalleryCard, KineticCodePreview, KineticCommandBox, KineticConsoleFrame, KineticFeatureCard, KineticMorphSurface, KineticSignalMarquee, KineticStep, KineticStepRail, MarkdownEditor, MarkdownRenderer, QAPage, SidebarNav, Terminal, TerminalBody, TerminalHeader, TerminalLine, TerminalRoot, UserInfo, UserMenu, VoteButtons, WorkspaceSwitcher };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map