@platned/ui 0.1.4 → 0.5.1

package/dist/sidebar.cjs

@@ -30,20 +30,138 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/sidebar/index.tsx
 var sidebar_exports = {};
 __export(sidebar_exports, {
-  AppSidebar: () => AppSidebar
+  AppSidebar: () => AppSidebar,
+  NavTabs: () => NavTabs,
+  SidebarSeparator: () => SidebarSeparator,
+  SidebarUserCard: () => SidebarUserCard
 });
 module.exports = __toCommonJS(sidebar_exports);
-var import_react = require("react");
-var import_react_router_dom = require("react-router-dom");
-var import_clsx4 = __toESM(require("clsx"), 1);
-
-// src/index.tsx
-var import_clsx3 = __toESM(require("clsx"), 1);
+var import_react_router_dom2 = require("react-router-dom");
+var import_lu3 = require("react-icons/lu");
 
-// src/components/avatar.tsx
+// src/lib/slot.tsx
+var import_react = require("react");
 var import_clsx = __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;
+  const merged = {
+    ...mergeProps(slotProps, child.props),
+    ref: composeRefs(forwardedRef, getElementRef(child))
+  };
+  return wrapChildren ? (0, import_react.cloneElement)(child, merged, wrapChildren(child.props.children)) : (0, import_react.cloneElement)(child, merged);
+});
+function mergeProps(slotProps, childProps) {
+  const merged = { ...slotProps };
+  for (const key in childProps) {
+    const slotValue = slotProps[key];
+    const childValue = childProps[key];
+    if (/^on[A-Z]/.test(key)) {
+      if (typeof slotValue === "function" && typeof childValue === "function") {
+        merged[key] = (...args) => {
+          slotValue(...args);
+          childValue(...args);
+        };
+      } else {
+        merged[key] = childValue ?? slotValue;
+      }
+    } else if (key === "className") {
+      merged[key] = (0, import_clsx.default)(slotValue, childValue);
+    } else if (key === "style") {
+      merged[key] = { ...slotValue, ...childValue };
+    } else {
+      merged[key] = childValue;
+    }
+  }
+  return merged;
+}
+function getElementRef(element) {
+  const asRecord = element;
+  return asRecord.props?.ref ?? asRecord.ref;
+}
+function composeRefs(...refs) {
+  return (node) => {
+    for (const ref of refs) {
+      if (!ref) continue;
+      if (typeof ref === "function") {
+        ref(node);
+      } else {
+        ref.current = node;
+      }
+    }
+  };
+}
+
+// src/components/forms/control-size.tsx
+var import_react2 = require("react");
 var import_jsx_runtime = require("react/jsx-runtime");
