@feugene/granularity 0.16.0 → 0.19.0

package/dist/components/GrSortableList/chunks/GrSortableList-XB7mXM1W.js

@@ -0,0 +1,277 @@
+import { n as useGranularityTranslations } from "../../../chunks/granularityI18n-BC5zsj_d.js";
+import { t as GrCard_default } from "../../GrCard/chunks/GrCard-DOrGHf2x.js";
+import { useAnnouncer } from "../../../composables/useAnnouncer.js";
+import { n as insertionIndex, r as moveItem, t as useDragSort } from "../../../chunks/useDragSort-0l47h4yb.js";
+import { useRovingFocus } from "../../../composables/useRovingFocus.js";
+import { t as grip_vertical_default } from "../../../chunks/grip-vertical-lRha2S7q.js";
+import { a as emptyClass, c as indicatorAfterClass, d as rowDisabledClass, f as rowDraggingClass, h as rowLayoutClass, i as dividedClass, l as indicatorBeforeClass, m as rowGrabbedClass, o as handleClass, p as rowFocusClass, r as contentClass, s as handleDisabledClass, u as listClass } from "../../../chunks/config-DAX8Deh1.js";
+import { Fragment, computed, createBlock, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, nextTick, normalizeClass, normalizeStyle, openBlock, ref, renderList, renderSlot, toDisplayString, unref, withCtx, withModifiers } from "vue";
+//#region src/components/GrSortableList/GrSortableList.vue?vue&type=script&setup=true&lang.ts
+var _hoisted_1 = ["aria-label", "aria-disabled"];
+var _hoisted_2 = [
+	"tabindex",
+	"aria-roledescription",
+	"aria-posinset",
+	"aria-setsize",
+	"aria-grabbed",
+	"onKeydown",
+	"onFocus",
+	"onPointerdown"
+];
+var _hoisted_3 = [
+	"aria-label",
+	"disabled",
+	"onPointerdown"
+];
+//#endregion
+//#region src/components/GrSortableList/GrSortableList.vue
+var GrSortableList_default = /* @__PURE__ */ defineComponent({
+	__name: "GrSortableList",
+	props: {
+		modelValue: {},
+		itemKey: {
+			type: [String, Function],
+			default: void 0
+		},
+		disabled: {
+			type: Boolean,
+			default: false
+		},
+		orientation: { default: "vertical" },
+		variant: { default: void 0 },
+		divided: {
+			type: Boolean,
+			default: true
+		},
+		handleOnly: {
+			type: Boolean,
+			default: true
+		},
+		maxHeight: { default: void 0 },
+		emptyText: { default: void 0 },
+		ariaLabel: { default: void 0 }
+	},
+	emits: [
+		"update:modelValue",
+		"move",
+		"change"
+	],
+	setup(__props, { expose: __expose, emit: __emit }) {
+		const props = __props;
+		const emit = __emit;
+		const { t } = useGranularityTranslations();
+		const { announce } = useAnnouncer();
+		const listEl = ref(null);
+		const rowEls = /* @__PURE__ */ new Map();
+		const count = computed(() => props.modelValue.length);
+		const isEmpty = computed(() => count.value === 0);
+		const isVertical = computed(() => props.orientation === "vertical");
+		function keyOf(item, index) {
+			if (typeof props.itemKey === "function") return String(props.itemKey(item, index));
+			if (typeof props.itemKey === "string") return String(item[props.itemKey]);
+			return String(index);
+		}
+		const keys = computed(() => props.modelValue.map((item, index) => keyOf(item, index)));
+		function indexOfKey(key) {
+			return keys.value.indexOf(key);
+		}
+		function registerRow(key, el) {
+			if (el instanceof HTMLElement) {
+				rowEls.set(key, el);
+				return;
+			}
+			const previous = rowEls.get(key);
+			if (previous && !previous.isConnected) rowEls.delete(key);
+		}
+		const roving = useRovingFocus({
+			items: () => keys.value,
+			elementFor: (key) => rowEls.get(key) ?? null,
+			orientation: () => isVertical.value ? "vertical" : "horizontal",
+			wrap: () => false
+		});
+		function applyMove(from, to) {
+			if (from < 0 || to < 0 || from === to) return;
+			const next = moveItem(props.modelValue, from, to);
+			emit("update:modelValue", next);
+			emit("move", from, to);
+			emit("change", next);
+		}
+		const sort = useDragSort({
+			items: () => keys.value,
+			elementFor: (key) => rowEls.get(key) ?? null,
+			orientation: () => props.orientation,
+			scroller: () => props.maxHeight === void 0 ? null : listEl.value,
+			disabled: () => props.disabled,
+			resolveTarget: (hit, source) => insertionIndex(hit, indexOfKey(source), count.value),
+			onDrop: (source, to) => applyMove(indexOfKey(source), to),
+			onUpdate: (source, target, mode) => {
+				if (mode !== "keyboard" || source === null) return;
+				const position = (target ?? indexOfKey(source)) + 1;
+				announce(t("gr.sortable.moved", "Position {position} of {count}", {
+					position,
+					count: count.value
+				}));
+			}
+		});
+		const activeIndex = computed(() => sort.source.value === null ? -1 : indexOfKey(sort.source.value));
+		/** Куда встанет строка: индикатор рисуется на строке-соседе, а не отдельным узлом. */
+		function indicatorFor(index) {
+			const target = sort.target.value;
+			if (target === null || !sort.isActive.value || index === activeIndex.value) return null;
+			if (target === index) return target < activeIndex.value || activeIndex.value === -1 ? "before" : "after";
+			return null;
+		}
+		function rowClass(index, key) {
+			const grabbed = sort.mode.value === "keyboard" && sort.source.value === key;
+			const dragging = sort.mode.value === "pointer" && sort.source.value === key;
+			const indicator = indicatorFor(index);
+			return [
+				rowLayoutClass,
+				rowFocusClass,
+				props.disabled ? rowDisabledClass : "",
+				grabbed ? rowGrabbedClass : "",
+				dragging ? rowDraggingClass : "",
+				indicator === "before" ? indicatorBeforeClass : "",
+				indicator === "after" ? indicatorAfterClass : ""
+			];
+		}
+		function startPointer(key, event) {
+			if (props.disabled) return;
+			sort.startFrom(key)(event);
+		}
+		function grab(key) {
+			sort.grab(key);
+			if (sort.mode.value !== "keyboard") return;
+			sort.setTarget(indexOfKey(key));
+			announce(t("gr.sortable.grabbed", "Grabbed. Position {position} of {count}", {
+				position: indexOfKey(key) + 1,
+				count: count.value
+			}));
+		}
+		async function drop(key) {
+			const target = sort.target.value;
+			sort.drop();
+			announce(t("gr.sortable.dropped", "Dropped at position {position} of {count}", {
+				position: (target ?? 0) + 1,
+				count: count.value
+			}));
+			await nextTick();
+			await roving.focusKey(key);
+		}
+		function cancel() {
+			if (!sort.isActive.value) return;
+			sort.cancel();
+			announce(t("gr.sortable.cancelled", "Move cancelled"));
+		}
+		function moveTargetBy(delta) {
+			const current = sort.target.value ?? activeIndex.value;
+			const next = Math.min(count.value - 1, Math.max(0, current + delta));
+			if (next !== current) sort.setTarget(next);
+		}
+		function onRowKeydown(event, key) {
+			if (props.disabled) return;
+			const forward = isVertical.value ? "ArrowDown" : "ArrowRight";
+			const backward = isVertical.value ? "ArrowUp" : "ArrowLeft";
+			const grabbed = sort.mode.value === "keyboard";
+			if (event.key === "Escape") {
+				if (!grabbed) return;
+				event.preventDefault();
+				cancel();
+				return;
+			}
+			if (event.key === " " || event.key === "Enter") {
+				event.preventDefault();
+				if (grabbed) drop(key);
+				else grab(key);
+				return;
+			}
+			if (grabbed) {
+				if (event.key === forward || event.key === backward) {
+					event.preventDefault();
+					moveTargetBy(event.key === forward ? 1 : -1);
+				}
+				return;
+			}
+			roving.handleNavigationKeys(event);
+		}
+		/** Фокус ушёл из списка — взятая строка не может остаться взятой навсегда. */
+		function onFocusout(event) {
+			if (sort.mode.value !== "keyboard") return;
+			const next = event.relatedTarget;
+			if (next && listEl.value?.contains(next)) return;
+			cancel();
+		}
+		const resolvedEmptyText = computed(() => props.emptyText ?? t("gr.sortable.empty", "Nothing to sort yet"));
+		const resolvedLabel = computed(() => props.ariaLabel ?? t("gr.sortable.label", "Sortable list"));
+		const handleLabel = computed(() => t("gr.sortable.handle", "Reorder"));
+		const listStyle = computed(() => props.maxHeight === void 0 ? void 0 : {
+			maxHeight: typeof props.maxHeight === "number" ? `${props.maxHeight}px` : props.maxHeight,
+			overflow: "auto"
+		});
+		__expose({
+			/** Программная перестановка — та же, что делает перенос. */
+			move: (from, to) => applyMove(from, to),
+			focusItem: (index) => roving.focusKey(keys.value[index])
+		});
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(unref(GrCard_default), { variant: __props.variant }, {
+				default: withCtx(() => [createElementVNode("div", {
+					ref_key: "listEl",
+					ref: listEl,
+					role: "list",
+					"data-gr-sortable": "",
+					"aria-label": resolvedLabel.value,
+					"aria-disabled": __props.disabled ? "true" : void 0,
+					class: normalizeClass([unref(listClass)[__props.orientation], __props.divided ? unref(dividedClass) : ""]),
+					style: normalizeStyle(listStyle.value),
+					onFocusout
+				}, [isEmpty.value ? (openBlock(), createElementBlock("div", {
+					key: 0,
+					"data-gr-sortable-empty": "",
+					class: normalizeClass(unref(emptyClass))
+				}, [renderSlot(_ctx.$slots, "empty", {}, () => [createTextVNode(toDisplayString(resolvedEmptyText.value), 1)])], 2)) : (openBlock(true), createElementBlock(Fragment, { key: 1 }, renderList(__props.modelValue, (item, index) => {
+					return openBlock(), createElementBlock("div", {
+						key: keys.value[index],
+						ref_for: true,
+						ref: (el) => registerRow(keys.value[index], el),
+						role: "listitem",
+						"data-gr-sortable-item": "",
+						tabindex: __props.disabled ? -1 : unref(roving).tabindexFor(keys.value[index]),
+						"aria-roledescription": handleLabel.value,
+						"aria-posinset": index + 1,
+						"aria-setsize": count.value,
+						"aria-grabbed": unref(sort).mode.value === "keyboard" && unref(sort).source.value === keys.value[index] ? "true" : void 0,
+						class: normalizeClass(rowClass(index, keys.value[index])),
+						onKeydown: ($event) => onRowKeydown($event, keys.value[index]),
+						onFocus: ($event) => unref(roving).setActive(keys.value[index]),
+						onPointerdown: ($event) => __props.handleOnly ? void 0 : startPointer(keys.value[index], $event)
+					}, [createElementVNode("button", {
+						type: "button",
+						tabindex: "-1",
+						"data-gr-sortable-handle": "",
+						class: normalizeClass([unref(handleClass), __props.disabled ? unref(handleDisabledClass) : ""]),
+						"aria-label": handleLabel.value,
+						disabled: __props.disabled,
+						onPointerdown: ($event) => startPointer(keys.value[index], $event),
+						onClick: _cache[0] || (_cache[0] = withModifiers(() => {}, ["stop"]))
+					}, [renderSlot(_ctx.$slots, "handle", {
+						item,
+						index,
+						disabled: __props.disabled
+					}, () => [createVNode(unref(grip_vertical_default), {
+						class: "block",
+						"aria-hidden": "true"
+					})])], 42, _hoisted_3), createElementVNode("div", { class: normalizeClass(unref(contentClass)) }, [renderSlot(_ctx.$slots, "item", {
+						item,
+						index,
+						dragging: unref(sort).mode.value === "pointer" && unref(sort).source.value === keys.value[index],
+						grabbed: unref(sort).mode.value === "keyboard" && unref(sort).source.value === keys.value[index]
+					}, () => [createTextVNode(toDisplayString(item), 1)])], 2)], 42, _hoisted_2);
+				}), 128))], 46, _hoisted_1)]),
+				_: 3
+			}, 8, ["variant"]);
+		};
+	}
+});
+//#endregion
+export { GrSortableList_default as t };

