feat: add @studiometa/playground-preview web component package

[titouanmathis]

Summary

Add a new @studiometa/playground-preview package that provides a <playground-preview> custom element to embed playground previews anywhere — framework-agnostic, zero configuration, zero runtime dependencies.

Closes #52

What's included

New package: packages/playground-preview/

A lightweight (~10KB gzipped, zero runtime dependencies — fflate is bundled in) web component that:

• Embeds a playground preview via an iframe pointing to a deployed playground instance
• Supports two ways to define content:
  • Short content via html, script, css attributes
  • Long content via <script type="playground/..."> children (takes precedence)
• Uses Shadow DOM for style encapsulation
• Lazy loads the iframe via IntersectionObserver (100px root margin)
• Provides controls: zoom in/out/reset, reload iframe, open in new window
• Supports theming: dark, light, or auto (follows prefers-color-scheme)
• Customizable via CSS custom properties (--pg-bg, --pg-controls-bg, etc.)
• Default base URL: https://studiometa-playground.pages.dev

Two entry points

// Auto-register — defines <playground-preview>
import '@studiometa/playground-preview';

// Class-only — register with your own tag name
import { PlaygroundPreview } from '@studiometa/playground-preview/element';
customElements.define('my-playground', PlaygroundPreview);

Usage example

<playground-preview height="80vh" theme="dark">
  <script type="playground/html">
    <div class="flex items-center gap-4">
      <h1>Hello World</h1>
    </div>
  </script>
  <script type="playground/script">
    import { Base, createApp } from '@studiometa/js-toolkit';
    class App extends Base {
      static config = { name: 'App' };
      mounted() { console.log('mounted!'); }
    }
    export default createApp(App);
  </script>
  <script type="playground/css">
    h1 { color: red; }
  </script>
</playground-preview>

Key design decisions

• Separate package rather than a new entry point in @studiometa/playground, so consumers don't pull heavy deps (esbuild-wasm, Monaco, webpack-config, etc.) just for an embed widget
• fflate bundled into the dist (not an external dependency) so the package is fully self-contained and works with a plain <script type="module"> tag — no bundler required
• <script type="playground/..."> children for long content — the browser treats unknown script types as inert (no parsing, no execution), making it the most robust option for arbitrary code
• Shadow DOM for style encapsulation in any host page
• ESM only output

Checklist

• Package scaffold (package.json, tsconfig.json, build scripts)
• PlaygroundPreview custom element implementation
• Shadow DOM styles + CSS custom properties theming
• IntersectionObserver lazy loading
• Zoom / reload / open-in-new-window controls
• <script type="playground/..."> child content support
• Attribute observation & reactivity
• Build setup (esbuild, ESM, fflate bundled)
• Added to workspace (packages/* glob)
• README documentation
• Existing tests still pass

[github-actions]

Export Size

Unchanged

@studiometa/playground

Name	Size	Diff
createPlayground	1 B	-
unzip	1 B	-
zip	1 B	-

[cloudflare-workers-and-pages]

Deploying studiometa-playground with    Cloudflare Pages

Latest commit:	cebf293
Status:	✅  Deploy successful!
Preview URL:	https://7ce9cd25.studiometa-playground.pages.dev
Branch Preview URL:	https://feature-playground-preview-w.studiometa-playground.pages.dev

View logs

[codecov]

Codecov Report

❌ Patch coverage is 57.83784% with 78 lines in your changes missing coverage. Please review.
✅ Project coverage is 14.85%. Comparing base (4b7ab60) to head (cebf293).
⚠️ Report is 17 commits behind head on main.

Files with missing lines	Patch %	Lines
...kages/playground-preview/src/playground-preview.ts	55.81%	64 Missing and 12 partials ⚠️
packages/playground-preview/src/index.ts	0.00%	2 Missing ⚠️

Additional details and impacted files

@@            Coverage Diff             @@
##            main      #53       +/-   ##
==========================================
+ Coverage   3.76%   14.85%   +11.09%     
==========================================
  Files         48       53        +5     
  Lines        717      902      +185     
  Branches     116      151       +35     
==========================================
+ Hits          27      134      +107     
- Misses       689      755       +66     
- Partials       1       13       +12     

Flag	Coverage Δ
unittests	14.85% <57.83%> (+11.09%)	⬆️

Flags with carried forward coverage won't be shown. Click here to find out more.

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.