@feugene/granularity 0.11.0 → 0.13.0

package/dist/components/GrFormSection/chunks/GrFormSection-Ce21jcgo.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"GrFormSection-Ce21jcgo.js","names":[],"sources":["../../../../src/components/GrFormSection/GrFormSection.vue","../../../../src/components/GrFormSection/GrFormSection.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { useId } from 'vue'\n\n/**\n * GrFormSection — секция формы с заголовком, опциональным описанием и контентом.\n *\n * - `section` связан с заголовком через `aria-labelledby` и c описанием\n *   (если есть) через `aria-describedby` — для a11y.\n */\nexport interface GrFormSectionProps {\n  title: string\n  description?: string\n}\n\nwithDefaults(defineProps<GrFormSectionProps>(), {\n  description: undefined,\n})\n\nconst titleId = useId()\nconst descriptionId = useId()\n</script>\n\n<template>\n  <section\n    data-gr-form-section\n    class=\"grid gap-4\"\n    :aria-labelledby=\"titleId\"\n    :aria-describedby=\"description ? descriptionId : undefined\"\n  >\n    <div>\n      <div :id=\"titleId\" class=\"text-[14px] font-700\">\n        {{ title }}\n      </div>\n      <div\n        v-if=\"description\"\n        :id=\"descriptionId\"\n        class=\"mt-1 text-[13px] text-[var(--muted-fg)]\"\n      >\n        {{ description }}\n      </div>\n    </div>\n    <slot />\n  </section>\n</template>\n","<script setup lang=\"ts\">\nimport { useId } from 'vue'\n\n/**\n * GrFormSection — секция формы с заголовком, опциональным описанием и контентом.\n *\n * - `section` связан с заголовком через `aria-labelledby` и c описанием\n *   (если есть) через `aria-describedby` — для a11y.\n */\nexport interface GrFormSectionProps {\n  title: string\n  description?: string\n}\n\nwithDefaults(defineProps<GrFormSectionProps>(), {\n  description: undefined,\n})\n\nconst titleId = useId()\nconst descriptionId = useId()\n</script>\n\n<template>\n  <section\n    data-gr-form-section\n    class=\"grid gap-4\"\n    :aria-labelledby=\"titleId\"\n    :aria-describedby=\"description ? descriptionId : undefined\"\n  >\n    <div>\n      <div :id=\"titleId\" class=\"text-[14px] font-700\">\n        {{ title }}\n      </div>\n      <div\n        v-if=\"description\"\n        :id=\"descriptionId\"\n        class=\"mt-1 text-[13px] text-[var(--muted-fg)]\"\n      >\n        {{ description }}\n      </div>\n    </div>\n    <slot />\n  </section>\n</template>\n"],"mappings":";;;;;;;;;;;;;;EAkBA,MAAM,UAAU,MAAM;EACtB,MAAM,gBAAgB,MAAM;;uBAI1B,mBAmBU,WAAA;IAlBR,wBAAA;IACA,OAAM;IACL,mBAAiB,MAAA,OAAA;IACjB,oBAAkB,QAAA,cAAc,MAAA,aAAA,IAAgB,KAAA;OAEjD,mBAWM,OAAA,MAAA,CAVJ,mBAEM,OAAA;IAFA,IAAI,MAAA,OAAA;IAAS,OAAM;sBACpB,QAAA,KAAK,GAAA,GAAA,UAAA,GAGF,QAAA,eAAA,UAAA,GADR,mBAMM,OAAA;;IAJH,IAAI,MAAA,aAAA;IACL,OAAM;sBAEH,QAAA,WAAW,GAAA,GAAA,UAAA,KAAA,mBAAA,IAAA,IAAA,CAAA,CAAA,GAGlB,WAAQ,KAAA,QAAA,SAAA,CAAA,GAAA,GAAA,UAAA"}

