@ngrok/mantle 0.82.1 → 0.83.1

package/dist/sidebar.d.ts

@@ -1,8 +1,8 @@
-import { n as WithAsChild, t as SelfClosingWithAsChild } from "./as-child-D23mGo4f.js";
+import { n as WithAsChild } 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 { n as IconButtonProps } from "./button-DJ7AAgII.js";
+import { n as Separator } from "./separator-CNDs98Dv.js";
+import { t as Tooltip } from "./tooltip-DuXGxIse.js";
 import { ComponentProps, ReactElement, ReactNode } from "react";
 //#region src/components/sidebar/sidebar.d.ts
 /**
@@ -79,6 +79,12 @@ type SidebarState = {
    * triggers.
    */
   navId: string;
+  /**
+   * Whether this root owns the `⌘B` / `Ctrl+B` shortcut. `Sidebar.Trigger`
+   * reads it to decide whether its tooltip advertises the chord, so the hint
+   * can never name a binding that is not bound.
+   */
+  keyboardShortcut: boolean;
 };
 /**
  * Read the nearest `Sidebar.Root` state. Throws when called outside a
@@ -162,7 +168,7 @@ type SidebarRootProps = {
 };
 /**
  * The state owner for a sidebar. Renders no DOM of its own (like
- * `Tooltip.Root`) — it provides the expanded/collapsed and mobile-sheet state
+ * `Tooltip.Root`) — it carries 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.
@@ -208,9 +214,10 @@ type SidebarRootProps = {
  *       <DropdownMenu.Root>
  *         <DropdownMenu.Trigger asChild>
  *           <Sidebar.SwitcherTrigger>
- *             <Sidebar.AccountAvatar accountId="acc_123" accountName="Acme Corp" />
+ *             <Avatar.Root appearance="square" colorSeed="acc_123">
+ *               <Avatar.Fallback name="Acme Corp" />
+ *             </Avatar.Root>
  *             <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>
@@ -266,7 +273,7 @@ type SidebarNavProps = ComponentProps<"div"> & WithDataSlot;
  * | 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-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. |
  *
@@ -308,9 +315,10 @@ type SidebarNavProps = ComponentProps<"div"> & WithDataSlot;
  *       <DropdownMenu.Root>
  *         <DropdownMenu.Trigger asChild>
  *           <Sidebar.SwitcherTrigger>
- *             <Sidebar.AccountAvatar accountId="acc_123" accountName="Acme Corp" />
+ *             <Avatar.Root appearance="square" colorSeed="acc_123">
+ *               <Avatar.Fallback name="Acme Corp" />
+ *             </Avatar.Root>
  *             <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>
@@ -349,12 +357,24 @@ type SidebarTriggerProps = Omit<IconButtonProps, "appearance" | "asChild" | "chi
    */
   intent?: IconButtonProps["intent"];
   /**
-   * The accessible name for the trigger. Visually hidden but announced to
-   * assistive technology. Override it for localization.
+   * The accessible name for the trigger, and what its tooltip says. Visually
+   * hidden on the button itself but announced to assistive technology.
+   * Override it for localization.
    *
    * @default "Toggle Sidebar"
    */
   label?: string;
