@platned/ui 0.6.0 → 0.7.0

package/dist/sidebar.cjs

@@ -36,12 +36,63 @@ __export(sidebar_exports, {
   SidebarUserCard: () => SidebarUserCard
 });
 module.exports = __toCommonJS(sidebar_exports);
+var import_react10 = require("react");
 var import_react_router_dom2 = require("react-router-dom");
-var import_lu3 = require("react-icons/lu");
+var import_lucide_react3 = require("lucide-react");
+
+// src/lib/cn.ts
+var import_clsx = require("clsx");
+var import_tailwind_merge = require("tailwind-merge");
+var FONT_SIZES = [
+  "body-micro",
+  "body-tiny",
+  "body-xs",
+  "body-sm",
+  "body",
+  "body-lg",
+  "heading-sm",
+  "heading",
+  "heading-lg",
+  "subheading-sm",
+  "subheading",
+  "subheading-lg",
+  "subtitle-sm",
+  "subtitle",
+  "subtitle-lg",
+  "title-sm",
+  "title",
+  "title-lg",
+  "title-hero",
+  "scale-01",
+  "scale-02",
+  "scale-03",
+  "scale-04",
+  "scale-05",
+  "scale-06",
+  "scale-07",
+  "scale-08",
+  "scale-09",
+  "scale-10",
+  "scale-12"
+];
+var twMerge = (0, import_tailwind_merge.extendTailwindMerge)({
+  extend: {
+    classGroups: {
+      "font-size": [{ text: [...FONT_SIZES] }]
+    }
+  }
+});
+function cn(...inputs) {
+  return twMerge((0, import_clsx.clsx)(inputs));
+}
+
+// src/lib/focus-ring.ts
+var FOCUS_RING = "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand focus-visible:ring-offset-1 focus-visible:ring-offset-default";
+var FOCUS_RING_INSET = "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-brand";
 
 // src/lib/slot.tsx
 var import_react = require("react");
