@meetreeve/ui 0.2.0 → 0.5.2

package/dist/index.js

@@ -33,19 +33,26 @@ var src_exports = {};
 __export(src_exports, {
   AppSidebar: () => AppSidebar,
   BrandGlyph: () => BrandGlyph,
+  ContextSwitcher: () => ContextSwitcher,
   Flyout: () => Flyout,
+  GLYPH_CANVAS_FILL: () => GLYPH_CANVAS_FILL,
+  LOCKUP_GAP: () => LOCKUP_GAP,
+  LOCKUP_ROW: () => LOCKUP_ROW,
+  MARK_CAP_RATIO: () => MARK_CAP_RATIO,
+  REEVE_ACCENT: () => REEVE_ACCENT,
   ResponsiveHeader: () => ResponsiveHeader,
   deriveFallbackLadder: () => deriveFallbackLadder,
   faviconUrl: () => faviconUrl,
+  groupByOrg: () => groupByOrg,
   reconcileLadder: () => reconcileLadder,
   resolveLadder: () => resolveLadder,
   useLadderRung: () => useLadderRung,
+  useResponsivePlaceholder: () => useResponsivePlaceholder,
   zSidebarLadder: () => zSidebarLadder
 });
 module.exports = __toCommonJS(src_exports);
 
 // src/brand-glyph.tsx
-var import_image = __toESM(require("next/image"));
 var import_react = require("react");
 
 // src/lib/cn.ts
@@ -68,12 +75,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",
@@ -101,6 +114,7 @@ function monogramColor(seed) {
 
 // src/brand-glyph.tsx
 var import_jsx_runtime = require("react/jsx-runtime");
+var REEVE_ACCENT = "#FF6B2B";
 function faviconUrl(domain) {
   if (!domain) return null;
   const host = domain.trim().toLowerCase();
@@ -121,21 +135,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__ */ (0, import_jsx_runtime.jsx)(
-          import_image.default,
+          "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")
           }
@@ -143,19 +162,28 @@ function BrandGlyph({ brand, size = "sm", subtle = false, className }) {
       }
     );
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+  const letter = firstInitial(brand.name);
+  const hasRealLetter = letter !== "?";
+  return /* @__PURE__ */ (0, import_jsx_runtime.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__ */ (0, import_jsx_runtime.jsx)("span", { "data-testid": "brand-monogram-dot", style: { color: brand.accentColor || REEVE_ACCENT }, children: "." })
+      ]
     }
   );
 }
