@wildo-ai/saas-technical-doc 1.1.4 → 1.1.6

package/dist/esm/runtime/openapi-reference-view.js

@@ -1,6 +1,30 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { Fragment, useEffect, useMemo, useState } from 'react';
+import { Fragment, createContext, useContext, useEffect, useMemo, useId, useRef, useState, } from 'react';
 import { ApiReferenceSchemaCompositionKind } from './openapi-reference-model.js';
+import { ApiReferenceSampleLanguage, buildRequestSamples, responseSamples } from './openapi-reference-samples.js';
+import { apiReferenceResourceSlug } from './openapi-reference-navigation.js';
+import { API_REFERENCE_STYLES } from './openapi-reference-styles.js';
+import { ApiReferenceWordsProvider, renderList, renderSentence, useReferenceWords } from './openapi-reference-words-context.js';
+import { DocumentationListKind } from './documentation-site-translator.js';
+import { apiReferencePageHref, apiReferencePageSlugForFragment } from '../openapi/api-reference-pages.js';
+const ApiDocumentConnectionContext = createContext({ servers: [], serverUrl: null, selectServer: () => undefined, securitySchemes: [] });
+const SchemaResolutionContext = createContext({ componentsByName: new Map(), expanding: new Set() });
+/** The component a reference node names, when it can be shown in place on this branch. */
+function expandableReference(schema, resolution) {
+    if (schema.referenceName === null || resolution.expanding.has(schema.referenceName))
+        return null;
+    const resolved = resolution.componentsByName.get(schema.referenceName);
+    return resolved === undefined ? null : { name: schema.referenceName, schema: resolved };
+}
+/** The schema a presenter should describe: the referenced component when it expands, else the node itself. */
+function displayedSchema(schema, resolution) {
+    return expandableReference(schema, resolution)?.schema ?? schema;
+}
+/** A heading whose level follows where it sits: the same operation is an `h3` on its page and an `h4` on the single-page reference. */
+function Heading({ level, id, className, children }) {
+    const Tag = `h${Math.min(Math.max(level, 1), 6)}`;
+    return _jsx(Tag, { id: id, className: className, children: children });
+}
 /**
  * Generic OpenAPI reference presentation for every generated application.
  *
@@ -8,45 +32,251 @@ import { ApiReferenceSchemaCompositionKind } from './openapi-reference-model.js'
  * Application routes, branding, and document loading remain outside this
  * component; API semantics remain in OpenAPI rather than in React.
  */
