@openpkg-ts/ui 0.3.2 → 0.5.0

package/dist/docskit/index.js

@@ -1,8 +1,6 @@
 "use client";
 // src/docskit/api/api-code-panel.tsx
-import { highlight, Pre } from "codehike/code";
-import { Check, Copy, ExternalLink } from "lucide-react";
-import { useEffect as useEffect2, useState as useState4 } from "react";
+import { useState as useState5 } from "react";
 
 // src/lib/utils.ts
 import { clsx } from "clsx";
@@ -11,20 +9,41 @@ function cn(...inputs) {
   return twMerge(clsx(inputs));
 }
 
-// src/hooks/use-copy-to-clipboard.ts
-import { useCallback, useRef, useState } from "react";
-var COPY_FEEDBACK_MS = 1200;
-function useCopyToClipboard(timeout = COPY_FEEDBACK_MS) {
-  const [copied, setCopied] = useState(false);
-  const timerRef = useRef();
-  const copy = useCallback((text) => {
-    navigator.clipboard.writeText(text).then(() => {
-      setCopied(true);
-      clearTimeout(timerRef.current);
-      timerRef.current = setTimeout(() => setCopied(false), timeout);
-    });
-  }, [timeout]);
-  return [copied, copy];
+// src/docskit/code.client-highlight.tsx
+import {
+  highlight,
+  Inline,
+  Pre
+} from "codehike/code";
+import { useEffect, useState as useState3 } from "react";
+
+// src/hooks/use-local-storage.ts
+import React from "react";
+function useStateOrLocalStorage(key, initialState) {
+  const [state, setState] = React.useState(initialState);
+  React.useLayoutEffect(() => {
+    if (!key)
+      return;
+    const storedValue = window.localStorage.getItem(key);
+    if (storedValue != null) {
+      setState(storedValue);
+    }
+    const onStorageChange = (e) => {
+      if (e.key === key) {
+        const storedValue2 = window.localStorage.getItem(key);
+        setState(storedValue2 || initialState);
+      }
+    };
+    window.addEventListener("storage", onStorageChange);
+    return () => window.removeEventListener("storage", onStorageChange);
+  }, [key, initialState]);
+  const setStorage = !key ? setState : (value) => {
+    if (typeof window !== "undefined") {
+      window.localStorage.setItem(key, value);
+      window.dispatchEvent(new StorageEvent("storage", { key }));
+    }
+  };
+  return [state, setStorage];
 }
 
 // src/docskit/code.config.ts
@@ -50,43 +69,77 @@ function flagsToOptions(flags = "") {
   return options;
 }
 
+// src/docskit/code.copy.tsx
+import { Check, Copy } from "lucide-react";
+import { useState } from "react";
+import { jsx } from "react/jsx-runtime";
+
+function CopyButton({
+  text,
+  className,
+  variant = "floating"
+}) {
+  const [copied, setCopied] = useState(false);
+  return /* @__PURE__ */ jsx("button", {
+    type: "button",
+    className: cn("cursor-pointer transition-opacity duration-200", variant === "floating" && [
+      "size-8 flex items-center justify-center",
+      "rounded border border-openpkg-code-border bg-openpkg-code-bg",
+      "opacity-0 group-hover:opacity-100"
+    ], variant === "inline" && "rounded", className),
+    onClick: () => {
+      navigator.clipboard.writeText(text);
+      setCopied(true);
+      setTimeout(() => setCopied(false), 1200);
+    },
+    "aria-label": "Copy to clipboard",
+    children: copied ? /* @__PURE__ */ jsx(Check, {
+      size: 16,
+      className: "block"
+    }) : /* @__PURE__ */ jsx(Copy, {
+      size: 16,
+      className: "block"
+    })
+  });
+}
+
 // src/docskit/callout.tsx
 import { InnerLine } from "codehike/code";
 
 // src/docskit/notes.client.tsx
-import React from "react";
-import { jsx } from "react/jsx-runtime";
+import React2 from "react";
+import { jsx as jsx2 } from "react/jsx-runtime";
 
-var NotesContext = React.createContext([]);
+var NotesContext = React2.createContext([]);
 function WithClientNotes({ children, notes }) {
-  return /* @__PURE__ */ jsx(NotesContext.Provider, {
+  return /* @__PURE__ */ jsx2(NotesContext.Provider, {
     value: notes,
     children
   });
 }
 function useNotesContext(n) {
-  return React.useContext(NotesContext).find(({ name }) => name === n);
+  return React2.useContext(NotesContext).find(({ name }) => name === n);
 }
 
 // src/docskit/callout.client.tsx
-import { jsx as jsx2 } from "react/jsx-runtime";
+import { jsx as jsx3 } from "react/jsx-runtime";
 
 function CalloutClient({ name }) {
   const note = useNotesContext(name);
   if (note?.type === "code") {
-    return /* @__PURE__ */ jsx2("div", {
+    return /* @__PURE__ */ jsx3("div", {
       className: "prose-no-margin [&>div]:!border-none [&>div]:!my-0 [&>div>pre]:!bg-transparent",
       children: note.children
     });
   }
-  return /* @__PURE__ */ jsx2("div", {
+  return /* @__PURE__ */ jsx3("div", {
     className: "px-2 prose dark:prose-invert",
     children: note ? note.children : name
   });
 }
 
 // src/docskit/callout.tsx
-import { jsx as jsx3, jsxs } from "react/jsx-runtime";
+import { jsx as jsx4, jsxs } from "react/jsx-runtime";
 var callout = {
   name: "callout",
   transform: (annotation) => {
@@ -115,16 +168,16 @@ var callout = {
             marginLeft: `${indentation}ch`,
             border: "1px solid var(--ch-23)"
           },
-          className: "w-fit bg-dk-tabs-background rounded px-0 relative my-1 whitespace-break-spaces select-none",
+          className: "w-fit bg-openpkg-code-header rounded px-0 relative my-1 whitespace-break-spaces select-none",
           children: [
-            /* @__PURE__ */ jsx3("div", {
+            /* @__PURE__ */ jsx4("div", {
               style: {
                 left: `${column - indentation - 1}ch`,
                 borderColor: "var(--ch-23)"
               },
-              className: "absolute border-l border-t  w-2 h-2 rotate-45 -translate-y-1/2 -top-[1px] bg-dk-tabs-background"
+              className: "absolute border-l border-t  w-2 h-2 rotate-45 -translate-y-1/2 -top-[1px] bg-openpkg-code-header"
             }),
-            /* @__PURE__ */ jsx3(CalloutClient, {
+            /* @__PURE__ */ jsx4(CalloutClient, {
               name: annotation.query
             })
           ]
@@ -136,17 +189,17 @@ var callout = {
 
 // src/docskit/code.line.tsx
 import { InnerLine as InnerLine2 } from "codehike/code";
-import { jsx as jsx4 } from "react/jsx-runtime";
+import { jsx as jsx5 } from "react/jsx-runtime";
 var line = {
   name: "line",
   Line: ({ annotation, ...props }) => {
-    return /* @__PURE__ */ jsx4("div", {
+    return /* @__PURE__ */ jsx5("div", {
       style: {
-        borderLeftColor: "var(--dk-line-border, transparent)",
-        backgroundColor: "var(--dk-line-bg, transparent)"
+        borderLeftColor: "var(--openpkg-line-border, transparent)",
+        backgroundColor: "var(--openpkg-line-bg, transparent)"
       },
       className: "flex border-l-2 border-l-transparent background-color 0.3s ease",
-      children: /* @__PURE__ */ jsx4(InnerLine2, {
+      children: /* @__PURE__ */ jsx5(InnerLine2, {
         merge: props,
         className: "px-3 flex-1"
       })
@@ -160,10 +213,10 @@ import { ChevronDownIcon } from "lucide-react";
 
 // src/collapsible/collapsible.tsx
 import * as CollapsiblePrimitive from "@radix-ui/react-collapsible";
-import { jsx as jsx5 } from "react/jsx-runtime";
+import { jsx as jsx6 } from "react/jsx-runtime";
 
 function Collapsible({ ...props }) {
-  return /* @__PURE__ */ jsx5(CollapsiblePrimitive.Root, {
+  return /* @__PURE__ */ jsx6(CollapsiblePrimitive.Root, {
     "data-slot": "collapsible",
     ...props
   });
@@ -171,7 +224,7 @@ function Collapsible({ ...props }) {
 function CollapsibleTrigger2({
   ...props
 }) {
-  return /* @__PURE__ */ jsx5(CollapsiblePrimitive.CollapsibleTrigger, {
+  return /* @__PURE__ */ jsx6(CollapsiblePrimitive.CollapsibleTrigger, {
     "data-slot": "collapsible-trigger",
     ...props
   });
@@ -179,14 +232,14 @@ function CollapsibleTrigger2({
 function CollapsibleContent2({
   ...props
 }) {
-  return /* @__PURE__ */ jsx5(CollapsiblePrimitive.CollapsibleContent, {
+  return /* @__PURE__ */ jsx6(CollapsiblePrimitive.CollapsibleContent, {
     "data-slot": "collapsible-content",
     ...props
   });
 }
 
 // src/docskit/collapse.tsx
-import { jsx as jsx6, jsxs as jsxs2 } from "react/jsx-runtime";
+import { jsx as jsx7, jsxs as jsxs2 } from "react/jsx-runtime";
 var collapseRoot = {
   name: "collapse",
   transform: (annotation) => {
@@ -207,22 +260,22 @@ var collapseRoot = {
     ];
   },
   Block: ({ annotation, children }) => {
-    return /* @__PURE__ */ jsx6(Collapsible, {
+    return /* @__PURE__ */ jsx7(Collapsible, {
       defaultOpen: annotation.query !== "collapsed",
       children
     });
   }
 };
-var icon = /* @__PURE__ */ jsx6(ChevronDownIcon, {
+var icon = /* @__PURE__ */ jsx7(ChevronDownIcon, {
   className: "inline-block group-data-[state=closed]:-rotate-90 transition select-none opacity-30 group-data-[state=closed]:opacity-80 group-hover:!opacity-100 mb-0.5 ml-1 -mr-1 ",
   size: 15
 });
 var collapseTrigger = {
   name: "CollapseTrigger",
   onlyIfAnnotated: true,
-  AnnotatedLine: ({ annotation, ...props }) => /* @__PURE__ */ jsx6(CollapsibleTrigger2, {
+  AnnotatedLine: ({ annotation, ...props }) => /* @__PURE__ */ jsx7(CollapsibleTrigger2, {
     className: "group contents",
-    children: /* @__PURE__ */ jsx6(InnerLine3, {
+    children: /* @__PURE__ */ jsx7(InnerLine3, {
       merge: props,
       data: { icon }
     })
@@ -232,13 +285,13 @@ var collapseTrigger = {
     return /* @__PURE__ */ jsxs2("div", {
       className: "table-row",
       children: [
-        /* @__PURE__ */ jsx6("span", {
+        /* @__PURE__ */ jsx7("span", {
           className: "w-4 text-center table-cell",
           children: icon2
         }),
-        /* @__PURE__ */ jsx6("div", {
+        /* @__PURE__ */ jsx7("div", {
           className: "table-cell",
-          children: /* @__PURE__ */ jsx6(InnerLine3, {
+          children: /* @__PURE__ */ jsx7(InnerLine3, {
             merge: props
           })
         })
@@ -254,27 +307,27 @@ var collapse = [collapseRoot, collapseTrigger, collapseContent];
 
 // src/docskit/diff.tsx
 import { InnerLine as InnerLine4 } from "codehike/code";
-import { jsx as jsx7, jsxs as jsxs3, Fragment } from "react/jsx-runtime";
+import { jsx as jsx8, jsxs as jsxs3, Fragment } from "react/jsx-runtime";
 var diff = {
   name: "diff",
   onlyIfAnnotated: true,
   Block: ({ annotation, children }) => {
     const color = annotation.query === "-" ? "#f85149" : "#3fb950";
-    return /* @__PURE__ */ jsx7("div", {
+    return /* @__PURE__ */ jsx8("div", {
       style: {
-        ["--dk-line-bg"]: `rgb(from ${color} r g b / 0.13)`,
-        ["--dk-line-border"]: color
+        ["--openpkg-line-bg"]: `rgb(from ${color} r g b / 0.13)`,
+        ["--openpkg-line-border"]: color
       },
       children
     });
   },
   Line: ({ annotation, ...props }) => /* @__PURE__ */ jsxs3(Fragment, {
     children: [
-      /* @__PURE__ */ jsx7("div", {
+      /* @__PURE__ */ jsx8("div", {
         className: "min-w-[1ch] box-content opacity-70 pl-2 select-none",
         children: annotation?.query
       }),
-      /* @__PURE__ */ jsx7(InnerLine4, {
+      /* @__PURE__ */ jsx8(InnerLine4, {
         merge: props
       })
     ]
@@ -282,7 +335,7 @@ var diff = {
 };
 
 // src/docskit/expandable.tsx
-import { jsx as jsx8, jsxs as jsxs4 } from "react/jsx-runtime";
+import { jsx as jsx9, jsxs as jsxs4 } from "react/jsx-runtime";
 var expandable = {
   name: "expandable",
   transform: (annotation) => {
@@ -291,14 +344,14 @@ var expandable = {
   Block: ({ children }) => {
     return /* @__PURE__ */ jsxs4(Collapsible, {
       children: [
-        /* @__PURE__ */ jsx8(CollapsibleTrigger2, {
-          className: "h-24 w-full translate-y-[-75%] absolute bg-gradient-to-b from-dk-background/0 via-dk-background/80 to-dk-background data-[state=open]:invisible",
-          children: /* @__PURE__ */ jsx8("div", {
+        /* @__PURE__ */ jsx9(CollapsibleTrigger2, {
+          className: "h-24 w-full translate-y-[-75%] absolute bg-gradient-to-b from-openpkg-code-bg/0 via-openpkg-code-bg/80 to-openpkg-code-bg data-[state=open]:invisible",
+          children: /* @__PURE__ */ jsx9("div", {
             className: "pt-6",
             children: "Expand"
           })
         }),
-        /* @__PURE__ */ jsx8(CollapsibleContent2, {
+        /* @__PURE__ */ jsx9(CollapsibleContent2, {
           children
         })
       ]
@@ -311,7 +364,7 @@ import {
   InnerLine as InnerLine5
 } from "codehike/code";
 import { createContext, useContext, useState as useState2 } from "react";
-import { jsx as jsx9 } from "react/jsx-runtime";
+import { jsx as jsx10 } from "react/jsx-runtime";
 
 var HoverContext = createContext({
   hoveredNames: [],
@@ -326,7 +379,7 @@ function HoverProvider({ children }) {
   const removeHoveredName = (name) => {
     setHoveredNames((prev) => prev.filter((n) => n !== name));
   };
-  return /* @__PURE__ */ jsx9(HoverContext.Provider, {
+  return /* @__PURE__ */ jsx10(HoverContext.Provider, {
     value: { hoveredNames, addHoveredName, removeHoveredName },
     children
   });
@@ -339,7 +392,7 @@ function Hoverable({
 }) {
   const { addHoveredName, removeHoveredName, hoveredNames } = useContext(HoverContext);
   const isHovered = hoveredNames.length > 0 && hoveredNames[hoveredNames.length - 1] === name;
-  return /* @__PURE__ */ jsx9("span", {
+  return /* @__PURE__ */ jsx10("span", {
     className,
     onMouseEnter: () => addHoveredName(name),
     onMouseLeave: () => removeHoveredName(name),
@@ -353,10 +406,10 @@ var HoverBlock = ({ annotation, children }) => {
   const name = annotation?.query;
   const isHovered = name && hoveredNames[hoveredNames.length - 1] === name;
   const style = isHovered && !annotation.data?.inline ? {
-    ["--dk-line-bg"]: `rgb(from ${color} r g b / 0.13)`,
-    ["--dk-line-border"]: color
+    ["--openpkg-line-bg"]: `rgb(from ${color} r g b / 0.13)`,
+    ["--openpkg-line-border"]: color
   } : undefined;
-  return /* @__PURE__ */ jsx9("div", {
+  return /* @__PURE__ */ jsx10("div", {
     style,
     children
   });
@@ -369,7 +422,7 @@ var HoverLine = ({ annotation, ...props }) => {
   const name = annotation?.query;
   const isHovered = name && hoveredNames[hoveredNames.length - 1] === name;
   const opacity = isHovered ? 1 : prevOpacity ? prevOpacity : anyHovered ? 0.5 : 1;
-  return /* @__PURE__ */ jsx9(InnerLine5, {
+  return /* @__PURE__ */ jsx10(InnerLine5, {
     merge: props,
     style: {
       opacity,
@@ -380,7 +433,7 @@ var HoverLine = ({ annotation, ...props }) => {
 var HoverInline = ({ annotation, children }) => {
   const { hoveredNames } = useContext(HoverContext);
   const isHovered = hoveredNames[hoveredNames.length - 1] === annotation.query;
-  return /* @__PURE__ */ jsx9("span", {
+  return /* @__PURE__ */ jsx10("span", {
     className: "rounded px-0.5 py-0 -mx-0.5",
     style: {
       transition: "background-color 0.3s ease, box-shadow 0.3s ease",
@@ -392,15 +445,15 @@ var HoverInline = ({ annotation, children }) => {
 };
 
 // src/docskit/hover.tsx
-import { jsx as jsx10 } from "react/jsx-runtime";
+import { jsx as jsx11 } from "react/jsx-runtime";
 function WithHover(props) {
-  return /* @__PURE__ */ jsx10(HoverProvider, {
+  return /* @__PURE__ */ jsx11(HoverProvider, {
     children: props.children
   });
 }
 function HoverLink(props) {
   const hover = props.href?.slice("hover:".length) ?? "";
-  return /* @__PURE__ */ jsx10(Hoverable, {
+  return /* @__PURE__ */ jsx11(Hoverable, {
     className: "underline decoration-dotted underline-offset-4 inline cursor-help",
     name: hover,
     children: props.children
@@ -429,19 +482,19 @@ var hover = {
 
 // src/docskit/line-numbers.tsx
 import { InnerLine as InnerLine6 } from "codehike/code";
-import { jsx as jsx11, jsxs as jsxs5, Fragment as Fragment2 } from "react/jsx-runtime";
+import { jsx as jsx12, jsxs as jsxs5, Fragment as Fragment2 } from "react/jsx-runtime";
 var lineNumbers = {
   name: "line-numbers",
   Line: (props) => {
     const width = props.totalLines.toString().length + 1;
     return /* @__PURE__ */ jsxs5(Fragment2, {
       children: [
-        /* @__PURE__ */ jsx11("span", {
+        /* @__PURE__ */ jsx12("span", {
           style: { minWidth: `${width}ch` },
-          className: "text-right text-dk-line-number select-none mr-1",
+          className: "text-right text-openpkg-code-line-number select-none mr-1",
           children: props.lineNumber
         }),
-        /* @__PURE__ */ jsx11(InnerLine6, {
+        /* @__PURE__ */ jsx12(InnerLine6, {
           merge: props
         })
       ]
@@ -450,12 +503,12 @@ var lineNumbers = {
 };
 
 // src/docskit/link.tsx
-import { jsx as jsx12 } from "react/jsx-runtime";
+import { jsx as jsx13 } from "react/jsx-runtime";
 var link = {
   name: "link",
   Inline: ({ annotation, children }) => {
     const { query } = annotation;
-    return /* @__PURE__ */ jsx12("a", {
+    return /* @__PURE__ */ jsx13("a", {
       href: query,
       className: "underline",
       children
@@ -464,22 +517,22 @@ var link = {
 };
 
 // src/docskit/mark.tsx
-import { jsx as jsx13 } from "react/jsx-runtime";
+import { jsx as jsx14 } from "react/jsx-runtime";
 var mark = {
   name: "mark",
   Block: ({ annotation, children }) => {
     const color2 = getColor(annotation);
-    return /* @__PURE__ */ jsx13("div", {
+    return /* @__PURE__ */ jsx14("div", {
       style: {
-        ["--dk-line-bg"]: `rgb(from ${color2} r g b / 0.13)`,
-        ["--dk-line-border"]: color2
+        ["--openpkg-line-bg"]: `rgb(from ${color2} r g b / 0.13)`,
+        ["--openpkg-line-border"]: color2
       },
       children
     });
   },
   Inline: ({ annotation, children }) => {
     const color2 = getColor(annotation);
-    return /* @__PURE__ */ jsx13("span", {
+    return /* @__PURE__ */ jsx14("span", {
       style: {
         boxShadow: `0 0 0 1px rgb(from ${color2} r g b / 0.5)`,
         backgroundColor: `rgb(from ${color2} r g b / 0.13)`
@@ -497,28 +550,28 @@ var colors = ["var(--ch-5)", "var(--ch-3)", "var(--ch-2)"];
 
 // src/tooltip/tooltip.tsx
 import * as TooltipPrimitive from "@radix-ui/react-tooltip";
-import { jsx as jsx14, jsxs as jsxs6 } from "react/jsx-runtime";
+import { jsx as jsx15, jsxs as jsxs6 } from "react/jsx-runtime";
 
 function TooltipProvider({
   delayDuration = 0,
   ...props
 }) {
-  return /* @__PURE__ */ jsx14(TooltipPrimitive.Provider, {
+  return /* @__PURE__ */ jsx15(TooltipPrimitive.Provider, {
     "data-slot": "tooltip-provider",
     delayDuration,
     ...props
   });
 }
 function Tooltip({ ...props }) {
-  return /* @__PURE__ */ jsx14(TooltipProvider, {
-    children: /* @__PURE__ */ jsx14(TooltipPrimitive.Root, {
+  return /* @__PURE__ */ jsx15(TooltipProvider, {
+    children: /* @__PURE__ */ jsx15(TooltipPrimitive.Root, {
       "data-slot": "tooltip",
       ...props
     })
   });
 }
 function TooltipTrigger({ ...props }) {
-  return /* @__PURE__ */ jsx14(TooltipPrimitive.Trigger, {
+  return /* @__PURE__ */ jsx15(TooltipPrimitive.Trigger, {
     "data-slot": "tooltip-trigger",
     ...props
   });
@@ -529,7 +582,7 @@ function TooltipContent({
   children,
   ...props
 }) {
-  return /* @__PURE__ */ jsx14(TooltipPrimitive.Portal, {
+  return /* @__PURE__ */ jsx15(TooltipPrimitive.Portal, {
     children: /* @__PURE__ */ jsxs6(TooltipPrimitive.Content, {
       "data-slot": "tooltip-content",
       sideOffset,
@@ -537,7 +590,7 @@ function TooltipContent({
       ...props,
       children: [
         children,
-        /* @__PURE__ */ jsx14(TooltipPrimitive.Arrow, {
+        /* @__PURE__ */ jsx15(TooltipPrimitive.Arrow, {
           className: "bg-foreground fill-foreground z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px]"
         })
       ]
@@ -546,33 +599,33 @@ function TooltipContent({
 }
 
 // src/docskit/tooltip.client.tsx
-import { jsx as jsx15, jsxs as jsxs7 } from "react/jsx-runtime";
+import { jsx as jsx16, jsxs as jsxs7 } from "react/jsx-runtime";
 
 function NoteTooltip({ children, name }) {
   let note = useNotesContext(name);
   if (!note) {
     note = { name, type: "prose", children: name };
   }
-  return /* @__PURE__ */ jsx15(TooltipProvider, {
+  return /* @__PURE__ */ jsx16(TooltipProvider, {
     delayDuration: 100,
     children: /* @__PURE__ */ jsxs7(Tooltip, {
       children: [
-        /* @__PURE__ */ jsx15(TooltipTrigger, {
+        /* @__PURE__ */ jsx16(TooltipTrigger, {
           asChild: true,
-          children: /* @__PURE__ */ jsx15("span", {
+          children: /* @__PURE__ */ jsx16("span", {
             className: "underline decoration-dotted underline-offset-4 cursor-help",
             children
           })
         }),
-        note.type === "code" ? /* @__PURE__ */ jsx15(TooltipContent, {
+        note.type === "code" ? /* @__PURE__ */ jsx16(TooltipContent, {
           className: cn("min-w-44 max-w-96 whitespace-normal", "p-0 [&>div]:!my-0 border-none rounded-none bg-transparent", "[&>span>svg]:invisible"),
           children: note?.children
-        }) : note.type === "image" ? /* @__PURE__ */ jsx15(TooltipContent, {
+        }) : note.type === "image" ? /* @__PURE__ */ jsx16(TooltipContent, {
           className: cn("min-w-44 max-w-96 whitespace-normal", "p-0 [&>*]:first:mt-0 [&>*]:last:mb-0 border-none bg-transparent", "[&>span>svg]:invisible"),
           children: note?.children
-        }) : /* @__PURE__ */ jsx15(TooltipContent, {
+        }) : /* @__PURE__ */ jsx16(TooltipContent, {
           className: cn("min-w-44 max-w-96 whitespace-normal", "p-4"),
-          children: /* @__PURE__ */ jsx15("div", {
+          children: /* @__PURE__ */ jsx16("div", {
             className: "[&>:first-child]:mt-0 [&>:last-child]:mb-0",
             children: note?.children
           })
@@ -583,12 +636,12 @@ function NoteTooltip({ children, name }) {
 }
 
 // src/docskit/tooltip.tsx
-import { jsx as jsx16 } from "react/jsx-runtime";
+import { jsx as jsx17 } from "react/jsx-runtime";
 var tooltip = {
   name: "tooltip",
   Inline: ({ children, annotation }) => {
     const { query } = annotation;
-    return /* @__PURE__ */ jsx16(NoteTooltip, {
+    return /* @__PURE__ */ jsx17(NoteTooltip, {
       name: query,
       children
     });
@@ -596,7 +649,7 @@ var tooltip = {
 };
 function TooltipLink(props) {
   const name = props.href?.slice("tooltip:".length) ?? "";
-  return /* @__PURE__ */ jsx16(NoteTooltip, {
+  return /* @__PURE__ */ jsx17(NoteTooltip, {
     name,
     children: props.children
   });
@@ -604,16 +657,16 @@ function TooltipLink(props) {
 
 // src/docskit/word-wrap.tsx
 import { InnerLine as InnerLine7, InnerPre, InnerToken } from "codehike/code";
-import { jsx as jsx17 } from "react/jsx-runtime";
+import { jsx as jsx18 } from "react/jsx-runtime";
 var wordWrap = {
   name: "word-wrap",
-  Pre: (props) => /* @__PURE__ */ jsx17(InnerPre, {
+  Pre: (props) => /* @__PURE__ */ jsx18(InnerPre, {
     merge: props,
     className: "whitespace-pre-wrap"
   }),
-  Line: (props) => /* @__PURE__ */ jsx17(InnerLine7, {
+  Line: (props) => /* @__PURE__ */ jsx18(InnerLine7, {
     merge: props,
-    children: /* @__PURE__ */ jsx17("div", {
+    children: /* @__PURE__ */ jsx18("div", {
       style: {
         textIndent: `${-props.indentation}ch`,
         marginLeft: `${props.indentation}ch`
@@ -621,7 +674,7 @@ var wordWrap = {
       children: props.children
     })
   }),
-  Token: (props) => /* @__PURE__ */ jsx17(InnerToken, {
+  Token: (props) => /* @__PURE__ */ jsx18(InnerToken, {
     merge: props,
     style: { textIndent: 0 }
   })
@@ -644,13 +697,55 @@ function getHandlers(options) {
   ].filter(Boolean);
 }
 
+// src/docskit/code.icon.tsx
+import { TerminalIcon } from "lucide-react";
+import { themeIcons } from "seti-icons";
+import { jsx as jsx19 } from "react/jsx-runtime";
+function CodeIcon({
+  title,
+  lang,
+  className
+}) {
+  if (title?.toLowerCase() === "terminal output" || title?.toLowerCase() === "terminal" || lang === "sh" || lang === "shell" || lang === "bash") {
+    return /* @__PURE__ */ jsx19(TerminalIcon, {
+      size: 16,
+      className,
+      style: { marginTop: -3.5 }
+    });
+  }
+  const ext = lang === "rust" ? "rs" : lang === "typescript" ? "ts" : lang;
+  const filename = `x.${ext}`;
+  const { svg } = getIcon(filename);
+  const __html = svg.replace(/svg/, `svg fill='currentColor' style='margin: -4px; height: 24px; width: 24px;'`);
+  return /* @__PURE__ */ jsx19("span", {
+    className,
+    children: /* @__PURE__ */ jsx19("span", {
+      dangerouslySetInnerHTML: { __html },
+      style: { display: "contents" }
+    })
+  });
+}
+var getIcon = themeIcons({
+  white: "#d4d7d6",
+  grey: "#4d5a5e",
+  "grey-light": "#6d8086",
+  blue: "#519aba",
+  green: "#8dc149",
+  orange: "#e37933",
+  pink: "#f55385",
+  purple: "#a074c4",
+  red: "#cc3e44",
+  yellow: "#cbcb41",
+  ignore: "#41535b"
+});
+
 // src/docskit/code.skeleton.tsx
 import { useId } from "react";
-import { jsx as jsx18, jsxs as jsxs8 } from "react/jsx-runtime";
+import { jsx as jsx20, jsxs as jsxs8 } from "react/jsx-runtime";
 
 function SkeletonLine({ width = "75%" }) {
-  return /* @__PURE__ */ jsx18("div", {
-    className: "h-4 bg-dk-border/20 rounded animate-pulse",
+  return /* @__PURE__ */ jsx20("div", {
+    className: "h-4 bg-openpkg-code-border/20 rounded animate-pulse",
     style: { width }
   });
 }
@@ -664,25 +759,25 @@ function CodeBlockSkeleton({
     return widths[i % widths.length];
   });
   return /* @__PURE__ */ jsxs8("div", {
-    className: "rounded overflow-hidden border border-dk-border my-4 not-prose",
+    className: "rounded overflow-hidden border border-openpkg-code-border my-4 not-prose",
     children: [
-      hasTitle && /* @__PURE__ */ jsx18("div", {
-        className: cn("border-b border-dk-border bg-dk-tabs-background px-3 py-0", "w-full h-9 flex items-center shrink-0"),
+      hasTitle && /* @__PURE__ */ jsx20("div", {
+        className: cn("border-b border-openpkg-code-border bg-openpkg-code-header px-3 py-0", "w-full h-9 flex items-center shrink-0"),
         children: /* @__PURE__ */ jsxs8("div", {
           className: "flex items-center h-5 gap-2",
           children: [
-            /* @__PURE__ */ jsx18("div", {
-              className: "size-4 bg-dk-border/30 rounded animate-pulse"
+            /* @__PURE__ */ jsx20("div", {
+              className: "size-4 bg-openpkg-code-border/30 rounded animate-pulse"
             }),
-            /* @__PURE__ */ jsx18("div", {
-              className: "h-4 w-20 bg-dk-border/30 rounded animate-pulse"
+            /* @__PURE__ */ jsx20("div", {
+              className: "h-4 w-20 bg-openpkg-code-border/30 rounded animate-pulse"
             })
           ]
         })
       }),
-      /* @__PURE__ */ jsx18("div", {
-        className: "bg-dk-background px-4 py-3 space-y-2",
-        children: lineWidths.map((width, i) => /* @__PURE__ */ jsx18(SkeletonLine, {
+      /* @__PURE__ */ jsx20("div", {
+        className: "bg-openpkg-code-bg px-4 py-3 space-y-2",
+        children: lineWidths.map((width, i) => /* @__PURE__ */ jsx20(SkeletonLine, {
           width
         }, `${id}-line-${i}`))
       })
@@ -696,28 +791,28 @@ function TerminalSkeleton({ lines = 3 }) {
     return widths[i % widths.length];
   });
   return /* @__PURE__ */ jsxs8("div", {
-    className: "rounded overflow-hidden border border-dk-border my-4 not-prose",
+    className: "rounded overflow-hidden border border-openpkg-code-border my-4 not-prose",
     children: [
-      /* @__PURE__ */ jsx18("div", {
-        className: cn("border-b border-dk-border bg-dk-tabs-background", "w-full h-9 flex items-center justify-center shrink-0", "relative"),
+      /* @__PURE__ */ jsx20("div", {
+        className: cn("border-b border-openpkg-code-border bg-openpkg-code-header", "w-full h-9 flex items-center justify-center shrink-0", "relative"),
         children: /* @__PURE__ */ jsxs8("div", {
           className: "absolute left-3 flex items-center gap-2",
           children: [
-            /* @__PURE__ */ jsx18("div", {
-              className: "size-3 rounded-full bg-dk-tab-inactive-foreground/30"
+            /* @__PURE__ */ jsx20("div", {
+              className: "size-3 rounded-full bg-openpkg-code-text-inactive/30"
             }),
-            /* @__PURE__ */ jsx18("div", {
-              className: "size-3 rounded-full bg-dk-tab-inactive-foreground/30"
+            /* @__PURE__ */ jsx20("div", {
+              className: "size-3 rounded-full bg-openpkg-code-text-inactive/30"
             }),
-            /* @__PURE__ */ jsx18("div", {
-              className: "size-3 rounded-full bg-dk-tab-inactive-foreground/30"
+            /* @__PURE__ */ jsx20("div", {
+              className: "size-3 rounded-full bg-openpkg-code-text-inactive/30"
             })
           ]
         })
       }),
-      /* @__PURE__ */ jsx18("div", {
-        className: "bg-dk-background px-4 py-3 space-y-2",
-        children: lineWidths.map((width, i) => /* @__PURE__ */ jsx18(SkeletonLine, {
+      /* @__PURE__ */ jsx20("div", {
+        className: "bg-openpkg-code-bg px-4 py-3 space-y-2",
+        children: lineWidths.map((width, i) => /* @__PURE__ */ jsx20(SkeletonLine, {
           width
         }, `${id}-line-${i}`))
       })
@@ -725,39 +820,36 @@ function TerminalSkeleton({ lines = 3 }) {
   });
 }
 function InlineCodeSkeleton() {
-  return /* @__PURE__ */ jsx18("span", {
-    className: "inline-block h-5 w-16 bg-dk-border/20 rounded border border-dk-border animate-pulse align-middle"
+  return /* @__PURE__ */ jsx20("span", {
+    className: "inline-block h-5 w-16 bg-openpkg-code-border/20 rounded border border-openpkg-code-border animate-pulse align-middle"
   });
 }
-function CodeTabsSkeleton({
-  tabs = 2,
-  lines = 6
-}) {
+function CodeTabsSkeleton({ tabs = 2, lines = 6 }) {
   const id = useId();
   const lineWidths = Array.from({ length: lines }, (_, i) => {
     const widths = ["40%", "65%", "55%", "80%", "45%", "70%"];
     return widths[i % widths.length];
   });
   return /* @__PURE__ */ jsxs8("div", {
-    className: "rounded overflow-hidden border border-dk-border my-4 not-prose",
+    className: "rounded overflow-hidden border border-openpkg-code-border my-4 not-prose",
     children: [
-      /* @__PURE__ */ jsx18("div", {
-        className: cn("border-b border-dk-border bg-dk-tabs-background px-2 py-0", "w-full h-9 flex items-center shrink-0 gap-1"),
+      /* @__PURE__ */ jsx20("div", {
+        className: cn("border-b border-openpkg-code-border bg-openpkg-code-header px-2 py-0", "w-full h-9 flex items-center shrink-0 gap-1"),
         children: Array.from({ length: tabs }).map((_, i) => /* @__PURE__ */ jsxs8("div", {
           className: "flex items-center gap-1.5 px-3 h-full",
           children: [
-            /* @__PURE__ */ jsx18("div", {
-              className: "size-4 bg-dk-border/30 rounded animate-pulse"
+            /* @__PURE__ */ jsx20("div", {
+              className: "size-4 bg-openpkg-code-border/30 rounded animate-pulse"
             }),
-            /* @__PURE__ */ jsx18("div", {
-              className: "h-4 w-16 bg-dk-border/30 rounded animate-pulse"
+            /* @__PURE__ */ jsx20("div", {
+              className: "h-4 w-16 bg-openpkg-code-border/30 rounded animate-pulse"
             })
           ]
         }, `${id}-tab-${i}`))
       }),
-      /* @__PURE__ */ jsx18("div", {
-        className: "bg-dk-background px-4 py-3 space-y-2",
-        children: lineWidths.map((width, i) => /* @__PURE__ */ jsx18(SkeletonLine, {
+      /* @__PURE__ */ jsx20("div", {
+        className: "bg-openpkg-code-bg px-4 py-3 space-y-2",
+        children: lineWidths.map((width, i) => /* @__PURE__ */ jsx20(SkeletonLine, {
           width
         }, `${id}-line-${i}`))
       })
@@ -765,1331 +857,1466 @@ function CodeTabsSkeleton({
   });
 }
 
-// src/docskit/api/language-selector.tsx
-import { ChevronDown } from "lucide-react";
-import * as React2 from "react";
-import { jsx as jsx19, jsxs as jsxs9 } from "react/jsx-runtime";
+// src/docskit/tabs.tsx
+import * as TabsPrimitive from "@radix-ui/react-tabs";
+import { jsx as jsx21 } from "react/jsx-runtime";
 
-function LanguageSelector({
-  languages,
-  value,
-  onChange,
-  className
-}) {
-  const [open, setOpen] = React2.useState(false);
-  const containerRef = React2.useRef(null);
-  const selectedLanguage = languages.find((l) => l.id === value);
-  React2.useEffect(() => {
-    const handleClickOutside = (e) => {
-      if (containerRef.current && !containerRef.current.contains(e.target)) {
-        setOpen(false);
-      }
-    };
-    document.addEventListener("mousedown", handleClickOutside);
-    return () => document.removeEventListener("mousedown", handleClickOutside);
-  }, []);
-  return /* @__PURE__ */ jsxs9("div", {
-    ref: containerRef,
-    className: cn("relative", className),
-    children: [
-      /* @__PURE__ */ jsxs9("button", {
-        type: "button",
-        onClick: () => setOpen(!open),
-        className: cn("flex items-center gap-1.5 px-2.5 py-1.5 rounded-md text-sm font-medium", "bg-[var(--openpkg-bg-secondary)] hover:bg-[var(--openpkg-bg-tertiary)] text-[var(--openpkg-text-primary)] transition-colors cursor-pointer"),
-        children: [
-          selectedLanguage?.label ?? value,
-          /* @__PURE__ */ jsx19(ChevronDown, {
-            size: 14,
-            className: cn("transition-transform", open && "rotate-180")
-          })
-        ]
-      }),
-      open && /* @__PURE__ */ jsx19("div", {
-        className: cn("absolute top-full left-0 mt-1 z-50 min-w-[120px]", "bg-[var(--openpkg-bg-card)] border border-[var(--openpkg-border-subtle)] rounded-md shadow-lg overflow-hidden"),
-        children: languages.map((lang) => /* @__PURE__ */ jsx19("button", {
-          type: "button",
-          onClick: () => {
-            onChange(lang.id);
-            setOpen(false);
-          },
-          className: cn("w-full px-3 py-2 text-sm text-left transition-colors cursor-pointer", lang.id === value ? "bg-[color-mix(in_srgb,var(--openpkg-accent-primary)_10%,transparent)] text-[var(--openpkg-accent-primary)]" : "text-[var(--openpkg-text-primary)] hover:bg-[var(--openpkg-bg-secondary)]"),
-          children: lang.label
-        }, lang.id))
-      })
-    ]
+function Tabs({ className, ...props }) {
+  return /* @__PURE__ */ jsx21(TabsPrimitive.Root, {
+    "data-slot": "tabs",
+    className: cn("flex flex-col gap-2", className),
+    ...props
+  });
+}
+function TabsList({ className, ...props }) {
+  return /* @__PURE__ */ jsx21(TabsPrimitive.List, {
+    "data-slot": "tabs-list",
+    className: cn("bg-muted text-muted-foreground inline-flex h-9 w-fit items-center justify-center rounded-lg p-[3px]", className),
+    ...props
+  });
+}
+function TabsTrigger({ className, ...props }) {
+  return /* @__PURE__ */ jsx21(TabsPrimitive.Trigger, {
+    "data-slot": "tabs-trigger",
+    className: cn("dark:data-[state=active]:text-foreground focus-visible:ring-ring/50 focus-visible:outline-ring dark:text-muted-foreground inline-flex h-full flex-1 items-center justify-center gap-1.5 px-2 py-1 text-sm font-normal whitespace-nowrap transition-colors focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className),
+    ...props
+  });
+}
+function TabsContent({ className, ...props }) {
+  return /* @__PURE__ */ jsx21(TabsPrimitive.Content, {
+    "data-slot": "tabs-content",
+    className: cn("flex-1 outline-none", className),
+    ...props
   });
 }
 
-// src/docskit/api/api-code-panel.tsx
-import { jsx as jsx20, jsxs as jsxs10 } from "react/jsx-runtime";
+// src/docskit/code.client-highlight.tsx
+import { jsx as jsx22, jsxs as jsxs9 } from "react/jsx-runtime";
 
-function APICodePanel({
-  languages,
-  examples,
-  externalLink,
-  title,
-  className
-}) {
-  const [selectedLang, setSelectedLang] = useState4(examples[0]?.languageId ?? languages[0]?.id);
-  const [copied, copy] = useCopyToClipboard();
-  const [highlighted, setHighlighted] = useState4(null);
-  const currentExample = examples.find((e) => e.languageId === selectedLang);
-  const code = currentExample?.code ?? "";
-  const lang = currentExample?.highlightLang ?? currentExample?.languageId ?? "txt";
-  useEffect2(() => {
+function ClientDocsKitCode(props) {
+  const { codeblock, handlers: extraHandlers, className: wrapperClassName } = props;
+  const [highlighted, setHighlighted] = useState3(null);
+  const { title, flags } = extractFlags(codeblock);
+  const options = flagsToOptions(flags);
+  useEffect(() => {
     let cancelled = false;
-    highlight({
-      value: code,
-      lang: lang === "curl" ? "bash" : lang,
-      meta: ""
-    }, theme).then((result) => {
-      if (!cancelled) {
+    highlight({ ...codeblock, lang: codeblock.lang || "txt" }, theme).then((result) => {
+      if (!cancelled)
         setHighlighted(result);
-      }
     });
     return () => {
       cancelled = true;
     };
-  }, [code, lang]);
-  const handleCopy = () => {
-    copy(code);
-  };
-  const handlers = getHandlers({ copyButton: false });
-  return /* @__PURE__ */ jsxs10("div", {
-    className: cn("rounded-lg overflow-hidden border border-dk-border", "bg-dk-background text-gray-100", "sticky top-20", className),
+  }, [codeblock.value, codeblock.lang, codeblock.meta]);
+  if (!highlighted) {
+    return /* @__PURE__ */ jsx22(CodeBlockSkeleton, {
+      hasTitle: !!title
+    });
+  }
+  const handlers = getHandlers(options);
+  if (extraHandlers) {
+    handlers.push(...extraHandlers);
+  }
+  const { background: _background, ...highlightedStyle } = highlighted.style;
+  const showCopy = options?.copyButton;
+  const icon2 = /* @__PURE__ */ jsx22(CodeIcon, {
+    title,
+    lang: codeblock.lang,
+    className: "opacity-60"
+  });
+  return /* @__PURE__ */ jsxs9("div", {
+    className: cn("group rounded overflow-hidden relative border-openpkg-code-border flex flex-col border my-4 not-prose", wrapperClassName),
     children: [
-      /* @__PURE__ */ jsxs10("div", {
-        className: "flex items-center justify-between px-4 py-3 border-b border-dk-border bg-dk-tabs-background",
+      title ? /* @__PURE__ */ jsx22("div", {
+        className: cn("border-b-[1px] border-openpkg-code-border bg-openpkg-code-header px-3 py-0", "w-full h-9 flex items-center shrink-0", "text-openpkg-code-text-inactive text-sm font-mono"),
+        children: /* @__PURE__ */ jsxs9("div", {
+          className: "flex items-center h-5 gap-2",
+          children: [
+            /* @__PURE__ */ jsx22("div", {
+              className: "size-4",
+              children: icon2
+            }),
+            /* @__PURE__ */ jsx22("span", {
+              className: "leading-none",
+              children: title
+            })
+          ]
+        })
+      }) : null,
+      /* @__PURE__ */ jsxs9("div", {
+        className: "relative flex items-start",
         children: [
-          /* @__PURE__ */ jsxs10("div", {
-            className: "flex items-center gap-3",
-            children: [
-              languages.length > 1 && /* @__PURE__ */ jsx20(LanguageSelector, {
-                languages,
-                value: selectedLang,
-                onChange: setSelectedLang,
-                className: "[&_button]:bg-white/5 [&_button]:hover:bg-white/10 [&_button]:text-gray-200"
-              }),
-              title && /* @__PURE__ */ jsx20("span", {
-                className: "text-sm text-dk-tab-inactive-foreground",
-                children: title
-              })
-            ]
+          /* @__PURE__ */ jsx22(Pre, {
+            code: highlighted,
+            className: "overflow-auto px-0 py-3 m-0 rounded-none !bg-openpkg-code-bg selection:bg-openpkg-code-selection selection:text-current max-h-full flex-1",
+            style: highlightedStyle,
+            handlers
           }),
-          /* @__PURE__ */ jsxs10("div", {
-            className: "flex items-center gap-2",
-            children: [
-              /* @__PURE__ */ jsx20("button", {
-                type: "button",
-                onClick: handleCopy,
-                className: "p-1.5 rounded text-dk-tab-inactive-foreground hover:text-gray-200 transition-colors cursor-pointer",
-                "aria-label": "Copy code",
-                children: copied ? /* @__PURE__ */ jsx20(Check, {
-                  size: 16
-                }) : /* @__PURE__ */ jsx20(Copy, {
-                  size: 16
-                })
-              }),
-              externalLink && /* @__PURE__ */ jsx20("a", {
-                href: externalLink,
-                target: "_blank",
-                rel: "noopener noreferrer",
-                className: "p-1.5 rounded text-dk-tab-inactive-foreground hover:text-gray-200 transition-colors",
-                "aria-label": "Open in playground",
-                children: /* @__PURE__ */ jsx20(ExternalLink, {
-                  size: 16
-                })
-              })
-            ]
+          showCopy && /* @__PURE__ */ jsx22(CopyButton, {
+            text: highlighted.code,
+            variant: "floating",
+            className: cn("absolute right-3 z-10 text-openpkg-code-text-inactive", "top-3")
           })
         ]
-      }),
-      /* @__PURE__ */ jsx20("div", {
-        className: "overflow-auto max-h-[60vh] lg:max-h-none",
-        children: highlighted ? /* @__PURE__ */ jsx20(Pre, {
-          code: highlighted,
-          className: "overflow-auto px-4 py-3 m-0 rounded-none !bg-dk-background selection:bg-dk-selection selection:text-current text-sm",
-          style: highlighted.style,
-          handlers
-        }) : /* @__PURE__ */ jsx20(CodeBlockSkeleton, {
-          lines: code.split(`
-`).length
-        })
       })
     ]
   });
 }
-// src/docskit/api/api-reference-page.tsx
-import { jsx as jsx21, jsxs as jsxs11 } from "react/jsx-runtime";
-
-function APIReferencePage({
-  title,
-  description,
-  children,
-  className
-}) {
-  return /* @__PURE__ */ jsxs11("div", {
-    className: cn("max-w-7xl mx-auto px-4 sm:px-6 lg:px-8", className),
+function ClientTerminal(props) {
+  const { codeblock, handlers: extraHandlers } = props;
+  const [highlighted, setHighlighted] = useState3(null);
+  const { flags } = extractFlagsSimple(codeblock);
+  const options = flagsToOptions(flags);
+  useEffect(() => {
+    let cancelled = false;
+    highlight({ ...codeblock, lang: codeblock.lang || "bash" }, theme).then((result) => {
+      if (!cancelled)
+        setHighlighted(result);
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [codeblock.value, codeblock.lang, codeblock.meta]);
+  if (!highlighted) {
+    return /* @__PURE__ */ jsx22(TerminalSkeleton, {});
+  }
+  const handlers = getHandlers(options);
+  if (extraHandlers) {
+    handlers.push(...extraHandlers);
+  }
+  const { background: _background, ...highlightedStyle } = highlighted.style;
+  const showCopy = options?.copyButton;
+  const isMultiLine = highlighted.code.includes(`
+`);
+  return /* @__PURE__ */ jsxs9("div", {
+    className: "group rounded overflow-hidden relative border-openpkg-code-border flex flex-col border my-4 not-prose",
     children: [
-      /* @__PURE__ */ jsxs11("header", {
-        className: "py-8 border-b border-[var(--openpkg-border-subtle)]",
+      /* @__PURE__ */ jsxs9("div", {
+        className: cn("border-b border-openpkg-code-border bg-openpkg-code-header", "w-full h-9 flex items-center justify-center shrink-0", "relative"),
         children: [
-          /* @__PURE__ */ jsx21("h1", {
-            className: "text-3xl font-bold text-[var(--openpkg-text-primary)]",
-            children: title
+          /* @__PURE__ */ jsxs9("div", {
+            className: "absolute left-3 flex items-center gap-2",
+            children: [
+              /* @__PURE__ */ jsx22("div", {
+                className: "size-3 rounded-full bg-openpkg-code-text-inactive/30"
+              }),
+              /* @__PURE__ */ jsx22("div", {
+                className: "size-3 rounded-full bg-openpkg-code-text-inactive/30"
+              }),
+              /* @__PURE__ */ jsx22("div", {
+                className: "size-3 rounded-full bg-openpkg-code-text-inactive/30"
+              })
+            ]
           }),
-          description && /* @__PURE__ */ jsx21("div", {
-            className: "mt-4 text-lg text-[var(--openpkg-text-muted)] prose prose-lg dark:prose-invert max-w-none",
-            children: description
+          /* @__PURE__ */ jsx22("span", {
+            className: "sr-only",
+            children: "Terminal window"
           })
         ]
       }),
-      /* @__PURE__ */ jsx21("div", {
-        children
+      /* @__PURE__ */ jsxs9("div", {
+        className: "relative flex items-start",
+        children: [
+          /* @__PURE__ */ jsx22(Pre, {
+            code: highlighted,
+            className: "overflow-auto px-0 py-3 m-0 rounded-none !bg-openpkg-code-bg selection:bg-openpkg-code-selection selection:text-current max-h-full flex-1",
+            style: highlightedStyle,
+            handlers
+          }),
+          showCopy && /* @__PURE__ */ jsx22(CopyButton, {
+            text: highlighted.code,
+            variant: "floating",
+            className: cn("absolute right-3 z-10 text-openpkg-code-text-inactive", isMultiLine ? "top-3" : "top-1/2 -translate-y-1/2")
+          })
+        ]
       })
     ]
   });
 }
-// src/docskit/api/api-section.tsx
-import { jsx as jsx22, jsxs as jsxs12 } from "react/jsx-runtime";
-
-function APISection({
-  title,
-  id,
-  description,
-  children,
-  languages,
-  examples,
-  externalLink,
-  codePanelTitle,
-  className
-}) {
-  return /* @__PURE__ */ jsx22("section", {
-    id,
-    className: cn("py-8 border-b border-[var(--openpkg-border-subtle)] last:border-b-0", className),
-    children: /* @__PURE__ */ jsxs12("div", {
-      className: "grid grid-cols-1 lg:grid-cols-2 gap-8 lg:gap-12",
+function ClientInlineCode({ codeblock }) {
+  const [highlighted, setHighlighted] = useState3(null);
+  useEffect(() => {
+    let cancelled = false;
+    highlight(codeblock, theme).then((result) => {
+      if (!cancelled)
+        setHighlighted(result);
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [codeblock.value, codeblock.lang, codeblock.meta]);
+  if (!highlighted) {
+    return /* @__PURE__ */ jsx22(InlineCodeSkeleton, {});
+  }
+  return /* @__PURE__ */ jsx22(Inline, {
+    code: highlighted,
+    className: "selection:bg-openpkg-code-selection selection:text-current rounded border border-openpkg-code-border px-1 py-0.5 whitespace-nowrap !bg-openpkg-code-bg",
+    style: highlighted.style
+  });
+}
+function extractFlags(codeblock) {
+  const meta = codeblock.meta || "";
+  const flags = meta.split(" ").filter((flag) => flag.startsWith("-"))[0] ?? "";
+  const metaWithoutFlags = !flags ? meta : meta === flags ? "" : meta.replace(` ${flags}`, "").trim();
+  const title = metaWithoutFlags.trim();
+  return { title, flags: flags.slice(1) };
+}
+function extractFlagsSimple(codeblock) {
+  const meta = codeblock.meta || "";
+  const flagMatch = meta.split(" ").find((flag) => flag.startsWith("-"));
+  const flags = flagMatch ? flagMatch.slice(1) : "";
+  return { flags };
+}
+function ClientCode(props) {
+  const { codeblocks, flags: groupFlags, storage } = props;
+  const [highlighted, setHighlighted] = useState3(null);
+  const groupOptions = flagsToOptions(groupFlags?.startsWith("-") ? groupFlags.slice(1) : groupFlags);
+  const _codeBlocksKey = codeblocks.map((b) => `${b.value}|${b.lang}|${b.meta}`).join("::");
+  useEffect(() => {
+    let cancelled = false;
+    Promise.all(codeblocks.map(async (block, index) => {
+      const { title, flags } = extractFlags(block);
+      const tabOptions = flagsToOptions(flags);
+      const options = { ...groupOptions, ...tabOptions };
+      const result = await highlight({ ...block, lang: block.lang || "txt" }, theme);
+      return {
+        index,
+        highlighted: result,
+        title,
+        options,
+        icon: /* @__PURE__ */ jsx22(CodeIcon, {
+          title,
+          lang: block.lang,
+          className: "opacity-60"
+        })
+      };
+    })).then((results) => {
+      if (!cancelled) {
+        const map = new Map;
+        results.forEach((r) => map.set(r.index, r));
+        setHighlighted(map);
+      }
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [_codeBlocksKey]);
+  if (!highlighted) {
+    return /* @__PURE__ */ jsx22(CodeTabsSkeleton, {
+      tabs: codeblocks.length
+    });
+  }
+  if (codeblocks.length === 1) {
+    const tab = highlighted.get(0);
+    const handlers = getHandlers(tab.options);
+    const { background: _background, ...highlightedStyle } = tab.highlighted.style;
+    return /* @__PURE__ */ jsxs9("div", {
+      className: "group rounded overflow-hidden relative border-openpkg-code-border flex flex-col border my-4 not-prose",
       children: [
-        /* @__PURE__ */ jsxs12("div", {
-          className: "space-y-6",
+        tab.title ? /* @__PURE__ */ jsx22("div", {
+          className: cn("border-b-[1px] border-openpkg-code-border bg-openpkg-code-header px-3 py-0", "w-full h-9 flex items-center shrink-0", "text-openpkg-code-text-inactive text-sm font-mono"),
+          children: /* @__PURE__ */ jsxs9("div", {
+            className: "flex items-center h-5 gap-2",
+            children: [
+              /* @__PURE__ */ jsx22("div", {
+                className: "size-4",
+                children: tab.icon
+              }),
+              /* @__PURE__ */ jsx22("span", {
+                className: "leading-none",
+                children: tab.title
+              })
+            ]
+          })
+        }) : null,
+        /* @__PURE__ */ jsxs9("div", {
+          className: "relative flex items-start",
           children: [
-            /* @__PURE__ */ jsxs12("div", {
-              children: [
-                /* @__PURE__ */ jsx22("h2", {
-                  className: "text-2xl font-semibold text-[var(--openpkg-text-primary)]",
-                  children: title
-                }),
-                description && /* @__PURE__ */ jsx22("div", {
-                  className: "mt-3 text-[var(--openpkg-text-muted)] prose prose-sm dark:prose-invert",
-                  children: description
-                })
-              ]
+            /* @__PURE__ */ jsx22(Pre, {
+              code: tab.highlighted,
+              className: "overflow-auto px-0 py-3 m-0 rounded-none !bg-openpkg-code-bg selection:bg-openpkg-code-selection selection:text-current max-h-full flex-1",
+              style: highlightedStyle,
+              handlers
             }),
-            children
+            tab.options.copyButton && /* @__PURE__ */ jsx22(CopyButton, {
+              text: tab.highlighted.code,
+              variant: "floating",
+              className: "absolute right-3 top-3 z-10 text-openpkg-code-text-inactive"
+            })
           ]
-        }),
-        /* @__PURE__ */ jsx22("div", {
-          className: "lg:pl-4",
-          children: /* @__PURE__ */ jsx22(APICodePanel, {
-            languages,
-            examples,
-            externalLink,
-            title: codePanelTitle,
-            className: "max-h-[400px] lg:max-h-none"
-          })
         })
       ]
-    })
-  });
-}
-// src/docskit/api/endpoint-badge.tsx
-import { cva } from "class-variance-authority";
-import * as React3 from "react";
-import { jsx as jsx23 } from "react/jsx-runtime";
-var endpointBadgeVariants = cva("inline-flex items-center justify-center font-mono font-bold uppercase tracking-wide rounded shrink-0", {
-  variants: {
-    method: {
-      GET: "bg-emerald-500/15 text-emerald-500",
-      POST: "bg-blue-500/15 text-blue-500",
-      PUT: "bg-amber-500/15 text-amber-500",
-      DELETE: "bg-rose-500/15 text-rose-500",
-      PATCH: "bg-violet-500/15 text-violet-500"
-    },
-    size: {
-      sm: "h-5 px-1.5 text-[10px]",
-      md: "h-6 px-2 text-xs"
-    }
-  },
-  defaultVariants: {
-    method: "GET",
-    size: "md"
+    });
   }
-});
-var EndpointBadge = React3.forwardRef(({ className, method, size, ...props }, ref) => {
-  return /* @__PURE__ */ jsx23("span", {
-    ref,
-    className: cn(endpointBadgeVariants({ method, size, className })),
-    ...props,
-    children: method
+  return /* @__PURE__ */ jsx22(ClientMultiCode, {
+    highlighted,
+    groupOptions,
+    storage
   });
-});
-EndpointBadge.displayName = "EndpointBadge";
-// src/docskit/api/endpoint-header.tsx
-import { Check as Check2, Copy as Copy2 } from "lucide-react";
-import * as React4 from "react";
-import { jsx as jsx24, jsxs as jsxs13 } from "react/jsx-runtime";
-
-var EndpointHeader = React4.forwardRef(({ className, method, path, copyable = true, ...props }, ref) => {
-  const [copied, copy] = useCopyToClipboard();
-  const handleCopy = () => {
-    copy(path);
-  };
-  return /* @__PURE__ */ jsxs13("div", {
-    ref,
-    className: cn("group flex items-center gap-3 py-2 px-3 rounded-lg bg-[var(--openpkg-bg-secondary)] border border-[var(--openpkg-border-subtle)]", className),
-    ...props,
+}
+function ClientMultiCode({
+  highlighted,
+  groupOptions,
+  storage
+}) {
+  const tabs = Array.from(highlighted.values());
+  const [storedTitle, setCurrentTitle] = useStateOrLocalStorage(storage, tabs[0].title);
+  const current = tabs.find((tab) => tab.title === storedTitle) || tabs[0];
+  const handlers = getHandlers(current.options);
+  const { background: _background, ...highlightedStyle } = current.highlighted.style;
+  return /* @__PURE__ */ jsxs9(Tabs, {
+    value: current.title,
+    onValueChange: setCurrentTitle,
+    className: cn("group border rounded selection:bg-openpkg-code-selection selection:text-current border-openpkg-code-border overflow-hidden relative flex flex-col max-h-full min-h-0 my-4 gap-0 not-prose"),
     children: [
-      /* @__PURE__ */ jsx24(EndpointBadge, {
-        method
-      }),
-      /* @__PURE__ */ jsx24("code", {
-        className: "font-mono text-sm text-[var(--openpkg-text-primary)] flex-1",
-        children: path
+      /* @__PURE__ */ jsx22(TabsList, {
+        className: cn("border-b border-openpkg-code-border bg-openpkg-code-header w-full h-9 min-h-9 shrink-0", "rounded-none p-0 m-0 justify-start items-stretch"),
+        children: tabs.map(({ icon: icon2, title }) => /* @__PURE__ */ jsxs9(TabsTrigger, {
+          value: title,
+          className: cn("rounded-none transition-colors duration-200 gap-1.5 px-3 font-mono justify-start grow-0", "border-r border-openpkg-code-border", "text-openpkg-code-text-inactive data-[state=active]:text-openpkg-code-text-active hover:text-openpkg-code-text-active", "data-[state=active]:bg-openpkg-code-bg/50"),
+          children: [
+            /* @__PURE__ */ jsx22("div", {
+              children: icon2
+            }),
+            /* @__PURE__ */ jsx22("span", {
+              className: "leading-none",
+              children: title
+            })
+          ]
+        }, title))
       }),
-      copyable && /* @__PURE__ */ jsx24("button", {
-        type: "button",
-        onClick: handleCopy,
-        className: cn("p-1.5 rounded text-[var(--openpkg-text-muted)] hover:text-[var(--openpkg-text-primary)]", "opacity-0 group-hover:opacity-100 transition-opacity cursor-pointer"),
-        "aria-label": "Copy path",
-        children: copied ? /* @__PURE__ */ jsx24(Check2, {
-          size: 14
-        }) : /* @__PURE__ */ jsx24(Copy2, {
-          size: 14
-        })
+      /* @__PURE__ */ jsxs9(TabsContent, {
+        value: current.title,
+        className: "relative min-h-0 mt-0 flex flex-col",
+        children: [
+          /* @__PURE__ */ jsx22(Pre, {
+            code: current.highlighted,
+            className: "overflow-auto px-0 py-3 m-0 rounded-none !bg-openpkg-code-bg selection:bg-openpkg-code-selection selection:text-current max-h-full flex-1",
+            style: highlightedStyle,
+            handlers
+          }),
+          groupOptions.copyButton && /* @__PURE__ */ jsx22(CopyButton, {
+            text: current.highlighted.code,
+            variant: "floating",
+            className: "absolute right-3 top-3 z-10 text-openpkg-code-text-inactive"
+          })
+        ]
       })
     ]
   });
-});
-EndpointHeader.displayName = "EndpointHeader";
-// src/docskit/api/parameter-item.tsx
-import { Check as Check3, ChevronRight, Copy as Copy3 } from "lucide-react";
-import { useState as useState5 } from "react";
-import { jsx as jsx25, jsxs as jsxs14 } from "react/jsx-runtime";
+}
 
-function NestedProperty({
-  name,
-  schema,
-  required = false,
-  depth = 0
+// src/docskit/api/language-selector.tsx
+import { ChevronDown } from "lucide-react";
+import * as React3 from "react";
+import { jsx as jsx23, jsxs as jsxs10 } from "react/jsx-runtime";
+
+function LanguageSelector({
+  languages,
+  value,
+  onChange,
+  className
 }) {
-  const [expanded, setExpanded] = useState5(false);
-  const [copied, copy] = useCopyToClipboard();
-  const type = schema.typeString ?? schema.type ?? "unknown";
-  const hasNested = schema.properties && Object.keys(schema.properties).length > 0;
-  const _nestedCount = hasNested && schema.properties ? Object.keys(schema.properties).length : 0;
-  return /* @__PURE__ */ jsxs14("div", {
-    className: cn("border-t border-[var(--openpkg-border-subtle)] first:border-t-0", depth > 0 && "ml-4"),
+  const [open, setOpen] = React3.useState(false);
+  const containerRef = React3.useRef(null);
+  const selectedLanguage = languages.find((l) => l.id === value);
+  React3.useEffect(() => {
+    const handleClickOutside = (e) => {
+      if (containerRef.current && !containerRef.current.contains(e.target)) {
+        setOpen(false);
+      }
+    };
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => document.removeEventListener("mousedown", handleClickOutside);
+  }, []);
+  return /* @__PURE__ */ jsxs10("div", {
+    ref: containerRef,
+    className: cn("relative", className),
     children: [
-      /* @__PURE__ */ jsx25("div", {
-        className: "group py-4",
-        children: /* @__PURE__ */ jsxs14("div", {
-          className: "flex items-start gap-2",
-          children: [
-            hasNested ? /* @__PURE__ */ jsx25("button", {
-              type: "button",
-              onClick: () => setExpanded(!expanded),
-              className: "mt-0.5 p-0.5 text-[var(--openpkg-text-muted)] hover:text-[var(--openpkg-text-primary)] transition-colors cursor-pointer",
-              "aria-label": expanded ? "Collapse" : "Expand",
-              children: /* @__PURE__ */ jsx25(ChevronRight, {
-                size: 14,
-                className: cn("transition-transform duration-200", expanded && "rotate-90")
-              })
-            }) : /* @__PURE__ */ jsx25("div", {
-              className: "w-5"
-            }),
-            /* @__PURE__ */ jsxs14("div", {
-              className: "flex-1 min-w-0",
-              children: [
-                /* @__PURE__ */ jsxs14("div", {
-                  className: "flex items-center gap-2 flex-wrap",
-                  children: [
-                    /* @__PURE__ */ jsxs14("span", {
-                      className: "font-mono text-sm font-medium text-[var(--openpkg-text-primary)]",
-                      children: [
-                        name,
-                        !required && /* @__PURE__ */ jsx25("span", {
-                          className: "text-[var(--openpkg-text-muted)]",
-                          children: "?"
-                        })
-                      ]
-                    }),
-                    /* @__PURE__ */ jsx25("span", {
-                      className: "font-mono text-xs text-[var(--openpkg-text-muted)]",
-                      children: type
-                    }),
-                    hasNested && /* @__PURE__ */ jsx25("button", {
-                      type: "button",
-                      onClick: () => setExpanded(!expanded),
-                      className: "text-xs text-[var(--openpkg-accent-link)] hover:underline cursor-pointer",
-                      children: "Show child parameters"
-                    }),
-                    /* @__PURE__ */ jsx25("button", {
-                      type: "button",
-                      onClick: () => copy(name),
-                      className: "p-1 rounded text-[var(--openpkg-text-muted)] hover:text-[var(--openpkg-text-primary)] opacity-0 group-hover:opacity-100 transition-opacity cursor-pointer",
-                      "aria-label": "Copy name",
-                      children: copied ? /* @__PURE__ */ jsx25(Check3, {
-                        size: 12
-                      }) : /* @__PURE__ */ jsx25(Copy3, {
-                        size: 12
-                      })
-                    })
-                  ]
-                }),
-                schema.description && /* @__PURE__ */ jsx25("p", {
-                  className: "text-sm text-[var(--openpkg-text-muted)] mt-1",
-                  children: schema.description
-                })
-              ]
-            })
-          ]
-        })
+      /* @__PURE__ */ jsxs10("button", {
+        type: "button",
+        onClick: () => setOpen(!open),
+        className: cn("flex items-center gap-1.5 px-2.5 py-1.5 rounded-md text-sm font-medium", "bg-muted/50 hover:bg-muted text-foreground transition-colors cursor-pointer"),
+        children: [
+          selectedLanguage?.label ?? value,
+          /* @__PURE__ */ jsx23(ChevronDown, {
+            size: 14,
+            className: cn("transition-transform", open && "rotate-180")
+          })
+        ]
       }),
-      hasNested && expanded && schema.properties && /* @__PURE__ */ jsx25("div", {
-        className: "border-l border-[var(--openpkg-border-subtle)] ml-2 mb-3",
-        children: Object.entries(schema.properties).map(([propName, propSchema]) => /* @__PURE__ */ jsx25(NestedProperty, {
-          name: propName,
-          schema: propSchema,
-          required: schema.required?.includes(propName),
-          depth: depth + 1
-        }, propName))
+      open && /* @__PURE__ */ jsx23("div", {
+        className: cn("absolute top-full left-0 mt-1 z-50 min-w-[120px]", "bg-popover border border-border rounded-md shadow-lg overflow-hidden"),
+        children: languages.map((lang) => /* @__PURE__ */ jsx23("button", {
+          type: "button",
+          onClick: () => {
+            onChange(lang.id);
+            setOpen(false);
+          },
+          className: cn("w-full px-3 py-2 text-sm text-left transition-colors cursor-pointer", lang.id === value ? "bg-primary/10 text-primary" : "text-foreground hover:bg-muted"),
+          children: lang.label
+        }, lang.id))
       })
     ]
   });
 }
-function APIParameterItem({
-  name,
-  type,
-  required = false,
-  description,
-  children,
-  depth = 0,
+
+// src/docskit/api/api-code-panel.tsx
+import { jsx as jsx24, jsxs as jsxs11 } from "react/jsx-runtime";
+
+function APICodePanel({
+  languages,
+  examples,
+  externalLink,
+  title,
   className
 }) {
-  const [expanded, setExpanded] = useState5(false);
-  const [copied, copy] = useCopyToClipboard();
-  const hasNested = children?.properties && Object.keys(children.properties).length > 0;
-  const _nestedCount = hasNested && children?.properties ? Object.keys(children.properties).length : 0;
-  return /* @__PURE__ */ jsxs14("div", {
-    className: cn("border-b border-[var(--openpkg-border-subtle)] last:border-b-0", className),
+  const [selectedLang, setSelectedLang] = useState5(examples[0]?.languageId ?? languages[0]?.id);
+  const currentExample = examples.find((e) => e.languageId === selectedLang);
+  const code = currentExample?.code ?? "";
+  const lang = currentExample?.highlightLang ?? currentExample?.languageId ?? "txt";
+  const metaTitle = title ?? "";
+  const meta = metaTitle ? `${metaTitle} -c` : "-c";
+  return /* @__PURE__ */ jsxs11("div", {
+    className: cn("sticky top-20", className),
     children: [
-      /* @__PURE__ */ jsx25("div", {
-        className: "group py-4",
-        children: /* @__PURE__ */ jsxs14("div", {
-          className: "flex items-start gap-2",
-          children: [
-            hasNested ? /* @__PURE__ */ jsx25("button", {
-              type: "button",
-              onClick: () => setExpanded(!expanded),
-              className: "mt-0.5 p-0.5 text-[var(--openpkg-text-muted)] hover:text-[var(--openpkg-text-primary)] transition-colors cursor-pointer",
-              "aria-label": expanded ? "Collapse" : "Expand",
-              children: /* @__PURE__ */ jsx25(ChevronRight, {
-                size: 14,
-                className: cn("transition-transform duration-200", expanded && "rotate-90")
-              })
-            }) : /* @__PURE__ */ jsx25("div", {
-              className: "w-5"
-            }),
-            /* @__PURE__ */ jsxs14("div", {
-              className: "flex-1 min-w-0",
-              children: [
-                /* @__PURE__ */ jsxs14("div", {
-                  className: "flex items-center gap-2 flex-wrap",
-                  children: [
-                    /* @__PURE__ */ jsx25("span", {
-                      className: "font-mono text-sm font-medium text-[var(--openpkg-text-primary)]",
-                      children: name
-                    }),
-                    required && /* @__PURE__ */ jsx25("span", {
-                      className: "text-[10px] font-semibold px-1.5 py-0.5 rounded border border-[var(--openpkg-border-subtle)] bg-[var(--openpkg-bg-badge)] text-[var(--openpkg-text-muted)] uppercase tracking-wide",
-                      children: "Required"
-                    }),
-                    /* @__PURE__ */ jsx25("span", {
-                      className: "font-mono text-xs text-[var(--openpkg-text-muted)]",
-                      children: type
-                    }),
-                    hasNested && /* @__PURE__ */ jsx25("button", {
-                      type: "button",
-                      onClick: () => setExpanded(!expanded),
-                      className: "text-xs text-[var(--openpkg-accent-link)] hover:underline cursor-pointer",
-                      children: "Show child parameters"
-                    }),
-                    /* @__PURE__ */ jsx25("button", {
-                      type: "button",
-                      onClick: () => copy(name),
-                      className: "p-1 rounded text-[var(--openpkg-text-muted)] hover:text-[var(--openpkg-text-primary)] opacity-0 group-hover:opacity-100 transition-opacity cursor-pointer",
-                      "aria-label": "Copy name",
-                      children: copied ? /* @__PURE__ */ jsx25(Check3, {
-                        size: 12
-                      }) : /* @__PURE__ */ jsx25(Copy3, {
-                        size: 12
-                      })
-                    })
-                  ]
-                }),
-                description && /* @__PURE__ */ jsx25("p", {
-                  className: "text-sm text-[var(--openpkg-text-muted)] mt-1",
-                  children: description
-                })
-              ]
-            })
-          ]
+      languages.length > 1 && /* @__PURE__ */ jsx24("div", {
+        className: "flex items-center gap-2 mb-2",
+        children: /* @__PURE__ */ jsx24(LanguageSelector, {
+          languages,
+          value: selectedLang,
+          onChange: setSelectedLang
         })
       }),
-      hasNested && expanded && children?.properties && /* @__PURE__ */ jsx25("div", {
-        className: "border-l border-[var(--openpkg-border-subtle)] ml-2 mb-3",
-        children: Object.entries(children.properties).map(([propName, propSchema]) => /* @__PURE__ */ jsx25(NestedProperty, {
-          name: propName,
-          schema: propSchema,
-          required: children.required?.includes(propName),
-          depth: depth + 1
-        }, propName))
+      /* @__PURE__ */ jsx24(ClientDocsKitCode, {
+        codeblock: {
+          value: code,
+          lang: lang === "curl" ? "bash" : lang,
+          meta
+        }
       })
     ]
   });
 }
-// src/docskit/api/parameter-list.tsx
-import { ChevronDown as ChevronDown2 } from "lucide-react";
-import * as React5 from "react";
-import { useState as useState6 } from "react";
-import { jsx as jsx26, jsxs as jsxs15 } from "react/jsx-runtime";
+// src/docskit/api/api-reference-layout.tsx
+import { jsx as jsx25, jsxs as jsxs12 } from "react/jsx-runtime";
 
-function ParameterList({
-  title,
-  collapseAfter,
+function APIReferenceLayout({
   children,
-  className
+  examples,
+  className,
+  leftWidth = "58%",
+  rightWidth = "42%"
 }) {
-  const [expanded, setExpanded] = useState6(false);
-  const childArray = React5.Children.toArray(children);
-  const shouldCollapse = collapseAfter !== undefined && childArray.length > collapseAfter;
-  const visibleChildren = shouldCollapse && !expanded ? childArray.slice(0, collapseAfter) : childArray;
-  const hiddenCount = shouldCollapse ? childArray.length - collapseAfter : 0;
-  return /* @__PURE__ */ jsxs15("div", {
-    className: cn("", className),
+  return /* @__PURE__ */ jsxs12("div", {
+    className: cn("openpkg-api-layout", "max-w-[1600px] mx-auto", "flex flex-col", "lg:grid", className),
+    style: {
+      "--openpkg-left-width": leftWidth,
+      "--openpkg-right-width": rightWidth
+    },
     children: [
-      title && /* @__PURE__ */ jsx26("h3", {
-        className: "text-sm font-medium text-[var(--openpkg-text-primary)] mb-3 uppercase tracking-wide",
-        children: title
-      }),
-      /* @__PURE__ */ jsx26("div", {
-        className: "divide-y divide-[var(--openpkg-border-subtle)] border-t border-b border-[var(--openpkg-border-subtle)]",
-        children: visibleChildren
+      /* @__PURE__ */ jsx25("div", {
+        className: cn("openpkg-api-layout-left", "py-8 px-4", "sm:py-10 sm:px-6", "lg:py-12 lg:px-12 lg:pl-16", "lg:border-r lg:border-[var(--openpkg-border-subtle)]", "bg-[var(--openpkg-bg-root)]", "openpkg-animate-fade-in"),
+        style: { gridColumn: "1" },
+        children
       }),
-      shouldCollapse && !expanded && /* @__PURE__ */ jsxs15("button", {
-        type: "button",
-        onClick: () => setExpanded(true),
-        className: "flex items-center gap-1 mt-3 text-sm text-[var(--openpkg-accent-link)] hover:underline cursor-pointer",
-        children: [
-          /* @__PURE__ */ jsx26(ChevronDown2, {
-            size: 14
-          }),
-          "Show ",
-          hiddenCount,
-          " more ",
-          hiddenCount === 1 ? "parameter" : "parameters"
-        ]
+      /* @__PURE__ */ jsx25("div", {
+        className: cn("openpkg-api-layout-right", "border-t border-[var(--openpkg-border-subtle)] lg:border-t-0", "py-8 px-4", "sm:py-10 sm:px-6", "lg:sticky lg:top-0 lg:h-screen lg:overflow-y-auto", "lg:py-12 lg:px-12 lg:pl-8", "bg-[var(--openpkg-bg-root)]", "openpkg-animate-fade-in"),
+        style: {
+          gridColumn: "2",
+          animationDelay: "100ms"
+        },
+        children: examples
       })
     ]
   });
 }
-// src/docskit/api/response-block.tsx
-import { Check as Check4, Copy as Copy4 } from "lucide-react";
-import * as React6 from "react";
-import { jsx as jsx27, jsxs as jsxs16, Fragment as Fragment4 } from "react/jsx-runtime";
+// src/docskit/api/api-reference-page.tsx
+import { jsx as jsx26, jsxs as jsxs13 } from "react/jsx-runtime";
 
-function ResponseBlock({ data, title, className }) {
-  const [copied, copy] = useCopyToClipboard();
-  const jsonString = JSON.stringify(data, null, 2);
-  const handleCopy = () => {
-    copy(jsonString);
-  };
-  return /* @__PURE__ */ jsxs16("div", {
-    className: cn("group rounded-lg border border-[var(--openpkg-border-subtle)] overflow-hidden bg-[var(--openpkg-bg-secondary)]", className),
+function APIReferencePage({
+  title,
+  description,
+  children,
+  className
+}) {
+  return /* @__PURE__ */ jsxs13("div", {
+    className: cn("max-w-7xl mx-auto px-4 sm:px-6 lg:px-8", className),
     children: [
-      title && /* @__PURE__ */ jsxs16("div", {
-        className: "flex items-center justify-between px-4 py-2 border-b border-[var(--openpkg-border-subtle)] bg-[var(--openpkg-bg-tertiary)]",
+      /* @__PURE__ */ jsxs13("header", {
+        className: "py-8 border-b border-border",
         children: [
-          /* @__PURE__ */ jsx27("span", {
-            className: "text-xs font-medium text-[var(--openpkg-text-muted)] uppercase tracking-wide",
+          /* @__PURE__ */ jsx26("h1", {
+            className: "text-3xl font-bold text-foreground",
             children: title
           }),
-          /* @__PURE__ */ jsx27("button", {
-            type: "button",
-            onClick: handleCopy,
-            className: "p-1 rounded text-[var(--openpkg-text-muted)] hover:text-[var(--openpkg-text-primary)] opacity-0 group-hover:opacity-100 transition-opacity cursor-pointer",
-            "aria-label": "Copy response",
-            children: copied ? /* @__PURE__ */ jsx27(Check4, {
-              size: 14
-            }) : /* @__PURE__ */ jsx27(Copy4, {
-              size: 14
-            })
+          description && /* @__PURE__ */ jsx26("div", {
+            className: "mt-4 text-lg text-muted-foreground prose prose-lg dark:prose-invert max-w-none",
+            children: description
           })
         ]
       }),
-      /* @__PURE__ */ jsxs16("div", {
-        className: "relative",
-        children: [
-          /* @__PURE__ */ jsx27("pre", {
-            className: "p-4 overflow-auto text-sm font-mono leading-relaxed",
-            children: /* @__PURE__ */ jsx27("code", {
-              children: /* @__PURE__ */ jsx27(JsonHighlight, {
-                json: data
-              })
-            })
-          }),
-          !title && /* @__PURE__ */ jsx27("button", {
-            type: "button",
-            onClick: handleCopy,
-            className: "absolute top-3 right-3 p-1.5 rounded text-[var(--openpkg-text-muted)] hover:text-[var(--openpkg-text-primary)] opacity-0 group-hover:opacity-100 transition-opacity cursor-pointer",
-            "aria-label": "Copy response",
-            children: copied ? /* @__PURE__ */ jsx27(Check4, {
-              size: 14
-            }) : /* @__PURE__ */ jsx27(Copy4, {
-              size: 14
-            })
-          })
-        ]
+      /* @__PURE__ */ jsx26("div", {
+        children
       })
     ]
   });
 }
-function JsonHighlight({ json, depth = 0 }) {
-  const indent = "  ".repeat(depth);
-  const nextIndent = "  ".repeat(depth + 1);
-  if (json === null) {
-    return /* @__PURE__ */ jsx27("span", {
-      className: "text-[var(--openpkg-syn-number)]",
-      children: "null"
-    });
-  }
-  if (typeof json === "boolean") {
-    return /* @__PURE__ */ jsx27("span", {
-      className: "text-[var(--openpkg-syn-boolean)]",
-      children: json ? "true" : "false"
-    });
-  }
-  if (typeof json === "number") {
-    return /* @__PURE__ */ jsx27("span", {
-      className: "text-[var(--openpkg-syn-number)]",
-      children: json
-    });
-  }
-  if (typeof json === "string") {
-    return /* @__PURE__ */ jsxs16("span", {
-      className: "text-[var(--openpkg-syn-string)]",
-      children: [
-        '"',
-        json,
-        '"'
-      ]
-    });
-  }
-  if (Array.isArray(json)) {
-    if (json.length === 0) {
-      return /* @__PURE__ */ jsx27("span", {
-        className: "text-[var(--openpkg-syn-punctuation)]",
-        children: "[]"
-      });
-    }
-    return /* @__PURE__ */ jsxs16(Fragment4, {
-      children: [
-        /* @__PURE__ */ jsx27("span", {
-          className: "text-[var(--openpkg-syn-punctuation)]",
-          children: "["
-        }),
-        `
-`,
-        json.map((item, i) => /* @__PURE__ */ jsxs16(React6.Fragment, {
-          children: [
-            nextIndent,
-            /* @__PURE__ */ jsx27(JsonHighlight, {
-              json: item,
-              depth: depth + 1
-            }),
-            i < json.length - 1 && /* @__PURE__ */ jsx27("span", {
-              className: "text-[var(--openpkg-syn-punctuation)]",
-              children: ","
-            }),
-            `
-`
-          ]
-        }, i)),
-        indent,
-        /* @__PURE__ */ jsx27("span", {
-          className: "text-[var(--openpkg-syn-punctuation)]",
-          children: "]"
-        })
-      ]
-    });
-  }
-  if (typeof json === "object") {
-    const entries = Object.entries(json);
-    if (entries.length === 0) {
-      return /* @__PURE__ */ jsx27("span", {
-        className: "text-[var(--openpkg-syn-punctuation)]",
-        children: "{}"
-      });
-    }
-    return /* @__PURE__ */ jsxs16(Fragment4, {
+// src/docskit/api/api-section.tsx
+import { jsx as jsx27, jsxs as jsxs14 } from "react/jsx-runtime";
+
+function APISection({
+  title,
+  id,
+  description,
+  children,
+  languages,
+  examples,
+  externalLink,
+  codePanelTitle,
+  className
+}) {
+  return /* @__PURE__ */ jsx27("section", {
+    id,
+    className: cn("py-8 border-b border-border last:border-b-0", className),
+    children: /* @__PURE__ */ jsxs14("div", {
+      className: "grid grid-cols-1 lg:grid-cols-2 gap-8 lg:gap-12",
       children: [
-        /* @__PURE__ */ jsx27("span", {
-          className: "text-[var(--openpkg-syn-punctuation)]",
-          children: "{"
-        }),
-        `
-`,
-        entries.map(([key, value], i) => /* @__PURE__ */ jsxs16(React6.Fragment, {
+        /* @__PURE__ */ jsxs14("div", {
+          className: "space-y-6",
           children: [
-            nextIndent,
-            /* @__PURE__ */ jsxs16("span", {
-              className: "text-[var(--openpkg-syn-property)]",
+            /* @__PURE__ */ jsxs14("div", {
               children: [
-                '"',
-                key,
-                '"'
-              ]
-            }),
-            /* @__PURE__ */ jsx27("span", {
-              className: "text-[var(--openpkg-syn-punctuation)]",
-              children: ": "
-            }),
-            /* @__PURE__ */ jsx27(JsonHighlight, {
-              json: value,
-              depth: depth + 1
-            }),
-            i < entries.length - 1 && /* @__PURE__ */ jsx27("span", {
-              className: "text-[var(--openpkg-syn-punctuation)]",
-              children: ","
+                /* @__PURE__ */ jsx27("h2", {
+                  className: "text-2xl font-semibold text-foreground",
+                  children: title
+                }),
+                description && /* @__PURE__ */ jsx27("div", {
+                  className: "mt-3 text-muted-foreground prose prose-sm dark:prose-invert",
+                  children: description
+                })
+              ]
             }),
-            `
-`
+            children
           ]
-        }, key)),
-        indent,
-        /* @__PURE__ */ jsx27("span", {
-          className: "text-[var(--openpkg-syn-punctuation)]",
-          children: "}"
+        }),
+        /* @__PURE__ */ jsx27("div", {
+          className: "lg:pl-4",
+          children: /* @__PURE__ */ jsx27(APICodePanel, {
+            languages,
+            examples,
+            externalLink,
+            title: codePanelTitle,
+            className: "max-h-[400px] lg:max-h-none"
+          })
         })
       ]
-    });
-  }
-  return /* @__PURE__ */ jsx27("span", {
-    className: "text-[var(--openpkg-text-primary)]",
-    children: String(json)
+    })
   });
 }
-// src/docskit/code.tsx
-import { highlight as highlight2, Pre as Pre2 } from "codehike/code";
-
-// src/docskit/code.copy.tsx
-import { Check as Check5, Copy as Copy5 } from "lucide-react";
+// src/docskit/api/code-block.tsx
 import { jsx as jsx28 } from "react/jsx-runtime";
 
-function CopyButton({
-  text,
-  className,
-  variant = "floating"
+function CodeBlock({
+  code,
+  language = "typescript",
+  showLineNumbers = false,
+  className
 }) {
-  const [copied, copy] = useCopyToClipboard();
-  return /* @__PURE__ */ jsx28("button", {
-    type: "button",
-    className: cn("cursor-pointer transition-opacity duration-200", variant === "floating" && [
-      "size-8 flex items-center justify-center",
-      "rounded border border-dk-border bg-dk-background",
-      "opacity-0 group-hover:opacity-100"
-    ], variant === "inline" && "rounded", className),
-    onClick: () => copy(text),
-    "aria-label": "Copy to clipboard",
-    children: copied ? /* @__PURE__ */ jsx28(Check5, {
-      size: 16,
-      className: "block"
-    }) : /* @__PURE__ */ jsx28(Copy5, {
-      size: 16,
-      className: "block"
-    })
+  const flags = `-c${showLineNumbers ? "n" : ""}`;
+  return /* @__PURE__ */ jsx28(ClientDocsKitCode, {
+    codeblock: {
+      value: code,
+      lang: language,
+      meta: flags
+    },
+    className: cn("my-0 border-[var(--openpkg-border-subtle)]", className)
   });
 }
+// src/docskit/api/collapsible-panel.tsx
+import { ChevronRight } from "lucide-react";
+import { useId as useId2, useState as useState6 } from "react";
+import { jsx as jsx29, jsxs as jsxs15 } from "react/jsx-runtime";
 
-// src/docskit/code.icon.tsx
-import { TerminalIcon } from "lucide-react";
-import { themeIcons } from "seti-icons";
-import { jsx as jsx29 } from "react/jsx-runtime";
-function CodeIcon({
+function CollapsiblePanel({
   title,
-  lang,
+  children,
+  defaultExpanded = false,
+  expanded: controlledExpanded,
+  onExpandedChange,
   className
 }) {
-  if (title?.toLowerCase() === "terminal output" || title?.toLowerCase() === "terminal" || lang === "sh" || lang === "shell" || lang === "bash") {
-    return /* @__PURE__ */ jsx29(TerminalIcon, {
-      size: 16,
-      className,
-      style: { marginTop: -3.5 }
-    });
-  }
-  const ext = lang === "rust" ? "rs" : lang === "typescript" ? "ts" : lang;
-  const filename = `x.${ext}`;
-  const { svg } = getIcon(filename);
-  const __html = svg.replace(/svg/, `svg fill='currentColor' style='margin: -4px; height: 24px; width: 24px;'`);
-  return /* @__PURE__ */ jsx29("span", {
-    className,
-    children: /* @__PURE__ */ jsx29("span", {
-      dangerouslySetInnerHTML: { __html },
-      style: { display: "contents" }
-    })
+  const [internalExpanded, setInternalExpanded] = useState6(defaultExpanded);
+  const isControlled = controlledExpanded !== undefined;
+  const expanded = isControlled ? controlledExpanded : internalExpanded;
+  const contentId = useId2();
+  const toggle = () => {
+    const next = !expanded;
+    if (isControlled) {
+      onExpandedChange?.(next);
+    } else {
+      setInternalExpanded(next);
+    }
+  };
+  return /* @__PURE__ */ jsxs15("div", {
+    className: cn("openpkg-collapsible-panel", className),
+    children: [
+      /* @__PURE__ */ jsxs15("button", {
+        type: "button",
+        onClick: toggle,
+        "aria-expanded": expanded,
+        "aria-controls": contentId,
+        className: cn("openpkg-collapsible-trigger", "flex items-center gap-2.5 w-full", "px-4 py-3", "bg-[var(--openpkg-bg-collapsible)]", "border border-[var(--openpkg-border-subtle)]", "rounded-md", "cursor-pointer", "transition-all duration-150", "hover:bg-[var(--openpkg-bg-tertiary)]", expanded && "rounded-b-none border-b-transparent mb-0", !expanded && "mb-2"),
+        children: [
+          /* @__PURE__ */ jsx29(ChevronRight, {
+            size: 14,
+            className: cn("text-[var(--openpkg-text-muted)]", "transition-transform duration-200", expanded && "rotate-90")
+          }),
+          /* @__PURE__ */ jsx29("span", {
+            className: "text-[13px] font-medium text-[var(--openpkg-text-secondary)]",
+            children: title
+          })
+        ]
+      }),
+      /* @__PURE__ */ jsx29("div", {
+        id: contentId,
+        role: "region",
+        className: cn("openpkg-collapsible-content", "grid transition-[grid-template-rows,opacity] duration-200 ease-out", expanded ? "grid-rows-[1fr] opacity-100" : "grid-rows-[0fr] opacity-0"),
+        children: /* @__PURE__ */ jsx29("div", {
+          className: cn("min-h-0 overflow-hidden", "bg-[var(--openpkg-bg-code)]", "border border-[var(--openpkg-border-subtle)]", "border-t-0", "rounded-b-md", "mb-2"),
+          children
+        })
+      })
+    ]
   });
 }
-var getIcon = themeIcons({
-  white: "#d4d7d6",
-  grey: "#4d5a5e",
-  "grey-light": "#6d8086",
-  blue: "#519aba",
-  green: "#8dc149",
-  orange: "#e37933",
-  pink: "#f55385",
-  purple: "#a074c4",
-  red: "#cc3e44",
-  yellow: "#cbcb41",
-  ignore: "#41535b"
+// src/docskit/api/endpoint-badge.tsx
+import { cva } from "class-variance-authority";
+import * as React4 from "react";
+import { jsx as jsx30 } from "react/jsx-runtime";
+var endpointBadgeVariants = cva("inline-flex items-center justify-center font-mono font-bold uppercase tracking-wide rounded shrink-0", {
+  variants: {
+    method: {
+      GET: "bg-emerald-500/15 text-emerald-500",
+      POST: "bg-blue-500/15 text-blue-500",
+      PUT: "bg-amber-500/15 text-amber-500",
+      DELETE: "bg-rose-500/15 text-rose-500",
+      PATCH: "bg-violet-500/15 text-violet-500"
+    },
+    size: {
+      sm: "h-5 px-1.5 text-[10px]",
+      md: "h-6 px-2 text-xs"
+    }
+  },
+  defaultVariants: {
+    method: "GET",
+    size: "md"
+  }
+});
+var EndpointBadge = React4.forwardRef(({ className, method, size, ...props }, ref) => {
+  return /* @__PURE__ */ jsx30("span", {
+    ref,
+    className: cn(endpointBadgeVariants({ method, size, className })),
+    ...props,
+    children: method
+  });
 });
+EndpointBadge.displayName = "EndpointBadge";
+// src/docskit/api/endpoint-header.tsx
+import { Check as Check2, Copy as Copy2 } from "lucide-react";
+import * as React5 from "react";
+import { useState as useState7 } from "react";
+import { jsx as jsx31, jsxs as jsxs16 } from "react/jsx-runtime";
 
-// src/docskit/code.tsx
-import { jsx as jsx30, jsxs as jsxs17 } from "react/jsx-runtime";
-async function DocsKitCode(props) {
-  const { codeblock, className, ...rest } = props;
-  const group = await toCodeGroup({ codeblocks: [codeblock], ...rest });
-  return /* @__PURE__ */ jsx30(SingleCode, {
-    group,
-    className
+var EndpointHeader = React5.forwardRef(({ className, method, path, copyable = true, ...props }, ref) => {
+  const [copied, setCopied] = useState7(false);
+  const handleCopy = () => {
+    navigator.clipboard.writeText(path);
+    setCopied(true);
+    setTimeout(() => setCopied(false), 1200);
+  };
+  return /* @__PURE__ */ jsxs16("div", {
+    ref,
+    className: cn("group flex items-center gap-3 py-2 px-3 rounded-lg bg-muted/50 border border-border", className),
+    ...props,
+    children: [
+      /* @__PURE__ */ jsx31(EndpointBadge, {
+        method
+      }),
+      /* @__PURE__ */ jsx31("code", {
+        className: "font-mono text-sm text-foreground flex-1",
+        children: path
+      }),
+      copyable && /* @__PURE__ */ jsx31("button", {
+        type: "button",
+        onClick: handleCopy,
+        className: cn("p-1.5 rounded text-muted-foreground hover:text-foreground", "opacity-0 group-hover:opacity-100 transition-opacity cursor-pointer"),
+        "aria-label": "Copy path",
+        children: copied ? /* @__PURE__ */ jsx31(Check2, {
+          size: 14
+        }) : /* @__PURE__ */ jsx31(Copy2, {
+          size: 14
+        })
+      })
+    ]
   });
-}
-async function SingleCode(props) {
-  const { pre, title, code, icon: icon2, options } = props.group.tabs[0];
-  const showCopy = options?.copyButton;
+});
+EndpointHeader.displayName = "EndpointHeader";
+// src/docskit/api/enum-values-section.tsx
+import { jsx as jsx32, jsxs as jsxs17 } from "react/jsx-runtime";
+
+function EnumValuesSection({
+  values,
+  header = "Possible values",
+  className
+}) {
+  if (values.length === 0)
+    return null;
   return /* @__PURE__ */ jsxs17("div", {
-    className: cn("group rounded overflow-hidden relative border-dk-border flex flex-col border my-4 not-prose", props.className),
+    className: cn("openpkg-enum-section", "mt-3", className),
     children: [
-      title ? /* @__PURE__ */ jsx30("div", {
-        className: cn("border-b-[1px] border-dk-border bg-dk-tabs-background px-3 py-0", "w-full h-9 flex items-center shrink-0", "text-dk-tab-inactive-foreground text-sm font-mono"),
-        children: /* @__PURE__ */ jsxs17("div", {
-          className: "flex items-center h-5 gap-2",
+      /* @__PURE__ */ jsx32("div", {
+        className: cn("openpkg-enum-header", "text-[11px] font-medium", "text-[var(--openpkg-text-muted)]", "mb-2.5 pb-2", "border-b border-[var(--openpkg-border-subtle)]"),
+        children: header
+      }),
+      /* @__PURE__ */ jsx32("div", {
+        className: "openpkg-enum-values flex flex-col gap-0.5",
+        children: values.map((item) => /* @__PURE__ */ jsxs17("div", {
+          className: cn("openpkg-enum-value", "py-2.5 px-3", "bg-[var(--openpkg-bg-secondary)]", "rounded"),
           children: [
-            /* @__PURE__ */ jsx30("div", {
-              className: "size-4",
-              children: icon2
+            /* @__PURE__ */ jsx32("span", {
+              className: cn("openpkg-enum-value-name", "font-mono text-xs font-medium", "text-[var(--openpkg-syn-string)]", "bg-[var(--openpkg-bg-badge)]", "px-1.5 py-0.5 rounded", "inline-block mb-1"),
+              children: item.value
             }),
-            /* @__PURE__ */ jsx30("span", {
-              className: "leading-none",
-              children: title
+            item.description && /* @__PURE__ */ jsx32("p", {
+              className: cn("openpkg-enum-value-description", "text-xs text-[var(--openpkg-text-secondary)]", "leading-relaxed", "[&_code]:font-mono [&_code]:text-[11px] [&_code]:bg-[var(--openpkg-bg-badge)] [&_code]:px-1 [&_code]:py-0.5 [&_code]:rounded"),
+              children: item.description
             })
           ]
-        })
-      }) : null,
-      /* @__PURE__ */ jsxs17("div", {
-        className: "relative flex items-start",
-        children: [
-          pre,
-          showCopy && /* @__PURE__ */ jsx30(CopyButton, {
-            text: code,
-            variant: "floating",
-            className: cn("absolute right-3 z-10 text-dk-tab-inactive-foreground", title ? "top-3" : "top-1/2 -translate-y-1/2")
-          })
-        ]
+        }, item.value))
       })
     ]
   });
 }
-async function toCodeGroup(props) {
-  const rawFlags = props.flags?.startsWith("-") ? props.flags.slice(1) : props.flags;
-  const groupOptions = flagsToOptions(rawFlags);
-  const tabs = await Promise.all(props.codeblocks.map(async (tab) => {
-    const { flags, title } = extractFlags(tab);
-    const tabOptions = flagsToOptions(flags);
-    const options = { ...groupOptions, ...tabOptions };
-    const highlighted = await highlight2({ ...tab, lang: tab.lang || "txt" }, theme);
-    const handlers = getHandlers(options);
-    if (props.handlers) {
-      handlers.push(...props.handlers);
-    }
-    const { background: _background, ...highlightedStyle } = highlighted.style;
-    return {
-      options,
-      title,
-      code: highlighted.code,
-      icon: /* @__PURE__ */ jsx30(CodeIcon, {
-        title,
-        lang: tab.lang,
-        className: "opacity-60"
-      }),
-      lang: tab.lang,
-      pre: /* @__PURE__ */ jsx30(Pre2, {
-        code: highlighted,
-        className: "overflow-auto px-0 py-3 m-0 rounded-none !bg-dk-background selection:bg-dk-selection selection:text-current max-h-full flex-1",
-        style: highlightedStyle,
-        handlers
-      })
-    };
-  }));
-  return {
-    storage: props.storage,
-    options: groupOptions,
-    tabs
-  };
-}
-function extractFlags(codeblock) {
-  const flags = codeblock.meta.split(" ").filter((flag) => flag.startsWith("-"))[0] ?? "";
-  const metaWithoutFlags = !flags ? codeblock.meta : codeblock.meta === flags ? "" : codeblock.meta.replace(` ${flags}`, "").trim();
-  const title = metaWithoutFlags.trim();
-  return { title, flags: flags.slice(1) };
+// src/docskit/api/example-chips.tsx
+import { jsx as jsx33 } from "react/jsx-runtime";
+
+function ExampleChips({
+  examples,
+  activeId,
+  onSelect,
+  className
+}) {
+  return /* @__PURE__ */ jsx33("div", {
+    className: cn("openpkg-example-chips", "flex flex-wrap gap-2 mb-5", className),
+    children: examples.map((example) => {
+      const isActive = example.id === activeId;
+      return /* @__PURE__ */ jsx33("button", {
+        type: "button",
+        onClick: () => onSelect(example.id),
+        className: cn("openpkg-example-chip", "text-xs font-medium", "px-3 py-1.5", "border rounded-md", "cursor-pointer", "transition-all duration-150", isActive ? [
+          "border-[var(--openpkg-border-chip-active)]",
+          "text-[var(--openpkg-text-primary)]",
+          "bg-[var(--openpkg-bg-tertiary)]"
+        ] : [
+          "border-[var(--openpkg-border-chip)]",
+          "text-[var(--openpkg-text-secondary)]",
+          "bg-transparent",
+          "hover:border-[var(--openpkg-text-muted)]",
+          "hover:text-[var(--openpkg-text-primary)]"
+        ]),
+        "aria-pressed": isActive,
+        children: example.label
+      }, example.id);
+    })
+  });
 }
-// src/hooks/use-local-storage.ts
-import React7 from "react";
-function useStateOrLocalStorage(key, initialState) {
-  const [state, setState] = React7.useState(initialState);
-  React7.useLayoutEffect(() => {
-    if (!key)
+// src/docskit/api/example-section.tsx
+import { useEffect as useEffect4, useRef as useRef3, useState as useState9 } from "react";
+
+// src/docskit/hooks/use-sync-scroll.tsx
+import {
+  createContext as createContext2,
+  useCallback,
+  useContext as useContext2,
+  useEffect as useEffect3,
+  useMemo,
+  useRef as useRef2,
+  useState as useState8
+} from "react";
+import { jsx as jsx34 } from "react/jsx-runtime";
+
+var SyncScrollContext = createContext2(null);
+function SyncScrollProvider({
+  children,
+  rootMargin = "-20% 0px -60% 0px",
+  scrollBehavior = "smooth"
+}) {
+  const [activeSection, setActiveSection] = useState8(null);
+  const sectionsRef = useRef2(new Map);
+  const rightColumnRef = useRef2(null);
+  const isScrollingRef = useRef2(false);
+  const registerSection = useCallback((id, ref) => {
+    sectionsRef.current.set(id, ref);
+  }, []);
+  const unregisterSection = useCallback((id) => {
+    sectionsRef.current.delete(id);
+  }, []);
+  const registerRightColumn = useCallback((ref) => {
+    rightColumnRef.current = ref;
+  }, []);
+  const scrollToSection = useCallback((id) => {
+    const rightColumn = rightColumnRef.current?.current;
+    if (!rightColumn)
       return;
-    const storedValue = window.localStorage.getItem(key);
-    if (storedValue != null) {
-      setState(storedValue);
+    const targetExample = rightColumn.querySelector(`[data-section="${id}"]`);
+    if (targetExample instanceof HTMLElement) {
+      const targetTop = targetExample.offsetTop - 48;
+      rightColumn.scrollTo({ top: targetTop, behavior: scrollBehavior });
     }
-    const onStorageChange = (e) => {
-      if (e.key === key) {
-        const storedValue2 = window.localStorage.getItem(key);
-        setState(storedValue2 || initialState);
+  }, [scrollBehavior]);
+  useEffect3(() => {
+    if (typeof window === "undefined")
+      return;
+    const handleIntersect = (entries) => {
+      if (isScrollingRef.current)
+        return;
+      for (const entry of entries) {
+        if (entry.isIntersecting) {
+          const sectionId = entry.target.getAttribute("data-section");
+          if (sectionId) {
+            setActiveSection(sectionId);
+            scrollToSection(sectionId);
+          }
+          break;
+        }
       }
     };
-    window.addEventListener("storage", onStorageChange);
-    return () => window.removeEventListener("storage", onStorageChange);
-  }, [key, initialState]);
-  const setStorage = !key ? setState : (value) => {
-    if (typeof window !== "undefined") {
-      window.localStorage.setItem(key, value);
-      window.dispatchEvent(new StorageEvent("storage", { key }));
+    const observer = new IntersectionObserver(handleIntersect, {
+      rootMargin,
+      threshold: 0
+    });
+    for (const [_id, ref] of sectionsRef.current) {
+      if (ref.current) {
+        observer.observe(ref.current);
+      }
     }
-  };
-  return [state, setStorage];
-}
-
-// src/docskit/tabs.tsx
-import * as TabsPrimitive from "@radix-ui/react-tabs";
-import { jsx as jsx31 } from "react/jsx-runtime";
-
-function Tabs({
-  className,
-  ...props
-}) {
-  return /* @__PURE__ */ jsx31(TabsPrimitive.Root, {
-    "data-slot": "tabs",
-    className: cn("flex flex-col gap-2", className),
-    ...props
+    return () => {
+      observer.disconnect();
+    };
+  }, [rootMargin, scrollToSection]);
+  const value = useMemo(() => ({
+    activeSection,
+    registerSection,
+    unregisterSection,
+    scrollToSection,
+    registerRightColumn
+  }), [activeSection, registerSection, unregisterSection, scrollToSection, registerRightColumn]);
+  return /* @__PURE__ */ jsx34(SyncScrollContext.Provider, {
+    value,
+    children
   });
 }
-function TabsList({
-  className,
-  ...props
+function useSyncScroll() {
+  const context = useContext2(SyncScrollContext);
+  if (!context) {
+    throw new Error("useSyncScroll must be used within SyncScrollProvider");
+  }
+  return context;
+}
+function useSyncSection(id) {
+  const { registerSection, unregisterSection } = useSyncScroll();
+  const ref = useRef2(null);
+  useEffect3(() => {
+    registerSection(id, ref);
+    return () => unregisterSection(id);
+  }, [id, registerSection, unregisterSection]);
+  return ref;
+}
+
+// src/docskit/api/example-section.tsx
+import { jsx as jsx35, jsxs as jsxs18 } from "react/jsx-runtime";
+
+function ExampleSection({
+  id,
+  examples,
+  dataSource,
+  response,
+  notes,
+  className
 }) {
-  return /* @__PURE__ */ jsx31(TabsPrimitive.List, {
-    "data-slot": "tabs-list",
-    className: cn("bg-[var(--openpkg-bg-secondary)] text-[var(--openpkg-text-muted)] inline-flex h-9 w-fit items-center justify-center rounded-lg p-[3px]", className),
-    ...props
+  const [activeExampleId, setActiveExampleId] = useState9(examples[0]?.id ?? "");
+  const ref = useRef3(null);
+  const syncScroll = useSyncScrollSafe();
+  const activeExample = examples.find((e) => e.id === activeExampleId) ?? examples[0];
+  const isActive = syncScroll?.activeSection === id;
+  useEffect4(() => {
+    if (ref.current) {
+      ref.current.setAttribute("data-section", id);
+    }
+  }, [id]);
+  return /* @__PURE__ */ jsxs18("div", {
+    ref,
+    "data-section": id,
+    className: cn("openpkg-example-section", "mb-12 last:mb-0", "transition-opacity duration-300", isActive ? "opacity-100" : "opacity-40", className),
+    children: [
+      examples.length > 1 && /* @__PURE__ */ jsx35(ExampleChips, {
+        examples: examples.map((e) => ({ id: e.id, label: e.label })),
+        activeId: activeExampleId,
+        onSelect: setActiveExampleId
+      }),
+      activeExample && /* @__PURE__ */ jsx35(CodeBlock, {
+        code: activeExample.code,
+        language: activeExample.language ?? "typescript",
+        showLineNumbers: true
+      }),
+      dataSource && /* @__PURE__ */ jsx35(CollapsiblePanel, {
+        title: "Data source",
+        children: /* @__PURE__ */ jsx35("div", {
+          className: "p-4",
+          children: /* @__PURE__ */ jsx35(CodeBlock, {
+            code: dataSource,
+            language: "sql"
+          })
+        })
+      }),
+      response && /* @__PURE__ */ jsx35(CollapsiblePanel, {
+        title: "Response",
+        children: /* @__PURE__ */ jsx35("div", {
+          className: "p-4",
+          children: /* @__PURE__ */ jsx35(CodeBlock, {
+            code: response,
+            language: "json"
+          })
+        })
+      }),
+      notes && /* @__PURE__ */ jsx35(CollapsiblePanel, {
+        title: "Notes",
+        children: /* @__PURE__ */ jsx35("div", {
+          className: cn("openpkg-panel-note", "p-4", "text-[13px] text-[var(--openpkg-text-secondary)]", "leading-relaxed", "[&_code]:font-mono [&_code]:text-xs [&_code]:bg-[var(--openpkg-bg-badge)] [&_code]:px-1.5 [&_code]:py-0.5 [&_code]:rounded"),
+          children: typeof notes === "string" ? /* @__PURE__ */ jsx35("p", {
+            children: notes
+          }) : notes
+        })
+      })
+    ]
   });
 }
-function TabsTrigger({
-  className,
-  ...props
+function useSyncScrollSafe() {
+  try {
+    return useSyncScroll();
+  } catch {
+    return null;
+  }
+}
+// src/docskit/api/expandable-parameter.tsx
+import { formatSchema } from "@openpkg-ts/sdk/browser";
+import { useState as useState10 } from "react";
+
+// src/docskit/api/parameter-item.tsx
+import { Link } from "lucide-react";
+import { jsx as jsx36, jsxs as jsxs19 } from "react/jsx-runtime";
+
+function APIParameterItem({
+  name,
+  parentPath,
+  type,
+  required,
+  optional,
+  expandable: expandable2,
+  description,
+  children,
+  anchorId,
+  showAnchor = false,
+  className
 }) {
-  return /* @__PURE__ */ jsx31(TabsPrimitive.Trigger, {
-    "data-slot": "tabs-trigger",
-    className: cn("data-[state=active]:text-[var(--openpkg-text-primary)] focus-visible:ring-[var(--openpkg-accent-primary)] focus-visible:outline-[var(--openpkg-accent-primary)] text-[var(--openpkg-text-muted)] inline-flex h-full flex-1 items-center justify-center gap-1.5 px-2 py-1 text-sm font-normal whitespace-nowrap transition-colors focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className),
-    ...props
+  const handleAnchorClick = () => {
+    if (anchorId && typeof window !== "undefined") {
+      window.location.hash = anchorId;
+      navigator.clipboard?.writeText(window.location.href);
+    }
+  };
+  return /* @__PURE__ */ jsxs19("div", {
+    id: anchorId,
+    className: cn("openpkg-param", "py-5 border-b border-[var(--openpkg-border-subtle)]", "last:border-b-0", className),
+    children: [
+      /* @__PURE__ */ jsxs19("div", {
+        className: "openpkg-param-header flex items-center gap-2.5 mb-2 flex-wrap",
+        children: [
+          showAnchor && /* @__PURE__ */ jsx36("button", {
+            type: "button",
+            onClick: handleAnchorClick,
+            className: cn("openpkg-anchor-link", "flex items-center justify-center w-4 h-4", "opacity-0 group-hover:opacity-100 hover:opacity-100", "text-[var(--openpkg-text-muted)]", "hover:text-[var(--openpkg-accent-blue)]", "cursor-pointer transition-opacity"),
+            "aria-label": "Copy link",
+            children: /* @__PURE__ */ jsx36(Link, {
+              size: 14
+            })
+          }),
+          /* @__PURE__ */ jsxs19("span", {
+            className: "openpkg-param-name font-mono text-sm font-semibold",
+            children: [
+              parentPath && /* @__PURE__ */ jsx36("span", {
+                className: "text-[var(--openpkg-text-muted)]",
+                children: parentPath
+              }),
+              /* @__PURE__ */ jsx36("span", {
+                className: "text-[var(--openpkg-text-primary)]",
+                children: name
+              })
+            ]
+          }),
+          required && /* @__PURE__ */ jsx36("span", {
+            className: cn("openpkg-param-badge", "text-[11px] font-medium uppercase tracking-wide", "px-2 py-0.5 rounded", "bg-[var(--openpkg-bg-badge)]", "text-[var(--openpkg-text-muted)]"),
+            children: "Required"
+          }),
+          optional && /* @__PURE__ */ jsx36("span", {
+            className: cn("openpkg-param-badge", "text-[11px] font-medium uppercase tracking-wide", "px-2 py-0.5 rounded", "bg-[var(--openpkg-bg-badge)]", "text-[var(--openpkg-text-muted)]"),
+            children: "Optional"
+          }),
+          expandable2 && /* @__PURE__ */ jsx36("span", {
+            className: cn("openpkg-badge-expandable", "text-[10px] font-medium", "px-2 py-0.5 rounded", "text-[var(--openpkg-accent-purple)]", "bg-[color-mix(in_srgb,var(--openpkg-accent-purple)_12%,transparent)]"),
+            children: "Expandable"
+          }),
+          /* @__PURE__ */ jsx36("span", {
+            className: "openpkg-param-type text-[13px] text-[var(--openpkg-text-muted)]",
+            children: type
+          })
+        ]
+      }),
+      description && /* @__PURE__ */ jsx36("p", {
+        className: cn("openpkg-param-description", "text-sm text-[var(--openpkg-text-secondary)]", "leading-relaxed", "[&_code]:font-mono [&_code]:text-[13px] [&_code]:bg-[var(--openpkg-bg-badge)] [&_code]:px-1.5 [&_code]:py-0.5 [&_code]:rounded"),
+        children: description
+      }),
+      children
+    ]
   });
 }
-function TabsContent({
-  className,
-  ...props
+
+// src/docskit/api/nested-parameter-container.tsx
+import { jsx as jsx37 } from "react/jsx-runtime";
+
+function NestedParameterContainer({
+  children,
+  level = 0,
+  className
 }) {
-  return /* @__PURE__ */ jsx31(TabsPrimitive.Content, {
-    "data-slot": "tabs-content",
-    className: cn("flex-1 outline-none", className),
-    ...props
+  return /* @__PURE__ */ jsx37("div", {
+    className: cn("openpkg-nested-container", "border border-t-0", level === 0 ? "border-[var(--openpkg-border-medium)]" : "border-[var(--openpkg-border-subtle)]", "rounded-b-lg", "px-5", "mb-2", "[&>.openpkg-param]:py-5", "[&>.openpkg-param]:border-b", "[&>.openpkg-param]:border-[var(--openpkg-border-subtle)]", "[&>.openpkg-param:last-child]:border-b-0", className),
+    "data-level": level,
+    children
   });
 }
 
-// src/docskit/code.client.tsx
-import { jsx as jsx32, jsxs as jsxs18 } from "react/jsx-runtime";
+// src/docskit/api/nested-parameter-toggle.tsx
+import { Plus } from "lucide-react";
+import { jsx as jsx38, jsxs as jsxs20 } from "react/jsx-runtime";
 
-function MultiCode({
-  group,
+function NestedParameterToggle({
+  expanded,
+  onToggle,
+  count,
   className
 }) {
-  const [storedTitle, setCurrentTitle] = useStateOrLocalStorage(group.storage, group.tabs[0].title);
-  const current = group.tabs.find((tab) => tab.title === storedTitle) || group.tabs[0];
-  const { code } = current;
-  const currentTitle = current?.title;
-  return /* @__PURE__ */ jsxs18(Tabs, {
-    value: currentTitle,
-    onValueChange: setCurrentTitle,
-    className: cn("group border rounded selection:bg-dk-selection selection:text-current border-dk-border overflow-hidden relative flex flex-col max-h-full min-h-0 my-4 gap-0 not-prose", className),
+  return /* @__PURE__ */ jsxs20("button", {
+    type: "button",
+    onClick: onToggle,
+    className: cn("openpkg-nested-toggle", "inline-flex items-center gap-2", "font-sans text-[13px] font-medium", "text-[var(--openpkg-text-secondary)]", "bg-transparent", "border border-[var(--openpkg-border-medium)]", "rounded-lg", "px-4 py-2.5", "mt-3", "cursor-pointer", "transition-all duration-150", "hover:border-[var(--openpkg-text-muted)]", "hover:text-[var(--openpkg-text-primary)]", expanded && "rounded-b-none border-b-transparent mb-0", className),
+    "aria-expanded": expanded,
     children: [
-      /* @__PURE__ */ jsx32(TabsList, {
-        className: cn("border-b border-dk-border bg-dk-tabs-background w-full h-9 min-h-9 shrink-0", "rounded-none p-0 m-0 justify-start items-stretch"),
-        children: group.tabs.map(({ icon: icon2, title }, _index) => /* @__PURE__ */ jsxs18(TabsTrigger, {
-          value: title,
-          className: cn("rounded-none transition-colors duration-200 gap-1.5 px-3 font-mono justify-start grow-0", "border-r border-dk-border", "text-dk-tab-inactive-foreground data-[state=active]:text-dk-tab-active-foreground hover:text-dk-tab-active-foreground", "data-[state=active]:bg-dk-background/50"),
-          children: [
-            /* @__PURE__ */ jsx32("div", {
-              children: icon2
-            }),
-            /* @__PURE__ */ jsx32("span", {
-              className: "leading-none",
-              children: title
-            })
-          ]
-        }, title))
+      /* @__PURE__ */ jsx38(Plus, {
+        size: 12,
+        className: cn("transition-transform duration-200", expanded && "rotate-45")
       }),
-      /* @__PURE__ */ jsxs18(TabsContent, {
-        value: current.title,
-        className: "relative min-h-0 mt-0 flex flex-col",
+      /* @__PURE__ */ jsxs20("span", {
         children: [
-          current.pre,
-          group.options.copyButton && /* @__PURE__ */ jsx32(CopyButton, {
-            text: code,
-            variant: "floating",
-            className: "absolute right-3 top-3 z-10 text-dk-tab-inactive-foreground"
-          })
+          expanded ? "Hide" : "Show",
+          " child parameters",
+          count !== undefined && ` (${count})`
         ]
       })
     ]
   });
 }
-// src/docskit/code.client-highlight.tsx
-import {
-  highlight as highlight3,
-  Inline,
-  Pre as Pre3
-} from "codehike/code";
-import { useEffect as useEffect3, useState as useState7 } from "react";
-import { jsx as jsx33, jsxs as jsxs19 } from "react/jsx-runtime";
 
-function ClientDocsKitCode(props) {
-  const { codeblock, handlers: extraHandlers, className: wrapperClassName } = props;
-  const [highlighted, setHighlighted] = useState7(null);
-  const { title, flags } = extractFlags2(codeblock);
-  const options = flagsToOptions(flags);
-  useEffect3(() => {
-    let cancelled = false;
-    highlight3({ ...codeblock, lang: codeblock.lang || "txt" }, theme).then((result) => {
-      if (!cancelled)
-        setHighlighted(result);
-    });
-    return () => {
-      cancelled = true;
-    };
-  }, [codeblock.value, codeblock.lang, codeblock.meta, codeblock]);
-  if (!highlighted) {
-    return /* @__PURE__ */ jsx33(CodeBlockSkeleton, {
-      hasTitle: !!title
-    });
-  }
-  const handlers = getHandlers(options);
-  if (extraHandlers) {
-    handlers.push(...extraHandlers);
-  }
-  const { background: _background, ...highlightedStyle } = highlighted.style;
-  const showCopy = options?.copyButton;
-  const icon2 = /* @__PURE__ */ jsx33(CodeIcon, {
-    title,
-    lang: codeblock.lang,
-    className: "opacity-60"
-  });
-  return /* @__PURE__ */ jsxs19("div", {
-    className: cn("group rounded overflow-hidden relative border-dk-border flex flex-col border my-4 not-prose", wrapperClassName),
-    children: [
-      title ? /* @__PURE__ */ jsx33("div", {
-        className: cn("border-b-[1px] border-dk-border bg-dk-tabs-background px-3 py-0", "w-full h-9 flex items-center shrink-0", "text-dk-tab-inactive-foreground text-sm font-mono"),
-        children: /* @__PURE__ */ jsxs19("div", {
-          className: "flex items-center h-5 gap-2",
+// src/docskit/api/expandable-parameter.tsx
+import { jsx as jsx39, jsxs as jsxs21, Fragment as Fragment3 } from "react/jsx-runtime";
+
+function ExpandableParameter({
+  parameter,
+  parentPath,
+  defaultExpanded = false,
+  expanded: controlledExpanded,
+  onExpandedChange,
+  level = 0,
+  className
+}) {
+  const [internalExpanded, setInternalExpanded] = useState10(defaultExpanded);
+  const isControlled = controlledExpanded !== undefined;
+  const expanded = isControlled ? controlledExpanded : internalExpanded;
+  const handleToggle = () => {
+    const newValue = !expanded;
+    if (isControlled) {
+      onExpandedChange?.(newValue);
+    } else {
+      setInternalExpanded(newValue);
+    }
+  };
+  const { nestedParams, enumValues, hasChildren } = extractSchemaInfo(parameter.schema);
+  const type = formatSchema(parameter.schema);
+  const isRequired = parameter.required !== false;
+  return /* @__PURE__ */ jsx39("div", {
+    className: cn("openpkg-expandable-param", className),
+    children: /* @__PURE__ */ jsxs21(APIParameterItem, {
+      name: parameter.name,
+      parentPath,
+      type: hasChildren ? "object" : type,
+      required: isRequired,
+      expandable: hasChildren,
+      description: parameter.description,
+      anchorId: parentPath ? `${parentPath}${parameter.name}` : parameter.name,
+      showAnchor: level > 0,
+      children: [
+        enumValues.length > 0 && !nestedParams.length && /* @__PURE__ */ jsx39(EnumValuesSection, {
+          values: enumValues
+        }),
+        nestedParams.length > 0 && /* @__PURE__ */ jsxs21(Fragment3, {
           children: [
-            /* @__PURE__ */ jsx33("div", {
-              className: "size-4",
-              children: icon2
+            /* @__PURE__ */ jsx39(NestedParameterToggle, {
+              expanded,
+              onToggle: handleToggle,
+              count: nestedParams.length
             }),
-            /* @__PURE__ */ jsx33("span", {
-              className: "leading-none",
-              children: title
+            expanded && /* @__PURE__ */ jsx39(NestedParameterContainer, {
+              level,
+              children: nestedParams.map((nested) => /* @__PURE__ */ jsx39(ExpandableParameter, {
+                parameter: nested,
+                parentPath: `${parameter.name}.`,
+                level: level + 1
+              }, nested.name))
             })
           ]
         })
-      }) : null,
-      /* @__PURE__ */ jsxs19("div", {
-        className: "relative flex items-start",
+      ]
+    })
+  });
+}
+function extractSchemaInfo(schema) {
+  const result = {
+    nestedParams: [],
+    enumValues: [],
+    hasChildren: false
+  };
+  if (!schema || typeof schema !== "object")
+    return result;
+  const s = schema;
+  if (s.type === "object" && s.properties && typeof s.properties === "object") {
+    const props = s.properties;
+    const required = Array.isArray(s.required) ? s.required : [];
+    for (const [name, propSchema] of Object.entries(props)) {
+      result.nestedParams.push({
+        name,
+        schema: propSchema,
+        required: required.includes(name),
+        description: propSchema?.description
+      });
+    }
+  }
+  if (Array.isArray(s.enum)) {
+    result.enumValues = s.enum.map((value) => ({
+      value: String(value),
+      description: undefined
+    }));
+  }
+  result.hasChildren = result.nestedParams.length > 0 || result.enumValues.length > 0;
+  return result;
+}
+// src/docskit/api/method-section.tsx
+import { useEffect as useEffect5, useRef as useRef4 } from "react";
+import { jsx as jsx40, jsxs as jsxs22 } from "react/jsx-runtime";
+
+function MethodSection({
+  id,
+  title,
+  signature,
+  description,
+  notes,
+  children,
+  className
+}) {
+  const ref = useRef4(null);
+  const syncScroll = useSyncScrollSafe2();
+  useEffect5(() => {
+    if (syncScroll && ref.current) {
+      syncScroll.registerSection(id, ref);
+      return () => syncScroll.unregisterSection(id);
+    }
+  }, [id, syncScroll]);
+  return /* @__PURE__ */ jsxs22("section", {
+    ref,
+    id,
+    "data-section": id,
+    className: cn("openpkg-method-section", "mb-20 last:mb-0", className),
+    children: [
+      /* @__PURE__ */ jsx40("h2", {
+        className: cn("text-2xl font-semibold tracking-tight", "text-[var(--openpkg-text-primary)]", "mb-4"),
+        children: title
+      }),
+      signature && /* @__PURE__ */ jsx40("code", {
+        className: cn("block font-mono text-sm", "text-[var(--openpkg-text-muted)]", "mb-6"),
+        children: signature
+      }),
+      description && /* @__PURE__ */ jsx40("div", {
+        className: cn("openpkg-method-description", "text-[15px] leading-relaxed", "text-[var(--openpkg-text-secondary)]", "mb-6", "[&_a]:text-[var(--openpkg-accent-link)] [&_a]:no-underline [&_a]:font-medium hover:[&_a]:underline", "[&_code]:bg-[var(--openpkg-bg-badge)] [&_code]:px-1.5 [&_code]:py-0.5 [&_code]:rounded [&_code]:font-mono [&_code]:text-[13px]"),
+        children: typeof description === "string" ? /* @__PURE__ */ jsx40("p", {
+          children: description
+        }) : description
+      }),
+      notes && notes.length > 0 && /* @__PURE__ */ jsx40("ul", {
+        className: cn("openpkg-method-notes", "list-disc list-inside", "text-[15px] leading-relaxed", "text-[var(--openpkg-text-secondary)]", "mb-8 space-y-2"),
+        children: notes.map((note, i) => /* @__PURE__ */ jsx40("li", {
+          children: note
+        }, i))
+      }),
+      children && /* @__PURE__ */ jsxs22("div", {
+        className: "openpkg-method-params",
         children: [
-          /* @__PURE__ */ jsx33(Pre3, {
-            code: highlighted,
-            className: "overflow-auto px-0 py-3 m-0 rounded-none !bg-dk-background selection:bg-dk-selection selection:text-current max-h-full flex-1",
-            style: highlightedStyle,
-            handlers
+          /* @__PURE__ */ jsx40("h3", {
+            className: cn("text-xs font-semibold uppercase tracking-wider", "text-[var(--openpkg-text-muted)]", "mb-4 pb-2", "border-b border-[var(--openpkg-border-subtle)]"),
+            children: "Parameters"
           }),
-          showCopy && /* @__PURE__ */ jsx33(CopyButton, {
-            text: highlighted.code,
-            variant: "floating",
-            className: cn("absolute right-3 z-10 text-dk-tab-inactive-foreground", title ? "top-3" : "top-1/2 -translate-y-1/2")
-          })
+          children
         ]
       })
     ]
   });
 }
-function ClientTerminal(props) {
-  const { codeblock, handlers: extraHandlers } = props;
-  const [highlighted, setHighlighted] = useState7(null);
-  const { flags } = extractFlagsSimple(codeblock);
-  const options = flagsToOptions(flags);
-  useEffect3(() => {
-    let cancelled = false;
-    highlight3({ ...codeblock, lang: codeblock.lang || "bash" }, theme).then((result) => {
-      if (!cancelled)
-        setHighlighted(result);
-    });
-    return () => {
-      cancelled = true;
-    };
-  }, [codeblock.value, codeblock.lang, codeblock.meta, codeblock]);
-  if (!highlighted) {
-    return /* @__PURE__ */ jsx33(TerminalSkeleton, {});
-  }
-  const handlers = getHandlers(options);
-  if (extraHandlers) {
-    handlers.push(...extraHandlers);
+function useSyncScrollSafe2() {
+  try {
+    return useSyncScroll();
+  } catch {
+    return null;
   }
-  const { background: _background, ...highlightedStyle } = highlighted.style;
-  const showCopy = options?.copyButton;
-  const isMultiLine = highlighted.code.includes(`
-`);
-  return /* @__PURE__ */ jsxs19("div", {
-    className: "group rounded overflow-hidden relative border-dk-border flex flex-col border my-4 not-prose",
+}
+// src/docskit/api/parameter-list.tsx
+import { ChevronDown as ChevronDown2 } from "lucide-react";
+import * as React6 from "react";
+import { useState as useState11 } from "react";
+import { jsx as jsx41, jsxs as jsxs23 } from "react/jsx-runtime";
+
+function ParameterList({
+  title,
+  collapseAfter,
+  children,
+  className
+}) {
+  const [expanded, setExpanded] = useState11(false);
+  const childArray = React6.Children.toArray(children);
+  const shouldCollapse = collapseAfter !== undefined && childArray.length > collapseAfter;
+  const visibleChildren = shouldCollapse && !expanded ? childArray.slice(0, collapseAfter) : childArray;
+  const hiddenCount = shouldCollapse ? childArray.length - collapseAfter : 0;
+  return /* @__PURE__ */ jsxs23("div", {
+    className: cn("", className),
+    children: [
+      title && /* @__PURE__ */ jsx41("h3", {
+        className: "text-sm font-medium text-foreground mb-3 uppercase tracking-wide",
+        children: title
+      }),
+      /* @__PURE__ */ jsx41("div", {
+        className: "divide-y divide-border border-t border-b border-border",
+        children: visibleChildren
+      }),
+      shouldCollapse && !expanded && /* @__PURE__ */ jsxs23("button", {
+        type: "button",
+        onClick: () => setExpanded(true),
+        className: "flex items-center gap-1 mt-3 text-sm text-primary hover:underline cursor-pointer",
+        children: [
+          /* @__PURE__ */ jsx41(ChevronDown2, {
+            size: 14
+          }),
+          "Show ",
+          hiddenCount,
+          " more ",
+          hiddenCount === 1 ? "parameter" : "parameters"
+        ]
+      })
+    ]
+  });
+}
+// src/docskit/api/response-block.tsx
+import { Check as Check3, Copy as Copy3 } from "lucide-react";
+import { useState as useState12 } from "react";
+import { jsx as jsx42, jsxs as jsxs24 } from "react/jsx-runtime";
+
+function ResponseBlock({ data, title, className }) {
+  const [copied, setCopied] = useState12(false);
+  const jsonString = JSON.stringify(data, null, 2);
+  const handleCopy = () => {
+    navigator.clipboard.writeText(jsonString);
+    setCopied(true);
+    setTimeout(() => setCopied(false), 1200);
+  };
+  return /* @__PURE__ */ jsxs24("div", {
+    className: cn("group rounded-lg border border-border overflow-hidden bg-muted/30", className),
     children: [
-      /* @__PURE__ */ jsxs19("div", {
-        className: cn("border-b border-dk-border bg-dk-tabs-background", "w-full h-9 flex items-center justify-center shrink-0", "relative"),
+      title && /* @__PURE__ */ jsxs24("div", {
+        className: "flex items-center justify-between px-4 py-2 border-b border-border bg-muted/50",
         children: [
-          /* @__PURE__ */ jsxs19("div", {
-            className: "absolute left-3 flex items-center gap-2",
-            children: [
-              /* @__PURE__ */ jsx33("div", {
-                className: "size-3 rounded-full bg-dk-tab-inactive-foreground/30"
-              }),
-              /* @__PURE__ */ jsx33("div", {
-                className: "size-3 rounded-full bg-dk-tab-inactive-foreground/30"
-              }),
-              /* @__PURE__ */ jsx33("div", {
-                className: "size-3 rounded-full bg-dk-tab-inactive-foreground/30"
-              })
-            ]
+          /* @__PURE__ */ jsx42("span", {
+            className: "text-xs font-medium text-muted-foreground uppercase tracking-wide",
+            children: title
           }),
-          /* @__PURE__ */ jsx33("span", {
-            className: "sr-only",
-            children: "Terminal window"
+          /* @__PURE__ */ jsx42("button", {
+            type: "button",
+            onClick: handleCopy,
+            className: "p-1 rounded text-muted-foreground hover:text-foreground opacity-0 group-hover:opacity-100 transition-opacity cursor-pointer",
+            "aria-label": "Copy response",
+            children: copied ? /* @__PURE__ */ jsx42(Check3, {
+              size: 14
+            }) : /* @__PURE__ */ jsx42(Copy3, {
+              size: 14
+            })
           })
         ]
       }),
-      /* @__PURE__ */ jsxs19("div", {
+      /* @__PURE__ */ jsx42(ClientDocsKitCode, {
+        codeblock: {
+          value: jsonString,
+          lang: "json",
+          meta: title ? "" : "-c"
+        },
+        className: "!my-0 !border-0 !rounded-none"
+      })
+    ]
+  });
+}
+// src/docskit/code.tsx
+import { highlight as highlight2, Pre as Pre2 } from "codehike/code";
+import { jsx as jsx43, jsxs as jsxs25 } from "react/jsx-runtime";
+async function DocsKitCode(props) {
+  const { codeblock, className, ...rest } = props;
+  const group = await toCodeGroup({ codeblocks: [codeblock], ...rest });
+  return /* @__PURE__ */ jsx43(SingleCode, {
+    group,
+    className
+  });
+}
+async function SingleCode(props) {
+  const { pre, title, code, icon: icon2, options } = props.group.tabs[0];
+  const showCopy = options?.copyButton;
+  return /* @__PURE__ */ jsxs25("div", {
+    className: cn("group rounded overflow-hidden relative border-openpkg-code-border flex flex-col border my-4 not-prose", props.className),
+    children: [
+      title ? /* @__PURE__ */ jsx43("div", {
+        className: cn("border-b-[1px] border-openpkg-code-border bg-openpkg-code-header px-3 py-0", "w-full h-9 flex items-center shrink-0", "text-openpkg-code-text-inactive text-sm font-mono"),
+        children: /* @__PURE__ */ jsxs25("div", {
+          className: "flex items-center h-5 gap-2",
+          children: [
+            /* @__PURE__ */ jsx43("div", {
+              className: "size-4",
+              children: icon2
+            }),
+            /* @__PURE__ */ jsx43("span", {
+              className: "leading-none",
+              children: title
+            })
+          ]
+        })
+      }) : null,
+      /* @__PURE__ */ jsxs25("div", {
         className: "relative flex items-start",
         children: [
-          /* @__PURE__ */ jsx33(Pre3, {
-            code: highlighted,
-            className: "overflow-auto px-0 py-3 m-0 rounded-none !bg-dk-background selection:bg-dk-selection selection:text-current max-h-full flex-1",
-            style: highlightedStyle,
-            handlers
-          }),
-          showCopy && /* @__PURE__ */ jsx33(CopyButton, {
-            text: highlighted.code,
+          pre,
+          showCopy && /* @__PURE__ */ jsx43(CopyButton, {
+            text: code,
             variant: "floating",
-            className: cn("absolute right-3 z-10 text-dk-tab-inactive-foreground", isMultiLine ? "top-3" : "top-1/2 -translate-y-1/2")
+            className: cn("absolute right-3 z-10 text-openpkg-code-text-inactive", "top-3")
           })
         ]
       })
     ]
   });
 }
-function ClientInlineCode({ codeblock }) {
-  const [highlighted, setHighlighted] = useState7(null);
-  useEffect3(() => {
-    let cancelled = false;
-    highlight3(codeblock, theme).then((result) => {
-      if (!cancelled)
-        setHighlighted(result);
-    });
-    return () => {
-      cancelled = true;
+async function toCodeGroup(props) {
+  const rawFlags = props.flags?.startsWith("-") ? props.flags.slice(1) : props.flags;
+  const groupOptions = flagsToOptions(rawFlags);
+  const tabs = await Promise.all(props.codeblocks.map(async (tab) => {
+    const { flags, title } = extractFlags2(tab);
+    const tabOptions = flagsToOptions(flags);
+    const options = { ...groupOptions, ...tabOptions };
+    const highlighted = await highlight2({ ...tab, lang: tab.lang || "txt" }, theme);
+    const handlers = getHandlers(options);
+    if (props.handlers) {
+      handlers.push(...props.handlers);
+    }
+    const { background: _background, ...highlightedStyle } = highlighted.style;
+    return {
+      options,
+      title,
+      code: highlighted.code,
+      icon: /* @__PURE__ */ jsx43(CodeIcon, {
+        title,
+        lang: tab.lang,
+        className: "opacity-60"
+      }),
+      lang: tab.lang,
+      pre: /* @__PURE__ */ jsx43(Pre2, {
+        code: highlighted,
+        className: "overflow-auto px-0 py-3 m-0 rounded-none !bg-openpkg-code-bg selection:bg-openpkg-code-selection selection:text-current max-h-full flex-1",
+        style: highlightedStyle,
+        handlers
+      })
     };
-  }, [codeblock.value, codeblock.lang, codeblock.meta, codeblock]);
-  if (!highlighted) {
-    return /* @__PURE__ */ jsx33(InlineCodeSkeleton, {});
-  }
-  return /* @__PURE__ */ jsx33(Inline, {
-    code: highlighted,
-    className: "selection:bg-dk-selection selection:text-current rounded border border-dk-border px-1 py-0.5 whitespace-nowrap !bg-dk-background",
-    style: highlighted.style
-  });
+  }));
+  return {
+    storage: props.storage,
+    options: groupOptions,
+    tabs
+  };
 }
 function extractFlags2(codeblock) {
-  const meta = codeblock.meta || "";
-  const flags = meta.split(" ").filter((flag) => flag.startsWith("-"))[0] ?? "";
-  const metaWithoutFlags = !flags ? meta : meta === flags ? "" : meta.replace(` ${flags}`, "").trim();
+  const flags = codeblock.meta.split(" ").filter((flag) => flag.startsWith("-"))[0] ?? "";
+  const metaWithoutFlags = !flags ? codeblock.meta : codeblock.meta === flags ? "" : codeblock.meta.replace(` ${flags}`, "").trim();
   const title = metaWithoutFlags.trim();
   return { title, flags: flags.slice(1) };
 }
-function extractFlagsSimple(codeblock) {
-  const meta = codeblock.meta || "";
-  const flagMatch = meta.split(" ").find((flag) => flag.startsWith("-"));
-  const flags = flagMatch ? flagMatch.slice(1) : "";
-  return { flags };
-}
-function ClientCode(props) {
-  const { codeblocks, flags: groupFlags, storage } = props;
-  const [highlighted, setHighlighted] = useState7(null);
-  const groupOptions = flagsToOptions(groupFlags?.startsWith("-") ? groupFlags.slice(1) : groupFlags);
-  const _codeBlocksKey = codeblocks.map((b) => `${b.value}|${b.lang}|${b.meta}`).join("::");
-  useEffect3(() => {
-    let cancelled = false;
-    Promise.all(codeblocks.map(async (block, index) => {
-      const { title, flags } = extractFlags2(block);
-      const tabOptions = flagsToOptions(flags);
-      const options = { ...groupOptions, ...tabOptions };
-      const result = await highlight3({ ...block, lang: block.lang || "txt" }, theme);
-      return {
-        index,
-        highlighted: result,
-        title,
-        options,
-        icon: /* @__PURE__ */ jsx33(CodeIcon, {
-          title,
-          lang: block.lang,
-          className: "opacity-60"
-        })
-      };
-    })).then((results) => {
-      if (!cancelled) {
-        const map = new Map;
-        results.forEach((r) => map.set(r.index, r));
-        setHighlighted(map);
-      }
-    });
-    return () => {
-      cancelled = true;
-    };
-  }, [codeblocks.map, groupOptions]);
-  if (!highlighted) {
-    return /* @__PURE__ */ jsx33(CodeTabsSkeleton, {
-      tabs: codeblocks.length
-    });
-  }
-  if (codeblocks.length === 1) {
-    const tab = highlighted.get(0);
-    if (!tab)
-      return null;
-    const handlers = getHandlers(tab.options);
-    const { background: _background, ...highlightedStyle } = tab.highlighted.style;
-    return /* @__PURE__ */ jsxs19("div", {
-      className: "group rounded overflow-hidden relative border-dk-border flex flex-col border my-4 not-prose",
-      children: [
-        tab.title ? /* @__PURE__ */ jsx33("div", {
-          className: cn("border-b-[1px] border-dk-border bg-dk-tabs-background px-3 py-0", "w-full h-9 flex items-center shrink-0", "text-dk-tab-inactive-foreground text-sm font-mono"),
-          children: /* @__PURE__ */ jsxs19("div", {
-            className: "flex items-center h-5 gap-2",
-            children: [
-              /* @__PURE__ */ jsx33("div", {
-                className: "size-4",
-                children: tab.icon
-              }),
-              /* @__PURE__ */ jsx33("span", {
-                className: "leading-none",
-                children: tab.title
-              })
-            ]
-          })
-        }) : null,
-        /* @__PURE__ */ jsxs19("div", {
-          className: "relative flex items-start",
-          children: [
-            /* @__PURE__ */ jsx33(Pre3, {
-              code: tab.highlighted,
-              className: "overflow-auto px-0 py-3 m-0 rounded-none !bg-dk-background selection:bg-dk-selection selection:text-current max-h-full flex-1",
-              style: highlightedStyle,
-              handlers
-            }),
-            tab.options.copyButton && /* @__PURE__ */ jsx33(CopyButton, {
-              text: tab.highlighted.code,
-              variant: "floating",
-              className: "absolute right-3 top-3 z-10 text-dk-tab-inactive-foreground"
-            })
-          ]
-        })
-      ]
-    });
-  }
-  return /* @__PURE__ */ jsx33(ClientMultiCode, {
-    highlighted,
-    groupOptions,
-    storage
-  });
-}
-function ClientMultiCode({
-  highlighted,
-  groupOptions,
-  storage
-}) {
-  const tabs = Array.from(highlighted.values());
-  const [storedTitle, setCurrentTitle] = useStateOrLocalStorage(storage, tabs[0].title);
-  const current = tabs.find((tab) => tab.title === storedTitle) || tabs[0];
-  const handlers = getHandlers(current.options);
-  const { background: _background, ...highlightedStyle } = current.highlighted.style;
-  return /* @__PURE__ */ jsxs19(Tabs, {
-    value: current.title,
+// src/docskit/code.client.tsx
+import { jsx as jsx44, jsxs as jsxs26 } from "react/jsx-runtime";
+
+function MultiCode({ group, className }) {
+  const [storedTitle, setCurrentTitle] = useStateOrLocalStorage(group.storage, group.tabs[0].title);
+  const current = group.tabs.find((tab) => tab.title === storedTitle) || group.tabs[0];
+  const { code } = current;
+  const currentTitle = current?.title;
+  return /* @__PURE__ */ jsxs26(Tabs, {
+    value: currentTitle,
     onValueChange: setCurrentTitle,
-    className: cn("group border rounded selection:bg-dk-selection selection:text-current border-dk-border overflow-hidden relative flex flex-col max-h-full min-h-0 my-4 gap-0 not-prose"),
+    className: cn("group border rounded selection:bg-openpkg-code-selection selection:text-current border-openpkg-code-border overflow-hidden relative flex flex-col max-h-full min-h-0 my-4 gap-0 not-prose", className),
     children: [
-      /* @__PURE__ */ jsx33(TabsList, {
-        className: cn("border-b border-dk-border bg-dk-tabs-background w-full h-9 min-h-9 shrink-0", "rounded-none p-0 m-0 justify-start items-stretch"),
-        children: tabs.map(({ icon: icon2, title }) => /* @__PURE__ */ jsxs19(TabsTrigger, {
+      /* @__PURE__ */ jsx44(TabsList, {
+        className: cn("border-b border-openpkg-code-border bg-openpkg-code-header w-full h-9 min-h-9 shrink-0", "rounded-none p-0 m-0 justify-start items-stretch"),
+        children: group.tabs.map(({ icon: icon2, title }, _index) => /* @__PURE__ */ jsxs26(TabsTrigger, {
           value: title,
-          className: cn("rounded-none transition-colors duration-200 gap-1.5 px-3 font-mono justify-start grow-0", "border-r border-dk-border", "text-dk-tab-inactive-foreground data-[state=active]:text-dk-tab-active-foreground hover:text-dk-tab-active-foreground", "data-[state=active]:bg-dk-background/50"),
+          className: cn("rounded-none transition-colors duration-200 gap-1.5 px-3 font-mono justify-start grow-0", "border-r border-openpkg-code-border", "text-openpkg-code-text-inactive data-[state=active]:text-openpkg-code-text-active hover:text-openpkg-code-text-active", "data-[state=active]:bg-openpkg-code-bg/50"),
           children: [
-            /* @__PURE__ */ jsx33("div", {
+            /* @__PURE__ */ jsx44("div", {
               children: icon2
             }),
-            /* @__PURE__ */ jsx33("span", {
+            /* @__PURE__ */ jsx44("span", {
               className: "leading-none",
               children: title
             })
           ]
         }, title))
       }),
-      /* @__PURE__ */ jsxs19(TabsContent, {
+      /* @__PURE__ */ jsxs26(TabsContent, {
         value: current.title,
         className: "relative min-h-0 mt-0 flex flex-col",
         children: [
-          /* @__PURE__ */ jsx33(Pre3, {
-            code: current.highlighted,
-            className: "overflow-auto px-0 py-3 m-0 rounded-none !bg-dk-background selection:bg-dk-selection selection:text-current max-h-full flex-1",
-            style: highlightedStyle,
-            handlers
-          }),
-          groupOptions.copyButton && /* @__PURE__ */ jsx33(CopyButton, {
-            text: current.highlighted.code,
+          current.pre,
+          group.options.copyButton && /* @__PURE__ */ jsx44(CopyButton, {
+            text: code,
             variant: "floating",
-            className: "absolute right-3 top-3 z-10 text-dk-tab-inactive-foreground"
+            className: "absolute right-3 top-3 z-10 text-openpkg-code-text-inactive"
           })
         ]
       })
@@ -2098,22 +2325,22 @@ function ClientMultiCode({
 }
 // src/docskit/code.diff.tsx
 import {
-  highlight as highlight4,
-  Pre as Pre4
+  highlight as highlight3,
+  Pre as Pre3
 } from "codehike/code";
 import { ChevronDown as ChevronDown3, ChevronUp } from "lucide-react";
-import { useEffect as useEffect4, useState as useState8 } from "react";
-import { jsx as jsx34, jsxs as jsxs20 } from "react/jsx-runtime";
+import { useEffect as useEffect6, useState as useState13 } from "react";
+import { jsx as jsx45, jsxs as jsxs27 } from "react/jsx-runtime";
 
 function StackedChevrons({ isOpen, className }) {
-  return /* @__PURE__ */ jsxs20("div", {
+  return /* @__PURE__ */ jsxs27("div", {
     className: cn("flex flex-col items-center -space-y-1 transition-opacity", className),
     children: [
-      /* @__PURE__ */ jsx34(ChevronUp, {
-        className: cn("size-3 transition-colors", isOpen ? "text-dk-tab-active-foreground" : "text-dk-tab-inactive-foreground")
+      /* @__PURE__ */ jsx45(ChevronUp, {
+        className: cn("size-3 transition-colors", isOpen ? "text-openpkg-code-text-active" : "text-openpkg-code-text-inactive")
       }),
-      /* @__PURE__ */ jsx34(ChevronDown3, {
-        className: cn("size-3 transition-colors", isOpen ? "text-dk-tab-active-foreground" : "text-dk-tab-inactive-foreground")
+      /* @__PURE__ */ jsx45(ChevronDown3, {
+        className: cn("size-3 transition-colors", isOpen ? "text-openpkg-code-text-active" : "text-openpkg-code-text-inactive")
       })
     ]
   });
@@ -2128,14 +2355,14 @@ function ClientDiffCode(props) {
     className: wrapperClassName,
     defaultOpen = true
   } = props;
-  const [highlighted, setHighlighted] = useState8(null);
-  const [isOpen, setIsOpen] = useState8(defaultOpen);
+  const [highlighted, setHighlighted] = useState13(null);
+  const [isOpen, setIsOpen] = useState13(defaultOpen);
   const { title, flags } = extractFlags3(codeblock);
   const options = flagsToOptions(flags);
   const filename = filenameProp || title || "file";
-  useEffect4(() => {
+  useEffect6(() => {
     let cancelled = false;
-    highlight4({ ...codeblock, lang: codeblock.lang || "txt" }, theme).then((result) => {
+    highlight3({ ...codeblock, lang: codeblock.lang || "txt" }, theme).then((result) => {
       if (!cancelled)
         setHighlighted(result);
     });
@@ -2144,7 +2371,7 @@ function ClientDiffCode(props) {
     };
   }, [codeblock.value, codeblock.lang, codeblock.meta, codeblock]);
   if (!highlighted) {
-    return /* @__PURE__ */ jsx34(CodeBlockSkeleton, {
+    return /* @__PURE__ */ jsx45(CodeBlockSkeleton, {
       hasTitle: true
     });
   }
@@ -2154,53 +2381,53 @@ function ClientDiffCode(props) {
   }
   const { background: _background, ...highlightedStyle } = highlighted.style;
   const showCopy = options?.copyButton;
-  const icon2 = /* @__PURE__ */ jsx34(CodeIcon, {
+  const icon2 = /* @__PURE__ */ jsx45(CodeIcon, {
     title: filename,
     lang: codeblock.lang,
     className: "opacity-60"
   });
   const hasAdditions = diff2?.additions !== undefined && diff2.additions > 0;
   const hasDeletions = diff2?.deletions !== undefined && diff2.deletions > 0;
-  return /* @__PURE__ */ jsx34(Collapsible, {
+  return /* @__PURE__ */ jsx45(Collapsible, {
     open: isOpen,
     onOpenChange: setIsOpen,
-    children: /* @__PURE__ */ jsxs20("div", {
-      className: cn("group rounded overflow-hidden relative border-dk-border flex flex-col border my-4 not-prose", wrapperClassName),
+    children: /* @__PURE__ */ jsxs27("div", {
+      className: cn("group rounded overflow-hidden relative border-openpkg-code-border flex flex-col border my-4 not-prose", wrapperClassName),
       children: [
-        /* @__PURE__ */ jsx34(CollapsibleTrigger2, {
+        /* @__PURE__ */ jsx45(CollapsibleTrigger2, {
           asChild: true,
-          children: /* @__PURE__ */ jsxs20("button", {
+          children: /* @__PURE__ */ jsxs27("button", {
             type: "button",
-            className: cn("border-b border-dk-border bg-dk-tabs-background px-3 py-0", "w-full h-9 flex items-center shrink-0 cursor-pointer", "text-dk-tab-inactive-foreground text-sm font-mono", "hover:bg-dk-background/50 transition-colors"),
+            className: cn("border-b border-openpkg-code-border bg-openpkg-code-header px-3 py-0", "w-full h-9 flex items-center shrink-0 cursor-pointer", "text-openpkg-code-text-inactive text-sm font-mono", "hover:bg-openpkg-code-bg/50 transition-colors"),
             children: [
-              /* @__PURE__ */ jsxs20("div", {
+              /* @__PURE__ */ jsxs27("div", {
                 className: "flex items-center h-5 gap-2 flex-1 min-w-0",
                 children: [
-                  /* @__PURE__ */ jsx34("div", {
+                  /* @__PURE__ */ jsx45("div", {
                     className: "size-4 shrink-0",
                     children: icon2
                   }),
-                  path && /* @__PURE__ */ jsx34("span", {
-                    className: "text-dk-tab-inactive-foreground truncate",
+                  path && /* @__PURE__ */ jsx45("span", {
+                    className: "text-openpkg-code-text-inactive truncate",
                     children: path
                   }),
-                  /* @__PURE__ */ jsx34("span", {
-                    className: "text-dk-tab-active-foreground font-medium truncate",
+                  /* @__PURE__ */ jsx45("span", {
+                    className: "text-openpkg-code-text-active font-medium truncate",
                     children: filename
                   })
                 ]
               }),
-              /* @__PURE__ */ jsxs20("div", {
+              /* @__PURE__ */ jsxs27("div", {
                 className: "flex items-center gap-2 text-sm shrink-0 ml-2",
                 children: [
-                  hasAdditions && /* @__PURE__ */ jsxs20("span", {
+                  hasAdditions && /* @__PURE__ */ jsxs27("span", {
                     className: "text-green-500 font-medium",
                     children: [
                       "+",
                       diff2.additions
                     ]
                   }),
-                  hasDeletions && /* @__PURE__ */ jsxs20("span", {
+                  hasDeletions && /* @__PURE__ */ jsxs27("span", {
                     className: "text-red-500 font-medium",
                     children: [
                       "-",
@@ -2209,27 +2436,27 @@ function ClientDiffCode(props) {
                   })
                 ]
               }),
-              /* @__PURE__ */ jsx34(StackedChevrons, {
+              /* @__PURE__ */ jsx45(StackedChevrons, {
                 isOpen,
                 className: "ml-2"
               })
             ]
           })
         }),
-        /* @__PURE__ */ jsx34(CollapsibleContent2, {
-          children: /* @__PURE__ */ jsxs20("div", {
+        /* @__PURE__ */ jsx45(CollapsibleContent2, {
+          children: /* @__PURE__ */ jsxs27("div", {
             className: "relative flex items-start",
             children: [
-              /* @__PURE__ */ jsx34(Pre4, {
+              /* @__PURE__ */ jsx45(Pre3, {
                 code: highlighted,
-                className: "overflow-auto px-0 py-3 m-0 rounded-none !bg-dk-background selection:bg-dk-selection selection:text-current max-h-full flex-1",
+                className: "overflow-auto px-0 py-3 m-0 rounded-none !bg-openpkg-code-bg selection:bg-openpkg-code-selection selection:text-current max-h-full flex-1",
                 style: highlightedStyle,
                 handlers
               }),
-              showCopy && /* @__PURE__ */ jsx34(CopyButton, {
+              showCopy && /* @__PURE__ */ jsx45(CopyButton, {
                 text: highlighted.code,
                 variant: "floating",
-                className: "absolute right-3 top-3 z-10 text-dk-tab-inactive-foreground"
+                className: "absolute right-3 top-3 z-10 text-openpkg-code-text-inactive"
               })
             ]
           })
@@ -2246,21 +2473,19 @@ function extractFlags3(codeblock) {
   return { title, flags: flags.slice(1) };
 }
 // src/docskit/code.inline.tsx
-import { highlight as highlight5, Inline as Inline2 } from "codehike/code";
-import { jsx as jsx35 } from "react/jsx-runtime";
-async function DocsKitInlineCode({
-  codeblock
-}) {
-  const highlighted = await highlight5(codeblock, theme);
-  return /* @__PURE__ */ jsx35(Inline2, {
+import { highlight as highlight4, Inline as Inline2 } from "codehike/code";
+import { jsx as jsx46 } from "react/jsx-runtime";
+async function DocsKitInlineCode({ codeblock }) {
+  const highlighted = await highlight4(codeblock, theme);
+  return /* @__PURE__ */ jsx46(Inline2, {
     code: highlighted,
-    className: "selection:bg-dk-selection selection:text-current rounded border border-dk-border px-1 py-0.5 whitespace-nowrap !bg-dk-background",
+    className: "selection:bg-openpkg-code-selection selection:text-current rounded border border-openpkg-code-border px-1 py-0.5 whitespace-nowrap !bg-openpkg-code-bg",
     style: highlighted.style
   });
 }
 // src/docskit/code.package-install.tsx
-import { useState as useState9 } from "react";
-import { jsx as jsx36, jsxs as jsxs21 } from "react/jsx-runtime";
+import { useState as useState14 } from "react";
+import { jsx as jsx47, jsxs as jsxs28 } from "react/jsx-runtime";
 
 var managerLabels = {
   npm: "npm",
@@ -2312,81 +2537,61 @@ function PackageInstall({
   managers = ["npm", "bun", "pnpm", "yarn"],
   copyButton = true
 }) {
-  const [activeManager, setActiveManager] = useState9(managers[0]);
+  const [activeManager, setActiveManager] = useState14(managers[0]);
   const command = getInstallCommand(activeManager, pkg, { dev, global: isGlobal });
-  return /* @__PURE__ */ jsxs21("div", {
-    className: "group rounded overflow-hidden border border-dk-border flex flex-col my-4 not-prose",
+  return /* @__PURE__ */ jsxs28("div", {
+    className: "group rounded overflow-hidden border border-openpkg-code-border flex flex-col my-4 not-prose",
     children: [
-      /* @__PURE__ */ jsxs21("div", {
-        className: cn("border-b border-dk-border bg-dk-tabs-background", "w-full h-9 flex items-center px-3 gap-2 shrink-0"),
+      /* @__PURE__ */ jsxs28("div", {
+        className: cn("border-b border-openpkg-code-border bg-openpkg-code-header", "w-full h-9 flex items-center px-3 gap-2 shrink-0"),
         children: [
-          /* @__PURE__ */ jsxs21("div", {
+          /* @__PURE__ */ jsxs28("div", {
             className: "flex items-center gap-2",
             children: [
-              /* @__PURE__ */ jsx36("div", {
-                className: "size-3 rounded-full bg-dk-tab-inactive-foreground/30"
+              /* @__PURE__ */ jsx47("div", {
+                className: "size-3 rounded-full bg-openpkg-code-text-inactive/30"
               }),
-              /* @__PURE__ */ jsx36("div", {
-                className: "size-3 rounded-full bg-dk-tab-inactive-foreground/30"
+              /* @__PURE__ */ jsx47("div", {
+                className: "size-3 rounded-full bg-openpkg-code-text-inactive/30"
               }),
-              /* @__PURE__ */ jsx36("div", {
-                className: "size-3 rounded-full bg-dk-tab-inactive-foreground/30"
+              /* @__PURE__ */ jsx47("div", {
+                className: "size-3 rounded-full bg-openpkg-code-text-inactive/30"
               })
             ]
           }),
-          /* @__PURE__ */ jsx36("div", {
+          /* @__PURE__ */ jsx47("div", {
             className: "flex items-center gap-0.5 ml-1",
-            children: managers.map((manager) => /* @__PURE__ */ jsx36("button", {
+            children: managers.map((manager) => /* @__PURE__ */ jsx47("button", {
               type: "button",
               onClick: () => setActiveManager(manager),
-              className: cn("px-2 py-0.5 text-sm font-medium rounded-md transition-colors duration-200", "border h-6", activeManager === manager ? "bg-dk-background border-dk-border text-dk-tab-active-foreground" : "border-transparent text-dk-tab-inactive-foreground hover:text-dk-tab-active-foreground"),
+              className: cn("px-2 py-0.5 text-sm font-medium rounded-md transition-colors duration-200", "border h-6", activeManager === manager ? "bg-openpkg-code-bg border-openpkg-code-border text-openpkg-code-text-active" : "border-transparent text-openpkg-code-text-inactive hover:text-openpkg-code-text-active"),
               children: managerLabels[manager]
             }, manager))
           }),
-          /* @__PURE__ */ jsx36("span", {
+          /* @__PURE__ */ jsx47("span", {
             className: "sr-only",
             children: "Terminal window"
           })
         ]
       }),
-      /* @__PURE__ */ jsxs21("div", {
-        className: "relative flex items-start bg-dk-background",
-        children: [
-          /* @__PURE__ */ jsx36("pre", {
-            className: "overflow-auto px-3 py-3 m-0 font-mono text-sm flex-1",
-            children: /* @__PURE__ */ jsxs21("code", {
-              children: [
-                /* @__PURE__ */ jsx36("span", {
-                  className: "text-ch-5",
-                  children: command.split(" ")[0]
-                }),
-                /* @__PURE__ */ jsxs21("span", {
-                  className: "text-ch-0",
-                  children: [
-                    " ",
-                    command.split(" ").slice(1).join(" ")
-                  ]
-                })
-              ]
-            })
-          }),
-          copyButton && /* @__PURE__ */ jsx36(CopyButton, {
-            text: command,
-            variant: "floating",
-            className: "absolute right-3 top-1/2 -translate-y-1/2 z-10 text-dk-tab-inactive-foreground"
-          })
-        ]
+      /* @__PURE__ */ jsx47(ClientDocsKitCode, {
+        codeblock: {
+          value: command,
+          lang: "bash",
+          meta: copyButton ? "-c" : ""
+        },
+        className: "!my-0 !border-0 !rounded-none"
       })
     ]
   });
 }
 // src/docskit/code.tabs.tsx
-import { Block, CodeBlock } from "codehike/blocks";
+import { Block, CodeBlock as CodeBlock2 } from "codehike/blocks";
 import { z } from "zod";
-import { jsx as jsx37 } from "react/jsx-runtime";
+import { jsx as jsx48 } from "react/jsx-runtime";
 async function CodeGroup(props) {
   const result = Block.extend({
-    code: z.array(CodeBlock),
+    code: z.array(CodeBlock2),
     flags: z.string().optional(),
     storage: z.string().optional(),
     handlers: z.array(z.any()).optional()
@@ -2395,16 +2600,16 @@ async function CodeGroup(props) {
     throw betterError(result.error, "CodeGroup");
   }
   const { code, ...rest } = result.data;
-  return /* @__PURE__ */ jsx37(Code, {
+  return /* @__PURE__ */ jsx48(Code, {
     codeblocks: code,
     ...rest
   });
 }
 async function Code(props) {
   const group = await toCodeGroup(props);
-  return group.tabs.length === 1 ? /* @__PURE__ */ jsx37(SingleCode, {
+  return group.tabs.length === 1 ? /* @__PURE__ */ jsx48(SingleCode, {
     group
-  }) : /* @__PURE__ */ jsx37(MultiCode, {
+  }) : /* @__PURE__ */ jsx48(MultiCode, {
     group
   }, group.storage);
 }
@@ -2417,13 +2622,13 @@ function betterError(error, componentName) {
   }
 }
 // src/docskit/code.terminal.tsx
-import { highlight as highlight6, Pre as Pre5 } from "codehike/code";
-import { jsx as jsx38, jsxs as jsxs22 } from "react/jsx-runtime";
+import { highlight as highlight5, Pre as Pre4 } from "codehike/code";
+import { jsx as jsx49, jsxs as jsxs29 } from "react/jsx-runtime";
 async function Terminal(props) {
   const { codeblock, handlers: extraHandlers } = props;
   const { flags } = extractFlags4(codeblock);
   const options = flagsToOptions(flags);
-  const highlighted = await highlight6({ ...codeblock, lang: codeblock.lang || "bash" }, theme);
+  const highlighted = await highlight5({ ...codeblock, lang: codeblock.lang || "bash" }, theme);
   const handlers = getHandlers(options);
   if (extraHandlers) {
     handlers.push(...extraHandlers);
@@ -2432,45 +2637,45 @@ async function Terminal(props) {
   const showCopy = options?.copyButton;
   const isMultiLine = highlighted.code.includes(`
 `);
-  return /* @__PURE__ */ jsxs22("div", {
-    className: "group rounded overflow-hidden relative border-dk-border flex flex-col border my-4 not-prose",
+  return /* @__PURE__ */ jsxs29("div", {
+    className: "group rounded overflow-hidden relative border-openpkg-code-border flex flex-col border my-4 not-prose",
     children: [
-      /* @__PURE__ */ jsxs22("div", {
-        className: cn("border-b border-dk-border bg-dk-tabs-background", "w-full h-9 flex items-center justify-center shrink-0", "relative"),
+      /* @__PURE__ */ jsxs29("div", {
+        className: cn("border-b border-openpkg-code-border bg-openpkg-code-header", "w-full h-9 flex items-center justify-center shrink-0", "relative"),
         children: [
-          /* @__PURE__ */ jsxs22("div", {
+          /* @__PURE__ */ jsxs29("div", {
             className: "absolute left-3 flex items-center gap-2",
             children: [
-              /* @__PURE__ */ jsx38("div", {
-                className: "size-3 rounded-full bg-dk-tab-inactive-foreground/30"
+              /* @__PURE__ */ jsx49("div", {
+                className: "size-3 rounded-full bg-openpkg-code-text-inactive/30"
               }),
-              /* @__PURE__ */ jsx38("div", {
-                className: "size-3 rounded-full bg-dk-tab-inactive-foreground/30"
+              /* @__PURE__ */ jsx49("div", {
+                className: "size-3 rounded-full bg-openpkg-code-text-inactive/30"
               }),
-              /* @__PURE__ */ jsx38("div", {
-                className: "size-3 rounded-full bg-dk-tab-inactive-foreground/30"
+              /* @__PURE__ */ jsx49("div", {
+                className: "size-3 rounded-full bg-openpkg-code-text-inactive/30"
               })
             ]
           }),
-          /* @__PURE__ */ jsx38("span", {
+          /* @__PURE__ */ jsx49("span", {
             className: "sr-only",
             children: "Terminal window"
           })
         ]
       }),
-      /* @__PURE__ */ jsxs22("div", {
+      /* @__PURE__ */ jsxs29("div", {
         className: "relative flex items-start",
         children: [
-          /* @__PURE__ */ jsx38(Pre5, {
+          /* @__PURE__ */ jsx49(Pre4, {
             code: highlighted,
-            className: "overflow-auto px-0 py-3 m-0 rounded-none !bg-dk-background selection:bg-dk-selection selection:text-current max-h-full flex-1",
+            className: "overflow-auto px-0 py-3 m-0 rounded-none !bg-openpkg-code-bg selection:bg-openpkg-code-selection selection:text-current max-h-full flex-1",
             style: highlightedStyle,
             handlers
           }),
-          showCopy && /* @__PURE__ */ jsx38(CopyButton, {
+          showCopy && /* @__PURE__ */ jsx49(CopyButton, {
             text: highlighted.code,
             variant: "floating",
-            className: cn("absolute right-3 z-10 text-dk-tab-inactive-foreground", isMultiLine ? "top-3" : "top-1/2 -translate-y-1/2")
+            className: cn("absolute right-3 z-10 text-openpkg-code-text-inactive", isMultiLine ? "top-3" : "top-1/2 -translate-y-1/2")
           })
         ]
       })
@@ -2484,19 +2689,19 @@ function extractFlags4(codeblock) {
   return { flags };
 }
 // src/docskit/docskit.tsx
-import React8 from "react";
+import React7 from "react";
 function addDocsKit(components) {
   return {
     ...components,
     DocsKitCode,
     DocsKitInlineCode,
     a: (props) => {
-      return React8.createElement(components?.a || "a", props);
+      return React7.createElement(components?.a || "a", props);
     }
   };
 }
 // src/docskit/notes.tsx
-import { jsx as jsx39 } from "react/jsx-runtime";
+import { jsx as jsx50 } from "react/jsx-runtime";
 function WithNotes({ children, ...rest }) {
   const notes = Object.entries(rest).filter(([name]) => name !== "title" && name !== "_data").map(([name, value]) => {
     const block = value;
@@ -2510,7 +2715,7 @@ function WithNotes({ children, ...rest }) {
       return {
         name,
         type: "code",
-        children: /* @__PURE__ */ jsx39(Code, {
+        children: /* @__PURE__ */ jsx50(Code, {
           codeblocks: [block]
         })
       };
@@ -2518,7 +2723,7 @@ function WithNotes({ children, ...rest }) {
       return {
         name,
         type: "image",
-        children: /* @__PURE__ */ jsx39("img", {
+        children: /* @__PURE__ */ jsx50("img", {
           src: block.url,
           alt: block.alt
         })
@@ -2527,91 +2732,53 @@ function WithNotes({ children, ...rest }) {
       throw new Error("Invalid block inside <WithNotes />");
     }
   });
-  return /* @__PURE__ */ jsx39(WithClientNotes, {
+  return /* @__PURE__ */ jsx50(WithClientNotes, {
     notes,
     children
   });
 }
-// src/docskit/code.tabs-legacy.tsx
-import { Check as Check6, Copy as Copy6 } from "lucide-react";
-import { useState as useState10 } from "react";
-import { jsx as jsx40, jsxs as jsxs23 } from "react/jsx-runtime";
+// src/docskit/import-section.tsx
+import { Check as Check4, Copy as Copy4 } from "lucide-react";
 
-function CodeTabs({
-  tabs,
-  defaultIndex = 0,
-  sticky = false,
-  className
-}) {
-  const [activeIndex, setActiveIndex] = useState10(defaultIndex);
-  const [copied, copy] = useCopyToClipboard();
-  const activeTab = tabs[activeIndex];
-  const handleCopy = () => {
-    if (!activeTab)
-      return;
-    copy(activeTab.code);
-  };
-  if (!tabs.length)
-    return null;
-  return /* @__PURE__ */ jsxs23("div", {
-    className: cn("group rounded-lg border border-dk-border bg-dk-background overflow-hidden", "selection:bg-dk-selection selection:text-current", className),
-    children: [
-      /* @__PURE__ */ jsxs23("div", {
-        className: cn("flex items-center border-b border-dk-border bg-dk-tabs-background", sticky && "sticky top-0 z-10"),
-        children: [
-          /* @__PURE__ */ jsx40("div", {
-            className: "flex-1 flex items-stretch",
-            children: tabs.map((tab, index) => /* @__PURE__ */ jsx40("button", {
-              type: "button",
-              onClick: () => setActiveIndex(index),
-              className: cn("px-4 py-2 text-sm font-mono transition-colors duration-200", "border-r border-dk-border last:border-r-0", index === activeIndex ? "text-dk-tab-active-foreground bg-dk-background/50" : "text-dk-tab-inactive-foreground hover:text-dk-tab-active-foreground"),
-              children: tab.label
-            }, tab.label))
-          }),
-          /* @__PURE__ */ jsx40("button", {
-            type: "button",
-            onClick: handleCopy,
-            className: cn("p-2 mx-2", "text-dk-tab-inactive-foreground hover:text-dk-tab-active-foreground", "opacity-0 group-hover:opacity-100 transition-opacity", "cursor-pointer"),
-            "aria-label": "Copy code",
-            children: copied ? /* @__PURE__ */ jsx40(Check6, {
-              size: 16
-            }) : /* @__PURE__ */ jsx40(Copy6, {
-              size: 16
-            })
-          })
-        ]
-      }),
-      /* @__PURE__ */ jsx40("div", {
-        className: "bg-dk-background",
-        children: activeTab?.content
-      })
-    ]
-  });
+// src/hooks/use-copy-to-clipboard.ts
+import { useCallback as useCallback2, useRef as useRef5, useState as useState15 } from "react";
+var COPY_FEEDBACK_MS = 1200;
+function useCopyToClipboard(timeout = COPY_FEEDBACK_MS) {
+  const [copied, setCopied] = useState15(false);
+  const timerRef = useRef5(undefined);
+  const copy = useCallback2((text) => {
+    navigator.clipboard.writeText(text).then(() => {
+      setCopied(true);
+      clearTimeout(timerRef.current);
+      timerRef.current = setTimeout(() => setCopied(false), timeout);
+    });
+  }, [timeout]);
+  return [copied, copy];
 }
+
 // src/docskit/import-section.tsx
-import { Check as Check7, Copy as Copy7 } from "lucide-react";
-import { jsx as jsx41, jsxs as jsxs24 } from "react/jsx-runtime";
+import { jsx as jsx51, jsxs as jsxs30 } from "react/jsx-runtime";
 
 function ImportSection({ importStatement, className }) {
   const [copied, copy] = useCopyToClipboard();
   const handleCopy = () => {
     copy(importStatement);
   };
-  return /* @__PURE__ */ jsxs24("div", {
+  return /* @__PURE__ */ jsxs30("div", {
     className: cn("group flex items-center justify-between gap-3", "rounded-lg border border-[var(--openpkg-border-subtle)] bg-[var(--openpkg-bg-secondary)] px-4 py-3", className),
     children: [
-      /* @__PURE__ */ jsx41("code", {
+      /* @__PURE__ */ jsx51("code", {
         className: "font-mono text-sm text-[var(--openpkg-text-primary)] overflow-x-auto",
         children: importStatement
       }),
-      /* @__PURE__ */ jsx41("button", {
+      /* @__PURE__ */ jsx51("button", {
         type: "button",
         onClick: handleCopy,
         className: cn("shrink-0 p-1.5 rounded", "text-[var(--openpkg-text-muted)] hover:text-[var(--openpkg-text-primary)]", "opacity-0 group-hover:opacity-100 transition-opacity duration-200", "cursor-pointer"),
         "aria-label": "Copy import statement",
-        children: copied ? /* @__PURE__ */ jsx41(Check7, {
+        children: copied ? /* @__PURE__ */ jsx51(Check4, {
           size: 16
-        }) : /* @__PURE__ */ jsx41(Copy7, {
+        }) : /* @__PURE__ */ jsx51(Copy4, {
           size: 16
         })
       })
@@ -2620,8 +2787,8 @@ function ImportSection({ importStatement, className }) {
 }
 // src/docskit/type-badge.tsx
 import { cva as cva2 } from "class-variance-authority";
-import * as React9 from "react";
-import { jsx as jsx42 } from "react/jsx-runtime";
+import * as React8 from "react";
+import { jsx as jsx52 } from "react/jsx-runtime";
 var typeBadgeVariants = cva2("font-mono text-sm", {
   variants: {
     typeColor: {
@@ -2676,9 +2843,9 @@ function detectTypeColor(type) {
   }
   return "default";
 }
-var TypeBadge = React9.forwardRef(({ className, type, typeColor, ...props }, ref) => {
+var TypeBadge = React8.forwardRef(({ className, type, typeColor, ...props }, ref) => {
   const color2 = typeColor ?? detectTypeColor(type);
-  return /* @__PURE__ */ jsx42("span", {
+  return /* @__PURE__ */ jsx52("span", {
     ref,
     className: cn(typeBadgeVariants({ typeColor: color2 }), className),
     ...props,
@@ -2688,6 +2855,8 @@ var TypeBadge = React9.forwardRef(({ className, type, typeColor, ...props }, ref
 TypeBadge.displayName = "TypeBadge";
 export {
   wordWrap,
+  useSyncSection,
+  useSyncScroll,
   typeBadgeVariants,
   tooltip,
   toCodeGroup,
@@ -2713,25 +2882,34 @@ export {
   TabsList,
   TabsContent,
   Tabs,
+  SyncScrollProvider,
   SingleCode,
   ResponseBlock,
   ParameterList,
   PackageInstall,
+  NestedParameterToggle,
+  NestedParameterContainer,
   MultiCode,
+  MethodSection,
   LanguageSelector,
   InlineCodeSkeleton,
   ImportSection,
   HoverLink,
+  ExpandableParameter,
+  ExampleSection,
+  ExampleChips,
+  EnumValuesSection,
   EndpointHeader,
   EndpointBadge,
   DocsKitInlineCode,
   DocsKitCode,
   CopyButton,
+  CollapsiblePanel,
   CodeTabsSkeleton,
-  CodeTabs,
   CodeIcon,
   CodeGroup,
   CodeBlockSkeleton,
+  CodeBlock,
   Code,
   ClientTerminal,
   ClientInlineCode,
@@ -2740,6 +2918,7 @@ export {
   ClientCode,
   APISection,
   APIReferencePage,
+  APIReferenceLayout,
   APIParameterItem,
   APICodePanel
 };