@meetreeve/ui 0.7.1 → 0.8.1

package/dist/index.d.mts

@@ -584,4 +584,71 @@ interface ContextSwitcherProps {
 }
 declare function ContextSwitcher({ items, activeRefId, onSelect, footer, placeholder, collapsed, side, align, contentClassName, }: ContextSwitcherProps): react.JSX.Element;
 
-export { type AppRungItem, AppSidebar, type AppSidebarBrand, type AppSidebarModuleDef, type AppSidebarProps, type AppSidebarTopItem, type Brand, BrandGlyph, type BrandGlyphProps, type ContextOrgGroup, ContextSwitcher, type ContextSwitcherItem, type ContextSwitcherProps, type FallbackModuleDef, Flyout, type FlyoutChild, type FlyoutProps, GLYPH_CANVAS_FILL, type GroupRungItem, type HeaderNavItem, LOCKUP_GAP, LOCKUP_ROW, MARK_CAP_RATIO, MARK_WEIGHT, REEVE_ACCENT, ResponsiveHeader, type ResponsiveHeaderProps, type RungItem, type SidebarLadder, type SidebarLadderParsed, type SidebarRung, type UseLadderRungOptions, WORDMARK_WEIGHT, deriveFallbackLadder, faviconUrl, groupByOrg, reconcileLadder, resolveLadder, useLadderRung, useResponsivePlaceholder, zSidebarLadder };
+/**
+ * ConnectorPicker (DEV-5578 / CONN-3) — the one data-driven connect
+ * component in @meetreeve/ui. Renders a catalog of connectable entries from
+ * an injected client, owning the whole per-entry state machine
+ * (not-connected -> connecting -> connected, disconnect, inline per-tile
+ * errors, and a return-from-OAuth refresh). Every label is derived from the
+ * entry data the client returns — this file must never hardcode a specific
+ * provider's name (an explicit acceptance criterion); a host app supplies
+ * that entirely through `ConnectableEntry.name` / `.logo` / `.category`.
+ *
+ * Transport-injection precedent: `linkComponent` (DEV-4429/DEV-4391) —
+ * inject the transport, keep behavior in the package. Here the "transport"
+ * is the whole backend round-trip (list/connect/disconnect), injected as
+ * `client` (Matt's decision, 2026-07-25): Reeve passes one built on its own
+ * fetch client; a tenant clone passes ~10 lines of its own.
+ */
+type ConnectableTransport = "composio" | "native";
+type ConnectableCapability = "read" | "write" | "readwrite";
+interface ConnectableEntry {
+    slug: string;
+    name: string;
+    logo: string | null;
+    category: string | null;
+    transport: ConnectableTransport;
+    capability: ConnectableCapability;
+    purposes: string[];
+    connection: {
+        status: "connected" | "not_connected";
+        connected_account_id: string | null;
+        since: string | null;
+    };
+    /** true = tenant has a live connection but the entry left the allowlist. */
+    deprecated: boolean;
+}
+interface ConnectorPickerClient {
+    listConnectable(opts: {
+        purpose?: string;
+    }): Promise<ConnectableEntry[]>;
+    /** composio -> open the returned connect_url; native may resolve with none. */
+    connect(entry: ConnectableEntry): Promise<{
+        connect_url?: string;
+    }>;
+    disconnect(entry: ConnectableEntry): Promise<void>;
+}
+/**
+ * Structurally identical to the app's own `DnaLens` (src/lib/dna-lens.ts) —
+ * this package must never import app code, so it declares its own copy
+ * rather than sharing the type.
+ */
+type ConnectorPickerLens = "visitor" | "member" | "owner";
+interface ConnectorPickerProps {
+    /** The injected transport adapter — required. */
+    client: ConnectorPickerClient;
+    /** Optional purpose slice, forwarded to `client.listConnectable`. */
+    purpose?: string;
+    /**
+     * Default "owner". "visitor"/"member" render nothing and make ZERO
+     * client calls — some host surfaces (e.g. a structurally owner-only
+     * knowledge page) have no visitor/member concept at all, and forcing them
+     * to synthesize a lens would import dead branches.
+     */
+    lens?: ConnectorPickerLens;
+    layout?: "tiles" | "list";
+    onConnected?: (entry: ConnectableEntry) => void;
+}
+declare function ConnectorPicker({ client, purpose, lens, layout, onConnected, }: ConnectorPickerProps): react.JSX.Element | null;
+
+export { type AppRungItem, AppSidebar, type AppSidebarBrand, type AppSidebarModuleDef, type AppSidebarProps, type AppSidebarTopItem, type Brand, BrandGlyph, type BrandGlyphProps, type ConnectableCapability, type ConnectableEntry, type ConnectableTransport, ConnectorPicker, type ConnectorPickerClient, type ConnectorPickerLens, type ConnectorPickerProps, type ContextOrgGroup, ContextSwitcher, type ContextSwitcherItem, type ContextSwitcherProps, type FallbackModuleDef, Flyout, type FlyoutChild, type FlyoutProps, GLYPH_CANVAS_FILL, type GroupRungItem, type HeaderNavItem, LOCKUP_GAP, LOCKUP_ROW, MARK_CAP_RATIO, MARK_WEIGHT, REEVE_ACCENT, ResponsiveHeader, type ResponsiveHeaderProps, type RungItem, type SidebarLadder, type SidebarLadderParsed, type SidebarRung, type UseLadderRungOptions, WORDMARK_WEIGHT, deriveFallbackLadder, faviconUrl, groupByOrg, reconcileLadder, resolveLadder, useLadderRung, useResponsivePlaceholder, zSidebarLadder };