package/dist/components/GrImageViewer/chunks/GrImageViewer-OCUIrNh2.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"GrImageViewer-OCUIrNh2.js","names":["$slots"],"sources":["../../../../src/components/GrImageViewer/GrImageViewer.vue","../../../../src/components/GrImageViewer/GrImageViewer.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, nextTick, onBeforeUnmount, ref, watch } from 'vue'\nimport { Dialog, DialogPanel, TransitionChild, TransitionRoot } from '@headlessui/vue'\n\nimport { useGranularityTranslations } from '../../internal/granularityI18n'\n\n/**\n * Usage:\n *\n * <GrImageViewer\n *   v-model=\"open\"\n *   :url-list=\"images\"\n *   :initial-index=\"0\"\n *   show-progress\n *   hide-on-click-modal\n * />\n */\nconst props = withDefaults(\n  defineProps<{\n    modelValue: boolean\n    urlList: string[]\n    initialIndex?: number\n    zoomRate?: number\n    minScale?: number\n    maxScale?: number\n    hideOnClickModal?: boolean\n    closeOnPressEscape?: boolean\n    showProgress?: boolean\n    showZoomValue?: boolean\n    /** Включает масштабирование колесом мыши / жестом на трекпаде. По умолчанию включено. */\n    wheelZoom?: boolean\n    /** Включает перетаскивание (pan) картинки мышью. При наведении курсор «рука». По умолчанию выключено. */\n    draggable?: boolean\n    zIndex?: number\n    /** i18n: aria-label кнопки закрытия. */\n    closeLabel?: string\n    /** i18n: aria-label кнопки «предыдущее изображение». */\n    prevLabel?: string\n    /** i18n: aria-label кнопки «следующее изображение». */\n    nextLabel?: string\n    /** i18n: aria-label кнопки «увеличить». */\n    zoomInLabel?: string\n    /** i18n: aria-label кнопки «уменьшить». */\n    zoomOutLabel?: string\n    /** i18n: aria-label кнопки «сбросить масштаб». */\n    resetZoomLabel?: string\n    /** i18n: aria-label кнопки «повернуть влево». */\n    rotateLeftLabel?: string\n    /** i18n: aria-label кнопки «повернуть вправо». */\n    rotateRightLabel?: string\n    /** i18n: текст в пустом состоянии (нет изображений). */\n    emptyText?: string\n  }>(),\n  {\n    initialIndex: 0,\n    zoomRate: 1.2,\n    minScale: 0.5,\n    maxScale: 5,\n    hideOnClickModal: false,\n    closeOnPressEscape: true,\n    showProgress: false,\n    showZoomValue: true,\n    wheelZoom: true,\n    draggable: false,\n    zIndex: undefined,\n    closeLabel: undefined,\n    prevLabel: undefined,\n    nextLabel: undefined,\n    zoomInLabel: undefined,\n    zoomOutLabel: undefined,\n    resetZoomLabel: undefined,\n    rotateLeftLabel: undefined,\n    rotateRightLabel: undefined,\n    emptyText: undefined,\n  },\n)\n\nconst { t } = useGranularityTranslations()\nconst resolvedCloseLabel = computed(() => props.closeLabel ?? t('gr.imageViewer.close', 'Close image viewer'))\nconst resolvedPrevLabel = computed(() => props.prevLabel ?? t('gr.imageViewer.prev', 'Previous image'))\nconst resolvedNextLabel = computed(() => props.nextLabel ?? t('gr.imageViewer.next', 'Next image'))\nconst resolvedZoomInLabel = computed(() => props.zoomInLabel ?? t('gr.imageViewer.zoomIn', 'Zoom in'))\nconst resolvedZoomOutLabel = computed(() => props.zoomOutLabel ?? t('gr.imageViewer.zoomOut', 'Zoom out'))\nconst resolvedResetZoomLabel = computed(() => props.resetZoomLabel ?? t('gr.imageViewer.resetZoom', 'Reset zoom'))\nconst resolvedRotateLeftLabel = computed(() => props.rotateLeftLabel ?? t('gr.imageViewer.rotateLeft', 'Rotate left'))\nconst resolvedRotateRightLabel = computed(() => props.rotateRightLabel ?? t('gr.imageViewer.rotateRight', 'Rotate right'))\nconst resolvedEmptyText = computed(() => props.emptyText ?? t('gr.imageViewer.empty', 'No image'))\n\nconst emit = defineEmits<{\n  (e: 'update:modelValue', value: boolean): void\n  (e: 'close'): void\n  (e: 'switch', newIndex: number): void\n  (e: 'rotate', deg: number): void\n}>()\n\ntype GrImageViewerToolbarActions = {\n  close: () => void\n  prev: () => void\n  next: () => void\n  zoomIn: () => void\n  zoomOut: () => void\n  reset: () => void\n  rotateLeft: () => void\n  rotateRight: () => void\n}\n\ntype GrImageViewerSlotProps = {\n  index: number\n  displayIndex: number\n  total: number\n  scale: number\n  rotation: number\n  /** Натуральный (исходный) размер картинки, px. 0 пока изображение не загружено. */\n  naturalWidth: number\n  naturalHeight: number\n  /** Фактический размер изображения на экране c учётом scale, px (footprint вдоль осей картинки). */\n  renderedWidth: number\n  renderedHeight: number\n  /** Реальный масштаб относительно натурального размера (доля): renderedWidth / naturalWidth. */\n  realScale: number\n  /** Реальный масштаб в процентах, отформатированный (например `67`). */\n  realScalePercent: string\n  actions: GrImageViewerToolbarActions\n}\n\nconst DEFAULT_Z_INDEX = 2000\nconst TRAILING_ZERO_DECIMAL_RE = /\\.0$/\n// Чувствительность масштабирования колесом/трекпадом: чем больше — тем резче реакция.\nconst WHEEL_ZOOM_SENSITIVITY = 0.0015\n// Сколько ms простоя после последнего wheel-события считаем «зум завершён»\n// (после этого возвращаем плавный CSS-переход).\nconst WHEEL_IDLE_MS = 120\n\nconst open = computed(() => props.modelValue)\nconst total = computed(() => props.urlList.length)\nconst hasImages = computed(() => total.value > 0)\n\nconst currentIndex = ref(0)\nconst scale = ref(1)\nconst rotation = ref(0)\nconst offsetX = ref(0)\nconst offsetY = ref(0)\n\nconst imageEl = ref<HTMLImageElement | null>(null)\n\n// Флаг активного зума колесом/трекпадом. Пока true — CSS-переход отключён,\n// чтобы непрерывное масштабирование не «наслаивалось» и не дёргалось.\nconst isWheelZooming = ref(false)\n\n// Накопленный deltaY между кадрами и id запланированного rAF.\nlet pendingWheelDelta = 0\nlet wheelFrameId: number | null = null\nlet wheelIdleTimer: ReturnType<typeof setTimeout> | null = null\n\n// Флаг активного перетаскивания (pan) картинки мышью.\nconst isDragging = ref(false)\n\n// Координаты указателя и offset на момент начала перетаскивания.\nlet dragStartX = 0\nlet dragStartY = 0\nlet dragOffsetStartX = 0\nlet dragOffsetStartY = 0\n\n// Натуральный (исходный) размер картинки, читается из `<img>` при загрузке.\nconst naturalWidth = ref(0)\nconst naturalHeight = ref(0)\n\n// Layout-размер вписанного (`object-contain`) изображения без учёта CSS transform/scale.\nconst fittedWidth = ref(0)\nconst fittedHeight = ref(0)\n\nlet resizeObserver: ResizeObserver | null = null\n\nconst currentUrl = computed(() => {\n  if (!hasImages.value) {\n    return undefined\n  }\n\n  return props.urlList[currentIndex.value]\n})\n\nconst displayIndex = computed(() => {\n  if (!hasImages.value) {\n    return 0\n  }\n\n  return currentIndex.value + 1\n})\n\nconst viewerStyle = computed(() => ({\n  zIndex: String(Number.isFinite(props.zIndex) ? props.zIndex : DEFAULT_Z_INDEX),\n}))\n\nconst imageStyle = computed(() => ({\n  transform: `translate3d(${offsetX.value}px, ${offsetY.value}px, 0) scale(${scale.value}) rotate(${rotation.value}deg)`,\n}))\n\n// Плавный CSS-переход transform только для дискретных зумов (кнопки/клавиши).\n// При непрерывном зуме колесом и при перетаскивании переход отключаем —\n// иначе картинка «дёргается»/наслаивается и тянется за курсором с задержкой.\nconst imageTransitionClass = computed(() =>\n  isWheelZooming.value || isDragging.value ? '' : 'transition-transform duration-150 ease-out',\n)\n\n// Курсор «рука» при наведении (grab) и при зажатии (grabbing), только если включён drag.\nconst imageCursorClass = computed(() => {\n  if (!props.draggable) {\n    return ''\n  }\n\n  return isDragging.value ? 'cursor-grabbing' : 'cursor-grab'\n})\n\nfunction formatPercent(value: number): string {\n  if (Number.isInteger(value)) {\n    return String(value)\n  }\n\n  return value.toFixed(1).replace(TRAILING_ZERO_DECIMAL_RE, '')\n}\n\nconst zoomValueText = computed(() => formatPercent(scale.value * 100))\n\n// Фактический размер изображения на экране вдоль его осей (footprint), c учётом scale.\nconst renderedWidth = computed(() => Math.round(fittedWidth.value * scale.value))\nconst renderedHeight = computed(() => Math.round(fittedHeight.value * scale.value))\n\n// Реальный масштаб относительно натурального размера (доля). Не зависит от rotation,\n// так как scale равномерный по осям картинки.\nconst realScale = computed(() => {\n  if (!naturalWidth.value) {\n    return 0\n  }\n\n  return (fittedWidth.value * scale.value) / naturalWidth.value\n})\n\nconst realScalePercent = computed(() => formatPercent(realScale.value * 100))\n\nconst toolbarSlotProps = computed<GrImageViewerSlotProps>(() => ({\n  index: currentIndex.value,\n  displayIndex: displayIndex.value,\n  total: total.value,\n  scale: scale.value,\n  rotation: rotation.value,\n  naturalWidth: naturalWidth.value,\n  naturalHeight: naturalHeight.value,\n  renderedWidth: renderedWidth.value,\n  renderedHeight: renderedHeight.value,\n  realScale: realScale.value,\n  realScalePercent: realScalePercent.value,\n  actions: toolbarActions,\n}))\n\nfunction normalizeIndex(value: number): number {\n  if (!hasImages.value) {\n    return 0\n  }\n\n  const normalized = Number.isFinite(value) ? Math.trunc(value) : 0\n\n  return ((normalized % total.value) + total.value) % total.value\n}\n\nfunction resetTransform(): void {\n  scale.value = 1\n  rotation.value = 0\n  offsetX.value = 0\n  offsetY.value = 0\n  isDragging.value = false\n}\n\nfunction resetImageMetrics(): void {\n  naturalWidth.value = 0\n  naturalHeight.value = 0\n  fittedWidth.value = 0\n  fittedHeight.value = 0\n}\n\nfunction measureFitted(): void {\n  const el = imageEl.value\n\n  if (!el) {\n    return\n  }\n\n  // offsetWidth/Height — layout-размер вписанного изображения, без учёта CSS transform.\n  fittedWidth.value = el.offsetWidth\n  fittedHeight.value = el.offsetHeight\n}\n\nfunction onImageLoad(event: Event): void {\n  const el = event.target as HTMLImageElement\n\n  naturalWidth.value = el.naturalWidth\n  naturalHeight.value = el.naturalHeight\n  measureFitted()\n}\n\nfunction startObservingImage(): void {\n  const el = imageEl.value\n\n  if (!el || typeof ResizeObserver === 'undefined') {\n    return\n  }\n\n  if (!resizeObserver) {\n    resizeObserver = new ResizeObserver(() => measureFitted())\n  }\n\n  resizeObserver.observe(el)\n\n  // Если картинка уже в кэше и `load` не сработал — считаем метрики сразу.\n  if (el.complete && el.naturalWidth) {\n    naturalWidth.value = el.naturalWidth\n    naturalHeight.value = el.naturalHeight\n  }\n\n  measureFitted()\n}\n\nfunction stopObservingImage(): void {\n  resizeObserver?.disconnect()\n}\n\nfunction setIndex(nextIndex: number, options?: { emitSwitch?: boolean }): void {\n  const normalizedIndex = normalizeIndex(nextIndex)\n\n  if (normalizedIndex === currentIndex.value) {\n    return\n  }\n\n  currentIndex.value = normalizedIndex\n  resetTransform()\n  resetImageMetrics()\n  endWheelZoom()\n\n  if (options?.emitSwitch !== false) {\n    emit('switch', normalizedIndex)\n  }\n}\n\nfunction syncIndexFromInitial(): void {\n  if (!hasImages.value) {\n    currentIndex.value = 0\n    return\n  }\n\n  currentIndex.value = normalizeIndex(props.initialIndex)\n  resetTransform()\n  resetImageMetrics()\n  endWheelZoom()\n}\n\nfunction preloadAt(index: number): void {\n  const url = props.urlList[index]\n\n  if (!url) {\n    return\n  }\n\n  const image = new Image()\n  image.decoding = 'async'\n  image.src = url\n}\n\nfunction closeViewer(): void {\n  emit('update:modelValue', false)\n  emit('close')\n}\n\nfunction prev(): void {\n  setIndex(currentIndex.value - 1)\n}\n\nfunction next(): void {\n  setIndex(currentIndex.value + 1)\n}\n\nfunction setScale(value: number): void {\n  const clamped = Math.min(props.maxScale, Math.max(props.minScale, value))\n\n  scale.value = Number(clamped.toFixed(4))\n}\n\nfunction zoomIn(): void {\n  setScale(scale.value * props.zoomRate)\n}\n\nfunction zoomOut(): void {\n  setScale(scale.value / props.zoomRate)\n}\n\nfunction cancelWheelFrame(): void {\n  if (wheelFrameId !== null) {\n    cancelAnimationFrame(wheelFrameId)\n    wheelFrameId = null\n  }\n}\n\nfunction endWheelZoom(): void {\n  if (wheelIdleTimer !== null) {\n    clearTimeout(wheelIdleTimer)\n    wheelIdleTimer = null\n  }\n\n  isWheelZooming.value = false\n  pendingWheelDelta = 0\n  cancelWheelFrame()\n}\n\n// Применяем накопленный за кадр deltaY одним обновлением scale — так рендер\n// происходит не чаще одного раза в кадр (без «дёрганья» от частых обновлений).\nfunction flushWheelZoom(): void {\n  wheelFrameId = null\n\n  const delta = pendingWheelDelta\n  pendingWheelDelta = 0\n\n  if (!delta) {\n    return\n  }\n\n  // Экспоненциальный шаг — плавно и одинаково ощущается и для колеса, и для трекпада.\n  // delta < 0 (от себя / scroll up) — приближение, delta > 0 — отдаление.\n  const factor = Math.exp(-delta * WHEEL_ZOOM_SENSITIVITY)\n\n  setScale(scale.value * factor)\n}\n\nfunction onWheel(event: WheelEvent): void {\n  if (!props.wheelZoom || !hasImages.value) {\n    return\n  }\n\n  // Не даём странице/оверлею проскроллиться — колесо отдаём под зум.\n  event.preventDefault()\n\n  // Во время непрерывного зума отключаем CSS-переход: плавность даёт само\n  // покадровое обновление, а transition на каждом микрошаге вызывает лаг/наслоение.\n  isWheelZooming.value = true\n\n  pendingWheelDelta += event.deltaY\n\n  if (wheelFrameId === null) {\n    wheelFrameId = requestAnimationFrame(flushWheelZoom)\n  }\n\n  if (wheelIdleTimer !== null) {\n    clearTimeout(wheelIdleTimer)\n  }\n\n  // По завершении жеста возвращаем плавный переход для последующих дискретных зумов.\n  wheelIdleTimer = setTimeout(() => {\n    wheelIdleTimer = null\n    isWheelZooming.value = false\n  }, WHEEL_IDLE_MS)\n}\n\nfunction onPointerDown(event: PointerEvent): void {\n  // Тянем только основной кнопкой и только если drag включён и есть картинка.\n  if (!props.draggable || !hasImages.value || event.button !== 0) {\n    return\n  }\n\n  event.preventDefault()\n\n  isDragging.value = true\n  dragStartX = event.clientX\n  dragStartY = event.clientY\n  dragOffsetStartX = offsetX.value\n  dragOffsetStartY = offsetY.value\n\n  // Захватываем указатель, чтобы движение/отпускание ловились даже за пределами картинки.\n  ;(event.currentTarget as Element).setPointerCapture?.(event.pointerId)\n}\n\nfunction onPointerMove(event: PointerEvent): void {\n  if (!isDragging.value) {\n    return\n  }\n\n  offsetX.value = dragOffsetStartX + (event.clientX - dragStartX)\n  offsetY.value = dragOffsetStartY + (event.clientY - dragStartY)\n}\n\nfunction onPointerUp(event: PointerEvent): void {\n  if (!isDragging.value) {\n    return\n  }\n\n  isDragging.value = false\n  ;(event.currentTarget as Element).releasePointerCapture?.(event.pointerId)\n}\n\nfunction rotateLeft(): void {\n  rotation.value -= 90\n  emit('rotate', rotation.value)\n}\n\nfunction rotateRight(): void {\n  rotation.value += 90\n  emit('rotate', rotation.value)\n}\n\nconst toolbarActions: GrImageViewerToolbarActions = {\n  close: closeViewer,\n  prev,\n  next,\n  zoomIn,\n  zoomOut,\n  reset: resetTransform,\n  rotateLeft,\n  rotateRight,\n}\n\nfunction onBackdropClick(): void {\n  if (!props.hideOnClickModal) {\n    return\n  }\n\n  closeViewer()\n}\n\nfunction onKeydown(event: KeyboardEvent): void {\n  switch (event.key) {\n    case 'Escape':\n      if (!props.closeOnPressEscape) {\n        return\n      }\n\n      event.preventDefault()\n      closeViewer()\n      return\n\n    case 'ArrowLeft':\n      event.preventDefault()\n      prev()\n      return\n\n    case 'ArrowRight':\n      event.preventDefault()\n      next()\n      return\n\n    case '+':\n    case '=':\n    case 'Add':\n      event.preventDefault()\n      zoomIn()\n      return\n\n    case '-':\n    case '_':\n    case 'Subtract':\n      event.preventDefault()\n      zoomOut()\n      return\n\n    case '0':\n      event.preventDefault()\n      resetTransform()\n      break\n\n    default:\n  }\n}\n\nwatch(\n  () => props.modelValue,\n  async (isOpen) => {\n    if (!isOpen) {\n      stopObservingImage()\n      endWheelZoom()\n      isDragging.value = false\n      return\n    }\n\n    syncIndexFromInitial()\n    await nextTick()\n    startObservingImage()\n  },\n  { immediate: true },\n)\n\nwatch(\n  () => props.initialIndex,\n  () => {\n    if (!props.modelValue) {\n      return\n    }\n\n    syncIndexFromInitial()\n  },\n)\n\nwatch(\n  () => props.urlList,\n  () => {\n    if (!props.modelValue) {\n      return\n    }\n\n    syncIndexFromInitial()\n  },\n  { deep: true },\n)\n\nwatch(\n  currentIndex,\n  (index) => {\n    if (!hasImages.value || total.value < 2) {\n      return\n    }\n\n    preloadAt(normalizeIndex(index - 1))\n    preloadAt(normalizeIndex(index + 1))\n  },\n  { immediate: true },\n)\n\nonBeforeUnmount(() => {\n  stopObservingImage()\n  endWheelZoom()\n})\n</script>\n\n<template>\n  <teleport to=\"body\">\n    <TransitionRoot :show=\"open\" as=\"template\">\n      <Dialog\n        as=\"div\"\n        class=\"fixed inset-0\"\n        :style=\"viewerStyle\"\n        role=\"dialog\"\n        aria-modal=\"true\"\n        :static=\"true\"\n        @keydown=\"onKeydown\"\n      >\n        <div class=\"fixed inset-0 overflow-hidden\">\n          <TransitionChild\n            as=\"template\"\n            enter=\"duration-150 ease-out\"\n            enter-from=\"opacity-0\"\n            enter-to=\"opacity-100\"\n            leave=\"duration-120 ease-in\"\n            leave-from=\"opacity-100\"\n            leave-to=\"opacity-0\"\n          >\n            <div\n              data-gr-image-viewer-overlay\n              class=\"absolute inset-0 bg-black/60 backdrop-blur-sm\"\n              aria-hidden=\"true\"\n              @click=\"onBackdropClick\"\n            />\n          </TransitionChild>\n\n          <TransitionChild\n            as=\"template\"\n            enter=\"duration-180 ease-out\"\n            enter-from=\"opacity-0 scale-98\"\n            enter-to=\"opacity-100 scale-100\"\n            leave=\"duration-130 ease-in\"\n            leave-from=\"opacity-100 scale-100\"\n            leave-to=\"opacity-0 scale-98\"\n          >\n            <DialogPanel\n              data-gr-image-viewer-panel\n              class=\"relative z-10 h-full w-full outline-none\"\n              tabindex=\"-1\"\n            >\n              <div class=\"pointer-events-none absolute inset-x-0 top-0 z-30 px-3 py-3 sm:px-6\">\n                <div class=\"pointer-events-auto flex items-center justify-between gap-3\">\n                  <div class=\"flex items-center gap-2\">\n                    <div\n                      v-if=\"showProgress\"\n                      data-gr-image-viewer-progress\n                      class=\"rounded-full bg-black/35 px-3 py-1 text-xs font-600 text-white/95 sm:text-sm\"\n                    >\n                      {{ displayIndex }} / {{ total }}\n                    </div>\n\n                    <div\n                      v-if=\"showZoomValue\"\n                      data-gr-image-viewer-zoom-value\n                      class=\"rounded-full bg-black/35 px-3 py-1 text-xs font-700 text-white/95 sm:text-sm\"\n                    >\n                      {{ zoomValueText }}%\n                    </div>\n                  </div>\n\n                  <button\n                    type=\"button\"\n                    data-gr-image-viewer-close\n                    :aria-label=\"resolvedCloseLabel\"\n                    class=\"h-11 w-11 flex items-center justify-center rounded-full border border-white/20 bg-black/35 text-white transition-colors hover:bg-black/55 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white/80\"\n                    @click=\"closeViewer\"\n                  >\n                    <span aria-hidden=\"true\" class=\"text-lg leading-none\">✕</span>\n                  </button>\n                </div>\n              </div>\n\n              <div\n                class=\"relative z-10 h-full w-full flex items-center justify-center px-16 py-16 sm:px-24 sm:py-20\"\n                @wheel=\"onWheel\"\n              >\n                <button\n                  v-if=\"total > 1\"\n                  type=\"button\"\n                  data-gr-image-viewer-prev\n                  :aria-label=\"resolvedPrevLabel\"\n                  class=\"absolute left-3 top-1/2 z-20 h-12 w-12 -translate-y-1/2 flex items-center justify-center rounded-full border border-white/20 bg-black/35 text-white transition-colors hover:bg-black/55 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white/80 sm:left-6\"\n                  @click=\"prev\"\n                >\n                  <span aria-hidden=\"true\" class=\"text-xl leading-none\">‹</span>\n                </button>\n\n                <button\n                  v-if=\"total > 1\"\n                  type=\"button\"\n                  data-gr-image-viewer-next\n                  :aria-label=\"resolvedNextLabel\"\n                  class=\"absolute right-3 top-1/2 z-20 h-12 w-12 -translate-y-1/2 flex items-center justify-center rounded-full border border-white/20 bg-black/35 text-white transition-colors hover:bg-black/55 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white/80 sm:right-6\"\n                  @click=\"next\"\n                >\n                  <span aria-hidden=\"true\" class=\"text-xl leading-none\">›</span>\n                </button>\n\n                <div class=\"h-full w-full flex items-center justify-center\">\n                  <img\n                    v-if=\"currentUrl\"\n                    ref=\"imageEl\"\n                    data-gr-image-viewer-image\n                    :src=\"currentUrl\"\n                    alt=\"\"\n                    draggable=\"false\"\n                    class=\"max-h-full max-w-full select-none object-contain will-change-transform\"\n                    :class=\"[imageTransitionClass, imageCursorClass]\"\n                    :style=\"imageStyle\"\n                    @load=\"onImageLoad\"\n                    @pointerdown=\"onPointerDown\"\n                    @pointermove=\"onPointerMove\"\n                    @pointerup=\"onPointerUp\"\n                    @pointercancel=\"onPointerUp\"\n                  >\n\n                  <div\n                    v-else\n                    class=\"rounded-[var(--gr-radius-xl)] border border-white/20 bg-black/25 px-4 py-3 text-sm text-white/80\"\n                  >\n                    {{ resolvedEmptyText }}\n                  </div>\n                </div>\n              </div>\n\n              <div class=\"pointer-events-none absolute inset-x-0 bottom-0 z-30 px-3 pb-3 sm:px-6 sm:pb-6\">\n                <div class=\"pointer-events-auto mx-auto w-full max-w-max\">\n                  <slot\n                    name=\"toolbar\"\n                    v-bind=\"toolbarSlotProps\"\n                  >\n                    <div class=\"rounded-full border border-white/20 bg-black/35 p-1 backdrop-blur-sm flex items-center gap-1\">\n                      <button\n                        type=\"button\"\n                        data-gr-image-viewer-zoom-out\n                        :aria-label=\"resolvedZoomOutLabel\"\n                        class=\"h-11 min-w-11 px-2 flex items-center justify-center rounded-full text-sm font-600 text-white transition-colors hover:bg-white/10 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white/80\"\n                        @click=\"zoomOut\"\n                      >\n                        −\n                      </button>\n\n                      <button\n                        type=\"button\"\n                        data-gr-image-viewer-zoom-reset\n                        :aria-label=\"resolvedResetZoomLabel\"\n                        class=\"h-11 min-w-11 px-3 flex items-center justify-center rounded-full text-xs font-700 text-white transition-colors hover:bg-white/10 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white/80\"\n                        @click=\"resetTransform\"\n                      >\n                        100%\n                      </button>\n\n                      <button\n                        type=\"button\"\n                        data-gr-image-viewer-zoom-in\n                        :aria-label=\"resolvedZoomInLabel\"\n                        class=\"h-11 min-w-11 px-2 flex items-center justify-center rounded-full text-sm font-600 text-white transition-colors hover:bg-white/10 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white/80\"\n                        @click=\"zoomIn\"\n                      >\n                        +\n                      </button>\n\n                      <template v-if=\"$slots['toolbar-actions']\">\n                        <div class=\"mx-1 h-6 w-px bg-white/25\" aria-hidden=\"true\" />\n\n                        <slot\n                          name=\"toolbar-actions\"\n                          v-bind=\"toolbarSlotProps\"\n                        />\n\n                        <div class=\"mx-1 h-6 w-px bg-white/25\" aria-hidden=\"true\" />\n                      </template>\n\n                      <div v-else class=\"mx-1 h-6 w-px bg-white/25\" aria-hidden=\"true\" />\n\n                      <button\n                        type=\"button\"\n                        data-gr-image-viewer-rotate-left\n                        :aria-label=\"resolvedRotateLeftLabel\"\n                        class=\"h-11 min-w-11 px-2 flex items-center justify-center rounded-full text-sm font-600 text-white transition-colors hover:bg-white/10 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white/80\"\n                        @click=\"rotateLeft\"\n                      >\n                        ↺\n                      </button>\n\n                      <button\n                        type=\"button\"\n                        data-gr-image-viewer-rotate-right\n                        :aria-label=\"resolvedRotateRightLabel\"\n                        class=\"h-11 min-w-11 px-2 flex items-center justify-center rounded-full text-sm font-600 text-white transition-colors hover:bg-white/10 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white/80\"\n                        @click=\"rotateRight\"\n                      >\n                        ↻\n                      </button>\n                    </div>\n                  </slot>\n                </div>\n              </div>\n            </DialogPanel>\n          </TransitionChild>\n        </div>\n      </Dialog>\n    </TransitionRoot>\n  </teleport>\n</template>","<script setup lang=\"ts\">\nimport { computed, nextTick, onBeforeUnmount, ref, watch } from 'vue'\nimport { Dialog, DialogPanel, TransitionChild, TransitionRoot } from '@headlessui/vue'\n\nimport { useGranularityTranslations } from '../../internal/granularityI18n'\n\n/**\n * Usage:\n *\n * <GrImageViewer\n *   v-model=\"open\"\n *   :url-list=\"images\"\n *   :initial-index=\"0\"\n *   show-progress\n *   hide-on-click-modal\n * />\n */\nconst props = withDefaults(\n  defineProps<{\n    modelValue: boolean\n    urlList: string[]\n    initialIndex?: number\n    zoomRate?: number\n    minScale?: number\n    maxScale?: number\n    hideOnClickModal?: boolean\n    closeOnPressEscape?: boolean\n    showProgress?: boolean\n    showZoomValue?: boolean\n    /** Включает масштабирование колесом мыши / жестом на трекпаде. По умолчанию включено. */\n    wheelZoom?: boolean\n    /** Включает перетаскивание (pan) картинки мышью. При наведении курсор «рука». По умолчанию выключено. */\n    draggable?: boolean\n    zIndex?: number\n    /** i18n: aria-label кнопки закрытия. */\n    closeLabel?: string\n    /** i18n: aria-label кнопки «предыдущее изображение». */\n    prevLabel?: string\n    /** i18n: aria-label кнопки «следующее изображение». */\n    nextLabel?: string\n    /** i18n: aria-label кнопки «увеличить». */\n    zoomInLabel?: string\n    /** i18n: aria-label кнопки «уменьшить». */\n    zoomOutLabel?: string\n    /** i18n: aria-label кнопки «сбросить масштаб». */\n    resetZoomLabel?: string\n    /** i18n: aria-label кнопки «повернуть влево». */\n    rotateLeftLabel?: string\n    /** i18n: aria-label кнопки «повернуть вправо». */\n    rotateRightLabel?: string\n    /** i18n: текст в пустом состоянии (нет изображений). */\n    emptyText?: string\n  }>(),\n  {\n    initialIndex: 0,\n    zoomRate: 1.2,\n    minScale: 0.5,\n    maxScale: 5,\n    hideOnClickModal: false,\n    closeOnPressEscape: true,\n    showProgress: false,\n    showZoomValue: true,\n    wheelZoom: true,\n    draggable: false,\n    zIndex: undefined,\n    closeLabel: undefined,\n    prevLabel: undefined,\n    nextLabel: undefined,\n    zoomInLabel: undefined,\n    zoomOutLabel: undefined,\n    resetZoomLabel: undefined,\n    rotateLeftLabel: undefined,\n    rotateRightLabel: undefined,\n    emptyText: undefined,\n  },\n)\n\nconst { t } = useGranularityTranslations()\nconst resolvedCloseLabel = computed(() => props.closeLabel ?? t('gr.imageViewer.close', 'Close image viewer'))\nconst resolvedPrevLabel = computed(() => props.prevLabel ?? t('gr.imageViewer.prev', 'Previous image'))\nconst resolvedNextLabel = computed(() => props.nextLabel ?? t('gr.imageViewer.next', 'Next image'))\nconst resolvedZoomInLabel = computed(() => props.zoomInLabel ?? t('gr.imageViewer.zoomIn', 'Zoom in'))\nconst resolvedZoomOutLabel = computed(() => props.zoomOutLabel ?? t('gr.imageViewer.zoomOut', 'Zoom out'))\nconst resolvedResetZoomLabel = computed(() => props.resetZoomLabel ?? t('gr.imageViewer.resetZoom', 'Reset zoom'))\nconst resolvedRotateLeftLabel = computed(() => props.rotateLeftLabel ?? t('gr.imageViewer.rotateLeft', 'Rotate left'))\nconst resolvedRotateRightLabel = computed(() => props.rotateRightLabel ?? t('gr.imageViewer.rotateRight', 'Rotate right'))\nconst resolvedEmptyText = computed(() => props.emptyText ?? t('gr.imageViewer.empty', 'No image'))\n\nconst emit = defineEmits<{\n  (e: 'update:modelValue', value: boolean): void\n  (e: 'close'): void\n  (e: 'switch', newIndex: number): void\n  (e: 'rotate', deg: number): void\n}>()\n\ntype GrImageViewerToolbarActions = {\n  close: () => void\n  prev: () => void\n  next: () => void\n  zoomIn: () => void\n  zoomOut: () => void\n  reset: () => void\n  rotateLeft: () => void\n  rotateRight: () => void\n}\n\ntype GrImageViewerSlotProps = {\n  index: number\n  displayIndex: number\n  total: number\n  scale: number\n  rotation: number\n  /** Натуральный (исходный) размер картинки, px. 0 пока изображение не загружено. */\n  naturalWidth: number\n  naturalHeight: number\n  /** Фактический размер изображения на экране c учётом scale, px (footprint вдоль осей картинки). */\n  renderedWidth: number\n  renderedHeight: number\n  /** Реальный масштаб относительно натурального размера (доля): renderedWidth / naturalWidth. */\n  realScale: number\n  /** Реальный масштаб в процентах, отформатированный (например `67`). */\n  realScalePercent: string\n  actions: GrImageViewerToolbarActions\n}\n\nconst DEFAULT_Z_INDEX = 2000\nconst TRAILING_ZERO_DECIMAL_RE = /\\.0$/\n// Чувствительность масштабирования колесом/трекпадом: чем больше — тем резче реакция.\nconst WHEEL_ZOOM_SENSITIVITY = 0.0015\n// Сколько ms простоя после последнего wheel-события считаем «зум завершён»\n// (после этого возвращаем плавный CSS-переход).\nconst WHEEL_IDLE_MS = 120\n\nconst open = computed(() => props.modelValue)\nconst total = computed(() => props.urlList.length)\nconst hasImages = computed(() => total.value > 0)\n\nconst currentIndex = ref(0)\nconst scale = ref(1)\nconst rotation = ref(0)\nconst offsetX = ref(0)\nconst offsetY = ref(0)\n\nconst imageEl = ref<HTMLImageElement | null>(null)\n\n// Флаг активного зума колесом/трекпадом. Пока true — CSS-переход отключён,\n// чтобы непрерывное масштабирование не «наслаивалось» и не дёргалось.\nconst isWheelZooming = ref(false)\n\n// Накопленный deltaY между кадрами и id запланированного rAF.\nlet pendingWheelDelta = 0\nlet wheelFrameId: number | null = null\nlet wheelIdleTimer: ReturnType<typeof setTimeout> | null = null\n\n// Флаг активного перетаскивания (pan) картинки мышью.\nconst isDragging = ref(false)\n\n// Координаты указателя и offset на момент начала перетаскивания.\nlet dragStartX = 0\nlet dragStartY = 0\nlet dragOffsetStartX = 0\nlet dragOffsetStartY = 0\n\n// Натуральный (исходный) размер картинки, читается из `<img>` при загрузке.\nconst naturalWidth = ref(0)\nconst naturalHeight = ref(0)\n\n// Layout-размер вписанного (`object-contain`) изображения без учёта CSS transform/scale.\nconst fittedWidth = ref(0)\nconst fittedHeight = ref(0)\n\nlet resizeObserver: ResizeObserver | null = null\n\nconst currentUrl = computed(() => {\n  if (!hasImages.value) {\n    return undefined\n  }\n\n  return props.urlList[currentIndex.value]\n})\n\nconst displayIndex = computed(() => {\n  if (!hasImages.value) {\n    return 0\n  }\n\n  return currentIndex.value + 1\n})\n\nconst viewerStyle = computed(() => ({\n  zIndex: String(Number.isFinite(props.zIndex) ? props.zIndex : DEFAULT_Z_INDEX),\n}))\n\nconst imageStyle = computed(() => ({\n  transform: `translate3d(${offsetX.value}px, ${offsetY.value}px, 0) scale(${scale.value}) rotate(${rotation.value}deg)`,\n}))\n\n// Плавный CSS-переход transform только для дискретных зумов (кнопки/клавиши).\n// При непрерывном зуме колесом и при перетаскивании переход отключаем —\n// иначе картинка «дёргается»/наслаивается и тянется за курсором с задержкой.\nconst imageTransitionClass = computed(() =>\n  isWheelZooming.value || isDragging.value ? '' : 'transition-transform duration-150 ease-out',\n)\n\n// Курсор «рука» при наведении (grab) и при зажатии (grabbing), только если включён drag.\nconst imageCursorClass = computed(() => {\n  if (!props.draggable) {\n    return ''\n  }\n\n  return isDragging.value ? 'cursor-grabbing' : 'cursor-grab'\n})\n\nfunction formatPercent(value: number): string {\n  if (Number.isInteger(value)) {\n    return String(value)\n  }\n\n  return value.toFixed(1).replace(TRAILING_ZERO_DECIMAL_RE, '')\n}\n\nconst zoomValueText = computed(() => formatPercent(scale.value * 100))\n\n// Фактический размер изображения на экране вдоль его осей (footprint), c учётом scale.\nconst renderedWidth = computed(() => Math.round(fittedWidth.value * scale.value))\nconst renderedHeight = computed(() => Math.round(fittedHeight.value * scale.value))\n\n// Реальный масштаб относительно натурального размера (доля). Не зависит от rotation,\n// так как scale равномерный по осям картинки.\nconst realScale = computed(() => {\n  if (!naturalWidth.value) {\n    return 0\n  }\n\n  return (fittedWidth.value * scale.value) / naturalWidth.value\n})\n\nconst realScalePercent = computed(() => formatPercent(realScale.value * 100))\n\nconst toolbarSlotProps = computed<GrImageViewerSlotProps>(() => ({\n  index: currentIndex.value,\n  displayIndex: displayIndex.value,\n  total: total.value,\n  scale: scale.value,\n  rotation: rotation.value,\n  naturalWidth: naturalWidth.value,\n  naturalHeight: naturalHeight.value,\n  renderedWidth: renderedWidth.value,\n  renderedHeight: renderedHeight.value,\n  realScale: realScale.value,\n  realScalePercent: realScalePercent.value,\n  actions: toolbarActions,\n}))\n\nfunction normalizeIndex(value: number): number {\n  if (!hasImages.value) {\n    return 0\n  }\n\n  const normalized = Number.isFinite(value) ? Math.trunc(value) : 0\n\n  return ((normalized % total.value) + total.value) % total.value\n}\n\nfunction resetTransform(): void {\n  scale.value = 1\n  rotation.value = 0\n  offsetX.value = 0\n  offsetY.value = 0\n  isDragging.value = false\n}\n\nfunction resetImageMetrics(): void {\n  naturalWidth.value = 0\n  naturalHeight.value = 0\n  fittedWidth.value = 0\n  fittedHeight.value = 0\n}\n\nfunction measureFitted(): void {\n  const el = imageEl.value\n\n  if (!el) {\n    return\n  }\n\n  // offsetWidth/Height — layout-размер вписанного изображения, без учёта CSS transform.\n  fittedWidth.value = el.offsetWidth\n  fittedHeight.value = el.offsetHeight\n}\n\nfunction onImageLoad(event: Event): void {\n  const el = event.target as HTMLImageElement\n\n  naturalWidth.value = el.naturalWidth\n  naturalHeight.value = el.naturalHeight\n  measureFitted()\n}\n\nfunction startObservingImage(): void {\n  const el = imageEl.value\n\n  if (!el || typeof ResizeObserver === 'undefined') {\n    return\n  }\n\n  if (!resizeObserver) {\n    resizeObserver = new ResizeObserver(() => measureFitted())\n  }\n\n  resizeObserver.observe(el)\n\n  // Если картинка уже в кэше и `load` не сработал — считаем метрики сразу.\n  if (el.complete && el.naturalWidth) {\n    naturalWidth.value = el.naturalWidth\n    naturalHeight.value = el.naturalHeight\n  }\n\n  measureFitted()\n}\n\nfunction stopObservingImage(): void {\n  resizeObserver?.disconnect()\n}\n\nfunction setIndex(nextIndex: number, options?: { emitSwitch?: boolean }): void {\n  const normalizedIndex = normalizeIndex(nextIndex)\n\n  if (normalizedIndex === currentIndex.value) {\n    return\n  }\n\n  currentIndex.value = normalizedIndex\n  resetTransform()\n  resetImageMetrics()\n  endWheelZoom()\n\n  if (options?.emitSwitch !== false) {\n    emit('switch', normalizedIndex)\n  }\n}\n\nfunction syncIndexFromInitial(): void {\n  if (!hasImages.value) {\n    currentIndex.value = 0\n    return\n  }\n\n  currentIndex.value = normalizeIndex(props.initialIndex)\n  resetTransform()\n  resetImageMetrics()\n  endWheelZoom()\n}\n\nfunction preloadAt(index: number): void {\n  const url = props.urlList[index]\n\n  if (!url) {\n    return\n  }\n\n  const image = new Image()\n  image.decoding = 'async'\n  image.src = url\n}\n\nfunction closeViewer(): void {\n  emit('update:modelValue', false)\n  emit('close')\n}\n\nfunction prev(): void {\n  setIndex(currentIndex.value - 1)\n}\n\nfunction next(): void {\n  setIndex(currentIndex.value + 1)\n}\n\nfunction setScale(value: number): void {\n  const clamped = Math.min(props.maxScale, Math.max(props.minScale, value))\n\n  scale.value = Number(clamped.toFixed(4))\n}\n\nfunction zoomIn(): void {\n  setScale(scale.value * props.zoomRate)\n}\n\nfunction zoomOut(): void {\n  setScale(scale.value / props.zoomRate)\n}\n\nfunction cancelWheelFrame(): void {\n  if (wheelFrameId !== null) {\n    cancelAnimationFrame(wheelFrameId)\n    wheelFrameId = null\n  }\n}\n\nfunction endWheelZoom(): void {\n  if (wheelIdleTimer !== null) {\n    clearTimeout(wheelIdleTimer)\n    wheelIdleTimer = null\n  }\n\n  isWheelZooming.value = false\n  pendingWheelDelta = 0\n  cancelWheelFrame()\n}\n\n// Применяем накопленный за кадр deltaY одним обновлением scale — так рендер\n// происходит не чаще одного раза в кадр (без «дёрганья» от частых обновлений).\nfunction flushWheelZoom(): void {\n  wheelFrameId = null\n\n  const delta = pendingWheelDelta\n  pendingWheelDelta = 0\n\n  if (!delta) {\n    return\n  }\n\n  // Экспоненциальный шаг — плавно и одинаково ощущается и для колеса, и для трекпада.\n  // delta < 0 (от себя / scroll up) — приближение, delta > 0 — отдаление.\n  const factor = Math.exp(-delta * WHEEL_ZOOM_SENSITIVITY)\n\n  setScale(scale.value * factor)\n}\n\nfunction onWheel(event: WheelEvent): void {\n  if (!props.wheelZoom || !hasImages.value) {\n    return\n  }\n\n  // Не даём странице/оверлею проскроллиться — колесо отдаём под зум.\n  event.preventDefault()\n\n  // Во время непрерывного зума отключаем CSS-переход: плавность даёт само\n  // покадровое обновление, а transition на каждом микрошаге вызывает лаг/наслоение.\n  isWheelZooming.value = true\n\n  pendingWheelDelta += event.deltaY\n\n  if (wheelFrameId === null) {\n    wheelFrameId = requestAnimationFrame(flushWheelZoom)\n  }\n\n  if (wheelIdleTimer !== null) {\n    clearTimeout(wheelIdleTimer)\n  }\n\n  // По завершении жеста возвращаем плавный переход для последующих дискретных зумов.\n  wheelIdleTimer = setTimeout(() => {\n    wheelIdleTimer = null\n    isWheelZooming.value = false\n  }, WHEEL_IDLE_MS)\n}\n\nfunction onPointerDown(event: PointerEvent): void {\n  // Тянем только основной кнопкой и только если drag включён и есть картинка.\n  if (!props.draggable || !hasImages.value || event.button !== 0) {\n    return\n  }\n\n  event.preventDefault()\n\n  isDragging.value = true\n  dragStartX = event.clientX\n  dragStartY = event.clientY\n  dragOffsetStartX = offsetX.value\n  dragOffsetStartY = offsetY.value\n\n  // Захватываем указатель, чтобы движение/отпускание ловились даже за пределами картинки.\n  ;(event.currentTarget as Element).setPointerCapture?.(event.pointerId)\n}\n\nfunction onPointerMove(event: PointerEvent): void {\n  if (!isDragging.value) {\n    return\n  }\n\n  offsetX.value = dragOffsetStartX + (event.clientX - dragStartX)\n  offsetY.value = dragOffsetStartY + (event.clientY - dragStartY)\n}\n\nfunction onPointerUp(event: PointerEvent): void {\n  if (!isDragging.value) {\n    return\n  }\n\n  isDragging.value = false\n  ;(event.currentTarget as Element).releasePointerCapture?.(event.pointerId)\n}\n\nfunction rotateLeft(): void {\n  rotation.value -= 90\n  emit('rotate', rotation.value)\n}\n\nfunction rotateRight(): void {\n  rotation.value += 90\n  emit('rotate', rotation.value)\n}\n\nconst toolbarActions: GrImageViewerToolbarActions = {\n  close: closeViewer,\n  prev,\n  next,\n  zoomIn,\n  zoomOut,\n  reset: resetTransform,\n  rotateLeft,\n  rotateRight,\n}\n\nfunction onBackdropClick(): void {\n  if (!props.hideOnClickModal) {\n    return\n  }\n\n  closeViewer()\n}\n\nfunction onKeydown(event: KeyboardEvent): void {\n  switch (event.key) {\n    case 'Escape':\n      if (!props.closeOnPressEscape) {\n        return\n      }\n\n      event.preventDefault()\n      closeViewer()\n      return\n\n    case 'ArrowLeft':\n      event.preventDefault()\n      prev()\n      return\n\n    case 'ArrowRight':\n      event.preventDefault()\n      next()\n      return\n\n    case '+':\n    case '=':\n    case 'Add':\n      event.preventDefault()\n      zoomIn()\n      return\n\n    case '-':\n    case '_':\n    case 'Subtract':\n      event.preventDefault()\n      zoomOut()\n      return\n\n    case '0':\n      event.preventDefault()\n      resetTransform()\n      break\n\n    default:\n  }\n}\n\nwatch(\n  () => props.modelValue,\n  async (isOpen) => {\n    if (!isOpen) {\n      stopObservingImage()\n      endWheelZoom()\n      isDragging.value = false\n      return\n    }\n\n    syncIndexFromInitial()\n    await nextTick()\n    startObservingImage()\n  },\n  { immediate: true },\n)\n\nwatch(\n  () => props.initialIndex,\n  () => {\n    if (!props.modelValue) {\n      return\n    }\n\n    syncIndexFromInitial()\n  },\n)\n\nwatch(\n  () => props.urlList,\n  () => {\n    if (!props.modelValue) {\n      return\n    }\n\n    syncIndexFromInitial()\n  },\n  { deep: true },\n)\n\nwatch(\n  currentIndex,\n  (index) => {\n    if (!hasImages.value || total.value < 2) {\n      return\n    }\n\n    preloadAt(normalizeIndex(index - 1))\n    preloadAt(normalizeIndex(index + 1))\n  },\n  { immediate: true },\n)\n\nonBeforeUnmount(() => {\n  stopObservingImage()\n  endWheelZoom()\n})\n</script>\n\n<template>\n  <teleport to=\"body\">\n    <TransitionRoot :show=\"open\" as=\"template\">\n      <Dialog\n        as=\"div\"\n        class=\"fixed inset-0\"\n        :style=\"viewerStyle\"\n        role=\"dialog\"\n        aria-modal=\"true\"\n        :static=\"true\"\n        @keydown=\"onKeydown\"\n      >\n        <div class=\"fixed inset-0 overflow-hidden\">\n          <TransitionChild\n            as=\"template\"\n            enter=\"duration-150 ease-out\"\n            enter-from=\"opacity-0\"\n            enter-to=\"opacity-100\"\n            leave=\"duration-120 ease-in\"\n            leave-from=\"opacity-100\"\n            leave-to=\"opacity-0\"\n          >\n            <div\n              data-gr-image-viewer-overlay\n              class=\"absolute inset-0 bg-black/60 backdrop-blur-sm\"\n              aria-hidden=\"true\"\n              @click=\"onBackdropClick\"\n            />\n          </TransitionChild>\n\n          <TransitionChild\n            as=\"template\"\n            enter=\"duration-180 ease-out\"\n            enter-from=\"opacity-0 scale-98\"\n            enter-to=\"opacity-100 scale-100\"\n            leave=\"duration-130 ease-in\"\n            leave-from=\"opacity-100 scale-100\"\n            leave-to=\"opacity-0 scale-98\"\n          >\n            <DialogPanel\n              data-gr-image-viewer-panel\n              class=\"relative z-10 h-full w-full outline-none\"\n              tabindex=\"-1\"\n            >\n              <div class=\"pointer-events-none absolute inset-x-0 top-0 z-30 px-3 py-3 sm:px-6\">\n                <div class=\"pointer-events-auto flex items-center justify-between gap-3\">\n                  <div class=\"flex items-center gap-2\">\n                    <div\n                      v-if=\"showProgress\"\n                      data-gr-image-viewer-progress\n                      class=\"rounded-full bg-black/35 px-3 py-1 text-xs font-600 text-white/95 sm:text-sm\"\n                    >\n                      {{ displayIndex }} / {{ total }}\n                    </div>\n\n                    <div\n                      v-if=\"showZoomValue\"\n                      data-gr-image-viewer-zoom-value\n                      class=\"rounded-full bg-black/35 px-3 py-1 text-xs font-700 text-white/95 sm:text-sm\"\n                    >\n                      {{ zoomValueText }}%\n                    </div>\n                  </div>\n\n                  <button\n                    type=\"button\"\n                    data-gr-image-viewer-close\n                    :aria-label=\"resolvedCloseLabel\"\n                    class=\"h-11 w-11 flex items-center justify-center rounded-full border border-white/20 bg-black/35 text-white transition-colors hover:bg-black/55 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white/80\"\n                    @click=\"closeViewer\"\n                  >\n                    <span aria-hidden=\"true\" class=\"text-lg leading-none\">✕</span>\n                  </button>\n                </div>\n              </div>\n\n              <div\n                class=\"relative z-10 h-full w-full flex items-center justify-center px-16 py-16 sm:px-24 sm:py-20\"\n                @wheel=\"onWheel\"\n              >\n                <button\n                  v-if=\"total > 1\"\n                  type=\"button\"\n                  data-gr-image-viewer-prev\n                  :aria-label=\"resolvedPrevLabel\"\n                  class=\"absolute left-3 top-1/2 z-20 h-12 w-12 -translate-y-1/2 flex items-center justify-center rounded-full border border-white/20 bg-black/35 text-white transition-colors hover:bg-black/55 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white/80 sm:left-6\"\n                  @click=\"prev\"\n                >\n                  <span aria-hidden=\"true\" class=\"text-xl leading-none\">‹</span>\n                </button>\n\n                <button\n                  v-if=\"total > 1\"\n                  type=\"button\"\n                  data-gr-image-viewer-next\n                  :aria-label=\"resolvedNextLabel\"\n                  class=\"absolute right-3 top-1/2 z-20 h-12 w-12 -translate-y-1/2 flex items-center justify-center rounded-full border border-white/20 bg-black/35 text-white transition-colors hover:bg-black/55 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white/80 sm:right-6\"\n                  @click=\"next\"\n                >\n                  <span aria-hidden=\"true\" class=\"text-xl leading-none\">›</span>\n                </button>\n\n                <div class=\"h-full w-full flex items-center justify-center\">\n                  <img\n                    v-if=\"currentUrl\"\n                    ref=\"imageEl\"\n                    data-gr-image-viewer-image\n                    :src=\"currentUrl\"\n                    alt=\"\"\n                    draggable=\"false\"\n                    class=\"max-h-full max-w-full select-none object-contain will-change-transform\"\n                    :class=\"[imageTransitionClass, imageCursorClass]\"\n                    :style=\"imageStyle\"\n                    @load=\"onImageLoad\"\n                    @pointerdown=\"onPointerDown\"\n                    @pointermove=\"onPointerMove\"\n                    @pointerup=\"onPointerUp\"\n                    @pointercancel=\"onPointerUp\"\n                  >\n\n                  <div\n                    v-else\n                    class=\"rounded-[var(--gr-radius-xl)] border border-white/20 bg-black/25 px-4 py-3 text-sm text-white/80\"\n                  >\n                    {{ resolvedEmptyText }}\n                  </div>\n                </div>\n              </div>\n\n              <div class=\"pointer-events-none absolute inset-x-0 bottom-0 z-30 px-3 pb-3 sm:px-6 sm:pb-6\">\n                <div class=\"pointer-events-auto mx-auto w-full max-w-max\">\n                  <slot\n                    name=\"toolbar\"\n                    v-bind=\"toolbarSlotProps\"\n                  >\n                    <div class=\"rounded-full border border-white/20 bg-black/35 p-1 backdrop-blur-sm flex items-center gap-1\">\n                      <button\n                        type=\"button\"\n                        data-gr-image-viewer-zoom-out\n                        :aria-label=\"resolvedZoomOutLabel\"\n                        class=\"h-11 min-w-11 px-2 flex items-center justify-center rounded-full text-sm font-600 text-white transition-colors hover:bg-white/10 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white/80\"\n                        @click=\"zoomOut\"\n                      >\n                        −\n                      </button>\n\n                      <button\n                        type=\"button\"\n                        data-gr-image-viewer-zoom-reset\n                        :aria-label=\"resolvedResetZoomLabel\"\n                        class=\"h-11 min-w-11 px-3 flex items-center justify-center rounded-full text-xs font-700 text-white transition-colors hover:bg-white/10 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white/80\"\n                        @click=\"resetTransform\"\n                      >\n                        100%\n                      </button>\n\n                      <button\n                        type=\"button\"\n                        data-gr-image-viewer-zoom-in\n                        :aria-label=\"resolvedZoomInLabel\"\n                        class=\"h-11 min-w-11 px-2 flex items-center justify-center rounded-full text-sm font-600 text-white transition-colors hover:bg-white/10 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white/80\"\n                        @click=\"zoomIn\"\n                      >\n                        +\n                      </button>\n\n                      <template v-if=\"$slots['toolbar-actions']\">\n                        <div class=\"mx-1 h-6 w-px bg-white/25\" aria-hidden=\"true\" />\n\n                        <slot\n                          name=\"toolbar-actions\"\n                          v-bind=\"toolbarSlotProps\"\n                        />\n\n                        <div class=\"mx-1 h-6 w-px bg-white/25\" aria-hidden=\"true\" />\n                      </template>\n\n                      <div v-else class=\"mx-1 h-6 w-px bg-white/25\" aria-hidden=\"true\" />\n\n                      <button\n                        type=\"button\"\n                        data-gr-image-viewer-rotate-left\n                        :aria-label=\"resolvedRotateLeftLabel\"\n                        class=\"h-11 min-w-11 px-2 flex items-center justify-center rounded-full text-sm font-600 text-white transition-colors hover:bg-white/10 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white/80\"\n                        @click=\"rotateLeft\"\n                      >\n                        ↺\n                      </button>\n\n                      <button\n                        type=\"button\"\n                        data-gr-image-viewer-rotate-right\n                        :aria-label=\"resolvedRotateRightLabel\"\n                        class=\"h-11 min-w-11 px-2 flex items-center justify-center rounded-full text-sm font-600 text-white transition-colors hover:bg-white/10 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white/80\"\n                        @click=\"rotateRight\"\n                      >\n                        ↻\n                      </button>\n                    </div>\n                  </slot>\n                </div>\n              </div>\n            </DialogPanel>\n          </TransitionChild>\n        </div>\n      </Dialog>\n    </TransitionRoot>\n  </teleport>\n</template>"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA6HA,IAAM,kBAAkB;AAGxB,IAAM,yBAAyB;AAG/B,IAAM,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAlHtB,MAAM,QAAQ;EA4Dd,MAAM,EAAE,MAAM,2BAA2B;EACzC,MAAM,qBAAqB,eAAe,MAAM,cAAc,EAAE,wBAAwB,oBAAoB,CAAC;EAC7G,MAAM,oBAAoB,eAAe,MAAM,aAAa,EAAE,uBAAuB,gBAAgB,CAAC;EACtG,MAAM,oBAAoB,eAAe,MAAM,aAAa,EAAE,uBAAuB,YAAY,CAAC;EAClG,MAAM,sBAAsB,eAAe,MAAM,eAAe,EAAE,yBAAyB,SAAS,CAAC;EACrG,MAAM,uBAAuB,eAAe,MAAM,gBAAgB,EAAE,0BAA0B,UAAU,CAAC;EACzG,MAAM,yBAAyB,eAAe,MAAM,kBAAkB,EAAE,4BAA4B,YAAY,CAAC;EACjH,MAAM,0BAA0B,eAAe,MAAM,mBAAmB,EAAE,6BAA6B,aAAa,CAAC;EACrH,MAAM,2BAA2B,eAAe,MAAM,oBAAoB,EAAE,8BAA8B,cAAc,CAAC;EACzH,MAAM,oBAAoB,eAAe,MAAM,aAAa,EAAE,wBAAwB,UAAU,CAAC;EAEjG,MAAM,OAAO;EAsCb,MAAM,2BAA2B;EAOjC,MAAM,OAAO,eAAe,MAAM,UAAU;EAC5C,MAAM,QAAQ,eAAe,MAAM,QAAQ,MAAM;EACjD,MAAM,YAAY,eAAe,MAAM,QAAQ,CAAC;EAEhD,MAAM,eAAe,IAAI,CAAC;EAC1B,MAAM,QAAQ,IAAI,CAAC;EACnB,MAAM,WAAW,IAAI,CAAC;EACtB,MAAM,UAAU,IAAI,CAAC;EACrB,MAAM,UAAU,IAAI,CAAC;EAErB,MAAM,UAAU,IAA6B,IAAI;EAIjD,MAAM,iBAAiB,IAAI,KAAK;EAGhC,IAAI,oBAAoB;EACxB,IAAI,eAA8B;EAClC,IAAI,iBAAuD;EAG3D,MAAM,aAAa,IAAI,KAAK;EAG5B,IAAI,aAAa;EACjB,IAAI,aAAa;EACjB,IAAI,mBAAmB;EACvB,IAAI,mBAAmB;EAGvB,MAAM,eAAe,IAAI,CAAC;EAC1B,MAAM,gBAAgB,IAAI,CAAC;EAG3B,MAAM,cAAc,IAAI,CAAC;EACzB,MAAM,eAAe,IAAI,CAAC;EAE1B,IAAI,iBAAwC;EAE5C,MAAM,aAAa,eAAe;GAChC,IAAI,CAAC,UAAU,OACb;GAGF,OAAO,MAAM,QAAQ,aAAa;EACpC,CAAC;EAED,MAAM,eAAe,eAAe;GAClC,IAAI,CAAC,UAAU,OACb,OAAO;GAGT,OAAO,aAAa,QAAQ;EAC9B,CAAC;EAED,MAAM,cAAc,gBAAgB,EAClC,QAAQ,OAAO,OAAO,SAAS,MAAM,MAAM,IAAI,MAAM,SAAS,eAAe,EAC/E,EAAE;EAEF,MAAM,aAAa,gBAAgB,EACjC,WAAW,eAAe,QAAQ,MAAM,MAAM,QAAQ,MAAM,eAAe,MAAM,MAAM,WAAW,SAAS,MAAM,MACnH,EAAE;EAKF,MAAM,uBAAuB,eAC3B,eAAe,SAAS,WAAW,QAAQ,KAAK,4CAClD;EAGA,MAAM,mBAAmB,eAAe;GACtC,IAAI,CAAC,MAAM,WACT,OAAO;GAGT,OAAO,WAAW,QAAQ,oBAAoB;EAChD,CAAC;EAED,SAAS,cAAc,OAAuB;GAC5C,IAAI,OAAO,UAAU,KAAK,GACxB,OAAO,OAAO,KAAK;GAGrB,OAAO,MAAM,QAAQ,CAAC,CAAC,CAAC,QAAQ,0BAA0B,EAAE;EAC9D;EAEA,MAAM,gBAAgB,eAAe,cAAc,MAAM,QAAQ,GAAG,CAAC;EAGrE,MAAM,gBAAgB,eAAe,KAAK,MAAM,YAAY,QAAQ,MAAM,KAAK,CAAC;EAChF,MAAM,iBAAiB,eAAe,KAAK,MAAM,aAAa,QAAQ,MAAM,KAAK,CAAC;EAIlF,MAAM,YAAY,eAAe;GAC/B,IAAI,CAAC,aAAa,OAChB,OAAO;GAGT,OAAQ,YAAY,QAAQ,MAAM,QAAS,aAAa;EAC1D,CAAC;EAED,MAAM,mBAAmB,eAAe,cAAc,UAAU,QAAQ,GAAG,CAAC;EAE5E,MAAM,mBAAmB,gBAAwC;GAC/D,OAAO,aAAa;GACpB,cAAc,aAAa;GAC3B,OAAO,MAAM;GACb,OAAO,MAAM;GACb,UAAU,SAAS;GACnB,cAAc,aAAa;GAC3B,eAAe,cAAc;GAC7B,eAAe,cAAc;GAC7B,gBAAgB,eAAe;GAC/B,WAAW,UAAU;GACrB,kBAAkB,iBAAiB;GACnC,SAAS;EACX,EAAE;EAEF,SAAS,eAAe,OAAuB;GAC7C,IAAI,CAAC,UAAU,OACb,OAAO;GAKT,SAFmB,OAAO,SAAS,KAAK,IAAI,KAAK,MAAM,KAAK,IAAI,KAE1C,MAAM,QAAS,MAAM,SAAS,MAAM;EAC5D;EAEA,SAAS,iBAAuB;GAC9B,MAAM,QAAQ;GACd,SAAS,QAAQ;GACjB,QAAQ,QAAQ;GAChB,QAAQ,QAAQ;GAChB,WAAW,QAAQ;EACrB;EAEA,SAAS,oBAA0B;GACjC,aAAa,QAAQ;GACrB,cAAc,QAAQ;GACtB,YAAY,QAAQ;GACpB,aAAa,QAAQ;EACvB;EAEA,SAAS,gBAAsB;GAC7B,MAAM,KAAK,QAAQ;GAEnB,IAAI,CAAC,IACH;GAIF,YAAY,QAAQ,GAAG;GACvB,aAAa,QAAQ,GAAG;EAC1B;EAEA,SAAS,YAAY,OAAoB;GACvC,MAAM,KAAK,MAAM;GAEjB,aAAa,QAAQ,GAAG;GACxB,cAAc,QAAQ,GAAG;GACzB,cAAc;EAChB;EAEA,SAAS,sBAA4B;GACnC,MAAM,KAAK,QAAQ;GAEnB,IAAI,CAAC,MAAM,OAAO,mBAAmB,aACnC;GAGF,IAAI,CAAC,gBACH,iBAAiB,IAAI,qBAAqB,cAAc,CAAC;GAG3D,eAAe,QAAQ,EAAE;GAGzB,IAAI,GAAG,YAAY,GAAG,cAAc;IAClC,aAAa,QAAQ,GAAG;IACxB,cAAc,QAAQ,GAAG;GAC3B;GAEA,cAAc;EAChB;EAEA,SAAS,qBAA2B;GAClC,gBAAgB,WAAW;EAC7B;EAEA,SAAS,SAAS,WAAmB,SAA0C;GAC7E,MAAM,kBAAkB,eAAe,SAAS;GAEhD,IAAI,oBAAoB,aAAa,OACnC;GAGF,aAAa,QAAQ;GACrB,eAAe;GACf,kBAAkB;GAClB,aAAa;GAEb,IAAI,SAAS,eAAe,OAC1B,KAAK,UAAU,eAAe;EAElC;EAEA,SAAS,uBAA6B;GACpC,IAAI,CAAC,UAAU,OAAO;IACpB,aAAa,QAAQ;IACrB;GACF;GAEA,aAAa,QAAQ,eAAe,MAAM,YAAY;GACtD,eAAe;GACf,kBAAkB;GAClB,aAAa;EACf;EAEA,SAAS,UAAU,OAAqB;GACtC,MAAM,MAAM,MAAM,QAAQ;GAE1B,IAAI,CAAC,KACH;GAGF,MAAM,QAAQ,IAAI,MAAM;GACxB,MAAM,WAAW;GACjB,MAAM,MAAM;EACd;EAEA,SAAS,cAAoB;GAC3B,KAAK,qBAAqB,KAAK;GAC/B,KAAK,OAAO;EACd;EAEA,SAAS,OAAa;GACpB,SAAS,aAAa,QAAQ,CAAC;EACjC;EAEA,SAAS,OAAa;GACpB,SAAS,aAAa,QAAQ,CAAC;EACjC;EAEA,SAAS,SAAS,OAAqB;GACrC,MAAM,UAAU,KAAK,IAAI,MAAM,UAAU,KAAK,IAAI,MAAM,UAAU,KAAK,CAAC;GAExE,MAAM,QAAQ,OAAO,QAAQ,QAAQ,CAAC,CAAC;EACzC;EAEA,SAAS,SAAe;GACtB,SAAS,MAAM,QAAQ,MAAM,QAAQ;EACvC;EAEA,SAAS,UAAgB;GACvB,SAAS,MAAM,QAAQ,MAAM,QAAQ;EACvC;EAEA,SAAS,mBAAyB;GAChC,IAAI,iBAAiB,MAAM;IACzB,qBAAqB,YAAY;IACjC,eAAe;GACjB;EACF;EAEA,SAAS,eAAqB;GAC5B,IAAI,mBAAmB,MAAM;IAC3B,aAAa,cAAc;IAC3B,iBAAiB;GACnB;GAEA,eAAe,QAAQ;GACvB,oBAAoB;GACpB,iBAAiB;EACnB;EAIA,SAAS,iBAAuB;GAC9B,eAAe;GAEf,MAAM,QAAQ;GACd,oBAAoB;GAEpB,IAAI,CAAC,OACH;GAKF,MAAM,SAAS,KAAK,IAAI,CAAC,QAAQ,sBAAsB;GAEvD,SAAS,MAAM,QAAQ,MAAM;EAC/B;EAEA,SAAS,QAAQ,OAAyB;GACxC,IAAI,CAAC,MAAM,aAAa,CAAC,UAAU,OACjC;GAIF,MAAM,eAAe;GAIrB,eAAe,QAAQ;GAEvB,qBAAqB,MAAM;GAE3B,IAAI,iBAAiB,MACnB,eAAe,sBAAsB,cAAc;GAGrD,IAAI,mBAAmB,MACrB,aAAa,cAAc;GAI7B,iBAAiB,iBAAiB;IAChC,iBAAiB;IACjB,eAAe,QAAQ;GACzB,GAAG,aAAa;EAClB;EAEA,SAAS,cAAc,OAA2B;GAEhD,IAAI,CAAC,MAAM,aAAa,CAAC,UAAU,SAAS,MAAM,WAAW,GAC3D;GAGF,MAAM,eAAe;GAErB,WAAW,QAAQ;GACnB,aAAa,MAAM;GACnB,aAAa,MAAM;GACnB,mBAAmB,QAAQ;GAC3B,mBAAmB,QAAQ;GAG1B,MAAO,cAA0B,oBAAoB,MAAM,SAAS;EACvE;EAEA,SAAS,cAAc,OAA2B;GAChD,IAAI,CAAC,WAAW,OACd;GAGF,QAAQ,QAAQ,oBAAoB,MAAM,UAAU;GACpD,QAAQ,QAAQ,oBAAoB,MAAM,UAAU;EACtD;EAEA,SAAS,YAAY,OAA2B;GAC9C,IAAI,CAAC,WAAW,OACd;GAGF,WAAW,QAAQ;GAClB,MAAO,cAA0B,wBAAwB,MAAM,SAAS;EAC3E;EAEA,SAAS,aAAmB;GAC1B,SAAS,SAAS;GAClB,KAAK,UAAU,SAAS,KAAK;EAC/B;EAEA,SAAS,cAAoB;GAC3B,SAAS,SAAS;GAClB,KAAK,UAAU,SAAS,KAAK;EAC/B;EAEA,MAAM,iBAA8C;GAClD,OAAO;GACP;GACA;GACA;GACA;GACA,OAAO;GACP;GACA;EACF;EAEA,SAAS,kBAAwB;GAC/B,IAAI,CAAC,MAAM,kBACT;GAGF,YAAY;EACd;EAEA,SAAS,UAAU,OAA4B;GAC7C,QAAQ,MAAM,KAAd;IACE,KAAK;KACH,IAAI,CAAC,MAAM,oBACT;KAGF,MAAM,eAAe;KACrB,YAAY;KACZ;IAEF,KAAK;KACH,MAAM,eAAe;KACrB,KAAK;KACL;IAEF,KAAK;KACH,MAAM,eAAe;KACrB,KAAK;KACL;IAEF,KAAK;IACL,KAAK;IACL,KAAK;KACH,MAAM,eAAe;KACrB,OAAO;KACP;IAEF,KAAK;IACL,KAAK;IACL,KAAK;KACH,MAAM,eAAe;KACrB,QAAQ;KACR;IAEF,KAAK;KACH,MAAM,eAAe;KACrB,eAAe;KACf;IAEF;GACF;EACF;EAEA,YACQ,MAAM,YACZ,OAAO,WAAW;GAChB,IAAI,CAAC,QAAQ;IACX,mBAAmB;IACnB,aAAa;IACb,WAAW,QAAQ;IACnB;GACF;GAEA,qBAAqB;GACrB,MAAM,SAAS;GACf,oBAAoB;EACtB,GACA,EAAE,WAAW,KAAK,CACpB;EAEA,YACQ,MAAM,oBACN;GACJ,IAAI,CAAC,MAAM,YACT;GAGF,qBAAqB;EACvB,CACF;EAEA,YACQ,MAAM,eACN;GACJ,IAAI,CAAC,MAAM,YACT;GAGF,qBAAqB;EACvB,GACA,EAAE,MAAM,KAAK,CACf;EAEA,MACE,eACC,UAAU;GACT,IAAI,CAAC,UAAU,SAAS,MAAM,QAAQ,GACpC;GAGF,UAAU,eAAe,QAAQ,CAAC,CAAC;GACnC,UAAU,eAAe,QAAQ,CAAC,CAAC;EACrC,GACA,EAAE,WAAW,KAAK,CACpB;EAEA,sBAAsB;GACpB,mBAAmB;GACnB,aAAa;EACf,CAAC;;uBAIC,YA8MW,UAAA,EA9MD,IAAG,OAAM,GAAA,CACjB,YA4MiB,MAAA,EAAA,GAAA;IA5MA,MAAM,KAAA;IAAM,IAAG;;2BA2MrB,CA1MT,YA0MS,MAAA,EAAA,GAAA;KAzMP,IAAG;KACH,OAAM;KACL,OAAK,eAAE,YAAA,KAAW;KACnB,MAAK;KACL,cAAW;KACV,QAAQ;KACC;;4BAkMJ,CAhMN,mBAgMM,OAhMN,YAgMM,CA/LJ,YAekB,MAAA,EAAA,GAAA;MAdhB,IAAG;MACH,OAAM;MACN,cAAW;MACX,YAAS;MACT,OAAM;MACN,cAAW;MACX,YAAS;;6BAOP,CALF,mBAKE,OAAA;OAJA,gCAAA;OACA,OAAM;OACN,eAAY;OACX,SAAO;;;SAIZ,YA6KkB,MAAA,EAAA,GAAA;MA5KhB,IAAG;MACH,OAAM;MACN,cAAW;MACX,YAAS;MACT,OAAM;MACN,cAAW;MACX,YAAS;;6BAqKK,CAnKd,YAmKc,MAAA,EAAA,GAAA;OAlKZ,8BAAA;OACA,OAAM;OACN,UAAS;;8BAgCH;QA9BN,mBA8BM,OA9BN,YA8BM,CA7BJ,mBA4BM,OA5BN,YA4BM,CA3BJ,mBAgBM,OAhBN,YAgBM,CAdI,QAAA,gBAAA,UAAA,GADR,mBAMM,OANN,YAMM,gBADD,aAAA,KAAY,IAAG,QAAG,gBAAG,MAAA,KAAK,GAAA,CAAA,KAAA,mBAAA,IAAA,IAAA,GAIvB,QAAA,iBAAA,UAAA,GADR,mBAMM,OANN,YAMM,gBADD,cAAA,KAAa,IAAG,MACrB,CAAA,KAAA,mBAAA,IAAA,IAAA,CAAA,CAAA,GAGF,mBAQS,UAAA;SAPP,MAAK;SACL,8BAAA;SACC,cAAY,mBAAA;SACb,OAAM;SACL,SAAO;0CAER,mBAA8D,QAAA;SAAxD,eAAY;SAAO,OAAM;WAAuB,KAAC,EAAA,CAAA,EAAA,GAAA,GAAA,UAAA,CAAA,CAAA,CAAA,CAAA;QAK7D,mBAmDM,OAAA;SAlDJ,OAAM;SACE;;SAGA,MAAA,QAAK,KAAA,UAAA,GADb,mBASS,UAAA;;UAPP,MAAK;UACL,6BAAA;UACC,cAAY,kBAAA;UACb,OAAM;UACL,SAAO;2CAER,mBAA8D,QAAA;UAAxD,eAAY;UAAO,OAAM;YAAuB,KAAC,EAAA,CAAA,EAAA,GAAA,GAAA,UAAA,KAAA,mBAAA,IAAA,IAAA;SAIjD,MAAA,QAAK,KAAA,UAAA,GADb,mBASS,UAAA;;UAPP,MAAK;UACL,6BAAA;UACC,cAAY,kBAAA;UACb,OAAM;UACL,SAAO;2CAER,mBAA8D,QAAA;UAAxD,eAAY;UAAO,OAAM;YAAuB,KAAC,EAAA,CAAA,EAAA,GAAA,GAAA,UAAA,KAAA,mBAAA,IAAA,IAAA;SAGzD,mBAwBM,OAxBN,aAwBM,CAtBI,WAAA,SAAA,UAAA,GADR,mBAeC,OAAA;;mBAbK;UAAJ,KAAI;UACJ,8BAAA;UACC,KAAK,WAAA;UACN,KAAI;UACJ,WAAU;UACV,OAAK,eAAA,CAAC,0EAAwE,CACrE,qBAAA,OAAsB,iBAAA,KAAgB,CAAA,CAAA;UAC9C,OAAK,eAAE,WAAA,KAAU;UACjB,QAAM;UACN,eAAa;UACb,eAAa;UACb,aAAW;UACX,iBAAe;oDAGlB,mBAKM,OALN,aAKM,gBADD,kBAAA,KAAiB,GAAA,CAAA,EAAA,CAAA;;QAK1B,mBAwEM,OAxEN,aAwEM,CAvEJ,mBAsEM,OAtEN,aAsEM,CArEJ,WAoEO,KAAA,QAAA,WAAA,eAAA,mBAlEG,iBAAA,KAAgB,CAAA,SAkEnB,CAhEL,mBA+DM,OA/DN,aA+DM;SA9DJ,mBAQS,UAAA;UAPP,MAAK;UACL,iCAAA;UACC,cAAY,qBAAA;UACb,OAAM;UACL,SAAO;YACT,OAED,GAAA,WAAA;SAEA,mBAQS,UAAA;UAPP,MAAK;UACL,mCAAA;UACC,cAAY,uBAAA;UACb,OAAM;UACL,SAAO;YACT,UAED,GAAA,WAAA;SAEA,mBAQS,UAAA;UAPP,MAAK;UACL,gCAAA;UACC,cAAY,oBAAA;UACb,OAAM;UACL,SAAO;YACT,OAED,GAAA,WAAA;SAEgBA,KAAAA,OAAM,sBAAA,UAAA,GAAtB,mBASW,UAAA,EAAA,KAAA,EAAA,GAAA;oCART,mBAA4D,OAAA;WAAvD,OAAM;WAA4B,eAAY;;UAEnD,WAGE,KAAA,QAAA,mBAAA,eAAA,mBADQ,iBAAA,KAAgB,CAAA,CAAA;oCAG1B,mBAA4D,OAAA;WAAvD,OAAM;WAA4B,eAAY;;iCAGrD,mBAAmE,OAAnE,WAAmE;SAEnE,mBAQS,UAAA;UAPP,MAAK;UACL,oCAAA;UACC,cAAY,wBAAA;UACb,OAAM;UACL,SAAO;YACT,OAED,GAAA,WAAA;SAEA,mBAQS,UAAA;UAPP,MAAK;UACL,qCAAA;UACC,cAAY,yBAAA;UACb,OAAM;UACL,SAAO;YACT,OAED,GAAA,WAAA"}

package/dist/components/GrInput/chunks/GrInput-C8pOJgCi.js

@@ -1,188 +0,0 @@
-import { n as useAddonMeasurement, t as addLen } from "../../../chunks/useAddonMeasurement-DM0akF4C.js";
-import { computed, createCommentVNode, createElementBlock, createElementVNode, defineComponent, mergeProps, normalizeClass, normalizeStyle, openBlock, ref, renderSlot, useSlots } from "vue";
-//#region src/components/GrInput/GrInput.vue?vue&type=script&setup=true&lang.ts
-var _hoisted_1 = [
-	"id",
-	"name",
-	"type",
-	"inputmode",
-	"autocomplete",
-	"placeholder",
-	"disabled",
-	"value",
-	"aria-invalid"
-];
-//#endregion
-//#region src/components/GrInput/GrInput.vue
-var GrInput_default = /* @__PURE__ */ defineComponent({
-	inheritAttrs: false,
-	__name: "GrInput",
-	props: {
-		modelValue: {},
-		type: { default: "text" },
-		placeholder: { default: void 0 },
-		autocomplete: { default: void 0 },
-		inputmode: { default: void 0 },
-		disabled: {
-			type: Boolean,
-			default: false
-		},
-		invalid: {
-			type: Boolean,
-			default: false
-		},
-		state: { default: "default" },
-		name: { default: void 0 },
-		id: { default: void 0 },
-		size: { default: "md" },
-		textAlign: { default: "left" },
-		prefixMinWidth: { default: void 0 },
-		prefixMaxWidth: { default: void 0 },
-		suffixMinWidth: { default: void 0 },
-		suffixMaxWidth: { default: void 0 },
-		prefixFixed: {
-			type: Boolean,
-			default: false
-		},
-		suffixFixed: {
-			type: Boolean,
-			default: false
-		}
-	},
-	emits: ["update:modelValue"],
-	setup(__props, { expose: __expose, emit: __emit }) {
-		const props = __props;
-		const emit = __emit;
-		const inputEl = ref(null);
-		function focus() {
-			inputEl.value?.focus();
-		}
-		__expose({ focus });
-		const slots = useSlots();
-		const hasPrefix = computed(() => Boolean(slots.prefix));
-		const hasSuffix = computed(() => Boolean(slots.suffix));
-		const defaultAddonMinWidth = computed(() => {
-			return {
-				xs: "2rem",
-				sm: "2.25rem",
-				md: "2.5rem",
-				lg: "3rem"
-			}[props.size];
-		});
-		const prefixMinWidth = computed(() => props.prefixMinWidth ?? defaultAddonMinWidth.value);
-		const suffixMinWidth = computed(() => props.suffixMinWidth ?? defaultAddonMinWidth.value);
-		const prefixFixedWidth = computed(() => props.prefixMaxWidth ?? props.prefixMinWidth ?? defaultAddonMinWidth.value);
-		const suffixFixedWidth = computed(() => props.suffixMaxWidth ?? props.suffixMinWidth ?? defaultAddonMinWidth.value);
-		const { prefixEl, suffixEl, measuredPrefixWidth, measuredSuffixWidth } = useAddonMeasurement(hasPrefix, hasSuffix);
-		const basePaddingXLen = computed(() => {
-			return {
-				xs: "10px",
-				sm: "12px",
-				md: "12px",
-				lg: "16px"
-			}[props.size];
-		});
-		const inputStyle = computed(() => {
-			const leftReserved = hasPrefix.value ? props.prefixFixed ? prefixFixedWidth.value : measuredPrefixWidth.value ?? prefixMinWidth.value : "0px";
-			const rightReserved = hasSuffix.value ? props.suffixFixed ? suffixFixedWidth.value : measuredSuffixWidth.value ?? suffixMinWidth.value : "0px";
-			return {
-				paddingLeft: hasPrefix.value ? addLen(leftReserved, basePaddingXLen.value) : void 0,
-				paddingRight: hasSuffix.value ? addLen(rightReserved, basePaddingXLen.value) : void 0
-			};
-		});
-		const prefixStyle = computed(() => {
-			if (props.prefixFixed) return {
-				width: prefixFixedWidth.value,
-				minWidth: prefixFixedWidth.value,
-				maxWidth: prefixFixedWidth.value
-			};
-			return {
-				minWidth: prefixMinWidth.value,
-				maxWidth: props.prefixMaxWidth
-			};
-		});
-		const suffixStyle = computed(() => {
-			if (props.suffixFixed) return {
-				width: suffixFixedWidth.value,
-				minWidth: suffixFixedWidth.value,
-				maxWidth: suffixFixedWidth.value
-			};
-			return {
-				minWidth: suffixMinWidth.value,
-				maxWidth: props.suffixMaxWidth
-			};
-		});
-		const sizeClass = computed(() => {
-			return {
-				xs: "h-7 px-2.5 text-[12px]",
-				sm: "h-8 px-3 text-[13px]",
-				md: "h-10 px-3 text-[14px]",
-				lg: "h-11 px-4 text-[16px]"
-			}[props.size];
-		});
-		const textAlignClass = computed(() => {
-			return {
-				left: "text-left",
-				center: "text-center",
-				right: "text-right"
-			}[props.textAlign];
-		});
-		const shellClass = computed(() => {
-			const state = props.state;
-			const borderByState = {
-				default: "border-[var(--brd)]",
-				success: "border-[var(--gr-success)] focus-within:ring-[var(--gr-success)]",
-				warning: "border-[var(--gr-warning)] focus-within:ring-[var(--gr-warning)]",
-				danger: "border-[var(--gr-danger)] focus-within:ring-[var(--gr-danger)]"
-			};
-			return [props.invalid ? borderByState.danger : borderByState[state], props.disabled ? "opacity-50 cursor-not-allowed" : ""].filter(Boolean).join(" ");
-		});
-		const className = computed(() => {
-			return [sizeClass.value, textAlignClass.value].join(" ");
-		});
-		function onInput(e) {
-			emit("update:modelValue", e.target.value);
-		}
-		return (_ctx, _cache) => {
-			return openBlock(), createElementBlock("div", { class: normalizeClass(["relative w-full overflow-hidden rounded-md border bg-[var(--bg)] transition-colors duration-150 focus-within:ring-2 focus-within:ring-[var(--ring)]", shellClass.value]) }, [
-				_ctx.$slots.prefix ? (openBlock(), createElementBlock("div", {
-					key: 0,
-					ref_key: "prefixEl",
-					ref: prefixEl,
-					"data-testid": "gr-input-prefix",
-					class: "absolute inset-y-0 left-0 flex items-center justify-center border-r border-[var(--brd)] px-2 text-[var(--muted-fg)] pointer-events-none select-none truncate",
-					style: normalizeStyle(prefixStyle.value),
-					"aria-hidden": "true"
-				}, [renderSlot(_ctx.$slots, "prefix")], 4)) : createCommentVNode("", true),
-				createElementVNode("input", mergeProps({
-					id: props.id,
-					ref_key: "inputEl",
-					ref: inputEl
-				}, _ctx.$attrs, {
-					name: props.name,
-					type: props.type,
-					inputmode: props.inputmode,
-					autocomplete: props.autocomplete,
-					placeholder: props.placeholder,
-					disabled: props.disabled,
-					value: props.modelValue,
-					"aria-invalid": props.invalid ? "true" : void 0,
-					class: ["w-full bg-transparent text-[var(--fg)] placeholder:text-[var(--muted-fg)] focus:placeholder:text-transparent focus:outline-none disabled:cursor-not-allowed", className.value],
-					style: inputStyle.value,
-					onInput
-				}), null, 16, _hoisted_1),
-				_ctx.$slots.suffix ? (openBlock(), createElementBlock("div", {
-					key: 1,
-					ref_key: "suffixEl",
-					ref: suffixEl,
-					"data-testid": "gr-input-suffix",
-					class: normalizeClass(["absolute inset-y-0 right-0 flex items-center justify-center border-l border-[var(--brd)] px-2 text-[var(--muted-fg)] pointer-events-none select-none truncate", __props.suffixFixed ? "[direction:rtl]" : ""]),
-					style: normalizeStyle(suffixStyle.value),
-					"aria-hidden": "true"
-				}, [renderSlot(_ctx.$slots, "suffix")], 6)) : createCommentVNode("", true)
-			], 2);
-		};
-	}
-});
-//#endregion
-export { GrInput_default as t };

package/dist/components/GrInput/chunks/GrInput-C8pOJgCi.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"GrInput-C8pOJgCi.js","names":["$slots","$attrs"],"sources":["../../../../src/components/GrInput/GrInput.vue","../../../../src/components/GrInput/GrInput.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport {computed, ref, useSlots} from 'vue'\n\nimport {addLen, useAddonMeasurement} from '../../composables/internal/useAddonMeasurement'\nimport type {InputHTMLAttributes} from 'vue'\n\ndefineOptions({\n  inheritAttrs: false,\n})\n\nexport type GrInputSize = 'xs' | 'sm' | 'md' | 'lg'\nexport type GrInputTextAlign = 'left' | 'center' | 'right'\n\nconst props = withDefaults(\n    defineProps<{\n      modelValue: string\n      type?: 'text' | 'email' | 'password' | 'number' | 'search'\n      placeholder?: string\n      autocomplete?: string\n      inputmode?: InputHTMLAttributes['inputmode']\n      disabled?: boolean\n      invalid?: boolean\n      state?: 'default' | 'success' | 'warning' | 'danger'\n      name?: string\n      id?: string\n      size?: GrInputSize\n\n      textAlign?: GrInputTextAlign\n\n      prefixMinWidth?: string\n      prefixMaxWidth?: string\n      suffixMinWidth?: string\n      suffixMaxWidth?: string\n      /**\n       * Фиксированная ширина у prefix/suffix: аддон получает жёсткую ширину\n       * (из `*MaxWidth` → `*MinWidth` → дефолт), а контент обрезается по краю\n       * (prefix — справа, suffix — слева). По умолчанию аддоны «растягиваются»\n       * под контент (в пределах min/max), а излишек клипается оболочкой.\n       */\n      prefixFixed?: boolean\n      suffixFixed?: boolean\n    }>(),\n    {\n      type: 'text',\n      placeholder: undefined,\n      autocomplete: undefined,\n      inputmode: undefined,\n      disabled: false,\n      invalid: false,\n      state: 'default',\n      name: undefined,\n      id: undefined,\n      size: 'md',\n\n      textAlign: 'left',\n\n      prefixMinWidth: undefined,\n      prefixMaxWidth: undefined,\n      suffixMinWidth: undefined,\n      suffixMaxWidth: undefined,\n      prefixFixed: false,\n      suffixFixed: false,\n    },\n)\n\nconst emit = defineEmits<{\n  (e: 'update:modelValue', value: string): void\n}>()\n\nconst inputEl = ref<HTMLInputElement | null>(null)\n\nfunction focus(): void {\n  inputEl.value?.focus()\n}\n\ndefineExpose({\n  focus,\n})\n\nconst slots = useSlots()\n\nconst hasPrefix = computed(() => Boolean(slots.prefix))\nconst hasSuffix = computed(() => Boolean(slots.suffix))\n\nconst defaultAddonMinWidth = computed(() => {\n  const map: Record<NonNullable<typeof props.size>, string> = {\n    xs: '2rem', // w-8\n    sm: '2.25rem', // w-9\n    md: '2.5rem', // w-10\n    lg: '3rem', // w-12\n  }\n\n  return map[props.size]\n})\n\nconst prefixMinWidth = computed(() => props.prefixMinWidth ?? defaultAddonMinWidth.value)\nconst suffixMinWidth = computed(() => props.suffixMinWidth ?? defaultAddonMinWidth.value)\n\n// Жёсткая ширина для fixed-режима: max → min → дефолт.\nconst prefixFixedWidth = computed(() => props.prefixMaxWidth ?? props.prefixMinWidth ?? defaultAddonMinWidth.value)\nconst suffixFixedWidth = computed(() => props.suffixMaxWidth ?? props.suffixMinWidth ?? defaultAddonMinWidth.value)\n\nconst { prefixEl, suffixEl, measuredPrefixWidth, measuredSuffixWidth } = useAddonMeasurement(hasPrefix, hasSuffix)\n\nconst basePaddingXLen = computed(() => {\n  // Must mirror `sizeClass` horizontal padding (px-*) because inline paddings override class paddings.\n  const map: Record<NonNullable<typeof props.size>, string> = {\n    xs: '10px', // px-2.5\n    sm: '12px', // px-3\n    md: '12px', // px-3\n    lg: '16px', // px-4\n  }\n\n  return map[props.size]\n})\n\nconst inputStyle = computed(() => {\n  const leftReserved = hasPrefix.value\n    ? (props.prefixFixed ? prefixFixedWidth.value : measuredPrefixWidth.value ?? prefixMinWidth.value)\n    : '0px'\n  const rightReserved = hasSuffix.value\n    ? (props.suffixFixed ? suffixFixedWidth.value : measuredSuffixWidth.value ?? suffixMinWidth.value)\n    : '0px'\n\n  // Keep the same visual text padding as without addons (px-*), but add it on top of reserved space.\n  const left = hasPrefix.value ? addLen(leftReserved, basePaddingXLen.value) : undefined\n  const right = hasSuffix.value ? addLen(rightReserved, basePaddingXLen.value) : undefined\n\n  return {\n    paddingLeft: left,\n    paddingRight: right,\n  } as Record<string, string | undefined>\n})\n\nconst prefixStyle = computed(() => {\n  if (props.prefixFixed) {\n    return {\n      width: prefixFixedWidth.value,\n      minWidth: prefixFixedWidth.value,\n      maxWidth: prefixFixedWidth.value,\n    } as Record<string, string | undefined>\n  }\n\n  return {\n    minWidth: prefixMinWidth.value,\n    maxWidth: props.prefixMaxWidth,\n  } as Record<string, string | undefined>\n})\n\nconst suffixStyle = computed(() => {\n  if (props.suffixFixed) {\n    return {\n      width: suffixFixedWidth.value,\n      minWidth: suffixFixedWidth.value,\n      maxWidth: suffixFixedWidth.value,\n    } as Record<string, string | undefined>\n  }\n\n  return {\n    minWidth: suffixMinWidth.value,\n    maxWidth: props.suffixMaxWidth,\n  } as Record<string, string | undefined>\n})\n\nconst sizeClass = computed(() => {\n  const map: Record<NonNullable<typeof props.size>, string> = {\n    xs: 'h-7 px-2.5 text-[12px]',\n    sm: 'h-8 px-3 text-[13px]',\n    md: 'h-10 px-3 text-[14px]',\n    lg: 'h-11 px-4 text-[16px]',\n  }\n\n  return map[props.size]\n})\n\nconst textAlignClass = computed(() => {\n  const map: Record<NonNullable<typeof props.textAlign>, string> = {\n    left: 'text-left',\n    center: 'text-center',\n    right: 'text-right',\n  }\n\n  return map[props.textAlign]\n})\n\n// Border/ring/disabled — на оболочке (`focus-within`), размеры/выравнивание — на инпуте.\nconst shellClass = computed(() => {\n  const state = props.state\n\n  const borderByState: Record<typeof state, string> = {\n    default: 'border-[var(--brd)]',\n    success: 'border-[var(--gr-success)] focus-within:ring-[var(--gr-success)]',\n    warning: 'border-[var(--gr-warning)] focus-within:ring-[var(--gr-warning)]',\n    danger: 'border-[var(--gr-danger)] focus-within:ring-[var(--gr-danger)]',\n  }\n\n  return [\n    props.invalid ? borderByState.danger : borderByState[state],\n    props.disabled ? 'opacity-50 cursor-not-allowed' : '',\n  ].filter(Boolean).join(' ')\n})\n\nconst className = computed(() => {\n  return [\n    sizeClass.value,\n    textAlignClass.value,\n  ].join(' ')\n})\n\nfunction onInput(e: Event): void {\n  emit('update:modelValue', (e.target as HTMLInputElement).value)\n}\n</script>\n\n<template>\n  <div\n      class=\"relative w-full overflow-hidden rounded-md border bg-[var(--bg)] transition-colors duration-150 focus-within:ring-2 focus-within:ring-[var(--ring)]\"\n      :class=\"shellClass\"\n  >\n    <div\n        v-if=\"$slots.prefix\"\n        ref=\"prefixEl\"\n        data-testid=\"gr-input-prefix\"\n        class=\"absolute inset-y-0 left-0 flex items-center justify-center border-r border-[var(--brd)] px-2 text-[var(--muted-fg)] pointer-events-none select-none truncate\"\n        :style=\"prefixStyle\"\n        aria-hidden=\"true\"\n    >\n      <slot name=\"prefix\" />\n    </div>\n\n    <input\n        :id=\"props.id\"\n        ref=\"inputEl\"\n        v-bind=\"$attrs\"\n        :name=\"props.name\"\n        :type=\"props.type\"\n        :inputmode=\"props.inputmode\"\n        :autocomplete=\"props.autocomplete\"\n        :placeholder=\"props.placeholder\"\n        :disabled=\"props.disabled\"\n        :value=\"props.modelValue\"\n        :aria-invalid=\"props.invalid ? 'true' : undefined\"\n        class=\"w-full bg-transparent text-[var(--fg)] placeholder:text-[var(--muted-fg)] focus:placeholder:text-transparent focus:outline-none disabled:cursor-not-allowed\"\n        :class=\"className\"\n        :style=\"inputStyle\"\n        @input=\"onInput\"\n    >\n\n    <div\n        v-if=\"$slots.suffix\"\n        ref=\"suffixEl\"\n        data-testid=\"gr-input-suffix\"\n        class=\"absolute inset-y-0 right-0 flex items-center justify-center border-l border-[var(--brd)] px-2 text-[var(--muted-fg)] pointer-events-none select-none truncate\"\n        :class=\"suffixFixed ? '[direction:rtl]' : ''\"\n        :style=\"suffixStyle\"\n        aria-hidden=\"true\"\n    >\n      <slot name=\"suffix\" />\n    </div>\n  </div>\n</template>\n","<script setup lang=\"ts\">\nimport {computed, ref, useSlots} from 'vue'\n\nimport {addLen, useAddonMeasurement} from '../../composables/internal/useAddonMeasurement'\nimport type {InputHTMLAttributes} from 'vue'\n\ndefineOptions({\n  inheritAttrs: false,\n})\n\nexport type GrInputSize = 'xs' | 'sm' | 'md' | 'lg'\nexport type GrInputTextAlign = 'left' | 'center' | 'right'\n\nconst props = withDefaults(\n    defineProps<{\n      modelValue: string\n      type?: 'text' | 'email' | 'password' | 'number' | 'search'\n      placeholder?: string\n      autocomplete?: string\n      inputmode?: InputHTMLAttributes['inputmode']\n      disabled?: boolean\n      invalid?: boolean\n      state?: 'default' | 'success' | 'warning' | 'danger'\n      name?: string\n      id?: string\n      size?: GrInputSize\n\n      textAlign?: GrInputTextAlign\n\n      prefixMinWidth?: string\n      prefixMaxWidth?: string\n      suffixMinWidth?: string\n      suffixMaxWidth?: string\n      /**\n       * Фиксированная ширина у prefix/suffix: аддон получает жёсткую ширину\n       * (из `*MaxWidth` → `*MinWidth` → дефолт), а контент обрезается по краю\n       * (prefix — справа, suffix — слева). По умолчанию аддоны «растягиваются»\n       * под контент (в пределах min/max), а излишек клипается оболочкой.\n       */\n      prefixFixed?: boolean\n      suffixFixed?: boolean\n    }>(),\n    {\n      type: 'text',\n      placeholder: undefined,\n      autocomplete: undefined,\n      inputmode: undefined,\n      disabled: false,\n      invalid: false,\n      state: 'default',\n      name: undefined,\n      id: undefined,\n      size: 'md',\n\n      textAlign: 'left',\n\n      prefixMinWidth: undefined,\n      prefixMaxWidth: undefined,\n      suffixMinWidth: undefined,\n      suffixMaxWidth: undefined,\n      prefixFixed: false,\n      suffixFixed: false,\n    },\n)\n\nconst emit = defineEmits<{\n  (e: 'update:modelValue', value: string): void\n}>()\n\nconst inputEl = ref<HTMLInputElement | null>(null)\n\nfunction focus(): void {\n  inputEl.value?.focus()\n}\n\ndefineExpose({\n  focus,\n})\n\nconst slots = useSlots()\n\nconst hasPrefix = computed(() => Boolean(slots.prefix))\nconst hasSuffix = computed(() => Boolean(slots.suffix))\n\nconst defaultAddonMinWidth = computed(() => {\n  const map: Record<NonNullable<typeof props.size>, string> = {\n    xs: '2rem', // w-8\n    sm: '2.25rem', // w-9\n    md: '2.5rem', // w-10\n    lg: '3rem', // w-12\n  }\n\n  return map[props.size]\n})\n\nconst prefixMinWidth = computed(() => props.prefixMinWidth ?? defaultAddonMinWidth.value)\nconst suffixMinWidth = computed(() => props.suffixMinWidth ?? defaultAddonMinWidth.value)\n\n// Жёсткая ширина для fixed-режима: max → min → дефолт.\nconst prefixFixedWidth = computed(() => props.prefixMaxWidth ?? props.prefixMinWidth ?? defaultAddonMinWidth.value)\nconst suffixFixedWidth = computed(() => props.suffixMaxWidth ?? props.suffixMinWidth ?? defaultAddonMinWidth.value)\n\nconst { prefixEl, suffixEl, measuredPrefixWidth, measuredSuffixWidth } = useAddonMeasurement(hasPrefix, hasSuffix)\n\nconst basePaddingXLen = computed(() => {\n  // Must mirror `sizeClass` horizontal padding (px-*) because inline paddings override class paddings.\n  const map: Record<NonNullable<typeof props.size>, string> = {\n    xs: '10px', // px-2.5\n    sm: '12px', // px-3\n    md: '12px', // px-3\n    lg: '16px', // px-4\n  }\n\n  return map[props.size]\n})\n\nconst inputStyle = computed(() => {\n  const leftReserved = hasPrefix.value\n    ? (props.prefixFixed ? prefixFixedWidth.value : measuredPrefixWidth.value ?? prefixMinWidth.value)\n    : '0px'\n  const rightReserved = hasSuffix.value\n    ? (props.suffixFixed ? suffixFixedWidth.value : measuredSuffixWidth.value ?? suffixMinWidth.value)\n    : '0px'\n\n  // Keep the same visual text padding as without addons (px-*), but add it on top of reserved space.\n  const left = hasPrefix.value ? addLen(leftReserved, basePaddingXLen.value) : undefined\n  const right = hasSuffix.value ? addLen(rightReserved, basePaddingXLen.value) : undefined\n\n  return {\n    paddingLeft: left,\n    paddingRight: right,\n  } as Record<string, string | undefined>\n})\n\nconst prefixStyle = computed(() => {\n  if (props.prefixFixed) {\n    return {\n      width: prefixFixedWidth.value,\n      minWidth: prefixFixedWidth.value,\n      maxWidth: prefixFixedWidth.value,\n    } as Record<string, string | undefined>\n  }\n\n  return {\n    minWidth: prefixMinWidth.value,\n    maxWidth: props.prefixMaxWidth,\n  } as Record<string, string | undefined>\n})\n\nconst suffixStyle = computed(() => {\n  if (props.suffixFixed) {\n    return {\n      width: suffixFixedWidth.value,\n      minWidth: suffixFixedWidth.value,\n      maxWidth: suffixFixedWidth.value,\n    } as Record<string, string | undefined>\n  }\n\n  return {\n    minWidth: suffixMinWidth.value,\n    maxWidth: props.suffixMaxWidth,\n  } as Record<string, string | undefined>\n})\n\nconst sizeClass = computed(() => {\n  const map: Record<NonNullable<typeof props.size>, string> = {\n    xs: 'h-7 px-2.5 text-[12px]',\n    sm: 'h-8 px-3 text-[13px]',\n    md: 'h-10 px-3 text-[14px]',\n    lg: 'h-11 px-4 text-[16px]',\n  }\n\n  return map[props.size]\n})\n\nconst textAlignClass = computed(() => {\n  const map: Record<NonNullable<typeof props.textAlign>, string> = {\n    left: 'text-left',\n    center: 'text-center',\n    right: 'text-right',\n  }\n\n  return map[props.textAlign]\n})\n\n// Border/ring/disabled — на оболочке (`focus-within`), размеры/выравнивание — на инпуте.\nconst shellClass = computed(() => {\n  const state = props.state\n\n  const borderByState: Record<typeof state, string> = {\n    default: 'border-[var(--brd)]',\n    success: 'border-[var(--gr-success)] focus-within:ring-[var(--gr-success)]',\n    warning: 'border-[var(--gr-warning)] focus-within:ring-[var(--gr-warning)]',\n    danger: 'border-[var(--gr-danger)] focus-within:ring-[var(--gr-danger)]',\n  }\n\n  return [\n    props.invalid ? borderByState.danger : borderByState[state],\n    props.disabled ? 'opacity-50 cursor-not-allowed' : '',\n  ].filter(Boolean).join(' ')\n})\n\nconst className = computed(() => {\n  return [\n    sizeClass.value,\n    textAlignClass.value,\n  ].join(' ')\n})\n\nfunction onInput(e: Event): void {\n  emit('update:modelValue', (e.target as HTMLInputElement).value)\n}\n</script>\n\n<template>\n  <div\n      class=\"relative w-full overflow-hidden rounded-md border bg-[var(--bg)] transition-colors duration-150 focus-within:ring-2 focus-within:ring-[var(--ring)]\"\n      :class=\"shellClass\"\n  >\n    <div\n        v-if=\"$slots.prefix\"\n        ref=\"prefixEl\"\n        data-testid=\"gr-input-prefix\"\n        class=\"absolute inset-y-0 left-0 flex items-center justify-center border-r border-[var(--brd)] px-2 text-[var(--muted-fg)] pointer-events-none select-none truncate\"\n        :style=\"prefixStyle\"\n        aria-hidden=\"true\"\n    >\n      <slot name=\"prefix\" />\n    </div>\n\n    <input\n        :id=\"props.id\"\n        ref=\"inputEl\"\n        v-bind=\"$attrs\"\n        :name=\"props.name\"\n        :type=\"props.type\"\n        :inputmode=\"props.inputmode\"\n        :autocomplete=\"props.autocomplete\"\n        :placeholder=\"props.placeholder\"\n        :disabled=\"props.disabled\"\n        :value=\"props.modelValue\"\n        :aria-invalid=\"props.invalid ? 'true' : undefined\"\n        class=\"w-full bg-transparent text-[var(--fg)] placeholder:text-[var(--muted-fg)] focus:placeholder:text-transparent focus:outline-none disabled:cursor-not-allowed\"\n        :class=\"className\"\n        :style=\"inputStyle\"\n        @input=\"onInput\"\n    >\n\n    <div\n        v-if=\"$slots.suffix\"\n        ref=\"suffixEl\"\n        data-testid=\"gr-input-suffix\"\n        class=\"absolute inset-y-0 right-0 flex items-center justify-center border-l border-[var(--brd)] px-2 text-[var(--muted-fg)] pointer-events-none select-none truncate\"\n        :class=\"suffixFixed ? '[direction:rtl]' : ''\"\n        :style=\"suffixStyle\"\n        aria-hidden=\"true\"\n    >\n      <slot name=\"suffix\" />\n    </div>\n  </div>\n</template>\n"],"mappings":"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"}

