@nebutra/ui 0.2.2 → 2.0.0

package/dist/components/index.js

@@ -1,8 +1,4 @@
 "use client";
-import { Button as Button$1 } from '@lobehub/ui';
-export { ActionIcon, ActionIconGroup, Alert, Avatar, Button, Checkbox, DraggablePanel, DraggablePanelBody, DraggablePanelContainer, DraggablePanelFooter, DraggablePanelHeader, Flexbox, Form, FormGroup, FormItem, Highlighter, Image, Input, List, Markdown, Menu, Modal, SearchBar, Segmented, Select, SideNav, Tag, TextArea, Tooltip } from '@lobehub/ui';
-export { ChatInputArea, ChatItem, ChatList, MessageInput, MessageModal } from '@lobehub/ui/chat';
-export { default as Spotlight } from '@lobehub/ui/es/awesome/Spotlight/Spotlight';
 import { motion, AnimatePresence, useReducedMotion, m, LazyMotion, domAnimation } from 'framer-motion';
 export { AnimatePresence, LayoutGroup, LazyMotion, MotionConfig, animate, domAnimation, m, motion, useAnimationFrame, useInView, useMotionTemplate, useMotionValue, useReducedMotion, useScroll, useSpring, useTransform, useVelocity } from 'framer-motion';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
@@ -11,18 +7,19 @@ import Image from 'next/image';
 import { Dialog as Dialog$1 } from '@base-ui/react/dialog';
 import * as React5 from 'react';
 import React5__default, { useEffectEvent, useId, useState } from 'react';
-import { colors, emerge, flow, brandSpring } from '@nebutra/brand';
+import { colors, brandSpring, flow, emerge } from '@nebutra/brand';
 import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
 import { cva } from 'class-variance-authority';
 import { Tooltip as Tooltip$1 } from '@base-ui/react/tooltip';
 import { useAsciiText, slant } from 'react-ascii-text';
+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/index.ts
 
 // src/shared/animation/motion/tokens.ts
 var animationDurations = {
@@ -298,41 +295,52 @@ var primitiveFontSize = {
 // src/tokens/shadows.ts
 var shadowClasses = {
   md: "shadow-md",
+  xl: "shadow-xl",
   "2xl": "shadow-2xl"};
 
 // src/tokens/components/overlay.ts
-var overlayFocusRingClassName = "outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2";
+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",
+  backdrop: "fixed inset-0 bg-black/40 backdrop-blur-sm transition-[opacity,display] duration-[var(--motion-duration-flow)] ease-[var(--ease-brand)] data-ending-style:opacity-0 data-starting-style:opacity-0 motion-reduce:transition-none",
   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)]",
+    "transition-[opacity,transform,display] duration-[var(--motion-duration-flow)] ease-[var(--ease-brand)]",
     "data-starting-style:scale-95 data-starting-style:opacity-0 data-ending-style:scale-95 data-ending-style:opacity-0",
     "motion-reduce:transition-none motion-reduce:data-starting-style:transform-none motion-reduce:data-ending-style:transform-none"
   ].join(" "),
+  popoverSurface: [
+    "w-72 origin-[var(--transform-origin)] rounded-[var(--radius-lg)] border border-border/70 bg-popover/95 p-4 text-popover-foreground backdrop-blur-md",
+    shadowClasses.xl,
+    "outline-none transition-[opacity,transform,display] duration-[var(--motion-duration-flow)] ease-[var(--ease-brand)]",
+    "data-[open]:opacity-100 data-[closed]:opacity-0 data-[closed]:scale-[0.97] data-[open]:scale-100",
+    "motion-reduce:transition-none motion-reduce:data-[closed]:transform-none motion-reduce:data-[open]:transform-none"
+  ].join(" "),
   tooltipSurface: [
-    "overflow-hidden rounded-[var(--radius-md)] border border-border/70 bg-popover/95 px-3 py-1.5 text-sm text-popover-foreground backdrop-blur-md",
+    "origin-[var(--transform-origin)] overflow-hidden rounded-[var(--radius-md)] border border-border/70 bg-popover/95 px-3 py-1.5 text-sm text-popover-foreground backdrop-blur-md",
     shadowClasses.md,
-    "transition-[opacity,transform,display] duration-[var(--motion-duration-flow)] ease-[var(--ease-out)]",
-    "data-starting-style:scale-95 data-starting-style:opacity-0 data-ending-style:scale-95 data-ending-style:opacity-0",
+    "transition-[opacity,transform,display] duration-[var(--motion-duration-flow)] ease-[var(--ease-brand)]",
+    "data-starting-style:scale-[0.97] data-starting-style:opacity-0 data-ending-style:scale-[0.97] data-ending-style:opacity-0",
+    "data-[instant]:duration-0",
     "motion-reduce:transition-none motion-reduce:data-starting-style:transform-none motion-reduce:data-ending-style:transform-none"
   ].join(" "),