package/dist/index.d.ts

@@ -584,4 +584,71 @@ interface ContextSwitcherProps {
 }
 declare function ContextSwitcher({ items, activeRefId, onSelect, footer, placeholder, collapsed, side, align, contentClassName, }: ContextSwitcherProps): react.JSX.Element;
 
-export { type AppRungItem, AppSidebar, type AppSidebarBrand, type AppSidebarModuleDef, type AppSidebarProps, type AppSidebarTopItem, type Brand, BrandGlyph, type BrandGlyphProps, type ContextOrgGroup, ContextSwitcher, type ContextSwitcherItem, type ContextSwitcherProps, type FallbackModuleDef, Flyout, type FlyoutChild, type FlyoutProps, GLYPH_CANVAS_FILL, type GroupRungItem, type HeaderNavItem, LOCKUP_GAP, LOCKUP_ROW, MARK_CAP_RATIO, MARK_WEIGHT, REEVE_ACCENT, ResponsiveHeader, type ResponsiveHeaderProps, type RungItem, type SidebarLadder, type SidebarLadderParsed, type SidebarRung, type UseLadderRungOptions, WORDMARK_WEIGHT, deriveFallbackLadder, faviconUrl, groupByOrg, reconcileLadder, resolveLadder, useLadderRung, useResponsivePlaceholder, zSidebarLadder };
+/**
+ * ConnectorPicker (DEV-5578 / CONN-3) — the one data-driven connect
+ * component in @meetreeve/ui. Renders a catalog of connectable entries from
+ * an injected client, owning the whole per-entry state machine
+ * (not-connected -> connecting -> connected, disconnect, inline per-tile
+ * errors, and a return-from-OAuth refresh). Every label is derived from the
+ * entry data the client returns — this file must never hardcode a specific
+ * provider's name (an explicit acceptance criterion); a host app supplies
+ * that entirely through `ConnectableEntry.name` / `.logo` / `.category`.
+ *
+ * Transport-injection precedent: `linkComponent` (DEV-4429/DEV-4391) —
+ * inject the transport, keep behavior in the package. Here the "transport"
+ * is the whole backend round-trip (list/connect/disconnect), injected as
+ * `client` (Matt's decision, 2026-07-25): Reeve passes one built on its own
+ * fetch client; a tenant clone passes ~10 lines of its own.
+ */
+type ConnectableTransport = "composio" | "native";
+type ConnectableCapability = "read" | "write" | "readwrite";
+interface ConnectableEntry {
+    slug: string;
+    name: string;
+    logo: string | null;
+    category: string | null;
+    transport: ConnectableTransport;
+    capability: ConnectableCapability;
+    purposes: string[];
+    connection: {
+        status: "connected" | "not_connected";
+        connected_account_id: string | null;
+        since: string | null;
+    };
+    /** true = tenant has a live connection but the entry left the allowlist. */
+    deprecated: boolean;
+}
+interface ConnectorPickerClient {
+    listConnectable(opts: {
+        purpose?: string;
+    }): Promise<ConnectableEntry[]>;
+    /** composio -> open the returned connect_url; native may resolve with none. */
+    connect(entry: ConnectableEntry): Promise<{
+        connect_url?: string;
+    }>;
+    disconnect(entry: ConnectableEntry): Promise<void>;
+}
+/**
+ * Structurally identical to the app's own `DnaLens` (src/lib/dna-lens.ts) —
+ * this package must never import app code, so it declares its own copy
+ * rather than sharing the type.
+ */
+type ConnectorPickerLens = "visitor" | "member" | "owner";
+interface ConnectorPickerProps {
+    /** The injected transport adapter — required. */
+    client: ConnectorPickerClient;
+    /** Optional purpose slice, forwarded to `client.listConnectable`. */
+    purpose?: string;
+    /**
+     * Default "owner". "visitor"/"member" render nothing and make ZERO
+     * client calls — some host surfaces (e.g. a structurally owner-only
+     * knowledge page) have no visitor/member concept at all, and forcing them
+     * to synthesize a lens would import dead branches.
+     */
+    lens?: ConnectorPickerLens;
+    layout?: "tiles" | "list";
+    onConnected?: (entry: ConnectableEntry) => void;
+}
+declare function ConnectorPicker({ client, purpose, lens, layout, onConnected, }: ConnectorPickerProps): react.JSX.Element | null;
+
+export { type AppRungItem, AppSidebar, type AppSidebarBrand, type AppSidebarModuleDef, type AppSidebarProps, type AppSidebarTopItem, type Brand, BrandGlyph, type BrandGlyphProps, type ConnectableCapability, type ConnectableEntry, type ConnectableTransport, ConnectorPicker, type ConnectorPickerClient, type ConnectorPickerLens, type ConnectorPickerProps, type ContextOrgGroup, ContextSwitcher, type ContextSwitcherItem, type ContextSwitcherProps, type FallbackModuleDef, Flyout, type FlyoutChild, type FlyoutProps, GLYPH_CANVAS_FILL, type GroupRungItem, type HeaderNavItem, LOCKUP_GAP, LOCKUP_ROW, MARK_CAP_RATIO, MARK_WEIGHT, REEVE_ACCENT, ResponsiveHeader, type ResponsiveHeaderProps, type RungItem, type SidebarLadder, type SidebarLadderParsed, type SidebarRung, type UseLadderRungOptions, WORDMARK_WEIGHT, deriveFallbackLadder, faviconUrl, groupByOrg, reconcileLadder, resolveLadder, useLadderRung, useResponsivePlaceholder, zSidebarLadder };

