tsquare 0.10.1 → 0.12.0

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,

package/dist/playground/editor-options.d.ts

@@ -0,0 +1,13 @@
+import type { LanguageData } from "./language-data.js";
+export interface EditorOptions {
+    /** The starting text. */
+    doc?: string;
+    /** Autocomplete for components, props, option words, icons and accents: pass languageData(). Without it, no autocomplete. */
+    data?: LanguageData;
+    /** Called with the whole text after every change. */
+    onChange?: (text: string) => void;
+    /** Line numbers in a gutter. Default true. */
+    lineNumbers?: boolean;
+    /** The editable area's accessible name. Default "Wireframe text". */
+    ariaLabel?: string;
+}

package/dist/playground/editor.d.ts

@@ -0,0 +1,18 @@
+import { EditorView } from "@codemirror/view";
+import type { EditorOptions } from "./editor-options.js";
+export interface Editor {
+    view: EditorView;
+    getText(): string;
+    /** Replace the whole document as one undoable step. */
+    setText(text: string): void;
+    setIssues(issues: {
+        line: number;
+        message: string;
+    }[]): void;
+    goToLine(line: number): void;
+    /** Scroll the cursor back into view (after the panels around the editor change size). */
+    revealCursor(): void;
+    /** Remove the editor and its listeners. */
+    destroy(): void;
+}
+export declare function createEditor(parent: HTMLElement, opts?: EditorOptions): Editor;

package/dist/playground/index.html

@@ -75,6 +75,28 @@
     --syn-punct: #9aa4b2;
     color-scheme: dark;
   }
+  /* the editor (tsquare/editor) reads these: the playground's own colors, light or dark */
+  :root {
+    --tsquare-editor-bg: var(--editor-bg);
+    --tsquare-editor-fg: var(--editor-ink);
+    --tsquare-editor-gutter: var(--muted);
+    --tsquare-editor-active-line: var(--editor-active);
+    --tsquare-editor-selection: var(--editor-selection);
+    --tsquare-editor-error: var(--error);
+    --tsquare-editor-popup-bg: var(--panel);
+    --tsquare-editor-popup-border: var(--line);
+    --tsquare-editor-popup-selected: var(--accent-soft);
+    --tsquare-editor-font: var(--mono);
+    --tsquare-editor-ui-font: var(--sans);
+    --tsquare-syntax-component: var(--syn-component);
+    --tsquare-syntax-string: var(--syn-string);
+    --tsquare-syntax-prop: var(--syn-prop);
+    --tsquare-syntax-number: var(--syn-number);
+    --tsquare-syntax-word: var(--syn-word);
+    --tsquare-syntax-color: var(--syn-color);
+    --tsquare-syntax-comment: var(--syn-comment);
+    --tsquare-syntax-punct: var(--syn-punct);
+  }
   * { box-sizing: border-box; }
   html, body { height: 100%; margin: 0; }
   body { background: var(--bg); color: var(--ink); font: 14px/1.45 var(--sans); display: flex; flex-direction: column; }