package/dist/components/GrSortableList/chunks/GrSortableList-XB7mXM1W.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"GrSortableList-XB7mXM1W.js","names":[],"sources":["../../../../src/components/GrSortableList/GrSortableList.vue","../../../../src/components/GrSortableList/GrSortableList.vue"],"sourcesContent":["<script setup lang=\"ts\" generic=\"T\">\nimport { computed, nextTick, ref } from 'vue'\n\nimport GrCard, { type GrCardVariant } from '../GrCard'\nimport { useAnnouncer } from '../../composables/useAnnouncer'\nimport { useDragSort } from '../../composables/useDragSort'\nimport { useRovingFocus } from '../../composables/useRovingFocus'\nimport { insertionIndex, moveItem } from '../../composables/internal/dragSortGeometry'\nimport { useGranularityTranslations } from '../../internal/granularityI18n'\n\nimport type { GrSortableOrientation } from './grSortableListStyles'\nimport {\n  contentClass,\n  dividedClass,\n  emptyClass,\n  handleClass,\n  handleDisabledClass,\n  indicatorAfterClass,\n  indicatorBeforeClass,\n  listClass,\n  rowDisabledClass,\n  rowDraggingClass,\n  rowFocusClass,\n  rowGrabbedClass,\n  rowLayoutClass,\n} from './grSortableListStyles'\n\nimport IconGripVertical from '~icons/lucide/grip-vertical'\n\nexport interface GrSortableListProps<TItem = unknown> {\n  /** Набор в текущем порядке. `v-model`: наружу уходит новый массив, вход не мутируется. */\n  modelValue: TItem[]\n  /** Ключ элемента: имя поля или функция. Без него — индекс. */\n  itemKey?: string | ((item: TItem, index: number) => string | number)\n  /** Список только для чтения: ни указателем, ни с клавиатуры. */\n  disabled?: boolean\n  /** Ось переноса. `horizontal` — ряд с переносом по ширине. */\n  orientation?: GrSortableOrientation\n  /** Поверхность под списком — вариант карточки. */\n  variant?: GrCardVariant\n  /** Разделители между строками. */\n  divided?: boolean\n  /** Тянуть можно только за ручку. Выключено — тянется вся строка. */\n  handleOnly?: boolean\n  /** Высота видимой части: список становится скроллером с автопрокруткой при переносе. */\n  maxHeight?: number | string\n  /** Текст пустого состояния. Слот `#empty` сильнее. */\n  emptyText?: string\n  /** Имя списка для скринридера. Не задано — берётся из локали. */\n  ariaLabel?: string\n}\n\nexport interface GrSortableListEmits<TItem = unknown> {\n  (e: 'update:modelValue', value: TItem[]): void\n  (e: 'move', from: number, to: number): void\n  (e: 'change', value: TItem[]): void\n}\n\nconst props = withDefaults(defineProps<GrSortableListProps<T>>(), {\n  itemKey: undefined,\n  disabled: false,\n  orientation: 'vertical',\n  variant: undefined,\n  divided: true,\n  handleOnly: true,\n  maxHeight: undefined,\n  emptyText: undefined,\n  ariaLabel: undefined,\n})\n\nconst emit = defineEmits<GrSortableListEmits<T>>()\n\ndefineSlots<{\n  item?: (props: { item: T, index: number, dragging: boolean, grabbed: boolean }) => any\n  handle?: (props: { item: T, index: number, disabled: boolean }) => any\n  empty?: () => any\n}>()\n\nconst { t } = useGranularityTranslations()\nconst { announce } = useAnnouncer()\n\nconst listEl = ref<HTMLElement | null>(null)\nconst rowEls = new Map<string, HTMLElement>()\n\nconst count = computed(() => props.modelValue.length)\nconst isEmpty = computed(() => count.value === 0)\nconst isVertical = computed(() => props.orientation === 'vertical')\n\nfunction keyOf(item: T, index: number): string {\n  if (typeof props.itemKey === 'function') return String(props.itemKey(item, index))\n  if (typeof props.itemKey === 'string') return String((item as Record<string, unknown>)[props.itemKey])\n\n  return String(index)\n}\n\nconst keys = computed(() => props.modelValue.map((item, index) => keyOf(item, index)))\n\nfunction indexOfKey(key: string): number {\n  return keys.value.indexOf(key)\n}\n\nfunction registerRow(key: string, el: unknown): void {\n  if (el instanceof HTMLElement) {\n    rowEls.set(key, el)\n    return\n  }\n\n  // Перестановка размонтирует старый узел уже после того, как встал новый:\n  // снимаем запись, только если она протухла (приём из `GrTree`).\n  const previous = rowEls.get(key)\n  if (previous && !previous.isConnected) rowEls.delete(key)\n}\n\nconst roving = useRovingFocus<string>({\n  items: () => keys.value,\n  elementFor: key => rowEls.get(key) ?? null,\n  orientation: () => (isVertical.value ? 'vertical' : 'horizontal'),\n  wrap: () => false,\n})\n\nfunction applyMove(from: number, to: number): void {\n  if (from < 0 || to < 0 || from === to) return\n\n  const next = moveItem(props.modelValue, from, to)\n  emit('update:modelValue', next)\n  emit('move', from, to)\n  emit('change', next)\n}\n\nconst sort = useDragSort<string, number>({\n  items: () => keys.value,\n  elementFor: key => rowEls.get(key) ?? null,\n  orientation: () => props.orientation,\n  scroller: () => (props.maxHeight === undefined ? null : listEl.value),\n  disabled: () => props.disabled,\n  resolveTarget: (hit, source) => insertionIndex(hit, indexOfKey(source), count.value),\n  onDrop: (source, to) => applyMove(indexOfKey(source), to),\n  onUpdate: (source, target, mode) => {\n    // Объявляется только клавиатурный перенос: у мыши всё видно на экране, а\n    // поток объявлений на каждом движении указателя делает диктор бесполезным.\n    if (mode !== 'keyboard' || source === null) return\n\n    const position = (target ?? indexOfKey(source)) + 1\n    announce(t('gr.sortable.moved', 'Position {position} of {count}', { position, count: count.value }))\n  },\n})\n\nconst activeIndex = computed(() => (sort.source.value === null ? -1 : indexOfKey(sort.source.value)))\n\n/** Куда встанет строка: индикатор рисуется на строке-соседе, а не отдельным узлом. */\nfunction indicatorFor(index: number): 'before' | 'after' | null {\n  const target = sort.target.value\n  if (target === null || !sort.isActive.value || index === activeIndex.value) return null\n\n  if (target === index) return target < activeIndex.value || activeIndex.value === -1 ? 'before' : 'after'\n\n  return null\n}\n\nfunction rowClass(index: number, key: string): string[] {\n  const grabbed = sort.mode.value === 'keyboard' && sort.source.value === key\n  const dragging = sort.mode.value === 'pointer' && sort.source.value === key\n  const indicator = indicatorFor(index)\n\n  return [\n    rowLayoutClass,\n    rowFocusClass,\n    props.disabled ? rowDisabledClass : '',\n    grabbed ? rowGrabbedClass : '',\n    dragging ? rowDraggingClass : '',\n    indicator === 'before' ? indicatorBeforeClass : '',\n    indicator === 'after' ? indicatorAfterClass : '',\n  ]\n}\n\nfunction startPointer(key: string, event: PointerEvent): void {\n  if (props.disabled) return\n\n  sort.startFrom(key)(event)\n}\n\nfunction grab(key: string): void {\n  sort.grab(key)\n  if (sort.mode.value !== 'keyboard') return\n\n  // Цель ставится до объявления: `setTarget` сам объявляет позицию, и обратный\n  // порядок стёр бы более полное сообщение о захвате.\n  sort.setTarget(indexOfKey(key))\n  announce(t('gr.sortable.grabbed', 'Grabbed. Position {position} of {count}', {\n    position: indexOfKey(key) + 1,\n    count: count.value,\n  }))\n}\n\nasync function drop(key: string): Promise<void> {\n  const target = sort.target.value\n  sort.drop()\n\n  announce(t('gr.sortable.dropped', 'Dropped at position {position} of {count}', {\n    position: (target ?? 0) + 1,\n    count: count.value,\n  }))\n\n  // Фокус остаётся на перенесённой строке: иначе после переноса он падает на\n  // тело документа и клавиатурный сценарий обрывается на первом же шаге.\n  await nextTick()\n  await roving.focusKey(key)\n}\n\nfunction cancel(): void {\n  if (!sort.isActive.value) return\n\n  sort.cancel()\n  announce(t('gr.sortable.cancelled', 'Move cancelled'))\n}\n\nfunction moveTargetBy(delta: number): void {\n  const current = sort.target.value ?? activeIndex.value\n  const next = Math.min(count.value - 1, Math.max(0, current + delta))\n\n  if (next !== current) sort.setTarget(next)\n}\n\nfunction onRowKeydown(event: KeyboardEvent, key: string): void {\n  if (props.disabled) return\n\n  const forward = isVertical.value ? 'ArrowDown' : 'ArrowRight'\n  const backward = isVertical.value ? 'ArrowUp' : 'ArrowLeft'\n  const grabbed = sort.mode.value === 'keyboard'\n\n  if (event.key === 'Escape') {\n    if (!grabbed) return\n\n    event.preventDefault()\n    cancel()\n    return\n  }\n\n  if (event.key === ' ' || event.key === 'Enter') {\n    event.preventDefault()\n    if (grabbed) void drop(key)\n    else grab(key)\n    return\n  }\n\n  if (grabbed) {\n    // Взятая строка забирает стрелки себе: двигается она, а не фокус.\n    if (event.key === forward || event.key === backward) {\n      event.preventDefault()\n      moveTargetBy(event.key === forward ? 1 : -1)\n    }\n    return\n  }\n\n  roving.handleNavigationKeys(event)\n}\n\n/** Фокус ушёл из списка — взятая строка не может остаться взятой навсегда. */\nfunction onFocusout(event: FocusEvent): void {\n  if (sort.mode.value !== 'keyboard') return\n\n  const next = event.relatedTarget as Node | null\n  if (next && listEl.value?.contains(next)) return\n\n  cancel()\n}\n\nconst resolvedEmptyText = computed(() => props.emptyText ?? t('gr.sortable.empty', 'Nothing to sort yet'))\nconst resolvedLabel = computed(() => props.ariaLabel ?? t('gr.sortable.label', 'Sortable list'))\nconst handleLabel = computed(() => t('gr.sortable.handle', 'Reorder'))\n\nconst listStyle = computed(() => (props.maxHeight === undefined\n  ? undefined\n  : { maxHeight: typeof props.maxHeight === 'number' ? `${props.maxHeight}px` : props.maxHeight, overflow: 'auto' }))\n\ndefineExpose({\n  /** Программная перестановка — та же, что делает перенос. */\n  move: (from: number, to: number) => applyMove(from, to),\n  focusItem: (index: number) => roving.focusKey(keys.value[index]),\n})\n</script>\n\n<template>\n  <GrCard :variant=\"variant\">\n    <div\n      ref=\"listEl\"\n      role=\"list\"\n      data-gr-sortable\n      :aria-label=\"resolvedLabel\"\n      :aria-disabled=\"disabled ? 'true' : undefined\"\n      :class=\"[listClass[orientation], divided ? dividedClass : '']\"\n      :style=\"listStyle\"\n      @focusout=\"onFocusout\"\n    >\n      <div\n        v-if=\"isEmpty\"\n        data-gr-sortable-empty\n        :class=\"emptyClass\"\n      >\n        <slot name=\"empty\">\n          {{ resolvedEmptyText }}\n        </slot>\n      </div>\n\n      <div\n        v-for=\"(item, index) in modelValue\"\n        v-else\n        :key=\"keys[index]\"\n        :ref=\"el => registerRow(keys[index], el)\"\n        role=\"listitem\"\n        data-gr-sortable-item\n        :tabindex=\"disabled ? -1 : roving.tabindexFor(keys[index])\"\n        :aria-roledescription=\"handleLabel\"\n        :aria-posinset=\"index + 1\"\n        :aria-setsize=\"count\"\n        :aria-grabbed=\"sort.mode.value === 'keyboard' && sort.source.value === keys[index] ? 'true' : undefined\"\n        :class=\"rowClass(index, keys[index])\"\n        @keydown=\"onRowKeydown($event, keys[index])\"\n        @focus=\"roving.setActive(keys[index])\"\n        @pointerdown=\"handleOnly ? undefined : startPointer(keys[index], $event)\"\n      >\n        <button\n          type=\"button\"\n          tabindex=\"-1\"\n          data-gr-sortable-handle\n          :class=\"[handleClass, disabled ? handleDisabledClass : '']\"\n          :aria-label=\"handleLabel\"\n          :disabled=\"disabled\"\n          @pointerdown=\"startPointer(keys[index], $event)\"\n          @click.stop\n        >\n          <slot\n            name=\"handle\"\n            :item=\"item\"\n            :index=\"index\"\n            :disabled=\"disabled\"\n          >\n            <IconGripVertical class=\"block\" aria-hidden=\"true\" />\n          </slot>\n        </button>\n\n        <div :class=\"contentClass\">\n          <slot\n            name=\"item\"\n            :item=\"item\"\n            :index=\"index\"\n            :dragging=\"sort.mode.value === 'pointer' && sort.source.value === keys[index]\"\n            :grabbed=\"sort.mode.value === 'keyboard' && sort.source.value === keys[index]\"\n          >\n            {{ item }}\n          </slot>\n        </div>\n      </div>\n    </div>\n  </GrCard>\n</template>\n","<script setup lang=\"ts\" generic=\"T\">\nimport { computed, nextTick, ref } from 'vue'\n\nimport GrCard, { type GrCardVariant } from '../GrCard'\nimport { useAnnouncer } from '../../composables/useAnnouncer'\nimport { useDragSort } from '../../composables/useDragSort'\nimport { useRovingFocus } from '../../composables/useRovingFocus'\nimport { insertionIndex, moveItem } from '../../composables/internal/dragSortGeometry'\nimport { useGranularityTranslations } from '../../internal/granularityI18n'\n\nimport type { GrSortableOrientation } from './grSortableListStyles'\nimport {\n  contentClass,\n  dividedClass,\n  emptyClass,\n  handleClass,\n  handleDisabledClass,\n  indicatorAfterClass,\n  indicatorBeforeClass,\n  listClass,\n  rowDisabledClass,\n  rowDraggingClass,\n  rowFocusClass,\n  rowGrabbedClass,\n  rowLayoutClass,\n} from './grSortableListStyles'\n\nimport IconGripVertical from '~icons/lucide/grip-vertical'\n\nexport interface GrSortableListProps<TItem = unknown> {\n  /** Набор в текущем порядке. `v-model`: наружу уходит новый массив, вход не мутируется. */\n  modelValue: TItem[]\n  /** Ключ элемента: имя поля или функция. Без него — индекс. */\n  itemKey?: string | ((item: TItem, index: number) => string | number)\n  /** Список только для чтения: ни указателем, ни с клавиатуры. */\n  disabled?: boolean\n  /** Ось переноса. `horizontal` — ряд с переносом по ширине. */\n  orientation?: GrSortableOrientation\n  /** Поверхность под списком — вариант карточки. */\n  variant?: GrCardVariant\n  /** Разделители между строками. */\n  divided?: boolean\n  /** Тянуть можно только за ручку. Выключено — тянется вся строка. */\n  handleOnly?: boolean\n  /** Высота видимой части: список становится скроллером с автопрокруткой при переносе. */\n  maxHeight?: number | string\n  /** Текст пустого состояния. Слот `#empty` сильнее. */\n  emptyText?: string\n  /** Имя списка для скринридера. Не задано — берётся из локали. */\n  ariaLabel?: string\n}\n\nexport interface GrSortableListEmits<TItem = unknown> {\n  (e: 'update:modelValue', value: TItem[]): void\n  (e: 'move', from: number, to: number): void\n  (e: 'change', value: TItem[]): void\n}\n\nconst props = withDefaults(defineProps<GrSortableListProps<T>>(), {\n  itemKey: undefined,\n  disabled: false,\n  orientation: 'vertical',\n  variant: undefined,\n  divided: true,\n  handleOnly: true,\n  maxHeight: undefined,\n  emptyText: undefined,\n  ariaLabel: undefined,\n})\n\nconst emit = defineEmits<GrSortableListEmits<T>>()\n\ndefineSlots<{\n  item?: (props: { item: T, index: number, dragging: boolean, grabbed: boolean }) => any\n  handle?: (props: { item: T, index: number, disabled: boolean }) => any\n  empty?: () => any\n}>()\n\nconst { t } = useGranularityTranslations()\nconst { announce } = useAnnouncer()\n\nconst listEl = ref<HTMLElement | null>(null)\nconst rowEls = new Map<string, HTMLElement>()\n\nconst count = computed(() => props.modelValue.length)\nconst isEmpty = computed(() => count.value === 0)\nconst isVertical = computed(() => props.orientation === 'vertical')\n\nfunction keyOf(item: T, index: number): string {\n  if (typeof props.itemKey === 'function') return String(props.itemKey(item, index))\n  if (typeof props.itemKey === 'string') return String((item as Record<string, unknown>)[props.itemKey])\n\n  return String(index)\n}\n\nconst keys = computed(() => props.modelValue.map((item, index) => keyOf(item, index)))\n\nfunction indexOfKey(key: string): number {\n  return keys.value.indexOf(key)\n}\n\nfunction registerRow(key: string, el: unknown): void {\n  if (el instanceof HTMLElement) {\n    rowEls.set(key, el)\n    return\n  }\n\n  // Перестановка размонтирует старый узел уже после того, как встал новый:\n  // снимаем запись, только если она протухла (приём из `GrTree`).\n  const previous = rowEls.get(key)\n  if (previous && !previous.isConnected) rowEls.delete(key)\n}\n\nconst roving = useRovingFocus<string>({\n  items: () => keys.value,\n  elementFor: key => rowEls.get(key) ?? null,\n  orientation: () => (isVertical.value ? 'vertical' : 'horizontal'),\n  wrap: () => false,\n})\n\nfunction applyMove(from: number, to: number): void {\n  if (from < 0 || to < 0 || from === to) return\n\n  const next = moveItem(props.modelValue, from, to)\n  emit('update:modelValue', next)\n  emit('move', from, to)\n  emit('change', next)\n}\n\nconst sort = useDragSort<string, number>({\n  items: () => keys.value,\n  elementFor: key => rowEls.get(key) ?? null,\n  orientation: () => props.orientation,\n  scroller: () => (props.maxHeight === undefined ? null : listEl.value),\n  disabled: () => props.disabled,\n  resolveTarget: (hit, source) => insertionIndex(hit, indexOfKey(source), count.value),\n  onDrop: (source, to) => applyMove(indexOfKey(source), to),\n  onUpdate: (source, target, mode) => {\n    // Объявляется только клавиатурный перенос: у мыши всё видно на экране, а\n    // поток объявлений на каждом движении указателя делает диктор бесполезным.\n    if (mode !== 'keyboard' || source === null) return\n\n    const position = (target ?? indexOfKey(source)) + 1\n    announce(t('gr.sortable.moved', 'Position {position} of {count}', { position, count: count.value }))\n  },\n})\n\nconst activeIndex = computed(() => (sort.source.value === null ? -1 : indexOfKey(sort.source.value)))\n\n/** Куда встанет строка: индикатор рисуется на строке-соседе, а не отдельным узлом. */\nfunction indicatorFor(index: number): 'before' | 'after' | null {\n  const target = sort.target.value\n  if (target === null || !sort.isActive.value || index === activeIndex.value) return null\n\n  if (target === index) return target < activeIndex.value || activeIndex.value === -1 ? 'before' : 'after'\n\n  return null\n}\n\nfunction rowClass(index: number, key: string): string[] {\n  const grabbed = sort.mode.value === 'keyboard' && sort.source.value === key\n  const dragging = sort.mode.value === 'pointer' && sort.source.value === key\n  const indicator = indicatorFor(index)\n\n  return [\n    rowLayoutClass,\n    rowFocusClass,\n    props.disabled ? rowDisabledClass : '',\n    grabbed ? rowGrabbedClass : '',\n    dragging ? rowDraggingClass : '',\n    indicator === 'before' ? indicatorBeforeClass : '',\n    indicator === 'after' ? indicatorAfterClass : '',\n  ]\n}\n\nfunction startPointer(key: string, event: PointerEvent): void {\n  if (props.disabled) return\n\n  sort.startFrom(key)(event)\n}\n\nfunction grab(key: string): void {\n  sort.grab(key)\n  if (sort.mode.value !== 'keyboard') return\n\n  // Цель ставится до объявления: `setTarget` сам объявляет позицию, и обратный\n  // порядок стёр бы более полное сообщение о захвате.\n  sort.setTarget(indexOfKey(key))\n  announce(t('gr.sortable.grabbed', 'Grabbed. Position {position} of {count}', {\n    position: indexOfKey(key) + 1,\n    count: count.value,\n  }))\n}\n\nasync function drop(key: string): Promise<void> {\n  const target = sort.target.value\n  sort.drop()\n\n  announce(t('gr.sortable.dropped', 'Dropped at position {position} of {count}', {\n    position: (target ?? 0) + 1,\n    count: count.value,\n  }))\n\n  // Фокус остаётся на перенесённой строке: иначе после переноса он падает на\n  // тело документа и клавиатурный сценарий обрывается на первом же шаге.\n  await nextTick()\n  await roving.focusKey(key)\n}\n\nfunction cancel(): void {\n  if (!sort.isActive.value) return\n\n  sort.cancel()\n  announce(t('gr.sortable.cancelled', 'Move cancelled'))\n}\n\nfunction moveTargetBy(delta: number): void {\n  const current = sort.target.value ?? activeIndex.value\n  const next = Math.min(count.value - 1, Math.max(0, current + delta))\n\n  if (next !== current) sort.setTarget(next)\n}\n\nfunction onRowKeydown(event: KeyboardEvent, key: string): void {\n  if (props.disabled) return\n\n  const forward = isVertical.value ? 'ArrowDown' : 'ArrowRight'\n  const backward = isVertical.value ? 'ArrowUp' : 'ArrowLeft'\n  const grabbed = sort.mode.value === 'keyboard'\n\n  if (event.key === 'Escape') {\n    if (!grabbed) return\n\n    event.preventDefault()\n    cancel()\n    return\n  }\n\n  if (event.key === ' ' || event.key === 'Enter') {\n    event.preventDefault()\n    if (grabbed) void drop(key)\n    else grab(key)\n    return\n  }\n\n  if (grabbed) {\n    // Взятая строка забирает стрелки себе: двигается она, а не фокус.\n    if (event.key === forward || event.key === backward) {\n      event.preventDefault()\n      moveTargetBy(event.key === forward ? 1 : -1)\n    }\n    return\n  }\n\n  roving.handleNavigationKeys(event)\n}\n\n/** Фокус ушёл из списка — взятая строка не может остаться взятой навсегда. */\nfunction onFocusout(event: FocusEvent): void {\n  if (sort.mode.value !== 'keyboard') return\n\n  const next = event.relatedTarget as Node | null\n  if (next && listEl.value?.contains(next)) return\n\n  cancel()\n}\n\nconst resolvedEmptyText = computed(() => props.emptyText ?? t('gr.sortable.empty', 'Nothing to sort yet'))\nconst resolvedLabel = computed(() => props.ariaLabel ?? t('gr.sortable.label', 'Sortable list'))\nconst handleLabel = computed(() => t('gr.sortable.handle', 'Reorder'))\n\nconst listStyle = computed(() => (props.maxHeight === undefined\n  ? undefined\n  : { maxHeight: typeof props.maxHeight === 'number' ? `${props.maxHeight}px` : props.maxHeight, overflow: 'auto' }))\n\ndefineExpose({\n  /** Программная перестановка — та же, что делает перенос. */\n  move: (from: number, to: number) => applyMove(from, to),\n  focusItem: (index: number) => roving.focusKey(keys.value[index]),\n})\n</script>\n\n<template>\n  <GrCard :variant=\"variant\">\n    <div\n      ref=\"listEl\"\n      role=\"list\"\n      data-gr-sortable\n      :aria-label=\"resolvedLabel\"\n      :aria-disabled=\"disabled ? 'true' : undefined\"\n      :class=\"[listClass[orientation], divided ? dividedClass : '']\"\n      :style=\"listStyle\"\n      @focusout=\"onFocusout\"\n    >\n      <div\n        v-if=\"isEmpty\"\n        data-gr-sortable-empty\n        :class=\"emptyClass\"\n      >\n        <slot name=\"empty\">\n          {{ resolvedEmptyText }}\n        </slot>\n      </div>\n\n      <div\n        v-for=\"(item, index) in modelValue\"\n        v-else\n        :key=\"keys[index]\"\n        :ref=\"el => registerRow(keys[index], el)\"\n        role=\"listitem\"\n        data-gr-sortable-item\n        :tabindex=\"disabled ? -1 : roving.tabindexFor(keys[index])\"\n        :aria-roledescription=\"handleLabel\"\n        :aria-posinset=\"index + 1\"\n        :aria-setsize=\"count\"\n        :aria-grabbed=\"sort.mode.value === 'keyboard' && sort.source.value === keys[index] ? 'true' : undefined\"\n        :class=\"rowClass(index, keys[index])\"\n        @keydown=\"onRowKeydown($event, keys[index])\"\n        @focus=\"roving.setActive(keys[index])\"\n        @pointerdown=\"handleOnly ? undefined : startPointer(keys[index], $event)\"\n      >\n        <button\n          type=\"button\"\n          tabindex=\"-1\"\n          data-gr-sortable-handle\n          :class=\"[handleClass, disabled ? handleDisabledClass : '']\"\n          :aria-label=\"handleLabel\"\n          :disabled=\"disabled\"\n          @pointerdown=\"startPointer(keys[index], $event)\"\n          @click.stop\n        >\n          <slot\n            name=\"handle\"\n            :item=\"item\"\n            :index=\"index\"\n            :disabled=\"disabled\"\n          >\n            <IconGripVertical class=\"block\" aria-hidden=\"true\" />\n          </slot>\n        </button>\n\n        <div :class=\"contentClass\">\n          <slot\n            name=\"item\"\n            :item=\"item\"\n            :index=\"index\"\n            :dragging=\"sort.mode.value === 'pointer' && sort.source.value === keys[index]\"\n            :grabbed=\"sort.mode.value === 'keyboard' && sort.source.value === keys[index]\"\n          >\n            {{ item }}\n          </slot>\n        </div>\n      </div>\n    </div>\n  </GrCard>\n</template>\n"],"mappings":"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"}

