@soxa-ui/plugins 0.0.0-stage → 0.3.0-beta.1

package/dist/custom/overlay/swipe/swipe.plugin.d.ts

@@ -0,0 +1,150 @@
+import { TBasePlugin } from '../../../base';
+import type { IPluginContext } from '../../../base';
+import type { IOverlayOpenOptions } from '../types';
+import type { ISwipeOwner, TSwipePluginEvents } from './types';
+/**
+ * TSwipePlugin — жест слоя: смахнуть панель, чтобы закрыть.
+ *
+ * Общий для слоёв, которые смахивают (`ISwipeable`): выезжающая панель уходит
+ * к своему краю, поповер — от триггера, а внутри контейнера — к своему краю,
+ * панели Select и DatePicker — от поля, тост — к стороне своего места в
+ * регионе. С владельцем плагин говорит только через контракт: класса ядра не
+ * требует, а владельца без контракта не трогает.
+ *
+ * **Панель** — узел, который тянут. Это узел с пометкой владельцем
+ * (`TDismissPlugin.findPanel()`): панель поповера телепортирована, и ссылки на
+ * неё у плагинов нет. Без пометки — корень: у выезжающей панели корень и есть
+ * панель. Так же панель находят `THideOutsidePlugin` и плагины фокуса.
+ *
+ * **Куда уходит слой**, знает ядро (`swipeSide`) — кроме панели у якоря: под
+ * триггером она или над ним, решает flip `TAnchorPlugin`, и знает это только
+ * её узел (`data-placement`). Тогда сторона берётся с узла в начале жеста, а
+ * ось у такой панели всегда вертикальная.
+ *
+ * За что тянуть, выбирает владелец (`swipe`): за полосу (`handle`) или за любое
+ * место панели (`panel`), кроме контролов (`closestControl`) и областей,
+ * которые прокручиваются вдоль оси, — те прокручиваются сами. За всю панель
+ * жест не начинается и тогда, когда в ней выделен текст: его тянут, а не
+ * панель.
+ *
+ * **Нажатие становится жестом**, когда указатель ушёл от точки нажатия вдоль
+ * оси дальше порога. Ушёл поперёк — это не жест панели: прокрутка, выделение,
+ * чужой жест, — и нажатие отпускается. Жест начинает владелец (`beginSwipe`):
+ * у него признак «тянут», по которому тема снимает переход, — иначе панель
+ * догоняла бы палец с опозданием.
+ *
+ * **Сдвиг во время жеста — операция над узлом**, а не значение: плагин пишет
+ * его в панель переменной `--so-swipe-offset`, и через обмен на каждом кадре он
+ * не ходит. К краю панель идёт за указателем, но не дальше своего размера; от
+ * края — с сопротивлением.
+ *
+ * **Отпустили** дальше четверти размера или быстро к краю — плагин закрывает
+ * слой с причиной `swipe` тем же путём, что нажатие мимо и Escape
+ * (`bindOverlayOpen`): запросом у владельца, который его принимает (подписчик
+ * `close:before` вправе его отменить), записью открытости у остальных. Иначе —
+ * и когда запрос отменили — панель возвращается: признак «тянут» снят, и сдвиг
+ * уходит кадром позже, когда переход у темы уже снова включён. Браузер отнял
+ * указатель (`pointercancel`) — это не решение пользователя, и панель
+ * возвращается тоже.
+ *
+ * **Закрытая панель сдвиг сохраняет** — и закрытая жестом, и закрытая посреди
+ * жеста: она исчезает переходом темы, и куда — решает тема. Выезжающая панель
+ * и поповер уезжают к своей стороне от места, где их отпустили, а карточка
+ * выбора месяца в календаре гаснет там же, где её отпустили. Снимай плагин
+ * сдвиг на закрытии, панель прыгнула бы на место посреди исчезания. Снимается
+ * он, когда панель показывают снова: показанная панель стоит на месте.
+ *
+ * **Касание.** Пока жест включён, плагин ставит панели `touch-action` по оси:
+ * без него браузер забрал бы касание под прокрутку страницы, и жест не работал
+ * бы пальцем, а поведение не должно зависеть от CSS темы. Но `touch-action`
+ * действует только до ближайшей прокручиваемой области: касание в ней — в
+ * теле панели, даже когда прокручивать нечего, — браузер забирает под
+ * прокрутку в любую сторону и отнимает указатель (`pointercancel`). Поэтому,
+ * пока идёт жест, плагин гасит `touchmove` панели. До порога он не гасит
+ * ничего: касание поперёк оси остаётся прокрутке, а из области, которая
+ * прокручивается вдоль оси, жест и не начинается — у пальца то же правило,
+ * что у мыши.
+ *
+ * Касание, в отличие от мыши, браузер сам захватывает за узлом под пальцем —
+ * полосой или абзацем тела. Начало жеста переносит захват на панель, и узел
+ * под пальцем его теряет: его `lostpointercapture` всплывает до панели. Жест
+ * кончает только потеря захвата самой панелью.
+ *
+ * Своих действий у нажатия на полосу нет (`preventDefault`): ни выделения, ни
+ * фокуса на саму панель. Нажатие по содержимому своих действий не теряет, а
+ * выделение, начатое им, жест снимает и гасит до конца. `click`, которым
+ * кончается жест, гасится: отпускание — не нажатие.
+ *
+ * Слушатели висят, только пока жест включён и слой открыт: это подписка на
+ * `change:swipe`, сторону ухода и открытость (`property`, по умолчанию `open`,
+ * как у других плагинов слоя), а не проверка в обработчике.
+ */
+export declare class TSwipePlugin extends TBasePlugin<ISwipeOwner, TSwipePluginEvents> {
+    private _owner;
+    /** Открытость владельца: по ней жест включается, ею же слой закрывается. */
+    private _open;
+    private _dismiss;
+    private _root;
+    /** Панель, на которой жест включён; `null` — выключен. */
+    private _target;
+    /** Инлайновый `touch-action` панели до включения жеста. */
+    private _touchAction;
+    private _press;
+    private _gesture;
+    /** Жест кончился отпусканием: следующий `click` панели — его, а не пользователя. */
+    private _swallowClick;
+    /** Кадр, в котором уйдёт сдвиг отпущенной панели; `null` — ничего не ждёт. */
+    private _resetFrame;
+    private readonly _sync;
+    install(ctx: IPluginContext, options?: IOverlayOpenOptions): void;
+    destroy(): void;
+    /**
+     * Жест включён ровно тогда, когда он выбран, слой открыт, а корень объявлен.
+     * Панель — узел с пометкой владельцем, без неё — корень.
+     */
+    private _resync;
+    private _attach;
+    private _detach;
+    private readonly _onPointerDown;
+    /**
+     * Можно ли начать жест с узла. Узел — в слое своей панели: у панели,
+     * открытой внутри этой (`contained`), жест свой. Слой панели — она сама или
+     * ближайший слой над ней: тост своего слоя не держит, он лежит в регионе
+     * тостов, и слой у тоста — регион. Дальше — по выбору владельца: полоса или
+     * вся панель, кроме контролов, прокрутки вдоль оси и выделенного текста.
+     */
+    private _grabbable;
+    private readonly _onPointerMove;
+    private _begin;
+    /** Панель за указателем: к краю — не дальше своего размера, от края — с сопротивлением. */
+    private _drag;
+    /**
+     * Захват потеряла панель — указатель у неё отняли, и жест кончен. Узел под
+     * пальцем теряет захват и посреди жеста: касание браузер сам захватывает за
+     * ним, а начало жеста переносит захват на панель. Это событие всплывает до
+     * панели, но жест не кончает — указатель по-прежнему у неё.
+     */
+    private readonly _onLostCapture;
+    private readonly _onPointerEnd;
+    /** Закрыть ли отпущенную панель: путь к краю или скорость к краю. */
+    private _closes;
+    /**
+     * Жест кончился. Признак «тянут» снимается сразу, а сдвиг отпущенной
+     * панели — кадром позже: к этому кадру тема уже снова включила переход, и
+     * панель поедет на место. Сними сдвиг сразу — пересчёт стилей пришёлся бы
+     * раньше, и панель прыгнула бы на место. Закрылась панель — ожидание
+     * снимает отвязка жеста (`_detach`), а сдвиг остаётся до следующего показа.
+     */
+    private _finish;
+    private readonly _onClick;
+    /**
+     * Касание, которое ведёт жест, — жесту, а не прокрутке (см. «Касание» в
+     * шапке). До порога жеста касание остаётся браузеру, а событие, которое
+     * отменить уже нельзя (`cancelable: false`), не гасится: прокрутку, начатую
+     * раньше жеста, браузер не отдаёт.
+     */
+    private readonly _onTouchMove;
+    private _restoreSelect;
+    private _scheduleReset;
+    private _cancelReset;
+}

