@application-kit/ui 0.0.0-stage → 0.0.0

package/dist/messages/ui-messages.d.ts

@@ -0,0 +1,23 @@
+export interface UiMessagesInterface {
+    readonly dateRangeFilter: {
+        readonly clear: string;
+        readonly lastMonth: string;
+        readonly lastSixMonths: string;
+        readonly lastWeek: string;
+        readonly placeholder: string;
+    };
+    readonly errorPage: {
+        readonly copied: string;
+        readonly copy: string;
+        readonly goToDashboard: string;
+        readonly supportIdTitle: string;
+    };
+    readonly table: {
+        readonly empty: string;
+        readonly error: string;
+        readonly loading: string;
+        readonly loadingMore: string;
+        readonly searchPlaceholder: string;
+        readonly selectFilterPlaceholder: string;
+    };
+}

package/dist/plugin/ui-injection.d.ts

@@ -0,0 +1,11 @@
+import type { ComputedRef, InjectionKey, MaybeRefOrGetter } from 'vue';
+import type { IconName } from '../icons/ui-icon-registry';
+import type { UiMessagesInterface } from '../messages/ui-messages';
+export type UiDescribeRequestError = (error: unknown, fallbackMessage: string) => string;
+export type UiIconClass = (name: IconName) => string;
+export declare const UI_MESSAGES: InjectionKey<MaybeRefOrGetter<UiMessagesInterface>>;
+export declare const UI_ICON_CLASS: InjectionKey<UiIconClass>;
+export declare const UI_DESCRIBE_REQUEST_ERROR: InjectionKey<UiDescribeRequestError>;
+export declare const useUiMessages: () => ComputedRef<UiMessagesInterface>;
+export declare const useUiIconClass: () => UiIconClass;
+export declare const useUiDescribeRequestError: () => UiDescribeRequestError;

package/dist/plugin/ui-injection.js

@@ -0,0 +1,18 @@
+import { computed, inject, toValue } from "vue";
+//#region src/plugin/ui-injection.ts
+var UI_MESSAGES = Symbol("ui-messages");
+var UI_ICON_CLASS = Symbol("ui-icon-class");
+var UI_DESCRIBE_REQUEST_ERROR = Symbol("ui-describe-request-error");
+var injectRequired = (key, option) => {
+	const value = inject(key, void 0);
+	if (value === void 0) throw new Error(`@application-kit/ui: нет опции «${option}» — установите UiVendorPlugin с ней`);
+	return value;
+};
+var useUiMessages = () => {
+	const source = injectRequired(UI_MESSAGES, "messages");
+	return computed(() => toValue(source));
+};
+var useUiIconClass = () => injectRequired(UI_ICON_CLASS, "iconClass");
+var useUiDescribeRequestError = () => injectRequired(UI_DESCRIBE_REQUEST_ERROR, "describeRequestError");
+//#endregion
+export { UI_DESCRIBE_REQUEST_ERROR, UI_ICON_CLASS, UI_MESSAGES, useUiDescribeRequestError, useUiIconClass, useUiMessages };

package/dist/plugin/ui-vendor-plugin.d.ts

@@ -0,0 +1,22 @@
+import type { App, MaybeRefOrGetter, Ref } from 'vue';
+import type { UiMessagesInterface } from '../messages/ui-messages';
+import type { UiDescribeRequestError, UiIconClass } from './ui-injection';
+export interface UiLocaleOptionsInterface {
+    readonly overrides: Readonly<Record<string, Partial<UiVendorLocale>>>;
+    readonly reference: UiLocaleReference;
+}
+export type UiLocaleReference = (app: App) => Ref<string> | undefined;
+export type UiVendorLocale = NonNullable<App['config']['globalProperties']['$primevue']['config']['locale']>;
+export interface UiVendorPluginOptionsInterface {
+    readonly darkModeSelector: string;
+    readonly describeRequestError: UiDescribeRequestError;
+    readonly iconClass: UiIconClass;
+    readonly locale?: UiLocaleOptionsInterface;
+    readonly messages: MaybeRefOrGetter<UiMessagesInterface>;
+}
+export declare class UiVendorPlugin {
+    private readonly options;
+    constructor(options: UiVendorPluginOptionsInterface);
+    private static followLocale;
+    install(vue: App): void;
+}

