simplycms 0.4.0

package/skills/redesign-from-reference/scripts/discover.mjs

@@ -0,0 +1,122 @@
+#!/usr/bin/env node
+/**
+ * CLI дискаверера сторінок референс-сайту (задача §2.C, план Р4/Р5/Р7).
+ * Тонкий файл — аргументи + launch chromium + відкриття СТАРТОВОЇ сторінки;
+ * збір лінків — `lib/collect-links.mjs`, візит кандидата з контент-пробом —
+ * `lib/visit-candidate.mjs`, побудова пропозиції (класифікація + перепідбір
+ * при невдалому візиті) — `lib/sitemap.mjs`. Юзаж:
+ * `node .claude/skills/redesign-from-reference/scripts/discover.mjs <startUrl> [--out <file>] [--max-visits N]`.
+ */
+import { isCliEntry } from './lib/cli-entry.mjs';
+import { mkdirSync, writeFileSync } from 'node:fs';
+import { dirname, join } from 'node:path';
+import {
+  loadChromium,
+  resolveChromium,
+  scrollThrough,
+} from './lib/browser.mjs';
+import { collectLinks } from './lib/collect-links.mjs';
+import { buildSitemapProposal } from './lib/sitemap.mjs';
+import { visitCandidate } from './lib/visit-candidate.mjs';
+import { browserVisitProbe } from './lib/visit-probe.mjs';
+import { slugify } from './inspect.mjs';
+
+const DEFAULT_MAX_VISITS = 8;
+const USAGE =
+  'node .claude/skills/redesign-from-reference/scripts/discover.mjs <startUrl> [--out <file>] [--max-visits N]';
+
+/** Розбір argv: перший позиційний токен — стартовий URL, далі `--out <file>`/`--max-visits <N>`. */
+export function parseArgs(argv) {
+  const options = { maxVisits: DEFAULT_MAX_VISITS };
+  for (let i = 0; i < argv.length; i++) {
+    const arg = argv[i];
+    if (arg === '--out') options.out = argv[++i];
+    else if (arg === '--max-visits') options.maxVisits = Number(argv[++i]);
+    else if (arg.startsWith('-'))
+      throw new Error(`Невідомий прапорець: ${arg}`);
+    else if (!options.url) options.url = arg;
+    else throw new Error(`Зайвий аргумент: ${arg}`);
+  }
+  if (!options.url) throw new Error(`Потрібен URL: ${USAGE}`);
+  if (!Number.isFinite(options.maxVisits) || options.maxVisits <= 0)
+    throw new Error(`--max-visits має бути додатним числом: ${USAGE}`);
+  return options;
+}
+
+/** Гучний exit-1 — той самий канал, що `inspect.mjs` (Р4: «спільний канал»). */
+function failLoud(error) {
+  console.error(`❌ ${error instanceof Error ? error.message : error}`);
+  process.exit(1);
+}
+
+async function main() {
+  const options = parseArgs(process.argv.slice(2));
+  const chromium = await loadChromium();
+  let out;
+  let launchOptions;
+  try {
+    out =
+      options.out ??
+      join(
+        'docs',
+        'design-references',
+        slugify(options.url),
+        'sitemap-proposal.json',
+      );
+    launchOptions = resolveChromium(chromium);
+  } catch (error) {
+    failLoud(error);
+  }
+
+  const browser = await chromium.launch({ headless: true, ...launchOptions });
+  try {
+    const page = await browser.newPage();
+    console.log(`🔎 Відкриваю ${options.url}…`);
+    const response = await page.goto(options.url, {
+      waitUntil: 'networkidle',
+      timeout: 30_000,
+    });
+    if (!response || !response.ok()) {
+      throw new Error(
+        `HTTP ${response ? response.status() : '(без відповіді)'} від референсу — ` +
+          'дискавері зупинено (доступ закритий або бот-захист; ' +
+          'див. «Чесна деградація» у скілі redesign-from-reference)',
+      );
+    }
+    await scrollThrough(page); // лінки з лінивих секцій/футера — теж мають потрапити в DOM-обхід
+    const links = await collectLinks(page);
+
+    const proposal = await buildSitemapProposal({
+      links,
+      startUrl: options.url,
+      maxVisits: options.maxVisits,
+      visit: (url, type) => visitCandidate(page, url, type, browserVisitProbe),
+    });
+
+    mkdirSync(dirname(out), { recursive: true });
+    writeFileSync(out, JSON.stringify(proposal, null, 2), 'utf8');
+
+    console.log(
+      `✅ ${out} — типів знайдено: ${Object.keys(proposal.pageTypes).length}, ` +
+        `unresolved: ${proposal.unresolved.length}, лінків побачено: ${proposal.links.length}`,
+    );
+    for (const [type, info] of Object.entries(proposal.pageTypes)) {
+      console.log(
+        `  ${type}: ${info.url}${info.visited ? '' : ' (не відвідано — ліміт)'}`,
+      );
+    }
+    for (const entry of proposal.unresolved) {
+      console.log(`  ⚠️  ${entry.type}: ${entry.reason}`);
+    }
+  } catch (error) {
+    failLoud(error);
+  } finally {
+    await browser.close();
+  }
+}
+
+// Запускати CLI лише при прямому виконанні (isCliEntry — realpath-сумісний
+// із канонічним симлінк-шляхом .claude/skills), не при імпорті в тестах.
+if (isCliEntry(import.meta.url)) {
+  main();
+}

