@meetreeve/ui 0.6.3 → 0.8.0

package/dist/index.mjs

@@ -36,6 +36,7 @@ var WORDMARK_WEIGHT = 800;
 var WORDMARK_WEIGHT_CLASS = "font-extrabold";
 var WORDMARK_TEXT_LG = "text-base";
 var MONOGRAM_TEXT_LG = "text-[17px]";
+var MONOGRAM_TEXT_XL = "text-[26px]";
 var LOCKUP_GAP = "gap-2";
 var LOCKUP_ROW = "flex items-baseline";
 var GLYPH_CANVAS_FILL = 0.65;
@@ -75,9 +76,9 @@ function faviconUrl(domain) {
   return `https://www.google.com/s2/favicons?domain=${encodeURIComponent(host)}&sz=128`;
 }
 function BrandGlyph({ brand, size = "sm", subtle = false, className }) {
-  const box = size === "lg" ? "h-6 w-6" : "h-5 w-5";
-  const img = size === "lg" ? "h-4 w-4" : "h-3.5 w-3.5";
-  const dim = size === "lg" ? 16 : 14;
+  const box = size === "xl" ? "h-10 w-10" : size === "lg" ? "h-6 w-6" : "h-5 w-5";
+  const img = size === "xl" ? "h-7 w-7" : size === "lg" ? "h-4 w-4" : "h-3.5 w-3.5";
+  const dim = size === "xl" ? 28 : size === "lg" ? 16 : 14;
   const candidates = [];
   if (brand.favicon) candidates.push(brand.favicon);
   if (brand.logo) candidates.push(brand.logo);
@@ -130,8 +131,10 @@ function BrandGlyph({ brand, size = "sm", subtle = false, className }) {
         // DEV-5139 rule 2: at "lg" the letter runs 17px = the text-base
         // wordmark (16px) × MARK_CAP_RATIO (1.08) — a lone round glyph at
         // exact parity optically reads small. "sm" has no wordmark partner
-        // in its surfaces; SIZE unchanged pending a lockup audit there.
-        size === "lg" ? MONOGRAM_TEXT_LG : "text-[11px]",
+        // in its surfaces; unchanged pending a lockup audit there. "xl"
+        // (DEV-5331) is a standalone glyph with no wordmark at all — rule 5
+        // (GLYPH_CANVAS_FILL) governs it instead of rule 2.
+        size === "xl" ? MONOGRAM_TEXT_XL : size === "lg" ? MONOGRAM_TEXT_LG : "text-[11px]",
         box,
         className
       ),
@@ -415,8 +418,8 @@ function useResponsivePlaceholder(desktop, mobile) {
 }
 
 // src/app-sidebar.tsx
-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";
+import { useCallback as useCallback3, useEffect as useEffect5, useId as useId3, useMemo, useRef as useRef4, useState as useState6 } from "react";
+import { Menu as Menu2, PanelLeftClose, PanelLeftOpen, X as X2 } from "lucide-react";
 
 // src/lib/resolve-icon.ts
 import * as LucideIcons from "lucide-react";
@@ -698,11 +701,22 @@ function useLadderRung(ladder, containerRef, options = {}) {
 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, linkComponent, className }) {
+function Flyout({
+  label,
+  icon,
+  active,
+  children,
+  linkComponent,
+  collapsed = false,
+  onOpenChange,
+  forceClosed = false,
+  className
+}) {
   const [hoverOpen, setHoverOpen] = useState5(false);
   const [clickOpen, setClickOpen] = useState5(false);
   const [panelPosition, setPanelPosition] = useState5(null);
-  const open = hoverOpen || clickOpen;
+  const wantsOpen = hoverOpen || clickOpen;
+  const open = wantsOpen && !forceClosed;
   const panelId = useId2();
   const triggerRef = useRef3(null);
   const panelRef = useRef3(null);
@@ -714,6 +728,17 @@ function Flyout({ label, icon, active, children, linkComponent, className }) {
     const rect = triggerRef.current?.getBoundingClientRect();
     if (rect) setPanelPosition({ top: rect.top, left: rect.right + PANEL_GAP });
   }, []);
+  const onOpenChangeRef = useRef3(onOpenChange);
+  onOpenChangeRef.current = onOpenChange;
+  useEffect4(() => {
+    onOpenChangeRef.current?.(wantsOpen);
+  }, [wantsOpen]);
+  useEffect4(() => {
+    if (forceClosed) {
+      setHoverOpen(false);
+      setClickOpen(false);
+    }
+  }, [forceClosed]);
   useLayoutEffect2(() => {
     if (open) reposition();
   }, [open, reposition]);
@@ -754,9 +779,11 @@ function Flyout({ label, icon, active, children, linkComponent, className }) {
             "data-testid": "ladder-flyout-trigger",
             "aria-expanded": open,
             "aria-controls": panelId,
+            title: collapsed ? label : void 0,
             onClick: () => setClickOpen((v) => !v),
             className: cn(
               "group flex w-full items-center gap-2.5 rounded-md px-3 py-1.5 text-sm transition-colors",
+              collapsed && "justify-center px-0",
               active ? "bg-primary/10 text-foreground" : "text-muted-foreground hover:bg-foreground/5 hover:text-foreground"
             ),
             children: [
@@ -768,7 +795,7 @@ function Flyout({ label, icon, active, children, linkComponent, className }) {
                   "aria-hidden": "true"
                 }
               ),
-              /* @__PURE__ */ jsx3("span", { className: "truncate", children: label })
+              /* @__PURE__ */ jsx3("span", { className: cn("truncate", collapsed && "sr-only"), children: label })
             ]
           }
         ),