package/dist/plugin/ui-vendor-plugin.js

@@ -0,0 +1,57 @@
+import { UI_DESCRIBE_REQUEST_ERROR, UI_ICON_CLASS, UI_MESSAGES } from "./ui-injection.js";
+import { installToastService } from "../components/toast/install-toast-service.js";
+import { installTooltipDirective } from "../components/tooltip/install-tooltip-directive.js";
+import { watch } from "vue";
+import ConfirmationService from "openvue/confirmationservice";
+import Aura from "@openvue/themes/aura";
+import UiVendor from "openvue/config";
+//#region src/plugin/ui-vendor-plugin.ts
+var REQUIRED_OPTIONS = [
+	"darkModeSelector",
+	"describeRequestError",
+	"iconClass",
+	"messages"
+];
+/**
+* Bootstrap-регистрация UI-вендора: тема, toast- и confirm-сервисы, tooltip-директива, а также
+* всё, что пакет получает от приложения: тексты, классы иконок, описание ошибки запроса.
+* Вендор виден по имени только здесь и в обёртках пакета (`AGENTS.md` приложения, «изоляция вендора»).
+* @example
+* new UiVendorPlugin({ darkModeSelector: 'dark-theme', describeRequestError, iconClass, messages })
+*/
+var UiVendorPlugin = class UiVendorPlugin {
+	options;
+	constructor(options) {
+		for (const name of REQUIRED_OPTIONS) if (options[name] === void 0) throw new TypeError(`@application-kit/ui: не передана обязательная опция «${name}»`);
+		this.options = options;
+	}
+	static followLocale(vue, locale) {
+		const localeReference = locale.reference(vue);
+		const vendorConfig = vue.config.globalProperties.$primevue.config;
+		if (!localeReference || !vendorConfig.locale) return;
+		const baseLocale = { ...vendorConfig.locale };
+		const applyVendorLocale = (code) => {
+			vendorConfig.locale = {
+				...baseLocale,
+				...locale.overrides[code]
+			};
+		};
+		applyVendorLocale(localeReference.value);
+		watch(localeReference, applyVendorLocale, { flush: "sync" });
+	}
+	install(vue) {
+		vue.provide(UI_MESSAGES, this.options.messages);
+		vue.provide(UI_ICON_CLASS, this.options.iconClass);
+		vue.provide(UI_DESCRIBE_REQUEST_ERROR, this.options.describeRequestError);
+		vue.use(UiVendor, { theme: {
+			options: { darkModeSelector: `.${this.options.darkModeSelector}` },
+			preset: Aura
+		} });
+		if (this.options.locale) UiVendorPlugin.followLocale(vue, this.options.locale);
+		installToastService(vue);
+		installTooltipDirective(vue);
+		vue.use(ConfirmationService);
+	}
+};
+//#endregion
+export { UiVendorPlugin };

package/dist/severity.d.ts

@@ -0,0 +1 @@
+export type Severity = 'contrast' | 'danger' | 'info' | 'secondary' | 'success' | 'warn';

package/dist/store/listing/cursor-listing.d.ts

@@ -0,0 +1,25 @@
+import type { CursorInterface, FilterInterface, PaginatorInterface, SortingInterface } from '@application-kit/typeorm/listing';
+import type { Ref } from 'vue';
+export interface CursorListingInterface<T> {
+    buildPaginator(isGoNext: boolean): PaginatorInterface;
+    isLatestRequest(id: number): boolean;
+    nextRequestId(): number;
+    resetPagination(): void;
+    setFilters(newFilters: FilterInterface[]): void;
+    setLimit(newLimit: number | string): void;
+    setSorting(newSorting: SortingInterface[]): void;
+    state: ListingStateInterface<T>;
+}
+export interface ListingStateInterface<T> {
+    currentCursor: Ref<null | string>;
+    currentPage: Ref<number>;
+    cursor: Ref<CursorInterface>;
+    filters: Ref<FilterInterface[]>;
+    limit: Ref<number>;
+    loading: Ref<boolean>;
+    records: Ref<T[]>;
+    sorting: Ref<SortingInterface[]>;
+    totalRecords: Ref<number>;
+}
+export declare const DEFAULT_LISTING_LIMIT = 20;
+export declare const createCursorListing: <T>(limitValue: number) => CursorListingInterface<T>;

