@feugene/granularity 0.13.0 → 0.16.0

package/dist/types/src/components/GrFormSection/defaults.d.ts

@@ -0,0 +1,14 @@
+import type { GrFormSectionHeadingLevel } from './grFormSectionStyles';
+/**
+ * Пропы `GrFormSection`, настраиваемые глобально через
+ * `<GrConfigProvider :component-defaults="{ GrFormSection: { … } }">`.
+ * Только оформление — см. `GrButton/defaults.ts`.
+ */
+export interface GrFormSectionConfigurableProps {
+    headingLevel: GrFormSectionHeadingLevel;
+}
+declare module '../GrConfigProvider/context' {
+    interface GrComponentDefaultsRegistry {
+        GrFormSection: GrFormSectionConfigurableProps;
+    }
+}

package/dist/types/src/components/GrFormSection/grFormSectionStyles.d.ts

@@ -0,0 +1,12 @@
+/**
+ * Уровень заголовка секции. `h1` намеренно нет: страница задаёт его сама, а
+ * секция формы — это подраздел внутри уже существующей структуры.
+ */
+export declare const GR_FORM_SECTION_HEADING_LEVELS: readonly [2, 3, 4, 5, 6];
+export type GrFormSectionHeadingLevel = typeof GR_FORM_SECTION_HEADING_LEVELS[number];
+export declare const formSectionRootClass = "grid gap-4";
+/** Шапка: заголовок с описанием слева, действия справа. */
+export declare const formSectionHeaderClass = "flex flex-wrap items-start justify-between gap-3";
+export declare const formSectionTitleClass = "m-0 text-[length:var(--gr-text-sm)] font-700";
+export declare const formSectionDescriptionClass = "mt-1 text-[length:var(--gr-text-sm)] text-[var(--gr-muted-fg)]";
+export declare const formSectionActionsClass = "flex shrink-0 items-center gap-2";

package/dist/types/src/components/GrFormSection/index.d.ts

@@ -2,3 +2,7 @@ export { default } from './GrFormSection.vue';
 export { default as GrFormSection } from './GrFormSection.vue';
 export type { GrFormSectionProps } from './GrFormSection.vue';
 export { grFormSectionConfig } from './config';
+export type { GrFormSectionConfigurableProps } from './defaults';
+export { GR_FORM_SECTION_HEADING_LEVELS } from './grFormSectionStyles';
+export type { GrFormSectionHeadingLevel } from './grFormSectionStyles';
+export { grFormSectionSafelist } from './safelist';

package/dist/types/src/components/GrFormSection/safelist.d.ts

@@ -0,0 +1 @@
+export declare const grFormSectionSafelist: string[];

package/dist/types/src/components/GrIcon/GrIcon.vue.d.ts

@@ -1,12 +1,38 @@
-export type GrIconSize = 'sm' | 'md' | 'lg';
-type __VLS_Props = {
+import { type GrIconSize, type GrIconTone } from './grIconStyles';
+export type { GrIconSize, GrIconTone } from './grIconStyles';
+export interface GrIconProps {
+    /** Размер по шкале пакета либо произвольный в пикселях. */
     size?: GrIconSize | number;
-};
+    /**
+     * Имя значимой иконки. Задан — иконка объявляется `role="img"` и перестаёт
+     * быть скрытой. Не задан — иконка декоративна.
+     */
+    label?: string;
+    /** Цвет из палитры. `current` — наследовать цвет текста родителя. */
+    tone?: GrIconTone;
+    /** Вращение — для спиннеров. */
+    spin?: boolean;
+}
 declare var __VLS_1: {};
 type __VLS_Slots = {} & {
     default?: (props: typeof __VLS_1) => any;
 };
-declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPropTypes<__VLS_TypePropsToOption<__VLS_Props>>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToOption<__VLS_Props>>> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToOption<GrIconProps>, {
+    size: undefined;
+    label: undefined;
+    tone: string;
+    spin: boolean;
+}>>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToOption<GrIconProps>, {
+    size: undefined;
+    label: undefined;
+    tone: string;
+    spin: boolean;
+}>>> & Readonly<{}>, {
+    tone: GrIconTone;
+    size: GrIconSize | number;
+    label: string;
+    spin: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;
 export default _default;
@@ -18,8 +44,18 @@ type __VLS_TypePropsToOption<T> = {
         required: true;
     };
 };
