@meetreeve/ui 0.7.1 → 0.8.0

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,
@@ -1058,11 +1059,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
     );
@@ -1395,10 +1396,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

@@ -1004,11 +1004,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
     );
@@ -1341,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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@meetreeve/ui",
-  "version": "0.7.1",
+  "version": "0.8.0",
   "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",