npm - @feugene/granularity - Versions diffs - 0.19.0 → 0.21.0 - Mend

@feugene/granularity 0.19.0 → 0.21.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1152) hide show

package/dist/chunks/useModalOverlay-Cv5hF63W.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"useModalOverlay-Cv5hF63W.js","names":[],"sources":["../../src/composables/internal/useInertOthers.ts","../../src/composables/internal/useOverlayPresence.ts","../../src/composables/internal/useScrollLock.ts","../../src/composables/internal/useModalOverlay.ts"],"sourcesContent":["import type { Ref } from 'vue'\nimport { onScopeDispose, watch } from 'vue'\n\nimport { inertableOutside, markInert } from './inert'\n\n/**\n * Пока слой активен, всё вне его ветки помечено `inert`: от корня оверлея вверх\n * до `<body>`, на каждом уровне — соседи.\n *\n * Это вторая половина модальности: `z-index` перекрывает страницу глазами,\n * `inert` — клавиатурой и скринридером.\n */\nexport function useInertOthers(root: Ref<HTMLElement | null>, active: () => boolean): void {\n let release: (() => void) | undefined\n\n function apply(): void {\n release?.()\n release = markInert(inertableOutside(root.value))\n }\n\n function clear(): void {\n release?.()\n release = undefined\n }\n\n watch(\n () => Boolean(active()) && Boolean(root.value),\n (isActive) => {\n if (isActive) apply()\n else clear()\n },\n { immediate: true, flush: 'post' },\n )\n\n onScopeDispose(clear)\n}\n","import type { Ref } from 'vue'\nimport { ref, watch } from 'vue'\n\nexport interface OverlayPresence {\n /** Смонтировано ли поддерево слоя: держится до конца leave-анимации. */\n mounted: Ref<boolean>\n /** Показан ли слой: этим переключаются `<Transition>` внутри. */\n visible: Ref<boolean>\n /** Вызывается из `@after-leave` панели. */\n onPanelAfterLeave: () => void\n}\n\n/**\n * Присутствие оверлея в DOM отдельно от его видимости.\n *\n * Штатный `<Transition>` анимирует свой элемент, но не координирует соседей:\n * убери обёртку по `v-if` — и подложка с панелью исчезнут мгновенно, без\n * leave-анимации. Поэтому присутствие поддерева и видимость слоя — два разных\n * флага: первый снимается только по концу leave-анимации панели.\n *\n * Видимость включается **в том же такте**, что и монтирование: содержимое окна\n * обязано появляться в DOM сразу после открытия — на этом стоит и код\n * потребителя, и внутренние компоненты, которые ищут в панели свои элементы.\n * Enter-анимацию это не отменяет: `<Transition appear>` проигрывает её и на\n * первом рендере ребёнка.\n */\nexport function useOverlayPresence(open: Ref<boolean>): OverlayPresence {\n const mounted = ref(open.value)\n const visible = ref(open.value)\n\n watch(open, (isOpen) => {\n if (isOpen) mounted.value = true\n visible.value = isOpen\n })\n\n function onPanelAfterLeave(): void {\n // Пока панель уезжала, слой могли открыть заново — тогда размонтировать\n // нечего и незачем.\n if (!open.value) mounted.value = false\n }\n\n return { mounted, visible, onPanelAfterLeave }\n}\n","/**\n * useScrollLock — общий **reference-counted** lock скролла `<body>` для оверлеев\n * (GrModal, GrDrawer, GrImageViewer).\n *\n * Зачем счётчик: состояние `<body>` принадлежит не оверлею, а их совокупности.\n * Держи каждый свой `savedBodyOverflow`, и закрытие A при ещё открытой B вернуло\n * бы странице прокрутку под открытым окном — закрывают не всегда в порядке\n * открытия. Поэтому состояние сохраняется один раз (переход счётчика 0→1) и\n * восстанавливается только когда закрыт последний оверлей (1→0).\n *\n * Плюс компенсация ширины скроллбара: при `overflow: hidden` скроллбар исчезает и\n * контент дёргается вправо — добавляем `padding-right` на его ширину.\n *\n * Отдельная ветка — iOS Safari: там `overflow: hidden` фон не держит, страница\n * продолжает «резинить» под открытым окном. Лечится тем же, чем лечил\n * HeadlessUI (`handleIOSLocking`): гасим `touchmove` вне скроллящихся областей\n * оверлея и возвращаем позицию прокрутки после снятия лока.\n */\n\ninterface SavedBodyStyle {\n overflow: string\n paddingRight: string\n overscrollBehavior: string\n}\n\nlet lockCount = 0\nlet saved: SavedBodyStyle | null = null\nlet savedScrollY = 0\nlet releaseTouchGuard: (() => void) | null = null\n\n/**\n * iOS определяем по платформе, а не по ширине экрана: лечение специфично для\n * движка, а не для размера. `maxTouchPoints` отличает iPadOS, который со времён\n * 13-й версии представляется десктопным Mac.\n */\nfunction isIOS(): boolean {\n if (typeof navigator === 'undefined') return false\n return /iP(?:hone|ad|od)/.test(navigator.platform)\n || (navigator.platform === 'MacIntel' && navigator.maxTouchPoints > 1)\n}\n\n/** Прокручиваемая область оверлея — единственное, чему `touchmove` разрешён. */\nfunction isScrollableOverlayArea(target: EventTarget | null): boolean {\n if (!(target instanceof Element)) return false\n\n for (let node: Element | null = target; node; node = node.parentElement) {\n if (!(node instanceof HTMLElement)) continue\n if (node.hasAttribute('data-gr-overlay-root')) return true\n }\n\n return false\n}\n\nfunction applyTouchGuard(): void {\n if (!isIOS()) return\n\n const onTouchMove = (event: TouchEvent): void => {\n // Внутри оверлея скролл законен (длинное окно, лента изображений), а всё\n // остальное — это и есть фон, который лок обязан держать.\n if (isScrollableOverlayArea(event.target)) return\n if (event.cancelable) event.preventDefault()\n }\n\n document.addEventListener('touchmove', onTouchMove, { passive: false })\n releaseTouchGuard = () => document.removeEventListener('touchmove', onTouchMove)\n}\n\nfunction getScrollbarWidth(): number {\n return window.innerWidth - document.documentElement.clientWidth\n}\n\nfunction applyLock(): void {\n const body = document.body\n saved = {\n overflow: body.style.overflow,\n paddingRight: body.style.paddingRight,\n overscrollBehavior: body.style.overscrollBehavior,\n }\n savedScrollY = window.scrollY\n\n // Ширину скроллбара считаем ДО `overflow: hidden` (после — `clientWidth` меняется).\n const scrollbarWidth = getScrollbarWidth()\n\n body.style.overflow = 'hidden'\n // Прокрутка, «доехавшая» до края внутри окна, не должна продолжаться фоном.\n body.style.overscrollBehavior = 'contain'\n if (scrollbarWidth > 0) {\n const currentPadding = Number.parseFloat(getComputedStyle(body).paddingRight) || 0\n body.style.paddingRight = `${currentPadding + scrollbarWidth}px`\n }\n\n applyTouchGuard()\n}\n\nfunction releaseLock(): void {\n releaseTouchGuard?.()\n releaseTouchGuard = null\n\n if (!saved) return\n document.body.style.overflow = saved.overflow\n document.body.style.paddingRight = saved.paddingRight\n document.body.style.overscrollBehavior = saved.overscrollBehavior\n saved = null\n\n // iOS сдвигает страницу, пока фон заблокирован; возвращаем её на место.\n if (isIOS() && window.scrollY !== savedScrollY) window.scrollTo(0, savedScrollY)\n}\n\n/**\n * Возвращает пару `lock`/`unlock`, идемпотентную **в пределах одного инстанса**\n * (повторный `lock()` без `unlock()` не увеличивает глобальный счётчик дважды).\n * Глобальный счётчик разделяется всеми оверлеями.\n */\nexport function useScrollLock() {\n const isClient = typeof window !== 'undefined'\n let held = false\n\n function lock(): void {\n if (!isClient || held) return\n held = true\n lockCount += 1\n if (lockCount === 1) applyLock()\n }\n\n function unlock(): void {\n if (!isClient || !held) return\n held = false\n lockCount = Math.max(0, lockCount - 1)\n if (lockCount === 0) releaseLock()\n }\n\n return { lock, unlock }\n}\n\n/** Тестовая/служебная очистка глобального состояния. */\nexport function resetScrollLock(): void {\n lockCount = 0\n if (typeof document !== 'undefined') releaseLock()\n saved = null\n}\n","import type { ComputedRef, Ref } from 'vue'\nimport { computed, onBeforeUnmount, ref, watch } from 'vue'\n\nimport { useGrThemeAttrs } from '../../components/GrConfigProvider/context'\nimport { useFocusTrap } from '../useFocusTrap'\nimport { useOverlayLayer } from '../useOverlayLayer'\nimport { usePortalTarget } from '../usePortalTarget'\nimport { useInertOthers } from './useInertOthers'\nimport { useOverlayPresence } from './useOverlayPresence'\nimport { useScrollLock } from './useScrollLock'\n\n/**\n * Модальный слой целиком: одна сборка на весь пакет.\n *\n * Модальность собиралась вручную в трёх компонентах (`GrModal`, `GrDrawer`,\n * `GrImageViewer`) из шести примитивов, и сборка повторялась дословно. Дело не\n * в объёме: в этой проводке сидят инварианты, каждый из которых при пропуске\n * даёт тихий баг доступности, а не заметную поломку. Здесь они собраны в одном\n * месте — забыть часть модального слоя больше нельзя.\n *\n * Что именно неочевидно:\n *\n * - **`restoreFocus: false` у ловушки.** Возврат фокуса принадлежит стеку\n * слоёв: у него правило строже — вернуть, только если на момент закрытия\n * фокус ещё был внутри слоя. Две системы возврата подрались бы за фокус.\n * - **`containers: layer.rootsAbove`.** Панель селекта, открытого ВНУТРИ окна,\n * телепортирована в `body` и лежит вне поддерева панели. Без этого списка\n * ловушка считала бы её «снаружи» и отбирала фокус.\n * - **Ловушка и `inert` работают, только пока слой верхний.** Иначе нижнее\n * окно ворует фокус у открытого поверх него, а `inert` гасит собственную\n * панель вместе со страницей.\n * - **Клик по подложке считается только тот, что на ней и начался.** Иначе\n * выделение текста мышью или перетаскивание, отпущенное за пределами панели,\n * закрывает слой.\n *\n * Чего композабл НЕ делает: не рисует разметку. Корневой `div`, подложка и\n * панель у трёх компонентов различаются по существу (обёртки скролла у окна,\n * сквозные клики у немодальной панели, слои хрома у просмотрщика), а классами\n * общий модуль владеть не вправе — пресет гранулярности подмешивает safelist\n * только по директориям выбранных компонентов.\n */\nexport interface UseModalOverlayOptions {\n /**\n * Модальный ли слой: блокирует страницу, держит фокус, гасит нижние окна.\n * Геттером — там, где модальность включается пропом (`GrDrawer`).\n */\n modal?: boolean | (() => boolean)\n /** Закрывать ли по Esc. Геттер — проп компонента реактивен. */\n closeOnEscape?: () => boolean\n /** Закрывать ли по клику в подложку; читается обработчиками `backdrop`. */\n closeOnBackdrop?: () => boolean\n /** Панель слоя: контейнер ловушки фокуса и её запасной приёмник. */\n panel: Ref<HTMLElement | null>\n /**\n * Свой корень слоя. У якорного оверлея (`GrPopover`) корень и панель — один\n * элемент: в портал уезжает сама панель, отдельной обёртки нет. Не задан —\n * композабл заводит корень сам, как у центрированных окон.\n */\n root?: Ref<HTMLElement | null>\n /**\n * Точечное переопределение точки монтирования (проп `teleportTo`). По\n * умолчанию — общий портал оверлеев.\n */\n teleportTo?: () => string | HTMLElement | undefined\n /**\n * Кому отдать фокус при открытии. Не задан — первому фокусируемому внутри\n * панели (правило `useFocusTrap`): просмотрщику нужна именно кнопка тулбара,\n * а окну — сама панель, и оно передаёт её явно.\n */\n initialFocus?: () => HTMLElement | null | undefined\n /**\n * Блокировать ли скролл страницы. По умолчанию — пока слой открыт и модален:\n * немодальная панель существует ровно ради работы со страницей под ней.\n */\n lockScroll?: () => boolean\n}\n\nexport interface ModalOverlay {\n /** Корень слоя: цель `ref` в шаблоне, хозяин `inert` и корень для стека слоёв. */\n rootEl: Ref<HTMLElement | null>\n /** Смонтировано ли поддерево: держится до конца leave-анимации панели. */\n isMounted: Ref<boolean>\n /** Показан ли слой: этим переключаются `<Transition>` внутри. */\n isVisible: Ref<boolean>\n /** Верхний ли это слой сейчас. */\n isTopmost: Ref<boolean>\n /** Значение атрибута `inert` для корня: слой перестал быть верхним. */\n inertAttr: ComputedRef<true | undefined>\n portalTarget: ComputedRef<string | HTMLElement>\n teleportEnabled: ComputedRef<boolean>\n /** `data-theme` на телепортированный корень: в DOM он вне обёртки провайдера. */\n themeAttrs: ComputedRef<{ 'data-theme'?: string }>\n /** Для `@after-leave` панели. Компонент оборачивает, если ему нужен эмит `closed`. */\n onPanelAfterLeave: () => void\n /**\n * Обработчики подложки вместе с guard'ом «клик начался на ней». Имена — под\n * `v-on=\"backdrop\"`: объектный синтаксис ждёт имена событий, а не пропов.\n */\n backdrop: {\n mousedown: (event: MouseEvent) => void\n click: (event: MouseEvent) => void\n }\n}\n\nexport function useModalOverlay(\n open: Ref<boolean>,\n onDismiss: () => void,\n options: UseModalOverlayOptions,\n): ModalOverlay {\n const isModal = (): boolean =>\n typeof options.modal === 'function' ? options.modal() : options.modal ?? true\n\n const rootEl = options.root ?? ref<HTMLElement | null>(null)\n const isTopmost = ref(true)\n\n const inertAttr = computed(() => (open.value && isModal() && !isTopmost.value ? true : undefined))\n\n // Телепорт включается только ПОСЛЕ монтирования: иначе первый клиентский\n // рендер не совпадёт с серверным и сломается гидрация.\n const { target: portalTarget, enabled: teleportEnabled } = usePortalTarget(options.teleportTo)\n\n // Панель уезжает в `body`, то есть вне обёртки провайдера, и `data-theme` с\n // неё не наследуется. В дереве компонентов слой остаётся внутри — `inject`\n // доходит, и тему он ставит себе сам.\n const themeAttrs = useGrThemeAttrs()\n\n const { mounted: isMounted, visible: isVisible, onPanelAfterLeave } = useOverlayPresence(open)\n\n const layer = useOverlayLayer(open, onDismiss, {\n modal: isModal,\n closeOnEscape: options.closeOnEscape,\n onTopmostChange: (value) => { isTopmost.value = value },\n root: rootEl,\n })\n\n useFocusTrap(options.panel, {\n active: () => open.value && isModal() && isTopmost.value,\n initialFocus: options.initialFocus,\n fallbackFocus: () => options.panel.value,\n containers: layer.rootsAbove,\n restoreFocus: false,\n })\n\n useInertOthers(rootEl, () => open.value && isModal() && isTopmost.value)\n\n // Общий reference-counted lock: несколько открытых оверлеев снимают блокировку\n // независимо от порядка закрытия, ширина скроллбара компенсируется.\n const { lock, unlock } = useScrollLock()\n\n watch(\n () => options.lockScroll?.() ?? (open.value && isModal()),\n (locked) => {\n if (locked) lock()\n else unlock()\n },\n { immediate: true },\n )\n\n onBeforeUnmount(unlock)\n\n let pointerDownOnBackdrop = false\n\n return {\n rootEl,\n isMounted,\n isVisible,\n isTopmost,\n inertAttr,\n portalTarget,\n teleportEnabled,\n themeAttrs,\n onPanelAfterLeave,\n backdrop: {\n mousedown(event: MouseEvent): void {\n pointerDownOnBackdrop = event.target === event.currentTarget\n },\n click(event: MouseEvent): void {\n const startedHere = pointerDownOnBackdrop\n pointerDownOnBackdrop = false\n\n if (!startedHere || event.target !== event.currentTarget) return\n if (options.closeOnBackdrop?.() === false) return\n\n onDismiss()\n },\n },\n }\n}\n"],"mappings":"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"}