+var ControlSizeContext = (0, import_react2.createContext)(null);
+function useControlSize(explicit) {
+  const inherited = (0, import_react2.useContext)(ControlSizeContext);
+  return explicit ?? inherited ?? "md";
+}
+
+// src/components/forms/icon-button.tsx
+var import_react3 = require("react");
+var import_clsx2 = __toESM(require("clsx"), 1);
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var variantStyles = {
+  primary: (0, import_clsx2.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"
+  ),
+  // Neutral uses secondary background (light gray) for visual weight without a text label
+  neutral: (0, import_clsx2.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"
+  ),
+  subtle: (0, import_clsx2.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"
+  )
+};
 var sizeStyles = {
+  lg: "size-12 rounded-2xl [&_svg]:size-5",
+  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);
+  const rootProps = {
+    className: (0, import_clsx2.default)(
+      "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",
+      variantStyles[variant],
+      sizeStyles[size2],
+      className
+    ),
+    ...props
+  };
+  if (asChild) {
+    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Slot, { ref, ...rootProps, children });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    "button",
+    {
+      ref,
+      type: type ?? "button",
+      ...rootProps,
+      children
+    }
+  );
+});
+
+// src/components/avatar/avatar.tsx
+var import_clsx3 = __toESM(require("clsx"), 1);
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var sizeStyles2 = {
   lg: "size-10",
   md: "size-8",
   sm: "size-6"
@@ -53,20 +171,20 @@ var initialTextStyles = {
   md: "text-body-xs font-semibold",
   sm: "text-body-tiny font-semibold"
 };
-function getShapeClass(shape, size) {
+function getShapeClass(shape, size2) {
   if (shape === "circle") return "rounded-full";
-  return size === "sm" ? "rounded" : "rounded-lg";
+  return size2 === "sm" ? "rounded" : "rounded-lg";
 }
 function Avatar(props) {
-  const { size = "lg", shape = "circle", className } = props;
-  const base = (0, import_clsx.default)(
+  const { size: size2 = "lg", shape = "circle", className } = props;
+  const base = (0, import_clsx3.default)(
     "shrink-0 overflow-hidden",
-    sizeStyles[size],
-    getShapeClass(shape, size),
+    sizeStyles2[size2],
+    getShapeClass(shape, size2),
     className
   );
   if (props.type === "image") {
-    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: base, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: base, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
       "img",
       {
         src: props.src,
@@ -75,19 +193,19 @@ function Avatar(props) {
       }
     ) });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
     "div",
     {
-      className: (0, import_clsx.default)(base, "flex items-center justify-center"),
+      className: (0, import_clsx3.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_runtime.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
         "span",
         {
-          className: (0, import_clsx.default)(
+          className: (0, import_clsx3.default)(
             "select-none leading-none text-brand-on-brand",
-            initialTextStyles[size]
+            initialTextStyles[size2]
           ),
           children: props.initial.charAt(0).toUpperCase()
         }
@@ -96,307 +214,1298 @@ function Avatar(props) {
   );
 }
 
-// src/components/nav-item.tsx
-var import_clsx2 = __toESM(require("clsx"), 1);
-var import_jsx_runtime2 = require("react/jsx-runtime");
-function NavItem({
-  icon,
-  label,
-  isActive = false,
-  indicator = false,
-  collapsed = false,
-  className
-}) {
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
-    "span",
-    {
-      className: (0, import_clsx2.default)(
-        "relative flex h-11 w-full items-center gap-3 rounded-xl px-3.5 py-2.5 transition-colors",
-        collapsed && "justify-center",
-        isActive ? "bg-brand text-brand-on-brand" : [
-          "border border-default bg-default text-default-secondary",
-          "hover:bg-brand-tertiary-hover hover:border-brand-tertiary hover:text-brand"
-        ],
-        className
-      ),
-      children: [
-        icon !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "shrink-0 [&_svg]:size-4", children: icon }),
-        !collapsed && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "flex-1 min-w-0 truncate text-body-sm font-regular leading-snug", children: label }),
-        indicator && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "absolute -right-px -top-px size-2 rounded-full bg-danger" })
-      ]
+// 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/index.tsx
-var import_jsx_runtime3 = require("react/jsx-runtime");
-
-// src/sidebar/index.tsx
-var import_jsx_runtime4 = require("react/jsx-runtime");
-function GridIcon() {
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": true, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("rect", { x: "3", y: "3", width: "7", height: "7", rx: "1" }),
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("rect", { x: "14", y: "3", width: "7", height: "7", rx: "1" }),
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("rect", { x: "14", y: "14", width: "7", height: "7", rx: "1" }),
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("rect", { x: "3", y: "14", width: "7", height: "7", rx: "1" })
-  ] });
+// src/lib/use-controllable-state.ts
+var import_react4 = require("react");
+function useControllableState({
+  value,
+  defaultValue,
+  onChange
+}) {
+  const [internal, setInternal] = (0, import_react4.useState)(defaultValue);
+  const isControlled = value !== void 0;
+  const current = isControlled ? value : internal;
+  const onChangeRef = (0, import_react4.useRef)(onChange);
+  onChangeRef.current = onChange;
+  const currentRef = (0, import_react4.useRef)(current);
+  currentRef.current = current;
+  const isControlledRef = (0, import_react4.useRef)(isControlled);
+  isControlledRef.current = isControlled;
+  const setValue = (0, import_react4.useCallback)((next) => {
+    const resolved = typeof next === "function" ? next(currentRef.current) : next;
+    if (resolved === currentRef.current) return;
+    if (!isControlledRef.current) setInternal(resolved);
+    onChangeRef.current?.(resolved);
+  }, []);
+  return [current, setValue];
 }
