@feugene/granularity 0.31.0 → 0.31.1

package/dist/components/GrButton/chunks/GrButton-Bw2AH4uX.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"GrButton-Bw2AH4uX.js","names":[],"sources":["../../../../src/components/GrButton/GrButton.vue","../../../../src/components/GrButton/GrButton.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, markRaw, ref, type Component } from 'vue'\n\nimport IconLoader from '~icons/lucide/loader-circle'\n\nimport { useGrComponentProp, useGrComponentSize } from '../GrConfigProvider/context'\nimport { useGrButtonGroup } from '../GrButtonGroup/context'\nimport { useGranularityTranslations } from '../../internal/granularityI18n'\n\nexport type { GrButtonSize, GrButtonTone, GrButtonVariant } from './grButtonStyles'\n\nimport {\n  grButtonBaseClass,\n  grButtonClass,\n  type GrButtonSize,\n  type GrButtonTone,\n  type GrButtonVariant,\n} from './grButtonStyles'\n\nexport interface GrButtonProps {\n  variant?: GrButtonVariant\n  tone?: GrButtonTone\n  size?: GrButtonSize\n  loading?: boolean\n  /** i18n: что именно грузится. `aria-busy` сам по себе часть AT не объявляет. */\n  loadingText?: string\n  disabled?: boolean\n  square?: boolean\n  /** Кнопка на всю ширину контейнера. */\n  block?: boolean\n  type?: 'button' | 'submit' | 'reset'\n  ariaLabel?: string\n  /** Полиморфизм: кастомный корневой тег/компонент (например, RouterLink). */\n  as?: string | Component\n  /** Рендерит кнопку как `<a href>` (если не задан `as`). */\n  href?: string\n  target?: string\n  rel?: string\n  external?: boolean\n}\n\nconst props = withDefaults(\n  defineProps<GrButtonProps>(),\n  {\n    // `variant`/`tone`/`size`/`square` настраиваются через `GrConfigProvider`,\n    // поэтому их дефолты живут в резолверах ниже, а не здесь: Vue подставил бы\n    // дефолт до того, как компонент успеет заглянуть в конфиг.\n    variant: undefined,\n    tone: undefined,\n    size: undefined,\n    loading: false,\n    loadingText: undefined,\n    disabled: false,\n    square: undefined,\n    block: false,\n    type: 'button',\n    ariaLabel: undefined,\n    as: undefined,\n    href: undefined,\n    target: undefined,\n    rel: undefined,\n    external: false,\n  },\n)\n\n// Эффективные значения: проп кнопки → группа → `GrConfigProvider` → дефолт.\n// Группа ближе к кнопке, чем глобальный провайдер, поэтому она подставляется\n// как «локальное» значение — и побеждает конфиг, но не собственный проп.\nconst group = useGrButtonGroup()\n\nconst resolvedSize = useGrComponentSize(() => props.size ?? group?.size.value, { component: 'GrButton' })\nconst resolvedVariant = useGrComponentProp('GrButton', 'variant', () => props.variant ?? group?.variant.value, 'primary')\nconst resolvedTone = useGrComponentProp('GrButton', 'tone', () => props.tone ?? group?.tone.value, 'primary')\nconst isSquare = useGrComponentProp('GrButton', 'square', () => props.square, false)\n\nconst { t } = useGranularityTranslations()\nconst resolvedLoadingText = computed(() => props.loadingText ?? t('gr.button.loading', 'Loading…'))\n\n// Полиморфный корень: `as` → `<a href>` → `<button>`.\nconst isLink = computed(() => Boolean(props.as || props.href))\nconst renderAs = computed<string | Component>(() => {\n  if (props.as) return typeof props.as === 'string' ? props.as : markRaw(props.as)\n  return props.href ? 'a' : 'button'\n})\n\n// Неинтерактивно при явном `disabled` ИЛИ во время `loading`.\nconst blocked = computed(() => props.disabled || props.loading)\n\n// Ключевое: `loading` НЕ ставит нативный `disabled` (элемент бы выпал из фокуса и\n// скринридер потерял бы контекст) — вместо этого `aria-disabled` + перехват клика.\n// Нативный `disabled` (только у `<button>`) оставляем лишь для явного `disabled`.\nconst nativeDisabled = computed(() => (renderAs.value === 'button' && props.disabled) ? true : undefined)\nconst ariaDisabled = computed(() => (props.loading || (isLink.value && props.disabled)) ? 'true' : undefined)\n\nconst resolvedTarget = computed(() => props.target ?? (props.external ? '_blank' : undefined))\nconst resolvedRel = computed(() => props.rel ?? (resolvedTarget.value === '_blank' ? 'noopener noreferrer' : undefined))\n\nfunction onClickCapture(e: MouseEvent): void {\n  // Блокируем и дефолт (submit/навигация), и внешние обработчики (в т.ч. по Enter/Space),\n  // сохраняя фокус на элементе.\n  if (blocked.value) {\n    e.preventDefault()\n    e.stopImmediatePropagation()\n  }\n}\n\n// Корень динамический (`as` принимает и тег, и компонент), поэтому ref может\n// оказаться как элементом, так и инстансом — например роутерной ссылкой.\nconst rootEl = ref<HTMLElement | { $el?: HTMLElement } | null>(null)\n\n/**\n * Фокус на кнопку из кода. Нужен там, где окно обязано открываться с фокусом\n * на конкретном действии (`GrConfirmDialog`), и потребителю не должно быть\n * важно, тегом или компонентом отрисован корень.\n */\nfunction focus(): void {\n  const root = rootEl.value\n  const el = root instanceof HTMLElement ? root : root?.$el\n  el?.focus?.()\n}\n\nfunction blur(): void {\n  const root = rootEl.value\n  const el = root instanceof HTMLElement ? root : root?.$el\n  el?.blur?.()\n}\n\ndefineExpose({ focus, blur })\n\nconst className = computed(() => {\n  return grButtonClass({\n    variant: resolvedVariant.value,\n    tone: resolvedTone.value,\n    size: resolvedSize.value,\n    square: isSquare.value,\n    disabled: props.disabled,\n    block: props.block,\n  })\n})\n\ndefineSlots<{\n  /** Содержимое кнопки. */\n  default?: () => any\n  /** Аддон слева: иконка, счётчик. В состоянии загрузки уступает место спиннеру. */\n  prefix?: () => any\n  /** Аддон справа: шеврон, счётчик. */\n  suffix?: () => any\n}>()\n\n</script>\n\n<template>\n  <component\n    :is=\"renderAs\"\n    ref=\"rootEl\"\n    data-gr-button\n    :data-gr-variant=\"resolvedVariant\"\n    :data-gr-tone=\"resolvedTone\"\n    :type=\"renderAs === 'button' ? props.type : undefined\"\n    :disabled=\"nativeDisabled\"\n    :href=\"isLink && !props.disabled ? props.href : undefined\"\n    :target=\"isLink && !props.disabled ? resolvedTarget : undefined\"\n    :rel=\"isLink && !props.disabled ? resolvedRel : undefined\"\n    :aria-busy=\"props.loading ? 'true' : undefined\"\n    :aria-disabled=\"ariaDisabled\"\n    :aria-label=\"props.ariaLabel\"\n    :tabindex=\"isLink && props.disabled ? -1 : undefined\"\n    :class=\"[grButtonBaseClass, className, blocked ? 'cursor-not-allowed' : '']\"\n    @click.capture=\"onClickCapture\"\n  >\n    <!-- Спиннер занимает место префикса: две иконки рядом читались бы как ошибка. -->\n    <IconLoader v-if=\"props.loading\" class=\"h-4 w-4 animate-spin\" aria-hidden=\"true\" />\n    <slot v-else name=\"prefix\" />\n\n    <slot />\n\n    <slot name=\"suffix\" />\n\n    <span v-if=\"props.loading\" class=\"sr-only\">{{ resolvedLoadingText }}</span>\n  </component>\n</template>\n","<script setup lang=\"ts\">\nimport { computed, markRaw, ref, type Component } from 'vue'\n\nimport IconLoader from '~icons/lucide/loader-circle'\n\nimport { useGrComponentProp, useGrComponentSize } from '../GrConfigProvider/context'\nimport { useGrButtonGroup } from '../GrButtonGroup/context'\nimport { useGranularityTranslations } from '../../internal/granularityI18n'\n\nexport type { GrButtonSize, GrButtonTone, GrButtonVariant } from './grButtonStyles'\n\nimport {\n  grButtonBaseClass,\n  grButtonClass,\n  type GrButtonSize,\n  type GrButtonTone,\n  type GrButtonVariant,\n} from './grButtonStyles'\n\nexport interface GrButtonProps {\n  variant?: GrButtonVariant\n  tone?: GrButtonTone\n  size?: GrButtonSize\n  loading?: boolean\n  /** i18n: что именно грузится. `aria-busy` сам по себе часть AT не объявляет. */\n  loadingText?: string\n  disabled?: boolean\n  square?: boolean\n  /** Кнопка на всю ширину контейнера. */\n  block?: boolean\n  type?: 'button' | 'submit' | 'reset'\n  ariaLabel?: string\n  /** Полиморфизм: кастомный корневой тег/компонент (например, RouterLink). */\n  as?: string | Component\n  /** Рендерит кнопку как `<a href>` (если не задан `as`). */\n  href?: string\n  target?: string\n  rel?: string\n  external?: boolean\n}\n\nconst props = withDefaults(\n  defineProps<GrButtonProps>(),\n  {\n    // `variant`/`tone`/`size`/`square` настраиваются через `GrConfigProvider`,\n    // поэтому их дефолты живут в резолверах ниже, а не здесь: Vue подставил бы\n    // дефолт до того, как компонент успеет заглянуть в конфиг.\n    variant: undefined,\n    tone: undefined,\n    size: undefined,\n    loading: false,\n    loadingText: undefined,\n    disabled: false,\n    square: undefined,\n    block: false,\n    type: 'button',\n    ariaLabel: undefined,\n    as: undefined,\n    href: undefined,\n    target: undefined,\n    rel: undefined,\n    external: false,\n  },\n)\n\n// Эффективные значения: проп кнопки → группа → `GrConfigProvider` → дефолт.\n// Группа ближе к кнопке, чем глобальный провайдер, поэтому она подставляется\n// как «локальное» значение — и побеждает конфиг, но не собственный проп.\nconst group = useGrButtonGroup()\n\nconst resolvedSize = useGrComponentSize(() => props.size ?? group?.size.value, { component: 'GrButton' })\nconst resolvedVariant = useGrComponentProp('GrButton', 'variant', () => props.variant ?? group?.variant.value, 'primary')\nconst resolvedTone = useGrComponentProp('GrButton', 'tone', () => props.tone ?? group?.tone.value, 'primary')\nconst isSquare = useGrComponentProp('GrButton', 'square', () => props.square, false)\n\nconst { t } = useGranularityTranslations()\nconst resolvedLoadingText = computed(() => props.loadingText ?? t('gr.button.loading', 'Loading…'))\n\n// Полиморфный корень: `as` → `<a href>` → `<button>`.\nconst isLink = computed(() => Boolean(props.as || props.href))\nconst renderAs = computed<string | Component>(() => {\n  if (props.as) return typeof props.as === 'string' ? props.as : markRaw(props.as)\n  return props.href ? 'a' : 'button'\n})\n\n// Неинтерактивно при явном `disabled` ИЛИ во время `loading`.\nconst blocked = computed(() => props.disabled || props.loading)\n\n// Ключевое: `loading` НЕ ставит нативный `disabled` (элемент бы выпал из фокуса и\n// скринридер потерял бы контекст) — вместо этого `aria-disabled` + перехват клика.\n// Нативный `disabled` (только у `<button>`) оставляем лишь для явного `disabled`.\nconst nativeDisabled = computed(() => (renderAs.value === 'button' && props.disabled) ? true : undefined)\nconst ariaDisabled = computed(() => (props.loading || (isLink.value && props.disabled)) ? 'true' : undefined)\n\nconst resolvedTarget = computed(() => props.target ?? (props.external ? '_blank' : undefined))\nconst resolvedRel = computed(() => props.rel ?? (resolvedTarget.value === '_blank' ? 'noopener noreferrer' : undefined))\n\nfunction onClickCapture(e: MouseEvent): void {\n  // Блокируем и дефолт (submit/навигация), и внешние обработчики (в т.ч. по Enter/Space),\n  // сохраняя фокус на элементе.\n  if (blocked.value) {\n    e.preventDefault()\n    e.stopImmediatePropagation()\n  }\n}\n\n// Корень динамический (`as` принимает и тег, и компонент), поэтому ref может\n// оказаться как элементом, так и инстансом — например роутерной ссылкой.\nconst rootEl = ref<HTMLElement | { $el?: HTMLElement } | null>(null)\n\n/**\n * Фокус на кнопку из кода. Нужен там, где окно обязано открываться с фокусом\n * на конкретном действии (`GrConfirmDialog`), и потребителю не должно быть\n * важно, тегом или компонентом отрисован корень.\n */\nfunction focus(): void {\n  const root = rootEl.value\n  const el = root instanceof HTMLElement ? root : root?.$el\n  el?.focus?.()\n}\n\nfunction blur(): void {\n  const root = rootEl.value\n  const el = root instanceof HTMLElement ? root : root?.$el\n  el?.blur?.()\n}\n\ndefineExpose({ focus, blur })\n\nconst className = computed(() => {\n  return grButtonClass({\n    variant: resolvedVariant.value,\n    tone: resolvedTone.value,\n    size: resolvedSize.value,\n    square: isSquare.value,\n    disabled: props.disabled,\n    block: props.block,\n  })\n})\n\ndefineSlots<{\n  /** Содержимое кнопки. */\n  default?: () => any\n  /** Аддон слева: иконка, счётчик. В состоянии загрузки уступает место спиннеру. */\n  prefix?: () => any\n  /** Аддон справа: шеврон, счётчик. */\n  suffix?: () => any\n}>()\n\n</script>\n\n<template>\n  <component\n    :is=\"renderAs\"\n    ref=\"rootEl\"\n    data-gr-button\n    :data-gr-variant=\"resolvedVariant\"\n    :data-gr-tone=\"resolvedTone\"\n    :type=\"renderAs === 'button' ? props.type : undefined\"\n    :disabled=\"nativeDisabled\"\n    :href=\"isLink && !props.disabled ? props.href : undefined\"\n    :target=\"isLink && !props.disabled ? resolvedTarget : undefined\"\n    :rel=\"isLink && !props.disabled ? resolvedRel : undefined\"\n    :aria-busy=\"props.loading ? 'true' : undefined\"\n    :aria-disabled=\"ariaDisabled\"\n    :aria-label=\"props.ariaLabel\"\n    :tabindex=\"isLink && props.disabled ? -1 : undefined\"\n    :class=\"[grButtonBaseClass, className, blocked ? 'cursor-not-allowed' : '']\"\n    @click.capture=\"onClickCapture\"\n  >\n    <!-- Спиннер занимает место префикса: две иконки рядом читались бы как ошибка. -->\n    <IconLoader v-if=\"props.loading\" class=\"h-4 w-4 animate-spin\" aria-hidden=\"true\" />\n    <slot v-else name=\"prefix\" />\n\n    <slot />\n\n    <slot name=\"suffix\" />\n\n    <span v-if=\"props.loading\" class=\"sr-only\">{{ resolvedLoadingText }}</span>\n  </component>\n</template>\n"],"mappings":"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"}

