@gitbook/react-openapi 0.7.1 → 1.0.1

package/CHANGELOG.md

@@ -1,5 +1,54 @@
 # @gitbook/react-openapi
 
+## 1.0.1
+
+### Patch Changes
+
+-   f8d4c76: Sync tabs across all OpenAPI blocks
+-   dddb4ec: Fix long tab group description
+-   f8d4c76: Support for OpenAPI references
+
+## 1.0.0
+
+### Major Changes
+
+-   727bde2: Improve and split OpenAPI parser into its own package
+-   12c7862: Use `@scalar/openapi-parser` to be more resilient and perf on OpenAPI spec parsing:
+
+    -   `fetcher.fetch` must now returns a valid OpenAPI document
+    -   `parseOpenAPIV3` has been replaced by `parseOpenAPI`
+
+### Minor Changes
+
+-   162b4b7: Add in HTTP example code blocks
+-   e4e2f52: Add an optional client context to get a callback called when the Scalar client is opened for a block.
+-   eb7c22f: Revert scalar to 1.0.87 to mitigate an issue with ApiClientModalProvider
+-   160fca1: new OpenAPI blocks design
+-   e721f17: Use `@scalar/oas-utils` getExampleFromSchema to generate OpenAPI examples
+-   fe8acc9: Fix an issue where a missing OpenAPI example would crash the page.
+-   1823101: Fix internal properties appearing in OpenAPI docs.
+
+### Patch Changes
+
+-   d9029c7: Support apiKey in CodeSample security headers
+-   6e54a06: Support response examples
+-   0c03676: Better securities sample and headers
+-   3e5e458: Handle isArray schema type
+-   46edde9: Improve the OpenAPI package API
+-   d9c8d57: Do not dereference before caching OpenAPI spec.
+-   ccf2cff: Fix an issue where a response object using a special ref would crash the page.
+-   dda0cc6: Flatten OpenAPI security object
+-   f92e906: Prevent codemirror from loading multiple versions in scalar
+-   dff08ae: Improve performances by loading Scalar API Client only when the button is clicked
+-   fc7b16f: Updated scalar depdenency
+-   a652958: Fix error on unresolvable refs by replacing with property name and any type
+-   2f73db7: Support non primitive examples in OpenAPI block
+-   160fca1: Support deprecated and x-deprecated-sunset in OpenAPI spec
+-   b41d425: Improve OpenAPI rendering performances by caching markdown parsing
+-   Updated dependencies [46edde9]
+-   Updated dependencies [727bde2]
+    -   @gitbook/openapi-parser@1.0.0
+
 ## 0.7.1
 
 ### Patch Changes

package/dist/InteractiveSection.d.ts

@@ -1,4 +1,3 @@
-import React from 'react';
 interface InteractiveSectionTab {
     key: string;
     label: string;
@@ -16,20 +15,17 @@ export declare function InteractiveSection(props: {
     toggeable?: boolean;
     /** Default state of the toggle */
     defaultOpened?: boolean;
-    /** Icons to display for the toggle */
-    toggleOpenIcon?: React.ReactNode;
-    toggleCloseIcon?: React.ReactNode;
+    /** Icon to display for the toggle */
+    toggleIcon?: React.ReactNode;
     /** Tabs of content to display */
     tabs?: Array<InteractiveSectionTab>;
     /** Default tab to have opened */
     defaultTab?: string;
     /** Content of the header */
-    header: React.ReactNode;
+    header?: React.ReactNode;
     /** Body of the section */
     children?: React.ReactNode;
     /** Children to display within the container */
     overlay?: React.ReactNode;
-    /** An optional key referencing a value in global state */
-    stateKey?: string;
-}): React.JSX.Element;
+}): import("react").JSX.Element;
 export {};

package/dist/InteractiveSection.jsx