@@ -819,6 +846,9 @@ function Flyout({ label, icon, active, children, linkComponent, className }) {
 
 // src/app-sidebar.tsx
 import { Fragment as Fragment2, jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
+var DEFAULT_COLLAPSE_STORAGE_KEY = "reeve-sidebar-collapsed";
+var COLLAPSED_WIDTH_CLASS = "w-14";
+var EXPANDED_WIDTH_CLASS = "w-64";
 function isHrefActive(href, activePath) {
   return activePath === href || activePath.startsWith(`${href}/`);
 }
@@ -828,7 +858,8 @@ function NavLink({
   icon,
   label,
   testId,
-  linkComponent
+  linkComponent,
+  collapsed = false
 }) {
   const Icon = resolveIcon(icon);
   const LinkEl = linkComponent ?? "a";
@@ -838,8 +869,10 @@ function NavLink({
       href,
       "data-testid": testId,
       "aria-current": active ? "page" : void 0,
+      title: collapsed ? label : void 0,
       className: cn(
         "group flex items-center gap-2.5 rounded-md px-3 py-1.5 text-sm transition-colors",
+        collapsed && "justify-center px-0",
         active ? "bg-primary/10 text-foreground" : "text-muted-foreground hover:bg-foreground/5 hover:text-foreground"
       ),
       children: [
@@ -851,7 +884,7 @@ function NavLink({
             "aria-hidden": "true"
           }
         ),
-        /* @__PURE__ */ jsx4("span", { className: "truncate", children: label })
+        /* @__PURE__ */ jsx4("span", { className: cn("truncate", collapsed && "sr-only"), children: label })
       ]
     }
   );
@@ -867,16 +900,54 @@ function AppSidebar({
   ladderOptions,
   linkComponent,
   isActive,
+  collapsible = true,
+  defaultCollapsed = false,
+  onCollapsedChange,
+  storageKey = DEFAULT_COLLAPSE_STORAGE_KEY,
   className
 }) {
   const isActiveFn = isActive ?? isHrefActive;
   const isDesktop = useMediaQuery(`(min-width: ${BREAKPOINTS.md}px)`);
+  const prefersReducedMotion = useMediaQuery("(prefers-reduced-motion: reduce)");
   const [mobileOpen, setMobileOpen] = useState6(false);
   const containerRef = useRef4(null);
   const drawerId = useId3();
   const mobileTriggerRef = useRef4(null);
   const mobileDrawerRef = useRef4(null);
   const mobileCloseRef = useRef4(null);
+  const [collapsed, setCollapsed] = useState6(defaultCollapsed);
+  const [collapseHydrated, setCollapseHydrated] = useState6(false);
+  useEffect5(() => {
+    if (!collapsible) return;
+    try {
+      const stored = localStorage.getItem(storageKey);
+      if (stored === "true") setCollapsed(true);
+      else if (stored === "false") setCollapsed(false);
+    } catch {
+    }
+    setCollapseHydrated(true);
+  }, []);
+  useEffect5(() => {
+    if (!collapsible || !collapseHydrated) return;
+    try {
+      localStorage.setItem(storageKey, String(collapsed));
+    } catch {
+    }
+  }, [collapsed, collapseHydrated, collapsible, storageKey]);
+  function handleToggleCollapsed() {
+    setCollapsed((prev) => {
+      const next = !prev;
+      onCollapsedChange?.(next);
+      return next;
+    });
+  }
+  const [openFlyoutId, setOpenFlyoutId] = useState6(null);
+  const handleFlyoutOpenChange = useCallback3((id, isOpen) => {
+    setOpenFlyoutId((current) => {
+      if (isOpen) return id;
+      return current === id ? null : current;
+    });
+  }, []);
   const moduleMap = useMemo(() => new Map(modules.map((m) => [m.moduleId, m])), [modules]);
   const registryForLadder = useMemo(
     () => modules.map((m) => ({ moduleId: m.moduleId, group: m.group })),
@@ -898,7 +969,7 @@ function AppSidebar({
     triggerRef: mobileTriggerRef,
     initialFocusRef: mobileCloseRef
   });
-  function renderAppItem(item, testIdPrefix) {
+  function renderAppItem(item, testIdPrefix, collapsedRow = false) {
     const def = moduleMap.get(item.moduleId);
     if (!def) return null;
     return /* @__PURE__ */ jsx4(
@@ -909,12 +980,13 @@ function AppSidebar({
         icon: def.icon,
         label: def.label,
         testId: `${testIdPrefix}-${item.moduleId}`,
-        linkComponent
+        linkComponent,
+        collapsed: collapsedRow
       },
       item.moduleId
     );
   }
-  function renderGroupItem(item) {
+  function renderGroupItem(item, collapsedRow = false) {
     const children = item.children.map((moduleId) => {
       const def = moduleMap.get(moduleId);
       const href = def?.href ?? "#";
@@ -932,27 +1004,48 @@ function AppSidebar({
         label: item.label,
         icon: item.icon,
         active,
-        children,
-        linkComponent
+        linkComponent,
+        collapsed: collapsedRow,
+        forceClosed: openFlyoutId !== null && openFlyoutId !== item.id,
+        onOpenChange: (isOpen) => handleFlyoutOpenChange(item.id, isOpen),
+        children
       },
       item.id
     );
   }
-  const brandBlock = brand && /* @__PURE__ */ jsxs4(
-    "a",
-    {
-      href: brand.href,
-      "data-testid": "app-sidebar-brand",
-      className: "flex items-center gap-2.5 border-b border-border px-5 py-4",
-      children: [
-        /* @__PURE__ */ jsx4("span", { className: "grid size-7 place-items-center rounded-md bg-primary text-primary-foreground", children: /* @__PURE__ */ jsx4("span", { className: "font-mono text-sm font-bold", children: (brand.label[0] ?? "r").toUpperCase() }) }),
-        /* @__PURE__ */ jsx4("span", { className: "truncate text-sm font-semibold tracking-tight", children: brand.label })
-      ]
+  function brandBlockFor(collapsedMode) {
+    if (!brand) return null;
+    if (collapsedMode) {
+      return /* @__PURE__ */ jsxs4(
+        "a",
+        {
+          href: brand.href,
+          "data-testid": "app-sidebar-brand",
+          title: brand.label,
+          className: "flex items-center justify-center border-b border-border px-1 py-4",
+          children: [
+            /* @__PURE__ */ jsx4("span", { className: "sr-only", children: brand.label }),
+            /* @__PURE__ */ jsx4(BrandGlyph, { brand: { name: brand.label }, size: "xl" })
+          ]
+        }
+      );
     }
-  );
-  function topItemBlock(testId) {
+    return /* @__PURE__ */ jsxs4(
+      "a",
+      {
+        href: brand.href,
+        "data-testid": "app-sidebar-brand",
+        className: "flex items-center gap-2.5 border-b border-border px-5 py-4",
+        children: [
+          /* @__PURE__ */ jsx4("span", { className: "grid size-7 place-items-center rounded-md bg-primary text-primary-foreground", children: /* @__PURE__ */ jsx4("span", { className: "font-mono text-sm font-bold", children: (brand.label[0] ?? "r").toUpperCase() }) }),
+          /* @__PURE__ */ jsx4("span", { className: "truncate text-sm font-semibold tracking-tight", children: brand.label })
+        ]
+      }
+    );
+  }
+  function topItemBlock(testId, collapsedMode = false) {
     if (!topItem) return null;
-    return /* @__PURE__ */ jsx4("div", { className: "px-3 pt-4", children: /* @__PURE__ */ jsx4(
+    return /* @__PURE__ */ jsx4("div", { className: cn("px-3 pt-4", collapsedMode && "flex justify-center px-0"), children: /* @__PURE__ */ jsx4(
       NavLink,
       {
         href: topItem.href,
@@ -960,7 +1053,8 @@ function AppSidebar({
         icon: topItem.icon,
         label: topItem.label,
         testId,
-        linkComponent
+        linkComponent,
+        collapsed: collapsedMode
       }
     ) });
   }
@@ -1014,7 +1108,7 @@ function AppSidebar({
                 children: /* @__PURE__ */ jsx4(X2, { className: "h-5 w-5", "aria-hidden": "true" })
               }
             ) }),
-            brandBlock,
+            brandBlockFor(false),
             topItemBlock("app-sidebar-mobile-top-item"),
             /* @__PURE__ */ jsx4("nav", { className: "flex-1 px-3 py-4", children: /* @__PURE__ */ jsx4("div", { className: "flex flex-col gap-0.5", children: rung0.items.map(
               (item) => item.type === "app" ? renderAppItem(item, "app-sidebar-mobile-navlink") : null
@@ -1027,19 +1121,47 @@ function AppSidebar({
       "aside",
       {
         "data-testid": "app-sidebar-desktop",
-        className: cn("hidden w-64 shrink-0 flex-col border-r border-border bg-sidebar md:flex", className),
+        className: cn(
+          "hidden shrink-0 flex-col border-r border-border bg-sidebar md:flex",
+          collapsed ? COLLAPSED_WIDTH_CLASS : EXPANDED_WIDTH_CLASS,
+          // DEV-5331: a plain CSS width transition is enough — no new deps
+          // for a spring/JS animation. Respect prefers-reduced-motion.
+          !prefersReducedMotion && "transition-[width] duration-200 ease-out",
+          className
+        ),
         children: [
-          brandBlock,
-          topItemBlock("app-sidebar-top-item"),
+          brandBlockFor(collapsed),
+          topItemBlock("app-sidebar-top-item", collapsed),
           /* @__PURE__ */ jsx4(
             "nav",
             {
               ref: containerRef,
               "data-testid": "app-sidebar-nav",
               className: "flex-1 overflow-y-auto px-3 py-4",
-              children: /* @__PURE__ */ jsx4("div", { className: "flex flex-col gap-0.5", children: rung.items.map((item) => item.type === "app" ? renderAppItem(item, "app-sidebar-navlink") : renderGroupItem(item)) })
+              children: /* @__PURE__ */ jsx4("div", { className: "flex flex-col gap-0.5", children: rung.items.map(
+                (item) => item.type === "app" ? renderAppItem(item, "app-sidebar-navlink", collapsed) : renderGroupItem(item, collapsed)
+              ) })
             }
-          )
+          ),
+          collapsible && /* @__PURE__ */ jsx4("div", { className: "border-t border-border px-2 py-2", children: /* @__PURE__ */ jsxs4(
+            "button",
+            {
+              type: "button",
+              "data-testid": "app-sidebar-collapse-toggle",
+              "aria-pressed": collapsed,
+              "aria-label": collapsed ? "Expand sidebar" : "Collapse sidebar",
+              title: collapsed ? "Expand sidebar" : "Collapse sidebar",
+              onClick: handleToggleCollapsed,
+              className: cn(
+                "flex items-center gap-2.5 rounded-md px-3 py-1.5 text-sm text-muted-foreground transition-colors hover:bg-foreground/5 hover:text-foreground",
+                collapsed && "justify-center px-0"
+              ),
+              children: [
+                collapsed ? /* @__PURE__ */ jsx4(PanelLeftOpen, { className: "size-4 shrink-0", strokeWidth: 1.5, "aria-hidden": "true" }) : /* @__PURE__ */ jsx4(PanelLeftClose, { className: "size-4 shrink-0", strokeWidth: 1.5, "aria-hidden": "true" }),
+                /* @__PURE__ */ jsx4("span", { className: cn("truncate", collapsed && "sr-only"), children: collapsed ? "Expand sidebar" : "Collapse sidebar" })
+              ]
+            }
+          ) })
         ]
       }
     )
@@ -1219,9 +1341,262 @@ function ContextSwitcher({
     )
   ] });
 }
+
+// src/connector-picker.tsx
+import { useCallback as useCallback4, useEffect as useEffect6, useRef as useRef5, useState as useState7 } from "react";
+import { Fragment as Fragment3, jsx as jsx7, jsxs as jsxs6 } from "react/jsx-runtime";
+var DEFAULT_CONNECT_ERROR = "Couldn't start the connection. Please try again.";
+var DEFAULT_DISCONNECT_ERROR = "Couldn't disconnect. Please try again.";
+var DEFAULT_LOAD_ERROR = "Couldn't load connections. Please try again.";
+var SKELETON_COUNT = 3;
+function capabilityLabel(capability) {
+  if (capability === "read") return "Read only";
+  if (capability === "write") return "Write only";
+  return "Read & write";
+}
+function formatSince(since) {
+  const parsed = new Date(since);
+  if (Number.isNaN(parsed.getTime())) return since;
+  return parsed.toLocaleDateString(void 0, { year: "numeric", month: "short", day: "numeric" });
+}
+function errorMessageFrom(err, fallback) {
+  return err instanceof Error && err.message ? err.message : fallback;
+}
+function ConnectorPicker({
+  client,
+  purpose,
+  lens = "owner",
+  layout = "tiles",
+  onConnected
+}) {
+  const gated = lens !== "owner";
+  const [entries, setEntries] = useState7(null);
+  const [loadError, setLoadError] = useState7(null);
+  const [uiState, setUiState] = useState7({});
+  const clientRef = useRef5(client);
+  clientRef.current = client;
+  const purposeRef = useRef5(purpose);
+  purposeRef.current = purpose;
+  const onConnectedRef = useRef5(onConnected);
+  onConnectedRef.current = onConnected;
+  const uiStateRef = useRef5(uiState);
+  uiStateRef.current = uiState;
+  const load = useCallback4(async () => {
+    if (gated) return null;
+    try {
+      const list = await clientRef.current.listConnectable({ purpose: purposeRef.current });
+      setEntries(list);
+      setLoadError(null);
+      return list;
+    } catch (err) {
+      setLoadError(errorMessageFrom(err, DEFAULT_LOAD_ERROR));
+      return null;
+    }
+  }, [gated]);
+  useEffect6(() => {
+    if (gated) return;
+    void load();
+  }, [gated, load, purpose]);
+  const refreshAfterReturn = useCallback4(async () => {
+    const list = await load();
+    if (!list) return;
+    setUiState((prev) => {
+      let changed = false;
+      const next = { ...prev };
+      for (const entry of list) {
+        if (next[entry.slug]?.kind === "connecting" && entry.connection.status === "connected") {
+          changed = true;
+          delete next[entry.slug];
+          onConnectedRef.current?.(entry);
+        }
+      }
+      return changed ? next : prev;
+    });
+  }, [load]);
+  useEffect6(() => {
+    if (gated) return;
+    function handleReturn() {
+      if (document.visibilityState === "hidden") return;
+      const hasPendingConnect = Object.values(uiStateRef.current).some(
+        (s) => s.kind === "connecting"
+      );
+      if (!hasPendingConnect) return;
+      void refreshAfterReturn();
+    }
+    window.addEventListener("focus", handleReturn);
+    document.addEventListener("visibilitychange", handleReturn);
+    return () => {
+      window.removeEventListener("focus", handleReturn);
+      document.removeEventListener("visibilitychange", handleReturn);
+    };
+  }, [gated, refreshAfterReturn]);
+  const handleConnect = useCallback4(
+    async (entry) => {
+      setUiState((prev) => ({ ...prev, [entry.slug]: { kind: "connecting" } }));
+      try {
+        const result = await clientRef.current.connect(entry);
+        if (result?.connect_url) {
+          window.open(result.connect_url, "_blank", "noopener,noreferrer");
+          return;
+        }
+        const list = await load();
+        const updated = list?.find((e) => e.slug === entry.slug) ?? null;
+        setUiState((prev) => {
+          const next = { ...prev };
+          delete next[entry.slug];
+          return next;
+        });
+        if (updated?.connection.status === "connected") {
+          onConnectedRef.current?.(updated);
+        }
+      } catch (err) {
+        const message = errorMessageFrom(err, DEFAULT_CONNECT_ERROR);
+        setUiState((prev) => ({ ...prev, [entry.slug]: { kind: "error", message } }));
+      }
+    },
+    [load]
+  );
+  const handleDisconnect = useCallback4(
+    async (entry) => {
+      setUiState((prev) => ({ ...prev, [entry.slug]: { kind: "disconnecting" } }));
+      try {
+        await clientRef.current.disconnect(entry);
+        await load();
+        setUiState((prev) => {
+          const next = { ...prev };
+          delete next[entry.slug];
+          return next;
+        });
+      } catch (err) {
+        const message = errorMessageFrom(err, DEFAULT_DISCONNECT_ERROR);
+        setUiState((prev) => ({ ...prev, [entry.slug]: { kind: "error", message } }));
+      }
+    },
+    [load]
+  );
+  if (gated) return null;
+  const containerClassName = cn(
+    "flex flex-col",
+    layout === "tiles" ? "gap-3 sm:grid sm:grid-cols-2 lg:grid-cols-3" : "divide-y divide-border"
+  );
+  return /* @__PURE__ */ jsxs6("div", { "data-testid": "connector-picker", "data-layout": layout, className: containerClassName, children: [
+    entries === null && !loadError && Array.from({ length: SKELETON_COUNT }).map((_, i) => /* @__PURE__ */ jsxs6(
+      "div",
+      {
+        "data-testid": "connector-picker-skeleton-item",
+        "aria-hidden": "true",
+        className: "flex items-center gap-3 rounded-lg border border-border p-3",
+        children: [
+          /* @__PURE__ */ jsx7("span", { className: "h-8 w-8 shrink-0 animate-pulse rounded bg-foreground/10" }),
+          /* @__PURE__ */ jsx7("span", { className: "h-3 flex-1 animate-pulse rounded bg-foreground/10" })
+        ]
+      },
+      i
+    )),
+    loadError && /* @__PURE__ */ jsxs6(
+      "div",
+      {
+        role: "alert",
+        "data-testid": "connector-picker-load-error",
+        className: "flex items-center justify-between gap-3 rounded-lg border border-destructive/30 bg-destructive/5 p-3 text-sm text-destructive",
+        children: [
+          /* @__PURE__ */ jsx7("span", { children: loadError }),
+          /* @__PURE__ */ jsx7("button", { type: "button", onClick: () => void load(), className: "shrink-0 underline", children: "Retry" })
+        ]
+      }
+    ),
+    entries !== null && entries.length === 0 && !loadError && /* @__PURE__ */ jsx7("p", { "data-testid": "connector-picker-empty", className: "text-sm text-muted-foreground", children: "No connections available." }),
+    entries?.map((entry) => /* @__PURE__ */ jsx7(
+      ConnectorTile,
+      {
+        entry,
+        ui: uiState[entry.slug],
+        layout,
+        onConnect: handleConnect,
+        onDisconnect: handleDisconnect
+      },
+      entry.slug
+    ))
+  ] });
+}
+function ConnectorTile({
+  entry,
+  ui,
+  layout,
+  onConnect,
+  onDisconnect
+}) {
+  const isConnected = entry.connection.status === "connected";
+  const isConnecting = ui?.kind === "connecting";
+  const isDisconnecting = ui?.kind === "disconnecting";
+  const errorMessage = ui?.kind === "error" ? ui.message : null;
+  return /* @__PURE__ */ jsxs6(
+    "div",
+    {
+      "data-testid": `connector-tile-${entry.slug}`,
+      "data-connected": isConnected || void 0,
+      "data-deprecated": entry.deprecated || void 0,
+      className: cn("flex items-center gap-3 p-3", layout === "tiles" && "rounded-lg border border-border"),
+      children: [
+        /* @__PURE__ */ jsx7(BrandGlyph, { brand: { name: entry.name, logo: entry.logo }, size: "lg" }),
+        /* @__PURE__ */ jsxs6("div", { className: "min-w-0 flex-1", children: [
+          /* @__PURE__ */ jsxs6("div", { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ jsx7("p", { className: "truncate text-sm font-medium", children: entry.name }),
+            entry.deprecated && /* @__PURE__ */ jsx7(
+              "span",
+              {
+                "data-testid": `connector-deprecated-${entry.slug}`,
+                className: "shrink-0 rounded-full bg-foreground/10 px-2 py-0.5 text-[11px] text-muted-foreground",
+                children: "No longer available"
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs6("div", { className: "flex items-center gap-1.5 text-xs text-muted-foreground", children: [
+            /* @__PURE__ */ jsx7("span", { "data-testid": `connector-capability-${entry.slug}`, children: capabilityLabel(entry.capability) }),
+            entry.category && /* @__PURE__ */ jsxs6(Fragment3, { children: [
+              /* @__PURE__ */ jsx7("span", { "aria-hidden": "true", children: "\xB7" }),
+              /* @__PURE__ */ jsx7("span", { className: "truncate", children: entry.category })
+            ] })
+          ] }),
+          isConnected && /* @__PURE__ */ jsx7(
+            "p",
+            {
+              "data-testid": `connector-connected-since-${entry.slug}`,
+              className: "text-xs text-muted-foreground",
+              children: entry.connection.since ? `Connected since ${formatSince(entry.connection.since)}` : "Connected"
+            }
+          ),
+          errorMessage && /* @__PURE__ */ jsx7("p", { role: "alert", "data-testid": `connector-error-${entry.slug}`, className: "text-xs text-destructive", children: errorMessage })
+        ] }),
+        isConnected ? /* @__PURE__ */ jsx7(
+          "button",
+          {
+            type: "button",
+            "data-testid": `connector-disconnect-${entry.slug}`,
+            onClick: () => onDisconnect(entry),
+            disabled: isDisconnecting,
+            className: "shrink-0 rounded-md px-2.5 py-1 text-xs font-medium text-destructive hover:bg-destructive/10 disabled:opacity-50",
+            children: isDisconnecting ? "Disconnecting\u2026" : "Disconnect"
+          }
+        ) : /* @__PURE__ */ jsx7(
+          "button",
+          {
+            type: "button",
+            "data-testid": `connector-connect-${entry.slug}`,
+            onClick: () => onConnect(entry),
+            disabled: isConnecting,
+            className: "shrink-0 rounded-md bg-primary px-2.5 py-1 text-xs font-medium text-primary-foreground disabled:opacity-50",
+            children: isConnecting ? "Connecting\u2026" : "Connect"
+          }
+        )
+      ]
+    }
+  );
+}
 export {
   AppSidebar,
   BrandGlyph,
+  ConnectorPicker,
   ContextSwitcher,
   Flyout,
   GLYPH_CANVAS_FILL,

package/dist/lockup/index.d.mts

@@ -51,6 +51,17 @@ declare const WORDMARK_WEIGHT_CLASS = "font-extrabold";
  */
 declare const WORDMARK_TEXT_LG = "text-base";
 declare const MONOGRAM_TEXT_LG = "text-[17px]";
+/**
+ * "xl" — a bare, STANDALONE glyph slot with no adjacent wordmark at all
+ * (e.g. AppSidebar's collapsed 56px icon rail, DEV-5331 — Matt's live
+ * review found the "lg" monogram too small there). No wordmark to pair
+ * with means rule 2 (MARK_CAP_RATIO) doesn't apply; rule 5
+ * (GLYPH_CANVAS_FILL) does instead — same governing rule as a favicon/
+ * avatar tile. Canvas = 40px (`h-10 w-10`); letter cap height = 40 ×
+ * GLYPH_CANVAS_FILL (0.65) = 26px, landing in Matt's requested ~24-28px
+ * range for a rail comfortably wider than the glyph itself.
+ */
+declare const MONOGRAM_TEXT_XL = "text-[26px]";
 /**
  * Rule 3, applied: 8px gap ≈ 0.70× the wordmark's ~11.5px cap height (at
  * text-base) — inside the 0.5–0.8 band. Named so nobody "fixes" it
@@ -65,4 +76,4 @@ declare const LOCKUP_ROW = "flex items-baseline";
 /** Rule 5 — standalone glyph cap height as a fraction of the canvas edge. */
 declare const GLYPH_CANVAS_FILL = 0.65;
 
-export { GLYPH_CANVAS_FILL, LOCKUP_GAP, LOCKUP_ROW, MARK_CAP_RATIO, MARK_WEIGHT, MARK_WEIGHT_CLASS, MONOGRAM_TEXT_LG, WORDMARK_TEXT_LG, WORDMARK_WEIGHT, WORDMARK_WEIGHT_CLASS };
+export { GLYPH_CANVAS_FILL, LOCKUP_GAP, LOCKUP_ROW, MARK_CAP_RATIO, MARK_WEIGHT, MARK_WEIGHT_CLASS, MONOGRAM_TEXT_LG, MONOGRAM_TEXT_XL, WORDMARK_TEXT_LG, WORDMARK_WEIGHT, WORDMARK_WEIGHT_CLASS };

package/dist/lockup/index.d.ts

@@ -51,6 +51,17 @@ declare const WORDMARK_WEIGHT_CLASS = "font-extrabold";
  */
 declare const WORDMARK_TEXT_LG = "text-base";
 declare const MONOGRAM_TEXT_LG = "text-[17px]";
+/**
+ * "xl" — a bare, STANDALONE glyph slot with no adjacent wordmark at all
+ * (e.g. AppSidebar's collapsed 56px icon rail, DEV-5331 — Matt's live
+ * review found the "lg" monogram too small there). No wordmark to pair
+ * with means rule 2 (MARK_CAP_RATIO) doesn't apply; rule 5
+ * (GLYPH_CANVAS_FILL) does instead — same governing rule as a favicon/
+ * avatar tile. Canvas = 40px (`h-10 w-10`); letter cap height = 40 ×
+ * GLYPH_CANVAS_FILL (0.65) = 26px, landing in Matt's requested ~24-28px
+ * range for a rail comfortably wider than the glyph itself.
+ */
+declare const MONOGRAM_TEXT_XL = "text-[26px]";
 /**
  * Rule 3, applied: 8px gap ≈ 0.70× the wordmark's ~11.5px cap height (at
  * text-base) — inside the 0.5–0.8 band. Named so nobody "fixes" it
@@ -65,4 +76,4 @@ declare const LOCKUP_ROW = "flex items-baseline";
 /** Rule 5 — standalone glyph cap height as a fraction of the canvas edge. */
 declare const GLYPH_CANVAS_FILL = 0.65;
 
-export { GLYPH_CANVAS_FILL, LOCKUP_GAP, LOCKUP_ROW, MARK_CAP_RATIO, MARK_WEIGHT, MARK_WEIGHT_CLASS, MONOGRAM_TEXT_LG, WORDMARK_TEXT_LG, WORDMARK_WEIGHT, WORDMARK_WEIGHT_CLASS };
+export { GLYPH_CANVAS_FILL, LOCKUP_GAP, LOCKUP_ROW, MARK_CAP_RATIO, MARK_WEIGHT, MARK_WEIGHT_CLASS, MONOGRAM_TEXT_LG, MONOGRAM_TEXT_XL, WORDMARK_TEXT_LG, WORDMARK_WEIGHT, WORDMARK_WEIGHT_CLASS };