import { loadPlaywright, launchChromium } from '../../scripts/orgchart-browser-runtime.mjs';
import http from 'node:http';
import path from 'node:path';
import fs from 'node:fs/promises';
import { fileURLToPath } from 'node:url';

// P5-1A only: preserve previous suites and the baseline-files.json snapshot.
// Copy the pre-change public Core dist to baseline-dist before rebuilding.
const root = fileURLToPath(new URL('../../', import.meta.url));
const output = path.join(root, 'test-results/org-chart-p5-1a');
const storyOrigin = process.env.ORGCHART_STORY_ORIGIN ?? 'http://127.0.0.1:6052';
const { chromium } = await loadPlaywright();
const fixedFixture = JSON.parse(await fs.readFile(path.join(root, 'examples/org-chart/data-p1.json'), 'utf8'));
const expandedFixture = JSON.parse(await fs.readFile(path.join(root, 'examples/org-chart/data-expanded.json'), 'utf8'));
const presets = [
  { id: 'hanmac', name: '한맥기술', primary: '#CB2E28', secondary: ['#1D4289'] },
  { id: 'saman', name: '삼안', primary: '#F08300', secondary: ['#6D6C6C'] },
  { id: 'jangheon-industry', name: '장헌산업', primary: '#4580A6', secondary: ['#92BED4'] },
  { id: 'jangheon', name: '장헌', primary: '#1D418D', secondary: ['#AE232A'] },
  { id: 'ptc', name: '피티씨', primary: '#84338E', secondary: ['#F7AF00', '#0066B5'] },
  { id: 'halla', name: '한라산업개발', primary: '#0068B7', secondary: ['#231815'] },
  { id: 'baron', name: '바론컨설턴트', primary: '#0C367F', secondary: [] },
];
const results = [], measurements = [], errors = [], warnings = [];
const check = (pass, name, detail) => results.push({ name, status: pass ? 'PASS' : 'FAIL', ...(detail === undefined ? {} : { detail }) });
const near = (a, b) => Number.isFinite(a) && Number.isFinite(b) && Math.abs(a - b) <= 0.35;
const rgb = hex => `rgb(${[1, 3, 5].map(offset => parseInt(hex.slice(offset, offset + 2), 16)).join(', ')})`;
const expectedCompanyIds = presets.map(preset => preset.id);
const mime = { '.html': 'text/html', '.js': 'text/javascript', '.mjs': 'text/javascript', '.css': 'text/css', '.json': 'application/json', '.ttf': 'font/ttf', '.svg': 'image/svg+xml', '.png': 'image/png' };
const shellHtml = '<!doctype html><html lang="ko"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><link rel="icon" href="data:,"><style>@font-face{font-family:"Noto Sans KR";src:url("/fonts/NotoSansKR-variable.ttf");font-weight:100 900;font-style:normal}*{box-sizing:border-box}html,body{margin:0;width:100%;min-height:100%;font-family:"Noto Sans KR",sans-serif}#chart{width:100%;height:100vh;min-width:0}</style></head><body><main id="chart"></main></body></html>';
await fs.mkdir(output, { recursive: true });
const server = http.createServer(async (request, response) => {
  try {
    const url = new URL(request.url, 'http://127.0.0.1');
    if (url.pathname === '/__p51a') return response.writeHead(200, { 'Content-Type': 'text/html' }).end(shellHtml);
    const pathname = decodeURIComponent(url.pathname);
    const file = path.resolve(root, '.' + (pathname.startsWith('/fonts/') ? '/public' + pathname : pathname));
    const relative = path.relative(root, file);
    if (relative.startsWith('..') || path.isAbsolute(relative)) return response.writeHead(403).end();
    const bytes = await fs.readFile(file);
    response.writeHead(200, { 'Content-Type': mime[path.extname(file)] ?? 'application/octet-stream' });
    response.end(bytes);
  } catch { response.writeHead(404).end(); }
});
await new Promise(resolve => server.listen(0, '127.0.0.1', resolve));
const origin = `http://127.0.0.1:${server.address().port}`;
const browser = await launchChromium({ headless: true });

