@feugene/granularity 0.43.0 → 0.45.0

package/dist/components/GrJsonViewer/chunks/{GrJsonViewer-CwCBMh4h.js.map → GrJsonViewer-CdlWMGnF.js.map}

@@ -1 +1 @@
-{"version":3,"file":"GrJsonViewer-CwCBMh4h.js","names":[],"sources":["../../../../src/components/GrJsonViewer/jsonToNodes.ts","../../../../src/components/GrJsonViewer/GrJsonViewer.vue","../../../../src/components/GrJsonViewer/GrJsonViewer.vue"],"sourcesContent":["/**\n * Разбор произвольного значения в узлы дерева.\n *\n * Компонент показывает данные из БД и от чужих сервисов, поэтому обход обязан\n * пережить всё: цикл, `BigInt`, функцию в поле, массив на десять тысяч записей,\n * строку в миллион символов. Уронить страницу он права не имеет.\n */\n\n/** Что за значение в узле. Решает и цвет, и то, раскрывается ли узел. */\nexport type GrJsonNodeKind\n  = | 'object'\n    | 'array'\n    | 'string'\n    | 'number'\n    | 'boolean'\n    | 'null'\n  /** Значения, которых в JSON не бывает: функция, символ, `undefined`. */\n    | 'unsupported'\n  /** Хвост обрезанного массива — «ещё N элементов». Своего значения не имеет. */\n    | 'truncation'\n\nexport type GrJsonNode = {\n  /** Читаемый адрес узла (`$.items[3].name`). Он же ключ для `GrTree`. */\n  path: string\n  /** Имя ключа или индекс. Показывается слева от двоеточия. */\n  label: string\n  kind: GrJsonNodeKind\n  /** Что видно в строке. У ветки — счётчик, у листа — значение, возможно обрезанное. */\n  preview: string\n  /** Полное значение. Копирование берёт его, а не `preview`. */\n  value: unknown\n  /** Показ обрезан: копирование всё равно отдаёт целое. */\n  truncated: boolean\n  isLeaf: boolean\n  children?: GrJsonNode[]\n}\n\nexport type GrJsonToNodesOptions = {\n  /** Подпись корня. */\n  rootLabel?: string\n  /** Длина строки, после которой значение обрезается в показе. */\n  maxStringLength?: number\n  /** Сколько элементов массива разбирать до заглушки «ещё N». */\n  maxArrayItems?: number\n}\n\n/** Маркер ветки, которая уже встречалась выше по этой же цепочке предков. */\nexport const CIRCULAR_MARKER = '[Circular]'\n\nconst DEFAULT_ROOT_LABEL = '$'\nconst DEFAULT_MAX_STRING_LENGTH = 200\nconst DEFAULT_MAX_ARRAY_ITEMS = 100\n\n/** Ключ, который можно дописать через точку, не сломав адрес. */\nconst PLAIN_KEY = /^[A-Za-z_$][\\w$]*$/\n\nfunction appendKey(parentPath: string, key: string): string {\n  return PLAIN_KEY.test(key) ? `${parentPath}.${key}` : `${parentPath}[${JSON.stringify(key)}]`\n}\n\n/**\n * Счётчик у ветки вместо её содержимого: свёрнутый узел обязан сказать, стоит\n * ли его раскрывать. Слово не склоняется — компонент не знает языка потребителя,\n * а число само по себе читается в любом.\n */\nfunction branchPreview(kind: 'object' | 'array', count: number): string {\n  return kind === 'array' ? `[${count}]` : `{${count}}`\n}\n\nfunction scalarPreview(value: unknown, maxStringLength: number): { preview: string, truncated: boolean } {\n  if (typeof value === 'string') {\n    if (value.length <= maxStringLength)\n      return { preview: JSON.stringify(value), truncated: false }\n\n    // Кавычка открывается и не закрывается намеренно: закрытая читалась бы как\n    // конец строки, а строка продолжается — её просто не показывают целиком.\n    return { preview: `${JSON.stringify(value.slice(0, maxStringLength))}…`, truncated: true }\n  }\n\n  // `BigInt` представления в JSON не имеет, и `JSON.stringify` на нём бросает.\n  if (typeof value === 'bigint')\n    return { preview: `${value}n`, truncated: false }\n\n  if (typeof value === 'function' || typeof value === 'symbol' || value === undefined)\n    return { preview: String(value), truncated: false }\n\n  return { preview: JSON.stringify(value) ?? String(value), truncated: false }\n}\n\nfunction kindOf(value: unknown): GrJsonNodeKind {\n  if (value === null)\n    return 'null'\n  if (Array.isArray(value))\n    return 'array'\n\n  switch (typeof value) {\n    case 'string': return 'string'\n    case 'number': return 'number'\n    case 'bigint': return 'number'\n    case 'boolean': return 'boolean'\n    case 'object': return 'object'\n    // `undefined`, функция и символ представления в JSON не имеют — узел\n    // остаётся, чтобы ключ не исчез из показа молча.\n    case 'undefined':\n    case 'function':\n    case 'symbol': return 'unsupported'\n  }\n\n  // Недостижимо: ветки выше покрывают `typeof` целиком. Оставлено ради вывода\n  // типов — без него TS не считает функцию всегда возвращающей.\n  return 'unsupported'\n}\n\ntype BuildContext = {\n  maxStringLength: number\n  maxArrayItems: number\n  /**\n   * Цепочка предков текущего узла, а не все встреченные объекты.\n   *\n   * Разница принципиальна и отличает обход дерева от `replacer` у\n   * `JSON.stringify`: тому стек недоступен, поэтому он метит `[Circular]` любую\n   * повторную ссылку — в том числе объект, честно положенный в данные дважды.\n   * Здесь стек есть, и маркер достаётся только настоящему циклу.\n   */\n  ancestors: Set<object>\n}\n\nfunction buildNode(label: string, path: string, value: unknown, context: BuildContext): GrJsonNode {\n  const kind = kindOf(value)\n\n  if (kind !== 'object' && kind !== 'array') {\n    const { preview, truncated } = scalarPreview(value, context.maxStringLength)\n\n    return { path, label, kind, preview, value, truncated, isLeaf: true }\n  }\n\n  const container = value as object\n\n  if (context.ancestors.has(container)) {\n    return { path, label, kind, preview: CIRCULAR_MARKER, value, truncated: false, isLeaf: true }\n  }\n\n  const entries = Array.isArray(value)\n    ? value.map((item, index) => [String(index), item] as const)\n    : Object.entries(container)\n\n  // Пустой объект и пустой массив — листья: раскрывать нечего, а ветка без\n  // детей рисует стрелку, которая ничего не делает.\n  if (entries.length === 0) {\n    return {\n      path,\n      label,\n      kind,\n      preview: Array.isArray(value) ? '[]' : '{}',\n      value,\n      truncated: false,\n      isLeaf: true,\n    }\n  }\n\n  context.ancestors.add(container)\n\n  const limit = Math.max(0, context.maxArrayItems)\n  const isOverLimit = Array.isArray(value) && entries.length > limit\n  const visible = isOverLimit ? entries.slice(0, limit) : entries\n\n  const children: GrJsonNode[] = visible.map(([key, item]) => buildNode(\n    key,\n    Array.isArray(value) ? `${path}[${key}]` : appendKey(path, key),\n    item,\n    context,\n  ))\n\n  if (isOverLimit) {\n    const rest = entries.length - limit\n\n    children.push({\n      path: `${path}[…]`,\n      label: '…',\n      kind: 'truncation',\n      preview: String(rest),\n      value: (value as unknown[]).slice(limit),\n      truncated: true,\n      isLeaf: true,\n    })\n  }\n\n  context.ancestors.delete(container)\n\n  return {\n    path,\n    label,\n    kind,\n    preview: branchPreview(kind, entries.length),\n    value,\n    truncated: isOverLimit,\n    isLeaf: false,\n    children,\n  }\n}\n\n/**\n * Значение → узлы дерева. Корень всегда один: даже скаляр на входе — это узел,\n * иначе дерево пришлось бы то показывать, то нет.\n */\nexport function jsonToNodes(value: unknown, options: GrJsonToNodesOptions = {}): GrJsonNode[] {\n  const context: BuildContext = {\n    maxStringLength: options.maxStringLength ?? DEFAULT_MAX_STRING_LENGTH,\n    maxArrayItems: options.maxArrayItems ?? DEFAULT_MAX_ARRAY_ITEMS,\n    ancestors: new Set(),\n  }\n\n  return [buildNode(options.rootLabel ?? DEFAULT_ROOT_LABEL, DEFAULT_ROOT_LABEL, value, context)]\n}\n\n/** Пути всех узлов до заданной глубины — ими задаётся начальная свёртка. */\nexport function pathsToDepth(nodes: GrJsonNode[], depth: number, level = 0): string[] {\n  if (level >= depth)\n    return []\n\n  return nodes.flatMap(node => (\n    node.children ? [node.path, ...pathsToDepth(node.children, depth, level + 1)] : []\n  ))\n}\n\n/** Пути всех веток — для «раскрыть всё». */\nexport function branchPaths(nodes: GrJsonNode[]): string[] {\n  return nodes.flatMap(node => (node.children ? [node.path, ...branchPaths(node.children)] : []))\n}\n","<script setup lang=\"ts\">\nimport { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue'\n\nimport GrButton from '../GrButton/GrButton.vue'\nimport GrInput from '../GrInput/GrInput.vue'\nimport GrTree from '../GrTree/GrTree.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 { branchPaths, jsonToNodes, pathsToDepth, type GrJsonNode } from './jsonToNodes'\nimport {\n  jsonValueClass,\n  jsonViewerContentClass,\n  jsonViewerCopyClass,\n  jsonViewerGroupClass,\n  jsonViewerKeyClass,\n  jsonViewerMutedClass,\n  jsonViewerPunctuationClass,\n  jsonViewerRootClass,\n  jsonViewerRowClass,\n  jsonViewerSearchClass,\n  jsonViewerToolbarClass,\n  jsonViewerValueClass,\n} from './grJsonViewerStyles'\n\nimport type { GrComponentSize } from '../shared/sizes'\n\nexport type { GrJsonNode, GrJsonNodeKind } from './jsonToNodes'\n\n/**\n * JSON со свёрткой по узлам, поиском по ключу и значению и копированием узла.\n *\n * Дерево, клавиатуру и виртуализацию несёт `GrTree`; здесь — разбор `unknown` в\n * узлы и разметка строки. Плоский текст целиком, который копируют в тикет, —\n * `GrCodeBlock`.\n */\nexport interface GrJsonViewerProps {\n  /** Показываемое значение. `unknown`, потому что приходит из БД или чужого сервиса. */\n  value: unknown\n  /** Подпись корня. По умолчанию `$` — так адресуют путь JSONPath и dev-tools. */\n  rootLabel?: string\n  /** Сколько уровней раскрыто изначально. */\n  defaultExpandDepth?: number\n  /**\n   * Длина строкового значения, после которой показ обрезается.\n   *\n   * Не косметика: запрос к модели с картинкой в base64 — это один лист на\n   * сотни тысяч символов, и ни свёртка, ни виртуализация по строкам его не\n   * берут. Копирование при этом отдаёт значение целиком.\n   */\n  maxStringLength?: number\n  /** Сколько элементов массива разбирать до заглушки «ещё N». */\n  maxArrayItems?: number\n  /** Поле поиска над деревом. Выключено — поиск остаётся на `filter()` из `defineExpose`. */\n  searchable?: boolean\n  /** Кнопка копирования узла в строке. */\n  copyable?: boolean\n  /** Оставлять в DOM только окно вокруг вьюпорта. Требует `maxHeight`. */\n  virtual?: boolean\n  /** Высота области просмотра: число — пиксели, строка — как есть. */\n  maxHeight?: string | number\n  /** Имя области для скринридера. Безымянное дерево объявляется просто «дерево». */\n  ariaLabel?: string\n  size?: GrComponentSize\n}\n\nexport interface GrJsonViewerEmits {\n  /** Узел скопирован: путь для тикета и полное значение. */\n  (e: 'copy', payload: { path: string, value: unknown }): void\n}\n\nconst props = withDefaults(defineProps<GrJsonViewerProps>(), {\n  // Дефолты живут в резолверах ниже: Vue подставил бы свой раньше, чем\n  // компонент заглянет в `GrConfigProvider`.\n  rootLabel: undefined,\n  defaultExpandDepth: undefined,\n  maxStringLength: undefined,\n  maxArrayItems: undefined,\n  searchable: undefined,\n  copyable: undefined,\n  virtual: false,\n  maxHeight: undefined,\n  ariaLabel: undefined,\n  size: undefined,\n})\n\nconst emit = defineEmits<GrJsonViewerEmits>()\n\ndefineSlots<{\n  /** Значение листа: ссылка, дата, денежная сумма — оформление знает приложение. */\n  leaf?: (props: { node: GrJsonNode }) => unknown\n}>()\n\nconst { t } = useGranularityTranslations()\nconst { announce } = useAnnouncer()\n\nconst resolvedSize = useGrComponentSize(() => props.size, { component: 'GrJsonViewer' })\nconst resolvedDepth = useGrComponentProp('GrJsonViewer', 'defaultExpandDepth', () => props.defaultExpandDepth, 1)\nconst resolvedMaxString = useGrComponentProp('GrJsonViewer', 'maxStringLength', () => props.maxStringLength, 200)\nconst resolvedMaxArray = useGrComponentProp('GrJsonViewer', 'maxArrayItems', () => props.maxArrayItems, 100)\nconst resolvedSearchable = useGrComponentProp('GrJsonViewer', 'searchable', () => props.searchable, true)\nconst resolvedCopyable = useGrComponentProp('GrJsonViewer', 'copyable', () => props.copyable, true)\n\nconst nodes = computed(() => jsonToNodes(props.value, {\n  rootLabel: props.rootLabel,\n  maxStringLength: resolvedMaxString.value,\n  maxArrayItems: resolvedMaxArray.value,\n}))\n\n/**\n * Раскрытие ведётся подстановкой набора путей.\n *\n * Контролируемого `expandedKeys` у `GrTree` нет, но `defaultExpandedKeys` —\n * не «начальное значение»: дерево следит за пропом и заменяет набор целиком.\n * Значит набор обязан быть зеркалом того, что открыто, а не только того, что\n * открыли кнопки: разойдись они — первое же обновление данных вернуло бы дерево\n * к памяти просмотрщика, то есть закрыло бы раскрытое руками.\n */\nconst expandedPaths = ref<string[]>([])\n\n/** Глубина по умолчанию раскладывается один раз — на первом дереве с ветками. */\nlet depthApplied = false\n\n/**\n * Обновление данных раскрытие не сбрасывает.\n *\n * Ответ сервиса опрашивают раз в N секунд, и объект каждый раз новый; сброс на\n * каждую смену складывал бы дерево под руками. Из набора выпадают только\n * исчезнувшие ветки, а глубина применяется заново лишь тогда, когда изменилась\n * она сама.\n */\nwatch(\n  [nodes, resolvedDepth],\n  ([list, depth], previous) => {\n    const branches = branchPaths(list)\n    const depthChanged = previous !== undefined && previous[1] !== depth\n\n    if (depthChanged || (!depthApplied && branches.length > 0)) {\n      depthApplied = branches.length > 0\n      expandedPaths.value = pathsToDepth(list, depth)\n      return\n    }\n\n    const alive = new Set(branches)\n    expandedPaths.value = expandedPaths.value.filter(path => alive.has(path))\n  },\n  { immediate: true },\n)\n\n/** Дерево держит раскрытие у себя и сообщает о нём событиями — слушаем оба. */\nfunction rememberExpanded(node: GrJsonNode): void {\n  if (!expandedPaths.value.includes(node.path))\n    expandedPaths.value = [...expandedPaths.value, node.path]\n}\n\nfunction forgetExpanded(node: GrJsonNode): void {\n  expandedPaths.value = expandedPaths.value.filter(path => path !== node.path)\n}\n\nfunction expandAll(): void {\n  expandedPaths.value = branchPaths(nodes.value)\n}\n\nfunction collapseAll(): void {\n  expandedPaths.value = []\n}\n\nconst query = ref('')\nconst treeRef = ref<{ filter: (value: string) => void } | null>(null)\n\nwatch(query, (value) => {\n  treeRef.value?.filter(value)\n})\n\nfunction filter(value: string): void {\n  query.value = value\n}\n\n/** Поиск идёт и по ключу, и по значению: в чужом ответе ищут то одно, то другое. */\nfunction matchKeyOrValue(value: string, data: GrJsonNode): boolean {\n  if (!value)\n    return true\n\n  const needle = value.toLowerCase()\n\n  return data.label.toLowerCase().includes(needle) || data.preview.toLowerCase().includes(needle)\n}\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  if (props.virtual && props.maxHeight === undefined && __GR_DEV__) {\n    console.warn('[GrJsonViewer] `virtual` без `maxHeight` не включает виртуализацию: окно считается от высоты области.')\n  }\n})\n\nconst showCopy = computed(() => resolvedCopyable.value && canCopy.value)\n\nconst copiedPath = ref<string | null>(null)\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\n/**\n * В буфер уходит **полное** значение узла, а не то, что видно: обрезка\n * принадлежит показу, и вставить её обратно нельзя.\n */\nasync function copyNode(node: GrJsonNode): Promise<void> {\n  const text = typeof node.value === 'string' ? node.value : JSON.stringify(node.value, null, 2) ?? String(node.value)\n\n  try {\n    await navigator.clipboard.writeText(text)\n  }\n  catch {\n    announce(t('gr.jsonViewer.copyFailed', 'Could not copy value'))\n    return\n  }\n\n  copiedPath.value = node.path\n  resetCopiedTimer()\n  copiedTimer = window.setTimeout(() => {\n    copiedPath.value = null\n    copiedTimer = null\n  }, 1200)\n\n  announce(t('gr.jsonViewer.copied', 'Value copied'))\n  emit('copy', { path: node.path, value: node.value })\n}\n\ndefineExpose({ filter, expandAll, collapseAll })\n</script>\n\n<template>\n  <div data-gr-json-viewer :class=\"jsonViewerRootClass\">\n    <div v-if=\"resolvedSearchable\" data-gr-json-viewer-toolbar :class=\"jsonViewerToolbarClass\">\n      <GrInput\n        v-model=\"query\"\n        :class=\"jsonViewerSearchClass\"\n        :size=\"resolvedSize\"\n        clearable\n        :placeholder=\"t('gr.jsonViewer.search', 'Search key or value')\"\n        :aria-label=\"t('gr.jsonViewer.search', 'Search key or value')\"\n      />\n\n      <GrButton variant=\"ghost\" :size=\"resolvedSize\" @click=\"expandAll\">\n        {{ t('gr.jsonViewer.expandAll', 'Expand all') }}\n      </GrButton>\n      <GrButton variant=\"ghost\" :size=\"resolvedSize\" @click=\"collapseAll\">\n        {{ t('gr.jsonViewer.collapseAll', 'Collapse all') }}\n      </GrButton>\n    </div>\n\n    <GrTree\n      ref=\"treeRef\"\n      :data=\"nodes\"\n      node-key=\"path\"\n      :props=\"{ children: 'children', label: 'label', isLeaf: 'isLeaf' }\"\n      :default-expanded-keys=\"expandedPaths\"\n      :filter-node-method=\"matchKeyOrValue\"\n      :content-class=\"jsonViewerContentClass\"\n      :virtual=\"virtual\"\n      :max-height=\"maxHeight\"\n      :size=\"resolvedSize\"\n      :aria-label=\"ariaLabel\"\n      @node-expand=\"rememberExpanded\"\n      @node-collapse=\"forgetExpanded\"\n    >\n      <template #default=\"{ data }\">\n        <span data-gr-json-viewer-row :class=\"[jsonViewerRowClass, jsonViewerGroupClass]\">\n          <span data-gr-json-viewer-key :class=\"jsonViewerKeyClass\">{{ data.label }}</span>\n          <span :class=\"jsonViewerPunctuationClass\">:</span>\n\n          <span\n            data-gr-json-viewer-value\n            :class=\"[jsonViewerValueClass, jsonValueClass[(data as GrJsonNode).kind]]\"\n          >\n            <slot name=\"leaf\" :node=\"data as GrJsonNode\">{{ (data as GrJsonNode).preview }}</slot>\n          </span>\n\n          <span\n            v-if=\"(data as GrJsonNode).kind === 'truncation'\"\n            :class=\"jsonViewerMutedClass\"\n          >{{ t('gr.jsonViewer.moreItems', 'more') }}</span>\n\n          <GrButton\n            v-if=\"showCopy && (data as GrJsonNode).kind !== 'truncation'\"\n            data-gr-json-viewer-copy\n            variant=\"ghost\"\n            size=\"xs\"\n            square\n            :class=\"jsonViewerCopyClass\"\n            :aria-label=\"t('gr.jsonViewer.copy', 'Copy value')\"\n            :title=\"t('gr.jsonViewer.copy', 'Copy value')\"\n            @click.stop=\"copyNode(data as GrJsonNode)\"\n          >\n            <component\n              :is=\"copiedPath === (data as GrJsonNode).path ? IconCheck : IconCopy\"\n              class=\"h-3.5 w-3.5\"\n              aria-hidden=\"true\"\n            />\n          </GrButton>\n        </span>\n      </template>\n    </GrTree>\n  </div>\n</template>\n","<script setup lang=\"ts\">\nimport { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue'\n\nimport GrButton from '../GrButton/GrButton.vue'\nimport GrInput from '../GrInput/GrInput.vue'\nimport GrTree from '../GrTree/GrTree.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 { branchPaths, jsonToNodes, pathsToDepth, type GrJsonNode } from './jsonToNodes'\nimport {\n  jsonValueClass,\n  jsonViewerContentClass,\n  jsonViewerCopyClass,\n  jsonViewerGroupClass,\n  jsonViewerKeyClass,\n  jsonViewerMutedClass,\n  jsonViewerPunctuationClass,\n  jsonViewerRootClass,\n  jsonViewerRowClass,\n  jsonViewerSearchClass,\n  jsonViewerToolbarClass,\n  jsonViewerValueClass,\n} from './grJsonViewerStyles'\n\nimport type { GrComponentSize } from '../shared/sizes'\n\nexport type { GrJsonNode, GrJsonNodeKind } from './jsonToNodes'\n\n/**\n * JSON со свёрткой по узлам, поиском по ключу и значению и копированием узла.\n *\n * Дерево, клавиатуру и виртуализацию несёт `GrTree`; здесь — разбор `unknown` в\n * узлы и разметка строки. Плоский текст целиком, который копируют в тикет, —\n * `GrCodeBlock`.\n */\nexport interface GrJsonViewerProps {\n  /** Показываемое значение. `unknown`, потому что приходит из БД или чужого сервиса. */\n  value: unknown\n  /** Подпись корня. По умолчанию `$` — так адресуют путь JSONPath и dev-tools. */\n  rootLabel?: string\n  /** Сколько уровней раскрыто изначально. */\n  defaultExpandDepth?: number\n  /**\n   * Длина строкового значения, после которой показ обрезается.\n   *\n   * Не косметика: запрос к модели с картинкой в base64 — это один лист на\n   * сотни тысяч символов, и ни свёртка, ни виртуализация по строкам его не\n   * берут. Копирование при этом отдаёт значение целиком.\n   */\n  maxStringLength?: number\n  /** Сколько элементов массива разбирать до заглушки «ещё N». */\n  maxArrayItems?: number\n  /** Поле поиска над деревом. Выключено — поиск остаётся на `filter()` из `defineExpose`. */\n  searchable?: boolean\n  /** Кнопка копирования узла в строке. */\n  copyable?: boolean\n  /** Оставлять в DOM только окно вокруг вьюпорта. Требует `maxHeight`. */\n  virtual?: boolean\n  /** Высота области просмотра: число — пиксели, строка — как есть. */\n  maxHeight?: string | number\n  /** Имя области для скринридера. Безымянное дерево объявляется просто «дерево». */\n  ariaLabel?: string\n  size?: GrComponentSize\n}\n\nexport interface GrJsonViewerEmits {\n  /** Узел скопирован: путь для тикета и полное значение. */\n  (e: 'copy', payload: { path: string, value: unknown }): void\n}\n\nconst props = withDefaults(defineProps<GrJsonViewerProps>(), {\n  // Дефолты живут в резолверах ниже: Vue подставил бы свой раньше, чем\n  // компонент заглянет в `GrConfigProvider`.\n  rootLabel: undefined,\n  defaultExpandDepth: undefined,\n  maxStringLength: undefined,\n  maxArrayItems: undefined,\n  searchable: undefined,\n  copyable: undefined,\n  virtual: false,\n  maxHeight: undefined,\n  ariaLabel: undefined,\n  size: undefined,\n})\n\nconst emit = defineEmits<GrJsonViewerEmits>()\n\ndefineSlots<{\n  /** Значение листа: ссылка, дата, денежная сумма — оформление знает приложение. */\n  leaf?: (props: { node: GrJsonNode }) => unknown\n}>()\n\nconst { t } = useGranularityTranslations()\nconst { announce } = useAnnouncer()\n\nconst resolvedSize = useGrComponentSize(() => props.size, { component: 'GrJsonViewer' })\nconst resolvedDepth = useGrComponentProp('GrJsonViewer', 'defaultExpandDepth', () => props.defaultExpandDepth, 1)\nconst resolvedMaxString = useGrComponentProp('GrJsonViewer', 'maxStringLength', () => props.maxStringLength, 200)\nconst resolvedMaxArray = useGrComponentProp('GrJsonViewer', 'maxArrayItems', () => props.maxArrayItems, 100)\nconst resolvedSearchable = useGrComponentProp('GrJsonViewer', 'searchable', () => props.searchable, true)\nconst resolvedCopyable = useGrComponentProp('GrJsonViewer', 'copyable', () => props.copyable, true)\n\nconst nodes = computed(() => jsonToNodes(props.value, {\n  rootLabel: props.rootLabel,\n  maxStringLength: resolvedMaxString.value,\n  maxArrayItems: resolvedMaxArray.value,\n}))\n\n/**\n * Раскрытие ведётся подстановкой набора путей.\n *\n * Контролируемого `expandedKeys` у `GrTree` нет, но `defaultExpandedKeys` —\n * не «начальное значение»: дерево следит за пропом и заменяет набор целиком.\n * Значит набор обязан быть зеркалом того, что открыто, а не только того, что\n * открыли кнопки: разойдись они — первое же обновление данных вернуло бы дерево\n * к памяти просмотрщика, то есть закрыло бы раскрытое руками.\n */\nconst expandedPaths = ref<string[]>([])\n\n/** Глубина по умолчанию раскладывается один раз — на первом дереве с ветками. */\nlet depthApplied = false\n\n/**\n * Обновление данных раскрытие не сбрасывает.\n *\n * Ответ сервиса опрашивают раз в N секунд, и объект каждый раз новый; сброс на\n * каждую смену складывал бы дерево под руками. Из набора выпадают только\n * исчезнувшие ветки, а глубина применяется заново лишь тогда, когда изменилась\n * она сама.\n */\nwatch(\n  [nodes, resolvedDepth],\n  ([list, depth], previous) => {\n    const branches = branchPaths(list)\n    const depthChanged = previous !== undefined && previous[1] !== depth\n\n    if (depthChanged || (!depthApplied && branches.length > 0)) {\n      depthApplied = branches.length > 0\n      expandedPaths.value = pathsToDepth(list, depth)\n      return\n    }\n\n    const alive = new Set(branches)\n    expandedPaths.value = expandedPaths.value.filter(path => alive.has(path))\n  },\n  { immediate: true },\n)\n\n/** Дерево держит раскрытие у себя и сообщает о нём событиями — слушаем оба. */\nfunction rememberExpanded(node: GrJsonNode): void {\n  if (!expandedPaths.value.includes(node.path))\n    expandedPaths.value = [...expandedPaths.value, node.path]\n}\n\nfunction forgetExpanded(node: GrJsonNode): void {\n  expandedPaths.value = expandedPaths.value.filter(path => path !== node.path)\n}\n\nfunction expandAll(): void {\n  expandedPaths.value = branchPaths(nodes.value)\n}\n\nfunction collapseAll(): void {\n  expandedPaths.value = []\n}\n\nconst query = ref('')\nconst treeRef = ref<{ filter: (value: string) => void } | null>(null)\n\nwatch(query, (value) => {\n  treeRef.value?.filter(value)\n})\n\nfunction filter(value: string): void {\n  query.value = value\n}\n\n/** Поиск идёт и по ключу, и по значению: в чужом ответе ищут то одно, то другое. */\nfunction matchKeyOrValue(value: string, data: GrJsonNode): boolean {\n  if (!value)\n    return true\n\n  const needle = value.toLowerCase()\n\n  return data.label.toLowerCase().includes(needle) || data.preview.toLowerCase().includes(needle)\n}\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  if (props.virtual && props.maxHeight === undefined && __GR_DEV__) {\n    console.warn('[GrJsonViewer] `virtual` без `maxHeight` не включает виртуализацию: окно считается от высоты области.')\n  }\n})\n\nconst showCopy = computed(() => resolvedCopyable.value && canCopy.value)\n\nconst copiedPath = ref<string | null>(null)\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\n/**\n * В буфер уходит **полное** значение узла, а не то, что видно: обрезка\n * принадлежит показу, и вставить её обратно нельзя.\n */\nasync function copyNode(node: GrJsonNode): Promise<void> {\n  const text = typeof node.value === 'string' ? node.value : JSON.stringify(node.value, null, 2) ?? String(node.value)\n\n  try {\n    await navigator.clipboard.writeText(text)\n  }\n  catch {\n    announce(t('gr.jsonViewer.copyFailed', 'Could not copy value'))\n    return\n  }\n\n  copiedPath.value = node.path\n  resetCopiedTimer()\n  copiedTimer = window.setTimeout(() => {\n    copiedPath.value = null\n    copiedTimer = null\n  }, 1200)\n\n  announce(t('gr.jsonViewer.copied', 'Value copied'))\n  emit('copy', { path: node.path, value: node.value })\n}\n\ndefineExpose({ filter, expandAll, collapseAll })\n</script>\n\n<template>\n  <div data-gr-json-viewer :class=\"jsonViewerRootClass\">\n    <div v-if=\"resolvedSearchable\" data-gr-json-viewer-toolbar :class=\"jsonViewerToolbarClass\">\n      <GrInput\n        v-model=\"query\"\n        :class=\"jsonViewerSearchClass\"\n        :size=\"resolvedSize\"\n        clearable\n        :placeholder=\"t('gr.jsonViewer.search', 'Search key or value')\"\n        :aria-label=\"t('gr.jsonViewer.search', 'Search key or value')\"\n      />\n\n      <GrButton variant=\"ghost\" :size=\"resolvedSize\" @click=\"expandAll\">\n        {{ t('gr.jsonViewer.expandAll', 'Expand all') }}\n      </GrButton>\n      <GrButton variant=\"ghost\" :size=\"resolvedSize\" @click=\"collapseAll\">\n        {{ t('gr.jsonViewer.collapseAll', 'Collapse all') }}\n      </GrButton>\n    </div>\n\n    <GrTree\n      ref=\"treeRef\"\n      :data=\"nodes\"\n      node-key=\"path\"\n      :props=\"{ children: 'children', label: 'label', isLeaf: 'isLeaf' }\"\n      :default-expanded-keys=\"expandedPaths\"\n      :filter-node-method=\"matchKeyOrValue\"\n      :content-class=\"jsonViewerContentClass\"\n      :virtual=\"virtual\"\n      :max-height=\"maxHeight\"\n      :size=\"resolvedSize\"\n      :aria-label=\"ariaLabel\"\n      @node-expand=\"rememberExpanded\"\n      @node-collapse=\"forgetExpanded\"\n    >\n      <template #default=\"{ data }\">\n        <span data-gr-json-viewer-row :class=\"[jsonViewerRowClass, jsonViewerGroupClass]\">\n          <span data-gr-json-viewer-key :class=\"jsonViewerKeyClass\">{{ data.label }}</span>\n          <span :class=\"jsonViewerPunctuationClass\">:</span>\n\n          <span\n            data-gr-json-viewer-value\n            :class=\"[jsonViewerValueClass, jsonValueClass[(data as GrJsonNode).kind]]\"\n          >\n            <slot name=\"leaf\" :node=\"data as GrJsonNode\">{{ (data as GrJsonNode).preview }}</slot>\n          </span>\n\n          <span\n            v-if=\"(data as GrJsonNode).kind === 'truncation'\"\n            :class=\"jsonViewerMutedClass\"\n          >{{ t('gr.jsonViewer.moreItems', 'more') }}</span>\n\n          <GrButton\n            v-if=\"showCopy && (data as GrJsonNode).kind !== 'truncation'\"\n            data-gr-json-viewer-copy\n            variant=\"ghost\"\n            size=\"xs\"\n            square\n            :class=\"jsonViewerCopyClass\"\n            :aria-label=\"t('gr.jsonViewer.copy', 'Copy value')\"\n            :title=\"t('gr.jsonViewer.copy', 'Copy value')\"\n            @click.stop=\"copyNode(data as GrJsonNode)\"\n          >\n            <component\n              :is=\"copiedPath === (data as GrJsonNode).path ? IconCheck : IconCopy\"\n              class=\"h-3.5 w-3.5\"\n              aria-hidden=\"true\"\n            />\n          </GrButton>\n        </span>\n      </template>\n    </GrTree>\n  </div>\n</template>\n"],"mappings":"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"}
+{"version":3,"file":"GrJsonViewer-CdlWMGnF.js","names":[],"sources":["../../../../src/components/GrJsonViewer/jsonToNodes.ts","../../../../src/components/GrJsonViewer/GrJsonViewer.vue","../../../../src/components/GrJsonViewer/GrJsonViewer.vue"],"sourcesContent":["/**\n * Разбор произвольного значения в узлы дерева.\n *\n * Компонент показывает данные из БД и от чужих сервисов, поэтому обход обязан\n * пережить всё: цикл, `BigInt`, функцию в поле, массив на десять тысяч записей,\n * строку в миллион символов. Уронить страницу он права не имеет.\n */\n\n/** Что за значение в узле. Решает и цвет, и то, раскрывается ли узел. */\nexport type GrJsonNodeKind\n  = | 'object'\n    | 'array'\n    | 'string'\n    | 'number'\n    | 'boolean'\n    | 'null'\n  /** Значения, которых в JSON не бывает: функция, символ, `undefined`. */\n    | 'unsupported'\n  /** Хвост обрезанного массива — «ещё N элементов». Своего значения не имеет. */\n    | 'truncation'\n\nexport type GrJsonNode = {\n  /** Читаемый адрес узла (`$.items[3].name`). Он же ключ для `GrTree`. */\n  path: string\n  /** Имя ключа или индекс. Показывается слева от двоеточия. */\n  label: string\n  kind: GrJsonNodeKind\n  /** Что видно в строке. У ветки — счётчик, у листа — значение, возможно обрезанное. */\n  preview: string\n  /** Полное значение. Копирование берёт его, а не `preview`. */\n  value: unknown\n  /** Показ обрезан: копирование всё равно отдаёт целое. */\n  truncated: boolean\n  isLeaf: boolean\n  children?: GrJsonNode[]\n}\n\nexport type GrJsonToNodesOptions = {\n  /** Подпись корня. */\n  rootLabel?: string\n  /** Длина строки, после которой значение обрезается в показе. */\n  maxStringLength?: number\n  /** Сколько элементов массива разбирать до заглушки «ещё N». */\n  maxArrayItems?: number\n}\n\n/** Маркер ветки, которая уже встречалась выше по этой же цепочке предков. */\nexport const CIRCULAR_MARKER = '[Circular]'\n\nconst DEFAULT_ROOT_LABEL = '$'\nconst DEFAULT_MAX_STRING_LENGTH = 200\nconst DEFAULT_MAX_ARRAY_ITEMS = 100\n\n/** Ключ, который можно дописать через точку, не сломав адрес. */\nconst PLAIN_KEY = /^[A-Za-z_$][\\w$]*$/\n\nfunction appendKey(parentPath: string, key: string): string {\n  return PLAIN_KEY.test(key) ? `${parentPath}.${key}` : `${parentPath}[${JSON.stringify(key)}]`\n}\n\n/**\n * Счётчик у ветки вместо её содержимого: свёрнутый узел обязан сказать, стоит\n * ли его раскрывать. Слово не склоняется — компонент не знает языка потребителя,\n * а число само по себе читается в любом.\n */\nfunction branchPreview(kind: 'object' | 'array', count: number): string {\n  return kind === 'array' ? `[${count}]` : `{${count}}`\n}\n\nfunction scalarPreview(value: unknown, maxStringLength: number): { preview: string, truncated: boolean } {\n  if (typeof value === 'string') {\n    if (value.length <= maxStringLength)\n      return { preview: JSON.stringify(value), truncated: false }\n\n    // Кавычка открывается и не закрывается намеренно: закрытая читалась бы как\n    // конец строки, а строка продолжается — её просто не показывают целиком.\n    return { preview: `${JSON.stringify(value.slice(0, maxStringLength))}…`, truncated: true }\n  }\n\n  // `BigInt` представления в JSON не имеет, и `JSON.stringify` на нём бросает.\n  if (typeof value === 'bigint')\n    return { preview: `${value}n`, truncated: false }\n\n  if (typeof value === 'function' || typeof value === 'symbol' || value === undefined)\n    return { preview: String(value), truncated: false }\n\n  return { preview: JSON.stringify(value) ?? String(value), truncated: false }\n}\n\nfunction kindOf(value: unknown): GrJsonNodeKind {\n  if (value === null)\n    return 'null'\n  if (Array.isArray(value))\n    return 'array'\n\n  switch (typeof value) {\n    case 'string': return 'string'\n    case 'number': return 'number'\n    case 'bigint': return 'number'\n    case 'boolean': return 'boolean'\n    case 'object': return 'object'\n    // `undefined`, функция и символ представления в JSON не имеют — узел\n    // остаётся, чтобы ключ не исчез из показа молча.\n    case 'undefined':\n    case 'function':\n    case 'symbol': return 'unsupported'\n  }\n\n  // Недостижимо: ветки выше покрывают `typeof` целиком. Оставлено ради вывода\n  // типов — без него TS не считает функцию всегда возвращающей.\n  return 'unsupported'\n}\n\ntype BuildContext = {\n  maxStringLength: number\n  maxArrayItems: number\n  /**\n   * Цепочка предков текущего узла, а не все встреченные объекты.\n   *\n   * Разница принципиальна и отличает обход дерева от `replacer` у\n   * `JSON.stringify`: тому стек недоступен, поэтому он метит `[Circular]` любую\n   * повторную ссылку — в том числе объект, честно положенный в данные дважды.\n   * Здесь стек есть, и маркер достаётся только настоящему циклу.\n   */\n  ancestors: Set<object>\n}\n\nfunction buildNode(label: string, path: string, value: unknown, context: BuildContext): GrJsonNode {\n  const kind = kindOf(value)\n\n  if (kind !== 'object' && kind !== 'array') {\n    const { preview, truncated } = scalarPreview(value, context.maxStringLength)\n\n    return { path, label, kind, preview, value, truncated, isLeaf: true }\n  }\n\n  const container = value as object\n\n  if (context.ancestors.has(container)) {\n    return { path, label, kind, preview: CIRCULAR_MARKER, value, truncated: false, isLeaf: true }\n  }\n\n  const entries = Array.isArray(value)\n    ? value.map((item, index) => [String(index), item] as const)\n    : Object.entries(container)\n\n  // Пустой объект и пустой массив — листья: раскрывать нечего, а ветка без\n  // детей рисует стрелку, которая ничего не делает.\n  if (entries.length === 0) {\n    return {\n      path,\n      label,\n      kind,\n      preview: Array.isArray(value) ? '[]' : '{}',\n      value,\n      truncated: false,\n      isLeaf: true,\n    }\n  }\n\n  context.ancestors.add(container)\n\n  const limit = Math.max(0, context.maxArrayItems)\n  const isOverLimit = Array.isArray(value) && entries.length > limit\n  const visible = isOverLimit ? entries.slice(0, limit) : entries\n\n  const children: GrJsonNode[] = visible.map(([key, item]) => buildNode(\n    key,\n    Array.isArray(value) ? `${path}[${key}]` : appendKey(path, key),\n    item,\n    context,\n  ))\n\n  if (isOverLimit) {\n    const rest = entries.length - limit\n\n    children.push({\n      path: `${path}[…]`,\n      label: '…',\n      kind: 'truncation',\n      preview: String(rest),\n      value: (value as unknown[]).slice(limit),\n      truncated: true,\n      isLeaf: true,\n    })\n  }\n\n  context.ancestors.delete(container)\n\n  return {\n    path,\n    label,\n    kind,\n    preview: branchPreview(kind, entries.length),\n    value,\n    truncated: isOverLimit,\n    isLeaf: false,\n    children,\n  }\n}\n\n/**\n * Значение → узлы дерева. Корень всегда один: даже скаляр на входе — это узел,\n * иначе дерево пришлось бы то показывать, то нет.\n */\nexport function jsonToNodes(value: unknown, options: GrJsonToNodesOptions = {}): GrJsonNode[] {\n  const context: BuildContext = {\n    maxStringLength: options.maxStringLength ?? DEFAULT_MAX_STRING_LENGTH,\n    maxArrayItems: options.maxArrayItems ?? DEFAULT_MAX_ARRAY_ITEMS,\n    ancestors: new Set(),\n  }\n\n  return [buildNode(options.rootLabel ?? DEFAULT_ROOT_LABEL, DEFAULT_ROOT_LABEL, value, context)]\n}\n\n/** Пути всех узлов до заданной глубины — ими задаётся начальная свёртка. */\nexport function pathsToDepth(nodes: GrJsonNode[], depth: number, level = 0): string[] {\n  if (level >= depth)\n    return []\n\n  return nodes.flatMap(node => (\n    node.children ? [node.path, ...pathsToDepth(node.children, depth, level + 1)] : []\n  ))\n}\n\n/** Пути всех веток — для «раскрыть всё». */\nexport function branchPaths(nodes: GrJsonNode[]): string[] {\n  return nodes.flatMap(node => (node.children ? [node.path, ...branchPaths(node.children)] : []))\n}\n","<script setup lang=\"ts\">\nimport { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue'\n\nimport GrButton from '../GrButton/GrButton.vue'\nimport GrInput from '../GrInput/GrInput.vue'\nimport GrTree from '../GrTree/GrTree.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 { branchPaths, jsonToNodes, pathsToDepth, type GrJsonNode } from './jsonToNodes'\nimport {\n  jsonValueClass,\n  jsonViewerContentClass,\n  jsonViewerCopyClass,\n  jsonViewerGroupClass,\n  jsonViewerKeyClass,\n  jsonViewerMutedClass,\n  jsonViewerPunctuationClass,\n  jsonViewerRootClass,\n  jsonViewerRowClass,\n  jsonViewerSearchClass,\n  jsonViewerToolbarClass,\n  jsonViewerValueClass,\n} from './grJsonViewerStyles'\n\nimport type { GrComponentSize } from '../shared/sizes'\n\nexport type { GrJsonNode, GrJsonNodeKind } from './jsonToNodes'\n\n/**\n * JSON со свёрткой по узлам, поиском по ключу и значению и копированием узла.\n *\n * Дерево, клавиатуру и виртуализацию несёт `GrTree`; здесь — разбор `unknown` в\n * узлы и разметка строки. Плоский текст целиком, который копируют в тикет, —\n * `GrCodeBlock`.\n */\nexport interface GrJsonViewerProps {\n  /** Показываемое значение. `unknown`, потому что приходит из БД или чужого сервиса. */\n  value: unknown\n  /** Подпись корня. По умолчанию `$` — так адресуют путь JSONPath и dev-tools. */\n  rootLabel?: string\n  /** Сколько уровней раскрыто изначально. */\n  defaultExpandDepth?: number\n  /**\n   * Длина строкового значения, после которой показ обрезается.\n   *\n   * Не косметика: запрос к модели с картинкой в base64 — это один лист на\n   * сотни тысяч символов, и ни свёртка, ни виртуализация по строкам его не\n   * берут. Копирование при этом отдаёт значение целиком.\n   */\n  maxStringLength?: number\n  /** Сколько элементов массива разбирать до заглушки «ещё N». */\n  maxArrayItems?: number\n  /** Поле поиска над деревом. Выключено — поиск остаётся на `filter()` из `defineExpose`. */\n  searchable?: boolean\n  /** Кнопка копирования узла в строке. */\n  copyable?: boolean\n  /** Оставлять в DOM только окно вокруг вьюпорта. Требует `maxHeight`. */\n  virtual?: boolean\n  /** Высота области просмотра: число — пиксели, строка — как есть. */\n  maxHeight?: string | number\n  /** Имя области для скринридера. Безымянное дерево объявляется просто «дерево». */\n  ariaLabel?: string\n  size?: GrComponentSize\n}\n\nexport interface GrJsonViewerEmits {\n  /** Узел скопирован: путь для тикета и полное значение. */\n  (e: 'copy', payload: { path: string, value: unknown }): void\n}\n\nconst props = withDefaults(defineProps<GrJsonViewerProps>(), {\n  // Дефолты живут в резолверах ниже: Vue подставил бы свой раньше, чем\n  // компонент заглянет в `GrConfigProvider`.\n  rootLabel: undefined,\n  defaultExpandDepth: undefined,\n  maxStringLength: undefined,\n  maxArrayItems: undefined,\n  searchable: undefined,\n  copyable: undefined,\n  virtual: false,\n  maxHeight: undefined,\n  ariaLabel: undefined,\n  size: undefined,\n})\n\nconst emit = defineEmits<GrJsonViewerEmits>()\n\ndefineSlots<{\n  /** Значение листа: ссылка, дата, денежная сумма — оформление знает приложение. */\n  leaf?: (props: { node: GrJsonNode }) => unknown\n}>()\n\nconst { t } = useGranularityTranslations()\nconst { announce } = useAnnouncer()\n\nconst resolvedSize = useGrComponentSize(() => props.size, { component: 'GrJsonViewer' })\nconst resolvedDepth = useGrComponentProp('GrJsonViewer', 'defaultExpandDepth', () => props.defaultExpandDepth, 1)\nconst resolvedMaxString = useGrComponentProp('GrJsonViewer', 'maxStringLength', () => props.maxStringLength, 200)\nconst resolvedMaxArray = useGrComponentProp('GrJsonViewer', 'maxArrayItems', () => props.maxArrayItems, 100)\nconst resolvedSearchable = useGrComponentProp('GrJsonViewer', 'searchable', () => props.searchable, true)\nconst resolvedCopyable = useGrComponentProp('GrJsonViewer', 'copyable', () => props.copyable, true)\n\nconst nodes = computed(() => jsonToNodes(props.value, {\n  rootLabel: props.rootLabel,\n  maxStringLength: resolvedMaxString.value,\n  maxArrayItems: resolvedMaxArray.value,\n}))\n\n/**\n * Раскрытие ведётся подстановкой набора путей.\n *\n * Контролируемого `expandedKeys` у `GrTree` нет, но `defaultExpandedKeys` —\n * не «начальное значение»: дерево следит за пропом и заменяет набор целиком.\n * Значит набор обязан быть зеркалом того, что открыто, а не только того, что\n * открыли кнопки: разойдись они — первое же обновление данных вернуло бы дерево\n * к памяти просмотрщика, то есть закрыло бы раскрытое руками.\n */\nconst expandedPaths = ref<string[]>([])\n\n/** Глубина по умолчанию раскладывается один раз — на первом дереве с ветками. */\nlet depthApplied = false\n\n/**\n * Обновление данных раскрытие не сбрасывает.\n *\n * Ответ сервиса опрашивают раз в N секунд, и объект каждый раз новый; сброс на\n * каждую смену складывал бы дерево под руками. Из набора выпадают только\n * исчезнувшие ветки, а глубина применяется заново лишь тогда, когда изменилась\n * она сама.\n */\nwatch(\n  [nodes, resolvedDepth],\n  ([list, depth], previous) => {\n    const branches = branchPaths(list)\n    const depthChanged = previous !== undefined && previous[1] !== depth\n\n    if (depthChanged || (!depthApplied && branches.length > 0)) {\n      depthApplied = branches.length > 0\n      expandedPaths.value = pathsToDepth(list, depth)\n      return\n    }\n\n    const alive = new Set(branches)\n    expandedPaths.value = expandedPaths.value.filter(path => alive.has(path))\n  },\n  { immediate: true },\n)\n\n/** Дерево держит раскрытие у себя и сообщает о нём событиями — слушаем оба. */\nfunction rememberExpanded(node: GrJsonNode): void {\n  if (!expandedPaths.value.includes(node.path))\n    expandedPaths.value = [...expandedPaths.value, node.path]\n}\n\nfunction forgetExpanded(node: GrJsonNode): void {\n  expandedPaths.value = expandedPaths.value.filter(path => path !== node.path)\n}\n\nfunction expandAll(): void {\n  expandedPaths.value = branchPaths(nodes.value)\n}\n\nfunction collapseAll(): void {\n  expandedPaths.value = []\n}\n\nconst query = ref('')\nconst treeRef = ref<{ filter: (value: string) => void } | null>(null)\n\nwatch(query, (value) => {\n  treeRef.value?.filter(value)\n})\n\nfunction filter(value: string): void {\n  query.value = value\n}\n\n/** Поиск идёт и по ключу, и по значению: в чужом ответе ищут то одно, то другое. */\nfunction matchKeyOrValue(value: string, data: GrJsonNode): boolean {\n  if (!value)\n    return true\n\n  const needle = value.toLowerCase()\n\n  return data.label.toLowerCase().includes(needle) || data.preview.toLowerCase().includes(needle)\n}\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  if (props.virtual && props.maxHeight === undefined && __GR_DEV__) {\n    console.warn('[GrJsonViewer] `virtual` без `maxHeight` не включает виртуализацию: окно считается от высоты области.')\n  }\n})\n\nconst showCopy = computed(() => resolvedCopyable.value && canCopy.value)\n\nconst copiedPath = ref<string | null>(null)\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\n/**\n * В буфер уходит **полное** значение узла, а не то, что видно: обрезка\n * принадлежит показу, и вставить её обратно нельзя.\n */\nasync function copyNode(node: GrJsonNode): Promise<void> {\n  const text = typeof node.value === 'string' ? node.value : JSON.stringify(node.value, null, 2) ?? String(node.value)\n\n  try {\n    await navigator.clipboard.writeText(text)\n  }\n  catch {\n    announce(t('gr.jsonViewer.copyFailed', 'Could not copy value'))\n    return\n  }\n\n  copiedPath.value = node.path\n  resetCopiedTimer()\n  copiedTimer = window.setTimeout(() => {\n    copiedPath.value = null\n    copiedTimer = null\n  }, 1200)\n\n  announce(t('gr.jsonViewer.copied', 'Value copied'))\n  emit('copy', { path: node.path, value: node.value })\n}\n\ndefineExpose({ filter, expandAll, collapseAll })\n</script>\n\n<template>\n  <div data-gr-json-viewer :class=\"jsonViewerRootClass\">\n    <div v-if=\"resolvedSearchable\" data-gr-json-viewer-toolbar :class=\"jsonViewerToolbarClass\">\n      <GrInput\n        v-model=\"query\"\n        :class=\"jsonViewerSearchClass\"\n        :size=\"resolvedSize\"\n        clearable\n        :placeholder=\"t('gr.jsonViewer.search', 'Search key or value')\"\n        :aria-label=\"t('gr.jsonViewer.search', 'Search key or value')\"\n      />\n\n      <GrButton variant=\"ghost\" :size=\"resolvedSize\" @click=\"expandAll\">\n        {{ t('gr.jsonViewer.expandAll', 'Expand all') }}\n      </GrButton>\n      <GrButton variant=\"ghost\" :size=\"resolvedSize\" @click=\"collapseAll\">\n        {{ t('gr.jsonViewer.collapseAll', 'Collapse all') }}\n      </GrButton>\n    </div>\n\n    <GrTree\n      ref=\"treeRef\"\n      :data=\"nodes\"\n      node-key=\"path\"\n      :props=\"{ children: 'children', label: 'label', isLeaf: 'isLeaf' }\"\n      :default-expanded-keys=\"expandedPaths\"\n      :filter-node-method=\"matchKeyOrValue\"\n      :content-class=\"jsonViewerContentClass\"\n      :virtual=\"virtual\"\n      :max-height=\"maxHeight\"\n      :size=\"resolvedSize\"\n      :aria-label=\"ariaLabel\"\n      @node-expand=\"rememberExpanded\"\n      @node-collapse=\"forgetExpanded\"\n    >\n      <template #default=\"{ data }\">\n        <span data-gr-json-viewer-row :class=\"[jsonViewerRowClass, jsonViewerGroupClass]\">\n          <span data-gr-json-viewer-key :class=\"jsonViewerKeyClass\">{{ data.label }}</span>\n          <span :class=\"jsonViewerPunctuationClass\">:</span>\n\n          <span\n            data-gr-json-viewer-value\n            :class=\"[jsonViewerValueClass, jsonValueClass[(data as GrJsonNode).kind]]\"\n          >\n            <slot name=\"leaf\" :node=\"data as GrJsonNode\">{{ (data as GrJsonNode).preview }}</slot>\n          </span>\n\n          <span\n            v-if=\"(data as GrJsonNode).kind === 'truncation'\"\n            :class=\"jsonViewerMutedClass\"\n          >{{ t('gr.jsonViewer.moreItems', 'more') }}</span>\n\n          <GrButton\n            v-if=\"showCopy && (data as GrJsonNode).kind !== 'truncation'\"\n            data-gr-json-viewer-copy\n            variant=\"ghost\"\n            size=\"xs\"\n            square\n            :class=\"jsonViewerCopyClass\"\n            :aria-label=\"t('gr.jsonViewer.copy', 'Copy value')\"\n            :title=\"t('gr.jsonViewer.copy', 'Copy value')\"\n            @click.stop=\"copyNode(data as GrJsonNode)\"\n          >\n            <component\n              :is=\"copiedPath === (data as GrJsonNode).path ? IconCheck : IconCopy\"\n              class=\"h-3.5 w-3.5\"\n              aria-hidden=\"true\"\n            />\n          </GrButton>\n        </span>\n      </template>\n    </GrTree>\n  </div>\n</template>\n","<script setup lang=\"ts\">\nimport { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue'\n\nimport GrButton from '../GrButton/GrButton.vue'\nimport GrInput from '../GrInput/GrInput.vue'\nimport GrTree from '../GrTree/GrTree.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 { branchPaths, jsonToNodes, pathsToDepth, type GrJsonNode } from './jsonToNodes'\nimport {\n  jsonValueClass,\n  jsonViewerContentClass,\n  jsonViewerCopyClass,\n  jsonViewerGroupClass,\n  jsonViewerKeyClass,\n  jsonViewerMutedClass,\n  jsonViewerPunctuationClass,\n  jsonViewerRootClass,\n  jsonViewerRowClass,\n  jsonViewerSearchClass,\n  jsonViewerToolbarClass,\n  jsonViewerValueClass,\n} from './grJsonViewerStyles'\n\nimport type { GrComponentSize } from '../shared/sizes'\n\nexport type { GrJsonNode, GrJsonNodeKind } from './jsonToNodes'\n\n/**\n * JSON со свёрткой по узлам, поиском по ключу и значению и копированием узла.\n *\n * Дерево, клавиатуру и виртуализацию несёт `GrTree`; здесь — разбор `unknown` в\n * узлы и разметка строки. Плоский текст целиком, который копируют в тикет, —\n * `GrCodeBlock`.\n */\nexport interface GrJsonViewerProps {\n  /** Показываемое значение. `unknown`, потому что приходит из БД или чужого сервиса. */\n  value: unknown\n  /** Подпись корня. По умолчанию `$` — так адресуют путь JSONPath и dev-tools. */\n  rootLabel?: string\n  /** Сколько уровней раскрыто изначально. */\n  defaultExpandDepth?: number\n  /**\n   * Длина строкового значения, после которой показ обрезается.\n   *\n   * Не косметика: запрос к модели с картинкой в base64 — это один лист на\n   * сотни тысяч символов, и ни свёртка, ни виртуализация по строкам его не\n   * берут. Копирование при этом отдаёт значение целиком.\n   */\n  maxStringLength?: number\n  /** Сколько элементов массива разбирать до заглушки «ещё N». */\n  maxArrayItems?: number\n  /** Поле поиска над деревом. Выключено — поиск остаётся на `filter()` из `defineExpose`. */\n  searchable?: boolean\n  /** Кнопка копирования узла в строке. */\n  copyable?: boolean\n  /** Оставлять в DOM только окно вокруг вьюпорта. Требует `maxHeight`. */\n  virtual?: boolean\n  /** Высота области просмотра: число — пиксели, строка — как есть. */\n  maxHeight?: string | number\n  /** Имя области для скринридера. Безымянное дерево объявляется просто «дерево». */\n  ariaLabel?: string\n  size?: GrComponentSize\n}\n\nexport interface GrJsonViewerEmits {\n  /** Узел скопирован: путь для тикета и полное значение. */\n  (e: 'copy', payload: { path: string, value: unknown }): void\n}\n\nconst props = withDefaults(defineProps<GrJsonViewerProps>(), {\n  // Дефолты живут в резолверах ниже: Vue подставил бы свой раньше, чем\n  // компонент заглянет в `GrConfigProvider`.\n  rootLabel: undefined,\n  defaultExpandDepth: undefined,\n  maxStringLength: undefined,\n  maxArrayItems: undefined,\n  searchable: undefined,\n  copyable: undefined,\n  virtual: false,\n  maxHeight: undefined,\n  ariaLabel: undefined,\n  size: undefined,\n})\n\nconst emit = defineEmits<GrJsonViewerEmits>()\n\ndefineSlots<{\n  /** Значение листа: ссылка, дата, денежная сумма — оформление знает приложение. */\n  leaf?: (props: { node: GrJsonNode }) => unknown\n}>()\n\nconst { t } = useGranularityTranslations()\nconst { announce } = useAnnouncer()\n\nconst resolvedSize = useGrComponentSize(() => props.size, { component: 'GrJsonViewer' })\nconst resolvedDepth = useGrComponentProp('GrJsonViewer', 'defaultExpandDepth', () => props.defaultExpandDepth, 1)\nconst resolvedMaxString = useGrComponentProp('GrJsonViewer', 'maxStringLength', () => props.maxStringLength, 200)\nconst resolvedMaxArray = useGrComponentProp('GrJsonViewer', 'maxArrayItems', () => props.maxArrayItems, 100)\nconst resolvedSearchable = useGrComponentProp('GrJsonViewer', 'searchable', () => props.searchable, true)\nconst resolvedCopyable = useGrComponentProp('GrJsonViewer', 'copyable', () => props.copyable, true)\n\nconst nodes = computed(() => jsonToNodes(props.value, {\n  rootLabel: props.rootLabel,\n  maxStringLength: resolvedMaxString.value,\n  maxArrayItems: resolvedMaxArray.value,\n}))\n\n/**\n * Раскрытие ведётся подстановкой набора путей.\n *\n * Контролируемого `expandedKeys` у `GrTree` нет, но `defaultExpandedKeys` —\n * не «начальное значение»: дерево следит за пропом и заменяет набор целиком.\n * Значит набор обязан быть зеркалом того, что открыто, а не только того, что\n * открыли кнопки: разойдись они — первое же обновление данных вернуло бы дерево\n * к памяти просмотрщика, то есть закрыло бы раскрытое руками.\n */\nconst expandedPaths = ref<string[]>([])\n\n/** Глубина по умолчанию раскладывается один раз — на первом дереве с ветками. */\nlet depthApplied = false\n\n/**\n * Обновление данных раскрытие не сбрасывает.\n *\n * Ответ сервиса опрашивают раз в N секунд, и объект каждый раз новый; сброс на\n * каждую смену складывал бы дерево под руками. Из набора выпадают только\n * исчезнувшие ветки, а глубина применяется заново лишь тогда, когда изменилась\n * она сама.\n */\nwatch(\n  [nodes, resolvedDepth],\n  ([list, depth], previous) => {\n    const branches = branchPaths(list)\n    const depthChanged = previous !== undefined && previous[1] !== depth\n\n    if (depthChanged || (!depthApplied && branches.length > 0)) {\n      depthApplied = branches.length > 0\n      expandedPaths.value = pathsToDepth(list, depth)\n      return\n    }\n\n    const alive = new Set(branches)\n    expandedPaths.value = expandedPaths.value.filter(path => alive.has(path))\n  },\n  { immediate: true },\n)\n\n/** Дерево держит раскрытие у себя и сообщает о нём событиями — слушаем оба. */\nfunction rememberExpanded(node: GrJsonNode): void {\n  if (!expandedPaths.value.includes(node.path))\n    expandedPaths.value = [...expandedPaths.value, node.path]\n}\n\nfunction forgetExpanded(node: GrJsonNode): void {\n  expandedPaths.value = expandedPaths.value.filter(path => path !== node.path)\n}\n\nfunction expandAll(): void {\n  expandedPaths.value = branchPaths(nodes.value)\n}\n\nfunction collapseAll(): void {\n  expandedPaths.value = []\n}\n\nconst query = ref('')\nconst treeRef = ref<{ filter: (value: string) => void } | null>(null)\n\nwatch(query, (value) => {\n  treeRef.value?.filter(value)\n})\n\nfunction filter(value: string): void {\n  query.value = value\n}\n\n/** Поиск идёт и по ключу, и по значению: в чужом ответе ищут то одно, то другое. */\nfunction matchKeyOrValue(value: string, data: GrJsonNode): boolean {\n  if (!value)\n    return true\n\n  const needle = value.toLowerCase()\n\n  return data.label.toLowerCase().includes(needle) || data.preview.toLowerCase().includes(needle)\n}\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  if (props.virtual && props.maxHeight === undefined && __GR_DEV__) {\n    console.warn('[GrJsonViewer] `virtual` без `maxHeight` не включает виртуализацию: окно считается от высоты области.')\n  }\n})\n\nconst showCopy = computed(() => resolvedCopyable.value && canCopy.value)\n\nconst copiedPath = ref<string | null>(null)\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\n/**\n * В буфер уходит **полное** значение узла, а не то, что видно: обрезка\n * принадлежит показу, и вставить её обратно нельзя.\n */\nasync function copyNode(node: GrJsonNode): Promise<void> {\n  const text = typeof node.value === 'string' ? node.value : JSON.stringify(node.value, null, 2) ?? String(node.value)\n\n  try {\n    await navigator.clipboard.writeText(text)\n  }\n  catch {\n    announce(t('gr.jsonViewer.copyFailed', 'Could not copy value'))\n    return\n  }\n\n  copiedPath.value = node.path\n  resetCopiedTimer()\n  copiedTimer = window.setTimeout(() => {\n    copiedPath.value = null\n    copiedTimer = null\n  }, 1200)\n\n  announce(t('gr.jsonViewer.copied', 'Value copied'))\n  emit('copy', { path: node.path, value: node.value })\n}\n\ndefineExpose({ filter, expandAll, collapseAll })\n</script>\n\n<template>\n  <div data-gr-json-viewer :class=\"jsonViewerRootClass\">\n    <div v-if=\"resolvedSearchable\" data-gr-json-viewer-toolbar :class=\"jsonViewerToolbarClass\">\n      <GrInput\n        v-model=\"query\"\n        :class=\"jsonViewerSearchClass\"\n        :size=\"resolvedSize\"\n        clearable\n        :placeholder=\"t('gr.jsonViewer.search', 'Search key or value')\"\n        :aria-label=\"t('gr.jsonViewer.search', 'Search key or value')\"\n      />\n\n      <GrButton variant=\"ghost\" :size=\"resolvedSize\" @click=\"expandAll\">\n        {{ t('gr.jsonViewer.expandAll', 'Expand all') }}\n      </GrButton>\n      <GrButton variant=\"ghost\" :size=\"resolvedSize\" @click=\"collapseAll\">\n        {{ t('gr.jsonViewer.collapseAll', 'Collapse all') }}\n      </GrButton>\n    </div>\n\n    <GrTree\n      ref=\"treeRef\"\n      :data=\"nodes\"\n      node-key=\"path\"\n      :props=\"{ children: 'children', label: 'label', isLeaf: 'isLeaf' }\"\n      :default-expanded-keys=\"expandedPaths\"\n      :filter-node-method=\"matchKeyOrValue\"\n      :content-class=\"jsonViewerContentClass\"\n      :virtual=\"virtual\"\n      :max-height=\"maxHeight\"\n      :size=\"resolvedSize\"\n      :aria-label=\"ariaLabel\"\n      @node-expand=\"rememberExpanded\"\n      @node-collapse=\"forgetExpanded\"\n    >\n      <template #default=\"{ data }\">\n        <span data-gr-json-viewer-row :class=\"[jsonViewerRowClass, jsonViewerGroupClass]\">\n          <span data-gr-json-viewer-key :class=\"jsonViewerKeyClass\">{{ data.label }}</span>\n          <span :class=\"jsonViewerPunctuationClass\">:</span>\n\n          <span\n            data-gr-json-viewer-value\n            :class=\"[jsonViewerValueClass, jsonValueClass[(data as GrJsonNode).kind]]\"\n          >\n            <slot name=\"leaf\" :node=\"data as GrJsonNode\">{{ (data as GrJsonNode).preview }}</slot>\n          </span>\n\n          <span\n            v-if=\"(data as GrJsonNode).kind === 'truncation'\"\n            :class=\"jsonViewerMutedClass\"\n          >{{ t('gr.jsonViewer.moreItems', 'more') }}</span>\n\n          <GrButton\n            v-if=\"showCopy && (data as GrJsonNode).kind !== 'truncation'\"\n            data-gr-json-viewer-copy\n            variant=\"ghost\"\n            size=\"xs\"\n            square\n            :class=\"jsonViewerCopyClass\"\n            :aria-label=\"t('gr.jsonViewer.copy', 'Copy value')\"\n            :title=\"t('gr.jsonViewer.copy', 'Copy value')\"\n            @click.stop=\"copyNode(data as GrJsonNode)\"\n          >\n            <component\n              :is=\"copiedPath === (data as GrJsonNode).path ? IconCheck : IconCopy\"\n              class=\"h-3.5 w-3.5\"\n              aria-hidden=\"true\"\n            />\n          </GrButton>\n        </span>\n      </template>\n    </GrTree>\n  </div>\n</template>\n"],"mappings":"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"}

