@nebutra/ui 0.2.3 → 3.0.0

package/dist/patterns/index.js

@@ -1,13 +1,14 @@
 "use client";
 import { clsx } from 'clsx';
-import { twMerge } from 'tailwind-merge';
-import { jsx, jsxs, Fragment as Fragment$1 } from 'react/jsx-runtime';
-import * as React from 'react';
+import { extendTailwindMerge } from 'tailwind-merge';
+import { jsxs, jsx, Fragment as Fragment$1 } from 'react/jsx-runtime';
+import { cva } from 'class-variance-authority';
+import * as React10 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 { colors } from '@nebutra/brand';
+import { tokenColor, fontStack } from '@nebutra/tokens/values';
 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';
@@ -17,6 +18,80 @@ import { Avatar as Avatar$1 } from '@base-ui/react/avatar';
 import { useReducedMotion, AnimatePresence, motion } from 'framer-motion';
 
 // src/utils/cn.ts
+
+// src/utils/tw-merge-theme.generated.ts
+var TW_MERGE_THEME = {
+  breakpoint: ["3xl", "shell", "tight", "xs"],
+  container: ["content", "text", "wide"],
+  ease: ["brand", "in", "in-out", "out", "spring"],
+  font: ["cn", "display", "heading", "mono", "sans"],
+  leading: ["display", "heading"],
+  radius: ["2xl", "3xl", "button", "card", "full", "lg", "md", "none", "panel", "sm", "xl", "xs"],
+  shadow: [
+    "2xl",
+    "ambient-glow",
+    "ambient-lg",
+    "ambient-md",
+    "ambient-sm",
+    "brand",
+    "brand-lg",
+    "glass-lg",
+    "glass-md",
+    "glass-sm",
+    "glow-accent",
+    "glow-accent-lg",
+    "glow-accent-sm",
+    "glow-primary",
+    "lg",
+    "md",
+    "sheen",
+    "sm",
+    "xl",
+    "xs"
+  ],
+  text: [
+    "2xl",
+    "2xs",
+    "3xl",
+    "4xl",
+    "5xl",
+    "6xl",
+    "7xl",
+    "8xl",
+    "9xl",
+    "base",
+    "body",
+    "display",
+    "label",
+    "lg",
+    "meta",
+    "sm",
+    "ui",
+    "xl",
+    "xs"
+  ],
+  tracking: ["display", "heading", "label", "tight"]
+};
+var TW_MERGE_CLASS_GROUPS = {
+  duration: [{ duration: ["cinematic", "flow", "micro", "reveal"] }]
+};
+
+// src/utils/cn.ts
+var twMerge = extendTailwindMerge({
+  extend: {
+    theme: Object.fromEntries(
+      Object.entries(TW_MERGE_THEME).map(([key, values]) => [key, [...values]])
+    ),
+    classGroups: Object.fromEntries(
+      Object.entries(TW_MERGE_CLASS_GROUPS).map(([key, groups]) => [
+        key,
+        groups.map(
+          (group) => Object.fromEntries(Object.entries(group).map(([k, v]) => [k, [...v]]))
+        )
+      ])
+    )
+  }
+});
 function cn(...inputs) {
   return twMerge(clsx(inputs));
 }
@@ -129,108 +204,120 @@ function ArtifactShiftCardFooter({ className, ...props }) {
     }
   );
 }
-var CardContext = React.createContext(null);
-var paddingMap = {
-  none: "",
-  sm: "p-4",
-  md: "p-6",
-  lg: "p-8"
-};
-var variantStyles = {
-  default: "bg-card border border-border",
-  elevated: "bg-card border border-border shadow-lg",
-  bordered: "bg-transparent border-2 border-border",
-  ghost: "bg-transparent",
-  gradient: "bg-gradient-to-br from-card to-muted border border-border"
-};
-var CardRoot = 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-[background-color,border-color,box-shadow,color] duration-micro",
-          variantStyles[variant],
-          paddingMap[padding],
-          className
-        ),
-        ...props,
-        children
+var cardVariants = cva(
+  "rounded-[var(--radius-card,var(--radius-lg))] text-card-foreground transition-[box-shadow,background-color] duration-micro",
+  {
+    variants: {
+      variant: {
+        default: "bg-card shadow-[var(--elevation-card)] ring-1 ring-[var(--edge-soft)]",
+        elevated: "bg-card shadow-ambient-md ring-1 ring-[var(--edge-soft)]",
+        outline: "bg-transparent ring-1 ring-border",
+        ghost: "bg-transparent"
+      },
+      padding: {
+        none: "",
+        sm: "p-4",
+        md: "p-6",
+        lg: "p-8"
+      },
+      interactive: {
+        true: "cursor-pointer hover:shadow-ambient-md",
+        false: ""
       }
-    ) });
-  }
-);
-CardRoot.displayName = "Card";
-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 = React.forwardRef(
-  ({ className, children, ...props }, ref) => {
-    return /* @__PURE__ */ jsx("div", { ref, className: cn("mt-4", className), ...props, children });
-  }
-);
-CardBody.displayName = "Card.Body";
-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 });
+    },
+    defaultVariants: { variant: "default", padding: "none", interactive: false }
   }
 );
-CardFooter.displayName = "Card.Footer";
-var CardIcon = React.forwardRef(
-  ({ className, size = "md", children, ...props }, ref) => {
-    const sizeMap = {
-      sm: "w-8 h-8",
-      md: "w-10 h-10",
-      lg: "w-12 h-12"
-    };
-    return /* @__PURE__ */ jsx(
-      "div",
-      {
-        ref,
-        className: cn(
-          "flex items-center justify-center rounded-[var(--radius-lg)] bg-muted/50 shrink-0",
-          sizeMap[size],
-          className
-        ),
-        ...props,
-        children
-      }
-    );
+var CardPaddedContext = React10.createContext(false);
+var CardRoot = ({
+  className,
+  variant,
+  padding = "none",
+  interactive,
+  ref,
+  ...props
+}) => /* @__PURE__ */ jsx(CardPaddedContext.Provider, { value: padding !== "none", children: /* @__PURE__ */ jsx(
+  "div",
+  {
+    ref,
+    className: cn(cardVariants({ variant, padding, interactive }), className),
+    ...props
   }
-);
-CardIcon.displayName = "Card.Icon";
-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 });
+) });
+CardRoot.displayName = "Card";
+var CardHeader = ({ className, ref, ...props }) => {
+  const padded = React10.use(CardPaddedContext);
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      className: cn("flex flex-col gap-1.5", !padded && "p-6", className),
+      ...props
+    }
+  );
+};
+CardHeader.displayName = "CardHeader";
+var CardTitle = ({ className, as: Tag = "h3", ref, ...props }) => /* @__PURE__ */ jsx(
+  Tag,
+  {
+    ref,
+    className: cn("text-lg font-semibold leading-tight tracking-tight text-foreground", className),
+    ...props
   }
 );
-CardTitle.displayName = "Card.Title";
-var CardDescription = React.forwardRef(({ className, as: Tag = "p", children, ...props }, ref) => {
-  return React.createElement(
-    Tag,
+CardTitle.displayName = "CardTitle";
+var CardDescription = ({ className, as: Tag = "p", ref, ...props }) => React10.createElement(Tag, {
+  ref,
+  className: cn("text-sm leading-relaxed text-muted-foreground", className),
+  ...props
+});
+CardDescription.displayName = "CardDescription";
+var CardContent = ({ className, ref, ...props }) => {
+  const padded = React10.use(CardPaddedContext);
+  return /* @__PURE__ */ jsx("div", { ref, className: cn(padded ? "mt-4 first:mt-0" : "p-6 pt-0", className), ...props });
+};
+CardContent.displayName = "CardContent";
+var CardFooter = ({ className, ref, ...props }) => {
+  const padded = React10.use(CardPaddedContext);
+  return /* @__PURE__ */ jsx(
+    "div",
     {
       ref,
-      className: cn("text-sm text-muted-foreground leading-relaxed", className),
+      className: cn(
+        "flex items-center",
+        padded ? "mt-6 border-t border-border/50 pt-4 first:mt-0" : "p-6 pt-0",
+        className
+      ),
       ...props
-    },
-    children
+    }
   );
-});
-CardDescription.displayName = "Card.Description";
+};
+CardFooter.displayName = "CardFooter";
+var iconSize = { sm: "size-8", md: "size-10", lg: "size-12" };
+var CardIcon = ({ className, size = "md", ref, ...props }) => /* @__PURE__ */ jsx(
+  "div",
+  {
+    ref,
+    className: cn(
+      "flex shrink-0 items-center justify-center rounded-[var(--radius-lg)] bg-muted/50",
+      iconSize[size],
+      className
+    ),
+    ...props
+  }
+);
+CardIcon.displayName = "CardIcon";
 var Card = Object.assign(CardRoot, {
   Header: CardHeader,
-  Body: CardBody,
-  Footer: CardFooter,
-  Icon: CardIcon,
   Title: CardTitle,
-  Description: CardDescription
+  Description: CardDescription,
+  Content: CardContent,
+  Body: CardContent,
+  Footer: CardFooter,
+  Icon: CardIcon
 });