package/dist/index.js

@@ -33,6 +33,7 @@ var src_exports = {};
 __export(src_exports, {
   AppSidebar: () => AppSidebar,
   BrandGlyph: () => BrandGlyph,
+  ConnectorPicker: () => ConnectorPicker,
   ContextSwitcher: () => ContextSwitcher,
   Flyout: () => Flyout,
   GLYPH_CANVAS_FILL: () => GLYPH_CANVAS_FILL,
@@ -838,13 +839,23 @@ function Flyout({
             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"
+              // DEV-6586: this trigger renders as a row inside AppSidebar's own
+              // `<nav>` (a `bg-sidebar` surface that stays dark navy in both
+              // themes) — same fix as NavLink, same measured ratios (default
+              // 8.05:1, hover 13.65:1, active 10.95:1). The flyout PANEL below
+              // is intentionally left on document tokens: it renders via
+              // `position: fixed`, floating over the main content area on
+              // `bg-background`, not over the sidebar.
+              active ? "bg-sidebar-accent text-sidebar-accent-foreground" : "text-sidebar-foreground/70 hover:bg-sidebar-foreground/5 hover:text-sidebar-foreground"
             ),
             children: [
               /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
                 Icon,
                 {
-                  className: cn("size-4 shrink-0", active ? "text-primary" : "text-muted-foreground"),
+                  className: cn(
+                    "size-4 shrink-0",
+                    active ? "text-sidebar-accent-foreground" : "text-sidebar-foreground/70"
+                  ),
                   strokeWidth: 1.5,
                   "aria-hidden": "true"
                 }
@@ -927,13 +938,23 @@ function NavLink({
       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"
+        // DEV-6586: the sidebar is a permanently dark-navy surface in BOTH
+        // app themes (see `--sidebar-*` in globals.css) — styling from
+        // document-theme tokens (text-foreground/text-muted-foreground) put
+        // dark-on-dark text here in light mode. `--sidebar-foreground` /
+        // `--sidebar-accent(-foreground)` are theme-invariant, so hover/
+        // active reliably INCREASE legibility instead of erasing it:
+        // default 8.05:1, hover 13.65:1, active 10.95:1 (all >= 4.5:1 AA).
+        active ? "bg-sidebar-accent text-sidebar-accent-foreground" : "text-sidebar-foreground/70 hover:bg-sidebar-foreground/5 hover:text-sidebar-foreground"
       ),
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
           Icon,
           {
-            className: cn("size-4 shrink-0", active ? "text-primary" : "text-muted-foreground"),
+            className: cn(
+              "size-4 shrink-0",
+              active ? "text-sidebar-accent-foreground" : "text-sidebar-foreground/70"
+            ),
             strokeWidth: 1.5,
             "aria-hidden": "true"
           }
@@ -1058,11 +1079,11 @@ function AppSidebar({
         label: item.label,
         icon: item.icon,
         active,
-        children,
         linkComponent,
         collapsed: collapsedRow,
         forceClosed: openFlyoutId !== null && openFlyoutId !== item.id,
-        onOpenChange: (isOpen) => handleFlyoutOpenChange(item.id, isOpen)
+        onOpenChange: (isOpen) => handleFlyoutOpenChange(item.id, isOpen),
+        children
       },
       item.id
     );
@@ -1076,7 +1097,7 @@ function AppSidebar({
           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",
+          className: "flex items-center justify-center border-b border-sidebar-border px-1 py-4",
           children: [
             /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "sr-only", children: brand.label }),
             /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(BrandGlyph, { brand: { name: brand.label }, size: "xl" })
@@ -1089,9 +1110,9 @@ function AppSidebar({
       {
         href: brand.href,
         "data-testid": "app-sidebar-brand",
-        className: "flex items-center gap-2.5 border-b border-border px-5 py-4",
+        className: "flex items-center gap-2.5 border-b border-sidebar-border px-5 py-4 text-sidebar-foreground",
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "grid size-7 place-items-center rounded-md bg-primary text-primary-foreground", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "font-mono text-sm font-bold", children: (brand.label[0] ?? "r").toUpperCase() }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "grid size-7 place-items-center rounded-md bg-sidebar-primary text-sidebar-primary-foreground", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "font-mono text-sm font-bold", children: (brand.label[0] ?? "r").toUpperCase() }) }),
           /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "truncate text-sm font-semibold tracking-tight", children: brand.label })
         ]
       }