-function LayersIcon() {
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": true, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("polygon", { points: "12 2 2 7 12 12 22 7 12 2" }),
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("polyline", { points: "2 17 12 22 22 17" }),
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("polyline", { points: "2 12 12 17 22 12" })
-  ] });
+
+// 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 }
+  };
 }
-function BuildingIcon() {
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": true, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("rect", { x: "2", y: "7", width: "20", height: "14", rx: "2" }),
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("path", { d: "M16 21V5a2 2 0 0 0-2-2h-4a2 2 0 0 0-2 2v16" })
-  ] });
+
+// 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 };
 }
-function UsersIcon() {
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": true, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("path", { d: "M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2" }),
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("circle", { cx: "9", cy: "7", r: "4" }),
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("path", { d: "M23 21v-2a4 4 0 0 0-3-3.87" }),
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("path", { d: "M16 3.13a4 4 0 0 1 0 7.75" })
-  ] });
+
+// src/components/overlays/menu-styles.ts
+var import_clsx6 = __toESM(require("clsx"), 1);
+
+// src/lib/scrollbar.ts
+var import_clsx5 = __toESM(require("clsx"), 1);
+var SCROLLBAR_CLASSES = (0, import_clsx5.default)(
+  // Firefox and the standard property.
+  "[scrollbar-color:var(--color-background-default-tertiary)_transparent] [scrollbar-width:thin]",
+  // WebKit/Blink.
+  "[&::-webkit-scrollbar]:size-2",
+  "[&::-webkit-scrollbar-track]:bg-transparent",
+  "[&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-thumb]:bg-default-tertiary",
+  "[&::-webkit-scrollbar-thumb:hover]:bg-neutral-secondary",
+  "[&::-webkit-scrollbar-corner]:bg-transparent"
+);
+
+// src/components/overlays/menu-styles.ts
+var OVERLAY_PANEL = "rounded-lg border border-default bg-default p-1 shadow-300";
+var OVERLAY_PANEL_MENU = (0, import_clsx6.default)(OVERLAY_PANEL, "min-w-[168px]");
+var OVERLAY_PANEL_SCROLL = (0, import_clsx6.default)(
+  "max-h-[min(16rem,var(--panel-available-height,16rem))] overflow-y-auto",
+  // A floating panel is already its own scroll container and keeps focus on the input or a
+  // roving option, so it needs the scrollbar styling but not `ScrollArea`'s tab stop.
+  SCROLLBAR_CLASSES
+);
+var OVERLAY_ITEM_BASE = "flex w-full cursor-pointer select-none items-start gap-2 rounded-md text-left outline-none transition-colors";
+var OVERLAY_ITEM_SIZE = {
+  lg: "px-3 py-2.5 text-body",
+  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";
 }
-function RssIcon() {
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": true, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("path", { d: "M4 11a9 9 0 0 1 9 9" }),
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("path", { d: "M4 4a16 16 0 0 1 16 16" }),
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("circle", { cx: "5", cy: "19", r: "1", fill: "currentColor" })
-  ] });
+
+// 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 FileTextIcon() {
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": true, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("path", { d: "M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" }),
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("polyline", { points: "14 2 14 8 20 8" }),
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("line", { x1: "16", y1: "13", x2: "8", y2: "13" }),
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("line", { x1: "16", y1: "17", x2: "8", y2: "17" })
-  ] });
+function topmost() {
+  return layers[layers.length - 1]?.id;
 }