package/dist/components/GrJsonViewer/index.js

@@ -1,3 +1,3 @@
-import { t as GrJsonViewer_default } from "./chunks/GrJsonViewer-CwCBMh4h.js";
+import { t as GrJsonViewer_default } from "./chunks/GrJsonViewer-CdlWMGnF.js";
 import { n as grJsonViewerSafelist, t as grJsonViewerConfig } from "../../chunks/config-DpAYidyY.js";
 export { GrJsonViewer_default as GrJsonViewer, GrJsonViewer_default as default, grJsonViewerConfig, grJsonViewerSafelist };

package/dist/components/GrScrollSpy/chunks/GrScrollSpy-CQCH3zLC.js

@@ -0,0 +1,207 @@
+import { n as useGranularityTranslations } from "../../../chunks/granularityI18n-BC5zsj_d.js";
+import { t as useScrollSpy } from "../../../chunks/useScrollSpy-CIJpw0RI.js";
+import { a as scrollSpyRootClass, i as scrollSpyListClass, r as grScrollSpyItemClass } from "../../../chunks/config-BkQ2jvXv.js";
+import { Fragment, computed, createCommentVNode, createElementBlock, createElementVNode, defineComponent, normalizeClass, normalizeStyle, openBlock, ref, renderList, renderSlot, toDisplayString, unref, watchEffect } from "vue";
+//#region src/components/GrScrollSpy/scrollSpyItems.ts
+/**
+* Значение пропа `offset` в CSS-длину для инлайновой переменной.
+*
+* Строка уходит как есть и намеренно не валидируется: `4rem`,
+* `var(--gr-navbar-height)`, `calc(…)` обязаны работать — иначе проп проигрывает
+* голому `style`. Отрицательное зажимается в ноль: линия активации выше верха
+* скроллпорта смысла не имеет.
+*/
+function scrollSpyOffsetLength(value) {
+	if (value == null) return void 0;
+	if (typeof value === "number") {
+		if (!Number.isFinite(value)) return void 0;
+		return `${Math.max(0, value)}px`;
+	}
+	const trimmed = value.trim();
+	return trimmed === "" ? void 0 : trimmed;
+}
+/**
+* Наш ли это клик.
+*
+* Пункт остаётся `<a href="#id">` ровно ради того, что браузер умеет с ссылкой
+* сам: `Cmd`-клик открывает в новой вкладке, средняя кнопка — тоже. Перехватив
+* их, компонент отнял бы у пользователя работающее поведение и ничего не дал
+* взамен.
+*/
+function anchorClickHandled(event) {
+	if (event.defaultPrevented || event.button !== 0) return false;
+	return !(event.metaKey || event.ctrlKey || event.shiftKey || event.altKey);
+}
+/**
+* Предки активного пункта — те разделы выше по списку, чей уровень мельче.
+*
+* Считается по документному порядку массива, а не по дереву: дерево позволило
+* бы объявить вложенность, противоречащую порядку разделов на странице.
+*/
+function ancestorSectionIds(sections, activeId) {
+	const ancestors = /* @__PURE__ */ new Set();
+	if (activeId === null) return ancestors;
+	const index = sections.findIndex((section) => section.id === activeId);
+	if (index < 0) return ancestors;
+	let level = sections[index].level ?? 1;
+	for (let cursor = index - 1; cursor >= 0; cursor -= 1) {
+		const candidate = sections[cursor].level ?? 1;
+		if (candidate < level) {
+			ancestors.add(sections[cursor].id);
+			level = candidate;
+		}
+	}
+	return ancestors;
+}
+//#endregion
+//#region src/components/GrScrollSpy/GrScrollSpy.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = ["aria-label"];
+var _hoisted_2 = ["aria-level", "data-level"];
+var _hoisted_3 = [
+	"href",
+	"data-active",
+	"data-ancestor",
+	"aria-current",
+	"onClick"
+];
+//#endregion
+//#region src/components/GrScrollSpy/GrScrollSpy.vue
+var GrScrollSpy_default = /* @__PURE__ */ defineComponent({
+	__name: "GrScrollSpy",
+	props: {
+		sections: {},
+		offset: { default: void 0 },
+		scroller: { default: void 0 },
+		ariaLabel: { default: void 0 },
+		updateHash: {
+			type: Boolean,
+			default: true
+		},
+		behavior: { default: void 0 },
+		focusTarget: {
+			type: Boolean,
+			default: true
+		},
+		disabled: {
+			type: Boolean,
+			default: false
+		}
+	},
+	emits: ["activeChange", "select"],
+	setup(__props, { expose: __expose, emit: __emit }) {
+		const props = __props;
+		const emit = __emit;
+		const { t } = useGranularityTranslations();
+		const rootEl = ref(null);
+		const label = computed(() => props.ariaLabel ?? t("gr.scrollSpy.label", "On this page"));
+		const rootStyle = computed(() => {
+			const length = scrollSpyOffsetLength(props.offset);
+			return length === void 0 ? void 0 : { "--gr-scroll-spy-offset": length };
+		});
+		/**
+		* Отступ берётся из вычисленного стиля, а не из пропа: браузер уже разрешил
+		* `4rem`, `var(...)` и `calc(...)` в used value, и свой парсер CSS не нужен.
+		* Заодно работает отступ, заданный каскадом, — а он и есть общий дефолт группы.
+		*
+		* Носитель — `scroll-margin-top` на корне: вычисленное значение этого свойства
+		* всегда абсолютная длина, а на само оглавление оно влияет ровно там, где нужно,
+		* и в ту же сторону — отодвигает его от края при переходе по якорю.
+		*/
+		function measureOffsetPx() {
+			const el = rootEl.value;
+			if (!el || typeof getComputedStyle !== "function") return 0;
+			const parsed = Number.parseFloat(getComputedStyle(el).scrollMarginTop);
+			return Number.isFinite(parsed) ? Math.max(0, parsed) : 0;
+		}
+		function resolveScroller() {
+			const value = props.scroller;
+			if (typeof value === "string") return typeof document === "undefined" ? null : document.querySelector(value);
+			return value ?? null;
+		}
+		const spy = useScrollSpy({
+			sections: () => Array.isArray(props.sections) ? props.sections.map((section) => section.id) : [],
+			scroller: resolveScroller,
+			offset: measureOffsetPx,
+			disabled: () => props.disabled,
+			onChange: (id) => emit("activeChange", id)
+		});
+		const ancestors = computed(() => ancestorSectionIds(props.sections ?? [], spy.active.value));
+		function itemState(id) {
+			if (spy.active.value === id) return "active";
+			return ancestors.value.has(id) ? "ancestor" : "idle";
+		}
+		/**
+		* `preventDefault()` отнимает у ссылки то, что браузер делает сам при переходе
+		* по якорю, — перенос точки последовательной навигации. Без компенсации
+		* клавиатурный пользователь после активации пункта продолжает `Tab` внутри
+		* оглавления, а не с начала раздела.
+		*
+		* `preventScroll` обязателен: иначе фокус телепортирует прокрутку и подерётся с
+		* плавной. Временный `tabindex` снимается по `blur` — чужой DOM остаётся чужим.
+		*/
+		function focusSection(id) {
+			const el = typeof document === "undefined" ? null : document.getElementById(id);
+			if (!el) return;
+			if (!el.hasAttribute("tabindex")) {
+				el.setAttribute("tabindex", "-1");
+				el.addEventListener("blur", () => el.removeAttribute("tabindex"), { once: true });
+			}
+			el.focus({ preventScroll: true });
+		}
+		function activate(id, event) {
+			spy.scrollTo(id, props.behavior === void 0 ? void 0 : { behavior: props.behavior });
+			if (props.updateHash && typeof history !== "undefined") history.replaceState(null, "", `#${id}`);
+			if (props.focusTarget) focusSection(id);
+			if (event) emit("select", id, event);
+		}
+		function onItemClick(id, event) {
+			if (!anchorClickHandled(event)) return;
+			event.preventDefault();
+			activate(id, event);
+		}
+		__expose({
+			active: spy.active,
+			scrollTo: spy.scrollTo,
+			refresh: spy.refresh
+		});
+		if (process.env.NODE_ENV !== "production") watchEffect(() => {
+			if (!Array.isArray(props.sections)) console.warn(`[granularity] GrScrollSpy: обязательный проп \`sections\` должен быть массивом — получено ${String(props.sections)}.`);
+		});
+		return (_ctx, _cache) => {
+			return Array.isArray(__props.sections) && __props.sections.length > 0 ? (openBlock(), createElementBlock("nav", {
+				key: 0,
+				ref_key: "rootEl",
+				ref: rootEl,
+				"data-gr-scroll-spy": "",
+				"aria-label": label.value,
+				class: normalizeClass(unref(scrollSpyRootClass)),
+				style: normalizeStyle(rootStyle.value)
+			}, [createElementVNode("ul", {
+				role: "list",
+				class: normalizeClass(unref(scrollSpyListClass))
+			}, [(openBlock(true), createElementBlock(Fragment, null, renderList(__props.sections, (section) => {
+				return openBlock(), createElementBlock("li", {
+					key: section.id,
+					"aria-level": section.level ?? 1,
+					"data-level": section.level ?? 1,
+					style: normalizeStyle({ paddingInlineStart: `calc(var(--gr-scroll-spy-indent, 0.75rem) * ${(section.level ?? 1) - 1})` })
+				}, [renderSlot(_ctx.$slots, "item", {
+					section,
+					active: unref(spy).active.value === section.id,
+					ancestor: ancestors.value.has(section.id),
+					activate: () => activate(section.id)
+				}, () => [createElementVNode("a", {
+					href: `#${section.id}`,
+					"data-gr-scroll-spy-item": "",
+					"data-active": unref(spy).active.value === section.id ? "true" : void 0,
+					"data-ancestor": ancestors.value.has(section.id) ? "true" : void 0,
+					"aria-current": unref(spy).active.value === section.id ? "location" : void 0,
+					class: normalizeClass(unref(grScrollSpyItemClass)(itemState(section.id))),
+					onClick: ($event) => onItemClick(section.id, $event)
+				}, toDisplayString(section.label), 11, _hoisted_3)])], 12, _hoisted_2);
+			}), 128))], 2)], 14, _hoisted_1)) : createCommentVNode("", true);
+		};
+	}
+});
+//#endregion
+export { GrScrollSpy_default as t };

