create-yss-spec 3.3.1 → 3.3.4

package/template/.claude/skills/archify/test/semantic-passport.test.mjs

@@ -1,99 +0,0 @@
-import { test } from 'node:test';
-import assert from 'node:assert/strict';
-import { execFileSync } from 'node:child_process';
-import fs from 'node:fs';
-import os from 'node:os';
-import path from 'node:path';
-import { fileURLToPath } from 'node:url';
-
-const __dirname = path.dirname(fileURLToPath(import.meta.url));
-const skillRoot = path.resolve(__dirname, '..');
-const tmp = fs.mkdtempSync(path.join(os.tmpdir(), 'archify-semantic-passport-'));
-
-const CASES = {
-  architecture: 'web-app.architecture.json',
-  workflow: 'agent-tool-call.workflow.json',
-  sequence: 'cache-miss-request.sequence.json',
-  dataflow: 'product-analytics.dataflow.json',
-  lifecycle: 'agent-run.lifecycle.json',
-};
-
-function render(mode, example) {
-  const output = path.join(tmp, `${mode}.html`);
-  execFileSync(process.execPath, [
-    path.join(skillRoot, `renderers/${mode}/render-${mode}.mjs`),
-    path.join(skillRoot, 'examples', example),
-    output,
-  ]);
-  return fs.readFileSync(output, 'utf8');
-}
-
-function svg(html) {
-  return html.match(/<svg\b[\s\S]*?<\/svg>/)?.[0] || '';
-}
-
-test('all typed renderers emit details-on-demand metadata and native SVG titles', () => {
-  for (const [mode, example] of Object.entries(CASES)) {
-    const html = render(mode, example);
-    const diagram = svg(html);
-    assert.match(diagram, /data-node-kind="[^"]+"/, mode);
-    assert.match(diagram, /data-node-sublabel="[^"]+"/, mode);
-    assert.match(diagram, /data-node-context="[^"]+"/, mode);
-    assert.match(diagram, /<g id="node-[^"]+"[\s\S]*?<title>[^<]+ · [^<]+<\/title>/, mode);
-  }
-});
-
-test('renderer-owned structure supplies truthful Semantic Passport context', () => {
-  const architecture = render('architecture', CASES.architecture);
-  const workflow = render('workflow', CASES.workflow);
-  const sequence = render('sequence', CASES.sequence);
-  const dataflow = render('dataflow', CASES.dataflow);
-  const lifecycle = render('lifecycle', CASES.lifecycle);
-
-  assert.match(architecture, /data-node-id="api"[^>]+data-node-kind="backend"[^>]+data-node-context="AWS Region: us-west-2 › sg-api :443\/:8000"/);
-  assert.match(workflow, /data-node-id="approval"[^>]+data-node-kind="security"[^>]+data-node-context="Policy &amp; Recovery › Human or policy stop › Plan \+ route"/);
-  assert.match(sequence, /data-node-id="redis"[^>]+data-node-kind="database"[^>]+data-node-context="Sequence participant"/);
-  assert.match(dataflow, /data-node-id="warehouse"[^>]+data-node-kind="database"[^>]+data-node-context="04 \/ Store"/);
-  assert.match(lifecycle, /data-node-id="executing"[^>]+data-node-kind="active"[^>]+data-node-context="Lifecycle phases"/);
-});
-
-test('Relationship Lens renders one Semantic Passport and copyable stable focus link', () => {
-  const html = render('workflow', CASES.workflow);
-  assert.match(html, /<span class="relationship-lens-eyebrow">Semantic passport<\/span>/);
-  assert.match(html, /id="focus-detail" hidden/);
-  assert.match(html, /id="focus-kind" data-passport="kind"/);
-  assert.match(html, /id="focus-context" data-passport="context" hidden/);
-  assert.match(html, /id="focus-tag" data-passport="tag" hidden/);
-  assert.match(html, /id="focus-id" data-passport="id"/);
-  assert.match(html, /id="btn-focus-clear"[^>]+aria-label="Close semantic passport"[^>]+title="Close">&#215;<\/button>/);
-  assert.match(html, /id="btn-focus-copy"[^>]+aria-label="Copy link to focused node"/);
-  assert.match(html, /id="btn-focus-relations"[^>]+aria-expanded="false"[^>]+aria-controls="relationship-lens-list"/);
-  assert.match(html, /function renderPassport\(id, node\)/);
-  assert.match(html, /var relationId = record && record\.id/);
-  assert.match(html, /\? '#relation=' \+ encodeURIComponent\(relationId\)/);
-  assert.match(html, /: '#focus=' \+ encodeURIComponent\(activeIds\[0\]\)/);
-  assert.match(html, /navigator\.clipboard\.writeText\(value\)/);
-  assert.match(html, /document\.execCommand\('copy'\)/);
-  assert.match(html, /copyLink: copyFocusLink/);
-  assert.match(html, /compactOnMobile = mobile && chip\.getAttribute\('data-relations-expanded'\) !== 'true'/);
-  assert.match(html, /nodeTop - chip\.offsetHeight - gap/);
-  assert.match(html, /focus-chip:not\(\[data-relations-expanded="true"\]\) \.relationship-lens-list \{ display: none; \}/);
-  assert.match(html, /clearBtn\.addEventListener\('click', function \(\) \{ clear\(\{ restoreFocus: true \}\); \}\)/);
-  assert.match(html, /chip\.hidden \|\| !target \|\| typeof target\.closest !== 'function' \|\| chip\.contains\(target\)/);
-  assert.match(html, /target\.closest\('\[data-node-id\], \[data-relationship-hit-key\], \.overview-map'\)/);
-  assert.match(html, /document\.addEventListener\('click',[\s\S]+?clear\(\);\s+\}, true\);/);
-  assert.match(html, /Archify\.focus\.clear\(\{ restoreFocus: true \}\)/);
-});
-
-test('Node Finder searches and presents the same passport facts', () => {
-  const html = render('dataflow', CASES.dataflow);
-  assert.match(html, /var authored = node\.getAttribute\('data-node-kind'\)/);
-  assert.match(html, /var sublabel = node\.getAttribute\('data-node-sublabel'\) \|\| ''/);
-  assert.match(html, /var context = node\.getAttribute\('data-node-context'\) \|\| ''/);
-  assert.match(html, /var tag = node\.getAttribute\('data-node-tag'\) \|\| ''/);
-  assert.match(html, /search: \(id \+ ' ' \+ label \+ ' ' \+ type \+ ' ' \+ sublabel \+ ' ' \+ context \+ ' ' \+ tag \+ ' ' \+ sourceSearch \+ ' ' \+ text\)\.toLowerCase\(\)/);
-  assert.match(html, /\[viewerKindLabel\(item\.type\), item\.id, item\.sublabel, item\.tag\]\.filter\(Boolean\)\.join\(' \\u00b7 '\)/);
-  assert.match(html, /meta\.title = \[viewerKindLabel\(item\.type\), item\.id, item\.context, item\.sublabel, item\.tag\]\.filter\(Boolean\)\.join\(' \\u00b7 '\)/);
-});
-
-process.on('exit', () => fs.rmSync(tmp, { recursive: true, force: true }));

