flowcloudai-ui 0.1.0 → 0.1.2

package/dist/index.js

@@ -16,16 +16,7 @@ function ThemeProvider({ children, defaultTheme = "system", target }) {
   const resolvedTheme = theme === "system" ? systemTheme : theme;
   useEffect(() => {
     const el = target ?? document.documentElement;
-    el.classList.remove("theme-light", "theme-dark");
-    el.classList.add(`theme-${resolvedTheme}`);
     el.setAttribute("data-theme", resolvedTheme);
-    if (resolvedTheme === "dark") {
-      document.body.style.backgroundColor = "#0F0F0F";
-      document.body.style.color = "#E8E8E6";
-    } else {
-      document.body.style.backgroundColor = "";
-      document.body.style.color = "";
-    }
   }, [resolvedTheme, target]);
   useEffect(() => {
     if (theme !== "system") return;
@@ -42,6 +33,7 @@ import { jsx as jsx2, jsxs } from "react/jsx-runtime";
 function Button({
   variant = "primary",
   size = "md",
+  radius,
   disabled = false,
   loading = false,
   block = false,
@@ -49,14 +41,44 @@ function Button({
   iconOnly = false,
   iconLeft,
   iconRight,
+  background,
+  hoverBackground,
+  activeBackground,
+  color,
+  hoverColor,
+  activeColor,
+  borderColor,
+  hoverBorderColor,
   className,
+  style,
   children,
   ...props
 }) {
+  const colorVars = {
+    "--btn-bg": background,
+    "--btn-bg-hover": hoverBackground,
+    "--btn-bg-active": activeBackground,
+    "--btn-color": color,
+    "--btn-color-hover": hoverColor,
+    "--btn-color-active": activeColor,
+    "--btn-border": borderColor,
+    "--btn-border-hover": hoverBorderColor
+  };
+  const overrideStyle = {};
+  for (const [key, value] of Object.entries(colorVars)) {
+    if (value !== void 0) {
+      overrideStyle[key] = value;
+    }
+  }
+  const mergedStyle = {
+    ...overrideStyle,
+    ...style
+  };
   const classNames = [
     "fc-btn",
     `fc-btn--${variant}`,
     `fc-btn--${size}`,
+    radius && `fc-btn--radius-${radius}`,
     block && "fc-btn--block",
     circle && "fc-btn--circle",
     iconOnly && "fc-btn--icon-only",
@@ -69,6 +91,7 @@ function Button({
     {
       className: classNames,
       disabled: disabled || loading,
+      style: mergedStyle,
       ...props,
       children: [
         iconLeft && !loading && /* @__PURE__ */ jsx2("span", { className: "fc-btn__icon fc-btn__icon--left", children: iconLeft }),
@@ -105,8 +128,14 @@ function CheckButton({
   onChange,
   disabled = false,
   size = "md",
+  radius,
   labelLeft,
   labelRight,
+  trackBackground,
+  checkedTrackBackground,
+  thumbBackground,
+  thumbDotColor,
+  labelColor,
   className = "",
   style
 }) {
@@ -125,9 +154,27 @@ function CheckButton({
       toggle();
     }
   };
+  const colorVars = {
+    "--check-track-bg": trackBackground,
+    "--check-track-bg-checked": checkedTrackBackground,
+    "--check-thumb-bg": thumbBackground,
+    "--check-thumb-dot-color": thumbDotColor,
+    "--check-label-color": labelColor
+  };
+  const overrideStyle = {};
+  for (const [key, value] of Object.entries(colorVars)) {
+    if (value !== void 0) {
+      overrideStyle[key] = value;
+    }
+  }
+  const mergedStyle = {
+    ...overrideStyle,
+    ...style
+  };
   const cls = [
     "fc-check",
     `fc-check--${size}`,
+    radius && `fc-check--radius-${radius}`,
     checked && "fc-check--checked",
     disabled && "fc-check--disabled",
     className
@@ -136,7 +183,7 @@ function CheckButton({
     "div",
     {
       className: cls,
-      style,
+      style: mergedStyle,
       role: "switch",
       "aria-checked": checked,
       tabIndex: disabled ? -1 : 0,
@@ -162,8 +209,26 @@ function RollingBox({
   showTrack = false,
   children,
   className,
+  thumbColor,
+  thumbHoverColor,
+  thumbActiveColor,
+  trackColor,
+  style,
   ...props
 }) {
+  const colorVars = {
+    "--roll-thumb": thumbColor,
+    "--roll-thumb-hover": thumbHoverColor,
+    "--roll-thumb-active": thumbActiveColor,
+    "--roll-track": trackColor
+  };
+  const overrideStyle = {};
+  for (const [key, value] of Object.entries(colorVars)) {
+    if (value !== void 0) {
+      overrideStyle[key] = value;
+    }
+  }
+  const mergedStyle = { ...overrideStyle, ...style };
   const containerRef = React2.useRef(null);
   const [isScrolling, setIsScrolling] = React2.useState(false);
   const scrollTimeoutRef = React2.useRef(null);
@@ -184,6 +249,17 @@ function RollingBox({
       }
     };
   }, []);
+  React2.useEffect(() => {
+    const el = containerRef.current;
+    if (!el || !horizontal) return;
+    const handler = (e) => {
+      if (e.deltaY === 0) return;
+      e.preventDefault();
+      el.scrollLeft += e.deltaY;
+    };
+    el.addEventListener("wheel", handler, { passive: false });
+    return () => el.removeEventListener("wheel", handler);
+  }, [horizontal]);
   const resolvedDirection = horizontal ? "horizontal" : "vertical";
   const classNames = [
     "fc-roll",
@@ -199,6 +275,7 @@ function RollingBox({
     {
       ref: containerRef,
       className: classNames,
+      style: mergedStyle,
       onScroll: handleScroll,
       ...props,
       children: /* @__PURE__ */ jsx4("div", { className: "fc-roll__content", children })
@@ -207,134 +284,110 @@ function RollingBox({
 }
 
 // src/components/Bar/SideBar.tsx
-import * as React3 from "react";
+import { memo, useCallback as useCallback2 } from "react";
 import { jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
-function SideBar({
-  items,
-  selectedKeys: controlledSelected,
-  defaultSelectedKeys = [],
-  openKeys: controlledOpen,
-  defaultOpenKeys = [],
-  onSelect,
-  onOpenChange,
-  collapsed: controlledCollapsed,
-  defaultCollapsed = false,
-  onCollapse,
-  className,
-  width = 240,
-  collapsedWidth = 64
-}) {
-  const [internalSelected, setInternalSelected] = React3.useState(defaultSelectedKeys);
-  const [internalOpen, setInternalOpen] = React3.useState(defaultOpenKeys);
-  const [internalCollapsed, setInternalCollapsed] = React3.useState(defaultCollapsed);
-  const currentSelected = controlledSelected ?? internalSelected;
-  const currentOpen = controlledOpen ?? internalOpen;
-  const currentCollapsed = controlledCollapsed ?? internalCollapsed;
-  const updateOpen = React3.useCallback((next) => {
-    if (controlledOpen === void 0) setInternalOpen(next);
-    onOpenChange?.(next);
-  }, [controlledOpen, onOpenChange]);
-  const toggleOpen = React3.useCallback((key) => {
-    const next = currentOpen.includes(key) ? currentOpen.filter((k) => k !== key) : [...currentOpen, key];
-    updateOpen(next);
-  }, [currentOpen, updateOpen]);
-  const handleSelect = React3.useCallback((key, item) => {
-    if (item.disabled) return;
-    const next = [key];
-    if (controlledSelected === void 0) setInternalSelected(next);
-    onSelect?.(next);
-  }, [controlledSelected, onSelect]);
-  const toggleCollapse = React3.useCallback(() => {
-    const next = !currentCollapsed;
-    if (controlledCollapsed === void 0) setInternalCollapsed(next);
-    onCollapse?.(next);
-  }, [currentCollapsed, controlledCollapsed, onCollapse]);
-  const handleItemClick = React3.useCallback((item) => {
-    if (item.children?.length) {
-      toggleOpen(item.key);
-    } else {
-      handleSelect(item.key, item);
-    }
-  }, [toggleOpen, handleSelect]);
-  const handleItemKeyDown = React3.useCallback((e, item) => {
-    if (e.key === "Enter" || e.key === " ") {
-      e.preventDefault();
-      handleItemClick(item);
-    }
-  }, [handleItemClick]);
-  const renderMenuItem = (item, level = 0) => {
-    const hasChildren = (item.children?.length ?? 0) > 0;
-    const isOpen = currentOpen.includes(item.key);
-    const isSelected = currentSelected.includes(item.key);
-    const itemClassName = [
-      "fc-sidebar__item",
-      `fc-sidebar__item--level-${level}`,
-      hasChildren && "fc-sidebar__item--parent",
-      isOpen && "fc-sidebar__item--open",
-      isSelected && "fc-sidebar__item--selected",
-      item.disabled && "fc-sidebar__item--disabled"
-    ].filter(Boolean).join(" ");
-    const Tag = item.href ? "a" : "div";
-    const interactiveProps = {
-      role: hasChildren ? "treeitem" : "menuitem",
-      tabIndex: item.disabled ? -1 : 0,
-      "aria-selected": isSelected || void 0,
-      "aria-expanded": hasChildren ? isOpen : void 0,
-      "aria-disabled": item.disabled || void 0,
-      onClick: () => handleItemClick(item),
-      onKeyDown: (e) => handleItemKeyDown(e, item),
-      ...item.href ? { href: item.href } : {}
-    };
-    return /* @__PURE__ */ jsxs3("div", { className: "fc-sidebar__item-wrapper", children: [
-      /* @__PURE__ */ jsxs3(Tag, { className: itemClassName, ...interactiveProps, children: [
-        item.icon && /* @__PURE__ */ jsx5("span", { className: "fc-sidebar__icon", "aria-hidden": "true", children: item.icon }),
-        /* @__PURE__ */ jsx5("span", { className: "fc-sidebar__label", children: item.label }),
-        hasChildren && /* @__PURE__ */ jsx5("span", { className: "fc-sidebar__arrow", "aria-hidden": "true", children: "\u25B6" })
-      ] }),
-      hasChildren && /* @__PURE__ */ jsx5(
-        "div",
-        {
-          className: [
-            "fc-sidebar__submenu",
-            isOpen && "fc-sidebar__submenu--open"
-          ].filter(Boolean).join(" "),
-          role: "group",
-          children: /* @__PURE__ */ jsx5("div", { className: "fc-sidebar__submenu-inner", children: item.children.map((child) => renderMenuItem(child, level + 1)) })
-        }
-      )
-    ] }, item.key);
-  };
-  const sidebarStyle = {
-    "--sidebar-width": `${currentCollapsed ? collapsedWidth : width}px`,
-    "--sidebar-collapsed-width": `${collapsedWidth}px`
-  };
+var SideBarItemView = memo(({ item, isSelected, onClick }) => {
+  const classes = [
+    "fc-sidebar__item",
+    isSelected && "fc-sidebar__item--selected",
+    item.disabled && "fc-sidebar__item--disabled"
+  ].filter(Boolean).join(" ");
+  const Tag = item.href ? "a" : "div";
+  const linkProps = item.href ? { href: item.href } : {};
   return /* @__PURE__ */ jsxs3(
-    "aside",
+    Tag,
     {
-      className: [
-        "fc-sidebar",
-        currentCollapsed && "fc-sidebar--collapsed",
-        className
-      ].filter(Boolean).join(" "),
-      style: sidebarStyle,
-      role: "navigation",
-      "aria-label": "Sidebar",
+      className: classes,
+      onClick: () => !item.disabled && onClick(item.key),
+      ...linkProps,
       children: [
-        /* @__PURE__ */ jsx5("div", { className: "fc-sidebar__header", children: /* @__PURE__ */ jsx5(
-          "button",
-          {
-            className: "fc-sidebar__collapse-btn",
-            onClick: toggleCollapse,
-            "aria-label": currentCollapsed ? "\u5C55\u5F00\u4FA7\u680F" : "\u6536\u8D77\u4FA7\u680F",
-            "aria-expanded": !currentCollapsed,
-            children: currentCollapsed ? "\u2192" : "\u2190"
-          }
-        ) }),
-        /* @__PURE__ */ jsx5("nav", { className: "fc-sidebar__menu", role: "tree", children: items.map((item) => renderMenuItem(item)) })
+        item.icon && /* @__PURE__ */ jsx5("span", { className: "fc-sidebar__icon", children: item.icon }),
+        /* @__PURE__ */ jsx5("span", { className: "fc-sidebar__label", children: item.label })
       ]
     }
   );
-}
+});
+SideBarItemView.displayName = "SideBarItemView";
+var SideBar = memo(({
+  items,
+  bottomItems,
+  selectedKey,
+  collapsed,
+  width = 240,
+  collapsedWidth = 64,
+  onSelect,
+  onCollapse,
+  className = "",
+  style
+}) => {
+  const handleClick = useCallback2(
+    (key) => onSelect(key),
+    [onSelect]
+  );
+  const toggleCollapse = useCallback2(
+    () => onCollapse(!collapsed),
+    [collapsed, onCollapse]
+  );
+  const rootClasses = [
+    "fc-sidebar",
+    collapsed && "fc-sidebar--collapsed",
+    className
+  ].filter(Boolean).join(" ");
+  const rootStyle = {
+    "--sidebar-width": `${collapsed ? collapsedWidth : width}px`,
+    "--sidebar-collapsed-width": `${collapsedWidth}px`,
+    ...style
+  };
+  return /* @__PURE__ */ jsxs3("aside", { className: rootClasses, style: rootStyle, children: [
+    /* @__PURE__ */ jsx5("div", { className: "fc-sidebar__header", children: /* @__PURE__ */ jsx5(
+      "button",
+      {
+        className: "fc-sidebar__collapse-btn",
+        onClick: toggleCollapse,
+        children: /* @__PURE__ */ jsx5(
+          "svg",
+          {
+            className: "fc-sidebar__collapse-icon",
+            width: "16",
+            height: "16",
+            viewBox: "0 0 16 16",
+            fill: "none",
+            xmlns: "http://www.w3.org/2000/svg",
+            children: /* @__PURE__ */ jsx5(
+              "path",
+              {
+                d: collapsed ? "M6 3L11 8L6 13" : "M10 3L5 8L10 13",
+                stroke: "currentColor",
+                strokeWidth: "1.5",
+                strokeLinecap: "round",
+                strokeLinejoin: "round"
+              }
+            )
+          }
+        )
+      }
+    ) }),
+    /* @__PURE__ */ jsx5("nav", { className: "fc-sidebar__menu", children: items.map((item) => /* @__PURE__ */ jsx5(
+      SideBarItemView,
+      {
+        item,
+        isSelected: selectedKey === item.key,
+        onClick: handleClick
+      },
+      item.key
+    )) }),
+    bottomItems && bottomItems.length > 0 && /* @__PURE__ */ jsx5("div", { className: "fc-sidebar__footer", children: bottomItems.map((item) => /* @__PURE__ */ jsx5(
+      SideBarItemView,
+      {
+        item,
+        isSelected: selectedKey === item.key,
+        onClick: handleClick
+      },
+      item.key
+    )) })
+  ] });
+});
+SideBar.displayName = "SideBar";
 
 // src/components/Input/Input.tsx
 import * as React4 from "react";
@@ -342,6 +395,7 @@ import { jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
 var Input = React4.forwardRef(({
   size = "md",
   status = "default",
+  radius,
   prefix,
   suffix,
   allowClear = false,
@@ -364,13 +418,12 @@ var Input = React4.forwardRef(({
   const currentValue = isControlled ? value : internalValue;
   const handleChange = (e) => {
     if (!isControlled) setInternalValue(e.target.value);
-    onChange?.(e);
+    onChange?.(e.target.value);
   };
   const handleClear = () => {
     if (!isControlled) setInternalValue("");
     onClear?.();
-    const event = { target: { value: "" } };
-    onChange?.(event);
+    onChange?.("");
   };
   const togglePassword = () => {
     setType((prev) => prev === "password" ? "text" : "password");
@@ -381,6 +434,7 @@ var Input = React4.forwardRef(({
     "fc-input",
     `fc-input--${size}`,
     `fc-input--${status}`,
+    radius && `fc-input--radius-${radius}`,
     (prefix || addonBefore) && "fc-input--has-prefix",
     (suffix || addonAfter || showClear || showPasswordToggle) && "fc-input--has-suffix",
     addonBefore && "fc-input--addon-before",
@@ -402,8 +456,8 @@ var Input = React4.forwardRef(({
   );
   return /* @__PURE__ */ jsxs4("div", { className: classNames, children: [
     addonBefore && /* @__PURE__ */ jsx6("span", { className: "fc-input__addon fc-input__addon--before", children: addonBefore }),
-    prefix && /* @__PURE__ */ jsx6("span", { className: "fc-input__prefix", children: prefix }),
     /* @__PURE__ */ jsxs4("div", { className: "fc-input__wrapper", children: [
+      prefix && /* @__PURE__ */ jsx6("span", { className: "fc-input__prefix", children: prefix }),
       input,
       /* @__PURE__ */ jsxs4("span", { className: "fc-input__actions", children: [
         showClear && /* @__PURE__ */ jsx6(
@@ -450,54 +504,112 @@ function Slider({
   disabled = false,
   marks,
   tooltip = false,
-  className = ""
+  className = "",
+  style,
+  trackBackground,
+  fillBackground,
+  thumbBackground,
+  thumbBorderColor,
+  markDotColor,
+  markLabelColor,
+  tooltipBackground,
+  tooltipColor
 }) {
   const trackRef = React5.useRef(null);
-  const draggingRef = React5.useRef(null);
   const [dragging, setDragging] = React5.useState(null);
+  const dragCleanupRef = React5.useRef(null);
+  React5.useEffect(() => {
+    return () => {
+      dragCleanupRef.current?.();
+    };
+  }, []);
   const initialValue = defaultValue ?? (range ? [min, max] : min);
   const [internalValue, setInternalValue] = React5.useState(initialValue);
   const isControlled = controlledValue !== void 0;
   const currentValue = isControlled ? controlledValue : internalValue;
+  const colorVars = {
+    "--slider-track-bg": trackBackground,
+    "--slider-fill-bg": fillBackground,
+    "--slider-thumb-bg": thumbBackground,
+    "--slider-thumb-border": thumbBorderColor,
+    "--slider-mark-dot-bg": markDotColor,
+    "--slider-mark-label-color": markLabelColor,
+    "--slider-tooltip-bg": tooltipBackground,
+    "--slider-tooltip-color": tooltipColor
+  };
+  const overrideStyle = {};
+  for (const [key, value] of Object.entries(colorVars)) {
+    if (value !== void 0) {
+      overrideStyle[key] = value;
+    }
+  }
+  const mergedStyle = { ...overrideStyle, ...style };
   const getPercent = (val) => Math.max(0, Math.min(100, (val - min) / (max - min) * 100));
   const getValueFromPercent = (percent) => {
     const raw = min + percent / 100 * (max - min);
     const stepped = Math.round(raw / step) * step;
     return Math.max(min, Math.min(max, stepped));
   };
-  const handleMove = React5.useCallback((clientX, clientY) => {
-    if (!trackRef.current || draggingRef.current === null || disabled) return;
+  const handleMove = React5.useCallback((clientX, clientY, activeIndex) => {
+    if (!trackRef.current || disabled) return;
     const rect = trackRef.current.getBoundingClientRect();
     const percent = orientation === "horizontal" ? (clientX - rect.left) / rect.width * 100 : (rect.bottom - clientY) / rect.height * 100;
     const newValue = getValueFromPercent(Math.max(0, Math.min(100, percent)));
     let nextValue;
     if (range) {
       const [start, end] = currentValue;
-      nextValue = draggingRef.current === 0 ? [Math.min(newValue, end), end] : [start, Math.max(newValue, start)];
+      nextValue = activeIndex === 0 ? [Math.min(newValue, end), end] : [start, Math.max(newValue, start)];
     } else {
       nextValue = newValue;
     }
     if (!isControlled) setInternalValue(nextValue);
     onChange?.(nextValue);
   }, [disabled, orientation, range, currentValue, isControlled, onChange, min, max, step]);
-  const handleMouseDown = (index) => (e) => {
+  const startDrag = (index, clientX, clientY) => {
     if (disabled) return;
-    e.preventDefault();
-    draggingRef.current = index;
     setDragging(index);
-    const handleMouseMove = (e2) => handleMove(e2.clientX, e2.clientY);
-    const handleMouseUp = () => {
-      draggingRef.current = null;
-      setDragging(null);
+    const handleMouseMove = (ev) => handleMove(ev.clientX, ev.clientY, index);
+    const handleTouchMove = (ev) => {
+      ev.preventDefault();
+      const t = ev.touches[0];
+      handleMove(t.clientX, t.clientY, index);
+    };
+    const cleanup = () => {
       document.removeEventListener("mousemove", handleMouseMove);
       document.removeEventListener("mouseup", handleMouseUp);
+      document.removeEventListener("touchmove", handleTouchMove);
+      document.removeEventListener("touchend", handleTouchEnd);
+      dragCleanupRef.current = null;
     };
+    const handleMouseUp = () => {
+      setDragging(null);
+      cleanup();
+    };
+    const handleTouchEnd = () => {
+      setDragging(null);
+      cleanup();
+    };
+    dragCleanupRef.current = cleanup;
     document.addEventListener("mousemove", handleMouseMove);
     document.addEventListener("mouseup", handleMouseUp);
+    document.addEventListener("touchmove", handleTouchMove, { passive: false });
+    document.addEventListener("touchend", handleTouchEnd);
+    handleMove(clientX, clientY, index);
+  };
+  const handleMouseDown = (index) => (e) => {
+    if (disabled) return;
+    e.preventDefault();
+    startDrag(index, e.clientX, e.clientY);
+  };
+  const handleTouchStart = (index) => (e) => {
+    if (disabled) return;
+    e.preventDefault();
+    const t = e.touches[0];
+    startDrag(index, t.clientX, t.clientY);
   };
   const handleTrackClick = (e) => {
-    if (disabled || draggingRef.current !== null) return;
-    handleMove(e.clientX, e.clientY);
+    if (disabled || dragging !== null) return;
+    handleMove(e.clientX, e.clientY, 0);
   };
   const [startVal, endVal] = range ? currentValue : [min, currentValue];
   const startPercent = getPercent(startVal);
@@ -512,7 +624,7 @@ function Slider({
     dragging !== null && "fc-slider--dragging",
     className
   ].filter(Boolean).join(" ");
-  return /* @__PURE__ */ jsx7("div", { className: cls, children: /* @__PURE__ */ jsxs5(
+  return /* @__PURE__ */ jsx7("div", { className: cls, style: mergedStyle, children: /* @__PURE__ */ jsxs5(
     "div",
     {
       ref: trackRef,
@@ -532,6 +644,7 @@ function Slider({
             className: `fc-slider__thumb ${dragging === 0 ? "fc-slider__thumb--active" : ""}`,
             style: thumbStyle(startPercent),
             onMouseDown: handleMouseDown(0),
+            onTouchStart: handleTouchStart(0),
             children: tooltip && /* @__PURE__ */ jsx7("span", { className: "fc-slider__tooltip", children: startVal })
           }
         ),
@@ -541,6 +654,7 @@ function Slider({
             className: `fc-slider__thumb ${dragging === (range ? 1 : 0) ? "fc-slider__thumb--active" : ""}`,
             style: thumbStyle(endPercent),
             onMouseDown: handleMouseDown(range ? 1 : 0),
+            onTouchStart: handleTouchStart(range ? 1 : 0),
             children: tooltip && /* @__PURE__ */ jsx7("span", { className: "fc-slider__tooltip", children: endVal })
           }
         ),
@@ -563,6 +677,23 @@ function Slider({
 
 // src/components/Select/Select.tsx
 import * as React6 from "react";
+
+// src/hooks/useClickOutside.ts
+import { useEffect as useEffect4 } from "react";
+function useClickOutside(ref, handler, enabled = true) {
+  useEffect4(() => {
+    if (!enabled) return;
+    const listener = (e) => {
+      if (ref.current && !ref.current.contains(e.target)) {
+        handler();
+      }
+    };
+    document.addEventListener("pointerdown", listener);
+    return () => document.removeEventListener("pointerdown", listener);
+  }, [ref, handler, enabled]);
+}
+
+// src/components/Select/Select.tsx
 import { jsx as jsx8, jsxs as jsxs6 } from "react/jsx-runtime";
 function Select({
   options,
@@ -573,11 +704,32 @@ function Select({
   searchable = false,
   multiple = false,
   disabled = false,
+  radius,
   className = "",
+  style,
   virtualScroll = false,
   virtualItemHeight = 32,
-  maxHeight = 256
+  maxHeight = 256,
+  triggerBackground,
+  triggerBorderColor,
+  selectedColor,
+  selectedBackground,
+  hoverBackground
 }) {
+  const colorVars = {
+    "--select-trigger-bg": triggerBackground,
+    "--select-trigger-border": triggerBorderColor,
+    "--select-option-selected-color": selectedColor,
+    "--select-option-selected-bg": selectedBackground,
+    "--select-option-hover-bg": hoverBackground
+  };
+  const overrideStyle = {};
+  for (const [key, value] of Object.entries(colorVars)) {
+    if (value !== void 0) {
+      overrideStyle[key] = value;
+    }
+  }
+  const mergedStyle = { ...overrideStyle, ...style };
   const [isOpen, setIsOpen] = React6.useState(false);
   const [searchValue, setSearchValue] = React6.useState("");
   const [highlightedIndex, setHighlightedIndex] = React6.useState(0);
@@ -635,30 +787,65 @@ function Select({
     const selected = options.find((o) => o.value === currentValue);
     return selected?.label || placeholder;
   };
-  React6.useEffect(() => {
-    const handleClick = (e) => {
-      if (!containerRef.current?.contains(e.target)) {
+  useClickOutside(containerRef, () => setIsOpen(false));
+  const handleKeyDown = (e) => {
+    if (disabled) return;
+    switch (e.key) {
+      case "Enter":
+      case " ":
+        e.preventDefault();
+        if (!isOpen) {
+          setIsOpen(true);
+          break;
+        }
+        if (flatOptions[highlightedIndex]) handleSelect(flatOptions[highlightedIndex]);
+        break;
+      case "ArrowDown":
+        e.preventDefault();
+        if (!isOpen) {
+          setIsOpen(true);
+          break;
+        }
+        setHighlightedIndex((i) => Math.min(i + 1, flatOptions.length - 1));
+        break;
+      case "ArrowUp":
+        e.preventDefault();
+        setHighlightedIndex((i) => Math.max(i - 1, 0));
+        break;
+      case "Escape":
+        e.preventDefault();
         setIsOpen(false);
-      }
-    };
-    document.addEventListener("mousedown", handleClick);
-    return () => document.removeEventListener("mousedown", handleClick);
-  }, []);
+        break;
+      case "Home":
+        e.preventDefault();
+        setHighlightedIndex(0);
+        break;
+      case "End":
+        e.preventDefault();
+        setHighlightedIndex(flatOptions.length - 1);
+        break;
+    }
+  };
   const classNames = [
     "fc-select",
     isOpen && "fc-select--open",
     multiple && "fc-select--multiple",
     disabled && "fc-select--disabled",
+    radius && `fc-select--radius-${radius}`,
     className
   ].filter(Boolean).join(" ");
-  return /* @__PURE__ */ jsxs6("div", { ref: containerRef, className: classNames, children: [
+  return /* @__PURE__ */ jsxs6("div", { ref: containerRef, className: classNames, style: mergedStyle, onKeyDown: handleKeyDown, children: [
     /* @__PURE__ */ jsxs6(
       "div",
       {
         className: "fc-select__trigger",
         onClick: () => !disabled && setIsOpen(!isOpen),
+        tabIndex: disabled ? -1 : 0,
+        role: "combobox",
+        "aria-expanded": isOpen,
+        "aria-haspopup": "listbox",
         children: [
-          /* @__PURE__ */ jsx8("span", { className: `fc-select__value ${!currentValue && "fc-select__value--placeholder"}`, children: displayLabel() }),
+          /* @__PURE__ */ jsx8("span", { className: `fc-select__value ${(currentValue === void 0 || currentValue === null || multiple && !currentValue.length) && "fc-select__value--placeholder"}`, children: displayLabel() }),
           /* @__PURE__ */ jsx8("span", { className: "fc-select__arrow", children: "\u25BC" })
         ]
       }
@@ -725,7 +912,8 @@ function Select({
   }
   function highlightText(text, highlight) {
     if (!highlight) return text;
-    const parts = text.split(new RegExp(`(${highlight})`, "gi"));
+    const escaped = highlight.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
+    const parts = text.split(new RegExp(`(${escaped})`, "gi"));
     return parts.map(
       (part, i) => part.toLowerCase() === highlight.toLowerCase() ? /* @__PURE__ */ jsx8("mark", { className: "fc-select__highlight", children: part }, i) : part
     );
@@ -735,13 +923,13 @@ function Select({
 // src/components/Tree/Tree.tsx
 import {
   createContext as createContext2,
-  memo,
+  memo as memo2,
   useCallback as useCallback4,
   useContext as useContext2,
-  useEffect as useEffect4,
+  useEffect as useEffect5,
   useMemo as useMemo2,
   useRef as useRef4,
-  useState as useState9
+  useState as useState8
 } from "react";
 import {
   DndContext,
@@ -753,11 +941,11 @@ import {
 } from "@dnd-kit/core";
 
 // src/components/Tree/DeleteDialog.tsx
-import { useState as useState8 } from "react";
+import { useState as useState7 } from "react";
 import { Fragment, jsx as jsx9, jsxs as jsxs7 } from "react/jsx-runtime";
 function DeleteDialog({ node, onClose, onDelete }) {
-  const [phase, setPhase] = useState8("choose");
-  const [loading, setLoading] = useState8(false);
+  const [phase, setPhase] = useState7("choose");
+  const [loading, setLoading] = useState7(false);
   if (!node) return null;
   const reset = () => {
     setPhase("choose");
@@ -919,11 +1107,11 @@ import { Fragment as Fragment2, jsx as jsx10, jsxs as jsxs8 } from "react/jsx-ru
 var TreeActionsCtx = createContext2(null);
 var TreeStateCtx = createContext2(null);
 var DndStateCtx = createContext2(null);
-var CollapsePanel = memo(function CollapsePanel2({ open, children }) {
+var CollapsePanel = memo2(function CollapsePanel2({ open, children }) {
   const innerRef = useRef4(null);
-  const [height, setHeight] = useState9(0);
-  const [ready, setReady] = useState9(false);
-  useEffect4(() => {
+  const [height, setHeight] = useState8(0);
+  const [ready, setReady] = useState8(false);
+  useEffect5(() => {
     const el = innerRef.current;
     if (!el) return;
     const ro = new ResizeObserver(() => setHeight(el.offsetHeight));
@@ -938,7 +1126,7 @@ var CollapsePanel = memo(function CollapsePanel2({ open, children }) {
     transition: ready ? "height 0.12s ease-out" : "none"
   }, children: /* @__PURE__ */ jsx10("div", { ref: innerRef, children }) });
 });
-var DndSlot = memo(function DndSlot2({
+var DndSlot = memo2(function DndSlot2({
   nodeKey,
   disabled,
   children
@@ -959,15 +1147,15 @@ var DndSlot = memo(function DndSlot2({
   );
   return /* @__PURE__ */ jsx10(Fragment2, { children: children({ setRef, handleProps, isDragging, isDragSource, dropPosition }) });
 });
-var TreeNodeItem = memo(function TreeNodeItem2({ node, level, hidden = false }) {
+var TreeNodeItem = memo2(function TreeNodeItem2({ node, level, hidden = false }) {
   const actions = useContext2(TreeActionsCtx);
   const state = useContext2(TreeStateCtx);
   const isExpanded = state.expandedKeys.has(node.key);
   const isEditing = state.editingKey === node.key;
   const hasChildren = node.children.length > 0;
   const indent = level * 20 + 12;
-  const [localEdit, setLocalEdit] = useState9("");
-  useEffect4(() => {
+  const [localEdit, setLocalEdit] = useState8("");
+  useEffect5(() => {
     if (isEditing) setLocalEdit(node.title);
   }, [isEditing, node.title]);
   const handleEditKeyDown = useCallback4((e) => {
@@ -1093,18 +1281,18 @@ function Tree({
   scrollHeight = "400px",
   className = ""
 }) {
-  const [expandedKeys, setExpandedKeys] = useState9(/* @__PURE__ */ new Set());
-  const [editingKey, setEditingKey] = useState9(null);
-  const [deleteTarget, setDeleteTarget] = useState9(null);
-  const [searchValue, setSearchValue] = useState9("");
-  const [dndState, setDndState] = useState9({
+  const [expandedKeys, setExpandedKeys] = useState8(/* @__PURE__ */ new Set());
+  const [editingKey, setEditingKey] = useState8(null);
+  const [deleteTarget, setDeleteTarget] = useState8(null);
+  const [searchValue, setSearchValue] = useState8("");
+  const [dndState, setDndState] = useState8({
     dropTargetKey: null,
     dropPosition: null,
     dragKey: null
   });
   const dropRef = useRef4({ key: null, pos: null });
   const pointerYRef = useRef4(0);
-  useEffect4(() => {
+  useEffect5(() => {
     const handler = (e) => {
       pointerYRef.current = e.clientY;
     };
@@ -1263,10 +1451,10 @@ function Tree({
 }
 
 // src/components/Tree/OrphanDialog.tsx
-import { useState as useState10 } from "react";
+import { useState as useState9 } from "react";
 import { jsx as jsx11, jsxs as jsxs9 } from "react/jsx-runtime";
 function OrphanDialog({ orphans, onResolve, onClose }) {
-  const [resolutions, setResolutions] = useState10(
+  const [resolutions, setResolutions] = useState9(
     () => Object.fromEntries(orphans.map((o) => [o.key, "lift"]))
   );
   if (orphans.length === 0) return null;
@@ -1330,50 +1518,16 @@ function OrphanDialog({ orphans, onResolve, onClose }) {
 }
 
 // src/components/Avatar/Avatar.tsx
-import { useState as useState11, useMemo as useMemo3, useCallback as useCallback5, forwardRef as forwardRef2, useEffect as useEffect5 } from "react";
+import { useState as useState10, useCallback as useCallback5, forwardRef as forwardRef2, useEffect as useEffect6 } from "react";
 import { jsx as jsx12 } from "react/jsx-runtime";
-var SIZE_MAP = {
-  xs: 20,
-  sm: 28,
-  md: 40,
-  lg: 56,
-  xl: 72
-};
 var DEFAULT_ICON = "M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z";
-var useAvatarStyles = (size, shape, bordered, onClick, loadState, src, children, colorVariant, className, color, customStyle) => {
-  const classes = useMemo3(() => {
-    const classNames = [
-      "ui-avatar",
-      `ui-avatar-${size}`,
-      `ui-avatar-${shape}`,
-      bordered && "ui-avatar-bordered",
-      onClick && "ui-avatar-clickable",
-      loadState === "loading" && "ui-avatar-loading",
-      !src && !children && "ui-avatar-empty",
-      colorVariant && `ui-avatar--${colorVariant}`,
-      className
-    ];
-    return classNames.filter(Boolean).join(" ");
-  }, [size, shape, bordered, onClick, loadState, src, children, colorVariant, className]);
-  const style = useMemo3(() => ({
-    width: SIZE_MAP[size],
-    height: SIZE_MAP[size],
-    fontSize: `${SIZE_MAP[size] * 0.4}px`,
-    ...color && { backgroundColor: color },
-    ...customStyle
-  }), [size, color, customStyle]);
-  return { classes, style };
-};
-var useImageLoader = (src, fallbackSrc, onImageLoad, onImageError, onStateChange) => {
-  const [loadState, setLoadState] = useState11("idle");
-  const [currentSrc, setCurrentSrc] = useState11(src);
-  useEffect5(() => {
+var useImageLoader = (src, fallbackSrc, onImageLoad, onImageError) => {
+  const [loadState, setLoadState] = useState10("idle");
+  const [currentSrc, setCurrentSrc] = useState10(src);
+  useEffect6(() => {
     setCurrentSrc(src);
     setLoadState(src ? "loading" : "idle");
   }, [src]);
-  useEffect5(() => {
-    onStateChange?.(loadState);
-  }, [loadState, onStateChange]);
   const handleLoad = useCallback5(() => {
     setLoadState("loaded");
     onImageLoad?.();
@@ -1394,18 +1548,8 @@ var useImageLoader = (src, fallbackSrc, onImageLoad, onImageError, onStateChange
     handleError
   };
 };
-var useKeyboardInteraction = (onClick) => {
-  const handleKeyDown = useCallback5((e) => {
-    if (onClick && (e.key === "Enter" || e.key === " ")) {
-      e.preventDefault();
-      onClick(e);
-    }
-  }, [onClick]);
-  return { handleKeyDown };
-};
-var renderContent = (currentSrc, fallbackSrc, loadState, alt, lazyLoad2, children, handleLoad, handleError) => {
+var renderContent = (currentSrc, fallbackSrc, loadState, alt, lazyLoad2, handleLoad, handleError) => {
   const showImage = currentSrc && loadState !== "error";
-  const showFallback = !showImage && children;
   const imageSrc = loadState === "error" && currentSrc !== fallbackSrc ? fallbackSrc : currentSrc;
   if (showImage && imageSrc) {
     return /* @__PURE__ */ jsx12(
@@ -1421,37 +1565,20 @@ var renderContent = (currentSrc, fallbackSrc, loadState, alt, lazyLoad2, childre
       }
     );
   }
-  if (showFallback) {
-    return /* @__PURE__ */ jsx12("span", { className: "ui-avatar-text", children });
-  }
-  return /* @__PURE__ */ jsx12("span", { className: "ui-avatar-placeholder", children: /* @__PURE__ */ jsx12("svg", { viewBox: "0 0 24 24", width: "40%", height: "40%", fill: "currentColor", opacity: 0.4, children: /* @__PURE__ */ jsx12("path", { d: DEFAULT_ICON }) }) });
-};
-var useAriaAttributes = (onClick, loadState, alt) => {
-  return {
-    role: onClick ? "button" : "img",
-    tabIndex: onClick ? 0 : void 0,
-    "aria-label": alt,
-    "aria-busy": loadState === "loading",
-    "data-load-state": loadState
-  };
+  return /* @__PURE__ */ jsx12("span", { className: "ui-avatar-placeholder", children: /* @__PURE__ */ jsx12("svg", { viewBox: "0 0 24 24", width: "40%", height: "40%", fill: "currentColor", children: /* @__PURE__ */ jsx12("path", { d: DEFAULT_ICON }) }) });
 };
 var Avatar = forwardRef2(
   ({
-    children,
     src,
     fallbackSrc,
-    color,
-    colorVariant,
-    size = "md",
+    size = 40,
     shape = "circle",
     alt = "\u7528\u6237\u5934\u50CF",
     lazyLoad: lazyLoad2 = false,
     onImageLoad,
     onImageError,
-    onStateChange,
     bordered = false,
     className = "",
-    onClick,
     style: customStyle,
     ...restProps
   }, ref) => {
@@ -1459,31 +1586,28 @@ var Avatar = forwardRef2(
       src,
       fallbackSrc,
       onImageLoad,
-      onImageError,
-      onStateChange
-    );
-    const { classes, style } = useAvatarStyles(
-      size,
-      shape,
-      bordered,
-      onClick,
-      loadState,
-      src,
-      children,
-      colorVariant,
-      className,
-      color,
-      customStyle
+      onImageError
     );
-    const { handleKeyDown } = useKeyboardInteraction(onClick);
-    const ariaAttributes = useAriaAttributes(onClick, loadState, alt);
+    const sizeValue = `${size}px`;
+    const classes = [
+      "ui-avatar",
+      `ui-avatar-${shape}`,
+      bordered && "ui-avatar-bordered",
+      loadState === "loading" && "ui-avatar-loading",
+      className
+    ].filter(Boolean).join(" ");
+    const style = {
+      width: sizeValue,
+      height: sizeValue,
+      fontSize: `calc(${sizeValue} * 0.4)`,
+      ...customStyle
+    };
     const content = renderContent(
       currentSrc,
       fallbackSrc,
       loadState,
       alt,
       lazyLoad2,
-      children,
       handleLoad,
       handleError
     );
@@ -1493,9 +1617,9 @@ var Avatar = forwardRef2(
         ref,
         className: classes,
         style,
-        onClick,
-        onKeyDown: handleKeyDown,
-        ...ariaAttributes,
+        role: "img",
+        "aria-label": alt,
+        "data-load-state": loadState,
         ...restProps,
         children: content
       }
@@ -1505,7 +1629,7 @@ var Avatar = forwardRef2(
 Avatar.displayName = "Avatar";
 
 // src/components/ListGroup/ListGroup.tsx
-import { forwardRef as forwardRef3, useMemo as useMemo4, useCallback as useCallback6 } from "react";
+import { forwardRef as forwardRef3, useMemo as useMemo3, useCallback as useCallback6 } from "react";
 import { jsx as jsx13 } from "react/jsx-runtime";
 var combineClassNames = (...classNames) => {
   return classNames.filter(Boolean).join(" ");
@@ -1523,7 +1647,7 @@ var ListGroupItem = forwardRef3(
       if (disabled) return;
       onClick?.(e);
     }, [disabled, onClick]);
-    const classNames = useMemo4(() => {
+    const classNames = useMemo3(() => {
       return combineClassNames(
         "fc-list-group-item",
         active && "fc-list-group-item--active",
@@ -1556,7 +1680,7 @@ var ListGroup = forwardRef3(
     children,
     ...props
   }, ref) => {
-    const classNames = useMemo4(() => {
+    const classNames = useMemo3(() => {
       return combineClassNames(
         "fc-list-group",
         bordered && "fc-list-group--bordered",
@@ -1579,8 +1703,10 @@ var ListGroup = forwardRef3(
 ListGroup.displayName = "ListGroup";
 
 // src/components/VirtualList/VirtualList.tsx
-import { useState as useState12, useRef as useRef5, useCallback as useCallback7, useMemo as useMemo5, useEffect as useEffect6 } from "react";
+import { useState as useState11, useRef as useRef5, useCallback as useCallback7, useMemo as useMemo4, memo as memo3 } from "react";
 import { jsx as jsx14 } from "react/jsx-runtime";
+var VirtualItem = memo3(({ children, height }) => /* @__PURE__ */ jsx14("div", { className: "fc-virtual-list__item", style: { height: `${height}px` }, children }));
+VirtualItem.displayName = "VirtualItem";
 function VirtualList({
   data,
   height,
@@ -1593,7 +1719,7 @@ function VirtualList({
   style
 }) {
   const containerRef = useRef5(null);
-  const [scrollTop, setScrollTop] = useState12(0);
+  const [scrollTop, setScrollTop] = useState11(0);
   const totalHeight = data.length * itemHeight;
   const handleScroll = useCallback7((e) => {
     const newScrollTop = e.currentTarget.scrollTop;
@@ -1606,7 +1732,7 @@ function VirtualList({
       }
     }
   }, [onScrollEnd]);
-  const visibleRange = useMemo5(() => {
+  const visibleRange = useMemo4(() => {
     const startIndex = Math.max(0, Math.floor(scrollTop / itemHeight) - overscan);
     const endIndex = Math.min(
       data.length,
@@ -1614,15 +1740,10 @@ function VirtualList({
     );
     return { startIndex, endIndex };
   }, [scrollTop, height, itemHeight, data.length, overscan]);
-  const visibleData = useMemo5(() => {
+  const visibleData = useMemo4(() => {
     return data.slice(visibleRange.startIndex, visibleRange.endIndex);
   }, [data, visibleRange]);
   const offsetY = visibleRange.startIndex * itemHeight;
-  useEffect6(() => {
-    if (!showScrollbar && containerRef.current) {
-      containerRef.current.style.scrollbarWidth = "none";
-    }
-  }, [showScrollbar]);
   const classNames = [
     "fc-virtual-list",
     !showScrollbar && "fc-virtual-list--hide-scrollbar",
@@ -1647,15 +1768,7 @@ function VirtualList({
               style: { transform: `translateY(${offsetY}px)` },
               children: visibleData.map((item, idx) => {
                 const actualIndex = visibleRange.startIndex + idx;
-                return /* @__PURE__ */ jsx14(
-                  "div",
-                  {
-                    className: "fc-virtual-list__item",
-                    style: { height: `${itemHeight}px` },
-                    children: renderItem(item, actualIndex)
-                  },
-                  actualIndex
-                );
+                return /* @__PURE__ */ jsx14(VirtualItem, { height: itemHeight, children: renderItem(item, actualIndex) }, actualIndex);
               })
             }
           )
@@ -1666,7 +1779,7 @@ function VirtualList({
 }
 
 // src/components/Alert/AlertContext.tsx
-import { createContext as createContext3, useContext as useContext3, useState as useState13 } from "react";
+import { createContext as createContext3, useContext as useContext3, useEffect as useEffect7, useRef as useRef6, useState as useState12 } from "react";
 import { jsx as jsx15, jsxs as jsxs10 } from "react/jsx-runtime";
 var AlertContext = createContext3(null);
 var ICONS = {
@@ -1742,55 +1855,84 @@ var ICONS = {
     }
   )
 };
-function AlertProvider({ children }) {
-  const [props, setProps] = useState13({
+function AlertProvider({ children, background, borderColor }) {
+  const [alert, setAlert] = useState12({
     msg: "",
     type: "info",
+    mode: "alert",
     visible: false,
     choice: () => {
     }
   });
-  const showAlert = (msg, type, confirm = false) => new Promise((resolve) => {
-    setProps({
+  const mountedRef = useRef6(true);
+  useEffect7(() => {
+    mountedRef.current = true;
+    return () => {
+      mountedRef.current = false;
+    };
+  }, []);
+  const showAlert = (msg, type, mode = "alert", duration) => new Promise((resolve, reject) => {
+    if (!mountedRef.current) {
+      reject(new Error("AlertProvider unmounted"));
+      return;
+    }
+    setAlert({
       msg,
       type,
+      mode,
       visible: true,
-      confirm,
+      duration,
       choice: (res) => {
-        setProps((p) => ({ ...p, visible: false }));
+        if (!mountedRef.current) return;
+        setAlert((p) => ({ ...p, visible: false }));
         resolve(res);
       }
     });
   });
+  useEffect7(() => {
+    if (!alert.visible || !alert.duration) return;
+    const timer = setTimeout(() => alert.choice("auto"), alert.duration);
+    return () => clearTimeout(timer);
+  }, [alert.visible, alert.duration]);
+  const overrideStyle = {};
+  if (background !== void 0) overrideStyle["--alert-bg"] = background;
+  if (borderColor !== void 0) overrideStyle["--alert-border"] = borderColor;
   return /* @__PURE__ */ jsxs10(AlertContext.Provider, { value: { showAlert }, children: [
     children,
-    props.visible && /* @__PURE__ */ jsx15("div", { className: "fc-alert-overlay", children: /* @__PURE__ */ jsxs10("div", { className: `fc-alert fc-alert--${props.type}`, children: [
-      /* @__PURE__ */ jsxs10("div", { className: "fc-alert__header", children: [
-        ICONS[props.type],
-        /* @__PURE__ */ jsx15("span", { className: "fc-alert__title", children: "\u63D0\u793A" })
-      ] }),
-      /* @__PURE__ */ jsx15(RollingBox, { className: "fc-alert__msg", children: props.msg }),
-      /* @__PURE__ */ jsxs10("div", { className: "fc-alert__footer", children: [
-        props.confirm && /* @__PURE__ */ jsx15(
-          Button,
-          {
-            variant: "secondary",
-            size: "sm",
-            onClick: () => props.choice("no"),
-            children: "\u53D6\u6D88"
-          }
-        ),
-        /* @__PURE__ */ jsx15(
-          Button,
-          {
-            variant: "primary",
-            size: "sm",
-            onClick: () => props.choice("yes"),
-            children: "\u786E\u5B9A"
-          }
-        )
-      ] })
-    ] }) })
+    alert.visible && /* @__PURE__ */ jsx15("div", { className: "fc-alert-overlay", children: /* @__PURE__ */ jsxs10(
+      "div",
+      {
+        className: `fc-alert fc-alert--${alert.type} fc-alert--${alert.mode}`,
+        style: overrideStyle,
+        children: [
+          /* @__PURE__ */ jsxs10("div", { className: "fc-alert__header", children: [
+            ICONS[alert.type],
+            /* @__PURE__ */ jsx15("span", { className: "fc-alert__title", children: "\u63D0\u793A" })
+          ] }),
+          /* @__PURE__ */ jsx15(RollingBox, { className: "fc-alert__msg", children: alert.msg }),
+          alert.mode !== "toast" && /* @__PURE__ */ jsxs10("div", { className: "fc-alert__footer", children: [
+            alert.mode === "confirm" && /* @__PURE__ */ jsx15(
+              Button,
+              {
+                variant: "secondary",
+                size: "sm",
+                onClick: () => alert.choice("no"),
+                children: "\u53D6\u6D88"
+              }
+            ),
+            /* @__PURE__ */ jsx15(
+              Button,
+              {
+                variant: "primary",
+                size: "sm",
+                onClick: () => alert.choice("yes"),
+                children: "\u786E\u5B9A"
+              }
+            )
+          ] })
+        ]
+      }
+    ) })
   ] });
 }
 var useAlert = () => useContext3(AlertContext);
@@ -1882,347 +2024,1217 @@ var Card = ({
   ] });
 };
 
-// src/components/Tabs/Tabs.tsx
-import { useState as useState14 } from "react";
+// src/components/Bar/TabBar.tsx
+import { useRef as useRef8, useCallback as useCallback9, memo as memo4, useEffect as useEffect9 } from "react";
+
+// src/components/Bar/useAdaptiveTabLayout.ts
+import { useState as useState13, useRef as useRef7, useCallback as useCallback8, useEffect as useEffect8 } from "react";
+function useAdaptiveTabLayout(navRef, options) {
+  const { itemsLength, addable, minWidthRatio, maxTabWidthRatio } = options;
+  const itemsLengthRef = useRef7(itemsLength);
+  itemsLengthRef.current = itemsLength;
+  const addableRef = useRef7(addable);
+  addableRef.current = addable;
+  const minWidthRatioRef = useRef7(minWidthRatio);
+  minWidthRatioRef.current = minWidthRatio;
+  const maxTabWidthRatioRef = useRef7(maxTabWidthRatio);
+  maxTabWidthRatioRef.current = maxTabWidthRatio;
+  const [layout, setLayout] = useState13({ scrollMode: false, tabWidth: void 0 });
+  const calculateTimeoutRef = useRef7(null);
+  const lastLayoutRef = useRef7({ scrollMode: false, tabWidth: void 0 });
+  const addBtnWidthRef = useRef7(0);
+  const lastAddableRef = useRef7(void 0);
+  const calculate = useCallback8(() => {
+    const navOuter = navRef.current?.parentElement;
+    const nav = navRef.current;
+    const currentItemsLength = itemsLengthRef.current;
+    const currentAddable = addableRef.current;
+    const currentMinWidthRatio = minWidthRatioRef.current;
+    const currentMaxTabWidthRatio = maxTabWidthRatioRef.current;
+    if (!nav || !navOuter || currentItemsLength === 0) return;
+    if (currentAddable !== lastAddableRef.current) {
+      lastAddableRef.current = currentAddable;
+      if (currentAddable) {
+        const addBtnElement = navOuter.querySelector(".fc-tab-bar__add-btn");
+        if (addBtnElement) {
+          const btnStyle = getComputedStyle(addBtnElement);
+          const marginL = parseFloat(btnStyle.marginLeft) || 0;
+          const marginR = parseFloat(btnStyle.marginRight) || 0;
+          addBtnWidthRef.current = addBtnElement.getBoundingClientRect().width + marginL + marginR;
+        }
+      } else {
+        addBtnWidthRef.current = 0;
+      }
+    }
+    const navOuterCS = getComputedStyle(navOuter);
+    const navWrap = nav.querySelector(".fc-tab-bar__nav-wrap");
+    const navOuterW = navOuter.clientWidth - parseFloat(navOuterCS.paddingLeft) - parseFloat(navOuterCS.paddingRight);
+    const navW = navOuterW - addBtnWidthRef.current;
+    const tabGap = navWrap ? parseFloat(getComputedStyle(navWrap).gap) : 0;
+    const totalGapWidth = (currentItemsLength - 1) * tabGap;
+    const idealW = (navW - totalGapWidth) / currentItemsLength;
+    const threshold = window.innerWidth * currentMinWidthRatio;
+    const maxAllowedWidth = window.innerWidth * currentMaxTabWidthRatio;
+    const minAllowedWidth = 42;
+    const prev = lastLayoutRef.current;
+    const hysteresisFactor = 1.1;
+    let newScrollMode;
+    let newTabWidth;
+    if (idealW < threshold) {
+      newScrollMode = true;
+      newTabWidth = Math.max(threshold, minAllowedWidth);
+    } else if (prev.scrollMode && idealW < threshold * hysteresisFactor) {
+      newScrollMode = true;
+      newTabWidth = Math.max(threshold, minAllowedWidth);
+    } else {
+      newScrollMode = false;
+      newTabWidth = Math.min(Math.max(idealW, minAllowedWidth), maxAllowedWidth);
+    }
+    if (prev.tabWidth !== newTabWidth || prev.scrollMode !== newScrollMode) {
+      const newLayout = { scrollMode: newScrollMode, tabWidth: newTabWidth };
+      lastLayoutRef.current = newLayout;
+      setLayout(newLayout);
+    }
+  }, [navRef]);
+  const calculateDebounced = useCallback8(() => {
+    if (calculateTimeoutRef.current) clearTimeout(calculateTimeoutRef.current);
+    calculateTimeoutRef.current = setTimeout(calculate, 50);
+  }, [calculate]);
+  const calculateDebouncedRef = useRef7(calculateDebounced);
+  calculateDebouncedRef.current = calculateDebounced;
+  useEffect8(() => {
+    const rafId = requestAnimationFrame(calculate);
+    const handleResize = () => calculateDebouncedRef.current();
+    window.addEventListener("resize", handleResize);
+    return () => {
+      cancelAnimationFrame(rafId);
+      window.removeEventListener("resize", handleResize);
+      if (calculateTimeoutRef.current) clearTimeout(calculateTimeoutRef.current);
+    };
+  }, []);
+  useEffect8(() => {
+    calculate();
+  }, [itemsLength, calculate]);
+  return layout;
+}
+
+// src/components/Bar/TabBar.tsx
 import { jsx as jsx18, jsxs as jsxs13 } from "react/jsx-runtime";
-var Tabs = ({
+var TabItemView = memo4(({
+  item,
+  isActive,
+  closable,
+  draggable,
+  tabWidth,
+  tabClassName,
+  activeTabClassName,
+  tabStyle,
+  activeTabStyle,
+  renderCloseIcon,
+  onClick,
+  onClose,
+  onDragStart,
+  onDragOver,
+  onDrop,
+  onDragEnd
+}) => {
+  const showClose = item.closable !== void 0 ? item.closable : closable;
+  const isCompact = tabWidth !== void 0 && tabWidth < 42;
+  const classes = [
+    "fc-tab-bar__tab",
+    isActive && "fc-tab-bar__tab--active",
+    item.disabled && "fc-tab-bar__tab--disabled",
+    draggable && !item.disabled && "fc-tab-bar__tab--draggable",
+    tabClassName,
+    isActive && activeTabClassName
+  ].filter(Boolean).join(" ");
+  const mergedStyle = {
+    ...tabWidth !== void 0 ? { width: tabWidth, boxSizing: "border-box", flexShrink: 0 } : void 0,
+    ...tabStyle,
+    ...isActive ? activeTabStyle : void 0
+  };
+  return /* @__PURE__ */ jsxs13(
+    "div",
+    {
+      className: classes,
+      style: mergedStyle,
+      "data-compact": isCompact || void 0,
+      onClick: () => !item.disabled && onClick(item.key),
+      draggable: draggable && !item.disabled,
+      onDragStart: (e) => onDragStart(e, item.key),
+      onDragOver,
+      onDrop: (e) => onDrop(e, item.key),
+      onDragEnd,
+      role: "tab",
+      "aria-selected": isActive,
+      "aria-disabled": item.disabled,
+      tabIndex: item.disabled ? -1 : 0,
+      children: [
+        /* @__PURE__ */ jsx18("span", { className: "fc-tab-bar__tab-label", children: item.label }),
+        showClose && !item.disabled && /* @__PURE__ */ jsx18(
+          "span",
+          {
+            className: "fc-tab-bar__tab-close",
+            onClick: (e) => onClose(e, item.key),
+            role: "button",
+            "aria-label": `\u5173\u95ED`,
+            children: renderCloseIcon ? renderCloseIcon(item.key) : "\xD7"
+          }
+        )
+      ]
+    }
+  );
+});
+TabItemView.displayName = "TabItemView";
+var TabBar = memo4(({
   items,
-  activeKey: controlledActiveKey,
-  defaultActiveKey,
+  activeKey,
+  variant = "attached",
   radius = "md",
+  tabRadius,
   closable = false,
   addable = false,
+  draggable = false,
+  minWidthRatio = 0.07,
+  maxTabWidthRatio = 0.15,
   onChange,
   onClose,
   onAdd,
+  onReorder,
+  tabClassName,
+  activeTabClassName,
+  tabStyle,
+  activeTabStyle,
+  renderCloseIcon,
+  renderAddButton,
   className = "",
-  style
+  style,
+  background,
+  tabColor,
+  tabHoverColor,
+  tabHoverBackground,
+  tabActiveColor,
+  tabActiveBackground,
+  activeIndicatorColor
 }) => {
-  const [internalActiveKey, setInternalActiveKey] = useState14(
-    defaultActiveKey || items[0]?.key || ""
-  );
-  const activeKey = controlledActiveKey !== void 0 ? controlledActiveKey : internalActiveKey;
-  const handleTabClick = (key, disabled) => {
-    if (disabled) return;
-    if (controlledActiveKey === void 0) {
-      setInternalActiveKey(key);
-    }
-    onChange?.(key);
+  const colorVars = {
+    "--tab-bar-bg": background,
+    "--tab-color": tabColor,
+    "--tab-hover-color": tabHoverColor,
+    "--tab-hover-bg": tabHoverBackground,
+    "--tab-active-color": tabActiveColor,
+    "--tab-active-bg": tabActiveBackground,
+    "--tab-active-indicator": activeIndicatorColor
   };
-  const handleClose = (e, key) => {
-    e.stopPropagation();
-    onClose?.(key);
-    if (key === activeKey) {
-      const currentIndex = items.findIndex((item) => item.key === key);
-      const nextItem = items[currentIndex + 1] || items[currentIndex - 1];
-      if (nextItem && !nextItem.disabled) {
-        handleTabClick(nextItem.key);
-      }
+  const overrideStyle = {};
+  for (const [key, value] of Object.entries(colorVars)) {
+    if (value !== void 0) {
+      overrideStyle[key] = value;
     }
-  };
-  const classes = [
-    "fc-tabs",
-    `fc-tabs--radius-${radius}`,
+  }
+  const mergedStyle = { ...overrideStyle, ...style };
+  const dragKeyRef = useRef8(null);
+  const navRef = useRef8(null);
+  const layout = useAdaptiveTabLayout(navRef, {
+    itemsLength: items.length,
+    addable,
+    minWidthRatio,
+    maxTabWidthRatio
+  });
+  const prevItemsLengthRef = useRef8(items.length);
+  useEffect9(() => {
+    const prev = prevItemsLengthRef.current;
+    prevItemsLengthRef.current = items.length;
+    if (items.length <= prev || !layout.scrollMode) return;
+    const roll = navRef.current?.querySelector(".fc-roll");
+    if (!roll) return;
+    requestAnimationFrame(() => {
+      roll.scrollLeft = roll.scrollWidth;
+    });
+  }, [items.length, layout.scrollMode]);
+  const handleClick = useCallback9(
+    (key) => onChange(key),
+    [onChange]
+  );
+  const handleClose = useCallback9(
+    (e, key) => {
+      e.stopPropagation();
+      onClose?.(key);
+    },
+    [onClose]
+  );
+  const handleDragStart = useCallback9(
+    (e, key) => {
+      dragKeyRef.current = key;
+      e.dataTransfer.effectAllowed = "move";
+      const target = e.currentTarget;
+      requestAnimationFrame(() => target.classList.add("fc-tab-bar__tab--dragging"));
+    },
+    []
+  );
+  const handleDragOver = useCallback9((e) => {
+    e.preventDefault();
+    e.dataTransfer.dropEffect = "move";
+  }, []);
+  const handleDrop = useCallback9(
+    (e, targetKey) => {
+      e.preventDefault();
+      const dragKey = dragKeyRef.current;
+      if (!dragKey || dragKey === targetKey || !onReorder) return;
+      const fromIndex = items.findIndex((i) => i.key === dragKey);
+      const toIndex = items.findIndex((i) => i.key === targetKey);
+      if (fromIndex === -1 || toIndex === -1) return;
+      const reordered = [...items];
+      const [moved] = reordered.splice(fromIndex, 1);
+      reordered.splice(toIndex, 0, moved);
+      onReorder(reordered);
+    },
+    [items, onReorder]
+  );
+  const handleDragEnd = useCallback9((e) => {
+    dragKeyRef.current = null;
+    e.currentTarget.classList.remove("fc-tab-bar__tab--dragging");
+  }, []);
+  const { scrollMode, tabWidth } = layout;
+  const rootClasses = [
+    "fc-tab-bar",
+    `fc-tab-bar--${variant}`,
+    `fc-tab-bar--radius-${radius}`,
+    tabRadius && `fc-tab-bar--tab-radius-${tabRadius}`,
+    !scrollMode && tabWidth !== void 0 && "fc-tab-bar--shrink",
     className
   ].filter(Boolean).join(" ");
-  return /* @__PURE__ */ jsxs13("div", { className: classes, style, children: [
-    /* @__PURE__ */ jsx18("div", { className: "fc-tabs__nav", children: /* @__PURE__ */ jsxs13("div", { className: "fc-tabs__nav-wrap", children: [
-      items.map((item) => {
-        const isActive = activeKey === item.key;
-        return /* @__PURE__ */ jsxs13(
-          "div",
-          {
-            className: `fc-tabs__tab ${isActive ? "fc-tabs__tab--active" : ""} ${item.disabled ? "fc-tabs__tab--disabled" : ""}`,
-            onClick: () => handleTabClick(item.key, item.disabled),
-            children: [
-              /* @__PURE__ */ jsx18("span", { className: "fc-tabs__tab-label", children: item.label }),
-              closable && /* @__PURE__ */ jsx18(
-                "span",
-                {
-                  className: "fc-tabs__tab-close",
-                  onClick: (e) => handleClose(e, item.key),
-                  children: "\xD7"
-                }
-              )
-            ]
-          },
-          item.key
-        );
-      }),
-      addable && /* @__PURE__ */ jsx18("div", { className: "fc-tabs__add-btn", onClick: onAdd, children: "+" })
-    ] }) }),
-    /* @__PURE__ */ jsx18("div", { className: "fc-tabs__content", children: items.find((item) => item.key === activeKey)?.content })
-  ] });
-};
+  const tabList = /* @__PURE__ */ jsx18("div", { className: "fc-tab-bar__nav-wrap", children: items.map((item) => /* @__PURE__ */ jsx18(
+    TabItemView,
+    {
+      item,
+      isActive: activeKey === item.key,
+      closable,
+      draggable,
+      tabWidth,
+      tabClassName,
+      activeTabClassName,
+      tabStyle,
+      activeTabStyle,
+      renderCloseIcon,
+      onClick: handleClick,
+      onClose: handleClose,
+      onDragStart: handleDragStart,
+      onDragOver: handleDragOver,
+      onDrop: handleDrop,
+      onDragEnd: handleDragEnd
+    },
+    item.key
+  )) });
+  const addBtn = addable && /* @__PURE__ */ jsx18(
+    "div",
+    {
+      className: "fc-tab-bar__add-btn",
+      onClick: onAdd,
+      role: "button",
+      "aria-label": "\u6DFB\u52A0\u6807\u7B7E",
+      children: renderAddButton ? renderAddButton() : "+"
+    }
+  );
+  return /* @__PURE__ */ jsx18("div", { className: rootClasses, style: mergedStyle, role: "tablist", children: /* @__PURE__ */ jsxs13("div", { className: `fc-tab-bar__nav-outer${scrollMode ? " fc-tab-bar__nav-outer--scroll" : ""}`, children: [
+    /* @__PURE__ */ jsx18("div", { className: `fc-tab-bar__nav${scrollMode ? " fc-tab-bar__nav--scroll" : ""}`, ref: navRef, children: scrollMode ? /* @__PURE__ */ jsx18(RollingBox, { horizontal: true, showThumb: "hide", style: { flex: 1, minWidth: 0, height: "auto" }, children: tabList }) : tabList }),
+    addBtn
+  ] }) });
+});
+TabBar.displayName = "TabBar";
 
-// src/components/Chat/Chat.tsx
-import { useState as useState15, useRef as useRef6, useEffect as useEffect7, useCallback as useCallback8 } from "react";
+// src/components/Tag/TagItem.tsx
+import { useEffect as useEffect10, useRef as useRef9, useState as useState14 } from "react";
 import { Fragment as Fragment3, jsx as jsx19, jsxs as jsxs14 } from "react/jsx-runtime";
-var Chat = ({
-  messages = [],
-  onSendMessage,
-  placeholder = "\u8F93\u5165\u6D88\u606F...",
-  title = "AI \u52A9\u624B",
-  height = "600px",
-  showHeader = true,
-  showFooter = true,
-  loading = false,
-  disabled = false,
-  theme: propTheme,
-  userName = "\u6211",
-  assistantName = "AI\u52A9\u624B",
-  onTyping,
-  maxInputLength = 2e3,
-  autoFocus = true,
-  enableCopy = true
-}) => {
-  const [inputValue, setInputValue] = useState15("");
-  const [isTyping, setIsTyping] = useState15(false);
-  const [isSending, setIsSending] = useState15(false);
-  const [currentTheme, setCurrentTheme] = useState15("light");
-  const [copiedMessageId, setCopiedMessageId] = useState15(null);
-  const [copyError, setCopyError] = useState15(null);
-  const messagesEndRef = useRef6(null);
-  const inputRef = useRef6(null);
-  useEffect7(() => {
-    if (propTheme) {
-      setCurrentTheme(propTheme);
+function TagItem({
+  schema,
+  value,
+  onChange,
+  mode = "show",
+  background,
+  color,
+  borderColor
+}) {
+  const [editing, setEditing] = useState14(false);
+  const [draft, setDraft] = useState14(() => value !== void 0 ? String(value) : "");
+  const inputRef = useRef9(null);
+  useEffect10(() => {
+    if (!editing) setDraft(value !== void 0 ? String(value) : "");
+  }, [value, editing]);
+  const colorVars = {
+    "--tag-bg": background,
+    "--tag-color": color,
+    "--tag-border": borderColor
+  };
+  const overrideStyle = {};
+  for (const [k, v] of Object.entries(colorVars)) {
+    if (v !== void 0) overrideStyle[k] = v;
+  }
+  if (schema.type === "boolean") {
+    const boolVal = value === true || value === "true";
+    return /* @__PURE__ */ jsxs14(
+      "span",
+      {
+        className: "fc-tag-item fc-tag-item--boolean",
+        style: overrideStyle,
+        onClick: () => onChange?.(!boolVal),
+        title: "\u70B9\u51FB\u5207\u6362",
+        children: [
+          /* @__PURE__ */ jsx19("span", { className: "fc-tag-item__name", children: schema.name }),
+          /* @__PURE__ */ jsx19("span", { className: "fc-tag-item__sep", children: "\xB7" }),
+          /* @__PURE__ */ jsx19("span", { className: boolVal ? "fc-tag-item__bool-true" : "fc-tag-item__bool-false", children: boolVal ? "\u2713" : "\u2717" })
+        ]
+      }
+    );
+  }
+  const commit = () => {
+    if (schema.type === "number") {
+      const n = parseFloat(draft);
+      if (!isNaN(n)) {
+        const clamped = schema.range_min != null && n < schema.range_min ? schema.range_min : schema.range_max != null && n > schema.range_max ? schema.range_max : n;
+        onChange?.(clamped);
+      }
     } else {
-      const checkTheme = () => {
-        const dataTheme = document.documentElement.getAttribute("data-theme");
-        if (dataTheme === "dark") {
-          setCurrentTheme("dark");
-        } else if (dataTheme === "light") {
-          setCurrentTheme("light");
-        } else {
-          const hasDarkClass = document.documentElement.classList.contains("dark") || document.body.classList.contains("dark") || document.documentElement.classList.contains("theme-dark") || document.body.classList.contains("theme-dark");
-          setCurrentTheme(hasDarkClass ? "dark" : "light");
-        }
-      };
-      checkTheme();
-      const observer = new MutationObserver(checkTheme);
-      observer.observe(document.documentElement, {
-        attributes: true,
-        attributeFilter: ["data-theme", "class"]
-      });
-      observer.observe(document.body, {
-        attributes: true,
-        attributeFilter: ["class"]
-      });
-      return () => observer.disconnect();
-    }
-  }, [propTheme]);
-  useEffect7(() => {
-    messagesEndRef.current?.scrollIntoView({ behavior: "smooth" });
-  }, [messages, loading]);
-  useEffect7(() => {
-    if (autoFocus && !disabled && inputRef.current) {
-      inputRef.current.focus();
+      onChange?.(draft);
     }
-  }, [autoFocus, disabled]);
-  useEffect7(() => {
-    if (copyError) {
-      const timer = setTimeout(() => {
-        setCopyError(null);
-      }, 2e3);
-      return () => clearTimeout(timer);
+    if (mode === "show") setEditing(false);
+  };
+  const cancel = () => {
+    setDraft(value !== void 0 ? String(value) : "");
+    if (mode === "show") setEditing(false);
+  };
+  const isEditing = mode === "edit" || editing;
+  if (isEditing) {
+    return /* @__PURE__ */ jsxs14("span", { className: "fc-tag-item fc-tag-item--editing", style: overrideStyle, children: [
+      /* @__PURE__ */ jsx19("span", { className: "fc-tag-item__name", children: schema.name }),
+      /* @__PURE__ */ jsx19("span", { className: "fc-tag-item__sep", children: "\xB7" }),
+      /* @__PURE__ */ jsx19(
+        "input",
+        {
+          ref: inputRef,
+          className: "fc-tag-item__input",
+          type: schema.type === "number" ? "number" : "text",
+          value: draft,
+          min: schema.range_min ?? void 0,
+          max: schema.range_max ?? void 0,
+          autoFocus: true,
+          onChange: (e) => setDraft(e.target.value),
+          onBlur: commit,
+          onKeyDown: (e) => {
+            if (e.key === "Enter") {
+              e.preventDefault();
+              commit();
+            }
+            if (e.key === "Escape") {
+              e.preventDefault();
+              cancel();
+            }
+          }
+        }
+      )
+    ] });
+  }
+  return /* @__PURE__ */ jsxs14(
+    "span",
+    {
+      className: "fc-tag-item fc-tag-item--show",
+      style: overrideStyle,
+      onDoubleClick: () => {
+        setDraft(value !== void 0 ? String(value) : "");
+        setEditing(true);
+        setTimeout(() => inputRef.current?.select(), 0);
+      },
+      title: "\u53CC\u51FB\u7F16\u8F91",
+      children: [
+        /* @__PURE__ */ jsx19("span", { className: "fc-tag-item__name", children: schema.name }),
+        value !== void 0 && /* @__PURE__ */ jsxs14(Fragment3, { children: [
+          /* @__PURE__ */ jsx19("span", { className: "fc-tag-item__sep", children: "\xB7" }),
+          /* @__PURE__ */ jsx19("span", { className: "fc-tag-item__value", children: String(value) })
+        ] })
+      ]
     }
-  }, [copyError]);
-  const handleCopyMessage = useCallback8(async (messageId, content) => {
-    if (!navigator.clipboard) {
-      setCopyError("\u5F53\u524D\u6D4F\u89C8\u5668\u4E0D\u652F\u6301\u590D\u5236\u529F\u80FD");
-      return;
+  );
+}
+
+// src/components/MarkdownEditor/MarkdownEditor.tsx
+import { useState as useState15 } from "react";
+import MDEditor, { commands } from "@uiw/react-md-editor";
+import { jsx as jsx20 } from "react/jsx-runtime";
+function withTitle(cmd, title) {
+  return { ...cmd, buttonProps: { ...cmd.buttonProps ?? {}, title } };
+}
+var TOOLBAR_COMMANDS = [
+  withTitle(commands.bold, "\u52A0\u7C97"),
+  withTitle(commands.italic, "\u659C\u4F53"),
+  withTitle(commands.strikethrough, "\u5220\u9664\u7EBF"),
+  commands.divider,
+  withTitle(commands.title1, "\u4E00\u7EA7\u6807\u9898"),
+  withTitle(commands.title2, "\u4E8C\u7EA7\u6807\u9898"),
+  withTitle(commands.title3, "\u4E09\u7EA7\u6807\u9898"),
+  commands.divider,
+  withTitle(commands.quote, "\u5F15\u7528"),
+  withTitle(commands.code, "\u884C\u5185\u4EE3\u7801"),
+  withTitle(commands.codeBlock, "\u4EE3\u7801\u5757"),
+  commands.divider,
+  withTitle(commands.link, "\u94FE\u63A5"),
+  withTitle(commands.unorderedListCommand, "\u65E0\u5E8F\u5217\u8868"),
+  withTitle(commands.orderedListCommand, "\u6709\u5E8F\u5217\u8868"),
+  withTitle(commands.hr, "\u5206\u5272\u7EBF")
+];
+function MarkdownEditor({
+  value,
+  onChange,
+  onAiComplete,
+  minHeight = 200,
+  placeholder = "\u5728\u6B64\u8F93\u5165\u5185\u5BB9...",
+  mode = "edit",
+  background,
+  toolbarBackground,
+  borderColor
+}) {
+  const { resolvedTheme } = useTheme();
+  const [showSplit, setShowSplit] = useState15(false);
+  const colorVars = {
+    "--md-bg": background,
+    "--md-toolbar-bg": toolbarBackground,
+    "--md-border": borderColor
+  };
+  const overrideStyle = {};
+  for (const [k, v] of Object.entries(colorVars)) {
+    if (v !== void 0) overrideStyle[k] = v;
+  }
+  const aiCommand = {
+    name: "ai-complete",
+    keyCommand: "ai-complete",
+    buttonProps: { "aria-label": "AI \u8865\u5168", title: "AI \u8865\u5168", className: "fc-md-ai-btn" },
+    icon: /* @__PURE__ */ jsx20("span", { children: "AI" }),
+    execute: () => onAiComplete?.()
+  };
+  const splitCommand = {
+    name: "split-view",
+    keyCommand: "split-view",
+    buttonProps: {
+      "aria-label": showSplit ? "\u7EAF\u7F16\u8F91" : "\u53CC\u680F\u9884\u89C8",
+      title: showSplit ? "\u7EAF\u7F16\u8F91" : "\u53CC\u680F\u9884\u89C8",
+      className: `fc-md-split-btn${showSplit ? " fc-md-split-btn--active" : ""}`
+    },
+    icon: /* @__PURE__ */ jsx20("span", { className: "fc-md-split-icon", children: "\u229F" }),
+    execute: () => setShowSplit((p) => !p)
+  };
+  const extraCommands = [
+    splitCommand,
+    ...onAiComplete ? [commands.divider, aiCommand] : [],
+    withTitle(commands.fullscreen, "\u5168\u5C4F")
+  ];
+  const editorPreview = mode === "preview" ? "preview" : showSplit ? "live" : "edit";
+  return /* @__PURE__ */ jsx20(
+    "div",
+    {
+      className: "fc-md-wrap",
+      style: overrideStyle,
+      "data-color-mode": resolvedTheme,
+      children: /* @__PURE__ */ jsx20(
+        MDEditor,
+        {
+          value,
+          onChange: (v) => onChange(v ?? ""),
+          commands: TOOLBAR_COMMANDS,
+          extraCommands,
+          height: minHeight,
+          preview: editorPreview,
+          hideToolbar: mode === "preview",
+          visibleDragbar: false,
+          textareaProps: { placeholder }
+        }
+      )
     }
+  );
+}
+
+// src/components/ContextMenu/ContextMenuContext.tsx
+import { createContext as createContext4, useContext as useContext4, useEffect as useEffect11, useRef as useRef10, useState as useState16 } from "react";
+import { jsx as jsx21, jsxs as jsxs15 } from "react/jsx-runtime";
+var ContextMenuContext = createContext4(null);
+function ContextMenuProvider({
+  children,
+  background,
+  borderColor,
+  hoverBackground
+}) {
+  const [menu, setMenu] = useState16({
+    visible: false,
+    x: 0,
+    y: 0,
+    items: []
+  });
+  const menuRef = useRef10(null);
+  const showContextMenu = (e, items) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setMenu({ visible: true, x: e.clientX, y: e.clientY, items });
+  };
+  const hide = () => setMenu((s) => ({ ...s, visible: false }));
+  useClickOutside(menuRef, hide, menu.visible);
+  useEffect11(() => {
+    if (!menu.visible) return;
+    const onKeyDown = (e) => {
+      if (e.key === "Escape") hide();
+    };
+    window.addEventListener("keydown", onKeyDown);
+    return () => window.removeEventListener("keydown", onKeyDown);
+  }, [menu.visible]);
+  const getPosition = () => {
+    const W = window.innerWidth;
+    const H = window.innerHeight;
+    const menuW = 180;
+    const menuH = menu.items.length * 32 + 12;
+    return {
+      left: menu.x + menuW > W ? menu.x - menuW : menu.x,
+      top: menu.y + menuH > H ? menu.y - menuH : menu.y
+    };
+  };
+  const colorVars = {
+    "--ctx-bg": background,
+    "--ctx-border": borderColor,
+    "--ctx-item-hover-bg": hoverBackground
+  };
+  const overrideStyle = { ...getPosition() };
+  for (const [k, v] of Object.entries(colorVars)) {
+    if (v !== void 0) overrideStyle[k] = v;
+  }
+  return /* @__PURE__ */ jsxs15(ContextMenuContext.Provider, { value: { showContextMenu }, children: [
+    children,
+    menu.visible && /* @__PURE__ */ jsx21(
+      "ul",
+      {
+        ref: menuRef,
+        className: "fc-context-menu",
+        style: overrideStyle,
+        children: menu.items.map((item, i) => {
+          if ("type" in item && item.type === "divider") {
+            return /* @__PURE__ */ jsx21("li", { className: "fc-context-menu__divider" }, i);
+          }
+          const action = item;
+          return /* @__PURE__ */ jsxs15(
+            "li",
+            {
+              className: [
+                "fc-context-menu__item",
+                action.danger ? "fc-context-menu__item--danger" : "",
+                action.disabled ? "fc-context-menu__item--disabled" : ""
+              ].filter(Boolean).join(" "),
+              onPointerDown: (e) => e.stopPropagation(),
+              onClick: () => {
+                if (action.disabled) return;
+                action.onClick();
+                hide();
+              },
+              children: [
+                action.icon && /* @__PURE__ */ jsx21("span", { className: "fc-context-menu__icon", children: action.icon }),
+                /* @__PURE__ */ jsx21("span", { className: "fc-context-menu__label", children: action.label })
+              ]
+            },
+            i
+          );
+        })
+      }
+    )
+  ] });
+}
+var useContextMenu = () => useContext4(ContextMenuContext);
+
+// src/components/Chat/Chat.tsx
+import { useState as useState18, useRef as useRef11, useEffect as useEffect12, useCallback as useCallback11, useMemo as useMemo5 } from "react";
+
+// src/components/SmartMessage/SmartMessage.tsx
+import { useState as useState17, useCallback as useCallback10 } from "react";
+import { Fragment as Fragment4, jsx as jsx22, jsxs as jsxs16 } from "react/jsx-runtime";
+var SmartMessage = ({
+  id,
+  content,
+  role,
+  status,
+  toolName,
+  toolResult,
+  onCopy,
+  className = "",
+  style = {}
+}) => {
+  const [copied, setCopied] = useState17(false);
+  const handleCopy = useCallback10(async () => {
     try {
       await navigator.clipboard.writeText(content);
-      setCopiedMessageId(messageId);
-      setTimeout(() => {
-        setCopiedMessageId(null);
-      }, 2e3);
+      setCopied(true);
+      onCopy?.(content, role);
+      setTimeout(() => setCopied(false), 2e3);
     } catch (err) {
       console.error("\u590D\u5236\u5931\u8D25:", err);
-      if (err instanceof Error) {
-        if (err.name === "NotAllowedError") {
-          setCopyError("\u9700\u8981\u526A\u8D34\u677F\u6743\u9650\uFF0C\u8BF7\u5141\u8BB8\u540E\u91CD\u8BD5");
-        } else if (err.name === "SecurityError") {
-          setCopyError("\u51FA\u4E8E\u5B89\u5168\u539F\u56E0\uFF0C\u65E0\u6CD5\u590D\u5236\u5185\u5BB9");
-        } else {
-          setCopyError("\u590D\u5236\u5931\u8D25\uFF0C\u8BF7\u91CD\u8BD5");
-        }
-      } else {
-        setCopyError("\u590D\u5236\u5931\u8D25\uFF0C\u8BF7\u91CD\u8BD5");
-      }
-      setTimeout(() => {
-        setCopyError(null);
-      }, 3e3);
     }
-  }, []);
-  const handleSend = useCallback8(() => {
-    const trimmedMessage = inputValue.trim();
-    if (!trimmedMessage || disabled || loading || isSending) return;
-    if (trimmedMessage.length > maxInputLength) {
-      console.warn(`\u6D88\u606F\u8D85\u8FC7\u6700\u5927\u957F\u5EA6\u9650\u5236: ${maxInputLength}`);
-      return;
+  }, [content, role, onCopy]);
+  const getMessageClass = () => {
+    const baseClass = "fc-smart-message";
+    const roleClass = `fc-smart-message--${role}`;
+    const statusClass = status ? `fc-smart-message--${status}` : "";
+    return `${baseClass} ${roleClass} ${statusClass} ${className}`.trim();
+  };
+  const shouldShowCopyButton = () => {
+    return role === "user" || role === "assistant";
+  };
+  const renderContent2 = () => {
+    switch (role) {
+      case "tool":
+        return /* @__PURE__ */ jsxs16(Fragment4, { children: [
+          toolName && /* @__PURE__ */ jsxs16("div", { className: "fc-smart-message-tool-info", children: [
+            /* @__PURE__ */ jsx22("span", { className: "fc-smart-message-tool-icon", children: "\u{1F527}" }),
+            /* @__PURE__ */ jsx22("span", { className: "fc-smart-message-tool-name", children: toolName })
+          ] }),
+          /* @__PURE__ */ jsx22("div", { className: "fc-smart-message-content", children: /* @__PURE__ */ jsx22("pre", { className: "fc-smart-message-tool-result", children: (() => {
+            try {
+              return JSON.stringify(toolResult || content, null, 2);
+            } catch {
+              return "[\u5E8F\u5217\u5316\u5931\u8D25]";
+            }
+          })() }) })
+        ] });
+      case "system":
+        return /* @__PURE__ */ jsx22("div", { className: "fc-smart-message-content", children: /* @__PURE__ */ jsx22("div", { className: "fc-smart-message-text fc-smart-message-system-text", children: content }) });
+      default:
+        return /* @__PURE__ */ jsx22("div", { className: "fc-smart-message-content", children: /* @__PURE__ */ jsx22("div", { className: "fc-smart-message-text", children: content }) });
     }
-    setIsSending(true);
-    const sendPromise = onSendMessage?.(trimmedMessage);
-    if (sendPromise) {
-      void sendPromise.then(() => {
-        setInputValue("");
-        if (inputRef.current) {
-          inputRef.current.style.height = "auto";
-        }
-        if (isTyping) {
-          setIsTyping(false);
-          onTyping?.(false);
-        }
-      }).catch((error) => {
-        console.error("\u53D1\u9001\u6D88\u606F\u5931\u8D25:", error);
-      }).finally(() => {
-        setIsSending(false);
-      });
-    } else {
-      setInputValue("");
-      if (inputRef.current) {
-        inputRef.current.style.height = "auto";
-      }
-      if (isTyping) {
-        setIsTyping(false);
-        onTyping?.(false);
+  };
+  return /* @__PURE__ */ jsxs16("div", { className: getMessageClass(), style, "data-message-id": id, children: [
+    /* @__PURE__ */ jsx22("div", { className: "fc-smart-message-content-wrapper", children: renderContent2() }),
+    shouldShowCopyButton() && /* @__PURE__ */ jsx22(
+      "button",
+      {
+        className: "fc-smart-message-copy-btn",
+        onClick: handleCopy,
+        title: "\u590D\u5236\u5185\u5BB9",
+        children: copied ? /* @__PURE__ */ jsx22("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", children: /* @__PURE__ */ jsx22("path", { d: "M20 6L9 17L4 12", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }) : /* @__PURE__ */ jsx22("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", children: /* @__PURE__ */ jsx22("path", { d: "M16 1H4C2.9 1 2 1.9 2 3V17H4V3H16V1ZM19 5H8C6.9 5 6 5.9 6 7V21C6 22.1 6.9 23 8 23H19C20.1 23 21 22.1 21 21V7C21 5.9 20.1 5 19 5ZM19 21H8V7H19V21Z", fill: "currentColor" }) })
       }
-      setIsSending(false);
+    )
+  ] });
+};
+var SmartMessage_default = SmartMessage;
+
+// src/components/Chat/Chat.tsx
+import { jsx as jsx23, jsxs as jsxs17 } from "react/jsx-runtime";
+var Chat = ({
+  messages = [],
+  title = "\u6D41\u4E91AI",
+  loading = false,
+  conversations = [],
+  currentConversationId,
+  emptyText = "\u6682\u65E0\u5386\u53F2\u5BF9\u8BDD",
+  newConversationText = "\u65B0\u5EFA\u5BF9\u8BDD",
+  historyTitle = "\u5386\u53F2\u5BF9\u8BDD",
+  showHistoryButton = true,
+  showMinimizeButton = true,
+  showHeader = true,
+  showFooter = false,
+  autoScroll = true,
+  onSwitchConversation,
+  onNewConversation,
+  onDeleteConversation,
+  onMinimize,
+  onRestore,
+  onMessageCopy,
+  className = "",
+  style = {},
+  headerClassName = "",
+  headerStyle = {},
+  messagesClassName = "",
+  messagesStyle = {},
+  bubbleClassName = "",
+  height = "600px",
+  width
+}) => {
+  const [showHistory, setShowHistory] = useState18(false);
+  const [isMinimized, setIsMinimized] = useState18(false);
+  const messagesContainerRef = useRef11(null);
+  const messagesEndRef = useRef11(null);
+  const historyPanelRef = useRef11(null);
+  const currentConversation = useMemo5(
+    () => conversations.find((c) => c.id === currentConversationId),
+    [conversations, currentConversationId]
+  );
+  const currentTitle = currentConversation?.title || title;
+  useEffect12(() => {
+    if (autoScroll && messagesContainerRef.current && !showHistory && !isMinimized) {
+      messagesContainerRef.current.scrollTop = messagesContainerRef.current.scrollHeight;
     }
-  }, [inputValue, disabled, loading, isSending, onSendMessage, maxInputLength, isTyping, onTyping]);
-  const handleKeyDown = useCallback8((e) => {
-    if (e.key === "Enter" && !e.shiftKey && !e.nativeEvent.isComposing) {
-      e.preventDefault();
-      handleSend();
+  }, [messages, loading, showHistory, isMinimized, autoScroll]);
+  useClickOutside(historyPanelRef, () => setShowHistory(false), showHistory);
+  const handleDeleteConversation = useCallback11((conversationId) => {
+    onDeleteConversation?.(conversationId);
+  }, [onDeleteConversation]);
+  const handleMinimize = useCallback11(() => {
+    setIsMinimized(true);
+    onMinimize?.();
+  }, [onMinimize]);
+  const handleRestore = useCallback11(() => {
+    setIsMinimized(false);
+    onRestore?.();
+  }, [onRestore]);
+  const handleCopy = useCallback11((content) => {
+    const message = messages.find((m) => m.content === content);
+    if (message) {
+      onMessageCopy?.(message);
     }
-  }, [handleSend]);
-  const handleInputChange = useCallback8((e) => {
-    const value = e.target.value;
-    if (value.length <= maxInputLength) {
-      setInputValue(value);
-      e.target.style.height = "auto";
-      e.target.style.height = `${Math.min(e.target.scrollHeight, 100)}px`;
-      const hasContent = value.length > 0;
-      if (hasContent !== isTyping) {
-        setIsTyping(hasContent);
-        onTyping?.(hasContent);
+  }, [messages, onMessageCopy]);
+  const containerStyle = useMemo5(() => ({
+    height,
+    width,
+    ...style
+  }), [height, width, style]);
+  const renderSystemMessage = (message) => {
+    return /* @__PURE__ */ jsx23("div", { className: "system-message-container", children: /* @__PURE__ */ jsx23(
+      SmartMessage_default,
+      {
+        id: message.id,
+        content: message.content,
+        role: message.type,
+        timestamp: message.timestamp,
+        status: message.status,
+        toolName: message.toolName,
+        toolResult: message.toolResult,
+        onCopy: handleCopy,
+        className: bubbleClassName
       }
-    }
-  }, [maxInputLength, isTyping, onTyping]);
-  const formatTime = useCallback8((date) => {
-    return new Date(date).toLocaleTimeString("zh-CN", {
-      hour: "2-digit",
-      minute: "2-digit"
-    });
-  }, []);
-  const renderMessage = (message) => {
+    ) }, message.id);
+  };
+  const renderUserAssistantMessage = (message) => {
     const isUser = message.type === "user";
-    const isSystem = message.type === "system";
-    const isCopied = copiedMessageId === message.id;
-    if (isSystem) {
-      return /* @__PURE__ */ jsx19("div", { className: "chat-message-system", children: /* @__PURE__ */ jsx19("span", { className: "system-content", children: message.content }) }, message.id);
+    const showCopyButton = message.type === "user" || message.type === "assistant";
+    return /* @__PURE__ */ jsxs17(
+      "div",
+      {
+        className: `message-wrapper message-wrapper--${isUser ? "user" : "assistant"}`,
+        children: [
+          /* @__PURE__ */ jsx23(
+            SmartMessage_default,
+            {
+              id: message.id,
+              content: message.content,
+              role: message.type,
+              timestamp: message.timestamp,
+              status: message.status,
+              toolName: message.toolName,
+              toolResult: message.toolResult,
+              onCopy: handleCopy,
+              className: bubbleClassName
+            }
+          ),
+          showCopyButton && /* @__PURE__ */ jsx23("div", { className: `message-copy-wrapper message-copy-wrapper--${isUser ? "user" : "assistant"}`, children: /* @__PURE__ */ jsx23(
+            "button",
+            {
+              className: "message-copy-btn",
+              onClick: () => handleCopy(message.content),
+              title: "\u590D\u5236\u5185\u5BB9",
+              children: /* @__PURE__ */ jsx23("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", children: /* @__PURE__ */ jsx23(
+                "path",
+                {
+                  d: "M16 1H4C2.9 1 2 1.9 2 3V17H4V3H16V1ZM19 5H8C6.9 5 6 5.9 6 7V21C6 22.1 6.9 23 8 23H19C20.1 23 21 22.1 21 21V7C21 5.9 20.1 5 19 5ZM19 21H8V7H19V21Z",
+                  fill: "currentColor"
+                }
+              ) })
+            }
+          ) })
+        ]
+      },
+      message.id
+    );
+  };
+  const renderToolMessage = (message) => {
+    return /* @__PURE__ */ jsx23("div", { className: "tool-message-container", children: /* @__PURE__ */ jsx23(
+      SmartMessage_default,
+      {
+        id: message.id,
+        content: message.content,
+        role: message.type,
+        timestamp: message.timestamp,
+        status: message.status,
+        toolName: message.toolName,
+        toolResult: message.toolResult,
+        onCopy: handleCopy,
+        className: bubbleClassName
+      }
+    ) }, message.id);
+  };
+  const renderMessage = (message) => {
+    switch (message.type) {
+      case "system":
+        return renderSystemMessage(message);
+      case "tool":
+        return renderToolMessage(message);
+      default:
+        return renderUserAssistantMessage(message);
     }
-    return /* @__PURE__ */ jsxs14("div", { className: `chat-message ${isUser ? "user" : "assistant"}`, children: [
-      !isUser && /* @__PURE__ */ jsx19("div", { className: "message-avatar", children: assistantName[0] }),
-      /* @__PURE__ */ jsxs14("div", { className: "message-content-wrapper", children: [
-        /* @__PURE__ */ jsxs14("div", { className: "message-header", children: [
-          /* @__PURE__ */ jsx19("span", { className: "message-sender", children: isUser ? userName : assistantName }),
-          /* @__PURE__ */ jsx19("span", { className: "message-time", children: formatTime(message.timestamp) })
-        ] }),
-        /* @__PURE__ */ jsxs14("div", { className: "message-bubble", children: [
-          /* @__PURE__ */ jsx19("div", { className: "message-text", children: message.content }),
-          message.status === "sending" && /* @__PURE__ */ jsx19("span", { className: "message-status sending", children: "\u53D1\u9001\u4E2D..." }),
-          message.status === "error" && /* @__PURE__ */ jsx19("span", { className: "message-status error", children: "\u53D1\u9001\u5931\u8D25" })
+  };
+  if (isMinimized) {
+    return /* @__PURE__ */ jsx23("div", { className: `chat-container-minimized ${className}`, style: containerStyle, children: /* @__PURE__ */ jsx23("button", { className: "restore-btn-only", onClick: handleRestore, title: "\u5C55\u5F00", children: /* @__PURE__ */ jsx23("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", children: /* @__PURE__ */ jsx23("path", { d: "M12 5V19M5 12H19", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" }) }) }) });
+  }
+  return /* @__PURE__ */ jsxs17("div", { className: `chat-container ${className}`, style: containerStyle, children: [
+    showHeader && /* @__PURE__ */ jsxs17("div", { className: `chat-header ${headerClassName}`, style: headerStyle, children: [
+      /* @__PURE__ */ jsx23("div", { className: "chat-title", children: currentTitle }),
+      /* @__PURE__ */ jsxs17("div", { className: "chat-header-actions", children: [
+        showHistoryButton && /* @__PURE__ */ jsx23("button", { className: "history-btn", onClick: () => setShowHistory(!showHistory), title: "\u5386\u53F2\u5BF9\u8BDD", children: /* @__PURE__ */ jsxs17("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", children: [
+          /* @__PURE__ */ jsx23("path", { d: "M12 8V12L15 15", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" }),
+          /* @__PURE__ */ jsx23("circle", { cx: "12", cy: "12", r: "9", stroke: "currentColor", strokeWidth: "2" })
+        ] }) }),
+        showMinimizeButton && /* @__PURE__ */ jsx23("button", { className: "minimize-btn", onClick: handleMinimize, title: "\u6700\u5C0F\u5316", children: /* @__PURE__ */ jsx23("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", children: /* @__PURE__ */ jsx23("path", { d: "M5 12H19", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" }) }) })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs17("div", { className: `chat-messages ${messagesClassName}`, ref: messagesContainerRef, style: messagesStyle, children: [
+      messages.map((message) => renderMessage(message)),
+      loading && /* @__PURE__ */ jsx23("div", { className: "typing-wrapper", children: /* @__PURE__ */ jsxs17("div", { className: "typing-indicator", children: [
+        /* @__PURE__ */ jsx23("span", {}),
+        /* @__PURE__ */ jsx23("span", {}),
+        /* @__PURE__ */ jsx23("span", {})
+      ] }) }),
+      /* @__PURE__ */ jsx23("div", { ref: messagesEndRef })
+    ] }),
+    showFooter && /* @__PURE__ */ jsx23("div", { className: "chat-footer" }),
+    showHistory && /* @__PURE__ */ jsxs17("div", { className: "history-panel", ref: historyPanelRef, children: [
+      /* @__PURE__ */ jsxs17("div", { className: "history-header", children: [
+        /* @__PURE__ */ jsx23("h3", { children: historyTitle }),
+        /* @__PURE__ */ jsx23("button", { className: "close-history-btn", onClick: () => setShowHistory(false), children: "\u2715" })
+      ] }),
+      /* @__PURE__ */ jsxs17("div", { className: "history-list", children: [
+        /* @__PURE__ */ jsxs17("button", { className: "new-conversation-btn-large", onClick: () => {
+          onNewConversation?.();
+          setShowHistory(false);
+        }, children: [
+          /* @__PURE__ */ jsx23("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", children: /* @__PURE__ */ jsx23("path", { d: "M12 5V19M5 12H19", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" }) }),
+          /* @__PURE__ */ jsx23("span", { children: newConversationText })
         ] }),
-        enableCopy && /* @__PURE__ */ jsx19(
-          "button",
+        conversations.length === 0 ? /* @__PURE__ */ jsx23("div", { className: "empty-history", children: /* @__PURE__ */ jsx23("p", { children: emptyText }) }) : conversations.map((conv) => /* @__PURE__ */ jsxs17(
+          "div",
           {
-            className: `copy-btn ${isCopied ? "copied" : ""}`,
-            onClick: () => handleCopyMessage(message.id, message.content),
-            title: isCopied ? "\u5DF2\u590D\u5236" : "\u590D\u5236\u5185\u5BB9",
-            "aria-label": isCopied ? "\u5DF2\u590D\u5236" : "\u590D\u5236\u5185\u5BB9",
-            children: isCopied ? /* @__PURE__ */ jsxs14(Fragment3, { children: [
-              /* @__PURE__ */ jsx19("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: /* @__PURE__ */ jsx19("path", { d: "M20 6L9 17L4 12", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) }),
-              /* @__PURE__ */ jsx19("span", { children: "\u5DF2\u590D\u5236" })
-            ] }) : /* @__PURE__ */ jsxs14(Fragment3, { children: [
-              /* @__PURE__ */ jsxs14("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
-                /* @__PURE__ */ jsx19("rect", { x: "9", y: "9", width: "13", height: "13", rx: "2", stroke: "currentColor", strokeWidth: "2" }),
-                /* @__PURE__ */ jsx19("path", { d: "M5 15H4C2.9 15 2 14.1 2 13V4C2 2.9 2.9 2 4 2H13C14.1 2 15 2.9 15 4V5", stroke: "currentColor", strokeWidth: "2" })
+            className: `history-item ${currentConversationId === conv.id ? "active" : ""}`,
+            onClick: () => {
+              onSwitchConversation?.(conv.id);
+              setShowHistory(false);
+            },
+            children: [
+              /* @__PURE__ */ jsxs17("div", { className: "history-item-content", children: [
+                /* @__PURE__ */ jsx23("div", { className: "history-item-title", children: /* @__PURE__ */ jsx23("span", { children: conv.title }) }),
+                /* @__PURE__ */ jsx23("div", { className: "history-item-preview", children: conv.lastMessage }),
+                /* @__PURE__ */ jsxs17("div", { className: "history-item-meta", children: [
+                  /* @__PURE__ */ jsx23("span", { children: new Date(conv.timestamp).toLocaleDateString() }),
+                  /* @__PURE__ */ jsxs17("span", { children: [
+                    conv.messages.length,
+                    "\u6761\u6D88\u606F"
+                  ] })
+                ] })
               ] }),
-              /* @__PURE__ */ jsx19("span", { children: "\u590D\u5236" })
-            ] })
-          }
-        )
+              /* @__PURE__ */ jsx23("div", { className: "history-item-actions", children: /* @__PURE__ */ jsx23(
+                "button",
+                {
+                  className: "delete-conversation-btn",
+                  onClick: (e) => {
+                    e.stopPropagation();
+                    handleDeleteConversation(conv.id);
+                  },
+                  title: "\u5220\u9664\u5BF9\u8BDD",
+                  children: /* @__PURE__ */ jsxs17("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", children: [
+                    /* @__PURE__ */ jsx23("path", { d: "M3 6H21", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round" }),
+                    /* @__PURE__ */ jsx23("path", { d: "M19 6V20C19 21.1 18.1 22 17 22H7C5.9 22 5 21.1 5 20V6", stroke: "currentColor", strokeWidth: "2" }),
+                    /* @__PURE__ */ jsx23("path", { d: "M8 6V4C8 2.9 8.9 2 10 2H14C15.1 2 16 2.9 16 4V6", stroke: "currentColor", strokeWidth: "2" })
+                  ] })
+                }
+              ) })
+            ]
+          },
+          conv.id
+        ))
       ] })
-    ] }, message.id);
+    ] })
+  ] });
+};
+
+// src/components/Relation/Relation.tsx
+import { useCallback as useCallback12, useEffect as useEffect13 } from "react";
+import {
+  ReactFlow,
+  useNodesState,
+  useEdgesState,
+  addEdge,
+  Handle,
+  Position,
+  MarkerType,
+  ConnectionLineType,
+  useReactFlow,
+  ReactFlowProvider
+} from "@xyflow/react";
+import "@xyflow/react/dist/style.css";
+import { jsx as jsx24, jsxs as jsxs18 } from "react/jsx-runtime";
+var getIconEmoji = (iconType) => {
+  const map = {
+    war: "\u2694\uFE0F",
+    target: "\u{1F3AF}",
+    star: "\u2B50",
+    award: "\u{1F3C6}",
+    flag: "\u{1F6A9}",
+    default: "\u{1F465}",
+    user: "\u{1F464}",
+    shield: "\u{1F6E1}\uFE0F"
   };
-  return /* @__PURE__ */ jsxs14("div", { className: `chat-container ${currentTheme}`, style: { height }, children: [
-    showHeader && /* @__PURE__ */ jsxs14("div", { className: "chat-header", children: [
-      /* @__PURE__ */ jsx19("div", { className: "chat-title", children: title }),
-      /* @__PURE__ */ jsxs14("div", { className: "chat-status", children: [
-        (loading || isSending) && /* @__PURE__ */ jsx19("span", { className: "status-dot" }),
-        /* @__PURE__ */ jsx19("span", { children: loading || isSending ? "AI \u6B63\u5728\u601D\u8003..." : "\u5728\u7EBF" })
-      ] })
-    ] }),
-    /* @__PURE__ */ jsxs14("div", { className: "chat-messages", children: [
-      messages.map(renderMessage),
-      (loading || isSending) && /* @__PURE__ */ jsxs14("div", { className: "chat-message assistant", children: [
-        /* @__PURE__ */ jsx19("div", { className: "message-avatar", children: assistantName[0] }),
-        /* @__PURE__ */ jsxs14("div", { className: "message-content-wrapper", children: [
-          /* @__PURE__ */ jsx19("div", { className: "message-header", children: /* @__PURE__ */ jsx19("span", { className: "message-sender", children: assistantName }) }),
-          /* @__PURE__ */ jsx19("div", { className: "message-bubble", children: /* @__PURE__ */ jsxs14("div", { className: "typing-indicator", children: [
-            /* @__PURE__ */ jsx19("span", {}),
-            /* @__PURE__ */ jsx19("span", {}),
-            /* @__PURE__ */ jsx19("span", {})
-          ] }) })
-        ] })
+  return map[iconType || "default"] || "\u{1F465}";
+};
+var getStatusColor = (status) => {
+  const map = {
+    active: "#10b981",
+    inactive: "#6b7280",
+    warning: "#f59e0b"
+  };
+  return map[status || "active"];
+};
+var CustomNode = ({ data, theme = "light" }) => {
+  const isDark = theme === "dark";
+  const nodeStyle = {
+    background: isDark ? "linear-gradient(135deg, #1e293b 0%, #0f172a 100%)" : "linear-gradient(135deg, #ffffff 0%, #f8fafc 100%)",
+    border: `2px solid ${isDark ? "rgba(255, 255, 255, 0.12)" : "rgba(0, 0, 0, 0.08)"}`,
+    borderRadius: "14px",
+    boxShadow: isDark ? "0 8px 20px rgba(0, 0, 0, 0.25)" : "0 4px 12px rgba(0, 0, 0, 0.08)",
+    minWidth: "240px",
+    cursor: "pointer",
+    transition: "all 0.3s cubic-bezier(0.4, 0, 0.2, 1)"
+  };
+  const iconStyle = {
+    width: "52px",
+    height: "52px",
+    borderRadius: "14px",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    background: isDark ? "rgba(255, 255, 255, 0.08)" : "rgba(0, 0, 0, 0.04)",
+    transition: "all 0.3s ease"
+  };
+  const titleStyle = {
+    fontWeight: 700,
+    fontSize: "15px",
+    marginBottom: "4px",
+    whiteSpace: "nowrap",
+    overflow: "hidden",
+    textOverflow: "ellipsis",
+    color: isDark ? "#ffffff" : "#1e293b"
+  };
+  const subtitleStyle = {
+    fontSize: "11px",
+    fontWeight: 500,
+    marginBottom: "2px",
+    color: isDark ? "rgba(255, 255, 255, 0.7)" : "#64748b"
+  };
+  const descriptionStyle = {
+    fontSize: "10px",
+    marginTop: "6px",
+    whiteSpace: "nowrap",
+    overflow: "hidden",
+    textOverflow: "ellipsis",
+    color: isDark ? "rgba(255, 255, 255, 0.45)" : "#94a3b8"
+  };
+  return /* @__PURE__ */ jsxs18("div", { style: nodeStyle, children: [
+    /* @__PURE__ */ jsx24(Handle, { type: "target", position: Position.Top, isConnectable: true }),
+    /* @__PURE__ */ jsxs18("div", { style: { display: "flex", alignItems: "center", gap: "14px", padding: "14px 18px" }, children: [
+      /* @__PURE__ */ jsxs18("div", { style: { position: "relative", flexShrink: 0 }, children: [
+        /* @__PURE__ */ jsx24("div", { style: iconStyle, children: data.imageUrl ? /* @__PURE__ */ jsx24("img", { src: data.imageUrl, alt: data.title, style: { width: "100%", height: "100%", objectFit: "cover", borderRadius: "12px" } }) : /* @__PURE__ */ jsx24("span", { style: { fontSize: "28px" }, children: getIconEmoji(data.iconType) }) }),
+        data.status && /* @__PURE__ */ jsx24("div", { style: {
+          position: "absolute",
+          bottom: "-2px",
+          right: "-2px",
+          width: "12px",
+          height: "12px",
+          borderRadius: "50%",
+          border: `2px solid ${isDark ? "#1e293b" : "#ffffff"}`,
+          backgroundColor: getStatusColor(data.status)
+        } })
       ] }),
-      /* @__PURE__ */ jsx19("div", { ref: messagesEndRef })
+      /* @__PURE__ */ jsxs18("div", { style: { flex: 1, minWidth: 0 }, children: [
+        /* @__PURE__ */ jsx24("div", { style: titleStyle, children: data.title }),
+        /* @__PURE__ */ jsx24("div", { style: subtitleStyle, children: data.subtitle }),
+        data.description && /* @__PURE__ */ jsx24("div", { style: descriptionStyle, children: data.description })
+      ] })
     ] }),
-    copyError && /* @__PURE__ */ jsx19("div", { className: "copy-error-toast", children: copyError }),
-    showFooter && /* @__PURE__ */ jsxs14("div", { className: "chat-footer", children: [
-      /* @__PURE__ */ jsxs14("div", { className: "chat-input-wrapper", children: [
-        /* @__PURE__ */ jsx19(
-          "textarea",
-          {
-            ref: inputRef,
-            className: "chat-input",
-            value: inputValue,
-            onChange: handleInputChange,
-            onKeyDown: handleKeyDown,
-            placeholder,
-            disabled: disabled || loading || isSending,
-            rows: 1,
-            maxLength: maxInputLength,
-            spellCheck: false,
-            autoCorrect: "off",
-            autoCapitalize: "off",
-            autoComplete: "off"
-          }
-        ),
-        /* @__PURE__ */ jsx19(
-          "button",
+    /* @__PURE__ */ jsx24(Handle, { type: "source", position: Position.Bottom, isConnectable: true })
+  ] });
+};
+var nodeTypes = {
+  custom: CustomNode
+};
+var RelationContent = ({
+  nodes: propNodes,
+  edges: propEdges,
+  onNodeClick,
+  onNodeDoubleClick,
+  onEdgeClick,
+  onConnect: onConnectProp,
+  onNodesChange: onNodesChangeProp,
+  onEdgesChange: onEdgesChangeProp,
+  fitView = true,
+  fitViewOptions,
+  className = "",
+  style = {},
+  height = "70vh",
+  width = "100%",
+  defaultViewport = { x: 0, y: 0, zoom: 1 },
+  minZoom = 0.5,
+  maxZoom = 2,
+  snapToGrid = false,
+  snapGrid = [15, 15],
+  enableEdgeCreation = true,
+  enableNodeDrag = true,
+  onNodeContextMenu,
+  theme: propTheme = "light"
+}) => {
+  const [nodes, , onNodesChange] = useNodesState(propNodes || []);
+  const [edges, setEdges, onEdgesChange] = useEdgesState(propEdges || []);
+  const { fitView: fitViewFn } = useReactFlow();
+  const theme = propTheme;
+  const isDark = theme === "dark";
+  const bgColor = isDark ? "#0f172a" : "#f5f7fa";
+  useEffect13(() => {
+    if (fitView && fitViewFn && (propNodes?.length || 0) > 0) {
+      setTimeout(() => {
+        fitViewFn({ duration: 300, ...fitViewOptions }).catch((error) => {
+          console.warn("Fit view failed:", error);
+        });
+      }, 100);
+    }
+  }, [fitView, fitViewFn, fitViewOptions, propNodes]);
+  const handleNodesChange = useCallback12(
+    (changes) => {
+      onNodesChange(changes);
+      if (onNodesChangeProp) {
+        onNodesChangeProp(nodes);
+      }
+    },
+    [onNodesChange, onNodesChangeProp, nodes]
+  );
+  const handleEdgesChange = useCallback12(
+    (changes) => {
+      onEdgesChange(changes);
+      if (onEdgesChangeProp) {
+        onEdgesChangeProp(edges);
+      }
+    },
+    [onEdgesChange, onEdgesChangeProp, edges]
+  );
+  const onConnect = useCallback12(
+    (params) => {
+      const newEdge = {
+        ...params,
+        id: `edge-${Date.now()}-${Math.random()}`,
+        type: "smoothstep",
+        style: { stroke: "#ff6b6b", strokeWidth: 2 },
+        markerEnd: { type: MarkerType.ArrowClosed, color: "#ff6b6b" },
+        label: "\u65B0\u8FDE\u63A5"
+      };
+      setEdges((eds) => addEdge(newEdge, eds));
+      if (onConnectProp) {
+        onConnectProp(params);
+      }
+    },
+    [setEdges, onConnectProp]
+  );
+  const handleNodeClick = useCallback12(
+    (_event, node) => {
+      if (onNodeClick && node.data) {
+        onNodeClick(node.id, node.data, _event);
+      }
+    },
+    [onNodeClick]
+  );
+  const handleNodeDoubleClick = useCallback12(
+    (_event, node) => {
+      if (onNodeDoubleClick && node.data) {
+        onNodeDoubleClick(node.id, node.data);
+      }
+    },
+    [onNodeDoubleClick]
+  );
+  const handleNodeContextMenu = useCallback12(
+    (event, node) => {
+      event.preventDefault();
+      if (onNodeContextMenu && node.data) {
+        onNodeContextMenu(node.id, node.data);
+      }
+    },
+    [onNodeContextMenu]
+  );
+  const handleEdgeClick = useCallback12(
+    (_event, edge) => {
+      if (onEdgeClick) {
+        onEdgeClick(edge.id, edge.data);
+      }
+    },
+    [onEdgeClick]
+  );
+  const nodesWithTheme = nodes.map((node) => ({
+    ...node,
+    data: { ...node.data, theme }
+  }));
+  const globalStyle = `
+    .react-flow__background,
+    .react-flow__pane,
+    .react-flow__renderer,
+    .react-flow__viewport {
+      background-color: ${bgColor} !important;
+    }
+  `;
+  return /* @__PURE__ */ jsxs18(
+    "div",
+    {
+      className: `relation-container ${className}`,
+      style: {
+        width,
+        height,
+        ...style,
+        position: "relative",
+        overflow: "hidden",
+        backgroundColor: bgColor
+      },
+      children: [
+        /* @__PURE__ */ jsx24("style", { children: globalStyle }),
+        /* @__PURE__ */ jsx24(
+          ReactFlow,
           {
-            className: `chat-send-btn ${!inputValue.trim() || disabled || loading || isSending ? "disabled" : ""}`,
-            onClick: handleSend,
-            disabled: !inputValue.trim() || disabled || loading || isSending,
-            children: "\u53D1\u9001"
+            nodes: nodesWithTheme,
+            edges,
+            onNodesChange: handleNodesChange,
+            onEdgesChange: handleEdgesChange,
+            onConnect: enableEdgeCreation ? onConnect : void 0,
+            onNodeClick: handleNodeClick,
+            onNodeDoubleClick: handleNodeDoubleClick,
+            onNodeContextMenu: handleNodeContextMenu,
+            onEdgeClick: handleEdgeClick,
+            nodeTypes,
+            fitView: false,
+            fitViewOptions,
+            defaultViewport,
+            minZoom,
+            maxZoom,
+            snapToGrid,
+            snapGrid,
+            nodesDraggable: enableNodeDrag,
+            nodesConnectable: enableEdgeCreation,
+            connectionLineType: ConnectionLineType.SmoothStep,
+            connectionLineStyle: { stroke: "#ff6b6b", strokeWidth: 2 },
+            attributionPosition: "bottom-right",
+            zoomOnScroll: true,
+            zoomOnPinch: true,
+            zoomOnDoubleClick: false,
+            panOnScroll: false,
+            panOnDrag: true,
+            proOptions: { hideAttribution: true }
           }
         )
-      ] }),
-      /* @__PURE__ */ jsxs14("div", { className: "chat-tips", children: [
-        /* @__PURE__ */ jsx19("span", { children: "\u6309 Enter \u53D1\u9001\uFF0CShift + Enter \u6362\u884C" }),
-        maxInputLength && /* @__PURE__ */ jsxs14("span", { className: "char-count", children: [
-          inputValue.length,
-          "/",
-          maxInputLength
-        ] })
-      ] })
-    ] })
-  ] });
+      ]
+    }
+  );
+};
+var Relation = (props) => {
+  return /* @__PURE__ */ jsx24(ReactFlowProvider, { children: /* @__PURE__ */ jsx24(RelationContent, { ...props }) });
 };
 export {
   AlertProvider,
@@ -2233,16 +3245,21 @@ export {
   Card,
   Chat,
   CheckButton,
+  ContextMenuProvider,
   DeleteDialog,
   Input,
   ListGroup,
   ListGroupItem,
+  MarkdownEditor,
   OrphanDialog,
+  Relation,
   RollingBox,
   Select,
   SideBar,
   Slider,
-  Tabs,
+  SmartMessage,
+  TabBar,
+  TagItem,
   ThemeProvider,
   Tree,
   VirtualList,
@@ -2251,5 +3268,6 @@ export {
   isDescendantOf,
   lazyLoad,
   useAlert,
+  useContextMenu,
   useTheme
 };