@platned/ui 0.3.0 → 0.6.0

package/dist/sidebar.js

@@ -1,29 +1,134 @@
 // src/sidebar/index.tsx
-import { useEffect, useRef, useState } from "react";
 import { NavLink as NavLink2 } from "react-router-dom";
-import clsx4 from "clsx";
-import {
-  LuBell,
-  LuBuilding,
-  LuChevronLeft,
-  LuChevronRight,
-  LuClipboardList,
-  LuEllipsisVertical,
-  LuFileText,
-  LuGlobe,
-  LuLayers,
-  LuLayoutGrid,
-  LuLogOut,
-  LuRss,
-  LuServer,
-  LuSettings,
-  LuUsers
-} from "react-icons/lu";
+import { LuChevronLeft, LuChevronRight, LuEllipsisVertical, LuLogOut } from "react-icons/lu";
 
-// src/components/avatar/avatar.tsx
+// src/lib/slot.tsx
+import {
+  cloneElement,
+  forwardRef,
+  isValidElement
+} from "react";
 import clsx from "clsx";
+var Slot = forwardRef(function Slot2({ children, wrapChildren, ...slotProps }, forwardedRef) {
+  if (!isValidElement(children)) return null;
+  const child = children;
+  const merged = {
+    ...mergeProps(slotProps, child.props),
+    ref: composeRefs(forwardedRef, getElementRef(child))
+  };
+  return wrapChildren ? cloneElement(child, merged, wrapChildren(child.props.children)) : 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] = clsx(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
+import { createContext, useContext } from "react";
 import { jsx } from "react/jsx-runtime";
+var ControlSizeContext = createContext(null);
+function useControlSize(explicit) {
+  const inherited = useContext(ControlSizeContext);
+  return explicit ?? inherited ?? "md";
+}
+
+// src/components/forms/icon-button.tsx
+import { forwardRef as forwardRef2 } from "react";
+import clsx2 from "clsx";
+import { jsx as jsx2 } from "react/jsx-runtime";
+var variantStyles = {
+  primary: clsx2(
+    "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: clsx2(
+    "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: clsx2(
+    "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 = forwardRef2(function IconButton2({ variant = "primary", size: sizeProp, asChild = false, type, children, className, ...props }, ref) {
+  const size2 = useControlSize(sizeProp);
+  const rootProps = {
+    className: clsx2(
+      "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__ */ jsx2(Slot, { ref, ...rootProps, children });
+  }
+  return /* @__PURE__ */ jsx2(
+    "button",
+    {
+      ref,
+      type: type ?? "button",
+      ...rootProps,
+      children
+    }
+  );
+});
+
+// src/components/avatar/avatar.tsx
+import clsx3 from "clsx";
+import { jsx as jsx3 } from "react/jsx-runtime";
+var sizeStyles2 = {
   lg: "size-10",
   md: "size-8",
   sm: "size-6"
@@ -33,20 +138,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 = clsx(
+  const { size: size2 = "lg", shape = "circle", className } = props;
+  const base = clsx3(
     "shrink-0 overflow-hidden",
-    sizeStyles[size],
-    getShapeClass(shape, size),
+    sizeStyles2[size2],
+    getShapeClass(shape, size2),
     className
   );
   if (props.type === "image") {
-    return /* @__PURE__ */ jsx("div", { className: base, children: /* @__PURE__ */ jsx(
+    return /* @__PURE__ */ jsx3("div", { className: base, children: /* @__PURE__ */ jsx3(
       "img",
       {
         src: props.src,
@@ -55,19 +160,19 @@ function Avatar(props) {
       }
     ) });
   }
-  return /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx3(
     "div",
     {
-      className: clsx(base, "flex items-center justify-center"),
+      className: clsx3(base, "flex items-center justify-center"),
       style: {
         background: "linear-gradient(135deg, var(--color-graphic-blue) 30%, var(--color-graphic-red) 100%)"
       },
-      children: /* @__PURE__ */ jsx(
+      children: /* @__PURE__ */ jsx3(
         "span",
         {
-          className: clsx(
+          className: clsx3(
             "select-none leading-none text-brand-on-brand",
-            initialTextStyles[size]
+            initialTextStyles[size2]
           ),
           children: props.initial.charAt(0).toUpperCase()
         }
@@ -76,233 +181,1327 @@ function Avatar(props) {
   );
 }
 
-// src/components/chrome/nav-item.tsx
-import clsx2 from "clsx";
-import { jsx as jsx2, jsxs } from "react/jsx-runtime";
-var SIZE = {
-  sm: { box: "h-9 gap-2 rounded-lg px-2.5 py-1.5", label: "text-body-xs" },
-  md: { box: "h-11 gap-3 rounded-xl px-3.5 py-2.5", label: "text-body-sm" }
+// 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({
+  value,
+  defaultValue,
+  onChange
+}) {
+  const [internal, setInternal] = useState(defaultValue);
+  const isControlled = value !== void 0;
+  const current = isControlled ? value : internal;
+  const onChangeRef = useRef(onChange);
+  onChangeRef.current = onChange;
+  const currentRef = useRef(current);
+  currentRef.current = current;
+  const isControlledRef = useRef(isControlled);
+  isControlledRef.current = isControlled;
+  const setValue = 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];
+}
+
+// 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";
+
+// src/lib/scrollbar.ts
+import clsx5 from "clsx";
+var SCROLLBAR_CLASSES = clsx5(
+  // 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 = clsx6(OVERLAY_PANEL, "min-w-[168px]");
+var OVERLAY_PANEL_SCROLL = clsx6(
+  "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 NavItem({
-  icon,
-  label,
-  isActive = false,
-  indicator = false,
-  collapsed = false,
-  size = "md",
-  className
+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 s = SIZE[size];
-  return /* @__PURE__ */ jsxs(
-    "span",
-    {
-      className: clsx2(
-        "relative flex w-full items-center transition-colors",
-        s.box,
-        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__ */ jsx2("span", { className: "shrink-0 [&_svg]:size-4", children: icon }),
-        !collapsed && /* @__PURE__ */ jsx2("span", { className: clsx2("min-w-0 flex-1 truncate font-regular leading-snug", s.label), children: label }),
-        indicator && /* @__PURE__ */ jsx2("span", { className: "absolute -right-px -top-px size-2 rounded-full bg-danger" })
-      ]
+  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]);
 }
 
-// src/sidebar/nav-tabs.tsx
-import { NavLink } from "react-router-dom";
-import clsx3 from "clsx";
-import { jsx as jsx3 } from "react/jsx-runtime";
-function NavTabs({ items, className }) {
-  return /* @__PURE__ */ jsx3("div", { className: clsx3("flex gap-6 overflow-x-auto border-b border-default", className), children: items.map((tab) => /* @__PURE__ */ jsx3(
-    NavLink,
-    {
-      to: tab.to,
-      end: tab.end,
-      className: ({ isActive }) => clsx3(
-        "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
+// src/components/overlays/portal.tsx
+import { useEffect as useEffect4, useState as useState4 } 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);
+}
+
+// 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";
+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 = 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;
+      }
+      timer.current = setTimeout(() => setOpen(next), delay);
     },
-    tab.to
-  )) });
+    [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",
+      {
+        ref: refs.setFloating,
+        id: tooltipId,
+        role: "tooltip",
+        style: floatingStyles,
+        className: clsx7(
+          "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 })
+        ]
+      }
+    ) })
+  ] });
 }
 
-// src/sidebar/index.tsx
-import { Fragment, jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
-var NAV_ICON = "size-4";
-function SidebarLogo({ collapsed }) {
+// src/components/overlays/menu-core.tsx
+import {
+  createContext as createContext2,
+  useCallback as useCallback4,
+  useContext as useContext2,
+  useId as useId2,
+  useMemo,
+  useRef as useRef7
+} 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;
+}
+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)
+  });
+  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?.();
+  };
   return /* @__PURE__ */ jsxs2(
     "div",
     {
-      className: clsx4(
-        "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: 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: [
-        /* @__PURE__ */ jsx4("div", { className: "flex shrink-0 size-10 items-center justify-center rounded-xl bg-brand-hover overflow-hidden", children: /* @__PURE__ */ jsxs2("div", { className: "grid grid-cols-2 gap-[3px]", children: [
-          /* @__PURE__ */ jsx4("div", { className: "size-2 rounded-[2px] bg-white" }),
-          /* @__PURE__ */ jsx4("div", { className: "size-2 rounded-[2px] bg-white/50" }),
-          /* @__PURE__ */ jsx4("div", { className: "size-2 rounded-[2px] bg-white/50" }),
-          /* @__PURE__ */ jsx4("div", { className: "size-2 rounded-[2px] bg-white" })
-        ] }) }),
-        !collapsed && /* @__PURE__ */ jsx4("span", { className: "text-heading font-semibold text-default tracking-tight whitespace-nowrap", children: "SCIC" })
+        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 })
       ]
     }
   );
 }
