@allurereport/web-commons 3.0.0 → 3.1.0

package/dist/attachments.d.ts

@@ -1,21 +1,34 @@
-export interface Attachments {
+type AttachmentImageData = {
+    img: string;
+    id?: string;
+};
+type AttachmentTextData = {
+    text: string;
+};
+type AttachmentVideoData = {
+    src: string;
+    id?: string;
+    contentType?: string;
+};
+type AttachmentImageDiffData = {
+    diff: {
+        actual?: string;
+        expected?: string;
+        diff?: string;
+    };
+};
+export type AttachmentData = AttachmentImageData | AttachmentTextData | AttachmentVideoData | AttachmentImageDiffData;
+type AttachmentPayload = {
     id?: string;
     ext?: string;
     contentType?: string;
-    text?: string;
-    src?: string;
-    img?: string;
-}
-export declare const fetchFromUrl: ({ id, ext, contentType }: Attachments) => Promise<Response>;
-export declare const fetchAttachment: (id: string, ext: string, contentType?: string) => Promise<Attachments | null>;
+};
+export declare const fetchFromUrl: ({ id, ext, contentType }: AttachmentPayload) => Promise<Response>;
+export declare const fetchAttachment: (id: string, ext: string, contentType?: string) => Promise<AttachmentData | null>;
 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 declare const attachmentType: (type?: string) => {
-    type: string;
-    icon: string;
-} | {
-    type: null;
-    icon: string;
-};
+export type AttachmentType = "css" | "json" | "image" | "svg" | "code" | "text" | "html" | "table" | "video" | "uri" | "archive" | "image-diff";
+export declare const attachmentType: (type?: string) => AttachmentType | null;
 export declare const restrictedContentTypes: string[];
+export {};

package/dist/attachments.js

@@ -9,7 +9,10 @@ export const fetchAttachment = async (id, ext, contentType) => {
     }
     const response = await fetchFromUrl({ id, ext, contentType });
     const fileType = attachmentType(contentType);