package/dist/store/listing/cursor-listing.js

@@ -0,0 +1,97 @@
+import { ref } from "vue";
+import { SortOrder } from "@application-kit/typeorm/listing";
+//#region src/store/listing/cursor-listing.ts
+var DEFAULT_LISTING_LIMIT = 20;
+var defaultCurrentPage = 0;
+var defaultTotalRecords = 0;
+var minLimit = 1;
+var createListingState = (limitValue) => {
+	const filters = ref([]);
+	const records = ref([]);
+	const sorting = ref([{
+		field: "id",
+		order: SortOrder.DESC
+	}]);
+	return {
+		currentCursor: ref(null),
+		currentPage: ref(defaultCurrentPage),
+		cursor: ref({
+			next: null,
+			prev: null
+		}),
+		filters,
+		limit: ref(limitValue),
+		loading: ref(false),
+		records,
+		sorting,
+		totalRecords: ref(defaultTotalRecords)
+	};
+};
+var isSameCollection = (left, right) => JSON.stringify([...left]) === JSON.stringify(right);
+/**
+* Builds the cursor-pagination core shared by every listing store.
+*
+* Курсорная механика одна на все листинги: страничный стор и бесконечный скролл блоков
+* отличаются только тем, что делают с ответом, а не тем, как его просят.
+* Поэтому состояние, сборка пагинатора, порядковый номер запроса и сброс живут здесь,
+* а не копируются во второй стор.
+*
+* **Порядковый номер запроса.** Ответы приходят не в том порядке, в котором их просили.
+* Без счётчика результат медленного УСТАРЕВШЕГО запроса затирает свежий — например, догрузка
+* страницы, начатая до поиска, перезаписывает найденную строку своим списком, и поиск выглядит
+* как «ничего не нашлось» (MR !99).
+*
+* `resetPagination` возвращает листинг на свежую первую страницу: повторный `getRecords(0)` иначе
+* пойдёт по уже полученному `cursor.next` и отдаст следующую страницу вместо первой.
+* @param limitValue - Размер страницы.
+* @returns Состояние листинга и примитивы над ним.
+* @example
+* const listing = createCursorListing<BlockDto>(100)
+*/
+var createCursorListing = (limitValue) => {
+	const state = createListingState(limitValue);
+	let lastRequest = 0;
+	const dropCursors = () => {
+		state.cursor.value.next = null;
+		state.cursor.value.prev = null;
+		state.currentCursor.value = null;
+	};
+	return {
+		buildPaginator: (isGoNext) => ({
+			limit: state.limit.value,
+			pageCursor: (isGoNext ? state.cursor.value.next : state.cursor.value.prev) ?? state.currentCursor.value
+		}),
+		isLatestRequest: (id) => id === lastRequest,
+		nextRequestId: () => {
+			lastRequest += 1;
+			return lastRequest;
+		},
+		resetPagination: () => {
+			state.currentPage.value = defaultCurrentPage;
+			state.currentCursor.value = null;
+			state.cursor.value = {
+				next: null,
+				prev: null
+			};
+		},
+		setFilters: (newFilters) => {
+			if (isSameCollection(state.filters.value, newFilters)) return;
+			state.filters.value = newFilters;
+			dropCursors();
+		},
+		setLimit: (newLimit) => {
+			const normalizedLimit = Number(newLimit);
+			if (!Number.isFinite(normalizedLimit) || normalizedLimit < minLimit || normalizedLimit === state.limit.value) return;
+			state.limit.value = normalizedLimit;
+			dropCursors();
+		},
+		setSorting: (newSorting) => {
+			if (isSameCollection(state.sorting.value, newSorting)) return;
+			state.sorting.value = newSorting;
+			dropCursors();
+		},
+		state
+	};
+};
+//#endregion
+export { DEFAULT_LISTING_LIMIT, createCursorListing };

package/dist/store/listing/infinite-listing-store.d.ts

