@cosmoops/connect-sdk 0.9.0 → 0.16.0

package/dist/types/client/components/confirm-dialog.d.ts

@@ -0,0 +1,34 @@
+import { type ReactNode } from "react";
+export interface ConnectConfirmDialogProps {
+    /** The control that opens it. Rendered inside `Modal.Trigger`. */
+    trigger: ReactNode;
+    title: ReactNode;
+    /** What will happen, in the user's words. Name the thing being acted on. */
+    description?: ReactNode;
+    confirmLabel?: string;
+    cancelLabel?: string;
+    /** `danger` for anything that destroys data. */
+    tone?: "danger" | "primary";
+    onConfirm: () => void | Promise<void>;
+}
+/**
+ * The confirmation in front of a destructive action.
+ *
+ * **It closes on confirm, not on response.** Holding the modal open until the
+ * server answers makes every delete feel like a form submission, and the error
+ * path already has somewhere to go - a toast, or the row reappearing. A dialog
+ * that stays open to report failure is right only where the failure is
+ * *expected* and correctable in place (a seat cap, a last-admin invariant),
+ * and that is a blocking form, not this.
+ *
+ * `onConfirm` may return a promise. It is not awaited before closing, but a
+ * rejection is caught here rather than escaping - an error thrown out of an
+ * async transition reaches the nearest error boundary and takes the page down.
+ *
+ * The anatomy is HeroUI's: `Modal.Backdrop` owns the open state,
+ * `Modal.Container` the sizing, `Modal.Dialog` the focus trap. The trigger
+ * goes inside `Modal.Trigger`, which *is* a React Aria button - so pass a
+ * plain element, never a `<Button>`, or the nested button swallows the press
+ * and the dialog silently never opens.
+ */
+export declare function ConnectConfirmDialog({ trigger, title, description, confirmLabel, cancelLabel, tone, onConfirm, }: Readonly<ConnectConfirmDialogProps>): import("react").JSX.Element;

package/dist/types/client/components/cursor-pagination.d.ts

@@ -0,0 +1,27 @@
+export interface ConnectCursorPaginationProps {
+    /** How many rows the current page is showing. Used for the live-region count. */
+    shown: number;
+    /** The cursor for the next page, or `null` when this is the last one. */
+    nextCursor: string | null;
+    /** Whether a previous page exists - the caller owns the cursor history. */
+    hasPrevious: boolean;
+    onNext: (cursor: string) => void;
+    onPrevious: () => void;
+    isPending?: boolean;
+    /** Singular/plural noun for the count, e.g. `["contact", "contacts"]`. */
+    noun?: readonly [string, string];
+}
+/**
+ * Next / previous for a cursor-paginated list.
+ *
+ * Cursor rather than page numbers, and the component shape follows from that:
+ * there is no "page 7 of 42" because a keyset-paginated list does not know how
+ * many pages there are without a second count query over the same filter -
+ * which is a billed index scan for a number nobody acts on. What a user does
+ * act on is "more" and "back", and those are exact.
+ *
+ * The count is announced in a live region so a screen-reader user learns that
+ * filtering or paging changed the result set. Without it the table silently
+ * swaps its contents.
+ */
+export declare function ConnectCursorPagination({ shown, nextCursor, hasPrevious, onNext, onPrevious, isPending, noun, }: Readonly<ConnectCursorPaginationProps>): import("react").JSX.Element;

package/dist/types/client/components/filter-tabs.d.ts

@@ -0,0 +1,26 @@
+export interface ConnectFilterTabsOption<TValue extends string> {
+    value: TValue | null;
+    label: string;
+    /** Shown as a count beside the label. Omit where a count would need its own query. */
+    count?: number;
+}
+export interface ConnectFilterTabsProps<TValue extends string> {
+    options: ReadonlyArray<ConnectFilterTabsOption<TValue>>;
+    value: TValue | null;
+    onChange: (value: TValue | null) => void;
+    /** Names the group for assistive technology - "Filter contacts by lifecycle". */
+    label: string;
+}
+/**
+ * A single-select filter strip - the "All / Open / Won / Lost" row above a
+ * list.
+ *
+ * Real radio semantics rather than a row of buttons: it is a single choice
+ * from a closed set, so arrow keys should move between options and the
+ * selected one should be announced as selected. A group of `<button>`s gets
+ * neither, and that is the usual hand-rolled shape.
+ *
+ * Scrolls horizontally rather than wrapping on a narrow viewport - a filter
+ * strip that wraps to three lines pushes the list itself off the screen.
+ */
+export declare function ConnectFilterTabs<TValue extends string>({ options, value, onChange, label, }: Readonly<ConnectFilterTabsProps<TValue>>): import("react").JSX.Element;