@@ -0,0 +1,60 @@
+'use client';
+import clsx from 'clsx';
+import { useRef, useState } from 'react';
+import { mergeProps, useButton, useDisclosure, useFocusRing } from 'react-aria';
+import { useDisclosureState } from 'react-stately';
+/**
+ * To optimize rendering, most of the components are server-components,
+ * and the interactiveness is mainly handled by a few key components like this one.
+ */
+export function InteractiveSection(props) {
+    var _a, _b, _c;
+    var id = props.id, className = props.className, _d = props.toggeable, toggeable = _d === void 0 ? false : _d, _e = props.defaultOpened, defaultOpened = _e === void 0 ? true : _e, _f = props.tabs, tabs = _f === void 0 ? [] : _f, _g = props.defaultTab, defaultTab = _g === void 0 ? (_a = tabs[0]) === null || _a === void 0 ? void 0 : _a.key : _g, header = props.header, children = props.children, overlay = props.overlay, _h = props.toggleIcon, toggleIcon = _h === void 0 ? '▶' : _h;
+    var _j = useState(defaultTab), selectedTabKey = _j[0], setSelectedTab = _j[1];
+    var selectedTab = (_b = tabs.find(function (tab) { return tab.key === selectedTabKey; })) !== null && _b !== void 0 ? _b : tabs[0];
+    var state = useDisclosureState({
+        defaultExpanded: defaultOpened,
+    });
+    var panelRef = useRef(null);
+    var triggerRef = useRef(null);
+    var _k = useDisclosure({}, state, panelRef), triggerProps = _k.buttonProps, panelProps = _k.panelProps;
+    var buttonProps = useButton(triggerProps, triggerRef).buttonProps;
+    var _l = useFocusRing(), isFocusVisible = _l.isFocusVisible, focusProps = _l.focusProps;
+    return (<div id={id} className={clsx('openapi-section', toggeable ? 'openapi-section-toggeable' : null, className, toggeable ? "".concat(className, "-").concat(state.isExpanded ? 'opened' : 'closed') : null)}>
+            {header ? (<div onClick={function () {
+                if (toggeable) {
+                    state.toggle();
+                }
+            }} className={clsx('openapi-section-header', "".concat(className, "-header"))}>
+                    <div className={clsx('openapi-section-header-content', "".concat(className, "-header-content"))}>
+                        {(children || (selectedTab === null || selectedTab === void 0 ? void 0 : selectedTab.body)) && toggeable ? (<button {...mergeProps(buttonProps, focusProps)} ref={triggerRef} className={clsx('openapi-section-toggle', "".concat(className, "-toggle"))} style={{
+                    outline: isFocusVisible
+                        ? '2px solid rgb(var(--primary-color-500) / 0.4)'
+                        : 'none',
+                }}>
+                                {toggleIcon}
+                            </button>) : null}
+                        {header}
+                    </div>
+                    <div className={clsx('openapi-section-header-controls', "".concat(className, "-header-controls"))} onClick={function (event) {
+                event.stopPropagation();
+            }}>
+                        {tabs.length > 1 ? (<select className={clsx('openapi-section-select', 'openapi-select', "".concat(className, "-tabs-select"))} value={(_c = selectedTab === null || selectedTab === void 0 ? void 0 : selectedTab.key) !== null && _c !== void 0 ? _c : ''} onChange={function (event) {
+                    setSelectedTab(event.target.value);
+                    state.expand();
+                }}>
+                                {tabs.map(function (tab) { return (<option key={tab.key} value={tab.key}>
+                                        {tab.label}
+                                    </option>); })}
+                            </select>) : null}
+                    </div>
+                </div>) : null}
+            {(!toggeable || state.isExpanded) && (children || (selectedTab === null || selectedTab === void 0 ? void 0 : selectedTab.body)) ? (<div ref={panelRef} {...panelProps} className={clsx('openapi-section-body', "".concat(className, "-body"))}>
+                    {children}
+                    {selectedTab === null || selectedTab === void 0 ? void 0 : selectedTab.body}
+                </div>) : null}
+            {overlay ? (<div className={clsx('openapi-section-overlay', "".concat(className, "-overlay"))}>
+                    {overlay}
+                </div>) : null}
+        </div>);
+}

package/dist/Markdown.d.ts

@@ -1,5 +1,4 @@
-import * as React from 'react';
 export declare function Markdown(props: {
     source: string;
     className?: string;
-}): React.JSX.Element;
+}): import("react").JSX.Element;

package/dist/Markdown.jsx

@@ -0,0 +1,5 @@
+import clsx from 'clsx';
+export function Markdown(props) {
+    var source = props.source, className = props.className;
+    return (<div className={clsx('openapi-markdown', className)} dangerouslySetInnerHTML={{ __html: source }}/>);
+}

package/dist/OpenAPICodeSample.d.ts