package/dist/components/GrCodeBlock/chunks/GrCodeBlock-Dkvkr91t.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"GrCodeBlock-Dkvkr91t.js","names":[],"sources":["../../../../src/components/GrCodeBlock/serializeCode.ts","../../../../src/components/GrCodeBlock/tokenizeJson.ts","../../../../src/components/GrCodeBlock/GrCodeBlock.vue","../../../../src/components/GrCodeBlock/GrCodeBlock.vue"],"sourcesContent":["/**\n * Приведение произвольного значения к тексту для показа.\n *\n * Компонент показывает данные из БД, и они бывают любыми: `unknown`-поле ответа\n * модели, `meta` запуска, тело ошибки. Поэтому сериализация обязана пережить всё\n * — уронить страницу она права не имеет.\n */\n\n/** Маркер повторной ссылки. Показывается вместо ветки, которая уже встречалась выше. */\nexport const CIRCULAR_MARKER = '[Circular]'\n\n/** Что печатается, когда сериализовать не удалось вовсе. */\nexport const UNSERIALIZABLE_MARKER = '[Unserializable]'\n\n/**\n * Замена значений, на которых штатный `JSON.stringify` спотыкается.\n *\n * Маркером помечается **повторная ссылка**, а не только настоящий цикл: объект,\n * положенный в дерево дважды, тоже её получит. Отличить одно от другого можно\n * лишь стеком предков, а `replacer` его не отдаёт — узнать, что обход вышел из\n * ветки, изнутри нечем. Размен осознанный: показать `[Circular]` там, где данные\n * просто переиспользуют объект, — неточность; зациклиться на настоящем цикле —\n * зависшая вкладка.\n */\nfunction createSafeReplacer(): (key: string, value: unknown) => unknown {\n  const seen = new WeakSet<object>()\n\n  return function safeReplacer(_key: string, value: unknown): unknown {\n    // `BigInt` не имеет представления в JSON, и `stringify` на нём бросает.\n    if (typeof value === 'bigint') return `${value}n`\n\n    if (typeof value !== 'object' || value === null) return value\n\n    if (seen.has(value)) return CIRCULAR_MARKER\n\n    seen.add(value)\n    return value\n  }\n}\n\n/**\n * Значение → текст.\n *\n * Строка проходит как есть: это уже готовый текст, и оборачивать его в кавычки\n * значило бы показать не то, что пришло. `undefined` даёт пустую строку —\n * показывать нечего. Всё остальное сериализуется с отступом.\n */\nexport function serializeCode(value: unknown, indent = 2): string {\n  if (typeof value === 'string') return value\n  if (value === undefined) return ''\n\n  try {\n    const serialized = JSON.stringify(value, createSafeReplacer(), indent)\n    // `stringify` отдаёт `undefined` на функции и символе — печатать «undefined»\n    // строкой было бы враньём про содержимое.\n    return serialized ?? ''\n  }\n  catch {\n    return UNSERIALIZABLE_MARKER\n  }\n}\n","/**\n * Токенизация JSON для подсветки.\n *\n * Своя, а не библиотечная: тянуть highlight.js ради четырёх ролей несоразмерно\n * — компонент показывает JSON и обычный текст, а не произвольные языки.\n *\n * Разбор посимвольный и **ничего не теряет**: пробелы, переносы и запятые тоже\n * становятся токенами. Отсюда инвариант, который держит тест: склейка `text`\n * всех токенов равна исходной строке. Любая потеря символа — сдвиг разметки.\n */\n\nexport type GrCodeTokenKind =\n  /** Имя поля объекта: строка, за которой идёт двоеточие. */\n  | 'key'\n  | 'string'\n  | 'number'\n  /** `true`, `false`, `null`. */\n  | 'literal'\n  /** Скобки, запятые, двоеточия. */\n  | 'punctuation'\n  /** Пробелы, переносы и всё, что не опознано. */\n  | 'plain'\n\nexport interface GrCodeToken {\n  text: string\n  kind: GrCodeTokenKind\n}\n\nconst PUNCTUATION = new Set(['{', '}', '[', ']', ',', ':'])\nconst LITERALS = ['true', 'false', 'null'] as const\n\n/** Строка от открывающей кавычки до закрывающей, с учётом экранирования. */\nfunction readString(source: string, start: number): number {\n  let index = start + 1\n\n  while (index < source.length) {\n    const char = source[index]\n\n    // Экранированная кавычка не закрывает строку: `\"a\\\":b\"` — одно значение,\n    // а не строка плюс мусор.\n    if (char === '\\\\') {\n      index += 2\n      continue\n    }\n\n    index += 1\n    if (char === '\"') break\n  }\n\n  return index\n}\n\n/** Число целиком: знак, дробная часть, экспонента. */\nfunction readNumber(source: string, start: number): number {\n  let index = start\n\n  if (source[index] === '-') index += 1\n  while (index < source.length && /[\\d.eE+-]/.test(source[index])) index += 1\n\n  return index\n}\n\n/** Первый непробельный символ после позиции — по нему строка отличается от ключа. */\nfunction nextMeaningful(source: string, from: number): string | undefined {\n  for (let index = from; index < source.length; index += 1) {\n    if (!/\\s/.test(source[index])) return source[index]\n  }\n\n  return undefined\n}\n\nexport function tokenizeJson(source: string): GrCodeToken[] {\n  const tokens: GrCodeToken[] = []\n  let index = 0\n  let plainStart = 0\n\n  const flushPlain = (until: number): void => {\n    if (until > plainStart) tokens.push({ text: source.slice(plainStart, until), kind: 'plain' })\n  }\n\n  while (index < source.length) {\n    const char = source[index]\n\n    if (char === '\"') {\n      flushPlain(index)\n      const end = readString(source, index)\n      // Ключ от строки отличает только идущее следом двоеточие.\n      const kind: GrCodeTokenKind = nextMeaningful(source, end) === ':' ? 'key' : 'string'\n      tokens.push({ text: source.slice(index, end), kind })\n      index = end\n      plainStart = index\n      continue\n    }\n\n    if (PUNCTUATION.has(char)) {\n      flushPlain(index)\n      tokens.push({ text: char, kind: 'punctuation' })\n      index += 1\n      plainStart = index\n      continue\n    }\n\n    if (char === '-' || (char >= '0' && char <= '9')) {\n      flushPlain(index)\n      const end = readNumber(source, index)\n      tokens.push({ text: source.slice(index, end), kind: 'number' })\n      index = end\n      plainStart = index\n      continue\n    }\n\n    const literal = LITERALS.find(candidate => source.startsWith(candidate, index))\n    if (literal) {\n      flushPlain(index)\n      tokens.push({ text: literal, kind: 'literal' })\n      index += literal.length\n      plainStart = index\n      continue\n    }\n\n    index += 1\n  }\n\n  flushPlain(source.length)\n\n  return tokens\n}\n","<script setup lang=\"ts\">\nimport { computed, onBeforeUnmount, onMounted, ref } from 'vue'\n\nimport GrButton from '../GrButton/GrButton.vue'\nimport { useAnnouncer } from '../../composables/useAnnouncer'\nimport { useGranularityTranslations } from '../../internal/granularityI18n'\nimport { useGrComponentProp, useGrComponentSize } from '../GrConfigProvider/context'\n\nimport IconCheck from '~icons/lucide/check'\nimport IconCopy from '~icons/lucide/copy'\n\nimport { serializeCode } from './serializeCode'\nimport { tokenizeJson, type GrCodeToken } from './tokenizeJson'\nimport {\n  codeBlockCopyClass,\n  codeBlockGutterClass,\n  codeBlockHookClass,\n  codeBlockNowrapClass,\n  codeBlockNumberedClass as numberedClass,\n  codeBlockPaddings,\n  codeBlockRootClass,\n  codeBlockScrollClass,\n  codeBlockSurfaceClass,\n  codeBlockTextSizes,\n  codeBlockWrapClass,\n  codeTokenClass,\n} from './grCodeBlockStyles'\n\nimport type { GrComponentSize } from '../shared/sizes'\n\nexport type { GrCodeToken, GrCodeTokenKind } from './tokenizeJson'\n\n/** Язык подсветки. Кроме JSON компонент ничего не разбирает — и не должен. */\nexport type GrCodeBlockLanguage = 'json' | 'text'\n\n/**\n * Блок сырого текста или JSON: моноширинный, с подсветкой, номерами строк и\n * копированием в буфер.\n *\n * Показывает, а не редактирует и не сворачивает узлы. Свёртка по узлам — задача\n * `GrJsonViewer`, дерево выбора — `GrTree`.\n */\nexport interface GrCodeBlockProps {\n  /** Строка или значение: объект сериализуется с отступом. */\n  code: unknown\n  language?: GrCodeBlockLanguage\n  /** Высота, после которой включается вертикальный скролл. */\n  maxHeight?: string | number\n  /** Кнопка копирования. Без защищённого контекста не рисуется вовсе. */\n  copyable?: boolean\n  /** Переносить длинные строки вместо горизонтальной прокрутки. */\n  wrap?: boolean\n  lineNumbers?: boolean\n  /** Имя области прокрутки. Безымянную скринридер объявляет просто «регион». */\n  ariaLabel?: string\n  size?: GrComponentSize\n}\n\nexport interface GrCodeBlockEmits {\n  /** Текст скопирован. Тост показывает потребитель: у блока своего места для него нет. */\n  (e: 'copy', code: string): void\n}\n\nconst props = withDefaults(defineProps<GrCodeBlockProps>(), {\n  // Дефолты живут в резолверах ниже: Vue подставил бы свой раньше, чем компонент\n  // заглянет в `GrConfigProvider`.\n  language: 'json',\n  maxHeight: undefined,\n  copyable: undefined,\n  wrap: undefined,\n  lineNumbers: undefined,\n  ariaLabel: undefined,\n  size: undefined,\n})\n\nconst emit = defineEmits<GrCodeBlockEmits>()\n\nconst { t } = useGranularityTranslations()\nconst { announce } = useAnnouncer()\n\nconst resolvedSize = useGrComponentSize(() => props.size, { component: 'GrCodeBlock' })\nconst resolvedCopyable = useGrComponentProp('GrCodeBlock', 'copyable', () => props.copyable, true)\nconst resolvedWrap = useGrComponentProp('GrCodeBlock', 'wrap', () => props.wrap, false)\nconst resolvedLineNumbers = useGrComponentProp('GrCodeBlock', 'lineNumbers', () => props.lineNumbers, false)\n\n/** Единственный источник текста: он же рендерится, он же уходит в буфер. */\nconst source = computed(() => serializeCode(props.code))\n\n/**\n * Разбор идёт по строкам, а не по всему тексту: номер строки — CSS-счётчик, а\n * счётчику нужен элемент на строку. JSON-строка перенос не содержит (он в ней\n * экранирован), поэтому построчная токенизация ничего не рвёт.\n */\nconst lines = computed<GrCodeToken[][]>(() => {\n  const rows = source.value.split('\\n')\n\n  if (props.language !== 'json') return rows.map(row => [{ text: row, kind: 'plain' as const }])\n\n  return rows.map(row => tokenizeJson(row))\n})\n\n/**\n * Блок — скроллер по конструкции, а не по замеру. Замер здесь означал бы\n * мигающую остановку `Tab` на каждой смене данных и загрузке шрифта; ни один\n * компонент пакета так не делает.\n */\nconst isScroller = computed(() => props.maxHeight !== undefined || !resolvedWrap.value)\n\nconst scrollStyle = computed(() => {\n  if (props.maxHeight === undefined) return undefined\n\n  return { maxHeight: typeof props.maxHeight === 'number' ? `${props.maxHeight}px` : props.maxHeight }\n})\n\nconst preClass = computed(() => [\n  codeBlockHookClass,\n  codeBlockSurfaceClass,\n  codeBlockPaddings[resolvedSize.value],\n  codeBlockTextSizes[resolvedSize.value],\n  resolvedWrap.value ? codeBlockWrapClass : codeBlockNowrapClass,\n  isScroller.value ? codeBlockScrollClass : '',\n].filter(Boolean).join(' '))\n\n/**\n * Наличие буфера уточняется после монтирования: `navigator` в теле `setup` либо\n * роняет серверный рендер, либо расходится с ним. До этого момента кнопки нет —\n * ровно то же, что отдаёт сервер, поэтому гидрация совпадает.\n */\nconst canCopy = ref(false)\n\nonMounted(() => {\n  canCopy.value = typeof navigator !== 'undefined' && typeof navigator.clipboard?.writeText === 'function'\n})\n\nconst showCopy = computed(() => resolvedCopyable.value && canCopy.value)\n\nconst copied = ref(false)\nlet copiedTimer: number | null = null\n\nfunction resetCopiedTimer(): void {\n  if (copiedTimer !== null) {\n    clearTimeout(copiedTimer)\n    copiedTimer = null\n  }\n}\n\nonBeforeUnmount(resetCopiedTimer)\n\nasync function copy(): Promise<void> {\n  try {\n    // Копируется исходный текст, а не разметка: номера строк — CSS-счётчик,\n    // а мягкие переносы принадлежат показу, и вставить их обратно нельзя.\n    await navigator.clipboard.writeText(source.value)\n  }\n  catch {\n    announce(t('gr.codeBlock.copyFailed', 'Could not copy code'))\n    return\n  }\n\n  copied.value = true\n  resetCopiedTimer()\n  copiedTimer = window.setTimeout(() => {\n    copied.value = false\n    copiedTimer = null\n  }, 1200)\n\n  announce(t('gr.codeBlock.copied', 'Code copied'))\n  emit('copy', source.value)\n}\n\nconst copyLabel = computed(() => (\n  copied.value ? t('gr.codeBlock.copied', 'Code copied') : t('gr.codeBlock.copy', 'Copy code')\n))\n</script>\n\n<template>\n  <div data-gr-code-block :class=\"[codeBlockRootClass, showCopy ? codeBlockGutterClass : '']\">\n    <GrButton\n      v-if=\"showCopy\"\n      data-gr-code-block-copy\n      variant=\"ghost\"\n      size=\"xs\"\n      square\n      :class=\"codeBlockCopyClass\"\n      :aria-label=\"copyLabel\"\n      :title=\"copyLabel\"\n      @click=\"copy\"\n    >\n      <component :is=\"copied ? IconCheck : IconCopy\" class=\"h-3.5 w-3.5\" aria-hidden=\"true\" />\n    </GrButton>\n\n    <!--\n      Внутри `<pre>` пробелы значимы, и компилятор Vue их здесь не схлопывает:\n      любой перенос между тегами стал бы пустой строкой в коде. Поэтому\n      содержимое блока записано без переносов — строки разделяет `display: block`\n      у `.gr-code-block__line`, а не текстовый `\\n`.\n    -->\n    <pre\n      data-gr-code-block-scroll\n      :class=\"[preClass, resolvedLineNumbers ? numberedClass : '']\"\n      :style=\"scrollStyle\"\n      :tabindex=\"isScroller ? 0 : undefined\"\n      :role=\"ariaLabel ? 'region' : undefined\"\n      :aria-label=\"ariaLabel\"\n    ><code data-gr-code-block-code><span v-for=\"(tokens, index) in lines\" :key=\"index\" data-gr-code-block-line class=\"gr-code-block__line\"><span v-for=\"(token, tokenIndex) in tokens\" :key=\"tokenIndex\" :class=\"codeTokenClass[token.kind]\">{{ token.text }}</span></span></code></pre>\n  </div>\n</template>\n\n<style>\n/*\n * Номер строки — CSS-счётчик, а не текст в разметке. Разница не косметическая:\n * узел со `<span>2</span>` попадает в выделение мышью, и в буфер уезжает то,\n * что нельзя вставить обратно как код. У `::before` содержимого в DOM нет.\n *\n * Стиль глобальный, а не scoped: правило адресует псевдоэлемент строки, и\n * scoped-атрибут пришлось бы вешать на каждый из них.\n */\n:where(.gr-code-block__line) {\n  display: block;\n}\n\n:where(.gr-code-block--numbered) {\n  counter-reset: gr-code-line;\n}\n\n/*\n * Висячий отступ: строка сдвинута на ширину колонки номеров, а первая строка\n * возвращена назад отрицательным `text-indent` — туда и встаёт номер. Без этого\n * перенесённая при `wrap` строка начиналась бы под номером, а не под кодом.\n */\n:where(.gr-code-block--numbered .gr-code-block__line) {\n  padding-left: calc(var(--gr-code-block-line-number-width, 2.5em) + 1em);\n  text-indent: calc(-1 * (var(--gr-code-block-line-number-width, 2.5em) + 1em));\n}\n\n:where(.gr-code-block--numbered .gr-code-block__line)::before {\n  counter-increment: gr-code-line;\n  content: counter(gr-code-line);\n  display: inline-block;\n  width: var(--gr-code-block-line-number-width, 2.5em);\n  margin-right: 1em;\n  text-align: right;\n  text-indent: 0;\n  color: var(--gr-code-block-line-number, var(--gr-muted-fg));\n  user-select: none;\n}\n</style>\n","<script setup lang=\"ts\">\nimport { computed, onBeforeUnmount, onMounted, ref } from 'vue'\n\nimport GrButton from '../GrButton/GrButton.vue'\nimport { useAnnouncer } from '../../composables/useAnnouncer'\nimport { useGranularityTranslations } from '../../internal/granularityI18n'\nimport { useGrComponentProp, useGrComponentSize } from '../GrConfigProvider/context'\n\nimport IconCheck from '~icons/lucide/check'\nimport IconCopy from '~icons/lucide/copy'\n\nimport { serializeCode } from './serializeCode'\nimport { tokenizeJson, type GrCodeToken } from './tokenizeJson'\nimport {\n  codeBlockCopyClass,\n  codeBlockGutterClass,\n  codeBlockHookClass,\n  codeBlockNowrapClass,\n  codeBlockNumberedClass as numberedClass,\n  codeBlockPaddings,\n  codeBlockRootClass,\n  codeBlockScrollClass,\n  codeBlockSurfaceClass,\n  codeBlockTextSizes,\n  codeBlockWrapClass,\n  codeTokenClass,\n} from './grCodeBlockStyles'\n\nimport type { GrComponentSize } from '../shared/sizes'\n\nexport type { GrCodeToken, GrCodeTokenKind } from './tokenizeJson'\n\n/** Язык подсветки. Кроме JSON компонент ничего не разбирает — и не должен. */\nexport type GrCodeBlockLanguage = 'json' | 'text'\n\n/**\n * Блок сырого текста или JSON: моноширинный, с подсветкой, номерами строк и\n * копированием в буфер.\n *\n * Показывает, а не редактирует и не сворачивает узлы. Свёртка по узлам — задача\n * `GrJsonViewer`, дерево выбора — `GrTree`.\n */\nexport interface GrCodeBlockProps {\n  /** Строка или значение: объект сериализуется с отступом. */\n  code: unknown\n  language?: GrCodeBlockLanguage\n  /** Высота, после которой включается вертикальный скролл. */\n  maxHeight?: string | number\n  /** Кнопка копирования. Без защищённого контекста не рисуется вовсе. */\n  copyable?: boolean\n  /** Переносить длинные строки вместо горизонтальной прокрутки. */\n  wrap?: boolean\n  lineNumbers?: boolean\n  /** Имя области прокрутки. Безымянную скринридер объявляет просто «регион». */\n  ariaLabel?: string\n  size?: GrComponentSize\n}\n\nexport interface GrCodeBlockEmits {\n  /** Текст скопирован. Тост показывает потребитель: у блока своего места для него нет. */\n  (e: 'copy', code: string): void\n}\n\nconst props = withDefaults(defineProps<GrCodeBlockProps>(), {\n  // Дефолты живут в резолверах ниже: Vue подставил бы свой раньше, чем компонент\n  // заглянет в `GrConfigProvider`.\n  language: 'json',\n  maxHeight: undefined,\n  copyable: undefined,\n  wrap: undefined,\n  lineNumbers: undefined,\n  ariaLabel: undefined,\n  size: undefined,\n})\n\nconst emit = defineEmits<GrCodeBlockEmits>()\n\nconst { t } = useGranularityTranslations()\nconst { announce } = useAnnouncer()\n\nconst resolvedSize = useGrComponentSize(() => props.size, { component: 'GrCodeBlock' })\nconst resolvedCopyable = useGrComponentProp('GrCodeBlock', 'copyable', () => props.copyable, true)\nconst resolvedWrap = useGrComponentProp('GrCodeBlock', 'wrap', () => props.wrap, false)\nconst resolvedLineNumbers = useGrComponentProp('GrCodeBlock', 'lineNumbers', () => props.lineNumbers, false)\n\n/** Единственный источник текста: он же рендерится, он же уходит в буфер. */\nconst source = computed(() => serializeCode(props.code))\n\n/**\n * Разбор идёт по строкам, а не по всему тексту: номер строки — CSS-счётчик, а\n * счётчику нужен элемент на строку. JSON-строка перенос не содержит (он в ней\n * экранирован), поэтому построчная токенизация ничего не рвёт.\n */\nconst lines = computed<GrCodeToken[][]>(() => {\n  const rows = source.value.split('\\n')\n\n  if (props.language !== 'json') return rows.map(row => [{ text: row, kind: 'plain' as const }])\n\n  return rows.map(row => tokenizeJson(row))\n})\n\n/**\n * Блок — скроллер по конструкции, а не по замеру. Замер здесь означал бы\n * мигающую остановку `Tab` на каждой смене данных и загрузке шрифта; ни один\n * компонент пакета так не делает.\n */\nconst isScroller = computed(() => props.maxHeight !== undefined || !resolvedWrap.value)\n\nconst scrollStyle = computed(() => {\n  if (props.maxHeight === undefined) return undefined\n\n  return { maxHeight: typeof props.maxHeight === 'number' ? `${props.maxHeight}px` : props.maxHeight }\n})\n\nconst preClass = computed(() => [\n  codeBlockHookClass,\n  codeBlockSurfaceClass,\n  codeBlockPaddings[resolvedSize.value],\n  codeBlockTextSizes[resolvedSize.value],\n  resolvedWrap.value ? codeBlockWrapClass : codeBlockNowrapClass,\n  isScroller.value ? codeBlockScrollClass : '',\n].filter(Boolean).join(' '))\n\n/**\n * Наличие буфера уточняется после монтирования: `navigator` в теле `setup` либо\n * роняет серверный рендер, либо расходится с ним. До этого момента кнопки нет —\n * ровно то же, что отдаёт сервер, поэтому гидрация совпадает.\n */\nconst canCopy = ref(false)\n\nonMounted(() => {\n  canCopy.value = typeof navigator !== 'undefined' && typeof navigator.clipboard?.writeText === 'function'\n})\n\nconst showCopy = computed(() => resolvedCopyable.value && canCopy.value)\n\nconst copied = ref(false)\nlet copiedTimer: number | null = null\n\nfunction resetCopiedTimer(): void {\n  if (copiedTimer !== null) {\n    clearTimeout(copiedTimer)\n    copiedTimer = null\n  }\n}\n\nonBeforeUnmount(resetCopiedTimer)\n\nasync function copy(): Promise<void> {\n  try {\n    // Копируется исходный текст, а не разметка: номера строк — CSS-счётчик,\n    // а мягкие переносы принадлежат показу, и вставить их обратно нельзя.\n    await navigator.clipboard.writeText(source.value)\n  }\n  catch {\n    announce(t('gr.codeBlock.copyFailed', 'Could not copy code'))\n    return\n  }\n\n  copied.value = true\n  resetCopiedTimer()\n  copiedTimer = window.setTimeout(() => {\n    copied.value = false\n    copiedTimer = null\n  }, 1200)\n\n  announce(t('gr.codeBlock.copied', 'Code copied'))\n  emit('copy', source.value)\n}\n\nconst copyLabel = computed(() => (\n  copied.value ? t('gr.codeBlock.copied', 'Code copied') : t('gr.codeBlock.copy', 'Copy code')\n))\n</script>\n\n<template>\n  <div data-gr-code-block :class=\"[codeBlockRootClass, showCopy ? codeBlockGutterClass : '']\">\n    <GrButton\n      v-if=\"showCopy\"\n      data-gr-code-block-copy\n      variant=\"ghost\"\n      size=\"xs\"\n      square\n      :class=\"codeBlockCopyClass\"\n      :aria-label=\"copyLabel\"\n      :title=\"copyLabel\"\n      @click=\"copy\"\n    >\n      <component :is=\"copied ? IconCheck : IconCopy\" class=\"h-3.5 w-3.5\" aria-hidden=\"true\" />\n    </GrButton>\n\n    <!--\n      Внутри `<pre>` пробелы значимы, и компилятор Vue их здесь не схлопывает:\n      любой перенос между тегами стал бы пустой строкой в коде. Поэтому\n      содержимое блока записано без переносов — строки разделяет `display: block`\n      у `.gr-code-block__line`, а не текстовый `\\n`.\n    -->\n    <pre\n      data-gr-code-block-scroll\n      :class=\"[preClass, resolvedLineNumbers ? numberedClass : '']\"\n      :style=\"scrollStyle\"\n      :tabindex=\"isScroller ? 0 : undefined\"\n      :role=\"ariaLabel ? 'region' : undefined\"\n      :aria-label=\"ariaLabel\"\n    ><code data-gr-code-block-code><span v-for=\"(tokens, index) in lines\" :key=\"index\" data-gr-code-block-line class=\"gr-code-block__line\"><span v-for=\"(token, tokenIndex) in tokens\" :key=\"tokenIndex\" :class=\"codeTokenClass[token.kind]\">{{ token.text }}</span></span></code></pre>\n  </div>\n</template>\n\n<style>\n/*\n * Номер строки — CSS-счётчик, а не текст в разметке. Разница не косметическая:\n * узел со `<span>2</span>` попадает в выделение мышью, и в буфер уезжает то,\n * что нельзя вставить обратно как код. У `::before` содержимого в DOM нет.\n *\n * Стиль глобальный, а не scoped: правило адресует псевдоэлемент строки, и\n * scoped-атрибут пришлось бы вешать на каждый из них.\n */\n:where(.gr-code-block__line) {\n  display: block;\n}\n\n:where(.gr-code-block--numbered) {\n  counter-reset: gr-code-line;\n}\n\n/*\n * Висячий отступ: строка сдвинута на ширину колонки номеров, а первая строка\n * возвращена назад отрицательным `text-indent` — туда и встаёт номер. Без этого\n * перенесённая при `wrap` строка начиналась бы под номером, а не под кодом.\n */\n:where(.gr-code-block--numbered .gr-code-block__line) {\n  padding-left: calc(var(--gr-code-block-line-number-width, 2.5em) + 1em);\n  text-indent: calc(-1 * (var(--gr-code-block-line-number-width, 2.5em) + 1em));\n}\n\n:where(.gr-code-block--numbered .gr-code-block__line)::before {\n  counter-increment: gr-code-line;\n  content: counter(gr-code-line);\n  display: inline-block;\n  width: var(--gr-code-block-line-number-width, 2.5em);\n  margin-right: 1em;\n  text-align: right;\n  text-indent: 0;\n  color: var(--gr-code-block-line-number, var(--gr-muted-fg));\n  user-select: none;\n}\n</style>\n"],"mappings":"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"}