async function newPage(name, viewport = { width: 1440, height: 900 }) {
  const page = await browser.newPage({ viewport });
  page.on('pageerror', error => errors.push({ name, type: 'pageerror', message: error.message }));
  page.on('console', message => {
    if (message.type() === 'error') errors.push({ name, type: 'console', message: message.text() });
    if (message.type() === 'warning') warnings.push({ name, message: message.text() });
  });
  return page;
}
async function ready(page, mode) {
  await page.waitForFunction(expected => {
    const shadow = document.querySelector('.hm-orgchart-host')?.shadowRoot;
    const content = shadow?.querySelector(expected === 'auto' ? '.hm-orgchart-expanded' : '.hm-orgchart-composition');
    return content?.querySelector('.hm-orgchart-employee') && [...shadow.querySelectorAll('link[rel=stylesheet]')].every(link => link.sheet);
  }, mode, { timeout: 25000 });
  await page.evaluate(async () => {
    await document.fonts.load('600 24px "Noto Sans KR"', '홍 길 동');
    await document.fonts.ready;
    const shadow = document.querySelector('.hm-orgchart-host').shadowRoot;
    const images = [...shadow.querySelectorAll('.hm-orgchart-employee img')];
    for (const image of images) image.loading = 'eager';
    await Promise.all(images.map(image => image.decode().catch(() => {})));
    await new Promise(resolve => requestAnimationFrame(() => requestAnimationFrame(resolve)));
  });
}
async function mount(page, { baseline = false, fixture = expandedFixture, options = {} } = {}) {
  await page.goto(`${origin}/__p51a`);
  await page.evaluate(async ({ base, fixture, options }) => {
    window.hmModule = await import(`${base}/index.js`);
    window.fixture = structuredClone(fixture);
    window.handle = window.hmModule.createOrgChart({
      container: document.getElementById('chart'),
      dataSource: new window.hmModule.JsonOrgChartDataSource(fixture),
      stylesheetUrls: { engine: `${base}/engine.css`, core: `${base}/style.css` },
      ...options,
    });
    await window.handle.mount();
  }, { base: `${origin}/${baseline ? 'test-results/org-chart-p5-1a/baseline-dist' : 'packages/org-chart/dist'}`, fixture, options });
  await ready(page, options.layoutMode === 'auto' ? 'auto' : 'fixed');
  return page.evaluate(() => window.handle.getState());
}
async function measure(page) {
  return page.evaluate(() => {
    const shadow = document.querySelector('.hm-orgchart-host').shadowRoot;
    const stage = shadow.querySelector('.hm-orgchart-stage');
    const base = stage?.getBoundingClientRect() ?? shadow.querySelector('.hm-orgchart-expanded').getBoundingClientRect();
    const scale = stage ? base.width / stage.offsetWidth : 1;
    const box = element => {
      const bounds = element.getBoundingClientRect();
      return { x: (bounds.x - base.x) / scale, y: (bounds.y - base.y) / scale, width: bounds.width / scale, height: bounds.height / scale };
    };
    const cards = [...shadow.querySelectorAll('.hm-orgchart-employee')].map(card => ({
      key: `${card.closest('.hm-orgchart-status-group')?.dataset.workStatus ?? 'tree'}:${card.dataset.employeeId}`,
      id: card.dataset.employeeId, kind: card.dataset.cardKind, size: card.dataset.cardAssetSize ?? null,
      box: box(card), asset: card.querySelector('.hm-orgchart-card-background')?.src ?? null,
      logo: card.querySelector('.hm-orgchart-affiliation-mark img')?.src ?? null,
      name: card.querySelector('.hm-orgchart-person-name')?.textContent,
      role: card.querySelector('.hm-orgchart-person-role')?.textContent,
      font: getComputedStyle(card.querySelector('.hm-orgchart-person-name')).fontFamily,
      badgeCount: card.querySelectorAll('.hm-orgchart-job-title,.hm-orgchart-status-label,.hm-orgchart-person-attributes').length,
      placeholder: card.dataset.photoState,
    }));
    const nodes = [...shadow.querySelectorAll('.node[data-organization-id]')].map(node => {
      const heading = node.querySelector('.hm-orgchart-organization-name');
      const style = getComputedStyle(heading);
      return { id: node.dataset.organizationId, companyId: node.dataset.companyId ?? null,
        depth: Number(node.dataset.organizationDepth), text: heading.textContent, box: box(heading),
        backgroundColor: style.backgroundColor, backgroundImage: style.backgroundImage,
        primary: node.style.getPropertyValue('--hm-orgchart-expanded-primary'),
        secondary: [...node.style].filter(property => property.startsWith('--hm-orgchart-expanded-secondary-')).map(property => node.style.getPropertyValue(property)),
      };
    });
    const collisions = [];
    for (let index = 0; index < cards.length; index++) for (const other of cards.slice(index + 1)) {
      const a = cards[index].box, b = other.box;
      if (Math.min(a.x + a.width, b.x + b.width) - Math.max(a.x, b.x) > 0.5
        && Math.min(a.y + a.height, b.y + b.height) - Math.max(a.y, b.y) > 0.5) collisions.push([cards[index].key, other.key]);
    }
    const viewport = shadow.querySelector('.hm-orgchart-viewport');
    const expanded = shadow.querySelector('.hm-orgchart-expanded');
    const summaries = [...shadow.querySelectorAll('[data-component="PositionSummary"],[data-component="AffiliationSummary"],[data-component="StatusSummary"]')].map(element => ({ kind: element.dataset.component, text: element.textContent }));
    return { scale, cards, nodes, summaries, collisions,
      hostCount: document.querySelectorAll('.hm-orgchart-host').length,
      compositionCount: shadow.querySelectorAll('.hm-orgchart-composition,.hm-orgchart-expanded').length,
      controls: shadow.querySelectorAll('.hm-orgchart-toggle,.zoom-controls,.pan-controls,.minimap').length,
      layoutStatus: expanded?.dataset.layoutStatus ?? null,
      phaseText: expanded?.textContent ?? '',
      viewport: viewport ? { clientWidth: viewport.clientWidth, scrollWidth: viewport.scrollWidth, clientHeight: viewport.clientHeight, scrollHeight: viewport.scrollHeight, overflowX: getComputedStyle(viewport).overflowX } : null,
      document: { clientWidth: document.documentElement.clientWidth, scrollWidth: document.documentElement.scrollWidth, clientHeight: document.documentElement.clientHeight, scrollHeight: document.documentElement.scrollHeight },
    };
  });
}
function compareFixed(before, after, name) {
  check(JSON.stringify(before.cards.map(({ box, ...rest }) => rest)) === JSON.stringify(after.cards.map(({ box, ...rest }) => rest)), `${name}: card assets/content/typography/placeholder unchanged`);
  check(before.cards.length === after.cards.length && before.cards.every((card, index) => ['x', 'y', 'width', 'height'].every(key => near(card.box[key], after.cards[index].box[key]))), `${name}: fixed card coordinates and dimensions unchanged`);
  check(before.nodes.length === after.nodes.length && before.nodes.every((node, index) => {
    const next = after.nodes[index];
    return node.id === next.id && node.depth === next.depth && node.text === next.text
      && node.backgroundColor === next.backgroundColor && node.backgroundImage === next.backgroundImage
      && ['x', 'y', 'width', 'height'].every(key => near(node.box[key], next.box[key]));
  }), `${name}: hierarchy headers and Workdesk gradients unchanged`);
  check(JSON.stringify(before.summaries) === JSON.stringify(after.summaries), `${name}: summary counts unchanged`);
  check(after.controls === 0 && after.compositionCount === 1 && after.layoutStatus === null, `${name}: fixed read-only renderer retained`);
}
function assertExpanded(value, name) {
  const representative = value.cards.filter(card => card.kind === 'topLeader');
  check(value.layoutStatus === 'preview' && value.phaseText.includes('P5-1A') && value.phaseText.includes('후속'), `${name}: deferred work is explicitly marked preview`);
  check(representative.length === 1 && near(representative[0].box.width, 146) && near(representative[0].box.height, 74)
    && representative[0].name === '홍 길 동' && representative[0].role === '대표이사' && representative[0].badgeCount === 0, `${name}: representative 146x74/name/position/zero badges`);
  check(value.cards.filter(card => card.kind === 'leader').length === 3
    && value.cards.filter(card => card.kind === 'leader').every(card => near(card.box.width, 146) && near(card.box.height, 68)), `${name}: reused 1Depth leader 146x68 cards`);
  check(value.cards.filter(card => card.kind === 'employee').length === 6
    && value.cards.filter(card => card.kind === 'employee').every(card => near(card.box.width, 108) && near(card.box.height, 52)), `${name}: reused small 108x52 employee cards`);
  check(value.cards.every(card => card.font.includes('Noto Sans KR') && card.placeholder === 'placeholder' && card.asset), `${name}: approved assets/common photo fallback/Noto font reused`);
  check(value.nodes.length === 3 && value.nodes.every(node => node.depth === 1) && value.controls === 0, `${name}: only initial 1Depth groups without collapse/zoom/pan controls`);
  check(value.cards.length === 10 && value.collisions.length === 0 && value.hostCount === 1 && value.compositionCount === 1, `${name}: no duplicate or overlapping cards`, value.collisions);
}
async function popup(page, name, id) {
  const card = page.locator(`.hm-orgchart-employee[data-employee-id="${id}"]`).first();
  await card.focus();
  await card.press('Enter');
  await page.locator('dialog[open]').waitFor();
  const data = await page.evaluate(() => {
    const shadow = document.querySelector('.hm-orgchart-host').shadowRoot;
    const dialog = shadow.querySelector('dialog[open]');
    return { employeeId: dialog.dataset.employeeId, text: dialog.textContent, count: shadow.querySelectorAll('dialog[open]').length, activeInside: dialog.contains(shadow.activeElement) };
  });
  check(data.employeeId === id && data.count === 1 && data.activeInside, `${name}: keyboard opens shared employee popup`, data);
  await page.keyboard.press('Tab');
  check(await page.evaluate(() => {
    const shadow = document.querySelector('.hm-orgchart-host').shadowRoot;
    return shadow.querySelector('dialog[open]').contains(shadow.activeElement);
  }), `${name}: popup Tab focus remains inside`);
  await page.keyboard.press('Escape');
  await page.locator('dialog[open]').waitFor({ state: 'detached' });
  check(await page.evaluate(id => document.querySelector('.hm-orgchart-host').shadowRoot.activeElement?.dataset.employeeId === id, id), `${name}: Escape restores initiating card focus`);
  return data.text;
}
async function scenario(name, run) {
  try { await run(); }
  catch (error) { check(false, `${name}: verification completed`, { message: error.message, stack: error.stack }); }
}