package/dist/types/client/components/grievance-notice.d.ts

@@ -0,0 +1,31 @@
+import type { ReactNode } from "react";
+export interface ConnectGrievanceNoticeProps {
+    /**
+     * Heading text. `null` renders none, for embedding inside a page that
+     * already has one.
+     */
+    title?: ReactNode;
+    /**
+     * What this application calls itself in the sentence naming the processor
+     * relationship. Omit to leave that sentence out entirely.
+     */
+    applicationName?: string;
+    className?: string;
+}
+/**
+ * The DPDP s.13 grievance channel, rendered.
+ *
+ * Every application on the platform is a Data Processor under one notice, so
+ * the wording lives here rather than being retyped per application - a user
+ * comparing two applications' privacy pages should not find two different
+ * accounts of who their Data Fiduciary is.
+ *
+ * Renders nothing at all while loading and nothing on failure, rather than a
+ * skeleton or an error. That is unusual here and deliberate: this component
+ * is almost always inside a larger privacy page that has its own content, and
+ * a red error box in the middle of a legal notice reads as the notice itself
+ * being broken. The address is also on the public web either way. Pass
+ * `useConnectCompanyProfile()` directly to your own layout if you want to
+ * handle those states yourself.
+ */
+export declare function ConnectGrievanceNotice({ title, applicationName, className, }: Readonly<ConnectGrievanceNoticeProps>): import("react").JSX.Element | null;

package/dist/types/client/components/link-button.d.ts

@@ -1,20 +1,43 @@
 import { type ButtonProps } from "@heroui/react";
+import type { ReactElement, ReactNode } from "react";
 export type ConnectLinkButtonProps = Omit<ButtonProps, "render"> & {
     href: string;
+    /**
+     * The host's router link, if it has one.
+     *
+     * Without it this renders a plain `<a href>`, which navigates under every
+     * router but costs a **full document load** - in an App Router app that
+     * throws away the client cache and re-runs the whole tree, which is very
+     * visible on a button sitting inside a page the user is working in.
+     *
+     * ```tsx
+     * <ConnectLinkButton href="/deals" renderLink={(props) => <Link {...props} />}>
+     *   Open board
+     * </ConnectLinkButton>
+     * ```
+     *
+     * Same shape as `AppShell`'s `renderLink`, so a host declares its router
+     * once and passes the same function to both. This package imports nothing
+     * from `next` - see the `./next` entry's doc comment for why that is a hard
+     * rule - so handing the link component in is the only way it can be a client
+     * transition.
+     */
+    renderLink?: (props: {
+        href: string;
+        className?: string;
+        children: ReactNode;
+    }) => ReactElement;
 };
 /**
- * A HeroUI `Button` that renders a real `<a>`.
+ * A HeroUI `Button` that renders a link.
  *
- * A plain anchor, deliberately not a router link: this package imports nothing
- * from `next` (see the `./next` entry's doc comment for why that is a hard
- * rule), so it cannot know which router - if any - the host app uses. An
- * `<a href>` navigates under all of them, and a host that wants client-side
- * routing can pass its own element via `render` on the underlying `Button`.
+ * HeroUI v3's `Button` has no `as` prop, so `<Button as={Link}>` does not type
+ * check and does not work - this is the supported route, via `render`.
  *
  * The cast is the same one HeroUI's own "Render Function" example needs:
  * `render` types its argument as the props of the element `Button` would have
- * emitted, which is a `<button>` - including a `ref` typed to
+ * emitted, which is a `<button>`, including a `ref` typed to
  * `HTMLButtonElement`. Spreading that onto an anchor is sound at runtime and
- * unrepresentable in the type, which is exactly what a cast is for.
+ * unrepresentable in the type, which is what the cast is for.
  */
