tsquare 0.12.4 → 0.13.1

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # Changelog
 
+## 0.13.1
+
+The language and the renderer haven't changed: every wireframe renders exactly as in 0.13.0.
+
+- **An open menu's or option list's box is the list as drawn** (#43). `measureElements` sized it from the estimate used to place the list (36px a row), but the list is drawn at 32px a row plus padding and a border, so a 10-item menu's box ran 37px past it, and a click just below an open menu returned the menu's owner. The box now has the drawn height, opening down or up.
+
+## 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:

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,15 @@ 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). Menus and option lists get the height they're drawn at; a
+ * tooltip's comes from its text and a date picker's from its weeks (within a few px).
+ */
+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.