+  /**
+   * The keyboard chord that also toggles the sidebar, rendered after the label
+   * in the tooltip — usually `<><MetaKey /><Kbd>B</Kbd></>`.
+   *
+   * Ignored under `Sidebar.Root keyboardShortcut={false}`, so the tooltip can
+   * never name a binding that is not bound. Passed rather than built in so the
+   * sidebar does not have to reach into another component for the platform
+   * modifier glyph — `aria-keyshortcuts` is stamped either way, which is also
+   * why the chips render `aria-hidden`.
+   */
+  shortcut?: ReactNode;
 };
 /**
  * The button that toggles the sidebar: the mobile sheet below the root's
@@ -364,11 +384,23 @@ type SidebarTriggerProps = Omit<IconButtonProps, "appearance" | "asChild" | "chi
  * `AppLayout.Header`) — it must stay visible at every breakpoint where the
  * sidebar can collapse, or users have no way to reopen it.
  *
+ * The button is icon-only at every breakpoint, so it always renders a tooltip
+ * showing `label` (plus the optional `shortcut` chips). **That means it requires
+ * a `TooltipProvider` ancestor, like any `Tooltip.Root`, and throws without
+ * one** — mount a single provider at your app root, decoupled from the sidebar,
+ * so the app-wide delay and hover settings stay app-wide.
+ *
+ * It also stamps `aria-keyshortcuts` for the `⌘B` / `Ctrl+B` chord the root
+ * binds, resolved after hydration: the server cannot know the host, so the
+ * first paint is the non-Apple answer. Both the attribute and the chips are
+ * omitted under `Sidebar.Root keyboardShortcut={false}`.
+ *
  * **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-slot` | `"sidebar-trigger-tooltip"` | On the tooltip surface, not the button — the styling hook for the label-and-chord popup this part renders. |
  * | `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. |
@@ -411,9 +443,10 @@ type SidebarTriggerProps = Omit<IconButtonProps, "appearance" | "asChild" | "chi
  *       <DropdownMenu.Root>
  *         <DropdownMenu.Trigger asChild>
  *           <Sidebar.SwitcherTrigger>
- *             <Sidebar.AccountAvatar accountId="acc_123" accountName="Acme Corp" />
+ *             <Avatar.Root appearance="square" colorSeed="acc_123">
+ *               <Avatar.Fallback name="Acme Corp" />
+ *             </Avatar.Root>
  *             <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>
@@ -440,7 +473,7 @@ type SidebarTriggerProps = Omit<IconButtonProps, "appearance" | "asChild" | "chi
  * </Sidebar.Root>
  * ```
  */