-export declare function ConnectLinkButton({ href, ...props }: Readonly<ConnectLinkButtonProps>): import("react").JSX.Element;
+export declare function ConnectLinkButton({ href, renderLink, ...props }: Readonly<ConnectLinkButtonProps>): import("react").JSX.Element;

package/dist/types/client/components/logo.d.ts

@@ -14,7 +14,23 @@ export interface ConnectLogoProps {
      * Falls back to the Connect rings when omitted.
      */
     icon?: ReactNode;
-    /** Mark only, no wordmark - for a collapsed sidebar or a favicon-sized slot. */
+    /**
+     * Which halves of the lockup to draw.
+     *
+     * - `"full"` - badge and wordmark, the default.
+     * - `"mark"` - the badge alone, for a collapsed rail or a favicon-sized slot.
+     * - `"wordmark"` - the words alone, for a layout that already draws the
+     *   badge somewhere fixed. The sidebar header uses this: the badge stays put
+     *   while the words fade, and rendering a second badge only to hide it with
+     *   a CSS child selector is how that kind of layout quietly rots.
+     */
+    variant?: "full" | "mark" | "wordmark";
+    /**
+     * Mark only, no wordmark.
+     *
+     * @deprecated Pass `variant="mark"`. Kept because it is the published 0.11
+     * API; `variant` wins when both are given.
+     */
     collapsed?: boolean;
     className?: string;
 }