package/skills/redesign-from-reference/scripts/inspect.mjs

@@ -0,0 +1,116 @@
+#!/usr/bin/env node
+/**
+ * CLI інспекції референс-сайту (задача §2.A, план Р1-Р4). Тонкий файл —
+ * аргументи + launch chromium + IO; резолюція бінарника й `loadChromium` —
+ * `lib/browser.mjs`, скріншоти/семплінг — `lib/sample.mjs`, сама інспекція
+ * сторінки — `lib/inspect-page.mjs` (реекспортовано звідси — тести й
+ * `--dark`-контракт лишаються стабільним публічним API цього файлу).
+ * Юзаж: `inspect.mjs <url> [--out d] [--dark]`.
+ */
+import { isCliEntry } from './lib/cli-entry.mjs';
+import { join } from 'node:path';
+import { loadChromium, resolveChromium } from './lib/browser.mjs';
+import { inspectPage } from './lib/inspect-page.mjs';
+
+export { inspectPage };
+
+const USAGE =
+  'node .claude/skills/redesign-from-reference/scripts/inspect.mjs <url> [--out <dir>] [--dark]';
+
+/** Розбір argv: перший позиційний токен — URL, далі `--out <dir>`/`--dark`. */
+export function parseArgs(argv) {
+  const options = { dark: false };
+  for (let i = 0; i < argv.length; i++) {
+    const arg = argv[i];
+    if (arg === '--dark') options.dark = true;
+    else if (arg === '--out') options.out = argv[++i];
+    else if (arg.startsWith('-'))
+      throw new Error(`Невідомий прапорець: ${arg}`);
+    else if (!options.url) options.url = arg;
+    else throw new Error(`Зайвий аргумент: ${arg}`);
+  }
+  if (!options.url) throw new Error(`Потрібен URL: ${USAGE}`);
+  return options;
+}
+
+/** Слаг з host+path референс-URL — дефолтний `docs/design-references/<slug>`. */
+export function slugify(url) {
+  const parsed = new URL(url);
+  const raw = `${parsed.host}${parsed.pathname}`
+    .replace(/[^a-z0-9]+/gi, '-')
+    .replace(/^-+|-+$/g, '')
+    .toLowerCase();
+  return raw || 'site';
+}
+
+/** Гучний exit-1 — задача §2.A: мережеві збої видимі, не порожній JSON. */
+function failLoud(error) {
+  console.error(`❌ ${error instanceof Error ? error.message : error}`);
+  process.exit(1);
+}
+
+async function main() {
+  const options = parseArgs(process.argv.slice(2));
+  const chromium = await loadChromium();
+  // Pre-launch валідація: і невалідний URL (`new URL` у slugify), і відсутній
+  // браузер мають падати одним каналом `failLoud`, а не сирим стектрейсом.
+  let out;
+  let launchOptions;
+  try {
+    out =
+      options.out ?? join('docs', 'design-references', slugify(options.url));
+    launchOptions = resolveChromium(chromium);
+  } catch (error) {
+    failLoud(error);
+  }
+
+  const browser = await chromium.launch({ headless: true, ...launchOptions });
+  try {
+    const page = await browser.newPage();
+    console.log(`🔎 Відкриваю ${options.url}…`);
+    const response = await page.goto(options.url, {
+      waitUntil: 'networkidle',
+      timeout: 30_000,
+    });
+    // `page.goto` НЕ кидає на 4xx/5xx (лише на мережеві збої) — без цієї
+    // перевірки 401/403/бот-заглушка давала б «успішний» inspection.json з
+    // кольорами сторінки-відмови. `response` може бути null (same-document).
+    if (!response || !response.ok()) {
+      throw new Error(
+        `HTTP ${response ? response.status() : '(без відповіді)'} від референсу — ` +
+          'інспекцію зупинено (доступ закритий або бот-захист; ' +
+          'див. «Чесна деградація» у скілі redesign-from-reference)',
+      );
+    }
+    const inspection = await inspectPage(page, {
+      url: options.url,
+      out,
+      dark: options.dark,
+    });
+    console.log(
+      `✅ ${out}/inspection.json — кольорів: ${inspection.colors.length}, ` +
+        `radius: ${inspection.radius.length} (відкинуто pill/full: ${inspection.radiusDropped}), ` +
+        `dark: ${inspection.darkDetected}`,
+    );
+    // Один рядок про рух — щоб було видно, чи капчер щось узагалі зловив
+    // (порожній motion на анімованому сайті — сигнал «дивись очима»).
+    const { motion } = inspection;
+    console.log(
+      `🎞️  motion — transitions: ${motion.transitions.length}, ` +
+        `keyframes: ${motion.keyframes.names.length}, ` +
+        `reveal: ${motion.reveal.filter((r) => r.animated).length} із ${motion.revealSampled} (корінь: ${motion.revealRoot}), ` +
+        `hover: ${motion.hover.entries.length} (пропущено: ${motion.hover.skipped}), ` +
+        `JS-driven: ${motion.jsDrivenSuspected}`,
+    );
+  } catch (error) {
+    failLoud(error);
+  } finally {
+    await browser.close();
+  }
+}
+
+// Запускати CLI лише при прямому виконанні (isCliEntry — realpath-сумісний
+// із канонічним симлінк-шляхом .claude/skills), не при імпорті в тестах.
+if (isCliEntry(import.meta.url)) {
+  main();
+}