-function BellIcon() {
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": true, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("path", { d: "M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9" }),
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("path", { d: "M13.73 21a2 2 0 0 1-3.46 0" })
-  ] });
+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 ServerIcon() {
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": true, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("rect", { x: "2", y: "2", width: "20", height: "8", rx: "2" }),
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("rect", { x: "2", y: "14", width: "20", height: "8", rx: "2" }),
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("line", { x1: "6", y1: "6", x2: "6.01", y2: "6" }),
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("line", { x1: "6", y1: "18", x2: "6.01", y2: "18" })
-  ] });
+function unlockScroll() {
+  scrollLocks = Math.max(0, scrollLocks - 1);
+  if (scrollLocks === 0 && restoreBody) {
+    restoreBody();
+    restoreBody = null;
+  }
 }
-function SettingsIcon() {
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": true, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("circle", { cx: "12", cy: "12", r: "3" }),
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("path", { d: "M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83-2.83l.06-.06A1.65 1.65 0 0 0 4.68 15a1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 2.83-2.83l.06.06A1.65 1.65 0 0 0 9 4.68a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 2.83l-.06.06A1.65 1.65 0 0 0 19.4 9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z" })
-  ] });
+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 ClipboardListIcon() {
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": true, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("path", { d: "M9 5H7a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V7a2 2 0 0 0-2-2h-2" }),
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("rect", { x: "9", y: "3", width: "6", height: "4", rx: "1" }),
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("line", { x1: "9", y1: "12", x2: "15", y2: "12" }),
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("line", { x1: "9", y1: "16", x2: "13", y2: "16" })
-  ] });
+function releaseInert() {
+  for (const el of inerted) el.removeAttribute("inert");
+  inerted.clear();
 }
-function GlobeIcon() {
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": true, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("circle", { cx: "12", cy: "12", r: "10" }),
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("line", { x1: "2", y1: "12", x2: "22", y2: "12" }),
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("path", { d: "M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z" })
-  ] });
+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 };
 }
-function ChevronLeftIcon() {
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("svg", { width: "12", height: "12", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": true, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("polyline", { points: "15 18 9 12 15 6" }) });
+
+// 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]);
 }
-function ChevronRightIcon() {
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("svg", { width: "12", height: "12", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": true, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("polyline", { points: "9 18 15 12 9 6" }) });
+
+// src/components/overlays/portal.tsx
+var import_react10 = 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);
 }
-function MoreVerticalIcon() {
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": true, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("circle", { cx: "12", cy: "5", r: "1", fill: "currentColor" }),
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("circle", { cx: "12", cy: "12", r: "1", fill: "currentColor" }),
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("circle", { cx: "12", cy: "19", r: "1", fill: "currentColor" })
+
+// 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");
+function Tooltip({
+  children,
+  title,
+  body,
+  side = "top",
+  align = "center",
+  openDelay = 150,
+  closeDelay = 0,
+  open: openProp,
+  defaultOpen = false,
+  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;
+      }
+      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",
+      {
+        ref: refs.setFloating,
+        id: tooltipId,
+        role: "tooltip",
+        style: floatingStyles,
+        className: (0, import_clsx7.default)(
+          "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 })
+        ]
+      }
+    ) })
   ] });
 }
-function LogOutIcon() {
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": true, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("path", { d: "M9 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h4" }),
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("polyline", { points: "16 17 21 12 16 7" }),
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("line", { x1: "21", y1: "12", x2: "9", y2: "12" })
-  ] });
+
+// 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;
 }
-function SidebarLogo({ collapsed }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+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)
+  });
+  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?.();
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
     "div",
     {
-      className: (0, import_clsx4.default)(
-        "flex shrink-0 items-center overflow-hidden p-4",
-        collapsed ? "justify-center" : "gap-2.5"
-      ),
+      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: [
-        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "flex shrink-0 size-10 items-center justify-center rounded-xl bg-brand-hover overflow-hidden", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "grid grid-cols-2 gap-[3px]", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "size-2 rounded-[2px] bg-white" }),
-          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "size-2 rounded-[2px] bg-white/50" }),
-          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "size-2 rounded-[2px] bg-white/50" }),
-          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "size-2 rounded-[2px] bg-white" })
-        ] }) }),
-        !collapsed && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "text-heading font-semibold text-default tracking-tight whitespace-nowrap", children: "SCIC" })
+        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 })
       ]
     }
   );
 }
