@stainless-api/docs-ui 0.1.0-beta.71 → 0.1.0-beta.72

package/dist/{sdk-D3U444dU.d.ts → sdk-Dm0S-XQE.d.ts}

@@ -1,7 +1,7 @@
-import { c as ID, d as Method, f as Model, g as SnippetLanguage, o as HasStainlessPath, t as BaseDeclaration } from "./index-CwjGm9zX.js";
-import { t as DocsLanguage } from "./routing-utiR5mY3.js";
+import { c as ID, d as Method, f as Model, g as SnippetLanguage, o as HasStainlessPath, t as BaseDeclaration } from "./index-W4Td2Hl7.js";
+import { t as DocsLanguage } from "./routing-pAL4V4hv.js";
 import * as React$1 from "react";
-import * as react_jsx_runtime59 from "react/jsx-runtime";
+import * as react_jsx_runtime38 from "react/jsx-runtime";
 
 //#region src/components/sdk.d.ts
 type PropertyModelContextType = {
@@ -33,7 +33,7 @@ declare function SDKChildren({
   paths,
   expand,
   depth
-}: SDKChildrenProps): react_jsx_runtime59.JSX.Element;
+}: SDKChildrenProps): react_jsx_runtime38.JSX.Element;
 type SDKDeclarationProps = {
   path: string;
   expand?: boolean;
@@ -43,26 +43,26 @@ declare function SDKDeclaration({
   path,
   expand,
   depth
-}: SDKDeclarationProps): react_jsx_runtime59.JSX.Element;
+}: SDKDeclarationProps): react_jsx_runtime38.JSX.Element;
 type SDKConstraintsProps = {
-  constraints?: Record<string, any>;
+  constraints?: Record<string, unknown>;
 };
 declare function SDKConstraints({
   constraints
-}: SDKConstraintsProps): react_jsx_runtime59.JSX.Element | undefined;
+}: SDKConstraintsProps): react_jsx_runtime38.JSX.Element | undefined;
 type SDKIconProps = {
   language: SnippetLanguage;
   size?: number;
 };
 declare function SDKIcon({
   language
-}: SDKIconProps): react_jsx_runtime59.JSX.Element | null;
+}: SDKIconProps): react_jsx_runtime38.JSX.Element | null;
 type SDKRequestTitleProps = {
   snippetLanguage: SnippetLanguage;
 };
 declare function SDKRequestTitle({
   snippetLanguage
-}: SDKRequestTitleProps): react_jsx_runtime59.JSX.Element;
+}: SDKRequestTitleProps): react_jsx_runtime38.JSX.Element;
 type SDKExampleProps = {
   method: Partial<Method> & HasStainlessPath;
   transformRequestSnippet?: TransformRequestSnippetFn;
@@ -70,31 +70,31 @@ type SDKExampleProps = {
 declare function SDKExample({
   method,
   transformRequestSnippet
-}: SDKExampleProps): react_jsx_runtime59.JSX.Element;
+}: SDKExampleProps): react_jsx_runtime38.JSX.Element;
 type SDKMethodProps = {
   method: Method;
   transformRequestSnippet?: TransformRequestSnippetFn;
 };
 declare function SDKMethodHeader({
   method
-}: SDKMethodProps): react_jsx_runtime59.JSX.Element;
+}: SDKMethodProps): react_jsx_runtime38.JSX.Element;
 declare function useStreamingResponse(method: BaseDeclaration): ID | undefined;
 declare function SDKMethodInfo({
   method
-}: SDKMethodProps): react_jsx_runtime59.JSX.Element;
+}: SDKMethodProps): react_jsx_runtime38.JSX.Element;
 declare function SDKMethodNotImplemented({
   method
-}: SDKMethodProps): react_jsx_runtime59.JSX.Element;
+}: SDKMethodProps): react_jsx_runtime38.JSX.Element;
 declare function SDKMethod({
   method,
   transformRequestSnippet
-}: SDKMethodProps): react_jsx_runtime59.JSX.Element;
+}: SDKMethodProps): react_jsx_runtime38.JSX.Element;
 type SDKModelProps = {
   model: Model;
 };
 declare function SDKModel({
   model
-}: SDKModelProps): react_jsx_runtime59.JSX.Element | null;
+}: SDKModelProps): react_jsx_runtime38.JSX.Element | null;
 type SDKReferenceProps = {
   stainlessPath: string;
   children?: React$1.ReactNode;
@@ -102,7 +102,7 @@ type SDKReferenceProps = {
 declare function SDKReference({
   stainlessPath,
   children
-}: SDKReferenceProps): string | number | bigint | boolean | Iterable<React$1.ReactNode> | Promise<string | number | bigint | boolean | React$1.ReactPortal | React$1.ReactElement<unknown, string | React$1.JSXElementConstructor<any>> | Iterable<React$1.ReactNode> | null | undefined> | react_jsx_runtime59.JSX.Element | null | undefined;
+}: SDKReferenceProps): string | number | bigint | boolean | Iterable<React$1.ReactNode> | Promise<string | number | bigint | boolean | React$1.ReactPortal | React$1.ReactElement<unknown, string | React$1.JSXElementConstructor<any>> | Iterable<React$1.ReactNode> | null | undefined> | react_jsx_runtime38.JSX.Element | null | undefined;
 type SDKLanguageBlockProps = {
   language: DocsLanguage;
   version: string;
@@ -117,6 +117,6 @@ declare function SDKLanguageBlock({
   version,
   install,
   links
-}: SDKLanguageBlockProps): react_jsx_runtime59.JSX.Element;
+}: SDKLanguageBlockProps): react_jsx_runtime38.JSX.Element;
 //#endregion
 export { SDKSnippetLanguagesType as C, useStreamingResponse as D, useReferenceNesting as E, SDKSnippetLanguages as S, usePropertyModel as T, SDKModel as _, SDKChildren as a, SDKRequestTitle as b, SDKDeclaration as c, SDKLanguageBlock as d, SDKMethod as f, SDKMethodProps as g, SDKMethodNotImplemented as h, ReferenceNestingContextType as i, SDKExample as l, SDKMethodInfo as m, PropertyModelContextType as n, SDKConstraints as o, SDKMethodHeader as p, ReferenceNestingContext as r, SDKConstraintsProps as s, PropertyModelContext as t, SDKIcon as u, SDKModelProps as v, TransformRequestSnippetFn as w, SDKRequestTitleProps as x, SDKReference as y };

