@meetreeve/ui 0.2.0 → 0.5.2

package/dist/index.mjs

@@ -1,7 +1,6 @@
 "use client";
 
 // src/brand-glyph.tsx
-import Image from "next/image";
 import { useState } from "react";
 
 // src/lib/cn.ts
@@ -24,12 +23,18 @@ function cn(...inputs) {
 }
 
 // src/lib/initials.ts
-function initials(name) {
-  if (!name) return "\xB7\xB7";
-  const parts = name.trim().split(/\s+/).slice(0, 2);
-  return parts.map((p) => p[0]?.toUpperCase() ?? "").join("") || "\xB7\xB7";
+function firstInitial(name) {
+  const trimmed = (name ?? "").trim();
+  return trimmed ? trimmed[0].toUpperCase() : "?";
 }
 
+// src/lib/lockup.ts
+var MARK_CAP_RATIO = 1.08;
+var MONOGRAM_TEXT_LG = "text-[15px]";
+var LOCKUP_GAP = "gap-2";
+var LOCKUP_ROW = "flex items-baseline";
+var GLYPH_CANVAS_FILL = 0.65;
+
 // src/lib/monogram.ts
 var MONOGRAM_COLORS = [
   "#7c3aed",
@@ -56,7 +61,8 @@ function monogramColor(seed) {
 }
 
 // src/brand-glyph.tsx
-import { jsx } from "react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
+var REEVE_ACCENT = "#FF6B2B";
 function faviconUrl(domain) {
   if (!domain) return null;
   const host = domain.trim().toLowerCase();
@@ -77,21 +83,26 @@ function BrandGlyph({ brand, size = "sm", subtle = false, className }) {
       "span",
       {
         className: cn(
-          "flex shrink-0 items-center justify-center overflow-hidden rounded",
+          // `self-center` opts image glyphs out of the lockup's baseline
+          // alignment (DEV-5139): an image box has no text baseline, so
+          // flexbox would seat its BOTTOM edge on the wordmark baseline and
+          // shove the icon upward. Centering preserves the pre-DEV-5139 look.
+          "flex shrink-0 items-center justify-center self-center overflow-hidden rounded",
           // Tint needs a dark-mode counterpart or it vanishes on dark backgrounds.
           subtle ? "bg-black/5 dark:bg-white/10" : "bg-black/10 dark:bg-white/15",
           box,
           className
         ),
         children: /* @__PURE__ */ jsx(
-          Image,
+          "img",
           {
             src,
             alt: "",
             width: dim,
             height: dim,
+            loading: "lazy",
+            decoding: "async",
             "data-testid": "brand-image",
-            unoptimized: true,
             onError: () => setFailed((prev) => new Set(prev).add(src)),
             className: cn(img, "rounded-sm object-contain")
           }
@@ -99,44 +110,51 @@ function BrandGlyph({ brand, size = "sm", subtle = false, className }) {
       }
     );
   }
-  return /* @__PURE__ */ jsx(
+  const letter = firstInitial(brand.name);
+  const hasRealLetter = letter !== "?";
+  return /* @__PURE__ */ jsxs(
     "span",
     {
       "aria-hidden": true,
       "data-testid": "brand-monogram",
       className: cn(
-        "flex shrink-0 select-none items-center justify-center rounded font-semibold uppercase text-white",
-        size === "lg" ? "text-[11px]" : "text-[9px]",
+        "flex shrink-0 select-none items-baseline justify-center font-semibold uppercase",
+        // DEV-5139 rule 2: at "lg" the letter runs 15px = the text-sm
+        // wordmark (14px) × MARK_CAP_RATIO (1.08) — a lone round glyph at
+        // exact parity optically reads small. "sm" has no wordmark partner
+        // in its surfaces; unchanged pending a lockup audit there.
+        size === "lg" ? MONOGRAM_TEXT_LG : "text-[11px]",
         box,
         className
       ),
-      style: { backgroundColor: brand.color || monogramColor(brand.name || "?") },
-      children: initials(brand.name)
+      style: { color: brand.color || monogramColor(brand.name || "?") },
+      children: [
+        letter,
+        hasRealLetter && /* @__PURE__ */ jsx("span", { "data-testid": "brand-monogram-dot", style: { color: brand.accentColor || REEVE_ACCENT }, children: "." })
+      ]
     }
   );
 }
 
 // src/responsive-header.tsx
-import { useEffect, useId, useRef, useState as useState2 } from "react";
+import { useEffect as useEffect2, useId, useRef, useState as useState3 } from "react";
 import { Menu, X } from "lucide-react";
 
-// src/lib/use-media-query.ts
-import { useCallback, useSyncExternalStore } from "react";
-function useMediaQuery(query) {
-  const subscribe = useCallback(
-    (onChange) => {
-      if (typeof window === "undefined" || typeof window.matchMedia !== "function") {
-        return () => {
-        };
-      }
-      const mql = window.matchMedia(query);
-      mql.addEventListener("change", onChange);
-      return () => mql.removeEventListener("change", onChange);
-    },
-    [query]
-  );
-  const getSnapshot = () => typeof window !== "undefined" && typeof window.matchMedia === "function" ? window.matchMedia(query).matches : false;
-  return useSyncExternalStore(subscribe, getSnapshot, () => false);
+// src/lib/use-container-width-at-least.ts
+import { useEffect, useState as useState2 } from "react";
+function useContainerWidthAtLeast(ref, px) {
+  const [atLeast, setAtLeast] = useState2(false);
+  useEffect(() => {
+    const el = ref.current;
+    if (!el || typeof ResizeObserver === "undefined") return;
+    const ro = new ResizeObserver(([entry]) => {
+      if (!entry) return;
+      setAtLeast(entry.contentRect.width >= px);
+    });
+    ro.observe(el);
+    return () => ro.disconnect();
+  }, [ref, px]);
+  return atLeast;
 }
 
 // src/tokens.ts
@@ -156,24 +174,30 @@ var BREAKPOINTS = {
   /** Tailwind `md` — the header switches to its full desktop layout at/above this. */
   md: 768
 };
+var TOUCH_TARGET_STYLE = {
+  minWidth: MIN_SIZES.touchTarget,
+  minHeight: MIN_SIZES.touchTarget
+};
 
 // src/responsive-header.tsx
-import { Fragment, jsx as jsx2, jsxs } from "react/jsx-runtime";
+import { Fragment, jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
 function MenuIcon({ open }) {
   return open ? /* @__PURE__ */ jsx2(X, { className: "h-5 w-5", "aria-hidden": "true" }) : /* @__PURE__ */ jsx2(Menu, { className: "h-5 w-5", "aria-hidden": "true" });
 }
 function SecondaryControls({
   nav,
   auth,
-  themeToggle
+  themeToggle,
+  linkComponent
 }) {
-  return /* @__PURE__ */ jsxs(Fragment, { children: [
+  const LinkEl = linkComponent ?? "a";
+  return /* @__PURE__ */ jsxs2(Fragment, { children: [
     nav?.map(
       (item) => (
         // A link navigates; an action-only item (no href) is a button — never an
         // <a href="#"> that scroll-jumps and pushes a history entry.
         item.href ? /* @__PURE__ */ jsx2(
-          "a",
+          LinkEl,
           {
             href: item.href,
             onClick: item.onSelect,
@@ -181,15 +205,22 @@ function SecondaryControls({
             children: item.label
           },
           item.label
-        ) : /* @__PURE__ */ jsx2(
-          "button",
-          {
-            type: "button",
-            onClick: item.onSelect,
-            className: "text-left text-sm font-medium text-foreground/80 hover:text-foreground",
-            children: item.label
-          },
-          item.label
+        ) : (
+          // A real <button> secondary control — MIN_SIZES.control is the
+          // token's exact stated purpose ("Generic minimum width/height for
+          // a secondary control (button, select)"), previously defined but
+          // unused anywhere in this package (DEV-4249).
+          /* @__PURE__ */ jsx2(
+            "button",
+            {
+              type: "button",
+              onClick: item.onSelect,
+              style: { minWidth: MIN_SIZES.control, minHeight: MIN_SIZES.control },
+              className: "flex items-center justify-start text-left text-sm font-medium text-foreground/80 hover:text-foreground",
+              children: item.label
+            },
+            item.label
+          )
         )
       )
     ),
@@ -201,20 +232,24 @@ function ResponsiveHeader({
   brand,
   search,
   nav,
+  brandHref,
+  linkComponent,
   auth,
   themeToggle,
   menuLabel = "Menu",
   className
 }) {
-  const isDesktop = useMediaQuery(`(min-width: ${BREAKPOINTS.md}px)`);
-  const [open, setOpen] = useState2(false);
+  const LinkEl = linkComponent ?? "a";
+  const [open, setOpen] = useState3(false);
   const panelId = useId();
+  const headerRef = useRef(null);
   const buttonRef = useRef(null);
   const panelRef = useRef(null);
-  useEffect(() => {
-    if (isDesktop) setOpen(false);
-  }, [isDesktop]);
-  useEffect(() => {
+  const containerAtOrAboveMd = useContainerWidthAtLeast(headerRef, BREAKPOINTS.md);
+  useEffect2(() => {
+    if (containerAtOrAboveMd) setOpen(false);
+  }, [containerAtOrAboveMd]);
+  useEffect2(() => {
     if (!open) return;
     const onKey = (e) => {
       if (e.key === "Escape") {
@@ -236,27 +271,41 @@ function ResponsiveHeader({
     };
   }, [open]);
   const hasSecondary = Boolean(nav && nav.length > 0 || auth || themeToggle);
-  return /* @__PURE__ */ jsxs(
+  const brandLockup = /* @__PURE__ */ jsxs2("span", { "data-testid": "header-lockup", className: cn(LOCKUP_ROW, LOCKUP_GAP), children: [
+    /* @__PURE__ */ jsx2(BrandGlyph, { brand, size: "lg" }),
+    /* @__PURE__ */ jsx2(
+      "span",
+      {
+        "data-testid": "header-wordmark",
+        className: "hidden truncate text-sm font-semibold text-foreground @min-[768px]:block",
+        style: { maxWidth: MIN_SIZES.wordmarkMaxWidth },
+        children: brand.name
+      }
+    )
+  ] });
+  return /* @__PURE__ */ jsxs2(
     "header",
     {
+      ref: headerRef,
       "data-testid": "responsive-header",
       className: cn(
-        "flex w-full items-center gap-3 border-b border-border bg-background px-4 py-2",
+        // `@container` makes this header itself the query context, so the
+        // variants below react to ITS width (e.g. a sidebar), not the viewport.
+        "@container flex w-full items-center gap-3 border-b border-border bg-background px-4 py-2",
         className
       ),
       children: [
-        /* @__PURE__ */ jsxs("div", { "data-testid": "header-brand", className: "flex shrink-0 items-center gap-2", children: [
-          /* @__PURE__ */ jsx2(BrandGlyph, { brand, size: "lg" }),
-          isDesktop && /* @__PURE__ */ jsx2(
-            "span",
-            {
-              "data-testid": "header-wordmark",
-              className: "truncate text-sm font-semibold text-foreground",
-              style: { maxWidth: MIN_SIZES.wordmarkMaxWidth },
-              children: brand.name
-            }
-          )
-        ] }),
+        brandHref ? /* @__PURE__ */ jsx2(
+          LinkEl,
+          {
+            href: brandHref,
+            "aria-label": brand.name || "Home",
+            "data-testid": "header-brand",
+            style: TOUCH_TARGET_STYLE,
+            className: "flex shrink-0 items-center",
+            children: brandLockup
+          }
+        ) : /* @__PURE__ */ jsx2("div", { "data-testid": "header-brand", className: "flex shrink-0 items-center", children: brandLockup }),
         /* @__PURE__ */ jsx2(
           "div",
           {
@@ -266,40 +315,91 @@ function ResponsiveHeader({
             children: search
           }
         ),
-        hasSecondary && (isDesktop ? /* @__PURE__ */ jsx2("nav", { "data-testid": "header-actions", className: "flex shrink-0 items-center gap-3", children: /* @__PURE__ */ jsx2(SecondaryControls, { nav, auth, themeToggle }) }) : /* @__PURE__ */ jsxs("div", { className: "relative shrink-0", children: [
+        hasSecondary && /* @__PURE__ */ jsxs2(Fragment, { children: [
           /* @__PURE__ */ jsx2(
-            "button",
+            "nav",
             {
-              ref: buttonRef,
-              type: "button",
-              "data-testid": "header-menu-button",
-              "aria-label": menuLabel,
-              "aria-expanded": open,
-              "aria-controls": panelId,
-              onClick: () => setOpen((v) => !v),
-              className: "flex items-center justify-center rounded-md border border-border text-foreground",
-              style: { minWidth: MIN_SIZES.touchTarget, minHeight: MIN_SIZES.touchTarget },
-              children: /* @__PURE__ */ jsx2(MenuIcon, { open })
+              "data-testid": "header-actions",
+              className: "hidden shrink-0 items-center gap-3 @min-[768px]:flex",
+              children: /* @__PURE__ */ jsx2(
+                SecondaryControls,
+                {
+                  nav,
+                  auth,
+                  themeToggle,
+                  linkComponent
+                }
+              )
             }
           ),
-          open && /* @__PURE__ */ jsx2(
-            "div",
-            {
-              ref: panelRef,
-              id: panelId,
-              "data-testid": "header-menu-panel",
-              className: "absolute right-0 top-full z-50 mt-2 flex min-w-[12rem] flex-col gap-3 rounded-md border border-border bg-background p-3 shadow-lg",
-              children: /* @__PURE__ */ jsx2(SecondaryControls, { nav, auth, themeToggle })
-            }
-          )
-        ] }))
+          /* @__PURE__ */ jsxs2("div", { className: "relative shrink-0 @min-[768px]:hidden", children: [
+            /* @__PURE__ */ jsx2(
+              "button",
+              {
+                ref: buttonRef,
+                type: "button",
+                "data-testid": "header-menu-button",
+                "aria-label": menuLabel,
+                "aria-expanded": open,
+                "aria-controls": panelId,
+                onClick: () => setOpen((v) => !v),
+                className: "flex items-center justify-center rounded-md border border-border text-foreground",
+                style: TOUCH_TARGET_STYLE,
+                children: /* @__PURE__ */ jsx2(MenuIcon, { open })
+              }
+            ),
+            open && /* @__PURE__ */ jsx2(
+              "div",
+              {
+                ref: panelRef,
+                id: panelId,
+                "data-testid": "header-menu-panel",
+                className: "absolute right-0 top-full z-50 mt-2 flex min-w-[12rem] flex-col gap-3 rounded-md border border-border bg-background p-3 shadow-lg",
+                children: /* @__PURE__ */ jsx2(
+                  SecondaryControls,
+                  {
+                    nav,
+                    auth,
+                    themeToggle,
+                    linkComponent
+                  }
+                )
+              }
+            )
+          ] })
+        ] })
       ]
     }
   );
 }
 
+// src/lib/use-media-query.ts
+import { useCallback, useSyncExternalStore } from "react";
+function useMediaQuery(query) {
+  const subscribe = useCallback(
+    (onChange) => {
+      if (typeof window === "undefined" || typeof window.matchMedia !== "function") {
+        return () => {
+        };
+      }
+      const mql = window.matchMedia(query);
+      mql.addEventListener("change", onChange);
+      return () => mql.removeEventListener("change", onChange);
+    },
+    [query]
+  );
+  const getSnapshot = () => typeof window !== "undefined" && typeof window.matchMedia === "function" ? window.matchMedia(query).matches : false;
+  return useSyncExternalStore(subscribe, getSnapshot, () => false);
+}
+
+// src/use-responsive-placeholder.ts
+function useResponsivePlaceholder(desktop, mobile) {
+  const isDesktop = useMediaQuery(`(min-width: ${BREAKPOINTS.md}px)`);
+  return isDesktop ? desktop : mobile ?? desktop;
+}
+
 // src/app-sidebar.tsx
-import { useEffect as useEffect4, useId as useId3, useMemo, useRef as useRef4, useState as useState5 } from "react";
+import { useEffect as useEffect5, useId as useId3, useMemo, useRef as useRef4, useState as useState6 } from "react";
 import { Menu as Menu2, X as X2 } from "lucide-react";
 
 // src/lib/resolve-icon.ts
@@ -320,7 +420,7 @@ function resolveIcon(name) {
 }
 
 // src/lib/use-dismissable-disclosure.ts
-import { useEffect as useEffect2 } from "react";
+import { useEffect as useEffect3 } from "react";
 function useDismissableDisclosure({
   open,
   onClose,
@@ -328,10 +428,10 @@ function useDismissableDisclosure({
   triggerRef,
   initialFocusRef
 }) {
-  useEffect2(() => {
+  useEffect3(() => {
     if (open) initialFocusRef?.current?.focus();
   }, [open]);
-  useEffect2(() => {
+  useEffect3(() => {
     if (!open) return;
     const onKey = (e) => {
       if (e.key === "Escape") {
@@ -534,13 +634,13 @@ function resolveLadder(raw, registry, groupOrder) {
 }
 
 // src/ladder/use-ladder-rung.ts
-import { useLayoutEffect, useRef as useRef2, useState as useState3 } from "react";
+import { useLayoutEffect, useRef as useRef2, useState as useState4 } from "react";
 var DEFAULT_ROW_HEIGHT = 36;
 var DEFAULT_HYSTERESIS_ROWS = 1;
 function useLadderRung(ladder, containerRef, options = {}) {
   const rowHeight = options.rowHeight ?? DEFAULT_ROW_HEIGHT;
   const hysteresisRows = options.hysteresisRows ?? DEFAULT_HYSTERESIS_ROWS;
-  const [rungIndex, setRungIndex] = useState3(0);
+  const [rungIndex, setRungIndex] = useState4(0);
   const rungIndexRef = useRef2(0);
   const ladderSignature = `${ladder.version}:${ladder.rungs.map((r) => r.rows).join(",")}`;
   useLayoutEffect(() => {
@@ -579,13 +679,13 @@ function useLadderRung(ladder, containerRef, options = {}) {
 }
 
 // src/ladder/flyout.tsx
-import { useCallback as useCallback2, useEffect as useEffect3, useId as useId2, useLayoutEffect as useLayoutEffect2, useRef as useRef3, useState as useState4 } from "react";
-import { jsx as jsx3, jsxs as jsxs2 } from "react/jsx-runtime";
+import { useCallback as useCallback2, useEffect as useEffect4, useId as useId2, useLayoutEffect as useLayoutEffect2, useRef as useRef3, useState as useState5 } from "react";
+import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
 var PANEL_GAP = 4;
 function Flyout({ label, icon, active, children, className }) {
-  const [hoverOpen, setHoverOpen] = useState4(false);
-  const [clickOpen, setClickOpen] = useState4(false);
-  const [panelPosition, setPanelPosition] = useState4(null);
+  const [hoverOpen, setHoverOpen] = useState5(false);
+  const [clickOpen, setClickOpen] = useState5(false);
+  const [panelPosition, setPanelPosition] = useState5(null);
   const open = hoverOpen || clickOpen;
   const panelId = useId2();
   const triggerRef = useRef3(null);
@@ -600,7 +700,7 @@ function Flyout({ label, icon, active, children, className }) {
   useLayoutEffect2(() => {
     if (open) reposition();
   }, [open, reposition]);
-  useEffect3(() => {
+  useEffect4(() => {
     if (!open) return;
     window.addEventListener("resize", reposition);
     window.addEventListener("scroll", reposition, true);
@@ -618,10 +718,10 @@ function Flyout({ label, icon, active, children, className }) {
     panelRef,
     triggerRef
   });
-  useEffect3(() => {
+  useEffect4(() => {
     if (clickOpen && panelPosition) firstItemRef.current?.focus();
   }, [clickOpen, panelPosition]);
-  return /* @__PURE__ */ jsxs2(
+  return /* @__PURE__ */ jsxs3(
     "div",
     {
       "data-testid": "ladder-flyout",
@@ -629,7 +729,7 @@ function Flyout({ label, icon, active, children, className }) {
       onMouseEnter: () => setHoverOpen(true),
       onMouseLeave: () => setHoverOpen(false),
       children: [
-        /* @__PURE__ */ jsxs2(
+        /* @__PURE__ */ jsxs3(
           "button",
           {
             ref: triggerRef,
@@ -672,8 +772,9 @@ function Flyout({ label, icon, active, children, className }) {
                 ref: i === 0 ? firstItemRef : void 0,
                 href: child.href,
                 "aria-current": child.active ? "page" : void 0,
+                style: TOUCH_TARGET_STYLE,
                 className: cn(
-                  "truncate rounded-md px-3 py-1.5 text-sm transition-colors",
+                  "flex items-center truncate rounded-md px-3 py-1.5 text-sm transition-colors",
                   child.active ? "bg-primary/10 text-foreground" : "text-muted-foreground hover:bg-foreground/5 hover:text-foreground"
                 ),
                 children: child.label
@@ -688,7 +789,7 @@ function Flyout({ label, icon, active, children, className }) {
 }
 
 // src/app-sidebar.tsx
-import { Fragment as Fragment2, jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
 function isHrefActive(activePath, href) {
   return activePath === href || activePath.startsWith(`${href}/`);
 }
@@ -700,7 +801,7 @@ function NavLink({
   testId
 }) {
   const Icon = resolveIcon(icon);
-  return /* @__PURE__ */ jsxs3(
+  return /* @__PURE__ */ jsxs4(
     "a",
     {
       href,
@@ -736,7 +837,7 @@ function AppSidebar({
   className
 }) {
   const isDesktop = useMediaQuery(`(min-width: ${BREAKPOINTS.md}px)`);
-  const [mobileOpen, setMobileOpen] = useState5(false);
+  const [mobileOpen, setMobileOpen] = useState6(false);
   const containerRef = useRef4(null);
   const drawerId = useId3();
   const mobileTriggerRef = useRef4(null);
@@ -753,7 +854,7 @@ function AppSidebar({
   );
   const rung = useLadderRung(resolvedLadder, containerRef, ladderOptions);
   const rung0 = resolvedLadder.rungs[0];
-  useEffect4(() => {
+  useEffect5(() => {
     if (isDesktop) setMobileOpen(false);
   }, [isDesktop]);
   useDismissableDisclosure({
@@ -792,7 +893,7 @@ function AppSidebar({
     const active = children.some((c) => c.active);
     return /* @__PURE__ */ jsx4(Flyout, { label: item.label, icon: item.icon, active, children }, item.id);
   }
-  const brandBlock = brand && /* @__PURE__ */ jsxs3(
+  const brandBlock = brand && /* @__PURE__ */ jsxs4(
     "a",
     {
       href: brand.href,
@@ -817,7 +918,7 @@ function AppSidebar({
       }
     ) });
   }
-  return /* @__PURE__ */ jsxs3(Fragment2, { children: [
+  return /* @__PURE__ */ jsxs4(Fragment2, { children: [
     !isDesktop && /* @__PURE__ */ jsx4(
       "button",
       {
@@ -828,11 +929,12 @@ function AppSidebar({
         "aria-expanded": mobileOpen,
         "aria-controls": drawerId,
         onClick: () => setMobileOpen((v) => !v),
+        style: TOUCH_TARGET_STYLE,
         className: "flex items-center justify-center rounded-md border border-border p-2 text-foreground",
         children: mobileOpen ? /* @__PURE__ */ jsx4(X2, { className: "h-5 w-5", "aria-hidden": "true" }) : /* @__PURE__ */ jsx4(Menu2, { className: "h-5 w-5", "aria-hidden": "true" })
       }
     ),
-    !isDesktop && mobileOpen && /* @__PURE__ */ jsxs3("div", { className: "fixed inset-0 z-50", children: [
+    !isDesktop && mobileOpen && /* @__PURE__ */ jsxs4("div", { className: "fixed inset-0 z-50", children: [
       /* @__PURE__ */ jsx4(
         "div",
         {
@@ -842,7 +944,7 @@ function AppSidebar({
           onClick: () => setMobileOpen(false)
         }
       ),
-      /* @__PURE__ */ jsxs3(
+      /* @__PURE__ */ jsxs4(
         "div",
         {
           ref: mobileDrawerRef,
@@ -861,6 +963,7 @@ function AppSidebar({
                 "data-testid": "app-sidebar-mobile-close",
                 "aria-label": `Close ${menuLabel.toLowerCase()}`,
                 onClick: () => setMobileOpen(false),
+                style: TOUCH_TARGET_STYLE,
                 className: "flex items-center justify-center rounded-md p-2 text-foreground hover:bg-foreground/5",
                 children: /* @__PURE__ */ jsx4(X2, { className: "h-5 w-5", "aria-hidden": "true" })
               }
@@ -874,7 +977,7 @@ function AppSidebar({
         }
       )
     ] }),
-    /* @__PURE__ */ jsxs3(
+    /* @__PURE__ */ jsxs4(
       "aside",
       {
         "data-testid": "app-sidebar-desktop",
@@ -896,15 +999,197 @@ function AppSidebar({
     )
   ] });
 }
+
+// src/context-switcher.tsx
+import { ChevronDown, Check } from "lucide-react";
+
+// src/lib/group-by-org.ts
+function groupItemsByOrg(rows, get) {
+  const byOrg = /* @__PURE__ */ new Map();
+  for (const row of rows) {
+    const key = get.orgId(row) ?? "";
+    let group = byOrg.get(key);
+    if (!group) {
+      group = {
+        orgId: get.orgId(row) ?? null,
+        orgName: get.orgName(row) ?? null,
+        items: []
+      };
+      byOrg.set(key, group);
+    }
+    group.items.push(row);
+  }
+  const groups = [...byOrg.values()];
+  for (const g of groups) {
+    g.items.sort((a, b) => get.name(a).localeCompare(get.name(b)));
+  }
+  groups.sort((a, b) => (a.orgName ?? "").localeCompare(b.orgName ?? ""));
+  return groups;
+}
+
+// src/lib/dropdown-menu.tsx
+import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
+import { jsx as jsx5 } from "react/jsx-runtime";
+function DropdownMenu(props) {
+  return /* @__PURE__ */ jsx5(DropdownMenuPrimitive.Root, { "data-slot": "dropdown-menu", ...props });
+}
+function DropdownMenuTrigger(props) {
+  return /* @__PURE__ */ jsx5(DropdownMenuPrimitive.Trigger, { "data-slot": "dropdown-menu-trigger", ...props });
+}
+function DropdownMenuContent({
+  className,
+  sideOffset = 4,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx5(DropdownMenuPrimitive.Portal, { children: /* @__PURE__ */ jsx5(
+    DropdownMenuPrimitive.Content,
+    {
+      "data-slot": "dropdown-menu-content",
+      sideOffset,
+      className: cn(
+        "bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 max-h-(--radix-dropdown-menu-content-available-height) min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-md",
+        className
+      ),
+      ...props
+    }
+  ) });
+}
+function DropdownMenuItem({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx5(
+    DropdownMenuPrimitive.Item,
+    {
+      "data-slot": "dropdown-menu-item",
+      className: cn(
+        "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function DropdownMenuLabel({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx5(
+    DropdownMenuPrimitive.Label,
+    {
+      "data-slot": "dropdown-menu-label",
+      className: cn("px-2 py-1.5 text-sm font-medium", className),
+      ...props
+    }
+  );
+}
+
+// src/context-switcher.tsx
+import { jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
+function groupByOrg(items) {
+  return groupItemsByOrg(items, {
+    orgId: (it) => it.orgId,
+    orgName: (it) => it.orgName,
+    name: (it) => it.name
+  });
+}
+function toBrand(item) {
+  return {
+    name: item.name,
+    favicon: item.favicon,
+    logo: item.logo,
+    color: item.color,
+    accentColor: item.accentColor
+  };
+}
+function ContextSwitcher({
+  items,
+  activeRefId,
+  onSelect,
+  footer,
+  placeholder = "Select",
+  collapsed = false,
+  side = "bottom",
+  align = "start",
+  contentClassName
+}) {
+  const active = items.find((it) => it.refId === activeRefId) ?? null;
+  const groups = groupByOrg(items);
+  const showOrgHeaders = groups.length > 1;
+  return /* @__PURE__ */ jsxs5(DropdownMenu, { children: [
+    /* @__PURE__ */ jsx6(DropdownMenuTrigger, { asChild: true, children: collapsed ? /* @__PURE__ */ jsx6(
+      "button",
+      {
+        type: "button",
+        title: active?.name || placeholder,
+        "aria-label": active?.name || placeholder,
+        className: "flex h-10 w-10 items-center justify-center rounded-lg text-zinc-700 transition-colors hover:bg-zinc-900/5 dark:text-zinc-300 dark:hover:bg-white/5",
+        children: /* @__PURE__ */ jsx6(BrandGlyph, { brand: toBrand(active ?? { name: "" }), size: "lg" })
+      }
+    ) : /* @__PURE__ */ jsxs5(
+      "button",
+      {
+        type: "button",
+        className: "group flex items-center gap-2 rounded-md border border-border bg-card/60 px-2.5 py-1.5 text-sm font-medium transition-colors hover:bg-muted",
+        children: [
+          /* @__PURE__ */ jsx6(BrandGlyph, { brand: toBrand(active ?? { name: "" }) }),
+          /* @__PURE__ */ jsx6("span", { className: "max-w-[140px] truncate text-foreground/90", children: active?.name || placeholder }),
+          /* @__PURE__ */ jsx6(ChevronDown, { className: "h-3.5 w-3.5 text-muted-foreground transition-transform group-data-[state=open]:rotate-180" })
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ jsxs5(
+      DropdownMenuContent,
+      {
+        side,
+        align,
+        sideOffset: 6,
+        collisionPadding: 8,
+        className: cn("w-60 overflow-hidden p-0", contentClassName),
+        children: [
+          groups.map((group) => /* @__PURE__ */ jsxs5("div", { children: [
+            showOrgHeaders && /* @__PURE__ */ jsx6(DropdownMenuLabel, { className: "px-3 pb-1 pt-2 text-[11px] font-semibold uppercase tracking-wide text-muted-foreground", children: group.orgName ?? "Other" }),
+            /* @__PURE__ */ jsx6("div", { className: cn(showOrgHeaders && "ml-5 border-l border-border/60"), children: group.items.map((item) => {
+              const isActive = item.refId === activeRefId;
+              return /* @__PURE__ */ jsxs5(
+                DropdownMenuItem,
+                {
+                  "data-active": isActive || void 0,
+                  onSelect: () => onSelect(item),
+                  className: "flex w-full items-center gap-2.5 rounded-none px-3 py-2 text-sm",
+                  children: [
+                    /* @__PURE__ */ jsx6(BrandGlyph, { brand: toBrand(item), subtle: true }),
+                    /* @__PURE__ */ jsx6("span", { className: "flex-1 truncate text-left text-foreground/90", children: item.name }),
+                    isActive && /* @__PURE__ */ jsx6(Check, { className: "size-3.5 text-emerald-500" })
+                  ]
+                },
+                item.refId
+              );
+            }) })
+          ] }, group.orgId ?? "unattributed")),
+          footer && /* @__PURE__ */ jsx6("div", { className: "sticky bottom-0 border-t border-border bg-popover", children: footer })
+        ]
+      }
+    )
+  ] });
+}
 export {
   AppSidebar,
   BrandGlyph,
+  ContextSwitcher,
   Flyout,
+  GLYPH_CANVAS_FILL,
+  LOCKUP_GAP,
+  LOCKUP_ROW,
+  MARK_CAP_RATIO,
+  REEVE_ACCENT,
   ResponsiveHeader,
   deriveFallbackLadder,
   faviconUrl,
+  groupByOrg,
   reconcileLadder,
   resolveLadder,
   useLadderRung,
+  useResponsivePlaceholder,
   zSidebarLadder
 };