+type __VLS_WithDefaults<P, D> = {
+    [K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_PrettifyLocal<P[K] & {
+        default: D[K];
+    }> : P[K];
+};
 type __VLS_WithSlots<T, S> = T & {
     new (): {
         $slots: S;
     };
 };
+type __VLS_PrettifyLocal<T> = (T extends any ? {
+    [K in keyof T]: T[K];
+} : {
+    [K in keyof T as K]: T[K];
+}) & {};

package/dist/types/src/components/GrIcon/config.d.ts

@@ -1 +1 @@
-export declare const grIconConfig: import("@feugene/unocss-preset-granular").GranularComponentDescriptor<"GrIcon">;
+export declare const grIconConfig: import("@feugene/unocss-preset-granular/contract").GranularComponentDescriptor<"GrIcon">;

package/dist/types/src/components/GrIcon/defaults.d.ts

@@ -0,0 +1,14 @@
+import type { GrComponentSize } from '../shared/sizes';
+/**
+ * Пропы `GrIcon`, настраиваемые глобально через
+ * `<GrConfigProvider :component-defaults="{ GrIcon: { … } }">`.
+ * Только оформление — см. `GrButton/defaults.ts`.
+ */
+export interface GrIconConfigurableProps {
+    size: GrComponentSize;
+}
+declare module '../GrConfigProvider/context' {
+    interface GrComponentDefaultsRegistry {
+        GrIcon: GrIconConfigurableProps;
+    }
+}

package/dist/types/src/components/GrIcon/grIconStyles.d.ts

@@ -0,0 +1,25 @@
+import type { GrComponentSize } from '../shared/sizes';
+import type { GrTone } from '../shared/tones';
+export type GrIconSize = GrComponentSize;
+/** Цвет иконки: тон палитры либо наследование от родителя. */
+export type GrIconTone = GrTone | 'current';
+/**
+ * Шкала размеров — токенами, а не числами: иконка обязана масштабироваться
+ * вместе с темой, а не вместе с пересборкой пакета. Произвольный размер
+ * задаётся числом прямо на компоненте, это escape-hatch мимо шкалы.
+ */
+export declare const iconSizeVarBySize: Record<GrIconSize, string>;
+/**
+ * Тон → токен **текста**, а не насыщенный тон: правило пакета запрещает
+ * насыщенный цвет как цвет текста (контраст на `-light`-подложках падает до
+ * 2:1). Отображение повторяет `GrAlert/grAlertStyles.ts`: у `primary` и
+ * `neutral` пары `-text` нет, поэтому берутся ближайшие семантические роли.
+ */
+export declare const iconToneClass: Record<GrTone, string>;
+/** `gr-icon` — не утилита, а зацепка для глобального стиля компонента. */
+export declare const iconHookClass = "gr-icon";
+export declare const iconUtilityClass = "inline-flex items-center justify-center align-middle";
+export declare const iconBaseClass = "gr-icon inline-flex items-center justify-center align-middle";
+export declare const iconSpinClass = "animate-spin";
+export declare function grIconToneClass(tone: GrIconTone): string;
+export declare const grIconClassTokens: string[];

package/dist/types/src/components/GrIcon/index.d.ts

@@ -1,3 +1,7 @@
 export { default } from './GrIcon.vue';
 export { default as GrIcon } from './GrIcon.vue';
 export { grIconConfig } from './config';
+export { grIconSafelist } from './safelist';
+export type { GrIconSize, GrIconTone } from './grIconStyles';
+export type { GrIconConfigurableProps } from './defaults';
+export type { GrIconProps } from './GrIcon.vue';

package/dist/types/src/components/GrIcon/safelist.d.ts

@@ -0,0 +1 @@
+export declare const grIconSafelist: string[];

package/dist/types/src/components/GrImageViewer/GrImageViewer.vue.d.ts

@@ -13,9 +13,20 @@
  * `useWheelGesture` (зум колесом/трекпадом с rAF-батчингом), `useViewerKeyboard`
  * (клавиатура). Сам SFC отвечает за оверлей, индекс изображений и композицию.
  */
-type __VLS_Props = {
+/** Кадр просмотрщика: только адрес или адрес с альтернативным текстом. */
+export type GrImageViewerItem = {
+    src: string;
+    alt?: string;
+};
+export type GrImageViewerSource = string | GrImageViewerItem;
+export interface GrImageViewerProps {
     modelValue: boolean;
-    urlList: string[];
+    /**
+     * Кадры. Строка — только адрес; объект `{ src, alt }` даёт изображению
+     * альтернативный текст: без него просмотрщик пуст для незрячего
+     * пользователя, а придумать текст за потребителя компонент не может.
+     */
+    urlList: GrImageViewerSource[];
     initialIndex?: number;
     zoomRate?: number;
     minScale?: number;
@@ -28,7 +39,11 @@ type __VLS_Props = {
     wheelZoom?: boolean;
     /** Включает перетаскивание (pan) картинки мышью. При наведении курсор «рука». По умолчанию выключено. */
     draggable?: boolean;
-    zIndex?: number;
+    /**
+     * Имя CSS-переменной слоя — escape-hatch мимо `--gr-z-modal`. Сырое число
+     * компонент не принимает: слой задаётся шкалой, см. `docs/z-index.md`.
+     */
+    zIndexVar?: string;
     /** i18n: aria-label кнопки закрытия. */
     closeLabel?: string;
     /** i18n: aria-label кнопки «предыдущее изображение». */
@@ -41,25 +56,56 @@ type __VLS_Props = {
     zoomOutLabel?: string;
     /** i18n: aria-label кнопки «сбросить масштаб». */
     resetZoomLabel?: string;
+    /** i18n: aria-label кнопки «до натурального размера». */
+    zoomToNaturalLabel?: string;
     /** i18n: aria-label кнопки «повернуть влево». */
     rotateLeftLabel?: string;
     /** i18n: aria-label кнопки «повернуть вправо». */
     rotateRightLabel?: string;
+    /** Показывать кнопку скачивания текущего кадра. */
+    showDownload?: boolean;
+    /** i18n: aria-label кнопки «скачать». */
+    downloadLabel?: string;
     /** i18n: текст в пустом состоянии (нет изображений). */
     emptyText?: string;
-};
+    /**
+     * Доступное имя слоя. Модальный диалог без имени — нарушение
+     * `aria-dialog-name`: диктор объявит «диалог» и замолчит.
+     */
+    ariaLabel?: string;
+}
+export interface GrImageViewerEmits {
+    (e: 'update:modelValue', value: boolean): void;
+    (e: 'close'): void;
+    /** Показан другой кадр. */
+    (e: 'change', newIndex: number): void;
+    (e: 'rotate', deg: number): void;
+    /** Нажата кнопка скачивания. Само скачивание компонент уже запустил. */
+    (e: 'download', payload: {
+        src: string;
+        alt: string;
+        index: number;
+    }): void;
+}
 type GrImageViewerToolbarActions = {
     close: () => void;
     prev: () => void;
     next: () => void;
     zoomIn: () => void;
     zoomOut: () => void;
+    /** Масштаб «один к одному»: реальные 100%, а не номинальные. */
+    zoomToNatural: () => void;
     reset: () => void;
     rotateLeft: () => void;
     rotateRight: () => void;
+    /** Скачать текущий кадр — то же, что делает кнопка тулбара. */
+    download: () => void;
 };
-declare var __VLS_40: {
+declare var __VLS_54: {
     index: number;
+    /** Текущий кадр — адрес и альтернативный текст. */
+    src?: string;
+    alt: string;
     displayIndex: number;
     total: number;
     scale: number;
@@ -75,8 +121,11 @@ declare var __VLS_40: {
     /** Реальный масштаб в процентах, отформатированный (например `67`). */
     realScalePercent: string;
     actions: GrImageViewerToolbarActions;
-}, __VLS_42: {
+}, __VLS_89: {
     index: number;
+    /** Текущий кадр — адрес и альтернативный текст. */
+    src?: string;
+    alt: string;
     displayIndex: number;
     total: number;
     scale: number;
@@ -94,11 +143,11 @@ declare var __VLS_40: {
     actions: GrImageViewerToolbarActions;
 };
 type __VLS_Slots = {} & {
-    toolbar?: (props: typeof __VLS_40) => any;
+    toolbar?: (props: typeof __VLS_54) => any;
 } & {
-    'toolbar-actions'?: (props: typeof __VLS_42) => any;
+    'toolbar-actions'?: (props: typeof __VLS_89) => any;
 };
-declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToOption<__VLS_Props>, {
+declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToOption<GrImageViewerProps>, {
     initialIndex: number;
     zoomRate: number;
     minScale: number;
@@ -109,22 +158,31 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
     showZoomValue: boolean;
     wheelZoom: boolean;
     draggable: boolean;
-    zIndex: undefined;
+    zIndexVar: undefined;
     closeLabel: undefined;
     prevLabel: undefined;
     nextLabel: undefined;
     zoomInLabel: undefined;
     zoomOutLabel: undefined;
     resetZoomLabel: undefined;
+    zoomToNaturalLabel: undefined;
     rotateLeftLabel: undefined;
     rotateRightLabel: undefined;
+    showDownload: boolean;
+    downloadLabel: undefined;
     emptyText: undefined;
-}>>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    ariaLabel: undefined;
+}>>, GrImageViewerToolbarActions, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:modelValue": (value: boolean) => void;
     close: () => void;
-    switch: (newIndex: number) => void;
+    change: (newIndex: number) => void;
     rotate: (deg: number) => void;
-}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToOption<__VLS_Props>, {
+    download: (payload: {
+        src: string;
+        alt: string;
+        index: number;
+    }) => void;
+}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToOption<GrImageViewerProps>, {
     initialIndex: number;
     zoomRate: number;
     minScale: number;
@@ -135,23 +193,33 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
     showZoomValue: boolean;
     wheelZoom: boolean;
     draggable: boolean;
-    zIndex: undefined;
+    zIndexVar: undefined;
     closeLabel: undefined;
     prevLabel: undefined;
     nextLabel: undefined;
     zoomInLabel: undefined;
     zoomOutLabel: undefined;
     resetZoomLabel: undefined;
+    zoomToNaturalLabel: undefined;
     rotateLeftLabel: undefined;
     rotateRightLabel: undefined;
+    showDownload: boolean;
+    downloadLabel: undefined;
     emptyText: undefined;
+    ariaLabel: undefined;
 }>>> & Readonly<{
     onClose?: (() => any) | undefined;
-    onSwitch?: ((newIndex: number) => any) | undefined;
+    onChange?: ((newIndex: number) => any) | undefined;
     onRotate?: ((deg: number) => any) | undefined;
     "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
+    onDownload?: ((payload: {
+        src: string;
+        alt: string;
+        index: number;
+    }) => any) | undefined;
 }>, {
-    zIndex: number;
+    zIndexVar: string;
+    ariaLabel: string;
     emptyText: string;
     closeLabel: string;
     showProgress: boolean;
@@ -169,8 +237,11 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
     zoomInLabel: string;
     zoomOutLabel: string;
     resetZoomLabel: string;
+    zoomToNaturalLabel: string;
     rotateLeftLabel: string;
     rotateRightLabel: string;
+    showDownload: boolean;
+    downloadLabel: string;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;

package/dist/types/src/components/GrImageViewer/composables/usePointerGestures.d.ts

@@ -0,0 +1,36 @@
+import type { ZoomAnchor } from './useZoomPan';
+export interface UsePointerGesturesOptions {
+    /** Включены ли жесты вовсе (есть кадры). */
+    enabled: () => boolean;
+    /** Текущий масштаб: на неувеличенном кадре одиночный жест листает, а не тянет. */
+    scale: () => number;
+    /** Есть ли куда листать (кадров больше одного). */
+    canSwipe: () => boolean;
+    /** Масштаб с якорем — тот же, что у колеса. */
+    setScaleAt: (value: number, anchor: ZoomAnchor) => void;
+    pan: {
+        start: (x: number, y: number) => void;
+        move: (x: number, y: number) => void;
+        end: () => void;
+    };
+    onSwipeLeft: () => void;
+    onSwipeRight: () => void;
+}
+/**
+ * usePointerGestures — сенсорные жесты просмотрщика: pinch-zoom двумя пальцами
+ * и горизонтальный свайп для листания.
+ *
+ * Живёт на тех же pointer-событиях, что и перетаскивание мышью: разделение идёт
+ * по числу активных указателей, а не по типу устройства — трекпад и стилус
+ * ведут себя как мышь, палец как палец, отдельных веток на `touch*` не нужно.
+ *
+ * Что делает одиночный жест, решает масштаб: на увеличенном кадре тянуть важнее
+ * (иначе до краёв не добраться), на вписанном — листать.
+ */
+export declare function usePointerGestures(options: UsePointerGesturesOptions): {
+    isPinching: import("vue").Ref<boolean, boolean>;
+    onPointerDown: (event: PointerEvent) => void;
+    onPointerMove: (event: PointerEvent) => void;
+    onPointerUp: (event: PointerEvent) => void;
+    reset: () => void;
+};

package/dist/types/src/components/GrImageViewer/composables/useViewerKeyboard.d.ts

@@ -7,13 +7,16 @@ export interface ViewerKeyboardActions {
     reset: () => void;
 }
 export interface UseViewerKeyboardOptions {
-    /** Закрывать ли по Escape (проп `closeOnPressEscape`). */
-    closeOnEscape: () => boolean;
     actions: ViewerKeyboardActions;
 }
 /**
- * useViewerKeyboard — клавиатурное управление просмотрщиком:
- * Esc — закрыть, стрелки — переключение, `+`/`-`/`0` — зум/сброс.
+ * useViewerKeyboard — клавиатурное управление просмотрщиком: стрелки —
+ * переключение, `+`/`-`/`0` — зум/сброс.
+ *
+ * Esc сюда не входит: он идёт через общий стек dismissible-слоёв
+ * (`useDismissible`), иначе просмотрщик, открытый поверх модалки, закрывал бы
+ * не себя. Локальный `@keydown` до него всё равно не дошёл бы — стек гасит
+ * событие в capture-фазе.
  */
 export declare function useViewerKeyboard(options: UseViewerKeyboardOptions): {
     onKeydown: (event: KeyboardEvent) => void;

package/dist/types/src/components/GrImageViewer/composables/useWheelGesture.d.ts

@@ -1,8 +1,9 @@
+import type { ZoomAnchor } from './useZoomPan';
 export interface UseWheelGestureOptions {
     /** Разрешён ли зум колесом (проп `wheelZoom` + наличие изображений). */
     enabled: () => boolean;
-    /** Применить множитель масштаба (накопленный за кадр). */
-    applyZoomFactor: (factor: number) => void;
+    /** Применить множитель масштаба (накопленный за кадр) с якорем в точке курсора. */
+    applyZoomFactor: (factor: number, anchor: ZoomAnchor) => void;
 }
 /**
  * useWheelGesture — масштабирование колесом мыши / жестом трекпада с батчингом

package/dist/types/src/components/GrImageViewer/composables/useZoomPan.d.ts

@@ -1,19 +1,26 @@
 import { type Ref } from 'vue';
 export declare function formatPercent(value: number): string;
+/** Точка в координатах вьюпорта — курсор или середина между пальцами. */
+export interface ZoomAnchor {
+    clientX: number;
+    clientY: number;
+}
 export interface UseZoomPanOptions {
     minScale: () => number;
     maxScale: () => number;
     zoomRate: () => number;
+    /** Тянуть можно и на неувеличенном кадре. Увеличенный тянется всегда. */
     draggable: () => boolean;
     /** Ссылка на `<img>` — для измерения layout-размера и подписки ResizeObserver. */
     imageEl: Ref<HTMLImageElement | null>;
+    /** Область кадра: задаёт систему координат для якорного зума и границы пана. */
+    viewportEl: Ref<HTMLElement | null>;
     /** Колбэк на поворот (эмит `rotate`). */
     onRotate: (deg: number) => void;
 }
 /**
  * useZoomPan — состояние и логика масштаба/поворота/панорамирования картинки,
  * а также метрики (натуральный/вписанный/фактический размер, реальный масштаб).
- * Вынесено из монолитного `GrImageViewer.vue`.
  */
 export declare function useZoomPan(options: UseZoomPanOptions): {
     scale: Ref<number, number>;
@@ -21,6 +28,7 @@ export declare function useZoomPan(options: UseZoomPanOptions): {
     offsetX: Ref<number, number>;
     offsetY: Ref<number, number>;
     isDragging: Ref<boolean, boolean>;
+    isPannable: import("vue").ComputedRef<boolean>;
     naturalWidth: Ref<number, number>;
     naturalHeight: Ref<number, number>;
     fittedWidth: Ref<number, number>;
@@ -34,16 +42,22 @@ export declare function useZoomPan(options: UseZoomPanOptions): {
     realScale: import("vue").ComputedRef<number>;
     realScalePercent: import("vue").ComputedRef<string>;
     setScale: (value: number) => void;
-    zoomIn: () => void;
-    zoomOut: () => void;
+    setScaleAt: (value: number, anchor?: ZoomAnchor) => void;
+    zoomIn: (anchor?: ZoomAnchor) => void;
+    zoomOut: (anchor?: ZoomAnchor) => void;
+    zoomToNatural: () => void;
     rotateLeft: () => void;
     rotateRight: () => void;
     resetTransform: () => void;
     resetImageMetrics: () => void;
     measureFitted: () => void;
+    clampOffsets: () => void;
     onImageLoad: (event: Event) => void;
     startObservingImage: () => void;
     stopObservingImage: () => void;
+    startPan: (x: number, y: number) => void;
+    movePan: (x: number, y: number) => void;
+    endPan: () => void;
     onPointerDown: (event: PointerEvent) => void;
     onPointerMove: (event: PointerEvent) => void;
     onPointerUp: (event: PointerEvent) => void;

package/dist/types/src/components/GrImageViewer/config.d.ts

@@ -1 +1 @@
-export declare const grImageViewerConfig: import("@feugene/unocss-preset-granular").GranularComponentDescriptor<"GrImageViewer">;
+export declare const grImageViewerConfig: import("@feugene/unocss-preset-granular/contract").GranularComponentDescriptor<"GrImageViewer">;

package/dist/types/src/components/GrImageViewer/grImageViewerStyles.d.ts

@@ -0,0 +1,21 @@
+/**
+ * Классы хрома просмотрщика.
+ *
+ * Живут отдельным `.ts`-хелпером и целиком объявлены в safelist: бандлер волен
+ * вынести модуль в общий `dist/chunks/`, вне области скана компонента, и у
+ * изолированного потребителя хром остался бы без цветов — правило про safelist.
+ *
+ * Цвета — покомпонентные токены (`themes/*.css`), а не литералы `bg-black/35`:
+ * так потребитель может перекрасить панель под свой продукт, не переписывая
+ * шаблон.
+ */
+export declare const scrimClass = "absolute inset-0 bg-[var(--gr-image-viewer-scrim)] backdrop-blur-sm";
+/** Круглая кнопка хрома: закрыть, предыдущее/следующее изображение. */
+export declare const chromeButtonClass = "flex items-center justify-center rounded-[var(--gr-radius-full)] border border-[var(--gr-image-viewer-chrome-brd)] bg-[var(--gr-image-viewer-chrome-bg)] text-[var(--gr-image-viewer-chrome-fg)] transition-colors hover:bg-[var(--gr-image-viewer-chrome-bg-hover)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--gr-image-viewer-ring)]";
+/** Кнопка внутри панели инструментов — без рамки, подсветка мягкая. */
+export declare const toolbarButtonClass = "flex items-center justify-center rounded-[var(--gr-radius-full)] text-[var(--gr-image-viewer-chrome-fg)] transition-colors hover:bg-[var(--gr-image-viewer-chrome-bg-soft)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--gr-image-viewer-ring)]";
+export declare const toolbarShellClass = "rounded-[var(--gr-radius-full)] border border-[var(--gr-image-viewer-chrome-brd)] bg-[var(--gr-image-viewer-chrome-bg)] p-1 backdrop-blur-sm flex items-center gap-1";
+export declare const toolbarSeparatorClass = "mx-1 h-6 w-px bg-[var(--gr-image-viewer-chrome-brd)]";
+/** Плашки счётчика и масштаба. */
+export declare const badgeClass = "rounded-[var(--gr-radius-full)] bg-[var(--gr-image-viewer-chrome-bg)] px-3 py-1 text-[length:var(--gr-text-xs)] leading-[var(--gr-leading-xs)] text-[var(--gr-image-viewer-chrome-fg)] sm:text-[length:var(--gr-text-sm)] leading-[var(--gr-leading-sm)]";
+export declare const emptyStateClass = "rounded-[var(--gr-radius-xl)] border border-[var(--gr-image-viewer-chrome-brd)] bg-[var(--gr-image-viewer-chrome-bg)] px-4 py-3 text-[length:var(--gr-text-sm)] leading-[var(--gr-leading-sm)] text-[var(--gr-image-viewer-chrome-fg-muted)]";

package/dist/types/src/components/GrImageViewer/index.d.ts

@@ -1,3 +1,10 @@
+import type { ComponentExposed } from '../shared/instance';
+import type GrImageViewerComponent from './GrImageViewer.vue';
 export { default } from './GrImageViewer.vue';
 export { default as GrImageViewer } from './GrImageViewer.vue';
+export type { GrImageViewerItem, GrImageViewerSource } from './GrImageViewer.vue';
 export { grImageViewerConfig } from './config';
+export { grImageViewerSafelist } from './safelist';
+export type { GrImageViewerProps } from './GrImageViewer.vue';
+export type { GrImageViewerEmits } from './GrImageViewer.vue';
+export type GrImageViewerInstance = ComponentExposed<typeof GrImageViewerComponent>;

package/dist/types/src/components/GrImageViewer/safelist.d.ts

@@ -0,0 +1 @@
+export declare const grImageViewerSafelist: string[];