create-yss-spec 3.0.0 → 3.0.1

package/template/.hermes/skills/archify/test/adaptive-reader-layout.test.mjs

@@ -1,86 +0,0 @@
-import { test } from 'node:test';
-import assert from 'node:assert/strict';
-import fs from 'node:fs';
-import path from 'node:path';
-import { fileURLToPath } from 'node:url';
-import {
-  DESKTOP_READABILITY_VIEWPORT,
-  DESKTOP_READER_DIAGRAM_WIDTH,
-  DESKTOP_READER_HORIZONTAL_CHROME,
-  DESKTOP_READER_MIN_WIDTH,
-  MIN_PROJECTED_NODE_TEXT_PX,
-  minimumReadableSourceTextPx,
-  projectedNodeTextPx,
-} from '../renderers/shared/desktop-readability.mjs';
-
-const __dirname = path.dirname(fileURLToPath(import.meta.url));
-const skillRoot = path.resolve(__dirname, '..');
-const template = fs.readFileSync(path.join(skillRoot, 'assets', 'template.html'), 'utf8');
-const skill = fs.readFileSync(path.join(skillRoot, 'SKILL.md'), 'utf8');
-const reader = template.slice(
-  template.indexOf('Adaptive Reader Shell'),
-  template.indexOf('Archify.view = (function ()'),
-);
-
-test('wide desktop diagrams use one height-budgeted reader shell instead of breakpoint jumps', () => {
-  assert.match(template, /max-width: var\(--archify-reader-width, 1440px\)/);
-  assert.doesNotMatch(template, /@media \(min-width: 1680px\)[\s\S]{0,180}\.container/);
-  assert.doesNotMatch(template, /@media \(min-width: 1920px\)[\s\S]{0,180}\.container/);
-  assert.match(reader, /var WIDE_RATIO = 1\.55/);
-  assert.match(reader, /var MAX_READER_WIDTH = 1920/);
-  assert.match(reader, /var availableSvgHeight = Math\.max\(1, window\.innerHeight - fixedHeight\)/);
-  assert.match(reader, /var desiredWidth = availableSvgHeight \* ratio \+ chrome\.diagramX/);
-  assert.match(reader, /html\.style\.setProperty\('--archify-reader-width', rounded \+ 'px'\)/);
-});
-
-test('desktop readability budget matches the minimum adaptive reader at 1440 by 900', () => {
-  assert.deepEqual(DESKTOP_READABILITY_VIEWPORT, { width: 1440, height: 900 });
-  assert.equal(DESKTOP_READER_MIN_WIDTH, 960);
-  assert.equal(DESKTOP_READER_HORIZONTAL_CHROME, 30);
-  assert.equal(DESKTOP_READER_DIAGRAM_WIDTH, 930);
-  assert.match(reader, new RegExp(`var MIN_READER_WIDTH = ${DESKTOP_READER_MIN_WIDTH}`));
-  assert.match(template, /html\[data-nav-stage-rail="true"\] body \{ padding-block: 0\.375rem; \}/);
-  assert.match(template, /@media \(min-width: 768px\) and \(max-height: 1100px\)[\s\S]*?\.diagram-container \{[\s\S]*?padding: 0\.875rem;[\s\S]*?padding-bottom: calc\(0\.875rem \+ var\(--archify-nav-reserve\)\);/);
-  assert.match(template, /@media \(min-width: 768px\) and \(max-height: 920px\)[\s\S]*?body \{ padding-block: 1\.25rem; \}/);
-  assert.match(template, /\.diagram-container \{[\s\S]*?border: 1px solid var\(--panel-border\)/);
-});
-
-test('desktop readability source floor is the inverse of the projected-size gate', () => {
-  const sourceFloor = minimumReadableSourceTextPx(1376);
-  assert.ok(Math.abs(sourceFloor - 8.87741935483871) < 1e-12);
-  assert.ok(Math.abs(projectedNodeTextPx(sourceFloor, 1376) - MIN_PROJECTED_NODE_TEXT_PX) < 1e-12);
-  assert.equal(minimumReadableSourceTextPx(DESKTOP_READER_DIAGRAM_WIDTH), MIN_PROJECTED_NODE_TEXT_PX);
-  assert.equal(minimumReadableSourceTextPx(700), MIN_PROJECTED_NODE_TEXT_PX);
-  assert.ok(Number.isNaN(minimumReadableSourceTextPx(0)));
-});
-
-test('adaptive width preserves canonical SVG geometry and yields to specialized viewer modes', () => {
-  assert.match(reader, /window\.innerWidth >= MIN_DESKTOP_WIDTH/);
-  assert.match(reader, /html\.getAttribute\('data-embed'\) !== 'true'/);
-  assert.match(reader, /html\.getAttribute\('data-present'\) !== 'true'/);
-  assert.match(reader, /window\.matchMedia\('print'\)\.matches/);
-  assert.doesNotMatch(reader, /svg\.setAttribute\(['"](?:viewBox|width|height)/);
-  assert.doesNotMatch(reader, /svg\.style\.(?:width|height)/);
-  assert.doesNotMatch(reader, /overflow\s*=\s*['"]hidden/);
-});
-
-test('reader remeasures real content and reduces width before allowing desktop page overflow', () => {
-  assert.match(reader, /document\.fonts\.ready\.then\(schedule\)/);
-  assert.match(reader, /new ResizeObserver\(schedule\)/);
-  assert.match(reader, /new MutationObserver\(schedule\)/);
-  assert.match(reader, /document\.documentElement\.scrollHeight/);
-  assert.match(reader, /lastWidth - overflow \* ratio - 4/);
-  assert.match(skill, /1440×900, 1600×1000, and 1920×1080/);
-  assert.match(skill, /2048×1320/);
-  assert.match(skill, /Generate one responsive artifact for laptops and external displays/);
-  assert.match(skill, /preserve the authored SVG\/viewBox, proportions, semantic geometry/);
-});
-
-test('reader exposes an explicit stable-dimensions contract for browser evidence', () => {
-  assert.match(reader, /function stableSnapshot\(\)/);
-  assert.match(reader, /function whenStable\(\)/);
-  assert.match(reader, /document\.fonts && document\.fonts\.ready/);
-  assert.match(reader, /Math\.ceil\(document\.body\.scrollHeight\)/);
-  assert.match(reader, /stableFrames >= 3/);
-  assert.match(reader, /whenStable: whenStable/);
-});

package/template/.hermes/skills/archify/test/animation.test.mjs

@@ -1,179 +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-animation-'));
-
-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',
-};
-
-const NODE_COLLECTION = {
-  architecture: 'components',
-  workflow: 'nodes',
-  sequence: 'participants',
-  dataflow: 'nodes',
-  lifecycle: 'states',
-};
-
-function render(mode, example, animation = 'trace', visualPreset) {
-  const doc = JSON.parse(fs.readFileSync(path.join(skillRoot, 'examples', example), 'utf8'));
-  if (animation) doc.meta = { ...doc.meta, animation };
-  else delete doc.meta.animation;
-  if (visualPreset) doc.meta.visual_preset = visualPreset;
-  else if (visualPreset === null) delete doc.meta.visual_preset;
-  const suffix = `${animation || 'static'}-${visualPreset || 'default'}`;
-  const input = path.join(tmp, `${mode}-${suffix}.json`);
-  const output = path.join(tmp, `${mode}-${suffix}.html`);
-  fs.writeFileSync(input, JSON.stringify(doc));
-  execFileSync('node', [path.join(skillRoot, `renderers/${mode}/render-${mode}.mjs`), input, output], {
-    stdio: ['ignore', 'ignore', 'pipe'],
-  });
-  return fs.readFileSync(output, 'utf8');
-}
-
-function svgBlock(html) {
-  return html.match(/<svg\b[\s\S]*?<\/svg>/)?.[0] || '';
-}
-
-test('static output omits animation attributes', () => {
-  const svg = svgBlock(render('workflow', CASES.workflow, null, null));
-  assert.doesNotMatch(svg, /data-animation=/);
-  assert.doesNotMatch(svg, /data-animate=/);
-});
-
-test('classic preset remains the default for existing diagrams', () => {
-  const html = render('architecture', CASES.architecture, null, null);
-  assert.match(html, /<html lang="en" data-theme="dark" data-preset="classic">/);
-  assert.match(svgBlock(html), /data-preset="classic"/);
-});
-
-test('signal-flow preset reaches the page, SVG, and motion export surface', () => {
-  const html = render('workflow', CASES.workflow, 'trace', 'signal-flow');
-  assert.match(html, /<html lang="en" data-theme="dark" data-preset="signal-flow">/);
-  assert.match(svgBlock(html), /data-preset="signal-flow"/);
-  assert.match(html, /content: attr\(data-preset-badge-signal-flow\)/);
-  assert.match(html, /data-preset-badge-signal-flow="SIGNAL FLOW"/);
-  assert.match(html, /data-format="webm"/);
-  assert.match(html, /data-last-motion-bytes/);
-  assert.match(html, /Archify\.motion = \{ canRecord: canRecordMotion, recordWebm: recordWebm \}/);
-  assert.match(html, /recorder\.requestData\(\)/);
-  assert.match(html, /aria-label="Diagram view controls"/);
-  assert.match(html, /Archify\.focus = \(function \(\)/);
-  assert.match(html, /Archify\.view = \(function \(\)/);
-  assert.match(html, /clone\.style\.removeProperty\('transform'\)/);
-  assert.match(html, /clone\.removeAttribute\('data-view-scale'\)/);
-  assert.match(html, /data-last-export-canonical/);
-  assert.match(html, /data-last-export-error-format/);
-  assert.match(html, /data-last-export-error/);
-  assert.match(html, /WebM unavailable in this browser/);
-  assert.match(html, /Motion capture unavailable in this browser/);
-  assert.match(html, /canonicalStateClean: canonicalStateClean/);
-  assert.match(html, /recordExportReceipt\('svg', blob, d\.canonicalStateClean\)/);
-});
-
-test('webm renders an explicit time-varying canvas scene instead of replaying one cached SVG bitmap', () => {
-  const html = render('architecture', CASES.architecture, 'trace', 'signal-flow');
-  const recordBlock = html.match(/function recordWebm\(options\) \{[\s\S]*?\n      var menu =/)?.[0] || '';
-
-  assert.match(recordBlock, /var motionScene = createMotionScene\(svg\)/);
-  assert.match(recordBlock, /drawMotionFrame\(ctx, backgroundImage, motionScene, elapsed\)/);
-  assert.match(recordBlock, /getPointAtLength/);
-  assert.match(recordBlock, /performance\.now\(\)/);
-  assert.doesNotMatch(
-    recordBlock,
-    /function draw\(\) \{[\s\S]*?ctx\.drawImage\(img, 0, 0, canvas\.width, canvas\.height\);[\s\S]*?requestAnimationFrame\(draw\)/,
-  );
-});
-
-test('blueprint preset reaches every visual surface without changing the default', () => {
-  const html = render('architecture', CASES.architecture, null, 'blueprint');
-  assert.match(html, /<html lang="en" data-theme="dark" data-preset="blueprint">/);
-  assert.match(svgBlock(html), /data-preset="blueprint"/);
-  assert.match(html, /content: attr\(data-preset-badge-blueprint\)/);
-  assert.match(html, /data-preset-badge-blueprint="BLUEPRINT \/ REV 01"/);
-  assert.match(html, /\[data-preset="blueprint"\]\[data-theme="dark"\]/);
-  assert.match(html, /svg\[data-preset="blueprint"\] \.c-grid/);
-  assert.match(html, /html\[data-preset="blueprint"\] \.guided-views/);
-  assert.match(html, /html\[data-preset="blueprint"\] \.card/);
-});
-
-test('blueprint preset is accepted by all five typed renderers', () => {
-  for (const [mode, example] of Object.entries(CASES)) {
-    const html = render(mode, example, null, 'blueprint');
-    assert.match(html, /data-preset="blueprint"/, mode);
-    assert.match(svgBlock(html), /data-preset="blueprint"/, mode);
-  }
-});
-
-test('editorial preset reaches every visual surface and all five typed renderers', () => {
-  for (const [mode, example] of Object.entries(CASES)) {
-    const html = render(mode, example, null, 'editorial');
-    assert.match(html, /<html lang="en" data-theme="dark" data-preset="editorial">/, mode);
-    assert.match(svgBlock(html), /data-preset="editorial"/, mode);
-    assert.match(html, /content: attr\(data-preset-badge-editorial\)/, mode);
-    assert.match(html, /data-preset-badge-editorial="EDITORIAL \/ FIELD NOTE"/, mode);
-    assert.match(html, /content: attr\(data-preset-badge-editorial-plate\)/, mode);
-    assert.match(html, /data-preset-badge-editorial-plate="ARCHIFY \/ PLATE 04"/, mode);
-    assert.match(html, /\[data-preset="editorial"\]\[data-theme="dark"\]/, mode);
-    assert.match(html, /html\[data-preset="editorial"\] \.diagram-container/, mode);
-    assert.match(html, /svg\[data-preset="editorial"\] \.story-trail-flow/, mode);
-  }
-});
-
-test('all five renderers add one geometry-neutral semantic sigil per primary node', () => {
-  for (const [mode, example] of Object.entries(CASES)) {
-    const source = JSON.parse(fs.readFileSync(path.join(skillRoot, 'examples', example), 'utf8'));
-    const expected = source[NODE_COLLECTION[mode]].length;
-    const staticHtml = render(mode, example, null, 'classic');
-    const traceHtml = render(mode, example, 'trace', 'classic');
-    const staticSvg = svgBlock(staticHtml);
-    const traceSvg = svgBlock(traceHtml);
-    const sigils = (svg) => [...svg.matchAll(/<g aria-hidden="true" data-semantic-sigil="[^"]+"[\s\S]*?<\/g>/g)].map((match) => match[0]);
-
-    assert.equal(sigils(staticSvg).length, expected, mode);
-    assert.deepEqual(sigils(traceSvg), sigils(staticSvg), `${mode} trace must not change sigil geometry`);
-    assert.match(staticHtml, /svg \.semantic-sigil \{/i, mode);
-    assert.match(staticHtml, /svg \.s-database\s+\{ color: var\(--database-stroke\); \}/, mode);
-  }
-});
-
-test('unknown visual presets are rejected by schema validation', () => {
-  assert.throws(
-    () => render('architecture', CASES.architecture, null, 'hologram'),
-    /visual_preset/,
-  );
-});
-
-for (const [mode, example] of Object.entries(CASES)) {
-  test(`${mode}: trace animation annotates svg, edges, and nodes`, () => {
-    const svg = svgBlock(render(mode, example));
-    assert.match(svg, /<svg[^>]+data-animation="trace"/);
-    assert.match(svg, /data-animate="edge" style="--step:0"/);
-    assert.match(svg, /data-animate="node" style="--step:0"/);
-    assert.match(svg, /aria-labelledby="archify-diagram-title archify-diagram-description"/);
-    assert.match(svg, /<title id="archify-diagram-title">[^<]+<\/title>/);
-    assert.match(svg, /<desc id="archify-diagram-description">[^<]+<\/desc>/);
-    assert.match(svg, /id="node-[^"]+" data-node-id="[^"]+"[^>]+role="button"[^>]+aria-pressed="false"/);
-    assert.match(svg, /data-edge-from="[^"]+" data-edge-to="[^"]+"/);
-  });
-}
-
-test('semantic SVG identity is deterministic for unchanged input', () => {
-  const first = svgBlock(render('workflow', CASES.workflow));
-  const second = svgBlock(render('workflow', CASES.workflow));
-  const hooks = (svg) => [...svg.matchAll(/(?:id="node-|data-edge-from=")[^>]+/g)].map((match) => match[0]);
-  assert.deepEqual(hooks(first), hooks(second));
-});
-
-process.on('exit', () => fs.rmSync(tmp, { recursive: true, force: true }));