@@ -0,0 +1,21 @@
+import type { FilterInterface, ListingRepositoryInterface, SortingInterface } from '@application-kit/typeorm/listing';
+import type { _ExtractActionsFromSetupStore, _ExtractGettersFromSetupStore, _ExtractStateFromSetupStore, Store } from 'pinia';
+import type { ComputedRef, Ref } from 'vue';
+import type { InfiniteListingStoreInterface } from './infinite-listing-store.interface';
+export interface InfiniteListingInterface<T> {
+    isLimitReached: ComputedRef<boolean>;
+    loadedChunks: ComputedRef<number>;
+    loading: Ref<boolean>;
+    loadMore(): Promise<void>;
+    maxRecords: number;
+    records: Ref<T[]>;
+    reload(): Promise<void>;
+    setFilters(newFilters: FilterInterface[]): void;
+    setSorting(newSorting: SortingInterface[]): void;
+}
+export interface InfiniteListingOptionsInterface {
+    readonly chunkSize: number;
+    readonly maxChunks: number;
+}
+export type InfiniteListingStoreType<T, S extends string> = Store<S, _ExtractStateFromSetupStore<InfiniteListingStoreInterface<T>>, _ExtractGettersFromSetupStore<InfiniteListingStoreInterface<T>>, _ExtractActionsFromSetupStore<InfiniteListingStoreInterface<T>>>;
+export declare const createInfiniteListing: <T>(getRepository: () => ListingRepositoryInterface<T>, options: InfiniteListingOptionsInterface) => InfiniteListingInterface<T>;

package/dist/store/listing/infinite-listing-store.interface.d.ts

@@ -0,0 +1,13 @@
+import type { FilterInterface, SortingInterface } from '@application-kit/typeorm/listing';
+import type { ComputedRef, Ref } from 'vue';
+export interface InfiniteListingStoreInterface<T> {
+    isLimitReached: Readonly<ComputedRef<boolean>>;
+    loadedChunks: Readonly<ComputedRef<number>>;
+    loading: Readonly<Ref<boolean>>;
+    loadMore(): Promise<void>;
+    maxRecords: number;
+    records: Readonly<Ref<T[]>>;
+    reload(): Promise<void>;
+    setFilters(filters: FilterInterface[]): void;
+    setSorting(sorting: SortingInterface[]): void;
+}

package/dist/store/listing/infinite-listing-store.js

@@ -0,0 +1,68 @@
+import { createCursorListing } from "./cursor-listing.js";
+import { computed, ref } from "vue";
+//#region src/store/listing/infinite-listing-store.ts
+/**
+* Cursor listing that appends chunks while scrolling and stops at a hard chunk limit.
+*
+* Отличие от страничного стора ровно одно: ответ ДОБАВЛЯЕТСЯ к строкам, а не замещает их.
+* Всё остальное — состояние, курсоры, порядковый номер запроса — общее (`cursor-listing.ts`).
+*
+* **Предел жёсткий, а не «пока не надоест»**. При окне хранения в несколько суток
+* в таблице блоков миллионы строк, и долистать до нужной нельзя в принципе; поэтому после
+* `maxChunks` порций подгрузка выключается, а интерфейс объясняет, что искать надо поиском.
+* Побочная выгода — в памяти и в DOM не больше `chunkSize × maxChunks` строк, без выгрузки
+* и обратной подгрузки, то есть без целого класса состояний.
+*
+* `totalRecords` не используется вовсе: счётчика страниц нет, считать нечего.
+* @param getRepository - Доступ к репозиторию листинга.
+* @param options - Настройки окна.
+* @param options.chunkSize - Сколько строк в одной порции.
+* @param options.maxChunks - Сколько порций можно набрать до предела.
+* @returns Состояние и действия бесконечного листинга.
+* @example
+* const listing = createInfiniteListing(getRepository, { chunkSize: 100, maxChunks: 10 })
+*/
+var createInfiniteListing = (getRepository, options) => {
+	const listing = createCursorListing(options.chunkSize);
+	const { cursor, filters, loading, records, sorting } = listing.state;
+	const chunks = ref(0);
+	const loadedChunks = computed(() => chunks.value);
+	const isLimitReached = computed(() => chunks.value >= options.maxChunks);
+	const isExhausted = () => chunks.value > 0 && cursor.value.next === null;
+	const fetchChunk = async (isFirst) => {
+		const paginator = listing.buildPaginator(true);
+		const request = listing.nextRequestId();
+		loading.value = true;
+		const data = await getRepository().list(paginator, sorting.value, filters.value);
+		if (!listing.isLatestRequest(request)) return;
+		loading.value = false;
+		records.value = isFirst ? data.data : [...records.value, ...data.data];
+		cursor.value = data.cursor;
+		chunks.value += 1;
+	};
+	return {
+		isLimitReached,
+		loadedChunks,
+		loading,
+		loadMore: async () => {
+			if (loading.value || isLimitReached.value || isExhausted()) return;
+			await fetchChunk(false);
+		},
+		maxRecords: options.chunkSize * options.maxChunks,
+		records,
+		reload: async () => {
+			listing.resetPagination();
+			records.value = [];
+			chunks.value = 0;
+			await fetchChunk(true);
+		},
+		setFilters: (newFilters) => {
+			listing.setFilters(newFilters);
+		},
+		setSorting: (newSorting) => {
+			listing.setSorting(newSorting);
+		}
+	};
+};
+//#endregion
+export { createInfiniteListing };

