@ngrok/mantle 0.83.5 → 0.83.7

package/dist/agent.json

@@ -1,6 +1,6 @@
 {
 	"name": "@ngrok/mantle",
-	"version": "0.83.5",
+	"version": "0.83.7",
 	"origin": "https://mantle.ngrok.com",
 	"endpoints": {
 		"docs": "https://mantle.ngrok.com/",

package/dist/breadcrumb.d.ts

@@ -79,7 +79,8 @@ declare const Root: ({ asChild, children, className, "data-slot": dataSlot, ref,
 declare const List: ({ asChild, children, className, "data-slot": dataSlot, ref, ...props }: ComponentProps<"ol"> & WithAsChild & WithDataSlot) => import("react").JSX.Element;
 /**
  * A single crumb. Renders an `<li>` (`role="listitem"`) that lays out its
- * content — a `Breadcrumb.Link` or `Breadcrumb.Page` — inline.
+ * content — a `Breadcrumb.Link`, a `Breadcrumb.Label`, or a `Breadcrumb.Page`
+ * — inline.
  *
  * The crumb never shrinks (`shrink-0`). A squeezed crumb would break its own
  * label across two lines, so a trail too wide for its container scrolls in
@@ -142,6 +143,32 @@ declare const Item: ({ asChild, children, className, "data-slot": dataSlot, ref,
  * ```
  */
 declare const Link: ({ asChild, children, className, "data-slot": dataSlot, ref, ...props }: ComponentProps<"a"> & WithAsChild & WithDataSlot) => import("react").JSX.Element;
+/**
+ * A crumb that is not a link — a level with no page of its own, such as a
+ * section whose index URL only redirects (`Settings` in `Settings > General`).
+ * Renders a `<span>` with no `aria-current` and no link semantics, so the
+ * trail shows the level without offering it as a destination. Use
+ * `Breadcrumb.Link` for an ancestor a user can visit and `Breadcrumb.Page`
+ * for the current page.
+ *
+ * @see https://mantle.ngrok.com/components/navigation/breadcrumb#breadcrumblabel
+ *
+ * @example
+ * ```tsx
+ * <Breadcrumb.Root>
+ * 	<Breadcrumb.List>
+ * 		<Breadcrumb.Item>
+ * 			<Breadcrumb.Label>Settings</Breadcrumb.Label>
+ * 		</Breadcrumb.Item>
+ * 		<Breadcrumb.Separator />
+ * 		<Breadcrumb.Item>
+ * 			<Breadcrumb.Page>General</Breadcrumb.Page>
+ * 		</Breadcrumb.Item>
+ * 	</Breadcrumb.List>
+ * </Breadcrumb.Root>
+ * ```
+ */
+declare const Label: ({ asChild, children, className, "data-slot": dataSlot, ref, ...props }: ComponentProps<"span"> & WithAsChild & WithDataSlot) => import("react").JSX.Element;
 /**
  * The current page — the last crumb in the trail. Renders a `<span>` (not a
  * link; the user is already here) with `aria-current="page"`. The ARIA is the
@@ -217,6 +244,43 @@ type BreadcrumbSeparatorProps = Omit<ComponentProps<"li">, "children"> & ({
  * ```
  */
 declare const Separator: ({ asChild, children, className, "data-slot": dataSlot, ref, ...props }: BreadcrumbSeparatorProps & WithDataSlot) => import("react").JSX.Element;
+/**
+ * The props for `Breadcrumb.Skeleton`. `children` is omitted on purpose: the
+ * part owns its placeholder content.
+ */
+type BreadcrumbSkeletonProps = Omit<ComponentProps<"li">, "children"> & {
+  /**
+   * The screen-reader status announcement while the crumb loads. Set it for
+   * localization.
+   *
+   * @default "Loading breadcrumbs…"
+   */
+  label?: string;
+};
+/**
+ * A placeholder crumb for a label that is still loading. Renders one `<li>`
+ * as a crumb-sized pulsing bar carrying a screen-reader-only `role="status"`
+ * announcement. The bar is `w-24` by default — pass a `w-*` utility for your
+ * best-guess width, so the row's shape holds when the real crumb replaces it.
+ * One skeleton usually stands in for a whole pending segment; compose several
+ * with `Breadcrumb.Separator` when the segment's shape matters.
+ *
+ * @see https://mantle.ngrok.com/components/navigation/breadcrumb#breadcrumbskeleton
+ *
+ * @example
+ * ```tsx
+ * <Breadcrumb.Root>
+ * 	<Breadcrumb.List>
+ * 		<Breadcrumb.Item>
+ * 			<Breadcrumb.Link href="/apps">Apps</Breadcrumb.Link>
+ * 		</Breadcrumb.Item>
+ * 		<Breadcrumb.Separator />
+ * 		<Breadcrumb.Skeleton className="w-40" />
+ * 	</Breadcrumb.List>
+ * </Breadcrumb.Root>
+ * ```
+ */
+declare const BreadcrumbSkeleton: ({ className, "data-slot": dataSlot, label, ref, ...props }: BreadcrumbSkeletonProps & WithDataSlot) => import("react").JSX.Element;
 /**
  * Compound component for WAI-ARIA breadcrumb navigation — the path from a
  * root to the current page as an ordered list of links inside a labeled
@@ -234,8 +298,12 @@ declare const Separator: ({ asChild, children, className, "data-slot": dataSlot,
  *     ├── Breadcrumb.Item
  *     │   └── Breadcrumb.Link
  *     ├── Breadcrumb.Separator
- *     └── Breadcrumb.Item
- *         └── Breadcrumb.Page
+ *     ├── Breadcrumb.Item
+ *     │   └── Breadcrumb.Label
+ *     ├── Breadcrumb.Separator
+ *     ├── Breadcrumb.Item
+ *     │   └── Breadcrumb.Page
+ *     └── Breadcrumb.Skeleton
  * ```
  *
  * @example
@@ -315,9 +383,9 @@ declare const Breadcrumb: {
    */
   readonly List: typeof List;
   /**
-   * A single crumb. Renders an `<li>` containing a `Breadcrumb.Link` or
-   * `Breadcrumb.Page`. The crumb never shrinks, so a wide trail scrolls
-   * instead of breaking a label across two lines.
+   * A single crumb. Renders an `<li>` containing a `Breadcrumb.Link`, a
+   * `Breadcrumb.Label`, or a `Breadcrumb.Page`. The crumb never shrinks, so a
+   * wide trail scrolls instead of breaking a label across two lines.
    *
    * @see https://mantle.ngrok.com/components/navigation/breadcrumb#breadcrumbitem
    *
@@ -367,6 +435,29 @@ declare const Breadcrumb: {
    * ```
    */
   readonly Link: typeof Link;
+  /**
+   * A crumb that is not a link — a level with no page of its own, such as a
+   * section whose index URL only redirects. Renders a `<span>` with no
+   * `aria-current` and no link semantics.
+   *
+   * @see https://mantle.ngrok.com/components/navigation/breadcrumb#breadcrumblabel
+   *
+   * @example
+   * ```tsx
+   * <Breadcrumb.Root>
+   * 	<Breadcrumb.List>
+   * 		<Breadcrumb.Item>
+   * 			<Breadcrumb.Label>Settings</Breadcrumb.Label>
+   * 		</Breadcrumb.Item>
+   * 		<Breadcrumb.Separator />
+   * 		<Breadcrumb.Item>
+   * 			<Breadcrumb.Page>General</Breadcrumb.Page>
+   * 		</Breadcrumb.Item>
+   * 	</Breadcrumb.List>
+   * </Breadcrumb.Root>
+   * ```
+   */
+  readonly Label: typeof Label;
   /**
    * The current page — the last crumb. Renders a `<span>` (not a link) with
    * `aria-current="page"`; the ARIA is the part's whole contract and is not
@@ -422,6 +513,241 @@ declare const Breadcrumb: {
    * ```
    */
   readonly Separator: typeof Separator;
+  /**
+   * A placeholder crumb for a label that is still loading: one `<li>` as a
+   * crumb-sized pulsing bar, plus a screen-reader-only `role="status"`
+   * announcement. `w-24` by default — pass a `w-*` utility for your
+   * best-guess width, so the row's shape holds when the real crumb arrives.
+   *
+   * @see https://mantle.ngrok.com/components/navigation/breadcrumb#breadcrumbskeleton
+   *
+   * @example
+   * ```tsx
+   * <Breadcrumb.Root>
+   * 	<Breadcrumb.List>
+   * 		<Breadcrumb.Item>
+   * 			<Breadcrumb.Link href="/apps">Apps</Breadcrumb.Link>
+   * 		</Breadcrumb.Item>
+   * 		<Breadcrumb.Separator />
+   * 		<Breadcrumb.Skeleton className="w-40" />
+   * 	</Breadcrumb.List>
+   * </Breadcrumb.Root>
+   * ```
+   */
+  readonly Skeleton: typeof BreadcrumbSkeleton;
+};
+//#endregion
+//#region src/components/breadcrumb/route-breadcrumb.d.ts
+/**
+ * One crumb a route contributes — a discriminated union on `kind`. Create
+ * these with {@link routeBreadcrumb}; the factory stamps the discriminant, so
+ * no call site hand-writes one.
+ *
+ * @see https://mantle.ngrok.com/components/navigation/breadcrumb#routebreadcrumb
+ *
+ * @example
+ * ```ts
+ * const link: Crumb = routeBreadcrumb("Endpoints", { to: "/endpoints" });
+ * const prefix: Crumb = routeBreadcrumb.label("Settings");
+ * ```
+ */
+type Crumb = {
+  kind: "link";
+  /** What the crumb says. */
+  label: ReactNode;
+  /**
+   * Where it links. When omitted, resolves to the contributing route's own
+   * `pathname`, which is right whenever the crumb *is* that route.
+   */
+  to?: string;
+} | {
+  /**
+   * A prefix crumb: it names a level with no page of its own — a section
+   * whose index URL only redirects — so the renderer draws it as a
+   * non-link `Breadcrumb.Label`.
+   */
+  kind: "label";
+  /** What the crumb says. */
+  label: ReactNode;
+} | {
+  /**
+   * A content crumb: a complete rendered trail segment, for labels and
+   * links that only exist in fetched data. The node renders its own
+   * `Breadcrumb.Item`s and `Breadcrumb.Separator`s, and falls back to
+   * `Breadcrumb.Skeleton` while its data loads.
+   */
+  kind: "content";
+  content: ReactNode;
+};
+/**
+ * Creates the crumb a route contributes: a link crumb, whose omitted `to`
+ * resolves to the contributing route's own `pathname`. Two members cover the
+ * crumbs that are not plain links — `routeBreadcrumb.label` for a section
+ * prefix that never links, and `routeBreadcrumb.content` for a trail segment
+ * that renders itself from fetched data.
+ *
+ * There is no page variant on purpose. Page-ness is positional, not declared:
+ * the deepest crumb renders as `Breadcrumb.Page`, because the same route's
+ * crumb is the current page at its own URL and a link when the trail goes
+ * deeper.
+ *
+ * @see https://mantle.ngrok.com/components/navigation/breadcrumb#routebreadcrumb
+ *
+ * @example
+ * ```tsx
+ * routeBreadcrumb("Endpoints");                       // links to the contributing route's pathname
+ * routeBreadcrumb("Endpoints", { to: "/endpoints" }); // links to an explicit path
+ * routeBreadcrumb.label("Settings");                  // never links — renders as Breadcrumb.Label
+ * routeBreadcrumb.content(<AppTrail appId="app_123" />); // renders its own items from query data
+ * ```
+ */
+declare const routeBreadcrumb: ((label: ReactNode, options?: {
+  to?: string;
+}) => Crumb) & {
+  /**
+   * Creates a prefix crumb — one that never links. The renderer draws it as
+   * a non-link `Breadcrumb.Label`.
+   *
+   * @example
+   * ```ts
+   * const handle = { breadcrumb: () => [routeBreadcrumb.label("Settings")] };
+   * ```
+   */
+  label: (label: ReactNode) => Crumb;
+  /**
+   * Creates a content crumb — a complete rendered trail segment, for labels
+   * and links that only exist in fetched data. The node decides link vs
+   * current page itself, because the trail builder cannot see inside it.
+   *
+   * @example
+   * ```tsx
+   * const handle = { breadcrumb: () => [routeBreadcrumb.content(<AppTrail appId="app_123" />)] };
+   * ```
+   */
+  content: (content: ReactNode) => Crumb;
 };
+/**
+ * What a route names itself in the trail: a static string, or a function of
+ * the router's match returning every crumb this route contributes.
+ *
+ * The function form covers the label derived from the match (its params or
+ * loader data), the route that names an ancestor it is not nested under, the
+ * section prefix that is not a destination, and the query-backed segment that
+ * renders its own content.
+ *
+ * A string or crumb label must resolve **synchronously**: it runs during
+ * render, on the server too, so the trail is correct in the initial HTML. A
+ * name that only exists in fetched data goes in a content crumb instead.
+ *
+ * @see https://mantle.ngrok.com/components/navigation/breadcrumb#routebreadcrumb
+ *
+ * @example
+ * ```ts
+ * // TMatch is your router's match type, e.g. react-router's UIMatch.
+ * const staticLabel: RouteBreadcrumb<UIMatch> = "Endpoints";
+ * const fromParams: RouteBreadcrumb<UIMatch> = (match) => [routeBreadcrumb(match.params.endpointId)];
+ * const sectionPrefix: RouteBreadcrumb<UIMatch> = () => [routeBreadcrumb.label("Settings")];
+ * ```
+ */
+type RouteBreadcrumb<TMatch = unknown> = string | ((match: TMatch) => ReadonlyArray<Crumb>);
+/**
+ * The `handle` shape a route exports to appear in the trail. Omitting `handle`
+ * entirely is the opt-out — no filter list to maintain.
+ *
+ * @see https://mantle.ngrok.com/components/navigation/breadcrumb#routebreadcrumb
+ *
+ * @example
+ * ```ts
+ * // app/routes/endpoints.tsx
+ * export const handle = { breadcrumb: "Endpoints" } satisfies BreadcrumbHandle<UIMatch>;
+ * ```
+ */
+type BreadcrumbHandle<TMatch = unknown> = {
+  breadcrumb: RouteBreadcrumb<TMatch>;
+};
+/**
+ * The fields {@link buildCrumbs} reads off a route match. Router-agnostic on
+ * purpose: react-router's `UIMatch` satisfies it structurally, and so does any
+ * object carrying these three fields.
+ *
+ * @see https://mantle.ngrok.com/components/navigation/breadcrumb#buildcrumbs
+ *
+ * @example
+ * ```ts
+ * const match: BreadcrumbMatch = { id: "endpoints", pathname: "/endpoints", handle: { breadcrumb: "Endpoints" } };
+ * ```
+ */
+type BreadcrumbMatch = {
+  /** The route's stable id in the matched chain. */
+  id: string;
+  /** The URL portion this route matched. */
+  pathname: string;
+  /** The route module's `handle` export — `unknown` until narrowed. */
+  handle: unknown;
+};
+/**
+ * A crumb with its link and React key resolved — what a trail renderer
+ * consumes. Link crumbs carry a definite `to`; label crumbs carry none, which
+ * is what makes an unlinked link crumb unrepresentable.
+ *
+ * @see https://mantle.ngrok.com/components/navigation/breadcrumb#buildcrumbs
+ *
+ * @example
+ * ```ts
+ * const resolved: ResolvedCrumb = { kind: "link", key: "endpoints:0", label: "Endpoints", to: "/endpoints" };
+ * ```
+ */
+type ResolvedCrumb = {
+  kind: "link";
+  /** Stable React key. One route may contribute several crumbs, so the match id alone is not unique. */
+  key: string;
+  label: ReactNode;
+  to: string;
+} | {
+  kind: "label";
+  /** Stable React key. One route may contribute several crumbs, so the match id alone is not unique. */
+  key: string;
+  label: ReactNode;
+} | {
+  kind: "content";
+  /** Stable React key. One route may contribute several crumbs, so the match id alone is not unique. */
+  key: string;
+  content: ReactNode;
+};
+/**
+ * Whether a route match named itself in the trail. A real type guard, not a
+ * cast: routers type `handle` as `unknown`, and the narrowing is what lets
+ * {@link buildCrumbs} read `match.handle` without an assertion.
+ *
+ * @see https://mantle.ngrok.com/components/navigation/breadcrumb#hasbreadcrumb
+ *
+ * @example
+ * ```ts
+ * useMatches().filter(hasBreadcrumb);
+ * ```
+ */
+declare function hasBreadcrumb<TMatch extends BreadcrumbMatch>(match: TMatch): match is TMatch & {
+  handle: BreadcrumbHandle<TMatch>;
+};
+/**
+ * Derives the breadcrumb trail from a matched route chain. Matches without a
+ * `breadcrumb` handle contribute nothing, so pathless layouts and gate routes
+ * stay out of the trail.
+ *
+ * Pure: no hooks, no browser APIs, no clock. It runs identically on the
+ * server and the client, which is the whole reason the trail needs no state
+ * and no effects — and it means you can assert the trail as a plain value.
+ * Router-agnostic: it reads only {@link BreadcrumbMatch}'s three fields, which
+ * react-router's `UIMatch` satisfies structurally.
+ *
+ * @see https://mantle.ngrok.com/components/navigation/breadcrumb#buildcrumbs
+ *
+ * @example
+ * ```ts
+ * buildCrumbs(useMatches());
+ * // [{ kind: "link", key: "endpoints:0", label: "Endpoints", to: "/endpoints" }, …]
+ * ```
+ */
+declare function buildCrumbs<TMatch extends BreadcrumbMatch>(matches: ReadonlyArray<TMatch>): ReadonlyArray<ResolvedCrumb>;
 //#endregion
-export { Breadcrumb };
+export { Breadcrumb, type BreadcrumbHandle, type BreadcrumbMatch, type Crumb, type ResolvedCrumb, type RouteBreadcrumb, buildCrumbs, hasBreadcrumb, routeBreadcrumb };

package/dist/breadcrumb.js

@@ -1 +1 @@
-import{t as e}from"./use-isomorphic-layout-effect-DdTRtMY-.js";import{n as t}from"./compose-refs-BdBMM9ga.js";import{t as n}from"./cx-IiQEAKf5.js";import{t as r}from"./icon-lZ48P8Nn.js";import{t as i}from"./data-slot-EM6s2WEU.js";import{t as a}from"./slot-DpNWVci8.js";import{cloneElement as o,isValidElement as s,useEffect as c,useRef as l}from"react";import{jsx as u}from"react/jsx-runtime";import{CaretRightIcon as d}from"@phosphor-icons/react/CaretRight";const f=({asChild:e,children:t,className:r,"data-slot":o,ref:s,...c})=>u(e?a:`nav`,{ref:s,"data-slot":i(o,`breadcrumb`),"aria-label":`Breadcrumb`,className:n(`min-w-0`,r),...c,children:t});function p(e,t){let n=e.scrollWidth-e.clientWidth;return n===t||e.contains(document.activeElement)?t:(e.scrollLeft=n,n)}const m={Root:f,List:({asChild:r,children:o,className:s,"data-slot":d,ref:f,...m})=>{let h=r?a:`ol`,g=l(null),_=t(g,f),v=l(void 0);return e(()=>{let e=g.current;e!=null&&(v.current=p(e,v.current))}),c(()=>{let e=g.current;if(e==null)return;let t=new ResizeObserver(()=>{v.current=p(e,v.current)});return t.observe(e),()=>{t.disconnect()}},[]),u(h,{ref:_,"data-slot":i(d,`breadcrumb-list`),className:n(`text-muted flex items-center gap-1.5 text-sm`,`scroll-fade-x min-w-0 overflow-x-auto overscroll-x-none`,`-m-1 p-1`,`scroll-px-10`,s),...m,children:o})},Item:({asChild:e,children:t,className:r,"data-slot":o,ref:s,...c})=>u(e?a:`li`,{ref:s,"data-slot":i(o,`breadcrumb-item`),className:n(`inline-flex shrink-0 items-center gap-1.5`,r),...c,children:t}),Link:({asChild:e,children:t,className:r,"data-slot":o,ref:s,...c})=>u(e?a:`a`,{ref:s,"data-slot":i(o,`breadcrumb-link`),className:n(`hover:text-strong transition-colors`,r),...c,children:t}),Page:({asChild:e,children:t,className:r,"data-slot":c,ref:l,...d})=>{let f=e?a:`span`,p=e&&s(t)?o(t,{"aria-current":`page`}):t;return u(f,{ref:l,"data-slot":i(c,`breadcrumb-page`),className:n(`text-muted`,r),...d,"aria-current":`page`,children:p})},Separator:({asChild:e,children:t,className:c,"data-slot":l,ref:f,...p})=>{let m=e?a:`li`,h=e&&s(t)?o(t,{role:`presentation`,"aria-hidden":`true`}):t??u(r,{svg:u(d,{}),className:`size-3.5`});return u(m,{ref:f,"data-slot":i(l,`breadcrumb-separator`),className:n(`shrink-0`,c),...p,role:`presentation`,"aria-hidden":`true`,children:h})}};export{m as Breadcrumb};
+import{t as e}from"./use-isomorphic-layout-effect-DdTRtMY-.js";import{n as t}from"./compose-refs-BdBMM9ga.js";import{t as n}from"./cx-IiQEAKf5.js";import{t as r}from"./icon-lZ48P8Nn.js";import{t as i}from"./data-slot-EM6s2WEU.js";import{t as a}from"./slot-DpNWVci8.js";import{t as o}from"./skeleton-BhcJMpem.js";import{cloneElement as s,isValidElement as c,useEffect as l,useRef as u}from"react";import{jsx as d}from"react/jsx-runtime";import{CaretRightIcon as f}from"@phosphor-icons/react/CaretRight";const p=({asChild:e,children:t,className:r,"data-slot":o,ref:s,...c})=>d(e?a:`nav`,{ref:s,"data-slot":i(o,`breadcrumb`),"aria-label":`Breadcrumb`,className:n(`min-w-0`,r),...c,children:t});function m(e,t){let n=e.scrollWidth-e.clientWidth;return n===t||e.contains(document.activeElement)?t:(e.scrollLeft=n,n)}const h={Root:p,List:({asChild:r,children:o,className:s,"data-slot":c,ref:f,...p})=>{let h=r?a:`ol`,g=u(null),_=t(g,f),v=u(void 0);return e(()=>{let e=g.current;e!=null&&(v.current=m(e,v.current))}),l(()=>{let e=g.current;if(e==null)return;let t=new ResizeObserver(()=>{v.current=m(e,v.current)});return t.observe(e),()=>{t.disconnect()}},[]),d(h,{ref:_,"data-slot":i(c,`breadcrumb-list`),className:n(`text-muted flex items-center gap-1.5 text-sm`,`scroll-fade-x min-w-0 overflow-x-auto overscroll-x-none`,`-m-1 p-1`,`scroll-px-10`,s),...p,children:o})},Item:({asChild:e,children:t,className:r,"data-slot":o,ref:s,...c})=>d(e?a:`li`,{ref:s,"data-slot":i(o,`breadcrumb-item`),className:n(`inline-flex shrink-0 items-center gap-1.5`,r),...c,children:t}),Link:({asChild:e,children:t,className:r,"data-slot":o,ref:s,...c})=>d(e?a:`a`,{ref:s,"data-slot":i(o,`breadcrumb-link`),className:n(`hover:text-strong transition-colors`,r),...c,children:t}),Label:({asChild:e,children:t,className:r,"data-slot":o,ref:s,...c})=>d(e?a:`span`,{ref:s,"data-slot":i(o,`breadcrumb-label`),className:n(`text-muted`,r),...c,children:t}),Page:({asChild:e,children:t,className:r,"data-slot":o,ref:l,...u})=>{let f=e?a:`span`,p=e&&c(t)?s(t,{"aria-current":`page`}):t;return d(f,{ref:l,"data-slot":i(o,`breadcrumb-page`),className:n(`text-muted`,r),...u,"aria-current":`page`,children:p})},Separator:({asChild:e,children:t,className:o,"data-slot":l,ref:u,...p})=>{let m=e?a:`li`,h=e&&c(t)?s(t,{role:`presentation`,"aria-hidden":`true`}):t??d(r,{svg:d(f,{}),className:`size-3.5`});return d(m,{ref:u,"data-slot":i(l,`breadcrumb-separator`),className:n(`shrink-0`,o),...p,role:`presentation`,"aria-hidden":`true`,children:h})},Skeleton:({className:e,"data-slot":t,label:r=`Loading breadcrumbs…`,ref:a,...s})=>d(o,{asChild:!0,children:d(`li`,{ref:a,"data-slot":i(t,`breadcrumb-skeleton`),className:n(`w-24 shrink-0`,e),...s,children:d(`span`,{role:`status`,className:`sr-only`,children:r})})})},g=Object.assign((e,t={})=>({kind:`link`,label:e,...t}),{label:e=>({kind:`label`,label:e}),content:e=>({kind:`content`,content:e})});function _(e){let{handle:t}=e;if(typeof t!=`object`||!t||!(`breadcrumb`in t))return!1;let{breadcrumb:n}=t;return typeof n==`string`||typeof n==`function`}function v(e){return e.filter(_).flatMap(e=>{let{breadcrumb:t}=e.handle;return(typeof t==`string`?[g(t)]:t(e)).map((t,n)=>{let r=`${e.id}:${n}`;return t.kind===`content`?{kind:`content`,key:r,content:t.content}:t.kind===`label`?{kind:`label`,key:r,label:t.label}:{kind:`link`,key:r,label:t.label,to:t.to??e.pathname}})})}export{h as Breadcrumb,v as buildCrumbs,_ as hasBreadcrumb,g as routeBreadcrumb};

package/dist/llms.txt

@@ -1,4 +1,4 @@
-# @ngrok/mantle (0.83.5)
+# @ngrok/mantle (0.83.7)
 
 > Offline discovery hint shipped inside the @ngrok/mantle npm package. Authoritative metadata lives at https://mantle.ngrok.com/for-ai-agents.
 

package/dist/mantle.css

@@ -717,7 +717,7 @@ MARK: COMPONENT GEOMETRY
    `--sidebar-width-mobile` with it, or the floor outgrows the sheet's row),
    or set `--sidebar-row-width` on the outside surface itself. */
 :root {
-	--sidebar-row-width: calc(var(--sidebar-width, 16rem) - 1rem);
+	--sidebar-row-width: calc(var(--sidebar-width, 13rem) - 1rem);
 }
 
 /**

package/dist/sidebar.d.ts

@@ -250,12 +250,12 @@ type SidebarNavProps = ComponentProps<"div"> & WithDataSlot;
  *
  * | CSS Variable | Default | Description |
  * | --- | --- | --- |
- * | `--sidebar-width` | `16rem` | Expanded desktop panel width (256px). |
+ * | `--sidebar-width` | `13rem` | Expanded desktop panel width (208px). |
  * | `--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` | `12rem` | Derived, not set: one row's width in the expanded panel (192px), for sizing surfaces that render *outside* it. See below and `Sidebar.SwitcherTrigger`. |
  *
- * `--sidebar-row-width` is `calc(var(--sidebar-width,16rem) - 1rem)`, declared
+ * `--sidebar-row-width` is `calc(var(--sidebar-width,13rem) - 1rem)`, declared
  * at `:root` by `mantle.css` — the panel width minus the row gutter this
  * component's regions apply.
  *
@@ -1168,7 +1168,7 @@ type SidebarSwitcherTriggerProps = ComponentProps<"button"> & WithAsChild & With
  * 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` minus `1rem`; 263px vs 192px at the defaults) — so widen
  * `--sidebar-width-mobile` whenever you widen `--sidebar-width`, or the floor
  * overhangs the sheet.
  *

package/dist/sidebar.js

@@ -1 +1 @@
-import{t as e}from"./cx-IiQEAKf5.js";import{t}from"./data-slot-EM6s2WEU.js";import{t as n}from"./slot-DpNWVci8.js";import{t as r}from"./button-CNg69RsV.js";import{t as i}from"./use-is-hydrated-DDCqXmju.js";import{n as a}from"./separator-D0D6VyyM.js";import{n as o,t as s}from"./use-is-apple-platform-Cxwrb86L.js";import{t as c}from"./use-callback-ref-IYti9y7x.js";import{n as l}from"./cookie-ca4g5CKp.js";import{t as u}from"./sheet-CfFXVAzz.js";import{r as d}from"./use-breakpoint-Dqu12Szq.js";import{t as f}from"./tooltip-Dnu35cjU.js";import{createContext as p,useCallback as m,useContext as h,useEffect as g,useId as _,useMemo as v,useRef as y,useState as b}from"react";import x from"tiny-invariant";import{Fragment as S,jsx as C,jsxs as w}from"react/jsx-runtime";import{SidebarSimpleIcon as T}from"@phosphor-icons/react/SidebarSimple";const E={sm:`hidden sm:block`,md:`hidden md:block`,lg:`hidden lg:block`},D=p(null);function O(){let e=h(D);return x(e,`useSidebar must be used within Sidebar.Root.`),e}function k(e){let t=h(D);return x(t,`Sidebar.${e} must be rendered inside Sidebar.Root.`),t}const A=[];function j(e){return e instanceof HTMLElement?e.isContentEditable||e.tagName===`INPUT`||e.tagName===`TEXTAREA`||e.tagName===`SELECT`:!1}function M(){let e=Symbol(`sidebar-keyboard-shortcut`);return A.push(e),{isOwner:()=>A[0]===e,release:()=>{let t=A.indexOf(e);t!==-1&&A.splice(t,1)}}}const N=({children:e,defaultOpen:t=!0,keyboardShortcut:n=!0,mobileBreakpoint:r=`lg`,onOpenChange:i,onOpenMobileChange:a,open:s,openMobile:l})=>{let u=d(r),f=_(),p=s!=null,[h,x]=b(t),S=p?s:h,w=m(e=>{p||x(e),i?.(e)},[p,i]),T=l!=null,[E,O]=b(!1),k=T?l:E,A=m(e=>{T||O(e),a?.(e)},[T,a]),N=y(u);g(()=>{let e=N.current&&!u;N.current=u,e&&k&&A(!1)},[u,k,A]);let P=m(()=>{u?A(!k):w(!S)},[u,S,k,w,A]),F=c(P);g(()=>{if(!n)return;let e=M(),t=o(),r=n=>{if(!e.isOwner()||j(n.target))return;let r=t?n.metaKey:n.ctrlKey,i=t?n.ctrlKey:n.metaKey;n.key.toLowerCase()===`b`&&r&&!i&&!n.altKey&&!n.shiftKey&&(n.preventDefault(),F())};return window.addEventListener(`keydown`,r),()=>{window.removeEventListener(`keydown`,r),e.release()}},[n,F]);let I=v(()=>({isMobile:u,keyboardShortcut:n,mobileBreakpoint:r,navId:f,open:S,openMobile:k,setOpen:w,setOpenMobile:A,toggle:P}),[u,n,r,f,S,k,w,A,P]);return C(D.Provider,{value:I,children:e})},P=({"aria-label":n,"aria-labelledby":r,children:a,className:o,"data-slot":s,...c})=>{let{isMobile:l,mobileBreakpoint:d,navId:f,open:p,openMobile:m,setOpenMobile:h}=k(`Nav`),g=i(),_=n??(r==null?`Main`:void 0);return l?C(u.Root,{open:m,onOpenChange:h,children:w(u.Content,{side:`left`,preferredWidth:`sm:max-w-(--sidebar-width-mobile,18rem)`,"data-slot":t(s,`sidebar-nav`),"data-mobile":``,...r==null?null:{"aria-labelledby":r},className:e(`bg-base w-(--sidebar-width-mobile,18rem) max-w-full p-0`,o),...c,children:[C(u.Title,{className:`sr-only`,children:_??`Sidebar`}),C(`nav`,{id:f,"aria-label":_,"aria-labelledby":r,className:`flex h-full w-full min-w-0 flex-col text-sm`,children:a})]})}):C(`div`,{"data-slot":t(s,`sidebar-nav`),"data-state":p?`expanded`:`collapsed`,"data-hydrated":g?``:void 0,className:e(`group/sidebar-nav bg-base relative h-full w-(--sidebar-width,16rem) shrink-0 overflow-hidden`,`data-[state=collapsed]:w-(--sidebar-width-icon,3.25rem)`,!g&&E[d],g&&[`transition-[width] duration-200 ease-linear motion-reduce:transition-none`],o),...c,children:C(`nav`,{id:f,"aria-label":_,"aria-labelledby":r,className:`absolute inset-y-0 left-0 flex w-full min-w-0 flex-col text-sm`,children:a})})},F=C(T,{}),I=({label:e,shortcut:t})=>t==null?e:w(`span`,{className:`flex items-center gap-1.5`,children:[e,C(`span`,{"aria-hidden":!0,className:`inline-flex shrink-0 items-center gap-0.5 [&_kbd]:h-4 [&_kbd]:min-w-4 [&_kbd]:bg-neutral-500/25 [&_kbd]:px-0.5 [&_kbd]:text-xs`,children:t})]}),L=({appearance:e=`ghost`,"data-slot":n,icon:i=F,intent:a=`neutral`,label:o=`Toggle Sidebar`,onClick:c,shortcut:l,...u})=>{let{isMobile:d,keyboardShortcut:p,navId:m,open:h,openMobile:g,toggle:_}=k(`Trigger`),v=s(),y=d?g:h,b=!d||g,x=p?l:void 0,S=v?`Meta+B`:`Control+B`;return w(f.Root,{children:[C(f.Trigger,{asChild:!0,children:C(r,{appearance:e,"aria-controls":b?m:void 0,"aria-expanded":y,"aria-keyshortcuts":p?S:void 0,"data-slot":t(n,`sidebar-trigger`),"data-state":y?`expanded`:`collapsed`,icon:i,intent:a,label:o,onClick:e=>{c?.(e),e.defaultPrevented||_()},...u})}),C(f.Content,{"data-slot":`sidebar-trigger-tooltip`,children:C(I,{label:o,shortcut:x})})]})},R=({asChild:r,children:i,className:a,"data-slot":o,...s})=>C(r?n:`div`,{"data-slot":t(o,`sidebar-header`),className:e(`grid grid-cols-1 grid-rows-(--sidebar-header-height,4.5rem) shrink-0 items-center px-3`,`group-data-[state=expanded]/sidebar-nav:pr-1`,a),...s,children:i}),z=({asChild:r,children:i,className:a,"data-slot":o,...s})=>C(r?n:`div`,{"data-slot":t(o,`sidebar-body`),className:e(`scrollbar scrollbar-gutter-stable scroll-fade-y flex-1 scroll-py-6 space-y-2 overflow-y-auto overflow-x-hidden px-3 pt-1.5 pb-4`,`group-data-[state=expanded]/sidebar-nav:pr-1`,`group-data-[state=collapsed]/sidebar-nav:scrollbar-none`,`group-data-[state=collapsed]/sidebar-nav:scrollbar-gutter-auto`,`group-data-[state=collapsed]/sidebar-nav:[&::-webkit-scrollbar]:hidden`,a),...s,children:i}),B=({asChild:r,children:i,className:a,"data-slot":o,...s})=>C(r?n:`div`,{"data-slot":t(o,`sidebar-footer`),className:e(`shrink-0 px-3 pt-3 pb-3.5`,`group-data-[state=expanded]/sidebar-nav:pr-1`,a),...s,children:i}),V=p(null),H=({asChild:r,children:i,className:a,"data-slot":o,...s})=>{let[c,l]=b(null),u=v(()=>({mountedLabelId:c,setMountedLabelId:l}),[c]),d=r?n:`div`;return C(V.Provider,{value:u,children:C(d,{"data-slot":t(o,`sidebar-group`),className:e(`pt-0.5`,a),...s,children:i})})},U=({asChild:r,children:i,className:a,"data-slot":o,id:s,...c})=>{let l=h(V),u=_(),d=s??(l==null?void 0:u),f=l?.setMountedLabelId;return g(()=>{if(f!=null&&d!=null)return f(d),()=>{f(null)}},[f,d]),C(r?n:`div`,{id:d,"data-slot":t(o,`sidebar-group-label`),className:e(`text-muted flex min-w-0 items-center gap-2 truncate px-2 py-1 text-xs font-medium`,`group-data-[state=collapsed]/sidebar-nav:opacity-0`,`group-data-[state=collapsed]/sidebar-nav:pointer-events-none`,`group-data-hydrated/sidebar-nav:transition-opacity group-data-hydrated/sidebar-nav:duration-200 group-data-hydrated/sidebar-nav:ease-linear group-data-hydrated/sidebar-nav:motion-reduce:transition-none`,a),...c,children:i})},W=({"aria-labelledby":r,asChild:i,children:a,className:o,"data-slot":s,...c})=>{let l=h(V);return C(i?n:`ul`,{"aria-labelledby":r??l?.mountedLabelId??void 0,"data-slot":t(s,`sidebar-list`),className:e(`mb-2 space-y-px`,o),...c,children:a})},G=({asChild:r,children:i,className:a,"data-slot":o,...s})=>C(r?n:`li`,{"data-slot":t(o,`sidebar-item`),className:e(`list-none`,a),...s,children:i}),K=[`ring-focus-accent flex w-full min-w-0 items-center gap-2 truncate rounded-md px-2 py-1 text-left font-normal transition-none focus:outline-hidden focus-visible:ring-4`,`text-body hover:text-strong hover:bg-neutral-500/10`,`data-state-open:bg-neutral-500/15 data-state-open:text-strong`,`group-data-[state=collapsed]/sidebar-nav:ml-1`,`group-data-[state=collapsed]/sidebar-nav:w-7`,`group-data-[state=collapsed]/sidebar-nav:p-1`],q={Root:N,Nav:P,Trigger:L,Header:R,Body:z,Footer:B,Group:H,GroupLabel:U,List:W,Item:G,ItemButton:({asChild:r,children:i,className:a,current:o,"data-slot":s,type:c,...l})=>C(r?n:`button`,{"data-slot":t(s,`sidebar-item-button`),"data-current":o?``:void 0,"aria-current":o?`page`:void 0,type:r?c:c??`button`,className:e(K,`data-current:bg-neutral-500/15 data-current:text-strong`,`aria-[current=page]:bg-neutral-500/15 aria-[current=page]:text-strong`,`[&>svg]:text-muted hover:[&>svg]:text-strong data-current:[&>svg]:text-strong aria-[current=page]:[&>svg]:text-strong [&>svg:first-child]:size-5 [&>svg]:shrink-0`,a),...l,children:i}),SearchTrigger:({asChild:r,children:i,className:a,"data-slot":o,shortcut:s,type:c,...l})=>{let u=r?n:`button`,d=s==null?i:w(S,{children:[i,C(`span`,{"aria-hidden":!0,className:e(`pointer-events-none -mr-1 ml-auto inline-flex shrink-0 items-center gap-0.5 opacity-0 select-none`,`group-hover:opacity-100 group-focus-visible:opacity-100`,`group-data-[state=collapsed]/sidebar-nav:hidden`,`[&_kbd]:text-body [&_kbd]:h-5 [&_kbd]:min-w-5 [&_kbd]:bg-neutral-500/20 [&_kbd]:px-1 [&_kbd]:text-xs [&_kbd]:font-normal`),children:s})]});return C(u,{"data-slot":t(o,`sidebar-search-trigger`),type:r?c:c??`button`,className:e(`group`,K,`[&>svg:first-child]:text-muted hover:[&>svg:first-child]:text-strong [&>svg:first-child]:size-5 [&>svg]:shrink-0`,a),...l,children:d})},SwitcherTrigger:({asChild:r,children:i,className:a,"data-slot":o,type:s,...c})=>C(r?n:`button`,{"data-slot":t(o,`sidebar-switcher-trigger`),type:r?s:s??`button`,className:e(`text-body hover:text-strong hover:bg-neutral-500/10 flex w-full min-w-0 items-center gap-2 rounded-[0.625rem] py-1 pr-1.5 pl-1 text-left font-medium transition-none`,`data-state-open:bg-neutral-500/15 data-state-open:text-strong`,`ring-focus-accent focus:outline-hidden focus-visible:ring-4`,`*:first:size-7`,`group-data-[state=collapsed]/sidebar-nav:w-9`,`group-data-[state=collapsed]/sidebar-nav:p-1`,`group-data-[state=collapsed]/sidebar-nav:[&>:not(:first-child)]:sr-only`,a),...c,children:i}),Tooltip:({children:e,"data-slot":n,label:r,shortcut:i,side:a=`right`,...o})=>{let{isMobile:s,open:c}=k(`Tooltip`),l=!s&&!c,[u,d]=b(!1),[p,m]=b(l);return p!==l&&(m(l),d(!1)),w(f.Root,{disableHoverableContent:!0,onOpenChange:e=>{d(e&&l)},open:l&&u,children:[C(f.Trigger,{asChild:!0,children:e}),C(f.Content,{"data-slot":t(n,`sidebar-tooltip`),side:a,...o,children:C(I,{label:r,shortcut:i})})]})},Separator:({className:n,"data-slot":r,...i})=>C(a,{"data-slot":t(r,`sidebar-separator`),className:e(`my-3`,`group-data-[state=collapsed]/sidebar-nav:w-9`,n),...i})},J=`mantle-sidebar-state`,Y={collapsed:`collapsed`,expanded:`expanded`};function X(e){let t=l(e,J);if(t===Y.expanded)return!0;if(t===Y.collapsed)return!1}function Z(e,t={}){let{domain:n,maxAge:r=31536e3,path:i=`/`,sameSite:a=`Lax`,secure:o=!1}=t,s=e?Y.expanded:Y.collapsed,c=[`${J}=${s}`,`Max-Age=${r}`,`Path=${i}`];return n!=null&&c.push(`Domain=${n}`),c.push(`SameSite=${a}`),o&&c.push(`Secure`),c.join(`; `)}export{J as SIDEBAR_STATE_COOKIE_NAME,q as Sidebar,X as extractSidebarStateCookie,Z as serializeSidebarStateCookie,O as useSidebar};
+import{t as e}from"./cx-IiQEAKf5.js";import{t}from"./data-slot-EM6s2WEU.js";import{t as n}from"./slot-DpNWVci8.js";import{t as r}from"./button-CNg69RsV.js";import{t as i}from"./use-is-hydrated-DDCqXmju.js";import{n as a}from"./separator-D0D6VyyM.js";import{n as o,t as s}from"./use-is-apple-platform-Cxwrb86L.js";import{t as c}from"./use-callback-ref-IYti9y7x.js";import{n as l}from"./cookie-ca4g5CKp.js";import{t as u}from"./sheet-CfFXVAzz.js";import{r as d}from"./use-breakpoint-Dqu12Szq.js";import{t as f}from"./tooltip-Dnu35cjU.js";import{createContext as p,useCallback as m,useContext as h,useEffect as g,useId as _,useMemo as v,useRef as y,useState as b}from"react";import x from"tiny-invariant";import{Fragment as S,jsx as C,jsxs as w}from"react/jsx-runtime";import{SidebarSimpleIcon as T}from"@phosphor-icons/react/SidebarSimple";const E={sm:`hidden sm:block`,md:`hidden md:block`,lg:`hidden lg:block`},D=p(null);function O(){let e=h(D);return x(e,`useSidebar must be used within Sidebar.Root.`),e}function k(e){let t=h(D);return x(t,`Sidebar.${e} must be rendered inside Sidebar.Root.`),t}const A=[];function j(e){return e instanceof HTMLElement?e.isContentEditable||e.tagName===`INPUT`||e.tagName===`TEXTAREA`||e.tagName===`SELECT`:!1}function M(){let e=Symbol(`sidebar-keyboard-shortcut`);return A.push(e),{isOwner:()=>A[0]===e,release:()=>{let t=A.indexOf(e);t!==-1&&A.splice(t,1)}}}const N=({children:e,defaultOpen:t=!0,keyboardShortcut:n=!0,mobileBreakpoint:r=`lg`,onOpenChange:i,onOpenMobileChange:a,open:s,openMobile:l})=>{let u=d(r),f=_(),p=s!=null,[h,x]=b(t),S=p?s:h,w=m(e=>{p||x(e),i?.(e)},[p,i]),T=l!=null,[E,O]=b(!1),k=T?l:E,A=m(e=>{T||O(e),a?.(e)},[T,a]),N=y(u);g(()=>{let e=N.current&&!u;N.current=u,e&&k&&A(!1)},[u,k,A]);let P=m(()=>{u?A(!k):w(!S)},[u,S,k,w,A]),F=c(P);g(()=>{if(!n)return;let e=M(),t=o(),r=n=>{if(!e.isOwner()||j(n.target))return;let r=t?n.metaKey:n.ctrlKey,i=t?n.ctrlKey:n.metaKey;n.key.toLowerCase()===`b`&&r&&!i&&!n.altKey&&!n.shiftKey&&(n.preventDefault(),F())};return window.addEventListener(`keydown`,r),()=>{window.removeEventListener(`keydown`,r),e.release()}},[n,F]);let I=v(()=>({isMobile:u,keyboardShortcut:n,mobileBreakpoint:r,navId:f,open:S,openMobile:k,setOpen:w,setOpenMobile:A,toggle:P}),[u,n,r,f,S,k,w,A,P]);return C(D.Provider,{value:I,children:e})},P=({"aria-label":n,"aria-labelledby":r,children:a,className:o,"data-slot":s,...c})=>{let{isMobile:l,mobileBreakpoint:d,navId:f,open:p,openMobile:m,setOpenMobile:h}=k(`Nav`),g=i(),_=n??(r==null?`Main`:void 0);return l?C(u.Root,{open:m,onOpenChange:h,children:w(u.Content,{side:`left`,preferredWidth:`sm:max-w-(--sidebar-width-mobile,18rem)`,"data-slot":t(s,`sidebar-nav`),"data-mobile":``,...r==null?null:{"aria-labelledby":r},className:e(`bg-base w-(--sidebar-width-mobile,18rem) max-w-full p-0`,o),...c,children:[C(u.Title,{className:`sr-only`,children:_??`Sidebar`}),C(`nav`,{id:f,"aria-label":_,"aria-labelledby":r,className:`flex h-full w-full min-w-0 flex-col text-sm`,children:a})]})}):C(`div`,{"data-slot":t(s,`sidebar-nav`),"data-state":p?`expanded`:`collapsed`,"data-hydrated":g?``:void 0,className:e(`group/sidebar-nav bg-base relative h-full w-(--sidebar-width,13rem) shrink-0 overflow-hidden`,`data-[state=collapsed]:w-(--sidebar-width-icon,3.25rem)`,!g&&E[d],g&&[`transition-[width] duration-200 ease-linear motion-reduce:transition-none`],o),...c,children:C(`nav`,{id:f,"aria-label":_,"aria-labelledby":r,className:`absolute inset-y-0 left-0 flex w-full min-w-0 flex-col text-sm`,children:a})})},F=C(T,{}),I=({label:e,shortcut:t})=>t==null?e:w(`span`,{className:`flex items-center gap-1.5`,children:[e,C(`span`,{"aria-hidden":!0,className:`inline-flex shrink-0 items-center gap-0.5 [&_kbd]:h-4 [&_kbd]:min-w-4 [&_kbd]:bg-neutral-500/25 [&_kbd]:px-0.5 [&_kbd]:text-xs`,children:t})]}),L=({appearance:e=`ghost`,"data-slot":n,icon:i=F,intent:a=`neutral`,label:o=`Toggle Sidebar`,onClick:c,shortcut:l,...u})=>{let{isMobile:d,keyboardShortcut:p,navId:m,open:h,openMobile:g,toggle:_}=k(`Trigger`),v=s(),y=d?g:h,b=!d||g,x=p?l:void 0,S=v?`Meta+B`:`Control+B`;return w(f.Root,{children:[C(f.Trigger,{asChild:!0,children:C(r,{appearance:e,"aria-controls":b?m:void 0,"aria-expanded":y,"aria-keyshortcuts":p?S:void 0,"data-slot":t(n,`sidebar-trigger`),"data-state":y?`expanded`:`collapsed`,icon:i,intent:a,label:o,onClick:e=>{c?.(e),e.defaultPrevented||_()},...u})}),C(f.Content,{"data-slot":`sidebar-trigger-tooltip`,children:C(I,{label:o,shortcut:x})})]})},R=({asChild:r,children:i,className:a,"data-slot":o,...s})=>C(r?n:`div`,{"data-slot":t(o,`sidebar-header`),className:e(`grid grid-cols-1 grid-rows-(--sidebar-header-height,4.5rem) shrink-0 items-center px-3`,`group-data-[state=expanded]/sidebar-nav:pr-1`,a),...s,children:i}),z=({asChild:r,children:i,className:a,"data-slot":o,...s})=>C(r?n:`div`,{"data-slot":t(o,`sidebar-body`),className:e(`scrollbar scrollbar-gutter-stable scroll-fade-y flex-1 scroll-py-6 space-y-2 overflow-y-auto overflow-x-hidden px-3 pt-1.5 pb-4`,`group-data-[state=expanded]/sidebar-nav:pr-1`,`group-data-[state=collapsed]/sidebar-nav:scrollbar-none`,`group-data-[state=collapsed]/sidebar-nav:scrollbar-gutter-auto`,`group-data-[state=collapsed]/sidebar-nav:[&::-webkit-scrollbar]:hidden`,a),...s,children:i}),B=({asChild:r,children:i,className:a,"data-slot":o,...s})=>C(r?n:`div`,{"data-slot":t(o,`sidebar-footer`),className:e(`shrink-0 px-3 pt-3 pb-3.5`,`group-data-[state=expanded]/sidebar-nav:pr-1`,a),...s,children:i}),V=p(null),H=({asChild:r,children:i,className:a,"data-slot":o,...s})=>{let[c,l]=b(null),u=v(()=>({mountedLabelId:c,setMountedLabelId:l}),[c]),d=r?n:`div`;return C(V.Provider,{value:u,children:C(d,{"data-slot":t(o,`sidebar-group`),className:e(`pt-0.5`,a),...s,children:i})})},U=({asChild:r,children:i,className:a,"data-slot":o,id:s,...c})=>{let l=h(V),u=_(),d=s??(l==null?void 0:u),f=l?.setMountedLabelId;return g(()=>{if(f!=null&&d!=null)return f(d),()=>{f(null)}},[f,d]),C(r?n:`div`,{id:d,"data-slot":t(o,`sidebar-group-label`),className:e(`text-muted flex min-w-0 items-center gap-2 truncate px-2 py-1 text-xs font-medium`,`group-data-[state=collapsed]/sidebar-nav:opacity-0`,`group-data-[state=collapsed]/sidebar-nav:pointer-events-none`,`group-data-hydrated/sidebar-nav:transition-opacity group-data-hydrated/sidebar-nav:duration-200 group-data-hydrated/sidebar-nav:ease-linear group-data-hydrated/sidebar-nav:motion-reduce:transition-none`,a),...c,children:i})},W=({"aria-labelledby":r,asChild:i,children:a,className:o,"data-slot":s,...c})=>{let l=h(V);return C(i?n:`ul`,{"aria-labelledby":r??l?.mountedLabelId??void 0,"data-slot":t(s,`sidebar-list`),className:e(`mb-2 space-y-px`,o),...c,children:a})},G=({asChild:r,children:i,className:a,"data-slot":o,...s})=>C(r?n:`li`,{"data-slot":t(o,`sidebar-item`),className:e(`list-none`,a),...s,children:i}),K=[`ring-focus-accent flex w-full min-w-0 items-center gap-2 truncate rounded-md px-2 py-1 text-left font-normal transition-none focus:outline-hidden focus-visible:ring-4`,`text-body hover:text-strong hover:bg-neutral-500/10`,`data-state-open:bg-neutral-500/15 data-state-open:text-strong`,`group-data-[state=collapsed]/sidebar-nav:ml-1`,`group-data-[state=collapsed]/sidebar-nav:w-7`,`group-data-[state=collapsed]/sidebar-nav:p-1`],q={Root:N,Nav:P,Trigger:L,Header:R,Body:z,Footer:B,Group:H,GroupLabel:U,List:W,Item:G,ItemButton:({asChild:r,children:i,className:a,current:o,"data-slot":s,type:c,...l})=>C(r?n:`button`,{"data-slot":t(s,`sidebar-item-button`),"data-current":o?``:void 0,"aria-current":o?`page`:void 0,type:r?c:c??`button`,className:e(K,`data-current:bg-neutral-500/15 data-current:text-strong`,`aria-[current=page]:bg-neutral-500/15 aria-[current=page]:text-strong`,`[&>svg]:text-muted hover:[&>svg]:text-strong data-current:[&>svg]:text-strong aria-[current=page]:[&>svg]:text-strong [&>svg:first-child]:size-5 [&>svg]:shrink-0`,a),...l,children:i}),SearchTrigger:({asChild:r,children:i,className:a,"data-slot":o,shortcut:s,type:c,...l})=>{let u=r?n:`button`,d=s==null?i:w(S,{children:[i,C(`span`,{"aria-hidden":!0,className:e(`pointer-events-none -mr-1 ml-auto inline-flex shrink-0 items-center gap-0.5 opacity-0 select-none`,`group-hover:opacity-100 group-focus-visible:opacity-100`,`group-data-[state=collapsed]/sidebar-nav:hidden`,`[&_kbd]:text-body [&_kbd]:h-5 [&_kbd]:min-w-5 [&_kbd]:bg-neutral-500/20 [&_kbd]:px-1 [&_kbd]:text-xs [&_kbd]:font-normal`),children:s})]});return C(u,{"data-slot":t(o,`sidebar-search-trigger`),type:r?c:c??`button`,className:e(`group`,K,`[&>svg:first-child]:text-muted hover:[&>svg:first-child]:text-strong [&>svg:first-child]:size-5 [&>svg]:shrink-0`,a),...l,children:d})},SwitcherTrigger:({asChild:r,children:i,className:a,"data-slot":o,type:s,...c})=>C(r?n:`button`,{"data-slot":t(o,`sidebar-switcher-trigger`),type:r?s:s??`button`,className:e(`text-body hover:text-strong hover:bg-neutral-500/10 flex w-full min-w-0 items-center gap-2 rounded-[0.625rem] py-1 pr-1.5 pl-1 text-left font-medium transition-none`,`data-state-open:bg-neutral-500/15 data-state-open:text-strong`,`ring-focus-accent focus:outline-hidden focus-visible:ring-4`,`*:first:size-7`,`group-data-[state=collapsed]/sidebar-nav:w-9`,`group-data-[state=collapsed]/sidebar-nav:p-1`,`group-data-[state=collapsed]/sidebar-nav:[&>:not(:first-child)]:sr-only`,a),...c,children:i}),Tooltip:({children:e,"data-slot":n,label:r,shortcut:i,side:a=`right`,...o})=>{let{isMobile:s,open:c}=k(`Tooltip`),l=!s&&!c,[u,d]=b(!1),[p,m]=b(l);return p!==l&&(m(l),d(!1)),w(f.Root,{disableHoverableContent:!0,onOpenChange:e=>{d(e&&l)},open:l&&u,children:[C(f.Trigger,{asChild:!0,children:e}),C(f.Content,{"data-slot":t(n,`sidebar-tooltip`),side:a,...o,children:C(I,{label:r,shortcut:i})})]})},Separator:({className:n,"data-slot":r,...i})=>C(a,{"data-slot":t(r,`sidebar-separator`),className:e(`my-3`,`group-data-[state=collapsed]/sidebar-nav:w-9`,n),...i})},J=`mantle-sidebar-state`,Y={collapsed:`collapsed`,expanded:`expanded`};function X(e){let t=l(e,J);if(t===Y.expanded)return!0;if(t===Y.collapsed)return!1}function Z(e,t={}){let{domain:n,maxAge:r=31536e3,path:i=`/`,sameSite:a=`Lax`,secure:o=!1}=t,s=e?Y.expanded:Y.collapsed,c=[`${J}=${s}`,`Max-Age=${r}`,`Path=${i}`];return n!=null&&c.push(`Domain=${n}`),c.push(`SameSite=${a}`),o&&c.push(`Secure`),c.join(`; `)}export{J as SIDEBAR_STATE_COOKIE_NAME,q as Sidebar,X as extractSidebarStateCookie,Z as serializeSidebarStateCookie,O as useSidebar};

package/dist/theme-switcher.js

@@ -1 +1 @@
-import{t as e}from"./icon-lZ48P8Nn.js";import{t}from"./data-slot-EM6s2WEU.js";import{t as n}from"./button-CNg69RsV.js";import{t as r}from"./browser-only-CmEEzfU3.js";import{t as i}from"./dropdown-menu-BRH0Wd_z.js";import{d as a,h as o,l as s,p as c}from"./theme-CVfq037P.js";import{n as l,t as u}from"./icons-DEVx1oP9.js";import{t as d}from"./skeleton-BhcJMpem.js";import{jsx as f,jsxs as p}from"react/jsx-runtime";const m={system:`System Preference`,light:`Light Mode`,dark:`Dark Mode`,"light-high-contrast":`Light High Contrast`,"dark-high-contrast":`Dark High Contrast`},h=({className:t,style:n})=>{let[r,u]=s();return f(i.RadioGroup,{"data-slot":`theme-dropdown-menu-radio-group`,className:t,style:n,value:r,onValueChange:e=>{c(e)&&u(e)},children:o.map(t=>p(i.RadioItem,{value:a(t),children:[f(e,{svg:f(l,{theme:t})}),m[t]]},t))})},g={Root:e=>f(i.Root,{...e}),Trigger:({appearance:e=`ghost`,"data-slot":a,disabled:o,label:s=`Change Theme`,ref:c,...l})=>f(i.Trigger,{asChild:!0,disabled:o,children:f(n,{ref:c,appearance:e,disabled:o,"data-slot":t(a,`theme-switcher-trigger`),intent:`neutral`,icon:f(r,{fallback:f(d,{className:`rounded-full size-5`}),children:()=>f(u,{className:`size-5`})}),label:s,...l})}),Content:({children:e,"data-slot":n,...r})=>f(i.Content,{"data-slot":t(n,`theme-switcher-content`),...r,children:e??f(h,{})})};export{h as ThemeDropdownMenuRadioGroup,g as ThemeSwitcher};
+import{t as e}from"./icon-lZ48P8Nn.js";import{t}from"./data-slot-EM6s2WEU.js";import{t as n}from"./button-CNg69RsV.js";import{t as r}from"./browser-only-CmEEzfU3.js";import{t as i}from"./skeleton-BhcJMpem.js";import{t as a}from"./dropdown-menu-BRH0Wd_z.js";import{d as o,h as s,l as c,p as l}from"./theme-CVfq037P.js";import{n as u,t as d}from"./icons-DEVx1oP9.js";import{jsx as f,jsxs as p}from"react/jsx-runtime";const m={system:`System Preference`,light:`Light Mode`,dark:`Dark Mode`,"light-high-contrast":`Light High Contrast`,"dark-high-contrast":`Dark High Contrast`},h=({className:t,style:n})=>{let[r,i]=c();return f(a.RadioGroup,{"data-slot":`theme-dropdown-menu-radio-group`,className:t,style:n,value:r,onValueChange:e=>{l(e)&&i(e)},children:s.map(t=>p(a.RadioItem,{value:o(t),children:[f(e,{svg:f(u,{theme:t})}),m[t]]},t))})},g={Root:e=>f(a.Root,{...e}),Trigger:({appearance:e=`ghost`,"data-slot":o,disabled:s,label:c=`Change Theme`,ref:l,...u})=>f(a.Trigger,{asChild:!0,disabled:s,children:f(n,{ref:l,appearance:e,disabled:s,"data-slot":t(o,`theme-switcher-trigger`),intent:`neutral`,icon:f(r,{fallback:f(i,{className:`rounded-full size-5`}),children:()=>f(d,{className:`size-5`})}),label:c,...u})}),Content:({children:e,"data-slot":n,...r})=>f(a.Content,{"data-slot":t(n,`theme-switcher-content`),...r,children:e??f(h,{})})};export{h as ThemeDropdownMenuRadioGroup,g as ThemeSwitcher};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ngrok/mantle",
-  "version": "0.83.5",
+  "version": "0.83.7",
   "description": "mantle is ngrok's UI library and design system.",
   "homepage": "https://mantle.ngrok.com",
   "license": "MIT",