feat(site): add pip button api reference

closes #530

site/scripts/api-docs-builder/src/index.ts

@@ -1,6 +1,5 @@
 import * as fs from 'node:fs';
 import * as path from 'node:path';
-import { kebabCase } from 'es-toolkit/string';
 import * as ts from 'typescript';
 import * as tae from 'typescript-api-extractor';
 import { extractCore } from './core-handler.js';
@@ -21,6 +20,11 @@ import {
 } from './types.js';
 import { kebabToPascal, partKebabFromSource, sortProps } from './utils.js';
 
+// Components whose PascalCase name doesn't match simple kebab-to-pascal conversion.
+const NAME_OVERRIDES: Record<string, string> = {
+  'pip-button': 'PiPButton',
+};
+
 function buildProps(coreData: CoreExtraction): Record<string, PropDef> {
   const props: Record<string, PropDef> = {};
   for (const prop of coreData.props) {
@@ -95,7 +99,7 @@ function discoverComponents(): ComponentSource[] {
   for (const dir of dirs) {
     if (!dir.isDirectory()) continue;
 
-    const componentName = kebabToPascal(dir.name);
+    const componentName = NAME_OVERRIDES[dir.name] ?? kebabToPascal(dir.name);
     const componentDir = path.join(CORE_UI_PATH, dir.name);
 
     // Look for core file
@@ -107,6 +111,7 @@ function discoverComponents(): ComponentSource[] {
 
     const source: ComponentSource = {
       name: componentName,
+      kebab: dir.name,
     };
 
     if (fs.existsSync(coreFile)) {
@@ -151,8 +156,7 @@ function createProgram(sources: ComponentSource[]): ts.Program {
     // For multi-part components, include all element files from the HTML directory
     // and React source files for JSDoc description extraction
     if (source.partsIndexPath) {
-      const componentKebab = kebabCase(source.name);
-      const htmlDir = path.join(HTML_UI_PATH, componentKebab);
+      const htmlDir = path.join(HTML_UI_PATH, source.kebab);
       if (fs.existsSync(htmlDir)) {
         const elementFiles = fs.readdirSync(htmlDir).filter((f) => f.endsWith('-element.ts'));
         for (const file of elementFiles) {
@@ -241,7 +245,7 @@ function discoverParts(source: ComponentSource, program: ts.Program): PartSource
   const partExports = extractParts(source.partsIndexPath, program);
   if (partExports.length === 0) return [];
 
-  const componentKebab = kebabCase(source.name);
+  const componentKebab = source.kebab;
   const htmlDir = path.join(HTML_UI_PATH, componentKebab);
 
   const parts: PartSource[] = [];
@@ -448,7 +452,7 @@ function main() {
         }
 
         // Write JSON file
-        const outputFile = path.join(OUTPUT_PATH, `${kebabCase(source.name)}.json`);
+        const outputFile = path.join(OUTPUT_PATH, `${source.kebab}.json`);
         const json = `${JSON.stringify(validated.data, null, 2)}\n`;
         fs.writeFileSync(outputFile, json);
 

site/scripts/api-docs-builder/src/types.ts

@@ -36,6 +36,8 @@ export interface PartSource {
 export interface ComponentSource {
   /** PascalCase component name (e.g., PlayButton) */
   name: string;
+  /** Original kebab-case directory name (e.g., play-button). */
+  kebab: string;
   /** Path to core file (e.g., packages/core/src/core/ui/play-button/play-button-core.ts) */
   corePath?: string;
   /** Path to data attrs file */