@@ -1,6 +1,4 @@
-import * as React from 'react';
-import { OpenAPIOperationData } from './fetchOpenAPIOperation';
-import { OpenAPIContextProps } from './types';
+import type { OpenAPIContextProps, OpenAPIOperationData } from './types';
 /**
  * Display code samples to execute the operation.
  * It supports the Redocly custom syntax as well (https://redocly.com/docs/api-reference-docs/specification-extensions/x-code-samples/)
@@ -8,4 +6,4 @@ import { OpenAPIContextProps } from './types';
 export declare function OpenAPICodeSample(props: {
     data: OpenAPIOperationData;
     context: OpenAPIContextProps;
-}): React.JSX.Element | null;
+}): import("react").JSX.Element | null;

package/dist/OpenAPICodeSample.jsx

@@ -0,0 +1,141 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { codeSampleGenerators } from './code-samples';
+import { generateMediaTypeExample, generateSchemaExample } from './generateSchemaExample';
+import { InteractiveSection } from './InteractiveSection';
+import { getServersURL } from './OpenAPIServerURL';
+import { createStateKey } from './utils';
+import { stringifyOpenAPI } from './stringifyOpenAPI';
+import { OpenAPITabs, OpenAPITabsList, OpenAPITabsPanels } from './OpenAPITabs';
+import { checkIsReference } from './utils';
+/**
+ * Display code samples to execute the operation.
+ * It supports the Redocly custom syntax as well (https://redocly.com/docs/api-reference-docs/specification-extensions/x-code-samples/)
+ */
+export function OpenAPICodeSample(props) {
+    var _a;
+    var data = props.data, context = props.context;
+    var searchParams = new URLSearchParams();
+    var headersObject = {};
+    (_a = data.operation.parameters) === null || _a === void 0 ? void 0 : _a.forEach(function (param) {
+        if (!param) {
+            return;
+        }
+        if (param.in === 'header' && param.required) {
+            var example = param.schema ? generateSchemaExample(param.schema) : undefined;
+            if (example !== undefined && param.name) {
+                headersObject[param.name] =
+                    typeof example !== 'string' ? stringifyOpenAPI(example) : example;
+            }
+        }
+        else if (param.in === 'query' && param.required) {
+            var example = param.schema ? generateSchemaExample(param.schema) : undefined;
+            if (example !== undefined && param.name) {
+                searchParams.append(param.name, String(Array.isArray(example) ? example[0] : example));
+            }
+        }
+    });
+    var requestBody = !checkIsReference(data.operation.requestBody)
+        ? data.operation.requestBody
+        : undefined;
+    var requestBodyContentEntries = (requestBody === null || requestBody === void 0 ? void 0 : requestBody.content)
+        ? Object.entries(requestBody.content)
+        : undefined;
+    var requestBodyContent = requestBodyContentEntries === null || requestBodyContentEntries === void 0 ? void 0 : requestBodyContentEntries[0];
+    var input = {
+        url: getServersURL(data.servers) +
+            data.path +
+            (searchParams.size ? "?".concat(searchParams.toString()) : ''),
+        method: data.method,
+        body: requestBodyContent
+            ? generateMediaTypeExample(requestBodyContent[1], { onlyRequired: true })
+            : undefined,
+        headers: __assign(__assign(__assign({}, getSecurityHeaders(data.securities)), headersObject), (requestBodyContent
+            ? {
+                'Content-Type': requestBodyContent[0],
+            }
+            : undefined)),
+    };
+    var autoCodeSamples = codeSampleGenerators.map(function (generator) { return ({
+        key: "default-".concat(generator.id),
+        label: generator.label,
+        body: <context.CodeBlock code={generator.generate(input)} syntax={generator.syntax}/>,
+    }); });
+    // Use custom samples if defined
+    var customCodeSamples = null;
+    ['x-custom-examples', 'x-code-samples', 'x-codeSamples'].forEach(function (key) {
+        var customSamples = data.operation[key];
+        if (customSamples && Array.isArray(customSamples)) {
+            customCodeSamples = customSamples
+                .filter(function (sample) {
+                return (typeof sample.label === 'string' &&
+                    typeof sample.source === 'string' &&
+                    typeof sample.lang === 'string');
+            })
+                .map(function (sample) { return ({
+                key: "redocly-".concat(sample.lang),
+                label: sample.label,
+                body: <context.CodeBlock code={sample.source} syntax={sample.lang}/>,
+            }); });
+        }
+    });
+    // Code samples can be disabled at the top-level or at the operation level
+    // If code samples are defined at the operation level, it will override the top-level setting
+    var codeSamplesDisabled = data['x-codeSamples'] === false || data.operation['x-codeSamples'] === false;
+    var samples = customCodeSamples !== null && customCodeSamples !== void 0 ? customCodeSamples : (!codeSamplesDisabled ? autoCodeSamples : []);
+    if (samples.length === 0) {
+        return null;
+    }
+    return (<OpenAPITabs stateKey={createStateKey('codesample')} items={samples}>
+            <InteractiveSection header={<OpenAPITabsList />} className="openapi-codesample">
+                <OpenAPITabsPanels />
+            </InteractiveSection>
+        </OpenAPITabs>);
+}
+function getSecurityHeaders(securities) {
+    var _a;
+    var _b, _c;
+    var security = securities[0];
+    if (!security) {
+        return {};
+    }
+    switch (security[1].type) {
+        case 'http': {
+            var scheme = security[1].scheme;
+            var format = (_b = security[1].bearerFormat) !== null && _b !== void 0 ? _b : 'YOUR_SECRET_TOKEN';
+            if (scheme === null || scheme === void 0 ? void 0 : scheme.includes('bearer')) {
+                scheme = 'Bearer';
+            }
+            else if (scheme === null || scheme === void 0 ? void 0 : scheme.includes('basic')) {
+                scheme = 'Basic';
+                format = 'username:password';
+            }
+            else if (scheme === null || scheme === void 0 ? void 0 : scheme.includes('token')) {
+                scheme = 'Token';
+            }
+            return {
+                Authorization: scheme + ' ' + format,
+            };
+        }
+        case 'apiKey': {
+            if (security[1].in !== 'header')
+                return {};
+            var name_1 = (_c = security[1].name) !== null && _c !== void 0 ? _c : 'Authorization';
+            return _a = {},
+                _a[name_1] = 'YOUR_API_KEY',
+                _a;
+        }
+        default: {
+            return {};
+        }
+    }
+}

