tsquare 0.13.0 → 0.13.1

package/CHANGELOG.md

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

package/dist/anchors.d.ts

@@ -71,7 +71,8 @@ export declare function parseDate(value: unknown): {
 } | 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.
+ * 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;

package/dist/browser/index.js

@@ -21879,6 +21879,7 @@ function place(anchor, size, screen, opts) {
   return { x: x3 - screen.x, y: y - screen.y, bottom: screen.y + screen.h - (anchor.y - opts.gap), side };
 }
 var ROW = 36;
+var listHeight = (rows) => rows * (ROW - 4) + 2 * 4 + 2 * 1.5;
 function ListCard({ items, width, selected, c: c2 }) {
   return /* @__PURE__ */ jsx4("div", { style: { display: "flex", flexDirection: "column", width, padding: 4, backgroundColor: theme.paper, border: `1.5px solid ${theme.lineStrong}`, borderRadius: 8, boxShadow: "0 8px 24px rgba(0,0,0,0.18)" }, children: items.map((item, i2) => {
     const on2 = selected != null && item.label === selected;
@@ -21922,14 +21923,14 @@ function placeOverlay(spec, a, boxes) {
   if (a.kind === "options") {
     const options = p.options?.length ? p.options : [p.value ?? "Option 1", "Option 2", "Option 3"];
     const size2 = { w: anchor.w, h: options.length * ROW + 8 };
-    return { screen, anchor, size: size2, pos: place(anchor, size2, screen, { prefer: "below", align: "start", gap: 4 }), options };
+    return { screen, anchor, size: size2, drawnH: listHeight(options.length), pos: place(anchor, size2, screen, { prefer: "below", align: "start", gap: 4 }), options };
   }
   if (a.kind === "menu") {
     const items = p.menu.map((i2) => typeof i2 === "string" ? { label: i2 } : i2);
     const width = a.end ? 200 : Math.max(180, anchor.w);
     const inRightHalf = anchor.x + anchor.w / 2 > screen.x + screen.w / 2;
     const size2 = { w: width, h: items.length * ROW + 8 };
-    return { screen, anchor, size: size2, pos: place(anchor, size2, screen, { prefer: "below", align: a.end || inRightHalf ? "end" : "start", gap: a.end ? -6 : 4 }), items };
+    return { screen, anchor, size: size2, drawnH: listHeight(items.length), pos: place(anchor, size2, screen, { prefer: "below", align: a.end || inRightHalf ? "end" : "start", gap: a.end ? -6 : 4 }), items };
   }
   if (a.kind === "calendar") {
     const date = parseDate(p.value);
@@ -21944,7 +21945,10 @@ function placeOverlay(spec, a, boxes) {
 function overlayBoxes(spec, anchors, boxes) {
   return anchors.flatMap((a) => {
     const o2 = placeOverlay(spec, a, boxes);
-    return o2 ? [{ id: a.id, box: { x: o2.screen.x + o2.pos.x, y: o2.screen.y + o2.pos.y, w: o2.size.w, h: o2.size.h } }] : [];
+    if (!o2) return [];
+    const h2 = "drawnH" in o2 && o2.drawnH != null ? o2.drawnH : o2.size.h;
+    const top = o2.screen.y + o2.pos.y + (o2.pos.side === "above" ? o2.size.h - h2 : 0);
+    return [{ id: a.id, box: { x: o2.screen.x + o2.pos.x, y: top, w: o2.size.w, h: h2 } }];
   });
 }
 function overlayLayer(spec, anchors, boxes, c2, Calendar2) {

package/dist/chunks/{chunk-PGX7ANZH.js → chunk-HVGRKWIV.js}

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

package/dist/chunks/{chunk-YOZFCNSK.js → chunk-K3Y2E2QA.js}

@@ -2422,6 +2422,7 @@ function place(anchor, size, screen, opts) {
   return { x: x - screen.x, y: y - screen.y, bottom: screen.y + screen.h - (anchor.y - opts.gap), side };
 }
 var ROW = 36;
+var listHeight = (rows) => rows * (ROW - 4) + 2 * 4 + 2 * 1.5;
 function ListCard({ items, width, selected, c }) {
   return /* @__PURE__ */ jsx2("div", { style: { display: "flex", flexDirection: "column", width, padding: 4, backgroundColor: theme.paper, border: `1.5px solid ${theme.lineStrong}`, borderRadius: 8, boxShadow: "0 8px 24px rgba(0,0,0,0.18)" }, children: items.map((item, i) => {
     const on = selected != null && item.label === selected;
@@ -2465,14 +2466,14 @@ function placeOverlay(spec, a, boxes) {
   if (a.kind === "options") {
     const options = p.options?.length ? p.options : [p.value ?? "Option 1", "Option 2", "Option 3"];
     const size2 = { w: anchor.w, h: options.length * ROW + 8 };
-    return { screen, anchor, size: size2, pos: place(anchor, size2, screen, { prefer: "below", align: "start", gap: 4 }), options };
+    return { screen, anchor, size: size2, drawnH: listHeight(options.length), pos: place(anchor, size2, screen, { prefer: "below", align: "start", gap: 4 }), options };
   }
   if (a.kind === "menu") {
     const items = p.menu.map((i) => typeof i === "string" ? { label: i } : i);
     const width = a.end ? 200 : Math.max(180, anchor.w);
     const inRightHalf = anchor.x + anchor.w / 2 > screen.x + screen.w / 2;
     const size2 = { w: width, h: items.length * ROW + 8 };
-    return { screen, anchor, size: size2, pos: place(anchor, size2, screen, { prefer: "below", align: a.end || inRightHalf ? "end" : "start", gap: a.end ? -6 : 4 }), items };
+    return { screen, anchor, size: size2, drawnH: listHeight(items.length), pos: place(anchor, size2, screen, { prefer: "below", align: a.end || inRightHalf ? "end" : "start", gap: a.end ? -6 : 4 }), items };
   }
   if (a.kind === "calendar") {
     const date = parseDate(p.value);
@@ -2487,7 +2488,10 @@ function placeOverlay(spec, a, boxes) {
 function overlayBoxes(spec, anchors, boxes) {
   return anchors.flatMap((a) => {
     const o2 = placeOverlay(spec, a, boxes);
-    return o2 ? [{ id: a.id, box: { x: o2.screen.x + o2.pos.x, y: o2.screen.y + o2.pos.y, w: o2.size.w, h: o2.size.h } }] : [];
+    if (!o2) return [];
+    const h = "drawnH" in o2 && o2.drawnH != null ? o2.drawnH : o2.size.h;
+    const top = o2.screen.y + o2.pos.y + (o2.pos.side === "above" ? o2.size.h - h : 0);
+    return [{ id: a.id, box: { x: o2.screen.x + o2.pos.x, y: top, w: o2.size.w, h } }];
   });
 }
 function overlayLayer(spec, anchors, boxes, c, Calendar2) {

package/dist/cli.js

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

package/dist/index.js

@@ -1,6 +1,6 @@
 import {
   languageData
-} from "./chunks/chunk-PGX7ANZH.js";
+} from "./chunks/chunk-HVGRKWIV.js";
 import {
   DEVICES,
   LABEL_H,
@@ -39,7 +39,7 @@ import {
   withBoardGap,
   withMarkers,
   withPalette
-} from "./chunks/chunk-YOZFCNSK.js";
+} from "./chunks/chunk-K3Y2E2QA.js";
 
 // src/deflate.ts
 import { deflateRawSync, inflateRawSync } from "node:zlib";

package/dist/measure.d.ts

@@ -39,7 +39,7 @@ export interface MeasuredElement {
     box: MeasuredBox;
     /** Screens: the band above the frame with the screen's name. */
     labelBox?: MeasuredBox;
-    /** Its open menu, option list or date picker, and its tooltip, in drawing order (sizes partly estimated from the text). */
+    /** Its open menu, option list or date picker, and its tooltip, in drawing order (a tooltip's and a date picker's size within a few px). */
     overlays?: MeasuredBox[];
     /** Modals and drawers: whether the screen behind is dimmed (on unless the text says no-scrim). */
     scrim?: boolean;

package/dist/playground/index.js

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