@openpkg-ts/react 0.2.5 → 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.
@@ -247,11 +406,62 @@ interface TypeTableProps {
 */
 declare function TypeTable({ items, showRequired, className, renderRow }: TypeTableProps): React.ReactNode;
 import { CodeTab, CodeTabs, CodeTabsProps, ImportSection, ImportSectionProps } from "@openpkg-ts/ui/api";
-import { DocsInstance } from "@openpkg-ts/sdk";
-import { OpenPkg as OpenPkg2 } from "@openpkg-ts/spec";
+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?: OpenPkg2;
+	spec?: OpenPkg9;
 	/** Or docs instance from createDocs() */
 	instance?: DocsInstance;
 	/** Export ID to render, or undefined for index page */
@@ -282,28 +492,169 @@ interface APIPageProps {
 * ```
 */
 declare function APIPage({ spec, instance, id, baseHref, description, renderExample }: APIPageProps): React.ReactNode;
-import { OpenPkg as OpenPkg3, SpecExport as SpecExport3 } from "@openpkg-ts/spec";
-import { ReactNode as ReactNode2 } from "react";
+import { ReactNode as ReactNode12 } from "react";
+interface APIReferenceLayoutProps {
+	/** Left column content (documentation) */
+	children: ReactNode12;
+	/** Right column content (code examples) */
+	examples: ReactNode12;
+	/** Custom className */
+	className?: string;
+	/** Left column width on desktop (default: 58%) */
+	leftWidth?: string;
+	/** Right column width on desktop (default: 42%) */
+	rightWidth?: string;
+}
+/**
+* Two-column layout for API reference with sticky right panel.
+* Responsive: stacks vertically on mobile, two-column on desktop.
+*
+* @example
+* ```tsx
+* <APIReferenceLayout
+*   examples={<CodeExamples />}
+* >
+*   <MethodSection ... />
+* </APIReferenceLayout>
+* ```
+*/
+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: SpecExport3;
-	spec: OpenPkg3;
+	export: SpecExport10;
+	spec: OpenPkg10;
 }
 /**
 * Stripe-style class page with two-column layout.
 * Left: constructor, methods, properties. Right: sticky code examples.
 */
-declare function ClassPage({ export: exp, spec }: ClassPageProps): ReactNode2;
-import { OpenPkg as OpenPkg4, SpecExport as SpecExport4 } from "@openpkg-ts/spec";
-import { ReactNode as ReactNode3 } from "react";
+declare function ClassPage({ export: exp, spec }: ClassPageProps): ReactNode13;
+import { ReactNode as ReactNode14 } from "react";
+interface CodePanelProps {
+	/** Code content */
+	code: string;
+	/** Language for syntax highlighting */
+	language?: string;
+	/** Show line numbers */
+	showLineNumbers?: boolean;
+	/** Custom className */
+	className?: string;
+}
+/**
+* Syntax-highlighted code block with Rose Pine color scheme.
+* Lightweight client-side highlighting using regex patterns.
+*
+* @example
+* ```tsx
+* <CodePanel
+*   code={`const user = await createUser({ name: 'Jenny' });`}
+*   language="typescript"
+*   showLineNumbers
+* />
+* ```
+*/
+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: ReactNode15;
+	/** Default expanded state */
+	defaultExpanded?: boolean;
+	/** Controlled expanded state */
+	expanded?: boolean;
+	/** Controlled onChange */
+	onExpandedChange?: (expanded: boolean) => void;
+	/** Custom className */
+	className?: string;
+}
+/**
+* Accordion-style collapsible panel for code examples.
+* Used for Response, Data source, and Notes sections.
+*
+* @example
+* ```tsx
+* <CollapsiblePanel title="Response">
+*   <CodePanel code={responseJson} language="json" />
+* </CollapsiblePanel>
+* ```
+*/
+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: SpecExport4;
-	spec: OpenPkg4;
+	export: SpecExport11;
+	spec: OpenPkg11;
 }
 /**
 * Stripe-style enum page with two-column layout.
 */
-declare function EnumPage({ export: exp, spec }: EnumPageProps): ReactNode3;
-interface ExportCardProps {
+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;
+}
+/**
+* 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 { 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
+* <ExpandableParameter parameter={addressParam} />
+* ```
+*/
+declare function ExpandableParameter({ parameter, parentPath, defaultExpanded, expanded: controlledExpanded, onExpandedChange, level, className }: ExpandableParameterProps): ReactNode18;
+interface ExportCardProps2 {
 	/** Function/name */
 	name: string;
 	/** Description snippet */
@@ -319,12 +670,12 @@ interface ExportCardProps {
 * Card component for displaying exports in an index grid.
 * Features function name styling, description, and hover effects.
 */
-declare function ExportCard({ name, description, href, kind, className }: ExportCardProps): React.ReactNode;
-import { OpenPkg as OpenPkg5 } from "@openpkg-ts/spec";
-import { ReactNode as ReactNode4 } from "react";
-interface ExportIndexPageProps {
+declare function ExportCard2({ name, description, href, kind, className }: ExportCardProps2): React.ReactNode;
+import { OpenPkg as OpenPkg12 } from "@openpkg-ts/spec";
+import { ReactNode as ReactNode19 } from "react";
+interface ExportIndexPageProps2 {
 	/** OpenPkg spec */
-	spec: OpenPkg5;
+	spec: OpenPkg12;
 	/** Base href for links (e.g., '/docs/api') */
 	baseHref: string;
 	/** Optional intro description */
@@ -340,12 +691,12 @@ interface ExportIndexPageProps {
 * Index page showing all exports in a grid, grouped by category.
 * AI SDK-style clean layout with responsive 2-column grid.
 */
-declare function ExportIndexPage({ spec, baseHref, description, className, showSearch, showFilters }: ExportIndexPageProps): ReactNode4;
-import { OpenPkg as OpenPkg6, SpecExportKind } from "@openpkg-ts/spec";
-import { ReactNode as ReactNode5 } 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: OpenPkg6;
+	spec: OpenPkg13;
 	/** Filter to specific kinds (default: all) */
 	kinds?: SpecExportKind[];
 	/** Show kind filter buttons (default: true) */
@@ -355,7 +706,7 @@ interface FullAPIReferencePageProps {
 	/** Custom title (default: spec.meta.name) */
 	title?: string;
 	/** Custom description */
-	description?: ReactNode5;
+	description?: ReactNode20;
 	/** Custom className */
 	className?: string;
 }
@@ -375,33 +726,140 @@ interface FullAPIReferencePageProps {
 * <FullAPIReferencePage spec={spec} kinds={['function']} title="Functions" />
 * ```
 */
-declare function FullAPIReferencePage({ spec, kinds, showFilters, showTOC, title, description, className }: FullAPIReferencePageProps): ReactNode5;
-import { OpenPkg as OpenPkg7, SpecExport as SpecExport5 } from "@openpkg-ts/spec";
-import { ReactNode as ReactNode6 } 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: SpecExport5;
-	spec: OpenPkg7;
+	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): ReactNode6;
-import { OpenPkg as OpenPkg8, SpecExport as SpecExport6 } from "@openpkg-ts/spec";
-import { ReactNode as ReactNode7 } 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: SpecExport6;
-	spec: OpenPkg8;
+	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): ReactNode7;
-import { SpecSchema as SpecSchema3, SpecSignatureParameter as SpecSignatureParameter5 } from "@openpkg-ts/spec";
+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 */
-	param: SpecSignatureParameter5;
+	param: SpecSignatureParameter9;
 	/** Nesting depth for indentation */
 	depth?: number;
 	/** Custom className */
@@ -411,7 +869,7 @@ interface NestedPropertyItemProps {
 	/** Property name */
 	name: string;
 	/** Property schema */
-	schema: SpecSchema3;
+	schema: SpecSchema5;
 	/** Is this property required */
 	required?: boolean;
 	/** Nesting depth */
@@ -425,80 +883,153 @@ interface NestedPropertyItemProps {
 * Will be removed in next major version.
 */
 declare function ParameterItem({ param, depth, className }: ParameterItemProps): React.ReactNode;
-import { OpenPkg as OpenPkg9, SpecExport as SpecExport7 } from "@openpkg-ts/spec";
-import { ReactNode as ReactNode8 } from "react";
-interface ClassSectionProps {
-	export: SpecExport7;
-	spec: OpenPkg9;
+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 {
+	export: SpecExport16;
+	spec: OpenPkg18;
 }
 /**
 * Class section for use in single-page API reference.
 * Renders an APISection with constructor, methods, and properties.
 */
-declare function ClassSection({ export: exp, spec }: ClassSectionProps): ReactNode8;
-import { OpenPkg as OpenPkg10, SpecExport as SpecExport8 } from "@openpkg-ts/spec";
-import { ReactNode as ReactNode9 } from "react";
-interface EnumSectionProps {
-	export: SpecExport8;
-	spec: OpenPkg10;
+declare function ClassSection2({ export: exp, spec }: ClassSectionProps2): ReactNode29;
+import { OpenPkg as OpenPkg19, SpecExport as SpecExport17 } from "@openpkg-ts/spec";
+import { ReactNode as ReactNode30 } from "react";
+interface EnumSectionProps2 {
+	export: SpecExport17;
+	spec: OpenPkg19;
 }
 /**
 * Enum section for use in single-page API reference.
 * Renders an APISection with enum members.
 */
-declare function EnumSection({ export: exp, spec }: EnumSectionProps): ReactNode9;
-import { OpenPkg as OpenPkg11, SpecExport as SpecExport9 } from "@openpkg-ts/spec";
-import { ReactNode as ReactNode10 } from "react";
+declare function EnumSection2({ export: exp, spec }: EnumSectionProps2): ReactNode30;
+import { OpenPkg as OpenPkg20, SpecExport as SpecExport18 } from "@openpkg-ts/spec";
+import { ReactNode as ReactNode31 } from "react";
 interface ExportSectionProps {
-	export: SpecExport9;
-	spec: OpenPkg11;
+	export: SpecExport18;
+	spec: OpenPkg20;
 }
 /**
 * Router component that renders the appropriate section based on kind.
 * Used by FullAPIReferencePage to render each inline.
 */
-declare function ExportSection({ export: exp, spec }: ExportSectionProps): ReactNode10;
-import { OpenPkg as OpenPkg12, SpecExport as SpecExport10 } from "@openpkg-ts/spec";
-import { ReactNode as ReactNode11 } from "react";
-interface FunctionSectionProps {
-	export: SpecExport10;
-	spec: OpenPkg12;
+declare function ExportSection({ export: exp, spec }: ExportSectionProps): ReactNode31;
+import { OpenPkg as OpenPkg21, SpecExport as SpecExport19 } from "@openpkg-ts/spec";
+import { ReactNode as ReactNode32 } from "react";
+interface FunctionSectionProps2 {
+	export: SpecExport19;
+	spec: OpenPkg21;
 }
 /**
 * Function section for use in single-page API reference.
 * Renders an APISection with parameters and returns.
 */
-declare function FunctionSection({ export: exp, spec }: FunctionSectionProps): ReactNode11;
-import { OpenPkg as OpenPkg13, SpecExport as SpecExport11 } from "@openpkg-ts/spec";
-import { ReactNode as ReactNode12 } from "react";
-interface InterfaceSectionProps {
-	export: SpecExport11;
-	spec: OpenPkg13;
+declare function FunctionSection2({ export: exp, spec }: FunctionSectionProps2): ReactNode32;
+import { OpenPkg as OpenPkg22, SpecExport as SpecExport20 } from "@openpkg-ts/spec";
+import { ReactNode as ReactNode33 } from "react";
+interface InterfaceSectionProps2 {
+	export: SpecExport20;
+	spec: OpenPkg22;
 }
 /**
 * Interface/type section for use in single-page API reference.
 * Renders an APISection with properties and methods.
 */
-declare function InterfaceSection({ export: exp, spec }: InterfaceSectionProps): ReactNode12;
-import { OpenPkg as OpenPkg14, SpecExport as SpecExport12 } from "@openpkg-ts/spec";
-import { ReactNode as ReactNode13 } from "react";
-interface VariableSectionProps {
-	export: SpecExport12;
-	spec: OpenPkg14;
+declare function InterfaceSection2({ export: exp, spec }: InterfaceSectionProps2): ReactNode33;
+import { OpenPkg as OpenPkg23, SpecExport as SpecExport21 } from "@openpkg-ts/spec";
+import { ReactNode as ReactNode34 } from "react";
+interface VariableSectionProps2 {
+	export: SpecExport21;
+	spec: OpenPkg23;
 }
 /**
 * Variable/constant section for use in single-page API reference.
 * Renders an APISection with type information.
 */
-declare function VariableSection({ export: exp, spec }: VariableSectionProps): ReactNode13;
-import { OpenPkg as OpenPkg15, SpecExport as SpecExport13 } from "@openpkg-ts/spec";
-import { ReactNode as ReactNode14 } from "react";
+declare function VariableSection2({ export: exp, spec }: VariableSectionProps2): ReactNode34;
+import { OpenPkg as OpenPkg24, SpecExport as SpecExport22 } from "@openpkg-ts/spec";
+import { ReactNode as ReactNode35 } from "react";
 interface VariablePageProps {
-	export: SpecExport13;
-	spec: OpenPkg15;
+	export: SpecExport22;
+	spec: OpenPkg24;
 }
 /**
 * Stripe-style variable/constant page with two-column layout.
 */
-declare function VariablePage({ export: exp, spec }: VariablePageProps): ReactNode14;
-export { specSchemaToAPISchema, specParamToAPIParam, specExamplesToCodeExamples, groupMembersByKind, getLanguagesFromExamples, getExampleTitle, getExampleLanguage, getExampleCode, cleanCode, buildImportStatement, VariableSectionProps, VariableSection, VariablePageProps, VariablePage, TypeTableProps, TypeTable, SignatureProps, Signature, ParameterItemProps, ParameterItem, ParamTableProps, ParamTable, ParamRowProps, ParamRow, NestedPropertyProps, NestedPropertyItemProps, NestedProperty, MembersTableProps, MembersTable, MemberRowProps, MemberRow, MemberGroups, InterfaceSectionProps, InterfaceSection, InterfacePageProps, InterfacePage, ImportSectionProps, ImportSection, FunctionSectionProps, FunctionSection, FunctionPageProps, FunctionPage, FullAPIReferencePageProps, FullAPIReferencePage, ExportSectionProps, ExportSection, ExportIndexPageProps, ExportIndexPage, ExportCardProps, ExportCard, ExpandablePropertyProps, ExpandableProperty, ExampleBlockProps, ExampleBlock, EnumSectionProps, EnumSection, EnumPageProps, EnumPage, CollapsibleMethodProps, CollapsibleMethod, CodeTabsProps, CodeTabs, CodeTab, ClassSectionProps, ClassSection, ClassPageProps, ClassPage, APIPageProps, APIPage };
+declare function VariablePage({ export: exp, spec }: VariablePageProps): ReactNode35;
+export { useSyncSection, useSyncScroll, useMethodsFromSpec, useMethodFromSpec, specSchemaToAPISchema, specParamsToNestedParams, specParamToNestedParam, specParamToAPIParam, specExamplesToCodeExamples, specExampleToCodeExample, resolveSchemaRef, groupMembersByKind, getLanguagesFromExamples, getExampleTitle, getExampleLanguage, getExampleCode, generateDefaultExample, extractMethodData, cleanCode, buildImportStatement, VariableSectionProps2 as VariableSectionProps, VariableSection2 as VariableSection, VariablePageProps, VariablePage, TypeTableProps, TypeTable, SyncScrollProviderProps, SyncScrollProvider, SyncScrollContextValue, StripeAPIReferencePageProps, StripeAPIReferencePage, SignatureProps, Signature, ParameterItemProps, ParameterItem, ParamTableProps, ParamTable, ParamRowProps, ParamRow, NestedPropertyProps, NestedPropertyItemProps, NestedProperty, NestedParameterToggleProps, NestedParameterToggle, NestedParameterData, NestedParameterContainerProps, NestedParameterContainer, MethodSectionProps, MethodSectionFromSpecProps, MethodSectionFromSpec, MethodSection, MethodData, MembersTableProps, MembersTable, MemberRowProps, MemberRow, MemberGroups, InterfaceSectionProps2 as InterfaceSectionProps, InterfaceSection2 as InterfaceSection, InterfacePageProps, InterfacePage, ImportSectionProps, ImportSection, FunctionSectionProps2 as FunctionSectionProps, FunctionSection2 as FunctionSection, FunctionPageProps, FunctionPage, FullAPIReferencePageProps, FullAPIReferencePage, ExportSectionProps, ExportSection, ExportKind, ExportIndexPageProps2 as ExportIndexPageProps, ExportIndexPage2 as ExportIndexPage, ExportCardProps2 as ExportCardProps, ExportCard2 as ExportCard, ExpandablePropertyProps, ExpandableProperty, ExpandableParameterProps, ExpandableParameter, ExampleSectionProps, ExampleSection, ExampleChipsProps, ExampleChips, ExampleChip, ExampleBlockProps, ExampleBlock, EnumValuesSectionProps, EnumValuesSection, EnumValue, EnumSectionProps2 as EnumSectionProps, EnumSection2 as EnumSection, EnumPageProps, EnumPage, CollapsiblePanelProps, CollapsiblePanel, CollapsibleMethodProps, CollapsibleMethod, CodeTabsProps, CodeTabs, CodeTab, CodePanelProps, CodePanel, CodeExample2 as CodeExample, ClassSectionProps2 as ClassSectionProps, ClassSection2 as ClassSection, ClassPageProps, ClassPage, APIReferenceLayoutProps, APIReferenceLayout, APIParameterItemProps, APIParameterItem, APIPageProps, APIPage };