package/dist/components/GrInputTag/chunks/GrInputTag-zMgFqp2g.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"GrInputTag-zMgFqp2g.js","names":[],"sources":["../../../../src/components/GrInputTag/GrInputTag.vue","../../../../src/components/GrInputTag/GrInputTag.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, ref } from 'vue'\n\nimport GrBadge from '../GrBadge/GrBadge.vue'\nimport type { GrBadgeRadius, GrBadgeSize, GrBadgeTone } from '../GrBadge'\nimport GrIcon from '../GrIcon/GrIcon.vue'\nimport IconClose from '~icons/lucide/x'\nimport { useGranularityTranslations } from '../../internal/granularityI18n'\n\nimport {\n  grInputTagInputClass,\n  grInputTagWrapperClass,\n  type GrInputTagSize,\n  type GrInputTagState,\n} from './grInputTagStyles'\n\nexport type { GrInputTagSize, GrInputTagState } from './grInputTagStyles'\n\nconst REGEX_SPECIAL_CHAR_RE = /[.*+?^${}()|[\\]\\\\]/g\n\n/**\n * Props for {@link GrInputTag}.\n * Tag-input primitive: renders a set of badges with an inline `<input>` for entering new tags.\n * Splits input by configurable `separators`, supports paste, Enter and Backspace editing.\n */\nexport interface GrInputTagProps {\n  modelValue: string[]\n  placeholder?: string\n  disabled?: boolean\n  readonly?: boolean\n  invalid?: boolean\n  state?: GrInputTagState\n  size?: GrInputTagSize\n  separators?: string[]\n  allowDuplicates?: boolean\n  trim?: boolean\n  max?: number\n  addOnBlur?: boolean\n  clearInputOnAdd?: boolean\n  tagTone?: GrBadgeTone\n  tagDark?: boolean\n  tagSize?: GrBadgeSize\n  tagRadius?: GrBadgeRadius\n  tagClosable?: boolean\n  /** i18n-friendly aria-label for the per-tag remove button. */\n  removeTagLabel?: string\n}\n\nconst props = withDefaults(\n  defineProps<GrInputTagProps>(),\n  {\n    placeholder: undefined,\n    disabled: false,\n    readonly: false,\n    invalid: false,\n    state: 'default',\n    size: 'md',\n    separators: () => [','],\n    allowDuplicates: false,\n    trim: true,\n    max: undefined,\n    addOnBlur: false,\n    clearInputOnAdd: true,\n    tagTone: 'neutral',\n    tagDark: false,\n    tagSize: 'md',\n    tagRadius: 'round',\n    tagClosable: true,\n    removeTagLabel: undefined,\n  },\n)\n\nconst emit = defineEmits<{\n  (e: 'update:modelValue', value: string[]): void\n  (e: 'add', value: string): void\n  (e: 'remove', value: string, index: number): void\n}>()\n\nconst { t } = useGranularityTranslations()\nconst resolvedRemoveTagLabel = computed(() => props.removeTagLabel ?? t('gr.inputTag.removeTag', 'Remove tag'))\n\nconst inputValue = ref('')\nconst inputEl = ref<HTMLInputElement | null>(null)\n\nfunction focus(): void {\n  inputEl.value?.focus()\n}\n\ndefineExpose({ focus })\n\nconst isMaxed = computed(() => props.max !== undefined && props.modelValue.length >= props.max)\nconst canEdit = computed(() => !props.disabled && !props.readonly)\nconst showRemove = computed(() => props.tagClosable && canEdit.value)\n\nfunction escapeRegexChar(ch: string): string {\n  return ch.replace(REGEX_SPECIAL_CHAR_RE, '\\\\$&')\n}\n\nconst splitRegex = computed(() => {\n  const seps = (props.separators ?? []).filter(Boolean).map(s => s[0]!)\n  const uniq = [...new Set([...seps, '\\n', '\\r', '\\t'])]\n  const body = uniq.map(escapeRegexChar).join('')\n  return new RegExp(`[${body}]+`, 'g')\n})\n\nfunction normalizeTag(raw: string): string {\n  return props.trim ? raw.trim() : raw\n}\n\nfunction splitToTags(raw: string): string[] {\n  return raw\n    .split(splitRegex.value)\n    .map(v => normalizeTag(v))\n    .filter(Boolean)\n}\n\nfunction addMany(rawTags: string[]): boolean {\n  if (!canEdit.value || isMaxed.value)\n    return false\n\n  const next = props.modelValue.slice()\n  let changed = false\n\n  for (const raw of rawTags) {\n    const tag = normalizeTag(raw)\n    if (!tag)\n      continue\n\n    if (!props.allowDuplicates && next.includes(tag))\n      continue\n\n    if (props.max !== undefined && next.length >= props.max)\n      break\n\n    next.push(tag)\n    changed = true\n    emit('add', tag)\n  }\n\n  if (!changed)\n    return false\n\n  emit('update:modelValue', next)\n  return true\n}\n\nfunction commitInput(): void {\n  if (!canEdit.value || isMaxed.value || !inputValue.value)\n    return\n\n  const tags = splitToTags(inputValue.value)\n  if (!tags.length)\n    return\n\n  const changed = addMany(tags)\n  if (changed && props.clearInputOnAdd)\n    inputValue.value = ''\n}\n\nfunction removeAt(index: number): void {\n  if (!canEdit.value)\n    return\n\n  const next = props.modelValue.slice()\n  const removed = next[index]\n  if (removed === undefined)\n    return\n\n  next.splice(index, 1)\n  emit('update:modelValue', next)\n  emit('remove', removed, index)\n}\n\nfunction onInput(e: Event): void {\n  inputValue.value = (e.target as HTMLInputElement).value\n}\n\nfunction onKeydown(e: KeyboardEvent): void {\n  if (!canEdit.value)\n    return\n\n  if (e.key === 'Enter') {\n    e.preventDefault()\n    commitInput()\n    return\n  }\n\n  if ((props.separators ?? []).includes(e.key)) {\n    e.preventDefault()\n    commitInput()\n    return\n  }\n\n  if (e.key === 'Backspace' && inputValue.value.length === 0 && props.modelValue.length > 0) {\n    e.preventDefault()\n    removeAt(props.modelValue.length - 1)\n  }\n}\n\nfunction onBlur(): void {\n  if (props.addOnBlur)\n    commitInput()\n}\n\nfunction onPaste(e: ClipboardEvent): void {\n  if (!canEdit.value || isMaxed.value)\n    return\n\n  const pasted = e.clipboardData?.getData('text')\n  if (!pasted)\n    return\n\n  const tags = splitToTags(pasted)\n  if (tags.length <= 1)\n    return\n\n  e.preventDefault()\n  addMany(tags)\n}\n\nconst wrapperClassName = computed(() => {\n  return grInputTagWrapperClass({\n    size: props.size,\n    state: props.state,\n    invalid: props.invalid,\n    disabled: props.disabled,\n  })\n})\n\nconst inputClassName = computed(() => {\n  return grInputTagInputClass(props.size)\n})\n\nconst placeholderText = computed(() => props.modelValue.length > 0 ? undefined : props.placeholder)\n</script>\n\n<template>\n  <div\n    data-gr-input-tag\n    data-testid=\"gr-input-tag\"\n    class=\"w-full flex flex-wrap items-center rounded-md border bg-[var(--bg)] text-[var(--fg)] transition-colors duration-150 focus-within:ring-2 focus-within:ring-[var(--ring)]\"\n    :class=\"wrapperClassName\"\n    @click=\"focus\"\n  >\n    <GrBadge\n      v-for=\"(tag, i) in modelValue\"\n      :key=\"`${tag}-${i}`\"\n      :tone=\"tagTone\"\n      :dark=\"tagDark\"\n      :size=\"tagSize\"\n      :radius=\"tagRadius\"\n      data-gr-input-tag-item\n      data-testid=\"gr-input-tag-item\"\n      :data-index=\"i\"\n    >\n      <span class=\"inline-flex items-center gap-1 align-middle\">\n        <slot name=\"tag\" :tag=\"tag\" :index=\"i\" :remove=\"() => removeAt(i)\">\n          <span class=\"truncate max-w-[18rem]\">{{ tag }}</span>\n        </slot>\n\n        <button\n          v-if=\"showRemove\"\n          type=\"button\"\n          class=\"-mr-0.5 shrink-0 inline-flex items-center justify-center rounded-[6px] p-0.5 opacity-70 hover:opacity-100 focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ring)]\"\n          :aria-label=\"resolvedRemoveTagLabel\"\n          data-gr-input-tag-remove\n          data-testid=\"gr-input-tag-remove\"\n          :data-index=\"i\"\n          @mousedown.prevent.stop\n          @click.stop=\"removeAt(i)\"\n        >\n          <GrIcon size=\"sm\" aria-hidden=\"true\">\n            <IconClose />\n          </GrIcon>\n        </button>\n      </span>\n    </GrBadge>\n\n    <input\n      ref=\"inputEl\"\n      data-gr-input-tag-input\n      data-testid=\"gr-input-tag-input\"\n      :value=\"inputValue\"\n      :disabled=\"disabled || isMaxed\"\n      :readonly=\"readonly\"\n      :placeholder=\"placeholderText\"\n      :aria-invalid=\"invalid ? 'true' : undefined\"\n      class=\"flex-1 min-w-[120px] bg-transparent border-none outline-none placeholder:text-[var(--muted-fg)]\"\n      :class=\"inputClassName\"\n      @input=\"onInput\"\n      @keydown=\"onKeydown\"\n      @blur=\"onBlur\"\n      @paste=\"onPaste\"\n    >\n  </div>\n</template>\n","<script setup lang=\"ts\">\nimport { computed, ref } from 'vue'\n\nimport GrBadge from '../GrBadge/GrBadge.vue'\nimport type { GrBadgeRadius, GrBadgeSize, GrBadgeTone } from '../GrBadge'\nimport GrIcon from '../GrIcon/GrIcon.vue'\nimport IconClose from '~icons/lucide/x'\nimport { useGranularityTranslations } from '../../internal/granularityI18n'\n\nimport {\n  grInputTagInputClass,\n  grInputTagWrapperClass,\n  type GrInputTagSize,\n  type GrInputTagState,\n} from './grInputTagStyles'\n\nexport type { GrInputTagSize, GrInputTagState } from './grInputTagStyles'\n\nconst REGEX_SPECIAL_CHAR_RE = /[.*+?^${}()|[\\]\\\\]/g\n\n/**\n * Props for {@link GrInputTag}.\n * Tag-input primitive: renders a set of badges with an inline `<input>` for entering new tags.\n * Splits input by configurable `separators`, supports paste, Enter and Backspace editing.\n */\nexport interface GrInputTagProps {\n  modelValue: string[]\n  placeholder?: string\n  disabled?: boolean\n  readonly?: boolean\n  invalid?: boolean\n  state?: GrInputTagState\n  size?: GrInputTagSize\n  separators?: string[]\n  allowDuplicates?: boolean\n  trim?: boolean\n  max?: number\n  addOnBlur?: boolean\n  clearInputOnAdd?: boolean\n  tagTone?: GrBadgeTone\n  tagDark?: boolean\n  tagSize?: GrBadgeSize\n  tagRadius?: GrBadgeRadius\n  tagClosable?: boolean\n  /** i18n-friendly aria-label for the per-tag remove button. */\n  removeTagLabel?: string\n}\n\nconst props = withDefaults(\n  defineProps<GrInputTagProps>(),\n  {\n    placeholder: undefined,\n    disabled: false,\n    readonly: false,\n    invalid: false,\n    state: 'default',\n    size: 'md',\n    separators: () => [','],\n    allowDuplicates: false,\n    trim: true,\n    max: undefined,\n    addOnBlur: false,\n    clearInputOnAdd: true,\n    tagTone: 'neutral',\n    tagDark: false,\n    tagSize: 'md',\n    tagRadius: 'round',\n    tagClosable: true,\n    removeTagLabel: undefined,\n  },\n)\n\nconst emit = defineEmits<{\n  (e: 'update:modelValue', value: string[]): void\n  (e: 'add', value: string): void\n  (e: 'remove', value: string, index: number): void\n}>()\n\nconst { t } = useGranularityTranslations()\nconst resolvedRemoveTagLabel = computed(() => props.removeTagLabel ?? t('gr.inputTag.removeTag', 'Remove tag'))\n\nconst inputValue = ref('')\nconst inputEl = ref<HTMLInputElement | null>(null)\n\nfunction focus(): void {\n  inputEl.value?.focus()\n}\n\ndefineExpose({ focus })\n\nconst isMaxed = computed(() => props.max !== undefined && props.modelValue.length >= props.max)\nconst canEdit = computed(() => !props.disabled && !props.readonly)\nconst showRemove = computed(() => props.tagClosable && canEdit.value)\n\nfunction escapeRegexChar(ch: string): string {\n  return ch.replace(REGEX_SPECIAL_CHAR_RE, '\\\\$&')\n}\n\nconst splitRegex = computed(() => {\n  const seps = (props.separators ?? []).filter(Boolean).map(s => s[0]!)\n  const uniq = [...new Set([...seps, '\\n', '\\r', '\\t'])]\n  const body = uniq.map(escapeRegexChar).join('')\n  return new RegExp(`[${body}]+`, 'g')\n})\n\nfunction normalizeTag(raw: string): string {\n  return props.trim ? raw.trim() : raw\n}\n\nfunction splitToTags(raw: string): string[] {\n  return raw\n    .split(splitRegex.value)\n    .map(v => normalizeTag(v))\n    .filter(Boolean)\n}\n\nfunction addMany(rawTags: string[]): boolean {\n  if (!canEdit.value || isMaxed.value)\n    return false\n\n  const next = props.modelValue.slice()\n  let changed = false\n\n  for (const raw of rawTags) {\n    const tag = normalizeTag(raw)\n    if (!tag)\n      continue\n\n    if (!props.allowDuplicates && next.includes(tag))\n      continue\n\n    if (props.max !== undefined && next.length >= props.max)\n      break\n\n    next.push(tag)\n    changed = true\n    emit('add', tag)\n  }\n\n  if (!changed)\n    return false\n\n  emit('update:modelValue', next)\n  return true\n}\n\nfunction commitInput(): void {\n  if (!canEdit.value || isMaxed.value || !inputValue.value)\n    return\n\n  const tags = splitToTags(inputValue.value)\n  if (!tags.length)\n    return\n\n  const changed = addMany(tags)\n  if (changed && props.clearInputOnAdd)\n    inputValue.value = ''\n}\n\nfunction removeAt(index: number): void {\n  if (!canEdit.value)\n    return\n\n  const next = props.modelValue.slice()\n  const removed = next[index]\n  if (removed === undefined)\n    return\n\n  next.splice(index, 1)\n  emit('update:modelValue', next)\n  emit('remove', removed, index)\n}\n\nfunction onInput(e: Event): void {\n  inputValue.value = (e.target as HTMLInputElement).value\n}\n\nfunction onKeydown(e: KeyboardEvent): void {\n  if (!canEdit.value)\n    return\n\n  if (e.key === 'Enter') {\n    e.preventDefault()\n    commitInput()\n    return\n  }\n\n  if ((props.separators ?? []).includes(e.key)) {\n    e.preventDefault()\n    commitInput()\n    return\n  }\n\n  if (e.key === 'Backspace' && inputValue.value.length === 0 && props.modelValue.length > 0) {\n    e.preventDefault()\n    removeAt(props.modelValue.length - 1)\n  }\n}\n\nfunction onBlur(): void {\n  if (props.addOnBlur)\n    commitInput()\n}\n\nfunction onPaste(e: ClipboardEvent): void {\n  if (!canEdit.value || isMaxed.value)\n    return\n\n  const pasted = e.clipboardData?.getData('text')\n  if (!pasted)\n    return\n\n  const tags = splitToTags(pasted)\n  if (tags.length <= 1)\n    return\n\n  e.preventDefault()\n  addMany(tags)\n}\n\nconst wrapperClassName = computed(() => {\n  return grInputTagWrapperClass({\n    size: props.size,\n    state: props.state,\n    invalid: props.invalid,\n    disabled: props.disabled,\n  })\n})\n\nconst inputClassName = computed(() => {\n  return grInputTagInputClass(props.size)\n})\n\nconst placeholderText = computed(() => props.modelValue.length > 0 ? undefined : props.placeholder)\n</script>\n\n<template>\n  <div\n    data-gr-input-tag\n    data-testid=\"gr-input-tag\"\n    class=\"w-full flex flex-wrap items-center rounded-md border bg-[var(--bg)] text-[var(--fg)] transition-colors duration-150 focus-within:ring-2 focus-within:ring-[var(--ring)]\"\n    :class=\"wrapperClassName\"\n    @click=\"focus\"\n  >\n    <GrBadge\n      v-for=\"(tag, i) in modelValue\"\n      :key=\"`${tag}-${i}`\"\n      :tone=\"tagTone\"\n      :dark=\"tagDark\"\n      :size=\"tagSize\"\n      :radius=\"tagRadius\"\n      data-gr-input-tag-item\n      data-testid=\"gr-input-tag-item\"\n      :data-index=\"i\"\n    >\n      <span class=\"inline-flex items-center gap-1 align-middle\">\n        <slot name=\"tag\" :tag=\"tag\" :index=\"i\" :remove=\"() => removeAt(i)\">\n          <span class=\"truncate max-w-[18rem]\">{{ tag }}</span>\n        </slot>\n\n        <button\n          v-if=\"showRemove\"\n          type=\"button\"\n          class=\"-mr-0.5 shrink-0 inline-flex items-center justify-center rounded-[6px] p-0.5 opacity-70 hover:opacity-100 focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--ring)]\"\n          :aria-label=\"resolvedRemoveTagLabel\"\n          data-gr-input-tag-remove\n          data-testid=\"gr-input-tag-remove\"\n          :data-index=\"i\"\n          @mousedown.prevent.stop\n          @click.stop=\"removeAt(i)\"\n        >\n          <GrIcon size=\"sm\" aria-hidden=\"true\">\n            <IconClose />\n          </GrIcon>\n        </button>\n      </span>\n    </GrBadge>\n\n    <input\n      ref=\"inputEl\"\n      data-gr-input-tag-input\n      data-testid=\"gr-input-tag-input\"\n      :value=\"inputValue\"\n      :disabled=\"disabled || isMaxed\"\n      :readonly=\"readonly\"\n      :placeholder=\"placeholderText\"\n      :aria-invalid=\"invalid ? 'true' : undefined\"\n      class=\"flex-1 min-w-[120px] bg-transparent border-none outline-none placeholder:text-[var(--muted-fg)]\"\n      :class=\"inputClassName\"\n      @input=\"onInput\"\n      @keydown=\"onKeydown\"\n      @blur=\"onBlur\"\n      @paste=\"onPaste\"\n    >\n  </div>\n</template>\n"],"mappings":"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"}