package/dist/store/listing/listing-store.d.ts

@@ -0,0 +1,7 @@
+import type { ListingRepositoryInterface } from '@application-kit/typeorm/listing';
+import type { _ExtractActionsFromSetupStore, _ExtractGettersFromSetupStore, _ExtractStateFromSetupStore, Store } from 'pinia';
+import type { ListingStoreInterface } from './listing-store.interface';
+export type ListingStoreType<T, S extends string> = Store<S, _ExtractStateFromSetupStore<ListingStoreInterface<T>>, _ExtractGettersFromSetupStore<ListingStoreInterface<T>>, _ExtractActionsFromSetupStore<ListingStoreInterface<T>>>;
+export declare const useListingStore: <T, S extends string>(getRepository: () => ListingRepositoryInterface<T>, storeName: S, options?: {
+    readonly limit?: number;
+}) => ListingStoreType<T, S>;

package/dist/store/listing/listing-store.interface.d.ts

@@ -0,0 +1,21 @@
+import type { CursorInterface, FilterInterface, SortingInterface } from '@application-kit/typeorm/listing';
+import type { Ref } from 'vue';
+export interface ListingStoreInterface<T> {
+    consumeServerRender(): boolean;
+    currentCursor: Readonly<Ref<null | string>>;
+    currentPage: Readonly<Ref<number>>;
+    cursor: Readonly<Ref<CursorInterface>>;
+    error: Readonly<Ref<unknown>>;
+    getRecords(page: number): Promise<void>;
+    isServerRendered: Readonly<Ref<boolean>>;
+    limit: Readonly<Ref<number>>;
+    loading: Readonly<Ref<boolean>>;
+    markServerRendered(): void;
+    records: Readonly<Ref<T[]>>;
+    refresh(): Promise<void>;
+    resetPagination(): void;
+    setFilters(filters: FilterInterface[]): void;
+    setLimit(limit: number | string): void;
+    setSorting(sorting: SortingInterface[]): void;
+    totalRecords: Readonly<Ref<number>>;
+}

package/dist/store/listing/listing-store.js