@@ -164,23 +192,21 @@ function BrandGlyph({ brand, size = "sm", subtle = false, className }) {
 var import_react3 = require("react");
 var import_lucide_react = require("lucide-react");
 
-// src/lib/use-media-query.ts
+// src/lib/use-container-width-at-least.ts
 var import_react2 = require("react");
-function useMediaQuery(query) {
-  const subscribe = (0, import_react2.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 (0, import_react2.useSyncExternalStore)(subscribe, getSnapshot, () => false);
+function useContainerWidthAtLeast(ref, px) {
+  const [atLeast, setAtLeast] = (0, import_react2.useState)(false);
+  (0, import_react2.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
@@ -200,6 +226,10 @@ 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
 var import_jsx_runtime2 = require("react/jsx-runtime");
@@ -209,15 +239,17 @@ function MenuIcon({ open }) {
 function SecondaryControls({
   nav,
   auth,
-  themeToggle
+  themeToggle,
+  linkComponent
 }) {
+  const LinkEl = linkComponent ?? "a";
   return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.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__ */ (0, import_jsx_runtime2.jsx)(
-          "a",
+          LinkEl,
           {
             href: item.href,
             onClick: item.onSelect,
@@ -225,15 +257,22 @@ function SecondaryControls({
             children: item.label
           },
           item.label
-        ) : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-          "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__ */ (0, import_jsx_runtime2.jsx)(
+            "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
+          )
         )
       )
     ),
@@ -245,19 +284,23 @@ function ResponsiveHeader({
   brand,
   search,
   nav,
+  brandHref,
+  linkComponent,
   auth,
   themeToggle,
   menuLabel = "Menu",
   className
 }) {
-  const isDesktop = useMediaQuery(`(min-width: ${BREAKPOINTS.md}px)`);
+  const LinkEl = linkComponent ?? "a";
   const [open, setOpen] = (0, import_react3.useState)(false);
   const panelId = (0, import_react3.useId)();
+  const headerRef = (0, import_react3.useRef)(null);
   const buttonRef = (0, import_react3.useRef)(null);
   const panelRef = (0, import_react3.useRef)(null);
+  const containerAtOrAboveMd = useContainerWidthAtLeast(headerRef, BREAKPOINTS.md);
   (0, import_react3.useEffect)(() => {
-    if (isDesktop) setOpen(false);
-  }, [isDesktop]);
+    if (containerAtOrAboveMd) setOpen(false);
+  }, [containerAtOrAboveMd]);
   (0, import_react3.useEffect)(() => {
     if (!open) return;
     const onKey = (e) => {
@@ -280,27 +323,41 @@ function ResponsiveHeader({
     };
   }, [open]);
   const hasSecondary = Boolean(nav && nav.length > 0 || auth || themeToggle);
+  const brandLockup = /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("span", { "data-testid": "header-lockup", className: cn(LOCKUP_ROW, LOCKUP_GAP), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(BrandGlyph, { brand, size: "lg" }),
+    /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+      "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__ */ (0, import_jsx_runtime2.jsxs)(
     "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__ */ (0, import_jsx_runtime2.jsxs)("div", { "data-testid": "header-brand", className: "flex shrink-0 items-center gap-2", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(BrandGlyph, { brand, size: "lg" }),
-          isDesktop && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-            "span",
-            {
-              "data-testid": "header-wordmark",
-              className: "truncate text-sm font-semibold text-foreground",
-              style: { maxWidth: MIN_SIZES.wordmarkMaxWidth },
-              children: brand.name
-            }
-          )
-        ] }),
+        brandHref ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+          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__ */ (0, import_jsx_runtime2.jsx)("div", { "data-testid": "header-brand", className: "flex shrink-0 items-center", children: brandLockup }),
         /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
           "div",
           {
@@ -310,40 +367,91 @@ function ResponsiveHeader({
             children: search
           }
         ),
-        hasSecondary && (isDesktop ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("nav", { "data-testid": "header-actions", className: "flex shrink-0 items-center gap-3", children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(SecondaryControls, { nav, auth, themeToggle }) }) : /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "relative shrink-0", children: [
+        hasSecondary && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
           /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-            "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__ */ (0, import_jsx_runtime2.jsx)(MenuIcon, { open })
+              "data-testid": "header-actions",
+              className: "hidden shrink-0 items-center gap-3 @min-[768px]:flex",
+              children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                SecondaryControls,
+                {
+                  nav,
+                  auth,
+                  themeToggle,
+                  linkComponent
+                }
+              )
             }
           ),
-          open && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-            "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__ */ (0, import_jsx_runtime2.jsx)(SecondaryControls, { nav, auth, themeToggle })
-            }
-          )
-        ] }))
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "relative shrink-0 @min-[768px]:hidden", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+              "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__ */ (0, import_jsx_runtime2.jsx)(MenuIcon, { open })
+              }
+            ),
+            open && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+              "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__ */ (0, import_jsx_runtime2.jsx)(
+                  SecondaryControls,
+                  {
+                    nav,
+                    auth,
+                    themeToggle,
+                    linkComponent
+                  }
+                )
+              }
+            )
+          ] })
+        ] })
       ]
     }
   );
 }
 