package/dist/OpenAPIDisclosure.d.ts

@@ -0,0 +1,12 @@
+import type { OpenAPIClientContext } from './types';
+interface Props {
+    context: OpenAPIClientContext;
+    children: React.ReactNode;
+    label?: string;
+}
+/**
+ * Display an interactive OpenAPI disclosure.
+ * The label is optional and defaults to "child attributes".
+ */
+export declare function OpenAPIDisclosure({ context, children, label }: Props): JSX.Element;
+export {};

package/dist/OpenAPIDisclosure.jsx

@@ -0,0 +1,32 @@
+import { useRef } from 'react';
+import { mergeProps, useButton, useDisclosure, useFocusRing } from 'react-aria';
+import { useDisclosureState } from 'react-stately';
+/**
+ * Display an interactive OpenAPI disclosure.
+ * The label is optional and defaults to "child attributes".
+ */
+export function OpenAPIDisclosure(_a) {
+    var context = _a.context, children = _a.children, label = _a.label;
+    var state = useDisclosureState({});
+    var panelRef = useRef(null);
+    var triggerRef = useRef(null);
+    var _b = useDisclosure({}, state, panelRef), triggerProps = _b.buttonProps, panelProps = _b.panelProps;
+    var buttonProps = useButton(triggerProps, triggerRef).buttonProps;
+    var _c = useFocusRing(), isFocusVisible = _c.isFocusVisible, focusProps = _c.focusProps;
+    return (<div className="openapi-disclosure">
+            <button ref={triggerRef} {...mergeProps(buttonProps, focusProps)} slot="trigger" className="openapi-disclosure-trigger" style={{
+            outline: isFocusVisible
+                ? '2px solid rgb(var(--primary-color-500) / 0.4)'
+                : 'none',
+        }}>
+                {context.icons.plus}
+                <span>
+                    {"".concat(state.isExpanded ? 'Hide' : 'Show', " ").concat(label ? label : "child attributes")}
+                </span>
+            </button>
+
+            {state.isExpanded && (<div ref={panelRef} {...panelProps} className="openapi-disclosure-panel">
+                    {children}
+                </div>)}
+        </div>);
+}