package/dist/chunks/usePortalTarget-C0p-mhaM.js ADDED Viewed

@@ -0,0 +1,77 @@
+import { o as useGrConfig } from "./context-CTbuwcYs.js";
+import { t as ensurePortalRoot } from "./portalRoot-CVhCgdG6.js";
+import { computed, onMounted, readonly, ref } from "vue";
+//#region src/composables/internal/useTeleportEnabled.ts
+/**
+* Можно ли телепортировать содержимое прямо сейчас.
+*
+* Возвращает `false` на сервере И на первом клиентском рендере, `true` — сразу
+* после монтирования. Использовать так:
+*
+* ```vue
+* <teleport to="body" :disabled="!teleportEnabled">…</teleport>
+* ```
+*
+* ## Зачем, если есть `typeof window !== 'undefined'`
+*
+* Проверка окружения выглядит достаточной, но именно она и ломала гидрацию.
+* `isClient` вычисляется в `setup`, поэтому получалось так:
+*
+* - сервер: `window` нет → телепорт выключен → содержимое остаётся НА МЕСТЕ
+*   (`:disabled` означает «рендерить на месте», а не «не рендерить»);
+* - клиент, первый рендер: `window` есть → телепорт включён → содержимое сразу
+*   уезжает в `body`.
+*
+* Структуры не совпадают, Vue сообщает `Hydration node mismatch`. В лучшем
+* случае это лишний варнинг и осиротевшая копия панели в DOM; в худшем —
+* панель «прилипает» к контейнеру приложения и пишет в него свои стили
+* (`position: fixed` + `display: none` у закрытой панели), после чего страница
+* исчезает целиком.
+*
+* Флаг, поднимаемый в `onMounted`, снимает проблему по построению: **первый**
+* клиентский рендер повторяет серверный, а телепорт включается уже после
+* гидрации. Для компонентов без SSR это ничего не меняет: панели закрыты
+* (`v-show`/`v-if`), а `onMounted` срабатывает в том же тике.
+*
+* Стенд, на котором это воспроизводится и проверяется, — `apps/playground-ssr`.
+*/
+function useTeleportEnabled() {
+	const enabled = ref(false);
+	onMounted(() => {
+		enabled.value = true;
+	});
+	return readonly(enabled);
+}
+//#endregion
+//#region src/composables/usePortalTarget.ts
+/**
+* Куда монтируются оверлеи пакета.
+*
+* Приоритет: локальное переопределение компонента (`teleportTo`) →
+* `portalTarget` из `GrConfigProvider` → общий корень `#gr-portal`, который
+* создаётся при первом обращении.
+*
+* ```vue
+* const { target, enabled } = usePortalTarget(() => props.teleportTo)
+*
+* <teleport :to="target" :disabled="!enabled">…</teleport>
+* ```
+*
+* Композабл публичный: свой оверлей потребителя должен уезжать туда же, куда и
+* оверлеи библиотеки, — иначе он окажется вне ветки портала и будет помечен
+* `inert` вместе со страницей, как только откроется модалка.
+*/
+function usePortalTarget(local) {
+	const config = useGrConfig();
+	const teleportEnabled = useTeleportEnabled();
+	return {
+		target: computed(() => {
+			const explicit = local?.() ?? config.portalTarget?.value;
+			if (explicit) return explicit;
+			return ensurePortalRoot() ?? "body";
+		}),
+		enabled: computed(() => teleportEnabled.value)
+	};
+}
+//#endregion
+export { usePortalTarget as t };

