@meetreeve/ui 0.6.3 → 0.8.0

package/dist/index.d.mts

@@ -42,7 +42,14 @@ interface Brand {
 declare function faviconUrl(domain: string | null | undefined): string | null;
 interface BrandGlyphProps {
     brand: Brand;
-    size?: "sm" | "lg";
+    /**
+     * "sm"/"lg" are lockup sizes (a wordmark sits alongside the glyph
+     * elsewhere in the same surface — see MARK_CAP_RATIO). "xl" is for a
+     * bare, standalone glyph slot with no adjacent wordmark at all (e.g. a
+     * collapsed 56px icon rail, DEV-5331) — governed by GLYPH_CANVAS_FILL
+     * instead, same rule a favicon/avatar tile follows.
+     */
+    size?: "sm" | "lg" | "xl";
     /** Slightly lighter tint behind image sources (e.g. dropdown rows). */
     subtle?: boolean;
     className?: string;
@@ -341,6 +348,20 @@ interface AppSidebarProps {
      * `/studio` should NOT light up on `/studio/photo`).
      */
     isActive?: (href: string, activePath: string) => boolean;
+    /**
+     * Whether the desktop rail can collapse to a 56px icon rail (DEV-5331,
+     * porting AppNavRail's click-to-pin model into the package). Default
+     * `true`. `false` hides the toggle entirely — the rail then just stays at
+     * whatever `defaultCollapsed` says, with no way for the user to change it.
+     * Mobile is never affected either way (collapse is desktop-only).
+     */
+    collapsible?: boolean;
+    /** Initial collapsed state before any persisted value is read. Default `false`. */
+    defaultCollapsed?: boolean;
+    /** Fires with the new collapsed value whenever the user toggles the rail. */
+    onCollapsedChange?: (collapsed: boolean) => void;
+    /** localStorage key for the persisted collapsed preference. Default `"reeve-sidebar-collapsed"`. */
+    storageKey?: string;
     /** Merged onto the desktop `<aside>` itself — there is no extra wrapping
      *  element (see the render note below on why that matters for height). */
     className?: string;
@@ -355,7 +376,7 @@ interface AppSidebarProps {
  * dependency, matching ResponsiveHeader's existing disclosure pattern in
  * this same package.
  */
-declare function AppSidebar({ ladder, modules, groupOrder, activePath, brand, topItem, menuLabel, ladderOptions, linkComponent, isActive, className, }: AppSidebarProps): react.JSX.Element;
+declare function AppSidebar({ ladder, modules, groupOrder, activePath, brand, topItem, menuLabel, ladderOptions, linkComponent, isActive, collapsible, defaultCollapsed, onCollapsedChange, storageKey, className, }: AppSidebarProps): react.JSX.Element;
 
 /**
  * Minimal shape AppSidebar's fallback derivation needs from a module registry
@@ -436,6 +457,29 @@ interface FlyoutProps {
      * mirrors ResponsiveHeader's `linkComponent` prop (DEV-4429) exactly.
      */
     linkComponent?: ElementType;
+    /**
+     * Icon-only trigger for AppSidebar's collapsed (56px) rail (DEV-5331): the
+     * label collapses to a `sr-only` span (kept in the a11y tree) plus a native
+     * `title` tooltip — the package has no tooltip primitive and adding one
+     * (a Radix dep) is explicitly out of scope. The panel's own child rows are
+     * unaffected — they always show full labels regardless of this flag.
+     */
+    collapsed?: boolean;
+    /**
+     * Sibling-coordination hooks (DEV-5331 fix — Matt's live review found two
+     * folded-group flyouts open + overlapping at once, since each Flyout had
+     * zero awareness of its siblings). `onOpenChange` reports every open/
+     * closed transition of THIS instance's own hover/click intent — reported
+     * even while `forceClosed` is currently suppressing it, so a parent
+     * coordinator can learn "this one wants to open" and hand it the single
+     * active slot. `forceClosed` is set by that coordinator to immediately
+     * hide THIS instance (and reset its internal hover/click state) the
+     * instant a different sibling becomes the active one. Both optional and
+     * independent of each other — omitted, Flyout is fully standalone (its
+     * own state, unaware of any siblings), exactly as before.
+     */
+    onOpenChange?: (open: boolean) => void;
+    forceClosed?: boolean;
     className?: string;
 }
 /**
@@ -473,7 +517,7 @@ interface FlyoutProps {
  * than working around it. jsdom never computes real scrollable-overflow
  * geometry, so no unit test caught this — only an actual browser render did.
  */
-declare function Flyout({ label, icon, active, children, linkComponent, className }: FlyoutProps): react.JSX.Element;
+declare function Flyout({ label, icon, active, children, linkComponent, collapsed, onOpenChange, forceClosed, className, }: FlyoutProps): react.JSX.Element;
 
 /**
  * ContextSwitcher (DEV-4408) — promoted out of reeve-frontend's
@@ -540,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

@@ -42,7 +42,14 @@ interface Brand {
 declare function faviconUrl(domain: string | null | undefined): string | null;
 interface BrandGlyphProps {
     brand: Brand;
-    size?: "sm" | "lg";
+    /**
+     * "sm"/"lg" are lockup sizes (a wordmark sits alongside the glyph
+     * elsewhere in the same surface — see MARK_CAP_RATIO). "xl" is for a
+     * bare, standalone glyph slot with no adjacent wordmark at all (e.g. a
+     * collapsed 56px icon rail, DEV-5331) — governed by GLYPH_CANVAS_FILL
+     * instead, same rule a favicon/avatar tile follows.
+     */
+    size?: "sm" | "lg" | "xl";
     /** Slightly lighter tint behind image sources (e.g. dropdown rows). */
     subtle?: boolean;
     className?: string;
@@ -341,6 +348,20 @@ interface AppSidebarProps {
      * `/studio` should NOT light up on `/studio/photo`).
      */
     isActive?: (href: string, activePath: string) => boolean;
+    /**
+     * Whether the desktop rail can collapse to a 56px icon rail (DEV-5331,
+     * porting AppNavRail's click-to-pin model into the package). Default
+     * `true`. `false` hides the toggle entirely — the rail then just stays at
+     * whatever `defaultCollapsed` says, with no way for the user to change it.
+     * Mobile is never affected either way (collapse is desktop-only).
+     */
+    collapsible?: boolean;
+    /** Initial collapsed state before any persisted value is read. Default `false`. */
+    defaultCollapsed?: boolean;
+    /** Fires with the new collapsed value whenever the user toggles the rail. */
+    onCollapsedChange?: (collapsed: boolean) => void;
+    /** localStorage key for the persisted collapsed preference. Default `"reeve-sidebar-collapsed"`. */
+    storageKey?: string;
     /** Merged onto the desktop `<aside>` itself — there is no extra wrapping
      *  element (see the render note below on why that matters for height). */
     className?: string;
@@ -355,7 +376,7 @@ interface AppSidebarProps {
  * dependency, matching ResponsiveHeader's existing disclosure pattern in
  * this same package.
  */
-declare function AppSidebar({ ladder, modules, groupOrder, activePath, brand, topItem, menuLabel, ladderOptions, linkComponent, isActive, className, }: AppSidebarProps): react.JSX.Element;
+declare function AppSidebar({ ladder, modules, groupOrder, activePath, brand, topItem, menuLabel, ladderOptions, linkComponent, isActive, collapsible, defaultCollapsed, onCollapsedChange, storageKey, className, }: AppSidebarProps): react.JSX.Element;
 
 /**
  * Minimal shape AppSidebar's fallback derivation needs from a module registry
@@ -436,6 +457,29 @@ interface FlyoutProps {
      * mirrors ResponsiveHeader's `linkComponent` prop (DEV-4429) exactly.
      */
     linkComponent?: ElementType;
+    /**
+     * Icon-only trigger for AppSidebar's collapsed (56px) rail (DEV-5331): the
+     * label collapses to a `sr-only` span (kept in the a11y tree) plus a native
+     * `title` tooltip — the package has no tooltip primitive and adding one
+     * (a Radix dep) is explicitly out of scope. The panel's own child rows are
+     * unaffected — they always show full labels regardless of this flag.
+     */
+    collapsed?: boolean;
+    /**
+     * Sibling-coordination hooks (DEV-5331 fix — Matt's live review found two
+     * folded-group flyouts open + overlapping at once, since each Flyout had
+     * zero awareness of its siblings). `onOpenChange` reports every open/
+     * closed transition of THIS instance's own hover/click intent — reported
+     * even while `forceClosed` is currently suppressing it, so a parent
+     * coordinator can learn "this one wants to open" and hand it the single
+     * active slot. `forceClosed` is set by that coordinator to immediately
+     * hide THIS instance (and reset its internal hover/click state) the
+     * instant a different sibling becomes the active one. Both optional and
+     * independent of each other — omitted, Flyout is fully standalone (its
+     * own state, unaware of any siblings), exactly as before.
+     */
+    onOpenChange?: (open: boolean) => void;
+    forceClosed?: boolean;
     className?: string;
 }
 /**
@@ -473,7 +517,7 @@ interface FlyoutProps {
  * than working around it. jsdom never computes real scrollable-overflow
  * geometry, so no unit test caught this — only an actual browser render did.
  */
-declare function Flyout({ label, icon, active, children, linkComponent, className }: FlyoutProps): react.JSX.Element;
+declare function Flyout({ label, icon, active, children, linkComponent, collapsed, onOpenChange, forceClosed, className, }: FlyoutProps): react.JSX.Element;
 
 /**
  * ContextSwitcher (DEV-4408) — promoted out of reeve-frontend's
@@ -540,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 };