@nebutra/ui 2.0.0 → 3.0.0

package/dist/components/index.js

@@ -8,8 +8,9 @@ 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, 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';
@@ -218,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],
@@ -231,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],
@@ -256,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
 });
@@ -291,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";
@@ -307,34 +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-brand)] 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-brand)]",
-    "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 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-brand)]",
-    "data-[open]:opacity-100 data-[closed]:opacity-0 data-[closed]:scale-[0.97] 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: [
     "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-brand)]",
-    "data-starting-style:scale-[0.97] data-starting-style:opacity-0 data-ending-style:scale-[0.97] 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-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));
 }
@@ -513,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);
@@ -557,7 +653,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"
@@ -567,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",
@@ -831,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 {
@@ -866,6 +966,7 @@ var Textarea = ({
   description,
   error,
   fieldClassName,
+  tone = "bordered",
   id,
   onChange,
   onValueChange,
@@ -891,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
@@ -934,8 +1035,18 @@ var Textarea = ({
   );
 };
 Textarea.displayName = "Textarea";
-var DEFAULT_TOOLTIP_DELAY_MS = 150;
-var SKIP_DELAY_WINDOW_MS = 400;
+
+// 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() {
@@ -1066,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,
@@ -1166,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
@@ -1207,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 }) {
@@ -1278,7 +1390,8 @@ function PromptModeActions({
   modes,
   onToggleMode,
   onToggleCanvas,
-  onProcessFile
+  onProcessFile,
+  labels
 }) {
   return /* @__PURE__ */ jsxs(
     "div",
@@ -1288,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,
@@ -1310,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: [
@@ -1319,7 +1431,7 @@ function PromptModeActions({
             PromptModeButton,
             {
               active: modes.search,
-              label: "Search",
+              label: labels.search,
               tone: "search",
               onClick: () => onToggleMode("search")
             }
@@ -1329,7 +1441,7 @@ function PromptModeActions({
             PromptModeButton,
             {
               active: modes.think,
-              label: "Think",
+              label: labels.think,
               tone: "think",
               onClick: () => onToggleMode("think")
             }
@@ -1339,7 +1451,7 @@ function PromptModeActions({
             PromptModeButton,
             {
               active: modes.canvas,
-              label: "Canvas",
+              label: labels.canvas,
               tone: "canvas",
               onClick: onToggleCanvas
             }
@@ -1353,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,
         {
@@ -1367,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-accent-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,
@@ -1375,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: [],
@@ -1442,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,
@@ -1567,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"
                 }
               )
@@ -1583,7 +1710,8 @@ var PromptInputBox = (props) => {
                 modes: { search: showSearch, think: showThink, canvas: showCanvas },
                 onToggleMode: handleToggleChange,
                 onToggleCanvas: handleCanvasToggle,
-                onProcessFile: processFile
+                onProcessFile: processFile,
+                labels
               }
             ),
             /* @__PURE__ */ jsx(
@@ -1596,7 +1724,8 @@ var PromptInputBox = (props) => {
                   if (isRecording) stopRecording();
                   else if (hasContent) handleSubmit();
                   else startRecording();
-                }
+                },
+                labels
               }
             )
           ] })
@@ -1831,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,
@@ -1845,7 +1975,7 @@ function PopoverContent({
             overlayPrimitiveClassNames.popoverSurface,
             className
           ),
-          style: { zIndex: overlayZIndex.popover, ...style },
+          style,
           ...props,
           children: [
             children,
@@ -1891,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) => {
@@ -1910,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);
@@ -1925,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 })
         ]
       }
     ),
@@ -1942,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",
             {
@@ -2178,7 +2309,7 @@ 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(
@@ -2187,7 +2318,6 @@ function NodeGraphCanvas({
                       size: "sm",
                       variant: "ghost",
                       prefix: /* @__PURE__ */ jsx(CrossSmall, { size: 14 }),
-                      "aria-label": "Dismiss connection error",
                       onClick: () => setRejection(null),
                       children: "Dismiss"
                     }
@@ -2245,6 +2375,7 @@ function OnboardingChecklist({
   items,
   videoThumbnailUrl,
   videoUrl,
+  playVideoLabel = "Play the video guide",
   className
 }) {
   const shouldReduceMotion = useReducedMotion();
@@ -2266,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: [
@@ -2293,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(
@@ -2505,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"
       }
     },
@@ -2544,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"
     }
   }
 });
@@ -2611,6 +2742,7 @@ var Input = ({
     revealable,
     revealLabel = "Show password",
     hideLabel = "Hide password",
+    clearLabel = "Clear input",
     clearOnEscape,
     wrapperClassName,
     fieldClassName,
@@ -2761,7 +2893,7 @@ var Input = ({
           "button",
           {
             type: "button",
-            "aria-label": "Clear input",
+            "aria-label": clearLabel,
             disabled,
             className: inputControlButtonVariants(),
             style: getInputStyle(size, void 0),
@@ -2827,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: [
@@ -2835,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
       }
@@ -2847,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"
         )
       }
     )
@@ -2862,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(
@@ -2886,15 +3022,15 @@ function TeamChat({
     "div",
     {
       className: cn(
-        "w-full max-w-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 })
             ] })
           ] }),
@@ -2902,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" })
@@ -2919,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 }),
@@ -2929,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 })
               ] }),
@@ -2951,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: [
@@ -2970,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" })
             }
@@ -2989,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" })
             }
           )
@@ -3001,6 +3137,6 @@ function TeamChat({
   );
 }
 
-export { AnimateIn, AnimateInGroup, AnimateSwap, AnimatedCard, AnimatedDrawer, AnimatedList, AnimatedModal, AnimatedPopover, AsciiText, ChangelogWidget, 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 };
+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