@nebutra/ui 0.2.3 → 3.0.0

package/dist/components/index.js

@@ -1,8 +1,4 @@
 "use client";
-import { Button as Button$1 } from '@lobehub/ui';
-export { ActionIcon, ActionIconGroup, Alert, Avatar, Button, Checkbox, DraggablePanel, DraggablePanelBody, DraggablePanelContainer, DraggablePanelFooter, DraggablePanelHeader, Flexbox, Form, FormGroup, FormItem, Highlighter, Image, Input, List, Markdown, Menu, Modal, SearchBar, Segmented, Select, SideNav, Tag, TextArea, Tooltip } from '@lobehub/ui';
-export { ChatInputArea, ChatItem, ChatList, MessageInput, MessageModal } from '@lobehub/ui/chat';
-export { default as Spotlight } from '@lobehub/ui/es/awesome/Spotlight/Spotlight';
 import { motion, AnimatePresence, useReducedMotion, m, LazyMotion, domAnimation } from 'framer-motion';
 export { AnimatePresence, LayoutGroup, LazyMotion, MotionConfig, animate, domAnimation, m, motion, useAnimationFrame, useInView, useMotionTemplate, useMotionValue, useReducedMotion, useScroll, useSpring, useTransform, useVelocity } from 'framer-motion';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
@@ -11,9 +7,10 @@ import Image from 'next/image';
 import { Dialog as Dialog$1 } from '@base-ui/react/dialog';
 import * as React5 from 'react';
 import React5__default, { useEffectEvent, useId, useState } from 'react';
-import { colors, emerge, flow, brandSpring } from '@nebutra/brand';
+import { colors, brandSpring, flow, emerge } 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 { cva } from 'class-variance-authority';
 import { Tooltip as Tooltip$1 } from '@base-ui/react/tooltip';
 import { useAsciiText, slant } from 'react-ascii-text';
@@ -23,7 +20,7 @@ import '@xyflow/react/dist/style.css';
 import { wouldCreateCycle } from '@nebutra/graph-model';
 import { Input as Input$1 } from '@base-ui/react/input';
 
-// src/components/index.ts
+// src/shared/animation/motion/index.ts
 
 // src/shared/animation/motion/tokens.ts
 var animationDurations = {
@@ -222,7 +219,7 @@ function PageTransition({ children, ...props }) {
   return /* @__PURE__ */ jsx(motion.div, { initial: "initial", animate: "animate", exit: "exit", variants, ...props, children });
 }
 ({
-  // Nebutra Blue (云毓蓝) — technology & trust — VI: #0033FE
+  // Nebutra Blue (云毓蓝) — technology & trust
   blue50: colors.primary[50],
   blue100: colors.primary[100],
   blue200: colors.primary[200],
@@ -235,7 +232,7 @@ function PageTransition({ children, ...props }) {
   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],
@@ -260,6 +257,13 @@ function PageTransition({ children, ...props }) {
   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
 });
@@ -295,12 +299,23 @@ var primitiveFontSize = {
   xs: 12,
   sm: 14,
   base: 16};
+({
+  /** 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")
+});
 
 // src/tokens/shadows.ts
 var shadowClasses = {
   md: "shadow-md",
-  xl: "shadow-xl",
-  "2xl": "shadow-2xl"};
+  xl: "shadow-xl"};
 
 // src/tokens/components/overlay.ts
 var overlayFocusRingClassName = "outline-none";
@@ -311,33 +326,111 @@ var overlayZIndex = {
   tooltip: 1070
 };
 var overlayClassNames = {
-  backdrop: "fixed inset-0 bg-black/40 backdrop-blur-sm transition-[opacity,display] duration-[var(--motion-duration-flow)] ease-[var(--ease-out)] data-ending-style:opacity-0 data-starting-style:opacity-0 motion-reduce:transition-none",
+  backdrop: (
+    // allow-palette: dialog backdrop dims arbitrary app content behind it, must stay dark in both themes
+    "fixed inset-0 bg-black/40 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"
+  ),
   modalSurface: [
     "fixed left-1/2 top-1/2 grid w-full max-w-lg -translate-x-1/2 -translate-y-1/2 gap-4",
-    "border border-border/60 bg-background/95 p-6 text-foreground backdrop-blur-xl",
+    "bg-background p-6 text-foreground",
     "rounded-[var(--radius-xl)]",
-    shadowClasses["2xl"],
+    "shadow-[0_0_0_1px_var(--edge-soft),var(--elevation-overlay)]",
     "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",
+    "transition-[opacity,transform] duration-[var(--motion-duration-flow)] ease-[var(--ease-brand)]",
+    "data-starting-style:scale-95 data-starting-style:opacity-0 data-ending-style:scale-95 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(" "),
   popoverSurface: [
-    "w-72 rounded-[var(--radius-lg)] border border-border/70 bg-popover/95 p-4 text-popover-foreground backdrop-blur-md",
+    "w-72 origin-[var(--transform-origin)] rounded-[var(--radius-lg)] border border-border/70 bg-popover/95 p-4 text-popover-foreground backdrop-blur-md",
     shadowClasses.xl,
-    "outline-none transition-[opacity,transform,display] duration-[var(--motion-duration-flow)] ease-[var(--ease-out)]",
-    "data-[open]:opacity-100 data-[closed]:opacity-0 data-[closed]:scale-95 data-[open]:scale-100",
+    "outline-none transition-[opacity,transform] duration-[var(--motion-duration-flow)] ease-[var(--ease-brand)]",
+    "data-[open]:opacity-100 data-[closed]:opacity-0 data-[closed]:scale-[0.97] data-[open]:scale-100 data-[closed]:duration-[var(--motion-duration-micro)]",
     "motion-reduce:transition-none motion-reduce:data-[closed]:transform-none motion-reduce:data-[open]: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(" "),
-  closeButton: `absolute right-4 top-4 rounded-[var(--radius-sm)] opacity-70 ring-offset-background ${overlayFocusRingClassName} transition-opacity duration-[var(--motion-duration-micro)] ease-[var(--ease-out)] hover:opacity-100 disabled:pointer-events-none data-[open]:bg-accent data-[open]:text-muted-foreground motion-reduce:transition-none`
+  closeButton: `absolute right-4 top-4 rounded-[var(--radius-sm)] opacity-70 ring-offset-background ${overlayFocusRingClassName} transition-opacity duration-[var(--motion-duration-micro)] ease-[var(--ease-brand)] hover:opacity-100 disabled:pointer-events-none data-[open]:bg-accent data-[open]:text-muted-foreground motion-reduce:transition-none`
+};
+
+// 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));
 }
@@ -516,8 +609,8 @@ function PromptAttachmentPreviews({
             event.stopPropagation();
             onRemove(file);
           },
-          className: "absolute top-1 right-1 rounded-full bg-black/70 p-0.5 opacity-100 transition-opacity motion-reduce:transition-none",
-          children: /* @__PURE__ */ jsx(Cross, { className: "h-3 w-3 text-white" })
+          className: "absolute top-1 right-1 rounded-full bg-foreground/70 p-0.5 opacity-100 transition-opacity motion-reduce:transition-none",
+          children: /* @__PURE__ */ jsx(Cross, { className: "h-3 w-3 text-background" })
         }
       )
     ] }) }, previewKey);