@@ -1147,7 +1168,7 @@ function AppSidebar({
           "aria-modal": "true",
           "aria-label": "Navigation",
           "data-testid": "app-sidebar-mobile-drawer",
-          className: "absolute inset-y-0 left-0 flex w-72 flex-col overflow-y-auto border-r border-border bg-sidebar",
+          className: "absolute inset-y-0 left-0 flex w-72 flex-col overflow-y-auto border-r border-sidebar-border bg-sidebar",
           children: [
             /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "sticky top-0 z-10 flex justify-end bg-sidebar p-2", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
               "button",
@@ -1158,7 +1179,7 @@ function AppSidebar({
                 "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",
+                className: "flex items-center justify-center rounded-md p-2 text-sidebar-foreground/70 hover:bg-sidebar-foreground/5 hover:text-sidebar-foreground",
                 children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(import_lucide_react2.X, { className: "h-5 w-5", "aria-hidden": "true" })
               }
             ) }),
@@ -1176,7 +1197,7 @@ function AppSidebar({
       {
         "data-testid": "app-sidebar-desktop",
         className: cn(
-          "hidden shrink-0 flex-col border-r border-border bg-sidebar md:flex",
+          "hidden shrink-0 flex-col border-r border-sidebar-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.
@@ -1197,7 +1218,7 @@ function AppSidebar({
               ) })
             }
           ),
-          collapsible && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "border-t border-border px-2 py-2", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+          collapsible && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "border-t border-sidebar-border px-2 py-2", children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
             "button",
             {
               type: "button",
@@ -1207,7 +1228,7 @@ function AppSidebar({
               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",
+                "flex items-center gap-2.5 rounded-md px-3 py-1.5 text-sm text-sidebar-foreground/70 transition-colors hover:bg-sidebar-foreground/5 hover:text-sidebar-foreground",
                 collapsed && "justify-center px-0"
               ),
               children: [
@@ -1345,18 +1366,18 @@ function ContextSwitcher({
         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",
+        className: "flex h-10 w-10 items-center justify-center rounded-lg text-sidebar-foreground/70 transition-colors hover:bg-sidebar-foreground/5 hover:text-sidebar-foreground",
         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",
+        className: "group flex items-center gap-2 rounded-md border border-sidebar-border bg-sidebar-accent/60 px-2.5 py-1.5 text-sm font-medium transition-colors hover:bg-sidebar",
         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.jsx)("span", { className: "max-w-[140px] truncate text-sidebar-accent-foreground", children: active?.name || placeholder }),
+          /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_lucide_react3.ChevronDown, { className: "h-3.5 w-3.5 text-sidebar-foreground/70 transition-transform group-data-[state=open]:rotate-180" })
         ]
       }
     ) }),
