stitch2 0.19.0 → 0.19.2

package/dist/audit.js

@@ -125,6 +125,9 @@ export async function audit(opts) {
         for (let n = walker.nextNode(); n; n = walker.nextNode()) {
             if (!n.textContent.trim())
                 continue;
+            // A label allowed two lines on purpose (line-clamp-2: a navigation rail's, under its icon) may wrap.
+            if ((parseInt(getComputedStyle(n.parentElement).getPropertyValue('-webkit-line-clamp')) || 0) > 1)
+                continue;
             const range = document.createRange();
             range.selectNodeContents(n);
             const tops = [...range.getClientRects()].filter((r) => r.width > 1).map((r) => r.top + r.height / 2);
@@ -608,25 +611,46 @@ export async function audit(opts) {
         }
     }
     // 6i. A medium window (600–1199 px: tablets, small laptops, Material's medium and expanded classes) is used: a
-    // phone column in the middle of it, with most of the window empty, is a layout that stopped adapting.
-    if (W >= 600 && W < 1200) {
-        const fixedBar = (el) => {
-            for (let e = el; e && e !== document.body; e = e.parentElement)
-                if (['fixed', 'sticky'].includes(getComputedStyle(e).position))
-                    return true;
-            return false;
+    // phone column in the middle of it, with most of the window empty, is a layout that stopped adapting. Only for a
+    // page longer than the window (a list or a feed): a sign-in card or an empty state is narrow on purpose. Bars
+    // fixed to an edge (a tab bar, a side navigation) don't count, and a side navigation's width is not available.
+    const H = innerHeight;
+    if (W >= 600 && W < 1200 && document.documentElement.scrollHeight > H * 1.15) {
+        const rail = (e) => {
+            const cs = getComputedStyle(e);
+            if (cs.position !== 'fixed' && cs.position !== 'sticky')
+                return false;
+            const r = e.getBoundingClientRect();
+            return r.left <= 1 || r.right >= W - 1 || r.top <= 1 || r.bottom >= H - 1;
         };
+        const rails = new Set();
+        let side = 0;
+        for (const el of all)
+            if (rail(el)) {
+                rails.add(el);
+                const r = el.getBoundingClientRect();
+                if (r.height >= H * 0.5 && r.width < W * 0.4)
+                    side = Math.max(side, r.width);
+            }
+        const inRail = (el) => [...rails].some((r) => r.contains(el));
+        const room = W - side;
         let left = W, right = 0;
         for (const el of all) {
-            if (!(ownText(el) || el.matches('img, svg, input, textarea, select, button, [role="button"]')) || fixedBar(el))
+            if (el === document.body || el === document.documentElement || inRail(el))
+                continue;
+            const cs = getComputedStyle(el);
+            const box = (cs.backgroundColor !== 'rgba(0, 0, 0, 0)' && cs.backgroundColor !== 'transparent') || parseFloat(cs.borderTopWidth) > 0;
+            if (!(ownText(el) || box || el.matches('img, svg, input, textarea, select, button, [role="button"]')))
                 continue;
             const r = el.getBoundingClientRect();
+            if (r.width >= room * 0.95)
+                continue;
             left = Math.min(left, r.left);
             right = Math.max(right, r.right);
         }
         const used = right - left;
-        if (used > 0 && used < W * 0.6)
-            push('warning', 'narrow-layout', document.querySelector('main') ?? document.body, 'The content takes ' + Math.round(used) + ' of ' + W + 'px: a phone column in a wide window. Use the room (more columns, a side column) with the breakpoints, or give these widths to another variant');
+        if (used > 0 && used < room * 0.6)
+            push('warning', 'narrow-layout', document.querySelector('main') ?? document.body, 'The content takes ' + Math.round(used) + ' of ' + Math.round(room) + 'px: a phone column in a wide window. Use the room (more columns, a side column) with the breakpoints, or give these widths to another variant');
     }
     return out.sort((x, y) => (x.severity === y.severity ? 0 : x.severity === 'error' ? -1 : 1));
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "stitch2",
-  "version": "0.19.0",
+  "version": "0.19.2",
   "description": "A design canvas, layout and type checks, component consistency and screen versioning for agent-built UI, on Google's DESIGN.md format.",
   "license": "MIT",
   "author": "ifokeev",