package/dist/{sdk-sidebar-f7SS4xxq.d.ts → sdk-sidebar-B1ehT_xI.d.ts}

@@ -1,5 +1,5 @@
-import { m as Resource } from "./index-CwjGm9zX.js";
-import * as react_jsx_runtime43 from "react/jsx-runtime";
+import { m as Resource } from "./index-W4Td2Hl7.js";
+import * as react_jsx_runtime34 from "react/jsx-runtime";
 
 //#region src/components/sdk-sidebar.d.ts
 type SDKSidebarProps = {
@@ -10,6 +10,6 @@ type SDKSidebarProps = {
  */
 declare function SDKSidebar({
   resources
-}: SDKSidebarProps): react_jsx_runtime43.JSX.Element;
+}: SDKSidebarProps): react_jsx_runtime34.JSX.Element;
 //#endregion
 export { SDKSidebarProps as n, SDKSidebar as t };

package/dist/{sdk-sidebar-V_MTkVw8.js → sdk-sidebar-BDn8S1xS.js}

@@ -1,6 +1,6 @@
 import { n as useNavigation } from "./navigation-aoYZ_tl4.js";
 import { i as isResourceEmpty } from "./utils-DPbkW1Tz.js";
-import { t as StlSidebar } from "./stl-sidebar-WtimNrk1.js";
+import { t as StlSidebar } from "./stl-sidebar-DC5UOJiT.js";
 import * as React$1 from "react";
 import { jsx } from "react/jsx-runtime";
 import { Badge, getHttpMethod } from "@stainless-api/ui-primitives";

