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

package/dist/custom/virtual/virtual.plugin.js

@@ -0,0 +1,311 @@
+import { TBasePlugin } from "../../base/base.class.js";
+import { TCollectionBundlesPlugin } from "../collection/bundles.plugin.js";
+import { TElementPlugin } from "../element/element.plugin.js";
+import { TCollectionElements } from "../collection/collection-elements.plugin.js";
+import { scrollParentOf } from "../../utils/scrollParent.js";
+import { drawOf } from "@soxa-ui/core";
+//#region src/custom/virtual/virtual.plugin.ts
+/** Причина закрепления элемента в окне — в нём DOM-фокус. */
+var FOCUS = "focus";
+/** У узла есть коробка: скрытый список (`display: none` у предка) её не даёт. */
+function hasBox(node) {
+	const rect = node.getBoundingClientRect();
+	return rect.width > 0 || rect.height > 0;
+}
+/**
+* TVirtualPlugin — the collection's window in the document: it measures the
+* visible band and the step of the items, and tracks the item with DOM focus.
+*
+* What to draw is decided by the collection's drawing (`draw`); the plugin
+* gives it what only the live document knows: which part of the list is
+* visible (`notifyViewport`) and which item holds focus (the `focus` pin). The
+* `Virtual` wrapper puts the plugin into the collection's bundle when the
+* collection picks up its window: by then the engine is bound to the bundles
+* registry, and the plugin takes item nodes from the registry of nodes. While
+* there is no window, the plugin listens to nothing.
+*
+* **What scrolls the window.** The parent of the drawn items if it scrolls
+* itself (ListBox with `maxRows`, the list in the Select panel), otherwise the
+* nearest ancestor that scrolls vertically, otherwise the page. There is no
+* prop: a block of limited height and the page work without setup. The
+* container is looked up again when the size of the list or the container
+* changes — with it changes whether the container scrolls.
+*
+* **One measurement a frame**, on scrolling of the container and the page, on
+* resizing of the list and the container, on a change of what the collection
+* draws, and when the first drawn item enters the document while none was in
+* it: the markup may draw the entries later than the window has them — the
+* Select panel builds its options from data on its first opening, and `drawn`
+* does not change then. The band is the intersection of the container's
+* window with the browser's, from the top of the list. The top of the list is
+* the top of a drawn item minus its place times the step: the list may have no
+* markup of its own at all (the header and footer of ListBox, the table
+* body), and the items stand from its top a step apart. The step is the
+* smallest distance between the tops of neighboring drawn items: no item is
+* shorter than the step, the theme holds its height. With one item drawn — the
+* previous step, and on the first measurement its height; no items in the
+* document — no measurement. No box at the drawn item (the list is hidden) —
+* no measurement either: from zero boxes the top of the list would slide to
+* the start, and while the list is hidden the window would follow it frame
+* after frame; this way it stays where it stood.
+*
+* **A tall item.** Items in the window share one height: an item taller than
+* the step shifts the fillers, and scrolling drifts. The plugin finds such an
+* item while measuring and warns in the console — once per mount.
+*
+* **Focus.** The item DOM focus came into is pinned in the window: scrolling
+* does not take it out of the document while focus is in it. Focus moved to a
+* node outside the component — no pin.
+*/
+var TVirtualPlugin = class extends TBasePlugin {
+	_root = null;
+	_draw = null;
+	_elements = null;
+	/** Родитель нарисованных элементов: за его размером плагин следит. */
+	_list = null;
+	/** Контейнер прокрутки; `null` — прокручивает страница. */
+	_container = null;
+	_resize = null;
+	/** За чьим размером наблюдатель следит сейчас: список и контейнер. */
+	_observed = /* @__PURE__ */ new Set();
+	/**
+	* Размер сменился — контейнер искать заново при замере. Не в колбэке
+	* наблюдателя: новый узел под наблюдением дал бы в том же кадре ещё одно
+	* уведомление, и браузер сообщил бы о петле.
+	*/
+	_containerStale = false;
+	_frame = null;
+	/** Stops waiting for the first drawn node (`_awaitDrawn`); `null` — not waiting. */
+	_waiting = null;
+	_listening = false;
+	/** Последний шаг элементов: пока замерить нечем, полосу меряют им. */
+	_step = 0;
+	/** О высоком элементе уже предупредили. */
+	_warned = false;
+	install(ctx) {
+		super.install(ctx);
+		this._elements = ctx.get(TCollectionElements) ?? null;
+		this._draw = drawOf(ctx.get(TCollectionBundlesPlugin)?.engine) ?? null;
+		const element = ctx.get(TElementPlugin);
+		element?.events.on("ready", (node) => this._bind(node));
+		element?.events.on("removed", () => this._bind(null));
+		this._listenTo(this._draw?.events, "change:virtual", this._sync);
+		this._listenTo(this._draw?.events, "change:drawn", this._onSchedule);
+	}
+	destroy() {
+		this._bind(null);
+		this._resize?.disconnect();
+		this._resize = null;
+		this._observed.clear();
+		this._draw = null;
+		this._elements = null;
+		super.destroy();
+	}
+	_bind(root) {
+		this._stop();
+		this._root = root;
+		this._sync();
+	}
+	/** Слушать документ — пока у компонента есть корень и стоит окно. */
+	_sync = () => {
+		const on = Boolean(this._root && this._draw?.virtual);
+		if (on && !this._listening) this._start();
+		else if (!on && this._listening) this._stop();
+	};
+	_start() {
+		const root = this._root;
+		if (!root) return;
+		this._listening = true;
+		this._resize ??= new ResizeObserver(this._onResize);
+		const first = this._firstDrawn();
+		this._watchList(first?.node ?? null, true);
+		if (!first) this._awaitDrawn();
+		const target = root;
+		target.addEventListener("focusin", this._onFocusIn);
+		target.addEventListener("focusout", this._onFocusOut);
+		root.ownerDocument.defaultView?.addEventListener("scroll", this._onSchedule, { passive: true });
+		this._schedule();
+	}
+	_stop() {
+		const root = this._root;
+		this._cancel();
+		this._waiting?.();
+		this._waiting = null;
+		if (!this._listening) return;
+		this._listening = false;
+		this._watchList(null, true);
+		this._draw?.pin(FOCUS, void 0);
+		if (!root) return;
+		const target = root;
+		target.removeEventListener("focusin", this._onFocusIn);
+		target.removeEventListener("focusout", this._onFocusOut);
+		root.ownerDocument.defaultView?.removeEventListener("scroll", this._onSchedule);
+	}
+	/**
+	* Узнать список по нарисованному элементу: за размером его родителя
+	* следить, а контейнер искать заново, если сменился родитель или просят.
+	*/
+	_watchList(node, findContainer) {
+		const list = node?.parentElement ?? null;
+		if (list !== this._list) {
+			this._list = list;
+			this._observe();
+			findContainer = true;
+		}
+		if (findContainer) this._watchContainer(node ? scrollParentOf(node, "y") : null);
+	}
+	/** Сменить контейнер прокрутки: прокрутку и размер слушать у нового. */
+	_watchContainer(container) {
+		if (this._container === container) return;
+		this._container?.removeEventListener("scroll", this._onSchedule);
+		this._container = container;
+		container?.addEventListener("scroll", this._onSchedule, { passive: true });
+		this._observe();
+	}
+	/**
+	* Следить за размером списка и контейнера — пока слушаем документ. Узел,
+	* за которым уже следят, повторно не ставится: наблюдатель сообщил бы его
+	* размер заново.
+	*/
+	_observe() {
+		const resize = this._resize;
+		if (!resize) return;
+		const next = /* @__PURE__ */ new Set();
+		if (this._listening) {
+			for (const node of [this._list, this._container]) if (node) next.add(node);
+		}
+		for (const node of this._observed) if (!next.has(node)) resize.unobserve(node);
+		for (const node of next) if (!this._observed.has(node)) resize.observe(node);
+		this._observed = next;
+	}
+	/** Размер списка или контейнера сменился — может смениться и сам контейнер. */
+	_onResize = () => {
+		this._containerStale = true;
+		this._schedule();
+	};
+	_onSchedule = () => this._schedule();
+	/** Проход — раз в кадр: подряд идущие поводы схлопываются в один замер. */
+	_schedule() {
+		if (this._frame !== null || !this._listening) return;
+		this._frame = requestAnimationFrame(() => {
+			this._frame = null;
+			this._measure();
+		});
+	}
+	_cancel() {
+		if (this._frame === null) return;
+		cancelAnimationFrame(this._frame);
+		this._frame = null;
+	}
+	_measure() {
+		const draw = this._draw;
+		const band = this._band();
+		if (!draw || !band) return;
+		const first = this._firstDrawn();
+		this._watchList(first?.node ?? null, this._containerStale);
+		this._containerStale = false;
+		if (!first) {
+			this._awaitDrawn();
+			return;
+		}
+		if (!hasBox(first.node)) return;
+		const step = this._measureStep();
+		if (step > 0) this._step = step;
+		const top = first.node.getBoundingClientRect().top - first.place * this._step;
+		draw.notifyViewport({
+			top: band.top - top,
+			bottom: band.bottom - top,
+			step: this._step
+		});
+	}
+	/**
+	* Wait for the first drawn item to enter the document — its bundle
+	* registered and its node bound, in either order
+	* (`TCollectionElements.waitFor`), — and measure a frame later. The markup
+	* may draw the window's entries later than the window has them: the panel of
+	* a Select builds its options from data on its first opening, and `drawn`
+	* does not change then. Without a node there is no list to watch the size
+	* of, and nothing would schedule the measurement.
+	*/
+	_awaitDrawn() {
+		if (this._waiting || !this._elements) return;
+		this._waiting = this._elements.waitFor(() => {
+			if (!this._firstDrawn()) return false;
+			this._waiting = null;
+			this._schedule();
+			return true;
+		});
+	}
+	/** Первый нарисованный элемент, у которого есть узел в документе. */
+	_firstDrawn() {
+		for (const entry of this._draw?.drawn ?? []) {
+			if (entry.kind !== "item") continue;
+			const node = this._elements?.getElementByItem(entry.item);
+			if (node) return {
+				place: entry.place,
+				node
+			};
+		}
+		return null;
+	}
+	/** Видимая полоса: окно контейнера в окне браузера, без контейнера — окно браузера. */
+	_band() {
+		const view = this._root?.ownerDocument.defaultView;
+		if (!view) return null;
+		const page = {
+			top: 0,
+			bottom: view.innerHeight
+		};
+		const container = this._container;
+		if (!container) return page;
+		const top = container.getBoundingClientRect().top + container.clientTop;
+		return {
+			top: Math.max(top, page.top),
+			bottom: Math.min(top + container.clientHeight, page.bottom)
+		};
+	}
+	/**
+	* Шаг элементов — наименьшее расстояние между верхами соседних
+	* нарисованных элементов. Нарисован один — шаг прежний, а без прежнего —
+	* его высота; элементов нет — ноль. Элемент выше шага — предупреждение.
+	*/
+	_measureStep() {
+		const tops = [];
+		let height = 0;
+		for (const entry of this._draw?.drawn ?? []) {
+			const rect = (entry.kind === "item" ? this._elements?.getElementByItem(entry.item) : null)?.getBoundingClientRect();
+			tops.push(rect ? rect.top : null);
+			height = rect ? rect.height : height;
+		}
+		const gaps = [];
+		for (let index = 1; index < tops.length; index++) {
+			const [above, below] = [tops[index - 1], tops[index]];
+			if (above !== null && below !== null && below > above) gaps.push(below - above);
+		}
+		if (gaps.length === 0) return tops.filter((top) => top !== null).length === 1 && this._step === 0 ? height : 0;
+		const step = Math.min(...gaps);
+		if (!this._warned && gaps.some((gap) => gap > step + .5)) {
+			this._warned = true;
+			console.warn("[soxa] Virtual: элемент выше остальных — в окне высота элементов должна быть одной на все, иначе прокрутка поедет. Держите содержимое элемента в одну строку.");
+		}
+		return step;
+	}
+	/** Нарисованный элемент, в узле которого лежит узел. */
+	_itemOf(node) {
+		if (!(node instanceof Node)) return void 0;
+		for (const entry of this._draw?.drawn ?? []) {
+			if (entry.kind !== "item") continue;
+			if (this._elements?.getElementByItem(entry.item)?.contains(node)) return entry.item;
+		}
+	}
+	_onFocusIn = (event) => {
+		this._draw?.pin(FOCUS, this._itemOf(event.target));
+	};
+	/** Фокус ушёл на узел вне компонента — закрепления нет. Ушёл из окна браузера — осталось. */
+	_onFocusOut = (event) => {
+		const next = event.relatedTarget;
+		if (next instanceof Node && !this._root?.contains(next)) this._draw?.pin(FOCUS, void 0);
+	};
+};
+//#endregion
+export { TVirtualPlugin };