-  closeButton: `absolute right-4 top-4 rounded-[var(--radius-sm)] opacity-70 ring-offset-background ${overlayFocusRingClassName} transition-opacity duration-[var(--motion-duration-micro)] ease-[var(--ease-out)] hover:opacity-100 disabled:pointer-events-none data-[open]:bg-accent data-[open]:text-muted-foreground motion-reduce:transition-none`
+  closeButton: `absolute right-4 top-4 rounded-[var(--radius-sm)] opacity-70 ring-offset-background ${overlayFocusRingClassName} transition-opacity duration-[var(--motion-duration-micro)] ease-[var(--ease-brand)] hover:opacity-100 disabled:pointer-events-none data-[open]:bg-accent data-[open]:text-muted-foreground motion-reduce:transition-none`
 };
 function cn(...inputs) {
   return twMerge(clsx(inputs));
 }
 var overlayPrimitiveClassNames = {
-  modalSurface: "rounded-[var(--radius-md)] border-border/70 bg-popover/95 text-popover-foreground shadow-xl"};
+  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 = ({
@@ -549,8 +557,8 @@ var buttonVariants = cva(
     "inline-flex items-center justify-center gap-2 whitespace-nowrap",
     "rounded-[var(--btn-default-radius,var(--radius-md))]",
     "text-[length:var(--control-font-size-md,0.875rem)] font-[number:var(--font-weight-medium,500)]",
-    "transition-colors duration-micro ease-out",
-    "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+    "transition-[color,background-color,border-color,transform] duration-flow ease-[var(--ease-brand)]",
+    "active:scale-[0.97] motion-reduce:active:scale-100 motion-reduce:transition-none",
     "disabled:pointer-events-none disabled:opacity-50",
     "aria-busy:cursor-wait"
   ].join(" "),
@@ -577,8 +585,30 @@ var buttonVariants = cva(
       },
       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: [
@@ -589,22 +619,56 @@ var buttonVariants = cva(
       {
         shape: "circle",
         size: "tiny",
-        className: "w-[var(--control-height-tiny,1.5rem)] px-0 rounded-full"
+        className: "w-[var(--control-height-tiny,1.5rem)] px-0"
       },
       {
         shape: "circle",
         size: "sm",
-        className: "w-[var(--control-height-sm,2rem)] px-0 rounded-full"
+        className: "w-[var(--control-height-sm,2rem)] px-0"
       },
       {
         shape: "circle",
         size: "default",
-        className: "w-[var(--control-height-md,2.5rem)] px-0 rounded-full"
+        className: "w-[var(--control-height-md,2.5rem)] px-0"
       },
       {
         shape: "circle",
         size: "lg",
-        className: "w-[var(--control-height-lg,3rem)] px-0 rounded-full"
+        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: {
@@ -626,7 +690,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";
@@ -641,7 +708,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";
@@ -666,10 +736,10 @@ function resolveShadowClass(shadow) {
   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 })
@@ -680,6 +750,7 @@ var Button = ({
   variant,
   size,
   shape,
+  iconSize,
   asChild = false,
   loading = false,
   disabled,
@@ -697,11 +768,21 @@ var Button = ({
     Comp,
     {
       ref,
-      className: cn(buttonVariants({ variant, size, shape }), shadowClass, className),
+      className: cn(buttonVariants({ variant, size, shape, iconSize }), shadowClass, className),
       disabled: isDisabled,
       "aria-busy": loading || void 0,
       ...props,
-      children: asChild ? children : /* @__PURE__ */ jsx(ButtonContent, { loading, prefix, suffix, size, children })
+      children: asChild ? children : /* @__PURE__ */ jsx(
+        ButtonContent,
+        {
+          loading,
+          prefix,
+          suffix,
+          size,
+          iconSize,
+          children
+        }
+      )
     }
   );
 };
@@ -736,6 +817,12 @@ var textareaTokens = {
   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",
@@ -756,7 +843,7 @@ function getTextareaStyle(size, style) {
     "--textarea-focus-ring-width": `${textareaTokens.focusRingWidth}px`,
     borderRadius: "var(--textarea-radius)",
     outline: "none",
-    ...style
+    ...asPlainStyle(style)
   };
 }
 function getTextareaFieldStyle() {
@@ -848,19 +935,54 @@ var Textarea = ({
 };
 Textarea.displayName = "Textarea";
 var DEFAULT_TOOLTIP_DELAY_MS = 150;
+var SKIP_DELAY_WINDOW_MS = 400;
+var lastTooltipOpenAt = 0;
+var skipDelayListeners = /* @__PURE__ */ new Set();
+function markTooltipOpened() {
+  lastTooltipOpenAt = Date.now();
+  for (const listener of skipDelayListeners) listener();
+}
+function shouldSkipDelay() {
+  return Date.now() - lastTooltipOpenAt < SKIP_DELAY_WINDOW_MS;
+}
+function useSkipDelay() {
+  const [, tick] = React5.useReducer((count) => count + 1, 0);
+  React5.useEffect(() => {
+    skipDelayListeners.add(tick);
+    return () => {
+      skipDelayListeners.delete(tick);
+    };
+  }, []);
+  return shouldSkipDelay();
+}
+var TooltipInstantContext = React5.createContext(false);
 var TooltipProvider = ({
   children,
   delayDuration = DEFAULT_TOOLTIP_DELAY_MS
 }) => {
-  return /* @__PURE__ */ jsx(Tooltip$1.Provider, { delay: delayDuration, children });
+  const skipDelay = useSkipDelay();
+  return /* @__PURE__ */ jsx(Tooltip$1.Provider, { delay: skipDelay ? 0 : delayDuration, children });
 };
 var Tooltip = ({
   delayDuration,
   children,
+  onOpenChange,
   ...props
 }) => {
-  const delay = delayDuration ?? DEFAULT_TOOLTIP_DELAY_MS;
-  return /* @__PURE__ */ jsx(Tooltip$1.Provider, { delay, children: /* @__PURE__ */ jsx(Tooltip$1.Root, { ...props, children }) });
+  const skipDelay = useSkipDelay();
+  const instant = delayDuration == null && skipDelay;
+  const delay = delayDuration ?? (instant ? 0 : DEFAULT_TOOLTIP_DELAY_MS);
+  return /* @__PURE__ */ jsx(TooltipInstantContext.Provider, { value: instant, children: /* @__PURE__ */ jsx(Tooltip$1.Provider, { delay, children: /* @__PURE__ */ jsx(
+    Tooltip$1.Root,
+    {
+      ...props,
+      onOpenChange: (open, eventDetails) => {
+        if (open) markTooltipOpened();
+        onOpenChange?.(open, eventDetails);
+      },
+      children
+    }
+  ) }) });
 };
 var TooltipTrigger = ({
   asChild,
@@ -890,25 +1012,29 @@ var TooltipContent = ({
   alignOffset = 0,
   ref,
   ...props
-}) => /* @__PURE__ */ jsx(Tooltip$1.Portal, { children: /* @__PURE__ */ jsx(
-  Tooltip$1.Positioner,
-  {
-    side,
-    align,
-    sideOffset,
-    alignOffset,
-    style: { zIndex: overlayZIndex.tooltip },
-    children: /* @__PURE__ */ jsx(
-      Tooltip$1.Popup,
-      {
-        ref,
-        className: cn(overlayClassNames.tooltipSurface, className),
-        style: { zIndex: overlayZIndex.tooltip, ...style },
-        ...props
-      }
-    )
-  }
-) });
+}) => {
+  const instant = React5.use(TooltipInstantContext);
+  return /* @__PURE__ */ jsx(Tooltip$1.Portal, { children: /* @__PURE__ */ jsx(
+    Tooltip$1.Positioner,
+    {
+      side,
+      align,
+      sideOffset,
+      alignOffset,
+      style: { zIndex: overlayZIndex.tooltip },
+      children: /* @__PURE__ */ jsx(
+        Tooltip$1.Popup,
+        {
+          ref,
+          className: cn(overlayClassNames.tooltipSurface, className),
+          "data-instant": instant || void 0,
+          style: { zIndex: overlayZIndex.tooltip, ...style },
+          ...props
+        }
+      )
+    }
+  ) });
+};
 TooltipContent.displayName = "TooltipContent";
 var MAX_VISUALIZER_BARS = 64;
 var VISUALIZER_BAR_STYLES = Array.from({ length: MAX_VISUALIZER_BARS }, (_, index) => ({
@@ -1040,7 +1166,7 @@ var PromptInputTextarea = ({ className, onKeyDown, disableAutosize = false, plac
       onKeyDown: handleKeyDown,
       rows: 1,
       style: { "--textarea-min-height": "2rem", ...style },
-      className: cn("resize-none border-0 shadow-none focus-visible:ring-0", className),
+      className: cn("resize-none border-0 shadow-none", className),
       disabled,
       placeholder,
       ...props
@@ -1240,8 +1366,8 @@ function PromptSubmitAction({
           variant: "default",
           size: "icon",
           className: cn(
-            "h-8 w-8 rounded-full transition-[background-color,border-color,box-shadow,color,opacity,transform] 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"
+            "h-8 w-8 rounded-full transition-[background-color,border-color,box-shadow,color,opacity,transform] duration-micro",
+            isRecording ? "bg-transparent hover:bg-accent text-destructive hover:text-destructive/80" : hasContent ? "bg-primary hover:bg-primary/90 text-primary-foreground" : "bg-transparent hover:bg-accent text-muted-foreground hover:text-accent-foreground"
           ),
           onClick: onActivate,
           disabled: isLoading && !hasContent,
@@ -1487,90 +1613,168 @@ var PromptInputBox = (props) => {
   ] });
 };
 PromptInputBox.displayName = "PromptInputBox";
-var emergeTransition = {
-  duration: emerge.transition.duration,
-  ease: [0.16, 1, 0.3, 1]
-};
-var flowTransition = {
-  duration: flow.transition.duration,
-  ease: [0, 0, 0.2, 1]
+
+// src/tokens/motion.ts
+var motionDurations = {
+  /** 300ms — content unveil (slide, expand, accordion, drawer) */
+  reveal: 300};
+var motionVariants = {
+  fadeInUp: {
+    initial: { opacity: 0, transform: "translateY(20px)" },
+    animate: { opacity: 1, transform: "translateY(0px)" },
+    exit: { opacity: 0, transform: "translateY(10px)" }
+  },
+  scaleIn: {
+    initial: { opacity: 0, scale: 0.95 },
+    animate: { opacity: 1, scale: 1 },
+    exit: { opacity: 0, scale: 0.95 }
+  }};
+var staggerContainers = {
+  fast: {
+    initial: {},
+    animate: { transition: { staggerChildren: 0.04, delayChildren: 0 } }
+  },
+  normal: {
+    initial: {},
+    animate: { transition: { staggerChildren: 0.06, delayChildren: 0.04 } }
+  },
+  slow: {
+    initial: {},
+    animate: { transition: { staggerChildren: 0.08, delayChildren: 0.05 } }
+  }
 };
-var defaultSpringTransition = {
-  type: "spring",
-  stiffness: brandSpring.default.stiffness,
-  damping: brandSpring.default.damping,
-  mass: brandSpring.default.mass
+var viewportSettings = {
+  once: { once: true, margin: "-100px" }};
+var fadeInVariant = {
+  initial: { opacity: 0 },
+  animate: { opacity: 1 },
+  exit: { opacity: 0 },
+  transition: { duration: 0.3 }
 };
 var PRESETS = {
+  /** 涌现 — materialize from the cloud (default) */
   emerge: {
     initial: emerge.initial,
     animate: emerge.animate,
     exit: emerge.exit,
-    transition: emergeTransition
+    transition: emerge.transition
   },
+  /** 流动 — stream horizontally */
   flow: {
     initial: flow.initial,
     animate: flow.animate,
     exit: flow.exit,
-    transition: flowTransition
+    transition: flow.transition
   },
-  fade: {
-    initial: { opacity: 0 },
-    animate: { opacity: 1 },
-    exit: { opacity: 0 },
-    transition: { duration: 0.3 }
+  /** Simple fade */
+  fade: fadeInVariant,
+  /** Fade + rise */
+  fadeUp: motionVariants.fadeInUp,
+  /** Scale in */
+  scale: motionVariants.scaleIn,
+  /**
+   * Keyed content swap — short, symmetric, blur-softened. Rises in, sinks out.
+   * Shorter and shallower than `emerge` on purpose: a swap replaces content the
+   * reader is already looking at, so it must resolve inside the reveal rail.
+   * Pair with `AnimateSwap`.
+   */
+  swap: {
+    initial: { opacity: 0, transform: "translateY(10px)", filter: "blur(4px)" },
+    animate: { opacity: 1, transform: "translateY(0px)", filter: "blur(0px)" },
+    exit: { opacity: 0, transform: "translateY(-10px)", filter: "blur(4px)" },
+    transition: { duration: motionDurations.reveal / 1e3 }
   },
-  fadeUp: {
-    initial: { opacity: 0, y: 16 },
-    animate: { opacity: 1, y: 0 },
-    exit: { opacity: 0, y: 16 },
-    transition: defaultSpringTransition
+  /** Off-canvas panel entering from the right edge (drawer, sheet). */
+  slideFromRight: {
+    initial: { transform: "translateX(100%)" },
+    animate: { transform: "translateX(0%)" },
+    exit: { transform: "translateX(100%)" },
+    transition: brandSpring.default
   },
-  scale: {
-    initial: { opacity: 0, scale: 0.95 },
-    animate: { opacity: 1, scale: 1 },
-    exit: { opacity: 0, scale: 0.95 },
-    transition: defaultSpringTransition
+  /** Off-canvas panel entering from the left edge. */
+  slideFromLeft: {
+    initial: { transform: "translateX(-100%)" },
+    animate: { transform: "translateX(0%)" },
+    exit: { transform: "translateX(-100%)" },
+    transition: brandSpring.default
+  },
+  /** Off-canvas panel entering from the top edge (banner, command bar). */
+  slideFromTop: {
+    initial: { transform: "translateY(-100%)" },
+    animate: { transform: "translateY(0%)" },
+    exit: { transform: "translateY(-100%)" },
+    transition: brandSpring.default
+  },
+  /** Off-canvas panel entering from the bottom edge (mobile action sheet). */
+  slideFromBottom: {
+    initial: { transform: "translateY(100%)" },
+    animate: { transform: "translateY(0%)" },
+    exit: { transform: "translateY(100%)" },
+    transition: brandSpring.default
   }
 };
-var STAGGER = { fast: 0.05, normal: 0.1, slow: 0.2 };
 function MotionDiv(props) {
   return /* @__PURE__ */ jsx(LazyMotion, { features: domAnimation, children: /* @__PURE__ */ jsx(m.div, { ...props }) });
 }
 function AnimateIn(props) {
-  const { children, preset = "emerge", delay = 0, duration, inView = false, className } = props;
+  const {
+    children,
+    preset = "fade",
+    delay = 0,
+    duration,
+    inView = false,
+    className,
+    ...rest
+  } = props;
   const shouldReduce = useReducedMotion();
-  const { initial, animate: animate2, exit, transition } = PRESETS[preset];
-  const t = {
-    ...transition,
-    ...delay ? { delay } : {},
+  const base = PRESETS[preset] || PRESETS.fade;
+  const initial = shouldReduce ? { opacity: 0 } : base.initial;
+  const animate2 = shouldReduce ? { opacity: 1 } : base.animate;
+  const exit = shouldReduce ? { opacity: 0 } : "exit" in base ? base.exit : void 0;
+  const transition = {
+    ...shouldReduce ? { duration: 0.15 } : base.transition,
+    delay,
     ...duration ? { duration } : {}
   };
-  if (shouldReduce) return /* @__PURE__ */ jsx("div", { className, children });
   if (inView) {
     return /* @__PURE__ */ jsx(
       MotionDiv,
       {
+        ...rest,
         className,
         initial,
         whileInView: animate2,
-        exit,
-        viewport: { once: true, margin: "-10%" },
-        transition: t,
+        ...exit && { exit },
+        transition,
+        viewport: viewportSettings.once,
         children
       }
     );
   }
-  return /* @__PURE__ */ jsx(MotionDiv, { className, initial, animate: animate2, exit, transition: t, children });
+  return /* @__PURE__ */ jsx(
+    MotionDiv,
+    {
+      ...rest,
+      className,
+      initial,
+      animate: animate2,
+      ...exit && { exit },
+      transition,
+      children
+    }
+  );
+}
+function AnimateSwap(props) {
+  const { swapKey, ...animateInProps } = props;
+  return /* @__PURE__ */ jsx(LazyMotion, { features: domAnimation, children: /* @__PURE__ */ jsx(AnimatePresence, { mode: "wait", children: /* @__PURE__ */ jsx(AnimateIn, { ...animateInProps }, swapKey) }) });
 }
 function AnimateInGroup(props) {
   const { children, stagger = "normal", inView = false, className } = props;
   const shouldReduce = useReducedMotion();
-  const variants = {
-    initial: {},
-    animate: { transition: { staggerChildren: STAGGER[stagger] } }
-  };
-  if (shouldReduce) return /* @__PURE__ */ jsx("div", { className, children });
+  const container = staggerContainers[stagger];
+  if (shouldReduce) {
+    return /* @__PURE__ */ jsx("div", { className, children });
+  }
   if (inView) {
     return /* @__PURE__ */ jsx(
       MotionDiv,
@@ -1578,13 +1782,13 @@ function AnimateInGroup(props) {
         className,
         initial: "initial",
         whileInView: "animate",
-        viewport: { once: true, margin: "-10%" },
-        variants,
+        viewport: viewportSettings.once,
+        variants: container,
         children
       }
     );
   }
-  return /* @__PURE__ */ jsx(MotionDiv, { className, initial: "initial", animate: "animate", variants, children });
+  return /* @__PURE__ */ jsx(MotionDiv, { className, initial: "initial", animate: "animate", variants: container, children });
 }
 function AsciiText({ text, className = "", font = slant }) {
   const asciiTextRef = useAsciiText({
@@ -1599,6 +1803,93 @@ 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-[hsl(var(--primary))] text-white",
   fix: "bg-[var(--status-success)] text-white",
@@ -1623,93 +1914,81 @@ function ChangelogWidget({
 }) {
   const [isOpen, setIsOpen] = React5.useState(false);
   const [lastSeenVersion, setLastSeenVersion] = React5.useState(null);
-  const dropdownRef = React5.useRef(null);
   const unreadCount = getUnreadCount(entries, lastSeenVersion);
   const recentEntries = entries.slice(0, 5);
   const latestVersion = recentEntries[0]?.version ?? null;
-  const closeAndMarkSeen = () => {
-    setIsOpen(false);
-    if (latestVersion) setLastSeenVersion(latestVersion);
+  const handleOpenChange = (open) => {
+    setIsOpen(open);
+    if (!open && latestVersion) setLastSeenVersion(latestVersion);
   };
-  const closeFromDocumentEvent = useEffectEvent(() => {
-    closeAndMarkSeen();
-  });
-  React5.useEffect(() => {
-    if (!isOpen) return;
-    const handleEscape = (e) => {
-      if (e.key === "Escape") closeFromDocumentEvent();
-    };
-    const handleClickOutside = (e) => {
-      if (dropdownRef.current && !dropdownRef.current.contains(e.target)) {
-        closeFromDocumentEvent();
-      }
-    };
-    document.addEventListener("keydown", handleEscape);
-    document.addEventListener("mousedown", handleClickOutside);
-    return () => {
-      document.removeEventListener("keydown", handleEscape);
-      document.removeEventListener("mousedown", handleClickOutside);
-    };
-  }, [isOpen]);
-  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((open) => !open),
-        className: "relative inline-flex items-center justify-center rounded-[var(--radius-lg)] p-2 transition-colors hover:bg-muted",
+        className: cn(
+          "relative inline-flex items-center justify-center rounded-[var(--radius-lg)] p-2 transition-colors hover:bg-muted",
+          className
+        ),
         children: [
           /* @__PURE__ */ jsx(Bell, { className: "h-5 w-5 text-muted-foreground" }),
           unreadCount > 0 && /* @__PURE__ */ jsx("span", { className: "absolute right-0 top-0 flex h-5 w-5 items-center justify-center rounded-full bg-[var(--status-danger)] text-xs font-bold text-white", children: unreadCount > 9 ? "9+" : unreadCount })
         ]
       }
     ),
-    isOpen && /* @__PURE__ */ jsxs("div", { className: "absolute right-0 top-full z-50 mt-2 w-80 overflow-hidden rounded-[var(--radius-lg)] border border-border bg-white shadow-lg transition-[background-color,border-color,box-shadow,color,opacity,transform] 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-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: closeAndMarkSeen,
-          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" })
-          ]
-        }
-      )
-    ] })
+    /* @__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";
@@ -1774,14 +2053,14 @@ function removeFlowEdge(graph, flowEdgeId, edgeIdentity) {
   };
 }
 var XYFLOW_TOKEN_THEME = {
-  ["--xy-background-pattern-color"]: "var(--neutral-6)",
-  ["--xy-edge-stroke"]: "var(--neutral-8)",
-  ["--xy-connectionline-stroke"]: "var(--neutral-8)",
-  ["--xy-handle-background-color"]: "var(--neutral-9)",
-  ["--xy-handle-border-color"]: "var(--neutral-7)",
-  ["--xy-controls-button-background-color"]: "var(--neutral-2)",
-  ["--xy-controls-button-border-color"]: "var(--neutral-7)",
-  ["--xy-controls-button-color"]: "var(--neutral-11)"
+  "--xy-background-pattern-color": "var(--neutral-6)",
+  "--xy-edge-stroke": "var(--neutral-8)",
+  "--xy-connectionline-stroke": "var(--neutral-8)",
+  "--xy-handle-background-color": "var(--neutral-9)",
+  "--xy-handle-border-color": "var(--neutral-7)",
+  "--xy-controls-button-background-color": "var(--neutral-2)",
+  "--xy-controls-button-border-color": "var(--neutral-7)",
+  "--xy-controls-button-color": "var(--neutral-11)"
 };
 var nodeCardVariants = cva(
   "min-w-[160px] rounded-[var(--radius-lg)] border bg-neutral-2 px-3 py-2 text-neutral-12 shadow-sm transition-colors",
@@ -1868,7 +2147,7 @@ function NodeGraphCanvas({
       setRejection(result.reason);
     }
   };
-  return /* @__PURE__ */ jsx(AnimateIn, { preset: "emerge", children: /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx(
     "div",
     {
       style: XYFLOW_TOKEN_THEME,
@@ -1903,11 +2182,11 @@ function NodeGraphCanvas({
                 children: [
                   /* @__PURE__ */ jsx("span", { children: rejection }),
                   /* @__PURE__ */ jsx(
-                    Button$1,
+                    Button,
                     {
-                      size: "small",
-                      type: "text",
-                      icon: /* @__PURE__ */ jsx(CrossSmall, { size: 14 }),
+                      size: "sm",
+                      variant: "ghost",
+                      prefix: /* @__PURE__ */ jsx(CrossSmall, { size: 14 }),
                       "aria-label": "Dismiss connection error",
                       onClick: () => setRejection(null),
                       children: "Dismiss"
@@ -1920,7 +2199,7 @@ function NodeGraphCanvas({
         }
       ) })
     }
-  ) });
+  );
 }
 var containerVariants = {
   hidden: { opacity: 0, y: 20 },
@@ -1997,7 +2276,7 @@ function OnboardingChecklist({
                 "a",
                 {
                   href: item.helperLink.href,
-                  className: "text-primary underline-offset-4 hover:underline focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 rounded-[var(--radius-sm)]",
+                  className: "text-primary underline-offset-4 hover:underline rounded-[var(--radius-sm)]",
                   children: item.helperLink.text
                 }
               )
@@ -2014,7 +2293,8 @@ function OnboardingChecklist({
                 "button",
                 {
                   type: "button",
-                  className: "w-full h-full focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible: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,
@@ -2181,11 +2461,11 @@ var Kbd = ({
 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-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",
-    formControlFocusClassNames.input,
+    "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",
@@ -2208,11 +2488,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"
     }
   }
 );
@@ -2234,8 +2534,8 @@ 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",
+    "hover:bg-accent hover:text-accent-foreground",
+    "focus-visible:outline-none",
     "disabled:pointer-events-none disabled:opacity-50",
     "[&_svg]:size-[var(--input-control-icon-size)]"
   ].join(" ")
@@ -2274,7 +2574,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) {
@@ -2300,6 +2600,7 @@ var Input = ({
     className,
     type = "text",
     size = "md",
+    tone = "bordered",
     prefix,
     suffix,
     clearable,
@@ -2419,7 +2720,7 @@ var Input = ({
       "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
       ),
@@ -2585,7 +2886,7 @@ 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-border",
+        "w-full max-w-content mx-auto p-6 bg-white dark:bg-black rounded-[var(--radius-3xl)] shadow-lg flex flex-col h-[550px] border border-border",
         className
       ),
       children: [
@@ -2700,6 +3001,6 @@ function TeamChat({
   );
 }
 
-export { AnimateIn, AnimateInGroup, AnimatedCard, AnimatedDrawer, AnimatedList, AnimatedModal, AnimatedPopover, AsciiText, ChangelogWidget, FadeIn, ImageViewDialog, MAX_VISUALIZER_BARS, NodeGraphCanvas, OnboardingChecklist, PageTransition, PromptAttachmentPreviews, PromptInputBox, ScaleIn, SlideIn, TeamChat, VISUALIZER_BAR_STYLES, VoiceRecorder, animatedList, animatedListItem, animationDistances, animationDurations, animationEasings, animationSprings, animationTransitions, drawerSurface, fadeIn, formatRecordingTime, getFilePreviewKey, isImageFile, modalSurface, pageTransition, popoverSurface, preventDragDefaults, reducedMotionVariants, scaleIn, slideIn };
+export { AnimateIn, AnimateInGroup, AnimateSwap, AnimatedCard, AnimatedDrawer, AnimatedList, AnimatedModal, AnimatedPopover, AsciiText, ChangelogWidget, FadeIn, GRAPH_NODE_FLOW_TYPE, ImageViewDialog, MAX_VISUALIZER_BARS, NodeGraphCanvas, OnboardingChecklist, PageTransition, PromptAttachmentPreviews, PromptInputBox, ScaleIn, SlideIn, TeamChat, VISUALIZER_BAR_STYLES, VoiceRecorder, animatedList, animatedListItem, animationDistances, animationDurations, animationEasings, animationSprings, animationTransitions, applyNodePositions, drawerSurface, fadeIn, formatRecordingTime, getFilePreviewKey, graphToFlow, isImageFile, modalSurface, pageTransition, popoverSurface, preventDragDefaults, reducedMotionVariants, removeFlowEdge, removeNode, scaleIn, slideIn, tryAddEdge };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map