package/dist/components/GrColorPicker/chunks/GrColorPicker-C7ifyQ0R.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"GrColorPicker-C7ifyQ0R.js","names":[],"sources":["../../../../src/components/GrColorPicker/color.ts","../../../../src/components/GrColorPicker/GrColorPicker.vue","../../../../src/components/GrColorPicker/GrColorPicker.vue"],"sourcesContent":["/**\n * Арифметика цвета для `GrColorPicker` — чистый модуль без Vue.\n *\n * Модель компонента — hex-строка (в такой форме цвет лежит в токенах темы),\n * а панель работает в HSL: у оттенка, насыщенности и светлоты есть шкала, по\n * которой можно вести слайдер, а у каналов RGB её нет.\n *\n * Свой парсер, а не `__tests__/cssContrast.ts`: тот — инфраструктура гейтов, и\n * тянуть тестовый модуль в поставляемый код нельзя.\n */\n\nexport type GrHsla = {\n  /** Оттенок, 0…359 (круговой: 360 — это 0). */\n  h: number\n  /** Насыщенность, 0…100. */\n  s: number\n  /** Светлота, 0…100. */\n  l: number\n  /** Непрозрачность, 0…1. */\n  a: number\n}\n\ntype Rgb = { r: number, g: number, b: number }\n\nconst HEX_PATTERN = /^#?([0-9a-f]{3,8})$/i\n\nfunction clamp(value: number, min: number, max: number): number {\n  return Math.min(Math.max(value, min), max)\n}\n\n/**\n * Оттенок цикличен: 360° — тот же цвет, что 0°.\n *\n * Округления здесь нет намеренно: `#3b82f6` даёт 217.22°, и округлив его до\n * целого, обратное преобразование вернуло бы `#3b83f6` — компонент молча\n * переписывал бы чужой цвет при первом же открытии панели. Целые градусы\n * появляются там, где они и нужны, — на шкале слайдера (`normalizeHsla`).\n */\nfunction normalizeHue(hue: number): number {\n  if (!Number.isFinite(hue)) return 0\n  return ((hue % 360) + 360) % 360\n}\n\n/** Короткая форма `#abc` разворачивается в `#aabbcc` — так её читает и CSS. */\nfunction expandShorthand(hex: string): string | null {\n  if (hex.length === 3 || hex.length === 4)\n    return [...hex].map(char => char + char).join('')\n\n  if (hex.length === 6 || hex.length === 8) return hex\n\n  return null\n}\n\nfunction rgbToHsl({ r, g, b }: Rgb): { h: number, s: number, l: number } {\n  const red = r / 255\n  const green = g / 255\n  const blue = b / 255\n\n  const max = Math.max(red, green, blue)\n  const min = Math.min(red, green, blue)\n  const delta = max - min\n  const lightness = (max + min) / 2\n\n  if (delta === 0) return { h: 0, s: 0, l: lightness * 100 }\n\n  const saturation = delta / (1 - Math.abs(2 * lightness - 1))\n\n  let hue: number\n  if (max === red) hue = ((green - blue) / delta) % 6\n  else if (max === green) hue = (blue - red) / delta + 2\n  else hue = (red - green) / delta + 4\n\n  return { h: normalizeHue(hue * 60), s: saturation * 100, l: lightness * 100 }\n}\n\nfunction hslToRgb({ h, s, l }: Omit<GrHsla, 'a'>): Rgb {\n  const saturation = clamp(s, 0, 100) / 100\n  const lightness = clamp(l, 0, 100) / 100\n  const hue = normalizeHue(h)\n\n  const chroma = (1 - Math.abs(2 * lightness - 1)) * saturation\n  const second = chroma * (1 - Math.abs(((hue / 60) % 2) - 1))\n  const match = lightness - chroma / 2\n\n  const [red, green, blue] = ((): [number, number, number] => {\n    if (hue < 60) return [chroma, second, 0]\n    if (hue < 120) return [second, chroma, 0]\n    if (hue < 180) return [0, chroma, second]\n    if (hue < 240) return [0, second, chroma]\n    if (hue < 300) return [second, 0, chroma]\n    return [chroma, 0, second]\n  })()\n\n  return {\n    r: Math.round((red + match) * 255),\n    g: Math.round((green + match) * 255),\n    b: Math.round((blue + match) * 255),\n  }\n}\n\nfunction toHexPair(value: number): string {\n  return clamp(Math.round(value), 0, 255).toString(16).padStart(2, '0')\n}\n\n/**\n * Разбирает hex любой из четырёх форм (`#abc`, `#abcd`, `#aabbcc`, `#aabbccdd`),\n * регистр и решётка необязательны.\n *\n * Мусор возвращает `null`, а не бросает: значение приходит из модели снаружи и\n * из поля ввода, и упавший компонент — худший ответ на опечатку.\n */\nexport function parseHexColor(value: unknown): GrHsla | null {\n  if (typeof value !== 'string') return null\n\n  const match = HEX_PATTERN.exec(value.trim())\n  if (!match) return null\n\n  const hex = expandShorthand(match[1])\n  if (!hex) return null\n\n  const rgb: Rgb = {\n    r: Number.parseInt(hex.slice(0, 2), 16),\n    g: Number.parseInt(hex.slice(2, 4), 16),\n    b: Number.parseInt(hex.slice(4, 6), 16),\n  }\n\n  const alpha = hex.length === 8 ? Number.parseInt(hex.slice(6, 8), 16) / 255 : 1\n\n  return { ...rgbToHsl(rgb), a: alpha }\n}\n\n/**\n * Собирает hex обратно. `withAlpha: false` альфу отбрасывает, а не округляет до\n * непрозрачного: компонент без пропа `alpha` не вправе отдавать восьмизначную\n * форму, которую потребитель не ждёт.\n */\nexport function formatHexColor(color: GrHsla, withAlpha = false): string {\n  const { r, g, b } = hslToRgb(color)\n  const base = `#${toHexPair(r)}${toHexPair(g)}${toHexPair(b)}`\n\n  if (!withAlpha) return base\n\n  return `${base}${toHexPair(clamp(color.a, 0, 1) * 255)}`\n}\n\n/** Короткая запись числа: целое остаётся целым, дробь обрезается до сотых. */\nfunction trim(value: number): number {\n  return Math.round(value * 100) / 100\n}\n\n/** CSS-запись цвета для превью и градиентов. */\nexport function hslaToCss(color: GrHsla): string {\n  const h = trim(normalizeHue(color.h))\n  const s = trim(clamp(color.s, 0, 100))\n  const l = trim(clamp(color.l, 0, 100))\n\n  return `hsl(${h} ${s}% ${l}% / ${trim(clamp(color.a, 0, 1))})`\n}\n\n/** Приводит произвольный объект к валидному диапазону каналов. */\nexport function normalizeHsla(color: GrHsla): GrHsla {\n  return {\n    h: Math.round(normalizeHue(color.h)) % 360,\n    s: clamp(Math.round(color.s), 0, 100),\n    l: clamp(Math.round(color.l), 0, 100),\n    a: clamp(color.a, 0, 1),\n  }\n}\n","<script setup lang=\"ts\">\n/**\n * GrColorPicker — поле выбора цвета: образец с текущим значением, панель с\n * оттенком, насыщенностью, светлотой и прозрачностью, поле hex и палитра.\n *\n * Прямой сценарий — настройки темы и брендирования, поэтому модель хранит hex:\n * в такой форме цвет лежит в токенах и его понимает CSS.\n *\n * A11y: каждый канал — отдельный `GrSlider`, то есть настоящий `role=\"slider\"`\n * с полной клавиатурой и `aria-valuetext`. Двумерная область saturation/value\n * не берётся намеренно: это свой виджет со своей клавиатурой по двум осям, и\n * доступность там пришлось бы собирать с нуля.\n */\nimport { computed, nextTick, ref, useId, watch } from 'vue'\n\nimport { useGrFormControl } from '../../composables/useGrFormControl'\nimport { useGranularityTranslations } from '../../internal/granularityI18n'\nimport { useGrComponentSize } from '../GrConfigProvider/context'\nimport { useGrFormFieldContext } from '../GrFormField/context'\nimport GrInput from '../GrInput/GrInput.vue'\nimport GrPopover from '../GrPopover/GrPopover.vue'\nimport GrSlider from '../GrSlider/GrSlider.vue'\n\nimport { formatHexColor, hslaToCss, normalizeHsla, parseHexColor, type GrHsla } from './color'\nimport {\n  checkerClass,\n  grColorPickerPanelClass,\n  grColorPickerPresetClass,\n  grColorPickerTriggerClass,\n  presetsGridClass,\n  previewClass,\n  rowClass,\n  rowLabelClass,\n  rowValueClass,\n  swatchBaseClass,\n  swatchFillClass,\n  triggerSwatchSizeBySize,\n  triggerValueClass,\n  type GrColorPickerSize,\n} from './grColorPickerStyles'\n\nexport type { GrColorPickerSize } from './grColorPickerStyles'\n\nexport interface GrColorPickerProps {\n  /** Цвет в hex: `#RRGGBB`, а при `alpha` — `#RRGGBBAA`. Мусор не роняет компонент. */\n  modelValue: string\n  /** Четвёртый слайдер и восьмизначная форма hex. */\n  alpha?: boolean\n  /** Палитра быстрого выбора. Пусто — блок не рендерится. */\n  presets?: string[]\n  size?: GrColorPickerSize\n  /** Контролируемое состояние панели (`v-model:open`). */\n  open?: boolean\n  /** Сторона, с которой раскрывается панель. */\n  placement?: 'bottom-start' | 'bottom-end' | 'top-start' | 'top-end'\n  /** Имя для нативной формы: значение уходит скрытым полем. */\n  name?: string\n  disabled?: boolean\n  /** Только для чтения: цвет видно, панель открывается, но значение не меняется. */\n  readonly?: boolean\n  invalid?: boolean\n  required?: boolean\n  ariaLabel?: string\n}\n\nexport interface GrColorPickerEmits {\n  (e: 'update:modelValue', value: string): void\n  (e: 'change', value: string): void\n  (e: 'update:open', value: boolean): void\n  (e: 'focus', event: FocusEvent): void\n  (e: 'blur', event: FocusEvent): void\n}\n\nconst props = withDefaults(defineProps<GrColorPickerProps>(), {\n  alpha: false,\n  presets: () => [],\n  // Дефолт живёт в резолвере: Vue подставил бы свой раньше, чем компонент\n  // заглянет в `GrConfigProvider`.\n  size: undefined,\n  open: undefined,\n  placement: 'bottom-start',\n  name: undefined,\n  disabled: false,\n  readonly: false,\n  invalid: false,\n  required: false,\n  ariaLabel: undefined,\n})\n\nconst emit = defineEmits<GrColorPickerEmits>()\n\nconst { t } = useGranularityTranslations()\n\nconst resolvedSize = useGrComponentSize(() => props.size, { component: 'GrColorPicker' })\n\nconst field = useGrFormFieldContext()\nconst fieldId = computed(() => field?.id.value)\nconst {\n  disabled: isDisabled,\n  invalid: isInvalid,\n  required: isRequired,\n  readonly: isReadonly,\n  // «Ввод не принимается» — `disabled` или `readonly`: значение видно, но не меняется.\n  locked: isLocked,\n} = useGrFormControl(() => props)\n\n/**\n * `aria-required` и `aria-readonly` роль `button` не поддерживает — axe роняет\n * это как critical `aria-allowed-attr`. Состояния уходят в описание триггера:\n * иначе они пропали бы для диктора совсем (маркер `*` у `GrFormField`\n * декоративен и скрыт).\n */\nconst stateHintId = useId()\nconst stateHint = computed(() => [\n  isRequired.value ? t('gr.form.required', 'This field is required') : undefined,\n  isReadonly.value ? t('gr.form.readonly', 'Read only') : undefined,\n].filter(Boolean).join('. ') || undefined)\n\nconst describedBy = computed(() => [\n  field?.describedById.value,\n  stateHint.value ? stateHintId : undefined,\n].filter(Boolean).join(' ') || undefined)\n\nconst triggerEl = ref<HTMLElement | null>(null)\n\nfunction focus(): void {\n  triggerEl.value?.focus()\n}\n\nfunction blur(): void {\n  triggerEl.value?.blur()\n}\n\ndefineExpose({ focus, blur })\n\nconst FALLBACK: GrHsla = { h: 0, s: 0, l: 0, a: 1 }\n\n/**\n * Рабочее состояние панели.\n *\n * Держать его отдельно от модели обязательно: hex — проекция с потерями. У\n * серого нет оттенка, и без собственного состояния бегунок оттенка прыгал бы\n * обратно на 0° при каждом движении.\n */\nconst state = ref<GrHsla>(parseHexColor(props.modelValue) ?? FALLBACK)\n\n/** Последнее отданное значение: вернувшись в проп, оно не должно сбрасывать состояние. */\nlet lastEmitted = ''\n\nwatch(() => props.modelValue, (next) => {\n  if (next === lastEmitted) return\n\n  const parsed = parseHexColor(next)\n  if (parsed) state.value = parsed\n})\n\nconst cssColor = computed(() => hslaToCss(state.value))\nconst hexValue = computed(() => formatHexColor(state.value, props.alpha))\n\nfunction commit(next: GrHsla): void {\n  if (isLocked.value) return\n\n  state.value = normalizeHsla(next)\n\n  const hex = formatHexColor(state.value, props.alpha)\n  lastEmitted = hex\n  emit('update:modelValue', hex)\n  emit('change', hex)\n}\n\n/** Канал панели: слайдер читает состояние и коммитит новое значение целиком. */\nfunction channel(key: 'h' | 's' | 'l' | 'a', scale = 1) {\n  return computed<number>({\n    get: () => Math.round(state.value[key] * scale),\n    set: value => commit({ ...state.value, [key]: value / scale }),\n  })\n}\n\nconst hue = channel('h')\nconst saturation = channel('s')\nconst lightness = channel('l')\n// Альфа хранится долей, а слайдер ходит по процентам — иначе шаг был бы 0.01.\nconst opacity = channel('a', 100)\n\nconst degrees = (value: number): string => `${value}°`\nconst percent = (value: number): string => `${value}%`\n\n/** Текст поля hex редактируется свободно и коммитится только валидным. */\nconst hexDraft = ref(hexValue.value)\n\nwatch(hexValue, (next) => {\n  hexDraft.value = next\n})\n\nfunction commitHex(): void {\n  const parsed = parseHexColor(hexDraft.value)\n\n  // Мусор откатывается к текущему значению: держать в поле невалидный текст\n  // после коммита — значит показывать цвет, которого нет.\n  //\n  // Откат идёт следующим тиком намеренно: вернув значение синхронно, мы отдали\n  // бы Vue то же самое, что он уже отрисовал, — патча не случилось бы, и в поле\n  // остался бы набранный мусор.\n  if (!parsed) {\n    void nextTick(() => { hexDraft.value = hexValue.value })\n    return\n  }\n\n  commit(props.alpha ? parsed : { ...parsed, a: state.value.a })\n}\n\nconst isOpen = ref(false)\nconst panelOpen = computed({\n  get: () => props.open ?? isOpen.value,\n  set: (value) => {\n    isOpen.value = value\n    emit('update:open', value)\n  },\n})\n\nconst presetList = computed(() => props.presets.filter(preset => parseHexColor(preset) !== null))\n\nfunction isPresetSelected(preset: string): boolean {\n  const parsed = parseHexColor(preset)\n  return parsed ? formatHexColor(parsed, props.alpha) === hexValue.value : false\n}\n\nfunction selectPreset(preset: string): void {\n  const parsed = parseHexColor(preset)\n  if (parsed) commit(parsed)\n}\n\nconst triggerClass = computed(() => grColorPickerTriggerClass({\n  size: resolvedSize.value,\n  disabled: isDisabled.value,\n  invalid: isInvalid.value,\n}))\n\nconst panelClass = computed(() => grColorPickerPanelClass(resolvedSize.value))\nconst swatchSizeClass = computed(() => triggerSwatchSizeBySize[resolvedSize.value])\n\n/**\n * Градиенты дорожек. Через `--gr-slider-rail` их не подать: хук уходит в\n * `background-color`, а градиент там не работает — поэтому значения приезжают\n * переменными, а красит дорожки собственный `<style>` компонента.\n *\n * Переменные висят на самой панели, а не на корне: панель уезжает в портал, и\n * наследование от корня до неё не доходит.\n */\nconst trackVars = computed<Record<string, string>>(() => {\n  const { h, s, l } = state.value\n  const solid = hslaToCss({ h, s, l, a: 1 })\n\n  return {\n    '--gr-color-picker-track-hue': 'linear-gradient(to right, hsl(0 100% 50%), hsl(60 100% 50%), hsl(120 100% 50%), hsl(180 100% 50%), hsl(240 100% 50%), hsl(300 100% 50%), hsl(360 100% 50%))',\n    '--gr-color-picker-track-saturation': `linear-gradient(to right, hsl(${Math.round(h)} 0% ${Math.round(l)}%), hsl(${Math.round(h)} 100% ${Math.round(l)}%))`,\n    '--gr-color-picker-track-lightness': `linear-gradient(to right, hsl(${Math.round(h)} ${Math.round(s)}% 0%), hsl(${Math.round(h)} ${Math.round(s)}% 50%), hsl(${Math.round(h)} ${Math.round(s)}% 100%))`,\n    '--gr-color-picker-track-alpha': `linear-gradient(to right, transparent, ${solid})`,\n  }\n})\n</script>\n\n<template>\n  <div data-gr-color-picker>\n    <!-- Значение для нативной формы уходит скрытым полем: интерактивного\n         контрола внутри виджета быть не должно. -->\n    <input v-if=\"name\" type=\"hidden\" :name=\"name\" :value=\"hexValue\">\n\n    <span v-if=\"stateHint\" :id=\"stateHintId\" class=\"sr-only\">{{ stateHint }}</span>\n\n    <GrPopover\n      v-model:open=\"panelOpen\"\n      :size=\"resolvedSize\"\n      :placement=\"placement\"\n      :disabled=\"isDisabled\"\n      :aria-label=\"t('gr.colorPicker.panelLabel', 'Color picker')\"\n      :close-on-content-click=\"false\"\n    >\n      <template #trigger=\"{ triggerProps }\">\n        <button\n          :id=\"fieldId\"\n          ref=\"triggerEl\"\n          v-bind=\"triggerProps\"\n          data-gr-color-picker-trigger\n          type=\"button\"\n          :class=\"triggerClass\"\n          :aria-label=\"ariaLabel\"\n          :aria-describedby=\"describedBy\"\n          :aria-invalid=\"isInvalid ? 'true' : undefined\"\n          @focus=\"emit('focus', $event)\"\n          @blur=\"emit('blur', $event)\"\n        >\n          <span\n            data-gr-color-picker-swatch\n            aria-hidden=\"true\"\n            :class=\"[swatchBaseClass, swatchSizeClass, checkerClass]\"\n          >\n            <span :class=\"swatchFillClass\" :style=\"{ background: cssColor }\" />\n          </span>\n\n          <span :class=\"triggerValueClass\">{{ hexValue }}</span>\n        </button>\n      </template>\n\n      <template #content>\n        <div data-gr-color-picker-panel :class=\"panelClass\" :style=\"trackVars\">\n          <div\n            data-gr-color-picker-preview\n            aria-hidden=\"true\"\n            :class=\"[previewClass, checkerClass]\"\n          >\n            <span :class=\"swatchFillClass\" :style=\"{ background: cssColor }\" />\n          </div>\n\n          <div data-gr-color-picker-channel=\"hue\" :class=\"rowClass\">\n            <span :class=\"rowLabelClass\" aria-hidden=\"true\">H</span>\n            <GrSlider\n              v-model=\"hue\"\n              :min=\"0\"\n              :max=\"359\"\n              :size=\"resolvedSize\"\n              :disabled=\"isDisabled\"\n              :readonly=\"isReadonly\"\n              :format-tooltip=\"degrees\"\n              :aria-label=\"t('gr.colorPicker.hue', 'Hue')\"\n            />\n            <span :class=\"rowValueClass\">{{ degrees(hue) }}</span>\n          </div>\n\n          <div data-gr-color-picker-channel=\"saturation\" :class=\"rowClass\">\n            <span :class=\"rowLabelClass\" aria-hidden=\"true\">S</span>\n            <GrSlider\n              v-model=\"saturation\"\n              :size=\"resolvedSize\"\n              :disabled=\"isDisabled\"\n              :readonly=\"isReadonly\"\n              :format-tooltip=\"percent\"\n              :aria-label=\"t('gr.colorPicker.saturation', 'Saturation')\"\n            />\n            <span :class=\"rowValueClass\">{{ percent(saturation) }}</span>\n          </div>\n\n          <div data-gr-color-picker-channel=\"lightness\" :class=\"rowClass\">\n            <span :class=\"rowLabelClass\" aria-hidden=\"true\">L</span>\n            <GrSlider\n              v-model=\"lightness\"\n              :size=\"resolvedSize\"\n              :disabled=\"isDisabled\"\n              :readonly=\"isReadonly\"\n              :format-tooltip=\"percent\"\n              :aria-label=\"t('gr.colorPicker.lightness', 'Lightness')\"\n            />\n            <span :class=\"rowValueClass\">{{ percent(lightness) }}</span>\n          </div>\n\n          <div v-if=\"alpha\" data-gr-color-picker-channel=\"alpha\" :class=\"rowClass\">\n            <span :class=\"rowLabelClass\" aria-hidden=\"true\">A</span>\n            <GrSlider\n              v-model=\"opacity\"\n              :size=\"resolvedSize\"\n              :disabled=\"isDisabled\"\n              :readonly=\"isReadonly\"\n              :format-tooltip=\"percent\"\n              :aria-label=\"t('gr.colorPicker.opacity', 'Opacity')\"\n            />\n            <span :class=\"rowValueClass\">{{ percent(opacity) }}</span>\n          </div>\n\n          <GrInput\n            v-model=\"hexDraft\"\n            data-gr-color-picker-hex\n            :size=\"resolvedSize\"\n            :disabled=\"isDisabled\"\n            :readonly=\"isReadonly\"\n            :aria-label=\"t('gr.colorPicker.hexLabel', 'Hex value')\"\n            @change=\"commitHex\"\n            @keydown.enter=\"commitHex\"\n          />\n\n          <div\n            v-if=\"presetList.length\"\n            data-gr-color-picker-presets\n            :class=\"presetsGridClass\"\n            role=\"group\"\n            :aria-label=\"t('gr.colorPicker.presetsLabel', 'Color presets')\"\n          >\n            <button\n              v-for=\"preset in presetList\"\n              :key=\"preset\"\n              data-gr-color-picker-preset\n              type=\"button\"\n              :class=\"[grColorPickerPresetClass(isPresetSelected(preset)), checkerClass]\"\n              :aria-label=\"t('gr.colorPicker.swatchLabel', 'Color {color}', { color: preset })\"\n              :aria-pressed=\"isPresetSelected(preset) ? 'true' : 'false'\"\n              :disabled=\"isLocked\"\n              @click=\"selectPreset(preset)\"\n            >\n              <span :class=\"swatchFillClass\" :style=\"{ background: preset }\" />\n            </button>\n          </div>\n        </div>\n      </template>\n    </GrPopover>\n  </div>\n</template>\n\n<style>\n/*\n * Шахматка под прозрачным цветом. Двумя `conic-gradient` — в утилите такое не\n * выражается, а без подложки прозрачный образец сливается с панелью.\n */\n.gr-color-picker-checker {\n  background-image:\n    conic-gradient(\n      from 90deg,\n      var(--gr-color-picker-checker-light, var(--gr-bg)) 0 25%,\n      var(--gr-color-picker-checker-dark, var(--gr-muted)) 0 50%,\n      var(--gr-color-picker-checker-light, var(--gr-bg)) 0 75%,\n      var(--gr-color-picker-checker-dark, var(--gr-muted)) 0\n    );\n  background-size:\n    calc(var(--gr-color-picker-checker-size, 6px) * 2)\n    calc(var(--gr-color-picker-checker-size, 6px) * 2);\n  /* Рамка образца полупрозрачна, и без обрезки шахматка просвечивает сквозь неё. */\n  background-clip: padding-box;\n}\n\n/*\n * Дорожки каналов. Красим `[data-gr-slider-track]` потому, что хук\n * `--gr-slider-rail` уходит в `background-color`, а градиент там не работает.\n * Сами градиенты компонент подаёт переменными — CSS остаётся статичной.\n */\n[data-gr-color-picker-channel] [data-gr-slider-track] {\n  border-radius: var(--gr-radius-full);\n}\n\n[data-gr-color-picker-channel='hue'] [data-gr-slider-track] {\n  background-image: var(--gr-color-picker-track-hue);\n}\n\n[data-gr-color-picker-channel='saturation'] [data-gr-slider-track] {\n  background-image: var(--gr-color-picker-track-saturation);\n}\n\n[data-gr-color-picker-channel='lightness'] [data-gr-slider-track] {\n  background-image: var(--gr-color-picker-track-lightness);\n}\n\n[data-gr-color-picker-channel='alpha'] [data-gr-slider-track] {\n  background-image: var(--gr-color-picker-track-alpha);\n}\n\n/* Заливка канала прозрачна: шкалу показывает сама дорожка. */\n[data-gr-color-picker-channel] [data-gr-slider-fill] {\n  background-color: transparent;\n}\n</style>\n","<script setup lang=\"ts\">\n/**\n * GrColorPicker — поле выбора цвета: образец с текущим значением, панель с\n * оттенком, насыщенностью, светлотой и прозрачностью, поле hex и палитра.\n *\n * Прямой сценарий — настройки темы и брендирования, поэтому модель хранит hex:\n * в такой форме цвет лежит в токенах и его понимает CSS.\n *\n * A11y: каждый канал — отдельный `GrSlider`, то есть настоящий `role=\"slider\"`\n * с полной клавиатурой и `aria-valuetext`. Двумерная область saturation/value\n * не берётся намеренно: это свой виджет со своей клавиатурой по двум осям, и\n * доступность там пришлось бы собирать с нуля.\n */\nimport { computed, nextTick, ref, useId, watch } from 'vue'\n\nimport { useGrFormControl } from '../../composables/useGrFormControl'\nimport { useGranularityTranslations } from '../../internal/granularityI18n'\nimport { useGrComponentSize } from '../GrConfigProvider/context'\nimport { useGrFormFieldContext } from '../GrFormField/context'\nimport GrInput from '../GrInput/GrInput.vue'\nimport GrPopover from '../GrPopover/GrPopover.vue'\nimport GrSlider from '../GrSlider/GrSlider.vue'\n\nimport { formatHexColor, hslaToCss, normalizeHsla, parseHexColor, type GrHsla } from './color'\nimport {\n  checkerClass,\n  grColorPickerPanelClass,\n  grColorPickerPresetClass,\n  grColorPickerTriggerClass,\n  presetsGridClass,\n  previewClass,\n  rowClass,\n  rowLabelClass,\n  rowValueClass,\n  swatchBaseClass,\n  swatchFillClass,\n  triggerSwatchSizeBySize,\n  triggerValueClass,\n  type GrColorPickerSize,\n} from './grColorPickerStyles'\n\nexport type { GrColorPickerSize } from './grColorPickerStyles'\n\nexport interface GrColorPickerProps {\n  /** Цвет в hex: `#RRGGBB`, а при `alpha` — `#RRGGBBAA`. Мусор не роняет компонент. */\n  modelValue: string\n  /** Четвёртый слайдер и восьмизначная форма hex. */\n  alpha?: boolean\n  /** Палитра быстрого выбора. Пусто — блок не рендерится. */\n  presets?: string[]\n  size?: GrColorPickerSize\n  /** Контролируемое состояние панели (`v-model:open`). */\n  open?: boolean\n  /** Сторона, с которой раскрывается панель. */\n  placement?: 'bottom-start' | 'bottom-end' | 'top-start' | 'top-end'\n  /** Имя для нативной формы: значение уходит скрытым полем. */\n  name?: string\n  disabled?: boolean\n  /** Только для чтения: цвет видно, панель открывается, но значение не меняется. */\n  readonly?: boolean\n  invalid?: boolean\n  required?: boolean\n  ariaLabel?: string\n}\n\nexport interface GrColorPickerEmits {\n  (e: 'update:modelValue', value: string): void\n  (e: 'change', value: string): void\n  (e: 'update:open', value: boolean): void\n  (e: 'focus', event: FocusEvent): void\n  (e: 'blur', event: FocusEvent): void\n}\n\nconst props = withDefaults(defineProps<GrColorPickerProps>(), {\n  alpha: false,\n  presets: () => [],\n  // Дефолт живёт в резолвере: Vue подставил бы свой раньше, чем компонент\n  // заглянет в `GrConfigProvider`.\n  size: undefined,\n  open: undefined,\n  placement: 'bottom-start',\n  name: undefined,\n  disabled: false,\n  readonly: false,\n  invalid: false,\n  required: false,\n  ariaLabel: undefined,\n})\n\nconst emit = defineEmits<GrColorPickerEmits>()\n\nconst { t } = useGranularityTranslations()\n\nconst resolvedSize = useGrComponentSize(() => props.size, { component: 'GrColorPicker' })\n\nconst field = useGrFormFieldContext()\nconst fieldId = computed(() => field?.id.value)\nconst {\n  disabled: isDisabled,\n  invalid: isInvalid,\n  required: isRequired,\n  readonly: isReadonly,\n  // «Ввод не принимается» — `disabled` или `readonly`: значение видно, но не меняется.\n  locked: isLocked,\n} = useGrFormControl(() => props)\n\n/**\n * `aria-required` и `aria-readonly` роль `button` не поддерживает — axe роняет\n * это как critical `aria-allowed-attr`. Состояния уходят в описание триггера:\n * иначе они пропали бы для диктора совсем (маркер `*` у `GrFormField`\n * декоративен и скрыт).\n */\nconst stateHintId = useId()\nconst stateHint = computed(() => [\n  isRequired.value ? t('gr.form.required', 'This field is required') : undefined,\n  isReadonly.value ? t('gr.form.readonly', 'Read only') : undefined,\n].filter(Boolean).join('. ') || undefined)\n\nconst describedBy = computed(() => [\n  field?.describedById.value,\n  stateHint.value ? stateHintId : undefined,\n].filter(Boolean).join(' ') || undefined)\n\nconst triggerEl = ref<HTMLElement | null>(null)\n\nfunction focus(): void {\n  triggerEl.value?.focus()\n}\n\nfunction blur(): void {\n  triggerEl.value?.blur()\n}\n\ndefineExpose({ focus, blur })\n\nconst FALLBACK: GrHsla = { h: 0, s: 0, l: 0, a: 1 }\n\n/**\n * Рабочее состояние панели.\n *\n * Держать его отдельно от модели обязательно: hex — проекция с потерями. У\n * серого нет оттенка, и без собственного состояния бегунок оттенка прыгал бы\n * обратно на 0° при каждом движении.\n */\nconst state = ref<GrHsla>(parseHexColor(props.modelValue) ?? FALLBACK)\n\n/** Последнее отданное значение: вернувшись в проп, оно не должно сбрасывать состояние. */\nlet lastEmitted = ''\n\nwatch(() => props.modelValue, (next) => {\n  if (next === lastEmitted) return\n\n  const parsed = parseHexColor(next)\n  if (parsed) state.value = parsed\n})\n\nconst cssColor = computed(() => hslaToCss(state.value))\nconst hexValue = computed(() => formatHexColor(state.value, props.alpha))\n\nfunction commit(next: GrHsla): void {\n  if (isLocked.value) return\n\n  state.value = normalizeHsla(next)\n\n  const hex = formatHexColor(state.value, props.alpha)\n  lastEmitted = hex\n  emit('update:modelValue', hex)\n  emit('change', hex)\n}\n\n/** Канал панели: слайдер читает состояние и коммитит новое значение целиком. */\nfunction channel(key: 'h' | 's' | 'l' | 'a', scale = 1) {\n  return computed<number>({\n    get: () => Math.round(state.value[key] * scale),\n    set: value => commit({ ...state.value, [key]: value / scale }),\n  })\n}\n\nconst hue = channel('h')\nconst saturation = channel('s')\nconst lightness = channel('l')\n// Альфа хранится долей, а слайдер ходит по процентам — иначе шаг был бы 0.01.\nconst opacity = channel('a', 100)\n\nconst degrees = (value: number): string => `${value}°`\nconst percent = (value: number): string => `${value}%`\n\n/** Текст поля hex редактируется свободно и коммитится только валидным. */\nconst hexDraft = ref(hexValue.value)\n\nwatch(hexValue, (next) => {\n  hexDraft.value = next\n})\n\nfunction commitHex(): void {\n  const parsed = parseHexColor(hexDraft.value)\n\n  // Мусор откатывается к текущему значению: держать в поле невалидный текст\n  // после коммита — значит показывать цвет, которого нет.\n  //\n  // Откат идёт следующим тиком намеренно: вернув значение синхронно, мы отдали\n  // бы Vue то же самое, что он уже отрисовал, — патча не случилось бы, и в поле\n  // остался бы набранный мусор.\n  if (!parsed) {\n    void nextTick(() => { hexDraft.value = hexValue.value })\n    return\n  }\n\n  commit(props.alpha ? parsed : { ...parsed, a: state.value.a })\n}\n\nconst isOpen = ref(false)\nconst panelOpen = computed({\n  get: () => props.open ?? isOpen.value,\n  set: (value) => {\n    isOpen.value = value\n    emit('update:open', value)\n  },\n})\n\nconst presetList = computed(() => props.presets.filter(preset => parseHexColor(preset) !== null))\n\nfunction isPresetSelected(preset: string): boolean {\n  const parsed = parseHexColor(preset)\n  return parsed ? formatHexColor(parsed, props.alpha) === hexValue.value : false\n}\n\nfunction selectPreset(preset: string): void {\n  const parsed = parseHexColor(preset)\n  if (parsed) commit(parsed)\n}\n\nconst triggerClass = computed(() => grColorPickerTriggerClass({\n  size: resolvedSize.value,\n  disabled: isDisabled.value,\n  invalid: isInvalid.value,\n}))\n\nconst panelClass = computed(() => grColorPickerPanelClass(resolvedSize.value))\nconst swatchSizeClass = computed(() => triggerSwatchSizeBySize[resolvedSize.value])\n\n/**\n * Градиенты дорожек. Через `--gr-slider-rail` их не подать: хук уходит в\n * `background-color`, а градиент там не работает — поэтому значения приезжают\n * переменными, а красит дорожки собственный `<style>` компонента.\n *\n * Переменные висят на самой панели, а не на корне: панель уезжает в портал, и\n * наследование от корня до неё не доходит.\n */\nconst trackVars = computed<Record<string, string>>(() => {\n  const { h, s, l } = state.value\n  const solid = hslaToCss({ h, s, l, a: 1 })\n\n  return {\n    '--gr-color-picker-track-hue': 'linear-gradient(to right, hsl(0 100% 50%), hsl(60 100% 50%), hsl(120 100% 50%), hsl(180 100% 50%), hsl(240 100% 50%), hsl(300 100% 50%), hsl(360 100% 50%))',\n    '--gr-color-picker-track-saturation': `linear-gradient(to right, hsl(${Math.round(h)} 0% ${Math.round(l)}%), hsl(${Math.round(h)} 100% ${Math.round(l)}%))`,\n    '--gr-color-picker-track-lightness': `linear-gradient(to right, hsl(${Math.round(h)} ${Math.round(s)}% 0%), hsl(${Math.round(h)} ${Math.round(s)}% 50%), hsl(${Math.round(h)} ${Math.round(s)}% 100%))`,\n    '--gr-color-picker-track-alpha': `linear-gradient(to right, transparent, ${solid})`,\n  }\n})\n</script>\n\n<template>\n  <div data-gr-color-picker>\n    <!-- Значение для нативной формы уходит скрытым полем: интерактивного\n         контрола внутри виджета быть не должно. -->\n    <input v-if=\"name\" type=\"hidden\" :name=\"name\" :value=\"hexValue\">\n\n    <span v-if=\"stateHint\" :id=\"stateHintId\" class=\"sr-only\">{{ stateHint }}</span>\n\n    <GrPopover\n      v-model:open=\"panelOpen\"\n      :size=\"resolvedSize\"\n      :placement=\"placement\"\n      :disabled=\"isDisabled\"\n      :aria-label=\"t('gr.colorPicker.panelLabel', 'Color picker')\"\n      :close-on-content-click=\"false\"\n    >\n      <template #trigger=\"{ triggerProps }\">\n        <button\n          :id=\"fieldId\"\n          ref=\"triggerEl\"\n          v-bind=\"triggerProps\"\n          data-gr-color-picker-trigger\n          type=\"button\"\n          :class=\"triggerClass\"\n          :aria-label=\"ariaLabel\"\n          :aria-describedby=\"describedBy\"\n          :aria-invalid=\"isInvalid ? 'true' : undefined\"\n          @focus=\"emit('focus', $event)\"\n          @blur=\"emit('blur', $event)\"\n        >\n          <span\n            data-gr-color-picker-swatch\n            aria-hidden=\"true\"\n            :class=\"[swatchBaseClass, swatchSizeClass, checkerClass]\"\n          >\n            <span :class=\"swatchFillClass\" :style=\"{ background: cssColor }\" />\n          </span>\n\n          <span :class=\"triggerValueClass\">{{ hexValue }}</span>\n        </button>\n      </template>\n\n      <template #content>\n        <div data-gr-color-picker-panel :class=\"panelClass\" :style=\"trackVars\">\n          <div\n            data-gr-color-picker-preview\n            aria-hidden=\"true\"\n            :class=\"[previewClass, checkerClass]\"\n          >\n            <span :class=\"swatchFillClass\" :style=\"{ background: cssColor }\" />\n          </div>\n\n          <div data-gr-color-picker-channel=\"hue\" :class=\"rowClass\">\n            <span :class=\"rowLabelClass\" aria-hidden=\"true\">H</span>\n            <GrSlider\n              v-model=\"hue\"\n              :min=\"0\"\n              :max=\"359\"\n              :size=\"resolvedSize\"\n              :disabled=\"isDisabled\"\n              :readonly=\"isReadonly\"\n              :format-tooltip=\"degrees\"\n              :aria-label=\"t('gr.colorPicker.hue', 'Hue')\"\n            />\n            <span :class=\"rowValueClass\">{{ degrees(hue) }}</span>\n          </div>\n\n          <div data-gr-color-picker-channel=\"saturation\" :class=\"rowClass\">\n            <span :class=\"rowLabelClass\" aria-hidden=\"true\">S</span>\n            <GrSlider\n              v-model=\"saturation\"\n              :size=\"resolvedSize\"\n              :disabled=\"isDisabled\"\n              :readonly=\"isReadonly\"\n              :format-tooltip=\"percent\"\n              :aria-label=\"t('gr.colorPicker.saturation', 'Saturation')\"\n            />\n            <span :class=\"rowValueClass\">{{ percent(saturation) }}</span>\n          </div>\n\n          <div data-gr-color-picker-channel=\"lightness\" :class=\"rowClass\">\n            <span :class=\"rowLabelClass\" aria-hidden=\"true\">L</span>\n            <GrSlider\n              v-model=\"lightness\"\n              :size=\"resolvedSize\"\n              :disabled=\"isDisabled\"\n              :readonly=\"isReadonly\"\n              :format-tooltip=\"percent\"\n              :aria-label=\"t('gr.colorPicker.lightness', 'Lightness')\"\n            />\n            <span :class=\"rowValueClass\">{{ percent(lightness) }}</span>\n          </div>\n\n          <div v-if=\"alpha\" data-gr-color-picker-channel=\"alpha\" :class=\"rowClass\">\n            <span :class=\"rowLabelClass\" aria-hidden=\"true\">A</span>\n            <GrSlider\n              v-model=\"opacity\"\n              :size=\"resolvedSize\"\n              :disabled=\"isDisabled\"\n              :readonly=\"isReadonly\"\n              :format-tooltip=\"percent\"\n              :aria-label=\"t('gr.colorPicker.opacity', 'Opacity')\"\n            />\n            <span :class=\"rowValueClass\">{{ percent(opacity) }}</span>\n          </div>\n\n          <GrInput\n            v-model=\"hexDraft\"\n            data-gr-color-picker-hex\n            :size=\"resolvedSize\"\n            :disabled=\"isDisabled\"\n            :readonly=\"isReadonly\"\n            :aria-label=\"t('gr.colorPicker.hexLabel', 'Hex value')\"\n            @change=\"commitHex\"\n            @keydown.enter=\"commitHex\"\n          />\n\n          <div\n            v-if=\"presetList.length\"\n            data-gr-color-picker-presets\n            :class=\"presetsGridClass\"\n            role=\"group\"\n            :aria-label=\"t('gr.colorPicker.presetsLabel', 'Color presets')\"\n          >\n            <button\n              v-for=\"preset in presetList\"\n              :key=\"preset\"\n              data-gr-color-picker-preset\n              type=\"button\"\n              :class=\"[grColorPickerPresetClass(isPresetSelected(preset)), checkerClass]\"\n              :aria-label=\"t('gr.colorPicker.swatchLabel', 'Color {color}', { color: preset })\"\n              :aria-pressed=\"isPresetSelected(preset) ? 'true' : 'false'\"\n              :disabled=\"isLocked\"\n              @click=\"selectPreset(preset)\"\n            >\n              <span :class=\"swatchFillClass\" :style=\"{ background: preset }\" />\n            </button>\n          </div>\n        </div>\n      </template>\n    </GrPopover>\n  </div>\n</template>\n\n<style>\n/*\n * Шахматка под прозрачным цветом. Двумя `conic-gradient` — в утилите такое не\n * выражается, а без подложки прозрачный образец сливается с панелью.\n */\n.gr-color-picker-checker {\n  background-image:\n    conic-gradient(\n      from 90deg,\n      var(--gr-color-picker-checker-light, var(--gr-bg)) 0 25%,\n      var(--gr-color-picker-checker-dark, var(--gr-muted)) 0 50%,\n      var(--gr-color-picker-checker-light, var(--gr-bg)) 0 75%,\n      var(--gr-color-picker-checker-dark, var(--gr-muted)) 0\n    );\n  background-size:\n    calc(var(--gr-color-picker-checker-size, 6px) * 2)\n    calc(var(--gr-color-picker-checker-size, 6px) * 2);\n  /* Рамка образца полупрозрачна, и без обрезки шахматка просвечивает сквозь неё. */\n  background-clip: padding-box;\n}\n\n/*\n * Дорожки каналов. Красим `[data-gr-slider-track]` потому, что хук\n * `--gr-slider-rail` уходит в `background-color`, а градиент там не работает.\n * Сами градиенты компонент подаёт переменными — CSS остаётся статичной.\n */\n[data-gr-color-picker-channel] [data-gr-slider-track] {\n  border-radius: var(--gr-radius-full);\n}\n\n[data-gr-color-picker-channel='hue'] [data-gr-slider-track] {\n  background-image: var(--gr-color-picker-track-hue);\n}\n\n[data-gr-color-picker-channel='saturation'] [data-gr-slider-track] {\n  background-image: var(--gr-color-picker-track-saturation);\n}\n\n[data-gr-color-picker-channel='lightness'] [data-gr-slider-track] {\n  background-image: var(--gr-color-picker-track-lightness);\n}\n\n[data-gr-color-picker-channel='alpha'] [data-gr-slider-track] {\n  background-image: var(--gr-color-picker-track-alpha);\n}\n\n/* Заливка канала прозрачна: шкалу показывает сама дорожка. */\n[data-gr-color-picker-channel] [data-gr-slider-fill] {\n  background-color: transparent;\n}\n</style>\n"],"mappings":"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"}

