@umami/shiso 1.18.0 → 1.19.0

package/dist/chunks/App.js

@@ -1,8 +1,8 @@
-import { $ as useFloatingNodeId, $n as jsdom, $t as resolveIcon, A as safePolygon, An as useDirection, Ar as Route, B as attachPreventUnmountOnClose, Bn as isListIndexDisabled, Cn as englishLabels, Cr as X$1, D as useAnchorPositioning, Dn as isValidLocale, Dt as Collapsible, E as getDisabledMountTransitionStyles, En as getTextDirection, Er as createLucideIcon, Et as Expandable, F as createInitialPopupStoreState, Fn as findNonDisabledListIndex, Ft as useCompositeItem, G as useTriggerDataForwarding, Gn as isTypeableCombobox, H as useImplicitActiveTrigger, Hn as isVirtualPointerEvent, I as popupStoreSelectors, In as getMaxListIndex, J as useDismiss, Jn as getTarget, K as useSyncedFloatingRootContext, Kn as activeElement, L as PopupTriggerMap, Ln as getMinListIndex, M as useHoverFloatingInteraction, Mn as getTabbableAfterElement, Mr as Routes, Mt as CodeGroup, N as useFocus, Nn as getTabbableBeforeElement, Nr as useLocation, Nt as COMPOSITE_KEYS, O as popupTransitionStateMapping, On as resolveLocale, Or as Link, Ot as CollapsibleContent, P as usePopupHandleStore, Pn as isOutsideEvent, Pr as useNavigate, Pt as inertValue, Q as FloatingTree, Qn as ARROW_UP, R as FOCUSABLE_POPUP_PROPS, Rn as isElementVisible, Sn as useLabels, Sr as isLastTraversableNode, T as usePositioner, Tn as getLanguageName, Tr as Check, Tt as renderInlineMarkdown, U as useOpenStateTransitions, Un as stopEvent, V as setPopupOpenState, Vn as isVirtualClick, W as usePopupInteractionProps, Wn as getFloatingFocusElement, X as FloatingFocusManager, Xn as ARROW_LEFT, Xt as Badge$1, Y as useClick, Yn as ARROW_DOWN, Yt as Badge, Z as FloatingNode, Zn as ARROW_RIGHT, _n as triggerPress, _r as useStableCallback, a as DialogTitle, an as useAnimationFrame, ar as Button, at as POPUP_COLLISION_AVOIDANCE, br as getWindow, bt as usePanelContent, c as useOpenInteractionType, cn as escapeKey, cr as EMPTY_ARRAY, ct as fastComponent, d as useScrollLock, dn as itemPress, dr as useButton, en as getIcon, er as webkit, et as useFloatingParentNodeId, f as DialogPortal$1, fn as listNavigation, fr as dispatchClickWithModifiers, g as DialogBackdrop, gn as triggerHover, gr as useIsoLayoutEffect, gt as PropertiesTable, h as DialogClose, hn as triggerFocus, hr as mergeProps$1, i as DialogContent$1, in as useCompositeListItem, ir as useTimeout, it as DROPDOWN_COLLISION_AVOIDANCE, j as useHoverReferenceInteraction, jn as getNextTabbable, k as pressableTriggerOpenStateMapping, kn as addEventListener, kr as Navigate, kt as CollapsibleTrigger, l as DialogTitle$1, ln as focusOut, lr as EMPTY_OBJECT, lt as fastComponentRef, m as DialogPopup, mn as siblingOpen, mr as useCompositeRootContext, n as ZoomableImage, nn as useAnimationsFinished, nr as useBaseUiId, nt as FloatingTreeStore, o as DialogTrigger, on as createChangeEventDetails, or as cn, ot as enqueueFocus, p as InternalBackdrop, pn as outsidePress, pr as ownerDocument, q as ReactStore, qn as contains, r as Dialog$1, rn as useValueAsRef, rr as useId$2, rt as FloatingPortal, s as DialogTrigger$1, sn as cancelOpen, sr as useRenderElement, st as FocusGuard, t as docs_exports, tn as useOpenChangeComplete, tr as mac, tt as useFloatingTree, u as DialogRoot, un as imperativeAction, ur as useMergedRefs, vn as CompositeList, vr as useRefWithInit, w as TooltipProvider, wn as resolveLabels, wr as ChevronRight, xn as LabelContext, xr as isHTMLElement, yn as Mermaid, yr as getParentNode, yt as PanelProvider, z as PopupHandleAttachment, zn as isIndexOutOfListBounds } from "./docs.js";
+import { $ as useFloatingNodeId, $n as ARROW_LEFT, $t as resolveIcon, A as safePolygon, An as isValidLocale, Ar as createLucideIcon, B as attachPreventUnmountOnClose, Bn as getMinListIndex, Cr as getParentNode, D as useAnchorPositioning, Dn as resolveLabels, Dr as X$1, Dt as Collapsible, E as getDisabledMountTransitionStyles, En as englishLabels, Er as isLastTraversableNode, Et as Expandable, F as createInitialPopupStoreState, Fn as getTabbableAfterElement, Ft as useCompositeItem, G as useTriggerDataForwarding, Gn as isVirtualPointerEvent, H as useImplicitActiveTrigger, Hn as isIndexOutOfListBounds, I as popupStoreSelectors, In as getTabbableBeforeElement, Ir as Routes, J as useDismiss, Jn as isTypeableCombobox, K as useSyncedFloatingRootContext, Kn as stopEvent, L as PopupTriggerMap, Ln as isOutsideEvent, Lr as useLocation, M as useHoverFloatingInteraction, Mn as addEventListener, Mr as Link, Mt as CodeGroup, N as useFocus, Nn as useDirection, Nr as Navigate, Nt as COMPOSITE_KEYS, O as popupTransitionStateMapping, On as getLanguageName, Or as ChevronRight, Ot as CollapsibleContent, P as usePopupHandleStore, Pn as getNextTabbable, Pr as Route, Pt as inertValue, Q as FloatingTree, Qn as ARROW_DOWN, R as FOCUSABLE_POPUP_PROPS, Rn as findNonDisabledListIndex, Rr as useNavigate, Sn as Mermaid, Sr as useRefWithInit, T as usePositioner, Tn as useLabels, Tr as isHTMLElement, Tt as renderInlineMarkdown, U as useOpenStateTransitions, Un as isListIndexDisabled, V as setPopupOpenState, Vn as isElementVisible, W as usePopupInteractionProps, Wn as isVirtualClick, X as FloatingFocusManager, Xn as contains, Xt as Badge$1, Y as useClick, Yn as activeElement, Yt as Badge, Z as FloatingNode, Zn as getTarget, _n as triggerFocus, _r as ownerDocument, a as DialogTitle, an as useCompositeListItem, ar as useBaseUiId, at as POPUP_COLLISION_AVOIDANCE, bn as CompositeList, br as useIsoLayoutEffect, bt as usePanelContent, c as useOpenInteractionType, cn as createChangeEventDetails, cr as Button, ct as fastComponent, d as useScrollLock, dn as focusOut, dr as EMPTY_ARRAY, en as getIcon, er as ARROW_RIGHT, et as useFloatingParentNodeId, f as DialogPortal$1, fn as imperativeAction, fr as EMPTY_OBJECT, g as DialogBackdrop, gn as siblingOpen, gr as dispatchClickWithModifiers, gt as PropertiesTable, h as DialogClose, hn as outsidePress, hr as useButton, i as DialogContent$1, in as transitionStatusMapping, ir as mac, it as DROPDOWN_COLLISION_AVOIDANCE, j as useHoverReferenceInteraction, jn as resolveLocale, k as pressableTriggerOpenStateMapping, kn as getTextDirection, kr as Check, kt as CollapsibleTrigger, l as DialogTitle$1, ln as cancelOpen, lr as cn, lt as fastComponentRef, m as DialogPopup, mn as listNavigation, mr as useMergedRefs, n as ZoomableImage, nn as useAnimationsFinished, nr as jsdom, nt as FloatingTreeStore, o as DialogTrigger, on as useTransitionStatus, or as useId$2, ot as enqueueFocus, p as InternalBackdrop, pn as itemPress, pr as NOOP, q as ReactStore, qn as getFloatingFocusElement, r as Dialog$1, rn as useValueAsRef, rr as webkit, rt as FloatingPortal, s as DialogTrigger$1, sn as useAnimationFrame, sr as useTimeout, st as FocusGuard, t as docs_exports, tn as useOpenChangeComplete, tr as ARROW_UP, tt as useFloatingTree, u as DialogRoot, un as escapeKey, ur as useRenderElement, vn as triggerHover, vr as useCompositeRootContext, w as TooltipProvider, wn as LabelContext, wr as getWindow, xn as useControlled, xr as useStableCallback, yn as triggerPress, yr as mergeProps$1, yt as PanelProvider, z as PopupHandleAttachment, zn as getMaxListIndex } from "./docs.js";
 import { n as highlightTerms } from "./search.js";
 import { resolveSearchProvider } from "../search.js";
 import * as React from "react";
