@clarify-labs/renderer 0.11.1 → 0.11.3

package/output/{MermaidViewer-CwkiQ2gO.js → MermaidViewer-D4h-WEak.js}

@@ -1,4 +1,4 @@
-import { t as useBuiltInText } from "./i18n-BxXpRSFX.js";
+import { t as useBuiltInText } from "./i18n-sJUQQLRZ.js";
 import clsx from "clsx";
 import { useRef, useState } from "react";
 import { Maximize2, ZoomIn, ZoomOut } from "lucide-react";
@@ -95,4 +95,4 @@ function MermaidViewer(arg0) {
 //#endregion
 export { MermaidViewer, MermaidViewer as default };
 
-//# sourceMappingURL=MermaidViewer-CwkiQ2gO.js.map
+//# sourceMappingURL=MermaidViewer-D4h-WEak.js.map

package/output/{MermaidViewer-CwkiQ2gO.js.map → MermaidViewer-D4h-WEak.js.map}

@@ -1 +1 @@
-{"version":3,"file":"MermaidViewer-CwkiQ2gO.js","names":[],"sources":["../source/components/MermaidViewer.tsx"],"sourcesContent":["import clsx from 'clsx'\nimport { Maximize2, ZoomIn, ZoomOut } from 'lucide-react'\nimport { useRef, useState, type ReactNode } from 'react'\nimport { TransformComponent, TransformWrapper, useControls } from 'react-zoom-pan-pinch'\n\nimport { useBuiltInText } from '../core/i18n'\n\ntype MermaidViewerProps = {\n  svg: string\n  className?: string\n}\n\nfunction ZoomControls(): ReactNode {\n  const { zoomIn, zoomOut, resetTransform } = useControls()\n  const t = useBuiltInText()\n\n  const buttonClassName = 'flex h-7 w-7 items-center justify-center rounded-md bg-(--clarify-theme-tokens-colors-surface) text-(--clarify-ui-text-soft) shadow-xs ring-1 ring-(--clarify-theme-tokens-colors-border) transition hover:bg-(--clarify-ui-hover-background) hover:text-(--clarify-theme-tokens-colors-foreground)'\n\n  return (\n    <div className=\"clarify-mermaid-controls absolute top-2 right-2 z-10 flex gap-1 opacity-0 transition group-hover:opacity-100 focus-within:opacity-100\">\n      <button type=\"button\" aria-label={t('mermaid.zoomIn')} title={t('mermaid.zoomIn')} onClick={() => zoomIn()} className={buttonClassName}>\n        <ZoomIn className=\"h-4 w-4\" aria-hidden=\"true\" />\n      </button>\n      <button type=\"button\" aria-label={t('mermaid.zoomOut')} title={t('mermaid.zoomOut')} onClick={() => zoomOut()} className={buttonClassName}>\n        <ZoomOut className=\"h-4 w-4\" aria-hidden=\"true\" />\n      </button>\n      <button type=\"button\" aria-label={t('mermaid.resetZoom')} title={t('mermaid.resetZoom')} onClick={() => resetTransform()} className={buttonClassName}>\n        <Maximize2 className=\"h-4 w-4\" aria-hidden=\"true\" />\n      </button>\n    </div>\n  )\n}\n\nexport function MermaidViewer(arg0: MermaidViewerProps): ReactNode {\n  const { svg, className } = arg0\n\n  const t = useBuiltInText()\n  const containerRef = useRef<HTMLDivElement>(null)\n  const [focused, setFocused] = useState(false)\n\n  return (\n    <div\n      ref={containerRef}\n      tabIndex={0}\n      role=\"group\"\n      onPointerDown={() => containerRef.current?.focus()}\n      onFocus={() => setFocused(true)}\n      onBlur={() => setFocused(false)}\n      className={clsx('clarify-mermaid group not-prose relative my-6 overflow-hidden rounded-2xl border border-(--clarify-theme-tokens-colors-border) bg-(--clarify-theme-tokens-colors-surface) outline-none focus-visible:ring-2 focus-visible:ring-(--clarify-theme-tokens-colors-primary)', className)}\n    >\n      <TransformWrapper\n        minScale={0.5}\n        maxScale={8}\n        initialScale={1}\n        centerOnInit\n        smooth\n        wheel={{ step: 0.05, wheelDisabled: !focused, touchPadDisabled: !focused }}\n        doubleClick={{ mode: 'reset' }}\n      >\n        <ZoomControls />\n        <TransformComponent\n          wrapperClass=\"!w-full !cursor-grab active:!cursor-grabbing\"\n          contentClass=\"!w-full justify-center [&_svg]:h-auto [&_svg]:max-w-full\"\n          wrapperStyle={{ height: 'min(70vh, 32rem)' }}\n        >\n          <div className=\"flex h-full w-full items-center justify-center p-4\" dangerouslySetInnerHTML={{ __html: svg }} />\n        </TransformComponent>\n        <p\n          className={clsx(\n            'clarify-mermaid-hint pointer-events-none absolute bottom-2 left-1/2 z-10 -translate-x-1/2 rounded-full bg-(--clarify-theme-tokens-colors-surface)/90 px-2.5 py-1 text-2xs text-(--clarify-ui-text-soft) shadow-xs ring-1 ring-(--clarify-theme-tokens-colors-border) backdrop-blur-sm transition',\n            focused ? 'opacity-0' : 'opacity-0 group-hover:opacity-100',\n          )}\n        >\n          {t('mermaid.scrollHint')}\n        </p>\n      </TransformWrapper>\n    </div>\n  )\n}\n\nexport default MermaidViewer\n"],"mappings":";;;;;;;AAYA,SAAS,eAA0B;CACjC,MAAM,EAAE,QAAQ,SAAS,mBAAmB,YAAY;CACxD,MAAM,IAAI,eAAe;CAEzB,MAAM,kBAAkB;CAExB,OACE,qBAAC,OAAD;EAAK,WAAU;YAAf;GACE,oBAAC,UAAD;IAAQ,MAAK;IAAS,cAAY,EAAE,gBAAgB;IAAG,OAAO,EAAE,gBAAgB;IAAG,eAAe,OAAO;IAAG,WAAW;cACrH,oBAAC,QAAD;KAAQ,WAAU;KAAU,eAAY;IAAQ,CAAA;GAC1C,CAAA;GACR,oBAAC,UAAD;IAAQ,MAAK;IAAS,cAAY,EAAE,iBAAiB;IAAG,OAAO,EAAE,iBAAiB;IAAG,eAAe,QAAQ;IAAG,WAAW;cACxH,oBAAC,SAAD;KAAS,WAAU;KAAU,eAAY;IAAQ,CAAA;GAC3C,CAAA;GACR,oBAAC,UAAD;IAAQ,MAAK;IAAS,cAAY,EAAE,mBAAmB;IAAG,OAAO,EAAE,mBAAmB;IAAG,eAAe,eAAe;IAAG,WAAW;cACnI,oBAAC,WAAD;KAAW,WAAU;KAAU,eAAY;IAAQ,CAAA;GAC7C,CAAA;EACL;;AAET;AAEA,SAAgB,cAAc,MAAqC;CACjE,MAAM,EAAE,KAAK,cAAc;CAE3B,MAAM,IAAI,eAAe;CACzB,MAAM,eAAe,OAAuB,IAAI;CAChD,MAAM,CAAC,SAAS,cAAc,SAAS,KAAK;CAE5C,OACE,oBAAC,OAAD;EACE,KAAK;EACL,UAAU;EACV,MAAK;EACL,qBAAqB,aAAa,SAAS,MAAM;EACjD,eAAe,WAAW,IAAI;EAC9B,cAAc,WAAW,KAAK;EAC9B,WAAW,KAAK,0QAA0Q,SAAS;YAEnS,qBAAC,kBAAD;GACE,UAAU;GACV,UAAU;GACV,cAAc;GACd,cAAA;GACA,QAAA;GACA,OAAO;IAAE,MAAM;IAAM,eAAe,CAAC;IAAS,kBAAkB,CAAC;GAAQ;GACzE,aAAa,EAAE,MAAM,QAAQ;aAP/B;IASE,oBAAC,cAAD,CAAe,CAAA;IACf,oBAAC,oBAAD;KACE,cAAa;KACb,cAAa;KACb,cAAc,EAAE,QAAQ,mBAAmB;eAE3C,oBAAC,OAAD;MAAK,WAAU;MAAqD,yBAAyB,EAAE,QAAQ,IAAI;KAAI,CAAA;IAC7F,CAAA;IACpB,oBAAC,KAAD;KACE,WAAW,KACT,oSACA,UAAU,cAAc,mCAC1B;eAEC,EAAE,oBAAoB;IACtB,CAAA;GACa;;CACf,CAAA;AAET"}
+{"version":3,"file":"MermaidViewer-D4h-WEak.js","names":[],"sources":["../source/components/MermaidViewer.tsx"],"sourcesContent":["import clsx from 'clsx'\nimport { Maximize2, ZoomIn, ZoomOut } from 'lucide-react'\nimport { useRef, useState, type ReactNode } from 'react'\nimport { TransformComponent, TransformWrapper, useControls } from 'react-zoom-pan-pinch'\n\nimport { useBuiltInText } from '../core/i18n'\n\ntype MermaidViewerProps = {\n  svg: string\n  className?: string\n}\n\nfunction ZoomControls(): ReactNode {\n  const { zoomIn, zoomOut, resetTransform } = useControls()\n  const t = useBuiltInText()\n\n  const buttonClassName = 'flex h-7 w-7 items-center justify-center rounded-md bg-(--clarify-theme-tokens-colors-surface) text-(--clarify-ui-text-soft) shadow-xs ring-1 ring-(--clarify-theme-tokens-colors-border) transition hover:bg-(--clarify-ui-hover-background) hover:text-(--clarify-theme-tokens-colors-foreground)'\n\n  return (\n    <div className=\"clarify-mermaid-controls absolute top-2 right-2 z-10 flex gap-1 opacity-0 transition group-hover:opacity-100 focus-within:opacity-100\">\n      <button type=\"button\" aria-label={t('mermaid.zoomIn')} title={t('mermaid.zoomIn')} onClick={() => zoomIn()} className={buttonClassName}>\n        <ZoomIn className=\"h-4 w-4\" aria-hidden=\"true\" />\n      </button>\n      <button type=\"button\" aria-label={t('mermaid.zoomOut')} title={t('mermaid.zoomOut')} onClick={() => zoomOut()} className={buttonClassName}>\n        <ZoomOut className=\"h-4 w-4\" aria-hidden=\"true\" />\n      </button>\n      <button type=\"button\" aria-label={t('mermaid.resetZoom')} title={t('mermaid.resetZoom')} onClick={() => resetTransform()} className={buttonClassName}>\n        <Maximize2 className=\"h-4 w-4\" aria-hidden=\"true\" />\n      </button>\n    </div>\n  )\n}\n\nexport function MermaidViewer(arg0: MermaidViewerProps): ReactNode {\n  const { svg, className } = arg0\n\n  const t = useBuiltInText()\n  const containerRef = useRef<HTMLDivElement>(null)\n  const [focused, setFocused] = useState(false)\n\n  return (\n    <div\n      ref={containerRef}\n      tabIndex={0}\n      role=\"group\"\n      onPointerDown={() => containerRef.current?.focus()}\n      onFocus={() => setFocused(true)}\n      onBlur={() => setFocused(false)}\n      className={clsx('clarify-mermaid group not-prose relative my-6 overflow-hidden rounded-2xl border border-(--clarify-theme-tokens-colors-border) bg-(--clarify-theme-tokens-colors-surface) outline-none focus-visible:ring-2 focus-visible:ring-(--clarify-theme-tokens-colors-primary)', className)}\n    >\n      <TransformWrapper\n        minScale={0.5}\n        maxScale={8}\n        initialScale={1}\n        centerOnInit\n        smooth\n        wheel={{ step: 0.05, wheelDisabled: !focused, touchPadDisabled: !focused }}\n        doubleClick={{ mode: 'reset' }}\n      >\n        <ZoomControls />\n        <TransformComponent\n          wrapperClass=\"!w-full !cursor-grab active:!cursor-grabbing\"\n          contentClass=\"!w-full justify-center [&_svg]:h-auto [&_svg]:max-w-full\"\n          wrapperStyle={{ height: 'min(70vh, 32rem)' }}\n        >\n          <div className=\"flex h-full w-full items-center justify-center p-4\" dangerouslySetInnerHTML={{ __html: svg }} />\n        </TransformComponent>\n        <p\n          className={clsx(\n            'clarify-mermaid-hint pointer-events-none absolute bottom-2 left-1/2 z-10 -translate-x-1/2 rounded-full bg-(--clarify-theme-tokens-colors-surface)/90 px-2.5 py-1 text-2xs text-(--clarify-ui-text-soft) shadow-xs ring-1 ring-(--clarify-theme-tokens-colors-border) backdrop-blur-sm transition',\n            focused ? 'opacity-0' : 'opacity-0 group-hover:opacity-100',\n          )}\n        >\n          {t('mermaid.scrollHint')}\n        </p>\n      </TransformWrapper>\n    </div>\n  )\n}\n\nexport default MermaidViewer\n"],"mappings":";;;;;;;AAYA,SAAS,eAA0B;CACjC,MAAM,EAAE,QAAQ,SAAS,mBAAmB,YAAY;CACxD,MAAM,IAAI,eAAe;CAEzB,MAAM,kBAAkB;CAExB,OACE,qBAAC,OAAD;EAAK,WAAU;YAAf;GACE,oBAAC,UAAD;IAAQ,MAAK;IAAS,cAAY,EAAE,gBAAgB;IAAG,OAAO,EAAE,gBAAgB;IAAG,eAAe,OAAO;IAAG,WAAW;cACrH,oBAAC,QAAD;KAAQ,WAAU;KAAU,eAAY;IAAQ,CAAA;GAC1C,CAAA;GACR,oBAAC,UAAD;IAAQ,MAAK;IAAS,cAAY,EAAE,iBAAiB;IAAG,OAAO,EAAE,iBAAiB;IAAG,eAAe,QAAQ;IAAG,WAAW;cACxH,oBAAC,SAAD;KAAS,WAAU;KAAU,eAAY;IAAQ,CAAA;GAC3C,CAAA;GACR,oBAAC,UAAD;IAAQ,MAAK;IAAS,cAAY,EAAE,mBAAmB;IAAG,OAAO,EAAE,mBAAmB;IAAG,eAAe,eAAe;IAAG,WAAW;cACnI,oBAAC,WAAD;KAAW,WAAU;KAAU,eAAY;IAAQ,CAAA;GAC7C,CAAA;EACL;;AAET;AAEA,SAAgB,cAAc,MAAqC;CACjE,MAAM,EAAE,KAAK,cAAc;CAE3B,MAAM,IAAI,eAAe;CACzB,MAAM,eAAe,OAAuB,IAAI;CAChD,MAAM,CAAC,SAAS,cAAc,SAAS,KAAK;CAE5C,OACE,oBAAC,OAAD;EACE,KAAK;EACL,UAAU;EACV,MAAK;EACL,qBAAqB,aAAa,SAAS,MAAM;EACjD,eAAe,WAAW,IAAI;EAC9B,cAAc,WAAW,KAAK;EAC9B,WAAW,KAAK,0QAA0Q,SAAS;YAEnS,qBAAC,kBAAD;GACE,UAAU;GACV,UAAU;GACV,cAAc;GACd,cAAA;GACA,QAAA;GACA,OAAO;IAAE,MAAM;IAAM,eAAe,CAAC;IAAS,kBAAkB,CAAC;GAAQ;GACzE,aAAa,EAAE,MAAM,QAAQ;aAP/B;IASE,oBAAC,cAAD,CAAe,CAAA;IACf,oBAAC,oBAAD;KACE,cAAa;KACb,cAAa;KACb,cAAc,EAAE,QAAQ,mBAAmB;eAE3C,oBAAC,OAAD;MAAK,WAAU;MAAqD,yBAAyB,EAAE,QAAQ,IAAI;KAAI,CAAA;IAC7F,CAAA;IACpB,oBAAC,KAAD;KACE,WAAW,KACT,oSACA,UAAU,cAAc,mCAC1B;eAEC,EAAE,oBAAoB;IACtB,CAAA;GACa;;CACf,CAAA;AAET"}

package/output/{MermaidViewer-CTvMCE19.cjs → MermaidViewer-kbSVqJ_z.cjs}

@@ -1,5 +1,5 @@
 const require_rolldown_runtime = require("./rolldown-runtime-DakpK96I.cjs");
-const require_i18n = require("./i18n-DsjZ51U1.cjs");
+const require_i18n = require("./i18n-R08i532P.cjs");
 let clsx = require("clsx");
 clsx = require_rolldown_runtime.__toESM(clsx, 1);
 let react = require("react");
@@ -98,4 +98,4 @@ function MermaidViewer(arg0) {
 exports.MermaidViewer = MermaidViewer;
 exports.default = MermaidViewer;
 
-//# sourceMappingURL=MermaidViewer-CTvMCE19.cjs.map
+//# sourceMappingURL=MermaidViewer-kbSVqJ_z.cjs.map

package/output/{MermaidViewer-CTvMCE19.cjs.map → MermaidViewer-kbSVqJ_z.cjs.map}

@@ -1 +1 @@
-{"version":3,"file":"MermaidViewer-CTvMCE19.cjs","names":[],"sources":["../source/components/MermaidViewer.tsx"],"sourcesContent":["import clsx from 'clsx'\nimport { Maximize2, ZoomIn, ZoomOut } from 'lucide-react'\nimport { useRef, useState, type ReactNode } from 'react'\nimport { TransformComponent, TransformWrapper, useControls } from 'react-zoom-pan-pinch'\n\nimport { useBuiltInText } from '../core/i18n'\n\ntype MermaidViewerProps = {\n  svg: string\n  className?: string\n}\n\nfunction ZoomControls(): ReactNode {\n  const { zoomIn, zoomOut, resetTransform } = useControls()\n  const t = useBuiltInText()\n\n  const buttonClassName = 'flex h-7 w-7 items-center justify-center rounded-md bg-(--clarify-theme-tokens-colors-surface) text-(--clarify-ui-text-soft) shadow-xs ring-1 ring-(--clarify-theme-tokens-colors-border) transition hover:bg-(--clarify-ui-hover-background) hover:text-(--clarify-theme-tokens-colors-foreground)'\n\n  return (\n    <div className=\"clarify-mermaid-controls absolute top-2 right-2 z-10 flex gap-1 opacity-0 transition group-hover:opacity-100 focus-within:opacity-100\">\n      <button type=\"button\" aria-label={t('mermaid.zoomIn')} title={t('mermaid.zoomIn')} onClick={() => zoomIn()} className={buttonClassName}>\n        <ZoomIn className=\"h-4 w-4\" aria-hidden=\"true\" />\n      </button>\n      <button type=\"button\" aria-label={t('mermaid.zoomOut')} title={t('mermaid.zoomOut')} onClick={() => zoomOut()} className={buttonClassName}>\n        <ZoomOut className=\"h-4 w-4\" aria-hidden=\"true\" />\n      </button>\n      <button type=\"button\" aria-label={t('mermaid.resetZoom')} title={t('mermaid.resetZoom')} onClick={() => resetTransform()} className={buttonClassName}>\n        <Maximize2 className=\"h-4 w-4\" aria-hidden=\"true\" />\n      </button>\n    </div>\n  )\n}\n\nexport function MermaidViewer(arg0: MermaidViewerProps): ReactNode {\n  const { svg, className } = arg0\n\n  const t = useBuiltInText()\n  const containerRef = useRef<HTMLDivElement>(null)\n  const [focused, setFocused] = useState(false)\n\n  return (\n    <div\n      ref={containerRef}\n      tabIndex={0}\n      role=\"group\"\n      onPointerDown={() => containerRef.current?.focus()}\n      onFocus={() => setFocused(true)}\n      onBlur={() => setFocused(false)}\n      className={clsx('clarify-mermaid group not-prose relative my-6 overflow-hidden rounded-2xl border border-(--clarify-theme-tokens-colors-border) bg-(--clarify-theme-tokens-colors-surface) outline-none focus-visible:ring-2 focus-visible:ring-(--clarify-theme-tokens-colors-primary)', className)}\n    >\n      <TransformWrapper\n        minScale={0.5}\n        maxScale={8}\n        initialScale={1}\n        centerOnInit\n        smooth\n        wheel={{ step: 0.05, wheelDisabled: !focused, touchPadDisabled: !focused }}\n        doubleClick={{ mode: 'reset' }}\n      >\n        <ZoomControls />\n        <TransformComponent\n          wrapperClass=\"!w-full !cursor-grab active:!cursor-grabbing\"\n          contentClass=\"!w-full justify-center [&_svg]:h-auto [&_svg]:max-w-full\"\n          wrapperStyle={{ height: 'min(70vh, 32rem)' }}\n        >\n          <div className=\"flex h-full w-full items-center justify-center p-4\" dangerouslySetInnerHTML={{ __html: svg }} />\n        </TransformComponent>\n        <p\n          className={clsx(\n            'clarify-mermaid-hint pointer-events-none absolute bottom-2 left-1/2 z-10 -translate-x-1/2 rounded-full bg-(--clarify-theme-tokens-colors-surface)/90 px-2.5 py-1 text-2xs text-(--clarify-ui-text-soft) shadow-xs ring-1 ring-(--clarify-theme-tokens-colors-border) backdrop-blur-sm transition',\n            focused ? 'opacity-0' : 'opacity-0 group-hover:opacity-100',\n          )}\n        >\n          {t('mermaid.scrollHint')}\n        </p>\n      </TransformWrapper>\n    </div>\n  )\n}\n\nexport default MermaidViewer\n"],"mappings":";;;;;;;;;AAYA,SAAS,eAA0B;CACjC,MAAM,EAAE,QAAQ,SAAS,oBAAA,GAAA,qBAAA,YAAA,CAA+B;CACxD,MAAM,IAAI,aAAA,eAAe;CAEzB,MAAM,kBAAkB;CAExB,OACE,iBAAA,GAAA,kBAAA,KAAA,CAAC,OAAD;EAAK,WAAU;YAAf;GACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,UAAD;IAAQ,MAAK;IAAS,cAAY,EAAE,gBAAgB;IAAG,OAAO,EAAE,gBAAgB;IAAG,eAAe,OAAO;IAAG,WAAW;cACrH,iBAAA,GAAA,kBAAA,IAAA,CAAC,aAAA,QAAD;KAAQ,WAAU;KAAU,eAAY;IAAQ,CAAA;GAC1C,CAAA;GACR,iBAAA,GAAA,kBAAA,IAAA,CAAC,UAAD;IAAQ,MAAK;IAAS,cAAY,EAAE,iBAAiB;IAAG,OAAO,EAAE,iBAAiB;IAAG,eAAe,QAAQ;IAAG,WAAW;cACxH,iBAAA,GAAA,kBAAA,IAAA,CAAC,aAAA,SAAD;KAAS,WAAU;KAAU,eAAY;IAAQ,CAAA;GAC3C,CAAA;GACR,iBAAA,GAAA,kBAAA,IAAA,CAAC,UAAD;IAAQ,MAAK;IAAS,cAAY,EAAE,mBAAmB;IAAG,OAAO,EAAE,mBAAmB;IAAG,eAAe,eAAe;IAAG,WAAW;cACnI,iBAAA,GAAA,kBAAA,IAAA,CAAC,aAAA,WAAD;KAAW,WAAU;KAAU,eAAY;IAAQ,CAAA;GAC7C,CAAA;EACL;;AAET;AAEA,SAAgB,cAAc,MAAqC;CACjE,MAAM,EAAE,KAAK,cAAc;CAE3B,MAAM,IAAI,aAAA,eAAe;CACzB,MAAM,gBAAA,GAAA,MAAA,OAAA,CAAsC,IAAI;CAChD,MAAM,CAAC,SAAS,eAAA,GAAA,MAAA,SAAA,CAAuB,KAAK;CAE5C,OACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;EACE,KAAK;EACL,UAAU;EACV,MAAK;EACL,qBAAqB,aAAa,SAAS,MAAM;EACjD,eAAe,WAAW,IAAI;EAC9B,cAAc,WAAW,KAAK;EAC9B,YAAA,GAAA,KAAA,QAAA,CAAgB,0QAA0Q,SAAS;YAEnS,iBAAA,GAAA,kBAAA,KAAA,CAAC,qBAAA,kBAAD;GACE,UAAU;GACV,UAAU;GACV,cAAc;GACd,cAAA;GACA,QAAA;GACA,OAAO;IAAE,MAAM;IAAM,eAAe,CAAC;IAAS,kBAAkB,CAAC;GAAQ;GACzE,aAAa,EAAE,MAAM,QAAQ;aAP/B;IASE,iBAAA,GAAA,kBAAA,IAAA,CAAC,cAAD,CAAe,CAAA;IACf,iBAAA,GAAA,kBAAA,IAAA,CAAC,qBAAA,oBAAD;KACE,cAAa;KACb,cAAa;KACb,cAAc,EAAE,QAAQ,mBAAmB;eAE3C,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;MAAK,WAAU;MAAqD,yBAAyB,EAAE,QAAQ,IAAI;KAAI,CAAA;IAC7F,CAAA;IACpB,iBAAA,GAAA,kBAAA,IAAA,CAAC,KAAD;KACE,YAAA,GAAA,KAAA,QAAA,CACE,oSACA,UAAU,cAAc,mCAC1B;eAEC,EAAE,oBAAoB;IACtB,CAAA;GACa;;CACf,CAAA;AAET"}
+{"version":3,"file":"MermaidViewer-kbSVqJ_z.cjs","names":[],"sources":["../source/components/MermaidViewer.tsx"],"sourcesContent":["import clsx from 'clsx'\nimport { Maximize2, ZoomIn, ZoomOut } from 'lucide-react'\nimport { useRef, useState, type ReactNode } from 'react'\nimport { TransformComponent, TransformWrapper, useControls } from 'react-zoom-pan-pinch'\n\nimport { useBuiltInText } from '../core/i18n'\n\ntype MermaidViewerProps = {\n  svg: string\n  className?: string\n}\n\nfunction ZoomControls(): ReactNode {\n  const { zoomIn, zoomOut, resetTransform } = useControls()\n  const t = useBuiltInText()\n\n  const buttonClassName = 'flex h-7 w-7 items-center justify-center rounded-md bg-(--clarify-theme-tokens-colors-surface) text-(--clarify-ui-text-soft) shadow-xs ring-1 ring-(--clarify-theme-tokens-colors-border) transition hover:bg-(--clarify-ui-hover-background) hover:text-(--clarify-theme-tokens-colors-foreground)'\n\n  return (\n    <div className=\"clarify-mermaid-controls absolute top-2 right-2 z-10 flex gap-1 opacity-0 transition group-hover:opacity-100 focus-within:opacity-100\">\n      <button type=\"button\" aria-label={t('mermaid.zoomIn')} title={t('mermaid.zoomIn')} onClick={() => zoomIn()} className={buttonClassName}>\n        <ZoomIn className=\"h-4 w-4\" aria-hidden=\"true\" />\n      </button>\n      <button type=\"button\" aria-label={t('mermaid.zoomOut')} title={t('mermaid.zoomOut')} onClick={() => zoomOut()} className={buttonClassName}>\n        <ZoomOut className=\"h-4 w-4\" aria-hidden=\"true\" />\n      </button>\n      <button type=\"button\" aria-label={t('mermaid.resetZoom')} title={t('mermaid.resetZoom')} onClick={() => resetTransform()} className={buttonClassName}>\n        <Maximize2 className=\"h-4 w-4\" aria-hidden=\"true\" />\n      </button>\n    </div>\n  )\n}\n\nexport function MermaidViewer(arg0: MermaidViewerProps): ReactNode {\n  const { svg, className } = arg0\n\n  const t = useBuiltInText()\n  const containerRef = useRef<HTMLDivElement>(null)\n  const [focused, setFocused] = useState(false)\n\n  return (\n    <div\n      ref={containerRef}\n      tabIndex={0}\n      role=\"group\"\n      onPointerDown={() => containerRef.current?.focus()}\n      onFocus={() => setFocused(true)}\n      onBlur={() => setFocused(false)}\n      className={clsx('clarify-mermaid group not-prose relative my-6 overflow-hidden rounded-2xl border border-(--clarify-theme-tokens-colors-border) bg-(--clarify-theme-tokens-colors-surface) outline-none focus-visible:ring-2 focus-visible:ring-(--clarify-theme-tokens-colors-primary)', className)}\n    >\n      <TransformWrapper\n        minScale={0.5}\n        maxScale={8}\n        initialScale={1}\n        centerOnInit\n        smooth\n        wheel={{ step: 0.05, wheelDisabled: !focused, touchPadDisabled: !focused }}\n        doubleClick={{ mode: 'reset' }}\n      >\n        <ZoomControls />\n        <TransformComponent\n          wrapperClass=\"!w-full !cursor-grab active:!cursor-grabbing\"\n          contentClass=\"!w-full justify-center [&_svg]:h-auto [&_svg]:max-w-full\"\n          wrapperStyle={{ height: 'min(70vh, 32rem)' }}\n        >\n          <div className=\"flex h-full w-full items-center justify-center p-4\" dangerouslySetInnerHTML={{ __html: svg }} />\n        </TransformComponent>\n        <p\n          className={clsx(\n            'clarify-mermaid-hint pointer-events-none absolute bottom-2 left-1/2 z-10 -translate-x-1/2 rounded-full bg-(--clarify-theme-tokens-colors-surface)/90 px-2.5 py-1 text-2xs text-(--clarify-ui-text-soft) shadow-xs ring-1 ring-(--clarify-theme-tokens-colors-border) backdrop-blur-sm transition',\n            focused ? 'opacity-0' : 'opacity-0 group-hover:opacity-100',\n          )}\n        >\n          {t('mermaid.scrollHint')}\n        </p>\n      </TransformWrapper>\n    </div>\n  )\n}\n\nexport default MermaidViewer\n"],"mappings":";;;;;;;;;AAYA,SAAS,eAA0B;CACjC,MAAM,EAAE,QAAQ,SAAS,oBAAA,GAAA,qBAAA,YAAA,CAA+B;CACxD,MAAM,IAAI,aAAA,eAAe;CAEzB,MAAM,kBAAkB;CAExB,OACE,iBAAA,GAAA,kBAAA,KAAA,CAAC,OAAD;EAAK,WAAU;YAAf;GACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,UAAD;IAAQ,MAAK;IAAS,cAAY,EAAE,gBAAgB;IAAG,OAAO,EAAE,gBAAgB;IAAG,eAAe,OAAO;IAAG,WAAW;cACrH,iBAAA,GAAA,kBAAA,IAAA,CAAC,aAAA,QAAD;KAAQ,WAAU;KAAU,eAAY;IAAQ,CAAA;GAC1C,CAAA;GACR,iBAAA,GAAA,kBAAA,IAAA,CAAC,UAAD;IAAQ,MAAK;IAAS,cAAY,EAAE,iBAAiB;IAAG,OAAO,EAAE,iBAAiB;IAAG,eAAe,QAAQ;IAAG,WAAW;cACxH,iBAAA,GAAA,kBAAA,IAAA,CAAC,aAAA,SAAD;KAAS,WAAU;KAAU,eAAY;IAAQ,CAAA;GAC3C,CAAA;GACR,iBAAA,GAAA,kBAAA,IAAA,CAAC,UAAD;IAAQ,MAAK;IAAS,cAAY,EAAE,mBAAmB;IAAG,OAAO,EAAE,mBAAmB;IAAG,eAAe,eAAe;IAAG,WAAW;cACnI,iBAAA,GAAA,kBAAA,IAAA,CAAC,aAAA,WAAD;KAAW,WAAU;KAAU,eAAY;IAAQ,CAAA;GAC7C,CAAA;EACL;;AAET;AAEA,SAAgB,cAAc,MAAqC;CACjE,MAAM,EAAE,KAAK,cAAc;CAE3B,MAAM,IAAI,aAAA,eAAe;CACzB,MAAM,gBAAA,GAAA,MAAA,OAAA,CAAsC,IAAI;CAChD,MAAM,CAAC,SAAS,eAAA,GAAA,MAAA,SAAA,CAAuB,KAAK;CAE5C,OACE,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;EACE,KAAK;EACL,UAAU;EACV,MAAK;EACL,qBAAqB,aAAa,SAAS,MAAM;EACjD,eAAe,WAAW,IAAI;EAC9B,cAAc,WAAW,KAAK;EAC9B,YAAA,GAAA,KAAA,QAAA,CAAgB,0QAA0Q,SAAS;YAEnS,iBAAA,GAAA,kBAAA,KAAA,CAAC,qBAAA,kBAAD;GACE,UAAU;GACV,UAAU;GACV,cAAc;GACd,cAAA;GACA,QAAA;GACA,OAAO;IAAE,MAAM;IAAM,eAAe,CAAC;IAAS,kBAAkB,CAAC;GAAQ;GACzE,aAAa,EAAE,MAAM,QAAQ;aAP/B;IASE,iBAAA,GAAA,kBAAA,IAAA,CAAC,cAAD,CAAe,CAAA;IACf,iBAAA,GAAA,kBAAA,IAAA,CAAC,qBAAA,oBAAD;KACE,cAAa;KACb,cAAa;KACb,cAAc,EAAE,QAAQ,mBAAmB;eAE3C,iBAAA,GAAA,kBAAA,IAAA,CAAC,OAAD;MAAK,WAAU;MAAqD,yBAAyB,EAAE,QAAQ,IAAI;KAAI,CAAA;IAC7F,CAAA;IACpB,iBAAA,GAAA,kBAAA,IAAA,CAAC,KAAD;KACE,YAAA,GAAA,KAAA,QAAA,CACE,oSACA,UAAU,cAAc,mCAC1B;eAEC,EAAE,oBAAoB;IACtB,CAAA;GACa;;CACf,CAAA;AAET"}

package/output/{OpenApiOperation-CFo6_otd.js → OpenApiOperation-BcJYHwft.js}

@@ -1,5 +1,5 @@
-import { a as useConfig, s as useLocale, t as useBuiltInText } from "./i18n-BxXpRSFX.js";
-import { C as isExternalHref, E as copyTextToClipboard, c as lucideIconRegistry, h as useTheme, l as resolveLucideIconName, n as PageTitleActions, o as useSectionStore, s as remToPx, w as localizeHref } from "./PageActions-3eo05fb_.js";
+import { a as useConfig, s as useLocale, t as useBuiltInText } from "./i18n-sJUQQLRZ.js";
+import { C as isExternalHref, E as copyTextToClipboard, c as lucideIconRegistry, h as useTheme, l as resolveLucideIconName, n as PageTitleActions, o as useSectionStore, s as remToPx, w as localizeHref } from "./PageActions-Bnz5Bybt.js";
 import { t as markdownRemarkPlugins } from "./remark-C9iRQM0R.js";
 import clsx from "clsx";
 import { Children, Suspense, cloneElement, createContext, createElement, forwardRef, isValidElement, lazy, useContext, useEffect, useId, useLayoutEffect, useRef, useState } from "react";
@@ -253,7 +253,7 @@ function Card(arg0) {
 }
 //#endregion
 //#region source/components/Mermaid.tsx
-var MermaidViewer = lazy(() => import("./MermaidViewer-CwkiQ2gO.js"));
+var MermaidViewer = lazy(() => import("./MermaidViewer-D4h-WEak.js"));
 var mermaidModulePromise;
 async function loadMermaid() {
 	mermaidModulePromise = mermaidModulePromise ?? import("mermaid").then((module) => module.default);
@@ -1014,7 +1014,7 @@ function TabItem(_props) {
 	return null;
 }
 function Tabs(arg0) {
-	const { items, children, defaultValue, selectedIndex, onChange, className, listClassName, panelsClassName } = arg0;
+	const { items, children, defaultValue, selectedIndex, onChange, className, spacingClassName = "my-6", listClassName, panelsClassName, actions, variant = "content" } = arg0;
 	const childItems = Children.toArray(children).filter((child) => isValidElement(child) && child.type === TabItem).map((child, index) => ({
 		id: child.props.value ?? `tab-${index}`,
 		label: child.props.title,
@@ -1031,23 +1031,26 @@ function Tabs(arg0) {
 	return /* @__PURE__ */ jsxs(TabGroup, {
 		selectedIndex: resolvedIndex,
 		onChange: handleChange,
-		className: clsx("clarify-tabs my-6", className),
-		children: [/* @__PURE__ */ jsx(TabList, {
-			className: clsx("flex max-w-full items-stretch gap-1 overflow-x-auto border-b border-(--clarify-theme-tokens-colors-border)", listClassName),
-			children: resolvedItems.map((item) => /* @__PURE__ */ jsx(Tab, {
-				className: ({ selected }) => clsx("clarify-content-tab clarify-ui-tab relative my-1 inline-flex h-9 shrink-0 items-center rounded-(--clarify-theme-tokens-radius-md) px-2.5 transition focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--clarify-theme-tokens-colors-primary)", selected && "clarify-ui-tab-active"),
+		className: clsx("clarify-tabs", spacingClassName, className),
+		children: [/* @__PURE__ */ jsxs(TabList, {
+			className: clsx("flex max-w-full items-stretch overflow-x-auto border-b", variant === "content" ? "gap-1 border-(--clarify-theme-tokens-colors-border)" : "h-10 gap-0 border-(--clarify-code-border) px-3", listClassName),
+			children: [resolvedItems.map((item) => /* @__PURE__ */ jsx(Tab, {
+				className: ({ selected }) => clsx("relative inline-flex shrink-0 items-center px-2.5 transition focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-(--clarify-theme-tokens-colors-primary)", variant === "content" ? "clarify-content-tab clarify-ui-tab my-1 h-9 rounded-(--clarify-theme-tokens-radius-md)" : "text-2xs font-semibold", selected && (variant === "content" ? "clarify-ui-tab-active" : "text-(--clarify-code-text)"), variant === "code" && !selected && "text-(--clarify-code-muted)"),
 				children: ({ selected }) => /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx("span", { children: item.label }), selected ? /* @__PURE__ */ jsx(motion.span, {
 					layoutId: indicatorLayoutId,
-					className: "absolute inset-x-2.5 -bottom-1 h-0.5 rounded-full bg-(--clarify-ui-tab-indicator)",
+					className: clsx("absolute inset-x-2.5 h-0.5 bg-(--clarify-ui-tab-indicator)", variant === "content" ? "-bottom-1 rounded-full" : "-bottom-px"),
 					transition: {
 						type: "tween",
 						duration: .16,
 						ease: "easeOut"
 					}
 				}) : null] })
-			}, item.id))
+			}, item.id)), actions ? /* @__PURE__ */ jsx("div", {
+				className: "sticky right-0 ml-auto flex shrink-0 items-center bg-(--clarify-code-background)",
+				children: actions
+			}) : null]
 		}), /* @__PURE__ */ jsx(TabPanels, {
-			className: clsx("mt-5", panelsClassName),
+			className: panelsClassName ?? "mt-5",
 			children: resolvedItems.map((item) => /* @__PURE__ */ jsx(TabPanel, {
 				className: "focus:outline-none focus-visible:ring-2 focus-visible:ring-(--clarify-theme-tokens-colors-primary)",
 				children: item.panel
@@ -1338,9 +1341,9 @@ function Col(arg0) {
 	});
 }
 function Properties(arg0) {
-	const { children } = arg0;
+	const { children, className, spacingClassName = "my-6" } = arg0;
 	return /* @__PURE__ */ jsx("div", {
-		className: "clarify-properties my-6",
+		className: clsx("clarify-properties", spacingClassName, className),
 		children: /* @__PURE__ */ jsx("ul", {
 			role: "list",
 			className: "m-0 list-none divide-y divide-(--clarify-theme-tokens-colors-border) p-0",
@@ -2408,7 +2411,8 @@ function getAuthOptions(spec, operation) {
 	return getSecurityRequirements(spec, operation).map((requirement, index) => {
 		const requirementSchemes = Object.keys(requirement).map((name) => ({
 			name,
-			scheme: schemes[name]
+			scheme: schemes[name],
+			scopes: requirement[name] ?? []
 		})).filter((option) => Boolean(option.scheme));
 		return {
 			key: `requirement:${index}`,
@@ -2715,6 +2719,103 @@ function ResponseExamplesPanel(arg0) {
 	});
 }
 //#endregion
+//#region source/openapi/components/OpenApiDocumentSection.tsx
+function OpenApiDocumentSection(props) {
+	const { title, children, className, bodyClassName, level = 3 } = props;
+	const heading = level === 3 ? /* @__PURE__ */ jsx("h3", {
+		className: "!m-0 text-sm/6 font-semibold text-(--clarify-theme-tokens-colors-foreground)",
+		children: title
+	}) : /* @__PURE__ */ jsx("h4", {
+		className: "!m-0 text-xs/5 font-semibold text-(--clarify-ui-text-soft)",
+		children: title
+	});
+	return /* @__PURE__ */ jsxs("section", {
+		className: clsx("clarify-openapi-document-section", className),
+		children: [heading, /* @__PURE__ */ jsx("div", {
+			className: clsx("mt-2", bodyClassName),
+			children
+		})]
+	});
+}
+//#endregion
+//#region source/openapi/components/OpenApiAuthDocumentation.tsx
+function authSchemeType(option, apiKeyLabel) {
+	const { scheme } = option;
+	if (scheme.type === "http") return scheme.scheme?.toUpperCase() || "HTTP";
+	if (scheme.type === "apiKey") return apiKeyLabel;
+	if (scheme.type === "oauth2") return "OAUTH 2.0";
+	if (scheme.type === "openIdConnect") return "OPENID CONNECT";
+	return scheme.type?.toUpperCase() || "AUTH";
+}
+function OpenApiAuthDocumentation(props) {
+	const { options } = props;
+	const t = useBuiltInText();
+	if (options.length === 0) return null;
+	const renderOption = (option) => option.schemes.length === 0 ? /* @__PURE__ */ jsx("div", {
+		className: "border-b border-(--clarify-theme-tokens-colors-border) pt-2 pb-4 text-sm/6 font-medium text-(--clarify-theme-tokens-colors-foreground)",
+		children: t("openapi.authNoAuth")
+	}) : /* @__PURE__ */ jsx("div", {
+		className: "divide-y divide-(--clarify-theme-tokens-colors-border) border-b border-(--clarify-theme-tokens-colors-border)",
+		children: option.schemes.map((schemeOption, schemeIndex) => {
+			const { scheme } = schemeOption;
+			const details = [
+				scheme.type === "apiKey" && scheme.in && scheme.name ? t("openapi.authLocation", {
+					in: scheme.in,
+					name: scheme.name
+				}) : void 0,
+				scheme.type === "http" && scheme.bearerFormat ? t("openapi.authBearerFormat", { format: scheme.bearerFormat }) : void 0,
+				scheme.type === "openIdConnect" ? scheme.openIdConnectUrl : void 0,
+				schemeOption.scopes.length > 0 ? t("openapi.authScopes", { scopes: schemeOption.scopes.join(", ") }) : void 0
+			].filter((value) => Boolean(value));
+			return /* @__PURE__ */ jsxs("div", { children: [schemeIndex > 0 ? /* @__PURE__ */ jsx("div", {
+				className: "relative h-0",
+				children: /* @__PURE__ */ jsx("span", {
+					className: "absolute top-0 left-4 -translate-y-1/2 bg-(--clarify-theme-tokens-colors-background) px-1.5 text-2xs font-semibold text-(--clarify-ui-text-faint)",
+					children: t("openapi.authAnd")
+				})
+			}) : null, /* @__PURE__ */ jsxs("div", {
+				className: "py-4 first:pt-2",
+				children: [
+					/* @__PURE__ */ jsxs("div", {
+						className: "flex flex-wrap items-center gap-2",
+						children: [/* @__PURE__ */ jsx("span", {
+							className: "font-mono text-sm/6 font-semibold text-(--clarify-theme-tokens-colors-foreground)",
+							children: schemeOption.name
+						}), /* @__PURE__ */ jsx("span", {
+							className: "rounded bg-(--clarify-ui-subtle-background) px-1.5 py-0.5 text-2xs font-semibold text-(--clarify-ui-text-soft)",
+							children: authSchemeType(schemeOption, t("openapi.authApiKey"))
+						})]
+					}),
+					scheme.description ? /* @__PURE__ */ jsx(Markdown, {
+						className: "mt-2 text-sm/6 text-(--clarify-ui-text-soft) *:first:mt-0 *:last:mb-0",
+						children: scheme.description
+					}) : null,
+					details.length > 0 ? /* @__PURE__ */ jsx("div", {
+						className: "mt-2 flex min-w-0 flex-wrap gap-x-4 gap-y-1 text-xs/5 text-(--clarify-ui-text-faint)",
+						children: details.map((detail) => /* @__PURE__ */ jsx("span", {
+							className: "min-w-0 break-all font-mono",
+							children: detail
+						}, detail))
+					}) : null
+				]
+			})] }, schemeOption.name);
+		})
+	});
+	return /* @__PURE__ */ jsx(OpenApiDocumentSection, {
+		title: t("openapi.authentication"),
+		bodyClassName: "not-prose",
+		children: options.length === 1 ? renderOption(options[0]) : /* @__PURE__ */ jsx(Tabs, {
+			items: options.map((option) => ({
+				id: option.key,
+				label: option.label || t("openapi.none"),
+				panel: renderOption(option)
+			})),
+			spacingClassName: "m-0",
+			panelsClassName: "mt-2"
+		})
+	});
+}
+//#endregion
 //#region source/openapi/components/SchemaProperties.tsx
 function getEnumDescriptions(schema) {
 	const descriptions = schema["x-enumDescriptions"];
@@ -3011,23 +3112,32 @@ function SchemaProperties(arg0) {
 	const { title, schema, spec, defaultExpanded } = arg0;
 	const root = getRootSchemaNode(spec, schema, defaultExpanded);
 	if (!root || root.children.length === 0) return null;
-	return /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("h3", { children: title }), /* @__PURE__ */ jsx("div", {
-		className: "clarify-schema-properties not-prose my-6",
+	return /* @__PURE__ */ jsx(OpenApiDocumentSection, {
+		title,
+		level: 4,
+		bodyClassName: "clarify-schema-properties not-prose",
 		children: /* @__PURE__ */ jsx(SchemaTree, { nodes: root.children })
-	})] });
+	});
 }
 function ParameterList(arg0) {
 	const t = useBuiltInText();
 	const { title, parameters } = arg0;
 	if (parameters.length === 0) return null;
-	return /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("h3", { children: title }), /* @__PURE__ */ jsx(Properties, { children: parameters.map((parameter) => /* @__PURE__ */ jsx(Property, {
-		name: parameter.name ?? t("openapi.parameter"),
-		type: [schemaToType(parameter.schema), parameter.required ? t("openapi.requiredBadge") : void 0].filter(Boolean).join(", ") || void 0,
-		children: parameter.description ? /* @__PURE__ */ jsx(Markdown, {
-			className: "*:first:mt-0 *:last:mb-0",
-			children: parameter.description
-		}) : t("openapi.operationParameter")
-	}, `${parameter.in}-${parameter.name}`)) })] });
+	return /* @__PURE__ */ jsx(OpenApiDocumentSection, {
+		title,
+		bodyClassName: "not-prose",
+		children: /* @__PURE__ */ jsx(Properties, {
+			spacingClassName: "m-0",
+			children: parameters.map((parameter) => /* @__PURE__ */ jsx(Property, {
+				name: parameter.name ?? t("openapi.parameter"),
+				type: [schemaToType(parameter.schema), parameter.required ? t("openapi.requiredBadge") : void 0].filter(Boolean).join(", ") || void 0,
+				children: parameter.description ? /* @__PURE__ */ jsx(Markdown, {
+					className: "*:first:mt-0 *:last:mb-0",
+					children: parameter.description
+				}) : t("openapi.operationParameter")
+			}, `${parameter.in}-${parameter.name}`))
+		})
+	});
 }
 function ResponseList(arg0) {
 	const { title, operation, spec, selectedStatus, onSelectStatus } = arg0;
@@ -3067,7 +3177,7 @@ function ResponseList(arg0) {
 					}) : `${t("openapi.response")}.`
 				}),
 				responseSchema && spec ? /* @__PURE__ */ jsx("div", {
-					className: "mt-4",
+					className: "mt-6",
 					children: /* @__PURE__ */ jsx(SchemaProperties, {
 						title: t("openapi.responseBodyProperties"),
 						schema: responseSchema,
@@ -3079,32 +3189,39 @@ function ResponseList(arg0) {
 	};
 	if (orderedResponses.length === 1) {
 		const [{ status, response }] = orderedResponses;
-		return /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("h3", { children: title ?? t("openapi.responses") }), renderResponsePanel({
-			status,
-			response
-		})] });
-	}
-	return /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("h3", { children: title ?? t("openapi.responses") }), /* @__PURE__ */ jsx(Tabs, {
-		selectedIndex,
-		onChange: (index) => {
-			onSelectStatus?.(orderedResponses[index]?.status ?? "");
-		},
-		items: orderedResponses.map(({ status, response }) => ({
-			id: status,
-			label: status,
-			panel: renderResponsePanel({
+		return /* @__PURE__ */ jsx(OpenApiDocumentSection, {
+			title: title ?? t("openapi.responses"),
+			children: renderResponsePanel({
 				status,
 				response
 			})
-		})),
-		className: "mt-4 mb-6",
-		panelsClassName: "mt-5"
-	})] });
+		});
+	}
+	return /* @__PURE__ */ jsx(OpenApiDocumentSection, {
+		title: title ?? t("openapi.responses"),
+		bodyClassName: "not-prose",
+		children: /* @__PURE__ */ jsx(Tabs, {
+			selectedIndex,
+			onChange: (index) => {
+				onSelectStatus?.(orderedResponses[index]?.status ?? "");
+			},
+			items: orderedResponses.map(({ status, response }) => ({
+				id: status,
+				label: status,
+				panel: renderResponsePanel({
+					status,
+					response
+				})
+			})),
+			spacingClassName: "m-0",
+			panelsClassName: "mt-2"
+		})
+	});
 }
 //#endregion
 //#region source/openapi/components/EndpointSections.tsx
 function EndpointRequest(arg0) {
-	const { spec, path, method, operationSource = "path", description, groupedParameters, parameters, requestBody, requestContents, requestSchema, selectedRequestMediaType, onSelectRequestMediaType, selectedServer, serverVariables, auth, sharedExampleKey, onSelectExampleKey } = arg0;
+	const { spec, path, method, operationSource = "path", description, groupedParameters, parameters, requestBody, requestContents, requestSchema, selectedRequestMediaType, onSelectRequestMediaType, selectedServer, serverVariables, authOptions, auth, sharedExampleKey, onSelectExampleKey } = arg0;
 	const t = useBuiltInText();
 	const hasRequestBody = Boolean(requestBody && requestContents.length > 0);
 	const renderDescription = () => {
@@ -3125,8 +3242,9 @@ function EndpointRequest(arg0) {
 	return /* @__PURE__ */ jsxs(Fragment$1, { children: [renderDescription(), /* @__PURE__ */ jsxs(Row, {
 		className: "clarify-openapi-request-workspace relative mt-8 pt-6",
 		children: [/* @__PURE__ */ jsx(Col, { children: /* @__PURE__ */ jsxs("div", {
-			className: "w-full",
+			className: "flex w-full flex-col gap-6",
 			children: [
+				/* @__PURE__ */ jsx(OpenApiAuthDocumentation, { options: authOptions }),
 				/* @__PURE__ */ jsx(ParameterList, {
 					title: t("openapi.pathParameters"),
 					parameters: groupedParameters.path
@@ -3139,7 +3257,10 @@ function EndpointRequest(arg0) {
 					title: t("openapi.headers"),
 					parameters: groupedParameters.header
 				}),
-				/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("h3", { children: t("openapi.requestBody") }), renderRequestBody()] })
+				/* @__PURE__ */ jsx(OpenApiDocumentSection, {
+					title: t("openapi.requestBody"),
+					children: renderRequestBody()
+				})
 			]
 		}) }), /* @__PURE__ */ jsx(Col, {
 			sticky: true,
@@ -4219,6 +4340,7 @@ function OpenApiResponseViewer(arg0) {
 	const previewAvailable = exchange ? canPreviewResponse(exchange.contentType) : false;
 	const selectedBodyMode = bodyModeSelection && bodyModeSelection.exchange === exchange ? bodyModeSelection.mode : "preview";
 	const activeBodyMode = previewAvailable ? selectedBodyMode : "raw";
+	const bodyModes = ["preview", "raw"].filter((mode) => mode === "raw" || previewAvailable);
 	function downloadBody() {
 		if (!exchange) return;
 		const url = URL.createObjectURL(exchange.blob);
@@ -4293,48 +4415,37 @@ function OpenApiResponseViewer(arg0) {
 							className: "font-mono text-2xs font-normal text-(--clarify-code-faint)",
 							children: exchange.contentType || t("openapi.unknownContentType")
 						}),
-						children: /* @__PURE__ */ jsxs("div", {
-							className: "min-h-72",
-							children: [/* @__PURE__ */ jsxs("div", {
-								className: "flex h-10 items-center justify-between border-b border-(--clarify-code-border) px-3",
-								children: [/* @__PURE__ */ jsx("div", {
-									role: "tablist",
-									className: "flex",
-									children: ["preview", "raw"].filter((mode) => mode === "raw" || previewAvailable).map((mode) => /* @__PURE__ */ jsx("button", {
-										type: "button",
-										role: "tab",
-										"aria-selected": activeBodyMode === mode,
-										onClick: () => setBodyModeSelection({
-											exchange,
-											mode
-										}),
-										className: clsx("border-b-2 px-2.5 py-1 text-2xs font-semibold", activeBodyMode === mode ? "border-(--clarify-theme-tokens-colors-primary) text-(--clarify-code-text)" : "border-transparent text-(--clarify-code-muted)"),
-										children: mode === "preview" ? t("openapi.preview") : t("openapi.raw")
-									}, mode))
-								}), /* @__PURE__ */ jsxs("div", {
-									className: "flex",
-									children: [/* @__PURE__ */ jsx(CopyButton, { value: exchange.body }), /* @__PURE__ */ jsx("button", {
-										type: "button",
-										onClick: downloadBody,
-										"aria-label": t("openapi.downloadBody"),
-										title: t("openapi.downloadBody"),
-										className: "grid size-8 shrink-0 place-items-center rounded-(--clarify-theme-tokens-radius-md) text-(--clarify-code-muted) transition hover:bg-(--clarify-code-control-background-hover) hover:text-(--clarify-code-text) focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-(--clarify-theme-tokens-colors-primary)",
-										children: /* @__PURE__ */ jsx(DownloadIcon, {
-											className: "size-4",
-											"aria-hidden": "true"
-										})
-									})]
-								})]
-							}), /* @__PURE__ */ jsx("div", {
-								className: "p-4",
-								children: activeBodyMode === "preview" ? /* @__PURE__ */ jsx(ResponsePreview, { exchange }) : exchange.size ? /* @__PURE__ */ jsx("pre", {
+						children: /* @__PURE__ */ jsx(Tabs, {
+							items: bodyModes.map((mode) => ({
+								id: mode,
+								label: mode === "preview" ? t("openapi.preview") : t("openapi.raw"),
+								panel: mode === "preview" ? /* @__PURE__ */ jsx(ResponsePreview, { exchange }) : exchange.size ? /* @__PURE__ */ jsx("pre", {
 									className: "max-h-128 overflow-auto whitespace-pre-wrap wrap-break-word font-mono text-xs/5",
 									children: exchange.body
 								}) : /* @__PURE__ */ jsx("div", {
 									className: "py-8 text-center text-xs text-(--clarify-code-faint)",
 									children: t("openapi.responseBodyEmpty")
 								})
-							})]
+							})),
+							selectedIndex: bodyModes.indexOf(activeBodyMode),
+							onChange: (index) => setBodyModeSelection({
+								exchange,
+								mode: bodyModes[index] ?? "raw"
+							}),
+							spacingClassName: "m-0 min-h-72",
+							panelsClassName: "p-4",
+							variant: "code",
+							actions: /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(CopyButton, { value: exchange.body }), /* @__PURE__ */ jsx("button", {
+								type: "button",
+								onClick: downloadBody,
+								"aria-label": t("openapi.downloadBody"),
+								title: t("openapi.downloadBody"),
+								className: "grid size-8 shrink-0 place-items-center rounded-(--clarify-theme-tokens-radius-md) text-(--clarify-code-muted) transition hover:bg-(--clarify-code-control-background-hover) hover:text-(--clarify-code-text) focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-(--clarify-theme-tokens-colors-primary)",
+								children: /* @__PURE__ */ jsx(DownloadIcon, {
+									className: "size-4",
+									"aria-hidden": "true"
+								})
+							})] })
 						})
 					})
 				]
@@ -5097,7 +5208,8 @@ function ServerVariableControl(arg0) {
 			label: option
 		})),
 		onChange,
-		compact
+		compact,
+		buttonClassName: "inline-flex min-h-8 w-full min-w-0 items-center justify-between gap-1 rounded-md border border-(--clarify-theme-tokens-colors-border) bg-(--clarify-theme-tokens-colors-surface) px-2.5 py-1.5 text-xs font-semibold text-(--clarify-theme-tokens-colors-foreground) shadow-xs outline-hidden transition hover:border-(--clarify-ui-text-faint) hover:bg-(--clarify-ui-hover-background) focus:ring-2 focus:ring-inset focus:ring-(--clarify-theme-tokens-colors-primary) data-open:bg-(--clarify-ui-active-background)"
 	});
 	return /* @__PURE__ */ jsx("input", {
 		"aria-label": name,
@@ -5127,7 +5239,8 @@ function ServerPanel(arg0) {
 						label: getServerLabel(server, index),
 						description: server.description
 					})),
-					onChange: onSelectServer
+					onChange: onSelectServer,
+					buttonClassName: "inline-flex min-h-8 w-full min-w-0 items-center justify-between gap-1 rounded-md border border-(--clarify-theme-tokens-colors-border) bg-(--clarify-theme-tokens-colors-surface) px-2.5 py-1.5 text-xs font-semibold text-(--clarify-theme-tokens-colors-foreground) shadow-xs outline-hidden transition hover:border-(--clarify-ui-text-faint) hover:bg-(--clarify-ui-hover-background) focus:ring-2 focus:ring-inset focus:ring-(--clarify-theme-tokens-colors-primary) data-open:bg-(--clarify-ui-active-background)"
 				})]
 			}) : null, variableEntries.length > 0 ? /* @__PURE__ */ jsx("div", {
 				className: "grid gap-3 sm:grid-cols-(--clarify-openapi-variable-grid)",
@@ -5257,6 +5370,7 @@ function OpenApiOperation(arg0) {
 				onSelectRequestMediaType: requestState.setSelectedRequestMediaType,
 				selectedServer: serverState.selectedServer,
 				serverVariables: serverState.serverVariables,
+				authOptions: authState.authOptions,
 				auth: authState.authInput,
 				sharedExampleKey: linkedExampleKey,
 				onSelectExampleKey: setLinkedExampleKey
@@ -5276,4 +5390,4 @@ function OpenApiOperation(arg0) {
 //#endregion
 export { Code as A, GridPattern as C, Tag as D, Heading as E, CardGroup as F, Callout as I, Button as L, Pre as M, Mermaid as N, Feedback as O, Card as P, Prose as S, Logo as T, WebFrame as _, ResponseExamplesPanel as a, Step as b, getAuthOptions as c, getOpenApiOperationEntry as d, listOpenApiOperations as f, primitives_exports as g, Markdown as h, RequestExamplesPanel as i, CodeGroup as j, Collapse as k, getServerKey as l, getRequestBody$1 as m, OpenApiOperation as n, authPlaceholder as o, getMediaTypeEntries as p, OpenApiRequestWorkbench as r, defaultServerVariables as s, EndpointIdentity as t, getServers as u, TabItem as v, HeroPattern as w, Steps as x, Tabs as y };
 
-//# sourceMappingURL=OpenApiOperation-CFo6_otd.js.map
+//# sourceMappingURL=OpenApiOperation-BcJYHwft.js.map