@@ -0,0 +1,114 @@
+import { createCursorListing } from "./cursor-listing.js";
+import { ref } from "vue";
+import { defineStore } from "pinia";
+//#region src/store/listing/listing-store.ts
+var createRequestRunner = (listing, error) => {
+	const { loading } = listing.state;
+	const settle = (request, apply) => {
+		if (!listing.isLatestRequest(request)) return;
+		loading.value = false;
+		apply();
+	};
+	return async (fetchPage, applyPage) => {
+		const request = listing.nextRequestId();
+		loading.value = true;
+		error.value = null;
+		try {
+			const data = await fetchPage();
+			settle(request, () => {
+				applyPage(data);
+			});
+		} catch (error_) {
+			settle(request, () => {
+				error.value = error_;
+			});
+		}
+	};
+};
+/**
+* Page-by-page listing store: one page in memory, navigation through the cursor both ways.
+*
+* Курсорная механика (состояние, пагинатор, порядковый номер запроса, сброс) живёт в
+* `cursor-listing.ts` и делится с бесконечным скроллом блоков. Здесь остаётся
+* только то, чем страничный режим отличается: ответ ЗАМЕЩАЕТ строки, а не добавляет их.
+* @param getRepository - Доступ к репозиторию листинга.
+* @param storeName - Имя pinia-стора.
+* @param options - Настройки стора.
+* @param options.limit - Размер страницы, если он отличается от дефолтного.
+* @returns Pinia-стор листинга.
+* @example
+* const listing = useListingStore<Block, 'blocks'>(getRepository, 'blocks')
+*/
+var useListingStore = (getRepository, storeName, options) => defineStore(storeName, () => {
+	const listing = createCursorListing(options?.limit ?? 20);
+	const { currentCursor, currentPage, cursor, filters, limit, loading, records, sorting, totalRecords } = listing.state;
+	const error = ref(null);
+	const isServerRendered = ref(false);
+	let shownPageCursor = null;
+	const applyListingResult = (data, isGoNext, pageCursor) => {
+		shownPageCursor = pageCursor;
+		records.value = data.data;
+		totalRecords.value = data.totalRecords;
+		currentCursor.value = isGoNext ? cursor.value.next ?? data.cursor.next : cursor.value.prev ?? data.cursor.prev;
+		cursor.value = data.cursor;
+	};
+	const runRequest = createRequestRunner(listing, error);
+	const getRecords = async (page) => {
+		const isGoNext = page >= currentPage.value;
+		const paginator = listing.buildPaginator(isGoNext);
+		currentPage.value = page;
+		await runRequest(async () => getRepository().list(paginator, sorting.value, filters.value), (data) => {
+			applyListingResult(data, isGoNext, paginator.pageCursor);
+		});
+	};
+	const refresh = async () => {
+		const pageCursor = shownPageCursor;
+		await runRequest(async () => getRepository().list({
+			limit: limit.value,
+			pageCursor
+		}, sorting.value, filters.value), (data) => {
+			records.value = data.data;
+			totalRecords.value = data.totalRecords;
+			cursor.value = data.cursor;
+		});
+	};
+	return {
+		consumeServerRender: () => {
+			const wasServerRendered = isServerRendered.value;
+			isServerRendered.value = false;
+			return wasServerRendered;
+		},
+		currentCursor,
+		currentPage,
+		cursor,
+		error,
+		getRecords,
+		isServerRendered,
+		limit,
+		loading,
+		markServerRendered: () => {
+			isServerRendered.value = true;
+		},
+		records,
+		refresh,
+		resetPagination: () => {
+			shownPageCursor = null;
+			listing.resetPagination();
+		},
+		setFilters: (newFilters) => {
+			shownPageCursor = null;
+			listing.setFilters(newFilters);
+		},
+		setLimit: (newLimit) => {
+			shownPageCursor = null;
+			listing.setLimit(newLimit);
+		},
+		setSorting: (newSorting) => {
+			shownPageCursor = null;
+			listing.setSorting(newSorting);
+		},
+		totalRecords
+	};
+})();
+//#endregion
+export { useListingStore };

package/dist/style.css