-import { useCallback, useEffect, useRef, useState } from "react";
+import { useCallback, useEffect, useId, useMemo, useRef, useState } from "react";
 import "@fontsource-variable/inter/index.css";
 import "@fontsource/jetbrains-mono/400.css";
 import "@umami/shiso/styles.css";
@@ -12,7 +12,7 @@ import * as ReactDOM from "react-dom";
 import shiso from "virtual:shiso-config";
 import rawConfig from "virtual:shiso-docs-config";
 import { LAST_MODIFIED } from "@/generated/last-modified";
-import { OPENAPI_OPERATIONS } from "@/lib/openapi.generated";
+import { OPENAPI_OPERATIONS, OPENAPI_SCHEMAS } from "@/lib/openapi.generated";
 
 //#region ../../node_modules/.pnpm/lucide-react@1.28.0_react@19.2.8/node_modules/lucide-react/dist/esm/icons/arrow-left.mjs
 /**
@@ -2172,6 +2172,43 @@ function useMenuItem(params) {
 	}), [getItemProps, mergedRef]);
 }
 
+//#endregion
+//#region ../../node_modules/.pnpm/@base-ui+react@1.7.0_@types_e9c1e83f6bc6140c3efaf3427f2fbf0a/node_modules/@base-ui/react/menu/checkbox-item/MenuCheckboxItemDataAttributes.mjs
+let MenuCheckboxItemDataAttributes = /*#__PURE__*/ function(MenuCheckboxItemDataAttributes) {
+	/**
+	* Present when the menu checkbox item is checked.
+	*/
+	MenuCheckboxItemDataAttributes["checked"] = "data-checked";
+	/**
+	* Present when the menu checkbox item is not checked.
+	*/
+	MenuCheckboxItemDataAttributes["unchecked"] = "data-unchecked";
+	/**
+	* Present when the menu checkbox item is disabled.
+	*/
+	MenuCheckboxItemDataAttributes["disabled"] = "data-disabled";
+	/**
+	* Present when the menu checkbox item is highlighted.
+	*/
+	MenuCheckboxItemDataAttributes["highlighted"] = "data-highlighted";
+	return MenuCheckboxItemDataAttributes;
+}({});
+
+//#endregion
+//#region ../../node_modules/.pnpm/@base-ui+react@1.7.0_@types_e9c1e83f6bc6140c3efaf3427f2fbf0a/node_modules/@base-ui/react/menu/utils/stateAttributesMapping.mjs
+const itemMapping = {
+	checked(value) {
+		if (value) return { [MenuCheckboxItemDataAttributes.checked]: "" };
+		return { [MenuCheckboxItemDataAttributes.unchecked]: "" };
+	},
+	...transitionStatusMapping
+};
+
+//#endregion
+//#region ../../node_modules/.pnpm/@base-ui+react@1.7.0_@types_e9c1e83f6bc6140c3efaf3427f2fbf0a/node_modules/@base-ui/react/menu/group/MenuGroupContext.mjs
+const MenuGroupContext = /*#__PURE__*/ React.createContext(void 0);
+MenuGroupContext.displayName = "MenuGroupContext";
+
 //#endregion
 //#region ../../node_modules/.pnpm/@base-ui+react@1.7.0_@types_e9c1e83f6bc6140c3efaf3427f2fbf0a/node_modules/@base-ui/react/menu/item/MenuItem.mjs
 /**
@@ -2595,6 +2632,187 @@ const MenuPositioner = /*#__PURE__*/ React.forwardRef(function MenuPositioner(co
 });
 MenuPositioner.displayName = "MenuPositioner";
 
+//#endregion
+//#region ../../node_modules/.pnpm/@base-ui+react@1.7.0_@types_e9c1e83f6bc6140c3efaf3427f2fbf0a/node_modules/@base-ui/react/menu/radio-group/MenuRadioGroupContext.mjs
+const MenuRadioGroupContext = /*#__PURE__*/ React.createContext(void 0);
+MenuRadioGroupContext.displayName = "MenuRadioGroupContext";
+function useMenuRadioGroupContext() {
+	const context = React.useContext(MenuRadioGroupContext);
+	if (context === void 0) throw new Error("Base UI: MenuRadioGroupContext is missing. MenuRadioGroup parts must be placed within <Menu.RadioGroup>.");
+	return context;
+}
+
+//#endregion
+//#region ../../node_modules/.pnpm/@base-ui+react@1.7.0_@types_e9c1e83f6bc6140c3efaf3427f2fbf0a/node_modules/@base-ui/react/menu/radio-group/MenuRadioGroup.mjs
+/**
+* Groups related radio items.
+* Renders a `<div>` element.
+*
+* Documentation: [Base UI Menu](https://base-ui.com/react/components/menu)
+*/
+const MenuRadioGroup = /*#__PURE__*/ React.memo(/*#__PURE__*/ React.forwardRef(function MenuRadioGroup(componentProps, forwardedRef) {
+	const { render, className, value: valueProp, defaultValue, onValueChange: onValueChangeProp, disabled = false, style, "aria-labelledby": ariaLabelledByProp, ...elementProps } = componentProps;
+	const [labelId, setLabelId] = React.useState(void 0);
+	const [value, setValueUnwrapped] = useControlled({
+		controlled: valueProp,
+		default: defaultValue,
+		name: "MenuRadioGroup"
+	});
+	const setValue = useStableCallback((newValue, eventDetails) => {
+		onValueChangeProp?.(newValue, eventDetails);
+		if (eventDetails.isCanceled) return;
+		setValueUnwrapped(newValue);
+	});
+	const element = useRenderElement("div", componentProps, {
+		state: { disabled },
+		ref: forwardedRef,
+		props: {
+			role: "group",
+			"aria-labelledby": ariaLabelledByProp ?? labelId,
+			"aria-disabled": disabled || void 0,
+			...elementProps
+		}
+	});
+	const context = React.useMemo(() => ({
+		value,
+		setValue,
+		disabled
+	}), [
+		value,
+		setValue,
+		disabled
+	]);
+	return /*#__PURE__*/ jsx(MenuGroupContext.Provider, {
+		value: setLabelId,
+		children: /*#__PURE__*/ jsx(MenuRadioGroupContext.Provider, {
+			value: context,
+			children: element
+		})
+	});
+}));
+MenuRadioGroup.displayName = "MenuRadioGroup";
+
+//#endregion
+//#region ../../node_modules/.pnpm/@base-ui+react@1.7.0_@types_e9c1e83f6bc6140c3efaf3427f2fbf0a/node_modules/@base-ui/react/menu/radio-item/MenuRadioItemContext.mjs
+const MenuRadioItemContext = /*#__PURE__*/ React.createContext(void 0);
+MenuRadioItemContext.displayName = "MenuRadioItemContext";
+function useMenuRadioItemContext() {
+	const context = React.useContext(MenuRadioItemContext);
+	if (context === void 0) throw new Error("Base UI: MenuRadioItemContext is missing. MenuRadioItem parts must be placed within <Menu.RadioItem>.");
+	return context;
+}
+
+//#endregion
+//#region ../../node_modules/.pnpm/@base-ui+react@1.7.0_@types_e9c1e83f6bc6140c3efaf3427f2fbf0a/node_modules/@base-ui/react/menu/radio-item/MenuRadioItem.mjs
+/**
+* A menu item that works like a radio button in a given group.
+* Renders a `<div>` element.
+*
+* Documentation: [Base UI Menu](https://base-ui.com/react/components/menu)
+*/
+const MenuRadioItem = /*#__PURE__*/ React.forwardRef(function MenuRadioItem(componentProps, forwardedRef) {
+	const { render, className, id: idProp, label, nativeButton = false, disabled: disabledProp = false, closeOnClick = false, value, style, ...elementProps } = componentProps;
+	const listItem = useCompositeListItem({
+		guess: true,
+		label
+	});
+	const menuPositionerContext = useMenuPositionerContext(true);
+	const id = useBaseUiId(idProp);
+	const { store } = useMenuRootContext();
+	const highlighted = store.useState("isActive", listItem.index);
+	const itemProps = store.useState("itemProps");
+	const { value: selectedValue, setValue: setSelectedValue, disabled: groupDisabled } = useMenuRadioGroupContext();
+	const rootDisabled = store.useState("disabled");
+	const disabled = disabledProp || groupDisabled || rootDisabled;
+	const checked = selectedValue === value;
+	const { getItemProps, itemRef } = useMenuItem({
+		closeOnClick,
+		disabled,
+		highlighted,
+		id,
+		store,
+		nativeButton,
+		nodeId: menuPositionerContext?.context.nodeId,
+		itemMetadata: REGULAR_ITEM
+	});
+	const state = React.useMemo(() => ({
+		disabled,
+		highlighted,
+		checked
+	}), [
+		disabled,
+		highlighted,
+		checked
+	]);
+	function handleClick(event) {
+		const details = createChangeEventDetails(itemPress, event.nativeEvent, void 0, { preventUnmountOnClose: NOOP });
+		setSelectedValue(value, details);
+	}
+	const element = useRenderElement("div", componentProps, {
+		state,
+		stateAttributesMapping: itemMapping,
+		props: [
+			itemProps,
+			{
+				role: "menuitemradio",
+				"aria-checked": checked,
+				onClick: handleClick
+			},
+			elementProps,
+			getItemProps
+		],
+		ref: [
+			itemRef,
+			forwardedRef,
+			listItem.ref
+		]
+	});
+	return /*#__PURE__*/ jsx(MenuRadioItemContext.Provider, {
+		value: state,
+		children: element
+	});
+});
+MenuRadioItem.displayName = "MenuRadioItem";
+
+//#endregion
+//#region ../../node_modules/.pnpm/@base-ui+react@1.7.0_@types_e9c1e83f6bc6140c3efaf3427f2fbf0a/node_modules/@base-ui/react/menu/radio-item-indicator/MenuRadioItemIndicator.mjs
+/**
+* Indicates whether the radio item is selected.
+* Renders a `<span>` element.
+*
+* Documentation: [Base UI Menu](https://base-ui.com/react/components/menu)
+*/
+const MenuRadioItemIndicator = /*#__PURE__*/ React.forwardRef(function MenuRadioItemIndicator(componentProps, forwardedRef) {
+	const { render, className, style, keepMounted = false, ...elementProps } = componentProps;
+	const item = useMenuRadioItemContext();
+	const indicatorRef = React.useRef(null);
+	const { transitionStatus, mounted, setMounted } = useTransitionStatus(item.checked);
+	useOpenChangeComplete({
+		open: item.checked,
+		ref: indicatorRef,
+		onComplete() {
+			if (!item.checked) setMounted(false);
+		}
+	});
+	const state = {
+		checked: item.checked,
+		disabled: item.disabled,
+		highlighted: item.highlighted,
+		transitionStatus
+	};
+	return useRenderElement("span", componentProps, {
+		state,
+		stateAttributesMapping: itemMapping,
+		ref: [forwardedRef, indicatorRef],
+		props: {
+			"aria-hidden": true,
+			...elementProps
+		},
+		enabled: keepMounted || mounted
+	});
+});
+MenuRadioItemIndicator.displayName = "MenuRadioItemIndicator";
+
 //#endregion
 //#region ../../node_modules/.pnpm/@base-ui+react@1.7.0_@types_e9c1e83f6bc6140c3efaf3427f2fbf0a/node_modules/@base-ui/react/menubar/MenubarContext.mjs
 const MenubarContext = /*#__PURE__*/ React.createContext(null);
