chore(site): preset pipeline — scan source directories instead of barrel files (#1333)

Co-authored-by: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

site/scripts/api-docs-builder/src/tests/e2e.test.ts

@@ -854,17 +854,18 @@ describe('Feature pipeline (end-to-end)', () => {
 // ═══════════════════════════════════════════════════════════════════════
 //
 // Presets bundle features, skins, and media elements for a specific use
-// case. They are discovered from directories under packages/{html,react}/
-// src/presets/.
+// case. They are discovered from package.json exports in
+// packages/{html,react}/.
 //
 // Key behaviors:
-//   - Discovery: directories under both HTML and React preset paths
-//   - Feature bundle: *Features export → resolved to list of feature names
-//   - HTML skins: classes extending SkinElement, with tagName
+//   - Discovery: reads package.json exports for ./X + ./X/* pairs
+//   - Feature bundle: *Features export from barrel → resolved to feature names
+//   - HTML skins: classes with static tagName whose name matches *Skin*Element
+//   - HTML media element: classes with static tagName that aren't skins or players
 //   - React skins: exports matching *Skin naming
-//   - Media element: React exports that aren't bundles or skins
-//   - Tailwind exclusion: .tailwind files/exports are filtered out
-//   - HTML media element: implied by preset name (video → <video>)
+//   - React media element: remaining exports that aren't bundles or skins
+//   - Tailwind exclusion: .tailwind files are filtered out
+//   - Player exclusion: *Player* classes are filtered out
 
 describe('Preset pipeline (end-to-end)', () => {
   const results = generatePresetReferences(FIXTURE_ROOT);
@@ -878,13 +879,13 @@ describe('Preset pipeline (end-to-end)', () => {
   // ─────────────────────────────────────────────────────────────────
 
   describe('Discovery', () => {
-    it('discovers presets from preset directories', () => {
+    it('discovers presets from package.json exports', () => {
       const names = results.map((r) => r.name).sort();
-      expect(names).toEqual(['audio', 'video']);
+      expect(names).toEqual(['audio', 'background', 'video']);
     });
 
     it('produces one result per preset', () => {
-      expect(results.length).toBe(2);
+      expect(results.length).toBe(3);
     });
   });
 
@@ -919,6 +920,11 @@ describe('Preset pipeline (end-to-end)', () => {
       expect(skinNames).not.toContain('VideoSkinTailwindElement');
     });
 
+    it('does not produce an HTML media element for native video', () => {
+      const ref = findPreset('video')!.reference;
+      expect(ref.html.mediaElement).toBeUndefined();
+    });
+
     it('detects React skins', () => {
       const skins = findPreset('video')!.reference.react.skins;
       expect(skins).toEqual(expect.arrayContaining([{ name: 'VideoSkin' }, { name: 'MinimalVideoSkin' }]));
@@ -955,6 +961,11 @@ describe('Preset pipeline (end-to-end)', () => {
       expect(skins).toEqual([{ name: 'AudioSkinElement', tagName: 'audio-skin' }]);
     });
 
+    it('does not produce an HTML media element for native audio', () => {
+      const ref = findPreset('audio')!.reference;
+      expect(ref.html.mediaElement).toBeUndefined();
+    });
+
     it('detects single React skin', () => {
       const skins = findPreset('audio')!.reference.react.skins;
       expect(skins).toEqual([{ name: 'AudioSkin' }]);
@@ -966,6 +977,47 @@ describe('Preset pipeline (end-to-end)', () => {
     });
   });
 
+  // ─────────────────────────────────────────────────────────────────
+  // BACKGROUND PRESET (incomplete barrel, custom media element)
+  // ─────────────────────────────────────────────────────────────────
+
+  describe('background preset', () => {
+    it('identifies the feature bundle', () => {
+      const ref = findPreset('background')!.reference;
+      expect(ref.featureBundle).toBe('backgroundFeatures');
+    });
+
+    it('resolves empty features array', () => {
+      const ref = findPreset('background')!.reference;
+      expect(ref.features).toEqual([]);
+    });
+
+    it('detects HTML skin from directory scan (not in barrel)', () => {
+      const skins = findPreset('background')!.reference.html.skins;
+      expect(skins).toEqual([{ name: 'BackgroundVideoSkinElement', tagName: 'background-video-skin' }]);
+    });
+
+    it('detects HTML media element via export * chain', () => {
+      const ref = findPreset('background')!.reference;
+      expect(ref.html.mediaElement).toBe('background-video');
+    });
+
+    it('excludes player elements', () => {
+      const skinNames = findPreset('background')!.reference.html.skins.map((s) => s.name);
+      expect(skinNames).not.toContain('BackgroundVideoPlayerElement');
+    });
+
+    it('detects React skin', () => {
+      const skins = findPreset('background')!.reference.react.skins;
+      expect(skins).toEqual([{ name: 'BackgroundVideoSkin' }]);
+    });
+
+    it('detects React media element', () => {
+      const ref = findPreset('background')!.reference;
+      expect(ref.react.mediaElement).toBe('BackgroundVideo');
+    });
+  });
+
   // ─────────────────────────────────────────────────────────────────
   // CROSS-CUTTING: feature links
   // ─────────────────────────────────────────────────────────────────