# Scale preview stories to every eligible library and component \(\#64\) · PR \#66 · screen/col

[View on GitCafe](https://git.cafe/screen/col/pull/66)

Repository: [screen/col](https://git.cafe/screen/col)

Visibility: public

State: merged

Source repository: screen/col

Source branch: capy/preview-coverage

Target branch: main

Head commit: 4f749470d7161bf4a1344969d6ca7abfa4a1d149

[Discussion and reviews](https://git.cafe/screen/col/pull/66)

[Commits](https://git.cafe/screen/col/pull/66/commits?format=markdown)

[Files changed](https://git.cafe/screen/col/pull/66/diffs?format=markdown)

## Description

---

Ships the component-preview coverage campaign for issue #64: preview stories now span every eligible library and component — **580 stories across 14 libraries** (from 42), with 2,320 static preview pages and 580 rendered screenshots.

## Coverage

| Library | Coverage | Notes |
| --- | --- | --- |
| radix-ui | 30/30 | rendered from the `radix-ui` package |
| shadcn-ui | 65/65 | vendored registry recipes; Toast, Typeset, and Questionnaire implemented in-module where the registry has no recipe |
| base-ui | 37/37 | |
| react-aria | 54/54 | |
| ark-ui | 52/52 | |
| mantine | 178/178 | core plus charts, dates, schedule, notifications, and the extension stack |
| mui | 114/128 | the other 14 are MUI X Pro/Premium under commercial licenses — explicit gaps, never faked |
| headless-ui | 16/16 | |
| intent-ui | 6/6 | open-source library components only |
| reui | 6/6 | free MIT components on the real dnd-kit / headless-tree engines |
| elevenlabs-ui | 6/6 | deterministic still frames where the real parts are rAF/WebGL animations |
| starwind-ui | 6/6 | |
| webcoreui | 4/4 | |
| web-awesome | 6/6 | MIT Core web components in React |

react-bits (MIT + Commons Clause) and Aceternity UI (proprietary Aceternity License) forbid source redistribution, so their components stay `preview-unavailable` with documentation links. Every shipped story sits behind a recorded `granted` reuse permission naming the library's actual license page.

## Gates

- `scripts/check-story.mjs` validates each story batch: permission record, documented component names, scenes, render-key ↔ story parity, and installed dependencies.
- A catalogue-wide coverage test requires every documented component to have either a story or a named, justified gap.
- `npm test` green end to end: build (2,320 static preview pages) → 580 screenshots → themed-render and MCP Apps widget verifications → **143/143 tests**.

## Integration notes

- Story runs land as per-library modules merged in `data/preview-stories` and `components/preview-stories`; large libraries arrive in batches under one slug.
- Library stylesheets (Mantine stack, webcoreui Sass, Web Awesome) load with the preview routes only. webcoreui's one upstream type bug is kept out of the compile by a narrow local barrel (`lib/webcoreui-react.ts`).
- MUI X community packages plus `@mui/x-chat` back the mui stories; Pro/Premium imports are gated by license.
- The screenshot renderer waits on the themed canvas and fonts rather than network quiet (third-party assets can stall `networkidle` forever), and falls back to a viewport capture with a loud log if one full-page capture misbehaves.
- Merged `origin/main` in; the tool layer keeps main's per-component verification/install/dependency anatomy and adds the `preview` payload and image blocks on top.
- The `/mcp` answer anatomy and the docs agents guide document the `preview` payload (themed URL, screenshot, rendered source, explicit gaps).
- The screenshot renderer waits on rendered state (themed canvas + fonts) instead of network quiet, so third-party assets can never stall a capture.