@allurereport/web-commons 3.8.2 → 3.10.0

package/dist/attachments.d.ts

@@ -17,7 +17,10 @@ type AttachmentImageDiffData = {
         diff?: string;
     };
 };
-export type AttachmentData = AttachmentImageData | AttachmentTextData | AttachmentVideoData | AttachmentImageDiffData;
+type AttachmentHttpData = {
+    http: unknown;
+};
+export type AttachmentData = AttachmentImageData | AttachmentTextData | AttachmentVideoData | AttachmentImageDiffData | AttachmentHttpData;
 type AttachmentPayload = {
     id?: string;
     ext?: string;
@@ -28,7 +31,7 @@ export declare const fetchAttachment: (id: string, ext: string, contentType?: st
 export declare const blobAttachment: (id: string, ext: string, contentType: string) => Promise<Blob>;
 export declare const downloadAttachment: (id: string, ext: string, contentType: string) => Promise<void>;
 export declare const openAttachmentInNewTab: (id: string, ext: string, contentType: string) => Promise<void>;
-export type AttachmentType = "css" | "json" | "image" | "svg" | "code" | "text" | "html" | "table" | "video" | "uri" | "archive" | "image-diff";
+export type AttachmentType = "css" | "json" | "image" | "svg" | "code" | "text" | "markdown" | "html" | "table" | "video" | "uri" | "archive" | "image-diff" | "http";
 export declare const PREVIEWABLE_CONTENT_TYPES: readonly ["text/html", "text/csv", "text/markdown", "text/tab-separated-values", "text/uri-list"];
 export declare const isPreviewableContentType: (type?: string) => boolean;
 export declare const extname: (str: string) => string | undefined;

package/dist/attachments.js

@@ -22,6 +22,7 @@ export const fetchAttachment = async (id, ext, contentType) => {
         case "uri":
         case "code":
         case "html":
+        case "markdown":
         case "table":
         case "text": {
             const text = await response.text();
@@ -36,6 +37,10 @@ export const fetchAttachment = async (id, ext, contentType) => {
             const json = await response.json();
             return { diff: json };
         }
+        case "http": {
+            const json = await response.json();
+            return { http: json };
+        }
         default:
             return null;
     }
@@ -181,7 +186,8 @@ export const isSyntaxHighlightSupported = (payload) => {
     return !!ext && HIGHLIGHT_EXTS.has(ext);
 };
 export const attachmentType = (type) => {
-    switch (type) {
+    const normalizedType = type?.split(";")[0].trim().toLowerCase();
+    switch (normalizedType) {
         case "image/bmp":
         case "image/gif":
         case "image/tiff":
@@ -221,9 +227,10 @@ export const attachmentType = (type) => {
         case "application/json":
             return "code";
         case "text/plain":
-        case "text/markdown":
         case "text/*":
             return "text";
+        case "text/markdown":
+            return "markdown";
         case "text/html":
             return "html";
         case "text/csv":
@@ -245,6 +252,8 @@ export const attachmentType = (type) => {
             return "archive";
         case "application/vnd.allure.image.diff":
             return "image-diff";
+        case "application/vnd.allure.http+json":
+            return "http";
         default:
             return null;
     }

package/dist/charts/colors.js

@@ -1,9 +1,9 @@
 export const statusColors = {
-    failed: "var(--bg-support-capella)",
-    broken: "var(--bg-support-atlas)",
-    passed: "var(--bg-support-castor)",
-    skipped: "var(--bg-support-rau)",
-    unknown: "var(--bg-support-skat)",
+    failed: "var(--color-status-failed-chart-fill)",
+    broken: "var(--color-status-broken-chart-fill)",
+    passed: "var(--color-status-passed-chart-fill)",
+    skipped: "var(--color-status-skipped-chart-fill)",
+    unknown: "var(--color-status-unknown-chart-fill)",
 };
 export const resolveCSSVarColor = (value, el = document.documentElement) => {
     if (value.startsWith("var(")) {

package/dist/charts/utils.js

@@ -49,7 +49,11 @@ export const createCoverageDiffTreeMapChartData = (chartId, res) => {
     return createTreeMapChartDataGeneric(() => res[chartId], (value, domain = chartColorDomain) => {
         const scaledRgb = scaleLinear()
             .domain(domain)
-            .range([resolveCSSVarColor(statusColors.failed), "#fff", resolveCSSVarColor(statusColors.passed)])
+            .range([
+            resolveCSSVarColor(statusColors.failed),
+            resolveCSSVarColor("var(--color-dashboard-neutral)"),
+            resolveCSSVarColor(statusColors.passed),
+        ])
             .interpolate(interpolateRgb)
             .clamp(true);
         return scaledRgb(value);

package/dist/hotkeys/createHotkeyController.d.ts

@@ -0,0 +1,12 @@
+import type { HotkeyBinding, HotkeyScope } from "./types.js";
+export type HotkeyControllerOptions = {
+    getActiveScope: () => HotkeyScope;
+    getEnabled: () => boolean;
+    isScopeActive?: (scope: HotkeyScope) => boolean;
+    bindings: HotkeyBinding[];
+    shouldSuppressDefault?: (event: KeyboardEvent, activeScope: HotkeyScope) => boolean;
+};
+export declare const createHotkeyController: (options: HotkeyControllerOptions) => {
+    attach: () => void;
+    detach: () => void;
+};

package/dist/hotkeys/createHotkeyController.js

@@ -0,0 +1,74 @@
+import { isEditableTarget } from "./isEditableTarget.js";
+import { matchHotkey } from "./matchHotkey.js";
+const getBindingScopes = (binding) => Array.isArray(binding.scope) ? [...binding.scope] : [binding.scope];
+const bindingMatchesScope = (binding, activeScope) => {
+    const scopes = getBindingScopes(binding);
+    if (scopes.includes("global")) {
+        return true;
+    }
+    return scopes.includes(activeScope);
+};
+const runBinding = (event, binding, activeScope) => {
+    if (!bindingMatchesScope(binding, activeScope)) {
+        return false;
+    }
+    if (!matchHotkey(event, binding)) {
+        return false;
+    }
+    if (binding.preventDefault !== false) {
+        event.preventDefault();
+    }
+    if (binding.stopPropagation) {
+        event.stopPropagation();
+    }
+    binding.handler(event);
+    return true;
+};
+export const createHotkeyController = (options) => {
+    const handleKeyDown = (event) => {
+        if (!options.getEnabled()) {
+            return;
+        }
+        if (event.isComposing) {
+            return;
+        }
+        const activeScope = options.getActiveScope();
+        if (isEditableTarget(event.target)) {
+            const editableBindings = options.bindings.filter((binding) => binding.allowInEditable);
+            const scopedEditable = editableBindings.filter((binding) => {
+                const scopes = getBindingScopes(binding);
+                return scopes.includes(activeScope) && !scopes.every((scope) => scope === "global");
+            });
+            const globalEditable = editableBindings.filter((binding) => getBindingScopes(binding).includes("global"));
+            for (const binding of [...scopedEditable, ...globalEditable]) {
+                if (runBinding(event, binding, activeScope)) {
+                    return;
+                }
+            }
+            return;
+        }
+        const scopeActive = options.isScopeActive?.(activeScope) ?? true;
+        if (options.shouldSuppressDefault?.(event, activeScope) && scopeActive) {
+            event.preventDefault();
+        }
+        const scopedBindings = scopeActive
+            ? options.bindings.filter((binding) => {
+                const scopes = getBindingScopes(binding);
+                return scopes.includes(activeScope) && !scopes.every((scope) => scope === "global");
+            })
+            : [];
+        const globalBindings = options.bindings.filter((binding) => getBindingScopes(binding).includes("global"));
+        for (const binding of [...scopedBindings, ...globalBindings]) {
+            if (runBinding(event, binding, activeScope)) {
+                return;
+            }
+        }
+    };
+    const attach = () => {
+        document.addEventListener("keydown", handleKeyDown, { capture: true });
+    };
+    const detach = () => {
+        document.removeEventListener("keydown", handleKeyDown, { capture: true });
+    };
+    return { attach, detach };
+};

package/dist/hotkeys/formatHotkey.d.ts

@@ -0,0 +1,2 @@
+import type { HotkeyBinding } from "./types.js";
+export declare const formatHotkey: (binding: Pick<HotkeyBinding, "key" | "modifiers">) => string;

package/dist/hotkeys/formatHotkey.js

@@ -0,0 +1,31 @@
+const isMacOs = () => {
+    if (typeof document === "undefined") {
+        return false;
+    }
+    return document.documentElement.getAttribute("data-os") === "mac";
+};
+const formatModifier = (key, macSymbol, winLabel) => {
+    return isMacOs() ? macSymbol : winLabel;
+};
+export const formatHotkey = (binding) => {
+    const modifiers = binding.modifiers ?? {};
+    const parts = [];
+    if (modifiers.meta) {
+        parts.push(formatModifier("meta", "⌘", "Ctrl"));
+    }
+    if (modifiers.ctrlOrMeta) {
+        parts.push(formatModifier("ctrlOrMeta", "⌘", "Ctrl"));
+    }
+    else if (modifiers.ctrl) {
+        parts.push(formatModifier("ctrl", "⌃", "Ctrl"));
+    }
+    if (modifiers.alt) {
+        parts.push(formatModifier("alt", "⌥", "Alt"));
+    }
+    if (modifiers.shift) {
+        parts.push(formatModifier("shift", "⇧", "Shift"));
+    }
+    const keyLabel = binding.key === " " ? "Space" : binding.key.length === 1 ? binding.key.toUpperCase() : binding.key;
+    parts.push(keyLabel);
+    return parts.join(isMacOs() ? "" : " + ");
+};

package/dist/hotkeys/index.d.ts

@@ -0,0 +1,5 @@
+export * from "./types.js";
+export * from "./isEditableTarget.js";
+export * from "./matchHotkey.js";
+export * from "./formatHotkey.js";
+export * from "./createHotkeyController.js";

package/dist/hotkeys/index.js

@@ -0,0 +1,5 @@
+export * from "./types.js";
+export * from "./isEditableTarget.js";
+export * from "./matchHotkey.js";
+export * from "./formatHotkey.js";
+export * from "./createHotkeyController.js";

package/dist/hotkeys/isEditableTarget.d.ts

@@ -0,0 +1 @@
+export declare const isEditableTarget: (target: EventTarget | null) => boolean;

package/dist/hotkeys/isEditableTarget.js

@@ -0,0 +1,10 @@
+const EDITABLE_SELECTOR = "input, textarea, select, [contenteditable=''], [contenteditable='true']";
+export const isEditableTarget = (target) => {
+    if (!(target instanceof HTMLElement)) {
+        return false;
+    }
+    if (target.isContentEditable) {
+        return true;
+    }
+    return Boolean(target.closest(EDITABLE_SELECTOR));
+};

package/dist/hotkeys/matchHotkey.d.ts

@@ -0,0 +1,2 @@
+import type { HotkeyBinding } from "./types.js";
+export declare const matchHotkey: (event: KeyboardEvent, binding: HotkeyBinding) => boolean;

package/dist/hotkeys/matchHotkey.js

@@ -0,0 +1,41 @@
+const normalizeKey = (key) => {
+    if (key === " ") {
+        return " ";
+    }
+    if (key.length === 1) {
+        return key.toLowerCase();
+    }
+    return key;
+};
+const eventKey = (event) => normalizeKey(event.key);
+export const matchHotkey = (event, binding) => {
+    const modifiers = binding.modifiers ?? {};
+    const expectsCtrl = Boolean(modifiers.ctrl);
+    const expectsShift = Boolean(modifiers.shift);
+    const expectsAlt = Boolean(modifiers.alt);
+    const expectsMeta = Boolean(modifiers.meta);
+    const expectsCtrlOrMeta = Boolean(modifiers.ctrlOrMeta);
+    if (expectsCtrlOrMeta) {
+        if (!event.ctrlKey && !event.metaKey) {
+            return false;
+        }
+    }
+    else {
+        if (event.ctrlKey !== expectsCtrl) {
+            return false;
+        }
+        if (event.metaKey !== expectsMeta) {
+            return false;
+        }
+    }
+    if (event.shiftKey !== expectsShift) {
+        return false;
+    }
+    if (event.altKey !== expectsAlt) {
+        return false;
+    }
+    if (binding.code) {
+        return event.code === binding.code;
+    }
+    return eventKey(event) === normalizeKey(binding.key);
+};

package/dist/hotkeys/types.d.ts

@@ -0,0 +1,19 @@
+export type HotkeyScope = "global" | "tree" | "testResult";
+export type HotkeyModifiers = {
+    ctrl?: boolean;
+    shift?: boolean;
+    alt?: boolean;
+    meta?: boolean;
+    ctrlOrMeta?: boolean;
+};
+export type HotkeyBinding = {
+    id: string;
+    scope: HotkeyScope | readonly HotkeyScope[];
+    key: string;
+    code?: string;
+    modifiers?: HotkeyModifiers;
+    handler: (event: KeyboardEvent) => void;
+    preventDefault?: boolean;
+    stopPropagation?: boolean;
+    allowInEditable?: boolean;
+};

package/dist/hotkeys/types.js

@@ -0,0 +1 @@
+export {};

package/dist/index.d.ts

@@ -13,4 +13,8 @@ export * from "./stores/loadableStore/index.js";
 export * from "./stores/persister/index.js";
 export * from "./utils.js";
 export * from "./prose.js";
+export * from "./linkify.js";
 export * from "./treeSubtreeToggle.js";
+export * from "./subtreeExpansion.js";
+export * from "./hotkeys/index.js";
+export * from "./treeNavigation/index.js";

package/dist/index.js

@@ -13,4 +13,8 @@ export * from "./stores/loadableStore/index.js";
 export * from "./stores/persister/index.js";
 export * from "./utils.js";
 export * from "./prose.js";
+export * from "./linkify.js";
 export * from "./treeSubtreeToggle.js";
+export * from "./subtreeExpansion.js";
+export * from "./hotkeys/index.js";
+export * from "./treeNavigation/index.js";

package/dist/linkify.d.ts

@@ -0,0 +1,10 @@
+export declare const URL_IN_TEXT_RE: RegExp;
+export type TextSegment = {
+    type: "text";
+    value: string;
+} | {
+    type: "url";
+    value: string;
+};
+export declare const splitTextWithUrls: (text: string) => TextSegment[];
+export declare const textContainsUrl: (text: string) => boolean;

package/dist/linkify.js

@@ -0,0 +1,32 @@
+export const URL_IN_TEXT_RE = /((?:(?:https?:\/\/|ftp:\/\/|mailto:)|www\.)\S+?)(\s|"|'|\)|]|}|&#62|$)/g;
+export const splitTextWithUrls = (text) => {
+    if (!text) {
+        return [{ type: "text", value: "" }];
+    }
+    const segments = [];
+    const re = new RegExp(URL_IN_TEXT_RE.source, URL_IN_TEXT_RE.flags);
+    let lastIndex = 0;
+    let match;
+    while ((match = re.exec(text)) !== null) {
+        const matchIndex = match.index;
+        const url = match[1];
+        const terminator = match[2] ?? "";
+        if (matchIndex > lastIndex) {
+            segments.push({ type: "text", value: text.slice(lastIndex, matchIndex) });
+        }
+        segments.push({ type: "url", value: url });
+        lastIndex = matchIndex + url.length + terminator.length;
+    }
+    if (lastIndex < text.length) {
+        segments.push({ type: "text", value: text.slice(lastIndex) });
+    }
+    if (segments.length === 0) {
+        return [{ type: "text", value: text }];
+    }
+    return segments;
+};
+export const textContainsUrl = (text) => {
+    const re = new RegExp(URL_IN_TEXT_RE.source, URL_IN_TEXT_RE.flags);
+    re.lastIndex = 0;
+    return re.test(text);
+};

package/dist/prose.d.ts

@@ -1,2 +1,2 @@
-export declare const proseStyles = "\nhtml, body {\n  margin: 0;\n  padding: 0;\n  overflow-x: hidden;\n  overflow-y: hidden;\n  background: var(--bg-base-primary);\n}\n\nbody {\n  color: var(--on-text-primary);\n  font-family: var(--font-family);\n  font-size: var(--font-size-m);\n  line-height: var(--line-height-m);\n}\n\np {\n  margin-top: 0;\n  margin-bottom: 10px;\n}\n\np:last-child {\n  margin-bottom: 0;\n}\n\nh1,\nh2,\nh3,\nh4,\nh5,\nh6 {\n  font-weight: var(--font-weight-bold) !important;\n  line-height: var(--line-height-l) !important;\n  margin: 16px 0 10px;\n}\n\nh1:first-child,\nh2:first-child,\nh3:first-child,\nh4:first-child,\nh5:first-child,\nh6:first-child {\n  margin-top: 0;\n}\n\nh1 {\n  font-size: var(--font-size-xl) !important;\n}\n\nh2,\nh3 {\n  font-size: var(--font-size-l) !important;\n}\n\nh4 {\n  font-size: var(--font-size-m) !important;\n}\n\nh5,\nh6 {\n  font-size: var(--font-size-s) !important;\n}\n\nh6 {\n  color: var(--on-text-secondary);\n}\n\nstrong,\nb {\n  font-weight: var(--font-weight-bold) !important;\n}\n\nem,\ni {\n  font-style: italic !important;\n}\n\ndel,\ns {\n  text-decoration: line-through;\n}\n\na {\n  color: var(--on-text-primary);\n  text-decoration: underline;\n}\n\na:hover {\n  color: var(--on-text-secondary);\n}\n\ncode {\n  font-family: var(--font-family-mono) !important;\n  font-size: var(--font-size-m-code) !important;\n  padding: 0.2em 0.4em;\n  background: var(--bg-control-secondary);\n  border-radius: 4px;\n}\n\npre {\n  font-family: var(--font-family-mono) !important;\n  font-size: var(--font-size-s) !important;\n  line-height: 1.45 !important;\n  padding: 16px;\n  overflow: auto;\n  background: var(--bg-control-secondary);\n  border-radius: 6px;\n  margin-bottom: 16px;\n}\n\npre code {\n  padding: 0;\n  background: transparent;\n  font-size: inherit !important;\n  border-radius: 0;\n}\n\nblockquote {\n  padding: 0 1em;\n  border-left: 0.25em solid var(--on-border-primary);\n  color: var(--on-text-secondary);\n  margin-bottom: 16px;\n}\n\nul,\nol {\n  padding-left: 2em;\n  margin-bottom: 10px;\n}\n\nul {\n  list-style: disc !important;\n}\n\nol {\n  list-style: decimal !important;\n}\n\nli + li {\n  margin-top: 0.25em;\n}\n\nhr {\n  height: 0.25em;\n  padding: 0;\n  margin: 24px 0;\n  background-color: var(--on-border-primary);\n  border: 0 !important;\n}\n\ntable {\n  border-spacing: 0;\n  border-collapse: collapse;\n  margin-bottom: 16px;\n  display: block;\n  width: max-content;\n  max-width: 100%;\n  overflow-x: auto;\n  overflow-y: hidden;\n  transform: translateZ(0);\n  contain: layout paint;\n}\n\nth,\ntd {\n  padding: 6px 13px;\n  border: 1px solid var(--on-border-primary) !important;\n  white-space: nowrap;\n}\n\nth {\n  font-weight: var(--font-weight-bold) !important;\n  position: sticky;\n  top: 0;\n  z-index: 1;\n  background: var(--bg-base-primary);\n}\n\ntr:nth-child(2n) {\n  background: var(--bg-control-secondary);\n}\n\nimg {\n  max-width: 100% !important;\n  height: auto !important;\n  display: inline-block !important;\n  vertical-align: middle !important;\n}\n\nabbr,\nabbr[title] {\n  text-decoration: underline dotted;\n  cursor: help;\n  border-bottom: none;\n}\n\nkbd {\n  display: inline-block;\n  padding: 3px 5px;\n  font-family: var(--font-family-mono) !important;\n  font-size: 11px;\n  line-height: 10px;\n  color: var(--on-text-primary);\n  vertical-align: middle;\n  background-color: var(--bg-control-secondary);\n  border: solid 1px var(--on-border-medium);\n  border-bottom-color: var(--on-border-medium);\n  border-radius: 6px;\n  box-shadow: inset 0 -1px 0 var(--on-border-medium);\n}\n\nsamp {\n  font-family: var(--font-family-mono) !important;\n  font-size: 85% !important;\n}\n\nvar {\n  font-family: var(--font-family-mono) !important;\n  font-style: italic !important;\n  font-weight: var(--font-weight-bold) !important;\n}\n\nmark {\n  background-color: var(--bg-support-aldebaran);\n  color: var(--on-text-primary);\n  padding: 0.1em 0.2em;\n  border-radius: 2px;\n}\n\nsmall {\n  font-size: 85% !important;\n}\n\nsub,\nsup {\n  font-size: 75% !important;\n  line-height: 0 !important;\n  position: relative !important;\n  vertical-align: baseline !important;\n}\n\nsub {\n  bottom: -0.25em !important;\n}\n\nsup {\n  top: -0.5em !important;\n}\n\nins {\n  text-decoration: underline;\n  background-color: var(--bg-support-gliese);\n  color: var(--on-text-primary);\n  text-decoration-color: var(--on-support-gliese);\n}\n\ndfn {\n  font-style: italic !important;\n  font-weight: var(--font-weight-bold) !important;\n}\n\ncite {\n  font-style: italic !important;\n}\n\nq {\n  font-style: italic !important;\n}\n\nq::before {\n  content: open-quote;\n}\n\nq::after {\n  content: close-quote;\n}\n\ntime {\n  font-variant-numeric: tabular-nums;\n}\n\ndl {\n  padding: 0;\n  margin-bottom: 16px;\n}\n\ndt {\n  padding: 0;\n  margin-top: 16px;\n  font-size: 1em;\n  font-style: italic;\n  font-weight: var(--font-weight-bold) !important;\n}\n\ndt:first-child {\n  margin-top: 0;\n}\n\ndd {\n  padding: 0 0 0 16px;\n  margin-left: 0;\n  margin-bottom: 16px;\n}\n\nfigure {\n  margin: 16px 0;\n  display: block;\n}\n\nfigcaption {\n  margin-top: 8px;\n  font-size: var(--font-size-s) !important;\n  color: var(--on-text-secondary);\n  font-style: italic;\n  text-align: center;\n}\n\ndetails {\n  display: block;\n  margin-bottom: 16px;\n}\n\nsummary {\n  display: list-item;\n  cursor: pointer;\n  font-weight: var(--font-weight-bold) !important;\n  margin-bottom: 8px;\n}\n\nsummary:hover {\n  color: var(--on-text-secondary);\n}\n\nsummary::marker {\n  color: var(--on-text-secondary);\n}\n\ndetails[open] summary {\n  margin-bottom: 16px;\n}\n\narticle,\nsection,\naside,\nnav {\n  display: block;\n  margin-bottom: 16px;\n}\n\nheader,\nfooter {\n  display: block;\n  margin-bottom: 16px;\n}\n\naddress {\n  display: block;\n  font-style: italic;\n  margin-bottom: 16px;\n}\n";
+export declare const proseStyles = "\nhtml, body {\n  margin: 0;\n  padding: 0;\n  overflow-x: hidden;\n  overflow-y: hidden;\n  background: var(--color-bg-primary);\n}\n\nbody {\n  color: var(--color-text-primary);\n  font-family: var(--font-family);\n  font-size: var(--font-size-m);\n  line-height: var(--line-height-m);\n}\n\np {\n  margin-top: 0;\n  margin-bottom: 10px;\n}\n\np:last-child {\n  margin-bottom: 0;\n}\n\nh1,\nh2,\nh3,\nh4,\nh5,\nh6 {\n  font-weight: var(--font-weight-bold) !important;\n  line-height: var(--line-height-l) !important;\n  margin: 16px 0 10px;\n}\n\nh1:first-child,\nh2:first-child,\nh3:first-child,\nh4:first-child,\nh5:first-child,\nh6:first-child {\n  margin-top: 0;\n}\n\nh1 {\n  font-size: var(--font-size-xl) !important;\n}\n\nh2,\nh3 {\n  font-size: var(--font-size-l) !important;\n}\n\nh4 {\n  font-size: var(--font-size-m) !important;\n}\n\nh5,\nh6 {\n  font-size: var(--font-size-s) !important;\n}\n\nh6 {\n  color: var(--color-text-secondary);\n}\n\nstrong,\nb {\n  font-weight: var(--font-weight-bold) !important;\n}\n\nem,\ni {\n  font-style: italic !important;\n}\n\ndel,\ns {\n  text-decoration: line-through;\n}\n\na {\n  color: var(--color-text-primary);\n  text-decoration: underline;\n}\n\na:hover {\n  color: var(--color-text-secondary);\n}\n\ncode {\n  font-family: var(--font-family-mono) !important;\n  font-size: var(--font-size-m-code) !important;\n  padding: 0.2em 0.4em;\n  background: var(--color-control-bg);\n  border-radius: 4px;\n}\n\npre {\n  font-family: var(--font-family-mono) !important;\n  font-size: var(--font-size-s) !important;\n  line-height: 1.45 !important;\n  padding: 16px;\n  overflow: auto;\n  background: var(--color-control-bg);\n  border-radius: 6px;\n  margin-bottom: 16px;\n}\n\npre code {\n  padding: 0;\n  background: transparent;\n  font-size: inherit !important;\n  border-radius: 0;\n}\n\nblockquote {\n  padding: 0 1em;\n  border-left: 0.25em solid var(--color-border-default);\n  color: var(--color-text-secondary);\n  margin-bottom: 16px;\n}\n\nul,\nol {\n  padding-left: 2em;\n  margin-bottom: 10px;\n}\n\nul {\n  list-style: disc !important;\n}\n\nol {\n  list-style: decimal !important;\n}\n\nli + li {\n  margin-top: 0.25em;\n}\n\nhr {\n  height: 0.25em;\n  padding: 0;\n  margin: 24px 0;\n  background-color: var(--color-border-default);\n  border: 0 !important;\n}\n\ntable {\n  border-spacing: 0;\n  border-collapse: collapse;\n  margin-bottom: 16px;\n  display: block;\n  width: max-content;\n  max-width: 100%;\n  overflow-x: auto;\n  overflow-y: hidden;\n  transform: translateZ(0);\n  contain: layout paint;\n}\n\nth,\ntd {\n  padding: 6px 13px;\n  border: 1px solid var(--color-border-default) !important;\n  white-space: nowrap;\n}\n\nth {\n  font-weight: var(--font-weight-bold) !important;\n  position: sticky;\n  top: 0;\n  z-index: 1;\n  background: var(--color-bg-primary);\n}\n\ntr:nth-child(2n) {\n  background: var(--color-control-bg);\n}\n\nimg {\n  max-width: 100% !important;\n  height: auto !important;\n  display: inline-block !important;\n  vertical-align: middle !important;\n}\n\nabbr,\nabbr[title] {\n  text-decoration: underline dotted;\n  cursor: help;\n  border-bottom: none;\n}\n\nkbd {\n  display: inline-block;\n  padding: 3px 5px;\n  font-family: var(--font-family-mono) !important;\n  font-size: 11px;\n  line-height: 10px;\n  color: var(--color-text-primary);\n  vertical-align: middle;\n  background-color: var(--color-control-bg);\n  border: solid 1px var(--color-border-medium);\n  border-bottom-color: var(--color-border-medium);\n  border-radius: 6px;\n  box-shadow: inset 0 -1px 0 var(--color-border-medium);\n}\n\nsamp {\n  font-family: var(--font-family-mono) !important;\n  font-size: 85% !important;\n}\n\nvar {\n  font-family: var(--font-family-mono) !important;\n  font-style: italic !important;\n  font-weight: var(--font-weight-bold) !important;\n}\n\nmark {\n  background-color: var(--color-intent-primary-bg);\n  color: var(--color-intent-primary-on-bg);\n  padding: 0.1em 0.2em;\n  border-radius: 2px;\n}\n\nsmall {\n  font-size: 85% !important;\n}\n\nsub,\nsup {\n  font-size: 75% !important;\n  line-height: 0 !important;\n  position: relative !important;\n  vertical-align: baseline !important;\n}\n\nsub {\n  bottom: -0.25em !important;\n}\n\nsup {\n  top: -0.5em !important;\n}\n\nins {\n  text-decoration: underline;\n  background-color: var(--color-intent-success-bg-subtle);\n  color: var(--color-text-primary);\n  text-decoration-color: var(--color-intent-success-text);\n}\n\ndfn {\n  font-style: italic !important;\n  font-weight: var(--font-weight-bold) !important;\n}\n\ncite {\n  font-style: italic !important;\n}\n\nq {\n  font-style: italic !important;\n}\n\nq::before {\n  content: open-quote;\n}\n\nq::after {\n  content: close-quote;\n}\n\ntime {\n  font-variant-numeric: tabular-nums;\n}\n\ndl {\n  padding: 0;\n  margin-bottom: 16px;\n}\n\ndt {\n  padding: 0;\n  margin-top: 16px;\n  font-size: 1em;\n  font-style: italic;\n  font-weight: var(--font-weight-bold) !important;\n}\n\ndt:first-child {\n  margin-top: 0;\n}\n\ndd {\n  padding: 0 0 0 16px;\n  margin-left: 0;\n  margin-bottom: 16px;\n}\n\nfigure {\n  margin: 16px 0;\n  display: block;\n}\n\nfigcaption {\n  margin-top: 8px;\n  font-size: var(--font-size-s) !important;\n  color: var(--color-text-secondary);\n  font-style: italic;\n  text-align: center;\n}\n\ndetails {\n  display: block;\n  margin-bottom: 16px;\n}\n\nsummary {\n  display: list-item;\n  cursor: pointer;\n  font-weight: var(--font-weight-bold) !important;\n  margin-bottom: 8px;\n}\n\nsummary:hover {\n  color: var(--color-text-secondary);\n}\n\nsummary::marker {\n  color: var(--color-text-secondary);\n}\n\ndetails[open] summary {\n  margin-bottom: 16px;\n}\n\narticle,\nsection,\naside,\nnav {\n  display: block;\n  margin-bottom: 16px;\n}\n\nheader,\nfooter {\n  display: block;\n  margin-bottom: 16px;\n}\n\naddress {\n  display: block;\n  font-style: italic;\n  margin-bottom: 16px;\n}\n";
 export declare const resolveCssVarDeclarations: (cssText: string) => string;

package/dist/prose.js

@@ -4,11 +4,11 @@ html, body {
   padding: 0;
   overflow-x: hidden;
   overflow-y: hidden;
-  background: var(--bg-base-primary);
+  background: var(--color-bg-primary);
 }
 
 body {
-  color: var(--on-text-primary);
+  color: var(--color-text-primary);
   font-family: var(--font-family);
   font-size: var(--font-size-m);
   line-height: var(--line-height-m);
@@ -62,7 +62,7 @@ h6 {
 }
 
 h6 {
-  color: var(--on-text-secondary);
+  color: var(--color-text-secondary);
 }
 
 strong,
@@ -81,19 +81,19 @@ s {
 }
 
 a {
-  color: var(--on-text-primary);
+  color: var(--color-text-primary);
   text-decoration: underline;
 }
 
 a:hover {
-  color: var(--on-text-secondary);
+  color: var(--color-text-secondary);
 }
 
 code {
   font-family: var(--font-family-mono) !important;
   font-size: var(--font-size-m-code) !important;
   padding: 0.2em 0.4em;
-  background: var(--bg-control-secondary);
+  background: var(--color-control-bg);
   border-radius: 4px;
 }
 
@@ -103,7 +103,7 @@ pre {
   line-height: 1.45 !important;
   padding: 16px;
   overflow: auto;
-  background: var(--bg-control-secondary);
+  background: var(--color-control-bg);
   border-radius: 6px;
   margin-bottom: 16px;
 }
@@ -117,8 +117,8 @@ pre code {
 
 blockquote {
   padding: 0 1em;
-  border-left: 0.25em solid var(--on-border-primary);
-  color: var(--on-text-secondary);
+  border-left: 0.25em solid var(--color-border-default);
+  color: var(--color-text-secondary);
   margin-bottom: 16px;
 }
 
@@ -144,7 +144,7 @@ hr {
   height: 0.25em;
   padding: 0;
   margin: 24px 0;
-  background-color: var(--on-border-primary);
+  background-color: var(--color-border-default);
   border: 0 !important;
 }
 
@@ -164,7 +164,7 @@ table {
 th,
 td {
   padding: 6px 13px;
-  border: 1px solid var(--on-border-primary) !important;
+  border: 1px solid var(--color-border-default) !important;
   white-space: nowrap;
 }
 
@@ -173,11 +173,11 @@ th {
   position: sticky;
   top: 0;
   z-index: 1;
-  background: var(--bg-base-primary);
+  background: var(--color-bg-primary);
 }
 
 tr:nth-child(2n) {
-  background: var(--bg-control-secondary);
+  background: var(--color-control-bg);
 }
 
 img {
@@ -200,13 +200,13 @@ kbd {
   font-family: var(--font-family-mono) !important;
   font-size: 11px;
   line-height: 10px;
-  color: var(--on-text-primary);
+  color: var(--color-text-primary);
   vertical-align: middle;
-  background-color: var(--bg-control-secondary);
-  border: solid 1px var(--on-border-medium);
-  border-bottom-color: var(--on-border-medium);
+  background-color: var(--color-control-bg);
+  border: solid 1px var(--color-border-medium);
+  border-bottom-color: var(--color-border-medium);
   border-radius: 6px;
-  box-shadow: inset 0 -1px 0 var(--on-border-medium);
+  box-shadow: inset 0 -1px 0 var(--color-border-medium);
 }
 
 samp {
@@ -221,8 +221,8 @@ var {
 }
 
 mark {
-  background-color: var(--bg-support-aldebaran);
-  color: var(--on-text-primary);
+  background-color: var(--color-intent-primary-bg);
+  color: var(--color-intent-primary-on-bg);
   padding: 0.1em 0.2em;
   border-radius: 2px;
 }
@@ -249,9 +249,9 @@ sup {
 
 ins {
   text-decoration: underline;
-  background-color: var(--bg-support-gliese);
-  color: var(--on-text-primary);
-  text-decoration-color: var(--on-support-gliese);
+  background-color: var(--color-intent-success-bg-subtle);
+  color: var(--color-text-primary);
+  text-decoration-color: var(--color-intent-success-text);
 }
 
 dfn {
@@ -310,7 +310,7 @@ figure {
 figcaption {
   margin-top: 8px;
   font-size: var(--font-size-s) !important;
-  color: var(--on-text-secondary);
+  color: var(--color-text-secondary);
   font-style: italic;
   text-align: center;
 }
@@ -328,11 +328,11 @@ summary {
 }
 
 summary:hover {
-  color: var(--on-text-secondary);
+  color: var(--color-text-secondary);
 }
 
 summary::marker {
-  color: var(--on-text-secondary);
+  color: var(--color-text-secondary);
 }
 
 details[open] summary {

package/dist/subtreeExpansion.d.ts

@@ -0,0 +1,15 @@
+import type { Statistic } from "@allurereport/core-api";
+import type { SubtreeNodeState, SubtreeToggleState } from "./treeSubtreeToggle.js";
+export type ExpandableTreeNode = {
+    nodeId: string;
+    statistic?: Statistic;
+    trees: ExpandableTreeNode[];
+    leaves: unknown[];
+};
+export declare const hasExpandableTreeChildren: (tree: ExpandableTreeNode) => boolean;
+export declare const collectExpandableSubtreeNodes: (tree: ExpandableTreeNode) => SubtreeNodeState[];
+export declare const applySubtreeToggleState: (expandableSubtreeNodes: SubtreeNodeState[], state: SubtreeToggleState, options: {
+    toScopedId: (nodeId: string) => string;
+    isOpened: (scopedId: string, openedByDefault: boolean) => boolean;
+    setOpened: (scopedId: string, shouldOpen: boolean, openedByDefault: boolean) => void;
+}) => void;

package/dist/subtreeExpansion.js

@@ -0,0 +1,30 @@
+const isFailedOrBrokenNode = (statistic) => statistic === undefined || Boolean(statistic?.failed || statistic?.broken);
+const getDefaultOpenedState = (statistic, root = false) => root || isFailedOrBrokenNode(statistic);
+export const hasExpandableTreeChildren = (tree) => tree.trees.length > 0 || tree.leaves.length > 0;
+export const collectExpandableSubtreeNodes = (tree) => {
+    const nodes = [];
+    const stack = [{ tree, isRoot: true }];
+    while (stack.length > 0) {
+        const current = stack.pop();
+        if (!current) {
+            continue;
+        }
+        nodes.push({
+            id: current.tree.nodeId,
+            openedByDefault: getDefaultOpenedState(current.tree.statistic),
+            isRoot: current.isRoot,
+        });
+        current.tree.trees.forEach((nestedSubtree) => stack.push({ tree: nestedSubtree, isRoot: false }));
+    }
+    return nodes;
+};
+export const applySubtreeToggleState = (expandableSubtreeNodes, state, options) => {
+    expandableSubtreeNodes.forEach((node) => {
+        const shouldOpenSubtree = state === "all" ? true : state === "first" ? node.isRoot : false;
+        const scopedId = options.toScopedId(node.id);
+        const currentlyOpened = options.isOpened(scopedId, node.openedByDefault);
+        if (currentlyOpened !== shouldOpenSubtree) {
+            options.setOpened(scopedId, shouldOpenSubtree, node.openedByDefault);
+        }
+    });
+};

package/dist/treeNavigation/descendants.d.ts

@@ -0,0 +1,3 @@
+import type { FlatTreeNode } from "./types.js";
+export declare const getDescendantNodes: (flatList: FlatTreeNode[], nodeId: string) => FlatTreeNode[];
+export declare const getExpandableDescendants: (flatList: FlatTreeNode[], nodeId: string) => FlatTreeNode[];

package/dist/treeNavigation/descendants.js

@@ -0,0 +1,17 @@
+export const getDescendantNodes = (flatList, nodeId) => {
+    const index = flatList.findIndex((node) => node.id === nodeId);
+    if (index < 0) {
+        return [];
+    }
+    const parentDepth = flatList[index].depth;
+    const descendants = [];
+    for (let i = index + 1; i < flatList.length; i++) {
+        const node = flatList[i];
+        if (node.depth <= parentDepth) {
+            break;
+        }
+        descendants.push(node);
+    }
+    return descendants;
+};
+export const getExpandableDescendants = (flatList, nodeId) => getDescendantNodes(flatList, nodeId).filter((node) => node.kind === "group" || node.kind === "env");

package/dist/treeNavigation/flattenVisibleTree.d.ts

@@ -0,0 +1,2 @@
+import type { FlatTreeNode, FlattenVisibleTreeOptions } from "./types.js";
+export declare const flattenVisibleTree: (options: FlattenVisibleTreeOptions) => FlatTreeNode[];

package/dist/treeNavigation/flattenVisibleTree.js

@@ -0,0 +1,104 @@
+const isFailedOrBrokenNode = (statistic) => statistic === undefined || Boolean(statistic?.failed || statistic?.broken);
+const getDefaultOpenedState = (statistic, root = false) => root || isFailedOrBrokenNode(statistic);
+const isNodeOpened = (nodeId, collapsedTrees, defaultOpened, idPrefix) => {
+    const collapseKey = toFocusId(nodeId, idPrefix);
+    return collapsedTrees.has(collapseKey) ? !defaultOpened : defaultOpened;
+};
+const hasTreeChildren = (tree) => tree.trees.length > 0 || tree.leaves.length > 0;
+const toFocusId = (nodeId, idPrefix) => (idPrefix ? `${idPrefix}${nodeId}` : nodeId);
+const resolveGroupOpened = (tree, collapsedTrees, options) => {
+    const defaultOpened = getDefaultOpenedState(tree.statistic, Boolean(options.root));
+    const scopedId = toFocusId(tree.nodeId, options.idPrefix);
+    if (options.isGroupOpened) {
+        return options.isGroupOpened(scopedId, defaultOpened);
+    }
+    return isNodeOpened(tree.nodeId, collapsedTrees, defaultOpened, options.idPrefix);
+};
+const flattenTreeNode = (tree, collapsedTrees, depth, options) => {
+    const result = [];
+    const { idPrefix } = options;
+    const defaultOpened = getDefaultOpenedState(tree.statistic, Boolean(options.root));
+    const isOpened = resolveGroupOpened(tree, collapsedTrees, options);
+    const hasChildren = hasTreeChildren(tree);
+    const showHeader = Boolean(tree.name) && hasChildren;
+    const groupFocusId = toFocusId(tree.nodeId, idPrefix);
+    if (showHeader) {
+        result.push({
+            kind: "group",
+            id: groupFocusId,
+            nodeId: tree.nodeId,
+            depth,
+            parentId: options.parentId,
+            hasChildren: true,
+            isExpanded: isOpened,
+            openedByDefault: defaultOpened,
+        });
+    }
+    if (!hasChildren) {
+        return result;
+    }
+    const childDepth = showHeader ? depth + 1 : depth;
+    const canShowChildren = showHeader ? isOpened : options.root ? isOpened : true;
+    const parentFocusId = showHeader ? groupFocusId : options.parentId;
+    if (canShowChildren) {
+        for (const subTree of tree.trees) {
+            result.push(...flattenTreeNode(subTree, collapsedTrees, childDepth, {
+                parentId: parentFocusId,
+                idPrefix,
+                isGroupOpened: options.isGroupOpened,
+            }));
+        }
+        for (const leaf of tree.leaves) {
+            result.push({
+                kind: "leaf",
+                id: toFocusId(leaf.nodeId, idPrefix),
+                testResultId: leaf.nodeId,
+                depth: childDepth,
+                parentId: parentFocusId,
+            });
+        }
+    }
+    return result;
+};
+const flattenEnvSection = (section, collapsedTrees, isGroupOpened) => {
+    const envFocusId = `env:${section.id}`;
+    const result = [
+        {
+            kind: "env",
+            id: envFocusId,
+            nodeId: section.id,
+            depth: 0,
+            hasChildren: true,
+            isExpanded: section.opened,
+        },
+    ];
+    if (section.opened) {
+        result.push(...flattenTreeNode(section.tree, collapsedTrees, 1, {
+            root: true,
+            parentId: envFocusId,
+            idPrefix: `${section.id}:`,
+            isGroupOpened,
+        }));
+    }
+    return result;
+};
+export const flattenVisibleTree = (options) => {
+    const { collapsedTrees, isGroupOpened, tree, rootStatistic, isRoot, envSections } = options;
+    if (envSections?.length) {
+        return envSections.flatMap((section) => {
+            if ((section.statistic?.total ?? 0) === 0) {
+                return [];
+            }
+            return flattenEnvSection(section, collapsedTrees, isGroupOpened);
+        });
+    }
+    if (!tree) {
+        return [];
+    }
+    return flattenTreeNode(tree, collapsedTrees, 0, {
+        root: isRoot ?? true,
+        parentId: undefined,
+        isGroupOpened,
+        ...(rootStatistic ? { root: isRoot ?? true } : {}),
+    });
+};

package/dist/treeNavigation/index.d.ts

@@ -0,0 +1,5 @@
+export * from "./types.js";
+export * from "./flattenVisibleTree.js";
+export * from "./moveFocus.js";
+export * from "./descendants.js";
+export * from "./scrollTreeFocus.js";

package/dist/treeNavigation/index.js

@@ -0,0 +1,5 @@
+export * from "./types.js";
+export * from "./flattenVisibleTree.js";
+export * from "./moveFocus.js";
+export * from "./descendants.js";
+export * from "./scrollTreeFocus.js";

package/dist/treeNavigation/moveFocus.d.ts

@@ -0,0 +1,2 @@
+import type { FlatTreeNode, MoveDirection, MoveFocusResult } from "./types.js";
+export declare const moveFocus: (flatList: FlatTreeNode[], currentId: string | undefined, direction: MoveDirection) => MoveFocusResult;

package/dist/treeNavigation/moveFocus.js

@@ -0,0 +1,110 @@
+const findIndex = (flatList, currentId) => {
+    if (!currentId) {
+        return -1;
+    }
+    return flatList.findIndex((node) => node.id === currentId);
+};
+const findParent = (flatList, node) => {
+    if (!node.parentId) {
+        return undefined;
+    }
+    return flatList.find((candidate) => candidate.id === node.parentId || candidate.nodeId === node.parentId);
+};
+export const moveFocus = (flatList, currentId, direction) => {
+    if (flatList.length === 0) {
+        return { nextId: undefined };
+    }
+    const currentIndex = findIndex(flatList, currentId);
+    const current = currentIndex >= 0 ? flatList[currentIndex] : undefined;
+    switch (direction) {
+        case "up": {
+            if (currentIndex <= 0) {
+                return { nextId: flatList[0]?.id };
+            }
+            if (!current) {
+                return { nextId: flatList[currentIndex - 1]?.id };
+            }
+            for (let index = currentIndex - 1; index >= 0; index--) {
+                const candidate = flatList[index];
+                if (current.parentId && candidate.id === current.parentId) {
+                    for (let nestedIndex = currentIndex - 1; nestedIndex > index; nestedIndex--) {
+                        const nested = flatList[nestedIndex];
+                        if (nested.depth > candidate.depth) {
+                            return { nextId: nested.id };
+                        }
+                    }
+                    return { nextId: candidate.id };
+                }
+                return { nextId: candidate.id };
+            }
+            return { nextId: flatList[0]?.id };
+        }
+        case "down": {
+            if (currentIndex < 0) {
+                return { nextId: flatList[0]?.id };
+            }
+            if (currentIndex >= flatList.length - 1) {
+                return { nextId: flatList[flatList.length - 1]?.id };
+            }
+            return { nextId: flatList[currentIndex + 1]?.id };
+        }
+        case "home": {
+            return { nextId: flatList[0]?.id };
+        }
+        case "end": {
+            return { nextId: flatList[flatList.length - 1]?.id };
+        }
+        case "firstLeaf": {
+            const firstLeaf = flatList.find((node) => node.kind === "leaf");
+            return { nextId: firstLeaf?.id ?? flatList[0]?.id };
+        }
+        case "lastLeaf": {
+            const leaves = flatList.filter((node) => node.kind === "leaf");
+            const lastLeaf = leaves[leaves.length - 1];
+            return { nextId: lastLeaf?.id ?? flatList[flatList.length - 1]?.id };
+        }
+        case "parent": {
+            if (!current) {
+                return { nextId: flatList[0]?.id };
+            }
+            const parent = findParent(flatList, current);
+            return { nextId: parent?.id ?? current.id };
+        }
+        case "left": {
+            if (!current) {
+                return { nextId: flatList[0]?.id };
+            }
+            if ((current.kind === "group" || current.kind === "env") && current.isExpanded) {
+                return { nextId: current.id, collapse: true };
+            }
+            const parent = findParent(flatList, current);
+            if (parent) {
+                return { nextId: parent.id };
+            }
+            if (currentIndex > 0) {
+                return { nextId: flatList[currentIndex - 1]?.id };
+            }
+            return { nextId: current.id };
+        }
+        case "firstChild":
+        case "right": {
+            if (!current) {
+                return { nextId: flatList[0]?.id };
+            }
+            if ((current.kind === "group" || current.kind === "env") && !current.isExpanded) {
+                return { nextId: current.id, expand: true };
+            }
+            const nextNode = flatList[currentIndex + 1];
+            if (nextNode && nextNode.depth > current.depth) {
+                return { nextId: nextNode.id };
+            }
+            if (direction === "right" && currentIndex < flatList.length - 1) {
+                return { nextId: flatList[currentIndex + 1]?.id };
+            }
+            return { nextId: current.id };
+        }
+        default: {
+            return { nextId: current?.id ?? flatList[0]?.id };
+        }
+    }
+};

package/dist/treeNavigation/scrollTreeFocus.d.ts

@@ -0,0 +1,14 @@
+import type { TreeNavNodeKind } from "./types.js";
+export type ScrollRect = {
+    top: number;
+    bottom: number;
+};
+export declare const computeTreeFocusScrollDelta: (nodeRect: ScrollRect, rootRect: ScrollRect, kind?: TreeNavNodeKind, inset?: number) => number;
+export declare const findFocusScrollRoot: (target: HTMLElement, containerAttribute: string) => HTMLElement | null;
+export declare const scrollTreeFocusIntoView: (target: HTMLElement, scrollRoot: HTMLElement, kind?: TreeNavNodeKind, inset?: number) => void;
+export declare const scrollFocusIntoView: (target: HTMLElement, options?: {
+    containerAttribute?: string;
+    kind?: TreeNavNodeKind;
+    inset?: number;
+}) => void;
+export declare const scrollTreePaneToTop: (anchor?: HTMLElement | null) => void;

package/dist/treeNavigation/scrollTreeFocus.js

@@ -0,0 +1,65 @@
+const isOutOfScrollport = (nodeRect, rootRect, inset) => nodeRect.top < rootRect.top + inset || nodeRect.bottom > rootRect.bottom - inset;
+export const computeTreeFocusScrollDelta = (nodeRect, rootRect, kind, inset = 4) => {
+    const pinToTop = kind === "group" || kind === "env";
+    if (!isOutOfScrollport(nodeRect, rootRect, inset)) {
+        return 0;
+    }
+    if (pinToTop) {
+        return nodeRect.top - rootRect.top - inset;
+    }
+    const nodeCenter = (nodeRect.top + nodeRect.bottom) / 2;
+    const rootCenter = (rootRect.top + rootRect.bottom) / 2;
+    return nodeCenter - rootCenter;
+};
+const isScrollableElement = (element) => {
+    const { overflowY } = getComputedStyle(element);
+    return ((overflowY === "auto" || overflowY === "scroll" || overflowY === "overlay") &&
+        element.scrollHeight > element.clientHeight + 1);
+};
+export const findFocusScrollRoot = (target, containerAttribute) => {
+    let node = target.parentElement;
+    let fallback = null;
+    while (node instanceof HTMLElement) {
+        if (node.hasAttribute(containerAttribute)) {
+            fallback ?? (fallback = node);
+            if (isScrollableElement(node)) {
+                return node;
+            }
+        }
+        node = node.parentElement;
+    }
+    return fallback;
+};
+export const scrollTreeFocusIntoView = (target, scrollRoot, kind, inset = 4) => {
+    const nodeRect = target.getBoundingClientRect();
+    const rootRect = scrollRoot.getBoundingClientRect();
+    const delta = computeTreeFocusScrollDelta(nodeRect, rootRect, kind, inset);
+    if (Math.abs(delta) > 1) {
+        scrollRoot.scrollTop += delta;
+    }
+};
+export const scrollFocusIntoView = (target, options) => {
+    const containerAttribute = options?.containerAttribute ?? "data-tree-scroll-container";
+    const scrollRoot = findFocusScrollRoot(target, containerAttribute);
+    if (scrollRoot) {
+        scrollTreeFocusIntoView(target, scrollRoot, options?.kind, options?.inset);
+        return;
+    }
+    target.scrollIntoView({ block: "center", inline: "nearest" });
+};
+export const scrollTreePaneToTop = (anchor) => {
+    const containerAttribute = "data-tree-scroll-container";
+    if (anchor) {
+        const scrollRoot = findFocusScrollRoot(anchor, containerAttribute);
+        if (scrollRoot) {
+            scrollRoot.scrollTop = 0;
+            return;
+        }
+    }
+    for (const element of Array.from(document.querySelectorAll(`[${containerAttribute}]`))) {
+        if (element instanceof HTMLElement && isScrollableElement(element)) {
+            element.scrollTop = 0;
+            return;
+        }
+    }
+};

package/dist/treeNavigation/types.d.ts

@@ -0,0 +1,42 @@
+import type { Statistic } from "@allurereport/core-api";
+export type TreeNavNodeKind = "env" | "group" | "leaf";
+export type FlatTreeNode = {
+    kind: TreeNavNodeKind;
+    id: string;
+    nodeId?: string;
+    testResultId?: string;
+    depth: number;
+    parentId?: string;
+    hasChildren?: boolean;
+    isExpanded?: boolean;
+    openedByDefault?: boolean;
+};
+export type FlattenTreeInput = {
+    nodeId: string;
+    name?: string;
+    statistic?: Statistic;
+    leaves: Array<{
+        nodeId: string;
+    }>;
+    trees: FlattenTreeInput[];
+};
+export type EnvTreeSection = {
+    id: string;
+    opened: boolean;
+    tree: FlattenTreeInput;
+    statistic?: Statistic;
+};
+export type FlattenVisibleTreeOptions = {
+    collapsedTrees: ReadonlySet<string>;
+    isGroupOpened?: (scopedNodeId: string, openedByDefault: boolean) => boolean;
+    tree?: FlattenTreeInput;
+    rootStatistic?: Statistic;
+    isRoot?: boolean;
+    envSections?: EnvTreeSection[];
+};
+export type MoveDirection = "up" | "down" | "left" | "right" | "parent" | "firstChild" | "home" | "end" | "firstLeaf" | "lastLeaf";
+export type MoveFocusResult = {
+    nextId: string | undefined;
+    collapse?: boolean;
+    expand?: boolean;
+};

package/dist/treeNavigation/types.js

@@ -0,0 +1 @@
+export {};

package/dist/treeSubtreeToggle.d.ts

@@ -14,6 +14,10 @@ export declare const getNextSubtreeToggleState: (payload: {
     isSubtreeExpandedAll: boolean;
     lastSubtreeToggle: SubtreeToggleState | null;
 }) => SubtreeToggleState;
+export declare const resolveNextSubtreeToggleState: (subtreeNodes: SubtreeNodeState[], isNodeOpened: (id: string, openedByDefault: boolean) => boolean, lastSubtreeToggle: SubtreeToggleState | null) => {
+    nextState: SubtreeToggleState;
+    nextLastToggle: SubtreeToggleState | null;
+};
 export declare const getSubtreeToggleIcon: (payload: {
     hasOnlyLeafResults: boolean;
     isSubtreeCollapsedAll: boolean;

package/dist/treeSubtreeToggle.js

@@ -21,6 +21,27 @@ export const getNextSubtreeToggleState = (payload) => {
     }
     return "all";
 };
+export const resolveNextSubtreeToggleState = (subtreeNodes, isNodeOpened, lastSubtreeToggle) => {
+    const root = subtreeNodes.find((node) => node.isRoot);
+    if (!root || subtreeNodes.length === 0) {
+        return { nextState: "first", nextLastToggle: null };
+    }
+    const isSubtreeCollapsedAll = !isNodeOpened(root.id, root.openedByDefault);
+    const isSubtreeFirstLevelOnly = isSubtreeFirstLevelOnlyOpened(root.id, root.openedByDefault, subtreeNodes, isNodeOpened);
+    const subtreeExpandedAll = isSubtreeExpandedAll(subtreeNodes, isNodeOpened);
+    const hasOnlyLeafResults = subtreeNodes.every((node) => node.isRoot);
+    const nextState = getNextSubtreeToggleState({
+        hasOnlyLeafResults,
+        isSubtreeCollapsedAll,
+        isSubtreeFirstLevelOnly,
+        isSubtreeExpandedAll: subtreeExpandedAll,
+        lastSubtreeToggle,
+    });
+    return {
+        nextState,
+        nextLastToggle: nextState !== "first" ? nextState : lastSubtreeToggle,
+    };
+};
 export const getSubtreeToggleIcon = (payload) => {
     const { hasOnlyLeafResults, isSubtreeCollapsedAll, isSubtreeFirstLevelOnly } = payload;
     if (hasOnlyLeafResults) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@allurereport/web-commons",
-  "version": "3.8.2",
+  "version": "3.10.0",
   "description": "Collection of utilities used across the web Allure reports",
   "keywords": [
     "allure",
@@ -26,10 +26,10 @@
     "lint:fix": "oxlint --import-plugin --fix src test features stories"
   },
   "dependencies": {
-    "@allurereport/aql": "3.8.2",
-    "@allurereport/charts-api": "3.8.2",
-    "@allurereport/core-api": "3.8.2",
-    "@allurereport/plugin-api": "3.8.2",
+    "@allurereport/aql": "3.10.0",
+    "@allurereport/charts-api": "3.10.0",
+    "@allurereport/core-api": "3.10.0",
+    "@allurereport/plugin-api": "3.10.0",
     "@preact/signals": "^2.6.1",
     "@preact/signals-core": "^1.12.2",
     "ansi-to-html": "^0.7.2",
@@ -43,13 +43,13 @@
     "@types/d3-interpolate": "^3.0.4",
     "@types/d3-scale": "^4.0.9",
     "@types/d3-shape": "^3.1.6",
-    "@vitest/runner": "^2.1.9",
-    "allure-js-commons": "^3.3.0",
-    "allure-vitest": "^3.3.0",
+    "@vitest/runner": "^2",
+    "allure-js-commons": "^3",
+    "allure-vitest": "^3",
     "jsdom": "^26.1.0",
-    "rimraf": "^6.0.1",
+    "rimraf": "^6",
     "tslib": "^2.7.0",
-    "typescript": "^5.6.3",
-    "vitest": "^2.1.9"
+    "typescript": "^5",
+    "vitest": "^4.1.0"
   }
 }