@openpkg-ts/react 0.3.0 → 0.3.1

package/dist/styled.d.ts

@@ -26,18 +26,176 @@ declare function getLanguagesFromExamples(examples: SpecExample[] | undefined):
 * Build import statement for an export.
 */
 declare function buildImportStatement(exp: SpecExport, spec: OpenPkg): string;
-import { SpecMember } from "@openpkg-ts/spec";
+import { SpecExample as SpecExample2 } from "@openpkg-ts/spec";
+import { ReactNode as ReactNode2 } from "react";
+interface CodeExample2 {
+	/** Unique identifier */
+	id: string;
+	/** Display label for chip */
+	label: string;
+	/** Code content */
+	code: string;
+	/** Language for highlighting */
+	language?: string;
+}
+interface ExampleSectionProps {
+	/** Section ID for sync scroll */
+	id: string;
+	/** Code examples to display */
+	examples: CodeExample2[];
+	/** Data source code (SQL/schema) */
+	dataSource?: string;
+	/** Response JSON */
+	response?: string;
+	/** Notes text */
+	notes?: ReactNode2;
+	/** Custom className */
+	className?: string;
+}
+/**
+* Complete right-column section combining chips, code, and collapsible panels.
+* Integrates with SyncScrollProvider for synchronized scrolling.
+*
+* @example
+* ```tsx
+* <ExampleSection
+*   id="select"
+*   examples={[
+*     { id: 'basic', label: 'Basic', code: '...', language: 'typescript' },
+*     { id: 'filter', label: 'With filter', code: '...', language: 'typescript' },
+*   ]}
+*   response={`{ "data": [...] }`}
+*   notes="Returns all columns by default."
+* />
+* ```
+*/
+declare function ExampleSection({ id, examples, dataSource, response, notes, className }: ExampleSectionProps): ReactNode2;
+/**
+* Convert a SpecExample to CodeExample props for ExampleSection.
+*
+* @example
+* ```tsx
+* const examples = spec.examples?.map(specExampleToCodeExample) ?? [];
+* return <ExampleSection examples={examples} />;
+* ```
+*/
+declare function specExampleToCodeExample(example: SpecExample2 | string, index: number): CodeExample2;
+/**
+* Generate a default code example from function signature.
+*/
+declare function generateDefaultExample(packageName: string, exportName: string, paramNames: string[]): CodeExample2;
+import { SpecSchema as SpecSchema2, SpecSignatureParameter as SpecSignatureParameter2 } from "@openpkg-ts/spec";
+import { ReactNode as ReactNode3 } from "react";
+interface APIParameterItemProps {
+	/** Parameter name */
+	name: string;
+	/** Parent path prefix (e.g., "options." for nested) */
+	parentPath?: string;
+	/** Parameter type */
+	type: string;
+	/** Required parameter */
+	required?: boolean;
+	/** Optional parameter (explicit) */
+	optional?: boolean;
+	/** Has expandable children */
+	expandable?: boolean;
+	/** Description */
+	description?: ReactNode3;
+	/** Nested content (params or enum) */
+	children?: ReactNode3;
+	/** Anchor ID for deep linking */
+	anchorId?: string;
+	/** Show anchor link on hover */
+	showAnchor?: boolean;
+	/** Custom className */
+	className?: string;
+}
+/**
+* Single parameter row in Stripe-style documentation.
+* Displays name, type, badges, description, and optional nested content.
+*
+* @example
+* ```tsx
+* <APIParameterItem
+*   name="email"
+*   type="string"
+*   required
+*   description="User's email address"
+* />
+* ```
+*/
+declare function APIParameterItem({ name, parentPath, type, required, optional, expandable, description, children, anchorId, showAnchor, className }: APIParameterItemProps): ReactNode3;
+import { ReactNode as ReactNode4 } from "react";
+interface EnumValue {
+	/** Enum value */
+	value: string;
+	/** Optional description */
+	description?: string;
+}
+interface EnumValuesSectionProps {
+	/** Enum values to display */
+	values: EnumValue[];
+	/** Section header (default: "Possible values") */
+	header?: string;
+	/** Custom className */
+	className?: string;
+}
+/**
+* Enum values section showing possible values with optional descriptions.
+* Used inside parameter items to show enum options.
+*
+* @example
+* ```tsx
+* <EnumValuesSection
+*   values={[
+*     { value: 'light', description: 'Light theme' },
+*     { value: 'dark', description: 'Dark theme' },
+*     { value: 'system', description: 'Follow system preference' },
+*   ]}
+* />
+* ```
+*/
+declare function EnumValuesSection({ values, header, className }: EnumValuesSectionProps): ReactNode4;
+interface NestedParameterData extends Omit<APIParameterItemProps, "children"> {
+	/** Child parameters (for objects) */
+	children?: NestedParameterData[];
+	/** Enum values (for enums) */
+	enumValues?: EnumValue[];
+	/** Original schema */
+	schema: SpecSchema2;
+}
+/**
+* Convert a SpecSignatureParameter to nested parameter data.
+* Recursively processes object properties and extracts enum values.
+*
+* @example
+* ```tsx
+* const paramData = specParamToNestedParam(param);
+* return <APIParameterItem {...paramData} />;
+* ```
+*/
+declare function specParamToNestedParam(param: SpecSignatureParameter2, parentPath?: string): NestedParameterData;
+/**
+* Convert multiple parameters to nested parameter data.
+*/
+declare function specParamsToNestedParams(params: SpecSignatureParameter2[]): NestedParameterData[];
+/**
+* Resolve a $ref in the schema against spec types.
+* Returns the resolved schema or the original if not found.
+*/
+declare function resolveSchemaRef(schema: SpecSchema2, types: Record<string, SpecSchema2>): SpecSchema2;
+import { SpecMember as SpecMember2 } from "@openpkg-ts/spec";
 interface CollapsibleMethodProps {
 	/** Method member to display */
-	member: SpecMember;
+	member: SpecMember2;
 	/** Default expanded state */
 	defaultExpanded?: boolean;
 	/** Custom className */
 	className?: string;
 	/** Custom header renderer */
-	renderHeader?: (member: SpecMember, expanded: boolean, toggle: () => void) => React.ReactNode;
+	renderHeader?: (member: SpecMember2, expanded: boolean, toggle: () => void) => React.ReactNode;
 	/** Custom content renderer */
-	renderContent?: (member: SpecMember) => React.ReactNode;
+	renderContent?: (member: SpecMember2) => React.ReactNode;
 }
 /**
 * Headless collapsible method component.
@@ -56,27 +214,27 @@ interface CollapsibleMethodProps {
 * ```
 */
 declare function CollapsibleMethod({ member, defaultExpanded, className, renderHeader, renderContent }: CollapsibleMethodProps): React.ReactNode;
