@12ui/design 0.2.48 → 0.2.50

package/prototype-kit/tests/offline-check.mjs

@@ -4,13 +4,29 @@ import { createHash } from 'node:crypto';
 import fs from 'node:fs';
 import os from 'node:os';
 import path from 'node:path';
+import { parseHTML } from 'linkedom';
 import { reviewFramingMarkup } from '../lib/review-framing.mjs';
+import { removeRemoteHeadLinks } from '../lib/local-document.mjs';
 import { buildPrototype } from './lib/run-process.mjs';
 
 const testsDir = path.dirname(new URL(import.meta.url).pathname);
 const kitDir = path.resolve(testsDir, '..');
 const scratch = fs.mkdtempSync(path.join(os.tmpdir(), 'proto-kit-offline-'));
 
+const localDocument = parseHTML([
+  '<html><head>',
+  '<link rel="preconnect" href="https://fonts.example">',
+  '<link rel="stylesheet" href="//cdn.example/font.css">',
+  '<link rel="stylesheet" href="proto.css">',
+  '</head></html>',
+].join('')).document;
+assert.equal(removeRemoteHeadLinks(localDocument), 2, 'must fire: direct-file prototypes remove remote head links');
+assert.deepEqual(
+  [...localDocument.querySelectorAll('head link')].map((link) => link.getAttribute('href')),
+  ['proto.css'],
+  'must stay silent: prototype-local stylesheets survive offline sanitization',
+);
+
 function buildFixture(name) {
   const runDir = path.join(testsDir, 'fixtures', name);
   return buildPrototype({ kitDir, run: { runDir }, runWorkDir: path.join(scratch, name) });
@@ -44,7 +60,7 @@ const outputDigest = (directory) => {
 };
 assert.equal(
   outputDigest(threeShell.protoDir),
-  '0c2147df5bc6552016cc278faec7abaabecbc7f5945cad7e1ac9b1df6e554403',
+  '0a24a0c220106a1592598f1ad11685081337cb60d3044953e56e11e239dbc8bd',
   'must stay silent: review support leaves the accepted shell/navigation complete output byte-identical',
 );
 const threeShellModel = JSON.parse(fs.readFileSync(threeShell.modelFile, 'utf8'));

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

@@ -2,11 +2,13 @@
 import assert from 'node:assert/strict';
 import { parseHTML } from 'linkedom';
 import { resolveDropdownAction, suppressDeterministicAction, usableDropdownOptions } from '../lib/actions.mjs';
-import { restoreActionPointerReachability } from '../lib/action-target.mjs';
+import { restoreActionPointerReachability, selectUniqueActionOwners } from '../lib/action-target.mjs';
+import { checkAlignRule } from './align-rule-check.mjs';
 import { declaredActiveMarkers, linkedNavForUnit, markerOverlapsNav } from '../lib/nav-active-state.mjs';
 import { matchPlannedPage } from '../lib/navigation.mjs';
 import { needsCanonicalShell, selectCanonicalShellPage } from '../lib/shell-consistency.mjs';
 import { isolateTransplantedShell, shellElementsForSourceId } from '../lib/shell-identity.mjs';
+import { compareCanonicalShellSamples, SHELL_RUNTIME_GEOMETRY_EPSILON_PX } from '../lib/shell-runtime-equivalence.mjs';
 import { stitchUnitShells } from '../lib/shell-stitching.mjs';
 import { compareCanonicalShells, isWithinShell, qualifiesShellCandidate, selectOneShellPerRegion, shouldSuppressDroppedShell, shouldTransplantShell } from '../lib/shells.mjs';
 import { slugText } from '../lib/text.mjs';
@@ -69,6 +71,68 @@ const reachableBefore = reachableDropdown.outerHTML;
 assert.equal(restoreActionPointerReachability(reachableDropdown), false, 'must stay silent: an already reachable dropdown target is unchanged');
 assert.equal(reachableDropdown.outerHTML, reachableBefore);
 
+const repeatedDropdown = { action: 'dropdown', options: ['All opportunities', 'High intent', 'Low intent'] };
+const distinctDropdown = { action: 'dropdown', options: ['All countries', 'Australia', 'Canada'] };
+const landsFilterDocument = parseHTML(`<div id="filters"><button id="filter-1"></button><button id="filter-2"></button><button id="filter-3"></button><button id="filter-4"></button><button id="filter-5"></button><button id="filter-6"></button></div>`).document;
+const landsFilterActions = new Map([
+  ['filters', repeatedDropdown],
+  ['filter-1', repeatedDropdown],
+  ['filter-2', distinctDropdown],
+  ['filter-3', distinctDropdown],
+  ['filter-4', distinctDropdown],
+  ['filter-5', distinctDropdown],
+  ['filter-6', distinctDropdown],
+]);
+const uniqueLandsFilters = selectUniqueActionOwners(landsFilterDocument, landsFilterActions);
+assert.deepEqual(uniqueLandsFilters.removed, [{ wrapperId: 'filters', ownerIds: ['filter-1', 'filter-2', 'filter-3', 'filter-4', 'filter-5', 'filter-6'], action: 'dropdown' }], 'must fire: the six-child Ghost Sitemap filter shape gives the wrapper action to its terminal controls');
+assert.deepEqual([...uniqueLandsFilters.actions.keys()], ['filter-1', 'filter-2', 'filter-3', 'filter-4', 'filter-5', 'filter-6'], 'must stay silent: every native filter control remains independently actionable');
+const landsModalDocument = parseHTML('<div id="submit"><button id="submit-button"></button></div>').document;
+const landsModalActions = new Map([
+  ['submit', { action: 'modal', modal: { title: 'Analyze my site?', confirm: 'Analyze my site' } }],
+  ['submit-button', { action: 'modal', modal: { title: 'Analyze my site?', confirm: 'Analyze my site' } }],
+]);
+const uniqueLandsModal = selectUniqueActionOwners(landsModalDocument, landsModalActions);
+assert.deepEqual(uniqueLandsModal.removed, [{ wrapperId: 'submit', ownerIds: ['submit-button'], action: 'modal' }], 'must fire: the One Question modal wrapper yields to its terminal button');
+assert.deepEqual([...uniqueLandsModal.actions.keys()], ['submit-button']);
+const territoryFilterDocument = parseHTML('<aside id="filter-bar"><button id="filter-a"></button><button id="filter-b"></button><button id="filter-c"></button><button id="filter-d"></button></aside>').document;
+const territoryFilterActions = new Map([
+  ['filter-bar', { action: 'dropdown', options: ['All', 'Open', 'Closed'] }],
+  ['filter-a', { action: 'dropdown', options: ['All territories', 'East', 'West'] }],
+  ['filter-b', { action: 'dropdown', options: ['All visits', 'High', 'Low'] }],
+  ['filter-c', { action: 'dropdown', options: ['All claims', 'Claimed', 'Open'] }],
+  ['filter-d', { action: 'dropdown', options: ['Sort', 'Visits', 'Fit'] }],
+]);
+const uniqueTerritoryFilters = selectUniqueActionOwners(territoryFilterDocument, territoryFilterActions);
+assert.deepEqual(uniqueTerritoryFilters.removed, [{ wrapperId: 'filter-bar', ownerIds: ['filter-a', 'filter-b', 'filter-c', 'filter-d'], action: 'dropdown' }], 'must fire: the Territory Map four-button aside yields to every terminal dropdown even when their option payloads differ');
+assert.deepEqual([...uniqueTerritoryFilters.actions.keys()], ['filter-a', 'filter-b', 'filter-c', 'filter-d']);
+const distinctNestedDocument = parseHTML('<div id="parent"><button id="child"></button></div>').document;
+const distinctNestedActions = new Map([
+  ['parent', { action: 'dropdown', options: ['One', 'Two', 'Three'] }],
+  ['child', { action: 'modal', modal: { title: 'Child' } }],
+]);
+const uniqueDistinctNested = selectUniqueActionOwners(distinctNestedDocument, distinctNestedActions);
+assert.deepEqual([...uniqueDistinctNested.actions.keys()], ['parent', 'child'], 'must stay silent: distinct nested actions retain the runtime child-wins contract');
+
+const shellSample = ({ visualOffset = 0, shellOffset = 0, appearanceSignature = 'same' } = {}) => ({
+  appearanceSignature,
+  visualGeometry: [[0, 0, 390, 72], [20 + visualOffset, 20, 100, 28]],
+  shellGeometry: [shellOffset, 0, 390, 72],
+});
+assert.equal(SHELL_RUNTIME_GEOMETRY_EPSILON_PX, 0.5, 'fixture contract: canonical shell geometry tolerance is half a CSS pixel');
+const subpixelShellComparison = compareCanonicalShellSamples(shellSample(), shellSample({ visualOffset: 0.4 }));
+assert.equal(subpixelShellComparison.equivalent, true, 'must stay silent: a sub-half-pixel glyph measurement drift is visually equivalent');
+assert.ok(Math.abs(subpixelShellComparison.maxGeometryDelta - 0.4) < 1e-9, 'fixture contract: the comparator reports the measured subpixel drift');
+assert.deepEqual(compareCanonicalShellSamples(shellSample(), shellSample({ visualOffset: 24 })), {
+  equivalent: false,
+  reason: 'geometry',
+  maxGeometryDelta: 24,
+}, 'must fire: the b13-class displaced header descendant remains a canonical-shell mismatch');
+assert.deepEqual(compareCanonicalShellSamples(shellSample(), shellSample({ appearanceSignature: 'changed' })), {
+  equivalent: false,
+  reason: 'appearance',
+  maxGeometryDelta: null,
+}, 'must fire: geometry tolerance never conceals structural or style differences');
+
 const headerNav = { containerId: 'nav', region: 'header', semantic: true, items: 8, share: 0.8, box: [0, 40, 1536, 76] };
 const announcement = { containerId: 'announcement', region: 'header', semantic: false, items: 3, share: 1, box: [0, 0, 1536, 40] };
 const footer = { containerId: 'footer', region: 'footer', semantic: true, items: 5, share: 0.8, box: [0, 900, 1536, 124] };
@@ -205,4 +269,6 @@ assert.equal(fireResult.bands[0].regions[0].active.navText, 'Menu');
 assert.equal(fireResult.bands[0].regions[0].shellId, isolatedHeader.id);
 assert.equal(fireResult.bands[0].regions[0].active.markerId, isolatedMarker.id);
 
+checkAlignRule();
+
 process.stdout.write('rules: ok\n');

package/prototype-kit/tests/shell-stitching-runtime.mjs

@@ -8,9 +8,9 @@ import { checkRuntime } from '../lib/runtime-check.mjs';
 import { startStaticServer } from '../lib/static-server.mjs';
 import { buildPrototype } from './lib/run-process.mjs';
 
-const expectFailure = process.argv.includes('--expect-failure');
-const unexpectedArgs = process.argv.slice(2).filter((arg) => arg !== '--expect-failure');
-if (unexpectedArgs.length > 0) throw new Error(`usage: shell-stitching-runtime.mjs [--expect-failure]`);
+const reintroduceDefect = process.argv.includes('--reintroduce-defect');
+const unexpectedArgs = process.argv.slice(2).filter((arg) => arg !== '--reintroduce-defect');
+if (unexpectedArgs.length > 0) throw new Error(`usage: shell-stitching-runtime.mjs [--reintroduce-defect]`);
 
 const testsDir = path.dirname(new URL(import.meta.url).pathname);
 const kitDir = path.resolve(testsDir, '..');
@@ -49,6 +49,13 @@ try {
     bandHeight(inventory, 'p2-canvas-control', 'mobile-390'),
   ], [900, 1400], 'fixture contract: the portrait control has a substantially taller canvas');
 