package/dist/components/GrScrollSpy/chunks/GrScrollSpy-CQCH3zLC.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"GrScrollSpy-CQCH3zLC.js","names":[],"sources":["../../../../src/components/GrScrollSpy/scrollSpyItems.ts","../../../../src/components/GrScrollSpy/GrScrollSpy.vue","../../../../src/components/GrScrollSpy/GrScrollSpy.vue"],"sourcesContent":["/**\n * Арифметика пунктов оглавления: всё, что следует из того, что пункт —\n * **ссылка**, а не из положения прокрутки. Положение живёт в\n * `composables/internal/scrollSpyGeometry.ts`.\n */\n\n/** Раздел в оглавлении. */\nexport interface GrScrollSpySection {\n  id: string\n  label: string\n  /** Уровень вложенности, 1 — верхний. Влияет на отступ и цепочку предков. */\n  level?: number\n}\n\n/**\n * Значение пропа `offset` в CSS-длину для инлайновой переменной.\n *\n * Строка уходит как есть и намеренно не валидируется: `4rem`,\n * `var(--gr-navbar-height)`, `calc(…)` обязаны работать — иначе проп проигрывает\n * голому `style`. Отрицательное зажимается в ноль: линия активации выше верха\n * скроллпорта смысла не имеет.\n */\nexport function scrollSpyOffsetLength(value: number | string | undefined): string | undefined {\n  if (value == null)\n    return undefined\n\n  if (typeof value === 'number') {\n    if (!Number.isFinite(value))\n      return undefined\n\n    // Число выносится в переменную, чтобы литерал остался одним токеном: гейт\n    // safelist разбирает шаблонные строки по пробелам и обломок вида `value)}px`\n    // принимает за утилиту UnoCSS — которой он, по совпадению, и оказывается.\n    const px = Math.max(0, value)\n\n    return `${px}px`\n  }\n\n  const trimmed = value.trim()\n\n  return trimmed === '' ? undefined : trimmed\n}\n\n/**\n * Наш ли это клик.\n *\n * Пункт остаётся `<a href=\"#id\">` ровно ради того, что браузер умеет с ссылкой\n * сам: `Cmd`-клик открывает в новой вкладке, средняя кнопка — тоже. Перехватив\n * их, компонент отнял бы у пользователя работающее поведение и ничего не дал\n * взамен.\n */\nexport function anchorClickHandled(event: {\n  button: number\n  metaKey: boolean\n  ctrlKey: boolean\n  shiftKey: boolean\n  altKey: boolean\n  defaultPrevented: boolean\n}): boolean {\n  if (event.defaultPrevented || event.button !== 0)\n    return false\n\n  return !(event.metaKey || event.ctrlKey || event.shiftKey || event.altKey)\n}\n\n/**\n * Предки активного пункта — те разделы выше по списку, чей уровень мельче.\n *\n * Считается по документному порядку массива, а не по дереву: дерево позволило\n * бы объявить вложенность, противоречащую порядку разделов на странице.\n */\nexport function ancestorSectionIds(\n  sections: readonly GrScrollSpySection[],\n  activeId: string | null,\n): Set<string> {\n  const ancestors = new Set<string>()\n\n  if (activeId === null)\n    return ancestors\n\n  const index = sections.findIndex(section => section.id === activeId)\n\n  if (index < 0)\n    return ancestors\n\n  let level = sections[index].level ?? 1\n\n  for (let cursor = index - 1; cursor >= 0; cursor -= 1) {\n    const candidate = sections[cursor].level ?? 1\n\n    if (candidate < level) {\n      ancestors.add(sections[cursor].id)\n      level = candidate\n    }\n  }\n\n  return ancestors\n}\n","<script setup lang=\"ts\">\nimport { computed, ref, watchEffect } from 'vue'\n\nimport { useGranularityTranslations } from '../../internal/granularityI18n'\nimport { useScrollSpy } from '../../composables/useScrollSpy'\n\nimport type { GrScrollSpySection } from './scrollSpyItems'\nimport { anchorClickHandled, ancestorSectionIds, scrollSpyOffsetLength } from './scrollSpyItems'\nimport { grScrollSpyItemClass, scrollSpyListClass, scrollSpyRootClass } from './grScrollSpyStyles'\n\n/**\n * GrScrollSpy — оглавление длинной страницы, которое знает, до какого раздела\n * дочитали: активный пункт подсвечивается по прокрутке, клик по пункту ведёт к\n * разделу.\n *\n * Логика положения живёт в композабле `useScrollSpy` и доступна отдельно — этот\n * компонент добавляет к ней разметку, `aria-current` и всё, что следует из того,\n * что пункт является ссылкой.\n */\nexport interface GrScrollSpyProps {\n  /** Разделы в порядке их следования на странице. */\n  sections: GrScrollSpySection[]\n  /**\n   * Отступ линии активации от верха скроллпорта. Число — пиксели, строка — как\n   * есть. Почти всегда равен отступу липкой шапки (`--gr-affix-offset`).\n   */\n  offset?: number | string\n  /** Скроллпорт: элемент или селектор. Не задан — ищется от первого раздела. */\n  scroller?: HTMLElement | string | null\n  ariaLabel?: string\n  /** Обновлять `#hash` адреса при переходе. */\n  updateHash?: boolean\n  /** Плавность прокрутки. Под `prefers-reduced-motion` всегда мгновенная. */\n  behavior?: ScrollBehavior\n  /** Переносить фокус на раздел, как это делает переход по якорю. */\n  focusTarget?: boolean\n  disabled?: boolean\n}\n\nexport interface GrScrollSpyEmits {\n  (e: 'activeChange', id: string | null): void\n  (e: 'select', id: string, event: MouseEvent): void\n}\n\nconst props = withDefaults(defineProps<GrScrollSpyProps>(), {\n  offset: undefined,\n  scroller: undefined,\n  ariaLabel: undefined,\n  updateHash: true,\n  behavior: undefined,\n  focusTarget: true,\n  disabled: false,\n})\n\nconst emit = defineEmits<GrScrollSpyEmits>()\n\ndefineSlots<{\n  /** Пункт целиком. `activate` повторяет клик по нему. */\n  item?: (props: {\n    section: GrScrollSpySection\n    active: boolean\n    ancestor: boolean\n    activate: () => void\n  }) => unknown\n}>()\n\nconst { t } = useGranularityTranslations()\n\nconst rootEl = ref<HTMLElement | null>(null)\n\nconst label = computed(() => props.ariaLabel ?? t('gr.scrollSpy.label', 'On this page'))\n\nconst rootStyle = computed(() => {\n  const length = scrollSpyOffsetLength(props.offset)\n\n  return length === undefined ? undefined : { '--gr-scroll-spy-offset': length }\n})\n\n/**\n * Отступ берётся из вычисленного стиля, а не из пропа: браузер уже разрешил\n * `4rem`, `var(...)` и `calc(...)` в used value, и свой парсер CSS не нужен.\n * Заодно работает отступ, заданный каскадом, — а он и есть общий дефолт группы.\n *\n * Носитель — `scroll-margin-top` на корне: вычисленное значение этого свойства\n * всегда абсолютная длина, а на само оглавление оно влияет ровно там, где нужно,\n * и в ту же сторону — отодвигает его от края при переходе по якорю.\n */\nfunction measureOffsetPx(): number {\n  const el = rootEl.value\n\n  if (!el || typeof getComputedStyle !== 'function')\n    return 0\n\n  const parsed = Number.parseFloat(getComputedStyle(el).scrollMarginTop)\n\n  return Number.isFinite(parsed) ? Math.max(0, parsed) : 0\n}\n\nfunction resolveScroller(): HTMLElement | null {\n  const value = props.scroller\n\n  if (typeof value === 'string')\n    return typeof document === 'undefined' ? null : document.querySelector<HTMLElement>(value)\n\n  return value ?? null\n}\n\nconst spy = useScrollSpy({\n  sections: () => (Array.isArray(props.sections) ? props.sections.map(section => section.id) : []),\n  scroller: resolveScroller,\n  offset: measureOffsetPx,\n  disabled: () => props.disabled,\n  onChange: id => emit('activeChange', id),\n})\n\nconst ancestors = computed(() => ancestorSectionIds(props.sections ?? [], spy.active.value))\n\nfunction itemState(id: string): 'active' | 'ancestor' | 'idle' {\n  if (spy.active.value === id)\n    return 'active'\n\n  return ancestors.value.has(id) ? 'ancestor' : 'idle'\n}\n\n/**\n * `preventDefault()` отнимает у ссылки то, что браузер делает сам при переходе\n * по якорю, — перенос точки последовательной навигации. Без компенсации\n * клавиатурный пользователь после активации пункта продолжает `Tab` внутри\n * оглавления, а не с начала раздела.\n *\n * `preventScroll` обязателен: иначе фокус телепортирует прокрутку и подерётся с\n * плавной. Временный `tabindex` снимается по `blur` — чужой DOM остаётся чужим.\n */\nfunction focusSection(id: string): void {\n  const el = typeof document === 'undefined' ? null : document.getElementById(id)\n\n  if (!el)\n    return\n\n  if (!el.hasAttribute('tabindex')) {\n    el.setAttribute('tabindex', '-1')\n    el.addEventListener('blur', () => el.removeAttribute('tabindex'), { once: true })\n  }\n\n  el.focus({ preventScroll: true })\n}\n\nfunction activate(id: string, event?: MouseEvent): void {\n  spy.scrollTo(id, props.behavior === undefined ? undefined : { behavior: props.behavior })\n\n  if (props.updateHash && typeof history !== 'undefined') {\n    // `replaceState`, а не `pushState`: запись истории на каждый пункт\n    // превратила бы «Назад» в отмену прокрутки вместо возврата на страницу.\n    history.replaceState(null, '', `#${id}`)\n  }\n\n  if (props.focusTarget)\n    focusSection(id)\n\n  if (event)\n    emit('select', id, event)\n}\n\nfunction onItemClick(id: string, event: MouseEvent): void {\n  if (!anchorClickHandled(event))\n    return\n\n  event.preventDefault()\n  activate(id, event)\n}\n\ndefineExpose({\n  active: spy.active,\n  scrollTo: spy.scrollTo,\n  refresh: spy.refresh,\n})\n\nif (__GR_DEV__) {\n  watchEffect(() => {\n    if (!Array.isArray(props.sections)) {\n      console.warn(\n        `[granularity] GrScrollSpy: обязательный проп \\`sections\\` должен быть массивом — получено ${String(props.sections)}.`,\n      )\n    }\n  })\n}\n</script>\n\n<template>\n  <!--\n    Пустой список не рендерит ничего: пустой лендмарк `navigation` шумит в\n    списке ориентиров у диктора, не давая взамен ни одной цели.\n  -->\n  <nav\n    v-if=\"Array.isArray(sections) && sections.length > 0\"\n    ref=\"rootEl\"\n    data-gr-scroll-spy\n    :aria-label=\"label\"\n    :class=\"scrollSpyRootClass\"\n    :style=\"rootStyle\"\n  >\n    <!--\n      `role=\"list\"` обязателен: снятый `list-style` отнимает у списка роль в\n      WebKit, и оглавление перестаёт объявляться списком.\n    -->\n    <ul role=\"list\" :class=\"scrollSpyListClass\">\n      <li\n        v-for=\"section in sections\"\n        :key=\"section.id\"\n        :aria-level=\"section.level ?? 1\"\n        :data-level=\"section.level ?? 1\"\n        :style=\"{ paddingInlineStart: `calc(var(--gr-scroll-spy-indent, 0.75rem) * ${(section.level ?? 1) - 1})` }\"\n      >\n        <slot\n          name=\"item\"\n          :section=\"section\"\n          :active=\"spy.active.value === section.id\"\n          :ancestor=\"ancestors.has(section.id)\"\n          :activate=\"() => activate(section.id)\"\n        >\n          <a\n            :href=\"`#${section.id}`\"\n            data-gr-scroll-spy-item\n            :data-active=\"spy.active.value === section.id ? 'true' : undefined\"\n            :data-ancestor=\"ancestors.has(section.id) ? 'true' : undefined\"\n            :aria-current=\"spy.active.value === section.id ? 'location' : undefined\"\n            :class=\"grScrollSpyItemClass(itemState(section.id))\"\n            @click=\"onItemClick(section.id, $event)\"\n          >\n            {{ section.label }}\n          </a>\n        </slot>\n      </li>\n    </ul>\n  </nav>\n</template>\n","<script setup lang=\"ts\">\nimport { computed, ref, watchEffect } from 'vue'\n\nimport { useGranularityTranslations } from '../../internal/granularityI18n'\nimport { useScrollSpy } from '../../composables/useScrollSpy'\n\nimport type { GrScrollSpySection } from './scrollSpyItems'\nimport { anchorClickHandled, ancestorSectionIds, scrollSpyOffsetLength } from './scrollSpyItems'\nimport { grScrollSpyItemClass, scrollSpyListClass, scrollSpyRootClass } from './grScrollSpyStyles'\n\n/**\n * GrScrollSpy — оглавление длинной страницы, которое знает, до какого раздела\n * дочитали: активный пункт подсвечивается по прокрутке, клик по пункту ведёт к\n * разделу.\n *\n * Логика положения живёт в композабле `useScrollSpy` и доступна отдельно — этот\n * компонент добавляет к ней разметку, `aria-current` и всё, что следует из того,\n * что пункт является ссылкой.\n */\nexport interface GrScrollSpyProps {\n  /** Разделы в порядке их следования на странице. */\n  sections: GrScrollSpySection[]\n  /**\n   * Отступ линии активации от верха скроллпорта. Число — пиксели, строка — как\n   * есть. Почти всегда равен отступу липкой шапки (`--gr-affix-offset`).\n   */\n  offset?: number | string\n  /** Скроллпорт: элемент или селектор. Не задан — ищется от первого раздела. */\n  scroller?: HTMLElement | string | null\n  ariaLabel?: string\n  /** Обновлять `#hash` адреса при переходе. */\n  updateHash?: boolean\n  /** Плавность прокрутки. Под `prefers-reduced-motion` всегда мгновенная. */\n  behavior?: ScrollBehavior\n  /** Переносить фокус на раздел, как это делает переход по якорю. */\n  focusTarget?: boolean\n  disabled?: boolean\n}\n\nexport interface GrScrollSpyEmits {\n  (e: 'activeChange', id: string | null): void\n  (e: 'select', id: string, event: MouseEvent): void\n}\n\nconst props = withDefaults(defineProps<GrScrollSpyProps>(), {\n  offset: undefined,\n  scroller: undefined,\n  ariaLabel: undefined,\n  updateHash: true,\n  behavior: undefined,\n  focusTarget: true,\n  disabled: false,\n})\n\nconst emit = defineEmits<GrScrollSpyEmits>()\n\ndefineSlots<{\n  /** Пункт целиком. `activate` повторяет клик по нему. */\n  item?: (props: {\n    section: GrScrollSpySection\n    active: boolean\n    ancestor: boolean\n    activate: () => void\n  }) => unknown\n}>()\n\nconst { t } = useGranularityTranslations()\n\nconst rootEl = ref<HTMLElement | null>(null)\n\nconst label = computed(() => props.ariaLabel ?? t('gr.scrollSpy.label', 'On this page'))\n\nconst rootStyle = computed(() => {\n  const length = scrollSpyOffsetLength(props.offset)\n\n  return length === undefined ? undefined : { '--gr-scroll-spy-offset': length }\n})\n\n/**\n * Отступ берётся из вычисленного стиля, а не из пропа: браузер уже разрешил\n * `4rem`, `var(...)` и `calc(...)` в used value, и свой парсер CSS не нужен.\n * Заодно работает отступ, заданный каскадом, — а он и есть общий дефолт группы.\n *\n * Носитель — `scroll-margin-top` на корне: вычисленное значение этого свойства\n * всегда абсолютная длина, а на само оглавление оно влияет ровно там, где нужно,\n * и в ту же сторону — отодвигает его от края при переходе по якорю.\n */\nfunction measureOffsetPx(): number {\n  const el = rootEl.value\n\n  if (!el || typeof getComputedStyle !== 'function')\n    return 0\n\n  const parsed = Number.parseFloat(getComputedStyle(el).scrollMarginTop)\n\n  return Number.isFinite(parsed) ? Math.max(0, parsed) : 0\n}\n\nfunction resolveScroller(): HTMLElement | null {\n  const value = props.scroller\n\n  if (typeof value === 'string')\n    return typeof document === 'undefined' ? null : document.querySelector<HTMLElement>(value)\n\n  return value ?? null\n}\n\nconst spy = useScrollSpy({\n  sections: () => (Array.isArray(props.sections) ? props.sections.map(section => section.id) : []),\n  scroller: resolveScroller,\n  offset: measureOffsetPx,\n  disabled: () => props.disabled,\n  onChange: id => emit('activeChange', id),\n})\n\nconst ancestors = computed(() => ancestorSectionIds(props.sections ?? [], spy.active.value))\n\nfunction itemState(id: string): 'active' | 'ancestor' | 'idle' {\n  if (spy.active.value === id)\n    return 'active'\n\n  return ancestors.value.has(id) ? 'ancestor' : 'idle'\n}\n\n/**\n * `preventDefault()` отнимает у ссылки то, что браузер делает сам при переходе\n * по якорю, — перенос точки последовательной навигации. Без компенсации\n * клавиатурный пользователь после активации пункта продолжает `Tab` внутри\n * оглавления, а не с начала раздела.\n *\n * `preventScroll` обязателен: иначе фокус телепортирует прокрутку и подерётся с\n * плавной. Временный `tabindex` снимается по `blur` — чужой DOM остаётся чужим.\n */\nfunction focusSection(id: string): void {\n  const el = typeof document === 'undefined' ? null : document.getElementById(id)\n\n  if (!el)\n    return\n\n  if (!el.hasAttribute('tabindex')) {\n    el.setAttribute('tabindex', '-1')\n    el.addEventListener('blur', () => el.removeAttribute('tabindex'), { once: true })\n  }\n\n  el.focus({ preventScroll: true })\n}\n\nfunction activate(id: string, event?: MouseEvent): void {\n  spy.scrollTo(id, props.behavior === undefined ? undefined : { behavior: props.behavior })\n\n  if (props.updateHash && typeof history !== 'undefined') {\n    // `replaceState`, а не `pushState`: запись истории на каждый пункт\n    // превратила бы «Назад» в отмену прокрутки вместо возврата на страницу.\n    history.replaceState(null, '', `#${id}`)\n  }\n\n  if (props.focusTarget)\n    focusSection(id)\n\n  if (event)\n    emit('select', id, event)\n}\n\nfunction onItemClick(id: string, event: MouseEvent): void {\n  if (!anchorClickHandled(event))\n    return\n\n  event.preventDefault()\n  activate(id, event)\n}\n\ndefineExpose({\n  active: spy.active,\n  scrollTo: spy.scrollTo,\n  refresh: spy.refresh,\n})\n\nif (__GR_DEV__) {\n  watchEffect(() => {\n    if (!Array.isArray(props.sections)) {\n      console.warn(\n        `[granularity] GrScrollSpy: обязательный проп \\`sections\\` должен быть массивом — получено ${String(props.sections)}.`,\n      )\n    }\n  })\n}\n</script>\n\n<template>\n  <!--\n    Пустой список не рендерит ничего: пустой лендмарк `navigation` шумит в\n    списке ориентиров у диктора, не давая взамен ни одной цели.\n  -->\n  <nav\n    v-if=\"Array.isArray(sections) && sections.length > 0\"\n    ref=\"rootEl\"\n    data-gr-scroll-spy\n    :aria-label=\"label\"\n    :class=\"scrollSpyRootClass\"\n    :style=\"rootStyle\"\n  >\n    <!--\n      `role=\"list\"` обязателен: снятый `list-style` отнимает у списка роль в\n      WebKit, и оглавление перестаёт объявляться списком.\n    -->\n    <ul role=\"list\" :class=\"scrollSpyListClass\">\n      <li\n        v-for=\"section in sections\"\n        :key=\"section.id\"\n        :aria-level=\"section.level ?? 1\"\n        :data-level=\"section.level ?? 1\"\n        :style=\"{ paddingInlineStart: `calc(var(--gr-scroll-spy-indent, 0.75rem) * ${(section.level ?? 1) - 1})` }\"\n      >\n        <slot\n          name=\"item\"\n          :section=\"section\"\n          :active=\"spy.active.value === section.id\"\n          :ancestor=\"ancestors.has(section.id)\"\n          :activate=\"() => activate(section.id)\"\n        >\n          <a\n            :href=\"`#${section.id}`\"\n            data-gr-scroll-spy-item\n            :data-active=\"spy.active.value === section.id ? 'true' : undefined\"\n            :data-ancestor=\"ancestors.has(section.id) ? 'true' : undefined\"\n            :aria-current=\"spy.active.value === section.id ? 'location' : undefined\"\n            :class=\"grScrollSpyItemClass(itemState(section.id))\"\n            @click=\"onItemClick(section.id, $event)\"\n          >\n            {{ section.label }}\n          </a>\n        </slot>\n      </li>\n    </ul>\n  </nav>\n</template>\n"],"mappings":"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"}

package/dist/components/GrScrollSpy/index.js

@@ -0,0 +1,3 @@
+import { t as GrScrollSpy_default } from "./chunks/GrScrollSpy-CQCH3zLC.js";
+import { n as grScrollSpySafelist, t as grScrollSpyConfig } from "../../chunks/config-BkQ2jvXv.js";
+export { GrScrollSpy_default as GrScrollSpy, GrScrollSpy_default as default, grScrollSpyConfig, grScrollSpySafelist };