-declare const Trigger: ({ appearance, "data-slot": dataSlot, icon, intent, label, onClick, ...props }: SidebarTriggerProps) => import("react").JSX.Element;
+declare const Trigger: ({ appearance, "data-slot": dataSlot, icon, intent, label, onClick, shortcut, ...props }: SidebarTriggerProps) => import("react").JSX.Element;
 type SidebarHeaderProps = ComponentProps<"div"> & WithAsChild & WithDataSlot;
 /**
  * The top container of a `Sidebar.Nav`, pinned above the scrollable
@@ -497,9 +530,10 @@ type SidebarHeaderProps = ComponentProps<"div"> & WithAsChild & WithDataSlot;
  *       <DropdownMenu.Root>
  *         <DropdownMenu.Trigger asChild>
  *           <Sidebar.SwitcherTrigger>
- *             <Sidebar.AccountAvatar accountId="acc_123" accountName="Acme Corp" />
+ *             <Avatar.Root appearance="square" colorSeed="acc_123">
+ *               <Avatar.Fallback name="Acme Corp" />
+ *             </Avatar.Root>
  *             <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>
@@ -557,9 +591,10 @@ type SidebarBodyProps = ComponentProps<"div"> & WithAsChild & WithDataSlot;
  *       <DropdownMenu.Root>
  *         <DropdownMenu.Trigger asChild>
  *           <Sidebar.SwitcherTrigger>
- *             <Sidebar.AccountAvatar accountId="acc_123" accountName="Acme Corp" />
+ *             <Avatar.Root appearance="square" colorSeed="acc_123">
+ *               <Avatar.Fallback name="Acme Corp" />
+ *             </Avatar.Root>
  *             <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>
@@ -575,8 +610,8 @@ 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`).
+ * switcher row (`Sidebar.SwitcherTrigger` with an
+ * [Avatar](https://mantle.ngrok.com/components/data-display/avatar)).
  *
  * @see https://mantle.ngrok.com/components/navigation/sidebar#sidebarfooter
  *
@@ -616,9 +651,10 @@ type SidebarFooterProps = ComponentProps<"div"> & WithAsChild & WithDataSlot;
  *       <DropdownMenu.Root>
  *         <DropdownMenu.Trigger asChild>
  *           <Sidebar.SwitcherTrigger>
- *             <Sidebar.AccountAvatar accountId="acc_123" accountName="Acme Corp" />
+ *             <Avatar.Root appearance="square" colorSeed="acc_123">
+ *               <Avatar.Fallback name="Acme Corp" />
+ *             </Avatar.Root>
  *             <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>
@@ -675,9 +711,10 @@ type SidebarGroupProps = ComponentProps<"div"> & WithAsChild & WithDataSlot;
  *       <DropdownMenu.Root>
  *         <DropdownMenu.Trigger asChild>
  *           <Sidebar.SwitcherTrigger>
- *             <Sidebar.AccountAvatar accountId="acc_123" accountName="Acme Corp" />
+ *             <Avatar.Root appearance="square" colorSeed="acc_123">
+ *               <Avatar.Fallback name="Acme Corp" />
+ *             </Avatar.Root>
  *             <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>
@@ -735,9 +772,10 @@ type SidebarGroupLabelProps = ComponentProps<"div"> & WithAsChild & WithDataSlot
  *       <DropdownMenu.Root>
  *         <DropdownMenu.Trigger asChild>
  *           <Sidebar.SwitcherTrigger>
- *             <Sidebar.AccountAvatar accountId="acc_123" accountName="Acme Corp" />
+ *             <Avatar.Root appearance="square" colorSeed="acc_123">
+ *               <Avatar.Fallback name="Acme Corp" />
+ *             </Avatar.Root>
  *             <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>
@@ -793,9 +831,10 @@ type SidebarListProps = ComponentProps<"ul"> & WithAsChild & WithDataSlot;
  *       <DropdownMenu.Root>
  *         <DropdownMenu.Trigger asChild>
  *           <Sidebar.SwitcherTrigger>
- *             <Sidebar.AccountAvatar accountId="acc_123" accountName="Acme Corp" />
+ *             <Avatar.Root appearance="square" colorSeed="acc_123">
+ *               <Avatar.Fallback name="Acme Corp" />
+ *             </Avatar.Root>
  *             <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>
@@ -851,9 +890,10 @@ type SidebarItemProps = ComponentProps<"li"> & WithAsChild & WithDataSlot;
  *       <DropdownMenu.Root>
  *         <DropdownMenu.Trigger asChild>
  *           <Sidebar.SwitcherTrigger>
- *             <Sidebar.AccountAvatar accountId="acc_123" accountName="Acme Corp" />
+ *             <Avatar.Root appearance="square" colorSeed="acc_123">
+ *               <Avatar.Fallback name="Acme Corp" />
+ *             </Avatar.Root>
  *             <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>
@@ -952,9 +992,10 @@ type SidebarItemButtonProps = ComponentProps<"button"> & WithAsChild & WithDataS
  *       <DropdownMenu.Root>
  *         <DropdownMenu.Trigger asChild>
  *           <Sidebar.SwitcherTrigger>
- *             <Sidebar.AccountAvatar accountId="acc_123" accountName="Acme Corp" />
+ *             <Avatar.Root appearance="square" colorSeed="acc_123">
+ *               <Avatar.Fallback name="Acme Corp" />
+ *             </Avatar.Root>
  *             <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>
@@ -966,6 +1007,132 @@ type SidebarItemButtonProps = ComponentProps<"button"> & WithAsChild & WithDataS
  * ```
  */
 declare const ItemButton: ({ asChild, children, className, current, "data-slot": dataSlot, type, ...props }: SidebarItemButtonProps) => import("react").JSX.Element;
