@platned/ui 0.6.1 → 0.7.1

package/dist/sidebar.js

@@ -1,6 +1,57 @@
 // src/sidebar/index.tsx
-import { NavLink as NavLink2 } from "react-router-dom";
-import { LuChevronLeft, LuChevronRight, LuEllipsisVertical, LuLogOut } from "react-icons/lu";
+import { createContext as createContext4, useContext as useContext4, useMemo as useMemo2 } from "react";
+import { Link, useLocation } from "react-router-dom";
+import { ChevronLeftIcon, ChevronRightIcon as ChevronRightIcon2, EllipsisVerticalIcon, LogOutIcon } from "lucide-react";
+
+// src/lib/cn.ts
+import { clsx } from "clsx";
+import { extendTailwindMerge } from "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 = extendTailwindMerge({
+  extend: {
+    classGroups: {
+      "font-size": [{ text: [...FONT_SIZES] }]
+    }
+  }
+});
+function cn(...inputs) {
+  return twMerge(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
 import {
@@ -8,7 +59,7 @@ import {
   forwardRef,
   isValidElement
 } from "react";
-import clsx from "clsx";
+import clsx2 from "clsx";
 var Slot = forwardRef(function Slot2({ children, wrapChildren, ...slotProps }, forwardedRef) {
   if (!isValidElement(children)) return null;
   const child = children;
@@ -33,7 +84,7 @@ function mergeProps(slotProps, childProps) {
         merged[key] = childValue ?? slotValue;
       }
     } else if (key === "className") {
-      merged[key] = clsx(slotValue, childValue);
+      merged[key] = clsx2(slotValue, childValue);
     } else if (key === "style") {
       merged[key] = { ...slotValue, ...childValue };
     } else {
@@ -70,27 +121,30 @@ function useControlSize(explicit) {
 
 // src/components/forms/icon-button.tsx
 import { forwardRef as forwardRef2 } from "react";
-import clsx2 from "clsx";
+import clsx3 from "clsx";
 import { jsx as jsx2 } from "react/jsx-runtime";
 var variantStyles = {
-  primary: clsx2(
+  primary: clsx3(
     "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: clsx2(
+  neutral: clsx3(
     "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: clsx2(
+  subtle: clsx3(
     "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 = {
@@ -98,27 +152,52 @@ var sizeStyles = {
   md: "size-9 rounded-lg [&_svg]:size-5",
   sm: "size-6 rounded-full [&_svg]:size-4"
 };
-var IconButton = forwardRef2(function IconButton2({ variant = "primary", size: sizeProp, asChild = false, type, children, className, ...props }, ref) {
-  const size2 = useControlSize(sizeProp);
+var IconButton = forwardRef2(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: clsx2(
+    // `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__ */ jsx2(Slot, { ref, ...rootProps, children });
+    return /* @__PURE__ */ jsx2(Slot, { ref, tabIndex: disabled ? -1 : void 0, ...rootProps, children });
   }
   return /* @__PURE__ */ jsx2(
     "button",
     {
       ref,
       type: type ?? "button",
+      disabled,
       ...rootProps,
       children
     }
@@ -126,7 +205,7 @@ var IconButton = forwardRef2(function IconButton2({ variant = "primary", size: s
 });
 
 // src/components/avatar/avatar.tsx
-import clsx3 from "clsx";
+import clsx4 from "clsx";
 import { jsx as jsx3 } from "react/jsx-runtime";
 var sizeStyles2 = {
   lg: "size-10",
@@ -138,16 +217,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 = clsx3(
+  const { size = "lg", shape = "circle", className } = props;
+  const base = clsx4(
     "shrink-0 overflow-hidden",
-    sizeStyles2[size2],
-    getShapeClass(shape, size2),
+    sizeStyles2[size],
+    getShapeClass(shape, size),
     className
   );
   if (props.type === "image") {
@@ -163,16 +242,16 @@ function Avatar(props) {
   return /* @__PURE__ */ jsx3(
     "div",
     {
-      className: clsx3(base, "flex items-center justify-center"),
+      className: clsx4(base, "flex items-center justify-center"),
       style: {
         background: "linear-gradient(135deg, var(--color-graphic-blue) 30%, var(--color-graphic-red) 100%)"
       },
       children: /* @__PURE__ */ jsx3(
         "span",
         {
-          className: clsx3(
+          className: clsx4(
             "select-none leading-none text-brand-on-brand",
-            initialTextStyles[size2]
+            initialTextStyles[size]
           ),
           children: props.initial.charAt(0).toUpperCase()
         }
@@ -181,52 +260,6 @@ function Avatar(props) {
   );
 }
 
-// src/lib/cn.ts
-import { clsx as clsx4 } from "clsx";
-import { extendTailwindMerge } from "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 = extendTailwindMerge({
-  extend: {
-    classGroups: {
-      "font-size": [{ text: [...FONT_SIZES] }]
-    }
-  }
-});
-function cn(...inputs) {
-  return twMerge(clsx4(inputs));
-}
-
 // src/lib/use-controllable-state.ts
 import { useCallback, useRef, useState } from "react";
 function useControllableState({
@@ -252,197 +285,6 @@ function useControllableState({
   return [current, setValue];
 }
 
-// src/lib/use-roving-focus.ts
-import { useCallback as useCallback2, useEffect, useRef as useRef2, useState as useState2 } from "react";
-function useRovingFocus({
-  orientation = "horizontal",
-  loop = true,
-  typeahead = false,
-  defaultIndex = 0,
-  onEscape
-} = {}) {
-  const [activeIndex, setActiveIndex] = useState2(defaultIndex);
-  const items = useRef2([]);
-  const meta = useRef2([]);
-  const search = useRef2("");
-  const searchTimer = useRef2(null);
-  useEffect(
-    () => () => {
-      if (searchTimer.current) clearTimeout(searchTimer.current);
-    },
-    []
-  );
-  const focusIndex = useCallback2((index) => {
-    const node = items.current[index];
-    if (!node) return;
-    setActiveIndex(index);
-    node.focus();
-  }, []);
-  const move = useCallback2(
-    (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 = useCallback2(
-    (from) => {
-      const total = items.current.length;
-      if (total === 0) return;
-      move(from === "start" ? -1 : total, from === "start" ? 1 : -1);
-    },
-    [move]
-  );
-  const runTypeahead = useCallback2(
-    (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 = useCallback2(
-    (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 = useCallback2(
-    (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
-import { useRef as useRef3 } from "react";
-import {
-  arrow,
-  autoUpdate,
-  flip,
-  offset,
-  shift,
-  size,
-  useFloating
-} from "@floating-ui/react";
-function useFloatingPanel({
-  open,
-  onOpenChange,
-  side = "bottom",
-  align = "center",
-  sideOffset = 6,
-  alignOffset = 0,
-  collisionPadding = 8,
-  withArrow = false,
-  matchAnchorWidth = false
-}) {
-  const arrowRef = useRef3(null);
-  const placement = align === "center" ? side : `${side}-${align}`;
-  const floating = 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: autoUpdate,
-    middleware: [
-      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.
-      flip({ padding: collisionPadding }),
-      shift({ padding: collisionPadding }),
-      matchAnchorWidth && 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 && arrow({ element: arrowRef, padding: 4 })
-    ].filter(Boolean)
-  });
-  return { ...floating, arrowRef };
-}
-
 // src/components/overlays/menu-styles.ts
 import clsx6 from "clsx";
 
@@ -474,256 +316,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
-import { useEffect as useEffect3, useRef as useRef5 } from "react";
-import { tabbable } from "tabbable";
-
-// src/components/overlays/overlay-stack.ts
-import { useEffect as useEffect2, useRef as useRef4, useState as useState3 } from "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 = useRef4();
-  if (!id.current) id.current = /* @__PURE__ */ Symbol("overlay-layer");
-  const [isTopmost, setIsTopmost] = useState3(false);
-  useEffect2(() => {
-    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]);
-  useEffect2(() => {
-    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 = useRef5({ onDismiss, onEscapeKeyDown, onInteractOutside });
-  handlers.current = { onDismiss, onEscapeKeyDown, onInteractOutside };
-  const isTopmostRef = useRef5(isTopmost);
-  isTopmostRef.current = isTopmost;
-  useEffect3(() => {
-    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]);
-  useEffect3(() => {
-    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]);
-  useEffect3(() => {
-    if (!active || !trapFocus) return;
-    function onKeyDown(event) {
-      if (event.key !== "Tab" || !isTopmostRef.current) return;
-      const panel = panelRef.current;
-      if (!panel) return;
-      const items = 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 = 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]);
-  useEffect3(() => {
-    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 = 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
-import { useEffect as useEffect4, useState as useState4 } from "react";
+import { createContext as createContext2, useContext as useContext2, useEffect, useState as useState2 } from "react";
 import { createPortal } from "react-dom";
-function Portal({ children, container }) {
-  const [mounted, setMounted] = useState4(false);
-  useEffect4(() => setMounted(true), []);
-  if (!mounted) return null;
-  const target = container ?? (typeof document === "undefined" ? null : document.body);
-  if (!target) return null;
-  return createPortal(children, target);
+import { jsx as jsx4 } from "react/jsx-runtime";
+var PortalContainerContext = createContext2(null);
+function usePortalContainer() {
+  return useContext2(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
-import {
-  cloneElement as cloneElement2,
-  isValidElement as isValidElement2,
-  useCallback as useCallback3,
-  useEffect as useEffect5,
-  useId,
-  useRef as useRef6,
-  useState as useState5
-} from "react";
-import clsx7 from "clsx";
-import { Fragment, jsx as jsx4, jsxs } from "react/jsx-runtime";
+import { useId } from "react";
+import { Tooltip as TooltipPrimitive } from "radix-ui";
+import { Fragment, jsx as jsx5, jsxs } from "react/jsx-runtime";
 function Tooltip({
   children,
   title,
@@ -731,231 +347,243 @@ 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 = useId();
-  const [triggerNode, setTriggerNode] = useState5(null);
-  const timer = useRef6(null);
-  const clearTimer = useCallback3(() => {
-    if (timer.current) {
-      clearTimeout(timer.current);
-      timer.current = null;
-    }
-  }, []);
-  const schedule = useCallback3(
-    (next, delay) => {
-      clearTimer();
-      if (delay === 0) {
-        setOpen(next);
-        return;
+  const container = usePortalContainer();
+  const labelId = useId();
+  const labelled = association === "labelledby";
+  const content = /* @__PURE__ */ jsxs(Fragment, { children: [
+    title && /* @__PURE__ */ jsx5("p", { className: "font-semibold", children: title }),
+    body && /* @__PURE__ */ jsx5("p", { className: cn(title && "mt-0.5 opacity-80"), children: body })
+  ] });
+  return /* @__PURE__ */ jsx5(TooltipPrimitive.Provider, { delayDuration: openDelay, children: /* @__PURE__ */ jsxs(TooltipPrimitive.Root, { open, defaultOpen, onOpenChange, children: [
+    /* @__PURE__ */ jsx5(
+      TooltipPrimitive.Trigger,
+      {
+        asChild: true,
+        ...labelled ? { "aria-labelledby": labelId, "aria-describedby": void 0 } : {},
+        children
       }
-      timer.current = setTimeout(() => setOpen(next), delay);
-    },
-    [clearTimer, setOpen]
-  );
-  useEffect5(() => clearTimer, [clearTimer]);
-  const { refs, floatingStyles } = useFloatingPanel({
-    open,
-    onOpenChange: setOpen,
-    side,
-    align,
-    sideOffset: 6
-  });
-  useEffect5(() => {
-    refs.setReference(triggerNode);
-  }, [refs, triggerNode]);
-  useEffect5(() => {
-    if (!open) return;
-    function onKeyDown(event) {
-      if (event.key === "Escape") setOpen(false);
-    }
-    document.addEventListener("keydown", onKeyDown);
-    return () => document.removeEventListener("keydown", onKeyDown);
-  }, [open, setOpen]);
-  if (!isValidElement2(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 = cloneElement2(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__ */ jsxs(Fragment, { children: [
-    trigger,
-    (open || association === "labelledby") && /* @__PURE__ */ jsx4(Portal, { children: /* @__PURE__ */ jsxs(
-      "div",
+    labelled && /* @__PURE__ */ jsxs("span", { id: labelId, hidden: true, children: [
+      title,
+      body ? " " : null,
+      body
+    ] }),
+    /* @__PURE__ */ jsx5(TooltipPrimitive.Portal, { container: container ?? void 0, children: /* @__PURE__ */ jsx5(
+      TooltipPrimitive.Content,
       {
-        ref: refs.setFloating,
-        id: tooltipId,
-        role: "tooltip",
-        style: floatingStyles,
-        className: clsx7(
+        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__ */ jsx4("p", { className: "font-semibold", children: title }),
-          body && /* @__PURE__ */ jsx4("p", { className: clsx7(title && "mt-0.5 opacity-80"), children: body })
-        ]
+        children: content
       }
     ) })
-  ] });
+  ] }) });
 }
 
 // src/components/overlays/menu-core.tsx
 import {
-  createContext as createContext2,
-  useCallback as useCallback4,
-  useContext as useContext2,
-  useId as useId2,
-  useMemo,
-  useRef as useRef7
+  forwardRef as forwardRef3,
+  useId as useId2
 } from "react";
-import clsx8 from "clsx";
-import { LuCheck } from "react-icons/lu";
-import { jsx as jsx5, jsxs as jsxs2 } from "react/jsx-runtime";
-var MenuContext = createContext2(null);
-function useMenu(part) {
-  const context = useContext2(MenuContext);
-  if (!context) {
-    throw new Error(`<${part}> must be used inside a menu root (DropdownMenu, ContextMenu, Menubar)`);
-  }
-  return context;
+import clsx7 from "clsx";
+import { CheckIcon, ChevronRightIcon } from "lucide-react";
+import { jsx as jsx6, jsxs as jsxs2 } from "react/jsx-runtime";
+var MENU_PANEL_CLASSES = cn("z-popover", OVERLAY_PANEL_MENU, "focus:outline-none");
+var ITEM_BASE = clsx7(
+  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 = useId2();
-  const cursor = useRef7(0);
-  const pendingEdge = useRef7("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 = useCallback4(() => cursor.current++, []);
-  const resetIndices = useCallback4(() => {
-    cursor.current = 0;
-  }, []);
-  return 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 = clsx8(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 = forwardRef3(function MenuItem({ children, onSelect, tone = "default", disabled = false, icon, description, shortcut, textValue, className, ...rest }, ref) {
+    const descriptionId = useId2();
+    return /* @__PURE__ */ jsxs2(
+      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__ */ jsx6("span", { "aria-hidden": true, className: "mt-0.5 flex size-4 shrink-0 items-center justify-center", children: icon }),
+          /* @__PURE__ */ jsxs2("span", { className: "min-w-0 flex-1", children: [
+            /* @__PURE__ */ jsx6("span", { className: "block truncate", children }),
+            description && /* @__PURE__ */ jsx6("span", { id: descriptionId, className: "mt-0.5 block text-body-tiny text-default-secondary", children: description })
+          ] }),
+          shortcut && /* @__PURE__ */ jsx6("span", { className: "ml-auto shrink-0 pl-4 text-body-tiny text-default-tertiary", children: shortcut })
+        ]
+      }
+    );
+  });
+  const CheckboxItem = forwardRef3(function MenuCheckboxItem({ children, checked, onCheckedChange, disabled = false, tone = "default", shortcut, textValue, className, ...rest }, ref) {
+    return /* @__PURE__ */ jsxs2(
+      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__ */ jsx6("span", { "aria-hidden": true, className: "flex size-4 shrink-0 items-center justify-center", children: /* @__PURE__ */ jsx6(P.ItemIndicator, { children: /* @__PURE__ */ jsx6(CheckIcon, { className: "size-3.5", strokeWidth: 3 }) }) }),
+          /* @__PURE__ */ jsx6("span", { className: "min-w-0 flex-1 truncate", children }),
+          shortcut && /* @__PURE__ */ jsx6("span", { className: "ml-auto shrink-0 pl-4 text-body-tiny text-default-tertiary", children: shortcut })
+        ]
+      }
+    );
+  });
+  function RadioGroup({ children, value, onValueChange }) {
+    return /* @__PURE__ */ jsx6(P.RadioGroup, { value, onValueChange, children });
+  }
+  const RadioItem = forwardRef3(function MenuRadioItem({ children, value, disabled = false, tone = "default", textValue, className, ...rest }, ref) {
+    return /* @__PURE__ */ jsxs2(
+      P.RadioItem,
+      {
+        ref,
+        value,
+        disabled,
+        textValue,
+        "data-tone": tone,
+        className: cn(ITEM_BASE, "items-center", ITEM_TONE[tone], className),
+        ...rest,
+        children: [
+          /* @__PURE__ */ jsx6("span", { "aria-hidden": true, className: "flex size-4 shrink-0 items-center justify-center", children: /* @__PURE__ */ jsx6(P.ItemIndicator, { children: /* @__PURE__ */ jsx6("span", { className: "block size-1.5 rounded-full bg-current" }) }) }),
+          /* @__PURE__ */ jsx6("span", { className: "min-w-0 flex-1 truncate", children })
+        ]
+      }
+    );
+  });
+  const Group = forwardRef3(function MenuGroup({ children, label, className, ...rest }, ref) {
+    const labelId = useId2();
+    return /* @__PURE__ */ jsxs2(P.Group, { ref, "aria-labelledby": label ? labelId : void 0, className, ...rest, children: [
+      label && /* @__PURE__ */ jsx6("div", { id: labelId, className: OVERLAY_HEADING, children: label }),
+      children
+    ] });
+  });
+  const Label = forwardRef3(function MenuLabel({ className, ...rest }, ref) {
+    return /* @__PURE__ */ jsx6(P.Label, { ref, className: cn(OVERLAY_HEADING, className), ...rest });
+  });
+  const Separator = forwardRef3(function MenuSeparator({ className, ...rest }, ref) {
+    return /* @__PURE__ */ jsx6(P.Separator, { ref, className: cn(OVERLAY_SEPARATOR, className), ...rest });
+  });
+  const Shortcut = forwardRef3(function MenuShortcut({ className, ...rest }, ref) {
+    return /* @__PURE__ */ jsx6("span", { ref, className: cn("ml-auto pl-4 text-body-tiny text-default-tertiary", className), ...rest });
+  });
+  function Sub({ children, open, defaultOpen, onOpenChange }) {
+    return /* @__PURE__ */ jsx6(P.Sub, { open, defaultOpen, onOpenChange, children });
+  }
+  const SubTrigger = forwardRef3(function MenuSubTrigger({ children, icon, disabled = false, textValue, className, ...rest }, ref) {
+    return /* @__PURE__ */ jsxs2(
+      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__ */ jsx6("span", { "aria-hidden": true, className: "flex size-4 shrink-0 items-center justify-center", children: icon }),
+          /* @__PURE__ */ jsx6("span", { className: "min-w-0 flex-1 truncate", children }),
+          /* @__PURE__ */ jsx6(ChevronRightIcon, { "aria-hidden": true, className: "ml-auto size-4 shrink-0 text-default-tertiary" })
+        ]
+      }
+    );
+  });
+  const SubContent = forwardRef3(function MenuSubContent({ className, onClick, onKeyDown, ...rest }, ref) {
+    const container = usePortalContainer();
+    return /* @__PURE__ */ jsx6(P.Portal, { container: container ?? void 0, children: /* @__PURE__ */ jsx6(
+      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__ */ jsxs2(
-    "div",
-    {
-      role: "menuitem",
-      "aria-disabled": disabled || void 0,
-      "aria-describedby": description ? descriptionId : void 0,
-      ...itemProps,
-      tabIndex: itemProps.tabIndex,
-      className: clsx8(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__ */ jsx5("span", { "aria-hidden": true, className: "mt-0.5 flex size-4 shrink-0 items-center justify-center", children: icon }),
-        /* @__PURE__ */ jsxs2("span", { className: "min-w-0 flex-1", children: [
-          /* @__PURE__ */ jsx5("span", { className: "block truncate", children }),
-          description && /* @__PURE__ */ jsx5("span", { id: descriptionId, className: "mt-0.5 block text-body-tiny text-default-secondary", children: description })
-        ] }),
-        shortcut && /* @__PURE__ */ jsx5("span", { className: "ml-auto shrink-0 pl-4 text-body-tiny text-default-tertiary", children: shortcut })
-      ]
-    }
-  );
 }
-var MenuRadioContext = createContext2(null);
 
 // src/components/cards/scroll-area.tsx
-import { forwardRef as forwardRef3, useEffect as useEffect6, useRef as useRef8, useState as useState6 } from "react";
-import clsx9 from "clsx";
-import { jsx as jsx6 } from "react/jsx-runtime";
+import { forwardRef as forwardRef4, useEffect as useEffect2, useRef as useRef2, useState as useState3 } from "react";
+import clsx8 from "clsx";
+import { jsx as jsx7 } from "react/jsx-runtime";
 var OVERFLOW = {
   vertical: "overflow-y-auto overflow-x-hidden",
   horizontal: "overflow-x-auto overflow-y-hidden",
   both: "overflow-auto"
 };
-var ScrollArea = forwardRef3(function ScrollArea2({ children, axis = "vertical", label, className, ...rest }, ref) {
-  const localRef = useRef8(null);
-  const [overflows, setOverflows] = useState6(false);
-  useEffect6(() => {
+var ScrollArea = forwardRef4(function ScrollArea2({ children, axis = "vertical", label, className, ...rest }, ref) {
+  const localRef = useRef2(null);
+  const [overflows, setOverflows] = useState3(false);
+  useEffect2(() => {
     const node = localRef.current;
     if (!node) return;
     const measure = () => {
@@ -972,7 +600,7 @@ var ScrollArea = forwardRef3(function ScrollArea2({ children, axis = "vertical",
     if (node.firstElementChild) observer.observe(node.firstElementChild);
     return () => observer.disconnect();
   }, [axis, children]);
-  return /* @__PURE__ */ jsx6(
+  return /* @__PURE__ */ jsx7(
     "div",
     {
       ref: composeRefs(localRef, ref),
@@ -980,7 +608,7 @@ var ScrollArea = forwardRef3(function ScrollArea2({ children, axis = "vertical",
       "aria-label": overflows ? label : void 0,
       tabIndex: overflows ? 0 : void 0,
       "data-slot": "scroll-area",
-      className: clsx9(
+      className: clsx8(
         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,
@@ -995,156 +623,134 @@ var ScrollArea = forwardRef3(function ScrollArea2({ children, axis = "vertical",
 // src/components/overlays/dropdown-menu.tsx
 import {
   createContext as createContext3,
+  forwardRef as forwardRef5,
   useContext as useContext3,
-  useEffect as useEffect7,
-  useMemo as useMemo2,
-  useRef as useRef9,
-  useState as useState7
+  useMemo,
+  useRef as useRef3
 } from "react";
-import clsx10 from "clsx";
-import { LuEllipsis } from "react-icons/lu";
-import { jsx as jsx7 } from "react/jsx-runtime";
-var TriggerNodeContext = createContext3(null);
-function useTriggerNode() {
-  const value = useContext3(TriggerNodeContext);
-  if (!value) throw new Error("DropdownMenu parts must be used inside <DropdownMenu>");
+import { DropdownMenu as DropdownMenuPrimitive } from "radix-ui";
+import { EllipsisIcon } from "lucide-react";
+import { jsx as jsx8 } from "react/jsx-runtime";
+var DropdownMenuStateContext = createContext3(null);
+function useDropdownMenuState(part) {
+  const value = useContext3(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] = useState7(null);
-  const anchor = useMemo2(() => ({ triggerNode, setTriggerNode }), [triggerNode]);
-  return /* @__PURE__ */ jsx7(MenuContext.Provider, { value: menu, children: /* @__PURE__ */ jsx7(TriggerNodeContext.Provider, { value: anchor, children }) });
+  const pendingEdge = useRef3("start");
+  const state = useMemo(() => ({ setOpen, pendingEdge }), [setOpen]);
+  return /* @__PURE__ */ jsx8(DropdownMenuPrimitive.Root, { open, onOpenChange: setOpen, modal, children: /* @__PURE__ */ jsx8(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 = forwardRef5(
+  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__ */ jsx8(DropdownMenuPrimitive.Trigger, { ref, asChild: true, ...rest, ...handlers, children });
+    }
+    return /* @__PURE__ */ jsx8(DropdownMenuPrimitive.Trigger, { ref, asChild: true, ...rest, ...handlers, children: /* @__PURE__ */ jsx8(IconButton, { variant: "neutral", size: "sm", "aria-label": label, children: children ?? /* @__PURE__ */ jsx8(EllipsisIcon, { className: "size-4", "aria-hidden": true }) }) });
+  }
+);
+var DropdownMenuContent = forwardRef5(
+  function DropdownMenuContent2({
+    children,
+    side = "bottom",
+    align = "end",
+    sideOffset = 6,
+    container,
+    className,
+    onClick,
+    onKeyDown,
+    onFocus,
+    onCloseAutoFocus,
     ...rest
-  };
-  if (asChild) {
-    return /* @__PURE__ */ jsx7(Slot, { ref: composeRefs(anchor.setTriggerNode), ...triggerProps, children });
+  }, ref) {
+    const state = useDropdownMenuState("DropdownMenuContent");
+    const inherited = usePortalContainer();
+    return /* @__PURE__ */ jsx8(DropdownMenuPrimitive.Portal, { container: container ?? inherited ?? void 0, children: /* @__PURE__ */ jsx8(
+      DropdownMenuPrimitive.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__ */ jsx7(
-    IconButton,
-    {
-      ref: composeRefs(anchor.setTriggerNode),
-      variant: "neutral",
-      size: "sm",
-      "aria-label": label,
-      ...triggerProps,
-      children: children ?? /* @__PURE__ */ jsx7(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 = useRef9(null);
-  const [panelNode, setPanelNode] = useState7(null);
-  menu.resetIndices();
-  const { refs, floatingStyles } = useFloatingPanel({
-    open: menu.open,
-    onOpenChange: menu.setOpen,
-    side,
-    align,
-    sideOffset
-  });
-  useEffect7(() => {
-    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 = useRef9(false);
-  useEffect7(() => {
-    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__ */ jsx7(Portal, { children: /* @__PURE__ */ jsx7(
-    "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: clsx10("z-popover", 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(DropdownMenuPrimitive);
+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
-import clsx11 from "clsx";
-import { Fragment as Fragment2, jsx as jsx8, jsxs as jsxs3 } from "react/jsx-runtime";
+import clsx9 from "clsx";
+import { Fragment as Fragment2, jsx as jsx9, jsxs as jsxs3 } from "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" }
@@ -1171,12 +777,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: clsx11("border border-transparent", STATE.active),
-    inactive: clsx11("border border-default bg-default text-default-secondary", STATE.hover)
+    active: clsx9("border border-transparent", STATE.active),
+    inactive: clsx9("border border-default bg-default text-default-secondary", STATE.hover)
   },
   plain: {
     active: STATE.active,
-    inactive: clsx11("text-default-secondary", STATE.hover)
+    inactive: clsx9("text-default-secondary", STATE.hover)
   }
 };
 function NavItem({
@@ -1185,14 +791,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
@@ -1203,7 +811,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: clsx11(
+    "data-disabled": disabled || void 0,
+    "aria-disabled": disabled || void 0,
+    className: clsx9(
       "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`
@@ -1216,20 +826,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 ? clsx11("justify-center", s.square) : "w-full",
+      collapsed ? clsx9("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__ */ jsxs3(Fragment2, { children: [
-    icon != null ? /* @__PURE__ */ jsx8("span", { "aria-hidden": true, className: "shrink-0 [&_svg]:size-4", children: icon }) : (
+    icon != null ? /* @__PURE__ */ jsx9("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__ */ jsx8(
+      collapsed && /* @__PURE__ */ jsx9(
         "span",
         {
           "aria-hidden": true,
@@ -1238,10 +859,10 @@ function NavItem({
         }
       )
     ),
-    /* @__PURE__ */ jsx8(
+    /* @__PURE__ */ jsx9(
       "span",
       {
-        className: clsx11(
+        className: clsx9(
           "min-w-0 truncate font-regular leading-snug",
           s.label,
           collapsed ? "sr-only" : "flex-1"
@@ -1249,7 +870,7 @@ function NavItem({
         children: label
       }
     ),
-    indicator && /* @__PURE__ */ jsx8(
+    indicator && /* @__PURE__ */ jsx9(
       "span",
       {
         role: "status",
@@ -1259,32 +880,35 @@ function NavItem({
     )
   ] });
   if (asChild) {
-    return /* @__PURE__ */ jsx8(Slot, { wrapChildren: () => content, ...rootProps, children });
+    return /* @__PURE__ */ jsx9(Slot, { wrapChildren: () => content, ...rootProps, children });
   }
-  return /* @__PURE__ */ jsx8("span", { ...rootProps, children: content });
+  return /* @__PURE__ */ jsx9("span", { ...rootProps, children: content });
 }
 
+// src/index.tsx
+import { createColumnHelper } from "@tanstack/react-table";
+
 // src/sidebar/nav-tabs.tsx
 import { NavLink } from "react-router-dom";
-import clsx12 from "clsx";
-import { jsx as jsx9 } from "react/jsx-runtime";
+import clsx10 from "clsx";
+import { jsx as jsx10 } from "react/jsx-runtime";
 function NavTabs({ items, className }) {
   return (
     // The links inside are the tab stops.
-    /* @__PURE__ */ jsx9(
+    /* @__PURE__ */ jsx10(
       "div",
       {
-        className: clsx12(
+        className: clsx10(
           "flex gap-6 overflow-x-auto border-b border-default",
           SCROLLBAR_CLASSES,
           className
         ),
-        children: items.map((tab) => /* @__PURE__ */ jsx9(
+        children: items.map((tab) => /* @__PURE__ */ jsx10(
           NavLink,
           {
             to: tab.to,
             end: tab.end,
-            className: ({ isActive }) => clsx12(
+            className: ({ isActive }) => clsx10(
               "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"
             ),
@@ -1298,7 +922,7 @@ function NavTabs({ items, className }) {
 }
 
 // src/sidebar/index.tsx
-import { Fragment as Fragment3, jsx as jsx10, jsxs as jsxs4 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx11, jsxs as jsxs4 } from "react/jsx-runtime";
 function AppSidebar({
   groups,
   footerNav,
@@ -1307,14 +931,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__ */ jsxs4(
+  const hashTargets = useMemo2(
+    () => new Set(
+      [...groups.flatMap((group) => group.items), ...footerNav ?? []].map((item) => item.to).filter((to) => to.includes("#"))
+    ),
+    [groups, footerNav]
+  );
+  return /* @__PURE__ */ jsx11(HashTargets.Provider, { value: hashTargets, children: /* @__PURE__ */ jsxs4(
     "aside",
     {
       className: cn(
@@ -1324,7 +954,7 @@ function AppSidebar({
         className
       ),
       children: [
-        collapsible && onToggle && /* @__PURE__ */ jsx10(
+        collapsible && onToggle && /* @__PURE__ */ jsx11(
           "button",
           {
             type: "button",
@@ -1340,10 +970,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__ */ jsx10(LuChevronRight, { className: "size-3", strokeWidth: 2.5, "aria-hidden": true }) : /* @__PURE__ */ jsx10(LuChevronLeft, { className: "size-3", strokeWidth: 2.5, "aria-hidden": true })
+            children: collapsed ? /* @__PURE__ */ jsx11(ChevronRightIcon2, { className: "size-3", strokeWidth: 2.5, "aria-hidden": true }) : /* @__PURE__ */ jsx11(ChevronLeftIcon, { className: "size-3", strokeWidth: 2.5, "aria-hidden": true })
           }
         ),
-        brand && /* @__PURE__ */ jsx10(
+        brand && /* @__PURE__ */ jsx11(
           "div",
           {
             className: cn(
@@ -1353,24 +983,24 @@ function AppSidebar({
             children: typeof brand === "function" ? brand({ collapsed }) : brand
           }
         ),
-        /* @__PURE__ */ jsx10(ScrollArea, { axis: "vertical", label: "Sidebar navigation", className: "min-h-0 flex-1", children: /* @__PURE__ */ jsx10("nav", { className: "flex flex-col gap-4 px-4 pb-3 pt-2", children: groups.map((group, groupIndex) => /* @__PURE__ */ jsx10(
+        /* @__PURE__ */ jsx11(ScrollArea, { axis: "vertical", label: "Sidebar navigation", className: "min-h-0 flex-1", children: /* @__PURE__ */ jsx11("nav", { className: "flex flex-col gap-4 px-4 pb-3 pt-2", children: groups.map((group, groupIndex) => /* @__PURE__ */ jsx11(
           SidebarGroup,
           {
             group,
             showSeparator: groupIndex > 0,
             collapsed,
-            size: size2,
+            size,
             variant
           },
           group.title ?? `group-${groupIndex}`
         )) }) }),
         (footerNav?.length || footer) && /* @__PURE__ */ jsxs4("div", { className: "flex shrink-0 flex-col", children: [
-          footerNav && footerNav.length > 0 && /* @__PURE__ */ jsx10("nav", { className: "flex flex-col gap-3 px-4 pt-2", children: footerNav.map((item) => /* @__PURE__ */ jsx10(
+          footerNav && footerNav.length > 0 && /* @__PURE__ */ jsx11("nav", { className: "flex flex-col gap-3 px-4 pt-2", children: footerNav.map((item) => /* @__PURE__ */ jsx11(
             SidebarLink,
             {
               item,
               collapsed,
-              size: size2,
+              size,
               variant
             },
             item.to
@@ -1379,13 +1009,13 @@ function AppSidebar({
         ] })
       ]
     }
-  );
+  ) });
 }
 function SidebarGroup({
   group,
   showSeparator,
   collapsed,
-  size: size2,
+  size,
   variant
 }) {
   return (
@@ -1393,8 +1023,8 @@ function SidebarGroup({
     // 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__ */ jsxs4("div", { className: "flex flex-col gap-3", children: [
-      showSeparator && /* @__PURE__ */ jsx10(SidebarSeparator, {}),
-      group.title && /* @__PURE__ */ jsx10(
+      showSeparator && /* @__PURE__ */ jsx11(SidebarSeparator, {}),
+      group.title && /* @__PURE__ */ jsx11(
         "p",
         {
           className: cn(
@@ -1407,12 +1037,12 @@ function SidebarGroup({
           children: group.title
         }
       ),
-      group.items.map((item) => /* @__PURE__ */ jsx10(
+      group.items.map((item) => /* @__PURE__ */ jsx11(
         SidebarLink,
         {
           item,
           collapsed,
-          size: size2,
+          size,
           variant
         },
         item.to
@@ -1420,37 +1050,52 @@ function SidebarGroup({
     ] })
   );
 }
+var HashTargets = createContext4(/* @__PURE__ */ new Set());
+function useRowActive(item) {
+  const location = useLocation();
+  const hashTargets = useContext4(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__ */ jsx10(
-    NavLink2,
+  const active = useRowActive(item);
+  const link = /* @__PURE__ */ jsx11(
+    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__ */ jsx10(
+      children: /* @__PURE__ */ jsx11(
         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__ */ jsx10(Tooltip, { title: item.label, side: "right", children: link });
+  return /* @__PURE__ */ jsx11(Tooltip, { title: item.label, side: "right", children: link });
 }
 function SidebarSeparator({ className, ...rest }) {
-  return /* @__PURE__ */ jsx10("div", { "aria-hidden": true, className: cn("mx-1 h-px shrink-0 bg-divider", className), ...rest });
+  return /* @__PURE__ */ jsx11("div", { "aria-hidden": true, className: cn("mx-1 h-px shrink-0 bg-divider", className), ...rest });
 }
 function SidebarUserCard({
   name,
@@ -1463,38 +1108,38 @@ function SidebarUserCard({
   const initial = name.trim().charAt(0);
   const items = /* @__PURE__ */ jsxs4(Fragment3, { children: [
     menu,
-    /* @__PURE__ */ jsx10(
-      MenuItem,
+    /* @__PURE__ */ jsx11(
+      DropdownMenuItem,
       {
-        icon: /* @__PURE__ */ jsx10(LuLogOut, { className: "size-3.5", "aria-hidden": true }),
+        icon: /* @__PURE__ */ jsx11(LogOutIcon, { className: "size-3.5", "aria-hidden": true }),
         onSelect: onLogout,
         children: "Sign out"
       }
     )
   ] });
   if (collapsed) {
-    return /* @__PURE__ */ jsx10("div", { className: cn("flex shrink-0 items-center justify-center p-4", className), children: /* @__PURE__ */ jsxs4(DropdownMenu, { children: [
-      /* @__PURE__ */ jsx10(DropdownMenuTrigger, { asChild: true, label: "User options", children: /* @__PURE__ */ jsx10("button", { type: "button", "aria-label": `${name} \u2014 user options`, className: "rounded-full", children: /* @__PURE__ */ jsx10(Avatar, { initial, size: "lg", shape: "circle" }) }) }),
-      /* @__PURE__ */ jsx10(DropdownMenuContent, { side: "right", align: "end", children: items })
+    return /* @__PURE__ */ jsx11("div", { className: cn("flex shrink-0 items-center justify-center p-4", className), children: /* @__PURE__ */ jsxs4(DropdownMenu, { children: [
+      /* @__PURE__ */ jsx11(DropdownMenuTrigger, { asChild: true, label: "User options", children: /* @__PURE__ */ jsx11("button", { type: "button", "aria-label": `${name} \u2014 user options`, className: "rounded-full", children: /* @__PURE__ */ jsx11(Avatar, { initial, size: "lg", shape: "circle" }) }) }),
+      /* @__PURE__ */ jsx11(DropdownMenuContent, { side: "right", align: "end", children: items })
     ] }) });
   }
   return /* @__PURE__ */ jsxs4("div", { className: cn("flex shrink-0 items-center gap-2.5 p-4", className), children: [
-    /* @__PURE__ */ jsx10(Avatar, { initial, size: "lg", shape: "circle" }),
+    /* @__PURE__ */ jsx11(Avatar, { initial, size: "lg", shape: "circle" }),
     /* @__PURE__ */ jsxs4("div", { className: "flex min-w-0 flex-1 flex-col gap-0.5", children: [
-      /* @__PURE__ */ jsx10("span", { className: "truncate text-body-sm font-semibold leading-snug text-default", children: name }),
-      /* @__PURE__ */ jsx10("span", { className: "truncate text-body-tiny font-regular leading-none text-default-secondary", children: role })
+      /* @__PURE__ */ jsx11("span", { className: "truncate text-body-sm font-semibold leading-snug text-default", children: name }),
+      /* @__PURE__ */ jsx11("span", { className: "truncate text-body-tiny font-regular leading-none text-default-secondary", children: role })
     ] }),
     /* @__PURE__ */ jsxs4(DropdownMenu, { children: [
-      /* @__PURE__ */ jsx10(DropdownMenuTrigger, { asChild: true, label: "User options", children: /* @__PURE__ */ jsx10(
+      /* @__PURE__ */ jsx11(DropdownMenuTrigger, { asChild: true, label: "User options", children: /* @__PURE__ */ jsx11(
         "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__ */ jsx10(LuEllipsisVertical, { className: "size-5", "aria-hidden": true })
+          children: /* @__PURE__ */ jsx11(EllipsisVerticalIcon, { className: "size-5", "aria-hidden": true })
         }
       ) }),
-      /* @__PURE__ */ jsx10(DropdownMenuContent, { side: "top", align: "end", children: items })
+      /* @__PURE__ */ jsx11(DropdownMenuContent, { side: "top", align: "end", children: items })
     ] })
   ] });
 }