package/dist/chunks/usePortalTarget-C0p-mhaM.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"usePortalTarget-C0p-mhaM.js","names":[],"sources":["../../src/composables/internal/useTeleportEnabled.ts","../../src/composables/usePortalTarget.ts"],"sourcesContent":["import { onMounted, readonly, ref, type Ref } from 'vue'\n\n/**\n * Можно ли телепортировать содержимое прямо сейчас.\n *\n * Возвращает `false` на сервере И на первом клиентском рендере, `true` — сразу\n * после монтирования. Использовать так:\n *\n * ```vue\n * <teleport to=\"body\" :disabled=\"!teleportEnabled\">…</teleport>\n * ```\n *\n * ## Зачем, если есть `typeof window !== 'undefined'`\n *\n * Проверка окружения выглядит достаточной, но именно она и ломала гидрацию.\n * `isClient` вычисляется в `setup`, поэтому получалось так:\n *\n * - сервер: `window` нет → телепорт выключен → содержимое остаётся НА МЕСТЕ\n * (`:disabled` означает «рендерить на месте», а не «не рендерить»);\n * - клиент, первый рендер: `window` есть → телепорт включён → содержимое сразу\n * уезжает в `body`.\n *\n * Структуры не совпадают, Vue сообщает `Hydration node mismatch`. В лучшем\n * случае это лишний варнинг и осиротевшая копия панели в DOM; в худшем —\n * панель «прилипает» к контейнеру приложения и пишет в него свои стили\n * (`position: fixed` + `display: none` у закрытой панели), после чего страница\n * исчезает целиком.\n *\n * Флаг, поднимаемый в `onMounted`, снимает проблему по построению: **первый**\n * клиентский рендер повторяет серверный, а телепорт включается уже после\n * гидрации. Для компонентов без SSR это ничего не меняет: панели закрыты\n * (`v-show`/`v-if`), а `onMounted` срабатывает в том же тике.\n *\n * Стенд, на котором это воспроизводится и проверяется, — `apps/playground-ssr`.\n */\nexport function useTeleportEnabled(): Readonly<Ref<boolean>> {\n const enabled = ref(false)\n\n onMounted(() => {\n enabled.value = true\n })\n\n return readonly(enabled)\n}\n","import type { ComputedRef } from 'vue'\nimport { computed } from 'vue'\n\nimport { useGrConfig } from '../components/GrConfigProvider/context'\nimport { ensurePortalRoot } from './internal/portalRoot'\nimport { useTeleportEnabled } from './internal/useTeleportEnabled'\n\nexport interface PortalTarget {\n /** Куда телепортировать: элемент портала либо селектор из конфига. */\n target: ComputedRef<string | HTMLElement>\n /**\n * Можно ли телепортировать прямо сейчас. `false` на сервере и на первом\n * клиентском рендере — иначе разметка разъедется на гидрации.\n */\n enabled: ComputedRef<boolean>\n}\n\n/**\n * Куда монтируются оверлеи пакета.\n *\n * Приоритет: локальное переопределение компонента (`teleportTo`) →\n * `portalTarget` из `GrConfigProvider` → общий корень `#gr-portal`, который\n * создаётся при первом обращении.\n *\n * ```vue\n * const { target, enabled } = usePortalTarget(() => props.teleportTo)\n *\n * <teleport :to=\"target\" :disabled=\"!enabled\">…</teleport>\n * ```\n *\n * Композабл публичный: свой оверлей потребителя должен уезжать туда же, куда и\n * оверлеи библиотеки, — иначе он окажется вне ветки портала и будет помечен\n * `inert` вместе со страницей, как только откроется модалка.\n */\nexport function usePortalTarget(local?: () => string | HTMLElement | undefined): PortalTarget {\n const config = useGrConfig()\n const teleportEnabled = useTeleportEnabled()\n\n const target = computed<string | HTMLElement>(() => {\n const explicit = local?.() ?? config.portalTarget?.value\n if (explicit) return explicit\n\n // Корень создаётся лениво и только на клиенте; до монтирования телепорт\n // выключен, поэтому `body` здесь — недостижимый запасной вариант, а не\n // рабочая ветка.\n return ensurePortalRoot() ?? 'body'\n })\n\n return { target, enabled: computed(() => teleportEnabled.value) }\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAmCA,SAAgB,qBAA6C;CAC3D,MAAM,UAAU,IAAI,KAAK;CAEzB,gBAAgB;EACd,QAAQ,QAAQ;CAClB,CAAC;CAED,OAAO,SAAS,OAAO;AACzB;;;;;;;;;;;;;;;;;;;;ACTA,SAAgB,gBAAgB,OAA8D;CAC5F,MAAM,SAAS,YAAY;CAC3B,MAAM,kBAAkB,mBAAmB;CAY3C,OAAO;EAAE,QAVM,eAAqC;GAClD,MAAM,WAAW,QAAQ,KAAK,OAAO,cAAc;GACnD,IAAI,UAAU,OAAO;GAKrB,OAAO,iBAAiB,KAAK;EAC/B,CAES;EAAQ,SAAS,eAAe,gBAAgB,KAAK;CAAE;AAClE"}