package/dist/custom/overlay/swipe/swipe.plugin.js

@@ -0,0 +1,432 @@
+import { TBasePlugin } from "../../../base/base.class.js";
+import { TElementPlugin } from "../../element/element.plugin.js";
+import { isMeasurableElement } from "../../../utils/isMeasurableElement.js";
+import { closestControl } from "../../../utils/tabStops.js";
+import { isScrollable } from "../../../utils/scrollParent.js";
+import { bindOverlayOpen } from "../open-state.js";
+import { TDismissPlugin } from "../../dismiss/dismiss.plugin.js";
+import { ANCHOR_PLACEMENT_ATTRIBUTE } from "../../frame/anchor/anchor.plugin.js";
+import { FRAME_LAYER_ATTRIBUTE, isSwipeable } from "@soxa-ui/core";
+//#region src/custom/overlay/swipe/swipe.plugin.ts
+/**
+* Переменная сдвига панели во время жеста — контракт с темой. Значение — px
+* по оси жеста, со знаком оси окна: у панели, которая уходит вправо или вниз,
+* сдвиг к краю положительный, влево или вверх — отрицательный. Тема кладёт её
+* в `translate` панели; без жеста переменной нет.
+*/
+var SWIPE_VARIABLE = "--so-swipe-offset";
+/** Сколько пройти от точки нажатия, чтобы нажатие стало жестом, px. */
+var START_DISTANCE = 6;
+/** Отпустили дальше этой доли размера панели — закрыть. */
+var CLOSE_FRACTION = .25;
+/** Отпустили быстрее этого к краю — закрыть, как ни мал путь, px/мс. */
+var CLOSE_VELOCITY = .4;
+/** Окно скорости: по точкам за столько последних мс перед отпусканием. */
+var VELOCITY_WINDOW = 100;
+/**
+* Предел сопротивления за открытым положением, px: сколько ни тяни от края,
+* панель отойдёт от него не дальше.
+*/
+var OVERSHOOT = 24;
+/** Инлайновые свойства, которыми жест гасит выделение текста. */
+var USER_SELECT = ["user-select", "-webkit-user-select"];
+/**
+* Ось жеста: к началу или концу строки — по горизонтали, вверх или вниз — по
+* вертикали. Сторона у якоря (`null`) — тоже вертикаль: якорь ставит панель
+* под триггером или над ним.
+*/
+function axisOf(side) {
+	return side === "start" || side === "end" ? "x" : "y";
+}
+/**
+* Куда по оси окна слой уходит. `start` и `end` — логические: в RTL начало
+* строки справа, и жест зеркалится вместе со слоем. Направление — вычисленное,
+* как у `TAnchorPlugin`: у панели бывает `direction: inherit`, и сторону задаёт
+* предок.
+*/
+function closingSign(side, rtl) {
+	if (side === "bottom") return 1;
+	if (side === "top") return -1;
+	return side === "end" !== rtl ? 1 : -1;
+}
+/**
+* Сторона панели у якоря после flip — её пишет `TAnchorPlugin` в самой панели
+* (`data-placement`): `top…` — над триггером, `bottom…` — под ним. Панель
+* уходит от триггера, то есть к этой же стороне. Атрибута нет — панель не у
+* якоря, и уходить ей некуда. Сбоку от якоря (`start…`, `end…`) — тоже `null`:
+* смахиваемых боковых панелей у якоря нет.
+*/
+function anchoredSide(panel) {
+	const placement = panel.getAttribute(ANCHOR_PLACEMENT_ATTRIBUTE);
+	if (placement?.startsWith("top")) return "top";
+	if (placement?.startsWith("bottom")) return "bottom";
+	return null;
+}
+/** Сопротивление за открытым положением: чем дальше тянут, тем меньше отдаёт панель. */
+function resist(distance) {
+	return OVERSHOOT * distance / (OVERSHOOT + distance);
+}
+/**
+* Лежит ли узел в области, которая прокручивается вдоль оси, — между узлом и
+* панелью. Такая область прокручивается сама, и жест из неё не начинается.
+* Прокрутку поперёк оси жест не трогает: тянут вдоль.
+*/
+function scrollsAlong(node, panel, axis) {
+	for (let current = node; current && current !== panel;) {
+		if (isScrollable(current, axis)) return true;
+		current = current.parentElement;
+	}
+	return false;
+}
+/**
+* TSwipePlugin — жест слоя: смахнуть панель, чтобы закрыть.
+*
+* Общий для слоёв, которые смахивают (`ISwipeable`): выезжающая панель уходит
+* к своему краю, поповер — от триггера, а внутри контейнера — к своему краю,
+* панели Select и DatePicker — от поля, тост — к стороне своего места в
+* регионе. С владельцем плагин говорит только через контракт: класса ядра не
+* требует, а владельца без контракта не трогает.
+*
+* **Панель** — узел, который тянут. Это узел с пометкой владельцем
+* (`TDismissPlugin.findPanel()`): панель поповера телепортирована, и ссылки на
+* неё у плагинов нет. Без пометки — корень: у выезжающей панели корень и есть
+* панель. Так же панель находят `THideOutsidePlugin` и плагины фокуса.
+*
+* **Куда уходит слой**, знает ядро (`swipeSide`) — кроме панели у якоря: под
+* триггером она или над ним, решает flip `TAnchorPlugin`, и знает это только
+* её узел (`data-placement`). Тогда сторона берётся с узла в начале жеста, а
+* ось у такой панели всегда вертикальная.
+*
+* За что тянуть, выбирает владелец (`swipe`): за полосу (`handle`) или за любое
+* место панели (`panel`), кроме контролов (`closestControl`) и областей,
+* которые прокручиваются вдоль оси, — те прокручиваются сами. За всю панель
+* жест не начинается и тогда, когда в ней выделен текст: его тянут, а не
+* панель.
+*
+* **Нажатие становится жестом**, когда указатель ушёл от точки нажатия вдоль
+* оси дальше порога. Ушёл поперёк — это не жест панели: прокрутка, выделение,
+* чужой жест, — и нажатие отпускается. Жест начинает владелец (`beginSwipe`):
+* у него признак «тянут», по которому тема снимает переход, — иначе панель
+* догоняла бы палец с опозданием.
+*
+* **Сдвиг во время жеста — операция над узлом**, а не значение: плагин пишет
+* его в панель переменной `--so-swipe-offset`, и через обмен на каждом кадре он
+* не ходит. К краю панель идёт за указателем, но не дальше своего размера; от
+* края — с сопротивлением.
+*
+* **Отпустили** дальше четверти размера или быстро к краю — плагин закрывает
+* слой с причиной `swipe` тем же путём, что нажатие мимо и Escape
+* (`bindOverlayOpen`): запросом у владельца, который его принимает (подписчик
+* `close:before` вправе его отменить), записью открытости у остальных. Иначе —
+* и когда запрос отменили — панель возвращается: признак «тянут» снят, и сдвиг
+* уходит кадром позже, когда переход у темы уже снова включён. Браузер отнял
+* указатель (`pointercancel`) — это не решение пользователя, и панель
+* возвращается тоже.
+*
+* **Закрытая панель сдвиг сохраняет** — и закрытая жестом, и закрытая посреди
+* жеста: она исчезает переходом темы, и куда — решает тема. Выезжающая панель
+* и поповер уезжают к своей стороне от места, где их отпустили, а карточка
+* выбора месяца в календаре гаснет там же, где её отпустили. Снимай плагин
+* сдвиг на закрытии, панель прыгнула бы на место посреди исчезания. Снимается
+* он, когда панель показывают снова: показанная панель стоит на месте.
+*
+* **Касание.** Пока жест включён, плагин ставит панели `touch-action` по оси:
+* без него браузер забрал бы касание под прокрутку страницы, и жест не работал
+* бы пальцем, а поведение не должно зависеть от CSS темы. Но `touch-action`
+* действует только до ближайшей прокручиваемой области: касание в ней — в
+* теле панели, даже когда прокручивать нечего, — браузер забирает под
+* прокрутку в любую сторону и отнимает указатель (`pointercancel`). Поэтому,
+* пока идёт жест, плагин гасит `touchmove` панели. До порога он не гасит
+* ничего: касание поперёк оси остаётся прокрутке, а из области, которая
+* прокручивается вдоль оси, жест и не начинается — у пальца то же правило,
+* что у мыши.
+*
+* Касание, в отличие от мыши, браузер сам захватывает за узлом под пальцем —
+* полосой или абзацем тела. Начало жеста переносит захват на панель, и узел
+* под пальцем его теряет: его `lostpointercapture` всплывает до панели. Жест
+* кончает только потеря захвата самой панелью.
+*
+* Своих действий у нажатия на полосу нет (`preventDefault`): ни выделения, ни
+* фокуса на саму панель. Нажатие по содержимому своих действий не теряет, а
+* выделение, начатое им, жест снимает и гасит до конца. `click`, которым
+* кончается жест, гасится: отпускание — не нажатие.
+*
+* Слушатели висят, только пока жест включён и слой открыт: это подписка на
+* `change:swipe`, сторону ухода и открытость (`property`, по умолчанию `open`,
+* как у других плагинов слоя), а не проверка в обработчике.
+*/
+var TSwipePlugin = class extends TBasePlugin {
+	_owner = null;
+	/** Открытость владельца: по ней жест включается, ею же слой закрывается. */
+	_open = null;
+	_dismiss = null;
+	_root = null;
+	/** Панель, на которой жест включён; `null` — выключен. */
+	_target = null;
+	/** Инлайновый `touch-action` панели до включения жеста. */
+	_touchAction = "";
+	_press = null;
+	_gesture = null;
+	/** Жест кончился отпусканием: следующий `click` панели — его, а не пользователя. */
+	_swallowClick = false;
+	/** Кадр, в котором уйдёт сдвиг отпущенной панели; `null` — ничего не ждёт. */
+	_resetFrame = null;
+	_sync = () => this._resync();
+	install(ctx, options) {
+		super.install(ctx, options);
+		const owner = ctx.getInstance();
+		this._owner = isSwipeable(owner) ? owner : null;
+		this._dismiss = ctx.get(TDismissPlugin) ?? null;
+		const element = ctx.get(TElementPlugin);
+		element?.events.on("ready", (node) => {
+			this._root = node;
+			this._resync();
+		});
+		element?.events.on("removed", () => {
+			this._root = null;
+			this._resync();
+		});
+		if (!this._owner) return;
+		this._listenTo(this._owner.events, "change:swipe", this._sync);
+		this._listenTo(this._owner.events, "change:swipeSide", this._sync);
+		this._open = bindOverlayOpen(ctx, options, this._sync);
+	}
+	destroy() {
+		this._detach();
+		this._open?.unbind();
+		this._open = null;
+		this._owner = null;
+		this._dismiss = null;
+		this._root = null;
+		super.destroy();
+	}
+	/**
+	* Жест включён ровно тогда, когда он выбран, слой открыт, а корень объявлен.
+	* Панель — узел с пометкой владельцем, без неё — корень.
+	*/
+	_resync() {
+		const owner = this._owner;
+		const root = this._root;
+		this._detach();
+		if (!owner || owner.swipe === "none" || !this._open?.read() || !root) return;
+		const panel = this._dismiss?.findPanel() ?? root;
+		if (!isMeasurableElement(panel)) return;
+		this._attach(panel, owner);
+	}
+	_attach(panel, owner) {
+		const target = panel;
+		target.addEventListener("pointerdown", this._onPointerDown);
+		target.addEventListener("pointermove", this._onPointerMove);
+		target.addEventListener("pointerup", this._onPointerEnd);
+		target.addEventListener("pointercancel", this._onPointerEnd);
+		target.addEventListener("lostpointercapture", this._onLostCapture);
+		target.addEventListener("click", this._onClick);
+		target.addEventListener("touchmove", this._onTouchMove, { passive: false });
+		panel.style.removeProperty(SWIPE_VARIABLE);
+		this._touchAction = panel.style.getPropertyValue("touch-action");
+		panel.style.setProperty("touch-action", axisOf(owner.swipeSide) === "y" ? "pan-x pinch-zoom" : "pan-y pinch-zoom");
+		this._target = panel;
+	}
+	_detach() {
+		const panel = this._target;
+		this._press = null;
+		this._swallowClick = false;
+		if (!panel) return;
+		const target = panel;
+		target.removeEventListener("pointerdown", this._onPointerDown);
+		target.removeEventListener("pointermove", this._onPointerMove);
+		target.removeEventListener("pointerup", this._onPointerEnd);
+		target.removeEventListener("pointercancel", this._onPointerEnd);
+		target.removeEventListener("lostpointercapture", this._onLostCapture);
+		target.removeEventListener("click", this._onClick);
+		target.removeEventListener("touchmove", this._onTouchMove);
+		const gesture = this._gesture;
+		if (gesture) {
+			this._gesture = null;
+			this._restoreSelect(panel, gesture);
+			if ("hasPointerCapture" in panel && panel.hasPointerCapture(gesture.pointer)) panel.releasePointerCapture(gesture.pointer);
+			this._owner?.endSwipe();
+		}
+		restoreStyle(panel, "touch-action", this._touchAction);
+		this._cancelReset();
+		if (this._open?.read()) panel.style.removeProperty(SWIPE_VARIABLE);
+		this._target = null;
+	}
+	_onPointerDown = (event) => {
+		const owner = this._owner;
+		const panel = this._target;
+		this._swallowClick = false;
+		if (!owner || !panel || this._gesture || !event.isPrimary || event.button !== 0) return;
+		if (!(event.target instanceof Element) || !this._grabbable(owner, panel, event.target)) {
+			this._press = null;
+			return;
+		}
+		this._press = {
+			pointer: event.pointerId,
+			x: event.clientX,
+			y: event.clientY
+		};
+		if (owner.swipe === "handle") event.preventDefault();
+	};
+	/**
+	* Можно ли начать жест с узла. Узел — в слое своей панели: у панели,
+	* открытой внутри этой (`contained`), жест свой. Слой панели — она сама или
+	* ближайший слой над ней: тост своего слоя не держит, он лежит в регионе
+	* тостов, и слой у тоста — регион. Дальше — по выбору владельца: полоса или
+	* вся панель, кроме контролов, прокрутки вдоль оси и выделенного текста.
+	*/
+	_grabbable(owner, panel, node) {
+		const layer = `[${FRAME_LAYER_ATTRIBUTE}]`;
+		if (node.closest(layer) !== panel.closest(layer)) return false;
+		if (owner.swipe === "handle") return node.closest(owner.classes.resolve("__handle", { point: true }))?.parentElement === panel;
+		if (closestControl(node, panel)) return false;
+		if (scrollsAlong(node, panel, axisOf(owner.swipeSide))) return false;
+		const selection = panel.ownerDocument.getSelection();
+		const anchor = selection?.anchorNode;
+		return !selection || selection.isCollapsed || !anchor || !panel.contains(anchor);
+	}
+	_onPointerMove = (event) => {
+		const gesture = this._gesture;
+		if (gesture) {
+			if (event.pointerId === gesture.pointer) this._drag(gesture, event);
+			return;
+		}
+		const press = this._press;
+		const owner = this._owner;
+		if (!press || !owner || event.pointerId !== press.pointer) return;
+		const dx = event.clientX - press.x;
+		const dy = event.clientY - press.y;
+		const [along, across] = axisOf(owner.swipeSide) === "y" ? [dy, dx] : [dx, dy];
+		if (Math.abs(along) < START_DISTANCE && Math.abs(across) < START_DISTANCE) return;
+		this._press = null;
+		if (Math.abs(across) >= Math.abs(along)) return;
+		this._begin(owner, press, event);
+	};
+	_begin(owner, press, event) {
+		const panel = this._target;
+		if (!panel) return;
+		const side = owner.swipeSide ?? anchoredSide(panel);
+		if (!side || !owner.beginSwipe()) return;
+		const axis = axisOf(side);
+		const box = panel.getBoundingClientRect();
+		const content = owner.swipe === "panel";
+		const gesture = {
+			pointer: press.pointer,
+			axis,
+			sign: closingSign(side, getComputedStyle(panel).direction === "rtl"),
+			origin: axis === "y" ? press.y : press.x,
+			size: axis === "y" ? box.height : box.width,
+			offset: 0,
+			samples: [],
+			userSelect: content ? USER_SELECT.map((property) => [property, panel.style.getPropertyValue(property)]) : []
+		};
+		this._gesture = gesture;
+		this._cancelReset();
+		if (content) {
+			panel.ownerDocument.getSelection()?.removeAllRanges();
+			for (const property of USER_SELECT) panel.style.setProperty(property, "none");
+		}
+		if ("setPointerCapture" in panel) panel.setPointerCapture(press.pointer);
+		this._drag(gesture, event);
+	}
+	/** Панель за указателем: к краю — не дальше своего размера, от края — с сопротивлением. */
+	_drag(gesture, event) {
+		const panel = this._target;
+		const distance = ((gesture.axis === "y" ? event.clientY : event.clientX) - gesture.origin) * gesture.sign;
+		const toEdge = gesture.size > 0 ? Math.min(distance, gesture.size) : distance;
+		gesture.offset = distance >= 0 ? toEdge : -resist(-distance);
+		gesture.samples = [...gesture.samples.filter(({ time }) => time >= event.timeStamp - VELOCITY_WINDOW), {
+			time: event.timeStamp,
+			distance
+		}];
+		panel?.style.setProperty(SWIPE_VARIABLE, `${gesture.offset * gesture.sign}px`);
+	}
+	/**
+	* Захват потеряла панель — указатель у неё отняли, и жест кончен. Узел под
+	* пальцем теряет захват и посреди жеста: касание браузер сам захватывает за
+	* ним, а начало жеста переносит захват на панель. Это событие всплывает до
+	* панели, но жест не кончает — указатель по-прежнему у неё.
+	*/
+	_onLostCapture = (event) => {
+		if (event.target === this._target) this._onPointerEnd(event);
+	};
+	_onPointerEnd = (event) => {
+		if (this._press?.pointer === event.pointerId) this._press = null;
+		const gesture = this._gesture;
+		if (!gesture || event.pointerId !== gesture.pointer) return;
+		if (event.type !== "pointerup") {
+			this._finish(gesture, false);
+			return;
+		}
+		this._drag(gesture, event);
+		this._swallowClick = true;
+		this._finish(gesture, this._closes(gesture));
+	};
+	/** Закрыть ли отпущенную панель: путь к краю или скорость к краю. */
+	_closes(gesture) {
+		return (gesture.size > 0 ? gesture.offset / gesture.size : 0) >= CLOSE_FRACTION || gesture.offset > 0 && velocity(gesture) >= CLOSE_VELOCITY;
+	}
+	/**
+	* Жест кончился. Признак «тянут» снимается сразу, а сдвиг отпущенной
+	* панели — кадром позже: к этому кадру тема уже снова включила переход, и
+	* панель поедет на место. Сними сдвиг сразу — пересчёт стилей пришёлся бы
+	* раньше, и панель прыгнула бы на место. Закрылась панель — ожидание
+	* снимает отвязка жеста (`_detach`), а сдвиг остаётся до следующего показа.
+	*/
+	_finish(gesture, close) {
+		const panel = this._target;
+		this._gesture = null;
+		if (panel) {
+			this._restoreSelect(panel, gesture);
+			this._scheduleReset(panel);
+		}
+		this._owner?.endSwipe();
+		if (close) this._open?.close("swipe");
+	}
+	_onClick = (event) => {
+		if (!this._swallowClick) return;
+		this._swallowClick = false;
+		event.preventDefault();
+	};
+	/**
+	* Касание, которое ведёт жест, — жесту, а не прокрутке (см. «Касание» в
+	* шапке). До порога жеста касание остаётся браузеру, а событие, которое
+	* отменить уже нельзя (`cancelable: false`), не гасится: прокрутку, начатую
+	* раньше жеста, браузер не отдаёт.
+	*/
+	_onTouchMove = (event) => {
+		if (this._gesture && event.cancelable) event.preventDefault();
+	};
+	_restoreSelect(panel, gesture) {
+		for (const [property, value] of gesture.userSelect) restoreStyle(panel, property, value);
+	}
+	_scheduleReset(panel) {
+		this._cancelReset();
+		this._resetFrame = requestAnimationFrame(() => {
+			this._resetFrame = null;
+			panel.style.removeProperty(SWIPE_VARIABLE);
+		});
+	}
+	_cancelReset() {
+		if (this._resetFrame === null) return;
+		cancelAnimationFrame(this._resetFrame);
+		this._resetFrame = null;
+	}
+};
+/**
+* Скорость к краю в конце жеста, px/мс: по точкам окна скорости. Одна точка
+* — указатель стоял перед отпусканием, скорости нет.
+*/
+function velocity(gesture) {
+	const first = gesture.samples[0];
+	const last = gesture.samples[gesture.samples.length - 1];
+	if (!first || !last || last.time <= first.time) return 0;
+	return (last.distance - first.distance) / (last.time - first.time);
+}
+/** Вернуть инлайновое значение, которое было до плагина: пустое — снять свойство. */
+function restoreStyle(panel, property, value) {
+	if (value === "") panel.style.removeProperty(property);
+	else panel.style.setProperty(property, value);
+}
+//#endregion
+export { TSwipePlugin };