package/dist/components/GrSortableList/index.js

@@ -0,0 +1,3 @@
+import { n as grSortableListSafelist, t as grSortableListConfig } from "../../chunks/config-DAX8Deh1.js";
+import { t as GrSortableList_default } from "./chunks/GrSortableList-XB7mXM1W.js";
+export { GrSortableList_default as GrSortableList, GrSortableList_default as default, grSortableListConfig, grSortableListSafelist };

package/dist/components/GrSplitter/chunks/{GrSplitter-7To8jbJ8.js → GrSplitter-BzxVQwbY.js}

@@ -1,7 +1,8 @@
 import { a as useGrComponentProp } from "../../../chunks/context-BSYR7RZs.js";
 import { n as useGranularityTranslations } from "../../../chunks/granularityI18n-BC5zsj_d.js";
-import { a as separatorClass, i as rootClass, r as paneClass } from "../../../chunks/config-BE6n20np.js";
-import { computed, createElementBlock, createElementVNode, defineComponent, normalizeClass, normalizeStyle, onBeforeUnmount, openBlock, ref, renderSlot, unref, useId, watch } from "vue";
+import { useDragGesture } from "../../../composables/useDragGesture.js";
+import { a as separatorClass, i as rootClass, r as paneClass } from "../../../chunks/config-BE6n20np2.js";
+import { computed, createElementBlock, createElementVNode, defineComponent, normalizeClass, normalizeStyle, openBlock, ref, renderSlot, unref, useId, watch } from "vue";
 import '../styles.css';//#region src/components/GrSplitter/splitterGeometry.ts
 /**
 * Арифметика раздвижных панелей. Без Vue — проверяется без монтирования.
@@ -125,7 +126,6 @@ var GrSplitter_default = /* @__PURE__ */ defineComponent({
 		/** Значение до начала жеста: `pointercancel` откатывает к нему. */
 		let sizeBeforeDrag = sizeState.value;
 		let collapsedBeforeDrag = false;
-		const isDragging = ref(false);
 		const isCollapsed = computed(() => collapsible.value && collapsedState.value);
 		/** Что видно на экране: свёрнутая панель — это ноль в треке, но не ноль в модели. */
 		const renderedSize = computed(() => isCollapsed.value ? 0 : clampSize(sizeState.value, bounds.value));
@@ -194,39 +194,19 @@ var GrSplitter_default = /* @__PURE__ */ defineComponent({
 			restoreSize.value = clampSize(raw, bounds.value);
 			setSize(raw, false);
 		}
-		function stopListening() {
-			window.removeEventListener("pointermove", onPointerMove);
-			window.removeEventListener("pointerup", onPointerUp);
-			window.removeEventListener("pointercancel", onPointerCancel);
-		}
-		function endDrag(commit) {
-			if (!isDragging.value) return;
-			isDragging.value = false;
-			stopListening();
-			if (commit) {
-				emit("change", renderedSize.value);
-				return;
+		const { isDragging, start: onPointerDown } = useDragGesture({
+			disabled: () => props.disabled,
+			onStart: () => {
+				sizeBeforeDrag = sizeState.value;
+				collapsedBeforeDrag = collapsedState.value;
+			},
+			onMove: onPointerMove,
+			onEnd: () => emit("change", renderedSize.value),
+			onCancel: () => {
+				setCollapsed(collapsedBeforeDrag);
+				setSize(sizeBeforeDrag, false);
 			}
-			setCollapsed(collapsedBeforeDrag);
-			setSize(sizeBeforeDrag, false);
-		}
-		function onPointerUp() {
-			endDrag(true);
-		}
-		function onPointerCancel() {
-			endDrag(false);
-		}
-		function onPointerDown(event) {
-			if (props.disabled) return;
-			if (event.button !== 0) return;
-			sizeBeforeDrag = sizeState.value;
-			collapsedBeforeDrag = collapsedState.value;
-			isDragging.value = true;
-			window.addEventListener("pointermove", onPointerMove);
-			window.addEventListener("pointerup", onPointerUp);
-			window.addEventListener("pointercancel", onPointerCancel);
-		}
-		onBeforeUnmount(stopListening);
+		});
 		const decreaseKey = computed(() => orientation.value === "horizontal" ? "ArrowLeft" : "ArrowUp");
 		const increaseKey = computed(() => orientation.value === "horizontal" ? "ArrowRight" : "ArrowDown");
 		function onKeydown(event) {
@@ -250,7 +230,7 @@ var GrSplitter_default = /* @__PURE__ */ defineComponent({
 				ref: rootEl,
 				"data-gr-splitter": "",
 				"data-orientation": unref(orientation),
-				"data-dragging": isDragging.value ? "" : void 0,
+				"data-dragging": unref(isDragging) ? "" : void 0,
 				"data-collapsed": isCollapsed.value ? "" : void 0,
 				class: normalizeClass(unref(rootClass)),
 				style: normalizeStyle(gridStyle.value)
@@ -272,7 +252,7 @@ var GrSplitter_default = /* @__PURE__ */ defineComponent({
 					"aria-valuemax": Math.round(__props.max),
 					"aria-disabled": __props.disabled ? "true" : void 0,
 					class: normalizeClass(unref(separatorClass)),
-					onPointerdown: onPointerDown,
+					onPointerdown: _cache[0] || (_cache[0] = (...args) => unref(onPointerDown) && unref(onPointerDown)(...args)),
 					onKeydown,
 					onDblclick: onDoubleClick
 				}, null, 42, _hoisted_3),

package/dist/components/GrSplitter/chunks/GrSplitter-BzxVQwbY.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"GrSplitter-BzxVQwbY.js","names":[],"sources":["../../../../src/components/GrSplitter/splitterGeometry.ts","../../../../src/components/GrSplitter/GrSplitter.vue","../../../../src/components/GrSplitter/GrSplitter.vue"],"sourcesContent":["/**\n * Арифметика раздвижных панелей. Без Vue — проверяется без монтирования.\n *\n * Всё считается в процентах ширины (или высоты) контейнера: клавиатура,\n * границы и сворачивание работают без единого замера DOM, а серверный рендер\n * совпадает с клиентским. Замер нужен ровно в одном месте — перевод координаты\n * указателя в проценты.\n */\n\nexport const GR_SPLITTER_ORIENTATIONS = ['horizontal', 'vertical'] as const\n\nexport type GrSplitterOrientation = typeof GR_SPLITTER_ORIENTATIONS[number]\n\nexport interface GrSplitterBounds {\n  /** Минимум первой панели. */\n  min: number\n  /** Максимум первой панели. */\n  max: number\n  /** Минимум второй панели: без него её можно задавить в ноль. */\n  minEnd: number\n}\n\nfunction toFinite(value: number, fallback: number): number {\n  return Number.isFinite(value) ? value : fallback\n}\n\n/**\n * Приводит долю первой панели к допустимой.\n *\n * При конфликте `min` и `minEnd` побеждает `min`: первая панель не должна\n * уезжать под свой минимум, даже если вторая при этом окажется уже своего.\n * Обратный порядок дал бы панель, которую пользователь не может вернуть.\n */\nexport function clampSize(value: number, bounds: GrSplitterBounds): number {\n  const min = Math.min(100, Math.max(0, toFinite(bounds.min, 0)))\n  const max = Math.min(100, Math.max(min, toFinite(bounds.max, 100)))\n  const minEnd = Math.min(100, Math.max(0, toFinite(bounds.minEnd, 0)))\n\n  const upper = Math.max(min, Math.min(max, 100 - minEnd))\n\n  return Math.min(upper, Math.max(min, toFinite(value, min)))\n}\n\n/** Доля, соответствующая позиции указателя. Вне контейнера — его края. */\nexport function sizeFromPointer(\n  rect: { left: number, top: number, width: number, height: number },\n  clientX: number,\n  clientY: number,\n  orientation: GrSplitterOrientation,\n): number {\n  const total = orientation === 'horizontal' ? rect.width : rect.height\n  // Схлопнутый контейнер (ещё не в раскладке, `display: none`) — делить не на что.\n  if (!(total > 0)) return 0\n\n  const offset = orientation === 'horizontal' ? clientX - rect.left : clientY - rect.top\n\n  return Math.min(100, Math.max(0, (offset / total) * 100))\n}\n\n/**\n * Тянуть панель ниже половины её минимума пользователь может только с одним\n * намерением — убрать её совсем. Это единственный способ свернуть панель\n * мышью: двойной клик занят сбросом к дефолту, `Enter` — клавиатурой.\n */\nexport function shouldCollapse(value: number, bounds: GrSplitterBounds): boolean {\n  const min = Math.min(100, Math.max(0, toFinite(bounds.min, 0)))\n  if (min <= 0) return false\n\n  return toFinite(value, min) < min / 2\n}\n","<script setup lang=\"ts\">\nimport { computed, ref, useId, watch } from 'vue'\n\nimport { useGrComponentProp } from '../GrConfigProvider/context'\nimport { useDragGesture } from '../../composables/useDragGesture'\nimport { useGranularityTranslations } from '../../internal/granularityI18n'\n\nimport { paneClass, rootClass, separatorClass } from './grSplitterStyles'\nimport {\n  clampSize,\n  shouldCollapse,\n  sizeFromPointer,\n  type GrSplitterBounds,\n  type GrSplitterOrientation,\n} from './splitterGeometry'\n\nexport type { GrSplitterOrientation } from './splitterGeometry'\n\n/**\n * Пропы {@link GrSplitter}.\n *\n * Две панели и разделитель между ними. Размер первой панели — доля контейнера\n * в процентах: она переживает смену ширины окна и рендерится на сервере без\n * замеров.\n */\nexport interface GrSplitterProps {\n  /** Доля первой панели в процентах. Поддерживает `v-model`; без него компонент помнит размер сам. */\n  modelValue?: number\n  /** Стартовая доля и точка возврата по двойному клику. */\n  defaultSize?: number\n  /** `horizontal` — панели рядом, `vertical` — одна над другой. */\n  orientation?: GrSplitterOrientation\n  /** Минимум первой панели в процентах. */\n  min?: number\n  /** Максимум первой панели в процентах. */\n  max?: number\n  /** Минимум второй панели: без него её можно задавить в ноль. */\n  minEnd?: number\n  /** Шаг стрелок. */\n  step?: number\n  /** Шаг стрелок с `Shift`. */\n  bigStep?: number\n  /** Разрешить сворачивание первой панели. */\n  collapsible?: boolean\n  /** Первая панель свёрнута. Поддерживает `v-model:collapsed`. */\n  collapsed?: boolean\n  /** Разделитель не тянется, не фокусируется и не отвечает на клавиши. */\n  disabled?: boolean\n  /** Имя разделителя для скринридера. Не задано — из локали. */\n  ariaLabel?: string\n}\n\nexport interface GrSplitterEmits {\n  (e: 'update:modelValue', value: number): void\n  (e: 'update:collapsed', value: boolean): void\n  /** Конец жеста и каждый шаг с клавиатуры: сюда вешают сохранение раскладки. */\n  (e: 'change', value: number): void\n}\n\nconst props = withDefaults(defineProps<GrSplitterProps>(), {\n  modelValue: undefined,\n  defaultSize: 50,\n  min: 10,\n  max: 90,\n  minEnd: 10,\n  step: 1,\n  bigStep: 10,\n  collapsed: false,\n  disabled: false,\n  ariaLabel: undefined,\n  // `undefined`, а не готовые значения: иначе `componentDefaults` до них не дошли бы.\n  orientation: undefined,\n  collapsible: undefined,\n})\n\nconst emit = defineEmits<GrSplitterEmits>()\n\ndefineSlots<{\n  /** Первая панель — та, чей размер задаёт модель. */\n  start?: () => any\n  /** Вторая панель: занимает остаток. */\n  end?: () => any\n}>()\n\nconst { t } = useGranularityTranslations()\n\nconst orientation = useGrComponentProp('GrSplitter', 'orientation', () => props.orientation, 'horizontal')\nconst collapsible = useGrComponentProp('GrSplitter', 'collapsible', () => props.collapsible, false)\n\nconst startId = useId()\nconst rootEl = ref<HTMLElement | null>(null)\n\nconst bounds = computed<GrSplitterBounds>(() => ({\n  min: props.min,\n  max: props.max,\n  minEnd: props.minEnd,\n}))\n\n/**\n * Локальное состояние с синхронизацией из пропа — поддерживает и controlled\n * (`v-model`), и uncontrolled (сплиттер помнит размер сам), как `collapsed`\n * у `GrSidebar`.\n */\nconst sizeState = ref(clampSize(props.modelValue ?? props.defaultSize, bounds.value))\nwatch(() => props.modelValue, (value) => {\n  if (value !== undefined) sizeState.value = clampSize(value, bounds.value)\n})\n\nconst collapsedState = ref(props.collapsed)\nwatch(() => props.collapsed, value => (collapsedState.value = value))\n\n/** Размер, к которому возвращает `Enter`: свёрнутость не должна его терять. */\nconst restoreSize = ref(sizeState.value)\n\n/** Значение до начала жеста: `pointercancel` откатывает к нему. */\nlet sizeBeforeDrag = sizeState.value\nlet collapsedBeforeDrag = false\n\nconst isCollapsed = computed(() => collapsible.value && collapsedState.value)\n\n/** Что видно на экране: свёрнутая панель — это ноль в треке, но не ноль в модели. */\nconst renderedSize = computed(() => (isCollapsed.value ? 0 : clampSize(sizeState.value, bounds.value)))\n\nconst gridStyle = computed(() => {\n  const track = `${renderedSize.value}% var(--gr-splitter-size, 6px) 1fr`\n\n  return orientation.value === 'horizontal'\n    ? { gridTemplateColumns: track }\n    : { gridTemplateRows: track }\n})\n\n/**\n * `aria-orientation` описывает **сам разделитель**, а не раскладку: панели,\n * стоящие рядом, разделяет вертикальная полоса.\n */\nconst separatorOrientation = computed(() => (orientation.value === 'horizontal' ? 'vertical' : 'horizontal'))\n\nconst label = computed(() => props.ariaLabel ?? t('gr.splitter.label', 'Resize panels'))\n\nfunction setSize(next: number, commit: boolean): void {\n  const value = clampSize(next, bounds.value)\n  const changed = value !== sizeState.value\n\n  sizeState.value = value\n  if (changed) emit('update:modelValue', value)\n  if (commit) emit('change', value)\n}\n\nfunction setCollapsed(value: boolean): void {\n  if (collapsedState.value === value) return\n\n  collapsedState.value = value\n  emit('update:collapsed', value)\n}\n\n/**\n * Шаг размера. Свёрнутая панель на первое нажатие возвращается — двигать\n * то, чего не видно, значит менять раскладку вслепую.\n */\nfunction moveBy(delta: number): void {\n  if (isCollapsed.value) {\n    setCollapsed(false)\n    setSize(restoreSize.value, true)\n    return\n  }\n\n  restoreSize.value = clampSize(sizeState.value + delta, bounds.value)\n  setSize(sizeState.value + delta, true)\n}\n\nfunction toggleCollapsed(): void {\n  if (!collapsible.value) return\n\n  if (isCollapsed.value) {\n    setCollapsed(false)\n    setSize(restoreSize.value, true)\n    return\n  }\n\n  restoreSize.value = sizeState.value\n  setCollapsed(true)\n  emit('change', 0)\n}\n\nfunction reset(): void {\n  setCollapsed(false)\n  restoreSize.value = clampSize(props.defaultSize, bounds.value)\n  setSize(props.defaultSize, true)\n}\n\n// ————— Указатель.\nfunction onPointerMove(event: PointerEvent): void {\n  const rect = rootEl.value?.getBoundingClientRect()\n  if (!rect) return\n\n  // Против выделения текста под курсором во время жеста.\n  event.preventDefault()\n\n  const raw = sizeFromPointer(rect, event.clientX, event.clientY, orientation.value)\n\n  if (collapsible.value && shouldCollapse(raw, bounds.value)) {\n    if (!collapsedState.value) restoreSize.value = sizeState.value\n    setCollapsed(true)\n    return\n  }\n\n  setCollapsed(false)\n  restoreSize.value = clampSize(raw, bounds.value)\n  setSize(raw, false)\n}\n\nconst { isDragging, start: onPointerDown } = useDragGesture({\n  disabled: () => props.disabled,\n  onStart: () => {\n    sizeBeforeDrag = sizeState.value\n    collapsedBeforeDrag = collapsedState.value\n  },\n  onMove: onPointerMove,\n  onEnd: () => emit('change', renderedSize.value),\n  // Оборванный жест (браузер забрал указатель) не коммитит ничего: раскладка\n  // возвращается к той, что была до нажатия.\n  onCancel: () => {\n    setCollapsed(collapsedBeforeDrag)\n    setSize(sizeBeforeDrag, false)\n  },\n})\n\n// ————— Клавиатура.\nconst decreaseKey = computed(() => (orientation.value === 'horizontal' ? 'ArrowLeft' : 'ArrowUp'))\nconst increaseKey = computed(() => (orientation.value === 'horizontal' ? 'ArrowRight' : 'ArrowDown'))\n\nfunction onKeydown(event: KeyboardEvent): void {\n  if (props.disabled) return\n\n  const step = event.shiftKey ? props.bigStep : props.step\n\n  if (event.key === decreaseKey.value) moveBy(-step)\n  else if (event.key === increaseKey.value) moveBy(step)\n  else if (event.key === 'Home') moveBy(-100)\n  else if (event.key === 'End') moveBy(100)\n  else if (event.key === 'Enter') toggleCollapsed()\n  else return\n\n  // Дошли сюда — клавиша наша: страница не должна ещё и прокрутиться.\n  event.preventDefault()\n}\n\nfunction onDoubleClick(): void {\n  if (props.disabled) return\n\n  reset()\n}\n</script>\n\n<template>\n  <div\n    ref=\"rootEl\"\n    data-gr-splitter\n    :data-orientation=\"orientation\"\n    :data-dragging=\"isDragging ? '' : undefined\"\n    :data-collapsed=\"isCollapsed ? '' : undefined\"\n    :class=\"rootClass\"\n    :style=\"gridStyle\"\n  >\n    <div\n      :id=\"startId\"\n      data-gr-splitter-pane=\"start\"\n      :class=\"paneClass\"\n    >\n      <slot name=\"start\" />\n    </div>\n\n    <div\n      data-gr-splitter-separator\n      role=\"separator\"\n      :tabindex=\"disabled ? undefined : 0\"\n      :aria-orientation=\"separatorOrientation\"\n      :aria-label=\"label\"\n      :aria-controls=\"startId\"\n      :aria-valuenow=\"Math.round(renderedSize)\"\n      :aria-valuemin=\"Math.round(min)\"\n      :aria-valuemax=\"Math.round(max)\"\n      :aria-disabled=\"disabled ? 'true' : undefined\"\n      :class=\"separatorClass\"\n      @pointerdown=\"onPointerDown\"\n      @keydown=\"onKeydown\"\n      @dblclick=\"onDoubleClick\"\n    />\n\n    <div\n      data-gr-splitter-pane=\"end\"\n      :class=\"paneClass\"\n    >\n      <slot name=\"end\" />\n    </div>\n  </div>\n</template>\n\n<style>\n[data-gr-splitter-separator] {\n  background-color: var(--gr-splitter-color, var(--gr-brd));\n}\n\n/*\n * Зона захвата шире видимой полосы: шесть пикселей мышью не берутся, а делать\n * ради этого полосу толще — значит красить раскладку под удобство мыши.\n */\n[data-gr-splitter-separator]::before {\n  content: '';\n  position: absolute;\n  inset: calc(-1 * var(--gr-splitter-hit, 4px));\n}\n\n/* Насечка: короткая полоса посередине — единственный видимый намёк, что это ручка. */\n[data-gr-splitter-separator]::after {\n  content: '';\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  border-radius: var(--gr-radius-full);\n  background-color: var(--gr-splitter-hover-color, var(--gr-muted-fg));\n  opacity: 0;\n  transform: translate(-50%, -50%);\n  transition: opacity var(--gr-duration-fast) var(--gr-ease-out);\n}\n\n[data-gr-splitter][data-orientation='horizontal'] [data-gr-splitter-separator] {\n  cursor: col-resize;\n}\n\n[data-gr-splitter][data-orientation='horizontal'] [data-gr-splitter-separator]::after {\n  width: 2px;\n  height: var(--gr-splitter-grip, 24px);\n}\n\n[data-gr-splitter][data-orientation='vertical'] [data-gr-splitter-separator] {\n  cursor: row-resize;\n}\n\n[data-gr-splitter][data-orientation='vertical'] [data-gr-splitter-separator]::after {\n  width: var(--gr-splitter-grip, 24px);\n  height: 2px;\n}\n\n[data-gr-splitter-separator]:hover {\n  background-color: var(--gr-splitter-hover-color, var(--gr-muted-fg));\n}\n\n[data-gr-splitter-separator]:hover::after,\n[data-gr-splitter-separator]:focus-visible::after {\n  opacity: 1;\n}\n\n/* На залитой полосе насечка читается только вырезом — цветом страницы. */\n[data-gr-splitter-separator]:hover::after,\n[data-gr-splitter][data-dragging] [data-gr-splitter-separator]::after {\n  background-color: var(--gr-bg);\n}\n\n/* Во время жеста полоса подсвечена, даже если курсор ушёл с неё. */\n[data-gr-splitter][data-dragging] [data-gr-splitter-separator] {\n  background-color: var(--gr-splitter-active-color, var(--gr-primary));\n}\n\n[data-gr-splitter][data-dragging] [data-gr-splitter-separator]::after {\n  opacity: 1;\n}\n\n/* Жест не должен попутно выделять текст в панелях. */\n[data-gr-splitter][data-dragging] {\n  user-select: none;\n}\n\n[data-gr-splitter-separator][aria-disabled='true'] {\n  cursor: default;\n}\n\n[data-gr-splitter-separator][aria-disabled='true']::after {\n  display: none;\n}\n</style>\n","<script setup lang=\"ts\">\nimport { computed, ref, useId, watch } from 'vue'\n\nimport { useGrComponentProp } from '../GrConfigProvider/context'\nimport { useDragGesture } from '../../composables/useDragGesture'\nimport { useGranularityTranslations } from '../../internal/granularityI18n'\n\nimport { paneClass, rootClass, separatorClass } from './grSplitterStyles'\nimport {\n  clampSize,\n  shouldCollapse,\n  sizeFromPointer,\n  type GrSplitterBounds,\n  type GrSplitterOrientation,\n} from './splitterGeometry'\n\nexport type { GrSplitterOrientation } from './splitterGeometry'\n\n/**\n * Пропы {@link GrSplitter}.\n *\n * Две панели и разделитель между ними. Размер первой панели — доля контейнера\n * в процентах: она переживает смену ширины окна и рендерится на сервере без\n * замеров.\n */\nexport interface GrSplitterProps {\n  /** Доля первой панели в процентах. Поддерживает `v-model`; без него компонент помнит размер сам. */\n  modelValue?: number\n  /** Стартовая доля и точка возврата по двойному клику. */\n  defaultSize?: number\n  /** `horizontal` — панели рядом, `vertical` — одна над другой. */\n  orientation?: GrSplitterOrientation\n  /** Минимум первой панели в процентах. */\n  min?: number\n  /** Максимум первой панели в процентах. */\n  max?: number\n  /** Минимум второй панели: без него её можно задавить в ноль. */\n  minEnd?: number\n  /** Шаг стрелок. */\n  step?: number\n  /** Шаг стрелок с `Shift`. */\n  bigStep?: number\n  /** Разрешить сворачивание первой панели. */\n  collapsible?: boolean\n  /** Первая панель свёрнута. Поддерживает `v-model:collapsed`. */\n  collapsed?: boolean\n  /** Разделитель не тянется, не фокусируется и не отвечает на клавиши. */\n  disabled?: boolean\n  /** Имя разделителя для скринридера. Не задано — из локали. */\n  ariaLabel?: string\n}\n\nexport interface GrSplitterEmits {\n  (e: 'update:modelValue', value: number): void\n  (e: 'update:collapsed', value: boolean): void\n  /** Конец жеста и каждый шаг с клавиатуры: сюда вешают сохранение раскладки. */\n  (e: 'change', value: number): void\n}\n\nconst props = withDefaults(defineProps<GrSplitterProps>(), {\n  modelValue: undefined,\n  defaultSize: 50,\n  min: 10,\n  max: 90,\n  minEnd: 10,\n  step: 1,\n  bigStep: 10,\n  collapsed: false,\n  disabled: false,\n  ariaLabel: undefined,\n  // `undefined`, а не готовые значения: иначе `componentDefaults` до них не дошли бы.\n  orientation: undefined,\n  collapsible: undefined,\n})\n\nconst emit = defineEmits<GrSplitterEmits>()\n\ndefineSlots<{\n  /** Первая панель — та, чей размер задаёт модель. */\n  start?: () => any\n  /** Вторая панель: занимает остаток. */\n  end?: () => any\n}>()\n\nconst { t } = useGranularityTranslations()\n\nconst orientation = useGrComponentProp('GrSplitter', 'orientation', () => props.orientation, 'horizontal')\nconst collapsible = useGrComponentProp('GrSplitter', 'collapsible', () => props.collapsible, false)\n\nconst startId = useId()\nconst rootEl = ref<HTMLElement | null>(null)\n\nconst bounds = computed<GrSplitterBounds>(() => ({\n  min: props.min,\n  max: props.max,\n  minEnd: props.minEnd,\n}))\n\n/**\n * Локальное состояние с синхронизацией из пропа — поддерживает и controlled\n * (`v-model`), и uncontrolled (сплиттер помнит размер сам), как `collapsed`\n * у `GrSidebar`.\n */\nconst sizeState = ref(clampSize(props.modelValue ?? props.defaultSize, bounds.value))\nwatch(() => props.modelValue, (value) => {\n  if (value !== undefined) sizeState.value = clampSize(value, bounds.value)\n})\n\nconst collapsedState = ref(props.collapsed)\nwatch(() => props.collapsed, value => (collapsedState.value = value))\n\n/** Размер, к которому возвращает `Enter`: свёрнутость не должна его терять. */\nconst restoreSize = ref(sizeState.value)\n\n/** Значение до начала жеста: `pointercancel` откатывает к нему. */\nlet sizeBeforeDrag = sizeState.value\nlet collapsedBeforeDrag = false\n\nconst isCollapsed = computed(() => collapsible.value && collapsedState.value)\n\n/** Что видно на экране: свёрнутая панель — это ноль в треке, но не ноль в модели. */\nconst renderedSize = computed(() => (isCollapsed.value ? 0 : clampSize(sizeState.value, bounds.value)))\n\nconst gridStyle = computed(() => {\n  const track = `${renderedSize.value}% var(--gr-splitter-size, 6px) 1fr`\n\n  return orientation.value === 'horizontal'\n    ? { gridTemplateColumns: track }\n    : { gridTemplateRows: track }\n})\n\n/**\n * `aria-orientation` описывает **сам разделитель**, а не раскладку: панели,\n * стоящие рядом, разделяет вертикальная полоса.\n */\nconst separatorOrientation = computed(() => (orientation.value === 'horizontal' ? 'vertical' : 'horizontal'))\n\nconst label = computed(() => props.ariaLabel ?? t('gr.splitter.label', 'Resize panels'))\n\nfunction setSize(next: number, commit: boolean): void {\n  const value = clampSize(next, bounds.value)\n  const changed = value !== sizeState.value\n\n  sizeState.value = value\n  if (changed) emit('update:modelValue', value)\n  if (commit) emit('change', value)\n}\n\nfunction setCollapsed(value: boolean): void {\n  if (collapsedState.value === value) return\n\n  collapsedState.value = value\n  emit('update:collapsed', value)\n}\n\n/**\n * Шаг размера. Свёрнутая панель на первое нажатие возвращается — двигать\n * то, чего не видно, значит менять раскладку вслепую.\n */\nfunction moveBy(delta: number): void {\n  if (isCollapsed.value) {\n    setCollapsed(false)\n    setSize(restoreSize.value, true)\n    return\n  }\n\n  restoreSize.value = clampSize(sizeState.value + delta, bounds.value)\n  setSize(sizeState.value + delta, true)\n}\n\nfunction toggleCollapsed(): void {\n  if (!collapsible.value) return\n\n  if (isCollapsed.value) {\n    setCollapsed(false)\n    setSize(restoreSize.value, true)\n    return\n  }\n\n  restoreSize.value = sizeState.value\n  setCollapsed(true)\n  emit('change', 0)\n}\n\nfunction reset(): void {\n  setCollapsed(false)\n  restoreSize.value = clampSize(props.defaultSize, bounds.value)\n  setSize(props.defaultSize, true)\n}\n\n// ————— Указатель.\nfunction onPointerMove(event: PointerEvent): void {\n  const rect = rootEl.value?.getBoundingClientRect()\n  if (!rect) return\n\n  // Против выделения текста под курсором во время жеста.\n  event.preventDefault()\n\n  const raw = sizeFromPointer(rect, event.clientX, event.clientY, orientation.value)\n\n  if (collapsible.value && shouldCollapse(raw, bounds.value)) {\n    if (!collapsedState.value) restoreSize.value = sizeState.value\n    setCollapsed(true)\n    return\n  }\n\n  setCollapsed(false)\n  restoreSize.value = clampSize(raw, bounds.value)\n  setSize(raw, false)\n}\n\nconst { isDragging, start: onPointerDown } = useDragGesture({\n  disabled: () => props.disabled,\n  onStart: () => {\n    sizeBeforeDrag = sizeState.value\n    collapsedBeforeDrag = collapsedState.value\n  },\n  onMove: onPointerMove,\n  onEnd: () => emit('change', renderedSize.value),\n  // Оборванный жест (браузер забрал указатель) не коммитит ничего: раскладка\n  // возвращается к той, что была до нажатия.\n  onCancel: () => {\n    setCollapsed(collapsedBeforeDrag)\n    setSize(sizeBeforeDrag, false)\n  },\n})\n\n// ————— Клавиатура.\nconst decreaseKey = computed(() => (orientation.value === 'horizontal' ? 'ArrowLeft' : 'ArrowUp'))\nconst increaseKey = computed(() => (orientation.value === 'horizontal' ? 'ArrowRight' : 'ArrowDown'))\n\nfunction onKeydown(event: KeyboardEvent): void {\n  if (props.disabled) return\n\n  const step = event.shiftKey ? props.bigStep : props.step\n\n  if (event.key === decreaseKey.value) moveBy(-step)\n  else if (event.key === increaseKey.value) moveBy(step)\n  else if (event.key === 'Home') moveBy(-100)\n  else if (event.key === 'End') moveBy(100)\n  else if (event.key === 'Enter') toggleCollapsed()\n  else return\n\n  // Дошли сюда — клавиша наша: страница не должна ещё и прокрутиться.\n  event.preventDefault()\n}\n\nfunction onDoubleClick(): void {\n  if (props.disabled) return\n\n  reset()\n}\n</script>\n\n<template>\n  <div\n    ref=\"rootEl\"\n    data-gr-splitter\n    :data-orientation=\"orientation\"\n    :data-dragging=\"isDragging ? '' : undefined\"\n    :data-collapsed=\"isCollapsed ? '' : undefined\"\n    :class=\"rootClass\"\n    :style=\"gridStyle\"\n  >\n    <div\n      :id=\"startId\"\n      data-gr-splitter-pane=\"start\"\n      :class=\"paneClass\"\n    >\n      <slot name=\"start\" />\n    </div>\n\n    <div\n      data-gr-splitter-separator\n      role=\"separator\"\n      :tabindex=\"disabled ? undefined : 0\"\n      :aria-orientation=\"separatorOrientation\"\n      :aria-label=\"label\"\n      :aria-controls=\"startId\"\n      :aria-valuenow=\"Math.round(renderedSize)\"\n      :aria-valuemin=\"Math.round(min)\"\n      :aria-valuemax=\"Math.round(max)\"\n      :aria-disabled=\"disabled ? 'true' : undefined\"\n      :class=\"separatorClass\"\n      @pointerdown=\"onPointerDown\"\n      @keydown=\"onKeydown\"\n      @dblclick=\"onDoubleClick\"\n    />\n\n    <div\n      data-gr-splitter-pane=\"end\"\n      :class=\"paneClass\"\n    >\n      <slot name=\"end\" />\n    </div>\n  </div>\n</template>\n\n<style>\n[data-gr-splitter-separator] {\n  background-color: var(--gr-splitter-color, var(--gr-brd));\n}\n\n/*\n * Зона захвата шире видимой полосы: шесть пикселей мышью не берутся, а делать\n * ради этого полосу толще — значит красить раскладку под удобство мыши.\n */\n[data-gr-splitter-separator]::before {\n  content: '';\n  position: absolute;\n  inset: calc(-1 * var(--gr-splitter-hit, 4px));\n}\n\n/* Насечка: короткая полоса посередине — единственный видимый намёк, что это ручка. */\n[data-gr-splitter-separator]::after {\n  content: '';\n  position: absolute;\n  top: 50%;\n  left: 50%;\n  border-radius: var(--gr-radius-full);\n  background-color: var(--gr-splitter-hover-color, var(--gr-muted-fg));\n  opacity: 0;\n  transform: translate(-50%, -50%);\n  transition: opacity var(--gr-duration-fast) var(--gr-ease-out);\n}\n\n[data-gr-splitter][data-orientation='horizontal'] [data-gr-splitter-separator] {\n  cursor: col-resize;\n}\n\n[data-gr-splitter][data-orientation='horizontal'] [data-gr-splitter-separator]::after {\n  width: 2px;\n  height: var(--gr-splitter-grip, 24px);\n}\n\n[data-gr-splitter][data-orientation='vertical'] [data-gr-splitter-separator] {\n  cursor: row-resize;\n}\n\n[data-gr-splitter][data-orientation='vertical'] [data-gr-splitter-separator]::after {\n  width: var(--gr-splitter-grip, 24px);\n  height: 2px;\n}\n\n[data-gr-splitter-separator]:hover {\n  background-color: var(--gr-splitter-hover-color, var(--gr-muted-fg));\n}\n\n[data-gr-splitter-separator]:hover::after,\n[data-gr-splitter-separator]:focus-visible::after {\n  opacity: 1;\n}\n\n/* На залитой полосе насечка читается только вырезом — цветом страницы. */\n[data-gr-splitter-separator]:hover::after,\n[data-gr-splitter][data-dragging] [data-gr-splitter-separator]::after {\n  background-color: var(--gr-bg);\n}\n\n/* Во время жеста полоса подсвечена, даже если курсор ушёл с неё. */\n[data-gr-splitter][data-dragging] [data-gr-splitter-separator] {\n  background-color: var(--gr-splitter-active-color, var(--gr-primary));\n}\n\n[data-gr-splitter][data-dragging] [data-gr-splitter-separator]::after {\n  opacity: 1;\n}\n\n/* Жест не должен попутно выделять текст в панелях. */\n[data-gr-splitter][data-dragging] {\n  user-select: none;\n}\n\n[data-gr-splitter-separator][aria-disabled='true'] {\n  cursor: default;\n}\n\n[data-gr-splitter-separator][aria-disabled='true']::after {\n  display: none;\n}\n</style>\n"],"mappings":"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"}

package/dist/components/GrSplitter/index.js

@@ -1,3 +1,3 @@
-import { n as grSplitterSafelist, t as grSplitterConfig } from "../../chunks/config-BE6n20np.js";
-import { a as sizeFromPointer, i as shouldCollapse, n as GR_SPLITTER_ORIENTATIONS, r as clampSize, t as GrSplitter_default } from "./chunks/GrSplitter-7To8jbJ8.js";
+import { n as grSplitterSafelist, t as grSplitterConfig } from "../../chunks/config-BE6n20np2.js";
+import { a as sizeFromPointer, i as shouldCollapse, n as GR_SPLITTER_ORIENTATIONS, r as clampSize, t as GrSplitter_default } from "./chunks/GrSplitter-BzxVQwbY.js";
 export { GR_SPLITTER_ORIENTATIONS, GrSplitter_default as GrSplitter, GrSplitter_default as default, clampSize, grSplitterConfig, grSplitterSafelist, shouldCollapse, sizeFromPointer };