tsquare 0.9.1 → 0.10.0

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # Changelog
 
+## 0.10.0
+
+The language and the renderer haven't changed: every wireframe renders exactly as in 0.9.1, and render URLs give the same images.
+
+- **tsquare runs in browsers.** The package has a `browser` build that bundlers pick automatically (esbuild, Vite, webpack, and the Obsidian plugin template): `renderWireframe`, `renderWireframeSvg`, `compileWireframe`, `boardLayout` and the rest work the same, with Inter embedded as bytes, so nothing is read from disk and no build settings are needed. It renders exactly the same SVG as Node (checked byte for byte on every example, in a test and in Chrome). PNG output and share links (`encodeWireframe`, `decodeWireframe`) still need Node and throw an error saying so. Node users get the same build as before, and renders are unchanged.
+- `satori` is now a direct dependency, pinned exactly like the other renderer dependencies: a new version can change how boards are drawn.
+- The browser build bundles satori, `@json-render/image` and the Inter font, so it ships their license notices in `dist/browser/THIRD_PARTY_LICENSES.txt`.
+
 ## 0.9.1
 
 - **Fix: `tsquare/viewer` keeps the board at its size on pages that cap images.** VS Code's webviews, Tailwind's base styles and many CSS resets set `img { max-width: 100% }`. The viewer draws the board image at its own size and zooms it with a transform, so the cap squeezed the board to the width of its frame while it kept its height: it showed up small, centered in a tall empty box. The viewer now sets the image's size itself. The playground wasn't affected; rendering and render URLs are unchanged.

package/README.md

@@ -123,7 +123,7 @@ const { issues } = compileWireframe(source);           // problems by line, empt
 const png = await renderWireframe(source, { format: "png", scale: 2 });
 ```
 
-`tsquare/playground` exports the playground's request handler, for hosting it inside your own Node server. `tsquare/viewer` is the playground's zoomable board (zoom, pan, pinch, a chip per screen) for your own page: pass it the elements, then `show()` the SVG from `renderWireframeSvg` with the size and screens from `boardLayout`. It sets the styles its zoom math needs itself; give the stage a size, and optionally style the classes it toggles on the stage: `panning` (while dragging), `animate` (while fitting or zooming to a screen, e.g. `.animate > * { transition: transform .25s }`) and `stale` (from `setStale`, e.g. `.stale img { opacity: .35 }`). `languageData()` lists every component, prop, option word, icon and accent, for editor highlighting and autocomplete. See [Using it with AI](docs/ai.md) for the prompt and the repair loop.
+`tsquare/playground` exports the playground's request handler, for hosting it inside your own Node server. `tsquare/viewer` is the playground's zoomable board (zoom, pan, pinch, a chip per screen) for your own page: pass it the elements, then `show()` the SVG from `renderWireframeSvg` with the size and screens from `boardLayout`. It sets the styles its zoom math needs itself; give the stage a size, and optionally style the classes it toggles on the stage: `panning` (while dragging), `animate` (while fitting or zooming to a screen, e.g. `.animate > * { transition: transform .25s }`) and `stale` (from `setStale`, e.g. `.stale img { opacity: .35 }`). `languageData()` lists every component, prop, option word, icon and accent, for editor highlighting and autocomplete. In a browser bundle (esbuild, Vite, webpack) the same imports render SVG with no setup; PNG and share links need Node. See [Using it with AI](docs/ai.md) for the prompt and the repair loop.
 
 ## Using it with Claude (skill)