@openpkg-ts/doc-generator 0.3.4 → 0.4.0

package/dist/react-styled.js

@@ -3535,11 +3535,6 @@ function buildSignatureString(exp, sigIndex = 0) {
 // src/components/headless/CollapsibleMethod.tsx
 import { jsx, jsxs } from "react/jsx-runtime";
 
-function formatReturnType2(returns) {
-  if (!returns)
-    return "void";
-  return formatSchema(returns.schema);
-}
 function formatParamPreview(params) {
   if (!params || params.length === 0)
     return "";
@@ -3561,7 +3556,7 @@ function CollapsibleMethod({
   const flags = member.flags;
   const isStatic = flags?.static;
   const isAsync = flags?.async;
-  const returnType = formatReturnType2(sig?.returns);
+  const returnType = formatReturnType(sig);
   const paramPreview = formatParamPreview(sig?.parameters);
   const toggle = () => setExpanded(!expanded);
   useEffect(() => {
@@ -4198,11 +4193,353 @@ function TypeTable({
   });
 }
 // src/components/styled/index.ts
-import { CodeTabs as CodeTabs4, ImportSection as ImportSection4 } from "@doccov/ui/api";
+import { CodeTabs, ImportSection } from "@doccov/ui/api";
+
+// src/components/styled/ClassPage.tsx
+import {
+  APIParameterItem,
+  APISection,
+  ParameterList
+} from "@doccov/ui/docskit";
+
+// src/adapters/spec-to-docskit.ts
+function specSchemaToAPISchema(schema) {
+  if (!schema || typeof schema !== "object")
+    return;
+  const s = schema;
+  const result = {};
+  result.type = formatSchema(schema);
+  result.typeString = result.type;
+  if (typeof s.description === "string") {
+    result.description = s.description;
+  }
+  if (s.type === "object" && s.properties && typeof s.properties === "object") {
+    result.properties = {};
+    for (const [key, value] of Object.entries(s.properties)) {
+      const nestedSchema = specSchemaToAPISchema(value);
+      if (nestedSchema) {
+        result.properties[key] = nestedSchema;
+      }
+    }
+    if (Array.isArray(s.required)) {
+      result.required = s.required;
+    }
+  }
+  return result;
+}
+function specParamToAPIParam(param) {
+  const type = formatSchema(param.schema);
+  const children = specSchemaToAPISchema(param.schema);
+  const hasNestedProperties = children?.properties && Object.keys(children.properties).length > 0;
+  return {
+    name: param.name ?? "unknown",
+    type,
+    required: param.required !== false,
+    description: param.description,
+    children: hasNestedProperties ? children : undefined
+  };
+}
+function specExamplesToCodeExamples(examples, defaultLang = "typescript") {
+  if (!examples?.length)
+    return [];
+  return examples.map((example) => {
+    if (typeof example === "string") {
+      return {
+        languageId: defaultLang,
+        code: example,
+        highlightLang: getLangForHighlight(defaultLang)
+      };
+    }
+    return {
+      languageId: example.language || defaultLang,
+      code: example.code,
+      highlightLang: getLangForHighlight(example.language || defaultLang)
+    };
+  });
+}
+function getLangForHighlight(lang) {
+  const langMap = {
+    typescript: "ts",
+    javascript: "js",
+    ts: "ts",
+    js: "js",
+    tsx: "tsx",
+    jsx: "jsx",
+    bash: "bash",
+    shell: "bash",
+    sh: "bash",
+    curl: "bash",
+    json: "json",
+    python: "python",
+    py: "python",
+    go: "go",
+    rust: "rust",
+    ruby: "ruby"
+  };
+  return langMap[lang.toLowerCase()] || lang;
+}
+function getLanguagesFromExamples(examples) {
+  if (!examples?.length)
+    return [];
+  const langSet = new Set;
+  const languages = [];
+  for (const example of examples) {
+    const lang = typeof example === "string" ? "typescript" : example.language || "typescript";
+    if (!langSet.has(lang)) {
+      langSet.add(lang);
+      languages.push({
+        id: lang,
+        label: getLanguageLabel(lang)
+      });
+    }
+  }
+  return languages;
+}
+function getLanguageLabel(lang) {
+  const labels = {
+    typescript: "TypeScript",
+    javascript: "JavaScript",
+    ts: "TypeScript",
+    js: "JavaScript",
+    tsx: "TSX",
+    jsx: "JSX",
+    bash: "Bash",
+    shell: "Shell",
+    sh: "Shell",
+    curl: "cURL",
+    json: "JSON",
+    python: "Python",
+    py: "Python",
+    go: "Go",
+    rust: "Rust",
+    ruby: "Ruby",
+    node: "Node.js"
+  };
+  return labels[lang.toLowerCase()] || lang;
+}
+function buildImportStatement(exp, spec) {
+  const packageName = spec.meta?.name || "package";
+  const presentation = spec.extensions?.presentation?.[exp.id];
+  const importPath = presentation?.importPath || packageName;
+  const alias = presentation?.alias || exp.name;
+  if (exp.kind === "type" || exp.kind === "interface") {
+    return `import type { ${alias} } from '${importPath}'`;
+  }
+  return `import { ${alias} } from '${importPath}'`;
+}
 
 // src/components/styled/ClassPage.tsx
+import { jsx as jsx8, jsxs as jsxs7 } from "react/jsx-runtime";
+
+function formatMethodSignature(member) {
+  const sig = member.signatures?.[0];
+  const params = sig?.parameters ?? [];
+  const returnType = formatSchema(sig?.returns?.schema);
+  const paramStr = params.map((p) => `${p.name}${p.required === false ? "?" : ""}: ${formatSchema(p.schema)}`).join(", ");
+  return `(${paramStr}): ${returnType}`;
+}
+function getMemberBadges(member) {
+  const badges = [];
+  const flags = member.flags;
+  if (member.visibility && member.visibility !== "public") {
+    badges.push(member.visibility);
+  }
+  if (flags?.static)
+    badges.push("static");
+  if (flags?.readonly)
+    badges.push("readonly");
+  if (flags?.async)
+    badges.push("async");
+  return badges;
+}
+function ClassPage({ export: exp, spec }) {
+  const constructors = exp.members?.filter((m) => m.kind === "constructor") ?? [];
+  const properties = exp.members?.filter((m) => m.kind === "property" || m.kind === "field") ?? [];
+  const methods = exp.members?.filter((m) => m.kind === "method") ?? [];
+  const staticProperties = properties.filter((m) => m.flags?.static);
+  const instanceProperties = properties.filter((m) => !m.flags?.static);
+  const staticMethods = methods.filter((m) => m.flags?.static);
+  const instanceMethods = methods.filter((m) => !m.flags?.static);
+  const constructorSig = constructors[0]?.signatures?.[0];
+  const constructorParams = constructorSig?.parameters ?? [];
+  const languages = getLanguagesFromExamples(exp.examples);
+  const examples = specExamplesToCodeExamples(exp.examples);
+  const importStatement = buildImportStatement(exp, spec);
+  const displayExamples = examples.length > 0 ? examples : [{
+    languageId: "typescript",
+    code: `${importStatement}
+
+const instance = new ${exp.name}(${constructorParams.map((p) => p.name).join(", ")});`,
+    highlightLang: "ts"
+  }];
+  const displayLanguages = languages.length > 0 ? languages : [{ id: "typescript", label: "TypeScript" }];
+  const inheritance = [
+    exp.extends && `extends ${exp.extends}`,
+    exp.implements?.length && `implements ${exp.implements.join(", ")}`
+  ].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsx8("div", {
+    className: "doccov-class-page not-prose",
+    children: /* @__PURE__ */ jsxs7(APISection, {
+      id: exp.id || exp.name,
+      title: `class ${exp.name}`,
+      description: /* @__PURE__ */ jsxs7("div", {
+        className: "space-y-3",
+        children: [
+          inheritance && /* @__PURE__ */ jsx8("p", {
+            className: "font-mono text-sm text-muted-foreground",
+            children: inheritance
+          }),
+          exp.description && /* @__PURE__ */ jsx8("p", {
+            children: exp.description
+          }),
+          /* @__PURE__ */ jsx8("code", {
+            className: "text-sm font-mono bg-muted px-2 py-1 rounded inline-block",
+            children: importStatement
+          })
+        ]
+      }),
+      languages: displayLanguages,
+      examples: displayExamples,
+      codePanelTitle: `new ${exp.name}()`,
+      children: [
+        constructorParams.length > 0 && /* @__PURE__ */ jsx8(ParameterList, {
+          title: "Constructor",
+          children: constructorParams.map((param, index) => {
+            const apiParam = specParamToAPIParam(param);
+            return /* @__PURE__ */ jsx8(APIParameterItem, {
+              name: apiParam.name,
+              type: apiParam.type,
+              required: apiParam.required,
+              description: apiParam.description,
+              children: apiParam.children
+            }, param.name ?? index);
+          })
+        }),
+        (staticProperties.length > 0 || staticMethods.length > 0) && /* @__PURE__ */ jsxs7(ParameterList, {
+          title: "Static Members",
+          className: "mt-6",
+          children: [
+            staticProperties.map((member) => {
+              const badges = getMemberBadges(member);
+              return /* @__PURE__ */ jsx8(APIParameterItem, {
+                name: member.name,
+                type: formatSchema(member.schema),
+                description: badges.length > 0 ? `[${badges.join(", ")}] ${member.description || ""}` : member.description
+              }, member.name);
+            }),
+            staticMethods.map((member) => {
+              const badges = getMemberBadges(member);
+              return /* @__PURE__ */ jsx8(APIParameterItem, {
+                name: `${member.name}()`,
+                type: formatMethodSignature(member),
+                description: badges.length > 0 ? `[${badges.join(", ")}] ${member.description || ""}` : member.description
+              }, member.name);
+            })
+          ]
+        }),
+        instanceMethods.length > 0 && /* @__PURE__ */ jsx8(ParameterList, {
+          title: "Methods",
+          className: "mt-6",
+          children: instanceMethods.map((member) => {
+            const badges = getMemberBadges(member);
+            return /* @__PURE__ */ jsx8(APIParameterItem, {
+              name: `${member.name}()`,
+              type: formatMethodSignature(member),
+              description: badges.length > 0 ? `[${badges.join(", ")}] ${member.description || ""}` : member.description
+            }, member.name);
+          })
+        }),
+        instanceProperties.length > 0 && /* @__PURE__ */ jsx8(ParameterList, {
+          title: "Properties",
+          className: "mt-6",
+          children: instanceProperties.map((member) => {
+            const badges = getMemberBadges(member);
+            return /* @__PURE__ */ jsx8(APIParameterItem, {
+              name: member.name,
+              type: formatSchema(member.schema),
+              description: badges.length > 0 ? `[${badges.join(", ")}] ${member.description || ""}` : member.description
+            }, member.name);
+          })
+        })
+      ]
+    })
+  });
+}
+
+// src/components/styled/EnumPage.tsx
+import {
+  APIParameterItem as APIParameterItem2,
+  APISection as APISection2,
+  ParameterList as ParameterList2
+} from "@doccov/ui/docskit";
+import { jsx as jsx9, jsxs as jsxs8 } from "react/jsx-runtime";
+
+function EnumPage({ export: exp, spec }) {
+  const members = exp.members ?? [];
+  const languages = getLanguagesFromExamples(exp.examples);
+  const examples = specExamplesToCodeExamples(exp.examples);
+  const importStatement = buildImportStatement(exp, spec);
+  const enumDefinition = members.length > 0 ? `enum ${exp.name} {
+${members.map((m) => {
+    const value = m.schema !== undefined ? typeof m.schema === "object" && m.schema !== null ? m.schema.const ?? m.schema.default : m.schema : undefined;
+    return `  ${m.name}${value !== undefined ? ` = ${JSON.stringify(value)}` : ""},`;
+  }).join(`
+`)}
+}` : `enum ${exp.name} { }`;
+  const displayExamples = examples.length > 0 ? examples : [{
+    languageId: "typescript",
+    code: `${importStatement}
+
+${enumDefinition}`,
+    highlightLang: "ts"
+  }];
+  const displayLanguages = languages.length > 0 ? languages : [{ id: "typescript", label: "TypeScript" }];
+  return /* @__PURE__ */ jsx9("div", {
+    className: "doccov-enum-page not-prose",
+    children: /* @__PURE__ */ jsx9(APISection2, {
+      id: exp.id || exp.name,
+      title: `enum ${exp.name}`,
+      description: /* @__PURE__ */ jsxs8("div", {
+        className: "space-y-3",
+        children: [
+          exp.description && /* @__PURE__ */ jsx9("p", {
+            children: exp.description
+          }),
+          exp.deprecated && /* @__PURE__ */ jsxs8("div", {
+            className: "rounded-md bg-yellow-500/10 border border-yellow-500/20 px-3 py-2 text-sm text-yellow-600 dark:text-yellow-400",
+            children: [
+              /* @__PURE__ */ jsx9("strong", {
+                children: "Deprecated:"
+              }),
+              " This export is deprecated."
+            ]
+          }),
+          /* @__PURE__ */ jsx9("code", {
+            className: "text-sm font-mono bg-muted px-2 py-1 rounded inline-block",
+            children: importStatement
+          })
+        ]
+      }),
+      languages: displayLanguages,
+      examples: displayExamples,
+      codePanelTitle: exp.name,
+      children: members.length > 0 && /* @__PURE__ */ jsx9(ParameterList2, {
+        title: "Members",
+        children: members.map((member, index) => {
+          const value = member.schema !== undefined ? typeof member.schema === "object" && member.schema !== null ? member.schema.const ?? member.schema.default ?? undefined : member.schema : undefined;
+          return /* @__PURE__ */ jsx9(APIParameterItem2, {
+            name: member.name,
+            type: value !== undefined ? String(value) : "auto",
+            description: member.description
+          }, member.name ?? index);
+        })
+      })
+    })
+  });
+}
+
+// src/components/styled/ExportIndexPage.tsx
 import { cn as cn2 } from "@doccov/ui/lib/utils";
-import { CodeTabs, ImportSection } from "@doccov/ui/api";
 
 // ../../node_modules/lucide-react/dist/esm/createLucideIcon.js
 import { forwardRef as forwardRef2, createElement as createElement2 } from "react";
@@ -22235,713 +22572,72 @@ var __iconNode1651 = [
   ["line", { x1: "8", x2: "14", y1: "11", y2: "11", key: "durymu" }]
 ];
 var ZoomOut = createLucideIcon("zoom-out", __iconNode1651);
-// src/components/styled/ClassPage.tsx
-import { useState as useState5 } from "react";
+// src/components/styled/ExportIndexPage.tsx
+import { useState as useState4, useMemo } from "react";
 
-// src/components/styled/ParameterItem.tsx
+// src/components/styled/ExportCard.tsx
+var import_link3 = __toESM(require_link(), 1);
 import { cn } from "@doccov/ui/lib/utils";
-import { useState as useState4 } from "react";
-import { jsx as jsx8, jsxs as jsxs7 } from "react/jsx-runtime";
+import { jsx as jsx10, jsxs as jsxs9 } from "react/jsx-runtime";
 
-function getNestedProperties2(schema) {
-  if (!schema || typeof schema !== "object")
-    return null;
-  const s = schema;
-  if (s.type === "object" && s.properties && typeof s.properties === "object") {
-    return s.properties;
-  }
-  return null;
-}
-function getRequiredFields2(schema) {
-  if (!schema || typeof schema !== "object")
-    return [];
-  const s = schema;
-  if (Array.isArray(s.required)) {
-    return s.required;
-  }
-  return [];
-}
-function countProperties2(schema) {
-  const props = getNestedProperties2(schema);
-  return props ? Object.keys(props).length : 0;
-}
-function NestedPropertyItem({
+var KIND_COLORS = {
+  function: "group-hover:text-blue-600 dark:group-hover:text-blue-400",
+  class: "group-hover:text-purple-600 dark:group-hover:text-purple-400",
+  interface: "group-hover:text-green-600 dark:group-hover:text-green-400",
+  type: "group-hover:text-amber-600 dark:group-hover:text-amber-400",
+  enum: "group-hover:text-rose-600 dark:group-hover:text-rose-400",
+  variable: "group-hover:text-cyan-600 dark:group-hover:text-cyan-400"
+};
+var KIND_BADGE_COLORS = {
+  function: "bg-blue-500/10 text-blue-600 dark:text-blue-400",
+  class: "bg-purple-500/10 text-purple-600 dark:text-purple-400",
+  interface: "bg-green-500/10 text-green-600 dark:text-green-400",
+  type: "bg-amber-500/10 text-amber-600 dark:text-amber-400",
+  enum: "bg-rose-500/10 text-rose-600 dark:text-rose-400",
+  variable: "bg-cyan-500/10 text-cyan-600 dark:text-cyan-400"
+};
+function ExportCard({
   name,
-  schema,
-  required = false,
-  depth = 0
+  description,
+  href,
+  kind = "function",
+  className
 }) {
-  const [expanded, setExpanded] = useState4(false);
-  const type = formatSchema(schema);
-  const nestedProps = getNestedProperties2(schema);
-  const nestedCount = countProperties2(schema);
-  const hasNested = nestedCount > 0;
-  const schemaObj = schema;
-  const description = schemaObj?.description;
-  return /* @__PURE__ */ jsxs7("div", {
-    className: cn("border-t border-border first:border-t-0", depth > 0 && "ml-4"),
+  const isFunction = kind === "function";
+  const hoverColor = KIND_COLORS[kind];
+  const badgeColor = KIND_BADGE_COLORS[kind];
+  return /* @__PURE__ */ jsxs9(import_link3.default, {
+    href,
+    className: cn("group block rounded-lg border border-border bg-card/50 p-4", "transition-all duration-200 ease-out", "hover:border-primary/30 hover:bg-card hover:shadow-lg hover:shadow-primary/5", "hover:-translate-y-1", "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring", className),
     children: [
-      /* @__PURE__ */ jsx8("div", {
-        className: "py-3",
-        children: /* @__PURE__ */ jsxs7("div", {
-          className: "flex items-start gap-2",
-          children: [
-            hasNested && /* @__PURE__ */ jsx8("button", {
-              type: "button",
-              onClick: () => setExpanded(!expanded),
-              className: "mt-0.5 p-0.5 text-muted-foreground hover:text-foreground transition-colors cursor-pointer",
-              "aria-label": expanded ? "Collapse" : "Expand",
-              children: /* @__PURE__ */ jsx8(ChevronRight, {
-                size: 14,
-                className: cn("transition-transform duration-200", expanded && "rotate-90")
-              })
-            }),
-            !hasNested && /* @__PURE__ */ jsx8("div", {
-              className: "w-5"
-            }),
-            /* @__PURE__ */ jsxs7("div", {
-              className: "flex-1 min-w-0",
-              children: [
-                /* @__PURE__ */ jsxs7("div", {
-                  className: "flex items-baseline gap-2 flex-wrap",
-                  children: [
-                    /* @__PURE__ */ jsxs7("span", {
-                      className: "font-mono text-sm text-foreground",
-                      children: [
-                        name,
-                        !required && /* @__PURE__ */ jsx8("span", {
-                          className: "text-muted-foreground",
-                          children: "?"
-                        })
-                      ]
-                    }),
-                    /* @__PURE__ */ jsx8("span", {
-                      className: "font-mono text-sm text-muted-foreground",
-                      children: hasNested ? "object" : type
-                    }),
-                    hasNested && /* @__PURE__ */ jsxs7("button", {
-                      type: "button",
-                      onClick: () => setExpanded(!expanded),
-                      className: "text-xs text-primary hover:underline cursor-pointer",
-                      children: [
-                        nestedCount,
-                        " ",
-                        nestedCount === 1 ? "property" : "properties"
-                      ]
-                    })
-                  ]
-                }),
-                description && /* @__PURE__ */ jsx8("p", {
-                  className: "text-sm text-muted-foreground mt-1",
-                  children: description
-                })
-              ]
-            })
-          ]
-        })
+      /* @__PURE__ */ jsxs9("div", {
+        className: "flex items-center gap-2 mb-2",
+        children: [
+          /* @__PURE__ */ jsx10("span", {
+            className: cn("font-mono text-base font-medium text-foreground transition-colors duration-200", hoverColor),
+            children: name
+          }),
+          isFunction && /* @__PURE__ */ jsx10("span", {
+            className: "font-mono text-base text-muted-foreground",
+            children: "()"
+          }),
+          /* @__PURE__ */ jsx10("span", {
+            className: cn("ml-auto text-xs px-2 py-0.5 rounded-full font-medium", badgeColor),
+            children: kind
+          })
+        ]
       }),
-      hasNested && expanded && nestedProps && /* @__PURE__ */ jsx8("div", {
-        className: "border-l border-border ml-2",
-        children: Object.entries(nestedProps).map(([propName, propSchema]) => /* @__PURE__ */ jsx8(NestedPropertyItem, {
-          name: propName,
-          schema: propSchema,
-          required: getRequiredFields2(schema).includes(propName),
-          depth: depth + 1
-        }, propName))
-      })
-    ]
-  });
-}
-function ParameterItem({
-  param,
-  depth = 0,
-  className
-}) {
-  const [expanded, setExpanded] = useState4(false);
-  const type = formatSchema(param.schema);
-  const isRequired = param.required !== false;
-  const nestedProps = getNestedProperties2(param.schema);
-  const nestedCount = countProperties2(param.schema);
-  const hasNested = nestedCount > 0;
-  return /* @__PURE__ */ jsxs7("div", {
-    className: cn("border-b border-border last:border-b-0", className),
-    children: [
-      /* @__PURE__ */ jsx8("div", {
-        className: "py-3",
-        children: /* @__PURE__ */ jsxs7("div", {
-          className: "flex items-start gap-2",
-          children: [
-            hasNested && /* @__PURE__ */ jsx8("button", {
-              type: "button",
-              onClick: () => setExpanded(!expanded),
-              className: "mt-0.5 p-0.5 text-muted-foreground hover:text-foreground transition-colors cursor-pointer",
-              "aria-label": expanded ? "Collapse" : "Expand",
-              children: /* @__PURE__ */ jsx8(ChevronRight, {
-                size: 14,
-                className: cn("transition-transform duration-200", expanded && "rotate-90")
-              })
-            }),
-            !hasNested && /* @__PURE__ */ jsx8("div", {
-              className: "w-5"
-            }),
-            /* @__PURE__ */ jsxs7("div", {
-              className: "flex-1 min-w-0",
-              children: [
-                /* @__PURE__ */ jsxs7("div", {
-                  className: "flex items-baseline gap-2 flex-wrap",
-                  children: [
-                    /* @__PURE__ */ jsx8("span", {
-                      className: "font-mono text-sm font-medium text-foreground",
-                      children: param.name
-                    }),
-                    isRequired && /* @__PURE__ */ jsx8("span", {
-                      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__ */ jsx8("span", {
-                      className: "font-mono text-sm text-muted-foreground",
-                      children: hasNested ? "object" : type
-                    }),
-                    hasNested && /* @__PURE__ */ jsxs7("button", {
-                      type: "button",
-                      onClick: () => setExpanded(!expanded),
-                      className: "text-xs text-primary hover:underline cursor-pointer",
-                      children: [
-                        nestedCount,
-                        " ",
-                        nestedCount === 1 ? "property" : "properties"
-                      ]
-                    })
-                  ]
-                }),
-                param.description && /* @__PURE__ */ jsx8("p", {
-                  className: "text-sm text-muted-foreground mt-1",
-                  children: param.description
-                })
-              ]
-            })
-          ]
-        })
-      }),
-      hasNested && expanded && nestedProps && /* @__PURE__ */ jsx8("div", {
-        className: "border-l border-border ml-2 mb-3",
-        children: Object.entries(nestedProps).map(([propName, propSchema]) => /* @__PURE__ */ jsx8(NestedPropertyItem, {
-          name: propName,
-          schema: propSchema,
-          required: getRequiredFields2(param.schema).includes(propName),
-          depth: depth + 1
-        }, propName))
-      })
-    ]
-  });
-}
-
-// src/components/styled/ClassPage.tsx
-import { jsx as jsx9, jsxs as jsxs8, Fragment } from "react/jsx-runtime";
-
-function PropertyItem({ member }) {
-  const visibility = member.visibility ?? "public";
-  const flags = member.flags;
-  const isStatic = flags?.static;
-  const isReadonly = flags?.readonly;
-  const type = formatSchema(member.schema);
-  return /* @__PURE__ */ jsxs8("div", {
-    className: "py-4 first:pt-4 last:pb-4",
-    children: [
-      /* @__PURE__ */ jsxs8("div", {
-        className: "flex items-center gap-2 flex-wrap",
-        children: [
-          /* @__PURE__ */ jsx9("code", {
-            className: "font-mono text-sm font-medium text-foreground",
-            children: member.name
-          }),
-          /* @__PURE__ */ jsx9("code", {
-            className: "font-mono text-sm text-primary",
-            children: type
-          }),
-          visibility !== "public" && /* @__PURE__ */ jsx9("span", {
-            className: "text-xs px-1.5 py-0.5 rounded-full bg-muted text-muted-foreground font-medium",
-            children: visibility
-          }),
-          isStatic && /* @__PURE__ */ jsx9("span", {
-            className: "text-xs px-1.5 py-0.5 rounded-full bg-blue-500/10 text-blue-600 dark:text-blue-400 font-medium",
-            children: "static"
-          }),
-          isReadonly && /* @__PURE__ */ jsx9("span", {
-            className: "text-xs px-1.5 py-0.5 rounded-full bg-purple-500/10 text-purple-600 dark:text-purple-400 font-medium",
-            children: "readonly"
-          })
-        ]
-      }),
-      member.description && /* @__PURE__ */ jsx9("p", {
-        className: "text-sm text-muted-foreground mt-2 leading-relaxed",
-        children: member.description
-      })
-    ]
-  });
-}
-function MethodItem({ member }) {
-  const sig = member.signatures?.[0];
-  const params = sig?.parameters ?? [];
-  const returnType = formatSchema(sig?.returns?.schema);
-  const visibility = member.visibility ?? "public";
-  const flags = member.flags;
-  const isStatic = flags?.static;
-  const isAsync = flags?.async;
-  return /* @__PURE__ */ jsxs8("div", {
-    className: "p-4",
-    children: [
-      /* @__PURE__ */ jsxs8("div", {
-        className: "flex items-center gap-2 flex-wrap mb-1",
-        children: [
-          visibility !== "public" && /* @__PURE__ */ jsx9("span", {
-            className: "text-xs px-1.5 py-0.5 rounded-full bg-muted text-muted-foreground font-medium",
-            children: visibility
-          }),
-          isStatic && /* @__PURE__ */ jsx9("span", {
-            className: "text-xs px-1.5 py-0.5 rounded-full bg-blue-500/10 text-blue-600 dark:text-blue-400 font-medium",
-            children: "static"
-          }),
-          isAsync && /* @__PURE__ */ jsx9("span", {
-            className: "text-xs px-1.5 py-0.5 rounded-full bg-green-500/10 text-green-600 dark:text-green-400 font-medium",
-            children: "async"
-          })
-        ]
-      }),
-      /* @__PURE__ */ jsxs8("code", {
-        className: "font-mono text-sm text-foreground",
-        children: [
-          /* @__PURE__ */ jsx9("span", {
-            className: "font-medium",
-            children: member.name
-          }),
-          /* @__PURE__ */ jsx9("span", {
-            className: "text-muted-foreground",
-            children: "("
-          }),
-          params.map((p, i) => /* @__PURE__ */ jsxs8("span", {
-            children: [
-              i > 0 && /* @__PURE__ */ jsx9("span", {
-                className: "text-muted-foreground",
-                children: ", "
-              }),
-              /* @__PURE__ */ jsx9("span", {
-                className: "text-muted-foreground",
-                children: p.name
-              }),
-              p.required === false && /* @__PURE__ */ jsx9("span", {
-                className: "text-muted-foreground",
-                children: "?"
-              }),
-              /* @__PURE__ */ jsx9("span", {
-                className: "text-muted-foreground",
-                children: ": "
-              }),
-              /* @__PURE__ */ jsx9("span", {
-                className: "text-primary",
-                children: formatSchema(p.schema)
-              })
-            ]
-          }, p.name)),
-          /* @__PURE__ */ jsx9("span", {
-            className: "text-muted-foreground",
-            children: "): "
-          }),
-          /* @__PURE__ */ jsx9("span", {
-            className: "text-primary",
-            children: returnType
-          })
-        ]
-      }),
-      member.description && /* @__PURE__ */ jsx9("p", {
-        className: "text-sm text-muted-foreground mt-2 leading-relaxed",
-        children: member.description
-      })
-    ]
-  });
-}
-function ClassPage({ export: exp, spec, renderExample }) {
-  const [copied, setCopied] = useState5(false);
-  const hasExamples = exp.examples && exp.examples.length > 0;
-  const constructors = exp.members?.filter((m) => m.kind === "constructor") ?? [];
-  const properties = exp.members?.filter((m) => m.kind === "property" || m.kind === "field") ?? [];
-  const methods = exp.members?.filter((m) => m.kind === "method") ?? [];
-  const staticProperties = properties.filter((m) => m.flags?.static);
-  const instanceProperties = properties.filter((m) => !m.flags?.static);
-  const staticMethods = methods.filter((m) => m.flags?.static);
-  const instanceMethods = methods.filter((m) => !m.flags?.static);
-  const constructorSig = constructors[0]?.signatures?.[0];
-  const constructorParams = constructorSig?.parameters ?? [];
-  const packageName = spec.meta.name || "package";
-  const importStatement = `import { ${exp.name} } from '${packageName}'`;
-  const handleCopyName = () => {
-    navigator.clipboard.writeText(exp.name);
-    setCopied(true);
-    setTimeout(() => setCopied(false), 1200);
-  };
-  const codeTabs = hasExamples ? exp.examples.map((example, index) => {
-    const code = typeof example === "string" ? example : example.code;
-    const title = typeof example === "string" ? `Example ${index + 1}` : example.title || `Example ${index + 1}`;
-    const filename = `${exp.name.toLowerCase().replace(/[^a-z0-9]/g, "-")}-${index + 1}.ts`;
-    return {
-      label: title,
-      code,
-      content: renderExample ? renderExample(code, filename) : /* @__PURE__ */ jsx9("pre", {
-        className: "p-4 overflow-x-auto",
-        children: /* @__PURE__ */ jsx9("code", {
-          className: "font-mono text-sm text-foreground",
-          children: code
-        })
-      })
-    };
-  }) : [];
-  return /* @__PURE__ */ jsxs8("div", {
-    className: "doccov-class-page not-prose",
-    children: [
-      /* @__PURE__ */ jsxs8("header", {
-        className: "mb-6",
-        children: [
-          /* @__PURE__ */ jsxs8("div", {
-            className: "flex items-center gap-3",
-            children: [
-              /* @__PURE__ */ jsx9("span", {
-                className: "text-xs px-2 py-0.5 rounded-full font-medium bg-purple-500/10 text-purple-600 dark:text-purple-400",
-                children: "class"
-              }),
-              /* @__PURE__ */ jsx9("h1", {
-                className: "font-mono text-3xl font-bold text-foreground tracking-tight",
-                children: exp.name
-              }),
-              /* @__PURE__ */ jsx9("button", {
-                type: "button",
-                onClick: handleCopyName,
-                className: cn2("p-1.5 rounded-md", "text-muted-foreground hover:text-foreground hover:bg-muted/50", "transition-all cursor-pointer"),
-                "aria-label": "Copy class name",
-                children: copied ? /* @__PURE__ */ jsx9(Check, {
-                  size: 18
-                }) : /* @__PURE__ */ jsx9(Copy, {
-                  size: 18
-                })
-              })
-            ]
-          }),
-          (exp.extends || exp.implements?.length) && /* @__PURE__ */ jsxs8("div", {
-            className: "mt-2 flex items-center gap-2 flex-wrap text-sm",
-            children: [
-              exp.extends && /* @__PURE__ */ jsxs8(Fragment, {
-                children: [
-                  /* @__PURE__ */ jsx9("span", {
-                    className: "text-muted-foreground",
-                    children: "extends"
-                  }),
-                  /* @__PURE__ */ jsx9("code", {
-                    className: "font-mono text-primary",
-                    children: exp.extends
-                  })
-                ]
-              }),
-              exp.implements?.length && /* @__PURE__ */ jsxs8(Fragment, {
-                children: [
-                  /* @__PURE__ */ jsx9("span", {
-                    className: "text-muted-foreground",
-                    children: "implements"
-                  }),
-                  /* @__PURE__ */ jsx9("code", {
-                    className: "font-mono text-primary",
-                    children: exp.implements.join(", ")
-                  })
-                ]
-              })
-            ]
-          }),
-          exp.description && /* @__PURE__ */ jsx9("p", {
-            className: "mt-4 text-muted-foreground leading-relaxed text-base max-w-2xl",
-            children: exp.description
-          })
-        ]
-      }),
-      /* @__PURE__ */ jsxs8("div", {
-        className: cn2("grid gap-8 xl:gap-12", hasExamples ? "lg:grid-cols-[1fr,minmax(0,420px)]" : "grid-cols-1"),
-        children: [
-          /* @__PURE__ */ jsxs8("div", {
-            className: "min-w-0 space-y-8",
-            children: [
-              /* @__PURE__ */ jsx9(ImportSection, {
-                importStatement
-              }),
-              constructorParams.length > 0 && /* @__PURE__ */ jsxs8("section", {
-                children: [
-                  /* @__PURE__ */ jsx9("h2", {
-                    className: "text-xs font-semibold uppercase tracking-widest text-muted-foreground mb-4",
-                    children: "Constructor"
-                  }),
-                  /* @__PURE__ */ jsx9("div", {
-                    className: "rounded-lg border border-border bg-card/50 divide-y divide-border",
-                    children: constructorParams.map((param, index) => /* @__PURE__ */ jsx9(ParameterItem, {
-                      param,
-                      className: "px-4"
-                    }, param.name ?? index))
-                  })
-                ]
-              }),
-              (staticProperties.length > 0 || staticMethods.length > 0) && /* @__PURE__ */ jsxs8("section", {
-                children: [
-                  /* @__PURE__ */ jsx9("h2", {
-                    className: "text-xs font-semibold uppercase tracking-widest text-muted-foreground mb-4",
-                    children: "Static Members"
-                  }),
-                  /* @__PURE__ */ jsxs8("div", {
-                    className: "rounded-lg border border-border bg-card/50 divide-y divide-border",
-                    children: [
-                      staticProperties.map((member, index) => /* @__PURE__ */ jsx9(PropertyItem, {
-                        member
-                      }, member.name ?? `prop-${index}`)),
-                      staticMethods.map((member, index) => /* @__PURE__ */ jsx9(MethodItem, {
-                        member
-                      }, member.name ?? `method-${index}`))
-                    ]
-                  })
-                ]
-              }),
-              instanceMethods.length > 0 && /* @__PURE__ */ jsxs8("section", {
-                children: [
-                  /* @__PURE__ */ jsx9("h2", {
-                    className: "text-xs font-semibold uppercase tracking-widest text-muted-foreground mb-4",
-                    children: "Methods"
-                  }),
-                  /* @__PURE__ */ jsx9("div", {
-                    className: "rounded-lg border border-border bg-card/50 divide-y divide-border",
-                    children: instanceMethods.map((member, index) => /* @__PURE__ */ jsx9(MethodItem, {
-                      member
-                    }, member.name ?? index))
-                  })
-                ]
-              }),
-              instanceProperties.length > 0 && /* @__PURE__ */ jsxs8("section", {
-                children: [
-                  /* @__PURE__ */ jsx9("h2", {
-                    className: "text-xs font-semibold uppercase tracking-widest text-muted-foreground mb-4",
-                    children: "Properties"
-                  }),
-                  /* @__PURE__ */ jsx9("div", {
-                    className: "rounded-lg border border-border bg-card/50 divide-y divide-border px-4",
-                    children: instanceProperties.map((member, index) => /* @__PURE__ */ jsx9(PropertyItem, {
-                      member
-                    }, member.name ?? index))
-                  })
-                ]
-              })
-            ]
-          }),
-          hasExamples && /* @__PURE__ */ jsx9("aside", {
-            className: "lg:sticky lg:top-16 lg:self-start lg:max-h-[calc(100vh-6rem)] lg:overflow-y-auto",
-            children: codeTabs.length === 1 ? /* @__PURE__ */ jsx9("div", {
-              className: "rounded-lg border border-border overflow-hidden bg-background",
-              children: codeTabs[0].content
-            }) : /* @__PURE__ */ jsx9(CodeTabs, {
-              tabs: codeTabs,
-              sticky: true
-            })
-          })
-        ]
-      })
-    ]
-  });
-}
-
-// src/components/styled/EnumPage.tsx
-import { jsx as jsx10, jsxs as jsxs9 } from "react/jsx-runtime";
-
-function EnumPage({ export: exp, spec, renderExample }) {
-  const members = exp.members ?? [];
-  const hasExamples = exp.examples && exp.examples.length > 0;
-  const signature = buildSignatureString(exp);
-  return /* @__PURE__ */ jsxs9("div", {
-    className: "space-y-6",
-    children: [
-      exp.description && /* @__PURE__ */ jsx10("p", {
-        className: "text-muted-foreground text-base leading-relaxed",
-        children: exp.description
-      }),
-      /* @__PURE__ */ jsxs9("section", {
-        children: [
-          /* @__PURE__ */ jsx10("h2", {
-            className: "text-xl font-semibold mb-2",
-            children: "Declaration"
-          }),
-          /* @__PURE__ */ jsx10("div", {
-            className: "rounded-lg border border-border bg-muted/30 p-4 overflow-x-auto",
-            children: /* @__PURE__ */ jsx10("code", {
-              className: "font-mono text-sm text-foreground",
-              children: signature
-            })
-          }),
-          exp.deprecated && /* @__PURE__ */ jsxs9("div", {
-            className: "mt-2 rounded-md bg-yellow-500/10 border border-yellow-500/20 px-3 py-2 text-sm text-yellow-600 dark:text-yellow-400",
-            children: [
-              /* @__PURE__ */ jsx10("strong", {
-                children: "Deprecated:"
-              }),
-              " This export is deprecated."
-            ]
-          })
-        ]
-      }),
-      members.length > 0 && /* @__PURE__ */ jsxs9("section", {
-        children: [
-          /* @__PURE__ */ jsx10("h2", {
-            className: "text-xl font-semibold mb-2",
-            children: "Members"
-          }),
-          /* @__PURE__ */ jsx10("div", {
-            className: "overflow-x-auto",
-            children: /* @__PURE__ */ jsxs9("table", {
-              className: "w-full text-sm border-collapse",
-              children: [
-                /* @__PURE__ */ jsx10("thead", {
-                  children: /* @__PURE__ */ jsxs9("tr", {
-                    className: "border-b border-border",
-                    children: [
-                      /* @__PURE__ */ jsx10("th", {
-                        className: "text-left py-2 px-3 font-medium text-muted-foreground",
-                        children: "Name"
-                      }),
-                      /* @__PURE__ */ jsx10("th", {
-                        className: "text-left py-2 px-3 font-medium text-muted-foreground",
-                        children: "Value"
-                      }),
-                      /* @__PURE__ */ jsx10("th", {
-                        className: "text-left py-2 px-3 font-medium text-muted-foreground",
-                        children: "Description"
-                      })
-                    ]
-                  })
-                }),
-                /* @__PURE__ */ jsx10("tbody", {
-                  children: members.map((member, index) => {
-                    const value = member.schema !== undefined ? typeof member.schema === "object" && member.schema !== null ? member.schema.const ?? member.schema.default ?? "-" : member.schema : "-";
-                    return /* @__PURE__ */ jsxs9("tr", {
-                      className: "border-b border-border last:border-0",
-                      children: [
-                        /* @__PURE__ */ jsx10("td", {
-                          className: "py-2 px-3 align-top",
-                          children: /* @__PURE__ */ jsx10("code", {
-                            className: "text-primary font-mono text-xs bg-secondary px-1.5 py-0.5 rounded",
-                            children: member.name
-                          })
-                        }),
-                        /* @__PURE__ */ jsx10("td", {
-                          className: "py-2 px-3 align-top",
-                          children: /* @__PURE__ */ jsx10("code", {
-                            className: "font-mono text-xs text-muted-foreground",
-                            children: String(value)
-                          })
-                        }),
-                        /* @__PURE__ */ jsx10("td", {
-                          className: "py-2 px-3 align-top text-muted-foreground",
-                          children: member.description ?? ""
-                        })
-                      ]
-                    }, member.name ?? index);
-                  })
-                })
-              ]
-            })
-          })
-        ]
-      }),
-      hasExamples && /* @__PURE__ */ jsxs9("section", {
-        children: [
-          /* @__PURE__ */ jsx10("h2", {
-            className: "text-xl font-semibold mb-2",
-            children: "Examples"
-          }),
-          exp.examples.map((example, index) => {
-            const code = typeof example === "string" ? example : example.code;
-            return /* @__PURE__ */ jsx10("div", {
-              className: "mb-4",
-              children: renderExample ? renderExample(code, `${exp.name.toLowerCase()}-${index}.ts`) : /* @__PURE__ */ jsx10("pre", {
-                className: "rounded-lg border border-border bg-secondary p-4 overflow-x-auto",
-                children: /* @__PURE__ */ jsx10("code", {
-                  className: "font-mono text-sm text-foreground",
-                  children: code
-                })
-              })
-            }, index);
-          })
-        ]
+      description && /* @__PURE__ */ jsx10("p", {
+        className: "text-sm text-muted-foreground line-clamp-2 leading-relaxed group-hover:text-muted-foreground/80 transition-colors",
+        children: description
       })
     ]
   });
 }
 
 // src/components/styled/ExportIndexPage.tsx
-import { cn as cn4 } from "@doccov/ui/lib/utils";
-import { useState as useState6, useMemo } from "react";
-
-// src/components/styled/ExportCard.tsx
-var import_link3 = __toESM(require_link(), 1);
-import { cn as cn3 } from "@doccov/ui/lib/utils";
 import { jsx as jsx11, jsxs as jsxs10 } from "react/jsx-runtime";
 
-var KIND_COLORS = {
-  function: "group-hover:text-blue-600 dark:group-hover:text-blue-400",
-  class: "group-hover:text-purple-600 dark:group-hover:text-purple-400",
-  interface: "group-hover:text-green-600 dark:group-hover:text-green-400",
-  type: "group-hover:text-amber-600 dark:group-hover:text-amber-400",
-  enum: "group-hover:text-rose-600 dark:group-hover:text-rose-400",
-  variable: "group-hover:text-cyan-600 dark:group-hover:text-cyan-400"
-};
-var KIND_BADGE_COLORS = {
-  function: "bg-blue-500/10 text-blue-600 dark:text-blue-400",
-  class: "bg-purple-500/10 text-purple-600 dark:text-purple-400",
-  interface: "bg-green-500/10 text-green-600 dark:text-green-400",
-  type: "bg-amber-500/10 text-amber-600 dark:text-amber-400",
-  enum: "bg-rose-500/10 text-rose-600 dark:text-rose-400",
-  variable: "bg-cyan-500/10 text-cyan-600 dark:text-cyan-400"
-};
-function ExportCard({
-  name,
-  description,
-  href,
-  kind = "function",
-  className
-}) {
-  const isFunction = kind === "function";
-  const hoverColor = KIND_COLORS[kind];
-  const badgeColor = KIND_BADGE_COLORS[kind];
-  return /* @__PURE__ */ jsxs10(import_link3.default, {
-    href,
-    className: cn3("group block rounded-lg border border-border bg-card/50 p-4", "transition-all duration-200 ease-out", "hover:border-primary/30 hover:bg-card hover:shadow-lg hover:shadow-primary/5", "hover:-translate-y-1", "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring", className),
-    children: [
-      /* @__PURE__ */ jsxs10("div", {
-        className: "flex items-center gap-2 mb-2",
-        children: [
-          /* @__PURE__ */ jsx11("span", {
-            className: cn3("font-mono text-base font-medium text-foreground transition-colors duration-200", hoverColor),
-            children: name
-          }),
-          isFunction && /* @__PURE__ */ jsx11("span", {
-            className: "font-mono text-base text-muted-foreground",
-            children: "()"
-          }),
-          /* @__PURE__ */ jsx11("span", {
-            className: cn3("ml-auto text-xs px-2 py-0.5 rounded-full font-medium", badgeColor),
-            children: kind
-          })
-        ]
-      }),
-      description && /* @__PURE__ */ jsx11("p", {
-        className: "text-sm text-muted-foreground line-clamp-2 leading-relaxed group-hover:text-muted-foreground/80 transition-colors",
-        children: description
-      })
-    ]
-  });
-}
-
-// src/components/styled/ExportIndexPage.tsx
-import { jsx as jsx12, jsxs as jsxs11 } from "react/jsx-runtime";
-
 var KIND_ORDER = ["function", "class", "interface", "type", "enum", "variable"];
 var KIND_LABELS = {
   function: "Functions",
@@ -22974,8 +22670,8 @@ function ExportIndexPage({
   showSearch = true,
   showFilters = true
 }) {
-  const [searchQuery, setSearchQuery] = useState6("");
-  const [activeFilter, setActiveFilter] = useState6("all");
+  const [searchQuery, setSearchQuery] = useState4("");
+  const [activeFilter, setActiveFilter] = useState4("all");
   if (false) {}
   const allGroups = useMemo(() => groupByKind(spec.exports), [spec.exports]);
   const filteredGroups = useMemo(() => {
@@ -22991,60 +22687,60 @@ function ExportIndexPage({
   }, [allGroups, searchQuery, activeFilter]);
   const availableKinds = useMemo(() => allGroups.map((g) => g.kind), [allGroups]);
   const totalExports = filteredGroups.reduce((sum, g) => sum + g.exports.length, 0);
-  return /* @__PURE__ */ jsxs11("div", {
-    className: cn4("space-y-8 not-prose", className),
+  return /* @__PURE__ */ jsxs10("div", {
+    className: cn2("space-y-8 not-prose", className),
     children: [
-      /* @__PURE__ */ jsxs11("div", {
+      /* @__PURE__ */ jsxs10("div", {
         children: [
-          /* @__PURE__ */ jsx12("h1", {
+          /* @__PURE__ */ jsx11("h1", {
             className: "text-3xl font-bold text-foreground mb-3",
             children: spec.meta.name || "API Reference"
           }),
-          (description || spec.meta.description) && /* @__PURE__ */ jsx12("p", {
+          (description || spec.meta.description) && /* @__PURE__ */ jsx11("p", {
             className: "text-muted-foreground text-lg leading-relaxed max-w-3xl",
             children: description || spec.meta.description
           })
         ]
       }),
-      (showSearch || showFilters) && /* @__PURE__ */ jsxs11("div", {
+      (showSearch || showFilters) && /* @__PURE__ */ jsxs10("div", {
         className: "space-y-4",
         children: [
-          showSearch && /* @__PURE__ */ jsxs11("div", {
+          showSearch && /* @__PURE__ */ jsxs10("div", {
             className: "relative max-w-md",
             children: [
-              /* @__PURE__ */ jsx12(Search, {
+              /* @__PURE__ */ jsx11(Search, {
                 size: 18,
                 className: "absolute left-3 top-1/2 -translate-y-1/2 text-muted-foreground"
               }),
-              /* @__PURE__ */ jsx12("input", {
+              /* @__PURE__ */ jsx11("input", {
                 type: "text",
                 placeholder: "Search exports...",
                 value: searchQuery,
                 onChange: (e) => setSearchQuery(e.target.value),
-                className: cn4("w-full pl-10 pr-4 py-2 rounded-lg", "border border-border bg-background", "text-sm text-foreground placeholder:text-muted-foreground", "focus:outline-none focus:ring-2 focus:ring-ring focus:border-transparent", "transition-shadow")
+                className: cn2("w-full pl-10 pr-4 py-2 rounded-lg", "border border-border bg-background", "text-sm text-foreground placeholder:text-muted-foreground", "focus:outline-none focus:ring-2 focus:ring-ring focus:border-transparent", "transition-shadow")
               })
             ]
           }),
-          showFilters && availableKinds.length > 1 && /* @__PURE__ */ jsxs11("div", {
+          showFilters && availableKinds.length > 1 && /* @__PURE__ */ jsxs10("div", {
             className: "flex flex-wrap gap-2",
             children: [
-              /* @__PURE__ */ jsx12("button", {
+              /* @__PURE__ */ jsx11("button", {
                 type: "button",
                 onClick: () => setActiveFilter("all"),
-                className: cn4("px-3 py-1.5 text-sm rounded-md transition-all cursor-pointer", activeFilter === "all" ? "bg-primary text-primary-foreground font-medium" : "bg-muted text-muted-foreground hover:bg-muted/80 hover:text-foreground"),
+                className: cn2("px-3 py-1.5 text-sm rounded-md transition-all cursor-pointer", activeFilter === "all" ? "bg-primary text-primary-foreground font-medium" : "bg-muted text-muted-foreground hover:bg-muted/80 hover:text-foreground"),
                 children: "All"
               }),
-              availableKinds.map((kind) => /* @__PURE__ */ jsx12("button", {
+              availableKinds.map((kind) => /* @__PURE__ */ jsx11("button", {
                 type: "button",
                 onClick: () => setActiveFilter(kind),
-                className: cn4("px-3 py-1.5 text-sm rounded-md transition-all cursor-pointer", activeFilter === kind ? "bg-primary text-primary-foreground font-medium" : "bg-muted text-muted-foreground hover:bg-muted/80 hover:text-foreground"),
+                className: cn2("px-3 py-1.5 text-sm rounded-md transition-all cursor-pointer", activeFilter === kind ? "bg-primary text-primary-foreground font-medium" : "bg-muted text-muted-foreground hover:bg-muted/80 hover:text-foreground"),
                 children: KIND_LABELS[kind]
               }, kind))
             ]
           })
         ]
       }),
-      (searchQuery || activeFilter !== "all") && /* @__PURE__ */ jsxs11("p", {
+      (searchQuery || activeFilter !== "all") && /* @__PURE__ */ jsxs10("p", {
         className: "text-sm text-muted-foreground",
         children: [
           totalExports,
@@ -23053,15 +22749,15 @@ function ExportIndexPage({
           searchQuery && ` for "${searchQuery}"`
         ]
       }),
-      filteredGroups.map((group) => /* @__PURE__ */ jsxs11("section", {
+      filteredGroups.map((group) => /* @__PURE__ */ jsxs10("section", {
         children: [
-          /* @__PURE__ */ jsx12("h2", {
+          /* @__PURE__ */ jsx11("h2", {
             className: "text-sm font-semibold uppercase tracking-wide text-muted-foreground mb-4",
             children: group.label
           }),
-          /* @__PURE__ */ jsx12("div", {
+          /* @__PURE__ */ jsx11("div", {
             className: "grid grid-cols-1 md:grid-cols-2 gap-4",
-            children: group.exports.map((exp) => /* @__PURE__ */ jsx12(ExportCard, {
+            children: group.exports.map((exp) => /* @__PURE__ */ jsx11(ExportCard, {
               name: exp.name,
               description: exp.description,
               href: `${baseHref}/${group.kind}s/${exp.id}`,
@@ -23070,14 +22766,14 @@ function ExportIndexPage({
           })
         ]
       }, group.kind)),
-      filteredGroups.length === 0 && /* @__PURE__ */ jsxs11("div", {
+      filteredGroups.length === 0 && /* @__PURE__ */ jsxs10("div", {
         className: "rounded-lg border border-border bg-card/50 p-8 text-center",
         children: [
-          /* @__PURE__ */ jsx12("p", {
+          /* @__PURE__ */ jsx11("p", {
             className: "text-muted-foreground",
             children: searchQuery || activeFilter !== "all" ? "No exports match your search." : "No exports found in this package."
           }),
-          (searchQuery || activeFilter !== "all") && /* @__PURE__ */ jsx12("button", {
+          (searchQuery || activeFilter !== "all") && /* @__PURE__ */ jsx11("button", {
             type: "button",
             onClick: () => {
               setSearchQuery("");
@@ -23093,459 +22789,276 @@ function ExportIndexPage({
 }
 
 // src/components/styled/FunctionPage.tsx
-import { cn as cn5 } from "@doccov/ui/lib/utils";
-import { CodeTabs as CodeTabs2, ImportSection as ImportSection2 } from "@doccov/ui/api";
-import { ClientDocsKitCode } from "@doccov/ui/docskit";
-import { useState as useState7 } from "react";
-import { jsx as jsx13, jsxs as jsxs12 } from "react/jsx-runtime";
+import {
+  APIParameterItem as APIParameterItem3,
+  APISection as APISection3,
+  ParameterList as ParameterList3,
+  ResponseBlock
+} from "@doccov/ui/docskit";
+import { jsx as jsx12, jsxs as jsxs11 } from "react/jsx-runtime";
 
 function FunctionPage({
   export: exp,
-  spec,
-  renderExample
+  spec
 }) {
-  const [copied, setCopied] = useState7(false);
   const sig = exp.signatures?.[0];
-  const hasExamples = exp.examples && exp.examples.length > 0;
   const hasParams = sig?.parameters && sig.parameters.length > 0;
-  const packageName = spec.meta.name || "package";
-  const importStatement = `import { ${exp.name} } from '${packageName}'`;
-  const handleCopyName = () => {
-    navigator.clipboard.writeText(exp.name);
-    setCopied(true);
-    setTimeout(() => setCopied(false), 1200);
-  };
-  const codeTabs = hasExamples ? exp.examples.map((example, index) => {
-    const code = typeof example === "string" ? example : example.code;
-    const title = typeof example === "string" ? `Example ${index + 1}` : example.title || `Example ${index + 1}`;
-    const filename = `${exp.name.toLowerCase().replace(/[^a-z0-9]/g, "-")}-${index + 1}.ts`;
-    const lang = typeof example === "string" ? "ts" : example.language || "ts";
-    return {
-      label: title,
-      code,
-      content: renderExample ? renderExample(code, filename) : /* @__PURE__ */ jsx13(ClientDocsKitCode, {
-        codeblock: {
-          value: code,
-          lang,
-          meta: "-c"
-        }
-      })
-    };
-  }) : [];
-  return /* @__PURE__ */ jsxs12("div", {
+  const hasExamples = exp.examples && exp.examples.length > 0;
+  const languages = getLanguagesFromExamples(exp.examples);
+  const examples = specExamplesToCodeExamples(exp.examples);
+  const importStatement = buildImportStatement(exp, spec);
+  const displayExamples = examples.length > 0 ? examples : [{
+    languageId: "typescript",
+    code: `${importStatement}
+
+// Usage
+${exp.name}(${sig?.parameters?.map((p) => p.name).join(", ") || ""})`,
+    highlightLang: "ts"
+  }];
+  const displayLanguages = languages.length > 0 ? languages : [{ id: "typescript", label: "TypeScript" }];
+  return /* @__PURE__ */ jsx12("div", {
     className: "doccov-function-page not-prose",
-    children: [
-      /* @__PURE__ */ jsxs12("header", {
-        className: "mb-6",
+    children: /* @__PURE__ */ jsxs11(APISection3, {
+      id: exp.id || exp.name,
+      title: `${exp.name}()`,
+      description: /* @__PURE__ */ jsxs11("div", {
+        className: "space-y-3",
         children: [
-          /* @__PURE__ */ jsxs12("div", {
-            className: "flex items-center gap-3",
-            children: [
-              /* @__PURE__ */ jsxs12("h1", {
-                className: "font-mono text-3xl font-bold text-foreground tracking-tight",
-                children: [
-                  exp.name,
-                  /* @__PURE__ */ jsx13("span", {
-                    className: "text-muted-foreground font-normal",
-                    children: "()"
-                  })
-                ]
-              }),
-              /* @__PURE__ */ jsx13("button", {
-                type: "button",
-                onClick: handleCopyName,
-                className: cn5("p-1.5 rounded-md", "text-muted-foreground hover:text-foreground hover:bg-muted/50", "transition-all cursor-pointer"),
-                "aria-label": "Copy function name",
-                children: copied ? /* @__PURE__ */ jsx13(Check, {
-                  size: 18
-                }) : /* @__PURE__ */ jsx13(Copy, {
-                  size: 18
-                })
-              })
-            ]
-          }),
-          exp.description && /* @__PURE__ */ jsx13("p", {
-            className: "mt-4 text-muted-foreground leading-relaxed text-base max-w-2xl",
+          exp.description && /* @__PURE__ */ jsx12("p", {
             children: exp.description
+          }),
+          /* @__PURE__ */ jsx12("code", {
+            className: "text-sm font-mono bg-muted px-2 py-1 rounded inline-block",
+            children: importStatement
           })
         ]
       }),
-      /* @__PURE__ */ jsxs12("div", {
-        className: cn5("grid gap-8 xl:gap-12", hasExamples ? "lg:grid-cols-[1fr,minmax(0,420px)]" : "grid-cols-1"),
-        children: [
-          /* @__PURE__ */ jsxs12("div", {
-            className: "min-w-0 space-y-8",
+      languages: displayLanguages,
+      examples: displayExamples,
+      codePanelTitle: `${exp.name}()`,
+      children: [
+        hasParams && /* @__PURE__ */ jsx12(ParameterList3, {
+          title: "Parameters",
+          children: sig.parameters.map((param, index) => {
+            const apiParam = specParamToAPIParam(param);
+            return /* @__PURE__ */ jsx12(APIParameterItem3, {
+              name: apiParam.name,
+              type: apiParam.type,
+              required: apiParam.required,
+              description: apiParam.description,
+              children: apiParam.children
+            }, param.name ?? index);
+          })
+        }),
+        sig?.returns && /* @__PURE__ */ jsx12(ResponseBlock, {
+          description: /* @__PURE__ */ jsxs11("span", {
             children: [
-              /* @__PURE__ */ jsx13(ImportSection2, {
-                importStatement
-              }),
-              hasParams && /* @__PURE__ */ jsxs12("section", {
-                children: [
-                  /* @__PURE__ */ jsx13("h2", {
-                    className: "text-xs font-semibold uppercase tracking-widest text-muted-foreground mb-4",
-                    children: "Parameters"
-                  }),
-                  /* @__PURE__ */ jsx13("div", {
-                    className: "rounded-lg border border-border bg-card/50 divide-y divide-border",
-                    children: sig.parameters.map((param, index) => /* @__PURE__ */ jsx13(ParameterItem, {
-                      param,
-                      className: "px-4"
-                    }, param.name ?? index))
-                  })
-                ]
+              /* @__PURE__ */ jsx12("span", {
+                className: "font-mono text-sm font-medium",
+                children: formatSchema(sig.returns.schema)
               }),
-              sig?.returns && /* @__PURE__ */ jsxs12("section", {
-                children: [
-                  /* @__PURE__ */ jsx13("h2", {
-                    className: "text-xs font-semibold uppercase tracking-widest text-muted-foreground mb-4",
-                    children: "Returns"
-                  }),
-                  /* @__PURE__ */ jsxs12("div", {
-                    className: "rounded-lg border border-border bg-card/50 p-4",
-                    children: [
-                      /* @__PURE__ */ jsx13("div", {
-                        className: "flex items-baseline gap-2 mb-2",
-                        children: /* @__PURE__ */ jsx13("span", {
-                          className: "font-mono text-sm font-medium text-foreground",
-                          children: formatSchema(sig.returns.schema)
-                        })
-                      }),
-                      sig.returns.description && /* @__PURE__ */ jsx13("p", {
-                        className: "text-sm text-muted-foreground leading-relaxed",
-                        children: sig.returns.description
-                      })
-                    ]
-                  })
-                ]
+              sig.returns.description && /* @__PURE__ */ jsx12("span", {
+                className: "ml-2 text-muted-foreground",
+                children: sig.returns.description
               })
             ]
           }),
-          hasExamples && /* @__PURE__ */ jsx13("aside", {
-            className: "lg:sticky lg:top-16 lg:self-start lg:max-h-[calc(100vh-6rem)] lg:overflow-y-auto",
-            children: codeTabs.length === 1 ? /* @__PURE__ */ jsx13("div", {
-              className: "rounded-lg border border-border overflow-hidden bg-background",
-              children: codeTabs[0].content
-            }) : /* @__PURE__ */ jsx13(CodeTabs2, {
-              tabs: codeTabs,
-              sticky: true
-            })
-          })
-        ]
-      })
-    ]
+          className: "mt-6"
+        }),
+        exp.typeParameters && exp.typeParameters.length > 0 && /* @__PURE__ */ jsx12(ParameterList3, {
+          title: "Type Parameters",
+          className: "mt-6",
+          children: exp.typeParameters.map((tp) => /* @__PURE__ */ jsx12(APIParameterItem3, {
+            name: tp.name,
+            type: tp.constraint || "unknown",
+            description: tp.default ? `Default: ${tp.default}` : undefined
+          }, tp.name))
+        })
+      ]
+    })
   });
 }
 
 // src/components/styled/InterfacePage.tsx
-import { cn as cn6 } from "@doccov/ui/lib/utils";
-import { CodeTabs as CodeTabs3, ImportSection as ImportSection3 } from "@doccov/ui/api";
-import { useState as useState8 } from "react";
-import { jsx as jsx14, jsxs as jsxs13 } from "react/jsx-runtime";
+import {
+  APIParameterItem as APIParameterItem4,
+  APISection as APISection4,
+  ParameterList as ParameterList4
+} from "@doccov/ui/docskit";
+import { jsx as jsx13, jsxs as jsxs12 } from "react/jsx-runtime";
 
+function formatMethodSignature2(member) {
+  const sig = member.signatures?.[0];
+  const params = sig?.parameters ?? [];
+  const returnType = formatSchema(sig?.returns?.schema);
+  const paramStr = params.map((p) => `${p.name}${p.required === false ? "?" : ""}: ${formatSchema(p.schema)}`).join(", ");
+  return `(${paramStr}): ${returnType}`;
+}
 function InterfacePage({
   export: exp,
-  spec,
-  renderExample
+  spec
 }) {
-  const [copied, setCopied] = useState8(false);
-  const properties = exp.members?.filter((m) => m.kind === "property" || m.kind === "field" || !m.kind);
-  const methods = exp.members?.filter((m) => m.kind === "method" || m.kind === "function");
-  const hasExamples = exp.examples && exp.examples.length > 0;
-  const packageName = spec.meta.name || "package";
-  const importStatement = `import type { ${exp.name} } from '${packageName}'`;
-  const handleCopyName = () => {
-    navigator.clipboard.writeText(exp.name);
-    setCopied(true);
-    setTimeout(() => setCopied(false), 1200);
-  };
-  const codeTabs = hasExamples ? exp.examples.map((example, index) => {
-    const code = typeof example === "string" ? example : example.code;
-    const title = typeof example === "string" ? `Example ${index + 1}` : example.title || `Example ${index + 1}`;
-    const filename = `${exp.name.toLowerCase().replace(/[^a-z0-9]/g, "-")}-${index + 1}.ts`;
-    return {
-      label: title,
-      code,
-      content: renderExample ? renderExample(code, filename) : /* @__PURE__ */ jsx14("pre", {
-        className: "p-4 overflow-x-auto",
-        children: /* @__PURE__ */ jsx14("code", {
-          className: "font-mono text-sm text-foreground",
-          children: code
-        })
-      })
-    };
-  }) : [];
-  return /* @__PURE__ */ jsxs13("div", {
+  const properties = exp.members?.filter((m) => m.kind === "property" || m.kind === "field" || !m.kind) ?? [];
+  const methods = exp.members?.filter((m) => m.kind === "method" || m.kind === "function") ?? [];
+  const languages = getLanguagesFromExamples(exp.examples);
+  const examples = specExamplesToCodeExamples(exp.examples);
+  const importStatement = buildImportStatement(exp, spec);
+  const typeDefinition = properties.length > 0 ? `${exp.kind === "type" ? "type" : "interface"} ${exp.name} {
+${properties.map((p) => `  ${p.name}${p.required === false ? "?" : ""}: ${formatSchema(p.schema)};`).join(`
+`)}
+}` : `${exp.kind === "type" ? "type" : "interface"} ${exp.name} { }`;
+  const displayExamples = examples.length > 0 ? examples : [{
+    languageId: "typescript",
+    code: `${importStatement}
+
+${typeDefinition}`,
+    highlightLang: "ts"
+  }];
+  const displayLanguages = languages.length > 0 ? languages : [{ id: "typescript", label: "TypeScript" }];
+  const kindLabel = exp.kind === "type" ? "type" : "interface";
+  return /* @__PURE__ */ jsx13("div", {
     className: "doccov-interface-page not-prose",
-    children: [
-      /* @__PURE__ */ jsxs13("header", {
-        className: "mb-6",
+    children: /* @__PURE__ */ jsxs12(APISection4, {
+      id: exp.id || exp.name,
+      title: `${kindLabel} ${exp.name}`,
+      description: /* @__PURE__ */ jsxs12("div", {
+        className: "space-y-3",
         children: [
-          /* @__PURE__ */ jsxs13("div", {
-            className: "flex items-center gap-3",
+          exp.extends && /* @__PURE__ */ jsxs12("p", {
+            className: "font-mono text-sm text-muted-foreground",
             children: [
-              /* @__PURE__ */ jsx14("span", {
-                className: cn6("text-xs px-2 py-0.5 rounded-full font-medium", exp.kind === "type" ? "bg-amber-500/10 text-amber-600 dark:text-amber-400" : "bg-green-500/10 text-green-600 dark:text-green-400"),
-                children: exp.kind === "type" ? "type" : "interface"
-              }),
-              /* @__PURE__ */ jsx14("h1", {
-                className: "font-mono text-3xl font-bold text-foreground tracking-tight",
-                children: exp.name
-              }),
-              /* @__PURE__ */ jsx14("button", {
-                type: "button",
-                onClick: handleCopyName,
-                className: cn6("p-1.5 rounded-md", "text-muted-foreground hover:text-foreground hover:bg-muted/50", "transition-all cursor-pointer"),
-                "aria-label": "Copy type name",
-                children: copied ? /* @__PURE__ */ jsx14(Check, {
-                  size: 18
-                }) : /* @__PURE__ */ jsx14(Copy, {
-                  size: 18
-                })
-              })
+              "extends ",
+              exp.extends
             ]
           }),
-          exp.description && /* @__PURE__ */ jsx14("p", {
-            className: "mt-4 text-muted-foreground leading-relaxed text-base max-w-2xl",
+          exp.description && /* @__PURE__ */ jsx13("p", {
             children: exp.description
           }),
-          exp.deprecated && /* @__PURE__ */ jsxs13("div", {
-            className: "mt-4 rounded-md bg-yellow-500/10 border border-yellow-500/20 px-3 py-2 text-sm text-yellow-600 dark:text-yellow-400",
+          exp.deprecated && /* @__PURE__ */ jsxs12("div", {
+            className: "rounded-md bg-yellow-500/10 border border-yellow-500/20 px-3 py-2 text-sm text-yellow-600 dark:text-yellow-400",
             children: [
-              /* @__PURE__ */ jsx14("strong", {
+              /* @__PURE__ */ jsx13("strong", {
                 children: "Deprecated:"
               }),
               " This export is deprecated."
             ]
+          }),
+          /* @__PURE__ */ jsx13("code", {
+            className: "text-sm font-mono bg-muted px-2 py-1 rounded inline-block",
+            children: importStatement
           })
         ]
       }),
-      /* @__PURE__ */ jsxs13("div", {
-        className: cn6("grid gap-8 xl:gap-12", hasExamples ? "lg:grid-cols-[1fr,minmax(0,420px)]" : "grid-cols-1"),
-        children: [
-          /* @__PURE__ */ jsxs13("div", {
-            className: "min-w-0 space-y-8",
-            children: [
-              /* @__PURE__ */ jsx14(ImportSection3, {
-                importStatement
-              }),
-              exp.extends && /* @__PURE__ */ jsxs13("section", {
-                children: [
-                  /* @__PURE__ */ jsx14("h2", {
-                    className: "text-xs font-semibold uppercase tracking-widest text-muted-foreground mb-4",
-                    children: "Extends"
-                  }),
-                  /* @__PURE__ */ jsx14("div", {
-                    className: "rounded-lg border border-border bg-card/50 p-4",
-                    children: /* @__PURE__ */ jsx14("code", {
-                      className: "font-mono text-sm text-primary",
-                      children: exp.extends
-                    })
-                  })
-                ]
-              }),
-              properties && properties.length > 0 && /* @__PURE__ */ jsxs13("section", {
-                children: [
-                  /* @__PURE__ */ jsx14("h2", {
-                    className: "text-xs font-semibold uppercase tracking-widest text-muted-foreground mb-4",
-                    children: "Properties"
-                  }),
-                  /* @__PURE__ */ jsx14("div", {
-                    className: "rounded-lg border border-border bg-card/50 divide-y divide-border",
-                    children: properties.map((prop, index) => /* @__PURE__ */ jsx14(ParameterItem, {
-                      param: {
-                        name: prop.name,
-                        schema: prop.schema,
-                        description: prop.description,
-                        required: prop.required
-                      },
-                      className: "px-4"
-                    }, prop.name ?? index))
-                  })
-                ]
-              }),
-              methods && methods.length > 0 && /* @__PURE__ */ jsxs13("section", {
-                children: [
-                  /* @__PURE__ */ jsx14("h2", {
-                    className: "text-xs font-semibold uppercase tracking-widest text-muted-foreground mb-4",
-                    children: "Methods"
-                  }),
-                  /* @__PURE__ */ jsx14("div", {
-                    className: "rounded-lg border border-border bg-card/50 divide-y divide-border",
-                    children: methods.map((method, index) => {
-                      const sig = method.signatures?.[0];
-                      const params = sig?.parameters ?? [];
-                      const returnType = formatSchema(sig?.returns?.schema);
-                      return /* @__PURE__ */ jsxs13("div", {
-                        className: "p-4",
-                        children: [
-                          /* @__PURE__ */ jsxs13("code", {
-                            className: "font-mono text-sm text-foreground",
-                            children: [
-                              /* @__PURE__ */ jsx14("span", {
-                                className: "font-medium",
-                                children: method.name
-                              }),
-                              /* @__PURE__ */ jsx14("span", {
-                                className: "text-muted-foreground",
-                                children: "("
-                              }),
-                              params.map((p, i) => /* @__PURE__ */ jsxs13("span", {
-                                children: [
-                                  i > 0 && /* @__PURE__ */ jsx14("span", {
-                                    className: "text-muted-foreground",
-                                    children: ", "
-                                  }),
-                                  /* @__PURE__ */ jsx14("span", {
-                                    className: "text-muted-foreground",
-                                    children: p.name
-                                  }),
-                                  p.required === false && /* @__PURE__ */ jsx14("span", {
-                                    className: "text-muted-foreground",
-                                    children: "?"
-                                  }),
-                                  /* @__PURE__ */ jsx14("span", {
-                                    className: "text-muted-foreground",
-                                    children: ": "
-                                  }),
-                                  /* @__PURE__ */ jsx14("span", {
-                                    className: "text-primary",
-                                    children: formatSchema(p.schema)
-                                  })
-                                ]
-                              }, p.name)),
-                              /* @__PURE__ */ jsx14("span", {
-                                className: "text-muted-foreground",
-                                children: "): "
-                              }),
-                              /* @__PURE__ */ jsx14("span", {
-                                className: "text-primary",
-                                children: returnType
-                              })
-                            ]
-                          }),
-                          method.description && /* @__PURE__ */ jsx14("p", {
-                            className: "text-sm text-muted-foreground mt-2 leading-relaxed",
-                            children: method.description
-                          })
-                        ]
-                      }, method.name ?? index);
-                    })
-                  })
-                ]
-              })
-            ]
-          }),
-          hasExamples && /* @__PURE__ */ jsx14("aside", {
-            className: "lg:sticky lg:top-16 lg:self-start lg:max-h-[calc(100vh-6rem)] lg:overflow-y-auto",
-            children: codeTabs.length === 1 ? /* @__PURE__ */ jsx14("div", {
-              className: "rounded-lg border border-border overflow-hidden bg-background",
-              children: codeTabs[0].content
-            }) : /* @__PURE__ */ jsx14(CodeTabs3, {
-              tabs: codeTabs,
-              sticky: true
-            })
+      languages: displayLanguages,
+      examples: displayExamples,
+      codePanelTitle: exp.name,
+      children: [
+        properties.length > 0 && /* @__PURE__ */ jsx13(ParameterList4, {
+          title: "Properties",
+          children: properties.map((prop, index) => {
+            const type = formatSchema(prop.schema);
+            const children = specSchemaToAPISchema(prop.schema);
+            const hasNestedProperties = children?.properties && Object.keys(children.properties).length > 0;
+            return /* @__PURE__ */ jsx13(APIParameterItem4, {
+              name: prop.name,
+              type,
+              required: prop.required !== false,
+              description: prop.description,
+              children: hasNestedProperties ? children : undefined
+            }, prop.name ?? index);
           })
-        ]
-      })
-    ]
+        }),
+        methods.length > 0 && /* @__PURE__ */ jsx13(ParameterList4, {
+          title: "Methods",
+          className: "mt-6",
+          children: methods.map((method, index) => /* @__PURE__ */ jsx13(APIParameterItem4, {
+            name: `${method.name}()`,
+            type: formatMethodSignature2(method),
+            description: method.description
+          }, method.name ?? index))
+        })
+      ]
+    })
   });
 }
 
 // src/components/styled/VariablePage.tsx
-import { jsx as jsx15, jsxs as jsxs14 } from "react/jsx-runtime";
+import {
+  APIParameterItem as APIParameterItem5,
+  APISection as APISection5,
+  ParameterList as ParameterList5
+} from "@doccov/ui/docskit";
+import { jsx as jsx14, jsxs as jsxs13 } from "react/jsx-runtime";
 
 function VariablePage({
   export: exp,
-  spec,
-  renderExample
+  spec
 }) {
   const typeValue = typeof exp.type === "string" ? exp.type : formatSchema(exp.schema);
-  const hasExamples = exp.examples && exp.examples.length > 0;
-  const exampleCode = hasExamples ? typeof exp.examples[0] === "string" ? exp.examples[0] : exp.examples[0].code : "";
-  return /* @__PURE__ */ jsxs14("div", {
-    className: "space-y-8",
-    children: [
-      exp.description && /* @__PURE__ */ jsx15("p", {
-        className: "text-muted-foreground text-lg leading-relaxed",
-        children: exp.description
-      }),
-      /* @__PURE__ */ jsx15("div", {
-        className: "rounded-lg border border-border bg-muted/30 p-4 overflow-x-auto",
-        children: /* @__PURE__ */ jsxs14("code", {
-          className: "font-mono text-sm text-foreground whitespace-pre",
-          children: [
-            "const ",
-            exp.name,
-            ": ",
-            typeValue
-          ]
-        })
-      }),
-      exp.deprecated && /* @__PURE__ */ jsxs14("div", {
-        className: "rounded-md bg-yellow-500/10 border border-yellow-500/20 px-3 py-2 text-sm text-yellow-600 dark:text-yellow-400",
-        children: [
-          /* @__PURE__ */ jsx15("strong", {
-            children: "Deprecated:"
-          }),
-          " This export is deprecated."
-        ]
-      }),
-      /* @__PURE__ */ jsxs14("div", {
-        className: `grid gap-8 ${hasExamples ? "lg:grid-cols-2" : "grid-cols-1"}`,
+  const languages = getLanguagesFromExamples(exp.examples);
+  const examples = specExamplesToCodeExamples(exp.examples);
+  const importStatement = buildImportStatement(exp, spec);
+  const constValue = exp.schema && typeof exp.schema === "object" ? exp.schema.const : undefined;
+  const displayExamples = examples.length > 0 ? examples : [{
+    languageId: "typescript",
+    code: `${importStatement}
+
+console.log(${exp.name}); // ${constValue !== undefined ? JSON.stringify(constValue) : typeValue}`,
+    highlightLang: "ts"
+  }];
+  const displayLanguages = languages.length > 0 ? languages : [{ id: "typescript", label: "TypeScript" }];
+  return /* @__PURE__ */ jsx14("div", {
+    className: "doccov-variable-page not-prose",
+    children: /* @__PURE__ */ jsx14(APISection5, {
+      id: exp.id || exp.name,
+      title: `const ${exp.name}`,
+      description: /* @__PURE__ */ jsxs13("div", {
+        className: "space-y-3",
         children: [
-          /* @__PURE__ */ jsx15("div", {
-            className: "space-y-6",
-            children: /* @__PURE__ */ jsxs14("div", {
-              children: [
-                /* @__PURE__ */ jsx15("h3", {
-                  className: "text-sm font-semibold uppercase tracking-wide text-muted-foreground mb-3",
-                  children: "Type"
-                }),
-                /* @__PURE__ */ jsx15("div", {
-                  className: "rounded-lg border border-border bg-card p-4",
-                  children: /* @__PURE__ */ jsx15("code", {
-                    className: "font-mono text-sm text-primary",
-                    children: typeValue
-                  })
-                })
-              ]
-            })
+          exp.description && /* @__PURE__ */ jsx14("p", {
+            children: exp.description
           }),
-          hasExamples && /* @__PURE__ */ jsxs14("div", {
+          exp.deprecated && /* @__PURE__ */ jsxs13("div", {
+            className: "rounded-md bg-yellow-500/10 border border-yellow-500/20 px-3 py-2 text-sm text-yellow-600 dark:text-yellow-400",
             children: [
-              /* @__PURE__ */ jsxs14("h3", {
-                className: "text-sm font-semibold uppercase tracking-wide text-muted-foreground mb-3",
-                children: [
-                  exp.name,
-                  " usage"
-                ]
+              /* @__PURE__ */ jsx14("strong", {
+                children: "Deprecated:"
               }),
-              renderExample ? renderExample(exampleCode, `${exp.name.toLowerCase()}.ts`) : /* @__PURE__ */ jsx15("pre", {
-                className: "rounded-lg border border-border bg-muted/30 p-4 overflow-x-auto",
-                children: /* @__PURE__ */ jsx15("code", {
-                  className: "font-mono text-sm text-foreground",
-                  children: exampleCode
-                })
-              })
+              " This export is deprecated."
             ]
+          }),
+          /* @__PURE__ */ jsx14("code", {
+            className: "text-sm font-mono bg-muted px-2 py-1 rounded inline-block",
+            children: importStatement
           })
         ]
+      }),
+      languages: displayLanguages,
+      examples: displayExamples,
+      codePanelTitle: exp.name,
+      children: /* @__PURE__ */ jsx14(ParameterList5, {
+        title: "Type",
+        children: /* @__PURE__ */ jsx14(APIParameterItem5, {
+          name: exp.name,
+          type: typeValue,
+          description: constValue !== undefined ? `Value: ${JSON.stringify(constValue)}` : undefined
+        })
       })
-    ]
+    })
   });
 }
 
 // src/components/styled/APIPage.tsx
-import { jsx as jsx16, jsxs as jsxs15 } from "react/jsx-runtime";
+import { jsx as jsx15, jsxs as jsxs14 } from "react/jsx-runtime";
 
 function NotFound({ id }) {
-  return /* @__PURE__ */ jsx16("div", {
+  return /* @__PURE__ */ jsx15("div", {
     className: "rounded-lg border border-border bg-card p-6 text-center",
-    children: /* @__PURE__ */ jsxs15("p", {
+    children: /* @__PURE__ */ jsxs14("p", {
       className: "text-muted-foreground",
       children: [
         "Export ",
-        /* @__PURE__ */ jsx16("code", {
+        /* @__PURE__ */ jsx15("code", {
           className: "font-mono text-primary",
           children: id
         }),
@@ -23555,17 +23068,17 @@ function NotFound({ id }) {
   });
 }
 function NoSpec() {
-  return /* @__PURE__ */ jsx16("div", {
+  return /* @__PURE__ */ jsx15("div", {
     className: "rounded-lg border border-red-500/20 bg-red-500/10 p-6 text-center",
-    children: /* @__PURE__ */ jsxs15("p", {
+    children: /* @__PURE__ */ jsxs14("p", {
       className: "text-red-600 dark:text-red-400",
       children: [
         "No spec provided. Pass either ",
-        /* @__PURE__ */ jsx16("code", {
+        /* @__PURE__ */ jsx15("code", {
           children: "spec"
         }),
         " or ",
-        /* @__PURE__ */ jsx16("code", {
+        /* @__PURE__ */ jsx15("code", {
           children: "instance"
         }),
         " prop."
@@ -23583,10 +23096,10 @@ function APIPage({
 }) {
   const resolvedSpec = spec ?? instance?.spec;
   if (!resolvedSpec) {
-    return /* @__PURE__ */ jsx16(NoSpec, {});
+    return /* @__PURE__ */ jsx15(NoSpec, {});
   }
   if (!id) {
-    return /* @__PURE__ */ jsx16(ExportIndexPage, {
+    return /* @__PURE__ */ jsx15(ExportIndexPage, {
       spec: resolvedSpec,
       baseHref,
       description
@@ -23594,35 +23107,232 @@ function APIPage({
   }
   const exp = resolvedSpec.exports.find((e) => e.id === id);
   if (!exp) {
-    return /* @__PURE__ */ jsx16(NotFound, {
+    return /* @__PURE__ */ jsx15(NotFound, {
       id
     });
   }
   const pageProps = { export: exp, spec: resolvedSpec, renderExample };
   switch (exp.kind) {
     case "function":
-      return /* @__PURE__ */ jsx16(FunctionPage, {
+      return /* @__PURE__ */ jsx15(FunctionPage, {
         ...pageProps
       });
     case "class":
-      return /* @__PURE__ */ jsx16(ClassPage, {
+      return /* @__PURE__ */ jsx15(ClassPage, {
         ...pageProps
       });
     case "interface":
     case "type":
-      return /* @__PURE__ */ jsx16(InterfacePage, {
+      return /* @__PURE__ */ jsx15(InterfacePage, {
         ...pageProps
       });
     case "enum":
-      return /* @__PURE__ */ jsx16(EnumPage, {
+      return /* @__PURE__ */ jsx15(EnumPage, {
         ...pageProps
       });
     default:
-      return /* @__PURE__ */ jsx16(VariablePage, {
+      return /* @__PURE__ */ jsx15(VariablePage, {
         ...pageProps
       });
   }
 }
+// src/components/styled/ParameterItem.tsx
+import { cn as cn3 } from "@doccov/ui/lib/utils";
+import { useState as useState5 } from "react";
+import { jsx as jsx16, jsxs as jsxs15 } from "react/jsx-runtime";
+
+function getNestedProperties2(schema) {
+  if (!schema || typeof schema !== "object")
+    return null;
+  const s = schema;
+  if (s.type === "object" && s.properties && typeof s.properties === "object") {
+    return s.properties;
+  }
+  return null;
+}
+function getRequiredFields2(schema) {
+  if (!schema || typeof schema !== "object")
+    return [];
+  const s = schema;
+  if (Array.isArray(s.required)) {
+    return s.required;
+  }
+  return [];
+}
+function countProperties2(schema) {
+  const props = getNestedProperties2(schema);
+  return props ? Object.keys(props).length : 0;
+}
+function NestedPropertyItem({
+  name,
+  schema,
+  required = false,
+  depth = 0
+}) {
+  const [expanded, setExpanded] = useState5(false);
+  const type = formatSchema(schema);
+  const nestedProps = getNestedProperties2(schema);
+  const nestedCount = countProperties2(schema);
+  const hasNested = nestedCount > 0;
+  const schemaObj = schema;
+  const description = schemaObj?.description;
+  return /* @__PURE__ */ jsxs15("div", {
+    className: cn3("border-t border-border first:border-t-0", depth > 0 && "ml-4"),
+    children: [
+      /* @__PURE__ */ jsx16("div", {
+        className: "py-3",
+        children: /* @__PURE__ */ jsxs15("div", {
+          className: "flex items-start gap-2",
+          children: [
+            hasNested && /* @__PURE__ */ jsx16("button", {
+              type: "button",
+              onClick: () => setExpanded(!expanded),
+              className: "mt-0.5 p-0.5 text-muted-foreground hover:text-foreground transition-colors cursor-pointer",
+              "aria-label": expanded ? "Collapse" : "Expand",
+              children: /* @__PURE__ */ jsx16(ChevronRight, {
+                size: 14,
+                className: cn3("transition-transform duration-200", expanded && "rotate-90")
+              })
+            }),
+            !hasNested && /* @__PURE__ */ jsx16("div", {
+              className: "w-5"
+            }),
+            /* @__PURE__ */ jsxs15("div", {
+              className: "flex-1 min-w-0",
+              children: [
+                /* @__PURE__ */ jsxs15("div", {
+                  className: "flex items-baseline gap-2 flex-wrap",
+                  children: [
+                    /* @__PURE__ */ jsxs15("span", {
+                      className: "font-mono text-sm text-foreground",
+                      children: [
+                        name,
+                        !required && /* @__PURE__ */ jsx16("span", {
+                          className: "text-muted-foreground",
+                          children: "?"
+                        })
+                      ]
+                    }),
+                    /* @__PURE__ */ jsx16("span", {
+                      className: "font-mono text-sm text-muted-foreground",
+                      children: hasNested ? "object" : type
+                    }),
+                    hasNested && /* @__PURE__ */ jsxs15("button", {
+                      type: "button",
+                      onClick: () => setExpanded(!expanded),
+                      className: "text-xs text-primary hover:underline cursor-pointer",
+                      children: [
+                        nestedCount,
+                        " ",
+                        nestedCount === 1 ? "property" : "properties"
+                      ]
+                    })
+                  ]
+                }),
+                description && /* @__PURE__ */ jsx16("p", {
+                  className: "text-sm text-muted-foreground mt-1",
+                  children: description
+                })
+              ]
+            })
+          ]
+        })
+      }),
+      hasNested && expanded && nestedProps && /* @__PURE__ */ jsx16("div", {
+        className: "border-l border-border ml-2",
+        children: Object.entries(nestedProps).map(([propName, propSchema]) => /* @__PURE__ */ jsx16(NestedPropertyItem, {
+          name: propName,
+          schema: propSchema,
+          required: getRequiredFields2(schema).includes(propName),
+          depth: depth + 1
+        }, propName))
+      })
+    ]
+  });
+}
+function ParameterItem({
+  param,
+  depth = 0,
+  className
+}) {
+  const [expanded, setExpanded] = useState5(false);
+  const type = formatSchema(param.schema);
+  const isRequired = param.required !== false;
+  const nestedProps = getNestedProperties2(param.schema);
+  const nestedCount = countProperties2(param.schema);
+  const hasNested = nestedCount > 0;
+  return /* @__PURE__ */ jsxs15("div", {
+    className: cn3("border-b border-border last:border-b-0", className),
+    children: [
+      /* @__PURE__ */ jsx16("div", {
+        className: "py-3",
+        children: /* @__PURE__ */ jsxs15("div", {
+          className: "flex items-start gap-2",
+          children: [
+            hasNested && /* @__PURE__ */ jsx16("button", {
+              type: "button",
+              onClick: () => setExpanded(!expanded),
+              className: "mt-0.5 p-0.5 text-muted-foreground hover:text-foreground transition-colors cursor-pointer",
+              "aria-label": expanded ? "Collapse" : "Expand",
+              children: /* @__PURE__ */ jsx16(ChevronRight, {
+                size: 14,
+                className: cn3("transition-transform duration-200", expanded && "rotate-90")
+              })
+            }),
+            !hasNested && /* @__PURE__ */ jsx16("div", {
+              className: "w-5"
+            }),
+            /* @__PURE__ */ jsxs15("div", {
+              className: "flex-1 min-w-0",
+              children: [
+                /* @__PURE__ */ jsxs15("div", {
+                  className: "flex items-baseline gap-2 flex-wrap",
+                  children: [
+                    /* @__PURE__ */ jsx16("span", {
+                      className: "font-mono text-sm font-medium text-foreground",
+                      children: param.name
+                    }),
+                    isRequired && /* @__PURE__ */ jsx16("span", {
+                      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__ */ jsx16("span", {
+                      className: "font-mono text-sm text-muted-foreground",
+                      children: hasNested ? "object" : type
+                    }),
+                    hasNested && /* @__PURE__ */ jsxs15("button", {
+                      type: "button",
+                      onClick: () => setExpanded(!expanded),
+                      className: "text-xs text-primary hover:underline cursor-pointer",
+                      children: [
+                        nestedCount,
+                        " ",
+                        nestedCount === 1 ? "property" : "properties"
+                      ]
+                    })
+                  ]
+                }),
+                param.description && /* @__PURE__ */ jsx16("p", {
+                  className: "text-sm text-muted-foreground mt-1",
+                  children: param.description
+                })
+              ]
+            })
+          ]
+        })
+      }),
+      hasNested && expanded && nestedProps && /* @__PURE__ */ jsx16("div", {
+        className: "border-l border-border ml-2 mb-3",
+        children: Object.entries(nestedProps).map(([propName, propSchema]) => /* @__PURE__ */ jsx16(NestedPropertyItem, {
+          name: propName,
+          schema: propSchema,
+          required: getRequiredFields2(param.schema).includes(propName),
+          depth: depth + 1
+        }, propName))
+      })
+    ]
+  });
+}
 export {
   groupMembersByKind,
   getExampleTitle,
@@ -23639,7 +23349,7 @@ export {
   MembersTable,
   MemberRow,
   InterfacePage,
-  ImportSection4 as ImportSection,
+  ImportSection,
   FunctionPage,
   ExportIndexPage,
   ExportCard,
@@ -23647,7 +23357,7 @@ export {
   ExampleBlock,
   EnumPage,
   CollapsibleMethod,
-  CodeTabs4 as CodeTabs,
+  CodeTabs,
   ClassPage,
   APIPage
 };