+// src/lib/use-media-query.ts
+var import_react4 = require("react");
+function useMediaQuery(query) {
+  const subscribe = (0, import_react4.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 (0, import_react4.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
-var import_react7 = require("react");
+var import_react8 = require("react");
 var import_lucide_react2 = require("lucide-react");
 
 // src/lib/resolve-icon.ts
@@ -364,7 +472,7 @@ function resolveIcon(name) {
 }
 
 // src/lib/use-dismissable-disclosure.ts
-var import_react4 = require("react");
+var import_react5 = require("react");
 function useDismissableDisclosure({
   open,
   onClose,
@@ -372,10 +480,10 @@ function useDismissableDisclosure({
   triggerRef,
   initialFocusRef
 }) {
-  (0, import_react4.useEffect)(() => {
+  (0, import_react5.useEffect)(() => {
     if (open) initialFocusRef?.current?.focus();
   }, [open]);
-  (0, import_react4.useEffect)(() => {
+  (0, import_react5.useEffect)(() => {
     if (!open) return;
     const onKey = (e) => {
       if (e.key === "Escape") {
@@ -578,16 +686,16 @@ function resolveLadder(raw, registry, groupOrder) {
 }
 
 // src/ladder/use-ladder-rung.ts
-var import_react5 = require("react");
+var import_react6 = require("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] = (0, import_react5.useState)(0);
-  const rungIndexRef = (0, import_react5.useRef)(0);
+  const [rungIndex, setRungIndex] = (0, import_react6.useState)(0);
+  const rungIndexRef = (0, import_react6.useRef)(0);
   const ladderSignature = `${ladder.version}:${ladder.rungs.map((r) => r.rows).join(",")}`;
-  (0, import_react5.useLayoutEffect)(() => {
+  (0, import_react6.useLayoutEffect)(() => {
     rungIndexRef.current = 0;
     setRungIndex(0);
     const node = containerRef.current;
@@ -623,28 +731,28 @@ function useLadderRung(ladder, containerRef, options = {}) {
 }
 
 // src/ladder/flyout.tsx
-var import_react6 = require("react");
+var import_react7 = require("react");
 var import_jsx_runtime3 = require("react/jsx-runtime");
 var PANEL_GAP = 4;
 function Flyout({ label, icon, active, children, className }) {
-  const [hoverOpen, setHoverOpen] = (0, import_react6.useState)(false);
-  const [clickOpen, setClickOpen] = (0, import_react6.useState)(false);
-  const [panelPosition, setPanelPosition] = (0, import_react6.useState)(null);
+  const [hoverOpen, setHoverOpen] = (0, import_react7.useState)(false);
+  const [clickOpen, setClickOpen] = (0, import_react7.useState)(false);
+  const [panelPosition, setPanelPosition] = (0, import_react7.useState)(null);
   const open = hoverOpen || clickOpen;
-  const panelId = (0, import_react6.useId)();
-  const triggerRef = (0, import_react6.useRef)(null);
-  const panelRef = (0, import_react6.useRef)(null);
-  const firstItemRef = (0, import_react6.useRef)(null);
+  const panelId = (0, import_react7.useId)();
+  const triggerRef = (0, import_react7.useRef)(null);
+  const panelRef = (0, import_react7.useRef)(null);
+  const firstItemRef = (0, import_react7.useRef)(null);
   const prefersReducedMotion = useMediaQuery("(prefers-reduced-motion: reduce)");
   const Icon = resolveIcon(icon);
-  const reposition = (0, import_react6.useCallback)(() => {
+  const reposition = (0, import_react7.useCallback)(() => {
     const rect = triggerRef.current?.getBoundingClientRect();
     if (rect) setPanelPosition({ top: rect.top, left: rect.right + PANEL_GAP });
   }, []);
-  (0, import_react6.useLayoutEffect)(() => {
+  (0, import_react7.useLayoutEffect)(() => {
     if (open) reposition();
   }, [open, reposition]);
-  (0, import_react6.useEffect)(() => {
+  (0, import_react7.useEffect)(() => {
     if (!open) return;
     window.addEventListener("resize", reposition);
     window.addEventListener("scroll", reposition, true);
@@ -662,7 +770,7 @@ function Flyout({ label, icon, active, children, className }) {
     panelRef,
     triggerRef
   });
-  (0, import_react6.useEffect)(() => {
+  (0, import_react7.useEffect)(() => {
     if (clickOpen && panelPosition) firstItemRef.current?.focus();
   }, [clickOpen, panelPosition]);
   return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
@@ -716,8 +824,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
@@ -780,24 +889,24 @@ function AppSidebar({
   className
 }) {
   const isDesktop = useMediaQuery(`(min-width: ${BREAKPOINTS.md}px)`);
-  const [mobileOpen, setMobileOpen] = (0, import_react7.useState)(false);
-  const containerRef = (0, import_react7.useRef)(null);
-  const drawerId = (0, import_react7.useId)();
-  const mobileTriggerRef = (0, import_react7.useRef)(null);
-  const mobileDrawerRef = (0, import_react7.useRef)(null);
-  const mobileCloseRef = (0, import_react7.useRef)(null);
-  const moduleMap = (0, import_react7.useMemo)(() => new Map(modules.map((m) => [m.moduleId, m])), [modules]);
-  const registryForLadder = (0, import_react7.useMemo)(
+  const [mobileOpen, setMobileOpen] = (0, import_react8.useState)(false);
+  const containerRef = (0, import_react8.useRef)(null);
+  const drawerId = (0, import_react8.useId)();
+  const mobileTriggerRef = (0, import_react8.useRef)(null);
+  const mobileDrawerRef = (0, import_react8.useRef)(null);
+  const mobileCloseRef = (0, import_react8.useRef)(null);
+  const moduleMap = (0, import_react8.useMemo)(() => new Map(modules.map((m) => [m.moduleId, m])), [modules]);
+  const registryForLadder = (0, import_react8.useMemo)(
     () => modules.map((m) => ({ moduleId: m.moduleId, group: m.group })),
     [modules]
   );
-  const resolvedLadder = (0, import_react7.useMemo)(
+  const resolvedLadder = (0, import_react8.useMemo)(
     () => resolveLadder(ladder, registryForLadder, groupOrder),
     [ladder, registryForLadder, groupOrder]
   );
   const rung = useLadderRung(resolvedLadder, containerRef, ladderOptions);
   const rung0 = resolvedLadder.rungs[0];
-  (0, import_react7.useEffect)(() => {
+  (0, import_react8.useEffect)(() => {
     if (isDesktop) setMobileOpen(false);
   }, [isDesktop]);
   useDismissableDisclosure({
@@ -872,6 +981,7 @@ 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__ */ (0, import_jsx_runtime4.jsx)(import_lucide_react2.X, { className: "h-5 w-5", "aria-hidden": "true" }) : /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_lucide_react2.Menu, { className: "h-5 w-5", "aria-hidden": "true" })
       }
@@ -905,6 +1015,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__ */ (0, import_jsx_runtime4.jsx)(import_lucide_react2.X, { className: "h-5 w-5", "aria-hidden": "true" })
               }
@@ -940,16 +1051,198 @@ function AppSidebar({
     )
   ] });
 }
+
+// src/context-switcher.tsx
+var import_lucide_react3 = require("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
+var DropdownMenuPrimitive = __toESM(require("@radix-ui/react-dropdown-menu"));
+var import_jsx_runtime5 = require("react/jsx-runtime");
+function DropdownMenu(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(DropdownMenuPrimitive.Root, { "data-slot": "dropdown-menu", ...props });
+}
+function DropdownMenuTrigger(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(DropdownMenuPrimitive.Trigger, { "data-slot": "dropdown-menu-trigger", ...props });
+}
+function DropdownMenuContent({
+  className,
+  sideOffset = 4,
+  ...props
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(DropdownMenuPrimitive.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+    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__ */ (0, import_jsx_runtime5.jsx)(
+    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__ */ (0, import_jsx_runtime5.jsx)(
+    DropdownMenuPrimitive.Label,
+    {
+      "data-slot": "dropdown-menu-label",
+      className: cn("px-2 py-1.5 text-sm font-medium", className),
+      ...props
+    }
+  );
+}
+
+// src/context-switcher.tsx
+var import_jsx_runtime6 = require("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__ */ (0, import_jsx_runtime6.jsxs)(DropdownMenu, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(DropdownMenuTrigger, { asChild: true, children: collapsed ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+      "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__ */ (0, import_jsx_runtime6.jsx)(BrandGlyph, { brand: toBrand(active ?? { name: "" }), size: "lg" })
+      }
+    ) : /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+      "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__ */ (0, import_jsx_runtime6.jsx)(BrandGlyph, { brand: toBrand(active ?? { name: "" }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "max-w-[140px] truncate text-foreground/90", children: active?.name || placeholder }),
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_lucide_react3.ChevronDown, { className: "h-3.5 w-3.5 text-muted-foreground transition-transform group-data-[state=open]:rotate-180" })
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+      DropdownMenuContent,
+      {
+        side,
+        align,
+        sideOffset: 6,
+        collisionPadding: 8,
+        className: cn("w-60 overflow-hidden p-0", contentClassName),
+        children: [
+          groups.map((group) => /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { children: [
+            showOrgHeaders && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(DropdownMenuLabel, { className: "px-3 pb-1 pt-2 text-[11px] font-semibold uppercase tracking-wide text-muted-foreground", children: group.orgName ?? "Other" }),
+            /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: cn(showOrgHeaders && "ml-5 border-l border-border/60"), children: group.items.map((item) => {
+              const isActive = item.refId === activeRefId;
+              return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+                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__ */ (0, import_jsx_runtime6.jsx)(BrandGlyph, { brand: toBrand(item), subtle: true }),
+                    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "flex-1 truncate text-left text-foreground/90", children: item.name }),
+                    isActive && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_lucide_react3.Check, { className: "size-3.5 text-emerald-500" })
+                  ]
+                },
+                item.refId
+              );
+            }) })
+          ] }, group.orgId ?? "unattributed")),
+          footer && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "sticky bottom-0 border-t border-border bg-popover", children: footer })
+        ]
+      }
+    )
+  ] });
+}
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   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
 });