@@ -32,4 +48,4 @@ export interface ConnectLogoProps {
  * as `text-sm`, with the badge, gap and tracking all in proportion. That is
  * why there is no `size` prop.
  */
-export declare function ConnectLogo({ name, icon, collapsed, className }: ConnectLogoProps): import("react").JSX.Element;
+export declare function ConnectLogo({ name, icon, variant, collapsed, className }: ConnectLogoProps): import("react").JSX.Element;

package/dist/types/client/components/nav.d.ts

@@ -33,6 +33,21 @@ export interface ConnectNavItem {
      * step with this one.
      */
     gateExempt?: boolean;
+    /**
+     * Who this route is for. Omit - the default - and it renders for everyone,
+     * which is what every route on an ordinary application is.
+     *
+     * - `"staff"` shows it only to a Connect platform staff session; your
+     *   operator console goes here.
+     * - `"member"` hides it *from* staff. Reach for it on anything that reads
+     *   the workspace - billing, plans, usage, team - since a staff session has
+     *   no workspace and those routes can only fail for it.
+     *
+     * Filtering here is presentation, not access: it decides which links a
+     * person sees, and a link is not a permission. The route itself must still
+     * check `staff` on your server - see `<ConnectPlatformGate>`.
+     */
+    audience?: "staff" | "member";
 }
 /** A titled group of items. Untitled groups render as a plain divider-free block. */
 export interface ConnectNavSection {
@@ -106,5 +121,14 @@ export declare function resolveActivePath(pathname: string, nav: ConnectNav): st
  * lights up on every app's home route. External items are never active.
  */
 export declare function isNavItemActive(item: ConnectNavItem, activeHref: string | null): boolean;
+/**
+ * `nav` with every item the current session should not see removed - see
+ * `ConnectNavItem.audience`.
+ *
+ * Applied to nested `items` too, and a parent whose children all disappear is
+ * dropped along with them: a section header pointing at nothing reads as a
+ * broken link rather than as a hidden one.
+ */
+export declare function filterNavForAudience(nav: ConnectNav, isStaff: boolean): ConnectNav;
 /** Hrefs declared `gateExempt` - the routes `AppShell` renders outside its `ConnectAccessGate`. */
 export declare function gateExemptPaths(nav: ConnectNav): string[];

package/dist/types/client/components/plan-pricing.d.ts

@@ -24,6 +24,16 @@ export declare function formatPrice(paise: number): string;
  * plan reads as an upgrade over every monthly one.
  */
 export declare function monthlyOf(price: number, billingInterval: Plan["billingInterval"]): number;
+export declare function intervalLabel(billingInterval: Plan["billingInterval"]): {
+    per: string;
+    short: string;
+    adverb: string;
+};
+/**
+ * `/month`, `/year` - and nothing at all for a one-time plan, where a price
+ * with no slash is the honest rendering.
+ */
+export declare function pricePerLabel(billingInterval: Plan["billingInterval"]): string;
 export declare function discountLabel(discount: AppliedDiscount): string;
 /**
  * The minimum a plan-like object has to expose to be grouped or compared -

package/dist/types/client/components/platform-gate.d.ts

@@ -0,0 +1,53 @@
+import type { ReactNode } from "react";
+export interface ConnectPlatformGateProps {
+    /**
+     * Restrict to these platform roles. Omit to accept any staff session, which
+     * is the common case - your application already chose which roles it accepts
+     * when a platform admin turned staff access on for it, and repeating that
+     * list here is a second copy to keep in sync.
+     *
+     * Pass one only when your own console has tiers: a `developer` seeing the
+     * read-only half of what a `platform_admin` can edit.
+     */
+    roles?: string[];
+    children: ReactNode;
+    /**
+     * Rendered for an ordinary member session. Defaults to `null` - hiding the
+     * subtree, which is what this gate is normally for. An operator console is
+     * usually better hidden than explained.
+     */
+    fallback?: ReactNode;
+    /** Shown until the session read settles. Defaults to nothing. */
+    loading?: ReactNode;
+}
+/**
+ * Renders `children` only for a Connect platform staff session.
+ *
+ * ```tsx
+ * <ConnectPlatformGate>
+ *   <LinkMasterConsole />
+ * </ConnectPlatformGate>
+ * ```
+ *
+ * Staff are Connect's own operators - `platform_admin`, `platform_manager`,
+ * `developer` - signing into *your* application. They belong to no workspace,
+ * so a staff session carries no `workspaceId`, no subscription and no member
+ * role; see `SessionAccess.staff`. Staff access is off by default and turned on
+ * per application by a Connect platform admin, so this gate renders nothing
+ * until that happens.
+ *
+ * **This is a UX gate, not a security boundary** - the same caveat every gate
+ * in this package carries, and it matters more here than anywhere else,
+ * because what is behind this one is usually an operator console. The browser
+ * can ignore this component entirely. Every route it reveals must re-check
+ * `staff` on your own server:
+ *
+ * ```ts
+ * const { staff, role } = await client.identity.getUser(sessionToken);
+ * if (!staff) return forbidden();
+ * ```
+ *
+ * Renders `loading` - not `fallback` - while the session is unknown, so an
+ * operator never flickers through the customer layout on the way in.
+ */
+export declare function ConnectPlatformGate({ roles, children, fallback, loading, }: ConnectPlatformGateProps): import("react").JSX.Element;

package/dist/types/client/components/shell-context.d.ts

@@ -0,0 +1,116 @@
+import { type ReactNode } from "react";
+import type { ConnectLinkRenderer } from "./nav.js";
+/** A plain anchor - correct anywhere, and a full page load. See `ConnectLinkRenderer`. */
+export declare const defaultRenderLink: ConnectLinkRenderer;
+/**
+ * The rail's two widths, in pixels, and the one place they are written down.
+ *
+ * They are numbers rather than Tailwind classes because the rail animates
+ * between them - `motion` interpolates a number and cannot interpolate
+ * `w-16` into `w-64`.
+ *
+ * **The pairing is load-bearing, not arbitrary.** Every row in the sidebar is
+ * laid out so its glyph sits exactly `RAIL_GUTTER + ROW_GUTTER + 10px` from
+ * the rail's left edge - 32px, which is also `RAIL_COLLAPSED / 2`. So the
+ * collapsed rail centres every icon *without a single centring rule*, and
+ * nothing moves horizontally while the width animates. Change either width
+ * and that identity breaks: the icons drift sideways during the transition,
+ * which is the exact stutter this geometry exists to avoid.
+ */
+export declare const RAIL_COLLAPSED = 64;
+export declare const RAIL_EXPANDED = 264;
+/** Horizontal padding inside the rail, on every region. Tailwind `px-3`. */
+export declare const RAIL_GUTTER = 12;
+/**
+ * The row shape every sidebar control shares - nav items, the workspace tile,
+ * the launcher, the user button.
+ *
+ * `overflow-hidden` + `whitespace-nowrap` is what makes the collapse smooth:
+ * the label is *clipped* by the shrinking rail rather than re-wrapped or
+ * re-measured, so a width animation costs no reflow. Fading the label with
+ * `SidebarLabel` on top of that hides the clip itself.
+ */
+export declare const SIDEBAR_ROW = "group/row relative flex h-10 w-full shrink-0 items-center justify-start gap-3 overflow-hidden whitespace-nowrap rounded-lg pe-2 text-sm font-normal transition-colors focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-focus";
+/**
+ * Leading inset for a row whose glyph is 20px wide (a nav icon, the launcher).
+ * `10 + 10 = 20`, and `RAIL_GUTTER + 20 = 32`. See `RAIL_COLLAPSED`.
+ */
+export declare const SIDEBAR_ROW_ICON = "ps-[10px]";
+/**
+ * Leading inset for a row whose glyph is 32px wide (the avatar, the workspace
+ * tile). `4 + 16 = 20`, landing on the same 32px centre as `SIDEBAR_ROW_ICON`.
+ */
+export declare const SIDEBAR_ROW_TILE = "ps-[4px]";
+/**
+ * The class list for one sidebar row, in one place.
+ *
+ * Three different elements need it - a plain `<button>` (`ConnectSidebarRow`),
+ * a rendered link (`ConnectSidebarNav`), and a HeroUI `<Button>` acting as a
+ * `Modal`/`Dropdown` trigger (the account row, the launcher, the workspace
+ * tile). They cannot share a component, because a React Aria overlay has to
+ * own its own trigger element - so they share this instead. A second copy of
+ * the string is a row that drifts off the 32px centre and takes the collapse
+ * animation's smoothness with it.
+ *
+ * On the HeroUI trigger: these are all Tailwind *utilities*, and HeroUI's
+ * `.button` is a component class, so the utility layer wins - which is what
+ * lets a `w-fit`, centred, `px-`-padded button take this shape at all.
+ */
+export declare function sidebarRowClass(options?: Readonly<{
+    /** The glyph is 32px (an avatar, a workspace tile) rather than 20px. */
+    tile?: boolean;
+    /** Paint the active treatment. */
+    active?: boolean;
+    className?: string;
+}>): string;
+export interface ConnectShellContextValue {
+    /** Icon-only rail. Always `false` inside the mobile drawer - see `AppShell`. */
+    collapsed: boolean;
+    /** Whether a collapse control should be offered at all. */
+    collapsible: boolean;
+    setCollapsed: (collapsed: boolean) => void;
+    renderLink: ConnectLinkRenderer;
+    /** The host router's current path, if it supplied one. */
+    activePath?: string;
+    /** Called after any sidebar link is pressed - the mobile drawer closes itself with this. */
+    onNavigate?: () => void;
+}
+/**
+ * Shared state for every part of the shell, so `ConnectSidebarNav`,
+ * `ConnectWorkspaceSwitcher` and `ConnectUserButton` all know whether the rail
+ * is collapsed without the host threading a prop through three layers.
+ *
+ * This is the piece that makes the shell *composable* rather than only
+ * configurable: the parts are exported and can be rearranged, and they still
+ * agree about collapse, routing and the mobile drawer because they read one
+ * context instead of one another's props.
+ */
+export declare function ConnectShellProvider({ value, children, }: Readonly<{
+    value: ConnectShellContextValue;
+    children: ReactNode;
+}>): import("react").JSX.Element;
+/**
+ * The shell state a sidebar part is rendering inside.
+ *
+ * Falls back to "expanded, not collapsible, plain anchors" rather than
+ * throwing, because every part is also exported for use *outside* a shell -
+ * a host dropping `ConnectSidebarNav` into a layout it already owns should
+ * not have to mount a provider to get a nav column.
+ */
+export declare function useConnectShell(): ConnectShellContextValue;
+/**
+ * A sidebar row's text, faded out as the rail collapses.
+ *
+ * Opacity only - never width, height or margin. The rail's own width
+ * animation already moves the clip edge past this text; animating the text's
+ * box as well would make two things fight over the same pixels and is what
+ * makes a collapsing sidebar look like it stutters.
+ *
+ * Asymmetric timing on purpose. Collapsing, the label leaves *first* (no
+ * delay, quick) so the rail never appears to squeeze text; expanding, it
+ * arrives *after* the rail has opened enough to hold it.
+ */
+export declare function SidebarLabel({ children, className, }: Readonly<{
+    children: ReactNode;
+    className?: string;
+}>): import("react").JSX.Element;

package/dist/types/client/components/side-nav.d.ts

@@ -1,19 +1,20 @@
+import { defaultRenderLink } from "./shell-context.js";
 import { type ConnectLinkRenderer, type ConnectNav } from "./nav.js";
-/** A plain anchor - correct anywhere, and a full page load. See `ConnectLinkRenderer`. */
-export declare const defaultRenderLink: ConnectLinkRenderer;
-export interface ConnectSideNavProps {
+export { defaultRenderLink };
+export interface ConnectSidebarNavProps {
     /** Items, sections, or a mix - see `ConnectNav`. */
     nav: ConnectNav;
     /**
-     * The current path. Pass your router's own (`usePathname()` in Next) -
-     * without it the nav reads `window.location` and patches `history` to hear
-     * about client-side navigations, which works but is guesswork the router
-     * never has to do. See `useActivePath`.
+     * The current path. Pass your router's own (`usePathname()` in Next).
+     * Inherited from `AppShell` when omitted; without either, the nav
+     * reads `window.location` and patches `history` to hear about client-side
+     * navigations - which works, but is guesswork the router never has to do.
+     * See `useActivePath`.
      */
     activePath?: string;
-    /** See `ConnectLinkRenderer`. Defaults to a plain `<a>`. */
+    /** See `ConnectLinkRenderer`. Inherited from the shell; defaults to a plain `<a>`. */
     renderLink?: ConnectLinkRenderer;
-    /** Icon-only rail. Labels move into tooltips and children are hidden. */
+    /** Icon-only rail. Inherited from the shell when omitted. */
     collapsed?: boolean;
     /** Called after any nav link is pressed - the mobile drawer closes itself with this. */
     onNavigate?: () => void;
@@ -24,8 +25,21 @@ export interface ConnectSideNavProps {
  * children, and the active highlight.
  *
  * `AppShell` renders this inside its rail and its mobile drawer, and it
- * is exported for a host that wants the shell's navigation without its
- * chrome: the same items, the same active resolution, dropped into a layout
- * you already have.
+ * is exported for a host that wants the shell's navigation without its chrome:
+ * the same items, the same active resolution, dropped into a layout you
+ * already have.
+ *
+ * Every prop is optional except `nav`, because inside a shell they are all
+ * inherited from it. Passing one wins over what the shell says - which is how
+ * a second nav column (see `secondaryNav`) can share the rail's collapse state
+ * while keeping its own items.
+ */
+export declare function ConnectSidebarNav({ nav, activePath, renderLink, collapsed, onNavigate, className, }: ConnectSidebarNavProps): import("react").JSX.Element;
+/**
+ * @deprecated Renamed to `ConnectSidebarNav` in 0.12 - the rail is a
+ * `ConnectSidebar` now, and its pieces are named after it. Identical
+ * behaviour; this alias will be removed in a later minor.
  */
-export declare function ConnectSideNav({ nav, activePath, renderLink, collapsed, onNavigate, className, }: ConnectSideNavProps): import("react").JSX.Element;
+export declare const ConnectSideNav: typeof ConnectSidebarNav;
+/** @deprecated Renamed to `ConnectSidebarNavProps`. */
+export type ConnectSideNavProps = ConnectSidebarNavProps;

package/dist/types/client/components/sidebar.d.ts

@@ -0,0 +1,95 @@
+import type { ComponentPropsWithoutRef, ReactNode } from "react";
+export interface ConnectSidebarProps {
+    /**
+     * The rail's contents, top to bottom. `AppShell` composes the default
+     * set; pass your own to rearrange them.
+     */
+    children: ReactNode;
+    /** Accessible name for the `<aside>`. Defaults to `"Sidebar"`. */
+    label?: string;
+    className?: string;
+}
+/**
+ * The application rail: a fixed-width column that animates between an
+ * icon-only 64px and a labelled 264px.
+ *
+ * **Why width, and nothing else, animates.** Every row inside puts its glyph
+ * on the same 32px centre in both states (see `RAIL_COLLAPSED`), and every
+ * label is clipped rather than re-measured (see `SIDEBAR_ROW`). So the only
+ * property in flight is this element's width: no child moves, no text
+ * re-wraps, and there is no per-frame layout pass on the rows. That is why the
+ * collapse looks smooth rather than merely fast.
+ *
+ * Hidden below `md`. The mobile drawer renders the same children with
+ * `collapsed: false`, because a 64px icon rail on a phone is a worse drawer,
+ * not a smaller one.
+ */
+export declare function ConnectSidebar({ children, label, className }: ConnectSidebarProps): import("react").JSX.Element;
+export interface ConnectSidebarHeaderProps {
+    /** This application's name, in the `cosmo·ops VOICE` lockup. See `ConnectLogo`. */
+    name: string;
+    /** This application's glyph, drawn on the CosmoOps badge. */
+    icon?: ReactNode;
+    /** Where the lockup links when the rail is expanded. Defaults to `/`. */
+    homeHref?: string;
+}
+/**
+ * The brand row, and the rail's own expand/collapse control.
+ *
+ * **Two states, one DOM.** The badge is mounted once and never re-created; the
+ * wordmark fades beside it and the collapse button fades at the trailing edge.
+ * Swapping which *element* renders the brand would remount it halfway through
+ * the width animation and flicker.
+ *
+ * Collapsed, hovering or focusing the badge swaps it for the expand glyph, so
+ * the rail needs no permanent control eating a row. Expanded, the control sits
+ * at the header's trailing edge, where it can be aimed at without covering the
+ * brand. The swap is pure CSS on a `group` - hovering re-renders nothing,
+ * which is what keeps it instant.
+ *
+ * The trade this makes, deliberately: **collapsed, the lockup is no longer a
+ * link home.** It has become the expand control, and one target that navigates
+ * on click but expands on click-after-hover would be worse than either. Put
+ * home in the nav; every application already does.
+ */
+export declare function ConnectSidebarHeader({ name, icon, homeHref }: ConnectSidebarHeaderProps): import("react").JSX.Element;
+/**
+ * The rail's scrolling region, for the primary navigation. Everything else in
+ * the sidebar is `shrink-0`, so this is the only part that ever gives way.
+ */
+export declare function ConnectSidebarBody({ children }: Readonly<{
+    children: ReactNode;
+}>): import("react").JSX.Element;
+/**
+ * A pinned region at the foot of the rail - the secondary nav, the launcher,
+ * the account row.
+ *
+ * `separated` draws the hairline above it. The account row wants one; a
+ * secondary nav sitting directly on top of the account row does not, or the
+ * rail ends in two rules a few pixels apart.
+ */
+export declare function ConnectSidebarFooter({ children, separated, }: Readonly<{
+    children: ReactNode;
+    separated?: boolean;
+}>): import("react").JSX.Element;
+export type ConnectSidebarRowProps = Readonly<{
+    /** The glyph. 20px by default; 32px when `tile`. */
+    icon: ReactNode;
+    /** The row's text, and - when it is a string - its accessible name. */
+    label: ReactNode;
+    /** Overrides the accessible name. Required when `label` is not a string. */
+    "aria-label"?: string;
+    /** The glyph is 32px (an avatar, a workspace tile) rather than 20px. */
+    tile?: boolean;
+    /** Trailing content, e.g. a chevron. Clipped with the label while collapsed. */
+    trailing?: ReactNode;
+}> & Omit<ComponentPropsWithoutRef<"button">, "aria-label">;
+/**
+ * A pressable row in the rail that is not a nav item - the launcher, the
+ * account button, anything a host adds to the footer.
+ *
+ * Exported so a host's own row lines up with the SDK's. It applies the same
+ * 32px glyph centre and the same label fade, which is what stops a partner's
+ * "Help" row drifting sideways while every row above it holds still.
+ */
+export declare function ConnectSidebarRow({ icon, label, tile, trailing, className, "aria-label": ariaLabel, ...props }: ConnectSidebarRowProps): import("react").JSX.Element;