@hyunsdev/ui 0.1.0

package/dist/layouts/workbench/index.js

@@ -0,0 +1,2457 @@
+import {
+  sidedockFocusClass,
+  sidedockOutlineStrokeClass,
+  sidedockShellClass
+} from "../../chunk-BI3KKBIC.js";
+import {
+  useIsMobile
+} from "../../chunk-WJRJBMFN.js";
+import {
+  Skeleton
+} from "../../chunk-KJJB2PVC.js";
+import {
+  Sheet,
+  SheetContent,
+  SheetDescription,
+  SheetHeader,
+  SheetTitle
+} from "../../chunk-4QIWBOF4.js";
+import {
+  Separator
+} from "../../chunk-6ANDNGHD.js";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger
+} from "../../chunk-D3SP7GL3.js";
+import "../../chunk-TU5CYBB4.js";
+import "../../chunk-O2BG2KSY.js";
+import {
+  cn
+} from "../../chunk-DN2AEEA2.js";
+
+// src/layouts/workbench/core/components/WorkbenchRibbonBar.tsx
+import * as React2 from "react";
+import * as Slot from "@radix-ui/react-slot";
+import { cva } from "class-variance-authority";
+
+// src/layouts/workbench/core/contexts/WorkbenchPrimarySidebarContext.tsx
+import React from "react";
+
+// src/layouts/workbench/core/workbench.const.tsx
+var WORKBENCH_PRIMARY_SIDEBAR_COOKIE_NAME = "workbench_primary_sidebar_state";
+var WORKBENCH_SECONDARY_SIDEBAR_COOKIE_NAME = "workbench_secondary_sidebar_state";
+var WORKBENCH_SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7;
+var WORKBENCH_SIDEBAR_MIN_WIDTH = "250px";
+var WORKBENCH_SIDEBAR_DEFAULT_WIDTH = "270px";
+var WORKBENCH_SIDEBAR_MAX_WIDTH = "400px";
+var WORKBENCH_SIDEBAR_WIDTH_MOBILE = "400px";
+
+// src/layouts/workbench/core/contexts/WorkbenchPrimarySidebarContext.tsx
+import { jsx } from "react/jsx-runtime";
+var WorkbenchPrimarySidebarContext = React.createContext(null);
+function WorkbenchPrimarySidebarProvider({
+  defaultOpen = true,
+  open: openProp,
+  onOpenChange: setOpenProp,
+  className,
+  style,
+  children,
+  ...props
+}) {
+  const isMobile = useIsMobile();
+  const [openMobile, setOpenMobile] = React.useState(false);
+  const [_open, _setOpen] = React.useState(defaultOpen);
+  const open = openProp ?? _open;
+  const setOpen = React.useCallback(
+    (value) => {
+      const nextOpen = typeof value === "function" ? value(open) : value;
+      if (setOpenProp) {
+        setOpenProp(nextOpen);
+      } else {
+        _setOpen(nextOpen);
+      }
+      document.cookie = `${WORKBENCH_PRIMARY_SIDEBAR_COOKIE_NAME}=${nextOpen}; path=/; max-age=${WORKBENCH_SIDEBAR_COOKIE_MAX_AGE}`;
+    },
+    [open, setOpenProp]
+  );
+  const toggleSidebar = React.useCallback(() => {
+    if (isMobile) {
+      setOpenMobile((currentOpen) => !currentOpen);
+      return;
+    }
+    setOpen((currentOpen) => !currentOpen);
+  }, [isMobile, setOpen]);
+  const state = open ? "expanded" : "collapsed";
+  const contextValue = React.useMemo(
+    () => ({
+      state,
+      open,
+      setOpen,
+      openMobile,
+      setOpenMobile,
+      isMobile,
+      toggleSidebar
+    }),
+    [state, open, setOpen, openMobile, isMobile, toggleSidebar]
+  );
+  return /* @__PURE__ */ jsx(WorkbenchPrimarySidebarContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-slot": "sidebar-wrapper",
+      style,
+      className: cn(
+        "group/sidebar-wrapper has-data-[variant=inset]:bg-sidedock-background flex min-h-svh w-full",
+        className
+      ),
+      ...props,
+      children
+    }
+  ) });
+}
+function useWorkbenchPrimarySidebar() {
+  const context = React.useContext(WorkbenchPrimarySidebarContext);
+  if (!context) {
+    throw new Error(
+      "useWorkbenchPrimarySidebar must be used within a WorkbenchPrimarySidebarProvider"
+    );
+  }
+  return context;
+}
+
+// src/layouts/workbench/core/components/WorkbenchRibbonBar.tsx
+import { jsx as jsx2, jsxs } from "react/jsx-runtime";
+var WORKBENCH_RIBBON_BAR_WIDTH = "52px";
+var ribbonBarButtonVariants = cva(
+  cn(
+    "text-sidedock-text hover:bg-sidedock-hover-background hover:text-sidedock-text-hover active:bg-sidedock-active-background active:text-sidedock-text-active data-active:bg-sidedock-active-background data-active:text-sidedock-text-active inline-flex shrink-0 cursor-pointer items-center justify-center rounded-md border border-transparent outline-hidden transition-colors disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+    sidedockFocusClass
+  ),
+  {
+    variants: {
+      size: {
+        default: "size-9 [&_svg:not([class*=size-])]:size-5",
+        sm: "size-8 [&_svg:not([class*=size-])]:size-4"
+      }
+    },
+    defaultVariants: {
+      size: "default"
+    }
+  }
+);
+function WorkbenchRibbonBar({ className, ...props }) {
+  const primarySidebar = React2.useContext(WorkbenchPrimarySidebarContext);
+  return /* @__PURE__ */ jsx2(
+    "aside",
+    {
+      "data-slot": "workbench-ribbon-bar",
+      "data-primary-sidebar-state": primarySidebar?.state,
+      className: cn(
+        "bg-sidedock-background text-sidedock-text border-sidedock-border relative z-[calc(var(--layer-sidebar)+1)] flex h-svh w-(--workbench-ribbon-bar-width) shrink-0 flex-col items-center border-r data-[primary-sidebar-state=collapsed]:border-r-transparent",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function WorkbenchRibbonBarHeader({ className, ...props }) {
+  return /* @__PURE__ */ jsx2(
+    "div",
+    {
+      "data-slot": "workbench-ribbon-bar-header",
+      className: cn("flex w-full shrink-0 flex-col items-center gap-1 p-2", className),
+      ...props
+    }
+  );
+}
+function WorkbenchRibbonBarContent({ className, ...props }) {
+  return /* @__PURE__ */ jsx2(
+    "div",
+    {
+      "data-slot": "workbench-ribbon-bar-content",
+      className: cn(
+        "no-scrollbar flex min-h-0 w-full flex-1 flex-col items-center gap-1 overflow-y-auto p-2",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function WorkbenchRibbonBarFooter({ className, ...props }) {
+  return /* @__PURE__ */ jsx2(
+    "div",
+    {
+      "data-slot": "workbench-ribbon-bar-footer",
+      className: cn("flex w-full shrink-0 flex-col items-center gap-1 p-2", className),
+      ...props
+    }
+  );
+}
+function WorkbenchRibbonBarSeparator({ className, ...props }) {
+  return /* @__PURE__ */ jsx2(
+    "div",
+    {
+      role: "separator",
+      "data-slot": "workbench-ribbon-bar-separator",
+      className: cn("bg-sidedock-border my-1 h-px w-8 shrink-0", className),
+      ...props
+    }
+  );
+}
+function WorkbenchRibbonBarButton({
+  asChild = false,
+  isActive = false,
+  size = "default",
+  tooltip,
+  className,
+  type = "button",
+  "aria-label": ariaLabel,
+  ...props
+}) {
+  const Comp = asChild ? Slot.Root : "button";
+  const tooltipProps = typeof tooltip === "string" ? { children: tooltip } : tooltip;
+  const label = ariaLabel ?? (typeof tooltip === "string" ? tooltip : void 0);
+  const button = /* @__PURE__ */ jsx2(
+    Comp,
+    {
+      "data-slot": "workbench-ribbon-bar-button",
+      "data-active": isActive || void 0,
+      "aria-label": label,
+      type: asChild ? void 0 : type,
+      className: cn(ribbonBarButtonVariants({ size }), className),
+      ...props
+    }
+  );
+  if (!tooltipProps) {
+    return button;
+  }
+  return /* @__PURE__ */ jsxs(Tooltip, { children: [
+    /* @__PURE__ */ jsx2(TooltipTrigger, { asChild: true, children: button }),
+    /* @__PURE__ */ jsx2(TooltipContent, { side: "right", align: "center", ...tooltipProps })
+  ] });
+}
+
+// src/layouts/workbench/core/components/Workbench.tsx
+import { jsx as jsx3 } from "react/jsx-runtime";
+function Workbench({ className, style, ...props }) {
+  const workbenchStyle = {
+    "--workbench-ribbon-bar-width": WORKBENCH_RIBBON_BAR_WIDTH,
+    ...style
+  };
+  return /* @__PURE__ */ jsx3(
+    "div",
+    {
+      "data-slot": "workbench",
+      style: workbenchStyle,
+      className: cn(
+        "bg-workbench-background flex min-h-svh w-full has-data-[slot=workbench-ribbon-bar]:[--workbench-ribbon-bar-offset:var(--workbench-ribbon-bar-width)]",
+        className
+      ),
+      ...props
+    }
+  );
+}
+
+// src/layouts/workbench/core/contexts/WorkbenchSecondarySidebarContext.tsx
+import React3 from "react";
+import { jsx as jsx4 } from "react/jsx-runtime";
+var WorkbenchSecondarySidebarContext = React3.createContext(null);
+function WorkbenchSecondarySidebarProvider({
+  defaultOpen = true,
+  open: openProp,
+  onOpenChange: setOpenProp,
+  className,
+  style,
+  children,
+  ...props
+}) {
+  const isMobile = useIsMobile();
+  const [openMobile, setOpenMobile] = React3.useState(false);
+  const [_open, _setOpen] = React3.useState(defaultOpen);
+  const open = openProp ?? _open;
+  const setOpen = React3.useCallback(
+    (value) => {
+      const nextOpen = typeof value === "function" ? value(open) : value;
+      if (setOpenProp) {
+        setOpenProp(nextOpen);
+      } else {
+        _setOpen(nextOpen);
+      }
+      document.cookie = `${WORKBENCH_SECONDARY_SIDEBAR_COOKIE_NAME}=${nextOpen}; path=/; max-age=${WORKBENCH_SIDEBAR_COOKIE_MAX_AGE}`;
+    },
+    [open, setOpenProp]
+  );
+  const toggleSidebar = React3.useCallback(() => {
+    if (isMobile) {
+      setOpenMobile((currentOpen) => !currentOpen);
+      return;
+    }
+    setOpen((currentOpen) => !currentOpen);
+  }, [isMobile, setOpen]);
+  const state = open ? "expanded" : "collapsed";
+  const contextValue = React3.useMemo(
+    () => ({
+      state,
+      open,
+      setOpen,
+      openMobile,
+      setOpenMobile,
+      isMobile,
+      toggleSidebar
+    }),
+    [state, open, setOpen, openMobile, isMobile, toggleSidebar]
+  );
+  return /* @__PURE__ */ jsx4(WorkbenchSecondarySidebarContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx4(
+    "div",
+    {
+      "data-slot": "sidebar-secondary-wrapper",
+      style,
+      className: cn("contents", className),
+      ...props,
+      children
+    }
+  ) });
+}
+function useWorkbenchSecondarySidebar() {
+  const context = React3.useContext(WorkbenchSecondarySidebarContext);
+  if (!context) {
+    throw new Error(
+      "useWorkbenchSecondarySidebar must be used within a WorkbenchSecondarySidebarProvider"
+    );
+  }
+  return context;
+}
+
+// src/layouts/workbench/core/components/WorkbenchProvider.tsx
+import { jsx as jsx5 } from "react/jsx-runtime";
+function WorkbenchProvider({ children }) {
+  return /* @__PURE__ */ jsx5(WorkbenchPrimarySidebarProvider, { children: /* @__PURE__ */ jsx5(WorkbenchSecondarySidebarProvider, { children }) });
+}
+
+// src/layouts/workbench/core/components/panel/WorkbenchContentArea.tsx
+import * as React4 from "react";
+import * as ResizablePrimitive from "react-resizable-panels";
+import { jsx as jsx6, jsxs as jsxs2 } from "react/jsx-runtime";
+var WORKBENCH_CONTEXT_AREA_PANEL_MIN_SIZE = "220px";
+var WORKBENCH_CONTEXT_AREA_RESIZE_TARGET_MINIMUM_SIZE = {
+  coarse: 36,
+  fine: 12
+};
+function getPanelKey(child, index) {
+  return React4.isValidElement(child) && child.key != null ? child.key : index;
+}
+function WorkbenchContentArea({
+  className,
+  children,
+  orientation = "horizontal",
+  ...props
+}) {
+  const panels = React4.Children.toArray(children);
+  const hasResizablePanels = panels.length > 1;
+  return /* @__PURE__ */ jsx6(
+    "main",
+    {
+      "data-slot": "sidebar-inset",
+      className: cn(
+        "relative z-[calc(var(--layer-sidebar)+1)] flex min-h-dvh min-w-0 flex-1 gap-1 rounded-lg md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow-sm md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ml-2",
+        className
+      ),
+      ...props,
+      children: hasResizablePanels ? /* @__PURE__ */ jsx6(WorkbenchPanelGroup, { orientation, children: panels }) : children
+    }
+  );
+}
+function WorkbenchPanelGroup({
+  className,
+  children,
+  orientation = "horizontal",
+  style,
+  ...props
+}) {
+  const panels = React4.Children.toArray(children);
+  return /* @__PURE__ */ jsx6(
+    ResizablePrimitive.Group,
+    {
+      ...props,
+      "data-slot": "workbench-panel-group",
+      orientation,
+      resizeTargetMinimumSize: WORKBENCH_CONTEXT_AREA_RESIZE_TARGET_MINIMUM_SIZE,
+      style: { overflow: "visible", ...style },
+      className: cn(
+        "relative z-[calc(var(--layer-sidebar)+1)] flex h-full min-h-0 w-full min-w-0 flex-1 aria-[orientation=vertical]:flex-col",
+        className
+      ),
+      children: panels.map((panel, index) => /* @__PURE__ */ jsxs2(React4.Fragment, { children: [
+        index > 0 && /* @__PURE__ */ jsx6(WorkbenchContextAreaRail, {}),
+        /* @__PURE__ */ jsx6(
+          ResizablePrimitive.Panel,
+          {
+            "data-slot": "workbench-context-area-panel",
+            defaultSize: `${100 / panels.length}%`,
+            minSize: WORKBENCH_CONTEXT_AREA_PANEL_MIN_SIZE,
+            style: { overflow: "visible" },
+            className: "relative min-h-0 min-w-0",
+            children: panel
+          }
+        )
+      ] }, getPanelKey(panel, index)))
+    }
+  );
+}
+function WorkbenchContextAreaRail({
+  className,
+  "aria-label": ariaLabel = "Resize workbench panels",
+  ...props
+}) {
+  return /* @__PURE__ */ jsx6(
+    ResizablePrimitive.Separator,
+    {
+      ...props,
+      "data-slot": "workbench-context-area-rail",
+      "aria-label": ariaLabel,
+      className: cn(
+        "hover:after:bg-sidedock-border focus-visible:ring-focus-ring relative isolate z-[calc(var(--layer-popover)+1)] flex w-1 cursor-col-resize touch-none items-stretch justify-center bg-transparent outline-hidden transition-colors after:absolute after:inset-y-0 after:left-1/2 after:w-px after:-translate-x-1/2 after:bg-transparent after:transition-colors focus-visible:ring-1",
+        "aria-[orientation=horizontal]:h-1 aria-[orientation=horizontal]:w-full aria-[orientation=horizontal]:cursor-row-resize aria-[orientation=horizontal]:items-center aria-[orientation=horizontal]:after:inset-x-0 aria-[orientation=horizontal]:after:inset-y-auto aria-[orientation=horizontal]:after:top-1/2 aria-[orientation=horizontal]:after:h-px aria-[orientation=horizontal]:after:w-full aria-[orientation=horizontal]:after:translate-x-0 aria-[orientation=horizontal]:after:-translate-y-1/2",
+        className
+      )
+    }
+  );
+}
+
+// src/layouts/workbench/core/components/sidebar/WorkbenchSidebar.tsx
+import * as React5 from "react";
+import * as Slot2 from "@radix-ui/react-slot";
+import { cva as cva2 } from "class-variance-authority";
+import { jsx as jsx7, jsxs as jsxs3 } from "react/jsx-runtime";
+var WORKBENCH_SIDEBAR_RESIZE_STEP = 16;
+var WORKBENCH_SIDEBAR_DRAG_THRESHOLD = 3;
+var WorkbenchSidebarVisualContext = React5.createContext(null);
+function useWorkbenchSidebarVisualContext() {
+  const context = React5.useContext(WorkbenchSidebarVisualContext);
+  if (!context) {
+    throw new Error("Workbench sidebar components must be used within a sidebar shell.");
+  }
+  return context;
+}
+function toPixelWidth(width) {
+  const parsedWidth = Number.parseInt(width, 10);
+  return Number.isNaN(parsedWidth) ? 0 : parsedWidth;
+}
+var WORKBENCH_SIDEBAR_MIN_WIDTH_PX = toPixelWidth(WORKBENCH_SIDEBAR_MIN_WIDTH);
+var WORKBENCH_SIDEBAR_DEFAULT_WIDTH_PX = toPixelWidth(WORKBENCH_SIDEBAR_DEFAULT_WIDTH);
+var WORKBENCH_SIDEBAR_MAX_WIDTH_PX = toPixelWidth(WORKBENCH_SIDEBAR_MAX_WIDTH);
+function clampWorkbenchSidebarWidth(width) {
+  return Math.min(WORKBENCH_SIDEBAR_MAX_WIDTH_PX, Math.max(WORKBENCH_SIDEBAR_MIN_WIDTH_PX, width));
+}
+function SidebarRail({
+  className,
+  currentWidth,
+  label,
+  onClick,
+  onKeyDown,
+  onPointerDown,
+  side,
+  state,
+  ...props
+}) {
+  const isCollapsed = state === "collapsed";
+  const railCursorClass = isCollapsed ? side === "left" ? "cursor-e-resize" : "cursor-w-resize" : side === "left" ? "cursor-w-resize" : "cursor-e-resize";
+  const railStyle = React5.useMemo(() => {
+    const left = side === "left" ? isCollapsed ? "var(--workbench-ribbon-bar-offset, 0px)" : `calc(var(--workbench-ribbon-bar-offset, 0px) + ${currentWidth}px - 2px)` : isCollapsed ? "100vw" : `calc(100vw - ${currentWidth}px)`;
+    return { left };
+  }, [currentWidth, isCollapsed, side]);
+  return /* @__PURE__ */ jsx7(
+    "button",
+    {
+      type: "button",
+      "data-sidebar": "rail",
+      "data-slot": "sidebar-rail",
+      "aria-label": label,
+      "aria-orientation": "vertical",
+      "aria-valuemax": WORKBENCH_SIDEBAR_MAX_WIDTH_PX,
+      "aria-valuemin": WORKBENCH_SIDEBAR_MIN_WIDTH_PX,
+      "aria-valuenow": currentWidth,
+      tabIndex: 0,
+      onClick,
+      onKeyDown,
+      onPointerDown,
+      title: label,
+      style: railStyle,
+      className: cn(
+        "hover:after:bg-sidedock-border fixed top-[var(--radius-panel)] bottom-[var(--radius-panel)] z-(--layer-popover) hidden w-4 touch-none transition-[background] ease-linear after:absolute after:inset-y-0 after:start-1/2 after:w-[2px] sm:flex ltr:-translate-x-1/2 rtl:-translate-x-1/2",
+        railCursorClass,
+        isCollapsed && "hover:bg-sidedock-background",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function WorkbenchSidebarShell({
+  className,
+  children,
+  description,
+  dir,
+  isMobile,
+  openMobile,
+  setOpenMobile,
+  side,
+  state,
+  style,
+  title,
+  toggleSidebar,
+  ...props
+}) {
+  const [sidebarWidth, setSidebarWidth] = React5.useState(
+    () => clampWorkbenchSidebarWidth(WORKBENCH_SIDEBAR_DEFAULT_WIDTH_PX)
+  );
+  const [isResizing, setIsResizing] = React5.useState(false);
+  const dragStateRef = React5.useRef({
+    pointerId: null,
+    startX: 0,
+    startWidth: WORKBENCH_SIDEBAR_DEFAULT_WIDTH_PX
+  });
+  const didDragRef = React5.useRef(false);
+  const handleRailPointerDown = React5.useCallback(
+    (event) => {
+      if (event.button !== 0) {
+        return;
+      }
+      event.preventDefault();
+      setIsResizing(true);
+      didDragRef.current = false;
+      dragStateRef.current = {
+        pointerId: event.pointerId,
+        startX: event.clientX,
+        startWidth: sidebarWidth
+      };
+      const handlePointerMove = (pointerEvent) => {
+        if (pointerEvent.pointerId !== dragStateRef.current.pointerId) {
+          return;
+        }
+        const deltaX = pointerEvent.clientX - dragStateRef.current.startX;
+        const signedDeltaX = side === "right" ? -deltaX : deltaX;
+        if (Math.abs(signedDeltaX) >= WORKBENCH_SIDEBAR_DRAG_THRESHOLD) {
+          didDragRef.current = true;
+        }
+        setSidebarWidth(clampWorkbenchSidebarWidth(dragStateRef.current.startWidth + signedDeltaX));
+      };
+      const handlePointerEnd = (pointerEvent) => {
+        if (pointerEvent.pointerId !== dragStateRef.current.pointerId) {
+          return;
+        }
+        dragStateRef.current.pointerId = null;
+        setIsResizing(false);
+        document.body.style.userSelect = "";
+        document.body.style.cursor = "";
+        window.removeEventListener("pointermove", handlePointerMove);
+        window.removeEventListener("pointerup", handlePointerEnd);
+        window.removeEventListener("pointercancel", handlePointerEnd);
+      };
+      document.body.style.userSelect = "none";
+      document.body.style.cursor = "ew-resize";
+      window.addEventListener("pointermove", handlePointerMove);
+      window.addEventListener("pointerup", handlePointerEnd);
+      window.addEventListener("pointercancel", handlePointerEnd);
+    },
+    [side, sidebarWidth]
+  );
+  const handleRailClick = React5.useCallback(
+    (event) => {
+      if (didDragRef.current) {
+        didDragRef.current = false;
+        event.preventDefault();
+        return;
+      }
+      toggleSidebar();
+    },
+    [toggleSidebar]
+  );
+  const handleRailKeyDown = React5.useCallback(
+    (event) => {
+      switch (event.key) {
+        case "ArrowLeft":
+          event.preventDefault();
+          setSidebarWidth(
+            (currentWidth) => clampWorkbenchSidebarWidth(
+              currentWidth + (side === "right" ? WORKBENCH_SIDEBAR_RESIZE_STEP : -WORKBENCH_SIDEBAR_RESIZE_STEP)
+            )
+          );
+          return;
+        case "ArrowRight":
+          event.preventDefault();
+          setSidebarWidth(
+            (currentWidth) => clampWorkbenchSidebarWidth(
+              currentWidth + (side === "right" ? -WORKBENCH_SIDEBAR_RESIZE_STEP : WORKBENCH_SIDEBAR_RESIZE_STEP)
+            )
+          );
+          return;
+        case "Home":
+          event.preventDefault();
+          setSidebarWidth(WORKBENCH_SIDEBAR_MIN_WIDTH_PX);
+          return;
+        case "End":
+          event.preventDefault();
+          setSidebarWidth(WORKBENCH_SIDEBAR_MAX_WIDTH_PX);
+          return;
+        default:
+      }
+    },
+    [side]
+  );
+  const desktopSidebarStyle = React5.useMemo(
+    () => ({
+      ...style,
+      "--sidebar-width": `${sidebarWidth}px`
+    }),
+    [sidebarWidth, style]
+  );
+  const contextValue = React5.useMemo(
+    () => ({
+      isMobile,
+      side,
+      state
+    }),
+    [isMobile, side, state]
+  );
+  const mobileSidebarStyle = {
+    "--sidebar-width": WORKBENCH_SIDEBAR_WIDTH_MOBILE
+  };
+  if (isMobile) {
+    return /* @__PURE__ */ jsx7(WorkbenchSidebarVisualContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx7(Sheet, { open: openMobile, onOpenChange: setOpenMobile, ...props, children: /* @__PURE__ */ jsxs3(
+      SheetContent,
+      {
+        dir,
+        "data-sidebar": "sidebar",
+        "data-slot": "sidebar",
+        "data-mobile": "true",
+        className: cn(sidedockShellClass, "w-(--sidebar-width) p-0 [&>button]:hidden"),
+        style: mobileSidebarStyle,
+        side,
+        children: [
+          /* @__PURE__ */ jsxs3(SheetHeader, { className: "sr-only", children: [
+            /* @__PURE__ */ jsx7(SheetTitle, { children: title }),
+            /* @__PURE__ */ jsx7(SheetDescription, { children: description })
+          ] }),
+          /* @__PURE__ */ jsx7("div", { className: "flex h-full w-full flex-col", children })
+        ]
+      }
+    ) }) });
+  }
+  return /* @__PURE__ */ jsx7(WorkbenchSidebarVisualContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxs3(
+    "div",
+    {
+      className: "group peer text-sidedock-text hidden md:block",
+      "data-state": state,
+      "data-collapsible": state === "collapsed" ? "offcanvas" : void 0,
+      "data-variant": "sidebar",
+      "data-side": side,
+      "data-slot": "sidebar",
+      style: desktopSidebarStyle,
+      children: [
+        /* @__PURE__ */ jsx7(
+          "div",
+          {
+            "data-slot": "sidebar-gap",
+            className: cn(
+              "relative w-(--sidebar-width) bg-transparent",
+              isResizing ? "transition-none" : "transition-[width] duration-200 ease-[cubic-bezier(0.1,0.5,0.2,1)]",
+              "group-data-[collapsible=offcanvas]:w-0",
+              "group-data-[side=right]:rotate-180",
+              "group-data-[collapsible=icon]:w-(--sidebar-width-icon)"
+            )
+          }
+        ),
+        /* @__PURE__ */ jsx7(
+          "div",
+          {
+            "data-slot": "sidebar-container",
+            "data-side": side,
+            className: cn(
+              "fixed inset-y-0 z-[var(--layer-sidebar)] hidden h-svh w-(--sidebar-width) data-[side=left]:left-[var(--workbench-ribbon-bar-offset,0px)] data-[side=left]:group-data-[collapsible=offcanvas]:left-[calc(var(--workbench-ribbon-bar-offset,0px)_-_var(--sidebar-width))] data-[side=right]:right-0 data-[side=right]:group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)] md:flex",
+              isResizing ? "transition-none" : "transition-[left,right,width] duration-200 ease-[cubic-bezier(0.1,0.5,0.2,1)]",
+              "group-data-[collapsible=icon]:w-(--sidebar-width-icon)",
+              className
+            ),
+            ...props,
+            children: /* @__PURE__ */ jsx7(
+              "div",
+              {
+                "data-sidebar": "sidebar",
+                "data-slot": "sidebar-inner",
+                className: cn(
+                  sidedockShellClass,
+                  "group-data-[variant=floating]:ring-sidedock-border flex size-full flex-col group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:shadow-sm group-data-[variant=floating]:ring-1"
+                ),
+                children
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ jsx7(
+          SidebarRail,
+          {
+            currentWidth: sidebarWidth,
+            label: `Resize ${title}`,
+            onClick: handleRailClick,
+            onKeyDown: handleRailKeyDown,
+            onPointerDown: handleRailPointerDown,
+            side,
+            state
+          }
+        )
+      ]
+    }
+  ) });
+}
+function WorkbenchSidebarHeader({ className, ...props }) {
+  return /* @__PURE__ */ jsx7(
+    "div",
+    {
+      "data-slot": "sidebar-header",
+      "data-sidebar": "header",
+      className: cn("flex flex-col gap-2 px-1.5 py-2", className),
+      ...props
+    }
+  );
+}
+function WorkbenchSidebarFooter({ className, ...props }) {
+  return /* @__PURE__ */ jsx7(
+    "div",
+    {
+      "data-slot": "sidebar-footer",
+      "data-sidebar": "footer",
+      className: cn("flex flex-col gap-2 px-1.5 py-2", className),
+      ...props
+    }
+  );
+}
+function WorkbenchSidebarSeparator({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx7(
+    Separator,
+    {
+      "data-slot": "sidebar-separator",
+      "data-sidebar": "separator",
+      className: cn("bg-sidedock-border mx-2 w-auto", className),
+      ...props
+    }
+  );
+}
+function WorkbenchSidebarContent({ className, ...props }) {
+  return /* @__PURE__ */ jsx7(
+    "div",
+    {
+      "data-slot": "sidebar-content",
+      "data-sidebar": "content",
+      className: cn(
+        "no-scrollbar flex min-h-0 flex-1 flex-col gap-0 overflow-auto group-data-[collapsible=icon]:overflow-hidden",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function WorkbenchSidebarGroup({ className, ...props }) {
+  return /* @__PURE__ */ jsx7(
+    "div",
+    {
+      "data-slot": "sidebar-group",
+      "data-sidebar": "group",
+      className: cn("relative flex w-full min-w-0 flex-col px-1.5 py-1", className),
+      ...props
+    }
+  );
+}
+function WorkbenchSidebarGroupLabel({
+  className,
+  asChild = false,
+  ...props
+}) {
+  const Comp = asChild ? Slot2.Root : "div";
+  return /* @__PURE__ */ jsx7(
+    Comp,
+    {
+      "data-slot": "sidebar-group-label",
+      "data-sidebar": "group-label",
+      className: cn(
+        "text-sidedock-label flex h-8 shrink-0 items-center rounded-md px-1.5 text-xs font-medium outline-hidden transition-[margin,opacity] duration-200 ease-linear group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0 [&>svg]:size-4 [&>svg]:shrink-0",
+        sidedockFocusClass,
+        className
+      ),
+      ...props
+    }
+  );
+}
+function WorkbenchSidebarGroupAction({
+  className,
+  asChild = false,
+  ...props
+}) {
+  const Comp = asChild ? Slot2.Root : "button";
+  return /* @__PURE__ */ jsx7(
+    Comp,
+    {
+      "data-slot": "sidebar-group-action",
+      "data-sidebar": "group-action",
+      className: cn(
+        "text-sidedock-text hover:bg-sidedock-hover-background hover:text-sidedock-text-hover absolute top-3.5 right-3 flex aspect-square w-5 items-center justify-center rounded-md p-0 outline-hidden transition-transform group-data-[collapsible=icon]:hidden after:absolute after:-inset-2 md:after:hidden [&>svg]:size-4 [&>svg]:shrink-0",
+        sidedockFocusClass,
+        className
+      ),
+      ...props
+    }
+  );
+}
+function WorkbenchSidebarGroupContent({ className, ...props }) {
+  return /* @__PURE__ */ jsx7(
+    "div",
+    {
+      "data-slot": "sidebar-group-content",
+      "data-sidebar": "group-content",
+      className: cn("w-full text-sm", className),
+      ...props
+    }
+  );
+}
+function WorkbenchSidebarMenu({ className, ...props }) {
+  return /* @__PURE__ */ jsx7(
+    "ul",
+    {
+      "data-slot": "sidebar-menu",
+      "data-sidebar": "menu",
+      className: cn("flex w-full min-w-0 flex-col gap-0.5", className),
+      ...props
+    }
+  );
+}
+function WorkbenchSidebarMenuItem({ className, ...props }) {
+  return /* @__PURE__ */ jsx7(
+    "li",
+    {
+      "data-slot": "sidebar-menu-item",
+      "data-sidebar": "menu-item",
+      className: cn("group/menu-item relative", className),
+      ...props
+    }
+  );
+}
+function WorkbenchSidebarMenuRow({ className, ...props }) {
+  return /* @__PURE__ */ jsx7(
+    "div",
+    {
+      "data-slot": "sidebar-menu-row",
+      "data-sidebar": "menu-row",
+      className: cn("group/menu-row relative flex items-center", className),
+      ...props
+    }
+  );
+}
+var sidebarMenuButtonVariants = cva2(
+  cn(
+    "cursor-pointer text-sidedock-text peer/menu-button group/menu-button flex w-full min-w-0 items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm whitespace-nowrap outline-hidden transition-[width,height,padding] group-has-data-[sidebar=menu-leading-action]/menu-item:pl-7 group-has-data-[sidebar=menu-trailing-action]/menu-item:pr-7 group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! hover:bg-sidedock-hover-background hover:text-sidedock-text-hover active:bg-sidedock-active-background active:text-sidedock-text-active disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-open:hover:bg-sidedock-hover-background data-open:hover:text-sidedock-text-hover data-active:bg-sidedock-active-background data-active:font-medium data-active:text-sidedock-text-active [&_svg]:size-4 [&_svg]:shrink-0",
+    sidedockFocusClass
+  ),
+  {
+    variants: {
+      variant: {
+        default: "",
+        outline: cn("bg-background-primary text-text-normal", sidedockOutlineStrokeClass)
+      },
+      size: {
+        default: "h-7 text-sm",
+        sm: "h-6 text-xs",
+        lg: "h-12 text-sm group-data-[collapsible=icon]:p-0!"
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default"
+    }
+  }
+);
+function WorkbenchSidebarMenuButton({
+  asChild = false,
+  isActive = false,
+  variant = "default",
+  size = "default",
+  tooltip,
+  leadingVisual,
+  trailingVisual,
+  trailingVisualVisibility = "always",
+  className,
+  children,
+  ...props
+}) {
+  const Comp = asChild ? Slot2.Root : "button";
+  const { isMobile, side, state } = useWorkbenchSidebarVisualContext();
+  const content = typeof children === "string" || typeof children === "number" ? /* @__PURE__ */ jsx7("span", { "data-slot": "sidebar-menu-button-label", className: "min-w-0 flex-1 truncate", children }) : children;
+  const button = /* @__PURE__ */ jsxs3(
+    Comp,
+    {
+      "data-slot": "sidebar-menu-button",
+      "data-sidebar": "menu-button",
+      "data-size": size,
+      "data-active": isActive,
+      className: cn(sidebarMenuButtonVariants({ variant, size }), className),
+      ...props,
+      children: [
+        leadingVisual ? /* @__PURE__ */ jsx7(
+          "span",
+          {
+            "data-slot": "sidebar-menu-button-leading-visual",
+            className: "flex shrink-0 items-center justify-center",
+            children: leadingVisual
+          }
+        ) : null,
+        /* @__PURE__ */ jsx7(Slot2.Slottable, { children: content }),
+        trailingVisual ? /* @__PURE__ */ jsx7(
+          "span",
+          {
+            "data-slot": "sidebar-menu-button-trailing-visual",
+            className: cn(
+              "ml-auto flex shrink-0 items-center justify-center",
+              trailingVisualVisibility === "hover" && "invisible opacity-0 group-hover/menu-button:visible group-hover/menu-button:opacity-100 group-focus-visible/menu-button:visible group-focus-visible/menu-button:opacity-100"
+            ),
+            children: trailingVisual
+          }
+        ) : null
+      ]
+    }
+  );
+  if (!tooltip) {
+    return button;
+  }
+  if (typeof tooltip === "string") {
+    tooltip = {
+      children: tooltip
+    };
+  }
+  return /* @__PURE__ */ jsxs3(Tooltip, { children: [
+    /* @__PURE__ */ jsx7(TooltipTrigger, { asChild: true, children: button }),
+    /* @__PURE__ */ jsx7(
+      TooltipContent,
+      {
+        side: side === "left" ? "right" : "left",
+        align: "center",
+        hidden: state !== "collapsed" || isMobile,
+        ...tooltip
+      }
+    )
+  ] });
+}
+function WorkbenchSidebarMenuActionBase({
+  className,
+  asChild = false,
+  dataSidebar,
+  dataSlot,
+  showOnHover = false,
+  ...props
+}) {
+  const Comp = asChild ? Slot2.Root : "button";
+  return /* @__PURE__ */ jsx7(
+    Comp,
+    {
+      "data-slot": dataSlot,
+      "data-sidebar": dataSidebar,
+      className: cn(
+        "text-sidedock-text hover:bg-sidedock-hover-background hover:text-sidedock-text-hover absolute top-1 flex aspect-square w-5 cursor-pointer items-center justify-center rounded-md p-0 outline-hidden transition-transform group-data-[collapsible=icon]:hidden peer-data-[size=default]/menu-button:top-1.5 peer-data-[size=lg]/menu-button:top-2.5 peer-data-[size=sm]/menu-button:top-1 after:absolute after:-inset-2 md:after:hidden [&>svg]:size-4 [&>svg]:shrink-0",
+        sidedockFocusClass,
+        dataSidebar === "menu-leading-action" ? "group-focus-within/menu-row:text-sidedock-text-hover group-hover/menu-row:text-sidedock-text-hover left-1" : "peer-hover/menu-button:text-sidedock-text-hover right-1",
+        showOnHover && "peer-data-active/menu-button:text-sidedock-text-active group-focus-within/menu-row:opacity-100 group-hover/menu-row:opacity-100 aria-expanded:opacity-100 md:opacity-0",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function WorkbenchSidebarMenuLeadingAction(props) {
+  return /* @__PURE__ */ jsx7(
+    WorkbenchSidebarMenuActionBase,
+    {
+      dataSidebar: "menu-leading-action",
+      dataSlot: "sidebar-menu-leading-action",
+      ...props
+    }
+  );
+}
+function WorkbenchSidebarMenuTrailingAction(props) {
+  return /* @__PURE__ */ jsx7(
+    WorkbenchSidebarMenuActionBase,
+    {
+      dataSidebar: "menu-trailing-action",
+      dataSlot: "sidebar-menu-trailing-action",
+      ...props
+    }
+  );
+}
+function WorkbenchSidebarMenuBadge({ className, ...props }) {
+  return /* @__PURE__ */ jsx7(
+    "div",
+    {
+      "data-slot": "sidebar-menu-badge",
+      "data-sidebar": "menu-badge",
+      className: cn(
+        "text-sidedock-text peer-hover/menu-button:text-sidedock-text-hover peer-data-active/menu-button:text-sidedock-text-active pointer-events-none absolute right-1 flex h-5 min-w-5 items-center justify-center rounded-md px-1 text-xs font-medium tabular-nums select-none group-data-[collapsible=icon]:hidden peer-data-[size=default]/menu-button:top-1.5 peer-data-[size=lg]/menu-button:top-2.5 peer-data-[size=sm]/menu-button:top-1",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function WorkbenchSidebarMenuSkeleton({
+  className,
+  showIcon = false,
+  ...props
+}) {
+  const [width] = React5.useState(() => {
+    return `${Math.floor(Math.random() * 40) + 50}%`;
+  });
+  const skeletonStyle = {
+    "--skeleton-width": width
+  };
+  return /* @__PURE__ */ jsxs3(
+    "div",
+    {
+      "data-slot": "sidebar-menu-skeleton",
+      "data-sidebar": "menu-skeleton",
+      className: cn("flex h-8 items-center gap-2 rounded-md px-1.5", className),
+      ...props,
+      children: [
+        showIcon && /* @__PURE__ */ jsx7(Skeleton, { className: "size-4 rounded-md", "data-sidebar": "menu-skeleton-icon" }),
+        /* @__PURE__ */ jsx7(
+          Skeleton,
+          {
+            className: "h-4 max-w-(--skeleton-width) flex-1",
+            "data-sidebar": "menu-skeleton-text",
+            style: skeletonStyle
+          }
+        )
+      ]
+    }
+  );
+}
+function WorkbenchSidebarMenuSub({ className, ...props }) {
+  return /* @__PURE__ */ jsx7(
+    "ul",
+    {
+      "data-slot": "sidebar-menu-sub",
+      "data-sidebar": "menu-sub",
+      className: cn(
+        "border-sidedock-border ml-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l py-0.5 pl-1 group-data-[collapsible=icon]:hidden",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function WorkbenchSidebarMenuSubItem({ className, ...props }) {
+  return /* @__PURE__ */ jsx7(
+    "li",
+    {
+      "data-slot": "sidebar-menu-sub-item",
+      "data-sidebar": "menu-sub-item",
+      className: cn("group/menu-sub-item relative", className),
+      ...props
+    }
+  );
+}
+function WorkbenchSidebarMenuSubButton({
+  asChild = false,
+  size = "md",
+  isActive = false,
+  className,
+  ...props
+}) {
+  const Comp = asChild ? Slot2.Root : "a";
+  return /* @__PURE__ */ jsx7(
+    Comp,
+    {
+      "data-slot": "sidebar-menu-sub-button",
+      "data-sidebar": "menu-sub-button",
+      "data-size": size,
+      "data-active": isActive,
+      className: cn(
+        "text-sidedock-text hover:bg-sidedock-hover-background hover:text-sidedock-text-hover active:bg-sidedock-active-background active:text-sidedock-text-active data-active:bg-sidedock-active-background data-active:text-sidedock-text-active [&>svg]:text-sidedock-text-active flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-1.5 outline-hidden group-data-[collapsible=icon]:hidden disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[size=md]:text-sm data-[size=sm]:text-xs [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0",
+        sidedockFocusClass,
+        className
+      ),
+      ...props
+    }
+  );
+}
+
+// src/layouts/workbench/core/components/sidebar/WorkbenchSidebarTree.tsx
+import * as React6 from "react";
+import {
+  closestCenter,
+  DndContext,
+  DragOverlay,
+  PointerSensor,
+  useSensor,
+  useSensors
+} from "@dnd-kit/core";
+import { SortableContext, useSortable, verticalListSortingStrategy } from "@dnd-kit/sortable";
+import { ChevronRightIcon } from "lucide-react";
+import { Fragment as Fragment2, jsx as jsx8, jsxs as jsxs4 } from "react/jsx-runtime";
+var DEFAULT_TREE_INDENT_WIDTH = 16;
+var DEFAULT_TREE_MAX_DEPTH = 8;
+var TREE_DROP_EDGE_RATIO = 0.28;
+var TREE_DROP_EDGE_MIN_HEIGHT = 6;
+var TREE_DROP_EDGE_MAX_HEIGHT = 12;
+var WorkbenchSidebarTreeContext = React6.createContext(null);
+function useWorkbenchSidebarTreeContext() {
+  const context = React6.useContext(WorkbenchSidebarTreeContext);
+  if (!context) {
+    throw new Error("WorkbenchSidebarTree hooks must be used within WorkbenchSidebarTreeProvider.");
+  }
+  return context;
+}
+function useWorkbenchSidebarTree() {
+  return useWorkbenchSidebarTreeContext();
+}
+function useWorkbenchSidebarTreeItem(itemId) {
+  const tree = useWorkbenchSidebarTreeContext();
+  const state = tree.getItemState(itemId);
+  return {
+    ...state,
+    select: (event) => tree.selectItem(itemId, event),
+    toggleExpanded: (event) => tree.toggleItemExpanded(itemId, event),
+    expand: (event) => tree.setItemExpanded(itemId, true, event),
+    collapse: (event) => tree.setItemExpanded(itemId, false, event),
+    focus: () => tree.focusItem(itemId)
+  };
+}
+function resolveIterableIds(ids, fallback = []) {
+  return Array.from(ids ?? fallback);
+}
+function resolveSet(ids, fallback = []) {
+  return new Set(resolveIterableIds(ids, fallback));
+}
+function flattenTree(items, expandedIdSet, options = {}) {
+  const { includeCollapsedChildren = false, parentId = null, depth = 0, ancestorIds = [] } = options;
+  const flattenedItems = [];
+  items.forEach((item, index) => {
+    const children = item.children ?? [];
+    const flattenedItem = {
+      item,
+      id: item.id,
+      parentId,
+      index,
+      depth,
+      ancestorIds,
+      childrenCount: children.length
+    };
+    flattenedItems.push(flattenedItem);
+    if (children.length && (includeCollapsedChildren || expandedIdSet.has(item.id))) {
+      flattenedItems.push(
+        ...flattenTree(children, expandedIdSet, {
+          includeCollapsedChildren,
+          parentId: item.id,
+          depth: depth + 1,
+          ancestorIds: [...ancestorIds, item.id]
+        })
+      );
+    }
+  });
+  return flattenedItems;
+}
+function createItemMap(flattenedItems) {
+  return new Map(flattenedItems.map((item) => [item.id, item]));
+}
+function cloneItemsWithoutItem(items, itemId) {
+  let removedItem = null;
+  const nextItems = items.reduce((result, item) => {
+    if (item.id === itemId) {
+      removedItem = item;
+      return result;
+    }
+    if (item.children?.length) {
+      const childResult = cloneItemsWithoutItem(item.children, itemId);
+      if (childResult.removedItem) {
+        removedItem = childResult.removedItem;
+        result.push({
+          ...item,
+          children: childResult.items
+        });
+        return result;
+      }
+    }
+    result.push(item);
+    return result;
+  }, []);
+  return {
+    items: nextItems,
+    removedItem
+  };
+}
+function insertItemAtParent(items, itemToInsert, parentId, index) {
+  if (!parentId) {
+    const nextItems = [...items];
+    nextItems.splice(Math.max(0, Math.min(index, nextItems.length)), 0, itemToInsert);
+    return nextItems;
+  }
+  return items.map((item) => {
+    if (item.id === parentId) {
+      const children = [...item.children ?? []];
+      children.splice(Math.max(0, Math.min(index, children.length)), 0, itemToInsert);
+      return {
+        ...item,
+        children
+      };
+    }
+    if (!item.children?.length) {
+      return item;
+    }
+    return {
+      ...item,
+      children: insertItemAtParent(item.children, itemToInsert, parentId, index)
+    };
+  });
+}
+function countChildrenBeforeIndex(items, parentId, visibleIndex) {
+  return items.slice(0, visibleIndex).filter((item) => item.parentId === parentId).length;
+}
+function getChildrenCount(items, parentId) {
+  if (!parentId) {
+    return items.length;
+  }
+  for (const item of items) {
+    if (item.id === parentId) {
+      return item.children?.length ?? 0;
+    }
+    if (item.children?.length) {
+      const childCount = getChildrenCount(item.children, parentId);
+      if (childCount > 0) {
+        return childCount;
+      }
+    }
+  }
+  return 0;
+}
+function clampDepth(depth, minDepth, maxDepth) {
+  return Math.max(minDepth, Math.min(depth, maxDepth));
+}
+function getParentIdForDepth(items, targetIndex, depth) {
+  if (depth <= 0) {
+    return null;
+  }
+  for (let index = targetIndex - 1; index >= 0; index -= 1) {
+    const item = items[index];
+    if (item?.depth === depth - 1) {
+      return item.id;
+    }
+  }
+  return null;
+}
+var treeCollisionDetection = (args) => {
+  const { pointerCoordinates } = args;
+  if (!pointerCoordinates) {
+    return closestCenter(args);
+  }
+  const collisions = [];
+  for (const droppableContainer of args.droppableContainers) {
+    if (droppableContainer.disabled) {
+      continue;
+    }
+    const rect = args.droppableRects.get(droppableContainer.id);
+    if (!rect) {
+      continue;
+    }
+    const centerY = rect.top + rect.height / 2;
+    const pointerIsWithinY = pointerCoordinates.y >= rect.top && pointerCoordinates.y <= rect.bottom;
+    const verticalDistance = pointerIsWithinY ? 0 : Math.min(
+      Math.abs(pointerCoordinates.y - rect.top),
+      Math.abs(pointerCoordinates.y - rect.bottom)
+    );
+    const horizontalDistance = pointerCoordinates.x < rect.left ? rect.left - pointerCoordinates.x : Math.max(0, pointerCoordinates.x - rect.right);
+    collisions.push({
+      id: droppableContainer.id,
+      data: {
+        droppableContainer,
+        value: verticalDistance * 1e3 + Math.abs(pointerCoordinates.y - centerY) + horizontalDistance * 0.01
+      }
+    });
+  }
+  return collisions.sort((a, b) => a.data.value - b.data.value);
+};
+function getEventClientCoordinates(event) {
+  if (event instanceof MouseEvent) {
+    return {
+      x: event.clientX,
+      y: event.clientY
+    };
+  }
+  if (typeof TouchEvent === "undefined" || !(event instanceof TouchEvent)) {
+    return null;
+  }
+  const touch = event.touches[0] ?? event.changedTouches[0];
+  if (!touch) {
+    return null;
+  }
+  return {
+    x: touch.clientX,
+    y: touch.clientY
+  };
+}
+function getItemRectCenter(rect) {
+  if (!rect) {
+    return null;
+  }
+  return {
+    y: rect.top + rect.height / 2
+  };
+}
+function getDropEdgeHeight(rect) {
+  return Math.min(
+    TREE_DROP_EDGE_MAX_HEIGHT,
+    Math.max(TREE_DROP_EDGE_MIN_HEIGHT, rect.height * TREE_DROP_EDGE_RATIO)
+  );
+}
+function getItemMaxDescendantDepthOffset(item) {
+  if (!item.children?.length) {
+    return 0;
+  }
+  return item.children.reduce(
+    (maxDepthOffset, child) => Math.max(maxDepthOffset, 1 + getItemMaxDescendantDepthOffset(child)),
+    0
+  );
+}
+function getIndexAfterVisibleSubtree(flattenedItems, itemIndex) {
+  const item = flattenedItems[itemIndex];
+  if (!item) {
+    return itemIndex;
+  }
+  let nextIndex = itemIndex + 1;
+  while (nextIndex < flattenedItems.length) {
+    const nextItem = flattenedItems[nextIndex];
+    if (!nextItem || nextItem.depth <= item.depth) {
+      break;
+    }
+    nextIndex += 1;
+  }
+  return nextIndex;
+}
+function getPointerPlacement({
+  activeItem,
+  activeMaxDepth,
+  dragOffset,
+  indentWidth,
+  overItem,
+  overItemRect,
+  pointerY
+}) {
+  if (!overItemRect || pointerY === null || pointerY === void 0) {
+    return "after";
+  }
+  const edgeHeight = getDropEdgeHeight(overItemRect);
+  if (pointerY <= overItemRect.top + edgeHeight) {
+    return "before";
+  }
+  if (pointerY >= overItemRect.bottom - edgeHeight) {
+    return "after";
+  }
+  const projectedDepth = activeItem.depth + Math.round(dragOffset / indentWidth);
+  if (projectedDepth > overItem.depth && overItem.depth + 1 <= activeMaxDepth) {
+    return "inside";
+  }
+  const center = getItemRectCenter(overItemRect);
+  return center && pointerY < center.y ? "before" : "after";
+}
+function createMoveEvent({
+  activeId,
+  depth,
+  flattenedItemsWithoutActive,
+  items,
+  originalItemMap,
+  placement,
+  targetIndex,
+  toParentId
+}) {
+  const activeItem = originalItemMap.get(activeId);
+  if (!activeItem) {
+    return null;
+  }
+  const { items: itemsWithoutActive, removedItem } = cloneItemsWithoutItem(items, activeId);
+  if (!removedItem) {
+    return null;
+  }
+  const toIndex = placement === "inside" ? getChildrenCount(itemsWithoutActive, toParentId) : countChildrenBeforeIndex(flattenedItemsWithoutActive, toParentId, targetIndex);
+  const nextItems = insertItemAtParent(itemsWithoutActive, removedItem, toParentId, toIndex);
+  return {
+    item: removedItem,
+    itemId: activeId,
+    fromParentId: activeItem.parentId,
+    toParentId,
+    fromIndex: activeItem.index,
+    toIndex,
+    depth,
+    placement,
+    nextItems
+  };
+}
+function getProjectedMove({
+  activeId,
+  canDrop,
+  dragOffset,
+  flattenedItems,
+  indentWidth,
+  items,
+  maxDepth,
+  overId,
+  overItemRect,
+  pointerY
+}) {
+  if (!activeId || !overId || activeId === overId) {
+    return null;
+  }
+  const originalItemMap = createItemMap(flattenedItems);
+  const activeItem = originalItemMap.get(activeId);
+  const overItem = originalItemMap.get(overId);
+  if (!activeItem || !overItem || activeItem.item.disabled || activeItem.item.draggable === false) {
+    return null;
+  }
+  if (overItem.ancestorIds.includes(activeId)) {
+    return null;
+  }
+  const flattenedItemsWithoutActive = flattenedItems.filter(
+    (item) => item.id !== activeId && !item.ancestorIds.includes(activeId)
+  );
+  const overIndex = flattenedItemsWithoutActive.findIndex((item) => item.id === overId);
+  if (overIndex < 0) {
+    return null;
+  }
+  const activeDescendantDepthOffset = getItemMaxDescendantDepthOffset(activeItem.item);
+  const activeMaxDepth = maxDepth - 1 - activeDescendantDepthOffset;
+  if (activeMaxDepth < 0) {
+    return null;
+  }
+  const offsetDepth = Math.round(dragOffset / indentWidth);
+  const unclampedDepth = activeItem.depth + offsetDepth;
+  const pointerPlacement = getPointerPlacement({
+    activeItem,
+    activeMaxDepth,
+    dragOffset,
+    indentWidth,
+    overItem,
+    overItemRect,
+    pointerY
+  });
+  const placement = pointerPlacement;
+  let targetIndex = placement === "after" ? getIndexAfterVisibleSubtree(flattenedItemsWithoutActive, overIndex) : overIndex;
+  let depth = overItem.depth + 1;
+  let toParentId = overId;
+  if (placement === "inside") {
+    if (overItem.item.disabled || depth > activeMaxDepth) {
+      return null;
+    }
+    targetIndex = overIndex + 1;
+  } else {
+    const previousItem = flattenedItemsWithoutActive[targetIndex - 1];
+    const nextItem = flattenedItemsWithoutActive[targetIndex];
+    const maxDepthForPosition = placement === "after" ? overItem.depth : (previousItem?.depth ?? -1) + 1;
+    const maxProjectedDepth = Math.min(activeMaxDepth, maxDepthForPosition);
+    const minProjectedDepth = nextItem ? nextItem.depth : 0;
+    if (minProjectedDepth > maxProjectedDepth) {
+      return null;
+    }
+    depth = clampDepth(unclampedDepth, minProjectedDepth, maxProjectedDepth);
+    toParentId = getParentIdForDepth(flattenedItemsWithoutActive, targetIndex, depth);
+  }
+  const parentItem = toParentId ? originalItemMap.get(toParentId) : null;
+  if (parentItem?.item.disabled) {
+    return null;
+  }
+  const moveEvent = createMoveEvent({
+    activeId,
+    depth,
+    flattenedItemsWithoutActive,
+    items,
+    originalItemMap,
+    placement,
+    targetIndex,
+    toParentId
+  });
+  if (!moveEvent || canDrop?.(moveEvent) === false) {
+    return null;
+  }
+  if (moveEvent.fromParentId === moveEvent.toParentId && moveEvent.fromIndex === moveEvent.toIndex) {
+    return null;
+  }
+  const indicatorId = placement === "after" ? flattenedItemsWithoutActive[Math.max(0, targetIndex - 1)]?.id ?? overId : overId;
+  return {
+    ...moveEvent,
+    indicatorId,
+    overId
+  };
+}
+function moveItemWithKeyboard({
+  activeId,
+  canDrop,
+  direction,
+  expandedIdSet,
+  items,
+  maxDepth
+}) {
+  const flattenedItems = flattenTree(items, expandedIdSet);
+  const itemMap = createItemMap(flattenedItems);
+  const activeItem = itemMap.get(activeId);
+  if (!activeItem || activeItem.item.disabled || activeItem.item.draggable === false) {
+    return null;
+  }
+  const flattenedItemsWithoutActive = flattenedItems.filter(
+    (item) => item.id !== activeId && !item.ancestorIds.includes(activeId)
+  );
+  const activeIndex = flattenedItems.findIndex((item) => item.id === activeId);
+  const currentIndex = flattenedItemsWithoutActive.findIndex((item) => item.id === activeId);
+  const originalItemMap = createItemMap(flattenedItems);
+  const { depth: activeDepth } = activeItem;
+  const activeMaxDepth = maxDepth - 1 - getItemMaxDescendantDepthOffset(activeItem.item);
+  let targetIndex = -1;
+  let depth = activeDepth;
+  let toParentId = activeItem.parentId;
+  let placement = "after";
+  if (direction === "up") {
+    const previousIndex = Math.max(0, activeIndex - 1);
+    const previousItem = flattenedItems[previousIndex];
+    if (!previousItem || previousItem.id === activeId || previousItem.ancestorIds.includes(activeId)) {
+      return null;
+    }
+    targetIndex = flattenedItemsWithoutActive.findIndex((item) => item.id === previousItem.id);
+    depth = Math.min(activeItem.depth, previousItem.depth);
+    toParentId = getParentIdForDepth(flattenedItemsWithoutActive, targetIndex, depth);
+    placement = "before";
+  }
+  if (direction === "down") {
+    const nextItem = flattenedItems.slice(activeIndex + 1).find((item) => item.id !== activeId && !item.ancestorIds.includes(activeId));
+    if (!nextItem) {
+      return null;
+    }
+    const nextIndex = flattenedItemsWithoutActive.findIndex((item) => item.id === nextItem.id);
+    targetIndex = nextIndex + 1;
+    depth = Math.min(activeItem.depth, nextItem.depth);
+    toParentId = getParentIdForDepth(flattenedItemsWithoutActive, targetIndex, depth);
+    placement = "after";
+  }
+  if (direction === "left") {
+    if (!activeItem.parentId) {
+      return null;
+    }
+    const parentItem2 = itemMap.get(activeItem.parentId);
+    if (!parentItem2) {
+      return null;
+    }
+    targetIndex = flattenedItemsWithoutActive.findIndex((item) => item.id === parentItem2.id) + parentItem2.childrenCount;
+    depth = parentItem2.depth;
+    toParentId = parentItem2.parentId;
+    placement = "after";
+  }
+  if (direction === "right") {
+    const previousItem = flattenedItemsWithoutActive[currentIndex >= 0 ? currentIndex - 1 : Math.max(0, activeIndex - 1)];
+    if (!previousItem || previousItem.item.disabled || previousItem.depth + 1 > activeMaxDepth) {
+      return null;
+    }
+    targetIndex = flattenedItemsWithoutActive.findIndex((item) => item.id === previousItem.id) + 1;
+    depth = previousItem.depth + 1;
+    toParentId = previousItem.id;
+    placement = "inside";
+  }
+  if (targetIndex < 0) {
+    return null;
+  }
+  const parentItem = toParentId ? itemMap.get(toParentId) : null;
+  if (parentItem?.item.disabled) {
+    return null;
+  }
+  const moveEvent = createMoveEvent({
+    activeId,
+    depth,
+    flattenedItemsWithoutActive,
+    items,
+    originalItemMap,
+    placement,
+    targetIndex,
+    toParentId
+  });
+  if (!moveEvent || canDrop?.(moveEvent) === false) {
+    return null;
+  }
+  return moveEvent;
+}
+function resolveVisual(visual, state) {
+  return typeof visual === "function" ? visual(state) : visual;
+}
+function WorkbenchSidebarTreeProvider({
+  children,
+  items,
+  selectedId: selectedIdProp,
+  defaultSelectedId = null,
+  expandedIds: expandedIdsProp,
+  defaultExpandedIds = [],
+  reorderable = false,
+  maxDepth = DEFAULT_TREE_MAX_DEPTH,
+  indentWidth = DEFAULT_TREE_INDENT_WIDTH,
+  canDrop,
+  onItemClick,
+  onItemSelect,
+  onSelectedIdChange,
+  onItemExpandedChange,
+  onExpandedIdsChange,
+  onMove
+}) {
+  const [uncontrolledSelectedId, setUncontrolledSelectedId] = React6.useState(
+    defaultSelectedId
+  );
+  const [uncontrolledExpandedIds, setUncontrolledExpandedIds] = React6.useState(
+    () => resolveIterableIds(defaultExpandedIds)
+  );
+  const [focusedId, setFocusedId] = React6.useState(null);
+  const [activeId, setActiveId] = React6.useState(null);
+  const [overId, setOverId] = React6.useState(null);
+  const [dragOffset, setDragOffset] = React6.useState(0);
+  const [dragPointerY, setDragPointerY] = React6.useState(null);
+  const [dragOverlayWidth, setDragOverlayWidth] = React6.useState(null);
+  const itemButtonRefs = React6.useRef(/* @__PURE__ */ new Map());
+  const itemNodeRefs = React6.useRef(/* @__PURE__ */ new Map());
+  const dragStartPointerRef = React6.useRef(null);
+  const selectedId = selectedIdProp === void 0 ? uncontrolledSelectedId : selectedIdProp;
+  const expandedIdSet = React6.useMemo(
+    () => resolveSet(expandedIdsProp, uncontrolledExpandedIds),
+    [expandedIdsProp, uncontrolledExpandedIds]
+  );
+  const expandedIds = React6.useMemo(() => Array.from(expandedIdSet), [expandedIdSet]);
+  const flattenedItems = React6.useMemo(
+    () => flattenTree(items, expandedIdSet),
+    [expandedIdSet, items]
+  );
+  const itemMap = React6.useMemo(() => createItemMap(flattenedItems), [flattenedItems]);
+  const projectedMove = React6.useMemo(
+    () => getProjectedMove({
+      activeId,
+      canDrop,
+      dragOffset,
+      flattenedItems,
+      indentWidth,
+      items,
+      maxDepth,
+      overId,
+      overItemRect: overId ? itemNodeRefs.current.get(overId)?.getBoundingClientRect() : null,
+      pointerY: dragPointerY
+    }),
+    [
+      activeId,
+      canDrop,
+      dragOffset,
+      dragPointerY,
+      flattenedItems,
+      indentWidth,
+      items,
+      maxDepth,
+      overId
+    ]
+  );
+  const sensors = useSensors(
+    useSensor(PointerSensor, {
+      activationConstraint: {
+        distance: 6
+      }
+    })
+  );
+  React6.useEffect(() => {
+    if (focusedId && itemMap.has(focusedId)) {
+      return;
+    }
+    setFocusedId(
+      selectedId && itemMap.has(selectedId) ? selectedId : flattenedItems[0]?.id ?? null
+    );
+  }, [flattenedItems, focusedId, itemMap, selectedId]);
+  const registerItemButton = React6.useCallback((itemId, node) => {
+    if (node) {
+      itemButtonRefs.current.set(itemId, node);
+      return;
+    }
+    itemButtonRefs.current.delete(itemId);
+  }, []);
+  const registerItemNode = React6.useCallback((itemId, node) => {
+    if (node) {
+      itemNodeRefs.current.set(itemId, node);
+      return;
+    }
+    itemNodeRefs.current.delete(itemId);
+  }, []);
+  const focusItem = React6.useCallback((itemId) => {
+    if (!itemId) {
+      return;
+    }
+    setFocusedId(itemId);
+    itemButtonRefs.current.get(itemId)?.focus();
+  }, []);
+  const getItemState = React6.useCallback(
+    (itemId) => {
+      const flattenedItem = itemMap.get(itemId);
+      if (!flattenedItem) {
+        throw new Error(`WorkbenchSidebarTree item "${itemId}" was not found.`);
+      }
+      return {
+        item: flattenedItem.item,
+        itemId,
+        parentId: flattenedItem.parentId,
+        index: flattenedItem.index,
+        depth: flattenedItem.depth,
+        isDisabled: flattenedItem.item.disabled === true,
+        isDragging: activeId === itemId,
+        isDropTarget: projectedMove?.overId === itemId,
+        isExpanded: expandedIdSet.has(itemId),
+        isExpandable: flattenedItem.childrenCount > 0,
+        isFocused: focusedId === itemId,
+        isSelected: selectedId === itemId
+      };
+    },
+    [activeId, expandedIdSet, focusedId, itemMap, projectedMove?.overId, selectedId]
+  );
+  const getItemEvent = React6.useCallback(
+    (itemId, originalEvent) => {
+      const flattenedItem = itemMap.get(itemId);
+      if (!flattenedItem) {
+        throw new Error(`WorkbenchSidebarTree item "${itemId}" was not found.`);
+      }
+      return {
+        item: flattenedItem.item,
+        itemId,
+        parentId: flattenedItem.parentId,
+        index: flattenedItem.index,
+        depth: flattenedItem.depth,
+        expandedIds,
+        selectedId,
+        originalEvent
+      };
+    },
+    [expandedIds, itemMap, selectedId]
+  );
+  const setItemExpanded = React6.useCallback(
+    (itemId, expanded, originalEvent) => {
+      const flattenedItem = itemMap.get(itemId);
+      if (!flattenedItem || flattenedItem.item.disabled) {
+        return;
+      }
+      if (!flattenedItem.childrenCount && !expanded) {
+        return;
+      }
+      const nextExpandedIdSet = new Set(expandedIdSet);
+      if (expanded) {
+        nextExpandedIdSet.add(itemId);
+      } else {
+        nextExpandedIdSet.delete(itemId);
+      }
+      const nextExpandedIds = Array.from(nextExpandedIdSet);
+      const itemEvent = getItemEvent(itemId, originalEvent);
+      const expandedEvent = {
+        ...itemEvent,
+        expanded,
+        expandedIds: nextExpandedIds
+      };
+      if (expandedIdsProp === void 0) {
+        setUncontrolledExpandedIds(nextExpandedIds);
+      }
+      onItemExpandedChange?.(expandedEvent);
+      onExpandedIdsChange?.(nextExpandedIds, expandedEvent);
+    },
+    [
+      expandedIdSet,
+      expandedIdsProp,
+      getItemEvent,
+      itemMap,
+      onExpandedIdsChange,
+      onItemExpandedChange
+    ]
+  );
+  const toggleItemExpanded = React6.useCallback(
+    (itemId, originalEvent) => {
+      setItemExpanded(itemId, !expandedIdSet.has(itemId), originalEvent);
+    },
+    [expandedIdSet, setItemExpanded]
+  );
+  const selectItem = React6.useCallback(
+    (itemId, originalEvent) => {
+      const flattenedItem = itemMap.get(itemId);
+      if (!flattenedItem || flattenedItem.item.disabled || flattenedItem.item.selectable === false) {
+        return;
+      }
+      const itemEvent = getItemEvent(itemId, originalEvent);
+      if (selectedIdProp === void 0) {
+        setUncontrolledSelectedId(itemId);
+      }
+      onItemSelect?.(itemEvent);
+      onSelectedIdChange?.(itemId, itemEvent);
+    },
+    [getItemEvent, itemMap, onItemSelect, onSelectedIdChange, selectedIdProp]
+  );
+  const handleItemClick = React6.useCallback(
+    (itemId, originalEvent) => {
+      const flattenedItem = itemMap.get(itemId);
+      if (!flattenedItem || flattenedItem.item.disabled) {
+        return;
+      }
+      setFocusedId(itemId);
+      onItemClick?.(getItemEvent(itemId, originalEvent));
+      selectItem(itemId, originalEvent);
+    },
+    [getItemEvent, itemMap, onItemClick, selectItem]
+  );
+  const commitKeyboardMove = React6.useCallback(
+    (itemId, direction) => {
+      const moveEvent = moveItemWithKeyboard({
+        activeId: itemId,
+        canDrop,
+        direction,
+        expandedIdSet,
+        items,
+        maxDepth
+      });
+      if (!moveEvent) {
+        return;
+      }
+      if (direction === "right") {
+        const parentId = moveEvent.toParentId;
+        if (parentId) {
+          setItemExpanded(parentId, true);
+        }
+      }
+      onMove?.(moveEvent);
+    },
+    [canDrop, expandedIdSet, items, maxDepth, onMove, setItemExpanded]
+  );
+  const handleItemKeyDown = React6.useCallback(
+    (itemId, event) => {
+      const currentIndex = flattenedItems.findIndex((item) => item.id === itemId);
+      const currentItem = itemMap.get(itemId);
+      if (!currentItem || currentIndex < 0) {
+        return;
+      }
+      if (event.altKey && reorderable) {
+        const keyboardDirectionByKey = {
+          ArrowUp: "up",
+          ArrowDown: "down",
+          ArrowLeft: "left",
+          ArrowRight: "right"
+        };
+        const direction = keyboardDirectionByKey[event.key];
+        if (direction) {
+          event.preventDefault();
+          commitKeyboardMove(itemId, direction);
+        }
+        return;
+      }
+      switch (event.key) {
+        case "ArrowDown":
+          event.preventDefault();
+          focusItem(flattenedItems[currentIndex + 1]?.id ?? itemId);
+          return;
+        case "ArrowUp":
+          event.preventDefault();
+          focusItem(flattenedItems[currentIndex - 1]?.id ?? itemId);
+          return;
+        case "ArrowRight":
+          if (currentItem.childrenCount && !expandedIdSet.has(itemId)) {
+            event.preventDefault();
+            setItemExpanded(itemId, true, event);
+            return;
+          }
+          if (currentItem.childrenCount) {
+            event.preventDefault();
+            focusItem(flattenedItems[currentIndex + 1]?.id ?? itemId);
+          }
+          return;
+        case "ArrowLeft":
+          if (currentItem.childrenCount && expandedIdSet.has(itemId)) {
+            event.preventDefault();
+            setItemExpanded(itemId, false, event);
+            return;
+          }
+          if (currentItem.parentId) {
+            event.preventDefault();
+            focusItem(currentItem.parentId);
+          }
+          return;
+        case "Home":
+          event.preventDefault();
+          focusItem(flattenedItems[0]?.id ?? itemId);
+          return;
+        case "End":
+          event.preventDefault();
+          focusItem(flattenedItems.at(-1)?.id ?? itemId);
+          return;
+        case "Enter":
+        case " ":
+          event.preventDefault();
+          handleItemClick(itemId, event);
+          return;
+        default:
+      }
+    },
+    [
+      commitKeyboardMove,
+      expandedIdSet,
+      flattenedItems,
+      focusItem,
+      handleItemClick,
+      itemMap,
+      reorderable,
+      setItemExpanded
+    ]
+  );
+  const handleDragStart = React6.useCallback(
+    (event) => {
+      const itemId = String(event.active.id);
+      const flattenedItem = itemMap.get(itemId);
+      if (!flattenedItem || flattenedItem.item.disabled || flattenedItem.item.draggable === false) {
+        return;
+      }
+      setActiveId(itemId);
+      setOverId(itemId);
+      setDragOffset(0);
+      const itemRect = itemNodeRefs.current.get(itemId)?.getBoundingClientRect();
+      const itemCenter = getItemRectCenter(itemRect);
+      const startPointer = getEventClientCoordinates(event.activatorEvent);
+      dragStartPointerRef.current = startPointer ?? (itemCenter ? { x: 0, y: itemCenter.y } : null);
+      setDragPointerY(dragStartPointerRef.current?.y ?? null);
+      setDragOverlayWidth(itemRect?.width ?? null);
+    },
+    [itemMap]
+  );
+  const handleDragMove = React6.useCallback((event) => {
+    setDragOffset(event.delta.x);
+    setDragPointerY(
+      dragStartPointerRef.current ? dragStartPointerRef.current.y + event.delta.y : null
+    );
+  }, []);
+  const handleDragOver = React6.useCallback((event) => {
+    setOverId(event.over ? String(event.over.id) : null);
+    setDragPointerY(
+      dragStartPointerRef.current ? dragStartPointerRef.current.y + event.delta.y : null
+    );
+  }, []);
+  const handleDragEnd = React6.useCallback(
+    (event) => {
+      const nextOverId = event.over ? String(event.over.id) : null;
+      const nextProjectedMove = getProjectedMove({
+        activeId: String(event.active.id),
+        canDrop,
+        dragOffset: event.delta.x,
+        flattenedItems,
+        indentWidth,
+        items,
+        maxDepth,
+        overId: nextOverId,
+        overItemRect: event.over?.rect ?? (nextOverId ? itemNodeRefs.current.get(nextOverId)?.getBoundingClientRect() : null),
+        pointerY: dragStartPointerRef.current ? dragStartPointerRef.current.y + event.delta.y : null
+      });
+      setActiveId(null);
+      setOverId(null);
+      setDragOffset(0);
+      setDragPointerY(null);
+      setDragOverlayWidth(null);
+      dragStartPointerRef.current = null;
+      if (!nextProjectedMove) {
+        return;
+      }
+      const { overId: overId2, indicatorId, ...moveEvent } = nextProjectedMove;
+      void overId2;
+      void indicatorId;
+      if (moveEvent.placement === "inside" && moveEvent.toParentId) {
+        setItemExpanded(moveEvent.toParentId, true);
+      }
+      onMove?.(moveEvent);
+    },
+    [canDrop, flattenedItems, indentWidth, items, maxDepth, onMove, setItemExpanded]
+  );
+  const handleDragCancel = React6.useCallback(() => {
+    setActiveId(null);
+    setOverId(null);
+    setDragOffset(0);
+    setDragPointerY(null);
+    setDragOverlayWidth(null);
+    dragStartPointerRef.current = null;
+  }, []);
+  const contextValue = React6.useMemo(
+    () => ({
+      items,
+      flattenedItems,
+      itemMap,
+      selectedId,
+      expandedIdSet,
+      expandedIds,
+      focusedId,
+      activeId,
+      overId,
+      projectedMove,
+      dragOverlayWidth,
+      reorderable,
+      indentWidth,
+      maxDepth,
+      registerItemButton,
+      registerItemNode,
+      focusItem,
+      getItemState,
+      getItemEvent,
+      selectItem,
+      toggleItemExpanded,
+      setItemExpanded,
+      handleItemClick,
+      handleItemKeyDown
+    }),
+    [
+      activeId,
+      dragOverlayWidth,
+      expandedIdSet,
+      expandedIds,
+      flattenedItems,
+      focusItem,
+      focusedId,
+      getItemEvent,
+      getItemState,
+      handleItemClick,
+      handleItemKeyDown,
+      indentWidth,
+      itemMap,
+      items,
+      maxDepth,
+      overId,
+      projectedMove,
+      registerItemButton,
+      registerItemNode,
+      reorderable,
+      selectItem,
+      selectedId,
+      setItemExpanded,
+      toggleItemExpanded
+    ]
+  );
+  const content = /* @__PURE__ */ jsx8(WorkbenchSidebarTreeContext.Provider, { value: contextValue, children });
+  if (!reorderable) {
+    return content;
+  }
+  return /* @__PURE__ */ jsx8(
+    DndContext,
+    {
+      sensors,
+      collisionDetection: treeCollisionDetection,
+      onDragStart: handleDragStart,
+      onDragMove: handleDragMove,
+      onDragOver: handleDragOver,
+      onDragEnd: handleDragEnd,
+      onDragCancel: handleDragCancel,
+      children: content
+    }
+  );
+}
+function WorkbenchSidebarTree({
+  items,
+  selectedId,
+  defaultSelectedId,
+  expandedIds,
+  defaultExpandedIds,
+  reorderable,
+  maxDepth,
+  indentWidth,
+  canDrop,
+  onItemClick,
+  onItemSelect,
+  onSelectedIdChange,
+  onItemExpandedChange,
+  onExpandedIdsChange,
+  onMove,
+  renderItem,
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx8(
+    WorkbenchSidebarTreeProvider,
+    {
+      items,
+      selectedId,
+      defaultSelectedId,
+      expandedIds,
+      defaultExpandedIds,
+      reorderable,
+      maxDepth,
+      indentWidth,
+      canDrop,
+      onItemClick,
+      onItemSelect,
+      onSelectedIdChange,
+      onItemExpandedChange,
+      onExpandedIdsChange,
+      onMove,
+      children: /* @__PURE__ */ jsx8(WorkbenchSidebarTreeItems, { className, renderItem, ...props })
+    }
+  );
+}
+function WorkbenchSidebarTreeItems({
+  className,
+  renderItem,
+  ...props
+}) {
+  const tree = useWorkbenchSidebarTreeContext();
+  const itemIds = React6.useMemo(
+    () => tree.flattenedItems.map((item) => item.id),
+    [tree.flattenedItems]
+  );
+  return /* @__PURE__ */ jsxs4(Fragment2, { children: [
+    /* @__PURE__ */ jsx8(SortableContext, { items: itemIds, strategy: verticalListSortingStrategy, children: /* @__PURE__ */ jsx8(
+      WorkbenchSidebarMenu,
+      {
+        role: "tree",
+        "data-slot": "workbench-sidebar-tree",
+        "data-sidebar": "tree",
+        className: cn("gap-0.5", className),
+        ...props,
+        children: tree.flattenedItems.map((item) => /* @__PURE__ */ jsx8(WorkbenchSidebarTreeRow, { itemId: item.id, renderItem }, item.id))
+      }
+    ) }),
+    tree.reorderable ? /* @__PURE__ */ jsx8(WorkbenchSidebarTreeDragOverlay, { renderItem }) : null
+  ] });
+}
+function WorkbenchSidebarTreeItemContent({
+  buttonProps,
+  disclosureProps,
+  leadingVisual,
+  renderItem,
+  rowProps,
+  state,
+  trailingVisual
+}) {
+  const hasCustomTrailingAction = Boolean(trailingVisual);
+  const defaultNode = /* @__PURE__ */ jsxs4(WorkbenchSidebarMenuRow, { ...rowProps, children: [
+    disclosureProps.visible ? /* @__PURE__ */ jsx8(WorkbenchSidebarMenuLeadingAction, { ...disclosureProps, children: /* @__PURE__ */ jsx8(ChevronRightIcon, { className: "transition-transform duration-150 ease-out" }) }) : null,
+    /* @__PURE__ */ jsx8(
+      WorkbenchSidebarMenuButton,
+      {
+        ...buttonProps,
+        isActive: state.isSelected,
+        tooltip: state.item.tooltip,
+        leadingVisual,
+        trailingVisual: !hasCustomTrailingAction ? null : void 0,
+        trailingVisualVisibility: "hover",
+        children: state.item.label
+      }
+    ),
+    hasCustomTrailingAction ? /* @__PURE__ */ jsx8(
+      WorkbenchSidebarMenuTrailingAction,
+      {
+        type: "button",
+        showOnHover: true,
+        onClick: (event) => event.stopPropagation(),
+        children: trailingVisual
+      }
+    ) : null
+  ] });
+  return renderItem ? renderItem({
+    state,
+    rowProps,
+    buttonProps,
+    disclosureProps,
+    leadingVisual,
+    trailingVisual
+  }) : defaultNode;
+}
+function WorkbenchSidebarTreeDragOverlay({
+  renderItem
+}) {
+  const tree = useWorkbenchSidebarTreeContext();
+  if (!tree.activeId || !tree.itemMap.has(tree.activeId)) {
+    return /* @__PURE__ */ jsx8(DragOverlay, { dropAnimation: null, children: null });
+  }
+  const state = tree.getItemState(tree.activeId);
+  const leadingVisual = resolveVisual(state.item.leadingVisual, state);
+  const trailingVisual = resolveVisual(state.item.trailingVisual, state);
+  const rowProps = {
+    style: {
+      marginLeft: `${state.depth * tree.indentWidth}px`
+    }
+  };
+  const buttonProps = {
+    type: "button",
+    tabIndex: -1,
+    role: "treeitem",
+    "aria-level": state.depth + 1,
+    "aria-selected": state.isSelected,
+    "aria-expanded": state.isExpandable ? state.isExpanded : void 0,
+    "aria-disabled": state.isDisabled || void 0,
+    "data-workbench-sidebar-tree-item-id": state.itemId,
+    "data-tree-item-id": state.itemId,
+    "data-drag-overlay": true,
+    "data-selected": state.isSelected || void 0,
+    "data-expanded": state.isExpanded || void 0,
+    className: "cursor-grabbing bg-sidedock-hover-background text-sidedock-text-hover shadow-lg ring-1 ring-sidedock-border"
+  };
+  const disclosureProps = {
+    type: "button",
+    visible: state.isExpandable,
+    "aria-label": state.isExpanded ? `Collapse ${String(state.item.label)}` : `Expand ${String(state.item.label)}`,
+    "aria-expanded": state.isExpanded,
+    tabIndex: -1,
+    className: "data-[expanded=true]:bg-transparent data-[expanded=true]:[&>svg]:rotate-90 data-[expanded=false]:[&>svg]:rotate-0",
+    "data-expanded": state.isExpanded,
+    onClick: (event) => event.stopPropagation()
+  };
+  return /* @__PURE__ */ jsx8(DragOverlay, { dropAnimation: null, children: /* @__PURE__ */ jsx8(
+    "div",
+    {
+      "data-slot": "workbench-sidebar-tree-drag-overlay",
+      className: "pointer-events-none opacity-[0.85]",
+      style: {
+        width: tree.dragOverlayWidth ?? void 0
+      },
+      children: /* @__PURE__ */ jsx8(
+        WorkbenchSidebarTreeItemContent,
+        {
+          state,
+          rowProps,
+          buttonProps,
+          disclosureProps,
+          leadingVisual,
+          trailingVisual,
+          renderItem
+        }
+      )
+    }
+  ) });
+}
+function WorkbenchSidebarTreeRow({
+  itemId,
+  renderItem
+}) {
+  const tree = useWorkbenchSidebarTreeContext();
+  const state = tree.getItemState(itemId);
+  const { attributes, listeners, setNodeRef, isDragging, isSorting } = useSortable({
+    id: itemId,
+    disabled: !tree.reorderable || state.isDisabled || state.item.draggable === false
+  });
+  const isTabbable = tree.focusedId === itemId || !tree.focusedId && (state.isSelected || tree.flattenedItems[0]?.id === itemId);
+  const leadingVisual = resolveVisual(state.item.leadingVisual, state);
+  const trailingVisual = resolveVisual(state.item.trailingVisual, state);
+  const isInsideDropTarget = tree.projectedMove?.placement === "inside" && tree.projectedMove.overId === itemId;
+  const showDropIndicator = tree.projectedMove?.indicatorId === itemId && !isInsideDropTarget;
+  const projectedDepth = showDropIndicator ? tree.projectedMove?.depth : state.depth;
+  const dropIndicatorPlacement = tree.projectedMove?.placement ?? "after";
+  const { registerItemNode } = tree;
+  const setItemNodeRef = React6.useCallback(
+    (node) => {
+      setNodeRef(node);
+      registerItemNode(itemId, node);
+    },
+    [itemId, registerItemNode, setNodeRef]
+  );
+  const rowProps = {
+    style: {
+      marginLeft: `${state.depth * tree.indentWidth}px`
+    }
+  };
+  const buttonProps = {
+    ...attributes,
+    ...listeners,
+    type: "button",
+    disabled: state.isDisabled,
+    tabIndex: isTabbable ? 0 : -1,
+    role: "treeitem",
+    "aria-level": state.depth + 1,
+    "aria-selected": state.isSelected,
+    "aria-expanded": state.isExpandable ? state.isExpanded : void 0,
+    "aria-disabled": state.isDisabled || void 0,
+    "data-workbench-sidebar-tree-item-id": itemId,
+    "data-tree-item-id": itemId,
+    "data-selected": state.isSelected || void 0,
+    "data-expanded": state.isExpanded || void 0,
+    "data-dragging": isDragging || void 0,
+    "data-drop-inside": isInsideDropTarget || void 0,
+    className: cn(
+      !state.isExpandable && "pl-7",
+      isDragging && "opacity-40",
+      state.isDropTarget && "bg-sidedock-hover-background text-sidedock-text-hover",
+      isInsideDropTarget && "bg-sidedock-active-background text-sidedock-text-active ring-sidedock-border ring-1"
+    ),
+    onClick: (event) => tree.handleItemClick(itemId, event),
+    onFocus: () => tree.focusItem(itemId),
+    onKeyDown: (event) => tree.handleItemKeyDown(itemId, event),
+    ref: (node) => tree.registerItemButton(itemId, node)
+  };
+  const disclosureProps = {
+    type: "button",
+    visible: state.isExpandable,
+    "aria-label": state.isExpanded ? `Collapse ${String(state.item.label)}` : `Expand ${String(state.item.label)}`,
+    "aria-expanded": state.isExpanded,
+    tabIndex: -1,
+    className: "data-[expanded=true]:bg-transparent data-[expanded=true]:[&>svg]:rotate-90 data-[expanded=false]:[&>svg]:rotate-0",
+    "data-expanded": state.isExpanded,
+    onClick: (event) => {
+      event.stopPropagation();
+      tree.toggleItemExpanded(itemId, event);
+    }
+  };
+  return /* @__PURE__ */ jsxs4(
+    WorkbenchSidebarMenuItem,
+    {
+      ref: setItemNodeRef,
+      "data-slot": "workbench-sidebar-tree-item",
+      "data-tree-item-id": itemId,
+      "data-depth": state.depth,
+      "data-dragging": isDragging || void 0,
+      "data-drop-inside": isInsideDropTarget || void 0,
+      "data-sorting": isSorting || void 0,
+      children: [
+        state.depth > 0 ? Array.from({ length: state.depth }, (_, depthIndex) => /* @__PURE__ */ jsx8(
+          "span",
+          {
+            "aria-hidden": "true",
+            "data-slot": "workbench-sidebar-tree-depth-line",
+            className: "border-sidedock-border pointer-events-none absolute inset-y-0 z-0 border-l",
+            style: {
+              left: `${8 + depthIndex * tree.indentWidth}px`
+            }
+          },
+          depthIndex
+        )) : null,
+        showDropIndicator ? /* @__PURE__ */ jsx8(
+          "div",
+          {
+            "data-slot": "workbench-sidebar-tree-drop-indicator",
+            "data-placement": dropIndicatorPlacement,
+            className: cn(
+              "bg-sidedock-text-active pointer-events-none absolute right-1 left-1 z-[1] h-0.5 rounded-full",
+              dropIndicatorPlacement === "before" ? "-top-px" : "-bottom-px"
+            ),
+            style: {
+              left: `${8 + (projectedDepth ?? state.depth) * tree.indentWidth}px`
+            }
+          }
+        ) : null,
+        /* @__PURE__ */ jsx8(
+          WorkbenchSidebarTreeItemContent,
+          {
+            state,
+            rowProps,
+            buttonProps,
+            disclosureProps,
+            leadingVisual,
+            trailingVisual,
+            renderItem
+          }
+        )
+      ]
+    }
+  );
+}
+
+// src/layouts/workbench/core/hooks/useWorkbenchPrimarySidebar.tsx
+import React7 from "react";
+function useWorkbenchPrimarySidebar2() {
+  const context = React7.useContext(WorkbenchPrimarySidebarContext);
+  if (!context) {
+    throw new Error(
+      "useWorkbenchPrimarySidebar must be used within a WorkbenchPrimarySidebarProvider"
+    );
+  }
+  return context;
+}
+
+// src/layouts/workbench/core/components/sidebar/WorkbenchPrimarySidebar.tsx
+import { jsx as jsx9 } from "react/jsx-runtime";
+function WorkbenchPrimarySidebar(props) {
+  const { isMobile, openMobile, setOpenMobile, state, toggleSidebar } = useWorkbenchPrimarySidebar2();
+  return /* @__PURE__ */ jsx9(
+    WorkbenchSidebarShell,
+    {
+      ...props,
+      description: "Displays the primary workbench sidebar on mobile.",
+      isMobile,
+      openMobile,
+      setOpenMobile,
+      side: "left",
+      state,
+      title: "Primary Sidebar",
+      toggleSidebar
+    }
+  );
+}
+
+// src/layouts/workbench/core/hooks/useWorkbenchSecondarySidebar.tsx
+import React8 from "react";
+function useWorkbenchSecondarySidebar2() {
+  const context = React8.useContext(WorkbenchSecondarySidebarContext);
+  if (!context) {
+    throw new Error(
+      "useWorkbenchSecondarySidebar must be used within a WorkbenchSecondarySidebarProvider"
+    );
+  }
+  return context;
+}
+
+// src/layouts/workbench/core/components/sidebar/WorkbenchSecondarySidebar.tsx
+import { jsx as jsx10 } from "react/jsx-runtime";
+function WorkbenchSecondarySidebar(props) {
+  const { isMobile, openMobile, setOpenMobile, state, toggleSidebar } = useWorkbenchSecondarySidebar2();
+  return /* @__PURE__ */ jsx10(
+    WorkbenchSidebarShell,
+    {
+      ...props,
+      description: "Displays the secondary workbench sidebar on mobile.",
+      isMobile,
+      openMobile,
+      setOpenMobile,
+      side: "right",
+      state,
+      title: "Secondary Sidebar",
+      toggleSidebar
+    }
+  );
+}
+export {
+  WORKBENCH_RIBBON_BAR_WIDTH,
+  Workbench,
+  WorkbenchContentArea,
+  WorkbenchContextAreaRail,
+  WorkbenchPanelGroup,
+  WorkbenchPrimarySidebar,
+  WorkbenchPrimarySidebarContext,
+  WorkbenchPrimarySidebarProvider,
+  WorkbenchProvider,
+  WorkbenchRibbonBar,
+  WorkbenchRibbonBarButton,
+  WorkbenchRibbonBarContent,
+  WorkbenchRibbonBarFooter,
+  WorkbenchRibbonBarHeader,
+  WorkbenchRibbonBarSeparator,
+  WorkbenchSecondarySidebar,
+  WorkbenchSecondarySidebarContext,
+  WorkbenchSecondarySidebarProvider,
+  WorkbenchSidebarContent,
+  WorkbenchSidebarFooter,
+  WorkbenchSidebarGroup,
+  WorkbenchSidebarGroupAction,
+  WorkbenchSidebarGroupContent,
+  WorkbenchSidebarGroupLabel,
+  WorkbenchSidebarHeader,
+  WorkbenchSidebarMenu,
+  WorkbenchSidebarMenuBadge,
+  WorkbenchSidebarMenuButton,
+  WorkbenchSidebarMenuItem,
+  WorkbenchSidebarMenuLeadingAction,
+  WorkbenchSidebarMenuRow,
+  WorkbenchSidebarMenuSkeleton,
+  WorkbenchSidebarMenuSub,
+  WorkbenchSidebarMenuSubButton,
+  WorkbenchSidebarMenuSubItem,
+  WorkbenchSidebarMenuTrailingAction,
+  WorkbenchSidebarSeparator,
+  WorkbenchSidebarShell,
+  WorkbenchSidebarTree,
+  WorkbenchSidebarTreeProvider,
+  useWorkbenchPrimarySidebar,
+  useWorkbenchSecondarySidebar,
+  useWorkbenchSidebarTree,
+  useWorkbenchSidebarTreeItem
+};
+//# sourceMappingURL=index.js.map