@ngrok/mantle 0.81.1 → 0.82.1

package/dist/sidebar.d.ts

@@ -0,0 +1,2558 @@
+import { n as WithAsChild, t as SelfClosingWithAsChild } from "./as-child-D23mGo4f.js";
+import { t as WithDataSlot } from "./data-slot-CChfb_cv.js";
+import { n as IconButtonProps } from "./button-C7vAl6lS.js";
+import { n as Separator } from "./separator-B5UmkVRL.js";
+import { t as Tooltip } from "./tooltip-mrpLz4DZ.js";
+import { ComponentProps, ReactElement, ReactNode } from "react";
+//#region src/components/sidebar/sidebar.d.ts
+/**
+ * The breakpoints below which `Sidebar.Nav` swaps from the inline desktop
+ * panel to the mobile `Sheet` presentation. Kept to a closed set because the
+ * pre-hydration visibility classes are static strings (Tailwind cannot see
+ * interpolated class names).
+ *
+ * @see https://mantle.ngrok.com/components/navigation/sidebar
+ *
+ * @example
+ * ```tsx
+ * <Sidebar.Root mobileBreakpoint="md">…</Sidebar.Root>
+ * ```
+ */
+type SidebarMobileBreakpoint = "sm" | "md" | "lg";
+/**
+ * The state and actions shared by every part under a `Sidebar.Root`, returned
+ * by {@link useSidebar}. Use it to build custom triggers, keyboard shortcuts,
+ * or close-on-navigate behavior.
+ *
+ * @see https://mantle.ngrok.com/components/navigation/sidebar
+ *
+ * @example
+ * ```tsx
+ * function CollapseSidebarButton() {
+ *   const { open, toggle } = useSidebar();
+ *   return (
+ *     <button type="button" onClick={toggle}>
+ *       {open ? "Collapse" : "Expand"} sidebar
+ *     </button>
+ *   );
+ * }
+ * ```
+ */
+type SidebarState = {
+  /**
+   * Whether the desktop sidebar is expanded. Mirrored as
+   * `data-state="expanded" | "collapsed"` on `Sidebar.Nav`.
+   */
+  open: boolean;
+  /**
+   * Set the desktop expanded state. Calls `onOpenChange` and, when
+   * uncontrolled, updates the internal state.
+   */
+  setOpen: (open: boolean) => void;
+  /**
+   * Whether the mobile sheet is open. Only meaningful when `isMobile`.
+   */
+  openMobile: boolean;
+  /**
+   * Set the mobile sheet open state. Calls `onOpenMobileChange` and, when
+   * uncontrolled, updates the internal state. Use it to close the sheet on
+   * navigation.
+   */
+  setOpenMobile: (open: boolean) => void;
+  /**
+   * `true` when the viewport is below `mobileBreakpoint`. `false` during SSR
+   * and the hydration render (desktop-first).
+   */
+  isMobile: boolean;
+  /**
+   * The breakpoint below which the sidebar renders as a mobile sheet.
+   */
+  mobileBreakpoint: SidebarMobileBreakpoint;
+  /**
+   * Toggle the sidebar: the mobile sheet when `isMobile`, the desktop
+   * expanded state otherwise. This is what `Sidebar.Trigger` calls.
+   */
+  toggle: () => void;
+  /**
+   * The generated id of the sidebar's `<nav>` landmark. `Sidebar.Trigger`
+   * references it via `aria-controls`; reuse it when building custom
+   * triggers.
+   */
+  navId: string;
+};
+/**
+ * Read the nearest `Sidebar.Root` state. Throws when called outside a
+ * `Sidebar.Root` so misuse fails loudly. Use it to build custom triggers,
+ * a keyboard shortcut, or close-on-navigate behavior.
+ *
+ * @see https://mantle.ngrok.com/components/navigation/sidebar#usesidebar
+ *
+ * @example
+ * ```tsx
+ * function CloseSidebarOnNavigate() {
+ *   const { setOpenMobile } = useSidebar();
+ *   const location = useLocation();
+ *   useEffect(() => {
+ *     setOpenMobile(false);
+ *   }, [location.pathname, setOpenMobile]);
+ *   return null;
+ * }
+ * ```
+ */
+declare function useSidebar(): SidebarState;
+type SidebarRootProps = {
+  /**
+   * The sidebar's parts — a `Sidebar.Nav` and anything that reads the state,
+   * including a `Sidebar.Trigger` rendered anywhere below (an
+   * `AppLayout.Header`, for example). `Root` renders no DOM of its own.
+   */
+  children?: ReactNode;
+  /**
+   * The initial desktop expanded state for the uncontrolled case.
+   *
+   * @default true
+   */
+  defaultOpen?: boolean;
+  /**
+   * Controlled desktop expanded state. Pair with `onOpenChange`.
+   */
+  open?: boolean;
+  /**
+   * Called with the next desktop expanded state whenever it changes.
+   */
+  onOpenChange?: (open: boolean) => void;
+  /**
+   * Controlled mobile sheet open state. Pair with `onOpenMobileChange`.
+   */
+  openMobile?: boolean;
+  /**
+   * Called with the next mobile sheet open state whenever it changes.
+   */
+  onOpenMobileChange?: (open: boolean) => void;
+  /**
+   * The breakpoint below which `Sidebar.Nav` renders as a mobile `Sheet`
+   * instead of the inline desktop panel.
+   *
+   * @default "lg"
+   */
+  mobileBreakpoint?: SidebarMobileBreakpoint;
+  /**
+   * Toggle the sidebar with `⌘B` (macOS) / `Ctrl+B` (Windows/Linux). The
+   * shortcut requires exactly the platform modifier + `b`: `⌘` on Apple
+   * platforms and `Ctrl` everywhere else, resolved per host — the two never
+   * substitute for each other, so macOS's native `Ctrl+B` ("move the caret
+   * back one character") is left alone. Combinations with `Shift`/`Alt` (e.g.
+   * the browser's own `⌘⇧B`) pass through too.
+   *
+   * The shortcut is also ignored while focus is in a text-editing or form
+   * control — an `<input>`, `<textarea>`, `<select>`, or any `contenteditable`
+   * host — because the chord is usually already bound there (`⌘B` is "bold")
+   * and this is a `window` listener that calls `preventDefault()`. That covers
+   * embedded editors like Monaco and CodeMirror, which attach to exactly those
+   * elements. Set `false` to opt out entirely.
+   *
+   * The shortcut has exactly one owner per window: the first mounted root
+   * with the shortcut enabled. Additional roots (nested or siblings) queue
+   * and take ownership only when the owner unmounts, so composing a second
+   * sidebar never makes one keypress toggle both.
+   *
+   * @default true
+   */
+  keyboardShortcut?: boolean;
+};
+/**
+ * The state owner for a sidebar. Renders no DOM of its own (like
+ * `Tooltip.Root`) — it provides the expanded/collapsed and mobile-sheet state
+ * to every part below it, so `Sidebar.Trigger` can live anywhere in the tree
+ * (for example inside an `AppLayout.Header`) without coupling the app shell
+ * to the sidebar.
+ *
+ * Render exactly one `Sidebar.Nav` per `Sidebar.Root`. Nested roots shadow
+ * the outer sidebar for everything below them.
+ *
+ * @see https://mantle.ngrok.com/components/navigation/sidebar#sidebarroot
+ *
+ * @example
+ * ```tsx
+ * <Sidebar.Root>
+ *   <Sidebar.Nav aria-label="Main">
+ *     <Sidebar.Header>
+ *       <DropdownMenu.Root>
+ *         <DropdownMenu.Trigger asChild>
+ *           <Sidebar.SwitcherTrigger>
+ *             <GlobeIcon />
+ *             <span className="text-strong min-w-0 flex-1 truncate text-base">Universal Gateway</span>
+ *             <CaretDownIcon className="text-muted size-4 shrink-0" />
+ *           </Sidebar.SwitcherTrigger>
+ *         </DropdownMenu.Trigger>
+ *         <DropdownMenu.Content width="trigger" className="min-w-(--sidebar-row-width)">…</DropdownMenu.Content>
+ *       </DropdownMenu.Root>
+ *     </Sidebar.Header>
+ *     <Sidebar.Body>
+ *       <Sidebar.Group>
+ *         <Sidebar.GroupLabel>Traffic</Sidebar.GroupLabel>
+ *         <Sidebar.List>
+ *           <Sidebar.Item>
+ *             <Sidebar.ItemButton asChild current>
+ *               <a href="/endpoints">
+ *                 <GraphIcon />
+ *                 Endpoints
+ *               </a>
+ *             </Sidebar.ItemButton>
+ *           </Sidebar.Item>
+ *         </Sidebar.List>
+ *       </Sidebar.Group>
+ *     </Sidebar.Body>
+ *     <Sidebar.Footer>
+ *       <Sidebar.Separator />
+ *       <DropdownMenu.Root>
+ *         <DropdownMenu.Trigger asChild>
+ *           <Sidebar.SwitcherTrigger>
+ *             <Sidebar.AccountAvatar accountId="acc_123" accountName="Acme Corp" />
+ *             <span className="text-strong min-w-0 flex-1 truncate text-sm font-medium">Acme Corp</span>
+ *             <Sidebar.UserAvatar alt="Jane Doe" />
+ *           </Sidebar.SwitcherTrigger>
+ *         </DropdownMenu.Trigger>
+ *         <DropdownMenu.Content width="trigger" className="min-w-(--sidebar-row-width)">…</DropdownMenu.Content>
+ *       </DropdownMenu.Root>
+ *     </Sidebar.Footer>
+ *   </Sidebar.Nav>
+ *   <Sidebar.Trigger />
+ * </Sidebar.Root>
+ * ```
+ */
+declare const Root: ({ children, defaultOpen, keyboardShortcut, mobileBreakpoint, onOpenChange, onOpenMobileChange, open: openProp, openMobile: openMobileProp }: SidebarRootProps) => import("react").JSX.Element;
+type SidebarNavProps = ComponentProps<"div"> & WithDataSlot;
+/**
+ * The sidebar panel. On viewports at or above the root's `mobileBreakpoint`
+ * it renders inline (in normal flow, so it composes under an
+ * `AppLayout.Notice` banner) and collapses by animating its width down to a
+ * skinny icon rail (`--sidebar-width-icon`): group labels fade out in place
+ * and each row becomes a square chip around its leading icon, but everything
+ * keeps its expanded position and stays in the tab order and the
+ * accessibility tree. Below the breakpoint it renders inside a mantle
+ * `Sheet` on the left.
+ *
+ * `className`, `style`, `ref`, and rest props land on the panel surface in
+ * both presentations (the desktop animator / the mobile `Sheet.Content`), so
+ * the width variables work anywhere:
+ * `className="[--sidebar-width:20rem] [--sidebar-width-mobile:20rem]"`.
+ * `aria-label` (default `"Main"`) is forwarded to the inner `<nav>` landmark.
+ *
+ * **CSS variables (public API):**
+ *
+ * | CSS Variable | Default | Description |
+ * | --- | --- | --- |
+ * | `--sidebar-width` | `16rem` | Expanded desktop panel width (256px). |
+ * | `--sidebar-width-mobile` | `18rem` | Mobile sheet width (288px). |
+ * | `--sidebar-width-icon` | `3.25rem` | Collapsed icon rail width (52px). |
+ * | `--sidebar-row-width` | `15rem` | Derived, not set: one row's width in the expanded panel (240px), for sizing surfaces that render *outside* it. See below and `Sidebar.SwitcherTrigger`. |
+ *
+ * `--sidebar-row-width` is `calc(var(--sidebar-width,16rem) - 1rem)`, declared
+ * at `:root` by `mantle.css` — the panel width minus the row gutter this
+ * component's regions apply.
+ *
+ * Each of the three widths is read with its default as the fallback, and
+ * custom properties inherit, so set one on `Sidebar.Nav` to resize a single
+ * sidebar or on any ancestor (`:root` in your global stylesheet) to resize
+ * every sidebar in the app. `--sidebar-row-width` resolves at `:root`, so a
+ * `--sidebar-width` override scoped to one `Sidebar.Nav` does not reach it in
+ * either direction — a narrower panel leaves the floor *wider* than the row it
+ * opens from. Override `--sidebar-width` at `:root` to move both together, or
+ * set `--sidebar-row-width` on the outside surface itself.
+ *
+ * **Data attributes:**
+ *
+ * | Data Attribute | Value | Description |
+ * | --- | --- | --- |
+ * | `data-state` | `"expanded"` \| `"collapsed"` | On the desktop panel surface. Mirrors the root's expanded state and drives the width collapse to the icon rail; descendant parts style off it with `group-data-[state=collapsed]/sidebar-nav:`. |
+ * | `data-hydrated` | present after hydration | Presence-only, desktop panel surface. The CSS-side twin of the `isHydrated` gate: descendant collapse transitions are enabled only under `group-data-[hydrated]/sidebar-nav:`, so an SSR state correction snaps instead of animating on page load. |
+ * | `data-mobile` | present in the mobile sheet | Presence-only. Marks the `Sheet.Content` presentation used below the root's `mobileBreakpoint`. |
+ * | `data-state` | `"open"` \| `"closed"` | In the mobile sheet only, where the panel *is* the `Sheet`'s Radix dialog content element and Radix owns the attribute — the sheet's open/close animation state, not the desktop expanded state. Consumers style against it too. |
+ *
+ * @see https://mantle.ngrok.com/components/navigation/sidebar#sidebarnav
+ *
+ * @example
+ * ```tsx
+ * <Sidebar.Root>
+ *   <Sidebar.Nav aria-label="Main">
+ *     <Sidebar.Header>
+ *       <DropdownMenu.Root>
+ *         <DropdownMenu.Trigger asChild>
+ *           <Sidebar.SwitcherTrigger>
+ *             <GlobeIcon />
+ *             <span className="text-strong min-w-0 flex-1 truncate text-base">Universal Gateway</span>
+ *             <CaretDownIcon className="text-muted size-4 shrink-0" />
+ *           </Sidebar.SwitcherTrigger>
+ *         </DropdownMenu.Trigger>
+ *         <DropdownMenu.Content width="trigger" className="min-w-(--sidebar-row-width)">…</DropdownMenu.Content>
+ *       </DropdownMenu.Root>
+ *     </Sidebar.Header>
+ *     <Sidebar.Body>
+ *       <Sidebar.Group>
+ *         <Sidebar.GroupLabel>Traffic</Sidebar.GroupLabel>
+ *         <Sidebar.List>
+ *           <Sidebar.Item>
+ *             <Sidebar.ItemButton asChild current>
+ *               <a href="/endpoints">
+ *                 <GraphIcon />
+ *                 Endpoints
+ *               </a>
+ *             </Sidebar.ItemButton>
+ *           </Sidebar.Item>
+ *         </Sidebar.List>
+ *       </Sidebar.Group>
+ *     </Sidebar.Body>
+ *     <Sidebar.Footer>
+ *       <Sidebar.Separator />
+ *       <DropdownMenu.Root>
+ *         <DropdownMenu.Trigger asChild>
+ *           <Sidebar.SwitcherTrigger>
+ *             <Sidebar.AccountAvatar accountId="acc_123" accountName="Acme Corp" />
+ *             <span className="text-strong min-w-0 flex-1 truncate text-sm font-medium">Acme Corp</span>
+ *             <Sidebar.UserAvatar alt="Jane Doe" />
+ *           </Sidebar.SwitcherTrigger>
+ *         </DropdownMenu.Trigger>
+ *         <DropdownMenu.Content width="trigger" className="min-w-(--sidebar-row-width)">…</DropdownMenu.Content>
+ *       </DropdownMenu.Root>
+ *     </Sidebar.Footer>
+ *   </Sidebar.Nav>
+ *   <Sidebar.Trigger />
+ * </Sidebar.Root>
+ * ```
+ */
+declare const Nav: ({ "aria-label": ariaLabelProp, "aria-labelledby": ariaLabelledBy, children, className, "data-slot": dataSlot, ...props }: SidebarNavProps) => import("react").JSX.Element;
+/**
+ * The props for `Sidebar.Trigger`. `IconButton`'s props, except the parts the
+ * trigger owns: `asChild` and `children` are removed (the trigger renders
+ * only its icon and sr-only label — build custom triggers with `useSidebar`
+ * instead), and `appearance`, `icon`, `intent`, and `label` become optional
+ * with sidebar defaults.
+ */
+type SidebarTriggerProps = Omit<IconButtonProps, "appearance" | "asChild" | "children" | "icon" | "intent" | "label"> & WithDataSlot & {
+  /**
+   * The visual style of the trigger `IconButton`.
+   *
+   * @default "ghost"
+   */
+  appearance?: IconButtonProps["appearance"];
+  /**
+   * The icon rendered inside the trigger.
+   *
+   * @default <SidebarSimpleIcon />
+   */
+  icon?: ReactNode;
+  /**
+   * The color intent of the trigger `IconButton`.
+   *
+   * @default "neutral"
+   */
+  intent?: IconButtonProps["intent"];
+  /**
+   * The accessible name for the trigger. Visually hidden but announced to
+   * assistive technology. Override it for localization.
+   *
+   * @default "Toggle Sidebar"
+   */
+  label?: string;
+};
+/**
+ * The button that toggles the sidebar: the mobile sheet below the root's
+ * `mobileBreakpoint`, the desktop expanded state otherwise. Renders a ghost
+ * neutral `IconButton` with `aria-expanded` and `aria-controls` wired to the
+ * sidebar's `<nav>`. Place it in your app shell's header (for example
+ * `AppLayout.Header`) — it must stay visible at every breakpoint where the
+ * sidebar can collapse, or users have no way to reopen it.
+ *
+ * **Data attributes:**
+ *
+ * | Data Attribute | Value | Description |
+ * | --- | --- | --- |
+ * | `data-state` | `"expanded"` \| `"collapsed"` | Mirrors what the trigger toggles: the mobile sheet below the root's `mobileBreakpoint`, the desktop panel otherwise. Pairs with `aria-expanded`. |
+ * | `data-appearance` | `"ghost"` \| `"outlined"` | Read, not stamped: the underlying `IconButton` reflects its `appearance`, which this part defaults to `"ghost"`. |
+ * | `data-intent` | `"accent"` \| `"danger"` \| `"neutral"` | Read, not stamped: the underlying `IconButton` reflects its `intent`, which this part defaults to `"neutral"`. |
+ * | `data-size` | `"xs"` \| `"sm"` \| `"md"` \| `"lg"` \| `"xl"` | Read, not stamped: the underlying `IconButton` reflects its `size` and its own `"md"` default. |
+ *
+ * @see https://mantle.ngrok.com/components/navigation/sidebar#sidebartrigger
+ *
+ * @example
+ * ```tsx
+ * <Sidebar.Root>
+ *   <Sidebar.Nav aria-label="Main">
+ *     <Sidebar.Header>
+ *       <DropdownMenu.Root>
+ *         <DropdownMenu.Trigger asChild>
+ *           <Sidebar.SwitcherTrigger>
+ *             <GlobeIcon />
+ *             <span className="text-strong min-w-0 flex-1 truncate text-base">Universal Gateway</span>
+ *             <CaretDownIcon className="text-muted size-4 shrink-0" />
+ *           </Sidebar.SwitcherTrigger>
+ *         </DropdownMenu.Trigger>
+ *         <DropdownMenu.Content width="trigger" className="min-w-(--sidebar-row-width)">…</DropdownMenu.Content>
+ *       </DropdownMenu.Root>
+ *     </Sidebar.Header>
+ *     <Sidebar.Body>
+ *       <Sidebar.Group>
+ *         <Sidebar.GroupLabel>Traffic</Sidebar.GroupLabel>
+ *         <Sidebar.List>
+ *           <Sidebar.Item>
+ *             <Sidebar.ItemButton asChild current>
+ *               <a href="/endpoints">
+ *                 <GraphIcon />
+ *                 Endpoints
+ *               </a>
+ *             </Sidebar.ItemButton>
+ *           </Sidebar.Item>
+ *         </Sidebar.List>
+ *       </Sidebar.Group>
+ *     </Sidebar.Body>
+ *     <Sidebar.Footer>
+ *       <Sidebar.Separator />
+ *       <DropdownMenu.Root>
+ *         <DropdownMenu.Trigger asChild>
+ *           <Sidebar.SwitcherTrigger>
+ *             <Sidebar.AccountAvatar accountId="acc_123" accountName="Acme Corp" />
+ *             <span className="text-strong min-w-0 flex-1 truncate text-sm font-medium">Acme Corp</span>
+ *             <Sidebar.UserAvatar alt="Jane Doe" />
+ *           </Sidebar.SwitcherTrigger>
+ *         </DropdownMenu.Trigger>
+ *         <DropdownMenu.Content width="trigger" className="min-w-(--sidebar-row-width)">…</DropdownMenu.Content>
+ *       </DropdownMenu.Root>
+ *     </Sidebar.Footer>
+ *   </Sidebar.Nav>
+ *   <Sidebar.Trigger />
+ * </Sidebar.Root>
+ * ```
+ *
+ * @example
+ * Placement within an `AppLayout` shell:
+ * ```tsx
+ * <Sidebar.Root>
+ *   <AppLayout.Workspace>
+ *     <Sidebar.Nav aria-label="Main">…</Sidebar.Nav>
+ *     <AppLayout.Content>
+ *       <AppLayout.Header>
+ *         <Sidebar.Trigger />
+ *       </AppLayout.Header>
+ *       <AppLayout.Body>…</AppLayout.Body>
+ *     </AppLayout.Content>
+ *   </AppLayout.Workspace>
+ * </Sidebar.Root>
+ * ```
+ */
+declare const Trigger: ({ appearance, "data-slot": dataSlot, icon, intent, label, onClick, ...props }: SidebarTriggerProps) => import("react").JSX.Element;
+type SidebarHeaderProps = ComponentProps<"div"> & WithAsChild & WithDataSlot;
+/**
+ * The top container of a `Sidebar.Nav`, pinned above the scrollable
+ * `Sidebar.Body`. Typically holds an app/product switcher built from
+ * `Sidebar.SwitcherTrigger` composed with a `DropdownMenu` or `Dialog`. Its
+ * height is the public `--sidebar-header-height` CSS variable (default
+ * `4.5rem`), which centers the switcher row on the same horizontal band as an
+ * `AppLayout.Header` toolbar — when a sidebar header is composed inside an
+ * `AppLayout`, the toolbar derives its own height from the same variable, so
+ * overriding it at a shared ancestor (e.g. `AppLayout.Root`) moves both rows
+ * together and the alignment holds by construction.
+ *
+ * **CSS variables (public API):**
+ *
+ * | CSS Variable | Default | Description |
+ * | --- | --- | --- |
+ * | `--sidebar-header-height` | `4.5rem` | The header row height (72px). Set it on a common ancestor of the sidebar and `AppLayout.Header`, not on `Sidebar.Nav`, so both rows read one value. |
+ *
+ * @see https://mantle.ngrok.com/components/navigation/sidebar#sidebarheader
+ *
+ * @example
+ * ```tsx
+ * <Sidebar.Root>
+ *   <Sidebar.Nav aria-label="Main">
+ *     <Sidebar.Header>
+ *       <DropdownMenu.Root>
+ *         <DropdownMenu.Trigger asChild>
+ *           <Sidebar.SwitcherTrigger>
+ *             <GlobeIcon />
+ *             <span className="text-strong min-w-0 flex-1 truncate text-base">Universal Gateway</span>
+ *             <CaretDownIcon className="text-muted size-4 shrink-0" />
+ *           </Sidebar.SwitcherTrigger>
+ *         </DropdownMenu.Trigger>
+ *         <DropdownMenu.Content width="trigger" className="min-w-(--sidebar-row-width)">…</DropdownMenu.Content>
+ *       </DropdownMenu.Root>
+ *     </Sidebar.Header>
+ *     <Sidebar.Body>
+ *       <Sidebar.Group>
+ *         <Sidebar.GroupLabel>Traffic</Sidebar.GroupLabel>
+ *         <Sidebar.List>
+ *           <Sidebar.Item>
+ *             <Sidebar.ItemButton asChild current>
+ *               <a href="/endpoints">
+ *                 <GraphIcon />
+ *                 Endpoints
+ *               </a>
+ *             </Sidebar.ItemButton>
+ *           </Sidebar.Item>
+ *         </Sidebar.List>
+ *       </Sidebar.Group>
+ *     </Sidebar.Body>
+ *     <Sidebar.Footer>
+ *       <Sidebar.Separator />
+ *       <DropdownMenu.Root>
+ *         <DropdownMenu.Trigger asChild>
+ *           <Sidebar.SwitcherTrigger>
+ *             <Sidebar.AccountAvatar accountId="acc_123" accountName="Acme Corp" />
+ *             <span className="text-strong min-w-0 flex-1 truncate text-sm font-medium">Acme Corp</span>
+ *             <Sidebar.UserAvatar alt="Jane Doe" />
+ *           </Sidebar.SwitcherTrigger>
+ *         </DropdownMenu.Trigger>
+ *         <DropdownMenu.Content width="trigger" className="min-w-(--sidebar-row-width)">…</DropdownMenu.Content>
+ *       </DropdownMenu.Root>
+ *     </Sidebar.Footer>
+ *   </Sidebar.Nav>
+ *   <Sidebar.Trigger />
+ * </Sidebar.Root>
+ * ```
+ */
+declare const Header: ({ asChild, children, className, "data-slot": dataSlot, ...props }: SidebarHeaderProps) => import("react").JSX.Element;
+type SidebarBodyProps = ComponentProps<"div"> & WithAsChild & WithDataSlot;
+/**
+ * The scrollable middle region of a `Sidebar.Nav`, growing to fill the space
+ * between `Sidebar.Header` and `Sidebar.Footer`. Holds the navigation
+ * `Sidebar.Group` children. Overflowing edges fade out via the
+ * `scroll-fade-y` mask; inside the collapsed icon rail the scrollbar and its
+ * reserved gutter are hidden and the fade is the only overflow signal.
+ *
+ * @see https://mantle.ngrok.com/components/navigation/sidebar#sidebarbody
+ *
+ * @example
+ * ```tsx
+ * <Sidebar.Root>
+ *   <Sidebar.Nav aria-label="Main">
+ *     <Sidebar.Header>
+ *       <DropdownMenu.Root>
+ *         <DropdownMenu.Trigger asChild>
+ *           <Sidebar.SwitcherTrigger>
+ *             <GlobeIcon />
+ *             <span className="text-strong min-w-0 flex-1 truncate text-base">Universal Gateway</span>
+ *             <CaretDownIcon className="text-muted size-4 shrink-0" />
+ *           </Sidebar.SwitcherTrigger>
+ *         </DropdownMenu.Trigger>
+ *         <DropdownMenu.Content width="trigger" className="min-w-(--sidebar-row-width)">…</DropdownMenu.Content>
+ *       </DropdownMenu.Root>
+ *     </Sidebar.Header>
+ *     <Sidebar.Body>
+ *       <Sidebar.Group>
+ *         <Sidebar.GroupLabel>Traffic</Sidebar.GroupLabel>
+ *         <Sidebar.List>
+ *           <Sidebar.Item>
+ *             <Sidebar.ItemButton asChild current>
+ *               <a href="/endpoints">
+ *                 <GraphIcon />
+ *                 Endpoints
+ *               </a>
+ *             </Sidebar.ItemButton>
+ *           </Sidebar.Item>
+ *         </Sidebar.List>
+ *       </Sidebar.Group>
+ *     </Sidebar.Body>
+ *     <Sidebar.Footer>
+ *       <Sidebar.Separator />
+ *       <DropdownMenu.Root>
+ *         <DropdownMenu.Trigger asChild>
+ *           <Sidebar.SwitcherTrigger>
+ *             <Sidebar.AccountAvatar accountId="acc_123" accountName="Acme Corp" />
+ *             <span className="text-strong min-w-0 flex-1 truncate text-sm font-medium">Acme Corp</span>
+ *             <Sidebar.UserAvatar alt="Jane Doe" />
+ *           </Sidebar.SwitcherTrigger>
+ *         </DropdownMenu.Trigger>
+ *         <DropdownMenu.Content width="trigger" className="min-w-(--sidebar-row-width)">…</DropdownMenu.Content>
+ *       </DropdownMenu.Root>
+ *     </Sidebar.Footer>
+ *   </Sidebar.Nav>
+ *   <Sidebar.Trigger />
+ * </Sidebar.Root>
+ * ```
+ */
+declare const Body: ({ asChild, children, className, "data-slot": dataSlot, ...props }: SidebarBodyProps) => import("react").JSX.Element;
+type SidebarFooterProps = ComponentProps<"div"> & WithAsChild & WithDataSlot;
+/**
+ * The bottom container of a `Sidebar.Nav`, pinned below the scrollable
+ * `Sidebar.Body`. Typically holds cross-product items and the account/user
+ * switcher row (`Sidebar.SwitcherTrigger` with `Sidebar.AccountAvatar` and
+ * `Sidebar.UserAvatar`).
+ *
+ * @see https://mantle.ngrok.com/components/navigation/sidebar#sidebarfooter
+ *
+ * @example
+ * ```tsx
+ * <Sidebar.Root>
+ *   <Sidebar.Nav aria-label="Main">
+ *     <Sidebar.Header>
+ *       <DropdownMenu.Root>
+ *         <DropdownMenu.Trigger asChild>
+ *           <Sidebar.SwitcherTrigger>
+ *             <GlobeIcon />
+ *             <span className="text-strong min-w-0 flex-1 truncate text-base">Universal Gateway</span>
+ *             <CaretDownIcon className="text-muted size-4 shrink-0" />
+ *           </Sidebar.SwitcherTrigger>
+ *         </DropdownMenu.Trigger>
+ *         <DropdownMenu.Content width="trigger" className="min-w-(--sidebar-row-width)">…</DropdownMenu.Content>
+ *       </DropdownMenu.Root>
+ *     </Sidebar.Header>
+ *     <Sidebar.Body>
+ *       <Sidebar.Group>
+ *         <Sidebar.GroupLabel>Traffic</Sidebar.GroupLabel>
+ *         <Sidebar.List>
+ *           <Sidebar.Item>
+ *             <Sidebar.ItemButton asChild current>
+ *               <a href="/endpoints">
+ *                 <GraphIcon />
+ *                 Endpoints
+ *               </a>
+ *             </Sidebar.ItemButton>
+ *           </Sidebar.Item>
+ *         </Sidebar.List>
+ *       </Sidebar.Group>
+ *     </Sidebar.Body>
+ *     <Sidebar.Footer>
+ *       <Sidebar.Separator />
+ *       <DropdownMenu.Root>
+ *         <DropdownMenu.Trigger asChild>
+ *           <Sidebar.SwitcherTrigger>
+ *             <Sidebar.AccountAvatar accountId="acc_123" accountName="Acme Corp" />
+ *             <span className="text-strong min-w-0 flex-1 truncate text-sm font-medium">Acme Corp</span>
+ *             <Sidebar.UserAvatar alt="Jane Doe" />
+ *           </Sidebar.SwitcherTrigger>
+ *         </DropdownMenu.Trigger>
+ *         <DropdownMenu.Content width="trigger" className="min-w-(--sidebar-row-width)">…</DropdownMenu.Content>
+ *       </DropdownMenu.Root>
+ *     </Sidebar.Footer>
+ *   </Sidebar.Nav>
+ *   <Sidebar.Trigger />
+ * </Sidebar.Root>
+ * ```
+ */
+declare const Footer: ({ asChild, children, className, "data-slot": dataSlot, ...props }: SidebarFooterProps) => import("react").JSX.Element;
+type SidebarGroupProps = ComponentProps<"div"> & WithAsChild & WithDataSlot;
+/**
+ * A grouping container inside `Sidebar.Body` pairing an optional
+ * `Sidebar.GroupLabel` with a `Sidebar.List`. When a label is present, the
+ * group wires it to the list via `aria-labelledby` so assistive technology
+ * announces the list with the group's name.
+ *
+ * @see https://mantle.ngrok.com/components/navigation/sidebar#sidebargroup
+ *
+ * @example
+ * ```tsx
+ * <Sidebar.Root>
+ *   <Sidebar.Nav aria-label="Main">
+ *     <Sidebar.Header>
+ *       <DropdownMenu.Root>
+ *         <DropdownMenu.Trigger asChild>
+ *           <Sidebar.SwitcherTrigger>
+ *             <GlobeIcon />
+ *             <span className="text-strong min-w-0 flex-1 truncate text-base">Universal Gateway</span>
+ *             <CaretDownIcon className="text-muted size-4 shrink-0" />
+ *           </Sidebar.SwitcherTrigger>
+ *         </DropdownMenu.Trigger>
+ *         <DropdownMenu.Content width="trigger" className="min-w-(--sidebar-row-width)">…</DropdownMenu.Content>
+ *       </DropdownMenu.Root>
+ *     </Sidebar.Header>
+ *     <Sidebar.Body>
+ *       <Sidebar.Group>
+ *         <Sidebar.GroupLabel>Traffic</Sidebar.GroupLabel>
+ *         <Sidebar.List>
+ *           <Sidebar.Item>
+ *             <Sidebar.ItemButton asChild current>
+ *               <a href="/endpoints">
+ *                 <GraphIcon />
+ *                 Endpoints
+ *               </a>
+ *             </Sidebar.ItemButton>
+ *           </Sidebar.Item>
+ *         </Sidebar.List>
+ *       </Sidebar.Group>
+ *     </Sidebar.Body>
+ *     <Sidebar.Footer>
+ *       <Sidebar.Separator />
+ *       <DropdownMenu.Root>
+ *         <DropdownMenu.Trigger asChild>
+ *           <Sidebar.SwitcherTrigger>
+ *             <Sidebar.AccountAvatar accountId="acc_123" accountName="Acme Corp" />
+ *             <span className="text-strong min-w-0 flex-1 truncate text-sm font-medium">Acme Corp</span>
+ *             <Sidebar.UserAvatar alt="Jane Doe" />
+ *           </Sidebar.SwitcherTrigger>
+ *         </DropdownMenu.Trigger>
+ *         <DropdownMenu.Content width="trigger" className="min-w-(--sidebar-row-width)">…</DropdownMenu.Content>
+ *       </DropdownMenu.Root>
+ *     </Sidebar.Footer>
+ *   </Sidebar.Nav>
+ *   <Sidebar.Trigger />
+ * </Sidebar.Root>
+ * ```
+ */
+declare const Group: ({ asChild, children, className, "data-slot": dataSlot, ...props }: SidebarGroupProps) => import("react").JSX.Element;
+type SidebarGroupLabelProps = ComponentProps<"div"> & WithAsChild & WithDataSlot;
+/**
+ * The muted label of a `Sidebar.Group`, rendered above its `Sidebar.List`.
+ * Renders a `<div>` (not a heading, so the sidebar never dictates the page's
+ * heading outline); inside a `Sidebar.Group` it is automatically linked to
+ * the sibling list via `aria-labelledby`. Pass `asChild` to render a heading
+ * at a level you control.
+ *
+ * @see https://mantle.ngrok.com/components/navigation/sidebar#sidebargrouplabel
+ *
+ * @example
+ * ```tsx
+ * <Sidebar.Root>
+ *   <Sidebar.Nav aria-label="Main">
+ *     <Sidebar.Header>
+ *       <DropdownMenu.Root>
+ *         <DropdownMenu.Trigger asChild>
+ *           <Sidebar.SwitcherTrigger>
+ *             <GlobeIcon />
+ *             <span className="text-strong min-w-0 flex-1 truncate text-base">Universal Gateway</span>
+ *             <CaretDownIcon className="text-muted size-4 shrink-0" />
+ *           </Sidebar.SwitcherTrigger>
+ *         </DropdownMenu.Trigger>
+ *         <DropdownMenu.Content width="trigger" className="min-w-(--sidebar-row-width)">…</DropdownMenu.Content>
+ *       </DropdownMenu.Root>
+ *     </Sidebar.Header>
+ *     <Sidebar.Body>
+ *       <Sidebar.Group>
+ *         <Sidebar.GroupLabel>Traffic</Sidebar.GroupLabel>
+ *         <Sidebar.List>
+ *           <Sidebar.Item>
+ *             <Sidebar.ItemButton asChild current>
+ *               <a href="/endpoints">
+ *                 <GraphIcon />
+ *                 Endpoints
+ *               </a>
+ *             </Sidebar.ItemButton>
+ *           </Sidebar.Item>
+ *         </Sidebar.List>
+ *       </Sidebar.Group>
+ *     </Sidebar.Body>
+ *     <Sidebar.Footer>
+ *       <Sidebar.Separator />
+ *       <DropdownMenu.Root>
+ *         <DropdownMenu.Trigger asChild>
+ *           <Sidebar.SwitcherTrigger>
+ *             <Sidebar.AccountAvatar accountId="acc_123" accountName="Acme Corp" />
+ *             <span className="text-strong min-w-0 flex-1 truncate text-sm font-medium">Acme Corp</span>
+ *             <Sidebar.UserAvatar alt="Jane Doe" />
+ *           </Sidebar.SwitcherTrigger>
+ *         </DropdownMenu.Trigger>
+ *         <DropdownMenu.Content width="trigger" className="min-w-(--sidebar-row-width)">…</DropdownMenu.Content>
+ *       </DropdownMenu.Root>
+ *     </Sidebar.Footer>
+ *   </Sidebar.Nav>
+ *   <Sidebar.Trigger />
+ * </Sidebar.Root>
+ * ```
+ */
+declare const GroupLabel: ({ asChild, children, className, "data-slot": dataSlot, id: idProp, ...props }: SidebarGroupLabelProps) => import("react").JSX.Element;
+type SidebarListProps = ComponentProps<"ul"> & WithAsChild & WithDataSlot;
+/**
+ * The `<ul>` list of navigation rows inside a `Sidebar.Group`. When the group
+ * has a `Sidebar.GroupLabel`, the list is announced with the group's name via
+ * `aria-labelledby`.
+ *
+ * @see https://mantle.ngrok.com/components/navigation/sidebar#sidebarlist
+ *
+ * @example
+ * ```tsx
+ * <Sidebar.Root>
+ *   <Sidebar.Nav aria-label="Main">
+ *     <Sidebar.Header>
+ *       <DropdownMenu.Root>
+ *         <DropdownMenu.Trigger asChild>
+ *           <Sidebar.SwitcherTrigger>
+ *             <GlobeIcon />
+ *             <span className="text-strong min-w-0 flex-1 truncate text-base">Universal Gateway</span>
+ *             <CaretDownIcon className="text-muted size-4 shrink-0" />
+ *           </Sidebar.SwitcherTrigger>
+ *         </DropdownMenu.Trigger>
+ *         <DropdownMenu.Content width="trigger" className="min-w-(--sidebar-row-width)">…</DropdownMenu.Content>
+ *       </DropdownMenu.Root>
+ *     </Sidebar.Header>
+ *     <Sidebar.Body>
+ *       <Sidebar.Group>
+ *         <Sidebar.GroupLabel>Traffic</Sidebar.GroupLabel>
+ *         <Sidebar.List>
+ *           <Sidebar.Item>
+ *             <Sidebar.ItemButton asChild current>
+ *               <a href="/endpoints">
+ *                 <GraphIcon />
+ *                 Endpoints
+ *               </a>
+ *             </Sidebar.ItemButton>
+ *           </Sidebar.Item>
+ *         </Sidebar.List>
+ *       </Sidebar.Group>
+ *     </Sidebar.Body>
+ *     <Sidebar.Footer>
+ *       <Sidebar.Separator />
+ *       <DropdownMenu.Root>
+ *         <DropdownMenu.Trigger asChild>
+ *           <Sidebar.SwitcherTrigger>
+ *             <Sidebar.AccountAvatar accountId="acc_123" accountName="Acme Corp" />
+ *             <span className="text-strong min-w-0 flex-1 truncate text-sm font-medium">Acme Corp</span>
+ *             <Sidebar.UserAvatar alt="Jane Doe" />
+ *           </Sidebar.SwitcherTrigger>
+ *         </DropdownMenu.Trigger>
+ *         <DropdownMenu.Content width="trigger" className="min-w-(--sidebar-row-width)">…</DropdownMenu.Content>
+ *       </DropdownMenu.Root>
+ *     </Sidebar.Footer>
+ *   </Sidebar.Nav>
+ *   <Sidebar.Trigger />
+ * </Sidebar.Root>
+ * ```
+ */
+declare const List: ({ "aria-labelledby": ariaLabelledBy, asChild, children, className, "data-slot": dataSlot, ...props }: SidebarListProps) => import("react").JSX.Element;
+type SidebarItemProps = ComponentProps<"li"> & WithAsChild & WithDataSlot;
+/**
+ * A single `<li>` row of a `Sidebar.List`. A plain wrapper — the interactive
+ * element is the `Sidebar.ItemButton` child, so props, `ref`, and `className`
+ * all target the list item itself.
+ *
+ * @see https://mantle.ngrok.com/components/navigation/sidebar#sidebaritem
+ *
+ * @example
+ * ```tsx
+ * <Sidebar.Root>
+ *   <Sidebar.Nav aria-label="Main">
+ *     <Sidebar.Header>
+ *       <DropdownMenu.Root>
+ *         <DropdownMenu.Trigger asChild>
+ *           <Sidebar.SwitcherTrigger>
+ *             <GlobeIcon />
+ *             <span className="text-strong min-w-0 flex-1 truncate text-base">Universal Gateway</span>
+ *             <CaretDownIcon className="text-muted size-4 shrink-0" />
+ *           </Sidebar.SwitcherTrigger>
+ *         </DropdownMenu.Trigger>
+ *         <DropdownMenu.Content width="trigger" className="min-w-(--sidebar-row-width)">…</DropdownMenu.Content>
+ *       </DropdownMenu.Root>
+ *     </Sidebar.Header>
+ *     <Sidebar.Body>
+ *       <Sidebar.Group>
+ *         <Sidebar.GroupLabel>Traffic</Sidebar.GroupLabel>
+ *         <Sidebar.List>
+ *           <Sidebar.Item>
+ *             <Sidebar.ItemButton asChild current>
+ *               <a href="/endpoints">
+ *                 <GraphIcon />
+ *                 Endpoints
+ *               </a>
+ *             </Sidebar.ItemButton>
+ *           </Sidebar.Item>
+ *         </Sidebar.List>
+ *       </Sidebar.Group>
+ *     </Sidebar.Body>
+ *     <Sidebar.Footer>
+ *       <Sidebar.Separator />
+ *       <DropdownMenu.Root>
+ *         <DropdownMenu.Trigger asChild>
+ *           <Sidebar.SwitcherTrigger>
+ *             <Sidebar.AccountAvatar accountId="acc_123" accountName="Acme Corp" />
+ *             <span className="text-strong min-w-0 flex-1 truncate text-sm font-medium">Acme Corp</span>
+ *             <Sidebar.UserAvatar alt="Jane Doe" />
+ *           </Sidebar.SwitcherTrigger>
+ *         </DropdownMenu.Trigger>
+ *         <DropdownMenu.Content width="trigger" className="min-w-(--sidebar-row-width)">…</DropdownMenu.Content>
+ *       </DropdownMenu.Root>
+ *     </Sidebar.Footer>
+ *   </Sidebar.Nav>
+ *   <Sidebar.Trigger />
+ * </Sidebar.Root>
+ * ```
+ */
+declare const Item: ({ asChild, children, className, "data-slot": dataSlot, ...props }: SidebarItemProps) => import("react").JSX.Element;
+type SidebarItemButtonProps = ComponentProps<"button"> & WithAsChild & WithDataSlot & {
+  /**
+   * Marks this row as the current page: sets `aria-current="page"` and the
+   * `data-current` styling state. Consumers control it from their router,
+   * e.g. `current={pathname === "/endpoints"}`.
+   *
+   * A composed child that sets `aria-current="page"` itself — react-router's
+   * `NavLink` does — already gets the current-row treatment, so it needs no
+   * `current`. This prop is for the rows whose parent knows.
+   */
+  current?: boolean;
+};
+/**
+ * The interactive row of a `Sidebar.Item`: a leading icon slot and a
+ * truncating label. Renders a `<button>` by default; pass `asChild` to
+ * compose with a router link. `current` sets `aria-current="page"` and the
+ * `data-current` visual state.
+ *
+ * The current-row treatment follows either attribute, so a composed child that
+ * marks itself as the current page gets it without `current` — a react-router
+ * `NavLink` needs nothing but its `to`, since it already resolved the match the
+ * parent would otherwise re-derive:
+ *
+ * ```tsx
+ * <Sidebar.ItemButton asChild>
+ *   <NavLink to="/endpoints">
+ *     <GraphIcon />
+ *     Endpoints
+ *   </NavLink>
+ * </Sidebar.ItemButton>
+ * ```
+ *
+ * The row sizes its **leading** icon to 20px and leaves trailing visuals — a
+ * caret, a count, a status dot — to size themselves, so a row composed with
+ * `DropdownMenu.Trigger asChild` can end in `<CaretDownIcon className="text-muted
+ * ml-auto size-4 shrink-0" />` and stays highlighted while its menu is open
+ * (`data-state="open"`, supplied by the trigger). Give that menu the same width
+ * floor the switcher rows use — `className="min-w-(--sidebar-row-width)"` — so
+ * it keeps the expanded row's width instead of shrinking to this row's 28px
+ * rail chip (see `Sidebar.SwitcherTrigger` for the whole contract).
+ *
+ * **Data attributes:**
+ *
+ * | Data Attribute | Value | Description |
+ * | --- | --- | --- |
+ * | `data-current` | present when `current` | Presence-only — never `"false"`, since the `data-current:` variant matches the attribute's existence. Styles the current row. |
+ * | `aria-current` | `"page"` when `current` | Set alongside `data-current`. The current-row styling follows *either*, so a composed child that marks itself (react-router's `NavLink`) gets the treatment without the prop. |
+ * | `data-state` | `"open"` | **Read, not stamped** — supplied by a composing `DropdownMenu.Trigger` / `Dialog.Trigger`. The row styles against it so it stays highlighted while its menu is open. |
+ *
+ * @see https://mantle.ngrok.com/components/navigation/sidebar#sidebaritembutton
+ *
+ * @example
+ * ```tsx
+ * <Sidebar.Root>
+ *   <Sidebar.Nav aria-label="Main">
+ *     <Sidebar.Header>
+ *       <DropdownMenu.Root>
+ *         <DropdownMenu.Trigger asChild>
+ *           <Sidebar.SwitcherTrigger>
+ *             <GlobeIcon />
+ *             <span className="text-strong min-w-0 flex-1 truncate text-base">Universal Gateway</span>
+ *             <CaretDownIcon className="text-muted size-4 shrink-0" />
+ *           </Sidebar.SwitcherTrigger>
+ *         </DropdownMenu.Trigger>
+ *         <DropdownMenu.Content width="trigger" className="min-w-(--sidebar-row-width)">…</DropdownMenu.Content>
+ *       </DropdownMenu.Root>
+ *     </Sidebar.Header>
+ *     <Sidebar.Body>
+ *       <Sidebar.Group>
+ *         <Sidebar.GroupLabel>Traffic</Sidebar.GroupLabel>
+ *         <Sidebar.List>
+ *           <Sidebar.Item>
+ *             <Sidebar.ItemButton asChild current>
+ *               <a href="/endpoints">
+ *                 <GraphIcon />
+ *                 Endpoints
+ *               </a>
+ *             </Sidebar.ItemButton>
+ *           </Sidebar.Item>
+ *         </Sidebar.List>
+ *       </Sidebar.Group>
+ *     </Sidebar.Body>
+ *     <Sidebar.Footer>
+ *       <Sidebar.Separator />
+ *       <DropdownMenu.Root>
+ *         <DropdownMenu.Trigger asChild>
+ *           <Sidebar.SwitcherTrigger>
+ *             <Sidebar.AccountAvatar accountId="acc_123" accountName="Acme Corp" />
+ *             <span className="text-strong min-w-0 flex-1 truncate text-sm font-medium">Acme Corp</span>
+ *             <Sidebar.UserAvatar alt="Jane Doe" />
+ *           </Sidebar.SwitcherTrigger>
+ *         </DropdownMenu.Trigger>
+ *         <DropdownMenu.Content width="trigger" className="min-w-(--sidebar-row-width)">…</DropdownMenu.Content>
+ *       </DropdownMenu.Root>
+ *     </Sidebar.Footer>
+ *   </Sidebar.Nav>
+ *   <Sidebar.Trigger />
+ * </Sidebar.Root>
+ * ```
+ */
+declare const ItemButton: ({ asChild, children, className, current, "data-slot": dataSlot, type, ...props }: SidebarItemButtonProps) => import("react").JSX.Element;
+type SidebarSwitcherTriggerProps = ComponentProps<"button"> & WithAsChild & WithDataSlot;
+/**
+ * The styled row for the sidebar's switchers: the app/product switcher in
+ * `Sidebar.Header` and the account/user row in `Sidebar.Footer`. A styled
+ * button only — it is not wired to any state; compose it with
+ * `DropdownMenu.Trigger asChild` or `Dialog.Trigger asChild`, which supply
+ * the open state (`data-state="open"` styling comes for free from those
+ * primitives).
+ *
+ * Inside the collapsed icon rail, the row collapses to
+ * its **first child element** — the leading visual (product icon, account
+ * avatar) — and the remaining children become visually hidden while staying
+ * in the accessibility tree, so the button's accessible name is unchanged.
+ * Wrap loose text in an element (e.g. a `<span>`) so it participates.
+ *
+ * A menu opened from the row should be as wide as the row: `width="trigger"`
+ * does that while the panel is expanded, but the row shrinks to a 36px chip in
+ * the icon rail and would drag the menu down to it. Floor the menu at the
+ * expanded row width with `className="min-w-(--sidebar-row-width)"` — the
+ * token `mantle.css` declares at `:root` for exactly this, since the menu
+ * renders in a portal and inherits nothing from the panel. The floor is a
+ * no-op while the panel is expanded (the row already measures that wide), and
+ * inert in the mobile sheet as long as its row is the wider of the two
+ * (`--sidebar-width-mobile` minus `1.5rem` and the sheet's 1px border, vs
+ * `--sidebar-width` minus `1rem`; 263px vs 240px at the defaults) — so widen
+ * `--sidebar-width-mobile` whenever you widen `--sidebar-width`, or the floor
+ * overhangs the sheet.
+ *
+ * **Data attributes:**
+ *
+ * | Data Attribute | Value | Description |
+ * | --- | --- | --- |
+ * | `data-state` | `"open"` | **Read, not stamped** — supplied by the composing `DropdownMenu.Trigger` / `Dialog.Trigger`. The row styles against it so it stays highlighted while its menu is open. |
+ *
+ * @see https://mantle.ngrok.com/components/navigation/sidebar#sidebarswitchertrigger
+ *
+ * @example
+ * ```tsx
+ * <Sidebar.Root>
+ *   <Sidebar.Nav aria-label="Main">
+ *     <Sidebar.Header>
+ *       <DropdownMenu.Root>
+ *         <DropdownMenu.Trigger asChild>
+ *           <Sidebar.SwitcherTrigger>
+ *             <GlobeIcon />
+ *             <span className="text-strong min-w-0 flex-1 truncate text-base">Universal Gateway</span>
+ *             <CaretDownIcon className="text-muted size-4 shrink-0" />
+ *           </Sidebar.SwitcherTrigger>
+ *         </DropdownMenu.Trigger>
+ *         <DropdownMenu.Content width="trigger" className="min-w-(--sidebar-row-width)">…</DropdownMenu.Content>
+ *       </DropdownMenu.Root>
+ *     </Sidebar.Header>
+ *     <Sidebar.Body>
+ *       <Sidebar.Group>
+ *         <Sidebar.GroupLabel>Traffic</Sidebar.GroupLabel>
+ *         <Sidebar.List>
+ *           <Sidebar.Item>
+ *             <Sidebar.ItemButton asChild current>
+ *               <a href="/endpoints">
+ *                 <GraphIcon />
+ *                 Endpoints
+ *               </a>
+ *             </Sidebar.ItemButton>
+ *           </Sidebar.Item>
+ *         </Sidebar.List>
+ *       </Sidebar.Group>
+ *     </Sidebar.Body>
+ *     <Sidebar.Footer>
+ *       <Sidebar.Separator />
+ *       <DropdownMenu.Root>
+ *         <DropdownMenu.Trigger asChild>
+ *           <Sidebar.SwitcherTrigger>
+ *             <Sidebar.AccountAvatar accountId="acc_123" accountName="Acme Corp" />
+ *             <span className="text-strong min-w-0 flex-1 truncate text-sm font-medium">Acme Corp</span>
+ *             <Sidebar.UserAvatar alt="Jane Doe" />
+ *           </Sidebar.SwitcherTrigger>
+ *         </DropdownMenu.Trigger>
+ *         <DropdownMenu.Content width="trigger" className="min-w-(--sidebar-row-width)">…</DropdownMenu.Content>
+ *       </DropdownMenu.Root>
+ *     </Sidebar.Footer>
+ *   </Sidebar.Nav>
+ *   <Sidebar.Trigger />
+ * </Sidebar.Root>
+ * ```
+ */
+declare const SwitcherTrigger: ({ asChild, children, className, "data-slot": dataSlot, type, ...props }: SidebarSwitcherTriggerProps) => import("react").JSX.Element;
+/**
+ * The props for `Sidebar.Tooltip`. `Tooltip.Content`'s props — so `className`,
+ * `style`, `ref`, `asChild`, and any `data-*` reach the tooltip surface — except
+ * the parts this row owns: `children` is the row being labeled (not the tooltip
+ * body, which is `label`), and `side` becomes optional with a sidebar default.
+ */
+type SidebarTooltipProps = Omit<ComponentProps<typeof Tooltip.Content>, "children" | "side"> & WithDataSlot & {
+  /**
+   * The row this labels — a `Sidebar.ItemButton` or `Sidebar.SwitcherTrigger`,
+   * optionally already wrapped in a `DropdownMenu.Trigger asChild`.
+   *
+   * A single element, required: `Tooltip.Trigger asChild` clones its child, so
+   * text renders nothing a pointer can hover and no children renders no row at
+   * all — both silently.
+   */
+  children: ReactElement;
+  /**
+   * What the tooltip says. Normally the row's own label text: the rail clips the
+   * visible one, so this is what a sighted pointer user reads.
+   */
+  label: ReactNode;
+  /**
+   * Which side of the row the tooltip opens on. The rail sits at the inline
+   * start of the viewport, so the default points the tooltip away from it.
+   *
+   * @default "right"
+   */
+  side?: ComponentProps<typeof Tooltip.Content>["side"];
+};
+/**
+ * Labels a sidebar row while — and only while — the desktop panel is collapsed
+ * to the icon rail. Wrap it around a `Sidebar.ItemButton` or
+ * `Sidebar.SwitcherTrigger`.
+ *
+ * The collapsed rail keeps every row's label in the accessibility tree (clipped,
+ * not removed), which serves screen-reader users but leaves a sighted pointer
+ * user with an unlabeled icon column. This restores the label for them without
+ * duplicating it for anyone else: expanded rows already read their own text, and
+ * the mobile sheet shows full labels, so the tooltip content only mounts in the
+ * collapsed desktop rail.
+ *
+ * **Requires a `TooltipProvider` ancestor**, like any `Tooltip.Root` — mount one
+ * at your app root. This part deliberately does not provide its own, so tooltip
+ * delay and hover settings stay app-wide rather than being overridden per row.
+ *
+ * It composes with a menu trigger: nest `DropdownMenu.Root >
+ * Sidebar.Tooltip > DropdownMenu.Trigger asChild > Sidebar.ItemButton` for a
+ * row that opens a menu *and* labels itself in the rail. `DropdownMenu.Root` must
+ * stay **outside** the tooltip — it is renderless, and `Tooltip.Trigger asChild`
+ * needs a real element to clone.
+ *
+ * `children` is the row; `label` is what the tooltip says. Every other prop is
+ * `Tooltip.Content`'s and lands on the tooltip surface — `className`, `style`,
+ * `ref`, `data-*`, positioning props such as `align` and `sideOffset`, and
+ * `asChild`, which Radix's `Tooltip.Content` implements itself. `side` defaults
+ * to `"right"` so the tooltip opens away from the rail.
+ *
+ * @see https://mantle.ngrok.com/components/navigation/sidebar#sidebartooltip
+ *
+ * @example
+ * ```tsx
+ * <TooltipProvider>
+ *   <Sidebar.Root>
+ *     <Sidebar.Nav aria-label="Main">
+ *       <Sidebar.Body>
+ *         <Sidebar.Group>
+ *           <Sidebar.GroupLabel>Traffic</Sidebar.GroupLabel>
+ *           <Sidebar.List>
+ *             <Sidebar.Item>
+ *               <Sidebar.Tooltip label="Endpoints">
+ *                 <Sidebar.ItemButton asChild current>
+ *                   <a href="/endpoints">
+ *                     <GraphIcon />
+ *                     Endpoints
+ *                   </a>
+ *                 </Sidebar.ItemButton>
+ *               </Sidebar.Tooltip>
+ *             </Sidebar.Item>
+ *           </Sidebar.List>
+ *         </Sidebar.Group>
+ *       </Sidebar.Body>
+ *       <Sidebar.Footer>
+ *         <DropdownMenu.Root>
+ *           <Sidebar.Tooltip label="Help">
+ *             <DropdownMenu.Trigger asChild>
+ *               <Sidebar.ItemButton>
+ *                 <QuestionIcon />
+ *                 Help
+ *               </Sidebar.ItemButton>
+ *             </DropdownMenu.Trigger>
+ *           </Sidebar.Tooltip>
+ *           <DropdownMenu.Content>…</DropdownMenu.Content>
+ *         </DropdownMenu.Root>
+ *       </Sidebar.Footer>
+ *     </Sidebar.Nav>
+ *     <Sidebar.Trigger />
+ *   </Sidebar.Root>
+ * </TooltipProvider>
+ * ```
+ */
+declare const SidebarTooltip: ({ children, "data-slot": dataSlot, label, side, ...props }: SidebarTooltipProps) => import("react").JSX.Element;
+type SidebarSeparatorProps = ComponentProps<typeof Separator> & WithDataSlot;
+/**
+ * An inset hairline between sidebar regions. Composes the mantle `Separator`,
+ * staying aligned with the `px-3` content padding of `Sidebar.Body` and
+ * `Sidebar.Footer` (it deliberately does not run edge to edge) with `my-3`
+ * breathing room above and below. When collapsed to the icon rail, it widens
+ * to the same 36px chip width as `Sidebar.SwitcherTrigger`, balancing the
+ * adjacent app-content gutter that sits outside the rail.
+ *
+ * @see https://mantle.ngrok.com/components/navigation/sidebar#sidebarseparator
+ *
+ * @example
+ * ```tsx
+ * <Sidebar.Root>
+ *   <Sidebar.Nav aria-label="Main">
+ *     <Sidebar.Header>
+ *       <DropdownMenu.Root>
+ *         <DropdownMenu.Trigger asChild>
+ *           <Sidebar.SwitcherTrigger>
+ *             <GlobeIcon />
+ *             <span className="text-strong min-w-0 flex-1 truncate text-base">Universal Gateway</span>
+ *             <CaretDownIcon className="text-muted size-4 shrink-0" />
+ *           </Sidebar.SwitcherTrigger>
+ *         </DropdownMenu.Trigger>
+ *         <DropdownMenu.Content width="trigger" className="min-w-(--sidebar-row-width)">…</DropdownMenu.Content>
+ *       </DropdownMenu.Root>
+ *     </Sidebar.Header>
+ *     <Sidebar.Body>
+ *       <Sidebar.Group>
+ *         <Sidebar.GroupLabel>Traffic</Sidebar.GroupLabel>
+ *         <Sidebar.List>
+ *           <Sidebar.Item>
+ *             <Sidebar.ItemButton asChild current>
+ *               <a href="/endpoints">
+ *                 <GraphIcon />
+ *                 Endpoints
+ *               </a>
+ *             </Sidebar.ItemButton>
+ *           </Sidebar.Item>
+ *         </Sidebar.List>
+ *       </Sidebar.Group>
+ *     </Sidebar.Body>
+ *     <Sidebar.Footer>
+ *       <Sidebar.Separator />
+ *       <DropdownMenu.Root>
+ *         <DropdownMenu.Trigger asChild>
+ *           <Sidebar.SwitcherTrigger>
+ *             <Sidebar.AccountAvatar accountId="acc_123" accountName="Acme Corp" />
+ *             <span className="text-strong min-w-0 flex-1 truncate text-sm font-medium">Acme Corp</span>
+ *             <Sidebar.UserAvatar alt="Jane Doe" />
+ *           </Sidebar.SwitcherTrigger>
+ *         </DropdownMenu.Trigger>
+ *         <DropdownMenu.Content width="trigger" className="min-w-(--sidebar-row-width)">…</DropdownMenu.Content>
+ *       </DropdownMenu.Root>
+ *     </Sidebar.Footer>
+ *   </Sidebar.Nav>
+ *   <Sidebar.Trigger />
+ * </Sidebar.Root>
+ * ```
+ */
+declare const SidebarSeparator: ({ className, "data-slot": dataSlot, ...props }: SidebarSeparatorProps) => import("react").JSX.Element;
+/**
+ * The props for `Sidebar.AccountAvatar`.
+ *
+ * `children` is valid only with `asChild`, where it is the element the avatar
+ * renders as instead of its own `<div>` — pass an empty one, e.g. `<span />`
+ * when the avatar sits inside a `<button>` (which may not contain a `<div>`).
+ * The initials are derived from `accountName`, which a consumer cannot compute,
+ * so they render *inside* that element in place of its own children.
+ */
+type SidebarAccountAvatarProps = Omit<ComponentProps<"div">, "children"> & SelfClosingWithAsChild & WithDataSlot & {
+  /**
+   * The account's stable identifier. Used to deterministically select a
+   * background swatch from the design system's palette so the same account
+   * always gets the same color.
+   */
+  accountId: string | undefined;
+  /**
+   * The account's display name. The first one or two letters become the
+   * avatar's initials. Falls back to `?` when the name is empty.
+   */
+  accountName: string | undefined;
+};
+/**
+ * A small rounded-square avatar that represents an account (workspace,
+ * organization, etc.). The background color is derived deterministically from
+ * the `accountId` so an account's swatch is stable across renders, sessions,
+ * and devices.
+ *
+ * Accounts are rendered as squares to differentiate them visually from users,
+ * which use a circular `Sidebar.UserAvatar`.
+ *
+ * Pass `asChild` with a single empty element to swap the `<div>` it renders —
+ * a `<span />` inside a `<button>`, or a link. The initials are derived from
+ * `accountName`, so they render inside the swapped element; anything that
+ * element carried of its own is replaced.
+ *
+ * @see https://mantle.ngrok.com/components/navigation/sidebar#sidebaraccountavatar
+ *
+ * @example
+ * ```tsx
+ * <Sidebar.Root>
+ *   <Sidebar.Nav aria-label="Main">
+ *     <Sidebar.Header>
+ *       <DropdownMenu.Root>
+ *         <DropdownMenu.Trigger asChild>
+ *           <Sidebar.SwitcherTrigger>
+ *             <GlobeIcon />
+ *             <span className="text-strong min-w-0 flex-1 truncate text-base">Universal Gateway</span>
+ *             <CaretDownIcon className="text-muted size-4 shrink-0" />
+ *           </Sidebar.SwitcherTrigger>
+ *         </DropdownMenu.Trigger>
+ *         <DropdownMenu.Content width="trigger" className="min-w-(--sidebar-row-width)">…</DropdownMenu.Content>
+ *       </DropdownMenu.Root>
+ *     </Sidebar.Header>
+ *     <Sidebar.Body>
+ *       <Sidebar.Group>
+ *         <Sidebar.GroupLabel>Traffic</Sidebar.GroupLabel>
+ *         <Sidebar.List>
+ *           <Sidebar.Item>
+ *             <Sidebar.ItemButton asChild current>
+ *               <a href="/endpoints">
+ *                 <GraphIcon />
+ *                 Endpoints
+ *               </a>
+ *             </Sidebar.ItemButton>
+ *           </Sidebar.Item>
+ *         </Sidebar.List>
+ *       </Sidebar.Group>
+ *     </Sidebar.Body>
+ *     <Sidebar.Footer>
+ *       <Sidebar.Separator />
+ *       <DropdownMenu.Root>
+ *         <DropdownMenu.Trigger asChild>
+ *           <Sidebar.SwitcherTrigger>
+ *             <Sidebar.AccountAvatar accountId="acc_123" accountName="Acme Corp" />
+ *             <span className="text-strong min-w-0 flex-1 truncate text-sm font-medium">Acme Corp</span>
+ *             <Sidebar.UserAvatar alt="Jane Doe" />
+ *           </Sidebar.SwitcherTrigger>
+ *         </DropdownMenu.Trigger>
+ *         <DropdownMenu.Content width="trigger" className="min-w-(--sidebar-row-width)">…</DropdownMenu.Content>
+ *       </DropdownMenu.Root>
+ *     </Sidebar.Footer>
+ *   </Sidebar.Nav>
+ *   <Sidebar.Trigger />
+ * </Sidebar.Root>
+ * ```
+ */
+declare const AccountAvatar: ({ accountId, accountName, asChild, children, className, "data-slot": dataSlot, ...props }: SidebarAccountAvatarProps) => import("react").JSX.Element;
+/**
+ * The props for `Sidebar.UserAvatar`.
+ *
+ * `children` is valid only with `asChild`, where it is the element the avatar
+ * renders as instead of its own `<div>` — pass an empty one, e.g. `<span />`
+ * when the avatar sits inside a `<button>` (which may not contain a `<div>`).
+ * The avatar's visual (the `src` image, or the silhouette fallback) renders
+ * *inside* that element in place of its own children.
+ */
+type SidebarUserAvatarProps = Omit<ComponentProps<"div">, "children"> & SelfClosingWithAsChild & WithDataSlot & {
+  /**
+   * Optional URL of the user's profile picture. When provided, the image is
+   * rendered to fill the avatar with `object-cover`. When omitted (or while
+   * loading), a neutral person silhouette is shown.
+   */
+  src?: string;
+  /**
+   * Accessible label for the avatar. Used as the image's `alt` text and as
+   * the container's `aria-label` when no image is rendered.
+   *
+   * @default "Your account"
+   */
+  alt?: string;
+};
+/**
+ * A circular avatar that represents the currently signed-in user. Renders the
+ * user's profile picture when `src` is provided, otherwise falls back to a
+ * neutral, theme-aware person silhouette.
+ *
+ * Users are rendered as circles to differentiate them visually from accounts,
+ * which use a square `Sidebar.AccountAvatar`.
+ *
+ * Pass `asChild` with a single empty element to swap the `<div>` it renders —
+ * a `<span />` inside a `<button>`, or a link. The image (or the silhouette
+ * fallback) renders inside the swapped element; anything that element carried of
+ * its own is replaced.
+ *
+ * @see https://mantle.ngrok.com/components/navigation/sidebar#sidebaruseravatar
+ *
+ * @example
+ * ```tsx
+ * <Sidebar.Root>
+ *   <Sidebar.Nav aria-label="Main">
+ *     <Sidebar.Header>
+ *       <DropdownMenu.Root>
+ *         <DropdownMenu.Trigger asChild>
+ *           <Sidebar.SwitcherTrigger>
+ *             <GlobeIcon />
+ *             <span className="text-strong min-w-0 flex-1 truncate text-base">Universal Gateway</span>
+ *             <CaretDownIcon className="text-muted size-4 shrink-0" />
+ *           </Sidebar.SwitcherTrigger>
+ *         </DropdownMenu.Trigger>
+ *         <DropdownMenu.Content width="trigger" className="min-w-(--sidebar-row-width)">…</DropdownMenu.Content>
+ *       </DropdownMenu.Root>
+ *     </Sidebar.Header>
+ *     <Sidebar.Body>
+ *       <Sidebar.Group>
+ *         <Sidebar.GroupLabel>Traffic</Sidebar.GroupLabel>
+ *         <Sidebar.List>
+ *           <Sidebar.Item>
+ *             <Sidebar.ItemButton asChild current>
+ *               <a href="/endpoints">
+ *                 <GraphIcon />
+ *                 Endpoints
+ *               </a>
+ *             </Sidebar.ItemButton>
+ *           </Sidebar.Item>
+ *         </Sidebar.List>
+ *       </Sidebar.Group>
+ *     </Sidebar.Body>
+ *     <Sidebar.Footer>
+ *       <Sidebar.Separator />
+ *       <DropdownMenu.Root>
+ *         <DropdownMenu.Trigger asChild>
+ *           <Sidebar.SwitcherTrigger>
+ *             <Sidebar.AccountAvatar accountId="acc_123" accountName="Acme Corp" />
+ *             <span className="text-strong min-w-0 flex-1 truncate text-sm font-medium">Acme Corp</span>
+ *             <Sidebar.UserAvatar alt="Jane Doe" />
+ *           </Sidebar.SwitcherTrigger>
+ *         </DropdownMenu.Trigger>
+ *         <DropdownMenu.Content width="trigger" className="min-w-(--sidebar-row-width)">…</DropdownMenu.Content>
+ *       </DropdownMenu.Root>
+ *     </Sidebar.Footer>
+ *   </Sidebar.Nav>
+ *   <Sidebar.Trigger />
+ * </Sidebar.Root>
+ * ```
+ */
+declare const UserAvatar: ({ alt, asChild, children, className, "data-slot": dataSlot, src, ...props }: SidebarUserAvatarProps) => import("react").JSX.Element;
+/**
+ * A composable, collapsible app-navigation sidebar. `Sidebar.Root` owns the
+ * state (no DOM); `Sidebar.Nav` renders the panel — inline on desktop,
+ * collapsing to a skinny icon rail, and a left-side `Sheet` below the root's
+ * `mobileBreakpoint`; and `Sidebar.Trigger` toggles it from anywhere under the
+ * root (typically an `AppLayout.Header`). Navigation is grouped with
+ * `Sidebar.Group`/`Sidebar.GroupLabel`/`Sidebar.List`, and the switcher rows
+ * (app switcher up top, account/user down bottom) compose
+ * `Sidebar.SwitcherTrigger` with your own `DropdownMenu` or `Dialog`.
+ *
+ * The component is routing-agnostic: compose router links via `asChild` on
+ * `Sidebar.ItemButton` and drive `current` from your router's location.
+ *
+ * @see https://mantle.ngrok.com/components/navigation/sidebar
+ *
+ * @example
+ * Composition:
+ * ```
+ * Sidebar.Root
+ * ├── Sidebar.Nav
+ * │   ├── Sidebar.Header
+ * │   │   └── Sidebar.SwitcherTrigger
+ * │   ├── Sidebar.Body
+ * │   │   └── Sidebar.Group
+ * │   │       ├── Sidebar.GroupLabel
+ * │   │       └── Sidebar.List
+ * │   │           └── Sidebar.Item
+ * │   │               └── Sidebar.Tooltip
+ * │   │                   └── Sidebar.ItemButton
+ * │   └── Sidebar.Footer
+ * │       ├── Sidebar.ItemButton
+ * │       ├── Sidebar.Separator
+ * │       └── Sidebar.SwitcherTrigger
+ * │           ├── Sidebar.AccountAvatar
+ * │           └── Sidebar.UserAvatar
+ * └── Sidebar.Trigger
+ * ```
+ *
+ * @example
+ * ```tsx
+ * <Sidebar.Root>
+ *   <Sidebar.Nav aria-label="Main">
+ *     <Sidebar.Header>
+ *       <DropdownMenu.Root>
+ *         <DropdownMenu.Trigger asChild>
+ *           <Sidebar.SwitcherTrigger>
+ *             <GlobeIcon />
+ *             <span className="text-strong min-w-0 flex-1 truncate text-base">Universal Gateway</span>
+ *             <CaretDownIcon className="text-muted size-4 shrink-0" />
+ *           </Sidebar.SwitcherTrigger>
+ *         </DropdownMenu.Trigger>
+ *         <DropdownMenu.Content width="trigger" className="min-w-(--sidebar-row-width)">…</DropdownMenu.Content>
+ *       </DropdownMenu.Root>
+ *     </Sidebar.Header>
+ *     <Sidebar.Body>
+ *       <Sidebar.Group>
+ *         <Sidebar.GroupLabel>Traffic</Sidebar.GroupLabel>
+ *         <Sidebar.List>
+ *           <Sidebar.Item>
+ *             <Sidebar.ItemButton asChild current>
+ *               <a href="/endpoints">
+ *                 <GraphIcon />
+ *                 Endpoints
+ *               </a>
+ *             </Sidebar.ItemButton>
+ *           </Sidebar.Item>
+ *         </Sidebar.List>
+ *       </Sidebar.Group>
+ *     </Sidebar.Body>
+ *     <Sidebar.Footer>
+ *       <Sidebar.Separator />
+ *       <DropdownMenu.Root>
+ *         <DropdownMenu.Trigger asChild>
+ *           <Sidebar.SwitcherTrigger>
+ *             <Sidebar.AccountAvatar accountId="acc_123" accountName="Acme Corp" />
+ *             <span className="text-strong min-w-0 flex-1 truncate text-sm font-medium">Acme Corp</span>
+ *             <Sidebar.UserAvatar alt="Jane Doe" />
+ *           </Sidebar.SwitcherTrigger>
+ *         </DropdownMenu.Trigger>
+ *         <DropdownMenu.Content width="trigger" className="min-w-(--sidebar-row-width)">…</DropdownMenu.Content>
+ *       </DropdownMenu.Root>
+ *     </Sidebar.Footer>
+ *   </Sidebar.Nav>
+ *   <Sidebar.Trigger />
+ * </Sidebar.Root>
+ * ```
+ */
+declare const Sidebar: {
+  /**
+   * The state owner for a sidebar. Renders no DOM — provides expanded /
+   * mobile-sheet state to every part below it so the trigger can live in the
+   * app shell without coupling it to the sidebar.
+   *
+   * @see https://mantle.ngrok.com/components/navigation/sidebar#sidebarroot
+   *
+   * @example
+   * ```tsx
+   * <Sidebar.Root>
+   *   <Sidebar.Nav aria-label="Main">
+   *     <Sidebar.Header>
+   *       <DropdownMenu.Root>
+   *         <DropdownMenu.Trigger asChild>
+   *           <Sidebar.SwitcherTrigger>
+   *             <GlobeIcon />
+   *             <span className="text-strong min-w-0 flex-1 truncate text-base">Universal Gateway</span>
+   *             <CaretDownIcon className="text-muted size-4 shrink-0" />
+   *           </Sidebar.SwitcherTrigger>
+   *         </DropdownMenu.Trigger>
+   *         <DropdownMenu.Content width="trigger" className="min-w-(--sidebar-row-width)">…</DropdownMenu.Content>
+   *       </DropdownMenu.Root>
+   *     </Sidebar.Header>
+   *     <Sidebar.Body>
+   *       <Sidebar.Group>
+   *         <Sidebar.GroupLabel>Traffic</Sidebar.GroupLabel>
+   *         <Sidebar.List>
+   *           <Sidebar.Item>
+   *             <Sidebar.ItemButton asChild current>
+   *               <a href="/endpoints">
+   *                 <GraphIcon />
+   *                 Endpoints
+   *               </a>
+   *             </Sidebar.ItemButton>
+   *           </Sidebar.Item>
+   *         </Sidebar.List>
+   *       </Sidebar.Group>
+   *     </Sidebar.Body>
+   *     <Sidebar.Footer>
+   *       <Sidebar.Separator />
+   *       <DropdownMenu.Root>
+   *         <DropdownMenu.Trigger asChild>
+   *           <Sidebar.SwitcherTrigger>
+   *             <Sidebar.AccountAvatar accountId="acc_123" accountName="Acme Corp" />
+   *             <span className="text-strong min-w-0 flex-1 truncate text-sm font-medium">Acme Corp</span>
+   *             <Sidebar.UserAvatar alt="Jane Doe" />
+   *           </Sidebar.SwitcherTrigger>
+   *         </DropdownMenu.Trigger>
+   *         <DropdownMenu.Content width="trigger" className="min-w-(--sidebar-row-width)">…</DropdownMenu.Content>
+   *       </DropdownMenu.Root>
+   *     </Sidebar.Footer>
+   *   </Sidebar.Nav>
+   *   <Sidebar.Trigger />
+   * </Sidebar.Root>
+   * ```
+   */
+  readonly Root: typeof Root;
+  /**
+   * The sidebar panel: an inline panel that collapses to the icon rail on
+   * desktop, a left `Sheet` below the root's `mobileBreakpoint`. Set
+   * `--sidebar-width` / `--sidebar-width-mobile` via its `className` or
+   * `style`.
+   *
+   * **Data attributes:**
+   *
+   * | Data Attribute | Value | Description |
+   * | --- | --- | --- |
+   * | `data-state` | `"expanded"` \| `"collapsed"` | On the desktop panel surface. Mirrors the root's expanded state and drives the width collapse to the icon rail; descendant parts style off it with `group-data-[state=collapsed]/sidebar-nav:`. |
+   * | `data-hydrated` | present after hydration | Presence-only, desktop panel surface. The CSS-side twin of the `isHydrated` gate: descendant collapse transitions are enabled only under `group-data-[hydrated]/sidebar-nav:`, so an SSR state correction snaps instead of animating on page load. |
+   * | `data-mobile` | present in the mobile sheet | Presence-only. Marks the `Sheet.Content` presentation used below the root's `mobileBreakpoint`. |
+   * | `data-state` | `"open"` \| `"closed"` | In the mobile sheet only, where the panel *is* the `Sheet`'s Radix dialog content element and Radix owns the attribute — the sheet's open/close animation state, not the desktop expanded state. Consumers style against it too. |
+   *
+   * @see https://mantle.ngrok.com/components/navigation/sidebar#sidebarnav
+   *
+   * @example
+   * ```tsx
+   * <Sidebar.Root>
+   *   <Sidebar.Nav aria-label="Main">
+   *     <Sidebar.Header>
+   *       <DropdownMenu.Root>
+   *         <DropdownMenu.Trigger asChild>
+   *           <Sidebar.SwitcherTrigger>
+   *             <GlobeIcon />
+   *             <span className="text-strong min-w-0 flex-1 truncate text-base">Universal Gateway</span>
+   *             <CaretDownIcon className="text-muted size-4 shrink-0" />
+   *           </Sidebar.SwitcherTrigger>
+   *         </DropdownMenu.Trigger>
+   *         <DropdownMenu.Content width="trigger" className="min-w-(--sidebar-row-width)">…</DropdownMenu.Content>
+   *       </DropdownMenu.Root>
+   *     </Sidebar.Header>
+   *     <Sidebar.Body>
+   *       <Sidebar.Group>
+   *         <Sidebar.GroupLabel>Traffic</Sidebar.GroupLabel>
+   *         <Sidebar.List>
+   *           <Sidebar.Item>
+   *             <Sidebar.ItemButton asChild current>
+   *               <a href="/endpoints">
+   *                 <GraphIcon />
+   *                 Endpoints
+   *               </a>
+   *             </Sidebar.ItemButton>
+   *           </Sidebar.Item>
+   *         </Sidebar.List>
+   *       </Sidebar.Group>
+   *     </Sidebar.Body>
+   *     <Sidebar.Footer>
+   *       <Sidebar.Separator />
+   *       <DropdownMenu.Root>
+   *         <DropdownMenu.Trigger asChild>
+   *           <Sidebar.SwitcherTrigger>
+   *             <Sidebar.AccountAvatar accountId="acc_123" accountName="Acme Corp" />
+   *             <span className="text-strong min-w-0 flex-1 truncate text-sm font-medium">Acme Corp</span>
+   *             <Sidebar.UserAvatar alt="Jane Doe" />
+   *           </Sidebar.SwitcherTrigger>
+   *         </DropdownMenu.Trigger>
+   *         <DropdownMenu.Content width="trigger" className="min-w-(--sidebar-row-width)">…</DropdownMenu.Content>
+   *       </DropdownMenu.Root>
+   *     </Sidebar.Footer>
+   *   </Sidebar.Nav>
+   *   <Sidebar.Trigger />
+   * </Sidebar.Root>
+   * ```
+   */
+  readonly Nav: typeof Nav;
+  /**
+   * The `IconButton` that toggles the sidebar. Place it in the app shell's
+   * header; it stays functional at every breakpoint.
+   *
+   * **Data attributes:**
+   *
+   * | Data Attribute | Value | Description |
+   * | --- | --- | --- |
+   * | `data-state` | `"expanded"` \| `"collapsed"` | Mirrors what the trigger toggles: the mobile sheet below the root's `mobileBreakpoint`, the desktop panel otherwise. Pairs with `aria-expanded`. |
+   * | `data-appearance` | `"ghost"` \| `"outlined"` | Read, not stamped: the underlying `IconButton` reflects its `appearance`, which this part defaults to `"ghost"`. |
+   * | `data-intent` | `"accent"` \| `"danger"` \| `"neutral"` | Read, not stamped: the underlying `IconButton` reflects its `intent`, which this part defaults to `"neutral"`. |
+   * | `data-size` | `"xs"` \| `"sm"` \| `"md"` \| `"lg"` \| `"xl"` | Read, not stamped: the underlying `IconButton` reflects its `size` and its own `"md"` default. |
+   *
+   * @see https://mantle.ngrok.com/components/navigation/sidebar#sidebartrigger
+   *
+   * @example
+   * ```tsx
+   * <Sidebar.Root>
+   *   <Sidebar.Nav aria-label="Main">
+   *     <Sidebar.Header>
+   *       <DropdownMenu.Root>
+   *         <DropdownMenu.Trigger asChild>
+   *           <Sidebar.SwitcherTrigger>
+   *             <GlobeIcon />
+   *             <span className="text-strong min-w-0 flex-1 truncate text-base">Universal Gateway</span>
+   *             <CaretDownIcon className="text-muted size-4 shrink-0" />
+   *           </Sidebar.SwitcherTrigger>
+   *         </DropdownMenu.Trigger>
+   *         <DropdownMenu.Content width="trigger" className="min-w-(--sidebar-row-width)">…</DropdownMenu.Content>
+   *       </DropdownMenu.Root>
+   *     </Sidebar.Header>
+   *     <Sidebar.Body>
+   *       <Sidebar.Group>
+   *         <Sidebar.GroupLabel>Traffic</Sidebar.GroupLabel>
+   *         <Sidebar.List>
+   *           <Sidebar.Item>
+   *             <Sidebar.ItemButton asChild current>
+   *               <a href="/endpoints">
+   *                 <GraphIcon />
+   *                 Endpoints
+   *               </a>
+   *             </Sidebar.ItemButton>
+   *           </Sidebar.Item>
+   *         </Sidebar.List>
+   *       </Sidebar.Group>
+   *     </Sidebar.Body>
+   *     <Sidebar.Footer>
+   *       <Sidebar.Separator />
+   *       <DropdownMenu.Root>
+   *         <DropdownMenu.Trigger asChild>
+   *           <Sidebar.SwitcherTrigger>
+   *             <Sidebar.AccountAvatar accountId="acc_123" accountName="Acme Corp" />
+   *             <span className="text-strong min-w-0 flex-1 truncate text-sm font-medium">Acme Corp</span>
+   *             <Sidebar.UserAvatar alt="Jane Doe" />
+   *           </Sidebar.SwitcherTrigger>
+   *         </DropdownMenu.Trigger>
+   *         <DropdownMenu.Content width="trigger" className="min-w-(--sidebar-row-width)">…</DropdownMenu.Content>
+   *       </DropdownMenu.Root>
+   *     </Sidebar.Footer>
+   *   </Sidebar.Nav>
+   *   <Sidebar.Trigger />
+   * </Sidebar.Root>
+   * ```
+   */
+  readonly Trigger: typeof Trigger;
+  /**
+   * The pinned top container of the panel, typically holding the app
+   * switcher (`Sidebar.SwitcherTrigger` + `DropdownMenu`/`Dialog`). Its
+   * height vertically aligns the switcher with an `AppLayout.Header`.
+   *
+   * @see https://mantle.ngrok.com/components/navigation/sidebar#sidebarheader
+   *
+   * @example
+   * ```tsx
+   * <Sidebar.Root>
+   *   <Sidebar.Nav aria-label="Main">
+   *     <Sidebar.Header>
+   *       <DropdownMenu.Root>
+   *         <DropdownMenu.Trigger asChild>
+   *           <Sidebar.SwitcherTrigger>
+   *             <GlobeIcon />
+   *             <span className="text-strong min-w-0 flex-1 truncate text-base">Universal Gateway</span>
+   *             <CaretDownIcon className="text-muted size-4 shrink-0" />
+   *           </Sidebar.SwitcherTrigger>
+   *         </DropdownMenu.Trigger>
+   *         <DropdownMenu.Content width="trigger" className="min-w-(--sidebar-row-width)">…</DropdownMenu.Content>
+   *       </DropdownMenu.Root>
+   *     </Sidebar.Header>
+   *     <Sidebar.Body>
+   *       <Sidebar.Group>
+   *         <Sidebar.GroupLabel>Traffic</Sidebar.GroupLabel>
+   *         <Sidebar.List>
+   *           <Sidebar.Item>
+   *             <Sidebar.ItemButton asChild current>
+   *               <a href="/endpoints">
+   *                 <GraphIcon />
+   *                 Endpoints
+   *               </a>
+   *             </Sidebar.ItemButton>
+   *           </Sidebar.Item>
+   *         </Sidebar.List>
+   *       </Sidebar.Group>
+   *     </Sidebar.Body>
+   *     <Sidebar.Footer>
+   *       <Sidebar.Separator />
+   *       <DropdownMenu.Root>
+   *         <DropdownMenu.Trigger asChild>
+   *           <Sidebar.SwitcherTrigger>
+   *             <Sidebar.AccountAvatar accountId="acc_123" accountName="Acme Corp" />
+   *             <span className="text-strong min-w-0 flex-1 truncate text-sm font-medium">Acme Corp</span>
+   *             <Sidebar.UserAvatar alt="Jane Doe" />
+   *           </Sidebar.SwitcherTrigger>
+   *         </DropdownMenu.Trigger>
+   *         <DropdownMenu.Content width="trigger" className="min-w-(--sidebar-row-width)">…</DropdownMenu.Content>
+   *       </DropdownMenu.Root>
+   *     </Sidebar.Footer>
+   *   </Sidebar.Nav>
+   *   <Sidebar.Trigger />
+   * </Sidebar.Root>
+   * ```
+   */
+  readonly Header: typeof Header;
+  /**
+   * The scrollable middle region holding the navigation groups.
+   *
+   * @see https://mantle.ngrok.com/components/navigation/sidebar#sidebarbody
+   *
+   * @example
+   * ```tsx
+   * <Sidebar.Root>
+   *   <Sidebar.Nav aria-label="Main">
+   *     <Sidebar.Header>
+   *       <DropdownMenu.Root>
+   *         <DropdownMenu.Trigger asChild>
+   *           <Sidebar.SwitcherTrigger>
+   *             <GlobeIcon />
+   *             <span className="text-strong min-w-0 flex-1 truncate text-base">Universal Gateway</span>
+   *             <CaretDownIcon className="text-muted size-4 shrink-0" />
+   *           </Sidebar.SwitcherTrigger>
+   *         </DropdownMenu.Trigger>
+   *         <DropdownMenu.Content width="trigger" className="min-w-(--sidebar-row-width)">…</DropdownMenu.Content>
+   *       </DropdownMenu.Root>
+   *     </Sidebar.Header>
+   *     <Sidebar.Body>
+   *       <Sidebar.Group>
+   *         <Sidebar.GroupLabel>Traffic</Sidebar.GroupLabel>
+   *         <Sidebar.List>
+   *           <Sidebar.Item>
+   *             <Sidebar.ItemButton asChild current>
+   *               <a href="/endpoints">
+   *                 <GraphIcon />
+   *                 Endpoints
+   *               </a>
+   *             </Sidebar.ItemButton>
+   *           </Sidebar.Item>
+   *         </Sidebar.List>
+   *       </Sidebar.Group>
+   *     </Sidebar.Body>
+   *     <Sidebar.Footer>
+   *       <Sidebar.Separator />
+   *       <DropdownMenu.Root>
+   *         <DropdownMenu.Trigger asChild>
+   *           <Sidebar.SwitcherTrigger>
+   *             <Sidebar.AccountAvatar accountId="acc_123" accountName="Acme Corp" />
+   *             <span className="text-strong min-w-0 flex-1 truncate text-sm font-medium">Acme Corp</span>
+   *             <Sidebar.UserAvatar alt="Jane Doe" />
+   *           </Sidebar.SwitcherTrigger>
+   *         </DropdownMenu.Trigger>
+   *         <DropdownMenu.Content width="trigger" className="min-w-(--sidebar-row-width)">…</DropdownMenu.Content>
+   *       </DropdownMenu.Root>
+   *     </Sidebar.Footer>
+   *   </Sidebar.Nav>
+   *   <Sidebar.Trigger />
+   * </Sidebar.Root>
+   * ```
+   */
+  readonly Body: typeof Body;
+  /**
+   * The pinned bottom container, typically holding cross-product items and
+   * the account/user switcher row.
+   *
+   * @see https://mantle.ngrok.com/components/navigation/sidebar#sidebarfooter
+   *
+   * @example
+   * ```tsx
+   * <Sidebar.Root>
+   *   <Sidebar.Nav aria-label="Main">
+   *     <Sidebar.Header>
+   *       <DropdownMenu.Root>
+   *         <DropdownMenu.Trigger asChild>
+   *           <Sidebar.SwitcherTrigger>
+   *             <GlobeIcon />
+   *             <span className="text-strong min-w-0 flex-1 truncate text-base">Universal Gateway</span>
+   *             <CaretDownIcon className="text-muted size-4 shrink-0" />
+   *           </Sidebar.SwitcherTrigger>
+   *         </DropdownMenu.Trigger>
+   *         <DropdownMenu.Content width="trigger" className="min-w-(--sidebar-row-width)">…</DropdownMenu.Content>
+   *       </DropdownMenu.Root>
+   *     </Sidebar.Header>
+   *     <Sidebar.Body>
+   *       <Sidebar.Group>
+   *         <Sidebar.GroupLabel>Traffic</Sidebar.GroupLabel>
+   *         <Sidebar.List>
+   *           <Sidebar.Item>
+   *             <Sidebar.ItemButton asChild current>
+   *               <a href="/endpoints">
+   *                 <GraphIcon />
+   *                 Endpoints
+   *               </a>
+   *             </Sidebar.ItemButton>
+   *           </Sidebar.Item>
+   *         </Sidebar.List>
+   *       </Sidebar.Group>
+   *     </Sidebar.Body>
+   *     <Sidebar.Footer>
+   *       <Sidebar.Separator />
+   *       <DropdownMenu.Root>
+   *         <DropdownMenu.Trigger asChild>
+   *           <Sidebar.SwitcherTrigger>
+   *             <Sidebar.AccountAvatar accountId="acc_123" accountName="Acme Corp" />
+   *             <span className="text-strong min-w-0 flex-1 truncate text-sm font-medium">Acme Corp</span>
+   *             <Sidebar.UserAvatar alt="Jane Doe" />
+   *           </Sidebar.SwitcherTrigger>
+   *         </DropdownMenu.Trigger>
+   *         <DropdownMenu.Content width="trigger" className="min-w-(--sidebar-row-width)">…</DropdownMenu.Content>
+   *       </DropdownMenu.Root>
+   *     </Sidebar.Footer>
+   *   </Sidebar.Nav>
+   *   <Sidebar.Trigger />
+   * </Sidebar.Root>
+   * ```
+   */
+  readonly Footer: typeof Footer;
+  /**
+   * A grouping container pairing a `GroupLabel` with a `List`; wires the
+   * label to the list via `aria-labelledby`.
+   *
+   * @see https://mantle.ngrok.com/components/navigation/sidebar#sidebargroup
+   *
+   * @example
+   * ```tsx
+   * <Sidebar.Root>
+   *   <Sidebar.Nav aria-label="Main">
+   *     <Sidebar.Header>
+   *       <DropdownMenu.Root>
+   *         <DropdownMenu.Trigger asChild>
+   *           <Sidebar.SwitcherTrigger>
+   *             <GlobeIcon />
+   *             <span className="text-strong min-w-0 flex-1 truncate text-base">Universal Gateway</span>
+   *             <CaretDownIcon className="text-muted size-4 shrink-0" />
+   *           </Sidebar.SwitcherTrigger>
+   *         </DropdownMenu.Trigger>
+   *         <DropdownMenu.Content width="trigger" className="min-w-(--sidebar-row-width)">…</DropdownMenu.Content>
+   *       </DropdownMenu.Root>
+   *     </Sidebar.Header>
+   *     <Sidebar.Body>
+   *       <Sidebar.Group>
+   *         <Sidebar.GroupLabel>Traffic</Sidebar.GroupLabel>
+   *         <Sidebar.List>
+   *           <Sidebar.Item>
+   *             <Sidebar.ItemButton asChild current>
+   *               <a href="/endpoints">
+   *                 <GraphIcon />
+   *                 Endpoints
+   *               </a>
+   *             </Sidebar.ItemButton>
+   *           </Sidebar.Item>
+   *         </Sidebar.List>
+   *       </Sidebar.Group>
+   *     </Sidebar.Body>
+   *     <Sidebar.Footer>
+   *       <Sidebar.Separator />
+   *       <DropdownMenu.Root>
+   *         <DropdownMenu.Trigger asChild>
+   *           <Sidebar.SwitcherTrigger>
+   *             <Sidebar.AccountAvatar accountId="acc_123" accountName="Acme Corp" />
+   *             <span className="text-strong min-w-0 flex-1 truncate text-sm font-medium">Acme Corp</span>
+   *             <Sidebar.UserAvatar alt="Jane Doe" />
+   *           </Sidebar.SwitcherTrigger>
+   *         </DropdownMenu.Trigger>
+   *         <DropdownMenu.Content width="trigger" className="min-w-(--sidebar-row-width)">…</DropdownMenu.Content>
+   *       </DropdownMenu.Root>
+   *     </Sidebar.Footer>
+   *   </Sidebar.Nav>
+   *   <Sidebar.Trigger />
+   * </Sidebar.Root>
+   * ```
+   */
+  readonly Group: typeof Group;
+  /**
+   * The muted label of a group. Renders a `<div>`; pass `asChild` to render
+   * a heading at a level you control.
+   *
+   * @see https://mantle.ngrok.com/components/navigation/sidebar#sidebargrouplabel
+   *
+   * @example
+   * ```tsx
+   * <Sidebar.Root>
+   *   <Sidebar.Nav aria-label="Main">
+   *     <Sidebar.Header>
+   *       <DropdownMenu.Root>
+   *         <DropdownMenu.Trigger asChild>
+   *           <Sidebar.SwitcherTrigger>
+   *             <GlobeIcon />
+   *             <span className="text-strong min-w-0 flex-1 truncate text-base">Universal Gateway</span>
+   *             <CaretDownIcon className="text-muted size-4 shrink-0" />
+   *           </Sidebar.SwitcherTrigger>
+   *         </DropdownMenu.Trigger>
+   *         <DropdownMenu.Content width="trigger" className="min-w-(--sidebar-row-width)">…</DropdownMenu.Content>
+   *       </DropdownMenu.Root>
+   *     </Sidebar.Header>
+   *     <Sidebar.Body>
+   *       <Sidebar.Group>
+   *         <Sidebar.GroupLabel>Traffic</Sidebar.GroupLabel>
+   *         <Sidebar.List>
+   *           <Sidebar.Item>
+   *             <Sidebar.ItemButton asChild current>
+   *               <a href="/endpoints">
+   *                 <GraphIcon />
+   *                 Endpoints
+   *               </a>
+   *             </Sidebar.ItemButton>
+   *           </Sidebar.Item>
+   *         </Sidebar.List>
+   *       </Sidebar.Group>
+   *     </Sidebar.Body>
+   *     <Sidebar.Footer>
+   *       <Sidebar.Separator />
+   *       <DropdownMenu.Root>
+   *         <DropdownMenu.Trigger asChild>
+   *           <Sidebar.SwitcherTrigger>
+   *             <Sidebar.AccountAvatar accountId="acc_123" accountName="Acme Corp" />
+   *             <span className="text-strong min-w-0 flex-1 truncate text-sm font-medium">Acme Corp</span>
+   *             <Sidebar.UserAvatar alt="Jane Doe" />
+   *           </Sidebar.SwitcherTrigger>
+   *         </DropdownMenu.Trigger>
+   *         <DropdownMenu.Content width="trigger" className="min-w-(--sidebar-row-width)">…</DropdownMenu.Content>
+   *       </DropdownMenu.Root>
+   *     </Sidebar.Footer>
+   *   </Sidebar.Nav>
+   *   <Sidebar.Trigger />
+   * </Sidebar.Root>
+   * ```
+   */
+  readonly GroupLabel: typeof GroupLabel;
+  /**
+   * The `<ul>` of navigation rows in a group.
+   *
+   * @see https://mantle.ngrok.com/components/navigation/sidebar#sidebarlist
+   *
+   * @example
+   * ```tsx
+   * <Sidebar.Root>
+   *   <Sidebar.Nav aria-label="Main">
+   *     <Sidebar.Header>
+   *       <DropdownMenu.Root>
+   *         <DropdownMenu.Trigger asChild>
+   *           <Sidebar.SwitcherTrigger>
+   *             <GlobeIcon />
+   *             <span className="text-strong min-w-0 flex-1 truncate text-base">Universal Gateway</span>
+   *             <CaretDownIcon className="text-muted size-4 shrink-0" />
+   *           </Sidebar.SwitcherTrigger>
+   *         </DropdownMenu.Trigger>
+   *         <DropdownMenu.Content width="trigger" className="min-w-(--sidebar-row-width)">…</DropdownMenu.Content>
+   *       </DropdownMenu.Root>
+   *     </Sidebar.Header>
+   *     <Sidebar.Body>
+   *       <Sidebar.Group>
+   *         <Sidebar.GroupLabel>Traffic</Sidebar.GroupLabel>
+   *         <Sidebar.List>
+   *           <Sidebar.Item>
+   *             <Sidebar.ItemButton asChild current>
+   *               <a href="/endpoints">
+   *                 <GraphIcon />
+   *                 Endpoints
+   *               </a>
+   *             </Sidebar.ItemButton>
+   *           </Sidebar.Item>
+   *         </Sidebar.List>
+   *       </Sidebar.Group>
+   *     </Sidebar.Body>
+   *     <Sidebar.Footer>
+   *       <Sidebar.Separator />
+   *       <DropdownMenu.Root>
+   *         <DropdownMenu.Trigger asChild>
+   *           <Sidebar.SwitcherTrigger>
+   *             <Sidebar.AccountAvatar accountId="acc_123" accountName="Acme Corp" />
+   *             <span className="text-strong min-w-0 flex-1 truncate text-sm font-medium">Acme Corp</span>
+   *             <Sidebar.UserAvatar alt="Jane Doe" />
+   *           </Sidebar.SwitcherTrigger>
+   *         </DropdownMenu.Trigger>
+   *         <DropdownMenu.Content width="trigger" className="min-w-(--sidebar-row-width)">…</DropdownMenu.Content>
+   *       </DropdownMenu.Root>
+   *     </Sidebar.Footer>
+   *   </Sidebar.Nav>
+   *   <Sidebar.Trigger />
+   * </Sidebar.Root>
+   * ```
+   */
+  readonly List: typeof List;
+  /**
+   * A single `<li>` row wrapper.
+   *
+   * @see https://mantle.ngrok.com/components/navigation/sidebar#sidebaritem
+   *
+   * @example
+   * ```tsx
+   * <Sidebar.Root>
+   *   <Sidebar.Nav aria-label="Main">
+   *     <Sidebar.Header>
+   *       <DropdownMenu.Root>
+   *         <DropdownMenu.Trigger asChild>
+   *           <Sidebar.SwitcherTrigger>
+   *             <GlobeIcon />
+   *             <span className="text-strong min-w-0 flex-1 truncate text-base">Universal Gateway</span>
+   *             <CaretDownIcon className="text-muted size-4 shrink-0" />
+   *           </Sidebar.SwitcherTrigger>
+   *         </DropdownMenu.Trigger>
+   *         <DropdownMenu.Content width="trigger" className="min-w-(--sidebar-row-width)">…</DropdownMenu.Content>
+   *       </DropdownMenu.Root>
+   *     </Sidebar.Header>
+   *     <Sidebar.Body>
+   *       <Sidebar.Group>
+   *         <Sidebar.GroupLabel>Traffic</Sidebar.GroupLabel>
+   *         <Sidebar.List>
+   *           <Sidebar.Item>
+   *             <Sidebar.ItemButton asChild current>
+   *               <a href="/endpoints">
+   *                 <GraphIcon />
+   *                 Endpoints
+   *               </a>
+   *             </Sidebar.ItemButton>
+   *           </Sidebar.Item>
+   *         </Sidebar.List>
+   *       </Sidebar.Group>
+   *     </Sidebar.Body>
+   *     <Sidebar.Footer>
+   *       <Sidebar.Separator />
+   *       <DropdownMenu.Root>
+   *         <DropdownMenu.Trigger asChild>
+   *           <Sidebar.SwitcherTrigger>
+   *             <Sidebar.AccountAvatar accountId="acc_123" accountName="Acme Corp" />
+   *             <span className="text-strong min-w-0 flex-1 truncate text-sm font-medium">Acme Corp</span>
+   *             <Sidebar.UserAvatar alt="Jane Doe" />
+   *           </Sidebar.SwitcherTrigger>
+   *         </DropdownMenu.Trigger>
+   *         <DropdownMenu.Content width="trigger" className="min-w-(--sidebar-row-width)">…</DropdownMenu.Content>
+   *       </DropdownMenu.Root>
+   *     </Sidebar.Footer>
+   *   </Sidebar.Nav>
+   *   <Sidebar.Trigger />
+   * </Sidebar.Root>
+   * ```
+   */
+  readonly Item: typeof Item;
+  /**
+   * The interactive navigation row (icon + truncating label). `asChild` for
+   * router links; `current` for the active page.
+   *
+   * **Data attributes:**
+   *
+   * | Data Attribute | Value | Description |
+   * | --- | --- | --- |
+   * | `data-current` | present when `current` | Presence-only — never `"false"`, since the `data-current:` variant matches the attribute's existence. Styles the current row. |
+   * | `aria-current` | `"page"` when `current` | Set alongside `data-current`. The current-row styling follows *either*, so a composed child that marks itself (react-router's `NavLink`) gets the treatment without the prop. |
+   * | `data-state` | `"open"` | **Read, not stamped** — supplied by a composing `DropdownMenu.Trigger` / `Dialog.Trigger`. The row styles against it so it stays highlighted while its menu is open. |
+   *
+   * @see https://mantle.ngrok.com/components/navigation/sidebar#sidebaritembutton
+   *
+   * @example
+   * ```tsx
+   * <Sidebar.Root>
+   *   <Sidebar.Nav aria-label="Main">
+   *     <Sidebar.Header>
+   *       <DropdownMenu.Root>
+   *         <DropdownMenu.Trigger asChild>
+   *           <Sidebar.SwitcherTrigger>
+   *             <GlobeIcon />
+   *             <span className="text-strong min-w-0 flex-1 truncate text-base">Universal Gateway</span>
+   *             <CaretDownIcon className="text-muted size-4 shrink-0" />
+   *           </Sidebar.SwitcherTrigger>
+   *         </DropdownMenu.Trigger>
+   *         <DropdownMenu.Content width="trigger" className="min-w-(--sidebar-row-width)">…</DropdownMenu.Content>
+   *       </DropdownMenu.Root>
+   *     </Sidebar.Header>
+   *     <Sidebar.Body>
+   *       <Sidebar.Group>
+   *         <Sidebar.GroupLabel>Traffic</Sidebar.GroupLabel>
+   *         <Sidebar.List>
+   *           <Sidebar.Item>
+   *             <Sidebar.ItemButton asChild current>
+   *               <a href="/endpoints">
+   *                 <GraphIcon />
+   *                 Endpoints
+   *               </a>
+   *             </Sidebar.ItemButton>
+   *           </Sidebar.Item>
+   *         </Sidebar.List>
+   *       </Sidebar.Group>
+   *     </Sidebar.Body>
+   *     <Sidebar.Footer>
+   *       <Sidebar.Separator />
+   *       <DropdownMenu.Root>
+   *         <DropdownMenu.Trigger asChild>
+   *           <Sidebar.SwitcherTrigger>
+   *             <Sidebar.AccountAvatar accountId="acc_123" accountName="Acme Corp" />
+   *             <span className="text-strong min-w-0 flex-1 truncate text-sm font-medium">Acme Corp</span>
+   *             <Sidebar.UserAvatar alt="Jane Doe" />
+   *           </Sidebar.SwitcherTrigger>
+   *         </DropdownMenu.Trigger>
+   *         <DropdownMenu.Content width="trigger" className="min-w-(--sidebar-row-width)">…</DropdownMenu.Content>
+   *       </DropdownMenu.Root>
+   *     </Sidebar.Footer>
+   *   </Sidebar.Nav>
+   *   <Sidebar.Trigger />
+   * </Sidebar.Root>
+   * ```
+   */
+  readonly ItemButton: typeof ItemButton;
+  /**
+   * The styled switcher row for the header/footer. Not state-wired — compose
+   * with `DropdownMenu.Trigger asChild` or `Dialog.Trigger asChild`.
+   *
+   * **Data attributes:**
+   *
+   * | Data Attribute | Value | Description |
+   * | --- | --- | --- |
+   * | `data-state` | `"open"` | **Read, not stamped** — supplied by the composing `DropdownMenu.Trigger` / `Dialog.Trigger`. The row styles against it so it stays highlighted while its menu is open. |
+   *
+   * @see https://mantle.ngrok.com/components/navigation/sidebar#sidebarswitchertrigger
+   *
+   * @example
+   * ```tsx
+   * <Sidebar.Root>
+   *   <Sidebar.Nav aria-label="Main">
+   *     <Sidebar.Header>
+   *       <DropdownMenu.Root>
+   *         <DropdownMenu.Trigger asChild>
+   *           <Sidebar.SwitcherTrigger>
+   *             <GlobeIcon />
+   *             <span className="text-strong min-w-0 flex-1 truncate text-base">Universal Gateway</span>
+   *             <CaretDownIcon className="text-muted size-4 shrink-0" />
+   *           </Sidebar.SwitcherTrigger>
+   *         </DropdownMenu.Trigger>
+   *         <DropdownMenu.Content width="trigger" className="min-w-(--sidebar-row-width)">…</DropdownMenu.Content>
+   *       </DropdownMenu.Root>
+   *     </Sidebar.Header>
+   *     <Sidebar.Body>
+   *       <Sidebar.Group>
+   *         <Sidebar.GroupLabel>Traffic</Sidebar.GroupLabel>
+   *         <Sidebar.List>
+   *           <Sidebar.Item>
+   *             <Sidebar.ItemButton asChild current>
+   *               <a href="/endpoints">
+   *                 <GraphIcon />
+   *                 Endpoints
+   *               </a>
+   *             </Sidebar.ItemButton>
+   *           </Sidebar.Item>
+   *         </Sidebar.List>
+   *       </Sidebar.Group>
+   *     </Sidebar.Body>
+   *     <Sidebar.Footer>
+   *       <Sidebar.Separator />
+   *       <DropdownMenu.Root>
+   *         <DropdownMenu.Trigger asChild>
+   *           <Sidebar.SwitcherTrigger>
+   *             <Sidebar.AccountAvatar accountId="acc_123" accountName="Acme Corp" />
+   *             <span className="text-strong min-w-0 flex-1 truncate text-sm font-medium">Acme Corp</span>
+   *             <Sidebar.UserAvatar alt="Jane Doe" />
+   *           </Sidebar.SwitcherTrigger>
+   *         </DropdownMenu.Trigger>
+   *         <DropdownMenu.Content width="trigger" className="min-w-(--sidebar-row-width)">…</DropdownMenu.Content>
+   *       </DropdownMenu.Root>
+   *     </Sidebar.Footer>
+   *   </Sidebar.Nav>
+   *   <Sidebar.Trigger />
+   * </Sidebar.Root>
+   * ```
+   */
+  readonly SwitcherTrigger: typeof SwitcherTrigger;
+  /**
+   * Labels a row while the panel is collapsed to the icon rail — wrap it
+   * around a `Sidebar.ItemButton` or `Sidebar.SwitcherTrigger`. Requires a
+   * `TooltipProvider` ancestor. Takes `Tooltip.Content`'s props (including
+   * `asChild`) on the tooltip surface; `side` defaults to `"right"`.
+   *
+   * @see https://mantle.ngrok.com/components/navigation/sidebar#sidebartooltip
+   *
+   * @example
+   * ```tsx
+   * <TooltipProvider>
+   *   <Sidebar.Root>
+   *     <Sidebar.Nav aria-label="Main">
+   *       <Sidebar.Header>
+   *         <DropdownMenu.Root>
+   *           <DropdownMenu.Trigger asChild>
+   *             <Sidebar.SwitcherTrigger>
+   *               <GlobeIcon />
+   *               <span className="text-strong min-w-0 flex-1 truncate text-base">Universal Gateway</span>
+   *               <CaretDownIcon className="text-muted size-4 shrink-0" />
+   *             </Sidebar.SwitcherTrigger>
+   *           </DropdownMenu.Trigger>
+   *           <DropdownMenu.Content width="trigger" className="min-w-(--sidebar-row-width)">…</DropdownMenu.Content>
+   *         </DropdownMenu.Root>
+   *       </Sidebar.Header>
+   *       <Sidebar.Body>
+   *         <Sidebar.Group>
+   *           <Sidebar.GroupLabel>Traffic</Sidebar.GroupLabel>
+   *           <Sidebar.List>
+   *             <Sidebar.Item>
+   *               <Sidebar.Tooltip label="Endpoints">
+   *                 <Sidebar.ItemButton asChild current>
+   *                   <a href="/endpoints">
+   *                     <GraphIcon />
+   *                     Endpoints
+   *                   </a>
+   *                 </Sidebar.ItemButton>
+   *               </Sidebar.Tooltip>
+   *             </Sidebar.Item>
+   *           </Sidebar.List>
+   *         </Sidebar.Group>
+   *       </Sidebar.Body>
+   *       <Sidebar.Footer>
+   *         <Sidebar.Separator />
+   *         <DropdownMenu.Root>
+   *           <Sidebar.Tooltip label="Acme Corp">
+   *             <DropdownMenu.Trigger asChild>
+   *               <Sidebar.SwitcherTrigger>
+   *                 <Sidebar.AccountAvatar accountId="acc_123" accountName="Acme Corp" />
+   *                 <span className="text-strong min-w-0 flex-1 truncate text-sm font-medium">Acme Corp</span>
+   *                 <Sidebar.UserAvatar alt="Jane Doe" />
+   *               </Sidebar.SwitcherTrigger>
+   *             </DropdownMenu.Trigger>
+   *           </Sidebar.Tooltip>
+   *           <DropdownMenu.Content width="trigger" className="min-w-(--sidebar-row-width)">…</DropdownMenu.Content>
+   *         </DropdownMenu.Root>
+   *       </Sidebar.Footer>
+   *     </Sidebar.Nav>
+   *     <Sidebar.Trigger />
+   *   </Sidebar.Root>
+   * </TooltipProvider>
+   * ```
+   */
+  readonly Tooltip: typeof SidebarTooltip;
+  /**
+   * An inset hairline between sidebar regions, aligned with the content
+   * padding.
+   *
+   * @see https://mantle.ngrok.com/components/navigation/sidebar#sidebarseparator
+   *
+   * @example
+   * ```tsx
+   * <Sidebar.Root>
+   *   <Sidebar.Nav aria-label="Main">
+   *     <Sidebar.Header>
+   *       <DropdownMenu.Root>
+   *         <DropdownMenu.Trigger asChild>
+   *           <Sidebar.SwitcherTrigger>
+   *             <GlobeIcon />
+   *             <span className="text-strong min-w-0 flex-1 truncate text-base">Universal Gateway</span>
+   *             <CaretDownIcon className="text-muted size-4 shrink-0" />
+   *           </Sidebar.SwitcherTrigger>
+   *         </DropdownMenu.Trigger>
+   *         <DropdownMenu.Content width="trigger" className="min-w-(--sidebar-row-width)">…</DropdownMenu.Content>
+   *       </DropdownMenu.Root>
+   *     </Sidebar.Header>
+   *     <Sidebar.Body>
+   *       <Sidebar.Group>
+   *         <Sidebar.GroupLabel>Traffic</Sidebar.GroupLabel>
+   *         <Sidebar.List>
+   *           <Sidebar.Item>
+   *             <Sidebar.ItemButton asChild current>
+   *               <a href="/endpoints">
+   *                 <GraphIcon />
+   *                 Endpoints
+   *               </a>
+   *             </Sidebar.ItemButton>
+   *           </Sidebar.Item>
+   *         </Sidebar.List>
+   *       </Sidebar.Group>
+   *     </Sidebar.Body>
+   *     <Sidebar.Footer>
+   *       <Sidebar.Separator />
+   *       <DropdownMenu.Root>
+   *         <DropdownMenu.Trigger asChild>
+   *           <Sidebar.SwitcherTrigger>
+   *             <Sidebar.AccountAvatar accountId="acc_123" accountName="Acme Corp" />
+   *             <span className="text-strong min-w-0 flex-1 truncate text-sm font-medium">Acme Corp</span>
+   *             <Sidebar.UserAvatar alt="Jane Doe" />
+   *           </Sidebar.SwitcherTrigger>
+   *         </DropdownMenu.Trigger>
+   *         <DropdownMenu.Content width="trigger" className="min-w-(--sidebar-row-width)">…</DropdownMenu.Content>
+   *       </DropdownMenu.Root>
+   *     </Sidebar.Footer>
+   *   </Sidebar.Nav>
+   *   <Sidebar.Trigger />
+   * </Sidebar.Root>
+   * ```
+   */
+  readonly Separator: typeof SidebarSeparator;
+  /**
+   * A rounded-square account avatar with deterministic, WCAG-compliant
+   * swatch colors derived from the account id. `asChild` swaps its `<div>` for
+   * a single empty element and renders the initials inside it.
+   *
+   * @see https://mantle.ngrok.com/components/navigation/sidebar#sidebaraccountavatar
+   *
+   * @example
+   * ```tsx
+   * <Sidebar.Root>
+   *   <Sidebar.Nav aria-label="Main">
+   *     <Sidebar.Header>
+   *       <DropdownMenu.Root>
+   *         <DropdownMenu.Trigger asChild>
+   *           <Sidebar.SwitcherTrigger>
+   *             <GlobeIcon />
+   *             <span className="text-strong min-w-0 flex-1 truncate text-base">Universal Gateway</span>
+   *             <CaretDownIcon className="text-muted size-4 shrink-0" />
+   *           </Sidebar.SwitcherTrigger>
+   *         </DropdownMenu.Trigger>
+   *         <DropdownMenu.Content width="trigger" className="min-w-(--sidebar-row-width)">…</DropdownMenu.Content>
+   *       </DropdownMenu.Root>
+   *     </Sidebar.Header>
+   *     <Sidebar.Body>
+   *       <Sidebar.Group>
+   *         <Sidebar.GroupLabel>Traffic</Sidebar.GroupLabel>
+   *         <Sidebar.List>
+   *           <Sidebar.Item>
+   *             <Sidebar.ItemButton asChild current>
+   *               <a href="/endpoints">
+   *                 <GraphIcon />
+   *                 Endpoints
+   *               </a>
+   *             </Sidebar.ItemButton>
+   *           </Sidebar.Item>
+   *         </Sidebar.List>
+   *       </Sidebar.Group>
+   *     </Sidebar.Body>
+   *     <Sidebar.Footer>
+   *       <Sidebar.Separator />
+   *       <DropdownMenu.Root>
+   *         <DropdownMenu.Trigger asChild>
+   *           <Sidebar.SwitcherTrigger>
+   *             <Sidebar.AccountAvatar accountId="acc_123" accountName="Acme Corp" />
+   *             <span className="text-strong min-w-0 flex-1 truncate text-sm font-medium">Acme Corp</span>
+   *             <Sidebar.UserAvatar alt="Jane Doe" />
+   *           </Sidebar.SwitcherTrigger>
+   *         </DropdownMenu.Trigger>
+   *         <DropdownMenu.Content width="trigger" className="min-w-(--sidebar-row-width)">…</DropdownMenu.Content>
+   *       </DropdownMenu.Root>
+   *     </Sidebar.Footer>
+   *   </Sidebar.Nav>
+   *   <Sidebar.Trigger />
+   * </Sidebar.Root>
+   * ```
+   */
+  readonly AccountAvatar: typeof AccountAvatar;
+  /**
+   * A circular user avatar with a silhouette fallback. `asChild` swaps its
+   * `<div>` for a single empty element and renders the image inside it.
+   *
+   * @see https://mantle.ngrok.com/components/navigation/sidebar#sidebaruseravatar
+   *
+   * @example
+   * ```tsx
+   * <Sidebar.Root>
+   *   <Sidebar.Nav aria-label="Main">
+   *     <Sidebar.Header>
+   *       <DropdownMenu.Root>
+   *         <DropdownMenu.Trigger asChild>
+   *           <Sidebar.SwitcherTrigger>
+   *             <GlobeIcon />
+   *             <span className="text-strong min-w-0 flex-1 truncate text-base">Universal Gateway</span>
+   *             <CaretDownIcon className="text-muted size-4 shrink-0" />
+   *           </Sidebar.SwitcherTrigger>
+   *         </DropdownMenu.Trigger>
+   *         <DropdownMenu.Content width="trigger" className="min-w-(--sidebar-row-width)">…</DropdownMenu.Content>
+   *       </DropdownMenu.Root>
+   *     </Sidebar.Header>
+   *     <Sidebar.Body>
+   *       <Sidebar.Group>
+   *         <Sidebar.GroupLabel>Traffic</Sidebar.GroupLabel>
+   *         <Sidebar.List>
+   *           <Sidebar.Item>
+   *             <Sidebar.ItemButton asChild current>
+   *               <a href="/endpoints">
+   *                 <GraphIcon />
+   *                 Endpoints
+   *               </a>
+   *             </Sidebar.ItemButton>
+   *           </Sidebar.Item>
+   *         </Sidebar.List>
+   *       </Sidebar.Group>
+   *     </Sidebar.Body>
+   *     <Sidebar.Footer>
+   *       <Sidebar.Separator />
+   *       <DropdownMenu.Root>
+   *         <DropdownMenu.Trigger asChild>
+   *           <Sidebar.SwitcherTrigger>
+   *             <Sidebar.AccountAvatar accountId="acc_123" accountName="Acme Corp" />
+   *             <span className="text-strong min-w-0 flex-1 truncate text-sm font-medium">Acme Corp</span>
+   *             <Sidebar.UserAvatar alt="Jane Doe" />
+   *           </Sidebar.SwitcherTrigger>
+   *         </DropdownMenu.Trigger>
+   *         <DropdownMenu.Content width="trigger" className="min-w-(--sidebar-row-width)">…</DropdownMenu.Content>
+   *       </DropdownMenu.Root>
+   *     </Sidebar.Footer>
+   *   </Sidebar.Nav>
+   *   <Sidebar.Trigger />
+   * </Sidebar.Root>
+   * ```
+   */
+  readonly UserAvatar: typeof UserAvatar;
+};
+//#endregion
+//#region src/components/sidebar/sidebar-state-cookie.d.ts
+/**
+ * The cookie name {@link extractSidebarStateCookie} reads and
+ * {@link serializeSidebarStateCookie} writes.
+ *
+ * Exported so an app can clear the cookie on sign-out, or read it with its own
+ * cookie library, without hard-coding the name.
+ *
+ * @see https://mantle.ngrok.com/components/navigation/sidebar#sidebar_state_cookie_name
+ *
+ * @example
+ * ```ts
+ * // clear the persisted rail state on sign-out
+ * headers.append("Set-Cookie", `${SIDEBAR_STATE_COOKIE_NAME}=; Max-Age=0; Path=/`);
+ * ```
+ */
+declare const SIDEBAR_STATE_COOKIE_NAME = "mantle-sidebar-state";
+/**
+ * Parse the sidebar's expanded state out of a raw `Cookie` header.
+ *
+ * This is the server half of cookie-backed persistence: unlike storage-backed
+ * persistence, a cookie is available *before* the server renders, so the
+ * server-rendered HTML already carries the right `data-state` and there is no
+ * first-frame correction to hide. Pass the result straight to `defaultOpen` —
+ * controlled `open` is not required.
+ *
+ * Returns `undefined` — not `false` — when the cookie is absent or holds a
+ * value this helper does not recognize, so a first-time visitor is
+ * distinguishable from one who deliberately collapsed the sidebar. Collapse the
+ * state into your own default at the call site with `?? true`.
+ *
+ * Never throws: a header is client-controlled, and a value with a malformed
+ * percent-escape (`mantle-sidebar-state=%E0%A4%A`) is unparseable rather than
+ * fatal, so one hostile or corrupt cookie cannot fail the server render on
+ * every page load.
+ *
+ * @see https://mantle.ngrok.com/components/navigation/sidebar#persisting-the-collapsed-state
+ *
+ * @example
+ * ```ts
+ * // app/root.tsx loader
+ * export const loader = ({ request }: Route.LoaderArgs) => ({
+ *   sidebarOpen: extractSidebarStateCookie(request.headers.get("Cookie")) ?? true,
+ * });
+ * ```
+ *
+ * @param cookieHeader - The raw `Cookie` header string from the request, or null/undefined.
+ * @returns `true` when expanded, `false` when collapsed, `undefined` when unset, undecodable, or unparseable.
+ */
+declare function extractSidebarStateCookie(cookieHeader: string | null | undefined): boolean | undefined;
+/**
+ * Attributes for {@link serializeSidebarStateCookie}. Deliberately omits
+ * `HttpOnly`: the browser writes this cookie from `onOpenChange`, so a
+ * server-only cookie could never be updated when the user toggles the rail.
+ *
+ * @see https://mantle.ngrok.com/components/navigation/sidebar#serializesidebarstatecookie
+ *
+ * @example
+ * ```ts
+ * serializeSidebarStateCookie(open, { maxAge: 60 * 60 * 24 * 365, sameSite: "Lax" });
+ * ```
+ */
+type SerializeSidebarStateCookieOptions = {
+  /**
+   * How long the preference survives, in seconds.
+   *
+   * @default 31_536_000 // one year
+   */
+  maxAge?: number;
+  /**
+   * The path the cookie applies to. Keep the default unless the sidebar only
+   * exists under one route subtree.
+   *
+   * @default "/"
+   */
+  path?: string;
+  /**
+   * The domain the cookie applies to. Omitted by default, which scopes it to
+   * the exact current host. Set it (e.g. `".example.com"`) to share the
+   * preference across subdomains.
+   */
+  domain?: string;
+  /**
+   * `SameSite` policy. `"Lax"` is right for a UI preference — it survives
+   * top-level navigations back to your app without riding along on
+   * cross-site subrequests.
+   *
+   * @default "Lax"
+   */
+  sameSite?: "Lax" | "Strict" | "None";
+  /**
+   * Whether to add the `Secure` attribute. Omitted by default so the same call
+   * works on `http://localhost` — a `Secure` cookie is silently rejected over
+   * http, which would make the preference appear not to persist in local
+   * development. Set it to `true` in production if your CSP or policy requires
+   * it; this cookie holds no secret, only whether a rail is open.
+   *
+   * @default false
+   */
+  secure?: boolean;
+};
+/**
+ * Serialize the sidebar's expanded state as a cookie string.
+ *
+ * Framework-agnostic by design: the returned string is valid for both
+ * `document.cookie` on the client and a `Set-Cookie` response header on the
+ * server, so the same helper covers whichever side of your app owns the write.
+ *
+ * @see https://mantle.ngrok.com/components/navigation/sidebar#persisting-the-collapsed-state
+ *
+ * @example
+ * ```tsx
+ * // client: persist as the user toggles, and render from the loader value
+ * const { sidebarOpen } = useLoaderData<typeof loader>();
+ * <Sidebar.Root
+ *   defaultOpen={sidebarOpen}
+ *   onOpenChange={(open) => {
+ *     document.cookie = serializeSidebarStateCookie(open);
+ *   }}
+ * >
+ * ```
+ *
+ * @example
+ * ```ts
+ * // server: set it from an action instead
+ * return new Response(null, {
+ *   headers: { "Set-Cookie": serializeSidebarStateCookie(false, { secure: true }) },
+ * });
+ * ```
+ *
+ * @param open - Whether the sidebar is expanded.
+ * @param options - Cookie attributes; see {@link SerializeSidebarStateCookieOptions}.
+ * @returns A cookie string such as `mantle-sidebar-state=collapsed; Max-Age=31536000; Path=/; SameSite=Lax`.
+ */
+declare function serializeSidebarStateCookie(open: boolean, options?: SerializeSidebarStateCookieOptions): string;
+//#endregion
+export { SIDEBAR_STATE_COOKIE_NAME, type SerializeSidebarStateCookieOptions, Sidebar, type SidebarMobileBreakpoint, type SidebarState, extractSidebarStateCookie, serializeSidebarStateCookie, useSidebar };