-    switch (fileType.type) {
+    if (!response.ok) {
+        throw new Error("Failed to fetch");
+    }
+    switch (fileType) {
         case "svg":
         case "image": {
             const blob = await response.blob();
@@ -29,6 +32,10 @@ export const fetchAttachment = async (id, ext, contentType) => {
             const src = URL.createObjectURL(blob);
             return { src, id, contentType };
         }
+        case "image-diff": {
+            const json = await response.json();
+            return { diff: json };
+        }
         default:
             return null;
     }
@@ -67,10 +74,7 @@ export const attachmentType = (type) => {
         case "image/jpg":
         case "image/png":
         case "image/*":
-            return {
-                type: "image",
-                icon: "file",
-            };
+            return "image";
         case "text/xml":
         case "text/json":
         case "text/yaml":
@@ -100,63 +104,34 @@ export const attachmentType = (type) => {
         case "application/x-yaml":
         case "application/xml":
         case "application/json":
-            return {
-                type: "code",
-                icon: "file",
-            };
+            return "code";
         case "text/plain":
         case "text/markdown":
         case "text/*":
-            return {
-                type: "text",
-                icon: "txt",
-            };
+            return "text";
         case "text/html":
-            return {
-                type: "html",
-                icon: "file",
-            };
+            return "html";
         case "text/csv":
-            return {
-                type: "table",
-                icon: "csv",
-            };
         case "text/tab-separated-values":
-            return {
-                type: "table",
-                icon: "table",
-            };
+            return "table";
         case "image/svg+xml":
-            return {
-                type: "svg",
-                icon: "file",
-            };
+            return "svg";
         case "video/mp4":
         case "video/ogg":
         case "video/webm":
-            return {
-                type: "video",
-                icon: "file",
-            };
+            return "video";
         case "text/uri-list":
-            return {
-                type: "uri",
-                icon: "list",
-            };
+            return "uri";
         case "application/x-tar":
         case "application/x-gtar":
         case "application/x-bzip2":
         case "application/gzip":
         case "application/zip":
-            return {
-                type: "archive",
-                icon: "file",
-            };
+            return "archive";
+        case "application/vnd.allure.image.diff":
+            return "image-diff";
         default:
-            return {
-                type: null,
-                icon: "file",
-            };
+            return null;
     }
 };
 export const restrictedContentTypes = ["application/gzip"];

package/dist/data.d.ts

@@ -4,8 +4,12 @@ export declare const loadReportData: (name: string) => Promise<string>;
 export declare const reportDataUrl: (path: string, contentType?: string, params?: {
     bustCache: boolean;
 }) => Promise<string>;
+export declare class ReportFetchError extends Error {
+    readonly response: Response;
+    constructor(message: string, response: Response);
+}
 export declare const fetchReportJsonData: <T>(path: string, params?: {
     bustCache: boolean;
 }) => Promise<T>;
 export declare const fetchReportAttachment: (path: string, contentType?: string) => Promise<Response>;
-export declare const getReportOptions: <T>() => T;
+export declare const getReportOptions: <T>() => Readonly<T>;

package/dist/data.js

@@ -28,7 +28,7 @@ export const reportDataUrl = async (path, contentType = "application/octet-strea
     const baseEl = globalThis.document.head.querySelector("base")?.href ?? "https://localhost";
     const url = new URL(path, baseEl);
     const liveReloadHash = globalThis.localStorage.getItem(ALLURE_LIVE_RELOAD_HASH_STORAGE_KEY);
-    const cacheKey = globalThis.allureReportOptions?.cacheKey;
+    const cacheKey = getReportOptions()?.cacheKey;
     if (liveReloadHash) {
         url.searchParams.set("live_reload_hash", liveReloadHash);
     }
@@ -37,11 +37,17 @@ export const reportDataUrl = async (path, contentType = "application/octet-strea
     }
     return url.toString();
 };
+export class ReportFetchError extends Error {
+    constructor(message, response) {
+        super(message);
+        this.response = response;
+    }
+}
 export const fetchReportJsonData = async (path, params) => {
     const url = await reportDataUrl(path, undefined, params);
     const res = await globalThis.fetch(url);
     if (!res.ok) {
-        throw new Error(`Failed to fetch ${url}, response status: ${res.status}`);
+        throw new ReportFetchError(`Failed to fetch ${url}, response status: ${res.status}`, res);
     }
     const data = res.json();
     return data;

package/dist/filters/builders.d.ts

@@ -0,0 +1,4 @@
+import type { AqlExpression } from "@allurereport/aql";
+import { type Filter } from "./model.js";
+export declare const buildFieldFilters: <T extends string = string>(filters: Filter<T>[]) => AqlExpression;
+export declare const buildFilterPredicate: <Keys extends string = string>(filters: Filter<Keys>[]) => (item: Record<Keys, any>) => boolean;

package/dist/filters/builders.js

@@ -0,0 +1,160 @@
+import { aqlArrayConditionExpression, aqlBinaryExpression, aqlConditionExpression, aqlParenExpression, createAqlPredicate, } from "@allurereport/aql";
+import { MAX_ARRAY_FIELD_VALUES, } from "./model.js";
+const buildAqlFromFieldFilter = (field) => {
+    const { value: fieldValue } = field;
+    const { key, type, strict, value } = fieldValue;
+    if (type === "array") {
+        if (value.length === 0) {
+            throw new Error("ArrayField value cannot be empty");
+        }
+        if (strict === false) {
+            return buildArrayIntersectionFilter(key, value, MAX_ARRAY_FIELD_VALUES);
+        }
+        return aqlArrayConditionExpression({
+            type: "arrayCondition",
+            left: {
+                identifier: key,
+            },
+            operator: "IN",
+            right: value.map((item) => ({
+                value: item,
+                type: "STRING",
+            })),
+        });
+    }
+    let expressionValue;
+    let valueType;
+    let operator = "EQ";
+    switch (type) {
+        case "number": {
+            expressionValue = String(value);
+            operator = (strict ?? true) ? "EQ" : "CONTAINS";
+            valueType = "NUMBER";
+            break;
+        }
+        case "boolean": {
+            expressionValue = value ? "true" : "false";
+            valueType = "BOOLEAN";
+            operator = "EQ";
+            break;
+        }
+        case "string": {
+            expressionValue = String(value);
+            operator = (strict ?? true) ? "EQ" : "CONTAINS";
+            valueType = "STRING";
+            break;
+        }
+        default: {
+            const exhaustiveCheck = type;
+            throw new Error(`Unsupported field type: ${String(exhaustiveCheck)}`);
+        }
+    }
+    return aqlConditionExpression({
+        type: "condition",
+        left: {
+            identifier: key,
+        },
+        operator,
+        right: {
+            value: expressionValue,
+            type: valueType,
+        },
+    });
+};
+export const buildFieldFilters = (filters) => {
+    if (filters.length === 0) {
+        throw new Error("chainFieldFilters: filters array cannot be empty");
+    }
+    const buildAqlFromFilterGroup = (group) => {
+        const { value } = group;
+        if (value.length === 0) {
+            throw new Error("buildFieldFilters: value array cannot be empty");
+        }
+        if (value.length === 1) {
+            return buildFieldFilters([value[0]]);
+        }
+        return aqlParenExpression({
+            type: "paren",
+            expression: buildFieldFilters(value),
+        });
+    };
+    if (filters.length === 1) {
+        const [filter] = filters;
+        if (filter.type === "field") {
+            return buildAqlFromFieldFilter(filter);
+        }
+        return buildAqlFromFilterGroup(filter);
+    }
+    const [first, second, ...rest] = filters;
+    if (rest.length === 0) {
+        return aqlBinaryExpression({
+            type: "binary",
+            operator: first.logicalOperator ?? "AND",
+            left: buildFieldFilters([first]),
+            right: buildFieldFilters([second]),
+        });
+    }
+    return rest.reduce((acc, filter) => {
+        return aqlBinaryExpression({
+            type: "binary",
+            operator: filter.logicalOperator ?? "AND",
+            left: acc,
+            right: buildFieldFilters([filter]),
+        });
+    }, buildFieldFilters([first, second]));
+};
+const buildArrayIntersectionFilter = (key, values, maxIndex = 20) => {
+    if (values.length === 0) {
+        throw new Error("buildArrayIntersectionFilter: values array cannot be empty");
+    }
+    const conditionsPerValue = values.map((value) => {
+        const indexConditions = Array.from({ length: maxIndex + 1 }, (_, index) => {
+            return aqlConditionExpression({
+                type: "condition",
+                left: {
+                    identifier: key,
+                    param: {
+                        value: index,
+                        type: "number",
+                    },
+                },
+                operator: "EQ",
+                right: {
+                    value,
+                    type: "STRING",
+                },
+            });
+        });
+        if (indexConditions.length === 1) {
+            return indexConditions[0];
+        }
+        return indexConditions.reduce((acc, condition, index) => {
+            if (index === 0) {
+                return condition;
+            }
+            return aqlBinaryExpression({
+                type: "binary",
+                operator: "OR",
+                left: acc,
+                right: condition,
+            });
+        }, indexConditions[0]);
+    });
+    if (conditionsPerValue.length === 1) {
+        return conditionsPerValue[0];
+    }
+    return conditionsPerValue.reduce((acc, condition, index) => {
+        if (index === 0) {
+            return condition;
+        }
+        return aqlBinaryExpression({
+            type: "binary",
+            operator: "OR",
+            left: acc,
+            right: condition,
+        });
+    }, conditionsPerValue[0]);
+};
+export const buildFilterPredicate = (filters) => {
+    return createAqlPredicate(buildFieldFilters(filters));
+};

package/dist/filters/index.d.ts

@@ -0,0 +1,3 @@
+export * from "./builders.js";
+export type { ArrayField, BooleanField, Field, FieldFilter, FieldFilterGroup, Filter, LogicalOperator, NumberField, StringField, } from "./model.js";
+export { MAX_ARRAY_FIELD_VALUES } from "./model.js";

package/dist/filters/index.js

@@ -0,0 +1,2 @@
+export * from "./builders.js";
+export { MAX_ARRAY_FIELD_VALUES } from "./model.js";

package/dist/filters/model.d.ts

@@ -0,0 +1,39 @@
+export type FieldFilter<T extends string = string> = {
+    type: "field";
+    value: Field<T>;
+    logicalOperator?: LogicalOperator;
+};
+export type FieldFilterGroup<T extends string = string> = {
+    type: "group";
+    value: Filter<T>[];
+    logicalOperator?: LogicalOperator;
+};
+export type Filter<T extends string = string> = FieldFilter<T> | FieldFilterGroup<T>;
+export type StringField<T extends string = string> = {
+    key: T;
+    value: string;
+    strict?: boolean;
+    type: "string";
+};
+export type NumberField<T extends string = string> = {
+    key: T;
+    value: number;
+    strict?: boolean;
+    type: "number";
+};
+export type BooleanField<T extends string = string> = {
+    key: T;
+    value: boolean;
+    strict?: never;
+    type: "boolean";
+};
+export type ArrayField<T extends string = string> = {
+    key: T;
+    value: string[];
+    strict?: boolean;
+    type: "array";
+};
+export type Field<T extends string = string> = StringField<T> | NumberField<T> | BooleanField<T> | ArrayField<T>;
+export type LogicalOperator = "AND" | "OR";
+export type AqlValueType = "STRING" | "NUMBER" | "BOOLEAN";
+export declare const MAX_ARRAY_FIELD_VALUES = 20;

package/dist/filters/model.js

@@ -0,0 +1 @@
+export const MAX_ARRAY_FIELD_VALUES = 20;

package/dist/index.d.ts

@@ -4,3 +4,10 @@ export * from "./i18n.js";
 export * from "./charts/index.js";
 export * from "./strings.js";
 export * from "./sanitize.js";
+export * from "./stores/url/index.js";
+export * from "./stores/router/index.js";
+export * from "./filters/index.js";
+export * from "./stores/theme/index.js";
+export * from "./stores/loadableStore/index.js";
+export * from "./stores/persister/index.js";
+export * from "./utils.js";

package/dist/index.js

@@ -4,3 +4,10 @@ export * from "./i18n.js";
 export * from "./charts/index.js";
 export * from "./strings.js";
 export * from "./sanitize.js";
+export * from "./stores/url/index.js";
+export * from "./stores/router/index.js";
+export * from "./filters/index.js";
+export * from "./stores/theme/index.js";
+export * from "./stores/loadableStore/index.js";
+export * from "./stores/persister/index.js";
+export * from "./utils.js";

package/dist/stores/loadableStore/constants.d.ts

@@ -0,0 +1 @@
+export declare const LOADABLE_STORE_BRAND: unique symbol;

package/dist/stores/loadableStore/constants.js

@@ -0,0 +1 @@
+export const LOADABLE_STORE_BRAND = Symbol("loadableStore");

package/dist/stores/loadableStore/index.d.ts

@@ -0,0 +1,3 @@
+export { loadableStore, type LoadableStore } from "./store.js";
+export type { LoadableStoreValue } from "./types.js";
+export { isLoadableStore } from "./utils.js";

package/dist/stores/loadableStore/index.js

@@ -0,0 +1,2 @@
+export { loadableStore } from "./store.js";
+export { isLoadableStore } from "./utils.js";

package/dist/stores/loadableStore/store.d.ts

@@ -0,0 +1,13 @@
+import { LOADABLE_STORE_BRAND } from "./constants.js";
+import type { LoadableStoreValue } from "./types.js";
+export type LoadableStore<T> = ReturnType<typeof loadableStore<T>>;
+export declare const loadableStore: <T>(options: {
+    initialState: T;
+}) => {
+    readonly value: LoadableStoreValue<T>;
+    readonly onInit: () => void;
+    readonly onLoad: (silent?: boolean) => void;
+    readonly onSuccess: (data: T) => void;
+    readonly onError: (error?: Error) => void;
+    readonly brand: typeof LOADABLE_STORE_BRAND;
+};

package/dist/stores/loadableStore/store.js

@@ -0,0 +1,47 @@
+import { batch, computed, signal } from "@preact/signals-core";
+import { LOADABLE_STORE_BRAND } from "./constants.js";
+export const loadableStore = (options) => {
+    const loadingSignal = signal(false);
+    const errorSignal = signal(undefined);
+    const dataSignal = signal(options.initialState);
+    return {
+        value: {
+            data: computed(() => dataSignal.value),
+            loading: computed(() => loadingSignal.value),
+            error: computed(() => errorSignal.value),
+            errorMessage: computed(() => {
+                if (errorSignal.value) {
+                    return errorSignal.value.message;
+                }
+                return undefined;
+            }),
+        },
+        onInit: () => {
+            batch(() => {
+                loadingSignal.value = false;
+                errorSignal.value = undefined;
+                dataSignal.value = options.initialState;
+            });
+        },
+        onLoad: (silent = false) => {
+            batch(() => {
+                loadingSignal.value = !silent;
+                errorSignal.value = undefined;
+            });
+        },
+        onSuccess: (data) => {
+            batch(() => {
+                loadingSignal.value = false;
+                errorSignal.value = undefined;
+                dataSignal.value = data;
+            });
+        },
+        onError: (error = new Error("Unknown error")) => {
+            batch(() => {
+                loadingSignal.value = false;
+                errorSignal.value = error;
+            });
+        },
+        brand: LOADABLE_STORE_BRAND,
+    };
+};

package/dist/stores/loadableStore/types.d.ts

@@ -0,0 +1,7 @@
+import type { ReadonlySignal } from "@preact/signals-core";
+export type LoadableStoreValue<T> = {
+    error: ReadonlySignal<Error | undefined>;
+    errorMessage: ReadonlySignal<string | undefined>;
+    loading: ReadonlySignal<boolean>;
+    data: ReadonlySignal<T>;
+};

package/dist/stores/loadableStore/types.js

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

package/dist/stores/loadableStore/utils.d.ts

@@ -0,0 +1,2 @@
+import type { LoadableStore } from "./store.js";
+export declare const isLoadableStore: <T>(value: unknown) => value is LoadableStore<T>;

package/dist/stores/loadableStore/utils.js

@@ -0,0 +1,7 @@
+import { LOADABLE_STORE_BRAND } from "./constants.js";
+export const isLoadableStore = (value) => {
+    if (typeof value !== "object" || value === null) {
+        return false;
+    }
+    return "brand" in value && value.brand === LOADABLE_STORE_BRAND;
+};

package/dist/stores/persister/index.d.ts

@@ -0,0 +1,12 @@
+import { type Signal } from "@preact/signals-core";
+export declare const persistSignal: <S extends Signal<unknown>>(options: {
+    signal: S;
+    key: string;
+    shouldPersist?: (v: S extends Signal<infer U> ? U : never) => boolean;
+}) => (() => void) | undefined;
+export declare const restoreSignal: <S extends Signal<unknown>, V = S extends Signal<infer U> ? U : unknown>(options: {
+    signal: S;
+    key: string;
+    defaultValue?: V;
+    onRestore?: (value: any) => V | undefined;
+}) => void;

package/dist/stores/persister/index.js

@@ -0,0 +1,36 @@
+import { effect } from "@preact/signals-core";
+export const persistSignal = (options) => {
+    if (typeof window === "undefined") {
+        return;
+    }
+    const { signal, key, shouldPersist = () => true } = options;
+    return effect(() => {
+        const value = signal.value;
+        if (!shouldPersist(value)) {
+            return;
+        }
+        try {
+            window.localStorage.setItem(key, typeof value === "string" ? value : JSON.stringify(value));
+        }
+        catch { }
+    });
+};
+export const restoreSignal = (options) => {
+    if (typeof window === "undefined") {
+        return;
+    }
+    const { signal, key, defaultValue, onRestore = (v) => v } = options;
+    const value = window.localStorage.getItem(key);
+    if (value !== null) {
+        let parsedValue = value;
+        try {
+            parsedValue = JSON.parse(value);
+        }
+        catch { }
+        signal.value = onRestore(parsedValue);
+        return;
+    }
+    if ("defaultValue" in options) {
+        signal.value = defaultValue;
+    }
+};

package/dist/stores/router/index.d.ts

@@ -0,0 +1,18 @@
+export declare const router: import("@preact/signals-core").ReadonlySignal<{
+    readonly path: string;
+    readonly pathParts: string[];
+}>;
+type NavigateTo = {
+    path: string;
+    keepSearchParams?: boolean;
+    searchParams?: Record<string, string | string[] | number | undefined>;
+    params?: Record<string, string | undefined>;
+    replace?: boolean;
+};
+export declare const navigateTo: (to: NavigateTo) => void;
+type Route<Params extends Record<string, string | undefined>> = {
+    matches: boolean;
+    params: Params;
+};
+export declare const createRoute: <Params extends Record<string, string | undefined>>(path: string, validate?: (route: Route<Params>) => boolean) => Route<Params>;
+export {};

package/dist/stores/router/index.js

@@ -0,0 +1,95 @@
+import { computed } from "@preact/signals-core";
+import { paramsToSearchParams } from "../url/helpers.js";
+import { currentUrl, goTo } from "../url/index.js";
+export const router = computed(() => {
+    const hash = currentUrl.value.hash.startsWith("#") ? currentUrl.value.hash.slice(1) : currentUrl.value.hash;
+    return {
+        path: hash,
+        pathParts: hash.split("/").filter(Boolean),
+    };
+});
+const createRouteUrl = (path, params) => {
+    return path
+        .split("/")
+        .map((part) => {
+        if (part.startsWith(":")) {
+            const isOptional = part.endsWith("?");
+            const paramKey = isOptional ? part.slice(1, -1) : part.slice(1);
+            const value = params[paramKey];
+            if (value) {
+                return value.toString();
+            }
+            if (isOptional) {
+                return "";
+            }
+            return part;
+        }
+        return part;
+    })
+        .filter(Boolean)
+        .join("/");
+};
+export const navigateTo = (to) => {
+    const { path, params = {}, replace = false, searchParams = {}, keepSearchParams = false } = to;
+    const currentPathname = currentUrl.value.pathname;
+    const newUrl = new URL(currentPathname, currentUrl.value.origin);
+    const routeUrl = createRouteUrl(path, params);
+    newUrl.hash = routeUrl === "" || routeUrl === "/" ? "" : `#${routeUrl}`;
+    if (keepSearchParams) {
+        paramsToSearchParams(currentUrl.value.params, newUrl.searchParams);
+    }
+    Object.entries(searchParams).forEach(([key, value]) => {
+        if (!value) {
+            return;
+        }
+        if (Array.isArray(value)) {
+            for (const v of value) {
+                newUrl.searchParams.set(key, v.toString());
+            }
+        }
+        newUrl.searchParams.set(key, value.toString());
+    });
+    goTo(newUrl, { replace });
+};
+export const createRoute = (path, validate = () => true) => {
+    if (path === "/" && router.value.pathParts.length === 0) {
+        return { matches: true, params: {} };
+    }
+    const routeParts = path.split("/").filter(Boolean);
+    const currentParts = router.value.pathParts;
+    const params = {};
+    let routeIndex = 0;
+    let currentIndex = 0;
+    while (routeIndex < routeParts.length && currentIndex < currentParts.length) {
+        const routePart = routeParts[routeIndex];
+        const currentPart = currentParts[currentIndex];
+        if (routePart.startsWith(":")) {
+            const isOptional = routePart.endsWith("?");
+            const paramKey = isOptional ? routePart.slice(1, -1) : routePart.slice(1);
+            params[paramKey] = currentPart;
+            routeIndex++;
+            currentIndex++;
+        }
+        else if (routePart === currentPart) {
+            routeIndex++;
+            currentIndex++;
+        }
+        else {
+            return { matches: false, params: {} };
+        }
+    }
+    while (routeIndex < routeParts.length) {
+        const routePart = routeParts[routeIndex];
+        if (routePart.startsWith(":") && routePart.endsWith("?")) {
+            const paramKey = routePart.slice(1, -1);
+            params[paramKey] = undefined;
+            routeIndex++;
+        }
+        else {
+            return { matches: false, params: {} };
+        }
+    }
+    const matches = currentIndex === currentParts.length;
+    const route = { matches, params };
+    return { matches: matches && validate(route), params };
+};

package/dist/stores/theme/actions.d.ts

@@ -0,0 +1,3 @@
+import type { UserTheme } from "./types.js";
+export declare const setUserTheme: (theme: UserTheme) => void;
+export declare const toggleUserTheme: () => void;

package/dist/stores/theme/actions.js

@@ -0,0 +1,30 @@
+import { effect } from "@preact/signals-core";
+import { SELECTED_THEMES, THEME_DARK, THEME_LIGHT } from "./constants.js";
+import { currentTheme, preferredTheme, userTheme } from "./store.js";
+import { getPrefersColorSchemeMQ } from "./utils.js";
+const initThemeStore = () => {
+    if (typeof window === "undefined") {
+        return;
+    }
+    effect(() => {
+        document.documentElement.setAttribute("data-theme", currentTheme.value);
+    });
+    const preffersMediaQuery = getPrefersColorSchemeMQ();
+    preffersMediaQuery.addEventListener("change", (event) => {
+        if (event.matches) {
+            preferredTheme.value = THEME_DARK;
+        }
+        else {
+            preferredTheme.value = THEME_LIGHT;
+        }
+    });
+};
+export const setUserTheme = (theme) => {
+    userTheme.value = theme;
+};
+export const toggleUserTheme = () => {
+    const current = userTheme.peek();
+    const next = SELECTED_THEMES[(SELECTED_THEMES.indexOf(current) + 1) % SELECTED_THEMES.length];
+    setUserTheme(next);
+};
+initThemeStore();

package/dist/stores/theme/constants.d.ts

@@ -0,0 +1,6 @@
+import type { UserTheme } from "./types.js";
+export declare const THEME_AUTO = "auto";
+export declare const THEME_LIGHT = "light";
+export declare const THEME_DARK = "dark";
+export declare const STORAGE_KEY = "theme";
+export declare const SELECTED_THEMES: UserTheme[];

package/dist/stores/theme/constants.js

@@ -0,0 +1,5 @@
+export const THEME_AUTO = "auto";
+export const THEME_LIGHT = "light";
+export const THEME_DARK = "dark";
+export const STORAGE_KEY = "theme";
+export const SELECTED_THEMES = [THEME_LIGHT, THEME_DARK, THEME_AUTO];

package/dist/stores/theme/index.d.ts

@@ -0,0 +1,2 @@
+export { setUserTheme, toggleUserTheme } from "./actions.js";
+export { themeStore } from "./store.js";

package/dist/stores/theme/index.js

@@ -0,0 +1,2 @@
+export { setUserTheme, toggleUserTheme } from "./actions.js";
+export { themeStore } from "./store.js";

package/dist/stores/theme/store.d.ts

@@ -0,0 +1,8 @@
+import type { UITheme, UserTheme } from "./types.js";
+export declare const currentTheme: import("@preact/signals-core").ReadonlySignal<UITheme>;
+export declare const userTheme: import("@preact/signals-core").Signal<UserTheme>;
+export declare const preferredTheme: import("@preact/signals-core").Signal<UITheme>;
+export declare const themeStore: import("@preact/signals-core").ReadonlySignal<{
+    readonly current: UITheme;
+    readonly selected: UserTheme;
+}>;

package/dist/stores/theme/store.js

@@ -0,0 +1,41 @@
+import { computed, signal } from "@preact/signals-core";
+import { getReportOptions } from "../../data.js";
+import { persistSignal, restoreSignal } from "../persister/index.js";
+import { STORAGE_KEY, THEME_AUTO, THEME_DARK, THEME_LIGHT } from "./constants.js";
+import { getPrefersColorSchemeMQ, isAcceptedThemeValue, isAutoTheme } from "./utils.js";
+const reportConfigTheme = getReportOptions()?.theme;
+const getInitialPreferredTheme = () => {
+    if (typeof window === "undefined") {
+        return THEME_LIGHT;
+    }
+    if (getPrefersColorSchemeMQ().matches) {
+        return THEME_DARK;
+    }
+    return THEME_LIGHT;
+};
+export const currentTheme = computed(() => {
+    if (isAutoTheme(userTheme.value)) {
+        return preferredTheme.value;
+    }
+    return userTheme.value;
+});
+export const userTheme = signal(THEME_AUTO);
+export const preferredTheme = signal(getInitialPreferredTheme());
+restoreSignal({
+    signal: userTheme,
+    key: STORAGE_KEY,
+    onRestore: (value) => {
+        if (isAcceptedThemeValue(value)) {
+            return value;
+        }
+        return reportConfigTheme ?? THEME_AUTO;
+    },
+});
+persistSignal({
+    signal: userTheme,
+    key: STORAGE_KEY,
+});
+export const themeStore = computed(() => ({
+    current: currentTheme.value,
+    selected: userTheme.value,
+}));

package/dist/stores/theme/types.d.ts

@@ -0,0 +1,2 @@
+export type UITheme = "light" | "dark";
+export type UserTheme = UITheme | "auto";

package/dist/stores/theme/types.js

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

package/dist/stores/theme/utils.d.ts

@@ -0,0 +1,4 @@
+import type { UserTheme } from "./types.js";
+export declare const getPrefersColorSchemeMQ: () => MediaQueryList;
+export declare const isAcceptedThemeValue: (value: unknown) => value is UserTheme;
+export declare const isAutoTheme: (theme: UserTheme) => theme is "auto";

package/dist/stores/theme/utils.js

@@ -0,0 +1,23 @@
+import { SELECTED_THEMES, THEME_AUTO } from "./constants.js";
+const nullMediaQueryList = {
+    matches: false,
+    addEventListener: () => { },
+    removeEventListener: () => { },
+    media: "",
+    onchange: () => { },
+    addListener: () => { },
+    removeListener: () => { },
+    dispatchEvent: () => true,
+};
+export const getPrefersColorSchemeMQ = () => {
+    if (typeof window === "undefined" || typeof window.matchMedia !== "function") {
+        return nullMediaQueryList;
+    }
+    return window.matchMedia("(prefers-color-scheme: dark)");
+};
+export const isAcceptedThemeValue = (value) => {
+    return SELECTED_THEMES.includes(value);
+};
+export const isAutoTheme = (theme) => {
+    return theme === THEME_AUTO;
+};

package/dist/stores/url/helpers.d.ts

@@ -0,0 +1,12 @@
+export declare const subscribeToUrlChange: (callback: () => void) => (() => void) | undefined;
+type NavigateTo = URL | string | {
+    path: string;
+};
+type NavigateToOptions = {
+    replace?: boolean;
+};
+export declare const goTo: (to: NavigateTo, options?: NavigateToOptions) => void;
+export declare const getCurrentUrl: () => string;
+export declare const paramsToSearchParams: (params: Record<string, string | string[]>, searchParams?: URLSearchParams) => URLSearchParams;
+export declare const searchParamsToParams: (searchParams: URLSearchParams) => Record<string, string | string[]>;
+export {};

package/dist/stores/url/helpers.js

@@ -0,0 +1,74 @@
+export const subscribeToUrlChange = (callback) => {
+    if (typeof window === "undefined") {
+        return;
+    }
+    window.addEventListener("popstate", callback);
+    window.addEventListener("replaceState", callback);
+    window.addEventListener("pushState", callback);
+    window.addEventListener("hashchange", callback);
+    return () => {
+        window.removeEventListener("popstate", callback);
+        window.removeEventListener("replaceState", callback);
+        window.removeEventListener("pushState", callback);
+        window.removeEventListener("hashchange", callback);
+    };
+};
+const getUrl = (to) => {
+    if (typeof to === "string") {
+        return to;
+    }
+    if (to instanceof URL) {
+        return to;
+    }
+    return new URL(to.path, getCurrentUrl());
+};
+export const goTo = (to, options) => {
+    if (typeof window === "undefined") {
+        return;
+    }
+    const url = getUrl(to);
+    if (options?.replace) {
+        window.history.replaceState(null, "", url);
+        window.dispatchEvent(new Event("replaceState"));
+    }
+    else {
+        window.history.pushState(null, "", url);
+        window.dispatchEvent(new Event("pushState"));
+    }
+};
+export const getCurrentUrl = () => {
+    if (typeof window === "undefined") {
+        return "";
+    }
+    return window.location.href;
+};
+export const paramsToSearchParams = (params, searchParams = new URLSearchParams()) => {
+    Object.entries(params).forEach(([key, value]) => {
+        if (Array.isArray(value)) {
+            for (const v of value) {
+                searchParams.append(key, v);
+            }
+        }
+        else {
+            searchParams.set(key, value);
+        }
+    });
+    return searchParams;
+};
+export const searchParamsToParams = (searchParams) => {
+    const params = {};
+    searchParams.forEach((value, key) => {
+        if (key in params) {
+            if (Array.isArray(params[key])) {
+                params[key].push(value);
+            }
+            else {
+                params[key] = [params[key], value];
+            }
+        }
+        else {
+            params[key] = value;
+        }
+    });
+    return params;
+};

package/dist/stores/url/index.d.ts

@@ -0,0 +1,2 @@
+export { getParamValue, getParamValues, hasParam, setParams, currentUrl, type Param } from "./store.js";
+export { goTo, getCurrentUrl } from "./helpers.js";

package/dist/stores/url/index.js

@@ -0,0 +1,2 @@
+export { getParamValue, getParamValues, hasParam, setParams, currentUrl } from "./store.js";
+export { goTo, getCurrentUrl } from "./helpers.js";

package/dist/stores/url/store.d.ts

@@ -0,0 +1,19 @@
+export declare const currentUrlSignal: import("@preact/signals-core").Signal<string>;
+export declare const urlSearchParams: import("@preact/signals-core").ReadonlySignal<URLSearchParams>;
+export type Param = {
+    key: string;
+    value: string | string[] | undefined;
+};
+export declare const setParams: (...params: Param[]) => void;
+export declare const currentUrl: import("@preact/signals-core").ReadonlySignal<{
+    readonly hash: string;
+    readonly pathname: string;
+    readonly origin: string;
+    readonly params: Record<string, string | string[]>;
+}>;
+export declare const getParamValue: (key: string) => string | null;
+export declare const getParamValues: (key: string) => string[];
+export declare const hasParam: (key: string) => boolean;
+export declare const getParamValueComputed: (key: string) => import("@preact/signals-core").ReadonlySignal<string | null>;
+export declare const getParamValuesComputed: (key: string) => import("@preact/signals-core").ReadonlySignal<string[]>;
+export declare const hasParamComputed: (key: string) => import("@preact/signals-core").ReadonlySignal<boolean>;

package/dist/stores/url/store.js

@@ -0,0 +1,45 @@
+import { computed, signal } from "@preact/signals-core";
+import { getCurrentUrl, goTo, searchParamsToParams, subscribeToUrlChange } from "./helpers.js";
+export const currentUrlSignal = signal(getCurrentUrl());
+subscribeToUrlChange(() => {
+    if (currentUrlSignal.peek() === getCurrentUrl()) {
+        return;
+    }
+    currentUrlSignal.value = getCurrentUrl();
+});
+const urlSignal = computed(() => new URL(currentUrlSignal.value));
+export const urlSearchParams = computed(() => urlSignal.value.searchParams);
+export const setParams = (...params) => {
+    const newUrl = new URL(getCurrentUrl());
+    for (const param of params) {
+        newUrl.searchParams.delete(param.key);
+        if (Array.isArray(param.value)) {
+            for (const value of param.value) {
+                newUrl.searchParams.append(param.key, value);
+            }
+        }
+        else if (typeof param.value === "string") {
+            newUrl.searchParams.set(param.key, param.value);
+        }
+    }
+    if (newUrl.href === urlSignal.peek().href) {
+        return;
+    }
+    goTo(newUrl.href, {
+        replace: true,
+    });
+};
+export const currentUrl = computed(() => {
+    return {
+        hash: urlSignal.value.hash,
+        pathname: urlSignal.value.pathname,
+        origin: urlSignal.value.origin,
+        params: searchParamsToParams(urlSearchParams.value),
+    };
+});
+export const getParamValue = (key) => urlSearchParams.value.get(key);
+export const getParamValues = (key) => urlSearchParams.value.getAll(key);
+export const hasParam = (key) => urlSearchParams.value.has(key);
+export const getParamValueComputed = (key) => computed(() => getParamValue(key));
+export const getParamValuesComputed = (key) => computed(() => getParamValues(key));
+export const hasParamComputed = (key) => computed(() => hasParam(key));

package/dist/utils.d.ts

@@ -0,0 +1,2 @@
+import { type ReadonlySignal, type Signal } from "@preact/signals-core";
+export declare const isSignal: (value: unknown) => value is Signal | ReadonlySignal;

package/dist/utils.js

@@ -0,0 +1,9 @@
+import { signal } from "@preact/signals-core";
+const signalExample = signal(1);
+export const isSignal = (value) => {
+    return (typeof value === "object" &&
+        value !== null &&
+        "brand" in value &&
+        typeof value.brand === "symbol" &&
+        value.brand === signalExample.brand);
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@allurereport/web-commons",
-  "version": "3.0.0",
+  "version": "3.1.0",
   "description": "Collection of utilities used across the web Allure reports",
   "keywords": [
     "allure",
@@ -20,12 +20,16 @@
   ],
   "scripts": {
     "build": "run clean && tsc --project ./tsconfig.json",
-    "clean": "rimraf ./dist"
+    "clean": "rimraf ./dist",
+    "test": "vitest run"
   },
   "dependencies": {
-    "@allurereport/charts-api": "3.0.0",
-    "@allurereport/core-api": "3.0.0",
-    "@allurereport/plugin-api": "3.0.0",
+    "@allurereport/aql": "3.1.0",
+    "@allurereport/charts-api": "3.1.0",
+    "@allurereport/core-api": "3.1.0",
+    "@allurereport/plugin-api": "3.1.0",
+    "@preact/signals": "^2.6.1",
+    "@preact/signals-core": "^1.12.2",
     "ansi-to-html": "^0.7.2",
     "d3-interpolate": "^3.0.1",
     "d3-scale": "^4.0.2",
@@ -51,6 +55,7 @@
     "eslint-plugin-n": "^17.10.1",
     "eslint-plugin-no-null": "^1.0.2",
     "eslint-plugin-prefer-arrow": "^1.2.3",
+    "jsdom": "^26.1.0",
     "rimraf": "^6.0.1",
     "tslib": "^2.7.0",
     "typescript": "^5.6.3",