@hectasquare/medusa-plugin-category-tree 1.0.0 → 1.0.2

package/.medusa/server/src/admin/components/category-tree/tier-bars.d.ts

@@ -1,13 +1,15 @@
 import React from "react";
 export interface TierBarsProps {
     tier: number;
+    color?: string;
 }
 /**
- * Renders N vertical black bars on the left edge of each category card,
- * separated by crisp white spacing, providing an immediate tactile hierarchy indicator:
+ * Renders N vertical colored bars on the left edge of each category card,
+ * providing an immediate tactile hierarchy indicator:
  * Tier 1 = 1 bar (Root/Main)
  * Tier 2 = 2 bars (Sub)
  * Tier 3 = 3 bars (Sub-Sub)
  * Tier N = N bars
+ * Bar color matches the branch lineage for instant visual identification.
  */
 export declare const TierBars: React.FC<TierBarsProps>;

package/.medusa/server/src/admin/components/category-tree/tier-bars.js

@@ -3,15 +3,20 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.TierBars = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 /**
- * Renders N vertical black bars on the left edge of each category card,
- * separated by crisp white spacing, providing an immediate tactile hierarchy indicator:
+ * Renders N vertical colored bars on the left edge of each category card,
+ * providing an immediate tactile hierarchy indicator:
  * Tier 1 = 1 bar (Root/Main)
  * Tier 2 = 2 bars (Sub)
  * Tier 3 = 3 bars (Sub-Sub)
  * Tier N = N bars
+ * Bar color matches the branch lineage for instant visual identification.
  */
