cozyclay 1.9.0 → 2.0.0

package/tools/qa/css-rule-usage.mjs

@@ -0,0 +1,283 @@
+#!/usr/bin/env node
+// Which src/styles.css rules does the Studio still use? Drives /app/ through
+// every v2 surface (modes 1-4 with a character and then a prop selected, the
+// File/Edit/Window/Help menus with Export, the Generate Motion caret, the
+// viewport pills, Preferences on every page, Content and Log, and the start
+// screen) at 1600x1000 and 1280x800 while CDP CSS.startRuleUsageTracking
+// records every style rule that matched. Rules that never matched AND whose
+// class/id names appear in no src/**/*.{js,jsx} file are pruning candidates.
+//
+//   QA_URL=http://127.0.0.1:5733/app/?motion=/demo/walk-then-stop.npz CDP_PORT=9733 \
+//     OUT=/tmp/css-usage.json node tools/qa-browser.mjs -- node tools/qa/css-rule-usage.mjs
+//
+// Writes OUT (default /tmp/css-rule-usage.json): { states, rules, used,
+// candidates: [{ index, selector, line, endLine }] }. Rule indexes follow
+// postcss walkRules order over src/styles.css.
+import { readFileSync, readdirSync, statSync, writeFileSync } from "node:fs";
+import { join, relative } from "node:path";
+import postcss from "postcss";
+
+const root = new URL("../..", import.meta.url).pathname;
+const SHEET = "src/styles.css";
+const out = process.env.OUT || "/tmp/css-rule-usage.json";
+const port = Number(process.env.CDP_PORT || 9222);
+const appUrl = new URL(process.env.QA_URL || "http://127.0.0.1:5180/app/");
+
+const targets = await (await fetch(`http://127.0.0.1:${port}/json`)).json();
+const page = targets.find((target) => target.type === "page" && target.webSocketDebuggerUrl);
+if (!page) throw new Error("no page target on the QA browser");
+const ws = new WebSocket(page.webSocketDebuggerUrl);
+await new Promise((resolve, reject) => { ws.onopen = resolve; ws.onerror = reject; });
+let nextId = 1;
+const pending = new Map();
+const listeners = new Map();
+ws.onmessage = (event) => {
+	const message = JSON.parse(event.data);
+	if (message.method) for (const listener of listeners.get(message.method) ?? []) listener(message.params);
+	if (!message.id || !pending.has(message.id)) return;
+	const { resolve, reject } = pending.get(message.id);
+	pending.delete(message.id);
+	if (message.error) reject(new Error(JSON.stringify(message.error)));
+	else resolve(message.result);
+};
+const send = (method, params = {}) => new Promise((resolve, reject) => {
+	const id = nextId++;
+	pending.set(id, { resolve, reject });
+	ws.send(JSON.stringify({ id, method, params }));
+});
+const on = (method, listener) => { const set = listeners.get(method) ?? new Set(); set.add(listener); listeners.set(method, set); };
+const once = (method, timeoutMs = 60000) => new Promise((resolve, reject) => {
+	const set = listeners.get(method) ?? new Set();
+	listeners.set(method, set);
+	const timer = setTimeout(() => { set.delete(handler); reject(new Error(`Missing CDP event ${method}`)); }, timeoutMs);
+	const handler = (params) => { set.delete(handler); clearTimeout(timer); resolve(params); };
+	set.add(handler);
+});
+const evaluate = async (expression) => {
+	const result = await send("Runtime.evaluate", { expression, returnByValue: true, awaitPromise: true });
+	if (result.exceptionDetails) throw new Error(result.exceptionDetails.exception?.description || "evaluate failed");
+	return result.result.value;
+};
+const waitFor = (expression, timeoutMs = 20000) => evaluate(`new Promise((resolve, reject) => {
+	const test = () => { try { return Boolean(${expression}); } catch { return false; } };
+	if (test()) { resolve(true); return; }
+	const observer = new MutationObserver(() => { if (!test()) return; observer.disconnect(); clearTimeout(timer); resolve(true); });
+	observer.observe(document.documentElement, { subtree: true, childList: true, attributes: true, characterData: true });
+	const timer = setTimeout(() => { observer.disconnect(); reject(new Error(${JSON.stringify(`Timed out waiting for: ${expression}`)})); }, ${timeoutMs});
+})`);
+// Two frames guarantee a style recalc (and so rule matching) for the new DOM.
+const settle = () => evaluate("new Promise((resolve) => requestAnimationFrame(() => requestAnimationFrame(() => resolve(true))))");
+const click = async (selector) => {
+	const found = await evaluate(`(() => { const el = document.querySelector(${JSON.stringify(selector)}); if (!el) return false; el.click(); return true; })()`);
+	if (!found) throw new Error(`missing control ${selector}`);
+	await settle();
+};
+const escape = async () => {
+	for (const type of ["keyDown", "keyUp"]) await send("Input.dispatchKeyEvent", { type, key: "Escape", code: "Escape", windowsVirtualKeyCode: 27 });
+	await settle();
+};
+
+// ---- stylesheet bookkeeping: find the <style> Vite injects for styles.css ----
+const sheets = new Map();
+on("CSS.styleSheetAdded", ({ header }) => sheets.set(header.styleSheetId, header));
+const sheetSource = new Map(); // styleSheetId -> { file, text }
+const sourceOf = async (styleSheetId) => {
+	if (sheetSource.has(styleSheetId)) return sheetSource.get(styleSheetId);
+	const header = sheets.get(styleSheetId);
+	let file = header?.sourceURL ? new URL(header.sourceURL, appUrl).pathname : "";
+	if (header?.ownerNode) {
+		const { node } = await send("DOM.describeNode", { backendNodeId: header.ownerNode }).catch(() => ({ node: null }));
+		const attrs = node?.attributes ?? [];
+		const devId = attrs[attrs.indexOf("data-vite-dev-id") + 1];
+		if (attrs.includes("data-vite-dev-id") && devId) file = devId;
+	}
+	const { text } = await send("CSS.getStyleSheetText", { styleSheetId });
+	const entry = { file, text };
+	sheetSource.set(styleSheetId, entry);
+	return entry;
+};
+
+const sourceText = readFileSync(join(root, SHEET), "utf8");
+const sourceRules = [];
+postcss.parse(sourceText).walkRules((rule) => {
+	if (rule.parent?.type === "atrule" && /keyframes$/i.test(rule.parent.name)) return;
+	sourceRules.push(rule);
+});
+const servedIndex = new Map(); // served text -> Map(startOffset -> rule index)
+const indexServed = (text) => {
+	if (servedIndex.has(text)) return servedIndex.get(text);
+	const byOffset = new Map();
+	let index = 0;
+	postcss.parse(text).walkRules((rule) => {
+		if (rule.parent?.type === "atrule" && /keyframes$/i.test(rule.parent.name)) return;
+		if (rule.selector !== sourceRules[index]?.selector) throw new Error(`served ${SHEET} diverges from the file at rule ${index}: ${rule.selector}`);
+		byOffset.set(rule.source.start.offset, index);
+		index += 1;
+	});
+	if (index !== sourceRules.length) throw new Error(`served ${SHEET} has ${index} rules, the file ${sourceRules.length}`);
+	servedIndex.set(text, byOffset);
+	return byOffset;
+};
+
+const used = new Set();
+const states = [];
+const collect = async (state) => {
+	await settle();
+	const { coverage } = await send("CSS.takeCoverageDelta");
+	let count = 0;
+	for (const usage of coverage) {
+		if (!usage.used) continue;
+		const { file, text } = await sourceOf(usage.styleSheetId);
+		if (!file.endsWith(`/${SHEET}`)) continue;
+		const byOffset = indexServed(text);
+		// The usage range starts at the selector; allow for leading whitespace.
+		let index = byOffset.get(usage.startOffset);
+		if (index === undefined) {
+			const trimmed = usage.startOffset + (text.slice(usage.startOffset).length - text.slice(usage.startOffset).trimStart().length);
+			index = byOffset.get(trimmed);
+		}
+		// Grouping rules (@layer legacy, @media, @supports) report usage too.
+		if (index === undefined && /@[\w-]+\s*$/.test(text.slice(Math.max(0, usage.startOffset - 40), usage.startOffset))) continue;
+		if (index === undefined) throw new Error(`no ${SHEET} rule at offset ${usage.startOffset}: ${text.slice(usage.startOffset, usage.startOffset + 60)}`);
+		if (!used.has(index)) count += 1;
+		used.add(index);
+	}
+	states.push({ state, newlyUsed: count, totalUsed: used.size });
+	console.log(`${state}: +${count} (${used.size}/${sourceRules.length})`);
+};
+
+const startTracking = async () => {
+	await send("DOM.enable");
+	await send("CSS.enable");
+	await send("CSS.startRuleUsageTracking").catch(() => {});
+};
+
+async function load({ session = true, width, height }) {
+	await send("Emulation.setDeviceMetricsOverride", { width, height, deviceScaleFactor: 1, mobile: false });
+	const seeded = once("Page.loadEventFired");
+	await send("Page.navigate", { url: `${appUrl.origin}/favicon.ico` });
+	await seeded;
+	await evaluate(`(() => {
+		localStorage.setItem("cozyclay.locale", "en");
+		${session ? `localStorage.setItem("cozyclay.project-session.v1", JSON.stringify({ name: "QA", updatedAt: Date.now() }));` : `localStorage.removeItem("cozyclay.project-session.v1");`}
+		return true;
+	})()`);
+	sheets.clear();
+	sheetSource.clear();
+	const loaded = once("Page.loadEventFired");
+	await send("Page.navigate", { url: appUrl.href });
+	await loaded;
+	await startTracking();
+}
+
+const modeKeys = ["1", "2", "3", "4"];
+async function walkStudio(label) {
+	await waitFor("!!window.__cozyclay?.rigA && window.__cozyclay?.motion?.frames > 0 && !!document.querySelector('[data-node-id=characterA] .hierarchy-row')", 90000);
+	await evaluate("window.__cozyclay.pause?.(); true");
+	await collect(`${label} loaded`);
+	for (const key of modeKeys) {
+		await click(`[data-mode-key="${key}"]`);
+		await click("[data-node-id=characterA] .hierarchy-row");
+		await collect(`${label} mode ${key} + character`);
+	}
+	// A prop: viewport + Add › Cube selects the new object.
+	await click("[data-testid=viewport-add]");
+	await waitFor("!!document.querySelector('.viewport-titlebar .add-object-swatch.cube')");
+	await collect(`${label} viewport Add menu`);
+	await evaluate("document.querySelector('.viewport-titlebar .add-object-swatch.cube').closest('button').click(); true");
+	await waitFor("document.querySelector('.inspector-sidebar')?.dataset.inspector?.startsWith('object:')");
+	const inspector = await evaluate("document.querySelector('.inspector-sidebar').dataset.inspector");
+	for (const key of modeKeys) {
+		await click(`[data-mode-key="${key}"]`);
+		// Re-select the prop through the Outliner in every mode.
+		await evaluate(`(() => { const id = ${JSON.stringify(inspector.slice("object:".length))}; const row = document.querySelector('[data-node-id="' + id + '"] .hierarchy-row') || document.querySelector('[data-node-id="object:' + id + '"] .hierarchy-row'); row?.click(); return !!row; })()`);
+		await settle();
+		await collect(`${label} mode ${key} + prop`);
+	}
+	await click('[data-mode-key="1"]');
+	await click("[data-node-id=characterA] .hierarchy-row");
+	for (const trigger of ["view-camera-trigger", "shading-trigger", "view-menu-trigger"]) {
+		if (!await evaluate(`!!document.querySelector('[data-testid=${trigger}]')`)) continue;
+		await click(`[data-testid=${trigger}]`);
+		await collect(`${label} ${trigger} open`);
+		await escape();
+	}
+	for (const menu of ["file", "edit", "window", "help"]) {
+		await click(`[data-testid=menu-${menu}]`);
+		await waitFor(`!!document.querySelector('.menubar-menu[data-menu=${menu}]')`);
+		if (menu === "file") {
+			await click("#export-menu-trigger");
+			await waitFor("!!document.querySelector('.export-menu')");
+		}
+		await collect(`${label} ${menu} menu`);
+		await escape();
+		if (await evaluate("!!document.querySelector('.menubar-menu')")) await click(".topbar-swatch");
+	}
+	await click("[data-testid=topbar-generate-menu]");
+	await waitFor("!!document.querySelector('[data-generate-action]')");
+	await collect(`${label} Generate Motion caret`);
+	await escape();
+	if (await evaluate("!!document.querySelector('[data-generate-action]')")) await click("[data-testid=topbar-generate-menu]");
+	// Preferences through Edit › Preferences…, then every section.
+	await click("[data-testid=menu-edit]");
+	await waitFor("!!document.querySelector('[data-testid=menu-preferences]')");
+	await click("[data-testid=menu-preferences]");
+	await waitFor("!!document.querySelector('[data-testid=preferences-nav-item]')");
+	const sections = await evaluate("[...document.querySelectorAll('[data-testid=preferences-nav-item]')].map((item) => item.textContent.trim())");
+	for (const section of sections) {
+		await evaluate(`[...document.querySelectorAll('[data-testid=preferences-nav-item]')].find((item) => item.textContent.trim() === ${JSON.stringify(section)})?.click(); true`);
+		await settle();
+		await collect(`${label} Preferences › ${section}`);
+	}
+	await click("[data-testid=preferences-close]");
+	for (const tab of ["log", "content"]) {
+		await click(`[data-testid=content-tab-${tab}]`);
+		await collect(`${label} ${tab} tab`);
+	}
+	await evaluate("[...document.querySelectorAll('.content-folders [data-testid^=content-folder-]')].map((folder) => folder.dataset.testid)").then(async (folders) => {
+		for (const folder of folders) { await click(`[data-testid=${folder}]`); }
+		await collect(`${label} Content folders`);
+	});
+}
+
+await send("Runtime.enable");
+await send("Page.enable");
+await send("Network.enable");
+await send("Network.setBlockedURLs", { urls: ["*cloudflareinsights.com*"] });
+
+await load({ width: 1600, height: 1000 });
+await walkStudio("1600");
+await load({ width: 1280, height: 800 });
+await walkStudio("1280");
+await load({ session: false, width: 1440, height: 900 });
+await waitFor("!!document.querySelector('.v2-start-screen')", 60000);
+await collect("start screen");
+
+const sourceFiles = [];
+const walk = (dir) => {
+	for (const name of readdirSync(dir)) {
+		const path = join(dir, name);
+		if (statSync(path).isDirectory()) walk(path);
+		else if (/\.(jsx?|mjs)$/.test(name)) sourceFiles.push(readFileSync(path, "utf8"));
+	}
+};
+walk(join(root, "src"));
+const sourceBlob = sourceFiles.join("\n");
+const nameUsed = new Map();
+const referenced = (name) => {
+	if (!nameUsed.has(name)) nameUsed.set(name, new RegExp(`(?<![\\w-])${name.replace(/[.*+?^${}()|[\]\\]/g, "\\$&")}(?![\\w-])`).test(sourceBlob));
+	return nameUsed.get(name);
+};
+const lineOf = (offset) => sourceText.slice(0, offset).split("\n").length;
+const candidates = [];
+sourceRules.forEach((rule, index) => {
+	if (used.has(index)) return;
+	const names = [...new Set([...rule.selector.matchAll(/[.#](-?[_a-zA-Z][\w-]*)/g)].map((match) => match[1]))];
+	if (!names.length) return; // element-only rules are never pruned by this pass
+	if (names.some(referenced)) return;
+	candidates.push({ index, selector: rule.selector.replace(/\s+/g, " "), line: lineOf(rule.source.start.offset), endLine: lineOf(rule.source.end.offset) });
+});
+writeFileSync(out, JSON.stringify({ sheet: SHEET, rules: sourceRules.length, used: used.size, states, candidates }, null, 2));
+console.log(`${SHEET}: ${sourceRules.length} rules, ${used.size} used, ${candidates.length} unused with no src reference -> ${relative(process.cwd(), out)}`);
+ws.close();
+process.exit(0);

package/tools/qa/studio-control-count.mjs

@@ -1,13 +1,26 @@
-// Count the Studio's simultaneously visible controls per workflow mode and
-// screenshot each state. This is the before/after metric behind
-// docs/studio-ui-ia.md §1 (R6 mode budget: Scene <=35 / Camera <=38 / Motion <=52).
+// Count what the Studio shows at once per workflow mode, screenshot each
+// state, and hold the "controls" count to the v2 budgets (docs/studio-ui-ia.md §1).
 //
-//   QA_URL=http://127.0.0.1:5180/app/ CDP_PORT=9241 OUT=/tmp/studio-count \
+//   QA_URL=http://127.0.0.1:5180/app/?motion=/demo/walk-then-stop.npz CDP_PORT=9241 OUT=/tmp/studio-count \
 //     node tools/qa-browser.mjs -- node tools/qa/studio-control-count.mjs
 //
-// Writes <OUT>-<state>.png and <OUT>-counts.json. A "control" is a rendered
-// button/select/range/checkbox/a.topbar-action with a non-zero box; CSS
-// display:none does not count, hover-revealed chevrons do.
+// Writes <OUT>-<state>.png and <OUT>-counts.json (default OUT /tmp/studio-count)
+// and exits 1 when any state has more controls than its budget.
+//
+// Every rendered button/select/range/checkbox/a.topbar-action with a non-zero
+// box is counted (CSS display:none does not count, hover-revealed chevrons do)
+// and split in two:
+//   items    - data, which grows with the project: Outliner tree rows and their
+//              disclosure carets, Content asset tiles and Content category rows;
+//   controls - everything else (chrome). Only controls have a budget.
+// "total" (= controls + items) is the pre-v2 metric the R6 targets used.
+
+// v2 baseline measured on 40767ed (motion 55 -> 52 after #550 moved generate to the top bar); the pre-v2 R6 targets were 35/45/38/52 (docs/studio-ui-ia.md §1).
+const BUDGETS = { "stage-none": 37, "stage-char": 45, pose: 58, camera: 39, motion: 52 };
+
+import { writeFileSync } from "node:fs";
+
+const OUT = process.env.OUT || "/tmp/studio-count";
 const port = Number(process.env.CDP_PORT || 9222);
 const targets = await (await fetch(`http://127.0.0.1:${port}/json`)).json();
 const page = targets.find((t) => t.type === "page" && t.webSocketDebuggerUrl);
@@ -17,47 +30,72 @@ let id = 0; const pending = new Map();
 ws.onmessage = (e) => { const m = JSON.parse(e.data); if (m.id && pending.has(m.id)) { pending.get(m.id)(m.result ?? m); pending.delete(m.id); } };
 const send = (method, params = {}) => new Promise((r) => { id += 1; pending.set(id, r); ws.send(JSON.stringify({ id, method, params })); });
 const ev = async (x) => { const r = await send("Runtime.evaluate", { expression: x, returnByValue: true, awaitPromise: true }); if (r.exceptionDetails) throw new Error(r.exceptionDetails.exception?.description); return r.result?.value; };
-const sleep = (ms) => new Promise((r) => setTimeout(r, ms));
-const fs = await import("node:fs");
+// A MutationObserver armed before the check resolves on the exact DOM state.
+const waitFor = (expression, timeoutMs = 20000) => ev(`new Promise((resolve, reject) => {
+  const test = () => { try { return Boolean(${expression}); } catch { return false; } };
+  if (test()) { resolve(true); return; }
+  const observer = new MutationObserver(() => { if (!test()) return; observer.disconnect(); clearTimeout(timer); resolve(true); });
+  observer.observe(document.documentElement, { subtree: true, childList: true, attributes: true, characterData: true });
+  const timer = setTimeout(() => { observer.disconnect(); reject(new Error(${JSON.stringify(`Timed out waiting for: ${expression}`)})); }, ${timeoutMs});
+})`);
+const settle = () => ev("new Promise((resolve) => requestAnimationFrame(() => requestAnimationFrame(() => resolve(true))))");
 
 await send("Emulation.setDeviceMetricsOverride", { width: 1600, height: 1000, deviceScaleFactor: 1, mobile: false });
 if (process.env.QA_URL) await send("Page.navigate", { url: process.env.QA_URL });
-const t0 = Date.now();
-while (Date.now() - t0 < 60000) { if (await ev("!!(window.__cozyclay&&window.__cozyclay.rigA&&window.__cozyclay.editorCam)").catch(() => false)) break; await sleep(250); }
-await sleep(1500);
-// hide the project chooser if present
-await ev(`(()=>{for(const el of document.querySelectorAll("body *")){const text=el.textContent||"";const style=getComputedStyle(el);if(style.position==="fixed"&&/Choose a project to begin|Project name|시작할 프로젝트/i.test(text))el.style.display="none";}return true;})()`);
+await waitFor("!!(window.__cozyclay && window.__cozyclay.rigA && window.__cozyclay.editorCam) && !!document.querySelector('[data-mode-key]') && !!document.querySelector('[data-node-id=characterA] .hierarchy-row')", 60000);
+await ev("window.__cozyclay.pause?.(); true");
 
 const COUNT = `(()=>{
   const vis=(el)=>{const r=el.getBoundingClientRect();if(r.width<2||r.height<2)return false;const s=getComputedStyle(el);return s.visibility!=="hidden"&&s.display!=="none"&&s.opacity!=="0";};
   const all=[...document.querySelectorAll("button, select, input[type=range], input[type=checkbox], a.topbar-action")].filter(vis);
+  const isItem=(el)=>(!!el.closest("[role=treeitem]")&&(el.classList.contains("hierarchy-row")||el.classList.contains("hierarchy-toggle")))
+    ||el.matches("[data-testid=content-asset], [data-testid^=content-folder-]");
   const region=(el)=>{
     if(el.closest("header.topbar"))return "topbar";
-    if(el.closest(".viewport-titlebar"))return "viewport-bar";
-    if(el.closest(".hierarchy-left"))return "hierarchy";
-    if(el.closest(".inspector, .panel.right, aside.right, .inspector-panel"))return "inspector";
-    if(el.closest(".timeline, .tl-surface, .take-bar, footer"))return "timeline";
-    if(el.closest(".asset-pane, .assets"))return "assets";
+    if(el.closest(".v2-outliner, .hierarchy-left"))return "outliner";
+    if(el.closest(".inspector-sidebar, .inspector"))return "details";
+    if(el.closest(".v2-sequencer, .timeline"))return "sequencer";
+    if(el.closest("[data-testid=content-browser], .bottom-dock"))return "content";
+    if(el.closest(".v2-statusbar, .brandbar"))return "statusbar";
+    if(el.closest(".viewport"))return "viewport";
     return "other:"+(el.closest("aside, section, div[class]")?.className||"").toString().slice(0,30);
   };
-  const by={};for(const el of all){const k=region(el);(by[k]??=[]).push((el.getAttribute("aria-label")||el.textContent||el.tagName).trim().replace(/\\s+/g," ").slice(0,24));}
-  return {total:all.length,by};
+  const name=(el)=>(el.getAttribute("aria-label")||el.textContent||el.tagName).trim().replace(/\\s+/g," ").slice(0,24);
+  const by={controls:{},items:{}};let controls=0,items=0;
+  for(const el of all){const kind=isItem(el)?"items":"controls";if(kind==="items")items+=1;else controls+=1;(by[kind][region(el)]??=[]).push(name(el));}
+  const pose=document.querySelector(".pose-details");
+  const poseDetails=pose?[...pose.querySelectorAll("button,select,input[type=range],input[type=checkbox]")].filter(vis).length:null;
+  return {controls,items,total:all.length,poseDetails,by};
 })()`;
 
-const clickTab = async (label) => ev(`(()=>{const b=[...document.querySelectorAll(".workflow-mode-switch button")].find(b=>b.textContent.trim()==="${label}");if(!b)return false;b.click();return true;})()`);
+const mode = async (key) => {
+  await ev(`document.querySelector('[data-mode-key="${key}"]').click(); true`);
+  await waitFor(`document.querySelector('[data-mode-key="${key}"]')?.getAttribute('aria-selected') === 'true'`);
+};
+const selectCharacter = async () => {
+  await ev("document.querySelector('[data-node-id=characterA] .hierarchy-row').click(); true");
+  await waitFor("document.querySelector('[data-node-id=characterA]')?.getAttribute('aria-selected') === 'true'", 5000);
+};
 const states = [
-  ["scene-none", async () => { await clickTab("Scene"); await ev("window.__cozyclay.selectHierarchy?.(null)").catch(()=>{}); }],
-  ["scene-char", async () => { await clickTab("Scene"); await ev(`(()=>{const el=[...document.querySelectorAll('.hierarchy-left [role=treeitem], .hierarchy-left button, .hierarchy-left li')].find(e=>/Alpha|Character|캐릭터|A\\b/.test(e.textContent));el?.click();return !!el;})()`); }],
-  ["camera", async () => { await clickTab("Camera"); }],
-  ["motion", async () => { await clickTab("Motion"); }],
+  ["stage-none", async () => { await mode("1"); await ev("window.__cozyclay.selectHierarchy?.(null); true"); }],
+  ["stage-char", async () => { await mode("1"); await selectCharacter(); }],
+  // Pose as #545 measures it: press 2, IK turns on, Pose Details renders.
+  ["pose", async () => { await mode("2"); await waitFor("window.__cozyclay.ikMode === true && !!document.querySelector('.pose-details')"); }],
+  ["camera", async () => { await mode("3"); }],
+  ["motion", async () => { await mode("4"); await selectCharacter(); }],
 ];
 const out = {};
+const over = [];
 for (const [name, setup] of states) {
-  await setup(); await sleep(600);
+  await setup(); await settle();
   const shot = await send("Page.captureScreenshot", { format: "png" });
-  fs.writeFileSync(`${process.env.OUT}-${name}.png`, Buffer.from(shot.data, "base64"));
-  out[name] = await ev(COUNT);
-  console.log(name, out[name].total);
+  writeFileSync(`${OUT}-${name}.png`, Buffer.from(shot.data, "base64"));
+  out[name] = { ...await ev(COUNT), budget: BUDGETS[name] };
+  const ok = out[name].controls <= BUDGETS[name];
+  if (!ok) over.push(name);
+  console.log(`${ok ? "PASS" : "FAIL"} ${name} controls ${out[name].controls} <= ${BUDGETS[name]} (items ${out[name].items}, total ${out[name].total})`);
 }
-fs.writeFileSync(`${process.env.OUT}-counts.json`, JSON.stringify(out, null, 2));
-ws.close(); process.exit(0);
+writeFileSync(`${OUT}-counts.json`, JSON.stringify(out, null, 2));
+ws.close();
+if (over.length) console.log(`over budget: ${over.join(", ")}`);
+process.exit(over.length ? 1 : 0);