@ngrok/mantle 0.76.4 → 0.76.5

package/dist/agent.json

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

package/dist/code-block.d.ts

@@ -416,6 +416,81 @@ declare const CodeBlock: {
   } & import("react").RefAttributes<HTMLHeadingElement>>;
 };
 //#endregion
+//#region src/components/code-block/json-highlight.d.ts
+/**
+ * Tokenize a JSON string into the same per-line, CSS-variable-colored span markup
+ * that Mantle's server/build-time Shiki highlighter produces — without shipping
+ * Shiki (or any grammar/theme/WASM) to the browser.
+ *
+ * Byte-for-byte parity with `extractHighlightedCodeInnerHtml(shiki.codeToHtml(code, …))`
+ * is guaranteed for **canonical `JSON.stringify` output** — the only shape
+ * {@link jsonCodeBlockValue} ever feeds it (2-space indent: an opener is always
+ * followed by a newline, never inline whitespace; line endings are `\n`). That
+ * exact-parity set is locked by the `json-*.fixtures` golden tests. Other valid
+ * but non-canonical JSON is highlighted on a best-effort basis and may diverge
+ * from Shiki in cosmetic ways: arbitrary inter-token whitespace attaches to the
+ * following token rather than the preceding one, and scopes Shiki treats
+ * specially (e.g. `invalid.illegal` escapes) are colored as ordinary tokens.
+ * CRLF input is normalized to `\n`.
+ *
+ * Expects well-formed JSON. The result is the inner HTML for a `<code>` element;
+ * feed it through `decorateHighlightedHtml` (as `jsonCodeBlockValue` does) for the
+ * final `CodeBlock.Code` markup.
+ *
+ * @example
+ * ```ts
+ * jsonToShikiHtml('{\n  "id": 1\n}');
+ * // '<span class="line"><span style="color:var(--shiki-foreground)">{</span></span>\n…'
+ * ```
+ */
+declare function jsonToShikiHtml(code: string): string;
+/** Options for {@link jsonCodeBlockValue}. */
+type JsonCodeBlockValueOptions = {
+  /**
+   * Whether to render line numbers. Defaults to `false` — detail panels usually
+   * read better without a gutter.
+   */
+  showLineNumbers?: boolean | undefined;
+  /**
+   * Whether multi-line objects and arrays get collapsible fold toggles, matching
+   * every other JSON `CodeBlock`. Uses the same `computeJsonFoldRanges` the
+   * server/build pipeline uses, so the fold markup is identical. Defaults to
+   * `true`; set `false` for a flat, non-collapsible panel.
+   */
+  foldable?: boolean | undefined;
+};
+/**
+ * Build a `MantleCodeBlockValue` that renders a value as syntax-highlighted JSON
+ * entirely on the client — no Shiki runtime, no build-time plugin, no server
+ * roundtrip. The value is `JSON.stringify`'d (2-space indent), tokenized to
+ * Shiki-identical markup by {@link jsonToShikiHtml}, and decorated with the same
+ * `decorateHighlightedHtml` the server pipeline uses, so it looks identical to a
+ * server/build-time highlighted block and adapts to light/dark themes for free.
+ *
+ * By default, multi-line objects and arrays get collapsible fold toggles (opt
+ * out with `foldable: false`) — also identical to server/build-time blocks,
+ * since both compute ranges with the same `computeJsonFoldRanges`.
+ *
+ * Pass the result straight to `CodeBlock.Code`'s `value` prop. Ideal for
+ * inspecting a row's underlying object inside a `DataTable.ExpandedRow`.
+ *
+ * @example
+ * ```tsx
+ * import { CodeBlock, jsonCodeBlockValue } from "@ngrok/mantle/code-block";
+ *
+ * <CodeBlock.Root>
+ *   <CodeBlock.Body>
+ *     <CodeBlock.CopyButton />
+ *     <CodeBlock.Code value={jsonCodeBlockValue(row.original)} />
+ *   </CodeBlock.Body>
+ * </CodeBlock.Root>
+ * ```
+ */
+declare function jsonCodeBlockValue(value: unknown, {
+  showLineNumbers,
+  foldable
+}?: JsonCodeBlockValueOptions): MantleCodeBlockValue;
+//#endregion
 //#region src/components/code-block/escape-html.d.ts
 /**
  * Escapes special HTML characters in a string to their corresponding
@@ -447,4 +522,4 @@ declare function escapeHtml(value: string): string;
  */
 declare function hasMoreThanNLines(value: string, maxLines: number): boolean;
 //#endregion
-export { CodeBlock, type CodeBlockPreElementInput, type ComputeFoldRangesInput, type DefaultMeta, type FoldExplanation, type FoldLine, type FoldScope, type FoldStrategy, type FoldToken, type FoldableRange, type Indentation, type LineRange, type MantleCodeBlockValue, type MantleCodeOptions, type Meta, type MetaInput, type Mode, type ResolvePreRenderedCodeBlockPropsInput, type ResolvePreRenderedCodeBlockPropsResult, type ResolvedPreRenderedCodeBlockProps, type SupportedLanguage, computeFoldRanges, computeJsonFoldRanges, createMantleCodeBlockValue, decorateHighlightedHtml, defaultMeta, escapeHtml, finalizeFoldRanges, foldStrategyFor, hasMoreThanNLines, inferIndentation, isIndentation, isSupportedLanguage, mantleCode, normalizeIndentation, normalizeValue, parseCodeBlockHighlightLines, parseCodeBlockLineNumberStart, parseCodeBlockShowLineNumbers, parseLanguage, parseMetastring, resolvePreRenderedCodeBlockProps, supportedLanguages, tokenizeMetastring };
+export { CodeBlock, type CodeBlockPreElementInput, type ComputeFoldRangesInput, type DefaultMeta, type FoldExplanation, type FoldLine, type FoldScope, type FoldStrategy, type FoldToken, type FoldableRange, type Indentation, type JsonCodeBlockValueOptions, type LineRange, type MantleCodeBlockValue, type MantleCodeOptions, type Meta, type MetaInput, type Mode, type ResolvePreRenderedCodeBlockPropsInput, type ResolvePreRenderedCodeBlockPropsResult, type ResolvedPreRenderedCodeBlockProps, type SupportedLanguage, computeFoldRanges, computeJsonFoldRanges, createMantleCodeBlockValue, decorateHighlightedHtml, defaultMeta, escapeHtml, finalizeFoldRanges, foldStrategyFor, hasMoreThanNLines, inferIndentation, isIndentation, isSupportedLanguage, jsonCodeBlockValue, jsonToShikiHtml, mantleCode, normalizeIndentation, normalizeValue, parseCodeBlockHighlightLines, parseCodeBlockLineNumberStart, parseCodeBlockShowLineNumbers, parseLanguage, parseMetastring, resolvePreRenderedCodeBlockProps, supportedLanguages, tokenizeMetastring };

package/dist/code-block.js