@@ -3403,6 +3621,25 @@ function DropdownMenuItem({ className, inset, variant = "default", ...props }) {
 		...props
 	});
 }
+function DropdownMenuRadioGroup({ ...props }) {
+	return /* @__PURE__ */ jsx(MenuRadioGroup, {
+		"data-slot": "dropdown-menu-radio-group",
+		...props
+	});
+}
+function DropdownMenuRadioItem({ className, children, inset, ...props }) {
+	return /* @__PURE__ */ jsxs(MenuRadioItem, {
+		"data-slot": "dropdown-menu-radio-item",
+		"data-inset": inset,
+		className: cn("relative flex cursor-default items-center gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground data-inset:pl-7 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className),
+		...props,
+		children: [/* @__PURE__ */ jsx("span", {
+			className: "pointer-events-none absolute right-2 flex items-center justify-center",
+			"data-slot": "dropdown-menu-radio-item-indicator",
+			children: /* @__PURE__ */ jsx(MenuRadioItemIndicator, { children: /* @__PURE__ */ jsx(Check, {}) })
+		}), children]
+	});
+}
 
 //#endregion
 //#region src/lib/paths.ts
@@ -4208,6 +4445,15 @@ function normalizeNavbar(config) {
 		primary
 	} : null;
 }
+function normalizePlayground(config) {
+	const playground = config?.playground;
+	const display = playground?.display === "simple" || playground?.display === "none" ? playground.display : "interactive";
+	const proxy = playground?.proxy?.trim() || void 0;
+	return proxy ? {
+		display,
+		proxy
+	} : { display };
+}
 function normalizeFooter(config) {
 	const socials = (config?.socials || []).filter((link) => !!link?.href).map(normalizeLink);
 	const links = (config?.links || []).filter((column) => column?.items?.length).map((column) => ({
@@ -4265,6 +4511,7 @@ function resolveSiteModel(config, docs, shiso) {
 		drilldown: config.interaction?.drilldown,
 		locale: shiso?.locale || "en-US",
 		labels: resolveLabels(shiso?.locale || "en-US", shiso?.translations),
+		api: { playground: normalizePlayground(config.api) },
 		docs
 	};
 }
@@ -4538,27 +4785,29 @@ function LanguageSwitcher() {
 	const standalone = getStandalonePage(pathname);
 	if (!current.language || options.length < 2 && !current.hidden) return null;
 	return /* @__PURE__ */ jsxs(DropdownMenu, { children: [/* @__PURE__ */ jsxs(DropdownMenuTrigger, {
-		render: /* @__PURE__ */ jsx(Button, {
-			variant: "outline",
-			className: "h-auto gap-1.5 rounded-md bg-card px-2.5 py-1.5 text-sm font-medium text-foreground"
-		}),
+		render: /* @__PURE__ */ jsx(Button, { variant: "outline" }),
+		"aria-label": `Language: ${getLanguageName(current.language)}`,
 		children: [getLanguageName(current.language), /* @__PURE__ */ jsx(ChevronRight, { className: "size-3.5 rotate-90 text-muted-foreground" })]
 	}), /* @__PURE__ */ jsx(DropdownMenuContent, {
 		align: "start",
 		className: "min-w-32",
-		children: options.map((scope) => /* @__PURE__ */ jsxs(DropdownMenuItem, {
-			onClick: () => {
-				if (scope.language !== current.language) {
+		children: /* @__PURE__ */ jsx(DropdownMenuRadioGroup, {
+			value: current.language,
+			onValueChange: (language) => {
+				const scope = options.find((option) => option.language === language);
+				if (scope && scope.language !== current.language) {
 					const counterpart = standalone && scope.language ? getStandaloneCounterpart(standalone, scope.language) : null;
 					navigate(counterpart?.path || scope.firstPageUrl);
 				}
 			},
-			children: [/* @__PURE__ */ jsx("span", {
-				className: "grow",
-				lang: isValidLocale(scope.language) ? scope.language : void 0,
-				children: scope.language ? getLanguageName(scope.language) : null
-			}), scope.language === current.language ? /* @__PURE__ */ jsx(Check, { className: "size-3.5" }) : null]
-		}, scope.id))
+			children: options.map((scope) => /* @__PURE__ */ jsx(DropdownMenuRadioItem, {
+				value: scope.language,
+				children: /* @__PURE__ */ jsx("span", {
+					lang: isValidLocale(scope.language) ? scope.language : void 0,
+					children: scope.language ? getLanguageName(scope.language) : null
+				})
+			}, scope.id))
+		})
 	})] });
 }
 
@@ -8078,8 +8327,39 @@ const METHOD_COLORS = {
 	POST: "blue",
 	PUT: "orange",
 	PATCH: "purple",
-	DELETE: "red"
+	DELETE: "red",
+	WEBHOOK: "yellow"
 };
+const HTTP_METHODS = /* @__PURE__ */ new Set([
+	"GET",
+	"POST",
+	"PUT",
+	"PATCH",
+	"DELETE",
+	"HEAD",
+	"OPTIONS",
+	"TRACE"
+]);
+/** Short sidebar badge text for a method. */
+function methodBadgeText(method) {
+	if (method === "DELETE") return "DEL";
+	if (method === "WEBHOOK") return "HOOK";
+	return method;
+}
+/**
+* Normalizes an `openapi:` frontmatter value into a lookup key. Mirrors
+* normalizeOperationKey in scripts/lib/openapi.mjs: the method (or "webhook")
+* is uppercased and an optional leading spec qualifier is kept verbatim.
+*/
+function normalizeOperationKey(value) {
+	if (typeof value !== "string" || !value.trim()) return void 0;
+	const [first, ...rest] = value.trim().split(/\s+/);
+	if (!rest.length) return void 0;
+	const upper = first.toUpperCase();
+	if (upper === "WEBHOOK" || HTTP_METHODS.has(upper)) return `${upper} ${rest.join(" ")}`;
+	const inner = normalizeOperationKey(rest.join(" "));
+	return inner ? `${first} ${inner}` : void 0;
+}
 function methodColor(method) {
 	return method && METHOD_COLORS[method.toUpperCase()] || "gray";
 }
@@ -8089,11 +8369,51 @@ function statusColor(status) {
 	if (status.startsWith("4") || status.startsWith("5")) return "red";
 	return "gray";
 }
+/**
+* Resolves the effective playground display for a page: the frontmatter
+* `playground` value wins over `api.playground.display`.
+*/
+function resolvePlaygroundDisplay(playground, frontmatter) {
+	const override = frontmatter?.playground;
+	if (override === "interactive" || override === "simple" || override === "none") return override;
+	return playground.display;
+}
 /** Looks up the operation bound by an `openapi:` frontmatter value. */
 function getOperation(key) {
-	if (typeof key !== "string" || !key.trim()) return;
-	const [method, ...rest] = key.trim().split(/\s+/);
-	return OPENAPI_OPERATIONS[`${method.toUpperCase()} ${rest.join(" ")}`];
+	const normalized = normalizeOperationKey(key);
+	return normalized ? OPENAPI_OPERATIONS[normalized] : void 0;
+}
+/** Looks up the schema bound by an `openapi-schema:` frontmatter value. */
+function getSchema(key) {
+	if (typeof key !== "string" || !key.trim()) return void 0;
+	return OPENAPI_SCHEMAS[key.trim().split(/\s+/).join(" ")];
+}
+/**
+* Section headings for a schema page, in render order. Mirrors schemaAnchors
+* in scripts/lib/openapi.mjs.
+*/
+function schemaSections(page, labels = englishLabels) {
+	return [...page.schema.children?.length ? [{
+		name: labels.apiSchemaProperties,
+		id: "properties",
+		size: 2
+	}] : [], ...page.example ? [{
+		name: labels.apiExample,
+		id: "example",
+		size: 2
+	}] : []];
+}
+/** Where a security scheme's credential travels: a header unless it is a query or cookie API key. */
+function securityLocation(scheme) {
+	return scheme.type === "apiKey" && scheme.in ? scheme.in : "header";
+}
+/** Security schemes that are sent in the given parameter location. */
+function securityForLocation(operation, location) {
+	return operation.security.filter((scheme) => securityLocation(scheme) === location);
+}
+/** Display name of the header, query, or cookie entry a scheme adds. */
+function securityFieldName(scheme) {
+	return scheme.type === "apiKey" ? scheme.paramName || scheme.name : "Authorization";
 }
 /** Parameter groups shared by the renderer and table of contents. */
 function operationParameterSections(operation, labels = englishLabels) {
@@ -8114,24 +8434,27 @@ function operationParameterSections(operation, labels = englishLabels) {
 			location: "cookie",
 			name: labels.apiCookieParameters
 		}
-	].filter(({ location }) => operation.parameters[location].length > 0 || location === "header" && operation.security.length > 0);
+	].filter(({ location }) => operation.parameters[location].length > 0 || securityForLocation(operation, location).length > 0);
 }
 /**
 * Section headings for an operation, in render order. The single source of
 * truth for section ids: the component, the table of contents, the content
 * checker, and the search indexer all derive their anchors from these labels.
 */
-function operationSections(operation, labels = englishLabels) {
+function operationSections(operation, labels = englishLabels, options = {}) {
 	const slugger = createSlugger();
+	const playground = options.playground && !operation.webhook;
 	const names = [
+		playground ? "Try it" : void 0,
 		...operationParameterSections(operation).map((section) => section.name),
-		operation.requestBody ? "Request body" : void 0,
+		operation.requestBody ? operation.webhook ? "Payload" : "Request body" : void 0,
 		operation.responses.length ? "Responses" : void 0,
 		operation.samples.length ? "Code samples" : void 0
 	].filter((name) => Boolean(name));
 	const translated = [
+		...playground ? [labels.apiPlayground] : [],
 		...operationParameterSections(operation, labels).map((section) => section.name),
-		...operation.requestBody ? [labels.apiRequestBody] : [],
+		...operation.requestBody ? [operation.webhook ? labels.apiPayload : labels.apiRequestBody] : [],
 		...operation.responses.length ? [labels.apiResponses] : [],
 		...operation.samples.length ? [labels.apiCodeSamples] : []
 	];
@@ -8142,9 +8465,635 @@ function operationSections(operation, labels = englishLabels) {
 	}));
 }
 
+//#endregion
+//#region scripts/lib/request-samples.mjs
+/**
+* Request building shared by the build-time sample generator and the browser
+* API playground. This module is deliberately free of Node imports: it is
+* bundled into the client runtime as well as executed by the build scripts.
+*
+* `buildRequest` turns an operation plus user-supplied values into a concrete
+* HTTP request description; `buildCodeSamples` renders that description as
+* cURL, JavaScript, and Python. Values that are missing fall back to the
+* spec's examples or to angle-bracket placeholders such as `<token>`, so the
+* static samples and the live playground always agree on the request shape.
+*/
+const PLACEHOLDER = /^<[^<>]+>$/;
+/** Percent-encodes a value unless it is a documentation placeholder. */
+function encodeValue(value) {
+	return PLACEHOLDER.test(value) ? value : encodeURIComponent(value);
+}
+function toBase64(value) {
+	if (typeof btoa === "function") return btoa(value);
+	return Buffer.from(value, "utf8").toString("base64");
+}
+function capitalize(value) {
+	return value.charAt(0).toUpperCase() + value.slice(1);
+}
+/** Placeholder credential text shown in samples when no value is supplied. */
+function securityPlaceholder(scheme) {
+	if (scheme.type === "http") return scheme.scheme === "basic" ? "<credentials>" : "<token>";
+	if (scheme.type === "apiKey") return "<api-key>";
+	return "<access-token>";
+}
+/**
+* Applies one security scheme to the request. `value` is a string for token
+* and API key schemes, `{ username, password }` for HTTP basic, or undefined
+* to emit a placeholder.
+*/
+function applySecurity(scheme, value, target) {
+	const placeholder = securityPlaceholder(scheme);
+	if (scheme.type === "apiKey") {
+		const credential = typeof value === "string" && value ? value : placeholder;
+		const name = scheme.paramName || scheme.name;
+		if (scheme.in === "query") target.query[name] = credential;
+		else if (scheme.in === "cookie") target.cookies[name] = credential;
+		else target.headers[name] = credential;
+		return;
+	}
+	if (scheme.type === "http" && scheme.scheme === "basic") {
+		const credential = value && typeof value === "object" && (value.username || value.password) ? toBase64(`${value.username || ""}:${value.password || ""}`) : typeof value === "string" && value ? value : placeholder;
+		target.headers.Authorization = `Basic ${credential}`;
+		return;
+	}
+	const prefix = scheme.type === "http" && scheme.scheme && scheme.scheme !== "bearer" ? capitalize(scheme.scheme) : "Bearer";
+	const credential = typeof value === "string" && value ? value : placeholder;
+	target.headers.Authorization = `${prefix} ${credential}`;
+}
+/** Content categories the sample renderers and playground understand. */
+function bodyKind(contentType) {
+	if (!contentType) return "none";
+	if (/[+/]json\b/i.test(contentType)) return "json";
+	if (/x-www-form-urlencoded/i.test(contentType)) return "form";
+	if (/multipart\/form-data/i.test(contentType)) return "multipart";
+	return "raw";
+}
+function parseFields(body) {
+	if (!body) return {};
+	try {
+		const parsed = JSON.parse(body);
+		if (!parsed || typeof parsed !== "object" || Array.isArray(parsed)) return {};
+		return Object.fromEntries(Object.entries(parsed).map(([key, value]) => [key, typeof value === "string" ? value : JSON.stringify(value)]));
+	} catch {
+		return {};
+	}
+}
+function parameterValue(node, supplied) {
+	if (supplied !== void 0 && supplied !== null && supplied !== "") return String(supplied);
+	return node.example;
+}
+/**
+* Builds a concrete request from an operation and optional user values:
+* `{ server, path, query, header, cookie, auth, body }`. Without values, the
+* spec's examples fill required parameters and credentials become
+* placeholders, which is the shape rendered in the static code samples.
+*/
+function buildRequest(operation, values = {}) {
+	const live = values.live === true;
+	const target = {
+		headers: {},
+		query: {},
+		cookies: {}
+	};
+	for (const scheme of operation.security || []) applySecurity(scheme, values.auth?.[scheme.name], target);
+	const params = operation.parameters;
+	const pathValues = {};
+	for (const node of params.path) {
+		const value = parameterValue(node, values.path?.[node.name]);
+		if (live && value !== void 0) pathValues[node.name] = value;
+	}
+	for (const node of params.query) {
+		const value = parameterValue(node, values.query?.[node.name]);
+		if (value !== void 0 && (live || node.required || values.query?.[node.name])) target.query[node.name] = value;
+	}
+	for (const node of params.header) {
+		const value = parameterValue(node, values.header?.[node.name]);
+		if (value !== void 0 && (live || node.required || values.header?.[node.name])) target.headers[node.name] = value;
+	}
+	for (const node of params.cookie) {
+		const value = parameterValue(node, values.cookie?.[node.name]);
+		if (value !== void 0 && (live || node.required || values.cookie?.[node.name])) target.cookies[node.name] = value;
+	}
+	const server = (values.server || operation.servers?.[0]?.url || operation.serverUrl || "").trim().replace(/\/+$/, "");
+	const pathname = operation.path.replace(/\{([^}]+)\}/g, (match, name) => pathValues[name] !== void 0 ? encodeURIComponent(pathValues[name]) : match);
+	const query = Object.entries(target.query).map(([key, value]) => `${encodeURIComponent(key)}=${encodeValue(value)}`).join("&");
+	const url = `${server}${pathname}${query ? `?${query}` : ""}`;
+	const cookieHeader = Object.entries(target.cookies).map(([key, value]) => `${key}=${value}`).join("; ");
+	if (cookieHeader) target.headers.Cookie = cookieHeader;
+	const contentType = operation.requestBody?.contentType;
+	const kind = operation.requestBody ? bodyKind(contentType) : "none";
+	const body = values.body !== void 0 ? values.body : operation.requestBody?.example;
+	return {
+		method: operation.method,
+		url,
+		headers: target.headers,
+		contentType,
+		bodyKind: kind,
+		body: kind === "none" ? void 0 : body,
+		fields: kind === "form" || kind === "multipart" ? parseFields(body) : void 0
+	};
+}
+function shellQuote(value) {
+	return `'${String(value).replace(/'/g, `'\\''`)}'`;
+}
+function curlSample(request) {
+	const { method, url, headers, bodyKind: kind, body, fields, contentType } = request;
+	const lines = [`curl -X ${method} ${shellQuote(url)}`];
+	for (const [key, value] of Object.entries(headers)) lines.push(`  -H ${shellQuote(`${key}: ${value}`)}`);
+	if (kind === "json" && body) lines.push(`  -H ${shellQuote(`Content-Type: ${contentType}`)}`, `  -d ${shellQuote(body)}`);
+	else if (kind === "form") for (const [key, value] of Object.entries(fields || {})) lines.push(`  --data-urlencode ${shellQuote(`${key}=${value}`)}`);
+	else if (kind === "multipart") for (const [key, value] of Object.entries(fields || {})) lines.push(`  -F ${shellQuote(`${key}=${value}`)}`);
+	else if (kind === "raw" && body) lines.push(`  -H ${shellQuote(`Content-Type: ${contentType}`)}`, `  -d ${shellQuote(body)}`);
+	return lines.join(" \\\n");
+}
+
+//#endregion
+//#region src/components/ApiPlayground.tsx
+const REQUEST_TIMEOUT_MS = 3e4;
+const AUTH_STORAGE_KEY = "shiso:api-auth";
+const BODYLESS_METHODS = /* @__PURE__ */ new Set(["GET", "HEAD"]);
+const PARAMETER_LOCATIONS = [
+	"path",
+	"query",
+	"header"
+];
+const inputClass = "h-8 w-full min-w-0 rounded-md border border-border bg-background px-2.5 font-mono text-foreground text-sm placeholder:text-muted-foreground focus-visible:border-ring focus-visible:outline-none focus-visible:ring-3 focus-visible:ring-ring/50";
+function isBasic(scheme) {
+	return scheme.type === "http" && scheme.scheme === "basic";
+}
+function initialParameters(operation) {
+	const values = {
+		path: {},
+		query: {},
+		header: {}
+	};
+	for (const location of PARAMETER_LOCATIONS) for (const node of operation.parameters[location]) if (node.name) values[location][node.name] = node.example ?? "";
+	return values;
+}
+function readStoredAuth() {
+	try {
+		const raw = window.sessionStorage.getItem(AUTH_STORAGE_KEY);
+		const parsed = raw ? JSON.parse(raw) : void 0;
+		return parsed && typeof parsed === "object" ? parsed : {};
+	} catch {
+		return {};
+	}
+}
+function writeStoredAuth(values) {
+	try {
+		window.sessionStorage.setItem(AUTH_STORAGE_KEY, JSON.stringify(values));
+	} catch {}
+}
+/** Resolves the playground proxy template into the URL to fetch. */
+function proxiedUrl(url, proxy) {
+	if (!proxy) return url;
+	const encoded = encodeURIComponent(url);
+	return proxy.includes("$url") ? proxy.replaceAll("$url", encoded) : `${proxy}${encoded}`;
+}
+function prettyBody(text, contentType) {
+	if (/json/i.test(contentType || "") || /^\s*[{[]/.test(text)) try {
+		return {
+			body: JSON.stringify(JSON.parse(text), null, 2),
+			json: true
+		};
+	} catch {}
+	return {
+		body: text,
+		json: false
+	};
+}
+function ParameterInput({ id, node, value, onChange }) {
+	const options = node.enum ?? (node.type === "boolean" ? ["true", "false"] : void 0);
+	if (options) return /* @__PURE__ */ jsxs("select", {
+		id,
+		className: inputClass,
+		value,
+		required: node.required,
+		onChange: (event) => onChange(event.target.value),
+		children: [!node.required && /* @__PURE__ */ jsx("option", {
+			value: "",
+			children: "—"
+		}), options.map((option) => /* @__PURE__ */ jsx("option", {
+			value: option,
+			children: option
+		}, option))]
+	});
+	return /* @__PURE__ */ jsx("input", {
+		id,
+		type: "text",
+		className: inputClass,
+		value,
+		required: node.required,
+		placeholder: node.type,
+		autoComplete: "off",
+		spellCheck: false,
+		onChange: (event) => onChange(event.target.value)
+	});
+}
+function Field({ id, label, required, hint, children }) {
+	const labels = useLabels();
+	return /* @__PURE__ */ jsxs("div", {
+		className: "grid grid-cols-[minmax(0,1fr)] gap-1 sm:grid-cols-[minmax(8rem,30%)_minmax(0,1fr)] sm:items-center sm:gap-3",
+		children: [/* @__PURE__ */ jsxs("label", {
+			htmlFor: id,
+			className: "flex flex-wrap items-baseline gap-1.5 text-sm",
+			children: [/* @__PURE__ */ jsx("span", {
+				className: "font-mono text-foreground",
+				children: label
+			}), required ? /* @__PURE__ */ jsx("span", {
+				className: "text-destructive text-xs",
+				children: labels.fieldRequired
+			}) : hint ? /* @__PURE__ */ jsx("span", {
+				className: "text-muted-foreground text-xs",
+				children: hint
+			}) : null]
+		}), children]
+	});
+}
+/**
+* The "Try it" panel: a form built from the operation's servers, security
+* schemes, parameters, and request body that sends real requests from the
+* browser and shows the response. Credentials persist in sessionStorage so a
+* token entered once is reused on every endpoint page during the tab's life.
+*/
+function ApiPlayground({ operation, proxy }) {
+	const labels = useLabels();
+	const idPrefix = useId();
+	const [server, setServer] = useState(operation.servers[0]?.url ?? operation.serverUrl);
+	const [auth, setAuth] = useState({});
+	const [parameters, setParameters] = useState(() => initialParameters(operation));
+	const [body, setBody] = useState(operation.requestBody?.example ?? "");
+	const [status, setStatus] = useState("idle");
+	const [response, setResponse] = useState();
+	const [error, setError] = useState();
+	const controller = useRef(null);
+	useEffect(() => {
+		setAuth(readStoredAuth());
+	}, []);
+	useEffect(() => () => controller.current?.abort(), []);
+	const hasBody = !!operation.requestBody && !BODYLESS_METHODS.has(operation.method);
+	const requestValues = useMemo(() => ({
+		live: true,
+		server,
+		auth,
+		body: hasBody ? body : void 0,
+		...parameters
+	}), [
+		server,
+		auth,
+		body,
+		hasBody,
+		parameters
+	]);
+	const preview = useMemo(() => curlSample(buildRequest(operation, requestValues)), [operation, requestValues]);
+	function updateAuth(name, value) {
+		setAuth((current) => {
+			const next = {
+				...current,
+				[name]: value
+			};
+			writeStoredAuth(next);
+			return next;
+		});
+	}
+	function updateParameter(location, name, value) {
+		setParameters((current) => ({
+			...current,
+			[location]: {
+				...current[location],
+				[name]: value
+			}
+		}));
+	}
+	function cancel() {
+		controller.current?.abort();
+	}
+	async function send(event) {
+		event.preventDefault();
+		if (status === "pending") return;
+		const request = buildRequest(operation, requestValues);
+		const abort = new AbortController();
+		controller.current = abort;
+		setStatus("pending");
+		setError(void 0);
+		const timeout = window.setTimeout(() => abort.abort("timeout"), REQUEST_TIMEOUT_MS);
+		const started = performance.now();
+		try {
+			const headers = new Headers();
+			for (const [key, value] of Object.entries(request.headers)) if (key.toLowerCase() !== "cookie") headers.set(key, value);
+			let payload;
+			if (hasBody) {
+				const fields = request.fields ?? {};
+				if (request.bodyKind === "form") payload = new URLSearchParams(fields);
+				else if (request.bodyKind === "multipart") {
+					const form = new FormData();
+					for (const [key, value] of Object.entries(fields)) form.append(key, value);
+					payload = form;
+				} else if (request.body) {
+					payload = request.body;
+					if (request.contentType) headers.set("Content-Type", request.contentType);
+				}
+			}
+			const result = await fetch(proxiedUrl(request.url, proxy), {
+				method: request.method,
+				headers,
+				body: payload,
+				signal: abort.signal
+			});
+			const { body: pretty, json } = prettyBody(await result.text(), result.headers.get("content-type"));
+			const responseHeaders = [];
+			result.headers.forEach((value, key) => {
+				responseHeaders.push([key, value]);
+			});
+			setResponse({
+				status: result.status,
+				statusText: result.statusText,
+				headers: responseHeaders,
+				body: pretty,
+				json,
+				elapsed: Math.round(performance.now() - started)
+			});
+			setStatus("done");
+		} catch (caught) {
+			if (abort.signal.aborted && abort.signal.reason === "timeout") {
+				setError(labels.apiRequestTimedOut);
+				setStatus("error");
+			} else if (abort.signal.aborted) setStatus(response ? "done" : "idle");
+			else {
+				const detail = caught instanceof Error && caught.message ? ` (${caught.message})` : "";
+				setError(`${labels.apiRequestFailed}${detail}`);
+				setStatus("error");
+			}
+		} finally {
+			window.clearTimeout(timeout);
+			if (controller.current === abort) controller.current = null;
+		}
+	}
+	const serverListId = `${idPrefix}-servers`;
+	const parameterGroups = PARAMETER_LOCATIONS.map((location) => ({
+		location,
+		name: {
+			path: labels.apiPathParameters,
+			query: labels.apiQueryParameters,
+			header: labels.apiHeaders
+		}[location],
+		nodes: operation.parameters[location].filter((node) => node.name)
+	})).filter((group) => group.nodes.length > 0);
+	return /* @__PURE__ */ jsxs("form", {
+		onSubmit: send,
+		className: "not-prose my-4 flex flex-col gap-5 rounded-lg border border-border bg-card p-4 text-sm",
+		"data-slot": "api-playground",
+		"data-pagefind-ignore": true,
+		"aria-busy": status === "pending",
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex flex-col gap-2",
+				children: [/* @__PURE__ */ jsx("label", {
+					htmlFor: `${idPrefix}-server`,
+					className: "text-muted-foreground text-xs",
+					children: labels.apiServer
+				}), /* @__PURE__ */ jsxs("div", {
+					className: "flex flex-wrap items-center gap-2",
+					children: [
+						/* @__PURE__ */ jsx(Badge, {
+							color: methodColor(operation.method),
+							size: "sm",
+							className: "font-mono",
+							children: operation.method
+						}),
+						/* @__PURE__ */ jsx("input", {
+							id: `${idPrefix}-server`,
+							type: "text",
+							className: cn(inputClass, "flex-1 basis-48"),
+							value: server,
+							list: operation.servers.length > 1 ? serverListId : void 0,
+							autoComplete: "off",
+							spellCheck: false,
+							onChange: (event) => setServer(event.target.value)
+						}),
+						operation.servers.length > 1 && /* @__PURE__ */ jsx("datalist", {
+							id: serverListId,
+							children: operation.servers.map((item) => /* @__PURE__ */ jsx("option", {
+								value: item.url,
+								children: item.description
+							}, item.url))
+						}),
+						/* @__PURE__ */ jsx("code", {
+							className: "font-mono text-muted-foreground",
+							children: operation.path
+						})
+					]
+				})]
+			}),
+			operation.security.length > 0 && /* @__PURE__ */ jsxs("fieldset", {
+				className: "flex flex-col gap-3",
+				children: [
+					/* @__PURE__ */ jsx("legend", {
+						className: "mb-2 text-muted-foreground text-xs",
+						children: labels.apiAuthorization
+					}),
+					operation.security.map((scheme) => {
+						const value = auth[scheme.name];
+						const fieldId = `${idPrefix}-auth-${scheme.name}`;
+						if (isBasic(scheme)) {
+							const basic = value && typeof value === "object" ? value : {
+								username: "",
+								password: ""
+							};
+							return /* @__PURE__ */ jsxs("div", {
+								className: "flex flex-col gap-2",
+								children: [/* @__PURE__ */ jsx(Field, {
+									id: `${fieldId}-user`,
+									label: labels.apiUsername,
+									hint: scheme.name,
+									children: /* @__PURE__ */ jsx("input", {
+										id: `${fieldId}-user`,
+										type: "text",
+										className: inputClass,
+										value: basic.username,
+										autoComplete: "off",
+										onChange: (event) => updateAuth(scheme.name, {
+											...basic,
+											username: event.target.value
+										})
+									})
+								}), /* @__PURE__ */ jsx(Field, {
+									id: `${fieldId}-pass`,
+									label: labels.apiPassword,
+									children: /* @__PURE__ */ jsx("input", {
+										id: `${fieldId}-pass`,
+										type: "password",
+										className: inputClass,
+										value: basic.password,
+										autoComplete: "off",
+										onChange: (event) => updateAuth(scheme.name, {
+											...basic,
+											password: event.target.value
+										})
+									})
+								})]
+							}, scheme.name);
+						}
+						const label = scheme.type === "apiKey" ? scheme.paramName || labels.apiApiKey : scheme.type === "http" && scheme.scheme !== "bearer" ? "Authorization" : labels.apiToken;
+						return /* @__PURE__ */ jsx(Field, {
+							id: fieldId,
+							label,
+							hint: scheme.label,
+							children: /* @__PURE__ */ jsx("input", {
+								id: fieldId,
+								type: "password",
+								className: inputClass,
+								value: typeof value === "string" ? value : "",
+								autoComplete: "off",
+								onChange: (event) => updateAuth(scheme.name, event.target.value)
+							})
+						}, scheme.name);
+					}),
+					/* @__PURE__ */ jsx("p", {
+						className: "m-0 text-muted-foreground text-xs",
+						children: labels.apiCredentialsStored
+					})
+				]
+			}),
+			parameterGroups.map((group) => /* @__PURE__ */ jsxs("fieldset", {
+				className: "flex flex-col gap-3",
+				children: [/* @__PURE__ */ jsx("legend", {
+					className: "mb-2 text-muted-foreground text-xs",
+					children: group.name
+				}), group.nodes.map((node) => {
+					const name = node.name;
+					const fieldId = `${idPrefix}-${group.location}-${name}`;
+					return /* @__PURE__ */ jsx(Field, {
+						id: fieldId,
+						label: name,
+						required: node.required,
+						hint: labels.apiOptional,
+						children: /* @__PURE__ */ jsx(ParameterInput, {
+							id: fieldId,
+							node,
+							value: parameters[group.location][name] ?? "",
+							onChange: (value) => updateParameter(group.location, name, value)
+						})
+					}, name);
+				})]
+			}, group.location)),
+			operation.parameters.cookie.length > 0 && /* @__PURE__ */ jsx("p", {
+				className: "m-0 text-muted-foreground text-xs",
+				children: labels.apiCookiesUnsupported
+			}),
+			hasBody && /* @__PURE__ */ jsxs("div", {
+				className: "flex flex-col gap-2",
+				children: [/* @__PURE__ */ jsxs("label", {
+					htmlFor: `${idPrefix}-body`,
+					className: "flex items-baseline gap-2 text-muted-foreground text-xs",
+					children: [labels.apiBody, /* @__PURE__ */ jsx("span", {
+						className: "font-mono",
+						children: operation.requestBody?.contentType
+					})]
+				}), /* @__PURE__ */ jsx("textarea", {
+					id: `${idPrefix}-body`,
+					className: cn(inputClass, "h-auto min-h-32 resize-y py-2 leading-relaxed"),
+					value: body,
+					spellCheck: false,
+					onChange: (event) => setBody(event.target.value)
+				})]
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex flex-wrap items-center gap-2",
+				children: [/* @__PURE__ */ jsx(Button, {
+					type: "submit",
+					disabled: status === "pending",
+					children: status === "pending" ? labels.apiSending : labels.apiSend
+				}), status === "pending" && /* @__PURE__ */ jsx(Button, {
+					type: "button",
+					variant: "outline",
+					onClick: cancel,
+					children: labels.apiCancel
+				})]
+			}),
+			/* @__PURE__ */ jsx(Expandable, {
+				title: labels.apiRequest,
+				children: /* @__PURE__ */ jsx(CodeBlock, {
+					"data-language": "bash",
+					"data-line-count": String(preview.split("\n").length),
+					className: "text-xs",
+					children: /* @__PURE__ */ jsx("code", {
+						className: "language-bash",
+						children: preview
+					})
+				})
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex flex-col gap-2",
+				role: "status",
+				"aria-live": "polite",
+				children: [
+					/* @__PURE__ */ jsx("div", {
+						className: "text-muted-foreground text-xs",
+						children: labels.apiResponse
+					}),
+					status === "error" && error && /* @__PURE__ */ jsx("p", {
+						className: "m-0 text-destructive",
+						children: error
+					}),
+					response ? /* @__PURE__ */ jsxs(Fragment$1, { children: [
+						/* @__PURE__ */ jsxs("div", {
+							className: "flex flex-wrap items-center gap-2",
+							children: [
+								/* @__PURE__ */ jsx(Badge, {
+									color: statusColor(String(response.status)),
+									size: "sm",
+									children: response.status
+								}),
+								response.statusText && /* @__PURE__ */ jsx("span", {
+									className: "text-muted-foreground",
+									children: response.statusText
+								}),
+								/* @__PURE__ */ jsx("span", {
+									className: "text-muted-foreground text-xs",
+									children: labels.apiElapsed.replace("{ms}", () => String(response.elapsed))
+								})
+							]
+						}),
+						response.headers.length > 0 && /* @__PURE__ */ jsx(Expandable, {
+							title: labels.apiResponseHeaders,
+							children: /* @__PURE__ */ jsx("dl", {
+								className: "m-0 grid grid-cols-[auto_minmax(0,1fr)] gap-x-3 gap-y-1 font-mono text-xs",
+								children: response.headers.map(([key, value]) => /* @__PURE__ */ jsxs("div", {
+									className: "contents",
+									children: [/* @__PURE__ */ jsx("dt", {
+										className: "text-muted-foreground",
+										children: key
+									}), /* @__PURE__ */ jsx("dd", {
+										className: "m-0 break-all text-foreground",
+										children: value
+									})]
+								}, key))
+							})
+						}),
+						/* @__PURE__ */ jsx(CodeBlock, {
+							"data-language": response.json ? "json" : "text",
+							"data-title": labels.apiResponseBody,
+							"data-line-count": String(response.body.split("\n").length),
+							className: "text-xs",
+							children: /* @__PURE__ */ jsx("code", {
+								className: response.json ? "language-json" : "language-text",
+								children: response.body || " "
+							})
+						})
+					] }) : status !== "error" && /* @__PURE__ */ jsx("p", {
+						className: "m-0 text-muted-foreground",
+						children: labels.apiNoResponse
+					})
+				]
+			})
+		]
+	});
+}
+
 //#endregion
 //#region src/components/OpenApiOperation.tsx
-function FieldChildren({ node }) {
+function FieldChildren$1({ node }) {
 	const labels = useLabels();
 	return /* @__PURE__ */ jsxs(Fragment$1, { children: [node.description, node.enum && node.enum.length > 0 && /* @__PURE__ */ jsxs("div", {
 		className: "mt-1",
@@ -8159,10 +9108,10 @@ function schemaDetails(node, labels) {
 	if (!node.children?.length) return void 0;
 	return /* @__PURE__ */ jsx(Expandable, {
 		title: node.type === "oneOf" || node.type === "anyOf" ? labels.allowedTypes : labels.properties,
-		children: /* @__PURE__ */ jsx(SchemaTable, { nodes: node.children })
+		children: /* @__PURE__ */ jsx(SchemaTable$1, { nodes: node.children })
 	});
 }
-function SchemaTable({ nodes }) {
+function SchemaTable$1({ nodes }) {
 	const labels = useLabels();
 	return /* @__PURE__ */ jsx(PropertiesTable, { children: nodes.map((node) => /* @__PURE__ */ jsx(PropertiesTable.Row, {
 		name: node.name || node.type,
@@ -8171,13 +9120,13 @@ function SchemaTable({ nodes }) {
 		deprecated: node.deprecated,
 		default: node.default,
 		details: schemaDetails(node, labels),
-		children: /* @__PURE__ */ jsx(FieldChildren, { node })
+		children: /* @__PURE__ */ jsx(FieldChildren$1, { node })
 	}, node.name || node.type)) });
 }
 /** Renders a schema tree: a root object's properties, or the node itself. */
 function SchemaFields({ node }) {
 	const isUnion = node.type === "oneOf" || node.type === "anyOf";
-	return /* @__PURE__ */ jsx(SchemaTable, { nodes: !node.name && !isUnion && node.children?.length ? node.children : [node] });
+	return /* @__PURE__ */ jsx(SchemaTable$1, { nodes: !node.name && !isUnion && node.children?.length ? node.children : [node] });
 }
 function HighlightedCode({ language, title, html, source, lineCount }) {
 	return /* @__PURE__ */ jsx(CodeBlock, {
@@ -8193,40 +9142,57 @@ function HighlightedCode({ language, title, html, source, lineCount }) {
 		})
 	});
 }
+/** How a credential is sent, e.g. "Bearer <token>" or "<api-key>". */
+function credentialExample(scheme) {
+	const placeholder = securityPlaceholder(scheme);
+	if (scheme.type === "apiKey") return placeholder;
+	return `${scheme.type === "http" && scheme.scheme && scheme.scheme !== "bearer" ? scheme.scheme.charAt(0).toUpperCase() + scheme.scheme.slice(1) : "Bearer"} ${placeholder}`;
+}
 /** The generated reference for one API operation, rendered under the page body. */
-function OpenApiOperation({ operation }) {
+function OpenApiOperation({ operation, playground: requested = false }) {
 	const labels = useLabels();
-	const sectionEntries = operationSections(operation);
-	const sections = new Map(sectionEntries.map((entry) => [entry.name, entry.id]));
+	const playground = operation.webhook ? false : requested;
+	const options = { playground: !!playground };
+	const sectionEntries = operationSections(operation, labels, options);
+	const sections = new Map(operationSections(operation, void 0, options).map((entry) => [entry.name, entry.id]));
+	const parameterSections = operationParameterSections(operation, labels);
+	const parameterOffset = playground ? 1 : 0;
 	return /* @__PURE__ */ jsxs("div", {
 		className: "docs-markdown",
 		children: [
-			operationParameterSections(operation, labels).map(({ location, name }, index) => /* @__PURE__ */ jsxs("section", { children: [/* @__PURE__ */ jsx("h2", {
-				id: sectionEntries[index].id,
+			playground && /* @__PURE__ */ jsxs("section", { children: [/* @__PURE__ */ jsx("h2", {
+				id: sections.get("Try it"),
+				children: labels.apiPlayground
+			}), /* @__PURE__ */ jsx(ApiPlayground, {
+				operation,
+				proxy: playground.proxy
+			})] }),
+			parameterSections.map(({ location, name }, index) => /* @__PURE__ */ jsxs("section", { children: [/* @__PURE__ */ jsx("h2", {
+				id: sectionEntries[index + parameterOffset].id,
 				children: name
-			}), /* @__PURE__ */ jsxs(PropertiesTable, { children: [location === "header" && operation.security.length > 0 && /* @__PURE__ */ jsxs(PropertiesTable.Row, {
-				name: "Authorization",
+			}), /* @__PURE__ */ jsxs(PropertiesTable, { children: [securityForLocation(operation, location).map((scheme) => /* @__PURE__ */ jsxs(PropertiesTable.Row, {
+				name: securityFieldName(scheme),
 				type: "string",
 				required: true,
 				children: [
-					labels.apiCredentials,
+					scheme.description || labels.apiCredentials,
 					" ",
-					/* @__PURE__ */ jsx("code", { children: "Bearer <token>" }),
+					/* @__PURE__ */ jsx("code", { children: credentialExample(scheme) }),
 					"."
 				]
-			}), operation.parameters[location].map((parameter) => /* @__PURE__ */ jsx(PropertiesTable.Row, {
+			}, `security:${scheme.name}`)), operation.parameters[location].map((parameter) => /* @__PURE__ */ jsx(PropertiesTable.Row, {
 				name: parameter.name || parameter.type,
 				type: parameter.type,
 				required: parameter.required,
 				deprecated: parameter.deprecated,
 				default: parameter.default,
 				details: schemaDetails(parameter, labels),
-				children: /* @__PURE__ */ jsx(FieldChildren, { node: parameter })
+				children: /* @__PURE__ */ jsx(FieldChildren$1, { node: parameter })
 			}, parameter.name))] })] }, location)),
 			operation.requestBody && /* @__PURE__ */ jsxs("section", { children: [
 				/* @__PURE__ */ jsx("h2", {
-					id: sections.get("Request body"),
-					children: labels.apiRequestBody
+					id: sections.get(operation.webhook ? "Payload" : "Request body"),
+					children: operation.webhook ? labels.apiPayload : labels.apiRequestBody
 				}),
 				/* @__PURE__ */ jsx(SchemaFields, { node: operation.requestBody.schema }),
 				operation.requestBody.example && /* @__PURE__ */ jsx(HighlightedCode, {
@@ -8276,6 +9242,67 @@ function OpenApiOperation({ operation }) {
 	});
 }
 
+//#endregion
+//#region src/components/OpenApiSchema.tsx
+function FieldChildren({ node }) {
+	const labels = useLabels();
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [node.description, node.enum && node.enum.length > 0 && /* @__PURE__ */ jsxs("div", {
+		className: "mt-1",
+		children: [
+			labels.fieldOptions,
+			" ",
+			node.enum.map((value, index) => /* @__PURE__ */ jsxs("span", { children: [index > 0 && ", ", /* @__PURE__ */ jsx("code", { children: value })] }, value))
+		]
+	})] });
+}
+function SchemaTable({ nodes, labels }) {
+	return /* @__PURE__ */ jsx(PropertiesTable, { children: nodes.map((node) => /* @__PURE__ */ jsx(PropertiesTable.Row, {
+		name: node.name || node.type,
+		type: node.type,
+		required: node.required,
+		deprecated: node.deprecated,
+		default: node.default,
+		details: node.children?.length ? /* @__PURE__ */ jsx(Expandable, {
+			title: node.type === "oneOf" || node.type === "anyOf" ? labels.allowedTypes : labels.properties,
+			children: /* @__PURE__ */ jsx(SchemaTable, {
+				nodes: node.children,
+				labels
+			})
+		}) : void 0,
+		children: /* @__PURE__ */ jsx(FieldChildren, { node })
+	}, node.name || node.type)) });
+}
+/** The generated reference for one named component schema. */
+function OpenApiSchema({ page }) {
+	const labels = useLabels();
+	const sections = new Map(schemaSections(page, labels).map((entry) => [entry.id, entry.name]));
+	const properties = sections.get("properties");
+	const example = sections.get("example");
+	return /* @__PURE__ */ jsxs("div", {
+		className: "docs-markdown",
+		children: [properties && /* @__PURE__ */ jsxs("section", { children: [/* @__PURE__ */ jsx("h2", {
+			id: "properties",
+			children: properties
+		}), /* @__PURE__ */ jsx(SchemaTable, {
+			nodes: page.schema.children ?? [],
+			labels
+		})] }), example && page.example && /* @__PURE__ */ jsxs("section", { children: [/* @__PURE__ */ jsx("h2", {
+			id: "example",
+			children: example
+		}), /* @__PURE__ */ jsx(CodeBlock, {
+			"data-language": "json",
+			"data-title": page.name,
+			children: page.exampleHtml ? /* @__PURE__ */ jsx("code", {
+				className: "language-json",
+				dangerouslySetInnerHTML: { __html: page.exampleHtml }
+			}) : /* @__PURE__ */ jsx("code", {
+				className: "language-json",
+				children: page.example
+			})
+		})] })]
+	});
+}
+
 //#endregion
 //#region src/components/PageActions.tsx
 function editHref(template, filePath) {
@@ -8409,6 +9436,8 @@ function DocContent({ page, doc, site }) {
 	const contextualOptions = resolveContextualOptions(site.contextualOptions, page, site.labels);
 	const related = resolveRelated(doc.frontmatter?.related);
 	const operation = getOperation(doc.frontmatter?.openapi);
+	const schema = operation ? void 0 : getSchema(doc.frontmatter?.["openapi-schema"]);
+	const playground = operation && resolvePlaygroundDisplay(site.api.playground, doc.frontmatter) === "interactive" ? { proxy: site.api.playground.proxy } : false;
 	const dateFormat = new Intl.DateTimeFormat(resolveLocale(page.language, site.locale), {
 		dateStyle: "medium",
 		timeZone: "UTC"
@@ -8442,10 +9471,10 @@ function DocContent({ page, doc, site }) {
 				className: "mt-3 flex flex-wrap items-center gap-2",
 				children: [
 					/* @__PURE__ */ jsx(Badge, {
-						color: methodColor(operation.method),
+						color: methodColor(operation.webhook ? "WEBHOOK" : operation.method),
 						size: "sm",
 						className: "font-mono",
-						children: operation.method
+						children: operation.webhook ? "WEBHOOK" : operation.method
 					}),
 					/* @__PURE__ */ jsx("code", {
 						className: "font-mono text-muted-foreground text-sm",
@@ -8467,7 +9496,11 @@ function DocContent({ page, doc, site }) {
 				className: "docs-markdown",
 				children: /* @__PURE__ */ jsx(Content, {})
 			}),
-			operation && /* @__PURE__ */ jsx(OpenApiOperation, { operation }),
+			operation && /* @__PURE__ */ jsx(OpenApiOperation, {
+				operation,
+				playground
+			}),
+			schema && /* @__PURE__ */ jsx(OpenApiSchema, { page: schema }),
 			/* @__PURE__ */ jsx(PageActions, {
 				page,
 				frontmatter: doc.frontmatter,
@@ -8814,7 +9847,7 @@ function NavNodes({ nodes, pathname, depth, drilldown, expandLabel, collapseLabe
 						color: methodColor(method),
 						size: "xs",
 						className: "w-10 shrink-0 justify-center whitespace-nowrap font-mono",
-						children: method === "DELETE" ? "DEL" : method
+						children: methodBadgeText(method)
 					}) : null,
 					label,
 					!method && tag ? /* @__PURE__ */ jsx(Badge$1, {
@@ -8948,7 +9981,8 @@ function Docs({ page, doc, site }) {
 		}), /* @__PURE__ */ jsx(Footer, { footer: site.footer })]
 	});
 	const operation = getOperation(doc.frontmatter?.openapi);
-	const toc = operation ? [...doc.toc || [], ...operationSections(operation, site.labels)] : doc.toc;
+	const schema = operation ? void 0 : getSchema(doc.frontmatter?.["openapi-schema"]);
+	const toc = operation ? [...doc.toc || [], ...operationSections(operation, site.labels, { playground: resolvePlaygroundDisplay(site.api.playground, doc.frontmatter) === "interactive" })] : schema ? [...doc.toc || [], ...schemaSections(schema, site.labels)] : doc.toc;
 	return /* @__PURE__ */ jsx(PanelProvider, { children: /* @__PURE__ */ jsx(DocsBody, {
 		page,
 		doc,