package/dist/components/GrList/chunks/GrList-Dx772Ns4.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"GrList-Dx772Ns4.js","names":["$slots"],"sources":["../../../../src/components/GrList/GrList.vue","../../../../src/components/GrList/GrList.vue","../../../../src/components/GrList/GrListItem.vue","../../../../src/components/GrList/GrListItem.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport GrCard from '../GrCard'\n\nexport interface GrListProps {\n  /** Показывать ли горизонтальные разделители между элементами (по умолчанию — да). */\n  divided?: boolean\n}\n\nwithDefaults(defineProps<GrListProps>(), {\n  divided: true,\n})\n</script>\n\n<template>\n  <GrCard>\n    <div\n      v-if=\"divided\"\n      role=\"list\"\n      class=\"divide-y divide-[var(--brd)]\"\n    >\n      <slot />\n    </div>\n    <div\n      v-else\n      role=\"list\"\n    >\n      <slot />\n    </div>\n  </GrCard>\n</template>","<script setup lang=\"ts\">\nimport GrCard from '../GrCard'\n\nexport interface GrListProps {\n  /** Показывать ли горизонтальные разделители между элементами (по умолчанию — да). */\n  divided?: boolean\n}\n\nwithDefaults(defineProps<GrListProps>(), {\n  divided: true,\n})\n</script>\n\n<template>\n  <GrCard>\n    <div\n      v-if=\"divided\"\n      role=\"list\"\n      class=\"divide-y divide-[var(--brd)]\"\n    >\n      <slot />\n    </div>\n    <div\n      v-else\n      role=\"list\"\n    >\n      <slot />\n    </div>\n  </GrCard>\n</template>","<script setup lang=\"ts\">\nimport { computed, useSlots } from 'vue'\n\nexport type GrListItemDensity = 'compact' | 'regular'\n\nexport interface GrListItemProps {\n  /** Заголовок строки. Если передан слот `#title`, проп игнорируется. */\n  title?: string\n  /** Описание под заголовком. Если передан слот `#description`, проп игнорируется. */\n  description?: string\n  /** Плотность вертикальных отступов: `regular` — 12px, `compact` — 8px. */\n  density?: GrListItemDensity\n}\n\nconst props = withDefaults(defineProps<GrListItemProps>(), {\n  title: undefined,\n  description: undefined,\n  density: 'regular',\n})\n\nconst slots = useSlots()\n\nconst paddingClass = computed(() =>\n  props.density === 'compact' ? 'px-4 py-2' : 'px-4 py-3',\n)\n\nconst hasTitle = computed(() => !!slots.title || !!props.title)\nconst hasDescription = computed(() => !!slots.description || !!props.description)\n</script>\n\n<template>\n  <div\n    role=\"listitem\"\n    class=\"flex items-start justify-between gap-4\"\n    :class=\"paddingClass\"\n  >\n    <div v-if=\"$slots.prefix\" class=\"shrink-0\">\n      <slot name=\"prefix\" />\n    </div>\n    <div class=\"min-w-0 flex-1\">\n      <div v-if=\"hasTitle\" class=\"text-[13px] font-700\">\n        <slot name=\"title\">\n{{ title }}\n</slot>\n      </div>\n      <div\n        v-if=\"hasDescription\"\n        class=\"text-[13px] text-[var(--muted-fg)] mt-0.5\"\n      >\n        <slot name=\"description\">\n{{ description }}\n</slot>\n      </div>\n    </div>\n    <div v-if=\"$slots.default\" class=\"shrink-0\">\n      <slot />\n    </div>\n  </div>\n</template>","<script setup lang=\"ts\">\nimport { computed, useSlots } from 'vue'\n\nexport type GrListItemDensity = 'compact' | 'regular'\n\nexport interface GrListItemProps {\n  /** Заголовок строки. Если передан слот `#title`, проп игнорируется. */\n  title?: string\n  /** Описание под заголовком. Если передан слот `#description`, проп игнорируется. */\n  description?: string\n  /** Плотность вертикальных отступов: `regular` — 12px, `compact` — 8px. */\n  density?: GrListItemDensity\n}\n\nconst props = withDefaults(defineProps<GrListItemProps>(), {\n  title: undefined,\n  description: undefined,\n  density: 'regular',\n})\n\nconst slots = useSlots()\n\nconst paddingClass = computed(() =>\n  props.density === 'compact' ? 'px-4 py-2' : 'px-4 py-3',\n)\n\nconst hasTitle = computed(() => !!slots.title || !!props.title)\nconst hasDescription = computed(() => !!slots.description || !!props.description)\n</script>\n\n<template>\n  <div\n    role=\"listitem\"\n    class=\"flex items-start justify-between gap-4\"\n    :class=\"paddingClass\"\n  >\n    <div v-if=\"$slots.prefix\" class=\"shrink-0\">\n      <slot name=\"prefix\" />\n    </div>\n    <div class=\"min-w-0 flex-1\">\n      <div v-if=\"hasTitle\" class=\"text-[13px] font-700\">\n        <slot name=\"title\">\n{{ title }}\n</slot>\n      </div>\n      <div\n        v-if=\"hasDescription\"\n        class=\"text-[13px] text-[var(--muted-fg)] mt-0.5\"\n      >\n        <slot name=\"description\">\n{{ description }}\n</slot>\n      </div>\n    </div>\n    <div v-if=\"$slots.default\" class=\"shrink-0\">\n      <slot />\n    </div>\n  </div>\n</template>"],"mappings":";;;;;;;;;;;;;;;;;;;;;;uBAcE,YAcS,MAAA,cAAA,GAAA,MAAA;2BAPD,CALE,QAAA,WAAA,UAAA,GADR,mBAMM,OANN,cAMM,CADJ,WAAQ,KAAA,QAAA,SAAA,CAAA,CAAA,MAAA,UAAA,GAEV,mBAKM,OALN,cAKM,CADJ,WAAQ,KAAA,QAAA,SAAA,CAAA,CAAA,EAAA,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EEZd,MAAM,QAAQ;EAMd,MAAM,QAAQ,SAAS;EAEvB,MAAM,eAAe,eACnB,MAAM,YAAY,YAAY,cAAc,WAC9C;EAEA,MAAM,WAAW,eAAe,CAAC,CAAC,MAAM,SAAS,CAAC,CAAC,MAAM,KAAK;EAC9D,MAAM,iBAAiB,eAAe,CAAC,CAAC,MAAM,eAAe,CAAC,CAAC,MAAM,WAAW;;uBAI9E,mBA0BM,OAAA;IAzBJ,MAAK;IACL,OAAK,eAAA,CAAC,0CACE,aAAA,KAAY,CAAA;;IAETA,KAAAA,OAAO,UAAA,UAAA,GAAlB,mBAEM,OAFN,YAEM,CADJ,WAAsB,KAAA,QAAA,QAAA,CAAA,CAAA,KAAA,mBAAA,IAAA,IAAA;IAExB,mBAcM,OAdN,YAcM,CAbO,SAAA,SAAA,UAAA,GAAX,mBAIM,OAJN,YAIM,CAHJ,WAED,KAAA,QAAA,SAAA,CAAA,SAAA,CAAA,gBAAA,gBADJ,QAAA,KAAK,GAAA,CAAA,CAAA,CAAA,CAAA,CAAA,KAAA,mBAAA,IAAA,IAAA,GAIM,eAAA,SAAA,UAAA,GADR,mBAOM,OAPN,YAOM,CAHJ,WAED,KAAA,QAAA,eAAA,CAAA,SAAA,CAAA,gBAAA,gBADJ,QAAA,WAAW,GAAA,CAAA,CAAA,CAAA,CAAA,CAAA,KAAA,mBAAA,IAAA,IAAA,CAAA,CAAA;IAICA,KAAAA,OAAO,WAAA,UAAA,GAAlB,mBAEM,OAFN,YAEM,CADJ,WAAQ,KAAA,QAAA,SAAA,CAAA,CAAA,KAAA,mBAAA,IAAA,IAAA"}