@@ -1,2 +1,7 @@
-import{t as e}from"./cx-CBSnSC36.js";import{t}from"./icon-C8bYBIHW.js";import{t as n}from"./slot-CV5fmqFr.js";import{t as r}from"./icon-button-DUNHVWpb.js";import{t as i}from"./compose-refs-Cjf2gfB8.js";import{t as a}from"./use-copy-to-clipboard-BLpquU9d.js";import{t as o}from"./traffic-policy-file-0g5RXFqu.js";import{S as s,_ as c,a as l,b as u,c as d,d as f,f as p,g as m,h,i as g,l as _,m as v,n as y,o as b,p as x,r as S,s as C,t as w,u as T,v as E,y as D}from"./resolve-pre-rendered-props-D9nlC6xE.js";import{CaretDownIcon as O}from"@phosphor-icons/react/CaretDown";import{createContext as k,forwardRef as A,useCallback as j,useContext as ee,useEffect as M,useId as te,useLayoutEffect as ne,useMemo as N,useRef as P,useState as F}from"react";import I from"tiny-invariant";import{jsx as L,jsxs as re}from"react/jsx-runtime";import{CheckIcon as ie}from"@phosphor-icons/react/Check";import{CopyIcon as ae}from"@phosphor-icons/react/Copy";import{FileTextIcon as oe}from"@phosphor-icons/react/FileText";import{TerminalIcon as se}from"@phosphor-icons/react/Terminal";import{Content as ce,List as le,Root as ue,Trigger as de}from"@radix-ui/react-tabs";function R(e){let t=-1;for(let n=0;n<e.length;n++){let r=e[n];if(r===`&`||r===`<`||r===`>`||r===`"`||r===`'`){t=n;break}}if(t===-1)return e;let n=e.slice(0,t);for(let r=t;r<e.length;r++){let t=e[r];switch(t){case`&`:n+=`&amp;`;break;case`<`:n+=`&lt;`;break;case`>`:n+=`&gt;`;break;case`"`:n+=`&quot;`;break;case`'`:n+=`&#39;`;break;default:n+=t}}return n}const z=new WeakMap;function B(e){let t=new Set;if(e==null||e===``)return t;for(let n of e.split(` `))n!==``&&t.add(n);return t}function fe(e){let t=z.get(e);if(t!=null&&he(t))return t;let n=new Map,r=new WeakMap,i=e.querySelectorAll(`[data-fold-regions]`);for(let e=0;e<i.length;e+=1){let t=i[e];if(!(t instanceof HTMLElement))continue;let a=B(t.dataset.foldRegions);if(a.size!==0){r.set(t,a);for(let e of a){let r=n.get(e);r??(r=[],n.set(e,r)),r.push(t)}}}let a={regionToLines:n,lineToRegions:r};return z.set(e,a),a}function pe(e){z.delete(e)}function me(e){pe(e),e.removeAttribute(`data-folded-regions`)}function he(e){for(let t of e.regionToLines.values()){if(t.length===0)continue;let e=t[0];if(e!=null)return e.isConnected}return!0}function ge(e,t,n){let r=!1;for(let e of n)if(t.has(e)){r=!0;break}r?e.dataset.foldHidden=`true`:delete e.dataset.foldHidden}function _e(e){let t=e.dataset.foldLine;if(t==null||t===``)return!1;let n=e.closest(`[data-slot='code-block-code']`)?.querySelector(`code`);if(n==null)return!1;let r=B(n.getAttribute(`data-folded-regions`)),i=!r.has(t);i?r.add(t):r.delete(t),r.size===0?n.removeAttribute(`data-folded-regions`):n.setAttribute(`data-folded-regions`,[...r].join(` `)),e.setAttribute(`aria-expanded`,i?`false`:`true`);let{regionToLines:a,lineToRegions:o}=fe(n),s=a.get(t);if(s!=null)for(let e of s){let t=o.get(e);t!=null&&ge(e,r,t)}return!0}function ve(e){let t=e=>{let t=e.target;if(!(t instanceof Element))return;let n=t.closest(`.mantle-code-fold-toggle`);n instanceof HTMLButtonElement&&_e(n)};return e.addEventListener(`click`,t),()=>{e.removeEventListener(`click`,t)}}const ye=k(null);function V(){let e=ee(ye);return I(e!=null,`CodeBlock subcomponents must be rendered within a <CodeBlock.Root>.`),e}const H=A(({asChild:t=!1,className:r,defaultTab:i,activeTab:a,onActiveTabChange:o,...s},c)=>{let l=P(``),[u,d]=F(!1),[f,p]=F(!1),[m,h]=F(void 0),g=j(e=>{h(t=>(I(t==null,`You can only render a single CodeBlock.Code within a CodeBlock.`),e))},[]),_=j(e=>{h(t=>{I(t===e,`You can only render a single CodeBlock.Code within a CodeBlock.`)})},[]),v=N(()=>({codeId:m,copyTextRef:l,hasCodeExpander:u,isCodeExpanded:f,registerCodeId:g,setHasCodeExpander:d,setIsCodeExpanded:p,unregisterCodeId:_}),[m,u,f,g,_]),y=i!=null||a!=null,b=L(t?n:`div`,{"data-slot":`code-block`,className:e(`text-mono w-full overflow-hidden rounded-md border border-gray-300 bg-card font-mono`,`[&_svg]:shrink-0`,r),ref:c,...s});return L(ye.Provider,{value:v,children:y?L(ue,{asChild:!0,defaultValue:i,value:a,onValueChange:o,children:b}):b})});H.displayName=`CodeBlock`;const U=A(({asChild:t=!1,className:r,...i},a)=>L(t?n:`div`,{"data-slot":`code-block-body`,className:e(`relative`,r),ref:a,...i}));U.displayName=`CodeBlockBody`;const be=/SHIKI_VAL_(\d+)/g;function xe(e){return e.replace(/[.*+?^${}()|[\]\\]/g,`\\$&`)}const W=new Map;function Se(e){if(e==null||e.length===0)return be;let t=W.get(e);return t??(W.size>=500&&W.clear(),t=RegExp(`${xe(e)}(\\d+)__`,`g`),W.set(e,t)),t}function G(e,t,n,r){if(n==null){if(!e.includes(`SHIKI_VAL_`))return e}else if(!e.includes(n))return e;return e.replaceAll(Se(n),(e,n)=>{let i=Number.parseInt(n,10);return Number.isNaN(i)||i<0||i>=t.length?e:r(t[i])})}function Ce(e,t,n){return G(e,t,n,e=>R(String(e)))}function we(e,t,n){return G(e,t,n,e=>String(e))}const K=A(({className:t,style:n,value:r,...a},o)=>{let s=te(),c=P(null),{copyTextRef:l,hasCodeExpander:u,isCodeExpanded:d,registerCodeId:f,unregisterCodeId:p}=V(),{language:m,code:h,"~preValToken":g,"~preVals":_,"~highlightLines":v,"~lineNumberStart":y,"~preHtml":b,"~showLineNumbers":x}=r,S=v,C=y??1,w=x??!1,T=N(()=>_!=null&&_.length>0?we(h,_,g):h,[g,_,h]);ne(()=>{l.current=T},[l,T]),M(()=>(f(s),()=>{p(s)}),[s,f,p]);let E=N(()=>{if(b!=null)return _!=null&&_.length>0?Ce(b,_,g):b},[b,g,_]);M(()=>{let e=c.current;if(e==null)return;let t=e.querySelector(`code`);return t!=null&&me(t),ve(e)},[E]);let D=E!=null,O=E??R(T),k=N(()=>({__html:O}),[O]);return L(`pre`,{"data-slot":`code-block-code`,"aria-expanded":u?d:void 0,className:e(`scrollbar overflow-x-auto overflow-y-hidden py-4`,!D&&`pr-14`,`data-[mantle-line-numbers~='false']:pl-4`,`text-mono m-0 font-mono outline-hidden`,`aria-collapsed:max-h-[13.6rem]`,t),"data-highlighted":D?`true`:`false`,"data-lang":m,"data-mantle-highlight-lines":D&&S!=null&&S.length>0?S.join(`,`):void 0,"data-mantle-line-number-start":D&&w?String(C):`1`,"data-mantle-line-numbers":D&&w?`true`:`false`,id:s,ref:i(c,o),style:{...n,"--mantle-line-number-start":String(C),tabSize:2,MozTabSize:2},...a,children:L(`code`,{className:`text-size-inherit block min-w-full w-max`,dangerouslySetInnerHTML:k})})});K.displayName=`CodeBlockCode`;const q=A(({asChild:t=!1,className:r,...i},a)=>L(t?n:`div`,{"data-slot":`code-block-header`,className:e(`flex items-center gap-1 border-b border-gray-300 bg-base px-4 py-2 text-gray-700`,r),ref:a,...i}));q.displayName=`CodeBlockHeader`;const J=A(({asChild:t=!1,className:r,...i},a)=>L(t?n:`h3`,{"data-slot":`code-block-title`,ref:a,className:e(`text-mono m-0 font-mono font-normal`,r),...i}));J.displayName=`CodeBlockTitle`;const Y=A(({className:e,label:t=`Copy code`,onCopy:n,onCopyError:i,onClick:o,...s},c)=>{let{copyTextRef:l}=V(),u=a(),[d,f]=F(!1),p=P(void 0);return M(()=>()=>{p.current!=null&&clearTimeout(p.current)},[]),L(`span`,{"data-slot":`code-block-copy-button`,className:`absolute right-3 top-3 z-10 inline-flex size-7 items-center justify-center rounded-[var(--icon-button-border-radius,0.375rem)] bg-card`,children:L(r,{type:`button`,appearance:`ghost`,size:`sm`,label:t,icon:L(d?ie:ae,{}),className:e,ref:c,onClick:async e=>{try{if(o?.(e),e.defaultPrevented){p.current!=null&&clearTimeout(p.current);return}let t=l.current;await u(t),n?.(t),f(!0),p.current!=null&&clearTimeout(p.current),p.current=setTimeout(()=>{f(!1)},2e3)}catch(e){i?.(e)}},...s})})});Y.displayName=`CodeBlockCopyButton`;const X=A(({asChild:r=!1,className:i,onClick:a,...o},s)=>{let{codeId:c,isCodeExpanded:l,setIsCodeExpanded:u,setHasCodeExpander:d}=V();return M(()=>(d(!0),()=>{d(!1)}),[d]),re(r?n:`button`,{...o,"data-slot":`code-block-expander-button`,"aria-controls":c,"aria-expanded":l,className:e(`flex w-full items-center justify-center gap-0.5 border-t border-gray-300 bg-card px-4 py-2 font-sans text-gray-700 hover:bg-gray-100`,i),ref:s,type:`button`,onClick:e=>{u(e=>!e),a?.(e)},children:[l?`Show less`:`Show more`,` `,L(t,{svg:L(O,{weight:`bold`}),className:e(`size-4`,l&&`rotate-180`,`transition-all duration-150`)})]})});X.displayName=`CodeBlockExpanderButton`;function Z({className:e,preset:n,svg:r,...i}){let a=r;if(n!=null)switch(n){case`file`:a=L(oe,{weight:`fill`});break;case`cli`:a=L(se,{weight:`fill`});break;case`traffic-policy`:a=L(o,{});break}return L(t,{"data-slot":`code-block-icon`,className:e,svg:a,...i})}Z.displayName=`CodeBlockIcon`;const Q=A(({className:t,...n},r)=>L(le,{"data-slot":`code-block-tab-list`,className:e(`flex items-center gap-1`,t),ref:r,...n}));Q.displayName=`CodeBlockTabList`;const Te=A(({className:t,...n},r)=>L(de,{"data-slot":`code-block-tab-trigger`,className:e(`cursor-pointer rounded px-1.5 py-0.5 text-xs font-medium`,`text-gray-600 outline-hidden`,`hover:text-gray-900`,`data-[state=active]:bg-neutral-500/15 data-[state=active]:text-strong`,`focus-visible:ring-focus-accent focus-visible:ring-4`,t),ref:r,...n}));Te.displayName=`CodeBlockTabTrigger`;const $=A((e,t)=>L(ce,{"data-slot":`code-block-tab-content`,ref:t,...e}));$.displayName=`CodeBlockTabContent`;const Ee={Root:H,Body:U,Code:K,CopyButton:Y,ExpanderButton:X,Header:q,Icon:Z,TabContent:$,TabList:Q,TabTrigger:Te,Title:J};function De(e,t){let n=1;if(n>t)return!0;for(let r=0;r<e.length;r++)if(e[r]===`
-`&&(n+=1,n>t))return!0;return!1}export{Ee as CodeBlock,h as computeFoldRanges,c as computeJsonFoldRanges,u as createMantleCodeBlockValue,D as decorateHighlightedHtml,w as defaultMeta,R as escapeHtml,E as finalizeFoldRanges,m as foldStrategyFor,De as hasMoreThanNLines,x as inferIndentation,v as isIndentation,_ as isSupportedLanguage,s as mantleCode,p as normalizeIndentation,y as normalizeValue,b as parseCodeBlockHighlightLines,C as parseCodeBlockLineNumberStart,d as parseCodeBlockShowLineNumbers,T as parseLanguage,S as parseMetastring,g as resolvePreRenderedCodeBlockProps,f as supportedLanguages,l as tokenizeMetastring};
+import{t as e}from"./cx-CBSnSC36.js";import{t}from"./icon-C8bYBIHW.js";import{t as n}from"./slot-CV5fmqFr.js";import{t as r}from"./icon-button-DUNHVWpb.js";import{t as i}from"./compose-refs-Cjf2gfB8.js";import{t as a}from"./use-copy-to-clipboard-BLpquU9d.js";import{t as o}from"./traffic-policy-file-0g5RXFqu.js";import{S as s,_ as c,a as l,b as u,c as d,d as f,f as p,g as m,h,i as g,l as _,m as v,n as y,o as b,p as x,r as S,s as C,t as w,u as T,v as E,y as D}from"./resolve-pre-rendered-props-CF9-Qy2H.js";import{CaretDownIcon as O}from"@phosphor-icons/react/CaretDown";import{createContext as ee,forwardRef as k,useCallback as A,useContext as te,useEffect as j,useId as ne,useLayoutEffect as re,useMemo as M,useRef as N,useState as P}from"react";import F from"tiny-invariant";import{jsx as I,jsxs as ie}from"react/jsx-runtime";import{CheckIcon as ae}from"@phosphor-icons/react/Check";import{CopyIcon as oe}from"@phosphor-icons/react/Copy";import{FileTextIcon as se}from"@phosphor-icons/react/FileText";import{TerminalIcon as ce}from"@phosphor-icons/react/Terminal";import{Content as le,List as ue,Root as de,Trigger as fe}from"@radix-ui/react-tabs";function L(e){let t=-1;for(let n=0;n<e.length;n++){let r=e[n];if(r===`&`||r===`<`||r===`>`||r===`"`||r===`'`){t=n;break}}if(t===-1)return e;let n=e.slice(0,t);for(let r=t;r<e.length;r++){let t=e[r];switch(t){case`&`:n+=`&amp;`;break;case`<`:n+=`&lt;`;break;case`>`:n+=`&gt;`;break;case`"`:n+=`&quot;`;break;case`'`:n+=`&#39;`;break;default:n+=t}}return n}const R=new WeakMap;function z(e){let t=new Set;if(e==null||e===``)return t;for(let n of e.split(` `))n!==``&&t.add(n);return t}function pe(e){let t=R.get(e);if(t!=null&&ge(t))return t;let n=new Map,r=new WeakMap,i=e.querySelectorAll(`[data-fold-regions]`);for(let e=0;e<i.length;e+=1){let t=i[e];if(!(t instanceof HTMLElement))continue;let a=z(t.dataset.foldRegions);if(a.size!==0){r.set(t,a);for(let e of a){let r=n.get(e);r??(r=[],n.set(e,r)),r.push(t)}}}let a={regionToLines:n,lineToRegions:r};return R.set(e,a),a}function me(e){R.delete(e)}function he(e){me(e),e.removeAttribute(`data-folded-regions`)}function ge(e){for(let t of e.regionToLines.values()){if(t.length===0)continue;let e=t[0];if(e!=null)return e.isConnected}return!0}function _e(e,t,n){let r=!1;for(let e of n)if(t.has(e)){r=!0;break}r?e.dataset.foldHidden=`true`:delete e.dataset.foldHidden}function ve(e){let t=e.dataset.foldLine;if(t==null||t===``)return!1;let n=e.closest(`[data-slot='code-block-code']`)?.querySelector(`code`);if(n==null)return!1;let r=z(n.getAttribute(`data-folded-regions`)),i=!r.has(t);i?r.add(t):r.delete(t),r.size===0?n.removeAttribute(`data-folded-regions`):n.setAttribute(`data-folded-regions`,[...r].join(` `)),e.setAttribute(`aria-expanded`,i?`false`:`true`);let{regionToLines:a,lineToRegions:o}=pe(n),s=a.get(t);if(s!=null)for(let e of s){let t=o.get(e);t!=null&&_e(e,r,t)}return!0}function ye(e){let t=e=>{let t=e.target;if(!(t instanceof Element))return;let n=t.closest(`.mantle-code-fold-toggle`);n instanceof HTMLButtonElement&&ve(n)};return e.addEventListener(`click`,t),()=>{e.removeEventListener(`click`,t)}}const B=ee(null);function V(){let e=te(B);return F(e!=null,`CodeBlock subcomponents must be rendered within a <CodeBlock.Root>.`),e}const H=k(({asChild:t=!1,className:r,defaultTab:i,activeTab:a,onActiveTabChange:o,...s},c)=>{let l=N(``),[u,d]=P(!1),[f,p]=P(!1),[m,h]=P(void 0),g=A(e=>{h(t=>(F(t==null,`You can only render a single CodeBlock.Code within a CodeBlock.`),e))},[]),_=A(e=>{h(t=>{F(t===e,`You can only render a single CodeBlock.Code within a CodeBlock.`)})},[]),v=M(()=>({codeId:m,copyTextRef:l,hasCodeExpander:u,isCodeExpanded:f,registerCodeId:g,setHasCodeExpander:d,setIsCodeExpanded:p,unregisterCodeId:_}),[m,u,f,g,_]),y=i!=null||a!=null,b=I(t?n:`div`,{"data-slot":`code-block`,className:e(`text-mono w-full overflow-hidden rounded-md border border-gray-300 bg-card font-mono`,`[&_svg]:shrink-0`,r),ref:c,...s});return I(B.Provider,{value:v,children:y?I(de,{asChild:!0,defaultValue:i,value:a,onValueChange:o,children:b}):b})});H.displayName=`CodeBlock`;const U=k(({asChild:t=!1,className:r,...i},a)=>I(t?n:`div`,{"data-slot":`code-block-body`,className:e(`relative`,r),ref:a,...i}));U.displayName=`CodeBlockBody`;const be=/SHIKI_VAL_(\d+)/g;function xe(e){return e.replace(/[.*+?^${}()|[\]\\]/g,`\\$&`)}const W=new Map;function Se(e){if(e==null||e.length===0)return be;let t=W.get(e);return t??(W.size>=500&&W.clear(),t=RegExp(`${xe(e)}(\\d+)__`,`g`),W.set(e,t)),t}function G(e,t,n,r){if(n==null){if(!e.includes(`SHIKI_VAL_`))return e}else if(!e.includes(n))return e;return e.replaceAll(Se(n),(e,n)=>{let i=Number.parseInt(n,10);return Number.isNaN(i)||i<0||i>=t.length?e:r(t[i])})}function Ce(e,t,n){return G(e,t,n,e=>L(String(e)))}function we(e,t,n){return G(e,t,n,e=>String(e))}const K=k(({className:t,style:n,value:r,...a},o)=>{let s=ne(),c=N(null),{copyTextRef:l,hasCodeExpander:u,isCodeExpanded:d,registerCodeId:f,unregisterCodeId:p}=V(),{language:m,code:h,"~preValToken":g,"~preVals":_,"~highlightLines":v,"~lineNumberStart":y,"~preHtml":b,"~showLineNumbers":x}=r,S=v,C=y??1,w=x??!1,T=M(()=>_!=null&&_.length>0?we(h,_,g):h,[g,_,h]);re(()=>{l.current=T},[l,T]),j(()=>(f(s),()=>{p(s)}),[s,f,p]);let E=M(()=>{if(b!=null)return _!=null&&_.length>0?Ce(b,_,g):b},[b,g,_]);j(()=>{let e=c.current;if(e==null)return;let t=e.querySelector(`code`);return t!=null&&he(t),ye(e)},[E]);let D=E!=null,O=E??L(T),ee=M(()=>({__html:O}),[O]);return I(`pre`,{"data-slot":`code-block-code`,"aria-expanded":u?d:void 0,className:e(`scrollbar overflow-x-auto overflow-y-hidden py-4`,!D&&`pr-14`,`data-[mantle-line-numbers~='false']:pl-4`,`text-mono m-0 font-mono outline-hidden`,`aria-collapsed:max-h-[13.6rem]`,t),"data-highlighted":D?`true`:`false`,"data-lang":m,"data-mantle-highlight-lines":D&&S!=null&&S.length>0?S.join(`,`):void 0,"data-mantle-line-number-start":D&&w?String(C):`1`,"data-mantle-line-numbers":D&&w?`true`:`false`,id:s,ref:i(c,o),style:{...n,"--mantle-line-number-start":String(C),tabSize:2,MozTabSize:2},...a,children:I(`code`,{className:`text-size-inherit block min-w-full w-max`,dangerouslySetInnerHTML:ee})})});K.displayName=`CodeBlockCode`;const q=k(({asChild:t=!1,className:r,...i},a)=>I(t?n:`div`,{"data-slot":`code-block-header`,className:e(`flex items-center gap-1 border-b border-gray-300 bg-base px-4 py-2 text-gray-700`,r),ref:a,...i}));q.displayName=`CodeBlockHeader`;const J=k(({asChild:t=!1,className:r,...i},a)=>I(t?n:`h3`,{"data-slot":`code-block-title`,ref:a,className:e(`text-mono m-0 font-mono font-normal`,r),...i}));J.displayName=`CodeBlockTitle`;const Y=k(({className:e,label:t=`Copy code`,onCopy:n,onCopyError:i,onClick:o,...s},c)=>{let{copyTextRef:l}=V(),u=a(),[d,f]=P(!1),p=N(void 0);return j(()=>()=>{p.current!=null&&clearTimeout(p.current)},[]),I(`span`,{"data-slot":`code-block-copy-button`,className:`absolute right-3 top-3 z-10 inline-flex size-7 items-center justify-center rounded-[var(--icon-button-border-radius,0.375rem)] bg-card`,children:I(r,{type:`button`,appearance:`ghost`,size:`sm`,label:t,icon:I(d?ae:oe,{}),className:e,ref:c,onClick:async e=>{try{if(o?.(e),e.defaultPrevented){p.current!=null&&clearTimeout(p.current);return}let t=l.current;await u(t),n?.(t),f(!0),p.current!=null&&clearTimeout(p.current),p.current=setTimeout(()=>{f(!1)},2e3)}catch(e){i?.(e)}},...s})})});Y.displayName=`CodeBlockCopyButton`;const X=k(({asChild:r=!1,className:i,onClick:a,...o},s)=>{let{codeId:c,isCodeExpanded:l,setIsCodeExpanded:u,setHasCodeExpander:d}=V();return j(()=>(d(!0),()=>{d(!1)}),[d]),ie(r?n:`button`,{...o,"data-slot":`code-block-expander-button`,"aria-controls":c,"aria-expanded":l,className:e(`flex w-full items-center justify-center gap-0.5 border-t border-gray-300 bg-card px-4 py-2 font-sans text-gray-700 hover:bg-gray-100`,i),ref:s,type:`button`,onClick:e=>{u(e=>!e),a?.(e)},children:[l?`Show less`:`Show more`,` `,I(t,{svg:I(O,{weight:`bold`}),className:e(`size-4`,l&&`rotate-180`,`transition-all duration-150`)})]})});X.displayName=`CodeBlockExpanderButton`;function Z({className:e,preset:n,svg:r,...i}){let a=r;if(n!=null)switch(n){case`file`:a=I(se,{weight:`fill`});break;case`cli`:a=I(ce,{weight:`fill`});break;case`traffic-policy`:a=I(o,{});break}return I(t,{"data-slot":`code-block-icon`,className:e,svg:a,...i})}Z.displayName=`CodeBlockIcon`;const Q=k(({className:t,...n},r)=>I(ue,{"data-slot":`code-block-tab-list`,className:e(`flex items-center gap-1`,t),ref:r,...n}));Q.displayName=`CodeBlockTabList`;const Te=k(({className:t,...n},r)=>I(fe,{"data-slot":`code-block-tab-trigger`,className:e(`cursor-pointer rounded px-1.5 py-0.5 text-xs font-medium`,`text-gray-600 outline-hidden`,`hover:text-gray-900`,`data-[state=active]:bg-neutral-500/15 data-[state=active]:text-strong`,`focus-visible:ring-focus-accent focus-visible:ring-4`,t),ref:r,...n}));Te.displayName=`CodeBlockTabTrigger`;const Ee=k((e,t)=>I(le,{"data-slot":`code-block-tab-content`,ref:t,...e}));Ee.displayName=`CodeBlockTabContent`;const De={Root:H,Body:U,Code:K,CopyButton:Y,ExpanderButton:X,Header:q,Icon:Z,TabContent:Ee,TabList:Q,TabTrigger:Te,Title:J},Oe=`var(--shiki-foreground)`;function ke(e){return e.replace(/[&<]/g,e=>e===`&`?`&#x26;`:`&#x3C;`)}function Ae(e){return e===` `||e===`	`||e===`
+`||e===`\r`||e===`{`||e===`}`||e===`[`||e===`]`||e===`:`||e===`,`||e===`"`}function je(e,t,n){let r=e.length,i=[],a=`"`,o=t+1;for(;o<r;){let t=e[o];if(t===`\\`){let t=e[o+1]===`u`&&/^[0-9a-fA-F]{4}$/.test(e.slice(o+2,o+6))?6:2;a!==``&&(i.push({text:a,isEscape:!1}),a=``),i.push({text:e.slice(o,o+t),isEscape:!0}),o+=t;continue}if(t===`"`){a+=`"`,o+=1;break}a+=t,o+=1}a!==``&&i.push({text:a,isEscape:!1});let s=o;for(;s<r;){let t=e[s];if(t===` `||t===`	`||t===`
+`||t===`\r`){s+=1;continue}break}let c=e[s]===`:`?`var(--shiki-token-keyword)`:`var(--shiki-token-string-expression)`;for(let e of i)n(e.text,e.isEscape?`var(--shiki-token-escape, var(--shiki-token-constant))`:c);return o}function Me(e){for(let t=0;t<e.length;t+=1){let n=e[t];if(n!=null&&n.color==null){let r=Oe;for(let n=t+1;n<e.length;n+=1){let t=e[n];if(t!=null&&t.color!=null){r=t.color;break}}n.color=r}}let t=``,n=``,r=null,i=()=>{r!=null&&(t+=`<span style="color:${r}">${ke(n)}</span>`),n=``,r=null};for(let t of e)t!=null&&(t.color===r?n+=t.text:(i(),n=t.text,r=t.color));return i(),`<span class="line">${t}</span>`}function $(e){let t=[[]],n=t[0]??[],r=e.length,i=0,a=(e,t)=>{n.push({text:e,color:t})};for(;i<r;){let o=e[i];if(o===`
+`||o===`\r`){o===`\r`&&e[i+1]===`
+`&&(i+=1);let r=[];t.push(r),n=r,i+=1;continue}if(o===` `||o===`	`){let t=i+1;for(;t<r;){let n=e[t];if(n!==` `&&n!==`	`)break;t+=1}a(e.slice(i,t),null),i=t;continue}if(o===`{`||o===`}`||o===`[`||o===`]`){a(o,Oe),i+=1;continue}if(o===`:`||o===`,`){a(o,`var(--shiki-token-punctuation)`),i+=1;continue}if(o===`"`){i=je(e,i,a);continue}let s=i+1;for(;s<r&&!Ae(e[s]??``);)s+=1;a(e.slice(i,s),`var(--shiki-token-constant)`),i=s}return t.map(Me).join(`
+`)}function Ne(e){let t=new WeakSet;try{return JSON.stringify(e,(e,n)=>{if(typeof n==`bigint`)return n.toString();if(typeof n==`object`&&n){if(t.has(n))return`[Circular]`;t.add(n)}return n},2)??``}catch{try{return String(e)}catch{return``}}}function Pe(e,{showLineNumbers:t=!1,foldable:n=!0}={}){let r=Ne(e);return u({language:`json`,code:r,preHtml:c({html:$(r),foldableRanges:n?E(r):void 0,showLineNumbers:t}),showLineNumbers:t})}function Fe(e,t){let n=1;if(n>t)return!0;for(let r=0;r<e.length;r++)if(e[r]===`
+`&&(n+=1,n>t))return!0;return!1}export{De as CodeBlock,h as computeFoldRanges,E as computeJsonFoldRanges,u as createMantleCodeBlockValue,c as decorateHighlightedHtml,w as defaultMeta,L as escapeHtml,D as finalizeFoldRanges,m as foldStrategyFor,Fe as hasMoreThanNLines,x as inferIndentation,v as isIndentation,_ as isSupportedLanguage,Pe as jsonCodeBlockValue,$ as jsonToShikiHtml,s as mantleCode,p as normalizeIndentation,y as normalizeValue,b as parseCodeBlockHighlightLines,C as parseCodeBlockLineNumberStart,d as parseCodeBlockShowLineNumbers,T as parseLanguage,S as parseMetastring,g as resolvePreRenderedCodeBlockProps,f as supportedLanguages,l as tokenizeMetastring};