-function NavLinkItem({ to, icon, label, indicator, collapsed, end }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_react_router_dom.NavLink, { to, end, className: "block w-full no-underline", children: ({ isActive }) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-    NavItem,
+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 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)(() => {
+    const node = localRef.current;
+    if (!node) return;
+    const measure = () => {
+      const vertical = node.scrollHeight > node.clientHeight + 1;
+      const horizontal = node.scrollWidth > node.clientWidth + 1;
+      setOverflows(
+        axis === "vertical" ? vertical : axis === "horizontal" ? horizontal : vertical || horizontal
+      );
+    };
+    measure();
+    if (typeof ResizeObserver === "undefined") return;
+    const observer = new ResizeObserver(measure);
+    observer.observe(node);
+    if (node.firstElementChild) observer.observe(node.firstElementChild);
+    return () => observer.disconnect();
+  }, [axis, children]);
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+    "div",
     {
-      icon,
-      label,
-      isActive,
-      indicator,
-      collapsed
+      ref: composeRefs(localRef, ref),
+      role: overflows && label ? "region" : void 0,
+      "aria-label": overflows ? label : void 0,
+      tabIndex: overflows ? 0 : void 0,
+      "data-slot": "scroll-area",
+      className: (0, import_clsx9.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,
+        className
+      ),
+      ...rest,
+      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>");
+  return value;
 }
-function UserCard({ collapsed, name, role, onLogout }) {
-  const [menuOpen, setMenuOpen] = (0, import_react.useState)(false);
-  const menuRef = (0, import_react.useRef)(null);
-  const initial = name.trim().charAt(0);
-  (0, import_react.useEffect)(() => {
-    if (!menuOpen) return;
-    function handleClickOutside(e) {
-      if (menuRef.current && !menuRef.current.contains(e.target)) {
-        setMenuOpen(false);
+function DropdownMenu({
+  children,
+  open: openProp,
+  defaultOpen = false,
+  onOpenChange
+}) {
+  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 }) });
+}
+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);
       }
-    }
-    document.addEventListener("mousedown", handleClickOutside);
-    return () => document.removeEventListener("mousedown", handleClickOutside);
-  }, [menuOpen]);
-  const menuItems = /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
-    "button",
+    },
+    // 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(),
+    ...rest
+  };
+  if (asChild) {
+    return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(Slot, { ref: composeRefs(anchor.setTriggerNode), ...triggerProps, children });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+    IconButton,
     {
-      type: "button",
-      onClick: () => {
-        setMenuOpen(false);
-        onLogout();
-      },
-      className: "flex w-full items-center gap-2 px-3 py-2 text-body-sm text-default hover:bg-default-hover transition-colors",
-      children: [
-        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(LogOutIcon, {}),
-        "Sign out"
-      ]
+      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 })
     }
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+}
+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",
     {
-      className: (0, import_clsx4.default)(
-        "flex shrink-0 items-center p-4",
-        collapsed ? "justify-center" : "gap-2.5"
+      ref: composeRefs(
+        panelRef,
+        (node) => setPanelNode(node),
+        refs.setFloating
       ),
-      children: collapsed ? /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "relative", ref: menuRef, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-          "button",
-          {
-            type: "button",
-            "aria-label": "User options",
-            "aria-haspopup": "menu",
-            "aria-expanded": menuOpen,
-            onClick: () => setMenuOpen((v) => !v),
-            className: "rounded-full",
-            children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Avatar, { initial, size: "md", shape: "circle" })
-          }
-        ),
-        menuOpen && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "absolute bottom-0 left-full ml-2 w-36 rounded-lg border border-default bg-default shadow-md py-1 z-20", children: menuItems })
-      ] }) : /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_jsx_runtime4.Fragment, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Avatar, { initial, size: "md", shape: "circle" }),
-        /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "flex flex-1 min-w-0 flex-col gap-0.5", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "truncate text-body-sm font-semibold text-default leading-snug", children: name }),
-          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "truncate text-body-tiny font-regular text-default-secondary leading-none", children: role })
-        ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "relative shrink-0", ref: menuRef, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-            "button",
-            {
-              type: "button",
-              "aria-label": "User options",
-              "aria-haspopup": "menu",
-              "aria-expanded": menuOpen,
-              onClick: () => setMenuOpen((v) => !v),
-              className: "flex size-6 items-center justify-center rounded-md text-default-secondary hover:bg-default-hover hover:text-default transition-colors",
-              children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(MoreVerticalIcon, {})
-            }
-          ),
-          menuOpen && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "absolute bottom-full right-0 mb-1 w-36 rounded-lg border border-default bg-default shadow-md py-1 z-20", children: menuItems })
-        ] })
-      ] })
+      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
     }