-const TierBars = ({ tier }) => {
+const TierBars = ({ tier, color }) => {
     const count = Math.max(1, tier);
-    return ((0, jsx_runtime_1.jsx)("div", { className: "flex h-full py-2 pl-2 pr-1.5 gap-[2.5px] items-stretch flex-shrink-0 select-none bg-neutral-50 dark:bg-neutral-900/60 rounded-l-xl border-r border-ui-border-base/50", title: `Tier ${tier} (${tier === 1 ? "Main Root Category" : tier === 2 ? "Subcategory" : "Sub-subcategory"})`, children: Array.from({ length: count }).map((_, index) => ((0, jsx_runtime_1.jsx)("span", { className: "w-[3px] bg-neutral-950 dark:bg-neutral-100 rounded-full shadow-sm" }, index))) }));
+    const barColor = color || "var(--fg-interactive, #3b82f6)";
+    return ((0, jsx_runtime_1.jsx)("div", { className: "flex h-full py-2 pl-2 pr-1.5 gap-[2.5px] items-stretch flex-shrink-0 select-none bg-neutral-50 dark:bg-neutral-900/60 rounded-l-xl border-r border-ui-border-base/50", title: `Tier ${tier} (${tier === 1 ? "Main Root Category" : tier === 2 ? "Subcategory" : "Sub-subcategory"}) - Branch Color: ${barColor}`, children: Array.from({ length: count }).map((_, index) => ((0, jsx_runtime_1.jsx)("span", { className: "w-[3.5px] rounded-full shadow-xs transition-colors", style: {
+                backgroundColor: barColor,
+                boxShadow: `0 0 4px ${barColor}40`,
+            } }, index))) }));
 };
 exports.TierBars = TierBars;

package/.medusa/server/src/admin/components/category-tree/types.d.ts

@@ -19,6 +19,7 @@ export type CategoryTreeNode = {
     sibling_rank: number;
     children_count: number;
     has_children: boolean;
+    branch_color?: string;
 };
 export type CategoryTreeResponse = {
     categories: CategoryTreeNode[];
@@ -35,6 +36,7 @@ export type CategoryNodeData = {
     tier: number;
     siblingRank: number;
     superscriptRank: string;
+    branchColor?: string;
     salesChannels: SalesChannelInfo[];
     isCollapsed: boolean;
     hiddenDescendantCount: number;
@@ -44,4 +46,6 @@ export type CategoryNodeData = {
     onAddChild: (parent: CategoryTreeNode) => void;
     onEdit: (category: CategoryTreeNode) => void;
     onDetach: (id: string) => void;
+    onMoveSiblingUp?: (id: string) => void;
+    onMoveSiblingDown?: (id: string) => void;
 };

package/.medusa/server/src/admin/routes/category-tree/page.js

@@ -4,9 +4,10 @@ exports.config = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const admin_sdk_1 = require("@medusajs/admin-sdk");
 const icons_1 = require("@medusajs/icons");
+const ui_1 = require("@medusajs/ui");
 const category_tree_canvas_1 = require("../../components/category-tree/category-tree-canvas");
 const CategoryTreePage = () => {
-    return (0, jsx_runtime_1.jsx)(category_tree_canvas_1.CategoryTreeCanvas, {});
+    return ((0, jsx_runtime_1.jsx)(ui_1.TooltipProvider, { children: (0, jsx_runtime_1.jsx)(category_tree_canvas_1.CategoryTreeCanvas, {}) }));
 };
 exports.config = (0, admin_sdk_1.defineRouteConfig)({
     label: "Category Tree",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hectasquare/medusa-plugin-category-tree",
-  "version": "1.0.0",
+  "version": "1.0.2",
   "description": "AAA Interactive Category Tree & Mind Map for Medusa v2 Admin with drag-and-drop reparenting, tier indicators, superscript ranks, multi-storefront filtering, and NotebookLM-style subtree collapse.",
   "author": "HectaSquare Team",
   "license": "MIT",

package/src/admin/components/category-tree/canvas-dock.tsx

@@ -1,5 +1,5 @@
 import React from "react"
-import { Button, Tooltip } from "@medusajs/ui"
+import { Button } from "@medusajs/ui"
 import {
   ArrowsPointingOut,
   MagnifyingGlass,
@@ -22,6 +22,13 @@ export interface CanvasDockProps {
   onCollapseAll: () => void
   onFocusRoot: () => void
 
+  selectedCount?: number
+  onExpandSelected?: () => void
+  onCollapseSelected?: () => void
+
+  isBoxSelect?: boolean
+  onToggleBoxSelect?: () => void
+
   onZoomIn: () => void
   onZoomOut: () => void
   onFitView: () => void
@@ -45,6 +52,11 @@ export const CanvasDock: React.FC<CanvasDockProps> = ({
   onExpandAll,
   onCollapseAll,
   onFocusRoot,
+  selectedCount = 0,
+  onExpandSelected,
+  onCollapseSelected,
+  isBoxSelect = false,
+  onToggleBoxSelect,
   onFitView,
   onOpenCreateRoot,
   dirtyCount,
@@ -74,18 +86,17 @@ export const CanvasDock: React.FC<CanvasDockProps> = ({
         </div>
 
         <div className="flex items-center border-r border-ui-border-base pr-2.5">
-          <Tooltip content={direction === "TB" ? "Switch to Mind Map (Left-to-Right)" : "Switch to Vertical Tree (Top-to-Bottom)"}>
-            <button
-              type="button"
-              onClick={onToggleDirection}
-              className="flex items-center gap-1.5 px-2.5 py-1 text-xs font-medium rounded-lg bg-ui-bg-subtle text-ui-fg-base hover:bg-ui-bg-base border border-ui-border-base transition-colors"
-            >
-              <span>{direction === "TB" ? "⬇ Vertical" : "➡ Mind Map"}</span>
-            </button>
-          </Tooltip>
+          <button
+            type="button"
+            title={direction === "TB" ? "Switch to Mind Map (Left-to-Right)" : "Switch to Vertical Tree (Top-to-Bottom)"}
+            onClick={onToggleDirection}
+            className="flex items-center gap-1.5 px-2.5 py-1 text-xs font-medium rounded-lg bg-ui-bg-subtle text-ui-fg-base hover:bg-ui-bg-base border border-ui-border-base transition-colors"
+          >
+            <span>{direction === "TB" ? "⬇ Vertical" : "➡ Mind Map"}</span>
+          </button>
         </div>
 
-        <div className="relative w-40 sm:w-48">
+        <div className="relative w-36 sm:w-44">
           <input
             type="text"
             placeholder="Search categories…"
@@ -96,48 +107,85 @@ export const CanvasDock: React.FC<CanvasDockProps> = ({
           <MagnifyingGlass className="absolute left-2 top-1/2 -translate-y-1/2 w-3.5 h-3.5 text-ui-fg-muted pointer-events-none" />
         </div>
 
+        {/* Expand / Collapse Section with Selective awareness */}
         <div className="flex items-center gap-1 border-l border-ui-border-base pl-2.5">
-          <Tooltip content="Expand All Categories">
-            <button
-              type="button"
-              onClick={onExpandAll}
-              className="px-2 py-1 text-xs font-medium text-ui-fg-subtle hover:text-ui-fg-base hover:bg-ui-bg-subtle rounded-md transition-colors"
-            >
-              Expand
-            </button>
-          </Tooltip>
-
-          <Tooltip content="Collapse All Subcategories">
-            <button
-              type="button"
-              onClick={onCollapseAll}
-              className="px-2 py-1 text-xs font-medium text-ui-fg-subtle hover:text-ui-fg-base hover:bg-ui-bg-subtle rounded-md transition-colors"
-            >
-              Collapse
-            </button>
-          </Tooltip>
+          {selectedCount > 0 ? (
+            <>
+              <button
+                type="button"
+                title={`Expand selected category (${selectedCount} selected)`}
+                onClick={onExpandSelected || onExpandAll}
+                className="px-2 py-1 text-xs font-medium bg-ui-bg-interactive text-ui-fg-on-color rounded-md transition-colors"
+              >
+                Expand ({selectedCount})
+              </button>
+              <button
+                type="button"
+                title={`Collapse selected category (${selectedCount} selected)`}
+                onClick={onCollapseSelected || onCollapseAll}
+                className="px-2 py-1 text-xs font-medium bg-ui-bg-subtle text-ui-fg-base hover:bg-ui-bg-base border border-ui-border-base rounded-md transition-colors"
+              >
+                Collapse ({selectedCount})
+              </button>
+            </>
+          ) : (
+            <>
+              <button
+                type="button"
+                title="Expand All Categories"
+                onClick={onExpandAll}
+                className="px-2 py-1 text-xs font-medium text-ui-fg-subtle hover:text-ui-fg-base hover:bg-ui-bg-subtle rounded-md transition-colors"
+              >
+                Expand All
+              </button>
+              <button
+                type="button"
+                title="Collapse All Subcategories"
+                onClick={onCollapseAll}
+                className="px-2 py-1 text-xs font-medium text-ui-fg-subtle hover:text-ui-fg-base hover:bg-ui-bg-subtle rounded-md transition-colors"
+              >
+                Collapse All
+              </button>
+            </>
+          )}
+
+          <button
+            type="button"
+            title="Focus on Root Categories"
+            onClick={onFocusRoot}
+            className="px-2 py-1 text-xs font-medium text-ui-fg-subtle hover:text-ui-fg-base hover:bg-ui-bg-subtle rounded-md transition-colors"
+          >
+            Root
+          </button>
+        </div>
 
-          <Tooltip content="Focus on Root Categories">
+        {/* Box Selection / Marquee mode toggle */}
+        {onToggleBoxSelect && (
+          <div className="flex items-center border-l border-ui-border-base pl-2.5">
             <button
               type="button"
-              onClick={onFocusRoot}
-              className="px-2 py-1 text-xs font-medium text-ui-fg-subtle hover:text-ui-fg-base hover:bg-ui-bg-subtle rounded-md transition-colors"
+              title={isBoxSelect ? "Box Selection Active (Drag to outline cards). Click to switch to Pan" : "Click to enable Box Select marquee (Outline cards to move together)"}
+              onClick={onToggleBoxSelect}
+              className={`px-2 py-1 text-xs font-medium rounded-md transition-colors ${
+                isBoxSelect
+                  ? "bg-blue-600 text-white shadow-xs"
+                  : "text-ui-fg-subtle hover:text-ui-fg-base hover:bg-ui-bg-subtle"
+              }`}
             >
-              Root
+              ⛶ Box Select
             </button>
-          </Tooltip>
-        </div>
+          </div>
+        )}
 
         <div className="flex items-center gap-1 border-l border-ui-border-base pl-2.5">
-          <Tooltip content="Fit View (Center)">
-            <button
-              type="button"
-              onClick={onFitView}
-              className="p-1 text-ui-fg-subtle hover:text-ui-fg-base hover:bg-ui-bg-subtle rounded-md transition-colors"
-            >
-              <ArrowsPointingOut className="w-3.5 h-3.5" />
-            </button>
-          </Tooltip>
+          <button
+            type="button"
+            title="Fit View (Center)"
+            onClick={onFitView}
+            className="p-1 text-ui-fg-subtle hover:text-ui-fg-base hover:bg-ui-bg-subtle rounded-md transition-colors"
+          >
+            <ArrowsPointingOut className="w-3.5 h-3.5" />
+          </button>
         </div>
 
         <div className="border-l border-ui-border-base pl-2.5">

package/src/admin/components/category-tree/category-node.tsx

@@ -1,6 +1,6 @@
 import React, { memo } from "react"
 import { Handle, Position } from "@xyflow/react"
-import { Text, Tooltip } from "@medusajs/ui"
+import { Text } from "@medusajs/ui"
 import { Plus, PencilSquare, Folder, ArrowUturnLeft } from "@medusajs/icons"
 import { TierBars } from "./tier-bars"
 import { CategoryNodeData } from "./types"
@@ -15,7 +15,9 @@ export const CategoryNode = memo(({ id, data, selected }: CategoryNodeProps) =>
   const {
     category,
     tier,
+    siblingRank,
     superscriptRank,
+    branchColor,
     salesChannels,
     isCollapsed,
     hiddenDescendantCount,
@@ -25,6 +27,8 @@ export const CategoryNode = memo(({ id, data, selected }: CategoryNodeProps) =>
     onAddChild,
     onEdit,
     onDetach,
+    onMoveSiblingUp,
+    onMoveSiblingDown,
   } = data
 
   const isTB = direction === "TB"
@@ -42,6 +46,13 @@ export const CategoryNode = memo(({ id, data, selected }: CategoryNodeProps) =>
           ? "ring-2 ring-ui-border-interactive border-transparent shadow-lg"
           : "border-ui-border-base shadow-sm hover:shadow-md hover:border-ui-border-strong"
       } ${isDimmed ? "opacity-35 grayscale" : "opacity-100"}`}
+      style={
+        selected && branchColor
+          ? {
+              boxShadow: `0 0 0 2px ${branchColor}, 0 10px 15px -3px rgba(0, 0, 0, 0.1)`,
+            }
+          : undefined
+      }
     >
       <Handle
         type="target"
@@ -49,7 +60,7 @@ export const CategoryNode = memo(({ id, data, selected }: CategoryNodeProps) =>
         className="!w-2.5 !h-2.5 !bg-ui-border-interactive !border-2 !border-white dark:!border-neutral-900 transition-transform group-hover:scale-125"
       />
 
-      <TierBars tier={tier} />
+      <TierBars tier={tier} color={branchColor} />
 
       <div className="flex flex-1 items-center gap-2.5 px-2.5 py-2 min-w-0 overflow-hidden">
         <div className="relative w-11 h-11 rounded-lg overflow-hidden flex-shrink-0 border border-ui-border-base bg-ui-bg-subtle flex items-center justify-center shadow-2xs">
@@ -74,20 +85,48 @@ export const CategoryNode = memo(({ id, data, selected }: CategoryNodeProps) =>
         </div>
 
         <div className="flex flex-col min-w-0 flex-1 justify-center">
-          <div className="flex items-center gap-1.5 min-w-0">
+          <div className="flex items-center gap-1 min-w-0">
             <span
-              className="text-xs font-semibold text-ui-fg-base truncate leading-snug"
+              className="text-xs font-semibold text-ui-fg-base truncate leading-snug flex-1 min-w-0"
               title={category.name}
             >
               {category.name}
             </span>
             {superscriptRank && (
-              <span
-                className="text-[11px] font-bold font-mono text-ui-fg-subtle px-1 py-0.5 rounded bg-ui-bg-subtle/80 flex-shrink-0"
-                title={`Rank #${data.siblingRank} among siblings`}
-              >
-                {superscriptRank}
-              </span>
+              <div className="flex items-center gap-0.5 flex-shrink-0">
+                <span
+                  className="text-[11px] font-bold font-mono text-ui-fg-subtle px-1 py-0.5 rounded bg-ui-bg-subtle/80"
+                  title={`Rank #${siblingRank} among siblings (Storefront sort order)`}
+                >
+                  {superscriptRank}
+                </span>
+                {onMoveSiblingUp && (
+                  <button
+                    type="button"
+                    title="Move Up in Storefront Order (↑)"
+                    onClick={(e) => {
+                      e.stopPropagation()
+                      onMoveSiblingUp(id)
+                    }}
+                    className="w-3.5 h-3.5 flex items-center justify-center text-[10px] font-bold text-ui-fg-muted hover:text-ui-fg-base hover:bg-ui-bg-subtle rounded transition-colors"
+                  >
+                    ↑
+                  </button>
+                )}
+                {onMoveSiblingDown && (
+                  <button
+                    type="button"
+                    title="Move Down in Storefront Order (↓)"
+                    onClick={(e) => {
+                      e.stopPropagation()
+                      onMoveSiblingDown(id)
+                    }}
+                    className="w-3.5 h-3.5 flex items-center justify-center text-[10px] font-bold text-ui-fg-muted hover:text-ui-fg-base hover:bg-ui-bg-subtle rounded transition-colors"
+                  >
+                    ↓
+                  </button>
+                )}
+              </div>
             )}
           </div>
 
@@ -134,45 +173,42 @@ export const CategoryNode = memo(({ id, data, selected }: CategoryNodeProps) =>
       </div>
 
       <div className="absolute -top-3 right-2 hidden group-hover:flex items-center gap-1 px-1.5 py-0.5 bg-ui-bg-base/95 backdrop-blur-sm border border-ui-border-base rounded-full shadow-md z-20">
-        <Tooltip content="Add Subcategory">
-          <button
-            type="button"
-            onClick={(e) => {
-              e.stopPropagation()
-              onAddChild(category)
-            }}
-            className="p-1 text-ui-fg-subtle hover:text-ui-fg-base hover:bg-ui-bg-subtle rounded-full transition-colors"
-          >
-            <Plus className="w-3.5 h-3.5" />
-          </button>
-        </Tooltip>
+        <button
+          type="button"
+          title="Add Subcategory"
+          onClick={(e) => {
+            e.stopPropagation()
+            onAddChild(category)
+          }}
+          className="p-1 text-ui-fg-subtle hover:text-ui-fg-base hover:bg-ui-bg-subtle rounded-full transition-colors"
+        >
+          <Plus className="w-3.5 h-3.5" />
+        </button>
+
+        <button
+          type="button"
+          title="Edit Category"
+          onClick={(e) => {
+            e.stopPropagation()
+            onEdit(category)
+          }}
+          className="p-1 text-ui-fg-subtle hover:text-ui-fg-base hover:bg-ui-bg-subtle rounded-full transition-colors"
+        >
+          <PencilSquare className="w-3.5 h-3.5" />
+        </button>
 
-        <Tooltip content="Edit Category">
+        {category.parent_category_id && (
           <button
             type="button"
+            title="Promote to Root (Detach)"
             onClick={(e) => {
               e.stopPropagation()
-              onEdit(category)
+              onDetach(id)
             }}
-            className="p-1 text-ui-fg-subtle hover:text-ui-fg-base hover:bg-ui-bg-subtle rounded-full transition-colors"
+            className="p-1 text-ui-fg-subtle hover:text-amber-600 hover:bg-amber-50 dark:hover:bg-amber-950/50 rounded-full transition-colors"
           >
-            <PencilSquare className="w-3.5 h-3.5" />
+            <ArrowUturnLeft className="w-3.5 h-3.5" />
           </button>
-        </Tooltip>
-
-        {category.parent_category_id && (
-          <Tooltip content="Promote to Root (Detach)">
-            <button
-              type="button"
-              onClick={(e) => {
-                e.stopPropagation()
-                onDetach(id)
-              }}
-              className="p-1 text-ui-fg-subtle hover:text-amber-600 hover:bg-amber-50 dark:hover:bg-amber-950/50 rounded-full transition-colors"
-            >
-              <ArrowUturnLeft className="w-3.5 h-3.5" />
-            </button>
-          </Tooltip>
         )}
       </div>
 

package/src/admin/components/category-tree/category-tree-canvas.tsx

@@ -11,9 +11,10 @@ import {
   Node,
   useReactFlow,
   ReactFlowProvider,
+  SelectionMode,
 } from "@xyflow/react"
 import "@xyflow/react/dist/style.css"
-import { toast } from "@medusajs/ui"
+import { toast, TooltipProvider } from "@medusajs/ui"
 
 import { CategoryNode } from "./category-node"
 import { CustomSmoothStepEdge } from "./custom-edge"
@@ -24,11 +25,13 @@ import { CategoryTreeNode, SalesChannelInfo } from "./types"
 import {
   computeTiers,
   computeSiblingRanks,
+  computeBranchColors,
+  moveSiblingRank,
   wouldCreateCycle,
   getVisibleTree,
   computeMoves,
 } from "./lib/tree-state"
-import { computeDagreLayout } from "./lib/layout-engine"
+import { computeTreeLayout } from "./lib/layout-engine"
 import { sdk } from "../../lib/sdk"
 
 const nodeTypes = {
@@ -52,6 +55,8 @@ const CanvasInner: React.FC = () => {
   const [selectedStorefront, setSelectedStorefront] = useState<string>("all")
   const [searchQuery, setSearchQuery] = useState("")
   const [collapsedIds, setCollapsedIds] = useState<Set<string>>(new Set())
+  const [isBoxSelect, setIsBoxSelect] = useState(false)
+  const [selectedNodeIds, setSelectedNodeIds] = useState<string[]>([])
 
   const [createDrawerOpen, setCreateDrawerOpen] = useState(false)
   const [createParentCategory, setCreateParentCategory] = useState<CategoryTreeNode | null>(null)
@@ -95,6 +100,7 @@ const CanvasInner: React.FC = () => {
 
     const tiers = computeTiers(categories)
     const siblingRanks = computeSiblingRanks(categories)
+    const branchColors = computeBranchColors(categories)
 
     const enriched: CategoryTreeNode[] = categories.map((cat) => {
       const kids = map.get(cat.id) || []
@@ -105,6 +111,7 @@ const CanvasInner: React.FC = () => {
         sibling_rank: rankInfo?.rankNum || 1,
         children_count: kids.length,
         has_children: kids.length > 0,
+        branch_color: branchColors.get(cat.id),
       }
     })
 
@@ -123,6 +130,32 @@ const CanvasInner: React.FC = () => {
     })
   }, [])
 
+  const handleExpandSelected = useCallback(() => {
+    if (selectedNodeIds.length === 0) return
+    setCollapsedIds((prev) => {
+      const next = new Set(prev)
+      selectedNodeIds.forEach((id) => next.delete(id))
+      return next
+    })
+  }, [selectedNodeIds])
+
+  const handleCollapseSelected = useCallback(() => {
+    if (selectedNodeIds.length === 0) return
+    setCollapsedIds((prev) => {
+      const next = new Set(prev)
+      selectedNodeIds.forEach((id) => next.add(id))
+      return next
+    })
+  }, [selectedNodeIds])
+
+  const handleMoveSiblingUp = useCallback((id: string) => {
+    setCategories((prev) => moveSiblingRank(prev, id, "up"))
+  }, [])
+
+  const handleMoveSiblingDown = useCallback((id: string) => {
+    setCategories((prev) => moveSiblingRank(prev, id, "down"))
+  }, [])
+
   const handleAddChild = useCallback((parent: CategoryTreeNode) => {
     setCreateParentCategory(parent)
     setCreateDrawerOpen(true)
@@ -171,6 +204,7 @@ const CanvasInner: React.FC = () => {
           tier: cat.tier,
           siblingRank: rankInfo?.rankNum || 1,
           superscriptRank: rankInfo?.superscript || "¹",
+          branchColor: cat.branch_color,
           salesChannels,
           isCollapsed: collapsedIds.has(cat.id),
           hiddenDescendantCount: cat.children_count,
@@ -180,6 +214,8 @@ const CanvasInner: React.FC = () => {
           onAddChild: handleAddChild,
           onEdit: handleEdit,
           onDetach: handleDetach,
+          onMoveSiblingUp: handleMoveSiblingUp,
+          onMoveSiblingDown: handleMoveSiblingDown,
         },
       }
     })
@@ -192,6 +228,10 @@ const CanvasInner: React.FC = () => {
           source: cat.parent_category_id,
           target: cat.id,
           type: "smoothstep",
+          style: {
+            stroke: cat.branch_color || "#64748b",
+            strokeWidth: 2,
+          },
         })
       }
     }
@@ -203,7 +243,7 @@ const CanvasInner: React.FC = () => {
       childrenMap
     )
 
-    const { nodes: layoutedNodes, edges: layoutedEdges } = computeDagreLayout(
+    const { nodes: layoutedNodes, edges: layoutedEdges } = computeTreeLayout(
       visibleNodes,
       visibleEdges,
       { direction }
@@ -223,6 +263,8 @@ const CanvasInner: React.FC = () => {
     handleAddChild,
     handleEdit,
     handleDetach,
+    handleMoveSiblingUp,
+    handleMoveSiblingDown,
     setNodes,
     setEdges,
   ])
@@ -311,6 +353,11 @@ const CanvasInner: React.FC = () => {
           onExpandAll={handleExpandAll}
           onCollapseAll={handleCollapseAll}
           onFocusRoot={handleFocusRoot}
+          selectedCount={selectedNodeIds.length}
+          onExpandSelected={handleExpandSelected}
+          onCollapseSelected={handleCollapseSelected}
+          isBoxSelect={isBoxSelect}
+          onToggleBoxSelect={() => setIsBoxSelect((prev) => !prev)}
           onZoomIn={() => zoomIn({ duration: 300 })}
           onZoomOut={() => zoomOut({ duration: 300 })}
           onFitView={() => fitView({ padding: 0.25, duration: 400 })}
@@ -332,6 +379,13 @@ const CanvasInner: React.FC = () => {
         onEdgesChange={onEdgesChange}
         onConnect={onConnect}
         onEdgesDelete={onEdgesDelete}
+        onSelectionChange={useCallback(({ nodes }: { nodes: Node[] }) => {
+          setSelectedNodeIds(nodes.map((n) => n.id))
+        }, [])}
+        selectionMode={SelectionMode.Partial}
+        selectionOnDrag={isBoxSelect}
+        panOnDrag={isBoxSelect ? [1, 2] : true}
+        elementsSelectable={true}
         nodeTypes={nodeTypes}
         edgeTypes={edgeTypes}
         minZoom={0.2}
@@ -390,8 +444,10 @@ const CanvasInner: React.FC = () => {
 
 export const CategoryTreeCanvas: React.FC = () => {
   return (
-    <ReactFlowProvider>
-      <CanvasInner />
-    </ReactFlowProvider>
+    <TooltipProvider>
+      <ReactFlowProvider>
+        <CanvasInner />
+      </ReactFlowProvider>
+    </TooltipProvider>
   )
 }