@apiboost/omnispec 1.0.0 → 1.1.0-next.2

package/dist/cjs/chunks/{Collapsible-BHAHk_Ep.js → Collapsible-BTWyDBkX.js}

@@ -3,7 +3,7 @@
 var React = require('react');
 var jsxRuntime = require('react/jsx-runtime');
 var css = require('@emotion/css');
-var useSpecFetcher = require('./useSpecFetcher-BKz1jHTV.js');
+var useSpecFetcher = require('./useSpecFetcher-BAbHnXax.js');
 var styled = require('@emotion/styled');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
@@ -63,6 +63,50 @@ function useScrollSpy(ids, rootMargin = "0px 0px -80% 0px") {
   return activeId;
 }
 
+const expandListeners = /* @__PURE__ */ new Map();
+function onExpandRequest(id, callback) {
+  expandListeners.set(id, callback);
+  return () => {
+    expandListeners.delete(id);
+  };
+}
+function requestExpand(id) {
+  const listener = expandListeners.get(id);
+  if (listener) listener();
+}
+const SMOOTH_THRESHOLD = 50;
+function useHashScroll(operationCount = 0) {
+  const scrollBehavior = operationCount > SMOOTH_THRESHOLD ? "instant" : "smooth";
+  React.useEffect(() => {
+    const hash = window.location.hash.slice(1);
+    if (!hash) return;
+    requestExpand(hash);
+    const attempt = () => {
+      const el = document.getElementById(hash);
+      if (el) {
+        el.scrollIntoView({ behavior: scrollBehavior, block: "start" });
+        return true;
+      }
+      return false;
+    };
+    if (attempt()) return;
+    let tries = 0;
+    const interval = setInterval(() => {
+      if (attempt() || ++tries >= 10) clearInterval(interval);
+    }, 200);
+    return () => clearInterval(interval);
+  }, [scrollBehavior]);
+  const navigateTo = React.useCallback((id) => {
+    window.history.replaceState(null, "", `#${id}`);
+    requestExpand(id);
+    requestAnimationFrame(() => {
+      const el = document.getElementById(id);
+      el?.scrollIntoView({ behavior: scrollBehavior, block: "start" });
+    });
+  }, [scrollBehavior]);
+  return { navigateTo };
+}
+
 function SearchBar({ placeholder = "Search...", onSearch }) {
   const [value, setValue] = React.useState("");
   const handleChange = React.useCallback((e) => {
@@ -70,7 +114,7 @@ function SearchBar({ placeholder = "Search...", onSearch }) {
     setValue(query);
     onSearch(query);
   }, [onSearch]);
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: `omnispec-search ${containerStyle$4}`, children: /* @__PURE__ */ jsxRuntime.jsx(
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: `omnispec-search ${containerStyle$5}`, children: /* @__PURE__ */ jsxRuntime.jsx(
     "input",
     {
       type: "text",
@@ -82,7 +126,7 @@ function SearchBar({ placeholder = "Search...", onSearch }) {
     }
   ) });
 }
-const containerStyle$4 = css.css({
+const containerStyle$5 = css.css({
   padding: "12px"
 });
 const inputStyle = css.css({
@@ -108,7 +152,7 @@ function SpecToolbar({
   onToggleExpand,
   downloadLink
 }) {
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: containerStyle$3, children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: containerStyle$4, children: [
     /* @__PURE__ */ jsxRuntime.jsx("div", { className: overviewWrapStyle, children: overview }),
     /* @__PURE__ */ jsxRuntime.jsxs("div", { className: actionsStyle, children: [
       versionBadge && /* @__PURE__ */ jsxRuntime.jsx("div", { className: mobileBadgeStyle, children: versionBadge }),
@@ -133,7 +177,7 @@ function SpecToolbar({
     ] })
   ] });
 }
-const containerStyle$3 = css.css({
+const containerStyle$4 = css.css({
   display: "flex",
   alignItems: "flex-start",
   justifyContent: "space-between",
@@ -2457,7 +2501,7 @@ marked.setOptions({
   breaks: false,
   gfm: true
 });
-const containerStyle$2 = css.css({
+const containerStyle$3 = css.css({
   color: "var(--omnispec-fg-primary)",
   fontSize: "var(--omnispec-font-size-base)",
   lineHeight: 1.6
@@ -2470,7 +2514,7 @@ function MarkdownRenderer({ content, className }) {
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
-      className: css.cx("omnispec-markdown", containerStyle$2, className),
+      className: css.cx("omnispec-markdown", containerStyle$3, className),
       dangerouslySetInnerHTML: { __html: html }
     }
   );
@@ -3612,6 +3656,187 @@ function generateNumberExample(format, minimum) {
   }
 }
 
+const ExpandableCard = React.memo(function ExpandableCard2({
+  id,
+  title,
+  rightLabel,
+  deprecated,
+  badges,
+  expandAll,
+  expandGeneration,
+  children
+}) {
+  const { defaultExpandOperations } = useSpecFetcher.useConfig();
+  const [expanded, setExpanded] = React.useState(defaultExpandOperations);
+  const [nearViewport, setNearViewport] = React.useState(false);
+  const containerRef = React.useRef(null);
+  const ctx = useExpandAll();
+  const effectiveExpandAll = expandAll ?? ctx.expandAll;
+  const effectiveGeneration = expandGeneration ?? ctx.expandGeneration;
+  React.useEffect(() => {
+    if (effectiveGeneration > 0) {
+      setExpanded(!!effectiveExpandAll);
+    }
+  }, [effectiveExpandAll, effectiveGeneration]);
+  React.useEffect(() => {
+    if (!id) return;
+    return onExpandRequest(id, () => setExpanded(true));
+  }, [id]);
+  React.useEffect(() => {
+    const el = containerRef.current;
+    if (!el) return;
+    if (nearViewport) return;
+    const observer = new IntersectionObserver(
+      ([entry]) => {
+        if (entry.isIntersecting) {
+          setNearViewport(true);
+          observer.disconnect();
+        }
+      },
+      { rootMargin: "1000px" }
+    );
+    observer.observe(el);
+    return () => observer.disconnect();
+  }, [nearViewport]);
+  const shouldRender = expanded && nearViewport;
+  const handleClick = React.useCallback(() => {
+    setExpanded((prev) => !prev);
+  }, []);
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      ref: containerRef,
+      id,
+      className: css.cx(
+        "omnispec-expandable-card",
+        containerStyle$2,
+        deprecated ? deprecatedStyle : void 0
+      ),
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "button",
+          {
+            type: "button",
+            onClick: handleClick,
+            className: css.cx(headerStyle$2, expanded ? headerExpandedStyle : void 0),
+            "aria-expanded": expanded,
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: css.cx(chevronStyle, expanded && chevronExpandedStyle), children: /* @__PURE__ */ jsxRuntime.jsx(useSpecFetcher.Icon, { name: "chevron-right", size: "0.75rem" }) }),
+              badges?.filter((b) => b.position === "before").map((b) => /* @__PURE__ */ jsxRuntime.jsx("span", { className: xBadgeStyle, style: { backgroundColor: b.color ?? "var(--omnispec-bg-tertiary)", color: b.color ? "#fff" : "var(--omnispec-fg-secondary)" }, children: b.name }, b.name)),
+              /* @__PURE__ */ jsxRuntime.jsx("span", { className: titleStyle$1, children: title }),
+              badges?.filter((b) => b.position !== "before").map((b) => /* @__PURE__ */ jsxRuntime.jsx("span", { className: xBadgeStyle, style: { backgroundColor: b.color ?? "var(--omnispec-bg-tertiary)", color: b.color ? "#fff" : "var(--omnispec-fg-secondary)" }, children: b.name }, b.name)),
+              deprecated && /* @__PURE__ */ jsxRuntime.jsx("span", { className: deprecatedBadgeStyle, children: "Deprecated" }),
+              rightLabel && /* @__PURE__ */ jsxRuntime.jsx("span", { className: rightLabelStyle, children: rightLabel })
+            ]
+          }
+        ),
+        shouldRender && /* @__PURE__ */ jsxRuntime.jsx("div", { className: bodyStyle, children })
+      ]
+    }
+  );
+});
+const containerStyle$2 = css.css({
+  marginBottom: "0.75rem",
+  maxWidth: "100%",
+  borderRadius: "0.5rem",
+  [useSpecFetcher.mq.desktop]: {
+    border: "1px solid var(--omnispec-border-color)",
+    borderRadius: "0.5rem"
+  }
+});
+const deprecatedStyle = css.css({
+  opacity: 0.6
+});
+const headerStyle$2 = css.css({
+  display: "flex",
+  alignItems: "center",
+  gap: "0.75rem",
+  width: "100%",
+  padding: "0.75rem 0",
+  background: "var(--omnispec-bg-primary)",
+  border: "none",
+  borderBottom: "none",
+  borderRadius: "0.5rem",
+  cursor: "pointer",
+  textAlign: "left",
+  [useSpecFetcher.mq.desktop]: {
+    padding: "1rem"
+  }
+});
+const headerExpandedStyle = css.css({});
+const chevronStyle = css.css({
+  color: "var(--omnispec-fg-muted)",
+  flexShrink: 0,
+  transition: "transform 0.2s ease"
+});
+const chevronExpandedStyle = css.css({
+  transform: "rotate(90deg)"
+});
+const titleStyle$1 = css.css({
+  fontWeight: 600,
+  flex: 1,
+  minWidth: 0,
+  color: "var(--omnispec-fg-primary)",
+  fontSize: "var(--omnispec-font-size-md)",
+  textOverflow: "ellipsis",
+  whiteSpace: "nowrap"
+});
+const xBadgeStyle = css.css({
+  fontSize: "var(--omnispec-font-size-xs)",
+  fontWeight: 600,
+  padding: "0.125rem 0.5rem",
+  borderRadius: "1rem",
+  whiteSpace: "nowrap",
+  flexShrink: 0
+});
+const deprecatedBadgeStyle = css.css({
+  fontSize: "10px",
+  color: "var(--omnispec-color-warning)",
+  fontWeight: 600,
+  textTransform: "uppercase",
+  border: "1px solid var(--omnispec-color-warning)",
+  padding: "1px 5px",
+  borderRadius: "3px",
+  flexShrink: 0
+});
+const rightLabelStyle = css.css({
+  fontSize: "var(--omnispec-font-size-sm)",
+  color: "var(--omnispec-fg-muted)",
+  flexShrink: 0,
+  marginLeft: "auto"
+});
+const bodyStyle = css.css({});
+
+const barStyle = css.css({
+  display: "flex",
+  flexWrap: "wrap",
+  alignItems: "center",
+  gap: "12px",
+  padding: "12px 16px",
+  backgroundColor: "rgba(0, 0, 0, 0.02)",
+  borderBottom: "1px solid var(--omnispec-border-color)",
+  overflow: "hidden",
+  maxWidth: "100%"
+});
+const pathStyle = css.css({
+  minWidth: 0,
+  wordBreak: "break-all"
+});
+function MethodBar({ label, path, color, method }) {
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: barStyle, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      Badge,
+      {
+        label,
+        variant: method ? "method" : "default",
+        method,
+        color
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx("code", { className: pathStyle, children: path })
+  ] });
+}
+
 var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
 
 function getDefaultExportFromCjs (x) {
@@ -7004,9 +7229,9 @@ function CodeBlock({
   }, [code]);
   const hasHeader = title || showCopy || headerLeft;
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: css.cx("omnispec-code-block", containerStyle$1), children: [
-    hasHeader && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: headerStyle$2, children: [
+    hasHeader && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: headerStyle$1, children: [
       /* @__PURE__ */ jsxRuntime.jsxs("div", { className: headerLeftStyle, children: [
-        title && /* @__PURE__ */ jsxRuntime.jsx("span", { className: titleStyle$1, children: title }),
+        title && /* @__PURE__ */ jsxRuntime.jsx("span", { className: titleStyle, children: title }),
         headerLeft
       ] }),
       showCopy && /* @__PURE__ */ jsxRuntime.jsx(
@@ -7056,7 +7281,7 @@ const containerStyle$1 = css.css({
     border: "1px solid var(--omnispec-border-color)"
   }
 });
-const headerStyle$2 = css.css({
+const headerStyle$1 = css.css({
   display: "flex",
   justifyContent: "space-between",
   alignItems: "center",
@@ -7073,7 +7298,7 @@ const headerLeftStyle = css.css({
   minWidth: 0,
   overflow: "hidden"
 });
-const titleStyle$1 = css.css({
+const titleStyle = css.css({
   fontFamily: "var(--omnispec-font-mono)",
   fontSize: "var(--omnispec-font-size-xs)",
   color: "var(--omnispec-fg-muted)",
@@ -7104,7 +7329,7 @@ const preStyle = css.css({
   }
 });
 
-const headerStyle$1 = css.css({
+const headerStyle = css.css({
   display: "flex",
   gap: "0.125rem",
   marginBottom: "-1px",
@@ -7163,7 +7388,7 @@ function Tabs({ tabs, defaultTab, flush = false }) {
   const [activeTab, setActiveTab] = React.useState(defaultTab ?? tabs[0]?.id ?? "");
   const activeContent = tabs.find((t) => t.id === activeTab)?.content;
   return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "omnispec-tabs", children: [
-    /* @__PURE__ */ jsxRuntime.jsx("div", { className: css.cx(headerStyle$1, flush && flushHeaderStyle), role: "tablist", children: tabs.map((tab) => /* @__PURE__ */ jsxRuntime.jsx(
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: css.cx(headerStyle, flush && flushHeaderStyle), role: "tablist", children: tabs.map((tab) => /* @__PURE__ */ jsxRuntime.jsx(
       "button",
       {
         type: "button",
@@ -7183,230 +7408,222 @@ function Tabs({ tabs, defaultTab, flush = false }) {
   ] });
 }
 
-const expandListeners = /* @__PURE__ */ new Map();
-function onExpandRequest(id, callback) {
-  expandListeners.set(id, callback);
-  return () => {
-    expandListeners.delete(id);
-  };
-}
-function requestExpand(id) {
-  const listener = expandListeners.get(id);
-  if (listener) listener();
-}
-const SMOOTH_THRESHOLD = 50;
-function useHashScroll(operationCount = 0) {
-  const scrollBehavior = operationCount > SMOOTH_THRESHOLD ? "instant" : "smooth";
-  React.useEffect(() => {
-    const hash = window.location.hash.slice(1);
-    if (!hash) return;
-    requestExpand(hash);
-    const attempt = () => {
-      const el = document.getElementById(hash);
-      if (el) {
-        el.scrollIntoView({ behavior: scrollBehavior, block: "start" });
-        return true;
+function ExampleSelector({
+  examples,
+  selectedName,
+  onSelect
+}) {
+  if (examples.length <= 1) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: containerStyle, children: [
+    /* @__PURE__ */ jsxRuntime.jsx("label", { htmlFor: "example-selector", className: labelStyle, children: "Example:" }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "select",
+      {
+        id: "example-selector",
+        value: selectedName,
+        onChange: (e) => onSelect(e.target.value),
+        className: selectStyle,
+        children: examples.map((example) => /* @__PURE__ */ jsxRuntime.jsx("option", { value: example.name, children: example.summary ? `${example.name} - ${example.summary}` : example.name }, example.name))
       }
-      return false;
-    };
-    if (attempt()) return;
-    let tries = 0;
-    const interval = setInterval(() => {
-      if (attempt() || ++tries >= 10) clearInterval(interval);
-    }, 200);
-    return () => clearInterval(interval);
-  }, [scrollBehavior]);
-  const navigateTo = React.useCallback((id) => {
-    window.history.replaceState(null, "", `#${id}`);
-    requestExpand(id);
-    requestAnimationFrame(() => {
-      const el = document.getElementById(id);
-      el?.scrollIntoView({ behavior: scrollBehavior, block: "start" });
-    });
-  }, [scrollBehavior]);
-  return { navigateTo };
+    )
+  ] });
 }
+function getNamedExamples(media) {
+  if (media.example !== void 0) {
+    return [{ name: "default", value: media.example }];
+  }
+  if (media.examples && typeof media.examples === "object") {
+    return Object.entries(media.examples).map(([name, example]) => ({
+      name,
+      summary: example.summary,
+      value: example.value
+    }));
+  }
+  return [];
+}
+const containerStyle = css.css({
+  display: "flex",
+  alignItems: "center",
+  gap: "0.5rem",
+  marginBottom: "0.75rem"
+});
+const labelStyle = css.css({
+  fontSize: "var(--omnispec-font-size-xs)",
+  fontWeight: 600,
+  color: "var(--omnispec-fg-muted)",
+  textTransform: "uppercase",
+  letterSpacing: "0.5px",
+  whiteSpace: "nowrap"
+});
+const selectStyle = css.css({
+  padding: "0.375rem 0.625rem",
+  border: "1px solid var(--omnispec-input-border)",
+  borderRadius: "var(--omnispec-border-radius)",
+  backgroundColor: "var(--omnispec-input-bg)",
+  color: "var(--omnispec-fg-primary)",
+  fontSize: "var(--omnispec-font-size-sm)",
+  fontFamily: "var(--omnispec-font-mono)"
+});
 
-const ExpandableCard = React.memo(function ExpandableCard2({
-  id,
-  title,
-  rightLabel,
-  deprecated,
-  badges,
-  expandAll,
-  expandGeneration,
-  children
-}) {
-  const { defaultExpandOperations } = useSpecFetcher.useConfig();
-  const [expanded, setExpanded] = React.useState(defaultExpandOperations);
-  const [nearViewport, setNearViewport] = React.useState(false);
-  const containerRef = React.useRef(null);
-  const ctx = useExpandAll();
-  const effectiveExpandAll = expandAll ?? ctx.expandAll;
-  const effectiveGeneration = expandGeneration ?? ctx.expandGeneration;
-  React.useEffect(() => {
-    if (effectiveGeneration > 0) {
-      setExpanded(!!effectiveExpandAll);
-    }
-  }, [effectiveExpandAll, effectiveGeneration]);
-  React.useEffect(() => {
-    if (!id) return;
-    return onExpandRequest(id, () => setExpanded(true));
-  }, [id]);
-  React.useEffect(() => {
-    const el = containerRef.current;
-    if (!el) return;
-    if (nearViewport) return;
-    const observer = new IntersectionObserver(
-      ([entry]) => {
-        if (entry.isIntersecting) {
-          setNearViewport(true);
-          observer.disconnect();
+const MOBILE_TABS = [
+  { id: "schema", label: "Schema" },
+  { id: "samples", label: "Samples" },
+  { id: "try-it", label: "Try It" }
+];
+const RIGHT_TABS = [
+  { id: "samples", label: "Samples" },
+  { id: "try-it", label: "Try It" }
+];
+function ReferenceLayout({ schema, samples, tryIt, operationId }) {
+  const [rightTab, setRightTab] = React.useState("samples");
+  const [mobileTab, setMobileTab] = React.useState("schema");
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: mobileWrapperStyle, children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: mobileTabBarStyle, role: "tablist", children: MOBILE_TABS.map((tab) => /* @__PURE__ */ jsxRuntime.jsx(
+        "button",
+        {
+          type: "button",
+          role: "tab",
+          "aria-selected": mobileTab === tab.id,
+          "aria-controls": `mobile-panel-${operationId}-${tab.id}`,
+          onClick: () => setMobileTab(tab.id),
+          className: css.cx(mobileTabStyle, mobileTab === tab.id ? mobileTabActiveStyle : void 0),
+          children: tab.label
+        },
+        tab.id
+      )) }),
+      /* @__PURE__ */ jsxRuntime.jsxs(
+        "div",
+        {
+          id: `mobile-panel-${operationId}-${mobileTab}`,
+          className: mobileContentStyle,
+          role: "tabpanel",
+          children: [
+            mobileTab === "schema" && schema,
+            mobileTab === "samples" && samples,
+            mobileTab === "try-it" && tryIt
+          ]
         }
-      },
-      { rootMargin: "1000px" }
-    );
-    observer.observe(el);
-    return () => observer.disconnect();
-  }, [nearViewport]);
-  const shouldRender = expanded && nearViewport;
-  const handleClick = React.useCallback(() => {
-    setExpanded((prev) => !prev);
-  }, []);
-  return /* @__PURE__ */ jsxRuntime.jsxs(
-    "div",
-    {
-      ref: containerRef,
-      id,
-      className: css.cx(
-        "omnispec-expandable-card",
-        containerStyle,
-        deprecated ? deprecatedStyle : void 0
-      ),
-      children: [
-        /* @__PURE__ */ jsxRuntime.jsxs(
+      )
+    ] }, `mobile-${operationId}`),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: desktopWrapperStyle, children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: leftColumnStyle, children: schema }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: rightColumnStyle, children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: rightTabBarStyle, role: "tablist", children: RIGHT_TABS.map((tab) => /* @__PURE__ */ jsxRuntime.jsx(
           "button",
           {
             type: "button",
-            onClick: handleClick,
-            className: css.cx(headerStyle, expanded ? headerExpandedStyle : void 0),
-            "aria-expanded": expanded,
+            role: "tab",
+            "aria-selected": rightTab === tab.id,
+            "aria-controls": `right-panel-${operationId}-${tab.id}`,
+            onClick: () => setRightTab(tab.id),
+            className: css.cx(rightTabStyle, rightTab === tab.id ? rightTabActiveStyle : void 0),
+            children: tab.label
+          },
+          tab.id
+        )) }),
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            id: `right-panel-${operationId}-${rightTab}`,
+            className: rightContentStyle,
+            role: "tabpanel",
             children: [
-              /* @__PURE__ */ jsxRuntime.jsx("span", { className: css.cx(chevronStyle, expanded && chevronExpandedStyle), children: /* @__PURE__ */ jsxRuntime.jsx(useSpecFetcher.Icon, { name: "chevron-right", size: "0.75rem" }) }),
-              badges?.filter((b) => b.position === "before").map((b) => /* @__PURE__ */ jsxRuntime.jsx("span", { className: xBadgeStyle, style: { backgroundColor: b.color ?? "var(--omnispec-bg-tertiary)", color: b.color ? "#fff" : "var(--omnispec-fg-secondary)" }, children: b.name }, b.name)),
-              /* @__PURE__ */ jsxRuntime.jsx("span", { className: titleStyle, children: title }),
-              badges?.filter((b) => b.position !== "before").map((b) => /* @__PURE__ */ jsxRuntime.jsx("span", { className: xBadgeStyle, style: { backgroundColor: b.color ?? "var(--omnispec-bg-tertiary)", color: b.color ? "#fff" : "var(--omnispec-fg-secondary)" }, children: b.name }, b.name)),
-              deprecated && /* @__PURE__ */ jsxRuntime.jsx("span", { className: deprecatedBadgeStyle, children: "Deprecated" }),
-              rightLabel && /* @__PURE__ */ jsxRuntime.jsx("span", { className: rightLabelStyle, children: rightLabel })
+              rightTab === "samples" && samples,
+              rightTab === "try-it" && tryIt
             ]
           }
-        ),
-        shouldRender && /* @__PURE__ */ jsxRuntime.jsx("div", { className: bodyStyle, children })
-      ]
-    }
-  );
-});
-const containerStyle = css.css({
-  marginBottom: "0.75rem",
-  maxWidth: "100%",
-  borderRadius: "0.5rem",
+        )
+      ] })
+    ] }, `desktop-${operationId}`)
+  ] });
+}
+const mobileWrapperStyle = css.css({
+  display: "block",
   [useSpecFetcher.mq.desktop]: {
-    border: "1px solid var(--omnispec-border-color)",
-    borderRadius: "0.5rem"
+    display: "none"
   }
 });
-const deprecatedStyle = css.css({
-  opacity: 0.6
-});
-const headerStyle = css.css({
+const mobileTabBarStyle = css.css({
   display: "flex",
-  alignItems: "center",
-  gap: "0.75rem",
-  width: "100%",
-  padding: "0.75rem 0",
-  background: "var(--omnispec-bg-primary)",
+  borderBottom: "1px solid var(--omnispec-border-color)"
+});
+const mobileTabStyle = css.css({
+  flex: 1,
+  textAlign: "center",
+  padding: "0.625rem 0.5rem",
+  background: "none",
   border: "none",
-  borderBottom: "none",
-  borderRadius: "0.5rem",
+  borderBottom: "0.125rem solid transparent",
   cursor: "pointer",
-  textAlign: "left",
-  [useSpecFetcher.mq.desktop]: {
-    padding: "1rem"
+  fontSize: "var(--omnispec-font-size-xs)",
+  fontWeight: 600,
+  letterSpacing: "0.04em",
+  textTransform: "uppercase",
+  color: "var(--omnispec-fg-secondary)",
+  "&:hover": {
+    color: "var(--omnispec-fg-primary)"
   }
 });
-const headerExpandedStyle = css.css({});
-const chevronStyle = css.css({
-  color: "var(--omnispec-fg-muted)",
-  flexShrink: 0,
-  transition: "transform 0.2s ease"
+const mobileTabActiveStyle = css.css({
+  borderBottom: "0.125rem solid var(--omnispec-color-primary)",
+  color: "var(--omnispec-color-primary)"
 });
-const chevronExpandedStyle = css.css({
-  transform: "rotate(90deg)"
+const mobileContentStyle = css.css({
+  padding: "1rem 0"
 });
-const titleStyle = css.css({
-  fontWeight: 600,
+const desktopWrapperStyle = css.css({
+  display: "none",
+  [useSpecFetcher.mq.desktop]: {
+    display: "flex",
+    alignItems: "flex-start"
+  }
+});
+const leftColumnStyle = css.css({
   flex: 1,
   minWidth: 0,
-  color: "var(--omnispec-fg-primary)",
-  fontSize: "var(--omnispec-font-size-md)",
-  textOverflow: "ellipsis",
-  whiteSpace: "nowrap"
+  padding: "1rem 1.5rem"
 });
-const xBadgeStyle = css.css({
-  fontSize: "var(--omnispec-font-size-xs)",
-  fontWeight: 600,
-  padding: "0.125rem 0.5rem",
-  borderRadius: "1rem",
-  whiteSpace: "nowrap",
-  flexShrink: 0
+const rightColumnStyle = css.css({
+  width: "26rem",
+  flexShrink: 0,
+  borderLeft: "1px solid var(--omnispec-border-color)",
+  position: "sticky",
+  top: "calc(var(--omnispec-offset-top, 0px) + 1rem)",
+  alignSelf: "flex-start",
+  maxHeight: "calc(100vh - var(--omnispec-offset-top, 0px) - 2rem)",
+  overflowY: "auto"
 });
-const deprecatedBadgeStyle = css.css({
-  fontSize: "10px",
-  color: "var(--omnispec-color-warning)",
+const rightTabBarStyle = css.css({
+  display: "flex",
+  borderBottom: "1px solid var(--omnispec-border-color)"
+});
+const rightTabStyle = css.css({
+  flex: 1,
+  textAlign: "center",
+  padding: "0.625rem 0.5rem",
+  background: "none",
+  border: "none",
+  borderBottom: "0.125rem solid transparent",
+  cursor: "pointer",
+  fontSize: "var(--omnispec-font-size-xs)",
   fontWeight: 600,
+  letterSpacing: "0.04em",
   textTransform: "uppercase",
-  border: "1px solid var(--omnispec-color-warning)",
-  padding: "1px 5px",
-  borderRadius: "3px",
-  flexShrink: 0
-});
-const rightLabelStyle = css.css({
-  fontSize: "var(--omnispec-font-size-sm)",
-  color: "var(--omnispec-fg-muted)",
-  flexShrink: 0,
-  marginLeft: "auto"
+  color: "var(--omnispec-fg-secondary)",
+  "&:hover": {
+    color: "var(--omnispec-fg-primary)"
+  }
 });
-const bodyStyle = css.css({});
-
-const barStyle = css.css({
-  display: "flex",
-  flexWrap: "wrap",
-  alignItems: "center",
-  gap: "12px",
-  padding: "12px 16px",
-  backgroundColor: "rgba(0, 0, 0, 0.02)",
-  borderBottom: "1px solid var(--omnispec-border-color)",
-  overflow: "hidden",
-  maxWidth: "100%"
+const rightTabActiveStyle = css.css({
+  borderBottom: "0.125rem solid var(--omnispec-color-primary)",
+  color: "var(--omnispec-color-primary)"
 });
-const pathStyle = css.css({
-  minWidth: 0,
-  wordBreak: "break-all"
+const rightContentStyle = css.css({
+  padding: "1rem"
 });
-function MethodBar({ label, path, color, method }) {
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: barStyle, children: [
-    /* @__PURE__ */ jsxRuntime.jsx(
-      Badge,
-      {
-        label,
-        variant: method ? "method" : "default",
-        method,
-        color
-      }
-    ),
-    /* @__PURE__ */ jsxRuntime.jsx("code", { className: pathStyle, children: path })
-  ] });
-}
 
 const headerStyle_ = css.css({
   display: "flex",
@@ -7490,6 +7707,7 @@ exports.Collapsible = Collapsible;
 exports.EnumItem = EnumItem;
 exports.EnumLabel = EnumLabel;
 exports.EnumList = EnumList;
+exports.ExampleSelector = ExampleSelector;
 exports.ExpandProvider = ExpandProvider;
 exports.ExpandableCard = ExpandableCard;
 exports.FieldDescription = FieldDescription;
@@ -7506,6 +7724,7 @@ exports.PropName = PropName;
 exports.PropReq = PropReq;
 exports.PropRequiredStar = PropRequiredStar;
 exports.PropType = PropType;
+exports.ReferenceLayout = ReferenceLayout;
 exports.SchemaBadge = SchemaBadge;
 exports.SchemaPropChildren = SchemaPropChildren;
 exports.SchemaPropRow = SchemaPropRow;
@@ -7518,10 +7737,11 @@ exports.Tabs = Tabs;
 exports.buildConstraints = buildConstraints;
 exports.flattenNavItemIds = flattenNavItemIds;
 exports.generateExample = generateExample;
+exports.getNamedExamples = getNamedExamples;
 exports.requestExpand = requestExpand;
 exports.resolveDownloadLink = resolveDownloadLink;
 exports.schemaToNodes = schemaToNodes;
 exports.useExpandAll = useExpandAll;
 exports.useHashScroll = useHashScroll;
 exports.useScrollSpy = useScrollSpy;
-//# sourceMappingURL=Collapsible-BHAHk_Ep.js.map
+//# sourceMappingURL=Collapsible-BTWyDBkX.js.map