package/dist/components/GrLoading/chunks/GrLoading--X_7rdbb.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"GrLoading--X_7rdbb.js","names":[],"sources":["../../../../src/components/GrLoading/GrLoading.vue","../../../../src/components/GrLoading/GrLoading.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, type Component } from 'vue'\n\nimport IconLoader from '~icons/lucide/loader-circle'\n\nimport { grLoadingRootClass } from './grLoadingStyles'\n\nconst DEFAULT_LOADING_TEXT = 'Loading...'\n\n/**\n * Props for {@link GrLoading}.\n * Overlay primitive that renders a centered spinner with optional text above sibling content.\n * Use `fullscreen` to cover the whole viewport, otherwise overlays the nearest positioned ancestor.\n */\nexport interface GrLoadingProps {\n  /** Text under the spinner. Pass an empty string to hide the text entirely. Defaults to `'Loading...'`. */\n  text?: string\n  /** Custom spinner component (rendered instead of the default loader icon). */\n  spinner?: Component\n  /** Extra classes for the spinner element. */\n  spinnerClass?: string\n  /** When `true` (default), the default spinner rotates via `@keyframes gr-loading-spin`. */\n  animated?: boolean\n  /** Custom CSS `background-color`. When set, disables the default `bg-black/25` dim. */\n  background?: string\n  /** Cover the whole viewport (`position: fixed`) instead of the nearest positioned ancestor. */\n  fullscreen?: boolean\n  /** Custom `z-index`. */\n  zIndex?: number\n  /** Extra classes appended to the overlay root. */\n  customClass?: string\n}\n\nconst props = withDefaults(\n  defineProps<GrLoadingProps>(),\n  {\n    text: undefined,\n    spinner: undefined,\n    spinnerClass: undefined,\n    animated: true,\n    background: undefined,\n    fullscreen: false,\n    zIndex: undefined,\n    customClass: undefined,\n  },\n)\n\nconst Spinner = computed(() => props.spinner ?? IconLoader)\n\nconst displayText = computed(() => props.text ?? DEFAULT_LOADING_TEXT)\n\nconst rootClass = computed(() => {\n  return grLoadingRootClass({\n    fullscreen: props.fullscreen,\n    hasBackground: props.background !== undefined,\n    customClass: props.customClass,\n  })\n})\n\nconst rootStyle = computed(() => {\n  return {\n    backgroundColor: props.background,\n    zIndex: props.zIndex != null ? String(props.zIndex) : undefined,\n  } as Record<string, string | undefined>\n})\n\nconst spinnerClassName = computed(() => props.spinnerClass)\n</script>\n\n<template>\n  <div\n    data-gr-loading\n    class=\"flex items-center justify-center cursor-wait select-none pointer-events-auto\"\n    :class=\"rootClass\"\n    :style=\"rootStyle\"\n    role=\"status\"\n    aria-live=\"polite\"\n  >\n    <div\n      data-gr-loading-panel\n      class=\"flex flex-col items-center justify-center gap-2 text-center rounded-lg bg-[var(--bg)]/55 px-5 py-4 shadow-lg\"\n    >\n      <component\n        :is=\"Spinner\"\n        data-gr-loading-spinner\n        class=\"gr-loading__spinner h-7 w-7 text-[var(--muted-fg)]\"\n        :class=\"[animated ? 'gr-loading__spinner--animated' : '', spinnerClassName]\"\n        aria-hidden=\"true\"\n      />\n      <div v-if=\"displayText\" data-gr-loading-text class=\"text-sm text-[var(--muted-fg)]\">\n        {{ displayText }}\n      </div>\n    </div>\n  </div>\n</template>\n\n<style>\n@keyframes gr-loading-spin {\n  to {\n    transform: rotate(360deg);\n  }\n}\n.gr-loading__spinner--animated {\n  transform-origin: center;\n  animation: gr-loading-spin 1s linear infinite;\n}\n</style>\n","<script setup lang=\"ts\">\nimport { computed, type Component } from 'vue'\n\nimport IconLoader from '~icons/lucide/loader-circle'\n\nimport { grLoadingRootClass } from './grLoadingStyles'\n\nconst DEFAULT_LOADING_TEXT = 'Loading...'\n\n/**\n * Props for {@link GrLoading}.\n * Overlay primitive that renders a centered spinner with optional text above sibling content.\n * Use `fullscreen` to cover the whole viewport, otherwise overlays the nearest positioned ancestor.\n */\nexport interface GrLoadingProps {\n  /** Text under the spinner. Pass an empty string to hide the text entirely. Defaults to `'Loading...'`. */\n  text?: string\n  /** Custom spinner component (rendered instead of the default loader icon). */\n  spinner?: Component\n  /** Extra classes for the spinner element. */\n  spinnerClass?: string\n  /** When `true` (default), the default spinner rotates via `@keyframes gr-loading-spin`. */\n  animated?: boolean\n  /** Custom CSS `background-color`. When set, disables the default `bg-black/25` dim. */\n  background?: string\n  /** Cover the whole viewport (`position: fixed`) instead of the nearest positioned ancestor. */\n  fullscreen?: boolean\n  /** Custom `z-index`. */\n  zIndex?: number\n  /** Extra classes appended to the overlay root. */\n  customClass?: string\n}\n\nconst props = withDefaults(\n  defineProps<GrLoadingProps>(),\n  {\n    text: undefined,\n    spinner: undefined,\n    spinnerClass: undefined,\n    animated: true,\n    background: undefined,\n    fullscreen: false,\n    zIndex: undefined,\n    customClass: undefined,\n  },\n)\n\nconst Spinner = computed(() => props.spinner ?? IconLoader)\n\nconst displayText = computed(() => props.text ?? DEFAULT_LOADING_TEXT)\n\nconst rootClass = computed(() => {\n  return grLoadingRootClass({\n    fullscreen: props.fullscreen,\n    hasBackground: props.background !== undefined,\n    customClass: props.customClass,\n  })\n})\n\nconst rootStyle = computed(() => {\n  return {\n    backgroundColor: props.background,\n    zIndex: props.zIndex != null ? String(props.zIndex) : undefined,\n  } as Record<string, string | undefined>\n})\n\nconst spinnerClassName = computed(() => props.spinnerClass)\n</script>\n\n<template>\n  <div\n    data-gr-loading\n    class=\"flex items-center justify-center cursor-wait select-none pointer-events-auto\"\n    :class=\"rootClass\"\n    :style=\"rootStyle\"\n    role=\"status\"\n    aria-live=\"polite\"\n  >\n    <div\n      data-gr-loading-panel\n      class=\"flex flex-col items-center justify-center gap-2 text-center rounded-lg bg-[var(--bg)]/55 px-5 py-4 shadow-lg\"\n    >\n      <component\n        :is=\"Spinner\"\n        data-gr-loading-spinner\n        class=\"gr-loading__spinner h-7 w-7 text-[var(--muted-fg)]\"\n        :class=\"[animated ? 'gr-loading__spinner--animated' : '', spinnerClassName]\"\n        aria-hidden=\"true\"\n      />\n      <div v-if=\"displayText\" data-gr-loading-text class=\"text-sm text-[var(--muted-fg)]\">\n        {{ displayText }}\n      </div>\n    </div>\n  </div>\n</template>\n\n<style>\n@keyframes gr-loading-spin {\n  to {\n    transform: rotate(360deg);\n  }\n}\n.gr-loading__spinner--animated {\n  transform-origin: center;\n  animation: gr-loading-spin 1s linear infinite;\n}\n</style>\n"],"mappings":";;;;;;;;;;;;;AAOA,IAAM,uBAAuB;;;;;;;;;;;;;;;;;;;;;;EA0B7B,MAAM,QAAQ;EAcd,MAAM,UAAU,eAAe,MAAM,WAAW,qBAAU;EAE1D,MAAM,cAAc,eAAe,MAAM,QAAQ,oBAAoB;EAErE,MAAM,YAAY,eAAe;GAC/B,OAAO,mBAAmB;IACxB,YAAY,MAAM;IAClB,eAAe,MAAM,eAAe,KAAA;IACpC,aAAa,MAAM;GACrB,CAAC;EACH,CAAC;EAED,MAAM,YAAY,eAAe;GAC/B,OAAO;IACL,iBAAiB,MAAM;IACvB,QAAQ,MAAM,UAAU,OAAO,OAAO,MAAM,MAAM,IAAI,KAAA;GACxD;EACF,CAAC;EAED,MAAM,mBAAmB,eAAe,MAAM,YAAY;;uBAIxD,mBAuBM,OAAA;IAtBJ,mBAAA;IACA,OAAK,eAAA,CAAC,gFACE,UAAA,KAAS,CAAA;IAChB,OAAK,eAAE,UAAA,KAAS;IACjB,MAAK;IACL,aAAU;OAEV,mBAcM,OAdN,YAcM,EAAA,UAAA,GAVJ,YAME,wBALK,QAAA,KAAO,GAAA;IACZ,2BAAA;IACA,OAAK,eAAA,CAAC,sDAAoD,CACjD,QAAA,WAAQ,kCAAA,IAAyC,iBAAA,KAAgB,CAAA,CAAA;IAC1E,eAAY;4BAEH,YAAA,SAAA,UAAA,GAAX,mBAEM,OAFN,YAEM,gBADD,YAAA,KAAW,GAAA,CAAA,KAAA,mBAAA,IAAA,IAAA,CAAA,CAAA,CAAA,GAAA,CAAA"}

