tsquare 0.12.3 → 0.13.0

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # Changelog
 
+## 0.13.0
+
+The language hasn't changed. Every wireframe renders exactly as in 0.12.4 except one kind: a flow arrow to a modal, drawer or toast now ends at its card, panel or pill, and a tooltip on one sits over it (they used to be placed against the dimmed screen or the full-width row around it). None of the 438 example and eval boards has either; they render byte for byte the same.
+
+- **Element positions**, for making a board clickable (comment on an element, or ask a model to change it). `measureElements(spec, lines, { flows })` returns every element and flow arrow with where it's drawn, in board pixels, and its lines in the text: `line`, `endLine` (its whole block), `id`, `type`, `label`, `screenLine`, `parentLine` and `box`. Screens add the band with their name, elements with an open menu or a tooltip add their `overlays`, and modals and drawers say whether they dim the screen (`scrim`). A box is the part that shows (content cut off at a tab bar or a drawer's panel is cut there too); an element 0 tall or 0 wide, like a spacer in a row, is listed but never hit. Flows add `from`/`to` (the ids), `fromLine`/`toLine`, the drawn `path` and the label's box. `elementsAt(elements, x, y, { tolerance })` returns everything under a point, the most likely meant first: an open menu or tooltip's element, a flow's label, elements that hold no others, a flow's line, then stacks, screens and the board. A modal, drawer or toast hides what's under it; a modal or drawer that dims its screen hides all of it. The order doesn't depend on `lines`: an element missing from it gets line 0 and is still hit the same way. `elementsAtLine(elements, line)` returns the element on a line and the blocks around it, for a code view that follows the caret. See [Element positions](docs/element-positions.md). Thanks to @timweeda for the use case (tsquare-js/tsquare#37).
+- **`compileWireframe` returns `lines`**: each element's line in the text, by its key in the spec.
+
+## 0.12.4
+
+The language hasn't changed. Boards whose screen names fit render exactly as in 0.12.3 (checked byte for byte on 438 boards); boards with a screen name wider than its screen are fixed:
+
+- **A screen name wider than its screen ends in "…"** instead of widening its column. The board's layout sizes each column by its screen, so a long name pushed the screens after it right of where the layout put them, and the last screen was cut off at the board's right edge. Only names that might not fit are truncated, judged by an upper bound on each character's width in the font, so every other name renders as before.
+
 ## 0.12.3
 
 The language hasn't changed. Screens whose content fits render exactly as in 0.12.2 (the same pixels; the SVG's internal mask ids differ). Screens whose content is taller than the screen are fixed:

package/README.md

@@ -151,7 +151,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 }`). Call `destroy()` when you remove it. `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.12/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.
+`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 }`). Call `destroy()` when you remove it. `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.13/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. `measureElements` gives each element's box on the board and its line in the text, and `elementsAt` what's under a click, for making a board clickable (see [Element positions](docs/element-positions.md)).
 
 ### The editor: `tsquare/editor`
 

package/dist/anchors.d.ts

@@ -36,10 +36,11 @@ export interface Anchor {
 export declare function findAnchors(spec: Spec): Anchor[];
 /**
  * A copy of the spec whose anchored elements and screens carry marker colors in hidden props:
- * `__mark` on the outer box (menus, tooltips, screens), `__markField` on a field (options, calendar).
- * Box keys are the element id, or `<id>#field`.
+ * `__mark` on the outer box (menus, tooltips, screens), `__markField` on a field (options, calendar),
+ * `__markBody` on the content area of each screen in `bodies` (between its bars, where content is cut off).
+ * Box keys are the element id, `<id>#field` or `<id>#body`.
  */
-export declare function tagForMeasuring(spec: Spec, anchors: Anchor[]): {
+export declare function tagForMeasuring(spec: Spec, anchors: Anchor[], bodies?: string[]): {
     tagged: Spec;
     colors: Map<string, string>;
 };
@@ -68,6 +69,14 @@ export declare function parseDate(value: unknown): {
     month: string;
     day?: number;
 } | null;
+/**
+ * Each anchored overlay's box on the board, by the id of the element it belongs to (an element with
+ * an open menu and a tooltip gets both). Menu, tooltip and option heights are estimates.
+ */
+export declare function overlayBoxes(spec: Spec, anchors: Anchor[], boxes: Record<string, Rect>): {
+    id: string;
+    box: Rect;
+}[];
 /**
  * The top layer: each overlay inside a box covering its screen (clipped to it), placed from the
  * measured boxes. `Calendar` is the board's own calendar component, reused for date pickers.