@apiboost/omnispec 1.0.0 → 1.1.0-next.2

package/dist/esm/chunks/{Collapsible-DA6-nS46.js → Collapsible-MyJB2agz.js}

@@ -1,7 +1,7 @@
-import { useContext, createContext, useMemo, useState, useEffect, useCallback, useRef, memo } from 'react';
+import { useContext, createContext, useMemo, useState, useEffect, useCallback, memo, useRef } from 'react';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { css, cx } from '@emotion/css';
-import { m as mq, B as Button, I as Icon, j as useConfig } from './useSpecFetcher-CZvAnU7Z.js';
+import { m as mq, B as Button, I as Icon, j as useConfig } from './useSpecFetcher-BvVfMuzf.js';
 import styled from '@emotion/styled';
 
 const ExpandContext = createContext({ expandAll: false, expandGeneration: 0 });
@@ -57,6 +57,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";
+  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 = 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] = useState("");
   const handleChange = useCallback((e) => {
@@ -64,7 +108,7 @@ function SearchBar({ placeholder = "Search...", onSearch }) {
     setValue(query);
     onSearch(query);
   }, [onSearch]);
-  return /* @__PURE__ */ jsx("div", { className: `omnispec-search ${containerStyle$4}`, children: /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx("div", { className: `omnispec-search ${containerStyle$5}`, children: /* @__PURE__ */ jsx(
     "input",
     {
       type: "text",
@@ -76,7 +120,7 @@ function SearchBar({ placeholder = "Search...", onSearch }) {
     }
   ) });
 }
-const containerStyle$4 = css({
+const containerStyle$5 = css({
   padding: "12px"
 });
 const inputStyle = css({
@@ -102,7 +146,7 @@ function SpecToolbar({
   onToggleExpand,
   downloadLink
 }) {
-  return /* @__PURE__ */ jsxs("div", { className: containerStyle$3, children: [
+  return /* @__PURE__ */ jsxs("div", { className: containerStyle$4, children: [
     /* @__PURE__ */ jsx("div", { className: overviewWrapStyle, children: overview }),
     /* @__PURE__ */ jsxs("div", { className: actionsStyle, children: [
       versionBadge && /* @__PURE__ */ jsx("div", { className: mobileBadgeStyle, children: versionBadge }),
@@ -127,7 +171,7 @@ function SpecToolbar({
     ] })
   ] });
 }
-const containerStyle$3 = css({
+const containerStyle$4 = css({
   display: "flex",
   alignItems: "flex-start",
   justifyContent: "space-between",
@@ -2451,7 +2495,7 @@ marked.setOptions({
   breaks: false,
   gfm: true
 });
-const containerStyle$2 = css({
+const containerStyle$3 = css({
   color: "var(--omnispec-fg-primary)",
   fontSize: "var(--omnispec-font-size-base)",
   lineHeight: 1.6
@@ -2464,7 +2508,7 @@ function MarkdownRenderer({ content, className }) {
   return /* @__PURE__ */ jsx(
     "div",
     {
-      className: cx("omnispec-markdown", containerStyle$2, className),
+      className: cx("omnispec-markdown", containerStyle$3, className),
       dangerouslySetInnerHTML: { __html: html }
     }
   );
@@ -3606,6 +3650,187 @@ function generateNumberExample(format, minimum) {
   }
 }
 
+const ExpandableCard = memo(function ExpandableCard2({
+  id,
+  title,
+  rightLabel,
+  deprecated,
+  badges,
+  expandAll,
+  expandGeneration,
+  children
+}) {
+  const { defaultExpandOperations } = useConfig();
+  const [expanded, setExpanded] = useState(defaultExpandOperations);
+  const [nearViewport, setNearViewport] = useState(false);
+  const containerRef = useRef(null);
+  const ctx = useExpandAll();
+  const effectiveExpandAll = expandAll ?? ctx.expandAll;
+  const effectiveGeneration = expandGeneration ?? ctx.expandGeneration;
+  useEffect(() => {
+    if (effectiveGeneration > 0) {
+      setExpanded(!!effectiveExpandAll);
+    }
+  }, [effectiveExpandAll, effectiveGeneration]);
+  useEffect(() => {
+    if (!id) return;
+    return onExpandRequest(id, () => setExpanded(true));
+  }, [id]);
+  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 = useCallback(() => {
+    setExpanded((prev) => !prev);
+  }, []);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: containerRef,
+      id,
+      className: cx(
+        "omnispec-expandable-card",
+        containerStyle$2,
+        deprecated ? deprecatedStyle : void 0
+      ),
+      children: [
+        /* @__PURE__ */ jsxs(
+          "button",
+          {
+            type: "button",
+            onClick: handleClick,
+            className: cx(headerStyle$2, expanded ? headerExpandedStyle : void 0),
+            "aria-expanded": expanded,
+            children: [
+              /* @__PURE__ */ jsx("span", { className: cx(chevronStyle, expanded && chevronExpandedStyle), children: /* @__PURE__ */ jsx(Icon, { name: "chevron-right", size: "0.75rem" }) }),
+              badges?.filter((b) => b.position === "before").map((b) => /* @__PURE__ */ 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__ */ jsx("span", { className: titleStyle$1, children: title }),
+              badges?.filter((b) => b.position !== "before").map((b) => /* @__PURE__ */ 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__ */ jsx("span", { className: deprecatedBadgeStyle, children: "Deprecated" }),
+              rightLabel && /* @__PURE__ */ jsx("span", { className: rightLabelStyle, children: rightLabel })
+            ]
+          }
+        ),
+        shouldRender && /* @__PURE__ */ jsx("div", { className: bodyStyle, children })
+      ]
+    }
+  );
+});
+const containerStyle$2 = css({
+  marginBottom: "0.75rem",
+  maxWidth: "100%",
+  borderRadius: "0.5rem",
+  [mq.desktop]: {
+    border: "1px solid var(--omnispec-border-color)",
+    borderRadius: "0.5rem"
+  }
+});
+const deprecatedStyle = css({
+  opacity: 0.6
+});
+const headerStyle$2 = 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",
+  [mq.desktop]: {
+    padding: "1rem"
+  }
+});
+const headerExpandedStyle = css({});
+const chevronStyle = css({
+  color: "var(--omnispec-fg-muted)",
+  flexShrink: 0,
+  transition: "transform 0.2s ease"
+});
+const chevronExpandedStyle = css({
+  transform: "rotate(90deg)"
+});
+const titleStyle$1 = 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({
+  fontSize: "var(--omnispec-font-size-xs)",
+  fontWeight: 600,
+  padding: "0.125rem 0.5rem",
+  borderRadius: "1rem",
+  whiteSpace: "nowrap",
+  flexShrink: 0
+});
+const deprecatedBadgeStyle = 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({
+  fontSize: "var(--omnispec-font-size-sm)",
+  color: "var(--omnispec-fg-muted)",
+  flexShrink: 0,
+  marginLeft: "auto"
+});
+const bodyStyle = css({});
+
+const barStyle = 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({
+  minWidth: 0,
+  wordBreak: "break-all"
+});
+function MethodBar({ label, path, color, method }) {
+  return /* @__PURE__ */ jsxs("div", { className: barStyle, children: [
+    /* @__PURE__ */ jsx(
+      Badge,
+      {
+        label,
+        variant: method ? "method" : "default",
+        method,
+        color
+      }
+    ),
+    /* @__PURE__ */ 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) {
@@ -6998,9 +7223,9 @@ function CodeBlock({
   }, [code]);
   const hasHeader = title || showCopy || headerLeft;
   return /* @__PURE__ */ jsxs("div", { className: cx("omnispec-code-block", containerStyle$1), children: [
-    hasHeader && /* @__PURE__ */ jsxs("div", { className: headerStyle$2, children: [
+    hasHeader && /* @__PURE__ */ jsxs("div", { className: headerStyle$1, children: [
       /* @__PURE__ */ jsxs("div", { className: headerLeftStyle, children: [
-        title && /* @__PURE__ */ jsx("span", { className: titleStyle$1, children: title }),
+        title && /* @__PURE__ */ jsx("span", { className: titleStyle, children: title }),
         headerLeft
       ] }),
       showCopy && /* @__PURE__ */ jsx(
@@ -7050,7 +7275,7 @@ const containerStyle$1 = css({
     border: "1px solid var(--omnispec-border-color)"
   }
 });
-const headerStyle$2 = css({
+const headerStyle$1 = css({
   display: "flex",
   justifyContent: "space-between",
   alignItems: "center",
@@ -7067,7 +7292,7 @@ const headerLeftStyle = css({
   minWidth: 0,
   overflow: "hidden"
 });
-const titleStyle$1 = css({
+const titleStyle = css({
   fontFamily: "var(--omnispec-font-mono)",
   fontSize: "var(--omnispec-font-size-xs)",
   color: "var(--omnispec-fg-muted)",
@@ -7098,7 +7323,7 @@ const preStyle = css({
   }
 });
 
-const headerStyle$1 = css({
+const headerStyle = css({
   display: "flex",
   gap: "0.125rem",
   marginBottom: "-1px",
@@ -7157,7 +7382,7 @@ function Tabs({ tabs, defaultTab, flush = false }) {
   const [activeTab, setActiveTab] = useState(defaultTab ?? tabs[0]?.id ?? "");
   const activeContent = tabs.find((t) => t.id === activeTab)?.content;
   return /* @__PURE__ */ jsxs("div", { className: "omnispec-tabs", children: [
-    /* @__PURE__ */ jsx("div", { className: cx(headerStyle$1, flush && flushHeaderStyle), role: "tablist", children: tabs.map((tab) => /* @__PURE__ */ jsx(
+    /* @__PURE__ */ jsx("div", { className: cx(headerStyle, flush && flushHeaderStyle), role: "tablist", children: tabs.map((tab) => /* @__PURE__ */ jsx(
       "button",
       {
         type: "button",
@@ -7177,230 +7402,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";
-  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__ */ jsxs("div", { className: containerStyle, children: [
+    /* @__PURE__ */ jsx("label", { htmlFor: "example-selector", className: labelStyle, children: "Example:" }),
+    /* @__PURE__ */ jsx(
+      "select",
+      {
+        id: "example-selector",
+        value: selectedName,
+        onChange: (e) => onSelect(e.target.value),
+        className: selectStyle,
+        children: examples.map((example) => /* @__PURE__ */ 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 = 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({
+  display: "flex",
+  alignItems: "center",
+  gap: "0.5rem",
+  marginBottom: "0.75rem"
+});
+const labelStyle = css({
+  fontSize: "var(--omnispec-font-size-xs)",
+  fontWeight: 600,
+  color: "var(--omnispec-fg-muted)",
+  textTransform: "uppercase",
+  letterSpacing: "0.5px",
+  whiteSpace: "nowrap"
+});
+const selectStyle = 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 = memo(function ExpandableCard2({
-  id,
-  title,
-  rightLabel,
-  deprecated,
-  badges,
-  expandAll,
-  expandGeneration,
-  children
-}) {
-  const { defaultExpandOperations } = useConfig();
-  const [expanded, setExpanded] = useState(defaultExpandOperations);
-  const [nearViewport, setNearViewport] = useState(false);
-  const containerRef = useRef(null);
-  const ctx = useExpandAll();
-  const effectiveExpandAll = expandAll ?? ctx.expandAll;
-  const effectiveGeneration = expandGeneration ?? ctx.expandGeneration;
-  useEffect(() => {
-    if (effectiveGeneration > 0) {
-      setExpanded(!!effectiveExpandAll);
-    }
-  }, [effectiveExpandAll, effectiveGeneration]);
-  useEffect(() => {
-    if (!id) return;
-    return onExpandRequest(id, () => setExpanded(true));
-  }, [id]);
-  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] = useState("samples");
+  const [mobileTab, setMobileTab] = useState("schema");
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs("div", { className: mobileWrapperStyle, children: [
+      /* @__PURE__ */ jsx("div", { className: mobileTabBarStyle, role: "tablist", children: MOBILE_TABS.map((tab) => /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          role: "tab",
+          "aria-selected": mobileTab === tab.id,
+          "aria-controls": `mobile-panel-${operationId}-${tab.id}`,
+          onClick: () => setMobileTab(tab.id),
+          className: cx(mobileTabStyle, mobileTab === tab.id ? mobileTabActiveStyle : void 0),
+          children: tab.label
+        },
+        tab.id
+      )) }),
+      /* @__PURE__ */ 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 = useCallback(() => {
-    setExpanded((prev) => !prev);
-  }, []);
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      ref: containerRef,
-      id,
-      className: cx(
-        "omnispec-expandable-card",
-        containerStyle,
-        deprecated ? deprecatedStyle : void 0
-      ),
-      children: [
-        /* @__PURE__ */ jsxs(
+      )
+    ] }, `mobile-${operationId}`),
+    /* @__PURE__ */ jsxs("div", { className: desktopWrapperStyle, children: [
+      /* @__PURE__ */ jsx("div", { className: leftColumnStyle, children: schema }),
+      /* @__PURE__ */ jsxs("div", { className: rightColumnStyle, children: [
+        /* @__PURE__ */ jsx("div", { className: rightTabBarStyle, role: "tablist", children: RIGHT_TABS.map((tab) => /* @__PURE__ */ jsx(
           "button",
           {
             type: "button",
-            onClick: handleClick,
-            className: 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: cx(rightTabStyle, rightTab === tab.id ? rightTabActiveStyle : void 0),
+            children: tab.label
+          },
+          tab.id
+        )) }),
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            id: `right-panel-${operationId}-${rightTab}`,
+            className: rightContentStyle,
+            role: "tabpanel",
             children: [
-              /* @__PURE__ */ jsx("span", { className: cx(chevronStyle, expanded && chevronExpandedStyle), children: /* @__PURE__ */ jsx(Icon, { name: "chevron-right", size: "0.75rem" }) }),
-              badges?.filter((b) => b.position === "before").map((b) => /* @__PURE__ */ 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__ */ jsx("span", { className: titleStyle, children: title }),
-              badges?.filter((b) => b.position !== "before").map((b) => /* @__PURE__ */ 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__ */ jsx("span", { className: deprecatedBadgeStyle, children: "Deprecated" }),
-              rightLabel && /* @__PURE__ */ jsx("span", { className: rightLabelStyle, children: rightLabel })
+              rightTab === "samples" && samples,
+              rightTab === "try-it" && tryIt
             ]
           }
-        ),
-        shouldRender && /* @__PURE__ */ jsx("div", { className: bodyStyle, children })
-      ]
-    }
-  );
-});
-const containerStyle = css({
-  marginBottom: "0.75rem",
-  maxWidth: "100%",
-  borderRadius: "0.5rem",
+        )
+      ] })
+    ] }, `desktop-${operationId}`)
+  ] });
+}
+const mobileWrapperStyle = css({
+  display: "block",
   [mq.desktop]: {
-    border: "1px solid var(--omnispec-border-color)",
-    borderRadius: "0.5rem"
+    display: "none"
   }
 });
-const deprecatedStyle = css({
-  opacity: 0.6
-});
-const headerStyle = css({
+const mobileTabBarStyle = 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({
+  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",
-  [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({});
-const chevronStyle = css({
-  color: "var(--omnispec-fg-muted)",
-  flexShrink: 0,
-  transition: "transform 0.2s ease"
+const mobileTabActiveStyle = css({
+  borderBottom: "0.125rem solid var(--omnispec-color-primary)",
+  color: "var(--omnispec-color-primary)"
 });
-const chevronExpandedStyle = css({
-  transform: "rotate(90deg)"
+const mobileContentStyle = css({
+  padding: "1rem 0"
 });
-const titleStyle = css({
-  fontWeight: 600,
+const desktopWrapperStyle = css({
+  display: "none",
+  [mq.desktop]: {
+    display: "flex",
+    alignItems: "flex-start"
+  }
+});
+const leftColumnStyle = 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({
-  fontSize: "var(--omnispec-font-size-xs)",
-  fontWeight: 600,
-  padding: "0.125rem 0.5rem",
-  borderRadius: "1rem",
-  whiteSpace: "nowrap",
-  flexShrink: 0
+const rightColumnStyle = 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({
-  fontSize: "10px",
-  color: "var(--omnispec-color-warning)",
+const rightTabBarStyle = css({
+  display: "flex",
+  borderBottom: "1px solid var(--omnispec-border-color)"
+});
+const rightTabStyle = 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({
-  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({});
-
-const barStyle = 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({
+  borderBottom: "0.125rem solid var(--omnispec-color-primary)",
+  color: "var(--omnispec-color-primary)"
 });
-const pathStyle = css({
-  minWidth: 0,
-  wordBreak: "break-all"
+const rightContentStyle = css({
+  padding: "1rem"
 });
-function MethodBar({ label, path, color, method }) {
-  return /* @__PURE__ */ jsxs("div", { className: barStyle, children: [
-    /* @__PURE__ */ jsx(
-      Badge,
-      {
-        label,
-        variant: method ? "method" : "default",
-        method,
-        color
-      }
-    ),
-    /* @__PURE__ */ jsx("code", { className: pathStyle, children: path })
-  ] });
-}
 
 const headerStyle_ = css({
   display: "flex",
@@ -7478,5 +7695,5 @@ function Collapsible({ title, children, defaultOpen = false, headerStyle, expand
   ] });
 }
 
-export { schemaToNodes as A, Badge as B, CodeBlock as C, useHashScroll as D, EnumItem as E, FieldDescription as F, useScrollSpy as G, ExpandProvider as H, useExpandAll as I, buildConstraints as J, MarkdownRenderer as M, PresentationChildren as P, SchemaBadge as S, Tabs as T, Collapsible as a, EnumLabel as b, EnumList as c, ExpandableCard as d, FieldName as e, MethodBar as f, PresentationContainer as g, PresentationRow as h, PropDefault as i, PropDesc as j, PropFormat as k, PropName as l, PropReq as m, PropRequiredStar as n, PropType as o, SchemaPropChildren as p, SchemaPropRow as q, SchemaRefLink as r, SchemaSectionTitle as s, SchemaTree as t, SearchBar as u, SpecToolbar as v, flattenNavItemIds as w, generateExample as x, requestExpand as y, resolveDownloadLink as z };
-//# sourceMappingURL=Collapsible-DA6-nS46.js.map
+export { schemaToNodes as A, Badge as B, CodeBlock as C, useHashScroll as D, EnumItem as E, FieldDescription as F, useScrollSpy as G, useExpandAll as H, getNamedExamples as I, ExampleSelector as J, buildConstraints as K, ExpandProvider as L, MarkdownRenderer as M, PresentationChildren as P, ReferenceLayout as R, SchemaBadge as S, Tabs as T, Collapsible as a, EnumLabel as b, EnumList as c, ExpandableCard as d, FieldName as e, MethodBar as f, PresentationContainer as g, PresentationRow as h, PropDefault as i, PropDesc as j, PropFormat as k, PropName as l, PropReq as m, PropRequiredStar as n, PropType as o, SchemaPropChildren as p, SchemaPropRow as q, SchemaRefLink as r, SchemaSectionTitle as s, SchemaTree as t, SearchBar as u, SpecToolbar as v, flattenNavItemIds as w, generateExample as x, requestExpand as y, resolveDownloadLink as z };
+//# sourceMappingURL=Collapsible-MyJB2agz.js.map