+type SidebarSearchTriggerProps = ComponentProps<"button"> & WithDataSlot & ({
+  /**
+   * Compose the search row's styling onto your own element. Then the
+   * row's entire content is yours — including any shortcut hint, which
+   * `shortcut` cannot add to a cloned child.
+   */
+  asChild: true;
+  shortcut?: never;
+} | {
+  /**
+   * Compose the search row's styling onto your own element. Then the
+   * row's entire content is yours — including any shortcut hint, which
+   * `shortcut` cannot add to a cloned child.
+   */
+  asChild?: false;
+  /**
+   * The keyboard hint for the chord that opens the same palette — usually
+   * `<><MetaKey /><Kbd>K</Kbd></>`.
+   *
+   * Rendered pinned to the end of the row and **revealed only on hover or
+   * keyboard focus**, so the row reads as a quiet navigation item at rest
+   * and teaches the chord at the moment a user reaches for it. It is
+   * `aria-hidden` and dropped outright in the collapsed rail: the chord is
+   * announced by the `aria-keyshortcuts` that `Command.SearchTrigger`
+   * adds, so repeating it here would announce it twice.
+   *
+   * Passed rather than built in, so the sidebar does not have to know
+   * which chord your palette binds.
+   */
+  shortcut?: ReactNode;
+});
+/**
+ * The search row — the row that opens a search or command palette.
+ *
+ * Put it at the top of `Sidebar.Body`, above the first `Sidebar.Group`: it
+ * needs no height change, and it lands in the same `px-3` gutter as the
+ * navigation rows, so it shares their column in both panel states.
+ *
+ * `Sidebar.Header`, under the switcher, also works — the header's own `gap-2`
+ * sets the spacing — at the cost of a taller header. That height is a fixed one
+ * row so it can align with an `AppLayout.Header` toolbar, so a stack of two
+ * needs `--sidebar-header-height` raised on a **common ancestor of both rows**
+ * (`<AppLayout.Root className="[--sidebar-header-height:6rem]">`). Setting it on
+ * `Sidebar.Nav` only looks right: custom properties inherit downward, so
+ * `AppLayout.Header` would keep the `4.5rem` default and the two rows would stop
+ * being center-aligned.
+ *
+ * It is deliberately a navigation row and not a text field. The row is the same
+ * chrome as a `Sidebar.ItemButton` — same height, padding, radius, hover, and
+ * the same 28px chip in the collapsed icon rail — because a search entry point
+ * in a sidebar is one of the rows, not a form control wedged among them. The
+ * `shortcut` hint appears on hover or focus and is otherwise invisible, which
+ * keeps the resting panel quiet.
+ *
+ * A styled button only — it is not wired to any state. Compose it with
+ * [`Command.SearchTrigger`](https://mantle.ngrok.com/components/navigation/command#commandsearchtrigger),
+ * which supplies the dialog wiring, `aria-keyshortcuts`, and the behavior that
+ * makes typing or pasting into the row open the palette with that text already
+ * in the query. Wrap the pair in `Sidebar.Tooltip` so the row keeps a visible
+ * label once the panel collapses.
+ *
+ * Like every row, the rail clips everything after the leading icon rather than
+ * removing it, so the button keeps its accessible name as a chip.
+ *
+ * **Data attributes:**
+ *
+ * | Data Attribute | Value | Description |
+ * | --- | --- | --- |
+ * | `data-state` | `"open"` \| `"closed"` | **Read, not stamped** — supplied by the composing `Command.SearchTrigger` / `Dialog.Trigger`. The row stays highlighted while its palette is open. |
+ *
+ * @see https://mantle.ngrok.com/components/navigation/sidebar#sidebarsearchtrigger
+ *
+ * @example
+ * ```tsx
+ * <Sidebar.Root>
+ *   <Sidebar.Nav aria-label="Main">
+ *     <Sidebar.Header>
+ *       <Sidebar.SwitcherTrigger>
+ *         <GlobeIcon />
+ *         <span className="text-strong min-w-0 flex-1 truncate text-base">Universal Gateway</span>
+ *       </Sidebar.SwitcherTrigger>
+ *     </Sidebar.Header>
+ *     <Sidebar.Body>
+ *       <Command.DialogRoot>
+ *         <Sidebar.Tooltip label="Search">
+ *           <Command.SearchTrigger>
+ *             <Sidebar.SearchTrigger
+ *               shortcut={
+ *                 <>
+ *                   <MetaKey />
+ *                   <Kbd>K</Kbd>
+ *                 </>
+ *               }
+ *             >
+ *               <MagnifyingGlassIcon />
+ *               <span className="min-w-0 flex-1 truncate">Search</span>
+ *             </Sidebar.SearchTrigger>
+ *           </Command.SearchTrigger>
+ *         </Sidebar.Tooltip>
+ *         <Command.DialogContent>
+ *           <Command.Input placeholder="Search endpoints, agents, and settings..." />
+ *           <Command.List>
+ *             <Command.Empty>No results found.</Command.Empty>
+ *           </Command.List>
+ *         </Command.DialogContent>
+ *       </Command.DialogRoot>
+ *       <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.Nav>
+ *   <Sidebar.Trigger />
+ * </Sidebar.Root>
+ * ```
+ */
+declare const SearchTrigger: ({ asChild, children, className, "data-slot": dataSlot, shortcut, type, ...props }: SidebarSearchTriggerProps) => import("react").JSX.Element;
 type SidebarSwitcherTriggerProps = ComponentProps<"button"> & WithAsChild & WithDataSlot;
 /**
  * The styled row for the sidebar's switchers: the app/product switcher in
@@ -1038,9 +1205,10 @@ type SidebarSwitcherTriggerProps = ComponentProps<"button"> & WithAsChild & With
  *       <DropdownMenu.Root>
  *         <DropdownMenu.Trigger asChild>
  *           <Sidebar.SwitcherTrigger>
- *             <Sidebar.AccountAvatar accountId="acc_123" accountName="Acme Corp" />
+ *             <Avatar.Root appearance="square" colorSeed="acc_123">
+ *               <Avatar.Fallback name="Acme Corp" />
+ *             </Avatar.Root>
  *             <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>
@@ -1073,6 +1241,18 @@ type SidebarTooltipProps = Omit<ComponentProps<typeof Tooltip.Content>, "childre
    * visible one, so this is what a sighted pointer user reads.
    */
   label: ReactNode;