package/dist/chunks/validation-DauXRIkL.js ADDED Viewed

@@ -0,0 +1,178 @@
+import { a as allowedExtensionsValidator, f as runFileValidators, i as allowedMimeTypesValidator, l as resolveFileValidationMessage, n as maxFileSize, o as acceptValidator, r as maxCountValidator, t as maxTotalSizeBytesValidator } from "./fileValidation-D5TFBhbv.js";
+//#region src/components/GrForm/fileRule.ts
+/**
+* Файловое правило `GrForm` — мост между декларативными `rules` и валидаторами
+* из `src/fileValidation`.
+*
+* Своих проверок здесь нет ни одной: правило собирает те же валидаторы, которые
+* `GrFormFile` и `v-dropzone` запускают на выборе и на drop. Поэтому ограничение,
+* переехавшее из пропов поля в правило формы, не меняет ни поведения, ни текста
+* ошибки — меняется только момент проверки и то, кто о ней сообщает.
+*
+* Модуль чистый (без Vue): его гоняют юнит-тесты без монтирования.
+*/
+var BYTES_IN_MB = 1024 * 1024;
+function mbToBytes(mb) {
+	return typeof mb === "number" && Number.isFinite(mb) ? mb * BYTES_IN_MB : void 0;
+}
+function isFile(value) {
+	return typeof File !== "undefined" && value instanceof File;
+}
+/**
+* Значение поля как набор файлов. Всё, что файлами не является, даёт пустой
+* набор: правило молчит, а пустоту разбирает `required` движка.
+*/
+function fileRuleFiles(value) {
+	if (isFile(value)) return [value];
+	if (Array.isArray(value)) return value.filter(isFile);
+	return [];
+}
+/** Порядок повторяет `GrFormFile`: встроенные проверки, затем валидаторы потребителя. */
+function fileRuleValidators(rule) {
+	return [
+		acceptValidator(rule.accept),
+		...rule.extensions ? [allowedExtensionsValidator(rule.extensions)] : [],
+		...rule.mimeTypes ? [allowedMimeTypesValidator(rule.mimeTypes)] : [],
+		maxFileSize({
+			bytes: rule.maxSizeBytes,
+			mb: rule.maxSizeMb
+		}),
+		maxCountValidator(rule.maxCount),
+		maxTotalSizeBytesValidator(mbToBytes(rule.maxTotalSizeMb)),
+		...rule.validators ?? []
+	];
+}
+/**
+* Первая проблема набора или `undefined`. Первая, а не все: у поля формы одна
+* строка ошибки, и файлы тут не исключение — подробный разбор по каждому файлу
+* остаётся за `GrFormFile`.
+*/
+async function runFileRule(value, rule) {
+	const files = fileRuleFiles(value);
+	if (!files.length) return void 0;
+	const { issues } = await runFileValidators(files, fileRuleValidators(rule), {
+		source: "form",
+		multiple: Array.isArray(value),
+		accept: rule.accept
+	});
+	return issues[0];
+}
+//#endregion
+//#region src/components/GrForm/validation.ts
+/**
+* Движок валидации `GrForm` — чистый (без Vue/i18n), тестируется изолированно.
+*
+* Правило описывает набор проверок значения поля; `runFieldRules` прогоняет их по
+* порядку и возвращает первое сообщение об ошибке (или `undefined`, если валидно).
+* Сообщения резолвит потребитель (компонент) через `resolveMessage` — так i18n и
+* дефолтные тексты остаются в компоненте, а движок ничего о них не знает.
+*/
+var DEFAULT_MESSAGES = {
+	required: "This field is required",
+	min: "Minimum is {min}",
+	max: "Maximum is {max}",
+	len: "Length must be {len}",
+	pattern: "Invalid format",
+	email: "Enter a valid email",
+	url: "Enter a valid URL",
+	file: "Invalid file",
+	invalid: "Invalid value"
+};
+/**
+* Дефолтный резолвер сообщений: `rule.message` сильнее всего, иначе ключ
+* `gr.form.<kind>` из локали, иначе английский фолбэк.
+*
+* Вынесен из `GrForm.vue` и экспортируется наружу не «на всякий случай»:
+* `runFieldRules` публичен, но без резолвера бесполезен — любой, кто хочет
+* прогнать те же правила вне формы, обязан был написать свой.
+*/
+function createGrFormMessageResolver(t) {
+	return (kind, rule, params) => {
+		if (rule.message) return rule.message;
+		const issue = params.issue;
+		if (kind === "file" && issue) return resolveFileValidationMessage(issue, t);
+		return t(`gr.form.${kind}`, DEFAULT_MESSAGES[kind], params);
+	};
+}
+var EMAIL_RE = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+function isUrl(value) {
+	return URL.canParse(value);
+}
+/** Пустое значение: `null`/`undefined`/пустая (или пробельная) строка/пустой массив. */
+function isEmpty(value) {
+	if (value == null) return true;
+	if (typeof value === "string") return value.trim() === "";
+	if (Array.isArray(value)) return value.length === 0;
+	return false;
+}
+/** Мера значения для min/max/len: число → само значение, строка/массив → длина. */
+function measure(value) {
+	if (typeof value === "number") return value;
+	if (typeof value === "string") return value.length;
+	if (Array.isArray(value)) return value.length;
+	return Number(value);
+}
+/** Достаёт значение из объекта по dot-path (`address.city`). */
+function getByPath(obj, path) {
+	if (!path.includes(".")) return obj[path];
+	return path.split(".").reduce((acc, key) => {
+		if (acc && typeof acc === "object") return acc[key];
+	}, obj);
+}
+/** Записывает значение в объект по dot-path (создаёт промежуточные объекты). */
+function setByPath(obj, path, value) {
+	const keys = path.split(".");
+	const last = keys.pop();
+	let target = obj;
+	for (const key of keys) {
+		if (!target[key] || typeof target[key] !== "object") target[key] = {};
+		target = target[key];
+	}
+	target[last] = value;
+}
+/** Нормализует правило(а) поля в массив. */
+function toRuleArray(rules) {
+	if (!rules) return [];
+	return Array.isArray(rules) ? rules : [rules];
+}
+function ruleMatchesTrigger(rule, trigger) {
+	if (!trigger) return true;
+	if (!rule.trigger) return true;
+	return (Array.isArray(rule.trigger) ? rule.trigger : [rule.trigger]).includes(trigger);
+}
+/** Правила поля, применимые для данного триггера (undefined = все). */
+function rulesForTrigger(rules, trigger) {
+	return rules.filter((rule) => ruleMatchesTrigger(rule, trigger));
+}
+/** Есть ли среди правил `required` (для маркера обязательности в поле). */
+function rulesRequired(rules) {
+	return rules.some((rule) => rule.required === true);
+}
+/**
+* Прогоняет правила по порядку, возвращает первое сообщение об ошибке или `undefined`.
+* Пустое необязательное значение проходит все проверки (кроме `required`).
+*/
+async function runFieldRules(value, rules, model, resolveMessage) {
+	for (const rule of rules) {
+		const empty = isEmpty(value);
+		if (rule.required && empty) return resolveMessage("required", rule, {});
+		if (empty) continue;
+		if (rule.type === "email" && !EMAIL_RE.test(String(value))) return resolveMessage("email", rule, {});
+		if (rule.type === "url" && !isUrl(String(value))) return resolveMessage("url", rule, {});
+		if (rule.len != null && measure(value) !== rule.len) return resolveMessage("len", rule, { len: rule.len });
+		if (rule.min != null && measure(value) < rule.min) return resolveMessage("min", rule, { min: rule.min });
+		if (rule.max != null && measure(value) > rule.max) return resolveMessage("max", rule, { max: rule.max });
+		if (rule.pattern && !rule.pattern.test(String(value))) return resolveMessage("pattern", rule, {});
+		if (rule.file) {
+			const issue = await runFileRule(value, rule.file);
+			if (issue) return resolveMessage("file", rule, { issue });
+		}
+		if (rule.validator) {
+			const result = await rule.validator(value, model);
+			if (result === false) return rule.message ?? resolveMessage("invalid", rule, {});
+			if (typeof result === "string") return result;
+		}
+	}
+}
+//#endregion
+export { runFieldRules as a, rulesRequired as i, getByPath as n, setByPath as o, rulesForTrigger as r, toRuleArray as s, createGrFormMessageResolver as t };

