@openpkg-ts/ui 0.3.1 → 0.4.0

package/dist/docskit/index.js

@@ -2,7 +2,7 @@
 // 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 { useEffect as useEffect2, useState as useState3 } from "react";
 
 // src/lib/utils.ts
 import { clsx } from "clsx";
@@ -11,22 +11,6 @@ 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.config.ts
 var theme = "github-from-css";
 function flagsToOptions(flags = "") {
@@ -115,14 +99,14 @@ 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", {
               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, {
               name: annotation.query
@@ -142,8 +126,8 @@ var line = {
   Line: ({ annotation, ...props }) => {
     return /* @__PURE__ */ jsx4("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, {
@@ -262,8 +246,8 @@ var diff = {
     const color = annotation.query === "-" ? "#f85149" : "#3fb950";
     return /* @__PURE__ */ jsx7("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
     });
@@ -292,7 +276,7 @@ var expandable = {
     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",
+          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__ */ jsx8("div", {
             className: "pt-6",
             children: "Expand"
@@ -310,7 +294,7 @@ var expandable = {
 import {
   InnerLine as InnerLine5
 } from "codehike/code";
-import { createContext, useContext, useState as useState2 } from "react";
+import { createContext, useContext, useState } from "react";
 import { jsx as jsx9 } from "react/jsx-runtime";
 
 var HoverContext = createContext({
@@ -319,7 +303,7 @@ var HoverContext = createContext({
   removeHoveredName: () => {}
 });
 function HoverProvider({ children }) {
-  const [hoveredNames, setHoveredNames] = useState2([]);
+  const [hoveredNames, setHoveredNames] = useState([]);
   const addHoveredName = (name) => {
     setHoveredNames((prev) => [...prev, name]);
   };
@@ -353,8 +337,8 @@ 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", {
     style,
@@ -438,7 +422,7 @@ var lineNumbers = {
       children: [
         /* @__PURE__ */ jsx11("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, {
@@ -471,8 +455,8 @@ var mark = {
     const color2 = getColor(annotation);
     return /* @__PURE__ */ jsx13("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
     });
@@ -650,7 +634,7 @@ import { jsx as jsx18, 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",
+    className: "h-4 bg-openpkg-code-border/20 rounded animate-pulse",
     style: { width }
   });
 }
@@ -664,24 +648,24 @@ 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"),
+        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"
+              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"
+              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",
+        className: "bg-openpkg-code-bg px-4 py-3 space-y-2",
         children: lineWidths.map((width, i) => /* @__PURE__ */ jsx18(SkeletonLine, {
           width
         }, `${id}-line-${i}`))
@@ -696,27 +680,27 @@ 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"),
+        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"
+              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"
+              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"
+              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",
+        className: "bg-openpkg-code-bg px-4 py-3 space-y-2",
         children: lineWidths.map((width, i) => /* @__PURE__ */ jsx18(SkeletonLine, {
           width
         }, `${id}-line-${i}`))
@@ -726,37 +710,34 @@ 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"
+    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"),
+        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"
+              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"
+              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",
+        className: "bg-openpkg-code-bg px-4 py-3 space-y-2",
         children: lineWidths.map((width, i) => /* @__PURE__ */ jsx18(SkeletonLine, {
           width
         }, `${id}-line-${i}`))
@@ -795,7 +776,7 @@ function LanguageSelector({
       /* @__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"),
+        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__ */ jsx19(ChevronDown, {
@@ -805,14 +786,14 @@ function LanguageSelector({
         ]
       }),
       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"),
+        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__ */ 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)]"),
+          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))
       })
@@ -830,9 +811,9 @@ function APICodePanel({
   title,
   className
 }) {
-  const [selectedLang, setSelectedLang] = useState4(examples[0]?.languageId ?? languages[0]?.id);
-  const [copied, copy] = useCopyToClipboard();
-  const [highlighted, setHighlighted] = useState4(null);
+  const [selectedLang, setSelectedLang] = useState3(examples[0]?.languageId ?? languages[0]?.id);
+  const [copied, setCopied] = useState3(false);
+  const [highlighted, setHighlighted] = useState3(null);
   const currentExample = examples.find((e) => e.languageId === selectedLang);
   const code = currentExample?.code ?? "";
   const lang = currentExample?.highlightLang ?? currentExample?.languageId ?? "txt";
@@ -852,14 +833,16 @@ function APICodePanel({
     };
   }, [code, lang]);
   const handleCopy = () => {
-    copy(code);
+    navigator.clipboard.writeText(code);
+    setCopied(true);
+    setTimeout(() => setCopied(false), 1200);
   };
   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),
+    className: cn("rounded-lg overflow-hidden border border-openpkg-code-border", "bg-openpkg-code-bg text-gray-100", "sticky top-20", className),
     children: [
       /* @__PURE__ */ jsxs10("div", {
-        className: "flex items-center justify-between px-4 py-3 border-b border-dk-border bg-dk-tabs-background",
+        className: "flex items-center justify-between px-4 py-3 border-b border-openpkg-code-border bg-openpkg-code-header",
         children: [
           /* @__PURE__ */ jsxs10("div", {
             className: "flex items-center gap-3",
@@ -871,7 +854,7 @@ function APICodePanel({
                 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",
+                className: "text-sm text-openpkg-code-text-inactive",
                 children: title
               })
             ]
@@ -882,7 +865,7 @@ function APICodePanel({
               /* @__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",
+                className: "p-1.5 rounded text-openpkg-code-text-inactive hover:text-gray-200 transition-colors cursor-pointer",
                 "aria-label": "Copy code",
                 children: copied ? /* @__PURE__ */ jsx20(Check, {
                   size: 16
@@ -894,7 +877,7 @@ function APICodePanel({
                 href: externalLink,
                 target: "_blank",
                 rel: "noopener noreferrer",
-                className: "p-1.5 rounded text-dk-tab-inactive-foreground hover:text-gray-200 transition-colors",
+                className: "p-1.5 rounded text-openpkg-code-text-inactive hover:text-gray-200 transition-colors",
                 "aria-label": "Open in playground",
                 children: /* @__PURE__ */ jsx20(ExternalLink, {
                   size: 16
@@ -908,7 +891,7 @@ function APICodePanel({
         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",
+          className: "overflow-auto px-4 py-3 m-0 rounded-none !bg-openpkg-code-bg selection:bg-openpkg-code-selection selection:text-current text-sm",
           style: highlighted.style,
           handlers
         }) : /* @__PURE__ */ jsx20(CodeBlockSkeleton, {
@@ -932,14 +915,14 @@ function APIReferencePage({
     className: cn("max-w-7xl mx-auto px-4 sm:px-6 lg:px-8", className),
     children: [
       /* @__PURE__ */ jsxs11("header", {
-        className: "py-8 border-b border-[var(--openpkg-border-subtle)]",
+        className: "py-8 border-b border-border",
         children: [
           /* @__PURE__ */ jsx21("h1", {
-            className: "text-3xl font-bold text-[var(--openpkg-text-primary)]",
+            className: "text-3xl font-bold text-foreground",
             children: title
           }),
           description && /* @__PURE__ */ jsx21("div", {
-            className: "mt-4 text-lg text-[var(--openpkg-text-muted)] prose prose-lg dark:prose-invert max-w-none",
+            className: "mt-4 text-lg text-muted-foreground prose prose-lg dark:prose-invert max-w-none",
             children: description
           })
         ]
@@ -966,7 +949,7 @@ function APISection({
 }) {
   return /* @__PURE__ */ jsx22("section", {
     id,
-    className: cn("py-8 border-b border-[var(--openpkg-border-subtle)] last:border-b-0", className),
+    className: cn("py-8 border-b border-border last:border-b-0", className),
     children: /* @__PURE__ */ jsxs12("div", {
       className: "grid grid-cols-1 lg:grid-cols-2 gap-8 lg:gap-12",
       children: [
@@ -976,11 +959,11 @@ function APISection({
             /* @__PURE__ */ jsxs12("div", {
               children: [
                 /* @__PURE__ */ jsx22("h2", {
-                  className: "text-2xl font-semibold text-[var(--openpkg-text-primary)]",
+                  className: "text-2xl font-semibold text-foreground",
                   children: title
                 }),
                 description && /* @__PURE__ */ jsx22("div", {
-                  className: "mt-3 text-[var(--openpkg-text-muted)] prose prose-sm dark:prose-invert",
+                  className: "mt-3 text-muted-foreground prose prose-sm dark:prose-invert",
                   children: description
                 })
               ]
@@ -1037,29 +1020,32 @@ 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 { useState as useState4 } 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 [copied, setCopied] = useState4(false);
   const handleCopy = () => {
-    copy(path);
+    navigator.clipboard.writeText(path);
+    setCopied(true);
+    setTimeout(() => setCopied(false), 1200);
   };
   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),
+    className: cn("group flex items-center gap-3 py-2 px-3 rounded-lg bg-muted/50 border border-border", className),
     ...props,
     children: [
       /* @__PURE__ */ jsx24(EndpointBadge, {
         method
       }),
       /* @__PURE__ */ jsx24("code", {
-        className: "font-mono text-sm text-[var(--openpkg-text-primary)] flex-1",
+        className: "font-mono text-sm text-foreground flex-1",
         children: path
       }),
       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"),
+        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__ */ jsx24(Check2, {
           size: 14
@@ -1083,12 +1069,17 @@ function NestedProperty({
   depth = 0
 }) {
   const [expanded, setExpanded] = useState5(false);
-  const [copied, copy] = useCopyToClipboard();
+  const [copied, setCopied] = useState5(false);
   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;
+  const _nestedCount = hasNested ? Object.keys(schema.properties).length : 0;
+  const handleCopy = () => {
+    navigator.clipboard.writeText(name);
+    setCopied(true);
+    setTimeout(() => setCopied(false), 1200);
+  };
   return /* @__PURE__ */ jsxs14("div", {
-    className: cn("border-t border-[var(--openpkg-border-subtle)] first:border-t-0", depth > 0 && "ml-4"),
+    className: cn("border-t border-border first:border-t-0", depth > 0 && "ml-4"),
     children: [
       /* @__PURE__ */ jsx25("div", {
         className: "group py-4",
@@ -1098,7 +1089,7 @@ function NestedProperty({
             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",
+              className: "mt-0.5 p-0.5 text-muted-foreground hover:text-foreground transition-colors cursor-pointer",
               "aria-label": expanded ? "Collapse" : "Expand",
               children: /* @__PURE__ */ jsx25(ChevronRight, {
                 size: 14,
@@ -1114,29 +1105,29 @@ function NestedProperty({
                   className: "flex items-center gap-2 flex-wrap",
                   children: [
                     /* @__PURE__ */ jsxs14("span", {
-                      className: "font-mono text-sm font-medium text-[var(--openpkg-text-primary)]",
+                      className: "font-mono text-sm font-medium text-foreground",
                       children: [
                         name,
                         !required && /* @__PURE__ */ jsx25("span", {
-                          className: "text-[var(--openpkg-text-muted)]",
+                          className: "text-muted-foreground",
                           children: "?"
                         })
                       ]
                     }),
                     /* @__PURE__ */ jsx25("span", {
-                      className: "font-mono text-xs text-[var(--openpkg-text-muted)]",
+                      className: "font-mono text-xs text-muted-foreground",
                       children: type
                     }),
                     hasNested && /* @__PURE__ */ jsx25("button", {
                       type: "button",
                       onClick: () => setExpanded(!expanded),
-                      className: "text-xs text-[var(--openpkg-accent-link)] hover:underline cursor-pointer",
+                      className: "text-xs text-primary 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",
+                      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 name",
                       children: copied ? /* @__PURE__ */ jsx25(Check3, {
                         size: 12
@@ -1147,7 +1138,7 @@ function NestedProperty({
                   ]
                 }),
                 schema.description && /* @__PURE__ */ jsx25("p", {
-                  className: "text-sm text-[var(--openpkg-text-muted)] mt-1",
+                  className: "text-sm text-muted-foreground mt-1",
                   children: schema.description
                 })
               ]
@@ -1156,7 +1147,7 @@ function NestedProperty({
         })
       }),
       hasNested && expanded && schema.properties && /* @__PURE__ */ jsx25("div", {
-        className: "border-l border-[var(--openpkg-border-subtle)] ml-2 mb-3",
+        className: "border-l border-border ml-2 mb-3",
         children: Object.entries(schema.properties).map(([propName, propSchema]) => /* @__PURE__ */ jsx25(NestedProperty, {
           name: propName,
           schema: propSchema,
@@ -1177,11 +1168,16 @@ function APIParameterItem({
   className
 }) {
   const [expanded, setExpanded] = useState5(false);
-  const [copied, copy] = useCopyToClipboard();
+  const [copied, setCopied] = useState5(false);
   const hasNested = children?.properties && Object.keys(children.properties).length > 0;
-  const _nestedCount = hasNested && children?.properties ? Object.keys(children.properties).length : 0;
+  const _nestedCount = hasNested ? Object.keys(children.properties).length : 0;
+  const handleCopy = () => {
+    navigator.clipboard.writeText(name);
+    setCopied(true);
+    setTimeout(() => setCopied(false), 1200);
+  };
   return /* @__PURE__ */ jsxs14("div", {
-    className: cn("border-b border-[var(--openpkg-border-subtle)] last:border-b-0", className),
+    className: cn("border-b border-border last:border-b-0", className),
     children: [
       /* @__PURE__ */ jsx25("div", {
         className: "group py-4",
@@ -1191,7 +1187,7 @@ function APIParameterItem({
             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",
+              className: "mt-0.5 p-0.5 text-muted-foreground hover:text-foreground transition-colors cursor-pointer",
               "aria-label": expanded ? "Collapse" : "Expand",
               children: /* @__PURE__ */ jsx25(ChevronRight, {
                 size: 14,
@@ -1207,27 +1203,27 @@ function APIParameterItem({
                   className: "flex items-center gap-2 flex-wrap",
                   children: [
                     /* @__PURE__ */ jsx25("span", {
-                      className: "font-mono text-sm font-medium text-[var(--openpkg-text-primary)]",
+                      className: "font-mono text-sm font-medium text-foreground",
                       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",
+                      className: "text-[10px] font-semibold px-1.5 py-0.5 rounded border border-border bg-muted text-muted-foreground uppercase tracking-wide",
                       children: "Required"
                     }),
                     /* @__PURE__ */ jsx25("span", {
-                      className: "font-mono text-xs text-[var(--openpkg-text-muted)]",
+                      className: "font-mono text-xs text-muted-foreground",
                       children: type
                     }),
                     hasNested && /* @__PURE__ */ jsx25("button", {
                       type: "button",
                       onClick: () => setExpanded(!expanded),
-                      className: "text-xs text-[var(--openpkg-accent-link)] hover:underline cursor-pointer",
+                      className: "text-xs text-primary 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",
+                      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 name",
                       children: copied ? /* @__PURE__ */ jsx25(Check3, {
                         size: 12
@@ -1238,7 +1234,7 @@ function APIParameterItem({
                   ]
                 }),
                 description && /* @__PURE__ */ jsx25("p", {
-                  className: "text-sm text-[var(--openpkg-text-muted)] mt-1",
+                  className: "text-sm text-muted-foreground mt-1",
                   children: description
                 })
               ]
@@ -1247,7 +1243,7 @@ function APIParameterItem({
         })
       }),
       hasNested && expanded && children?.properties && /* @__PURE__ */ jsx25("div", {
-        className: "border-l border-[var(--openpkg-border-subtle)] ml-2 mb-3",
+        className: "border-l border-border ml-2 mb-3",
         children: Object.entries(children.properties).map(([propName, propSchema]) => /* @__PURE__ */ jsx25(NestedProperty, {
           name: propName,
           schema: propSchema,
@@ -1279,17 +1275,17 @@ function ParameterList({
     className: cn("", className),
     children: [
       title && /* @__PURE__ */ jsx26("h3", {
-        className: "text-sm font-medium text-[var(--openpkg-text-primary)] mb-3 uppercase tracking-wide",
+        className: "text-sm font-medium text-foreground 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)]",
+        className: "divide-y divide-border border-t border-b border-border",
         children: visibleChildren
       }),
       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",
+        className: "flex items-center gap-1 mt-3 text-sm text-primary hover:underline cursor-pointer",
         children: [
           /* @__PURE__ */ jsx26(ChevronDown2, {
             size: 14
@@ -1306,28 +1302,31 @@ function ParameterList({
 // src/docskit/api/response-block.tsx
 import { Check as Check4, Copy as Copy4 } from "lucide-react";
 import * as React6 from "react";
+import { useState as useState7 } from "react";
 import { jsx as jsx27, jsxs as jsxs16, Fragment as Fragment4 } from "react/jsx-runtime";
 
 function ResponseBlock({ data, title, className }) {
-  const [copied, copy] = useCopyToClipboard();
+  const [copied, setCopied] = useState7(false);
   const jsonString = JSON.stringify(data, null, 2);
   const handleCopy = () => {
-    copy(jsonString);
+    navigator.clipboard.writeText(jsonString);
+    setCopied(true);
+    setTimeout(() => setCopied(false), 1200);
   };
   return /* @__PURE__ */ jsxs16("div", {
-    className: cn("group rounded-lg border border-[var(--openpkg-border-subtle)] overflow-hidden bg-[var(--openpkg-bg-secondary)]", className),
+    className: cn("group rounded-lg border border-border overflow-hidden bg-muted/30", 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)]",
+        className: "flex items-center justify-between px-4 py-2 border-b border-border bg-muted/50",
         children: [
           /* @__PURE__ */ jsx27("span", {
-            className: "text-xs font-medium text-[var(--openpkg-text-muted)] uppercase tracking-wide",
+            className: "text-xs font-medium text-muted-foreground uppercase tracking-wide",
             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",
+            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__ */ jsx27(Check4, {
               size: 14
@@ -1351,7 +1350,7 @@ function ResponseBlock({ data, title, className }) {
           !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",
+            className: "absolute top-3 right-3 p-1.5 rounded text-muted-foreground hover:text-foreground opacity-0 group-hover:opacity-100 transition-opacity cursor-pointer",
             "aria-label": "Copy response",
             children: copied ? /* @__PURE__ */ jsx27(Check4, {
               size: 14
@@ -1369,25 +1368,25 @@ function JsonHighlight({ json, depth = 0 }) {
   const nextIndent = "  ".repeat(depth + 1);
   if (json === null) {
     return /* @__PURE__ */ jsx27("span", {
-      className: "text-[var(--openpkg-syn-number)]",
+      className: "text-orange-400",
       children: "null"
     });
   }
   if (typeof json === "boolean") {
     return /* @__PURE__ */ jsx27("span", {
-      className: "text-[var(--openpkg-syn-boolean)]",
+      className: "text-orange-400",
       children: json ? "true" : "false"
     });
   }
   if (typeof json === "number") {
     return /* @__PURE__ */ jsx27("span", {
-      className: "text-[var(--openpkg-syn-number)]",
+      className: "text-cyan-400",
       children: json
     });
   }
   if (typeof json === "string") {
     return /* @__PURE__ */ jsxs16("span", {
-      className: "text-[var(--openpkg-syn-string)]",
+      className: "text-emerald-400",
       children: [
         '"',
         json,
@@ -1398,14 +1397,14 @@ function JsonHighlight({ json, depth = 0 }) {
   if (Array.isArray(json)) {
     if (json.length === 0) {
       return /* @__PURE__ */ jsx27("span", {
-        className: "text-[var(--openpkg-syn-punctuation)]",
+        className: "text-foreground",
         children: "[]"
       });
     }
     return /* @__PURE__ */ jsxs16(Fragment4, {
       children: [
         /* @__PURE__ */ jsx27("span", {
-          className: "text-[var(--openpkg-syn-punctuation)]",
+          className: "text-foreground",
           children: "["
         }),
         `
@@ -1418,7 +1417,7 @@ function JsonHighlight({ json, depth = 0 }) {
               depth: depth + 1
             }),
             i < json.length - 1 && /* @__PURE__ */ jsx27("span", {
-              className: "text-[var(--openpkg-syn-punctuation)]",
+              className: "text-foreground",
               children: ","
             }),
             `
@@ -1427,7 +1426,7 @@ function JsonHighlight({ json, depth = 0 }) {
         }, i)),
         indent,
         /* @__PURE__ */ jsx27("span", {
-          className: "text-[var(--openpkg-syn-punctuation)]",
+          className: "text-foreground",
           children: "]"
         })
       ]
@@ -1437,14 +1436,14 @@ function JsonHighlight({ json, depth = 0 }) {
     const entries = Object.entries(json);
     if (entries.length === 0) {
       return /* @__PURE__ */ jsx27("span", {
-        className: "text-[var(--openpkg-syn-punctuation)]",
+        className: "text-foreground",
         children: "{}"
       });
     }
     return /* @__PURE__ */ jsxs16(Fragment4, {
       children: [
         /* @__PURE__ */ jsx27("span", {
-          className: "text-[var(--openpkg-syn-punctuation)]",
+          className: "text-foreground",
           children: "{"
         }),
         `
@@ -1453,7 +1452,7 @@ function JsonHighlight({ json, depth = 0 }) {
           children: [
             nextIndent,
             /* @__PURE__ */ jsxs16("span", {
-              className: "text-[var(--openpkg-syn-property)]",
+              className: "text-blue-400",
               children: [
                 '"',
                 key,
@@ -1461,7 +1460,7 @@ function JsonHighlight({ json, depth = 0 }) {
               ]
             }),
             /* @__PURE__ */ jsx27("span", {
-              className: "text-[var(--openpkg-syn-punctuation)]",
+              className: "text-foreground",
               children: ": "
             }),
             /* @__PURE__ */ jsx27(JsonHighlight, {
@@ -1469,7 +1468,7 @@ function JsonHighlight({ json, depth = 0 }) {
               depth: depth + 1
             }),
             i < entries.length - 1 && /* @__PURE__ */ jsx27("span", {
-              className: "text-[var(--openpkg-syn-punctuation)]",
+              className: "text-foreground",
               children: ","
             }),
             `
@@ -1478,14 +1477,14 @@ function JsonHighlight({ json, depth = 0 }) {
         }, key)),
         indent,
         /* @__PURE__ */ jsx27("span", {
-          className: "text-[var(--openpkg-syn-punctuation)]",
+          className: "text-foreground",
           children: "}"
         })
       ]
     });
   }
   return /* @__PURE__ */ jsx27("span", {
-    className: "text-[var(--openpkg-text-primary)]",
+    className: "text-foreground",
     children: String(json)
   });
 }
@@ -1494,6 +1493,7 @@ 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";
+import { useState as useState8 } from "react";
 import { jsx as jsx28 } from "react/jsx-runtime";
 
 function CopyButton({
@@ -1501,15 +1501,19 @@ function CopyButton({
   className,
   variant = "floating"
 }) {
-  const [copied, copy] = useCopyToClipboard();
+  const [copied, setCopied] = useState8(false);
   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",
+      "rounded border border-openpkg-code-border bg-openpkg-code-bg",
       "opacity-0 group-hover:opacity-100"
     ], variant === "inline" && "rounded", className),
-    onClick: () => copy(text),
+    onClick: () => {
+      navigator.clipboard.writeText(text);
+      setCopied(true);
+      setTimeout(() => setCopied(false), 1200);
+    },
     "aria-label": "Copy to clipboard",
     children: copied ? /* @__PURE__ */ jsx28(Check5, {
       size: 16,
@@ -1577,10 +1581,10 @@ async function SingleCode(props) {
   const { pre, title, code, icon: icon2, options } = props.group.tabs[0];
   const showCopy = options?.copyButton;
   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("group rounded overflow-hidden relative border-openpkg-code-border flex flex-col border my-4 not-prose", props.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"),
+        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__ */ jsxs17("div", {
           className: "flex items-center h-5 gap-2",
           children: [
@@ -1602,7 +1606,7 @@ async function SingleCode(props) {
           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")
+            className: cn("absolute right-3 z-10 text-openpkg-code-text-inactive", title ? "top-3" : "top-1/2 -translate-y-1/2")
           })
         ]
       })
@@ -1634,7 +1638,7 @@ async function toCodeGroup(props) {
       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",
+        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
       })
@@ -1685,40 +1689,28 @@ function useStateOrLocalStorage(key, initialState) {
 import * as TabsPrimitive from "@radix-ui/react-tabs";
 import { jsx as jsx31 } from "react/jsx-runtime";
 
-function Tabs({
-  className,
-  ...props
-}) {
+function Tabs({ className, ...props }) {
   return /* @__PURE__ */ jsx31(TabsPrimitive.Root, {
     "data-slot": "tabs",
     className: cn("flex flex-col gap-2", className),
     ...props
   });
 }
-function TabsList({
-  className,
-  ...props
-}) {
+function TabsList({ className, ...props }) {
   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),
+    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__ */ 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),
+    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__ */ jsx31(TabsPrimitive.Content, {
     "data-slot": "tabs-content",
     className: cn("flex-1 outline-none", className),
@@ -1729,10 +1721,7 @@ function TabsContent({
 // src/docskit/code.client.tsx
 import { jsx as jsx32, jsxs as jsxs18 } 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;
@@ -1740,13 +1729,13 @@ function MultiCode({
   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),
+    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__ */ 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"),
+        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__ */ 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"),
+          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__ */ jsx32("div", {
               children: icon2
@@ -1766,7 +1755,7 @@ function MultiCode({
           group.options.copyButton && /* @__PURE__ */ jsx32(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"
           })
         ]
       })
@@ -1779,12 +1768,12 @@ import {
   Inline,
   Pre as Pre3
 } from "codehike/code";
-import { useEffect as useEffect3, useState as useState7 } from "react";
+import { useEffect as useEffect3, useState as useState9 } 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 [highlighted, setHighlighted] = useState9(null);
   const { title, flags } = extractFlags2(codeblock);
   const options = flagsToOptions(flags);
   useEffect3(() => {
@@ -1796,7 +1785,7 @@ function ClientDocsKitCode(props) {
     return () => {
       cancelled = true;
     };
-  }, [codeblock.value, codeblock.lang, codeblock.meta, codeblock]);
+  }, [codeblock.value, codeblock.lang, codeblock.meta]);
   if (!highlighted) {
     return /* @__PURE__ */ jsx33(CodeBlockSkeleton, {
       hasTitle: !!title
@@ -1814,10 +1803,10 @@ function ClientDocsKitCode(props) {
     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),
+    className: cn("group rounded overflow-hidden relative border-openpkg-code-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"),
+        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__ */ jsxs19("div", {
           className: "flex items-center h-5 gap-2",
           children: [
@@ -1837,14 +1826,14 @@ function ClientDocsKitCode(props) {
         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",
+            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__ */ 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")
+            className: cn("absolute right-3 z-10 text-openpkg-code-text-inactive", title ? "top-3" : "top-1/2 -translate-y-1/2")
           })
         ]
       })
@@ -1853,7 +1842,7 @@ function ClientDocsKitCode(props) {
 }
 function ClientTerminal(props) {
   const { codeblock, handlers: extraHandlers } = props;
-  const [highlighted, setHighlighted] = useState7(null);
+  const [highlighted, setHighlighted] = useState9(null);
   const { flags } = extractFlagsSimple(codeblock);
   const options = flagsToOptions(flags);
   useEffect3(() => {
@@ -1865,7 +1854,7 @@ function ClientTerminal(props) {
     return () => {
       cancelled = true;
     };
-  }, [codeblock.value, codeblock.lang, codeblock.meta, codeblock]);
+  }, [codeblock.value, codeblock.lang, codeblock.meta]);
   if (!highlighted) {
     return /* @__PURE__ */ jsx33(TerminalSkeleton, {});
   }
@@ -1878,22 +1867,22 @@ function ClientTerminal(props) {
   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",
+    className: "group rounded overflow-hidden relative border-openpkg-code-border flex flex-col border my-4 not-prose",
     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"),
+        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__ */ 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"
+                className: "size-3 rounded-full bg-openpkg-code-text-inactive/30"
               }),
               /* @__PURE__ */ jsx33("div", {
-                className: "size-3 rounded-full bg-dk-tab-inactive-foreground/30"
+                className: "size-3 rounded-full bg-openpkg-code-text-inactive/30"
               }),
               /* @__PURE__ */ jsx33("div", {
-                className: "size-3 rounded-full bg-dk-tab-inactive-foreground/30"
+                className: "size-3 rounded-full bg-openpkg-code-text-inactive/30"
               })
             ]
           }),
@@ -1908,14 +1897,14 @@ function ClientTerminal(props) {
         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",
+            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__ */ jsx33(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")
           })
         ]
       })
@@ -1923,7 +1912,7 @@ function ClientTerminal(props) {
   });
 }
 function ClientInlineCode({ codeblock }) {
-  const [highlighted, setHighlighted] = useState7(null);
+  const [highlighted, setHighlighted] = useState9(null);
   useEffect3(() => {
     let cancelled = false;
     highlight3(codeblock, theme).then((result) => {
@@ -1933,13 +1922,13 @@ function ClientInlineCode({ codeblock }) {
     return () => {
       cancelled = true;
     };
-  }, [codeblock.value, codeblock.lang, codeblock.meta, codeblock]);
+  }, [codeblock.value, codeblock.lang, codeblock.meta]);
   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",
+    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
   });
 }
@@ -1958,7 +1947,7 @@ function extractFlagsSimple(codeblock) {
 }
 function ClientCode(props) {
   const { codeblocks, flags: groupFlags, storage } = props;
-  const [highlighted, setHighlighted] = useState7(null);
+  const [highlighted, setHighlighted] = useState9(null);
   const groupOptions = flagsToOptions(groupFlags?.startsWith("-") ? groupFlags.slice(1) : groupFlags);
   const _codeBlocksKey = codeblocks.map((b) => `${b.value}|${b.lang}|${b.meta}`).join("::");
   useEffect3(() => {
@@ -1989,7 +1978,7 @@ function ClientCode(props) {
     return () => {
       cancelled = true;
     };
-  }, [codeblocks.map, groupOptions]);
+  }, [_codeBlocksKey]);
   if (!highlighted) {
     return /* @__PURE__ */ jsx33(CodeTabsSkeleton, {
       tabs: codeblocks.length
@@ -1997,15 +1986,13 @@ function ClientCode(props) {
   }
   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",
+      className: "group rounded overflow-hidden relative border-openpkg-code-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"),
+          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__ */ jsxs19("div", {
             className: "flex items-center h-5 gap-2",
             children: [
@@ -2025,14 +2012,14 @@ function ClientCode(props) {
           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",
+              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
             }),
             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"
+              className: "absolute right-3 top-3 z-10 text-openpkg-code-text-inactive"
             })
           ]
         })
@@ -2058,13 +2045,13 @@ function ClientMultiCode({
   return /* @__PURE__ */ jsxs19(Tabs, {
     value: current.title,
     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"),
     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"),
+        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__ */ jsxs19(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", {
               children: icon2
@@ -2082,14 +2069,14 @@ function ClientMultiCode({
         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",
+            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__ */ jsx33(CopyButton, {
             text: current.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"
           })
         ]
       })
@@ -2102,7 +2089,7 @@ import {
   Pre as Pre4
 } from "codehike/code";
 import { ChevronDown as ChevronDown3, ChevronUp } from "lucide-react";
-import { useEffect as useEffect4, useState as useState8 } from "react";
+import { useEffect as useEffect4, useState as useState10 } from "react";
 import { jsx as jsx34, jsxs as jsxs20 } from "react/jsx-runtime";
 
 function StackedChevrons({ isOpen, className }) {
@@ -2110,10 +2097,10 @@ function StackedChevrons({ isOpen, className }) {
     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")
+        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")
+        className: cn("size-3 transition-colors", isOpen ? "text-openpkg-code-text-active" : "text-openpkg-code-text-inactive")
       })
     ]
   });
@@ -2128,8 +2115,8 @@ function ClientDiffCode(props) {
     className: wrapperClassName,
     defaultOpen = true
   } = props;
-  const [highlighted, setHighlighted] = useState8(null);
-  const [isOpen, setIsOpen] = useState8(defaultOpen);
+  const [highlighted, setHighlighted] = useState10(null);
+  const [isOpen, setIsOpen] = useState10(defaultOpen);
   const { title, flags } = extractFlags3(codeblock);
   const options = flagsToOptions(flags);
   const filename = filenameProp || title || "file";
@@ -2165,13 +2152,13 @@ function ClientDiffCode(props) {
     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),
+      className: cn("group rounded overflow-hidden relative border-openpkg-code-border flex flex-col border my-4 not-prose", wrapperClassName),
       children: [
         /* @__PURE__ */ jsx34(CollapsibleTrigger2, {
           asChild: true,
           children: /* @__PURE__ */ jsxs20("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", {
                 className: "flex items-center h-5 gap-2 flex-1 min-w-0",
@@ -2181,11 +2168,11 @@ function ClientDiffCode(props) {
                     children: icon2
                   }),
                   path && /* @__PURE__ */ jsx34("span", {
-                    className: "text-dk-tab-inactive-foreground truncate",
+                    className: "text-openpkg-code-text-inactive truncate",
                     children: path
                   }),
                   /* @__PURE__ */ jsx34("span", {
-                    className: "text-dk-tab-active-foreground font-medium truncate",
+                    className: "text-openpkg-code-text-active font-medium truncate",
                     children: filename
                   })
                 ]
@@ -2222,14 +2209,14 @@ function ClientDiffCode(props) {
             children: [
               /* @__PURE__ */ jsx34(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__ */ jsx34(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"
               })
             ]
           })
@@ -2248,18 +2235,16 @@ function extractFlags3(codeblock) {
 // 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
-}) {
+async function DocsKitInlineCode({ codeblock }) {
   const highlighted = await highlight5(codeblock, theme);
   return /* @__PURE__ */ jsx35(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 { useState as useState11 } from "react";
 import { jsx as jsx36, jsxs as jsxs21 } from "react/jsx-runtime";
 
 var managerLabels = {
@@ -2312,25 +2297,25 @@ function PackageInstall({
   managers = ["npm", "bun", "pnpm", "yarn"],
   copyButton = true
 }) {
-  const [activeManager, setActiveManager] = useState9(managers[0]);
+  const [activeManager, setActiveManager] = useState11(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",
+    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"),
+        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", {
             className: "flex items-center gap-2",
             children: [
               /* @__PURE__ */ jsx36("div", {
-                className: "size-3 rounded-full bg-dk-tab-inactive-foreground/30"
+                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"
+                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"
+                className: "size-3 rounded-full bg-openpkg-code-text-inactive/30"
               })
             ]
           }),
@@ -2339,7 +2324,7 @@ function PackageInstall({
             children: managers.map((manager) => /* @__PURE__ */ jsx36("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))
           }),
@@ -2350,7 +2335,7 @@ function PackageInstall({
         ]
       }),
       /* @__PURE__ */ jsxs21("div", {
-        className: "relative flex items-start bg-dk-background",
+        className: "relative flex items-start bg-openpkg-code-bg",
         children: [
           /* @__PURE__ */ jsx36("pre", {
             className: "overflow-auto px-3 py-3 m-0 font-mono text-sm flex-1",
@@ -2373,7 +2358,7 @@ function PackageInstall({
           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"
+            className: "absolute right-3 top-1/2 -translate-y-1/2 z-10 text-openpkg-code-text-inactive"
           })
         ]
       })
@@ -2433,22 +2418,22 @@ async function Terminal(props) {
   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",
+    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"),
+        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", {
             className: "absolute left-3 flex items-center gap-2",
             children: [
               /* @__PURE__ */ jsx38("div", {
-                className: "size-3 rounded-full bg-dk-tab-inactive-foreground/30"
+                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"
+                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"
+                className: "size-3 rounded-full bg-openpkg-code-text-inactive/30"
               })
             ]
           }),
@@ -2463,14 +2448,14 @@ async function Terminal(props) {
         children: [
           /* @__PURE__ */ jsx38(Pre5, {
             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, {
             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")
           })
         ]
       })
@@ -2532,86 +2517,48 @@ function WithNotes({ children, ...rest }) {
     children
   });
 }
-// src/docskit/code.tabs-legacy.tsx
+// src/docskit/import-section.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";
 
-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, useRef as useRef2, useState as useState12 } from "react";
+var COPY_FEEDBACK_MS = 1200;
+function useCopyToClipboard(timeout = COPY_FEEDBACK_MS) {
+  const [copied, setCopied] = useState12(false);
+  const timerRef = useRef2(undefined);
+  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/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 jsx40, jsxs as jsxs23 } from "react/jsx-runtime";
 
 function ImportSection({ importStatement, className }) {
   const [copied, copy] = useCopyToClipboard();
   const handleCopy = () => {
     copy(importStatement);
   };
-  return /* @__PURE__ */ jsxs24("div", {
+  return /* @__PURE__ */ jsxs23("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__ */ jsx40("code", {
         className: "font-mono text-sm text-[var(--openpkg-text-primary)] overflow-x-auto",
         children: importStatement
       }),
-      /* @__PURE__ */ jsx41("button", {
+      /* @__PURE__ */ jsx40("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__ */ jsx40(Check6, {
           size: 16
-        }) : /* @__PURE__ */ jsx41(Copy7, {
+        }) : /* @__PURE__ */ jsx40(Copy6, {
           size: 16
         })
       })
@@ -2621,7 +2568,7 @@ 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 { jsx as jsx41 } from "react/jsx-runtime";
 var typeBadgeVariants = cva2("font-mono text-sm", {
   variants: {
     typeColor: {
@@ -2678,7 +2625,7 @@ function detectTypeColor(type) {
 }
 var TypeBadge = React9.forwardRef(({ className, type, typeColor, ...props }, ref) => {
   const color2 = typeColor ?? detectTypeColor(type);
-  return /* @__PURE__ */ jsx42("span", {
+  return /* @__PURE__ */ jsx41("span", {
     ref,
     className: cn(typeBadgeVariants({ typeColor: color2 }), className),
     ...props,
@@ -2728,7 +2675,6 @@ export {
   DocsKitCode,
   CopyButton,
   CodeTabsSkeleton,
-  CodeTabs,
   CodeIcon,
   CodeGroup,
   CodeBlockSkeleton,