package/template/.claude/skills/archify/test/semantic-radar.test.mjs

@@ -1,575 +0,0 @@
-import { test } from 'node:test';
-import assert from 'node:assert/strict';
-import { execFileSync } from 'node:child_process';
-import fs from 'node:fs';
-import os from 'node:os';
-import path from 'node:path';
-import { fileURLToPath, pathToFileURL } from 'node:url';
-
-import { ChromeVisualBrowser, findChrome } from '../bin/visual-check.mjs';
-
-const __dirname = path.dirname(fileURLToPath(import.meta.url));
-const skillRoot = path.resolve(__dirname, '..');
-const tmp = fs.mkdtempSync(path.join(os.tmpdir(), 'archify-semantic-radar-'));
-const chromePath = process.env.ARCHIFY_CHROME ? findChrome() : null;
-
-const CASES = {
-  architecture: 'web-app.architecture.json',
-  workflow: 'agent-tool-call.workflow.json',
-  sequence: 'cache-miss-request.sequence.json',
-  dataflow: 'product-analytics.dataflow.json',
-  lifecycle: 'agent-run.lifecycle.json',
-};
-
-function render(mode, example) {
-  const output = path.join(tmp, `${mode}.html`);
-  execFileSync(process.execPath, [
-    path.join(skillRoot, `renderers/${mode}/render-${mode}.mjs`),
-    path.join(skillRoot, 'examples', example),
-    output,
-  ]);
-  return fs.readFileSync(output, 'utf8');
-}
-
-function canonicalSvg(html) {
-  return html.match(/<svg\b[\s\S]*?<\/svg>/)?.[0] || '';
-}
-
-async function evaluate(browser, sessionId, expression, awaitPromise = false) {
-  const response = await browser.cdp.send('Runtime.evaluate', {
-    expression,
-    awaitPromise,
-    returnByValue: true,
-  }, sessionId);
-  if (response.exceptionDetails) {
-    throw new Error(response.exceptionDetails.exception?.description
-      || response.exceptionDetails.text
-      || 'Runtime.evaluate failed');
-  }
-  return response.result?.value;
-}
-
-async function loadArtifact(browser, artifactPath, { width = 1440, height = 900 } = {}) {
-  const sessionId = await browser.sessionPromise;
-  await browser.cdp.send('Emulation.setDeviceMetricsOverride', {
-    width,
-    height,
-    deviceScaleFactor: 1,
-    mobile: false,
-  }, sessionId);
-  const loaded = browser.cdp.waitFor('Page.loadEventFired', sessionId);
-  const navigation = await browser.cdp.send('Page.navigate', {
-    url: pathToFileURL(artifactPath).href,
-  }, sessionId);
-  if (navigation.errorText) throw new Error(`Chrome navigation failed: ${navigation.errorText}`);
-  await loaded;
-  await evaluate(browser, sessionId, `(function () {
-    document.documentElement.setAttribute('data-motion', 'still');
-    var fontsReady = document.fonts && document.fonts.ready
-      ? document.fonts.ready.catch(function () {})
-      : Promise.resolve();
-    return fontsReady.then(function () {
-      return new Promise(function (resolve) {
-        requestAnimationFrame(function () { requestAnimationFrame(resolve); });
-      });
-    });
-  })()`, true);
-  return sessionId;
-}
-
-async function radarRects(browser, sessionId, setup) {
-  return evaluate(browser, sessionId, `(function () {
-    ${setup}
-    return new Promise(function (resolve) {
-      requestAnimationFrame(function () {
-        requestAnimationFrame(function () {
-          var radar = document.getElementById('overview-map').getBoundingClientRect();
-          var controls = document.querySelector('.diagram-nav').getBoundingClientRect();
-          var passport = document.getElementById('focus-chip');
-          var passportRect = passport && !passport.hidden ? passport.getBoundingClientRect() : null;
-          resolve({
-            radar: { left: radar.left, top: radar.top, right: radar.right, bottom: radar.bottom },
-            controls: { left: controls.left, top: controls.top, right: controls.right, bottom: controls.bottom },
-            passport: passportRect ? {
-              left: passportRect.left,
-              top: passportRect.top,
-              right: passportRect.right,
-              bottom: passportRect.bottom
-            } : null
-          });
-        });
-      });
-    });
-  })()`, true);
-}
-
-async function dragMouse(browser, sessionId, from, to) {
-  await browser.cdp.send('Input.dispatchMouseEvent', {
-    type: 'mousePressed',
-    x: from.x,
-    y: from.y,
-    button: 'left',
-    buttons: 1,
-    clickCount: 1,
-  }, sessionId);
-  await browser.cdp.send('Input.dispatchMouseEvent', {
-    type: 'mouseMoved',
-    x: to.x,
-    y: to.y,
-    button: 'left',
-    buttons: 1,
-  }, sessionId);
-  await browser.cdp.send('Input.dispatchMouseEvent', {
-    type: 'mouseReleased',
-    x: to.x,
-    y: to.y,
-    button: 'left',
-    buttons: 0,
-    clickCount: 1,
-  }, sessionId);
-  await evaluate(browser, sessionId, `new Promise(function (resolve) {
-    requestAnimationFrame(function () { requestAnimationFrame(resolve); });
-  })`, true);
-}
-
-function overlaps(a, b, gap = 0) {
-  return a.left < b.right + gap
-    && a.right > b.left - gap
-    && a.top < b.bottom + gap
-    && a.bottom > b.top - gap;
-}
-
-test('all typed renderers inherit one viewer-only Semantic Radar', () => {
-  for (const [mode, example] of Object.entries(CASES)) {
-    const html = render(mode, example);
-    assert.match(html, /id="overview-map" hidden role="region" aria-labelledby="overview-map-title"/, mode);
-    assert.match(html, /id="overview-map-surface" tabindex="0" role="group"/, mode);
-    assert.match(html, /id="overview-map-expand"[^>]+aria-label="Open full semantic radar"/, mode);
-    assert.match(html, /id="overview-map-feedback" role="status" aria-live="polite" hidden/, mode);
-    assert.match(html, /id="btn-overview-map"[^>]+aria-label="Open semantic radar"[^>]+aria-expanded="false"[^>]+aria-controls="overview-map"/, mode);
-    assert.match(html, /Archify\.radar = \(function \(\)/, mode);
-    assert.match(html, /document\.createElementNS\(namespace, 'svg'\)/, mode);
-    assert.match(html, /mapSvg\.setAttribute\('aria-label', viewerText\('viewer\.radar\.nodes'\)\)/, mode);
-    assert.match(html, /diagram\.querySelectorAll\('\[data-node-id\]'\)/, mode);
-    assert.equal((html.match(/<svg\b/g) || []).length, 1, `${mode} keeps one static canonical SVG`);
-    assert.doesNotMatch(canonicalSvg(html), /overview-map|Semantic radar|data-radar-node-id/, mode);
-  }
-});
-
-test('Semantic Radar derives semantic node bounds and focuses stable IDs', () => {
-  const html = render('workflow', CASES.workflow);
-  assert.match(html, /box = node\.getBBox\(\)/);
-  assert.match(html, /rect\.setAttribute\('data-radar-node-id', id\)/);
-  assert.match(html, /rect\.setAttribute\('data-kind', node\.getAttribute\('data-node-kind'\) \|\| 'neutral'\)/);
-  assert.match(html, /rect\.setAttribute\('aria-label', viewerText\('viewer\.radar\.focus'/);
-  assert.match(html, /Archify\.focus\.set\(id, \{ toggle: false \}\)/);
-  assert.match(html, /Archify\.view\.reveal\(\[id\], \{ includeNeighbors: true, reason: 'radar' \}\)/);
-  assert.match(html, /function bringNodeIntoWindow\(node\)/);
-  assert.match(html, /window\.scrollY \+ rect\.top \+ rect\.height \/ 2 - window\.innerHeight \/ 2/);
-  assert.match(html, /data-radar-active/);
-});
-
-test('Semantic Radar tracks desktop camera and mobile contained scroll', () => {
-  const html = render('sequence', CASES.sequence);
-  assert.match(html, /function logicalViewport\(\)/);
-  assert.match(html, /x = viewBox\.x \+ container\.scrollLeft \/ metrics\.scale/);
-  assert.match(html, /x = viewBox\.x \+ \(\(-state\.x \/ state\.scale\) - metrics\.offsetX\) \/ metrics\.scale/);
-  assert.match(html, /viewport\.setAttribute\('width', String\(visible\.width\)\)/);
-  assert.match(html, /viewerText\('viewer\.radar\.viewport\.width'/);
-  assert.match(html, /function centerAt\(logicalX, logicalY, options\)/);
-  assert.match(html, /minimumScale: 1\.5, instant: true/);
-  assert.match(html, /container\.scrollTo\(\{ left: mobileTarget, behavior: options\.instant \? 'auto' : 'smooth' \}\)/);
-  assert.match(html, /data-wide-diagram="true"\] \.overview-map/);
-  assert.match(html, /function updateDocking\(\)/);
-  assert.match(html, /chip\.style\.top = Math\.round\(top\) \+ 'px';[\s\S]+Archify\.radar\.sync\(\)/);
-  assert.match(html, /var navigation = container\.querySelector\('\.diagram-nav'\)/);
-  assert.match(html, /if \(controlRect\) bottom = Math\.min\(bottom, controlRect\.top - placementGap\)/);
-  assert.match(html, /hardBlockers: \[lensRect, controlRect, legendRect\]\.filter\(Boolean\)/);
-  assert.match(html, /function cornerCandidates\(context\)/);
-  assert.match(html, /function nearbyCandidates\(context, reference\)/);
-  assert.match(html, /nearbyCandidates\(context, reference\)\.concat\(cornerCandidates\(context\)\)/);
-  assert.match(html, /var placementOptions = \{ softWeight: manualPosition \? 0 : 100 \}/);
-  assert.match(html, /manualPosition && positionIsValid\(manualPosition, context\)/);
-  assert.match(html, /panelHead\.addEventListener\('pointerdown', beginPanelDrag\)/);
-  assert.match(html, /surface\.addEventListener\('pointerdown',[\s\S]+viewportDrag = \{ pointerId: event\.pointerId \}/);
-  assert.match(html, /target\.closest\('\[data-node-id\], \[data-relationship-hit-key\], \.overview-map'\)/);
-  assert.match(html, /--archify-radar-top/);
-  assert.match(html, /\.overview-map\[data-docked="true"\]/);
-});
-
-test('Semantic Radar keeps redundant accessible navigation and clean exports', () => {
-  const html = render('architecture', CASES.architecture);
-  assert.match(html, /Semantic radar \(M\)/);
-  assert.match(html, /e\.key === 'm' \|\| e\.key === 'M'/);
-  assert.match(html, /e\.key === 'Escape' && Archify\.radar\.isOpen\(\)/);
-  assert.match(html, /event\.key === 'ArrowLeft'[\s\S]+event\.key === 'ArrowRight'[\s\S]+event\.key === 'ArrowUp'[\s\S]+event\.key === 'ArrowDown'/);
-  assert.match(html, /node && \(event\.key === 'Enter' \|\| event\.key === ' '\)/);
-  assert.match(html, /\.overview-map-viewport \{[\s\S]*?pointer-events: none;/);
-  assert.match(html, /html\[data-embed="true"\] \.overview-map/);
-  assert.match(html, /class="overview-map no-print"/);
-  assert.match(html, /The radar is built at runtime so the checked artifact still contains[\s\S]+one canonical SVG block/);
-  assert.doesNotMatch(canonicalSvg(html), /overview-map-node|overview-map-viewport/);
-});
-
-test('Semantic Radar stays above the measured MAP control strip', {
-  skip: chromePath ? false : 'Set ARCHIFY_CHROME to run the real browser regression.',
-}, async () => {
-  const artifact = path.join(tmp, 'radar-control-clearance.html');
-  execFileSync(process.execPath, [
-    path.join(skillRoot, 'renderers/architecture/render-architecture.mjs'),
-    path.join(skillRoot, 'examples', CASES.architecture),
-    artifact,
-  ]);
-  const browser = new ChromeVisualBrowser(chromePath);
-  try {
-    const sessionId = await loadArtifact(browser, artifact, { width: 1440, height: 900 });
-    const rects = await radarRects(browser, sessionId, `
-      var container = document.querySelector('.diagram-container');
-      window.scrollTo(0, Math.max(0, container.offsetTop + container.offsetHeight - window.innerHeight + 8));
-      Archify.radar.open();
-    `);
-    const controlGap = rects.controls.top - rects.radar.bottom;
-    assert.ok(controlGap >= 15, JSON.stringify({ ...rects, controlGap }, null, 2));
-    assert.ok(
-      rects.radar.left < rects.controls.left,
-      `automatic placement should prefer the lower-left corner: ${JSON.stringify(rects, null, 2)}`,
-    );
-  } finally {
-    await browser.close();
-  }
-});
-
-test('Semantic Radar avoids an expanded mobile Passport without hiding a collision', {
-  skip: chromePath ? false : 'Set ARCHIFY_CHROME to run the real browser regression.',
-}, async () => {
-  const artifact = path.join(tmp, 'radar-mobile-passport.html');
-  execFileSync(process.execPath, [
-    path.join(skillRoot, 'renderers/architecture/render-architecture.mjs'),
-    path.join(skillRoot, 'examples', CASES.architecture),
-    artifact,
-  ]);
-  const browser = new ChromeVisualBrowser(chromePath);
-  try {
-    const sessionId = await loadArtifact(browser, artifact, { width: 390, height: 600 });
-    const state = await evaluate(browser, sessionId, `(function () {
-      var container = document.querySelector('.diagram-container');
-      window.scrollTo(0, Math.max(0, container.offsetTop));
-      Archify.focus.set('lb', { toggle: false });
-      document.getElementById('btn-focus-relations').click();
-      Archify.radar.open();
-      return new Promise(function (resolve) {
-        setTimeout(function () {
-            var radar = document.getElementById('overview-map');
-            var radarRect = radar.getBoundingClientRect();
-            var passportRect = document.getElementById('focus-chip').getBoundingClientRect();
-            var containerRect = document.querySelector('.diagram-container').getBoundingClientRect();
-            var controlsRect = document.querySelector('.diagram-nav').getBoundingClientRect();
-            var legendRect = document.querySelector('[data-legend]').getBoundingClientRect();
-            resolve({
-              radar: { left: radarRect.left, top: radarRect.top, right: radarRect.right, bottom: radarRect.bottom },
-              passport: { left: passportRect.left, top: passportRect.top, right: passportRect.right, bottom: passportRect.bottom },
-              container: { left: containerRect.left, top: containerRect.top, right: containerRect.right, bottom: containerRect.bottom },
-              controls: { left: controlsRect.left, top: controlsRect.top, right: controlsRect.right, bottom: controlsRect.bottom },
-              legend: { left: legendRect.left, top: legendRect.top, right: legendRect.right, bottom: legendRect.bottom },
-              viewport: { width: window.innerWidth, height: window.innerHeight },
-              invalid: radar.getAttribute('data-placement-invalid'),
-              compact: radar.getAttribute('data-compact'),
-              unavailable: radar.getAttribute('data-placement-unavailable')
-            });
-        }, 180);
-      });
-    })()`, true);
-    assert.equal(overlaps(state.radar, state.passport, 10), false, JSON.stringify(state, null, 2));
-    assert.notEqual(state.invalid, 'true', JSON.stringify(state, null, 2));
-    assert.equal(state.compact, 'true', JSON.stringify(state, null, 2));
-
-    const expanded = await evaluate(browser, sessionId, `(function () {
-      document.getElementById('overview-map-expand').click();
-      return new Promise(function (resolve) {
-        setTimeout(function () {
-            var radar = document.getElementById('overview-map');
-            var rect = radar.getBoundingClientRect();
-            var passport = document.getElementById('focus-chip');
-            resolve({
-              compact: radar.getAttribute('data-compact'),
-              height: rect.height,
-              surfaceVisible: getComputedStyle(document.getElementById('overview-map-surface')).display !== 'none',
-              passportYielded: passport.getAttribute('data-radar-yielded'),
-              passportVisible: getComputedStyle(passport).display !== 'none'
-            });
-        }, 120);
-      });
-    })()`, true);
-    assert.equal(expanded.compact, null, JSON.stringify(expanded, null, 2));
-    assert.equal(expanded.surfaceVisible, true, JSON.stringify(expanded, null, 2));
-    assert.equal(expanded.passportYielded, 'true', JSON.stringify(expanded, null, 2));
-    assert.equal(expanded.passportVisible, false, JSON.stringify(expanded, null, 2));
-    assert.ok(expanded.height > state.radar.bottom - state.radar.top, JSON.stringify({ state, expanded }, null, 2));
-
-    const closed = await evaluate(browser, sessionId, `(function () {
-      document.getElementById('overview-map-close').click();
-      var passport = document.getElementById('focus-chip');
-      return {
-        radarHidden: document.getElementById('overview-map').hidden,
-        passportYielded: passport.getAttribute('data-radar-yielded'),
-        passportVisible: getComputedStyle(passport).display !== 'none'
-      };
-    })()`);
-    assert.equal(closed.radarHidden, true, JSON.stringify(closed, null, 2));
-    assert.equal(closed.passportYielded, null, JSON.stringify(closed, null, 2));
-    assert.equal(closed.passportVisible, true, JSON.stringify(closed, null, 2));
-  } finally {
-    await browser.close();
-  }
-});
-
-test('Semantic Radar reports a consistent unavailable state and recovers when space returns', {
-  skip: chromePath ? false : 'Set ARCHIFY_CHROME to run the real browser regression.',
-}, async () => {
-  const artifact = path.join(tmp, 'radar-unavailable.html');
-  execFileSync(process.execPath, [
-    path.join(skillRoot, 'renderers/architecture/render-architecture.mjs'),
-    path.join(skillRoot, 'examples', CASES.architecture),
-    artifact,
-  ]);
-  const browser = new ChromeVisualBrowser(chromePath);
-  try {
-    const sessionId = await loadArtifact(browser, artifact, { width: 390, height: 300 });
-    const unavailable = await evaluate(browser, sessionId, `(function () {
-      var container = document.querySelector('.diagram-container');
-      window.scrollTo(0, Math.max(0, container.offsetTop));
-      Archify.focus.set('lb', { toggle: false });
-      document.getElementById('btn-focus-relations').click();
-      Archify.radar.open();
-      return new Promise(function (resolve) {
-        setTimeout(function () {
-          var panel = document.getElementById('overview-map');
-          var trigger = document.getElementById('btn-overview-map');
-          var feedback = document.getElementById('overview-map-feedback');
-          resolve({
-            panelHidden: panel.hidden,
-            expanded: trigger.getAttribute('aria-expanded'),
-            limited: trigger.getAttribute('data-radar-space-limited'),
-            feedbackHidden: feedback.hidden,
-            feedback: feedback.textContent.trim()
-          });
-        }, 260);
-      });
-    })()`, true);
-    assert.equal(unavailable.panelHidden, true, JSON.stringify(unavailable, null, 2));
-    assert.equal(unavailable.expanded, 'false', JSON.stringify(unavailable, null, 2));
-    assert.equal(unavailable.limited, 'true', JSON.stringify(unavailable, null, 2));
-    assert.equal(unavailable.feedbackHidden, false, JSON.stringify(unavailable, null, 2));
-    assert.match(unavailable.feedback, /space/i);
-
-    await browser.cdp.send('Emulation.setDeviceMetricsOverride', {
-      width: 390,
-      height: 600,
-      deviceScaleFactor: 1,
-      mobile: false,
-    }, sessionId);
-    const recovered = await evaluate(browser, sessionId, `new Promise(function (resolve) {
-      setTimeout(function () {
-        var panel = document.getElementById('overview-map');
-        var trigger = document.getElementById('btn-overview-map');
-        var feedback = document.getElementById('overview-map-feedback');
-        resolve({
-          panelHidden: panel.hidden,
-          expanded: trigger.getAttribute('aria-expanded'),
-          feedbackHidden: feedback.hidden
-        });
-      }, 260);
-    })`, true);
-    assert.equal(recovered.panelHidden, false, JSON.stringify(recovered, null, 2));
-    assert.equal(recovered.expanded, 'true', JSON.stringify(recovered, null, 2));
-    assert.equal(recovered.feedbackHidden, true, JSON.stringify(recovered, null, 2));
-  } finally {
-    await browser.close();
-  }
-});
-
-test('Semantic Radar automatically avoids a tall Semantic Passport', {
-  skip: chromePath ? false : 'Set ARCHIFY_CHROME to run the real browser regression.',
-}, async () => {
-  const input = path.join(tmp, 'tall-passport.architecture.json');
-  const artifact = path.join(tmp, 'tall-passport.html');
-  const peers = Array.from({ length: 12 }, (_, index) => ({
-    id: `peer-${index + 1}`,
-    type: index % 2 ? 'backend' : 'database',
-    label: `Peer ${index + 1}`,
-    sublabel: 'Connected system',
-    pos: [80, 40 + index * 90],
-    size: [130, 60],
-  }));
-  fs.writeFileSync(input, JSON.stringify({
-    schema_version: 1,
-    diagram_type: 'architecture',
-    meta: { title: 'Tall Passport Radar Regression', output: artifact },
-    components: [
-      ...peers,
-      { id: 'hub', type: 'security', label: 'Relationship Hub', sublabel: 'Many authored links', pos: [900, 500], size: [150, 70] },
-    ],
-    boundaries: [],
-    connections: peers.map((peer, index) => ({
-      id: `hub-to-${peer.id}`,
-      from: 'hub',
-      to: peer.id,
-      fromSide: 'left',
-      toSide: 'right',
-      via: [[840, 535], [840, peer.pos[1] + 30]],
-    })),
-    cards: [],
-  }, null, 2));
-  execFileSync(process.execPath, [
-    path.join(skillRoot, 'renderers/architecture/render-architecture.mjs'),
-    input,
-    artifact,
-  ]);
-  const browser = new ChromeVisualBrowser(chromePath);
-  try {
-    const sessionId = await loadArtifact(browser, artifact, { width: 1200, height: 700 });
-    const rects = await radarRects(browser, sessionId, `
-      var container = document.querySelector('.diagram-container');
-      window.scrollTo(0, Math.max(0, container.offsetTop));
-      Archify.focus.set('hub', { toggle: false });
-      Archify.radar.open();
-    `);
-    assert.ok(rects.passport, JSON.stringify(rects, null, 2));
-    assert.equal(overlaps(rects.radar, rects.passport, 10), false, JSON.stringify(rects, null, 2));
-
-    const dragGeometry = await evaluate(browser, sessionId, `(function () {
-      var radar = document.getElementById('overview-map').getBoundingClientRect();
-      var head = document.querySelector('.overview-map-head').getBoundingClientRect();
-      var passport = document.getElementById('focus-chip').getBoundingClientRect();
-      var active = document.querySelector('[data-focus-selected]');
-      var nearestLeft = passport.right + 16;
-      active.getBoundingClientRect = function () {
-        return {
-          left: nearestLeft,
-          top: radar.top,
-          right: nearestLeft + radar.width,
-          bottom: radar.top + radar.height,
-          width: radar.width,
-          height: radar.height
-        };
-      };
-      return {
-        radar: { left: radar.left, top: radar.top },
-        head: { left: head.left, top: head.top, height: head.height },
-        requested: { left: passport.right + 8, top: radar.top },
-        nearest: { left: nearestLeft, top: radar.top }
-      };
-    })()`);
-    await dragMouse(browser, sessionId, {
-      x: dragGeometry.head.left + 48,
-      y: dragGeometry.head.top + dragGeometry.head.height / 2,
-    }, {
-      x: dragGeometry.head.left + 48 + dragGeometry.requested.left - dragGeometry.radar.left,
-      y: dragGeometry.head.top + dragGeometry.head.height / 2 + dragGeometry.requested.top - dragGeometry.radar.top,
-    });
-    const snappedRects = await radarRects(browser, sessionId, '');
-    assert.equal(overlaps(snappedRects.radar, snappedRects.passport, 10), false, JSON.stringify(snappedRects, null, 2));
-    assert.ok(Math.abs(snappedRects.radar.left - dragGeometry.nearest.left) <= 2, JSON.stringify({ dragGeometry, snappedRects }, null, 2));
-    assert.ok(Math.abs(snappedRects.radar.top - dragGeometry.nearest.top) <= 2, JSON.stringify({ dragGeometry, snappedRects }, null, 2));
-  } finally {
-    await browser.close();
-  }
-});
-
-test('Semantic Radar titlebar drag persists while surface drag still pans the diagram', {
-  skip: chromePath ? false : 'Set ARCHIFY_CHROME to run the real browser regression.',
-}, async () => {
-  const artifact = path.join(tmp, 'radar-dragging.html');
-  execFileSync(process.execPath, [
-    path.join(skillRoot, 'renderers/architecture/render-architecture.mjs'),
-    path.join(skillRoot, 'examples', CASES.architecture),
-    artifact,
-  ]);
-  const browser = new ChromeVisualBrowser(chromePath);
-  try {
-    const sessionId = await loadArtifact(browser, artifact, { width: 1440, height: 900 });
-    const geometry = await evaluate(browser, sessionId, `(function () {
-      var container = document.querySelector('.diagram-container');
-      window.scrollTo(0, Math.max(0, container.offsetTop + container.offsetHeight - window.innerHeight + 8));
-      Archify.radar.open();
-      var radar = document.getElementById('overview-map').getBoundingClientRect();
-      var head = document.querySelector('.overview-map-head').getBoundingClientRect();
-      var containerRect = container.getBoundingClientRect();
-      return {
-        radar: { left: radar.left, top: radar.top, width: radar.width, height: radar.height },
-        head: { left: head.left, top: head.top, width: head.width, height: head.height },
-        state: Archify.view.state(),
-        target: {
-          left: Math.max(24, containerRect.left + 360),
-          top: Math.max(24, containerRect.top + 20)
-        }
-      };
-    })()`);
-    const titleStart = {
-      x: geometry.head.left + 48,
-      y: geometry.head.top + geometry.head.height / 2,
-    };
-    const titleTarget = {
-      x: titleStart.x + geometry.target.left - geometry.radar.left,
-      y: titleStart.y + geometry.target.top - geometry.radar.top,
-    };
-    await dragMouse(browser, sessionId, titleStart, titleTarget);
-
-    const manuallyPlaced = await evaluate(browser, sessionId, `(function () {
-      Archify.radar.sync();
-      var radar = document.getElementById('overview-map').getBoundingClientRect();
-      return { left: radar.left, top: radar.top, state: Archify.view.state() };
-    })()`);
-    assert.ok(Math.abs(manuallyPlaced.left - geometry.target.left) <= 2, JSON.stringify({ geometry, manuallyPlaced }, null, 2));
-    assert.ok(Math.abs(manuallyPlaced.top - geometry.target.top) <= 2, JSON.stringify({ geometry, manuallyPlaced }, null, 2));
-    assert.deepEqual(manuallyPlaced.state, geometry.state);
-
-    const surfaceState = await evaluate(browser, sessionId, `(function () {
-      var radar = document.getElementById('overview-map').getBoundingClientRect();
-      var surface = document.getElementById('overview-map-surface').getBoundingClientRect();
-      return {
-        radar: { left: radar.left, top: radar.top },
-        state: Archify.view.state(),
-        start: { x: surface.left + 8, y: surface.top + 8 },
-        end: { x: surface.right - 8, y: surface.bottom - 8 }
-      };
-    })()`);
-    await dragMouse(browser, sessionId, surfaceState.start, surfaceState.end);
-    const afterSurfaceDrag = await evaluate(browser, sessionId, `(function () {
-      var radar = document.getElementById('overview-map').getBoundingClientRect();
-      return {
-        radar: { left: radar.left, top: radar.top },
-        state: Archify.view.state()
-      };
-    })()`);
-    assert.deepEqual(afterSurfaceDrag.radar, surfaceState.radar);
-    assert.notDeepEqual(afterSurfaceDrag.state, surfaceState.state);
-
-    await browser.cdp.send('Emulation.setDeviceMetricsOverride', {
-      width: 640,
-      height: 700,
-      deviceScaleFactor: 1,
-      mobile: false,
-    }, sessionId);
-    const afterResize = await evaluate(browser, sessionId, `new Promise(function (resolve) {
-      setTimeout(function () {
-        var radar = document.getElementById('overview-map').getBoundingClientRect();
-        var controls = document.querySelector('.diagram-nav').getBoundingClientRect();
-        var container = document.querySelector('.diagram-container').getBoundingClientRect();
-        resolve({
-          radar: { left: radar.left, top: radar.top, right: radar.right, bottom: radar.bottom },
-          controls: { left: controls.left, top: controls.top, right: controls.right, bottom: controls.bottom },
-          container: { left: container.left, top: container.top, right: container.right, bottom: container.bottom },
-          viewport: { width: window.innerWidth, height: window.innerHeight }
-        });
-      }, 120);
-    })`, true);
-    assert.ok(afterResize.radar.left >= Math.max(0, afterResize.container.left), JSON.stringify(afterResize, null, 2));
-    assert.ok(afterResize.radar.right <= Math.min(afterResize.viewport.width, afterResize.container.right), JSON.stringify(afterResize, null, 2));
-    assert.equal(overlaps(afterResize.radar, afterResize.controls, 10), false, JSON.stringify(afterResize, null, 2));
-  } finally {
-    await browser.close();
-  }
-});
-
-process.on('exit', () => fs.rmSync(tmp, { recursive: true, force: true }));