+  ) });
+}
+
+// src/components/chrome/nav-item.tsx
+var import_clsx11 = __toESM(require("clsx"), 1);
+var import_jsx_runtime8 = 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" }
+};
+function monogram(label) {
+  const words = label.split(/\s+/).filter((word) => /^[\p{L}\p{N}]/u.test(word));
+  const [first, second] = words;
+  if (!first) return Array.from(label.trim())[0]?.toUpperCase() ?? "";
+  if (second) return (Array.from(first)[0] + Array.from(second)[0]).toUpperCase();
+  const [a, b] = Array.from(first);
+  return a.toUpperCase() + (b ?? "").toLowerCase();
+}
+var STATE = {
+  // Figma MenuButton `state=hover`. No border change: Figma holds it at #D9D9D9 through
+  // hover and moves only the fill and the text.
+  hover: "hover:bg-brand-tertiary-hover hover:text-brand",
+  // Figma MenuButton `state=focussed`, which is that file's name for selected — see the
+  // `isActive` doc comment. Hovering the current row darkens it rather than reverting it to
+  // the pale hover tint, which would read as the row losing its selection under the cursor.
+  active: "bg-brand text-brand-on-brand hover:bg-brand-hover"
+};
+var VARIANT = {
+  card: {
+    // `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)
+  },
+  plain: {
+    active: STATE.active,
+    inactive: (0, import_clsx11.default)("text-default-secondary", STATE.hover)
+  }
+};
+function NavItem({
+  icon,
+  label,
+  isActive = false,
+  indicator = false,
+  collapsed = false,
+  size: size2 = "md",
+  variant = "card",
+  asChild = false,
+  children,
+  className,
+  ...rest
+}) {
+  const s = SIZE[size2];
+  const v = VARIANT[variant];
+  const rootProps = {
+    // Only meaningful when `asChild` renders a real link — a decorative span with
+    // aria-current would be a lie.
+    "aria-current": asChild && isActive ? "page" : void 0,
+    // Same attribute the disclosure components and `TableRow` use, so the state is
+    // addressable from a consumer's CSS. `active` rather than `selected`: a nav row is where
+    // 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)(
+      "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`
+      // leaves that case with no visible focus at all.
+      // The offset is `default-secondary`, not `default`: a nav row's home is the sidebar
+      // rail, and `ring-offset-default` is #FFFFFF, so a focused `plain` row drew a 1px white
+      // halo on the #F5F5F5 rail. The offset itself is load-bearing — in dark mode
+      // `ring-brand` and `bg-brand` are both #F1F7FD, so without it a focused *active* row
+      // would have no visible ring at its inner edge.
+      "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",
+      isActive ? v.active : v.inactive,
+      className
+    ),
+    ...rest
+  };
+  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 }) : (
+      // 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)(
+        "span",
+        {
+          "aria-hidden": true,
+          className: "flex h-4 min-w-4 shrink-0 items-center justify-center text-body-tiny font-semibold leading-none tracking-tight",
+          children: monogram(label)
+        }
+      )
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+      "span",
+      {
+        className: (0, import_clsx11.default)(
+          "min-w-0 truncate font-regular leading-snug",
+          s.label,
+          collapsed ? "sr-only" : "flex-1"
+        ),
+        children: label
+      }
+    ),
+    indicator && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+      "span",
+      {
+        role: "status",
+        "aria-label": "Unread",
+        className: "absolute -right-px -top-px size-2 rounded-full bg-danger"
+      }
+    )
+  ] });
+  if (asChild) {
+    return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Slot, { wrapChildren: () => content, ...rootProps, children });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { ...rootProps, children: content });
+}
+
+// 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");
+function NavTabs({ items, className }) {
+  return (
+    // The links inside are the tab stops.
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+      "div",
+      {
+        className: (0, import_clsx12.default)(
+          "flex gap-6 overflow-x-auto border-b border-default",
+          SCROLLBAR_CLASSES,
+          className
+        ),
+        children: items.map((tab) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+          import_react_router_dom.NavLink,
+          {
+            to: tab.to,
+            end: tab.end,
+            className: ({ isActive }) => (0, import_clsx12.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"
+            ),
+            children: tab.label
+          },
+          tab.to
+        ))
+      }
+    )
   );
 }