package/dist/components/GrModal/chunks/GrModal-BkjW9jZS.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"GrModal-BkjW9jZS.js","names":["$slots"],"sources":["../../../../src/components/GrModal/grModalEscStack.ts","../../../../src/components/GrModal/grModalTopStack.ts","../../../../src/components/GrModal/GrModal.vue","../../../../src/components/GrModal/GrModal.vue"],"sourcesContent":["/**\n * grModalEscStack — общий стек открытых `GrModal` для корректной обработки Esc.\n *\n * Зачем нужен:\n * HeadlessUI вешает обработчик Escape на `window` у каждого открытого `<Dialog>`.\n * Когда модалки рендерятся в разных деревьях приложения (например, диалоги\n * `useDialogService` монтируются отдельным `render()` в `document.body`), их\n * HeadlessUI-стек не общий, и каждый `<Dialog>` считает себя верхним. В итоге\n * Esc перехватывает обработчик той модалки, что смонтирована раньше (нижней),\n * а реально верхнее окно (последнее открытое) остаётся.\n *\n * Решение: единый capture-обработчик на `window`, который срабатывает раньше\n * обработчиков HeadlessUI, гасит событие (`stopImmediatePropagation`) и\n * закрывает только верхнюю (последнюю зарегистрированную) модалку. Так Esc\n * всегда адресуется верхнему окну независимо от дерева рендера.\n */\n\nexport interface GrModalEscEntry {\n  /** Уникальный id зарегистрированной модалки. */\n  id: number\n  /** Должна ли модалка закрываться по Esc (реактивный геттер `closeOnEsc`). */\n  shouldClose: () => boolean\n  /** Закрыть модалку (эмит `update:modelValue=false`). */\n  close: () => void\n}\n\nconst stack: GrModalEscEntry[] = []\nlet listening = false\nlet nextId = 1\n\nfunction handleKeydown(event: KeyboardEvent): void {\n  if (event.key !== 'Escape') return\n  if (stack.length === 0) return\n\n  // Верхняя модалка — последняя зарегистрированная.\n  const top = stack[stack.length - 1]\n\n  // Перехватываем Esc раньше HeadlessUI и нижних модалок: даже если верхнее\n  // окно не закрывается (`closeOnEsc=false`), событие не должно «проваливаться»\n  // к нижним окнам.\n  event.preventDefault()\n  event.stopPropagation()\n  if (typeof event.stopImmediatePropagation === 'function')\n    event.stopImmediatePropagation()\n\n  if (top.shouldClose()) top.close()\n}\n\nfunction startListening(): void {\n  if (listening) return\n  if (typeof window === 'undefined') return\n  // Capture-фаза, чтобы опередить window-обработчик Escape HeadlessUI.\n  window.addEventListener('keydown', handleKeydown, true)\n  listening = true\n}\n\nfunction stopListening(): void {\n  if (!listening) return\n  if (typeof window === 'undefined') return\n  window.removeEventListener('keydown', handleKeydown, true)\n  listening = false\n}\n\n/** Регистрирует открытую модалку как верхнюю и возвращает её id. */\nexport function pushGrModalEsc(entry: Omit<GrModalEscEntry, 'id'>): number {\n  const id = nextId++\n  stack.push({ ...entry, id })\n  startListening()\n  return id\n}\n\n/** Снимает модалку со стека (при закрытии или размонтировании). */\nexport function removeGrModalEsc(id: number): void {\n  const index = stack.findIndex(item => item.id === id)\n  if (index >= 0) stack.splice(index, 1)\n  if (stack.length === 0) stopListening()\n}\n\n/** Тестовая/служебная очистка стека. */\nexport function resetGrModalEscStack(): void {\n  stack.splice(0, stack.length)\n  stopListening()\n}\n","/**\n * grModalTopStack — общий стек открытых `GrModal` для вычисления «верхнего»\n * (последнего открытого) окна независимо от дерева рендера.\n *\n * Зачем нужен:\n * HeadlessUI ловит фокус (`FocusTrap` с `FocusLock`) у каждого открытого\n * `<Dialog>` и помечает остальную часть страницы как inert. Когда модалки\n * рендерятся в разных деревьях (например, диалоги `useDialogService`\n * монтируются отдельным `render()` в `document.body`), их HeadlessUI-стек не\n * общий: каждый `<Dialog>` считает себя верхним и продолжает удерживать фокус.\n * В итоге нижнее окно «ворует» фокус у верхнего диалога — нельзя, например,\n * сфокусировать input в открытом поверх `prompt`.\n *\n * Решение: единый стек регистраций. Верхней считается последняя\n * зарегистрированная модалка. Все нижние окна уведомляются (`setTopmost(false)`)\n * и помечают свой корень `inert`, освобождая фокус для верхнего окна. Когда\n * верхнее окно закрывается, следующая по стеку модалка снова становится\n * верхней (`setTopmost(true)`) и снимает `inert`.\n */\n\nexport interface GrModalTopEntry {\n  /** Уникальный id зарегистрированной модалки. */\n  id: number\n  /** Колбэк-уведомление: является ли модалка сейчас верхней. */\n  setTopmost: (isTopmost: boolean) => void\n}\n\nconst stack: GrModalTopEntry[] = []\nlet nextId = 1\n\n/** Пересчитывает «верхнее» окно и уведомляет все зарегистрированные модалки. */\nfunction sync(): void {\n  const lastIndex = stack.length - 1\n  stack.forEach((entry, index) => entry.setTopmost(index === lastIndex))\n}\n\n/** Регистрирует открытую модалку как верхнюю и возвращает её id. */\nexport function pushGrModalTop(entry: Omit<GrModalTopEntry, 'id'>): number {\n  const id = nextId++\n  stack.push({ ...entry, id })\n  sync()\n  return id\n}\n\n/** Снимает модалку со стека (при закрытии или размонтировании). */\nexport function removeGrModalTop(id: number): void {\n  const index = stack.findIndex(item => item.id === id)\n  if (index >= 0) stack.splice(index, 1)\n  sync()\n}\n\n/** Тестовая/служебная очистка стека. */\nexport function resetGrModalTopStack(): void {\n  stack.splice(0, stack.length)\n}\n","<script setup lang=\"ts\">\n/**\n * GrModal — GR-примитив модального окна на базе `@headlessui/vue`.\n *\n * Публичный API:\n * - `modelValue` (v-model) — открыто/закрыто;\n * - `size` — размер панели (`sm | md | lg | xl | full`);\n * - `closeOnBackdrop` (default: true) — закрывать при клике по оверлею;\n * - `closeOnEsc` (default: true) — закрывать по Esc;\n * - слоты `#title` / `#description` — если переданы, оборачиваются в\n *   `DialogTitle` / `DialogDescription` (связь через `aria-labelledby` /\n *   `aria-describedby` ставится HeadlessUI автоматически).\n *\n * Esc обрабатывается через общий стек открытых модалок (`grModalEscStack`):\n * единый capture-обработчик на `window` закрывает только верхнюю (последнюю\n * открытую) модалку и опережает window-обработчик Escape HeadlessUI. Это\n * чинит кейс, когда поверх `GrModal` открыт диалог `useDialogService` (другое\n * дерево рендера): Esc закрывает именно верхний диалог, а не нижнее окно.\n * Клик по оверлею (backdrop) по-прежнему идёт через `@close` HeadlessUI;\n * источник закрытия различается через ref `closeReason`.\n */\nimport { computed, onBeforeUnmount, ref, watch } from 'vue'\nimport { Dialog, DialogDescription, DialogPanel, DialogTitle, TransitionChild, TransitionRoot } from '@headlessui/vue'\n\nimport { pushGrModalEsc, removeGrModalEsc } from './grModalEscStack'\nimport { pushGrModalTop, removeGrModalTop } from './grModalTopStack'\n\nimport {\n  type GrModalSize,\n  getGrModalPanelClass,\n  layout,\n  overlay as overlayClass,\n  overlayTransition,\n  panelTransition,\n  root as rootClass,\n  shell,\n} from './grModalStyles'\n\nexport interface GrModalProps {\n  modelValue: boolean\n  closeOnBackdrop?: boolean\n  closeOnEsc?: boolean\n  size?: GrModalSize\n}\n\nconst props = withDefaults(defineProps<GrModalProps>(), {\n  closeOnBackdrop: true,\n  closeOnEsc: true,\n  size: 'md',\n})\n\nconst emit = defineEmits<{\n  (e: 'update:modelValue', value: boolean): void\n}>()\n\nconst panelClass = computed(() => getGrModalPanelClass(props.size))\n\n// Ссылка на панель используется как `initialFocus` для HeadlessUI `<Dialog>`:\n// панель имеет `tabindex=\"-1\"`, поэтому всегда фокусируема программно. Это\n// убирает предупреждение «There are no focusable elements inside the\n// <FocusTrap />», которое HeadlessUI выводит, когда не находит фокусируемого\n// элемента (в т.ч. когда контент окна временно помечен `inert`).\nconst panelRef = ref<HTMLElement | null>(null)\n\n// Является ли это окно верхним (последним открытым) в общем стеке модалок.\n// Когда поверх открыт другой `GrModal`/диалог сервиса, окно перестаёт быть\n// верхним и помечается `inert`, чтобы не «воровать» фокус у верхнего окна.\nconst isTopmost = ref(true)\n\n// `inert` ставится только на нижние (не верхние) открытые окна. Inert-поддерево\n// не интерактивно и не фокусируемо, поэтому FocusLock нижнего `<Dialog>`\n// перестаёт возвращать фокус себе — верхний диалог удерживает фокус сам.\nconst inertAttr = computed(() => (props.modelValue && !isTopmost.value ? '' : undefined))\n\n// SSR-guard: на сервере `document.body` недоступен — отключаем teleport,\n// а в клиенте включаем после маунта.\nconst isClient = typeof window !== 'undefined'\n\n// Источник закрытия от HeadlessUI `<Dialog>` — либо Esc, либо клик по оверлею.\n// Различаем их, чтобы `closeOnBackdrop` и `closeOnEsc` работали независимо.\nconst closeReason = ref<'backdrop' | 'esc' | null>(null)\n\nfunction close(): void {\n  emit('update:modelValue', false)\n}\n\nfunction onDialogClose(): void {\n  const reason = closeReason.value\n  closeReason.value = null\n\n  if (reason === 'esc') {\n    if (props.closeOnEsc) close()\n    return\n  }\n\n  // По умолчанию (клик по оверлею или программный вызов `@close`)\n  // уважаем `closeOnBackdrop`.\n  if (props.closeOnBackdrop) close()\n}\n\nfunction onRootKeydown(event: KeyboardEvent): void {\n  if (event.key === 'Escape') closeReason.value = 'esc'\n}\n\n// ————— Esc-стек: гарантирует, что Esc закрывает именно верхнюю (последнюю\n// открытую) модалку, даже если окна живут в разных деревьях рендера\n// (например, диалоги `useDialogService` поверх `GrModal`).\nlet escEntryId: number | null = null\nlet topEntryId: number | null = null\n\nfunction registerEsc(): void {\n  if (escEntryId !== null) return\n  escEntryId = pushGrModalEsc({\n    shouldClose: () => props.closeOnEsc,\n    close,\n  })\n}\n\nfunction unregisterEsc(): void {\n  if (escEntryId === null) return\n  removeGrModalEsc(escEntryId)\n  escEntryId = null\n}\n\nfunction registerTop(): void {\n  if (topEntryId !== null) return\n  topEntryId = pushGrModalTop({\n    setTopmost: (value) => { isTopmost.value = value },\n  })\n}\n\nfunction unregisterTop(): void {\n  if (topEntryId === null) return\n  removeGrModalTop(topEntryId)\n  topEntryId = null\n  isTopmost.value = true\n}\n\nfunction onOverlayPointerDown(): void {\n  closeReason.value = 'backdrop'\n}\n\n// ————— Scroll lock на `<body>` на время открытия.\n// HeadlessUI Vue этого не делает автоматически, а фон скроллится —\n// для GR-примитива это мешающий UX.\nlet savedBodyOverflow: string | null = null\n\nfunction lockBodyScroll(): void {\n  if (!isClient) return\n  if (savedBodyOverflow !== null) return\n  savedBodyOverflow = document.body.style.overflow\n  document.body.style.overflow = 'hidden'\n}\n\nfunction unlockBodyScroll(): void {\n  if (!isClient) return\n  if (savedBodyOverflow === null) return\n  document.body.style.overflow = savedBodyOverflow\n  savedBodyOverflow = null\n}\n\nwatch(\n  () => props.modelValue,\n  (value) => {\n    if (value) {\n      lockBodyScroll()\n      registerEsc()\n      registerTop()\n    }\n    else {\n      unlockBodyScroll()\n      unregisterEsc()\n      unregisterTop()\n    }\n  },\n  { immediate: true },\n)\n\nonBeforeUnmount(() => {\n  unlockBodyScroll()\n  unregisterEsc()\n  unregisterTop()\n})\n\n</script>\n\n<template>\n  <teleport to=\"body\" :disabled=\"!isClient\">\n    <TransitionRoot :show=\"modelValue\" as=\"template\">\n      <Dialog\n        as=\"div\"\n        :class=\"rootClass\"\n        :initial-focus=\"panelRef\"\n        :inert=\"inertAttr\"\n        @close=\"onDialogClose\"\n        @keydown.capture=\"onRootKeydown\"\n      >\n        <div :class=\"shell\">\n          <div :class=\"layout\">\n            <TransitionChild\n              as=\"template\"\n              :enter=\"overlayTransition.enter\"\n              :enter-from=\"overlayTransition.enterFrom\"\n              :enter-to=\"overlayTransition.enterTo\"\n              :leave=\"overlayTransition.leave\"\n              :leave-from=\"overlayTransition.leaveFrom\"\n              :leave-to=\"overlayTransition.leaveTo\"\n            >\n              <div\n                data-gr-modal-overlay\n                :class=\"overlayClass\"\n                aria-hidden=\"true\"\n                @pointerdown=\"onOverlayPointerDown\"\n              />\n            </TransitionChild>\n\n            <TransitionChild\n              as=\"template\"\n              :enter=\"panelTransition.enter\"\n              :enter-from=\"panelTransition.enterFrom\"\n              :enter-to=\"panelTransition.enterTo\"\n              :leave=\"panelTransition.leave\"\n              :leave-from=\"panelTransition.leaveFrom\"\n              :leave-to=\"panelTransition.leaveTo\"\n            >\n              <DialogPanel\n                ref=\"panelRef\"\n                data-gr-modal-panel\n                tabindex=\"-1\"\n                :class=\"panelClass\"\n              >\n                <DialogTitle v-if=\"$slots.title\" as=\"div\" data-gr-modal-title>\n                  <slot name=\"title\" />\n                </DialogTitle>\n                <DialogDescription v-if=\"$slots.description\" as=\"div\" data-gr-modal-description>\n                  <slot name=\"description\" />\n                </DialogDescription>\n                <slot />\n              </DialogPanel>\n            </TransitionChild>\n          </div>\n        </div>\n      </Dialog>\n    </TransitionRoot>\n  </teleport>\n</template>\n","<script setup lang=\"ts\">\n/**\n * GrModal — GR-примитив модального окна на базе `@headlessui/vue`.\n *\n * Публичный API:\n * - `modelValue` (v-model) — открыто/закрыто;\n * - `size` — размер панели (`sm | md | lg | xl | full`);\n * - `closeOnBackdrop` (default: true) — закрывать при клике по оверлею;\n * - `closeOnEsc` (default: true) — закрывать по Esc;\n * - слоты `#title` / `#description` — если переданы, оборачиваются в\n *   `DialogTitle` / `DialogDescription` (связь через `aria-labelledby` /\n *   `aria-describedby` ставится HeadlessUI автоматически).\n *\n * Esc обрабатывается через общий стек открытых модалок (`grModalEscStack`):\n * единый capture-обработчик на `window` закрывает только верхнюю (последнюю\n * открытую) модалку и опережает window-обработчик Escape HeadlessUI. Это\n * чинит кейс, когда поверх `GrModal` открыт диалог `useDialogService` (другое\n * дерево рендера): Esc закрывает именно верхний диалог, а не нижнее окно.\n * Клик по оверлею (backdrop) по-прежнему идёт через `@close` HeadlessUI;\n * источник закрытия различается через ref `closeReason`.\n */\nimport { computed, onBeforeUnmount, ref, watch } from 'vue'\nimport { Dialog, DialogDescription, DialogPanel, DialogTitle, TransitionChild, TransitionRoot } from '@headlessui/vue'\n\nimport { pushGrModalEsc, removeGrModalEsc } from './grModalEscStack'\nimport { pushGrModalTop, removeGrModalTop } from './grModalTopStack'\n\nimport {\n  type GrModalSize,\n  getGrModalPanelClass,\n  layout,\n  overlay as overlayClass,\n  overlayTransition,\n  panelTransition,\n  root as rootClass,\n  shell,\n} from './grModalStyles'\n\nexport interface GrModalProps {\n  modelValue: boolean\n  closeOnBackdrop?: boolean\n  closeOnEsc?: boolean\n  size?: GrModalSize\n}\n\nconst props = withDefaults(defineProps<GrModalProps>(), {\n  closeOnBackdrop: true,\n  closeOnEsc: true,\n  size: 'md',\n})\n\nconst emit = defineEmits<{\n  (e: 'update:modelValue', value: boolean): void\n}>()\n\nconst panelClass = computed(() => getGrModalPanelClass(props.size))\n\n// Ссылка на панель используется как `initialFocus` для HeadlessUI `<Dialog>`:\n// панель имеет `tabindex=\"-1\"`, поэтому всегда фокусируема программно. Это\n// убирает предупреждение «There are no focusable elements inside the\n// <FocusTrap />», которое HeadlessUI выводит, когда не находит фокусируемого\n// элемента (в т.ч. когда контент окна временно помечен `inert`).\nconst panelRef = ref<HTMLElement | null>(null)\n\n// Является ли это окно верхним (последним открытым) в общем стеке модалок.\n// Когда поверх открыт другой `GrModal`/диалог сервиса, окно перестаёт быть\n// верхним и помечается `inert`, чтобы не «воровать» фокус у верхнего окна.\nconst isTopmost = ref(true)\n\n// `inert` ставится только на нижние (не верхние) открытые окна. Inert-поддерево\n// не интерактивно и не фокусируемо, поэтому FocusLock нижнего `<Dialog>`\n// перестаёт возвращать фокус себе — верхний диалог удерживает фокус сам.\nconst inertAttr = computed(() => (props.modelValue && !isTopmost.value ? '' : undefined))\n\n// SSR-guard: на сервере `document.body` недоступен — отключаем teleport,\n// а в клиенте включаем после маунта.\nconst isClient = typeof window !== 'undefined'\n\n// Источник закрытия от HeadlessUI `<Dialog>` — либо Esc, либо клик по оверлею.\n// Различаем их, чтобы `closeOnBackdrop` и `closeOnEsc` работали независимо.\nconst closeReason = ref<'backdrop' | 'esc' | null>(null)\n\nfunction close(): void {\n  emit('update:modelValue', false)\n}\n\nfunction onDialogClose(): void {\n  const reason = closeReason.value\n  closeReason.value = null\n\n  if (reason === 'esc') {\n    if (props.closeOnEsc) close()\n    return\n  }\n\n  // По умолчанию (клик по оверлею или программный вызов `@close`)\n  // уважаем `closeOnBackdrop`.\n  if (props.closeOnBackdrop) close()\n}\n\nfunction onRootKeydown(event: KeyboardEvent): void {\n  if (event.key === 'Escape') closeReason.value = 'esc'\n}\n\n// ————— Esc-стек: гарантирует, что Esc закрывает именно верхнюю (последнюю\n// открытую) модалку, даже если окна живут в разных деревьях рендера\n// (например, диалоги `useDialogService` поверх `GrModal`).\nlet escEntryId: number | null = null\nlet topEntryId: number | null = null\n\nfunction registerEsc(): void {\n  if (escEntryId !== null) return\n  escEntryId = pushGrModalEsc({\n    shouldClose: () => props.closeOnEsc,\n    close,\n  })\n}\n\nfunction unregisterEsc(): void {\n  if (escEntryId === null) return\n  removeGrModalEsc(escEntryId)\n  escEntryId = null\n}\n\nfunction registerTop(): void {\n  if (topEntryId !== null) return\n  topEntryId = pushGrModalTop({\n    setTopmost: (value) => { isTopmost.value = value },\n  })\n}\n\nfunction unregisterTop(): void {\n  if (topEntryId === null) return\n  removeGrModalTop(topEntryId)\n  topEntryId = null\n  isTopmost.value = true\n}\n\nfunction onOverlayPointerDown(): void {\n  closeReason.value = 'backdrop'\n}\n\n// ————— Scroll lock на `<body>` на время открытия.\n// HeadlessUI Vue этого не делает автоматически, а фон скроллится —\n// для GR-примитива это мешающий UX.\nlet savedBodyOverflow: string | null = null\n\nfunction lockBodyScroll(): void {\n  if (!isClient) return\n  if (savedBodyOverflow !== null) return\n  savedBodyOverflow = document.body.style.overflow\n  document.body.style.overflow = 'hidden'\n}\n\nfunction unlockBodyScroll(): void {\n  if (!isClient) return\n  if (savedBodyOverflow === null) return\n  document.body.style.overflow = savedBodyOverflow\n  savedBodyOverflow = null\n}\n\nwatch(\n  () => props.modelValue,\n  (value) => {\n    if (value) {\n      lockBodyScroll()\n      registerEsc()\n      registerTop()\n    }\n    else {\n      unlockBodyScroll()\n      unregisterEsc()\n      unregisterTop()\n    }\n  },\n  { immediate: true },\n)\n\nonBeforeUnmount(() => {\n  unlockBodyScroll()\n  unregisterEsc()\n  unregisterTop()\n})\n\n</script>\n\n<template>\n  <teleport to=\"body\" :disabled=\"!isClient\">\n    <TransitionRoot :show=\"modelValue\" as=\"template\">\n      <Dialog\n        as=\"div\"\n        :class=\"rootClass\"\n        :initial-focus=\"panelRef\"\n        :inert=\"inertAttr\"\n        @close=\"onDialogClose\"\n        @keydown.capture=\"onRootKeydown\"\n      >\n        <div :class=\"shell\">\n          <div :class=\"layout\">\n            <TransitionChild\n              as=\"template\"\n              :enter=\"overlayTransition.enter\"\n              :enter-from=\"overlayTransition.enterFrom\"\n              :enter-to=\"overlayTransition.enterTo\"\n              :leave=\"overlayTransition.leave\"\n              :leave-from=\"overlayTransition.leaveFrom\"\n              :leave-to=\"overlayTransition.leaveTo\"\n            >\n              <div\n                data-gr-modal-overlay\n                :class=\"overlayClass\"\n                aria-hidden=\"true\"\n                @pointerdown=\"onOverlayPointerDown\"\n              />\n            </TransitionChild>\n\n            <TransitionChild\n              as=\"template\"\n              :enter=\"panelTransition.enter\"\n              :enter-from=\"panelTransition.enterFrom\"\n              :enter-to=\"panelTransition.enterTo\"\n              :leave=\"panelTransition.leave\"\n              :leave-from=\"panelTransition.leaveFrom\"\n              :leave-to=\"panelTransition.leaveTo\"\n            >\n              <DialogPanel\n                ref=\"panelRef\"\n                data-gr-modal-panel\n                tabindex=\"-1\"\n                :class=\"panelClass\"\n              >\n                <DialogTitle v-if=\"$slots.title\" as=\"div\" data-gr-modal-title>\n                  <slot name=\"title\" />\n                </DialogTitle>\n                <DialogDescription v-if=\"$slots.description\" as=\"div\" data-gr-modal-description>\n                  <slot name=\"description\" />\n                </DialogDescription>\n                <slot />\n              </DialogPanel>\n            </TransitionChild>\n          </div>\n        </div>\n      </Dialog>\n    </TransitionRoot>\n  </teleport>\n</template>\n"],"mappings":"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"}