package/dist/code-block_highlight-utils.js

@@ -1 +1 @@
-import{_ as e,a as t,c as n,d as r,f as i,g as a,h as o,l as s,m as c,n as l,o as u,p as d,s as f,u as p,v as m,x as h,y as g}from"./resolve-pre-rendered-props-D9nlC6xE.js";export{o as computeFoldRanges,e as computeJsonFoldRanges,g as decorateHighlightedHtml,h as defaultShowLineNumbers,m as finalizeFoldRanges,a as foldStrategyFor,d as inferIndentation,c as isIndentation,s as isSupportedLanguage,i as normalizeIndentation,l as normalizeValue,u as parseCodeBlockHighlightLines,f as parseCodeBlockLineNumberStart,n as parseCodeBlockShowLineNumbers,p as parseLanguage,r as supportedLanguages,t as tokenizeMetastring};
+import{_ as e,a as t,c as n,d as r,f as i,g as a,h as o,l as s,m as c,n as l,o as u,p as d,s as f,u as p,v as m,x as h,y as g}from"./resolve-pre-rendered-props-CF9-Qy2H.js";export{o as computeFoldRanges,m as computeJsonFoldRanges,e as decorateHighlightedHtml,h as defaultShowLineNumbers,g as finalizeFoldRanges,a as foldStrategyFor,d as inferIndentation,c as isIndentation,s as isSupportedLanguage,i as normalizeIndentation,l as normalizeValue,u as parseCodeBlockHighlightLines,f as parseCodeBlockLineNumberStart,n as parseCodeBlockShowLineNumbers,p as parseLanguage,r as supportedLanguages,t as tokenizeMetastring};

package/dist/command.d.ts

@@ -243,7 +243,7 @@ declare const Command: {
     ref?: React.Ref<HTMLInputElement>;
   } & {
     asChild?: boolean;
-  }, "key" | "asChild" | keyof import("react").InputHTMLAttributes<HTMLInputElement>>, "onChange" | "value" | "type"> & {
+  }, "key" | "asChild" | keyof import("react").InputHTMLAttributes<HTMLInputElement>>, "onChange" | "type" | "value"> & {
     value?: string;
     onValueChange?: (search: string) => void;
   } & import("react").RefAttributes<HTMLInputElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;

package/dist/data-table.d.ts

@@ -1,4 +1,5 @@
 import { t as Button } from "./button-mfYak6Rx.js";
+import { t as IconButton } from "./icon-button-D7hs6bX2.js";
 import { s as SortingMode } from "./direction-CcTY0FmA.js";
 import { t as Table$1 } from "./table-BWD9IlIN.js";
 import { ComponentProps, ReactNode } from "react";
