zz-meridian 0.19.1 → 0.19.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "zz-meridian",
-  "version": "0.19.1",
+  "version": "0.19.3",
   "description": "Bring ZZ Meridian, a dashboard design system, into a Next.js project, or start a new dashboard on it. Copies the files in; nothing depends on this package at runtime.",
   "license": "MIT",
   "type": "module",

package/payload/CHANGELOG.md

@@ -2,6 +2,18 @@
 
 Every release of ZZ Meridian, newest first. Versions follow semver: a removed or renamed token, prop or card is major; a new card, token or variant is minor; a corrected value is a patch. Each entry says what breaks and what to do instead.
 
+## [0.19.3] · 2026-10-19
+
+### Fixed
+
+- **The presses suite finds a control again when its name has gained a live count** ([#66](https://github.com/zhixuan312/zz-meridian/issues/66)). `ShellTools` names its button `Alerts`, then `Alerts, 3 new` once its read answers; on a loaded machine the first load was listed before that read and the fresh load after it, so 0.19.2's find-by-name looked for `Alerts`, waited out the hang bound and reported "was listed but could not be found again". When the exact name is gone, the suite now finds the control by the part of its name before the first comma, and which of the controls that share it it is. Names stay as they are: a count in the accessible name is still how a screen reader hears it.
+
+## [0.19.2] · 2026-10-19
+
+### Fixed
+
+- **The presses suite finds a control again by what it is** ([#65](https://github.com/zhixuan312/zz-meridian/issues/65)). It tagged each control by its place in the walk and, after opening the route again, pressed whatever stood at that place: a later load that drew the controls in another order, or fewer of them for a while (a table still loading on a busy machine, rows another suite's write changed), pressed the wrong control or reported "was listed but could not be found again" for one that was on the page a moment later. A control is now found by its accessible name, and which of the controls named alike it is, and one not drawn yet is waited for up to the hang bound before it is called gone.
+
 ## [0.19.1] · 2026-10-19
 
 ### Fixed

package/payload/package.json

@@ -1,6 +1,6 @@
 {
   "name": "zz-meridian-template",
-  "version": "0.19.1",
+  "version": "0.19.3",
   "private": true,
   "license": "MIT",
   "description": "ZZ Meridian: a dashboard design system and starter. Six layers, from DTCG tokens through four layers of React components to product workspaces, and a Design Atlas, in a light and a dark theme.",

package/payload/scripts/interactions.ts

@@ -43,24 +43,40 @@ const sleep = (ms: number) => new Promise((r) => setTimeout(r, ms));
 const HANG_BOUND_MS = 5000;
 
 /** Tag every visible, enabled, not-yet-chosen control with its index; return their names (with the hosts they sit in) and the page's links. */
-const LIST = `(() => {
+/**
+ * The page's controls and how each is named: its accessible name and the roots it sits in. A control is found again by
+ * that name (and which of the controls with it), never by its place in the walk: a later load can draw the controls in
+ * another order or fewer of them for a while, a table still loading or rows a concurrent write changed (#65). A name that
+ * carries a live part after a comma ("Alerts, 3 new") is found again by the part before it once the exact name is gone (#66).
+ */
+const CONTROLS = `
   const deepClosest = (el, sel) => { for (let n = el; n; n = deepParent(n)) if (n.matches(sel)) return n; return null; };
   const vis = (el) => { const r = el.getBoundingClientRect(); const s = getComputedStyle(el); return r.width > 0 && r.height > 0 && s.visibility !== 'hidden' && !deepClosest(el, '[aria-hidden="true"],[inert],.sr-only'); };
-  const chosen = (el) => ['aria-pressed', 'aria-checked', 'aria-selected'].some((a) => el.getAttribute(a) === 'true') || el.getAttribute('aria-current') === 'page' || ['on', 'active', 'checked'].includes(el.getAttribute('data-state'));
   const hosts = (el) => { const out = []; for (let r = el.getRootNode(); r instanceof ShadowRoot; r = r.host.getRootNode()) out.unshift(r.host.localName); return out; };
-  const every = deepAll(document.body);
-  every.forEach((n) => n.removeAttribute('data-press'));
-  const all = every.filter((b) => b.matches('button, [role="button"], [role="tab"], [role="switch"], [role="checkbox"], [role="radio"], [role="menuitem"]'))
+  const label = (b) => (b.getAttribute('aria-label') || deepText(b) || b.title || '').trim().replace(/\\s+/g, ' ').slice(0, 60);
+  const within = (b) => { const h = hosts(b); return h.length ? ' (in ' + h.join(' > ') + ')' : ''; };
+  const nameOf = (b) => label(b) + within(b);
+  // What the control is without what it says about now: the name before its first comma, so "Alerts, 3 new" is still the
+  // "Alerts" listed before the read answered (#66).
+  const keyOf = (b) => label(b).split(',')[0].trim() + within(b);
+  // A control already chosen is not pressed: choosing it again changes nothing, which is not a dead control.
+  const chosen = (el) => ['aria-pressed', 'aria-checked', 'aria-selected'].some((a) => el.getAttribute(a) === 'true') || el.getAttribute('aria-current') === 'page' || ['on', 'active', 'checked'].includes(el.getAttribute('data-state'));
+  const pressable = (every) => every.filter((b) => b.matches('button, [role="button"], [role="tab"], [role="switch"], [role="checkbox"], [role="radio"], [role="menuitem"]'))
     .filter((b) => !b.disabled && b.getAttribute('aria-disabled') !== 'true' && vis(b) && !chosen(b));
+`;
+const LIST = `(() => {${CONTROLS}
+  const every = deepAll(document.body);
   return {
-    controls: all.map((b, i) => { b.setAttribute('data-press', i); const h = hosts(b); return (b.getAttribute('aria-label') || deepText(b) || b.title || '').trim().replace(/\\s+/g, ' ').slice(0, 60) + (h.length ? ' (in ' + h.join(' > ') + ')' : ''); }),
+    controls: pressable(every).map(nameOf),
+    keys: pressable(every).map(keyOf),
     links: every.filter((a) => a.matches('a[href]') && vis(a)).map((a) => a.getAttribute('href')),
   };
 })()`;
 
 /** Scroll the control into view, check nothing covers it, and start counting what changes. */
-const ARM = (i: number) => `(() => {
-  const el = deepAll(document.body).find((n) => n.getAttribute('data-press') === '${i}'); if (!el) return null;
+const ARM = (name: string, nth: number, key: string, keyNth: number) => `(() => {${CONTROLS}
+  const all = pressable(deepAll(document.body));
+  const el = all.filter((b) => nameOf(b) === ${JSON.stringify(name)})[${nth}] ?? all.filter((b) => keyOf(b) === ${JSON.stringify(key)})[${keyNth}]; if (!el) return null;
   el.scrollIntoView({ block: 'center', inline: 'nearest' });
   const r = el.getBoundingClientRect(), x = r.left + r.width / 2, y = r.top + r.height / 2;
   const hit = document.elementFromPoint(x, y);
@@ -76,7 +92,7 @@ const ARM = (i: number) => `(() => {
   window.__mo = new MutationObserver((ms) => { for (const m of ms) {
     if (tipOnly(m.target)) continue;
     if (m.type === 'childList' && [...m.addedNodes, ...m.removedNodes].every(tipOnly)) continue;
-    if (m.type === 'attributes' && m.target === el && ['data-state', 'class', 'style', 'data-press', 'aria-describedby'].includes(m.attributeName)) continue;
+    if (m.type === 'attributes' && m.target === el && ['data-state', 'class', 'style', 'aria-describedby'].includes(m.attributeName)) continue;
     window.__changes++;
   } });
   setTimeout(() => roots().forEach((r) => window.__mo.observe(r, { subtree: true, childList: true, attributes: true, characterData: true })), 40);
@@ -112,8 +128,8 @@ for (const width of WIDTHS) {
   const touch = width < 600;
   for (const route of ROUTES) {
     // The page's late chrome first (scripts/lib/settle.ts): a control that arrives after the list is taken is never pressed, and the count reads as if it had been.
-    const fresh = async () => { await page.open(base + route, { width, theme: 'dark', cookie }); await inject(route); await settle(page); return page.eval<{ controls: string[]; links: string[] }>(LIST); };
-    const { controls, links } = await fresh();
+    const fresh = async () => { await page.open(base + route, { width, theme: 'dark', cookie }); await inject(route); await settle(page); return page.eval<{ controls: string[]; keys: string[]; links: string[] }>(LIST); };
+    const { controls, keys, links } = await fresh();
     // A link is followed as a browser follows it: its href as the page writes it, resolved against the page. Skipping every
     // href that did not start with "/" let a relative link that answered 404 pass (/system/system/contributing).
     for (const href of new Set(links)) {
@@ -125,10 +141,21 @@ for (const width of WIDTHS) {
       if (status >= 400) failures.push(`${route}: link ${href}${path === href ? '' : ` (${path})`} answers ${status}`);
     }
     for (let i = 0; i < controls.length; i++) {
+      // Which of the controls named alike this is, in the order the first load listed them; and, for a name that has
+      // changed since (a count that arrived), which of the controls that are the same thing.
+      const nth = controls.slice(0, i).filter((c) => c === controls[i]).length;
+      const keyNth = keys.slice(0, i).filter((k) => k === keys[i]).length;
+      type Armed = { x: number; y: number; covered?: string } | null;
       // A document replaced since the last read has no helper: that is a page to open again, never a crash (#64).
-      let armed = await page.eval<{ x: number; y: number; covered?: string } | null>(ARM(i)).catch(() => null);
-      // Something left open or a toast in the way: start the page again and try once more.
-      if (!armed || armed.covered) { await fresh(); armed = await page.eval(ARM(i)); }
+      const arm = () => page.eval<Armed>(ARM(controls[i], nth, keys[i], keyNth)).catch((): Armed => null);
+      let armed = await arm();
+      // Something left open or a toast in the way: start the page again and try once more. A control not drawn yet on the
+      // new load (a list still loading) is waited for up to the hang bound before it is called gone.
+      if (!armed || armed.covered) {
+        await fresh();
+        armed = await arm();
+        for (let waited = 0; !armed && waited < HANG_BOUND_MS; waited += 200) { await sleep(200); armed = await arm(); }
+      }
       // Tagged by this suite a moment ago and gone after a fresh load: say so, never skip it.
       if (!armed) { failures.push(`${route} @${width}: "${controls[i]}" was listed but could not be found again`); continue; }
       if (armed.covered) { failures.push(`${route} @${width}: "${controls[i]}" is covered by ${armed.covered}`); continue; }