try {
  let baselineFixed, defaultFixed, autoVanilla;
  let baselinePopup;
  await scenario('Fixed baseline', async () => {
    const page = await newPage('baseline-fixed');
    try {
      const state = await mount(page, { baseline: true, fixture: fixedFixture, options: { displayMode: 'readOnly' } });
      check(state.status === 'ready', 'baseline Fixed: existing public Core ready');
      baselineFixed = await measure(page);
      measurements.push({ name: 'baseline-fixed', ...baselineFixed });
      baselinePopup = await popup(page, 'baseline Fixed', 'mock-leader-00');
      await page.screenshot({ path: path.join(output, 'baseline-fixed-1440.png'), fullPage: true });
    } finally { await page.close(); }
  });
  for (const explicit of [false, true]) await scenario(`Fixed ${explicit ? 'explicit' : 'default'}`, async () => {
    const name = explicit ? 'explicit-fixed' : 'default-fixed';
    const page = await newPage(name);
    try {
      const state = await mount(page, { fixture: fixedFixture, options: { displayMode: 'readOnly', ...(explicit ? { layoutMode: 'fixed', companyId: 'unknown-is-ignored-for-fixed' } : {}) } });
      const value = await measure(page);
      measurements.push({ name, ...value });
      check(state.status === 'ready' && state.summary.raw.total === fixedFixture.employees.length, `${name}: ready with preserved employee count`);
      if (baselineFixed) compareFixed(baselineFixed, value, name);
      else check(false, `${name}: baseline required for regression comparison`);
      if (!explicit) {
        defaultFixed = value;
        check(await popup(page, name, 'mock-leader-00') === baselinePopup, `${name}: existing popup field content unchanged`);
        await page.screenshot({ path: path.join(output, 'current-fixed-1440.png'), fullPage: true });
      }
    } finally { await page.close(); }
  });
  await scenario('Auto public Core', async () => {
    const page = await newPage('vanilla-auto');
    try {
      const state = await mount(page, { options: { layoutMode: 'auto', displayMode: 'readOnly' } });
      check(state.status === 'ready' && state.summary.raw.total === expandedFixture.employees.length, 'Auto: JsonOrgChartDataSource and full data summary retained');
      autoVanilla = await measure(page);
      measurements.push({ name: 'vanilla-auto', ...autoVanilla });
      assertExpanded(autoVanilla, 'Vanilla Auto');
      const popupText = await popup(page, 'Auto representative', 'expanded-representative');
      check(popupText.includes('대표이사') && popupText.includes('(주)한맥기술'), 'Auto popup: original employee/affiliation information');
      await popup(page, 'Auto employee', 'expanded-employee-01');
      const presetData = await page.evaluate(ids => ids.map(id => window.hmModule.getCompanyColorPreset(id)), expectedCompanyIds);
      check(presets.every((preset, index) => presetData[index]?.companyId === preset.id && presetData[index].primary === preset.primary && JSON.stringify(presetData[index].secondary) === JSON.stringify(preset.secondary)), 'Public lookup: all 7 P5-0 primary/secondary presets unchanged', presetData);
      const invalid = await page.evaluate(() => {
        const base = { dataSource: new window.hmModule.JsonOrgChartDataSource(window.fixture), stylesheetUrls: { core: 'core.css', engine: 'engine.css' } };
        return [{ layoutMode: 'invalid' }, { layoutMode: 'auto', companyId: 'unknown-company' }].map(options => {
          try { window.hmModule.createOrgChart({ ...base, ...options }); return false; }
          catch (error) { return error instanceof TypeError; }
        });
      });
      check(invalid.every(Boolean), 'New options: invalid layout mode and unknown Auto preset rejected', invalid);
      const lifecycle = await page.evaluate(async () => {
        const changed = structuredClone(window.fixture);
        changed.metadata.dataVersion = 'p5-1a-update';
        const removed = 'talent-growth';
        changed.organizations = changed.organizations.filter(organization => organization.id !== removed);
        changed.employees = changed.employees.filter(employee => employee.organizationId !== removed);
        changed.presentation.organizationOrder = changed.presentation.organizationOrder.filter(id => id !== removed);
        changed.organizations.find(organization => organization.id === 'business-management').name = '갱신된 사업관리';
        await window.handle.update(changed);
        const shadow = document.querySelector('.hm-orgchart-host').shadowRoot;
        const updated = { state: window.handle.getState().status, version: window.handle.getState().dataVersion,
          compositions: shadow.querySelectorAll('.hm-orgchart-expanded').length, nodes: shadow.querySelectorAll('.node[data-organization-id]').length,
          cards: shadow.querySelectorAll('.hm-orgchart-employee').length, stale: !!shadow.querySelector('[data-organization-id="talent-growth"]'), text: shadow.textContent.includes('갱신된 사업관리') };
        await window.handle.reload();
        const reloaded = { state: window.handle.getState().status, version: window.handle.getState().dataVersion,
          compositions: shadow.querySelectorAll('.hm-orgchart-expanded').length, nodes: shadow.querySelectorAll('.node[data-organization-id]').length,
          cards: shadow.querySelectorAll('.hm-orgchart-employee').length, stale: shadow.textContent.includes('갱신된 사업관리') };
        return { updated, reloaded };
      });
      check(lifecycle.updated.state === 'ready' && lifecycle.updated.version === 'p5-1a-update' && lifecycle.updated.compositions === 1
        && lifecycle.updated.nodes === 2 && lifecycle.updated.cards === 7 && !lifecycle.updated.stale && lifecycle.updated.text, 'Auto update: replaces groups/cards without duplicates or stale DOM', lifecycle.updated);
      check(lifecycle.reloaded.state === 'ready' && lifecycle.reloaded.version === expandedFixture.metadata.dataVersion && lifecycle.reloaded.compositions === 1
        && lifecycle.reloaded.nodes === 3 && lifecycle.reloaded.cards === 10 && !lifecycle.reloaded.stale, 'Auto reload: restores JSON source without stale DOM', lifecycle.reloaded);
      await ready(page, 'auto');
      await page.screenshot({ path: path.join(output, 'vanilla-auto-1440.png'), fullPage: true });
      const deep = await page.evaluate(async () => {
        const deep = structuredClone(window.fixture);
        deep.organizations.push({ id: 'deferred-depth-2', parentId: 'business-management', name: '후속 2Depth', type: 'team', leaderId: null, displayOrder: 0 },
          { id: 'deferred-depth-3', parentId: 'deferred-depth-2', name: '후속 3Depth', type: 'cell', leaderId: null, displayOrder: 0 });
        for (const [index, id] of ['deferred-depth-2', 'deferred-depth-3'].entries()) deep.employees.push({ id: `deferred-employee-${index}`, organizationId: id, affiliationId: 'hanmac', name: '가상 직원', position: '연구', jobTitle: null, profileImage: null, workStatus: 'active' });
        deep.presentation.organizationOrder.push('deferred-depth-2', 'deferred-depth-3');
        deep.metadata.dataVersion = 'p5-1b-deferred-fixture';
        const validated = window.hmModule.validateOrgChartDataset(deep);
        const normalized = validated.valid ? window.hmModule.normalizeOrgChartDataset(validated.data) : null;
        await window.handle.update(deep);
        const shadow = document.querySelector('.hm-orgchart-host').shadowRoot;
        return { valid: validated.valid, state: window.handle.getState().status, total: window.handle.getState().summary?.raw.total,
          deepest: normalized?.roots[0].children[0].children[0].children[0].organization.id,
          rendered: [...shadow.querySelectorAll('.node[data-organization-id]')].map(node => node.dataset.organizationId),
          deferredCards: shadow.querySelectorAll('[data-employee-id^="deferred-employee-"]').length,
          retained: deep.organizations.length === window.fixture.organizations.length + 2 };
      });
      check(deep.valid && deep.state === 'ready' && deep.deepest === 'deferred-depth-3' && deep.total === expandedFixture.employees.length + 2
        && deep.rendered.length === 3 && !deep.rendered.some(id => id.startsWith('deferred-')) && deep.deferredCards === 0 && deep.retained,
      'P5-1B boundary: 3Depth data retained and validated; descendants intentionally unplaced', deep);
      const destroyed = await page.evaluate(() => {
        window.handle.destroy(); window.handle.destroy();
        return { status: window.handle.getState().status, children: document.getElementById('chart').children.length };
      });
      check(destroyed.status === 'destroyed' && destroyed.children === 0, 'Auto destroy: terminal/idempotent cleanup', destroyed);
    } finally { await page.close(); }
  });
  await scenario('Auto default displayMode', async () => {
    const page = await newPage('auto-default-display');
    try {
      await mount(page, { options: { layoutMode: 'auto' } });
      const initial = await measure(page);
      check(initial.controls === 0 && initial.nodes.length === 3 && initial.layoutStatus === 'preview', 'Auto without displayMode: initial preview, no collapse controls');
      const transforms = await page.evaluate(() => [...document.querySelector('.hm-orgchart-host').shadowRoot.querySelectorAll('.hm-orgchart-engine')].map(element => element.style.transform));
      const viewport = page.locator('.hm-orgchart-viewport');
      await viewport.hover(); await page.mouse.wheel(0, -100);
      const bounds = await viewport.boundingBox();
      await page.mouse.move(bounds.x + bounds.width / 2, bounds.y + 10); await page.mouse.down();
      await page.mouse.move(bounds.x + bounds.width / 2 + 40, bounds.y + 10, { steps: 4 }); await page.mouse.up();
      const after = await page.evaluate(() => [...document.querySelector('.hm-orgchart-host').shadowRoot.querySelectorAll('.hm-orgchart-engine')].map(element => element.style.transform));
      check(JSON.stringify(transforms) === JSON.stringify(after), 'Auto: wheel/drag do not activate engine zoom or pan');
    } finally { await page.close(); }
  });
  await scenario('Actual Storybook', async () => {
    const page = await newPage('storybook-auto');
    try {
      const response = await page.request.get(`${storyOrigin}/index.json`);
      const index = await response.json();
      const visible = Object.values(index.entries).filter(entry => entry.type === 'story' && entry.title === 'OrgChart' && !entry.tags?.includes('internal')).map(entry => entry.id).sort();
      const expected = ['orgchart--logo-personnel-summary', 'orgchart--department-colors', 'orgchart--full-composition', 'orgchart--expanded-org-chart'].sort();
      check(response.ok() && JSON.stringify(visible) === JSON.stringify(expected), 'Storybook: existing 3 public menus plus Expanded OrgChart only', visible);
      await page.goto(`${storyOrigin}/iframe.html?id=orgchart--expanded-org-chart&viewMode=story`);
      await ready(page, 'auto');
      const vanillaStyles = autoVanilla?.cards.map(card => ({ id: card.id, kind: card.kind, width: card.box.width, height: card.box.height, asset: card.asset, font: card.font }));
      const reactValue = await measure(page);
      check(Boolean(vanillaStyles) && reactValue.cards.length === vanillaStyles.length && reactValue.cards.every((card, index) => {
        const vanilla = vanillaStyles[index];
        return card.id === vanilla.id && card.kind === vanilla.kind && near(card.box.width, vanilla.width) && near(card.box.height, vanilla.height) && card.asset === vanilla.asset && card.font === vanilla.font;
      }), 'React Story / Vanilla: same Core fixture/cards/assets/font');
      for (const preset of presets) {
        const select = page.getByRole('combobox', { name: '회사별 컬러 테마' });
        await select.click();
        await page.getByRole('option', { name: preset.name, exact: true }).click();
        await page.waitForFunction(companyId => {
          const nodes = [...document.querySelector('.hm-orgchart-host')?.shadowRoot.querySelectorAll('.node[data-organization-id]') ?? []];
          return nodes.length === 3 && nodes.every(node => node.dataset.companyId === companyId);
        }, preset.id);
        await ready(page, 'auto');
        const value = await measure(page);
        measurements.push({ name: `storybook-company-${preset.id}`, nodes: value.nodes });
        check(value.nodes.every(node => node.companyId === preset.id && node.primary === preset.primary && node.backgroundColor === rgb(preset.primary)
          && JSON.stringify(node.secondary) === JSON.stringify(preset.secondary)), `HM Select: ${preset.name} primary and all secondary colors connected`, value.nodes);
      }
      await page.getByRole('combobox', { name: '회사별 컬러 테마' }).click();
      await page.getByRole('option', { name: '한맥기술', exact: true }).click();
      await page.waitForFunction(() => document.querySelector('.hm-orgchart-host')?.shadowRoot.querySelector('.node[data-company-id="hanmac"]'));
      for (const width of [390, 768, 1280, 1440]) {
        await page.setViewportSize({ width, height: width < 1000 ? 1024 : 900 });
        await ready(page, 'auto');
        const value = await measure(page);
        measurements.push({ name: `storybook-${width}`, ...value });
        assertExpanded(value, `Storybook ${width}`);
        check(value.document.scrollWidth <= value.document.clientWidth + 1
          && value.viewport && ['auto', 'scroll'].includes(value.viewport.overflowX), `Storybook ${width}: horizontal overflow contained by Core viewport`, { document: value.document, viewport: value.viewport });
        await page.screenshot({ path: path.join(output, `storybook-expanded-${width}.png`), fullPage: true });
      }
      await popup(page, 'React Auto employee', 'expanded-employee-01');
      await page.goto(`${storyOrigin}/iframe.html?id=orgchart--full-composition&viewMode=story`);
      await ready(page, 'fixed');
      const value = await measure(page);
      check(value.cards.length === defaultFixed?.cards.length && value.controls === 0 && value.layoutStatus === null && value.compositionCount === 1,
        'Existing Full Composition Story: fixed read-only route retained');
    } finally { await page.close(); }
  });
} finally {
  await browser.close();
  await new Promise(resolve => server.close(resolve));
  check(errors.length === 0, 'Focused browser scenarios: no new console/runtime errors', errors);
  const summary = { total: results.length, pass: results.filter(result => result.status === 'PASS').length, fail: results.filter(result => result.status === 'FAIL').length };
  await fs.writeFile(path.join(output, 'browser.json'), JSON.stringify({ scope: 'P5-1A only', browser: chromium.name(), summary, results, measurements, errors, warnings,
    notVerified: ['P5-1B recursive automatic layout/recalculation/collision solver', 'Collapse/expand and Zoom/Pan implementation', 'Arbitrary data/themes/browsers and real touch/screen reader speech', 'Entire historical P2/P3 suites and complete Storybook production build'] }, null, 2));
  console.log(JSON.stringify(summary));
  if (summary.fail) process.exitCode = 1;
}