@nebutra/ui 2.0.0 → 3.0.0

package/dist/layout/index.js

@@ -1,18 +1,19 @@
 "use client";
 import { Menu, Cross, Warning } from '@nebutra/icons';
-import * as React4 from 'react';
+import * as React3 from 'react';
 import { createContext, useState, useEffect, useMemo, useCallback } from 'react';
 import { Dialog } from '@base-ui/react/dialog';
 import { cva } from 'class-variance-authority';
 import { colors } from '@nebutra/brand';
+import { tokenColor, fontStack } from '@nebutra/tokens/values';
 import { clsx } from 'clsx';
-import { twMerge } from 'tailwind-merge';
+import { extendTailwindMerge } from 'tailwind-merge';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import Link from 'next/link';
 
 // src/layout/app-shell.tsx
 ({
-  // Nebutra Blue (云毓蓝) — technology & trust — VI: #0033FE
+  // Nebutra Blue (云毓蓝) — technology & trust
   blue50: colors.primary[50],
   blue100: colors.primary[100],
   blue200: colors.primary[200],
@@ -25,7 +26,7 @@ import Link from 'next/link';
   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],
@@ -50,6 +51,13 @@ import Link from 'next/link';
   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
 });
@@ -93,6 +101,18 @@ var primitiveFontSize = {
   lg: 18};
 var primitiveFontWeight = {
   semibold: 600};