package/skills/redesign-from-reference/scripts/lib/browser-fonts.mjs

@@ -0,0 +1,83 @@
+/**
+ * Голосування за шрифт-сімʼї, що виконується В БРАУЗЕРІ (план Р7, Фаза 3).
+ * Окремий модуль, а не доважок до `browser-sample.mjs`: той файл уперся в
+ * канонні 150 рядків, а вага сімʼї потребує власного обходу текстових вузлів.
+ * Функція САМОДОСТАТНЯ — Playwright серіалізує лише її `toString()` у
+ * сторінковий контекст, тож жодних замикань на модульний скоуп (звідси копії
+ * констант замість імпортів). Node-обгортка — `samplePalette` у `sample.mjs`.
+ */
+
+/**
+ * Знімок шрифт-сімʼї заголовків і body-тексту.
+ *
+ * 🔴 Р7: вага сімʼї — СУМА довжин тексту, а не кількість елементів. Частота
+ * ламалася на живому референсі: численні дрібні `<span>`-мітки (ціни, бейджі,
+ * хлібні крихти) у моно- чи акцидентній сімʼї перебивали кілька довгих
+ * body-абзаців, і `fonts.body` віддавав шрифт міток замість шрифту читання.
+ */
+export function browserFonts(limit) {
+  const NODE_TEXT_CAP = 400; // ліміт внеску ОДНОГО вузла, символів
+  const TEXT_NODE = 3; // Node.TEXT_NODE — копія, бо замикань тут немає
+
+  // 🔴 Пастка вкладеності: `textContent` батька містить текст усіх дітей, тож
+  // `<p><span>x</span></p>` зарахував би «x» двічі — і сімʼї абзацу, і сімʼї
+  // спана. Рахуємо лише ПРЯМІ текстові вузли: так сторінка ділиться між
+  // елементами без перетину, і сума ваг дорівнює довжині видимого тексту.
+  function directTextLength(el) {
+    let length = 0;
+    for (const node of el.childNodes)
+      if (node.nodeType === TEXT_NODE) length += node.nodeValue.trim().length;
+    // Ліміт на вузол: 400 символів — це вже кілька речень, тобто повноцінний
+    // блок тексту. Далі внесок не росте, щоб один довжелезний абзац (стаття,
+    // футер-дисклеймер) не монополізував голосування власною сімʼєю.
+    return Math.min(length, NODE_TEXT_CAP);
+  }
+
+  function bumpFont(map, style, textLength) {
+    const key = style.fontFamily;
+    const e = map.get(key) ?? {
+      family: key,
+      weight: style.fontWeight,
+      sizePx: parseFloat(style.fontSize),
+      count: 0,
+      textLength: 0,
+    };
+    e.count += 1;
+    e.textLength += textLength;
+    map.set(key, e);
+  }
+
+  const headingFonts = new Map();
+  const bodyFonts = new Map();
+
+  for (const el of [...document.querySelectorAll('body *')].slice(0, limit)) {
+    const rect = el.getBoundingClientRect();
+    if (rect.width * rect.height <= 0) continue; // невидиме не голосує
+
+    const isHeading = /^H[1-3]$/.test(el.tagName);
+    if (!isHeading && !['P', 'SPAN', 'LI'].includes(el.tagName)) continue;
+    // Гейт «елемент узагалі текстовий» лишається по `textContent` (як було до
+    // Р7): `<h1><span>…</span></h1>` має рахуватись заголовком, хоч прямого
+    // тексту в ньому немає. Ваги такий вузол дає нуль — вирішить tie-break.
+    if (!el.textContent || !el.textContent.trim()) continue;
+
+    const style = getComputedStyle(el);
+    bumpFont(isHeading ? headingFonts : bodyFonts, style, directTextLength(el));
+  }
+
+  /** Переможець — за сумарною вагою; частота лишається tie-break-ом (Р7). */
+  function topFont(map) {
+    let best = null;
+    for (const e of map.values()) {
+      if (!best) best = e;
+      else if (e.textLength > best.textLength) best = e;
+      else if (e.textLength === best.textLength && e.count > best.count)
+        best = e;
+    }
+    return best
+      ? { family: best.family, weight: best.weight, sizePx: best.sizePx }
+      : null;
+  }
+
+  return { heading: topFont(headingFonts), body: topFont(bodyFonts) };
+}

