tsquare 0.10.1 → 0.11.0

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # 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.

package/README.md

@@ -128,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)
 

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,