@farmzone/fz-react-ui 1.1.2 → 1.1.4

package/dist/index.js

@@ -7828,6 +7828,8 @@ function PageFilter(props) {
     colGap = 0,
     submitButtonText = "\uAC80\uC0C9",
     resetButtonText = "\uCD08\uAE30\uD654",
+    showSubmitButton = true,
+    showResetButton = true,
     values,
     primaryColor
   } = props;
@@ -7887,7 +7889,8 @@ function PageFilter(props) {
             onChange: handleInputChange(optionKey),
             onKeyDown: (e) => {
               if (e.key === "Enter") handleSubmit();
-            }
+            },
+            leftIcon: option.leftIcon !== false ? /* @__PURE__ */ jsx(Search, { size: 16 }) : void 0
           }
         ) }, String(optionKey));
       case "select":
@@ -7934,12 +7937,13 @@ function PageFilter(props) {
           }
         ) }, String(optionKey));
       case "checkbox":
-        return /* @__PURE__ */ jsx(LabeledFilterOption, { label: option.label, gap: rowGap2, children: /* @__PURE__ */ jsx(
+        return /* @__PURE__ */ jsx(LabeledFilterOption, { gap: rowGap2, children: /* @__PURE__ */ jsx(
           Checkbox,
           {
             checked: currentValue === "true",
             name: String(optionKey),
             value: currentValue,
+            label: option.label,
             onChange: handleCheckboxChange(optionKey, option.autoSubmit)
           }
         ) }, String(optionKey));
@@ -7958,9 +7962,9 @@ function PageFilter(props) {
         const isLastRow = rows.length - 1 === ix;
         return /* @__PURE__ */ jsxs("div", { className: "flex flex-row min-h-11", children: [
           row.options.map((option, index) => renderFilterOption(option, rowGap, index)),
-          isLastRow && /* @__PURE__ */ jsxs("div", { className: "ml-2 flex flex-row items-center gap-2", children: [
-            /* @__PURE__ */ jsx(Button, { variant: "search", onClick: handleSubmit, children: submitButtonText }),
-            onReset && /* @__PURE__ */ jsx(Button, { variant: "reset", onClick: handleReset, children: resetButtonText })
+          isLastRow && (showSubmitButton || showResetButton && onReset) && /* @__PURE__ */ jsxs("div", { className: "ml-2 flex flex-row items-center gap-2", children: [
+            showSubmitButton && /* @__PURE__ */ jsx(Button, { variant: "search", onClick: handleSubmit, children: submitButtonText }),
+            onReset && showResetButton && /* @__PURE__ */ jsx(Button, { variant: "reset", onClick: handleReset, children: resetButtonText })
           ] })
         ] }, row.options.map((opt) => String(opt.key)).join("_"));
       }) })
@@ -8050,6 +8054,122 @@ function easedFade(dir, opacity) {
   const c = (t) => `rgba(0,0,0,${(opacity * t).toFixed(3)})`;
   return `linear-gradient(${dir}, ${c(1)} 0%, ${c(0.72)} 20%, ${c(0.38)} 45%, ${c(0.1)} 70%, transparent 100%)`;
 }
+function clusterTabs(tabs, getTabGroup) {
+  const clusters = [];
+  const clusterByGroupKey = /* @__PURE__ */ new Map();
+  for (const tab of tabs) {
+    const group = getTabGroup(tab) ?? null;
+    if (!group) {
+      clusters.push({ group: null, tabs: [tab] });
+      continue;
+    }
+    const existing = clusterByGroupKey.get(group.key);
+    if (existing) {
+      existing.tabs.push(tab);
+    } else {
+      const cluster = { group, tabs: [tab] };
+      clusterByGroupKey.set(group.key, cluster);
+      clusters.push(cluster);
+    }
+  }
+  return clusters;
+}
+var TAB_PALETTE = [
+  { base: "rgb(38, 117, 226)", bg: "rgba(38, 117, 226, 0.12)", border: "rgba(38, 117, 226, 0.4)" },
+  // blue
+  { base: "rgb(249, 115, 22)", bg: "rgba(249, 115, 22, 0.12)", border: "rgba(249, 115, 22, 0.4)" },
+  // orange
+  { base: "rgb(239, 68, 68)", bg: "rgba(239, 68, 68, 0.12)", border: "rgba(239, 68, 68, 0.4)" },
+  // red
+  { base: "rgb(34, 197, 94)", bg: "rgba(34, 197, 94, 0.12)", border: "rgba(34, 197, 94, 0.4)" },
+  // green
+  { base: "rgb(168, 85, 247)", bg: "rgba(168, 85, 247, 0.12)", border: "rgba(168, 85, 247, 0.4)" },
+  // purple
+  { base: "rgb(245, 158, 11)", bg: "rgba(245, 158, 11, 0.12)", border: "rgba(245, 158, 11, 0.4)" },
+  // amber
+  { base: "rgb(236, 72, 153)", bg: "rgba(236, 72, 153, 0.12)", border: "rgba(236, 72, 153, 0.4)" },
+  // pink
+  { base: "rgb(20, 184, 166)", bg: "rgba(20, 184, 166, 0.12)", border: "rgba(20, 184, 166, 0.4)" },
+  // teal
+  { base: "rgb(99, 102, 241)", bg: "rgba(99, 102, 241, 0.12)", border: "rgba(99, 102, 241, 0.4)" },
+  // indigo
+  { base: "rgb(6, 182, 212)", bg: "rgba(6, 182, 212, 0.12)", border: "rgba(6, 182, 212, 0.4)" }
+  // cyan
+];
+function assignGroupColors(groupKeys, existing) {
+  const missing = groupKeys.filter((key) => !existing.has(key));
+  if (missing.length === 0) return existing;
+  const next = new Map(existing);
+  for (const key of missing) {
+    if (next.has(key)) continue;
+    const used = new Set([...next.values()].map((c) => c.bg));
+    const free = TAB_PALETTE.find((c) => !used.has(c.bg)) ?? TAB_PALETTE[next.size % TAB_PALETTE.length];
+    next.set(key, free ?? TAB_PALETTE[0]);
+  }
+  return next;
+}
+function MultiTabPill(props) {
+  const {
+    tab,
+    isActive,
+    showClose,
+    accentColor,
+    style: s,
+    onClick,
+    onClose,
+    registerRef,
+    draggable = false,
+    onPointerDown,
+    dropIndicator = null,
+    isDraggingThis = false
+  } = props;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: (el) => registerRef(tab.id, el),
+      onPointerDown: draggable ? onPointerDown : void 0,
+      onClick: () => {
+        if (!isActive) onClick();
+      },
+      className: `
+        group relative flex items-center gap-1.5 ${s.tabPx} ${s.tabPy} flex-shrink-0
+        ${s.rounded} border border-b-0 select-none
+        transition-colors duration-100
+        ${isActive ? s.activeTab : s.inactiveTab}
+        ${draggable ? isDraggingThis ? "cursor-grabbing" : "cursor-grab" : "cursor-pointer"}
+        ${isDraggingThis ? "opacity-40" : ""}
+        ${dropIndicator === "before" ? "[box-shadow:inset_2px_0_0_0_#3b82f6]" : ""}
+        ${dropIndicator === "after" ? "[box-shadow:inset_-2px_0_0_0_#3b82f6]" : ""}
+      `,
+      children: [
+        isActive && /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: `absolute top-0 left-0 right-0 h-0.5 ${s.rounded} ${s.indicator}`,
+            style: accentColor ? { backgroundColor: accentColor } : void 0
+          }
+        ),
+        /* @__PURE__ */ jsx("span", { className: `${s.tabTextSize} max-w-35 truncate leading-none ${isActive ? s.activeText : s.inactiveText}`, children: tab.label }),
+        showClose && /* @__PURE__ */ jsx(
+          "button",
+          {
+            onClick: (e) => {
+              e.stopPropagation();
+              onClose();
+            },
+            className: `
+            flex-shrink-0 ${s.closeBtnWH} flex items-center justify-center
+            transition-all duration-100 cursor-pointer
+            ${s.closeBtn}
+            ${isActive ? "opacity-100" : "opacity-40 group-hover:opacity-60"}
+          `,
+            children: /* @__PURE__ */ jsx(X, { size: s.closeBtnSize, strokeWidth: 2.5 })
+          }
+        )
+      ]
+    }
+  );
+}
 function MultiTabBar(props) {
   const {
     tabs,
@@ -8059,25 +8179,77 @@ function MultiTabBar(props) {
     onTabAdd,
     onTabsReorder,
     variant = "light",
-    primaryColor
+    primaryColor,
+    getTabGroup
   } = props;
   const s = VARIANT_STYLES[variant];
   const scrollRef = useRef(null);
   const tabRefs = useRef(/* @__PURE__ */ new Map());
+  const registerTabRef = (id, el) => {
+    if (el) tabRefs.current.set(id, el);
+    else tabRefs.current.delete(id);
+  };
   const [showLeftFade, setShowLeftFade] = useState(false);
   const [showRightFade, setShowRightFade] = useState(false);
   const [draggingId, setDraggingId] = useState(null);
   const [dropTargetId, setDropTargetId] = useState(null);
   const [dropSide, setDropSide] = useState("before");
-  const draggingIdRef = useRef(null);
+  const [draggingGroupKey, setDraggingGroupKey] = useState(null);
+  const [groupDropTargetKey, setGroupDropTargetKey] = useState(null);
+  const [groupDropSide, setGroupDropSide] = useState("before");
+  const [dragPos, setDragPos] = useState(null);
   const dropTargetIdRef = useRef(null);
   const dropSideRef = useRef("before");
+  const groupDropTargetKeyRef = useRef(null);
+  const groupDropSideRef = useRef("before");
   const tabsRef = useRef(tabs);
-  const dropHandledRef = useRef(false);
-  draggingIdRef.current = draggingId;
-  dropTargetIdRef.current = dropTargetId;
-  dropSideRef.current = dropSide;
-  tabsRef.current = tabs;
+  useEffect(() => {
+    dropTargetIdRef.current = dropTargetId;
+    dropSideRef.current = dropSide;
+    groupDropTargetKeyRef.current = groupDropTargetKey;
+    groupDropSideRef.current = groupDropSide;
+    tabsRef.current = tabs;
+  });
+  const groupRefs = useRef(/* @__PURE__ */ new Map());
+  const registerGroupRef = (key, el) => {
+    if (el) groupRefs.current.set(key, el);
+    else groupRefs.current.delete(key);
+  };
+  const clusters = useMemo(
+    () => getTabGroup ? clusterTabs(tabs, getTabGroup) : null,
+    [tabs, getTabGroup]
+  );
+  const groupKeys = useMemo(
+    () => clusters ? Array.from(new Set(clusters.map((c) => c.group?.key).filter((k) => !!k))) : [],
+    [clusters]
+  );
+  const [groupColorAssignments, setGroupColorAssignments] = useState(() => /* @__PURE__ */ new Map());
+  const groupColors = assignGroupColors(groupKeys, groupColorAssignments);
+  if (groupColors !== groupColorAssignments) {
+    setGroupColorAssignments(groupColors);
+  }
+  const [collapsedGroups, setCollapsedGroups] = useState(/* @__PURE__ */ new Set());
+  const [prevActiveTabId, setPrevActiveTabId] = useState(activeTabId);
+  if (activeTabId !== prevActiveTabId) {
+    setPrevActiveTabId(activeTabId);
+    if (clusters) {
+      const activeCluster = clusters.find((c) => c.tabs.some((t) => t.id === activeTabId));
+      const key = activeCluster?.group?.key;
+      if (key && collapsedGroups.has(key)) {
+        const next = new Set(collapsedGroups);
+        next.delete(key);
+        setCollapsedGroups(next);
+      }
+    }
+  }
+  const toggleGroupCollapsed = (key) => {
+    setCollapsedGroups((prev) => {
+      const next = new Set(prev);
+      if (next.has(key)) next.delete(key);
+      else next.add(key);
+      return next;
+    });
+  };
   useEffect(() => {
     if (!activeTabId || !scrollRef.current) return;
     const el = tabRefs.current.get(activeTabId);
@@ -8115,9 +8287,12 @@ function MultiTabBar(props) {
     el.addEventListener("wheel", onWheel, { passive: false });
     return () => el.removeEventListener("wheel", onWheel);
   }, []);
-  const resolveDropPosition = (clientX) => {
+  const reorderEnabled = !!onTabsReorder;
+  const pointerStateRef = useRef(null);
+  const suppressClickRef = useRef(false);
+  const resolveDropPosition = (clientX, draggingTabId) => {
     for (const [tabId, el] of tabRefs.current) {
-      if (tabId === draggingIdRef.current) continue;
+      if (tabId === draggingTabId) continue;
       const rect = el.getBoundingClientRect();
       if (clientX >= rect.left && clientX < rect.right) {
         setDropSide(clientX < rect.left + rect.width / 2 ? "before" : "after");
@@ -8128,7 +8303,7 @@ function MultiTabBar(props) {
     let rightmostTabId = null;
     let maxRight = -Infinity;
     for (const [tabId, el] of tabRefs.current) {
-      if (tabId === draggingIdRef.current) continue;
+      if (tabId === draggingTabId) continue;
       const rect = el.getBoundingClientRect();
       if (rect.right > maxRight) {
         maxRight = rect.right;
@@ -8152,180 +8327,322 @@ function MultiTabBar(props) {
     newTabs.splice(insertIdx, 0, moved);
     onTabsReorder(newTabs);
   };
+  const resolveGroupDropPosition = (clientX, draggingKey) => {
+    const candidates = [];
+    for (const [tabId, el] of tabRefs.current) {
+      const tab = tabsRef.current.find((t) => t.id === tabId);
+      if (tab && getTabGroup?.(tab)?.key === draggingKey) continue;
+      candidates.push([`tab:${tabId}`, el]);
+    }
+    for (const [key, el] of groupRefs.current) {
+      if (key === draggingKey) continue;
+      candidates.push([`group:${key}`, el]);
+    }
+    for (const [unitKey, el] of candidates) {
+      const rect = el.getBoundingClientRect();
+      if (clientX >= rect.left && clientX < rect.right) {
+        setGroupDropSide(clientX < rect.left + rect.width / 2 ? "before" : "after");
+        setGroupDropTargetKey(unitKey);
+        return;
+      }
+    }
+    let rightmostKey = null;
+    let maxRight = -Infinity;
+    for (const [unitKey, el] of candidates) {
+      const rect = el.getBoundingClientRect();
+      if (rect.right > maxRight) {
+        maxRight = rect.right;
+        rightmostKey = unitKey;
+      }
+    }
+    if (rightmostKey && clientX >= maxRight) {
+      setGroupDropSide("after");
+      setGroupDropTargetKey(rightmostKey);
+    }
+  };
+  const reorderGroupTabs = (draggedKey, targetUnitKey, side, sourceTabs) => {
+    if (!onTabsReorder || !getTabGroup) return;
+    const draggedTabs = sourceTabs.filter((t) => getTabGroup(t)?.key === draggedKey);
+    const rest = sourceTabs.filter((t) => getTabGroup(t)?.key !== draggedKey);
+    if (draggedTabs.length === 0) return;
+    let insertIdx;
+    if (targetUnitKey.startsWith("group:")) {
+      const targetKey = targetUnitKey.slice("group:".length);
+      if (targetKey === draggedKey) return;
+      const targetIndices = rest.map((t, i) => getTabGroup(t)?.key === targetKey ? i : -1).filter((i) => i !== -1);
+      if (targetIndices.length === 0) return;
+      insertIdx = side === "before" ? targetIndices[0] : targetIndices[targetIndices.length - 1] + 1;
+    } else {
+      const targetTabId = targetUnitKey.slice("tab:".length);
+      const idx = rest.findIndex((t) => t.id === targetTabId);
+      if (idx === -1) return;
+      insertIdx = side === "before" ? idx : idx + 1;
+    }
+    const newTabs = [...rest.slice(0, insertIdx), ...draggedTabs, ...rest.slice(insertIdx)];
+    onTabsReorder(newTabs);
+  };
   useEffect(() => {
-    if (!onTabsReorder) return;
-    const onDocDragOver = (e) => {
-      if (!draggingIdRef.current) return;
-      e.preventDefault();
-      resolveDropPosition(e.clientX);
+    if (!reorderEnabled) return;
+    const DRAG_THRESHOLD = 4;
+    const onPointerMove = (e) => {
+      const state = pointerStateRef.current;
+      if (!state) return;
+      if (!state.dragging) {
+        const dx = Math.abs(e.clientX - state.startX);
+        const dy = Math.abs(e.clientY - state.startY);
+        if (dx < DRAG_THRESHOLD && dy < DRAG_THRESHOLD) return;
+        state.dragging = true;
+        suppressClickRef.current = true;
+        if (state.kind === "tab") setDraggingId(state.id);
+        else setDraggingGroupKey(state.id);
+      }
+      setDragPos({ x: e.clientX, y: e.clientY });
+      if (state.kind === "tab") resolveDropPosition(e.clientX, state.id);
+      else resolveGroupDropPosition(e.clientX, state.id);
     };
-    const onDocDrop = (e) => {
-      if (dropHandledRef.current) {
-        dropHandledRef.current = false;
-        return;
+    const onPointerUp = () => {
+      const state = pointerStateRef.current;
+      if (state?.dragging) {
+        if (state.kind === "tab") {
+          const target = dropTargetIdRef.current;
+          if (target) reorderTabs(target, dropSideRef.current, tabsRef.current, state.id);
+        } else {
+          const target = groupDropTargetKeyRef.current;
+          if (target) reorderGroupTabs(state.id, target, groupDropSideRef.current, tabsRef.current);
+        }
       }
-      e.preventDefault();
-      const id = draggingIdRef.current;
-      const target = dropTargetIdRef.current;
-      if (id && target) reorderTabs(target, dropSideRef.current, tabsRef.current, id);
+      pointerStateRef.current = null;
       setDraggingId(null);
       setDropTargetId(null);
+      setDraggingGroupKey(null);
+      setGroupDropTargetKey(null);
+      setDragPos(null);
+      requestAnimationFrame(() => {
+        suppressClickRef.current = false;
+      });
     };
-    document.addEventListener("dragover", onDocDragOver);
-    document.addEventListener("drop", onDocDrop);
+    window.addEventListener("pointermove", onPointerMove);
+    window.addEventListener("pointerup", onPointerUp);
     return () => {
-      document.removeEventListener("dragover", onDocDragOver);
-      document.removeEventListener("drop", onDocDrop);
+      window.removeEventListener("pointermove", onPointerMove);
+      window.removeEventListener("pointerup", onPointerUp);
     };
-  }, [onTabsReorder]);
-  const handleDragStart = (e, tabId) => {
-    setDraggingId(tabId);
-    e.dataTransfer.effectAllowed = "move";
-  };
-  const handleDrop = (e, targetTabId) => {
-    e.preventDefault();
-    e.stopPropagation();
-    dropHandledRef.current = true;
-    const id = draggingIdRef.current;
-    if (id && id !== targetTabId) reorderTabs(targetTabId, dropSideRef.current, tabsRef.current, id);
-    setDraggingId(null);
-    setDropTargetId(null);
+  }, [reorderEnabled]);
+  const handlePointerDown = (e, tabId) => {
+    pointerStateRef.current = { kind: "tab", id: tabId, startX: e.clientX, startY: e.clientY, dragging: false };
   };
-  const handleContainerDrop = (e) => {
-    e.preventDefault();
-    dropHandledRef.current = true;
-    const id = draggingIdRef.current;
-    if (id && onTabsReorder) {
-      const fromIdx = tabsRef.current.findIndex((t) => t.id === id);
-      if (fromIdx !== -1 && fromIdx < tabsRef.current.length - 1) {
-        const newTabs = [...tabsRef.current];
-        const moved = newTabs.splice(fromIdx, 1)[0];
-        newTabs.push(moved);
-        onTabsReorder(newTabs);
-      }
-    }
-    setDraggingId(null);
-    setDropTargetId(null);
-  };
-  const handleDragEnd = () => {
-    dropHandledRef.current = false;
-    setDraggingId(null);
-    setDropTargetId(null);
+  const handleGroupPointerDown = (e, groupKey) => {
+    pointerStateRef.current = { kind: "group", id: groupKey, startX: e.clientX, startY: e.clientY, dragging: false };
   };
   const showPlus = !!onTabAdd;
+  const canClose = tabs.length > 1;
+  const draggingTab = draggingId ? tabs.find((tab) => tab.id === draggingId) : void 0;
+  const draggingCluster = clusters?.find((c) => c.tabs.some((t) => t.id === draggingId));
+  const draggingColor = draggingCluster?.group ? groupColors.get(draggingCluster.group.key)?.border : primaryColor;
+  const draggingGroupCluster = draggingGroupKey ? clusters?.find((c) => c.group?.key === draggingGroupKey) : void 0;
+  const draggingGroupColor = draggingGroupKey ? groupColors.get(draggingGroupKey) : void 0;
+  const ghost = draggingGroupKey && draggingGroupCluster?.group ? {
+    label: draggingGroupCluster.group.label,
+    bg: (draggingGroupColor ?? TAB_PALETTE[0]).bg,
+    border: (draggingGroupColor ?? TAB_PALETTE[0]).border,
+    color: (draggingGroupColor ?? TAB_PALETTE[0]).base
+  } : draggingTab ? { label: draggingTab.label, bg: "white", border: draggingColor ?? "#e5e7eb", color: "#111827" } : null;
   if (tabs.length === 0) return null;
-  return /* @__PURE__ */ jsx("div", { className: `flex-shrink-0 w-full overflow-hidden ${s.container}`, children: /* @__PURE__ */ jsxs("div", { className: "relative flex items-stretch", children: [
-    showLeftFade && /* @__PURE__ */ jsx(
-      "div",
-      {
-        className: "absolute left-0 top-0 bottom-0 w-10 pointer-events-none z-10",
-        style: { background: easedFade("to right", s.fadeOpacity) }
-      }
-    ),
-    showRightFade && /* @__PURE__ */ jsx(
-      "div",
-      {
-        className: "absolute top-0 bottom-0 w-10 pointer-events-none z-10",
-        style: {
-          right: showPlus ? PLUS_BTN_WIDTH : 0,
-          background: easedFade("to left", s.fadeOpacity)
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("div", { className: `flex-shrink-0 w-full overflow-hidden ${s.container}`, children: /* @__PURE__ */ jsxs("div", { className: "relative flex items-stretch", children: [
+      showLeftFade && /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: "absolute left-0 top-0 bottom-0 w-10 pointer-events-none z-10",
+          style: { background: easedFade("to right", s.fadeOpacity) }
         }
-      }
-    ),
-    /* @__PURE__ */ jsx(
-      "div",
-      {
-        ref: scrollRef,
-        className: `flex-1 min-w-0 flex items-end gap-0.5 ${s.scrollPadding} overflow-x-auto [&::-webkit-scrollbar]:hidden`,
-        style: { scrollbarWidth: "none" },
-        onScroll: updateFades,
-        onDragOver: (e) => {
-          if (draggingId) e.preventDefault();
-        },
-        onDrop: handleContainerDrop,
-        children: tabs.map((tab) => {
-          const isActive = tab.id === activeTabId;
-          const isDraggingThis = tab.id === draggingId;
-          const isDropTarget = dropTargetId === tab.id;
-          return /* @__PURE__ */ jsxs(
-            "div",
-            {
-              ref: (el) => {
-                if (el) tabRefs.current.set(tab.id, el);
-                else tabRefs.current.delete(tab.id);
-              },
-              draggable: !!onTabsReorder,
-              onClick: () => {
-                if (!isActive) onTabClick(tab.id);
-              },
-              onDragStart: (e) => handleDragStart(e, tab.id),
-              onDrop: (e) => handleDrop(e, tab.id),
-              onDragEnd: handleDragEnd,
-              className: `
-                  group relative flex items-center gap-1.5 ${s.tabPx} ${s.tabPy} flex-shrink-0
-                  ${s.rounded} border border-b-0 select-none
-                  transition-colors duration-100
-                  ${isActive ? s.activeTab : s.inactiveTab}
-                  ${onTabsReorder ? "cursor-grab" : "cursor-pointer"}
-                  ${isDraggingThis ? "opacity-40" : ""}
-                  ${isDropTarget && dropSide === "before" ? "[box-shadow:inset_2px_0_0_0_#3b82f6]" : ""}
-                  ${isDropTarget && dropSide === "after" ? "[box-shadow:inset_-2px_0_0_0_#3b82f6]" : ""}
-                `,
-              children: [
-                isActive && /* @__PURE__ */ jsx(
-                  "div",
-                  {
-                    className: `absolute top-0 left-0 right-0 h-0.5 ${s.rounded} ${s.indicator}`,
-                    style: primaryColor ? { backgroundColor: primaryColor } : void 0
-                  }
-                ),
-                /* @__PURE__ */ jsx(
-                  "span",
-                  {
-                    className: `${s.tabTextSize} max-w-35 truncate leading-none ${isActive ? s.activeText : s.inactiveText}`,
-                    children: tab.label
-                  }
-                ),
-                tabs.length > 1 && /* @__PURE__ */ jsx(
-                  "button",
+      ),
+      showRightFade && /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: "absolute top-0 bottom-0 w-10 pointer-events-none z-10",
+          style: {
+            right: showPlus ? PLUS_BTN_WIDTH : 0,
+            background: easedFade("to left", s.fadeOpacity)
+          }
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          ref: scrollRef,
+          className: `flex-1 min-w-0 flex items-end gap-0.5 ${s.scrollPadding} overflow-x-auto [&::-webkit-scrollbar]:hidden`,
+          style: { scrollbarWidth: "none" },
+          onScroll: updateFades,
+          children: clusters ? clusters.map((cluster) => {
+            if (!cluster.group) {
+              return cluster.tabs.map((tab) => {
+                const isDropTarget = dropTargetId === tab.id;
+                const isGroupDropTarget2 = groupDropTargetKey === `tab:${tab.id}`;
+                return /* @__PURE__ */ jsx(
+                  MultiTabPill,
                   {
-                    onClick: (e) => {
-                      e.stopPropagation();
-                      onTabClose(tab.id);
+                    tab,
+                    isActive: tab.id === activeTabId,
+                    showClose: canClose,
+                    accentColor: primaryColor,
+                    style: s,
+                    onClick: () => {
+                      if (suppressClickRef.current) return;
+                      onTabClick(tab.id);
                     },
-                    className: `
-                      flex-shrink-0 ${s.closeBtnWH} flex items-center justify-center
-                      transition-all duration-100 cursor-pointer
-                      ${s.closeBtn}
-                      ${isActive ? "opacity-100" : "opacity-40 group-hover:opacity-60"}
-                    `,
-                    children: /* @__PURE__ */ jsx(X, { size: s.closeBtnSize, strokeWidth: 2.5 })
-                  }
-                )
-              ]
-            },
-            tab.id
-          );
-        })
-      }
-    ),
-    showPlus && /* @__PURE__ */ jsx(
-      "div",
-      {
-        className: `flex-shrink-0 flex items-center justify-center ${s.plusBtnArea}`,
-        style: { width: PLUS_BTN_WIDTH },
-        children: /* @__PURE__ */ jsx(
-          "button",
-          {
-            onClick: onTabAdd,
-            title: "\uD604\uC7AC \uD398\uC774\uC9C0\uB97C \uC0C8 \uD0ED\uC73C\uB85C \uC5F4\uAE30",
-            className: `w-6 h-6 flex items-center justify-center rounded cursor-pointer transition-colors ${s.plusBtn}`,
-            children: /* @__PURE__ */ jsx(Plus, { size: 13, strokeWidth: 2 })
-          }
-        )
-      }
-    )
-  ] }) });
+                    onClose: () => onTabClose(tab.id),
+                    registerRef: registerTabRef,
+                    draggable: reorderEnabled,
+                    isDraggingThis: tab.id === draggingId,
+                    dropIndicator: isDropTarget ? dropSide : isGroupDropTarget2 ? groupDropSide : null,
+                    onPointerDown: (e) => handlePointerDown(e, tab.id)
+                  },
+                  tab.id
+                );
+              });
+            }
+            const { key, label } = cluster.group;
+            const color = groupColors.get(key) ?? TAB_PALETTE[0];
+            const collapsed = collapsedGroups.has(key);
+            const groupHasActiveTab = cluster.tabs.some((t) => t.id === activeTabId);
+            const isGroupDropTarget = groupDropTargetKey === `group:${key}`;
+            const isDraggingThisGroup = draggingGroupKey === key;
+            return /* @__PURE__ */ jsxs(
+              "div",
+              {
+                ref: (el) => registerGroupRef(key, el),
+                className: "flex shrink-0 flex-col items-stretch",
+                children: [
+                  /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
+                    /* @__PURE__ */ jsxs(
+                      "button",
+                      {
+                        type: "button",
+                        onClick: () => {
+                          if (suppressClickRef.current) return;
+                          toggleGroupCollapsed(key);
+                        },
+                        onPointerDown: reorderEnabled ? (e) => handleGroupPointerDown(e, key) : void 0,
+                        "aria-expanded": !collapsed,
+                        title: collapsed ? "\uD558\uC704 \uD0ED \uD3BC\uCE58\uAE30" : "\uD558\uC704 \uD0ED \uC811\uAE30",
+                        className: `flex items-center gap-1 rounded-md border px-2.5 py-1 text-xs font-bold whitespace-nowrap select-none ${reorderEnabled ? isDraggingThisGroup ? "cursor-grabbing" : "cursor-grab" : "cursor-pointer"} ${isDraggingThisGroup ? "opacity-40" : ""} ${isGroupDropTarget && groupDropSide === "before" ? "[box-shadow:inset_2px_0_0_0_#3b82f6]" : ""} ${isGroupDropTarget && groupDropSide === "after" ? "[box-shadow:inset_-2px_0_0_0_#3b82f6]" : ""}`,
+                        style: { backgroundColor: color.bg, borderColor: color.border, color: color.base },
+                        children: [
+                          collapsed ? /* @__PURE__ */ jsx(ChevronRight, { size: 12 }) : /* @__PURE__ */ jsx(ChevronDown, { size: 12 }),
+                          label,
+                          canClose && /* @__PURE__ */ jsx(
+                            X,
+                            {
+                              size: 12,
+                              onClick: (e) => {
+                                e.stopPropagation();
+                                cluster.tabs.forEach((t) => onTabClose(t.id));
+                              }
+                            }
+                          )
+                        ]
+                      }
+                    ),
+                    !collapsed && cluster.tabs.map((tab) => {
+                      const isDropTarget = dropTargetId === tab.id;
+                      const isTabGroupDropTarget = groupDropTargetKey === `tab:${tab.id}`;
+                      return /* @__PURE__ */ jsx(
+                        MultiTabPill,
+                        {
+                          tab,
+                          isActive: tab.id === activeTabId,
+                          showClose: canClose,
+                          accentColor: color.base,
+                          style: s,
+                          onClick: () => {
+                            if (suppressClickRef.current) return;
+                            onTabClick(tab.id);
+                          },
+                          onClose: () => onTabClose(tab.id),
+                          registerRef: registerTabRef,
+                          draggable: reorderEnabled,
+                          isDraggingThis: tab.id === draggingId,
+                          dropIndicator: isDropTarget ? dropSide : isTabGroupDropTarget ? groupDropSide : null,
+                          onPointerDown: (e) => handlePointerDown(e, tab.id)
+                        },
+                        tab.id
+                      );
+                    })
+                  ] }),
+                  /* @__PURE__ */ jsx(
+                    "div",
+                    {
+                      className: "mt-1 h-0.75 rounded-full",
+                      style: { backgroundColor: color.base, opacity: groupHasActiveTab ? 1 : 0.35 }
+                    }
+                  )
+                ]
+              },
+              key
+            );
+          }) : tabs.map((tab) => {
+            const isDropTarget = dropTargetId === tab.id;
+            return /* @__PURE__ */ jsx(
+              MultiTabPill,
+              {
+                tab,
+                isActive: tab.id === activeTabId,
+                showClose: canClose,
+                accentColor: primaryColor,
+                style: s,
+                onClick: () => {
+                  if (suppressClickRef.current) return;
+                  onTabClick(tab.id);
+                },
+                onClose: () => onTabClose(tab.id),
+                registerRef: registerTabRef,
+                draggable: reorderEnabled,
+                isDraggingThis: tab.id === draggingId,
+                dropIndicator: isDropTarget ? dropSide : null,
+                onPointerDown: (e) => handlePointerDown(e, tab.id)
+              },
+              tab.id
+            );
+          })
+        }
+      ),
+      showPlus && /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: `flex-shrink-0 flex items-center justify-center ${s.plusBtnArea}`,
+          style: { width: PLUS_BTN_WIDTH },
+          children: /* @__PURE__ */ jsx(
+            "button",
+            {
+              onClick: onTabAdd,
+              title: "\uD604\uC7AC \uD398\uC774\uC9C0\uB97C \uC0C8 \uD0ED\uC73C\uB85C \uC5F4\uAE30",
+              className: `w-6 h-6 flex items-center justify-center rounded cursor-pointer transition-colors ${s.plusBtn}`,
+              children: /* @__PURE__ */ jsx(Plus, { size: 13, strokeWidth: 2 })
+            }
+          )
+        }
+      )
+    ] }) }),
+    dragPos && ghost ? createPortal(
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: "pointer-events-none fixed z-50 flex items-center gap-1.5 rounded-md border px-2.5 py-1 text-xs font-bold whitespace-nowrap shadow-lg",
+          style: {
+            left: dragPos.x + 12,
+            top: dragPos.y + 12,
+            backgroundColor: ghost.bg,
+            borderColor: ghost.border,
+            color: ghost.color,
+            transform: "rotate(-2deg)"
+          },
+          children: ghost.label
+        }
+      ),
+      document.body
+    ) : null
+  ] });
 }
 var userScopedStorage = createJSONStorage(() => ({
   getItem: (name) => {