explorbot 0.4.1 → 0.4.2

package/src/test-plan.ts

@@ -3,7 +3,7 @@ import { existsSync } from 'node:fs';
 import path from 'node:path';
 import figures from 'figures';
 import type { ActionResult } from './action-result.ts';
-import { listSites } from './global-config.ts';
+import { listSitePlanDirs } from './global-config.ts';
 import { WebPageState } from './state-manager.ts';
 import { tag } from './utils/logger.ts';
 import { parsePlanFromMarkdown, planToAiContext, savePlanToMarkdown, savePlansToMarkdown } from './utils/test-plan-markdown.ts';
@@ -391,8 +391,6 @@ export class Test extends Task {
   }
 }
 
-const SITE_PLANS_DIR = ['output', 'plans'];
-
 type PlanChangeListener = (tests: Test[]) => void;
 
 export class Plan {
@@ -479,25 +477,29 @@ export class Plan {
 
   updateStatus(): void {}
 
-  static loadFromFile(file: string, plansDir?: string): Plan | null {
+  static resolveFile(file: string, plansDir?: string): string | null {
     const names = [file];
     if (!file.endsWith('.md')) names.push(`${file}.md`);
 
     const dirs = [process.cwd()];
     if (plansDir) dirs.push(plansDir);
-    if (!plansDir) dirs.push(...listSites().map((site) => path.join(site.dir, ...SITE_PLANS_DIR)));
+    if (!plansDir) dirs.push(...listSitePlanDirs());
 
     for (const dir of dirs) {
       const filePath = names.map((name) => path.resolve(dir, name)).find(existsSync);
-      if (!filePath) continue;
-      const loaded = parsePlanFromMarkdown(filePath);
-      loaded.filePath = filePath;
-      return loaded;
+      if (filePath) return filePath;
     }
-
     return null;
   }
 
+  static loadFromFile(file: string, plansDir?: string): Plan | null {
+    const filePath = Plan.resolveFile(file, plansDir);
+    if (!filePath) return null;
+    const loaded = parsePlanFromMarkdown(filePath);
+    loaded.filePath = filePath;
+    return loaded;
+  }
+
   static fromMarkdown(filePath: string): Plan {
     return parsePlanFromMarkdown(filePath);
   }

package/src/utils/aria.ts

@@ -469,7 +469,6 @@ const formatDiff = (added: string[], removed: string[], toggled: string[], typed
 // ─────────────────────────────────────────────────────────────────
 
 export interface FocusAreaResult {
-  detected: boolean;
   type: 'modal' | null;
   name: string | null;
 }
@@ -478,7 +477,7 @@ const findDialogOrModal = (nodes: AriaNode[]): FocusAreaResult | null => {
   let topmost: FocusAreaResult | null = null;
   for (const node of nodes) {
     if (node.role === 'dialog' || node.role === 'alertdialog' || node.attributes.modal === true || node.attributes.modal === 'true') {
-      topmost = { detected: true, type: 'modal', name: node.name || null };
+      topmost = { type: 'modal', name: node.name || null };
     }
     const child = findDialogOrModal(node.children);
     if (child) topmost = child;
@@ -530,7 +529,7 @@ export const detectFocusArea = (snapshot: string | null): FocusAreaResult => {
   tree = unwrapIgnored(tree);
   tree = dropEmpty(tree, { keepNamed: true });
 
-  return findDialogOrModal(tree) ?? { detected: false, type: null, name: null };
+  return findDialogOrModal(tree) ?? { type: null, name: null };
 };
 
 export const collectInteractiveNodes = (snapshot: string | null): Array<Record<string, unknown>> => {
@@ -541,6 +540,30 @@ export const collectInteractiveNodes = (snapshot: string | null): Array<Record<s
   return flatten(tree).map((e) => e.entry);
 };
 
+const TEMPLATE_CHROME_ROLES = new Set(['banner', 'navigation', 'contentinfo', 'complementary']);
+const TEMPLATE_PROSE_ROLE = 'text';
+
+const dropChrome = (nodes: AriaNode[]): AriaNode[] =>
+  nodes.flatMap((node) => {
+    if (TEMPLATE_CHROME_ROLES.has(node.role)) return [];
+    return [{ ...node, children: dropChrome(node.children) }];
+  });
+
+const collectRolePaths = (nodes: AriaNode[], prefix: string, into: Set<string>): void => {
+  for (const node of nodes) {
+    if (node.role === TEMPLATE_PROSE_ROLE) continue;
+    const path = prefix ? `${prefix}/${node.role}` : node.role;
+    into.add(path);
+    collectRolePaths(node.children, path, into);
+  }
+};
+
+export const ariaTemplateSignature = (snapshot: string | null): Set<string> => {
+  const paths = new Set<string>();
+  collectRolePaths(dropChrome(parseSnapshot(snapshot)), '', paths);
+  return paths;
+};
+
 // ─────────────────────────────────────────────────────────────────
 // Standalone helpers (regex on raw strings — not part of the pipeline)
 // ─────────────────────────────────────────────────────────────────

package/src/utils/cli-section.ts

@@ -0,0 +1,12 @@
+import chalk from 'chalk';
+
+export function renderSection(title: string, entries: [string, string][], indent = 0): string[] {
+  if (!entries.length) return [];
+
+  const pad = ' '.repeat(indent);
+  const width = Math.max(...entries.map(([label]) => label.length));
+  const lines = [`${pad}${chalk.bold(title)}`];
+  for (const [label, value] of entries) lines.push(`${pad}  ${chalk.dim(label.padEnd(width))}  ${value}`);
+  lines.push('');
+  return lines;
+}

package/src/utils/html-diff.ts

@@ -1,7 +1,7 @@
 import { parse, serialize } from 'parse5';
 import type * as parse5TreeAdapter from 'parse5/lib/tree-adapters/default';
 import type { HtmlConfig } from '../config.ts';
-import { TAILWIND_CLASS_PATTERNS, TRASH_HTML_CLASSES, minifyHtml } from './html.ts';
+import { isTailwindClass, isTrashClass, minifyHtml } from './html.ts';
 import { isDynamicId, isGenericClass } from './xpath.ts';
 
 export interface HtmlDiffPart {
@@ -11,6 +11,7 @@ export interface HtmlDiffPart {
   added: string[];
   removed: string[];
   appearedSelector?: string;
+  containerWasEmpty?: boolean;
 }
 
 export interface HtmlDiffResult {
@@ -467,15 +468,13 @@ const directTextDiffer = (current: ElementNode, previous: ElementNode): boolean
   return false;
 };
 
-const trashHtmlClasses = TRASH_HTML_CLASSES;
-
 function filterContainerClasses(classes: string[]): string[] {
   return classes
     .filter((cls) => !/\d/.test(cls))
     .filter((cls) => !isGenericClass(cls))
-    .filter((cls) => !trashHtmlClasses.test(cls))
+    .filter((cls) => !isTrashClass(cls))
     .filter((cls) => !/(:|__)/.test(cls))
-    .filter((cls) => !TAILWIND_CLASS_PATTERNS.some((pattern) => pattern.test(cls)));
+    .filter((cls) => !isTailwindClass(cls));
 }
 
 function buildContainerSelector(element: ElementNode, allElements: NodeMap): string | null {
@@ -641,7 +640,8 @@ async function buildDiffParts(originalMap: NodeMap, modifiedMap: NodeMap, pageSi
     const addedLines = appearedPaths.map((p) => `ELEMENT:${p}`);
     const removedLines: string[] = [];
 
-    const part: HtmlDiffPart = { container: selector, subtree, rawSize: serialized.length, added: addedLines, removed: removedLines };
+    const heldContentBefore = (originalMap.get(containerPath)?.childNodes ?? []).some((child) => 'tagName' in child && !!child.tagName);
+    const part: HtmlDiffPart = { container: selector, subtree, rawSize: serialized.length, added: addedLines, removed: removedLines, containerWasEmpty: !heldContentBefore };
     const appearedPath = appearedPaths[0];
     if (appearedPath) {
       const appearedElement = modifiedMap.get(appearedPath);

package/src/utils/html.ts

@@ -544,6 +544,9 @@ export const TAILWIND_CLASS_PATTERNS: RegExp[] = [
   /^prose$/i,
 ];
 
+export const isTailwindClass = (cls: string): boolean => TAILWIND_CLASS_PATTERNS.some((pattern) => pattern.test(cls));
+export const isTrashClass = (cls: string): boolean => TRASH_HTML_CLASSES.test(cls);
+
 const NON_SEMANTIC_TAGS = new Set([
   'style',
   'script',
@@ -758,7 +761,6 @@ export function sanitizeHtmlString(html: string, htmlConfig?: HtmlConfig): strin
  */
 export function htmlMinimalUISnapshot(html: string, htmlConfig?: HtmlConfig['minimal']) {
   const document = parse(html);
-  const trashHtmlClasses = TRASH_HTML_CLASSES;
   const removeElements = ['path', 'script'];
 
   function isFilteredOut(node) {
@@ -867,9 +869,9 @@ export function htmlMinimalUISnapshot(html: string, htmlConfig?: HtmlConfig['min
           attr.value = value
             .split(' ')
             .filter((className) => !/\d/.test(className))
-            .filter((className) => !className.match(trashHtmlClasses))
+            .filter((className) => !isTrashClass(className))
             .filter((className) => !className.match(/(:|__)/))
-            .filter((className) => !TAILWIND_CLASS_PATTERNS.some((pattern) => pattern.test(className)))
+            .filter((className) => !isTailwindClass(className))
             .join(' ');
           if (attr.value === '') return false;
         }
@@ -1451,7 +1453,7 @@ function cleanElement(element: parse5TreeAdapter.Element): void {
         .filter(Boolean)
         .filter((className) => !/\d/.test(className))
         .filter((className) => !className.includes(':'))
-        .filter((className) => !TAILWIND_CLASS_PATTERNS.some((pattern) => pattern.test(className)))
+        .filter((className) => !isTailwindClass(className))
         .join(' ');
 
       if (!attr.value) {

package/src/utils/overlay.ts

@@ -1,56 +1,21 @@
 import { detectFocusArea } from './aria.js';
-import type { HtmlDiffPart } from './html-diff.js';
-import { pathToXPath } from './html-diff.js';
-import { extractHeadings } from './html.js';
+import { HTML_SELECTORS } from './html.js';
 import { createDebug } from './logger.js';
+import { Region, type RegionData, type RegionDiff, addedSubtrees } from './region.js';
 
 const debugLog = createDebug('explorbot:overlay');
 
-export type OverlayType = 'modal' | 'region';
-export type OverlayData = {
-  type?: OverlayType | null;
-  name?: string | null;
-  root?: string | null;
-  html?: string | null;
-  xpath?: string | null;
-  parent?: OverlayData | null;
-};
-
-export class Overlay {
-  readonly type: OverlayType | null;
-  readonly name: string | null;
-  readonly root: string | null;
-  readonly html: string | null;
-  readonly xpath: string | null;
-  readonly parent: OverlayData | null;
-
-  constructor(data: OverlayData = {}) {
-    this.type = data.type ?? null;
-    this.name = data.name ?? null;
-    this.root = data.root ?? null;
-    this.html = data.html ?? null;
-    this.xpath = data.xpath ?? null;
-    this.parent = data.parent ?? null;
-  }
-
-  get detected(): boolean {
-    return this.type !== null && this.type !== 'region';
-  }
-
-  get present(): boolean {
-    return this.type !== null;
+export class Overlay extends Region {
+  constructor(data: RegionData = {}) {
+    super({ ...data, type: 'overlay' });
   }
 
-  describe(): string {
-    if (!this.present) return '';
-    let text = `${this.type} "${this.name || 'unnamed'}" opened`;
-    if (this.root) text += `, scope: ${this.root}`;
-    return text;
+  get isModal(): boolean {
+    return true;
   }
 
-  withGeometry(geometry: Overlay): Overlay {
+  withGeometry(geometry: Region): Overlay {
     return new Overlay({
-      type: this.type,
       name: this.name || geometry.name,
       root: geometry.root,
       html: geometry.html,
@@ -58,23 +23,15 @@ export class Overlay {
     });
   }
 
-  withParent(parent: Overlay): Overlay {
-    return new Overlay({
-      type: this.type,
-      name: this.name,
-      root: this.root,
-      html: this.html,
-      xpath: this.xpath,
-      parent: { type: parent.type, name: parent.name, root: parent.root, xpath: parent.xpath },
-    });
+  static fromAria(snapshot: string | null): Region {
+    const focus = detectFocusArea(snapshot);
+    if (!focus.type) return new Region();
+    return new Overlay({ name: focus.name });
   }
 
-  static fromAria(snapshot: string | null): Overlay {
-    return new Overlay(detectFocusArea(snapshot));
-  }
-
-  static resolve(data: { overlay?: OverlayData | null; ariaSnapshot?: string | null }): Overlay {
-    if (data.overlay) return new Overlay(data.overlay);
+  static resolve(data: { overlay?: RegionData | null; ariaSnapshot?: string | null }): Region {
+    if (data.overlay?.type === 'overlay') return new Overlay(data.overlay);
+    if (data.overlay) return new Region(data.overlay);
     return Overlay.fromAria(data.ariaSnapshot ?? null);
   }
 }
@@ -82,173 +39,129 @@ export class Overlay {
 export class OverlayPage {
   constructor(private page: { evaluate(fn: any, arg: any): Promise<any> } | null) {}
 
-  async detectRegion(diff: RegionDiff): Promise<Overlay | null> {
+  async detectRegion(diff: RegionDiff): Promise<Region | null> {
     if (!diff.sameUrl && diff.similarity < SOFT_NAVIGATION_SIMILARITY) return null;
-    for (const subRoot of this.appearedSubRoots(diff)) {
-      const probe = await this.probe(subRoot.elementXPath);
-      if (probe?.found && probe.onScreen && !probe.centerBelongs) {
-        debugLog('Appeared region is hidden or covered, trying the next candidate');
+    for (const added of addedSubtrees(diff)) {
+      const layout = await this.measure(added.xpath);
+      if (layout?.rendered && layout.inViewport && !layout.centerBelongs) {
+        debugLog('Added content is hidden or covered, trying the next candidate');
+        continue;
+      }
+      const overlaying = !!layout?.rendered && layout.outOfFlow && layout.inViewport;
+      if (overlaying && modalScore(layout) < MIN_MODAL_SCORE) {
+        debugLog('Out-of-flow content is a popover, not an overlay; ignoring it');
         continue;
       }
-      const overlay = this.toOverlay(subRoot, probe, diff.previousHtml);
-      if (!overlay.name && !overlay.root) {
-        debugLog('Appeared region has no name and no semantic root, ignoring it');
+      if (!overlaying && !added.sizable) {
+        debugLog('In-flow content is under the region floor, ignoring it');
         continue;
       }
-      debugLog(`Region detected: ${overlay.describe()}`);
-      return overlay;
+      const data = { name: added.name, root: added.root, html: added.html, xpath: added.xpath };
+      let region: Region = new Region({ ...data, type: 'region' });
+      if (overlaying) region = new Overlay(data);
+      debugLog(`Region detected: ${region.describe()}`);
+      return region;
     }
     return null;
   }
 
-  async isStillOpen(overlay: Overlay): Promise<boolean> {
-    if (!overlay.xpath) return true;
-    const probe = await this.probe(overlay.xpath);
+  async isStillOpen(region: Region): Promise<boolean> {
+    if (!region.xpath) return true;
+    const probe = await this.measure(region.xpath);
     if (!probe) return true;
-    if (!probe.found) return false;
-    if (probe.onScreen && !probe.centerBelongs && !probe.coveredByFloating) return false;
+    if (!probe.rendered) return false;
+    if (probe.inViewport && !probe.centerBelongs && !probe.coveredOutOfFlow) return false;
     return true;
   }
 
-  private appearedSubRoots(diff: RegionDiff): AppearedSubRoot[] {
-    const candidates: AppearedSubRoot[] = [];
-    for (const part of diff.parts) {
-      const appeared = part.added.find((line) => line.startsWith('ELEMENT:'));
-      if (!appeared) continue;
-      if (part.subtree.length < SUBROOT_MIN_HTML) continue;
-      if (diff.pageSize > 0 && part.rawSize > REGION_MAX_RATIO * diff.pageSize) {
-        debugLog(`Appeared subtree spans ${Math.round((part.rawSize / diff.pageSize) * 100)}% of the page — a new state, not a region`);
-        continue;
-      }
-      candidates.push({
-        container: part.container,
-        elementXPath: pathToXPath(appeared.slice('ELEMENT:'.length)),
-        subtree: part.subtree,
-        size: part.subtree.length,
-        rawSize: part.rawSize,
-        appearedSelector: part.appearedSelector,
-        fresh: !!this.freshHeading(part.subtree, diff.previousHtml),
-      });
-    }
-    if (candidates.length === 0) return [];
-    const totalRawSize = candidates.reduce((sum, c) => sum + c.rawSize, 0);
-    const largest = Math.max(...candidates.map((c) => c.rawSize));
-    if (largest < REGION_DOMINANCE * totalRawSize) {
-      debugLog('Changes are scattered across the page, no dominant region');
-      return [];
-    }
-    candidates.sort((a, b) => Number(b.fresh) - Number(a.fresh) || b.size - a.size);
-    return candidates;
-  }
-
-  private async probe(xpath: string): Promise<RegionProbe | null> {
+  private async measure(xpath: string): Promise<RegionLayout | null> {
     if (!this.page) return null;
-    return this.page
-      .evaluate(
-        ({ probeSource, config }: { probeSource: string; config: any }) => {
-          const probe = new Function(`return ${probeSource}`)() as (config: any) => any;
-          return probe(config);
-        },
-        { probeSource: inspectRegion.toString(), config: { xpath } }
-      )
-      .catch((err: Error) => {
-        debugLog('Region probe failed:', err.message);
-        return null;
-      });
-  }
-
-  private toOverlay(subRoot: AppearedSubRoot, probe: RegionProbe | null, previousHtml: string): Overlay {
-    let type: OverlayType = 'region';
-    if (probe?.centerBelongs && probe.floating) type = 'modal';
-    let root: string | null = null;
-    if (subRoot.container !== 'body' && !subRoot.container.startsWith('//')) root = subRoot.container;
-    if (!root && subRoot.appearedSelector) root = subRoot.appearedSelector;
-    return new Overlay({ type, name: this.nameFrom(subRoot.subtree, previousHtml), root, html: subRoot.subtree, xpath: subRoot.elementXPath });
-  }
-
-  private nameFrom(html: string, previousHtml: string): string | null {
-    const fresh = this.freshHeading(html, previousHtml);
-    if (fresh) return fresh;
-    const candidates = this.headingsOf(html);
-    if (candidates.length === 0) return null;
-    return candidates.join(' ');
-  }
-
-  private freshHeading(html: string, previousHtml: string): string | null {
-    const fresh = this.headingsOf(html).filter((heading) => !previousHtml.includes(heading));
-    return fresh[0] ?? null;
-  }
-
-  private headingsOf(html: string): string[] {
-    const headings = extractHeadings(html);
-    return [headings.h1, headings.h2, headings.h3, headings.h4].filter(Boolean) as string[];
+    return this.page.evaluate(measureLayout, { config: { xpath, controlsSelector: HTML_SELECTORS.interactiveControl } }).catch((err: Error) => {
+      debugLog('Layout measurement failed:', err.message);
+      return null;
+    });
   }
 }
 
-const SUBROOT_MIN_HTML = 5_000;
 const SOFT_NAVIGATION_SIMILARITY = 50;
-const REGION_MAX_RATIO = 0.6;
-const REGION_DOMINANCE = 0.7;
+const TYPICAL_DIALOG_CONTROLS = 3;
+const MIN_MODAL_SCORE = 0.25;
+
+const modalScore = (layout: RegionLayout | null): number => {
+  if (!layout) return 0;
+  let blocked = layout.viewportCoverage;
+  if (layout.holdsViewportCenter) blocked = 1;
+  return blocked * Math.min(1, layout.controls / TYPICAL_DIALOG_CONTROLS);
+};
 
-// Serialized via toString() into page.evaluate — must stay a plain function with no outer-scope references.
-function inspectRegion(config: { xpath: string }): RegionProbe {
-  const probe: RegionProbe = { found: false, onScreen: false, floating: false, centerBelongs: false, coveredByFloating: false };
+// Passed to page.evaluate as a function — must stay self-contained with no outer-scope references.
+function measureLayout({ config }: { config: { xpath: string; controlsSelector: string } }): RegionLayout {
+  const layout: RegionLayout = { rendered: false, inViewport: false, outOfFlow: false, centerBelongs: false, coveredOutOfFlow: false, holdsViewportCenter: false, viewportCoverage: 0, controls: 0 };
 
-  const isFloating = (start: HTMLElement | null): boolean => {
+  const isOutOfFlow = (start: HTMLElement | null): boolean => {
     let node = start;
     while (node && node !== document.body) {
-      const style = window.getComputedStyle(node);
-      if (style.position === 'fixed' || style.position === 'absolute' || (Number.parseInt(style.zIndex || '0', 10) || 0) > 0) return true;
+      const position = window.getComputedStyle(node).position;
+      if (position === 'fixed' || position === 'absolute') return true;
       node = node.parentElement;
     }
     return false;
   };
 
+  const clip = (rect: DOMRect) => {
+    const left = Math.max(rect.left, 0);
+    const top = Math.max(rect.top, 0);
+    const right = Math.min(rect.right, window.innerWidth);
+    const bottom = Math.min(rect.bottom, window.innerHeight);
+    return { left, top, right, bottom, area: Math.max(0, right - left) * Math.max(0, bottom - top) };
+  };
+
   const result = document.evaluate(config.xpath, document, null, 9, null);
   const node = result.singleNodeValue;
-  if (!node || node.nodeType !== 1) return probe;
+  if (!node || node.nodeType !== 1) return layout;
   const element = node as HTMLElement;
-  const rect = element.getBoundingClientRect();
-  if (rect.width === 0 && rect.height === 0) return probe;
-  probe.found = true;
-
-  probe.floating = isFloating(element);
-
-  const left = Math.max(rect.left, 0);
-  const top = Math.max(rect.top, 0);
-  const right = Math.min(rect.right, window.innerWidth);
-  const bottom = Math.min(rect.bottom, window.innerHeight);
-  if (right <= left || bottom <= top) return probe;
-  probe.onScreen = true;
+  const belongs = (hit: Element | null): boolean => !!hit && (hit === element || element.contains(hit));
+
+  let box: HTMLElement = element;
+  let outOfFlow = isOutOfFlow(element);
+  let boxArea = 0;
+  if (outOfFlow) boxArea = clip(element.getBoundingClientRect()).area;
+  const MAX_DESCENDANTS_SCANNED = 200;
+  const descendants = Array.from(element.querySelectorAll('*')).slice(0, MAX_DESCENDANTS_SCANNED) as HTMLElement[];
+  for (const descendant of descendants) {
+    if (!isOutOfFlow(descendant)) continue;
+    const area = clip(descendant.getBoundingClientRect()).area;
+    if (area <= boxArea) continue;
+    box = descendant;
+    boxArea = area;
+    outOfFlow = true;
+  }
+
+  const rect = box.getBoundingClientRect();
+  if (rect.width === 0 && rect.height === 0) return layout;
+  layout.rendered = true;
+  layout.outOfFlow = outOfFlow;
+  layout.controls = Array.from(element.querySelectorAll(config.controlsSelector)).filter((control) => control.getClientRects().length > 0).length;
+
+  const { left, top, right, bottom, area } = clip(rect);
+  if (right <= left || bottom <= top) return layout;
+  layout.inViewport = true;
+  layout.viewportCoverage = area / (window.innerWidth * window.innerHeight);
 
   const hit = document.elementFromPoint((left + right) / 2, (top + bottom) / 2);
-  probe.centerBelongs = !!hit && (hit === element || element.contains(hit));
-  if (hit && !probe.centerBelongs) probe.coveredByFloating = isFloating(hit as HTMLElement);
-  return probe;
-}
-
-export interface RegionDiff {
-  parts: HtmlDiffPart[];
-  pageSize: number;
-  similarity: number;
-  sameUrl: boolean;
-  previousHtml: string;
-}
-
-interface AppearedSubRoot {
-  container: string;
-  elementXPath: string;
-  subtree: string;
-  size: number;
-  rawSize: number;
-  appearedSelector?: string;
-  fresh: boolean;
+  layout.centerBelongs = belongs(hit);
+  if (hit && !layout.centerBelongs) layout.coveredOutOfFlow = isOutOfFlow(hit as HTMLElement);
+  layout.holdsViewportCenter = belongs(document.elementFromPoint(window.innerWidth / 2, window.innerHeight / 2));
+  return layout;
 }
 
-interface RegionProbe {
-  found: boolean;
-  onScreen: boolean;
-  floating: boolean;
+interface RegionLayout {
+  rendered: boolean;
+  inViewport: boolean;
+  outOfFlow: boolean;
   centerBelongs: boolean;
-  coveredByFloating: boolean;
+  coveredOutOfFlow: boolean;
+  holdsViewportCenter: boolean;
+  viewportCoverage: number;
+  controls: number;
 }