package/dist/OpenAPIDisclosureGroup.d.ts

@@ -0,0 +1,19 @@
+interface Props {
+    groups: TDisclosureGroup[];
+    icon?: React.ReactNode;
+}
+type TDisclosureGroup = {
+    id: string;
+    label: string | React.ReactNode;
+    tabs?: {
+        id: string;
+        label: string | React.ReactNode;
+        body?: React.ReactNode;
+    }[];
+};
+import { DisclosureGroupProps } from 'react-stately';
+/**
+ * Display an interactive OpenAPI disclosure group.
+ */
+export declare function OpenAPIDisclosureGroup(props: DisclosureGroupProps & Props): import("react").JSX.Element;
+export {};

package/dist/OpenAPIDisclosureGroup.jsx

@@ -0,0 +1,81 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { mergeProps, useButton, useDisclosure, useFocusRing, useId } from 'react-aria';
+import { useDisclosureGroupState, useDisclosureState, } from 'react-stately';
+import { createContext, useContext, useRef, useState } from 'react';
+var DisclosureGroupStateContext = createContext(null);
+/**
+ * Display an interactive OpenAPI disclosure group.
+ */
+export function OpenAPIDisclosureGroup(props) {
+    var icon = props.icon, groups = props.groups;
+    var state = useDisclosureGroupState(props);
+    return (<DisclosureGroupStateContext.Provider value={state}>
+            {groups.map(function (group) { return (<DisclosureItem icon={icon} key={group.id} group={group}/>); })}
+        </DisclosureGroupStateContext.Provider>);
+}
+function DisclosureItem(props) {
+    var _a, _b, _c, _d, _e;
+    var icon = props.icon, group = props.group;
+    var defaultId = useId();
+    var id = group.id || defaultId;
+    var groupState = useContext(DisclosureGroupStateContext);
+    var isExpanded = (groupState === null || groupState === void 0 ? void 0 : groupState.expandedKeys.has(id)) || false;
+    var state = useDisclosureState({
+        isExpanded: isExpanded,
+        onExpandedChange: function () {
+            if (groupState) {
+                groupState.toggleKey(id);
+            }
+        },
+    });
+    var panelRef = useRef(null);
+    var triggerRef = useRef(null);
+    var isDisabled = (groupState === null || groupState === void 0 ? void 0 : groupState.isDisabled) || !((_a = group.tabs) === null || _a === void 0 ? void 0 : _a.length) || false;
+    var _f = useDisclosure(__assign(__assign({}, props), { isExpanded: isExpanded, isDisabled: isDisabled }), state, panelRef), triggerProps = _f.buttonProps, panelProps = _f.panelProps;
+    var buttonProps = useButton(triggerProps, triggerRef).buttonProps;
+    var _g = useFocusRing(), isFocusVisible = _g.isFocusVisible, focusProps = _g.focusProps;
+    var defaultTab = ((_c = (_b = group.tabs) === null || _b === void 0 ? void 0 : _b[0]) === null || _c === void 0 ? void 0 : _c.id) || '';
+    var _h = useState(defaultTab), selectedTabKey = _h[0], setSelectedTabKey = _h[1];
+    var selectedTab = (_d = group.tabs) === null || _d === void 0 ? void 0 : _d.find(function (tab) { return tab.id === selectedTabKey; });
+    return (<div className="openapi-disclosure-group" aria-expanded={state.isExpanded}>
+            <div className="openapi-disclosure-group-header">
+                <button slot="trigger" ref={triggerRef} {...mergeProps(buttonProps, focusProps)} disabled={isDisabled} style={{
+            outline: isFocusVisible
+                ? '2px solid rgb(var(--primary-color-500)/0.4)'
+                : 'none',
+        }} className="openapi-disclosure-group-trigger">
+                    <div className="openapi-disclosure-group-icon">
+                        {icon || (<svg viewBox="0 0 24 24" className="openapi-disclosure-group-icon">
+                                <path d="m8.25 4.5 7.5 7.5-7.5 7.5"/>
+                            </svg>)}
+                    </div>
+
+                    {group.label}
+                </button>
+                {group.tabs ? (<div className="openapi-disclosure-group-mediatype">
+                        {((_e = group.tabs) === null || _e === void 0 ? void 0 : _e.length) > 1 ? (<select className="openapi-section-select openapi-select openapi-disclosure-group-tabs-select" onClick={function (event) { return event.stopPropagation(); }} value={selectedTab === null || selectedTab === void 0 ? void 0 : selectedTab.id} onChange={function (event) {
+                    setSelectedTabKey(event.target.value);
+                    state.expand();
+                }}>
+                                {group.tabs.map(function (tab) { return (<option key={tab.id} value={tab.id}>
+                                        {tab.label}
+                                    </option>); })}
+                            </select>) : !!group.tabs[0] ? (<span>{group.tabs[0].label}</span>) : null}
+                    </div>) : null}
+            </div>
+
+            {state.isExpanded && selectedTab && (<div className="openapi-disclosure-group-panel" ref={panelRef} {...panelProps}>
+                    {selectedTab.body}
+                </div>)}
+        </div>);
+}