package/skills/redesign-from-reference/scripts/lib/browser-hover.mjs

@@ -0,0 +1,68 @@
+/**
+ * Функції hover-sweep, що виконуються В БРАУЗЕРІ (план Р5, Фаза 2). Окремий
+ * модуль за тим самим правилом, що `browser-motion.mjs`/`browser-reveal.mjs`:
+ * Playwright серіалізує в сторінковий контекст лише `toString()` функції, тож
+ * кожна має бути САМОДОСТАТНЬОЮ — жодних замикань на модульний скоуп
+ * (константи копіюються всередину). Node-обгортка — `hover-sweep.mjs`.
+ */
+
+/**
+ * Метадані одного кандидата на ховер: стабільний селектор, ознака видимості й
+ * computed-значення цікавих властивостей. Викликається ДВІЧІ на елемент — до
+ * і після `hover()`; селектор беруть із ПЕРШОГО виклику: ховер цілком може
+ * додати вузлу клас, і другий рядок був би вже інший.
+ * @param {Element} el
+ * @param {string[]} properties
+ */
+export function browserHoverMeta(el, properties) {
+  const style = getComputedStyle(el);
+  const rect = el.getBoundingClientRect();
+  const classes =
+    typeof el.className === 'string' && el.className.trim()
+      ? `.${el.className.trim().split(/\s+/).join('.')}`
+      : '';
+  const tag = el.tagName.toLowerCase();
+
+  const styles = {};
+  for (const property of properties)
+    styles[property] = style.getPropertyValue(property);
+
+  return {
+    selector: `${tag}${el.id ? `#${el.id}` : ''}${classes}`,
+    // `display:none` дає нульовий rect, а от `visibility:hidden` — ні: вузол
+    // лишається в потоці й має розміри. Тому площі самої недостатньо.
+    visible:
+      rect.width > 0 &&
+      rect.height > 0 &&
+      style.display !== 'none' &&
+      style.visibility !== 'hidden',
+    styles,
+  };
+}
+
+/**
+ * Точка viewport-а, під якою немає нічого, крім `body`/`html` — туди
+ * відводиться курсор ПІСЛЯ проходу. 🔴 Без цього останній зависклий ховер
+ * протік би у фінальний семпл палітри: `samplePalette` читає computed styles,
+ * а `:hover` — це теж computed style, і колір однієї кнопки поїхав би в
+ * пропозицію токенів як «колір сайту». Кандидати перебираються у фіксованому
+ * порядку, тож точка детермінована; якщо вільної немає (full-bleed лейаут) —
+ * правий нижній піксель як чесний фолбек.
+ */
+export function browserNeutralPoint() {
+  const width = window.innerWidth;
+  const height = window.innerHeight;
+  const candidates = [
+    [width - 2, height - 2],
+    [2, height - 2],
+    [width - 2, 2],
+    [Math.floor(width / 2), height - 2],
+  ];
+
+  for (const [x, y] of candidates) {
+    const el = document.elementFromPoint(x, y);
+    if (!el || el === document.body || el === document.documentElement)
+      return { x, y };
+  }
+  return { x: width - 2, y: height - 2 };
+}

