@nebutra/ui 0.1.0 → 0.2.0

package/dist/components/index.js

@@ -0,0 +1,2398 @@
+"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';
+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 { 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 { 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 '@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
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+var Slot = React6.forwardRef(
+  ({ children, className, style, ...props }, ref) => {
+    const childArray = React6.Children.toArray(children);
+    const child = childArray.length === 1 ? childArray[0] : null;
+    if (child == null || !React6.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;
+      if (typeof childRef === "function") childRef(node);
+      else if (childRef && "current" in childRef) {
+        childRef.current = node;
+      }
+    };
+    const mergedClass = [className, childProps.className].filter(Boolean).join(" ");
+    const merged = {
+      ...childProps,
+      ...props,
+      ref: mergedRef,
+      className: mergedClass,
+      style: { ...childProps.style, ...style }
+    };
+    return React6.cloneElement(
+      child,
+      merged
+    );
+  }
+);
+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",
+    "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",
+        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",
+        ghost: "hover:bg-accent hover:text-accent-foreground",
+        link: "text-primary underline-offset-4 hover:underline",
+        tertiary: "border border-transparent bg-transparent text-muted-foreground hover:bg-accent hover:text-accent-foreground hover:border-input",
+        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)
+      },
+      shape: {
+        default: "",
+        square: "",
+        circle: ""
+      }
+    },
+    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" }
+    ],
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+      shape: "default"
+    }
+  }
+);
+function Spinner({ className }) {
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      "aria-hidden": "true",
+      className: cn(
+        "block rounded-full border-2 border-current border-t-transparent animate-[spinner_0.6s_linear_infinite]",
+        className
+      )
+    }
+  );
+}
+function getIconSizeClass(size) {
+  switch (size) {
+    case "tiny":
+      return "[&>svg]:size-3";
+    // 12px
+    case "sm":
+      return "[&>svg]:size-3.5";
+    // 14px
+    case "lg":
+      return "[&>svg]:size-4.5";
+    // 18px
+    default:
+      return "[&>svg]:size-4";
+  }
+}
+function getSpinnerSizeClass(size) {
+  switch (size) {
+    case "tiny":
+      return "size-3";
+    // 12px
+    case "sm":
+      return "size-3.5";
+    // 14px
+    case "lg":
+      return "size-4.5";
+    // 18px
+    default:
+      return "size-4";
+  }
+}
+var SHADOW_CLASSES = {
+  sm: "shadow-sm",
+  md: "shadow-md",
+  lg: "shadow-lg"
+};
+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);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    loading && /* @__PURE__ */ jsx(Spinner, { className: getSpinnerSizeClass(size) }),
+    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,
+    {
+      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
+      ),
+      ...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
+    }
+  )
+);
+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};
+
+// src/tokens/components/textarea.ts
+var textareaTokens = {
+  sizes: {
+    sm: {
+      minHeight: primitiveSpacing[20],
+      paddingX: primitiveSpacing[2],
+      paddingY: primitiveSpacing[2],
+      fontSize: primitiveFontSize.xs,
+      radius: primitiveRadius.md
+    },
+    md: {
+      minHeight: primitiveSpacing[24],
+      paddingX: primitiveSpacing[3],
+      paddingY: primitiveSpacing[2],
+      fontSize: primitiveFontSize.sm,
+      radius: primitiveRadius.md
+    },
+    lg: {
+      minHeight: primitiveSpacing[24],
+      paddingX: primitiveSpacing[4],
+      paddingY: primitiveSpacing[3],
+      fontSize: primitiveFontSize.base,
+      radius: primitiveRadius.lg
+    }
+  },
+  labelSize: primitiveFontSize.sm,
+  focusRingWidth: 3,
+  fieldGap: primitiveSpacing[2] - primitiveSpacing[1] / 2};
+var fieldMessageClassName = "text-xs text-muted-foreground";
+var fieldErrorClassName = "text-xs font-medium text-destructive";
+function getTextareaStyle(size, style) {
+  const token = textareaTokens.sizes[size];
+  return {
+    "--textarea-min-height": `${token.minHeight}px`,
+    "--textarea-padding-x": `${token.paddingX}px`,
+    "--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;
+    }
+    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 = ({
+  children,
+  delayDuration = DEFAULT_TOOLTIP_DELAY_MS
+}) => {
+  return /* @__PURE__ */ jsx(Tooltip$1.Provider, { delay: delayDuration, children });
+};
+var Tooltip = ({
+  delayDuration,
+  children,
+  ...props
+}) => {
+  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)) {
+    return /* @__PURE__ */ jsx(
+      Tooltip$1.Trigger,
+      {
+        ref,
+        ...props,
+        render: children
+      }
+    );
+  }
+  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
+        }
+      )
+    }
+  ) })
+);
+TooltipContent.displayName = "TooltipContent";
+var cn2 = (...classes) => classes.filter(Boolean).join(" ");
+var VoiceRecorder = ({
+  isRecording,
+  onStartRecording,
+  onStopRecording,
+  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")}`;
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn2(
+        "flex flex-col items-center justify-center w-full transition-all 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("div", { className: "w-full h-10 flex items-center justify-center gap-0.5 px-4", children: [...Array(visualizerBars)].map((_, i) => /* @__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`
+            }
+          },
+          i
+        )) })
+      ]
+    }
+  );
+};
+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
+          }
+        )
+      }
+    )
+  ] }) });
+};
+var PromptInputContext = React6__default.createContext({
+  isLoading: false,
+  value: "",
+  setValue: () => {
+  },
+  maxHeight: 240,
+  onSubmit: void 0,
+  disabled: false
+});
+function usePromptInput() {
+  const context = React6__default.useContext(PromptInputContext);
+  if (!context) throw new Error("usePromptInput must be used within a PromptInput");
+  return context;
+}
+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
+          }
+        )
+      }
+    ) });
+  }
+);
+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(() => {
+    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})`;
+  }, [maxHeight, disableAutosize]);
+  const handleKeyDown = (e) => {
+    if (e.key === "Enter" && !e.shiftKey) {
+      e.preventDefault();
+      onSubmit?.();
+    }
+    onKeyDown?.(e);
+  };
+  return /* @__PURE__ */ jsx(
+    Textarea,
+    {
+      ref: textareaRef,
+      value,
+      onChange: (e) => setValue(e.target.value),
+      onKeyDown: handleKeyDown,
+      rows: 1,
+      style: { "--textarea-min-height": "2rem", ...style },
+      className: cn2("resize-none border-0 shadow-none focus-visible:ring-0", className),
+      disabled,
+      placeholder,
+      ...props
+    }
+  );
+};
+var PromptInputActions = ({
+  children,
+  className,
+  ...props
+}) => /* @__PURE__ */ jsx("div", { className: cn2("flex items-center gap-2", className), ...props, children });
+var PromptInputAction = ({
+  tooltip,
+  children,
+  className,
+  side = "top",
+  ...props
+}) => {
+  const { disabled } = usePromptInput();
+  return /* @__PURE__ */ jsxs(Tooltip, { ...props, children: [
+    /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, disabled, children }),
+    /* @__PURE__ */ jsx(TooltipContent, { side, className: className || "", children: tooltip })
+  ] });
+};
+var CustomDivider = () => /* @__PURE__ */ jsx("div", { className: "relative h-6 w-[1.5px] mx-1", children: /* @__PURE__ */ jsx(
+  "div",
+  {
+    className: "absolute inset-0 bg-gradient-to-t from-transparent via-cyan/40 to-transparent rounded-full",
+    style: {
+      clipPath: "polygon(0% 0%, 100% 0%, 100% 40%, 140% 50%, 100% 60%, 100% 100%, 0% 100%, 0% 60%, -40% 50%, 0% 40%)"
+    }
+  }
+) });
+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);
+      }
+    };
+    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;
+        }
+        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;
+            }
+          }
+        }
+      },
+      [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)) }),
+            /* @__PURE__ */ jsx(
+              "div",
+              {
+                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"
+                  }
+                )
+              }
+            ),
+            isRecording && /* @__PURE__ */ jsx(
+              VoiceRecorder,
+              {
+                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" })
+                    }
+                  )
+                }
+              )
+            ] })
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsx(ImageViewDialog, { imageUrl: selectedImage, onClose: () => setSelectedImage(null) })
+    ] });
+  }
+);
+PromptInputBox.displayName = "PromptInputBox";
+var PRESETS = {
+  emerge: {
+    initial: emerge.initial,
+    animate: emerge.animate,
+    exit: emerge.exit,
+    transition: emerge.transition
+  },
+  flow: {
+    initial: flow.initial,
+    animate: flow.animate,
+    exit: flow.exit,
+    transition: flow.transition
+  },
+  fade: {
+    initial: { opacity: 0 },
+    animate: { opacity: 1 },
+    exit: { opacity: 0 },
+    transition: { duration: 0.3 }
+  },
+  fadeUp: {
+    initial: { opacity: 0, y: 16 },
+    animate: { opacity: 1, y: 0 },
+    exit: { opacity: 0, y: 16 },
+    transition: brandSpring
+  },
+  scale: {
+    initial: { opacity: 0, scale: 0.95 },
+    animate: { opacity: 1, scale: 1 },
+    exit: { opacity: 0, scale: 0.95 },
+    transition: brandSpring
+  }
+};
+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 shouldReduce = useReducedMotion();
+  const { initial, animate, exit, transition } = PRESETS[preset];
+  const t = {
+    ...transition,
+    ...delay ? { delay } : {},
+    ...duration ? { duration } : {}
+  };
+  if (shouldReduce) return /* @__PURE__ */ jsx("div", { className, children });
+  if (inView) {
+    return /* @__PURE__ */ jsx(
+      MotionDiv,
+      {
+        className,
+        initial,
+        whileInView: animate,
+        exit,
+        viewport: { once: true, margin: "-10%" },
+        transition: t,
+        children
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(MotionDiv, { className, initial, animate, exit, transition: t, children });
+}
+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 });
+  if (inView) {
+    return /* @__PURE__ */ jsx(
+      MotionDiv,
+      {
+        className,
+        initial: "initial",
+        whileInView: "animate",
+        viewport: { once: true, margin: "-10%" },
+        variants,
+        children
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(MotionDiv, { className, initial: "initial", animate: "animate", variants, children });
+}
+function AsciiText({ text, className = "", font = slant }) {
+  const asciiTextRef = useAsciiText({
+    font,
+    text
+  });
+  return /* @__PURE__ */ jsx(
+    "pre",
+    {
+      ref: asciiTextRef,
+      className: `font-mono leading-none m-0 p-0 ${className}`
+    }
+  );
+}
+var TAG_COLOR_MAP = {
+  feature: "bg-[var(--cyan-9)] 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)]"
+};
+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 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;
+  };
+  return /* @__PURE__ */ jsxs("div", { className: cn("relative", className), ref: dropdownRef, children: [
+    /* @__PURE__ */ jsxs(
+      "button",
+      {
+        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)]",
+        children: [
+          /* @__PURE__ */ jsx(Bell, { className: "h-5 w-5 text-[var(--neutral-11)]" }),
+          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" })
+          ]
+        }
+      )
+    ] })
+  ] });
+}
+var GRAPH_NODE_FLOW_TYPE = "graph-node";
+function graphToFlow(graph, edgeIdentity) {
+  const nodes = graph.nodes.map((n) => ({
+    id: n.id,
+    type: GRAPH_NODE_FLOW_TYPE,
+    position: { x: n.x, y: n.y },
+    data: { node: n }
+  }));
+  const edges = graph.edges.map((e) => ({
+    id: edgeIdentity(e),
+    source: e.from,
+    target: e.to,
+    data: { edge: e }
+  }));
+  return { nodes, edges };
+}
+function applyNodePositions(graph, flowNodes) {
+  const posById = new Map(flowNodes.map((n) => [n.id, n.position]));
+  const nodes = graph.nodes.map((n) => {
+    const pos = posById.get(n.id);
+    if (!pos || pos.x === n.x && pos.y === n.y) return n;
+    return { ...n, x: pos.x, y: pos.y };
+  });
+  return { ...graph, nodes };
+}
+function tryAddEdge(graph, connection, opts) {
+  if (!connection.source || !connection.target) {
+    return { ok: false, reason: "Connection needs both a source and a target node." };
+  }
+  if (connection.source === connection.target) {
+    return { ok: false, reason: "A node cannot connect to itself." };
+  }
+  const candidate = opts.makeEdge(connection.source, connection.target, connection.targetHandle);
+  if (!candidate) {
+    return { ok: false, reason: "That connection is not allowed between these nodes." };
+  }
+  const candidateId = opts.edgeIdentity(candidate);
+  if (graph.edges.some((e) => opts.edgeIdentity(e) === candidateId)) {
+    return { ok: false, reason: "That connection already exists between these nodes." };
+  }
+  if (wouldCreateCycle(graph.edges, candidate.from, candidate.to)) {
+    return {
+      ok: false,
+      reason: "That connection would create a cycle. The graph must stay acyclic (DAG)."
+    };
+  }
+  return { ok: true, graph: { ...graph, edges: [...graph.edges, candidate] } };
+}
+function removeNode(graph, nodeId) {
+  return {
+    ...graph,
+    nodes: graph.nodes.filter((n) => n.id !== nodeId),
+    edges: graph.edges.filter((e) => e.from !== nodeId && e.to !== nodeId)
+  };
+}
+function removeFlowEdge(graph, flowEdgeId, edgeIdentity) {
+  return {
+    ...graph,
+    edges: graph.edges.filter((e) => edgeIdentity(e) !== flowEdgeId)
+  };
+}
+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)"
+};
+var nodeCardVariants = cva(
+  "min-w-[160px] rounded-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 NodeGraphCanvas({
+  graph,
+  onChange,
+  edgeIdentity,
+  makeEdge,
+  renderNode,
+  readOnly = false,
+  className
+}) {
+  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;
+      let next = graph;
+      for (const r of removed) next = removeFlowEdge(next, r.id, edgeIdentity);
+      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 /* @__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",
+        className
+      ),
+      children: /* @__PURE__ */ jsx(ReactFlowProvider, { children: /* @__PURE__ */ jsxs(
+        ReactFlow,
+        {
+          nodes,
+          edges,
+          nodeTypes,
+          onNodesChange,
+          onEdgesChange,
+          onConnect,
+          nodesDraggable: !readOnly,
+          nodesConnectable: !readOnly,
+          elementsSelectable: !readOnly,
+          fitView: true,
+          proOptions: { hideAttribution: true },
+          children: [
+            /* @__PURE__ */ jsx(Background, { color: "var(--neutral-6)" }),
+            /* @__PURE__ */ jsx(Controls, { showInteractive: !readOnly }),
+            rejection ? /* @__PURE__ */ jsx(Panel, { position: "top-center", children: /* @__PURE__ */ jsxs(
+              "div",
+              {
+                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",
+                children: [
+                  /* @__PURE__ */ jsx("span", { children: rejection }),
+                  /* @__PURE__ */ jsx(
+                    Button$1,
+                    {
+                      size: "small",
+                      type: "text",
+                      icon: /* @__PURE__ */ jsx(CrossSmall, { size: 14 }),
+                      "aria-label": "Dismiss connection error",
+                      onClick: () => setRejection(null),
+                      children: "Dismiss"
+                    }
+                  )
+                ]
+              }
+            ) }) : null
+          ]
+        }
+      ) })
+    }
+  ) });
+}
+var containerVariants = {
+  hidden: { opacity: 0, y: 20 },
+  visible: {
+    opacity: 1,
+    y: 0,
+    transition: {
+      duration: 0.5,
+      ease: "easeOut",
+      when: "beforeChildren",
+      staggerChildren: 0.1
+    }
+  }
+};
+var itemVariants = {
+  hidden: { opacity: 0, x: -20 },
+  visible: {
+    opacity: 1,
+    x: 0,
+    transition: {
+      duration: 0.4,
+      ease: "easeOut"
+    }
+  }
+};
+function OnboardingChecklist({
+  title,
+  description,
+  items,
+  videoThumbnailUrl,
+  videoUrl,
+  className
+}) {
+  return /* @__PURE__ */ jsx(
+    motion.div,
+    {
+      initial: "hidden",
+      animate: "visible",
+      variants: containerVariants,
+      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
+      ),
+      children: /* @__PURE__ */ jsxs("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-8 items-center", children: [
+        /* @__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__ */ 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 })
+            ] }),
+            item.helperText && item.helperLink && /* @__PURE__ */ jsxs("div", { className: "ml-8 mt-1 text-xs text-muted-foreground", children: [
+              item.helperText,
+              " ",
+              /* @__PURE__ */ jsx(
+                "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)]",
+                  children: item.helperLink.text
+                }
+              )
+            ] })
+          ] }, item.id)) })
+        ] }),
+        /* @__PURE__ */ jsx(
+          motion.div,
+          {
+            variants: itemVariants,
+            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)]",
+                  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",
+                        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(DialogContent, { className: "max-w-3xl p-0 border-0", children: /* @__PURE__ */ jsx("div", { className: "aspect-video", children: /* @__PURE__ */ jsx(
+                "iframe",
+                {
+                  src: videoUrl,
+                  title: "Onboarding Video Guide",
+                  frameBorder: "0",
+                  allow: "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture",
+                  allowFullScreen: true,
+                  className: "w-full h-full rounded-[var(--radius-lg)]"
+                }
+              ) }) })
+            ] })
+          }
+        )
+      ] })
+    }
+  );
+}
+
+// src/tokens/components/input.ts
+var inputTokens = {
+  sizes: {
+    sm: {
+      height: primitiveSizing.sm,
+      paddingX: primitiveSpacing[2],
+      fontSize: primitiveFontSize.xs,
+      radius: primitiveRadius.md,
+      affixInset: primitiveSpacing[2],
+      affixWidth: primitiveSizing.sm,
+      controlInset: primitiveSpacing[2] - primitiveSpacing[1] / 2,
+      controlSize: primitiveSizing.xs,
+      controlIconSize: primitiveSizing.xs - primitiveSpacing[2],
+      iconSize: primitiveFontSize.sm
+    },
+    md: {
+      height: primitiveSizing.md,
+      paddingX: primitiveSpacing[3],
+      fontSize: primitiveFontSize.sm,
+      radius: primitiveRadius.md,
+      affixInset: primitiveSpacing[3],
+      affixWidth: primitiveSizing.sm + primitiveSpacing[1],
+      controlInset: primitiveSpacing[2],
+      controlSize: primitiveSizing.tiny,
+      controlIconSize: primitiveSizing.tiny - primitiveSpacing[2],
+      iconSize: primitiveFontSize.base
+    },
+    lg: {
+      height: primitiveSizing.lg,
+      paddingX: primitiveSpacing[4],
+      fontSize: primitiveFontSize.base,
+      radius: primitiveRadius.lg,
+      affixInset: primitiveSpacing[4],
+      affixWidth: primitiveSizing.md,
+      controlInset: primitiveSpacing[3],
+      controlSize: primitiveSizing.tiny,
+      controlIconSize: primitiveSizing.tiny - primitiveSpacing[2],
+      iconSize: primitiveFontSize.base
+    }
+  },
+  focusRingWidth: 3,
+  fieldGap: primitiveSpacing[2] - primitiveSpacing[1] / 2};
+var modifierOrder = ["meta", "shift", "alt", "ctrl"];
+var appleModifierSymbols = {
+  meta: "\u2318",
+  shift: "\u21E7",
+  alt: "\u2325",
+  ctrl: "\u2303"
+};
+var otherModifierSymbols = {
+  meta: "Ctrl",
+  shift: "Shift",
+  alt: "Alt",
+  ctrl: "Ctrl"
+};
+var modifierLabels = {
+  meta: "Command or Control",
+  shift: "Shift",
+  alt: "Option or Alt",
+  ctrl: "Control"
+};
+function getClientPlatform() {
+  const platform = window.navigator.platform.toLowerCase();
+  const userAgent = window.navigator.userAgent.toLowerCase();
+  const isApple = /mac|iphone|ipad|ipod/.test(platform) || /mac|iphone|ipad|ipod/.test(userAgent);
+  return isApple ? "apple" : "other";
+}
+function subscribePlatform() {
+  return () => void 0;
+}
+function usePlatform() {
+  return React6.useSyncExternalStore(subscribePlatform, getClientPlatform, () => "apple");
+}
+function normalizeKey(children) {
+  if (typeof children !== "string") {
+    return children;
+  }
+  const trimmed = children.trim();
+  if (/^[a-z]$/.test(trimmed)) {
+    return trimmed.toUpperCase();
+  }
+  return trimmed;
+}
+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("")
+      }
+    );
+  }
+);
+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)]",
+    "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",
+    "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",
+    "[&[type=search]::-webkit-search-cancel-button]:appearance-none",
+    "[&[type=search]::-webkit-search-decoration]:appearance-none",
+    "[&[type=search]::-webkit-search-results-button]:appearance-none",
+    "[&[type=search]::-webkit-search-results-decoration]:appearance-none"
+  ].join(" "),
+  {
+    variants: {
+      size: {
+        sm: "",
+        md: "",
+        lg: ""
+      },
+      affix: {
+        none: "",
+        prefix: "pl-[var(--input-padding-left)]",
+        suffix: "pr-[var(--input-padding-right)]",
+        both: "pl-[var(--input-padding-left)] pr-[var(--input-padding-right)]"
+      }
+    },
+    defaultVariants: {
+      size: "md",
+      affix: "none"
+    }
+  }
+);
+var affixVariants = cva(
+  [
+    "pointer-events-none absolute top-1/2 flex -translate-y-1/2 items-center text-muted-foreground",
+    "[&_svg:not([class*=size-])]:size-[var(--input-icon-size)]"
+  ].join(" "),
+  {
+    variants: {
+      side: {
+        prefix: "left-[var(--input-affix-inset)]",
+        suffix: "right-[var(--input-affix-inset)]"
+      }
+    }
+  }
+);
+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",
+    "disabled:pointer-events-none disabled:opacity-50",
+    "[&_svg]:size-[var(--input-control-icon-size)]"
+  ].join(" ")
+);
+var fieldMessageVariants = cva("text-xs", {
+  variants: {
+    tone: {
+      description: "text-muted-foreground",
+      error: "font-medium text-destructive"
+    }
+  }
+});
+function assignRef(ref, value) {
+  if (typeof ref === "function") {
+    ref(value);
+    return;
+  }
+  if (ref) {
+    ref.current = value;
+  }
+}
+function getInputStyle(size, style) {
+  const token = inputTokens.sizes[size];
+  return {
+    "--input-height": `${token.height}px`,
+    "--input-padding-x": `${token.paddingX}px`,
+    "--input-padding-left": `${token.affixWidth}px`,
+    "--input-padding-right": `${token.affixWidth}px`,
+    "--input-font-size": `${token.fontSize}px`,
+    "--input-radius": `${token.radius}px`,
+    "--input-affix-inset": `${token.affixInset}px`,
+    "--input-control-inset": `${token.controlInset}px`,
+    "--input-control-size": `${token.controlSize}px`,
+    "--input-control-icon-size": `${token.controlIconSize}px`,
+    "--input-icon-size": `${token.iconSize}px`,
+    "--input-focus-ring-width": `${inputTokens.focusRingWidth}px`,
+    borderRadius: "var(--input-radius)",
+    outline: "none",
+    ...style
+  };
+}
+function getAffixMode(prefix, hasRightAdornment) {
+  if (prefix != null && hasRightAdornment) return "both";
+  if (prefix != null) return "prefix";
+  if (hasRightAdornment) return "suffix";
+  return "none";
+}
+function isInvalid2(error, ariaInvalid) {
+  return error === true || typeof error === "string" || ariaInvalid === true || ariaInvalid === "true";
+}
+function isTextAffix(value) {
+  return typeof value === "string" && value.trim().length > 0;
+}
+function joinDescriptionIds2(...ids) {
+  return ids.filter(Boolean).join(" ") || void 0;
+}
+var Input = React6.forwardRef((props, forwardedRef) => {
+  const {
+    className,
+    type = "text",
+    size = "md",
+    prefix,
+    suffix,
+    clearable,
+    onClear,
+    onValueChange,
+    shortcut,
+    loading,
+    revealable,
+    revealLabel = "Show password",
+    hideLabel = "Hide password",
+    clearOnEscape,
+    wrapperClassName,
+    fieldClassName,
+    label,
+    description,
+    error,
+    value,
+    defaultValue,
+    onChange,
+    onKeyDown,
+    disabled,
+    style,
+    "aria-describedby": ariaDescribedBy,
+    "aria-invalid": ariaInvalid,
+    id,
+    ...rest
+  } = props;
+  const isControlled = value !== void 0;
+  const baseId = React6.useId();
+  const inputRef = React6.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(
+    typeof defaultValue === "string" || typeof defaultValue === "number" ? String(defaultValue) : ""
+  );
+  const [passwordVisible, setPasswordVisible] = React6.useState(false);
+  const currentValue = isControlled ? String(value ?? "") : internalValue;
+  const clearOnEscapeEnabled = clearOnEscape ?? type === "search";
+  const canRevealPassword = Boolean(revealable && type === "password");
+  const showClear = Boolean(clearable && !disabled && currentValue.length > 0 && !loading);
+  const showShortcut = Boolean(shortcut && !loading && !showClear);
+  const showSpinner = Boolean(loading);
+  const showPasswordToggle = Boolean(canRevealPassword && !loading && !showClear && !showShortcut);
+  const hasRightAdornment = showClear || showShortcut || showSpinner || showPasswordToggle || suffix != null;
+  const hasControlWrapper = prefix != null || hasRightAdornment;
+  const affix = getAffixMode(prefix, hasRightAdornment);
+  const resolvedInvalid = isInvalid2(error, ariaInvalid);
+  const describedBy = joinDescriptionIds2(
+    ariaDescribedBy,
+    prefixDescriptionId,
+    suffixDescriptionId,
+    descriptionId,
+    errorId
+  );
+  const valueProps = isControlled ? { value } : clearable || shortcut || clearOnEscapeEnabled ? { value: currentValue } : { defaultValue };
+  const setInputRef = React6.useCallback(
+    (node) => {
+      const input = node instanceof HTMLInputElement ? node : null;
+      inputRef.current = input;
+      assignRef(forwardedRef, input);
+    },
+    [forwardedRef]
+  );
+  const emitNativeInput = React6.useCallback(
+    (nextValue) => {
+      const input = inputRef.current;
+      if (!input) {
+        if (!isControlled) setInternalValue(nextValue);
+        onValueChange?.(nextValue);
+        return;
+      }
+      const valueSetter = Object.getOwnPropertyDescriptor(
+        window.HTMLInputElement.prototype,
+        "value"
+      )?.set;
+      valueSetter?.call(input, nextValue);
+      input.dispatchEvent(new Event("input", { bubbles: true }));
+    },
+    [isControlled, onValueChange]
+  );
+  const syncInputValue = React6.useCallback(
+    (event) => {
+      if (!isControlled) setInternalValue(event.currentTarget.value);
+      onValueChange?.(event.currentTarget.value);
+      onChange?.(event);
+    },
+    [isControlled, onChange, onValueChange]
+  );
+  const handleClear = React6.useCallback(() => {
+    emitNativeInput("");
+    onClear?.();
+    inputRef.current?.focus();
+  }, [emitNativeInput, onClear]);
+  const handleKeyDown = React6.useCallback(
+    (event) => {
+      onKeyDown?.(event);
+      if (event.defaultPrevented || event.key !== "Escape" || !clearOnEscapeEnabled || currentValue.length === 0 || disabled) {
+        return;
+      }
+      event.preventDefault();
+      event.stopPropagation();
+      handleClear();
+    },
+    [clearOnEscapeEnabled, currentValue.length, disabled, handleClear, onKeyDown]
+  );
+  const control = /* @__PURE__ */ jsx(
+    Input$1,
+    {
+      ref: setInputRef,
+      "data-slot": "input",
+      type: canRevealPassword && passwordVisible ? "text" : type,
+      id,
+      disabled,
+      "aria-invalid": resolvedInvalid || void 0,
+      "aria-describedby": describedBy,
+      "aria-busy": loading || void 0,
+      className: cn(
+        inputVariants({ size, affix }),
+        type === "file" && "p-0 pr-[var(--input-padding-x)] text-muted-foreground",
+        className
+      ),
+      style: getInputStyle(size, style),
+      onChange: syncInputValue,
+      onKeyDown: handleKeyDown,
+      ...rest,
+      ...valueProps
+    }
+  );
+  const inputControl = hasControlWrapper ? /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "data-slot": "input-wrapper",
+      className: cn("relative flex items-center", wrapperClassName),
+      style: getInputStyle(size, void 0),
+      children: [
+        prefix != null && /* @__PURE__ */ jsx(
+          "span",
+          {
+            id: prefixDescriptionId,
+            "aria-hidden": !isTextAffix(prefix),
+            className: affixVariants({ side: "prefix" }),
+            children: prefix
+          }
+        ),
+        control,
+        showSpinner && /* @__PURE__ */ jsx(
+          "span",
+          {
+            "aria-hidden": "true",
+            className: "pointer-events-none absolute right-[var(--input-control-inset)] top-1/2 flex size-[var(--input-control-size)] -translate-y-1/2 items-center justify-center text-muted-foreground",
+            style: getInputStyle(size, void 0),
+            children: /* @__PURE__ */ jsx(LoaderCircle, { className: "size-[var(--input-control-icon-size)] animate-spin" })
+          }
+        ),
+        showClear && /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            "aria-label": "Clear input",
+            disabled,
+            className: inputControlButtonVariants(),
+            style: getInputStyle(size, void 0),
+            onClick: handleClear,
+            children: /* @__PURE__ */ jsx(Cross, { "aria-hidden": "true" })
+          }
+        ),
+        showShortcut && /* @__PURE__ */ jsx(
+          "span",
+          {
+            "aria-hidden": "true",
+            className: "pointer-events-none absolute right-[var(--input-control-inset)] top-1/2 flex -translate-y-1/2 items-center",
+            style: getInputStyle(size, void 0),
+            children: /* @__PURE__ */ jsx(Kbd, { small: true, children: currentValue.length > 0 ? "Esc" : shortcut })
+          }
+        ),
+        showPasswordToggle && /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            "aria-label": passwordVisible ? hideLabel : revealLabel,
+            "aria-pressed": passwordVisible,
+            disabled,
+            className: inputControlButtonVariants(),
+            style: getInputStyle(size, void 0),
+            onClick: () => {
+              setPasswordVisible((visible) => !visible);
+              inputRef.current?.focus();
+            },
+            children: passwordVisible ? /* @__PURE__ */ jsx(EyeOff, { "aria-hidden": "true" }) : /* @__PURE__ */ jsx(Eye, { "aria-hidden": "true" })
+          }
+        ),
+        suffix != null && !showClear && !showShortcut && !showSpinner && !showPasswordToggle && /* @__PURE__ */ jsx(
+          "span",
+          {
+            id: suffixDescriptionId,
+            "aria-hidden": !isTextAffix(suffix),
+            className: affixVariants({ side: "suffix" }),
+            children: suffix
+          }
+        )
+      ]
+    }
+  ) : control;
+  if (!label && !description && typeof error !== "string") {
+    return inputControl;
+  }
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      "data-slot": "input-field",
+      className: cn("grid gap-[var(--input-field-gap)]", fieldClassName),
+      style: {
+        "--input-field-gap": `${inputTokens.fieldGap}px`
+      },
+      children: [
+        label && /* @__PURE__ */ jsx("label", { htmlFor: id, className: "text-sm font-medium text-foreground", children: label }),
+        inputControl,
+        description && !error && /* @__PURE__ */ jsx("p", { id: descriptionId, className: fieldMessageVariants({ tone: "description" }), children: description }),
+        typeof error === "string" && /* @__PURE__ */ jsx("p", { id: errorId, role: "alert", className: fieldMessageVariants({ tone: "error" }), children: error })
+      ]
+    }
+  );
+});
+Input.displayName = "Input";
+function Avatar({ src, alt, isOnline, size = "md" }) {
+  const sizeClasses = size === "sm" ? "w-10 h-10" : "w-10 h-10";
+  return /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+    /* @__PURE__ */ jsx(
+      Image,
+      {
+        src,
+        alt,
+        className: cn(
+          sizeClasses,
+          "rounded-full ring-1 ring-gray-400 dark:ring-gray-600 object-cover"
+        ),
+        width: 400,
+        height: 400
+      }
+    ),
+    isOnline !== void 0 && /* @__PURE__ */ jsx(
+      "span",
+      {
+        className: cn(
+          "absolute bottom-0 right-0 w-3 h-3 rounded-full ring-2 ring-white dark:ring-black",
+          isOnline ? "bg-green-500" : "bg-[var(--neutral-8)]"
+        )
+      }
+    )
+  ] });
+}
+function TeamChat({
+  chatName,
+  tagline = "Collaborate creatively, deliver clearly.",
+  messages,
+  inputPlaceholder = "Write your message...",
+  onSendMessage,
+  onReactionClick,
+  onMoreOptions,
+  className
+}) {
+  const [selectedSender, setSelectedSender] = useState(null);
+  const [inputValue, setInputValue] = useState("");
+  const uniqueSenders = Array.from(
+    new Map(messages.map((m2) => [m2.sender.name, m2.sender])).values()
+  );
+  const filteredMessages = selectedSender ? messages.filter((m2) => m2.sender.name === selectedSender) : messages;
+  const handleSend = () => {
+    if (inputValue.trim() && onSendMessage) {
+      onSendMessage(inputValue.trim());
+      setInputValue("");
+    }
+  };
+  const handleKeyDown = (e) => {
+    if (e.key === "Enter" && !e.shiftKey) {
+      e.preventDefault();
+      handleSend();
+    }
+  };
+  return /* @__PURE__ */ jsxs(
+    "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)]",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsxs("header", { className: "flex justify-between items-center border-b border-[var(--neutral-7)] 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__ */ 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(
+            "button",
+            {
+              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)]" })
+            }
+          )
+        ] }),
+        /* @__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) => {
+            const isSelected = selectedSender === sender.name;
+            return /* @__PURE__ */ jsxs(
+              "button",
+              {
+                type: "button",
+                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)]"
+                ),
+                children: [
+                  /* @__PURE__ */ jsx(Avatar, { src: sender.avatar, alt: sender.name, isOnline: sender.isOnline }),
+                  /* @__PURE__ */ jsx("span", { className: "text-left font-medium truncate", children: sender.name })
+                ]
+              },
+              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__ */ jsxs("footer", { className: "mt-6 flex items-center gap-4 border-t border-[var(--neutral-7)] 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)]" })
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            Input,
+            {
+              type: "text",
+              value: inputValue,
+              onChange: (e) => setInputValue(e.target.value),
+              onKeyDown: handleKeyDown,
+              placeholder: inputPlaceholder
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              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",
+              children: /* @__PURE__ */ jsx(PaperAirplane, { className: "w-6 h-6" })
+            }
+          )
+        ] })
+      ]
+    }
+  );
+}
+
+export { AnimateIn, AnimateInGroup, AsciiText, ChangelogWidget, NodeGraphCanvas, OnboardingChecklist, PromptInputBox, TeamChat };
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map