@12ui/design 0.2.44 → 0.2.46

package/prototype-kit/polish/tests/report-check.mjs

@@ -0,0 +1,31 @@
+#!/usr/bin/env node
+import assert from 'node:assert/strict';
+
+import { pageRuleRecords, summarizePolishReport } from '../report.mjs';
+
+const page = {
+  rules: {
+    align: { proposed: 2, overCap: 0 },
+    contrast: { proposed: 0, overCap: 0 },
+    rhythm: { proposed: 1, overCap: 1 },
+  },
+  accepted: [{ rule: 'align', overrides: 2 }],
+  rejected: [{ rule: 'rhythm', harm: ['spacing'] }],
+};
+page.ruleRecords = pageRuleRecords(page, ['align', 'contrast', 'rhythm']);
+assert.deepEqual(page.ruleRecords.map(({ rule, status }) => ({ rule, status })), [
+  { rule: 'align', status: 'fired' },
+  { rule: 'contrast', status: 'silent' },
+  { rule: 'rhythm', status: 'reverted' },
+]);
+
+const summary = summarizePolishReport({
+  policy: 'retained-v1',
+  rules: ['align', 'contrast', 'rhythm'],
+  pages: [page],
+});
+assert.equal(summary.fired, 1);
+assert.equal(summary.silent, 1);
+assert.equal(summary.reverted, 1);
+assert.equal(summary.rules.find(({ name }) => name === 'rhythm').overCap, 1);
+console.log('polish report outcomes green');

package/prototype-kit/polish/tests/rules-check.mjs

@@ -0,0 +1,52 @@
+#!/usr/bin/env node
+// Paired cases for every polish rule: fixtures/<rule>/fire.html must produce ≥1 override,
+// fixtures/<rule>/silent.html must produce 0. Optional fixtures/<rule>/expect.json pins exact ids/deltas.
+import fs from 'node:fs';
+import path from 'node:path';
+import { chromium } from '@playwright/test';
+import { measurePage } from '../measure.mjs';
+import { loadRules, ALL } from '../rules/index.mjs';
+import { applyOverridesScript, overridesToCss, mergeOverrides } from '../overrides.mjs';
+
+const here = path.dirname(new URL(import.meta.url).pathname);
+const only = process.argv[2] ? process.argv[2].split(',') : ALL;
+const rules = await loadRules(only);
+const browser = await chromium.launch();
+const page = await browser.newPage({ viewport: { width: 1536, height: 1024 } });
+let failures = 0;
+const near = (a, b, tol = 0.6) => Math.abs(a - b) <= tol;
+for (const rule of rules) {
+  const dir = path.join(here, 'fixtures', rule.name);
+  for (const kind of ['fire', 'silent']) {
+    const file = path.join(dir, `${kind}.html`);
+    if (!fs.existsSync(file)) { console.log(`FAIL ${rule.name}/${kind}: fixture missing`); failures++; continue; }
+    await page.goto('file://' + file, { waitUntil: 'load' });
+    await page.evaluate(() => document.fonts.ready);
+    const before = await measurePage(page, {});
+    const found = await page.evaluate(rule.browserFn(), { metrics: before, params: rule.params || {} });
+    const ok = kind === 'fire' ? found.length > 0 : found.length === 0;
+    let detail = `${found.length} override(s)`;
+    let harm = false;
+    if (kind === 'fire' && found.length) {
+      const merged = mergeOverrides(found);
+      await page.evaluate(applyOverridesScript(), overridesToCss(merged));
+      const after = await measurePage(page, {});
+      harm = after.counts.overlap > before.counts.overlap || after.overflow.filter((o) => o.kind !== 'spill').length > before.overflow.filter((o) => o.kind !== 'spill').length;
+      detail += `; overlap ${before.counts.overlap}→${after.counts.overlap}, overflow ${before.counts.overflow}→${after.counts.overflow}, align ${before.counts.alignment}→${after.counts.alignment}, ws ${before.counts.whitespace}→${after.counts.whitespace}`;
+      const expectFile = path.join(dir, 'expect.json');
+      if (fs.existsSync(expectFile)) {
+        const expect = JSON.parse(fs.readFileSync(expectFile, 'utf8'));
+        for (const e of expect) {
+          const m = merged.find((o) => o.id === e.id);
+          const good = m && (e.dx == null || near(m.dx, e.dx)) && (e.dy == null || near(m.dy, e.dy)) && (e.w == null || near(m.w, e.w, 1)) && (e.h == null || near(m.h, e.h, 1)) && (!e.css || Object.entries(e.css).every(([k, v]) => m.css[k] === v));
+          if (!good) { detail += `; expected ${JSON.stringify(e)} got ${JSON.stringify(m || null)}`; failures++; }
+        }
+      }
+    }
+    if (!ok || harm) failures++;
+    console.log(`${ok && !harm ? 'ok  ' : 'FAIL'} ${rule.name}/${kind}: ${detail}${harm ? ' HARM' : ''}`);
+  }
+}
+await browser.close();
+if (failures) { console.log(`${failures} failure(s)`); process.exit(1); }
+console.log('all polish rule pairs green');

package/skills/12ui-design/SKILL.md

@@ -39,10 +39,14 @@ Execute stays in the foreground through its network work; `next` can report prog
 
 Use `--prototype` with `--convert html` when the deliverable should be clickable. The export becomes a working app — navigation, shared shells, and holding pages for unbuilt routes — written to `<run-dir>/branch/prototype/`.
 
+Add `--polish` only when the user wants the opt-in production-feel pass. It runs the retained deterministic, harm-guarded rules after build, records every rule as fired, silent, or reverted, and runs the prototype runtime gates on that polished output.
+
 For a completed branch that was exported without the flag, run:
 
     12ui prototype <run-dir>
 
+The same opt-in is available here as `12ui prototype <run-dir> --polish`.
+
 ## 3. Convert
 
 When you have a single image to convert (or for example only designing a single viewport), you can directly convert the image instead of branching it.