@nebutra/ui 0.2.1 → 0.2.3

package/dist/components/index.js

@@ -1,43 +1,540 @@
 "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 { Spotlight } from '@lobehub/ui/awesome';
 export { ChatInputArea, ChatItem, ChatList, MessageInput, MessageModal } from '@lobehub/ui/chat';
-import { Cross, Paperclip, Globe, Brain, FolderClosed, StopCircle, ArrowUp, Microphone, LoaderCircle, EyeOff, Eye, Bell, ChevronRight, CrossSmall, CheckCircle, PlayCircle, Users, MoreHorizontal, DoubleCheck, Check, FacePlus, PaperAirplane } from '@nebutra/icons';
-import { Square } from '@phosphor-icons/react/dist/ssr';
-import { motion, AnimatePresence, useReducedMotion, LazyMotion, domAnimation, m } from 'framer-motion';
+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';
+import { Cross, Bell, ChevronRight, CrossSmall, CheckCircle, PlayCircle, Users, MoreHorizontal, DoubleCheck, Check, FacePlus, PaperAirplane, Paperclip, StopFill, StopCircle, ArrowUp, Microphone, LoaderCircle, EyeOff, Eye, Globe, Brain, FolderClosed } from '@nebutra/icons';
 import Image from 'next/image';
-import * as React6 from 'react';
-import React6__default, { useId, useState, useMemo, useCallback } from 'react';
-import { cva } from 'class-variance-authority';
+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 { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
-import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { Dialog as Dialog$1 } from '@base-ui/react/dialog';
-import { colors, flow, emerge, brandSpring } from '@nebutra/brand';
+import { cva } from 'class-variance-authority';
 import { Tooltip as Tooltip$1 } from '@base-ui/react/tooltip';
 import { useAsciiText, slant } from 'react-ascii-text';
-import { Handle, Position, ReactFlowProvider, ReactFlow, Background, Controls, Panel } from '@xyflow/react';
+import { Popover as Popover$1 } from '@base-ui/react/popover';
+import { ReactFlowProvider, ReactFlow, Background, Controls, Panel, Handle, Position } from '@xyflow/react';
 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/tokens.ts
+var animationDurations = {
+  instant: 0,
+  micro: 0.1,
+  fast: 0.16,
+  standard: 0.2,
+  reveal: 0.3,
+  page: 0.44
+};
+var animationEasings = {
+  linear: "linear",
+  enter: [0, 0, 0.2, 1],
+  exit: [0.4, 0, 1, 1],
+  standard: [0.4, 0, 0.2, 1],
+  emphasized: [0.16, 1, 0.3, 1]
+};
+var animationSprings = {
+  interactive: { type: "spring", stiffness: 380, damping: 34, mass: 0.8 },
+  layout: { type: "spring", stiffness: 480, damping: 42, mass: 1 },
+  panel: { type: "spring", stiffness: 320, damping: 36, mass: 1 }
+};
+var animationDistances = {
+  xs: 4,
+  sm: 8,
+  md: 16,
+  lg: 24,
+  panel: 32
+};
+var animationTransitions = {
+  instant: { duration: animationDurations.instant },
+  micro: { duration: animationDurations.micro, ease: animationEasings.enter },
+  standard: { duration: animationDurations.standard, ease: animationEasings.enter },
+  reveal: { duration: animationDurations.reveal, ease: animationEasings.emphasized },
+  page: { duration: animationDurations.page, ease: animationEasings.emphasized },
+  layout: animationSprings.layout,
+  panel: animationSprings.panel
+};
+
+// src/shared/animation/motion/variants.ts
+var fadeIn = {
+  initial: { opacity: 0 },
+  animate: { opacity: 1, transition: animationTransitions.standard },
+  exit: { opacity: 0, transition: animationTransitions.micro }
+};
+var scaleIn = {
+  initial: { opacity: 0, scale: 0.96 },
+  animate: { opacity: 1, scale: 1, transition: animationTransitions.reveal },
+  exit: { opacity: 0, scale: 0.98, transition: animationTransitions.micro }
+};
+var slideIn = {
+  up: {
+    initial: { opacity: 0, y: animationDistances.md },
+    animate: { opacity: 1, y: 0, transition: animationTransitions.reveal },
+    exit: { opacity: 0, y: animationDistances.sm, transition: animationTransitions.micro }
+  },
+  down: {
+    initial: { opacity: 0, y: -animationDistances.md },
+    animate: { opacity: 1, y: 0, transition: animationTransitions.reveal },
+    exit: { opacity: 0, y: -animationDistances.sm, transition: animationTransitions.micro }
+  },
+  left: {
+    initial: { opacity: 0, x: animationDistances.md },
+    animate: { opacity: 1, x: 0, transition: animationTransitions.reveal },
+    exit: { opacity: 0, x: animationDistances.sm, transition: animationTransitions.micro }
+  },
+  right: {
+    initial: { opacity: 0, x: -animationDistances.md },
+    animate: { opacity: 1, x: 0, transition: animationTransitions.reveal },
+    exit: { opacity: 0, x: -animationDistances.sm, transition: animationTransitions.micro }
+  }
+};
+var animatedList = {
+  initial: {},
+  animate: { transition: { staggerChildren: 0.06, delayChildren: 0.02 } },
+  exit: { transition: { staggerChildren: 0.03, staggerDirection: -1 } }
+};
+var animatedListItem = {
+  initial: { opacity: 0, y: animationDistances.sm },
+  animate: { opacity: 1, y: 0, transition: animationTransitions.standard },
+  exit: { opacity: 0, y: animationDistances.xs, transition: animationTransitions.micro }
+};
+var modalSurface = {
+  initial: { opacity: 0, scale: 0.98, y: animationDistances.sm },
+  animate: { opacity: 1, scale: 1, y: 0, transition: animationTransitions.panel },
+  exit: {
+    opacity: 0,
+    scale: 0.98,
+    y: animationDistances.xs,
+    transition: animationTransitions.micro
+  }
+};
+var drawerSurface = {
+  left: {
+    initial: { opacity: 0, x: "-100%" },
+    animate: { opacity: 1, x: 0, transition: animationTransitions.panel },
+    exit: { opacity: 0, x: "-100%", transition: animationTransitions.micro }
+  },
+  right: {
+    initial: { opacity: 0, x: "100%" },
+    animate: { opacity: 1, x: 0, transition: animationTransitions.panel },
+    exit: { opacity: 0, x: "100%", transition: animationTransitions.micro }
+  },
+  top: {
+    initial: { opacity: 0, y: "-100%" },
+    animate: { opacity: 1, y: 0, transition: animationTransitions.panel },
+    exit: { opacity: 0, y: "-100%", transition: animationTransitions.micro }
+  },
+  bottom: {
+    initial: { opacity: 0, y: "100%" },
+    animate: { opacity: 1, y: 0, transition: animationTransitions.panel },
+    exit: { opacity: 0, y: "100%", transition: animationTransitions.micro }
+  }
+};
+var popoverSurface = {
+  initial: { opacity: 0, scale: 0.98, y: animationDistances.xs },
+  animate: { opacity: 1, scale: 1, y: 0, transition: animationTransitions.standard },
+  exit: {
+    opacity: 0,
+    scale: 0.98,
+    y: animationDistances.xs,
+    transition: animationTransitions.micro
+  }
+};
+var pageTransition = {
+  initial: { opacity: 0, y: animationDistances.sm },
+  animate: { opacity: 1, y: 0, transition: animationTransitions.page },
+  exit: { opacity: 0, y: -animationDistances.xs, transition: animationTransitions.standard }
+};
+var reducedMotionVariants = {
+  initial: { opacity: 0 },
+  animate: { opacity: 1, transition: animationTransitions.instant },
+  exit: { opacity: 0, transition: animationTransitions.instant }
+};
+function useAccessibleVariants(variants, allowTransform = false) {
+  const shouldReduceMotion = useReducedMotion();
+  return shouldReduceMotion && !allowTransform ? reducedMotionVariants : variants;
+}
+function FadeIn({ children, ...props }) {
+  const variants = useAccessibleVariants(fadeIn);
+  return /* @__PURE__ */ jsx(motion.div, { initial: "initial", animate: "animate", exit: "exit", variants, ...props, children });
+}
+function SlideIn({
+  children,
+  direction = "up",
+  ...props
+}) {
+  const variants = useAccessibleVariants(slideIn[direction]);
+  return /* @__PURE__ */ jsx(motion.div, { initial: "initial", animate: "animate", exit: "exit", variants, ...props, children });
+}
+function ScaleIn({ children, ...props }) {
+  const variants = useAccessibleVariants(scaleIn);
+  return /* @__PURE__ */ jsx(motion.div, { initial: "initial", animate: "animate", exit: "exit", variants, ...props, children });
+}
+function AnimatedCard({ children, ...props }) {
+  return /* @__PURE__ */ jsx(ScaleIn, { whileHover: { y: -2 }, whileTap: { scale: 0.99 }, ...props, children });
+}
+function AnimatedList({ children, ...props }) {
+  const containerVariants2 = useAccessibleVariants(animatedList);
+  const itemVariants2 = useAccessibleVariants(animatedListItem);
+  return /* @__PURE__ */ jsx(
+    motion.div,
+    {
+      initial: "initial",
+      animate: "animate",
+      exit: "exit",
+      variants: containerVariants2,
+      ...props,
+      children: Array.isArray(children) ? children.map((child, index) => /* @__PURE__ */ jsx(motion.div, { variants: itemVariants2, children: child }, index)) : children
+    }
+  );
+}
+function AnimatedModal({ children, open, ...props }) {
+  const variants = useAccessibleVariants(modalSurface);
+  return /* @__PURE__ */ jsx(AnimatePresence, { children: open ? /* @__PURE__ */ jsx(motion.div, { initial: "initial", animate: "animate", exit: "exit", variants, ...props, children }) : null });
+}
+function AnimatedDrawer({
+  children,
+  open,
+  side = "right",
+  ...props
+}) {
+  const variants = useAccessibleVariants(drawerSurface[side]);
+  return /* @__PURE__ */ jsx(AnimatePresence, { children: open ? /* @__PURE__ */ jsx(motion.div, { initial: "initial", animate: "animate", exit: "exit", variants, ...props, children }) : null });
+}
+function AnimatedPopover({
+  children,
+  open,
+  ...props
+}) {
+  const variants = useAccessibleVariants(popoverSurface);
+  return /* @__PURE__ */ jsx(AnimatePresence, { children: open ? /* @__PURE__ */ jsx(motion.div, { initial: "initial", animate: "animate", exit: "exit", variants, ...props, children }) : null });
+}
+function PageTransition({ children, ...props }) {
+  const variants = useAccessibleVariants(pageTransition);
+  return /* @__PURE__ */ jsx(motion.div, { initial: "initial", animate: "animate", exit: "exit", variants, ...props, children });
+}
+({
+  // Nebutra Blue (云毓蓝) — technology & trust — VI: #0033FE
+  blue50: colors.primary[50],
+  blue100: colors.primary[100],
+  blue200: colors.primary[200],
+  blue300: colors.primary[300],
+  blue400: colors.primary[400],
+  blue500: colors.primary[500],
+  // brand primary
+  blue600: colors.primary[600],
+  blue700: colors.primary[700],
+  blue800: colors.primary[800],
+  blue900: colors.primary[900],
+  blue950: colors.primary[950],
+  // Nebutra Cyan (云毓青) — data flow & intelligence — VI: #0BF1C3
+  cyan50: colors.accent[50],
+  cyan100: colors.accent[100],
+  cyan200: colors.accent[200],
+  cyan300: colors.accent[300],
+  cyan400: colors.accent[400],
+  cyan500: colors.accent[500],
+  // brand secondary
+  cyan600: colors.accent[600],
+  cyan700: colors.accent[700],
+  cyan800: colors.accent[800],
+  cyan900: colors.accent[900],
+  cyan950: colors.accent[950],
+  // Neutral (blue-undertone gray scale)
+  neutral50: colors.neutral[50],
+  neutral100: colors.neutral[100],
+  neutral200: colors.neutral[200],
+  neutral300: colors.neutral[300],
+  neutral400: colors.neutral[400],
+  neutral500: colors.neutral[500],
+  neutral600: colors.neutral[600],
+  neutral700: colors.neutral[700],
+  neutral800: colors.neutral[800],
+  neutral900: colors.neutral[900],
+  neutral950: colors.neutral[950],
+  white: colors.white,
+  black: colors.black
+});
+({
+  /** Hero sections, primary CTA buttons, logo fills — VI signature gradient */
+  primary: colors.gradient.primary,
+  /** Hover states, secondary gradient elements */
+  reverse: colors.gradient.primaryReverse,
+  /** Vertical layout dividers, page section separators */
+  vertical: colors.gradient.primaryVertical,
+  /** Background halos, focus glow effects, radial emphasis */
+  radial: colors.gradient.primaryRadial});
+var primitiveSpacing = {
+  1: 4,
+  2: 8,
+  3: 12,
+  4: 16,
+  20: 80,
+  24: 96
+};
+var primitiveSizing = {
+  xs: 20,
+  /** Geist button-specific size (24px). Larger than xs by design. */
+  tiny: 24,
+  sm: 32,
+  md: 40,
+  lg: 48};
+var primitiveRadius = {
+  md: 6,
+  // Geist default — slightly more rounded than 4px
+  lg: 8};
+var primitiveFontSize = {
+  xs: 12,
+  sm: 14,
+  base: 16};
+
+// src/tokens/shadows.ts
+var shadowClasses = {
+  md: "shadow-md",
+  xl: "shadow-xl",
+  "2xl": "shadow-2xl"};
+
+// src/tokens/components/overlay.ts
+var overlayFocusRingClassName = "outline-none";
+var overlayZIndex = {
+  backdrop: 1040,
+  modal: 1050,
+  popover: 1060,
+  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",
+  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",
+    "rounded-[var(--radius-xl)]",
+    shadowClasses["2xl"],
+    "outline-none",
+    "transition-[opacity,transform,display] duration-[var(--motion-duration-flow)] ease-[var(--ease-out)]",
+    "data-starting-style:scale-95 data-starting-style:opacity-0 data-ending-style:scale-95 data-ending-style:opacity-0",
+    "motion-reduce:transition-none motion-reduce:data-starting-style:transform-none motion-reduce:data-ending-style:transform-none"
+  ].join(" "),
+  popoverSurface: [
+    "w-72 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",
+    "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",
+    shadowClasses.md,
+    "transition-[opacity,transform,display] duration-[var(--motion-duration-flow)] ease-[var(--ease-out)]",
+    "data-starting-style:scale-95 data-starting-style:opacity-0 data-ending-style:scale-95 data-ending-style:opacity-0",
+    "motion-reduce:transition-none motion-reduce:data-starting-style:transform-none motion-reduce:data-ending-style:transform-none"
+  ].join(" "),
+  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`
+};
 function cn(...inputs) {
   return twMerge(clsx(inputs));
 }
-var Slot = React6.forwardRef(
+var overlayPrimitiveClassNames = {
+  modalSurface: "rounded-[var(--radius-md)] border-border/70 bg-popover/95 text-popover-foreground shadow-xl",
+  popoverSurface: "rounded-[var(--radius-md)] border-border/70 bg-popover/95 shadow-md"};
+var Dialog = Dialog$1.Root;
+var DialogPortal = Dialog$1.Portal;
+var DialogTrigger = ({
+  asChild,
+  children,
+  ref,
+  ...props
+}) => {
+  if (asChild && React5.isValidElement(children)) {
+    return /* @__PURE__ */ jsx(
+      Dialog$1.Trigger,
+      {
+        ref,
+        ...props,
+        render: children
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(Dialog$1.Trigger, { ref, ...props, children });
+};
+DialogTrigger.displayName = "DialogTrigger";
+var DialogClose = ({
+  asChild,
+  children,
+  ref,
+  ...props
+}) => {
+  if (asChild && React5.isValidElement(children)) {
+    return /* @__PURE__ */ jsx(
+      Dialog$1.Close,
+      {
+        ref,
+        ...props,
+        render: children
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(Dialog$1.Close, { ref, ...props, children });
+};
+DialogClose.displayName = "DialogClose";
+var DialogOverlay = ({
+  className,
+  style,
+  ref,
+  ...props
+}) => /* @__PURE__ */ jsx(
+  Dialog$1.Backdrop,
+  {
+    ref,
+    className: cn(overlayClassNames.backdrop, className),
+    style: { zIndex: overlayZIndex.backdrop, ...style },
+    ...props
+  }
+);
+DialogOverlay.displayName = "DialogOverlay";
+var DialogContent = ({
+  className,
+  children,
+  style,
+  ref,
+  ...props
+}) => /* @__PURE__ */ jsxs(DialogPortal, { children: [
+  /* @__PURE__ */ jsx(DialogOverlay, {}),
+  /* @__PURE__ */ jsxs(
+    Dialog$1.Popup,
+    {
+      ref,
+      className: cn(
+        overlayClassNames.modalSurface,
+        overlayPrimitiveClassNames.modalSurface,
+        className
+      ),
+      style: { zIndex: overlayZIndex.modal, ...style },
+      ...props,
+      children: [
+        children,
+        /* @__PURE__ */ jsxs(DialogClose, { className: overlayClassNames.closeButton, children: [
+          /* @__PURE__ */ jsx(Cross, { className: "h-4 w-4" }),
+          /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Close" })
+        ] })
+      ]
+    }
+  )
+] });
+DialogContent.displayName = "DialogContent";
+var DialogTitle = ({
+  className,
+  ref,
+  ...props
+}) => /* @__PURE__ */ jsx(
+  Dialog$1.Title,
+  {
+    ref,
+    className: cn("text-lg font-semibold leading-none tracking-tight", className),
+    ...props
+  }
+);
+DialogTitle.displayName = "DialogTitle";
+var isImageFile = (file) => file.type.startsWith("image/");
+var getFilePreviewKey = (file) => `${file.name}-${file.size}-${file.lastModified}`;
+var preventDragDefaults = (e) => {
+  e.preventDefault();
+  e.stopPropagation();
+};
+var ImageViewDialog = ({ imageUrl, onClose }) => {
+  const shouldReduceMotion = useReducedMotion();
+  if (!imageUrl) return null;
+  return /* @__PURE__ */ jsx(Dialog, { open: !!imageUrl, onOpenChange: onClose, children: /* @__PURE__ */ jsxs(DialogContent, { className: "p-0 border-none bg-transparent shadow-none max-w-[90vw] md:max-w-[800px]", children: [
+    /* @__PURE__ */ jsx(DialogTitle, { className: "sr-only", children: "Image Preview" }),
+    /* @__PURE__ */ jsx(
+      m.div,
+      {
+        initial: shouldReduceMotion ? { opacity: 1 } : { opacity: 0, scale: 0.95 },
+        animate: { opacity: 1, ...shouldReduceMotion ? {} : { scale: 1 } },
+        exit: shouldReduceMotion ? { opacity: 0 } : { opacity: 0, scale: 0.95 },
+        transition: shouldReduceMotion ? { duration: 0 } : { duration: 0.2, ease: "easeOut" },
+        className: "relative bg-background rounded-[var(--radius-2xl)] overflow-hidden shadow-2xl",
+        children: /* @__PURE__ */ jsx(
+          Image,
+          {
+            src: imageUrl,
+            alt: "Full preview",
+            className: "w-full max-h-[80vh] object-contain rounded-[var(--radius-2xl)]",
+            fill: true,
+            sizes: "(max-width: 768px) 90vw, 800px"
+          }
+        )
+      }
+    )
+  ] }) });
+};
+ImageViewDialog.displayName = "ImageViewDialog";
+function PromptAttachmentPreviews({
+  files,
+  filePreviews,
+  isRecording,
+  onPreview,
+  onRemove
+}) {
+  if (files.length === 0 || isRecording) return null;
+  return /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-2 p-0 pb-1 transition-[background-color,border-color,box-shadow,color,opacity,transform] duration-300 motion-reduce:transition-none", children: files.map((file) => {
+    const previewKey = getFilePreviewKey(file);
+    const preview = filePreviews[previewKey];
+    return /* @__PURE__ */ jsx("div", { className: "relative group h-16 w-16", children: isImageFile(file) && preview && /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          "aria-label": `Preview ${file.name}`,
+          className: "relative h-16 w-16 rounded-[var(--radius-xl)] overflow-hidden cursor-pointer transition-[background-color,border-color,box-shadow,color,opacity,transform] duration-300 motion-reduce:transition-none",
+          onClick: () => onPreview(preview),
+          children: /* @__PURE__ */ jsx(
+            Image,
+            {
+              src: preview,
+              alt: file.name,
+              className: "h-full w-full object-cover",
+              fill: true,
+              sizes: "64px"
+            }
+          )
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          "aria-label": `Remove ${file.name}`,
+          onClick: (event) => {
+            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" })
+        }
+      )
+    ] }) }, previewKey);
+  }) });
+}
+var Slot = React5.forwardRef(
   ({ children, className, style, ...props }, ref) => {
-    const childArray = React6.Children.toArray(children);
+    const childArray = React5.Children.toArray(children);
     const child = childArray.length === 1 ? childArray[0] : null;
-    if (child == null || !React6.isValidElement(child)) {
+    if (child == null || !React5.isValidElement(child)) {
       return /* @__PURE__ */ jsx("span", { ref, className, style, ...props, children });
     }
     const childProps = child.props;
     const mergedRef = (node) => {
       if (typeof ref === "function") ref(node);
       else if (ref) ref.current = node;
-      const childRef = child.ref;
+      const childRef = childProps.ref;
       if (typeof childRef === "function") childRef(node);
       else if (childRef && "current" in childRef) {
         childRef.current = node;
@@ -51,7 +548,7 @@ var Slot = React6.forwardRef(
       className: mergedClass,
       style: { ...childProps.style, ...style }
     };
-    return React6.cloneElement(
+    return React5.cloneElement(
       child,
       merged
     );
@@ -61,17 +558,18 @@ Slot.displayName = "Slot";
 var buttonVariants = cva(
   [
     "inline-flex items-center justify-center gap-2 whitespace-nowrap",
-    "rounded-[var(--radius-md)] text-sm font-medium",
-    "transition-colors duration-150 ease-out",
-    "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+    "rounded-[var(--btn-default-radius,var(--radius-md))]",
+    "text-[length:var(--control-font-size-md,0.875rem)] font-[number:var(--font-weight-medium,500)]",
+    "transition-colors duration-micro ease-out",
     "disabled:pointer-events-none disabled:opacity-50",
     "aria-busy:cursor-wait"
   ].join(" "),
   {
     variants: {
       variant: {
-        default: "bg-primary text-primary-foreground hover:bg-primary/90",
-        ink: "bg-[var(--neutral-12)] text-[var(--neutral-1)] ring-1 ring-inset ring-white/[0.04] hover:bg-[var(--neutral-11)] hover:-translate-y-px active:translate-y-0 transition-[transform,background-color] duration-150",
+        // Recipe-driven via packages/design/tokens/recipe.css (.btn-brand-default)
+        default: "btn-brand-default",
+        ink: "bg-[var(--neutral-12)] text-[var(--neutral-1)] ring-1 ring-inset ring-[color:var(--neutral-1)]/5 hover:bg-[var(--neutral-11)] hover:-translate-y-px active:translate-y-0 transition-[transform,background-color] duration-micro",
         destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90",
         outline: "border border-input bg-background hover:bg-accent hover:text-accent-foreground",
         secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
@@ -81,34 +579,99 @@ var buttonVariants = cva(
         warning: "bg-warning text-warning-foreground hover:bg-warning/90"
       },
       size: {
-        tiny: "h-6 rounded-[var(--radius-sm)] px-2 text-[11px]",
-        // 24px
-        sm: "h-8 rounded-[var(--radius-sm)] px-3 text-xs",
-        // 32px
-        default: "h-10 px-4 py-2",
-        // 40px
-        lg: "h-12 rounded-[var(--radius-lg)] px-5 text-base",
-        // 48px
-        icon: "h-10 w-10"
-        // 40×40px (kept for backward compat)
+        tiny: "h-[var(--control-height-tiny,1.5rem)] rounded-[var(--radius-sm)] px-2 text-[length:var(--control-font-size-tiny,0.6875rem)]",
+        sm: "h-[var(--control-height-sm,2rem)] rounded-[var(--radius-sm)] px-3 text-[length:var(--control-font-size-sm,0.75rem)]",
+        default: "h-[var(--control-height-md,2.5rem)] px-[var(--btn-default-padding-x,1rem)] py-[var(--btn-default-padding-y,0.5rem)]",
+        lg: "h-[var(--control-height-lg,3rem)] rounded-[var(--radius-lg)] px-5 text-[length:var(--control-font-size-lg,1rem)]",
+        icon: "h-[var(--control-height-md,2.5rem)] w-[var(--control-height-md,2.5rem)]"
       },
       shape: {
         default: "",
-        square: "",
-        circle: ""
+        // Radius from --btn-default-radius / --radius-md — brand-switchable.
+        // Do not hardcode rounded-md here; a language must be able to retarget
+        // the corner treatment of every icon trigger at once.
+        square: "rounded-[var(--btn-default-radius,var(--radius-md))]",
+        // Pill radius token, not Tailwind rounded-full — same 9999px default,
+        // but a brand that ships a softer "circle" can override --radius-pill.
+        circle: "rounded-[var(--radius-pill,9999px)]",
+        pill: "rounded-[var(--radius-pill,9999px)]"
+      },
+      // Icon-only box size — orthogonal to `size` (which tunes text-button
+      // height/padding/font together) and to `shape` (which picks the
+      // corner treatment). Only takes effect combined with shape="square"
+      // or shape="circle" (see compoundVariants below); every other
+      // combination ignores it. 28/32/36 cover the icon-trigger sizes that
+      // actually occur in the app — 24/40/48 are already reachable via
+      // shape + size (tiny/default/lg). Heights read --control-height-icon-*
+      // so density-aware Brand Packages can scale them with the ladder.
+      iconSize: {
+        sm: "",
+        // 28px default
+        md: "",
+        // 32px default
+        lg: ""
+        // 36px default
       }
     },
     compoundVariants: [
-      // shape="square" — width = height, no horizontal padding
-      { shape: "square", size: "tiny", className: "w-6 px-0" },
-      { shape: "square", size: "sm", className: "w-8 px-0" },
-      { shape: "square", size: "default", className: "w-10 px-0" },
-      { shape: "square", size: "lg", className: "w-12 px-0" },
-      // shape="circle" — width = height + rounded-full
-      { shape: "circle", size: "tiny", className: "w-6 px-0 rounded-full" },
-      { shape: "circle", size: "sm", className: "w-8 px-0 rounded-full" },
-      { shape: "circle", size: "default", className: "w-10 px-0 rounded-full" },
-      { shape: "circle", size: "lg", className: "w-12 px-0 rounded-full" }
+      { shape: "square", size: "tiny", className: "w-[var(--control-height-tiny,1.5rem)] px-0" },
+      { shape: "square", size: "sm", className: "w-[var(--control-height-sm,2rem)] px-0" },
+      { shape: "square", size: "default", className: "w-[var(--control-height-md,2.5rem)] px-0" },
+      { shape: "square", size: "lg", className: "w-[var(--control-height-lg,3rem)] px-0" },
+      {
+        shape: "circle",
+        size: "tiny",
+        className: "w-[var(--control-height-tiny,1.5rem)] px-0"
+      },
+      {
+        shape: "circle",
+        size: "sm",
+        className: "w-[var(--control-height-sm,2rem)] px-0"
+      },
+      {
+        shape: "circle",
+        size: "default",
+        className: "w-[var(--control-height-md,2.5rem)] px-0"
+      },
+      {
+        shape: "circle",
+        size: "lg",
+        className: "w-[var(--control-height-lg,3rem)] px-0"
+      },
+      // iconSize wins over the size-driven box above — matched on shape +
+      // iconSize only, so it applies regardless of whatever `size` was
+      // passed (or left at its "default" fallback). Corner treatment stays
+      // on the shape variant (token-backed); only the box is set here.
+      {
+        shape: "square",
+        iconSize: "sm",
+        className: "h-[var(--control-height-icon-sm,1.75rem)] w-[var(--control-height-icon-sm,1.75rem)] px-0"
+      },
+      {
+        shape: "square",
+        iconSize: "md",
+        className: "h-[var(--control-height-icon-md,2rem)] w-[var(--control-height-icon-md,2rem)] px-0"
+      },
+      {
+        shape: "square",
+        iconSize: "lg",
+        className: "h-[var(--control-height-icon-lg,2.25rem)] w-[var(--control-height-icon-lg,2.25rem)] px-0"
+      },
+      {
+        shape: "circle",
+        iconSize: "sm",
+        className: "h-[var(--control-height-icon-sm,1.75rem)] w-[var(--control-height-icon-sm,1.75rem)] px-0"
+      },
+      {
+        shape: "circle",
+        iconSize: "md",
+        className: "h-[var(--control-height-icon-md,2rem)] w-[var(--control-height-icon-md,2rem)] px-0"
+      },
+      {
+        shape: "circle",
+        iconSize: "lg",
+        className: "h-[var(--control-height-icon-lg,2.25rem)] w-[var(--control-height-icon-lg,2.25rem)] px-0"
+      }
     ],
     defaultVariants: {
       variant: "default",
@@ -129,7 +692,10 @@ function Spinner({ className }) {
     }
   );
 }
-function getIconSizeClass(size) {
+function getIconSizeClass(size, iconSize) {
+  if (iconSize === "sm") return "[&>svg]:size-3.5";
+  if (iconSize === "md") return "[&>svg]:size-3.5";
+  if (iconSize === "lg") return "[&>svg]:size-4";
   switch (size) {
     case "tiny":
       return "[&>svg]:size-3";
@@ -144,7 +710,10 @@ function getIconSizeClass(size) {
       return "[&>svg]:size-4";
   }
 }
-function getSpinnerSizeClass(size) {
+function getSpinnerSizeClass(size, iconSize) {
+  if (iconSize === "sm") return "size-3.5";
+  if (iconSize === "md") return "size-3.5";
+  if (iconSize === "lg") return "size-4";
   switch (size) {
     case "tiny":
       return "size-3";
@@ -162,269 +731,64 @@ function getSpinnerSizeClass(size) {
 var SHADOW_CLASSES = {
   sm: "shadow-sm",
   md: "shadow-md",
-  lg: "shadow-lg"
+  lg: "shadow-md"
 };
 function resolveShadowClass(shadow) {
   if (!shadow) return void 0;
   const level = shadow === true ? "md" : shadow;
   return SHADOW_CLASSES[level];
 }
-function ButtonContent({ loading, prefix, suffix, size, children }) {
-  const iconSizeClass = getIconSizeClass(size);
+function ButtonContent({ loading, prefix, suffix, size, iconSize, children }) {
+  const iconSizeClass = getIconSizeClass(size, iconSize);
   return /* @__PURE__ */ jsxs(Fragment, { children: [
-    loading && /* @__PURE__ */ jsx(Spinner, { className: getSpinnerSizeClass(size) }),
+    loading && /* @__PURE__ */ jsx(Spinner, { className: getSpinnerSizeClass(size, iconSize) }),
     prefix != null && /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: cn("shrink-0", iconSizeClass), children: prefix }),
     children,
     suffix != null && /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: cn("shrink-0", iconSizeClass), children: suffix })
   ] });
 }
-var Button = React6.forwardRef(
-  ({
-    className,
-    variant,
-    size,
-    shape,
-    asChild = false,
-    loading = false,
-    disabled,
-    prefix,
-    suffix,
-    shadow,
-    children,
-    ...props
-  }, ref) => {
-    const Comp = asChild ? Slot : "button";
-    const isDisabled = disabled ?? loading;
-    const shadowClass = resolveShadowClass(shadow);
-    return /* @__PURE__ */ jsx(
-      Comp,
-      {
-        ref,
-        className: cn(buttonVariants({ variant, size, shape }), shadowClass, className),
-        disabled: isDisabled,
-        "aria-busy": loading || void 0,
-        ...props,
-        children: asChild ? children : /* @__PURE__ */ jsx(ButtonContent, { loading, prefix, suffix, size, children })
-      }
-    );
-  }
-);
-Button.displayName = "Button";
-var ButtonLink = React6.forwardRef(
-  ({
-    className,
-    variant,
-    size,
-    shape,
-    prefix,
-    suffix,
-    shadow,
-    loading = false,
-    children,
-    ...props
-  }, ref) => {
-    const shadowClass = resolveShadowClass(shadow);
-    const loadingProps = loading ? {
-      "aria-busy": "true",
-      "aria-disabled": "true",
-      tabIndex: -1
-    } : {};
-    return /* @__PURE__ */ jsx(
-      "a",
-      {
-        ref,
-        className: cn(
-          buttonVariants({ variant, size, shape }),
-          shadowClass,
-          loading && "pointer-events-none opacity-50",
-          className
-        ),
-        ...loadingProps,
-        ...props,
-        children: /* @__PURE__ */ jsx(ButtonContent, { loading, prefix, suffix, size, children })
-      }
-    );
-  }
-);
-ButtonLink.displayName = "ButtonLink";
-var Dialog = Dialog$1.Root;
-var DialogPortal = Dialog$1.Portal;
-var DialogTrigger = React6.forwardRef(({ asChild, children, ...props }, ref) => {
-  if (asChild && React6.isValidElement(children)) {
-    return /* @__PURE__ */ jsx(
-      Dialog$1.Trigger,
-      {
-        ref,
-        ...props,
-        render: children
-      }
-    );
-  }
-  return /* @__PURE__ */ jsx(Dialog$1.Trigger, { ref, ...props, children });
-});
-DialogTrigger.displayName = "DialogTrigger";
-var DialogClose = React6.forwardRef(({ asChild, children, ...props }, ref) => {
-  if (asChild && React6.isValidElement(children)) {
-    return /* @__PURE__ */ jsx(
-      Dialog$1.Close,
-      {
-        ref,
-        ...props,
-        render: children
-      }
-    );
-  }
-  return /* @__PURE__ */ jsx(Dialog$1.Close, { ref, ...props, children });
-});
-DialogClose.displayName = "DialogClose";
-var DialogOverlay = React6.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
-  Dialog$1.Backdrop,
-  {
-    ref,
-    className: cn(
-      "fixed inset-0 z-50 bg-black/40 backdrop-blur-sm data-ending-style:animate-out data-starting-style:animate-in data-ending-style:fade-out-0 data-starting-style:fade-in-0 duration-300 transition-[opacity,display]",
-      className
-    ),
-    ...props
-  }
-));
-DialogOverlay.displayName = "DialogOverlay";
-var DialogContent = React6.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs(DialogPortal, { children: [
-  /* @__PURE__ */ jsx(DialogOverlay, {}),
-  /* @__PURE__ */ jsxs(
-    Dialog$1.Popup,
+var Button = ({
+  className,
+  variant,
+  size,
+  shape,
+  iconSize,
+  asChild = false,
+  loading = false,
+  disabled,
+  prefix,
+  suffix,
+  shadow,
+  children,
+  ref,
+  ...props
+}) => {
+  const Comp = asChild ? Slot : "button";
+  const isDisabled = Boolean(disabled || loading);
+  const shadowClass = resolveShadowClass(shadow);
+  return /* @__PURE__ */ jsx(
+    Comp,
     {
       ref,
-      className: cn(
-        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border border-border/50 bg-background/90 p-6 shadow-2xl backdrop-blur-xl duration-300 transition-[opacity,transform,display] data-starting-style:animate-in data-ending-style:animate-out data-ending-style:fade-out-0 data-starting-style:fade-in-0 data-ending-style:zoom-out-95 data-starting-style:zoom-in-95 sm:rounded-2xl",
-        className
-      ),
+      className: cn(buttonVariants({ variant, size, shape, iconSize }), shadowClass, className),
+      disabled: isDisabled,
+      "aria-busy": loading || void 0,
       ...props,
-      children: [
-        children,
-        /* @__PURE__ */ jsxs(DialogClose, { className: "absolute right-4 top-4 rounded-[var(--radius-sm)] opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[open]:bg-accent data-[open]:text-muted-foreground", children: [
-          /* @__PURE__ */ jsx(Cross, { className: "h-4 w-4" }),
-          /* @__PURE__ */ jsx("span", { className: "sr-only", children: "Close" })
-        ] })
-      ]
-    }
-  )
-] }));
-DialogContent.displayName = "DialogContent";
-var DialogHeader = React6.forwardRef(
-  ({ className, ...props }, ref) => /* @__PURE__ */ jsx(
-    "div",
-    {
-      ref,
-      className: cn("flex flex-col space-y-1.5 text-center sm:text-left", className),
-      ...props
-    }
-  )
-);
-DialogHeader.displayName = "DialogHeader";
-var DialogFooter = React6.forwardRef(
-  ({ className, ...props }, ref) => /* @__PURE__ */ jsx(
-    "div",
-    {
-      ref,
-      className: cn("flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2", className),
-      ...props
+      children: asChild ? children : /* @__PURE__ */ jsx(
+        ButtonContent,
+        {
+          loading,
+          prefix,
+          suffix,
+          size,
+          iconSize,
+          children
+        }
+      )
     }
-  )
-);
-DialogFooter.displayName = "DialogFooter";
-var DialogTitle = React6.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
-  Dialog$1.Title,
-  {
-    ref,
-    className: cn("text-lg font-semibold leading-none tracking-tight", className),
-    ...props
-  }
-));
-DialogTitle.displayName = "DialogTitle";
-var DialogDescription = React6.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
-  Dialog$1.Description,
-  {
-    ref,
-    className: cn("text-sm text-muted-foreground", className),
-    ...props
-  }
-));
-DialogDescription.displayName = "DialogDescription";
-({
-  // Nebutra Blue (云毓蓝) — technology & trust — VI: #0033FE
-  blue50: colors.primary[50],
-  blue100: colors.primary[100],
-  blue200: colors.primary[200],
-  blue300: colors.primary[300],
-  blue400: colors.primary[400],
-  blue500: colors.primary[500],
-  // brand primary
-  blue600: colors.primary[600],
-  blue700: colors.primary[700],
-  blue800: colors.primary[800],
-  blue900: colors.primary[900],
-  blue950: colors.primary[950],
-  // Nebutra Cyan (云毓青) — data flow & intelligence — VI: #0BF1C3
-  cyan50: colors.accent[50],
-  cyan100: colors.accent[100],
-  cyan200: colors.accent[200],
-  cyan300: colors.accent[300],
-  cyan400: colors.accent[400],
-  cyan500: colors.accent[500],
-  // brand secondary
-  cyan600: colors.accent[600],
-  cyan700: colors.accent[700],
-  cyan800: colors.accent[800],
-  cyan900: colors.accent[900],
-  cyan950: colors.accent[950],
-  // Neutral (blue-undertone gray scale)
-  neutral50: colors.neutral[50],
-  neutral100: colors.neutral[100],
-  neutral200: colors.neutral[200],
-  neutral300: colors.neutral[300],
-  neutral400: colors.neutral[400],
-  neutral500: colors.neutral[500],
-  neutral600: colors.neutral[600],
-  neutral700: colors.neutral[700],
-  neutral800: colors.neutral[800],
-  neutral900: colors.neutral[900],
-  neutral950: colors.neutral[950],
-  white: colors.white,
-  black: colors.black
-});
-({
-  /** Hero sections, primary CTA buttons, logo fills — VI signature gradient */
-  primary: colors.gradient.primary,
-  /** Hover states, secondary gradient elements */
-  reverse: colors.gradient.primaryReverse,
-  /** Vertical layout dividers, page section separators */
-  vertical: colors.gradient.primaryVertical,
-  /** Background halos, focus glow effects, radial emphasis */
-  radial: colors.gradient.primaryRadial});
-var primitiveSpacing = {
-  1: 4,
-  2: 8,
-  3: 12,
-  4: 16,
-  20: 80,
-  24: 96
+  );
 };
-var primitiveSizing = {
-  xs: 20,
-  /** Geist button-specific size (24px). Larger than xs by design. */
-  tiny: 24,
-  sm: 32,
-  md: 40,
-  lg: 48};
-var primitiveRadius = {
-  md: 6,
-  // Geist default — slightly more rounded than 4px
-  lg: 8};
-var primitiveFontSize = {
-  xs: 12,
-  sm: 14,
-  base: 16};
+Button.displayName = "Button";
 
 // src/tokens/components/textarea.ts
 var textareaTokens = {
@@ -454,6 +818,20 @@ var textareaTokens = {
   labelSize: primitiveFontSize.sm,
   focusRingWidth: 3,
   fieldGap: primitiveSpacing[2] - primitiveSpacing[1] / 2};
+
+// src/utils/primitive-props.ts
+function asPlainStyle(style) {
+  if (style == null || typeof style === "function") return {};
+  return style;
+}
+
+// src/primitives/form-control.ts
+var formControlFocusClassNames = {
+  input: "outline-none focus:border-ring focus:ring-[length:var(--input-focus-ring-width)] focus:ring-ring/30",
+  textarea: "outline-none focus:border-ring focus:ring-[length:var(--textarea-focus-ring-width)] focus:ring-ring/30"};
+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";
 function getTextareaStyle(size, style) {
@@ -464,100 +842,99 @@ function getTextareaStyle(size, style) {
     "--textarea-padding-y": `${token.paddingY}px`,
     "--textarea-font-size": `${token.fontSize}px`,
     "--textarea-radius": `${token.radius}px`,
-    "--textarea-focus-ring-width": `${textareaTokens.focusRingWidth}px`,
-    borderRadius: "var(--textarea-radius)",
-    outline: "none",
-    ...style
-  };
-}
-function getTextareaFieldStyle() {
-  return {
-    "--textarea-field-gap": `${textareaTokens.fieldGap}px`,
-    "--textarea-label-size": `${textareaTokens.labelSize}px`
-  };
-}
-function joinDescriptionIds(...ids) {
-  return ids.filter(Boolean).join(" ") || void 0;
-}
-function isInvalid(error, ariaInvalid) {
-  return error === true || typeof error === "string" || ariaInvalid === true || ariaInvalid === "true";
-}
-var Textarea = React6.forwardRef(
-  ({
-    className,
-    style,
-    size = "md",
-    label,
-    description,
-    error,
-    fieldClassName,
-    id,
-    onChange,
-    onValueChange,
-    "aria-describedby": ariaDescribedBy,
-    "aria-invalid": ariaInvalid,
-    ...props
-  }, ref) => {
-    const baseId = React6.useId();
-    const textareaId = id ?? (label || description || typeof error === "string" ? baseId : void 0);
-    const resolvedInvalid = isInvalid(error, ariaInvalid);
-    const descriptionId = description && textareaId ? `${textareaId}-description` : void 0;
-    const errorId = typeof error === "string" && textareaId ? `${textareaId}-error` : void 0;
-    const describedBy = joinDescriptionIds(ariaDescribedBy, descriptionId, errorId);
-    const handleChange = React6.useCallback(
-      (event) => {
-        onValueChange?.(event.currentTarget.value);
-        onChange?.(event);
-      },
-      [onChange, onValueChange]
-    );
-    const control = /* @__PURE__ */ jsx(
-      "textarea",
-      {
-        className: cn(
-          "flex min-h-[var(--textarea-min-height)] w-full resize-y rounded-[var(--textarea-radius)] border border-input bg-background",
-          "px-[var(--textarea-padding-x)] py-[var(--textarea-padding-y)] text-[length:var(--textarea-font-size)] text-foreground shadow-[var(--shadow-xs)]",
-          "transition-[background-color,border-color,box-shadow,color] duration-micro ease-out placeholder:text-muted-foreground",
-          "outline-none focus:border-ring focus:ring-[length:var(--textarea-focus-ring-width)] focus:ring-ring/30",
-          "disabled:cursor-not-allowed disabled:opacity-50 read-only:cursor-default read-only:bg-muted/70",
-          "aria-invalid:border-destructive/60 aria-invalid:focus:border-destructive aria-invalid:focus:ring-destructive/20",
-          className
-        ),
-        ref,
-        id: textareaId,
-        "aria-invalid": resolvedInvalid || void 0,
-        "aria-describedby": describedBy,
-        style: getTextareaStyle(size, style),
-        onChange: handleChange,
-        ...props
-      }
-    );
-    if (!label && !description && typeof error !== "string" && !fieldClassName) {
-      return control;
+    "--textarea-focus-ring-width": `${textareaTokens.focusRingWidth}px`,
+    borderRadius: "var(--textarea-radius)",
+    outline: "none",
+    ...asPlainStyle(style)
+  };
+}
+function getTextareaFieldStyle() {
+  return {
+    "--textarea-field-gap": `${textareaTokens.fieldGap}px`,
+    "--textarea-label-size": `${textareaTokens.labelSize}px`
+  };
+}
+function joinDescriptionIds(...ids) {
+  return ids.filter(Boolean).join(" ") || void 0;
+}
+function isInvalid(error, ariaInvalid) {
+  return error === true || typeof error === "string" || ariaInvalid === true || ariaInvalid === "true";
+}
+var Textarea = ({
+  className,
+  style,
+  size = "md",
+  label,
+  description,
+  error,
+  fieldClassName,
+  id,
+  onChange,
+  onValueChange,
+  "aria-describedby": ariaDescribedBy,
+  "aria-invalid": ariaInvalid,
+  ref,
+  ...props
+}) => {
+  const baseId = React5.useId();
+  const textareaId = id ?? (label || description || typeof error === "string" ? baseId : void 0);
+  const resolvedInvalid = isInvalid(error, ariaInvalid);
+  const descriptionId = description && textareaId ? `${textareaId}-description` : void 0;
+  const errorId = typeof error === "string" && textareaId ? `${textareaId}-error` : void 0;
+  const describedBy = joinDescriptionIds(ariaDescribedBy, descriptionId, errorId);
+  const handleChange = React5.useCallback(
+    (event) => {
+      onValueChange?.(event.currentTarget.value);
+      onChange?.(event);
+    },
+    [onChange, onValueChange]
+  );
+  const control = /* @__PURE__ */ jsx(
+    "textarea",
+    {
+      className: cn(
+        "flex min-h-[var(--textarea-min-height)] w-full resize-y rounded-[var(--textarea-radius)] border border-input bg-background",
+        "px-[var(--textarea-padding-x)] py-[var(--textarea-padding-y)] text-[length:var(--textarea-font-size)] text-foreground shadow-xs",
+        "transition-[background-color,border-color,box-shadow,color] duration-micro ease-out placeholder:text-muted-foreground",
+        formControlFocusClassNames.textarea,
+        "disabled:cursor-not-allowed disabled:opacity-50 read-only:cursor-default read-only:bg-muted/70",
+        formControlInvalidClassNames.textarea,
+        className
+      ),
+      ref,
+      id: textareaId,
+      "aria-invalid": resolvedInvalid || void 0,
+      "aria-describedby": describedBy,
+      style: getTextareaStyle(size, style),
+      onChange: handleChange,
+      ...props
     }
-    return /* @__PURE__ */ jsxs(
-      "div",
-      {
-        "data-slot": "textarea-field",
-        className: cn("grid gap-[var(--textarea-field-gap)]", fieldClassName),
-        style: getTextareaFieldStyle(),
-        children: [
-          label && /* @__PURE__ */ jsx(
-            "label",
-            {
-              htmlFor: textareaId,
-              className: "text-[length:var(--textarea-label-size)] font-medium text-foreground",
-              children: label
-            }
-          ),
-          control,
-          description && !error && /* @__PURE__ */ jsx("p", { id: descriptionId, className: fieldMessageClassName, children: description }),
-          typeof error === "string" && /* @__PURE__ */ jsx("p", { id: errorId, role: "alert", className: fieldErrorClassName, children: error })
-        ]
-      }
-    );
+  );
+  if (!label && !description && typeof error !== "string" && !fieldClassName) {
+    return control;
   }
-);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "data-slot": "textarea-field",
+      className: cn("grid gap-[var(--textarea-field-gap)]", fieldClassName),
+      style: getTextareaFieldStyle(),
+      children: [
+        label && /* @__PURE__ */ jsx(
+          "label",
+          {
+            htmlFor: textareaId,
+            className: "text-[length:var(--textarea-label-size)] font-medium text-foreground",
+            children: label
+          }
+        ),
+        control,
+        description && !error && /* @__PURE__ */ jsx("p", { id: descriptionId, className: fieldMessageClassName, children: description }),
+        typeof error === "string" && /* @__PURE__ */ jsx("p", { id: errorId, role: "alert", className: fieldErrorClassName, children: error })
+      ]
+    }
+  );
+};
 Textarea.displayName = "Textarea";
 var DEFAULT_TOOLTIP_DELAY_MS = 150;
 var TooltipProvider = ({
@@ -574,8 +951,13 @@ var Tooltip = ({
   const delay = delayDuration ?? DEFAULT_TOOLTIP_DELAY_MS;
   return /* @__PURE__ */ jsx(Tooltip$1.Provider, { delay, children: /* @__PURE__ */ jsx(Tooltip$1.Root, { ...props, children }) });
 };
-var TooltipTrigger = React6.forwardRef(({ asChild, children, ...props }, ref) => {
-  if (asChild && React6.isValidElement(children)) {
+var TooltipTrigger = ({
+  asChild,
+  children,
+  ref,
+  ...props
+}) => {
+  if (asChild && React5.isValidElement(children)) {
     return /* @__PURE__ */ jsx(
       Tooltip$1.Trigger,
       {
@@ -586,183 +968,147 @@ var TooltipTrigger = React6.forwardRef(({ asChild, children, ...props }, ref) =>
     );
   }
   return /* @__PURE__ */ jsx(Tooltip$1.Trigger, { ref, ...props, children });
-});
+};
 TooltipTrigger.displayName = "TooltipTrigger";
-var TooltipContent = React6.forwardRef(
-  ({ className, side = "top", align = "center", sideOffset = 4, alignOffset = 0, ...props }, ref) => /* @__PURE__ */ jsx(Tooltip$1.Portal, { children: /* @__PURE__ */ jsx(
-    Tooltip$1.Positioner,
-    {
-      side,
-      align,
-      sideOffset,
-      alignOffset,
-      className: "z-50",
-      children: /* @__PURE__ */ jsx(
-        Tooltip$1.Popup,
-        {
-          ref,
-          className: cn(
-            "z-50 overflow-hidden rounded-xl border bg-background/90 backdrop-blur-md px-3 py-1.5 text-sm text-popover-foreground shadow-xl transition-[opacity,transform,display] duration-200 data-starting-style:animate-in data-starting-style:fade-in-0 data-starting-style:zoom-in-95 data-ending-style:animate-out data-ending-style:fade-out-0 data-ending-style:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
-            className
-          ),
-          ...props
-        }
-      )
-    }
-  ) })
-);
+var TooltipContent = ({
+  className,
+  style,
+  side = "top",
+  align = "center",
+  sideOffset = 4,
+  alignOffset = 0,
+  ref,
+  ...props
+}) => /* @__PURE__ */ jsx(Tooltip$1.Portal, { children: /* @__PURE__ */ jsx(
+  Tooltip$1.Positioner,
+  {
+    side,
+    align,
+    sideOffset,
+    alignOffset,
+    style: { zIndex: overlayZIndex.tooltip },
+    children: /* @__PURE__ */ jsx(
+      Tooltip$1.Popup,
+      {
+        ref,
+        className: cn(overlayClassNames.tooltipSurface, className),
+        style: { zIndex: overlayZIndex.tooltip, ...style },
+        ...props
+      }
+    )
+  }
+) });
 TooltipContent.displayName = "TooltipContent";
-var cn2 = (...classes) => classes.filter(Boolean).join(" ");
+var MAX_VISUALIZER_BARS = 64;
+var VISUALIZER_BAR_STYLES = Array.from({ length: MAX_VISUALIZER_BARS }, (_, index) => ({
+  id: `voice-bar-${index}`,
+  height: `${15 + index * 37 % 86}%`,
+  animationDelay: `${index * 0.05}s`,
+  animationDuration: `${0.5 + index * 17 % 6 / 10}s`
+}));
+var formatRecordingTime = (seconds) => {
+  const mins = Math.floor(seconds / 60);
+  const secs = seconds % 60;
+  return `${mins.toString().padStart(2, "0")}:${secs.toString().padStart(2, "0")}`;
+};
 var VoiceRecorder = ({
   isRecording,
-  onStartRecording,
-  onStopRecording,
+  time,
   visualizerBars = 32
 }) => {
-  const [time, setTime] = React6__default.useState(0);
-  const timerRef = React6__default.useRef(null);
-  React6__default.useEffect(() => {
-    if (isRecording) {
-      onStartRecording();
-      timerRef.current = setInterval(() => setTime((t) => t + 1), 1e3);
-    } else {
-      if (timerRef.current) {
-        clearInterval(timerRef.current);
-        timerRef.current = null;
-      }
-      onStopRecording(time);
-      setTime(0);
-    }
-    return () => {
-      if (timerRef.current) clearInterval(timerRef.current);
-    };
-  }, [isRecording, time, onStartRecording, onStopRecording]);
-  const formatTime = (seconds) => {
-    const mins = Math.floor(seconds / 60);
-    const secs = seconds % 60;
-    return `${mins.toString().padStart(2, "0")}:${secs.toString().padStart(2, "0")}`;
-  };
+  const barStyles = VISUALIZER_BAR_STYLES.slice(
+    0,
+    Math.min(visualizerBars, VISUALIZER_BAR_STYLES.length)
+  );
   return /* @__PURE__ */ jsxs(
     "div",
     {
-      className: cn2(
-        "flex flex-col items-center justify-center w-full transition-all duration-300 py-3",
+      className: cn(
+        "flex flex-col items-center justify-center w-full transition-[background-color,border-color,box-shadow,color,opacity,transform] duration-300 py-3",
         isRecording ? "opacity-100" : "opacity-0 h-0"
       ),
       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: formatTime(time) })
+          /* @__PURE__ */ jsx("span", { className: "font-mono text-sm text-white/80", children: formatRecordingTime(time) })
         ] }),
-        /* @__PURE__ */ jsx("div", { className: "w-full h-10 flex items-center justify-center gap-0.5 px-4", children: [...Array(visualizerBars)].map((_, i) => /* @__PURE__ */ jsx(
+        /* @__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",
             style: {
-              height: `${Math.max(15, Math.random() * 100)}%`,
-              animationDelay: `${i * 0.05}s`,
-              animationDuration: `${0.5 + Math.random() * 0.5}s`
+              height: bar.height,
+              animationDelay: bar.animationDelay,
+              animationDuration: bar.animationDuration
             }
           },
-          i
+          bar.id
         )) })
       ]
     }
   );
 };
-var ImageViewDialog = ({ imageUrl, onClose }) => {
-  if (!imageUrl) return null;
-  return /* @__PURE__ */ jsx(Dialog, { open: !!imageUrl, onOpenChange: onClose, children: /* @__PURE__ */ jsxs(DialogContent, { className: "p-0 border-none bg-transparent shadow-none max-w-[90vw] md:max-w-[800px]", children: [
-    /* @__PURE__ */ jsx(DialogTitle, { className: "sr-only", children: "Image Preview" }),
-    /* @__PURE__ */ jsx(
-      motion.div,
-      {
-        initial: { opacity: 0, scale: 0.95 },
-        animate: { opacity: 1, scale: 1 },
-        exit: { opacity: 0, scale: 0.95 },
-        transition: { duration: 0.2, ease: "easeOut" },
-        className: "relative bg-background rounded-2xl overflow-hidden shadow-2xl",
-        children: /* @__PURE__ */ jsx(
-          Image,
-          {
-            src: imageUrl,
-            alt: "Full preview",
-            className: "w-full max-h-[80vh] object-contain rounded-2xl",
-            fill: true
-          }
-        )
-      }
-    )
-  ] }) });
+VoiceRecorder.displayName = "VoiceRecorder";
+var noopSetPromptValue = (_value) => {
 };
-var PromptInputContext = React6__default.createContext({
-  isLoading: false,
-  value: "",
-  setValue: () => {
-  },
-  maxHeight: 240,
-  onSubmit: void 0,
-  disabled: false
-});
+var PromptInputIsLoadingContext = React5__default.createContext(false);
+var PromptInputValueContext = React5__default.createContext("");
+var PromptInputSetValueContext = React5__default.createContext(noopSetPromptValue);
+var PromptInputMaxHeightContext = React5__default.createContext(240);
+var PromptInputSubmitContext = React5__default.createContext(void 0);
+var PromptInputDisabledContext = React5__default.createContext(false);
 function usePromptInput() {
-  const context = React6__default.useContext(PromptInputContext);
-  if (!context) throw new Error("usePromptInput must be used within a PromptInput");
-  return context;
+  return {
+    isLoading: React5__default.use(PromptInputIsLoadingContext),
+    value: React5__default.use(PromptInputValueContext),
+    setValue: React5__default.use(PromptInputSetValueContext),
+    maxHeight: React5__default.use(PromptInputMaxHeightContext),
+    onSubmit: React5__default.use(PromptInputSubmitContext),
+    disabled: React5__default.use(PromptInputDisabledContext)
+  };
 }
-var PromptInput = React6__default.forwardRef(
-  ({
-    className,
-    isLoading = false,
-    maxHeight = 240,
-    value,
-    onValueChange,
-    onSubmit,
-    children,
-    disabled = false,
-    onDragOver,
-    onDragLeave,
-    onDrop
-  }, ref) => {
-    const [internalValue, setInternalValue] = React6__default.useState(value || "");
-    const handleChange = (newValue) => {
-      setInternalValue(newValue);
-      onValueChange?.(newValue);
-    };
-    return /* @__PURE__ */ jsx(TooltipProvider, { children: /* @__PURE__ */ jsx(
-      PromptInputContext.Provider,
-      {
-        value: {
-          isLoading,
-          value: value ?? internalValue,
-          setValue: onValueChange ?? handleChange,
-          maxHeight,
-          onSubmit,
-          disabled
-        },
-        children: /* @__PURE__ */ jsx(
-          "div",
-          {
-            ref,
-            className: cn2(
-              "rounded-3xl border border-input bg-background p-2 shadow-lg transition-all duration-300",
-              isLoading && "border-destructive/70",
-              className
-            ),
-            onDragOver,
-            onDragLeave,
-            onDrop,
-            children
-          }
-        )
-      }
-    ) });
-  }
-);
+var PromptInput = ({
+  className,
+  isLoading = false,
+  maxHeight = 240,
+  value,
+  onValueChange,
+  onSubmit,
+  children,
+  disabled = false,
+  onDragOver,
+  onDragLeave,
+  onDrop,
+  ref
+}) => {
+  const [internalValue, setInternalValue] = React5__default.useState(value || "");
+  const handleChange = (newValue) => {
+    setInternalValue(newValue);
+    onValueChange?.(newValue);
+  };
+  const promptValue = value ?? internalValue;
+  const setPromptValue = onValueChange ?? handleChange;
+  return /* @__PURE__ */ jsx(TooltipProvider, { children: /* @__PURE__ */ jsx(PromptInputIsLoadingContext.Provider, { value: isLoading, children: /* @__PURE__ */ jsx(PromptInputValueContext.Provider, { value: promptValue, children: /* @__PURE__ */ jsx(PromptInputSetValueContext.Provider, { value: setPromptValue, children: /* @__PURE__ */ jsx(PromptInputMaxHeightContext.Provider, { value: maxHeight, children: /* @__PURE__ */ jsx(PromptInputSubmitContext.Provider, { value: onSubmit, children: /* @__PURE__ */ jsx(PromptInputDisabledContext.Provider, { value: disabled, children: /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref,
+      className: cn(
+        "rounded-[var(--radius-3xl)] border border-input bg-background p-2 shadow-lg transition-[background-color,border-color,box-shadow,color,opacity,transform] duration-300",
+        isLoading && "border-destructive/70",
+        className
+      ),
+      onDragOver,
+      onDragLeave,
+      onDrop,
+      children
+    }
+  ) }) }) }) }) }) }) });
+};
 PromptInput.displayName = "PromptInput";
 var PromptInputTextarea = ({ className, onKeyDown, disableAutosize = false, placeholder, style, ...props }) => {
   const { value, setValue, maxHeight, onSubmit, disabled } = usePromptInput();
-  const textareaRef = React6__default.useRef(null);
-  React6__default.useEffect(() => {
+  const textareaRef = React5__default.useRef(null);
+  React5__default.useEffect(() => {
     if (disableAutosize || !textareaRef.current) return;
     textareaRef.current.style.height = "auto";
     textareaRef.current.style.height = typeof maxHeight === "number" ? `${Math.min(textareaRef.current.scrollHeight, maxHeight)}px` : `min(${textareaRef.current.scrollHeight}px, ${maxHeight})`;
@@ -783,7 +1129,7 @@ var PromptInputTextarea = ({ className, onKeyDown, disableAutosize = false, plac
       onKeyDown: handleKeyDown,
       rows: 1,
       style: { "--textarea-min-height": "2rem", ...style },
-      className: cn2("resize-none border-0 shadow-none focus-visible:ring-0", className),
+      className: cn("resize-none border-0 shadow-none", className),
       disabled,
       placeholder,
       ...props
@@ -794,7 +1140,7 @@ var PromptInputActions = ({
   children,
   className,
   ...props
-}) => /* @__PURE__ */ jsx("div", { className: cn2("flex items-center gap-2", className), ...props, children });
+}) => /* @__PURE__ */ jsx("div", { className: cn("flex items-center gap-2", className), ...props, children });
 var PromptInputAction = ({
   tooltip,
   children,
@@ -817,416 +1163,445 @@ var CustomDivider = () => /* @__PURE__ */ jsx("div", { className: "relative h-6
     }
   }
 ) });
-var PromptInputBox = React6__default.forwardRef(
-  (props, ref) => {
-    const {
-      onSend = () => {
-      },
-      isLoading = false,
-      placeholder = "Type your message here...",
-      className
-    } = props;
-    const [input, setInput] = React6__default.useState("");
-    const [files, setFiles] = React6__default.useState([]);
-    const [filePreviews, setFilePreviews] = React6__default.useState({});
-    const [selectedImage, setSelectedImage] = React6__default.useState(null);
-    const [isRecording, setIsRecording] = React6__default.useState(false);
-    const [showSearch, setShowSearch] = React6__default.useState(false);
-    const [showThink, setShowThink] = React6__default.useState(false);
-    const [showCanvas, setShowCanvas] = React6__default.useState(false);
-    const uploadInputRef = React6__default.useRef(null);
-    const promptBoxRef = React6__default.useRef(null);
-    const handleToggleChange = (value) => {
-      if (value === "search") {
-        setShowSearch((prev) => !prev);
-        setShowThink(false);
-      } else if (value === "think") {
-        setShowThink((prev) => !prev);
-        setShowSearch(false);
+var promptModeToneClassName = {
+  search: {
+    active: "bg-info/15 border-info text-info",
+    icon: "text-info",
+    label: "text-info"
+  },
+  think: {
+    active: "bg-indigo-500/15 border-indigo-500 text-indigo-500",
+    icon: "text-indigo-500",
+    label: "text-indigo-500"
+  },
+  canvas: {
+    active: "bg-warning/15 border-warning text-warning",
+    icon: "text-warning",
+    label: "text-warning"
+  }
+};
+function PromptModeIcon({ tone, active }) {
+  const className = cn("w-4 h-4", active ? promptModeToneClassName[tone].icon : "text-inherit");
+  if (tone === "search") return /* @__PURE__ */ jsx(Globe, { className });
+  if (tone === "think") return /* @__PURE__ */ jsx(Brain, { className });
+  return /* @__PURE__ */ jsx(FolderClosed, { className });
+}
+function PromptModeButton({
+  active,
+  label,
+  tone,
+  onClick
+}) {
+  const toneClassName = promptModeToneClassName[tone];
+  const shouldReduceMotion = useReducedMotion();
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      type: "button",
+      onClick,
+      className: cn(
+        "rounded-full transition-[background-color,border-color,box-shadow,color,opacity,transform] flex items-center gap-1 px-2 py-1 border h-8",
+        active ? toneClassName.active : "bg-transparent border-transparent text-muted-foreground hover:text-foreground"
+      ),
+      children: [
+        /* @__PURE__ */ jsx("div", { className: "w-5 h-5 flex items-center justify-center flex-shrink-0", children: /* @__PURE__ */ jsx(
+          m.div,
+          {
+            animate: shouldReduceMotion ? { opacity: active ? 1 : 0.82 } : { rotate: active ? 360 : 0, scale: active ? 1.1 : 1 },
+            whileHover: shouldReduceMotion ? { opacity: 1 } : {
+              rotate: active ? 360 : 15,
+              scale: 1.1,
+              transition: { type: "spring", stiffness: 300, damping: 10 }
+            },
+            transition: shouldReduceMotion ? { duration: 0 } : { type: "spring", stiffness: 260, damping: 25 },
+            children: /* @__PURE__ */ jsx(PromptModeIcon, { tone, active })
+          }
+        ) }),
+        /* @__PURE__ */ jsx(AnimatePresence, { children: active && /* @__PURE__ */ jsx(
+          m.span,
+          {
+            initial: shouldReduceMotion ? { opacity: 1 } : { width: 0, opacity: 0 },
+            animate: { width: "auto", opacity: 1 },
+            exit: shouldReduceMotion ? { opacity: 0 } : { width: 0, opacity: 0 },
+            transition: shouldReduceMotion ? { duration: 0 } : { duration: 0.2 },
+            className: cn(
+              "text-xs overflow-hidden whitespace-nowrap flex-shrink-0",
+              toneClassName.label
+            ),
+            children: label
+          }
+        ) })
+      ]
+    }
+  );
+}
+function PromptModeActions({
+  uploadInputRef,
+  isRecording,
+  modes,
+  onToggleMode,
+  onToggleCanvas,
+  onProcessFile
+}) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "flex items-center gap-1 transition-opacity duration-300",
+        isRecording ? "opacity-0 invisible h-0" : "opacity-100 visible"
+      ),
+      children: [
+        /* @__PURE__ */ jsx(PromptInputAction, { tooltip: "Upload image", children: /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            "aria-label": "Upload image",
+            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,
+            children: /* @__PURE__ */ jsx(Paperclip, { className: "h-5 w-5 transition-colors" })
+          }
+        ) }),
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            ref: uploadInputRef,
+            type: "file",
+            className: "hidden",
+            onChange: (event) => {
+              const file = event.target.files?.[0];
+              if (file) onProcessFile(file);
+              if (event.target) event.target.value = "";
+            },
+            accept: "image/*",
+            "aria-label": "Upload image"
+          }
+        ),
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center", children: [
+          /* @__PURE__ */ jsx(
+            PromptModeButton,
+            {
+              active: modes.search,
+              label: "Search",
+              tone: "search",
+              onClick: () => onToggleMode("search")
+            }
+          ),
+          /* @__PURE__ */ jsx(CustomDivider, {}),
+          /* @__PURE__ */ jsx(
+            PromptModeButton,
+            {
+              active: modes.think,
+              label: "Think",
+              tone: "think",
+              onClick: () => onToggleMode("think")
+            }
+          ),
+          /* @__PURE__ */ jsx(CustomDivider, {}),
+          /* @__PURE__ */ jsx(
+            PromptModeButton,
+            {
+              active: modes.canvas,
+              label: "Canvas",
+              tone: "canvas",
+              onClick: onToggleCanvas
+            }
+          )
+        ] })
+      ]
+    }
+  );
+}
+function PromptSubmitAction({
+  isLoading,
+  isRecording,
+  hasContent,
+  onActivate
+}) {
+  const shouldReduceMotion = useReducedMotion();
+  return /* @__PURE__ */ jsx(
+    PromptInputAction,
+    {
+      tooltip: isLoading ? "Stop generation" : isRecording ? "Stop recording" : hasContent ? "Send message" : "Voice message",
+      children: /* @__PURE__ */ jsx(
+        Button,
+        {
+          variant: "default",
+          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"
+          ),
+          onClick: onActivate,
+          disabled: isLoading && !hasContent,
+          children: isLoading ? /* @__PURE__ */ jsx(
+            StopFill,
+            {
+              className: cn(
+                "h-4 w-4 fill-primary-foreground",
+                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" })
+        }
+      )
+    }
+  );
+}
+var promptInputBoxInitialState = {
+  input: "",
+  files: [],
+  filePreviews: {},
+  selectedImage: null,
+  isRecording: false,
+  recordingTime: 0,
+  showSearch: false,
+  showThink: false,
+  showCanvas: false
+};
+function promptInputBoxReducer(state, action) {
+  switch (action.type) {
+    case "set-input":
+      return { ...state, input: action.value };
+    case "set-active-file":
+      return { ...state, files: [action.file], filePreviews: {} };
+    case "set-file-preview":
+      return { ...state, filePreviews: { [action.previewKey]: action.preview } };
+    case "remove-file": {
+      const nextPreviews = { ...state.filePreviews };
+      delete nextPreviews[action.previewKey];
+      return {
+        ...state,
+        filePreviews: nextPreviews,
+        files: state.files.filter((file) => getFilePreviewKey(file) !== action.previewKey)
+      };
+    }
+    case "set-selected-image":
+      return { ...state, selectedImage: action.imageUrl };
+    case "toggle-mode":
+      if (action.mode === "search") {
+        return { ...state, showSearch: !state.showSearch, showThink: false };
+      }
+      if (action.mode === "think") {
+        return { ...state, showSearch: false, showThink: !state.showThink };
+      }
+      return { ...state, showCanvas: !state.showCanvas };
+    case "start-recording":
+      return { ...state, recordingTime: 0, isRecording: true };
+    case "tick-recording":
+      return { ...state, recordingTime: state.recordingTime + 1 };
+    case "stop-recording":
+      return { ...state, isRecording: false, recordingTime: 0 };
+    case "reset-composer":
+      return { ...state, input: "", files: [], filePreviews: {} };
+  }
+}
+var PromptInputBox = (props) => {
+  const {
+    onSend = () => {
+    },
+    isLoading = false,
+    placeholder = "Type your message here...",
+    className,
+    ref
+  } = props;
+  const [state, dispatch] = React5__default.useReducer(promptInputBoxReducer, promptInputBoxInitialState);
+  const {
+    input,
+    files,
+    filePreviews,
+    selectedImage,
+    isRecording,
+    recordingTime,
+    showSearch,
+    showThink,
+    showCanvas
+  } = state;
+  const uploadInputRef = React5__default.useRef(null);
+  const promptBoxRef = React5__default.useRef(null);
+  const handleToggleChange = (mode) => dispatch({ type: "toggle-mode", mode });
+  const handleCanvasToggle = () => dispatch({ type: "toggle-mode", mode: "canvas" });
+  const processFile = (file) => {
+    if (!isImageFile(file)) {
+      return;
+    }
+    if (file.size > 10 * 1024 * 1024) {
+      return;
+    }
+    const previewKey = getFilePreviewKey(file);
+    dispatch({ type: "set-active-file", file });
+    const reader = new FileReader();
+    reader.onload = (e) => {
+      const preview = e.target?.result;
+      if (typeof preview === "string") {
+        dispatch({ type: "set-file-preview", previewKey, preview });
       }
     };
-    const handleCanvasToggle = () => setShowCanvas((prev) => !prev);
-    const isImageFile = React6__default.useCallback((file) => file.type.startsWith("image/"), []);
-    const processFile = React6__default.useCallback(
-      (file) => {
-        if (!isImageFile(file)) {
-          return;
-        }
-        if (file.size > 10 * 1024 * 1024) {
-          return;
+    reader.readAsDataURL(file);
+  };
+  const handleDrop = (e) => {
+    preventDragDefaults(e);
+    const droppedFiles = Array.from(e.dataTransfer.files);
+    const firstFile = droppedFiles.find((file) => isImageFile(file));
+    if (firstFile) processFile(firstFile);
+  };
+  const handleRemoveFile = (fileToRemove) => {
+    const previewKey = getFilePreviewKey(fileToRemove);
+    dispatch({ type: "remove-file", previewKey });
+  };
+  const openImageModal = (imageUrl) => dispatch({ type: "set-selected-image", imageUrl });
+  const handlePasteEvent = useEffectEvent((e) => {
+    const items = e.clipboardData?.items;
+    if (!items) return;
+    for (const item of Array.from(items)) {
+      if (item.type.includes("image")) {
+        const file = item.getAsFile();
+        if (file) {
+          e.preventDefault();
+          processFile(file);
+          break;
         }
-        setFiles([file]);
-        const reader = new FileReader();
-        reader.onload = (e) => setFilePreviews({ [file.name]: e.target?.result });
-        reader.readAsDataURL(file);
-      },
-      [isImageFile]
-    );
-    const handleDragOver = React6__default.useCallback((e) => {
-      e.preventDefault();
-      e.stopPropagation();
-    }, []);
-    const handleDragLeave = React6__default.useCallback((e) => {
-      e.preventDefault();
-      e.stopPropagation();
-    }, []);
-    const handleDrop = React6__default.useCallback(
-      (e) => {
-        e.preventDefault();
-        e.stopPropagation();
-        const files2 = Array.from(e.dataTransfer.files);
-        const imageFiles = files2.filter((file) => isImageFile(file));
-        const firstFile = imageFiles[0];
-        if (firstFile) processFile(firstFile);
-      },
-      [isImageFile, processFile]
-    );
-    const handleRemoveFile = (index) => {
-      const fileToRemove = files[index];
-      if (fileToRemove && filePreviews[fileToRemove.name]) {
-        const newPreviews = { ...filePreviews };
-        delete newPreviews[fileToRemove.name];
-        setFilePreviews(newPreviews);
       }
-      setFiles([]);
-    };
-    const openImageModal = (imageUrl) => setSelectedImage(imageUrl);
-    const handlePaste = React6__default.useCallback(
-      (e) => {
-        const items = e.clipboardData?.items;
-        if (!items) return;
-        for (let i = 0; i < items.length; i++) {
-          const item = items[i];
-          if (item && item.type.indexOf("image") !== -1) {
-            const file = item.getAsFile();
-            if (file) {
-              e.preventDefault();
-              processFile(file);
-              break;
+    }
+  });
+  React5__default.useEffect(() => {
+    const handlePaste = (e) => handlePasteEvent(e);
+    document.addEventListener("paste", handlePaste);
+    return () => document.removeEventListener("paste", handlePaste);
+  }, []);
+  React5__default.useEffect(() => {
+    if (!isRecording) return;
+    const timer = window.setInterval(() => dispatch({ type: "tick-recording" }), 1e3);
+    return () => window.clearInterval(timer);
+  }, [isRecording]);
+  const handleSubmit = () => {
+    if (input.trim() || files.length > 0) {
+      let messagePrefix = "";
+      if (showSearch) messagePrefix = "[Search: ";
+      else if (showThink) messagePrefix = "[Think: ";
+      else if (showCanvas) messagePrefix = "[Canvas: ";
+      const formattedInput = messagePrefix ? `${messagePrefix}${input}]` : input;
+      onSend(formattedInput, files);
+      dispatch({ type: "reset-composer" });
+    }
+  };
+  const startRecording = () => dispatch({ type: "start-recording" });
+  const stopRecording = () => {
+    onSend(`[Voice message - ${recordingTime} seconds]`, []);
+    dispatch({ type: "stop-recording" });
+  };
+  const hasContent = input.trim() !== "" || files.length > 0;
+  return /* @__PURE__ */ jsxs(LazyMotion, { features: domAnimation, children: [
+    /* @__PURE__ */ jsxs(
+      PromptInput,
+      {
+        value: input,
+        onValueChange: (value) => dispatch({ type: "set-input", value }),
+        isLoading,
+        onSubmit: handleSubmit,
+        className: cn(
+          "w-full bg-background border-input shadow-lg transition-[background-color,border-color,box-shadow,color,opacity,transform] duration-300 ease-in-out",
+          isRecording && "border-destructive/70",
+          className
+        ),
+        disabled: isLoading || isRecording,
+        ref: ref || promptBoxRef,
+        onDragOver: preventDragDefaults,
+        onDragLeave: preventDragDefaults,
+        onDrop: handleDrop,
+        children: [
+          /* @__PURE__ */ jsx(
+            PromptAttachmentPreviews,
+            {
+              files,
+              filePreviews,
+              isRecording,
+              onPreview: openImageModal,
+              onRemove: handleRemoveFile
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: cn(
+                "transition-[background-color,border-color,box-shadow,color,opacity,transform] duration-300",
+                isRecording ? "h-0 overflow-hidden opacity-0" : "opacity-100"
+              ),
+              children: /* @__PURE__ */ jsx(
+                PromptInputTextarea,
+                {
+                  placeholder: showSearch ? "Search the web..." : showThink ? "Think deeply..." : showCanvas ? "Create on canvas..." : placeholder,
+                  className: "text-base"
+                }
+              )
             }
-          }
-        }
-      },
-      [processFile]
-    );
-    React6__default.useEffect(() => {
-      document.addEventListener("paste", handlePaste);
-      return () => document.removeEventListener("paste", handlePaste);
-    }, [handlePaste]);
-    const handleSubmit = () => {
-      if (input.trim() || files.length > 0) {
-        let messagePrefix = "";
-        if (showSearch) messagePrefix = "[Search: ";
-        else if (showThink) messagePrefix = "[Think: ";
-        else if (showCanvas) messagePrefix = "[Canvas: ";
-        const formattedInput = messagePrefix ? `${messagePrefix}${input}]` : input;
-        onSend(formattedInput, files);
-        setInput("");
-        setFiles([]);
-        setFilePreviews({});
-      }
-    };
-    const handleStartRecording = () => {
-    };
-    const handleStopRecording = (duration) => {
-      setIsRecording(false);
-      onSend(`[Voice message - ${duration} seconds]`, []);
-    };
-    const hasContent = input.trim() !== "" || files.length > 0;
-    return /* @__PURE__ */ jsxs(Fragment, { children: [
-      /* @__PURE__ */ jsxs(
-        PromptInput,
-        {
-          value: input,
-          onValueChange: setInput,
-          isLoading,
-          onSubmit: handleSubmit,
-          className: cn2(
-            "w-full bg-background border-input shadow-lg transition-all duration-300 ease-in-out",
-            isRecording && "border-destructive/70",
-            className
           ),
-          disabled: isLoading || isRecording,
-          ref: ref || promptBoxRef,
-          onDragOver: handleDragOver,
-          onDragLeave: handleDragLeave,
-          onDrop: handleDrop,
-          children: [
-            files.length > 0 && !isRecording && /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-2 p-0 pb-1 transition-all duration-300", children: files.map((file, index) => /* @__PURE__ */ jsx("div", { className: "relative group", children: file.type.startsWith("image/") && filePreviews[file.name] && // biome-ignore lint/a11y/useSemanticElements: ARIA pattern
-            /* @__PURE__ */ jsxs(
-              "div",
-              {
-                role: "button",
-                tabIndex: 0,
-                onKeyDown: (e) => {
-                  if (e.key === "Enter" || e.key === " ") {
-                    e.preventDefault();
-                    const preview = filePreviews[file.name];
-                    if (preview) openImageModal(preview);
-                  }
-                },
-                className: "w-16 h-16 rounded-xl overflow-hidden cursor-pointer transition-all duration-300",
-                onClick: () => {
-                  const preview = filePreviews[file.name];
-                  if (preview) openImageModal(preview);
-                },
-                children: [
-                  /* @__PURE__ */ jsx(
-                    Image,
-                    {
-                      src: filePreviews[file.name] ?? "",
-                      alt: file.name,
-                      className: "h-full w-full object-cover",
-                      fill: true
-                    }
-                  ),
-                  /* @__PURE__ */ jsx(
-                    "button",
-                    {
-                      type: "button",
-                      onClick: (e) => {
-                        e.stopPropagation();
-                        handleRemoveFile(index);
-                      },
-                      className: "absolute top-1 right-1 rounded-full bg-black/70 p-0.5 opacity-100 transition-opacity",
-                      children: /* @__PURE__ */ jsx(Cross, { className: "h-3 w-3 text-white" })
-                    }
-                  )
-                ]
-              }
-            ) }, index)) }),
+          isRecording && /* @__PURE__ */ jsx(VoiceRecorder, { isRecording, time: recordingTime }),
+          /* @__PURE__ */ jsxs(PromptInputActions, { className: "flex items-center justify-between gap-2 p-0 pt-2", children: [
             /* @__PURE__ */ jsx(
-              "div",
+              PromptModeActions,
               {
-                className: cn2(
-                  "transition-all duration-300",
-                  isRecording ? "h-0 overflow-hidden opacity-0" : "opacity-100"
-                ),
-                children: /* @__PURE__ */ jsx(
-                  PromptInputTextarea,
-                  {
-                    placeholder: showSearch ? "Search the web..." : showThink ? "Think deeply..." : showCanvas ? "Create on canvas..." : placeholder,
-                    className: "text-base"
-                  }
-                )
+                uploadInputRef,
+                isRecording,
+                modes: { search: showSearch, think: showThink, canvas: showCanvas },
+                onToggleMode: handleToggleChange,
+                onToggleCanvas: handleCanvasToggle,
+                onProcessFile: processFile
               }
             ),
-            isRecording && /* @__PURE__ */ jsx(
-              VoiceRecorder,
+            /* @__PURE__ */ jsx(
+              PromptSubmitAction,
               {
+                isLoading,
                 isRecording,
-                onStartRecording: handleStartRecording,
-                onStopRecording: handleStopRecording
-              }
-            ),
-            /* @__PURE__ */ jsxs(PromptInputActions, { className: "flex items-center justify-between gap-2 p-0 pt-2", children: [
-              /* @__PURE__ */ jsxs(
-                "div",
-                {
-                  className: cn2(
-                    "flex items-center gap-1 transition-opacity duration-300",
-                    isRecording ? "opacity-0 invisible h-0" : "opacity-100 visible"
-                  ),
-                  children: [
-                    /* @__PURE__ */ jsx(PromptInputAction, { tooltip: "Upload image", children: /* @__PURE__ */ jsxs(
-                      "button",
-                      {
-                        type: "button",
-                        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,
-                        children: [
-                          /* @__PURE__ */ jsx(Paperclip, { className: "h-5 w-5 transition-colors" }),
-                          /* @__PURE__ */ jsx(
-                            "input",
-                            {
-                              ref: uploadInputRef,
-                              type: "file",
-                              className: "hidden",
-                              onChange: (e) => {
-                                const file = e.target.files?.[0];
-                                if (file) processFile(file);
-                                if (e.target) e.target.value = "";
-                              },
-                              accept: "image/*"
-                            }
-                          )
-                        ]
-                      }
-                    ) }),
-                    /* @__PURE__ */ jsxs("div", { className: "flex items-center", children: [
-                      /* @__PURE__ */ jsxs(
-                        "button",
-                        {
-                          type: "button",
-                          onClick: () => handleToggleChange("search"),
-                          className: cn2(
-                            "rounded-full transition-all flex items-center gap-1 px-2 py-1 border h-8",
-                            showSearch ? "bg-info/15 border-info text-info" : "bg-transparent border-transparent text-muted-foreground hover:text-foreground"
-                          ),
-                          children: [
-                            /* @__PURE__ */ jsx("div", { className: "w-5 h-5 flex items-center justify-center flex-shrink-0", children: /* @__PURE__ */ jsx(
-                              motion.div,
-                              {
-                                animate: { rotate: showSearch ? 360 : 0, scale: showSearch ? 1.1 : 1 },
-                                whileHover: {
-                                  rotate: showSearch ? 360 : 15,
-                                  scale: 1.1,
-                                  transition: { type: "spring", stiffness: 300, damping: 10 }
-                                },
-                                transition: { type: "spring", stiffness: 260, damping: 25 },
-                                children: /* @__PURE__ */ jsx(Globe, { className: cn2("w-4 h-4", showSearch ? "text-info" : "text-inherit") })
-                              }
-                            ) }),
-                            /* @__PURE__ */ jsx(AnimatePresence, { children: showSearch && /* @__PURE__ */ jsx(
-                              motion.span,
-                              {
-                                initial: { width: 0, opacity: 0 },
-                                animate: { width: "auto", opacity: 1 },
-                                exit: { width: 0, opacity: 0 },
-                                transition: { duration: 0.2 },
-                                className: "text-xs overflow-hidden whitespace-nowrap text-info flex-shrink-0",
-                                children: "Search"
-                              }
-                            ) })
-                          ]
-                        }
-                      ),
-                      /* @__PURE__ */ jsx(CustomDivider, {}),
-                      /* @__PURE__ */ jsxs(
-                        "button",
-                        {
-                          type: "button",
-                          onClick: () => handleToggleChange("think"),
-                          className: cn2(
-                            "rounded-full transition-all flex items-center gap-1 px-2 py-1 border h-8",
-                            showThink ? "bg-indigo-500/15 border-indigo-500 text-indigo-500" : "bg-transparent border-transparent text-muted-foreground hover:text-foreground"
-                          ),
-                          children: [
-                            /* @__PURE__ */ jsx("div", { className: "w-5 h-5 flex items-center justify-center flex-shrink-0", children: /* @__PURE__ */ jsx(
-                              motion.div,
-                              {
-                                animate: { rotate: showThink ? 360 : 0, scale: showThink ? 1.1 : 1 },
-                                whileHover: {
-                                  rotate: showThink ? 360 : 15,
-                                  scale: 1.1,
-                                  transition: { type: "spring", stiffness: 300, damping: 10 }
-                                },
-                                transition: { type: "spring", stiffness: 260, damping: 25 },
-                                children: /* @__PURE__ */ jsx(
-                                  Brain,
-                                  {
-                                    className: cn2("w-4 h-4", showThink ? "text-indigo-500" : "text-inherit")
-                                  }
-                                )
-                              }
-                            ) }),
-                            /* @__PURE__ */ jsx(AnimatePresence, { children: showThink && /* @__PURE__ */ jsx(
-                              motion.span,
-                              {
-                                initial: { width: 0, opacity: 0 },
-                                animate: { width: "auto", opacity: 1 },
-                                exit: { width: 0, opacity: 0 },
-                                transition: { duration: 0.2 },
-                                className: "text-xs overflow-hidden whitespace-nowrap text-indigo-500 flex-shrink-0",
-                                children: "Think"
-                              }
-                            ) })
-                          ]
-                        }
-                      ),
-                      /* @__PURE__ */ jsx(CustomDivider, {}),
-                      /* @__PURE__ */ jsxs(
-                        "button",
-                        {
-                          type: "button",
-                          onClick: handleCanvasToggle,
-                          className: cn2(
-                            "rounded-full transition-all flex items-center gap-1 px-2 py-1 border h-8",
-                            showCanvas ? "bg-warning/15 border-warning text-warning" : "bg-transparent border-transparent text-muted-foreground hover:text-foreground"
-                          ),
-                          children: [
-                            /* @__PURE__ */ jsx("div", { className: "w-5 h-5 flex items-center justify-center flex-shrink-0", children: /* @__PURE__ */ jsx(
-                              motion.div,
-                              {
-                                animate: { rotate: showCanvas ? 360 : 0, scale: showCanvas ? 1.1 : 1 },
-                                whileHover: {
-                                  rotate: showCanvas ? 360 : 15,
-                                  scale: 1.1,
-                                  transition: { type: "spring", stiffness: 300, damping: 10 }
-                                },
-                                transition: { type: "spring", stiffness: 260, damping: 25 },
-                                children: /* @__PURE__ */ jsx(
-                                  FolderClosed,
-                                  {
-                                    className: cn2("w-4 h-4", showCanvas ? "text-warning" : "text-inherit")
-                                  }
-                                )
-                              }
-                            ) }),
-                            /* @__PURE__ */ jsx(AnimatePresence, { children: showCanvas && /* @__PURE__ */ jsx(
-                              motion.span,
-                              {
-                                initial: { width: 0, opacity: 0 },
-                                animate: { width: "auto", opacity: 1 },
-                                exit: { width: 0, opacity: 0 },
-                                transition: { duration: 0.2 },
-                                className: "text-xs overflow-hidden whitespace-nowrap text-warning flex-shrink-0",
-                                children: "Canvas"
-                              }
-                            ) })
-                          ]
-                        }
-                      )
-                    ] })
-                  ]
-                }
-              ),
-              /* @__PURE__ */ jsx(
-                PromptInputAction,
-                {
-                  tooltip: isLoading ? "Stop generation" : isRecording ? "Stop recording" : hasContent ? "Send message" : "Voice message",
-                  children: /* @__PURE__ */ jsx(
-                    Button,
-                    {
-                      variant: "default",
-                      size: "icon",
-                      className: cn2(
-                        "h-8 w-8 rounded-full transition-all duration-200",
-                        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"
-                      ),
-                      onClick: () => {
-                        if (isRecording) setIsRecording(false);
-                        else if (hasContent) handleSubmit();
-                        else setIsRecording(true);
-                      },
-                      disabled: isLoading && !hasContent,
-                      children: isLoading ? /* @__PURE__ */ jsx(Square, { className: "h-4 w-4 fill-primary-foreground 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" })
-                    }
-                  )
+                hasContent,
+                onActivate: () => {
+                  if (isRecording) stopRecording();
+                  else if (hasContent) handleSubmit();
+                  else startRecording();
                 }
-              )
-            ] })
-          ]
-        }
-      ),
-      /* @__PURE__ */ jsx(ImageViewDialog, { imageUrl: selectedImage, onClose: () => setSelectedImage(null) })
-    ] });
-  }
-);
+              }
+            )
+          ] })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      ImageViewDialog,
+      {
+        imageUrl: selectedImage,
+        onClose: () => dispatch({ type: "set-selected-image", imageUrl: null })
+      }
+    )
+  ] });
+};
 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]
+};
+var defaultSpringTransition = {
+  type: "spring",
+  stiffness: brandSpring.default.stiffness,
+  damping: brandSpring.default.damping,
+  mass: brandSpring.default.mass
+};
 var PRESETS = {
   emerge: {
     initial: emerge.initial,
     animate: emerge.animate,
     exit: emerge.exit,
-    transition: emerge.transition
+    transition: emergeTransition
   },
   flow: {
     initial: flow.initial,
     animate: flow.animate,
     exit: flow.exit,
-    transition: flow.transition
+    transition: flowTransition
   },
   fade: {
     initial: { opacity: 0 },
@@ -1238,13 +1613,13 @@ var PRESETS = {
     initial: { opacity: 0, y: 16 },
     animate: { opacity: 1, y: 0 },
     exit: { opacity: 0, y: 16 },
-    transition: brandSpring
+    transition: defaultSpringTransition
   },
   scale: {
     initial: { opacity: 0, scale: 0.95 },
     animate: { opacity: 1, scale: 1 },
     exit: { opacity: 0, scale: 0.95 },
-    transition: brandSpring
+    transition: defaultSpringTransition
   }
 };
 var STAGGER = { fast: 0.05, normal: 0.1, slow: 0.2 };
@@ -1254,7 +1629,7 @@ function MotionDiv(props) {
 function AnimateIn(props) {
   const { children, preset = "emerge", delay = 0, duration, inView = false, className } = props;
   const shouldReduce = useReducedMotion();
-  const { initial, animate, exit, transition } = PRESETS[preset];
+  const { initial, animate: animate2, exit, transition } = PRESETS[preset];
   const t = {
     ...transition,
     ...delay ? { delay } : {},
@@ -1267,7 +1642,7 @@ function AnimateIn(props) {
       {
         className,
         initial,
-        whileInView: animate,
+        whileInView: animate2,
         exit,
         viewport: { once: true, margin: "-10%" },
         transition: t,
@@ -1275,7 +1650,7 @@ function AnimateIn(props) {
       }
     );
   }
-  return /* @__PURE__ */ jsx(MotionDiv, { className, initial, animate, exit, transition: t, children });
+  return /* @__PURE__ */ jsx(MotionDiv, { className, initial, animate: animate2, exit, transition: t, children });
 }
 function AnimateInGroup(props) {
   const { children, stagger = "normal", inView = false, className } = props;
@@ -1313,115 +1688,192 @@ function AsciiText({ text, className = "", font = slant }) {
     }
   );
 }
+function Popover({ ...props }) {
+  return /* @__PURE__ */ jsx(Popover$1.Root, { "data-slot": "popover", ...props });
+}
+function PopoverTrigger({ asChild, children, render, ...props }) {
+  const renderElement = asChild && React5.isValidElement(children) ? children : render;
+  return /* @__PURE__ */ jsx(
+    Popover$1.Trigger,
+    {
+      "data-slot": "popover-trigger",
+      render: renderElement,
+      ...renderElement ? props : { ...props, children }
+    }
+  );
+}
+function PopoverContent({
+  className,
+  align = "center",
+  sideOffset = 8,
+  alignOffset = 0,
+  side = "bottom",
+  children,
+  showArrow = false,
+  style,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(Popover$1.Portal, { children: /* @__PURE__ */ jsx(
+    Popover$1.Positioner,
+    {
+      "data-slot": "popover-positioner",
+      sideOffset,
+      align,
+      alignOffset,
+      side,
+      children: /* @__PURE__ */ jsxs(
+        Popover$1.Popup,
+        {
+          "data-slot": "popover-content",
+          className: cn(
+            overlayClassNames.popoverSurface,
+            overlayPrimitiveClassNames.popoverSurface,
+            className
+          ),
+          style: { zIndex: overlayZIndex.popover, ...style },
+          ...props,
+          children: [
+            children,
+            showArrow && /* @__PURE__ */ jsx(PopoverArrow, {})
+          ]
+        }
+      )
+    }
+  ) });
+}
+function PopoverArrow({
+  className,
+  style,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    Popover$1.Arrow,
+    {
+      "data-slot": "popover-arrow",
+      className: cn(
+        "data-[side=bottom]:top-[-8px] data-[side=left]:right-[-13px] data-[side=left]:rotate-90 data-[side=right]:left-[-13px] data-[side=right]:-rotate-90 data-[side=top]:bottom-[-8px] data-[side=top]:rotate-180",
+        className
+      ),
+      style: { zIndex: overlayZIndex.popover, ...style },
+      ...props,
+      children: /* @__PURE__ */ jsxs("svg", { "aria-hidden": "true", width: "20", height: "10", viewBox: "0 0 20 10", fill: "none", children: [
+        /* @__PURE__ */ jsx(
+          "path",
+          {
+            d: "M9.66437 2.60207L4.80758 6.97318C4.07308 7.63423 3.11989 8 2.13172 8H0V9H20V8H18.5349C17.5468 8 16.5936 7.63423 15.8591 6.97318L11.0023 2.60207C10.622 2.2598 10.0447 2.25979 9.66437 2.60207Z",
+            className: "fill-popover"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "path",
+          {
+            d: "M10.3333 3.34539L5.47654 7.71648C4.55842 8.54279 3.36693 9 2.13172 9H0V8H2.13172C3.11989 8 4.07308 7.63423 4.80758 6.97318L9.66437 2.60207C10.0447 2.25979 10.622 2.2598 11.0023 2.60207L15.8591 6.97318C16.5936 7.63423 17.5468 8 18.5349 8H20V9H18.5349C17.2998 9 16.1083 8.54278 15.1901 7.71648L10.3333 3.34539Z",
+            className: "fill-border"
+          }
+        )
+      ] })
+    }
+  );
+}
 var TAG_COLOR_MAP = {
-  feature: "bg-[var(--cyan-9)] text-white",
+  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-[var(--neutral-12)]"
+  experimental: "bg-[var(--neutral-8)] text-foreground"
+};
+var getTagColor = (tag) => {
+  if (!tag) return "bg-[var(--neutral-7)] text-foreground";
+  return TAG_COLOR_MAP[tag.toLowerCase()] || TAG_COLOR_MAP.feature;
+};
+var getUnreadCount = (entries, lastSeenVersion) => {
+  if (!lastSeenVersion) return entries.length;
+  const lastSeenIndex = entries.findIndex((entry) => entry.version === lastSeenVersion);
+  return lastSeenIndex === -1 ? entries.length : lastSeenIndex;
 };
 function ChangelogWidget({
   entries,
   changelogUrl = "/changelog",
   className
 }) {
-  const [isOpen, setIsOpen] = React6.useState(false);
-  const [lastSeenVersion, setLastSeenVersion] = React6.useState(null);
-  const dropdownRef = React6.useRef(null);
-  const unreadCount = React6.useMemo(() => {
-    if (!lastSeenVersion) return entries.length;
-    const lastSeenIndex = entries.findIndex((e) => e.version === lastSeenVersion);
-    return lastSeenIndex === -1 ? entries.length : lastSeenIndex;
-  }, [entries, lastSeenVersion]);
+  const [isOpen, setIsOpen] = React5.useState(false);
+  const [lastSeenVersion, setLastSeenVersion] = React5.useState(null);
+  const unreadCount = getUnreadCount(entries, lastSeenVersion);
   const recentEntries = entries.slice(0, 5);
-  const handleClose = React6.useCallback(() => {
-    setIsOpen(false);
-    if (recentEntries.length > 0) {
-      setLastSeenVersion(recentEntries[0]?.version ?? null);
-    }
-  }, [recentEntries]);
-  React6.useEffect(() => {
-    const handleEscape = (e) => {
-      if (e.key === "Escape") handleClose();
-    };
-    const handleClickOutside = (e) => {
-      if (dropdownRef.current && !dropdownRef.current.contains(e.target)) {
-        handleClose();
-      }
-    };
-    if (isOpen) {
-      document.addEventListener("keydown", handleEscape);
-      document.addEventListener("mousedown", handleClickOutside);
-    }
-    return () => {
-      document.removeEventListener("keydown", handleEscape);
-      document.removeEventListener("mousedown", handleClickOutside);
-    };
-  }, [isOpen, handleClose]);
-  const getTagColor = (tag) => {
-    if (!tag) return "bg-[var(--neutral-7)] text-[var(--neutral-12)]";
-    return TAG_COLOR_MAP[tag.toLowerCase()] || TAG_COLOR_MAP.feature;
+  const latestVersion = recentEntries[0]?.version ?? null;
+  const handleOpenChange = (open) => {
+    setIsOpen(open);
+    if (!open && latestVersion) setLastSeenVersion(latestVersion);
   };
-  return /* @__PURE__ */ jsxs("div", { className: cn("relative", className), ref: dropdownRef, children: [
+  return /* @__PURE__ */ jsxs(Popover, { open: isOpen, onOpenChange: handleOpenChange, children: [
     /* @__PURE__ */ jsxs(
-      "button",
+      PopoverTrigger,
       {
-        type: "button",
         "aria-label": "View changelog",
-        "aria-expanded": isOpen,
-        onClick: () => setIsOpen(!isOpen),
-        className: "relative inline-flex items-center justify-center rounded-lg p-2 transition-colors hover:bg-[var(--neutral-3)]",
+        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-[var(--neutral-11)]" }),
+          /* @__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 })
         ]
       }
     ),
-    isOpen && /* @__PURE__ */ jsxs("div", { className: "absolute right-0 top-full z-50 mt-2 w-80 overflow-hidden rounded-lg border border-[var(--neutral-7)] bg-white shadow-lg transition-all duration-200", 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-[var(--neutral-12)]", 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-[var(--neutral-11)]", children: "No updates available" }) : recentEntries.map((entry) => /* @__PURE__ */ jsxs(
-        "a",
-        {
-          href: entry.url,
-          className: "block border-b border-[var(--neutral-6)] px-4 py-3 transition-colors hover:bg-[var(--neutral-2)]",
-          children: [
-            /* @__PURE__ */ jsx("div", { className: "mb-2 flex items-center justify-between gap-2", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
-              /* @__PURE__ */ jsxs("span", { className: "font-mono text-xs font-bold text-[var(--blue-9)]", children: [
-                "v",
-                entry.version
-              ] }),
-              entry.tag && /* @__PURE__ */ jsx(
-                "span",
-                {
-                  className: cn(
-                    "rounded px-2 py-0.5 text-xs font-medium",
-                    getTagColor(entry.tag)
-                  ),
-                  children: entry.tag
-                }
-              )
-            ] }) }),
-            /* @__PURE__ */ jsx("p", { className: "mb-1 text-sm font-medium text-[var(--neutral-12)]", children: entry.title }),
-            /* @__PURE__ */ jsx("p", { className: "mb-2 line-clamp-2 text-xs text-[var(--neutral-11)]", children: entry.excerpt }),
-            /* @__PURE__ */ jsx("span", { className: "text-xs text-[var(--neutral-10)]", children: entry.date })
-          ]
-        },
-        entry.version
-      )) }),
-      /* @__PURE__ */ jsxs(
-        "a",
-        {
-          href: changelogUrl,
-          onClick: handleClose,
-          className: "flex items-center justify-between border-t border-[var(--neutral-6)] bg-[var(--neutral-1)] px-4 py-3 text-sm font-medium text-[var(--blue-9)] transition-colors hover:bg-[var(--neutral-2)]",
-          children: [
-            /* @__PURE__ */ jsx("span", { children: "View all updates" }),
-            /* @__PURE__ */ jsx(ChevronRight, { className: "h-4 w-4" })
-          ]
-        }
-      )
-    ] })
+    /* @__PURE__ */ jsxs(
+      PopoverContent,
+      {
+        align: "end",
+        side: "bottom",
+        sideOffset: 8,
+        className: "w-80 overflow-hidden rounded-[var(--radius-lg)] border-border bg-white 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: "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",
+            {
+              href: entry.url,
+              className: "block border-b border-border px-4 py-3 transition-colors hover:bg-muted",
+              children: [
+                /* @__PURE__ */ jsx("div", { className: "mb-2 flex items-center justify-between gap-2", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
+                  /* @__PURE__ */ jsxs("span", { className: "font-mono text-xs font-bold text-primary", children: [
+                    "v",
+                    entry.version
+                  ] }),
+                  entry.tag && /* @__PURE__ */ jsx(
+                    "span",
+                    {
+                      className: cn(
+                        "rounded px-2 py-0.5 text-xs font-medium",
+                        getTagColor(entry.tag)
+                      ),
+                      children: entry.tag
+                    }
+                  )
+                ] }) }),
+                /* @__PURE__ */ jsx("p", { className: "mb-1 text-sm font-medium text-foreground", children: entry.title }),
+                /* @__PURE__ */ jsx("p", { className: "mb-2 line-clamp-2 text-xs text-muted-foreground", children: entry.excerpt }),
+                /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground", children: entry.date })
+              ]
+            },
+            entry.version
+          )) }),
+          /* @__PURE__ */ jsxs(
+            "a",
+            {
+              href: changelogUrl,
+              onClick: () => handleOpenChange(false),
+              className: "flex items-center justify-between border-t border-border bg-background px-4 py-3 text-sm font-medium text-primary transition-colors hover:bg-muted",
+              children: [
+                /* @__PURE__ */ jsx("span", { children: "View all updates" }),
+                /* @__PURE__ */ jsx(ChevronRight, { className: "h-4 w-4" })
+              ]
+            }
+          )
+        ]
+      }
+    )
   ] });
 }
 var GRAPH_NODE_FLOW_TYPE = "graph-node";
@@ -1496,12 +1948,28 @@ var XYFLOW_TOKEN_THEME = {
   ["--xy-controls-button-color"]: "var(--neutral-11)"
 };
 var nodeCardVariants = cva(
-  "min-w-[160px] rounded-lg border bg-neutral-2 px-3 py-2 text-neutral-12 shadow-sm transition-colors",
+  "min-w-[160px] rounded-[var(--radius-lg)] border bg-neutral-2 px-3 py-2 text-neutral-12 shadow-sm transition-colors",
   {
     variants: { ready: { true: "border-success", false: "border-neutral-7" } },
     defaultVariants: { ready: false }
   }
 );
+function GraphNodeCard({ data }) {
+  const view = data.view;
+  return /* @__PURE__ */ jsxs("div", { className: nodeCardVariants({ ready: view.ready ?? false }), children: [
+    /* @__PURE__ */ jsx(Handle, { type: "target", position: Position.Left }),
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5 text-xs font-medium text-neutral-11 uppercase tracking-wide", children: [
+      view.icon,
+      view.label
+    ] }),
+    view.subtitle ? /* @__PURE__ */ jsx("div", { className: "mt-0.5 text-sm text-neutral-12", children: view.subtitle }) : null,
+    /* @__PURE__ */ jsx(Handle, { type: "source", position: Position.Right })
+  ] });
+}
+var NODE_TYPES = {
+  [GRAPH_NODE_FLOW_TYPE]: GraphNodeCard
+};
+var REACT_FLOW_PRO_OPTIONS = { hideAttribution: true };
 function NodeGraphCanvas({
   graph,
   onChange,
@@ -1513,82 +1981,63 @@ function NodeGraphCanvas({
 }) {
   const statusId = useId();
   const [rejection, setRejection] = useState(null);
-  const { nodes, edges } = useMemo(() => graphToFlow(graph, edgeIdentity), [graph, edgeIdentity]);
-  const nodeTypes = useMemo(
-    () => ({
-      [GRAPH_NODE_FLOW_TYPE]: ({ data }) => {
-        const view = renderNode(data.node);
-        return /* @__PURE__ */ jsxs("div", { className: nodeCardVariants({ ready: view.ready ?? false }), children: [
-          /* @__PURE__ */ jsx(Handle, { type: "target", position: Position.Left }),
-          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1.5 text-xs font-medium text-neutral-11 uppercase tracking-wide", children: [
-            view.icon,
-            view.label
-          ] }),
-          view.subtitle ? /* @__PURE__ */ jsx("div", { className: "mt-0.5 text-sm text-neutral-12", children: view.subtitle }) : null,
-          /* @__PURE__ */ jsx(Handle, { type: "source", position: Position.Right })
-        ] });
-      }
-    }),
-    [renderNode]
-  );
-  const onNodesChange = useCallback(
-    (changes) => {
-      if (readOnly) return;
-      const removed = changes.filter(
-        (c) => c.type === "remove"
-      );
-      if (removed.length > 0) {
-        let next = graph;
-        for (const r of removed) next = removeNode(next, r.id);
-        onChange(next);
-        return;
-      }
-      const positional = changes.some((c) => c.type === "position" && c.dragging === false);
-      if (positional) {
-        const moved = nodes.map((n) => {
-          const change = changes.find((c) => c.type === "position" && c.id === n.id);
-          if (change && change.type === "position" && change.position) {
-            return { ...n, position: change.position };
-          }
-          return n;
-        });
-        onChange(applyNodePositions(graph, moved));
-      }
-    },
-    [graph, nodes, onChange, readOnly]
-  );
-  const onEdgesChange = useCallback(
-    (changes) => {
-      if (readOnly) return;
-      const removed = changes.filter(
-        (c) => c.type === "remove"
-      );
-      if (removed.length === 0) return;
+  const { nodes: graphNodes, edges } = graphToFlow(graph, edgeIdentity);
+  const nodes = graphNodes.map((node) => ({
+    ...node,
+    data: {
+      ...node.data,
+      view: renderNode(node.data.node)
+    }
+  }));
+  const onNodesChange = (changes) => {
+    if (readOnly) return;
+    const removed = changes.filter(
+      (c) => c.type === "remove"
+    );
+    if (removed.length > 0) {
       let next = graph;
-      for (const r of removed) next = removeFlowEdge(next, r.id, edgeIdentity);
+      for (const r of removed) next = removeNode(next, r.id);
       onChange(next);
-    },
-    [graph, edgeIdentity, onChange, readOnly]
-  );
-  const onConnect = useCallback(
-    (connection) => {
-      if (readOnly) return;
-      const result = tryAddEdge(graph, connection, { makeEdge, edgeIdentity });
-      if (result.ok) {
-        setRejection(null);
-        onChange(result.graph);
-      } else {
-        setRejection(result.reason);
-      }
-    },
-    [graph, edgeIdentity, makeEdge, onChange, readOnly]
-  );
+      return;
+    }
+    const positional = changes.some((c) => c.type === "position" && c.dragging === false);
+    if (positional) {
+      const moved = nodes.map((n) => {
+        const change = changes.find((c) => c.type === "position" && c.id === n.id);
+        if (change && change.type === "position" && change.position) {
+          return { ...n, position: change.position };
+        }
+        return n;
+      });
+      onChange(applyNodePositions(graph, moved));
+    }
+  };
+  const onEdgesChange = (changes) => {
+    if (readOnly) return;
+    const removed = changes.filter(
+      (c) => c.type === "remove"
+    );
+    if (removed.length === 0) return;
+    let next = graph;
+    for (const r of removed) next = removeFlowEdge(next, r.id, edgeIdentity);
+    onChange(next);
+  };
+  const onConnect = (connection) => {
+    if (readOnly) return;
+    const result = tryAddEdge(graph, connection, { makeEdge, edgeIdentity });
+    if (result.ok) {
+      setRejection(null);
+      onChange(result.graph);
+    } else {
+      setRejection(result.reason);
+    }
+  };
   return /* @__PURE__ */ jsx(AnimateIn, { preset: "emerge", children: /* @__PURE__ */ jsx(
     "div",
     {
       style: XYFLOW_TOKEN_THEME,
       className: cn(
-        "relative h-[480px] w-full overflow-hidden rounded-xl border border-neutral-7 bg-neutral-1",
+        "relative h-[480px] w-full overflow-hidden rounded-[var(--radius-xl)] border border-neutral-7 bg-neutral-1",
         className
       ),
       children: /* @__PURE__ */ jsx(ReactFlowProvider, { children: /* @__PURE__ */ jsxs(
@@ -1596,7 +2045,7 @@ function NodeGraphCanvas({
         {
           nodes,
           edges,
-          nodeTypes,
+          nodeTypes: NODE_TYPES,
           onNodesChange,
           onEdgesChange,
           onConnect,
@@ -1604,7 +2053,7 @@ function NodeGraphCanvas({
           nodesConnectable: !readOnly,
           elementsSelectable: !readOnly,
           fitView: true,
-          proOptions: { hideAttribution: true },
+          proOptions: REACT_FLOW_PRO_OPTIONS,
           children: [
             /* @__PURE__ */ jsx(Background, { color: "var(--neutral-6)" }),
             /* @__PURE__ */ jsx(Controls, { showInteractive: !readOnly }),
@@ -1614,7 +2063,7 @@ function NodeGraphCanvas({
                 id: statusId,
                 role: "alert",
                 "aria-live": "assertive",
-                className: "flex items-center gap-2 rounded-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",
                 children: [
                   /* @__PURE__ */ jsx("span", { children: rejection }),
                   /* @__PURE__ */ jsx(
@@ -1661,6 +2110,20 @@ var itemVariants = {
     }
   }
 };
+var reducedContainerVariants = {
+  hidden: { opacity: 1 },
+  visible: {
+    opacity: 1,
+    transition: { duration: 0 }
+  }
+};
+var reducedItemVariants = {
+  hidden: { opacity: 1 },
+  visible: {
+    opacity: 1,
+    transition: { duration: 0 }
+  }
+};
 function OnboardingChecklist({
   title,
   description,
@@ -1669,12 +2132,15 @@ function OnboardingChecklist({
   videoUrl,
   className
 }) {
+  const shouldReduceMotion = useReducedMotion();
+  const activeContainerVariants = shouldReduceMotion ? reducedContainerVariants : containerVariants;
+  const activeItemVariants = shouldReduceMotion ? reducedItemVariants : itemVariants;
   return /* @__PURE__ */ jsx(
     motion.div,
     {
       initial: "hidden",
       animate: "visible",
-      variants: containerVariants,
+      variants: activeContainerVariants,
       className: cn(
         "w-full max-w-4xl mx-auto bg-card text-card-foreground border rounded-[var(--radius-2xl)] shadow-sm p-8 overflow-hidden",
         className
@@ -1683,7 +2149,7 @@ function OnboardingChecklist({
         /* @__PURE__ */ jsxs("div", { className: "flex flex-col", children: [
           /* @__PURE__ */ jsx("h2", { className: "text-2xl font-bold tracking-tight", children: title }),
           /* @__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: itemVariants, className: "flex flex-col", children: [
+          /* @__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("span", { className: "ml-3 text-sm font-medium", children: item.text })
@@ -1695,7 +2161,7 @@ function OnboardingChecklist({
                 "a",
                 {
                   href: item.helperLink.href,
-                  className: "text-primary underline-offset-4 hover:underline focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 rounded-[var(--radius-sm)]",
+                  className: "text-primary underline-offset-4 hover:underline rounded-[var(--radius-sm)]",
                   children: item.helperLink.text
                 }
               )
@@ -1705,25 +2171,26 @@ function OnboardingChecklist({
         /* @__PURE__ */ jsx(
           motion.div,
           {
-            variants: itemVariants,
+            variants: activeItemVariants,
             className: "relative group rounded-[var(--radius-lg)] overflow-hidden cursor-pointer w-full aspect-video",
             children: /* @__PURE__ */ jsxs(Dialog, { children: [
               /* @__PURE__ */ jsx(DialogTrigger, { asChild: true, children: /* @__PURE__ */ jsxs(
                 "button",
                 {
                   type: "button",
-                  className: "w-full h-full focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 rounded-[var(--radius-lg)]",
+                  "aria-label": "Play the video guide",
+                  className: "w-full h-full rounded-[var(--radius-lg)]",
                   children: [
                     /* @__PURE__ */ jsx(
                       Image,
                       {
                         src: videoThumbnailUrl,
                         alt: "Video guide thumbnail",
-                        className: "w-full h-full object-cover transition-transform duration-300 group-hover:scale-105",
+                        className: "w-full h-full object-cover transition-transform duration-300 group-hover:scale-105 motion-reduce:transition-none motion-reduce:group-hover:scale-100",
                         fill: true
                       }
                     ),
-                    /* @__PURE__ */ jsx("div", { className: "absolute inset-0 bg-black/30 flex items-center justify-center", children: /* @__PURE__ */ jsx(PlayCircle, { className: "h-16 w-16 text-white/80 transform transition-all duration-300 group-hover:scale-110 group-hover:text-white" }) })
+                    /* @__PURE__ */ jsx("div", { className: "absolute inset-0 bg-black/30 flex items-center justify-center", children: /* @__PURE__ */ jsx(PlayCircle, { className: "h-16 w-16 text-white/80 transform transition-[background-color,border-color,box-shadow,color,opacity,transform] duration-300 group-hover:scale-110 group-hover:text-white motion-reduce:transition-none motion-reduce:group-hover:scale-100" }) })
                   ]
                 }
               ) }),
@@ -1817,7 +2284,7 @@ function subscribePlatform() {
   return () => void 0;
 }
 function usePlatform() {
-  return React6.useSyncExternalStore(subscribePlatform, getClientPlatform, () => "apple");
+  return React5.useSyncExternalStore(subscribePlatform, getClientPlatform, () => "apple");
 }
 function normalizeKey(children) {
   if (typeof children !== "string") {
@@ -1832,54 +2299,63 @@ function normalizeKey(children) {
 function getModifierSymbols(platform) {
   return platform === "apple" ? appleModifierSymbols : otherModifierSymbols;
 }
-var Kbd = React6.forwardRef(
-  ({ meta, shift, alt, ctrl, small, children, className, "aria-label": ariaLabel, ...props }, ref) => {
-    const platform = usePlatform();
-    const symbols = getModifierSymbols(platform);
-    const activeModifiers = modifierOrder.filter((modifier) => {
-      if (modifier === "meta") return meta;
-      if (modifier === "shift") return shift;
-      if (modifier === "alt") return alt;
-      return ctrl;
-    });
-    const normalizedKey = normalizeKey(children);
-    const visualParts = [
-      ...activeModifiers.map((modifier) => symbols[modifier]),
-      normalizedKey
-    ].filter(Boolean);
-    const accessibleName = ariaLabel ?? [
-      ...activeModifiers.map((modifier) => modifierLabels[modifier]),
-      typeof normalizedKey === "string" ? normalizedKey : void 0
-    ].filter(Boolean).join(" ");
-    return /* @__PURE__ */ jsx(
-      "kbd",
-      {
-        ref,
-        "aria-label": accessibleName || void 0,
-        className: cn(
-          "inline-flex select-none items-center justify-center gap-0.5 rounded-[var(--radius-sm)] border border-border bg-muted font-mono font-medium leading-none text-muted-foreground tabular-nums",
-          small ? "min-h-4 min-w-4 px-1 py-0 text-xs" : "min-h-5 min-w-5 px-1.5 py-0.5 text-xs",
-          className
-        ),
-        ...props,
-        children: visualParts.join("")
-      }
-    );
-  }
-);
+var Kbd = ({
+  meta,
+  shift,
+  alt,
+  ctrl,
+  small,
+  children,
+  className,
+  "aria-label": ariaLabel,
+  ref,
+  ...props
+}) => {
+  const platform = usePlatform();
+  const symbols = getModifierSymbols(platform);
+  const activeModifiers = modifierOrder.filter((modifier) => {
+    if (modifier === "meta") return meta;
+    if (modifier === "shift") return shift;
+    if (modifier === "alt") return alt;
+    return ctrl;
+  });
+  const normalizedKey = normalizeKey(children);
+  const visualParts = [
+    ...activeModifiers.map((modifier) => symbols[modifier]),
+    normalizedKey
+  ].filter(Boolean);
+  const accessibleName = ariaLabel ?? [
+    ...activeModifiers.map((modifier) => modifierLabels[modifier]),
+    typeof normalizedKey === "string" ? normalizedKey : void 0
+  ].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsx(
+    "kbd",
+    {
+      ref,
+      "aria-label": accessibleName || void 0,
+      className: cn(
+        "inline-flex select-none items-center justify-center gap-0.5 rounded-[var(--radius-sm)] border border-border bg-muted font-mono font-medium leading-none text-muted-foreground tabular-nums",
+        small ? "min-h-4 min-w-4 px-1 py-0 text-xs" : "min-h-5 min-w-5 px-1.5 py-0.5 text-xs",
+        className
+      ),
+      ...props,
+      children: visualParts.join("")
+    }
+  );
+};
 Kbd.displayName = "Kbd";
 var inputVariants = cva(
   [
-    "flex h-[var(--input-height)] w-full rounded-[var(--input-radius)] border border-input bg-background",
-    "px-[var(--input-padding-x)] text-[length:var(--input-font-size)] text-foreground shadow-[var(--shadow-xs)]",
+    "flex h-[var(--input-height)] w-full rounded-[var(--input-radius)]",
+    "px-[var(--input-padding-x)] text-[length:var(--input-font-size)] text-foreground",
     "transition-[background-color,border-color,box-shadow,color] duration-micro ease-out",
     "placeholder:text-muted-foreground",
-    "outline-none focus:border-ring focus:ring-[length:var(--input-focus-ring-width)] focus:ring-ring/30",
+    "outline-none",
     "disabled:cursor-not-allowed disabled:opacity-50",
     "read-only:bg-muted/70 read-only:cursor-default",
     "file:h-full file:border-0 file:border-e file:border-solid file:border-input file:bg-transparent",
     "file:me-[var(--input-padding-x)] file:pe-[var(--input-padding-x)] file:text-[length:var(--input-font-size)] file:font-medium file:text-foreground",
-    "aria-invalid:border-destructive/60 aria-invalid:focus:border-destructive aria-invalid:focus:ring-destructive/20",
+    formControlInvalidClassNames.input,
     "[&[type=search]::-webkit-search-cancel-button]:appearance-none",
     "[&[type=search]::-webkit-search-decoration]:appearance-none",
     "[&[type=search]::-webkit-search-results-button]:appearance-none",
@@ -1897,11 +2373,31 @@ var inputVariants = cva(
         prefix: "pl-[var(--input-padding-left)]",
         suffix: "pr-[var(--input-padding-right)]",
         both: "pl-[var(--input-padding-left)] pr-[var(--input-padding-right)]"
+      },
+      /**
+       * `bare` drops the field's own stroke, fill and lift so it can sit inside
+       * a container that already provides them — a footer subscribe group, a
+       * search well, a segmented composer. Those surfaces were each being built
+       * by hand with a raw <input>, because overriding the bordered look from
+       * outside is not reliable: `border-transparent` passed via className and
+       * `border-input` from the base are both border-color utilities, so which
+       * one wins depends on their order in the generated stylesheet rather than
+       * on the order they were written. That is why the stroke, fill and shadow
+       * live in this variant instead of the base — the two tones now never emit
+       * a competing declaration.
+       *
+       * A bare field draws no focus ring of its own. The container owns it, so
+       * the ring surrounds the whole group rather than a box inside it.
+       */
+      tone: {
+        bordered: `border border-input bg-background shadow-xs ${formControlFocusClassNames.input}`,
+        bare: "border-0 bg-transparent shadow-none"
       }
     },
     defaultVariants: {
       size: "md",
-      affix: "none"
+      affix: "none",
+      tone: "bordered"
     }
   }
 );
@@ -1924,7 +2420,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",
-    "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1",
+    "focus-visible:outline-none",
     "disabled:pointer-events-none disabled:opacity-50",
     "[&_svg]:size-[var(--input-control-icon-size)]"
   ].join(" ")
@@ -1963,7 +2459,7 @@ function getInputStyle(size, style) {
     "--input-focus-ring-width": `${inputTokens.focusRingWidth}px`,
     borderRadius: "var(--input-radius)",
     outline: "none",
-    ...style
+    ...asPlainStyle(style)
   };
 }
 function getAffixMode(prefix, hasRightAdornment) {
@@ -1981,11 +2477,15 @@ function isTextAffix(value) {
 function joinDescriptionIds2(...ids) {
   return ids.filter(Boolean).join(" ") || void 0;
 }
-var Input = React6.forwardRef((props, forwardedRef) => {
+var Input = ({
+  ref: forwardedRef,
+  ...props
+}) => {
   const {
     className,
     type = "text",
     size = "md",
+    tone = "bordered",
     prefix,
     suffix,
     clearable,
@@ -2014,16 +2514,16 @@ var Input = React6.forwardRef((props, forwardedRef) => {
     ...rest
   } = props;
   const isControlled = value !== void 0;
-  const baseId = React6.useId();
-  const inputRef = React6.useRef(null);
+  const baseId = React5.useId();
+  const inputRef = React5.useRef(null);
   const descriptionId = description && id ? `${id}-description` : void 0;
   const errorId = typeof error === "string" && id ? `${id}-error` : void 0;
   const prefixDescriptionId = isTextAffix(prefix) ? `${id ?? baseId}-prefix` : void 0;
   const suffixDescriptionId = isTextAffix(suffix) ? `${id ?? baseId}-suffix` : void 0;
-  const [internalValue, setInternalValue] = React6.useState(
+  const [internalValue, setInternalValue] = React5.useState(
     typeof defaultValue === "string" || typeof defaultValue === "number" ? String(defaultValue) : ""
   );
-  const [passwordVisible, setPasswordVisible] = React6.useState(false);
+  const [passwordVisible, setPasswordVisible] = React5.useState(false);
   const currentValue = isControlled ? String(value ?? "") : internalValue;
   const clearOnEscapeEnabled = clearOnEscape ?? type === "search";
   const canRevealPassword = Boolean(revealable && type === "password");
@@ -2043,7 +2543,7 @@ var Input = React6.forwardRef((props, forwardedRef) => {
     errorId
   );
   const valueProps = isControlled ? { value } : clearable || shortcut || clearOnEscapeEnabled ? { value: currentValue } : { defaultValue };
-  const setInputRef = React6.useCallback(
+  const setInputRef = React5.useCallback(
     (node) => {
       const input = node instanceof HTMLInputElement ? node : null;
       inputRef.current = input;
@@ -2051,7 +2551,7 @@ var Input = React6.forwardRef((props, forwardedRef) => {
     },
     [forwardedRef]
   );
-  const emitNativeInput = React6.useCallback(
+  const emitNativeInput = React5.useCallback(
     (nextValue) => {
       const input = inputRef.current;
       if (!input) {
@@ -2068,7 +2568,7 @@ var Input = React6.forwardRef((props, forwardedRef) => {
     },
     [isControlled, onValueChange]
   );
-  const syncInputValue = React6.useCallback(
+  const syncInputValue = React5.useCallback(
     (event) => {
       if (!isControlled) setInternalValue(event.currentTarget.value);
       onValueChange?.(event.currentTarget.value);
@@ -2076,12 +2576,12 @@ var Input = React6.forwardRef((props, forwardedRef) => {
     },
     [isControlled, onChange, onValueChange]
   );
-  const handleClear = React6.useCallback(() => {
+  const handleClear = React5.useCallback(() => {
     emitNativeInput("");
     onClear?.();
     inputRef.current?.focus();
   }, [emitNativeInput, onClear]);
-  const handleKeyDown = React6.useCallback(
+  const handleKeyDown = React5.useCallback(
     (event) => {
       onKeyDown?.(event);
       if (event.defaultPrevented || event.key !== "Escape" || !clearOnEscapeEnabled || currentValue.length === 0 || disabled) {
@@ -2105,7 +2605,7 @@ var Input = React6.forwardRef((props, forwardedRef) => {
       "aria-describedby": describedBy,
       "aria-busy": loading || void 0,
       className: cn(
-        inputVariants({ size, affix }),
+        inputVariants({ size, affix, tone }),
         type === "file" && "p-0 pr-[var(--input-padding-x)] text-muted-foreground",
         className
       ),
@@ -2210,7 +2710,7 @@ var Input = React6.forwardRef((props, forwardedRef) => {
       ]
     }
   );
-});
+};
 Input.displayName = "Input";
 function Avatar({ src, alt, isOnline, size = "md" }) {
   const sizeClasses = size === "sm" ? "w-10 h-10" : "w-10 h-10";
@@ -2271,16 +2771,16 @@ function TeamChat({
     "div",
     {
       className: cn(
-        "w-full max-w-5xl mx-auto p-6 bg-white dark:bg-black rounded-[var(--radius-3xl)] shadow-lg flex flex-col h-[550px] border border-[var(--neutral-7)]",
+        "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",
         className
       ),
       children: [
-        /* @__PURE__ */ jsxs("header", { className: "flex justify-between items-center border-b border-[var(--neutral-7)] pb-3 mb-6", 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 dark:text-white" }),
+            /* @__PURE__ */ jsx(Users, { className: "w-8 h-8 text-black" }),
             /* @__PURE__ */ jsxs("div", { children: [
-              /* @__PURE__ */ jsx("h2", { className: "text-2xl font-semibold text-black dark:text-white", children: chatName }),
-              tagline && /* @__PURE__ */ jsx("p", { className: "italic text-sm text-[var(--neutral-10)]", children: tagline })
+              /* @__PURE__ */ jsx("h2", { className: "text-2xl font-semibold text-black", children: chatName }),
+              tagline && /* @__PURE__ */ jsx("p", { className: "italic text-sm text-muted-foreground", children: tagline })
             ] })
           ] }),
           /* @__PURE__ */ jsx(
@@ -2289,13 +2789,13 @@ function TeamChat({
               type: "button",
               "aria-label": "More options",
               onClick: onMoreOptions,
-              className: "p-2 rounded-[var(--radius-lg)] hover:bg-[var(--neutral-3)] transition",
-              children: /* @__PURE__ */ jsx(MoreHorizontal, { className: "w-6 h-6 text-[var(--neutral-10)]" })
+              className: "p-2 rounded-[var(--radius-lg)] hover:bg-muted transition",
+              children: /* @__PURE__ */ jsx(MoreHorizontal, { className: "w-6 h-6 text-muted-foreground" })
             }
           )
         ] }),
-        /* @__PURE__ */ jsxs("main", { className: "flex flex-1 overflow-hidden rounded-[var(--radius-xl)] border border-[var(--neutral-7)]", children: [
-          /* @__PURE__ */ jsx("aside", { className: "w-56 bg-[var(--neutral-2)] border-r border-[var(--neutral-7)] p-4 overflow-y-auto", children: uniqueSenders.map((sender) => {
+        /* @__PURE__ */ jsxs("main", { className: "flex flex-1 overflow-hidden rounded-[var(--radius-xl)] border border-border", children: [
+          /* @__PURE__ */ jsx("aside", { className: "w-56 bg-muted border-r border-border p-4 overflow-y-auto", children: uniqueSenders.map((sender) => {
             const isSelected = selectedSender === sender.name;
             return /* @__PURE__ */ jsxs(
               "button",
@@ -2304,7 +2804,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 dark:bg-white text-white dark:text-black" : "hover:bg-[var(--neutral-4)] text-[var(--neutral-12)]"
+                  isSelected ? "bg-black text-white dark:text-black" : "hover:bg-muted text-foreground"
                 ),
                 children: [
                   /* @__PURE__ */ jsx(Avatar, { src: sender.avatar, alt: sender.name, isOnline: sender.isOnline }),
@@ -2314,57 +2814,50 @@ 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-[var(--neutral-9)]", children: "No messages to display." }) : filteredMessages.map((message) => /* @__PURE__ */ jsxs(
-            "div",
-            {
-              className: "mb-6 last:mb-0 group border-b border-[var(--neutral-6)] 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 dark:text-white", children: message.sender.name }),
-                    /* @__PURE__ */ jsx("span", { className: "text-xs text-[var(--neutral-9)]", children: message.timestamp })
-                  ] })
-                ] }),
-                /* @__PURE__ */ jsx("p", { className: "text-[var(--neutral-12)] text-lg mb-1", children: message.content }),
-                /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between text-sm text-[var(--neutral-10)]", 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 === "delivered" && /* @__PURE__ */ jsx(Check, { className: "w-5 h-5" }),
-                    /* @__PURE__ */ jsx("span", { children: message.timestamp })
-                  ] }),
-                  /* @__PURE__ */ jsx("div", { className: "flex gap-2", children: message.reactions?.map((reaction) => /* @__PURE__ */ jsxs(
-                    "button",
-                    {
-                      type: "button",
-                      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 dark:text-white" : "bg-[var(--neutral-3)] text-[var(--neutral-11)]",
-                        "hover:bg-[var(--neutral-4)]"
-                      ),
-                      children: [
-                        reaction.emoji,
-                        " ",
-                        reaction.count
-                      ]
-                    },
-                    reaction.emoji
-                  )) })
-                ] })
-              ]
-            },
-            message.id
-          )) })
+          /* @__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__ */ 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("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 === "delivered" && /* @__PURE__ */ jsx(Check, { className: "w-5 h-5" }),
+                /* @__PURE__ */ jsx("span", { children: message.timestamp })
+              ] }),
+              /* @__PURE__ */ jsx("div", { className: "flex gap-2", children: message.reactions?.map((reaction) => /* @__PURE__ */ jsxs(
+                "button",
+                {
+                  type: "button",
+                  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",
+                    "hover:bg-muted"
+                  ),
+                  children: [
+                    reaction.emoji,
+                    " ",
+                    reaction.count
+                  ]
+                },
+                reaction.emoji
+              )) })
+            ] })
+          ] }, message.id)) })
         ] }),
-        /* @__PURE__ */ jsxs("footer", { className: "mt-6 flex items-center gap-4 border-t border-[var(--neutral-7)] pt-4", children: [
+        /* @__PURE__ */ jsxs("footer", { className: "mt-6 flex items-center gap-4 border-t border-border pt-4", children: [
           /* @__PURE__ */ jsx(
             "button",
             {
               type: "button",
               "aria-label": "Add emoji",
-              className: "p-3 rounded-full bg-[var(--neutral-3)] hover:bg-[var(--neutral-4)] transition",
-              children: /* @__PURE__ */ jsx(FacePlus, { className: "w-6 h-6 text-[var(--neutral-10)]" })
+              className: "p-3 rounded-full bg-muted hover:bg-muted transition",
+              children: /* @__PURE__ */ jsx(FacePlus, { className: "w-6 h-6 text-muted-foreground" })
             }
           ),
           /* @__PURE__ */ jsx(
@@ -2383,7 +2876,7 @@ function TeamChat({
               type: "button",
               "aria-label": "Send message",
               onClick: handleSend,
-              className: "p-3 rounded-full bg-black dark:bg-white text-white dark:text-black hover:brightness-90 transition",
+              className: "p-3 rounded-full bg-black text-white dark:text-black hover:brightness-90 transition",
               children: /* @__PURE__ */ jsx(PaperAirplane, { className: "w-6 h-6" })
             }
           )
@@ -2393,6 +2886,6 @@ function TeamChat({
   );
 }
 
-export { AnimateIn, AnimateInGroup, AsciiText, ChangelogWidget, NodeGraphCanvas, OnboardingChecklist, PromptInputBox, 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 };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map