package/dist/chunks/validation-DauXRIkL.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"validation-DauXRIkL.js","names":[],"sources":["../../src/components/GrForm/fileRule.ts","../../src/components/GrForm/validation.ts"],"sourcesContent":["/**\n * Файловое правило `GrForm` — мост между декларативными `rules` и валидаторами\n * из `src/fileValidation`.\n *\n * Своих проверок здесь нет ни одной: правило собирает те же валидаторы, которые\n * `GrFormFile` и `v-dropzone` запускают на выборе и на drop. Поэтому ограничение,\n * переехавшее из пропов поля в правило формы, не меняет ни поведения, ни текста\n * ошибки — меняется только момент проверки и то, кто о ней сообщает.\n *\n * Модуль чистый (без Vue): его гоняют юнит-тесты без монтирования.\n */\n\nimport {\n acceptValidator,\n allowedExtensionsValidator,\n allowedMimeTypesValidator,\n maxCountValidator,\n maxFileSize,\n maxTotalSizeBytesValidator,\n runFileValidators,\n type FileValidationIssue,\n type FileValidator,\n} from '../../fileValidation'\n\nexport interface GrFormFileRule {\n /** W3C `accept`: `'image/*,.pdf'`. */\n accept?: string\n /** Белый список расширений (с точкой или без). */\n extensions?: string[]\n /** Белый список MIME-типов. */\n mimeTypes?: string[]\n /** Предел размера одного файла в мегабайтах. */\n maxSizeMb?: number\n /** Предел размера одного файла в байтах. Задан вместе с `maxSizeMb` — берётся меньший. */\n maxSizeBytes?: number\n /** Максимум файлов в наборе. */\n maxCount?: number\n /** Суммарный размер набора в мегабайтах. */\n maxTotalSizeMb?: number\n /** Свои валидаторы — тот же тип, что у `GrFormFile` и `v-dropzone`. Идут после встроенных. */\n validators?: FileValidator[]\n}\n\nconst BYTES_IN_MB = 1024 * 1024\n\nfunction mbToBytes(mb: number | undefined): number | undefined {\n return typeof mb === 'number' && Number.isFinite(mb) ? mb * BYTES_IN_MB : undefined\n}\n\nfunction isFile(value: unknown): value is File {\n return typeof File !== 'undefined' && value instanceof File\n}\n\n/**\n * Значение поля как набор файлов. Всё, что файлами не является, даёт пустой\n * набор: правило молчит, а пустоту разбирает `required` движка.\n */\nexport function fileRuleFiles(value: unknown): File[] {\n if (isFile(value)) return [value]\n if (Array.isArray(value)) return value.filter(isFile)\n return []\n}\n\n/** Порядок повторяет `GrFormFile`: встроенные проверки, затем валидаторы потребителя. */\nexport function fileRuleValidators(rule: GrFormFileRule): FileValidator[] {\n return [\n acceptValidator(rule.accept),\n ...(rule.extensions ? [allowedExtensionsValidator(rule.extensions)] : []),\n ...(rule.mimeTypes ? [allowedMimeTypesValidator(rule.mimeTypes)] : []),\n maxFileSize({ bytes: rule.maxSizeBytes, mb: rule.maxSizeMb }),\n maxCountValidator(rule.maxCount),\n maxTotalSizeBytesValidator(mbToBytes(rule.maxTotalSizeMb)),\n ...(rule.validators ?? []),\n ]\n}\n\n/**\n * Первая проблема набора или `undefined`. Первая, а не все: у поля формы одна\n * строка ошибки, и файлы тут не исключение — подробный разбор по каждому файлу\n * остаётся за `GrFormFile`.\n */\nexport async function runFileRule(\n value: unknown,\n rule: GrFormFileRule,\n): Promise<FileValidationIssue | undefined> {\n const files = fileRuleFiles(value)\n if (!files.length) return undefined\n\n const { issues } = await runFileValidators(files, fileRuleValidators(rule), {\n source: 'form',\n multiple: Array.isArray(value),\n accept: rule.accept,\n })\n\n return issues[0]\n}\n","/**\n * Движок валидации `GrForm` — чистый (без Vue/i18n), тестируется изолированно.\n *\n * Правило описывает набор проверок значения поля; `runFieldRules` прогоняет их по\n * порядку и возвращает первое сообщение об ошибке (или `undefined`, если валидно).\n * Сообщения резолвит потребитель (компонент) через `resolveMessage` — так i18n и\n * дефолтные тексты остаются в компоненте, а движок ничего о них не знает.\n */\n\nimport { resolveFileValidationMessage, type FileValidationIssue } from '../../fileValidation'\nimport { runFileRule, type GrFormFileRule } from './fileRule'\n\nexport type { GrFormFileRule } from './fileRule'\n\nexport type GrFormTrigger = 'blur' | 'change' | 'submit'\n\n/** Результат кастомного валидатора: `true`/void — ок; `false` — ошибка (дефолт-текст); строка — текст ошибки. */\nexport type GrFormValidatorResult = boolean | string | void\n\nexport interface GrFormRule {\n /** Значение обязательно (не пустое). */\n required?: boolean\n /** Готовый текст ошибки — перекрывает дефолтное сообщение любой проверки этого правила. */\n message?: string\n /** Минимум: длина для строки/массива, значение для числа. */\n min?: number\n /** Максимум: длина для строки/массива, значение для числа. */\n max?: number\n /** Точная длина/значение. */\n len?: number\n /** Регулярное выражение (проверяется по `String(value)`). */\n pattern?: RegExp\n /** Встроенный тип-валидатор. */\n type?: 'email' | 'url'\n /** Ограничения для значения `File | File[]`: тип, размер, количество. */\n file?: GrFormFileRule\n /** Кастомный (в т.ч. async) валидатор. Второй аргумент — весь `model`. */\n validator?: (value: unknown, model: Record<string, unknown>) => GrFormValidatorResult | Promise<GrFormValidatorResult>\n /** Когда правило срабатывает. По умолчанию — на любом триггере (blur/change/submit). */\n trigger?: GrFormTrigger | GrFormTrigger[]\n}\n\nexport type GrFormRules = Record<string, GrFormRule | GrFormRule[]>\n\n/** Вид сработавшей проверки — ключ для дефолтного i18n-сообщения. */\nexport type GrFormRuleFailure = 'required' | 'min' | 'max' | 'len' | 'pattern' | 'email' | 'url' | 'file' | 'invalid'\n\nexport type GrFormMessageResolver = (\n kind: GrFormRuleFailure,\n rule: GrFormRule,\n params: Record<string, unknown>,\n) => string\n\n/** Подпись `t()` из `useGranularityTranslations()`: ключ, фолбэк, параметры. */\nexport type GrFormMessageTranslate = (\n key: string,\n fallback: string,\n params?: Record<string, unknown>,\n) => string\n\nconst DEFAULT_MESSAGES: Record<GrFormRuleFailure, string> = {\n required: 'This field is required',\n min: 'Minimum is {min}',\n max: 'Maximum is {max}',\n len: 'Length must be {len}',\n pattern: 'Invalid format',\n email: 'Enter a valid email',\n url: 'Enter a valid URL',\n file: 'Invalid file',\n invalid: 'Invalid value',\n}\n\n/**\n * Дефолтный резолвер сообщений: `rule.message` сильнее всего, иначе ключ\n * `gr.form.<kind>` из локали, иначе английский фолбэк.\n *\n * Вынесен из `GrForm.vue` и экспортируется наружу не «на всякий случай»:\n * `runFieldRules` публичен, но без резолвера бесполезен — любой, кто хочет\n * прогнать те же правила вне формы, обязан был написать свой.\n */\nexport function createGrFormMessageResolver(t: GrFormMessageTranslate): GrFormMessageResolver {\n return (kind, rule, params) => {\n if (rule.message) return rule.message\n\n // Текст файловой ошибки приходит от самого валидатора и локализуется его же\n // ключом (`gr.fileValidation.*`): иначе одно и то же «файл не того типа»\n // звучало бы по-разному в поле и в форме. `gr.form.file` — фолбэк на случай\n // вида `file` без issue: сюда движок не приходит, но резолвер публичный.\n const issue = params.issue as FileValidationIssue | undefined\n if (kind === 'file' && issue) return resolveFileValidationMessage(issue, t)\n\n return t(`gr.form.${kind}`, DEFAULT_MESSAGES[kind], params)\n }\n}\n\nconst EMAIL_RE = /^[^\\s@]+@[^\\s@]+\\.[^\\s@]+$/\n\nfunction isUrl(value: string): boolean {\n return URL.canParse(value)\n}\n\n/** Пустое значение: `null`/`undefined`/пустая (или пробельная) строка/пустой массив. */\nexport function isEmpty(value: unknown): boolean {\n if (value == null) return true\n if (typeof value === 'string') return value.trim() === ''\n if (Array.isArray(value)) return value.length === 0\n return false\n}\n\n/** Мера значения для min/max/len: число → само значение, строка/массив → длина. */\nfunction measure(value: unknown): number {\n if (typeof value === 'number') return value\n if (typeof value === 'string') return value.length\n if (Array.isArray(value)) return value.length\n return Number(value)\n}\n\n/** Достаёт значение из объекта по dot-path (`address.city`). */\nexport function getByPath(obj: Record<string, unknown>, path: string): unknown {\n if (!path.includes('.')) return obj[path]\n return path.split('.').reduce<unknown>((acc, key) => {\n if (acc && typeof acc === 'object') return (acc as Record<string, unknown>)[key]\n return undefined\n }, obj)\n}\n\n/** Записывает значение в объект по dot-path (создаёт промежуточные объекты). */\nexport function setByPath(obj: Record<string, unknown>, path: string, value: unknown): void {\n const keys = path.split('.')\n const last = keys.pop() as string\n let target = obj\n for (const key of keys) {\n if (!target[key] || typeof target[key] !== 'object') target[key] = {}\n target = target[key] as Record<string, unknown>\n }\n target[last] = value\n}\n\n/** Нормализует правило(а) поля в массив. */\nexport function toRuleArray(rules: GrFormRule | GrFormRule[] | undefined): GrFormRule[] {\n if (!rules) return []\n return Array.isArray(rules) ? rules : [rules]\n}\n\nfunction ruleMatchesTrigger(rule: GrFormRule, trigger?: GrFormTrigger): boolean {\n if (!trigger) return true // полная валидация (validate()) — все правила\n if (!rule.trigger) return true // правило без триггера срабатывает на любом\n const triggers = Array.isArray(rule.trigger) ? rule.trigger : [rule.trigger]\n return triggers.includes(trigger)\n}\n\n/** Правила поля, применимые для данного триггера (undefined = все). */\nexport function rulesForTrigger(rules: GrFormRule[], trigger?: GrFormTrigger): GrFormRule[] {\n return rules.filter(rule => ruleMatchesTrigger(rule, trigger))\n}\n\n/** Есть ли среди правил `required` (для маркера обязательности в поле). */\nexport function rulesRequired(rules: GrFormRule[]): boolean {\n return rules.some(rule => rule.required === true)\n}\n\n/**\n * Прогоняет правила по порядку, возвращает первое сообщение об ошибке или `undefined`.\n * Пустое необязательное значение проходит все проверки (кроме `required`).\n */\nexport async function runFieldRules(\n value: unknown,\n rules: GrFormRule[],\n model: Record<string, unknown>,\n resolveMessage: GrFormMessageResolver,\n): Promise<string | undefined> {\n for (const rule of rules) {\n const empty = isEmpty(value)\n\n if (rule.required && empty) return resolveMessage('required', rule, {})\n // Необязательное пустое значение — остальные проверки этого правила пропускаем.\n if (empty) continue\n\n if (rule.type === 'email' && !EMAIL_RE.test(String(value))) return resolveMessage('email', rule, {})\n if (rule.type === 'url' && !isUrl(String(value))) return resolveMessage('url', rule, {})\n\n if (rule.len != null && measure(value) !== rule.len) return resolveMessage('len', rule, { len: rule.len })\n if (rule.min != null && measure(value) < rule.min) return resolveMessage('min', rule, { min: rule.min })\n if (rule.max != null && measure(value) > rule.max) return resolveMessage('max', rule, { max: rule.max })\n\n if (rule.pattern && !rule.pattern.test(String(value))) return resolveMessage('pattern', rule, {})\n\n if (rule.file) {\n const issue = await runFileRule(value, rule.file)\n if (issue) return resolveMessage('file', rule, { issue })\n }\n\n if (rule.validator) {\n const result = await rule.validator(value, model)\n if (result === false) return rule.message ?? resolveMessage('invalid', rule, {})\n if (typeof result === 'string') return result\n }\n }\n\n return undefined\n}\n"],"mappings":"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"}