-function AppSidebar({ collapsed, onToggle, isAdmin = false, userName, userRole, onLogout }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+
+// src/sidebar/index.tsx
+var import_jsx_runtime10 = require("react/jsx-runtime");
+function AppSidebar({
+  groups,
+  footerNav,
+  brand,
+  footer,
+  collapsible = true,
+  collapsed: collapsedProp = false,
+  onToggle,
+  size: size2 = "md",
+  variant = "card",
+  width = "w-80",
+  collapsedWidth = "w-20",
+  className
+}) {
+  const collapsed = collapsible && collapsedProp;
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
     "aside",
     {
-      className: (0, import_clsx4.default)(
-        "relative flex flex-col shrink-0 transition-all duration-200",
-        "bg-default-secondary border-r border-default rounded-xl",
-        "h-full",
-        collapsed ? "w-20" : "w-80"
+      className: cn(
+        "relative flex h-full shrink-0 flex-col py-2 transition-all duration-200",
+        "rounded-xl border-r border-default bg-default-secondary",
+        collapsed ? collapsedWidth : width,
+        className
       ),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+        collapsible && onToggle && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
           "button",
           {
             type: "button",
             "aria-label": collapsed ? "Expand sidebar" : "Collapse sidebar",
+            "aria-expanded": !collapsed,
             onClick: onToggle,
-            className: (0, import_clsx4.default)(
-              "absolute -right-3 top-5 z-10 flex size-6 items-center justify-center rounded-full",
-              "bg-default border border-default text-default-secondary",
-              "hover:bg-default-hover shadow-sm transition-colors"
+            className: cn(
+              "absolute -right-3 top-5 z-raised flex size-6 items-center justify-center rounded-full",
+              "border border-default bg-default text-default-secondary",
+              // Not `hover:bg-default-hover` — that is #F5F5F5, exactly the rail colour, and
+              // this button straddles the rail edge, so half of it dissolved into the rail on
+              // hover. Same hover vocabulary as the rows instead.
+              "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_runtime4.jsx)(ChevronRightIcon, {}) : /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(ChevronLeftIcon, {})
+            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 })
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "flex flex-1 min-h-0 flex-col gap-1", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(SidebarLogo, { collapsed }),
-          /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("nav", { className: "flex flex-col gap-3 overflow-y-auto px-4 pt-2 pb-3", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(NavLinkItem, { to: "/dashboard", icon: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(GridIcon, {}), label: "Dashboard", collapsed, end: true }),
-            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(NavLinkItem, { to: "/entities", icon: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(LayersIcon, {}), label: "Entities", collapsed, indicator: true }),
-            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(NavLinkItem, { to: "/suppliers", icon: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(BuildingIcon, {}), label: "Suppliers", collapsed }),
-            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(NavLinkItem, { to: "/customers", icon: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(UsersIcon, {}), label: "Customers", collapsed }),
-            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(NavLinkItem, { to: "/sources", icon: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(FileTextIcon, {}), label: "Sources", collapsed }),
-            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(NavLinkItem, { to: "/articles", icon: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(RssIcon, {}), label: "Intelligence", collapsed }),
-            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(NavLinkItem, { to: "/alerts", icon: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(BellIcon, {}), label: "Alerts", collapsed }),
-            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(NavLinkItem, { to: "/website-scraper", icon: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(GlobeIcon, {}), label: "Website Intel", collapsed }),
-            /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(NavLinkItem, { to: "/review", icon: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(ClipboardListIcon, {}), label: "Review queue", collapsed }),
-            isAdmin && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(NavLinkItem, { to: "/queues", icon: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(ServerIcon, {}), label: "Queues", collapsed })
-          ] })
-        ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)("div", { className: "flex flex-col", children: [
-          isAdmin && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "px-4 pb-2", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
-            NavLinkItem,
+        brand && /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+          "div",
+          {
+            className: cn(
+              "flex shrink-0 items-center overflow-hidden p-4",
+              collapsed ? "justify-center" : "gap-2.5"
+            ),
+            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)(
+          SidebarGroup,
+          {
+            group,
+            showSeparator: groupIndex > 0,
+            collapsed,
+            size: size2,
+            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)(
+            SidebarLink,
             {
-              to: "/settings",
-              icon: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(SettingsIcon, {}),
-              label: "Settings",
-              collapsed
-            }
-          ) }),
-          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "border-t border-default", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(UserCard, { collapsed, name: userName, role: userRole, onLogout }) })
+              item,
+              collapsed,
+              size: size2,
+              variant
+            },
+            item.to
+          )) }),
+          footer
         ] })
       ]
     }
   );
 }