package/dist/custom/overlay/swipe/types.d.ts

@@ -0,0 +1,62 @@
+import type { ISwipeable, TClasses, TSwipeableEvents } from '@soxa-ui/core';
+import type { IListenable, TPluginEvents } from '../../../base';
+/**
+ * Своих событий у плагина нет: результат жеста виден через владельца —
+ * `swiping` и закрытие (с причиной `swipe` у того, кто принимает запрос).
+ * Второй путь к тем же фактам через события плагина разошёлся бы с первым.
+ */
+export type TSwipePluginEvents = TPluginEvents;
+/**
+ * Владелец глазами плагина: смахиваемый слой (`ISwipeable`), его шина и
+ * классы — по базовому классу плагин узнаёт полосу (`__handle`).
+ *
+ * Контракт, а не класс: тот же плагин стоит на выезжающей панели, поповере,
+ * Select и DatePicker, общего предка у них нет — есть только общий контракт.
+ */
+export interface ISwipeOwner extends ISwipeable {
+    readonly events: IListenable<TSwipeableEvents>;
+    readonly classes: TClasses;
+}
+/** Ось, вдоль которой слой уходит жестом. */
+export type TSwipeAxis = 'x' | 'y';
+/**
+ * Нажатие, которое ещё не стало жестом: жест начнётся, когда указатель уйдёт
+ * от точки нажатия вдоль оси дальше порога.
+ */
+export type TSwipePress = {
+    /** `pointerId` нажатия: чужие указатели его не двигают */
+    pointer: number;
+    /** Точка нажатия в координатах окна */
+    x: number;
+    y: number;
+};
+/** Точка пути жеста — по ней считается скорость в конце. */
+export type TSwipeSample = {
+    /** Время события, мс */
+    time: number;
+    /** Путь к краю от точки нажатия, px; назад от края — со знаком минус */
+    distance: number;
+};
+/** Жест, который ведёт плагин: от начала до отпускания. */
+export type TSwipeGesture = {
+    /** `pointerId` указателя жеста */
+    pointer: number;
+    /** Ось жеста — на весь жест, вычислена в начале */
+    axis: TSwipeAxis;
+    /**
+     * Куда по оси окна слой уходит: `1` — к большим координатам (вправо,
+     * вниз), `-1` — к меньшим. `start` и `end` — с учётом вычисленного
+     * направления письма.
+     */
+    sign: 1 | -1;
+    /** Координата нажатия по оси */
+    origin: number;
+    /** Размер панели по оси: доля пути считается от него */
+    size: number;
+    /** Сдвиг панели к краю, px; за открытое положение — с сопротивлением, минус */
+    offset: number;
+    /** Недавние точки пути — окно скорости */
+    samples: TSwipeSample[];
+    /** Инлайновые `user-select` панели до жеста — вернуть в конце */
+    userSelect: readonly [property: string, value: string][];
+};