tsquare 0.10.0 → 0.11.0

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # Changelog
 
+## 0.11.0
+
+The language and the renderer haven't changed: every wireframe renders exactly as in 0.10.1, and render URLs give the same images.
+
+- **A script for any web page:** `<script src="https://cdn.jsdelivr.net/npm/tsquare@0.11/dist/tsquare.min.js"></script>` draws every ```` ```tsquare ```` code block on the page once it has loaded, so wireframes work on Markdown sites (MkDocs, Hugo, Jekyll, Docsify, VitePress, …) with no build step. It finds the HTML Markdown renderers make of a fence, lists a block's problems by line in its place, and sets `window.tsquare` with the whole API. Rendering happens in the reader's browser and matches Node byte for byte. `data-start="manual"` on the script tag leaves it to you to call `tsquare.renderAll()`.
+- **`renderAll()`** is exported for pages that bundle tsquare themselves: it does the same for a document or part of one (`{ root, selector }`).
+
+## 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.

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. 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.
+`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. On a page without a build step, `<script src="https://cdn.jsdelivr.net/npm/tsquare@0.11/dist/tsquare.min.js"></script>` draws every ```` ```tsquare ```` code block on the page (see [Embedding](docs/embedding.md#pages-written-in-markdown)). 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`.

package/dist/browser/index.js

@@ -23382,6 +23382,80 @@ async function callMcpTool(name, args = {}, opts = {}) {
   return name === "render_wireframe" ? renderWireframeTool(parsed.data) : shareWireframeTool(parsed.data, opts);
 }
 