@@ -200,6 +201,18 @@ declare namespace Head {
 }
 type DataTableRowProps<TData> = Omit<ComponentProps<typeof Table$1.Row>, "children"> & {
   row: Row<TData>;
+  /**
+   * Renders an inline detail panel beneath the row. Called only while the row is
+   * expanded (`row.getIsExpanded()`), so the panel — and any expensive work it
+   * does — stays lazy. Mantle wraps the returned content in a sibling
+   * `DataTable.ExpandedRow` spanning every visible column, so return just the
+   * panel content (not a `<tr>`). Requires the table to be configured for
+   * expansion (`getExpandedRowModel`, plus `getRowCanExpand` for detail panels);
+   * pair it with a `DataTable.RowExpandButton` toggle in a leading column. For
+   * full control over the detail row (custom `colSpan`, multiple panels), omit
+   * this and render `DataTable.ExpandedRow` yourself.
+   */
+  renderExpanded?: (row: Row<TData>) => ReactNode;
 };
 /**
  * A single data table body row rendered from a TanStack Table row instance.
@@ -210,9 +223,15 @@ type DataTableRowProps<TData> = Omit<ComponentProps<typeof Table$1.Row>, "childr
  * `cursor-wait`) to override. For keyboard and screen-reader access, also
  * render a `<Link>` inside the primary cell — a `<tr>` is not focusable.
  *
+ * Pass `renderExpanded` to give the row an inline detail panel: when the row is
+ * expanded the row renders its data `<tr>` plus a sibling `DataTable.ExpandedRow`
+ * holding the returned content. Pair it with a `DataTable.RowExpandButton` toggle
+ * and configure the table for expansion (`getExpandedRowModel`, `getRowCanExpand`).
+ *
  * @see https://mantle.ngrok.com/components/data-table#datatablerow
  *
  * @example
+ * Clickable row navigating to a detail page:
  * ```tsx
  * const navigate = useNavigate();
  *
@@ -224,9 +243,31 @@ type DataTableRowProps<TData> = Omit<ComponentProps<typeof Table$1.Row>, "childr
  *   />
  * ))}
  * ```
+ *
+ * @example
+ * Expandable row with an inline JSON detail panel (lazy — only built when open):
+ * ```tsx
+ * import { CodeBlock, jsonCodeBlockValue } from "@ngrok/mantle/code-block";
+ *
+ * {rows.map((row) => (
+ *   <DataTable.Row
+ *     key={row.id}
+ *     row={row}
+ *     renderExpanded={(row) => (
+ *       <CodeBlock.Root>
+ *         <CodeBlock.Body>
+ *           <CodeBlock.CopyButton />
+ *           <CodeBlock.Code value={jsonCodeBlockValue(row.original)} />
+ *         </CodeBlock.Body>
+ *       </CodeBlock.Root>
+ *     )}
+ *   />
+ * ))}
+ * ```
  */
 declare function Row$1<TData>({
   className,
+  renderExpanded,
   row,
   ...props
 }: DataTableRowProps<TData>): import("react").JSX.Element;
