houseplan-card/demo/golden/matrix.mjs

import { fixtureWallKey } from '../fixtures/visual-matrix.mjs';

/** Data-only HP-QA-01 capture matrix. Bump when framing or scenarios change. */
export const GOLDEN_MATRIX_VERSION = 16;

const stage = { capture: 'stage', threshold: { maxChannelDelta: 10, maxDiffRatio: 0.0005 } };
const page = { capture: 'page', threshold: { maxChannelDelta: 10, maxDiffRatio: 0.0008 } };
const sunWindow = { capture: 'sun-window', threshold: { maxChannelDelta: 10, maxDiffRatio: 0.001 } };

export const GOLDEN_SCENARIOS = Object.freeze([
  { id: 'geometry-view-dark-fit', fixture: 'visual', space: 'golden-geometry', mode: 'view',
    theme: 'dark', viewport: { width: 1000, height: 900 }, ...stage },
  { id: 'geometry-view-light-fit', fixture: 'visual', space: 'golden-geometry', mode: 'view',
    theme: 'light', viewport: { width: 1000, height: 900 }, ...stage },
  { id: 'geometry-plan-editor-dark', fixture: 'visual', space: 'golden-geometry', mode: 'plan',
    theme: 'dark', viewport: { width: 1180, height: 900 }, ...page },
  { id: 'opening-placement-door-thick-wall-dark', fixture: 'visual', space: 'golden-geometry',
    // The shared centre edge is a long 25 cm physical wall. It can contain the
    // complete 90 cm door preset while still proving rotation, inner-face
    // offset and ruler placement on a thick wall.
    mode: 'plan', openingPreview: { type: 'door', pointer: [0.48, 0.65] },
    openingPreviewPixels: { minPixels: 150, minInsideWallPixels: 8, minChannelDelta: 4 },
    theme: 'dark', viewport: { width: 1180, height: 900 }, ...page },
  { id: 'geometry-devices-editor-dark', fixture: 'visual', space: 'golden-geometry', mode: 'devices',
    theme: 'dark', viewport: { width: 1180, height: 900 }, ...page },
  { id: 'geometry-decor-editor-dark', fixture: 'visual', space: 'golden-geometry', mode: 'decor',
    theme: 'dark', viewport: { width: 1180, height: 900 }, ...page },
  // HP-UX-11 visual contract: every adaptive width is captured in both
  // languages while the six materially different tray contents are open.
  { id: 'tray-wide-selection-en', fixture: 'visual', space: 'golden-geometry', mode: 'plan',
    editorTray: 'plan-selection', language: 'en', theme: 'dark',
    viewport: { width: 1180, height: 900 }, ...page },
  { id: 'tray-wide-tool-ru', fixture: 'visual', space: 'golden-geometry', mode: 'plan',
    editorTray: 'plan-tool', language: 'ru', theme: 'dark',
    viewport: { width: 1180, height: 900 }, ...page },
  { id: 'tray-medium-group-en', fixture: 'visual', space: 'golden-geometry', mode: 'plan',
    editorTray: 'group', language: 'en', theme: 'dark',
    viewport: { width: 760, height: 820 }, ...page },
  { id: 'tray-medium-selection-ru', fixture: 'visual', space: 'golden-geometry', mode: 'decor',
    editorTray: 'decor-selection', language: 'ru', theme: 'dark',
    viewport: { width: 760, height: 820 }, ...page },
  { id: 'tray-narrow-palette-en', fixture: 'visual', space: 'golden-geometry', mode: 'decor',
    editorTray: 'furniture-palette', language: 'en', theme: 'dark',
    viewport: { width: 390, height: 760 }, ...page },
  { id: 'tray-narrow-tool-ru', fixture: 'visual', space: 'golden-geometry', mode: 'decor',
    editorTray: 'decor-tool', language: 'ru', theme: 'dark',
    viewport: { width: 390, height: 760 }, ...page },
  { id: 'geometry-diagonal-45-opening-dark', fixture: 'visual', space: 'golden-geometry', mode: 'view',
    openingGeometry: { id: 'geo-diagonal-window', type: 'window', angle: 45 },
    theme: 'dark', viewport: { width: 1000, height: 900 }, ...stage },
  { id: 'openings-thick-wall-dark', fixture: 'visual', space: 'golden-lighting', mode: 'view',
    fillMode: 'none', glowEnabled: false, theme: 'dark', viewport: { width: 1000, height: 900 }, ...stage },
  { id: 'openings-filled-tunnel-dark', fixture: 'visual', space: 'golden-lighting', mode: 'view',
    fillMode: 'custom', customFill: { c: '#66717c', a: 0.55 }, glowEnabled: false,
    hideOpenings: true,
    wallReplacements: [{
      match: { a: [0.5, 0.1], b: [0.5, 0.88] },
      segments: [
        { key: fixtureWallKey([0.5, 0.1], [0.5, 0.5]), a: [0.5, 0.1], b: [0.5, 0.5], cm: 18 },
        { key: fixtureWallKey([0.5, 0.5], [0.5, 0.88]), a: [0.5, 0.5], b: [0.5, 0.88], cm: 32 },
      ],
    }],
    tunnelContinuity: { openingId: 'light-door', insetPx: 2, maxChannelJump: 3, dpr2: true },
    theme: 'dark', viewport: { width: 1000, height: 900 }, ...stage },
  { id: 'openings-hidden-view-dark', fixture: 'visual', space: 'golden-lighting', mode: 'view',
    fillMode: 'none', glowEnabled: false, hideOpenings: true, theme: 'dark', viewport: { width: 1000, height: 900 }, ...stage },
  { id: 'lighting-glow-sun-dark', fixture: 'visual', space: 'golden-lighting', mode: 'view',
    theme: 'dark', viewport: { width: 1000, height: 900 }, ...stage },
  { id: 'device-value-badge-positions-dark', fixture: 'visual', space: 'golden-lighting', mode: 'view',
    glowEnabled: false, sunRays: false,
    markerOverrides: [
      { id: 'golden-light-one', binding: 'device:golden-light-one', value_badge: {
        enabled: true, source: { kind: 'entity_state', entity_id: 'light.golden_light_one' }, position: 'right',
      } },
      { id: 'golden-light-two', binding: 'device:golden-light-two', value_badge: {
        enabled: true, source: { kind: 'entity_state', entity_id: 'light.golden_light_two' }, position: 'left',
      } },
      { id: 'golden-presence', binding: 'device:golden-presence', value_badge: {
        enabled: true, source: { kind: 'entity_state', entity_id: 'binary_sensor.golden_presence' }, position: 'top',
      } },
      { id: 'golden-climate', binding: 'device:golden-climate', value_badge: {
        enabled: true,
        source: { kind: 'entity_attribute', entity_id: 'climate.golden_climate', attribute: 'current_temperature' },
        position: 'bottom',
      } },
    ],
    stateOverrides: { 'climate.golden_climate': { attributes: { lqi: 190 } } },
    layoutOverrides: {
      'golden-light-one': { s: 'golden-lighting', x: 0.20, y: 0.32 },
      'golden-light-two': { s: 'golden-lighting', x: 0.20, y: 0.72 },
      'golden-presence': { s: 'golden-lighting', x: 0.80, y: 0.68 },
      'golden-climate': { s: 'golden-lighting', x: 0.80, y: 0.28 },
    },
    theme: 'dark', viewport: { width: 1000, height: 900 }, ...stage },
  { id: 'lighting-sun-window-state-only-dark', fixture: 'visual', space: 'golden-lighting', mode: 'view',
    // The golden screenshot is backed by a second, sun-layer-hidden capture.
    // A real painted ray must account for enough changed pixels; DOM-only
    // presence or an accidentally accepted empty baseline is not sufficient.
    glowEnabled: false, allLightsOff: true,
    stateOverrides: { 'sun.sun': { attributes: { azimuth: 0, elevation: 24 } } },
    sunRayPixels: { minPixels: 500, minChannelDelta: 4 },
    theme: 'dark', viewport: { width: 1000, height: 900 }, ...sunWindow },
  { id: 'lighting-fill-light-axis-split-dark', fixture: 'visual', space: 'golden-lighting', mode: 'view',
    fillMode: 'light', glowEnabled: false, theme: 'dark', viewport: { width: 1000, height: 900 }, ...stage },
  { id: 'lighting-fill-temp-axis-split-dark', fixture: 'visual', space: 'golden-lighting', mode: 'view',
    fillMode: 'temp', glowEnabled: false, theme: 'dark', viewport: { width: 1000, height: 900 }, ...stage },
  { id: 'lighting-fill-lqi-axis-split-dark', fixture: 'visual', space: 'golden-lighting', mode: 'view',
    fillMode: 'lqi', glowEnabled: false, theme: 'dark', viewport: { width: 1000, height: 900 }, ...stage },
  { id: 'lighting-temp-glow-dark', fixture: 'visual', space: 'golden-lighting', mode: 'view',
    fillMode: 'temp', glowEnabled: true, theme: 'dark', viewport: { width: 1000, height: 900 }, ...stage },
  { id: 'lighting-temp-glow-light', fixture: 'visual', space: 'golden-lighting', mode: 'view',
    fillMode: 'temp', glowEnabled: true, theme: 'light', viewport: { width: 1000, height: 900 }, ...stage },
  { id: 'lighting-custom-glow-dark', fixture: 'visual', space: 'golden-lighting', mode: 'view',
    fillMode: 'custom', customFill: { c: '#486a8f', a: 0.42 }, glowEnabled: true,
    roomCustomFill: { 'light-right': { c: '#8f5f48', a: 0.56 } },
    theme: 'dark', viewport: { width: 1000, height: 900 }, ...stage },
  { id: 'lighting-opaque-glow-two-doorways-dark', fixture: 'visual', space: 'golden-lighting', mode: 'view',
    fillMode: 'custom', customFill: { c: '#3f4854', a: 1 }, glowEnabled: true, sunRays: false,
    allLightsOff: true,
    stateOverrides: {
      'light.golden_light_one': { state: 'on', attributes: { rgb_color: [255, 196, 112], brightness: 255 } },
    },
    extraOpenings: [
      { id: 'light-door-second', type: 'door', x: 0.50, y: 0.32, angle: 90, length: 0.13 },
    ],
    layoutOverrides: { 'golden-light-one': { s: 'golden-lighting', x: 0.40, y: 0.48 } },
    // The golden is protection only if the receiving half actually contains
    // rendered light. A data-only check once let a visually empty baseline pass.
    warmPixelRegion: { x: 0.5, y: 0, w: 0.5, h: 1, minPixels: 2500, minRedBlueDelta: 25 },
    theme: 'dark', viewport: { width: 1000, height: 900 }, ...stage },
  { id: 'lighting-custom-glow-light', fixture: 'visual', space: 'golden-lighting', mode: 'view',
    fillMode: 'custom', customFill: { c: '#486a8f', a: 0.42 }, glowEnabled: true,
    roomCustomFill: { 'light-right': { c: '#8f5f48', a: 0.56 } },
    theme: 'light', viewport: { width: 1000, height: 900 }, ...stage },
  { id: 'lighting-temp-glow-no-sources-dark', fixture: 'visual', space: 'golden-lighting', mode: 'view',
    fillMode: 'temp', glowEnabled: true, allLightsOff: true,
    theme: 'dark', viewport: { width: 1000, height: 900 }, ...stage },
  { id: 'lighting-temp-glow-room-override-dark', fixture: 'visual', space: 'golden-lighting', mode: 'view',
    fillMode: 'temp', glowEnabled: true, roomGlow: { 'light-left': true, 'light-right': false },
    theme: 'dark', viewport: { width: 1000, height: 900 }, ...stage },
  { id: 'lighting-manual-auto-spill-overlap-dark', fixture: 'visual', space: 'golden-lighting', mode: 'view',
    fillMode: 'temp', glowEnabled: true,
    markerOverrides: [{
      id: 'golden-light-two', binding: 'device:golden-light-two',
      glow_color: { c: '#3a8fff', bri: 0.35 }, glow_radius_cm: 420,
    }],
    layoutOverrides: { 'golden-light-two': { s: 'golden-lighting', x: 0.39, y: 0.57 } },
    theme: 'dark', viewport: { width: 1000, height: 900 }, ...stage },
  { id: 'hover-over-glow-dark', fixture: 'visual', space: 'golden-lighting', mode: 'view',
    hoverRoom: 'light-right', theme: 'dark', viewport: { width: 1000, height: 900 }, ...stage },
  { id: 'hover-nested-room-dark', fixture: 'visual', space: 'golden-geometry', mode: 'view',
    hoverRoom: 'geo-nested', theme: 'dark', viewport: { width: 1000, height: 900 }, ...stage },
  { id: 'large-house-zoom-040-dark', fixture: 'large', space: 'perf-floor-1', mode: 'view',
    zoom: 0.4, theme: 'dark', viewport: { width: 1180, height: 900 }, ...stage },
  { id: 'large-house-zoom-250-dark', fixture: 'large', space: 'perf-floor-1', mode: 'view',
    zoom: 2.5, theme: 'dark', viewport: { width: 1180, height: 900 }, ...stage },
  { id: 'large-house-warm-remount-dark', fixture: 'large', space: 'perf-floor-2', mode: 'view',
    warmRemount: true, theme: 'dark', viewport: { width: 1180, height: 900 }, ...stage },
  { id: 'device-dialog-desktop-en', fixture: 'visual', space: 'golden-lighting',
    dialog: 'device', deviceId: 'golden-light-two', deviceLightControls: true,
    deviceName: 'Living room light controller with an intentionally long title',
    openHelp: 'marker.glow_mode.help', helpTextRegion: { key: 'marker.glow_mode.help', minPixels: 30 },
    focusDialogClose: true, language: 'en', theme: 'dark', viewport: { width: 1180, height: 1200 }, ...page },
  { id: 'device-dialog-mobile-ru', fixture: 'visual', space: 'golden-lighting',
    dialog: 'device', deviceId: 'golden-light-two', deviceLightControls: true,
    deviceName: 'Контроллер освещения гостиной с намеренно очень длинным названием',
    language: 'ru', theme: 'dark', viewport: { width: 390, height: 1000 }, ...page },
  { id: 'device-help-popover-light-ru', fixture: 'visual', space: 'golden-lighting',
    dialog: 'device', deviceId: 'golden-light-two', deviceLightControls: true,
    openHelp: 'marker.glow_mode.help', helpTextRegion: { key: 'marker.glow_mode.help', minPixels: 30 },
    language: 'ru', theme: 'light', viewport: { width: 760, height: 900 }, ...page },
  { id: 'decor-color-popover-mobile-ru', fixture: 'visual', space: 'golden-geometry',
    dialog: 'decor-color', language: 'ru', theme: 'dark',
    viewport: { width: 390, height: 760 }, ...page },
  { id: 'backup-full-preview-desktop-en', fixture: 'visual', space: 'golden-geometry',
    dialog: 'backup-full', language: 'en', theme: 'dark',
    viewport: { width: 1000, height: 900 }, ...page },
  { id: 'backup-space-preview-mobile-ru', fixture: 'visual', space: 'golden-geometry',
    dialog: 'backup-space', language: 'ru', theme: 'light',
    viewport: { width: 390, height: 820 }, ...page },
]);