package/dist/index.d.ts

@@ -0,0 +1,7 @@
+export * from './base';
+export * from './custom';
+export { useMotion } from './motion';
+export type { TMotionMode } from './motion';
+export * from './locale';
+export { toCssValue } from './utils';
+export type { TPoint } from './utils';

package/dist/index.js

@@ -0,0 +1,149 @@
+import { TBasePlugin } from "./base/base.class.js";
+import { extendLocale, formatName } from "./locale/locale.js";
+import { enUS } from "./locale/locales/en.js";
+import { TLocaleSource } from "./locale/source.class.js";
+import { TPluginBundle } from "./base/bundle.class.js";
+import { TIdPlugin } from "./custom/id/id.plugin.js";
+import { TAccordionItemIdsPlugin } from "./custom/accordion/item-ids/item-ids.plugin.js";
+import { TCollectionBundlesPlugin } from "./custom/collection/bundles.plugin.js";
+import { TCollectionBundlesAccess } from "./custom/collection/collection-bundles-access.plugin.js";
+import { TElementPlugin } from "./custom/element/element.plugin.js";
+import { TCollectionElements } from "./custom/collection/collection-elements.plugin.js";
+import { firstHeaderOf, headerIn } from "./custom/accordion/header.js";
+import { toCssValue } from "./utils/toCssValue.js";
+import { TActionPlugin } from "./custom/action/action.plugin.js";
+import { TCalendarIdsPlugin } from "./custom/calendar/ids/ids.plugin.js";
+import { listOf, rowIn } from "./custom/list/row.js";
+import { TCalendarKeyboardPlugin } from "./custom/calendar/keyboard/keyboard.plugin.js";
+import { TCalendarPointerPlugin } from "./custom/calendar/pointer/pointer.plugin.js";
+import { TNamesPlugin } from "./locale/names.plugin.js";
+import { TCalendarNamesPlugin } from "./custom/calendar/names/names.plugin.js";
+import { gridStopOf } from "./custom/calendar/stop.js";
+import { TClearableNamesPlugin } from "./custom/clearable/names/names.plugin.js";
+import { TAriaPlugin } from "./custom/component-view/aria.plugin.js";
+import { firstSegmentOf } from "./custom/date-input/parts.js";
+import { TDateInputClipboardPlugin } from "./custom/date-input/clipboard/clipboard.plugin.js";
+import { TDateInputIdsPlugin } from "./custom/date-input/ids/ids.plugin.js";
+import { TDateInputKeyboardPlugin } from "./custom/date-input/keyboard/keyboard.plugin.js";
+import { TDateInputPointerPlugin } from "./custom/date-input/pointer/pointer.plugin.js";
+import { TDateInputTouchPlugin } from "./custom/date-input/touch/touch.plugin.js";
+import { TDismissPlugin } from "./custom/dismiss/dismiss.plugin.js";
+import { TOverlayFocusPlugin } from "./custom/overlay/focus/focus.plugin.js";
+import { fieldSegmentOf } from "./custom/date-picker/field.js";
+import { TDatePickerFocusPlugin } from "./custom/date-picker/focus/focus.plugin.js";
+import { TDatePickerIdsPlugin } from "./custom/date-picker/ids/ids.plugin.js";
+import { TDatePickerTriggerPlugin } from "./custom/date-picker/trigger/trigger.plugin.js";
+import { TDatePickerNamesPlugin } from "./custom/date-picker/names/names.plugin.js";
+import { TModalLayoutPlugin } from "./custom/overlay/modal-layout/modal-layout.plugin.js";
+import { TDialogOffsetEvent } from "./custom/dialog/layout/offset-event.js";
+import { TDialogLayoutPlugin } from "./custom/dialog/layout/layout.plugin.js";
+import { TModalIdsPlugin } from "./custom/overlay/modal-ids/modal-ids.plugin.js";
+import { TDialogIdsPlugin } from "./custom/dialog/ids/ids.plugin.js";
+import { TModalNamesPlugin } from "./custom/overlay/modal-names/modal-names.plugin.js";
+import { TDialogNamesPlugin } from "./custom/dialog/names/names.plugin.js";
+import { TDragPlugin } from "./custom/drag-and-drop/drag.plugin.js";
+import { TDrawerLayoutPlugin } from "./custom/drawer/layout/layout.plugin.js";
+import { TFieldIdsPlugin } from "./custom/field/ids/ids.plugin.js";
+import { TFrameLayoutPlugin } from "./custom/frame/layout/layout.plugin.js";
+import { ANCHOR_PLACEMENT_ATTRIBUTE, TAnchorPlugin } from "./custom/frame/anchor/anchor.plugin.js";
+import { TIconLayoutPlugin } from "./custom/icon/layout.plugin.js";
+import { fieldOf } from "./custom/input/field.js";
+import { TInputPlugin } from "./custom/input/input.plugin.js";
+import { TInputBoolPlugin } from "./custom/input-bool/input-bool.plugin.js";
+import { TInputControlPlugin } from "./custom/input-control/input-control.plugin.js";
+import { TItemGroupIdsPlugin } from "./custom/item-group/ids/ids.plugin.js";
+import { TLabelNestedWarnPlugin } from "./custom/label/nested-warn/nested-warn.plugin.js";
+import { TListItemPlugin } from "./custom/list/item/item.plugin.js";
+import { TListNavigationPlugin } from "./custom/list/navigation/navigation.plugin.js";
+import { TListHeightPlugin } from "./custom/list/height/height.plugin.js";
+import { TListKeyboardPlugin } from "./custom/list/keyboard/keyboard.plugin.js";
+import { useMotion } from "./motion/motion.js";
+import { TListScrollPlugin } from "./custom/list/scroll/scroll.plugin.js";
+import { TOptionIdsPlugin } from "./custom/list/option-ids/option-ids.plugin.js";
+import { TMenuNavigationPlugin } from "./custom/menu/navigation/navigation.plugin.js";
+import { TMenuKeyboardPlugin } from "./custom/menu/keyboard/keyboard.plugin.js";
+import { TMenuPointerPlugin } from "./custom/menu/pointer/pointer.plugin.js";
+import { TMenuSubmenuKeyboardPlugin } from "./custom/menu/submenu-keyboard/keyboard.plugin.js";
+import { TPopoverFocusPlugin } from "./custom/popover/focus/focus.plugin.js";
+import { TMenuPopoverItemFocusPlugin } from "./custom/menu/popover-item-focus/focus.plugin.js";
+import { TMenuHoverPlugin } from "./custom/menu/hover/hover.plugin.js";
+import { TMenuSubmenuFocusPlugin } from "./custom/menu/submenu-focus/focus.plugin.js";
+import { TMenuFocusPlugin } from "./custom/menu/focus/focus.plugin.js";
+import { TMenuIdsPlugin } from "./custom/menu/ids/ids.plugin.js";
+import { TMenuPopupIdsPlugin } from "./custom/menu/popup-ids/ids.plugin.js";
+import { TMenuPopoverItemKeyboardPlugin } from "./custom/menu/popover-item-keyboard/keyboard.plugin.js";
+import { TNumberInputKeyboardPlugin } from "./custom/number-input/keyboard/keyboard.plugin.js";
+import { TNumberInputNamesPlugin } from "./custom/number-input/names/names.plugin.js";
+import { TNumberInputStepperPlugin } from "./custom/number-input/stepper/stepper.plugin.js";
+import { TNumberInputTouchPlugin } from "./custom/number-input/touch/touch.plugin.js";
+import { TNumberInputTypingPlugin } from "./custom/number-input/typing/typing.plugin.js";
+import { THideOutsidePlugin } from "./custom/overlay/hide-outside/hide-outside.plugin.js";
+import { TModalFocusPlugin } from "./custom/overlay/modal-focus/modal-focus.plugin.js";
+import { TScrollLockPlugin } from "./custom/overlay/scroll-lock/scroll-lock.plugin.js";
+import { TSwipePlugin } from "./custom/overlay/swipe/swipe.plugin.js";
+import { currentPageOf } from "./custom/pagination/current.js";
+import { TPaginationFocusPlugin } from "./custom/pagination/focus/focus.plugin.js";
+import { TPaginationNamesPlugin } from "./custom/pagination/names/names.plugin.js";
+import { TPopoverPointerPlugin } from "./custom/popover/pointer/pointer.plugin.js";
+import { TPopoverIdsPlugin } from "./custom/popover/ids/ids.plugin.js";
+import { TPopoverNamesPlugin } from "./custom/popover/names/names.plugin.js";
+import { TRadioGroupNamePlugin } from "./custom/radio-group/name/name.plugin.js";
+import { TRadioGroupCheckedPlugin } from "./custom/radio-group/checked/checked.plugin.js";
+import { radioStopOf } from "./custom/radio-group/stop.js";
+import { arrowStep, fractionAt, lengthAlong, slideDirection } from "./custom/slide/direction.js";
+import { TRatingHoverPlugin } from "./custom/rating/hover/hover.plugin.js";
+import { TRatingNamesPlugin } from "./custom/rating/names/names.plugin.js";
+import { TRatingValidityPlugin } from "./custom/rating/validity/validity.plugin.js";
+import { TReadyPlugin } from "./custom/ready/ready.plugin.js";
+import { resolveEdges } from "./custom/scroller/viewport/edges.js";
+import { resolveFocusShift } from "./custom/scroller/viewport/focus.js";
+import { viewportStopOf } from "./custom/scroller/viewport/stop.js";
+import { TScrollerViewportPlugin } from "./custom/scroller/viewport/viewport.plugin.js";
+import { TScrollerNamesPlugin } from "./custom/scroller/names/names.plugin.js";
+import { TSelectKeyboardPlugin } from "./custom/select/keyboard/keyboard.plugin.js";
+import { TEditablePlugin } from "./custom/select/editable/editable.plugin.js";
+import { TSelectPointerPlugin } from "./custom/select/pointer/pointer.plugin.js";
+import { TSelectBackspacePlugin } from "./custom/select/backspace/backspace.plugin.js";
+import { TSelectIdsPlugin } from "./custom/select/ids/ids.plugin.js";
+import { TSkeletonLayoutPlugin } from "./custom/skeleton/layout.plugin.js";
+import { TSlidePointerPlugin } from "./custom/slide/pointer/pointer.plugin.js";
+import { TSlideKeyboardPlugin } from "./custom/slide/keyboard/keyboard.plugin.js";
+import { TTableRowIdsPlugin } from "./custom/table/row-ids/row-ids.plugin.js";
+import { TTableColumnIdsPlugin } from "./custom/table/column-ids/column-ids.plugin.js";
+import { TTableColumnResizePlugin } from "./custom/table/column-resize/column-resize.plugin.js";
+import { TTableNamesPlugin } from "./custom/table/names/names.plugin.js";
+import { TTableColumnNamesPlugin } from "./custom/table/column-names/column-names.plugin.js";
+import { TTableColumnReorderPlugin } from "./custom/table/column-reorder/column-reorder.plugin.js";
+import { TTableGridPlugin } from "./custom/table/grid/grid.plugin.js";
+import { TTableLayoutPlugin } from "./custom/table/layout/layout.plugin.js";
+import { TTabsLayoutPlugin } from "./custom/tabs/layout/layout.plugin.js";
+import { TTabsActiveTabPlugin } from "./custom/tabs/active-tab/active-tab.plugin.js";
+import { TTabsContentWarnPlugin } from "./custom/tabs/content-warn/content-warn.plugin.js";
+import { TTabsItemIdsPlugin } from "./custom/tabs/item-ids/item-ids.plugin.js";
+import { tabIn, tabStopOf } from "./custom/tabs/tab.js";
+import { TTabsKeyboardPlugin } from "./custom/tabs/keyboard/keyboard.plugin.js";
+import { TTabsItemNamesPlugin } from "./custom/tabs/item-names/item-names.plugin.js";
+import { tagStopIn, tagStopOf } from "./custom/tags/tag.js";
+import { TTagsKeyboardPlugin } from "./custom/tags/keyboard/keyboard.plugin.js";
+import { TTagsScrollPlugin } from "./custom/tags/scroll/scroll.plugin.js";
+import { TTagsItemNamesPlugin } from "./custom/tags/item-names/item-names.plugin.js";
+import { TTextareaAutoresizePlugin } from "./custom/textarea/autoresize/autoresize.plugin.js";
+import { TTextareaIdsPlugin } from "./custom/textarea/ids/ids.plugin.js";
+import { TTextareaNamesPlugin } from "./custom/textarea/names/names.plugin.js";
+import { TToastsTimerPlugin } from "./custom/toasts/timer/timer.plugin.js";
+import { TToastsRemovalPlugin } from "./custom/toasts/removal/removal.plugin.js";
+import { TToastsKeyboardPlugin } from "./custom/toasts/keyboard/keyboard.plugin.js";
+import { TToastsCascadePlugin } from "./custom/toasts/cascade/cascade.plugin.js";
+import { TToastsLayoutPlugin } from "./custom/toasts/layout/layout.plugin.js";
+import { TToastsNamesPlugin } from "./custom/toasts/names/names.plugin.js";
+import { TToastsItemNamesPlugin } from "./custom/toasts/item-names/item-names.plugin.js";
+import { TTooltipTriggerPlugin } from "./custom/tooltip/trigger/trigger.plugin.js";
+import { TTooltipIdsPlugin } from "./custom/tooltip/ids/ids.plugin.js";
+import { TVirtualPlugin } from "./custom/virtual/virtual.plugin.js";
+import { TLocalePlugin } from "./locale/locale.plugin.js";
+import { ruRU } from "./locale/locales/ru.js";
+import { zhCN } from "./locale/locales/zh.js";
+import { frFR } from "./locale/locales/fr.js";
+import { esES } from "./locale/locales/es.js";
+import { arEG } from "./locale/locales/ar.js";
+export { ANCHOR_PLACEMENT_ATTRIBUTE, TAccordionItemIdsPlugin, TActionPlugin, TAnchorPlugin, TAriaPlugin, TBasePlugin, TCalendarIdsPlugin, TCalendarKeyboardPlugin, TCalendarNamesPlugin, TCalendarPointerPlugin, TClearableNamesPlugin, TCollectionBundlesAccess, TCollectionBundlesPlugin, TCollectionElements, TDateInputClipboardPlugin, TDateInputIdsPlugin, TDateInputKeyboardPlugin, TDateInputPointerPlugin, TDateInputTouchPlugin, TDatePickerFocusPlugin, TDatePickerIdsPlugin, TDatePickerNamesPlugin, TDatePickerTriggerPlugin, TDialogIdsPlugin, TDialogLayoutPlugin, TDialogNamesPlugin, TDialogOffsetEvent, TDismissPlugin, TDragPlugin, TDrawerLayoutPlugin, TEditablePlugin, TElementPlugin, TFieldIdsPlugin, TFrameLayoutPlugin, THideOutsidePlugin, TIconLayoutPlugin, TIdPlugin, TInputBoolPlugin, TInputControlPlugin, TInputPlugin, TItemGroupIdsPlugin, TLabelNestedWarnPlugin, TListHeightPlugin, TListItemPlugin, TListKeyboardPlugin, TListNavigationPlugin, TListScrollPlugin, TLocalePlugin, TLocaleSource, TMenuFocusPlugin, TMenuHoverPlugin, TMenuIdsPlugin, TMenuKeyboardPlugin, TMenuNavigationPlugin, TMenuPointerPlugin, TMenuPopoverItemFocusPlugin, TMenuPopoverItemKeyboardPlugin, TMenuPopupIdsPlugin, TMenuSubmenuFocusPlugin, TMenuSubmenuKeyboardPlugin, TModalFocusPlugin, TModalIdsPlugin, TModalLayoutPlugin, TModalNamesPlugin, TNamesPlugin, TNumberInputKeyboardPlugin, TNumberInputNamesPlugin, TNumberInputStepperPlugin, TNumberInputTouchPlugin, TNumberInputTypingPlugin, TOptionIdsPlugin, TOverlayFocusPlugin, TPaginationFocusPlugin, TPaginationNamesPlugin, TPluginBundle, TPopoverFocusPlugin, TPopoverIdsPlugin, TPopoverNamesPlugin, TPopoverPointerPlugin, TRadioGroupCheckedPlugin, TRadioGroupNamePlugin, TRatingHoverPlugin, TRatingNamesPlugin, TRatingValidityPlugin, TReadyPlugin, TScrollLockPlugin, TScrollerNamesPlugin, TScrollerViewportPlugin, TSelectBackspacePlugin, TSelectIdsPlugin, TSelectKeyboardPlugin, TSelectPointerPlugin, TSkeletonLayoutPlugin, TSlideKeyboardPlugin, TSlidePointerPlugin, TSwipePlugin, TTableColumnIdsPlugin, TTableColumnNamesPlugin, TTableColumnReorderPlugin, TTableColumnResizePlugin, TTableGridPlugin, TTableLayoutPlugin, TTableNamesPlugin, TTableRowIdsPlugin, TTabsActiveTabPlugin, TTabsContentWarnPlugin, TTabsItemIdsPlugin, TTabsItemNamesPlugin, TTabsKeyboardPlugin, TTabsLayoutPlugin, TTagsItemNamesPlugin, TTagsKeyboardPlugin, TTagsScrollPlugin, TTextareaAutoresizePlugin, TTextareaIdsPlugin, TTextareaNamesPlugin, TToastsCascadePlugin, TToastsItemNamesPlugin, TToastsKeyboardPlugin, TToastsLayoutPlugin, TToastsNamesPlugin, TToastsRemovalPlugin, TToastsTimerPlugin, TTooltipIdsPlugin, TTooltipTriggerPlugin, TVirtualPlugin, arEG, arrowStep, currentPageOf, enUS, esES, extendLocale, fieldOf, fieldSegmentOf, firstHeaderOf, firstSegmentOf, formatName, frFR, fractionAt, gridStopOf, headerIn, lengthAlong, listOf, radioStopOf, resolveEdges, resolveFocusShift, rowIn, ruRU, slideDirection, tabIn, tabStopOf, tagStopIn, tagStopOf, toCssValue, useMotion, viewportStopOf, zhCN };