+function SidebarGroup({
+  group,
+  showSeparator,
+  collapsed,
+  size: size2,
+  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)(
+        "p",
+        {
+          className: cn(
+            "text-body-tiny font-semibold uppercase tracking-wider text-neutral-tertiary",
+            // Flush with the rows rather than inset a further 12px — the heading lines up
+            // with the left edge of the pills below it, not with their labels.
+            // `sr-only` is out of flow, so a collapsed group's heading costs no gap.
+            collapsed ? "sr-only" : "px-0"
+          ),
+          children: group.title
+        }
+      ),
+      group.items.map((item) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+        SidebarLink,
+        {
+          item,
+          collapsed,
+          size: size2,
+          variant
+        },
+        item.to
+      ))
+    ] })
+  );
+}
+function SidebarLink({
+  item,
+  collapsed,
+  size: size2,
+  variant
+}) {
+  const link = /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+    import_react_router_dom2.NavLink,
+    {
+      to: item.to,
+      end: item.end,
+      className: cn("block w-full no-underline", collapsed && "flex justify-center"),
+      children: ({ isActive }) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+        NavItem,
+        {
+          icon: item.icon,
+          label: item.label,
+          isActive,
+          indicator: item.indicator,
+          collapsed,
+          size: size2,
+          variant
+        }
+      )
+    }
+  );
+  if (!collapsed) return link;
+  return /* @__PURE__ */ (0, import_jsx_runtime10.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 });
+}
+function SidebarUserCard({
+  name,
+  role,
+  onLogout,
+  collapsed = false,
+  menu,
+  className
+}) {
+  const initial = name.trim().charAt(0);
+  const items = /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_jsx_runtime10.Fragment, { children: [
+    menu,
+    /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+      MenuItem,
+      {
+        icon: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_lu3.LuLogOut, { 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_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 })
+    ] }),
+    /* @__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: "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 })
+        }
+      ) }),
+      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(DropdownMenuContent, { side: "top", align: "end", children: items })
+    ] })
+  ] });
+}
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
-  AppSidebar
+  AppSidebar,
+  NavTabs,
+  SidebarSeparator,
+  SidebarUserCard
 });
 //# sourceMappingURL=sidebar.cjs.map