-export function OpenApiReferenceView({ model }) {
+/** The stylesheet and the two contexts every reference surface renders inside. */
+function ReferenceProviders({ model, words, children }) {
+    const schemaResolution = useMemo(() => ({
+        componentsByName: new Map(model.componentSchemas.map((component) => [component.name, component.schema])),
+        expanding: new Set(),
+    }), [model]);
+    const [selectedServerUrl, setSelectedServerUrl] = useState(null);
+    const connection = useMemo(() => ({
+        servers: model.servers,
+        serverUrl: model.servers.find((server) => server.url === selectedServerUrl)?.url ?? model.servers[0]?.url ?? null,
+        selectServer: setSelectedServerUrl,
+        securitySchemes: model.securitySchemes,
+    }), [model, selectedServerUrl]);
+    return _jsx(ApiReferenceWordsProvider, { value: words, children: _jsx(SchemaResolutionContext.Provider, { value: schemaResolution, children: _jsxs(ApiDocumentConnectionContext.Provider, { value: connection, children: [_jsx("style", { children: API_REFERENCE_STYLES }), children] }) }) });
+}
+/* Shell: rail, drawer and sub-bar --------------------------------------------------------------- */
+const RAIL_ID = 'wildo-api-ref-navigation';
+function MenuIcon() {
+    return _jsx("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", "aria-hidden": "true", children: _jsx("path", { d: "M4 7h16M4 12h16M4 17h16" }) });
+}
+function CloseIcon() {
+    return _jsx("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", "aria-hidden": "true", children: _jsx("path", { d: "M6 6l12 12M18 6L6 18" }) });
+}
+function ChevronIcon() {
+    return _jsx("svg", { width: "12", height: "12", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.4", strokeLinecap: "round", "aria-hidden": "true", children: _jsx("path", { d: "M6 9l6 6 6-6" }) });
+}
+/**
+ * The page frame: the navigation rail beside the page content and, on narrower screens, a sticky
+ * sub-bar whose Menu button opens the rail as a drawer. Without navigation the content fills the
+ * width and no rail or sub-bar is drawn.
+ */
+function ReferenceShell({ navigation, subbarTitle, currentResource, activeFragment, children, }) {
+    const words = useReferenceWords();
+    const [isRailOpen, setIsRailOpen] = useState(false);
+    const menuButtonRef = useRef(null);
+    const railFilterRef = useRef(null);
+    /** Set when the drawer is dismissed (Escape, backdrop, Close), so focus goes back to the Menu button. */
+    const returnsFocusToMenu = useRef(false);
+    /**
+     * Focus moves AFTER the render that removes `inert` from the page content: the Menu button sits inside
+     * that content, and a browser refuses to focus anything in an inert subtree. Focusing in the same tick
+     * as `setIsRailOpen(false)` left focus on the drawer's filter input as it became hidden.
+     */
+    useEffect(() => {
+        if (isRailOpen) {
+            railFilterRef.current?.focus();
+            const onKeyDown = (event) => {
+                if (event.key !== 'Escape')
+                    return;
+                returnsFocusToMenu.current = true;
+                setIsRailOpen(false);
+            };
+            document.addEventListener('keydown', onKeyDown);
+            return () => document.removeEventListener('keydown', onKeyDown);
+        }
+        if (returnsFocusToMenu.current) {
+            returnsFocusToMenu.current = false;
+            menuButtonRef.current?.focus();
+        }
+        return undefined;
+    }, [isRailOpen]);
+    const closeRail = () => {
+        returnsFocusToMenu.current = true;
+        setIsRailOpen(false);
+    };
+    if (navigation === null) {
+        return _jsx("div", { className: "wildo-api-ref", children: _jsx("div", { className: "wildo-api-ref__shell", children: _jsx("div", { className: "wildo-api-ref__main", children: children }) }) });
+    }
+    return _jsx("div", { className: `wildo-api-ref${isRailOpen ? ' wildo-api-ref--rail-open' : ''}`, children: _jsxs("div", { className: "wildo-api-ref__shell wildo-api-ref__shell--with-rail", children: [_jsx("button", { type: "button", className: "wildo-api-ref__backdrop", "aria-label": words.closeNavigation, tabIndex: -1, onClick: closeRail }), _jsx(NavigationRail, { navigation: navigation, currentResource: currentResource, activeFragment: activeFragment, filterRef: railFilterRef, onClose: closeRail, onNavigate: () => setIsRailOpen(false) }), _jsxs("div", { className: "wildo-api-ref__main", inert: isRailOpen || undefined, children: [_jsxs("div", { className: "wildo-api-ref__subbar", children: [_jsx("button", { ref: menuButtonRef, type: "button", className: "wildo-api-ref__icon-button", "aria-label": words.openNavigation, "aria-controls": RAIL_ID, "aria-expanded": isRailOpen, onClick: () => setIsRailOpen(true), children: _jsx(MenuIcon, {}) }), _jsx("span", { className: "wildo-api-ref__subbar-title", children: subbarTitle }), currentResource !== null && currentResource.families.length > 0
+                                    ? _jsx(OperationSwitcher, { resource: currentResource, activeFragment: activeFragment })
+                                    : null] }), children] })] }) });
+}
+/**
+ * The left rail: the other sections of the portal, a resource filter, the overview, and every
+ * resource by category. The resource being read lists its operation families beneath it.
+ */
+function NavigationRail({ navigation, currentResource, activeFragment, filterRef, onClose, onNavigate, }) {
+    const words = useReferenceWords();
     const [query, setQuery] = useState('');
-    const [selectedResourceRef, setSelectedResourceRef] = useState(null);
-    const [activeFragment, setActiveFragment] = useState(() => currentFragment());
-    const resources = useMemo(() => filterResources(model, query), [model, query]);
-    const selectedResource = model.resources.find((resource) => resource.resourceRef === selectedResourceRef) ?? null;
+    const normalizedQuery = query.trim().toLocaleLowerCase();
+    const categories = useMemo(() => navigation.categories
+        .map((category) => ({
+        ...category,
+        resources: normalizedQuery.length === 0
+            ? category.resources
+            : category.resources.filter((resource) => resource.label.toLocaleLowerCase().includes(normalizedQuery)
+                || (category.label ?? '').toLocaleLowerCase().includes(normalizedQuery)),
+    }))
+        .filter((category) => category.resources.length > 0), [navigation, normalizedQuery]);
+    const matchCount = categories.reduce((count, category) => count + category.resources.length, 0);
+    return _jsxs("aside", { id: RAIL_ID, className: "wildo-api-ref__rail", "aria-label": words.apiNavigation, onClick: (event) => {
+            if (event.target.closest('a') !== null)
+                onNavigate();
+        }, children: [_jsxs("div", { className: "wildo-api-ref__rail-head", children: [_jsx("strong", { children: navigation.title }), _jsx("button", { type: "button", className: "wildo-api-ref__icon-button", "aria-label": words.closeNavigation, onClick: onClose, children: _jsx(CloseIcon, {}) })] }), navigation.sections.length > 1 ? _jsx("nav", { "aria-label": words.apiSections, className: "wildo-api-ref__sections", children: navigation.sections.map((section) => _jsx("a", { href: section.href, "aria-current": section.href === navigation.sectionRootPath ? 'page' : undefined, children: section.label }, section.href)) }) : null, _jsxs("div", { children: [_jsx("label", { className: "wildo-api-ref__label", htmlFor: `${RAIL_ID}-filter`, children: words.filterResources }), _jsx("input", { ref: filterRef, id: `${RAIL_ID}-filter`, className: "wildo-api-ref__input", type: "search", value: query, placeholder: words.resourceCount(navigation.resourceCount), onChange: (event) => setQuery(event.target.value) })] }), _jsxs("nav", { "aria-label": words.resourcesNavigation, children: [_jsx("ul", { className: "wildo-api-ref__rail-list", children: _jsx("li", { children: _jsx("a", { className: "wildo-api-ref__rail-link", href: navigation.sectionRootPath, "aria-current": currentResource === null ? 'page' : undefined, children: words.overview }) }) }), _jsxs("div", { className: "wildo-api-ref__rail-categories", children: [categories.length === 0 ? _jsx("p", { className: "wildo-api-ref__rail-empty", role: "status", children: words.noResourceMatches(query) }) : null, categories.map((category) => {
+                                const holdsCurrent = currentResource !== null && category.resources.some((resource) => resource.resourceRef === currentResource.resourceRef);
+                                return _jsxs("details", { className: "wildo-api-ref__rail-category", open: normalizedQuery.length > 0 || holdsCurrent, children: [_jsxs("summary", { children: [_jsx("span", { children: category.label ?? words.otherResources }), _jsx("span", { className: "wildo-api-ref__rail-count", children: category.resources.length })] }), _jsx("ul", { className: "wildo-api-ref__rail-list", children: category.resources.map((resource) => {
+                                                const isCurrent = resource.resourceRef === currentResource?.resourceRef;
+                                                return _jsxs("li", { children: [_jsxs("a", { className: "wildo-api-ref__rail-link", href: resource.href, "aria-current": isCurrent ? 'page' : undefined, children: [_jsx("span", { children: resource.label }), _jsx("span", { className: "wildo-api-ref__rail-count", "aria-hidden": "true", title: words.operationCount(resource.operationCount), children: resource.operationCount })] }), isCurrent ? _jsx(FamilyLinks, { resource: currentResource, activeFragment: activeFragment, className: "wildo-api-ref__rail-families" }) : null] }, resource.resourceRef);
+                                            }) })] }, `${category.id}:${normalizedQuery.length > 0 ? 'filtered' : 'all'}`);
+                            })] }), _jsx("p", { className: "wildo-api-ref__visually-hidden", role: "status", children: normalizedQuery.length > 0 ? words.matchingResources(matchCount) : '' })] })] });
+}
+/** The method a family is known by: its first canonical variant's. */
+function familyMethod(family) {
+    return (family.variants.find((variant) => variant.aliasOfPath === null) ?? family.variants[0])?.method ?? '';
+}
+/** The family that holds the fragment the reader is on, if any. */
+function familyForFragment(resource, fragment) {
+    if (fragment.length === 0)
+        return null;
+    return resource.families.find((family) => family.anchorId === fragment || family.variants.some((variant) => variantOwnsFragment(variant, fragment))) ?? null;
+}
+/** Links to each operation family of `resource`, with its method, marking the one being read. */
+function FamilyLinks({ resource, activeFragment, className, onSelect, }) {
+    const current = familyForFragment(resource, activeFragment);
+    return _jsx("ul", { className: className, children: resource.families.map((family) => _jsx("li", { children: _jsxs("a", { className: "wildo-api-ref__rail-link", href: `#${family.anchorId}`, "aria-current": family === current ? 'location' : undefined, onClick: onSelect, children: [_jsx(MethodBadge, { method: familyMethod(family), small: true }), _jsx("span", { children: family.label })] }) }, family.familyRef)) });
+}
+/**
+ * The sub-bar's operation switcher: a button naming the operation being read, opening a list of the
+ * resource's operation families. It closes on a choice, on Escape and on a click outside it.
+ */
+function OperationSwitcher({ resource, activeFragment }) {
+    const words = useReferenceWords();
+    const [isOpen, setIsOpen] = useState(false);
+    const [query, setQuery] = useState('');
+    const containerRef = useRef(null);
+    const buttonRef = useRef(null);
+    const current = familyForFragment(resource, activeFragment);
+    const panelId = `${resource.anchorId}--operations`;
     useEffect(() => {
-        const synchronizeSelection = () => {
-            const fragment = currentFragment();
-            setActiveFragment(fragment);
-            setSelectedResourceRef(findResourceForFragment(model.resources, fragment)?.resourceRef ?? null);
+        if (!isOpen)
+            return;
+        const onPointerDown = (event) => {
+            if (containerRef.current !== null && !containerRef.current.contains(event.target))
+                setIsOpen(false);
         };
-        synchronizeSelection();
-        window.addEventListener('hashchange', synchronizeSelection);
-        return () => window.removeEventListener('hashchange', synchronizeSelection);
-    }, [model]);
-    /**
-     * The browser performs its ordinary fragment jump before React has mounted a
-     * resource selected from a deep link. Repeat the jump after that resource is
-     * present so resource, family and variant URLs all behave as true deep links.
-     */
+        const onKeyDown = (event) => {
+            if (event.key !== 'Escape')
+                return;
+            setIsOpen(false);
+            buttonRef.current?.focus();
+        };
+        document.addEventListener('pointerdown', onPointerDown);
+        document.addEventListener('keydown', onKeyDown);
+        return () => {
+            document.removeEventListener('pointerdown', onPointerDown);
+            document.removeEventListener('keydown', onKeyDown);
+        };
+    }, [isOpen]);
+    const normalizedQuery = query.trim().toLocaleLowerCase();
+    const filtered = normalizedQuery.length === 0
+        ? resource
+        : { ...resource, families: resource.families.filter((family) => family.label.toLocaleLowerCase().includes(normalizedQuery)
+                || family.variants.some((variant) => variant.summary.toLocaleLowerCase().includes(normalizedQuery) || variant.path.toLocaleLowerCase().includes(normalizedQuery))) };
+    return _jsxs("div", { ref: containerRef, className: "wildo-api-ref__switcher", children: [_jsxs("button", { ref: buttonRef, type: "button", className: "wildo-api-ref__button", "aria-expanded": isOpen, "aria-controls": panelId, onClick: () => setIsOpen((open) => !open), children: [current !== null ? _jsxs(_Fragment, { children: [_jsx(MethodBadge, { method: familyMethod(current), small: true }), current.label] }) : _jsx(_Fragment, { children: words.operationsSwitcher(resource.families.length) }), _jsx(ChevronIcon, {})] }), isOpen ? _jsxs("div", { id: panelId, className: "wildo-api-ref__switcher-panel", role: "group", "aria-label": words.resourceOperations(resource.label), children: [resource.families.length > 8 ? _jsxs("div", { className: "wildo-api-ref__switcher-filter", children: [_jsx("label", { className: "wildo-api-ref__label", htmlFor: `${panelId}-filter`, children: words.filterOperations(resource.families.length) }), _jsx("input", { id: `${panelId}-filter`, className: "wildo-api-ref__input", type: "search", value: query, onChange: (event) => setQuery(event.target.value), autoFocus: true })] }) : null, _jsx(FamilyLinks, { resource: filtered, activeFragment: activeFragment, className: "wildo-api-ref__switcher-list", onSelect: () => setIsOpen(false) })] }) : null] });
+}
+/* Index ---------------------------------------------------------------------------------------- */
+/**
+ * The section's overview, connection details, search and category grid. `resourceHref` decides where a
+ * resource card leads: an anchor on the single-page reference, or the resource's own page.
+ */
+function ResourceIndex({ model, query, onQueryChange, resourceHref, isOpen, collapsible, }) {
+    const words = useReferenceWords();
+    const resources = useMemo(() => filterResources(model, query), [model, query]);
+    const grid = _jsx("nav", { "aria-label": words.apiResources, children: resourceCategoryGroups(resources).map((group) => _jsxs("section", { className: "wildo-api-ref__category", children: [group.category !== null ? _jsxs(_Fragment, { children: [_jsx("h2", { id: group.anchorId, children: group.category.label }), group.category.description !== null ? _jsx("p", { children: _jsx(OpenApiInlineCommonMark, { source: group.category.description }) }) : null] }) : null, _jsx("ul", { className: "wildo-api-ref__resource-grid", children: group.resources.map((resource) => _jsx(ResourceCard, { resource: resource, href: resourceHref(resource) }, resource.resourceRef)) })] }, group.id)) });
+    return _jsxs(_Fragment, { children: [model.description !== null ? _jsx(OpenApiDocumentDescription, { description: model.description }) : null, (model.servers.length > 0 || model.securitySchemes.length > 0)
+                ? _jsx(ApiConnectionDetails, { servers: model.servers, securitySchemes: model.securitySchemes })
+                : null, _jsxs("ul", { className: "wildo-api-ref__stats", "aria-label": words.referenceSize, children: [_jsx("li", { children: words.resourceCount(model.resources.length) }), _jsx("li", { children: words.operationCount(model.operationCount) })] }), _jsx("p", { className: "wildo-api-ref__visually-hidden", children: words.referenceSizeSummary(model.operationCount, model.resources.length) }), _jsxs("div", { className: "wildo-api-ref__search", children: [_jsxs("div", { children: [_jsx("label", { className: "wildo-api-ref__label", htmlFor: "api-reference-search", children: words.searchReference }), _jsx("input", { id: "api-reference-search", className: "wildo-api-ref__input", type: "search", "aria-describedby": "api-reference-search-status", value: query, onChange: (event) => onQueryChange(event.target.value), placeholder: words.searchPlaceholder })] }), query.length > 0 ? _jsx("button", { className: "wildo-api-ref__button", type: "button", onClick: () => onQueryChange(''), children: words.clearSearch }) : null] }), _jsx("p", { id: "api-reference-search-status", className: "wildo-api-ref__search-status", role: "status", "aria-live": "polite", children: query.length > 0 ? words.matchingResources(resources.length) : '' }), collapsible
+                ? _jsxs("details", { open: isOpen, className: "wildo-api-ref__disclosure", children: [_jsx("summary", { children: words.browseResources(resources.length) }), _jsx("div", { children: grid })] })
+                : grid, resources.length === 0 ? _jsx("p", { role: "status", children: words.noSearchMatches }) : null] });
+}
+/** The fragment the reader arrived on, tracked across in-page navigation, with the jump repeated once mounted. */
+function useActiveFragment(deps) {
+    const [activeFragment, setActiveFragment] = useState(() => currentFragment());
+    useEffect(() => {
+        const synchronize = () => setActiveFragment(currentFragment());
+        window.addEventListener('hashchange', synchronize);
+        return () => window.removeEventListener('hashchange', synchronize);
+    }, []);
     useEffect(() => {
         const target = activeFragment.length > 0 ? document.getElementById(activeFragment) : null;
         if (target !== null && typeof target.scrollIntoView === 'function')
             target.scrollIntoView({ block: 'start' });
-    }, [activeFragment, selectedResource]);
-    return _jsxs(_Fragment, { children: [model.description !== null ? _jsx(OpenApiDocumentDescription, { description: model.description }) : null, (model.servers.length > 0 || model.securitySchemes.length > 0)
-                ? _jsx(ApiConnectionDetails, { servers: model.servers, securitySchemes: model.securitySchemes })
-                : null, _jsxs("p", { children: [model.operationCount, " operations across ", model.resources.length, " resources."] }), _jsxs("div", { className: "margin-bottom--lg", children: [_jsx("label", { htmlFor: "api-reference-search", children: "Search this API reference" }), _jsx("input", { id: "api-reference-search", className: "margin-left--sm", type: "search", "aria-describedby": "api-reference-search-status", value: query, onChange: (event) => {
-                            setQuery(event.target.value);
-                            clearResourceSelection();
-                        }, placeholder: "Resource, operation, path, role\u2026" }), query.length > 0 ? _jsx("button", { className: "button button--secondary button--sm margin-left--sm", type: "button", onClick: () => setQuery(''), children: "Clear" }) : null] }), _jsx("p", { id: "api-reference-search-status", className: "margin-bottom--lg", role: "status", "aria-live": "polite", children: query.length > 0 ? `${resources.length} matching resource${resources.length === 1 ? '' : 's'}.` : '' }), _jsxs("details", { open: selectedResource === null, className: "margin-bottom--xl", children: [_jsxs("summary", { children: ["Browse ", resources.length, " resource", resources.length === 1 ? '' : 's'] }), _jsx("nav", { "aria-label": "API resources", children: resourceCategoryGroups(resources).map((group) => _jsxs("section", { className: "margin-top--lg", children: [group.category !== null ? _jsxs(_Fragment, { children: [_jsx("h2", { id: group.anchorId, children: group.category.label }), group.category.description !== null ? _jsx("p", { children: group.category.description }) : null] }) : null, _jsx("ul", { style: { display: 'grid', gap: '0.75rem', gridTemplateColumns: 'repeat(auto-fit, minmax(16rem, 1fr))', listStyle: 'none', margin: '1rem 0 0', padding: 0 }, children: group.resources.map((resource) => _jsx(ResourceCard, { resource: resource }, resource.resourceRef)) })] }, group.id)) })] }), resources.length === 0 ? _jsx("p", { role: "status", children: "No resources or operation variants match this search." }) : null, selectedResource === null && resources.length > 0 ? _jsx("p", { role: "status", children: "Select a resource to explore its operation families and variants." }) : null, selectedResource !== null ? _jsxs("section", { className: "margin-bottom--xl", children: [_jsx("p", { children: _jsx("button", { className: "button button--secondary button--sm", type: "button", onClick: clearResourceSelection, children: "All resources" }) }), _jsx(ResourceReference, { resource: selectedResource, activeFragment: activeFragment })] }, selectedResource.resourceRef) : null, _jsx(ComponentSchemaReference, { schemas: model.componentSchemas, activeFragment: activeFragment })] });
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [activeFragment, ...deps]);
+    return activeFragment;
+}
+/**
+ * The section root when each resource has its own page (#1623): overview, search and the category
+ * grid, with each card leading to `<sectionRootPath>/<slug>`.
+ *
+ * A link written for the single-page reference (`/api#operation-create-task`) still arrives here; the
+ * page plan's fragment map says which page now carries that fragment, and the reader is sent there.
+ */
+export function OpenApiReferenceIndexView({ model, words, sectionRootPath, pageSlugByFragment, navigation = null, title = null, navigate = (href) => window.location.replace(href), }) {
+    const [query, setQuery] = useState('');
+    useEffect(() => {
+        const fragment = currentFragment();
+        if (fragment.length > 0 && apiReferencePageSlugForFragment(fragment, pageSlugByFragment) !== undefined) {
+            navigate(apiReferencePageHref(sectionRootPath, fragment, { pageSlugByFragment }));
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [pageSlugByFragment, sectionRootPath]);
+    return _jsx(ReferenceProviders, { model: model, words: words, children: _jsx(ReferenceShell, { navigation: navigation, subbarTitle: title ?? navigation?.title ?? model.title, currentResource: null, activeFragment: "", children: _jsxs("div", { className: "wildo-api-ref__page", children: [title !== null ? _jsxs("header", { children: [_jsx("p", { className: "wildo-api-ref__eyebrow", children: words.contractEyebrow }), _jsx("h1", { className: "wildo-api-ref__title", children: title }), _jsx("p", { className: "wildo-api-ref__lead", children: words.indexLead })] }) : null, _jsx(ResourceIndex, { model: model, query: query, onQueryChange: setQuery, resourceHref: (resource) => `${sectionRootPath}/${apiReferenceResourceSlug(resource)}`, isOpen: true, collapsible: false })] }) }) });
+}
+/**
+ * One resource's own page (#1623): the resource, its object, its operation families and the reusable
+ * schemas its operations reach — everything the page's document slice carries, and nothing else.
+ */
+export function OpenApiResourcePageView({ model, words, resourceName, sectionRootPath, navigation = null, }) {
+    const resource = model.resources.find((candidate) => candidate.resourceRef === `technical-documentation:resource/${resourceName}`) ?? null;
+    const activeFragment = useActiveFragment([resource]);
+    return _jsx(ReferenceProviders, { model: model, words: words, children: _jsxs(ReferenceShell, { navigation: navigation, subbarTitle: resource?.label ?? resourceName, currentResource: resource, activeFragment: activeFragment, children: [resource === null
+                    ? _jsxs("div", { className: "wildo-api-ref__page", children: [_jsx("p", { children: _jsx("a", { className: "wildo-api-ref__button", href: sectionRootPath, children: words.allResources }) }), _jsx("p", { role: "alert", children: words.resourceNotInDocument(resourceName) })] })
+                    : _jsx(ResourceReference, { resource: resource, activeFragment: activeFragment, level: 1, breadcrumb: _jsx("nav", { "aria-label": words.breadcrumb, className: "wildo-api-ref__breadcrumb", children: _jsxs("ol", { children: [_jsx("li", { children: _jsx("a", { href: sectionRootPath, children: navigation?.title ?? words.allResources }) }), resource.category !== null ? _jsx("li", { children: resource.category.label }) : null] }) }) }), _jsx(ComponentSchemaReference, { schemas: model.componentSchemas, activeFragment: activeFragment })] }) });
+}
+/**
+ * The whole reference on one page, a resource selected by the URL fragment. Used where no per-resource
+ * routes exist; a portal with the page plan renders `OpenApiReferenceIndexView` and
+ * `OpenApiResourcePageView` instead.
+ */
+export function OpenApiReferenceView({ model, words }) {
+    const [query, setQuery] = useState('');
+    const [selectedResourceRef, setSelectedResourceRef] = useState(null);
+    const selectedResource = model.resources.find((resource) => resource.resourceRef === selectedResourceRef) ?? null;
+    const activeFragment = useActiveFragment([selectedResource]);
+    useEffect(() => {
+        // Following a data-model link keeps the operation the reader came from: a schema belongs to
+        // no resource, and deselecting on it used to throw the reader back to the category grid.
+        const isComponentSchemaTarget = model.componentSchemas.some((component) => component.anchorId === activeFragment);
+        const owner = findResourceForFragment(model.resources, activeFragment);
+        setSelectedResourceRef((previous) => owner?.resourceRef ?? (isComponentSchemaTarget ? previous : null));
+    }, [model, activeFragment]);
+    return _jsx(ReferenceProviders, { model: model, words: words, children: _jsxs(ReferenceShell, { navigation: null, subbarTitle: model.title, currentResource: selectedResource, activeFragment: activeFragment, children: [_jsxs("div", { className: "wildo-api-ref__page", children: [_jsx(ResourceIndex, { model: model, query: query, onQueryChange: (value) => {
+                                setQuery(value);
+                                clearResourceSelection();
+                            }, resourceHref: (resource) => `#${resource.anchorId}`, isOpen: selectedResource === null, collapsible: true }), selectedResource === null && filterResources(model, query).length > 0 ? _jsx("p", { role: "status", children: words.selectResourcePrompt }) : null, selectedResource !== null ? _jsx("p", { children: _jsx("button", { className: "wildo-api-ref__button", type: "button", onClick: clearResourceSelection, children: words.allResources }) }) : null] }), selectedResource !== null ? _jsx("section", { children: _jsx(ResourceReference, { resource: selectedResource, activeFragment: activeFragment, level: 2, breadcrumb: null }) }, selectedResource.resourceRef) : null, _jsx(ComponentSchemaReference, { schemas: model.componentSchemas, activeFragment: activeFragment })] }) });
 }
 function OpenApiDocumentDescription({ description }) {
+    const words = useReferenceWords();
+    // The generator's own section marker in the document text, not a word shown as chrome.
     const conventionsMarker = '\n\n## API conventions';
     const markerIndex = description.indexOf(conventionsMarker);
     const overview = markerIndex === -1 ? description : description.slice(0, markerIndex);
     const conventions = markerIndex === -1 ? null : description.slice(markerIndex + conventionsMarker.length).trim();
-    return _jsxs("section", { className: "margin-bottom--lg", "aria-label": "API overview", children: [_jsx(OpenApiCommonMark, { source: overview }), conventions !== null && conventions.length > 0 ? _jsxs("details", { className: "margin-top--md", children: [_jsx("summary", { children: _jsx("h2", { style: { display: 'inline', fontSize: 'inherit', margin: 0 }, children: "API conventions" }) }), _jsx("div", { className: "margin-top--md", children: _jsx(OpenApiCommonMark, { source: conventions }) })] }) : null] });
+    return _jsxs("section", { className: "wildo-api-ref__lead", "aria-label": words.apiOverview, children: [_jsx(OpenApiCommonMark, { source: overview }), conventions !== null && conventions.length > 0 ? _jsxs("details", { className: "wildo-api-ref__disclosure", children: [_jsx("summary", { children: _jsx("h2", { children: words.apiConventions }) }), _jsx("div", { children: _jsx(OpenApiCommonMark, { source: conventions }) })] }) : null] });
 }
 /**
  * Safe, deliberately small CommonMark presenter for the generator-owned
@@ -104,11 +334,13 @@ function OpenApiInlineCommonMark({ source }) {
         }) });
 }
 function ApiConnectionDetails({ servers, securitySchemes, }) {
-    return _jsx("section", { className: "card margin-bottom--lg", "aria-labelledby": "api-connection-details", children: _jsxs("div", { className: "card__body", children: [_jsx("h2", { id: "api-connection-details", children: "Connection details" }), servers.length > 0 ? _jsxs(_Fragment, { children: [_jsx("h3", { children: "Base URLs" }), _jsx("ul", { children: servers.map((server) => _jsxs("li", { children: [_jsx("code", { children: server.url }), server.description !== null ? _jsxs(_Fragment, { children: [" \u2014 ", server.description] }) : null] }, server.url)) })] }) : null, securitySchemes.length > 0 ? _jsxs(_Fragment, { children: [_jsx("h3", { children: "Authentication mechanisms" }), _jsx("dl", { children: securitySchemes.map((securityScheme) => _jsxs(Fragment, { children: [_jsx("dt", { children: _jsx("code", { children: securityScheme.name }) }), _jsxs("dd", { children: [_jsxs("p", { className: "margin-bottom--sm", children: ["Type: ", _jsx("code", { children: securityScheme.type }), securityScheme.scheme !== null ? _jsxs(_Fragment, { children: [" \u00B7 Scheme: ", _jsx("code", { children: securityScheme.scheme })] }) : null, securityScheme.bearerFormat !== null ? _jsxs(_Fragment, { children: [" \u00B7 Format: ", _jsx("code", { children: securityScheme.bearerFormat })] }) : null, securityScheme.location !== null ? _jsxs(_Fragment, { children: [" \u00B7 Location: ", _jsx("code", { children: securityScheme.location })] }) : null, securityScheme.parameterName !== null ? _jsxs(_Fragment, { children: [" \u00B7 Name: ", _jsx("code", { children: securityScheme.parameterName })] }) : null] }), securityScheme.description !== null ? _jsx("p", { children: _jsx(OpenApiInlineCommonMark, { source: securityScheme.description }) }) : null] })] }, securityScheme.name)) })] }) : null] }) });
+    const words = useReferenceWords();
+    return _jsxs("section", { className: "wildo-api-ref__panel", "aria-labelledby": "api-connection-details", children: [_jsx("h2", { id: "api-connection-details", children: words.connectionDetails }), servers.length > 0 ? _jsxs(_Fragment, { children: [_jsx("h3", { children: words.baseUrls }), _jsx("ul", { children: servers.map((server) => _jsxs("li", { children: [_jsx("code", { children: server.url }), server.description !== null ? _jsxs(_Fragment, { children: [" \u2014 ", server.description] }) : null] }, server.url)) })] }) : null, securitySchemes.length > 0 ? _jsxs(_Fragment, { children: [_jsx("h3", { children: words.authenticationMechanisms }), _jsx("dl", { children: securitySchemes.map((securityScheme) => _jsxs(Fragment, { children: [_jsx("dt", { children: _jsx("code", { children: securityScheme.name }) }), _jsxs("dd", { children: [_jsxs("p", { className: "margin-bottom--sm", children: [words.schemeType, " ", _jsx("code", { children: securityScheme.type }), securityScheme.scheme !== null ? _jsxs(_Fragment, { children: [" \u00B7 ", words.schemeScheme, " ", _jsx("code", { children: securityScheme.scheme })] }) : null, securityScheme.bearerFormat !== null ? _jsxs(_Fragment, { children: [" \u00B7 ", words.schemeFormat, " ", _jsx("code", { children: securityScheme.bearerFormat })] }) : null, securityScheme.location !== null ? _jsxs(_Fragment, { children: [" \u00B7 ", words.schemeLocation, " ", _jsx("code", { children: securityScheme.location })] }) : null, securityScheme.parameterName !== null ? _jsxs(_Fragment, { children: [" \u00B7 ", words.schemeName, " ", _jsx("code", { children: securityScheme.parameterName })] }) : null] }), securityScheme.description !== null ? _jsx("p", { children: _jsx(OpenApiInlineCommonMark, { source: securityScheme.description }) }) : null] })] }, securityScheme.name)) })] }) : null] });
 }
-function ResourceCard({ resource }) {
+function ResourceCard({ resource, href }) {
+    const words = useReferenceWords();
     const variantCount = resource.families.reduce((count, family) => count + family.variants.length, 0);
-    return _jsxs("li", { style: { border: '1px solid var(--ifm-color-emphasis-300)', borderRadius: '0.5rem', padding: '1rem' }, children: [_jsx("a", { href: `#${resource.anchorId}`, children: _jsx("strong", { children: resource.label }) }), resource.description !== null ? _jsx("p", { className: "margin-top--sm margin-bottom--sm", children: resource.description }) : null, _jsxs("p", { className: "margin-bottom--none text--muted", children: [resource.families.length, " operation ", resource.families.length === 1 ? 'family' : 'families', " \u00B7 ", variantCount, " variant", variantCount === 1 ? '' : 's'] })] });
+    return _jsxs("li", { className: "wildo-api-ref__resource-card", children: [_jsx("a", { href: href, children: resource.label }), resource.description !== null ? _jsx("p", { children: _jsx(OpenApiInlineCommonMark, { source: resource.description }) }) : null, _jsx("p", { className: "wildo-api-ref__card-meta", children: words.resourceCardMeta(resource.families.length, variantCount) })] });
 }
 /**
  * Groups only by source-projected category metadata.  A document without
@@ -133,14 +365,49 @@ function resourceCategoryGroups(resources) {
         category: group.category,
         resources: group.resources,
     }))
-        .sort((left, right) => (left.category?.label ?? '').localeCompare(right.category?.label ?? ''));
+        // Uncategorized last, the order the navigation rail uses (`buildApiReferenceNavigation`).
+        .sort((left, right) => (left.category === null ? 1 : right.category === null ? -1 : left.category.label.localeCompare(right.category.label)));
 }
-function ResourceReference({ resource, activeFragment }) {
-    return _jsxs(_Fragment, { children: [_jsx("h2", { id: resource.anchorId, children: resource.label }), resource.description !== null ? _jsx("p", { children: resource.description }) : null, resource.lifecycleRole !== null ? _jsxs(_Fragment, { children: [_jsx("h3", { children: "Lifecycle" }), _jsx("p", { children: resource.lifecycleRole })] }) : null, resource.relationships.length > 0 ? _jsx(RelationshipSemantics, { relationships: resource.relationships }) : null, resource.families.map((family) => _jsx("div", { className: "card margin-bottom--md", children: _jsxs("div", { className: "card__body", children: [_jsx("h3", { id: family.anchorId, children: family.label }), _jsxs("p", { className: "text--muted", children: [family.variants.length, " documented variant", family.variants.length === 1 ? '' : 's'] }), family.variants.map((variant) => _jsx(OperationVariant, { variant: variant, activeFragment: activeFragment }, variant.operationId))] }) }, family.familyRef))] });
+/* Resource ------------------------------------------------------------------------------------- */
+/**
+ * A resource: its introduction (description, lifecycle, relationships, object) above, then one
+ * section per operation family, each with its documentation beside its samples.
+ *
+ * `level` is the resource heading's level: 1 on the resource's own page, 2 on the single-page
+ * reference. Families, operations and their parts take the next levels down.
+ */
+function ResourceReference({ resource, activeFragment, level, breadcrumb, }) {
+    const words = useReferenceWords();
+    return _jsxs(_Fragment, { children: [_jsxs("header", { className: "wildo-api-ref__intro", children: [breadcrumb, _jsx(Heading, { level: level, id: resource.anchorId, className: "wildo-api-ref__title", children: resource.label }), resource.description !== null ? _jsx("div", { className: "wildo-api-ref__lead", children: _jsx(OpenApiCommonMark, { source: resource.description }) }) : null, resource.lifecycleRole !== null ? _jsxs(_Fragment, { children: [_jsx(Heading, { level: level + 1, className: "wildo-api-ref__subheading", children: words.lifecycle }), _jsx("div", { className: "wildo-api-ref__lead", children: _jsx(OpenApiCommonMark, { source: resource.lifecycleRole }) })] }) : null, resource.relationships.length > 0 ? _jsx(RelationshipSemantics, { relationships: resource.relationships }) : null, resource.objectSchemaName !== null ? _jsx(ResourceObject, { resource: resource, objectSchemaName: resource.objectSchemaName, level: level + 1 }) : null] }), resource.families.length > 0 ? _jsx("div", { className: "wildo-api-ref__operations", children: resource.families.map((family) => _jsx(OperationFamily, { family: family, activeFragment: activeFragment, level: level + 1 }, family.familyRef)) }) : null] });
+}
+/**
+ * "The Tasks object": the resource's representation, described once on its page (#1621). The
+ * operations that return it reference the same schema, so their response sections and this one are
+ * the same fields by construction.
+ */
+function ResourceObject({ resource, objectSchemaName, level }) {
+    const words = useReferenceWords();
+    const resolution = useContext(SchemaResolutionContext);
+    const schema = resolution.componentsByName.get(objectSchemaName);
+    if (schema === undefined)
+        return null;
+    return _jsxs("section", { "aria-labelledby": `${resource.anchorId}--object`, children: [_jsx(Heading, { level: level, id: `${resource.anchorId}--object`, className: "wildo-api-ref__subheading", children: words.resourceObject(resource.label) }), _jsx(SchemaResolutionContext.Provider, { value: { ...resolution, expanding: new Set([...resolution.expanding, objectSchemaName]) }, children: _jsx(SchemaContract, { schema: schema, collapseLongLists: true }) })] });
 }
 function RelationshipSemantics({ relationships }) {
-    return _jsxs("details", { className: "margin-bottom--lg", children: [_jsxs("summary", { children: ["Data relationships (", relationships.length, ")"] }), _jsx("ul", { className: "margin-top--md", children: relationships.map((relationship, index) => _jsxs("li", { children: [_jsx("strong", { children: relationship.relatedResourceLabel }), relationship.foreignKeyField !== null ? _jsxs(_Fragment, { children: [" via ", _jsx("code", { children: relationship.foreignKeyField })] }) : null, ": ", relationship.nature, " relationship (", relationship.resourceCardinality, " to ", relationship.relatedResourceCardinality, "); lifecycle: ", relationship.lifecycleModel, ".", relationship.onParentDelete !== null
-                            ? _jsxs(_Fragment, { children: [" Parent-delete policy: ", relationship.onParentDelete.enabled ? `${relationship.onParentDelete.strategy} (${relationship.onParentDelete.mode}, depth ${relationship.onParentDelete.maxDepth})` : 'does not cascade', "."] })
+    const words = useReferenceWords();
+    return _jsxs("details", { className: "wildo-api-ref__disclosure", children: [_jsx("summary", { children: words.dataRelationships(relationships.length) }), _jsx("ul", { children: relationships.map((relationship, index) => _jsxs("li", { children: [relationship.foreignKeyField !== null
+                            ? renderSentence(words.relationshipVia, { related: _jsx("strong", { children: relationship.relatedResourceLabel }), field: _jsx("code", { children: relationship.foreignKeyField }) })
+                            : _jsx("strong", { children: relationship.relatedResourceLabel }), ": ", words.relationshipSummary({
+                            nature: relationship.nature,
+                            cardinality: relationship.resourceCardinality,
+                            relatedCardinality: relationship.relatedResourceCardinality,
+                            lifecycleModel: relationship.lifecycleModel,
+                        }), relationship.onParentDelete !== null
+                            ? _jsxs(_Fragment, { children: [" ", words.parentDeletePolicy(!relationship.onParentDelete.enabled
+                                        ? words.parentDeleteDoesNotCascade
+                                        : relationship.onParentDelete.refusesWhileChildrenExist
+                                            ? relationship.onParentDelete.strategy
+                                            : words.parentDeleteCascade({ strategy: relationship.onParentDelete.strategy, mode: relationship.onParentDelete.mode, maxDepth: relationship.onParentDelete.maxDepth }))] })
                             : null] }, `${relationship.relatedResourceName}:${relationship.foreignKeyField ?? 'none'}:${relationship.nature}:${index}`)) })] });
 }
 function clearResourceSelection() {
@@ -152,9 +419,7 @@ function findResourceForFragment(resources, hash) {
     if (fragment.length === 0)
         return null;
     return resources.find((resource) => resource.anchorId === fragment
-        || resource.families.some((family) => family.anchorId === fragment || family.variants.some((variant) => variant.anchorId === fragment
-            || variant.requestBody?.anchorId === fragment
-            || variant.responses.some((response) => response.anchorId === fragment)))) ?? null;
+        || resource.families.some((family) => family.anchorId === fragment || family.variants.some((variant) => variantOwnsFragment(variant, fragment)))) ?? null;
 }
 function filterResources(model, query) {
     const normalizedQuery = query.trim().toLocaleLowerCase();
@@ -192,40 +457,411 @@ function filterResources(model, query) {
         })).filter((family) => family.variants.length > 0),
     })).filter((resource) => resource.families.length > 0);
 }
-function OperationVariant({ variant, activeFragment }) {
-    const [isContractOpen, setIsContractOpen] = useState(() => isContractTarget(variant, activeFragment));
+/**
+ * A route that reaches an operation through its parent is the SAME operation (`aliasOfPath`); showing
+ * it as a second full panel made a third of the Wonder Todos reference repeat itself (315 of 960). Each
+ * alias is listed under its canonical operation instead. An alias whose canonical is not among these
+ * variants — it lives in the other section, or a search matched only the alias — keeps its own panel,
+ * so every variant is still presented exactly once.
+ */
+function groupAliasesUnderCanonical(variants) {
+    const canonicalKey = (method, path) => `${method} ${path}`;
+    const groups = variants
+        .filter((variant) => variant.aliasOfPath === null)
+        .map((variant) => ({ variant, aliases: [] }));
+    const groupByKey = new Map(groups.map((group) => [canonicalKey(group.variant.method, group.variant.path), group]));
+    const orphans = [];
+    for (const variant of variants) {
+        if (variant.aliasOfPath === null)
+            continue;
+        const group = groupByKey.get(canonicalKey(variant.method, variant.aliasOfPath));
+        if (group === undefined)
+            orphans.push({ variant, aliases: [] });
+        else
+            group.aliases.push(variant);
+    }
+    return [...groups, ...orphans];
+}
+/** The path parameters an alias route takes that its canonical route does not — what makes it a different address. */
+function additionalPathParameters(alias, canonical) {
+    const canonicalNames = new Set(canonical.parameters.filter((parameter) => parameter.location === 'path').map((parameter) => parameter.name));
+    return alias.parameters.filter((parameter) => parameter.location === 'path' && !canonicalNames.has(parameter.name)).map((parameter) => parameter.name);
+}
+/**
+ * Moves the selection with the arrow, Home and End keys inside a tab list, as the WAI-ARIA tabs pattern
+ * asks: only the selected tab is in the Tab order, the arrows move between tabs.
+ */
+function onTabListKeyDown(event) {
+    const tabs = [...event.currentTarget.querySelectorAll('[role="tab"]')];
+    const current = tabs.indexOf(event.target);
+    if (current === -1)
+        return;
+    const next = event.key === 'ArrowRight' || event.key === 'ArrowDown' ? (current + 1) % tabs.length
+        : event.key === 'ArrowLeft' || event.key === 'ArrowUp' ? (current - 1 + tabs.length) % tabs.length
+            : event.key === 'Home' ? 0
+                : event.key === 'End' ? tabs.length - 1
+                    : null;
+    if (next === null)
+        return;
+    event.preventDefault();
+    tabs[next]?.focus();
+    tabs[next]?.click();
+}
+/**
+ * One operation family. A family with several routes (a variant per scope, say) shows them as tabs;
+ * a deep link to any part of a variant — its operation, request, a response or an alias — selects
+ * the tab that holds it, so the target exists before the page scrolls to it.
+ */
+function OperationFamily({ family, activeFragment, level }) {
+    const words = useReferenceWords();
+    const groups = useMemo(() => groupAliasesUnderCanonical(family.variants), [family]);
+    const owningIndex = (fragment) => groups.findIndex((group) => variantOwnsFragment(group.variant, fragment)
+        || group.aliases.some((alias) => alias.anchorId === fragment));
+    const [selectedIndex, setSelectedIndex] = useState(() => Math.max(owningIndex(activeFragment), 0));
     useEffect(() => {
-        if (isContractTarget(variant, activeFragment))
-            setIsContractOpen(true);
-    }, [activeFragment, variant]);
-    return _jsxs("article", { className: "margin-bottom--lg", children: [_jsx("h4", { id: variant.anchorId, children: variant.summary }), _jsxs("p", { children: [_jsx("code", { children: variant.method }), " ", _jsx("code", { children: variant.path })] }), variant.description !== null ? _jsx("p", { children: variant.description }) : null, _jsxs("p", { className: "margin-bottom--sm", children: [_jsx("strong", { children: "Access:" }), " ", variant.access.authenticationSummary, variant.access.roleRequirements.length > 0 ? _jsxs(_Fragment, { children: [" Authorization: any one of ", variant.access.roleRequirements.map((requirement, index) => _jsxs(Fragment, { children: [index > 0 ? ' or ' : '', _jsx("strong", { children: requirement.label }), " (", _jsx("code", { children: requirement.role }), ")"] }, requirement.role)), "."] }) : null, ' ', variant.securitySchemes.length > 0 ? _jsxs(_Fragment, { children: ["Authentication: ", _jsx("code", { children: variant.securitySchemes.join(' or ') }), ". "] }) : null, variant.idempotent !== null ? _jsxs(_Fragment, { children: ["Idempotent: ", _jsx("code", { children: variant.idempotent ? 'yes' : 'no' }), "."] }) : null] }), variant.access.roleRequirements.some((requirement) => requirement.businessRole !== null || requirement.authorityBoundary !== null) ? _jsxs("details", { className: "margin-bottom--sm", children: [_jsx("summary", { children: "Role authority details" }), _jsx("ul", { className: "margin-top--sm", children: variant.access.roleRequirements.map((requirement) => _jsxs("li", { children: [_jsx("strong", { children: requirement.label }), requirement.businessRole !== null ? _jsxs(_Fragment, { children: [" \u2014 ", requirement.businessRole] }) : null, requirement.authorityBoundary !== null ? _jsxs("p", { className: "margin-bottom--sm", children: ["Boundary: ", requirement.authorityBoundary] }) : null] }, requirement.role)) })] }) : null, _jsxs("details", { open: isContractOpen, onToggle: (event) => setIsContractOpen(event.currentTarget.open), children: [_jsx("summary", { children: "Request and response contract" }), _jsxs("div", { className: "margin-top--md", children: [_jsx("h5", { children: "Parameters" }), variant.parameters.length === 0 ? _jsx("p", { children: "No parameters." }) : _jsx(ParameterTable, { parameters: variant.parameters }), variant.requestBody !== null ? _jsxs(_Fragment, { children: [_jsxs("h5", { id: variant.requestBody.anchorId, children: ["Request body ", variant.requestBody.required ? '(required)' : '(optional)'] }), _jsx(RepresentationList, { mediaTypes: variant.requestBody.mediaTypes })] }) : null, _jsx("h5", { children: "Responses" }), variant.responses.length === 0 ? _jsx("p", { children: "No response contract was emitted." }) : variant.responses.map((response) => _jsx(ResponseContract, { response: response }, response.status))] })] })] });
+        const index = owningIndex(activeFragment);
+        if (index !== -1)
+            setSelectedIndex(index);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [activeFragment, groups]);
+    const selected = groups[selectedIndex] ?? groups[0];
+    if (selected === undefined)
+        return null;
+    const tabId = (index) => `${family.anchorId}--variant-${index}`;
+    const header = _jsxs(_Fragment, { children: [_jsx(Heading, { level: level, id: family.anchorId, className: "wildo-api-ref__family-title", children: family.label }), groups.length > 1 ? _jsx("div", { role: "tablist", "aria-label": words.familyVariants(family.label), className: "wildo-api-ref__segmented", onKeyDown: onTabListKeyDown, children: groups.map((group, index) => _jsxs("button", { type: "button", role: "tab", id: tabId(index), className: "wildo-api-ref__segment", "aria-selected": index === selectedIndex, "aria-controls": `${family.anchorId}--variant-panel`, tabIndex: index === selectedIndex ? 0 : -1, onClick: () => setSelectedIndex(index), children: [_jsx(MethodBadge, { method: group.variant.method, small: true }), group.variant.summary] }, group.variant.operationId)) }) : null] });
+    return _jsx("section", { className: "wildo-api-ref__family", children: _jsx(OperationVariant, { variant: selected.variant, aliases: selected.aliases, activeFragment: activeFragment, level: level + 1, header: header, panelId: groups.length > 1 ? `${family.anchorId}--variant-panel` : null, labelledBy: groups.length > 1 ? tabId(selectedIndex) : null }) });
 }
-/** Opens the native contract disclosure before a request/response fragment is scrolled into view. */
-function isContractTarget(variant, fragment) {
-    return variant.requestBody?.anchorId === fragment || variant.responses.some((response) => response.anchorId === fragment);
+/**
+ * The class of an HTTP status, which decides the colour of its dot: a success or redirect (2xx, 3xx)
+ * is what the reader builds for, a client error (4xx) is theirs to fix, a server error (5xx) is not.
+ * The values are the dot's CSS modifier names.
+ */
+var ResponseStatusClass;
+(function (ResponseStatusClass) {
+    ResponseStatusClass["SUCCESS"] = "success";
+    ResponseStatusClass["CLIENT_ERROR"] = "client-error";
+    ResponseStatusClass["SERVER_ERROR"] = "server-error";
+    ResponseStatusClass["OTHER"] = "other";
+})(ResponseStatusClass || (ResponseStatusClass = {}));
+function responseStatusClass(status) {
+    if (/^[23]/.test(status))
+        return ResponseStatusClass.SUCCESS;
+    if (/^4/.test(status))
+        return ResponseStatusClass.CLIENT_ERROR;
+    if (/^5/.test(status))
+        return ResponseStatusClass.SERVER_ERROR;
+    return ResponseStatusClass.OTHER;
+}
+function StatusDot({ status }) {
+    return _jsx("span", { className: `wildo-api-ref__status-dot wildo-api-ref__status-dot--${responseStatusClass(status)}`, "aria-hidden": "true" });
+}
+/**
+ * One operation: its documentation (title, endpoint, access, parameters, body, responses, errors) and,
+ * beside it, its samples. The response the reader selects is the same on both sides.
+ */
+function OperationVariant({ variant, aliases = [], activeFragment, level, header, panelId, labelledBy, }) {
+    const linkedResponse = variant.responses.find((response) => response.anchorId === activeFragment) ?? null;
+    /**
+     * The response the reader picked, remembered with the variant it was picked on: this component is
+     * not remounted when the family's tab changes, so a choice made on one variant must not carry over.
+     */
+    const [statusChoice, setStatusChoice] = useState(null);
+    const selectedStatus = statusChoice?.operationId === variant.operationId ? statusChoice.status : linkedResponse?.status ?? null;
+    const setSelectedStatus = (status) => setStatusChoice({ operationId: variant.operationId, status });
+    useEffect(() => {
+        if (linkedResponse !== null)
+            setStatusChoice({ operationId: variant.operationId, status: linkedResponse.status });
+    }, [linkedResponse, variant.operationId]);
+    /**
+     * A variant behind a tab mounts one render after the view's own fragment jump has already looked for
+     * it, so the jump is repeated once the target exists — once per fragment and variant. Picking a
+     * response status afterwards must not scroll the reader back to the linked anchor.
+     */
+    const scrolledFor = useRef(null);
+    useEffect(() => {
+        if (!variantOwnsFragment(variant, activeFragment) && !aliases.some((alias) => alias.anchorId === activeFragment))
+            return;
+        const scrollKey = `${activeFragment}|${variant.operationId}`;
+        if (scrolledFor.current === scrollKey)
+            return;
+        scrolledFor.current = scrollKey;
+        const target = document.getElementById(activeFragment);
+        if (target !== null && typeof target.scrollIntoView === 'function')
+            target.scrollIntoView({ block: 'start' });
+    }, [activeFragment, variant, aliases]);
+    const words = useReferenceWords();
+    const subLevel = level + 1;
+    const roleLabels = variant.access.roleRequirements;
+    return _jsxs("article", { className: "wildo-api-ref__operation", children: [_jsxs("div", { className: "wildo-api-ref__operation-doc", children: [header, _jsxs("div", { id: panelId ?? undefined, role: panelId !== null ? 'tabpanel' : undefined, "aria-labelledby": labelledBy ?? undefined, children: [_jsx(Heading, { level: level, id: variant.anchorId, className: "wildo-api-ref__operation-title", children: variant.summary }), _jsxs("div", { className: "wildo-api-ref__endpoint", children: [_jsx(MethodBadge, { method: variant.method }), _jsx("code", { className: "wildo-api-ref__path", children: _jsx(EndpointPath, { path: variant.path }) }), _jsx(CopyButton, { text: variant.path, label: words.copyPathOf(variant.summary) })] }), variant.description !== null ? _jsx("div", { className: "wildo-api-ref__lead", children: _jsx(OpenApiCommonMark, { source: variant.description }) }) : null, _jsxs("dl", { className: "wildo-api-ref__facts", children: [_jsxs("div", { className: "wildo-api-ref__fact", children: [_jsx("dt", { children: words.access }), _jsx("dd", { children: variant.access.authenticationSummary })] }), roleLabels.length > 0 ? _jsxs("div", { className: "wildo-api-ref__fact", children: [_jsx("dt", { children: words.requiredRole }), _jsx("dd", { children: renderSentence(words.requiredRoles, {
+                                                    roles: renderList(words, roleLabels.map((requirement) => renderSentence(words.roleWithKey, {
+                                                        label: _jsx("strong", { children: requirement.label }),
+                                                        key: _jsx("code", { children: requirement.role }),
+                                                    })), DocumentationListKind.DISJUNCTION),
+                                                }) })] }) : null, variant.securitySchemes.length > 0 ? _jsxs("div", { className: "wildo-api-ref__fact", children: [_jsx("dt", { children: words.authentication }), _jsx("dd", { children: renderList(words, variant.securitySchemes.map((scheme) => _jsx("code", { children: scheme })), DocumentationListKind.DISJUNCTION) })] }) : null, variant.idempotent !== null ? _jsxs("div", { className: "wildo-api-ref__fact", children: [_jsx("dt", { children: words.idempotent }), _jsx("dd", { children: variant.idempotent ? words.yes : words.no })] }) : null] }), roleLabels.some((requirement) => requirement.businessRole !== null || requirement.authorityBoundary !== null) ? _jsxs("details", { className: "wildo-api-ref__inline-disclosure", children: [_jsx("summary", { children: words.roleAuthorityDetails }), _jsx("ul", { children: roleLabels.map((requirement) => _jsxs("li", { children: [_jsx("strong", { children: requirement.label }), requirement.businessRole !== null ? _jsxs(_Fragment, { children: [" \u2014 ", _jsx(OpenApiInlineCommonMark, { source: requirement.businessRole })] }) : null, requirement.authorityBoundary !== null ? _jsxs("p", { children: [words.boundary, " ", _jsx(OpenApiInlineCommonMark, { source: requirement.authorityBoundary })] }) : null] }, requirement.role)) })] }) : null, aliases.length > 0 ? _jsxs("div", { className: "wildo-api-ref__note", children: [_jsx("span", { children: renderSentence(words.aliasNote, { heading: _jsx("strong", { children: words.alsoReachableAt }) }) }), _jsx("ul", { children: aliases.map((alias) => {
+                                            const extra = additionalPathParameters(alias, variant);
+                                            const address = _jsxs(_Fragment, { children: [_jsx("code", { children: alias.method }), " ", _jsx("code", { children: alias.path })] });
+                                            return _jsx("li", { id: alias.anchorId, children: extra.length > 0
+                                                    ? renderSentence(words.aliasWithParameters, {
+                                                        address,
+                                                        parameters: renderList(words, extra.map((name) => _jsx("code", { children: name })), DocumentationListKind.CONJUNCTION),
+                                                    })
+                                                    : address }, alias.operationId);
+                                        }) })] }) : null, _jsx(SamplesSheet, { variant: variant, selectedStatus: selectedStatus, onSelectStatus: setSelectedStatus }), _jsx(ParameterSections, { parameters: variant.parameters, level: subLevel }), variant.requestBody !== null ? _jsxs("section", { children: [_jsxs(Heading, { level: subLevel, id: variant.requestBody.anchorId, className: "wildo-api-ref__subheading", children: [words.requestBody, " ", _jsx("span", { className: "wildo-api-ref__subheading-meta", children: variant.requestBody.required ? words.required : words.optional })] }), _jsx(RepresentationList, { mediaTypes: variant.requestBody.mediaTypes })] }) : null, _jsxs("section", { children: [_jsx(Heading, { level: subLevel, className: "wildo-api-ref__subheading", children: words.responses }), variant.responses.length === 0
+                                        ? _jsx("p", { children: words.noResponseContract })
+                                        : _jsx(ResponseTabs, { variant: variant, selectedStatus: selectedStatus, onSelectStatus: setSelectedStatus })] }), variant.errorScenarios.length > 0 ? _jsxs("section", { children: [_jsx(Heading, { level: subLevel, className: "wildo-api-ref__subheading", children: words.errors }), _jsx(ErrorScenarioTable, { scenarios: variant.errorScenarios })] }) : null] }, variant.operationId)] }), _jsx("div", { className: "wildo-api-ref__operation-code", children: _jsx(OperationSamples, { variant: variant, selectedStatus: selectedStatus, onSelectStatus: setSelectedStatus }) }, variant.operationId)] });
+}
+/** A path with its `{parameters}` set apart, so the parts a reader fills in stand out. */
+function EndpointPath({ path }) {
+    return _jsx(_Fragment, { children: path.split(/(\{[^}]+\})/g).filter(Boolean).map((part, index) => (part.startsWith('{')
+            ? _jsx("span", { className: "wildo-api-ref__path-param", children: part }, index)
+            : _jsx(Fragment, { children: part }, index))) });
+}
+/** The HTTP method, coloured by verb so a reader can scan a family for its writes. */
+function MethodBadge({ method, small = false }) {
+    return _jsx("span", { className: `wildo-api-ref__method wildo-api-ref__method--${method.toLowerCase()}${small ? ' wildo-api-ref__method--small' : ''}`, children: method });
+}
+/** Copies `text` to the clipboard and says so for a moment. A browser without the Clipboard API shows no change. */
+function CopyButton({ text, label }) {
+    const words = useReferenceWords();
+    const [isCopied, setIsCopied] = useState(false);
+    useEffect(() => {
+        if (!isCopied)
+            return;
+        const timer = setTimeout(() => setIsCopied(false), 1500);
+        return () => clearTimeout(timer);
+    }, [isCopied]);
+    return _jsxs(_Fragment, { children: [_jsx("button", { type: "button", className: "wildo-api-ref__copy", "aria-label": label, onClick: () => {
+                    if (typeof navigator === 'undefined' || navigator.clipboard === undefined)
+                        return;
+                    navigator.clipboard.writeText(text).then(() => setIsCopied(true), () => undefined);
+                }, children: isCopied ? words.copied : words.copy }), _jsx("span", { role: "status", className: "wildo-api-ref__visually-hidden", children: isCopied ? words.copied : '' })] });
+}
+const SAMPLE_LANGUAGE_LABELS = {
+    [ApiReferenceSampleLanguage.CURL]: 'cURL',
+    [ApiReferenceSampleLanguage.JAVASCRIPT]: 'JavaScript',
+    [ApiReferenceSampleLanguage.PYTHON]: 'Python',
+};
+/**
+ * The code panel of an operation: the request in three languages, then one response example per
+ * status in tabs, successes first. Both are derived from the same verified document as the
+ * documentation beside them (see `openapi-reference-samples.ts`), so the panel can only restate it.
+ */
+function OperationSamples({ variant, selectedStatus, onSelectStatus, idScope = variant.anchorId, }) {
+    const words = useReferenceWords();
+    const connection = useContext(ApiDocumentConnectionContext);
+    const requestSamples = useMemo(() => buildRequestSamples(variant, connection.serverUrl, connection.securitySchemes), [variant, connection]);
+    const samples = useMemo(() => responseSamples(variant.responses), [variant]);
+    const [language, setLanguage] = useState(ApiReferenceSampleLanguage.CURL);
+    const selected = samples.find((sample) => sample.status === selectedStatus) ?? samples[0] ?? null;
+    const tabId = (kind, value) => `${idScope}--sample-${kind}-${value}`;
+    const serverSelectId = `${idScope}--server`;
+    return _jsxs("aside", { className: "wildo-api-ref__samples", "aria-label": words.samplesFor(variant.summary), children: [_jsxs("div", { role: "group", className: "wildo-api-ref__code-card", "aria-label": words.requestSample, children: [_jsxs("div", { className: "wildo-api-ref__code-head", children: [_jsx("span", { className: "wildo-api-ref__code-title", children: words.request }), _jsx("div", { role: "tablist", "aria-label": words.language, className: "wildo-api-ref__code-tabs", onKeyDown: onTabListKeyDown, children: Object.values(ApiReferenceSampleLanguage).map((candidate) => _jsx("button", { type: "button", role: "tab", id: tabId('language', candidate), className: "wildo-api-ref__code-tab", "aria-selected": candidate === language, "aria-controls": `${tabId('language', 'panel')}`, tabIndex: candidate === language ? 0 : -1, onClick: () => setLanguage(candidate), children: SAMPLE_LANGUAGE_LABELS[candidate] }, candidate)) }), _jsx(CopyButton, { text: requestSamples[language], label: words.copyRequestSample })] }), connection.servers.length > 1 ? _jsxs("div", { className: "wildo-api-ref__code-server", children: [_jsx("label", { htmlFor: serverSelectId, children: words.server }), _jsx("select", { id: serverSelectId, value: connection.serverUrl ?? '', onChange: (event) => connection.selectServer(event.target.value), children: connection.servers.map((server) => _jsx("option", { value: server.url, children: server.description ?? server.url }, server.url)) })] }) : connection.servers.length === 1 && connection.servers[0]?.description !== null ? _jsxs("div", { className: "wildo-api-ref__code-server", children: [_jsx("span", { children: words.server }), _jsx("span", { children: connection.servers[0]?.description })] }) : null, _jsx("div", { role: "tabpanel", id: tabId('language', 'panel'), "aria-labelledby": tabId('language', language), children: _jsx("pre", { tabIndex: 0, children: _jsx("code", { children: highlightCode(requestSamples[language]) }) }) })] }), _jsxs("div", { role: "group", className: "wildo-api-ref__code-card", "aria-label": words.responseExample, children: [_jsxs("div", { className: "wildo-api-ref__code-head", children: [_jsx("span", { className: "wildo-api-ref__code-title", children: words.response }), selected !== null ? _jsx("div", { role: "tablist", "aria-label": words.responseStatus, className: "wildo-api-ref__code-tabs", onKeyDown: onTabListKeyDown, children: samples.map((sample) => _jsxs("button", { type: "button", role: "tab", id: tabId('status', sample.status), className: "wildo-api-ref__code-tab", "aria-selected": sample.status === selected.status, "aria-controls": sample.status === selected.status ? `${tabId('status', sample.status)}-panel` : undefined, tabIndex: sample.status === selected.status ? 0 : -1, title: sample.description ?? undefined, onClick: () => onSelectStatus(sample.status), children: [_jsx(StatusDot, { status: sample.status }), sample.status] }, sample.status)) }) : null, selected !== null ? _jsx(CopyButton, { text: selected.jsonValue, label: words.copyResponseExample }) : null] }), selected !== null
+                        ? _jsxs("div", { role: "tabpanel", id: `${tabId('status', selected.status)}-panel`, "aria-labelledby": tabId('status', selected.status), children: [selectedStatus !== null && selectedStatus !== selected.status ? _jsx("p", { className: "wildo-api-ref__code-caption", children: words.noExampleForStatus(selectedStatus, selected.status) }) : null, _jsx("pre", { tabIndex: 0, children: _jsx("code", { children: highlightCode(selected.jsonValue) }) })] })
+                        : _jsx("p", { className: "wildo-api-ref__code-empty", children: words.noResponseExample })] })] });
+}
+/**
+ * On a phone the samples do not fit beside the documentation, so each operation offers them in a
+ * bottom sheet (a modal `<dialog>`). The sheet's content is built only while it is open. From 960 px
+ * up the button is hidden and the samples sit in the right-hand column instead.
+ */
+function SamplesSheet({ variant, selectedStatus, onSelectStatus, }) {
+    const words = useReferenceWords();
+    const dialogRef = useRef(null);
+    const [isOpen, setIsOpen] = useState(false);
+    const open = () => {
+        const dialog = dialogRef.current;
+        if (dialog === null)
+            return;
+        setIsOpen(true);
+        if (typeof dialog.showModal === 'function')
+            dialog.showModal();
+        else
+            dialog.setAttribute('open', '');
+    };
+    const close = () => {
+        const dialog = dialogRef.current;
+        if (dialog !== null && typeof dialog.close === 'function')
+            dialog.close();
+        else
+            dialog?.removeAttribute('open');
+        setIsOpen(false);
+    };
+    return _jsxs(_Fragment, { children: [_jsx("button", { type: "button", className: "wildo-api-ref__button wildo-api-ref__sheet-open", onClick: open, children: words.requestAndResponse }), _jsx("dialog", { ref: dialogRef, className: "wildo-api-ref__sheet", "aria-label": words.requestAndResponseFor(variant.summary), onClose: () => setIsOpen(false), onClick: (event) => {
+                    if (event.target === event.currentTarget)
+                        close();
+                }, children: isOpen ? _jsxs(_Fragment, { children: [_jsxs("div", { className: "wildo-api-ref__sheet-head", children: [_jsx("strong", { children: variant.summary }), _jsx("button", { type: "button", className: "wildo-api-ref__icon-button", "aria-label": words.close, onClick: close, children: _jsx(CloseIcon, {}) })] }), _jsx(OperationSamples, { variant: variant, selectedStatus: selectedStatus, onSelectStatus: onSelectStatus, idScope: `${variant.anchorId}--sheet` })] }) : null })] });
+}
+/**
+ * Colours a sample for reading: object keys, strings, numbers and literals, and the few keywords the
+ * three request languages open with. Display only — the text is unchanged, so copying it copies the
+ * sample exactly.
+ */
+const CODE_TOKEN_PATTERN = /("(?:[^"\\\n]|\\.)*"|'(?:[^'\\\n]|\\.)*')(\s*:)?|\b(true|false|null|True|False|None)\b|(-?\b\d+(?:\.\d+)?(?:[eE][+-]?\d+)?\b)|\b(curl|const|await|import|print)\b/g;
+function highlightCode(source) {
+    const nodes = [];
+    let last = 0;
+    for (const match of source.matchAll(CODE_TOKEN_PATTERN)) {
+        const index = match.index ?? 0;
+        if (index > last)
+            nodes.push(source.slice(last, index));
+        const [text, quoted, colon, literal, number] = match;
+        if (quoted !== undefined) {
+            nodes.push(_jsx("span", { className: `wildo-api-ref__tok--${colon !== undefined ? 'key' : 'string'}`, children: quoted }, index));
+            if (colon !== undefined)
+                nodes.push(colon);
+        }
+        else {
+            const kind = literal !== undefined ? 'literal' : number !== undefined ? 'number' : 'keyword';
+            nodes.push(_jsx("span", { className: `wildo-api-ref__tok--${kind}`, children: text }, index));
+        }
+        last = index + text.length;
+    }
+    if (last < source.length)
+        nodes.push(source.slice(last));
+    return nodes;
+}
+/** Whether `fragment` names this variant, its request body or one of its responses. */
+function variantOwnsFragment(variant, fragment) {
+    return fragment.length > 0 && (variant.anchorId === fragment
+        || variant.requestBody?.anchorId === fragment
+        || variant.responses.some((response) => response.anchorId === fragment));
 }
 function currentFragment() {
     if (typeof window === 'undefined')
         return '';
     return window.location.hash.startsWith('#') ? window.location.hash.slice(1) : window.location.hash;
 }
-function ParameterTable({ parameters }) {
-    return _jsx("div", { style: { maxWidth: '100%', overflowX: 'auto' }, children: _jsxs("table", { children: [_jsx("thead", { children: _jsxs("tr", { children: [_jsx("th", { children: "Name" }), _jsx("th", { children: "Location" }), _jsx("th", { children: "Type" }), _jsx("th", { children: "Required" }), _jsx("th", { children: "Description" }), _jsx("th", { children: "Examples" })] }) }), _jsx("tbody", { children: parameters.map((parameter) => _jsxs("tr", { children: [_jsx("td", { children: _jsx("code", { children: parameter.name }) }), _jsx("td", { children: parameter.location }), _jsx("td", { children: parameter.schema === null ? '—' : _jsx(SchemaType, { schema: parameter.schema }) }), _jsx("td", { children: parameter.required ? 'Yes' : 'No' }), _jsx("td", { children: parameter.description ?? '—' }), _jsx("td", { children: parameter.examples.length > 0 ? _jsx(Examples, { examples: parameter.examples }) : '—' })] }, `${parameter.location}:${parameter.name}`)) })] }) });
+/**
+ * The operation's documented failure modes, each with what a client branches on. The third column
+ * names the FIELD as well as the value, because `error.type`, `error.customMessageReference` and
+ * `error.code` are read from three different places in the error body.
+ */
+/** The error-body fields a client branches on — wire field names, shown as code, not words. */
+const ERROR_BRANCH_FIELDS = { TYPE: 'error.type', MESSAGE_REFERENCE: 'error.customMessageReference', CODE: 'error.code' };
+function ErrorScenarioTable({ scenarios }) {
+    const words = useReferenceWords();
+    return _jsx("div", { className: "wildo-api-ref__table-scroll", children: _jsxs("table", { children: [_jsx("thead", { children: _jsxs("tr", { children: [_jsx("th", { scope: "col", children: words.errorStatus }), _jsx("th", { scope: "col", children: words.errorWhen }), _jsx("th", { scope: "col", children: words.errorBranchOn })] }) }), _jsx("tbody", { children: scenarios.map((scenario, index) => {
+                        const identifiers = [
+                            scenario.errorType === null ? null : [ERROR_BRANCH_FIELDS.TYPE, scenario.errorType],
+                            scenario.customMessageReference === null ? null : [ERROR_BRANCH_FIELDS.MESSAGE_REFERENCE, scenario.customMessageReference],
+                            scenario.errorCode === null ? null : [ERROR_BRANCH_FIELDS.CODE, scenario.errorCode],
+                        ].filter((identifier) => identifier !== null);
+                        return _jsxs("tr", { children: [_jsx("td", { children: _jsx("code", { children: scenario.status }) }), _jsx("td", { children: _jsx(OpenApiInlineCommonMark, { source: scenario.when }) }), _jsx("td", { children: identifiers.length === 0 ? '—' : identifiers.map(([field, value], identifierIndex) => _jsxs(Fragment, { children: [identifierIndex > 0 ? _jsx("br", {}) : null, _jsx("code", { children: field }), " = ", _jsx("code", { children: value })] }, field)) })] }, `${scenario.status}:${index}`);
+                    }) })] }) });
+}
+/** Where a parameter travels (the OpenAPI `in` values), in reading order, with the word that heads each group. */
+const PARAMETER_LOCATION_HEADINGS = [
+    ['path', (words) => words.pathParameters],
+    ['query', (words) => words.queryParameters],
+    ['header', (words) => words.headerParameters],
+    ['cookie', (words) => words.cookieParameters],
+];
+/** The operation's parameters as field rows, grouped by where they travel: path, query, header, cookie. */
+function ParameterSections({ parameters, level }) {
+    const words = useReferenceWords();
+    if (parameters.length === 0)
+        return null;
+    const known = new Set(PARAMETER_LOCATION_HEADINGS.map(([location]) => location));
+    const sections = [
+        ...PARAMETER_LOCATION_HEADINGS.map(([location, heading]) => ({ heading: heading(words), parameters: parameters.filter((parameter) => parameter.location === location) })),
+        { heading: words.otherParameters, parameters: parameters.filter((parameter) => !known.has(parameter.location)) },
+    ].filter((section) => section.parameters.length > 0);
+    return _jsx(_Fragment, { children: sections.map((section) => _jsxs("section", { children: [_jsx(Heading, { level: level, className: "wildo-api-ref__subheading", children: section.heading }), _jsx("ul", { className: "wildo-api-ref__fields", "aria-label": section.heading, children: section.parameters.map((parameter) => _jsxs("li", { className: "wildo-api-ref__field", children: [_jsxs("div", { className: "wildo-api-ref__field-head", children: [_jsx("code", { className: "wildo-api-ref__field-name", children: parameter.name }), _jsxs("span", { className: "wildo-api-ref__field-meta", children: [parameter.schema === null ? null : _jsxs(_Fragment, { children: [_jsx(SchemaType, { schema: parameter.schema }), " \u00B7 "] }), parameter.required ? _jsx("span", { className: "wildo-api-ref__required", children: words.required }) : words.optional] })] }), _jsxs("div", { className: "wildo-api-ref__field-body", children: [_jsx(ParameterDescription, { parameter: parameter }), parameter.examples.length > 0 ? _jsx(Examples, { examples: parameter.examples }) : null] })] }, `${parameter.location}:${parameter.name}`)) })] }, section.heading)) });
 }
+/**
+ * A parameter's own description, then the contract its schema carries: allowed values with their
+ * meanings, default, format and limits. The row's head shows only the identity (`string`), so
+ * without this an enum filter such as `status` read as a free string although the document lists
+ * its four values.
+ *
+ * The generator copies a filter field's description onto both the parameter and its schema, so the
+ * schema's copy is dropped when the parameter's text already begins with it (a range filter appends
+ * its wire hint after the same meaning). A description carried ONLY by the schema is kept.
+ */
+function ParameterDescription({ parameter }) {
+    const schemaDescription = parameter.schema?.description ?? null;
+    const restatesSchemaDescription = schemaDescription !== null && parameter.description !== null && parameter.description.startsWith(schemaDescription);
+    const contract = parameter.schema === null ? null : { ...parameter.schema, description: restatesSchemaDescription ? null : schemaDescription };
+    const resolution = useContext(SchemaResolutionContext);
+    const hasContract = contract !== null && schemaHasContractDetails(contract, resolution);
+    if (parameter.description === null && !hasContract)
+        return '—';
+    return _jsxs(_Fragment, { children: [parameter.description !== null
+                ? _jsx(OpenApiCommonMark, { source: contract === null ? parameter.description : withoutRestatedEnumLegend(parameter.description, contract) })
+                : null, hasContract ? _jsx(SchemaContract, { schema: contract }) : null] });
+}
+/**
+ * The generator appends a markdown `Values:` legend to an enum field's description for readers
+ * that ignore `x-enum-descriptions` (spec-to-operation-doc `composeFieldDescription`). Where this
+ * view renders those same values as their own "Allowed values" list, the legend is a second copy
+ * of it, so it is dropped — only when EVERY value carries its own description, so nothing the
+ * legend says can be lost.
+ */
+function withoutRestatedEnumLegend(description, schema) {
+    const everyValueDescribed = schema.enumValues.length > 0 && schema.enumValues.every((enumValue) => enumValue.description !== null);
+    return everyValueDescribed ? description.replace(/(?:^|\n\n)Values:\n(?:- [^\n]*(?:\n|$))+$/, '').trimEnd() : description;
+}
+/**
+ * The documented responses as status tabs, successes first, with the selected one's description and
+ * body below. The selection is shared with the code panel's response example.
+ */
+function ResponseTabs({ variant, selectedStatus, onSelectStatus, }) {
+    const words = useReferenceWords();
+    const ordered = useMemo(() => {
+        const isSuccess = (status) => responseStatusClass(status) === ResponseStatusClass.SUCCESS;
+        return [...variant.responses.filter((response) => isSuccess(response.status)), ...variant.responses.filter((response) => !isSuccess(response.status))];
+    }, [variant]);
+    const selected = ordered.find((response) => response.status === selectedStatus) ?? ordered[0];
+    if (selected === undefined)
+        return null;
+    const tabId = (status) => `${variant.anchorId}--status-${status}`;
+    return _jsxs(_Fragment, { children: [_jsx("div", { role: "tablist", "aria-label": words.documentedResponses, className: "wildo-api-ref__status-tabs", onKeyDown: onTabListKeyDown, children: ordered.map((response) => _jsxs("button", { type: "button", role: "tab", id: tabId(response.status), className: "wildo-api-ref__status-tab", "aria-selected": response === selected, "aria-controls": response === selected ? `${tabId(response.status)}-panel` : undefined, tabIndex: response === selected ? 0 : -1, onClick: () => onSelectStatus(response.status), children: [_jsx(StatusDot, { status: response.status }), response.status] }, response.status)) }), _jsx("div", { role: "tabpanel", id: `${tabId(selected.status)}-panel`, "aria-labelledby": tabId(selected.status), children: _jsx(ResponseContract, { response: selected }, selected.status) })] });
+}
+/**
+ * An error status carries the one shared error envelope on almost every operation, so its fields are
+ * behind a disclosure rendered only when opened; a success or request body is what the reader came
+ * for, so its fields are shown in place.
+ */
 function ResponseContract({ response }) {
-    return _jsxs("section", { className: "margin-bottom--md", children: [_jsxs("p", { id: response.anchorId, className: "margin-bottom--sm", children: [_jsx("strong", { children: _jsx("code", { children: response.status }) }), response.description !== null ? ` — ${response.description}` : ''] }), _jsx(RepresentationList, { mediaTypes: response.mediaTypes })] });
+    const statusClass = responseStatusClass(response.status);
+    const isErrorStatus = statusClass === ResponseStatusClass.CLIENT_ERROR || statusClass === ResponseStatusClass.SERVER_ERROR;
+    return _jsxs("section", { className: "wildo-api-ref__response", id: response.anchorId, children: [_jsxs("p", { children: [_jsx("strong", { children: _jsx("code", { children: response.status }) }), response.description !== null ? _jsxs(_Fragment, { children: [" \u2014 ", _jsx(OpenApiInlineCommonMark, { source: response.description })] }) : null] }), _jsx(RepresentationList, { mediaTypes: response.mediaTypes, fieldsCollapsed: isErrorStatus })] });
 }
-function RepresentationList({ mediaTypes }) {
+function RepresentationList({ mediaTypes, fieldsCollapsed = false }) {
+    const words = useReferenceWords();
+    const resolution = useContext(SchemaResolutionContext);
     if (mediaTypes.length === 0)
-        return _jsx("p", { children: "No structured representation." });
-    return _jsx("ul", { children: mediaTypes.map((representation) => _jsxs("li", { children: [_jsx("code", { children: representation.mediaType }), representation.schema !== null ? _jsxs(_Fragment, { children: [" \u2014 ", _jsx(SchemaType, { schema: representation.schema })] }) : null, representation.examples.length > 0 ? _jsx(Examples, { examples: representation.examples }) : null] }, representation.mediaType)) });
+        return _jsx("p", { children: words.noStructuredRepresentation });
+    return _jsx("ul", { className: "wildo-api-ref__representations", children: mediaTypes.map((representation) => {
+            const schema = representation.schema;
+            const hasFields = schema !== null && schemaHasContractDetails(displayedSchema(schema, resolution), resolution);
+            return _jsxs("li", { children: [_jsx("span", { className: "wildo-api-ref__media", children: representation.mediaType }), schema !== null ? _jsxs(_Fragment, { children: [" \u2014 ", _jsx(SchemaType, { schema: schema })] }) : null, schema !== null && hasFields
+                        ? fieldsCollapsed
+                            ? _jsx(LazyDisclosure, { summary: words.bodyFields, render: () => _jsx(SchemaContract, { schema: schema }) })
+                            : _jsx("div", { children: _jsx(SchemaContract, { schema: schema, openCollections: true, collapseLongLists: true }) })
+                        : null, representation.examples.length > 0 ? _jsx(Examples, { examples: representation.examples }) : null] }, representation.mediaType);
+        }) });
+}
+/**
+ * A disclosure whose content is built only once it is opened. Nested fields are the bulk of a resource
+ * page: building every closed "Child fields" disclosure put Wonder Todos' Todos page at 33,043 nodes
+ * during the #1616 redesign, so what is closed is not built.
+ */
+function LazyDisclosure({ summary, render, initiallyOpen = false }) {
+    const [isOpen, setIsOpen] = useState(initiallyOpen);
+    return _jsxs("details", { className: "wildo-api-ref__children", open: initiallyOpen, onToggle: (event) => setIsOpen(event.currentTarget.open), children: [_jsx("summary", { children: summary }), isOpen ? _jsx("div", { className: "wildo-api-ref__nested", children: render() }) : null] });
 }
-/** Presents a schema identity without resolving component references in React. */
-function SchemaType({ schema }) {
+/**
+ * Presents a schema identity; a reference stays a link to the reusable model it names. `linked={false}`
+ * renders the name without the link, for a place that is itself interactive (a disclosure's summary),
+ * where a nested link is unreachable by keyboard and confusing to a screen reader.
+ */
+function SchemaType({ schema, linked = true }) {
+    const words = useReferenceWords();
     if (schema.booleanSchema !== null)
-        return _jsx("code", { children: schema.booleanSchema ? 'any value' : 'no value' });
+        return _jsx("code", { children: schema.booleanSchema ? words.anyValue : words.noValue });
     if (schema.referenceName !== null) {
-        return schema.referenceAnchorId === null
+        return schema.referenceAnchorId === null || !linked
             ? _jsx("code", { children: schema.referenceName })
             : _jsx("a", { href: `#${schema.referenceAnchorId}`, children: _jsx("code", { children: schema.referenceName }) });
     }
@@ -233,16 +869,17 @@ function SchemaType({ schema }) {
         return _jsx("code", { children: schema.types.join(' | ') });
     if (schema.compositions.length > 0)
         return _jsx("code", { children: schema.compositions.map((composition) => composition.kind).join(' + ') });
-    return _jsx("code", { children: "schema" });
+    return _jsx("code", { children: words.unnamedSchema });
 }
-function schemaHasNestedContract(schema) {
-    return schema.properties.length > 0
+function schemaHasNestedContract(schema, resolution) {
+    return expandableReference(schema, resolution) !== null
+        || schema.properties.length > 0
         || schema.items !== null
         || schema.compositions.length > 0
         || (schema.additionalProperties !== null && typeof schema.additionalProperties === 'object');
 }
-function schemaHasContractDetails(schema) {
-    return schemaHasNestedContract(schema)
+function schemaHasContractDetails(schema, resolution) {
+    return schemaHasNestedContract(schema, resolution)
         || schema.description !== null
         || schema.format !== null
         || schema.defaultValue !== null
@@ -251,34 +888,143 @@ function schemaHasContractDetails(schema) {
         || schema.constraints.length > 0
         || schema.additionalProperties !== null;
 }
-/** Recursively renders only the contract fields carried by the OpenAPI Schema Object. */
-function SchemaContract({ schema }) {
-    return _jsxs("div", { children: [schema.description !== null ? _jsx("p", { children: schema.description }) : null, schema.format !== null ? _jsxs("p", { className: "margin-bottom--sm", children: [_jsx("strong", { children: "Format:" }), " ", _jsx("code", { children: schema.format })] }) : null, schema.defaultValue !== null ? _jsxs("p", { className: "margin-bottom--sm", children: [_jsx("strong", { children: "Default:" }), " ", _jsx("code", { children: schema.defaultValue })] }) : null, schema.constValue !== null ? _jsxs("p", { className: "margin-bottom--sm", children: [_jsx("strong", { children: "Constant:" }), " ", _jsx("code", { children: schema.constValue })] }) : null, schema.constraints.length > 0 ? _jsx("dl", { className: "margin-bottom--md", children: schema.constraints.map((constraint) => _jsxs(Fragment, { children: [_jsx("dt", { children: _jsx("code", { children: constraint.kind }) }), _jsx("dd", { children: _jsx("code", { children: constraint.jsonValue }) })] }, constraint.kind)) }) : null, schema.enumValues.length > 0 ? _jsxs(_Fragment, { children: [_jsx("p", { className: "margin-bottom--sm", children: _jsx("strong", { children: "Allowed values" }) }), _jsx("ul", { children: schema.enumValues.map((enumValue) => _jsxs("li", { children: [_jsx("code", { children: enumValue.jsonValue }), enumValue.description !== null ? ` — ${enumValue.description}` : ''] }, enumValue.jsonValue)) })] }) : null, schema.properties.length > 0 ? _jsxs(_Fragment, { children: [_jsx("p", { className: "margin-bottom--sm", children: _jsx("strong", { children: "Properties" }) }), _jsx("ul", { style: { listStyle: 'none', paddingInlineStart: '1rem' }, children: schema.properties.map((property) => _jsx(SchemaProperty, { property: property }, property.name)) })] }) : null, schema.items !== null ? _jsxs("details", { className: "margin-bottom--sm", children: [_jsxs("summary", { children: ["Array items \u2014 ", _jsx(SchemaType, { schema: schema.items })] }), _jsx("div", { className: "margin-left--md margin-top--sm", children: _jsx(SchemaContract, { schema: schema.items }) })] }) : null, schema.compositions.map((composition) => _jsxs("section", { className: "margin-bottom--md", children: [_jsx("p", { className: "margin-bottom--sm", children: _jsx("strong", { children: schemaCompositionLabel(composition.kind) }) }), _jsx("ol", { children: composition.branches.map((branch, index) => _jsxs("li", { className: "margin-bottom--sm", children: [_jsx(SchemaType, { schema: branch }), schemaHasContractDetails(branch)
-                                    ? _jsx("div", { className: "margin-left--md margin-top--sm", children: _jsx(SchemaContract, { schema: branch }) })
-                                    : null] }, index)) })] }, composition.kind)), schema.additionalProperties !== null ? _jsxs("div", { className: "margin-bottom--sm", children: [_jsx("strong", { children: "Additional properties:" }), typeof schema.additionalProperties === 'boolean'
-                        ? ` ${schema.additionalProperties ? 'allowed' : 'not allowed'}`
-                        : _jsxs(_Fragment, { children: [_jsx("span", { children: " " }), _jsx(SchemaType, { schema: schema.additionalProperties }), _jsx("div", { className: "margin-left--md", children: _jsx(SchemaContract, { schema: schema.additionalProperties }) })] })] }) : null] });
-}
-function SchemaProperty({ property }) {
-    const identity = _jsxs(_Fragment, { children: [_jsx("code", { children: property.name }), " \u2014 ", _jsx(SchemaType, { schema: property.schema }), " \u2014 ", property.required ? 'required' : 'optional'] });
-    return _jsx("li", { className: "margin-bottom--sm", style: { borderLeft: '2px solid var(--ifm-color-emphasis-300)', paddingInlineStart: '0.75rem' }, children: schemaHasNestedContract(property.schema)
-            ? _jsxs("details", { children: [_jsx("summary", { children: identity }), _jsx("div", { className: "margin-top--sm", children: _jsx(SchemaContract, { schema: property.schema }) })] })
-            : _jsxs(_Fragment, { children: [_jsx("p", { className: "margin-bottom--sm", children: identity }), _jsx(SchemaContract, { schema: property.schema })] }) });
-}
-function schemaCompositionLabel(kind) {
+/**
+ * Recursively renders only the contract fields carried by the OpenAPI Schema Object: first what the
+ * value itself must be (`SchemaFacts`), then what it contains (`SchemaChildren`).
+ *
+ * A reference to a reusable component is shown in place (see `SchemaResolution`). `openCollections`
+ * opens an array property and its items at this level — a paginated body's `data[]` rows are what a
+ * list response is for — and is not passed further down.
+ */
+function SchemaContract({ schema, openCollections = false, collapseLongLists = false }) {
+    const resolution = useContext(SchemaResolutionContext);
+    const reference = expandableReference(schema, resolution);
+    if (reference !== null) {
+        return _jsx(SchemaResolutionContext.Provider, { value: { ...resolution, expanding: new Set([...resolution.expanding, reference.name]) }, children: _jsx(SchemaContract, { schema: reference.schema, openCollections: openCollections, collapseLongLists: collapseLongLists }) });
+    }
+    return _jsxs(_Fragment, { children: [_jsx(SchemaFacts, { schema: schema }), _jsx(SchemaChildren, { schema: schema, openCollections: openCollections, collapseLongLists: collapseLongLists })] });
+}
+/** What a value must be: its description, format, default, constant, limits and allowed values. */
+function SchemaFacts({ schema }) {
+    const words = useReferenceWords();
+    const everyValueUndescribed = schema.enumValues.every((enumValue) => enumValue.description === null);
+    return _jsxs(_Fragment, { children: [schema.description !== null ? _jsx(OpenApiCommonMark, { source: withoutRestatedEnumLegend(schema.description, schema) }) : null, schema.format !== null ? _jsxs("p", { children: [_jsx("strong", { children: words.format }), " ", _jsx("code", { children: schema.format })] }) : null, schema.defaultValue !== null ? _jsxs("p", { children: [_jsx("strong", { children: words.defaultValue }), " ", _jsx("code", { children: schema.defaultValue })] }) : null, schema.constValue !== null ? _jsxs("p", { children: [_jsx("strong", { children: words.constantValue }), " ", _jsx("code", { children: schema.constValue })] }) : null, schema.constraints.length > 0 ? _jsx("p", { className: "wildo-api-ref__chips", children: schema.constraints.map((constraint) => _jsxs("code", { className: "wildo-api-ref__chip wildo-api-ref__chip--outline", children: [constraint.kind, ": ", constraint.jsonValue] }, constraint.kind)) }) : null, schema.enumValues.length > 0 ? _jsxs(_Fragment, { children: [_jsx("p", { className: "wildo-api-ref__nested-label", children: words.allowedValues }), everyValueUndescribed
+                        ? _jsx("ul", { className: "wildo-api-ref__chips", children: schema.enumValues.map((enumValue) => _jsx("li", { children: _jsx("code", { className: "wildo-api-ref__chip", children: enumValue.jsonValue }) }, enumValue.jsonValue)) })
+                        : _jsx("ul", { className: "wildo-api-ref__enum", children: schema.enumValues.map((enumValue) => _jsxs("li", { children: [_jsx("code", { className: "wildo-api-ref__chip", children: enumValue.jsonValue }), enumValue.description !== null ? _jsxs(_Fragment, { children: [" \u2014 ", _jsx(OpenApiInlineCommonMark, { source: enumValue.description })] }) : null] }, enumValue.jsonValue)) })] }) : null] });
+}
+/** Past this many properties, a list shows the first few and offers the rest behind a button. */
+const PROPERTY_LIST_COLLAPSE_THRESHOLD = 14;
+const PROPERTY_LIST_COLLAPSED_COUNT = 10;
+/** What a value contains: its properties, array items, composition branches and extra keys. */
+function SchemaChildren({ schema, openCollections, collapseLongLists }) {
+    const words = useReferenceWords();
+    const resolution = useContext(SchemaResolutionContext);
+    const [showsAll, setShowsAll] = useState(false);
+    const ordered = propertiesInReadingOrder(schema.properties);
+    const isCollapsed = collapseLongLists && !showsAll && ordered.length > PROPERTY_LIST_COLLAPSE_THRESHOLD;
+    const shown = isCollapsed ? ordered.slice(0, PROPERTY_LIST_COLLAPSED_COUNT) : ordered;
+    const hidden = ordered.slice(shown.length);
+    return _jsxs(_Fragment, { children: [ordered.length > 0 ? _jsxs(_Fragment, { children: [_jsx("p", { className: "wildo-api-ref__nested-label", children: words.properties }), _jsx("ul", { className: "wildo-api-ref__fields", children: shown.map((property) => _jsx(SchemaProperty, { property: property, openCollections: openCollections }, property.name)) }), isCollapsed ? _jsx("button", { type: "button", className: "wildo-api-ref__more", onClick: () => setShowsAll(true), children: words.showMoreFields(hidden.length, hidden.slice(0, 4).map((property) => (property.required ? words.requiredFieldMarker(property.name) : property.name)), hidden.length > 4) }) : null] }) : null, schema.items !== null ? _jsx(LazyDisclosure, { summary: renderSentence(words.arrayItemsOf, { type: _jsx(SchemaType, { schema: schema.items, linked: false }) }), initiallyOpen: openCollections, render: () => _jsxs(_Fragment, { children: [schema.items.referenceName !== null && schema.items.referenceAnchorId !== null
+                            ? _jsxs("p", { className: "wildo-api-ref__media", children: [words.model, " ", _jsx(SchemaType, { schema: schema.items })] })
+                            : null, _jsx(SchemaContract, { schema: schema.items })] }) }) : null, schema.compositions.map((composition) => (composition.kind !== ApiReferenceSchemaCompositionKind.ALL_OF && compositionBranchesAreObjects(composition.branches, resolution)
+                ? _jsx(CompositionSwitch, { kind: composition.kind, branches: composition.branches, collapseLongLists: collapseLongLists }, composition.kind)
+                : _jsxs("section", { children: [_jsx("p", { className: "wildo-api-ref__nested-label", children: schemaCompositionLabel(composition.kind, words) }), _jsx("ol", { children: composition.branches.map((branch, index) => _jsxs("li", { children: [_jsx(SchemaType, { schema: branch }), schemaHasContractDetails(branch, resolution)
+                                        ? _jsx("div", { className: "wildo-api-ref__nested", children: _jsx(SchemaContract, { schema: branch }) })
+                                        : null] }, index)) })] }, composition.kind))), schema.additionalProperties !== null ? _jsxs("div", { children: [_jsx("strong", { children: words.additionalProperties }), additionalPropertiesIsFlag(schema.additionalProperties)
+                        ? _jsxs(_Fragment, { children: [" ", schema.additionalProperties ? words.allowed : words.notAllowed] })
+                        : _jsxs(_Fragment, { children: [_jsx("span", { children: " " }), _jsx(SchemaType, { schema: schema.additionalProperties }), _jsx("div", { className: "wildo-api-ref__nested", children: _jsx(SchemaContract, { schema: schema.additionalProperties }) })] })] }) : null] });
+}
+/** Whether `additionalProperties` is the boolean form (allowed / not allowed) rather than a schema. */
+function additionalPropertiesIsFlag(value) {
+    return typeof value === 'boolean';
+}
+/**
+ * Properties in the order a reader wants them: required first, then optional, each in the order the
+ * contract declares them, and engine metadata (`_id`, `_version`, `_field_meta`) last. Alphabetical
+ * order put `_field_meta` first and separated `title` from `status`.
+ */
+function propertiesInReadingOrder(properties) {
+    const rank = (property) => (property.name.startsWith('_') ? 2 : property.required ? 0 : 1);
+    return properties.map((property, index) => ({ property, index }))
+        .sort((left, right) => rank(left.property) - rank(right.property) || left.index - right.index)
+        .map(({ property }) => property);
+}
+/**
+ * One field row: its name, type and whether it is required on the left; on the right what it must be,
+ * then, behind a disclosure, the fields it contains.
+ */
+function SchemaProperty({ property, openCollections = false }) {
+    const words = useReferenceWords();
+    const resolution = useContext(SchemaResolutionContext);
+    const reference = expandableReference(property.schema, resolution);
+    const shown = reference?.schema ?? property.schema;
+    const innerResolution = reference === null ? resolution : { ...resolution, expanding: new Set([...resolution.expanding, reference.name]) };
+    const hasChildren = schemaHasNestedContract(shown, innerResolution);
+    const opensAsCollection = openCollections && shown.items !== null;
+    return _jsxs("li", { className: "wildo-api-ref__field", children: [_jsxs("div", { className: "wildo-api-ref__field-head", children: [_jsx("code", { className: "wildo-api-ref__field-name", children: property.name }), _jsxs("span", { className: "wildo-api-ref__field-meta", children: [_jsx(SchemaType, { schema: property.schema }), " \u00B7 ", property.required ? _jsx("span", { className: "wildo-api-ref__required", children: words.required }) : words.optional] })] }), _jsx("div", { className: "wildo-api-ref__field-body", children: _jsxs(SchemaResolutionContext.Provider, { value: innerResolution, children: [_jsx(SchemaFacts, { schema: shown }), hasChildren ? _jsx(LazyDisclosure, { summary: _jsx(_Fragment, { children: words.childFieldsOf(property.name) }), initiallyOpen: opensAsCollection, render: () => _jsx(SchemaChildren, { schema: shown, openCollections: opensAsCollection, collapseLongLists: false }) }) : null] }) })] });
+}
+/** Whether every branch of a composition is an object with fields, so the branches read as alternative shapes. */
+function compositionBranchesAreObjects(branches, resolution) {
+    return branches.length > 1 && branches.every((branch) => displayedSchema(branch, resolution).properties.length > 0);
+}
+/**
+ * What tells the branches of a composition apart: a property every branch declares with a single
+ * value of its own (`recurringType: "one_time"` against `"recurring"`), or else the branch's model name.
+ */
+function compositionBranchLabels(branches, resolution, words) {
+    const shown = branches.map((branch) => displayedSchema(branch, resolution));
+    const fixedValue = (schema, name) => {
+        const property = schema.properties.find((candidate) => candidate.name === name);
+        if (property === undefined)
+            return null;
+        const value = property.schema.constValue ?? (property.schema.enumValues.length === 1 ? property.schema.enumValues[0].jsonValue : null);
+        if (value === null)
+            return null;
+        try {
+            const parsed = JSON.parse(value);
+            return typeof parsed === 'string' ? parsed : value;
+        }
+        catch {
+            return value;
+        }
+    };
+    const discriminator = (shown[0]?.properties ?? []).map((property) => property.name).find((name) => {
+        const values = shown.map((schema) => fixedValue(schema, name));
+        return values.every((value) => value !== null) && new Set(values).size === values.length;
+    });
+    return branches.map((branch, index) => (discriminator !== undefined ? words.discriminatorValue(discriminator, fixedValue(shown[index], discriminator) ?? '') : branch.referenceName ?? words.compositionOption(index + 1)));
+}
+/**
+ * A `oneOf`/`anyOf` whose branches are objects (never an `allOf`, whose branches all apply at once) is a choice between shapes of one body — a one-time or a
+ * recurring todo. It is shown as a switch between the shapes, one built at a time, rather than every
+ * shape's fields one after another.
+ */
+function CompositionSwitch({ kind, branches, collapseLongLists }) {
+    const words = useReferenceWords();
+    const resolution = useContext(SchemaResolutionContext);
+    const labels = useMemo(() => compositionBranchLabels(branches, resolution, words), [branches, resolution, words]);
+    const [selectedIndex, setSelectedIndex] = useState(0);
+    const idBase = useId();
+    const tabId = (index) => `${idBase}-shape-${index}`;
+    const selected = branches[selectedIndex] ?? branches[0];
+    return _jsxs("section", { children: [_jsx("p", { className: "wildo-api-ref__nested-label", children: words.compositionShapes(schemaCompositionLabel(kind, words), branches.length) }), _jsx("div", { role: "tablist", "aria-label": words.compositionShapes(schemaCompositionLabel(kind, words), branches.length), className: "wildo-api-ref__segmented", onKeyDown: onTabListKeyDown, children: labels.map((label, index) => _jsx("button", { type: "button", role: "tab", id: tabId(index), className: "wildo-api-ref__segment", "aria-selected": index === selectedIndex, "aria-controls": index === selectedIndex ? `${idBase}-shape-panel` : undefined, tabIndex: index === selectedIndex ? 0 : -1, onClick: () => setSelectedIndex(index), children: label }, index)) }), _jsxs("div", { role: "tabpanel", id: `${idBase}-shape-panel`, "aria-labelledby": tabId(selectedIndex), children: [selected.referenceName !== null ? _jsxs("p", { className: "wildo-api-ref__media", children: [words.model, " ", _jsx(SchemaType, { schema: selected })] }) : null, _jsx(SchemaContract, { schema: selected, collapseLongLists: collapseLongLists }, selectedIndex)] })] });
+}
+function schemaCompositionLabel(kind, words) {
     switch (kind) {
-        case ApiReferenceSchemaCompositionKind.ONE_OF: return 'One of';
-        case ApiReferenceSchemaCompositionKind.ANY_OF: return 'Any of';
-        case ApiReferenceSchemaCompositionKind.ALL_OF: return 'All of';
+        case ApiReferenceSchemaCompositionKind.ONE_OF: return words.oneOf;
+        case ApiReferenceSchemaCompositionKind.ANY_OF: return words.anyOf;
+        case ApiReferenceSchemaCompositionKind.ALL_OF: return words.allOf;
     }
 }
 /** Renders OpenAPI reusable schemas only when a reader explicitly selects one. */
 function ComponentSchemaReference({ schemas, activeFragment, }) {
+    const words = useReferenceWords();
     const selectedSchema = schemas.find((schema) => schema.anchorId === activeFragment) ?? null;
-    return _jsxs("details", { className: "margin-bottom--xl", open: selectedSchema !== null, children: [_jsxs("summary", { children: ["Reusable data models (", schemas.length, ")"] }), selectedSchema === null ? _jsx("p", { className: "margin-top--md", children: "Select a request or response model link to inspect its OpenAPI schema." }) : _jsxs("section", { className: "margin-top--lg", children: [_jsx("h2", { id: selectedSchema.anchorId, children: selectedSchema.name }), _jsxs("p", { children: [_jsx("strong", { children: "Type:" }), " ", _jsx("span", { children: " " }), _jsx(SchemaType, { schema: selectedSchema.schema })] }), _jsx(SchemaContract, { schema: selectedSchema.schema })] })] });
+    return _jsx("div", { className: "wildo-api-ref__models", children: _jsxs("details", { className: "wildo-api-ref__disclosure", open: selectedSchema !== null, children: [_jsx("summary", { children: words.reusableDataModels(schemas.length) }), selectedSchema === null ? _jsx("p", { children: words.selectModelPrompt }) : _jsxs("section", { children: [_jsx("h2", { id: selectedSchema.anchorId, children: selectedSchema.name }), _jsxs("p", { children: [_jsx("strong", { children: words.schemaType }), " ", _jsx("span", { children: " " }), _jsx(SchemaType, { schema: selectedSchema.schema })] }), _jsx(SchemaContract, { schema: selectedSchema.schema })] })] }) });
 }
 /** Renders only OpenAPI-declared examples; this component never invents sample payloads. */
 function Examples({ examples }) {
-    return _jsxs("details", { className: "margin-top--sm", children: [_jsxs("summary", { children: ["Examples (", examples.length, ")"] }), examples.map((example) => _jsxs("div", { className: "margin-top--sm", children: [_jsxs("p", { className: "margin-bottom--sm", children: [_jsx("strong", { children: example.name }), example.summary !== null ? ` — ${example.summary}` : ''] }), example.description !== null ? _jsx("p", { className: "margin-bottom--sm", children: example.description }) : null, example.jsonValue !== null ? _jsx("pre", { children: _jsx("code", { children: example.jsonValue }) }) : null, example.externalValue !== null ? _jsxs("p", { className: "margin-bottom--sm", children: ["External example: ", _jsx("a", { href: example.externalValue, children: example.externalValue })] }) : null, example.jsonValue === null && example.externalValue === null ? _jsx("p", { className: "margin-bottom--sm", children: "No inline example value was supplied." }) : null] }, example.name))] });
+    const words = useReferenceWords();
+    return _jsxs("details", { className: "wildo-api-ref__inline-disclosure", children: [_jsx("summary", { children: words.examples(examples.length) }), examples.map((example) => _jsxs("div", { children: [_jsxs("p", { children: [_jsx("strong", { children: example.name }), example.summary !== null ? ` — ${example.summary}` : ''] }), example.description !== null ? _jsx("p", { children: _jsx(OpenApiInlineCommonMark, { source: example.description }) }) : null, example.jsonValue !== null ? _jsx("pre", { tabIndex: 0, children: _jsx("code", { children: example.jsonValue }) }) : null, example.externalValue !== null ? _jsxs("p", { children: [words.externalExample, " ", _jsx("a", { href: example.externalValue, children: example.externalValue })] }) : null, example.jsonValue === null && example.externalValue === null ? _jsx("p", { children: words.noInlineExample }) : null] }, example.name))] });
 }
 //# sourceMappingURL=openapi-reference-view.js.map