package/dist/locale/index.d.ts

@@ -0,0 +1,6 @@
+export { extendLocale, formatName } from './locale';
+export { TLocaleSource } from './source.class';
+export { TLocalePlugin } from './locale.plugin';
+export { TNamesPlugin } from './names.plugin';
+export { enUS, ruRU, zhCN, frFR, esES, arEG } from './locales';
+export type { ILocaleOwner, ILocaleSource, TLocale, TLocalePatch, TLocaleSourceEvents, TPartialTranslations, TTranslations, } from './types';

package/dist/locale/locale.d.ts

@@ -0,0 +1,38 @@
+import type { TLocale, TLocalePatch } from './types';
+/**
+ * Строка с именем части: шаблон из локали, на месте `{name}` — имя.
+ *
+ * ```ts
+ * formatName('Закрыть {name}', 'Настройки') // 'Закрыть Настройки'
+ * formatName('Закрыть {name}', '')          // 'Закрыть'
+ * ```
+ *
+ * Имя приходит без пробелов по краям. Пустое имя — у части имени нет, и
+ * строка остаётся без него: пробел, который стоял при имени, не повисает ни
+ * по краям, ни двойным в середине.
+ */
+export declare function formatName(template: string, name: string): string;
+/**
+ * Локаль поверх готовой: свой тег, свои строки, остальное — от `base`.
+ *
+ * ```ts
+ * const esMX = extendLocale(esES, { tag: 'es-MX' })
+ * const mn = extendLocale(enUS, {
+ * 	tag: 'mn-MN',
+ * 	translations: { modal: { close: 'Хаах' } },
+ * })
+ * ```
+ *
+ * Так делают регион готового языка, свою формулировку строки и язык, который
+ * переведён не целиком: чего в правке нет, остаётся от `base`; ключ со
+ * значением `undefined` строку не задаёт. Результат заморожен, как и готовые
+ * локали: объект один на всё поддерево, и правка на месте молча
+ * переименовала бы кнопки у всех компонентов, не сообщив ни одному.
+ */
+export declare function extendLocale(base: TLocale, patch: TLocalePatch): TLocale;
+/**
+ * Готовая локаль пакета — замороженной вместе с разделами, как результат
+ * `extendLocale`. Наружу не выходит: свою полную локаль приложение пишет
+ * обычным объектом.
+ */
+export declare function freezeLocale(locale: TLocale): TLocale;