package/dist/components/GrCommandPalette/chunks/GrCommandPalette-C5abL2Y7.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"GrCommandPalette-C5abL2Y7.js","names":["$emit","$slots"],"sources":["../../../../src/components/GrCommandPalette/filtering.ts","../../../../src/components/GrCommandPalette/GrCommandPalette.vue","../../../../src/components/GrCommandPalette/GrCommandPalette.vue"],"sourcesContent":["import type { Component } from 'vue'\n\nimport { matchesQueryParts, normalizeOptionQuery } from '../shared/optionFilter'\n\n/** Команда палитры. `id` обязателен — он же ключ рендера и цель `aria-activedescendant`. */\nexport type GrCommandItem = {\n  id: string\n  label: string\n  /** Пояснение под меткой. */\n  description?: string\n  /**\n   * Иконка команды: Vue-компонент либо класс иконки вашей UnoCSS-сборки\n   * (`'i-lucide-file-plus'` — тогда нужен ваш `presetIcons`).\n   */\n  icon?: string | Component\n  /** Подсказка сочетания клавиш — массив клавиш, каждая рисуется отдельным `GrKbd`. */\n  shortcut?: string[]\n  /** Заголовок группы, под которой команда показывается в списке. */\n  group?: string\n  /** Дополнительные слова для поиска (синонимы, транслитерация). */\n  keywords?: string[]\n  disabled?: boolean\n}\n\n/** Команды, сгруппированные для рендера: порядок групп — порядок первого вхождения. */\nexport type GrCommandGroup = {\n  /** `undefined` — команды без группы (рендерятся без заголовка). */\n  name: string | undefined\n  items: GrCommandItem[]\n}\n\nexport type GrCommandFilter = (item: GrCommandItem, query: string) => boolean\n\n/**\n * Матчер по умолчанию: подстрока (без учёта регистра) в метке, описании,\n * названии группы или ключевых словах.\n *\n * Набор полей у команды шире, чем у опции списка, а сам подстрочный матч — тот\n * же самый на весь пакет (`shared/optionFilter.ts`).\n */\nexport function matchCommandItem(item: GrCommandItem, query: string): boolean {\n  const parts = [item.label, item.description, item.group, ...(item.keywords ?? [])]\n\n  return matchesQueryParts(parts, normalizeOptionQuery(query))\n}\n\nexport function filterCommandItems(\n  items: GrCommandItem[],\n  query: string,\n  filter: GrCommandFilter = matchCommandItem,\n): GrCommandItem[] {\n  if (!query.trim()) return items\n  return items.filter(item => filter(item, query))\n}\n\n/**\n * Раскладывает плоский список по группам, сохраняя порядок первого появления\n * группы. Команды без `group` собираются в единственную безымянную группу,\n * которая остаётся на своём месте в общем порядке.\n */\nexport function groupCommandItems(items: GrCommandItem[]): GrCommandGroup[] {\n  const groups: GrCommandGroup[] = []\n  const byName = new Map<string | undefined, GrCommandGroup>()\n\n  for (const item of items) {\n    const name = item.group || undefined\n    let group = byName.get(name)\n    if (!group) {\n      group = { name, items: [] }\n      byName.set(name, group)\n      groups.push(group)\n    }\n    group.items.push(item)\n  }\n\n  return groups\n}\n\n/** Кусок текста для подсветки: `match` — попал в запрос. */\nexport type GrCommandMatchSegment = {\n  text: string\n  match: boolean\n}\n\n/**\n * Режет текст на сегменты по вхождению запроса (без учёта регистра).\n *\n * Совпадения нет — один сегмент целиком: свой `filter` вправе матчить по\n * `keywords`, и тогда в метке подсвечивать нечего. Регистр исходного текста\n * сохраняется — подсветка не должна менять то, что читает пользователь.\n */\nexport function splitCommandMatch(text: string, query: string): GrCommandMatchSegment[] {\n  const needle = query.trim().toLowerCase()\n  if (!needle || !text) return [{ text, match: false }]\n\n  const segments: GrCommandMatchSegment[] = []\n  const haystack = text.toLowerCase()\n  let from = 0\n\n  while (from < text.length) {\n    const at = haystack.indexOf(needle, from)\n    if (at < 0) break\n\n    if (at > from) segments.push({ text: text.slice(from, at), match: false })\n    segments.push({ text: text.slice(at, at + needle.length), match: true })\n    from = at + needle.length\n  }\n\n  if (!segments.length) return [{ text, match: false }]\n  if (from < text.length) segments.push({ text: text.slice(from), match: false })\n\n  return segments\n}\n\n/**\n * Поднимает «недавние» команды в отдельную группу наверх, сохраняя порядок\n * `recentIds`, и убирает их из остального списка — иначе одна и та же команда\n * оказалась бы в списке дважды, а `id` у неё один.\n */\nexport function withRecentCommands(\n  groups: GrCommandGroup[],\n  items: GrCommandItem[],\n  recentIds: string[],\n  title: string,\n): GrCommandGroup[] {\n  if (!recentIds.length) return groups\n\n  const byId = new Map(items.map(item => [item.id, item]))\n  const recent: GrCommandItem[] = []\n  const taken = new Set<string>()\n\n  for (const id of recentIds) {\n    const item = byId.get(id)\n    if (!item || taken.has(id)) continue\n    recent.push(item)\n    taken.add(id)\n  }\n\n  if (!recent.length) return groups\n\n  const rest = groups\n    .map(group => ({ ...group, items: group.items.filter(item => !taken.has(item.id)) }))\n    .filter(group => group.items.length > 0)\n\n  return [{ name: title, items: recent }, ...rest]\n}\n\n/** Идентификаторы, встретившиеся больше одного раза. */\nexport function findDuplicateCommandIds(items: GrCommandItem[]): string[] {\n  const seen = new Set<string>()\n  const duplicates = new Set<string>()\n\n  for (const item of items) {\n    if (seen.has(item.id)) duplicates.add(item.id)\n    else seen.add(item.id)\n  }\n\n  return [...duplicates]\n}\n","<script setup lang=\"ts\">\nimport { useGrComponentProp } from '../GrConfigProvider/context'\nimport { computed, nextTick, onBeforeUnmount, onMounted, ref, useId, watch } from 'vue'\n\nimport { useVirtualList } from '../../composables/useVirtualList'\nimport { useGranularityTranslations } from '../../internal/granularityI18n'\nimport { isComposingEvent } from '../../internal/keyboard'\nimport { useComboboxNavigation } from '../../composables/useComboboxNavigation'\nimport { iconClass, iconTag } from '../shared/icon'\nimport GrKbd from '../GrKbd/GrKbd.vue'\nimport GrModal from '../GrModal/GrModal.vue'\n\nimport {\n  filterCommandItems,\n  findDuplicateCommandIds,\n  groupCommandItems,\n  matchCommandItem,\n  splitCommandMatch,\n  withRecentCommands,\n  type GrCommandFilter,\n  type GrCommandItem,\n} from './filtering'\nimport {\n  formatCommandHotkey,\n  isAppleDevice,\n  matchesCommandHotkey,\n  parseCommandHotkey,\n} from '../shared/hotkey'\nimport {\n  commandEmptyClass,\n  commandFooterClass,\n  commandGroupLabelClass,\n  commandItemClass,\n  commandItemDescriptionClass,\n  commandItemMutedClass,\n  commandMatchClass,\n  commandPaletteModalSizeBySize,\n  commandSearchInputClass,\n  commandSearchRowClass,\n  type GrCommandPaletteSize,\n} from './grCommandPaletteStyles'\n\nimport IconLoaderCircle from '~icons/lucide/loader-circle'\nimport IconSearch from '~icons/lucide/search'\n\nexport type { GrCommandFilter, GrCommandGroup, GrCommandItem } from './filtering'\nexport type { GrCommandPaletteSize } from './grCommandPaletteStyles'\n\n/**\n * Публичный GR-примитив «Command palette» (⌘K) — модальный поиск по командам\n * приложения с группировкой, подсказками сочетаний и клавиатурной навигацией.\n *\n * A11y: WAI-ARIA combobox поверх модалки — `role=\"combobox\"` на поле ввода,\n * `role=\"listbox\"` на списке, `aria-activedescendant` на активной команде\n * (фокус остаётся в поле). Esc, фокус-ловушка и блокировка скролла приходят\n * из `GrModal`.\n *\n * Открытие по глобальному сочетанию (`hotkey`, по умолчанию `mod+k` — Cmd на\n * macOS, Ctrl на прочих) компонент берёт на себя; передайте `hotkey: null`,\n * чтобы управлять открытием только через `v-model`.\n */\nexport interface GrCommandPaletteProps {\n  /** Открыта ли палитра. */\n  modelValue: boolean\n  /** Плоский список команд; группировка — по полю `group` самой команды. */\n  items?: GrCommandItem[]\n  /**\n   * Недавние команды: пока запрос пуст, они поднимаются отдельной группой\n   * наверх в этом порядке и не дублируются ниже.\n   */\n  recentIds?: string[]\n  placeholder?: string\n  size?: GrCommandPaletteSize\n  /** Глобальное сочетание открытия. `null` — не вешать слушатель. */\n  hotkey?: string | null\n  /** Локальная фильтрация по запросу. `false` — фильтрует владелец по событию `search`. */\n  filterable?: boolean\n  /** Кастомный матчер локальной фильтрации. */\n  filter?: GrCommandFilter\n  /** Внешне управляемое состояние загрузки (для remote-поиска). */\n  loading?: boolean\n  /** Закрывать палитру после выбора команды. */\n  closeOnSelect?: boolean\n  /** Максимальная высота списка, px. */\n  maxHeight?: number\n  /**\n   * Виртуализация списка: в DOM живёт только окно вокруг вьюпорта. Высоту окна\n   * задаёт `maxHeight`.\n   *\n   * Включается осознанно: на сотне команд выигрыша нет, а в разметке остаётся\n   * только окно — вместе с ним меняется и то, что находит `querySelector`\n   * потребителя. Профильный сценарий — палитра приложения на тысячи команд.\n   */\n  virtual?: boolean\n  /** Показывать подсказку сочетания в поле ввода. */\n  showHotkeyHint?: boolean\n  emptyText?: string\n  ariaLabel?: string\n}\n\nexport interface GrCommandPaletteEmits {\n  (e: 'update:modelValue', value: boolean): void\n  /** Команда выбрана (клик или Enter). */\n  (e: 'select', item: GrCommandItem): void\n  /** Поисковый запрос изменился — точка входа для remote-поиска. */\n  (e: 'search', query: string): void\n}\n\nimport './defaults'\n\nconst props = withDefaults(\n  defineProps<GrCommandPaletteProps>(),\n  {\n    items: undefined,\n    recentIds: undefined,\n    placeholder: undefined,\n    // Дефолт `size` живёт в резолвере ниже, а не здесь: Vue подставил бы его\n    // до того, как компонент заглянет в `GrConfigProvider`.\n    size: undefined,\n    hotkey: 'mod+k',\n    filterable: true,\n    filter: undefined,\n    loading: false,\n    closeOnSelect: true,\n    maxHeight: 360,\n    virtual: false,\n    showHotkeyHint: true,\n    emptyText: undefined,\n    ariaLabel: undefined,\n  },\n)\n\nconst emit = defineEmits<GrCommandPaletteEmits>()\n\nconst { t } = useGranularityTranslations()\n\nconst resolvedPlaceholder = computed(() => props.placeholder ?? t('gr.commandPalette.placeholder', 'Type a command or search…'))\nconst resolvedEmptyText = computed(() => props.emptyText ?? t('gr.commandPalette.empty', 'Nothing found'))\nconst resolvedAriaLabel = computed(() => props.ariaLabel ?? t('gr.commandPalette.label', 'Command palette'))\nconst loadingText = computed(() => t('gr.commandPalette.loading', 'Loading…'))\nconst recentTitle = computed(() => t('gr.commandPalette.recent', 'Recent'))\n\nconst query = ref('')\nconst inputEl = ref<HTMLInputElement | null>(null)\nconst listboxId = useId()\n\nconst itemsResolved = computed<GrCommandItem[]>(() => props.items ?? [])\n\nconst filteredItems = computed<GrCommandItem[]>(() =>\n  props.filterable\n    ? filterCommandItems(itemsResolved.value, query.value, props.filter ?? matchCommandItem)\n    : itemsResolved.value,\n)\n\nconst groups = computed(() => {\n  const grouped = groupCommandItems(filteredItems.value)\n\n  // С непустым запросом секции «недавние» нет: там правит релевантность, а не\n  // история — иначе первая же буква уводила бы взгляд не туда.\n  if (query.value.trim()) return grouped\n\n  return withRecentCommands(grouped, filteredItems.value, props.recentIds ?? [], recentTitle.value)\n})\n\n/**\n * Порядок обхода стрелками совпадает с порядком на экране: «недавние» стоят\n * первыми, значит и первая стрелка ведёт туда же.\n */\nconst orderedItems = computed(() => groups.value.flatMap(group => group.items))\n\n/** Плоский список того, что реально выбирается — по нему ходят стрелки. */\nconst navigableItems = computed(() => orderedItems.value.filter(item => !item.disabled))\n\nfunction itemDomId(id: string): string {\n  return `${listboxId}-item-${id}`\n}\n\n/**\n * Виртуализация списка.\n *\n * Набор — плоский поток строк экрана: заголовок группы занимает такую же\n * строку, как команда, поэтому входит в него наравне. Вложенную структуру\n * рендер пересобирает уже из окна.\n */\n\n/** Оценки высоты строк. Команда крупнее заголовка; дальше уточняются замером. */\nconst ITEM_SIZE_ESTIMATE = 44\nconst GROUP_LABEL_SIZE_ESTIMATE = 28\n\ntype PaletteRow =\n  | { kind: 'label', groupIndex: number }\n  | { kind: 'item', groupIndex: number, item: GrCommandItem, posInSet: number, setSize: number }\n\nconst listEl = ref<HTMLElement | null>(null)\n\nconst paletteRows = computed<PaletteRow[]>(() => {\n  const rows: PaletteRow[] = []\n\n  groups.value.forEach((group, groupIndex) => {\n    if (group.name) rows.push({ kind: 'label', groupIndex })\n\n    group.items.forEach((item, index) => {\n      rows.push({\n        kind: 'item',\n        groupIndex,\n        item,\n        // Набор — группа, а не весь список: по ARIA позиция отсчитывается от неё.\n        posInSet: index + 1,\n        setSize: group.items.length,\n      })\n    })\n  })\n\n  return rows\n})\n\nconst virtualizer = useVirtualList({\n  container: listEl,\n  count: () => (props.virtual ? paletteRows.value.length : 0),\n  // Запрос пересобирает набор строк — замеры прошлого набора невалидны.\n  source: () => paletteRows.value,\n  itemSize: index => (paletteRows.value[index]?.kind === 'label' ? GROUP_LABEL_SIZE_ESTIMATE : ITEM_SIZE_ESTIMATE),\n  // Список закрытой палитры не смонтирован вовсе: `clientHeight` взять неоткуда.\n  // `maxHeight` можно перебить `--gr-command-list-max-height` — тогда точная\n  // высота приедет с первым замером, а это останется оценкой первого рендера.\n  viewportSize: () => props.maxHeight,\n})\n\n/**\n * Группы к отрисовке. При виртуализации пересобираются из среза `paletteRows`:\n * группа, начатая выше окна, всё равно открывается — иначе её команды остались\n * бы прямыми потомками listbox'а, что роль запрещает.\n */\ntype RenderedGroup = {\n  key: string\n  groupIndex: number\n  name: string | undefined\n  labelVisible: boolean\n  /** Позиция строки заголовка в `paletteRows` — по ней его замеряет виртуализатор. */\n  labelRowIndex?: number\n  items: { item: GrCommandItem, rowIndex: number, posInSet: number, setSize: number }[]\n}\n\nconst renderedGroups = computed<RenderedGroup[]>(() => {\n  const rows = paletteRows.value\n\n  const from = props.virtual ? virtualizer.range.value.start : 0\n  const to = props.virtual ? Math.min(rows.length, virtualizer.range.value.end) : rows.length\n\n  const result: RenderedGroup[] = []\n  let current: RenderedGroup | undefined\n\n  for (let rowIndex = from; rowIndex < to; rowIndex++) {\n    const row = rows[rowIndex]!\n    const group = groups.value[row.groupIndex]\n\n    if (!current || current.groupIndex !== row.groupIndex) {\n      current = {\n        key: group?.name ?? `__ungrouped-${row.groupIndex}`,\n        groupIndex: row.groupIndex,\n        name: group?.name,\n        labelVisible: false,\n        items: [],\n      }\n      result.push(current)\n    }\n\n    if (row.kind === 'label') {\n      current.labelVisible = true\n      current.labelRowIndex = rowIndex\n      continue\n    }\n\n    current.items.push({ item: row.item, rowIndex, posInSet: row.posInSet, setSize: row.setSize })\n  }\n\n  return result\n})\n\n/** ARIA набора: объявляем только при виртуализации — иначе набор виден по DOM. */\nfunction itemSetProps(entry: { posInSet: number, setSize: number }): Record<string, number> | undefined {\n  if (!props.virtual) return undefined\n  return { 'aria-setsize': entry.setSize, 'aria-posinset': entry.posInSet }\n}\n\n\n/** Сегменты подсветки: совпавшее с запросом рисуется `<mark>`. */\nfunction matchSegments(text: string): ReturnType<typeof splitCommandMatch> {\n  return splitCommandMatch(text, props.filterable ? query.value : '')\n}\n\nasync function scrollActiveIntoView(item: GrCommandItem): Promise<void> {\n  // Вне окна активной команды в DOM нет: `getElementById` вернул бы `null`,\n  // прокрутка не случилась бы, а `aria-activedescendant` указал бы в пустоту.\n  if (props.virtual) {\n    const rowIndex = paletteRows.value.findIndex(row => row.kind === 'item' && row.item.id === item.id)\n    if (rowIndex >= 0) virtualizer.scrollToIndex(rowIndex)\n  }\n\n  await nextTick()\n  document.getElementById(itemDomId(item.id))?.scrollIntoView?.({ block: 'nearest' })\n}\n\nconst {\n  activeItem,\n  activeDescendantId,\n  setActive,\n  reset: resetActive,\n  handleNavigationKeys,\n} = useComboboxNavigation<GrCommandItem>({\n  items: () => navigableItems.value,\n  open: () => props.modelValue,\n  idOf: item => itemDomId(item.id),\n  scrollTo: item => scrollActiveIntoView(item),\n})\n\n// Палитра всегда стартует с первой команды — и при монтировании открытой тоже.\nresetActive(0)\n\nfunction isActive(item: GrCommandItem): boolean {\n  return activeItem.value?.id === item.id\n}\n\n// Активной становится первая команда, когда список изменился **по содержимому**.\n// Следить за идентичностью массива нельзя: родитель, отдающий `:items` инлайн-\n// выражением, пересоздаёт его на каждый посторонний ререндер — и выбранная\n// стрелками команда прыгала бы в начало.\n// Разделитель — пробел, а не запятая: `id` вправе её содержать, и «a,b» + «c»\n// дало бы тот же ключ, что «a» + «b,c».\nwatch(\n  () => orderedItems.value.map(item => item.id).join(' '),\n  () => resetActive(0),\n)\n\n// `id` — ключ рендера и цель `aria-activedescendant`: дубли дают одинаковые\n// DOM-id, и фокус уезжает не на ту команду.\nwatch(\n  itemsResolved,\n  (items) => {\n    if (!__GR_DEV__) return\n    const duplicates = findDuplicateCommandIds(items)\n    if (!duplicates.length) return\n\n    console.warn(\n      `[GrCommandPalette] повторяющиеся id команд: ${duplicates.join(', ')}. `\n      + 'Из-за одинаковых DOM-id `aria-activedescendant` укажет не на ту команду.',\n    )\n  },\n  { immediate: true },\n)\n\nfunction open(): void {\n  emit('update:modelValue', true)\n}\n\nfunction close(): void {\n  emit('update:modelValue', false)\n}\n\nfunction toggle(): void {\n  emit('update:modelValue', !props.modelValue)\n}\n\nfunction selectItem(item: GrCommandItem): void {\n  if (item.disabled) return\n  emit('select', item)\n  if (props.closeOnSelect) close()\n}\n\nfunction onItemHover(item: GrCommandItem): void {\n  const index = navigableItems.value.indexOf(item)\n  if (index >= 0) setActive(index)\n}\n\nfunction onInput(event: Event): void {\n  query.value = (event.target as HTMLInputElement).value\n  emit('search', query.value.trim())\n}\n\nfunction onKeydown(event: KeyboardEvent): void {\n  // Клавиша во время IME-композиции принадлежит композиции: Enter коммитит её,\n  // стрелки ходят по кандидатам.\n  if (isComposingEvent(event)) return\n\n  if (handleNavigationKeys(event)) return\n\n  switch (event.key) {\n    case 'Enter':\n      if (!activeItem.value) break\n      event.preventDefault()\n      selectItem(activeItem.value)\n      break\n  }\n}\n\n// ————— Открытие: сброс запроса и выбора.\nwatch(\n  () => props.modelValue,\n  (open) => {\n    if (!open) return\n\n    query.value = ''\n    resetActive(0)\n  },\n)\n\n// Фокус в поле — отдельным наблюдателем, и по появлению самого поля: содержимое\n// панели рождается вместе с ней, и по одному лишь пропу фокусировать нечего.\n// Ловушка фокуса `GrModal` этот выбор не перебивает — фокус, уже стоящий внутри\n// слоя, она считает осознанным.\nwatch(\n  [() => props.modelValue, inputEl],\n  ([open]) => {\n    if (open) inputEl.value?.focus()\n  },\n  { flush: 'post' },\n)\n\n// ————— Глобальное сочетание открытия.\nconst parsedHotkey = computed(() => (props.hotkey ? parseCommandHotkey(props.hotkey) : null))\n\n// Платформа определяется только после монтирования: на сервере `navigator` нет,\n// и первый рендер обязан совпасть с серверным. Иначе сервер отдаёт `Ctrl`,\n// клиент на macOS рисует `⌘`, и гидрация расходится по тексту подсказки.\nconst isApple = ref(false)\n\nconst hotkeyHint = computed(() =>\n  props.showHotkeyHint && parsedHotkey.value ? formatCommandHotkey(parsedHotkey.value, isApple.value) : [],\n)\n\nfunction onWindowKeydown(event: KeyboardEvent): void {\n  const hotkey = parsedHotkey.value\n  if (!hotkey || !matchesCommandHotkey(event, hotkey, isApple.value)) return\n  event.preventDefault()\n  toggle()\n}\n\nonMounted(() => {\n  if (typeof window === 'undefined') return\n  isApple.value = isAppleDevice()\n  window.addEventListener('keydown', onWindowKeydown)\n})\n\nonBeforeUnmount(() => {\n  if (typeof window !== 'undefined') window.removeEventListener('keydown', onWindowKeydown)\n})\n\n// Эффективный размер: локальный проп → `GrConfigProvider` → дефолт компонента.\nconst resolvedSize = useGrComponentProp('GrCommandPalette', 'size', () => props.size, 'lg')\n\nconst modalSize = computed(() => commandPaletteModalSizeBySize[resolvedSize.value])\nconst listStyle = computed(() => ({ maxHeight: `var(--gr-command-list-max-height, ${props.maxHeight}px)` }))\n\nconst listStyleWithSpacers = computed(() => {\n  const base = listStyle.value\n  if (!props.virtual) return base\n\n  return {\n    ...base,\n    ...virtualizer.spacerStyle.value,\n  }\n})\n\ndefineExpose({ open, close, toggle })\n\ndefineSlots<{\n  /** Строка списка вместо стандартной. */\n  item?: (props: { item: GrCommandItem, active: boolean }) => any\n  /** Пустое состояние: получает запрос, чтобы предложить действие по нему. */\n  empty?: (props: { query: string }) => any\n  /** Подвал палитры: подсказки по клавишам, счётчик. */\n  footer?: () => any\n}>()\n\n</script>\n\n<template>\n  <GrModal\n    :model-value=\"modelValue\"\n    :size=\"modalSize\"\n    @update:model-value=\"$emit('update:modelValue', $event)\"\n  >\n    <div data-gr-command-palette :aria-label=\"resolvedAriaLabel\">\n      <div data-gr-command-palette-search :class=\"commandSearchRowClass\">\n        <IconSearch class=\"block h-4 w-4 shrink-0 text-[var(--gr-muted-fg)]\" aria-hidden=\"true\" />\n\n        <input\n          ref=\"inputEl\"\n          data-gr-command-palette-input\n          data-testid=\"gr-command-palette-input\"\n          type=\"text\"\n          autocomplete=\"off\"\n          spellcheck=\"false\"\n          role=\"combobox\"\n          aria-haspopup=\"listbox\"\n          aria-autocomplete=\"list\"\n          aria-expanded=\"true\"\n          :aria-label=\"resolvedAriaLabel\"\n          :aria-controls=\"listboxId\"\n          :aria-activedescendant=\"activeDescendantId\"\n          :value=\"query\"\n          :placeholder=\"resolvedPlaceholder\"\n          :class=\"commandSearchInputClass\"\n          @input=\"onInput\"\n          @keydown=\"onKeydown\"\n        >\n\n        <span v-if=\"loading\" class=\"shrink-0 text-[var(--gr-muted-fg)]\" aria-hidden=\"true\">\n          <IconLoaderCircle class=\"block h-4 w-4 animate-spin\" />\n        </span>\n        <span v-else-if=\"hotkeyHint.length\" class=\"shrink-0\" aria-hidden=\"true\">\n          <GrKbd :keys=\"hotkeyHint\" size=\"sm\" />\n        </span>\n      </div>\n\n      <div\n        :id=\"listboxId\"\n        ref=\"listEl\"\n        data-gr-command-palette-list\n        data-testid=\"gr-command-palette-list\"\n        :data-gr-virtual=\"virtual ? '' : undefined\"\n        class=\"overflow-y-auto p-2\"\n        :style=\"listStyleWithSpacers\"\n        role=\"listbox\"\n        :aria-label=\"resolvedAriaLabel\"\n      >\n        <!-- Прямыми потомками listbox могут быть только `role=\"group\"`: заголовок\n             группы лежит внутри неё и объявлен презентационным (имя группе он\n             даёт через `aria-labelledby`), иначе ломается `aria-required-children`.\n\n             При виртуализации окно может начаться ниже заголовка — тогда его в\n             DOM нет, и имя группы идёт напрямую в `aria-label`. -->\n        <div\n          v-for=\"group in renderedGroups\"\n          :key=\"group.key\"\n          role=\"group\"\n          :aria-labelledby=\"group.name && group.labelVisible ? `${listboxId}-group-${group.groupIndex}` : undefined\"\n          :aria-label=\"group.name && !group.labelVisible ? group.name : undefined\"\n        >\n          <div\n            v-if=\"group.name && group.labelVisible\"\n            :id=\"`${listboxId}-group-${group.groupIndex}`\"\n            :ref=\"(el) => virtual && group.labelRowIndex !== undefined && virtualizer.measure(group.labelRowIndex, el as Element | null)\"\n            data-gr-command-palette-group\n            role=\"presentation\"\n            :class=\"commandGroupLabelClass\"\n          >\n            {{ group.name }}\n          </div>\n\n          <div>\n            <div\n              v-for=\"entry in group.items\"\n              :id=\"itemDomId(entry.item.id)\"\n              :key=\"entry.item.id\"\n              :ref=\"(el) => virtual && virtualizer.measure(entry.rowIndex, el as Element | null)\"\n              data-gr-command-palette-item\n              :data-testid=\"`gr-command-palette-item-${entry.item.id}`\"\n              role=\"option\"\n              v-bind=\"itemSetProps(entry)\"\n              :aria-selected=\"isActive(entry.item) ? 'true' : 'false'\"\n              :aria-disabled=\"entry.item.disabled ? 'true' : undefined\"\n              :class=\"commandItemClass({ active: isActive(entry.item), disabled: Boolean(entry.item.disabled) })\"\n              @click=\"selectItem(entry.item)\"\n              @mousemove=\"onItemHover(entry.item)\"\n            >\n              <slot name=\"item\" :item=\"entry.item\" :active=\"isActive(entry.item)\">\n                <component\n                  :is=\"iconTag(entry.item.icon)\"\n                  v-if=\"entry.item.icon\"\n                  class=\"block h-4 w-4 shrink-0\"\n                  :class=\"[iconClass(entry.item.icon), commandItemMutedClass(Boolean(entry.item.disabled))]\"\n                  aria-hidden=\"true\"\n                />\n                <span class=\"min-w-0 flex-1\">\n                  <span class=\"block truncate\">\n                    <template v-for=\"(segment, index) in matchSegments(entry.item.label)\" :key=\"index\">\n                      <mark v-if=\"segment.match\" :class=\"commandMatchClass\">{{ segment.text }}</mark>\n                      <template v-else>{{ segment.text }}</template>\n                    </template>\n                  </span>\n                  <span\n                    v-if=\"entry.item.description\"\n                    :class=\"[commandItemDescriptionClass, commandItemMutedClass(Boolean(entry.item.disabled))]\"\n                  >\n                    <template v-for=\"(segment, index) in matchSegments(entry.item.description)\" :key=\"index\">\n                      <mark v-if=\"segment.match\" :class=\"commandMatchClass\">{{ segment.text }}</mark>\n                      <template v-else>{{ segment.text }}</template>\n                    </template>\n                  </span>\n                </span>\n                <span v-if=\"entry.item.shortcut?.length\" class=\"shrink-0\">\n                  <GrKbd :keys=\"entry.item.shortcut\" size=\"sm\" />\n                </span>\n              </slot>\n            </div>\n          </div>\n        </div>\n      </div>\n\n      <!-- Состояния объявляются живым регионом: `aria-label` на generic-элементе\n           большинство AT игнорируют, и загрузка осталась бы неозвученной. Регион\n           один на оба состояния и лежит вне listbox — внутри он стал бы его\n           недопустимым потомком. -->\n      <div\n        v-if=\"loading || !filteredItems.length\"\n        data-gr-command-palette-empty\n        data-testid=\"gr-command-palette-empty\"\n        role=\"status\"\n        aria-live=\"polite\"\n        :class=\"commandEmptyClass\"\n      >\n        <template v-if=\"loading\">\n          {{ loadingText }}\n        </template>\n        <slot v-else name=\"empty\" :query=\"query\">\n          {{ resolvedEmptyText }}\n        </slot>\n      </div>\n\n      <div v-if=\"$slots.footer\" data-gr-command-palette-footer :class=\"commandFooterClass\">\n        <slot name=\"footer\" />\n      </div>\n    </div>\n  </GrModal>\n</template>\n\n<style scoped>\n/*\n * Распорки виртуального списка.\n *\n * Не `padding` контейнера: `max-height` меряет ту же коробку. Не обёртка внутри\n * listbox'а: прямыми потомками роли обязаны быть только группы. Не отступы\n * крайних строк: при прыжке прокрутки строки заменяются целиком, и распорка\n * исчезла бы вместе с ними.\n *\n * `display: block` обязателен: список палитры — блочный поток, а псевдоэлемент\n * по умолчанию строчный, и строчная коробка игнорирует `height` — распорка\n * молча не создалась бы вовсе.\n */\n[data-gr-virtual]::before,\n[data-gr-virtual]::after {\n    content: '';\n    display: block;\n    flex: none;\n}\n\n[data-gr-virtual]::before {\n    height: var(--gr-virtual-before, 0px);\n}\n\n[data-gr-virtual]::after {\n    height: var(--gr-virtual-after, 0px);\n}\n</style>\n","<script setup lang=\"ts\">\nimport { useGrComponentProp } from '../GrConfigProvider/context'\nimport { computed, nextTick, onBeforeUnmount, onMounted, ref, useId, watch } from 'vue'\n\nimport { useVirtualList } from '../../composables/useVirtualList'\nimport { useGranularityTranslations } from '../../internal/granularityI18n'\nimport { isComposingEvent } from '../../internal/keyboard'\nimport { useComboboxNavigation } from '../../composables/useComboboxNavigation'\nimport { iconClass, iconTag } from '../shared/icon'\nimport GrKbd from '../GrKbd/GrKbd.vue'\nimport GrModal from '../GrModal/GrModal.vue'\n\nimport {\n  filterCommandItems,\n  findDuplicateCommandIds,\n  groupCommandItems,\n  matchCommandItem,\n  splitCommandMatch,\n  withRecentCommands,\n  type GrCommandFilter,\n  type GrCommandItem,\n} from './filtering'\nimport {\n  formatCommandHotkey,\n  isAppleDevice,\n  matchesCommandHotkey,\n  parseCommandHotkey,\n} from '../shared/hotkey'\nimport {\n  commandEmptyClass,\n  commandFooterClass,\n  commandGroupLabelClass,\n  commandItemClass,\n  commandItemDescriptionClass,\n  commandItemMutedClass,\n  commandMatchClass,\n  commandPaletteModalSizeBySize,\n  commandSearchInputClass,\n  commandSearchRowClass,\n  type GrCommandPaletteSize,\n} from './grCommandPaletteStyles'\n\nimport IconLoaderCircle from '~icons/lucide/loader-circle'\nimport IconSearch from '~icons/lucide/search'\n\nexport type { GrCommandFilter, GrCommandGroup, GrCommandItem } from './filtering'\nexport type { GrCommandPaletteSize } from './grCommandPaletteStyles'\n\n/**\n * Публичный GR-примитив «Command palette» (⌘K) — модальный поиск по командам\n * приложения с группировкой, подсказками сочетаний и клавиатурной навигацией.\n *\n * A11y: WAI-ARIA combobox поверх модалки — `role=\"combobox\"` на поле ввода,\n * `role=\"listbox\"` на списке, `aria-activedescendant` на активной команде\n * (фокус остаётся в поле). Esc, фокус-ловушка и блокировка скролла приходят\n * из `GrModal`.\n *\n * Открытие по глобальному сочетанию (`hotkey`, по умолчанию `mod+k` — Cmd на\n * macOS, Ctrl на прочих) компонент берёт на себя; передайте `hotkey: null`,\n * чтобы управлять открытием только через `v-model`.\n */\nexport interface GrCommandPaletteProps {\n  /** Открыта ли палитра. */\n  modelValue: boolean\n  /** Плоский список команд; группировка — по полю `group` самой команды. */\n  items?: GrCommandItem[]\n  /**\n   * Недавние команды: пока запрос пуст, они поднимаются отдельной группой\n   * наверх в этом порядке и не дублируются ниже.\n   */\n  recentIds?: string[]\n  placeholder?: string\n  size?: GrCommandPaletteSize\n  /** Глобальное сочетание открытия. `null` — не вешать слушатель. */\n  hotkey?: string | null\n  /** Локальная фильтрация по запросу. `false` — фильтрует владелец по событию `search`. */\n  filterable?: boolean\n  /** Кастомный матчер локальной фильтрации. */\n  filter?: GrCommandFilter\n  /** Внешне управляемое состояние загрузки (для remote-поиска). */\n  loading?: boolean\n  /** Закрывать палитру после выбора команды. */\n  closeOnSelect?: boolean\n  /** Максимальная высота списка, px. */\n  maxHeight?: number\n  /**\n   * Виртуализация списка: в DOM живёт только окно вокруг вьюпорта. Высоту окна\n   * задаёт `maxHeight`.\n   *\n   * Включается осознанно: на сотне команд выигрыша нет, а в разметке остаётся\n   * только окно — вместе с ним меняется и то, что находит `querySelector`\n   * потребителя. Профильный сценарий — палитра приложения на тысячи команд.\n   */\n  virtual?: boolean\n  /** Показывать подсказку сочетания в поле ввода. */\n  showHotkeyHint?: boolean\n  emptyText?: string\n  ariaLabel?: string\n}\n\nexport interface GrCommandPaletteEmits {\n  (e: 'update:modelValue', value: boolean): void\n  /** Команда выбрана (клик или Enter). */\n  (e: 'select', item: GrCommandItem): void\n  /** Поисковый запрос изменился — точка входа для remote-поиска. */\n  (e: 'search', query: string): void\n}\n\nimport './defaults'\n\nconst props = withDefaults(\n  defineProps<GrCommandPaletteProps>(),\n  {\n    items: undefined,\n    recentIds: undefined,\n    placeholder: undefined,\n    // Дефолт `size` живёт в резолвере ниже, а не здесь: Vue подставил бы его\n    // до того, как компонент заглянет в `GrConfigProvider`.\n    size: undefined,\n    hotkey: 'mod+k',\n    filterable: true,\n    filter: undefined,\n    loading: false,\n    closeOnSelect: true,\n    maxHeight: 360,\n    virtual: false,\n    showHotkeyHint: true,\n    emptyText: undefined,\n    ariaLabel: undefined,\n  },\n)\n\nconst emit = defineEmits<GrCommandPaletteEmits>()\n\nconst { t } = useGranularityTranslations()\n\nconst resolvedPlaceholder = computed(() => props.placeholder ?? t('gr.commandPalette.placeholder', 'Type a command or search…'))\nconst resolvedEmptyText = computed(() => props.emptyText ?? t('gr.commandPalette.empty', 'Nothing found'))\nconst resolvedAriaLabel = computed(() => props.ariaLabel ?? t('gr.commandPalette.label', 'Command palette'))\nconst loadingText = computed(() => t('gr.commandPalette.loading', 'Loading…'))\nconst recentTitle = computed(() => t('gr.commandPalette.recent', 'Recent'))\n\nconst query = ref('')\nconst inputEl = ref<HTMLInputElement | null>(null)\nconst listboxId = useId()\n\nconst itemsResolved = computed<GrCommandItem[]>(() => props.items ?? [])\n\nconst filteredItems = computed<GrCommandItem[]>(() =>\n  props.filterable\n    ? filterCommandItems(itemsResolved.value, query.value, props.filter ?? matchCommandItem)\n    : itemsResolved.value,\n)\n\nconst groups = computed(() => {\n  const grouped = groupCommandItems(filteredItems.value)\n\n  // С непустым запросом секции «недавние» нет: там правит релевантность, а не\n  // история — иначе первая же буква уводила бы взгляд не туда.\n  if (query.value.trim()) return grouped\n\n  return withRecentCommands(grouped, filteredItems.value, props.recentIds ?? [], recentTitle.value)\n})\n\n/**\n * Порядок обхода стрелками совпадает с порядком на экране: «недавние» стоят\n * первыми, значит и первая стрелка ведёт туда же.\n */\nconst orderedItems = computed(() => groups.value.flatMap(group => group.items))\n\n/** Плоский список того, что реально выбирается — по нему ходят стрелки. */\nconst navigableItems = computed(() => orderedItems.value.filter(item => !item.disabled))\n\nfunction itemDomId(id: string): string {\n  return `${listboxId}-item-${id}`\n}\n\n/**\n * Виртуализация списка.\n *\n * Набор — плоский поток строк экрана: заголовок группы занимает такую же\n * строку, как команда, поэтому входит в него наравне. Вложенную структуру\n * рендер пересобирает уже из окна.\n */\n\n/** Оценки высоты строк. Команда крупнее заголовка; дальше уточняются замером. */\nconst ITEM_SIZE_ESTIMATE = 44\nconst GROUP_LABEL_SIZE_ESTIMATE = 28\n\ntype PaletteRow =\n  | { kind: 'label', groupIndex: number }\n  | { kind: 'item', groupIndex: number, item: GrCommandItem, posInSet: number, setSize: number }\n\nconst listEl = ref<HTMLElement | null>(null)\n\nconst paletteRows = computed<PaletteRow[]>(() => {\n  const rows: PaletteRow[] = []\n\n  groups.value.forEach((group, groupIndex) => {\n    if (group.name) rows.push({ kind: 'label', groupIndex })\n\n    group.items.forEach((item, index) => {\n      rows.push({\n        kind: 'item',\n        groupIndex,\n        item,\n        // Набор — группа, а не весь список: по ARIA позиция отсчитывается от неё.\n        posInSet: index + 1,\n        setSize: group.items.length,\n      })\n    })\n  })\n\n  return rows\n})\n\nconst virtualizer = useVirtualList({\n  container: listEl,\n  count: () => (props.virtual ? paletteRows.value.length : 0),\n  // Запрос пересобирает набор строк — замеры прошлого набора невалидны.\n  source: () => paletteRows.value,\n  itemSize: index => (paletteRows.value[index]?.kind === 'label' ? GROUP_LABEL_SIZE_ESTIMATE : ITEM_SIZE_ESTIMATE),\n  // Список закрытой палитры не смонтирован вовсе: `clientHeight` взять неоткуда.\n  // `maxHeight` можно перебить `--gr-command-list-max-height` — тогда точная\n  // высота приедет с первым замером, а это останется оценкой первого рендера.\n  viewportSize: () => props.maxHeight,\n})\n\n/**\n * Группы к отрисовке. При виртуализации пересобираются из среза `paletteRows`:\n * группа, начатая выше окна, всё равно открывается — иначе её команды остались\n * бы прямыми потомками listbox'а, что роль запрещает.\n */\ntype RenderedGroup = {\n  key: string\n  groupIndex: number\n  name: string | undefined\n  labelVisible: boolean\n  /** Позиция строки заголовка в `paletteRows` — по ней его замеряет виртуализатор. */\n  labelRowIndex?: number\n  items: { item: GrCommandItem, rowIndex: number, posInSet: number, setSize: number }[]\n}\n\nconst renderedGroups = computed<RenderedGroup[]>(() => {\n  const rows = paletteRows.value\n\n  const from = props.virtual ? virtualizer.range.value.start : 0\n  const to = props.virtual ? Math.min(rows.length, virtualizer.range.value.end) : rows.length\n\n  const result: RenderedGroup[] = []\n  let current: RenderedGroup | undefined\n\n  for (let rowIndex = from; rowIndex < to; rowIndex++) {\n    const row = rows[rowIndex]!\n    const group = groups.value[row.groupIndex]\n\n    if (!current || current.groupIndex !== row.groupIndex) {\n      current = {\n        key: group?.name ?? `__ungrouped-${row.groupIndex}`,\n        groupIndex: row.groupIndex,\n        name: group?.name,\n        labelVisible: false,\n        items: [],\n      }\n      result.push(current)\n    }\n\n    if (row.kind === 'label') {\n      current.labelVisible = true\n      current.labelRowIndex = rowIndex\n      continue\n    }\n\n    current.items.push({ item: row.item, rowIndex, posInSet: row.posInSet, setSize: row.setSize })\n  }\n\n  return result\n})\n\n/** ARIA набора: объявляем только при виртуализации — иначе набор виден по DOM. */\nfunction itemSetProps(entry: { posInSet: number, setSize: number }): Record<string, number> | undefined {\n  if (!props.virtual) return undefined\n  return { 'aria-setsize': entry.setSize, 'aria-posinset': entry.posInSet }\n}\n\n\n/** Сегменты подсветки: совпавшее с запросом рисуется `<mark>`. */\nfunction matchSegments(text: string): ReturnType<typeof splitCommandMatch> {\n  return splitCommandMatch(text, props.filterable ? query.value : '')\n}\n\nasync function scrollActiveIntoView(item: GrCommandItem): Promise<void> {\n  // Вне окна активной команды в DOM нет: `getElementById` вернул бы `null`,\n  // прокрутка не случилась бы, а `aria-activedescendant` указал бы в пустоту.\n  if (props.virtual) {\n    const rowIndex = paletteRows.value.findIndex(row => row.kind === 'item' && row.item.id === item.id)\n    if (rowIndex >= 0) virtualizer.scrollToIndex(rowIndex)\n  }\n\n  await nextTick()\n  document.getElementById(itemDomId(item.id))?.scrollIntoView?.({ block: 'nearest' })\n}\n\nconst {\n  activeItem,\n  activeDescendantId,\n  setActive,\n  reset: resetActive,\n  handleNavigationKeys,\n} = useComboboxNavigation<GrCommandItem>({\n  items: () => navigableItems.value,\n  open: () => props.modelValue,\n  idOf: item => itemDomId(item.id),\n  scrollTo: item => scrollActiveIntoView(item),\n})\n\n// Палитра всегда стартует с первой команды — и при монтировании открытой тоже.\nresetActive(0)\n\nfunction isActive(item: GrCommandItem): boolean {\n  return activeItem.value?.id === item.id\n}\n\n// Активной становится первая команда, когда список изменился **по содержимому**.\n// Следить за идентичностью массива нельзя: родитель, отдающий `:items` инлайн-\n// выражением, пересоздаёт его на каждый посторонний ререндер — и выбранная\n// стрелками команда прыгала бы в начало.\n// Разделитель — пробел, а не запятая: `id` вправе её содержать, и «a,b» + «c»\n// дало бы тот же ключ, что «a» + «b,c».\nwatch(\n  () => orderedItems.value.map(item => item.id).join(' '),\n  () => resetActive(0),\n)\n\n// `id` — ключ рендера и цель `aria-activedescendant`: дубли дают одинаковые\n// DOM-id, и фокус уезжает не на ту команду.\nwatch(\n  itemsResolved,\n  (items) => {\n    if (!__GR_DEV__) return\n    const duplicates = findDuplicateCommandIds(items)\n    if (!duplicates.length) return\n\n    console.warn(\n      `[GrCommandPalette] повторяющиеся id команд: ${duplicates.join(', ')}. `\n      + 'Из-за одинаковых DOM-id `aria-activedescendant` укажет не на ту команду.',\n    )\n  },\n  { immediate: true },\n)\n\nfunction open(): void {\n  emit('update:modelValue', true)\n}\n\nfunction close(): void {\n  emit('update:modelValue', false)\n}\n\nfunction toggle(): void {\n  emit('update:modelValue', !props.modelValue)\n}\n\nfunction selectItem(item: GrCommandItem): void {\n  if (item.disabled) return\n  emit('select', item)\n  if (props.closeOnSelect) close()\n}\n\nfunction onItemHover(item: GrCommandItem): void {\n  const index = navigableItems.value.indexOf(item)\n  if (index >= 0) setActive(index)\n}\n\nfunction onInput(event: Event): void {\n  query.value = (event.target as HTMLInputElement).value\n  emit('search', query.value.trim())\n}\n\nfunction onKeydown(event: KeyboardEvent): void {\n  // Клавиша во время IME-композиции принадлежит композиции: Enter коммитит её,\n  // стрелки ходят по кандидатам.\n  if (isComposingEvent(event)) return\n\n  if (handleNavigationKeys(event)) return\n\n  switch (event.key) {\n    case 'Enter':\n      if (!activeItem.value) break\n      event.preventDefault()\n      selectItem(activeItem.value)\n      break\n  }\n}\n\n// ————— Открытие: сброс запроса и выбора.\nwatch(\n  () => props.modelValue,\n  (open) => {\n    if (!open) return\n\n    query.value = ''\n    resetActive(0)\n  },\n)\n\n// Фокус в поле — отдельным наблюдателем, и по появлению самого поля: содержимое\n// панели рождается вместе с ней, и по одному лишь пропу фокусировать нечего.\n// Ловушка фокуса `GrModal` этот выбор не перебивает — фокус, уже стоящий внутри\n// слоя, она считает осознанным.\nwatch(\n  [() => props.modelValue, inputEl],\n  ([open]) => {\n    if (open) inputEl.value?.focus()\n  },\n  { flush: 'post' },\n)\n\n// ————— Глобальное сочетание открытия.\nconst parsedHotkey = computed(() => (props.hotkey ? parseCommandHotkey(props.hotkey) : null))\n\n// Платформа определяется только после монтирования: на сервере `navigator` нет,\n// и первый рендер обязан совпасть с серверным. Иначе сервер отдаёт `Ctrl`,\n// клиент на macOS рисует `⌘`, и гидрация расходится по тексту подсказки.\nconst isApple = ref(false)\n\nconst hotkeyHint = computed(() =>\n  props.showHotkeyHint && parsedHotkey.value ? formatCommandHotkey(parsedHotkey.value, isApple.value) : [],\n)\n\nfunction onWindowKeydown(event: KeyboardEvent): void {\n  const hotkey = parsedHotkey.value\n  if (!hotkey || !matchesCommandHotkey(event, hotkey, isApple.value)) return\n  event.preventDefault()\n  toggle()\n}\n\nonMounted(() => {\n  if (typeof window === 'undefined') return\n  isApple.value = isAppleDevice()\n  window.addEventListener('keydown', onWindowKeydown)\n})\n\nonBeforeUnmount(() => {\n  if (typeof window !== 'undefined') window.removeEventListener('keydown', onWindowKeydown)\n})\n\n// Эффективный размер: локальный проп → `GrConfigProvider` → дефолт компонента.\nconst resolvedSize = useGrComponentProp('GrCommandPalette', 'size', () => props.size, 'lg')\n\nconst modalSize = computed(() => commandPaletteModalSizeBySize[resolvedSize.value])\nconst listStyle = computed(() => ({ maxHeight: `var(--gr-command-list-max-height, ${props.maxHeight}px)` }))\n\nconst listStyleWithSpacers = computed(() => {\n  const base = listStyle.value\n  if (!props.virtual) return base\n\n  return {\n    ...base,\n    ...virtualizer.spacerStyle.value,\n  }\n})\n\ndefineExpose({ open, close, toggle })\n\ndefineSlots<{\n  /** Строка списка вместо стандартной. */\n  item?: (props: { item: GrCommandItem, active: boolean }) => any\n  /** Пустое состояние: получает запрос, чтобы предложить действие по нему. */\n  empty?: (props: { query: string }) => any\n  /** Подвал палитры: подсказки по клавишам, счётчик. */\n  footer?: () => any\n}>()\n\n</script>\n\n<template>\n  <GrModal\n    :model-value=\"modelValue\"\n    :size=\"modalSize\"\n    @update:model-value=\"$emit('update:modelValue', $event)\"\n  >\n    <div data-gr-command-palette :aria-label=\"resolvedAriaLabel\">\n      <div data-gr-command-palette-search :class=\"commandSearchRowClass\">\n        <IconSearch class=\"block h-4 w-4 shrink-0 text-[var(--gr-muted-fg)]\" aria-hidden=\"true\" />\n\n        <input\n          ref=\"inputEl\"\n          data-gr-command-palette-input\n          data-testid=\"gr-command-palette-input\"\n          type=\"text\"\n          autocomplete=\"off\"\n          spellcheck=\"false\"\n          role=\"combobox\"\n          aria-haspopup=\"listbox\"\n          aria-autocomplete=\"list\"\n          aria-expanded=\"true\"\n          :aria-label=\"resolvedAriaLabel\"\n          :aria-controls=\"listboxId\"\n          :aria-activedescendant=\"activeDescendantId\"\n          :value=\"query\"\n          :placeholder=\"resolvedPlaceholder\"\n          :class=\"commandSearchInputClass\"\n          @input=\"onInput\"\n          @keydown=\"onKeydown\"\n        >\n\n        <span v-if=\"loading\" class=\"shrink-0 text-[var(--gr-muted-fg)]\" aria-hidden=\"true\">\n          <IconLoaderCircle class=\"block h-4 w-4 animate-spin\" />\n        </span>\n        <span v-else-if=\"hotkeyHint.length\" class=\"shrink-0\" aria-hidden=\"true\">\n          <GrKbd :keys=\"hotkeyHint\" size=\"sm\" />\n        </span>\n      </div>\n\n      <div\n        :id=\"listboxId\"\n        ref=\"listEl\"\n        data-gr-command-palette-list\n        data-testid=\"gr-command-palette-list\"\n        :data-gr-virtual=\"virtual ? '' : undefined\"\n        class=\"overflow-y-auto p-2\"\n        :style=\"listStyleWithSpacers\"\n        role=\"listbox\"\n        :aria-label=\"resolvedAriaLabel\"\n      >\n        <!-- Прямыми потомками listbox могут быть только `role=\"group\"`: заголовок\n             группы лежит внутри неё и объявлен презентационным (имя группе он\n             даёт через `aria-labelledby`), иначе ломается `aria-required-children`.\n\n             При виртуализации окно может начаться ниже заголовка — тогда его в\n             DOM нет, и имя группы идёт напрямую в `aria-label`. -->\n        <div\n          v-for=\"group in renderedGroups\"\n          :key=\"group.key\"\n          role=\"group\"\n          :aria-labelledby=\"group.name && group.labelVisible ? `${listboxId}-group-${group.groupIndex}` : undefined\"\n          :aria-label=\"group.name && !group.labelVisible ? group.name : undefined\"\n        >\n          <div\n            v-if=\"group.name && group.labelVisible\"\n            :id=\"`${listboxId}-group-${group.groupIndex}`\"\n            :ref=\"(el) => virtual && group.labelRowIndex !== undefined && virtualizer.measure(group.labelRowIndex, el as Element | null)\"\n            data-gr-command-palette-group\n            role=\"presentation\"\n            :class=\"commandGroupLabelClass\"\n          >\n            {{ group.name }}\n          </div>\n\n          <div>\n            <div\n              v-for=\"entry in group.items\"\n              :id=\"itemDomId(entry.item.id)\"\n              :key=\"entry.item.id\"\n              :ref=\"(el) => virtual && virtualizer.measure(entry.rowIndex, el as Element | null)\"\n              data-gr-command-palette-item\n              :data-testid=\"`gr-command-palette-item-${entry.item.id}`\"\n              role=\"option\"\n              v-bind=\"itemSetProps(entry)\"\n              :aria-selected=\"isActive(entry.item) ? 'true' : 'false'\"\n              :aria-disabled=\"entry.item.disabled ? 'true' : undefined\"\n              :class=\"commandItemClass({ active: isActive(entry.item), disabled: Boolean(entry.item.disabled) })\"\n              @click=\"selectItem(entry.item)\"\n              @mousemove=\"onItemHover(entry.item)\"\n            >\n              <slot name=\"item\" :item=\"entry.item\" :active=\"isActive(entry.item)\">\n                <component\n                  :is=\"iconTag(entry.item.icon)\"\n                  v-if=\"entry.item.icon\"\n                  class=\"block h-4 w-4 shrink-0\"\n                  :class=\"[iconClass(entry.item.icon), commandItemMutedClass(Boolean(entry.item.disabled))]\"\n                  aria-hidden=\"true\"\n                />\n                <span class=\"min-w-0 flex-1\">\n                  <span class=\"block truncate\">\n                    <template v-for=\"(segment, index) in matchSegments(entry.item.label)\" :key=\"index\">\n                      <mark v-if=\"segment.match\" :class=\"commandMatchClass\">{{ segment.text }}</mark>\n                      <template v-else>{{ segment.text }}</template>\n                    </template>\n                  </span>\n                  <span\n                    v-if=\"entry.item.description\"\n                    :class=\"[commandItemDescriptionClass, commandItemMutedClass(Boolean(entry.item.disabled))]\"\n                  >\n                    <template v-for=\"(segment, index) in matchSegments(entry.item.description)\" :key=\"index\">\n                      <mark v-if=\"segment.match\" :class=\"commandMatchClass\">{{ segment.text }}</mark>\n                      <template v-else>{{ segment.text }}</template>\n                    </template>\n                  </span>\n                </span>\n                <span v-if=\"entry.item.shortcut?.length\" class=\"shrink-0\">\n                  <GrKbd :keys=\"entry.item.shortcut\" size=\"sm\" />\n                </span>\n              </slot>\n            </div>\n          </div>\n        </div>\n      </div>\n\n      <!-- Состояния объявляются живым регионом: `aria-label` на generic-элементе\n           большинство AT игнорируют, и загрузка осталась бы неозвученной. Регион\n           один на оба состояния и лежит вне listbox — внутри он стал бы его\n           недопустимым потомком. -->\n      <div\n        v-if=\"loading || !filteredItems.length\"\n        data-gr-command-palette-empty\n        data-testid=\"gr-command-palette-empty\"\n        role=\"status\"\n        aria-live=\"polite\"\n        :class=\"commandEmptyClass\"\n      >\n        <template v-if=\"loading\">\n          {{ loadingText }}\n        </template>\n        <slot v-else name=\"empty\" :query=\"query\">\n          {{ resolvedEmptyText }}\n        </slot>\n      </div>\n\n      <div v-if=\"$slots.footer\" data-gr-command-palette-footer :class=\"commandFooterClass\">\n        <slot name=\"footer\" />\n      </div>\n    </div>\n  </GrModal>\n</template>\n\n<style scoped>\n/*\n * Распорки виртуального списка.\n *\n * Не `padding` контейнера: `max-height` меряет ту же коробку. Не обёртка внутри\n * listbox'а: прямыми потомками роли обязаны быть только группы. Не отступы\n * крайних строк: при прыжке прокрутки строки заменяются целиком, и распорка\n * исчезла бы вместе с ними.\n *\n * `display: block` обязателен: список палитры — блочный поток, а псевдоэлемент\n * по умолчанию строчный, и строчная коробка игнорирует `height` — распорка\n * молча не создалась бы вовсе.\n */\n[data-gr-virtual]::before,\n[data-gr-virtual]::after {\n    content: '';\n    display: block;\n    flex: none;\n}\n\n[data-gr-virtual]::before {\n    height: var(--gr-virtual-before, 0px);\n}\n\n[data-gr-virtual]::after {\n    height: var(--gr-virtual-after, 0px);\n}\n</style>\n"],"mappings":"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"}