-var CommandBox = React.forwardRef(
+var CardBody = CardContent;
+var CommandBox = React10.forwardRef(
   ({
     className,
     command,
@@ -240,8 +327,8 @@ var CommandBox = React.forwardRef(
     onCopy,
     ...props
   }, ref) => {
-    const [copied, setCopied] = React.useState(false);
-    const handleCopy = React.useCallback(async () => {
+    const [copied, setCopied] = React10.useState(false);
+    const handleCopy = React10.useCallback(async () => {
       try {
         await navigator.clipboard.writeText(command);
         setCopied(true);
@@ -253,7 +340,7 @@ var CommandBox = React.forwardRef(
         }
       }
     }, [command, onCopy]);
-    const variantStyles3 = {
+    const variantStyles2 = {
       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"
@@ -266,7 +353,7 @@ var CommandBox = React.forwardRef(
           ref,
           className: cn(
             "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],
+            variantStyles2[variant],
             className
           ),
           onClick: handleCopy,
@@ -281,14 +368,14 @@ var CommandBox = React.forwardRef(
           "aria-label": `Copy command: ${command}`,
           ...props,
           children: [
-            /* @__PURE__ */ jsx("span", { className: "text-emerald-400 shrink-0 select-none", children: prefix }),
+            /* @__PURE__ */ jsx("span", { className: "text-success-strong shrink-0 select-none", children: prefix }),
             /* @__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-muted-foreground group-hover:text-muted-foreground"
+                  copied ? "text-success-strong" : "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" })
               }
@@ -297,7 +384,7 @@ var CommandBox = React.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-muted-foreground 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-popover text-popover-foreground opacity-0 transition-opacity pointer-events-none",
                   "group-hover:opacity-100",
                   copied && "opacity-100"
                 ),
@@ -351,8 +438,8 @@ 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"
+  green: "bg-success/10 text-success-strong ring-success/20",
+  amber: "bg-warning/10 text-warning-strong ring-warning/20"
 };
 function DashboardCommandSurface({
   status,
@@ -367,25 +454,27 @@ function DashboardCommandSurface({
     {
       "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%)]",
+        // Same surface rails as Card: --radius-card, --edge-soft hairline and
+        // --elevation-card, so a Brand Package retargets a command header and a
+        // card together. The gradient hairline + radial wash that used to sit
+        // here were decoration no language could retarget.
+        "rounded-[var(--radius-card)] bg-card p-4 text-card-foreground shadow-[0_0_0_1px_var(--edge-soft),var(--elevation-card)]",
         "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: "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 })
+              /* @__PURE__ */ jsx("span", { className: "size-1.5 rounded-full bg-success" }),
+              /* @__PURE__ */ jsx("p", { className: "text-xs font-medium uppercase tracking-label 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
+            /* @__PURE__ */ jsx("h1", { className: "mt-2 text-2xl font-semibold tracking-heading text-card-foreground sm:text-3xl", children: title }),
+            description ? /* @__PURE__ */ jsx("p", { className: "mt-2 max-w-2xl text-sm 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
+        children ? /* @__PURE__ */ jsx("div", { className: "mt-4", children }) : null
       ]
     }
   );
@@ -404,7 +493,7 @@ function DashboardPanel({
     {
       "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",
+        "rounded-[var(--radius-card)] bg-card p-3.5 text-card-foreground shadow-[0_0_0_1px_var(--edge-soft),var(--elevation-card)] sm:p-4",
         className
       ),
       children: [
@@ -417,7 +506,7 @@ function DashboardPanel({
             ),
             children: [
               /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
-                /* @__PURE__ */ jsx("h2", { className: "text-sm font-semibold tracking-normal text-card-foreground", children: title }),
+                /* @__PURE__ */ jsx("h2", { className: "text-sm font-semibold 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: [
@@ -446,8 +535,8 @@ function DashboardMetricTile({
     {
       "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",
+        "group h-full rounded-[var(--radius-card)] bg-muted/40 p-3 shadow-[0_0_0_1px_var(--edge-soft)] transition-[background-color,box-shadow] duration-micro",
+        "hover:bg-muted/65 hover:shadow-[0_0_0_1px_var(--edge-medium)]",
         className
       ),
       children: [
@@ -464,10 +553,10 @@ function DashboardMetricTile({
             }
           ) : null
         ] }),
-        /* @__PURE__ */ jsx("p", { className: "mt-2 text-2xl font-semibold tabular-nums tracking-normal text-card-foreground", children: value }),
+        /* @__PURE__ */ jsx("p", { className: "mt-2 text-2xl font-semibold tabular-nums 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
+          source ? /* @__PURE__ */ jsx("span", { className: "block text-xs text-muted-foreground/70", children: source }) : null
         ] })
       ]
     }
@@ -518,8 +607,14 @@ var badgeVariants = cva(
         "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",
+        trial: (
+          // allow-palette: the trial gradient is fixed and vivid in both themes, so its ink is fixed white
+          "bg-gradient-to-br from-trial-start to-trial-end text-white fill-current"
+        ),
+        turbo: (
+          // allow-palette: the turbo gradient is fixed and vivid in both themes, so its ink is fixed white
+          "bg-gradient-to-br from-turbo-start to-turbo-end text-white 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-primary/10 text-primary",
@@ -584,11 +679,11 @@ function Badge({
     label
   ] });
   if (asChild) {
-    const childArray = React.Children.toArray(children);
+    const childArray = React10.Children.toArray(children);
     const child = childArray.length === 1 ? childArray[0] : null;
-    if (React.isValidElement(child)) {
+    if (React10.isValidElement(child)) {
       const childProps = child.props;
-      return React.cloneElement(child, {
+      return React10.cloneElement(child, {
         ...props,
         ...childProps,
         "data-slot": "badge",
@@ -601,7 +696,7 @@ function Badge({
   return /* @__PURE__ */ jsx("span", { "data-slot": "badge", className: badgeClassName, ...props, children: renderContent(children) });
 }
 ({
-  // Nebutra Blue (云毓蓝) — technology & trust — VI: #0033FE
+  // Nebutra Blue (云毓蓝) — technology & trust
   blue50: colors.primary[50],
   blue100: colors.primary[100],
   blue200: colors.primary[200],
@@ -614,7 +709,7 @@ function Badge({
   blue800: colors.primary[800],
   blue900: colors.primary[900],
   blue950: colors.primary[950],
-  // Nebutra Cyan (云毓青) — data flow & intelligence — VI: #0BF1C3
+  // Nebutra Cyan (云毓青) — data flow & intelligence
   cyan50: colors.accent[50],
   cyan100: colors.accent[100],
   cyan200: colors.accent[200],
@@ -639,6 +734,13 @@ function Badge({
   neutral800: colors.neutral[800],
   neutral900: colors.neutral[900],
   neutral950: colors.neutral[950],
+  // deepest — used as dark background
+  // Semantic raw colors — VI §Color Specifications. The 500s are the status
+  // tokens; the 600 hover steps have no token of their own.
+  // NOTE: info = brand blue, not sky/teal
+  red500: tokenColor("--status-danger"),
+  green500: tokenColor("--status-success"),
+  amber500: tokenColor("--status-warning"),
   white: colors.white,
   black: colors.black
 });
@@ -677,6 +779,18 @@ var primitiveFontSize = {
   sm: 14,
   base: 16,
   lg: 18};
+({
+  /** Default body/UI stack — Geist with CJK falling through to MiSans */
+  sans: fontStack("--font-sans"),
+  /** CJK-locale stack (same order as sans, minus Latin-only system faces) */
+  cnSans: fontStack("--font-cn"),
+  /** Display / hero headlines */
+  display: fontStack("--font-display"),
+  /** Headings */
+  heading: fontStack("--font-heading"),
+  /** Code / monospace */
+  mono: fontStack("--font-mono")
+});
 var primitiveTransition = {
   duration: {
     // hover, focus, small state changes
@@ -702,17 +816,18 @@ var overlayZIndex = {
 };
 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",
+    "min-w-32 origin-[var(--transform-origin)] 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",
+    "outline-none transition-[opacity,transform] duration-[var(--motion-duration-flow)] ease-[var(--ease-brand)]",
+    "data-[starting-style]:scale-[0.97] data-[starting-style]:opacity-0 data-ending-style:scale-[0.97] data-ending-style:opacity-0 data-ending-style:duration-[var(--motion-duration-micro)]",
     "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",
+    "origin-[var(--transform-origin)] 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",
+    "transition-[opacity,transform] duration-[var(--motion-duration-flow)] ease-[var(--ease-brand)]",
+    "data-starting-style:scale-[0.97] data-starting-style:opacity-0 data-ending-style:scale-[0.97] data-ending-style:opacity-0 data-ending-style:duration-[var(--motion-duration-micro)]",
+    "data-[instant]:duration-0",
     "motion-reduce:transition-none motion-reduce:data-starting-style:transform-none motion-reduce:data-ending-style:transform-none"
   ].join(" ")};
 
@@ -726,7 +841,7 @@ var menuHighlightedClassName = "data-[highlighted]:bg-accent data-[highlighted]:
 var overlayPrimitiveClassNames = {
   menuSurface: "rounded-[var(--radius-md)] border-border/70 bg-popover/95 shadow-md",
   menuItem: [menuItemBaseClassName, menuHighlightedClassName].join(" ")};
-var DropdownMenuContext = React.createContext(null);
+var DropdownMenuContext = React10.createContext(null);
 function DropdownMenu({
   open: controlledOpen,
   defaultOpen = false,
@@ -734,7 +849,7 @@ function DropdownMenu({
   children,
   ...props
 }) {
-  const [uncontrolledOpen, setUncontrolledOpen] = React.useState(defaultOpen);
+  const [uncontrolledOpen, setUncontrolledOpen] = React10.useState(defaultOpen);
   const open = controlledOpen ?? uncontrolledOpen;
   function setOpen(nextOpen, eventDetails) {
     if (controlledOpen === void 0) {
@@ -753,11 +868,11 @@ var DropdownMenuTrigger = ({
   ref,
   ...props
 }) => {
-  const context = React.use(DropdownMenuContext);
+  const context = React10.use(DropdownMenuContext);
   function openFromTrigger() {
     context?.setOpen(true);
   }
-  const childRenderElement = asChild && React.isValidElement(children) ? React.cloneElement(children, {
+  const childRenderElement = asChild && React10.isValidElement(children) ? React10.cloneElement(children, {
     onMouseDown: (event) => {
       children.props.onMouseDown?.(event);
       if (!event.defaultPrevented) {
@@ -802,6 +917,7 @@ var DropdownMenuContent = ({
     align,
     alignOffset,
     side,
+    style: { zIndex: overlayZIndex.popover },
     children: /* @__PURE__ */ jsx(
       Menu.Popup,
       {
@@ -849,11 +965,13 @@ var DropdownMenuSeparator = ({
 DropdownMenuSeparator.displayName = "DropdownMenuSeparator";
 var iconToneStyles = {
   neutral: "bg-muted text-muted-foreground",
-  blue: "bg-blue-50 text-blue-700 dark:bg-blue-950/40 dark:text-blue-300",
-  cyan: "bg-cyan-50 text-cyan-700 dark:bg-cyan-950/40 dark:text-cyan-300",
+  blue: "bg-blue-3 text-blue-11",
+  cyan: "bg-cyan-3 text-cyan-11",
+  // allow-palette: categorical hue with no token equivalent (purple/violet has no semantic slot)
   purple: "bg-purple-50 text-purple-700 dark:bg-purple-950/40 dark:text-purple-300",
-  amber: "bg-amber-50 text-amber-700 dark:bg-amber-950/40 dark:text-amber-300",
-  green: "bg-green-50 text-green-700 dark:bg-green-950/40 dark:text-green-300",
+  amber: "bg-warning/15 text-warning-strong",
+  green: "bg-success/15 text-success-strong",
+  // allow-palette: categorical hue with no token equivalent (pink has no semantic slot)
   pink: "bg-pink-50 text-pink-700 dark:bg-pink-950/40 dark:text-pink-300"
 };
 var badgeToneToVariant = {
@@ -901,7 +1019,7 @@ function GalleryCardActionsMenu({ actions, title }) {
           action.onSelect();
         },
         className: cn(
-          action.destructive && "text-destructive data-[highlighted]:bg-destructive/10 data-[highlighted]:text-destructive"
+          action.destructive && "text-destructive-strong data-[highlighted]:bg-destructive/10 data-[highlighted]:text-destructive-strong"
         ),
         children: action.label
       },
@@ -916,6 +1034,7 @@ function GalleryCardBody({
   iconTone,
   badge,
   pinned,
+  pinnedLabel = "Pinned",
   metadata,
   actions
 }) {
@@ -935,7 +1054,13 @@ function GalleryCardBody({
         }
       ) : /* @__PURE__ */ jsx("span", { className: "h-10 w-10 shrink-0", "aria-hidden": "true" }),
       (pinned || hasActions) && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
-        pinned && /* @__PURE__ */ jsx(Pin, { className: "h-3.5 w-3.5 fill-amber-400 text-amber-500", "aria-label": "Pinned" }),
+        pinned && /* @__PURE__ */ jsx(
+          Pin,
+          {
+            className: "h-3.5 w-3.5 fill-warning-strong text-warning-strong",
+            "aria-label": pinnedLabel
+          }
+        ),
         hasActions && actions ? /* @__PURE__ */ jsx(GalleryCardActionsMenu, { actions, title }) : null
       ] })
     ] }),
@@ -961,6 +1086,7 @@ function GalleryCard(props) {
     iconTone = "neutral",
     badge,
     pinned,
+    pinnedLabel,
     metadata,
     actions,
     onClick,
@@ -977,6 +1103,7 @@ function GalleryCard(props) {
       iconTone,
       badge,
       pinned,
+      ...pinnedLabel !== void 0 ? { pinnedLabel } : {},
       metadata,
       actions
     }
@@ -1008,7 +1135,7 @@ function lineTone(line) {
     return "text-primary font-medium";
   }
   if (trimmed.includes(":")) {
-    return "text-emerald-600 dark:text-emerald-400";
+    return "text-success-strong";
   }
   return "text-foreground/78";
 }
@@ -1034,7 +1161,6 @@ function renderIcon(icon) {
 }
 function KineticFeatureCard({
   icon,
-  eyebrow,
   title,
   description,
   children,
@@ -1056,20 +1182,12 @@ function KineticFeatureCard({
           "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",
+            className: "pointer-events-none absolute inset-x-0 top-0 h-40 bg-[radial-gradient(ellipse_at_top,hsl(var(--primary)/0.12),transparent_70%)]",
             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("div", { className: "mb-8 flex items-start justify-between gap-4", 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",
             {
@@ -1142,9 +1260,9 @@ function KineticConsoleFrame({
       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("span", { className: "size-3 rounded-full border border-border/80 bg-muted shadow-sm transition-colors group-hover/kinetic:bg-destructive/80" }),
+            /* @__PURE__ */ jsx("span", { className: "size-3 rounded-full border border-border/80 bg-muted shadow-sm transition-colors group-hover/kinetic:bg-warning/80" }),
+            /* @__PURE__ */ jsx("span", { className: "size-3 rounded-full border border-border/80 bg-muted shadow-sm transition-colors group-hover/kinetic:bg-success/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 }) })
@@ -1187,13 +1305,6 @@ function KineticMorphSurface({
       "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",
           {
@@ -1273,13 +1384,6 @@ function KineticCommandBox({
       "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: "$" }),
           " ",
@@ -1381,11 +1485,11 @@ function KineticStep({
     }
   );
 }
-var Slot = React.forwardRef(
+var Slot = React10.forwardRef(
   ({ children, className, style, ...props }, ref) => {
-    const childArray = React.Children.toArray(children);
+    const childArray = React10.Children.toArray(children);
     const child = childArray.length === 1 ? childArray[0] : null;
-    if (child == null || !React.isValidElement(child)) {
+    if (child == null || !React10.isValidElement(child)) {
       return /* @__PURE__ */ jsx("span", { ref, className, style, ...props, children });
     }
     const childProps = child.props;
@@ -1406,7 +1510,7 @@ var Slot = React.forwardRef(
       className: mergedClass,
       style: { ...childProps.style, ...style }
     };
-    return React.cloneElement(
+    return React10.cloneElement(
       child,
       merged
     );
@@ -1418,7 +1522,12 @@ var buttonVariants = cva(
     "inline-flex items-center justify-center gap-2 whitespace-nowrap",
     "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",
+    // `transform` is in the property list on purpose: without it the
+    // active:scale-[0.97] press snapped instantly and the button felt dead
+    // under the finger. Duration/ease stay on the flow rail — motion
+    // governance pins them (primitives/__tests__/motion-governance.test.ts).
+    "transition-[color,background-color,border-color,box-shadow,transform] duration-flow ease-[var(--ease-brand)]",
+    "active:scale-[0.97] motion-reduce:active:scale-100 motion-reduce:transition-none",
     "disabled:pointer-events-none disabled:opacity-50",
     "aria-busy:cursor-wait"
   ].join(" "),
@@ -1427,7 +1536,7 @@ var buttonVariants = cva(
       variant: {
         // 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",
+        ink: "bg-neutral-12 text-neutral-1 ring-1 ring-inset ring-neutral-1/5 hover:bg-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",
@@ -1550,10 +1659,10 @@ function Spinner({ className }) {
     }
   );
 }
-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";
+function getIconSizeClass(size, iconSize2) {
+  if (iconSize2 === "sm") return "[&>svg]:size-3.5";
+  if (iconSize2 === "md") return "[&>svg]:size-3.5";
+  if (iconSize2 === "lg") return "[&>svg]:size-4";
   switch (size) {
     case "tiny":
       return "[&>svg]:size-3";
@@ -1568,10 +1677,10 @@ function getIconSizeClass(size, iconSize) {
       return "[&>svg]:size-4";
   }
 }
-function getSpinnerSizeClass(size, iconSize) {
-  if (iconSize === "sm") return "size-3.5";
-  if (iconSize === "md") return "size-3.5";
-  if (iconSize === "lg") return "size-4";
+function getSpinnerSizeClass(size, iconSize2) {
+  if (iconSize2 === "sm") return "size-3.5";
+  if (iconSize2 === "md") return "size-3.5";
+  if (iconSize2 === "lg") return "size-4";
   switch (size) {
     case "tiny":
       return "size-3";
@@ -1596,10 +1705,10 @@ function resolveShadowClass(shadow) {
   const level = shadow === true ? "md" : shadow;
   return SHADOW_CLASSES[level];
 }
-function ButtonContent({ loading, prefix, suffix, size, iconSize, children }) {
-  const iconSizeClass = getIconSizeClass(size, iconSize);
+function ButtonContent({ loading, prefix, suffix, size, iconSize: iconSize2, children }) {
+  const iconSizeClass = getIconSizeClass(size, iconSize2);
   return /* @__PURE__ */ jsxs(Fragment$1, { children: [
-    loading && /* @__PURE__ */ jsx(Spinner, { className: getSpinnerSizeClass(size, iconSize) }),
+    loading && /* @__PURE__ */ jsx(Spinner, { className: getSpinnerSizeClass(size, iconSize2) }),
     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 })
@@ -1610,7 +1719,7 @@ var Button = ({
   variant,
   size,
   shape,
-  iconSize,
+  iconSize: iconSize2,
   asChild = false,
   loading = false,
   disabled,
@@ -1628,7 +1737,7 @@ var Button = ({
     Comp,
     {
       ref,
-      className: cn(buttonVariants({ variant, size, shape, iconSize }), shadowClass, className),
+      className: cn(buttonVariants({ variant, size, shape, iconSize: iconSize2 }), shadowClass, className),
       disabled: isDisabled,
       "aria-busy": loading || void 0,
       ...props,
@@ -1639,7 +1748,7 @@ var Button = ({
           prefix,
           suffix,
           size,
-          iconSize,
+          iconSize: iconSize2,
           children
         }
       )
@@ -1716,20 +1825,65 @@ function asPlainStyle(style) {
 function withHtmlProps(Component) {
   return Component;
 }
-var DEFAULT_TOOLTIP_DELAY_MS = 150;
+
+// src/tokens/components/interaction.ts
+var interaction = {
+  /**
+   * Tooltips. The first one waits so a sweeping pointer does not strobe;
+   * once one is open, its neighbours open instantly if the pointer arrives
+   * within the skip window. Radix Tooltip defaults: delayDuration 700,
+   * skipDelayDuration 300. Vercel/Kowalski: "delay the first tooltip only".
+   */
+  tooltip: { delayMs: 700, skipWindowMs: 300 }};
+var DEFAULT_TOOLTIP_DELAY_MS = interaction.tooltip.delayMs;
+var SKIP_DELAY_WINDOW_MS = interaction.tooltip.skipWindowMs;
+var lastTooltipOpenAt = 0;
+var skipDelayListeners = /* @__PURE__ */ new Set();
+function markTooltipOpened() {
+  lastTooltipOpenAt = Date.now();
+  for (const listener of skipDelayListeners) listener();
+}
+function shouldSkipDelay() {
+  return Date.now() - lastTooltipOpenAt < SKIP_DELAY_WINDOW_MS;
+}
+function useSkipDelay() {
+  const [, tick] = React10.useReducer((count) => count + 1, 0);
+  React10.useEffect(() => {
+    skipDelayListeners.add(tick);
+    return () => {
+      skipDelayListeners.delete(tick);
+    };
+  }, []);
+  return shouldSkipDelay();
+}
+var TooltipInstantContext = React10.createContext(false);
 var TooltipProvider = ({
   children,
   delayDuration = DEFAULT_TOOLTIP_DELAY_MS
 }) => {
-  return /* @__PURE__ */ jsx(Tooltip$1.Provider, { delay: delayDuration, children });
+  const skipDelay = useSkipDelay();
+  return /* @__PURE__ */ jsx(Tooltip$1.Provider, { delay: skipDelay ? 0 : delayDuration, children });
 };
 var Tooltip = ({
   delayDuration,
   children,
+  onOpenChange,
   ...props
 }) => {
-  const delay = delayDuration ?? DEFAULT_TOOLTIP_DELAY_MS;
-  return /* @__PURE__ */ jsx(Tooltip$1.Provider, { delay, children: /* @__PURE__ */ jsx(Tooltip$1.Root, { ...props, children }) });
+  const skipDelay = useSkipDelay();
+  const instant = delayDuration == null && skipDelay;
+  const delay = delayDuration ?? (instant ? 0 : DEFAULT_TOOLTIP_DELAY_MS);
+  return /* @__PURE__ */ jsx(TooltipInstantContext.Provider, { value: instant, children: /* @__PURE__ */ jsx(Tooltip$1.Provider, { delay, children: /* @__PURE__ */ jsx(
+    Tooltip$1.Root,
+    {
+      ...props,
+      onOpenChange: (open, eventDetails) => {
+        if (open) markTooltipOpened();
+        onOpenChange?.(open, eventDetails);
+      },
+      children
+    }
+  ) }) });
 };
 var TooltipTrigger = ({
   asChild,
@@ -1737,7 +1891,7 @@ var TooltipTrigger = ({
   ref,
   ...props
 }) => {
-  if (asChild && React.isValidElement(children)) {
+  if (asChild && React10.isValidElement(children)) {
     return /* @__PURE__ */ jsx(
       Tooltip$1.Trigger,
       {
@@ -1759,25 +1913,29 @@ var TooltipContent = ({
   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
-      }
-    )
-  }
-) });
+}) => {
+  const instant = React10.use(TooltipInstantContext);
+  return /* @__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),
+          "data-instant": instant || void 0,
+          style: { zIndex: overlayZIndex.tooltip, ...style },
+          ...props
+        }
+      )
+    }
+  ) });
+};
 TooltipContent.displayName = "TooltipContent";
 var BaseRoot = withHtmlProps(Tabs$1.Root);
 var BaseList = withHtmlProps(Tabs$1.List);
@@ -1872,7 +2030,7 @@ var tabsContentVariants = cva(
     }
   }
 );
-var TabsContext = React.createContext({
+var TabsContext = React10.createContext({
   activationMode: "manual",
   disabled: false,
   shape: "default",
@@ -1930,7 +2088,7 @@ function Tabs({
 }) {
   const rootValue = selected ?? value;
   const rootDefaultValue = defaultValue ?? getFirstEnabledValue(tabs);
-  const context = React.useMemo(
+  const context = React10.useMemo(
     () => ({ activationMode, disabled, shape, size, variant }),
     [activationMode, disabled, shape, size, variant]
   );
@@ -2016,11 +2174,11 @@ function TabsList({
   children,
   ...props
 }) {
-  const context = React.use(TabsContext);
+  const context = React10.use(TabsContext);
   const resolvedVariant = variant ?? context.variant;
   const resolvedShape = shape ?? context.shape;
   const resolvedActivateOnFocus = activateOnFocus ?? context.activationMode === "automatic";
-  const listContext = React.useMemo(
+  const listContext = React10.useMemo(
     () => ({ ...context, shape: resolvedShape, variant: resolvedVariant }),
     [context, resolvedShape, resolvedVariant]
   );
@@ -2057,7 +2215,7 @@ function TabsList({
   ) });
 }
 function TabsTrigger({ badge, children, className, disabled, icon, ...props }) {
-  const context = React.use(TabsContext);
+  const context = React10.use(TabsContext);
   const isDisabled = disabled ?? context.disabled;
   return /* @__PURE__ */ jsxs(
     BaseTrigger,
@@ -2121,7 +2279,7 @@ var formControlFocusClassNames = {
 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";
+var fieldErrorClassName = "text-xs font-medium text-destructive-strong";
 function getTextareaStyle(size, style) {
   const token = textareaTokens.sizes[size];
   return {
@@ -2156,6 +2314,7 @@ var Textarea = ({
   description,
   error,
   fieldClassName,
+  tone = "bordered",
   id,
   onChange,
   onValueChange,
@@ -2164,13 +2323,13 @@ var Textarea = ({
   ref,
   ...props
 }) => {
-  const baseId = React.useId();
+  const baseId = React10.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(
+  const handleChange = React10.useCallback(
     (event) => {
       onValueChange?.(event.currentTarget.value);
       onChange?.(event);
@@ -2181,10 +2340,10 @@ var Textarea = ({
     "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",
+        "flex min-h-[var(--textarea-min-height)] w-full resize-y rounded-[var(--textarea-radius)]",
+        "px-[var(--textarea-padding-x)] py-[var(--textarea-padding-y)] text-[length:var(--textarea-font-size)] text-foreground",
         "transition-[background-color,border-color,box-shadow,color] duration-micro ease-out placeholder:text-muted-foreground",
-        formControlFocusClassNames.textarea,
+        tone === "bordered" ? `border border-input bg-background ${formControlFocusClassNames.textarea}` : "border-0 bg-transparent shadow-none",
         "disabled:cursor-not-allowed disabled:opacity-50 read-only:cursor-default read-only:bg-muted/70",
         formControlInvalidClassNames.textarea,
         className
@@ -2290,6 +2449,17 @@ function MarkdownRenderer({ content, className }) {
     }
   ) });
 }
+var DEFAULT_MARKDOWN_EDITOR_LABELS = {
+  bold: "Bold (Ctrl+B)",
+  italic: "Italic (Ctrl+I)",
+  inlineCode: "Inline code",
+  heading: "Heading",
+  blockQuote: "Block quote",
+  bulletList: "Bullet list",
+  link: "Link",
+  image: "Image",
+  fencedCodeBlock: "Fenced code block"
+};
 function QuoteGlyph(props) {
   return /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 16 16", fill: "currentColor", "aria-hidden": "true", className: props.className, children: [
     /* @__PURE__ */ jsx("title", { children: "Block quote" }),
@@ -2298,11 +2468,15 @@ function QuoteGlyph(props) {
 }
 function MarkdownEditor({
   value,
-  onChange,
+  onValueChange,
+  onChange: legacyOnChange,
   placeholder = "Write your answer here\u2026",
   minHeight = 250,
-  className
+  className,
+  labels
 }) {
+  const onChange = onValueChange ?? legacyOnChange;
+  const mergedLabels = { ...DEFAULT_MARKDOWN_EDITOR_LABELS, ...labels };
   const [tab, setTab] = useState("write");
   const textareaRef = useRef(null);
   const insertMarkdown = useCallback(
@@ -2342,14 +2516,42 @@ function MarkdownEditor({
               ] })
             ] }),
             /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-1", children: [
-              /* @__PURE__ */ jsx(ToolbarButton, { "aria-label": "Bold (Ctrl+B)", onClick: () => insertMarkdown("**", "**"), children: /* @__PURE__ */ jsx(TextBold, { className: "h-3.5 w-3.5", "aria-hidden": "true" }) }),
-              /* @__PURE__ */ jsx(ToolbarButton, { "aria-label": "Italic (Ctrl+I)", onClick: () => insertMarkdown("*", "*"), children: /* @__PURE__ */ jsx(TextItalic, { className: "h-3.5 w-3.5", "aria-hidden": "true" }) }),
-              /* @__PURE__ */ jsx(ToolbarButton, { "aria-label": "Inline code", onClick: () => insertMarkdown("`", "`"), children: /* @__PURE__ */ jsx(Code, { className: "h-3.5 w-3.5", "aria-hidden": "true" }) }),
-              /* @__PURE__ */ jsx(ToolbarButton, { "aria-label": "Heading", onClick: () => insertMarkdown("\n## ", "", true), children: /* @__PURE__ */ jsx(Hash, { className: "h-3.5 w-3.5", "aria-hidden": "true" }) }),
               /* @__PURE__ */ jsx(
                 ToolbarButton,
                 {
-                  "aria-label": "Block quote",
+                  "aria-label": mergedLabels.bold,
+                  onClick: () => insertMarkdown("**", "**"),
+                  children: /* @__PURE__ */ jsx(TextBold, { className: "h-3.5 w-3.5", "aria-hidden": "true" })
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                ToolbarButton,
+                {
+                  "aria-label": mergedLabels.italic,
+                  onClick: () => insertMarkdown("*", "*"),
+                  children: /* @__PURE__ */ jsx(TextItalic, { className: "h-3.5 w-3.5", "aria-hidden": "true" })
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                ToolbarButton,
+                {
+                  "aria-label": mergedLabels.inlineCode,
+                  onClick: () => insertMarkdown("`", "`"),
+                  children: /* @__PURE__ */ jsx(Code, { className: "h-3.5 w-3.5", "aria-hidden": "true" })
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                ToolbarButton,
+                {
+                  "aria-label": mergedLabels.heading,
+                  onClick: () => insertMarkdown("\n## ", "", true),
+                  children: /* @__PURE__ */ jsx(Hash, { className: "h-3.5 w-3.5", "aria-hidden": "true" })
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                ToolbarButton,
+                {
+                  "aria-label": mergedLabels.blockQuote,
                   onClick: () => insertMarkdown("\n> ", "", true),
                   children: /* @__PURE__ */ jsx(QuoteGlyph, { className: "h-3.5 w-3.5" })
                 }
@@ -2357,17 +2559,31 @@ function MarkdownEditor({
               /* @__PURE__ */ jsx(
                 ToolbarButton,
                 {
-                  "aria-label": "Bullet list",
+                  "aria-label": mergedLabels.bulletList,
                   onClick: () => insertMarkdown("\n- ", "", true),
                   children: /* @__PURE__ */ jsx(ListUnordered, { className: "h-3.5 w-3.5", "aria-hidden": "true" })
                 }
               ),
-              /* @__PURE__ */ jsx(ToolbarButton, { "aria-label": "Link", onClick: () => insertMarkdown("[", "](url)"), children: /* @__PURE__ */ jsx(Link, { className: "h-3.5 w-3.5", "aria-hidden": "true" }) }),
-              /* @__PURE__ */ jsx(ToolbarButton, { "aria-label": "Image", onClick: () => insertMarkdown("![alt text](", ")"), children: /* @__PURE__ */ jsx(Image, { className: "h-3.5 w-3.5", "aria-hidden": "true" }) }),
               /* @__PURE__ */ jsx(
                 ToolbarButton,
                 {
-                  "aria-label": "Fenced code block",
+                  "aria-label": mergedLabels.link,
+                  onClick: () => insertMarkdown("[", "](url)"),
+                  children: /* @__PURE__ */ jsx(Link, { className: "h-3.5 w-3.5", "aria-hidden": "true" })
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                ToolbarButton,
+                {
+                  "aria-label": mergedLabels.image,
+                  onClick: () => insertMarkdown("![alt text](", ")"),
+                  children: /* @__PURE__ */ jsx(Image, { className: "h-3.5 w-3.5", "aria-hidden": "true" })
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                ToolbarButton,
+                {
+                  "aria-label": mergedLabels.fencedCodeBlock,
                   onClick: () => insertMarkdown("\n```javascript\n", "\n```\n", true),
                   children: /* @__PURE__ */ jsx(FileText, { className: "h-3.5 w-3.5", "aria-hidden": "true" })
                 }
@@ -2381,7 +2597,8 @@ function MarkdownEditor({
               value,
               onChange: (e) => onChange(e.target.value),
               placeholder,
-              className: "resize-none rounded-none border-0 font-mono text-sm shadow-none",
+              tone: "bare",
+              className: "resize-none rounded-none font-mono text-sm",
               style: { minHeight }
             }
           ) }),
@@ -2416,34 +2633,6 @@ function ToolbarButton({
     }
   );
 }
-var Card2 = ({
-  className,
-  ref,
-  ...props
-}) => /* @__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 = ({
-  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 Separator = ({
   className,
   orientation = "horizontal",
@@ -2472,7 +2661,7 @@ var sizeClasses = {
   xl: { root: "h-20 w-20", fallback: "text-2xl" }
 };
 var numericAvatarClass = "h-[var(--avatar-size)] w-[var(--avatar-size)]";
-var AvatarContext = React.createContext(null);
+var AvatarContext = React10.createContext(null);
 function isPresetSize(size) {
   return typeof size === "string";
 }
@@ -2574,7 +2763,7 @@ var AvatarFallback = ({
   ref,
   ...props
 }) => {
-  const context = React.use(AvatarContext);
+  const context = React10.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(
@@ -2616,9 +2805,10 @@ function UserInfo({ author, timestamp, verb = "asked", className }) {
           /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [
             /* @__PURE__ */ jsx("span", { className: "font-medium text-foreground text-sm", children: author.name }),
             /* @__PURE__ */ jsx("span", { className: "font-bold text-muted-foreground text-xs tabular-nums", children: author.reputation.toLocaleString() }),
-            author.badges.gold > 0 && /* @__PURE__ */ jsx(Badge2, { color: "bg-yellow-500", count: author.badges.gold, label: "gold" }),
-            author.badges.silver > 0 && /* @__PURE__ */ jsx(Badge2, { color: "bg-gray-400", count: author.badges.silver, label: "silver" }),
-            author.badges.bronze > 0 && /* @__PURE__ */ jsx(Badge2, { color: "bg-amber-600", count: author.badges.bronze, label: "bronze" })
+            author.badges.gold > 0 && /* @__PURE__ */ jsx(Badge2, { color: "bg-warning", count: author.badges.gold, label: "gold" }),
+            author.badges.silver > 0 && /* @__PURE__ */ jsx(Badge2, { color: "bg-neutral-9", count: author.badges.silver, label: "silver" }),
+            author.badges.bronze > 0 && // allow-palette: bronze medal tier has no design-system equivalent; amber-600 is the closest fixed hue and is distinct from the gold (warning) dot above
+            /* @__PURE__ */ jsx(Badge2, { color: "bg-amber-600", count: author.badges.bronze, label: "bronze" })
           ] })
         ] })
       ]
@@ -2649,7 +2839,7 @@ function VoteButtons({
   size = "default",
   label = "post"
 }) {
-  const iconSize = size === "large" ? "h-5 w-5" : "h-4 w-4";
+  const iconSize2 = size === "large" ? "h-5 w-5" : "h-4 w-4";
   const scoreSize = size === "large" ? "text-lg" : "text-base";
   const score = votes + voteDelta(userVote);
   return /* @__PURE__ */ jsxs("fieldset", { className: "flex flex-col items-center gap-2", children: [
@@ -2667,7 +2857,7 @@ function VoteButtons({
         "aria-pressed": userVote === "up",
         onClick: () => onVote("up"),
         className: cn("p-2", userVote === "up" && "bg-primary/10 text-primary hover:bg-primary/15"),
-        children: /* @__PURE__ */ jsx(ChevronUp, { className: iconSize, "aria-hidden": "true" })
+        children: /* @__PURE__ */ jsx(ChevronUp, { className: iconSize2, "aria-hidden": "true" })
       }
     ),
     /* @__PURE__ */ jsx(
@@ -2697,7 +2887,7 @@ function VoteButtons({
           "p-2",
           userVote === "down" && "bg-muted text-muted-foreground hover:bg-muted"
         ),
-        children: /* @__PURE__ */ jsx(ChevronDown, { className: iconSize, "aria-hidden": "true" })
+        children: /* @__PURE__ */ jsx(ChevronDown, { className: iconSize2, "aria-hidden": "true" })
       }
     )
   ] });
@@ -2770,7 +2960,7 @@ function QAPage({
       return bScore - aScore;
     });
   }, [answers]);
-  return /* @__PURE__ */ jsxs("div", { className: cn("mx-auto w-full max-w-[var(--container-content)] p-4 md:p-6", className), children: [
+  return /* @__PURE__ */ jsxs("div", { className: cn("mx-auto w-full max-w-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: [
@@ -2788,7 +2978,7 @@ function QAPage({
       ] }),
       /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-2", children: question.tags.map((tag) => /* @__PURE__ */ jsx(Badge, { variant: "secondary", className: "text-xs", children: tag }, tag)) })
     ] }),
-    /* @__PURE__ */ jsx(Card2, { className: "mb-8", children: /* @__PURE__ */ jsxs(CardContent, { className: "flex gap-6 p-6", children: [
+    /* @__PURE__ */ jsx(Card, { className: "mb-8", children: /* @__PURE__ */ jsxs(CardContent, { className: "flex gap-6 p-6", children: [
       /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-4", children: [
         /* @__PURE__ */ jsx(
           VoteButtons,
@@ -2809,7 +2999,7 @@ function QAPage({
             "aria-label": question.bookmarked ? "Remove bookmark" : "Bookmark question",
             "aria-pressed": question.bookmarked,
             onClick: handleBookmarkToggle,
-            className: cn("p-2", question.bookmarked && "bg-warning/10 text-warning"),
+            className: cn("p-2", question.bookmarked && "bg-warning/10 text-warning-strong"),
             children: /* @__PURE__ */ jsx(Bookmark, { className: "h-4 w-4", "aria-hidden": "true" })
           }
         )
@@ -2836,7 +3026,7 @@ function QAPage({
       answers.length === 1 ? "Answer" : "Answers"
     ] }) }),
     /* @__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__ */ jsx(Card, { className: cn("mb-6", answer.isAccepted && "ring-2 ring-success/40"), children: /* @__PURE__ */ jsxs(CardContent, { className: "flex gap-6 p-6", children: [
         /* @__PURE__ */ jsxs("div", { className: "flex flex-col items-center gap-4", children: [
           /* @__PURE__ */ jsx(
             VoteButtons,
@@ -2857,13 +3047,19 @@ function QAPage({
               "aria-label": answer.isAccepted ? "Unaccept this answer" : "Accept this answer",
               "aria-pressed": answer.isAccepted,
               onClick: () => handleAccept(answer.id),
-              className: cn("p-2", answer.isAccepted && "bg-success/10 text-success"),
+              className: cn("p-2", answer.isAccepted && "bg-success/10 text-success-strong"),
               children: /* @__PURE__ */ jsx(Check, { className: "h-5 w-5", "aria-hidden": "true" })
             }
           ),
           answer.isAccepted && /* @__PURE__ */ jsxs("div", { className: "text-center", children: [
-            /* @__PURE__ */ jsx(StarFill, { "aria-hidden": "true", className: "mx-auto mb-1 h-4 w-4 text-success" }),
-            /* @__PURE__ */ jsx("span", { className: "font-medium text-success text-xs", children: "Accepted" })
+            /* @__PURE__ */ jsx(
+              StarFill,
+              {
+                "aria-hidden": "true",
+                className: "mx-auto mb-1 h-4 w-4 text-success-strong"
+              }
+            ),
+            /* @__PURE__ */ jsx("span", { className: "font-medium text-success-strong text-xs", children: "Accepted" })
           ] })
         ] }),
         /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-1 flex-col", children: [
@@ -2884,10 +3080,17 @@ function QAPage({
       ] }) }),
       index < sortedAnswers.length - 1 && /* @__PURE__ */ jsx(Separator, { className: "mb-6" })
     ] }, answer.id)) }),
-    /* @__PURE__ */ jsxs(Card2, { children: [
-      /* @__PURE__ */ jsx(CardHeader2, { children: /* @__PURE__ */ jsx("h3", { className: "font-semibold text-foreground text-lg", children: "Your Answer" }) }),
+    /* @__PURE__ */ jsxs(Card, { children: [
+      /* @__PURE__ */ jsx(CardHeader, { children: /* @__PURE__ */ jsx("h3", { className: "font-semibold text-foreground text-lg", children: "Your Answer" }) }),
       /* @__PURE__ */ jsxs(CardContent, { className: "space-y-4", children: [
-        /* @__PURE__ */ jsx(MarkdownEditor, { value: draft, onChange: setDraft, placeholder: "Write your answer here\u2026" }),
+        /* @__PURE__ */ jsx(
+          MarkdownEditor,
+          {
+            value: draft,
+            onValueChange: setDraft,
+            placeholder: "Write your answer here\u2026"
+          }
+        ),
         /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
           /* @__PURE__ */ jsx("p", { className: "text-muted-foreground text-xs", children: "Thanks for contributing an answer!" }),
           /* @__PURE__ */ jsxs("div", { className: "flex gap-2", children: [
@@ -2935,7 +3138,7 @@ function PostActions({
     /* @__PURE__ */ jsx(UserInfo, { author, timestamp, verb })
   ] });
 }
-var CollapsibleContext = React.createContext({});
+var CollapsibleContext = React10.createContext({});
 var Collapsible = ({
   className,
   open: openProp,
@@ -2946,10 +3149,10 @@ var Collapsible = ({
   ref,
   ...props
 }) => {
-  const [uncontrolledOpen, setUncontrolledOpen] = React.useState(defaultOpen || false);
+  const [uncontrolledOpen, setUncontrolledOpen] = React10.useState(defaultOpen || false);
   const isControlled = openProp !== void 0;
   const open = isControlled ? openProp : uncontrolledOpen;
-  const handleOpenChange = React.useCallback(
+  const handleOpenChange = React10.useCallback(
     (nextOpen) => {
       if (!isControlled) {
         setUncontrolledOpen(nextOpen);
@@ -2978,8 +3181,8 @@ var CollapsibleTrigger = ({
   ref,
   ...props
 }) => {
-  const { open, onOpenChange, disabled } = React.use(CollapsibleContext);
-  const handleClick = React.useCallback(
+  const { open, onOpenChange, disabled } = React10.use(CollapsibleContext);
+  const handleClick = React10.useCallback(
     (e) => {
       if (disabled) return;
       onOpenChange?.(!open);
@@ -2987,8 +3190,8 @@ var CollapsibleTrigger = ({
     },
     [disabled, open, onOpenChange, props.onClick]
   );
-  if (asChild && React.isValidElement(children)) {
-    return React.cloneElement(children, {
+  if (asChild && React10.isValidElement(children)) {
+    return React10.cloneElement(children, {
       ref,
       onClick: handleClick,
       "data-state": open ? "open" : "closed",
@@ -3022,7 +3225,7 @@ var CollapsibleContent = ({
   ref,
   ...props
 }) => {
-  const { open } = React.use(CollapsibleContext);
+  const { open } = React10.use(CollapsibleContext);
   const shouldReduceMotion = useReducedMotion();
   return /* @__PURE__ */ jsx(AnimatePresence, { initial: false, children: open && /* @__PURE__ */ jsx(
     motion.div,
@@ -3042,9 +3245,9 @@ var CollapsibleContent = ({
   ) });
 };
 CollapsibleContent.displayName = "CollapsibleContent";
-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_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] duration-micro ease-brand";
+var ITEM_DEFAULT_CLASSES = "text-sidebar-foreground/72 hover:bg-sidebar-accent/55 hover:text-sidebar-foreground";
+var ITEM_ACTIVE_CLASSES = "bg-sidebar-accent text-sidebar-foreground font-medium shadow-[inset_0_0_0_1px_hsl(var(--sidebar-border))] hover:bg-sidebar-accent";
 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-4 shrink-0";
@@ -3077,19 +3280,19 @@ function ItemContent({
   const Icon = item.icon;
   if (collapsed) {
     return /* @__PURE__ */ jsxs(Fragment$1, { children: [
-      Icon ? /* @__PURE__ */ jsx(Icon, { className: ICON_CLASSES }) : null,
+      Icon ? /* @__PURE__ */ jsx(Icon, { className: cn(ICON_CLASSES, item.isActive && "text-sidebar-primary") }) : null,
       /* @__PURE__ */ jsx("span", { className: "sr-only", children: item.label })
     ] });
   }
   return /* @__PURE__ */ jsxs(Fragment$1, { children: [
-    Icon ? /* @__PURE__ */ jsx(Icon, { className: ICON_CLASSES }) : null,
+    Icon ? /* @__PURE__ */ jsx(Icon, { className: cn(ICON_CLASSES, item.isActive && "text-sidebar-primary") }) : null,
     /* @__PURE__ */ jsx("span", { className: "flex-1 truncate", children: item.label }),
     item.badge ? /* @__PURE__ */ jsx(Badge, { variant: item.badge.tone, size: "sm", children: item.badge.label }) : null,
     showChevron ? /* @__PURE__ */ jsx(
       ChevronRight,
       {
         className: cn(
-          "size-3.5 shrink-0 text-muted-foreground transition-transform",
+          "size-3.5 shrink-0 text-sidebar-foreground/50 transition-transform duration-micro ease-brand",
           chevronOpen && "rotate-90"
         ),
         "aria-hidden": "true"
@@ -3173,12 +3376,12 @@ function ParentItem({
   renderLink
 }) {
   const hasActiveChild = item.children?.some((c) => c.isActive === true) ?? false;
-  const [uncontrolledOpen, setUncontrolledOpen] = React.useState(
+  const [uncontrolledOpen, setUncontrolledOpen] = React10.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(
+  const setOpen = React10.useCallback(
     (next) => {
       if (isControlled) {
         item.onExpandedChange?.(next);
@@ -3237,12 +3440,13 @@ function SidebarNav({
   itemClassName,
   header,
   footer,
-  renderLink = defaultRenderLink
+  renderLink = defaultRenderLink,
+  navLabel = "Sidebar"
 }) {
   return /* @__PURE__ */ jsx(TooltipProvider, { delayDuration: 200, children: /* @__PURE__ */ jsxs(
     "nav",
     {
-      "aria-label": "Sidebar",
+      "aria-label": navLabel,
       "data-ui": "nebutra-sidebar-nav",
       className: cn(
         "flex h-full flex-col",
@@ -3299,13 +3503,13 @@ function SidebarNav({
     }
   ) });
 }
-var TerminalContext = React.createContext(null);
-var variantStyles2 = {
+var TerminalContext = React10.createContext(null);
+var variantStyles = {
   default: "bg-muted border border-border",
   minimal: "bg-background border border-border",
   glass: "bg-muted backdrop-blur-md border border-border"
 };
-var TerminalRoot = React.forwardRef(
+var TerminalRoot = React10.forwardRef(
   ({ className, variant = "default", children, ...props }, ref) => {
     return /* @__PURE__ */ jsx(TerminalContext.Provider, { value: { variant }, children: /* @__PURE__ */ jsx(
       "div",
@@ -3313,7 +3517,7 @@ var TerminalRoot = React.forwardRef(
         ref,
         className: cn(
           "rounded-[var(--radius-xl)] overflow-hidden font-mono text-sm",
-          variantStyles2[variant],
+          variantStyles[variant],
           className
         ),
         ...props,
@@ -3323,7 +3527,7 @@ var TerminalRoot = React.forwardRef(
   }
 );
 TerminalRoot.displayName = "Terminal";
-var TerminalHeader = React.forwardRef(
+var TerminalHeader = React10.forwardRef(
   ({ className, title, showControls = true, children, ...props }, ref) => {
     return /* @__PURE__ */ jsxs(
       "div",
@@ -3348,13 +3552,13 @@ var TerminalHeader = React.forwardRef(
   }
 );
 TerminalHeader.displayName = "Terminal.Header";
-var TerminalBody = React.forwardRef(
+var TerminalBody = React10.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 = React.forwardRef(
+var TerminalLine = React10.forwardRef(
   ({ className, prompt = "$", output = false, highlight = false, children, ...props }, ref) => {
     return /* @__PURE__ */ jsxs(
       "div",
@@ -3367,7 +3571,7 @@ var TerminalLine = React.forwardRef(
         ),
         ...props,
         children: [
-          !output && /* @__PURE__ */ jsx("span", { className: "text-emerald-400 shrink-0 select-none", children: prompt }),
+          !output && /* @__PURE__ */ jsx("span", { className: "text-success-strong shrink-0 select-none", children: prompt }),
           /* @__PURE__ */ jsx("span", { className: cn("flex-1", output ? "text-muted-foreground" : "text-muted-foreground"), children })
         ]
       }
@@ -3409,7 +3613,7 @@ function subscribePlatform() {
   return () => void 0;
 }
 function usePlatform() {
-  return React.useSyncExternalStore(subscribePlatform, getClientPlatform, () => "apple");
+  return React10.useSyncExternalStore(subscribePlatform, getClientPlatform, () => "apple");
 }
 function normalizeKey(children) {
   if (typeof children !== "string") {
@@ -3483,13 +3687,16 @@ function computeInitials(user) {
   }
   return source.slice(0, 2).toUpperCase();
 }
-function DefaultTrigger({ user }) {
+function DefaultTrigger({
+  user,
+  triggerLabel = "Open user menu"
+}) {
   const initials2 = computeInitials(user);
   return /* @__PURE__ */ jsx(
     "button",
     {
       type: "button",
-      "aria-label": "Open user menu",
+      "aria-label": triggerLabel,
       className: cn(
         "inline-flex h-8 w-8 shrink-0 items-center justify-center overflow-hidden rounded-full",
         "outline-none transition-[box-shadow,opacity] hover:opacity-90",
@@ -3498,7 +3705,7 @@ function DefaultTrigger({ user }) {
       ),
       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-primary text-white", children: initials2 })
+        /* @__PURE__ */ jsx(AvatarFallback, { size: "sm", className: "bg-primary text-primary-foreground", children: initials2 })
       ] })
     }
   );
@@ -3519,16 +3726,17 @@ function UserMenu(props) {
     renderTrigger,
     renderLink,
     className,
-    align = "end"
+    align = "end",
+    triggerLabel
   } = props;
   const initials2 = computeInitials(user);
   return /* @__PURE__ */ jsxs(DropdownMenu, { children: [
-    /* @__PURE__ */ jsx(DropdownMenuTrigger, { asChild: true, children: renderTrigger ? renderTrigger(user) : /* @__PURE__ */ jsx(DefaultTrigger, { user }) }),
+    /* @__PURE__ */ jsx(DropdownMenuTrigger, { asChild: true, children: renderTrigger ? renderTrigger(user) : /* @__PURE__ */ jsx(DefaultTrigger, { user, ...triggerLabel !== void 0 ? { triggerLabel } : {} }) }),
     /* @__PURE__ */ jsxs(DropdownMenuContent, { align, sideOffset: 8, className: cn("w-[280px] p-1", className), children: [
       /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3 p-3", children: [
         /* @__PURE__ */ jsxs(Avatar, { size: "md", children: [
           user.avatarUrl ? /* @__PURE__ */ jsx(AvatarImage, { src: user.avatarUrl, alt: user.name }) : null,
-          /* @__PURE__ */ jsx(AvatarFallback, { size: "md", className: "bg-primary text-white", children: initials2 })
+          /* @__PURE__ */ jsx(AvatarFallback, { size: "md", className: "bg-primary text-primary-foreground", 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 }),
@@ -3542,12 +3750,12 @@ function UserMenu(props) {
       ] }) : null,
       groups.map((group, groupIndex) => {
         const isLastGroup = groupIndex === groups.length - 1;
-        return /* @__PURE__ */ jsxs(React.Fragment, { children: [
+        return /* @__PURE__ */ jsxs(React10.Fragment, { children: [
           group.label ? /* @__PURE__ */ jsx("div", { className: "px-2 py-1 text-xs font-medium uppercase tracking-wider text-muted-foreground", children: group.label }) : null,
           group.items.map((item) => {
             const itemClassName = cn(
               "flex w-full cursor-pointer items-center",
-              item.destructive && "text-destructive focus:bg-destructive focus:text-destructive-foreground data-[highlighted]:bg-destructive data-[highlighted]:text-destructive-foreground"
+              item.destructive && "text-destructive-strong focus:bg-destructive focus:text-destructive-foreground data-[highlighted]:bg-destructive data-[highlighted]:text-destructive-foreground"
             );
             if (item.href && !item.disabled) {
               const linkContent = /* @__PURE__ */ jsx(UserMenuItemContent, { item });
@@ -3619,7 +3827,7 @@ function WorkspaceAvatar({ workspace, size = "sm", className }) {
       AvatarFallback,
       {
         size,
-        className: "rounded-[var(--radius-md)] bg-primary text-white font-semibold",
+        className: "rounded-[var(--radius-md)] bg-primary text-primary-foreground font-semibold",
         children: initials2
       }
     )
@@ -3631,6 +3839,7 @@ function TriggerButton({
   showRoleBadge,
   disabled,
   className,
+  switchLabel = "Switch workspace",
   ref
 }) {
   const isOwner = activeWorkspace.role === "owner";
@@ -3640,7 +3849,7 @@ function TriggerButton({
       {
         ref,
         type: "button",
-        "aria-label": "Switch workspace",
+        "aria-label": switchLabel,
         disabled,
         className: cn(
           "inline-flex items-center gap-1 rounded-[var(--radius-md)] p-1 outline-none transition-colors",
@@ -3661,7 +3870,7 @@ function TriggerButton({
     {
       ref,
       type: "button",
-      "aria-label": "Switch workspace",
+      "aria-label": switchLabel,
       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",
@@ -3696,8 +3905,8 @@ function WorkspaceItem({ workspace, isActive, onSelect }) {
             "span",
             {
               className: cn(
-                "truncate text-sm text-foreground",
-                isActive ? "font-semibold" : "font-medium"
+                "truncate font-medium text-sm",
+                isActive ? "text-foreground" : "text-foreground/80"
               ),
               children: workspace.name
             }
@@ -3722,7 +3931,8 @@ function WorkspaceSwitcher({
   headerSlot,
   className,
   showRoleBadge = true,
-  disabled = false
+  disabled = false,
+  switchLabel
 }) {
   const activeWorkspace = workspaces.find((ws) => ws.id === activeWorkspaceId) ?? workspaces[0];
   const handleSelect = (id) => {
@@ -3753,7 +3963,8 @@ function WorkspaceSwitcher({
         variant,
         showRoleBadge,
         disabled,
-        className
+        className,
+        ...switchLabel !== void 0 ? { switchLabel } : {}
       }
     ) }),
     /* @__PURE__ */ jsxs(