@@ -1395,10 +1416,263 @@ function ContextSwitcher({
     )
   ] });
 }
+
+// src/connector-picker.tsx
+var import_react9 = require("react");
+var import_jsx_runtime7 = require("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] = (0, import_react9.useState)(null);
+  const [loadError, setLoadError] = (0, import_react9.useState)(null);
+  const [uiState, setUiState] = (0, import_react9.useState)({});
+  const clientRef = (0, import_react9.useRef)(client);
+  clientRef.current = client;
+  const purposeRef = (0, import_react9.useRef)(purpose);
+  purposeRef.current = purpose;
+  const onConnectedRef = (0, import_react9.useRef)(onConnected);
+  onConnectedRef.current = onConnected;
+  const uiStateRef = (0, import_react9.useRef)(uiState);
+  uiStateRef.current = uiState;
+  const load = (0, import_react9.useCallback)(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]);
+  (0, import_react9.useEffect)(() => {
+    if (gated) return;
+    void load();
+  }, [gated, load, purpose]);
+  const refreshAfterReturn = (0, import_react9.useCallback)(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]);
+  (0, import_react9.useEffect)(() => {
+    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 = (0, import_react9.useCallback)(
+    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 = (0, import_react9.useCallback)(
+    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__ */ (0, import_jsx_runtime7.jsxs)("div", { "data-testid": "connector-picker", "data-layout": layout, className: containerClassName, children: [
+    entries === null && !loadError && Array.from({ length: SKELETON_COUNT }).map((_, i) => /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+      "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__ */ (0, import_jsx_runtime7.jsx)("span", { className: "h-8 w-8 shrink-0 animate-pulse rounded bg-foreground/10" }),
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "h-3 flex-1 animate-pulse rounded bg-foreground/10" })
+        ]
+      },
+      i
+    )),
+    loadError && /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+      "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__ */ (0, import_jsx_runtime7.jsx)("span", { children: loadError }),
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("button", { type: "button", onClick: () => void load(), className: "shrink-0 underline", children: "Retry" })
+        ]
+      }
+    ),
+    entries !== null && entries.length === 0 && !loadError && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("p", { "data-testid": "connector-picker-empty", className: "text-sm text-muted-foreground", children: "No connections available." }),
+    entries?.map((entry) => /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+      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__ */ (0, import_jsx_runtime7.jsxs)(
+    "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__ */ (0, import_jsx_runtime7.jsx)(BrandGlyph, { brand: { name: entry.name, logo: entry.logo }, size: "lg" }),
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "min-w-0 flex-1", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("p", { className: "truncate text-sm font-medium", children: entry.name }),
+            entry.deprecated && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+              "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__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "flex items-center gap-1.5 text-xs text-muted-foreground", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { "data-testid": `connector-capability-${entry.slug}`, children: capabilityLabel(entry.capability) }),
+            entry.category && /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(import_jsx_runtime7.Fragment, { children: [
+              /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { "aria-hidden": "true", children: "\xB7" }),
+              /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("span", { className: "truncate", children: entry.category })
+            ] })
+          ] }),
+          isConnected && /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+            "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__ */ (0, import_jsx_runtime7.jsx)("p", { role: "alert", "data-testid": `connector-error-${entry.slug}`, className: "text-xs text-destructive", children: errorMessage })
+        ] }),
+        isConnected ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+          "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__ */ (0, import_jsx_runtime7.jsx)(
+          "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"
+          }
+        )
+      ]
+    }
+  );
+}
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   AppSidebar,
   BrandGlyph,
