@openpkg-ts/ui 0.6.2 → 0.7.0

package/dist/docskit/index.js

@@ -304,7 +304,11 @@ var collapseContent = {
   name: "CollapseContent",
   Block: CollapsibleContent2
 };
-var collapse = [collapseRoot, collapseTrigger, collapseContent];
+var collapse = [
+  collapseRoot,
+  collapseTrigger,
+  collapseContent
+];
 
 // src/docskit/diff.tsx
 import { InnerLine as InnerLine4 } from "codehike/code";
@@ -825,7 +829,10 @@ function InlineCodeSkeleton() {
     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%"];
@@ -862,28 +869,40 @@ function CodeTabsSkeleton({ tabs = 2, lines = 6 }) {
 import * as TabsPrimitive from "@radix-ui/react-tabs";
 import { jsx as jsx21 } from "react/jsx-runtime";
 
-function Tabs({ className, ...props }) {
+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 }) {
+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 }) {
+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 }) {
+function TabsContent({
+  className,
+  ...props
+}) {
   return /* @__PURE__ */ jsx21(TabsPrimitive.Content, {
     "data-slot": "tabs-content",
     className: cn("flex-1 outline-none", className),
@@ -908,7 +927,7 @@ function ClientDocsKitCode(props) {
     return () => {
       cancelled = true;
     };
-  }, [codeblock.value, codeblock.lang, codeblock.meta]);
+  }, [codeblock.value, codeblock.lang, codeblock.meta, codeblock]);
   if (!highlighted) {
     return /* @__PURE__ */ jsx22(CodeBlockSkeleton, {
       hasTitle: !!title
@@ -977,7 +996,7 @@ function ClientTerminal(props) {
     return () => {
       cancelled = true;
     };
-  }, [codeblock.value, codeblock.lang, codeblock.meta]);
+  }, [codeblock.value, codeblock.lang, codeblock.meta, codeblock]);
   if (!highlighted) {
     return /* @__PURE__ */ jsx22(TerminalSkeleton, {});
   }
@@ -1045,7 +1064,7 @@ function ClientInlineCode({ codeblock }) {
     return () => {
       cancelled = true;
     };
-  }, [codeblock.value, codeblock.lang, codeblock.meta]);
+  }, [codeblock.value, codeblock.lang, codeblock.meta, codeblock]);
   if (!highlighted) {
     return /* @__PURE__ */ jsx22(InlineCodeSkeleton, {});
   }
