tsquare 0.12.3 → 0.12.4

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # Changelog
 
+## 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/dist/browser/index.js

@@ -20789,6 +20789,16 @@ function BrowserBar() {
     }
   );
 }
+function mayOverflow(name, width) {
+  let w2 = 0;
+  for (const ch of name) {
+    if (ch.charCodeAt(0) >= 128 || /[MWmw@%&]/.test(ch)) w2 += 16.5;
+    else if (/[A-Z]/.test(ch)) w2 += 12.5;
+    else if (/[ .,:;'!|il1jft()[\]{}"`-]/.test(ch)) w2 += 8.5;
+    else w2 += 11;
+  }
+  return w2 > width;
+}
 function Screen({ element, children }) {
   const p = element.props;
   const s = screenSize(p);
@@ -20804,7 +20814,12 @@ function Screen({ element, children }) {
     else body.push(c2);
   }
   return /* @__PURE__ */ jsxs(Box, { style: { flexDirection: "column", flexShrink: 0 }, children: [
-    /* @__PURE__ */ jsx3(Box, { style: { height: LABEL_H, fontSize: 16, fontWeight: 600, color: theme.text }, children: p.name ?? "" }),
+    mayOverflow(p.name ?? "", s.width) ? (
+      // the board's layout sizes each column by its screen, so a name that may be wider than the
+      // screen gets the screen's width and ends in "…" instead of widening the column. Only then:
+      // the clip changes how the text is antialiased, and names that fit should render as before.
+      /* @__PURE__ */ jsx3(Box, { style: { width: s.width, height: LABEL_H, fontSize: 16, fontWeight: 600, color: theme.text }, children: /* @__PURE__ */ jsx3("div", { style: { overflow: "hidden", whiteSpace: "nowrap", textOverflow: "ellipsis" }, children: p.name }) })
+    ) : /* @__PURE__ */ jsx3(Box, { style: { height: LABEL_H, fontSize: 16, fontWeight: 600, color: theme.text }, children: p.name ?? "" }),
     /* @__PURE__ */ jsxs(
       Box,
       {

package/dist/chunks/{chunk-H4Y6VBEX.js → chunk-BSE346UI.js}

@@ -836,6 +836,16 @@ function BrowserBar() {
     }
   );
 }
+function mayOverflow(name, width) {
+  let w = 0;
+  for (const ch of name) {
+    if (ch.charCodeAt(0) >= 128 || /[MWmw@%&]/.test(ch)) w += 16.5;
+    else if (/[A-Z]/.test(ch)) w += 12.5;
+    else if (/[ .,:;'!|il1jft()[\]{}"`-]/.test(ch)) w += 8.5;
+    else w += 11;
+  }
+  return w > width;
+}
 function Screen({ element, children }) {
   const p = element.props;
   const s = screenSize(p);
@@ -851,7 +861,12 @@ function Screen({ element, children }) {
     else body.push(c);
   }
   return /* @__PURE__ */ jsxs(Box, { style: { flexDirection: "column", flexShrink: 0 }, children: [
-    /* @__PURE__ */ jsx(Box, { style: { height: LABEL_H, fontSize: 16, fontWeight: 600, color: theme.text }, children: p.name ?? "" }),
+    mayOverflow(p.name ?? "", s.width) ? (
+      // the board's layout sizes each column by its screen, so a name that may be wider than the
+      // screen gets the screen's width and ends in "…" instead of widening the column. Only then:
+      // the clip changes how the text is antialiased, and names that fit should render as before.
+      /* @__PURE__ */ jsx(Box, { style: { width: s.width, height: LABEL_H, fontSize: 16, fontWeight: 600, color: theme.text }, children: /* @__PURE__ */ jsx("div", { style: { overflow: "hidden", whiteSpace: "nowrap", textOverflow: "ellipsis" }, children: p.name }) })
+    ) : /* @__PURE__ */ jsx(Box, { style: { height: LABEL_H, fontSize: 16, fontWeight: 600, color: theme.text }, children: p.name ?? "" }),
     /* @__PURE__ */ jsxs(
       Box,
       {

package/dist/chunks/{chunk-2FU5Z5ON.js → chunk-XWGHLFRX.js}

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

package/dist/cli.js

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

package/dist/index.js

@@ -1,6 +1,6 @@
 import {
   languageData
-} from "./chunks/chunk-2FU5Z5ON.js";
+} from "./chunks/chunk-XWGHLFRX.js";
 import {
   DEVICES,
   RENAMED_PROPS,
@@ -24,7 +24,7 @@ import {
   upgradeSpec,
   upgradeWireframe,
   wireframePrompt
-} from "./chunks/chunk-H4Y6VBEX.js";
+} from "./chunks/chunk-BSE346UI.js";
 
 // src/deflate.ts
 import { deflateRawSync, inflateRawSync } from "node:zlib";

package/dist/playground/index.js

@@ -1,6 +1,6 @@
 import {
   languageData
-} from "../chunks/chunk-2FU5Z5ON.js";
+} from "../chunks/chunk-XWGHLFRX.js";
 import {
   boardLayout,
   compileWireframe,
@@ -9,7 +9,7 @@ import {
   renderWireframePng,
   renderWireframeSvg,
   wireframePrompt
-} from "../chunks/chunk-H4Y6VBEX.js";
+} from "../chunks/chunk-BSE346UI.js";
 
 // src/playground/index.ts
 import { createServer } from "node:http";