package/skills/redesign-from-reference/scripts/lib/browser-keyframes.mjs

@@ -0,0 +1,62 @@
+/**
+ * Канал `@keyframes` motion-капчера, що виконується В БРАУЗЕРІ (план Р1).
+ * Окремий модуль — за тим самим правилом, що `browser-reveal.mjs`/
+ * `browser-hover.mjs`: один канал = один файл, а `browser-motion.mjs` уже
+ * близько до канонних 150 рядків. Функція САМОДОСТАТНЯ: Playwright серіалізує
+ * лише її `toString()` у сторінковий контекст, тож жодних замикань на модульний
+ * скоуп (звідси копія константи всередині).
+ */
+
+/**
+ * Імена `@keyframes` документа + ЧЕСНИЙ лічильник недоступних аркушів (Р1):
+ * cross-origin stylesheet кидає `SecurityError` на `.cssRules`, і мовчазний
+ * дроп приховав би від автора теми цілий пласт анімацій.
+ */
+export function browserKeyframes() {
+  const KEYFRAMES_RULE = 7; // CSSRule.KEYFRAMES_RULE — копія, не замикання
+  const names = new Set();
+  let inaccessibleSheets = 0;
+
+  // Рекурсія — бо `@keyframes` цілком легально живе всередині `@media`/
+  // `@supports`, і плаский обхід верхнього рівня їх не побачив би.
+  //
+  // 🔴 `@import` (CSSImportRule) власного `cssRules` НЕ має — правила лежать у
+  // `rule.styleSheet.cssRules`, а в `document.styleSheets` імпортований аркуш
+  // окремим записом не зʼявляється. Без цієї гілки він губився б ЦІЛКОМ: ані
+  // імен (same-origin), ані лічильника (cross-origin). Тому і ЧИТАННЯ
+  // вкладених правил, і рекурсія — всередині `try`: на чужому походженні
+  // кидає вже сам доступ до `.cssRules`, і саме він дає чесну дірку.
+  const walk = (rules) => {
+    for (const rule of rules) {
+      if (rule.type === KEYFRAMES_RULE && rule.name) {
+        names.add(rule.name);
+        continue;
+      }
+      const imported = 'styleSheet' in rule;
+      try {
+        const nested = imported ? rule.styleSheet?.cssRules : rule.cssRules;
+        if (nested) walk(nested);
+        // Імпорт без доступних правил (не завантажився / порожній) — теж дірка.
+        else if (imported) inaccessibleSheets += 1;
+      } catch {
+        inaccessibleSheets += 1;
+      }
+    }
+  };
+
+  for (const sheet of document.styleSheets) {
+    let rules = null;
+    try {
+      rules = sheet.cssRules;
+    } catch {
+      rules = null;
+    }
+    if (!rules) {
+      inaccessibleSheets += 1;
+      continue;
+    }
+    walk(rules);
+  }
+
+  return { names: [...names].sort(), inaccessibleSheets };
+}

package/skills/redesign-from-reference/scripts/lib/browser-motion.mjs