-function NavLinkItem({ to, icon, label, indicator, collapsed, end }) {
-  return /* @__PURE__ */ jsx4(NavLink2, { to, end, className: "block w-full no-underline", children: ({ isActive }) => /* @__PURE__ */ jsx4(
-    NavItem,
+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";
+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(() => {
+    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__ */ jsx6(
+    "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: clsx9(
+        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
+import {
+  createContext as createContext3,
+  useContext as useContext3,
+  useEffect as useEffect7,
+  useMemo as useMemo2,
+  useRef as useRef9,
+  useState as useState7
+} 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>");
+  return value;
 }
-function UserCard({ collapsed, name, role, onLogout }) {
-  const [menuOpen, setMenuOpen] = useState(false);
-  const menuRef = useRef(null);
-  const initial = name.trim().charAt(0);
-  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] = useState7(null);
+  const anchor = useMemo2(() => ({ triggerNode, setTriggerNode }), [triggerNode]);
+  return /* @__PURE__ */ jsx7(MenuContext.Provider, { value: menu, children: /* @__PURE__ */ jsx7(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__ */ jsxs2(
-    "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__ */ jsx7(Slot, { ref: composeRefs(anchor.setTriggerNode), ...triggerProps, children });
+  }
+  return /* @__PURE__ */ jsx7(
+    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__ */ jsx4(LuLogOut, { className: "size-3.5", "aria-hidden": true }),
-        "Sign out"
-      ]
+      ref: composeRefs(anchor.setTriggerNode),
+      variant: "neutral",
+      size: "sm",
+      "aria-label": label,
+      ...triggerProps,
+      children: children ?? /* @__PURE__ */ jsx7(LuEllipsis, { className: "size-4", "aria-hidden": true })
     }
   );
-  return /* @__PURE__ */ jsx4(
+}
+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",
     {
-      className: clsx4(
-        "flex shrink-0 items-center p-4",
-        collapsed ? "justify-center" : "gap-2.5"
+      ref: composeRefs(
+        panelRef,
+        (node) => setPanelNode(node),
+        refs.setFloating
       ),
-      children: collapsed ? /* @__PURE__ */ jsxs2("div", { className: "relative", ref: menuRef, children: [
-        /* @__PURE__ */ jsx4(
-          "button",
-          {
-            type: "button",
-            "aria-label": "User options",
-            "aria-haspopup": "menu",
-            "aria-expanded": menuOpen,
-            onClick: () => setMenuOpen((v) => !v),
-            className: "rounded-full",
-            children: /* @__PURE__ */ jsx4(Avatar, { initial, size: "md", shape: "circle" })
-          }
-        ),
-        menuOpen && /* @__PURE__ */ jsx4("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__ */ jsxs2(Fragment, { children: [
-        /* @__PURE__ */ jsx4(Avatar, { initial, size: "md", shape: "circle" }),
-        /* @__PURE__ */ jsxs2("div", { className: "flex flex-1 min-w-0 flex-col gap-0.5", children: [
-          /* @__PURE__ */ jsx4("span", { className: "truncate text-body-sm font-semibold text-default leading-snug", children: name }),
-          /* @__PURE__ */ jsx4("span", { className: "truncate text-body-tiny font-regular text-default-secondary leading-none", children: role })
-        ] }),
-        /* @__PURE__ */ jsxs2("div", { className: "relative shrink-0", ref: menuRef, children: [
-          /* @__PURE__ */ jsx4(
-            "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__ */ jsx4(LuEllipsisVertical, { className: "size-4", "aria-hidden": true })
-            }
-          ),
-          menuOpen && /* @__PURE__ */ jsx4("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: clsx10("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
+import clsx11 from "clsx";
+import { Fragment as Fragment2, jsx as jsx8, 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" }
+};
+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: clsx11("border border-transparent", STATE.active),
+    inactive: clsx11("border border-default bg-default text-default-secondary", STATE.hover)
+  },
+  plain: {
+    active: STATE.active,
+    inactive: clsx11("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: clsx11(
+      "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 ? clsx11("justify-center", s.square) : "w-full",
+      isActive ? v.active : v.inactive,
+      className
+    ),
+    ...rest
+  };
+  const content = /* @__PURE__ */ jsxs3(Fragment2, { children: [
+    icon != null ? /* @__PURE__ */ jsx8("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(
+        "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__ */ jsx8(
+      "span",
+      {
+        className: clsx11(
+          "min-w-0 truncate font-regular leading-snug",
+          s.label,
+          collapsed ? "sr-only" : "flex-1"
+        ),
+        children: label
+      }
+    ),
+    indicator && /* @__PURE__ */ jsx8(
+      "span",
+      {
+        role: "status",
+        "aria-label": "Unread",
+        className: "absolute -right-px -top-px size-2 rounded-full bg-danger"
+      }
+    )
+  ] });
+  if (asChild) {
+    return /* @__PURE__ */ jsx8(Slot, { wrapChildren: () => content, ...rootProps, children });
+  }
+  return /* @__PURE__ */ jsx8("span", { ...rootProps, children: content });
+}
+
+// src/sidebar/nav-tabs.tsx
+import { NavLink } from "react-router-dom";
+import clsx12 from "clsx";
+import { jsx as jsx9 } from "react/jsx-runtime";
+function NavTabs({ items, className }) {
+  return (
+    // The links inside are the tab stops.
+    /* @__PURE__ */ jsx9(
+      "div",
+      {
+        className: clsx12(
+          "flex gap-6 overflow-x-auto border-b border-default",
+          SCROLLBAR_CLASSES,
+          className
+        ),
+        children: items.map((tab) => /* @__PURE__ */ jsx9(
+          NavLink,
+          {
+            to: tab.to,
+            end: tab.end,
+            className: ({ isActive }) => clsx12(
+              "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__ */ jsxs2(
+
+// src/sidebar/index.tsx
+import { Fragment as Fragment3, jsx as jsx10, jsxs as jsxs4 } from "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__ */ jsxs4(
     "aside",
     {
-      className: clsx4(
-        "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__ */ jsx4(
+        collapsible && onToggle && /* @__PURE__ */ jsx10(
           "button",
           {
             type: "button",
             "aria-label": collapsed ? "Expand sidebar" : "Collapse sidebar",
+            "aria-expanded": !collapsed,
             onClick: onToggle,
-            className: clsx4(
-              "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__ */ jsx4(LuChevronRight, { className: "size-3", strokeWidth: 2.5, "aria-hidden": true }) : /* @__PURE__ */ jsx4(LuChevronLeft, { className: "size-3", strokeWidth: 2.5, "aria-hidden": true })
+            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 })
           }
         ),
-        /* @__PURE__ */ jsxs2("div", { className: "flex flex-1 min-h-0 flex-col gap-1", children: [
-          /* @__PURE__ */ jsx4(SidebarLogo, { collapsed }),
-          /* @__PURE__ */ jsxs2("nav", { className: "flex flex-col gap-3 overflow-y-auto px-4 pt-2 pb-3", children: [
-            /* @__PURE__ */ jsx4(NavLinkItem, { to: "/dashboard", icon: /* @__PURE__ */ jsx4(LuLayoutGrid, { className: NAV_ICON, "aria-hidden": true }), label: "Dashboard", collapsed, end: true }),
-            /* @__PURE__ */ jsx4(NavLinkItem, { to: "/entities", icon: /* @__PURE__ */ jsx4(LuLayers, { className: NAV_ICON, "aria-hidden": true }), label: "Entities", collapsed, indicator: true }),
-            /* @__PURE__ */ jsx4(NavLinkItem, { to: "/suppliers", icon: /* @__PURE__ */ jsx4(LuBuilding, { className: NAV_ICON, "aria-hidden": true }), label: "Suppliers", collapsed }),
-            /* @__PURE__ */ jsx4(NavLinkItem, { to: "/customers", icon: /* @__PURE__ */ jsx4(LuUsers, { className: NAV_ICON, "aria-hidden": true }), label: "Customers", collapsed }),
-            /* @__PURE__ */ jsx4(NavLinkItem, { to: "/sources", icon: /* @__PURE__ */ jsx4(LuFileText, { className: NAV_ICON, "aria-hidden": true }), label: "Sources", collapsed }),
-            /* @__PURE__ */ jsx4(NavLinkItem, { to: "/articles", icon: /* @__PURE__ */ jsx4(LuRss, { className: NAV_ICON, "aria-hidden": true }), label: "Intelligence", collapsed }),
-            /* @__PURE__ */ jsx4(NavLinkItem, { to: "/alerts", icon: /* @__PURE__ */ jsx4(LuBell, { className: NAV_ICON, "aria-hidden": true }), label: "Alerts", collapsed }),
-            /* @__PURE__ */ jsx4(NavLinkItem, { to: "/website-scraper", icon: /* @__PURE__ */ jsx4(LuGlobe, { className: NAV_ICON, "aria-hidden": true }), label: "Website Intel", collapsed }),
-            /* @__PURE__ */ jsx4(NavLinkItem, { to: "/review", icon: /* @__PURE__ */ jsx4(LuClipboardList, { className: NAV_ICON, "aria-hidden": true }), label: "Review queue", collapsed }),
-            isAdmin && /* @__PURE__ */ jsx4(NavLinkItem, { to: "/queues", icon: /* @__PURE__ */ jsx4(LuServer, { className: NAV_ICON, "aria-hidden": true }), label: "Queues", collapsed })
-          ] })
-        ] }),
-        /* @__PURE__ */ jsxs2("div", { className: "flex flex-col", children: [
-          isAdmin && /* @__PURE__ */ jsx4("div", { className: "px-4 pb-2", children: /* @__PURE__ */ jsx4(
-            NavLinkItem,
+        brand && /* @__PURE__ */ jsx10(
+          "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__ */ 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(
+          SidebarGroup,
+          {
+            group,
+            showSeparator: groupIndex > 0,
+            collapsed,
+            size: size2,
+            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(
+            SidebarLink,
             {
-              to: "/settings",
-              icon: /* @__PURE__ */ jsx4(LuSettings, { className: NAV_ICON, "aria-hidden": true }),
-              label: "Settings",
-              collapsed
-            }
-          ) }),
-          /* @__PURE__ */ jsx4("div", { className: "border-t border-default", children: /* @__PURE__ */ jsx4(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__ */ jsxs4("div", { className: "flex flex-col gap-3", children: [
+      showSeparator && /* @__PURE__ */ jsx10(SidebarSeparator, {}),
+      group.title && /* @__PURE__ */ jsx10(
+        "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__ */ jsx10(
+        SidebarLink,
+        {
+          item,
+          collapsed,
+          size: size2,
+          variant
+        },
+        item.to
+      ))
+    ] })
+  );
+}
+function SidebarLink({
+  item,
+  collapsed,
+  size: size2,
+  variant
+}) {
+  const link = /* @__PURE__ */ jsx10(
+    NavLink2,
+    {
+      to: item.to,
+      end: item.end,
+      className: cn("block w-full no-underline", collapsed && "flex justify-center"),
+      children: ({ isActive }) => /* @__PURE__ */ jsx10(
+        NavItem,
+        {
+          icon: item.icon,
+          label: item.label,
+          isActive,
+          indicator: item.indicator,
+          collapsed,
+          size: size2,
+          variant
+        }
+      )
+    }
+  );
+  if (!collapsed) return link;
+  return /* @__PURE__ */ jsx10(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 });
+}
+function SidebarUserCard({
+  name,
+  role,
+  onLogout,
+  collapsed = false,
+  menu,
+  className
+}) {
+  const initial = name.trim().charAt(0);
+  const items = /* @__PURE__ */ jsxs4(Fragment3, { children: [
+    menu,
+    /* @__PURE__ */ jsx10(
+      MenuItem,
+      {
+        icon: /* @__PURE__ */ jsx10(LuLogOut, { 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__ */ 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__ */ 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__ */ jsxs4(DropdownMenu, { children: [
+      /* @__PURE__ */ jsx10(DropdownMenuTrigger, { asChild: true, label: "User options", children: /* @__PURE__ */ jsx10(
+        "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 })
+        }
+      ) }),
+      /* @__PURE__ */ jsx10(DropdownMenuContent, { side: "top", align: "end", children: items })
+    ] })
+  ] });
+}
 export {
   AppSidebar,
-  NavTabs
+  NavTabs,
+  SidebarSeparator,
+  SidebarUserCard
 };
 //# sourceMappingURL=sidebar.js.map