package/dist/OpenAPIOperation.d.ts

@@ -1,6 +1,4 @@
-import * as React from 'react';
-import { OpenAPIOperationData } from './fetchOpenAPIOperation';
-import { OpenAPIContextProps } from './types';
+import type { OpenAPIContextProps, OpenAPIOperationData } from './types';
 /**
  * Display an interactive OpenAPI operation.
  */
@@ -8,4 +6,4 @@ export declare function OpenAPIOperation(props: {
     className?: string;
     data: OpenAPIOperationData;
     context: OpenAPIContextProps;
-}): React.JSX.Element;
+}): import("react").JSX.Element;

package/dist/OpenAPIOperation.jsx

@@ -0,0 +1,51 @@
+import clsx from 'clsx';
+import { Markdown } from './Markdown';
+import { OpenAPICodeSample } from './OpenAPICodeSample';
+import { OpenAPIResponseExample } from './OpenAPIResponseExample';
+import { OpenAPISpec } from './OpenAPISpec';
+import { OpenAPIPath } from './OpenAPIPath';
+import { resolveDescription } from './utils';
+/**
+ * Display an interactive OpenAPI operation.
+ */
+export function OpenAPIOperation(props) {
+    var _a;
+    var className = props.className, data = props.data, context = props.context;
+    var operation = data.operation;
+    var clientContext = {
+        defaultInteractiveOpened: context.defaultInteractiveOpened,
+        icons: context.icons,
+        blockKey: context.blockKey,
+    };
+    var description = (_a = resolveDescription(operation)) === null || _a === void 0 ? void 0 : _a.trim();
+    return (<div className={clsx('openapi-operation', className)}>
+            <div className="openapi-summary" id={context.id}>
+                <h2 className="openapi-summary-title" data-deprecated={operation.deprecated}>
+                    {operation.summary}
+                </h2>
+                {operation.deprecated && <div className="openapi-deprecated">Deprecated</div>}
+            </div>
+            <div className="openapi-columns">
+                <div className="openapi-column-spec">
+                    {operation['x-deprecated-sunset'] ? (<div className="openapi-deprecated-sunset openapi-description openapi-markdown">
+                            This operation is deprecated and will be sunset on{' '}
+                            <span className="openapi-deprecated-sunset-date">
+                                {operation['x-deprecated-sunset']}
+                            </span>
+                            {"."}
+                        </div>) : null}
+                    {description ? (<div className="openapi-intro">
+                            <Markdown className="openapi-description" source={description}/>
+                        </div>) : null}
+                    <OpenAPIPath data={data} context={context}/>
+                    <OpenAPISpec data={data} context={clientContext}/>
+                </div>
+                <div className="openapi-column-preview">
+                    <div className="openapi-column-preview-body">
+                        <OpenAPICodeSample {...props}/>
+                        <OpenAPIResponseExample {...props}/>
+                    </div>
+                </div>
+            </div>
+        </div>);
+}

package/dist/OpenAPIOperationContext.d.ts

@@ -0,0 +1,16 @@
+interface OpenAPIOperationPointer {
+    path: string;
+    method: string;
+}
+interface OpenAPIOperationContextValue {
+    onOpenClient: (pointer: OpenAPIOperationPointer) => void;
+}
+/**
+ * Provider for the OpenAPIOperationContext.
+ */
+export declare function OpenAPIOperationContextProvider(props: React.PropsWithChildren<Partial<OpenAPIOperationContextValue>>): import("react").JSX.Element;
+/**
+ * Hook to access the OpenAPIOperationContext.
+ */
+export declare function useOpenAPIOperationContext(): OpenAPIOperationContextValue;
+export {};

