@justanarthur/modo-ui 0.0.0-stage → 0.1.0

package/dist/shared/components-nn6xezy2.js

@@ -0,0 +1,1828 @@
+import {
+  useIsMobile
+} from "./components-4xxddc44.js";
+import {
+  Sheet
+} from "./components-r43mqnd6.js";
+import {
+  fieldVariants
+} from "./components-de8xsm9y.js";
+import {
+  Tooltip
+} from "./components-gndm6am4.js";
+import {
+  SizeProvider
+} from "./components-vb033rns.js";
+import {
+  Button
+} from "./components-5pkcfprd.js";
+import {
+  useIcon
+} from "./components-m5br529r.js";
+import {
+  ScrollArea
+} from "./components-ed7cmssr.js";
+import {
+  SurfaceProvider,
+  surfaceClasses,
+  useSurface
+} from "./components-csxz9f52.js";
+import {
+  FluidHoverHighlight
+} from "./components-r22vtgqc.js";
+import {
+  useFluidHover
+} from "./components-e46kf6cp.js";
+import {
+  useShape
+} from "./components-7zp99w5d.js";
+import {
+  useControllableState
+} from "./components-dg0w8g5p.js";
+import {
+  GooIndicator
+} from "./components-kf2ehztc.js";
+import {
+  exitFallbackMs,
+  spring
+} from "./components-vc1k7yv2.js";
+import {
+  useSize,
+  useSizeVariant
+} from "./components-x3rz4cyn.js";
+import {
+  cn
+} from "./components-0f0as45n.js";
+
+// components/navigation/sidebar/index.tsx
+import {
+  forwardRef as forwardRef3,
+  useEffect as useEffect3,
+  useMemo as useMemo3
+} from "react";
+
+// components/navigation/sidebar/sidebar-core.tsx
+import { motion, useReducedMotion } from "motion/react";
+import {
+  Children,
+  cloneElement,
+  createContext,
+  forwardRef,
+  isValidElement,
+  useCallback,
+  useContext,
+  useEffect,
+  useId,
+  useLayoutEffect,
+  useMemo,
+  useRef,
+  useState
+} from "react";
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+var SIDEBAR_COOKIE_NAME = "sidebar_state";
+var SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7;
+var SIDEBAR_WIDTH = "16rem";
+var SIDEBAR_WIDTH_MOBILE = "18rem";
+var SIDEBAR_KEYBOARD_SHORTCUT = "[";
+var SIDEBAR_KEYBOARD_SHORTCUT_RIGHT = "]";
+var SIDEBAR_MIN_WIDTH = 160;
+var SIDEBAR_MAX_WIDTH = 360;
+var SIDEBAR_COLLAPSE_SLOP = 56;
+var SIDEBAR_HOVER_STRIP = 12;
+var SIDEBAR_HOVER_TRIGGER_GAP = 24;
+var mountedProviders = [];
+var SidebarContext = createContext(null);
+function useSidebar() {
+  const ctx = useContext(SidebarContext);
+  if (!ctx)
+    throw new Error("useSidebar must be used within a SidebarProvider");
+  return ctx;
+}
+function inHoverZone(event, side, frame, shell, triggers) {
+  if (!frame || !shell)
+    return false;
+  const bounds = frame.getBoundingClientRect();
+  if (event.clientY < bounds.top || event.clientY > bounds.bottom)
+    return false;
+  const box = shell.getBoundingClientRect();
+  const inner = side === "left" ? box.right : box.left;
+  let reach = SIDEBAR_HOVER_STRIP;
+  for (const trigger of triggers) {
+    const button = trigger.getBoundingClientRect();
+    const gap = side === "left" ? button.left - inner : inner - button.right;
+    if (gap >= 0 && gap <= SIDEBAR_HOVER_TRIGGER_GAP)
+      reach = Math.max(reach, gap + button.width);
+  }
+  return side === "left" ? event.clientX >= bounds.left && event.clientX < inner + reach : event.clientX <= bounds.right && event.clientX > inner - reach;
+}
+var SidebarProvider = forwardRef(({
+  defaultOpen = true,
+  open: openProp,
+  onOpenChange,
+  persist = true,
+  shortcut: shortcutProp,
+  mobileBreakpoint = 768,
+  openOnHover = false,
+  width: widthProp = SIDEBAR_WIDTH,
+  widthMobile = SIDEBAR_WIDTH_MOBILE,
+  className,
+  style,
+  children,
+  ...props
+}, ref) => {
+  const isMobile = useIsMobile(mobileBreakpoint);
+  const [openMobile, setOpenMobile] = useState(false);
+  const [side, setSide] = useState("left");
+  const wrapperRef = useRef(null);
+  useEffect(() => {
+    const el = wrapperRef.current;
+    if (!el)
+      return;
+    mountedProviders.push(el);
+    return () => {
+      const i = mountedProviders.indexOf(el);
+      if (i !== -1)
+        mountedProviders.splice(i, 1);
+    };
+  }, []);
+  const registerSide = useCallback((next) => setSide(next), []);
+  const [width, setWidth] = useState(widthProp);
+  useEffect(() => setWidth(widthProp), [widthProp]);
+  const [isResizing, setIsResizing] = useState(false);
+  const shortcut = shortcutProp === undefined ? side === "right" ? SIDEBAR_KEYBOARD_SHORTCUT_RIGHT : SIDEBAR_KEYBOARD_SHORTCUT : shortcutProp;
+  const [internalOpen, setInternalOpen] = useState(defaultOpen);
+  const open = openProp ?? internalOpen;
+  const openRef = useRef(open);
+  openRef.current = open;
+  const setOpen = useCallback((value2) => {
+    const next = typeof value2 === "function" ? value2(openRef.current) : value2;
+    if (onOpenChange)
+      onOpenChange(next);
+    else
+      setInternalOpen(next);
+    if (persist) {
+      document.cookie = `${SIDEBAR_COOKIE_NAME}=${next}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`;
+    }
+  }, [onOpenChange, persist]);
+  const toggleSidebar = useCallback(() => {
+    if (isMobile)
+      setOpenMobile((prev) => !prev);
+    else
+      setOpen((prev) => !prev);
+  }, [isMobile, setOpen]);
+  const [hoverOpen, setHoverOpen] = useState(false);
+  useEffect(() => {
+    if (open || !openOnHover)
+      setHoverOpen(false);
+  }, [open, openOnHover]);
+  const shellRef = useRef(null);
+  const triggers = useRef(new Set);
+  const registerTrigger = useCallback((node) => {
+    triggers.current.add(node);
+    return () => {
+      triggers.current.delete(node);
+    };
+  }, []);
+  useEffect(() => {
+    if (!openOnHover || open || isMobile || isResizing)
+      return;
+    let armed = false;
+    let close;
+    const onPointerMove = (event) => {
+      if (event.pointerType !== "mouse")
+        return;
+      if (!inHoverZone(event, side, wrapperRef.current, shellRef.current, triggers.current)) {
+        armed = true;
+        if (hoverOpen)
+          close ??= setTimeout(() => setHoverOpen(false), 300);
+        return;
+      }
+      clearTimeout(close);
+      close = undefined;
+      if (armed)
+        setHoverOpen(true);
+    };
+    document.addEventListener("pointermove", onPointerMove);
+    return () => {
+      document.removeEventListener("pointermove", onPointerMove);
+      clearTimeout(close);
+    };
+  }, [openOnHover, open, isMobile, isResizing, hoverOpen, side]);
+  useEffect(() => {
+    if (shortcut == null)
+      return;
+    const onKeyDown = (event) => {
+      if (event.key.toLowerCase() !== shortcut.toLowerCase())
+        return;
+      if (event.metaKey || event.ctrlKey || event.altKey)
+        return;
+      const target = event.target;
+      if (target.tagName === "INPUT" || target.tagName === "TEXTAREA" || target.tagName === "SELECT" || target.isContentEditable)
+        return;
+      const root = wrapperRef.current;
+      if (!root)
+        return;
+      if (root.contains(target)) {
+        if (mountedProviders.some((el) => el !== root && root.contains(el) && el.contains(target)))
+          return;
+        if (mountedProviders.some((el) => el !== root && target.contains(el)))
+          return;
+      } else {
+        const wrapped = mountedProviders.filter((el) => target.contains(el));
+        if (wrapped.length > 0) {
+          const outermost = wrapped.find((el) => !wrapped.some((other) => other !== el && other.contains(el)));
+          if (outermost !== root)
+            return;
+        } else {
+          if (mountedProviders.some((el) => el !== root && el.contains(target)))
+            return;
+          const outermost = mountedProviders.find((el) => !mountedProviders.some((other) => other !== el && other.contains(el)));
+          if (outermost !== root)
+            return;
+        }
+      }
+      event.preventDefault();
+      toggleSidebar();
+    };
+    window.addEventListener("keydown", onKeyDown);
+    return () => window.removeEventListener("keydown", onKeyDown);
+  }, [shortcut, toggleSidebar]);
+  const value = useMemo(() => ({
+    state: open || hoverOpen ? "expanded" : "collapsed",
+    open,
+    setOpen,
+    openMobile,
+    setOpenMobile,
+    isMobile,
+    toggleSidebar,
+    width,
+    setWidth,
+    widthMobile,
+    mobileBreakpoint,
+    side,
+    registerSide,
+    shortcut,
+    openOnHover,
+    hoverOpen,
+    setHoverOpen,
+    shellRef,
+    registerTrigger,
+    isResizing,
+    setIsResizing
+  }), [
+    open,
+    setOpen,
+    openMobile,
+    isMobile,
+    toggleSidebar,
+    width,
+    widthMobile,
+    mobileBreakpoint,
+    side,
+    registerSide,
+    shortcut,
+    openOnHover,
+    hoverOpen,
+    registerTrigger,
+    isResizing
+  ]);
+  return /* @__PURE__ */ jsx(SidebarContext.Provider, {
+    value,
+    children: /* @__PURE__ */ jsx("div", {
+      ref: (node) => {
+        wrapperRef.current = node;
+        if (typeof ref === "function")
+          ref(node);
+        else if (ref)
+          ref.current = node;
+      },
+      "data-slot": "sidebar-wrapper",
+      className: cn("group/sidebar-wrapper relative flex min-h-svh w-full", className),
+      style: {
+        "--sidebar-width": width,
+        "--sidebar-width-mobile": widthMobile,
+        ...style
+      },
+      ...props,
+      children
+    })
+  });
+});
+SidebarProvider.displayName = "SidebarProvider";
+function composeRefs(...refs) {
+  return (node) => {
+    for (const r of refs) {
+      if (typeof r === "function")
+        r(node);
+      else if (r)
+        r.current = node;
+    }
+  };
+}
+function resolveSlotTemplate(render, asChild, children) {
+  if (render && isValidElement(render)) {
+    return { template: render, content: children };
+  }
+  if (asChild) {
+    const only = Children.toArray(children)[0];
+    if (isValidElement(only)) {
+      return {
+        template: only,
+        content: only.props.children
+      };
+    }
+  }
+  return { template: null, content: children };
+}
+function slotElement(template, DefaultTag, props, content) {
+  if (!template) {
+    const Tag = DefaultTag;
+    return /* @__PURE__ */ jsx(Tag, {
+      ...props,
+      children: content
+    });
+  }
+  const templateProps = template.props;
+  const merged = {
+    ...props,
+    ...templateProps,
+    className: cn(props.className, templateProps.className),
+    style: { ...props.style, ...templateProps.style }
+  };
+  for (const key of Object.keys(props)) {
+    if (!/^on[A-Z]/.test(key))
+      continue;
+    const ours = props[key];
+    const theirs = templateProps[key];
+    if (typeof ours === "function" && typeof theirs === "function") {
+      merged[key] = (...args) => {
+        theirs(...args);
+        ours(...args);
+      };
+    }
+  }
+  const templateRef = templateProps.ref ?? template.ref;
+  merged.ref = composeRefs(props.ref, templateRef);
+  return cloneElement(template, merged, content);
+}
+var BREAKPOINT_FADE_BASE = "transition-[opacity,display] ease-out [transition-behavior:allow-discrete] motion-reduce:transition-none";
+var BREAKPOINT_HIDDEN = {
+  640: "max-sm:hidden max-sm:opacity-0 max-sm:duration-moderate sm:duration-slow sm:starting:opacity-0",
+  768: "max-md:hidden max-md:opacity-0 max-md:duration-moderate md:duration-slow md:starting:opacity-0",
+  1024: "max-lg:hidden max-lg:opacity-0 max-lg:duration-moderate lg:duration-slow lg:starting:opacity-0",
+  1280: "max-xl:hidden max-xl:opacity-0 max-xl:duration-moderate xl:duration-slow xl:starting:opacity-0"
+};
+var SidebarShell = forwardRef(({ side, variant, bordered = true, rail = true, railTooltipOpen, className, children, ...props }, ref) => {
+  const { open: kept, hoverOpen, width, mobileBreakpoint, isMobile, isResizing, shellRef } = useSidebar();
+  const open = kept || hoverOpen;
+  const shape = useShape();
+  const substrate = useSurface();
+  const floatingLevel = Math.min(substrate + 1, 8);
+  const reduceMotion = useReducedMotion() ?? false;
+  const [dragFlip, setDragFlip] = useState(false);
+  const prevOpenRef = useRef(open);
+  const openFlipped = prevOpenRef.current !== open;
+  useEffect(() => {
+    const flipped = prevOpenRef.current !== open;
+    prevOpenRef.current = open;
+    if (!isResizing) {
+      setDragFlip(false);
+      return;
+    }
+    if (!flipped)
+      return;
+    setDragFlip(true);
+    const id = setTimeout(() => setDragFlip(false), exitFallbackMs(spring.moderate));
+    return () => clearTimeout(id);
+  }, [open, isResizing]);
+  const widthTransition = reduceMotion ? { duration: 0 } : isResizing ? openFlipped || dragFlip ? open ? spring.moderate : spring.moderate.exit : { duration: 0 } : open ? spring.slow : spring.slow.exit;
+  return /* @__PURE__ */ jsx(motion.div, {
+    ref: (node) => {
+      shellRef.current = node;
+      if (typeof ref === "function")
+        ref(node);
+      else if (ref)
+        ref.current = node;
+    },
+    "data-slot": "sidebar",
+    "data-state": open ? "expanded" : "collapsed",
+    "data-collapsible": open ? "" : "offcanvas",
+    "data-variant": variant,
+    "data-side": side,
+    className: cn("peer shrink-0 sticky top-0 h-svh overflow-hidden", side === "right" && "order-last", variant === "inset" && "[--scroll-divider-inset:8px]", BREAKPOINT_FADE_BASE, BREAKPOINT_HIDDEN[mobileBreakpoint], !BREAKPOINT_HIDDEN[mobileBreakpoint] && isMobile && "hidden", className),
+    initial: false,
+    animate: { width: open ? width : "0rem" },
+    transition: widthTransition,
+    ...props,
+    children: /* @__PURE__ */ jsxs(motion.div, {
+      className: cn("absolute inset-y-0 flex h-full flex-col", side === "left" ? "left-0" : "right-0", variant === "floating" && "p-2", variant === "inset" && "py-2"),
+      style: { width },
+      initial: false,
+      animate: { x: open ? "0%" : side === "left" ? "-100%" : "100%" },
+      transition: widthTransition,
+      ...open || isResizing ? {} : { inert: "" },
+      children: [
+        variant === "floating" ? /* @__PURE__ */ jsx("div", {
+          "data-sidebar": "sidebar",
+          className: cn("flex h-full w-full min-h-0 flex-col", shape.container, surfaceClasses(floatingLevel, 3)),
+          children: /* @__PURE__ */ jsx(SurfaceProvider, {
+            value: floatingLevel,
+            children
+          })
+        }) : /* @__PURE__ */ jsx("div", {
+          "data-sidebar": "sidebar",
+          className: cn("flex h-full w-full min-h-0 flex-col", bordered && variant === "sidebar" && (side === "left" ? "border-r border-border" : "border-l border-border")),
+          children
+        }),
+        rail && /* @__PURE__ */ jsx(SidebarRail, {
+          tooltipOpen: railTooltipOpen,
+          className: cn(variant === "floating" && (side === "left" ? "right-1 after:right-[3.5px]" : "left-1 after:left-[3.5px]"), variant !== "sidebar" && "after:inset-y-2 after:[mask-image:linear-gradient(to_bottom,transparent_var(--rail-fade-start),black_var(--rail-fade-end),black_calc(100%-var(--rail-fade-end)),transparent_calc(100%-var(--rail-fade-start)))]"),
+          style: variant !== "sidebar" ? {
+            "--rail-fade-start": `${shape.bgRadius >= 20 ? 24 : 12}px`,
+            "--rail-fade-end": `${(shape.bgRadius >= 20 ? 24 : 12) + 24}px`
+          } : undefined
+        })
+      ]
+    })
+  });
+});
+SidebarShell.displayName = "SidebarShell";
+function ShortcutKbd({ children }) {
+  return /* @__PURE__ */ jsx("kbd", {
+    className: "-my-1 flex h-4 min-w-4 items-center justify-center rounded border border-background/30 px-1 font-sans text-micro-compact text-background/80",
+    children
+  });
+}
+function useShortcutKey() {
+  const { side, shortcut } = useSidebar();
+  return shortcut ?? (side === "right" ? SIDEBAR_KEYBOARD_SHORTCUT_RIGHT : SIDEBAR_KEYBOARD_SHORTCUT);
+}
+var SidebarTrigger = forwardRef(({ onClick, size, children, ...props }, ref) => {
+  const { toggleSidebar, open, openMobile, isMobile, side, openOnHover, registerTrigger } = useSidebar();
+  const shortcutKey = useShortcutKey();
+  const hoverMode = openOnHover && !isMobile;
+  const TriggerIcon = useIcon(`panel-${side}${hoverMode && !open ? "-dashed" : ""}`);
+  const iconSize = useSizeVariant() === "compact" ? "icon-compact" : "icon";
+  const collapsed = isMobile ? !openMobile : !open;
+  const label = hoverMode ? open ? "Show sidebar on hover" : "Keep sidebar open" : collapsed ? "Expand sidebar" : "Collapse sidebar";
+  const node = useRef(null);
+  useEffect(() => node.current ? registerTrigger(node.current) : undefined, [registerTrigger]);
+  return /* @__PURE__ */ jsx(Tooltip, {
+    side: "bottom",
+    content: /* @__PURE__ */ jsxs("span", {
+      className: "flex items-center gap-1.5",
+      children: [
+        /* @__PURE__ */ jsx("span", {
+          className: "[text-box:trim-both_cap_alphabetic]",
+          children: label
+        }),
+        /* @__PURE__ */ jsx(ShortcutKbd, {
+          children: shortcutKey
+        })
+      ]
+    }),
+    children: /* @__PURE__ */ jsx(Button, {
+      ref: (element) => {
+        node.current = element;
+        if (typeof ref === "function")
+          ref(element);
+        else if (ref)
+          ref.current = element;
+      },
+      variant: "ghost",
+      size: size ?? iconSize,
+      "data-sidebar": "trigger",
+      "aria-label": hoverMode ? label : "Toggle Sidebar",
+      onClick: (event) => {
+        onClick?.(event);
+        toggleSidebar();
+      },
+      ...props,
+      children: children ?? /* @__PURE__ */ jsx(TriggerIcon, {})
+    })
+  });
+});
+SidebarTrigger.displayName = "SidebarTrigger";
+var SidebarRail = forwardRef(({ className, tooltipOpen, ...props }, ref) => {
+  const { toggleSidebar, open, setOpen, setHoverOpen, setWidth, side, setIsResizing } = useSidebar();
+  const shortcutKey = useShortcutKey();
+  const railRef = useRef(null);
+  const dragRef = useRef(null);
+  const [dragging, setDragging] = useState(false);
+  const onPointerDown = (event) => {
+    const panel = railRef.current?.closest('[data-slot="sidebar"]');
+    if (!panel)
+      return;
+    dragRef.current = {
+      startX: event.clientX,
+      startWidth: panel.offsetWidth,
+      moved: false,
+      collapsed: false,
+      kept: open
+    };
+    event.currentTarget.setPointerCapture(event.pointerId);
+  };
+  const onPointerMove = (event) => {
+    const drag = dragRef.current;
+    if (!drag)
+      return;
+    const dx = event.clientX - drag.startX;
+    if (!drag.moved && Math.abs(dx) < 4)
+      return;
+    if (!drag.moved) {
+      drag.moved = true;
+      setDragging(true);
+      setIsResizing(true);
+    }
+    const delta = side === "left" ? dx : -dx;
+    const raw = drag.startWidth + delta;
+    if (raw < SIDEBAR_MIN_WIDTH - SIDEBAR_COLLAPSE_SLOP) {
+      if (!drag.collapsed) {
+        drag.collapsed = true;
+        setWidth(`${SIDEBAR_MIN_WIDTH}px`);
+        (drag.kept ? setOpen : setHoverOpen)(false);
+      }
+      return;
+    }
+    if (drag.collapsed) {
+      drag.collapsed = false;
+      (drag.kept ? setOpen : setHoverOpen)(true);
+    }
+    const next = Math.max(SIDEBAR_MIN_WIDTH, Math.min(SIDEBAR_MAX_WIDTH, raw));
+    setWidth(`${next}px`);
+  };
+  const onPointerUp = (event) => {
+    const drag = dragRef.current;
+    dragRef.current = null;
+    event.currentTarget.releasePointerCapture(event.pointerId);
+    setDragging(false);
+    setIsResizing(false);
+    if (drag && !drag.moved) {
+      if (drag.kept)
+        toggleSidebar();
+      else
+        setHoverOpen(false);
+    }
+  };
+  const onPointerCancel = () => {
+    dragRef.current = null;
+    setDragging(false);
+    setIsResizing(false);
+  };
+  return /* @__PURE__ */ jsx(Tooltip, {
+    side: side === "left" ? "right" : "left",
+    sideOffset: 8,
+    followCursor: "y",
+    forceOpen: dragging ? false : tooltipOpen,
+    content: /* @__PURE__ */ jsxs("span", {
+      className: "flex flex-col items-start gap-2",
+      children: [
+        /* @__PURE__ */ jsxs("span", {
+          className: "[text-box:trim-both_cap_alphabetic]",
+          children: [
+            /* @__PURE__ */ jsx("span", {
+              className: "weight-semibold",
+              children: "Drag"
+            }),
+            " to resize"
+          ]
+        }),
+        /* @__PURE__ */ jsxs("span", {
+          className: "flex items-center gap-1.5",
+          children: [
+            /* @__PURE__ */ jsxs("span", {
+              className: "[text-box:trim-both_cap_alphabetic]",
+              children: [
+                /* @__PURE__ */ jsx("span", {
+                  className: "weight-semibold",
+                  children: "Click"
+                }),
+                " to collapse"
+              ]
+            }),
+            /* @__PURE__ */ jsx(ShortcutKbd, {
+              children: shortcutKey
+            })
+          ]
+        })
+      ]
+    }),
+    children: /* @__PURE__ */ jsx("button", {
+      ref: (node) => {
+        railRef.current = node;
+        if (typeof ref === "function")
+          ref(node);
+        else if (ref)
+          ref.current = node;
+      },
+      type: "button",
+      "data-sidebar": "rail",
+      "aria-label": "Resize or collapse sidebar",
+      tabIndex: -1,
+      onPointerDown,
+      onPointerMove,
+      onPointerUp,
+      onPointerCancel,
+      className: cn("absolute inset-y-0 z-20 w-2 cursor-col-resize touch-none outline-none", side === "left" ? "right-0" : "left-0", "after:absolute after:inset-y-0 after:w-px after:bg-transparent hover:after:bg-foreground/25 after:transition-colors after:duration-fast", tooltipOpen && "after:bg-foreground/25", side === "left" ? "after:right-0" : "after:left-0", className),
+      ...props
+    })
+  });
+});
+SidebarRail.displayName = "SidebarRail";
+var SidebarInset = forwardRef(({ className, ...props }, ref) => {
+  const shape = useShape();
+  return /* @__PURE__ */ jsx("main", {
+    ref,
+    "data-slot": "sidebar-inset",
+    className: cn("relative flex min-h-0 w-full min-w-0 flex-1 flex-col bg-background", "peer-data-[variant=inset]:m-2 peer-data-[variant=inset]:peer-data-[side=left]:ml-0 peer-data-[variant=inset]:peer-data-[side=right]:mr-0", "peer-data-[variant=inset]:peer-data-[state=collapsed]:peer-data-[side=left]:ml-2 peer-data-[variant=inset]:peer-data-[state=collapsed]:peer-data-[side=right]:mr-2", "transition-[margin] duration-fast", shape.bgRadius >= 20 ? "peer-data-[variant=inset]:rounded-3xl" : "peer-data-[variant=inset]:rounded-xl", "peer-data-[variant=inset]:bg-surface-2 peer-data-[variant=inset]:shadow-surface-2", className),
+    ...props
+  });
+});
+SidebarInset.displayName = "SidebarInset";
+var SidebarInput = forwardRef(({ className, ...props }, ref) => {
+  const shape = useShape();
+  const size = useSize();
+  return /* @__PURE__ */ jsx("input", {
+    ref,
+    "data-sidebar": "input",
+    className: cn(fieldVariants(), "w-full px-3 text-foreground placeholder:text-muted-foreground outline-none", "focus-visible:ring-focus-ring", size.variant === "compact" ? "h-7" : "h-8", size.text, shape.input, className),
+    ...props
+  });
+});
+SidebarInput.displayName = "SidebarInput";
+var SidebarHeader = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", {
+  ref,
+  "data-sidebar": "header",
+  className: cn("flex shrink-0 flex-col gap-2 p-2", className),
+  ...props
+}));
+SidebarHeader.displayName = "SidebarHeader";
+var SidebarFooter = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", {
+  ref,
+  "data-sidebar": "footer",
+  className: cn("mt-auto flex shrink-0 flex-col gap-2 p-2", className),
+  ...props
+}));
+SidebarFooter.displayName = "SidebarFooter";
+var SidebarSeparator = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", {
+  ref,
+  "data-sidebar": "separator",
+  role: "separator",
+  "aria-orientation": "horizontal",
+  className: cn("mx-2 h-px shrink-0 bg-border", className),
+  ...props
+}));
+SidebarSeparator.displayName = "SidebarSeparator";
+var useIsoLayoutEffect = typeof window !== "undefined" ? useLayoutEffect : useEffect;
+var SidebarGroupContext = createContext(null);
+var SidebarGroup = forwardRef(({ className, collapsible = false, open: openProp, defaultOpen = true, onOpenChange, children, ...props }, ref) => {
+  const [uncontrolledOpen, setUncontrolledOpen] = useState(defaultOpen);
+  const open = openProp ?? uncontrolledOpen;
+  const contentId = useId();
+  const toggle = useCallback(() => {
+    const next = !(openProp ?? uncontrolledOpen);
+    setUncontrolledOpen(next);
+    onOpenChange?.(next);
+  }, [openProp, uncontrolledOpen, onOpenChange]);
+  const contentRef = useRef(null);
+  const [contentHeight, setContentHeight] = useState(null);
+  useIsoLayoutEffect(() => {
+    if (!collapsible)
+      return;
+    const el = contentRef.current;
+    if (!el || typeof ResizeObserver === "undefined")
+      return;
+    const measure = () => setContentHeight(el.offsetHeight);
+    measure();
+    const ro = new ResizeObserver(measure);
+    ro.observe(el);
+    return () => ro.disconnect();
+  }, [collapsible]);
+  const measured = contentHeight !== null;
+  const [settled, setSettled] = useState(open);
+  useEffect(() => {
+    if (!open)
+      setSettled(false);
+  }, [open]);
+  const prevOpenRef = useRef(open);
+  const togglingRef = useRef(false);
+  if (prevOpenRef.current !== open) {
+    prevOpenRef.current = open;
+    togglingRef.current = true;
+  }
+  const isHeaderAction = (k) => isValidElement(k) && (k.type === SidebarGroupAction || k.type === SidebarGroupActions);
+  let inner = children;
+  let actionsCount = 0;
+  if (collapsible) {
+    const kids = Children.toArray(children);
+    const labelIdx = kids.findIndex((k) => isValidElement(k) && k.type === SidebarGroupLabel);
+    if (labelIdx !== -1) {
+      const tail = kids.slice(labelIdx + 1);
+      const headerActions = tail.filter(isHeaderAction);
+      const rest = tail.filter((k) => !isHeaderAction(k));
+      actionsCount = headerActions.reduce((n, k) => n + (isValidElement(k) && k.type === SidebarGroupActions ? Children.count(k.props.children) : 1), 0);
+      inner = /* @__PURE__ */ jsxs(Fragment, {
+        children: [
+          kids.slice(0, labelIdx),
+          /* @__PURE__ */ jsxs("div", {
+            className: "group/group-header w-full",
+            children: [
+              kids[labelIdx],
+              headerActions
+            ]
+          }),
+          /* @__PURE__ */ jsx(motion.div, {
+            id: contentId,
+            "aria-hidden": open ? undefined : true,
+            className: cn(open && settled ? "overflow-visible" : "overflow-hidden", !measured && !open && "h-0"),
+            initial: false,
+            animate: measured ? { height: open ? contentHeight : 0, opacity: open ? 1 : 0 } : { opacity: open ? 1 : 0 },
+            transition: togglingRef.current ? open ? spring.moderate : spring.moderate.exit : { duration: 0 },
+            onAnimationComplete: () => {
+              togglingRef.current = false;
+              if (open)
+                setSettled(true);
+            },
+            children: /* @__PURE__ */ jsx("div", {
+              ref: contentRef,
+              className: "flex w-full min-w-0 flex-col",
+              ...open ? {} : { inert: "" },
+              children: rest
+            })
+          })
+        ]
+      });
+    }
+  }
+  const ctx = useMemo(() => ({ open, toggle, contentId, actionsCount }), [open, toggle, contentId, actionsCount]);
+  return /* @__PURE__ */ jsx("div", {
+    ref,
+    "data-sidebar": "group",
+    "data-state": collapsible ? open ? "open" : "closed" : undefined,
+    className: cn("relative flex w-full min-w-0 flex-col p-2", className),
+    ...props,
+    children: /* @__PURE__ */ jsx(SidebarGroupContext.Provider, {
+      value: collapsible ? ctx : null,
+      children: inner
+    })
+  });
+});
+SidebarGroup.displayName = "SidebarGroup";
+var SidebarGroupLabel = forwardRef(({ className, render, asChild, children, ...props }, ref) => {
+  const sizeVariant = useSizeVariant();
+  const sizeClasses = useSize();
+  const group = useContext(SidebarGroupContext);
+  const shape = useShape();
+  const ChevronRightIcon = useIcon("chevron-right");
+  const { template, content } = resolveSlotTemplate(render, asChild, children);
+  const nodes = Children.toArray(content);
+  let textEnd = 0;
+  while (textEnd < nodes.length && (typeof nodes[textEnd] === "string" || typeof nodes[textEnd] === "number")) {
+    textEnd++;
+  }
+  const leadingText = nodes.slice(0, textEnd).join("");
+  const labelContent = leadingText ? /* @__PURE__ */ jsxs(Fragment, {
+    children: [
+      /* @__PURE__ */ jsx("span", {
+        className: "min-w-0 truncate",
+        children: leadingText
+      }),
+      nodes.slice(textEnd)
+    ]
+  }) : content;
+  if (group) {
+    return slotElement(template, "button", {
+      ref,
+      type: template ? undefined : "button",
+      "data-sidebar": "group-label",
+      "aria-expanded": group.open,
+      "aria-controls": group.contentId,
+      onClick: group.toggle,
+      style: group.actionsCount > 0 ? { "--group-actions-pad": `${group.actionsCount * 28 + 6}px` } : undefined,
+      className: cn("flex h-8 w-full shrink-0 cursor-pointer select-none items-center gap-2 px-2 text-left text-muted-foreground/70 outline-none", "transition-colors duration-fast hover:text-muted-foreground", group.actionsCount > 0 && "pr-[var(--group-actions-pad)]", "focus-visible:ring-1 focus-visible:ring-focus-ring", shape.item, sizeVariant === "compact" ? "text-caption-compact" : "text-caption", className),
+      ...props
+    }, /* @__PURE__ */ jsxs(Fragment, {
+      children: [
+        labelContent,
+        /* @__PURE__ */ jsx("span", {
+          className: cn("ml-auto flex h-6 shrink-0 items-center justify-center overflow-hidden", group.open ? "w-0 opacity-0 group-hover/group-header:w-6 group-hover/group-header:opacity-100 group-focus-within/group-header:w-6 group-focus-within/group-header:opacity-100 group-has-[[data-sidebar=group-action]:is([data-state=open],[data-popup-open],[aria-expanded=true])]/group-header:w-6 group-has-[[data-sidebar=group-action]:is([data-state=open],[data-popup-open],[aria-expanded=true])]/group-header:opacity-100 pointer-coarse:w-6 pointer-coarse:opacity-100" : "w-6 opacity-100"),
+          children: /* @__PURE__ */ jsx(motion.span, {
+            className: "inline-flex",
+            animate: { rotate: group.open ? 90 : 0 },
+            transition: spring.fast,
+            children: /* @__PURE__ */ jsx(ChevronRightIcon, {
+              size: sizeClasses.icon,
+              strokeWidth: 1.5,
+              className: "shrink-0"
+            })
+          })
+        })
+      ]
+    }));
+  }
+  return slotElement(template, "div", {
+    ref,
+    "data-sidebar": "group-label",
+    className: cn("flex h-8 shrink-0 items-center gap-2 px-2 text-muted-foreground/70 outline-none", sizeVariant === "compact" ? "text-caption-compact" : "text-caption", className),
+    ...props
+  }, labelContent);
+});
+SidebarGroupLabel.displayName = "SidebarGroupLabel";
+var GroupActionsContext = createContext(false);
+var SidebarGroupAction = forwardRef(({ className, render, asChild, children, ...props }, ref) => {
+  const shape = useShape();
+  const sizeClasses = useSize();
+  const inCluster = useContext(GroupActionsContext);
+  const { template, content } = resolveSlotTemplate(render, asChild, children);
+  return slotElement(template, "button", {
+    ref,
+    type: template ? undefined : "button",
+    "data-sidebar": "group-action",
+    className: cn(inCluster ? "relative flex size-6 items-center justify-center text-muted-foreground outline-none" : "absolute right-3.5 top-3 flex size-6 items-center justify-center text-muted-foreground outline-none", "hover:bg-hover hover:text-foreground transition-colors duration-fast", "focus-visible:ring-1 focus-visible:ring-focus-ring", "[&_svg]:size-[var(--icon-size)] [&_svg]:shrink-0 [&_svg]:stroke-[1.5] [&_svg]:transition-[stroke-width] [&_svg]:duration-fast hover:[&_svg]:stroke-[2]", shape.item, className),
+    ...props,
+    style: {
+      ...{ "--icon-size": `${sizeClasses.icon}px` },
+      ...props.style ?? {}
+    }
+  }, content);
+});
+SidebarGroupAction.displayName = "SidebarGroupAction";
+var SidebarGroupActions = forwardRef(({ className, children, ...props }, ref) => {
+  return /* @__PURE__ */ jsx("div", {
+    ref,
+    "data-sidebar": "group-actions",
+    className: cn("absolute right-3.5 top-2 z-10 flex h-8 items-center gap-1", className),
+    ...props,
+    children: /* @__PURE__ */ jsx(GroupActionsContext.Provider, {
+      value: true,
+      children
+    })
+  });
+});
+SidebarGroupActions.displayName = "SidebarGroupActions";
+var SidebarGroupContent = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", {
+  ref,
+  "data-sidebar": "group-content",
+  className: cn("w-full", className),
+  ...props
+}));
+SidebarGroupContent.displayName = "SidebarGroupContent";
+
+// components/navigation/sidebar/sidebar-menu.tsx
+import { cva } from "class-variance-authority";
+import { AnimatePresence, motion as motion2 } from "motion/react";
+import {
+  Children as Children2,
+  createContext as createContext2,
+  forwardRef as forwardRef2,
+  useCallback as useCallback2,
+  useContext as useContext2,
+  useEffect as useEffect2,
+  useId as useId2,
+  useLayoutEffect as useLayoutEffect2,
+  useMemo as useMemo2,
+  useRef as useRef2,
+  useState as useState2
+} from "react";
+import { jsx as jsx2, jsxs as jsxs2, Fragment as Fragment2 } from "react/jsx-runtime";
+var useIsoLayoutEffect2 = typeof window !== "undefined" ? useLayoutEffect2 : useEffect2;
+var MenuScopeContext = createContext2(null);
+var SidebarSelection = createContext2(null);
+var MenuItemContext = createContext2(null);
+var MenuActionsClusterContext = createContext2(false);
+function rowHidden(el) {
+  return el.closest('[data-sidebar="menu-sub"][data-state="closed"]') !== null;
+}
+var DISABLED_CONTROL = ':disabled, [aria-disabled="true"]';
+function rowDisabled(el) {
+  return el.matches(DISABLED_CONTROL) || el.querySelector(`:scope > [data-sidebar="menu-button"]:is(${DISABLED_CONTROL}), :scope > [data-sidebar="menu-sub-button"]:is(${DISABLED_CONTROL})`) !== null;
+}
+function rowSkipped(el) {
+  return rowHidden(el) || rowDisabled(el);
+}
+var overlayGroupSeq = 0;
+var overlayGroupIds = new WeakMap;
+function overlayGroupId(el) {
+  let id = overlayGroupIds.get(el);
+  if (id === undefined) {
+    id = ++overlayGroupSeq;
+    overlayGroupIds.set(el, id);
+  }
+  return id;
+}
+function byDomOrder(a, b) {
+  return a.compareDocumentPosition(b) & Node.DOCUMENT_POSITION_FOLLOWING ? -1 : 1;
+}
+function sameElements(a, b) {
+  return a.length === b.length && a.every((el, i) => el === b[i]);
+}
+function useMenuScope(containerRef, { focusRing = true } = {}) {
+  const { activeIndex, setActiveIndex, itemRects, isMeasured, sessionRef, handlers, registerItem } = useFluidHover(containerRef, { isItemDisabled: rowSkipped });
+  const rowsRef = useRef2(new Set);
+  const rowButtonsRef = useRef2(new Map);
+  const activeMapRef = useRef2(new Map);
+  const [orderedRows, setOrderedRows] = useState2([]);
+  const orderedRowsRef = useRef2(orderedRows);
+  orderedRowsRef.current = orderedRows;
+  const registeredCountRef = useRef2(0);
+  const [activeRows, setActiveRows] = useState2([]);
+  const [focusedRowEl, setFocusedRowEl] = useState2(null);
+  const recomputeActive = useCallback2(() => {
+    const next = orderedRowsRef.current.filter((el) => activeMapRef.current.get(el) && !rowSkipped(el));
+    setActiveRows((prev) => sameElements(prev, next) ? prev : next);
+  }, []);
+  const rowButton = useCallback2((row) => rowButtonsRef.current.get(row) ?? row.querySelector(':scope > [data-sidebar="menu-button"], :scope > [data-sidebar="menu-sub-button"]'), []);
+  const syncRows = useCallback2(() => {
+    const sorted = [...rowsRef.current].sort(byDomOrder);
+    orderedRowsRef.current = sorted;
+    setOrderedRows((prev) => sameElements(prev, sorted) ? prev : sorted);
+    sorted.forEach((el, i) => registerItem(i, rowButton(el) ?? el));
+    for (let i = sorted.length;i < registeredCountRef.current; i++) {
+      registerItem(i, null);
+    }
+    registeredCountRef.current = sorted.length;
+    recomputeActive();
+  }, [registerItem, recomputeActive, rowButton]);
+  const registerRow = useCallback2((el) => {
+    rowsRef.current.add(el);
+    syncRows();
+    return () => {
+      rowsRef.current.delete(el);
+      rowButtonsRef.current.delete(el);
+      activeMapRef.current.delete(el);
+      syncRows();
+    };
+  }, [syncRows]);
+  const setRowButton = useCallback2((row, button) => {
+    if (button)
+      rowButtonsRef.current.set(row, button);
+    else
+      rowButtonsRef.current.delete(row);
+    syncRows();
+  }, [syncRows]);
+  const setRowActive = useCallback2((row, active) => {
+    activeMapRef.current.set(row, active);
+    recomputeActive();
+  }, [recomputeActive]);
+  const refreshVisibility = useCallback2(() => {
+    recomputeActive();
+    setActiveIndex((prev) => {
+      const row = prev !== null ? orderedRowsRef.current[prev] : undefined;
+      return row && rowSkipped(row) ? null : prev;
+    });
+  }, [recomputeActive, setActiveIndex]);
+  const overlayRect = useCallback2((row) => {
+    if (!row)
+      return null;
+    const idx = orderedRowsRef.current.indexOf(row);
+    const rect = idx === -1 ? null : itemRects[idx];
+    if (!rect)
+      return null;
+    const height = Math.min(rect.height, rowButton(row)?.offsetHeight ?? 48);
+    return { ...rect, height };
+  }, [itemRects, rowButton]);
+  const popupOpen = useCallback2(() => {
+    const container = containerRef.current;
+    if (!container)
+      return false;
+    const root = container.closest('[data-slot="sidebar-wrapper"]') ?? container;
+    return !!root.querySelector('[data-sidebar="menu-button"][data-state="open"], [data-sidebar="menu-button"][data-popup-open], [data-sidebar="menu-action"][data-state="open"], [data-sidebar="menu-action"][data-popup-open]');
+  }, [containerRef]);
+  const onMouseMove = useCallback2((e) => {
+    if (popupOpen())
+      return;
+    handlers.onMouseMove(e);
+  }, [popupOpen, handlers]);
+  const onFocus = useCallback2((e) => {
+    const target = e.target;
+    if (!target.closest('[data-sidebar="menu-button"],[data-sidebar="menu-sub-button"]'))
+      return;
+    const row = target.closest('[data-sidebar="menu-item"],[data-sidebar="menu-sub-item"]');
+    if (!row)
+      return;
+    const idx = orderedRowsRef.current.indexOf(row);
+    if (idx === -1)
+      return;
+    setActiveIndex(idx);
+    setFocusedRowEl(target.matches(":focus-visible") ? row : null);
+  }, [setActiveIndex]);
+  const onPointerDown = useCallback2(() => {
+    setFocusedRowEl(null);
+  }, []);
+  const onBlur = useCallback2((e) => {
+    if (containerRef.current?.contains(e.relatedTarget))
+      return;
+    setFocusedRowEl(null);
+    setActiveIndex(null);
+  }, [containerRef, setActiveIndex]);
+  const onKeyDown = useCallback2((e) => {
+    if (!["ArrowDown", "ArrowUp", "ArrowRight", "ArrowLeft", "Home", "End"].includes(e.key))
+      return;
+    const container = containerRef.current;
+    if (!container)
+      return;
+    const items = Array.from(container.querySelectorAll('[data-sidebar="menu-button"], [data-sidebar="menu-sub-button"]')).filter((el) => !el.closest('[data-sidebar="menu-sub"][data-state="closed"]'));
+    const currentIdx = items.indexOf(e.target);
+    if (currentIdx === -1)
+      return;
+    e.preventDefault();
+    e.stopPropagation();
+    if (e.key === "Home")
+      items[0]?.focus();
+    else if (e.key === "End")
+      items[items.length - 1]?.focus();
+    else {
+      const next = ["ArrowDown", "ArrowRight"].includes(e.key) ? (currentIdx + 1) % items.length : (currentIdx - 1 + items.length) % items.length;
+      items[next]?.focus();
+    }
+  }, [containerRef]);
+  const hoveredRowEl = activeIndex !== null ? orderedRows[activeIndex] ?? null : null;
+  const value = useMemo2(() => ({
+    registerRow,
+    setRowButton,
+    setRowActive,
+    hoveredRowEl,
+    activeRows,
+    firstRowEl: orderedRows[0] ?? null,
+    hasActive: activeRows.length > 0,
+    refreshVisibility
+  }), [registerRow, setRowButton, setRowActive, hoveredRowEl, activeRows, orderedRows, refreshVisibility]);
+  const shape = useShape();
+  const rowLevel = useCallback2((row) => row.closest('[data-sidebar="menu-sub"]') ?? containerRef.current, [containerRef]);
+  const prevTargetsRef = useRef2({ hover: null, focus: null, actives: new Map });
+  const levelOccurrence = new Map;
+  const levelFirstActive = new Map;
+  const activeRects = [];
+  for (const row of activeRows) {
+    const level = rowLevel(row);
+    if (!level)
+      continue;
+    const levelId = overlayGroupId(level);
+    const occurrence = levelOccurrence.get(levelId) ?? 0;
+    levelOccurrence.set(levelId, occurrence + 1);
+    if (!levelFirstActive.has(levelId))
+      levelFirstActive.set(levelId, row);
+    const rect = overlayRect(row);
+    if (rect)
+      activeRects.push({
+        key: `${levelId}:${occurrence}`,
+        rect,
+        row,
+        rowChanged: prevTargetsRef.current.actives.get(`${levelId}:${occurrence}`) !== row
+      });
+  }
+  const hoverRect = overlayRect(hoveredRowEl);
+  const focusRect = focusRing ? overlayRect(focusedRowEl) : null;
+  const hoverRowChanged = prevTargetsRef.current.hover !== hoveredRowEl;
+  const focusRowChanged = prevTargetsRef.current.focus !== focusedRowEl;
+  useIsoLayoutEffect2(() => {
+    prevTargetsRef.current = {
+      hover: hoveredRowEl,
+      focus: focusedRowEl,
+      actives: new Map(activeRects.map(({ key, row }) => [key, row]))
+    };
+  });
+  const hoveredLevel = hoveredRowEl ? rowLevel(hoveredRowEl) : null;
+  const hoverAnchorRow = (hoveredLevel ? levelFirstActive.get(overlayGroupId(hoveredLevel)) : undefined) ?? levelFirstActive.values().next().value;
+  const hoverAnchorRect = hoverAnchorRow ? overlayRect(hoverAnchorRow) : null;
+  const overlays = isMeasured ? /* @__PURE__ */ jsxs2(Fragment2, {
+    children: [
+      /* @__PURE__ */ jsx2(AnimatePresence, {
+        children: activeRects.map(({ key, rect, rowChanged }) => /* @__PURE__ */ jsx2(motion2.div, {
+          className: "pointer-events-none absolute top-0 left-0",
+          initial: false,
+          animate: { opacity: 1 },
+          exit: { opacity: 0, transition: spring.moderate.exit },
+          children: /* @__PURE__ */ jsx2(GooIndicator, {
+            rect,
+            className: cn("bg-active", shape.bg),
+            transition: rowChanged ? spring.moderate : false
+          })
+        }, key))
+      }),
+      /* @__PURE__ */ jsx2(FluidHoverHighlight, {
+        rect: hoverRect,
+        session: sessionRef.current,
+        from: hoverAnchorRect,
+        className: shape.bg,
+        transition: hoverRowChanged ? undefined : false
+      }),
+      /* @__PURE__ */ jsx2(AnimatePresence, {
+        children: focusRect && /* @__PURE__ */ jsx2(motion2.div, {
+          className: `absolute ${shape.focusRing} pointer-events-none z-20 border border-focus-ring`,
+          initial: false,
+          animate: {
+            left: focusRect.left - 2,
+            top: focusRect.top - 2,
+            width: focusRect.width + 4,
+            height: focusRect.height + 4
+          },
+          exit: { opacity: 0, transition: spring.fast.exit },
+          transition: focusRowChanged ? { ...spring.fast, opacity: { duration: 0.08 } } : { duration: 0 }
+        })
+      })
+    ]
+  }) : null;
+  return {
+    value,
+    containerProps: {
+      onMouseEnter: handlers.onMouseEnter,
+      onMouseMove,
+      onMouseLeave: handlers.onMouseLeave,
+      onClick: handlers.onClick,
+      onFocus,
+      onBlur,
+      onPointerDown,
+      onKeyDown
+    },
+    overlays
+  };
+}
+var SidebarMenu = forwardRef2(({ className, size, focusRing, children, ...props }, ref) => {
+  const containerRef = useRef2(null);
+  const { value, containerProps, overlays } = useMenuScope(containerRef, { focusRing });
+  const content = /* @__PURE__ */ jsx2(MenuScopeContext.Provider, {
+    value,
+    children: /* @__PURE__ */ jsxs2("ul", {
+      ref: (node) => {
+        containerRef.current = node;
+        if (typeof ref === "function")
+          ref(node);
+        else if (ref)
+          ref.current = node;
+      },
+      "data-sidebar": "menu",
+      className: cn("relative flex w-full min-w-0 flex-col select-none", className),
+      ...containerProps,
+      ...props,
+      children: [
+        overlays,
+        children
+      ]
+    })
+  });
+  return size ? /* @__PURE__ */ jsx2(SizeProvider, {
+    size,
+    children: content
+  }) : content;
+});
+SidebarMenu.displayName = "SidebarMenu";
+function useMenuRow(rowRef, isSubRow = false, sub) {
+  const scope = useContext2(MenuScopeContext);
+  const registerRow = scope?.registerRow;
+  const setRowButton = scope?.setRowButton;
+  const setRowActive = scope?.setRowActive;
+  const activeFlagRef = useRef2(false);
+  useIsoLayoutEffect2(() => {
+    const el = rowRef.current;
+    if (!el || !registerRow)
+      return;
+    return registerRow(el);
+  }, [registerRow, rowRef]);
+  const attachRow = useCallback2((node) => {
+    rowRef.current = node;
+    if (node && setRowActive)
+      setRowActive(node, activeFlagRef.current);
+  }, [setRowActive, rowRef]);
+  const setActive = useCallback2((active) => {
+    activeFlagRef.current = active;
+    if (rowRef.current && setRowActive)
+      setRowActive(rowRef.current, active);
+  }, [setRowActive, rowRef]);
+  const setButtonEl = useCallback2((el) => {
+    if (rowRef.current && setRowButton)
+      setRowButton(rowRef.current, el);
+  }, [setRowButton, rowRef]);
+  const isHovered = rowRef.current !== null && scope?.hoveredRowEl === rowRef.current;
+  const isActiveRow = rowRef.current !== null && (scope?.activeRows.includes(rowRef.current) ?? false);
+  const [trailing, setTrailing] = useState2({
+    actionCount: 0,
+    actionsShowOnHover: false,
+    hasBadge: false
+  });
+  const setActions = useCallback2((count, showOnHover) => setTrailing((prev) => prev.actionCount === count && prev.actionsShowOnHover === showOnHover ? prev : { ...prev, actionCount: count, actionsShowOnHover: showOnHover }), []);
+  const setHasBadge = useCallback2((hasBadge) => setTrailing((prev) => prev.hasBadge === hasBadge ? prev : { ...prev, hasBadge }), []);
+  const [open, setOpen] = useControllableState(sub?.open, sub?.defaultOpen ?? false, sub?.onOpenChange);
+  const subOpen = sub?.collapsible ? open : undefined;
+  const toggleSub = useCallback2(() => setOpen((prev) => !prev), [setOpen]);
+  return useMemo2(() => ({
+    rowRef,
+    attachRow,
+    isHovered,
+    isActiveRow,
+    isSubRow,
+    setActive,
+    setButtonEl,
+    ...trailing,
+    setActions,
+    setHasBadge,
+    subOpen,
+    toggleSub
+  }), [
+    rowRef,
+    attachRow,
+    isHovered,
+    isActiveRow,
+    isSubRow,
+    setActive,
+    setButtonEl,
+    trailing,
+    setActions,
+    setHasBadge,
+    subOpen,
+    toggleSub
+  ]);
+}
+var ROW_BASE_PAD = 8;
+var ROW_SLOT = 24;
+var ROW_GAP = 4;
+var ROW_BADGE_INSET = 8;
+var ROW_ACTION_INSET = 6;
+function rowGutter(actionCount, hasBadge) {
+  if (!actionCount && !hasBadge)
+    return ROW_BASE_PAD;
+  const actionsWidth = actionCount ? actionCount * ROW_SLOT + (actionCount - 1) * ROW_GAP : 0;
+  const runWidth = (hasBadge ? ROW_SLOT : 0) + actionsWidth + (hasBadge && actionCount ? ROW_GAP : 0);
+  const inset = hasBadge ? ROW_BADGE_INSET : ROW_ACTION_INSET;
+  return inset + runWidth + ROW_GAP;
+}
+var SidebarMenuItem = forwardRef2(({ collapsible, open, defaultOpen, onOpenChange, className, children, ...props }, ref) => {
+  const rowRef = useRef2(null);
+  const item = useMenuRow(rowRef, false, { collapsible, open, defaultOpen, onOpenChange });
+  const { attachRow } = item;
+  const refCb = useCallback2((node) => {
+    attachRow(node);
+    if (typeof ref === "function")
+      ref(node);
+    else if (ref)
+      ref.current = node;
+  }, [attachRow, ref]);
+  return /* @__PURE__ */ jsx2(MenuItemContext.Provider, {
+    value: item,
+    children: /* @__PURE__ */ jsx2("li", {
+      ref: refCb,
+      "data-sidebar": "menu-item",
+      className: cn("group/menu-item relative", className),
+      ...props,
+      children
+    })
+  });
+});
+SidebarMenuItem.displayName = "SidebarMenuItem";
+var SidebarMenuSubItem = forwardRef2(({ className, children, ...props }, ref) => {
+  const rowRef = useRef2(null);
+  const item = useMenuRow(rowRef, true);
+  const { attachRow } = item;
+  const refCb = useCallback2((node) => {
+    attachRow(node);
+    if (typeof ref === "function")
+      ref(node);
+    else if (ref)
+      ref.current = node;
+  }, [attachRow, ref]);
+  return /* @__PURE__ */ jsx2(MenuItemContext.Provider, {
+    value: item,
+    children: /* @__PURE__ */ jsx2("li", {
+      ref: refCb,
+      "data-sidebar": "menu-sub-item",
+      className: cn("group/menu-sub-item relative", className),
+      ...props,
+      children
+    })
+  });
+});
+SidebarMenuSubItem.displayName = "SidebarMenuSubItem";
+function MenuRowLabel({
+  content,
+  lit,
+  emphasized,
+  textClass
+}) {
+  const nodes = Children2.toArray(content);
+  const textParts = [];
+  let i = 0;
+  while (i < nodes.length && (typeof nodes[i] === "string" || typeof nodes[i] === "number")) {
+    textParts.push(String(nodes[i]));
+    i++;
+  }
+  const label = textParts.join("");
+  const rest = nodes.slice(i);
+  if (!label) {
+    return /* @__PURE__ */ jsx2("span", {
+      className: cn("flex min-w-0 flex-1 items-center gap-2 transition-colors duration-fast", lit ? "text-foreground" : "text-muted-foreground", textClass),
+      children: content
+    });
+  }
+  return /* @__PURE__ */ jsxs2(Fragment2, {
+    children: [
+      /* @__PURE__ */ jsxs2("span", {
+        className: cn("inline-grid min-w-0 text-left", textClass),
+        children: [
+          /* @__PURE__ */ jsx2("span", {
+            className: "col-start-1 row-start-1 invisible truncate pt-[0.25em] -mt-[0.25em] pb-[0.25em] -mb-[0.25em] weight-semibold [text-box:trim-both_cap_alphabetic]",
+            "aria-hidden": "true",
+            children: label
+          }),
+          /* @__PURE__ */ jsx2("span", {
+            className: cn("col-start-1 row-start-1 truncate pt-[0.25em] -mt-[0.25em] pb-[0.25em] -mb-[0.25em] transition-[color,font-variation-settings] duration-fast [text-box:trim-both_cap_alphabetic]", lit ? "text-foreground" : "text-muted-foreground", emphasized ? "weight-semibold" : "weight-normal"),
+            children: label
+          })
+        ]
+      }),
+      rest
+    ]
+  });
+}
+var sidebarMenuButtonVariants = cva("peer/menu-button relative z-10 flex w-full cursor-pointer select-none items-center gap-2 pl-2 text-left outline-none disabled:opacity-50 disabled:pointer-events-none transition-[padding] duration-fast pr-[var(--row-gutter)] group-hover/menu-item:pr-[var(--row-gutter-hover)] group-focus-within/menu-item:pr-[var(--row-gutter-hover)] group-hover/menu-sub-item:pr-[var(--row-gutter-hover)] group-focus-within/menu-sub-item:pr-[var(--row-gutter-hover)] group-has-[[data-sidebar=menu-action]:is([data-state=open],[data-popup-open],[aria-expanded=true])]/menu-item:pr-[var(--row-gutter-hover)] group-has-[[data-sidebar=menu-action]:is([data-state=open],[data-popup-open],[aria-expanded=true])]/menu-sub-item:pr-[var(--row-gutter-hover)]", {
+  variants: {
+    variant: {
+      default: "",
+      outline: "border border-border bg-background"
+    }
+  },
+  defaultVariants: { variant: "default" }
+});
+var SidebarMenuButton = forwardRef2(({
+  isActive = false,
+  size = "default",
+  variant,
+  icon: Icon,
+  status,
+  dot,
+  value,
+  render,
+  asChild,
+  className,
+  style,
+  onClick,
+  children,
+  ...props
+}, ref) => {
+  const scope = useContext2(MenuScopeContext);
+  const item = useContext2(MenuItemContext);
+  const selection = useContext2(SidebarSelection);
+  const shape = useShape();
+  const sizeClasses = useSize();
+  const buttonRef = useRef2(null);
+  const ChevronRightIcon = useIcon("chevron-right");
+  const subOpen = item?.subOpen;
+  const collapsible = subOpen !== undefined;
+  const effectiveActive = isActive || (value === undefined ? status === "active" : selection?.value === value);
+  const setActive = item?.setActive;
+  useIsoLayoutEffect2(() => {
+    setActive?.(effectiveActive);
+    return () => setActive?.(false);
+  }, [effectiveActive, setActive]);
+  const setButtonEl = item?.setButtonEl;
+  useIsoLayoutEffect2(() => {
+    setButtonEl?.(buttonRef.current);
+    return () => setButtonEl?.(null);
+  }, [setButtonEl]);
+  const resolvedDot = dot ?? (status ? status === "idle" ? "ring" : "filled" : undefined);
+  const lit = effectiveActive || (item?.isHovered ?? false);
+  const heightClass = size === "sm" ? "h-7" : size === "lg" ? "h-12" : sizeClasses.variant === "compact" ? "h-7" : "h-8";
+  const textClass = size === "sm" ? "text-body-compact" : sizeClasses.text;
+  const row = item?.rowRef.current ?? null;
+  const tabIdx = effectiveActive ? 0 : scope?.hasActive ? -1 : row !== null && row === scope?.firstRowEl ? 0 : -1;
+  const gutterHover = rowGutter(item?.actionCount ?? 0, item?.hasBadge ?? false);
+  const gutterRest = item?.actionsShowOnHover ? rowGutter(0, item?.hasBadge ?? false) : gutterHover;
+  const gutterVars = {
+    "--row-gutter": `${gutterRest}px`,
+    "--row-gutter-hover": `${gutterHover}px`
+  };
+  const { template, content } = resolveSlotTemplate(render, asChild, children);
+  const inner = /* @__PURE__ */ jsxs2(Fragment2, {
+    children: [
+      Icon && /* @__PURE__ */ jsx2(Icon, {
+        size: sizeClasses.icon,
+        strokeWidth: lit ? 2 : 1.5,
+        className: cn("shrink-0 transition-[color,stroke-width] duration-fast", lit ? "text-foreground" : "text-muted-foreground")
+      }),
+      !Icon && resolvedDot && /* @__PURE__ */ jsx2("span", {
+        className: "flex shrink-0 items-center justify-center",
+        style: { width: sizeClasses.icon, height: sizeClasses.icon },
+        children: /* @__PURE__ */ jsx2("span", {
+          className: cn("size-2 rounded-full transition-colors duration-fast", resolvedDot === "filled" ? lit ? "bg-foreground/60" : "bg-muted-foreground/50" : lit ? "border border-foreground/60" : "border border-muted-foreground/50")
+        })
+      }),
+      /* @__PURE__ */ jsx2(MenuRowLabel, {
+        content,
+        lit,
+        emphasized: effectiveActive,
+        textClass
+      }),
+      status === "unread" && /* @__PURE__ */ jsx2("span", {
+        className: "sr-only",
+        children: ", unread"
+      }),
+      collapsible && /* @__PURE__ */ jsx2("span", {
+        className: "ml-auto -mr-0.5 flex size-6 shrink-0 items-center justify-center",
+        children: /* @__PURE__ */ jsx2(motion2.span, {
+          className: "inline-flex",
+          animate: { rotate: subOpen ? 90 : 0 },
+          transition: spring.fast,
+          children: /* @__PURE__ */ jsx2(ChevronRightIcon, {
+            size: sizeClasses.icon,
+            strokeWidth: 1.5,
+            className: cn("text-muted-foreground transition-opacity duration-fast", subOpen ? "opacity-0 group-hover/parent-row:opacity-100 group-focus-within/parent-row:opacity-100" : "opacity-100")
+          })
+        })
+      })
+    ]
+  });
+  return slotElement(template, "button", {
+    ref: (node) => {
+      buttonRef.current = node;
+      if (typeof ref === "function")
+        ref(node);
+      else if (ref)
+        ref.current = node;
+    },
+    type: template ? undefined : "button",
+    "data-sidebar": "menu-button",
+    "data-size": size,
+    "data-active": effectiveActive ? "true" : undefined,
+    "data-status": status,
+    "aria-current": effectiveActive ? "page" : undefined,
+    "aria-expanded": subOpen,
+    tabIndex: tabIdx,
+    className: cn(sidebarMenuButtonVariants({ variant }), heightClass, shape.item, collapsible && "group/parent-row", className),
+    onClick: (event) => {
+      onClick?.(event);
+      if (collapsible)
+        item?.toggleSub();
+      else if (value !== undefined)
+        selection?.select(value);
+    },
+    ...props,
+    style: {
+      ...gutterVars,
+      ...collapsible ? { "--row-gutter": "var(--row-gutter-hover)" } : {},
+      ...style
+    }
+  }, inner);
+});
+SidebarMenuButton.displayName = "SidebarMenuButton";
+var SidebarMenuAction = forwardRef2(({ className, showOnHover = false, render, asChild, children, onClick, ...props }, ref) => {
+  const shape = useShape();
+  const sizeClasses = useSize();
+  const item = useContext2(MenuItemContext);
+  const inCluster = useContext2(MenuActionsClusterContext);
+  const { template, content } = resolveSlotTemplate(render, asChild, children);
+  const setActions = item?.setActions;
+  useIsoLayoutEffect2(() => {
+    if (inCluster || !setActions)
+      return;
+    setActions(1, showOnHover);
+    return () => setActions(0, false);
+  }, [inCluster, setActions, showOnHover]);
+  return slotElement(template, "button", {
+    ref,
+    type: template ? undefined : "button",
+    "data-sidebar": "menu-action",
+    "data-show-on-hover": showOnHover ? "" : undefined,
+    className: cn(inCluster ? "relative flex size-6 shrink-0 items-center justify-center text-muted-foreground outline-none" : "absolute right-1.5 z-10 flex size-6 items-center justify-center text-muted-foreground outline-none", !inCluster && (item?.isSubRow ? "group-has-[>[data-sidebar=menu-badge]]/menu-sub-item:right-8.5" : "group-has-[>[data-sidebar=menu-badge]]/menu-item:right-8.5"), !inCluster && (item?.isSubRow || sizeClasses.variant === "compact" ? "top-0.5" : "top-1"), "hover:bg-hover hover:text-foreground transition-[color,background-color,opacity] duration-fast", "focus-visible:ring-1 focus-visible:ring-focus-ring", "[&_svg]:size-[var(--icon-size)] [&_svg]:shrink-0 [&_svg]:stroke-[1.5] [&_svg]:transition-[stroke-width] [&_svg]:duration-fast hover:[&_svg]:stroke-[2]", shape.item, !inCluster && showOnHover && (item?.isSubRow ? "opacity-0 group-hover/menu-sub-item:opacity-100 group-focus-within/menu-sub-item:opacity-100 data-[state=open]:opacity-100 aria-expanded:opacity-100" : "opacity-0 peer-hover/menu-button:opacity-100 peer-focus-visible/menu-button:opacity-100 hover:opacity-100 focus-visible:opacity-100 data-[state=open]:opacity-100 aria-expanded:opacity-100"), className),
+    onClick: (event) => {
+      event.stopPropagation();
+      onClick?.(event);
+    },
+    ...props,
+    style: { ...{ "--icon-size": `${sizeClasses.icon}px` }, ...props.style ?? {} }
+  }, content);
+});
+SidebarMenuAction.displayName = "SidebarMenuAction";
+var SidebarMenuActions = forwardRef2(({ className, showOnHover = false, children, ...props }, ref) => {
+  const item = useContext2(MenuItemContext);
+  const sizeClasses = useSize();
+  const count = Children2.count(children);
+  const setActions = item?.setActions;
+  useIsoLayoutEffect2(() => {
+    setActions?.(count, showOnHover);
+    return () => setActions?.(0, false);
+  }, [setActions, count, showOnHover]);
+  return /* @__PURE__ */ jsx2("div", {
+    ref,
+    "data-sidebar": "menu-actions",
+    className: cn("absolute right-1.5 z-10 flex items-center gap-1", item?.isSubRow ? "group-has-[>[data-sidebar=menu-badge]]/menu-sub-item:right-8.5" : "group-has-[>[data-sidebar=menu-badge]]/menu-item:right-8.5", item?.isSubRow || sizeClasses.variant === "compact" ? "top-0.5" : "top-1", showOnHover && (item?.isSubRow ? "opacity-0 transition-opacity duration-fast group-hover/menu-sub-item:opacity-100 group-focus-within/menu-sub-item:opacity-100 has-[[data-state=open]]:opacity-100 has-[[data-popup-open]]:opacity-100" : "opacity-0 transition-opacity duration-fast peer-hover/menu-button:opacity-100 peer-focus-visible/menu-button:opacity-100 hover:opacity-100 focus-within:opacity-100 has-[[data-state=open]]:opacity-100 has-[[data-popup-open]]:opacity-100"), className),
+    ...props,
+    children: /* @__PURE__ */ jsx2(MenuActionsClusterContext.Provider, {
+      value: true,
+      children
+    })
+  });
+});
+SidebarMenuActions.displayName = "SidebarMenuActions";
+var SidebarMenuBadge = forwardRef2(({ className, ...props }, ref) => {
+  const item = useContext2(MenuItemContext);
+  const sizeClasses = useSize();
+  const lit = item?.isActiveRow ?? false;
+  const setHasBadge = item?.setHasBadge;
+  useIsoLayoutEffect2(() => {
+    setHasBadge?.(true);
+    return () => setHasBadge?.(false);
+  }, [setHasBadge]);
+  return /* @__PURE__ */ jsx2("div", {
+    ref,
+    "data-sidebar": "menu-badge",
+    className: cn("pointer-events-none absolute right-2 z-10 flex h-5 min-w-5 items-center justify-center px-1 tabular-nums", sizeClasses.variant === "compact" ? "top-1 text-micro-compact" : "top-1.5 text-micro", "transition-[color,font-variation-settings] duration-fast", lit ? "text-foreground weight-semibold" : "text-muted-foreground weight-normal", className),
+    ...props
+  });
+});
+SidebarMenuBadge.displayName = "SidebarMenuBadge";
+var SKELETON_WIDTHS = ["62%", "74%", "55%", "82%", "68%"];
+var SidebarMenuSkeleton = forwardRef2(({ className, showIcon = false, ...props }, ref) => {
+  const sizeClasses = useSize();
+  const id = useId2();
+  let sum = 0;
+  for (let i = 0;i < id.length; i++)
+    sum += id.charCodeAt(i);
+  const width = SKELETON_WIDTHS[sum % SKELETON_WIDTHS.length];
+  return /* @__PURE__ */ jsxs2("div", {
+    ref,
+    "data-sidebar": "menu-skeleton",
+    className: cn("flex items-center gap-2 px-2", sizeClasses.variant === "compact" ? "h-7" : "h-8", className),
+    ...props,
+    children: [
+      showIcon && /* @__PURE__ */ jsx2("div", {
+        "data-sidebar": "menu-skeleton-icon",
+        className: "size-4 shrink-0 animate-pulse rounded-md bg-hover"
+      }),
+      /* @__PURE__ */ jsx2("div", {
+        "data-sidebar": "menu-skeleton-text",
+        className: "h-4 flex-1 animate-pulse rounded-md bg-hover",
+        style: { maxWidth: width }
+      })
+    ]
+  });
+});
+SidebarMenuSkeleton.displayName = "SidebarMenuSkeleton";
+var SidebarMenuSub = forwardRef2(({ className, open: openProp, children, ...props }, ref) => {
+  const containerRef = useRef2(null);
+  const row = useContext2(MenuItemContext);
+  const open = openProp ?? row?.subOpen ?? true;
+  const scope = useContext2(MenuScopeContext);
+  const refreshVisibility = scope?.refreshVisibility;
+  useIsoLayoutEffect2(() => {
+    refreshVisibility?.();
+  }, [open, refreshVisibility]);
+  const [contentHeight, setContentHeight] = useState2(null);
+  useIsoLayoutEffect2(() => {
+    const el = containerRef.current;
+    if (!el || typeof ResizeObserver === "undefined")
+      return;
+    const measure = () => setContentHeight(el.offsetHeight);
+    measure();
+    const ro = new ResizeObserver(measure);
+    ro.observe(el);
+    return () => ro.disconnect();
+  }, []);
+  const measured = contentHeight !== null;
+  const prevOpenRef = useRef2(open);
+  const togglingRef = useRef2(false);
+  if (prevOpenRef.current !== open) {
+    prevOpenRef.current = open;
+    togglingRef.current = true;
+  }
+  return /* @__PURE__ */ jsx2(motion2.div, {
+    "data-slot": "sidebar-menu-sub-wrapper",
+    className: cn("overflow-hidden", !measured && !open && "h-0"),
+    initial: false,
+    animate: measured ? { height: open ? contentHeight : 0, opacity: open ? 1 : 0 } : { opacity: open ? 1 : 0 },
+    transition: togglingRef.current ? open ? spring.moderate : spring.moderate.exit : { duration: 0 },
+    onAnimationComplete: () => {
+      togglingRef.current = false;
+    },
+    children: /* @__PURE__ */ jsx2("ul", {
+      ref: (node) => {
+        containerRef.current = node;
+        if (typeof ref === "function")
+          ref(node);
+        else if (ref)
+          ref.current = node;
+      },
+      "data-sidebar": "menu-sub",
+      "data-state": open ? "open" : "closed",
+      "aria-hidden": open ? undefined : true,
+      ...open ? {} : { inert: "" },
+      className: cn("relative ml-[15px] flex min-w-0 flex-col border-l border-border pl-2 select-none", className),
+      ...props,
+      children
+    })
+  });
+});
+SidebarMenuSub.displayName = "SidebarMenuSub";
+var SidebarMenuSubButton = forwardRef2(({
+  isActive: isActiveProp = false,
+  size = "md",
+  icon: Icon,
+  value,
+  render,
+  asChild,
+  className,
+  onClick,
+  children,
+  ...props
+}, ref) => {
+  const item = useContext2(MenuItemContext);
+  const selection = useContext2(SidebarSelection);
+  const isActive = isActiveProp || value !== undefined && selection?.value === value;
+  const shape = useShape();
+  const sizeClasses = useSize();
+  const buttonRef = useRef2(null);
+  const setActive = item?.setActive;
+  useIsoLayoutEffect2(() => {
+    setActive?.(isActive);
+    return () => setActive?.(false);
+  }, [isActive, setActive]);
+  const setButtonEl = item?.setButtonEl;
+  useIsoLayoutEffect2(() => {
+    setButtonEl?.(buttonRef.current);
+    return () => setButtonEl?.(null);
+  }, [setButtonEl]);
+  const lit = isActive || (item?.isHovered ?? false);
+  const tabIdx = isActive ? 0 : -1;
+  const gutterHover = rowGutter(item?.actionCount ?? 0, item?.hasBadge ?? false);
+  const gutterRest = item?.actionsShowOnHover ? rowGutter(0, item?.hasBadge ?? false) : gutterHover;
+  const gutterVars = {
+    "--row-gutter": `${gutterRest}px`,
+    "--row-gutter-hover": `${gutterHover}px`
+  };
+  const { template, content } = resolveSlotTemplate(render, asChild, children);
+  const asButton = !template && value !== undefined && props.href === undefined;
+  return slotElement(template, asButton ? "button" : "a", {
+    type: asButton ? "button" : undefined,
+    ref: (node) => {
+      buttonRef.current = node;
+      if (typeof ref === "function")
+        ref(node);
+      else if (ref)
+        ref.current = node;
+    },
+    "data-sidebar": "menu-sub-button",
+    "data-size": size,
+    "data-active": isActive ? "true" : undefined,
+    "aria-current": isActive ? "page" : undefined,
+    tabIndex: tabIdx,
+    className: cn("relative z-10 flex w-full cursor-pointer select-none items-center gap-2 pl-2 text-left outline-none", "transition-[padding] duration-fast pr-[var(--row-gutter)] group-hover/menu-sub-item:pr-[var(--row-gutter-hover)] group-focus-within/menu-sub-item:pr-[var(--row-gutter-hover)] group-has-[[data-sidebar=menu-action]:is([data-state=open],[data-popup-open],[aria-expanded=true])]/menu-sub-item:pr-[var(--row-gutter-hover)]", size === "sm" ? "h-6" : sizeClasses.variant === "compact" ? "h-6" : "h-7", shape.item, className),
+    onClick: (event) => {
+      onClick?.(event);
+      if (value !== undefined)
+        selection?.select(value);
+    },
+    ...props,
+    style: { ...gutterVars, ...props.style ?? {} }
+  }, /* @__PURE__ */ jsxs2(Fragment2, {
+    children: [
+      Icon && /* @__PURE__ */ jsx2(Icon, {
+        size: sizeClasses.icon,
+        strokeWidth: lit ? 2 : 1.5,
+        className: cn("shrink-0 transition-[color,stroke-width] duration-fast", lit ? "text-foreground" : "text-muted-foreground")
+      }),
+      /* @__PURE__ */ jsx2(MenuRowLabel, {
+        content,
+        lit,
+        emphasized: isActive,
+        textClass: size === "sm" ? "text-body-compact" : sizeClasses.text
+      })
+    ]
+  }));
+});
+SidebarMenuSubButton.displayName = "SidebarMenuSubButton";
+
+// components/navigation/sidebar/index.tsx
+import { jsx as jsx3, jsxs as jsxs3, Fragment as Fragment3 } from "react/jsx-runtime";
+function SidebarSheet({ side, children }) {
+  const { openMobile, setOpenMobile, widthMobile } = useSidebar();
+  return /* @__PURE__ */ jsx3(Sheet, {
+    side,
+    open: openMobile,
+    onOpenChange: setOpenMobile,
+    children: /* @__PURE__ */ jsx3(Sheet.Content, {
+      "aria-label": "Sidebar",
+      "data-sidebar": "sidebar",
+      "data-mobile": "true",
+      "data-side": side,
+      tier: "moderate",
+      className: "gap-0 overflow-hidden p-0",
+      style: { width: widthMobile },
+      children
+    })
+  });
+}
+var Sidebar = forwardRef3(({
+  side = "left",
+  variant = "sidebar",
+  collapsible = "offcanvas",
+  bordered = true,
+  rail = true,
+  railTooltipOpen,
+  value: valueProp,
+  defaultValue,
+  onValueChange,
+  className,
+  style,
+  children: parts,
+  ...props
+}, ref) => {
+  const { isMobile, width, registerSide } = useSidebar();
+  const [value, setValue] = useControllableState(valueProp, defaultValue, onValueChange);
+  const selection = useMemo3(() => ({ value, select: setValue }), [value, setValue]);
+  const children = /* @__PURE__ */ jsx3(SidebarSelection.Provider, {
+    value: selection,
+    children: parts
+  });
+  useEffect3(() => registerSide(side), [side, registerSide]);
+  if (collapsible === "none") {
+    return /* @__PURE__ */ jsx3("div", {
+      ref,
+      "data-slot": "sidebar",
+      "data-variant": variant,
+      "data-side": side,
+      className: cn("peer sticky top-0 flex h-svh shrink-0 flex-col", side === "right" && "order-last", className),
+      style: { width, ...style },
+      ...props,
+      children: /* @__PURE__ */ jsx3("div", {
+        "data-sidebar": "sidebar",
+        className: cn("flex h-full w-full min-h-0 flex-col", bordered && variant === "sidebar" && (side === "left" ? "border-r border-border" : "border-l border-border")),
+        children
+      })
+    });
+  }
+  return /* @__PURE__ */ jsxs3(Fragment3, {
+    children: [
+      isMobile && /* @__PURE__ */ jsx3(SidebarSheet, {
+        side,
+        children
+      }),
+      /* @__PURE__ */ jsx3(SidebarShell, {
+        ref,
+        side,
+        variant,
+        bordered,
+        rail,
+        railTooltipOpen,
+        className,
+        style,
+        ...props,
+        children
+      })
+    ]
+  });
+});
+Sidebar.displayName = "Sidebar";
+var SidebarContent = forwardRef3(({ className, viewportClassName, children, ...props }, ref) => {
+  const { isMobile } = useSidebar();
+  if (isMobile) {
+    return /* @__PURE__ */ jsx3("div", {
+      className: "scroll-divider [--scroll-divider-inset:8px] flex min-h-0 w-full flex-1 flex-col",
+      children: /* @__PURE__ */ jsx3("div", {
+        ref,
+        "data-sidebar": "content",
+        className: cn("scroll-fade flex min-h-0 w-full flex-1 flex-col overflow-y-auto", className),
+        ...props,
+        children
+      })
+    });
+  }
+  return /* @__PURE__ */ jsx3(ScrollArea, {
+    className: cn("scroll-divider min-h-0 w-full flex-1", className),
+    viewportClassName: cn("scroll-fade [&>div]:!block [&>div]:!min-w-0", viewportClassName),
+    children: /* @__PURE__ */ jsx3("div", {
+      ref,
+      "data-sidebar": "content",
+      className: "flex w-full min-w-0 flex-col",
+      ...props,
+      children
+    })
+  });
+});
+SidebarContent.displayName = "SidebarContent";
+Object.assign(Sidebar, {
+  Provider: SidebarProvider,
+  Trigger: SidebarTrigger,
+  Rail: SidebarRail,
+  Inset: SidebarInset,
+  Input: SidebarInput,
+  Header: SidebarHeader,
+  Content: SidebarContent,
+  Footer: SidebarFooter,
+  Separator: SidebarSeparator,
+  Group: SidebarGroup,
+  GroupLabel: SidebarGroupLabel,
+  GroupAction: SidebarGroupAction,
+  GroupActions: SidebarGroupActions,
+  GroupContent: SidebarGroupContent,
+  Menu: SidebarMenu,
+  MenuItem: SidebarMenuItem,
+  MenuButton: SidebarMenuButton,
+  MenuAction: SidebarMenuAction,
+  MenuActions: SidebarMenuActions,
+  MenuBadge: SidebarMenuBadge,
+  MenuSkeleton: SidebarMenuSkeleton,
+  MenuSub: SidebarMenuSub,
+  MenuSubItem: SidebarMenuSubItem,
+  MenuSubButton: SidebarMenuSubButton
+});
+var sidebar_default = Sidebar;
+
+export { SIDEBAR_COOKIE_NAME, SIDEBAR_COOKIE_MAX_AGE, SIDEBAR_WIDTH, SIDEBAR_WIDTH_MOBILE, SIDEBAR_KEYBOARD_SHORTCUT, SIDEBAR_KEYBOARD_SHORTCUT_RIGHT, SIDEBAR_MIN_WIDTH, SIDEBAR_MAX_WIDTH, useSidebar, SidebarProvider, SidebarTrigger, SidebarRail, SidebarInset, SidebarInput, SidebarHeader, SidebarFooter, SidebarSeparator, SidebarGroup, SidebarGroupLabel, SidebarGroupAction, SidebarGroupActions, SidebarGroupContent, SidebarSelection, SidebarMenu, SidebarMenuItem, SidebarMenuSubItem, sidebarMenuButtonVariants, SidebarMenuButton, SidebarMenuAction, SidebarMenuActions, SidebarMenuBadge, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, Sidebar, SidebarContent, sidebar_default };