@@ -0,0 +1,104 @@
+/**
+ * Функції motion-капчера, що виконуються В БРАУЗЕРІ (план Р1, Фаза 1).
+ * Виокремлено в окремий модуль, бо `browser-sample.mjs` уже рівно на межі
+ * канону (150 рядків), а кожна така функція має бути САМОДОСТАТНЬОЮ: Playwright
+ * серіалізує лише її `toString()` у сторінковий контекст, тож замикання на
+ * модульний скоуп дало б `ReferenceError` (звідси копії констант усередині).
+ * Node-обгортка й чиста детекція — `motion.mjs` / `motion-detect.mjs`; решта
+ * каналів — `browser-keyframes.mjs`, `browser-reveal.mjs`, `browser-hover.mjs`.
+ */
+
+/**
+ * Кластери CSS-transition сторінки (Р1): `{ property, durationMs, easing,
+ * count }`. Обхід — ті самі `body *` і той самий ліміт, що в семплері палітри.
+ */
+export function browserTransitions(limit) {
+  // Розбиття CSS-списку верхнього рівня: кома ВСЕРЕДИНІ дужок
+  // (`cubic-bezier(0.4, 0, 0.2, 1)`) — не роздільник, наївний `split(',')`
+  // рвав би easing на чотири «значення» і зсував пари property↔duration.
+  const splitTop = (value) => {
+    const parts = [];
+    let depth = 0;
+    let current = '';
+    for (const ch of value ?? '') {
+      if (ch === '(') depth += 1;
+      else if (ch === ')') depth -= 1;
+      if (ch === ',' && depth === 0) {
+        parts.push(current.trim());
+        current = '';
+      } else current += ch;
+    }
+    parts.push(current.trim());
+    return parts.filter((part) => part.length > 0);
+  };
+
+  const toMs = (raw) => {
+    const n = parseFloat(raw);
+    if (!Number.isFinite(n)) return 0;
+    return Math.round(String(raw).trim().endsWith('ms') ? n : n * 1000);
+  };
+
+  const clusters = new Map();
+  const elements = [...document.querySelectorAll('body *')].slice(0, limit);
+
+  for (const el of elements) {
+    const style = getComputedStyle(el);
+    const properties = splitTop(style.transitionProperty);
+    if (properties.length === 0) continue;
+    const durations = splitTop(style.transitionDuration);
+    const easings = splitTop(style.transitionTimingFunction);
+
+    for (let i = 0; i < properties.length; i++) {
+      const property = properties[i];
+      if (property === 'none') continue;
+      // CSS-списки можуть бути різної довжини — добір циклічний, рівно як це
+      // робить сам движок при обчисленні transition-шорткату.
+      const durationMs = durations.length
+        ? toMs(durations[i % durations.length])
+        : 0;
+      if (durationMs <= 0) continue;
+      const easing = easings.length ? easings[i % easings.length] : 'ease';
+
+      const key = `${property}|${durationMs}|${easing}`;
+      const existing = clusters.get(key);
+      if (existing) existing.count += 1;
+      else clusters.set(key, { property, durationMs, easing, count: 1 });
+    }
+  }
+
+  // Повний детермінований ключ сортування (не лише count): інакше два кластери
+  // з однаковою частотою міняли б місця між прогонами.
+  const cmp = (a, b) => (a < b ? -1 : a > b ? 1 : 0);
+  return [...clusters.values()].sort(
+    (a, b) =>
+      b.count - a.count ||
+      cmp(a.property, b.property) ||
+      a.durationMs - b.durationMs ||
+      cmp(a.easing, b.easing),
+  );
+}
+
+/**
+ * СИРІ маркери JS-анімацій зі сторінки (Р6): `src` скриптів, наявні
+ * window-глобали з переданого списку кандидатів і імена `data-*`-атрибутів.
+ * Сама детекція — чиста функція `motion-detect.mjs` (юніти без браузера).
+ */
+export function browserMotionMarkers({ globalNames, limit }) {
+  const scriptSrcs = new Set();
+  for (const script of document.querySelectorAll('script[src]')) {
+    if (script.src) scriptSrcs.add(script.src);
+  }
+
+  const dataAttributes = new Set();
+  for (const el of [...document.querySelectorAll('body *')].slice(0, limit)) {
+    for (const attr of el.attributes) {
+      if (attr.name.startsWith('data-')) dataAttributes.add(attr.name);
+    }
+  }
+
+  return {
+    scriptSrcs: [...scriptSrcs].sort(),
+    globals: globalNames.filter((name) => name in window).sort(),
+    dataAttributes: [...dataAttributes].sort(),
+  };
+}