+  ConnectorPicker,
   ContextSwitcher,
   Flyout,
   GLYPH_CANVAS_FILL,

package/dist/index.mjs

@@ -784,13 +784,23 @@ function Flyout({
             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"
+              // DEV-6586: this trigger renders as a row inside AppSidebar's own
+              // `<nav>` (a `bg-sidebar` surface that stays dark navy in both
+              // themes) — same fix as NavLink, same measured ratios (default
+              // 8.05:1, hover 13.65:1, active 10.95:1). The flyout PANEL below
+              // is intentionally left on document tokens: it renders via
+              // `position: fixed`, floating over the main content area on
+              // `bg-background`, not over the sidebar.
+              active ? "bg-sidebar-accent text-sidebar-accent-foreground" : "text-sidebar-foreground/70 hover:bg-sidebar-foreground/5 hover:text-sidebar-foreground"
             ),
             children: [
               /* @__PURE__ */ jsx3(
                 Icon,
                 {
-                  className: cn("size-4 shrink-0", active ? "text-primary" : "text-muted-foreground"),
+                  className: cn(
+                    "size-4 shrink-0",
+                    active ? "text-sidebar-accent-foreground" : "text-sidebar-foreground/70"
+                  ),
                   strokeWidth: 1.5,
                   "aria-hidden": "true"
                 }
@@ -873,13 +883,23 @@ function NavLink({
       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"
+        // DEV-6586: the sidebar is a permanently dark-navy surface in BOTH
+        // app themes (see `--sidebar-*` in globals.css) — styling from
+        // document-theme tokens (text-foreground/text-muted-foreground) put
+        // dark-on-dark text here in light mode. `--sidebar-foreground` /
+        // `--sidebar-accent(-foreground)` are theme-invariant, so hover/
+        // active reliably INCREASE legibility instead of erasing it:
+        // default 8.05:1, hover 13.65:1, active 10.95:1 (all >= 4.5:1 AA).
+        active ? "bg-sidebar-accent text-sidebar-accent-foreground" : "text-sidebar-foreground/70 hover:bg-sidebar-foreground/5 hover:text-sidebar-foreground"
       ),
       children: [
         /* @__PURE__ */ jsx4(
           Icon,
           {
-            className: cn("size-4 shrink-0", active ? "text-primary" : "text-muted-foreground"),
+            className: cn(
+              "size-4 shrink-0",
+              active ? "text-sidebar-accent-foreground" : "text-sidebar-foreground/70"
+            ),
             strokeWidth: 1.5,
             "aria-hidden": "true"
           }
@@ -1004,11 +1024,11 @@ function AppSidebar({
         label: item.label,
         icon: item.icon,
         active,
-        children,
         linkComponent,
         collapsed: collapsedRow,
         forceClosed: openFlyoutId !== null && openFlyoutId !== item.id,
-        onOpenChange: (isOpen) => handleFlyoutOpenChange(item.id, isOpen)
+        onOpenChange: (isOpen) => handleFlyoutOpenChange(item.id, isOpen),
+        children
       },
       item.id
     );
@@ -1022,7 +1042,7 @@ function AppSidebar({
           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",
+          className: "flex items-center justify-center border-b border-sidebar-border px-1 py-4",
           children: [
             /* @__PURE__ */ jsx4("span", { className: "sr-only", children: brand.label }),
             /* @__PURE__ */ jsx4(BrandGlyph, { brand: { name: brand.label }, size: "xl" })
@@ -1035,9 +1055,9 @@ function AppSidebar({
       {
         href: brand.href,
         "data-testid": "app-sidebar-brand",
-        className: "flex items-center gap-2.5 border-b border-border px-5 py-4",
+        className: "flex items-center gap-2.5 border-b border-sidebar-border px-5 py-4 text-sidebar-foreground",
         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: "grid size-7 place-items-center rounded-md bg-sidebar-primary text-sidebar-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 })
         ]
       }
@@ -1093,7 +1113,7 @@ function AppSidebar({
           "aria-modal": "true",
           "aria-label": "Navigation",
           "data-testid": "app-sidebar-mobile-drawer",
-          className: "absolute inset-y-0 left-0 flex w-72 flex-col overflow-y-auto border-r border-border bg-sidebar",
+          className: "absolute inset-y-0 left-0 flex w-72 flex-col overflow-y-auto border-r border-sidebar-border bg-sidebar",
           children: [
             /* @__PURE__ */ jsx4("div", { className: "sticky top-0 z-10 flex justify-end bg-sidebar p-2", children: /* @__PURE__ */ jsx4(
               "button",
@@ -1104,7 +1124,7 @@ function AppSidebar({
                 "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",
+                className: "flex items-center justify-center rounded-md p-2 text-sidebar-foreground/70 hover:bg-sidebar-foreground/5 hover:text-sidebar-foreground",
                 children: /* @__PURE__ */ jsx4(X2, { className: "h-5 w-5", "aria-hidden": "true" })
               }
             ) }),
@@ -1122,7 +1142,7 @@ function AppSidebar({
       {
         "data-testid": "app-sidebar-desktop",
         className: cn(
-          "hidden shrink-0 flex-col border-r border-border bg-sidebar md:flex",
+          "hidden shrink-0 flex-col border-r border-sidebar-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.
@@ -1143,7 +1163,7 @@ function AppSidebar({
               ) })
             }
           ),
-          collapsible && /* @__PURE__ */ jsx4("div", { className: "border-t border-border px-2 py-2", children: /* @__PURE__ */ jsxs4(
+          collapsible && /* @__PURE__ */ jsx4("div", { className: "border-t border-sidebar-border px-2 py-2", children: /* @__PURE__ */ jsxs4(
             "button",
             {
               type: "button",
@@ -1153,7 +1173,7 @@ function AppSidebar({
               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",
+                "flex items-center gap-2.5 rounded-md px-3 py-1.5 text-sm text-sidebar-foreground/70 transition-colors hover:bg-sidebar-foreground/5 hover:text-sidebar-foreground",
                 collapsed && "justify-center px-0"
               ),
               children: [
@@ -1291,18 +1311,18 @@ function ContextSwitcher({
         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",
+        className: "flex h-10 w-10 items-center justify-center rounded-lg text-sidebar-foreground/70 transition-colors hover:bg-sidebar-foreground/5 hover:text-sidebar-foreground",
         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",
+        className: "group flex items-center gap-2 rounded-md border border-sidebar-border bg-sidebar-accent/60 px-2.5 py-1.5 text-sm font-medium transition-colors hover:bg-sidebar",
         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__ */ jsx6("span", { className: "max-w-[140px] truncate text-sidebar-accent-foreground", children: active?.name || placeholder }),
+          /* @__PURE__ */ jsx6(ChevronDown, { className: "h-3.5 w-3.5 text-sidebar-foreground/70 transition-transform group-data-[state=open]:rotate-180" })
         ]
       }
     ) }),
@@ -1341,9 +1361,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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@meetreeve/ui",
-  "version": "0.7.1",
+  "version": "0.8.1",
   "description": "Shared brand-adaptive UI primitives for MindFortress frontends — min-size tokens, a favicon→logo→monogram BrandGlyph, a responsive header that keeps the search bar usable on mobile, and AppSidebar's viewport-driven auto-collapse ladder.",
   "license": "UNLICENSED",
   "main": "./dist/index.js",
@@ -35,7 +35,7 @@
     "dev": "tsup --watch",
     "test": "vitest run",
     "typecheck": "tsc --noEmit",
-    "check:esm": "node scripts/check-esm-import.mjs",
+    "check:esm": "node ../../scripts/check-esm-import.mjs .",
     "prepublishOnly": "npm run build"
   },
   "publishConfig": {
@@ -55,6 +55,7 @@
     "@testing-library/dom": "^10.4.1",
     "@testing-library/react": "^16.3.2",
     "@testing-library/user-event": "^14.6.1",
+    "@types/node": "^20.19.43",
     "@types/react": "^19",
     "@types/react-dom": "^19",
     "@vitejs/plugin-react": "^5.1.3",