package/dist/locale/locale.js

@@ -0,0 +1,93 @@
+//#region src/locale/locale.ts
+/** Место для имени части в строке-шаблоне. */
+var NAME = "{name}";
+/**
+* Строка с именем части: шаблон из локали, на месте `{name}` — имя.
+*
+* ```ts
+* formatName('Закрыть {name}', 'Настройки') // 'Закрыть Настройки'
+* formatName('Закрыть {name}', '')          // 'Закрыть'
+* ```
+*
+* Имя приходит без пробелов по краям. Пустое имя — у части имени нет, и
+* строка остаётся без него: пробел, который стоял при имени, не повисает ни
+* по краям, ни двойным в середине.
+*/
+function formatName(template, name) {
+	return template.split(NAME).join(name.trim()).replace(/ {2,}/g, " ").trim();
+}
+/**
+* Локаль поверх готовой: свой тег, свои строки, остальное — от `base`.
+*
+* ```ts
+* const esMX = extendLocale(esES, { tag: 'es-MX' })
+* const mn = extendLocale(enUS, {
+* 	tag: 'mn-MN',
+* 	translations: { modal: { close: 'Хаах' } },
+* })
+* ```
+*
+* Так делают регион готового языка, свою формулировку строки и язык, который
+* переведён не целиком: чего в правке нет, остаётся от `base`; ключ со
+* значением `undefined` строку не задаёт. Результат заморожен, как и готовые
+* локали: объект один на всё поддерево, и правка на месте молча
+* переименовала бы кнопки у всех компонентов, не сообщив ни одному.
+*/
+function extendLocale(base, patch) {
+	return Object.freeze({
+		tag: patch.tag ?? base.tag,
+		translations: overlay(base.translations, patch.translations ?? {})
+	});
+}
+/**
+* Готовая локаль пакета — замороженной вместе с разделами, как результат
+* `extendLocale`. Наружу не выходит: свою полную локаль приложение пишет
+* обычным объектом.
+*/
+function freezeLocale(locale) {
+	return extendLocale(locale, {});
+}
+/**
+* Строки правки поверх строк `base`. Разделы перечислены поимённо: новый
+* раздел без строки здесь — ошибка компиляции, а не молча строки `base`.
+*/
+function overlay(base, patch) {
+	return Object.freeze({
+		modal: section(base, patch, "modal"),
+		dialog: section(base, patch, "dialog"),
+		popover: section(base, patch, "popover"),
+		tabs: section(base, patch, "tabs"),
+		tags: section(base, patch, "tags"),
+		toasts: section(base, patch, "toasts"),
+		scroller: section(base, patch, "scroller"),
+		pagination: section(base, patch, "pagination"),
+		field: section(base, patch, "field"),
+		numberInput: section(base, patch, "numberInput"),
+		table: section(base, patch, "table"),
+		calendar: section(base, patch, "calendar"),
+		datePicker: section(base, patch, "datePicker"),
+		rating: section(base, patch, "rating"),
+		textarea: section(base, patch, "textarea")
+	});
+}
+/** Раздел `key`: строки `base`, поверх — заданные строки того же раздела правки. */
+function section(base, patch, key) {
+	const result = {
+		...base[key],
+		...defined(patch[key])
+	};
+	Object.freeze(result);
+	return result;
+}
+/** Строки раздела без ключей со значением `undefined`: такой ключ строку не задаёт. */
+function defined(part) {
+	const result = {};
+	if (part === void 0) return result;
+	for (const key in part) {
+		const value = part[key];
+		if (value !== void 0) result[key] = value;
+	}
+	return result;
+}
+//#endregion
+export { extendLocale, formatName, freezeLocale };