-var import_clsx = __toESM(require("clsx"), 1);
+var import_clsx2 = __toESM(require("clsx"), 1);
 var Slot = (0, import_react.forwardRef)(function Slot2({ children, wrapChildren, ...slotProps }, forwardedRef) {
   if (!(0, import_react.isValidElement)(children)) return null;
   const child = children;
@@ -66,7 +117,7 @@ function mergeProps(slotProps, childProps) {
         merged[key] = childValue ?? slotValue;
       }
     } else if (key === "className") {
-      merged[key] = (0, import_clsx.default)(slotValue, childValue);
+      merged[key] = (0, import_clsx2.default)(slotValue, childValue);
     } else if (key === "style") {
       merged[key] = { ...slotValue, ...childValue };
     } else {
@@ -103,27 +154,30 @@ function useControlSize(explicit) {
 
 // src/components/forms/icon-button.tsx
 var import_react3 = require("react");
-var import_clsx2 = __toESM(require("clsx"), 1);
+var import_clsx3 = __toESM(require("clsx"), 1);
 var import_jsx_runtime2 = require("react/jsx-runtime");
 var variantStyles = {
-  primary: (0, import_clsx2.default)(
+  primary: (0, import_clsx3.default)(
     "bg-brand border border-brand text-brand-on-brand",
     "hover:bg-brand-hover",
-    "disabled:bg-disabled disabled:border-disabled disabled:text-disabled-on-disabled"
+    "disabled:bg-disabled disabled:border-disabled disabled:text-disabled-on-disabled",
+    "aria-disabled:bg-disabled aria-disabled:border-disabled aria-disabled:text-disabled-on-disabled"
   ),
   // Neutral uses secondary background (light gray) for visual weight without a text label
-  neutral: (0, import_clsx2.default)(
+  neutral: (0, import_clsx3.default)(
     "bg-default-secondary border border-default text-default",
     // icon turns brand blue on hover (Figma spec)
     "hover:bg-default-secondary-hover hover:text-brand",
-    "disabled:bg-disabled disabled:border-disabled disabled:text-disabled-on-disabled"
+    "disabled:bg-disabled disabled:border-disabled disabled:text-disabled-on-disabled",
+    "aria-disabled:bg-disabled aria-disabled:border-disabled aria-disabled:text-disabled-on-disabled"
   ),
-  subtle: (0, import_clsx2.default)(
+  subtle: (0, import_clsx3.default)(
     "bg-transparent text-neutral",
     // hover uses background-default-default-hover (#f5f5f5), icon turns brand blue (Figma spec)
     "hover:bg-default-hover hover:text-brand",
     // disabled needs explicit border since there is no base border
-    "disabled:bg-disabled disabled:border disabled:border-disabled disabled:text-disabled-on-disabled"
+    "disabled:bg-disabled disabled:border disabled:border-disabled disabled:text-disabled-on-disabled",
+    "aria-disabled:bg-disabled aria-disabled:border aria-disabled:border-disabled aria-disabled:text-disabled-on-disabled"
   )
 };
 var sizeStyles = {
@@ -131,27 +185,52 @@ var sizeStyles = {
   md: "size-9 rounded-lg [&_svg]:size-5",
   sm: "size-6 rounded-full [&_svg]:size-4"
 };
-var IconButton = (0, import_react3.forwardRef)(function IconButton2({ variant = "primary", size: sizeProp, asChild = false, type, children, className, ...props }, ref) {
-  const size2 = useControlSize(sizeProp);
+var IconButton = (0, import_react3.forwardRef)(function IconButton2({
+  variant = "primary",
+  size: sizeProp,
+  asChild = false,
+  type,
+  disabled,
+  onClick,
+  children,
+  className,
+  ...props
+}, ref) {
+  const size = useControlSize(sizeProp);
+  const softDisabled = asChild && Boolean(disabled);
+  const handleClick = (event) => {
+    if (softDisabled) {
+      event.preventDefault();
+      event.stopPropagation();
+      return;
+    }
+    onClick?.(event);
+  };
   const rootProps = {
-    className: (0, import_clsx2.default)(
+    // `cn`, so a caller's `className` beats the size's radius and the variant's colours.
+    className: cn(
       "inline-flex shrink-0 items-center justify-center transition-colors",
-      "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand focus-visible:ring-offset-1 focus-visible:ring-offset-default",
-      "disabled:cursor-not-allowed",
+      FOCUS_RING,
+      "disabled:cursor-not-allowed aria-disabled:cursor-not-allowed",
       variantStyles[variant],
-      sizeStyles[size2],
+      sizeStyles[size],
       className
     ),
+    "data-variant": variant,
+    "data-size": size,
+    "aria-disabled": softDisabled || void 0,
+    onClick: handleClick,
     ...props
   };
   if (asChild) {
-    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Slot, { ref, ...rootProps, children });
+    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Slot, { ref, tabIndex: disabled ? -1 : void 0, ...rootProps, children });
   }
   return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
     "button",
     {
       ref,
       type: type ?? "button",
+      disabled,
       ...rootProps,
       children
     }
@@ -159,7 +238,7 @@ var IconButton = (0, import_react3.forwardRef)(function IconButton2({ variant =
 });
 
 // src/components/avatar/avatar.tsx
-var import_clsx3 = __toESM(require("clsx"), 1);
+var import_clsx4 = __toESM(require("clsx"), 1);
 var import_jsx_runtime3 = require("react/jsx-runtime");
 var sizeStyles2 = {
   lg: "size-10",
@@ -171,16 +250,16 @@ var initialTextStyles = {
   md: "text-body-xs font-semibold",
   sm: "text-body-tiny font-semibold"
 };
-function getShapeClass(shape, size2) {
+function getShapeClass(shape, size) {
   if (shape === "circle") return "rounded-full";
-  return size2 === "sm" ? "rounded" : "rounded-lg";
+  return size === "sm" ? "rounded" : "rounded-lg";
 }
 function Avatar(props) {
-  const { size: size2 = "lg", shape = "circle", className } = props;
-  const base = (0, import_clsx3.default)(
+  const { size = "lg", shape = "circle", className } = props;
+  const base = (0, import_clsx4.default)(
     "shrink-0 overflow-hidden",
-    sizeStyles2[size2],
-    getShapeClass(shape, size2),
+    sizeStyles2[size],
+    getShapeClass(shape, size),
     className
   );
   if (props.type === "image") {
@@ -196,16 +275,16 @@ function Avatar(props) {
   return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
     "div",
     {
-      className: (0, import_clsx3.default)(base, "flex items-center justify-center"),
+      className: (0, import_clsx4.default)(base, "flex items-center justify-center"),
       style: {
         background: "linear-gradient(135deg, var(--color-graphic-blue) 30%, var(--color-graphic-red) 100%)"
       },
       children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
         "span",
         {
-          className: (0, import_clsx3.default)(
+          className: (0, import_clsx4.default)(
             "select-none leading-none text-brand-on-brand",
-            initialTextStyles[size2]
+            initialTextStyles[size]
           ),
           children: props.initial.charAt(0).toUpperCase()
         }
@@ -214,52 +293,6 @@ function Avatar(props) {
   );
 }
 
-// src/lib/cn.ts
-var import_clsx4 = require("clsx");
-var import_tailwind_merge = require("tailwind-merge");
-var FONT_SIZES = [
-  "body-micro",
-  "body-tiny",
-  "body-xs",
-  "body-sm",
-  "body",
-  "body-lg",
-  "heading-sm",
-  "heading",
-  "heading-lg",
-  "subheading-sm",
-  "subheading",
-  "subheading-lg",
-  "subtitle-sm",
-  "subtitle",
-  "subtitle-lg",
-  "title-sm",
-  "title",
-  "title-lg",
-  "title-hero",
-  "scale-01",
-  "scale-02",
-  "scale-03",
-  "scale-04",
-  "scale-05",
-  "scale-06",
-  "scale-07",
-  "scale-08",
-  "scale-09",
-  "scale-10",
-  "scale-12"
-];
-var twMerge = (0, import_tailwind_merge.extendTailwindMerge)({
-  extend: {
-    classGroups: {
-      "font-size": [{ text: [...FONT_SIZES] }]
-    }
-  }
-});
-function cn(...inputs) {
-  return twMerge((0, import_clsx4.clsx)(inputs));
-}
-
 // src/lib/use-controllable-state.ts
 var import_react4 = require("react");
 function useControllableState({
@@ -285,189 +318,6 @@ function useControllableState({
   return [current, setValue];
 }
 
-// src/lib/use-roving-focus.ts
-var import_react5 = require("react");
-function useRovingFocus({
-  orientation = "horizontal",
-  loop = true,
-  typeahead = false,
-  defaultIndex = 0,
-  onEscape
-} = {}) {
-  const [activeIndex, setActiveIndex] = (0, import_react5.useState)(defaultIndex);
-  const items = (0, import_react5.useRef)([]);
-  const meta = (0, import_react5.useRef)([]);
-  const search = (0, import_react5.useRef)("");
-  const searchTimer = (0, import_react5.useRef)(null);
-  (0, import_react5.useEffect)(
-    () => () => {
-      if (searchTimer.current) clearTimeout(searchTimer.current);
-    },
-    []
-  );
-  const focusIndex = (0, import_react5.useCallback)((index) => {
-    const node = items.current[index];
-    if (!node) return;
-    setActiveIndex(index);
-    node.focus();
-  }, []);
-  const move = (0, import_react5.useCallback)(
-    (start, step) => {
-      const total = items.current.length;
-      if (total === 0) return;
-      for (let i = 1; i <= total; i++) {
-        let next = start + step * i;
-        if (loop) {
-          next = (next % total + total) % total;
-        } else if (next < 0 || next >= total) {
-          return;
-        }
-        if (items.current[next] && !meta.current[next]?.disabled) {
-          focusIndex(next);
-          return;
-        }
-      }
-    },
-    [loop, focusIndex]
-  );
-  const moveToEdge = (0, import_react5.useCallback)(
-    (from) => {
-      const total = items.current.length;
-      if (total === 0) return;
-      move(from === "start" ? -1 : total, from === "start" ? 1 : -1);
-    },
-    [move]
-  );
-  const runTypeahead = (0, import_react5.useCallback)(
-    (char) => {
-      if (searchTimer.current) clearTimeout(searchTimer.current);
-      search.current += char.toLowerCase();
-      searchTimer.current = setTimeout(() => {
-        search.current = "";
-      }, 500);
-      const total = items.current.length;
-      const query = search.current;
-      for (let i = 1; i <= total; i++) {
-        const index = (activeIndex + i) % total;
-        if (meta.current[index]?.disabled) continue;
-        const label = meta.current[index]?.label?.toLowerCase();
-        if (label?.startsWith(query)) {
-          focusIndex(index);
-          return;
-        }
-      }
-    },
-    [activeIndex, focusIndex]
-  );
-  const onKeyDown = (0, import_react5.useCallback)(
-    (event) => {
-      const { key } = event;
-      const vertical = orientation === "vertical" || orientation === "both";
-      const horizontal = orientation === "horizontal" || orientation === "both";
-      const next = vertical && key === "ArrowDown" || horizontal && key === "ArrowRight";
-      const prev = vertical && key === "ArrowUp" || horizontal && key === "ArrowLeft";
-      if (next || prev) {
-        event.preventDefault();
-        move(activeIndex, next ? 1 : -1);
-        return;
-      }
-      if (key === "Home") {
-        event.preventDefault();
-        moveToEdge("start");
-        return;
-      }
-      if (key === "End") {
-        event.preventDefault();
-        moveToEdge("end");
-        return;
-      }
-      if (key === "Escape" && onEscape) {
-        onEscape();
-        return;
-      }
-      if (typeahead && key.length === 1 && key !== " " && !event.ctrlKey && !event.metaKey && !event.altKey) {
-        event.preventDefault();
-        runTypeahead(key);
-      }
-    },
-    [orientation, activeIndex, move, moveToEdge, onEscape, typeahead, runTypeahead]
-  );
-  const itemProps = (0, import_react5.useCallback)(
-    (index, options = {}) => {
-      meta.current[index] = options;
-      return {
-        ref: (node) => {
-          items.current[index] = node;
-        },
-        // The roving part: exactly one item is in the tab sequence, so Tab enters the
-        // composite once and Tab again leaves it.
-        tabIndex: index === activeIndex ? 0 : -1,
-        onFocus: () => setActiveIndex(index),
-        "data-roving-index": index
-      };
-    },
-    [activeIndex]
-  );
-  return {
-    activeIndex,
-    setActiveIndex,
-    focusIndex,
-    moveToEdge,
-    itemProps,
-    containerProps: { onKeyDown }
-  };
-}
-
-// src/components/overlays/floating.tsx
-var import_react6 = require("react");
-var import_react7 = require("@floating-ui/react");
-function useFloatingPanel({
-  open,
-  onOpenChange,
-  side = "bottom",
-  align = "center",
-  sideOffset = 6,
-  alignOffset = 0,
-  collisionPadding = 8,
-  withArrow = false,
-  matchAnchorWidth = false
-}) {
-  const arrowRef = (0, import_react6.useRef)(null);
-  const placement = align === "center" ? side : `${side}-${align}`;
-  const floating = (0, import_react7.useFloating)({
-    open,
-    onOpenChange,
-    placement,
-    // Only track while the panel is actually on screen. `autoUpdate` attaches scroll and
-    // resize listeners plus a ResizeObserver, so leaving it running on a closed panel
-    // would cost every consumer a listener per menu on the page.
-    whileElementsMounted: import_react7.autoUpdate,
-    middleware: [
-      (0, import_react7.offset)({ mainAxis: sideOffset, crossAxis: alignOffset }),
-      // `flip` before `shift`: try the opposite edge first, and only slide along the
-      // current one if neither edge fits. The reverse order produces panels that cling to
-      // the viewport edge when they had room to simply flip.
-      (0, import_react7.flip)({ padding: collisionPadding }),
-      (0, import_react7.shift)({ padding: collisionPadding }),
-      matchAnchorWidth && (0, import_react7.size)({
-        padding: collisionPadding,
-        apply({ rects, elements, availableHeight }) {
-          elements.floating.style.setProperty(
-            "--panel-anchor-width",
-            `${rects.reference.width}px`
-          );
-          elements.floating.style.setProperty(
-            "--panel-available-height",
-            `${availableHeight}px`
-          );
-        }
-      }),
-      withArrow && (0, import_react7.arrow)({ element: arrowRef, padding: 4 })
-    ].filter(Boolean)
-  });
-  return { ...floating, arrowRef };
-}
-
 // src/components/overlays/menu-styles.ts
 var import_clsx6 = __toESM(require("clsx"), 1);
 
@@ -499,248 +349,30 @@ var OVERLAY_ITEM_SIZE = {
   md: "px-2.5 py-2 text-body-sm",
   sm: "px-2 py-1.5 text-body-tiny"
 };
-function overlayItemTone(tone, disabled) {
-  if (disabled) return "cursor-not-allowed text-disabled";
-  return tone === "danger" ? "text-danger hover:bg-danger-tertiary focus:bg-danger-tertiary" : "text-default hover:bg-default-secondary focus:bg-default-secondary";
-}
-
-// src/components/overlays/overlay.ts
-var import_react9 = require("react");
-var import_tabbable = require("tabbable");
-
-// src/components/overlays/overlay-stack.ts
-var import_react8 = require("react");
-var layers = [];
-var listeners = /* @__PURE__ */ new Set();
-function notify() {
-  for (const listener of listeners) listener();
-}
-function topmost() {
-  return layers[layers.length - 1]?.id;
-}
-var scrollLocks = 0;
-var restoreBody = null;
-function lockScroll() {
-  scrollLocks += 1;
-  if (scrollLocks > 1 || typeof document === "undefined") return;
-  const { body, documentElement } = document;
-  const previousOverflow = body.style.overflow;
-  const previousPaddingRight = body.style.paddingRight;
-  const scrollbarWidth = window.innerWidth - documentElement.clientWidth;
-  if (scrollbarWidth > 0) {
-    const current = parseFloat(window.getComputedStyle(body).paddingRight) || 0;
-    body.style.paddingRight = `${current + scrollbarWidth}px`;
-  }
-  body.style.overflow = "hidden";
-  restoreBody = () => {
-    body.style.overflow = previousOverflow;
-    body.style.paddingRight = previousPaddingRight;
-  };
-}
-function unlockScroll() {
-  scrollLocks = Math.max(0, scrollLocks - 1);
-  if (scrollLocks === 0 && restoreBody) {
-    restoreBody();
-    restoreBody = null;
-  }
-}
-var inerted = /* @__PURE__ */ new Set();
-function applyInert(node) {
-  if (typeof document === "undefined" || !node) return;
-  let root = node;
-  while (root.parentElement && root.parentElement !== document.body) {
-    root = root.parentElement;
-  }
-  for (const child of Array.from(document.body.children)) {
-    if (child === root || !(child instanceof HTMLElement)) continue;
-    if (child.hasAttribute("inert")) continue;
-    child.setAttribute("inert", "");
-    inerted.add(child);
-  }
-}
-function releaseInert() {
-  for (const el of inerted) el.removeAttribute("inert");
-  inerted.clear();
-}
-function useOverlayLayer(active, {
-  lockScroll: shouldLockScroll = true,
-  inertBackground = true,
-  panelRef
-} = {}) {
-  const id = (0, import_react8.useRef)();
-  if (!id.current) id.current = /* @__PURE__ */ Symbol("overlay-layer");
-  const [isTopmost, setIsTopmost] = (0, import_react8.useState)(false);
-  (0, import_react8.useEffect)(() => {
-    if (!active) return;
-    const self = id.current;
-    layers.push({ id: self });
-    const sync = () => setIsTopmost(topmost() === self);
-    listeners.add(sync);
-    sync();
-    notify();
-    if (shouldLockScroll) lockScroll();
-    return () => {
-      const index = layers.findIndex((layer) => layer.id === self);
-      if (index !== -1) layers.splice(index, 1);
-      listeners.delete(sync);
-      notify();
-      if (shouldLockScroll) unlockScroll();
-    };
-  }, [active, shouldLockScroll]);
-  (0, import_react8.useEffect)(() => {
-    if (!active || !inertBackground) return;
-    if (inerted.size === 0) applyInert(panelRef?.current ?? null);
-    return () => {
-      if (layers.length <= 1) releaseInert();
-    };
-  }, [active, inertBackground, panelRef]);
-  return { isTopmost };
-}
-
-// src/components/overlays/overlay.ts
-function useOverlayDismiss({
-  onDismiss,
-  panelRef,
-  active = true,
-  closeOnEscape = true,
-  closeOnOutsidePress = true,
-  trapFocus = true,
-  lockScroll: lockScroll2 = true,
-  inertBackground = true,
-  autoFocus = true,
-  initialFocus,
-  returnFocus,
-  onEscapeKeyDown,
-  onInteractOutside
-}) {
-  const { isTopmost } = useOverlayLayer(active, {
-    lockScroll: lockScroll2,
-    inertBackground,
-    panelRef
-  });
-  const handlers = (0, import_react9.useRef)({ onDismiss, onEscapeKeyDown, onInteractOutside });
-  handlers.current = { onDismiss, onEscapeKeyDown, onInteractOutside };
-  const isTopmostRef = (0, import_react9.useRef)(isTopmost);
-  isTopmostRef.current = isTopmost;
-  (0, import_react9.useEffect)(() => {
-    if (!active || !closeOnEscape) return;
-    function onKeyDown(event) {
-      if (event.key !== "Escape") return;
-      if (!isTopmostRef.current) return;
-      handlers.current.onEscapeKeyDown?.(event);
-      if (event.defaultPrevented) return;
-      handlers.current.onDismiss();
-    }
-    document.addEventListener("keydown", onKeyDown);
-    return () => document.removeEventListener("keydown", onKeyDown);
-  }, [active, closeOnEscape]);
-  (0, import_react9.useEffect)(() => {
-    if (!active || !closeOnOutsidePress) return;
-    function onPointerDown(event) {
-      if (!isTopmostRef.current) return;
-      const panel = panelRef.current;
-      if (!panel || panel.contains(event.target)) return;
-      handlers.current.onInteractOutside?.(event);
-      if (event.defaultPrevented) return;
-      handlers.current.onDismiss();
-    }
-    document.addEventListener("pointerdown", onPointerDown);
-    return () => document.removeEventListener("pointerdown", onPointerDown);
-  }, [active, closeOnOutsidePress, panelRef]);
-  (0, import_react9.useEffect)(() => {
-    if (!active || !trapFocus) return;
-    function onKeyDown(event) {
-      if (event.key !== "Tab" || !isTopmostRef.current) return;
-      const panel = panelRef.current;
-      if (!panel) return;
-      const items = (0, import_tabbable.tabbable)(panel);
-      if (items.length === 0) {
-        event.preventDefault();
-        panel.focus({ preventScroll: true });
-        return;
-      }
-      const first = items[0];
-      const last = items[items.length - 1];
-      const activeElement = document.activeElement;
-      const inside = panel.contains(activeElement);
-      if (event.shiftKey && (activeElement === first || !inside)) {
-        event.preventDefault();
-        last.focus();
-      } else if (!event.shiftKey && (activeElement === last || !inside)) {
-        event.preventDefault();
-        first.focus();
-      }
-    }
-    function onFocusIn(event) {
-      if (!isTopmostRef.current) return;
-      const panel = panelRef.current;
-      if (!panel) return;
-      if (panel.contains(event.target)) return;
-      const items = (0, import_tabbable.tabbable)(panel);
-      (items[0] ?? panel).focus({ preventScroll: true });
-    }
-    document.addEventListener("keydown", onKeyDown);
-    document.addEventListener("focusin", onFocusIn);
-    return () => {
-      document.removeEventListener("keydown", onKeyDown);
-      document.removeEventListener("focusin", onFocusIn);
-    };
-  }, [active, trapFocus, panelRef]);
-  (0, import_react9.useEffect)(() => {
-    if (!active) return;
-    const previouslyFocused = document.activeElement;
-    const panel = panelRef.current;
-    let observer = null;
-    if (panel && autoFocus) {
-      if (!panel.hasAttribute("tabindex")) panel.setAttribute("tabindex", "-1");
-      const focusTarget = () => {
-        const explicit = initialFocus?.current;
-        if (explicit) {
-          explicit.focus({ preventScroll: true });
-          return true;
-        }
-        const items = (0, import_tabbable.tabbable)(panel);
-        if (items.length > 0) {
-          items[0].focus({ preventScroll: true });
-          return true;
-        }
-        return false;
-      };
-      if (!focusTarget()) {
-        panel.focus({ preventScroll: true });
-        observer = new MutationObserver(() => {
-          if (focusTarget()) {
-            observer?.disconnect();
-            observer = null;
-          }
-        });
-        observer.observe(panel, { childList: true, subtree: true });
-      }
-    }
-    return () => {
-      observer?.disconnect();
-      const target = returnFocus ? returnFocus.current : previouslyFocused;
-      if (target?.isConnected) target.focus({ preventScroll: true });
-    };
-  }, [active, panelRef, initialFocus, returnFocus, autoFocus]);
-}
+var OVERLAY_HEADING = "px-2.5 py-1.5 text-body-tiny font-semibold uppercase tracking-wide text-default-tertiary";
+var OVERLAY_SEPARATOR = "-mx-1 my-1 h-px bg-divider";
 
 // src/components/overlays/portal.tsx
-var import_react10 = require("react");
+var import_react5 = require("react");
 var import_react_dom = require("react-dom");
-function Portal({ children, container }) {
-  const [mounted, setMounted] = (0, import_react10.useState)(false);
-  (0, import_react10.useEffect)(() => setMounted(true), []);
-  if (!mounted) return null;
-  const target = container ?? (typeof document === "undefined" ? null : document.body);
-  if (!target) return null;
-  return (0, import_react_dom.createPortal)(children, target);
+var import_jsx_runtime4 = require("react/jsx-runtime");
+var PortalContainerContext = (0, import_react5.createContext)(null);
+function usePortalContainer() {
+  return (0, import_react5.useContext)(PortalContainerContext);
+}
+
+// src/lib/compose-event-handlers.ts
+function composeEventHandlers(theirs, ours) {
+  return (event) => {
+    theirs?.(event);
+    if (!event.defaultPrevented) ours(event);
+  };
 }
 
 // src/components/overlays/tooltip.tsx
-var import_react11 = require("react");
-var import_clsx7 = __toESM(require("clsx"), 1);
-var import_jsx_runtime4 = require("react/jsx-runtime");
+var import_react6 = require("react");
+var import_radix_ui = require("radix-ui");
+var import_jsx_runtime5 = require("react/jsx-runtime");
 function Tooltip({
   children,
   title,
@@ -748,224 +380,240 @@ function Tooltip({
   side = "top",
   align = "center",
   openDelay = 150,
-  closeDelay = 0,
-  open: openProp,
-  defaultOpen = false,
+  open,
+  defaultOpen,
   onOpenChange,
   association = "describedby",
   className
 }) {
-  const [open, setOpen] = useControllableState({
-    value: openProp,
-    defaultValue: defaultOpen,
-    onChange: onOpenChange
-  });
-  const tooltipId = (0, import_react11.useId)();
-  const [triggerNode, setTriggerNode] = (0, import_react11.useState)(null);
-  const timer = (0, import_react11.useRef)(null);
-  const clearTimer = (0, import_react11.useCallback)(() => {
-    if (timer.current) {
-      clearTimeout(timer.current);
-      timer.current = null;
-    }
-  }, []);
-  const schedule = (0, import_react11.useCallback)(
-    (next, delay) => {
-      clearTimer();
-      if (delay === 0) {
-        setOpen(next);
-        return;
+  const container = usePortalContainer();
+  const labelId = (0, import_react6.useId)();
+  const labelled = association === "labelledby";
+  const content = /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_jsx_runtime5.Fragment, { children: [
+    title && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("p", { className: "font-semibold", children: title }),
+    body && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("p", { className: cn(title && "mt-0.5 opacity-80"), children: body })
+  ] });
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_radix_ui.Tooltip.Provider, { delayDuration: openDelay, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_radix_ui.Tooltip.Root, { open, defaultOpen, onOpenChange, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+      import_radix_ui.Tooltip.Trigger,
+      {
+        asChild: true,
+        ...labelled ? { "aria-labelledby": labelId, "aria-describedby": void 0 } : {},
+        children
       }
-      timer.current = setTimeout(() => setOpen(next), delay);
-    },
-    [clearTimer, setOpen]
-  );
-  (0, import_react11.useEffect)(() => clearTimer, [clearTimer]);
-  const { refs, floatingStyles } = useFloatingPanel({
-    open,
-    onOpenChange: setOpen,
-    side,
-    align,
-    sideOffset: 6
-  });
-  (0, import_react11.useEffect)(() => {
-    refs.setReference(triggerNode);
-  }, [refs, triggerNode]);
-  (0, import_react11.useEffect)(() => {
-    if (!open) return;
-    function onKeyDown(event) {
-      if (event.key === "Escape") setOpen(false);
-    }
-    document.addEventListener("keydown", onKeyDown);
-    return () => document.removeEventListener("keydown", onKeyDown);
-  }, [open, setOpen]);
-  if (!(0, import_react11.isValidElement)(children)) return null;
-  const child = children;
-  const childProps = child.props;
-  const describedBy = association === "describedby" ? tooltipId : void 0;
-  const labelledBy = association === "labelledby" ? tooltipId : void 0;
-  const trigger = (0, import_react11.cloneElement)(child, {
-    ref: composeRefs(
-      (node) => setTriggerNode(node),
-      child.ref
     ),
-    "aria-describedby": [childProps["aria-describedby"], open ? describedBy : void 0].filter(Boolean).join(" ") || void 0,
-    "aria-labelledby": [childProps["aria-labelledby"], labelledBy].filter(Boolean).join(" ") || void 0,
-    onPointerEnter: (event) => {
-      childProps.onPointerEnter?.(event);
-      schedule(true, openDelay);
-    },
-    onPointerLeave: (event) => {
-      childProps.onPointerLeave?.(event);
-      schedule(false, closeDelay);
-    },
-    // Focus, not just hover — this is the difference between a tooltip a keyboard user can
-    // read and one they cannot.
-    onFocus: (event) => {
-      childProps.onFocus?.(event);
-      schedule(true, 0);
-    },
-    onBlur: (event) => {
-      childProps.onBlur?.(event);
-      schedule(false, 0);
-    }
-  });
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_jsx_runtime4.Fragment, { children: [
-    trigger,
-    (open || association === "labelledby") && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
-      "div",
+    labelled && /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("span", { id: labelId, hidden: true, children: [
+      title,
+      body ? " " : null,
+      body
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_radix_ui.Tooltip.Portal, { container: container ?? void 0, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+      import_radix_ui.Tooltip.Content,
       {
-        ref: refs.setFloating,
-        id: tooltipId,
-        role: "tooltip",
-        style: floatingStyles,
-        className: (0, import_clsx7.default)(
+        side,
+        align,
+        sideOffset: 6,
+        collisionPadding: 8,
+        className: cn(
           "z-tooltip max-w-[260px] rounded-lg bg-neutral px-3 py-2 shadow-300",
           "text-body-xs text-neutral-on-neutral",
-          !open && "sr-only",
           className
         ),
-        children: [
-          title && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("p", { className: "font-semibold", children: title }),
-          body && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("p", { className: (0, import_clsx7.default)(title && "mt-0.5 opacity-80"), children: body })
-        ]
+        children: content
       }
     ) })
-  ] });
+  ] }) });
 }
 
 // src/components/overlays/menu-core.tsx
-var import_react12 = require("react");
-var import_clsx8 = __toESM(require("clsx"), 1);
-var import_lu = require("react-icons/lu");
-var import_jsx_runtime5 = require("react/jsx-runtime");
-var MenuContext = (0, import_react12.createContext)(null);
-function useMenu(part) {
-  const context = (0, import_react12.useContext)(MenuContext);
-  if (!context) {
-    throw new Error(`<${part}> must be used inside a menu root (DropdownMenu, ContextMenu, Menubar)`);
-  }
-  return context;
+var import_react7 = require("react");
+var import_clsx7 = __toESM(require("clsx"), 1);
+var import_lucide_react = require("lucide-react");
+var import_jsx_runtime6 = require("react/jsx-runtime");
+var MENU_PANEL_CLASSES = cn("z-popover", OVERLAY_PANEL_MENU, "focus:outline-none");
+var ITEM_BASE = (0, import_clsx7.default)(
+  OVERLAY_ITEM_BASE,
+  OVERLAY_ITEM_SIZE.md,
+  // Highlight follows Radix's `data-highlighted`, which tracks pointer and keyboard alike.
+  // The ring marks the keyboard position on top of it: the tint alone, shared with hover,
+  // cannot tell a keyboard user which of two tinted items has focus.
+  FOCUS_RING_INSET,
+  "data-[disabled]:cursor-not-allowed data-[disabled]:text-disabled"
+);
+var ITEM_TONE = {
+  default: "text-default data-[highlighted]:bg-default-secondary",
+  danger: "text-danger data-[highlighted]:bg-danger-tertiary"
+};
+function stopToAncestors(event) {
+  event.stopPropagation();
 }
-function useMenuState({ open, setOpen }) {
-  const baseId = (0, import_react12.useId)();
-  const cursor = (0, import_react12.useRef)(0);
-  const pendingEdge = (0, import_react12.useRef)("start");
-  const roving = useRovingFocus({
-    orientation: "vertical",
-    loop: true,
-    typeahead: true,
-    onEscape: () => setOpen(false)
+function focusMenuEdge(event, edge) {
+  if (event.target !== event.currentTarget) return;
+  const panel = event.currentTarget;
+  queueMicrotask(() => {
+    const items = panel.querySelectorAll('[role^="menuitem"]:not([data-disabled])');
+    if (edge === "end") items[items.length - 1]?.focus();
+    else if (document.activeElement === panel) items[0]?.focus();
   });
-  const claimIndex = (0, import_react12.useCallback)(() => cursor.current++, []);
-  const resetIndices = (0, import_react12.useCallback)(() => {
-    cursor.current = 0;
-  }, []);
-  return (0, import_react12.useMemo)(
-    () => ({
-      open,
-      setOpen,
-      menuId: `${baseId}-menu`,
-      triggerId: `${baseId}-trigger`,
-      claimIndex,
-      resetIndices,
-      pendingEdge,
-      roving
-    }),
-    [open, setOpen, baseId, claimIndex, resetIndices, roving]
-  );
 }
-var MENU_PANEL_CLASSES = OVERLAY_PANEL_MENU;
-var ITEM_BASE = (0, import_clsx8.default)(OVERLAY_ITEM_BASE, OVERLAY_ITEM_SIZE.md);
-var itemToneClasses = overlayItemTone;
-function MenuItem({
-  children,
-  onSelect,
-  tone = "default",
-  disabled = false,
-  icon,
-  description,
-  shortcut,
-  textValue,
-  className,
-  ...rest
-}) {
-  const menu = useMenu("MenuItem");
-  const index = menu.claimIndex();
-  const descriptionId = `${menu.menuId}-desc-${index}`;
-  const label = textValue ?? (typeof children === "string" ? children : void 0);
-  const itemProps = menu.roving.itemProps(index, { disabled, label });
-  const activate = () => {
-    if (disabled) return;
-    menu.setOpen(false);
-    onSelect?.();
+function createMenuParts(P) {
+  const Item = (0, import_react7.forwardRef)(function MenuItem({ children, onSelect, tone = "default", disabled = false, icon, description, shortcut, textValue, className, ...rest }, ref) {
+    const descriptionId = (0, import_react7.useId)();
+    return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+      P.Item,
+      {
+        ref,
+        disabled,
+        textValue,
+        onSelect,
+        "data-tone": tone,
+        "aria-describedby": description ? descriptionId : void 0,
+        className: cn(ITEM_BASE, ITEM_TONE[tone], className),
+        ...rest,
+        children: [
+          icon && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { "aria-hidden": true, className: "mt-0.5 flex size-4 shrink-0 items-center justify-center", children: icon }),
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("span", { className: "min-w-0 flex-1", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "block truncate", children }),
+            description && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { id: descriptionId, className: "mt-0.5 block text-body-tiny text-default-secondary", children: description })
+          ] }),
+          shortcut && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "ml-auto shrink-0 pl-4 text-body-tiny text-default-tertiary", children: shortcut })
+        ]
+      }
+    );
+  });
+  const CheckboxItem = (0, import_react7.forwardRef)(function MenuCheckboxItem({ children, checked, onCheckedChange, disabled = false, tone = "default", shortcut, textValue, className, ...rest }, ref) {
+    return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+      P.CheckboxItem,
+      {
+        ref,
+        checked,
+        onCheckedChange: (next) => onCheckedChange?.(next === true),
+        onSelect: (event) => event.preventDefault(),
+        disabled,
+        textValue,
+        "data-tone": tone,
+        className: cn(ITEM_BASE, "items-center", ITEM_TONE[tone], className),
+        ...rest,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { "aria-hidden": true, className: "flex size-4 shrink-0 items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(P.ItemIndicator, { children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_lucide_react.CheckIcon, { className: "size-3.5", strokeWidth: 3 }) }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "min-w-0 flex-1 truncate", children }),
+          shortcut && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "ml-auto shrink-0 pl-4 text-body-tiny text-default-tertiary", children: shortcut })
+        ]
+      }
+    );
+  });
+  function RadioGroup({ children, value, onValueChange }) {
+    return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(P.RadioGroup, { value, onValueChange, children });
+  }
+  const RadioItem = (0, import_react7.forwardRef)(function MenuRadioItem({ children, value, disabled = false, tone = "default", textValue, className, ...rest }, ref) {
+    return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+      P.RadioItem,
+      {
+        ref,
+        value,
+        disabled,
+        textValue,
+        "data-tone": tone,
+        className: cn(ITEM_BASE, "items-center", ITEM_TONE[tone], className),
+        ...rest,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { "aria-hidden": true, className: "flex size-4 shrink-0 items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(P.ItemIndicator, { children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "block size-1.5 rounded-full bg-current" }) }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "min-w-0 flex-1 truncate", children })
+        ]
+      }
+    );
+  });
+  const Group = (0, import_react7.forwardRef)(function MenuGroup({ children, label, className, ...rest }, ref) {
+    const labelId = (0, import_react7.useId)();
+    return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(P.Group, { ref, "aria-labelledby": label ? labelId : void 0, className, ...rest, children: [
+      label && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { id: labelId, className: OVERLAY_HEADING, children: label }),
+      children
+    ] });
+  });
+  const Label = (0, import_react7.forwardRef)(function MenuLabel({ className, ...rest }, ref) {
+    return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(P.Label, { ref, className: cn(OVERLAY_HEADING, className), ...rest });
+  });
+  const Separator = (0, import_react7.forwardRef)(function MenuSeparator({ className, ...rest }, ref) {
+    return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(P.Separator, { ref, className: cn(OVERLAY_SEPARATOR, className), ...rest });
+  });
+  const Shortcut = (0, import_react7.forwardRef)(function MenuShortcut({ className, ...rest }, ref) {
+    return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { ref, className: cn("ml-auto pl-4 text-body-tiny text-default-tertiary", className), ...rest });
+  });
+  function Sub({ children, open, defaultOpen, onOpenChange }) {
+    return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(P.Sub, { open, defaultOpen, onOpenChange, children });
+  }
+  const SubTrigger = (0, import_react7.forwardRef)(function MenuSubTrigger({ children, icon, disabled = false, textValue, className, ...rest }, ref) {
+    return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+      P.SubTrigger,
+      {
+        ref,
+        disabled,
+        textValue,
+        className: cn(
+          ITEM_BASE,
+          "items-center",
+          ITEM_TONE.default,
+          "data-[state=open]:bg-default-secondary",
+          className
+        ),
+        ...rest,
+        children: [
+          icon && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { "aria-hidden": true, className: "flex size-4 shrink-0 items-center justify-center", children: icon }),
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "min-w-0 flex-1 truncate", children }),
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_lucide_react.ChevronRightIcon, { "aria-hidden": true, className: "ml-auto size-4 shrink-0 text-default-tertiary" })
+        ]
+      }
+    );
+  });
+  const SubContent = (0, import_react7.forwardRef)(function MenuSubContent({ className, onClick, onKeyDown, ...rest }, ref) {
+    const container = usePortalContainer();
+    return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(P.Portal, { container: container ?? void 0, children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+      P.SubContent,
+      {
+        ref,
+        sideOffset: 4,
+        collisionPadding: 8,
+        className: cn(MENU_PANEL_CLASSES, className),
+        onClick: (event) => {
+          onClick?.(event);
+          stopToAncestors(event);
+        },
+        onKeyDown: (event) => {
+          onKeyDown?.(event);
+          stopToAncestors(event);
+        },
+        ...rest
+      }
+    ) });
+  });
+  return {
+    Item,
+    CheckboxItem,
+    RadioGroup,
+    RadioItem,
+    Group,
+    Label,
+    Separator,
+    Shortcut,
+    Sub,
+    SubTrigger,
+    SubContent
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
-    "div",
-    {
-      role: "menuitem",
-      "aria-disabled": disabled || void 0,
-      "aria-describedby": description ? descriptionId : void 0,
-      ...itemProps,
-      tabIndex: itemProps.tabIndex,
-      className: (0, import_clsx8.default)(ITEM_BASE, itemToneClasses(tone, disabled), className),
-      onClick: (event) => {
-        event.stopPropagation();
-        activate();
-      },
-      onKeyDown: (event) => {
-        if (event.key === "Enter" || event.key === " ") {
-          event.preventDefault();
-          activate();
-        }
-      },
-      ...rest,
-      children: [
-        icon && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { "aria-hidden": true, className: "mt-0.5 flex size-4 shrink-0 items-center justify-center", children: icon }),
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("span", { className: "min-w-0 flex-1", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "block truncate", children }),
-          description && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { id: descriptionId, className: "mt-0.5 block text-body-tiny text-default-secondary", children: description })
-        ] }),
-        shortcut && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "ml-auto shrink-0 pl-4 text-body-tiny text-default-tertiary", children: shortcut })
-      ]
-    }
-  );
 }
-var MenuRadioContext = (0, import_react12.createContext)(null);
 
 // src/components/cards/scroll-area.tsx
-var import_react13 = require("react");
-var import_clsx9 = __toESM(require("clsx"), 1);
-var import_jsx_runtime6 = require("react/jsx-runtime");
+var import_react8 = require("react");
+var import_clsx8 = __toESM(require("clsx"), 1);
+var import_jsx_runtime7 = require("react/jsx-runtime");
 var OVERFLOW = {
   vertical: "overflow-y-auto overflow-x-hidden",
   horizontal: "overflow-x-auto overflow-y-hidden",
   both: "overflow-auto"
 };
-var ScrollArea = (0, import_react13.forwardRef)(function ScrollArea2({ children, axis = "vertical", label, className, ...rest }, ref) {
-  const localRef = (0, import_react13.useRef)(null);
-  const [overflows, setOverflows] = (0, import_react13.useState)(false);
-  (0, import_react13.useEffect)(() => {
+var ScrollArea = (0, import_react8.forwardRef)(function ScrollArea2({ children, axis = "vertical", label, className, ...rest }, ref) {
+  const localRef = (0, import_react8.useRef)(null);
+  const [overflows, setOverflows] = (0, import_react8.useState)(false);
+  (0, import_react8.useEffect)(() => {
     const node = localRef.current;
     if (!node) return;
     const measure = () => {
@@ -982,7 +630,7 @@ var ScrollArea = (0, import_react13.forwardRef)(function ScrollArea2({ children,
     if (node.firstElementChild) observer.observe(node.firstElementChild);
     return () => observer.disconnect();
   }, [axis, children]);
-  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
     "div",
     {
       ref: composeRefs(localRef, ref),
@@ -990,7 +638,7 @@ var ScrollArea = (0, import_react13.forwardRef)(function ScrollArea2({ children,
       "aria-label": overflows ? label : void 0,
       tabIndex: overflows ? 0 : void 0,
       "data-slot": "scroll-area",
-      className: (0, import_clsx9.default)(
+      className: (0, import_clsx8.default)(
         OVERFLOW[axis],
         "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand focus-visible:ring-offset-1 focus-visible:ring-offset-default",
         SCROLLBAR_CLASSES,
@@ -1003,151 +651,130 @@ var ScrollArea = (0, import_react13.forwardRef)(function ScrollArea2({ children,
 });
 
 // src/components/overlays/dropdown-menu.tsx
-var import_react14 = require("react");
-var import_clsx10 = __toESM(require("clsx"), 1);
-var import_lu2 = require("react-icons/lu");
-var import_jsx_runtime7 = require("react/jsx-runtime");
-var TriggerNodeContext = (0, import_react14.createContext)(null);
-function useTriggerNode() {
-  const value = (0, import_react14.useContext)(TriggerNodeContext);
-  if (!value) throw new Error("DropdownMenu parts must be used inside <DropdownMenu>");
+var import_react9 = require("react");
+var import_radix_ui2 = require("radix-ui");
+var import_lucide_react2 = require("lucide-react");
+var import_jsx_runtime8 = require("react/jsx-runtime");
+var DropdownMenuStateContext = (0, import_react9.createContext)(null);
+function useDropdownMenuState(part) {
+  const value = (0, import_react9.useContext)(DropdownMenuStateContext);
+  if (!value) throw new Error(`<${part}> must be used inside <DropdownMenu>`);
   return value;
 }
 function DropdownMenu({
   children,
   open: openProp,
   defaultOpen = false,
-  onOpenChange
+  onOpenChange,
+  modal = false
 }) {
   const [open, setOpen] = useControllableState({
     value: openProp,
     defaultValue: defaultOpen,
     onChange: onOpenChange
   });
-  const menu = useMenuState({ open, setOpen });
-  const [triggerNode, setTriggerNode] = (0, import_react14.useState)(null);
-  const anchor = (0, import_react14.useMemo)(() => ({ triggerNode, setTriggerNode }), [triggerNode]);
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(MenuContext.Provider, { value: menu, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(TriggerNodeContext.Provider, { value: anchor, children }) });
+  const pendingEdge = (0, import_react9.useRef)("start");
+  const state = (0, import_react9.useMemo)(() => ({ setOpen, pendingEdge }), [setOpen]);
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_radix_ui2.DropdownMenu.Root, { open, onOpenChange: setOpen, modal, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(DropdownMenuStateContext.Provider, { value: state, children }) });
 }
-function DropdownMenuTrigger({
-  children,
-  asChild = false,
-  label = "Open menu",
-  ...rest
-}) {
-  const menu = useMenu("DropdownMenuTrigger");
-  const anchor = useTriggerNode();
-  const triggerProps = {
-    id: menu.triggerId,
-    "aria-haspopup": "menu",
-    "aria-expanded": menu.open,
-    "aria-controls": menu.open ? menu.menuId : void 0,
-    onClick: (event) => {
-      event.stopPropagation();
-      menu.setOpen(!menu.open);
-    },
-    onKeyDown: (event) => {
-      if (event.key === "ArrowDown" || event.key === "ArrowUp") {
-        event.preventDefault();
-        menu.pendingEdge.current = event.key === "ArrowUp" ? "end" : "start";
-        menu.setOpen(true);
+var DropdownMenuTrigger = (0, import_react9.forwardRef)(
+  function DropdownMenuTrigger2({ children, asChild = false, label = "Open menu", onClick, onPointerDown, onMouseDown, onKeyDown, ...rest }, ref) {
+    const state = useDropdownMenuState("DropdownMenuTrigger");
+    const handlers = {
+      onClick: (event) => {
+        onClick?.(event);
+        stopToAncestors(event);
+      },
+      onPointerDown: (event) => {
+        onPointerDown?.(event);
+        event.stopPropagation();
+      },
+      onMouseDown: (event) => {
+        onMouseDown?.(event);
+        stopToAncestors(event);
+      },
+      onKeyDown: (event) => {
+        onKeyDown?.(event);
+        if (event.defaultPrevented) return;
+        if (event.key === "ArrowUp") {
+          event.preventDefault();
+          state.pendingEdge.current = "end";
+          state.setOpen(true);
+        }
+        if (event.key === "Enter" || event.key === " ") stopToAncestors(event);
       }
-    },
-    // Stopped at the trigger so the menu works inside a clickable table row — the
-    // behaviour the 0.2.0 `RowMenu` had and the reason this component exists.
-    onMouseDown: (event) => event.stopPropagation(),
+    };
+    if (asChild) {
+      return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_radix_ui2.DropdownMenu.Trigger, { ref, asChild: true, ...rest, ...handlers, children });
+    }
+    return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_radix_ui2.DropdownMenu.Trigger, { ref, asChild: true, ...rest, ...handlers, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(IconButton, { variant: "neutral", size: "sm", "aria-label": label, children: children ?? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_lucide_react2.EllipsisIcon, { className: "size-4", "aria-hidden": true }) }) });
+  }
+);
+var DropdownMenuContent = (0, import_react9.forwardRef)(
+  function DropdownMenuContent2({
+    children,
+    side = "bottom",
+    align = "end",
+    sideOffset = 6,
+    container,
+    className,
+    onClick,
+    onKeyDown,
+    onFocus,
+    onCloseAutoFocus,
     ...rest
-  };
-  if (asChild) {
-    return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Slot, { ref: composeRefs(anchor.setTriggerNode), ...triggerProps, children });
+  }, ref) {
+    const state = useDropdownMenuState("DropdownMenuContent");
+    const inherited = usePortalContainer();
+    return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(import_radix_ui2.DropdownMenu.Portal, { container: container ?? inherited ?? void 0, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+      import_radix_ui2.DropdownMenu.Content,
+      {
+        ref,
+        side,
+        align,
+        sideOffset,
+        collisionPadding: 8,
+        loop: true,
+        className: cn(MENU_PANEL_CLASSES, className),
+        onCloseAutoFocus: composeEventHandlers(onCloseAutoFocus, () => {
+          state.pendingEdge.current = "start";
+        }),
+        onFocus: composeEventHandlers(onFocus, (event) => {
+          const edge = state.pendingEdge.current;
+          state.pendingEdge.current = "start";
+          focusMenuEdge(event, edge);
+        }),
+        onClick: (event) => {
+          onClick?.(event);
+          stopToAncestors(event);
+        },
+        onKeyDown: (event) => {
+          onKeyDown?.(event);
+          stopToAncestors(event);
+          if (event.key === "Tab") state.setOpen(false);
+        },
+        ...rest,
+        children
+      }
+    ) });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-    IconButton,
-    {
-      ref: composeRefs(anchor.setTriggerNode),
-      variant: "neutral",
-      size: "sm",
-      "aria-label": label,
-      ...triggerProps,
-      children: children ?? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(import_lu2.LuEllipsis, { className: "size-4", "aria-hidden": true })
-    }
-  );
-}
-function DropdownMenuContent({
-  children,
-  side = "bottom",
-  align = "end",
-  sideOffset = 6,
-  className,
-  ...rest
-}) {
-  const menu = useMenu("DropdownMenuContent");
-  const anchor = useTriggerNode();
-  const panelRef = (0, import_react14.useRef)(null);
-  const [panelNode, setPanelNode] = (0, import_react14.useState)(null);
-  menu.resetIndices();
-  const { refs, floatingStyles } = useFloatingPanel({
-    open: menu.open,
-    onOpenChange: menu.setOpen,
-    side,
-    align,
-    sideOffset
-  });
-  (0, import_react14.useEffect)(() => {
-    refs.setReference(anchor.triggerNode);
-  }, [refs, anchor.triggerNode]);
-  useOverlayDismiss({
-    onDismiss: () => menu.setOpen(false),
-    panelRef,
-    active: menu.open,
-    // A menu is not modal: the page behind stays readable and interactive, so none of the
-    // dialog-grade side effects apply. Only Escape, outside-press and focus restore.
-    trapFocus: false,
-    lockScroll: false,
-    inertBackground: false,
-    // The menu owns its own initial focus below; a generic "first tabbable element" scan
-    // would fight the roving tabindex, which exposes exactly one item at a time.
-    autoFocus: false
-  });
-  const wasOpen = (0, import_react14.useRef)(false);
-  (0, import_react14.useEffect)(() => {
-    if (menu.open && panelNode && !wasOpen.current) {
-      menu.roving.moveToEdge(menu.pendingEdge.current);
-      menu.pendingEdge.current = "start";
-      wasOpen.current = true;
-    }
-    if (!menu.open) wasOpen.current = false;
-  }, [menu.open, panelNode, menu.roving, menu.pendingEdge]);
-  if (!menu.open) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
-    "div",
-    {
-      ref: composeRefs(
-        panelRef,
-        (node) => setPanelNode(node),
-        refs.setFloating
-      ),
-      id: menu.menuId,
-      role: "menu",
-      tabIndex: -1,
-      "aria-orientation": "vertical",
-      "aria-labelledby": menu.triggerId,
-      style: floatingStyles,
-      className: (0, import_clsx10.default)("z-dropdown", MENU_PANEL_CLASSES, className),
-      ...menu.roving.containerProps,
-      onKeyDown: (event) => {
-        menu.roving.containerProps.onKeyDown(event);
-        if (event.key === "Tab") menu.setOpen(false);
-      },
-      ...rest,
-      children
-    }
-  ) });
-}
+);
+var parts = createMenuParts(import_radix_ui2.DropdownMenu);
+var DropdownMenuItem = parts.Item;
+var DropdownMenuCheckboxItem = parts.CheckboxItem;
+var DropdownMenuRadioGroup = parts.RadioGroup;
+var DropdownMenuRadioItem = parts.RadioItem;
+var DropdownMenuGroup = parts.Group;
+var DropdownMenuLabel = parts.Label;
+var DropdownMenuSeparator = parts.Separator;
+var DropdownMenuShortcut = parts.Shortcut;
+var DropdownMenuSub = parts.Sub;
+var DropdownMenuSubTrigger = parts.SubTrigger;
+var DropdownMenuSubContent = parts.SubContent;
 
 // src/components/chrome/nav-item.tsx
-var import_clsx11 = __toESM(require("clsx"), 1);
-var import_jsx_runtime8 = require("react/jsx-runtime");
+var import_clsx9 = __toESM(require("clsx"), 1);
+var import_jsx_runtime9 = require("react/jsx-runtime");
 var SIZE = {
   sm: { box: "h-9 gap-2 rounded-lg px-3 py-1.5", label: "text-body-xs", square: "w-9" },
   md: { box: "h-11 gap-3 rounded-xl px-3.5 py-2.5", label: "text-body-sm", square: "w-11" }
@@ -1174,12 +801,12 @@ var VARIANT = {
     // `border-transparent` holds the 1px so the icon and label do not shift outward when a
     // row becomes the current one — the same trick, for the same reason, as `button.tsx`.
     // `bg-brand` still paints edge to edge, since backgrounds clip to the border box.
-    active: (0, import_clsx11.default)("border border-transparent", STATE.active),
-    inactive: (0, import_clsx11.default)("border border-default bg-default text-default-secondary", STATE.hover)
+    active: (0, import_clsx9.default)("border border-transparent", STATE.active),
+    inactive: (0, import_clsx9.default)("border border-default bg-default text-default-secondary", STATE.hover)
   },
   plain: {
     active: STATE.active,
-    inactive: (0, import_clsx11.default)("text-default-secondary", STATE.hover)
+    inactive: (0, import_clsx9.default)("text-default-secondary", STATE.hover)
   }
 };
 function NavItem({
@@ -1188,14 +815,16 @@ function NavItem({
   isActive = false,
   indicator = false,
   collapsed = false,
-  size: size2 = "md",
+  size = "md",
   variant = "card",
   asChild = false,
+  disabled = false,
   children,
   className,
+  onClick,
   ...rest
 }) {
-  const s = SIZE[size2];
+  const s = SIZE[size];
   const v = VARIANT[variant];
   const rootProps = {
     // Only meaningful when `asChild` renders a real link — a decorative span with
@@ -1206,7 +835,9 @@ function NavItem({
     // you *are* (`aria-current="page"`), which is a different thing from a row you have
     // *picked* (`aria-selected`) — `TableRow` is the latter and says `selected`.
     "data-state": isActive ? "active" : void 0,
-    className: (0, import_clsx11.default)(
+    "data-disabled": disabled || void 0,
+    "aria-disabled": disabled || void 0,
+    className: (0, import_clsx9.default)(
       "relative flex items-center transition-colors",
       // Unconditional: a row can also become focusable by the caller putting it inside a
       // link, which is how `src/sidebar/` uses it. A ring that only appears under `asChild`
@@ -1219,20 +850,31 @@ function NavItem({
       "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand focus-visible:ring-offset-1 focus-visible:ring-offset-default-secondary",
       s.box,
       // Expanded rows fill the nav; a collapsed one is a centred square, not a stretched row.
-      collapsed ? (0, import_clsx11.default)("justify-center", s.square) : "w-full",
+      collapsed ? (0, import_clsx9.default)("justify-center", s.square) : "w-full",
       isActive ? v.active : v.inactive,
+      "data-[disabled]:cursor-not-allowed data-[disabled]:opacity-40 data-[disabled]:hover:bg-transparent data-[disabled]:hover:text-default-secondary",
       className
     ),
-    ...rest
+    ...rest,
+    // After the spread: a disabled row refuses the press (a router Link skips navigation when
+    // the event is prevented) and leaves the tab order, as a disabled control does.
+    ...disabled ? { tabIndex: -1 } : {},
+    onClick: (event) => {
+      if (disabled) {
+        event.preventDefault();
+        return;
+      }
+      onClick?.(event);
+    }
   };
-  const content = /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_jsx_runtime8.Fragment, { children: [
-    icon != null ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { "aria-hidden": true, className: "shrink-0 [&_svg]:size-4", children: icon }) : (
+  const content = /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_jsx_runtime9.Fragment, { children: [
+    icon != null ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { "aria-hidden": true, className: "shrink-0 [&_svg]:size-4", children: icon }) : (
       // Icons are optional, but the collapsed rail hides the label — so a row with neither
       // renders as an empty box. Through 0.5.0 that is exactly what a nav without icons
       // collapsed to, the docs site's own 36-row sidebar included. The monogram is
       // decorative in the same way the icon is: the `sr-only` label below still names the
       // row.
-      collapsed && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+      collapsed && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
         "span",
         {
           "aria-hidden": true,
@@ -1241,10 +883,10 @@ function NavItem({
         }
       )
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
       "span",
       {
-        className: (0, import_clsx11.default)(
+        className: (0, import_clsx9.default)(
           "min-w-0 truncate font-regular leading-snug",
           s.label,
           collapsed ? "sr-only" : "flex-1"
@@ -1252,7 +894,7 @@ function NavItem({
         children: label
       }
     ),
-    indicator && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+    indicator && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
       "span",
       {
         role: "status",
@@ -1262,32 +904,35 @@ function NavItem({
     )
   ] });
   if (asChild) {
-    return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Slot, { wrapChildren: () => content, ...rootProps, children });
+    return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(Slot, { wrapChildren: () => content, ...rootProps, children });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { ...rootProps, children: content });
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { ...rootProps, children: content });
 }
 
+// src/index.tsx
+var import_react_table = require("@tanstack/react-table");
+
 // src/sidebar/nav-tabs.tsx
 var import_react_router_dom = require("react-router-dom");
-var import_clsx12 = __toESM(require("clsx"), 1);
-var import_jsx_runtime9 = require("react/jsx-runtime");
+var import_clsx10 = __toESM(require("clsx"), 1);
+var import_jsx_runtime10 = require("react/jsx-runtime");
 function NavTabs({ items, className }) {
   return (
     // The links inside are the tab stops.
-    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
       "div",
       {
-        className: (0, import_clsx12.default)(
+        className: (0, import_clsx10.default)(
           "flex gap-6 overflow-x-auto border-b border-default",
           SCROLLBAR_CLASSES,
           className
         ),
-        children: items.map((tab) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+        children: items.map((tab) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
           import_react_router_dom.NavLink,
           {
             to: tab.to,
             end: tab.end,
-            className: ({ isActive }) => (0, import_clsx12.default)(
+            className: ({ isActive }) => (0, import_clsx10.default)(
               "shrink-0 whitespace-nowrap border-b-2 pb-3 text-body-sm transition-colors",
               isActive ? "border-brand-emphasis font-semibold text-brand-emphasis" : "border-transparent font-medium text-default-secondary hover:text-default"
             ),
@@ -1301,7 +946,7 @@ function NavTabs({ items, className }) {
 }
 
 // src/sidebar/index.tsx
-var import_jsx_runtime10 = require("react/jsx-runtime");
+var import_jsx_runtime11 = require("react/jsx-runtime");
 function AppSidebar({
   groups,
   footerNav,
@@ -1310,14 +955,20 @@ function AppSidebar({
   collapsible = true,
   collapsed: collapsedProp = false,
   onToggle,
-  size: size2 = "md",
+  size = "md",
   variant = "card",
   width = "w-80",
   collapsedWidth = "w-20",
   className
 }) {
   const collapsed = collapsible && collapsedProp;
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
+  const hashTargets = (0, import_react10.useMemo)(
+    () => new Set(
+      [...groups.flatMap((group) => group.items), ...footerNav ?? []].map((item) => item.to).filter((to) => to.includes("#"))
+    ),
+    [groups, footerNav]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(HashTargets.Provider, { value: hashTargets, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
     "aside",
     {
       className: cn(
@@ -1327,7 +978,7 @@ function AppSidebar({
         className
       ),
       children: [
-        collapsible && onToggle && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+        collapsible && onToggle && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
           "button",
           {
             type: "button",
@@ -1343,10 +994,10 @@ function AppSidebar({
               "shadow-100 transition-colors hover:bg-brand-tertiary-hover hover:text-brand",
               "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand focus-visible:ring-offset-1 focus-visible:ring-offset-default"
             ),
-            children: collapsed ? /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_lu3.LuChevronRight, { className: "size-3", strokeWidth: 2.5, "aria-hidden": true }) : /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_lu3.LuChevronLeft, { className: "size-3", strokeWidth: 2.5, "aria-hidden": true })
+            children: collapsed ? /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_lucide_react3.ChevronRightIcon, { className: "size-3", strokeWidth: 2.5, "aria-hidden": true }) : /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_lucide_react3.ChevronLeftIcon, { className: "size-3", strokeWidth: 2.5, "aria-hidden": true })
           }
         ),
-        brand && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+        brand && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
           "div",
           {
             className: cn(
@@ -1356,24 +1007,24 @@ function AppSidebar({
             children: typeof brand === "function" ? brand({ collapsed }) : brand
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(ScrollArea, { axis: "vertical", label: "Sidebar navigation", className: "min-h-0 flex-1", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("nav", { className: "flex flex-col gap-4 px-4 pb-3 pt-2", children: groups.map((group, groupIndex) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(ScrollArea, { axis: "vertical", label: "Sidebar navigation", className: "min-h-0 flex-1", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("nav", { className: "flex flex-col gap-4 px-4 pb-3 pt-2", children: groups.map((group, groupIndex) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
           SidebarGroup,
           {
             group,
             showSeparator: groupIndex > 0,
             collapsed,
-            size: size2,
+            size,
             variant
           },
           group.title ?? `group-${groupIndex}`
         )) }) }),
-        (footerNav?.length || footer) && /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "flex shrink-0 flex-col", children: [
-          footerNav && footerNav.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("nav", { className: "flex flex-col gap-3 px-4 pt-2", children: footerNav.map((item) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+        (footerNav?.length || footer) && /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "flex shrink-0 flex-col", children: [
+          footerNav && footerNav.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("nav", { className: "flex flex-col gap-3 px-4 pt-2", children: footerNav.map((item) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
             SidebarLink,
             {
               item,
               collapsed,
-              size: size2,
+              size,
               variant
             },
             item.to
@@ -1382,22 +1033,22 @@ function AppSidebar({
         ] })
       ]
     }
-  );
+  ) });
 }
 function SidebarGroup({
   group,
   showSeparator,
   collapsed,
-  size: size2,
+  size,
   variant
 }) {
   return (
     // 12px between rows, per the design — the rows read as separate pills rather than a
     // stack. Through 0.5.0 this was `gap-1`, which packed them into a near-continuous block.
     // The same gap spaces the separator and the heading, so neither needs a margin of its own.
-    /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "flex flex-col gap-3", children: [
-      showSeparator && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(SidebarSeparator, {}),
-      group.title && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "flex flex-col gap-3", children: [
+      showSeparator && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(SidebarSeparator, {}),
+      group.title && /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
         "p",
         {
           className: cn(
@@ -1410,12 +1061,12 @@ function SidebarGroup({
           children: group.title
         }
       ),
-      group.items.map((item) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+      group.items.map((item) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
         SidebarLink,
         {
           item,
           collapsed,
-          size: size2,
+          size,
           variant
         },
         item.to
@@ -1423,37 +1074,52 @@ function SidebarGroup({
     ] })
   );
 }
+var HashTargets = (0, import_react10.createContext)(/* @__PURE__ */ new Set());
+function useRowActive(item) {
+  const location = (0, import_react_router_dom2.useLocation)();
+  const hashTargets = (0, import_react10.useContext)(HashTargets);
+  const [path, hash] = item.to.split("#");
+  const pathMatches = item.end ? location.pathname === path : location.pathname === path || location.pathname.startsWith(`${path.replace(/\/$/, "")}/`);
+  if (!pathMatches) return false;
+  if (hash !== void 0) return location.hash === `#${hash}`;
+  return !hashTargets.has(`${location.pathname}${location.hash}`);
+}
 function SidebarLink({
   item,
   collapsed,
-  size: size2,
+  size,
   variant
 }) {
-  const link = /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
-    import_react_router_dom2.NavLink,
+  const active = useRowActive(item);
+  const link = /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+    import_react_router_dom2.Link,
     {
       to: item.to,
-      end: item.end,
+      "aria-current": active ? "page" : void 0,
+      "aria-disabled": item.disabled || void 0,
+      tabIndex: item.disabled ? -1 : void 0,
+      onClick: item.disabled ? (event) => event.preventDefault() : void 0,
       className: cn("block w-full no-underline", collapsed && "flex justify-center"),
-      children: ({ isActive }) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
         NavItem,
         {
           icon: item.icon,
           label: item.label,
-          isActive,
+          isActive: active,
           indicator: item.indicator,
+          disabled: item.disabled,
           collapsed,
-          size: size2,
+          size,
           variant
         }
       )
     }
   );
   if (!collapsed) return link;
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Tooltip, { title: item.label, side: "right", children: link });
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Tooltip, { title: item.label, side: "right", children: link });
 }
 function SidebarSeparator({ className, ...rest }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { "aria-hidden": true, className: cn("mx-1 h-px shrink-0 bg-divider", className), ...rest });
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { "aria-hidden": true, className: cn("mx-1 h-px shrink-0 bg-divider", className), ...rest });
 }
 function SidebarUserCard({
   name,
@@ -1464,40 +1130,40 @@ function SidebarUserCard({
   className
 }) {
   const initial = name.trim().charAt(0);
-  const items = /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_jsx_runtime10.Fragment, { children: [
+  const items = /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_jsx_runtime11.Fragment, { children: [
     menu,
-    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
-      MenuItem,
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+      DropdownMenuItem,
       {
-        icon: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_lu3.LuLogOut, { className: "size-3.5", "aria-hidden": true }),
+        icon: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_lucide_react3.LogOutIcon, { className: "size-3.5", "aria-hidden": true }),
         onSelect: onLogout,
         children: "Sign out"
       }
     )
   ] });
   if (collapsed) {
-    return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: cn("flex shrink-0 items-center justify-center p-4", className), children: /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(DropdownMenu, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(DropdownMenuTrigger, { asChild: true, label: "User options", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("button", { type: "button", "aria-label": `${name} \u2014 user options`, className: "rounded-full", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Avatar, { initial, size: "lg", shape: "circle" }) }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(DropdownMenuContent, { side: "right", align: "end", children: items })
+    return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: cn("flex shrink-0 items-center justify-center p-4", className), children: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(DropdownMenu, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(DropdownMenuTrigger, { asChild: true, label: "User options", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("button", { type: "button", "aria-label": `${name} \u2014 user options`, className: "rounded-full", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Avatar, { initial, size: "lg", shape: "circle" }) }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(DropdownMenuContent, { side: "right", align: "end", children: items })
     ] }) });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: cn("flex shrink-0 items-center gap-2.5 p-4", className), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(Avatar, { initial, size: "lg", shape: "circle" }),
-    /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "flex min-w-0 flex-1 flex-col gap-0.5", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "truncate text-body-sm font-semibold leading-snug text-default", children: name }),
-      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("span", { className: "truncate text-body-tiny font-regular leading-none text-default-secondary", children: role })
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: cn("flex shrink-0 items-center gap-2.5 p-4", className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(Avatar, { initial, size: "lg", shape: "circle" }),
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)("div", { className: "flex min-w-0 flex-1 flex-col gap-0.5", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: "truncate text-body-sm font-semibold leading-snug text-default", children: name }),
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("span", { className: "truncate text-body-tiny font-regular leading-none text-default-secondary", children: role })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(DropdownMenu, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(DropdownMenuTrigger, { asChild: true, label: "User options", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(DropdownMenu, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(DropdownMenuTrigger, { asChild: true, label: "User options", children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
         "button",
         {
           type: "button",
           "aria-label": `${name} \u2014 user options`,
           className: "flex size-6 shrink-0 items-center justify-center rounded-md text-default-secondary transition-colors hover:bg-brand-tertiary-hover hover:text-brand",
-          children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_lu3.LuEllipsisVertical, { className: "size-5", "aria-hidden": true })
+          children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_lucide_react3.EllipsisVerticalIcon, { className: "size-5", "aria-hidden": true })
         }
       ) }),
-      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(DropdownMenuContent, { side: "top", align: "end", children: items })
+      /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(DropdownMenuContent, { side: "top", align: "end", children: items })
     ] })
   ] });
 }