flowcloudai-ui 0.1.7 → 0.1.8

package/dist/index.css

@@ -467,7 +467,7 @@
   display: flex;
   flex-direction: column;
   width: var(--sidebar-width);
-  height: 100vh;
+  height: 100%;
   background: var(--fc-color-bg-secondary);
   border-right: 1px solid var(--fc-color-border);
   overflow: hidden;
@@ -507,6 +507,7 @@
   padding: var(--fc-space-sm, 8px) 0;
 }
 .fc-sidebar__footer {
+  flex-shrink: 0;
   padding: var(--fc-space-sm, 8px) 0;
   border-top: 1px solid var(--fc-color-border);
 }
@@ -2037,10 +2038,13 @@
   -webkit-app-region: no-drag;
 }
 .fc-tab-bar__tab--draggable {
-  cursor: default;
+  cursor: grab;
+  will-change: transform;
 }
 .fc-tab-bar__tab--dragging {
   opacity: 0.4;
+  cursor: grabbing;
+  z-index: 1;
 }
 .fc-tab-bar__tab-close {
   display: inline-flex;
@@ -2074,7 +2078,7 @@
   color: var(--fc-color-text-secondary);
   cursor: pointer;
   transition: all var(--fc-transition, 150ms ease);
-  border-radius: var(--fc-radius-sm, 4px);
+  border-radius: var(--fc-radius-sm, 2px);
   background-color: var(--tab-bar-bg);
 }
 .fc-tab-bar__add-btn:hover {

package/dist/index.d.ts

@@ -1,6 +1,6 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React$1 from 'react';
-import React__default, { ReactNode, ComponentType, FC, MouseEvent, CSSProperties } from 'react';
+import React__default, { ReactNode, ComponentType, FC } from 'react';
 
 type Theme = 'light' | 'dark' | 'system';
 interface ThemeContextType {
@@ -455,17 +455,17 @@ interface TabBarProps {
     /** 是否启用拖拽排序 */
     draggable?: boolean;
     /**
-     * Tab 最小宽度比例（相对 screen.width）。
+     * Tab 最小宽度，支持任意 CSS 长度值（如 "8rem"、"120px"）。
      * Tab 压缩至此宽度后触发横向滚动。
-     * @default 0.07
+     * @default "80px"
      */
-    minWidthRatio?: number;
+    minTabWidth?: string;
     /**
-     * Tab 最大宽度比例（相对 screen.width）。
+     * Tab 最大宽度，支持任意 CSS 长度值（如 "16rem"、"200px"）。
      * Tab 较少时不超过此宽度。
-     * @default 0.15
+     * @default "200px"
      */
-    maxTabWidthRatio?: number;
+    maxTabWidth?: string;
     /**
      * 控制 Tab 是否自动填充容器宽度。
      * - true: flex: 1 1 0，Tab 会自动拉伸填满导航栏（默认行为）
@@ -641,59 +641,32 @@ interface ChatProps {
 declare const Chat: React__default.FC<ChatProps>;
 
 interface RelationNodeData {
-    iconType?: 'war' | 'target' | 'star' | 'award' | 'flag' | 'default' | 'user' | 'shield';
-    title: string;
-    subtitle: string;
+    id: string;
+    name: string;
+    type?: 'person' | 'organization' | 'event' | 'location' | 'concept';
     description?: string;
-    imageUrl?: string;
-    status?: 'active' | 'inactive' | 'warning';
-    metadata?: Record<string, any>;
+    avatar?: string;
+    importance?: number;
 }
 interface RelationEdgeData {
+    source: string;
+    target: string;
     label?: string;
-    type?: 'solid' | 'dashed' | 'dotted';
-    color?: string;
-    animated?: boolean;
-    metadata?: Record<string, any>;
+    type?: 'friend' | 'enemy' | 'subordinate' | 'superior' | 'neutral';
+    strength?: number;
 }
 interface RelationProps {
-    nodes?: any[];
-    edges?: any[];
-    onNodeClick?: (nodeId: string, nodeData: RelationNodeData, event?: MouseEvent) => void;
-    onNodeDoubleClick?: (nodeId: string, nodeData: RelationNodeData) => void;
-    onEdgeClick?: (edgeId: string, edgeData?: RelationEdgeData) => void;
-    onConnect?: (connection: any) => void;
-    onNodesChange?: (nodes: any[]) => void;
-    onEdgesChange?: (edges: any[]) => void;
-    fitView?: boolean;
-    fitViewOptions?: any;
-    className?: string;
-    style?: CSSProperties;
-    height?: string | number;
-    width?: string | number;
-    defaultViewport?: {
-        x: number;
-        y: number;
-        zoom: number;
+    data?: {
+        nodes: RelationNodeData[];
+        edges: RelationEdgeData[];
     };
-    minZoom?: number;
-    maxZoom?: number;
-    snapToGrid?: boolean;
-    snapGrid?: [number, number];
-    enableEdgeCreation?: boolean;
-    enableNodeDrag?: boolean;
-    onNodeContextMenu?: (nodeId: string, nodeData: RelationNodeData) => void;
+    onNodeClick?: (node: RelationNodeData) => void;
+    onEdgeClick?: (edge: RelationEdgeData) => void;
     theme?: 'dark' | 'light';
-    edgeStyles?: {
-        defaultColor?: string;
-        hoverColor?: string;
-        selectedColor?: string;
-    };
-    nodeStyles?: {
-        borderRadius?: string;
-        minWidth?: string;
-    };
-    showHandles?: boolean;
+    height?: string | number;
+    width?: string | number;
+    className?: string;
+    style?: React__default.CSSProperties;
 }
 declare const Relation: FC<RelationProps>;
 

package/dist/index.js

@@ -2025,8 +2025,37 @@ var Card = ({
 };
 
 // src/components/Bar/TabBar.tsx
-import { useRef as useRef7, useCallback as useCallback8, memo as memo4, useEffect as useEffect8 } from "react";
+import { useRef as useRef7, useCallback as useCallback8, memo as memo4, useEffect as useEffect8, useMemo as useMemo5 } from "react";
+import {
+  DndContext as DndContext2,
+  closestCenter,
+  PointerSensor as PointerSensor2,
+  useSensor as useSensor2,
+  useSensors as useSensors2
+} from "@dnd-kit/core";
+import {
+  SortableContext,
+  useSortable,
+  horizontalListSortingStrategy,
+  arrayMove
+} from "@dnd-kit/sortable";
+import { CSS } from "@dnd-kit/utilities";
 import { jsx as jsx18, jsxs as jsxs13 } from "react/jsx-runtime";
+function useContainerBoundModifier(containerRef) {
+  return useMemo5(() => ({ transform, activeNodeRect }) => {
+    if (!containerRef.current || !activeNodeRect) {
+      return { ...transform, y: 0 };
+    }
+    const { left, right } = containerRef.current.getBoundingClientRect();
+    const minX = left - activeNodeRect.left;
+    const maxX = right - activeNodeRect.right;
+    return {
+      ...transform,
+      y: 0,
+      x: Math.min(Math.max(transform.x, minX), maxX)
+    };
+  }, [containerRef]);
+}
 var TabItemView = memo4(({
   item,
   isActive,
@@ -2038,36 +2067,44 @@ var TabItemView = memo4(({
   activeTabStyle,
   renderCloseIcon,
   onClick,
-  onClose,
-  onDragStart,
-  onDragOver,
-  onDrop,
-  onDragEnd
+  onClose
 }) => {
+  const {
+    attributes,
+    listeners,
+    setNodeRef,
+    transform,
+    transition,
+    isDragging
+  } = useSortable({
+    id: item.key,
+    disabled: !draggable || !!item.disabled
+  });
   const showClose = item.closable !== void 0 ? item.closable : closable;
   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",
+    isDragging && "fc-tab-bar__tab--dragging",
     tabClassName,
     isActive && activeTabClassName
   ].filter(Boolean).join(" ");
   const mergedStyle = {
+    transform: CSS.Transform.toString(transform),
+    transition,
     ...tabStyle,
     ...isActive ? activeTabStyle : void 0
   };
   return /* @__PURE__ */ jsxs13(
     "div",
     {
+      ref: setNodeRef,
       className: classes,
       style: mergedStyle,
       onClick: () => !item.disabled && onClick(item.key),
-      draggable: draggable && !item.disabled,
-      onDragStart: (e) => onDragStart(e, item.key),
-      onDragOver,
-      onDrop: (e) => onDrop(e, item.key),
-      onDragEnd,
+      ...attributes,
+      ...listeners,
       role: "tab",
       "aria-selected": isActive,
       "aria-disabled": item.disabled,
@@ -2078,6 +2115,7 @@ var TabItemView = memo4(({
           "span",
           {
             className: "fc-tab-bar__tab-close",
+            onPointerDown: (e) => e.stopPropagation(),
             onClick: (e) => onClose(e, item.key),
             role: "button",
             "aria-label": "\u5173\u95ED",
@@ -2098,8 +2136,8 @@ var TabBar = memo4(({
   closable = false,
   addable = false,
   draggable = false,
-  minWidthRatio = 0.07,
-  maxTabWidthRatio = 0.15,
+  minTabWidth = "80px",
+  maxTabWidth = "200px",
   fillWidth = true,
   onChange,
   onClose,
@@ -2138,8 +2176,8 @@ var TabBar = memo4(({
     }
   }
   const mergedStyle = { ...overrideStyle, ...style };
-  const dragKeyRef = useRef7(null);
   const navRef = useRef7(null);
+  const boundModifier = useContainerBoundModifier(navRef);
   const prevItemsLengthRef = useRef7(items.length);
   useEffect8(() => {
     const prev = prevItemsLengthRef.current;
@@ -2173,38 +2211,19 @@ var TabBar = memo4(({
     },
     [onClose]
   );
-  const handleDragStart = useCallback8(
-    (e, key) => {
-      dragKeyRef.current = key;
-      e.dataTransfer.effectAllowed = "move";
-      const target = e.currentTarget;
-      requestAnimationFrame(() => target.classList.add("fc-tab-bar__tab--dragging"));
-    },
-    []
+  const sensors = useSensors2(
+    useSensor2(PointerSensor2, {
+      activationConstraint: { distance: 5 }
+    })
   );
-  const handleDragOver = useCallback8((e) => {
-    e.preventDefault();
-    e.dataTransfer.dropEffect = "move";
-  }, []);
-  const handleDrop = useCallback8(
-    (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 = useCallback8((e) => {
-    dragKeyRef.current = null;
-    e.currentTarget.classList.remove("fc-tab-bar__tab--dragging");
-  }, []);
+  const handleDragEnd = useCallback8((event) => {
+    const { active, over } = event;
+    if (!over || active.id === over.id || !onReorder) return;
+    const fromIndex = items.findIndex((i) => i.key === active.id);
+    const toIndex = items.findIndex((i) => i.key === over.id);
+    if (fromIndex === -1 || toIndex === -1) return;
+    onReorder(arrayMove(items, fromIndex, toIndex));
+  }, [items, onReorder]);
   const rootClasses = [
     "fc-tab-bar",
     `fc-tab-bar--${variant}`,
@@ -2213,33 +2232,46 @@ var TabBar = memo4(({
     className
   ].filter(Boolean).join(" ");
   const navWrapStyle = {
-    "--tab-min-width": `${Math.round(screen.width * minWidthRatio)}px`,
-    "--tab-max-width": `${Math.round(screen.width * maxTabWidthRatio)}px`,
+    "--tab-min-width": minTabWidth,
+    "--tab-max-width": maxTabWidth,
     "--tab-fill-width": fillWidth ? "1" : "0"
   };
   const dragRegion = tauriDragRegion ? { "data-tauri-drag-region": "" } : {};
+  const tabItems = items.map((item) => /* @__PURE__ */ jsx18(
+    TabItemView,
+    {
+      item,
+      isActive: activeKey === item.key,
+      closable,
+      draggable,
+      tabClassName,
+      activeTabClassName,
+      tabStyle,
+      activeTabStyle,
+      renderCloseIcon,
+      onClick: handleClick,
+      onClose: handleClose
+    },
+    item.key
+  ));
   return /* @__PURE__ */ jsx18("div", { className: rootClasses, style: mergedStyle, role: "tablist", ...dragRegion, children: /* @__PURE__ */ jsx18("div", { className: "fc-tab-bar__nav-outer", ...dragRegion, children: /* @__PURE__ */ jsxs13("div", { className: "fc-tab-bar__nav-wrap", ref: navRef, style: navWrapStyle, children: [
-    items.map((item) => /* @__PURE__ */ jsx18(
-      TabItemView,
+    /* @__PURE__ */ jsx18(
+      DndContext2,
       {
-        item,
-        isActive: activeKey === item.key,
-        closable,
-        draggable,
-        tabClassName,
-        activeTabClassName,
-        tabStyle,
-        activeTabStyle,
-        renderCloseIcon,
-        onClick: handleClick,
-        onClose: handleClose,
-        onDragStart: handleDragStart,
-        onDragOver: handleDragOver,
-        onDrop: handleDrop,
-        onDragEnd: handleDragEnd
-      },
-      item.key
-    )),
+        sensors,
+        collisionDetection: closestCenter,
+        modifiers: [boundModifier],
+        onDragEnd: handleDragEnd,
+        children: /* @__PURE__ */ jsx18(
+          SortableContext,
+          {
+            items: items.map((i) => i.key),
+            strategy: horizontalListSortingStrategy,
+            children: tabItems
+          }
+        )
+      }
+    ),
     addable && /* @__PURE__ */ jsx18(
       "div",
       {
@@ -2555,7 +2587,7 @@ function ContextMenuProvider({
 var useContextMenu = () => useContext4(ContextMenuContext);
 
 // src/components/Chat/Chat.tsx
-import { useState as useState17, useRef as useRef10, useEffect as useEffect11, useCallback as useCallback10, useMemo as useMemo5 } from "react";
+import { useState as useState17, useRef as useRef10, useEffect as useEffect11, useCallback as useCallback10, useMemo as useMemo6 } from "react";
 
 // src/components/SmartMessage/SmartMessage.tsx
 import { useState as useState16, useCallback as useCallback9 } from "react";
@@ -2665,7 +2697,7 @@ var Chat = ({
   const messagesContainerRef = useRef10(null);
   const messagesEndRef = useRef10(null);
   const historyPanelRef = useRef10(null);
-  const currentConversation = useMemo5(
+  const currentConversation = useMemo6(
     () => conversations.find((c) => c.id === currentConversationId),
     [conversations, currentConversationId]
   );
@@ -2693,7 +2725,7 @@ var Chat = ({
       onMessageCopy?.(message);
     }
   }, [messages, onMessageCopy]);
-  const containerStyle = useMemo5(() => ({
+  const containerStyle = useMemo6(() => ({
     height,
     width,
     ...style
@@ -2865,484 +2897,353 @@ var Chat = ({
 };
 
 // src/components/Relation/Relation.tsx
-import React13, { useCallback as useCallback11, useEffect as useEffect12, memo as memo5 } from "react";
+import { useEffect as useEffect12, useState as useState18, useCallback as useCallback11, useRef as useRef11 } from "react";
 import {
   ReactFlow,
   useNodesState,
   useEdgesState,
-  addEdge,
-  Handle,
-  Position,
   MarkerType,
-  ConnectionLineType,
   useReactFlow,
-  ReactFlowProvider
+  ReactFlowProvider,
+  Background,
+  Position,
+  Handle
 } from "@xyflow/react";
 import "@xyflow/react/dist/style.css";
-import { Fragment as Fragment5, 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"
+import { jsx as jsx24, jsxs as jsxs18 } from "react/jsx-runtime";
+var getNodeColor = (type, isDark) => {
+  const colors = {
+    person: isDark ? "#60a5fa" : "#3b82f6",
+    organization: isDark ? "#34d399" : "#10b981",
+    event: isDark ? "#f472b6" : "#ec4899",
+    location: isDark ? "#fb923c" : "#f97316",
+    concept: isDark ? "#a78bfa" : "#8b5cf6",
+    default: isDark ? "#94a3b8" : "#64748b"
   };
-  return map[iconType || "default"] || "\u{1F465}";
+  return colors[type] || colors.default;
 };
-var getStatusColor = (status) => {
-  const map = {
-    active: "#10b981",
-    inactive: "#6b7280",
-    warning: "#f59e0b"
+var getEdgeColor = (type, isDark) => {
+  const colors = {
+    friend: isDark ? "#34d399" : "#10b981",
+    enemy: isDark ? "#f87171" : "#ef4444",
+    subordinate: isDark ? "#60a5fa" : "#3b82f6",
+    superior: isDark ? "#a78bfa" : "#8b5cf6",
+    neutral: isDark ? "#94a3b8" : "#64748b",
+    default: isDark ? "#94a3b8" : "#64748b"
   };
-  return map[status || "active"];
+  return colors[type] || colors.default;
 };
-var ConnectionHandles = ({ isDark, showHandles }) => {
-  const handleStyle = {
-    background: isDark ? "#ff8e8e" : "#ff6b6b",
-    width: "8px",
-    height: "8px",
-    borderRadius: "50%",
-    border: `1px solid ${isDark ? "#1e293b" : "#ffffff"}`,
-    transition: "all 0.2s ease"
-  };
-  const hiddenHandleStyle = {
-    opacity: 0,
-    width: "0px",
-    height: "0px",
-    pointerEvents: "none"
+var getIconForType = (type) => {
+  const icons = {
+    person: "\u{1F464}",
+    organization: "\u{1F3E2}",
+    event: "\u{1F4C5}",
+    location: "\u{1F4CD}",
+    concept: "\u{1F4A1}",
+    default: "\u{1F517}"
   };
-  const actualStyle = showHandles ? handleStyle : hiddenHandleStyle;
-  return /* @__PURE__ */ jsxs18(Fragment5, { children: [
-    /* @__PURE__ */ jsx24(Handle, { type: "target", position: Position.Top, id: "top-left", style: { ...actualStyle, left: "25%" } }),
-    /* @__PURE__ */ jsx24(Handle, { type: "source", position: Position.Top, id: "top-left-source", style: { ...actualStyle, left: "25%" } }),
-    /* @__PURE__ */ jsx24(Handle, { type: "target", position: Position.Top, id: "top-center", style: { ...actualStyle, left: "50%" } }),
-    /* @__PURE__ */ jsx24(Handle, { type: "source", position: Position.Top, id: "top-center-source", style: { ...actualStyle, left: "50%" } }),
-    /* @__PURE__ */ jsx24(Handle, { type: "target", position: Position.Top, id: "top-right", style: { ...actualStyle, left: "75%" } }),
-    /* @__PURE__ */ jsx24(Handle, { type: "source", position: Position.Top, id: "top-right-source", style: { ...actualStyle, left: "75%" } }),
-    /* @__PURE__ */ jsx24(Handle, { type: "target", position: Position.Right, id: "right-top", style: { ...actualStyle, top: "25%" } }),
-    /* @__PURE__ */ jsx24(Handle, { type: "source", position: Position.Right, id: "right-top-source", style: { ...actualStyle, top: "25%" } }),
-    /* @__PURE__ */ jsx24(Handle, { type: "target", position: Position.Right, id: "right-center", style: { ...actualStyle, top: "50%" } }),
-    /* @__PURE__ */ jsx24(Handle, { type: "source", position: Position.Right, id: "right-center-source", style: { ...actualStyle, top: "50%" } }),
-    /* @__PURE__ */ jsx24(Handle, { type: "target", position: Position.Right, id: "right-bottom", style: { ...actualStyle, top: "75%" } }),
-    /* @__PURE__ */ jsx24(Handle, { type: "source", position: Position.Right, id: "right-bottom-source", style: { ...actualStyle, top: "75%" } }),
-    /* @__PURE__ */ jsx24(Handle, { type: "target", position: Position.Bottom, id: "bottom-left", style: { ...actualStyle, left: "25%" } }),
-    /* @__PURE__ */ jsx24(Handle, { type: "source", position: Position.Bottom, id: "bottom-left-source", style: { ...actualStyle, left: "25%" } }),
-    /* @__PURE__ */ jsx24(Handle, { type: "target", position: Position.Bottom, id: "bottom-center", style: { ...actualStyle, left: "50%" } }),
-    /* @__PURE__ */ jsx24(Handle, { type: "source", position: Position.Bottom, id: "bottom-center-source", style: { ...actualStyle, left: "50%" } }),
-    /* @__PURE__ */ jsx24(Handle, { type: "target", position: Position.Bottom, id: "bottom-right", style: { ...actualStyle, left: "75%" } }),
-    /* @__PURE__ */ jsx24(Handle, { type: "source", position: Position.Bottom, id: "bottom-right-source", style: { ...actualStyle, left: "75%" } }),
-    /* @__PURE__ */ jsx24(Handle, { type: "target", position: Position.Left, id: "left-top", style: { ...actualStyle, top: "25%" } }),
-    /* @__PURE__ */ jsx24(Handle, { type: "source", position: Position.Left, id: "left-top-source", style: { ...actualStyle, top: "25%" } }),
-    /* @__PURE__ */ jsx24(Handle, { type: "target", position: Position.Left, id: "left-center", style: { ...actualStyle, top: "50%" } }),
-    /* @__PURE__ */ jsx24(Handle, { type: "source", position: Position.Left, id: "left-center-source", style: { ...actualStyle, top: "50%" } }),
-    /* @__PURE__ */ jsx24(Handle, { type: "target", position: Position.Left, id: "left-bottom", style: { ...actualStyle, top: "75%" } }),
-    /* @__PURE__ */ jsx24(Handle, { type: "source", position: Position.Left, id: "left-bottom-source", style: { ...actualStyle, top: "75%" } }),
-    /* @__PURE__ */ jsx24(Handle, { type: "target", position: Position.Top, id: "corner-top-left", style: { ...actualStyle, left: "10%" } }),
-    /* @__PURE__ */ jsx24(Handle, { type: "source", position: Position.Top, id: "corner-top-left-source", style: { ...actualStyle, left: "10%" } }),
-    /* @__PURE__ */ jsx24(Handle, { type: "target", position: Position.Top, id: "corner-top-right", style: { ...actualStyle, left: "90%" } }),
-    /* @__PURE__ */ jsx24(Handle, { type: "source", position: Position.Top, id: "corner-top-right-source", style: { ...actualStyle, left: "90%" } }),
-    /* @__PURE__ */ jsx24(Handle, { type: "target", position: Position.Bottom, id: "corner-bottom-left", style: { ...actualStyle, left: "10%" } }),
-    /* @__PURE__ */ jsx24(Handle, { type: "source", position: Position.Bottom, id: "corner-bottom-left-source", style: { ...actualStyle, left: "10%" } }),
-    /* @__PURE__ */ jsx24(Handle, { type: "target", position: Position.Bottom, id: "corner-bottom-right", style: { ...actualStyle, left: "90%" } }),
-    /* @__PURE__ */ jsx24(Handle, { type: "source", position: Position.Bottom, id: "corner-bottom-right-source", style: { ...actualStyle, left: "90%" } }),
-    /* @__PURE__ */ jsx24(Handle, { type: "target", position: Position.Left, id: "corner-left-top", style: { ...actualStyle, top: "10%" } }),
-    /* @__PURE__ */ jsx24(Handle, { type: "source", position: Position.Left, id: "corner-left-top-source", style: { ...actualStyle, top: "10%" } }),
-    /* @__PURE__ */ jsx24(Handle, { type: "target", position: Position.Left, id: "corner-left-bottom", style: { ...actualStyle, top: "90%" } }),
-    /* @__PURE__ */ jsx24(Handle, { type: "source", position: Position.Left, id: "corner-left-bottom-source", style: { ...actualStyle, top: "90%" } }),
-    /* @__PURE__ */ jsx24(Handle, { type: "target", position: Position.Right, id: "corner-right-top", style: { ...actualStyle, top: "10%" } }),
-    /* @__PURE__ */ jsx24(Handle, { type: "source", position: Position.Right, id: "corner-right-top-source", style: { ...actualStyle, top: "10%" } }),
-    /* @__PURE__ */ jsx24(Handle, { type: "target", position: Position.Right, id: "corner-right-bottom", style: { ...actualStyle, top: "90%" } }),
-    /* @__PURE__ */ jsx24(Handle, { type: "source", position: Position.Right, id: "corner-right-bottom-source", style: { ...actualStyle, top: "90%" } })
-  ] });
+  return icons[type] || icons.default;
 };
-var CustomNode = memo5(({ data, theme: propTheme }) => {
-  const isDark = (data.theme || propTheme) === "dark";
-  const showHandles = data.showHandles !== void 0 ? data.showHandles : false;
-  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.15)" : "rgba(0, 0, 0, 0.08)"}`,
-    borderRadius: "14px",
-    boxShadow: isDark ? "0 8px 20px rgba(0, 0, 0, 0.3), 0 1px 2px rgba(0, 0, 0, 0.2)" : "0 4px 12px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.05)",
-    minWidth: "240px",
-    cursor: "pointer",
-    transition: "all 0.3s cubic-bezier(0.4, 0, 0.2, 1)",
-    position: "relative"
-  };
-  const iconStyle = {
-    width: "52px",
-    height: "52px",
-    borderRadius: "14px",
-    display: "flex",
-    alignItems: "center",
-    justifyContent: "center",
-    background: isDark ? "linear-gradient(135deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.05) 100%)" : "linear-gradient(135deg, rgba(0, 0, 0, 0.04) 0%, rgba(0, 0, 0, 0.02) 100%)",
-    transition: "all 0.3s ease",
-    boxShadow: isDark ? "inset 0 1px 1px rgba(255, 255, 255, 0.1)" : "inset 0 1px 1px rgba(0, 0, 0, 0.02)"
-  };
-  const titleStyle = {
-    fontWeight: 700,
-    fontSize: "15px",
-    marginBottom: "4px",
-    whiteSpace: "nowrap",
-    overflow: "hidden",
-    textOverflow: "ellipsis",
-    color: isDark ? "#ffffff" : "#1e293b",
-    letterSpacing: isDark ? "0.3px" : "normal"
-  };
-  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"
+var CustomNode = ({ data }) => {
+  const isDark = data.theme === "dark";
+  const nodeColor = getNodeColor(data.type || "default", isDark);
+  return /* @__PURE__ */ jsxs18(
+    "div",
+    {
+      style: {
+        background: isDark ? "#1e293b" : "#ffffff",
+        border: `2px solid ${nodeColor}`,
+        borderRadius: "12px",
+        padding: "8px 12px",
+        minWidth: "140px",
+        cursor: "pointer",
+        boxShadow: isDark ? "0 4px 12px rgba(0,0,0,0.3)" : "0 2px 8px rgba(0,0,0,0.1)",
+        transition: "all 0.2s ease"
+      },
+      onMouseEnter: (e) => {
+        e.currentTarget.style.transform = "translateY(-2px)";
+        e.currentTarget.style.boxShadow = isDark ? "0 6px 16px rgba(0,0,0,0.4)" : "0 4px 12px rgba(0,0,0,0.15)";
+      },
+      onMouseLeave: (e) => {
+        e.currentTarget.style.transform = "translateY(0)";
+        e.currentTarget.style.boxShadow = isDark ? "0 4px 12px rgba(0,0,0,0.3)" : "0 2px 8px rgba(0,0,0,0.1)";
+      },
+      children: [
+        /* @__PURE__ */ jsx24(Handle, { type: "target", position: Position.Top, style: { opacity: 0 } }),
+        /* @__PURE__ */ jsx24(Handle, { type: "source", position: Position.Bottom, style: { opacity: 0 } }),
+        /* @__PURE__ */ jsx24(Handle, { type: "target", position: Position.Left, style: { opacity: 0 } }),
+        /* @__PURE__ */ jsx24(Handle, { type: "source", position: Position.Right, style: { opacity: 0 } }),
+        /* @__PURE__ */ jsxs18("div", { style: { display: "flex", alignItems: "center", gap: "8px" }, children: [
+          /* @__PURE__ */ jsx24(
+            "div",
+            {
+              style: {
+                width: "32px",
+                height: "32px",
+                borderRadius: "50%",
+                background: `linear-gradient(135deg, ${nodeColor}20, ${nodeColor}40)`,
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "center",
+                fontSize: "16px"
+              },
+              children: getIconForType(data.type || "default")
+            }
+          ),
+          /* @__PURE__ */ jsxs18("div", { children: [
+            /* @__PURE__ */ jsx24(
+              "div",
+              {
+                style: {
+                  fontWeight: 600,
+                  fontSize: "12px",
+                  color: isDark ? "#ffffff" : "#1e293b"
+                },
+                children: data.name
+              }
+            ),
+            data.description && /* @__PURE__ */ jsx24(
+              "div",
+              {
+                style: {
+                  fontSize: "10px",
+                  color: isDark ? "#94a3b8" : "#64748b",
+                  marginTop: "2px"
+                },
+                children: data.description
+              }
+            )
+          ] })
+        ] })
+      ]
+    }
+  );
+};
+var nodeTypes = { custom: CustomNode };
+var SmartEdge = ({ id, sourceX, sourceY, targetX, targetY, style = {}, markerEnd, data }) => {
+  const dx = targetX - sourceX;
+  const dy = targetY - sourceY;
+  const offsetX = dx * 0.2;
+  const offsetY = dy * 0.2;
+  const path = `M ${sourceX} ${sourceY} C ${sourceX + offsetX} ${sourceY + offsetY}, ${targetX - offsetX} ${targetY - offsetY}, ${targetX} ${targetY}`;
+  const midX = (sourceX + targetX) / 2;
+  const midY = (sourceY + targetY) / 2;
+  const getLabelStyle = () => {
+    if (style.stroke === "#ef4444") return { bg: "#fee2e2", color: "#dc2626" };
+    if (style.stroke === "#10b981") return { bg: "#d1fae5", color: "#065f46" };
+    return { bg: "#e2e8f0", color: "#475569" };
   };
-  return /* @__PURE__ */ jsxs18("div", { style: nodeStyle, className: "relation-node", children: [
-    /* @__PURE__ */ jsx24(ConnectionHandles, { isDark, showHandles }),
-    /* @__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", filter: isDark ? "drop-shadow(0 1px 2px rgba(0,0,0,0.2))" : "none" }, 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),
-          animation: data.status === "warning" ? "pulse 2s infinite" : "none",
-          boxShadow: isDark ? "0 0 0 1px rgba(0,0,0,0.2)" : "none"
-        } })
-      ] }),
-      /* @__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 })
-      ] })
-    ] })
+  const labelStyle = getLabelStyle();
+  return /* @__PURE__ */ jsxs18("g", { children: [
+    /* @__PURE__ */ jsx24("path", { id, style, className: "react-flow__edge-path", d: path, markerEnd, fill: "none" }),
+    data?.label && /* @__PURE__ */ jsx24("foreignObject", { x: midX - 30, y: midY - 10, width: 60, height: 20, style: { overflow: "visible" }, children: /* @__PURE__ */ jsx24(
+      "div",
+      {
+        style: {
+          background: labelStyle.bg,
+          padding: "2px 6px",
+          borderRadius: "10px",
+          fontSize: "10px",
+          fontWeight: 500,
+          color: labelStyle.color,
+          textAlign: "center",
+          whiteSpace: "nowrap",
+          pointerEvents: "none"
+        },
+        children: data.label
+      }
+    ) })
   ] });
-});
-CustomNode.displayName = "CustomNode";
-var nodeTypes = {
-  custom: CustomNode
 };
-var getEdgeStyle = (theme, isHovered, isSelected) => {
-  const baseColor = theme === "dark" ? "#7c8ba0" : "#a0aec0";
-  const hoverColor = "#ff8e8e";
-  const selectedColor = "#ff6b6b";
-  if (isSelected) return { stroke: selectedColor, strokeWidth: 2.5 };
-  if (isHovered) return { stroke: hoverColor, strokeWidth: 2.5 };
-  return { stroke: baseColor, strokeWidth: 1.8 };
+var edgeTypes = { smart: SmartEdge };
+var calculateTreeLayout = (nodes, edges) => {
+  if (nodes.length === 0) return [];
+  const childrenMap = /* @__PURE__ */ new Map();
+  const parentMap = /* @__PURE__ */ new Map();
+  edges.forEach((edge) => {
+    if (!childrenMap.has(edge.source)) childrenMap.set(edge.source, []);
+    childrenMap.get(edge.source).push(edge.target);
+    parentMap.set(edge.target, edge.source);
+  });
+  const roots = nodes.filter((n) => !parentMap.has(n.id));
+  const actualRoots = roots.length > 0 ? roots : [nodes[0]];
+  const positioned = [];
+  const levelNodes = /* @__PURE__ */ new Map();
+  const queue = actualRoots.map((r) => ({ id: r.id, level: 0 }));
+  const visited = /* @__PURE__ */ new Set();
+  while (queue.length > 0) {
+    const item = queue.shift();
+    if (visited.has(item.id)) continue;
+    visited.add(item.id);
+    if (!levelNodes.has(item.level)) levelNodes.set(item.level, []);
+    levelNodes.get(item.level).push(item.id);
+    const children = childrenMap.get(item.id) || [];
+    children.forEach((childId) => {
+      if (!visited.has(childId)) {
+        queue.push({ id: childId, level: item.level + 1 });
+      }
+    });
+  }
+  const startX = 50;
+  const startY = 50;
+  const levelHeight = 120;
+  const nodeWidth = 180;
+  const nodeGap = 30;
+  for (const [level, nodeIds] of levelNodes.entries()) {
+    const totalWidth = nodeIds.length * nodeWidth + (nodeIds.length - 1) * nodeGap;
+    let currentX = startX + (800 - totalWidth) / 2;
+    nodeIds.forEach((nodeId, index) => {
+      const node = nodes.find((n) => n.id === nodeId);
+      if (node) {
+        positioned.push({
+          ...node,
+          position: {
+            x: currentX + index * (nodeWidth + nodeGap),
+            y: startY + level * levelHeight
+          }
+        });
+      }
+    });
+  }
+  const positionedIds = new Set(positioned.map((p) => p.id));
+  const remaining = nodes.filter((n) => !positionedIds.has(n.id));
+  remaining.forEach((node, idx) => {
+    positioned.push({
+      ...node,
+      position: { x: 50 + idx % 3 * 200, y: 500 + Math.floor(idx / 3) * 100 }
+    });
+  });
+  return positioned;
 };
 var RelationContent = ({
-  nodes: propNodes,
-  edges: propEdges,
+  data,
   onNodeClick,
-  onNodeDoubleClick,
   onEdgeClick,
-  onConnect: onConnectProp,
-  onNodesChange: onNodesChangeProp,
-  onEdgesChange: onEdgesChangeProp,
-  fitView = true,
-  fitViewOptions,
-  className = "",
-  style = {},
-  height = "70vh",
+  theme = "light",
+  height = "600px",
   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",
-  edgeStyles = {},
-  nodeStyles = {},
-  showHandles = false
+  className = "",
+  style = {}
 }) => {
-  const [nodes, setNodes, onNodesChange] = useNodesState(propNodes || []);
-  const [edges, setEdges, onEdgesChange] = useEdgesState(propEdges || []);
-  const { fitView: fitViewFn } = useReactFlow();
-  const theme = propTheme;
+  const [nodes, setNodes, onNodesChange] = useNodesState([]);
+  const [edges, setEdges, onEdgesChange] = useEdgesState([]);
+  const { fitView } = useReactFlow();
+  const [isReady, setIsReady] = useState18(false);
+  const isInitialized = useRef11(false);
   const isDark = theme === "dark";
-  const bgColor = isDark ? "#0f172a" : "#f5f7fa";
-  useEffect12(() => {
-    if (fitView && fitViewFn && (propNodes?.length || 0) > 0) {
-      const timer = setTimeout(() => {
-        fitViewFn({ duration: 300, padding: 0.2, ...fitViewOptions }).catch((error) => {
-          console.warn("Fit view failed:", error);
-        });
-      }, 100);
-      return () => clearTimeout(timer);
-    }
-  }, [fitView, fitViewFn, fitViewOptions, propNodes]);
+  const bgColor = isDark ? "#0f172a" : "#f8fafc";
   useEffect12(() => {
-    if (propNodes) {
-      setNodes(propNodes);
+    if (!data?.nodes?.length) {
+      setNodes([]);
+      setEdges([]);
+      setIsReady(false);
+      return;
     }
-  }, [propNodes, setNodes]);
+    const positionedNodes = calculateTreeLayout(data.nodes, data.edges);
+    setNodes(
+      positionedNodes.map((node) => ({
+        id: node.id,
+        type: "custom",
+        position: node.position,
+        data: {
+          ...node,
+          theme
+        }
+      }))
+    );
+    setEdges(
+      data.edges.map((edge) => {
+        const edgeColor = getEdgeColor(edge.type || "neutral", isDark);
+        return {
+          id: `${edge.source}-${edge.target}`,
+          source: edge.source,
+          target: edge.target,
+          type: "smart",
+          label: edge.label,
+          data: { label: edge.label },
+          style: { stroke: edgeColor, strokeWidth: 2 },
+          markerEnd: { type: MarkerType.ArrowClosed, width: 12, height: 12, color: edgeColor }
+        };
+      })
+    );
+    setIsReady(true);
+    isInitialized.current = false;
+  }, [data, theme, setNodes, setEdges]);
   useEffect12(() => {
-    if (propEdges) {
-      setEdges(propEdges);
+    if (isReady && fitView && !isInitialized.current) {
+      isInitialized.current = true;
+      setTimeout(() => {
+        fitView({ duration: 300, padding: 0.15 }).catch(() => {
+        });
+      }, 100);
     }
-  }, [propEdges, setEdges]);
-  const handleNodesChange = useCallback11(
-    (changes) => {
-      onNodesChange(changes);
-      if (onNodesChangeProp) {
-        setTimeout(() => {
-          onNodesChangeProp(nodes);
-        }, 0);
-      }
-    },
-    [onNodesChange, onNodesChangeProp, nodes]
-  );
-  const handleEdgesChange = useCallback11(
-    (changes) => {
-      onEdgesChange(changes);
-      if (onEdgesChangeProp) {
-        setTimeout(() => {
-          onEdgesChangeProp(edges);
-        }, 0);
-      }
-    },
-    [onEdgesChange, onEdgesChangeProp, edges]
-  );
-  const onConnect = useCallback11(
-    (params) => {
-      const newEdge = {
-        ...params,
-        id: `edge-${Date.now()}-${Math.random().toString(36).slice(2, 11)}`,
-        type: "straight",
-        style: { stroke: edgeStyles.defaultColor || (isDark ? "#7c8ba0" : "#a0aec0"), strokeWidth: 1.8 },
-        markerEnd: {
-          type: MarkerType.ArrowClosed,
-          color: edgeStyles.defaultColor || (isDark ? "#7c8ba0" : "#a0aec0"),
-          width: 12,
-          height: 12
-        },
-        label: "",
-        labelStyle: { fill: isDark ? "#fff" : "#333", fontSize: 11, fontWeight: 400 },
-        labelBgStyle: { fill: "transparent", fillOpacity: 0 }
-      };
-      setEdges((eds) => addEdge(newEdge, eds));
-      if (onConnectProp) {
-        onConnectProp(params);
-      }
-    },
-    [setEdges, onConnectProp, edgeStyles.defaultColor, isDark]
-  );
+  }, [isReady, fitView]);
   const handleNodeClick = useCallback11(
     (_event, node) => {
       if (onNodeClick && node.data) {
-        onNodeClick(node.id, node.data, _event);
+        const { id, name, type, description, avatar, importance } = node.data;
+        onNodeClick({ id, name, type, description, avatar, importance });
       }
     },
     [onNodeClick]
   );
-  const handleNodeDoubleClick = useCallback11(
-    (_event, node) => {
-      if (onNodeDoubleClick && node.data) {
-        onNodeDoubleClick(node.id, node.data);
-      }
-    },
-    [onNodeDoubleClick]
-  );
-  const handleNodeContextMenu = useCallback11(
-    (event, node) => {
-      event.preventDefault();
-      if (onNodeContextMenu && node.data) {
-        onNodeContextMenu(node.id, node.data);
-      }
-    },
-    [onNodeContextMenu]
-  );
   const handleEdgeClick = useCallback11(
     (_event, edge) => {
-      if (onEdgeClick) {
-        onEdgeClick(edge.id, edge.data);
+      if (onEdgeClick && data?.edges) {
+        const edgeData = data.edges.find((e) => `${e.source}-${e.target}` === edge.id);
+        if (edgeData) onEdgeClick(edgeData);
       }
     },
-    [onEdgeClick]
+    [onEdgeClick, data]
   );
-  const nodesWithTheme = React13.useMemo(() => {
-    return nodes.map((node) => ({
-      ...node,
-      data: {
-        ...node.data,
-        theme,
-        showHandles
-      },
-      className: `relation-node ${node.className || ""}`
-    }));
-  }, [nodes, theme, showHandles]);
-  const edgesWithStyle = React13.useMemo(() => {
-    return edges.map((edge) => ({
-      ...edge,
-      type: edge.type || "straight",
-      style: {
-        ...edge.style,
-        ...getEdgeStyle(theme)
-      },
-      labelStyle: {
-        fill: isDark ? "#fff" : "#333",
-        fontSize: 11,
-        fontWeight: 400,
-        ...edge.labelStyle
-      },
-      labelBgStyle: {
-        fill: "transparent",
-        fillOpacity: 0,
-        ...edge.labelBgStyle
-      },
-      markerEnd: {
-        type: MarkerType.ArrowClosed,
-        color: edgeStyles.defaultColor || (isDark ? "#7c8ba0" : "#a0aec0"),
-        width: 12,
-        height: 12,
-        ...edge.markerEnd
+  if (!data?.nodes?.length) {
+    return /* @__PURE__ */ jsx24(
+      "div",
+      {
+        style: {
+          width,
+          height,
+          backgroundColor: bgColor,
+          borderRadius: "12px",
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          color: isDark ? "#94a3b8" : "#64748b"
+        },
+        children: /* @__PURE__ */ jsxs18("div", { style: { textAlign: "center" }, children: [
+          /* @__PURE__ */ jsx24("div", { style: { fontSize: "48px", marginBottom: "16px" }, children: "\u{1F4CA}" }),
+          /* @__PURE__ */ jsx24("div", { children: "\u6682\u65E0\u5173\u7CFB\u6570\u636E" })
+        ] })
       }
-    }));
-  }, [edges, theme, isDark, edgeStyles.defaultColor]);
-  const globalStyle = `
-        .relation-container {
-            position: relative;
-            width: 100%;
-            height: 100%;
-            overflow: hidden;
-        }
-        .react-flow__background,
-        .react-flow__pane,
-        .react-flow__renderer,
-        .react-flow__viewport {
-            background-color: ${bgColor} !important;
-        }
-        .relation-node {
-            transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s ease;
-        }
-        .relation-node:hover {
-            transform: translateY(-4px) scale(1.02);
-            box-shadow: ${isDark ? "0 12px 28px rgba(0, 0, 0, 0.4), 0 2px 4px rgba(0, 0, 0, 0.2)" : "0 8px 24px rgba(0, 0, 0, 0.12), 0 2px 4px rgba(0, 0, 0, 0.05)"};
-        }
-        .react-flow__edge-path {
-            transition: stroke-width 0.2s ease, stroke 0.2s ease;
-        }
-        .react-flow__edge:hover .react-flow__edge-path {
-            stroke-width: 2.5px;
-            stroke: ${edgeStyles.hoverColor || (isDark ? "#ffa5a5" : "#ff8e8e")};
-        }
-        /* \u8FDE\u63A5\u70B9\u60AC\u505C\u6548\u679C */
-        .react-flow__handle {
-            transition: all 0.2s ease;
-        }
-        .react-flow__handle:hover {
-            transform: scale(1.3);
-            background-color: ${isDark ? "#ffa5a5" : "#ff8e8e"} !important;
-        }
-        @keyframes pulse {
-            0%, 100% {
-                opacity: 1;
-                transform: scale(1);
-            }
-            50% {
-                opacity: 0.7;
-                transform: scale(1.2);
-            }
-        }
-        /* \u7B80\u7EA6\u6EDA\u52A8\u6761 */
-        .relation-container ::-webkit-scrollbar {
-            width: 6px;
-            height: 6px;
-        }
-        .relation-container ::-webkit-scrollbar-track {
-            background: ${isDark ? "#1e293b" : "#e2e8f0"};
-            border-radius: 3px;
-        }
-        .relation-container ::-webkit-scrollbar-thumb {
-            background: ${isDark ? "#475569" : "#cbd5e1"};
-            border-radius: 3px;
-        }
-        .relation-container ::-webkit-scrollbar-thumb:hover {
-            background: ${isDark ? "#ff8e8e" : "#ff6b6b"};
-        }
-    `;
-  return /* @__PURE__ */ jsxs18(
+    );
+  }
+  return /* @__PURE__ */ jsx24(
     "div",
     {
       className: `relation-container ${className}`,
-      style: {
-        width,
-        height,
-        ...style,
-        backgroundColor: bgColor,
-        borderRadius: nodeStyles.borderRadius || "12px"
-      },
-      children: [
-        /* @__PURE__ */ jsx24("style", { children: globalStyle }),
-        /* @__PURE__ */ jsx24(
-          ReactFlow,
-          {
-            nodes: nodesWithTheme,
-            edges: edgesWithStyle,
-            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.Straight,
-            connectionLineStyle: {
-              stroke: edgeStyles.defaultColor || (isDark ? "#7c8ba0" : "#a0aec0"),
-              strokeWidth: 1.8
-            },
-            attributionPosition: "bottom-right",
-            zoomOnScroll: true,
-            zoomOnPinch: true,
-            zoomOnDoubleClick: false,
-            panOnScroll: false,
-            panOnDrag: true,
-            proOptions: { hideAttribution: true },
-            elevateEdgesOnSelect: true,
-            defaultEdgeOptions: {
-              type: "straight",
-              style: { stroke: edgeStyles.defaultColor || (isDark ? "#7c8ba0" : "#a0aec0"), strokeWidth: 1.8 },
-              markerEnd: { type: MarkerType.ArrowClosed, width: 12, height: 12 }
-            }
-          }
-        )
-      ]
+      style: { width, height, ...style, backgroundColor: bgColor, borderRadius: "12px", overflow: "hidden" },
+      children: /* @__PURE__ */ jsx24(
+        ReactFlow,
+        {
+          nodes,
+          edges,
+          onNodesChange,
+          onEdgesChange,
+          onNodeClick: handleNodeClick,
+          onEdgeClick: handleEdgeClick,
+          nodeTypes,
+          edgeTypes,
+          nodesDraggable: false,
+          nodesConnectable: false,
+          fitView: false,
+          minZoom: 0.3,
+          maxZoom: 2,
+          zoomOnScroll: true,
+          panOnDrag: true,
+          proOptions: { hideAttribution: true },
+          children: /* @__PURE__ */ jsx24(Background, { color: isDark ? "#1e293b" : "#e2e8f0", gap: 20, size: 1 })
+        }
+      )
     }
   );
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "flowcloudai-ui",
-  "version": "0.1.7",
+  "version": "0.1.8",
   "type": "module",
   "author": "flowcloudai",
   "module": "dist/index.js",
@@ -35,6 +35,8 @@
   },
   "dependencies": {
     "@dnd-kit/core": "^6.3.1",
+    "@dnd-kit/sortable": "^10.0.0",
+    "@dnd-kit/utilities": "^3.2.2",
     "@uiw/react-md-editor": "^4.0.4",
     "@xyflow/react": "^12.10.2"
   }