@@ -0,0 +1,158 @@
+@charset "UTF-8";
+.date-range-filter[data-v-30d77bcb] {
+  display: flex;
+  margin-bottom: 0.75rem;
+}
+.date-range-filter-input[data-v-30d77bcb] {
+  /* Определённая ширина (не width:100%): применяется и в блочном контексте, и внутри flex-тулбара
+     (Addresses), где width:100% схлопывался бы до контента и max-width визуально не срабатывал. */
+  width: 15rem;
+  max-width: 100%;
+}
+.date-range-filter-input[data-v-30d77bcb] input {
+  width: 100%;
+}
+.date-range-filter-presets[data-v-30d77bcb] {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.25rem;
+  justify-content: center;
+  padding: 0.5rem;
+}
+
+/* Было absolute bottom-0 w-screen прежней utility-библиотеки — значения перенесены 1:1. */
+.gradient-background[data-v-7d3d1707] {
+  position: absolute;
+  bottom: 0;
+  width: 100vw;
+}
+/* Значения перенесены 1:1 из снесённой utility-библиотеки (шкала: 1 = 0.25rem, 2 = 0.5rem,
+   4 = 1.5rem, 5 = 2rem; lg = min-width 992px; w-6 = 50%). */
+.error-overlay[data-v-6de1c932] {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  color: var(--ui-primary-color);
+  background-color: var(--ui-primary-contrast-color);
+  opacity: 0.7;
+}
+.error-viewport[data-v-6de1c932] {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.error-column[data-v-6de1c932] {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100vh;
+}
+@media screen and (width >= 992px) {
+.error-column[data-v-6de1c932] {
+    width: 50%;
+}
+}
+.error-panel[data-v-6de1c932] {
+  z-index: 5;
+  width: 50%;
+}
+.error-code[data-v-6de1c932] {
+  padding: 0.25rem 0.5rem;
+  font-size: 1.125rem;
+  color: light-dark(var(--ui-surface-0), var(--ui-surface-900));
+  border-radius: 0.375rem;
+}
+.error-title[data-v-6de1c932] {
+  margin: 1.5rem 0;
+  font-size: 3rem;
+  font-weight: 300;
+}
+.error-divider[data-v-6de1c932] {
+  width: 10rem;
+}
+.error-message[data-v-6de1c932] {
+  margin-top: 1.5rem;
+  font-size: 1.125rem;
+  color: var(--ui-text-color);
+}
+.error-action[data-v-6de1c932] {
+  margin-top: 2rem;
+  border: none;
+}
+.error-support[data-v-6de1c932] {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+  align-items: center;
+  margin-top: 1.5rem;
+}
+.error-support-label[data-v-6de1c932] {
+  width: 100%;
+  font-size: 0.875rem;
+  color: var(--ui-text-muted-color);
+}
+
+/* Идентификатор моноширинным и с переносом: это 32 hex-символа, и на узком экране он обязан
+   переноситься, а не расталкивать панель. */
+.error-support-id[data-v-6de1c932] {
+  font-family: monospace;
+  font-size: 1rem;
+  color: var(--ui-text-color);
+  word-break: break-all;
+}[class*=icon--32][data-v-c70111ef] {
+  width: 32px;
+  height: 32px;
+}.tooltip__text[data-v-405629ae] {
+  width: fit-content;
+  padding: 0.75rem;
+  margin: 0.25rem;
+  white-space: nowrap;
+}.icon-cell[data-v-444fb937] {
+  display: inline-block;
+  vertical-align: middle;
+}.empty-layout__corner[data-v-8ec8eae8] {
+  position: fixed;
+  top: 1rem;
+  right: 1rem;
+  z-index: 100;
+}.data-table-frame__error[data-v-dac8d846] {
+  margin-bottom: 0.75rem;
+}
+.data-table__body-cell[data-v-dac8d846] {
+  padding: 0.75rem;
+  vertical-align: middle;
+}
+.data-table__header-cell[data-v-dac8d846] {
+  padding: 0.75rem;
+  vertical-align: middle;
+}
+.data-table__filter-row-item[data-v-dac8d846] {
+  padding: 0.75rem 1.25rem;
+}
+.data-table__paginator[data-v-dac8d846] {
+  padding: 1rem 0 1rem 1rem;
+}
+.data-table__paginator-row-per-page-input[data-v-dac8d846] {
+  padding: 1rem 0 1rem 1rem;
+}
+.data-table__paginator-row-per-page-item[data-v-dac8d846] {
+  padding: 0.75rem 1.25rem;
+}.infinite-data-table__more[data-v-2c01be04] {
+  padding: 0.75rem;
+  color: var(--ui-text-muted-color);
+  text-align: center;
+}
+.infinite-data-table__sentinel[data-v-2c01be04] {
+  height: 1px;
+}.time-lag[data-v-6caca029] {
+  color: green;
+}
+.time-lag--alert[data-v-6caca029] {
+  color: red;
+}.p-toast.p-toast-top-right, .p-toast.p-toast-top-left, .p-toast.p-toast-top-center {
+  top: 85px;
+}/*$vite$:1*/