package/dist/OpenAPIOperationContext.jsx

@@ -0,0 +1,26 @@
+'use client';
+import { createContext, useContext, useMemo } from 'react';
+import { useEventCallback } from 'usehooks-ts';
+var OpenAPIOperationContext = createContext({
+    onOpenClient: function () { },
+});
+/**
+ * Provider for the OpenAPIOperationContext.
+ */
+export function OpenAPIOperationContextProvider(props) {
+    var children = props.children;
+    var onOpenClient = useEventCallback(function (pointer) {
+        var _a;
+        (_a = props.onOpenClient) === null || _a === void 0 ? void 0 : _a.call(props, pointer);
+    });
+    var value = useMemo(function () { return ({ onOpenClient: onOpenClient }); }, [onOpenClient]);
+    return (<OpenAPIOperationContext.Provider value={value}>
+            {children}
+        </OpenAPIOperationContext.Provider>);
+}
+/**
+ * Hook to access the OpenAPIOperationContext.
+ */
+export function useOpenAPIOperationContext() {
+    return useContext(OpenAPIOperationContext);
+}

package/dist/OpenAPIPath.d.ts

@@ -0,0 +1,8 @@
+import type { OpenAPIOperationData, OpenAPIContextProps } from './types';
+/**
+ * Display the path of an operation.
+ */
+export declare function OpenAPIPath(props: {
+    data: OpenAPIOperationData;
+    context: OpenAPIContextProps;
+}): JSX.Element;

package/dist/OpenAPIPath.jsx

@@ -0,0 +1,54 @@
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+import { ScalarApiButton } from './ScalarApiButton';
+/**
+ * Display the path of an operation.
+ */
+export function OpenAPIPath(props) {
+    var data = props.data, context = props.context;
+    var method = data.method, path = data.path;
+    var specUrl = context.specUrl;
+    return (<div className="openapi-path">
+            <div className={"openapi-method openapi-method-".concat(method)}>{method}</div>
+            <div className="openapi-path-title" data-deprecated={data.operation.deprecated}>
+                <p>{formatPath(path)}</p>
+            </div>
+            {data['x-hideTryItPanel'] || data.operation['x-hideTryItPanel'] ? null : (<ScalarApiButton method={method} path={path} specUrl={specUrl}/>)}
+        </div>);
+}
+// Format the path to highlight placeholders
+function formatPath(path) {
+    // Matches placeholders like {id}, {userId}, etc.
+    var regex = /\{(\w+)\}/g;
+    var parts = [];
+    var lastIndex = 0;
+    // Replace placeholders with <em> tags
+    path.replace(regex, function (match, key, offset) {
+        parts.push(path.slice(lastIndex, offset));
+        parts.push(<em key={key}>{"{".concat(key, "}")}</em>);
+        lastIndex = offset + match.length;
+        return match;
+    });
+    // Push remaining text after the last placeholder
+    parts.push(path.slice(lastIndex));
+    // Join parts with separators wrapped in <span>
+    var formattedPath = parts.reduce(function (acc, part, index) {
+        if (typeof part === 'string' && index > 0 && part === '/') {
+            return __spreadArray(__spreadArray([], acc, true), [
+                <span className="openapi-path-separator" key={"sep-".concat(index)}>
+                        /
+                    </span>,
+                part,
+            ], false);
+        }
+        return __spreadArray(__spreadArray([], acc, true), [part], false);
+    }, []);
+    return <span>{formattedPath}</span>;
+}

package/dist/OpenAPIRequestBody.d.ts

@@ -1,10 +1,9 @@
-import * as React from 'react';
-import { OpenAPIV3 } from 'openapi-types';
-import { OpenAPIClientContext } from './types';
+import type { OpenAPIV3 } from '@gitbook/openapi-parser';
+import type { OpenAPIClientContext } from './types';
 /**
  * Display an interactive request body.
  */
 export declare function OpenAPIRequestBody(props: {
-    requestBody: OpenAPIV3.RequestBodyObject;
+    requestBody: OpenAPIV3.RequestBodyObject | OpenAPIV3.ReferenceObject;
     context: OpenAPIClientContext;
-}): React.JSX.Element;
+}): import("react").JSX.Element | null;