tsquare 0.9.1 → 0.10.1

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # Changelog
 
+## 0.10.1
+
+Docs and license only: the code is the same as 0.10.0, and every wireframe renders the same.
+
+- **`LICENSE` is the plain MIT text**, so GitHub recognizes it (it showed "Other"). The note about the Inter font's license is in the README's License section, which also points to the browser build's `THIRD_PARTY_LICENSES.txt`.
+- **Obsidian:** the [tsquare plugin](https://tsquare.dev/docs/obsidian) draws ```` ```tsquare ```` code blocks in your notes, on desktop and mobile. The README links it and the VS Code extension, and the embedding guide links it.
+
+## 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/LICENSE

@@ -19,6 +19,3 @@ AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
 SOFTWARE.
-
-The Inter font (the @fontsource/inter dependency) is licensed separately under
-the SIL Open Font License 1.1.

package/README.md

@@ -52,6 +52,11 @@ A wireframe can be embedded anywhere an image works (Notion, GitHub, docs sites)
 
 The playground's **Copy link** menu makes these; [Embedding](docs/embedding.md) has the steps for Notion, GitHub and your own site. The text is compressed into the URL, not encrypted, so anyone with the link can read it; see [privacy](https://tsquare.dev/privacy). `encodeWireframe` and `decodeWireframe` in the library produce and read the same links.
 
+## In your editor and notes
+
+- **VS Code** (and Cursor, VSCodium, Windsurf): the [tsquare extension](https://marketplace.visualstudio.com/items?itemName=tsquare-js.tsquare-vscode) gives `.tsq` files a live preview, problems as you type, highlighting and autocomplete. Also on [Open VSX](https://open-vsx.org/extension/tsquare-js/tsquare-vscode).
+- **Obsidian**: the [tsquare plugin](https://community.obsidian.md/plugins/tsquare) draws ```` ```tsquare ```` code blocks in your notes, on desktop and mobile. See [the Obsidian page](https://tsquare.dev/docs/obsidian).
+
 ## The language
 
 One element per line; children are indented two spaces under their parent. The first line is the board.
@@ -123,7 +128,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)
 
@@ -158,4 +163,4 @@ How it was measured, the tasks, every model output, and the scripts: [`eval/`](e
 
 ## License
 
-MIT. The Inter font comes from the `@fontsource/inter` dependency, under the SIL Open Font License 1.1. Icons are from [Lucide](https://lucide.dev), under the ISC license. Brand logos are from [Simple Icons](https://simpleicons.org) (CC0); the logos themselves are trademarks of their owners.
+MIT. The Inter font comes from the `@fontsource/inter` dependency, under the SIL Open Font License 1.1. Icons are from [Lucide](https://lucide.dev), under the ISC license. Brand logos are from [Simple Icons](https://simpleicons.org) (CC0); the logos themselves are trademarks of their owners. The browser build (`dist/browser/`) bundles some dependencies, Inter and satori (MPL-2.0) among them; their notices are in `dist/browser/THIRD_PARTY_LICENSES.txt`.