package/dist/{sdk-sidebar-Cf04O8rR.d.ts → sdk-sidebar-Dqeu7C1-.d.ts}

@@ -1,5 +1,5 @@
-import { m as Resource } from "./index-CwjGm9zX.js";
-import * as react_jsx_runtime58 from "react/jsx-runtime";
+import { m as Resource } from "./index-W4Td2Hl7.js";
+import * as react_jsx_runtime37 from "react/jsx-runtime";
 
 //#region src/components/sdk-sidebar.d.ts
 type SDKSidebarProps = {
@@ -10,6 +10,6 @@ type SDKSidebarProps = {
  */
 declare function SDKSidebar({
   resources
-}: SDKSidebarProps): react_jsx_runtime58.JSX.Element;
+}: SDKSidebarProps): react_jsx_runtime37.JSX.Element;
 //#endregion
 export { SDKSidebarProps as n, SDKSidebar as t };

package/dist/snippets-CLpNVNlA.js

@@ -0,0 +1,181 @@
+import { d as useSnippetIds, f as useSnippetResponse, i as useDeclaration, s as useLanguage, u as useSnippet } from "./docs-YgoQ3bzY.js";
+import { r as useHighlight } from "./markdown-Cq3XEhrR.js";
+import { t as useComponents } from "./use-components-BUz3GbO4.js";
+import { t as style_default } from "./style-DJIYkFhO.js";
+import * as React$1 from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import clsx from "clsx";
+import { CheckIcon, CircleAlertIcon, CopyIcon } from "lucide-react";
+import { Badge, Button, getHttpMethod } from "@stainless-api/ui-primitives";
+
+//#region src/components/snippets.tsx
+function SnippetCode({ content, language }) {
+	const lang = useLanguage();
+	const highlighted = useHighlight(content, language || lang);
+	return /* @__PURE__ */ jsx("div", {
+		className: style_default.SnippetCode,
+		"data-stldocs-copy-content": true,
+		dangerouslySetInnerHTML: { __html: highlighted }
+	});
+}
+function SnippetContainer({ children, className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: clsx(style_default.Snippet, className),
+		...props,
+		children
+	});
+}
+function SnippetRequestContainer({ children }) {
+	return /* @__PURE__ */ jsx("div", { children });
+}
+function Snippet({ requestTitle, method, snippet, transformRequestSnippet }) {
+	const Docs = useComponents();
+	const language = useLanguage();
+	const originalSnippetContent = useSnippet(method.stainlessPath, void 0, snippet);
+	const snippetResponses = useSnippetResponse(method.stainlessPath, snippet);
+	const decl = useDeclaration(method.stainlessPath, false);
+	const signature = decl && "qualified" in decl ? decl.qualified : void 0;
+	if (!originalSnippetContent) {
+		console.warn(`Snippet not found for method '${method.stainlessPath}'`);
+		return null;
+	}
+	const snippetContent = transformRequestSnippet ? transformRequestSnippet({
+		snippet: originalSnippetContent,
+		language
+	}) : originalSnippetContent;
+	const httpMethod = getHttpMethod(method.httpMethod);
+	return /* @__PURE__ */ jsxs(Docs.SnippetContainer, {
+		signature,
+		method,
+		children: [snippetContent && /* @__PURE__ */ jsx(Docs.SnippetRequestContainer, {
+			signature,
+			children: /* @__PURE__ */ jsxs("div", {
+				className: style_default.SnippetRequest,
+				"data-stldocs-copy-parent": true,
+				children: [
+					/* @__PURE__ */ jsxs("div", {
+						className: style_default.SnippetRequestTitle,
+						children: [
+							/* @__PURE__ */ jsxs("div", {
+								className: style_default.SnippetRequestTitleMethod,
+								children: [httpMethod && /* @__PURE__ */ jsx(Badge.HTTP, {
+									method: httpMethod,
+									iconOnly: true
+								}), /* @__PURE__ */ jsx("h3", { children: method.summary || method.title })]
+							}),
+							/* @__PURE__ */ jsx("div", {
+								className: style_default.SnippetRequestTitleContent,
+								children: requestTitle
+							}),
+							/* @__PURE__ */ jsx(Docs.SnippetButtons, { content: snippetContent })
+						]
+					}),
+					/* @__PURE__ */ jsx(Docs.SnippetCode, {
+						content: snippetContent,
+						signature
+					}),
+					/* @__PURE__ */ jsx(Docs.SnippetFooter, {})
+				]
+			})
+		}), /* @__PURE__ */ jsx(Docs.SnippetResponse, { responses: snippetResponses })]
+	});
+}
+function MultiSnippets({ requestTitle, method }) {
+	const snippetIds = useSnippetIds(method.stainlessPath)?.filter((id) => id !== "default");
+	const radioId = React$1.useId();
+	if (!snippetIds) return null;
+	return /* @__PURE__ */ jsxs("div", {
+		className: style_default.SnippetMulti,
+		"data-stldocs-multi-snippet-container": true,
+		children: [/* @__PURE__ */ jsx("div", {
+			className: style_default.SnippetMultiTabs,
+			"data-stldocs-multi-snippet-tabs": true,
+			children: snippetIds.map((snid, idx) => /* @__PURE__ */ jsxs("label", {
+				className: style_default.SnippetMultiTab,
+				children: [/* @__PURE__ */ jsx("input", {
+					type: "radio",
+					name: `snippet-example-radio-${radioId}`,
+					value: idx,
+					defaultChecked: idx === 0
+				}), /* @__PURE__ */ jsx("span", { children: snid.slice(7) })]
+			}, `snippet-example-${idx}`))
+		}), /* @__PURE__ */ jsx("div", {
+			className: style_default.SnippetMultiContent,
+			children: snippetIds.map((snid, idx) => {
+				return /* @__PURE__ */ jsx("div", {
+					className: clsx(style_default.SnippetMultiPane, idx === 0 && style_default.SnippetMultiPaneActive),
+					"data-stldocs-multi-snippet-id": idx,
+					children: /* @__PURE__ */ jsx(Snippet, {
+						method,
+						snippet: snid,
+						requestTitle
+					})
+				}, `snippet-example-content-${idx}`);
+			})
+		})]
+	});
+}
+function SnippetButtons({ content }) {
+	const [CopyButtonIcon, setCopyIcon] = React$1.useState(CopyIcon);
+	async function handleCopy() {
+		try {
+			await navigator.clipboard.writeText(content);
+			setCopyIcon(CheckIcon);
+		} catch {
+			setCopyIcon(CircleAlertIcon);
+		}
+		setTimeout(() => setCopyIcon(CopyIcon), 1e3);
+	}
+	return /* @__PURE__ */ jsx(Button, {
+		variant: "outline",
+		"data-stldocs-snippet-copy": true,
+		children: /* @__PURE__ */ jsx(CopyButtonIcon, {
+			size: 16,
+			className: style_default.Icon,
+			onClick: handleCopy
+		})
+	});
+}
+function SnippetFooter() {
+	return null;
+}
+function SnippetResponse({ responses }) {
+	const Docs = useComponents();
+	if (!responses || responses.length === 0) return null;
+	const tabs = responses.map(({ status }, index) => ({
+		status,
+		index,
+		label: status ? `${status} example` : null
+	}));
+	const hasTabs = tabs.length > 1 || tabs.some((tab) => tab.label);
+	return /* @__PURE__ */ jsx("div", {
+		className: style_default.SnippetMultiResponse,
+		children: /* @__PURE__ */ jsxs("div", {
+			className: clsx(style_default.Snippet),
+			children: [hasTabs && /* @__PURE__ */ jsx("div", {
+				className: clsx(style_default.SnippetResponseTab, tabs.length === 1 && style_default.SnippetResponseTabSingleReturn),
+				children: tabs.map(({ status, label }, index) => /* @__PURE__ */ jsx("div", {
+					"data-snippet-response-tab-id": `snippet-response-tab-${status}-${index}`,
+					className: clsx(style_default.SnippetResponseTabItem, index === 0 && style_default.SnippetResponseTabItemActive),
+					children: /* @__PURE__ */ jsx(Button, {
+						disabled: responses.length === 1,
+						variant: "ghost",
+						children: label ?? `Example ${index + 1}`
+					})
+				}, `snippet-response-tab-item-${status}-${index}`))
+			}), responses.map(({ status, content, contentType }, index) => {
+				return typeof content === "string" ? /* @__PURE__ */ jsx("div", {
+					className: clsx(style_default.SnippetResponsePane, index === 0 && style_default.SnippetResponsePaneActive),
+					"data-snippet-response-pane-id": `snippet-response-tab-${status}-${index}`,
+					children: /* @__PURE__ */ jsx(Docs.SnippetCode, {
+						content,
+						language: contentType === "application/json" || !contentType ? "json" : "none"
+					})
+				}, `snippet-response-${status}-${index}`) : null;
+			})]
+		})
+	});
+}
+
+//#endregion
+export { SnippetContainer as a, SnippetResponse as c, SnippetCode as i, Snippet as n, SnippetFooter as o, SnippetButtons as r, SnippetRequestContainer as s, MultiSnippets as t };

