@openpkg-ts/react 0.2.5 → 0.3.1

package/dist/styled.js

@@ -17,7 +17,7 @@ import {
   getExampleLanguage,
   getExampleTitle,
   groupMembersByKind
-} from "./shared/chunk-j3c78zxw.js";
+} from "./shared/chunk-2t4e6p1b.js";
 
 // ../../node_modules/@swc/helpers/cjs/_interop_require_wildcard.cjs
 var require__interop_require_wildcard = __commonJS((exports) => {
@@ -3167,7 +3167,7 @@ var require_link = __commonJS((exports, module) => {
 });
 
 // src/adapters/spec-to-docskit.ts
-import { formatSchema } from "@openpkg-ts/sdk";
+import { formatSchema } from "@openpkg-ts/sdk/browser";
 function specSchemaToAPISchema(schema) {
   if (!schema || typeof schema !== "object")
     return;
@@ -3292,22 +3292,185 @@ function buildImportStatement(exp, spec) {
   }
   return `import { ${alias} } from '${importPath}'`;
 }
+// src/adapters/spec-to-examples.ts
+function specExampleToCodeExample(example, index) {
+  if (typeof example === "string") {
+    return {
+      id: `example-${index}`,
+      label: `Example ${index + 1}`,
+      code: example,
+      language: "typescript"
+    };
+  }
+  return {
+    id: example.title?.toLowerCase().replace(/\s+/g, "-") ?? `example-${index}`,
+    label: example.title ?? `Example ${index + 1}`,
+    code: example.code,
+    language: mapLanguage(example.language)
+  };
+}
+function specExamplesToCodeExamples2(examples) {
+  if (!examples || examples.length === 0)
+    return [];
+  return examples.map(specExampleToCodeExample);
+}
+function generateDefaultExample(packageName, exportName, paramNames) {
+  const importLine = `import { ${exportName} } from '${packageName}';`;
+  const callArgs = paramNames.length > 0 ? paramNames.join(", ") : "";
+  const callLine = `const result = await ${exportName}(${callArgs});`;
+  return {
+    id: "default",
+    label: "Basic",
+    code: `${importLine}
+
+${callLine}`,
+    language: "typescript"
+  };
+}
+function mapLanguage(lang) {
+  switch (lang) {
+    case "ts":
+    case "tsx":
+      return "typescript";
+    case "js":
+    case "jsx":
+      return "javascript";
+    case "shell":
+      return "bash";
+    case "json":
+      return "json";
+    default:
+      return "typescript";
+  }
+}
+// src/adapters/spec-to-params.ts
+import { formatSchema as formatSchema2 } from "@openpkg-ts/sdk/browser";
+function specParamToNestedParam(param, parentPath) {
+  const schema = param.schema;
+  const type = formatSchema2(schema);
+  const isRequired = param.required !== false;
+  const children = extractNestedProperties(schema, param.name);
+  const enumValues = extractEnumValues(schema);
+  const expandable = children.length > 0;
+  return {
+    name: param.name,
+    parentPath,
+    type: expandable ? "object" : type,
+    required: isRequired,
+    expandable,
+    description: param.description,
+    anchorId: parentPath ? `${parentPath}${param.name}` : param.name,
+    showAnchor: !!parentPath,
+    children: children.length > 0 ? children : undefined,
+    enumValues: enumValues.length > 0 ? enumValues : undefined,
+    schema
+  };
+}
+function specParamsToNestedParams(params) {
+  return params.map((p) => specParamToNestedParam(p));
+}
+function extractNestedProperties(schema, parentName) {
+  if (!schema || typeof schema !== "object")
+    return [];
+  const s = schema;
+  if (s.type === "object" && s.properties && typeof s.properties === "object") {
+    const props = s.properties;
+    const required = Array.isArray(s.required) ? s.required : [];
+    return Object.entries(props).map(([name, propSchema]) => {
+      const propParam = {
+        name,
+        schema: propSchema,
+        required: required.includes(name),
+        description: propSchema?.description
+      };
+      return specParamToNestedParam(propParam, `${parentName}.`);
+    });
+  }
+  return [];
+}
+function extractEnumValues(schema) {
+  if (!schema || typeof schema !== "object")
+    return [];
+  const s = schema;
+  if (Array.isArray(s.enum)) {
+    return s.enum.map((value) => ({
+      value: String(value),
+      description: undefined
+    }));
+  }
+  return [];
+}
+function resolveSchemaRef(schema, types) {
+  if (!schema || typeof schema !== "object")
+    return schema;
+  const s = schema;
+  if (typeof s.$ref === "string") {
+    const refPath = s.$ref;
+    const parts = refPath.split("/");
+    const typeName = parts[parts.length - 1];
+    if (types[typeName]) {
+      return types[typeName];
+    }
+  }
+  return schema;
+}
 // src/components/styled/index.ts
 import {
   CodeTabs,
   ImportSection
 } from "@openpkg-ts/ui/api";
 
+// src/hooks/useMethodFromSpec.ts
+import { buildSignatureString, formatSchema as formatSchema3 } from "@openpkg-ts/sdk/browser";
+import { useMemo } from "react";
+function useMethodFromSpec(spec, exportName) {
+  return useMemo(() => {
+    const exp = spec.exports.find((e) => e.name === exportName);
+    if (!exp)
+      return null;
+    return extractMethodData(exp, spec);
+  }, [spec, exportName]);
+}
+function useMethodsFromSpec(spec) {
+  return useMemo(() => {
+    return spec.exports.filter((exp) => exp.kind === "function").map((exp) => extractMethodData(exp, spec));
+  }, [spec]);
+}
+function extractMethodData(exp, _spec) {
+  const sig = exp.signatures?.[0];
+  const params = sig?.parameters ?? [];
+  const title = exp.kind === "function" ? `${exp.name}()` : exp.name;
+  const signature = buildSignatureString(exp);
+  const description = exp.description || sig?.description;
+  const rawExamples = exp.examples || sig?.examples || [];
+  const examples = rawExamples.map((ex) => typeof ex === "string" ? { code: ex } : ex);
+  const returnType = sig?.returns?.schema;
+  const returnTypeString = returnType ? formatSchema3(returnType) : undefined;
+  const returnDescription = sig?.returns?.description;
+  const isAsync = !!exp.flags?.async;
+  return {
+    export: exp,
+    title,
+    signature,
+    description,
+    parameters: params,
+    examples,
+    returnType,
+    returnTypeString,
+    returnDescription,
+    isAsync
+  };
+}
 // src/components/styled/sections/ClassSection.tsx
-import { formatSchema as formatSchema2 } from "@openpkg-ts/sdk";
+import { formatSchema as formatSchema4 } from "@openpkg-ts/sdk/browser";
 import { APIParameterItem, APISection, ParameterList } from "@openpkg-ts/ui/docskit";
 import { jsx, jsxs } from "react/jsx-runtime";
 
 function formatMethodSignature(member) {
   const sig = member.signatures?.[0];
   const params = sig?.parameters ?? [];
-  const returnType = formatSchema2(sig?.returns?.schema);
-  const paramStr = params.map((p) => `${p.name}${p.required === false ? "?" : ""}: ${formatSchema2(p.schema)}`).join(", ");
+  const returnType = formatSchema4(sig?.returns?.schema);
+  const paramStr = params.map((p) => `${p.name}${p.required === false ? "?" : ""}: ${formatSchema4(p.schema)}`).join(", ");
   return `(${paramStr}): ${returnType}`;
 }
 function getMemberBadges(member) {
@@ -3418,7 +3581,7 @@ const instance = new ${exp.name}(${constructorParams.map((p) => p.name).join(",
             const desc = buildMemberDescription(member);
             return /* @__PURE__ */ jsx(APIParameterItem, {
               name: member.name,
-              type: formatSchema2(member.schema),
+              type: formatSchema4(member.schema),
               description: badges.length > 0 ? `[${badges.join(", ")}] ${desc || ""}` : desc
             }, member.name);
           }),
@@ -3454,7 +3617,7 @@ const instance = new ${exp.name}(${constructorParams.map((p) => p.name).join(",
           const desc = buildMemberDescription(member);
           return /* @__PURE__ */ jsx(APIParameterItem, {
             name: member.name,
-            type: formatSchema2(member.schema),
+            type: formatSchema4(member.schema),
             description: badges.length > 0 ? `[${badges.join(", ")}] ${desc || ""}` : desc
           }, member.name);
         })
@@ -3559,7 +3722,7 @@ function EnumPage({ export: exp, spec }) {
 // src/components/styled/ExportIndexPage.tsx
 import { cn as cn2 } from "@openpkg-ts/ui/lib/utils";
 import { Search } from "lucide-react";
-import { useMemo, useState } from "react";
+import { useMemo as useMemo2, useState } from "react";
 
 // src/components/styled/ExportCard.tsx
 var import_link = __toESM(require_link(), 1);
@@ -3667,8 +3830,8 @@ function ExportIndexPage({
   const [searchQuery, setSearchQuery] = useState("");
   const [activeFilter, setActiveFilter] = useState("all");
   if (false) {}
-  const allGroups = useMemo(() => groupByKind(spec.exports), [spec.exports]);
-  const filteredGroups = useMemo(() => {
+  const allGroups = useMemo2(() => groupByKind(spec.exports), [spec.exports]);
+  const filteredGroups = useMemo2(() => {
     const query = searchQuery.toLowerCase().trim();
     return allGroups.filter((group) => activeFilter === "all" || group.kind === activeFilter).map((group) => ({
       ...group,
@@ -3679,7 +3842,7 @@ function ExportIndexPage({
       })
     })).filter((group) => group.exports.length > 0);
   }, [allGroups, searchQuery, activeFilter]);
-  const availableKinds = useMemo(() => allGroups.map((g) => g.kind), [allGroups]);
+  const availableKinds = useMemo2(() => allGroups.map((g) => g.kind), [allGroups]);
   const totalExports = filteredGroups.reduce((sum, g) => sum + g.exports.length, 0);
   return /* @__PURE__ */ jsxs4("div", {
     className: cn2("doccov-index-page space-y-8 not-prose", className),
@@ -3783,7 +3946,7 @@ function ExportIndexPage({
 }
 
 // src/components/styled/sections/FunctionSection.tsx
-import { formatSchema as formatSchema3 } from "@openpkg-ts/sdk";
+import { formatSchema as formatSchema5 } from "@openpkg-ts/sdk/browser";
 import { APIParameterItem as APIParameterItem3, APISection as APISection3, ParameterList as ParameterList3, ResponseBlock } from "@openpkg-ts/ui/docskit";
 import { jsx as jsx7, jsxs as jsxs5 } from "react/jsx-runtime";
 
@@ -3841,7 +4004,7 @@ ${exp.name}(${sig?.parameters?.map((p) => p.name).join(", ") || ""})`,
           children: [
             /* @__PURE__ */ jsx7("span", {
               className: "font-mono text-sm font-medium",
-              children: formatSchema3(sig.returns.schema)
+              children: formatSchema5(sig.returns.schema)
             }),
             sig.returns.description && /* @__PURE__ */ jsx7("span", {
               className: "ml-2 text-muted-foreground",
@@ -3907,15 +4070,15 @@ function FunctionPage({ export: exp, spec }) {
 }
 
 // src/components/styled/sections/InterfaceSection.tsx
-import { formatSchema as formatSchema4 } from "@openpkg-ts/sdk";
+import { formatSchema as formatSchema6 } from "@openpkg-ts/sdk/browser";
 import { APIParameterItem as APIParameterItem4, APISection as APISection4, ParameterList as ParameterList4 } from "@openpkg-ts/ui/docskit";
 import { jsx as jsx9, jsxs as jsxs6 } from "react/jsx-runtime";
 
 function formatMethodSignature2(member) {
   const sig = member.signatures?.[0];
   const params = sig?.parameters ?? [];
-  const returnType = formatSchema4(sig?.returns?.schema);
-  const paramStr = params.map((p) => `${p.name}${p.required === false ? "?" : ""}: ${formatSchema4(p.schema)}`).join(", ");
+  const returnType = formatSchema6(sig?.returns?.schema);
+  const paramStr = params.map((p) => `${p.name}${p.required === false ? "?" : ""}: ${formatSchema6(p.schema)}`).join(", ");
   return `(${paramStr}): ${returnType}`;
 }
 function formatDecorators2(decorators) {
@@ -3942,7 +4105,7 @@ function InterfaceSection({ export: exp, spec }) {
   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 ? "?" : ""}: ${formatSchema4(p.schema)};`).join(`
+${properties.map((p) => `  ${p.name}${p.required === false ? "?" : ""}: ${formatSchema6(p.schema)};`).join(`
 `)}
 }` : `${exp.kind === "type" ? "type" : "interface"} ${exp.name} { }`;
   const displayExamples = examples.length > 0 ? examples : [
@@ -3994,7 +4157,7 @@ ${typeDefinition}`,
       properties.length > 0 && /* @__PURE__ */ jsx9(ParameterList4, {
         title: "Properties",
         children: properties.map((prop, index) => {
-          const type = formatSchema4(prop.schema);
+          const type = formatSchema6(prop.schema);
           const children = specSchemaToAPISchema(prop.schema);
           const hasNestedProperties = children?.properties && Object.keys(children.properties).length > 0;
           return /* @__PURE__ */ jsx9(APIParameterItem4, {
@@ -4032,12 +4195,12 @@ function InterfacePage({ export: exp, spec }) {
 }
 
 // src/components/styled/sections/VariableSection.tsx
-import { formatSchema as formatSchema5 } from "@openpkg-ts/sdk";
+import { formatSchema as formatSchema7 } from "@openpkg-ts/sdk/browser";
 import { APIParameterItem as APIParameterItem5, APISection as APISection5, ParameterList as ParameterList5 } from "@openpkg-ts/ui/docskit";
 import { jsx as jsx11, jsxs as jsxs7 } from "react/jsx-runtime";
 
 function VariableSection({ export: exp, spec }) {
-  const typeValue = typeof exp.type === "string" ? exp.type : formatSchema5(exp.schema);
+  const typeValue = typeof exp.type === "string" ? exp.type : formatSchema7(exp.schema);
   const languages = getLanguagesFromExamples(exp.examples);
   const examples = specExamplesToCodeExamples(exp.examples);
   const importStatement = buildImportStatement(exp, spec);
@@ -4191,43 +4354,1267 @@ function APIPage({
       });
   }
 }
+// src/components/styled/APIParameterItem.tsx
+import { cn as cn3 } from "@openpkg-ts/ui/lib/utils";
+import { Link as Link2 } from "lucide-react";
+import { jsx as jsx14, jsxs as jsxs9 } from "react/jsx-runtime";
+
+function APIParameterItem6({
+  name,
+  parentPath,
+  type,
+  required,
+  optional,
+  expandable,
+  description,
+  children,
+  anchorId,
+  showAnchor = false,
+  className
+}) {
+  const handleAnchorClick = () => {
+    if (anchorId && typeof window !== "undefined") {
+      window.location.hash = anchorId;
+      navigator.clipboard?.writeText(window.location.href);
+    }
+  };
+  return /* @__PURE__ */ jsxs9("div", {
+    id: anchorId,
+    className: cn3("openpkg-param", "py-5 border-b border-[var(--openpkg-border-subtle,#262626)]", "last:border-b-0", className),
+    children: [
+      /* @__PURE__ */ jsxs9("div", {
+        className: "openpkg-param-header flex items-center gap-2.5 mb-2 flex-wrap",
+        children: [
+          showAnchor && /* @__PURE__ */ jsx14("button", {
+            type: "button",
+            onClick: handleAnchorClick,
+            className: cn3("openpkg-anchor-link", "flex items-center justify-center w-4 h-4", "opacity-0 group-hover:opacity-100 hover:opacity-100", "text-[var(--openpkg-text-muted,#666666)]", "hover:text-[var(--openpkg-accent-blue,#6cb6ff)]", "cursor-pointer transition-opacity"),
+            "aria-label": "Copy link",
+            children: /* @__PURE__ */ jsx14(Link2, {
+              size: 14
+            })
+          }),
+          /* @__PURE__ */ jsxs9("span", {
+            className: "openpkg-param-name font-mono text-sm font-semibold",
+            children: [
+              parentPath && /* @__PURE__ */ jsx14("span", {
+                className: "text-[var(--openpkg-text-muted,#666666)]",
+                children: parentPath
+              }),
+              /* @__PURE__ */ jsx14("span", {
+                className: "text-[var(--openpkg-text-primary,#ededed)]",
+                children: name
+              })
+            ]
+          }),
+          required && /* @__PURE__ */ jsx14("span", {
+            className: cn3("openpkg-param-badge", "text-[11px] font-medium uppercase tracking-wide", "px-2 py-0.5 rounded", "bg-[var(--openpkg-bg-badge,#262626)]", "text-[var(--openpkg-text-muted,#666666)]"),
+            children: "Required"
+          }),
+          optional && /* @__PURE__ */ jsx14("span", {
+            className: cn3("openpkg-param-badge", "text-[11px] font-medium uppercase tracking-wide", "px-2 py-0.5 rounded", "bg-[var(--openpkg-bg-badge,#262626)]", "text-[var(--openpkg-text-muted,#666666)]"),
+            children: "Optional"
+          }),
+          expandable && /* @__PURE__ */ jsx14("span", {
+            className: cn3("openpkg-badge-expandable", "text-[10px] font-medium", "px-2 py-0.5 rounded", "text-[var(--openpkg-accent-purple,#c4a7e7)]", "bg-[rgba(196,167,231,0.12)]"),
+            children: "Expandable"
+          }),
+          /* @__PURE__ */ jsx14("span", {
+            className: "openpkg-param-type text-[13px] text-[var(--openpkg-text-muted,#666666)]",
+            children: type
+          })
+        ]
+      }),
+      description && /* @__PURE__ */ jsx14("p", {
+        className: cn3("openpkg-param-description", "text-sm text-[var(--openpkg-text-secondary,#a0a0a0)]", "leading-relaxed", "[&_code]:font-mono [&_code]:text-[13px] [&_code]:bg-[var(--openpkg-bg-badge,#262626)] [&_code]:px-1.5 [&_code]:py-0.5 [&_code]:rounded"),
+        children: description
+      }),
+      children
+    ]
+  });
+}
+// src/components/styled/APIReferenceLayout.tsx
+import { cn as cn4 } from "@openpkg-ts/ui/lib/utils";
+import { jsx as jsx15, jsxs as jsxs10 } from "react/jsx-runtime";
+
+function APIReferenceLayout({
+  children,
+  examples,
+  className,
+  leftWidth = "58%",
+  rightWidth = "42%"
+}) {
+  return /* @__PURE__ */ jsxs10("div", {
+    className: cn4("openpkg-api-layout", "max-w-[1600px] mx-auto", "flex flex-col", "lg:grid", className),
+    style: {
+      "--openpkg-left-width": leftWidth,
+      "--openpkg-right-width": rightWidth
+    },
+    children: [
+      /* @__PURE__ */ jsx15("div", {
+        className: cn4("openpkg-api-layout-left", "py-8 px-4", "sm:py-10 sm:px-6", "lg:py-12 lg:px-12 lg:pl-16", "lg:border-r lg:border-[var(--openpkg-border-subtle,#262626)]", "openpkg-animate-fade-in"),
+        style: {
+          gridColumn: "1"
+        },
+        children
+      }),
+      /* @__PURE__ */ jsx15("div", {
+        className: cn4("openpkg-api-layout-right", "border-t border-[var(--openpkg-border-subtle,#262626)] lg:border-t-0", "py-8 px-4", "sm:py-10 sm:px-6", "lg:sticky lg:top-0 lg:h-screen lg:overflow-y-auto", "lg:py-12 lg:px-12 lg:pl-8", "bg-[var(--openpkg-bg-root,#0c0c0c)]", "openpkg-animate-fade-in"),
+        style: {
+          gridColumn: "2",
+          animationDelay: "100ms"
+        },
+        children: examples
+      }),
+      /* @__PURE__ */ jsx15("style", {
+        dangerouslySetInnerHTML: {
+          __html: `
+            @media (min-width: 1024px) {
+              .openpkg-api-layout {
+                grid-template-columns: var(--openpkg-left-width, 58%) var(--openpkg-right-width, 42%);
+                align-items: start;
+              }
+            }
+          `
+        }
+      })
+    ]
+  });
+}
+// src/components/styled/CodePanel.tsx
+import { cn as cn5 } from "@openpkg-ts/ui/lib/utils";
+import { useMemo as useMemo3 } from "react";
+import { jsx as jsx16, jsxs as jsxs11 } from "react/jsx-runtime";
+
+function CodePanel({
+  code,
+  language = "typescript",
+  showLineNumbers = false,
+  className
+}) {
+  const lines = useMemo3(() => code.split(`
+`), [code]);
+  const highlightedLines = useMemo3(() => lines.map((line) => highlightLine(line, language)), [lines, language]);
+  return /* @__PURE__ */ jsx16("div", {
+    className: cn5("openpkg-code-panel", "bg-[var(--openpkg-bg-code,#0f0f18)]", "border border-[var(--openpkg-border-subtle,#262626)]", "rounded-lg overflow-hidden", "mb-3", className),
+    children: /* @__PURE__ */ jsx16("div", {
+      className: "openpkg-code-block p-5 overflow-x-auto",
+      children: /* @__PURE__ */ jsx16("pre", {
+        className: cn5("font-mono text-[13px] leading-relaxed", "text-[var(--openpkg-text-code,#e4e4e7)]", "m-0"),
+        children: highlightedLines.map((html, i) => /* @__PURE__ */ jsxs11("div", {
+          className: "openpkg-code-line flex",
+          children: [
+            showLineNumbers && /* @__PURE__ */ jsx16("span", {
+              className: cn5("openpkg-line-number", "w-7 shrink-0", "text-[var(--openpkg-text-muted,#666666)]", "text-right pr-5", "select-none opacity-50"),
+              children: i + 1
+            }),
+            /* @__PURE__ */ jsx16("span", {
+              className: "openpkg-line-content flex-1",
+              dangerouslySetInnerHTML: { __html: html }
+            })
+          ]
+        }, i))
+      })
+    })
+  });
+}
+function highlightLine(line, language) {
+  if (!line.trim())
+    return " ";
+  let result = escapeHtml(line);
+  if (language === "typescript" || language === "javascript" || language === "ts" || language === "js") {
+    result = highlightTS(result);
+  } else if (language === "json") {
+    result = highlightJSON(result);
+  } else if (language === "sql") {
+    result = highlightSQL(result);
+  }
+  return result;
+}
+function escapeHtml(str) {
+  return str.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#039;");
+}
+function highlightTS(line) {
+  line = line.replace(/(\/\/.*$)/g, '<span class="openpkg-syn-comment" style="color:var(--openpkg-syn-comment,#6e6a86);font-style:italic">$1</span>');
+  line = line.replace(/(&#039;[^&#]*&#039;|&quot;[^&]*&quot;|`[^`]*`)/g, '<span class="openpkg-syn-string" style="color:var(--openpkg-syn-string,#9ccfd8)">$1</span>');
+  const keywords = /\b(import|export|from|const|let|var|function|async|await|return|if|else|for|while|class|interface|type|extends|implements|new|this|true|false|null|undefined)\b/g;
+  line = line.replace(keywords, '<span class="openpkg-syn-keyword" style="color:var(--openpkg-syn-keyword,#c4a7e7)">$1</span>');
+  line = line.replace(/\b([a-zA-Z_][a-zA-Z0-9_]*)\s*(?=\()/g, '<span class="openpkg-syn-function" style="color:var(--openpkg-syn-function,#ebbcba)">$1</span>');
+  line = line.replace(/\b(\d+\.?\d*)\b/g, '<span class="openpkg-syn-number" style="color:var(--openpkg-syn-number,#f6c177)">$1</span>');
+  line = line.replace(/([{}[\]();:,.])/g, '<span class="openpkg-syn-punctuation" style="color:var(--openpkg-syn-punctuation,#6e6a86)">$1</span>');
+  return line;
+}
+function highlightJSON(line) {
+  line = line.replace(/(&quot;[^&]+&quot;)\s*:/g, '<span class="openpkg-syn-property" style="color:var(--openpkg-syn-property,#c4a7e7)">$1</span>:');
+  line = line.replace(/:\s*(&quot;[^&]*&quot;)/g, ': <span class="openpkg-syn-string" style="color:var(--openpkg-syn-string,#9ccfd8)">$1</span>');
+  line = line.replace(/:\s*(\d+\.?\d*)/g, ': <span class="openpkg-syn-number" style="color:var(--openpkg-syn-number,#f6c177)">$1</span>');
+  line = line.replace(/:\s*(true|false)/g, ': <span class="openpkg-syn-boolean" style="color:var(--openpkg-syn-boolean,#eb6f92)">$1</span>');
+  line = line.replace(/:\s*(null)/g, ': <span class="openpkg-syn-keyword" style="color:var(--openpkg-syn-keyword,#c4a7e7)">$1</span>');
+  line = line.replace(/([{}[\]:,])/g, '<span class="openpkg-syn-punctuation" style="color:var(--openpkg-syn-punctuation,#6e6a86)">$1</span>');
+  return line;
+}
+function highlightSQL(line) {
+  const keywords = /\b(SELECT|FROM|WHERE|AND|OR|INSERT|INTO|VALUES|UPDATE|SET|DELETE|CREATE|TABLE|INDEX|DROP|ALTER|JOIN|LEFT|RIGHT|INNER|OUTER|ON|AS|ORDER|BY|GROUP|HAVING|LIMIT|OFFSET|PRIMARY|KEY|FOREIGN|REFERENCES|NOT|NULL|DEFAULT|UNIQUE|CHECK|CONSTRAINT)\b/gi;
+  line = line.replace(keywords, '<span class="openpkg-syn-keyword" style="color:var(--openpkg-syn-keyword,#c4a7e7)">$1</span>');
+  line = line.replace(/(&#039;[^&#]*&#039;)/g, '<span class="openpkg-syn-string" style="color:var(--openpkg-syn-string,#9ccfd8)">$1</span>');
+  line = line.replace(/\b(\d+\.?\d*)\b/g, '<span class="openpkg-syn-number" style="color:var(--openpkg-syn-number,#f6c177)">$1</span>');
+  return line;
+}
+// src/components/styled/CollapsiblePanel.tsx
+import { cn as cn6 } from "@openpkg-ts/ui/lib/utils";
+
+// ../../node_modules/@radix-ui/react-collapsible/dist/index.mjs
+import * as React10 from "react";
+
+// ../../node_modules/@radix-ui/primitive/dist/index.mjs
+var canUseDOM = !!(typeof window !== "undefined" && window.document && window.document.createElement);
+function composeEventHandlers(originalEventHandler, ourEventHandler, { checkForDefaultPrevented = true } = {}) {
+  return function handleEvent(event) {
+    originalEventHandler?.(event);
+    if (checkForDefaultPrevented === false || !event.defaultPrevented) {
+      return ourEventHandler?.(event);
+    }
+  };
+}
+
+// ../../node_modules/@radix-ui/react-context/dist/index.mjs
+import * as React from "react";
+import { jsx as jsx17 } from "react/jsx-runtime";
+function createContextScope(scopeName, createContextScopeDeps = []) {
+  let defaultContexts = [];
+  function createContext3(rootComponentName, defaultContext) {
+    const BaseContext = React.createContext(defaultContext);
+    const index = defaultContexts.length;
+    defaultContexts = [...defaultContexts, defaultContext];
+    const Provider = (props) => {
+      const { scope, children, ...context } = props;
+      const Context = scope?.[scopeName]?.[index] || BaseContext;
+      const value = React.useMemo(() => context, Object.values(context));
+      return /* @__PURE__ */ jsx17(Context.Provider, { value, children });
+    };
+    Provider.displayName = rootComponentName + "Provider";
+    function useContext2(consumerName, scope) {
+      const Context = scope?.[scopeName]?.[index] || BaseContext;
+      const context = React.useContext(Context);
+      if (context)
+        return context;
+      if (defaultContext !== undefined)
+        return defaultContext;
+      throw new Error(`\`${consumerName}\` must be used within \`${rootComponentName}\``);
+    }
+    return [Provider, useContext2];
+  }
+  const createScope = () => {
+    const scopeContexts = defaultContexts.map((defaultContext) => {
+      return React.createContext(defaultContext);
+    });
+    return function useScope(scope) {
+      const contexts = scope?.[scopeName] || scopeContexts;
+      return React.useMemo(() => ({ [`__scope${scopeName}`]: { ...scope, [scopeName]: contexts } }), [scope, contexts]);
+    };
+  };
+  createScope.scopeName = scopeName;
+  return [createContext3, composeContextScopes(createScope, ...createContextScopeDeps)];
+}
+function composeContextScopes(...scopes) {
+  const baseScope = scopes[0];
+  if (scopes.length === 1)
+    return baseScope;
+  const createScope = () => {
+    const scopeHooks = scopes.map((createScope2) => ({
+      useScope: createScope2(),
+      scopeName: createScope2.scopeName
+    }));
+    return function useComposedScopes(overrideScopes) {
+      const nextScopes = scopeHooks.reduce((nextScopes2, { useScope, scopeName }) => {
+        const scopeProps = useScope(overrideScopes);
+        const currentScope = scopeProps[`__scope${scopeName}`];
+        return { ...nextScopes2, ...currentScope };
+      }, {});
+      return React.useMemo(() => ({ [`__scope${baseScope.scopeName}`]: nextScopes }), [nextScopes]);
+    };
+  };
+  createScope.scopeName = baseScope.scopeName;
+  return createScope;
+}
+
+// ../../node_modules/@radix-ui/react-use-controllable-state/dist/index.mjs
+import * as React4 from "react";
+
+// ../../node_modules/@radix-ui/react-use-layout-effect/dist/index.mjs
+import * as React2 from "react";
+var useLayoutEffect2 = globalThis?.document ? React2.useLayoutEffect : () => {};
+
+// ../../node_modules/@radix-ui/react-use-controllable-state/dist/index.mjs
+import * as React22 from "react";
+
+// ../../node_modules/@radix-ui/react-use-effect-event/dist/index.mjs
+import * as React3 from "react";
+var useReactEffectEvent = React3[" useEffectEvent ".trim().toString()];
+var useReactInsertionEffect = React3[" useInsertionEffect ".trim().toString()];
+
+// ../../node_modules/@radix-ui/react-use-controllable-state/dist/index.mjs
+var useInsertionEffect = React4[" useInsertionEffect ".trim().toString()] || useLayoutEffect2;
+function useControllableState({
+  prop,
+  defaultProp,
+  onChange = () => {},
+  caller
+}) {
+  const [uncontrolledProp, setUncontrolledProp, onChangeRef] = useUncontrolledState({
+    defaultProp,
+    onChange
+  });
+  const isControlled = prop !== undefined;
+  const value = isControlled ? prop : uncontrolledProp;
+  if (true) {
+    const isControlledRef = React4.useRef(prop !== undefined);
+    React4.useEffect(() => {
+      const wasControlled = isControlledRef.current;
+      if (wasControlled !== isControlled) {
+        const from = wasControlled ? "controlled" : "uncontrolled";
+        const to = isControlled ? "controlled" : "uncontrolled";
+        console.warn(`${caller} is changing from ${from} to ${to}. Components should not switch from controlled to uncontrolled (or vice versa). Decide between using a controlled or uncontrolled value for the lifetime of the component.`);
+      }
+      isControlledRef.current = isControlled;
+    }, [isControlled, caller]);
+  }
+  const setValue = React4.useCallback((nextValue) => {
+    if (isControlled) {
+      const value2 = isFunction(nextValue) ? nextValue(prop) : nextValue;
+      if (value2 !== prop) {
+        onChangeRef.current?.(value2);
+      }
+    } else {
+      setUncontrolledProp(nextValue);
+    }
+  }, [isControlled, prop, setUncontrolledProp, onChangeRef]);
+  return [value, setValue];
+}
+function useUncontrolledState({
+  defaultProp,
+  onChange
+}) {
+  const [value, setValue] = React4.useState(defaultProp);
+  const prevValueRef = React4.useRef(value);
+  const onChangeRef = React4.useRef(onChange);
+  useInsertionEffect(() => {
+    onChangeRef.current = onChange;
+  }, [onChange]);
+  React4.useEffect(() => {
+    if (prevValueRef.current !== value) {
+      onChangeRef.current?.(value);
+      prevValueRef.current = value;
+    }
+  }, [value, prevValueRef]);
+  return [value, setValue, onChangeRef];
+}
+function isFunction(value) {
+  return typeof value === "function";
+}
+var SYNC_STATE = Symbol("RADIX:SYNC_STATE");
+
+// ../../node_modules/@radix-ui/react-compose-refs/dist/index.mjs
+import * as React5 from "react";
+function setRef(ref, value) {
+  if (typeof ref === "function") {
+    return ref(value);
+  } else if (ref !== null && ref !== undefined) {
+    ref.current = value;
+  }
+}
+function composeRefs(...refs) {
+  return (node) => {
+    let hasCleanup = false;
+    const cleanups = refs.map((ref) => {
+      const cleanup = setRef(ref, node);
+      if (!hasCleanup && typeof cleanup == "function") {
+        hasCleanup = true;
+      }
+      return cleanup;
+    });
+    if (hasCleanup) {
+      return () => {
+        for (let i = 0;i < cleanups.length; i++) {
+          const cleanup = cleanups[i];
+          if (typeof cleanup == "function") {
+            cleanup();
+          } else {
+            setRef(refs[i], null);
+          }
+        }
+      };
+    }
+  };
+}
+function useComposedRefs(...refs) {
+  return React5.useCallback(composeRefs(...refs), refs);
+}
+
+// ../../node_modules/@radix-ui/react-primitive/dist/index.mjs
+import * as React7 from "react";
+import * as ReactDOM from "react-dom";
+
+// ../../node_modules/@radix-ui/react-primitive/node_modules/@radix-ui/react-slot/dist/index.mjs
+import * as React6 from "react";
+import { Fragment as Fragment2, jsx as jsx18 } from "react/jsx-runtime";
+function createSlot(ownerName) {
+  const SlotClone = /* @__PURE__ */ createSlotClone(ownerName);
+  const Slot2 = React6.forwardRef((props, forwardedRef) => {
+    const { children, ...slotProps } = props;
+    const childrenArray = React6.Children.toArray(children);
+    const slottable = childrenArray.find(isSlottable);
+    if (slottable) {
+      const newElement = slottable.props.children;
+      const newChildren = childrenArray.map((child) => {
+        if (child === slottable) {
+          if (React6.Children.count(newElement) > 1)
+            return React6.Children.only(null);
+          return React6.isValidElement(newElement) ? newElement.props.children : null;
+        } else {
+          return child;
+        }
+      });
+      return /* @__PURE__ */ jsx18(SlotClone, { ...slotProps, ref: forwardedRef, children: React6.isValidElement(newElement) ? React6.cloneElement(newElement, undefined, newChildren) : null });
+    }
+    return /* @__PURE__ */ jsx18(SlotClone, { ...slotProps, ref: forwardedRef, children });
+  });
+  Slot2.displayName = `${ownerName}.Slot`;
+  return Slot2;
+}
+function createSlotClone(ownerName) {
+  const SlotClone = React6.forwardRef((props, forwardedRef) => {
+    const { children, ...slotProps } = props;
+    if (React6.isValidElement(children)) {
+      const childrenRef = getElementRef(children);
+      const props2 = mergeProps(slotProps, children.props);
+      if (children.type !== React6.Fragment) {
+        props2.ref = forwardedRef ? composeRefs(forwardedRef, childrenRef) : childrenRef;
+      }
+      return React6.cloneElement(children, props2);
+    }
+    return React6.Children.count(children) > 1 ? React6.Children.only(null) : null;
+  });
+  SlotClone.displayName = `${ownerName}.SlotClone`;
+  return SlotClone;
+}
+var SLOTTABLE_IDENTIFIER = Symbol("radix.slottable");
+function isSlottable(child) {
+  return React6.isValidElement(child) && typeof child.type === "function" && "__radixId" in child.type && child.type.__radixId === SLOTTABLE_IDENTIFIER;
+}
+function mergeProps(slotProps, childProps) {
+  const overrideProps = { ...childProps };
+  for (const propName in childProps) {
+    const slotPropValue = slotProps[propName];
+    const childPropValue = childProps[propName];
+    const isHandler = /^on[A-Z]/.test(propName);
+    if (isHandler) {
+      if (slotPropValue && childPropValue) {
+        overrideProps[propName] = (...args) => {
+          const result = childPropValue(...args);
+          slotPropValue(...args);
+          return result;
+        };
+      } else if (slotPropValue) {
+        overrideProps[propName] = slotPropValue;
+      }
+    } else if (propName === "style") {
+      overrideProps[propName] = { ...slotPropValue, ...childPropValue };
+    } else if (propName === "className") {
+      overrideProps[propName] = [slotPropValue, childPropValue].filter(Boolean).join(" ");
+    }
+  }
+  return { ...slotProps, ...overrideProps };
+}
+function getElementRef(element) {
+  let getter = Object.getOwnPropertyDescriptor(element.props, "ref")?.get;
+  let mayWarn = getter && "isReactWarning" in getter && getter.isReactWarning;
+  if (mayWarn) {
+    return element.ref;
+  }
+  getter = Object.getOwnPropertyDescriptor(element, "ref")?.get;
+  mayWarn = getter && "isReactWarning" in getter && getter.isReactWarning;
+  if (mayWarn) {
+    return element.props.ref;
+  }
+  return element.props.ref || element.ref;
+}
+
+// ../../node_modules/@radix-ui/react-primitive/dist/index.mjs
+import { jsx as jsx19 } from "react/jsx-runtime";
+var NODES = [
+  "a",
+  "button",
+  "div",
+  "form",
+  "h2",
+  "h3",
+  "img",
+  "input",
+  "label",
+  "li",
+  "nav",
+  "ol",
+  "p",
+  "select",
+  "span",
+  "svg",
+  "ul"
+];
+var Primitive = NODES.reduce((primitive, node) => {
+  const Slot = createSlot(`Primitive.${node}`);
+  const Node = React7.forwardRef((props, forwardedRef) => {
+    const { asChild, ...primitiveProps } = props;
+    const Comp = asChild ? Slot : node;
+    if (typeof window !== "undefined") {
+      window[Symbol.for("radix-ui")] = true;
+    }
+    return /* @__PURE__ */ jsx19(Comp, { ...primitiveProps, ref: forwardedRef });
+  });
+  Node.displayName = `Primitive.${node}`;
+  return { ...primitive, [node]: Node };
+}, {});
+
+// ../../node_modules/@radix-ui/react-presence/dist/index.mjs
+import * as React23 from "react";
+import * as React8 from "react";
+
+function useStateMachine(initialState, machine) {
+  return React8.useReducer((state, event) => {
+    const nextState = machine[state][event];
+    return nextState ?? state;
+  }, initialState);
+}
+var Presence = (props) => {
+  const { present, children } = props;
+  const presence = usePresence(present);
+  const child = typeof children === "function" ? children({ present: presence.isPresent }) : React23.Children.only(children);
+  const ref = useComposedRefs(presence.ref, getElementRef2(child));
+  const forceMount = typeof children === "function";
+  return forceMount || presence.isPresent ? React23.cloneElement(child, { ref }) : null;
+};
+Presence.displayName = "Presence";
+function usePresence(present) {
+  const [node, setNode] = React23.useState();
+  const stylesRef = React23.useRef(null);
+  const prevPresentRef = React23.useRef(present);
+  const prevAnimationNameRef = React23.useRef("none");
+  const initialState = present ? "mounted" : "unmounted";
+  const [state, send] = useStateMachine(initialState, {
+    mounted: {
+      UNMOUNT: "unmounted",
+      ANIMATION_OUT: "unmountSuspended"
+    },
+    unmountSuspended: {
+      MOUNT: "mounted",
+      ANIMATION_END: "unmounted"
+    },
+    unmounted: {
+      MOUNT: "mounted"
+    }
+  });
+  React23.useEffect(() => {
+    const currentAnimationName = getAnimationName(stylesRef.current);
+    prevAnimationNameRef.current = state === "mounted" ? currentAnimationName : "none";
+  }, [state]);
+  useLayoutEffect2(() => {
+    const styles = stylesRef.current;
+    const wasPresent = prevPresentRef.current;
+    const hasPresentChanged = wasPresent !== present;
+    if (hasPresentChanged) {
+      const prevAnimationName = prevAnimationNameRef.current;
+      const currentAnimationName = getAnimationName(styles);
+      if (present) {
+        send("MOUNT");
+      } else if (currentAnimationName === "none" || styles?.display === "none") {
+        send("UNMOUNT");
+      } else {
+        const isAnimating = prevAnimationName !== currentAnimationName;
+        if (wasPresent && isAnimating) {
+          send("ANIMATION_OUT");
+        } else {
+          send("UNMOUNT");
+        }
+      }
+      prevPresentRef.current = present;
+    }
+  }, [present, send]);
+  useLayoutEffect2(() => {
+    if (node) {
+      let timeoutId;
+      const ownerWindow = node.ownerDocument.defaultView ?? window;
+      const handleAnimationEnd = (event) => {
+        const currentAnimationName = getAnimationName(stylesRef.current);
+        const isCurrentAnimation = currentAnimationName.includes(CSS.escape(event.animationName));
+        if (event.target === node && isCurrentAnimation) {
+          send("ANIMATION_END");
+          if (!prevPresentRef.current) {
+            const currentFillMode = node.style.animationFillMode;
+            node.style.animationFillMode = "forwards";
+            timeoutId = ownerWindow.setTimeout(() => {
+              if (node.style.animationFillMode === "forwards") {
+                node.style.animationFillMode = currentFillMode;
+              }
+            });
+          }
+        }
+      };
+      const handleAnimationStart = (event) => {
+        if (event.target === node) {
+          prevAnimationNameRef.current = getAnimationName(stylesRef.current);
+        }
+      };
+      node.addEventListener("animationstart", handleAnimationStart);
+      node.addEventListener("animationcancel", handleAnimationEnd);
+      node.addEventListener("animationend", handleAnimationEnd);
+      return () => {
+        ownerWindow.clearTimeout(timeoutId);
+        node.removeEventListener("animationstart", handleAnimationStart);
+        node.removeEventListener("animationcancel", handleAnimationEnd);
+        node.removeEventListener("animationend", handleAnimationEnd);
+      };
+    } else {
+      send("ANIMATION_END");
+    }
+  }, [node, send]);
+  return {
+    isPresent: ["mounted", "unmountSuspended"].includes(state),
+    ref: React23.useCallback((node2) => {
+      stylesRef.current = node2 ? getComputedStyle(node2) : null;
+      setNode(node2);
+    }, [])
+  };
+}
+function getAnimationName(styles) {
+  return styles?.animationName || "none";
+}
+function getElementRef2(element) {
+  let getter = Object.getOwnPropertyDescriptor(element.props, "ref")?.get;
+  let mayWarn = getter && "isReactWarning" in getter && getter.isReactWarning;
+  if (mayWarn) {
+    return element.ref;
+  }
+  getter = Object.getOwnPropertyDescriptor(element, "ref")?.get;
+  mayWarn = getter && "isReactWarning" in getter && getter.isReactWarning;
+  if (mayWarn) {
+    return element.props.ref;
+  }
+  return element.props.ref || element.ref;
+}
+
+// ../../node_modules/@radix-ui/react-id/dist/index.mjs
+import * as React9 from "react";
+var useReactId = React9[" useId ".trim().toString()] || (() => {
+  return;
+});
+var count = 0;
+function useId(deterministicId) {
+  const [id, setId] = React9.useState(useReactId());
+  useLayoutEffect2(() => {
+    if (!deterministicId)
+      setId((reactId) => reactId ?? String(count++));
+  }, [deterministicId]);
+  return deterministicId || (id ? `radix-${id}` : "");
+}
+
+// ../../node_modules/@radix-ui/react-collapsible/dist/index.mjs
+import { jsx as jsx20 } from "react/jsx-runtime";
+
+var COLLAPSIBLE_NAME = "Collapsible";
+var [createCollapsibleContext, createCollapsibleScope] = createContextScope(COLLAPSIBLE_NAME);
+var [CollapsibleProvider, useCollapsibleContext] = createCollapsibleContext(COLLAPSIBLE_NAME);
+var Collapsible = React10.forwardRef((props, forwardedRef) => {
+  const {
+    __scopeCollapsible,
+    open: openProp,
+    defaultOpen,
+    disabled,
+    onOpenChange,
+    ...collapsibleProps
+  } = props;
+  const [open, setOpen] = useControllableState({
+    prop: openProp,
+    defaultProp: defaultOpen ?? false,
+    onChange: onOpenChange,
+    caller: COLLAPSIBLE_NAME
+  });
+  return /* @__PURE__ */ jsx20(CollapsibleProvider, {
+    scope: __scopeCollapsible,
+    disabled,
+    contentId: useId(),
+    open,
+    onOpenToggle: React10.useCallback(() => setOpen((prevOpen) => !prevOpen), [setOpen]),
+    children: /* @__PURE__ */ jsx20(Primitive.div, {
+      "data-state": getState(open),
+      "data-disabled": disabled ? "" : undefined,
+      ...collapsibleProps,
+      ref: forwardedRef
+    })
+  });
+});
+Collapsible.displayName = COLLAPSIBLE_NAME;
+var TRIGGER_NAME = "CollapsibleTrigger";
+var CollapsibleTrigger = React10.forwardRef((props, forwardedRef) => {
+  const { __scopeCollapsible, ...triggerProps } = props;
+  const context = useCollapsibleContext(TRIGGER_NAME, __scopeCollapsible);
+  return /* @__PURE__ */ jsx20(Primitive.button, {
+    type: "button",
+    "aria-controls": context.contentId,
+    "aria-expanded": context.open || false,
+    "data-state": getState(context.open),
+    "data-disabled": context.disabled ? "" : undefined,
+    disabled: context.disabled,
+    ...triggerProps,
+    ref: forwardedRef,
+    onClick: composeEventHandlers(props.onClick, context.onOpenToggle)
+  });
+});
+CollapsibleTrigger.displayName = TRIGGER_NAME;
+var CONTENT_NAME = "CollapsibleContent";
+var CollapsibleContent = React10.forwardRef((props, forwardedRef) => {
+  const { forceMount, ...contentProps } = props;
+  const context = useCollapsibleContext(CONTENT_NAME, props.__scopeCollapsible);
+  return /* @__PURE__ */ jsx20(Presence, { present: forceMount || context.open, children: ({ present }) => /* @__PURE__ */ jsx20(CollapsibleContentImpl, { ...contentProps, ref: forwardedRef, present }) });
+});
+CollapsibleContent.displayName = CONTENT_NAME;
+var CollapsibleContentImpl = React10.forwardRef((props, forwardedRef) => {
+  const { __scopeCollapsible, present, children, ...contentProps } = props;
+  const context = useCollapsibleContext(CONTENT_NAME, __scopeCollapsible);
+  const [isPresent, setIsPresent] = React10.useState(present);
+  const ref = React10.useRef(null);
+  const composedRefs = useComposedRefs(forwardedRef, ref);
+  const heightRef = React10.useRef(0);
+  const height = heightRef.current;
+  const widthRef = React10.useRef(0);
+  const width = widthRef.current;
+  const isOpen = context.open || isPresent;
+  const isMountAnimationPreventedRef = React10.useRef(isOpen);
+  const originalStylesRef = React10.useRef(undefined);
+  React10.useEffect(() => {
+    const rAF = requestAnimationFrame(() => isMountAnimationPreventedRef.current = false);
+    return () => cancelAnimationFrame(rAF);
+  }, []);
+  useLayoutEffect2(() => {
+    const node = ref.current;
+    if (node) {
+      originalStylesRef.current = originalStylesRef.current || {
+        transitionDuration: node.style.transitionDuration,
+        animationName: node.style.animationName
+      };
+      node.style.transitionDuration = "0s";
+      node.style.animationName = "none";
+      const rect = node.getBoundingClientRect();
+      heightRef.current = rect.height;
+      widthRef.current = rect.width;
+      if (!isMountAnimationPreventedRef.current) {
+        node.style.transitionDuration = originalStylesRef.current.transitionDuration;
+        node.style.animationName = originalStylesRef.current.animationName;
+      }
+      setIsPresent(present);
+    }
+  }, [context.open, present]);
+  return /* @__PURE__ */ jsx20(Primitive.div, {
+    "data-state": getState(context.open),
+    "data-disabled": context.disabled ? "" : undefined,
+    id: context.contentId,
+    hidden: !isOpen,
+    ...contentProps,
+    ref: composedRefs,
+    style: {
+      [`--radix-collapsible-content-height`]: height ? `${height}px` : undefined,
+      [`--radix-collapsible-content-width`]: width ? `${width}px` : undefined,
+      ...props.style
+    },
+    children: isOpen && children
+  });
+});
+function getState(open) {
+  return open ? "open" : "closed";
+}
+var Root = Collapsible;
+var Trigger = CollapsibleTrigger;
+var Content = CollapsibleContent;
+
+// src/components/styled/CollapsiblePanel.tsx
+import { ChevronRight } from "lucide-react";
+import { useState as useState6 } from "react";
+import { jsx as jsx21, jsxs as jsxs12 } from "react/jsx-runtime";
+
+function CollapsiblePanel({
+  title,
+  children,
+  defaultExpanded = false,
+  expanded: controlledExpanded,
+  onExpandedChange,
+  className
+}) {
+  const [internalExpanded, setInternalExpanded] = useState6(defaultExpanded);
+  const isControlled = controlledExpanded !== undefined;
+  const expanded = isControlled ? controlledExpanded : internalExpanded;
+  const handleOpenChange = (open) => {
+    if (isControlled) {
+      onExpandedChange?.(open);
+    } else {
+      setInternalExpanded(open);
+    }
+  };
+  return /* @__PURE__ */ jsxs12(Root, {
+    open: expanded,
+    onOpenChange: handleOpenChange,
+    className: cn6("openpkg-collapsible-panel", className),
+    children: [
+      /* @__PURE__ */ jsxs12(Trigger, {
+        className: cn6("openpkg-collapsible-trigger", "flex items-center gap-2.5 w-full", "px-4 py-3", "bg-[var(--openpkg-bg-collapsible,#161616)]", "border border-[var(--openpkg-border-subtle,#262626)]", "rounded-md", "cursor-pointer", "transition-all duration-150", "hover:bg-[var(--openpkg-bg-tertiary,#1c1c1c)]", expanded && "rounded-b-none border-b-transparent mb-0", !expanded && "mb-2"),
+        children: [
+          /* @__PURE__ */ jsx21(ChevronRight, {
+            size: 14,
+            className: cn6("text-[var(--openpkg-text-muted,#666666)]", "transition-transform duration-200", expanded && "rotate-90")
+          }),
+          /* @__PURE__ */ jsx21("span", {
+            className: "text-[13px] font-medium text-[var(--openpkg-text-secondary,#a0a0a0)]",
+            children: title
+          })
+        ]
+      }),
+      /* @__PURE__ */ jsx21(Content, {
+        className: cn6("openpkg-collapsible-content", "bg-[var(--openpkg-bg-code,#0f0f18)]", "border border-[var(--openpkg-border-subtle,#262626)]", "border-t-0", "rounded-b-md", "mb-2", "overflow-hidden", "data-[state=open]:animate-[openpkg-expand_200ms_ease-out]", "data-[state=closed]:animate-[openpkg-collapse_200ms_ease-out]"),
+        children
+      })
+    ]
+  });
+}
+// src/components/styled/EnumValuesSection.tsx
+import { cn as cn7 } from "@openpkg-ts/ui/lib/utils";
+import { jsx as jsx22, jsxs as jsxs13 } from "react/jsx-runtime";
+
+function EnumValuesSection({
+  values,
+  header = "Possible values",
+  className
+}) {
+  if (values.length === 0)
+    return null;
+  return /* @__PURE__ */ jsxs13("div", {
+    className: cn7("openpkg-enum-section", "mt-3", className),
+    children: [
+      /* @__PURE__ */ jsx22("div", {
+        className: cn7("openpkg-enum-header", "text-[11px] font-medium", "text-[var(--openpkg-text-muted,#666666)]", "mb-2.5 pb-2", "border-b border-[var(--openpkg-border-subtle,#262626)]"),
+        children: header
+      }),
+      /* @__PURE__ */ jsx22("div", {
+        className: "openpkg-enum-values flex flex-col gap-0.5",
+        children: values.map((item) => /* @__PURE__ */ jsxs13("div", {
+          className: cn7("openpkg-enum-value", "py-2.5 px-3", "bg-[rgba(255,255,255,0.015)]", "rounded"),
+          children: [
+            /* @__PURE__ */ jsx22("span", {
+              className: cn7("openpkg-enum-value-name", "font-mono text-xs font-medium", "text-[var(--openpkg-syn-string,#9ccfd8)]", "bg-[rgba(156,207,216,0.1)]", "px-1.5 py-0.5 rounded", "inline-block mb-1"),
+              children: item.value
+            }),
+            item.description && /* @__PURE__ */ jsx22("p", {
+              className: cn7("openpkg-enum-value-description", "text-xs text-[var(--openpkg-text-secondary,#a0a0a0)]", "leading-relaxed", "[&_code]:font-mono [&_code]:text-[11px] [&_code]:bg-[var(--openpkg-bg-badge,#262626)] [&_code]:px-1 [&_code]:py-0.5 [&_code]:rounded"),
+              children: item.description
+            })
+          ]
+        }, item.value))
+      })
+    ]
+  });
+}
+// src/components/styled/ExampleChips.tsx
+import { cn as cn8 } from "@openpkg-ts/ui/lib/utils";
+import { jsx as jsx23 } from "react/jsx-runtime";
+
+function ExampleChips({
+  examples,
+  activeId,
+  onSelect,
+  className
+}) {
+  return /* @__PURE__ */ jsx23("div", {
+    className: cn8("openpkg-example-chips", "flex flex-wrap gap-2 mb-5", className),
+    children: examples.map((example) => {
+      const isActive = example.id === activeId;
+      return /* @__PURE__ */ jsx23("button", {
+        type: "button",
+        onClick: () => onSelect(example.id),
+        className: cn8("openpkg-example-chip", "text-xs font-medium", "px-3 py-1.5", "border rounded-md", "cursor-pointer", "transition-all duration-150", isActive ? [
+          "border-[var(--openpkg-border-chip-active,#666666)]",
+          "text-[var(--openpkg-text-primary,#ededed)]",
+          "bg-[var(--openpkg-bg-tertiary,#1c1c1c)]"
+        ] : [
+          "border-[var(--openpkg-border-chip,#333333)]",
+          "text-[var(--openpkg-text-secondary,#a0a0a0)]",
+          "bg-transparent",
+          "hover:border-[var(--openpkg-text-muted,#666666)]",
+          "hover:text-[var(--openpkg-text-primary,#ededed)]"
+        ]),
+        "aria-pressed": isActive,
+        children: example.label
+      }, example.id);
+    })
+  });
+}
+// src/components/styled/ExampleSection.tsx
+import { cn as cn9 } from "@openpkg-ts/ui/lib/utils";
+import { useEffect as useEffect6, useRef as useRef7, useState as useState8 } from "react";
+
+// src/components/styled/SyncScrollProvider.tsx
+import {
+  createContext as createContext2,
+  useCallback as useCallback5,
+  useContext as useContext2,
+  useEffect as useEffect5,
+  useMemo as useMemo7,
+  useRef as useRef6,
+  useState as useState7
+} from "react";
+import { jsx as jsx24 } from "react/jsx-runtime";
+
+var SyncScrollContext = createContext2(null);
+function SyncScrollProvider({
+  children,
+  rootMargin = "-20% 0px -60% 0px",
+  scrollBehavior = "smooth"
+}) {
+  const [activeSection, setActiveSection] = useState7(null);
+  const sectionsRef = useRef6(new Map);
+  const rightColumnRef = useRef6(null);
+  const isScrollingRef = useRef6(false);
+  const registerSection = useCallback5((id, ref) => {
+    sectionsRef.current.set(id, ref);
+  }, []);
+  const unregisterSection = useCallback5((id) => {
+    sectionsRef.current.delete(id);
+  }, []);
+  const registerRightColumn = useCallback5((ref) => {
+    rightColumnRef.current = ref;
+  }, []);
+  const scrollToSection = useCallback5((id) => {
+    const rightColumn = rightColumnRef.current?.current;
+    if (!rightColumn)
+      return;
+    const targetExample = rightColumn.querySelector(`[data-section="${id}"]`);
+    if (targetExample instanceof HTMLElement) {
+      const targetTop = targetExample.offsetTop - 48;
+      rightColumn.scrollTo({ top: targetTop, behavior: scrollBehavior });
+    }
+  }, [scrollBehavior]);
+  useEffect5(() => {
+    if (typeof window === "undefined")
+      return;
+    const handleIntersect = (entries) => {
+      if (isScrollingRef.current)
+        return;
+      for (const entry of entries) {
+        if (entry.isIntersecting) {
+          const sectionId = entry.target.getAttribute("data-section");
+          if (sectionId) {
+            setActiveSection(sectionId);
+            scrollToSection(sectionId);
+          }
+          break;
+        }
+      }
+    };
+    const observer = new IntersectionObserver(handleIntersect, {
+      rootMargin,
+      threshold: 0
+    });
+    for (const [_id, ref] of sectionsRef.current) {
+      if (ref.current) {
+        observer.observe(ref.current);
+      }
+    }
+    return () => {
+      observer.disconnect();
+    };
+  }, [rootMargin, scrollToSection]);
+  const value = useMemo7(() => ({
+    activeSection,
+    registerSection,
+    unregisterSection,
+    scrollToSection,
+    registerRightColumn
+  }), [activeSection, registerSection, unregisterSection, scrollToSection, registerRightColumn]);
+  return /* @__PURE__ */ jsx24(SyncScrollContext.Provider, {
+    value,
+    children
+  });
+}
+function useSyncScroll() {
+  const context = useContext2(SyncScrollContext);
+  if (!context) {
+    throw new Error("useSyncScroll must be used within SyncScrollProvider");
+  }
+  return context;
+}
+function useSyncSection(id) {
+  const { registerSection, unregisterSection } = useSyncScroll();
+  const ref = useRef6(null);
+  useEffect5(() => {
+    registerSection(id, ref);
+    return () => unregisterSection(id);
+  }, [id, registerSection, unregisterSection]);
+  return ref;
+}
+
+// src/components/styled/ExampleSection.tsx
+import { jsx as jsx25, jsxs as jsxs14 } from "react/jsx-runtime";
+
+function ExampleSection({
+  id,
+  examples,
+  dataSource,
+  response,
+  notes,
+  className
+}) {
+  const [activeExampleId, setActiveExampleId] = useState8(examples[0]?.id ?? "");
+  const ref = useRef7(null);
+  const syncScroll = useSyncScrollSafe();
+  const activeExample = examples.find((e) => e.id === activeExampleId) ?? examples[0];
+  const isActive = syncScroll?.activeSection === id;
+  useEffect6(() => {
+    if (ref.current) {
+      ref.current.setAttribute("data-section", id);
+    }
+  }, [id]);
+  return /* @__PURE__ */ jsxs14("div", {
+    ref,
+    "data-section": id,
+    className: cn9("openpkg-example-section", "mb-12 last:mb-0", "transition-opacity duration-300", isActive ? "opacity-100" : "opacity-40", className),
+    children: [
+      examples.length > 1 && /* @__PURE__ */ jsx25(ExampleChips, {
+        examples: examples.map((e) => ({ id: e.id, label: e.label })),
+        activeId: activeExampleId,
+        onSelect: setActiveExampleId
+      }),
+      activeExample && /* @__PURE__ */ jsx25(CodePanel, {
+        code: activeExample.code,
+        language: activeExample.language ?? "typescript",
+        showLineNumbers: true
+      }),
+      dataSource && /* @__PURE__ */ jsx25(CollapsiblePanel, {
+        title: "Data source",
+        children: /* @__PURE__ */ jsx25("div", {
+          className: "p-4",
+          children: /* @__PURE__ */ jsx25(CodePanel, {
+            code: dataSource,
+            language: "sql"
+          })
+        })
+      }),
+      response && /* @__PURE__ */ jsx25(CollapsiblePanel, {
+        title: "Response",
+        children: /* @__PURE__ */ jsx25("div", {
+          className: "p-4",
+          children: /* @__PURE__ */ jsx25(CodePanel, {
+            code: response,
+            language: "json"
+          })
+        })
+      }),
+      notes && /* @__PURE__ */ jsx25(CollapsiblePanel, {
+        title: "Notes",
+        children: /* @__PURE__ */ jsx25("div", {
+          className: cn9("openpkg-panel-note", "p-4", "text-[13px] text-[var(--openpkg-text-secondary,#a0a0a0)]", "leading-relaxed", "[&_code]:font-mono [&_code]:text-xs [&_code]:bg-[var(--openpkg-bg-badge,#262626)] [&_code]:px-1.5 [&_code]:py-0.5 [&_code]:rounded"),
+          children: typeof notes === "string" ? /* @__PURE__ */ jsx25("p", {
+            children: notes
+          }) : notes
+        })
+      })
+    ]
+  });
+}
+function useSyncScrollSafe() {
+  try {
+    return useSyncScroll();
+  } catch {
+    return null;
+  }
+}
+// src/components/styled/ExpandableParameter.tsx
+import { formatSchema as formatSchema8 } from "@openpkg-ts/sdk/browser";
+import { cn as cn12 } from "@openpkg-ts/ui/lib/utils";
+import { useState as useState9 } from "react";
+
+// src/components/styled/NestedParameterContainer.tsx
+import { cn as cn10 } from "@openpkg-ts/ui/lib/utils";
+import { jsx as jsx26 } from "react/jsx-runtime";
+
+function NestedParameterContainer({
+  children,
+  level = 0,
+  className
+}) {
+  return /* @__PURE__ */ jsx26("div", {
+    className: cn10("openpkg-nested-container", "border border-t-0", level === 0 ? "border-[var(--openpkg-border-medium,#333333)]" : "border-[var(--openpkg-border-subtle,#262626)]", "rounded-b-lg", "px-5", "mb-2", "[&>.openpkg-param]:py-5", "[&>.openpkg-param]:border-b", "[&>.openpkg-param]:border-[var(--openpkg-border-subtle,#262626)]", "[&>.openpkg-param:last-child]:border-b-0", className),
+    "data-level": level,
+    children
+  });
+}
+
+// src/components/styled/NestedParameterToggle.tsx
+import { cn as cn11 } from "@openpkg-ts/ui/lib/utils";
+import { Plus } from "lucide-react";
+import { jsx as jsx27, jsxs as jsxs15 } from "react/jsx-runtime";
+
+function NestedParameterToggle({
+  expanded,
+  onToggle,
+  count: count2,
+  className
+}) {
+  return /* @__PURE__ */ jsxs15("button", {
+    type: "button",
+    onClick: onToggle,
+    className: cn11("openpkg-nested-toggle", "inline-flex items-center gap-2", "font-sans text-[13px] font-medium", "text-[var(--openpkg-text-secondary,#a0a0a0)]", "bg-transparent", "border border-[var(--openpkg-border-medium,#333333)]", "rounded-lg", "px-4 py-2.5", "mt-3", "cursor-pointer", "transition-all duration-150", "hover:border-[var(--openpkg-text-muted,#666666)]", "hover:text-[var(--openpkg-text-primary,#ededed)]", expanded && "rounded-b-none border-b-transparent mb-0", className),
+    "aria-expanded": expanded,
+    children: [
+      /* @__PURE__ */ jsx27(Plus, {
+        size: 12,
+        className: cn11("transition-transform duration-200", expanded && "rotate-45")
+      }),
+      /* @__PURE__ */ jsxs15("span", {
+        children: [
+          expanded ? "Hide" : "Show",
+          " child parameters",
+          count2 !== undefined && ` (${count2})`
+        ]
+      })
+    ]
+  });
+}
+
+// src/components/styled/ExpandableParameter.tsx
+import { jsx as jsx28, jsxs as jsxs16, Fragment as Fragment3 } from "react/jsx-runtime";
+
+function ExpandableParameter({
+  parameter,
+  parentPath,
+  defaultExpanded = false,
+  expanded: controlledExpanded,
+  onExpandedChange,
+  level = 0,
+  className
+}) {
+  const [internalExpanded, setInternalExpanded] = useState9(defaultExpanded);
+  const isControlled = controlledExpanded !== undefined;
+  const expanded = isControlled ? controlledExpanded : internalExpanded;
+  const handleToggle = () => {
+    const newValue = !expanded;
+    if (isControlled) {
+      onExpandedChange?.(newValue);
+    } else {
+      setInternalExpanded(newValue);
+    }
+  };
+  const { nestedParams, enumValues, hasChildren } = extractSchemaInfo(parameter.schema);
+  const type = formatSchema8(parameter.schema);
+  const isRequired = parameter.required !== false;
+  return /* @__PURE__ */ jsx28("div", {
+    className: cn12("openpkg-expandable-param", className),
+    children: /* @__PURE__ */ jsxs16(APIParameterItem6, {
+      name: parameter.name,
+      parentPath,
+      type: hasChildren ? "object" : type,
+      required: isRequired,
+      expandable: hasChildren,
+      description: parameter.description,
+      anchorId: parentPath ? `${parentPath}${parameter.name}` : parameter.name,
+      showAnchor: level > 0,
+      children: [
+        enumValues.length > 0 && !nestedParams.length && /* @__PURE__ */ jsx28(EnumValuesSection, {
+          values: enumValues
+        }),
+        nestedParams.length > 0 && /* @__PURE__ */ jsxs16(Fragment3, {
+          children: [
+            /* @__PURE__ */ jsx28(NestedParameterToggle, {
+              expanded,
+              onToggle: handleToggle,
+              count: nestedParams.length
+            }),
+            expanded && /* @__PURE__ */ jsx28(NestedParameterContainer, {
+              level,
+              children: nestedParams.map((nested) => /* @__PURE__ */ jsx28(ExpandableParameter, {
+                parameter: nested,
+                parentPath: `${parameter.name}.`,
+                level: level + 1
+              }, nested.name))
+            })
+          ]
+        })
+      ]
+    })
+  });
+}
+function extractSchemaInfo(schema) {
+  const result = {
+    nestedParams: [],
+    enumValues: [],
+    hasChildren: false
+  };
+  if (!schema || typeof schema !== "object")
+    return result;
+  const s = schema;
+  if (s.type === "object" && s.properties && typeof s.properties === "object") {
+    const props = s.properties;
+    const required = Array.isArray(s.required) ? s.required : [];
+    for (const [name, propSchema] of Object.entries(props)) {
+      result.nestedParams.push({
+        name,
+        schema: propSchema,
+        required: required.includes(name),
+        description: propSchema?.description
+      });
+    }
+  }
+  if (Array.isArray(s.enum)) {
+    result.enumValues = s.enum.map((value) => ({
+      value: String(value),
+      description: undefined
+    }));
+  }
+  result.hasChildren = result.nestedParams.length > 0 || result.enumValues.length > 0;
+  return result;
+}
 // src/components/styled/FullAPIReferencePage.tsx
 import { APIReferencePage } from "@openpkg-ts/ui/docskit";
-import { cn as cn3 } from "@openpkg-ts/ui/lib/utils";
-import { useCallback, useEffect, useMemo as useMemo2, useRef, useState as useState2 } from "react";
+import { cn as cn13 } from "@openpkg-ts/ui/lib/utils";
+import { useCallback as useCallback6, useEffect as useEffect7, useMemo as useMemo8, useRef as useRef8, useState as useState10 } from "react";
 
 // src/components/styled/sections/ExportSection.tsx
-import { jsx as jsx14 } from "react/jsx-runtime";
+import { jsx as jsx29 } from "react/jsx-runtime";
 
 function ExportSection({ export: exp, spec }) {
   const props = { export: exp, spec };
   switch (exp.kind) {
     case "function":
-      return /* @__PURE__ */ jsx14(FunctionSection, {
+      return /* @__PURE__ */ jsx29(FunctionSection, {
         ...props
       });
     case "class":
-      return /* @__PURE__ */ jsx14(ClassSection, {
+      return /* @__PURE__ */ jsx29(ClassSection, {
         ...props
       });
     case "interface":
     case "type":
-      return /* @__PURE__ */ jsx14(InterfaceSection, {
+      return /* @__PURE__ */ jsx29(InterfaceSection, {
         ...props
       });
     case "enum":
-      return /* @__PURE__ */ jsx14(EnumSection, {
+      return /* @__PURE__ */ jsx29(EnumSection, {
         ...props
       });
     default:
-      return /* @__PURE__ */ jsx14(VariableSection, {
+      return /* @__PURE__ */ jsx29(VariableSection, {
         ...props
       });
   }
 }
 
 // src/components/styled/FullAPIReferencePage.tsx
-import { jsx as jsx15, jsxs as jsxs9 } from "react/jsx-runtime";
+import { jsx as jsx30, jsxs as jsxs17 } from "react/jsx-runtime";
 
 var KIND_ORDER2 = ["function", "class", "interface", "type", "enum", "variable"];
 var KIND_LABELS2 = {
@@ -4262,10 +5649,10 @@ function FullAPIReferencePage({
   description,
   className
 }) {
-  const [activeFilter, setActiveFilter] = useState2("all");
-  const [activeSection, setActiveSection] = useState2(null);
-  const isScrollingRef = useRef(false);
-  const availableKinds = useMemo2(() => {
+  const [activeFilter, setActiveFilter] = useState10("all");
+  const [activeSection, setActiveSection] = useState10(null);
+  const isScrollingRef = useRef8(false);
+  const availableKinds = useMemo8(() => {
     const kindSet = new Set;
     for (const exp of spec.exports) {
       const kind = exp.kind;
@@ -4275,7 +5662,7 @@ function FullAPIReferencePage({
     }
     return KIND_ORDER2.filter((k) => kindSet.has(k));
   }, [spec.exports]);
-  const filteredExports = useMemo2(() => {
+  const filteredExports = useMemo8(() => {
     let exports = spec.exports;
     if (kinds?.length) {
       exports = exports.filter((e) => kinds.includes(e.kind));
@@ -4292,7 +5679,7 @@ function FullAPIReferencePage({
       return a.name.localeCompare(b.name);
     });
   }, [spec.exports, kinds, activeFilter]);
-  const groupedExports = useMemo2(() => {
+  const groupedExports = useMemo8(() => {
     const groups = new Map;
     for (const exp of filteredExports) {
       const kind = exp.kind;
@@ -4303,7 +5690,7 @@ function FullAPIReferencePage({
     }
     return groups;
   }, [filteredExports]);
-  useEffect(() => {
+  useEffect7(() => {
     if (typeof window === "undefined")
       return;
     const hash = window.location.hash.slice(1);
@@ -4322,7 +5709,7 @@ function FullAPIReferencePage({
       return () => clearTimeout(timer);
     }
   }, []);
-  useEffect(() => {
+  useEffect7(() => {
     if (!showTOC || typeof window === "undefined")
       return;
     const sectionIds = filteredExports.map((exp) => exp.id || exp.name);
@@ -4355,7 +5742,7 @@ function FullAPIReferencePage({
       observer.disconnect();
     };
   }, [showTOC, filteredExports]);
-  const handleTOCClick = useCallback((id) => {
+  const handleTOCClick = useCallback6((id) => {
     const element = document.getElementById(id);
     if (element) {
       isScrollingRef.current = true;
@@ -4367,12 +5754,12 @@ function FullAPIReferencePage({
       }, 1000);
     }
   }, []);
-  const defaultDescription = /* @__PURE__ */ jsxs9("div", {
+  const defaultDescription = /* @__PURE__ */ jsxs17("div", {
     children: [
-      spec.meta.description && /* @__PURE__ */ jsx15("p", {
+      spec.meta.description && /* @__PURE__ */ jsx30("p", {
         children: spec.meta.description
       }),
-      spec.meta.version && /* @__PURE__ */ jsxs9("p", {
+      spec.meta.version && /* @__PURE__ */ jsxs17("p", {
         className: "text-sm text-muted-foreground mt-2",
         children: [
           "Version ",
@@ -4382,40 +5769,40 @@ function FullAPIReferencePage({
     ]
   });
   const shouldShowFilters = showFilters && !kinds?.length && availableKinds.length > 1;
-  return /* @__PURE__ */ jsxs9("div", {
-    className: cn3("doccov-full-reference-page not-prose", showTOC && "lg:grid lg:grid-cols-[220px_1fr] lg:gap-8", className),
+  return /* @__PURE__ */ jsxs17("div", {
+    className: cn13("doccov-full-reference-page not-prose", showTOC && "lg:grid lg:grid-cols-[220px_1fr] lg:gap-8", className),
     children: [
-      showTOC && /* @__PURE__ */ jsx15("aside", {
+      showTOC && /* @__PURE__ */ jsx30("aside", {
         className: "hidden lg:block",
-        children: /* @__PURE__ */ jsxs9("nav", {
+        children: /* @__PURE__ */ jsxs17("nav", {
           className: "sticky top-20 max-h-[calc(100vh-6rem)] overflow-y-auto pr-4",
           children: [
-            /* @__PURE__ */ jsx15("h4", {
+            /* @__PURE__ */ jsx30("h4", {
               className: "text-sm font-semibold text-foreground mb-3",
               children: "On this page"
             }),
-            /* @__PURE__ */ jsx15("div", {
+            /* @__PURE__ */ jsx30("div", {
               className: "space-y-4",
               children: KIND_ORDER2.map((kind) => {
                 const exports = groupedExports.get(kind);
                 if (!exports?.length)
                   return null;
-                return /* @__PURE__ */ jsxs9("div", {
+                return /* @__PURE__ */ jsxs17("div", {
                   children: [
-                    /* @__PURE__ */ jsx15("h5", {
+                    /* @__PURE__ */ jsx30("h5", {
                       className: "text-xs font-medium text-muted-foreground uppercase tracking-wide mb-2",
                       children: KIND_LABELS2[kind]
                     }),
-                    /* @__PURE__ */ jsx15("ul", {
+                    /* @__PURE__ */ jsx30("ul", {
                       className: "space-y-1",
                       children: exports.map((exp) => {
                         const id = exp.id || exp.name;
                         const isActive = activeSection === id;
-                        return /* @__PURE__ */ jsx15("li", {
-                          children: /* @__PURE__ */ jsx15("button", {
+                        return /* @__PURE__ */ jsx30("li", {
+                          children: /* @__PURE__ */ jsx30("button", {
                             type: "button",
                             onClick: () => handleTOCClick(id),
-                            className: cn3("block w-full text-left text-sm py-1 px-2 rounded-md transition-colors cursor-pointer truncate", isActive ? "bg-primary/10 text-primary font-medium" : "text-muted-foreground hover:text-foreground hover:bg-muted/50"),
+                            className: cn13("block w-full text-left text-sm py-1 px-2 rounded-md transition-colors cursor-pointer truncate", isActive ? "bg-primary/10 text-primary font-medium" : "text-muted-foreground hover:text-foreground hover:bg-muted/50"),
                             title: getExportTitle(exp),
                             children: getExportTitle(exp)
                           })
@@ -4429,40 +5816,40 @@ function FullAPIReferencePage({
           ]
         })
       }),
-      /* @__PURE__ */ jsx15("div", {
-        children: /* @__PURE__ */ jsxs9(APIReferencePage, {
+      /* @__PURE__ */ jsx30("div", {
+        children: /* @__PURE__ */ jsxs17(APIReferencePage, {
           title: title || spec.meta.name || "API Reference",
           description: description || defaultDescription,
           children: [
-            shouldShowFilters && /* @__PURE__ */ jsxs9("div", {
+            shouldShowFilters && /* @__PURE__ */ jsxs17("div", {
               className: "flex flex-wrap gap-2 mb-8 -mt-4",
               children: [
-                /* @__PURE__ */ jsx15("button", {
+                /* @__PURE__ */ jsx30("button", {
                   type: "button",
                   onClick: () => setActiveFilter("all"),
-                  className: cn3("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: cn13("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__ */ jsx15("button", {
+                availableKinds.map((kind) => /* @__PURE__ */ jsx30("button", {
                   type: "button",
                   onClick: () => setActiveFilter(kind),
-                  className: cn3("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: cn13("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_LABELS2[kind]
                 }, kind))
               ]
             }),
-            filteredExports.map((exp) => /* @__PURE__ */ jsx15(ExportSection, {
+            filteredExports.map((exp) => /* @__PURE__ */ jsx30(ExportSection, {
               export: exp,
               spec
             }, exp.id || exp.name)),
-            filteredExports.length === 0 && /* @__PURE__ */ jsxs9("div", {
+            filteredExports.length === 0 && /* @__PURE__ */ jsxs17("div", {
               className: "rounded-lg border border-border bg-card/50 p-8 text-center",
               children: [
-                /* @__PURE__ */ jsx15("p", {
+                /* @__PURE__ */ jsx30("p", {
                   className: "text-muted-foreground",
                   children: activeFilter !== "all" ? `No ${KIND_LABELS2[activeFilter].toLowerCase()} found.` : "No exports found in this package."
                 }),
-                activeFilter !== "all" && /* @__PURE__ */ jsx15("button", {
+                activeFilter !== "all" && /* @__PURE__ */ jsx30("button", {
                   type: "button",
                   onClick: () => setActiveFilter("all"),
                   className: "mt-3 text-sm text-primary hover:underline cursor-pointer",
@@ -4476,12 +5863,126 @@ function FullAPIReferencePage({
     ]
   });
 }
+// src/components/styled/MethodSection.tsx
+import { cn as cn14 } from "@openpkg-ts/ui/lib/utils";
+import { useEffect as useEffect8, useRef as useRef9 } from "react";
+import { jsx as jsx31, jsxs as jsxs18 } from "react/jsx-runtime";
+
+function MethodSection({
+  id,
+  title,
+  signature,
+  description,
+  notes,
+  children,
+  className
+}) {
+  const ref = useRef9(null);
+  const syncScroll = useSyncScrollSafe2();
+  useEffect8(() => {
+    if (syncScroll && ref.current) {
+      syncScroll.registerSection(id, ref);
+      return () => syncScroll.unregisterSection(id);
+    }
+  }, [id, syncScroll]);
+  return /* @__PURE__ */ jsxs18("section", {
+    ref,
+    id,
+    "data-section": id,
+    className: cn14("openpkg-method-section", "mb-20 last:mb-0", className),
+    children: [
+      /* @__PURE__ */ jsx31("h2", {
+        className: cn14("text-2xl font-semibold tracking-tight", "text-[var(--openpkg-text-primary,#ededed)]", "mb-4"),
+        children: title
+      }),
+      signature && /* @__PURE__ */ jsx31("code", {
+        className: cn14("block font-mono text-sm", "text-[var(--openpkg-text-muted,#666666)]", "mb-6"),
+        children: signature
+      }),
+      description && /* @__PURE__ */ jsx31("div", {
+        className: cn14("openpkg-method-description", "text-[15px] leading-relaxed", "text-[var(--openpkg-text-secondary,#a0a0a0)]", "mb-6", "[&_a]:text-[var(--openpkg-accent-link,#6cb6ff)] [&_a]:no-underline [&_a]:font-medium hover:[&_a]:underline", "[&_code]:bg-[var(--openpkg-bg-badge,#262626)] [&_code]:px-1.5 [&_code]:py-0.5 [&_code]:rounded [&_code]:font-mono [&_code]:text-[13px]"),
+        children: typeof description === "string" ? /* @__PURE__ */ jsx31("p", {
+          children: description
+        }) : description
+      }),
+      notes && notes.length > 0 && /* @__PURE__ */ jsx31("ul", {
+        className: cn14("openpkg-method-notes", "list-disc list-inside", "text-[15px] leading-relaxed", "text-[var(--openpkg-text-secondary,#a0a0a0)]", "mb-8 space-y-2"),
+        children: notes.map((note, i) => /* @__PURE__ */ jsx31("li", {
+          children: note
+        }, i))
+      }),
+      children && /* @__PURE__ */ jsxs18("div", {
+        className: "openpkg-method-params",
+        children: [
+          /* @__PURE__ */ jsx31("h3", {
+            className: cn14("text-xs font-semibold uppercase tracking-wider", "text-[var(--openpkg-text-muted,#666666)]", "mb-4 pb-2", "border-b border-[var(--openpkg-border-subtle,#262626)]"),
+            children: "Parameters"
+          }),
+          children
+        ]
+      })
+    ]
+  });
+}
+function useSyncScrollSafe2() {
+  try {
+    return useSyncScroll();
+  } catch {
+    return null;
+  }
+}
+// src/components/styled/MethodSectionFromSpec.tsx
+import { cn as cn15 } from "@openpkg-ts/ui/lib/utils";
+import { jsx as jsx32 } from "react/jsx-runtime";
+
+function MethodSectionFromSpec({
+  spec,
+  export: exportProp,
+  className
+}) {
+  const exp = typeof exportProp === "string" ? spec.exports.find((e) => e.name === exportProp) : exportProp;
+  if (!exp) {
+    return null;
+  }
+  const method = extractMethodData(exp, spec);
+  const notes = buildNotes(exp);
+  return /* @__PURE__ */ jsx32(MethodSection, {
+    id: exp.id || exp.name,
+    title: method.title,
+    signature: method.signature,
+    description: method.description,
+    notes,
+    className: cn15("openpkg-method-from-spec", className),
+    children: method.parameters.map((param) => /* @__PURE__ */ jsx32(ExpandableParameter, {
+      parameter: param
+    }, param.name))
+  });
+}
+function buildNotes(exp) {
+  const notes = [];
+  if (exp.deprecated) {
+    notes.push(exp.deprecationReason ? `⚠️ Deprecated: ${exp.deprecationReason}` : "⚠️ This function is deprecated.");
+  }
+  const sig = exp.signatures?.[0];
+  if (sig?.tags) {
+    for (const tag of sig.tags) {
+      if (tag.name === "note" || tag.name === "remarks") {
+        notes.push(tag.text);
+      }
+    }
+  }
+  const flags = exp.flags;
+  if (flags?.async) {
+    notes.push("This function is async and returns a Promise.");
+  }
+  return notes;
+}
 // src/components/styled/ParameterItem.tsx
-import { formatSchema as formatSchema6 } from "@openpkg-ts/sdk";
-import { cn as cn4 } from "@openpkg-ts/ui/lib/utils";
-import { ChevronRight } from "lucide-react";
-import { useState as useState3 } from "react";
-import { jsx as jsx16, jsxs as jsxs10 } from "react/jsx-runtime";
+import { formatSchema as formatSchema9 } from "@openpkg-ts/sdk/browser";
+import { cn as cn16 } from "@openpkg-ts/ui/lib/utils";
+import { ChevronRight as ChevronRight2 } from "lucide-react";
+import { useState as useState11 } from "react";
+import { jsx as jsx33, jsxs as jsxs19 } from "react/jsx-runtime";
 
 function getNestedProperties(schema) {
   if (!schema || typeof schema !== "object")
@@ -4511,55 +6012,55 @@ function NestedPropertyItem({
   required = false,
   depth = 0
 }) {
-  const [expanded, setExpanded] = useState3(false);
-  const type = formatSchema6(schema);
+  const [expanded, setExpanded] = useState11(false);
+  const type = formatSchema9(schema);
   const nestedProps = getNestedProperties(schema);
   const nestedCount = countProperties(schema);
   const hasNested = nestedCount > 0;
   const schemaObj = schema;
   const description = schemaObj?.description;
-  return /* @__PURE__ */ jsxs10("div", {
-    className: cn4("border-t border-border first:border-t-0", depth > 0 && "ml-4"),
+  return /* @__PURE__ */ jsxs19("div", {
+    className: cn16("border-t border-border first:border-t-0", depth > 0 && "ml-4"),
     children: [
-      /* @__PURE__ */ jsx16("div", {
+      /* @__PURE__ */ jsx33("div", {
         className: "py-3",
-        children: /* @__PURE__ */ jsxs10("div", {
+        children: /* @__PURE__ */ jsxs19("div", {
           className: "flex items-start gap-2",
           children: [
-            hasNested && /* @__PURE__ */ jsx16("button", {
+            hasNested && /* @__PURE__ */ jsx33("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, {
+              children: /* @__PURE__ */ jsx33(ChevronRight2, {
                 size: 14,
-                className: cn4("transition-transform duration-200", expanded && "rotate-90")
+                className: cn16("transition-transform duration-200", expanded && "rotate-90")
               })
             }),
-            !hasNested && /* @__PURE__ */ jsx16("div", {
+            !hasNested && /* @__PURE__ */ jsx33("div", {
               className: "w-5"
             }),
-            /* @__PURE__ */ jsxs10("div", {
+            /* @__PURE__ */ jsxs19("div", {
               className: "flex-1 min-w-0",
               children: [
-                /* @__PURE__ */ jsxs10("div", {
+                /* @__PURE__ */ jsxs19("div", {
                   className: "flex items-baseline gap-2 flex-wrap",
                   children: [
-                    /* @__PURE__ */ jsxs10("span", {
+                    /* @__PURE__ */ jsxs19("span", {
                       className: "font-mono text-sm text-foreground",
                       children: [
                         name,
-                        !required && /* @__PURE__ */ jsx16("span", {
+                        !required && /* @__PURE__ */ jsx33("span", {
                           className: "text-muted-foreground",
                           children: "?"
                         })
                       ]
                     }),
-                    /* @__PURE__ */ jsx16("span", {
+                    /* @__PURE__ */ jsx33("span", {
                       className: "font-mono text-sm text-muted-foreground",
                       children: hasNested ? "object" : type
                     }),
-                    hasNested && /* @__PURE__ */ jsxs10("button", {
+                    hasNested && /* @__PURE__ */ jsxs19("button", {
                       type: "button",
                       onClick: () => setExpanded(!expanded),
                       className: "text-xs text-primary hover:underline cursor-pointer",
@@ -4571,7 +6072,7 @@ function NestedPropertyItem({
                     })
                   ]
                 }),
-                description && /* @__PURE__ */ jsx16("p", {
+                description && /* @__PURE__ */ jsx33("p", {
                   className: "text-sm text-muted-foreground mt-1",
                   children: description
                 })
@@ -4580,9 +6081,9 @@ function NestedPropertyItem({
           ]
         })
       }),
-      hasNested && expanded && nestedProps && /* @__PURE__ */ jsx16("div", {
+      hasNested && expanded && nestedProps && /* @__PURE__ */ jsx33("div", {
         className: "border-l border-border ml-2",
-        children: Object.entries(nestedProps).map(([propName, propSchema]) => /* @__PURE__ */ jsx16(NestedPropertyItem, {
+        children: Object.entries(nestedProps).map(([propName, propSchema]) => /* @__PURE__ */ jsx33(NestedPropertyItem, {
           name: propName,
           schema: propSchema,
           required: getRequiredFields(schema).includes(propName),
@@ -4597,52 +6098,52 @@ function ParameterItem({
   depth = 0,
   className
 }) {
-  const [expanded, setExpanded] = useState3(false);
-  const type = formatSchema6(param.schema);
+  const [expanded, setExpanded] = useState11(false);
+  const type = formatSchema9(param.schema);
   const isRequired = param.required !== false;
   const nestedProps = getNestedProperties(param.schema);
   const nestedCount = countProperties(param.schema);
   const hasNested = nestedCount > 0;
-  return /* @__PURE__ */ jsxs10("div", {
-    className: cn4("border-b border-border last:border-b-0", className),
+  return /* @__PURE__ */ jsxs19("div", {
+    className: cn16("border-b border-border last:border-b-0", className),
     children: [
-      /* @__PURE__ */ jsx16("div", {
+      /* @__PURE__ */ jsx33("div", {
         className: "py-3",
-        children: /* @__PURE__ */ jsxs10("div", {
+        children: /* @__PURE__ */ jsxs19("div", {
           className: "flex items-start gap-2",
           children: [
-            hasNested && /* @__PURE__ */ jsx16("button", {
+            hasNested && /* @__PURE__ */ jsx33("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, {
+              children: /* @__PURE__ */ jsx33(ChevronRight2, {
                 size: 14,
-                className: cn4("transition-transform duration-200", expanded && "rotate-90")
+                className: cn16("transition-transform duration-200", expanded && "rotate-90")
               })
             }),
-            !hasNested && /* @__PURE__ */ jsx16("div", {
+            !hasNested && /* @__PURE__ */ jsx33("div", {
               className: "w-5"
             }),
-            /* @__PURE__ */ jsxs10("div", {
+            /* @__PURE__ */ jsxs19("div", {
               className: "flex-1 min-w-0",
               children: [
-                /* @__PURE__ */ jsxs10("div", {
+                /* @__PURE__ */ jsxs19("div", {
                   className: "flex items-baseline gap-2 flex-wrap",
                   children: [
-                    /* @__PURE__ */ jsx16("span", {
+                    /* @__PURE__ */ jsx33("span", {
                       className: "font-mono text-sm font-medium text-foreground",
                       children: param.name
                     }),
-                    isRequired && /* @__PURE__ */ jsx16("span", {
+                    isRequired && /* @__PURE__ */ jsx33("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", {
+                    /* @__PURE__ */ jsx33("span", {
                       className: "font-mono text-sm text-muted-foreground",
                       children: hasNested ? "object" : type
                     }),
-                    hasNested && /* @__PURE__ */ jsxs10("button", {
+                    hasNested && /* @__PURE__ */ jsxs19("button", {
                       type: "button",
                       onClick: () => setExpanded(!expanded),
                       className: "text-xs text-primary hover:underline cursor-pointer",
@@ -4654,7 +6155,7 @@ function ParameterItem({
                     })
                   ]
                 }),
-                param.description && /* @__PURE__ */ jsx16("p", {
+                param.description && /* @__PURE__ */ jsx33("p", {
                   className: "text-sm text-muted-foreground mt-1",
                   children: param.description
                 })
@@ -4663,9 +6164,9 @@ function ParameterItem({
           ]
         })
       }),
-      hasNested && expanded && nestedProps && /* @__PURE__ */ jsx16("div", {
+      hasNested && expanded && nestedProps && /* @__PURE__ */ jsx33("div", {
         className: "border-l border-border ml-2 mb-3",
-        children: Object.entries(nestedProps).map(([propName, propSchema]) => /* @__PURE__ */ jsx16(NestedPropertyItem, {
+        children: Object.entries(nestedProps).map(([propName, propSchema]) => /* @__PURE__ */ jsx33(NestedPropertyItem, {
           name: propName,
           schema: propSchema,
           required: getRequiredFields(param.schema).includes(propName),
@@ -4675,25 +6176,144 @@ function ParameterItem({
     ]
   });
 }
+// src/components/styled/StripeAPIReferencePage.tsx
+import { cn as cn17 } from "@openpkg-ts/ui/lib/utils";
+import { jsx as jsx34, Fragment as Fragment5 } from "react/jsx-runtime";
+
+function StripeAPIReferencePage({
+  spec,
+  filter,
+  showAllKinds = false,
+  className
+}) {
+  const defaultFilter = (exp) => showAllKinds ? true : exp.kind === "function";
+  const activeFilter = filter ?? defaultFilter;
+  const exports = spec.exports.filter(activeFilter);
+  const sortedExports = [...exports].sort((a, b) => a.name.localeCompare(b.name));
+  return /* @__PURE__ */ jsx34(SyncScrollProvider, {
+    children: /* @__PURE__ */ jsx34("div", {
+      className: cn17("openpkg-stripe-api-page", "bg-[var(--openpkg-bg-root,#0c0c0c)]", "text-[var(--openpkg-text-primary,#ededed)]", "font-[var(--openpkg-font-sans)]", "min-h-screen", className),
+      children: /* @__PURE__ */ jsx34(APIReferenceLayout, {
+        examples: /* @__PURE__ */ jsx34(ExamplesColumn, {
+          exports: sortedExports,
+          spec
+        }),
+        children: /* @__PURE__ */ jsx34(DocsColumn, {
+          exports: sortedExports,
+          spec
+        })
+      })
+    })
+  });
+}
+function DocsColumn({ exports, spec }) {
+  return /* @__PURE__ */ jsx34(Fragment5, {
+    children: exports.map((exp) => /* @__PURE__ */ jsx34(MethodSectionFromSpec, {
+      spec,
+      export: exp
+    }, exp.id || exp.name))
+  });
+}
+function ExamplesColumn({ exports, spec }) {
+  return /* @__PURE__ */ jsx34(Fragment5, {
+    children: exports.map((exp) => {
+      const method = extractMethodData(exp, spec);
+      const examples = getExamplesForExport(exp, spec);
+      return /* @__PURE__ */ jsx34(ExampleSection, {
+        id: exp.id || exp.name,
+        examples,
+        response: generateMockResponse(exp),
+        notes: method.returnDescription
+      }, exp.id || exp.name);
+    })
+  });
+}
+function getExamplesForExport(exp, spec) {
+  const method = extractMethodData(exp, spec);
+  if (method.examples.length > 0) {
+    return specExamplesToCodeExamples2(method.examples);
+  }
+  const paramNames = method.parameters.map((p) => p.name);
+  return [generateDefaultExample(spec.meta.name, exp.name, paramNames)];
+}
+function generateMockResponse(exp) {
+  const sig = exp.signatures?.[0];
+  if (!sig?.returns?.schema)
+    return;
+  const schema = sig.returns.schema;
+  if (typeof schema === "object") {
+    const s = schema;
+    if (s.type === "void" || s.type === "undefined") {
+      return;
+    }
+    if (s.type === "object" && s.properties) {
+      const props = s.properties;
+      const mock = {};
+      for (const [key, propSchema] of Object.entries(props)) {
+        mock[key] = getMockValue(propSchema);
+      }
+      return JSON.stringify(mock, null, 2);
+    }
+    if (s.type === "array") {
+      return JSON.stringify([getMockValue(s.items)], null, 2);
+    }
+  }
+  return;
+}
+function getMockValue(schema) {
+  if (!schema)
+    return null;
+  switch (schema.type) {
+    case "string":
+      return "example";
+    case "number":
+    case "integer":
+      return 42;
+    case "boolean":
+      return true;
+    case "array":
+      return [];
+    case "object":
+      return {};
+    default:
+      return null;
+  }
+}
 export {
+  useSyncSection,
+  useSyncScroll,
+  useMethodsFromSpec,
+  useMethodFromSpec,
   specSchemaToAPISchema,
+  specParamsToNestedParams,
+  specParamToNestedParam,
   specParamToAPIParam,
   specExamplesToCodeExamples,
+  specExampleToCodeExample,
+  resolveSchemaRef,
   groupMembersByKind,
   getLanguagesFromExamples,
   getExampleTitle,
   getExampleLanguage,
   getExampleCode,
+  generateDefaultExample,
+  extractMethodData,
   cleanCode,
   buildImportStatement,
   VariableSection,
   VariablePage,
   TypeTable,
+  SyncScrollProvider,
+  StripeAPIReferencePage,
   Signature,
   ParameterItem,
   ParamTable,
   ParamRow,
   NestedProperty,
+  NestedParameterToggle,
+  NestedParameterContainer,
+  MethodSectionFromSpec,
+  MethodSection,
   MembersTable,
   MemberRow,
   InterfaceSection,
@@ -4706,12 +6326,20 @@ export {
   ExportIndexPage,
   ExportCard,
   ExpandableProperty,
+  ExpandableParameter,
+  ExampleSection,
+  ExampleChips,
   ExampleBlock,
+  EnumValuesSection,
   EnumSection,
   EnumPage,
+  CollapsiblePanel,
   CollapsibleMethod,
   CodeTabs,
+  CodePanel,
   ClassSection,
   ClassPage,
+  APIReferenceLayout,
+  APIParameterItem6 as APIParameterItem,
   APIPage
 };