package/dist/components/GrAlert/chunks/GrAlert-B21QGele.js ADDED Viewed

@@ -0,0 +1,258 @@
+import { n as check_circle_default, r as alert_triangle_default, t as x_circle_default } from "../../../chunks/x-circle-BCBURwyX.js";
+import { t as info_default } from "../../../chunks/info-Be2OccTu.js";
+import { t as x_default } from "../../../chunks/x-2KXnqxiD.js";
+import { i as useGrComponentProp } from "../../../chunks/context-CTbuwcYs.js";
+import { n as useGranularityTranslations } from "../../../chunks/granularityI18n-BC5zsj_d.js";
+import { computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createVNode, defineComponent, normalizeClass, normalizeStyle, openBlock, renderSlot, resolveDynamicComponent, toDisplayString, unref } from "vue";
+//#region src/components/GrAlert/grAlertStyles.ts
+/**
+* Тон → тройка токенов.
+*
+* `primary` и `neutral` не имеют пары `-light`/`-text` и отображаются на
+* ближайшие семантические роли: акцентную поверхность и нейтральную muted.
+*/
+var TONE_TOKENS = {
+	primary: {
+		surface: "var(--gr-accent)",
+		accent: "var(--gr-primary)",
+		text: "var(--gr-accent-fg)",
+		icon: "info"
+	},
+	neutral: {
+		surface: "var(--gr-muted)",
+		accent: "var(--gr-muted-fg)",
+		text: "var(--gr-fg)",
+		icon: "info"
+	},
+	success: {
+		surface: "var(--gr-success-light)",
+		accent: "var(--gr-success)",
+		text: "var(--gr-success-text)",
+		icon: "success"
+	},
+	warning: {
+		surface: "var(--gr-warning-light)",
+		accent: "var(--gr-warning)",
+		text: "var(--gr-warning-text)",
+		icon: "warning"
+	},
+	danger: {
+		surface: "var(--gr-danger-light)",
+		accent: "var(--gr-danger)",
+		text: "var(--gr-danger-text)",
+		icon: "danger"
+	},
+	info: {
+		surface: "var(--gr-info-light)",
+		accent: "var(--gr-info)",
+		text: "var(--gr-info-text)",
+		icon: "info"
+	},
+	slate: {
+		surface: "var(--gr-slate-light)",
+		accent: "var(--gr-slate)",
+		text: "var(--gr-slate-text)",
+		icon: "info"
+	},
+	azure: {
+		surface: "var(--gr-azure-light)",
+		accent: "var(--gr-azure)",
+		text: "var(--gr-azure-text)",
+		icon: "info"
+	}
+};
+function grAlertIconKey(tone) {
+	return TONE_TOKENS[tone].icon;
+}
+/**
+* Рамка выводится из тона формулой, а не задаётся отдельным токеном на каждый
+* тон: доля тона в смеси с `--gr-brd` — единственное, что отличает рамки между
+* собой. 22% (как было) давало 1.27–1.51:1 к собственной подложке — край
+* практически не читался; 35/45% поднимают его до 1.42–2.07:1.
+*/
+function border(accent, ratio) {
+	return `color-mix(in srgb, ${accent} ${ratio}%, var(--gr-brd))`;
+}
+function resolveGrAlertColors(tone, variant) {
+	const t = TONE_TOKENS[tone];
+	if (variant === "outline") return {
+		bg: "var(--gr-bg)",
+		border: border(t.accent, 45),
+		icon: t.text,
+		title: "var(--gr-fg)",
+		text: "var(--gr-muted-fg)",
+		close: "var(--gr-muted-fg)",
+		closeHover: "var(--gr-fg)",
+		closeHoverBg: "var(--gr-muted)"
+	};
+	return {
+		bg: t.surface,
+		border: border(t.accent, 35),
+		icon: t.text,
+		title: t.text,
+		text: t.text,
+		close: t.text,
+		closeHover: t.text,
+		closeHoverBg: `color-mix(in srgb, ${t.accent} 16%, transparent)`
+	};
+}
+/**
+* Пропы-эскейпы поверх тона. `textColor` красит весь текстовый слой целиком
+* (иконка, заголовок, текст, кнопка закрытия) — иначе пользовательский цвет
+* соседствовал бы с тональным и давал грязь.
+*/
+function applyGrAlertOverrides(colors, overrides) {
+	const custom = (value) => value?.trim() || void 0;
+	const text = custom(overrides.textColor);
+	return {
+		...colors,
+		bg: custom(overrides.backgroundColor) ?? colors.bg,
+		border: custom(overrides.borderColor) ?? colors.border,
+		icon: text ?? colors.icon,
+		title: text ?? colors.title,
+		text: text ?? colors.text,
+		close: text ?? colors.close,
+		closeHover: text ?? colors.closeHover,
+		closeHoverBg: text ? `color-mix(in srgb, ${text} 12%, transparent)` : colors.closeHoverBg
+	};
+}
+/**
+* Публичный контракт кастомизации: переменные `--gr-alert-*` можно
+* переопределить снаружи так же, как их задаёт компонент.
+*/
+function grAlertCssVars(colors) {
+	return {
+		"--gr-alert-bg": colors.bg,
+		"--gr-alert-brd": colors.border,
+		"--gr-alert-icon-color": colors.icon,
+		"--gr-alert-title-color": colors.title,
+		"--gr-alert-text-color": colors.text,
+		"--gr-alert-close-color": colors.close,
+		"--gr-alert-close-hover-color": colors.closeHover,
+		"--gr-alert-close-hover-bg": colors.closeHoverBg
+	};
+}
+//#endregion
+//#region src/components/GrAlert/GrAlert.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = ["role"];
+var _hoisted_2 = { class: "flex items-start gap-3" };
+var _hoisted_3 = {
+	key: 0,
+	"data-gr-alert-icon": "",
+	class: "mt-0.5 h-5 w-5 shrink-0 text-[var(--gr-alert-icon-color)]",
+	"aria-hidden": "true"
+};
+var _hoisted_4 = { class: "min-w-0 flex-1" };
+var _hoisted_5 = {
+	key: 0,
+	class: "text-[length:var(--gr-text-sm)] font-600 text-[var(--gr-alert-title-color)]"
+};
+var _hoisted_6 = {
+	key: 1,
+	"data-gr-alert-actions": "",
+	class: "mt-2 flex flex-wrap gap-2"
+};
+var _hoisted_7 = ["aria-label"];
+//#endregion
+//#region src/components/GrAlert/GrAlert.vue
+var GrAlert_default = /* @__PURE__ */ defineComponent({
+	__name: "GrAlert",
+	props: {
+		tone: { default: void 0 },
+		variant: { default: void 0 },
+		title: { default: void 0 },
+		closable: {
+			type: Boolean,
+			default: void 0
+		},
+		live: { default: void 0 },
+		icon: {
+			type: Boolean,
+			default: void 0
+		},
+		visible: {
+			type: Boolean,
+			default: void 0
+		},
+		backgroundColor: { default: void 0 },
+		textColor: { default: void 0 },
+		borderColor: { default: void 0 }
+	},
+	emits: ["close", "update:visible"],
+	setup(__props, { emit: __emit }) {
+		/**
+		* GrAlert — блочное сообщение с тоном, иконкой и опциональным закрытием.
+		*
+		* Цветовая модель вынесена в `grAlertStyles.ts` и выражена **только токенами**
+		* `--gr-*`: компонент одинаково корректен в light и dark без единого hex-литерала.
+		*
+		* Точки кастомизации — переменные `--gr-alert-*` (см. `grAlertCssVars`); пропы
+		* `backgroundColor`/`textColor`/`borderColor` — тот же контракт, но точечно.
+		*/
+		const emit = __emit;
+		const props = __props;
+		const { t } = useGranularityTranslations();
+		const tone = useGrComponentProp("GrAlert", "tone", () => props.tone, "info");
+		const variantInput = useGrComponentProp("GrAlert", "variant", () => props.variant, "soft");
+		const closable = useGrComponentProp("GrAlert", "closable", () => props.closable, false);
+		const live = useGrComponentProp("GrAlert", "live", () => props.live, "auto");
+		const variant = variantInput;
+		const ICONS = {
+			info: info_default,
+			success: check_circle_default,
+			warning: alert_triangle_default,
+			danger: x_circle_default
+		};
+		const toneIcon = computed(() => ICONS[grAlertIconKey(tone.value)]);
+		const showIcon = computed(() => props.icon !== false);
+		const isVisible = computed(() => props.visible !== false);
+		function close() {
+			emit("update:visible", false);
+			emit("close");
+		}
+		const colors = computed(() => applyGrAlertOverrides(resolveGrAlertColors(tone.value, variant.value), props));
+		const rootStyle = computed(() => ({
+			...grAlertCssVars(colors.value),
+			background: "var(--gr-alert-bg)",
+			borderColor: "var(--gr-alert-brd)"
+		}));
+		/**
+		* `role="alert"` — assertive-регион: он прерывает чтение. Вешать его на любое
+		* информационное сообщение значит превращать спокойную подсказку в тревогу,
+		* поэтому по умолчанию его получают только `warning` и `danger`.
+		*/
+		const role = computed(() => {
+			const mode = live.value === "auto" ? tone.value === "danger" || tone.value === "warning" ? "assertive" : "polite" : live.value;
+			if (mode === "off") return void 0;
+			return mode === "assertive" ? "alert" : "status";
+		});
+		return (_ctx, _cache) => {
+			return isVisible.value ? (openBlock(), createElementBlock("div", {
+				key: 0,
+				role: role.value,
+				"data-gr-alert": "",
+				class: "rounded-[var(--gr-radius-lg)] border px-4 py-3",
+				style: normalizeStyle(rootStyle.value)
+			}, [createElementVNode("div", _hoisted_2, [
+				showIcon.value ? (openBlock(), createElementBlock("span", _hoisted_3, [renderSlot(_ctx.$slots, "icon", {}, () => [(openBlock(), createBlock(resolveDynamicComponent(toneIcon.value), { class: "h-5 w-5" }))])])) : createCommentVNode("", true),
+				createElementVNode("div", _hoisted_4, [
+					props.title ? (openBlock(), createElementBlock("div", _hoisted_5, toDisplayString(props.title), 1)) : createCommentVNode("", true),
+					createElementVNode("div", { class: normalizeClass(["text-[length:var(--gr-text-sm)] leading-relaxed text-[var(--gr-alert-text-color)]", props.title ? "mt-1" : ""]) }, [renderSlot(_ctx.$slots, "default")], 2),
+					_ctx.$slots.actions ? (openBlock(), createElementBlock("div", _hoisted_6, [renderSlot(_ctx.$slots, "actions")])) : createCommentVNode("", true)
+				]),
+				unref(closable) ? (openBlock(), createElementBlock("button", {
+					key: 1,
+					type: "button",
+					class: "-mr-1.5 -mt-1.5 shrink-0 rounded-[var(--gr-radius-md)] p-1.5 text-[var(--gr-alert-close-color)] transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-[var(--gr-ring)] hover:bg-[var(--gr-alert-close-hover-bg)] hover:text-[var(--gr-alert-close-hover-color)]",
+					"aria-label": unref(t)("gr.common.close", "Close"),
+					onClick: close
+				}, [createVNode(unref(x_default), {
+					class: "h-4 w-4",
+					"aria-hidden": "true"
+				})], 8, _hoisted_7)) : createCommentVNode("", true)
+			])], 12, _hoisted_1)) : createCommentVNode("", true);
+		};
+	}
+});
+//#endregion
+export { GrAlert_default as t };