feat(playground): add Sandpack component playground

[bntvllnt]

Closes #256

Summary

• Add a Sandpack-powered Playground tab beside each component Storybook preview.
• Add a mobile-friendly /components/[slug]/playground route generated for every registry component.
• Seed sandboxes from the first registry example with a fallback demo, include Tailwind and @vllnt/ui, and track opens with Vercel Analytics.
• Keep Sandpack client-only through a dynamic import so the editor bundle is isolated to the playground surfaces.
• Refresh the generated Sandpack Tailwind config so sandboxed examples load @vllnt/ui/tailwind-preset and scan local sandbox files plus @vllnt/ui package dist/src paths for token and component-internal classes.

Dependency tradeoff

• Adds @codesandbox/sandpack-react to apps/registry only. This brings Sandpack and CodeMirror editor dependencies for the live-editing experience, but it is route/tab scoped and not part of the package library build.

Verification at HEAD aaa7fadc3b9b9d8c4a3993b1c27be4b9d1b5a691

• pnpm -F @vllnt/ui-registry exec eslint components/playground/sandpack-playground.tsx — passed
• pnpm -F @vllnt/ui-registry exec tsc --noEmit --project tsconfig.json — passed
• pnpm -F @vllnt/ui lint — passed
• pnpm -F @vllnt/ui exec tsc --noEmit --project tsconfig.build.json — passed
• pnpm build — passed
• pnpm test:once — passed: 216 files, 1215 tests
• git diff --check — passed
• Story checks were not rerun for this review fix because this commit only changes the generated Sandpack Tailwind config string and does not touch package stories or story coverage.

CI status at HEAD aaa7fadc3b9b9d8c4a3993b1c27be4b9d1b5a691

• Quality Gates — passed
• CodeQL / Analyze (actions) — passed
• CodeQL / Analyze (javascript-typescript) — passed
• CodeQL — passed
• Enforce issue-linked PRs — passed
• Scan codebase health — passed
• Vercel Preview Comments — passed
• Vercel – storybook — passed
• Vercel – ui.vllnt.ai — failed: deployment was canceled from the Vercel Dashboard

Merge note

• This branch touches apps/registry/package.json and pnpm-lock.yaml; rebase may be needed if another registry dependency PR lands first.
• The Sandpack Tailwind review blocker is fixed, but the PR is not fully merge-safe until the canceled Vercel – ui.vllnt.ai preview check is rerun or accepted as an external cancellation.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
storybook	Ready	Preview, Comment	May 13, 2026 10:08pm
ui.vllnt.ai	Canceled		May 13, 2026 10:08pm

[bntvllnt]

Review — 1 finding (blocking, published as COMMENT)

BLOCKING

• C1 — Sandpack preview omits the VLLNT Tailwind contract
  • Evidence: apps/registry/components/playground/sandpack-playground.tsx:92-100 generates a sandbox Tailwind config with only ./index.html and ./src/**/*.{ts,tsx} content, theme.extend: {}, and no @vllnt/ui/tailwind-preset/equivalent token theme. The sandbox examples import @vllnt/ui/styles.css and @vllnt/ui/themes/default.css, and both /src/main.tsx plus the fallback demo use token utilities such as bg-background, text-foreground, bg-card, and text-card-foreground. Those utilities are defined by the VLLNT Tailwind preset/theme, not Tailwind defaults.
  • Why it matters: the new playground is meant to render real @vllnt/ui examples, but Tailwind will not generate the design-token utilities or scan the package internals. Published components and the default fallback demo can render unstyled or partially styled in the preview even while the docs page itself looks correct.
  • Fix: make the generated sandbox Tailwind config consume the exported @vllnt/ui/tailwind-preset or inline the same token theme/plugin contract, and include the published package/dist/source paths needed for component-internal class scanning.

WARN

• None.

VERIFIED CLEAN

• Re-fetched PR #349 immediately before publishing; head is still 8c4961fd7bdb900848908515345c799252a5f6a0 on feat/256-sandpack-playground.
• Re-checked the previously found blocker against the live diff and package contract: @vllnt/ui exports ./tailwind-preset, while the generated sandbox config still omits it.
• Existing GitHub checks are green at this head.

VALIDATION

• Ran: gh pr view 349 --repo vllnt/ui --json ... before review and before publish.
• Ran: gh pr checks 349 --repo vllnt/ui (all listed checks passing).
• Inspected: apps/registry/components/playground/sandpack-playground.tsx, apps/registry/lib/playground.ts, packages/ui/package.json, packages/ui/src/tailwind-preset.ts, and registry/package Tailwind configs.
• Not run: live browser Sandpack smoke; this publication reconciles the already-local blocker against the current live head.

Note: GitHub rejected REQUEST_CHANGES from the current authenticated account because it is the PR author, so this formal COMMENT review carries the blocking review gate instead of a request-changes verdict.

[bntvllnt]

Blocking: this generated Tailwind config does not load the VLLNT Tailwind preset/theme or scan @vllnt/ui internals. The sandbox imports @vllnt/ui/styles.css / themes/default.css, and the examples use token utilities such as bg-background, text-foreground, bg-card, and text-card-foreground, but those utilities are not Tailwind defaults. Without @vllnt/ui/tailwind-preset (or the equivalent token theme/plugin contract plus package content scanning), the playground can render real components/default examples unstyled or partially styled even though the docs page itself is styled. Please wire the generated sandbox Tailwind config to the exported VLLNT preset and include the package paths needed for component class scanning.