sa2kit 3.0.0 → 3.2.0

package/dist/chunk-YIRPPMCN.mjs

@@ -0,0 +1,1916 @@
+import { buttonVariants, DialogTrigger, DialogPortal, DialogOverlay, DialogClose, Dialog, Input, DialogTitle, DialogHeader, DialogFooter, DialogDescription, DialogContent, Button, useControllableState, mergeRefs, Portal, useOnClickOutside } from './chunk-MMDSZIXD.mjs';
+import { cn } from './chunk-FUA6ZGMI.mjs';
+import { useLocalStorage } from './chunk-6V2MIQPF.mjs';
+import { __export } from './chunk-MAI35PU6.mjs';
+import * as React6 from 'react';
+import React6__default, { useRef, useState, useEffect, useCallback } from 'react';
+import { cva } from 'class-variance-authority';
+import { Check, Circle, ChevronRight, ChevronDown, ChevronUp, X, RotateCcw, Save, AlertCircle, GripVertical } from 'lucide-react';
+import { clsx } from 'clsx';
+import { useRouter } from 'next/navigation';
+
+// src/common/components/index.ts
+var components_exports = {};
+__export(components_exports, {
+  AlertDialog: () => Dialog,
+  AlertDialogAction: () => AlertDialogAction,
+  AlertDialogCancel: () => AlertDialogCancel,
+  AlertDialogContent: () => AlertDialogContent,
+  AlertDialogDescription: () => DialogDescription,
+  AlertDialogFooter: () => DialogFooter,
+  AlertDialogHeader: () => DialogHeader,
+  AlertDialogOverlay: () => DialogOverlay,
+  AlertDialogPortal: () => DialogPortal,
+  AlertDialogTitle: () => DialogTitle,
+  AlertDialogTrigger: () => DialogTrigger,
+  Avatar: () => Avatar,
+  AvatarFallback: () => AvatarFallback,
+  AvatarImage: () => AvatarImage,
+  BackButton: () => BackButton,
+  Badge: () => Badge,
+  Button: () => Button,
+  Card: () => Card,
+  CardContent: () => CardContent,
+  CardDescription: () => CardDescription,
+  CardFooter: () => CardFooter,
+  CardHeader: () => CardHeader,
+  CardTitle: () => CardTitle,
+  CollisionBalls: () => CollisionBalls,
+  ConfirmModal: () => ConfirmModal,
+  Dialog: () => Dialog,
+  DialogClose: () => DialogClose,
+  DialogContent: () => DialogContent,
+  DialogDescription: () => DialogDescription,
+  DialogFooter: () => DialogFooter,
+  DialogHeader: () => DialogHeader,
+  DialogOverlay: () => DialogOverlay,
+  DialogPortal: () => DialogPortal,
+  DialogTitle: () => DialogTitle,
+  DialogTrigger: () => DialogTrigger,
+  DropdownMenu: () => DropdownMenu,
+  DropdownMenuCheckboxItem: () => DropdownMenuCheckboxItem,
+  DropdownMenuContent: () => DropdownMenuContent,
+  DropdownMenuGroup: () => DropdownMenuGroup,
+  DropdownMenuItem: () => DropdownMenuItem,
+  DropdownMenuLabel: () => DropdownMenuLabel,
+  DropdownMenuPortal: () => DropdownMenuPortal,
+  DropdownMenuRadioGroup: () => DropdownMenuRadioGroup,
+  DropdownMenuRadioItem: () => DropdownMenuRadioItem,
+  DropdownMenuSeparator: () => DropdownMenuSeparator,
+  DropdownMenuShortcut: () => DropdownMenuShortcut,
+  DropdownMenuSub: () => DropdownMenuSub,
+  DropdownMenuSubContent: () => DropdownMenuSubContent,
+  DropdownMenuSubTrigger: () => DropdownMenuSubTrigger,
+  DropdownMenuTrigger: () => DropdownMenuTrigger,
+  FilterButtonGroup: () => FilterButtonGroup,
+  GenericOrderManager: () => GenericOrderManager,
+  Grid: () => Grid,
+  ImageMappingPanel: () => ImageMappingPanel,
+  Input: () => Input,
+  Label: () => Label,
+  LocalImageMappingPanel: () => LocalImageMappingPanel,
+  Modal: () => Modal,
+  Popover: () => Popover,
+  PopoverAnchor: () => PopoverAnchor,
+  PopoverContent: () => PopoverContent,
+  PopoverTrigger: () => PopoverTrigger,
+  Progress: () => Progress,
+  ScrollArea: () => ScrollArea,
+  ScrollBar: () => ScrollBar,
+  SearchBox: () => SearchBox,
+  SearchResultHint: () => SearchResultHint,
+  Select: () => Select,
+  SelectContent: () => SelectContent,
+  SelectGroup: () => SelectGroup,
+  SelectItem: () => SelectItem,
+  SelectLabel: () => SelectLabel,
+  SelectScrollDownButton: () => SelectScrollDownButton,
+  SelectScrollUpButton: () => SelectScrollUpButton,
+  SelectSeparator: () => SelectSeparator,
+  SelectTrigger: () => SelectTrigger,
+  SelectValue: () => SelectValue,
+  Separator: () => Separator,
+  Sheet: () => Dialog,
+  SheetClose: () => DialogClose,
+  SheetContent: () => SheetContent,
+  SheetDescription: () => SheetDescription,
+  SheetFooter: () => SheetFooter,
+  SheetHeader: () => SheetHeader,
+  SheetOverlay: () => DialogOverlay,
+  SheetPortal: () => DialogPortal,
+  SheetTitle: () => SheetTitle,
+  SheetTrigger: () => DialogTrigger,
+  Tabs: () => Tabs,
+  TabsContent: () => TabsContent,
+  TabsList: () => TabsList,
+  TabsTrigger: () => TabsTrigger,
+  Textarea: () => Textarea,
+  Timeline: () => Timeline,
+  Tooltip: () => Tooltip,
+  TooltipContent: () => TooltipContent,
+  TooltipProvider: () => TooltipProvider,
+  TooltipTrigger: () => TooltipTrigger,
+  badgeVariants: () => badgeVariants,
+  buttonVariants: () => buttonVariants
+});
+var Card = React6.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React6.createElement(
+  "div",
+  {
+    ref,
+    className: cn(
+      "rounded-xl border bg-card text-card-foreground shadow",
+      className
+    ),
+    ...props
+  }
+));
+Card.displayName = "Card";
+var CardHeader = React6.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React6.createElement(
+  "div",
+  {
+    ref,
+    className: cn("flex flex-col space-y-1.5 p-6", className),
+    ...props
+  }
+));
+CardHeader.displayName = "CardHeader";
+var CardTitle = React6.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React6.createElement(
+  "div",
+  {
+    ref,
+    className: cn("font-semibold leading-none tracking-tight", className),
+    ...props
+  }
+));
+CardTitle.displayName = "CardTitle";
+var CardDescription = React6.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React6.createElement(
+  "div",
+  {
+    ref,
+    className: cn("text-sm text-muted-foreground", className),
+    ...props
+  }
+));
+CardDescription.displayName = "CardDescription";
+var CardContent = React6.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React6.createElement("div", { ref, className: cn("p-6 pt-0", className), ...props }));
+CardContent.displayName = "CardContent";
+var CardFooter = React6.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React6.createElement(
+  "div",
+  {
+    ref,
+    className: cn("flex items-center p-6 pt-0", className),
+    ...props
+  }
+));
+CardFooter.displayName = "CardFooter";
+var badgeVariants = cva(
+  "inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
+  {
+    variants: {
+      variant: {
+        default: "border-transparent bg-primary text-primary-foreground shadow hover:bg-primary/80",
+        secondary: "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        destructive: "border-transparent bg-destructive text-destructive-foreground shadow hover:bg-destructive/80",
+        outline: "text-foreground"
+      }
+    },
+    defaultVariants: {
+      variant: "default"
+    }
+  }
+);
+function Badge({ className, variant, ...props }) {
+  return /* @__PURE__ */ React6.createElement("div", { className: cn(badgeVariants({ variant }), className), ...props });
+}
+var labelVariants = cva(
+  "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+);
+var Label = React6.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React6.createElement(
+  "label",
+  {
+    ref,
+    className: cn(labelVariants(), className),
+    ...props
+  }
+));
+Label.displayName = "Label";
+var TabsContext = React6.createContext(null);
+var Tabs = ({
+  value,
+  defaultValue = "",
+  onValueChange,
+  className,
+  ...props
+}) => {
+  const [current, setCurrent] = useControllableState({
+    value,
+    defaultValue,
+    onChange: onValueChange
+  });
+  return /* @__PURE__ */ React6.createElement(TabsContext.Provider, { value: { value: current, setValue: setCurrent } }, /* @__PURE__ */ React6.createElement("div", { className, ...props }));
+};
+var TabsList = React6.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React6.createElement(
+  "div",
+  {
+    ref,
+    className: cn(
+      "inline-flex h-9 items-center justify-center rounded-lg bg-muted p-1 text-muted-foreground",
+      className
+    ),
+    ...props
+  }
+));
+TabsList.displayName = "TabsList";
+var TabsTrigger = React6.forwardRef(
+  ({ className, value, onClick, ...props }, ref) => {
+    const ctx = React6.useContext(TabsContext);
+    const active = ctx?.value === value;
+    return /* @__PURE__ */ React6.createElement(
+      "button",
+      {
+        ref,
+        type: "button",
+        "data-state": active ? "active" : "inactive",
+        className: cn(
+          "inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-1 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
+          active && "bg-background text-foreground shadow",
+          className
+        ),
+        onClick: (e) => {
+          ctx?.setValue(value);
+          onClick?.(e);
+        },
+        ...props
+      }
+    );
+  }
+);
+TabsTrigger.displayName = "TabsTrigger";
+var TabsContent = React6.forwardRef(
+  ({ className, value, forceMount = false, ...props }, ref) => {
+    const ctx = React6.useContext(TabsContext);
+    const active = ctx?.value === value;
+    if (!active && !forceMount) return null;
+    return /* @__PURE__ */ React6.createElement(
+      "div",
+      {
+        ref,
+        "data-state": active ? "active" : "inactive",
+        hidden: !active && forceMount,
+        className: cn(
+          "mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+          className
+        ),
+        ...props
+      }
+    );
+  }
+);
+TabsContent.displayName = "TabsContent";
+var AlertDialogContent = React6.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React6.createElement(
+  DialogContent,
+  {
+    ref,
+    className: cn("z-[9999]", className),
+    ...props
+  }
+));
+AlertDialogContent.displayName = "AlertDialogContent";
+var AlertDialogAction = React6.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React6.createElement(
+  DialogClose,
+  {
+    ref,
+    className: cn(buttonVariants(), className),
+    ...props
+  }
+));
+AlertDialogAction.displayName = "AlertDialogAction";
+var AlertDialogCancel = React6.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React6.createElement(
+  DialogClose,
+  {
+    ref,
+    className: cn(
+      buttonVariants({ variant: "outline" }),
+      "mt-2 sm:mt-0",
+      className
+    ),
+    ...props
+  }
+));
+AlertDialogCancel.displayName = "AlertDialogCancel";
+var DropdownMenuContext = React6.createContext(null);
+var DropdownMenuRadioGroupContext = React6.createContext(null);
+var DropdownMenu = ({ open, defaultOpen = false, onOpenChange, children }) => {
+  const [isOpen, setIsOpen] = useControllableState({
+    value: open,
+    defaultValue: defaultOpen,
+    onChange: onOpenChange
+  });
+  const triggerRef = React6.useRef(null);
+  const contentRef = React6.useRef(null);
+  return /* @__PURE__ */ React6.createElement(DropdownMenuContext.Provider, { value: { open: isOpen, setOpen: setIsOpen, triggerRef, contentRef } }, children);
+};
+var DropdownMenuTrigger = React6.forwardRef(({ children, onClick, ...props }, ref) => {
+  const ctx = React6.useContext(DropdownMenuContext);
+  if (!ctx) return null;
+  const mergedRef = mergeRefs(ctx.triggerRef, ref);
+  const handleClick = (e) => {
+    ctx.setOpen(!ctx.open);
+    onClick?.(e);
+  };
+  return /* @__PURE__ */ React6.createElement("button", { ref: mergedRef, type: "button", onClick: handleClick, ...props }, children);
+});
+DropdownMenuTrigger.displayName = "DropdownMenuTrigger";
+var DropdownMenuGroup = ({ children }) => /* @__PURE__ */ React6.createElement(React6.Fragment, null, children);
+var DropdownMenuPortal = ({ children }) => /* @__PURE__ */ React6.createElement(Portal, null, children);
+var DropdownMenuSub = ({ children }) => /* @__PURE__ */ React6.createElement(React6.Fragment, null, children);
+var DropdownMenuContent = React6.forwardRef(({ className, sideOffset = 4, style, ...props }, ref) => {
+  const ctx = React6.useContext(DropdownMenuContext);
+  const [pos, setPos] = React6.useState({ top: 0, left: 0 });
+  const open = !!ctx?.open;
+  const trigger = ctx?.triggerRef.current ?? null;
+  React6.useLayoutEffect(() => {
+    if (!trigger) return;
+    const rect = trigger.getBoundingClientRect();
+    setPos({ top: rect.bottom + sideOffset, left: rect.left });
+  }, [trigger, sideOffset]);
+  useOnClickOutside(
+    [ctx?.contentRef ?? { current: null }, ctx?.triggerRef ?? { current: null }],
+    () => ctx?.setOpen(false),
+    open
+  );
+  if (!ctx || !open || !trigger) return null;
+  return /* @__PURE__ */ React6.createElement(DropdownMenuPortal, null, /* @__PURE__ */ React6.createElement(
+    "div",
+    {
+      ref: mergeRefs(ctx.contentRef, ref),
+      className: cn(
+        "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md",
+        className
+      ),
+      style: { position: "fixed", top: pos.top, left: pos.left, ...style },
+      ...props
+    }
+  ));
+});
+DropdownMenuContent.displayName = "DropdownMenuContent";
+var DropdownMenuItem = React6.forwardRef(({ className, inset, onSelect, onClick, ...props }, ref) => {
+  const ctx = React6.useContext(DropdownMenuContext);
+  return /* @__PURE__ */ React6.createElement(
+    "button",
+    {
+      ref,
+      type: "button",
+      className: cn(
+        "relative flex w-full cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none transition-colors hover:bg-accent hover:text-accent-foreground disabled:pointer-events-none disabled:opacity-50",
+        inset && "pl-8",
+        className
+      ),
+      onClick: (e) => {
+        onSelect?.(e.nativeEvent);
+        onClick?.(e);
+        if (!e.isDefaultPrevented()) {
+          ctx?.setOpen(false);
+        }
+      },
+      ...props
+    }
+  );
+});
+DropdownMenuItem.displayName = "DropdownMenuItem";
+var DropdownMenuCheckboxItem = React6.forwardRef(({ className, children, checked = false, onCheckedChange, onClick, ...props }, ref) => /* @__PURE__ */ React6.createElement(
+  "button",
+  {
+    ref,
+    type: "button",
+    className: cn(
+      "relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors hover:bg-accent hover:text-accent-foreground disabled:pointer-events-none disabled:opacity-50",
+      className
+    ),
+    onClick: (e) => {
+      onCheckedChange?.(!checked);
+      onClick?.(e);
+    },
+    ...props
+  },
+  /* @__PURE__ */ React6.createElement("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center" }, checked ? /* @__PURE__ */ React6.createElement(Check, { className: "h-4 w-4" }) : null),
+  children
+));
+DropdownMenuCheckboxItem.displayName = "DropdownMenuCheckboxItem";
+var DropdownMenuRadioGroup = ({
+  value,
+  onValueChange,
+  children
+}) => /* @__PURE__ */ React6.createElement(DropdownMenuRadioGroupContext.Provider, { value: { value, onValueChange } }, children);
+var DropdownMenuRadioItem = React6.forwardRef(({ className, children, value, onClick, ...props }, ref) => {
+  const radioCtx = React6.useContext(DropdownMenuRadioGroupContext);
+  const menuCtx = React6.useContext(DropdownMenuContext);
+  const checked = radioCtx?.value === value;
+  return /* @__PURE__ */ React6.createElement(
+    "button",
+    {
+      ref,
+      type: "button",
+      className: cn(
+        "relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors hover:bg-accent hover:text-accent-foreground disabled:pointer-events-none disabled:opacity-50",
+        className
+      ),
+      onClick: (e) => {
+        radioCtx?.onValueChange?.(value);
+        onClick?.(e);
+        menuCtx?.setOpen(false);
+      },
+      ...props
+    },
+    /* @__PURE__ */ React6.createElement("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center" }, checked ? /* @__PURE__ */ React6.createElement(Circle, { className: "h-2 w-2 fill-current" }) : null),
+    children
+  );
+});
+DropdownMenuRadioItem.displayName = "DropdownMenuRadioItem";
+var DropdownMenuLabel = React6.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ React6.createElement(
+  "div",
+  {
+    ref,
+    className: cn("px-2 py-1.5 text-sm font-semibold", inset && "pl-8", className),
+    ...props
+  }
+));
+DropdownMenuLabel.displayName = "DropdownMenuLabel";
+var DropdownMenuSeparator = React6.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React6.createElement(
+  "div",
+  {
+    ref,
+    className: cn("-mx-1 my-1 h-px bg-muted", className),
+    ...props
+  }
+));
+DropdownMenuSeparator.displayName = "DropdownMenuSeparator";
+var DropdownMenuShortcut = ({
+  className,
+  ...props
+}) => /* @__PURE__ */ React6.createElement(
+  "span",
+  {
+    className: cn("ml-auto text-xs tracking-widest opacity-60", className),
+    ...props
+  }
+);
+DropdownMenuShortcut.displayName = "DropdownMenuShortcut";
+var DropdownMenuSubTrigger = React6.forwardRef(({ className, inset, children, ...props }, ref) => /* @__PURE__ */ React6.createElement(
+  "button",
+  {
+    ref,
+    type: "button",
+    className: cn(
+      "flex w-full cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none hover:bg-accent",
+      inset && "pl-8",
+      className
+    ),
+    ...props
+  },
+  children,
+  /* @__PURE__ */ React6.createElement(ChevronRight, { className: "ml-auto" })
+));
+DropdownMenuSubTrigger.displayName = "DropdownMenuSubTrigger";
+var DropdownMenuSubContent = React6.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React6.createElement(
+  "div",
+  {
+    ref,
+    className: cn(
+      "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg",
+      className
+    ),
+    ...props
+  }
+));
+DropdownMenuSubContent.displayName = "DropdownMenuSubContent";
+var PopoverContext = React6.createContext(null);
+var Popover = ({ open, defaultOpen = false, onOpenChange, children }) => {
+  const [isOpen, setIsOpen] = useControllableState({
+    value: open,
+    defaultValue: defaultOpen,
+    onChange: onOpenChange
+  });
+  const triggerRef = React6.useRef(null);
+  const anchorRef = React6.useRef(null);
+  const contentRef = React6.useRef(null);
+  return /* @__PURE__ */ React6.createElement(PopoverContext.Provider, { value: { open: isOpen, setOpen: setIsOpen, triggerRef, anchorRef, contentRef } }, children);
+};
+var PopoverTrigger = React6.forwardRef(
+  ({ children, onClick, ...props }, ref) => {
+    const ctx = React6.useContext(PopoverContext);
+    if (!ctx) return null;
+    const mergedRef = mergeRefs(ctx.triggerRef, ref);
+    const handleClick = (e) => {
+      ctx.setOpen(!ctx.open);
+      onClick?.(e);
+    };
+    return /* @__PURE__ */ React6.createElement("button", { ref: mergedRef, type: "button", onClick: handleClick, ...props }, children);
+  }
+);
+PopoverTrigger.displayName = "PopoverTrigger";
+var PopoverAnchor = React6.forwardRef(
+  ({ ...props }, ref) => {
+    const ctx = React6.useContext(PopoverContext);
+    if (!ctx) return null;
+    return /* @__PURE__ */ React6.createElement("span", { ref: mergeRefs(ctx.anchorRef, ref), ...props });
+  }
+);
+PopoverAnchor.displayName = "PopoverAnchor";
+var PopoverContent = React6.forwardRef(
+  ({ className, align = "center", sideOffset = 4, style, ...props }, ref) => {
+    const ctx = React6.useContext(PopoverContext);
+    const [position, setPosition] = React6.useState({ top: 0, left: 0 });
+    const open = !!ctx?.open;
+    const anchor = ctx?.anchorRef.current ?? ctx?.triggerRef.current ?? null;
+    React6.useLayoutEffect(() => {
+      if (!anchor) return;
+      const rect = anchor.getBoundingClientRect();
+      let left = rect.left + rect.width / 2;
+      if (align === "start") left = rect.left;
+      if (align === "end") left = rect.right;
+      setPosition({ top: rect.bottom + sideOffset, left });
+    }, [anchor, align, sideOffset]);
+    useOnClickOutside(
+      [ctx?.contentRef ?? { current: null }, ctx?.triggerRef ?? { current: null }],
+      () => ctx?.setOpen(false),
+      open
+    );
+    if (!ctx || !open) return null;
+    return /* @__PURE__ */ React6.createElement(Portal, null, /* @__PURE__ */ React6.createElement(
+      "div",
+      {
+        ref: mergeRefs(ctx.contentRef, ref),
+        className: cn(
+          "z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none",
+          className
+        ),
+        style: {
+          position: "fixed",
+          top: position.top,
+          left: position.left,
+          transform: align === "center" ? "translateX(-50%)" : align === "end" ? "translateX(-100%)" : void 0,
+          ...style
+        },
+        ...props
+      }
+    ));
+  }
+);
+PopoverContent.displayName = "PopoverContent";
+var Progress = React6.forwardRef(
+  ({ className, value = 0, max = 100, ...props }, ref) => {
+    const safeMax = max <= 0 ? 100 : max;
+    const safeValue = Math.max(0, Math.min(value, safeMax));
+    const percent = safeValue / safeMax * 100;
+    return /* @__PURE__ */ React6.createElement(
+      "div",
+      {
+        ref,
+        role: "progressbar",
+        "aria-valuemin": 0,
+        "aria-valuemax": safeMax,
+        "aria-valuenow": safeValue,
+        className: cn(
+          "relative h-2 w-full overflow-hidden rounded-full bg-primary/20",
+          className
+        ),
+        ...props
+      },
+      /* @__PURE__ */ React6.createElement(
+        "div",
+        {
+          className: "h-full w-full flex-1 bg-primary transition-all",
+          style: { transform: `translateX(-${100 - percent}%)` }
+        }
+      )
+    );
+  }
+);
+Progress.displayName = "Progress";
+var ScrollArea = React6.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ React6.createElement(
+  "div",
+  {
+    ref,
+    className: cn("relative overflow-auto", className),
+    ...props
+  },
+  children
+));
+ScrollArea.displayName = "ScrollArea";
+var ScrollBar = React6.forwardRef(
+  ({ className, orientation = "vertical", ...props }, ref) => /* @__PURE__ */ React6.createElement(
+    "div",
+    {
+      ref,
+      className: cn(
+        "pointer-events-none absolute",
+        orientation === "vertical" ? "right-0 top-0 h-full w-2.5" : "bottom-0 left-0 h-2.5 w-full",
+        className
+      ),
+      ...props
+    }
+  )
+);
+ScrollBar.displayName = "ScrollBar";
+var SelectContext = React6.createContext(null);
+var SelectGroupContext = React6.createContext(false);
+var Select = ({
+  value,
+  defaultValue,
+  onValueChange,
+  open,
+  defaultOpen = false,
+  onOpenChange,
+  disabled = false,
+  children
+}) => {
+  const [isOpen, setIsOpen] = useControllableState({
+    value: open,
+    defaultValue: defaultOpen,
+    onChange: onOpenChange
+  });
+  const [currentValue, setCurrentValue] = useControllableState({
+    value,
+    defaultValue,
+    onChange: (next) => {
+      if (next !== void 0) {
+        onValueChange?.(next);
+      }
+    }
+  });
+  const triggerRef = React6.useRef(null);
+  const contentRef = React6.useRef(null);
+  const itemsRef = React6.useRef(/* @__PURE__ */ new Map());
+  return /* @__PURE__ */ React6.createElement(
+    SelectContext.Provider,
+    {
+      value: {
+        open: disabled ? false : isOpen,
+        setOpen: disabled ? () => void 0 : setIsOpen,
+        value: currentValue,
+        setValue: (next) => {
+          if (disabled) return;
+          setCurrentValue(next);
+          setIsOpen(false);
+        },
+        triggerRef,
+        contentRef,
+        itemsRef
+      }
+    },
+    children
+  );
+};
+var SelectGroup = ({ children }) => /* @__PURE__ */ React6.createElement(SelectGroupContext.Provider, { value: true }, children);
+var SelectValue = ({
+  placeholder,
+  children
+}) => {
+  const ctx = React6.useContext(SelectContext);
+  if (!ctx) return null;
+  if (children) return /* @__PURE__ */ React6.createElement(React6.Fragment, null, children);
+  if (ctx.value && ctx.itemsRef.current.has(ctx.value)) {
+    return /* @__PURE__ */ React6.createElement(React6.Fragment, null, ctx.itemsRef.current.get(ctx.value));
+  }
+  return /* @__PURE__ */ React6.createElement("span", { className: "text-muted-foreground" }, placeholder);
+};
+var SelectTrigger = React6.forwardRef(({ className, children, onClick, ...props }, ref) => {
+  const ctx = React6.useContext(SelectContext);
+  if (!ctx) return null;
+  return /* @__PURE__ */ React6.createElement(
+    "button",
+    {
+      ref: mergeRefs(ctx.triggerRef, ref),
+      type: "button",
+      className: cn(
+        "flex h-9 w-full items-center justify-between whitespace-nowrap rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm ring-offset-background focus:outline-none focus:ring-1 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
+        className
+      ),
+      onClick: (e) => {
+        ctx.setOpen(!ctx.open);
+        onClick?.(e);
+      },
+      ...props
+    },
+    /* @__PURE__ */ React6.createElement("span", null, children),
+    /* @__PURE__ */ React6.createElement(ChevronDown, { className: "h-4 w-4 opacity-50" })
+  );
+});
+SelectTrigger.displayName = "SelectTrigger";
+var SelectScrollUpButton = React6.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React6.createElement(
+  "div",
+  {
+    ref,
+    className: cn("flex cursor-default items-center justify-center py-1", className),
+    ...props
+  },
+  /* @__PURE__ */ React6.createElement(ChevronUp, { className: "h-4 w-4" })
+));
+SelectScrollUpButton.displayName = "SelectScrollUpButton";
+var SelectScrollDownButton = React6.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React6.createElement(
+  "div",
+  {
+    ref,
+    className: cn("flex cursor-default items-center justify-center py-1", className),
+    ...props
+  },
+  /* @__PURE__ */ React6.createElement(ChevronDown, { className: "h-4 w-4" })
+));
+SelectScrollDownButton.displayName = "SelectScrollDownButton";
+var SelectContent = React6.forwardRef(({ className, children, style, ...props }, ref) => {
+  const ctx = React6.useContext(SelectContext);
+  const [pos, setPos] = React6.useState({ top: 0, left: 0, width: 0 });
+  const open = !!ctx?.open;
+  const trigger = ctx?.triggerRef.current ?? null;
+  React6.useLayoutEffect(() => {
+    if (!trigger) return;
+    const rect = trigger.getBoundingClientRect();
+    setPos({ top: rect.bottom + 4, left: rect.left, width: rect.width });
+  }, [trigger]);
+  useOnClickOutside(
+    [ctx?.contentRef ?? { current: null }, ctx?.triggerRef ?? { current: null }],
+    () => ctx?.setOpen(false),
+    open
+  );
+  if (!ctx || !open || !trigger) return null;
+  return /* @__PURE__ */ React6.createElement(Portal, null, /* @__PURE__ */ React6.createElement(
+    "div",
+    {
+      ref: mergeRefs(ctx.contentRef, ref),
+      className: cn(
+        "relative z-50 max-h-80 overflow-y-auto overflow-x-hidden rounded-md border bg-popover text-popover-foreground shadow-md",
+        className
+      ),
+      style: {
+        position: "fixed",
+        top: pos.top,
+        left: pos.left,
+        minWidth: Math.max(pos.width, 128),
+        ...style
+      },
+      ...props
+    },
+    /* @__PURE__ */ React6.createElement("div", { className: "p-1" }, children)
+  ));
+});
+SelectContent.displayName = "SelectContent";
+var SelectLabel = React6.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React6.createElement(
+  "div",
+  {
+    ref,
+    className: cn("px-2 py-1.5 text-sm font-semibold", className),
+    ...props
+  }
+));
+SelectLabel.displayName = "SelectLabel";
+var SelectItem = React6.forwardRef(
+  ({ className, children, value, onClick, ...props }, ref) => {
+    const ctx = React6.useContext(SelectContext);
+    React6.useEffect(() => {
+      if (!ctx) return;
+      ctx.itemsRef.current.set(value, children);
+      return () => {
+        ctx.itemsRef.current.delete(value);
+      };
+    }, [ctx, value, children]);
+    if (!ctx) return null;
+    const selected = ctx.value === value;
+    return /* @__PURE__ */ React6.createElement(
+      "button",
+      {
+        ref,
+        type: "button",
+        className: cn(
+          "relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-2 pr-8 text-sm outline-none hover:bg-accent hover:text-accent-foreground disabled:pointer-events-none disabled:opacity-50",
+          className
+        ),
+        onClick: (e) => {
+          ctx.setValue(value);
+          onClick?.(e);
+        },
+        ...props
+      },
+      /* @__PURE__ */ React6.createElement("span", { className: "absolute right-2 flex h-3.5 w-3.5 items-center justify-center" }, selected ? /* @__PURE__ */ React6.createElement(Check, { className: "h-4 w-4" }) : null),
+      /* @__PURE__ */ React6.createElement("span", null, children)
+    );
+  }
+);
+SelectItem.displayName = "SelectItem";
+var SelectSeparator = React6.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React6.createElement(
+  "div",
+  {
+    ref,
+    className: cn("-mx-1 my-1 h-px bg-muted", className),
+    ...props
+  }
+));
+SelectSeparator.displayName = "SelectSeparator";
+var Separator = React6.forwardRef(
+  ({ className, orientation = "horizontal", decorative = true, ...props }, ref) => /* @__PURE__ */ React6.createElement(
+    "div",
+    {
+      ref,
+      role: decorative ? void 0 : "separator",
+      "aria-orientation": orientation,
+      className: cn(
+        "shrink-0 bg-border",
+        orientation === "horizontal" ? "h-[1px] w-full" : "h-full w-[1px]",
+        className
+      ),
+      ...props
+    }
+  )
+);
+Separator.displayName = "Separator";
+var sheetVariants = cva(
+  "fixed z-[10000] gap-4 bg-background p-6 shadow-lg transition ease-in-out translate-x-0 translate-y-0",
+  {
+    variants: {
+      side: {
+        top: "inset-x-0 top-0 left-0 border-b",
+        bottom: "inset-x-0 bottom-0 left-0 border-t",
+        left: "inset-y-0 left-0 top-0 h-full w-3/4 border-r sm:max-w-sm",
+        right: "inset-y-0 right-0 top-0 h-full w-3/4 border-l sm:max-w-sm"
+      }
+    },
+    defaultVariants: {
+      side: "right"
+    }
+  }
+);
+var SheetContent = React6.forwardRef(
+  ({ side = "right", className, children, ...props }, ref) => /* @__PURE__ */ React6.createElement(
+    DialogContent,
+    {
+      ref,
+      className: cn(
+        "max-w-none rounded-none",
+        sheetVariants({ side }),
+        className
+      ),
+      showCloseButton: false,
+      ...props
+    },
+    /* @__PURE__ */ React6.createElement(DialogClose, { className: "absolute right-4 top-4 rounded-sm opacity-70 transition-opacity hover:opacity-100" }, /* @__PURE__ */ React6.createElement(X, { className: "h-4 w-4" }), /* @__PURE__ */ React6.createElement("span", { className: "sr-only" }, "Close")),
+    children
+  )
+);
+SheetContent.displayName = "SheetContent";
+var SheetHeader = ({
+  className,
+  ...props
+}) => /* @__PURE__ */ React6.createElement(
+  "div",
+  {
+    className: cn(
+      "flex flex-col space-y-2 text-center sm:text-left",
+      className
+    ),
+    ...props
+  }
+);
+SheetHeader.displayName = "SheetHeader";
+var SheetFooter = ({
+  className,
+  ...props
+}) => /* @__PURE__ */ React6.createElement(
+  "div",
+  {
+    className: cn(
+      "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
+      className
+    ),
+    ...props
+  }
+);
+SheetFooter.displayName = "SheetFooter";
+var SheetTitle = React6.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React6.createElement(
+  "h2",
+  {
+    ref,
+    className: cn("text-lg font-semibold text-foreground", className),
+    ...props
+  }
+));
+SheetTitle.displayName = "SheetTitle";
+var SheetDescription = React6.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React6.createElement(
+  "p",
+  {
+    ref,
+    className: cn("text-sm text-muted-foreground", className),
+    ...props
+  }
+));
+SheetDescription.displayName = "SheetDescription";
+var Textarea = React6.forwardRef(({ className, ...props }, ref) => {
+  return /* @__PURE__ */ React6.createElement(
+    "textarea",
+    {
+      className: cn(
+        "flex min-h-[60px] w-full rounded-md border border-input bg-transparent px-3 py-2 text-base shadow-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+        className
+      ),
+      ref,
+      ...props
+    }
+  );
+});
+Textarea.displayName = "Textarea";
+var TooltipConfigContext = React6.createContext({
+  delayDuration: 200
+});
+var TooltipContext = React6.createContext(null);
+var TooltipProvider = ({
+  children,
+  delayDuration = 200
+}) => {
+  return /* @__PURE__ */ React6.createElement(TooltipConfigContext.Provider, { value: { delayDuration } }, children);
+};
+var Tooltip = ({ children }) => {
+  const [open, setOpen] = React6.useState(false);
+  const triggerRef = React6.useRef(null);
+  return /* @__PURE__ */ React6.createElement(TooltipContext.Provider, { value: { open, setOpen, triggerRef } }, children);
+};
+var TooltipTrigger = React6.forwardRef(({ children, ...props }, ref) => {
+  const ctx = React6.useContext(TooltipContext);
+  const cfg = React6.useContext(TooltipConfigContext);
+  const timer = React6.useRef(null);
+  if (!ctx) return null;
+  const setRef = mergeRefs(ctx.triggerRef, ref);
+  const openWithDelay = () => {
+    if (timer.current) clearTimeout(timer.current);
+    timer.current = setTimeout(() => ctx.setOpen(true), cfg.delayDuration);
+  };
+  const closeNow = () => {
+    if (timer.current) clearTimeout(timer.current);
+    ctx.setOpen(false);
+  };
+  const shared = {
+    onMouseEnter: openWithDelay,
+    onMouseLeave: closeNow,
+    onFocus: openWithDelay,
+    onBlur: closeNow,
+    ...props
+  };
+  return /* @__PURE__ */ React6.createElement("span", { ref: setRef, ...shared }, children);
+});
+TooltipTrigger.displayName = "TooltipTrigger";
+var TooltipContent = React6.forwardRef(({ className, sideOffset = 4, style, ...props }, ref) => {
+  const ctx = React6.useContext(TooltipContext);
+  const [pos, setPos] = React6.useState({ top: 0, left: 0 });
+  const open = !!ctx?.open;
+  const trigger = ctx?.triggerRef.current ?? null;
+  React6.useLayoutEffect(() => {
+    if (!trigger) return;
+    const rect = trigger.getBoundingClientRect();
+    setPos({
+      top: rect.top - sideOffset,
+      left: rect.left + rect.width / 2
+    });
+  }, [trigger, sideOffset]);
+  if (!ctx || !open || !trigger) return null;
+  return /* @__PURE__ */ React6.createElement(Portal, null, /* @__PURE__ */ React6.createElement(
+    "div",
+    {
+      ref,
+      className: cn(
+        "z-50 overflow-hidden rounded-md bg-primary px-3 py-1.5 text-xs text-primary-foreground",
+        className
+      ),
+      style: {
+        position: "fixed",
+        top: pos.top,
+        left: pos.left,
+        transform: "translate(-50%, -100%)",
+        ...style
+      },
+      ...props
+    }
+  ));
+});
+TooltipContent.displayName = "TooltipContent";
+var AvatarContext = React6.createContext(null);
+var Avatar = React6.forwardRef(({ className, ...props }, ref) => {
+  const [status, setStatus] = React6.useState("idle");
+  return /* @__PURE__ */ React6.createElement(AvatarContext.Provider, { value: { status, setStatus } }, /* @__PURE__ */ React6.createElement(
+    "span",
+    {
+      ref,
+      className: cn(
+        "relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full",
+        className
+      ),
+      ...props
+    }
+  ));
+});
+Avatar.displayName = "Avatar";
+var AvatarImage = React6.forwardRef(({ className, onLoad, onError, ...props }, ref) => {
+  const ctx = React6.useContext(AvatarContext);
+  return /* @__PURE__ */ React6.createElement(
+    "img",
+    {
+      ref,
+      className: cn(
+        "aspect-square h-full w-full",
+        ctx?.status === "error" ? "hidden" : void 0,
+        className
+      ),
+      onLoad: (e) => {
+        ctx?.setStatus("loaded");
+        onLoad?.(e);
+      },
+      onError: (e) => {
+        ctx?.setStatus("error");
+        onError?.(e);
+      },
+      ...props
+    }
+  );
+});
+AvatarImage.displayName = "AvatarImage";
+var AvatarFallback = React6.forwardRef(({ className, ...props }, ref) => {
+  const ctx = React6.useContext(AvatarContext);
+  const show = ctx?.status !== "loaded";
+  if (!show) return null;
+  return /* @__PURE__ */ React6.createElement(
+    "span",
+    {
+      ref,
+      className: cn(
+        "flex h-full w-full items-center justify-center rounded-full bg-muted",
+        className
+      ),
+      ...props
+    }
+  );
+});
+AvatarFallback.displayName = "AvatarFallback";
+function buildGridColsClasses(columns) {
+  return [
+    "grid-cols-1",
+    // 默认单列
+    columns.sm ? "sm:grid-cols-" + columns.sm : "",
+    columns.md ? "md:grid-cols-" + columns.md : "md:grid-cols-2",
+    columns.lg ? "lg:grid-cols-" + columns.lg : "lg:grid-cols-3",
+    columns.xl ? "xl:grid-cols-" + columns.xl : ""
+  ].filter(Boolean).join(" ");
+}
+function getGapClassName(gap) {
+  const gapClasses = {
+    sm: "gap-3",
+    md: "gap-6",
+    lg: "gap-8",
+    xl: "gap-10"
+  };
+  return gapClasses[gap];
+}
+function Grid({
+  items,
+  renderItem,
+  columns = { md: 2, lg: 3 },
+  gap = "md",
+  className = "",
+  style
+}) {
+  const gridColsClasses = buildGridColsClasses(columns);
+  const gapClass = getGapClassName(gap);
+  return /* @__PURE__ */ React6__default.createElement(
+    "div",
+    {
+      className: clsx("grid", gridColsClasses, gapClass, className),
+      style
+    },
+    items.map((item, index) => /* @__PURE__ */ React6__default.createElement("div", { key: item.id }, renderItem(item, index)))
+  );
+}
+var SearchBox = ({
+  searchQuery,
+  onSearchChange,
+  placeholder = "\u641C\u7D22\u5B9E\u9A8C\u9879\u76EE\u7684\u6807\u9898\u3001\u63CF\u8FF0\u6216\u6807\u7B7E...",
+  size = "large"
+}) => {
+  const getSizeStyles = () => {
+    switch (size) {
+      case "small":
+        return {
+          container: "h-10",
+          input: "pl-10 pr-10 text-sm",
+          icon: "w-4 h-4",
+          iconPosition: "left-3",
+          clearButton: "right-2 w-6 h-6",
+          clearIcon: "w-3 h-3"
+        };
+      case "medium":
+        return {
+          container: "h-12",
+          input: "pl-12 pr-12 text-base",
+          icon: "w-5 h-5",
+          iconPosition: "left-3",
+          clearButton: "right-3 w-7 h-7",
+          clearIcon: "w-4 h-4"
+        };
+      case "large":
+      default:
+        return {
+          container: "h-16",
+          input: "pl-6 pr-16 text-lg",
+          icon: "w-6 h-6",
+          iconPosition: "left-6",
+          clearButton: "right-4 w-8 h-8",
+          clearIcon: "w-4 h-4"
+        };
+    }
+  };
+  const styles = getSizeStyles();
+  const isLarge = size === "large";
+  return /* @__PURE__ */ React6__default.createElement("div", { className: "relative group w-full" }, /* @__PURE__ */ React6__default.createElement(
+    "input",
+    {
+      type: "text",
+      placeholder,
+      value: searchQuery,
+      onChange: (e) => onSearchChange(e.target.value),
+      className: clsx(
+        "w-full",
+        styles.container,
+        styles.input,
+        isLarge ? "border-2 border-gray-200 rounded-2xl shadow-lg" : "border border-gray-300 rounded-lg shadow-sm",
+        "bg-white focus:ring-2 focus:ring-blue-500/20 focus:border-blue-500 hover:border-gray-400",
+        isLarge ? "hover:shadow-xl" : "hover:shadow-md",
+        "transition-all duration-300 ease-out text-gray-800 placeholder-gray-500",
+        isLarge ? "font-medium" : "font-normal"
+      )
+    }
+  ), searchQuery && /* @__PURE__ */ React6__default.createElement(
+    "button",
+    {
+      onClick: () => onSearchChange(""),
+      className: clsx(
+        "absolute top-1/2",
+        styles.clearButton,
+        "transform -translate-y-1/2 z-10 group/clear"
+      )
+    },
+    /* @__PURE__ */ React6__default.createElement("div", { className: clsx(
+      styles.clearButton,
+      "flex items-center justify-center rounded-full bg-gray-100 hover:bg-gray-200 transition-all duration-200 group-hover/clear:scale-105"
+    ) }, /* @__PURE__ */ React6__default.createElement(
+      "svg",
+      {
+        className: clsx(styles.clearIcon, "text-gray-500 group-hover/clear:text-gray-700"),
+        fill: "none",
+        stroke: "currentColor",
+        viewBox: "0 0 24 24"
+      },
+      /* @__PURE__ */ React6__default.createElement(
+        "path",
+        {
+          strokeLinecap: "round",
+          strokeLinejoin: "round",
+          strokeWidth: 2,
+          d: "M6 18L18 6M6 6l12 12"
+        }
+      )
+    ))
+  ));
+};
+var Timeline = ({ items = [] }) => {
+  if (!items || items.length === 0) {
+    return null;
+  }
+  return /* @__PURE__ */ React6__default.createElement("div", { className: "relative" }, /* @__PURE__ */ React6__default.createElement("div", { className: "absolute left-4 top-0 bottom-0 w-0.5 bg-gray-200" }), items.map((item, index) => /* @__PURE__ */ React6__default.createElement("div", { key: index, className: "relative pl-12 pb-8" }, /* @__PURE__ */ React6__default.createElement("div", { className: "absolute left-0 w-8 h-8 rounded-full bg-blue-500 border-4 border-white shadow-md flex items-center justify-center" }, /* @__PURE__ */ React6__default.createElement("div", { className: "w-2 h-2 rounded-full bg-white" })), /* @__PURE__ */ React6__default.createElement("div", { className: "bg-white rounded-lg p-4 shadow-md" }, /* @__PURE__ */ React6__default.createElement("div", { className: "text-sm text-gray-500 mb-2" }, item.date), /* @__PURE__ */ React6__default.createElement("h4", { className: "text-lg font-semibold mb-2" }, item.title), /* @__PURE__ */ React6__default.createElement("p", { className: "text-gray-600" }, item.description)))));
+};
+var CollisionBalls = ({
+  collisionBallsConfig: {
+    balls,
+    width,
+    height
+  }
+}) => {
+  const canvasRef = useRef(null);
+  const containerRef = useRef(null);
+  const ballsRef = useRef([]);
+  const [isShaking, setIsShaking] = useState(false);
+  const [draggedBall, setDraggedBall] = useState(null);
+  const [mousePos, setMousePos] = useState({ x: 0, y: 0 });
+  const animationRef = useRef(null);
+  const updateCanvasSize = () => {
+    const container = containerRef.current;
+    const canvas = canvasRef.current;
+    if (!container || !canvas) {
+      console.error("Container or canvas not found");
+      return;
+    }
+    const containerWidth = container.clientWidth;
+    const containerHeight = container.clientHeight;
+    console.log("Container size:", { containerWidth, containerHeight });
+    canvas.width = containerWidth;
+    canvas.height = containerHeight;
+    canvas.style.width = containerWidth + "px";
+    canvas.style.height = containerHeight + "px";
+    console.log("Canvas size updated:", {
+      width: canvas.width,
+      height: canvas.height,
+      containerWidth,
+      containerHeight
+    });
+  };
+  const initBalls = () => {
+    const canvas = canvasRef.current;
+    if (!canvas) {
+      console.error("Canvas not found during ball initialization");
+      return [];
+    }
+    console.log("Initializing balls with canvas size:", {
+      width: canvas.width,
+      height: canvas.height
+    });
+    return balls.map((ballConfig) => ({
+      x: Math.random() * (canvas.width - 100) + 50,
+      y: Math.random() * (canvas.height - 100) + 50,
+      vx: (Math.random() - 0.5) * 4,
+      vy: (Math.random() - 0.5) * 4,
+      radius: ballConfig.size,
+      color: ballConfig.color,
+      text: ballConfig.label,
+      isDragging: false
+    }));
+  };
+  useEffect(() => {
+    const handleResize = () => {
+      console.log("Window resized");
+      updateCanvasSize();
+    };
+    if (typeof window !== "undefined") {
+      window.addEventListener("resize", handleResize);
+      updateCanvasSize();
+    }
+    return () => {
+      if (typeof window !== "undefined") {
+        window.removeEventListener("resize", handleResize);
+      }
+    };
+  }, []);
+  useEffect(() => {
+    const canvas = canvasRef.current;
+    if (!canvas) {
+      console.error("Canvas element not found");
+      return;
+    }
+    const ctx = canvas.getContext("2d");
+    if (!ctx) {
+      console.error("Failed to get canvas context");
+      return;
+    }
+    console.log("Starting animation setup...");
+    updateCanvasSize();
+    ballsRef.current = initBalls();
+    console.log("Balls initialized:", ballsRef.current);
+    let lastTime = performance.now();
+    let frameCount = 0;
+    const animate = (currentTime) => {
+      try {
+        frameCount++;
+        if (currentTime - lastTime >= 1e3) {
+          console.log("FPS: " + frameCount);
+          frameCount = 0;
+          lastTime = currentTime;
+        }
+        ctx.clearRect(0, 0, canvas.width, canvas.height);
+        ballsRef.current.forEach((ball) => {
+          if (!ball.isDragging) {
+            updatePosition(ball, canvas.width, canvas.height);
+          }
+          for (let i = 0; i < ballsRef.current.length; i++) {
+            for (let j = i + 1; j < ballsRef.current.length; j++) {
+              const ball1 = ballsRef.current[i];
+              const ball2 = ballsRef.current[j];
+              if (ball1 && ball2) {
+                checkCollision(ball1, ball2);
+              }
+            }
+          }
+          draw(ctx, ball);
+        });
+        animationRef.current = requestAnimationFrame(animate);
+      } catch (error) {
+        console.error("Animation error:", error);
+      }
+    };
+    console.log("Starting animation loop...");
+    animationRef.current = requestAnimationFrame(animate);
+    return () => {
+      console.log("Cleaning up animation...");
+      if (animationRef.current) {
+        cancelAnimationFrame(animationRef.current);
+        animationRef.current = null;
+      }
+    };
+  }, []);
+  const shake = () => {
+    setIsShaking(true);
+    ballsRef.current.forEach((ball) => {
+      ball.vx = (Math.random() - 0.5) * 10;
+      ball.vy = (Math.random() - 0.5) * 10;
+    });
+    setTimeout(() => setIsShaking(false), 200);
+  };
+  const slowdown = () => {
+    setIsShaking(true);
+    ballsRef.current.forEach((ball) => {
+      ball.vx = ball.vx * 0.5;
+      ball.vy = ball.vy * 0.5;
+    });
+    setTimeout(() => setIsShaking(false), 200);
+  };
+  const checkCollision = (ball1, ball2) => {
+    const dx = ball2.x - ball1.x;
+    const dy = ball2.y - ball1.y;
+    const distance = Math.sqrt(dx * dx + dy * dy);
+    if (distance < ball1.radius + ball2.radius) {
+      const angle = Math.atan2(dy, dx);
+      const overlap = (ball1.radius + ball2.radius - distance) / 2;
+      if (ball1.isDragging || ball2.isDragging) {
+        const draggedBall2 = ball1.isDragging ? ball1 : ball2;
+        const otherBall = ball1.isDragging ? ball2 : ball1;
+        otherBall.x += (draggedBall2 === ball1 ? 1 : -1) * overlap * Math.cos(angle);
+        otherBall.y += (draggedBall2 === ball1 ? 1 : -1) * overlap * Math.sin(angle);
+        const pushForce = 2;
+        otherBall.vx = (draggedBall2 === ball1 ? -1 : 1) * Math.cos(angle) * pushForce;
+        otherBall.vy = (draggedBall2 === ball1 ? -1 : 1) * Math.sin(angle) * pushForce;
+        return;
+      }
+      const sin = Math.sin(angle);
+      const cos = Math.cos(angle);
+      const vx1 = ball1.vx * cos + ball1.vy * sin;
+      const vy1 = ball1.vy * cos - ball1.vx * sin;
+      const vx2 = ball2.vx * cos + ball2.vy * sin;
+      const vy2 = ball2.vy * cos - ball2.vx * sin;
+      const newVx1 = vx2;
+      const newVx2 = vx1;
+      ball1.vx = newVx1 * cos - vy1 * sin;
+      ball1.vy = vy1 * cos + newVx1 * sin;
+      ball2.vx = newVx2 * cos - vy2 * sin;
+      ball2.vy = vy2 * cos + newVx2 * sin;
+      ball1.x -= overlap * Math.cos(angle);
+      ball1.y -= overlap * Math.sin(angle);
+      ball2.x += overlap * Math.cos(angle);
+      ball2.y += overlap * Math.sin(angle);
+    }
+  };
+  const updatePosition = (ball, width2, height2) => {
+    const handleBoundaryCollision = (velocity, position, boundary, radius) => {
+      let newVelocity = velocity;
+      let newPosition = position;
+      if (position - radius < 0) {
+        newPosition = radius;
+        newVelocity = Math.abs(velocity);
+      } else if (position + radius > boundary) {
+        newPosition = boundary - radius;
+        newVelocity = -Math.abs(velocity);
+      }
+      return [newVelocity, newPosition];
+    };
+    const [newVx, newX] = handleBoundaryCollision(
+      ball.vx,
+      ball.x,
+      width2,
+      ball.radius
+    );
+    const [newVy, newY] = handleBoundaryCollision(
+      ball.vy,
+      ball.y,
+      height2,
+      ball.radius
+    );
+    ball.vx = newVx;
+    ball.vy = newVy;
+    ball.x = newX;
+    ball.y = newY;
+  };
+  const draw = (ctx, ball) => {
+    ctx.beginPath();
+    ctx.arc(ball.x, ball.y, ball.radius, 0, Math.PI * 2);
+    ctx.fillStyle = ball.color;
+    ctx.fill();
+    ctx.closePath();
+    if (ball.text) {
+      ctx.font = "14px Arial";
+      ctx.fillStyle = "#fff";
+      ctx.textAlign = "center";
+      ctx.textBaseline = "middle";
+      ctx.fillText(ball.text, ball.x, ball.y);
+    }
+  };
+  const handleMouseDown = (event) => {
+    const mousePos2 = getMousePos(event);
+    const ball = ballsRef.current.find((b) => {
+      const dx = b.x - mousePos2.x;
+      const dy = b.y - mousePos2.y;
+      return Math.sqrt(dx * dx + dy * dy) < b.radius;
+    });
+    if (ball) {
+      ball.isDragging = true;
+      setDraggedBall(ball);
+    }
+  };
+  const handleMouseMove = (event) => {
+    const mousePos2 = getMousePos(event);
+    setMousePos(mousePos2);
+    if (draggedBall) {
+      draggedBall.x = mousePos2.x;
+      draggedBall.y = mousePos2.y;
+      draggedBall.vx = 0;
+      draggedBall.vy = 0;
+    }
+  };
+  const handleMouseUp = () => {
+    if (draggedBall) {
+      draggedBall.isDragging = false;
+      setDraggedBall(null);
+    }
+  };
+  const getMousePos = (event) => {
+    const canvas = canvasRef.current;
+    if (!canvas) return { x: 0, y: 0 };
+    const rect = canvas.getBoundingClientRect();
+    const scaleX = canvas.width / rect.width;
+    const scaleY = canvas.height / rect.height;
+    return {
+      x: (event.clientX - rect.left) * scaleX,
+      y: (event.clientY - rect.top) * scaleY
+    };
+  };
+  return /* @__PURE__ */ React6__default.createElement("div", { style: { width: "100%", height: "100%", position: "relative", backgroundColor: "#f9fafb", borderRadius: "0.5rem" } }, /* @__PURE__ */ React6__default.createElement("div", { ref: containerRef, style: { width: "100%", height: "100%", position: "absolute", top: 0, left: 0 } }, /* @__PURE__ */ React6__default.createElement(
+    "canvas",
+    {
+      ref: canvasRef,
+      style: {
+        width: "100%",
+        height: "100%",
+        display: "block"
+        // 确保canvas正确显示
+      },
+      onMouseDown: handleMouseDown,
+      onMouseMove: handleMouseMove,
+      onMouseUp: handleMouseUp,
+      onMouseLeave: handleMouseUp
+    }
+  )), /* @__PURE__ */ React6__default.createElement("div", { className: "absolute bottom-4 right-4 flex gap-2" }, /* @__PURE__ */ React6__default.createElement(
+    "button",
+    {
+      onClick: shake,
+      className: clsx("px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 transition-colors", isShaking ? "animate-pulse" : "")
+    },
+    "\u6447\u4E00\u6447"
+  ), /* @__PURE__ */ React6__default.createElement(
+    "button",
+    {
+      onClick: slowdown,
+      className: clsx("px-4 py-2 bg-green-500 text-white rounded-lg hover:bg-green-600 transition-colors", isShaking ? "animate-pulse" : "")
+    },
+    "\u51CF\u901F"
+  )));
+};
+function GenericOrderManager({
+  operations,
+  renderItem,
+  className = "",
+  title = "\u987A\u5E8F\u7BA1\u7406",
+  description = "\u62D6\u62FD\u6216\u4F7F\u7528\u6309\u94AE\u8C03\u6574\u663E\u793A\u987A\u5E8F",
+  onOrderChanged,
+  emptyMessage = "\u6682\u65E0\u6570\u636E",
+  loadingMessage = "\u52A0\u8F7D\u6570\u636E..."
+}) {
+  const [items, setItems] = useState([]);
+  const [originalOrder, setOriginalOrder] = useState([]);
+  const [loading, setLoading] = useState(true);
+  const [saving, setSaving] = useState(false);
+  const [error, setError] = useState(null);
+  const [hasChanges, setHasChanges] = useState(false);
+  const [draggedItem, setDraggedItem] = useState(null);
+  const loadItems = useCallback(async () => {
+    try {
+      setLoading(true);
+      setError(null);
+      const data = await operations.loadItems();
+      setItems(data);
+      setOriginalOrder([...data]);
+      setHasChanges(false);
+    } catch (err) {
+      console.error("\u274C [\u901A\u7528\u6392\u5E8F] \u52A0\u8F7D\u6570\u636E\u9519\u8BEF:", err);
+      setError(err instanceof Error ? err.message : "\u52A0\u8F7D\u6570\u636E\u5931\u8D25");
+    } finally {
+      setLoading(false);
+    }
+  }, [operations]);
+  useEffect(() => {
+    loadItems();
+  }, [loadItems]);
+  useEffect(() => {
+    const hasOrderChanged = items.some(
+      (item, index) => originalOrder[index]?.id !== item.id
+    );
+    setHasChanges(hasOrderChanged);
+  }, [items, originalOrder]);
+  const handleMoveUp = async (itemId) => {
+    try {
+      setError(null);
+      const currentIndex = items.findIndex((item) => item.id === itemId);
+      if (currentIndex === -1) {
+        setError("\u9879\u76EE\u4E0D\u5B58\u5728");
+        return;
+      }
+      if (currentIndex === 0) {
+        setError("\u9879\u76EE\u5DF2\u7ECF\u5728\u6700\u524D\u9762\uFF0C\u65E0\u6CD5\u4E0A\u79FB");
+        return;
+      }
+      await operations.moveItemUp(itemId);
+      await loadItems();
+      onOrderChanged?.();
+    } catch (err) {
+      console.error("\u274C [\u901A\u7528\u6392\u5E8F] \u4E0A\u79FB\u9879\u76EE\u9519\u8BEF:", err);
+      setError(err instanceof Error ? err.message : "\u4E0A\u79FB\u5931\u8D25");
+    }
+  };
+  const handleMoveDown = async (itemId) => {
+    try {
+      setError(null);
+      const currentIndex = items.findIndex((item) => item.id === itemId);
+      if (currentIndex === -1) {
+        setError("\u9879\u76EE\u4E0D\u5B58\u5728");
+        return;
+      }
+      if (currentIndex === items.length - 1) {
+        setError("\u9879\u76EE\u5DF2\u7ECF\u5728\u6700\u540E\u9762\uFF0C\u65E0\u6CD5\u4E0B\u79FB");
+        return;
+      }
+      await operations.moveItemDown(itemId);
+      await loadItems();
+      onOrderChanged?.();
+    } catch (err) {
+      console.error("\u274C [\u901A\u7528\u6392\u5E8F] \u4E0B\u79FB\u9879\u76EE\u9519\u8BEF:", err);
+      setError(err instanceof Error ? err.message : "\u4E0B\u79FB\u5931\u8D25");
+    }
+  };
+  const handleDragStart = (e, index) => {
+    setDraggedItem(index);
+    e.dataTransfer.effectAllowed = "move";
+  };
+  const handleDragOver = (e, _index) => {
+    e.preventDefault();
+    e.dataTransfer.dropEffect = "move";
+  };
+  const handleDrop = async (e, dropIndex) => {
+    e.preventDefault();
+    if (draggedItem === null || draggedItem === dropIndex) {
+      setDraggedItem(null);
+      return;
+    }
+    try {
+      setError(null);
+      const newItems = [...items];
+      const draggedItemData = newItems[draggedItem];
+      if (!draggedItemData) return;
+      newItems.splice(draggedItem, 1);
+      newItems.splice(dropIndex, 0, draggedItemData);
+      const itemOrders = newItems.map((item, index) => ({
+        id: item.id,
+        order: index
+      }));
+      await operations.updateItemOrder(itemOrders);
+      await loadItems();
+      onOrderChanged?.();
+    } catch (err) {
+      console.error("\u274C [\u901A\u7528\u6392\u5E8F] \u62D6\u62FD\u6392\u5E8F\u9519\u8BEF:", err);
+      setError(err instanceof Error ? err.message : "\u6392\u5E8F\u5931\u8D25");
+    } finally {
+      setDraggedItem(null);
+    }
+  };
+  const handleSaveOrder = async () => {
+    try {
+      setSaving(true);
+      setError(null);
+      const itemOrders = items.map((item, index) => ({
+        id: item.id,
+        order: index
+      }));
+      await operations.updateItemOrder(itemOrders);
+      setOriginalOrder([...items]);
+      setHasChanges(false);
+      onOrderChanged?.();
+    } catch (err) {
+      console.error("\u274C [\u901A\u7528\u6392\u5E8F] \u4FDD\u5B58\u987A\u5E8F\u9519\u8BEF:", err);
+      setError(err instanceof Error ? err.message : "\u4FDD\u5B58\u5931\u8D25");
+      await loadItems();
+    } finally {
+      setSaving(false);
+    }
+  };
+  const handleResetOrder = () => {
+    setItems([...originalOrder]);
+  };
+  if (loading) {
+    return /* @__PURE__ */ React6__default.createElement("div", { className: cn("flex flex-col items-center justify-center p-12 text-gray-500", className) }, /* @__PURE__ */ React6__default.createElement("div", { className: "w-6 h-6 border-2 border-gray-200 border-t-blue-500 rounded-full animate-spin mb-2" }), /* @__PURE__ */ React6__default.createElement("span", null, loadingMessage));
+  }
+  return /* @__PURE__ */ React6__default.createElement("div", { className: cn("bg-white rounded-xl p-6 shadow-md border-2 border-gray-100", className) }, /* @__PURE__ */ React6__default.createElement("div", { className: "flex items-center justify-between mb-4 pb-3 border-b border-gray-100 sm:flex-row flex-col sm:items-center items-start gap-4" }, /* @__PURE__ */ React6__default.createElement("h3", { className: "m-0 text-gray-900 text-lg font-semibold" }, title), /* @__PURE__ */ React6__default.createElement("div", { className: "flex gap-3 w-full sm:w-auto" }, hasChanges && /* @__PURE__ */ React6__default.createElement(React6__default.Fragment, null, /* @__PURE__ */ React6__default.createElement(
+    "button",
+    {
+      onClick: handleResetOrder,
+      className: "flex items-center gap-2 bg-amber-500 hover:bg-amber-600 text-white px-4 py-2 rounded-lg font-medium transition-colors",
+      title: "\u91CD\u7F6E\u4E3A\u539F\u59CB\u987A\u5E8F"
+    },
+    /* @__PURE__ */ React6__default.createElement(RotateCcw, { size: 16 }),
+    "\u91CD\u7F6E"
+  ), /* @__PURE__ */ React6__default.createElement(
+    "button",
+    {
+      onClick: handleSaveOrder,
+      disabled: saving,
+      className: "flex items-center gap-2 bg-blue-500 hover:bg-blue-600 disabled:opacity-50 disabled:cursor-not-allowed text-white px-4 py-2 rounded-lg font-medium transition-colors",
+      title: "\u4FDD\u5B58\u65B0\u987A\u5E8F"
+    },
+    /* @__PURE__ */ React6__default.createElement(Save, { size: 16 }),
+    saving ? "\u4FDD\u5B58\u4E2D..." : "\u4FDD\u5B58\u987A\u5E8F"
+  )))), error && /* @__PURE__ */ React6__default.createElement("div", { className: "flex items-center gap-2 bg-red-50 text-red-600 p-3 rounded-lg mb-4 border border-red-200" }, /* @__PURE__ */ React6__default.createElement(AlertCircle, { size: 16 }), /* @__PURE__ */ React6__default.createElement("span", null, error)), /* @__PURE__ */ React6__default.createElement("div", { className: "bg-slate-50 border border-slate-200 rounded-lg p-4 mb-6" }, /* @__PURE__ */ React6__default.createElement("p", { className: "m-0 mb-2 color-slate-500 text-sm" }, description), /* @__PURE__ */ React6__default.createElement("ul", { className: "m-0 pl-6 color-slate-500 text-sm list-disc" }, /* @__PURE__ */ React6__default.createElement("li", { className: "mb-1" }, "\u4F7F\u7528\u62D6\u62FD\uFF1A\u70B9\u51FB\u5E76\u62D6\u52A8 ", /* @__PURE__ */ React6__default.createElement(GripVertical, { size: 14, className: "inline-block align-middle text-gray-500" }), " \u56FE\u6807"), /* @__PURE__ */ React6__default.createElement("li", { className: "mb-1" }, "\u4F7F\u7528\u6309\u94AE\uFF1A\u70B9\u51FB ", /* @__PURE__ */ React6__default.createElement(ChevronUp, { size: 14, className: "inline-block align-middle text-gray-500" }), " \u6216 ", /* @__PURE__ */ React6__default.createElement(ChevronDown, { size: 14, className: "inline-block align-middle text-gray-500" }), " \u6309\u94AE"), /* @__PURE__ */ React6__default.createElement("li", null, '\u5B8C\u6210\u8C03\u6574\u540E\uFF0C\u70B9\u51FB"\u4FDD\u5B58\u987A\u5E8F"\u6309\u94AE\u4FDD\u5B58\u66F4\u6539'))), /* @__PURE__ */ React6__default.createElement("div", { className: "flex flex-col gap-3" }, items.map((item, index) => /* @__PURE__ */ React6__default.createElement(
+    "div",
+    {
+      key: item.id,
+      className: cn(
+        "flex items-center gap-3 p-4 bg-gray-50 border-2 border-gray-200 rounded-lg transition-all hover:border-gray-300 hover:shadow-sm",
+        draggedItem === index && "opacity-50 rotate-2 border-blue-500"
+      ),
+      draggable: true,
+      onDragStart: (e) => handleDragStart(e, index),
+      onDragOver: (e) => handleDragOver(e),
+      onDrop: (e) => handleDrop(e, index)
+    },
+    /* @__PURE__ */ React6__default.createElement("div", { className: "flex items-center cursor-grab active:cursor-grabbing text-gray-400 p-1 rounded hover:text-gray-500 hover:bg-gray-100 transition-colors" }, /* @__PURE__ */ React6__default.createElement(GripVertical, { size: 20 })),
+    /* @__PURE__ */ React6__default.createElement("div", { className: "flex-1 min-w-0" }, renderItem(item, index, index === 0, index === items.length - 1)),
+    /* @__PURE__ */ React6__default.createElement("div", { className: "flex items-center mx-3" }, /* @__PURE__ */ React6__default.createElement("span", { className: "flex items-center justify-center w-8 h-8 bg-blue-500 text-white text-sm font-semibold rounded-full sm:w-8 sm:h-8 w-7 h-7 sm:text-sm text-xs" }, "#", index + 1)),
+    /* @__PURE__ */ React6__default.createElement("div", { className: "flex flex-col gap-1 sm:flex-col flex-row" }, /* @__PURE__ */ React6__default.createElement(
+      "button",
+      {
+        onClick: () => handleMoveUp(item.id),
+        disabled: index === 0,
+        className: "flex items-center justify-center w-8 h-8 p-0 border border-gray-300 bg-white text-gray-500 rounded cursor-pointer transition-all hover:bg-gray-100 hover:border-gray-400 hover:text-gray-700 disabled:opacity-40 disabled:cursor-not-allowed disabled:bg-gray-50 sm:w-8 sm:h-8 w-7 h-7",
+        title: "\u4E0A\u79FB"
+      },
+      /* @__PURE__ */ React6__default.createElement(ChevronUp, { size: 18 })
+    ), /* @__PURE__ */ React6__default.createElement(
+      "button",
+      {
+        onClick: () => handleMoveDown(item.id),
+        disabled: index === items.length - 1,
+        className: "flex items-center justify-center w-8 h-8 p-0 border border-gray-300 bg-white text-gray-500 rounded cursor-pointer transition-all hover:bg-gray-100 hover:border-gray-400 hover:text-gray-700 disabled:opacity-40 disabled:cursor-not-allowed disabled:bg-gray-50 sm:w-8 sm:h-8 w-7 h-7",
+        title: "\u4E0B\u79FB"
+      },
+      /* @__PURE__ */ React6__default.createElement(ChevronDown, { size: 18 })
+    ))
+  ))), items.length === 0 && /* @__PURE__ */ React6__default.createElement("div", { className: "text-center p-12 text-gray-400 italic" }, /* @__PURE__ */ React6__default.createElement("p", { className: "m-0" }, emptyMessage)));
+}
+var BackButton = ({ href, className = "" }) => {
+  const router = useRouter();
+  const handleClick = () => {
+    if (href) {
+      router.push(href);
+    } else {
+      router.back();
+    }
+  };
+  return /* @__PURE__ */ React6__default.createElement(
+    "button",
+    {
+      onClick: handleClick,
+      className: cn(
+        "inline-flex items-center px-4 py-2 text-sm font-medium text-gray-700 bg-white border border-gray-300 rounded-md hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 transition-colors",
+        className
+      )
+    },
+    /* @__PURE__ */ React6__default.createElement(
+      "svg",
+      {
+        className: "w-5 h-5 mr-2",
+        fill: "none",
+        stroke: "currentColor",
+        viewBox: "0 0 24 24"
+      },
+      /* @__PURE__ */ React6__default.createElement(
+        "path",
+        {
+          strokeLinecap: "round",
+          strokeLinejoin: "round",
+          strokeWidth: 2,
+          d: "M10 19l-7-7m0 0l7-7m-7 7h18"
+        }
+      )
+    ),
+    "\u8FD4\u56DE"
+  );
+};
+function getColorValue(bgClass) {
+  const colorMap = {
+    "bg-blue-500": "#3b82f6",
+    "bg-green-500": "#10b981",
+    "bg-red-500": "#ef4444",
+    "bg-purple-500": "#8b5cf6",
+    "bg-slate-500": "#64748b",
+    "bg-emerald-500": "#10b981",
+    "bg-orange-500": "#f97316"
+  };
+  return colorMap[bgClass] || "#3b82f6";
+}
+function FilterButtonGroup({
+  label,
+  value,
+  options,
+  onChange,
+  className
+}) {
+  return /* @__PURE__ */ React6__default.createElement("div", { className: cn("space-y-4", className) }, /* @__PURE__ */ React6__default.createElement("h3", { className: "text-lg font-semibold text-gray-800" }, label), /* @__PURE__ */ React6__default.createElement("div", { className: "flex gap-3" }, options.map((option) => {
+    const isActive = value === option.value;
+    return /* @__PURE__ */ React6__default.createElement(
+      "button",
+      {
+        key: option.value,
+        onClick: () => onChange(option.value),
+        style: isActive ? { backgroundColor: getColorValue(option.activeColor.bg) } : void 0,
+        className: cn(
+          "flex-1 h-12 rounded-lg font-medium text-sm transition-all duration-200 ease-out focus:outline-none focus:ring-2 focus:ring-opacity-50 border",
+          isActive ? "text-white border-transparent shadow-md focus:ring-white" : "bg-white text-gray-700 border-gray-200 shadow-sm hover:bg-gray-50 hover:border-gray-300 hover:shadow focus:ring-blue-300"
+        )
+      },
+      /* @__PURE__ */ React6__default.createElement("div", { className: "flex items-center justify-center space-x-2" }, /* @__PURE__ */ React6__default.createElement("span", { className: "text-lg" }, option.icon), /* @__PURE__ */ React6__default.createElement("span", null, option.label), option.showCount && option.count !== void 0 && /* @__PURE__ */ React6__default.createElement("span", { className: cn(
+        "text-xs font-semibold px-2 py-0.5 rounded-full min-w-[1.25rem] text-center",
+        isActive ? "bg-white/20 text-white" : "bg-gray-100 text-gray-600"
+      ) }, option.count))
+    );
+  })));
+}
+function SearchResultHint({ searchQuery, resultCount, className }) {
+  if (!searchQuery) return null;
+  return /* @__PURE__ */ React6__default.createElement("div", { className: cn("mb-6 p-4 bg-blue-50 border border-blue-200 rounded-lg", className) }, /* @__PURE__ */ React6__default.createElement("p", { className: "text-sm text-blue-700" }, '\u641C\u7D22 "', /* @__PURE__ */ React6__default.createElement("span", { className: "font-medium" }, searchQuery), '" \u627E\u5230 ', resultCount, " \u4E2A\u7ED3\u679C"));
+}
+var Modal = ({
+  isOpen,
+  onClose,
+  title,
+  width,
+  height,
+  className,
+  maskClosable = true,
+  children,
+  zIndex = 50,
+  overlayClassName
+}) => {
+  const contentZIndex = Math.max(zIndex, 1e4);
+  return /* @__PURE__ */ React6__default.createElement(Dialog, { open: isOpen, onOpenChange: (open) => {
+    if (!open) {
+      if (maskClosable) {
+        onClose();
+      }
+    }
+  } }, /* @__PURE__ */ React6__default.createElement(
+    DialogContent,
+    {
+      className: cn("sm:max-w-[425px]", className),
+      overlayClassName,
+      onPointerDownOutside: (e) => {
+        if (!maskClosable) e.preventDefault();
+      },
+      onEscapeKeyDown: (e) => {
+        if (!maskClosable) e.preventDefault();
+      },
+      style: {
+        zIndex: contentZIndex,
+        ...width ? { maxWidth: typeof width === "number" ? `${width}px` : width } : void 0,
+        ...height ? { height: typeof height === "number" ? `${height}px` : height } : void 0
+      }
+    },
+    title ? /* @__PURE__ */ React6__default.createElement(DialogHeader, null, /* @__PURE__ */ React6__default.createElement(DialogTitle, null, title)) : (
+      // 无障碍性：始终需要 DialogTitle，使用 sr-only 对视觉隐藏但对屏幕阅读器可见
+      /* @__PURE__ */ React6__default.createElement(DialogTitle, { className: "sr-only" }, "\u5F39\u7A97")
+    ),
+    /* @__PURE__ */ React6__default.createElement("div", { className: "py-4" }, children)
+  ));
+};
+var ConfirmModal = ({
+  isOpen,
+  onClose,
+  onConfirm,
+  title = "\u786E\u8BA4\u64CD\u4F5C",
+  message,
+  confirmText = "\u786E\u8BA4",
+  cancelText = "\u53D6\u6D88",
+  isLoading = false
+}) => {
+  return /* @__PURE__ */ React6__default.createElement(Dialog, { open: isOpen, onOpenChange: (open) => !open && onClose() }, /* @__PURE__ */ React6__default.createElement(AlertDialogContent, null, /* @__PURE__ */ React6__default.createElement(DialogHeader, null, /* @__PURE__ */ React6__default.createElement(DialogTitle, null, title), /* @__PURE__ */ React6__default.createElement(DialogDescription, null, message)), /* @__PURE__ */ React6__default.createElement(DialogFooter, null, /* @__PURE__ */ React6__default.createElement(AlertDialogCancel, { disabled: isLoading }, cancelText), /* @__PURE__ */ React6__default.createElement(
+    AlertDialogAction,
+    {
+      onClick: (e) => {
+        e.preventDefault();
+        onConfirm();
+      },
+      disabled: isLoading,
+      className: "bg-destructive text-destructive-foreground hover:bg-destructive/90"
+    },
+    isLoading ? "\u5904\u7406\u4E2D..." : confirmText
+  ))));
+};
+function ImageMappingPanel({
+  title,
+  items,
+  value,
+  onChange,
+  className,
+  uploadLabel = "\u4E0A\u4F20\u56FE\u7247",
+  clearLabel = "\u6E05\u9664"
+}) {
+  const handleFileChange = (id, file) => {
+    if (!file) {
+      return;
+    }
+    const reader = new FileReader();
+    reader.onload = () => {
+      const base64 = typeof reader.result === "string" ? reader.result : "";
+      if (!base64) {
+        return;
+      }
+      onChange({
+        ...value,
+        [id]: base64
+      });
+    };
+    reader.readAsDataURL(file);
+  };
+  const handleRemove = (id) => {
+    const next = { ...value };
+    delete next[id];
+    onChange(next);
+  };
+  return /* @__PURE__ */ React6__default.createElement("details", { className: cn("rounded-lg border border-slate-200 bg-white/80 p-3", className) }, /* @__PURE__ */ React6__default.createElement("summary", { className: "cursor-pointer text-sm font-semibold text-slate-700" }, title), /* @__PURE__ */ React6__default.createElement("div", { className: "mt-3 grid grid-cols-1 gap-2 sm:grid-cols-2" }, items.map((item) => {
+    const image = value[item.id];
+    return /* @__PURE__ */ React6__default.createElement(
+      "div",
+      {
+        key: item.id,
+        className: "flex items-center gap-2 rounded-md border border-slate-200 bg-white p-2"
+      },
+      /* @__PURE__ */ React6__default.createElement("div", { className: "w-16 text-xs font-semibold text-slate-600" }, item.label),
+      /* @__PURE__ */ React6__default.createElement("label", { className: "flex-1 cursor-pointer rounded-md bg-cyan-600 px-2 py-1 text-center text-xs font-medium text-white" }, uploadLabel, /* @__PURE__ */ React6__default.createElement(
+        "input",
+        {
+          type: "file",
+          accept: "image/*",
+          className: "hidden",
+          onChange: (event) => {
+            handleFileChange(item.id, event.target.files?.[0]);
+            event.currentTarget.value = "";
+          }
+        }
+      )),
+      image ? /* @__PURE__ */ React6__default.createElement(React6__default.Fragment, null, /* @__PURE__ */ React6__default.createElement(
+        "img",
+        {
+          src: image,
+          alt: item.label,
+          className: "h-8 w-8 rounded-full border border-slate-200 object-cover"
+        }
+      ), /* @__PURE__ */ React6__default.createElement(
+        "button",
+        {
+          type: "button",
+          className: "rounded-md border border-red-200 px-2 py-1 text-xs text-red-600",
+          onClick: () => handleRemove(item.id)
+        },
+        clearLabel
+      )) : null
+    );
+  })));
+}
+function LocalImageMappingPanel({
+  storageKey,
+  defaultValue = {},
+  onValueChange,
+  ...panelProps
+}) {
+  const [value, setValue] = useLocalStorage(storageKey, defaultValue);
+  return /* @__PURE__ */ React6__default.createElement(
+    ImageMappingPanel,
+    {
+      ...panelProps,
+      value,
+      onChange: (next) => {
+        setValue(next);
+        onValueChange?.(next);
+      }
+    }
+  );
+}
+
+export { AlertDialogAction, AlertDialogCancel, AlertDialogContent, Avatar, AvatarFallback, AvatarImage, BackButton, Badge, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, CollisionBalls, ConfirmModal, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, FilterButtonGroup, GenericOrderManager, Grid, ImageMappingPanel, Label, LocalImageMappingPanel, Modal, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, Progress, ScrollArea, ScrollBar, SearchBox, SearchResultHint, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, Tabs, TabsContent, TabsList, TabsTrigger, Textarea, Timeline, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, badgeVariants, components_exports };
+//# sourceMappingURL=chunk-YIRPPMCN.mjs.map
+//# sourceMappingURL=chunk-YIRPPMCN.mjs.map