@@ -1101,7 +1120,7 @@ function ClientCode(props) {
     return () => {
       cancelled = true;
     };
-  }, [_codeBlocksKey]);
+  }, [codeblocks.map, groupOptions]);
   if (!highlighted) {
     return /* @__PURE__ */ jsx22(CodeTabsSkeleton, {
       tabs: codeblocks.length
@@ -1109,6 +1128,10 @@ function ClientCode(props) {
   }
   if (codeblocks.length === 1) {
     const tab = highlighted.get(0);
+    if (!tab)
+      return /* @__PURE__ */ jsx22(CodeTabsSkeleton, {
+        tabs: 1
+      });
     const handlers = getHandlers(tab.options);
     const { background: _background, ...highlightedStyle } = tab.highlighted.style;
     return /* @__PURE__ */ jsxs9("div", {
@@ -1268,7 +1291,7 @@ import { jsx as jsx24, jsxs as jsxs11 } from "react/jsx-runtime";
 function APICodePanel({
   languages,
   examples,
-  externalLink,
+  externalLink: _externalLink,
   title,
   className
 }) {
@@ -1338,11 +1361,13 @@ import { jsx as jsx26, jsxs as jsxs13 } from "react/jsx-runtime";
 function APIReferencePage({
   title,
   description,
+  theme: theme2 = "default",
   children,
   className
 }) {
+  const containerClass = theme2 === "single" ? "max-w-[780px]" : "max-w-7xl";
   return /* @__PURE__ */ jsxs13("div", {
-    className: cn("max-w-7xl mx-auto px-4 sm:px-6 lg:px-8", className),
+    className: cn(containerClass, "mx-auto px-4 sm:px-6 lg:px-8", className),
     children: [
       /* @__PURE__ */ jsxs13("header", {
         className: "py-8 border-b border-border",
@@ -1415,8 +1440,240 @@ function APISection({
     })
   });
 }
+// src/docskit/code.package-install.tsx
+import { useState as useState6 } from "react";
+import { jsx as jsx28, jsxs as jsxs15 } from "react/jsx-runtime";
+
+var managerLabels = {
+  npm: "npm",
+  bun: "bun",
+  pnpm: "pnpm",
+  yarn: "yarn"
+};
+function getInstallCommand(manager, pkg, options) {
+  const { dev, global: isGlobal } = options;
+  if (isGlobal) {
+    switch (manager) {
+      case "npm":
+        return `npm install -g ${pkg}`;
+      case "bun":
+        return `bun install -g ${pkg}`;
+      case "pnpm":
+        return `pnpm install -g ${pkg}`;
+      case "yarn":
+        return `yarn global add ${pkg}`;
+    }
+  }
+  if (dev) {
+    switch (manager) {
+      case "npm":
+        return `npm install -D ${pkg}`;
+      case "bun":
+        return `bun add -d ${pkg}`;
+      case "pnpm":
+        return `pnpm add -D ${pkg}`;
+      case "yarn":
+        return `yarn add -D ${pkg}`;
+    }
+  }
+  switch (manager) {
+    case "npm":
+      return `npm install ${pkg}`;
+    case "bun":
+      return `bun add ${pkg}`;
+    case "pnpm":
+      return `pnpm add ${pkg}`;
+    case "yarn":
+      return `yarn add ${pkg}`;
+  }
+}
+function PackageInstall({
+  package: pkg,
+  dev = false,
+  global: isGlobal = false,
+  managers = ["npm", "bun", "pnpm", "yarn"],
+  copyButton = true
+}) {
+  const [activeManager, setActiveManager] = useState6(managers[0]);
+  const command = getInstallCommand(activeManager, pkg, { dev, global: isGlobal });
+  return /* @__PURE__ */ jsxs15("div", {
+    className: "group rounded overflow-hidden border border-openpkg-code-border flex flex-col my-4 not-prose",
+    children: [
+      /* @__PURE__ */ jsxs15("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__ */ jsxs15("div", {
+            className: "flex items-center gap-2",
+            children: [
+              /* @__PURE__ */ jsx28("div", {
+                className: "size-3 rounded-full bg-openpkg-code-text-inactive/30"
+              }),
+              /* @__PURE__ */ jsx28("div", {
+                className: "size-3 rounded-full bg-openpkg-code-text-inactive/30"
+              }),
+              /* @__PURE__ */ jsx28("div", {
+                className: "size-3 rounded-full bg-openpkg-code-text-inactive/30"
+              })
+            ]
+          }),
+          /* @__PURE__ */ jsx28("div", {
+            className: "flex items-center gap-0.5 ml-1",
+            children: managers.map((manager) => /* @__PURE__ */ jsx28("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-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__ */ jsx28("span", {
+            className: "sr-only",
+            children: "Terminal window"
+          })
+        ]
+      }),
+      /* @__PURE__ */ jsx28(ClientDocsKitCode, {
+        codeblock: {
+          value: command,
+          lang: "bash",
+          meta: copyButton ? "-c" : ""
+        },
+        className: "!my-0 !border-0 !rounded-none"
+      })
+    ]
+  });
+}
+
+// src/docskit/api/section-accordion.tsx
+import { ChevronDown as ChevronDown2 } from "lucide-react";
+import { useId as useId2, useState as useState7 } from "react";
+import { jsx as jsx29, jsxs as jsxs16 } from "react/jsx-runtime";
+
+function SectionAccordion({
+  title,
+  children,
+  defaultExpanded = true,
+  className
+}) {
+  const [expanded, setExpanded] = useState7(defaultExpanded);
+  const contentId = useId2();
+  return /* @__PURE__ */ jsxs16("div", {
+    className: cn("openpkg-section-accordion", className),
+    children: [
+      /* @__PURE__ */ jsxs16("button", {
+        type: "button",
+        onClick: () => setExpanded(!expanded),
+        "aria-expanded": expanded,
+        "aria-controls": contentId,
+        className: cn("flex items-center gap-2 w-full", "py-3", "cursor-pointer", "transition-colors duration-150", "hover:opacity-80"),
+        children: [
+          /* @__PURE__ */ jsx29(ChevronDown2, {
+            size: 16,
+            className: cn("text-muted-foreground", "transition-transform duration-200", !expanded && "-rotate-90")
+          }),
+          /* @__PURE__ */ jsx29("span", {
+            className: "text-xs font-medium tracking-wider text-muted-foreground uppercase font-mono",
+            children: title
+          })
+        ]
+      }),
+      /* @__PURE__ */ jsx29("div", {
+        id: contentId,
+        role: "region",
+        className: cn("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: "min-h-0 overflow-hidden",
+          children
+        })
+      })
+    ]
+  });
+}
+
+// src/docskit/api/api-section-single.tsx
+import { jsx as jsx30, jsxs as jsxs17, Fragment as Fragment3 } from "react/jsx-runtime";
+
+function APISectionSingle({
+  title,
+  id,
+  description,
+  example,
+  packageName,
+  parameters,
+  returns,
+  className
+}) {
+  return /* @__PURE__ */ jsxs17("section", {
+    id,
+    className: cn("max-w-[780px] mx-auto py-12 px-6", className),
+    children: [
+      /* @__PURE__ */ jsxs17("header", {
+        children: [
+          /* @__PURE__ */ jsx30("h1", {
+            className: "font-mono text-2xl font-semibold text-foreground",
+            children: title
+          }),
+          description && /* @__PURE__ */ jsx30("div", {
+            className: "mt-3 text-muted-foreground prose prose-sm dark:prose-invert",
+            children: description
+          })
+        ]
+      }),
+      /* @__PURE__ */ jsx30("div", {
+        className: "mt-8",
+        children: /* @__PURE__ */ jsx30(ClientDocsKitCode, {
+          codeblock: { value: example.code, lang: example.lang || "typescript", meta: "-c" }
+        })
+      }),
+      /* @__PURE__ */ jsx30("hr", {
+        className: "border-border my-8"
+      }),
+      /* @__PURE__ */ jsx30(PackageInstall, {
+        package: packageName
+      }),
+      parameters && /* @__PURE__ */ jsxs17(Fragment3, {
+        children: [
+          /* @__PURE__ */ jsx30("hr", {
+            className: "border-border my-8"
+          }),
+          /* @__PURE__ */ jsx30(SectionAccordion, {
+            title: "Parameters",
+            defaultExpanded: true,
+            children: /* @__PURE__ */ jsx30("div", {
+              className: "space-y-4 pt-2",
+              children: parameters
+            })
+          })
+        ]
+      }),
+      returns && /* @__PURE__ */ jsxs17(Fragment3, {
+        children: [
+          /* @__PURE__ */ jsx30("hr", {
+            className: "border-border my-8"
+          }),
+          /* @__PURE__ */ jsxs17("div", {
+            className: "returns-section",
+            children: [
+              /* @__PURE__ */ jsx30("h3", {
+                className: "text-xs font-medium tracking-wider text-muted-foreground uppercase font-mono mb-4",
+                children: "Returns"
+              }),
+              /* @__PURE__ */ jsx30("code", {
+                className: "text-sm font-mono text-foreground bg-muted px-2 py-1 rounded",
+                children: returns.type
+              }),
+              returns.description && /* @__PURE__ */ jsx30("div", {
+                className: "mt-2 text-sm text-muted-foreground",
+                children: returns.description
+              })
+            ]
+          })
+        ]
+      })
+    ]
+  });
+}
 // src/docskit/api/code-block.tsx
-import { jsx as jsx28 } from "react/jsx-runtime";
+import { jsx as jsx31 } from "react/jsx-runtime";
 
 function CodeBlock({
   code,
@@ -1425,7 +1682,7 @@ function CodeBlock({
   className
 }) {
   const flags = `-c${showLineNumbers ? "n" : ""}`;
-  return /* @__PURE__ */ jsx28(ClientDocsKitCode, {
+  return /* @__PURE__ */ jsx31(ClientDocsKitCode, {
     codeblock: {
       value: code,
       lang: language,
@@ -1436,8 +1693,8 @@ function CodeBlock({
 }
 // 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";
+import { useId as useId3, useState as useState8 } from "react";
+import { jsx as jsx32, jsxs as jsxs18 } from "react/jsx-runtime";
 
 function CollapsiblePanel({
   title,
@@ -1447,10 +1704,10 @@ function CollapsiblePanel({
   onExpandedChange,
   className
 }) {
-  const [internalExpanded, setInternalExpanded] = useState6(defaultExpanded);
+  const [internalExpanded, setInternalExpanded] = useState8(defaultExpanded);
   const isControlled = controlledExpanded !== undefined;
   const expanded = isControlled ? controlledExpanded : internalExpanded;
-  const contentId = useId2();
+  const contentId = useId3();
   const toggle = () => {
     const next = !expanded;
     if (isControlled) {
@@ -1459,31 +1716,31 @@ function CollapsiblePanel({
       setInternalExpanded(next);
     }
   };
-  return /* @__PURE__ */ jsxs15("div", {
+  return /* @__PURE__ */ jsxs18("div", {
     className: cn("openpkg-collapsible-panel", className),
     children: [
-      /* @__PURE__ */ jsxs15("button", {
+      /* @__PURE__ */ jsxs18("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, {
+          /* @__PURE__ */ jsx32(ChevronRight, {
             size: 14,
             className: cn("text-[var(--openpkg-text-muted)]", "transition-transform duration-200", expanded && "rotate-90")
           }),
-          /* @__PURE__ */ jsx29("span", {
+          /* @__PURE__ */ jsx32("span", {
             className: "text-[13px] font-medium text-[var(--openpkg-text-secondary)]",
             children: title
           })
         ]
       }),
-      /* @__PURE__ */ jsx29("div", {
+      /* @__PURE__ */ jsx32("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", {
+        children: /* @__PURE__ */ jsx32("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
         })
@@ -1494,7 +1751,7 @@ function CollapsiblePanel({
 // 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";
+import { jsx as jsx33 } 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: {
@@ -1515,7 +1772,7 @@ var endpointBadgeVariants = cva("inline-flex items-center justify-center font-mo
   }
 });
 var EndpointBadge = React4.forwardRef(({ className, method, size, ...props }, ref) => {
-  return /* @__PURE__ */ jsx30("span", {
+  return /* @__PURE__ */ jsx33("span", {
     ref,
     className: cn(endpointBadgeVariants({ method, size, className })),
     ...props,
@@ -1526,36 +1783,36 @@ 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";
+import { useState as useState9 } from "react";
+import { jsx as jsx34, jsxs as jsxs19 } from "react/jsx-runtime";
 
 var EndpointHeader = React5.forwardRef(({ className, method, path, copyable = true, ...props }, ref) => {
-  const [copied, setCopied] = useState7(false);
+  const [copied, setCopied] = useState9(false);
   const handleCopy = () => {
     navigator.clipboard.writeText(path);
     setCopied(true);
     setTimeout(() => setCopied(false), 1200);
   };
-  return /* @__PURE__ */ jsxs16("div", {
+  return /* @__PURE__ */ jsxs19("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, {
+      /* @__PURE__ */ jsx34(EndpointBadge, {
         method
       }),
-      /* @__PURE__ */ jsx31("code", {
+      /* @__PURE__ */ jsx34("code", {
         className: "font-mono text-sm text-foreground flex-1",
         children: path
       }),
-      copyable && /* @__PURE__ */ jsx31("button", {
+      copyable && /* @__PURE__ */ jsx34("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, {
+        children: copied ? /* @__PURE__ */ jsx34(Check2, {
           size: 14
-        }) : /* @__PURE__ */ jsx31(Copy2, {
+        }) : /* @__PURE__ */ jsx34(Copy2, {
           size: 14
         })
       })
@@ -1564,7 +1821,7 @@ var EndpointHeader = React5.forwardRef(({ className, method, path, copyable = tr
 });
 EndpointHeader.displayName = "EndpointHeader";
 // src/docskit/api/enum-values-section.tsx
-import { jsx as jsx32, jsxs as jsxs17 } from "react/jsx-runtime";
+import { jsx as jsx35, jsxs as jsxs20 } from "react/jsx-runtime";
 
 function EnumValuesSection({
   values,
@@ -1573,23 +1830,23 @@ function EnumValuesSection({
 }) {
   if (values.length === 0)
     return null;
-  return /* @__PURE__ */ jsxs17("div", {
+  return /* @__PURE__ */ jsxs20("div", {
     className: cn("openpkg-enum-section", "mt-3", className),
     children: [
-      /* @__PURE__ */ jsx32("div", {
+      /* @__PURE__ */ jsx35("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", {
+      /* @__PURE__ */ jsx35("div", {
         className: "openpkg-enum-values flex flex-col gap-0.5",
-        children: values.map((item) => /* @__PURE__ */ jsxs17("div", {
+        children: values.map((item) => /* @__PURE__ */ jsxs20("div", {
           className: cn("openpkg-enum-value", "py-2.5 px-3", "bg-[var(--openpkg-bg-secondary)]", "rounded"),
           children: [
-            /* @__PURE__ */ jsx32("span", {
+            /* @__PURE__ */ jsx35("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
             }),
-            item.description && /* @__PURE__ */ jsx32("p", {
+            item.description && /* @__PURE__ */ jsx35("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
             })
@@ -1600,7 +1857,7 @@ function EnumValuesSection({
   });
 }
 // src/docskit/api/example-chips.tsx
-import { jsx as jsx33 } from "react/jsx-runtime";
+import { jsx as jsx36 } from "react/jsx-runtime";
 
 function ExampleChips({
   examples,
@@ -1608,11 +1865,11 @@ function ExampleChips({
   onSelect,
   className
 }) {
-  return /* @__PURE__ */ jsx33("div", {
+  return /* @__PURE__ */ jsx36("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", {
+      return /* @__PURE__ */ jsx36("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 ? [
@@ -1633,7 +1890,7 @@ function ExampleChips({
   });
 }
 // src/docskit/api/example-section.tsx
-import { useEffect as useEffect4, useRef as useRef3, useState as useState9 } from "react";
+import { useEffect as useEffect4, useRef as useRef3, useState as useState11 } from "react";
 
 // src/docskit/hooks/use-sync-scroll.tsx
 import {
@@ -1643,9 +1900,9 @@ import {
   useEffect as useEffect3,
   useMemo,
   useRef as useRef2,
-  useState as useState8
+  useState as useState10
 } from "react";
-import { jsx as jsx34 } from "react/jsx-runtime";
+import { jsx as jsx37 } from "react/jsx-runtime";
 
 var SyncScrollContext = createContext2(null);
 function SyncScrollProvider({
@@ -1653,7 +1910,7 @@ function SyncScrollProvider({
   rootMargin = "-20% 0px -60% 0px",
   scrollBehavior = "smooth"
 }) {
-  const [activeSection, setActiveSection] = useState8(null);
+  const [activeSection, setActiveSection] = useState10(null);
   const sectionsRef = useRef2(new Map);
   const rightColumnRef = useRef2(null);
   const isScrollingRef = useRef2(false);
@@ -1713,7 +1970,7 @@ function SyncScrollProvider({
     scrollToSection,
     registerRightColumn
   }), [activeSection, registerSection, unregisterSection, scrollToSection, registerRightColumn]);
-  return /* @__PURE__ */ jsx34(SyncScrollContext.Provider, {
+  return /* @__PURE__ */ jsx37(SyncScrollContext.Provider, {
     value,
     children
   });
@@ -1736,7 +1993,7 @@ function useSyncSection(id) {
 }
 
 // src/docskit/api/example-section.tsx
-import { jsx as jsx35, jsxs as jsxs18 } from "react/jsx-runtime";
+import { jsx as jsx38, jsxs as jsxs21 } from "react/jsx-runtime";
 
 function ExampleSection({
   id,
@@ -1746,7 +2003,7 @@ function ExampleSection({
   notes,
   className
 }) {
-  const [activeExampleId, setActiveExampleId] = useState9(examples[0]?.id ?? "");
+  const [activeExampleId, setActiveExampleId] = useState11(examples[0]?.id ?? "");
   const ref = useRef3(null);
   const syncScroll = useSyncScrollSafe();
   const activeExample = examples.find((e) => e.id === activeExampleId) ?? examples[0];
@@ -1756,46 +2013,46 @@ function ExampleSection({
       ref.current.setAttribute("data-section", id);
     }
   }, [id]);
-  return /* @__PURE__ */ jsxs18("div", {
+  return /* @__PURE__ */ jsxs21("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.length > 1 && /* @__PURE__ */ jsx38(ExampleChips, {
         examples: examples.map((e) => ({ id: e.id, label: e.label })),
         activeId: activeExampleId,
         onSelect: setActiveExampleId
       }),
-      activeExample && /* @__PURE__ */ jsx35(CodeBlock, {
+      activeExample && /* @__PURE__ */ jsx38(CodeBlock, {
         code: activeExample.code,
         language: activeExample.language ?? "typescript",
         showLineNumbers: true
       }),
-      dataSource && /* @__PURE__ */ jsx35(CollapsiblePanel, {
+      dataSource && /* @__PURE__ */ jsx38(CollapsiblePanel, {
         title: "Data source",
-        children: /* @__PURE__ */ jsx35("div", {
+        children: /* @__PURE__ */ jsx38("div", {
           className: "p-4",
-          children: /* @__PURE__ */ jsx35(CodeBlock, {
+          children: /* @__PURE__ */ jsx38(CodeBlock, {
             code: dataSource,
             language: "sql"
           })
         })
       }),
-      response && /* @__PURE__ */ jsx35(CollapsiblePanel, {
+      response && /* @__PURE__ */ jsx38(CollapsiblePanel, {
         title: "Response",
-        children: /* @__PURE__ */ jsx35("div", {
+        children: /* @__PURE__ */ jsx38("div", {
           className: "p-4",
-          children: /* @__PURE__ */ jsx35(CodeBlock, {
+          children: /* @__PURE__ */ jsx38(CodeBlock, {
             code: response,
             language: "json"
           })
         })
       }),
-      notes && /* @__PURE__ */ jsx35(CollapsiblePanel, {
+      notes && /* @__PURE__ */ jsx38(CollapsiblePanel, {
         title: "Notes",
-        children: /* @__PURE__ */ jsx35("div", {
+        children: /* @__PURE__ */ jsx38("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: typeof notes === "string" ? /* @__PURE__ */ jsx38("p", {
             children: notes
           }) : notes
         })
@@ -1812,10 +2069,53 @@ function useSyncScrollSafe() {
 }
 // src/docskit/api/expandable-parameter.tsx
 import { formatSchema } from "@openpkg-ts/sdk/browser";
-import { useState as useState10 } from "react";
+import { useState as useState12 } from "react";
+
+// src/docskit/api/nested-parameter-container.tsx
+import { jsx as jsx39 } from "react/jsx-runtime";
+
+function NestedParameterContainer({
+  children,
+  level = 0,
+  className
+}) {
+  return /* @__PURE__ */ jsx39("div", {
+    className: cn("openpkg-nested-container", "border border-t-0 border-[var(--openpkg-border-medium)]", "rounded-b-lg", "px-5", "[&>.openpkg-expandable-param]:py-4", "[&>.openpkg-expandable-param]:border-b", "[&>.openpkg-expandable-param]:border-[var(--openpkg-border-subtle)]", "[&>.openpkg-expandable-param:last-child]:border-b-0", "[&>.openpkg-expandable-param:last-child]:pb-4", "[&>.openpkg-expandable-param_.openpkg-param]:py-0", "[&>.openpkg-expandable-param_.openpkg-param]:border-b-0", className),
+    "data-level": level,
+    children
+  });
+}
+
+// src/docskit/api/nested-parameter-toggle.tsx
+import { jsx as jsx40, jsxs as jsxs22 } from "react/jsx-runtime";
+
+function NestedParameterToggle({
+  expanded,
+  onToggle,
+  className
+}) {
+  return /* @__PURE__ */ jsxs22("button", {
+    type: "button",
+    onClick: onToggle,
+    className: cn("openpkg-nested-toggle", "flex items-center gap-2", "font-sans text-[13px] font-medium", "text-[var(--openpkg-text-secondary)]", "bg-transparent", "border border-[var(--openpkg-border-medium)]", "px-2 py-1.5", "cursor-pointer", "transition-[width,border-radius,border-color,color] duration-200 ease-out", "hover:text-[var(--openpkg-text-primary)]", expanded ? "w-full rounded-t-md rounded-b-none border-b-[var(--openpkg-border-subtle)]" : "w-fit rounded-md", className),
+    "aria-expanded": expanded,
+    children: [
+      /* @__PURE__ */ jsx40("span", {
+        className: "text-[13px]",
+        children: expanded ? "×" : "+"
+      }),
+      /* @__PURE__ */ jsxs22("span", {
+        children: [
+          expanded ? "Hide" : "Show",
+          " Child Attributes"
+        ]
+      })
+    ]
+  });
+}
 
 // src/docskit/api/parameter-item.tsx
-import { jsx as jsx36, jsxs as jsxs19 } from "react/jsx-runtime";
+import { jsx as jsx41, jsxs as jsxs23 } from "react/jsx-runtime";
 
 function APIParameterItem({
   name,
@@ -1828,41 +2128,41 @@ function APIParameterItem({
   anchorId,
   className
 }) {
-  return /* @__PURE__ */ jsxs19("div", {
+  return /* @__PURE__ */ jsxs23("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", {
+      /* @__PURE__ */ jsxs23("div", {
         className: "openpkg-param-header flex items-baseline gap-2 mb-1 flex-wrap",
         children: [
-          /* @__PURE__ */ jsxs19("span", {
+          /* @__PURE__ */ jsxs23("span", {
             className: "openpkg-param-name font-mono text-sm font-semibold",
             children: [
-              parentPath && /* @__PURE__ */ jsx36("span", {
+              parentPath && /* @__PURE__ */ jsx41("span", {
                 className: "text-[var(--openpkg-text-muted)]",
                 children: parentPath
               }),
-              /* @__PURE__ */ jsx36("span", {
+              /* @__PURE__ */ jsx41("span", {
                 className: "text-[var(--openpkg-text-primary)]",
                 children: name
               })
             ]
           }),
-          /* @__PURE__ */ jsx36("span", {
+          /* @__PURE__ */ jsx41("span", {
             className: "openpkg-param-type text-[13px] text-[var(--openpkg-text-muted)]",
             children: type
           }),
-          required && /* @__PURE__ */ jsx36("span", {
+          required && /* @__PURE__ */ jsx41("span", {
             className: "openpkg-param-badge text-[13px] font-medium text-[var(--openpkg-accent-orange,#d4a553)]",
             children: "required"
           }),
-          optional && /* @__PURE__ */ jsx36("span", {
+          optional && /* @__PURE__ */ jsx41("span", {
             className: "openpkg-param-badge text-[13px] text-[var(--openpkg-text-muted)]",
             children: "optional"
           })
         ]
       }),
-      description && /* @__PURE__ */ jsx36("p", {
+      description && /* @__PURE__ */ jsx41("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
       }),
@@ -1871,63 +2171,20 @@ function APIParameterItem({
   });
 }
 
-// src/docskit/api/nested-parameter-container.tsx
-import { jsx as jsx37 } from "react/jsx-runtime";
+// src/docskit/api/expandable-parameter.tsx
+import { jsx as jsx42, jsxs as jsxs24 } from "react/jsx-runtime";
 
-function NestedParameterContainer({
-  children,
+function ExpandableParameter({
+  parameter,
+  parentPath,
+  defaultExpanded = false,
+  expanded: controlledExpanded,
+  onExpandedChange,
   level = 0,
-  className
+  className,
+  resolveRef
 }) {
-  return /* @__PURE__ */ jsx37("div", {
-    className: cn("openpkg-nested-container", "border border-t-0 border-[var(--openpkg-border-medium)]", "rounded-b-lg", "px-5", "[&>.openpkg-expandable-param]:py-4", "[&>.openpkg-expandable-param]:border-b", "[&>.openpkg-expandable-param]:border-[var(--openpkg-border-subtle)]", "[&>.openpkg-expandable-param:last-child]:border-b-0", "[&>.openpkg-expandable-param:last-child]:pb-4", "[&>.openpkg-expandable-param_.openpkg-param]:py-0", "[&>.openpkg-expandable-param_.openpkg-param]:border-b-0", className),
-    "data-level": level,
-    children
-  });
-}
-
-// src/docskit/api/nested-parameter-toggle.tsx
-import { jsx as jsx38, jsxs as jsxs20 } from "react/jsx-runtime";
-
-function NestedParameterToggle({
-  expanded,
-  onToggle,
-  className
-}) {
-  return /* @__PURE__ */ jsxs20("button", {
-    type: "button",
-    onClick: onToggle,
-    className: cn("openpkg-nested-toggle", "flex items-center gap-2", "font-sans text-[13px] font-medium", "text-[var(--openpkg-text-secondary)]", "bg-transparent", "border border-[var(--openpkg-border-medium)]", "px-2 py-1.5", "cursor-pointer", "transition-[width,border-radius,border-color,color] duration-200 ease-out", "hover:text-[var(--openpkg-text-primary)]", expanded ? "w-full rounded-t-md rounded-b-none border-b-[var(--openpkg-border-subtle)]" : "w-fit rounded-md", className),
-    "aria-expanded": expanded,
-    children: [
-      /* @__PURE__ */ jsx38("span", {
-        className: "text-[13px]",
-        children: expanded ? "×" : "+"
-      }),
-      /* @__PURE__ */ jsxs20("span", {
-        children: [
-          expanded ? "Hide" : "Show",
-          " Child Attributes"
-        ]
-      })
-    ]
-  });
-}
-
-// src/docskit/api/expandable-parameter.tsx
-import { jsx as jsx39, jsxs as jsxs21 } from "react/jsx-runtime";
-
-function ExpandableParameter({
-  parameter,
-  parentPath,
-  defaultExpanded = false,
-  expanded: controlledExpanded,
-  onExpandedChange,
-  level = 0,
-  className,
-  resolveRef
-}) {
-  const [internalExpanded, setInternalExpanded] = useState10(defaultExpanded);
+  const [internalExpanded, setInternalExpanded] = useState12(defaultExpanded);
   const isControlled = controlledExpanded !== undefined;
   const expanded = isControlled ? controlledExpanded : internalExpanded;
   const handleToggle = () => {
@@ -1941,9 +2198,9 @@ function ExpandableParameter({
   const { nestedParams, enumValues, hasChildren } = extractSchemaInfo(parameter.schema, resolveRef);
   const type = formatSchema(parameter.schema);
   const isRequired = parameter.required !== false;
-  return /* @__PURE__ */ jsx39("div", {
+  return /* @__PURE__ */ jsx42("div", {
     className: cn("openpkg-expandable-param", className),
-    children: /* @__PURE__ */ jsxs21(APIParameterItem, {
+    children: /* @__PURE__ */ jsxs24(APIParameterItem, {
       name: parameter.name,
       parentPath,
       type: hasChildren ? "object" : type,
@@ -1951,19 +2208,19 @@ function ExpandableParameter({
       description: parameter.description,
       anchorId: parentPath ? `${parentPath}${parameter.name}` : parameter.name,
       children: [
-        enumValues.length > 0 && !nestedParams.length && /* @__PURE__ */ jsx39(EnumValuesSection, {
+        enumValues.length > 0 && !nestedParams.length && /* @__PURE__ */ jsx42(EnumValuesSection, {
           values: enumValues
         }),
-        nestedParams.length > 0 && /* @__PURE__ */ jsxs21("div", {
+        nestedParams.length > 0 && /* @__PURE__ */ jsxs24("div", {
           className: "mt-3 mb-1",
           children: [
-            /* @__PURE__ */ jsx39(NestedParameterToggle, {
+            /* @__PURE__ */ jsx42(NestedParameterToggle, {
               expanded,
               onToggle: handleToggle
             }),
-            expanded && /* @__PURE__ */ jsx39(NestedParameterContainer, {
+            expanded && /* @__PURE__ */ jsx42(NestedParameterContainer, {
               level,
-              children: nestedParams.map((nested) => /* @__PURE__ */ jsx39(ExpandableParameter, {
+              children: nestedParams.map((nested) => /* @__PURE__ */ jsx42(ExpandableParameter, {
                 parameter: nested,
                 parentPath: `${parameter.name}.`,
                 level: level + 1,
@@ -2014,7 +2271,7 @@ function extractSchemaInfo(schema, resolveRef) {
 }
 // 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";
+import { jsx as jsx43, jsxs as jsxs25 } from "react/jsx-runtime";
 
 function MethodSection({
   id,
@@ -2033,36 +2290,36 @@ function MethodSection({
       return () => syncScroll.unregisterSection(id);
     }
   }, [id, syncScroll]);
-  return /* @__PURE__ */ jsxs22("section", {
+  return /* @__PURE__ */ jsxs25("section", {
     ref,
     id,
     "data-section": id,
     className: cn("openpkg-method-section", "mb-20 last:mb-0", className),
     children: [
-      /* @__PURE__ */ jsx40("h2", {
+      /* @__PURE__ */ jsx43("h2", {
         className: cn("text-2xl font-semibold tracking-tight", "text-[var(--openpkg-text-primary)]", "mb-4"),
         children: title
       }),
-      signature && /* @__PURE__ */ jsx40("code", {
+      signature && /* @__PURE__ */ jsx43("code", {
         className: cn("block font-mono text-sm", "text-[var(--openpkg-text-muted)]", "mb-6"),
         children: signature
       }),
-      description && /* @__PURE__ */ jsx40("div", {
+      description && /* @__PURE__ */ jsx43("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: typeof description === "string" ? /* @__PURE__ */ jsx43("p", {
           children: description
         }) : description
       }),
-      notes && notes.length > 0 && /* @__PURE__ */ jsx40("ul", {
+      notes && notes.length > 0 && /* @__PURE__ */ jsx43("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: notes.map((note, i) => /* @__PURE__ */ jsx43("li", {
           children: note
         }, i))
       }),
-      children && /* @__PURE__ */ jsxs22("div", {
+      children && /* @__PURE__ */ jsxs25("div", {
         className: "openpkg-method-params",
         children: [
-          /* @__PURE__ */ jsx40("h3", {
+          /* @__PURE__ */ jsx43("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"
           }),
@@ -2080,10 +2337,10 @@ function useSyncScrollSafe2() {
   }
 }
 // src/docskit/api/parameter-list.tsx
-import { ChevronDown as ChevronDown2 } from "lucide-react";
+import { ChevronDown as ChevronDown3 } 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";
+import { useState as useState13 } from "react";
+import { jsx as jsx44, jsxs as jsxs26 } from "react/jsx-runtime";
 
 function ParameterList({
   title,
@@ -2091,28 +2348,28 @@ function ParameterList({
   children,
   className
 }) {
-  const [expanded, setExpanded] = useState11(false);
+  const [expanded, setExpanded] = useState13(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", {
+  return /* @__PURE__ */ jsxs26("div", {
     className: cn("", className),
     children: [
-      title && /* @__PURE__ */ jsx41("h3", {
+      title && /* @__PURE__ */ jsx44("h3", {
         className: "text-sm font-medium text-foreground mb-3 uppercase tracking-wide",
         children: title
       }),
-      /* @__PURE__ */ jsx41("div", {
+      /* @__PURE__ */ jsx44("div", {
         className: "divide-y divide-border border-t border-b border-border",
         children: visibleChildren
       }),
-      shouldCollapse && !expanded && /* @__PURE__ */ jsxs23("button", {
+      shouldCollapse && !expanded && /* @__PURE__ */ jsxs26("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, {
+          /* @__PURE__ */ jsx44(ChevronDown3, {
             size: 14
           }),
           "Show ",
@@ -2126,41 +2383,41 @@ function ParameterList({
 }
 // 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";
+import { useState as useState14 } from "react";
+import { jsx as jsx45, jsxs as jsxs27 } from "react/jsx-runtime";
 
 function ResponseBlock({ data, title, className }) {
-  const [copied, setCopied] = useState12(false);
+  const [copied, setCopied] = useState14(false);
   const jsonString = JSON.stringify(data, null, 2);
   const handleCopy = () => {
     navigator.clipboard.writeText(jsonString);
     setCopied(true);
     setTimeout(() => setCopied(false), 1200);
   };
-  return /* @__PURE__ */ jsxs24("div", {
+  return /* @__PURE__ */ jsxs27("div", {
     className: cn("group rounded-lg border border-border overflow-hidden bg-muted/30", className),
     children: [
-      title && /* @__PURE__ */ jsxs24("div", {
+      title && /* @__PURE__ */ jsxs27("div", {
         className: "flex items-center justify-between px-4 py-2 border-b border-border bg-muted/50",
         children: [
-          /* @__PURE__ */ jsx42("span", {
+          /* @__PURE__ */ jsx45("span", {
             className: "text-xs font-medium text-muted-foreground uppercase tracking-wide",
             children: title
           }),
-          /* @__PURE__ */ jsx42("button", {
+          /* @__PURE__ */ jsx45("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, {
+            children: copied ? /* @__PURE__ */ jsx45(Check3, {
               size: 14
-            }) : /* @__PURE__ */ jsx42(Copy3, {
+            }) : /* @__PURE__ */ jsx45(Copy3, {
               size: 14
             })
           })
         ]
       }),
-      /* @__PURE__ */ jsx42(ClientDocsKitCode, {
+      /* @__PURE__ */ jsx45(ClientDocsKitCode, {
         codeblock: {
           value: jsonString,
           lang: "json",
@@ -2173,11 +2430,11 @@ function ResponseBlock({ data, title, className }) {
 }
 // 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";
+import { jsx as jsx46, jsxs as jsxs28 } from "react/jsx-runtime";
 async function DocsKitCode(props) {
   const { codeblock, className, ...rest } = props;
   const group = await toCodeGroup({ codeblocks: [codeblock], ...rest });
-  return /* @__PURE__ */ jsx43(SingleCode, {
+  return /* @__PURE__ */ jsx46(SingleCode, {
     group,
     className
   });
@@ -2185,30 +2442,30 @@ async function DocsKitCode(props) {
 async function SingleCode(props) {
   const { pre, title, code, icon: icon2, options } = props.group.tabs[0];
   const showCopy = options?.copyButton;
-  return /* @__PURE__ */ jsxs25("div", {
+  return /* @__PURE__ */ jsxs28("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", {
+      title ? /* @__PURE__ */ jsx46("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", {
+        children: /* @__PURE__ */ jsxs28("div", {
           className: "flex items-center h-5 gap-2",
           children: [
-            /* @__PURE__ */ jsx43("div", {
+            /* @__PURE__ */ jsx46("div", {
               className: "size-4",
               children: icon2
             }),
-            /* @__PURE__ */ jsx43("span", {
+            /* @__PURE__ */ jsx46("span", {
               className: "leading-none",
               children: title
             })
           ]
         })
       }) : null,
-      /* @__PURE__ */ jsxs25("div", {
+      /* @__PURE__ */ jsxs28("div", {
         className: "relative flex items-start",
         children: [
           pre,
-          showCopy && /* @__PURE__ */ jsx43(CopyButton, {
+          showCopy && /* @__PURE__ */ jsx46(CopyButton, {
             text: code,
             variant: "floating",
             className: cn("absolute right-3 z-10 text-openpkg-code-text-inactive", "top-3")
@@ -2235,13 +2492,13 @@ async function toCodeGroup(props) {
       options,
       title,
       code: highlighted.code,
-      icon: /* @__PURE__ */ jsx43(CodeIcon, {
+      icon: /* @__PURE__ */ jsx46(CodeIcon, {
         title,
         lang: tab.lang,
         className: "opacity-60"
       }),
       lang: tab.lang,
-      pre: /* @__PURE__ */ jsx43(Pre2, {
+      pre: /* @__PURE__ */ jsx46(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,
@@ -2262,40 +2519,43 @@ function extractFlags2(codeblock) {
   return { title, flags: flags.slice(1) };
 }
 // src/docskit/code.client.tsx
-import { jsx as jsx44, jsxs as jsxs26 } from "react/jsx-runtime";
+import { jsx as jsx47, jsxs as jsxs29 } from "react/jsx-runtime";
 
-function MultiCode({ group, className }) {
+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, {
+  return /* @__PURE__ */ jsxs29(Tabs, {
     value: currentTitle,
     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", className),
     children: [
-      /* @__PURE__ */ jsx44(TabsList, {
+      /* @__PURE__ */ jsx47(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, {
+        children: group.tabs.map(({ icon: icon2, title }, _index) => /* @__PURE__ */ jsxs29(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__ */ jsx44("div", {
+            /* @__PURE__ */ jsx47("div", {
               children: icon2
             }),
-            /* @__PURE__ */ jsx44("span", {
+            /* @__PURE__ */ jsx47("span", {
               className: "leading-none",
               children: title
             })
           ]
         }, title))
       }),
-      /* @__PURE__ */ jsxs26(TabsContent, {
+      /* @__PURE__ */ jsxs29(TabsContent, {
         value: current.title,
         className: "relative min-h-0 mt-0 flex flex-col",
         children: [
           current.pre,
-          group.options.copyButton && /* @__PURE__ */ jsx44(CopyButton, {
+          group.options.copyButton && /* @__PURE__ */ jsx47(CopyButton, {
             text: code,
             variant: "floating",
             className: "absolute right-3 top-3 z-10 text-openpkg-code-text-inactive"
@@ -2310,18 +2570,18 @@ import {
   highlight as highlight3,
   Pre as Pre3
 } from "codehike/code";
-import { ChevronDown as ChevronDown3, ChevronUp } from "lucide-react";
-import { useEffect as useEffect6, useState as useState13 } from "react";
-import { jsx as jsx45, jsxs as jsxs27 } from "react/jsx-runtime";
+import { ChevronDown as ChevronDown4, ChevronUp } from "lucide-react";
+import { useEffect as useEffect6, useState as useState15 } from "react";
+import { jsx as jsx48, jsxs as jsxs30 } from "react/jsx-runtime";
 
 function StackedChevrons({ isOpen, className }) {
-  return /* @__PURE__ */ jsxs27("div", {
+  return /* @__PURE__ */ jsxs30("div", {
     className: cn("flex flex-col items-center -space-y-1 transition-opacity", className),
     children: [
-      /* @__PURE__ */ jsx45(ChevronUp, {
+      /* @__PURE__ */ jsx48(ChevronUp, {
         className: cn("size-3 transition-colors", isOpen ? "text-openpkg-code-text-active" : "text-openpkg-code-text-inactive")
       }),
-      /* @__PURE__ */ jsx45(ChevronDown3, {
+      /* @__PURE__ */ jsx48(ChevronDown4, {
         className: cn("size-3 transition-colors", isOpen ? "text-openpkg-code-text-active" : "text-openpkg-code-text-inactive")
       })
     ]
@@ -2337,8 +2597,8 @@ function ClientDiffCode(props) {
     className: wrapperClassName,
     defaultOpen = true
   } = props;
-  const [highlighted, setHighlighted] = useState13(null);
-  const [isOpen, setIsOpen] = useState13(defaultOpen);
+  const [highlighted, setHighlighted] = useState15(null);
+  const [isOpen, setIsOpen] = useState15(defaultOpen);
   const { title, flags } = extractFlags3(codeblock);
   const options = flagsToOptions(flags);
   const filename = filenameProp || title || "file";
@@ -2353,7 +2613,7 @@ function ClientDiffCode(props) {
     };
   }, [codeblock.value, codeblock.lang, codeblock.meta, codeblock]);
   if (!highlighted) {
-    return /* @__PURE__ */ jsx45(CodeBlockSkeleton, {
+    return /* @__PURE__ */ jsx48(CodeBlockSkeleton, {
       hasTitle: true
     });
   }
@@ -2363,53 +2623,53 @@ function ClientDiffCode(props) {
   }
   const { background: _background, ...highlightedStyle } = highlighted.style;
   const showCopy = options?.copyButton;
-  const icon2 = /* @__PURE__ */ jsx45(CodeIcon, {
+  const icon2 = /* @__PURE__ */ jsx48(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__ */ jsx45(Collapsible, {
+  return /* @__PURE__ */ jsx48(Collapsible, {
     open: isOpen,
     onOpenChange: setIsOpen,
-    children: /* @__PURE__ */ jsxs27("div", {
+    children: /* @__PURE__ */ jsxs30("div", {
       className: cn("group rounded overflow-hidden relative border-openpkg-code-border flex flex-col border my-4 not-prose", wrapperClassName),
       children: [
-        /* @__PURE__ */ jsx45(CollapsibleTrigger2, {
+        /* @__PURE__ */ jsx48(CollapsibleTrigger2, {
           asChild: true,
-          children: /* @__PURE__ */ jsxs27("button", {
+          children: /* @__PURE__ */ jsxs30("button", {
             type: "button",
             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__ */ jsxs27("div", {
+              /* @__PURE__ */ jsxs30("div", {
                 className: "flex items-center h-5 gap-2 flex-1 min-w-0",
                 children: [
-                  /* @__PURE__ */ jsx45("div", {
+                  /* @__PURE__ */ jsx48("div", {
                     className: "size-4 shrink-0",
                     children: icon2
                   }),
-                  path && /* @__PURE__ */ jsx45("span", {
+                  path && /* @__PURE__ */ jsx48("span", {
                     className: "text-openpkg-code-text-inactive truncate",
                     children: path
                   }),
-                  /* @__PURE__ */ jsx45("span", {
+                  /* @__PURE__ */ jsx48("span", {
                     className: "text-openpkg-code-text-active font-medium truncate",
                     children: filename
                   })
                 ]
               }),
-              /* @__PURE__ */ jsxs27("div", {
+              /* @__PURE__ */ jsxs30("div", {
                 className: "flex items-center gap-2 text-sm shrink-0 ml-2",
                 children: [
-                  hasAdditions && /* @__PURE__ */ jsxs27("span", {
+                  hasAdditions && /* @__PURE__ */ jsxs30("span", {
                     className: "text-green-500 font-medium",
                     children: [
                       "+",
                       diff2.additions
                     ]
                   }),
-                  hasDeletions && /* @__PURE__ */ jsxs27("span", {
+                  hasDeletions && /* @__PURE__ */ jsxs30("span", {
                     className: "text-red-500 font-medium",
                     children: [
                       "-",
@@ -2418,24 +2678,24 @@ function ClientDiffCode(props) {
                   })
                 ]
               }),
-              /* @__PURE__ */ jsx45(StackedChevrons, {
+              /* @__PURE__ */ jsx48(StackedChevrons, {
                 isOpen,
                 className: "ml-2"
               })
             ]
           })
         }),
-        /* @__PURE__ */ jsx45(CollapsibleContent2, {
-          children: /* @__PURE__ */ jsxs27("div", {
+        /* @__PURE__ */ jsx48(CollapsibleContent2, {
+          children: /* @__PURE__ */ jsxs30("div", {
             className: "relative flex items-start",
             children: [
-              /* @__PURE__ */ jsx45(Pre3, {
+              /* @__PURE__ */ jsx48(Pre3, {
                 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__ */ jsx45(CopyButton, {
+              showCopy && /* @__PURE__ */ jsx48(CopyButton, {
                 text: highlighted.code,
                 variant: "floating",
                 className: "absolute right-3 top-3 z-10 text-openpkg-code-text-inactive"
@@ -2456,121 +2716,21 @@ function extractFlags3(codeblock) {
 }
 // src/docskit/code.inline.tsx
 import { highlight as highlight4, Inline as Inline2 } from "codehike/code";
-import { jsx as jsx46 } from "react/jsx-runtime";
-async function DocsKitInlineCode({ codeblock }) {
+import { jsx as jsx49 } from "react/jsx-runtime";
+async function DocsKitInlineCode({
+  codeblock
+}) {
   const highlighted = await highlight4(codeblock, theme);
-  return /* @__PURE__ */ jsx46(Inline2, {
+  return /* @__PURE__ */ jsx49(Inline2, {
     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
   });
 }
-// src/docskit/code.package-install.tsx
-import { useState as useState14 } from "react";
-import { jsx as jsx47, jsxs as jsxs28 } from "react/jsx-runtime";
-
-var managerLabels = {
-  npm: "npm",
-  bun: "bun",
-  pnpm: "pnpm",
-  yarn: "yarn"
-};
-function getInstallCommand(manager, pkg, options) {
-  const { dev, global: isGlobal } = options;
-  if (isGlobal) {
-    switch (manager) {
-      case "npm":
-        return `npm install -g ${pkg}`;
-      case "bun":
-        return `bun install -g ${pkg}`;
-      case "pnpm":
-        return `pnpm install -g ${pkg}`;
-      case "yarn":
-        return `yarn global add ${pkg}`;
-    }
-  }
-  if (dev) {
-    switch (manager) {
-      case "npm":
-        return `npm install -D ${pkg}`;
-      case "bun":
-        return `bun add -d ${pkg}`;
-      case "pnpm":
-        return `pnpm add -D ${pkg}`;
-      case "yarn":
-        return `yarn add -D ${pkg}`;
-    }
-  }
-  switch (manager) {
-    case "npm":
-      return `npm install ${pkg}`;
-    case "bun":
-      return `bun add ${pkg}`;
-    case "pnpm":
-      return `pnpm add ${pkg}`;
-    case "yarn":
-      return `yarn add ${pkg}`;
-  }
-}
-function PackageInstall({
-  package: pkg,
-  dev = false,
-  global: isGlobal = false,
-  managers = ["npm", "bun", "pnpm", "yarn"],
-  copyButton = true
-}) {
-  const [activeManager, setActiveManager] = useState14(managers[0]);
-  const command = getInstallCommand(activeManager, pkg, { dev, global: isGlobal });
-  return /* @__PURE__ */ jsxs28("div", {
-    className: "group rounded overflow-hidden border border-openpkg-code-border flex flex-col my-4 not-prose",
-    children: [
-      /* @__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__ */ jsxs28("div", {
-            className: "flex items-center gap-2",
-            children: [
-              /* @__PURE__ */ jsx47("div", {
-                className: "size-3 rounded-full bg-openpkg-code-text-inactive/30"
-              }),
-              /* @__PURE__ */ jsx47("div", {
-                className: "size-3 rounded-full bg-openpkg-code-text-inactive/30"
-              }),
-              /* @__PURE__ */ jsx47("div", {
-                className: "size-3 rounded-full bg-openpkg-code-text-inactive/30"
-              })
-            ]
-          }),
-          /* @__PURE__ */ jsx47("div", {
-            className: "flex items-center gap-0.5 ml-1",
-            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-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__ */ jsx47("span", {
-            className: "sr-only",
-            children: "Terminal window"
-          })
-        ]
-      }),
-      /* @__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 as CodeBlock2 } from "codehike/blocks";
 import { z } from "zod";
-import { jsx as jsx48 } from "react/jsx-runtime";
+import { jsx as jsx50 } from "react/jsx-runtime";
 async function CodeGroup(props) {
   const result = Block.extend({
     code: z.array(CodeBlock2),
@@ -2582,16 +2742,16 @@ async function CodeGroup(props) {
     throw betterError(result.error, "CodeGroup");
   }
   const { code, ...rest } = result.data;
-  return /* @__PURE__ */ jsx48(Code, {
+  return /* @__PURE__ */ jsx50(Code, {
     codeblocks: code,
     ...rest
   });
 }
 async function Code(props) {
   const group = await toCodeGroup(props);
-  return group.tabs.length === 1 ? /* @__PURE__ */ jsx48(SingleCode, {
+  return group.tabs.length === 1 ? /* @__PURE__ */ jsx50(SingleCode, {
     group
-  }) : /* @__PURE__ */ jsx48(MultiCode, {
+  }) : /* @__PURE__ */ jsx50(MultiCode, {
     group
   }, group.storage);
 }
@@ -2605,7 +2765,7 @@ function betterError(error, componentName) {
 }
 // src/docskit/code.terminal.tsx
 import { highlight as highlight5, Pre as Pre4 } from "codehike/code";
-import { jsx as jsx49, jsxs as jsxs29 } from "react/jsx-runtime";
+import { jsx as jsx51, jsxs as jsxs31 } from "react/jsx-runtime";
 async function Terminal(props) {
   const { codeblock, handlers: extraHandlers } = props;
   const { flags } = extractFlags4(codeblock);
@@ -2619,42 +2779,42 @@ async function Terminal(props) {
   const showCopy = options?.copyButton;
   const isMultiLine = highlighted.code.includes(`
 `);
-  return /* @__PURE__ */ jsxs29("div", {
+  return /* @__PURE__ */ jsxs31("div", {
     className: "group rounded overflow-hidden relative border-openpkg-code-border flex flex-col border my-4 not-prose",
     children: [
-      /* @__PURE__ */ jsxs29("div", {
+      /* @__PURE__ */ jsxs31("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__ */ jsxs29("div", {
+          /* @__PURE__ */ jsxs31("div", {
             className: "absolute left-3 flex items-center gap-2",
             children: [
-              /* @__PURE__ */ jsx49("div", {
+              /* @__PURE__ */ jsx51("div", {
                 className: "size-3 rounded-full bg-openpkg-code-text-inactive/30"
               }),
-              /* @__PURE__ */ jsx49("div", {
+              /* @__PURE__ */ jsx51("div", {
                 className: "size-3 rounded-full bg-openpkg-code-text-inactive/30"
               }),
-              /* @__PURE__ */ jsx49("div", {
+              /* @__PURE__ */ jsx51("div", {
                 className: "size-3 rounded-full bg-openpkg-code-text-inactive/30"
               })
             ]
           }),
-          /* @__PURE__ */ jsx49("span", {
+          /* @__PURE__ */ jsx51("span", {
             className: "sr-only",
             children: "Terminal window"
           })
         ]
       }),
-      /* @__PURE__ */ jsxs29("div", {
+      /* @__PURE__ */ jsxs31("div", {
         className: "relative flex items-start",
         children: [
-          /* @__PURE__ */ jsx49(Pre4, {
+          /* @__PURE__ */ jsx51(Pre4, {
             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__ */ jsx49(CopyButton, {
+          showCopy && /* @__PURE__ */ jsx51(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")
@@ -2682,8 +2842,56 @@ function addDocsKit(components) {
     }
   };
 }
+// src/docskit/import-section.tsx
+import { Check as Check4, Copy as Copy4 } from "lucide-react";
+
+// src/hooks/use-copy-to-clipboard.ts
+import { useCallback as useCallback2, useRef as useRef5, useState as useState16 } from "react";
+var COPY_FEEDBACK_MS = 1200;
+function useCopyToClipboard(timeout = COPY_FEEDBACK_MS) {
+  const [copied, setCopied] = useState16(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 { jsx as jsx52, jsxs as jsxs32 } from "react/jsx-runtime";
+
+function ImportSection({ importStatement, className }) {
+  const [copied, copy] = useCopyToClipboard();
+  const handleCopy = () => {
+    copy(importStatement);
+  };
+  return /* @__PURE__ */ jsxs32("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__ */ jsx52("code", {
+        className: "font-mono text-sm text-[var(--openpkg-text-primary)] overflow-x-auto",
+        children: importStatement
+      }),
+      /* @__PURE__ */ jsx52("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__ */ jsx52(Check4, {
+          size: 16
+        }) : /* @__PURE__ */ jsx52(Copy4, {
+          size: 16
+        })
+      })
+    ]
+  });
+}
 // src/docskit/notes.tsx
-import { jsx as jsx50 } from "react/jsx-runtime";
+import { jsx as jsx53 } 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;
@@ -2697,7 +2905,7 @@ function WithNotes({ children, ...rest }) {
       return {
         name,
         type: "code",
-        children: /* @__PURE__ */ jsx50(Code, {
+        children: /* @__PURE__ */ jsx53(Code, {
           codeblocks: [block]
         })
       };
@@ -2705,7 +2913,7 @@ function WithNotes({ children, ...rest }) {
       return {
         name,
         type: "image",
-        children: /* @__PURE__ */ jsx50("img", {
+        children: /* @__PURE__ */ jsx53("img", {
           src: block.url,
           alt: block.alt
         })
@@ -2714,54 +2922,82 @@ function WithNotes({ children, ...rest }) {
       throw new Error("Invalid block inside <WithNotes />");
     }
   });
-  return /* @__PURE__ */ jsx50(WithClientNotes, {
+  return /* @__PURE__ */ jsx53(WithClientNotes, {
     notes,
     children
   });
 }
-// src/docskit/import-section.tsx
-import { Check as Check4, Copy as Copy4 } from "lucide-react";
-
-// 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 { jsx as jsx51, jsxs as jsxs30 } from "react/jsx-runtime";
+// src/docskit/runnable-snippet.tsx
+import { Loader2, Play } from "lucide-react";
+import { useState as useState17 } from "react";
+import { jsx as jsx54, jsxs as jsxs33 } from "react/jsx-runtime";
 
-function ImportSection({ importStatement, className }) {
-  const [copied, copy] = useCopyToClipboard();
-  const handleCopy = () => {
-    copy(importStatement);
+function RunnableSnippet({
+  code,
+  language = "typescript",
+  title,
+  mockState = "idle",
+  mockOutput,
+  className
+}) {
+  const [state, setState] = useState17(mockState);
+  const [output, setOutput] = useState17(mockOutput ?? null);
+  const [duration, setDuration] = useState17(0);
+  const handleRun = () => {
+    setState("running");
+    setOutput(null);
+    const startTime = Date.now();
+    setTimeout(() => {
+      const elapsed = Date.now() - startTime;
+      setDuration(elapsed);
+      if (mockState === "error") {
+        setState("error");
+        setOutput(mockOutput ?? "Error: Execution failed");
+      } else {
+        setState("success");
+        setOutput(mockOutput ?? JSON.stringify({ result: "success", timestamp: new Date().toISOString() }, null, 2));
+      }
+    }, 1200);
   };
-  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),
+  const codeblock = {
+    value: code,
+    lang: language,
+    meta: title
+  };
+  return /* @__PURE__ */ jsxs33("div", {
+    className: cn("relative", className),
     children: [
-      /* @__PURE__ */ jsx51("code", {
-        className: "font-mono text-sm text-[var(--openpkg-text-primary)] overflow-x-auto",
-        children: importStatement
+      /* @__PURE__ */ jsxs33("div", {
+        className: "relative group",
+        children: [
+          /* @__PURE__ */ jsx54(ClientDocsKitCode, {
+            codeblock
+          }),
+          /* @__PURE__ */ jsx54("button", {
+            type: "button",
+            onClick: handleRun,
+            disabled: state === "running",
+            className: cn("absolute right-3 top-3 z-10", "size-8 flex items-center justify-center", "rounded border border-openpkg-code-border bg-openpkg-code-bg", "text-openpkg-code-text-inactive", "cursor-pointer transition-opacity duration-200", "opacity-0 group-hover:opacity-100", state === "running" && "cursor-not-allowed opacity-100"),
+            "aria-label": "Run code",
+            children: state === "running" ? /* @__PURE__ */ jsx54(Loader2, {
+              size: 16,
+              className: "animate-spin"
+            }) : /* @__PURE__ */ jsx54(Play, {
+              size: 16,
+              className: "fill-current"
+            })
+          })
+        ]
       }),
-      /* @__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__ */ jsx51(Check4, {
-          size: 16
-        }) : /* @__PURE__ */ jsx51(Copy4, {
-          size: 16
+      output && /* @__PURE__ */ jsx54("div", {
+        className: "-mt-4",
+        children: /* @__PURE__ */ jsx54(CollapsiblePanel, {
+          title: `${state === "success" ? "✓ Success" : "✕ Error"} | ${duration}ms`,
+          defaultExpanded: true,
+          children: /* @__PURE__ */ jsx54("pre", {
+            className: "p-4 m-0 text-xs font-mono overflow-auto max-h-[400px]",
+            children: output
+          })
         })
       })
     ]
@@ -2770,7 +3006,7 @@ function ImportSection({ importStatement, className }) {
 // src/docskit/type-badge.tsx
 import { cva as cva2 } from "class-variance-authority";
 import * as React8 from "react";
-import { jsx as jsx52 } from "react/jsx-runtime";
+import { jsx as jsx55 } from "react/jsx-runtime";
 var typeBadgeVariants = cva2("font-mono text-sm", {
   variants: {
     typeColor: {
@@ -2827,7 +3063,7 @@ function detectTypeColor(type) {
 }
 var TypeBadge = React8.forwardRef(({ className, type, typeColor, ...props }, ref) => {
   const color2 = typeColor ?? detectTypeColor(type);
-  return /* @__PURE__ */ jsx52("span", {
+  return /* @__PURE__ */ jsx55("span", {
     ref,
     className: cn(typeBadgeVariants({ typeColor: color2 }), className),
     ...props,
@@ -2835,82 +3071,6 @@ var TypeBadge = React8.forwardRef(({ className, type, typeColor, ...props }, ref
   });
 });
 TypeBadge.displayName = "TypeBadge";
-// src/docskit/runnable-snippet.tsx
-import { Loader2, Play } from "lucide-react";
-import { useState as useState16 } from "react";
-import { jsx as jsx53, jsxs as jsxs31 } from "react/jsx-runtime";
-
-function RunnableSnippet({
-  code,
-  language = "typescript",
-  title,
-  mockState = "idle",
-  mockOutput,
-  className
-}) {
-  const [state, setState] = useState16(mockState);
-  const [output, setOutput] = useState16(mockOutput ?? null);
-  const [duration, setDuration] = useState16(0);
-  const handleRun = () => {
-    setState("running");
-    setOutput(null);
-    const startTime = Date.now();
-    setTimeout(() => {
-      const elapsed = Date.now() - startTime;
-      setDuration(elapsed);
-      if (mockState === "error") {
-        setState("error");
-        setOutput(mockOutput ?? "Error: Execution failed");
-      } else {
-        setState("success");
-        setOutput(mockOutput ?? JSON.stringify({ result: "success", timestamp: new Date().toISOString() }, null, 2));
-      }
-    }, 1200);
-  };
-  const codeblock = {
-    value: code,
-    lang: language,
-    meta: title
-  };
-  return /* @__PURE__ */ jsxs31("div", {
-    className: cn("relative", className),
-    children: [
-      /* @__PURE__ */ jsxs31("div", {
-        className: "relative group",
-        children: [
-          /* @__PURE__ */ jsx53(ClientDocsKitCode, {
-            codeblock
-          }),
-          /* @__PURE__ */ jsx53("button", {
-            type: "button",
-            onClick: handleRun,
-            disabled: state === "running",
-            className: cn("absolute right-3 top-3 z-10", "size-8 flex items-center justify-center", "rounded border border-openpkg-code-border bg-openpkg-code-bg", "text-openpkg-code-text-inactive", "cursor-pointer transition-opacity duration-200", "opacity-0 group-hover:opacity-100", state === "running" && "cursor-not-allowed opacity-100"),
-            "aria-label": "Run code",
-            children: state === "running" ? /* @__PURE__ */ jsx53(Loader2, {
-              size: 16,
-              className: "animate-spin"
-            }) : /* @__PURE__ */ jsx53(Play, {
-              size: 16,
-              className: "fill-current"
-            })
-          })
-        ]
-      }),
-      output && /* @__PURE__ */ jsx53("div", {
-        className: "-mt-4",
-        children: /* @__PURE__ */ jsx53(CollapsiblePanel, {
-          title: `${state === "success" ? "✓ Success" : "✕ Error"} | ${duration}ms`,
-          defaultExpanded: true,
-          children: /* @__PURE__ */ jsx53("pre", {
-            className: "p-4 m-0 text-xs font-mono overflow-auto max-h-[400px]",
-            children: output
-          })
-        })
-      })
-    ]
-  });
-}
 export {
   wordWrap,
   useSyncSection,
@@ -2942,6 +3102,7 @@ export {
   Tabs,
   SyncScrollProvider,
   SingleCode,
+  SectionAccordion,
   RunnableSnippet,
   ResponseBlock,
   ParameterList,
@@ -2975,6 +3136,7 @@ export {
   ClientDocsKitCode,
   ClientDiffCode,
   ClientCode,
+  APISectionSingle,
   APISection,
   APIReferencePage,
   APIReferenceLayout,