+  /**
+   * The keyboard chord that reaches the same row, rendered after the label —
+   * usually `<><MetaKey /><Kbd>K</Kbd></>`. The rail hides the row's own
+   * shortcut hint along with its label, so the tooltip is where a pointer user
+   * can still learn the chord. The chips are `aria-hidden`: a tooltip is wired
+   * as its row's `aria-describedby`, and the chord is already announced by the
+   * row's `aria-keyshortcuts`.
+   *
+   * Passed rather than built in, so the sidebar does not have to know which
+   * chord the row's palette or action binds.
+   */
+  shortcut?: 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.
@@ -1090,12 +1270,20 @@ type SidebarTooltipProps = Omit<ComponentProps<typeof Tooltip.Content>, "childre
  * 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.
+ * the mobile sheet shows full labels, so the collapsed desktop rail is the only
+ * state that shows a label at all.
+ *
+ * It opens the way any tooltip does — the pointer entering the row, or focus
+ * reaching it — and the rail state vetoes it: the expanded panel and the mobile
+ * sheet keep the row at `data-state="closed"` with no `aria-describedby`, and
+ * toggling the rail dismisses whatever was showing, so collapsing the panel
+ * cannot pop a label under a pointer that has already moved on.
  *
  * **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.
+ * at your app root. This part deliberately does not mount its own, so the
+ * app-wide tooltip delay stays app-wide rather than being overridden per row.
+ * The one provider setting it does override is hoverable content: a rail label
+ * holds nothing to hover into, so the pointer leaving the row closes it.
  *
  * It composes with a menu trigger: nest `DropdownMenu.Root >
  * Sidebar.Tooltip > DropdownMenu.Trigger asChild > Sidebar.ItemButton` for a
@@ -1152,7 +1340,7 @@ type SidebarTooltipProps = Omit<ComponentProps<typeof Tooltip.Content>, "childre
  * </TooltipProvider>
  * ```
  */
-declare const SidebarTooltip: ({ children, "data-slot": dataSlot, label, side, ...props }: SidebarTooltipProps) => import("react").JSX.Element;
+declare const SidebarTooltip: ({ children, "data-slot": dataSlot, label, shortcut, side, ...props }: SidebarTooltipProps) => import("react").JSX.Element;
 type SidebarSeparatorProps = ComponentProps<typeof Separator> & WithDataSlot;
 /**
  * An inset hairline between sidebar regions. Composes the mantle `Separator`,
@@ -1200,9 +1388,10 @@ type SidebarSeparatorProps = ComponentProps<typeof Separator> & WithDataSlot;
  *       <DropdownMenu.Root>
  *         <DropdownMenu.Trigger asChild>
  *           <Sidebar.SwitcherTrigger>
- *             <Sidebar.AccountAvatar accountId="acc_123" accountName="Acme Corp" />
+ *             <Avatar.Root appearance="square" colorSeed="acc_123">
+ *               <Avatar.Fallback name="Acme Corp" />
+ *             </Avatar.Root>
  *             <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>
@@ -1214,183 +1403,6 @@ type SidebarSeparatorProps = ComponentProps<typeof Separator> & WithDataSlot;
  * ```
  */
 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,