@@ -355,6 +396,194 @@ declare function ActionHeader({
 declare namespace ActionHeader {
   var displayName: string;
 }
+/**
+ * Compute the stable DOM `id` for a row's expanded detail row. Shared by
+ * `DataTable.RowExpandButton` (as its `aria-controls` target) and
+ * `DataTable.ExpandedRow` (as its `id`) so the accessibility association is
+ * _derived_ from the row — never synchronized state — and stays correct whether
+ * or not the detail panel is currently rendered.
+ *
+ * REQUIRED: configure the table with a stable `getRowId` so `row.id` (and thus
+ * this id) is stable across sorting/filtering/pagination. Any `row.id` value is
+ * safe — it is URL-encoded into a valid, whitespace-free HTML id token (and thus
+ * a valid `aria-controls` IDREF), so display names with spaces, URLs, and emails
+ * all work; `getRowId` controls the value.
+ *
+ * @example
+ * ```tsx
+ * <DataTable.RowExpandButton row={row} label={row.original.name} />
+ * // ...renders aria-controls={expandedRowId(row)} while expanded, and
+ * <DataTable.ExpandedRow row={row}>...</DataTable.ExpandedRow>
+ * // ...renders id={expandedRowId(row)} — the same value, so they stay associated.
+ * ```
+ */
+declare function expandedRowId<TData>(row: Row<TData>): string;
+type DataTableExpandHeaderProps = Omit<ComponentProps<typeof Table$1.Header>, "children"> & {
+  /**
+   * Optional header content — e.g. an "expand all" toggle wired to
+   * `table.getToggleAllRowsExpandedHandler()`. Defaults to a screen-reader-only
+   * label so the column is announced while staying visually empty.
+   */
+  children?: ReactNode;
+};
+/**
+ * A narrow `<th>` for the leading expand-toggle column, mirroring
+ * `DataTable.ActionHeader`. Renders a screen-reader-only label by default so the
+ * column is announced to assistive tech while staying visually empty; pass
+ * `children` to render an "expand all" control instead.
+ *
+ * @see https://mantle.ngrok.com/components/data-table#datatableexpandheader
+ *
+ * @example
+ * ```tsx
+ * columnHelper.display({
+ *   id: "expander",
+ *   header: () => <DataTable.ExpandHeader />,
+ *   cell: (props) => (
+ *     <DataTable.Cell className="w-9 px-0 text-center">
+ *       <DataTable.RowExpandButton row={props.row} label={props.row.original.name} />
+ *     </DataTable.Cell>
+ *   ),
+ * });
+ * ```
+ */
+declare function ExpandHeader({
+  children,
+  className,
+  ...props
+}: DataTableExpandHeaderProps): import("react").JSX.Element;
+declare namespace ExpandHeader {
+  var displayName: string;
+}
+type DataTableRowExpandButtonProps<TData> = Omit<ComponentProps<typeof IconButton>, "aria-controls" | "aria-expanded" | "icon" | "label"> & {
+  /**
+   * The TanStack Table row this button toggles. The table must be configured for
+   * expansion (`getExpandedRowModel`, plus `getRowCanExpand: () => true` for
+   * custom detail panels, which have no sub-rows).
+   */
+  row: Row<TData>;
+  /**
+   * A human-readable name for the row, woven into the accessible label:
+   * `Show details for {label}` / `Hide details for {label}`.
+   */
+  label: string;
+  /**
+   * Icon shown while the row is collapsed (activating it expands the row).
+   * @default <PlusIcon weight="bold" />
+   */
+  expandIcon?: ReactNode;
+  /**
+   * Icon shown while the row is expanded (activating it collapses the row).
+   * @default <MinusIcon weight="bold" />
+   */
+  collapseIcon?: ReactNode;
+};
+/**
+ * An accessible +/- toggle that expands or collapses a row's detail panel. Drop
+ * it inside a `DataTable.Cell` in a leading `columnHelper.display` column and
+ * pair it with `DataTable.ExpandedRow`.
+ *
+ * Renders a real `<button>` (keyboard operable) that sets `aria-expanded` and,
+ * while expanded, `aria-controls` pointing at the `DataTable.ExpandedRow`. It
+ * stops click propagation so it never triggers a row-level `onClick` (e.g. row
+ * navigation), and renders nothing when `row.getCanExpand()` is false so a
+ * `getRowCanExpand` predicate cleanly hides it. Forwards `IconButton` props, so
+ * pass `onClick` to run side effects before the toggle (call
+ * `event.preventDefault()` to veto it).
+ *
+ * @see https://mantle.ngrok.com/components/data-table#datatablerowexpandbutton
+ *
+ * @example
+ * ```tsx
+ * columnHelper.display({
+ *   id: "expander",
+ *   header: () => <DataTable.ExpandHeader />,
+ *   cell: (props) => (
+ *     <DataTable.Cell className="w-9 px-0 text-center">
+ *       <DataTable.RowExpandButton row={props.row} label={props.row.original.name} />
+ *     </DataTable.Cell>
+ *   ),
+ * });
+ * ```
+ */
+declare function RowExpandButton<TData>({
+  appearance,
+  className,
+  collapseIcon,
+  expandIcon,
+  label,
+  onClick,
+  row,
+  size,
+  ...props
+}: DataTableRowExpandButtonProps<TData>): import("react").JSX.Element | null;
+declare namespace RowExpandButton {
+  var displayName: string;
+}
+type DataTableExpandedRowProps<TData> = Omit<ComponentProps<typeof Table$1.Row>, "children"> & {
+  /** The row whose detail panel this displays. */row: Row<TData>;
+  /**
+   * Override the cell's `colSpan`. Defaults to the row's visible-cell count so
+   * the panel spans every visible column (visibility- and pinning-aware).
+   */
+  colSpan?: number; /** The detail content rendered inside the full-width panel. */
+  children: ReactNode;
+};
+/**
+ * The sibling `<tr>` that renders a row's expanded detail panel. For the common
+ * case, prefer `DataTable.Row`'s `renderExpanded` prop, which renders this for
+ * you. Reach for `ExpandedRow` directly when you need full control — a custom
+ * `colSpan`, multiple panels, or bespoke markup. Render it directly after the
+ * parent `DataTable.Row` — wrapped in a `Fragment`, never a DOM element (a node
+ * between `<tbody>` and `<tr>` is invalid HTML) — and only when
+ * `row.getIsExpanded()` is true.
+ *
+ * The single cell spans every visible column (override with `colSpan`), carries
+ * the `id` that `DataTable.RowExpandButton` targets via `aria-controls`, and
+ * sits on an opaque card surface so horizontally-scrolled content never shows
+ * through a sticky action column. Its top divider is suppressed so it reads as
+ * one block with its parent row; the panel itself does not change on hover (only
+ * the parent data row reacts to hover). Exposes `data-expanded-content` for
+ * styling hooks.
+ *
+ * @see https://mantle.ngrok.com/components/data-table#datatableexpandedrow
+ *
+ * @example
+ * Render the row's underlying object as JSON (a common detail-panel use case).
+ * `jsonCodeBlockValue` highlights the JSON entirely on the client — no Shiki
+ * runtime, no build-time plugin, no server roundtrip — so it works for runtime
+ * data and matches server/build-time highlighting:
+ * ```tsx
+ * import { CodeBlock, jsonCodeBlockValue } from "@ngrok/mantle/code-block";
+ * import { Fragment } from "react";
+ *
+ * {table.getRowModel().rows.map((row) => (
+ *   <Fragment key={row.id}>
+ *     <DataTable.Row row={row} />
+ *     {row.getIsExpanded() && (
+ *       <DataTable.ExpandedRow row={row}>
+ *         <CodeBlock.Root>
+ *           <CodeBlock.Body>
+ *             <CodeBlock.CopyButton />
+ *             <CodeBlock.Code value={jsonCodeBlockValue(row.original)} />
+ *           </CodeBlock.Body>
+ *         </CodeBlock.Root>
+ *       </DataTable.ExpandedRow>
+ *     )}
+ *   </Fragment>
+ * ))}
+ * ```
+ */
+declare function ExpandedRow<TData>({
+  children,
+  className,
+  colSpan,
+  row,
+  ...props
+}: DataTableExpandedRowProps<TData>): import("react").JSX.Element;
+declare namespace ExpandedRow {
+  var displayName: string;
+}
 /**
  * Use `DataTable` for INTERACTIVE tabular data — sorting, filtering, pagination,
  * row selection, and server-side or client-side data. Built on TanStack Table;
@@ -376,13 +605,16 @@ declare namespace ActionHeader {
  * DataTable.Root
  * ├── DataTable.Head
  * │   └── DataTable.Row
+ * │       ├── DataTable.ExpandHeader
  * │       ├── DataTable.Header
  * │       │   └── DataTable.HeaderSortButton
  * │       └── DataTable.ActionHeader
  * └── DataTable.Body
  *     ├── DataTable.Row
  *     │   ├── DataTable.Cell
+ *     │   │   └── DataTable.RowExpandButton
  *     │   └── DataTable.ActionCell
+ *     ├── DataTable.ExpandedRow
  *     └── DataTable.EmptyRow
  * ```
  *
@@ -871,22 +1103,105 @@ declare const DataTable: {
    * Pass a different `cursor-*` class via `className` to override. For keyboard
    * and screen-reader access, also render a `<Link>` inside the primary cell.
    *
+   * Pass `renderExpanded` to give the row an inline detail panel — the row then
+   * renders a sibling `DataTable.ExpandedRow` (only while expanded) holding the
+   * returned content. Pair with `DataTable.RowExpandButton`.
+   *
    * @see https://mantle.ngrok.com/components/data-table#datatablerow
    *
    * @example
    * ```tsx
-   * const navigate = useNavigate();
+   * import { CodeBlock, jsonCodeBlockValue } from "@ngrok/mantle/code-block";
    *
    * {rows.map((row) => (
    *   <DataTable.Row
    *     key={row.id}
    *     row={row}
-   *     onClick={() => navigate(href("/payments/:id", { id: row.original.id }))}
+   *     renderExpanded={(row) => (
+   *       <CodeBlock.Root>
+   *         <CodeBlock.Body>
+   *           <CodeBlock.CopyButton />
+   *           <CodeBlock.Code value={jsonCodeBlockValue(row.original)} />
+   *         </CodeBlock.Body>
+   *       </CodeBlock.Root>
+   *     )}
    *   />
    * ))}
    * ```
    */
   readonly Row: typeof Row$1;
+  /**
+   * A narrow `<th>` for the leading expand-toggle column, mirroring
+   * `DataTable.ActionHeader`. Renders a screen-reader-only label by default so
+   * the column is announced while staying visually empty.
+   *
+   * @see https://mantle.ngrok.com/components/data-table#datatableexpandheader
+   *
+   * @example
+   * ```tsx
+   * columnHelper.display({
+   *   id: "expander",
+   *   header: () => <DataTable.ExpandHeader />,
+   *   cell: (props) => (
+   *     <DataTable.Cell className="w-9 px-0 text-center">
+   *       <DataTable.RowExpandButton row={props.row} label={props.row.original.name} />
+   *     </DataTable.Cell>
+   *   ),
+   * });
+   * ```
+   */
+  readonly ExpandHeader: typeof ExpandHeader;
+  /**
+   * An accessible +/- toggle that expands or collapses a row's detail panel.
+   * Place it inside a `DataTable.Cell` in a leading `columnHelper.display`
+   * column and pair it with `DataTable.ExpandedRow`. Sets `aria-expanded` and
+   * (while expanded) `aria-controls`, stops click propagation so it never fires
+   * a row-level `onClick`, and renders nothing when `row.getCanExpand()` is
+   * false.
+   *
+   * @see https://mantle.ngrok.com/components/data-table#datatablerowexpandbutton
+   *
+   * @example
+   * ```tsx
+   * <DataTable.Cell className="w-9 px-0 text-center">
+   *   <DataTable.RowExpandButton row={props.row} label={props.row.original.name} />
+   * </DataTable.Cell>
+   * ```
+   */
+  readonly RowExpandButton: typeof RowExpandButton;
+  /**
+   * The sibling `<tr>` that renders a row's expanded detail panel. Render it
+   * directly after the parent `DataTable.Row` (wrapped in a `Fragment`, never a
+   * DOM element) and only when `row.getIsExpanded()` is true. Spans every
+   * visible column, carries the `id` that `DataTable.RowExpandButton` targets,
+   * and sits on an opaque card surface so it coexists with a sticky action
+   * column.
+   *
+   * @see https://mantle.ngrok.com/components/data-table#datatableexpandedrow
+   *
+   * @example
+   * ```tsx
+   * import { CodeBlock, jsonCodeBlockValue } from "@ngrok/mantle/code-block";
+   * import { Fragment } from "react";
+   *
+   * {table.getRowModel().rows.map((row) => (
+   *   <Fragment key={row.id}>
+   *     <DataTable.Row row={row} />
+   *     {row.getIsExpanded() && (
+   *       <DataTable.ExpandedRow row={row}>
+   *         <CodeBlock.Root>
+   *           <CodeBlock.Body>
+   *             <CodeBlock.CopyButton />
+   *             <CodeBlock.Code value={jsonCodeBlockValue(row.original)} />
+   *           </CodeBlock.Body>
+   *         </CodeBlock.Root>
+   *       </DataTable.ExpandedRow>
+   *     )}
+   *   </Fragment>
+   * ))}
+   * ```
+   */
+  readonly ExpandedRow: typeof ExpandedRow;
 };
 //#endregion
-export { DataTable };
+export { DataTable, expandedRowId };

package/dist/data-table.js

@@ -1 +1 @@
-import{t as e}from"./cx-CBSnSC36.js";import{t}from"./button-BfMn3PgP.js";import{i as n}from"./direction-Wa9W2F61.js";import{t as r}from"./sort-BPX2Fk9t.js";import{t as i}from"./table-DWy_oNta.js";import{Fragment as a,createContext as o,forwardRef as s,useContext as c,useMemo as l}from"react";import u from"tiny-invariant";import{jsx as d,jsxs as f}from"react/jsx-runtime";import{flexRender as p}from"@tanstack/react-table";export*from"@tanstack/react-table";const m=[`unsorted`,`asc`,`desc`],h=[`unsorted`,`desc`,`asc`];function g(e,t){return _(t===`alphanumeric`?m:h,e)??`unsorted`}function _(e,t,n){if(e.length===0)return n;let r=e.findIndex(e=>e===t);if(r===-1)return n;let i=(r+1)%e.length;return e.at(i)??n}const v=o(null);function y(){let e=c(v);return u(e,`useDataTableContext should only be used within a DataTable child component`),e}function b({children:e,table:t,...n}){let r=l(()=>({table:t}),[t]);return d(v.Provider,{value:r,children:d(i.Root,{"data-slot":`data-table`,...n,children:d(i.Element,{children:e})})})}function x({children:r,className:i,column:a,disableSorting:o=!1,iconPlacement:s=`end`,sortingMode:c,sortIcon:l,onClick:u,...p}){let m=a.getIsSorted(),h=!o&&a.getCanSort(),g=h&&typeof m==`string`?m:`unsorted`,_=l?.(g)??d(j,{mode:c,direction:g});return f(t,{appearance:`ghost`,"data-slot":`data-table-header-sort-button`,className:e(`flex justify-start w-full h-full rounded-none not-disabled:active:scale-none text-muted`,i),"data-sort-direction":g,"data-table-header-action":!0,icon:_,iconPlacement:s,onClick:e=>{u?.(e),!e.defaultPrevented&&(!h||o||c===void 0||M(a,c))},priority:`neutral`,type:`button`,...p,children:[h&&g!==`unsorted`&&f(`span`,{className:`sr-only`,children:[`Column sorted in`,` `,c===`alphanumeric`?g===`asc`?`ascending`:`descending`:n(g),` `,`order`]}),r]})}function S({children:t,className:n,...r}){return d(i.Header,{"data-slot":`data-table-header`,className:e(`has-data-table-header-action:px-0`,n),...r,children:t})}const C=s((e,t)=>d(i.Body,{ref:t,"data-slot":`data-table-body`,...e}));C.displayName=`DataTableBody`;function w(e){let{table:t}=y();return d(i.Head,{"data-slot":`data-table-head`,...e,children:t.getHeaderGroups().map(e=>d(i.Row,{children:e.headers.map(e=>d(a,{children:e.isPlaceholder?d(i.Header,{},e.id):p(e.column.columnDef.header,e.getContext())},e.id))},e.id))})}function T({className:t,row:n,...r}){return d(i.Row,{"data-slot":`data-table-row`,className:e(r.onClick&&`cursor-pointer`,t),...r,children:n.getVisibleCells().map(e=>d(a,{children:p(e.column.columnDef.cell,e.getContext())},e.id))})}function E({children:e,...t}){let{table:n}=y(),r=n.getAllColumns().length;return d(i.Row,{"data-slot":`data-table-empty-row`,...t,children:d(i.Cell,{colSpan:r,children:e})})}function D(){return d(`span`,{"aria-hidden":!0,className:e(`pointer-events-none absolute -inset-y-px -left-1.5 w-1.5`,`opacity-0 transition-opacity group-data-sticky-active/table:opacity-100`,`shadow-[1px_0_0_0_var(--border-color-card-muted)]`,`bg-linear-to-l to-transparent`,`from-[color-mix(in_oklab,var(--shadow-color)_var(--shadow-second-opacity),transparent)]`)})}function O({children:t,className:n,...r}){return f(i.Cell,{"data-mantle-table-sticky-right":!0,"data-slot":`data-table-action-cell`,className:e(`sticky z-10 right-0 text-end align-middle bg-inherit p-2`,n),...r,children:[d(D,{}),t]})}function k({children:t,className:n,...r}){let{table:a}=y(),o=a.getRowModel().rows.length>0;return f(i.Header,{...o?{"data-mantle-table-sticky-right":!0}:{},"data-slot":`data-table-action-header`,className:e(o&&`sticky z-10 right-0 bg-inherit`,n),...r,children:[o&&d(D,{}),t]})}b.displayName=`DataTable`,O.displayName=`DataTableActionCell`,k.displayName=`DataTableActionHeader`,C.displayName=`DataTableBody`,E.displayName=`DataTableEmptyRow`,w.displayName=`DataTableHead`,S.displayName=`DataTableHeader`,x.displayName=`DataTableHeaderSortButton`,T.displayName=`DataTableRow`;const A={Root:b,ActionCell:O,ActionHeader:k,Cell:i.Cell,Body:C,EmptyRow:E,Head:w,Header:S,HeaderSortButton:x,Row:T};function j({direction:e,mode:t,...n}){return e===`unsorted`||!t||!e?d(`svg`,{"aria-hidden":!0,...n}):d(r,{mode:t,direction:e,...n})}function M(e,t){if(!e.getCanSort())return;let n=e.getIsSorted();switch(g(typeof n==`string`?n:`unsorted`,t)){case`unsorted`:e.clearSorting();return;case`asc`:e.toggleSorting(!1);return;case`desc`:e.toggleSorting(!0);return;default:return}}export{A as DataTable};
+import{t as e}from"./cx-CBSnSC36.js";import{t}from"./icon-button-DUNHVWpb.js";import{t as n}from"./button-BfMn3PgP.js";import{i as r}from"./direction-Wa9W2F61.js";import{t as i}from"./sort-BPX2Fk9t.js";import{t as a}from"./table-DWy_oNta.js";import{Fragment as o,createContext as s,forwardRef as c,useContext as l,useMemo as u}from"react";import d from"tiny-invariant";import{Fragment as f,jsx as p,jsxs as m}from"react/jsx-runtime";import{flexRender as h}from"@tanstack/react-table";import{MinusIcon as g}from"@phosphor-icons/react/Minus";import{PlusIcon as _}from"@phosphor-icons/react/Plus";export*from"@tanstack/react-table";const v=[`unsorted`,`asc`,`desc`],y=[`unsorted`,`desc`,`asc`];function b(e,t){return x(t===`alphanumeric`?v:y,e)??`unsorted`}function x(e,t,n){if(e.length===0)return n;let r=e.findIndex(e=>e===t);if(r===-1)return n;let i=(r+1)%e.length;return e.at(i)??n}const S=s(null);function C(){let e=l(S);return d(e,`useDataTableContext should only be used within a DataTable child component`),e}function w({children:e,table:t,...n}){let r=u(()=>({table:t}),[t]);return p(S.Provider,{value:r,children:p(a.Root,{"data-slot":`data-table`,...n,children:p(a.Element,{children:e})})})}function T({children:t,className:i,column:a,disableSorting:o=!1,iconPlacement:s=`end`,sortingMode:c,sortIcon:l,onClick:u,...d}){let f=a.getIsSorted(),h=!o&&a.getCanSort(),g=h&&typeof f==`string`?f:`unsorted`,_=l?.(g)??p(V,{mode:c,direction:g});return m(n,{appearance:`ghost`,"data-slot":`data-table-header-sort-button`,className:e(`flex justify-start w-full h-full rounded-none not-disabled:active:scale-none text-muted`,i),"data-sort-direction":g,"data-table-header-action":!0,icon:_,iconPlacement:s,onClick:e=>{u?.(e),!e.defaultPrevented&&(!h||o||c===void 0||H(a,c))},priority:`neutral`,type:`button`,...d,children:[h&&g!==`unsorted`&&m(`span`,{className:`sr-only`,children:[`Column sorted in`,` `,c===`alphanumeric`?g===`asc`?`ascending`:`descending`:r(g),` `,`order`]}),t]})}function E({children:t,className:n,...r}){return p(a.Header,{"data-slot":`data-table-header`,className:e(`has-data-table-header-action:px-0`,n),...r,children:t})}const D=c((e,t)=>p(a.Body,{ref:t,"data-slot":`data-table-body`,...e}));D.displayName=`DataTableBody`;function O(e){let{table:t}=C();return p(a.Head,{"data-slot":`data-table-head`,...e,children:t.getHeaderGroups().map(e=>p(a.Row,{children:e.headers.map(e=>p(o,{children:e.isPlaceholder?p(a.Header,{},e.id):h(e.column.columnDef.header,e.getContext())},e.id))},e.id))})}function k({className:t,renderExpanded:n,row:r,...i}){let s=p(a.Row,{"data-slot":`data-table-row`,"data-expanded":r.getIsExpanded()||void 0,className:e(i.onClick&&`cursor-pointer`,t),...i,children:r.getVisibleCells().map(e=>p(o,{children:h(e.column.columnDef.cell,e.getContext())},e.id))});return n==null?s:m(f,{children:[s,r.getIsExpanded()&&p(z,{row:r,children:n(r)})]})}function A({children:e,...t}){let{table:n}=C(),r=n.getAllColumns().length;return p(a.Row,{"data-slot":`data-table-empty-row`,...t,children:p(a.Cell,{colSpan:r,children:e})})}function j(){return p(`span`,{"aria-hidden":!0,className:e(`pointer-events-none absolute -inset-y-px -left-1.5 w-1.5`,`opacity-0 transition-opacity group-data-sticky-active/table:opacity-100`,`shadow-[1px_0_0_0_var(--border-color-card-muted)]`,`bg-linear-to-l to-transparent`,`from-[color-mix(in_oklab,var(--shadow-color)_var(--shadow-second-opacity),transparent)]`)})}function M({children:t,className:n,...r}){return m(a.Cell,{"data-mantle-table-sticky-right":!0,"data-slot":`data-table-action-cell`,className:e(`sticky z-10 right-0 text-end align-middle bg-inherit p-2`,n),...r,children:[p(j,{}),t]})}function N({children:t,className:n,...r}){let{table:i}=C(),o=i.getRowModel().rows.length>0;return m(a.Header,{...o?{"data-mantle-table-sticky-right":!0}:{},"data-slot":`data-table-action-header`,className:e(o&&`sticky z-10 right-0 bg-inherit`,n),...r,children:[o&&p(j,{}),t]})}function P(e){return`data-table-expanded-row-${encodeURIComponent(e.id)}`}function F({children:t,className:n,...r}){return p(a.Header,{"data-slot":`data-table-expand-header`,className:e(`w-9 px-0 text-center`,n),...r,children:t??p(`span`,{className:`sr-only`,children:`Row details`})})}const I=p(_,{weight:`bold`,className:`size-3.5`}),L=p(g,{weight:`bold`,className:`size-3.5`});function R({appearance:n=`ghost`,className:r,collapseIcon:i=L,expandIcon:a=I,label:o,onClick:s,row:c,size:l=`sm`,...u}){if(!c.getCanExpand())return null;let d=c.getIsExpanded(),f=c.getToggleExpandedHandler();return p(t,{type:`button`,"data-slot":`data-table-row-expand-button`,appearance:n,size:l,className:e(`rounded`,r),"aria-expanded":d,"aria-controls":d?P(c):void 0,icon:d?i:a,label:`${d?`Hide`:`Show`} details for ${o}`,onClick:e=>{e.stopPropagation(),s?.(e),!e.defaultPrevented&&f()},...u})}function z({children:t,className:n,colSpan:r,row:i,...o}){return p(a.Row,{"data-slot":`data-table-expanded-row`,"data-expanded-content":!0,className:e(`[&>td]:border-t-0`,n),...o,children:p(a.Cell,{id:P(i),colSpan:r??i.getVisibleCells().length,className:`bg-card font-sans text-body`,children:t})})}w.displayName=`DataTable`,M.displayName=`DataTableActionCell`,N.displayName=`DataTableActionHeader`,D.displayName=`DataTableBody`,A.displayName=`DataTableEmptyRow`,F.displayName=`DataTableExpandHeader`,z.displayName=`DataTableExpandedRow`,O.displayName=`DataTableHead`,E.displayName=`DataTableHeader`,T.displayName=`DataTableHeaderSortButton`,k.displayName=`DataTableRow`,R.displayName=`DataTableRowExpandButton`;const B={Root:w,ActionCell:M,ActionHeader:N,Cell:a.Cell,Body:D,EmptyRow:A,Head:O,Header:E,HeaderSortButton:T,Row:k,ExpandHeader:F,RowExpandButton:R,ExpandedRow:z};function V({direction:e,mode:t,...n}){return e===`unsorted`||!t||!e?p(`svg`,{"aria-hidden":!0,...n}):p(i,{mode:t,direction:e,...n})}function H(e,t){if(!e.getCanSort())return;let n=e.getIsSorted();switch(b(typeof n==`string`?n:`unsorted`,t)){case`unsorted`:e.clearSorting();return;case`asc`:e.toggleSorting(!1);return;case`desc`:e.toggleSorting(!0);return;default:return}}export{B as DataTable,P as expandedRowId};

package/dist/input.d.ts

@@ -68,7 +68,7 @@ type InputProps = Omit<InputHTMLAttributes<HTMLInputElement>, "autoComplete" | "
  * />
  * ```
  */
-declare const Input: import("react").ForwardRefExoticComponent<Omit<InputHTMLAttributes<HTMLInputElement>, "autoComplete" | "type"> & WithAutoComplete & WithInputType & WithValidation & {
+declare const Input: import("react").ForwardRefExoticComponent<Omit<InputHTMLAttributes<HTMLInputElement>, "type" | "autoComplete"> & WithAutoComplete & WithInputType & WithValidation & {
   children?: import("react").ReactNode | undefined;
 } & import("react").RefAttributes<HTMLInputElement>>;
 type InputCaptureProps = Omit<InputHTMLAttributes<HTMLInputElement>, "autoComplete" | "type"> & BaseProps;
@@ -86,7 +86,7 @@ type InputCaptureProps = Omit<InputHTMLAttributes<HTMLInputElement>, "autoComple
  * </Input>
  * ```
  */
-declare const InputCapture: import("react").ForwardRefExoticComponent<Omit<InputHTMLAttributes<HTMLInputElement>, "autoComplete" | "type"> & WithAutoComplete & WithInputType & WithValidation & import("react").RefAttributes<HTMLInputElement>>;
+declare const InputCapture: import("react").ForwardRefExoticComponent<Omit<InputHTMLAttributes<HTMLInputElement>, "type" | "autoComplete"> & WithAutoComplete & WithInputType & WithValidation & import("react").RefAttributes<HTMLInputElement>>;
 //#endregion
 //#region src/components/input/password-input.d.ts
 type PasswordInputProps = Omit<InputHTMLAttributes<HTMLInputElement>, "autoComplete" | "type"> & WithValidation & WithAutoComplete & {
@@ -158,7 +158,7 @@ type PasswordInputProps = Omit<InputHTMLAttributes<HTMLInputElement>, "autoCompl
  * }
  * ```
  */
-declare const PasswordInput: import("react").ForwardRefExoticComponent<Omit<InputHTMLAttributes<HTMLInputElement>, "autoComplete" | "type"> & WithValidation & WithAutoComplete & {
+declare const PasswordInput: import("react").ForwardRefExoticComponent<Omit<InputHTMLAttributes<HTMLInputElement>, "type" | "autoComplete"> & WithValidation & WithAutoComplete & {
   /**
    * Callback for when the visibility of the password value changes.
    */

package/dist/llms.txt

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

package/dist/resolve-pre-rendered-props-CF9-Qy2H.js

@@ -0,0 +1,12 @@
+import{t as e}from"./cx-CBSnSC36.js";import{t}from"./booleanish-BfvnW6vy.js";const n=new Set([`bash`,`sh`,`shell`]);function r(e,t){return!(n.has(e)&&!t.trim().includes(`
+`))}const i=Symbol(`MantleCodeBlockValue`);function a({preHtml:e,preValToken:t,preVals:n,highlightLines:r,lineNumberStart:a,showLineNumbers:o,code:s,language:c}){return{[i]:!0,language:c,code:s,"~preHtml":e,"~preValToken":t,"~preVals":n,"~highlightLines":r,"~lineNumberStart":a,"~showLineNumbers":o}}function o(e,t){let n=``;for(let r=0;r<e.length;r+=1)n+=e[r]??``,r<t.length&&(n+=String(t[r]));return n}function s(e,t={}){let{showLineNumbers:n,highlightLines:i,lineNumberStart:s}=t;return(t,...c)=>{let l=o(t,c);return a({language:e,code:l,preHtml:void 0,preVals:c.length>0?c:void 0,highlightLines:i,lineNumberStart:s,showLineNumbers:n??r(e,l)})}}function c(e){if(e.length<=1)return e;e.sort((e,t)=>e.startLine===t.startLine?t.endLine-e.endLine:e.startLine-t.startLine);let t=[],n=-1;for(let r of e)r.startLine!==n&&(t.push(r),n=r.startLine);return t}function l(e){let t=e.length;if(t===0)return[];let n=[],r=[],i=1,a=0;for(;a<t;){let o=e.charCodeAt(a);if(o===10){i+=1,a+=1;continue}if(o===13){i+=1,a+=1,a<t&&e.charCodeAt(a)===10&&(a+=1);continue}if(o===34){for(a+=1;a<t;){let t=e.charCodeAt(a);if(t===92){a+=2;continue}if(t===34){a+=1;break}if(t===10||t===13)break;a+=1}continue}if(o===123||o===91){n.push({opener:o,line:i}),a+=1;continue}if(o===125||o===93){let e=o===125?123:91,t=n[n.length-1];t?.opener===e?(n.pop(),t.line!==i&&r.push({id:String(t.line),startLine:t.line,endLine:i})):t!=null&&(n.length=0),a+=1;continue}a+=1}return c(r)}function u(...e){let t=new Set;for(let n of e)if(typeof n==`number`){if(!d(n))continue;let e=Math.floor(n);t.add(e)}else{let e=n.indexOf(`-`),r=n.slice(0,e),i=n.slice(e+1),a=Number.parseInt(r,10),o=Number.parseInt(i,10);if(!d(a)||!d(o)||(a>o&&([a,o]=[o,a]),o-a+1>1e3))continue;for(let e=a;e<=o;e++)t.add(e)}return t}const d=e=>e!=null&&!Number.isNaN(e)&&e>0&&Number.isFinite(e);function f(e){let t=e.length;for(;t>0&&(e.charCodeAt(t-1)===10||e.charCodeAt(t-1)===13);)--t;return t===e.length?e:e.slice(0,t)}function p(e){let t=f(e).replaceAll(`\r
+`,`
+`).replaceAll(`\r`,`
+`).split(`
+`);for(let e=0;e<t.length;e++){let n=t[e]??``;n.startsWith(`<span class="line">`)&&n.endsWith(`</span>`)&&(t[e]=n.slice(19,n.length-7))}return t}function m(e){return encodeURIComponent(e)}function h({foldableRanges:t,highlightLines:n,html:r,lineNumberStart:i=1,showLineNumbers:a=!1}){let o=u(...n??[]),s=p(r),c=new Map,l=new Map,d=t!=null&&t.length>0;if(d&&t!=null)for(let e of t){let t=m(e.id);c.set(e.startLine,t);for(let n=e.startLine+1;n<e.endLine;n+=1){let e=l.get(n);e??(e=[],l.set(n,e)),e.push(t)}}let f=``;for(let t=0;t<s.length;t++){let n=s[t]??``,r=t+1,u=i+t,p=d?c.get(r):void 0,m=e(`mantle-code-line`,o.has(u)&&`mantle-code-line-highlighted`,p!=null&&`mantle-code-line-opener`),h=a?`<span class="mantle-code-line-number" data-slot="line-number">${u}</span>`:``,g=``,_=``,v=``;if(d){p!=null&&(g=`<button type="button" class="mantle-code-fold-toggle" data-slot="fold-toggle" data-fold-line="${p}" aria-expanded="true" aria-label="Toggle code folding"><svg class="mantle-code-fold-caret" viewBox="0 0 16 16" aria-hidden="true" focusable="false"><path fill="currentColor" fill-rule="evenodd" d="M3.22 5.97a.75.75 0 0 1 1.06 0L8 9.69l3.72-3.72a.75.75 0 1 1 1.06 1.06l-4.25 4.25a.75.75 0 0 1-1.06 0L3.22 7.03a.75.75 0 0 1 0-1.06Z"/></svg></button>`,v=`<span class="mantle-code-fold-ellipsis" data-slot="fold-ellipsis" aria-hidden="true">⋯</span>`);let e=l.get(r);e!=null&&e.length>0&&(_=` data-fold-regions="${e.join(` `)}"`)}let y=`<span class="mantle-code-line-content" data-slot="line-content">${n===``?` `:n}${v}</span>`;f+=`<span class="${m}" data-line-number="${u}"${_}>${h}${g}${y}</span>`}return f}function g(e){switch(e){case`python`:case`py`:case`yaml`:case`yml`:return`indentation`;case`html`:case`xml`:return`tag`;case`bash`:case`sh`:case`shell`:case`plain`:case`plaintext`:case`text`:case`txt`:return`none`;default:return`bracket`}}function _({language:e,tokens:t}){switch(g(e)){case`bracket`:return S(t);case`indentation`:return w(t);case`tag`:return ee(t);case`none`:return[]}}function v(e){if(e.length===0)return!1;let t=e[e.length-1]?.scopeName??``;return t===`string`||t===`comment`||t.startsWith(`string.`)||t.startsWith(`comment.`)||t.startsWith(`constant.character.escape`)}function y(e){return e.explanation!=null&&e.explanation.length>0?e.explanation:[{content:e.content,scopes:[]}]}function b(e){let t=``;for(let n of e){let e=y(n),r=!1;for(let t of e)if(v(t.scopes)){r=!0;break}if(!r){t+=n.content;continue}for(let n of e)v(n.scopes)||(t+=n.content)}return t}function x(e){if(e==null||e.length===0)return-1;let t=0;for(let n of e){let e=n.content;for(let n=0;n<e.length;n+=1){let r=e.charCodeAt(n);if(r===32||r===9){t+=1;continue}return t}}return-1}function S(e){let t=[],n=[];for(let r=0;r<e.length;r+=1){let i=e[r];if(i==null)continue;let a=r+1;for(let e of i)if(C(e.content))for(let r of y(e)){if(v(r.scopes))continue;let e=r.content;for(let r=0;r<e.length;r+=1){let i=e.charCodeAt(r);if(i===123||i===91)t.push(a);else if(i===125||i===93){let e=t.pop();e!=null&&e!==a&&n.push({id:String(e),startLine:e,endLine:a})}}}}return c(n)}function C(e){for(let t=0;t<e.length;t+=1){let n=e.charCodeAt(t);if(n===123||n===125||n===91||n===93)return!0}return!1}function w(e){let t=Array.from({length:e.length});for(let n=0;n<e.length;n+=1)t[n]=x(e[n]);let n=[];for(let e=0;e<t.length;e+=1){let r=t[e]??-1;if(r<0)continue;let i=-1,a=e+1;for(;a<t.length;){let e=t[a]??-1;if(e<0){a+=1;continue}if(e>r){i=a,a+=1;continue}break}i>e&&n.push({id:String(e+1),startLine:e+1,endLine:i+2})}return c(n)}function ee(e){let t=[],n=[];for(let r=0;r<e.length;r+=1){let i=e[r];if(i==null)continue;let a=r+1,o=E(b(i));for(let e of o)if(e.kind===`open`)t.push({name:e.name,line:a});else{let r=t.length>0?t[t.length-1]:void 0;r!=null&&r.name.toLowerCase()===e.name.toLowerCase()&&(t.pop(),r.line!==a&&n.push({id:String(r.line),startLine:r.line,endLine:a}))}}return c(n)}const T=new Set([`area`,`base`,`br`,`col`,`embed`,`hr`,`img`,`input`,`link`,`meta`,`param`,`source`,`track`,`wbr`]);function E(e){let t=[],n=0;for(;n<e.length;){let r=e.indexOf(`<`,n);if(r===-1)break;let i=O(e,r+1),a=e.charCodeAt(i)===47;if(a&&(i=O(e,i+1)),!k(e.charCodeAt(i))){n=r+1;continue}let o=i;for(i+=1;i<e.length&&A(e.charCodeAt(i));)i+=1;let s=e.slice(o,i),c=j(e,i);if(c===-1){n=r+1;continue}if(a){t.push({name:s,kind:`close`}),n=c+1;continue}if(te(e,c)||T.has(s.toLowerCase())){n=c+1;continue}t.push({name:s,kind:`open`}),n=c+1}return t}function D(e){return e===9||e===10||e===11||e===12||e===13||e===32}function O(e,t){let n=t;for(;n<e.length&&D(e.charCodeAt(n));)n+=1;return n}function k(e){return e>=65&&e<=90||e>=97&&e<=122}function A(e){return k(e)||e>=48&&e<=57||e===45||e===58||e===95}function j(e,t){let n;for(let r=t;r<e.length;r+=1){let t=e.charCodeAt(r);if(n!=null){t===n&&(n=void 0);continue}if(t===34||t===39){n=t;continue}if(t===62)return r}return-1}function te(e,t){let n=t-1;for(;n>=0&&D(e.charCodeAt(n));)--n;return n>=0&&e.charCodeAt(n)===47}const ne=[`tabs`,`spaces`];function M(e){return ne.includes(e)}function re(e,t){return t||(F(e)?`tabs`:(I(e),`spaces`))}const N=new Set([`csharp`,`css`,`go`,`html`,`java`,`javascript`,`js`,`jsx`,`ts`,`tsx`,`typescript`,`xml`]),P=new Set([`python`,`py`,`yaml`,`yml`,`ruby`,`rb`]);function F(e){return N.has(e)}function I(e){return P.has(e)}function L(e,t){let n=t?.indentation??`spaces`,r=e.replace(/\r\n?/g,`
+`),i=r.trim();if(i===``)return``;let a=B(r),o=i.split(`
+`),s=Array.from({length:o.length});for(let e=0;e<o.length;e++){let t=o[e];t!=null&&(s[e]=R(z(t)?t:t.slice(a),n))}return s.join(`
+`)}function R(e,t){let n=0;for(;n<e.length;){let t=e[n];if(t!==` `&&t!==`	`)break;n+=1}if(n===0||n===e.length)return e;let r=e.slice(0,n);return(t===`spaces`?r.replace(/\t/g,`  `):r.replace(/ {2}/g,`	`))+e.slice(n)}function z(e){let t=e[0];return t!=null&&t!==` `&&t!==`	`}function B(e){let t=1/0,n=0,r=!0;for(let i=0;i<e.length;i++){let a=e[i];if(r){if(a===` `||a===`	`){n+=1;continue}if(a===`
+`||a===`\r`){n=0;continue}if(n<t&&(t=n,t===0))return 0;r=!1;continue}(a===`
+`||a===`\r`)&&(r=!0,n=0)}return t===1/0?0:t}const V=`bash.cs.csharp.css.go.html.java.javascript.js.json.jsx.plain.plaintext.py.python.rb.ruby.rust.sh.shell.text.ts.tsx.txt.typescript.xml.yaml.yml`.split(`.`),H=new Set(V),U=`text`;function W(e){let t=e?.trim()??``;if(!t)return U;let n=t.indexOf(`-`),r=n===-1?t:t.slice(n+1);return G(r)?r:U}const G=e=>typeof e==`string`&&H.has(e);function K(e){if(typeof e==`boolean`)return e;if(typeof e==`string`){if(e===`true`)return!0;if(e===`false`)return!1}}function q(e){if(typeof e==`number`&&Number.isFinite(e)&&e>0)return Math.floor(e);if(typeof e==`string`&&/^\d+$/.test(e)){let t=Number.parseInt(e,10);return t>0?t:void 0}}function J(e){if(typeof e==`number`)return Number.isFinite(e)&&e>0?Math.floor(e):void 0;if(typeof e==`string`){let t=e.trim();if(/^\d+$/.test(t)){let e=Number.parseInt(t,10);return e>0?e:void 0}if(/^\d+-\d+$/.test(t)){let[e,n]=t.split(`-`);return Number.parseInt(e??``,10)>0&&Number.parseInt(n??``,10)>0?t:void 0}}}function Y(e){if(typeof e==`string`){let t=[],n=e.split(`,`);for(let e of n){let n=J(e);n!=null&&t.push(n)}return t.length>0?t:void 0}if(!Array.isArray(e))return;let t=[];for(let n of e){let e=J(n);e!=null&&t.push(e)}return t.length>0?t:void 0}const X={collapsible:!1,disableCopy:!1,indentation:void 0,mode:void 0,title:void 0};function ie(e){let t=e?.trim()??``;if(!t)return X;let n={},r=Q(t);for(let e of r){let t=e.indexOf(`=`),r=t===-1?e:e.slice(0,t),i=t===-1?void 0:e.slice(t+1);r&&(n[r]=Z(i)??!0)}return oe(n)}function Z(e){if(e==null)return;let t=e.trim(),n=t.length-1;return n>=1&&t.charCodeAt(0)===34&&t.charCodeAt(n)===34?t.slice(1,n):t}function Q(e){let t=e?.trim()??``,n=[],r=``,i=!1;for(let e=0;e<t.length;e++){let a=t[e]??``;!i&&ae(a)?r&&=(n.push(r),``):(a===`"`&&(i=!i),r+=a)}return r&&n.push(r),n}function ae(e){return e===` `||e===`	`||e===`
+`||e===`\r`}function $(e){return e===`cli`||e===`file`||e===`traffic-policy`}function oe(e){let{collapsible:n=X.collapsible,disableCopy:r=X.disableCopy,indentation:i=X.indentation,mode:a=X.mode,title:o=X.title}=e;return{collapsible:typeof n==`string`||typeof n==`boolean`?t(n):X.collapsible,disableCopy:typeof r==`string`||typeof r==`boolean`?t(r):X.disableCopy,indentation:M(i)?i:X.indentation,mode:$(a)?a:X.mode,title:typeof o==`string`?o.trim():X.title}}function se(e){let{collapsible:n,disableCopy:r,mantleCode:i,mantleCollapsible:a,mantleDisableCopy:o,mantleHighlightLines:s,mantleLanguage:c,mantleLineNumberStart:l,mantleMode:u,mantlePreHtml:d,mantleShowLineNumbers:f,mantleTitle:p,mode:m,title:h,...g}=e;return c!=null||i!=null||d!=null||f!=null||s!=null||l!=null||a!=null||o!=null||u!=null||p!=null?{mantleCode:{code:typeof i==`string`?i:void 0,collapsible:(typeof a==`string`||typeof a==`boolean`?t(a):void 0)??(typeof n==`string`||typeof n==`boolean`?t(n):void 0),disableCopy:typeof o==`string`||typeof o==`boolean`?t(o):typeof r==`string`||typeof r==`boolean`?t(r):void 0,highlightLines:Y(s),language:typeof c==`string`&&G(c)?c:void 0,lineNumberStart:q(l),mode:$(u)?u:$(m)?m:void 0,preHtml:typeof d==`string`?d:void 0,rawLanguage:c,showLineNumbers:K(f),title:typeof p==`string`?p.trim():typeof h==`string`?h.trim():void 0},props:g}:{mantleCode:void 0,props:g}}export{s as S,h as _,Q as a,a as b,K as c,V as d,L as f,g,_ as h,se as i,G as l,M as m,Z as n,Y as o,re as p,ie as r,q as s,X as t,W as u,l as v,r as x,c as y};

package/dist/theme.d.ts

@@ -201,14 +201,14 @@ declare function useTheme(): ThemeProviderState;
  * Read the theme and applied theme from the `<html>` element.
  */
 declare function readThemeFromHtmlElement(): {
-  appliedTheme: "dark" | "light" | "light-high-contrast" | "dark-high-contrast" | undefined;
-  theme: "dark" | "light" | "system" | "light-high-contrast" | "dark-high-contrast" | undefined;
+  appliedTheme: "light" | "dark" | "light-high-contrast" | "dark-high-contrast" | undefined;
+  theme: "system" | "light" | "dark" | "light-high-contrast" | "dark-high-contrast" | undefined;
 };
 /**
  * If the theme is "system", it will resolve the theme based on the user's media query preferences, otherwise it will return the theme as is.
  * This will mirror the result that gets applied to the <html> element.
  */
-declare function useAppliedTheme(): "dark" | "light" | "light-high-contrast" | "dark-high-contrast";
+declare function useAppliedTheme(): "light" | "dark" | "light-high-contrast" | "dark-high-contrast";
 /**
  * determineThemeFromMediaQuery returns the theme that should be used based on the user's media query preferences.
  * @private

package/package.json

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

package/dist/resolve-pre-rendered-props-D9nlC6xE.js

@@ -1,12 +0,0 @@
-import{t as e}from"./cx-CBSnSC36.js";import{t}from"./booleanish-BfvnW6vy.js";const n=new Set([`bash`,`sh`,`shell`]);function r(e,t){return!(n.has(e)&&!t.trim().includes(`
-`))}const i=Symbol(`MantleCodeBlockValue`);function a({preHtml:e,preValToken:t,preVals:n,highlightLines:r,lineNumberStart:a,showLineNumbers:o,code:s,language:c}){return{[i]:!0,language:c,code:s,"~preHtml":e,"~preValToken":t,"~preVals":n,"~highlightLines":r,"~lineNumberStart":a,"~showLineNumbers":o}}function o(e,t){let n=``;for(let r=0;r<e.length;r+=1)n+=e[r]??``,r<t.length&&(n+=String(t[r]));return n}function s(e,t={}){let{showLineNumbers:n,highlightLines:i,lineNumberStart:s}=t;return(t,...c)=>{let l=o(t,c);return a({language:e,code:l,preHtml:void 0,preVals:c.length>0?c:void 0,highlightLines:i,lineNumberStart:s,showLineNumbers:n??r(e,l)})}}function c(...e){let t=new Set;for(let n of e)if(typeof n==`number`){if(!l(n))continue;let e=Math.floor(n);t.add(e)}else{let e=n.indexOf(`-`),r=n.slice(0,e),i=n.slice(e+1),a=Number.parseInt(r,10),o=Number.parseInt(i,10);if(!l(a)||!l(o)||(a>o&&([a,o]=[o,a]),o-a+1>1e3))continue;for(let e=a;e<=o;e++)t.add(e)}return t}const l=e=>e!=null&&!Number.isNaN(e)&&e>0&&Number.isFinite(e);function u(e){let t=e.length;for(;t>0&&(e.charCodeAt(t-1)===10||e.charCodeAt(t-1)===13);)--t;return t===e.length?e:e.slice(0,t)}function d(e){let t=u(e).replaceAll(`\r
-`,`
-`).replaceAll(`\r`,`
-`).split(`
-`);for(let e=0;e<t.length;e++){let n=t[e]??``;n.startsWith(`<span class="line">`)&&n.endsWith(`</span>`)&&(t[e]=n.slice(19,n.length-7))}return t}function f(e){return encodeURIComponent(e)}function p({foldableRanges:t,highlightLines:n,html:r,lineNumberStart:i=1,showLineNumbers:a=!1}){let o=c(...n??[]),s=d(r),l=new Map,u=new Map,p=t!=null&&t.length>0;if(p&&t!=null)for(let e of t){let t=f(e.id);l.set(e.startLine,t);for(let n=e.startLine+1;n<e.endLine;n+=1){let e=u.get(n);e??(e=[],u.set(n,e)),e.push(t)}}let m=``;for(let t=0;t<s.length;t++){let n=s[t]??``,r=t+1,c=i+t,d=p?l.get(r):void 0,f=e(`mantle-code-line`,o.has(c)&&`mantle-code-line-highlighted`,d!=null&&`mantle-code-line-opener`),h=a?`<span class="mantle-code-line-number" data-slot="line-number">${c}</span>`:``,g=``,_=``,v=``;if(p){d!=null&&(g=`<button type="button" class="mantle-code-fold-toggle" data-slot="fold-toggle" data-fold-line="${d}" aria-expanded="true" aria-label="Toggle code folding"><svg class="mantle-code-fold-caret" viewBox="0 0 16 16" aria-hidden="true" focusable="false"><path fill="currentColor" fill-rule="evenodd" d="M3.22 5.97a.75.75 0 0 1 1.06 0L8 9.69l3.72-3.72a.75.75 0 1 1 1.06 1.06l-4.25 4.25a.75.75 0 0 1-1.06 0L3.22 7.03a.75.75 0 0 1 0-1.06Z"/></svg></button>`,v=`<span class="mantle-code-fold-ellipsis" data-slot="fold-ellipsis" aria-hidden="true">⋯</span>`);let e=u.get(r);e!=null&&e.length>0&&(_=` data-fold-regions="${e.join(` `)}"`)}let y=`<span class="mantle-code-line-content" data-slot="line-content">${n===``?` `:n}${v}</span>`;m+=`<span class="${f}" data-line-number="${c}"${_}>${h}${g}${y}</span>`}return m}function m(e){if(e.length<=1)return e;e.sort((e,t)=>e.startLine===t.startLine?t.endLine-e.endLine:e.startLine-t.startLine);let t=[],n=-1;for(let r of e)r.startLine!==n&&(t.push(r),n=r.startLine);return t}function h(e){let t=e.length;if(t===0)return[];let n=[],r=[],i=1,a=0;for(;a<t;){let o=e.charCodeAt(a);if(o===10){i+=1,a+=1;continue}if(o===13){i+=1,a+=1,a<t&&e.charCodeAt(a)===10&&(a+=1);continue}if(o===34){for(a+=1;a<t;){let t=e.charCodeAt(a);if(t===92){a+=2;continue}if(t===34){a+=1;break}if(t===10||t===13)break;a+=1}continue}if(o===123||o===91){n.push({opener:o,line:i}),a+=1;continue}if(o===125||o===93){let e=o===125?123:91,t=n[n.length-1];t?.opener===e?(n.pop(),t.line!==i&&r.push({id:String(t.line),startLine:t.line,endLine:i})):t!=null&&(n.length=0),a+=1;continue}a+=1}return m(r)}function g(e){switch(e){case`python`:case`py`:case`yaml`:case`yml`:return`indentation`;case`html`:case`xml`:return`tag`;case`bash`:case`sh`:case`shell`:case`plain`:case`plaintext`:case`text`:case`txt`:return`none`;default:return`bracket`}}function _({language:e,tokens:t}){switch(g(e)){case`bracket`:return S(t);case`indentation`:return w(t);case`tag`:return ee(t);case`none`:return[]}}function v(e){if(e.length===0)return!1;let t=e[e.length-1]?.scopeName??``;return t===`string`||t===`comment`||t.startsWith(`string.`)||t.startsWith(`comment.`)||t.startsWith(`constant.character.escape`)}function y(e){return e.explanation!=null&&e.explanation.length>0?e.explanation:[{content:e.content,scopes:[]}]}function b(e){let t=``;for(let n of e){let e=y(n),r=!1;for(let t of e)if(v(t.scopes)){r=!0;break}if(!r){t+=n.content;continue}for(let n of e)v(n.scopes)||(t+=n.content)}return t}function x(e){if(e==null||e.length===0)return-1;let t=0;for(let n of e){let e=n.content;for(let n=0;n<e.length;n+=1){let r=e.charCodeAt(n);if(r===32||r===9){t+=1;continue}return t}}return-1}function S(e){let t=[],n=[];for(let r=0;r<e.length;r+=1){let i=e[r];if(i==null)continue;let a=r+1;for(let e of i)if(C(e.content))for(let r of y(e)){if(v(r.scopes))continue;let e=r.content;for(let r=0;r<e.length;r+=1){let i=e.charCodeAt(r);if(i===123||i===91)t.push(a);else if(i===125||i===93){let e=t.pop();e!=null&&e!==a&&n.push({id:String(e),startLine:e,endLine:a})}}}}return m(n)}function C(e){for(let t=0;t<e.length;t+=1){let n=e.charCodeAt(t);if(n===123||n===125||n===91||n===93)return!0}return!1}function w(e){let t=Array.from({length:e.length});for(let n=0;n<e.length;n+=1)t[n]=x(e[n]);let n=[];for(let e=0;e<t.length;e+=1){let r=t[e]??-1;if(r<0)continue;let i=-1,a=e+1;for(;a<t.length;){let e=t[a]??-1;if(e<0){a+=1;continue}if(e>r){i=a,a+=1;continue}break}i>e&&n.push({id:String(e+1),startLine:e+1,endLine:i+2})}return m(n)}function ee(e){let t=[],n=[];for(let r=0;r<e.length;r+=1){let i=e[r];if(i==null)continue;let a=r+1,o=E(b(i));for(let e of o)if(e.kind===`open`)t.push({name:e.name,line:a});else{let r=t.length>0?t[t.length-1]:void 0;r!=null&&r.name.toLowerCase()===e.name.toLowerCase()&&(t.pop(),r.line!==a&&n.push({id:String(r.line),startLine:r.line,endLine:a}))}}return m(n)}const T=new Set([`area`,`base`,`br`,`col`,`embed`,`hr`,`img`,`input`,`link`,`meta`,`param`,`source`,`track`,`wbr`]);function E(e){let t=[],n=0;for(;n<e.length;){let r=e.indexOf(`<`,n);if(r===-1)break;let i=O(e,r+1),a=e.charCodeAt(i)===47;if(a&&(i=O(e,i+1)),!k(e.charCodeAt(i))){n=r+1;continue}let o=i;for(i+=1;i<e.length&&A(e.charCodeAt(i));)i+=1;let s=e.slice(o,i),c=j(e,i);if(c===-1){n=r+1;continue}if(a){t.push({name:s,kind:`close`}),n=c+1;continue}if(te(e,c)||T.has(s.toLowerCase())){n=c+1;continue}t.push({name:s,kind:`open`}),n=c+1}return t}function D(e){return e===9||e===10||e===11||e===12||e===13||e===32}function O(e,t){let n=t;for(;n<e.length&&D(e.charCodeAt(n));)n+=1;return n}function k(e){return e>=65&&e<=90||e>=97&&e<=122}function A(e){return k(e)||e>=48&&e<=57||e===45||e===58||e===95}function j(e,t){let n;for(let r=t;r<e.length;r+=1){let t=e.charCodeAt(r);if(n!=null){t===n&&(n=void 0);continue}if(t===34||t===39){n=t;continue}if(t===62)return r}return-1}function te(e,t){let n=t-1;for(;n>=0&&D(e.charCodeAt(n));)--n;return n>=0&&e.charCodeAt(n)===47}const ne=[`tabs`,`spaces`];function M(e){return ne.includes(e)}function re(e,t){return t||(F(e)?`tabs`:(I(e),`spaces`))}const N=new Set([`csharp`,`css`,`go`,`html`,`java`,`javascript`,`js`,`jsx`,`ts`,`tsx`,`typescript`,`xml`]),P=new Set([`python`,`py`,`yaml`,`yml`,`ruby`,`rb`]);function F(e){return N.has(e)}function I(e){return P.has(e)}function L(e,t){let n=t?.indentation??`spaces`,r=e.replace(/\r\n?/g,`
-`),i=r.trim();if(i===``)return``;let a=B(r),o=i.split(`
-`),s=Array.from({length:o.length});for(let e=0;e<o.length;e++){let t=o[e];t!=null&&(s[e]=R(z(t)?t:t.slice(a),n))}return s.join(`
-`)}function R(e,t){let n=0;for(;n<e.length;){let t=e[n];if(t!==` `&&t!==`	`)break;n+=1}if(n===0||n===e.length)return e;let r=e.slice(0,n);return(t===`spaces`?r.replace(/\t/g,`  `):r.replace(/ {2}/g,`	`))+e.slice(n)}function z(e){let t=e[0];return t!=null&&t!==` `&&t!==`	`}function B(e){let t=1/0,n=0,r=!0;for(let i=0;i<e.length;i++){let a=e[i];if(r){if(a===` `||a===`	`){n+=1;continue}if(a===`
-`||a===`\r`){n=0;continue}if(n<t&&(t=n,t===0))return 0;r=!1;continue}(a===`
-`||a===`\r`)&&(r=!0,n=0)}return t===1/0?0:t}const V=`bash.cs.csharp.css.go.html.java.javascript.js.json.jsx.plain.plaintext.py.python.rb.ruby.rust.sh.shell.text.ts.tsx.txt.typescript.xml.yaml.yml`.split(`.`),H=new Set(V),U=`text`;function W(e){let t=e?.trim()??``;if(!t)return U;let n=t.indexOf(`-`),r=n===-1?t:t.slice(n+1);return G(r)?r:U}const G=e=>typeof e==`string`&&H.has(e);function K(e){if(typeof e==`boolean`)return e;if(typeof e==`string`){if(e===`true`)return!0;if(e===`false`)return!1}}function q(e){if(typeof e==`number`&&Number.isFinite(e)&&e>0)return Math.floor(e);if(typeof e==`string`&&/^\d+$/.test(e)){let t=Number.parseInt(e,10);return t>0?t:void 0}}function J(e){if(typeof e==`number`)return Number.isFinite(e)&&e>0?Math.floor(e):void 0;if(typeof e==`string`){let t=e.trim();if(/^\d+$/.test(t)){let e=Number.parseInt(t,10);return e>0?e:void 0}if(/^\d+-\d+$/.test(t)){let[e,n]=t.split(`-`);return Number.parseInt(e??``,10)>0&&Number.parseInt(n??``,10)>0?t:void 0}}}function Y(e){if(typeof e==`string`){let t=[],n=e.split(`,`);for(let e of n){let n=J(e);n!=null&&t.push(n)}return t.length>0?t:void 0}if(!Array.isArray(e))return;let t=[];for(let n of e){let e=J(n);e!=null&&t.push(e)}return t.length>0?t:void 0}const X={collapsible:!1,disableCopy:!1,indentation:void 0,mode:void 0,title:void 0};function ie(e){let t=e?.trim()??``;if(!t)return X;let n={},r=Q(t);for(let e of r){let t=e.indexOf(`=`),r=t===-1?e:e.slice(0,t),i=t===-1?void 0:e.slice(t+1);r&&(n[r]=Z(i)??!0)}return oe(n)}function Z(e){if(e==null)return;let t=e.trim(),n=t.length-1;return n>=1&&t.charCodeAt(0)===34&&t.charCodeAt(n)===34?t.slice(1,n):t}function Q(e){let t=e?.trim()??``,n=[],r=``,i=!1;for(let e=0;e<t.length;e++){let a=t[e]??``;!i&&ae(a)?r&&=(n.push(r),``):(a===`"`&&(i=!i),r+=a)}return r&&n.push(r),n}function ae(e){return e===` `||e===`	`||e===`
-`||e===`\r`}function $(e){return e===`cli`||e===`file`||e===`traffic-policy`}function oe(e){let{collapsible:n=X.collapsible,disableCopy:r=X.disableCopy,indentation:i=X.indentation,mode:a=X.mode,title:o=X.title}=e;return{collapsible:typeof n==`string`||typeof n==`boolean`?t(n):X.collapsible,disableCopy:typeof r==`string`||typeof r==`boolean`?t(r):X.disableCopy,indentation:M(i)?i:X.indentation,mode:$(a)?a:X.mode,title:typeof o==`string`?o.trim():X.title}}function se(e){let{collapsible:n,disableCopy:r,mantleCode:i,mantleCollapsible:a,mantleDisableCopy:o,mantleHighlightLines:s,mantleLanguage:c,mantleLineNumberStart:l,mantleMode:u,mantlePreHtml:d,mantleShowLineNumbers:f,mantleTitle:p,mode:m,title:h,...g}=e;return c!=null||i!=null||d!=null||f!=null||s!=null||l!=null||a!=null||o!=null||u!=null||p!=null?{mantleCode:{code:typeof i==`string`?i:void 0,collapsible:(typeof a==`string`||typeof a==`boolean`?t(a):void 0)??(typeof n==`string`||typeof n==`boolean`?t(n):void 0),disableCopy:typeof o==`string`||typeof o==`boolean`?t(o):typeof r==`string`||typeof r==`boolean`?t(r):void 0,highlightLines:Y(s),language:typeof c==`string`&&G(c)?c:void 0,lineNumberStart:q(l),mode:$(u)?u:$(m)?m:void 0,preHtml:typeof d==`string`?d:void 0,rawLanguage:c,showLineNumbers:K(f),title:typeof p==`string`?p.trim():typeof h==`string`?h.trim():void 0},props:g}:{mantleCode:void 0,props:g}}export{s as S,h as _,Q as a,a as b,K as c,V as d,L as f,g,_ as h,se as i,G as l,M as m,Z as n,Y as o,re as p,ie as r,q as s,X as t,W as u,m as v,r as x,p as y};