+  if (reintroduceDefect) {
+    const collisionFile = path.join(built.protoDir, 'id-collision.html');
+    const collisionHtml = fs.readFileSync(collisionFile, 'utf8');
+    const displaced = '<style id="reintroduced-b13-defect">@media(max-width:600px){[data-proto-shell-source-id="mobile-390-header-brand"]{transform:translateX(24px)!important}}</style>';
+    fs.writeFileSync(collisionFile, collisionHtml.replace('</head>', `${displaced}</head>`));
+  }
+
   server = await startStaticServer(runWorkDir);
   browser = await chromium.launch();
   const audit = await checkRuntime({
@@ -77,11 +84,11 @@ try {
   assert.equal(collision1536.actualSignature, donor1536.actualSignature, 'must stay silent: distinct native identities render the same canonical header');
 
   const groups = audit.shellConsistencyFailures.map((failure) => failure.group);
-  if (expectFailure) {
-    assert.deepEqual(groups, ['390:mobile-390:header'], 'pre-fix evidence must isolate one canonical collision to the mobile header');
-    assert.notEqual(collision390.actualSignature, donor390.actualSignature, 'must fire before the fix: recipient offsets alter transplanted donor descendants');
+  if (reintroduceDefect) {
+    assert.deepEqual(groups, ['390:mobile-390:header'], 'reintroduced b13 evidence must isolate one canonical collision to the mobile header');
+    assert.notEqual(collision390.actualSignature, donor390.actualSignature, 'must fire with the defect present: a 24px recipient displacement alters transplanted donor descendants');
     const failure = audit.shellConsistencyFailures[0];
-    assert.equal(failure.reason, 'prototype-shell-signature-mismatch', 'pre-fix evidence is the rendered canonical-shell mismatch');
+    assert.equal(failure.reason, 'prototype-shell-signature-mismatch', 'reintroduced evidence is the rendered canonical-shell mismatch');
     assert.deepEqual(failure.pages, [
       { file: 'donor.html', signature: donor390.actualSignature, geometry: donor390.actualGeometry },
       { file: 'id-collision.html', signature: collision390.actualSignature, geometry: collision390.actualGeometry },
@@ -92,7 +99,7 @@ try {
   }
 
   process.stdout.write(JSON.stringify({
-    expectation: expectFailure ? 'pre-fix-failure' : 'post-fix-pass',
+    expectation: reintroduceDefect ? 'reintroduced-defect-failure' : 'post-fix-pass',
     groups,
     mobile: {
       donor: donor390.actualSignature,