tsquare 0.12.0 → 0.12.2

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # Changelog
 
+## 0.12.2
+
+The language and the renderer haven't changed: every wireframe renders exactly as in 0.12.1, and render URLs give the same images.
+
+- **Loads in Docusaurus:** Docusaurus loads its config, and the remark plugins in it, through jiti 1, which turned `import { z } from "zod"` into `undefined`, so importing tsquare there failed with "Cannot read properties of undefined (reading 'enum')". tsquare now imports zod as `import * as z from "zod"` (the form zod recommends), and a test loads the build through jiti 1.
+
+## 0.12.1
+
+The language and the renderer haven't changed: every wireframe renders exactly as in 0.12.0, and render URLs give the same images.
+
+- **`tsquare/editor` can wrap long lines:** `lineWrapping: true` wraps instead of scrolling sideways, with each wrapped line's continuation rows indented 4 spaces past its own indentation (2 would look like a child element). Off by default, so the playground is unchanged; `@tsquare-js/react` turns it on, because its editors are often narrow.
+
 ## 0.12.0
 
 The language and the renderer haven't changed: every wireframe renders exactly as in 0.11.0, and render URLs give the same images.

package/README.md

@@ -145,7 +145,7 @@ const editor = createEditor(document.getElementById("code")!, {
 });
 ```
 
-Give the element a height; the editor fills it. Options: `doc`, `data`, `onChange`, `lineNumbers` (default `true`) and `ariaLabel` (default "Wireframe text"). The editor has `getText()`, `setText(text)` (one undoable step), `setIssues(issues)`, `goToLine(n)`, `focus()`, `dom` and `destroy()`.
+Give the element a height; the editor fills it. Options: `doc`, `data`, `onChange`, `lineNumbers` (default `true`), `lineWrapping` (default `false`: wrap long lines instead of scrolling sideways, continuation rows indented 4 spaces past their line's indentation, so they don't look like a child element) and `ariaLabel` (default "Wireframe text"). The editor has `getText()`, `setText(text)` (one undoable step), `setIssues(issues)`, `goToLine(n)`, `focus()`, `dom` and `destroy()`.
 
 Its colors are CSS variables, light or dark by the page's `color-scheme`, defaulting to the playground's:
 

package/dist/browser/index.js

@@ -308,16 +308,16 @@ var require_swap = __commonJS({
       b[n] = b[m2];
       b[m2] = i2;
     };
-    var swap32 = (array) => {
-      const len = array.length;
+    var swap32 = (array3) => {
+      const len = array3.length;
       for (let i2 = 0; i2 < len; i2 += 4) {
-        swap(array, i2, i2 + 3);
-        swap(array, i2 + 1, i2 + 2);
+        swap(array3, i2, i2 + 3);
+        swap(array3, i2 + 1, i2 + 2);
       }
     };
-    var swap32LE = (array) => {
+    var swap32LE = (array3) => {
       if (isBigEndian) {
-        swap32(array);
+        swap32(array3);
       }
     };
     module.exports = {
@@ -2112,8 +2112,8 @@ var require_escape_html = __commonJS({
     "use strict";
     var matchHtmlRegExp = /["'&<>]/;
     module.exports = escapeHtml;
-    function escapeHtml(string) {
-      var str = "" + string;
+    function escapeHtml(string3) {
+      var str = "" + string3;
       var match = matchHtmlRegExp.exec(str);
       if (!match) {
         return str;
@@ -3481,8 +3481,8 @@ var $557adaaeb0c7885f$var$LineBreaker = class {
     }
     return null;
   }
-  constructor(string) {
-    this.string = string;
+  constructor(string3) {
+    this.string = string3;
     this.pos = 0;
     this.lastPos = 0;
     this.curClass = null;
@@ -6053,12 +6053,12 @@ Parser.prototype.parseFixed = function() {
 Parser.prototype.parseString = function(length) {
   var dataView = this.data;
   var offset = this.offset + this.relativeOffset;
-  var string = "";
+  var string3 = "";
   this.relativeOffset += length;
   for (var i2 = 0; i2 < length; i2++) {
-    string += String.fromCharCode(dataView.getUint8(offset + i2));
+    string3 += String.fromCharCode(dataView.getUint8(offset + i2));
   }
-  return string;
+  return string3;
 };
 Parser.prototype.parseTag = function() {
   return this.parseString(4);
@@ -19953,7 +19953,7 @@ async function renderToSvg(spec, options = {}) {
 
 // src/catalog.ts
 import { defineCatalog } from "@json-render/core";
-import { z } from "zod";
+import * as z from "zod";
 
 // src/layout.ts
 var theme = {
@@ -23264,7 +23264,7 @@ function decodeWireframe(data) {
 }
 
 // src/mcp.ts
-import { z as z2 } from "zod";
+import * as z2 from "zod";
 
 // src/escape.ts
 var escapeAttr = (s) => s.replace(/&/g, "&amp;").replace(/"/g, "&quot;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/[\r\n]+/g, " ");

package/dist/catalog.d.ts

@@ -1,4 +1,4 @@
-import { z } from "zod";
+import * as z from "zod";
 /**
  * Props every element except Board and Screen accepts, on top of its own. Kept out of each
  * component's schema so the prompt describes them once.

package/dist/chunks/{chunk-QWQT7224.js → chunk-NYVFYSZ6.js}

@@ -6,7 +6,7 @@ import {
   componentDefinitions,
   iconNames,
   takesUniversalProps
-} from "./chunk-EY7YIRMK.js";
+} from "./chunk-WRN5ADPR.js";
 
 // src/playground/language-data.ts
 function unwrap(t) {

package/dist/chunks/{chunk-EY7YIRMK.js → chunk-WRN5ADPR.js}

@@ -51,7 +51,7 @@ function estimateNoteHeight(text, width) {
 
 // src/catalog.ts
 import { defineCatalog } from "@json-render/core";
-import { z } from "zod";
+import * as z from "zod";
 
 // src/suggest.ts
 function editDistance(a, b) {

package/dist/cli.js

@@ -6,7 +6,7 @@ import {
   printWireframeText,
   renderWireframe,
   wireframePrompt
-} from "./chunks/chunk-EY7YIRMK.js";
+} from "./chunks/chunk-WRN5ADPR.js";
 
 // src/cli.ts
 import { readFile, writeFile } from "node:fs/promises";

package/dist/editor.js

@@ -9434,9 +9434,9 @@ var LineGap = class {
     }
     return true;
   }
-  draw(viewState, wrapping) {
+  draw(viewState, wrapping2) {
     return Decoration.replace({
-      widget: new LineGapWidget(this.displaySize * (wrapping ? viewState.scaleY : viewState.scaleX), wrapping)
+      widget: new LineGapWidget(this.displaySize * (wrapping2 ? viewState.scaleY : viewState.scaleX), wrapping2)
     }).range(this.from, this.to);
   }
 };
@@ -9732,9 +9732,9 @@ var ViewState = class {
   // predictable. Relies on generous margins (see LG.Margin) to hide
   // the artifacts this might produce from the user.
   ensureLineGaps(current, mayMeasure) {
-    let wrapping = this.heightOracle.lineWrapping;
-    let margin = wrapping ? 1e4 : 2e3, halfMargin = margin >> 1, doubleMargin = margin << 1;
-    if (this.defaultTextDirection != Direction.LTR && !wrapping)
+    let wrapping2 = this.heightOracle.lineWrapping;
+    let margin = wrapping2 ? 1e4 : 2e3, halfMargin = margin >> 1, doubleMargin = margin << 1;
+    if (this.defaultTextDirection != Direction.LTR && !wrapping2)
       return [];
     let gaps = [];
     let addGap = (from, to, line, structure) => {
@@ -9752,13 +9752,13 @@ var ViewState = class {
       }
       let gap = find(current, (gap2) => gap2.from >= line.from && gap2.to <= line.to && Math.abs(gap2.from - from) < halfMargin && Math.abs(gap2.to - to) < halfMargin && !avoid.some((pos) => gap2.from < pos && gap2.to > pos));
       if (!gap) {
-        if (to < line.to && mayMeasure && wrapping && mayMeasure.visibleRanges.some((r) => r.from <= to && r.to >= to)) {
+        if (to < line.to && mayMeasure && wrapping2 && mayMeasure.visibleRanges.some((r) => r.from <= to && r.to >= to)) {
           let lineStart = mayMeasure.moveToLineBoundary(EditorSelection.cursor(to), false, true).head;
           if (lineStart > from)
             to = lineStart;
         }
         let size = this.gapSize(line, from, to, structure);
-        let displaySize = wrapping || size < 2e6 ? size : 2e6;
+        let displaySize = wrapping2 || size < 2e6 ? size : 2e6;
         gap = new LineGap(from, to, size, displaySize);
       }
       gaps.push(gap);
@@ -9771,7 +9771,7 @@ var ViewState = class {
         return;
       let target = this.scrollTarget ? this.scrollTarget.range.head : null;
       let viewFrom, viewTo;
-      if (wrapping) {
+      if (wrapping2) {
         let marginHeight = margin / this.heightOracle.lineLength * this.heightOracle.lineHeight;
         let top2, bot;
         if (target != null) {
@@ -22575,6 +22575,32 @@ var pasteFencedBlock = EditorView.domEventHandlers({
     return true;
   }
 });
+var CONTINUATION = 4;
+var hangingIndent = ViewPlugin.fromClass(
+  class {
+    decorations;
+    constructor(view) {
+      this.decorations = this.build(view);
+    }
+    update(u) {
+      if (u.docChanged || u.viewportChanged) this.decorations = this.build(u.view);
+    }
+    build(view) {
+      const builder = new RangeSetBuilder();
+      for (const { from, to } of view.visibleRanges) {
+        for (let pos = from; pos <= to; ) {
+          const line = view.state.doc.lineAt(pos);
+          const indent = line.text.match(/^ */)[0].length;
+          builder.add(line.from, line.from, Decoration.line({ attributes: { style: `padding-left: calc(6px + ${indent + CONTINUATION}ch); text-indent: -${indent + CONTINUATION}ch` } }));
+          pos = line.to + 1;
+        }
+      }
+      return builder.finish();
+    }
+  },
+  { decorations: (p) => p.decorations }
+);
+var wrapping = [EditorView.lineWrapping, hangingIndent];
 function createEditor(parent, opts = {}) {
   const extensions = [
     opts.lineNumbers === false ? [] : [lineNumbers(), highlightActiveLineGutter()],
@@ -22592,6 +22618,7 @@ function createEditor(parent, opts = {}) {
     keymap.of([{ key: "Enter", run: newlineKeepIndent }, ...closeBracketsKeymap, ...completionKeymap, ...searchKeymap, ...historyKeymap, indentWithTab, ...defaultKeymap]),
     theme2,
     pasteFencedBlock,
+    opts.lineWrapping ? wrapping : [],
     EditorView.contentAttributes.of({ "aria-label": opts.ariaLabel ?? "Wireframe text", spellcheck: "false", autocapitalize: "off" }),
     EditorView.updateListener.of((u) => {
       if (u.docChanged) opts.onChange?.(u.state.doc.toString());

package/dist/index.js

@@ -1,6 +1,6 @@
 import {
   languageData
-} from "./chunks/chunk-QWQT7224.js";
+} from "./chunks/chunk-NYVFYSZ6.js";
 import {
   DEVICES,
   RENAMED_PROPS,
@@ -24,7 +24,7 @@ import {
   upgradeSpec,
   upgradeWireframe,
   wireframePrompt
-} from "./chunks/chunk-EY7YIRMK.js";
+} from "./chunks/chunk-WRN5ADPR.js";
 
 // src/deflate.ts
 import { deflateRawSync, inflateRawSync } from "node:zlib";
@@ -49,7 +49,7 @@ function decodeWireframe(data) {
 }
 
 // src/mcp.ts
-import { z } from "zod";
+import * as z from "zod";
 
 // src/escape.ts
 var escapeAttr = (s) => s.replace(/&/g, "&amp;").replace(/"/g, "&quot;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/[\r\n]+/g, " ");

package/dist/mcp.d.ts

@@ -6,7 +6,7 @@
  * Problems come back as a result with isError, not a thrown error, so the model reads them and fixes
  * its text: the messages are the same line-numbered ones `tsquare check` prints.
  */
-import { z } from "zod";
+import * as z from "zod";
 export type ToolContent = {
     type: "text";
     text: string;

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

@@ -8,6 +8,8 @@ export interface EditorOptions {
     onChange?: (text: string) => void;
     /** Line numbers in a gutter. Default true. */
     lineNumbers?: boolean;
+    /** Wrap long lines instead of scrolling sideways; continuation rows are indented under their line. Default false. */
+    lineWrapping?: boolean;
     /** The editable area's accessible name. Default "Wireframe text". */
     ariaLabel?: string;
 }

package/dist/playground/index.js

@@ -1,6 +1,6 @@
 import {
   languageData
-} from "../chunks/chunk-QWQT7224.js";
+} from "../chunks/chunk-NYVFYSZ6.js";
 import {
   boardLayout,
   compileWireframe,
@@ -9,7 +9,7 @@ import {
   renderWireframePng,
   renderWireframeSvg,
   wireframePrompt
-} from "../chunks/chunk-EY7YIRMK.js";
+} from "../chunks/chunk-WRN5ADPR.js";
 
 // src/playground/index.ts
 import { createServer } from "node:http";