package/skills/redesign-from-reference/scripts/lib/browser-reveal.mjs

@@ -0,0 +1,78 @@
+/**
+ * Снапшот reveal-стану секцій, що виконується В БРАУЗЕРІ (план Р4 Фази 1
+ * інкремента Б.2; корінь-кандидати — Р6 інкремента Б.3). Окремий модуль (а не
+ * доважок до `browser-motion.mjs`) — бо це окремий канал: його знімають ДВІЧІ,
+ * до і після першого скрол-проходу, а різницю рахує вже Node (`diffReveal` у
+ * `motion.mjs`). Функція САМОДОСТАТНЯ: Playwright серіалізує лише `toString()`,
+ * замикань на модульний скоуп тут бути не може — тому і стеля вибірки, і
+ * список ігнорованих тегів живуть УСЕРЕДИНІ неї.
+ */
+
+/**
+ * Знімок `opacity`/`transform` секцій сторінки.
+ *
+ * Корінь — діти `main` (сучасна розмітка). Якщо `main` немає, беремо
+ * `body > section` ПЛЮС дітей обгорток верхнього рівня: на референсі прогону
+ * №2 секції лежали рівно на цей ярус глибше, плаский `body > section` давав
+ * НУЛЬ вузлів, і канал мовчав замість міряти (V-5; контрольний дослід — 0 → 3).
+ * Глибше не спускаємось: reveal — секційний канал, а не обхід усього DOM.
+ *
+ * `selector` беруть із ПЕРШОГО знімка: клас-маркер розкриття
+ * (`.is-visible`/`.revealed`) додається саме тим, що ми міряємо, тож після
+ * скролу той самий вузол мав би інший рядок і пари «до/після» не зійшлись би.
+ *
+ * @returns {{ root: 'main' | 'body-fallback', nodes: Array<{ index: number,
+ *   tag: string, selector: string, opacity: number, transform: string }> }}
+ */
+export function browserRevealSnapshot() {
+  // Стеля вибірки: кожен вузол — це `getComputedStyle` двічі за інспекцію плюс
+  // серіалізація в Node, а fallback-ярус на обгортко-важкій розмітці легко дає
+  // сотні кандидатів. 60 із запасом покриває секційний каркас реальної
+  // сторінки. 🔴 Інлайн, а не модульна константа: замикання не серіалізується.
+  const MAX_NODES = 60;
+  // Невізуальні теги: `getComputedStyle` для них безглуздий, а в fallback-ярусі
+  // вони трапляються (інлайн-`<script>` між секціями — звичайна справа).
+  const SKIP_TAGS = ['SCRIPT', 'STYLE', 'NOSCRIPT', 'TEMPLATE'];
+
+  const main = document.querySelector('main');
+  const candidates = [];
+  if (main) {
+    candidates.push(...main.children);
+  } else {
+    for (const child of document.body.children) {
+      // Секція верхнього рівня — сама кандидат; будь-що інше вважаємо
+      // обгорткою і беремо її дітей. DOM-порядок зберігається самою
+      // послідовністю обходу, без сортування.
+      if (child.tagName === 'SECTION') candidates.push(child);
+      else candidates.push(...child.children);
+    }
+  }
+
+  const seen = new Set();
+  const nodes = [];
+  for (const el of candidates) {
+    if (nodes.length >= MAX_NODES) break;
+    if (SKIP_TAGS.includes(el.tagName) || seen.has(el)) continue;
+    seen.add(el);
+
+    const style = getComputedStyle(el);
+    const classes =
+      typeof el.className === 'string' && el.className.trim()
+        ? `.${el.className.trim().split(/\s+/).join('.')}`
+        : '';
+    const tag = el.tagName.toLowerCase();
+    const opacity = parseFloat(style.opacity);
+
+    nodes.push({
+      // Індекс — позиція у ВИБІРЦІ (не в DOM): саме за ним `diffReveal` зводить
+      // пари «до/після», і обидва знімки будують його однаково.
+      index: nodes.length,
+      tag,
+      selector: `${tag}${el.id ? `#${el.id}` : ''}${classes}`,
+      opacity: Number.isFinite(opacity) ? opacity : 1,
+      transform: style.transform,
+    });
+  }
+
+  return { root: main ? 'main' : 'body-fallback', nodes };
+}