@@ -560,7 +653,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(" "),
@@ -569,7 +667,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",
@@ -833,7 +931,7 @@ var formControlInvalidClassNames = {
   input: "aria-invalid:border-destructive/60 aria-invalid:focus:border-destructive aria-invalid:focus:ring-destructive/20",
   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 {
@@ -868,6 +966,7 @@ var Textarea = ({
   description,
   error,
   fieldClassName,
+  tone = "bordered",
   id,
   onChange,
   onValueChange,
@@ -893,10 +992,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
@@ -936,20 +1035,65 @@ var Textarea = ({
   );
 };
 Textarea.displayName = "Textarea";
-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] = React5.useReducer((count) => count + 1, 0);
+  React5.useEffect(() => {
+    skipDelayListeners.add(tick);
+    return () => {
+      skipDelayListeners.delete(tick);
+    };
+  }, []);
+  return shouldSkipDelay();
+}
+var TooltipInstantContext = React5.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,
@@ -979,25 +1123,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 = React5.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 MAX_VISUALIZER_BARS = 64;
 var VISUALIZER_BAR_STYLES = Array.from({ length: MAX_VISUALIZER_BARS }, (_, index) => ({
@@ -1029,13 +1177,13 @@ var VoiceRecorder = ({
       ),
       children: [
         /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 mb-3", children: [
-          /* @__PURE__ */ jsx("div", { className: "h-2 w-2 rounded-full bg-red-500 animate-pulse" }),
-          /* @__PURE__ */ jsx("span", { className: "font-mono text-sm text-white/80", children: formatRecordingTime(time) })
+          /* @__PURE__ */ jsx("div", { className: "h-2 w-2 rounded-full bg-destructive animate-pulse" }),
+          /* @__PURE__ */ jsx("span", { className: "font-mono text-sm text-muted-foreground", children: formatRecordingTime(time) })
         ] }),
         /* @__PURE__ */ jsx("div", { className: "w-full h-10 flex items-center justify-center gap-0.5 px-4", children: barStyles.map((bar) => /* @__PURE__ */ jsx(
           "div",
           {
-            className: "w-0.5 rounded-full bg-white/50 animate-pulse",
+            className: "w-0.5 rounded-full bg-foreground/50 animate-pulse",
             style: {
               height: bar.height,
               animationDelay: bar.animationDelay,
@@ -1129,7 +1277,8 @@ var PromptInputTextarea = ({ className, onKeyDown, disableAutosize = false, plac
       onKeyDown: handleKeyDown,
       rows: 1,
       style: { "--textarea-min-height": "2rem", ...style },
-      className: cn("resize-none border-0 shadow-none", className),
+      tone: "bare",
+      className: cn("resize-none", className),
       disabled,
       placeholder,
       ...props
@@ -1170,14 +1319,14 @@ var promptModeToneClassName = {
     label: "text-info"
   },
   think: {
-    active: "bg-indigo-500/15 border-indigo-500 text-indigo-500",
-    icon: "text-indigo-500",
-    label: "text-indigo-500"
+    active: "bg-cyan-9/15 border-cyan-9 text-cyan-9",
+    icon: "text-cyan-9",
+    label: "text-cyan-9"
   },
   canvas: {
-    active: "bg-warning/15 border-warning text-warning",
-    icon: "text-warning",
-    label: "text-warning"
+    active: "bg-warning/15 border-warning text-warning-strong",
+    icon: "text-warning-strong",
+    label: "text-warning-strong"
   }
 };
 function PromptModeIcon({ tone, active }) {
@@ -1241,7 +1390,8 @@ function PromptModeActions({
   modes,
   onToggleMode,
   onToggleCanvas,
-  onProcessFile
+  onProcessFile,
+  labels
 }) {
   return /* @__PURE__ */ jsxs(
     "div",
@@ -1251,11 +1401,11 @@ function PromptModeActions({
         isRecording ? "opacity-0 invisible h-0" : "opacity-100 visible"
       ),
       children: [
-        /* @__PURE__ */ jsx(PromptInputAction, { tooltip: "Upload image", children: /* @__PURE__ */ jsx(
+        /* @__PURE__ */ jsx(PromptInputAction, { tooltip: labels.upload, children: /* @__PURE__ */ jsx(
           "button",
           {
             type: "button",
-            "aria-label": "Upload image",
+            "aria-label": labels.upload,
             onClick: () => uploadInputRef.current?.click(),
             className: "flex h-8 w-8 text-muted-foreground cursor-pointer items-center justify-center rounded-full transition-colors hover:bg-accent hover:text-foreground",
             disabled: isRecording,
@@ -1273,8 +1423,7 @@ function PromptModeActions({
               if (file) onProcessFile(file);
               if (event.target) event.target.value = "";
             },
-            accept: "image/*",
-            "aria-label": "Upload image"
+            accept: "image/*"
           }
         ),
         /* @__PURE__ */ jsxs("div", { className: "flex items-center", children: [
@@ -1282,7 +1431,7 @@ function PromptModeActions({
             PromptModeButton,
             {
               active: modes.search,
-              label: "Search",
+              label: labels.search,
               tone: "search",
               onClick: () => onToggleMode("search")
             }
@@ -1292,7 +1441,7 @@ function PromptModeActions({
             PromptModeButton,
             {
               active: modes.think,
-              label: "Think",
+              label: labels.think,
               tone: "think",
               onClick: () => onToggleMode("think")
             }
@@ -1302,7 +1451,7 @@ function PromptModeActions({
             PromptModeButton,
             {
               active: modes.canvas,
-              label: "Canvas",
+              label: labels.canvas,
               tone: "canvas",
               onClick: onToggleCanvas
             }
@@ -1316,13 +1465,14 @@ function PromptSubmitAction({
   isLoading,
   isRecording,
   hasContent,
-  onActivate
+  onActivate,
+  labels
 }) {
   const shouldReduceMotion = useReducedMotion();
   return /* @__PURE__ */ jsx(
     PromptInputAction,
     {
-      tooltip: isLoading ? "Stop generation" : isRecording ? "Stop recording" : hasContent ? "Send message" : "Voice message",
+      tooltip: isLoading ? labels.stopGeneration : isRecording ? labels.stopRecording : hasContent ? labels.sendMessage : labels.voiceMessage,
       children: /* @__PURE__ */ jsx(
         Button,
         {
@@ -1330,7 +1480,7 @@ function PromptSubmitAction({
           size: "icon",
           className: cn(
             "h-8 w-8 rounded-full transition-[background-color,border-color,box-shadow,color,opacity,transform] duration-micro",
-            isRecording ? "bg-transparent hover:bg-accent text-destructive hover:text-destructive/80" : hasContent ? "bg-primary hover:bg-primary/90 text-primary-foreground" : "bg-transparent hover:bg-accent text-muted-foreground hover:text-foreground"
+            isRecording ? "bg-transparent hover:bg-accent text-destructive-strong hover:text-destructive-strong/80" : hasContent ? "bg-primary hover:bg-primary/90 text-primary-foreground" : "bg-transparent hover:bg-accent text-muted-foreground hover:text-accent-foreground"
           ),
           onClick: onActivate,
           disabled: isLoading && !hasContent,
@@ -1338,16 +1488,29 @@ function PromptSubmitAction({
             StopFill,
             {
               className: cn(
-                "h-4 w-4 fill-primary-foreground",
+                "h-4 w-4 fill-current",
                 shouldReduceMotion ? "opacity-100" : "animate-pulse"
               )
             }
-          ) : isRecording ? /* @__PURE__ */ jsx(StopCircle, { className: "h-5 w-5 text-destructive" }) : hasContent ? /* @__PURE__ */ jsx(ArrowUp, { className: "h-4 w-4 text-primary-foreground" }) : /* @__PURE__ */ jsx(Microphone, { className: "h-5 w-5 text-primary-foreground transition-colors" })
+          ) : isRecording ? /* @__PURE__ */ jsx(StopCircle, { className: "h-5 w-5 text-destructive-strong" }) : hasContent ? /* @__PURE__ */ jsx(ArrowUp, { className: "h-4 w-4" }) : /* @__PURE__ */ jsx(Microphone, { className: "h-5 w-5 transition-colors" })
         }
       )
     }
   );
 }
+var DEFAULT_PROMPT_INPUT_BOX_LABELS = {
+  upload: "Upload image",
+  search: "Search",
+  think: "Think",
+  canvas: "Canvas",
+  searchPlaceholder: "Search the web...",
+  thinkPlaceholder: "Think deeply...",
+  canvasPlaceholder: "Create on canvas...",
+  stopGeneration: "Stop generation",
+  stopRecording: "Stop recording",
+  sendMessage: "Send message",
+  voiceMessage: "Voice message"
+};
 var promptInputBoxInitialState = {
   input: "",
   files: [],
@@ -1405,6 +1568,7 @@ var PromptInputBox = (props) => {
     className,
     ref
   } = props;
+  const labels = { ...DEFAULT_PROMPT_INPUT_BOX_LABELS, ...props.labels };
   const [state, dispatch] = React5__default.useReducer(promptInputBoxReducer, promptInputBoxInitialState);
   const {
     input,
@@ -1530,7 +1694,7 @@ var PromptInputBox = (props) => {
               children: /* @__PURE__ */ jsx(
                 PromptInputTextarea,
                 {
-                  placeholder: showSearch ? "Search the web..." : showThink ? "Think deeply..." : showCanvas ? "Create on canvas..." : placeholder,
+                  placeholder: showSearch ? labels.searchPlaceholder : showThink ? labels.thinkPlaceholder : showCanvas ? labels.canvasPlaceholder : placeholder,
                   className: "text-base"
                 }
               )
@@ -1546,7 +1710,8 @@ var PromptInputBox = (props) => {
                 modes: { search: showSearch, think: showThink, canvas: showCanvas },
                 onToggleMode: handleToggleChange,
                 onToggleCanvas: handleCanvasToggle,
-                onProcessFile: processFile
+                onProcessFile: processFile,
+                labels
               }
             ),
             /* @__PURE__ */ jsx(
@@ -1559,7 +1724,8 @@ var PromptInputBox = (props) => {
                   if (isRecording) stopRecording();
                   else if (hasContent) handleSubmit();
                   else startRecording();
-                }
+                },
+                labels
               }
             )
           ] })
@@ -1576,90 +1742,168 @@ var PromptInputBox = (props) => {
   ] });
 };
 PromptInputBox.displayName = "PromptInputBox";
-var emergeTransition = {
-  duration: emerge.transition.duration,
-  ease: [0.16, 1, 0.3, 1]
-};
-var flowTransition = {
-  duration: flow.transition.duration,
-  ease: [0, 0, 0.2, 1]
+
+// src/tokens/motion.ts
+var motionDurations = {
+  /** 300ms — content unveil (slide, expand, accordion, drawer) */
+  reveal: 300};
+var motionVariants = {
+  fadeInUp: {
+    initial: { opacity: 0, transform: "translateY(20px)" },
+    animate: { opacity: 1, transform: "translateY(0px)" },
+    exit: { opacity: 0, transform: "translateY(10px)" }
+  },
+  scaleIn: {
+    initial: { opacity: 0, scale: 0.95 },
+    animate: { opacity: 1, scale: 1 },
+    exit: { opacity: 0, scale: 0.95 }
+  }};
+var staggerContainers = {
+  fast: {
+    initial: {},
+    animate: { transition: { staggerChildren: 0.04, delayChildren: 0 } }
+  },
+  normal: {
+    initial: {},
+    animate: { transition: { staggerChildren: 0.06, delayChildren: 0.04 } }
+  },
+  slow: {
+    initial: {},
+    animate: { transition: { staggerChildren: 0.08, delayChildren: 0.05 } }
+  }
 };
-var defaultSpringTransition = {
-  type: "spring",
-  stiffness: brandSpring.default.stiffness,
-  damping: brandSpring.default.damping,
-  mass: brandSpring.default.mass
+var viewportSettings = {
+  once: { once: true, margin: "-100px" }};
+var fadeInVariant = {
+  initial: { opacity: 0 },
+  animate: { opacity: 1 },
+  exit: { opacity: 0 },
+  transition: { duration: 0.3 }
 };
 var PRESETS = {
+  /** 涌现 — materialize from the cloud (default) */
   emerge: {
     initial: emerge.initial,
     animate: emerge.animate,
     exit: emerge.exit,
-    transition: emergeTransition
+    transition: emerge.transition
   },
+  /** 流动 — stream horizontally */
   flow: {
     initial: flow.initial,
     animate: flow.animate,
     exit: flow.exit,
-    transition: flowTransition
+    transition: flow.transition
   },
-  fade: {
-    initial: { opacity: 0 },
-    animate: { opacity: 1 },
-    exit: { opacity: 0 },
-    transition: { duration: 0.3 }
+  /** Simple fade */
+  fade: fadeInVariant,
+  /** Fade + rise */
+  fadeUp: motionVariants.fadeInUp,
+  /** Scale in */
+  scale: motionVariants.scaleIn,
+  /**
+   * Keyed content swap — short, symmetric, blur-softened. Rises in, sinks out.
+   * Shorter and shallower than `emerge` on purpose: a swap replaces content the
+   * reader is already looking at, so it must resolve inside the reveal rail.
+   * Pair with `AnimateSwap`.
+   */
+  swap: {
+    initial: { opacity: 0, transform: "translateY(10px)", filter: "blur(4px)" },
+    animate: { opacity: 1, transform: "translateY(0px)", filter: "blur(0px)" },
+    exit: { opacity: 0, transform: "translateY(-10px)", filter: "blur(4px)" },
+    transition: { duration: motionDurations.reveal / 1e3 }
   },
-  fadeUp: {
-    initial: { opacity: 0, y: 16 },
-    animate: { opacity: 1, y: 0 },
-    exit: { opacity: 0, y: 16 },
-    transition: defaultSpringTransition
+  /** Off-canvas panel entering from the right edge (drawer, sheet). */
+  slideFromRight: {
+    initial: { transform: "translateX(100%)" },
+    animate: { transform: "translateX(0%)" },
+    exit: { transform: "translateX(100%)" },
+    transition: brandSpring.default
   },
-  scale: {
-    initial: { opacity: 0, scale: 0.95 },
-    animate: { opacity: 1, scale: 1 },
-    exit: { opacity: 0, scale: 0.95 },
-    transition: defaultSpringTransition
+  /** Off-canvas panel entering from the left edge. */
+  slideFromLeft: {
+    initial: { transform: "translateX(-100%)" },
+    animate: { transform: "translateX(0%)" },
+    exit: { transform: "translateX(-100%)" },
+    transition: brandSpring.default
+  },
+  /** Off-canvas panel entering from the top edge (banner, command bar). */
+  slideFromTop: {
+    initial: { transform: "translateY(-100%)" },
+    animate: { transform: "translateY(0%)" },
+    exit: { transform: "translateY(-100%)" },
+    transition: brandSpring.default
+  },
+  /** Off-canvas panel entering from the bottom edge (mobile action sheet). */
+  slideFromBottom: {
+    initial: { transform: "translateY(100%)" },
+    animate: { transform: "translateY(0%)" },
+    exit: { transform: "translateY(100%)" },
+    transition: brandSpring.default
   }
 };
-var STAGGER = { fast: 0.05, normal: 0.1, slow: 0.2 };
 function MotionDiv(props) {
   return /* @__PURE__ */ jsx(LazyMotion, { features: domAnimation, children: /* @__PURE__ */ jsx(m.div, { ...props }) });
 }
 function AnimateIn(props) {
-  const { children, preset = "emerge", delay = 0, duration, inView = false, className } = props;
+  const {
+    children,
+    preset = "fade",
+    delay = 0,
+    duration,
+    inView = false,
+    className,
+    ...rest
+  } = props;
   const shouldReduce = useReducedMotion();
-  const { initial, animate: animate2, exit, transition } = PRESETS[preset];
-  const t = {
-    ...transition,
-    ...delay ? { delay } : {},
+  const base = PRESETS[preset] || PRESETS.fade;
+  const initial = shouldReduce ? { opacity: 0 } : base.initial;
+  const animate2 = shouldReduce ? { opacity: 1 } : base.animate;
+  const exit = shouldReduce ? { opacity: 0 } : "exit" in base ? base.exit : void 0;
+  const transition = {
+    ...shouldReduce ? { duration: 0.15 } : base.transition,
+    delay,
     ...duration ? { duration } : {}
   };
-  if (shouldReduce) return /* @__PURE__ */ jsx("div", { className, children });
   if (inView) {
     return /* @__PURE__ */ jsx(
       MotionDiv,
       {
+        ...rest,
         className,
         initial,
         whileInView: animate2,
-        exit,
-        viewport: { once: true, margin: "-10%" },
-        transition: t,
+        ...exit && { exit },
+        transition,
+        viewport: viewportSettings.once,
         children
       }
     );
   }
-  return /* @__PURE__ */ jsx(MotionDiv, { className, initial, animate: animate2, exit, transition: t, children });
+  return /* @__PURE__ */ jsx(
+    MotionDiv,
+    {
+      ...rest,
+      className,
+      initial,
+      animate: animate2,
+      ...exit && { exit },
+      transition,
+      children
+    }
+  );
+}
+function AnimateSwap(props) {
+  const { swapKey, ...animateInProps } = props;
+  return /* @__PURE__ */ jsx(LazyMotion, { features: domAnimation, children: /* @__PURE__ */ jsx(AnimatePresence, { mode: "wait", children: /* @__PURE__ */ jsx(AnimateIn, { ...animateInProps }, swapKey) }) });
 }
 function AnimateInGroup(props) {
   const { children, stagger = "normal", inView = false, className } = props;
   const shouldReduce = useReducedMotion();
-  const variants = {
-    initial: {},
-    animate: { transition: { staggerChildren: STAGGER[stagger] } }
-  };
-  if (shouldReduce) return /* @__PURE__ */ jsx("div", { className, children });
+  const container = staggerContainers[stagger];
+  if (shouldReduce) {
+    return /* @__PURE__ */ jsx("div", { className, children });
+  }
   if (inView) {
     return /* @__PURE__ */ jsx(
       MotionDiv,
@@ -1667,13 +1911,13 @@ function AnimateInGroup(props) {
         className,
         initial: "initial",
         whileInView: "animate",
-        viewport: { once: true, margin: "-10%" },
-        variants,
+        viewport: viewportSettings.once,
+        variants: container,
         children
       }
     );
   }
-  return /* @__PURE__ */ jsx(MotionDiv, { className, initial: "initial", animate: "animate", variants, children });
+  return /* @__PURE__ */ jsx(MotionDiv, { className, initial: "initial", animate: "animate", variants: container, children });
 }
 function AsciiText({ text, className = "", font = slant }) {
   const asciiTextRef = useAsciiText({
@@ -1716,6 +1960,7 @@ function PopoverContent({
   return /* @__PURE__ */ jsx(Popover$1.Portal, { children: /* @__PURE__ */ jsx(
     Popover$1.Positioner,
     {
+      style: { zIndex: overlayZIndex.popover },
       "data-slot": "popover-positioner",
       sideOffset,
       align,
@@ -1730,7 +1975,7 @@ function PopoverContent({
             overlayPrimitiveClassNames.popoverSurface,
             className
           ),
-          style: { zIndex: overlayZIndex.popover, ...style },
+          style,
           ...props,
           children: [
             children,
@@ -1776,15 +2021,15 @@ function PopoverArrow({
   );
 }
 var TAG_COLOR_MAP = {
-  feature: "bg-[hsl(var(--primary))] text-white",
-  fix: "bg-[var(--status-success)] text-white",
-  breaking: "bg-[var(--status-danger)] text-white",
-  improvement: "bg-[var(--status-warning)] text-white",
-  security: "bg-[var(--status-danger)] text-white",
-  experimental: "bg-[var(--neutral-8)] text-foreground"
+  feature: "bg-primary text-primary-foreground",
+  fix: "bg-success text-success-foreground",
+  breaking: "bg-destructive text-destructive-foreground",
+  improvement: "bg-warning text-warning-foreground",
+  security: "bg-destructive text-destructive-foreground",
+  experimental: "bg-neutral-8 text-foreground"
 };
 var getTagColor = (tag) => {
-  if (!tag) return "bg-[var(--neutral-7)] text-foreground";
+  if (!tag) return "bg-neutral-7 text-foreground";
   return TAG_COLOR_MAP[tag.toLowerCase()] || TAG_COLOR_MAP.feature;
 };
 var getUnreadCount = (entries, lastSeenVersion) => {
@@ -1795,7 +2040,8 @@ var getUnreadCount = (entries, lastSeenVersion) => {
 function ChangelogWidget({
   entries,
   changelogUrl = "/changelog",
-  className
+  className,
+  triggerLabel = "View changelog"
 }) {
   const [isOpen, setIsOpen] = React5.useState(false);
   const [lastSeenVersion, setLastSeenVersion] = React5.useState(null);
@@ -1810,14 +2056,14 @@ function ChangelogWidget({
     /* @__PURE__ */ jsxs(
       PopoverTrigger,
       {
-        "aria-label": "View changelog",
+        "aria-label": triggerLabel,
         className: cn(
           "relative inline-flex items-center justify-center rounded-[var(--radius-lg)] p-2 transition-colors hover:bg-muted",
           className
         ),
         children: [
           /* @__PURE__ */ jsx(Bell, { className: "h-5 w-5 text-muted-foreground" }),
-          unreadCount > 0 && /* @__PURE__ */ jsx("span", { className: "absolute right-0 top-0 flex h-5 w-5 items-center justify-center rounded-full bg-[var(--status-danger)] text-xs font-bold text-white", children: unreadCount > 9 ? "9+" : unreadCount })
+          unreadCount > 0 && /* @__PURE__ */ jsx("span", { className: "absolute right-0 top-0 flex h-5 w-5 items-center justify-center rounded-full bg-destructive text-xs font-bold text-destructive-foreground", children: unreadCount > 9 ? "9+" : unreadCount })
         ]
       }
     ),
@@ -1827,9 +2073,9 @@ function ChangelogWidget({
         align: "end",
         side: "bottom",
         sideOffset: 8,
-        className: "w-80 overflow-hidden rounded-[var(--radius-lg)] border-border bg-white p-0 shadow-lg",
+        className: "w-80 overflow-hidden rounded-[var(--radius-lg)] border-border bg-popover p-0 shadow-lg",
         children: [
-          /* @__PURE__ */ jsx("div", { className: "bg-gradient-to-r from-[var(--blue-3)] to-[var(--cyan-3)] px-4 py-3", children: /* @__PURE__ */ jsx("h3", { className: "font-semibold text-foreground", children: "What's New" }) }),
+          /* @__PURE__ */ jsx("div", { className: "bg-gradient-to-r from-blue-3 to-cyan-3 px-4 py-3", children: /* @__PURE__ */ jsx("h3", { className: "font-semibold text-foreground", children: "What's New" }) }),
           /* @__PURE__ */ jsx("div", { className: "max-h-96 overflow-y-auto", children: recentEntries.length === 0 ? /* @__PURE__ */ jsx("div", { className: "px-4 py-6 text-center text-sm text-muted-foreground", children: "No updates available" }) : recentEntries.map((entry) => /* @__PURE__ */ jsxs(
             "a",
             {
@@ -1938,14 +2184,14 @@ function removeFlowEdge(graph, flowEdgeId, edgeIdentity) {
   };
 }
 var XYFLOW_TOKEN_THEME = {
-  ["--xy-background-pattern-color"]: "var(--neutral-6)",
-  ["--xy-edge-stroke"]: "var(--neutral-8)",
-  ["--xy-connectionline-stroke"]: "var(--neutral-8)",
-  ["--xy-handle-background-color"]: "var(--neutral-9)",
-  ["--xy-handle-border-color"]: "var(--neutral-7)",
-  ["--xy-controls-button-background-color"]: "var(--neutral-2)",
-  ["--xy-controls-button-border-color"]: "var(--neutral-7)",
-  ["--xy-controls-button-color"]: "var(--neutral-11)"
+  "--xy-background-pattern-color": "var(--neutral-6)",
+  "--xy-edge-stroke": "var(--neutral-8)",
+  "--xy-connectionline-stroke": "var(--neutral-8)",
+  "--xy-handle-background-color": "var(--neutral-9)",
+  "--xy-handle-border-color": "var(--neutral-7)",
+  "--xy-controls-button-background-color": "var(--neutral-2)",
+  "--xy-controls-button-border-color": "var(--neutral-7)",
+  "--xy-controls-button-color": "var(--neutral-11)"
 };
 var nodeCardVariants = cva(
   "min-w-[160px] rounded-[var(--radius-lg)] border bg-neutral-2 px-3 py-2 text-neutral-12 shadow-sm transition-colors",
@@ -2032,7 +2278,7 @@ function NodeGraphCanvas({
       setRejection(result.reason);
     }
   };
-  return /* @__PURE__ */ jsx(AnimateIn, { preset: "emerge", children: /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx(
     "div",
     {
       style: XYFLOW_TOKEN_THEME,
@@ -2063,16 +2309,15 @@ function NodeGraphCanvas({
                 id: statusId,
                 role: "alert",
                 "aria-live": "assertive",
-                className: "flex items-center gap-2 rounded-[var(--radius-md)] border border-destructive bg-destructive/10 px-3 py-2 text-sm text-destructive",
+                className: "flex items-center gap-2 rounded-[var(--radius-md)] border border-destructive bg-destructive/10 px-3 py-2 text-sm text-destructive-strong",
                 children: [
                   /* @__PURE__ */ jsx("span", { children: rejection }),
                   /* @__PURE__ */ jsx(
-                    Button$1,
+                    Button,
                     {
-                      size: "small",
-                      type: "text",
-                      icon: /* @__PURE__ */ jsx(CrossSmall, { size: 14 }),
-                      "aria-label": "Dismiss connection error",
+                      size: "sm",
+                      variant: "ghost",
+                      prefix: /* @__PURE__ */ jsx(CrossSmall, { size: 14 }),
                       onClick: () => setRejection(null),
                       children: "Dismiss"
                     }
@@ -2084,7 +2329,7 @@ function NodeGraphCanvas({
         }
       ) })
     }
-  ) });
+  );
 }
 var containerVariants = {
   hidden: { opacity: 0, y: 20 },
@@ -2130,6 +2375,7 @@ function OnboardingChecklist({
   items,
   videoThumbnailUrl,
   videoUrl,
+  playVideoLabel = "Play the video guide",
   className
 }) {
   const shouldReduceMotion = useReducedMotion();
@@ -2151,7 +2397,7 @@ function OnboardingChecklist({
           /* @__PURE__ */ jsx("p", { className: "mt-2 text-muted-foreground", children: description }),
           /* @__PURE__ */ jsx("ul", { className: "mt-6 grid grid-cols-1 sm:grid-cols-2 gap-x-8 gap-y-4", children: items.map((item) => /* @__PURE__ */ jsxs(motion.li, { variants: activeItemVariants, className: "flex flex-col", children: [
             /* @__PURE__ */ jsxs("div", { className: "flex items-start", children: [
-              /* @__PURE__ */ jsx(CheckCircle, { className: "h-5 w-5 text-green-500 mt-0.5 flex-shrink-0" }),
+              /* @__PURE__ */ jsx(CheckCircle, { className: "h-5 w-5 text-success-strong mt-0.5 flex-shrink-0" }),
               /* @__PURE__ */ jsx("span", { className: "ml-3 text-sm font-medium", children: item.text })
             ] }),
             item.helperText && item.helperLink && /* @__PURE__ */ jsxs("div", { className: "ml-8 mt-1 text-xs text-muted-foreground", children: [
@@ -2178,7 +2424,7 @@ function OnboardingChecklist({
                 "button",
                 {
                   type: "button",
-                  "aria-label": "Play the video guide",
+                  "aria-label": playVideoLabel,
                   className: "w-full h-full rounded-[var(--radius-lg)]",
                   children: [
                     /* @__PURE__ */ jsx(
@@ -2390,7 +2636,7 @@ var inputVariants = cva(
        * the ring surrounds the whole group rather than a box inside it.
        */
       tone: {
-        bordered: `border border-input bg-background shadow-xs ${formControlFocusClassNames.input}`,
+        bordered: `border border-input bg-background ${formControlFocusClassNames.input}`,
         bare: "border-0 bg-transparent shadow-none"
       }
     },
@@ -2419,7 +2665,7 @@ var inputControlButtonVariants = cva(
   [
     "absolute right-[var(--input-control-inset)] top-1/2 flex size-[var(--input-control-size)] -translate-y-1/2 items-center justify-center",
     "rounded-[var(--radius-sm)] text-muted-foreground transition-colors duration-micro ease-out",
-    "hover:bg-accent hover:text-foreground",
+    "hover:bg-accent hover:text-accent-foreground",
     "focus-visible:outline-none",
     "disabled:pointer-events-none disabled:opacity-50",
     "[&_svg]:size-[var(--input-control-icon-size)]"
@@ -2429,7 +2675,7 @@ var fieldMessageVariants = cva("text-xs", {
   variants: {
     tone: {
       description: "text-muted-foreground",
-      error: "font-medium text-destructive"
+      error: "font-medium text-destructive-strong"
     }
   }
 });
@@ -2496,6 +2742,7 @@ var Input = ({
     revealable,
     revealLabel = "Show password",
     hideLabel = "Hide password",
+    clearLabel = "Clear input",
     clearOnEscape,
     wrapperClassName,
     fieldClassName,
@@ -2646,7 +2893,7 @@ var Input = ({
           "button",
           {
             type: "button",
-            "aria-label": "Clear input",
+            "aria-label": clearLabel,
             disabled,
             className: inputControlButtonVariants(),
             style: getInputStyle(size, void 0),
@@ -2712,6 +2959,11 @@ var Input = ({
   );
 };
 Input.displayName = "Input";
+var DEFAULT_TEAM_CHAT_LABELS = {
+  moreOptions: "More options",
+  addEmoji: "Add emoji",
+  sendMessage: "Send message"
+};
 function Avatar({ src, alt, isOnline, size = "md" }) {
   const sizeClasses = size === "sm" ? "w-10 h-10" : "w-10 h-10";
   return /* @__PURE__ */ jsxs("div", { className: "relative", children: [
@@ -2720,10 +2972,7 @@ function Avatar({ src, alt, isOnline, size = "md" }) {
       {
         src,
         alt,
-        className: cn(
-          sizeClasses,
-          "rounded-full ring-1 ring-gray-400 dark:ring-gray-600 object-cover"
-        ),
+        className: cn(sizeClasses, "rounded-full ring-1 ring-border object-cover"),
         width: 400,
         height: 400
       }
@@ -2732,8 +2981,8 @@ function Avatar({ src, alt, isOnline, size = "md" }) {
       "span",
       {
         className: cn(
-          "absolute bottom-0 right-0 w-3 h-3 rounded-full ring-2 ring-white dark:ring-black",
-          isOnline ? "bg-green-500" : "bg-[var(--neutral-8)]"
+          "absolute bottom-0 right-0 w-3 h-3 rounded-full ring-2 ring-background",
+          isOnline ? "bg-success" : "bg-neutral-8"
         )
       }
     )
@@ -2747,8 +2996,10 @@ function TeamChat({
   onSendMessage,
   onReactionClick,
   onMoreOptions,
+  labels: labelOverrides,
   className
 }) {
+  const labels = { ...DEFAULT_TEAM_CHAT_LABELS, ...labelOverrides };
   const [selectedSender, setSelectedSender] = useState(null);
   const [inputValue, setInputValue] = useState("");
   const uniqueSenders = Array.from(
@@ -2771,15 +3022,15 @@ function TeamChat({
     "div",
     {
       className: cn(
-        "w-full max-w-[var(--container-content)] mx-auto p-6 bg-white dark:bg-black rounded-[var(--radius-3xl)] shadow-lg flex flex-col h-[550px] border border-border",
+        "w-full max-w-content mx-auto p-6 bg-background rounded-[var(--radius-3xl)] shadow-lg flex flex-col h-[550px] border border-border",
         className
       ),
       children: [
         /* @__PURE__ */ jsxs("header", { className: "flex justify-between items-center border-b border-border pb-3 mb-6", children: [
           /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
-            /* @__PURE__ */ jsx(Users, { className: "w-8 h-8 text-black" }),
+            /* @__PURE__ */ jsx(Users, { className: "w-8 h-8 text-foreground" }),
             /* @__PURE__ */ jsxs("div", { children: [
-              /* @__PURE__ */ jsx("h2", { className: "text-2xl font-semibold text-black", children: chatName }),
+              /* @__PURE__ */ jsx("h2", { className: "text-2xl font-semibold text-foreground", children: chatName }),
               tagline && /* @__PURE__ */ jsx("p", { className: "italic text-sm text-muted-foreground", children: tagline })
             ] })
           ] }),
@@ -2787,7 +3038,7 @@ function TeamChat({
             "button",
             {
               type: "button",
-              "aria-label": "More options",
+              "aria-label": labels.moreOptions,
               onClick: onMoreOptions,
               className: "p-2 rounded-[var(--radius-lg)] hover:bg-muted transition",
               children: /* @__PURE__ */ jsx(MoreHorizontal, { className: "w-6 h-6 text-muted-foreground" })
@@ -2804,7 +3055,7 @@ function TeamChat({
                 onClick: () => setSelectedSender(isSelected ? null : sender.name),
                 className: cn(
                   "flex items-center gap-3 w-full p-3 mb-3 rounded-[var(--radius-lg)] transition-colors",
-                  isSelected ? "bg-black text-white dark:text-black" : "hover:bg-muted text-foreground"
+                  isSelected ? "bg-primary text-primary-foreground" : "hover:bg-muted text-foreground"
                 ),
                 children: [
                   /* @__PURE__ */ jsx(Avatar, { src: sender.avatar, alt: sender.name, isOnline: sender.isOnline }),
@@ -2814,18 +3065,18 @@ function TeamChat({
               sender.name
             );
           }) }),
-          /* @__PURE__ */ jsx("section", { className: "flex-1 p-6 overflow-y-auto bg-white dark:bg-black", children: filteredMessages.length === 0 ? /* @__PURE__ */ jsx("p", { className: "text-center text-muted-foreground", children: "No messages to display." }) : filteredMessages.map((message) => /* @__PURE__ */ jsxs("div", { className: "mb-6 last:mb-0 group border-b border-border pb-4", children: [
+          /* @__PURE__ */ jsx("section", { className: "flex-1 p-6 overflow-y-auto bg-background", children: filteredMessages.length === 0 ? /* @__PURE__ */ jsx("p", { className: "text-center text-muted-foreground", children: "No messages to display." }) : filteredMessages.map((message) => /* @__PURE__ */ jsxs("div", { className: "mb-6 last:mb-0 group border-b border-border pb-4", children: [
             /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-4 mb-2", children: [
               /* @__PURE__ */ jsx(Avatar, { src: message.sender.avatar, alt: message.sender.name }),
               /* @__PURE__ */ jsxs("div", { children: [
-                /* @__PURE__ */ jsx("p", { className: "font-semibold text-black", children: message.sender.name }),
+                /* @__PURE__ */ jsx("p", { className: "font-semibold text-foreground", children: message.sender.name }),
                 /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground", children: message.timestamp })
               ] })
             ] }),
             /* @__PURE__ */ jsx("p", { className: "text-foreground text-lg mb-1", children: message.content }),
             /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between text-sm text-muted-foreground", children: [
               /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
-                message.status === "read" && /* @__PURE__ */ jsx(DoubleCheck, { className: "w-5 h-5 text-green-500" }),
+                message.status === "read" && /* @__PURE__ */ jsx(DoubleCheck, { className: "w-5 h-5 text-success-strong" }),
                 message.status === "delivered" && /* @__PURE__ */ jsx(Check, { className: "w-5 h-5" }),
                 /* @__PURE__ */ jsx("span", { children: message.timestamp })
               ] }),
@@ -2836,7 +3087,7 @@ function TeamChat({
                   onClick: () => onReactionClick?.(message.id, reaction.emoji),
                   className: cn(
                     "px-2 py-1 rounded-[var(--radius-md)] text-sm transition-colors",
-                    reaction.reacted ? "bg-[var(--neutral-5)] text-black" : "bg-muted text-muted-foreground",
+                    reaction.reacted ? "bg-muted text-foreground" : "bg-muted text-muted-foreground",
                     "hover:bg-muted"
                   ),
                   children: [
@@ -2855,7 +3106,7 @@ function TeamChat({
             "button",
             {
               type: "button",
-              "aria-label": "Add emoji",
+              "aria-label": labels.addEmoji,
               className: "p-3 rounded-full bg-muted hover:bg-muted transition",
               children: /* @__PURE__ */ jsx(FacePlus, { className: "w-6 h-6 text-muted-foreground" })
             }
@@ -2874,9 +3125,9 @@ function TeamChat({
             "button",
             {
               type: "button",
-              "aria-label": "Send message",
+              "aria-label": labels.sendMessage,
               onClick: handleSend,
-              className: "p-3 rounded-full bg-black text-white dark:text-black hover:brightness-90 transition",
+              className: "p-3 rounded-full bg-primary text-primary-foreground hover:brightness-90 transition",
               children: /* @__PURE__ */ jsx(PaperAirplane, { className: "w-6 h-6" })
             }
           )
@@ -2886,6 +3137,6 @@ function TeamChat({
   );
 }
 
-export { AnimateIn, AnimateInGroup, AnimatedCard, AnimatedDrawer, AnimatedList, AnimatedModal, AnimatedPopover, AsciiText, ChangelogWidget, FadeIn, ImageViewDialog, MAX_VISUALIZER_BARS, NodeGraphCanvas, OnboardingChecklist, PageTransition, PromptAttachmentPreviews, PromptInputBox, ScaleIn, SlideIn, TeamChat, VISUALIZER_BAR_STYLES, VoiceRecorder, animatedList, animatedListItem, animationDistances, animationDurations, animationEasings, animationSprings, animationTransitions, drawerSurface, fadeIn, formatRecordingTime, getFilePreviewKey, isImageFile, modalSurface, pageTransition, popoverSurface, preventDragDefaults, reducedMotionVariants, scaleIn, slideIn };
+export { AnimateIn, AnimateInGroup, AnimateSwap, AnimatedCard, AnimatedDrawer, AnimatedList, AnimatedModal, AnimatedPopover, AsciiText, ChangelogWidget, DEFAULT_PROMPT_INPUT_BOX_LABELS, DEFAULT_TEAM_CHAT_LABELS, FadeIn, GRAPH_NODE_FLOW_TYPE, ImageViewDialog, MAX_VISUALIZER_BARS, NodeGraphCanvas, OnboardingChecklist, PageTransition, PromptAttachmentPreviews, PromptInputBox, ScaleIn, SlideIn, TeamChat, VISUALIZER_BAR_STYLES, VoiceRecorder, animatedList, animatedListItem, animationDistances, animationDurations, animationEasings, animationSprings, animationTransitions, applyNodePositions, drawerSurface, fadeIn, formatRecordingTime, getFilePreviewKey, graphToFlow, isImageFile, modalSurface, pageTransition, popoverSurface, preventDragDefaults, reducedMotionVariants, removeFlowEdge, removeNode, scaleIn, slideIn, tryAddEdge };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map