@openpkg-ts/doc-generator 0.1.0

package/dist/react-styled.js

@@ -0,0 +1,766 @@
+"use client";
+import {
+  CollapsibleMethod,
+  ExampleBlock,
+  ExpandableProperty,
+  MemberRow,
+  MembersTable,
+  NestedProperty,
+  ParamRow,
+  ParamTable,
+  Signature,
+  TypeTable,
+  cleanCode,
+  getExampleCode,
+  getExampleLanguage,
+  getExampleTitle,
+  groupMembersByKind
+} from "./shared/chunk-e5fkh3kh.js";
+import {
+  buildSignatureString,
+  formatSchema
+} from "./shared/chunk-taeg9090.js";
+// src/components/styled/ClassPage.tsx
+import { jsxDEV } from "react/jsx-dev-runtime";
+
+function PropertyItem({ member }) {
+  const visibility = member.visibility ?? "public";
+  const flags = member.flags;
+  const isStatic = flags?.static;
+  const isReadonly = flags?.readonly;
+  const type = formatSchema(member.schema);
+  return /* @__PURE__ */ jsxDEV("div", {
+    className: "py-3 border-b border-border last:border-0",
+    children: [
+      /* @__PURE__ */ jsxDEV("div", {
+        className: "flex items-baseline gap-2 flex-wrap",
+        children: [
+          /* @__PURE__ */ jsxDEV("span", {
+            className: "font-semibold text-foreground",
+            children: [
+              member.name,
+              ":"
+            ]
+          }, undefined, true, undefined, this),
+          /* @__PURE__ */ jsxDEV("span", {
+            className: "text-muted-foreground font-mono text-sm",
+            children: type
+          }, undefined, false, undefined, this),
+          visibility !== "public" && /* @__PURE__ */ jsxDEV("span", {
+            className: "text-xs px-1.5 py-0.5 rounded bg-muted text-muted-foreground",
+            children: visibility
+          }, undefined, false, undefined, this),
+          isStatic && /* @__PURE__ */ jsxDEV("span", {
+            className: "text-xs px-1.5 py-0.5 rounded bg-blue-500/10 text-blue-600 dark:text-blue-400",
+            children: "static"
+          }, undefined, false, undefined, this),
+          isReadonly && /* @__PURE__ */ jsxDEV("span", {
+            className: "text-xs px-1.5 py-0.5 rounded bg-purple-500/10 text-purple-600 dark:text-purple-400",
+            children: "readonly"
+          }, undefined, false, undefined, this)
+        ]
+      }, undefined, true, undefined, this),
+      member.description && /* @__PURE__ */ jsxDEV("p", {
+        className: "text-sm text-muted-foreground mt-1",
+        children: member.description
+      }, undefined, false, undefined, this)
+    ]
+  }, undefined, true, undefined, this);
+}
+function ClassPage({ export: exp, spec, renderExample }) {
+  const hasExamples = exp.examples && exp.examples.length > 0;
+  const constructors = exp.members?.filter((m) => m.kind === "constructor") ?? [];
+  const properties = exp.members?.filter((m) => m.kind === "property" || m.kind === "field") ?? [];
+  const methods = exp.members?.filter((m) => m.kind === "method") ?? [];
+  const constructorSig = constructors[0]?.signatures?.[0];
+  const constructorParams = constructorSig?.parameters ?? [];
+  const exampleCode = hasExamples ? typeof exp.examples[0] === "string" ? exp.examples[0] : exp.examples[0].code : "";
+  return /* @__PURE__ */ jsxDEV("div", {
+    className: "space-y-8",
+    children: [
+      exp.description && /* @__PURE__ */ jsxDEV("p", {
+        className: "text-muted-foreground text-lg leading-relaxed",
+        children: exp.description
+      }, undefined, false, undefined, this),
+      /* @__PURE__ */ jsxDEV("div", {
+        className: "rounded-lg border border-border bg-muted/30 p-4 overflow-x-auto",
+        children: /* @__PURE__ */ jsxDEV("code", {
+          className: "font-mono text-sm text-foreground whitespace-pre",
+          children: [
+            "class ",
+            exp.name,
+            exp.extends ? ` extends ${exp.extends}` : "",
+            exp.implements?.length ? ` implements ${exp.implements.join(", ")}` : ""
+          ]
+        }, undefined, true, undefined, this)
+      }, undefined, false, undefined, this),
+      /* @__PURE__ */ jsxDEV("div", {
+        className: `grid gap-8 ${hasExamples ? "lg:grid-cols-2" : "grid-cols-1"}`,
+        children: [
+          /* @__PURE__ */ jsxDEV("div", {
+            className: "space-y-8",
+            children: [
+              constructorParams.length > 0 && /* @__PURE__ */ jsxDEV("section", {
+                children: [
+                  /* @__PURE__ */ jsxDEV("h3", {
+                    className: "text-sm font-semibold uppercase tracking-wide text-muted-foreground mb-4",
+                    children: "Constructor"
+                  }, undefined, false, undefined, this),
+                  /* @__PURE__ */ jsxDEV("div", {
+                    className: "ml-2 border-l-2 border-border pl-4",
+                    children: constructorParams.map((param, index) => /* @__PURE__ */ jsxDEV(ExpandableProperty, {
+                      param
+                    }, param.name ?? index, false, undefined, this))
+                  }, undefined, false, undefined, this)
+                ]
+              }, undefined, true, undefined, this),
+              methods.length > 0 && /* @__PURE__ */ jsxDEV("section", {
+                children: [
+                  /* @__PURE__ */ jsxDEV("h3", {
+                    className: "text-sm font-semibold uppercase tracking-wide text-muted-foreground mb-4",
+                    children: "Methods"
+                  }, undefined, false, undefined, this),
+                  /* @__PURE__ */ jsxDEV("div", {
+                    className: "rounded-lg border border-border overflow-hidden",
+                    children: methods.map((member, index) => /* @__PURE__ */ jsxDEV(CollapsibleMethod, {
+                      member,
+                      defaultExpanded: index === 0
+                    }, member.name ?? index, false, undefined, this))
+                  }, undefined, false, undefined, this)
+                ]
+              }, undefined, true, undefined, this),
+              properties.length > 0 && /* @__PURE__ */ jsxDEV("section", {
+                children: [
+                  /* @__PURE__ */ jsxDEV("h3", {
+                    className: "text-sm font-semibold uppercase tracking-wide text-muted-foreground mb-4",
+                    children: "Properties"
+                  }, undefined, false, undefined, this),
+                  /* @__PURE__ */ jsxDEV("div", {
+                    className: "rounded-lg border border-border bg-card px-4",
+                    children: properties.map((member, index) => /* @__PURE__ */ jsxDEV(PropertyItem, {
+                      member
+                    }, member.name ?? index, false, undefined, this))
+                  }, undefined, false, undefined, this)
+                ]
+              }, undefined, true, undefined, this)
+            ]
+          }, undefined, true, undefined, this),
+          hasExamples && /* @__PURE__ */ jsxDEV("div", {
+            className: "lg:sticky lg:top-20 lg:self-start",
+            children: [
+              /* @__PURE__ */ jsxDEV("h3", {
+                className: "text-sm font-semibold uppercase tracking-wide text-muted-foreground mb-4",
+                children: "Example"
+              }, undefined, false, undefined, this),
+              renderExample ? renderExample(exampleCode, `${exp.name.toLowerCase()}.ts`) : /* @__PURE__ */ jsxDEV("pre", {
+                className: "rounded-lg border border-border bg-muted/30 p-4 overflow-x-auto",
+                children: /* @__PURE__ */ jsxDEV("code", {
+                  className: "font-mono text-sm text-foreground",
+                  children: exampleCode
+                }, undefined, false, undefined, this)
+              }, undefined, false, undefined, this)
+            ]
+          }, undefined, true, undefined, this)
+        ]
+      }, undefined, true, undefined, this)
+    ]
+  }, undefined, true, undefined, this);
+}
+
+// src/components/styled/EnumPage.tsx
+import { jsxDEV as jsxDEV2 } from "react/jsx-dev-runtime";
+
+function EnumPage({ export: exp, spec, renderExample }) {
+  const members = exp.members ?? [];
+  const hasExamples = exp.examples && exp.examples.length > 0;
+  const signature = buildSignatureString(exp);
+  return /* @__PURE__ */ jsxDEV2("div", {
+    className: "space-y-6",
+    children: [
+      exp.description && /* @__PURE__ */ jsxDEV2("p", {
+        className: "text-muted-foreground text-base leading-relaxed",
+        children: exp.description
+      }, undefined, false, undefined, this),
+      /* @__PURE__ */ jsxDEV2("section", {
+        children: [
+          /* @__PURE__ */ jsxDEV2("h2", {
+            className: "text-xl font-semibold mb-2",
+            children: "Declaration"
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV2("div", {
+            className: "rounded-lg border border-border bg-muted/30 p-4 overflow-x-auto",
+            children: /* @__PURE__ */ jsxDEV2("code", {
+              className: "font-mono text-sm text-foreground",
+              children: signature
+            }, undefined, false, undefined, this)
+          }, undefined, false, undefined, this),
+          exp.deprecated && /* @__PURE__ */ jsxDEV2("div", {
+            className: "mt-2 rounded-md bg-yellow-500/10 border border-yellow-500/20 px-3 py-2 text-sm text-yellow-600 dark:text-yellow-400",
+            children: [
+              /* @__PURE__ */ jsxDEV2("strong", {
+                children: "Deprecated:"
+              }, undefined, false, undefined, this),
+              " This export is deprecated."
+            ]
+          }, undefined, true, undefined, this)
+        ]
+      }, undefined, true, undefined, this),
+      members.length > 0 && /* @__PURE__ */ jsxDEV2("section", {
+        children: [
+          /* @__PURE__ */ jsxDEV2("h2", {
+            className: "text-xl font-semibold mb-2",
+            children: "Members"
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV2("div", {
+            className: "overflow-x-auto",
+            children: /* @__PURE__ */ jsxDEV2("table", {
+              className: "w-full text-sm border-collapse",
+              children: [
+                /* @__PURE__ */ jsxDEV2("thead", {
+                  children: /* @__PURE__ */ jsxDEV2("tr", {
+                    className: "border-b border-border",
+                    children: [
+                      /* @__PURE__ */ jsxDEV2("th", {
+                        className: "text-left py-2 px-3 font-medium text-muted-foreground",
+                        children: "Name"
+                      }, undefined, false, undefined, this),
+                      /* @__PURE__ */ jsxDEV2("th", {
+                        className: "text-left py-2 px-3 font-medium text-muted-foreground",
+                        children: "Value"
+                      }, undefined, false, undefined, this),
+                      /* @__PURE__ */ jsxDEV2("th", {
+                        className: "text-left py-2 px-3 font-medium text-muted-foreground",
+                        children: "Description"
+                      }, undefined, false, undefined, this)
+                    ]
+                  }, undefined, true, undefined, this)
+                }, undefined, false, undefined, this),
+                /* @__PURE__ */ jsxDEV2("tbody", {
+                  children: members.map((member, index) => {
+                    const value = member.schema !== undefined ? typeof member.schema === "object" && member.schema !== null ? member.schema.const ?? member.schema.default ?? "-" : member.schema : "-";
+                    return /* @__PURE__ */ jsxDEV2("tr", {
+                      className: "border-b border-border last:border-0",
+                      children: [
+                        /* @__PURE__ */ jsxDEV2("td", {
+                          className: "py-2 px-3 align-top",
+                          children: /* @__PURE__ */ jsxDEV2("code", {
+                            className: "text-primary font-mono text-xs bg-secondary px-1.5 py-0.5 rounded",
+                            children: member.name
+                          }, undefined, false, undefined, this)
+                        }, undefined, false, undefined, this),
+                        /* @__PURE__ */ jsxDEV2("td", {
+                          className: "py-2 px-3 align-top",
+                          children: /* @__PURE__ */ jsxDEV2("code", {
+                            className: "font-mono text-xs text-muted-foreground",
+                            children: String(value)
+                          }, undefined, false, undefined, this)
+                        }, undefined, false, undefined, this),
+                        /* @__PURE__ */ jsxDEV2("td", {
+                          className: "py-2 px-3 align-top text-muted-foreground",
+                          children: member.description ?? ""
+                        }, undefined, false, undefined, this)
+                      ]
+                    }, member.name ?? index, true, undefined, this);
+                  })
+                }, undefined, false, undefined, this)
+              ]
+            }, undefined, true, undefined, this)
+          }, undefined, false, undefined, this)
+        ]
+      }, undefined, true, undefined, this),
+      hasExamples && /* @__PURE__ */ jsxDEV2("section", {
+        children: [
+          /* @__PURE__ */ jsxDEV2("h2", {
+            className: "text-xl font-semibold mb-2",
+            children: "Examples"
+          }, undefined, false, undefined, this),
+          exp.examples.map((example, index) => {
+            const code = typeof example === "string" ? example : example.code;
+            return /* @__PURE__ */ jsxDEV2("div", {
+              className: "mb-4",
+              children: renderExample ? renderExample(code, `${exp.name.toLowerCase()}-${index}.ts`) : /* @__PURE__ */ jsxDEV2("pre", {
+                className: "rounded-lg border border-border bg-secondary p-4 overflow-x-auto",
+                children: /* @__PURE__ */ jsxDEV2("code", {
+                  className: "font-mono text-sm text-foreground",
+                  children: code
+                }, undefined, false, undefined, this)
+              }, undefined, false, undefined, this)
+            }, index, false, undefined, this);
+          })
+        ]
+      }, undefined, true, undefined, this)
+    ]
+  }, undefined, true, undefined, this);
+}
+
+// src/components/styled/FunctionPage.tsx
+import { jsxDEV as jsxDEV3 } from "react/jsx-dev-runtime";
+
+function FunctionPage({
+  export: exp,
+  spec,
+  renderExample
+}) {
+  const sig = exp.signatures?.[0];
+  const hasExamples = exp.examples && exp.examples.length > 0;
+  const hasParams = sig?.parameters && sig.parameters.length > 0;
+  const exampleCode = hasExamples ? typeof exp.examples[0] === "string" ? exp.examples[0] : exp.examples[0].code : "";
+  return /* @__PURE__ */ jsxDEV3("div", {
+    className: "space-y-6 not-prose",
+    children: [
+      exp.description && /* @__PURE__ */ jsxDEV3("p", {
+        className: "text-muted-foreground leading-relaxed",
+        children: exp.description
+      }, undefined, false, undefined, this),
+      sig?.returns && /* @__PURE__ */ jsxDEV3("p", {
+        className: "text-muted-foreground text-sm",
+        children: [
+          /* @__PURE__ */ jsxDEV3("span", {
+            className: "font-medium text-foreground",
+            children: "Returns:"
+          }, undefined, false, undefined, this),
+          " ",
+          sig.returns.description || `A ${formatSchema(sig.returns.schema)}`
+        ]
+      }, undefined, true, undefined, this),
+      /* @__PURE__ */ jsxDEV3("div", {
+        className: "not-prose",
+        style: {
+          display: hasExamples ? "grid" : "block",
+          gridTemplateColumns: hasExamples ? "repeat(2, minmax(0, 1fr))" : undefined,
+          gap: "2rem",
+          alignItems: "start"
+        },
+        children: [
+          /* @__PURE__ */ jsxDEV3("div", {
+            className: "space-y-6",
+            children: hasParams && /* @__PURE__ */ jsxDEV3("div", {
+              children: [
+                /* @__PURE__ */ jsxDEV3("h3", {
+                  className: "text-sm font-semibold uppercase tracking-wide text-muted-foreground mb-4",
+                  children: "Parameters"
+                }, undefined, false, undefined, this),
+                /* @__PURE__ */ jsxDEV3("div", {
+                  className: "space-y-3 rounded-lg border border-border bg-card/50 p-4",
+                  children: sig.parameters.map((param, index) => /* @__PURE__ */ jsxDEV3("div", {
+                    className: "border-b border-border last:border-0 pb-3 last:pb-0",
+                    children: [
+                      /* @__PURE__ */ jsxDEV3("div", {
+                        className: "flex items-baseline gap-2 mb-1",
+                        children: [
+                          /* @__PURE__ */ jsxDEV3("span", {
+                            className: "font-mono text-sm text-foreground",
+                            children: param.name
+                          }, undefined, false, undefined, this),
+                          param.required !== false && /* @__PURE__ */ jsxDEV3("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"
+                          }, undefined, false, undefined, this)
+                        ]
+                      }, undefined, true, undefined, this),
+                      /* @__PURE__ */ jsxDEV3("div", {
+                        className: "text-sm text-muted-foreground font-mono",
+                        children: formatSchema(param.schema)
+                      }, undefined, false, undefined, this),
+                      param.description && /* @__PURE__ */ jsxDEV3("p", {
+                        className: "text-sm text-muted-foreground mt-2",
+                        children: param.description
+                      }, undefined, false, undefined, this)
+                    ]
+                  }, param.name ?? index, true, undefined, this))
+                }, undefined, false, undefined, this)
+              ]
+            }, undefined, true, undefined, this)
+          }, undefined, false, undefined, this),
+          hasExamples && /* @__PURE__ */ jsxDEV3("div", {
+            style: { position: "sticky", top: "5rem" },
+            children: [
+              /* @__PURE__ */ jsxDEV3("h3", {
+                className: "text-sm font-semibold uppercase tracking-wide text-muted-foreground mb-4",
+                children: "Example"
+              }, undefined, false, undefined, this),
+              renderExample ? renderExample(exampleCode, `${exp.name.toLowerCase().replace(/[^a-z0-9]/g, "-")}.ts`) : /* @__PURE__ */ jsxDEV3("pre", {
+                className: "rounded-lg border border-border bg-muted/30 p-4 overflow-x-auto",
+                children: /* @__PURE__ */ jsxDEV3("code", {
+                  className: "font-mono text-sm text-foreground",
+                  children: exampleCode
+                }, undefined, false, undefined, this)
+              }, undefined, false, undefined, this)
+            ]
+          }, undefined, true, undefined, this)
+        ]
+      }, undefined, true, undefined, this)
+    ]
+  }, undefined, true, undefined, this);
+}
+
+// src/components/styled/InterfacePage.tsx
+import { jsxDEV as jsxDEV4 } from "react/jsx-dev-runtime";
+
+function InterfacePage({
+  export: exp,
+  spec,
+  renderExample
+}) {
+  const properties = exp.members?.filter((m) => m.kind === "property" || m.kind === "field" || !m.kind);
+  const methods = exp.members?.filter((m) => m.kind === "method" || m.kind === "function");
+  const hasExamples = exp.examples && exp.examples.length > 0;
+  const signature = buildSignatureString(exp);
+  return /* @__PURE__ */ jsxDEV4("div", {
+    className: "space-y-6",
+    children: [
+      exp.description && /* @__PURE__ */ jsxDEV4("p", {
+        className: "text-muted-foreground text-base leading-relaxed",
+        children: exp.description
+      }, undefined, false, undefined, this),
+      /* @__PURE__ */ jsxDEV4("section", {
+        children: [
+          /* @__PURE__ */ jsxDEV4("h2", {
+            className: "text-xl font-semibold mb-2",
+            children: "Declaration"
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV4("div", {
+            className: "rounded-lg border border-border bg-muted/30 p-4 overflow-x-auto",
+            children: /* @__PURE__ */ jsxDEV4("code", {
+              className: "font-mono text-sm text-foreground",
+              children: signature
+            }, undefined, false, undefined, this)
+          }, undefined, false, undefined, this),
+          exp.deprecated && /* @__PURE__ */ jsxDEV4("div", {
+            className: "mt-2 rounded-md bg-yellow-500/10 border border-yellow-500/20 px-3 py-2 text-sm text-yellow-600 dark:text-yellow-400",
+            children: [
+              /* @__PURE__ */ jsxDEV4("strong", {
+                children: "Deprecated:"
+              }, undefined, false, undefined, this),
+              " This export is deprecated."
+            ]
+          }, undefined, true, undefined, this)
+        ]
+      }, undefined, true, undefined, this),
+      exp.extends && /* @__PURE__ */ jsxDEV4("section", {
+        children: [
+          /* @__PURE__ */ jsxDEV4("h2", {
+            className: "text-xl font-semibold mb-2",
+            children: "Extends"
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV4("div", {
+            className: "rounded-lg border border-border bg-card p-4",
+            children: /* @__PURE__ */ jsxDEV4("code", {
+              className: "font-mono text-sm text-primary",
+              children: exp.extends
+            }, undefined, false, undefined, this)
+          }, undefined, false, undefined, this)
+        ]
+      }, undefined, true, undefined, this),
+      properties && properties.length > 0 && /* @__PURE__ */ jsxDEV4("section", {
+        children: [
+          /* @__PURE__ */ jsxDEV4("h2", {
+            className: "text-xl font-semibold mb-2",
+            children: "Properties"
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV4("div", {
+            className: "overflow-x-auto",
+            children: /* @__PURE__ */ jsxDEV4("table", {
+              className: "w-full text-sm border-collapse",
+              children: [
+                /* @__PURE__ */ jsxDEV4("thead", {
+                  children: /* @__PURE__ */ jsxDEV4("tr", {
+                    className: "border-b border-border",
+                    children: [
+                      /* @__PURE__ */ jsxDEV4("th", {
+                        className: "text-left py-2 px-3 font-medium text-muted-foreground",
+                        children: "Name"
+                      }, undefined, false, undefined, this),
+                      /* @__PURE__ */ jsxDEV4("th", {
+                        className: "text-left py-2 px-3 font-medium text-muted-foreground",
+                        children: "Type"
+                      }, undefined, false, undefined, this),
+                      /* @__PURE__ */ jsxDEV4("th", {
+                        className: "text-left py-2 px-3 font-medium text-muted-foreground",
+                        children: "Description"
+                      }, undefined, false, undefined, this)
+                    ]
+                  }, undefined, true, undefined, this)
+                }, undefined, false, undefined, this),
+                /* @__PURE__ */ jsxDEV4("tbody", {
+                  children: properties.map((prop, index) => /* @__PURE__ */ jsxDEV4("tr", {
+                    className: "border-b border-border last:border-0",
+                    children: [
+                      /* @__PURE__ */ jsxDEV4("td", {
+                        className: "py-2 px-3 align-top",
+                        children: /* @__PURE__ */ jsxDEV4("code", {
+                          className: "text-primary font-mono text-xs bg-secondary px-1.5 py-0.5 rounded",
+                          children: prop.name
+                        }, undefined, false, undefined, this)
+                      }, undefined, false, undefined, this),
+                      /* @__PURE__ */ jsxDEV4("td", {
+                        className: "py-2 px-3 align-top",
+                        children: /* @__PURE__ */ jsxDEV4("code", {
+                          className: "font-mono text-xs text-muted-foreground",
+                          children: formatSchema(prop.schema)
+                        }, undefined, false, undefined, this)
+                      }, undefined, false, undefined, this),
+                      /* @__PURE__ */ jsxDEV4("td", {
+                        className: "py-2 px-3 align-top text-muted-foreground",
+                        children: prop.description ?? ""
+                      }, undefined, false, undefined, this)
+                    ]
+                  }, prop.name ?? index, true, undefined, this))
+                }, undefined, false, undefined, this)
+              ]
+            }, undefined, true, undefined, this)
+          }, undefined, false, undefined, this)
+        ]
+      }, undefined, true, undefined, this),
+      methods && methods.length > 0 && /* @__PURE__ */ jsxDEV4("section", {
+        children: [
+          /* @__PURE__ */ jsxDEV4("h2", {
+            className: "text-xl font-semibold mb-2",
+            children: "Methods"
+          }, undefined, false, undefined, this),
+          /* @__PURE__ */ jsxDEV4("div", {
+            className: "space-y-4",
+            children: methods.map((method, index) => {
+              const sig = method.signatures?.[0];
+              const params = sig?.parameters ?? [];
+              const returnType = formatSchema(sig?.returns?.schema);
+              return /* @__PURE__ */ jsxDEV4("div", {
+                className: "rounded-lg border border-border p-4",
+                children: [
+                  /* @__PURE__ */ jsxDEV4("code", {
+                    className: "font-mono text-sm text-primary",
+                    children: [
+                      method.name,
+                      "(",
+                      params.map((p) => {
+                        const optional = p.required === false ? "?" : "";
+                        const type = formatSchema(p.schema);
+                        return `${p.name}${optional}: ${type}`;
+                      }).join(", "),
+                      "): ",
+                      returnType
+                    ]
+                  }, undefined, true, undefined, this),
+                  method.description && /* @__PURE__ */ jsxDEV4("p", {
+                    className: "text-sm text-muted-foreground mt-2",
+                    children: method.description
+                  }, undefined, false, undefined, this)
+                ]
+              }, method.name ?? index, true, undefined, this);
+            })
+          }, undefined, false, undefined, this)
+        ]
+      }, undefined, true, undefined, this),
+      hasExamples && /* @__PURE__ */ jsxDEV4("section", {
+        children: [
+          /* @__PURE__ */ jsxDEV4("h2", {
+            className: "text-xl font-semibold mb-2",
+            children: "Examples"
+          }, undefined, false, undefined, this),
+          exp.examples.map((example, index) => {
+            const code = typeof example === "string" ? example : example.code;
+            const title = typeof example === "string" ? undefined : example.title;
+            return /* @__PURE__ */ jsxDEV4("div", {
+              className: "mb-4",
+              children: [
+                title && /* @__PURE__ */ jsxDEV4("h3", {
+                  className: "text-sm font-medium mb-2",
+                  children: title
+                }, undefined, false, undefined, this),
+                renderExample ? renderExample(code, `${exp.name.toLowerCase()}-${index}.ts`) : /* @__PURE__ */ jsxDEV4("pre", {
+                  className: "rounded-lg border border-border bg-secondary p-4 overflow-x-auto",
+                  children: /* @__PURE__ */ jsxDEV4("code", {
+                    className: "font-mono text-sm text-foreground",
+                    children: code
+                  }, undefined, false, undefined, this)
+                }, undefined, false, undefined, this)
+              ]
+            }, index, true, undefined, this);
+          })
+        ]
+      }, undefined, true, undefined, this)
+    ]
+  }, undefined, true, undefined, this);
+}
+
+// src/components/styled/VariablePage.tsx
+import { jsxDEV as jsxDEV5 } from "react/jsx-dev-runtime";
+
+function VariablePage({
+  export: exp,
+  spec,
+  renderExample
+}) {
+  const typeValue = typeof exp.type === "string" ? exp.type : formatSchema(exp.schema);
+  const hasExamples = exp.examples && exp.examples.length > 0;
+  const exampleCode = hasExamples ? typeof exp.examples[0] === "string" ? exp.examples[0] : exp.examples[0].code : "";
+  return /* @__PURE__ */ jsxDEV5("div", {
+    className: "space-y-8",
+    children: [
+      exp.description && /* @__PURE__ */ jsxDEV5("p", {
+        className: "text-muted-foreground text-lg leading-relaxed",
+        children: exp.description
+      }, undefined, false, undefined, this),
+      /* @__PURE__ */ jsxDEV5("div", {
+        className: "rounded-lg border border-border bg-muted/30 p-4 overflow-x-auto",
+        children: /* @__PURE__ */ jsxDEV5("code", {
+          className: "font-mono text-sm text-foreground whitespace-pre",
+          children: [
+            "const ",
+            exp.name,
+            ": ",
+            typeValue
+          ]
+        }, undefined, true, undefined, this)
+      }, undefined, false, undefined, this),
+      exp.deprecated && /* @__PURE__ */ jsxDEV5("div", {
+        className: "rounded-md bg-yellow-500/10 border border-yellow-500/20 px-3 py-2 text-sm text-yellow-600 dark:text-yellow-400",
+        children: [
+          /* @__PURE__ */ jsxDEV5("strong", {
+            children: "Deprecated:"
+          }, undefined, false, undefined, this),
+          " This export is deprecated."
+        ]
+      }, undefined, true, undefined, this),
+      /* @__PURE__ */ jsxDEV5("div", {
+        className: `grid gap-8 ${hasExamples ? "lg:grid-cols-2" : "grid-cols-1"}`,
+        children: [
+          /* @__PURE__ */ jsxDEV5("div", {
+            className: "space-y-6",
+            children: /* @__PURE__ */ jsxDEV5("div", {
+              children: [
+                /* @__PURE__ */ jsxDEV5("h3", {
+                  className: "text-sm font-semibold uppercase tracking-wide text-muted-foreground mb-3",
+                  children: "Type"
+                }, undefined, false, undefined, this),
+                /* @__PURE__ */ jsxDEV5("div", {
+                  className: "rounded-lg border border-border bg-card p-4",
+                  children: /* @__PURE__ */ jsxDEV5("code", {
+                    className: "font-mono text-sm text-primary",
+                    children: typeValue
+                  }, undefined, false, undefined, this)
+                }, undefined, false, undefined, this)
+              ]
+            }, undefined, true, undefined, this)
+          }, undefined, false, undefined, this),
+          hasExamples && /* @__PURE__ */ jsxDEV5("div", {
+            children: [
+              /* @__PURE__ */ jsxDEV5("h3", {
+                className: "text-sm font-semibold uppercase tracking-wide text-muted-foreground mb-3",
+                children: [
+                  exp.name,
+                  " usage"
+                ]
+              }, undefined, true, undefined, this),
+              renderExample ? renderExample(exampleCode, `${exp.name.toLowerCase()}.ts`) : /* @__PURE__ */ jsxDEV5("pre", {
+                className: "rounded-lg border border-border bg-muted/30 p-4 overflow-x-auto",
+                children: /* @__PURE__ */ jsxDEV5("code", {
+                  className: "font-mono text-sm text-foreground",
+                  children: exampleCode
+                }, undefined, false, undefined, this)
+              }, undefined, false, undefined, this)
+            ]
+          }, undefined, true, undefined, this)
+        ]
+      }, undefined, true, undefined, this)
+    ]
+  }, undefined, true, undefined, this);
+}
+
+// src/components/styled/APIPage.tsx
+import { jsxDEV as jsxDEV6 } from "react/jsx-dev-runtime";
+
+function NotFound({ id }) {
+  return /* @__PURE__ */ jsxDEV6("div", {
+    className: "rounded-lg border border-border bg-card p-6 text-center",
+    children: /* @__PURE__ */ jsxDEV6("p", {
+      className: "text-muted-foreground",
+      children: [
+        "Export ",
+        /* @__PURE__ */ jsxDEV6("code", {
+          className: "font-mono text-primary",
+          children: id
+        }, undefined, false, undefined, this),
+        " not found in spec."
+      ]
+    }, undefined, true, undefined, this)
+  }, undefined, false, undefined, this);
+}
+function NoSpec() {
+  return /* @__PURE__ */ jsxDEV6("div", {
+    className: "rounded-lg border border-red-500/20 bg-red-500/10 p-6 text-center",
+    children: /* @__PURE__ */ jsxDEV6("p", {
+      className: "text-red-600 dark:text-red-400",
+      children: [
+        "No spec provided. Pass either ",
+        /* @__PURE__ */ jsxDEV6("code", {
+          children: "spec"
+        }, undefined, false, undefined, this),
+        " or ",
+        /* @__PURE__ */ jsxDEV6("code", {
+          children: "instance"
+        }, undefined, false, undefined, this),
+        " prop."
+      ]
+    }, undefined, true, undefined, this)
+  }, undefined, false, undefined, this);
+}
+function APIPage({ spec, instance, id, renderExample }) {
+  const resolvedSpec = spec ?? instance?.spec;
+  if (!resolvedSpec) {
+    return /* @__PURE__ */ jsxDEV6(NoSpec, {}, undefined, false, undefined, this);
+  }
+  const exp = resolvedSpec.exports.find((e) => e.id === id);
+  if (!exp) {
+    return /* @__PURE__ */ jsxDEV6(NotFound, {
+      id
+    }, undefined, false, undefined, this);
+  }
+  const pageProps = { export: exp, spec: resolvedSpec, renderExample };
+  switch (exp.kind) {
+    case "function":
+      return /* @__PURE__ */ jsxDEV6(FunctionPage, {
+        ...pageProps
+      }, undefined, false, undefined, this);
+    case "class":
+      return /* @__PURE__ */ jsxDEV6(ClassPage, {
+        ...pageProps
+      }, undefined, false, undefined, this);
+    case "interface":
+    case "type":
+      return /* @__PURE__ */ jsxDEV6(InterfacePage, {
+        ...pageProps
+      }, undefined, false, undefined, this);
+    case "enum":
+      return /* @__PURE__ */ jsxDEV6(EnumPage, {
+        ...pageProps
+      }, undefined, false, undefined, this);
+    default:
+      return /* @__PURE__ */ jsxDEV6(VariablePage, {
+        ...pageProps
+      }, undefined, false, undefined, this);
+  }
+}
+export {
+  groupMembersByKind,
+  getExampleTitle,
+  getExampleLanguage,
+  getExampleCode,
+  cleanCode,
+  VariablePage,
+  TypeTable,
+  Signature,
+  ParamTable,
+  ParamRow,
+  NestedProperty,
+  MembersTable,
+  MemberRow,
+  InterfacePage,
+  FunctionPage,
+  ExpandableProperty,
+  ExampleBlock,
+  EnumPage,
+  CollapsibleMethod,
+  ClassPage,
+  APIPage
+};