package/dist/locale/locale.plugin.d.ts

@@ -0,0 +1,26 @@
+import { TBasePlugin } from '../base';
+import type { IPluginContext } from '../base';
+import type { ILocaleOwner } from './types';
+/**
+ * TLocalePlugin — язык монтирования компоненту: тег локали в `locale`.
+ *
+ * Пишет владельцу тег локали поддерева (`ctx.locale`) при установке,
+ * синхронно, — поэтому подписи дат на языке приложения есть уже в первой
+ * отрисовке, и в серверной тоже. Смену локали пишет на лету: компонент не
+ * перемонтируется. Подписка на источник живёт, пока жив набор, — её снимает
+ * `destroy()` базы.
+ *
+ * Язык — не строка разметки, а вход модели: календарь считает им сетку и
+ * первый день недели, поле даты — порядок частей, таблица — сравнение строк,
+ * пагинация — цифры номеров страниц. Поэтому он свойство ядра (без setup его
+ * задаёт код), а пишет его плагин: язык знает место компонента в дереве, а не
+ * экземпляр. Своего языка у компонента в разметке нет: плагин переписывает и
+ * `locale` внешнего `ctrl`.
+ *
+ * Владельца плагин знает по контракту (`ILocaleOwner`), а не по классу:
+ * календарь, поле даты, DatePicker, таблица и пагинация общего предка не
+ * имеют.
+ */
+export declare class TLocalePlugin extends TBasePlugin<ILocaleOwner> {
+    install(ctx: IPluginContext, options?: unknown): void;
+}