@@ -1414,6 +1426,7 @@ declare const UserAvatar: ({ alt, asChild, children, className, "data-slot": dat
  * │   ├── Sidebar.Header
  * │   │   └── Sidebar.SwitcherTrigger
  * │   ├── Sidebar.Body
+ * │   │   ├── Sidebar.SearchTrigger
  * │   │   └── Sidebar.Group
  * │   │       ├── Sidebar.GroupLabel
  * │   │       └── Sidebar.List
@@ -1424,8 +1437,6 @@ declare const UserAvatar: ({ alt, asChild, children, className, "data-slot": dat
  * │       ├── Sidebar.ItemButton
  * │       ├── Sidebar.Separator
  * │       └── Sidebar.SwitcherTrigger
- * │           ├── Sidebar.AccountAvatar
- * │           └── Sidebar.UserAvatar
  * └── Sidebar.Trigger
  * ```
  *
@@ -1465,9 +1476,10 @@ declare const UserAvatar: ({ alt, asChild, children, className, "data-slot": dat
  *       <DropdownMenu.Root>
  *         <DropdownMenu.Trigger asChild>
  *           <Sidebar.SwitcherTrigger>
- *             <Sidebar.AccountAvatar accountId="acc_123" accountName="Acme Corp" />
+ *             <Avatar.Root appearance="square" colorSeed="acc_123">
+ *               <Avatar.Fallback name="Acme Corp" />
+ *             </Avatar.Root>
  *             <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>
@@ -1480,7 +1492,7 @@ declare const UserAvatar: ({ alt, asChild, children, className, "data-slot": dat
  */
 declare const Sidebar: {
   /**
-   * The state owner for a sidebar. Renders no DOM — provides expanded /
+   * The state owner for a sidebar. Renders no DOM — carries expanded /
    * mobile-sheet state to every part below it so the trigger can live in the
    * app shell without coupling it to the sidebar.
    *
@@ -1522,9 +1534,10 @@ declare const Sidebar: {
    *       <DropdownMenu.Root>
    *         <DropdownMenu.Trigger asChild>
    *           <Sidebar.SwitcherTrigger>
-   *             <Sidebar.AccountAvatar accountId="acc_123" accountName="Acme Corp" />
+   *             <Avatar.Root appearance="square" colorSeed="acc_123">
+   *               <Avatar.Fallback name="Acme Corp" />
+   *             </Avatar.Root>
    *             <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>
@@ -1547,7 +1560,7 @@ declare const Sidebar: {
    * | 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-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. |
    *
@@ -1589,9 +1602,10 @@ declare const Sidebar: {
    *       <DropdownMenu.Root>
    *         <DropdownMenu.Trigger asChild>
    *           <Sidebar.SwitcherTrigger>
-   *             <Sidebar.AccountAvatar accountId="acc_123" accountName="Acme Corp" />
+   *             <Avatar.Root appearance="square" colorSeed="acc_123">
+   *               <Avatar.Fallback name="Acme Corp" />
+   *             </Avatar.Root>
    *             <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>
@@ -1654,9 +1668,10 @@ declare const Sidebar: {
    *       <DropdownMenu.Root>
    *         <DropdownMenu.Trigger asChild>
    *           <Sidebar.SwitcherTrigger>
-   *             <Sidebar.AccountAvatar accountId="acc_123" accountName="Acme Corp" />
+   *             <Avatar.Root appearance="square" colorSeed="acc_123">
+   *               <Avatar.Fallback name="Acme Corp" />
+   *             </Avatar.Root>
    *             <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>
@@ -1711,9 +1726,10 @@ declare const Sidebar: {
    *       <DropdownMenu.Root>
    *         <DropdownMenu.Trigger asChild>
    *           <Sidebar.SwitcherTrigger>
-   *             <Sidebar.AccountAvatar accountId="acc_123" accountName="Acme Corp" />
+   *             <Avatar.Root appearance="square" colorSeed="acc_123">
+   *               <Avatar.Fallback name="Acme Corp" />
+   *             </Avatar.Root>
    *             <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>
@@ -1766,9 +1782,10 @@ declare const Sidebar: {
    *       <DropdownMenu.Root>
    *         <DropdownMenu.Trigger asChild>
    *           <Sidebar.SwitcherTrigger>
-   *             <Sidebar.AccountAvatar accountId="acc_123" accountName="Acme Corp" />
+   *             <Avatar.Root appearance="square" colorSeed="acc_123">
+   *               <Avatar.Fallback name="Acme Corp" />
+   *             </Avatar.Root>
    *             <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>
@@ -1822,9 +1839,10 @@ declare const Sidebar: {
    *       <DropdownMenu.Root>
    *         <DropdownMenu.Trigger asChild>
    *           <Sidebar.SwitcherTrigger>
-   *             <Sidebar.AccountAvatar accountId="acc_123" accountName="Acme Corp" />
+   *             <Avatar.Root appearance="square" colorSeed="acc_123">
+   *               <Avatar.Fallback name="Acme Corp" />
+   *             </Avatar.Root>
    *             <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>
@@ -1878,9 +1896,10 @@ declare const Sidebar: {
    *       <DropdownMenu.Root>
    *         <DropdownMenu.Trigger asChild>
    *           <Sidebar.SwitcherTrigger>
-   *             <Sidebar.AccountAvatar accountId="acc_123" accountName="Acme Corp" />
+   *             <Avatar.Root appearance="square" colorSeed="acc_123">
+   *               <Avatar.Fallback name="Acme Corp" />
+   *             </Avatar.Root>
    *             <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>
@@ -1934,9 +1953,10 @@ declare const Sidebar: {
    *       <DropdownMenu.Root>
    *         <DropdownMenu.Trigger asChild>
    *           <Sidebar.SwitcherTrigger>
-   *             <Sidebar.AccountAvatar accountId="acc_123" accountName="Acme Corp" />
+   *             <Avatar.Root appearance="square" colorSeed="acc_123">
+   *               <Avatar.Fallback name="Acme Corp" />
+   *             </Avatar.Root>
    *             <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>
@@ -1989,9 +2009,10 @@ declare const Sidebar: {
    *       <DropdownMenu.Root>
    *         <DropdownMenu.Trigger asChild>
    *           <Sidebar.SwitcherTrigger>
-   *             <Sidebar.AccountAvatar accountId="acc_123" accountName="Acme Corp" />
+   *             <Avatar.Root appearance="square" colorSeed="acc_123">
+   *               <Avatar.Fallback name="Acme Corp" />
+   *             </Avatar.Root>
    *             <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>
@@ -2044,9 +2065,10 @@ declare const Sidebar: {
    *       <DropdownMenu.Root>
    *         <DropdownMenu.Trigger asChild>
    *           <Sidebar.SwitcherTrigger>
-   *             <Sidebar.AccountAvatar accountId="acc_123" accountName="Acme Corp" />
+   *             <Avatar.Root appearance="square" colorSeed="acc_123">
+   *               <Avatar.Fallback name="Acme Corp" />
+   *             </Avatar.Root>
    *             <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>
@@ -2108,9 +2130,10 @@ declare const Sidebar: {
    *       <DropdownMenu.Root>
    *         <DropdownMenu.Trigger asChild>
    *           <Sidebar.SwitcherTrigger>
-   *             <Sidebar.AccountAvatar accountId="acc_123" accountName="Acme Corp" />
+   *             <Avatar.Root appearance="square" colorSeed="acc_123">
+   *               <Avatar.Fallback name="Acme Corp" />
+   *             </Avatar.Root>
    *             <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>
@@ -2122,6 +2145,74 @@ declare const Sidebar: {
    * ```
    */
   readonly ItemButton: typeof ItemButton;
+  /**
+   * The search row for `Sidebar.Body`: an item-shaped row whose `shortcut` hint
+   * appears on hover or focus, and the same chip as any other row in the
+   * collapsed icon rail. Not state-wired — compose with
+   * `Command.SearchTrigger`.
+   *
+   * **Data attributes:**
+   *
+   * | Data Attribute | Value | Description |
+   * | --- | --- | --- |
+   * | `data-state` | `"open"` \| `"closed"` | **Read, not stamped** — supplied by the composing `Command.SearchTrigger` / `Dialog.Trigger`. Style the row while its palette is open with `data-state-open:`. |
+   *
+   * @see https://mantle.ngrok.com/components/navigation/sidebar#sidebarsearchtrigger
+   *
+   * @example
+   * ```tsx
+   * <Sidebar.Root>
+   *   <Sidebar.Nav aria-label="Main">
+   *     <Sidebar.Header>
+   *       <Sidebar.SwitcherTrigger>
+   *         <GlobeIcon />
+   *         <span className="text-strong min-w-0 flex-1 truncate text-base">Universal Gateway</span>
+   *       </Sidebar.SwitcherTrigger>
+   *     </Sidebar.Header>
+   *     <Sidebar.Body>
+   *       <Command.DialogRoot>
+   *         <Sidebar.Tooltip label="Search">
+   *           <Command.SearchTrigger>
+   *             <Sidebar.SearchTrigger
+   *               shortcut={
+   *                 <>
+   *                   <MetaKey />
+   *                   <Kbd>K</Kbd>
+   *                 </>
+   *               }
+   *             >
+   *               <MagnifyingGlassIcon />
+   *               <span className="min-w-0 flex-1 truncate">Search</span>
+   *             </Sidebar.SearchTrigger>
+   *           </Command.SearchTrigger>
+   *         </Sidebar.Tooltip>
+   *         <Command.DialogContent>
+   *           <Command.Input placeholder="Search endpoints, agents, and settings..." />
+   *           <Command.List>
+   *             <Command.Empty>No results found.</Command.Empty>
+   *           </Command.List>
+   *         </Command.DialogContent>
+   *       </Command.DialogRoot>
+   *       <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.Nav>
+   *   <Sidebar.Trigger />
+   * </Sidebar.Root>
+   * ```
+   */
+  readonly SearchTrigger: typeof SearchTrigger;
   /**
    * The styled switcher row for the header/footer. Not state-wired — compose
    * with `DropdownMenu.Trigger asChild` or `Dialog.Trigger asChild`.
@@ -2170,9 +2261,10 @@ declare const Sidebar: {
    *       <DropdownMenu.Root>
    *         <DropdownMenu.Trigger asChild>
    *           <Sidebar.SwitcherTrigger>
-   *             <Sidebar.AccountAvatar accountId="acc_123" accountName="Acme Corp" />
+   *             <Avatar.Root appearance="square" colorSeed="acc_123">
+   *               <Avatar.Fallback name="Acme Corp" />
+   *             </Avatar.Root>
    *             <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>
@@ -2232,9 +2324,10 @@ declare const Sidebar: {
    *           <Sidebar.Tooltip label="Acme Corp">
    *             <DropdownMenu.Trigger asChild>
    *               <Sidebar.SwitcherTrigger>
-   *                 <Sidebar.AccountAvatar accountId="acc_123" accountName="Acme Corp" />
+   *                 <Avatar.Root appearance="square" colorSeed="acc_123">
+   *                   <Avatar.Fallback name="Acme Corp" />
+   *                 </Avatar.Root>
    *                 <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>
@@ -2290,9 +2383,10 @@ declare const Sidebar: {
    *       <DropdownMenu.Root>
    *         <DropdownMenu.Trigger asChild>
    *           <Sidebar.SwitcherTrigger>
-   *             <Sidebar.AccountAvatar accountId="acc_123" accountName="Acme Corp" />
+   *             <Avatar.Root appearance="square" colorSeed="acc_123">
+   *               <Avatar.Fallback name="Acme Corp" />
+   *             </Avatar.Root>
    *             <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>
@@ -2304,119 +2398,6 @@ declare const Sidebar: {
    * ```
    */
   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