-import { SpecExample as SpecExample2 } from "@openpkg-ts/spec";
+import { SpecExample as SpecExample3 } from "@openpkg-ts/spec";
 interface ExampleBlockProps {
 	/** Examples to display (string or SpecExample) */
-	examples: (string | SpecExample2)[];
+	examples: (string | SpecExample3)[];
 	/** Custom className */
 	className?: string;
 	/** Custom example renderer */
-	renderExample?: (example: string | SpecExample2, index: number) => React.ReactNode;
+	renderExample?: (example: string | SpecExample3, index: number) => React.ReactNode;
 }
 /**
 * Normalize example to string content.
 */
-declare function getExampleCode(example: string | SpecExample2): string;
+declare function getExampleCode(example: string | SpecExample3): string;
 /**
 * Get example title if available.
 */
-declare function getExampleTitle(example: string | SpecExample2): string | undefined;
+declare function getExampleTitle(example: string | SpecExample3): string | undefined;
 /**
 * Get example language.
 */
-declare function getExampleLanguage(example: string | SpecExample2): string;
+declare function getExampleLanguage(example: string | SpecExample3): string;
 /**
 * Clean code by removing markdown fences.
 */
@@ -96,10 +254,10 @@ declare function cleanCode(code: string): string;
 * ```
 */
 declare function ExampleBlock({ examples, className, renderExample }: ExampleBlockProps): React.ReactNode;
-import { SpecSchema as SpecSchema2, SpecSignatureParameter as SpecSignatureParameter2 } from "@openpkg-ts/spec";
+import { SpecSchema as SpecSchema3, SpecSignatureParameter as SpecSignatureParameter3 } from "@openpkg-ts/spec";
 interface ExpandablePropertyProps {
 	/** Parameter to display */
-	param: SpecSignatureParameter2;
+	param: SpecSignatureParameter3;
 	/** Nesting depth */
 	depth?: number;
 	/** Custom className */
@@ -109,7 +267,7 @@ interface NestedPropertyProps {
 	/** Property name */
 	name: string;
 	/** Property schema */
-	schema: SpecSchema2;
+	schema: SpecSchema3;
 	/** Is required */
 	required?: boolean;
 	/** Nesting depth */
@@ -128,30 +286,31 @@ declare function NestedProperty({ name, schema, required, depth }: NestedPropert
 * ```
 */
 declare function ExpandableProperty({ param, depth, className }: ExpandablePropertyProps): React.ReactNode;
-import { SpecMember as SpecMember2 } from "@openpkg-ts/spec";
+type ExportKind = "function" | "type" | "variable" | "class" | "interface" | "enum";
+import { SpecMember as SpecMember5 } from "@openpkg-ts/spec";
 interface MembersTableProps {
 	/** Members to display */
-	members: SpecMember2[];
+	members: SpecMember5[];
 	/** Custom className */
 	className?: string;
 	/** Group by kind (constructor, property, method) */
 	groupByKind?: boolean;
 	/** Custom member renderer */
-	renderMember?: (member: SpecMember2, index: number) => React.ReactNode;
+	renderMember?: (member: SpecMember5, index: number) => React.ReactNode;
 }
 interface MemberGroups {
-	constructors: SpecMember2[];
-	properties: SpecMember2[];
-	methods: SpecMember2[];
-	accessors: SpecMember2[];
-	other: SpecMember2[];
+	constructors: SpecMember5[];
+	properties: SpecMember5[];
+	methods: SpecMember5[];
+	accessors: SpecMember5[];
+	other: SpecMember5[];
 }
 /**
 * Group members by their kind.
 */
-declare function groupMembersByKind(members: SpecMember2[]): MemberGroups;
+declare function groupMembersByKind(members: SpecMember5[]): MemberGroups;
 interface MemberRowProps {
-	member: SpecMember2;
+	member: SpecMember5;
 }
 /**
 * Individual member row.
@@ -166,19 +325,19 @@ declare function MemberRow({ member }: MemberRowProps): React.ReactNode;
 * ```
 */
 declare function MembersTable({ members, className, groupByKind, renderMember }: MembersTableProps): React.ReactNode;
-import { SpecMember as SpecMember3, SpecSignatureParameter as SpecSignatureParameter3 } from "@openpkg-ts/spec";
+import { SpecMember as SpecMember6, SpecSignatureParameter as SpecSignatureParameter5 } from "@openpkg-ts/spec";
 interface ParamTableProps {
 	/** Parameters or members to display */
-	items: (SpecSignatureParameter3 | SpecMember3)[];
+	items: (SpecSignatureParameter5 | SpecMember6)[];
 	/** Show required indicator */
 	showRequired?: boolean;
 	/** Custom className */
 	className?: string;
 	/** Render custom row */
-	renderRow?: (item: SpecSignatureParameter3 | SpecMember3, index: number) => React.ReactNode;
+	renderRow?: (item: SpecSignatureParameter5 | SpecMember6, index: number) => React.ReactNode;
 }
 interface ParamRowProps {
-	item: SpecSignatureParameter3 | SpecMember3;
+	item: SpecSignatureParameter5 | SpecMember6;
 	showRequired?: boolean;
 }
 /**
@@ -200,10 +359,10 @@ declare function ParamRow({ item, showRequired }: ParamRowProps): React.ReactNod
 * ```
 */
 declare function ParamTable({ items, showRequired, className, renderRow }: ParamTableProps): React.ReactNode;