package/dist/spec.d.ts

@@ -1,5 +1,5 @@
-import { _ as Spec, d as Method, f as Model, i as DeclarationNode, m as Resource, v as SpecLanguage } from "./index-CwjGm9zX.js";
-import { t as DocsLanguage } from "./routing-utiR5mY3.js";
+import { _ as Spec, d as Method, f as Model, i as DeclarationNode, m as Resource, v as SpecLanguage } from "./index-W4Td2Hl7.js";
+import { t as DocsLanguage } from "./routing-pAL4V4hv.js";
 
 //#region src/spec.d.ts
 type SecurityScheme = Spec['security_schemes'][number];
@@ -36,13 +36,13 @@ declare function generateNavigation(resource: Partial<Resource>): {
 declare function generateSpecForResource(spec: Spec, name: string, lang: DocsLanguage, transforms: SpecTransforms): Partial<Spec>;
 declare function transform(spec: Spec, transforms: SpecTransforms): {
   name: string;
-  lang: "cli" | "csharp" | "go" | "http" | "java" | "kotlin" | "node" | "php" | "python" | "ruby" | "terraform" | "typescript";
+  lang: "http" | "node" | "python" | "go" | "typescript" | "terraform" | "ruby" | "java" | "kotlin" | "csharp" | "php" | "cli";
   spec: Partial<Spec>;
 }[];
 declare function split(spec: Spec, transforms?: SpecTransforms): {
   resources: ReturnType<typeof transform>;
   navigation: {
-    languages: ("go" | "http" | "java" | "kotlin" | "node" | "python" | "ruby" | "terraform" | "typescript")[] | undefined;
+    languages: ("http" | "node" | "python" | "go" | "typescript" | "terraform" | "ruby" | "java" | "kotlin")[] | undefined;
     resources: {
       [k: string]: {
         title: string | undefined;

package/dist/spec.js

@@ -99,7 +99,7 @@ function generateSpecForResource(spec, name, lang, transforms) {
 			fn: (snippets) => mapEntries({
 				input: snippets,
 				filter: (name) => name.startsWith(resource.stainlessPath),
-				fn: (snippet) => transforms.snippet(snippet, lang)
+				fn: (snippetObj) => Object.fromEntries(Object.entries(snippetObj).map(([key, snippet]) => [key, { content: transforms.snippet(snippet.content, lang) }]))
 			}) ?? {}
 		})
 	};

package/dist/{stl-sidebar-CItXFC3n.d.ts → stl-sidebar-BTTErIJs.d.ts}

@@ -1,5 +1,5 @@
 import { ReactNode } from "react";
-import * as react_jsx_runtime78 from "react/jsx-runtime";
+import * as react_jsx_runtime52 from "react/jsx-runtime";
 
 //#region src/components/stl-sidebar.d.ts
 declare module 'react' {
@@ -53,6 +53,6 @@ type StlSidebarProps = {
 declare function StlSidebar({
   entries,
   withStarlightRestoration
-}: StlSidebarProps): react_jsx_runtime78.JSX.Element;
+}: StlSidebarProps): react_jsx_runtime52.JSX.Element;
 //#endregion
 export { StlSidebarProps as a, StlSidebarLink as i, StlSidebarEntry as n, StlSidebarTarget as o, StlSidebarGroup as r, StlSidebar as t };

package/dist/{stl-sidebar-DpnXVa_V.d.ts → stl-sidebar-C7GNALtk.d.ts}

@@ -1,5 +1,5 @@
 import { ReactNode } from "react";
-import * as react_jsx_runtime67 from "react/jsx-runtime";
+import * as react_jsx_runtime57 from "react/jsx-runtime";
 
 //#region src/components/stl-sidebar.d.ts
 declare module 'react' {
@@ -53,6 +53,6 @@ type StlSidebarProps = {
 declare function StlSidebar({
   entries,
   withStarlightRestoration
-}: StlSidebarProps): react_jsx_runtime67.JSX.Element;
+}: StlSidebarProps): react_jsx_runtime57.JSX.Element;
 //#endregion
 export { StlSidebarProps as a, StlSidebarLink as i, StlSidebarEntry as n, StlSidebarTarget as o, StlSidebarGroup as r, StlSidebar as t };

package/dist/{stl-sidebar-WtimNrk1.js → stl-sidebar-DC5UOJiT.js}

@@ -1,5 +1,5 @@
 import { t as useComponents } from "./use-components-BUz3GbO4.js";
-import { t as style_default } from "./style-HpXpcJ9v.js";
+import { t as style_default } from "./style-DJIYkFhO.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import clsx from "clsx";
 import { ChevronRight } from "lucide-react";

package/dist/{style-HpXpcJ9v.js → style-DJIYkFhO.js}

@@ -64,6 +64,12 @@ var style_default = {
 	SnippetResponseTabSingleReturn: "stldocs-snippet-response-tab-single-return",
 	SnippetResponsePane: "stldocs-snippet-response-pane",
 	SnippetResponsePaneActive: "stldocs-snippet-response-pane-active",
+	SnippetMulti: "stldocs-snippet-multi",
+	SnippetMultiTabs: "stldocs-snippet-multi-tabs",
+	SnippetMultiTab: "stldocs-snippet-multi-tab",
+	SnippetMultiContent: "stldocs-snippet-multi-content",
+	SnippetMultiPane: "stldocs-snippet-multi-pane",
+	SnippetMultiPaneActive: "stldocs-snippet-multi-pane-active",
 	Method: "stldocs-method",
 	MethodHeader: "stldocs-method-header",
 	MethodBody: "stldocs-method-body",

package/dist/style.d.ts

@@ -64,6 +64,12 @@ declare const _default: {
   readonly SnippetResponseTabSingleReturn: "stldocs-snippet-response-tab-single-return";
   readonly SnippetResponsePane: "stldocs-snippet-response-pane";
   readonly SnippetResponsePaneActive: "stldocs-snippet-response-pane-active";
+  readonly SnippetMulti: "stldocs-snippet-multi";
+  readonly SnippetMultiTabs: "stldocs-snippet-multi-tabs";
+  readonly SnippetMultiTab: "stldocs-snippet-multi-tab";
+  readonly SnippetMultiContent: "stldocs-snippet-multi-content";
+  readonly SnippetMultiPane: "stldocs-snippet-multi-pane";
+  readonly SnippetMultiPaneActive: "stldocs-snippet-multi-pane-active";
   readonly Method: "stldocs-method";
   readonly MethodHeader: "stldocs-method-header";
   readonly MethodBody: "stldocs-method-body";

package/dist/style.js

@@ -1,3 +1,3 @@
-import { t as style_default } from "./style-HpXpcJ9v.js";
+import { t as style_default } from "./style-DJIYkFhO.js";
 
 export { style_default as default };

package/dist/styles/main.css

@@ -551,16 +551,19 @@
     }
   }
 
-  .stldocs-snippet {
+  .stldocs-snippet,
+  .stldocs-snippet-multi {
     top: calc(var(--sl-nav-height) + 1rem);
     position: sticky;
     z-index: 5;
+  }
 
+  .stldocs-snippet {
     font-size: var(--stl-typography-scale-sm);
     font-family: var(--stl-typography-font-mono);
 
-    padding: 0.5rem;
-    border-radius: calc(12px + 0.5rem);
+    padding: 0.25rem;
+    border-radius: calc(12px + 0.25rem);
     display: flex;
     flex-direction: column;
     background-color: var(--stl-color-faint-background);
@@ -732,6 +735,9 @@
     display: flex;
     gap: 0.5rem;
     overflow-x: auto;
+    border-bottom: 1px solid var(--stl-color-border-faint);
+    margin-inline: -0.5rem;
+    padding-inline: 0.5rem;
 
     .stldocs-snippet-response-tab-item {
       flex: 1;
@@ -790,6 +796,50 @@
       margin-top: 0;
     }
   }
+
+  .stldocs-snippet-multi {
+    .stldocs-snippet-multi-tabs {
+      background: var(--stl-color-faint-background);
+      border: 1px solid var(--stl-color-border-faint);
+      padding: 0.25rem;
+      border-radius: calc(var(--stl-ui-layout-border-radius) + 0.25rem);
+      display: flex;
+      flex-wrap: nowrap;
+      margin-bottom: 0.5rem;
+      overflow-x: scroll;
+      scrollbar-color: var(--stl-color-border) transparent;
+
+      font-size: var(--stl-typography-scale-sm);
+      line-height: 1;
+
+      max-width: max-content;
+
+      .stldocs-snippet-multi-tab {
+        border-radius: var(--stl-ui-layout-border-radius);
+        border: 1px solid transparent;
+        padding: 9px 14px;
+        font-weight: 400;
+        color: var(--stl-color-foreground-reduced);
+        flex: 0 0 auto;
+
+        & > input {
+          display: none;
+        }
+        &:has(> :checked) {
+          background-color: var(--stl-color-ui-background);
+          border-color: var(--stl-color-border);
+          font-weight: 500;
+          color: var(--stl-color-foreground);
+        }
+      }
+    }
+    .stldocs-snippet-multi-pane {
+      display: none;
+      &.stldocs-snippet-multi-pane-active {
+        display: block;
+      }
+    }
+  }
 }
 
 .stldocs-root .stldocs-language-block {
@@ -920,17 +970,6 @@
           position: relative;
           padding: 0;
           --shiki-background: transparent;
-
-          &::before {
-            content: '';
-            flex: 0 0 1rem;
-            width: calc(100% + 2rem);
-            height: 1px;
-            position: absolute;
-            top: calc(-0.5rem);
-            left: -1rem;
-            background-color: var(--stl-color-border-faint);
-          }
         }
 
         .stldocs-snippet-multi-response {

package/dist/styles.css

@@ -2381,16 +2381,19 @@ a.stl-ui-button {
     }
   }
 
-  .stldocs-snippet {
+  .stldocs-snippet,
+  .stldocs-snippet-multi {
     top: calc(var(--sl-nav-height) + 1rem);
     position: sticky;
     z-index: 5;
+  }
 
+  .stldocs-snippet {
     font-size: var(--stl-typography-scale-sm);
     font-family: var(--stl-typography-font-mono);
 
-    padding: 0.5rem;
-    border-radius: calc(12px + 0.5rem);
+    padding: 0.25rem;
+    border-radius: calc(12px + 0.25rem);
     display: flex;
     flex-direction: column;
     background-color: var(--stl-color-faint-background);
@@ -2562,6 +2565,9 @@ a.stl-ui-button {
     display: flex;
     gap: 0.5rem;
     overflow-x: auto;
+    border-bottom: 1px solid var(--stl-color-border-faint);
+    margin-inline: -0.5rem;
+    padding-inline: 0.5rem;
 
     .stldocs-snippet-response-tab-item {
       flex: 1;
@@ -2620,6 +2626,50 @@ a.stl-ui-button {
       margin-top: 0;
     }
   }
+
+  .stldocs-snippet-multi {
+    .stldocs-snippet-multi-tabs {
+      background: var(--stl-color-faint-background);
+      border: 1px solid var(--stl-color-border-faint);
+      padding: 0.25rem;
+      border-radius: calc(var(--stl-ui-layout-border-radius) + 0.25rem);
+      display: flex;
+      flex-wrap: nowrap;
+      margin-bottom: 0.5rem;
+      overflow-x: scroll;
+      scrollbar-color: var(--stl-color-border) transparent;
+
+      font-size: var(--stl-typography-scale-sm);
+      line-height: 1;
+
+      max-width: max-content;
+
+      .stldocs-snippet-multi-tab {
+        border-radius: var(--stl-ui-layout-border-radius);
+        border: 1px solid transparent;
+        padding: 9px 14px;
+        font-weight: 400;
+        color: var(--stl-color-foreground-reduced);
+        flex: 0 0 auto;
+
+        & > input {
+          display: none;
+        }
+        &:has(> :checked) {
+          background-color: var(--stl-color-ui-background);
+          border-color: var(--stl-color-border);
+          font-weight: 500;
+          color: var(--stl-color-foreground);
+        }
+      }
+    }
+    .stldocs-snippet-multi-pane {
+      display: none;
+      &.stldocs-snippet-multi-pane-active {
+        display: block;
+      }
+    }
+  }
 }
 
 .stldocs-root .stldocs-language-block {
@@ -2750,17 +2800,6 @@ a.stl-ui-button {
           position: relative;
           padding: 0;
           --shiki-background: transparent;
-
-          &::before {
-            content: '';
-            flex: 0 0 1rem;
-            width: calc(100% + 2rem);
-            height: 1px;
-            position: absolute;
-            top: calc(-0.5rem);
-            left: -1rem;
-            background-color: var(--stl-color-border-faint);
-          }
         }
 
         .stldocs-snippet-multi-response {

package/dist/{terraform-B95X4rNK.js → terraform-DVx2ea2h.js}

@@ -1,8 +1,8 @@
 import { t as __exportAll } from "./chunk-BN_g-Awi.js";
-import { i as useDeclaration } from "./docs-BmOB2f-I.js";
-import { n as useLanguageComponents } from "./contexts-CVj20VV4.js";
+import { i as useDeclaration } from "./docs-YgoQ3bzY.js";
+import { n as useLanguageComponents } from "./contexts-_NNW5yqC.js";
 import { t as useComponents } from "./use-components-BUz3GbO4.js";
-import { t as style_default } from "./style-HpXpcJ9v.js";
+import { t as style_default } from "./style-DJIYkFhO.js";
 import "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import clsx from "clsx";

package/dist/{typescript-n46M9OtL.js → typescript-Cmk-jBBw.js}

@@ -1,8 +1,8 @@
 import { t as __exportAll } from "./chunk-BN_g-Awi.js";
-import { d as useSpec, i as useDeclaration, s as useLanguage } from "./docs-BmOB2f-I.js";
-import { n as useLanguageComponents } from "./contexts-CVj20VV4.js";
+import { i as useDeclaration, m as useSpec, s as useLanguage } from "./docs-YgoQ3bzY.js";
+import { n as useLanguageComponents } from "./contexts-_NNW5yqC.js";
 import { t as useComponents } from "./use-components-BUz3GbO4.js";
-import { t as style_default } from "./style-HpXpcJ9v.js";
+import { t as style_default } from "./style-DJIYkFhO.js";
 import * as React$1 from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";