+// src/dom.ts
+var DEFAULT_SELECTOR = ".tsquare, .language-tsquare, [data-lang='tsquare']";
+var DONE = "data-tsquare";
+var STYLES = `:where(.tsquare-board){margin:1em 0}
+:where(.tsquare-board) img{display:block;max-width:100%;height:auto}
+:where(.tsquare-problems){margin:1em 0;padding:.5em .75em;border-left:3px solid #d33;font-size:.9em}
+:where(.tsquare-problems) ul{margin:.25em 0 0;padding-left:1.25em;font-family:ui-monospace,Menlo,monospace}`;
+async function renderAll(opts = {}) {
+  const root = opts.root ?? document;
+  const doc = root.ownerDocument ?? root;
+  const result = { rendered: 0, invalid: 0 };
+  const blocks = [];
+  for (const el2 of root.querySelectorAll(opts.selector ?? DEFAULT_SELECTOR)) {
+    const target = el2.tagName === "CODE" ? el2.closest("pre") ?? el2 : el2;
+    if (target.hasAttribute(DONE) || target.closest(`[${DONE}]`)) continue;
+    if (blocks.some((b) => b.target.contains(target) || target.contains(b.target))) continue;
+    blocks.push({ target, text: el2.tagName === "CODE" ? el2 : el2.querySelector("code") ?? el2.querySelector("pre") ?? el2 });
+  }
+  if (blocks.length) addStyles(doc);
+  for (const { target, text: text2 } of blocks) {
+    const source = text2.textContent ?? "";
+    const replacement = await renderBlock(doc, source);
+    replacement.setAttribute(DONE, "");
+    target.replaceWith(replacement);
+    if (replacement.classList.contains("tsquare-board")) result.rendered++;
+    else result.invalid++;
+  }
+  return result;
+}
+async function renderBlock(doc, source) {
+  const { spec, issues } = compileWireframe(source);
+  if (!spec || issues.length) return problems2(doc, issues.map((i2) => `line ${i2.line}: ${i2.message}`));
+  try {
+    const svg = await renderWireframeSvg(spec, { skipValidation: true });
+    const { width, height } = boardLayout(spec);
+    const title = spec.elements[spec.root]?.props?.title;
+    const figure = doc.createElement("figure");
+    figure.className = "tsquare-board";
+    const img = doc.createElement("img");
+    img.src = svgDataUrl(svg);
+    img.width = width;
+    img.height = height;
+    img.alt = title ? `Wireframe: ${title}` : "Wireframe";
+    figure.append(img);
+    return figure;
+  } catch (err2) {
+    return problems2(doc, [`tsquare couldn't render this board: ${err2 instanceof Error ? err2.message : String(err2)}`]);
+  }
+}
+function svgDataUrl(svg) {
+  const bytes = new TextEncoder().encode(svg);
+  let binary = "";
+  for (let i2 = 0; i2 < bytes.length; i2 += 32768) binary += String.fromCharCode(...bytes.subarray(i2, i2 + 32768));
+  return `data:image/svg+xml;base64,${btoa(binary)}`;
+}
+function problems2(doc, lines) {
+  const box = doc.createElement("div");
+  box.className = "tsquare-problems";
+  box.setAttribute("role", "note");
+  const title = doc.createElement("strong");
+  title.textContent = lines.length === 1 ? "1 problem in this wireframe" : `${lines.length} problems in this wireframe`;
+  const list = doc.createElement("ul");
+  for (const line of lines) list.append(Object.assign(doc.createElement("li"), { textContent: line }));
+  box.append(title, list);
+  return box;
+}
+function addStyles(doc) {
+  if (doc.getElementById("tsquare-styles")) return;
+  const style = doc.createElement("style");
+  style.id = "tsquare-styles";
+  style.textContent = STYLES;
+  doc.head.append(style);
+}
+
 // src/playground/language-data.ts
 function unwrap4(t) {
   let cur = t;
@@ -23435,6 +23509,7 @@ function languageData() {
 }
 export {
   DEFAULT_LINKS,
+  DEFAULT_SELECTOR,
   DEVICES,
   LINK_KINDS,
   MAX_SHARED_TEXT,
@@ -23456,6 +23531,7 @@ export {
   mcpTools,
   parseWireframeText,
   registry,
+  renderAll,
   renderWireframe,
   renderWireframePng,
   renderWireframeSvg,

package/dist/dom.d.ts

@@ -0,0 +1,14 @@
+export declare const DEFAULT_SELECTOR = ".tsquare, .language-tsquare, [data-lang='tsquare']";
+export interface RenderAllOptions {
+    /** Where to look (default: the whole document). */
+    root?: ParentNode;
+    /** Which elements hold wireframe text (default: DEFAULT_SELECTOR). */
+    selector?: string;
+}
+export interface RenderAllResult {
+    /** Boards drawn. */
+    rendered: number;
+    /** Blocks whose text has problems (listed in place of the board). */
+    invalid: number;
+}
+export declare function renderAll(opts?: RenderAllOptions): Promise<RenderAllResult>;

package/dist/index.d.ts

@@ -5,6 +5,7 @@ export { printWireframeText as formatWireframe } from "./print.js";
 export { encodeWireframe, decodeWireframe, MAX_SHARED_TEXT } from "./share.js";
 export { mcpTools, MCP_INSTRUCTIONS, LINK_KINDS, DEFAULT_LINKS, type LinkKind, wireframeGuide, renderWireframeTool, shareWireframeTool, callMcpTool, type ToolResult, type ToolContent, type ToolOptions, type McpToolName } from "./mcp.js";
 export { upgradeWireframe, upgradeSpec, RENAMED_PROPS, type UpgradeOptions } from "./upgrade.js";
+export { renderAll, DEFAULT_SELECTOR, type RenderAllOptions, type RenderAllResult } from "./dom.js";
 export { renderWireframeSvg, renderWireframePng, checkSpec, boardSize, boardLayout, type BoardItem, type RenderWireframeOptions } from "./render.js";
 export { parseWireframeText, type TextIssue, type ParseResult } from "./text.js";
 export { catalog, componentDefinitions } from "./catalog.js";

package/dist/index.js

@@ -166,8 +166,83 @@ async function callMcpTool(name, args = {}, opts = {}) {
   if (!parsed.success) return { content: [text(`Invalid arguments: ${z.prettifyError(parsed.error)}`)], isError: true };
   return name === "render_wireframe" ? renderWireframeTool(parsed.data) : shareWireframeTool(parsed.data, opts);
 }
+
+// src/dom.ts
+var DEFAULT_SELECTOR = ".tsquare, .language-tsquare, [data-lang='tsquare']";
+var DONE = "data-tsquare";
+var STYLES = `:where(.tsquare-board){margin:1em 0}
+:where(.tsquare-board) img{display:block;max-width:100%;height:auto}
+:where(.tsquare-problems){margin:1em 0;padding:.5em .75em;border-left:3px solid #d33;font-size:.9em}
+:where(.tsquare-problems) ul{margin:.25em 0 0;padding-left:1.25em;font-family:ui-monospace,Menlo,monospace}`;
+async function renderAll(opts = {}) {
+  const root = opts.root ?? document;
+  const doc = root.ownerDocument ?? root;
+  const result = { rendered: 0, invalid: 0 };
+  const blocks = [];
+  for (const el of root.querySelectorAll(opts.selector ?? DEFAULT_SELECTOR)) {
+    const target = el.tagName === "CODE" ? el.closest("pre") ?? el : el;
+    if (target.hasAttribute(DONE) || target.closest(`[${DONE}]`)) continue;
+    if (blocks.some((b) => b.target.contains(target) || target.contains(b.target))) continue;
+    blocks.push({ target, text: el.tagName === "CODE" ? el : el.querySelector("code") ?? el.querySelector("pre") ?? el });
+  }
+  if (blocks.length) addStyles(doc);
+  for (const { target, text: text2 } of blocks) {
+    const source = text2.textContent ?? "";
+    const replacement = await renderBlock(doc, source);
+    replacement.setAttribute(DONE, "");
+    target.replaceWith(replacement);
+    if (replacement.classList.contains("tsquare-board")) result.rendered++;
+    else result.invalid++;
+  }
+  return result;
+}
+async function renderBlock(doc, source) {
+  const { spec, issues } = compileWireframe(source);
+  if (!spec || issues.length) return problems2(doc, issues.map((i) => `line ${i.line}: ${i.message}`));
+  try {
+    const svg = await renderWireframeSvg(spec, { skipValidation: true });
+    const { width, height } = boardLayout(spec);
+    const title = spec.elements[spec.root]?.props?.title;
+    const figure = doc.createElement("figure");
+    figure.className = "tsquare-board";
+    const img = doc.createElement("img");
+    img.src = svgDataUrl(svg);
+    img.width = width;
+    img.height = height;
+    img.alt = title ? `Wireframe: ${title}` : "Wireframe";
+    figure.append(img);
+    return figure;
+  } catch (err) {
+    return problems2(doc, [`tsquare couldn't render this board: ${err instanceof Error ? err.message : String(err)}`]);
+  }
+}
+function svgDataUrl(svg) {
+  const bytes = new TextEncoder().encode(svg);
+  let binary = "";
+  for (let i = 0; i < bytes.length; i += 32768) binary += String.fromCharCode(...bytes.subarray(i, i + 32768));
+  return `data:image/svg+xml;base64,${btoa(binary)}`;
+}
+function problems2(doc, lines) {
+  const box = doc.createElement("div");
+  box.className = "tsquare-problems";
+  box.setAttribute("role", "note");
+  const title = doc.createElement("strong");
+  title.textContent = lines.length === 1 ? "1 problem in this wireframe" : `${lines.length} problems in this wireframe`;
+  const list = doc.createElement("ul");
+  for (const line of lines) list.append(Object.assign(doc.createElement("li"), { textContent: line }));
+  box.append(title, list);
+  return box;
+}
+function addStyles(doc) {
+  if (doc.getElementById("tsquare-styles")) return;
+  const style = doc.createElement("style");
+  style.id = "tsquare-styles";
+  style.textContent = STYLES;
+  doc.head.append(style);
+}
 export {
   DEFAULT_LINKS,
+  DEFAULT_SELECTOR,
   DEVICES,
   LINK_KINDS,
   MAX_SHARED_TEXT,
@@ -189,6 +264,7 @@ export {
   mcpTools,
   parseWireframeText,
   registry,
+  renderAll,
   renderWireframe,
   renderWireframePng,
   renderWireframeSvg,