-import { SpecExport as SpecExport2 } from "@openpkg-ts/spec";
+import { SpecExport as SpecExport7 } from "@openpkg-ts/spec";
 interface SignatureProps {
 	/** The to render signature for */
-	export: SpecExport2;
+	export: SpecExport7;
 	/** Index of signature to render (for overloaded functions) */
 	signatureIndex?: number;
 	/** Custom className */
@@ -226,16 +385,16 @@ interface SignatureProps {
 * ```
 */
 declare function Signature({ export: exp, signatureIndex, className, children }: SignatureProps): React.ReactNode;
-import { SpecMember as SpecMember4, SpecSignatureParameter as SpecSignatureParameter4 } from "@openpkg-ts/spec";
+import { SpecMember as SpecMember7, SpecSignatureParameter as SpecSignatureParameter6 } from "@openpkg-ts/spec";
 interface TypeTableProps {
 	/** Members or parameters to display */
-	items: (SpecSignatureParameter4 | SpecMember4)[];
+	items: (SpecSignatureParameter6 | SpecMember7)[];
 	/** Show required indicator */
 	showRequired?: boolean;
 	/** Custom className */
 	className?: string;
 	/** Render custom row */
-	renderRow?: (item: SpecSignatureParameter4 | SpecMember4, index: number) => React.ReactNode;
+	renderRow?: (item: SpecSignatureParameter6 | SpecMember7, index: number) => React.ReactNode;
 }
 /**
 * Headless type table for displaying interface/type members.
@@ -246,14 +405,99 @@ interface TypeTableProps {
 * ```
 */
 declare function TypeTable({ items, showRequired, className, renderRow }: TypeTableProps): React.ReactNode;
-type ExportKind = "function" | "type" | "variable" | "class" | "interface" | "enum";
 import { CodeTab, CodeTabs, CodeTabsProps, ImportSection, ImportSectionProps } from "@openpkg-ts/ui/api";
-import { ReactNode as ReactNode9 } from "react";
+import { OpenPkg as OpenPkg8, SpecExample as SpecExample4, SpecExport as SpecExport9, SpecSchema as SpecSchema4, SpecSignatureParameter as SpecSignatureParameter7 } from "@openpkg-ts/spec";
+interface MethodData {
+	/** Export data */
+	export: SpecExport9;
+	/** Method title (function name with parens) */
+	title: string;
+	/** Full signature string */
+	signature: string;
+	/** Description text */
+	description?: string;
+	/** Parameters from first signature */
+	parameters: SpecSignatureParameter7[];
+	/** Examples from or signature */
+	examples: SpecExample4[];
+	/** Return type schema */
+	returnType?: SpecSchema4;
+	/** Return type formatted */
+	returnTypeString?: string;
+	/** Return description */
+	returnDescription?: string;
+	/** Is async function */
+	isAsync?: boolean;
+}
+/**
+* Extract method data from a spec export.
+* Provides all data needed to render a MethodSection.
+*
+* @example
+* ```tsx
+* const method = useMethodFromSpec(spec, 'createClient');
+* return (
+*   <MethodSection
+*     id={method.export.id}
+*     title={method.title}
+*     signature={method.signature}
+*     description={method.description}
+*   >
+*     {method.parameters.map(p => <ExpandableParameter parameter={p} />)}
+*   </MethodSection>
+* );
+* ```
+*/
+declare function useMethodFromSpec(spec: OpenPkg8, exportName: string): MethodData | null;
+/**
+* Extract method data from all function exports.
+*/
+declare function useMethodsFromSpec(spec: OpenPkg8): MethodData[];
+/**
+* Pure function to extract method data from an export.
+*/
+declare function extractMethodData(exp: SpecExport9, _spec: OpenPkg8): MethodData;
+import { DocsInstance } from "@openpkg-ts/sdk/browser";
+import { OpenPkg as OpenPkg9 } from "@openpkg-ts/spec";
+interface APIPageProps {
+	/** Direct spec object */
+	spec?: OpenPkg9;
+	/** Or docs instance from createDocs() */
+	instance?: DocsInstance;
+	/** Export ID to render, or undefined for index page */
+	id?: string;
+	/** Base href for index page links (required when id is undefined) */
+	baseHref?: string;
+	/** Description for index page */
+	description?: string;
+	/** Custom code example renderer */
+	renderExample?: (code: string, filename: string) => React.ReactNode;
+}
+/**
+* Main styled API page component that renders documentation.
+*
+* Renders either:
+* - Index page (when id is undefined) showing all exports in a grid
+* - Detail page (when id is provided) showing specific docs
+*
+* @example
+* ```tsx
+* // Index mode - show all exports
+* <APIPage spec={spec} baseHref="/docs/api" />
+* ```
+*
+* @example
+* ```tsx
+* // Detail mode - show specific * <APIPage spec={spec} id="createClient" />
+* ```
+*/
+declare function APIPage({ spec, instance, id, baseHref, description, renderExample }: APIPageProps): React.ReactNode;
+import { ReactNode as ReactNode12 } from "react";
 interface APIReferenceLayoutProps {
 	/** Left column content (documentation) */
-	children: ReactNode9;
+	children: ReactNode12;
 	/** Right column content (code examples) */
-	examples: ReactNode9;
+	examples: ReactNode12;
 	/** Custom className */
 	className?: string;
 	/** Left column width on desktop (default: 58%) */
@@ -274,279 +518,19 @@ interface APIReferenceLayoutProps {
 * </APIReferenceLayout>
 * ```
 */
-declare function APIReferenceLayout({ children, examples, className, leftWidth, rightWidth }: APIReferenceLayoutProps): ReactNode9;
-import { ReactNode as ReactNode10, RefObject } from "react";
-interface SyncScrollContextValue {
-	/** Currently visible section ID */
-	activeSection: string | null;
-	/** Register a section to track */
-	registerSection: (id: string, ref: RefObject<HTMLElement | null>) => void;
-	/** Unregister a section */
-	unregisterSection: (id: string) => void;
-	/** Scroll right column to section */
-	scrollToSection: (id: string) => void;
-	/** Register the right column container */
-	registerRightColumn: (ref: RefObject<HTMLElement | null>) => void;
-}
-interface SyncScrollProviderProps {
-	children: ReactNode10;
-	/** Root margin for intersection observer (default: '-20% 0px -60% 0px') */
-	rootMargin?: string;
-	/** Scroll behavior (default: 'smooth') */
-	scrollBehavior?: ScrollBehavior;
+declare function APIReferenceLayout({ children, examples, className, leftWidth, rightWidth }: APIReferenceLayoutProps): ReactNode12;
+import { OpenPkg as OpenPkg10, SpecExport as SpecExport10 } from "@openpkg-ts/spec";
+import { ReactNode as ReactNode13 } from "react";
+interface ClassPageProps {
+	export: SpecExport10;
+	spec: OpenPkg10;
 }
 /**
-* Provider for synchronized scrolling between left and right columns.
-* Uses IntersectionObserver to track visible sections on the left,
-* and auto-scrolls the right column to matching examples.
-*
-* @example
-* ```tsx
-* <SyncScrollProvider>
-*   <APIReferenceLayout
-*     examples={
-*       <>
-*         <ExampleSection id="select" ... />
-*         <ExampleSection id="insert" ... />
-*       </>
-*     }
-*   >
-*     <MethodSection id="select" ... />
-*     <MethodSection id="insert" ... />
-*   </APIReferenceLayout>
-* </SyncScrollProvider>
-* ```
-*/
-declare function SyncScrollProvider({ children, rootMargin, scrollBehavior }: SyncScrollProviderProps): ReactNode10;
-/**
-* Hook to access sync scroll context.
-*/
-declare function useSyncScroll(): SyncScrollContextValue;
-/**
-* Hook to register a section for scroll tracking.
-*/
-declare function useSyncSection(id: string): RefObject<HTMLElement | null>;
-import { ReactNode as ReactNode11 } from "react";
-interface MethodSectionProps {
-	/** Section ID for scroll sync */
-	id: string;
-	/** Method title (e.g., "Fetch data") */
-	title: string;
-	/** Method signature (e.g., "select(columns?, options?)") */
-	signature?: string;
-	/** Method description */
-	description?: ReactNode11;
-	/** Bullet list notes */
-	notes?: string[];
-	/** Parameter content */
-	children?: ReactNode11;
-	/** Custom className */
-	className?: string;
-}
-/**
-* Container for a single API method in the documentation.
-* Renders title, signature, description, notes list, and parameters.
-*
-* @example
-* ```tsx
-* <MethodSection
-*   id="select"
-*   title="Fetch data"
-*   signature="select(columns?, options?)"
-*   description="Performs a SELECT query..."
-*   notes={['By default, returns all columns', 'Use .single() for one row']}
-* >
-*   <ParameterItem ... />
-* </MethodSection>
-* ```
-*/
-declare function MethodSection({ id, title, signature, description, notes, children, className }: MethodSectionProps): ReactNode11;
-import { ReactNode as ReactNode12 } from "react";
-interface APIParameterItemProps {
-	/** Parameter name */
-	name: string;
-	/** Parent path prefix (e.g., "options." for nested) */
-	parentPath?: string;
-	/** Parameter type */
-	type: string;
-	/** Required parameter */
-	required?: boolean;
-	/** Optional parameter (explicit) */
-	optional?: boolean;
-	/** Has expandable children */
-	expandable?: boolean;
-	/** Description */
-	description?: ReactNode12;
-	/** Nested content (params or enum) */
-	children?: ReactNode12;
-	/** Anchor ID for deep linking */
-	anchorId?: string;
-	/** Show anchor link on hover */
-	showAnchor?: boolean;
-	/** Custom className */
-	className?: string;
-}
-/**
-* Single parameter row in Stripe-style documentation.
-* Displays name, type, badges, description, and optional nested content.
-*
-* @example
-* ```tsx
-* <APIParameterItem
-*   name="email"
-*   type="string"
-*   required
-*   description="User's email address"
-* />
-* ```
-*/
-declare function APIParameterItem({ name, parentPath, type, required, optional, expandable, description, children, anchorId, showAnchor, className }: APIParameterItemProps): ReactNode12;
-import { ReactNode as ReactNode13 } from "react";
-interface NestedParameterToggleProps {
-	/** Toggle state */
-	expanded: boolean;
-	/** Toggle callback */
-	onToggle: () => void;
-	/** Optional child count to display */
-	count?: number;
-	/** Custom className */
-	className?: string;
-}
-/**
-* "Show/Hide child parameters" toggle button (Stripe-style).
-* Plus icon rotates 45deg when expanded.
-* When expanded, bottom border-radius removed to connect with container.
-*
-* @example
-* ```tsx
-* <NestedParameterToggle
-*   expanded={isOpen}
-*   onToggle={() => setIsOpen(!isOpen)}
-*   count={3}
-* />
-* ```
+* Stripe-style class page with two-column layout.
+* Left: constructor, methods, properties. Right: sticky code examples.
 */
-declare function NestedParameterToggle({ expanded, onToggle, count, className }: NestedParameterToggleProps): ReactNode13;
+declare function ClassPage({ export: exp, spec }: ClassPageProps): ReactNode13;
 import { ReactNode as ReactNode14 } from "react";
-interface NestedParameterContainerProps {
-	/** Nested parameter content */
-	children: ReactNode14;
-	/** Nesting depth level (0 = first level) */
-	level?: number;
-	/** Custom className */
-	className?: string;
-}
-/**
-* Bordered container for nested child parameters (Stripe-style).
-* Connects to NestedParameterToggle above (no top border).
-* Children separated by border-bottom only.
-*
-* @example
-* ```tsx
-* <NestedParameterToggle expanded={isOpen} onToggle={toggle} />
-* {isOpen && (
-*   <NestedParameterContainer>
-*     <APIParameterItem name="city" type="string" />
-*     <APIParameterItem name="country" type="string" />
-*   </NestedParameterContainer>
-* )}
-* ```
-*/
-declare function NestedParameterContainer({ children, level, className }: NestedParameterContainerProps): ReactNode14;
-import { SpecSignatureParameter as SpecSignatureParameter6 } from "@openpkg-ts/spec";
-import { ReactNode as ReactNode15 } from "react";
-interface ExpandableParameterProps {
-	/** Parameter from spec */
-	parameter: SpecSignatureParameter6;
-	/** Parent path prefix */
-	parentPath?: string;
-	/** Default expanded state */
-	defaultExpanded?: boolean;
-	/** Controlled expanded state */
-	expanded?: boolean;
-	/** Controlled onChange */
-	onExpandedChange?: (expanded: boolean) => void;
-	/** Nesting depth */
-	level?: number;
-	/** Custom className */
-	className?: string;
-}
-/**
-* Compound component combining APIParameterItem + NestedParameterToggle + NestedParameterContainer.
-* Automatically extracts nested object properties and enum values from spec schema.
-*
-* @example
-* ```tsx
-* <ExpandableParameter parameter={addressParam} />
-* ```
-*/
-declare function ExpandableParameter({ parameter, parentPath, defaultExpanded, expanded: controlledExpanded, onExpandedChange, level, className }: ExpandableParameterProps): ReactNode15;
-import { ReactNode as ReactNode16 } from "react";
-interface EnumValue {
-	/** Enum value */
-	value: string;
-	/** Optional description */
-	description?: string;
-}
-interface EnumValuesSectionProps {
-	/** Enum values to display */
-	values: EnumValue[];
-	/** Section header (default: "Possible values") */
-	header?: string;
-	/** Custom className */
-	className?: string;
-}
-/**
-* Enum values section showing possible values with optional descriptions.
-* Used inside parameter items to show enum options.
-*
-* @example
-* ```tsx
-* <EnumValuesSection
-*   values={[
-*     { value: 'light', description: 'Light theme' },
-*     { value: 'dark', description: 'Dark theme' },
-*     { value: 'system', description: 'Follow system preference' },
-*   ]}
-* />
-* ```
-*/
-declare function EnumValuesSection({ values, header, className }: EnumValuesSectionProps): ReactNode16;
-import { ReactNode as ReactNode17 } from "react";
-interface ExampleChip {
-	/** Unique identifier */
-	id: string;
-	/** Display label */
-	label: string;
-}
-interface ExampleChipsProps {
-	/** Available examples */
-	examples: ExampleChip[];
-	/** Currently active example ID */
-	activeId: string;
-	/** Selection callback */
-	onSelect: (id: string) => void;
-	/** Custom className */
-	className?: string;
-}
-/**
-* Tab-like chips for switching between code examples.
-* Used in the right column to select different example variations.
-*
-* @example
-* ```tsx
-* <ExampleChips
-*   examples={[
-*     { id: 'basic', label: 'Basic' },
-*     { id: 'with-filter', label: 'With filter' },
-*   ]}
-*   activeId="basic"
-*   onSelect={setActiveExample}
-* />
-* ```
-*/
-declare function ExampleChips({ examples, activeId, onSelect, className }: ExampleChipsProps): ReactNode17;
-import { ReactNode as ReactNode18 } from "react";
 interface CodePanelProps {
 	/** Code content */
 	code: string;
@@ -570,13 +554,13 @@ interface CodePanelProps {
 * />
 * ```
 */
-declare function CodePanel({ code, language, showLineNumbers, className }: CodePanelProps): ReactNode18;
-import { ReactNode as ReactNode19 } from "react";
+declare function CodePanel({ code, language, showLineNumbers, className }: CodePanelProps): ReactNode14;
+import { ReactNode as ReactNode15 } from "react";
 interface CollapsiblePanelProps {
 	/** Panel title (e.g., "Response", "Data source") */
 	title: string;
 	/** Panel content */
-	children: ReactNode19;
+	children: ReactNode15;
 	/** Default expanded state */
 	defaultExpanded?: boolean;
 	/** Controlled expanded state */
@@ -597,243 +581,79 @@ interface CollapsiblePanelProps {
 * </CollapsiblePanel>
 * ```
 */
-declare function CollapsiblePanel({ title, children, defaultExpanded, expanded: controlledExpanded, onExpandedChange, className }: CollapsiblePanelProps): ReactNode19;
-import { ReactNode as ReactNode20 } from "react";
-interface CodeExample2 {
-	/** Unique identifier */
-	id: string;
-	/** Display label for chip */
-	label: string;
-	/** Code content */
-	code: string;
-	/** Language for highlighting */
-	language?: string;
-}
-interface ExampleSectionProps {
-	/** Section ID for sync scroll */
-	id: string;
-	/** Code examples to display */
-	examples: CodeExample2[];
-	/** Data source code (SQL/schema) */
-	dataSource?: string;
-	/** Response JSON */
-	response?: string;
-	/** Notes text */
-	notes?: ReactNode20;
-	/** Custom className */
-	className?: string;
-}
-/**
-* Complete right-column section combining chips, code, and collapsible panels.
-* Integrates with SyncScrollProvider for synchronized scrolling.
-*
-* @example
-* ```tsx
-* <ExampleSection
-*   id="select"
-*   examples={[
-*     { id: 'basic', label: 'Basic', code: '...', language: 'typescript' },
-*     { id: 'filter', label: 'With filter', code: '...', language: 'typescript' },
-*   ]}
-*   response={`{ "data": [...] }`}
-*   notes="Returns all columns by default."
-* />
-* ```
-*/
-declare function ExampleSection({ id, examples, dataSource, response, notes, className }: ExampleSectionProps): ReactNode20;
-import { OpenPkg as OpenPkg8, SpecExport as SpecExport9 } from "@openpkg-ts/spec";
-import { ReactNode as ReactNode21 } from "react";
-interface MethodSectionFromSpecProps {
-	/** OpenPkg spec */
-	spec: OpenPkg8;
-	/** Export to render (by name or object) */
-	export: string | SpecExport9;
-	/** Custom className */
-	className?: string;
-}
-/**
-* Auto-generates MethodSection from spec data.
-* Extracts parameters, description, and notes from the export.
-*
-* @example
-* ```tsx
-* <MethodSectionFromSpec spec={spec} export="createClient" />
-* ```
-*/
-declare function MethodSectionFromSpec({ spec, export: exportProp, className }: MethodSectionFromSpecProps): ReactNode21;
-import { OpenPkg as OpenPkg9, SpecExport as SpecExport10 } from "@openpkg-ts/spec";
-import { ReactNode as ReactNode22 } from "react";
-interface StripeAPIReferencePageProps {
-	/** OpenPkg spec */
-	spec: OpenPkg9;
-	/** Filter exports (default: functions only) */
-	filter?: (exp: SpecExport10) => boolean;
-	/** Show all kinds, not just functions */
-	showAllKinds?: boolean;
-	/** Custom className */
-	className?: string;
-}
-/**
-* Full Stripe/Supabase-style API reference page.
-* Two-column layout with synchronized scrolling.
-*
-* @example
-* ```tsx
-* <StripeAPIReferencePage spec={spec} />
-* ```
-*/
-declare function StripeAPIReferencePage({ spec, filter, showAllKinds, className }: StripeAPIReferencePageProps): ReactNode22;
-import { OpenPkg as OpenPkg10, SpecExample as SpecExample3, SpecExport as SpecExport11, SpecSchema as SpecSchema3, SpecSignatureParameter as SpecSignatureParameter7 } from "@openpkg-ts/spec";
-interface MethodData {
-	/** Export data */
+declare function CollapsiblePanel({ title, children, defaultExpanded, expanded: controlledExpanded, onExpandedChange, className }: CollapsiblePanelProps): ReactNode15;
+import { OpenPkg as OpenPkg11, SpecExport as SpecExport11 } from "@openpkg-ts/spec";
+import { ReactNode as ReactNode16 } from "react";
+interface EnumPageProps {
 	export: SpecExport11;
-	/** Method title (function name with parens) */
-	title: string;
-	/** Full signature string */
-	signature: string;
-	/** Description text */
-	description?: string;
-	/** Parameters from first signature */
-	parameters: SpecSignatureParameter7[];
-	/** Examples from or signature */
-	examples: SpecExample3[];
-	/** Return type schema */
-	returnType?: SpecSchema3;
-	/** Return type formatted */
-	returnTypeString?: string;
-	/** Return description */
-	returnDescription?: string;
-	/** Is async function */
-	isAsync?: boolean;
+	spec: OpenPkg11;
 }
 /**
-* Extract method data from a spec export.
-* Provides all data needed to render a MethodSection.
-*
-* @example
-* ```tsx
-* const method = useMethodFromSpec(spec, 'createClient');
-* return (
-*   <MethodSection
-*     id={method.export.id}
-*     title={method.title}
-*     signature={method.signature}
-*     description={method.description}
-*   >
-*     {method.parameters.map(p => <ExpandableParameter parameter={p} />)}
-*   </MethodSection>
-* );
-* ```
-*/
-declare function useMethodFromSpec(spec: OpenPkg10, exportName: string): MethodData | null;
-/**
-* Extract method data from all function exports.
-*/
-declare function useMethodsFromSpec(spec: OpenPkg10): MethodData[];
-/**
-* Pure function to extract method data from an export.
-*/
-declare function extractMethodData(exp: SpecExport11, _spec: OpenPkg10): MethodData;
-import { SpecSchema as SpecSchema4, SpecSignatureParameter as SpecSignatureParameter8 } from "@openpkg-ts/spec";
-interface NestedParameterData extends Omit<APIParameterItemProps, "children"> {
-	/** Child parameters (for objects) */
-	children?: NestedParameterData[];
-	/** Enum values (for enums) */
-	enumValues?: EnumValue[];
-	/** Original schema */
-	schema: SpecSchema4;
-}
-/**
-* Convert a SpecSignatureParameter to nested parameter data.
-* Recursively processes object properties and extracts enum values.
-*
-* @example
-* ```tsx
-* const paramData = specParamToNestedParam(param);
-* return <APIParameterItem {...paramData} />;
-* ```
-*/
-declare function specParamToNestedParam(param: SpecSignatureParameter8, parentPath?: string): NestedParameterData;
-/**
-* Convert multiple parameters to nested parameter data.
-*/
-declare function specParamsToNestedParams(params: SpecSignatureParameter8[]): NestedParameterData[];
-/**
-* Resolve a $ref in the schema against spec types.
-* Returns the resolved schema or the original if not found.
-*/
-declare function resolveSchemaRef(schema: SpecSchema4, types: Record<string, SpecSchema4>): SpecSchema4;
-import { SpecExample as SpecExample4 } from "@openpkg-ts/spec";
-/**
-* Convert a SpecExample to CodeExample props for ExampleSection.
-*
-* @example
-* ```tsx
-* const examples = spec.examples?.map(specExampleToCodeExample) ?? [];
-* return <ExampleSection examples={examples} />;
-* ```
-*/
-declare function specExampleToCodeExample(example: SpecExample4 | string, index: number): CodeExample2;
-/**
-* Generate a default code example from function signature.
+* Stripe-style enum page with two-column layout.
 */
-declare function generateDefaultExample(packageName: string, exportName: string, paramNames: string[]): CodeExample2;
-import { DocsInstance } from "@openpkg-ts/sdk/browser";
-import { OpenPkg as OpenPkg11 } from "@openpkg-ts/spec";
-interface APIPageProps {
-	/** Direct spec object */
-	spec?: OpenPkg11;
-	/** Or docs instance from createDocs() */
-	instance?: DocsInstance;
-	/** Export ID to render, or undefined for index page */
-	id?: string;
-	/** Base href for index page links (required when id is undefined) */
-	baseHref?: string;
-	/** Description for index page */
-	description?: string;
-	/** Custom code example renderer */
-	renderExample?: (code: string, filename: string) => React.ReactNode;
+declare function EnumPage({ export: exp, spec }: EnumPageProps): ReactNode16;
+import { ReactNode as ReactNode17 } from "react";
+interface ExampleChip {
+	/** Unique identifier */
+	id: string;
+	/** Display label */
+	label: string;
+}
+interface ExampleChipsProps {
+	/** Available examples */
+	examples: ExampleChip[];
+	/** Currently active example ID */
+	activeId: string;
+	/** Selection callback */
+	onSelect: (id: string) => void;
+	/** Custom className */
+	className?: string;
 }
 /**
-* Main styled API page component that renders documentation.
-*
-* Renders either:
-* - Index page (when id is undefined) showing all exports in a grid
-* - Detail page (when id is provided) showing specific docs
+* Tab-like chips for switching between code examples.
+* Used in the right column to select different example variations.
 *
 * @example
 * ```tsx
-* // Index mode - show all exports
-* <APIPage spec={spec} baseHref="/docs/api" />
+* <ExampleChips
+*   examples={[
+*     { id: 'basic', label: 'Basic' },
+*     { id: 'with-filter', label: 'With filter' },
+*   ]}
+*   activeId="basic"
+*   onSelect={setActiveExample}
+* />
 * ```
+*/
+declare function ExampleChips({ examples, activeId, onSelect, className }: ExampleChipsProps): ReactNode17;
+import { SpecSignatureParameter as SpecSignatureParameter8 } from "@openpkg-ts/spec";
+import { ReactNode as ReactNode18 } from "react";
+interface ExpandableParameterProps {
+	/** Parameter from spec */
+	parameter: SpecSignatureParameter8;
+	/** Parent path prefix */
+	parentPath?: string;
+	/** Default expanded state */
+	defaultExpanded?: boolean;
+	/** Controlled expanded state */
+	expanded?: boolean;
+	/** Controlled onChange */
+	onExpandedChange?: (expanded: boolean) => void;
+	/** Nesting depth */
+	level?: number;
+	/** Custom className */
+	className?: string;
+}
+/**
+* Compound component combining APIParameterItem + NestedParameterToggle + NestedParameterContainer.
+* Automatically extracts nested object properties and enum values from spec schema.
 *
 * @example
 * ```tsx
-* // Detail mode - show specific * <APIPage spec={spec} id="createClient" />
+* <ExpandableParameter parameter={addressParam} />
 * ```
 */
-declare function APIPage({ spec, instance, id, baseHref, description, renderExample }: APIPageProps): React.ReactNode;
-import { OpenPkg as OpenPkg12, SpecExport as SpecExport12 } from "@openpkg-ts/spec";
-import { ReactNode as ReactNode23 } from "react";
-interface ClassPageProps {
-	export: SpecExport12;
-	spec: OpenPkg12;
-}
-/**
-* Stripe-style class page with two-column layout.
-* Left: constructor, methods, properties. Right: sticky code examples.
-*/
-declare function ClassPage({ export: exp, spec }: ClassPageProps): ReactNode23;
-import { OpenPkg as OpenPkg13, SpecExport as SpecExport13 } from "@openpkg-ts/spec";
-import { ReactNode as ReactNode24 } from "react";
-interface EnumPageProps {
-	export: SpecExport13;
-	spec: OpenPkg13;
-}
-/**
-* Stripe-style enum page with two-column layout.
-*/
-declare function EnumPage({ export: exp, spec }: EnumPageProps): ReactNode24;
+declare function ExpandableParameter({ parameter, parentPath, defaultExpanded, expanded: controlledExpanded, onExpandedChange, level, className }: ExpandableParameterProps): ReactNode18;
 interface ExportCardProps2 {
 	/** Function/name */
 	name: string;
@@ -851,11 +671,11 @@ interface ExportCardProps2 {
 * Features function name styling, description, and hover effects.
 */
 declare function ExportCard2({ name, description, href, kind, className }: ExportCardProps2): React.ReactNode;
-import { OpenPkg as OpenPkg14 } from "@openpkg-ts/spec";
-import { ReactNode as ReactNode25 } from "react";
+import { OpenPkg as OpenPkg12 } from "@openpkg-ts/spec";
+import { ReactNode as ReactNode19 } from "react";
 interface ExportIndexPageProps2 {
 	/** OpenPkg spec */
-	spec: OpenPkg14;
+	spec: OpenPkg12;
 	/** Base href for links (e.g., '/docs/api') */
 	baseHref: string;
 	/** Optional intro description */
@@ -871,12 +691,12 @@ interface ExportIndexPageProps2 {
 * Index page showing all exports in a grid, grouped by category.
 * AI SDK-style clean layout with responsive 2-column grid.
 */
-declare function ExportIndexPage2({ spec, baseHref, description, className, showSearch, showFilters }: ExportIndexPageProps2): ReactNode25;
-import { OpenPkg as OpenPkg15, SpecExportKind } from "@openpkg-ts/spec";
-import { ReactNode as ReactNode26 } from "react";
+declare function ExportIndexPage2({ spec, baseHref, description, className, showSearch, showFilters }: ExportIndexPageProps2): ReactNode19;
+import { OpenPkg as OpenPkg13, SpecExportKind } from "@openpkg-ts/spec";
+import { ReactNode as ReactNode20 } from "react";
 interface FullAPIReferencePageProps {
 	/** OpenPkg spec */
-	spec: OpenPkg15;
+	spec: OpenPkg13;
 	/** Filter to specific kinds (default: all) */
 	kinds?: SpecExportKind[];
 	/** Show kind filter buttons (default: true) */
@@ -886,7 +706,7 @@ interface FullAPIReferencePageProps {
 	/** Custom title (default: spec.meta.name) */
 	title?: string;
 	/** Custom description */
-	description?: ReactNode26;
+	description?: ReactNode20;
 	/** Custom className */
 	className?: string;
 }
@@ -906,29 +726,136 @@ interface FullAPIReferencePageProps {
 * <FullAPIReferencePage spec={spec} kinds={['function']} title="Functions" />
 * ```
 */
-declare function FullAPIReferencePage({ spec, kinds, showFilters, showTOC, title, description, className }: FullAPIReferencePageProps): ReactNode26;
-import { OpenPkg as OpenPkg16, SpecExport as SpecExport14 } from "@openpkg-ts/spec";
-import { ReactNode as ReactNode27 } from "react";
+declare function FullAPIReferencePage({ spec, kinds, showFilters, showTOC, title, description, className }: FullAPIReferencePageProps): ReactNode20;
+import { OpenPkg as OpenPkg14, SpecExport as SpecExport12 } from "@openpkg-ts/spec";
+import { ReactNode as ReactNode21 } from "react";
 interface FunctionPageProps {
-	export: SpecExport14;
-	spec: OpenPkg16;
+	export: SpecExport12;
+	spec: OpenPkg14;
 }
 /**
 * Stripe-style function page with two-column layout.
 * Left: parameters, returns. Right: sticky code examples.
 */
-declare function FunctionPage({ export: exp, spec }: FunctionPageProps): ReactNode27;
-import { OpenPkg as OpenPkg17, SpecExport as SpecExport15 } from "@openpkg-ts/spec";
-import { ReactNode as ReactNode28 } from "react";
+declare function FunctionPage({ export: exp, spec }: FunctionPageProps): ReactNode21;
+import { OpenPkg as OpenPkg15, SpecExport as SpecExport13 } from "@openpkg-ts/spec";
+import { ReactNode as ReactNode22 } from "react";
 interface InterfacePageProps {
-	export: SpecExport15;
-	spec: OpenPkg17;
+	export: SpecExport13;
+	spec: OpenPkg15;
 }
 /**
 * Stripe-style interface/type page with two-column layout.
 * Left: properties, methods. Right: sticky code examples.
 */
-declare function InterfacePage({ export: exp, spec }: InterfacePageProps): ReactNode28;
+declare function InterfacePage({ export: exp, spec }: InterfacePageProps): ReactNode22;
+import { ReactNode as ReactNode23 } from "react";
+interface MethodSectionProps {
+	/** Section ID for scroll sync */
+	id: string;
+	/** Method title (e.g., "Fetch data") */
+	title: string;
+	/** Method signature (e.g., "select(columns?, options?)") */
+	signature?: string;
+	/** Method description */
+	description?: ReactNode23;
+	/** Bullet list notes */
+	notes?: string[];
+	/** Parameter content */
+	children?: ReactNode23;
+	/** Custom className */
+	className?: string;
+}
+/**
+* Container for a single API method in the documentation.
+* Renders title, signature, description, notes list, and parameters.
+*
+* @example
+* ```tsx
+* <MethodSection
+*   id="select"
+*   title="Fetch data"
+*   signature="select(columns?, options?)"
+*   description="Performs a SELECT query..."
+*   notes={['By default, returns all columns', 'Use .single() for one row']}
+* >
+*   <ParameterItem ... />
+* </MethodSection>
+* ```
+*/
+declare function MethodSection({ id, title, signature, description, notes, children, className }: MethodSectionProps): ReactNode23;
+import { OpenPkg as OpenPkg16, SpecExport as SpecExport14 } from "@openpkg-ts/spec";
+import { ReactNode as ReactNode24 } from "react";
+interface MethodSectionFromSpecProps {
+	/** OpenPkg spec */
+	spec: OpenPkg16;
+	/** Export to render (by name or object) */
+	export: string | SpecExport14;
+	/** Custom className */
+	className?: string;
+}
+/**
+* Auto-generates MethodSection from spec data.
+* Extracts parameters, description, and notes from the export.
+*
+* @example
+* ```tsx
+* <MethodSectionFromSpec spec={spec} export="createClient" />
+* ```
+*/
+declare function MethodSectionFromSpec({ spec, export: exportProp, className }: MethodSectionFromSpecProps): ReactNode24;
+import { ReactNode as ReactNode25 } from "react";
+interface NestedParameterContainerProps {
+	/** Nested parameter content */
+	children: ReactNode25;
+	/** Nesting depth level (0 = first level) */
+	level?: number;
+	/** Custom className */
+	className?: string;
+}
+/**
+* Bordered container for nested child parameters (Stripe-style).
+* Connects to NestedParameterToggle above (no top border).
+* Children separated by border-bottom only.
+*
+* @example
+* ```tsx
+* <NestedParameterToggle expanded={isOpen} onToggle={toggle} />
+* {isOpen && (
+*   <NestedParameterContainer>
+*     <APIParameterItem name="city" type="string" />
+*     <APIParameterItem name="country" type="string" />
+*   </NestedParameterContainer>
+* )}
+* ```
+*/
+declare function NestedParameterContainer({ children, level, className }: NestedParameterContainerProps): ReactNode25;
+import { ReactNode as ReactNode26 } from "react";
+interface NestedParameterToggleProps {
+	/** Toggle state */
+	expanded: boolean;
+	/** Toggle callback */
+	onToggle: () => void;
+	/** Optional child count to display */
+	count?: number;
+	/** Custom className */
+	className?: string;
+}
+/**
+* "Show/Hide child parameters" toggle button (Stripe-style).
+* Plus icon rotates 45deg when expanded.
+* When expanded, bottom border-radius removed to connect with container.
+*
+* @example
+* ```tsx
+* <NestedParameterToggle
+*   expanded={isOpen}
+*   onToggle={() => setIsOpen(!isOpen)}
+*   count={3}
+* />
+* ```
+*/
+declare function NestedParameterToggle({ expanded, onToggle, count, className }: NestedParameterToggleProps): ReactNode26;
 import { SpecSchema as SpecSchema5, SpecSignatureParameter as SpecSignatureParameter9 } from "@openpkg-ts/spec";
 interface ParameterItemProps {
 	/** Parameter to display */
@@ -956,6 +883,79 @@ interface NestedPropertyItemProps {
 * Will be removed in next major version.
 */
 declare function ParameterItem({ param, depth, className }: ParameterItemProps): React.ReactNode;
+import { OpenPkg as OpenPkg17, SpecExport as SpecExport15 } from "@openpkg-ts/spec";
+import { ReactNode as ReactNode27 } from "react";
+interface StripeAPIReferencePageProps {
+	/** OpenPkg spec */
+	spec: OpenPkg17;
+	/** Filter exports (default: functions only) */
+	filter?: (exp: SpecExport15) => boolean;
+	/** Show all kinds, not just functions */
+	showAllKinds?: boolean;
+	/** Custom className */
+	className?: string;
+}
+/**
+* Full Stripe/Supabase-style API reference page.
+* Two-column layout with synchronized scrolling.
+*
+* @example
+* ```tsx
+* <StripeAPIReferencePage spec={spec} />
+* ```
+*/
+declare function StripeAPIReferencePage({ spec, filter, showAllKinds, className }: StripeAPIReferencePageProps): ReactNode27;
+import { ReactNode as ReactNode28, RefObject } from "react";
+interface SyncScrollContextValue {
+	/** Currently visible section ID */
+	activeSection: string | null;
+	/** Register a section to track */
+	registerSection: (id: string, ref: RefObject<HTMLElement | null>) => void;
+	/** Unregister a section */
+	unregisterSection: (id: string) => void;
+	/** Scroll right column to section */
+	scrollToSection: (id: string) => void;
+	/** Register the right column container */
+	registerRightColumn: (ref: RefObject<HTMLElement | null>) => void;
+}
+interface SyncScrollProviderProps {
+	children: ReactNode28;
+	/** Root margin for intersection observer (default: '-20% 0px -60% 0px') */
+	rootMargin?: string;
+	/** Scroll behavior (default: 'smooth') */
+	scrollBehavior?: ScrollBehavior;
+}
+/**
+* Provider for synchronized scrolling between left and right columns.
+* Uses IntersectionObserver to track visible sections on the left,
+* and auto-scrolls the right column to matching examples.
+*
+* @example
+* ```tsx
+* <SyncScrollProvider>
+*   <APIReferenceLayout
+*     examples={
+*       <>
+*         <ExampleSection id="select" ... />
+*         <ExampleSection id="insert" ... />
+*       </>
+*     }
+*   >
+*     <MethodSection id="select" ... />
+*     <MethodSection id="insert" ... />
+*   </APIReferenceLayout>
+* </SyncScrollProvider>
+* ```
+*/
+declare function SyncScrollProvider({ children, rootMargin, scrollBehavior }: SyncScrollProviderProps): ReactNode28;
+/**
+* Hook to access sync scroll context.
+*/
+declare function useSyncScroll(): SyncScrollContextValue;
+/**
+* Hook to register a section for scroll tracking.
+*/
+declare function useSyncSection(id: string): RefObject<HTMLElement | null>;
 import { OpenPkg as OpenPkg18, SpecExport as SpecExport16 } from "@openpkg-ts/spec";
 import { ReactNode as ReactNode29 } from "react";
 interface ClassSectionProps2 {