@feugene/granularity 0.49.0 → 0.50.0

package/dist/types/components/GrAutocomplete/composables/useAutocompleteValues.d.ts

@@ -1,5 +1,5 @@
 import type { ComputedRef, Ref, ShallowRef } from 'vue';
-import type { GrAutocompleteModelValue, GrAutocompleteOption, GrAutocompleteValue } from '../GrAutocomplete.vue';
+import type { GrAutocompleteModelValue, GrAutocompleteOption, GrAutocompleteOptionOrGroup, GrAutocompleteValue } from '../GrAutocomplete.vue';
 /**
  * Значение и опции `GrAutocomplete`: что выбрано и как это назвать.
  *
@@ -9,14 +9,17 @@ import type { GrAutocompleteModelValue, GrAutocompleteOption, GrAutocompleteValu
  */
 export interface UseAutocompleteValuesOptions<TValue extends GrAutocompleteValue> {
     modelValue: () => GrAutocompleteModelValue<TValue>;
-    options: () => GrAutocompleteOption<TValue>[] | undefined;
+    options: () => GrAutocompleteOptionOrGroup<TValue>[] | undefined;
     multiple: () => boolean;
     fetchOptions: () => unknown;
-    remoteOptions: ShallowRef<GrAutocompleteOption<TValue>[]>;
+    remoteOptions: ShallowRef<GrAutocompleteOptionOrGroup<TValue>[]>;
     remoteAnswered: Ref<boolean>;
 }
 export interface AutocompleteValues<TValue extends GrAutocompleteValue> {
-    optionsResolved: ComputedRef<GrAutocompleteOption<TValue>[]>;
+    /** Список как его задал потребитель — с группами, если они есть. */
+    optionsResolved: ComputedRef<GrAutocompleteOptionOrGroup<TValue>[]>;
+    /** Тот же список без групп: по нему ищут метку выбранного и проверяют дубли. */
+    flatOptions: ComputedRef<GrAutocompleteOption<TValue>[]>;
     isEmptyValue: (value: unknown) => boolean;
     modelSingle: ComputedRef<TValue | ''>;
     selectedValues: ComputedRef<TValue[]>;

package/dist/types/components/GrAutocomplete/composables/useRemoteOptions.d.ts

@@ -1,5 +1,5 @@
 import type { Ref, ShallowRef } from 'vue';
-import type { GrAutocompleteOption, GrAutocompleteValue } from '../GrAutocomplete.vue';
+import type { GrAutocompleteOptionOrGroup, GrAutocompleteValue } from '../GrAutocomplete.vue';
 /**
  * Дебаунснутая удалённая загрузка опций.
  *
@@ -15,16 +15,16 @@ import type { GrAutocompleteOption, GrAutocompleteValue } from '../GrAutocomplet
  * делает потребитель) — модулю место в `composables/internal/`.
  */
 export interface UseRemoteOptionsOptions<TValue extends GrAutocompleteValue> {
-    fetchOptions: () => ((query: string, signal: AbortSignal) => Promise<GrAutocompleteOption<TValue>[]>) | undefined;
+    fetchOptions: () => ((query: string, signal: AbortSignal) => Promise<GrAutocompleteOptionOrGroup<TValue>[]>) | undefined;
     /** Стартовый список: его смена сбрасывает ответ сервера. */
-    options: () => GrAutocompleteOption<TValue>[] | undefined;
+    options: () => GrAutocompleteOptionOrGroup<TValue>[] | undefined;
     debounce: () => number;
     minQueryLength: () => number;
     onSearch: (query: string) => void;
     onSearchError: (error: unknown) => void;
 }
 export interface RemoteOptions<TValue extends GrAutocompleteValue> {
-    remoteOptions: ShallowRef<GrAutocompleteOption<TValue>[]>;
+    remoteOptions: ShallowRef<GrAutocompleteOptionOrGroup<TValue>[]>;
     remoteAnswered: Ref<boolean>;
     remoteLoading: Ref<boolean>;
     scheduleSearch: (value: string) => void;

package/dist/types/components/GrAutocomplete/grAutocompleteStyles.d.ts

@@ -11,6 +11,20 @@ export type GrAutocompleteOption<TValue extends GrAutocompleteValue = string> =
     label: string;
     disabled?: boolean;
 };
+/**
+ * Группа опций: заголовок `label` + вложенные опции `options`.
+ *
+ * Форма та же, что у `GrSelect`: два соседних контрола, у которых списки
+ * различаются только способом ввода, обязаны принимать данные одинаково.
+ */
+export type GrAutocompleteOptionGroup<TValue extends GrAutocompleteValue = string> = {
+    label: string;
+    options: GrAutocompleteOption<TValue>[];
+};
+/** Элемент списка: либо одиночная опция, либо группа. */
+export type GrAutocompleteOptionOrGroup<TValue extends GrAutocompleteValue = string> = GrAutocompleteOption<TValue> | GrAutocompleteOptionGroup<TValue>;
+/** Группа опознаётся по наличию вложенного списка, а не по служебному полю. */
+export declare function isAutocompleteOptionGroup<TValue extends GrAutocompleteValue>(item: GrAutocompleteOptionOrGroup<TValue>): item is GrAutocompleteOptionGroup<TValue>;
 export type GrAutocompleteModelValue<TValue extends GrAutocompleteValue = string> = TValue | TValue[];
 /**
  * Оболочка (визуально повторяет `GrInput`): бордер + focus-ring по `focus-within`,
@@ -60,4 +74,4 @@ export declare const autocompleteStateClass = "flex items-center justify-center
  * (card + бордер + shadow-2 + скругление). Держим локальную копию строки,
  * чтобы не тянуть зависимость от `GrSelect` (компоненты гранулярно независимы).
  */
-export declare const autocompletePanelClasses = "rounded-[var(--gr-radius-xl)] border border-[var(--gr-brd)] bg-[var(--gr-popover)] text-[var(--gr-popover-fg)] shadow-[var(--gr-shadow-2)] overflow-hidden";
+export declare const autocompletePanelClasses = "rounded-[var(--gr-radius-xl)] border border-[var(--gr-brd)] bg-[var(--gr-popover)] text-[var(--gr-popover-fg)] shadow-[var(--gr-shadow-2)] flex flex-col max-h-[var(--gr-floating-available-height,100vh)] overflow-hidden";

package/dist/types/components/GrAutocomplete/index.d.ts

@@ -4,7 +4,7 @@ export { default } from './GrAutocomplete.vue';
 export { default as GrAutocomplete } from './GrAutocomplete.vue';
 export { grAutocompleteConfig } from './config';
 export type { GrAutocompleteConfigurableProps } from './defaults';
-export type { GrAutocompleteModelValue, GrAutocompleteOption, GrAutocompleteProps, GrAutocompleteSize, } from './GrAutocomplete.vue';
+export type { GrAutocompleteModelValue, GrAutocompleteOption, GrAutocompleteOptionGroup, GrAutocompleteOptionOrGroup, GrAutocompleteProps, GrAutocompleteSize, } from './GrAutocomplete.vue';
 export { grAutocompleteSafelist } from './safelist';
 export type { GrAutocompleteEmits } from './GrAutocomplete.vue';
 export type GrAutocompleteInstance = ComponentExposed<typeof GrAutocompleteComponent>;

package/dist/types/components/GrCarousel/GrCarousel.vue.d.ts

@@ -1,4 +1,4 @@
-import type { GrCarouselActivationMode, GrCarouselIndicators } from './grCarouselStyles';
+import type { GrCarouselActivationMode, GrCarouselIndicators, GrCarouselOrientation } from './grCarouselStyles';
 import type { GrTone } from '../shared/tones';
 export interface GrCarouselProps {
     /** Индекс текущего кадра. Не передан — лента ведёт позицию сама. */
@@ -9,6 +9,25 @@ export interface GrCarouselProps {
     autoplayInterval?: number;
     /** Замкнуть ленту. Выключено — стрелки на краях гаснут. */
     loop?: boolean;
+    /**
+     * Ось движения ленты. По вертикали вьюпорту нужна **определённая высота**:
+     * шаг считается от неё, и без высоты лента вырождается в столбец кадров.
+     */
+    orientation?: GrCarouselOrientation;
+    /**
+     * Не рисовать содержимое кадров вдали от текущего.
+     *
+     * Виртуализируется **нутро кадра, а не кадр**: кадры приходят слотом, и не
+     * отрисовать чужой узел лента не может. Пустая обёртка держит место в ряду и
+     * почти ничего не весит, а картинки и карточки из DOM уходят.
+     */
+    virtual?: boolean;
+    /**
+     * Сколько кадров по обе стороны от текущего рисовать сверх него. Меньше
+     * единицы ставить нельзя: следующий кадр обязан быть готов **до** перехода,
+     * иначе лента поедет на пустоту, а содержимое проявится уже на месте.
+     */
+    virtualOverscan?: number;
     /** Вид переключателя кадров. `none` меняет и роль самих слайдов. */
     indicators?: GrCarouselIndicators;
     /** Тон текущего переключателя по общей шкале пакета. */
@@ -57,6 +76,9 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
     autoplay: boolean;
     autoplayInterval: number;
     loop: boolean;
+    orientation: string;
+    virtual: boolean;
+    virtualOverscan: number;
     indicators: undefined;
     tone: undefined;
     activationMode: undefined;
@@ -89,6 +111,9 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
     autoplay: boolean;
     autoplayInterval: number;
     loop: boolean;
+    orientation: string;
+    virtual: boolean;
+    virtualOverscan: number;
     indicators: undefined;
     tone: undefined;
     activationMode: undefined;
@@ -108,11 +133,14 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
     tone: GrTone;
     indicators: GrCarouselIndicators;
     activationMode: GrCarouselActivationMode;
+    orientation: GrCarouselOrientation;
     ariaLabel: string;
     modelValue: number;
+    virtual: boolean;
     autoplay: boolean;
     autoplayInterval: number;
     loop: boolean;
+    virtualOverscan: number;
     arrows: boolean;
     swipe: boolean;
     landmark: boolean;

package/dist/types/components/GrCarousel/composables/useCarouselSwipe.d.ts

@@ -9,6 +9,11 @@ export interface UseCarouselSwipeOptions {
     atEdge: (direction: 1 | -1) => boolean;
     /** Жест начался: показ пора ставить на паузу. */
     onStart?: () => void;
+    /**
+     * Ось движения ленты. По вертикали ведущей становится `dy`, а поперечная
+     * прокрутка страницы отдаётся ей же — иначе карусель перехватывала бы скролл.
+     */
+    orientation?: () => 'horizontal' | 'vertical';
 }
 export interface UseCarouselSwipeReturn {
     isDragging: Ref<boolean>;

package/dist/types/components/GrCarousel/grCarouselContext.d.ts

@@ -42,5 +42,26 @@ export interface GrCarouselContext {
     tabIdFor: (id: string) => string | undefined;
     /** «N из M» — имя слайда, когда своего `label` у него нет. */
     positionLabel: (id: string) => string;
+    /**
+     * Смещение слайда в процентах ширины ленты на время замыкания петли.
+     *
+     * Кольцо делается **без клонирования кадров**: на шаге «последний → первый»
+     * первый слайд временно переезжает за последний, лента доезжает до него как
+     * до обычного соседа, и уже после перехода индекс снимается на ноль без
+     * анимации. Клон здесь невозможен по устройству: кадры приходят слотом, и
+     * копия чужого узла унесла бы с собой его состояние и ссылки.
+     */
+    displacementOf: (id: string) => number;
+    /** Ось движения ленты: по ней кадр выбирает, какой размер занимать целиком. */
+    orientation: ComputedRef<'horizontal' | 'vertical'>;
+    /**
+     * Рисовать ли содержимое кадра.
+     *
+     * Виртуализация здесь **содержимого, а не самих кадров**: кадры приходят
+     * слотом, и не отрисовать чужой узел лента не может — но может попросить его
+     * не рисовать своё нутро. Пустая обёртка держит место в ряду и весит
+     * пренебрежимо мало, а тяжёлое (картинки, карточки) уходит из DOM.
+     */
+    shouldRender: (id: string) => boolean;
 }
 export declare const GR_CAROUSEL_CONTEXT: InjectionKey<GrCarouselContext>;

package/dist/types/components/GrCarousel/grCarouselStyles.d.ts

@@ -23,24 +23,54 @@ export declare function grCarouselThumbActiveClass(tone: GrTone): string;
 export declare const GR_CAROUSEL_ACTIVATION_MODES: readonly ["automatic", "manual"];
 export type GrCarouselActivationMode = typeof GR_CAROUSEL_ACTIVATION_MODES[number];
 export declare const carouselRootBase = "relative w-full";
+/**
+ * Вертикальная лента: высоту задаёт потребитель **на корне**, а вьюпорт обязан
+ * её получить.
+ *
+ * Иначе высота вьюпорта выводится из содержимого, процентная `flex-basis`
+ * кадров упирается в неопределённый размер и вырождается в высоту содержимого —
+ * кадры встают столбцом, а лента честно считает шаг от суммы. Отсюда колонка на
+ * корне и `flex-1 min-h-0` на вьюпорте: полоса переключателей остаётся под ним,
+ * а вьюпорт забирает остаток.
+ */
+export declare const carouselRootAxis: Record<GrCarouselOrientation, string>;
+export declare const carouselViewportAxis: Record<GrCarouselOrientation, string>;
 export declare const carouselViewportBase = "relative w-full overflow-hidden";
 /**
  * Вертикальная прокрутка страницы остаётся браузеру, горизонталь забирает лента.
  * `select-none` — против выделения текста слайда протяжкой.
  */
-export declare const carouselViewportSwipeClass = "[touch-action:pan-y] select-none";
-export declare const carouselTrackBase = "flex w-full will-change-transform transition-transform duration-[var(--gr-duration-base)] ease-[var(--gr-ease-out)]";
-export declare const carouselSlideBase = "w-full min-w-0 shrink-0 grow-0 basis-full";
+export declare const carouselViewportSwipeClass = "select-none";
+export declare const carouselTrackBase = "flex will-change-transform transition-transform duration-[var(--gr-duration-base)] ease-[var(--gr-ease-out)]";
+export declare const GR_CAROUSEL_ORIENTATIONS: readonly ["horizontal", "vertical"];
+export type GrCarouselOrientation = typeof GR_CAROUSEL_ORIENTATIONS[number];
+export declare const carouselSlideBase = "shrink-0 grow-0 basis-full";
+/**
+ * Кадр занимает вьюпорт целиком по оси движения. Поперёк оси он не ограничен:
+ * там размер задаёт содержимое, как и раньше.
+ */
+export declare const carouselSlideAxis: Record<GrCarouselOrientation, string>;
+/**
+ * Направление ленты. По вертикали ей нужна **определённая высота вьюпорта**:
+ * `translateY(-100%)` считается от высоты самой ленты, а она у колонки равна
+ * сумме кадров, если вьюпорт высоту не задал.
+ */
+export declare const carouselTrackAxis: Record<GrCarouselOrientation, string>;
+/** Жест по оси движения перехватывается лентой, поперёк — отдаётся странице. */
+export declare const carouselViewportTouchAction: Record<GrCarouselOrientation, string>;
+/**
+ * Стрелки стоят по оси движения. По горизонтали позиции логические
+ * (`start`/`end`) — они зеркалятся под RTL; по вертикали направление письма ни
+ * при чём, поэтому там физические `top`/`bottom`.
+ */
+export declare const carouselControlAxis: Record<GrCarouselOrientation, string>;
 /**
  * Стрелки лежат поверх произвольного содержимого, поэтому несут собственную
  * подложку: на светлом кадре иконка без неё пропадает. `z-10` — порядок внутри
  * собственного stacking-контекста компонента, а не слой страницы.
  */
-export declare const carouselControlBase = "absolute top-1/2 z-10 inline-flex h-9 w-9 -translate-y-1/2 items-center justify-center rounded-[var(--gr-radius-full)] border border-[var(--gr-brd)] bg-[var(--gr-carousel-control-bg,var(--gr-bg))] text-[var(--gr-carousel-control-fg,var(--gr-fg))] transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--gr-ring)]";
-export declare const carouselControlPositions: {
-    readonly prev: "start-2";
-    readonly next: "end-2";
-};
+export declare const carouselControlBase = "absolute z-10 inline-flex h-9 w-9 items-center justify-center rounded-[var(--gr-radius-full)] border border-[var(--gr-brd)] bg-[var(--gr-carousel-control-bg,var(--gr-bg))] text-[var(--gr-carousel-control-fg,var(--gr-fg))] transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--gr-ring)]";
+export declare const carouselControlPositions: Record<GrCarouselOrientation, Record<'prev' | 'next', string>>;
 /**
  * Стрелка на краю без `loop` гасится фоном, а не `opacity`: прозрачность
  * разбавляет выверенные на AA токены текста и роняет контраст.
@@ -75,6 +105,6 @@ export declare const carouselThumbStates: {
 export declare const carouselThumbImageClass = "h-full w-full object-cover";
 /** Миниатюры не дали — плитка держит ритм полосы номером слайда. */
 export declare const carouselThumbFallbackClass = "flex h-full w-full items-center justify-center bg-[var(--gr-muted)] text-[var(--gr-muted-fg)] text-[length:var(--gr-control-text-xs)] leading-[var(--gr-control-leading-xs)]";
-export declare function grCarouselControlClass(direction: 'prev' | 'next', disabled: boolean): string;
+export declare function grCarouselControlClass(direction: 'prev' | 'next', disabled: boolean, orientation?: GrCarouselOrientation): string;
 export declare function grCarouselIndicatorsClass(variant: GrCarouselIndicators): string;
 export declare function grCarouselIndicatorClass(variant: GrCarouselIndicators, active: boolean, tone?: GrTone): string;

package/dist/types/components/GrCheckbox/GrCheckbox.vue.d.ts

@@ -1,6 +1,16 @@
 import { type GrCheckboxLabelPosition, type GrCheckboxSize } from './grCheckboxStyles';
 export type { GrCheckboxLabelPosition, GrCheckboxSize } from './grCheckboxStyles';
 export interface GrCheckboxProps {
+    /**
+     * Остановка `Tab` у самого переключателя.
+     *
+     * Нужна составным виджетам, которые забирают таб-порядок себе: в сетке
+     * `GrDataTable` (`cell-navigation`) `Tab` принадлежит таблице целиком, и
+     * чекбокс в ячейке своей остановки держать не должен — до него добираются
+     * стрелкой до ячейки и `Enter`. Выключенный переключатель остаётся вне
+     * обхода в любом случае.
+     */
+    tabindex?: number;
     /** Не задан внутри `GrCheckboxGroup` — состояние берётся из группы. */
     modelValue?: boolean;
     disabled?: boolean;
@@ -38,6 +48,7 @@ declare function focus(): void;
 declare function blur(): void;
 declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToOption<GrCheckboxProps>, {
     modelValue: undefined;
+    tabindex: undefined;
     disabled: undefined;
     name: undefined;
     value: string;
@@ -60,6 +71,7 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
     blur: (event: FocusEvent) => void;
 }, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToOption<GrCheckboxProps>, {
     modelValue: undefined;
+    tabindex: undefined;
     disabled: undefined;
     name: undefined;
     value: string;
@@ -87,6 +99,7 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
     name: string;
     invalid: boolean;
     id: string;
+    tabindex: number;
     ariaLabel: string;
     modelValue: boolean;
     required: boolean;

package/dist/types/components/GrColorPicker/GrColorPicker.vue.d.ts

@@ -1,10 +1,20 @@
-import { type GrColorPickerSize } from './grColorPickerStyles';
-export type { GrColorPickerSize } from './grColorPickerStyles';
+import { type GrColorPickerSize, type GrColorPickerView } from './grColorPickerStyles';
+export type { GrColorPickerSize, GrColorPickerView } from './grColorPickerStyles';
 export interface GrColorPickerProps {
     /** Цвет в hex: `#RRGGBB`, а при `alpha` — `#RRGGBBAA`. Мусор не роняет компонент. */
     modelValue: string;
     /** Четвёртый слайдер и восьмизначная форма hex. */
     alpha?: boolean;
+    /**
+     * Как задаются насыщенность и светлота: двумя бегунками или квадратом.
+     * Оттенок и прозрачность остаются бегунками в обоих видах.
+     */
+    view?: GrColorPickerView;
+    /**
+     * Кнопка пипетки. Рисуется только там, где браузер даёт `EyeDropper`, —
+     * сегодня это Chromium.
+     */
+    eyedropper?: boolean;
     /** Палитра быстрого выбора. Пусто — блок не рендерится. */
     presets?: string[];
     size?: GrColorPickerSize;
@@ -32,6 +42,8 @@ declare function focus(): void;
 declare function blur(): void;
 declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToOption<GrColorPickerProps>, {
     alpha: boolean;
+    view: undefined;
+    eyedropper: undefined;
     presets: () => never[];
     size: undefined;
     open: undefined;
@@ -53,6 +65,8 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
     blur: (event: FocusEvent) => void;
 }, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToOption<GrColorPickerProps>, {
     alpha: boolean;
+    view: undefined;
+    eyedropper: undefined;
     presets: () => never[];
     size: undefined;
     open: undefined;
@@ -73,7 +87,9 @@ declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractP
     placement: "bottom-start" | "bottom-end" | "top-start" | "top-end";
     disabled: boolean;
     readonly: boolean;
+    view: GrColorPickerView;
     size: GrColorPickerSize;
+    eyedropper: boolean;
     name: string;
     invalid: boolean;
     alpha: boolean;

package/dist/types/components/GrColorPicker/color.d.ts

@@ -34,5 +34,17 @@ export declare function parseHexColor(value: unknown): GrHsla | null;
 export declare function formatHexColor(color: GrHsla, withAlpha?: boolean): string;
 /** CSS-запись цвета для превью и градиентов. */
 export declare function hslaToCss(color: GrHsla): string;
-/** Приводит произвольный объект к валидному диапазону каналов. */
+/**
+ * Приводит произвольный объект к валидному диапазону каналов.
+ *
+ * Округления нет ни у одного канала, и это то же правило, что у `normalizeHue`,
+ * распространённое на насыщенность и светлоту: целочисленная сетка HSL мельче
+ * сетки hex, и посадка на неё меняет цвет. Замер на типовых брендовых
+ * значениях — 11 расхождений из 12: `#10b981` возвращался как `#10b77f`.
+ * Пользователь при этом ничего не двигал, а компонент уже переписал его цвет —
+ * достаточно было выбрать пресет или вставить hex в поле.
+ *
+ * Целые нужны шкалам, и они их и получают: бегунок читает `Math.round` своего
+ * канала, а хранимое значение остаётся точным.
+ */
 export declare function normalizeHsla(color: GrHsla): GrHsla;

package/dist/types/components/GrColorPicker/colorArea.d.ts

@@ -0,0 +1,59 @@
+/**
+ * Арифметика двумерной области насыщенность × светлота.
+ *
+ * Модуль чистый: ни DOM, ни Vue. Всё, что здесь считается, проверяется без
+ * монтирования — а в jsdom у области нет ни размеров, ни попадания указателя.
+ *
+ * Оси выбраны под модель компонента (HSL), а не под привычный HSV-квадрат.
+ * Перевод в HSV дал бы более нарядную заливку, но принёс бы вторую проекцию с
+ * потерями: при `v = 0` насыщенность HSV не определена, и чёрный терял бы её
+ * ровно так же, как серый теряет оттенок. Компонент уже держит своё состояние
+ * именно чтобы такого не было.
+ */
+export type GrColorAreaAxis = 'saturation' | 'lightness';
+/** Точка области в процентах: обе координаты — значения каналов, а не пиксели. */
+export interface GrColorAreaPoint {
+    s: number;
+    l: number;
+}
+/**
+ * Положение ручки в процентах от левого верхнего угла.
+ *
+ * Светлота инвертирована: вверху области белое, внизу чёрное — так стоит
+ * вертикальная шкала во всех привычных пикерах, и переворачивать её значило бы
+ * ломать ожидание ради буквальности.
+ */
+export declare function colorAreaThumbPosition(point: GrColorAreaPoint): {
+    x: number;
+    y: number;
+};
+/**
+ * Значение под указателем.
+ *
+ * Прямоугольник приходит снаружи: измерять его умеет только вызывающий, а
+ * промах мимо области — норма, указатель уходит за её границы при каждом
+ * протягивании.
+ */
+export declare function colorAreaPointAt(pointer: {
+    clientX: number;
+    clientY: number;
+}, rect: {
+    left: number;
+    top: number;
+    width: number;
+    height: number;
+}): GrColorAreaPoint;
+/**
+ * Клавиша → новое значение и ось, которая изменилась.
+ *
+ * Ось возвращается не для отчёта: у области два настоящих `input[type=range]`,
+ * по одному на канал, и стрелка поперёк оси сфокусированного поля обязана
+ * увести фокус на соседнее — иначе диктор промолчит о том, что изменилось.
+ *
+ * `Home`/`End` и крупный шаг работают по оси **сфокусированного** поля: они
+ * относятся к диапазону, а диапазонов здесь два.
+ */
+export declare function colorAreaKeyStep(key: string, point: GrColorAreaPoint, focused: GrColorAreaAxis): {
+    point: GrColorAreaPoint;
+    axis: GrColorAreaAxis;
+} | null;

package/dist/types/components/GrColorPicker/defaults.d.ts

@@ -1,4 +1,4 @@
-import type { GrColorPickerSize } from './grColorPickerStyles';
+import type { GrColorPickerSize, GrColorPickerView } from './grColorPickerStyles';
 /**
  * Пропы `GrColorPicker`, настраиваемые глобально через `componentDefaults`.
  *
@@ -7,6 +7,8 @@ import type { GrColorPickerSize } from './grColorPickerStyles';
  */
 export interface GrColorPickerConfigurableProps {
     size: GrColorPickerSize;
+    view: GrColorPickerView;
+    eyedropper: boolean;
 }
 declare module '../../composables/useGrComponentConfig' {
     interface GrComponentDefaultsRegistry {

package/dist/types/components/GrColorPicker/eyeDropper.d.ts

@@ -0,0 +1,21 @@
+/**
+ * Пипетка экрана поверх `EyeDropper`.
+ *
+ * API есть не везде (сегодня — браузеры на Chromium), поэтому вызывается через
+ * проверку, а не через `try`: кнопка не должна появляться там, где нажатие
+ * ничего не даст.
+ *
+ * Отказ пользователя ошибкой не считается. `open()` отклоняется `AbortError`
+ * и на `Esc`, и на обрыв через `AbortSignal` — оба исхода означают «цвет не
+ * выбран», и разговаривать о них с пользователем не о чем.
+ */
+/** Поддерживается ли пипетка. Зовётся после монтирования: на сервере `window` нет. */
+export declare function isEyeDropperSupported(): boolean;
+/**
+ * Открыть пипетку и дождаться цвета. `null` — пользователь отказался или API
+ * недоступно.
+ *
+ * Вызов обязан идти прямо из обработчика нажатия: без свежего жеста браузер
+ * отклоняет `open()` как `NotAllowedError`.
+ */
+export declare function pickScreenColor(signal?: AbortSignal): Promise<string | null>;

package/dist/types/components/GrColorPicker/grColorPickerStyles.d.ts

@@ -24,6 +24,43 @@ export declare const swatchBaseClass = "relative shrink-0 overflow-hidden rounde
 export declare const swatchFillClass = "absolute inset-0";
 export declare const panelBaseClass = "grid";
 export declare const previewClass = "relative h-10 w-full overflow-hidden rounded-[var(--gr-radius-md)] border border-[color-mix(in_srgb,var(--gr-fg)_18%,transparent)]";
+/** Вид панели: лестница каналов или квадрат насыщенность × светлота. */
+export declare const GR_COLOR_PICKER_VIEWS: readonly ["sliders", "area"];
+export type GrColorPickerView = typeof GR_COLOR_PICKER_VIEWS[number];
+/**
+ * Высота области. Ширину задаёт панель, поэтому квадрат тут не буквальный:
+ * на узкой ступени доля высоты крупнее, иначе область вырождается в полоску.
+ */
+export declare const areaHeightBySize: Record<GrColorPickerSize, string>;
+/**
+ * Область насыщенности и светлоты.
+ *
+ * Кольцо фокуса живёт на обёртке через `focus-within`: фокус получают скрытые
+ * `input[type=range]` внутри, и своё кольцо у них было бы шириной в пиксель.
+ */
+export declare const areaBaseClass = "relative w-full overflow-hidden rounded-[var(--gr-radius-md)] border border-[color-mix(in_srgb,var(--gr-fg)_18%,transparent)] [touch-action:none] focus-within:outline-none focus-within:ring-2 focus-within:ring-[var(--gr-ring)]";
+export declare const areaEnabledClass = "cursor-crosshair";
+export declare const areaDisabledClass = "cursor-not-allowed";
+/**
+ * Ручка области.
+ *
+ * Обвода два, светлый и тёмный: ручка лежит поверх произвольного цвета, и
+ * одиночный пропадал бы на своём конце шкалы — белый в углу белого, тёмный в
+ * углу чёрного.
+ *
+ * Оба независимы от темы намеренно: под ручкой не подложка компонента, а
+ * выбираемый цвет, и `--gr-fg` спорил бы с ним, а не с фоном страницы.
+ */
+export declare const areaThumbClass = "pointer-events-none absolute h-[var(--gr-color-picker-area-thumb-size,0.875rem)] w-[var(--gr-color-picker-area-thumb-size,0.875rem)] -translate-x-1/2 -translate-y-1/2 rounded-[var(--gr-radius-full)] border-2 border-[var(--gr-color-picker-area-thumb-border,#fff)] shadow-[0_0_0_1px_var(--gr-color-picker-area-thumb-ring,rgba(0,0,0,0.45))]";
+/** Оба поля осей: доступны диктору и клавиатуре, но не видны. */
+export declare const areaInputClass = "sr-only";
+/** Пипетка стоит в одном ряду с полем hex и повторяет его высоту. */
+export declare const eyedropperClass = "inline-flex shrink-0 items-center justify-center rounded-[var(--gr-radius-control)] border border-[var(--gr-brd)] bg-[var(--gr-bg)] text-[var(--gr-fg)] transition-colors duration-[var(--gr-duration-fast)] hover:border-[var(--gr-primary)] focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--gr-ring)] disabled:cursor-not-allowed disabled:border-[var(--gr-brd)] disabled:bg-[var(--gr-muted)] disabled:text-[var(--gr-disabled-fg)]";
+export declare const eyedropperSizeBySize: Record<GrColorPickerSize, string>;
+export declare const eyedropperIconClass = "h-4 w-4 shrink-0";
+/** Поле hex и пипетка стоят рядом: поле тянется, кнопка держит свою ширину. */
+export declare const hexRowClass = "flex items-center gap-2";
+export declare const hexFieldClass = "min-w-0 flex-1";
 export declare const rowClass = "grid grid-cols-[1.25rem_minmax(0,1fr)_2.75rem] items-center gap-2";
 export declare const rowLabelClass = "text-[var(--gr-muted-fg)]";
 export declare const rowValueClass = "text-right text-[var(--gr-muted-fg)] tabular-nums";
@@ -37,3 +74,8 @@ export declare function grColorPickerTriggerClass(options: {
 }): string;
 export declare function grColorPickerPanelClass(size: GrColorPickerSize): string;
 export declare function grColorPickerPresetClass(selected: boolean): string;
+export declare function grColorPickerAreaClass(options: {
+    size: GrColorPickerSize;
+    locked: boolean;
+}): string;
+export declare function grColorPickerEyedropperClass(size: GrColorPickerSize): string;

package/dist/types/components/GrCommandPalette/GrCommandPalette.vue.d.ts

@@ -29,6 +29,12 @@ export interface GrCommandPaletteProps {
     size?: GrCommandPaletteSize;
     /** Глобальное сочетание открытия. `null` — не вешать слушатель. */
     hotkey?: string | null;
+    /**
+     * Идентификатор записи в реестре (`granularityHotkeysPlugin`) вместо
+     * сочетания строкой: подсказка и привязка берутся из одного источника и не
+     * могут разойтись. Сильнее `hotkey`.
+     */
+    hotkeyId?: string;
     /** Локальная фильтрация по запросу. `false` — фильтрует владелец по событию `search`. */
     filterable?: boolean;
     /** Кастомный матчер локальной фильтрации. */
@@ -83,6 +89,7 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
     placeholder: undefined;
     size: undefined;
     hotkey: string;
+    hotkeyId: undefined;
     filterable: boolean;
     filter: undefined;
     loading: boolean;
@@ -106,6 +113,7 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
     placeholder: undefined;
     size: undefined;
     hotkey: string;
+    hotkeyId: undefined;
     filterable: boolean;
     filter: undefined;
     loading: boolean;
@@ -131,8 +139,9 @@ declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPro
     closeOnSelect: boolean;
     virtual: boolean;
     items: GrCommandItem[];
-    recentIds: string[];
     hotkey: string | null;
+    recentIds: string[];
+    hotkeyId: string;
     showHotkeyHint: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;