package/dist/components/GrConfirmDialog/chunks/GrConfirmDialog-B9mIU78E.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"GrConfirmDialog-B9mIU78E.js","names":[],"sources":["../../../../src/components/GrConfirmDialog/GrConfirmDialog.vue","../../../../src/components/GrConfirmDialog/GrConfirmDialog.vue"],"sourcesContent":["<script setup lang=\"ts\">\n/**\n * GrConfirmDialog — GR-примитив диалога подтверждения поверх `GrDialog`.\n *\n * Синхронизирован с `GrDialog`/`GrPromptDialog` по набору проп-проксирования:\n * `size`, `closeOnBackdrop`, `closeOnEsc`, `showHeader`, `showCloseButton`,\n * `headerConfig`, `footerConfig`, `bodyConfig`, `closeLabel`.\n *\n * Клик по «Confirm»/«Cancel» эмитит одноимённое событие и закрывает диалог\n * через `update:modelValue`.\n */\nimport { useGrComponentProp } from '../GrConfigProvider/context'\nimport { computed, ref, watch } from 'vue'\n\nimport GrButton from '../GrButton/GrButton.vue'\nimport GrDialog from '../GrDialog/GrDialog.vue'\nimport GrResponseErrorBanner from '../GrResponseErrorBanner/GrResponseErrorBanner.vue'\nimport { useGranularityTranslations } from '../../internal/granularityI18n'\nimport type { GrButtonSize, GrButtonTone, GrButtonVariant } from '../GrButton'\nimport type { GrDialogSectionConfig, GrDialogSize } from '../GrDialog'\nimport type { ResponseErrorInfo } from '../GrResponseErrorBanner'\n\n/** Какое действие получает фокус при открытии окна. */\nexport type GrConfirmDialogFocusAction = 'confirm' | 'cancel' | 'none'\n\nexport interface GrConfirmDialogProps {\n  modelValue: boolean\n  title?: string\n  description?: string\n  closeOnBackdrop?: boolean\n  closeOnEsc?: boolean\n  showHeader?: boolean\n  showCloseButton?: boolean\n  size?: GrDialogSize\n  headerConfig?: GrDialogSectionConfig\n  footerConfig?: GrDialogSectionConfig\n  bodyConfig?: GrDialogSectionConfig\n  /** A11y-лейбл кнопки закрытия (i18n). */\n  closeLabel?: string\n  buttonSize?: GrButtonSize\n  confirmText?: string\n  cancelText?: string\n  confirmVariant?: GrButtonVariant\n  confirmTone?: GrButtonTone\n  /**\n   * Структура ошибки ответа сервера для показа в теле диалога\n   * (через `GrResponseErrorBanner`). Используется императивным\n   * `useDialogService` для async-`onConfirm`. `null` — блок скрыт.\n   */\n  error?: ResponseErrorInfo | null\n  /** Состояние загрузки кнопки Confirm (async-`onConfirm` in-flight). */\n  confirmLoading?: boolean\n  /** Принудительно дизейблит кнопку Confirm. */\n  confirmDisabled?: boolean\n  /**\n   * Закрывать ли диалог автоматически по клику Confirm. По умолчанию `true`\n   * (историческое поведение). `false` — отдаёт управление закрытием наружу\n   * (нужно `useDialogService`, который ждёт результат async-`onConfirm`).\n   */\n  closeOnConfirm?: boolean\n  /**\n   * Какое действие получает фокус при открытии. По умолчанию «Отмена»:\n   * подтверждение бывает деструктивным, и `Enter` сразу после открытия не\n   * должен его запускать. `none` оставляет фокус на панели окна.\n   *\n   * Имя не `initialFocus` намеренно: у `GrModal`/`GrDrawer` так называется\n   * проп с элементом, а здесь выбирается действие.\n   */\n  focusAction?: GrConfirmDialogFocusAction\n  /**\n   * Запрет закрытия «мягкими» способами (Esc, клик по бэкдропу), пока идёт\n   * подтверждение (`confirmLoading`). Кнопка закрытия и «Отмена» остаются:\n   * окно без единого выхода — ловушка.\n   */\n  persistent?: boolean\n}\n\nexport interface GrConfirmDialogEmits {\n  (e: 'update:modelValue', value: boolean): void\n  (e: 'confirm'): void\n  (e: 'cancel'): void\n}\n\nimport './defaults'\n\nconst props = withDefaults(defineProps<GrConfirmDialogProps>(), {\n  title: undefined,\n  description: undefined,\n  closeOnBackdrop: true,\n  closeOnEsc: true,\n  showHeader: true,\n  showCloseButton: true,\n  // Дефолт `size` живёт в резолвере ниже, а не здесь: Vue подставил бы его\n  // до того, как компонент заглянет в `GrConfigProvider`.\n  size: undefined,\n  headerConfig: undefined,\n  footerConfig: undefined,\n  bodyConfig: undefined,\n  closeLabel: undefined,\n  buttonSize: undefined,\n  confirmText: undefined,\n  cancelText: undefined,\n  confirmVariant: 'primary',\n  confirmTone: 'primary',\n  error: null,\n  confirmLoading: false,\n  confirmDisabled: false,\n  closeOnConfirm: true,\n  focusAction: 'cancel',\n  persistent: false,\n})\n\n// Эффективный размер: локальный проп → `GrConfigProvider` → дефолт компонента.\nconst resolvedSize = useGrComponentProp('GrConfirmDialog', 'size', () => props.size, 'md')\n\nconst emit = defineEmits<GrConfirmDialogEmits>()\n\n// Дефолты берём из общего i18n-блока пакета (fallback — англ.), а не хардкодим.\nconst { t } = useGranularityTranslations()\nconst resolvedTitle = computed(() => props.title ?? t('gr.dialog.confirm.title', 'Confirm'))\nconst resolvedCloseLabel = computed(() => props.closeLabel ?? t('gr.common.close', 'Close'))\nconst resolvedConfirmText = computed(() => props.confirmText ?? t('gr.common.confirm', 'Confirm'))\nconst resolvedCancelText = computed(() => props.cancelText ?? t('gr.common.cancel', 'Cancel'))\n\nconst open = computed({\n  get: () => props.modelValue,\n  set: (value: boolean) => emit('update:modelValue', value),\n})\n\nconst confirmButtonRef = ref<InstanceType<typeof GrButton> | null>(null)\nconst cancelButtonRef = ref<InstanceType<typeof GrButton> | null>(null)\n\n// Пока подтверждение в полёте, случайное движение не должно оборвать операцию.\nconst softCloseBlocked = computed(() => props.persistent && props.confirmLoading)\nconst resolvedCloseOnBackdrop = computed(() => (softCloseBlocked.value ? false : props.closeOnBackdrop))\nconst resolvedCloseOnEsc = computed(() => (softCloseBlocked.value ? false : props.closeOnEsc))\n\n/**\n * Фокус ставит содержимое после отрисовки, а не проп `initialFocus` у\n * `GrModal`: кнопка рождается внутри поддерева диалога, и возврат её же пропом\n * наверх замыкает рендер в цикл (проверено на `GrPromptDialog`).\n *\n * Молчит, когда фокусировать нечего: со своим слотом `#footer` кнопок с\n * рефами в DOM нет, и фокус остаётся на панели — это корректный исход, а не\n * повод падать.\n */\nfunction focusAction(): void {\n  if (props.focusAction === 'confirm') confirmButtonRef.value?.focus()\n  else if (props.focusAction === 'cancel') cancelButtonRef.value?.focus()\n}\n\n// Источник — не только `modelValue`, но и сами кнопки: содержимое панели\n// появляется на такт позже открытия, и фокус по фиксированному `nextTick`\n// приходился на момент, когда фокусировать ещё нечего.\nwatch(\n  [() => props.modelValue, cancelButtonRef, confirmButtonRef],\n  () => {\n    if (!props.modelValue || props.focusAction === 'none') return\n    focusAction()\n  },\n  // `immediate`: окно могут смонтировать уже открытым — смены пропа тогда нет.\n  { immediate: true, flush: 'post' },\n)\n\nfunction onCancel(): void {\n  emit('cancel')\n  emit('update:modelValue', false)\n}\n\nfunction onConfirm(): void {\n  emit('confirm')\n  if (props.closeOnConfirm)\n    emit('update:modelValue', false)\n}\n\ndefineSlots<{\n  /** Содержимое диалога вместо пропа `message`. */\n  default?: () => any\n  /** Разбор ошибки вместо встроенного баннера. */\n  error?: (props: { error: ResponseErrorInfo | null }) => any\n  /** Кнопки диалога вместо пары «отмена и подтверждение». */\n  footer?: () => any\n}>()\n\n</script>\n\n<template>\n  <GrDialog\n    v-model=\"open\"\n    :title=\"resolvedTitle\"\n    :size=\"resolvedSize\"\n    :close-on-backdrop=\"resolvedCloseOnBackdrop\"\n    :close-on-esc=\"resolvedCloseOnEsc\"\n    :show-header=\"showHeader\"\n    :show-close-button=\"showCloseButton\"\n    :header-config=\"headerConfig\"\n    :footer-config=\"footerConfig\"\n    :body-config=\"bodyConfig\"\n    :close-label=\"resolvedCloseLabel\"\n  >\n    <div class=\"grid gap-4\">\n      <slot>\n        <div v-if=\"description\" class=\"text-[length:var(--gr-control-text-md)] leading-[var(--gr-control-leading-md)] text-[var(--gr-muted-fg)]\">\n          {{ description }}\n        </div>\n      </slot>\n\n      <slot name=\"error\" :error=\"error\">\n        <GrResponseErrorBanner v-if=\"error\" :error=\"error\" :can-dismiss=\"false\" />\n      </slot>\n    </div>\n\n    <template #footer>\n      <slot name=\"footer\">\n        <div class=\"flex items-center justify-end gap-3\">\n          <GrButton ref=\"cancelButtonRef\" data-testid=\"gr-confirm-cancel\" variant=\"outline\" :size=\"buttonSize\" @click=\"onCancel\">\n            {{ resolvedCancelText }}\n          </GrButton>\n          <GrButton\n            ref=\"confirmButtonRef\"\n            data-testid=\"gr-confirm-confirm\"\n            :variant=\"confirmVariant\"\n            :tone=\"confirmTone\"\n            :size=\"buttonSize\"\n            :loading=\"confirmLoading\"\n            :disabled=\"confirmDisabled\"\n            @click=\"onConfirm\"\n          >\n            {{ resolvedConfirmText }}\n          </GrButton>\n        </div>\n      </slot>\n    </template>\n  </GrDialog>\n</template>\n","<script setup lang=\"ts\">\n/**\n * GrConfirmDialog — GR-примитив диалога подтверждения поверх `GrDialog`.\n *\n * Синхронизирован с `GrDialog`/`GrPromptDialog` по набору проп-проксирования:\n * `size`, `closeOnBackdrop`, `closeOnEsc`, `showHeader`, `showCloseButton`,\n * `headerConfig`, `footerConfig`, `bodyConfig`, `closeLabel`.\n *\n * Клик по «Confirm»/«Cancel» эмитит одноимённое событие и закрывает диалог\n * через `update:modelValue`.\n */\nimport { useGrComponentProp } from '../GrConfigProvider/context'\nimport { computed, ref, watch } from 'vue'\n\nimport GrButton from '../GrButton/GrButton.vue'\nimport GrDialog from '../GrDialog/GrDialog.vue'\nimport GrResponseErrorBanner from '../GrResponseErrorBanner/GrResponseErrorBanner.vue'\nimport { useGranularityTranslations } from '../../internal/granularityI18n'\nimport type { GrButtonSize, GrButtonTone, GrButtonVariant } from '../GrButton'\nimport type { GrDialogSectionConfig, GrDialogSize } from '../GrDialog'\nimport type { ResponseErrorInfo } from '../GrResponseErrorBanner'\n\n/** Какое действие получает фокус при открытии окна. */\nexport type GrConfirmDialogFocusAction = 'confirm' | 'cancel' | 'none'\n\nexport interface GrConfirmDialogProps {\n  modelValue: boolean\n  title?: string\n  description?: string\n  closeOnBackdrop?: boolean\n  closeOnEsc?: boolean\n  showHeader?: boolean\n  showCloseButton?: boolean\n  size?: GrDialogSize\n  headerConfig?: GrDialogSectionConfig\n  footerConfig?: GrDialogSectionConfig\n  bodyConfig?: GrDialogSectionConfig\n  /** A11y-лейбл кнопки закрытия (i18n). */\n  closeLabel?: string\n  buttonSize?: GrButtonSize\n  confirmText?: string\n  cancelText?: string\n  confirmVariant?: GrButtonVariant\n  confirmTone?: GrButtonTone\n  /**\n   * Структура ошибки ответа сервера для показа в теле диалога\n   * (через `GrResponseErrorBanner`). Используется императивным\n   * `useDialogService` для async-`onConfirm`. `null` — блок скрыт.\n   */\n  error?: ResponseErrorInfo | null\n  /** Состояние загрузки кнопки Confirm (async-`onConfirm` in-flight). */\n  confirmLoading?: boolean\n  /** Принудительно дизейблит кнопку Confirm. */\n  confirmDisabled?: boolean\n  /**\n   * Закрывать ли диалог автоматически по клику Confirm. По умолчанию `true`\n   * (историческое поведение). `false` — отдаёт управление закрытием наружу\n   * (нужно `useDialogService`, который ждёт результат async-`onConfirm`).\n   */\n  closeOnConfirm?: boolean\n  /**\n   * Какое действие получает фокус при открытии. По умолчанию «Отмена»:\n   * подтверждение бывает деструктивным, и `Enter` сразу после открытия не\n   * должен его запускать. `none` оставляет фокус на панели окна.\n   *\n   * Имя не `initialFocus` намеренно: у `GrModal`/`GrDrawer` так называется\n   * проп с элементом, а здесь выбирается действие.\n   */\n  focusAction?: GrConfirmDialogFocusAction\n  /**\n   * Запрет закрытия «мягкими» способами (Esc, клик по бэкдропу), пока идёт\n   * подтверждение (`confirmLoading`). Кнопка закрытия и «Отмена» остаются:\n   * окно без единого выхода — ловушка.\n   */\n  persistent?: boolean\n}\n\nexport interface GrConfirmDialogEmits {\n  (e: 'update:modelValue', value: boolean): void\n  (e: 'confirm'): void\n  (e: 'cancel'): void\n}\n\nimport './defaults'\n\nconst props = withDefaults(defineProps<GrConfirmDialogProps>(), {\n  title: undefined,\n  description: undefined,\n  closeOnBackdrop: true,\n  closeOnEsc: true,\n  showHeader: true,\n  showCloseButton: true,\n  // Дефолт `size` живёт в резолвере ниже, а не здесь: Vue подставил бы его\n  // до того, как компонент заглянет в `GrConfigProvider`.\n  size: undefined,\n  headerConfig: undefined,\n  footerConfig: undefined,\n  bodyConfig: undefined,\n  closeLabel: undefined,\n  buttonSize: undefined,\n  confirmText: undefined,\n  cancelText: undefined,\n  confirmVariant: 'primary',\n  confirmTone: 'primary',\n  error: null,\n  confirmLoading: false,\n  confirmDisabled: false,\n  closeOnConfirm: true,\n  focusAction: 'cancel',\n  persistent: false,\n})\n\n// Эффективный размер: локальный проп → `GrConfigProvider` → дефолт компонента.\nconst resolvedSize = useGrComponentProp('GrConfirmDialog', 'size', () => props.size, 'md')\n\nconst emit = defineEmits<GrConfirmDialogEmits>()\n\n// Дефолты берём из общего i18n-блока пакета (fallback — англ.), а не хардкодим.\nconst { t } = useGranularityTranslations()\nconst resolvedTitle = computed(() => props.title ?? t('gr.dialog.confirm.title', 'Confirm'))\nconst resolvedCloseLabel = computed(() => props.closeLabel ?? t('gr.common.close', 'Close'))\nconst resolvedConfirmText = computed(() => props.confirmText ?? t('gr.common.confirm', 'Confirm'))\nconst resolvedCancelText = computed(() => props.cancelText ?? t('gr.common.cancel', 'Cancel'))\n\nconst open = computed({\n  get: () => props.modelValue,\n  set: (value: boolean) => emit('update:modelValue', value),\n})\n\nconst confirmButtonRef = ref<InstanceType<typeof GrButton> | null>(null)\nconst cancelButtonRef = ref<InstanceType<typeof GrButton> | null>(null)\n\n// Пока подтверждение в полёте, случайное движение не должно оборвать операцию.\nconst softCloseBlocked = computed(() => props.persistent && props.confirmLoading)\nconst resolvedCloseOnBackdrop = computed(() => (softCloseBlocked.value ? false : props.closeOnBackdrop))\nconst resolvedCloseOnEsc = computed(() => (softCloseBlocked.value ? false : props.closeOnEsc))\n\n/**\n * Фокус ставит содержимое после отрисовки, а не проп `initialFocus` у\n * `GrModal`: кнопка рождается внутри поддерева диалога, и возврат её же пропом\n * наверх замыкает рендер в цикл (проверено на `GrPromptDialog`).\n *\n * Молчит, когда фокусировать нечего: со своим слотом `#footer` кнопок с\n * рефами в DOM нет, и фокус остаётся на панели — это корректный исход, а не\n * повод падать.\n */\nfunction focusAction(): void {\n  if (props.focusAction === 'confirm') confirmButtonRef.value?.focus()\n  else if (props.focusAction === 'cancel') cancelButtonRef.value?.focus()\n}\n\n// Источник — не только `modelValue`, но и сами кнопки: содержимое панели\n// появляется на такт позже открытия, и фокус по фиксированному `nextTick`\n// приходился на момент, когда фокусировать ещё нечего.\nwatch(\n  [() => props.modelValue, cancelButtonRef, confirmButtonRef],\n  () => {\n    if (!props.modelValue || props.focusAction === 'none') return\n    focusAction()\n  },\n  // `immediate`: окно могут смонтировать уже открытым — смены пропа тогда нет.\n  { immediate: true, flush: 'post' },\n)\n\nfunction onCancel(): void {\n  emit('cancel')\n  emit('update:modelValue', false)\n}\n\nfunction onConfirm(): void {\n  emit('confirm')\n  if (props.closeOnConfirm)\n    emit('update:modelValue', false)\n}\n\ndefineSlots<{\n  /** Содержимое диалога вместо пропа `message`. */\n  default?: () => any\n  /** Разбор ошибки вместо встроенного баннера. */\n  error?: (props: { error: ResponseErrorInfo | null }) => any\n  /** Кнопки диалога вместо пары «отмена и подтверждение». */\n  footer?: () => any\n}>()\n\n</script>\n\n<template>\n  <GrDialog\n    v-model=\"open\"\n    :title=\"resolvedTitle\"\n    :size=\"resolvedSize\"\n    :close-on-backdrop=\"resolvedCloseOnBackdrop\"\n    :close-on-esc=\"resolvedCloseOnEsc\"\n    :show-header=\"showHeader\"\n    :show-close-button=\"showCloseButton\"\n    :header-config=\"headerConfig\"\n    :footer-config=\"footerConfig\"\n    :body-config=\"bodyConfig\"\n    :close-label=\"resolvedCloseLabel\"\n  >\n    <div class=\"grid gap-4\">\n      <slot>\n        <div v-if=\"description\" class=\"text-[length:var(--gr-control-text-md)] leading-[var(--gr-control-leading-md)] text-[var(--gr-muted-fg)]\">\n          {{ description }}\n        </div>\n      </slot>\n\n      <slot name=\"error\" :error=\"error\">\n        <GrResponseErrorBanner v-if=\"error\" :error=\"error\" :can-dismiss=\"false\" />\n      </slot>\n    </div>\n\n    <template #footer>\n      <slot name=\"footer\">\n        <div class=\"flex items-center justify-end gap-3\">\n          <GrButton ref=\"cancelButtonRef\" data-testid=\"gr-confirm-cancel\" variant=\"outline\" :size=\"buttonSize\" @click=\"onCancel\">\n            {{ resolvedCancelText }}\n          </GrButton>\n          <GrButton\n            ref=\"confirmButtonRef\"\n            data-testid=\"gr-confirm-confirm\"\n            :variant=\"confirmVariant\"\n            :tone=\"confirmTone\"\n            :size=\"buttonSize\"\n            :loading=\"confirmLoading\"\n            :disabled=\"confirmDisabled\"\n            @click=\"onConfirm\"\n          >\n            {{ resolvedConfirmText }}\n          </GrButton>\n        </div>\n      </slot>\n    </template>\n  </GrDialog>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAqFA,MAAM,QAAQ;EA4Bd,MAAM,eAAe,mBAAmB,mBAAmB,cAAc,MAAM,MAAM,IAAI;EAEzF,MAAM,OAAO;EAGb,MAAM,EAAE,MAAM,2BAA2B;EACzC,MAAM,gBAAgB,eAAe,MAAM,SAAS,EAAE,2BAA2B,SAAS,CAAC;EAC3F,MAAM,qBAAqB,eAAe,MAAM,cAAc,EAAE,mBAAmB,OAAO,CAAC;EAC3F,MAAM,sBAAsB,eAAe,MAAM,eAAe,EAAE,qBAAqB,SAAS,CAAC;EACjG,MAAM,qBAAqB,eAAe,MAAM,cAAc,EAAE,oBAAoB,QAAQ,CAAC;EAE7F,MAAM,OAAO,SAAS;GACpB,WAAW,MAAM;GACjB,MAAM,UAAmB,KAAK,qBAAqB,KAAK;EAC1D,CAAC;EAED,MAAM,mBAAmB,IAA0C,IAAI;EACvE,MAAM,kBAAkB,IAA0C,IAAI;EAGtE,MAAM,mBAAmB,eAAe,MAAM,cAAc,MAAM,cAAc;EAChF,MAAM,0BAA0B,eAAgB,iBAAiB,QAAQ,QAAQ,MAAM,eAAgB;EACvG,MAAM,qBAAqB,eAAgB,iBAAiB,QAAQ,QAAQ,MAAM,UAAW;;;;;;;;;;EAW7F,SAAS,cAAoB;GAC3B,IAAI,MAAM,gBAAgB,WAAW,iBAAiB,OAAO,MAAM;QAC9D,IAAI,MAAM,gBAAgB,UAAU,gBAAgB,OAAO,MAAM;EACxE;EAKA,MACE;SAAO,MAAM;GAAY;GAAiB;EAAgB,SACpD;GACJ,IAAI,CAAC,MAAM,cAAc,MAAM,gBAAgB,QAAQ;GACvD,YAAY;EACd,GAEA;GAAE,WAAW;GAAM,OAAO;EAAO,CACnC;EAEA,SAAS,WAAiB;GACxB,KAAK,QAAQ;GACb,KAAK,qBAAqB,KAAK;EACjC;EAEA,SAAS,YAAkB;GACzB,KAAK,SAAS;GACd,IAAI,MAAM,gBACR,KAAK,qBAAqB,KAAK;EACnC;;uBAcE,YA8CW,kBAAA;gBA7CA,KAAA;sEAAI,QAAA;IACZ,OAAO,cAAA;IACP,MAAM,MAAA,YAAA;IACN,qBAAmB,wBAAA;IACnB,gBAAc,mBAAA;IACd,eAAa,QAAA;IACb,qBAAmB,QAAA;IACnB,iBAAe,QAAA;IACf,iBAAe,QAAA;IACf,eAAa,QAAA;IACb,eAAa,mBAAA;;IAcH,QAAM,cAmBR,CAlBP,WAkBO,KAAA,QAAA,UAAA,CAAA,SAAA,CAjBL,mBAgBM,OAhBN,YAgBM,CAfJ,YAEW,kBAAA;cAFG;KAAJ,KAAI;KAAkB,eAAY;KAAoB,SAAQ;KAAW,MAAM,QAAA;KAAa,SAAO;;4BACnF,CAAA,gBAAA,gBAArB,mBAAA,KAAkB,GAAA,CAAA,CAAA,CAAA;;qBAEvB,YAWW,kBAAA;cAVL;KAAJ,KAAI;KACJ,eAAY;KACX,SAAS,QAAA;KACT,MAAM,QAAA;KACN,MAAM,QAAA;KACN,SAAS,QAAA;KACT,UAAU,QAAA;KACV,SAAO;;4BAEiB,CAAA,gBAAA,gBAAtB,oBAAA,KAAmB,GAAA,CAAA,CAAA,CAAA;;;;;;;;;2BAlBxB,CAVN,mBAUM,OAVN,YAUM,CATJ,WAIO,KAAA,QAAA,WAAA,CAAA,SAAA,CAHM,QAAA,eAAA,UAAA,GAAX,mBAEM,OAFN,YAEM,gBADD,QAAA,WAAW,GAAA,CAAA,KAAA,mBAAA,IAAA,IAAA,CAAA,CAAA,GAIlB,WAEO,KAAA,QAAA,SAAA,EAFa,OAAO,QAAA,MAAK,SAEzB,CADwB,QAAA,SAAA,UAAA,GAA7B,YAA0E,+BAAA;;KAArC,OAAO,QAAA;KAAQ,eAAa"}