+({
+  /** 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
@@ -114,13 +134,13 @@ var overlayClassNames = {
   focusRing: overlayFocusRingClassName,
   sheetBackdrop: [
     "fixed inset-0 bg-[var(--sheet-overlay-background)] backdrop-blur-[var(--sheet-overlay-blur)]",
-    "transition-[opacity,backdrop-filter,display] duration-[var(--motion-duration-flow)] ease-[var(--ease-brand)]",
-    "data-ending-style:opacity-0 data-starting-style:opacity-0 motion-reduce:transition-none"
+    "transition-[opacity] duration-[var(--motion-duration-flow)] ease-[var(--ease-brand)]",
+    "data-ending-style:opacity-0 data-starting-style:opacity-0 data-ending-style:duration-[var(--motion-duration-micro)] motion-reduce:transition-none"
   ].join(" "),
   sheetSurface: [
     "fixed flex flex-col overflow-hidden border border-border bg-[var(--sheet-background)] text-foreground shadow-[var(--sheet-shadow)]",
-    "outline-none transition-[opacity,transform,display] duration-[var(--motion-duration-flow)] ease-[var(--ease-brand)]",
-    "data-ending-style:opacity-0 data-starting-style:opacity-0 motion-reduce:transition-none"
+    "outline-none transition-[opacity,transform] duration-[var(--motion-duration-flow)] ease-[var(--ease-brand)]",
+    "data-ending-style:opacity-0 data-starting-style:opacity-0 data-ending-style:duration-[var(--motion-duration-micro)] motion-reduce:transition-none"
   ].join(" ")};
 
 // src/tokens/components/sheet.ts
@@ -151,6 +171,80 @@ var sheetTokens = {
     background: "hsl(var(--popover))",
     shadow: "var(--elevation-xl)"
   }};
+
+// 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));
 }
@@ -203,7 +297,7 @@ var SheetClose = ({
   ref,
   ...props
 }) => {
-  if (asChild && React4.isValidElement(children)) {
+  if (asChild && React3.isValidElement(children)) {
     return /* @__PURE__ */ jsx(
       Dialog.Close,
       {
@@ -258,6 +352,7 @@ var SheetContent = ({
   noOverlay = false,
   showClose,
   close,
+  closeLabel = "Close",
   style,
   ref,
   ...props
@@ -279,7 +374,7 @@ var SheetContent = ({
           shouldRenderClose ? /* @__PURE__ */ jsxs(
             SheetClose,
             {
-              "aria-label": "Close",
+              "aria-label": closeLabel,
               className: cn(
                 "absolute right-[var(--sheet-close-offset)] top-[var(--sheet-close-offset)] inline-flex size-[var(--sheet-close-size)] items-center justify-center rounded-[var(--sheet-close-radius)] text-muted-foreground",
                 "transition-[background-color,color,box-shadow] duration-[var(--motion-duration-micro)] ease-[var(--ease-out)] hover:bg-muted hover:text-foreground",
@@ -288,7 +383,7 @@ var SheetContent = ({
               ),
               children: [
                 /* @__PURE__ */ jsx(Cross, { "aria-hidden": "true", className: "size-[var(--sheet-close-icon-size)]" }),
-                /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Close" })
+                /* @__PURE__ */ jsx("span", { className: "sr-only", children: closeLabel })
               ]
             }
           ) : null
@@ -313,28 +408,31 @@ function AppShell({
   headerHeight = DEFAULT_HEADER_HEIGHT,
   contentClassName,
   className,
-  overlay = false
+  overlay = false,
+  primaryNavLabel = "Primary",
+  collapseNavigationLabel = "Collapse navigation",
+  openNavigationMenuLabel = "Open navigation menu"
 }) {
   const isControlled = collapsed !== void 0;
-  const [internalCollapsed] = React4.useState(defaultCollapsed);
+  const [internalCollapsed] = React3.useState(defaultCollapsed);
   const isCollapsed = isControlled ? collapsed : internalCollapsed;
-  const [mobileOpen, setMobileOpen] = React4.useState(false);
+  const [mobileOpen, setMobileOpen] = React3.useState(false);
   const railWidth = isCollapsed ? sidebarCollapsedWidth : sidebarWidth;
   return /* @__PURE__ */ jsxs(
     "div",
     {
       "data-ui": "nebutra-app-shell",
       className: cn(
-        "relative flex h-screen w-full overflow-hidden bg-background text-foreground",
+        "relative flex h-dvh w-full overflow-hidden bg-background text-foreground",
         className
       ),
       children: [
         /* @__PURE__ */ jsx(
           "aside",
           {
-            "aria-label": "Primary",
+            "aria-label": primaryNavLabel,
             className: cn(
-              "hidden h-screen overflow-hidden bg-sidebar text-sidebar-foreground md:block",
+              "hidden h-dvh overflow-hidden bg-sidebar text-sidebar-foreground md:block",
               "transition-[width] duration-flow ease-out",
               overlay ? "absolute inset-y-0 left-0 z-40" : "shrink-0",
               railWidth > 0 && "border-r border-sidebar-border",
@@ -355,9 +453,9 @@ function AppShell({
           "button",
           {
             type: "button",
-            "aria-label": "Collapse navigation",
+            "aria-label": collapseNavigationLabel,
             onClick: () => onCollapsedChange?.(true),
-            className: "absolute inset-0 z-30 hidden cursor-default bg-foreground/20 backdrop-blur-[1px] md:block"
+            className: "absolute inset-0 z-30 hidden cursor-default bg-foreground/25 backdrop-blur-xs md:block"
           }
         ) : null,
         /* @__PURE__ */ jsx(Sheet, { open: mobileOpen, onOpenChange: setMobileOpen, children: /* @__PURE__ */ jsx(SheetContent, { side: "left", className: "w-72 border-r border-sidebar-border bg-sidebar p-0", children: /* @__PURE__ */ jsx("div", { className: "h-full overflow-y-auto", children: sidebar }) }) }),
@@ -375,12 +473,11 @@ function AppShell({
                   "button",
                   {
                     type: "button",
-                    "aria-label": "Open navigation menu",
+                    "aria-label": openNavigationMenuLabel,
                     onClick: () => setMobileOpen(true),
                     className: cn(
                       "relative inline-flex size-8 items-center justify-center rounded-[var(--radius-md)] text-foreground/80 after:absolute after:-inset-1.5 after:content-['']",
-                      "hover:bg-muted hover:text-foreground md:hidden",
-                      "focus-visible:outline-none"
+                      "transition-colors duration-micro ease-brand hover:bg-muted hover:text-foreground md:hidden"
                     ),
                     children: /* @__PURE__ */ jsx(Menu, { className: "size-4", "aria-hidden": "true" })
                   }
@@ -393,12 +490,11 @@ function AppShell({
             "button",
             {
               type: "button",
-              "aria-label": "Open navigation menu",
+              "aria-label": openNavigationMenuLabel,
               onClick: () => setMobileOpen(true),
               className: cn(
                 "relative inline-flex size-8 items-center justify-center rounded-[var(--radius-md)] text-foreground/80 after:absolute after:-inset-1.5 after:content-['']",
-                "hover:bg-muted hover:text-foreground",
-                "focus-visible:outline-none"
+                "transition-colors duration-micro ease-brand hover:bg-muted hover:text-foreground"
               ),
               children: /* @__PURE__ */ jsx(Menu, { className: "size-4", "aria-hidden": "true" })
             }
@@ -418,19 +514,118 @@ function AppShell({
     }
   );
 }
-function Card({ children, isInteractive = false, className }) {
+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: ""
+      }
+    },
+    defaultVariants: { variant: "default", padding: "none", interactive: false }
+  }
+);
+var CardPaddedContext = React3.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
+  }
+) });
+CardRoot.displayName = "Card";
+var CardHeader = ({ className, ref, ...props }) => {
+  const padded = React3.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 = "CardTitle";
+var CardDescription = ({ className, as: Tag = "p", ref, ...props }) => React3.createElement(Tag, {
+  ref,
+  className: cn("text-sm leading-relaxed text-muted-foreground", className),
+  ...props
+});
+CardDescription.displayName = "CardDescription";
+var CardContent = ({ className, ref, ...props }) => {
+  const padded = React3.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 = React3.use(CardPaddedContext);
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
       className: cn(
-        "rounded-[var(--radius-lg)] border border-border bg-background p-4 text-foreground shadow-sm dark:bg-black/40",
-        isInteractive && "cursor-pointer transition-shadow hover:shadow-md",
+        "flex items-center",
+        padded ? "mt-6 border-t border-border/50 pt-4 first:mt-0" : "p-6 pt-0",
         className
       ),
-      children
+      ...props
     }
   );
-}
+};
+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,
+  Title: CardTitle,
+  Description: CardDescription,
+  Content: CardContent,
+  Body: CardContent,
+  Footer: CardFooter,
+  Icon: CardIcon
+});
 var sizeClasses = {
   sm: "max-w-screen-sm",
   md: "max-w-screen-md",
@@ -496,6 +691,54 @@ function DesignSystemProvider({
   );
   return /* @__PURE__ */ jsx(DesignSystemContext.Provider, { value: contextValue, children });
 }
+
+// src/tokens/components/empty-state.ts
+var emptyStateTokens = {
+  root: {
+    minHeight: {
+      sm: primitiveSpacing[16] * 2,
+      md: primitiveSpacing[24] * 2,
+      lg: primitiveSpacing[16] * 4
+    },
+    paddingX: {
+      sm: primitiveSpacing[4],
+      md: primitiveSpacing[6],
+      lg: primitiveSpacing[8]
+    },
+    paddingY: {
+      sm: primitiveSpacing[8],
+      md: primitiveSpacing[10],
+      lg: primitiveSpacing[14]
+    },
+    radius: primitiveRadius.lg
+  },
+  content: {
+    maxWidth: primitiveSpacing[14] * 8,
+    descriptionMaxWidth: primitiveSpacing[12] * 8,
+    stackGap: primitiveSpacing[4],
+    copyGap: primitiveSpacing[2],
+    actionsGap: primitiveSpacing[2]
+  },
+  icon: {
+    size: primitiveSizing.lg,
+    radius: primitiveRadius.lg
+  },
+  typography: {
+    title: {
+      sm: primitiveFontSize.sm,
+      md: primitiveFontSize.base,
+      lg: primitiveFontSize.lg
+    },
+    description: {
+      sm: primitiveFontSize.xs,
+      md: primitiveFontSize.sm,
+      lg: primitiveFontSize.sm
+    },
+    titleWeight: primitiveFontWeight.semibold,
+    titleLineHeight: primitiveSpacing[6],
+    descriptionLineHeight: primitiveSpacing[6]
+  }
+};
 var SIZE_MAP = {
   sm: { box: "h-8 w-8", halo: "h-16 w-16 -inset-4", glyph: "h-3.5 w-3.5" },
   md: { box: "h-10 w-10", halo: "h-20 w-20 -inset-5", glyph: "h-4 w-4" },
@@ -560,54 +803,6 @@ function DefaultGlyph({ className }) {
     }
   );
 }
-
-// src/tokens/components/empty-state.ts
-var emptyStateTokens = {
-  root: {
-    minHeight: {
-      sm: primitiveSpacing[16] * 2,
-      md: primitiveSpacing[24] * 2,
-      lg: primitiveSpacing[16] * 4
-    },
-    paddingX: {
-      sm: primitiveSpacing[4],
-      md: primitiveSpacing[6],
-      lg: primitiveSpacing[8]
-    },
-    paddingY: {
-      sm: primitiveSpacing[8],
-      md: primitiveSpacing[10],
-      lg: primitiveSpacing[14]
-    },
-    radius: primitiveRadius.lg
-  },
-  content: {
-    maxWidth: primitiveSpacing[14] * 8,
-    descriptionMaxWidth: primitiveSpacing[12] * 8,
-    stackGap: primitiveSpacing[4],
-    copyGap: primitiveSpacing[2],
-    actionsGap: primitiveSpacing[2]
-  },
-  icon: {
-    size: primitiveSizing.lg,
-    radius: primitiveRadius.lg
-  },
-  typography: {
-    title: {
-      sm: primitiveFontSize.sm,
-      md: primitiveFontSize.base,
-      lg: primitiveFontSize.lg
-    },
-    description: {
-      sm: primitiveFontSize.xs,
-      md: primitiveFontSize.sm,
-      lg: primitiveFontSize.sm
-    },
-    titleWeight: primitiveFontWeight.semibold,
-    titleLineHeight: primitiveSpacing[6],
-    descriptionLineHeight: primitiveSpacing[6]
-  }
-};
 var variantClassName = {
   "blank-slate": "border border-dashed border-border bg-background",
   informational: "border border-border bg-card",
@@ -626,7 +821,7 @@ var iconToneClassName = {
   "no-results": "text-muted-foreground",
   cleared: "text-muted-foreground",
   permission: "text-muted-foreground",
-  error: "text-destructive"
+  error: "text-destructive-strong"
 };
 var emptyStateCssVars = (size) => ({
   "--empty-state-min-height": `${emptyStateTokens.root.minHeight[size]}px`,
@@ -682,7 +877,7 @@ var EmptyStateRoot = ({
   ...props
 }) => {
   const actions = children ?? [action, link].filter(Boolean);
-  const hasActions = React4.Children.toArray(actions).length > 0;
+  const hasActions = React3.Children.toArray(actions).length > 0;
   return /* @__PURE__ */ jsx(
     "section",
     {
@@ -726,16 +921,12 @@ var EmptyStateRoot = ({
   );
 };
 EmptyStateRoot.displayName = "EmptyState.Root";
-var EmptyState = {
-  Root: EmptyStateRoot,
-  Icon: EmptyStateIcon
-};
 var toneVariant = {
   default: "blank-slate",
   branded: "informational",
   subtle: "guide"
 };
-function EmptyState2({
+function EmptyStateSimple({
   title,
   description,
   mascot,
@@ -748,12 +939,12 @@ function EmptyState2({
 }) {
   const visual = mascot ?? icon ?? (tone === "branded" ? /* @__PURE__ */ jsx(BrandMark, { size: size === "lg" ? "lg" : "md" }) : null);
   return /* @__PURE__ */ jsx(
-    EmptyState.Root,
+    EmptyStateRoot,
     {
       action,
       className: cn(tone === "subtle" && "border-0 bg-transparent", className),
       description,
-      icon: visual ? /* @__PURE__ */ jsx(EmptyState.Icon, { icon: visual }) : void 0,
+      icon: visual ? /* @__PURE__ */ jsx(EmptyStateIcon, { icon: visual }) : void 0,
       link: secondaryAction,
       size,
       title,
@@ -761,11 +952,15 @@ function EmptyState2({
     }
   );
 }
-var Slot = React4.forwardRef(
+var EmptyState = Object.assign(EmptyStateSimple, {
+  Root: EmptyStateRoot,
+  Icon: EmptyStateIcon
+});
+var Slot = React3.forwardRef(
   ({ children, className, style, ...props }, ref) => {
-    const childArray = React4.Children.toArray(children);
+    const childArray = React3.Children.toArray(children);
     const child = childArray.length === 1 ? childArray[0] : null;
-    if (child == null || !React4.isValidElement(child)) {
+    if (child == null || !React3.isValidElement(child)) {
       return /* @__PURE__ */ jsx("span", { ref, className, style, ...props, children });
     }
     const childProps = child.props;
@@ -786,7 +981,7 @@ var Slot = React4.forwardRef(
       className: mergedClass,
       style: { ...childProps.style, ...style }
     };
-    return React4.cloneElement(
+    return React3.cloneElement(
       child,
       merged
     );
@@ -798,7 +993,11 @@ 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-[color,background-color,border-color,transform] duration-flow ease-[var(--ease-brand)]",
+    // `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"
@@ -808,7 +1007,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",
@@ -931,10 +1130,10 @@ function Spinner({ className }) {
     }
   );
 }
-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";
+function getIconSizeClass(size, iconSize3) {
+  if (iconSize3 === "sm") return "[&>svg]:size-3.5";
+  if (iconSize3 === "md") return "[&>svg]:size-3.5";
+  if (iconSize3 === "lg") return "[&>svg]:size-4";
   switch (size) {
     case "tiny":
       return "[&>svg]:size-3";
@@ -949,10 +1148,10 @@ function getIconSizeClass(size, iconSize2) {
       return "[&>svg]: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";
+function getSpinnerSizeClass(size, iconSize3) {
+  if (iconSize3 === "sm") return "size-3.5";
+  if (iconSize3 === "md") return "size-3.5";
+  if (iconSize3 === "lg") return "size-4";
   switch (size) {
     case "tiny":
       return "size-3";
@@ -977,10 +1176,10 @@ function resolveShadowClass(shadow) {
   const level = shadow === true ? "md" : shadow;
   return SHADOW_CLASSES[level];
 }
-function ButtonContent({ loading, prefix, suffix, size, iconSize: iconSize2, children }) {
-  const iconSizeClass = getIconSizeClass(size, iconSize2);
+function ButtonContent({ loading, prefix, suffix, size, iconSize: iconSize3, children }) {
+  const iconSizeClass = getIconSizeClass(size, iconSize3);
   return /* @__PURE__ */ jsxs(Fragment, { children: [
-    loading && /* @__PURE__ */ jsx(Spinner, { className: getSpinnerSizeClass(size, iconSize2) }),
+    loading && /* @__PURE__ */ jsx(Spinner, { className: getSpinnerSizeClass(size, iconSize3) }),
     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 })
@@ -991,7 +1190,7 @@ var Button = ({
   variant,
   size,
   shape,
-  iconSize: iconSize2,
+  iconSize: iconSize3,
   asChild = false,
   loading = false,
   disabled,
@@ -1009,7 +1208,7 @@ var Button = ({
     Comp,
     {
       ref,
-      className: cn(buttonVariants({ variant, size, shape, iconSize: iconSize2 }), shadowClass, className),
+      className: cn(buttonVariants({ variant, size, shape, iconSize: iconSize3 }), shadowClass, className),
       disabled: isDisabled,
       "aria-busy": loading || void 0,
       ...props,
@@ -1020,7 +1219,7 @@ var Button = ({
           prefix,
           suffix,
           size,
-          iconSize: iconSize2,
+          iconSize: iconSize3,
           children
         }
       )
@@ -1033,7 +1232,7 @@ var ButtonLink = ({
   variant,
   size,
   shape,
-  iconSize: iconSize2,
+  iconSize: iconSize3,
   prefix,
   suffix,
   shadow,
@@ -1053,7 +1252,7 @@ var ButtonLink = ({
     {
       ref,
       className: cn(
-        buttonVariants({ variant, size, shape, iconSize: iconSize2 }),
+        buttonVariants({ variant, size, shape, iconSize: iconSize3 }),
         shadowClass,
         loading && "pointer-events-none opacity-50",
         className
@@ -1067,7 +1266,7 @@ var ButtonLink = ({
           prefix,
           suffix,
           size,
-          iconSize: iconSize2,
+          iconSize: iconSize3,
           children
         }
       )
@@ -1134,12 +1333,12 @@ var ErrorSurface = ({
           "span",
           {
             "aria-hidden": "true",
-            className: "mt-0.5 flex size-7 shrink-0 items-center justify-center rounded-[var(--radius-sm)] border border-destructive/20 bg-background text-destructive",
+            className: "mt-0.5 flex size-7 shrink-0 items-center justify-center rounded-[var(--radius-sm)] border border-destructive/20 bg-background text-destructive-strong",
             children: /* @__PURE__ */ jsx(Warning, { size: surfaceIconSize[size] })
           }
         ),
         /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
-          label && showLabel ? /* @__PURE__ */ jsx("p", { className: "mb-1 text-xs font-medium uppercase tracking-normal text-destructive", children: label }) : null,
+          label && showLabel ? /* @__PURE__ */ jsx("p", { className: "mb-1 text-xs font-medium uppercase tracking-normal text-destructive-strong", children: label }) : null,
           resolvedTitle ? /* @__PURE__ */ jsx("p", { className: "font-semibold leading-6 text-foreground", children: resolvedTitle }) : null,
           message ? /* @__PURE__ */ jsx("p", { className: cn("leading-5 text-muted-foreground", resolvedTitle && "mt-1"), children: message }) : null,
           resolvedErrorId ? /* @__PURE__ */ jsxs("details", { className: "mt-3 text-xs text-muted-foreground", children: [
@@ -1239,26 +1438,67 @@ function ActionButton({
 FullPageStatus.Accent = function Accent({ children }) {
   return /* @__PURE__ */ jsx("span", { className: "text-neutral-12", children });
 };
+
+// src/tokens/components/interaction.ts
+var interaction = {
+  /**
+   * Pending states. A spinner that flashes for 80ms reads as a glitch; one
+   * that appears and vanishes in 200ms reads as jank. Show only after the
+   * wait is noticeable, then keep it long enough to be read.
+   * Vercel Web Interface Guidelines: show-delay ~150–300ms, minimum visible
+   * ~300–500ms.
+   */
+  pending: { showDelayMs: 200, minVisibleMs: 400 }};
+
+// src/hooks/use-pending-visible.ts
+function usePendingVisible(pending, {
+  showDelayMs = interaction.pending.showDelayMs,
+  minVisibleMs = interaction.pending.minVisibleMs
+} = {}) {
+  const [visible, setVisible] = React3.useState(false);
+  const shownAt = React3.useRef(null);
+  React3.useEffect(() => {
+    {
+      if (visible) return;
+      const timer2 = setTimeout(() => {
+        shownAt.current = Date.now();
+        setVisible(true);
+      }, showDelayMs);
+      return () => clearTimeout(timer2);
+    }
+  }, [pending, visible, showDelayMs, minVisibleMs]);
+  return visible;
+}
 var spinnerSize = {
   small: "h-4 w-4 border-2",
   medium: "h-6 w-6 border-2",
   large: "h-8 w-8 border-4"
 };
 function LoadingState({ message, size = "large" }) {
-  return /* @__PURE__ */ jsxs("div", { className: "flex w-full flex-col items-center justify-center py-10", children: [
-    /* @__PURE__ */ jsx(
-      "span",
-      {
-        className: cn(
-          "inline-block animate-spin rounded-full border-solid border-primary border-r-transparent align-[-0.125em]",
-          spinnerSize[size]
+  const visible = usePendingVisible(true);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "flex w-full flex-col items-center justify-center py-10 transition-opacity duration-flow ease-out",
+        visible ? "opacity-100" : "opacity-0"
+      ),
+      children: [
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            className: cn(
+              "inline-block animate-spin rounded-full border-solid border-primary border-r-transparent align-[-0.125em]",
+              spinnerSize[size]
+            ),
+            role: "status",
+            "aria-label": message ?? "Loading"
+          }
         ),
-        role: "status",
-        "aria-label": message ?? "Loading"
-      }
-    ),
-    message && /* @__PURE__ */ jsx("p", { className: "mt-3 text-sm text-muted-foreground", children: message })
-  ] });
+        message && /* @__PURE__ */ jsx("p", { className: "mt-3 text-sm text-muted-foreground", children: message })
+      ]
+    }
+  );
 }
 function PageHeader({ title, description, actions, className }) {
   return /* @__PURE__ */ jsxs(
@@ -1282,6 +1522,6 @@ function Section({ children, label, className }) {
   return /* @__PURE__ */ jsx("section", { "aria-label": label, className: cn("py-8", className), children });
 }
 
-export { AppShell, Card, Container, DesignSystemProvider, EmptyState2 as EmptyState, ErrorState, FullPageStatus, LoadingState, PageHeader, Section };
+export { AppShell, Card, Container, DesignSystemProvider, EmptyState, ErrorState, FullPageStatus, LoadingState, PageHeader, Section };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map