package/dist/components/GrNavbar/chunks/GrNavbar-DW3MiIIf.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"GrNavbar-DW3MiIIf.js","names":[],"sources":["../../../../src/components/GrNavbar/GrNavbar.vue","../../../../src/components/GrNavbar/GrNavbar.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed } from 'vue'\n\nimport IconMenu from '~icons/lucide/menu'\n\nimport { useGranularityTranslations } from '../../internal/granularityI18n'\nimport GrButton from '../GrButton/GrButton.vue'\nimport GrIcon from '../GrIcon/GrIcon.vue'\n\n/**\n * GrNavbar — верхняя панель приложения (header) с заголовком,\n * опциональной кнопкой меню (обычно — для мобильных) и правым слотом\n * для действий/аватара.\n *\n * - Корень — `<header>` (landmark), без собственного `role`.\n * - `aria-label` кнопки меню локализуется через `useGranularityTranslations`.\n */\nexport interface GrNavbarProps {\n  title: string\n  showMenuButton?: boolean\n  /** Extra classes applied to the menu button wrapper (e.g. `sm:hidden`). */\n  menuButtonClass?: string\n}\n\nwithDefaults(defineProps<GrNavbarProps>(), {\n  showMenuButton: false,\n  menuButtonClass: '',\n})\n\nconst emit = defineEmits<{\n  (e: 'menu'): void\n}>()\n\nconst { t } = useGranularityTranslations()\n\nconst menuAriaLabel = computed(() => t('gr.navbar.openMenu', 'Open menu'))\n</script>\n\n<template>\n  <header\n    data-gr-navbar\n    class=\"h-[56px] border-b border-[var(--brd)] bg-[var(--bg)] flex items-center justify-between px-4 sm:px-6\"\n  >\n    <div class=\"flex items-center gap-3\">\n      <GrButton\n        v-if=\"showMenuButton\"\n        data-gr-navbar-menu\n        variant=\"ghost\"\n        size=\"sm\"\n        square\n        :aria-label=\"menuAriaLabel\"\n        :class=\"menuButtonClass\"\n        @click=\"emit('menu')\"\n      >\n        <GrIcon :size=\"16\">\n          <IconMenu aria-hidden=\"true\" />\n        </GrIcon>\n      </GrButton>\n      <div data-gr-navbar-title class=\"text-[14px] font-700\">\n        <slot name=\"title\">\n          {{ title }}\n        </slot>\n      </div>\n    </div>\n\n    <div class=\"flex items-center gap-3\">\n      <slot />\n    </div>\n  </header>\n</template>\n","<script setup lang=\"ts\">\nimport { computed } from 'vue'\n\nimport IconMenu from '~icons/lucide/menu'\n\nimport { useGranularityTranslations } from '../../internal/granularityI18n'\nimport GrButton from '../GrButton/GrButton.vue'\nimport GrIcon from '../GrIcon/GrIcon.vue'\n\n/**\n * GrNavbar — верхняя панель приложения (header) с заголовком,\n * опциональной кнопкой меню (обычно — для мобильных) и правым слотом\n * для действий/аватара.\n *\n * - Корень — `<header>` (landmark), без собственного `role`.\n * - `aria-label` кнопки меню локализуется через `useGranularityTranslations`.\n */\nexport interface GrNavbarProps {\n  title: string\n  showMenuButton?: boolean\n  /** Extra classes applied to the menu button wrapper (e.g. `sm:hidden`). */\n  menuButtonClass?: string\n}\n\nwithDefaults(defineProps<GrNavbarProps>(), {\n  showMenuButton: false,\n  menuButtonClass: '',\n})\n\nconst emit = defineEmits<{\n  (e: 'menu'): void\n}>()\n\nconst { t } = useGranularityTranslations()\n\nconst menuAriaLabel = computed(() => t('gr.navbar.openMenu', 'Open menu'))\n</script>\n\n<template>\n  <header\n    data-gr-navbar\n    class=\"h-[56px] border-b border-[var(--brd)] bg-[var(--bg)] flex items-center justify-between px-4 sm:px-6\"\n  >\n    <div class=\"flex items-center gap-3\">\n      <GrButton\n        v-if=\"showMenuButton\"\n        data-gr-navbar-menu\n        variant=\"ghost\"\n        size=\"sm\"\n        square\n        :aria-label=\"menuAriaLabel\"\n        :class=\"menuButtonClass\"\n        @click=\"emit('menu')\"\n      >\n        <GrIcon :size=\"16\">\n          <IconMenu aria-hidden=\"true\" />\n        </GrIcon>\n      </GrButton>\n      <div data-gr-navbar-title class=\"text-[14px] font-700\">\n        <slot name=\"title\">\n          {{ title }}\n        </slot>\n      </div>\n    </div>\n\n    <div class=\"flex items-center gap-3\">\n      <slot />\n    </div>\n  </header>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA6BA,MAAM,OAAO;EAIb,MAAM,EAAE,MAAM,2BAA2B;EAEzC,MAAM,gBAAgB,eAAe,EAAE,sBAAsB,WAAW,CAAC;;uBAIvE,mBA6BS,UA7BT,YA6BS,CAzBP,mBAoBM,OApBN,YAoBM,CAlBI,QAAA,kBAAA,UAAA,GADR,YAaW,kBAAA;;IAXT,uBAAA;IACA,SAAQ;IACR,MAAK;IACL,QAAA;IACC,cAAY,cAAA;IACZ,OAAK,eAAE,QAAA,eAAe;IACtB,SAAK,OAAA,OAAA,OAAA,MAAA,WAAE,KAAI,MAAA;;2BAIH,CAFT,YAES,gBAAA,EAFA,MAAM,GAAE,GAAA;4BACgB,CAA/B,YAA+B,MAAA,YAAA,GAAA,EAArB,eAAY,OAAM,CAAA,CAAA,CAAA;;;;mEAGhC,mBAIM,OAJN,YAIM,CAHJ,WAEO,KAAA,QAAA,SAAA,CAAA,SAAA,CAAA,gBAAA,gBADF,QAAA,KAAK,GAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,GAKd,mBAEM,OAFN,YAEM,CADJ,WAAQ,KAAA,QAAA,SAAA,CAAA,CAAA,CAAA,CAAA"}