Feature/browser

[taranais]

Pull Request

Description

This PR adds a new interactive wiremd playground (playground/) to edit markdown and preview rendered output in real time.
It also includes follow-up fixes/refactors for Monaco ESM imports, split-pane resizing behavior, editor update handling, preview error reset behavior, and toast timing.

Type of Change

• Bug fix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)
• Breaking change (fix or feature that would cause existing functionality to not work as expected)
• Documentation update
• Refactoring (no functional changes)
• Performance improvement
• Test updates
• Build/tooling changes

Related Issues

Fixes #
Related to #

Changes Made

• Added a new playground/ app (Vite + TypeScript + Monaco) with its own config, dependencies, and build setup.
• Implemented live markdown editing + rendered preview + HTML view tabs, style selector, copy-to-clipboard, and error bar handling.
• Added curated example snippets (login form, dashboard, contact form, e-commerce, settings, landing page).
• Added draggable split-pane resizing with pointer events, desktop/horizontal + mobile/vertical behavior, and layout updates on resize.
• Refactored Monaco imports to ESM API, improved editor change handling (setValue suppression/debounce), reset preview state on render errors, and fixed toast timer stacking.
• Added root script: npm run playground to build core package, install playground deps, and start playground dev server.

Testing

Test Coverage

• Added new tests for new functionality
• Updated existing tests
• All tests pass locally (npm test)
• No decrease in code coverage

Manual Testing

1. Ran npm run build (root package build succeeds).
2. Ran npm test (471/471 tests passing).
3. Ran npm --prefix playground run build (playground build succeeds).
4. Started dev server with npm --prefix playground run dev -- --host 127.0.0.1 --port 4174 and verified the playground page is served.

Examples

Input

## Login Form

Username
[________]{required}

[Sign In]*

Output

<h2 class="wmd-h2">Login Form</h2>
<div class="wmd-container-form-group">
  Username
  <input type="text" class="wmd-input" required style="width: 8ch; max-width: 8ch;" />
</div>
<button class="wmd-button wmd-button-primary">Sign In</button>

Checklist

• My code follows the project's coding standards
• I have performed a self-review of my own code
• I have commented my code, particularly in hard-to-understand areas
• I have made corresponding changes to the documentation
• My changes generate no new warnings or errors
• I have added tests that prove my fix is effective or that my feature works
• New and existing unit tests pass locally with my changes
• Any dependent changes have been merged and published

Breaking Changes

• None.

Migration Guide

No migration required.

Screenshots/Recordings

Not included in this PR.

Performance Impact

• No performance impact
• Performance improved
• Performance may be affected (explain below)

Playground build includes Monaco and produces a large JS bundle (warning about chunk size). This impacts playground initial load, not the core wiremd library runtime.

Documentation

• README.md updated
• CHANGELOG.md updated
• API documentation updated (JSDoc)
• Example files added/updated
• Syntax specification updated (if syntax changes)

Additional Notes

Playground resolves wiremd to ../src/index.ts in Vite, so playground changes validate against local source during development.

Reviewer Checklist

• Code quality and style
• Tests are adequate
• Documentation is complete
• No security concerns
• Performance is acceptable
• Breaking changes are justified and documented