@ryuzaki13/react-foundation-ui 1.8.11 → 1.8.12

package/storybook-static/assets/README-ui-uanyg.js

@@ -0,0 +1,672 @@
+import{n as e}from"./rolldown-runtime-DkW27tQK.js";import{n as t}from"./iframe-FSp_AjJa.js";import{i as n,r}from"./react-Bl2r1tuC.js";import{l as i,m as a}from"./blocks-B5YBxaaS.js";function o(e){let t={a:`a`,blockquote:`blockquote`,code:`code`,h1:`h1`,h2:`h2`,h3:`h3`,li:`li`,ol:`ol`,p:`p`,pre:`pre`,table:`table`,tbody:`tbody`,td:`td`,th:`th`,thead:`thead`,tr:`tr`,ul:`ul`,...n(),...e.components};return(0,c.jsxs)(c.Fragment,{children:[(0,c.jsx)(i,{title:`Foundation Lib/API/Hooks`}),`
+`,(0,c.jsx)(t.h1,{id:`react-и-browser-hooks`,children:`React и browser hooks`}),`
+`,(0,c.jsxs)(t.p,{children:[`Модуль `,(0,c.jsx)(t.code,{children:`@ryuzaki13/react-foundation-lib/hooks`}),` содержит общие React hooks для задач, которые повторяются в разных приложениях:`]}),`
+`,(0,c.jsxs)(t.ul,{children:[`
+`,(0,c.jsx)(t.li,{children:`задержка часто меняющегося значения;`}),`
+`,(0,c.jsx)(t.li,{children:`debounce и throttle callback-функций;`}),`
+`,(0,c.jsx)(t.li,{children:`настройка сенсоров sortable drag-and-drop;`}),`
+`,(0,c.jsx)(t.li,{children:`управление floating listbox и клавиатурной навигацией;`}),`
+`,(0,c.jsx)(t.li,{children:`чтение и изменение search-параметров TanStack Router;`}),`
+`,(0,c.jsx)(t.li,{children:`построение ссылки на текущий route с другими search-параметрами;`}),`
+`,(0,c.jsx)(t.li,{children:`создание лениво загружаемого React-компонента;`}),`
+`,(0,c.jsx)(t.li,{children:`диагностика изменения ссылок между render;`}),`
+`,(0,c.jsxs)(t.li,{children:[`блокировка browser zoom через `,(0,c.jsx)(t.code,{children:`Ctrl + wheel`}),`.`]}),`
+`]}),`
+`,(0,c.jsx)(t.p,{children:`Документ рассчитан на разработчиков с небольшой базой JavaScript, TypeScript и React. Здесь объясняются не только сигнатуры, но и lifecycle, ограничения и типичные ошибки.`}),`
+`,(0,c.jsxs)(t.blockquote,{children:[`
+`,(0,c.jsx)(t.p,{children:`Все функции этого entrypoint являются React hooks. Их нельзя вызывать как обычные utilities, внутри условий, циклов, event handlers или вложенных функций.`}),`
+`]}),`
+`,(0,c.jsx)(t.h2,{id:`граница-ответственности`,children:`Граница ответственности`}),`
+`,(0,c.jsx)(t.p,{children:`Модуль предоставляет низкоуровневое поведение. Он не создаёт готовые кнопки, select, popup, router или drag-and-drop интерфейс.`}),`
+`,(0,c.jsxs)(t.table,{children:[(0,c.jsx)(t.thead,{children:(0,c.jsxs)(t.tr,{children:[(0,c.jsx)(t.th,{children:`Задача`}),(0,c.jsx)(t.th,{children:`Ответственность`})]})}),(0,c.jsxs)(t.tbody,{children:[(0,c.jsxs)(t.tr,{children:[(0,c.jsx)(t.td,{children:`Таймер, debounce или throttle`}),(0,c.jsx)(t.td,{children:(0,c.jsx)(t.code,{children:`@ryuzaki13/react-foundation-lib/hooks`})})]}),(0,c.jsxs)(t.tr,{children:[(0,c.jsx)(t.td,{children:`Готовый Select, Picker или Sortable UI`}),(0,c.jsxs)(t.td,{children:[`соответствующий subpath `,(0,c.jsx)(t.code,{children:`@ryuzaki13/react-foundation-ui`})]})]}),(0,c.jsxs)(t.tr,{children:[(0,c.jsx)(t.td,{children:`Search schema, route и navigation policy`}),(0,c.jsx)(t.td,{children:`host-приложение и TanStack Router`})]}),(0,c.jsxs)(t.tr,{children:[(0,c.jsx)(t.td,{children:`Получение backend-данных`}),(0,c.jsx)(t.td,{children:`TanStack Query и API-слой host-приложения`})]}),(0,c.jsxs)(t.tr,{children:[(0,c.jsx)(t.td,{children:`Бизнес-правила выбора и сохранения`}),(0,c.jsx)(t.td,{children:`entity или feature host-приложения`})]})]})]}),`
+`,(0,c.jsxs)(t.p,{children:[`Если в UI-пакете уже есть готовый `,(0,c.jsx)(t.code,{children:`Select`}),`, `,(0,c.jsx)(t.code,{children:`Picker`}),` или `,(0,c.jsx)(t.code,{children:`Sortable`}),`, используйте его. `,(0,c.jsx)(t.code,{children:`useFloatingListbox`}),` и `,(0,c.jsx)(t.code,{children:`useDndSortableSensors`}),` нужны при создании нового предметно-независимого primitive.`]}),`
+`,(0,c.jsx)(t.h2,{id:`установка`,children:`Установка`}),`
+`,(0,c.jsx)(t.pre,{children:(0,c.jsx)(t.code,{className:`language-bash`,children:`npm install @ryuzaki13/react-foundation-lib
+`})}),`
+`,(0,c.jsxs)(t.p,{children:[(0,c.jsx)(t.code,{children:`react`}),` является peer dependency пакета. Отдельным hooks также нужны:`]}),`
+`,(0,c.jsxs)(t.table,{children:[(0,c.jsx)(t.thead,{children:(0,c.jsxs)(t.tr,{children:[(0,c.jsx)(t.th,{children:`API`}),(0,c.jsx)(t.th,{children:`Peer dependencies`})]})}),(0,c.jsxs)(t.tbody,{children:[(0,c.jsxs)(t.tr,{children:[(0,c.jsx)(t.td,{children:(0,c.jsx)(t.code,{children:`useDndSortableSensors`})}),(0,c.jsxs)(t.td,{children:[(0,c.jsx)(t.code,{children:`@dnd-kit/core`}),`, `,(0,c.jsx)(t.code,{children:`@dnd-kit/sortable`})]})]}),(0,c.jsxs)(t.tr,{children:[(0,c.jsx)(t.td,{children:(0,c.jsx)(t.code,{children:`useFloatingListbox`})}),(0,c.jsx)(t.td,{children:(0,c.jsx)(t.code,{children:`@floating-ui/react`})})]}),(0,c.jsxs)(t.tr,{children:[(0,c.jsxs)(t.td,{children:[(0,c.jsx)(t.code,{children:`useSearchParams`}),`, `,(0,c.jsx)(t.code,{children:`useSearchLink`})]}),(0,c.jsx)(t.td,{children:(0,c.jsx)(t.code,{children:`@tanstack/react-router`})})]})]})]}),`
+`,(0,c.jsx)(t.p,{children:`Используйте только опубликованный subpath:`}),`
+`,(0,c.jsx)(t.pre,{children:(0,c.jsx)(t.code,{className:`language-ts`,children:`// Правильно.
+import { useDebounce } from "@ryuzaki13/react-foundation-lib/hooks";
+
+// Неправильно: корневой entrypoint не опубликован.
+// import { useDebounce } from "@ryuzaki13/react-foundation-lib";
+
+// Неправильно: private import зависит от структуры исходников.
+// import { useDebounce } from "@ryuzaki13/react-foundation-lib/src/hooks/useDebounce";
+`})}),`
+`,(0,c.jsx)(t.h2,{id:`публичный-api`,children:`Публичный API`}),`
+`,(0,c.jsx)(t.p,{children:`Runtime hooks:`}),`
+`,(0,c.jsx)(t.pre,{children:(0,c.jsx)(t.code,{className:`language-ts`,children:`import {
+	useBlockBrowserZoom,
+	useDebounce,
+	useDebouncedCallback,
+	useDndSortableSensors,
+	useFloatingListbox,
+	useLazyComponent,
+	useReferenceTrace,
+	useSearchLink,
+	useSearchParams,
+	useThrottledCallback
+} from "@ryuzaki13/react-foundation-lib/hooks";
+`})}),`
+`,(0,c.jsx)(t.p,{children:`Публичные типы:`}),`
+`,(0,c.jsx)(t.pre,{children:(0,c.jsx)(t.code,{className:`language-ts`,children:`import type {
+	FloatingListboxPlacementStrategy,
+	FloatingListboxSizeContext,
+	FloatingListboxSizeResolver,
+	FloatingListboxSizeStyle,
+	ThrottledCallback,
+	UseDndSortableSensorsOptions
+} from "@ryuzaki13/react-foundation-lib/hooks";
+`})}),`
+`,(0,c.jsx)(t.p,{children:`Всего entrypoint экспортирует 16 публичных имён: 10 hooks и 6 типов.`}),`
+`,(0,c.jsxs)(t.p,{children:[(0,c.jsx)(t.code,{children:`ParamValue`}),`, `,(0,c.jsx)(t.code,{children:`SearchParams`}),`, `,(0,c.jsx)(t.code,{children:`SearchParamsUpdater`}),` и `,(0,c.jsx)(t.code,{children:`UseFloatingListboxParams`}),` используются внутри деклараций, но не экспортируются из package subpath. Не импортируйте их через private paths.`]}),`
+`,(0,c.jsx)(t.h2,{id:`правила-react-hooks`,children:`Правила React hooks`}),`
+`,(0,c.jsx)(t.p,{children:`Вызывайте hook только на верхнем уровне React component или собственного hook:`}),`
+`,(0,c.jsx)(t.pre,{children:(0,c.jsx)(t.code,{className:`language-tsx`,children:`function SearchPanel() {
+	const query = useDebounce("text", 300);
+	return <div>{query}</div>;
+}
+`})}),`
+`,(0,c.jsx)(t.p,{children:`Условный вызов запрещён:`}),`
+`,(0,c.jsx)(t.pre,{children:(0,c.jsx)(t.code,{className:`language-tsx`,children:`function SearchPanel({ enabled }: { enabled: boolean }) {
+	if (enabled) {
+		// Неправильно: hook вызывается условно.
+		const query = useDebounce("text", 300);
+		return <div>{query}</div>;
+	}
+
+	return null;
+}
+`})}),`
+`,(0,c.jsx)(t.p,{children:`В event handler вызывайте функцию, которую вернул hook:`}),`
+`,(0,c.jsx)(t.pre,{children:(0,c.jsx)(t.code,{className:`language-tsx`,children:`function Toolbar() {
+	const { call } = useDebouncedCallback((value: string) => {
+		console.log(value);
+	}, 300);
+
+	return (
+		<button type="button" onClick={() => call("save")}>
+			Сохранить
+		</button>
+	);
+}
+`})}),`
+`,(0,c.jsxs)(t.p,{children:[`В development Strict Mode может выполнить дополнительный setup/cleanup cycle. Timers и listeners очищаются, но callback с `,(0,c.jsx)(t.code,{children:`flushOnUnmount: true`}),` является side effect cleanup и должен быть идемпотентным.`]}),`
+`,(0,c.jsx)(t.h2,{id:`быстрый-выбор`,children:`Быстрый выбор`}),`
+`,(0,c.jsxs)(t.table,{children:[(0,c.jsx)(t.thead,{children:(0,c.jsxs)(t.tr,{children:[(0,c.jsx)(t.th,{children:`Сценарий`}),(0,c.jsx)(t.th,{children:`API`})]})}),(0,c.jsxs)(t.tbody,{children:[(0,c.jsxs)(t.tr,{children:[(0,c.jsx)(t.td,{children:`Значение после паузы во вводе`}),(0,c.jsx)(t.td,{children:(0,c.jsx)(t.code,{children:`useDebounce`})})]}),(0,c.jsxs)(t.tr,{children:[(0,c.jsx)(t.td,{children:`Callback после паузы от последнего события`}),(0,c.jsx)(t.td,{children:(0,c.jsx)(t.code,{children:`useDebouncedCallback`})})]}),(0,c.jsxs)(t.tr,{children:[(0,c.jsx)(t.td,{children:`Ограничение частоты с leading и trailing вызовами`}),(0,c.jsx)(t.td,{children:(0,c.jsx)(t.code,{children:`useThrottledCallback`})})]}),(0,c.jsxs)(t.tr,{children:[(0,c.jsx)(t.td,{children:`Pointer и Keyboard sensors DnD Kit`}),(0,c.jsx)(t.td,{children:(0,c.jsx)(t.code,{children:`useDndSortableSensors`})})]}),(0,c.jsxs)(t.tr,{children:[(0,c.jsx)(t.td,{children:`Собственный доступный floating listbox`}),(0,c.jsx)(t.td,{children:(0,c.jsx)(t.code,{children:`useFloatingListbox`})})]}),(0,c.jsxs)(t.tr,{children:[(0,c.jsx)(t.td,{children:`Чтение и replace-navigation search state`}),(0,c.jsx)(t.td,{children:(0,c.jsx)(t.code,{children:`useSearchParams`})})]}),(0,c.jsxs)(t.tr,{children:[(0,c.jsxs)(t.td,{children:[`Построение `,(0,c.jsx)(t.code,{children:`href`}),` без navigation`]}),(0,c.jsx)(t.td,{children:(0,c.jsx)(t.code,{children:`useSearchLink`})})]}),(0,c.jsxs)(t.tr,{children:[(0,c.jsx)(t.td,{children:`Lazy component внутри component/custom hook`}),(0,c.jsx)(t.td,{children:(0,c.jsx)(t.code,{children:`useLazyComponent`})})]}),(0,c.jsxs)(t.tr,{children:[(0,c.jsx)(t.td,{children:`Диагностика reference identity`}),(0,c.jsx)(t.td,{children:(0,c.jsx)(t.code,{children:`useReferenceTrace`})})]}),(0,c.jsxs)(t.tr,{children:[(0,c.jsxs)(t.td,{children:[`Блокировка `,(0,c.jsx)(t.code,{children:`Ctrl + wheel`})]}),(0,c.jsx)(t.td,{children:(0,c.jsx)(t.code,{children:`useBlockBrowserZoom`})})]})]})]}),`
+`,(0,c.jsx)(t.h2,{id:`debounce-и-throttle-простыми-словами`,children:`Debounce и throttle простыми словами`}),`
+`,(0,c.jsx)(t.p,{children:`Debounce ждёт тишины:`}),`
+`,(0,c.jsx)(t.pre,{children:(0,c.jsx)(t.code,{className:`language-text`,children:`события:       A -- B -- C ----------------
+таймер:        x    x    |--- delay ---|
+callback:                          C
+`})}),`
+`,(0,c.jsx)(t.p,{children:`Throttle ограничивает частоту:`}),`
+`,(0,c.jsx)(t.pre,{children:(0,c.jsx)(t.code,{className:`language-text`,children:`события:       A - B - C - D - E ----------
+callback:      A ------- D ------- E
+               leading   trailing
+`})}),`
+`,(0,c.jsx)(t.h2,{id:`usedebounce`,children:(0,c.jsx)(t.code,{children:`useDebounce`})}),`
+`,(0,c.jsxs)(t.p,{children:[(0,c.jsx)(t.code,{children:`useDebounce`}),` возвращает задержанную копию React-значения:`]}),`
+`,(0,c.jsx)(t.pre,{children:(0,c.jsx)(t.code,{className:`language-ts`,children:`function useDebounce<T>(value: T, delay: number): T;
+`})}),`
+`,(0,c.jsx)(t.h3,{id:`пример`,children:`Пример`}),`
+`,(0,c.jsx)(t.pre,{children:(0,c.jsx)(t.code,{className:`language-tsx`,children:`import { useMemo, useState } from "react";
+
+import { useDebounce } from "@ryuzaki13/react-foundation-lib/hooks";
+
+type User = {
+	id: string;
+	name: string;
+};
+
+function UserList({ users }: { users: readonly User[] }) {
+	const [draftQuery, setDraftQuery] = useState("");
+	const query = useDebounce(draftQuery, 300);
+
+	const visibleUsers = useMemo(() => {
+		const normalized = query.trim().toLowerCase();
+		if (!normalized) return users;
+		return users.filter((user) => user.name.toLowerCase().includes(normalized));
+	}, [query, users]);
+
+	return (
+		<>
+			<input value={draftQuery} onChange={(event) => setDraftQuery(event.target.value)} />
+			<ul>
+				{visibleUsers.map((user) => (
+					<li key={user.id}>{user.name}</li>
+				))}
+			</ul>
+		</>
+	);
+}
+`})}),`
+`,(0,c.jsx)(t.h3,{id:`точное-поведение`,children:`Точное поведение`}),`
+`,(0,c.jsxs)(t.ol,{children:[`
+`,(0,c.jsxs)(t.li,{children:[`На первом render возвращается исходный `,(0,c.jsx)(t.code,{children:`value`}),`.`]}),`
+`,(0,c.jsxs)(t.li,{children:[`После изменения `,(0,c.jsx)(t.code,{children:`value`}),` или `,(0,c.jsx)(t.code,{children:`delay`}),` создаётся timeout.`]}),`
+`,(0,c.jsx)(t.li,{children:`Новое изменение удаляет предыдущий timeout.`}),`
+`,(0,c.jsx)(t.li,{children:`После delay значение записывается во внутренний state.`}),`
+`,(0,c.jsx)(t.li,{children:`При unmount timeout очищается.`}),`
+`]}),`
+`,(0,c.jsx)(t.h3,{id:`ограничения`,children:`Ограничения`}),`
+`,(0,c.jsxs)(t.ul,{children:[`
+`,(0,c.jsx)(t.li,{children:`Новый object/array reference на каждом render перезапускает timeout.`}),`
+`,(0,c.jsxs)(t.li,{children:[(0,c.jsx)(t.code,{children:`delay`}),` не валидируется. Нулевое или отрицательное значение практически убирает задержку.`]}),`
+`,(0,c.jsx)(t.li,{children:`Hook не отменяет network request, а только задерживает значение.`}),`
+`,(0,c.jsx)(t.li,{children:`Не копируйте debounced Query data в ещё один state.`}),`
+`]}),`
+`,(0,c.jsx)(t.p,{children:`Нестабильный object:`}),`
+`,(0,c.jsx)(t.pre,{children:(0,c.jsx)(t.code,{className:`language-tsx`,children:`// Новый объект на каждом render.
+const delayedFilters = useDebounce({ status, query }, 300);
+`})}),`
+`,(0,c.jsx)(t.p,{children:`При реальной необходимости стабилизируйте input:`}),`
+`,(0,c.jsx)(t.pre,{children:(0,c.jsx)(t.code,{className:`language-tsx`,children:`const filters = useMemo(() => ({ status, query }), [query, status]);
+const delayedFilters = useDebounce(filters, 300);
+`})}),`
+`,(0,c.jsx)(t.h2,{id:`usedebouncedcallback`,children:(0,c.jsx)(t.code,{children:`useDebouncedCallback`})}),`
+`,(0,c.jsx)(t.p,{children:`Hook откладывает callback до окончания периода тишины:`}),`
+`,(0,c.jsx)(t.pre,{children:(0,c.jsx)(t.code,{className:`language-ts`,children:`function useDebouncedCallback<T>(
+	cb: (arg: T) => void,
+	delayMs: number,
+	options?: { flushOnUnmount?: boolean }
+): {
+	call: (arg: T) => void;
+	flush: () => void;
+	cancel: () => void;
+};
+`})}),`
+`,(0,c.jsx)(t.h3,{id:`пример-1`,children:`Пример`}),`
+`,(0,c.jsx)(t.pre,{children:(0,c.jsx)(t.code,{className:`language-tsx`,children:`function DraftEditor({ onSave }: { onSave: (value: string) => void }) {
+	const [value, setValue] = useState("");
+	const { call, flush, cancel } = useDebouncedCallback(onSave, 500);
+
+	return (
+		<div>
+			<input
+				value={value}
+				onChange={(event) => {
+					const next = event.target.value;
+					setValue(next);
+					call(next);
+				}}
+				onBlur={flush}
+			/>
+			<button type="button" onClick={cancel}>
+				Отменить pending save
+			</button>
+		</div>
+	);
+}
+`})}),`
+`,(0,c.jsxs)(t.table,{children:[(0,c.jsx)(t.thead,{children:(0,c.jsxs)(t.tr,{children:[(0,c.jsx)(t.th,{children:`Функция`}),(0,c.jsx)(t.th,{children:`Поведение`})]})}),(0,c.jsxs)(t.tbody,{children:[(0,c.jsxs)(t.tr,{children:[(0,c.jsx)(t.td,{children:(0,c.jsx)(t.code,{children:`call(value)`})}),(0,c.jsx)(t.td,{children:`Сохраняет последнее значение и перезапускает timeout.`})]}),(0,c.jsxs)(t.tr,{children:[(0,c.jsx)(t.td,{children:(0,c.jsx)(t.code,{children:`flush()`})}),(0,c.jsx)(t.td,{children:`Немедленно вызывает callback с pending-значением.`})]}),(0,c.jsxs)(t.tr,{children:[(0,c.jsx)(t.td,{children:(0,c.jsx)(t.code,{children:`cancel()`})}),(0,c.jsx)(t.td,{children:`Удаляет timeout и забывает значение без callback.`})]})]})]}),`
+`,(0,c.jsxs)(t.p,{children:[`Это last-write-wins: после `,(0,c.jsx)(t.code,{children:`call("A")`}),`, `,(0,c.jsx)(t.code,{children:`call("B")`}),` и `,(0,c.jsx)(t.code,{children:`call("C")`}),` callback получит только `,(0,c.jsx)(t.code,{children:`"C"`}),`.`]}),`
+`,(0,c.jsxs)(t.p,{children:[`Актуальная `,(0,c.jsx)(t.code,{children:`cb`}),` хранится в ref после commit, поэтому pending timer не использует старое замыкание. `,(0,c.jsx)(t.code,{children:`flush`}),` и `,(0,c.jsx)(t.code,{children:`cancel`}),` стабильны; `,(0,c.jsx)(t.code,{children:`call`}),` меняется при изменении `,(0,c.jsx)(t.code,{children:`delayMs`}),`.`]}),`
+`,(0,c.jsx)(t.h3,{id:`flushonunmount`,children:(0,c.jsx)(t.code,{children:`flushOnUnmount`})}),`
+`,(0,c.jsxs)(t.p,{children:[`Default cleanup выполняет `,(0,c.jsx)(t.code,{children:`cancel()`}),`. Для попытки применить последнее значение:`]}),`
+`,(0,c.jsx)(t.pre,{children:(0,c.jsx)(t.code,{className:`language-tsx`,children:`const deferred = useDebouncedCallback(onSave, 500, {
+	flushOnUnmount: true
+});
+`})}),`
+`,(0,c.jsxs)(t.p,{children:[`Callback должен быть безопасен во время cleanup и не обновлять state размонтированного component. Изменение самого `,(0,c.jsx)(t.code,{children:`flushOnUnmount`}),` запускает cleanup предыдущего effect, поэтому держите option стабильной.`]}),`
+`,(0,c.jsxs)(t.h3,{id:`критическое-ограничение-null`,children:[`Критическое ограничение `,(0,c.jsx)(t.code,{children:`null`})]}),`
+`,(0,c.jsxs)(t.p,{children:[(0,c.jsx)(t.code,{children:`null`}),` используется как внутренний признак «pending-значения нет». Поэтому `,(0,c.jsx)(t.code,{children:`call(null)`}),` не вызывает callback, хотя generic формально разрешает nullable type.`]}),`
+`,(0,c.jsx)(t.p,{children:`Заверните nullable value:`}),`
+`,(0,c.jsx)(t.pre,{children:(0,c.jsx)(t.code,{className:`language-tsx`,children:`type SavePayload = {
+	value: string | null;
+};
+
+const { call } = useDebouncedCallback<SavePayload>((payload) => {
+	saveValue(payload.value);
+}, 300);
+
+call({ value: null });
+`})}),`
+`,(0,c.jsxs)(t.p,{children:[`Изменение `,(0,c.jsx)(t.code,{children:`delayMs`}),` не пересчитывает уже запланированный timeout. Новый delay используется следующим `,(0,c.jsx)(t.code,{children:`call`}),`.`]}),`
+`,(0,c.jsx)(t.h2,{id:`usethrottledcallback`,children:(0,c.jsx)(t.code,{children:`useThrottledCallback`})}),`
+`,(0,c.jsx)(t.p,{children:`Hook вызывает callback не чаще одного раза за interval и сохраняет последнее значение:`}),`
+`,(0,c.jsx)(t.pre,{children:(0,c.jsx)(t.code,{className:`language-ts`,children:`function useThrottledCallback<T>(cb: (arg: T) => void, intervalMs: number, options?: { flushOnUnmount?: boolean }): ThrottledCallback<T>;
+
+type ThrottledCallback<T> = {
+	call: (arg: T) => void;
+	flush: () => void;
+	cancel: () => void;
+};
+`})}),`
+`,(0,c.jsx)(t.h3,{id:`пример-2`,children:`Пример`}),`
+`,(0,c.jsx)(t.pre,{children:(0,c.jsx)(t.code,{className:`language-tsx`,children:`type Point = {
+	x: number;
+	y: number;
+};
+
+function PointerTracker({ onChange }: { onChange: (point: Point) => void }) {
+	const { call, flush, cancel } = useThrottledCallback(onChange, 100);
+
+	return (
+		<div onPointerMove={(event) => call({ x: event.clientX, y: event.clientY })} onPointerUp={flush} onPointerCancel={cancel}>
+			Перемещайте указатель
+		</div>
+	);
+}
+`})}),`
+`,(0,c.jsx)(t.h3,{id:`точное-поведение-1`,children:`Точное поведение`}),`
+`,(0,c.jsxs)(t.ol,{children:[`
+`,(0,c.jsxs)(t.li,{children:[`Первый обычный `,(0,c.jsx)(t.code,{children:`call`}),` выполняет callback сразу — leading edge.`]}),`
+`,(0,c.jsxs)(t.li,{children:[`Вызовы внутри `,(0,c.jsx)(t.code,{children:`intervalMs`}),` сохраняют только последнее значение.`]}),`
+`,(0,c.jsx)(t.li,{children:`В конце окна выполняется trailing callback.`}),`
+`,(0,c.jsxs)(t.li,{children:[(0,c.jsx)(t.code,{children:`flush`}),` немедленно применяет pending value и начинает новое окно.`]}),`
+`,(0,c.jsxs)(t.li,{children:[(0,c.jsx)(t.code,{children:`cancel`}),` забывает pending value, но не сбрасывает timestamp последнего callback.`]}),`
+`]}),`
+`,(0,c.jsxs)(t.p,{children:[`Если после `,(0,c.jsx)(t.code,{children:`cancel`}),` вызвать `,(0,c.jsx)(t.code,{children:`call`}),` до окончания текущего окна, значение всё равно будет отложено.`]}),`
+`,(0,c.jsx)(t.p,{children:`Ограничения:`}),`
+`,(0,c.jsxs)(t.ul,{children:[`
+`,(0,c.jsxs)(t.li,{children:[(0,c.jsx)(t.code,{children:`null`}),` нельзя использовать как payload; применяйте object-wrapper;`]}),`
+`,(0,c.jsx)(t.li,{children:`interval не валидируется;`}),`
+`,(0,c.jsx)(t.li,{children:`изменение interval не пересчитывает pending timeout;`}),`
+`,(0,c.jsxs)(t.li,{children:[(0,c.jsx)(t.code,{children:`flushOnUnmount`}),` имеет те же cleanup-риски;`]}),`
+`,(0,c.jsx)(t.li,{children:`throttle не переносит тяжёлую работу в Worker.`}),`
+`]}),`
+`,(0,c.jsx)(t.h2,{id:`сравнение-timer-hooks`,children:`Сравнение timer hooks`}),`
+`,(0,c.jsxs)(t.table,{children:[(0,c.jsx)(t.thead,{children:(0,c.jsxs)(t.tr,{children:[(0,c.jsx)(t.th,{children:`Свойство`}),(0,c.jsx)(t.th,{children:(0,c.jsx)(t.code,{children:`useDebounce`})}),(0,c.jsx)(t.th,{children:(0,c.jsx)(t.code,{children:`useDebouncedCallback`})}),(0,c.jsx)(t.th,{children:(0,c.jsx)(t.code,{children:`useThrottledCallback`})})]})}),(0,c.jsxs)(t.tbody,{children:[(0,c.jsxs)(t.tr,{children:[(0,c.jsx)(t.td,{children:`Результат`}),(0,c.jsx)(t.td,{children:`задержанное value`}),(0,c.jsx)(t.td,{children:(0,c.jsx)(t.code,{children:`call/flush/cancel`})}),(0,c.jsx)(t.td,{children:(0,c.jsx)(t.code,{children:`call/flush/cancel`})})]}),(0,c.jsxs)(t.tr,{children:[(0,c.jsx)(t.td,{children:`Первый callback сразу`}),(0,c.jsx)(t.td,{children:`не применимо`}),(0,c.jsx)(t.td,{children:`нет`}),(0,c.jsx)(t.td,{children:`да`})]}),(0,c.jsxs)(t.tr,{children:[(0,c.jsx)(t.td,{children:`Частые события`}),(0,c.jsx)(t.td,{children:`value после тишины`}),(0,c.jsx)(t.td,{children:`callback после тишины`}),(0,c.jsx)(t.td,{children:`leading + последнее trailing`})]}),(0,c.jsxs)(t.tr,{children:[(0,c.jsx)(t.td,{children:`Ручной flush/cancel`}),(0,c.jsx)(t.td,{children:`нет`}),(0,c.jsx)(t.td,{children:`да`}),(0,c.jsx)(t.td,{children:`да`})]}),(0,c.jsxs)(t.tr,{children:[(0,c.jsx)(t.td,{children:(0,c.jsx)(t.code,{children:`null`})}),(0,c.jsx)(t.td,{children:`допустим`}),(0,c.jsx)(t.td,{children:`недопустим`}),(0,c.jsx)(t.td,{children:`недопустим`})]})]})]}),`
+`,(0,c.jsx)(t.h2,{id:`usedndsortablesensors`,children:(0,c.jsx)(t.code,{children:`useDndSortableSensors`})}),`
+`,(0,c.jsx)(t.p,{children:`Hook создаёт стандартный набор DnD Kit sensors:`}),`
+`,(0,c.jsxs)(t.ul,{children:[`
+`,(0,c.jsxs)(t.li,{children:[(0,c.jsx)(t.code,{children:`PointerSensor`}),` с activation distance;`]}),`
+`,(0,c.jsxs)(t.li,{children:[(0,c.jsx)(t.code,{children:`KeyboardSensor`}),` с `,(0,c.jsx)(t.code,{children:`sortableKeyboardCoordinates`}),`.`]}),`
+`]}),`
+`,(0,c.jsx)(t.pre,{children:(0,c.jsx)(t.code,{className:`language-ts`,children:`interface UseDndSortableSensorsOptions {
+	activationDistance?: number;
+}
+
+function useDndSortableSensors(distanceOrOptions?: number | UseDndSortableSensorsOptions): SensorDescriptor<SensorOptions>[];
+`})}),`
+`,(0,c.jsx)(t.h3,{id:`использование`,children:`Использование`}),`
+`,(0,c.jsx)(t.pre,{children:(0,c.jsx)(t.code,{className:`language-tsx`,children:`import { DndContext } from "@dnd-kit/core";
+
+import { useDndSortableSensors } from "@ryuzaki13/react-foundation-lib/hooks";
+
+function SortableArea({ children }: { children: React.ReactNode }) {
+	const sensors = useDndSortableSensors({
+		activationDistance: 8
+	});
+
+	return <DndContext sensors={sensors}>{children}</DndContext>;
+}
+`})}),`
+`,(0,c.jsx)(t.p,{children:`Числовой shorthand также поддерживается:`}),`
+`,(0,c.jsx)(t.pre,{children:(0,c.jsx)(t.code,{className:`language-tsx`,children:`const sensors = useDndSortableSensors(8);
+`})}),`
+`,(0,c.jsxs)(t.p,{children:[`Default distance равен `,(0,c.jsx)(t.code,{children:`6`}),` pixels. Значение `,(0,c.jsx)(t.code,{children:`0`}),` активирует pointer drag без минимального движения. Значение не валидируется.`]}),`
+`,(0,c.jsxs)(t.p,{children:[`Hook не создаёт `,(0,c.jsx)(t.code,{children:`DndContext`}),`, `,(0,c.jsx)(t.code,{children:`SortableContext`}),`, collision detection, modifiers, items или drag overlay. Keyboard sensor не заменяет доступный drag handle: trigger должен иметь понятное имя и keyboard focus.`]}),`
+`,(0,c.jsx)(t.h2,{id:`usesearchparams`,children:(0,c.jsx)(t.code,{children:`useSearchParams`})}),`
+`,(0,c.jsx)(t.p,{children:`Hook читает search state текущего TanStack Router route и возвращает replace-navigation.`}),`
+`,(0,c.jsxs)(t.p,{children:[`Он должен находиться внутри `,(0,c.jsx)(t.code,{children:`RouterProvider`}),`. Вне Router context TanStack Router выбросит ошибку.`]}),`
+`,(0,c.jsx)(t.h3,{id:`типизированный-пример`,children:`Типизированный пример`}),`
+`,(0,c.jsx)(t.pre,{children:(0,c.jsx)(t.code,{className:`language-tsx`,children:`import { useSearchParams } from "@ryuzaki13/react-foundation-lib/hooks";
+
+type PageSearchKey = "page" | "filter" | "showAll";
+
+function PageToolbar() {
+	const { params, setParams } = useSearchParams<PageSearchKey>();
+	const page = Number(params.page ?? "1");
+	const showAll = params.showAll === "X";
+
+	return (
+		<>
+			<button type="button" onClick={() => void setParams({ page: page + 1 })}>
+				Следующая страница
+			</button>
+			<button type="button" onClick={() => void setParams({ showAll: showAll ? "" : "X" })}>
+				Показать все
+			</button>
+		</>
+	);
+}
+`})}),`
+`,(0,c.jsx)(t.h3,{id:`возвращаемые-поля`,children:`Возвращаемые поля`}),`
+`,(0,c.jsxs)(t.table,{children:[(0,c.jsx)(t.thead,{children:(0,c.jsxs)(t.tr,{children:[(0,c.jsx)(t.th,{children:`Поле`}),(0,c.jsx)(t.th,{children:`Поведение`})]})}),(0,c.jsxs)(t.tbody,{children:[(0,c.jsxs)(t.tr,{children:[(0,c.jsx)(t.td,{children:(0,c.jsx)(t.code,{children:`params`})}),(0,c.jsx)(t.td,{children:`Полный search result текущего route в non-strict режиме.`})]}),(0,c.jsxs)(t.tr,{children:[(0,c.jsx)(t.td,{children:(0,c.jsx)(t.code,{children:`setParams(next)`})}),(0,c.jsxs)(t.td,{children:[`Relative navigation на `,(0,c.jsx)(t.code,{children:`"."`}),`, merge `,(0,c.jsx)(t.code,{children:`prev`}),` и `,(0,c.jsx)(t.code,{children:`next`}),`, `,(0,c.jsx)(t.code,{children:`replace: true`}),`.`]})]}),(0,c.jsxs)(t.tr,{children:[(0,c.jsx)(t.td,{children:(0,c.jsx)(t.code,{children:`filteredParams`})}),(0,c.jsxs)(t.td,{children:[`View по `,(0,c.jsx)(t.code,{children:`allowedKeys`}),`; без списка совпадает с `,(0,c.jsx)(t.code,{children:`params`}),`.`]})]})]})]}),`
+`,(0,c.jsx)(t.p,{children:`Merge выглядит так:`}),`
+`,(0,c.jsx)(t.pre,{children:(0,c.jsx)(t.code,{className:`language-ts`,children:`search: (prev) => ({
+	...prev,
+	...next
+});
+`})}),`
+`,(0,c.jsxs)(t.p,{children:[`Ключи, которых нет в `,(0,c.jsx)(t.code,{children:`next`}),`, сохраняются. `,(0,c.jsx)(t.code,{children:`string`}),`, `,(0,c.jsx)(t.code,{children:`number`}),` и `,(0,c.jsx)(t.code,{children:`boolean`}),` передаются Router-у; окончательная сериализация зависит от search schema host-приложения.`]}),`
+`,(0,c.jsxs)(t.p,{children:[(0,c.jsx)(t.code,{children:`replace: true`}),` заменяет текущую history entry. Browser Back не получает отдельный шаг для каждого вызова.`]}),`
+`,(0,c.jsxs)(t.h3,{id:`ограничение-allowedkeys`,children:[`Ограничение `,(0,c.jsx)(t.code,{children:`allowedKeys`})]}),`
+`,(0,c.jsxs)(t.p,{children:[`Runtime фильтрации существует, но текущая public signature объявляет argument как `,(0,c.jsx)(t.code,{children:`(keyof K)[]`}),` вместо ожидаемого `,(0,c.jsx)(t.code,{children:`K[]`}),`. Обычный intended вызов не компилируется:`]}),`
+`,(0,c.jsx)(t.pre,{children:(0,c.jsx)(t.code,{className:`language-tsx`,children:`type SearchKey = "page" | "filter";
+
+// Текущий public type отвергает "page".
+// useSearchParams<SearchKey>(["page"]);
+`})}),`
+`,(0,c.jsx)(t.p,{children:`Не обходите это broad cast. Пока API не исправлен, вызывайте hook без списка и создавайте нужный view явно:`}),`
+`,(0,c.jsx)(t.pre,{children:(0,c.jsx)(t.code,{className:`language-tsx`,children:`const { params } = useSearchParams<SearchKey>();
+
+const filteredParams = {
+	page: params.page
+};
+`})}),`
+`,(0,c.jsx)(t.p,{children:`Это ограничение типов текущей версии, а не TanStack Router.`}),`
+`,(0,c.jsx)(t.p,{children:`Дополнительно:`}),`
+`,(0,c.jsxs)(t.ul,{children:[`
+`,(0,c.jsxs)(t.li,{children:[(0,c.jsx)(t.code,{children:`allowedKeys`}),` влияет только на `,(0,c.jsx)(t.code,{children:`filteredParams`}),`;`]}),`
+`,(0,c.jsxs)(t.li,{children:[(0,c.jsx)(t.code,{children:`setParams`}),` по-прежнему меняет полный search object;`]}),`
+`,(0,c.jsxs)(t.li,{children:[`inline `,(0,c.jsx)(t.code,{children:`allowedKeys`}),` создаёт новую array reference для `,(0,c.jsx)(t.code,{children:`useMemo`}),`;`]}),`
+`,(0,c.jsxs)(t.li,{children:[`используйте string keys, несмотря на формальный constraint `,(0,c.jsx)(t.code,{children:`PropertyKey`}),`.`]}),`
+`]}),`
+`,(0,c.jsx)(t.h2,{id:`usesearchlink`,children:(0,c.jsx)(t.code,{children:`useSearchLink`})}),`
+`,(0,c.jsx)(t.p,{children:`Hook строит URL текущего route, не выполняя navigation:`}),`
+`,(0,c.jsx)(t.pre,{children:(0,c.jsx)(t.code,{className:`language-tsx`,children:`import { useSearchLink } from "@ryuzaki13/react-foundation-lib/hooks";
+
+type SearchKey = "page" | "filter";
+
+function PaginationLink() {
+	const { buildLink } = useSearchLink<SearchKey>();
+
+	return <a href={buildLink({ page: "2" })}>Страница 2</a>;
+}
+`})}),`
+`,(0,c.jsxs)(t.p,{children:[(0,c.jsx)(t.code,{children:`buildLink(params)`}),`:`]}),`
+`,(0,c.jsxs)(t.ol,{children:[`
+`,(0,c.jsxs)(t.li,{children:[`копирует `,(0,c.jsx)(t.code,{children:`location.searchStr`}),` в `,(0,c.jsx)(t.code,{children:`URLSearchParams`}),`;`]}),`
+`,(0,c.jsxs)(t.li,{children:[`устанавливает переданные truthy values через `,(0,c.jsx)(t.code,{children:`String(value)`}),`;`]}),`
+`,(0,c.jsx)(t.li,{children:`удаляет keys с falsy values;`}),`
+`,(0,c.jsx)(t.li,{children:`сохраняет pathname и hash;`}),`
+`,(0,c.jsx)(t.li,{children:`возвращает string, но не меняет browser URL.`}),`
+`]}),`
+`,(0,c.jsx)(t.p,{children:`Удаление:`}),`
+`,(0,c.jsx)(t.pre,{children:(0,c.jsx)(t.code,{className:`language-tsx`,children:`const hrefWithoutFilter = buildLink({
+	filter: ""
+});
+`})}),`
+`,(0,c.jsx)(t.p,{children:`Неуказанные параметры сохраняются.`}),`
+`,(0,c.jsx)(t.p,{children:`Ограничения:`}),`
+`,(0,c.jsxs)(t.ul,{children:[`
+`,(0,c.jsx)(t.li,{children:`требуется Router context;`}),`
+`,(0,c.jsxs)(t.li,{children:[(0,c.jsx)(t.code,{children:`buildLink`}),` создаётся заново на каждом render;`]}),`
+`,(0,c.jsx)(t.li,{children:`runtime удаляет любое falsy value;`}),`
+`,(0,c.jsxs)(t.li,{children:[`используется raw `,(0,c.jsx)(t.code,{children:`URLSearchParams`}),` без route validation;`]}),`
+`,(0,c.jsxs)(t.li,{children:[`для programmatic navigation используйте Router API или `,(0,c.jsx)(t.code,{children:`useSearchParams`}),`.`]}),`
+`]}),`
+`,(0,c.jsx)(t.h2,{id:`uselazycomponent`,children:(0,c.jsx)(t.code,{children:`useLazyComponent`})}),`
+`,(0,c.jsxs)(t.p,{children:[`Hook создаёт `,(0,c.jsx)(t.code,{children:`LazyExoticComponent`}),` через общий `,(0,c.jsx)(t.code,{children:`createLazyComponent`}),` и memoizes результат по `,(0,c.jsx)(t.code,{children:`importFn`}),`, `,(0,c.jsx)(t.code,{children:`componentName`}),` и `,(0,c.jsx)(t.code,{children:`cacheKey`}),`.`]}),`
+`,(0,c.jsx)(t.pre,{children:(0,c.jsx)(t.code,{className:`language-ts`,children:`function useLazyComponent<TProps extends object>(
+	importFn: () => Promise<Record<string, ComponentType<TProps>> | null>,
+	componentName: string,
+	cacheKey?: string
+): LazyExoticComponent<ComponentType<TProps>>;
+`})}),`
+`,(0,c.jsx)(t.h3,{id:`пример-3`,children:`Пример`}),`
+`,(0,c.jsx)(t.pre,{children:(0,c.jsx)(t.code,{className:`language-tsx`,children:`import { Suspense } from "react";
+
+import { useLazyComponent } from "@ryuzaki13/react-foundation-lib/hooks";
+
+type ReportProps = {
+	reportId: string;
+};
+
+const importReportModule = () =>
+	import("./Report").then((module) => ({
+		Report: module.Report
+	}));
+
+function ReportHost({ reportId }: ReportProps) {
+	const LazyReport = useLazyComponent<ReportProps>(importReportModule, "Report", "report");
+
+	return (
+		<Suspense fallback={<div>Загрузка отчёта...</div>}>
+			<LazyReport reportId={reportId} />
+		</Suspense>
+	);
+}
+`})}),`
+`,(0,c.jsxs)(t.p,{children:[(0,c.jsx)(t.code,{children:`Suspense`}),` показывает loading fallback. Ошибку import/render должен обрабатывать Error Boundary.`]}),`
+`,(0,c.jsx)(t.h3,{id:`кеширование`,children:`Кеширование`}),`
+`,(0,c.jsxs)(t.p,{children:[`Без `,(0,c.jsx)(t.code,{children:`cacheKey`}),` кеш определяется reference `,(0,c.jsx)(t.code,{children:`importFn`}),` и `,(0,c.jsx)(t.code,{children:`componentName`}),`. Inline loader создаёт новую function reference:`]}),`
+`,(0,c.jsx)(t.pre,{children:(0,c.jsx)(t.code,{className:`language-tsx`,children:`// Нежелательно без cacheKey.
+const LazyReport = useLazyComponent(() => import("./Report"), "Report");
+`})}),`
+`,(0,c.jsxs)(t.p,{children:[`Вынесите loader на уровень модуля либо задайте уникальный стабильный `,(0,c.jsx)(t.code,{children:`cacheKey`}),`.`]}),`
+`,(0,c.jsxs)(t.p,{children:[`С `,(0,c.jsx)(t.code,{children:`cacheKey`}),` используется общий ключ из cache key и component name. Одинаковая пара для разных loaders возвращает первый кешированный component. Ключ должен однозначно обозначать реальный модуль.`]}),`
+`,(0,c.jsx)(t.h3,{id:`выбор-export`,children:`Выбор export`}),`
+`,(0,c.jsx)(t.p,{children:`После import helper ищет:`}),`
+`,(0,c.jsxs)(t.ol,{children:[`
+`,(0,c.jsxs)(t.li,{children:[`export `,(0,c.jsx)(t.code,{children:`componentName`}),`;`]}),`
+`,(0,c.jsxs)(t.li,{children:[(0,c.jsx)(t.code,{children:`default`}),` export;`]}),`
+`,(0,c.jsx)(t.li,{children:`первый export модуля.`}),`
+`]}),`
+`,(0,c.jsxs)(t.p,{children:[(0,c.jsx)(t.code,{children:`null`}),` или отсутствие подходящего component приводит к lazy error.`]}),`
+`,(0,c.jsx)(t.p,{children:`Если component можно объявить один раз на уровне модуля, предпочитайте utility:`}),`
+`,(0,c.jsx)(t.pre,{children:(0,c.jsx)(t.code,{className:`language-tsx`,children:`import { createLazyComponent } from "@ryuzaki13/react-foundation-lib/utils";
+
+const LazyReport = createLazyComponent(importReportModule, "Report", "report");
+`})}),`
+`,(0,c.jsx)(t.p,{children:`Hook нужен, когда loader, name или cache key действительно зависят от component/custom hook contract.`}),`
+`,(0,c.jsx)(t.h2,{id:`usereferencetrace`,children:(0,c.jsx)(t.code,{children:`useReferenceTrace`})}),`
+`,(0,c.jsxs)(t.p,{children:[`Diagnostic hook пишет в `,(0,c.jsx)(t.code,{children:`console.debug`}),` изменение object reference:`]}),`
+`,(0,c.jsx)(t.pre,{children:(0,c.jsx)(t.code,{className:`language-tsx`,children:`function Table({ columns }: { columns: readonly object[] }) {
+	useReferenceTrace("table columns", columns);
+	return <div>Колонок: {columns.length}</div>;
+}
+`})}),`
+`,(0,c.jsx)(t.p,{children:`После каждого committed render выводится:`}),`
+`,(0,c.jsx)(t.pre,{children:(0,c.jsx)(t.code,{className:`language-text`,children:`[render trace] table columns
+{
+  referenceChanged: true,
+  previous: ...,
+  current: ...
+}
+`})}),`
+`,(0,c.jsxs)(t.p,{children:[`Сравнение выполняется через `,(0,c.jsx)(t.code,{children:`Object.is`}),`. На первом effect previous и current совпадают. Hook не вызывает rerender; в Strict Mode development logs могут повторяться.`]}),`
+`,(0,c.jsxs)(t.h3,{id:`обязательный-__dev__`,children:[`Обязательный `,(0,c.jsx)(t.code,{children:`__DEV__`})]}),`
+`,(0,c.jsxs)(t.p,{children:[`Опубликованный runtime обращается к compile-time global `,(0,c.jsx)(t.code,{children:`__DEV__`}),` без fallback. Host bundler должен определить его, например:`]}),`
+`,(0,c.jsx)(t.pre,{children:(0,c.jsx)(t.code,{className:`language-ts`,children:`export default defineConfig(({ mode }) => ({
+	define: {
+		__DEV__: JSON.stringify(mode !== "production")
+	}
+}));
+`})}),`
+`,(0,c.jsxs)(t.p,{children:[`Без replacement effect выбросит `,(0,c.jsx)(t.code,{children:`ReferenceError`}),`. При `,(0,c.jsx)(t.code,{children:`false`}),` hook ничего не логирует.`]}),`
+`,(0,c.jsx)(t.p,{children:`Не передавайте secrets, tokens и персональные данные: previous/current попадают в console. Hook предназначен для временной диагностики, не для бизнес-логики.`}),`
+`,(0,c.jsx)(t.h2,{id:`useblockbrowserzoom`,children:(0,c.jsx)(t.code,{children:`useBlockBrowserZoom`})}),`
+`,(0,c.jsxs)(t.p,{children:[`Hook подписывается на `,(0,c.jsx)(t.code,{children:`window`}),` и вызывает `,(0,c.jsx)(t.code,{children:`preventDefault()`}),` для `,(0,c.jsx)(t.code,{children:`wheel`}),` с `,(0,c.jsx)(t.code,{children:`ctrlKey === true`}),`:`]}),`
+`,(0,c.jsx)(t.pre,{children:(0,c.jsx)(t.code,{className:`language-tsx`,children:`function DiagramViewport({ active }: { active: boolean }) {
+	useBlockBrowserZoom(active);
+	return <div>Рабочая область диаграммы</div>;
+}
+`})}),`
+`,(0,c.jsx)(t.p,{children:`Lifecycle:`}),`
+`,(0,c.jsxs)(t.ul,{children:[`
+`,(0,c.jsxs)(t.li,{children:[`при `,(0,c.jsx)(t.code,{children:`false`}),` listener отсутствует;`]}),`
+`,(0,c.jsxs)(t.li,{children:[`при `,(0,c.jsx)(t.code,{children:`true`}),` добавляется non-passive `,(0,c.jsx)(t.code,{children:`wheel`}),` listener;`]}),`
+`,(0,c.jsx)(t.li,{children:`при смене enabled и unmount listener удаляется;`}),`
+`,(0,c.jsxs)(t.li,{children:[`блокируется только `,(0,c.jsx)(t.code,{children:`Ctrl + wheel`}),`, но не keyboard zoom shortcuts.`]}),`
+`]}),`
+`,(0,c.jsx)(t.p,{children:`Browser zoom важен для accessibility. Не блокируйте его на обычных страницах, формах и текстовом UI. Допустимый сценарий — специальный diagram/canvas viewport с альтернативным управлением масштабом.`}),`
+`,(0,c.jsx)(t.h2,{id:`usefloatinglistbox`,children:(0,c.jsx)(t.code,{children:`useFloatingListbox`})}),`
+`,(0,c.jsx)(t.p,{children:`Этот headless hook объединяет open state, Floating UI positioning/dismiss, active index, disabled options, keyboard navigation, focus, DOM refs, ARIA ids и size resolver. Он не рендерит JSX. Для обычного интерфейса предпочитайте готовые Select/Picker primitives foundation UI.`}),`
+`,(0,c.jsx)(t.h3,{id:`параметры`,children:`Параметры`}),`
+`,(0,c.jsxs)(t.table,{children:[(0,c.jsx)(t.thead,{children:(0,c.jsxs)(t.tr,{children:[(0,c.jsx)(t.th,{children:`Параметр`}),(0,c.jsx)(t.th,{children:`Default`}),(0,c.jsx)(t.th,{children:`Назначение`})]})}),(0,c.jsxs)(t.tbody,{children:[(0,c.jsxs)(t.tr,{children:[(0,c.jsx)(t.td,{children:(0,c.jsx)(t.code,{children:`options`})}),(0,c.jsx)(t.td,{children:`обязателен`}),(0,c.jsx)(t.td,{children:`Ordered options.`})]}),(0,c.jsxs)(t.tr,{children:[(0,c.jsx)(t.td,{children:(0,c.jsx)(t.code,{children:`selectedIndex`})}),(0,c.jsx)(t.td,{children:`обязателен`}),(0,c.jsxs)(t.td,{children:[`Выбранный index или `,(0,c.jsx)(t.code,{children:`-1`}),`.`]})]}),(0,c.jsxs)(t.tr,{children:[(0,c.jsxs)(t.td,{children:[(0,c.jsx)(t.code,{children:`open`}),` / `,(0,c.jsx)(t.code,{children:`onOpenChange`})]}),(0,c.jsx)(t.td,{children:`internal state`}),(0,c.jsx)(t.td,{children:`Controlled open contract.`})]}),(0,c.jsxs)(t.tr,{children:[(0,c.jsx)(t.td,{children:(0,c.jsx)(t.code,{children:`getOptionDisabled`})}),(0,c.jsx)(t.td,{children:`все доступны`}),(0,c.jsx)(t.td,{children:`Disabled predicate.`})]}),(0,c.jsxs)(t.tr,{children:[(0,c.jsx)(t.td,{children:(0,c.jsx)(t.code,{children:`onSelect`})}),(0,c.jsx)(t.td,{children:`отсутствует`}),(0,c.jsx)(t.td,{children:`Callback выбранной option.`})]}),(0,c.jsxs)(t.tr,{children:[(0,c.jsx)(t.td,{children:(0,c.jsx)(t.code,{children:`disabled`})}),(0,c.jsx)(t.td,{children:(0,c.jsx)(t.code,{children:`false`})}),(0,c.jsx)(t.td,{children:`Запрещает открытие через open helpers.`})]}),(0,c.jsxs)(t.tr,{children:[(0,c.jsx)(t.td,{children:(0,c.jsx)(t.code,{children:`placement`})}),(0,c.jsx)(t.td,{children:(0,c.jsx)(t.code,{children:`"bottom-start"`})}),(0,c.jsx)(t.td,{children:`Initial Floating UI placement.`})]}),(0,c.jsxs)(t.tr,{children:[(0,c.jsx)(t.td,{children:(0,c.jsx)(t.code,{children:`placementStrategy`})}),(0,c.jsx)(t.td,{children:(0,c.jsx)(t.code,{children:`"flip"`})}),(0,c.jsxs)(t.td,{children:[(0,c.jsx)(t.code,{children:`"flip"`}),` или `,(0,c.jsx)(t.code,{children:`"auto"`}),`.`]})]}),(0,c.jsxs)(t.tr,{children:[(0,c.jsx)(t.td,{children:(0,c.jsx)(t.code,{children:`closeOnSelect`})}),(0,c.jsx)(t.td,{children:(0,c.jsx)(t.code,{children:`true`})}),(0,c.jsx)(t.td,{children:`Закрыть после select.`})]}),(0,c.jsxs)(t.tr,{children:[(0,c.jsx)(t.td,{children:(0,c.jsx)(t.code,{children:`focusFloatingOnOpen`})}),(0,c.jsx)(t.td,{children:(0,c.jsx)(t.code,{children:`true`})}),(0,c.jsx)(t.td,{children:`Фокусировать popup после открытия.`})]}),(0,c.jsxs)(t.tr,{children:[(0,c.jsx)(t.td,{children:(0,c.jsx)(t.code,{children:`allowOpenWithoutOptions`})}),(0,c.jsx)(t.td,{children:(0,c.jsx)(t.code,{children:`false`})}),(0,c.jsx)(t.td,{children:`Разрешить пустой popup.`})]}),(0,c.jsxs)(t.tr,{children:[(0,c.jsx)(t.td,{children:(0,c.jsx)(t.code,{children:`restoreFocusOnClose`})}),(0,c.jsx)(t.td,{children:(0,c.jsx)(t.code,{children:`true`})}),(0,c.jsxs)(t.td,{children:[`Фокусировать reference внутри `,(0,c.jsx)(t.code,{children:`close()`}),`.`]})]}),(0,c.jsxs)(t.tr,{children:[(0,c.jsx)(t.td,{children:(0,c.jsx)(t.code,{children:`resolveFloatingSize`})}),(0,c.jsx)(t.td,{children:`отсутствует`}),(0,c.jsx)(t.td,{children:`Вычислить CSS sizes/custom properties.`})]})]})]}),`
+`,(0,c.jsxs)(t.p,{children:[(0,c.jsx)(t.code,{children:`placement`}),` использует `,(0,c.jsx)(t.code,{children:`Placement`}),` из `,(0,c.jsx)(t.code,{children:`@floating-ui/react`}),` и не реэкспортируется из `,(0,c.jsx)(t.code,{children:`/hooks`}),`.`]}),`
+`,(0,c.jsx)(t.h3,{id:`controlled-режим`,children:`Controlled режим`}),`
+`,(0,c.jsx)(t.pre,{children:(0,c.jsx)(t.code,{className:`language-tsx`,children:`const [open, setOpen] = useState(false);
+
+const listbox = useFloatingListbox({
+	options,
+	selectedIndex,
+	open,
+	onOpenChange: setOpen
+});
+`})}),`
+`,(0,c.jsxs)(t.p,{children:[`Передавайте `,(0,c.jsx)(t.code,{children:`open`}),` и `,(0,c.jsx)(t.code,{children:`onOpenChange`}),` вместе. Только `,(0,c.jsx)(t.code,{children:`open`}),` оставляет actions без рабочего setter. Только callback не меняет internal state, пока parent не вернёт controlled value.`]}),`
+`,(0,c.jsx)(t.h3,{id:`минимальный-пример`,children:`Минимальный пример`}),`
+`,(0,c.jsx)(t.pre,{children:(0,c.jsx)(t.code,{className:`language-tsx`,children:`import { useId, useState } from "react";
+
+import { useFloatingListbox } from "@ryuzaki13/react-foundation-lib/hooks";
+
+type City = {
+	id: string;
+	label: string;
+	disabled?: boolean;
+};
+
+const cities: readonly City[] = [
+	{ id: "ekb", label: "Екатеринбург" },
+	{ id: "msk", label: "Москва" },
+	{ id: "spb", label: "Санкт-Петербург", disabled: true }
+];
+
+function CityListbox() {
+	const listId = useId();
+	const [selected, setSelected] = useState<City | undefined>();
+	const selectedIndex = selected ? cities.findIndex((city) => city.id === selected.id) : -1;
+	const {
+		open,
+		activeIndex,
+		floatingStyles,
+		setReference,
+		setFloating,
+		setOptionRef,
+		toggleOpen,
+		selectOption,
+		handleReferenceKeyDown,
+		handleFloatingKeyDown,
+		getFloatingProps,
+		getOptionId,
+		getActiveOptionId
+	} = useFloatingListbox({
+		options: cities,
+		selectedIndex,
+		getOptionDisabled: (city) => city.disabled === true,
+		onSelect: setSelected
+	});
+
+	return (
+		<div>
+			<button
+				ref={setReference}
+				type="button"
+				aria-haspopup="listbox"
+				aria-expanded={open}
+				aria-controls={open ? listId : undefined}
+				aria-activedescendant={open ? getActiveOptionId(listId) : undefined}
+				onClick={toggleOpen}
+				onKeyDown={handleReferenceKeyDown}>
+				{selected?.label ?? "Выберите город"}
+			</button>
+
+			{open ? (
+				<div
+					ref={setFloating}
+					style={floatingStyles}
+					{...getFloatingProps({
+						id: listId,
+						tabIndex: 0,
+						"aria-activedescendant": getActiveOptionId(listId),
+						onKeyDown: handleFloatingKeyDown
+					})}>
+					{cities.map((city, index) => {
+						const optionDisabled = city.disabled === true;
+
+						return (
+							<div
+								key={city.id}
+								id={getOptionId(listId, index)}
+								ref={(node) => setOptionRef(index, node)}
+								role="option"
+								aria-selected={selectedIndex === index}
+								aria-disabled={optionDisabled || undefined}
+								data-active={activeIndex === index || undefined}>
+								<button
+									type="button"
+									tabIndex={-1}
+									disabled={optionDisabled}
+									onMouseDown={(event) => event.preventDefault()}
+									onClick={() => selectOption(city)}>
+									{city.label}
+								</button>
+							</div>
+						);
+					})}
+				</div>
+			) : null}
+		</div>
+	);
+}
+`})}),`
+`,(0,c.jsx)(t.p,{children:`Production primitive дополнительно отвечает за styles, labels, validation и visible focus.`}),`
+`,(0,c.jsx)(t.h3,{id:`возвращаемые-поля-1`,children:`Возвращаемые поля`}),`
+`,(0,c.jsxs)(t.table,{children:[(0,c.jsx)(t.thead,{children:(0,c.jsxs)(t.tr,{children:[(0,c.jsx)(t.th,{children:`Поле`}),(0,c.jsx)(t.th,{children:`Назначение`})]})}),(0,c.jsxs)(t.tbody,{children:[(0,c.jsxs)(t.tr,{children:[(0,c.jsxs)(t.td,{children:[(0,c.jsx)(t.code,{children:`open`}),` / `,(0,c.jsx)(t.code,{children:`activeIndex`})]}),(0,c.jsx)(t.td,{children:`Resolved open и enabled active index.`})]}),(0,c.jsxs)(t.tr,{children:[(0,c.jsx)(t.td,{children:(0,c.jsx)(t.code,{children:`setOpen`})}),(0,c.jsx)(t.td,{children:`Raw setter; обходит disabled/options checks.`})]}),(0,c.jsxs)(t.tr,{children:[(0,c.jsxs)(t.td,{children:[(0,c.jsx)(t.code,{children:`refs`}),` / `,(0,c.jsx)(t.code,{children:`context`})]}),(0,c.jsx)(t.td,{children:`Floating UI integration.`})]}),(0,c.jsxs)(t.tr,{children:[(0,c.jsx)(t.td,{children:(0,c.jsx)(t.code,{children:`floatingStyles`})}),(0,c.jsx)(t.td,{children:`Position styles popup.`})]}),(0,c.jsxs)(t.tr,{children:[(0,c.jsx)(t.td,{children:(0,c.jsx)(t.code,{children:`getFloatingProps`})}),(0,c.jsx)(t.td,{children:`Dismiss и listbox role props.`})]}),(0,c.jsxs)(t.tr,{children:[(0,c.jsxs)(t.td,{children:[(0,c.jsx)(t.code,{children:`setReference`}),` / `,(0,c.jsx)(t.code,{children:`setFloating`})]}),(0,c.jsx)(t.td,{children:`Ref callbacks trigger и popup.`})]}),(0,c.jsxs)(t.tr,{children:[(0,c.jsx)(t.td,{children:(0,c.jsx)(t.code,{children:`setOptionRef`})}),(0,c.jsxs)(t.td,{children:[`Option node для `,(0,c.jsx)(t.code,{children:`scrollIntoView`}),`.`]})]}),(0,c.jsxs)(t.tr,{children:[(0,c.jsx)(t.td,{children:(0,c.jsx)(t.code,{children:`close`})}),(0,c.jsx)(t.td,{children:`Close и optional focus restore.`})]}),(0,c.jsxs)(t.tr,{children:[(0,c.jsxs)(t.td,{children:[(0,c.jsx)(t.code,{children:`openList`}),` / `,(0,c.jsx)(t.code,{children:`openWithIndex`}),` / `,(0,c.jsx)(t.code,{children:`toggleOpen`})]}),(0,c.jsx)(t.td,{children:`Проверяемое открытие/переключение.`})]}),(0,c.jsxs)(t.tr,{children:[(0,c.jsxs)(t.td,{children:[(0,c.jsx)(t.code,{children:`selectOption`}),` / `,(0,c.jsx)(t.code,{children:`selectActiveOption`})]}),(0,c.jsx)(t.td,{children:`Select с disabled check.`})]}),(0,c.jsxs)(t.tr,{children:[(0,c.jsx)(t.td,{children:`keyboard handlers`}),(0,c.jsx)(t.td,{children:`Обработчики reference и popup root.`})]}),(0,c.jsxs)(t.tr,{children:[(0,c.jsxs)(t.td,{children:[(0,c.jsx)(t.code,{children:`getOptionId`}),` / `,(0,c.jsx)(t.code,{children:`getActiveOptionId`})]}),(0,c.jsx)(t.td,{children:`ARIA ids.`})]})]})]}),`
+`,(0,c.jsxs)(t.p,{children:[`Используйте open helpers вместо raw `,(0,c.jsx)(t.code,{children:`setOpen(true)`}),`, который не проверяет `,(0,c.jsx)(t.code,{children:`disabled`}),` и отсутствие options.`]}),`
+`,(0,c.jsx)(t.h3,{id:`keyboard`,children:`Keyboard`}),`
+`,(0,c.jsxs)(t.table,{children:[(0,c.jsx)(t.thead,{children:(0,c.jsxs)(t.tr,{children:[(0,c.jsx)(t.th,{children:`Контекст`}),(0,c.jsx)(t.th,{children:`Клавиши`})]})}),(0,c.jsxs)(t.tbody,{children:[(0,c.jsxs)(t.tr,{children:[(0,c.jsx)(t.td,{children:`Reference`}),(0,c.jsx)(t.td,{children:`ArrowDown/Up открывают или двигают; Home/End; Escape; Tab.`})]}),(0,c.jsxs)(t.tr,{children:[(0,c.jsx)(t.td,{children:`Floating root`}),(0,c.jsx)(t.td,{children:`ArrowDown/Up без wrap; Home/End; Enter/Space select; Escape; Tab.`})]}),(0,c.jsxs)(t.tr,{children:[(0,c.jsx)(t.td,{children:`Вложенный target`}),(0,c.jsx)(t.td,{children:`Hook обрабатывает только Escape.`})]})]})]}),`
+`,(0,c.jsxs)(t.p,{children:[`Disabled options пропускаются. Если options пусты или все disabled, active index равен `,(0,c.jsx)(t.code,{children:`-1`}),`. Typeahead по буквам отсутствует.`]}),`
+`,(0,c.jsx)(t.h3,{id:`positioning-и-размеры`,children:`Positioning и размеры`}),`
+`,(0,c.jsxs)(t.p,{children:[`Defaults: fixed strategy, `,(0,c.jsx)(t.code,{children:`transform: false`}),`, offset `,(0,c.jsx)(t.code,{children:`4`}),`, padding `,(0,c.jsx)(t.code,{children:`8`}),`, `,(0,c.jsx)(t.code,{children:`autoUpdate`}),`. `,(0,c.jsx)(t.code,{children:`"auto"`}),` сравнивает start/end варианты снизу, сверху, слева и справа.`]}),`
+`,(0,c.jsx)(t.p,{children:`Без resolver:`}),`
+`,(0,c.jsx)(t.pre,{children:(0,c.jsx)(t.code,{className:`language-text`,children:`minWidth = referenceWidth + "px"
+maxHeight = max(availableHeight, 120) + "px"
+`})}),`
+`,(0,c.jsxs)(t.p,{children:[(0,c.jsx)(t.code,{children:`FloatingListboxSizeContext`}),` содержит available, viewport и reference width/height. `,(0,c.jsx)(t.code,{children:`FloatingListboxSizeStyle`}),`:`]}),`
+`,(0,c.jsx)(t.pre,{children:(0,c.jsx)(t.code,{className:`language-ts`,children:`type FloatingListboxSizeStyle = {
+	width?: string;
+	minWidth?: string;
+	maxWidth?: string;
+	maxHeight?: string;
+	[customProperty: \`--\${string}\`]: string | undefined;
+};
+`})}),`
+`,(0,c.jsx)(t.p,{children:`Пример resolver:`}),`
+`,(0,c.jsx)(t.pre,{children:(0,c.jsx)(t.code,{className:`language-tsx`,children:`const resolveSize: FloatingListboxSizeResolver = ({ availableWidth, referenceWidth }) => ({
+	width: String(Math.min(Math.max(referenceWidth, 280), availableWidth)) + "px",
+	"--listbox-available-width": String(availableWidth) + "px"
+});
+`})}),`
+`,(0,c.jsxs)(t.p,{children:[`Resolver применяется после defaults. Старые custom properties очищаются. При открытом popup изменение `,(0,c.jsx)(t.code,{children:`options.length`}),` запускает дополнительный `,(0,c.jsx)(t.code,{children:`update()`}),`; изменение содержимого при той же длине — нет.`]}),`
+`,(0,c.jsx)(t.h3,{id:`focus-и-accessibility`,children:`Focus и accessibility`}),`
+`,(0,c.jsxs)(t.ul,{children:[`
+`,(0,c.jsxs)(t.li,{children:[`Popup должен быть focusable, например `,(0,c.jsx)(t.code,{children:`tabIndex={0}`}),`.`]}),`
+`,(0,c.jsxs)(t.li,{children:[(0,c.jsx)(t.code,{children:`getFloatingProps`}),` обязательно spread на popup.`]}),`
+`,(0,c.jsxs)(t.li,{children:[(0,c.jsx)(t.code,{children:`close()`}),` может восстановить focus reference.`]}),`
+`,(0,c.jsxs)(t.li,{children:[(0,c.jsx)(t.code,{children:`context`}),` подходит для `,(0,c.jsx)(t.code,{children:`FloatingFocusManager`}),`.`]}),`
+`,(0,c.jsxs)(t.li,{children:[`Внешний `,(0,c.jsx)(t.code,{children:`setOpen(false)`}),` не проходит через focus restore `,(0,c.jsx)(t.code,{children:`close()`}),`.`]}),`
+`]}),`
+`,(0,c.jsxs)(t.p,{children:[`Consumer обязан настроить trigger semantics, `,(0,c.jsx)(t.code,{children:`aria-expanded`}),`, `,(0,c.jsx)(t.code,{children:`aria-controls`}),`, `,(0,c.jsx)(t.code,{children:`aria-activedescendant`}),`, option ids/refs, `,(0,c.jsx)(t.code,{children:`role="option"`}),`, selected/disabled ARIA, label и visible focus.`]}),`
+`,(0,c.jsx)(t.h2,{id:`runtime-boundaries-и-identity`,children:`Runtime boundaries и identity`}),`
+`,(0,c.jsxs)(t.table,{children:[(0,c.jsx)(t.thead,{children:(0,c.jsxs)(t.tr,{children:[(0,c.jsx)(t.th,{children:`Hook`}),(0,c.jsx)(t.th,{children:`Requirement`})]})}),(0,c.jsxs)(t.tbody,{children:[(0,c.jsxs)(t.tr,{children:[(0,c.jsx)(t.td,{children:`Timer hooks`}),(0,c.jsx)(t.td,{children:`React и timers.`})]}),(0,c.jsxs)(t.tr,{children:[(0,c.jsx)(t.td,{children:`DnD`}),(0,c.jsx)(t.td,{children:`DnD Kit.`})]}),(0,c.jsxs)(t.tr,{children:[(0,c.jsx)(t.td,{children:`Floating listbox`}),(0,c.jsx)(t.td,{children:`DOM и Floating UI.`})]}),(0,c.jsxs)(t.tr,{children:[(0,c.jsx)(t.td,{children:`Search hooks`}),(0,c.jsxs)(t.td,{children:[`TanStack `,(0,c.jsx)(t.code,{children:`RouterProvider`}),`.`]})]}),(0,c.jsxs)(t.tr,{children:[(0,c.jsx)(t.td,{children:`Lazy component`}),(0,c.jsx)(t.td,{children:`Suspense/Error Boundary.`})]}),(0,c.jsxs)(t.tr,{children:[(0,c.jsx)(t.td,{children:`Reference trace`}),(0,c.jsxs)(t.td,{children:[`host-defined `,(0,c.jsx)(t.code,{children:`__DEV__`}),`.`]})]}),(0,c.jsxs)(t.tr,{children:[(0,c.jsx)(t.td,{children:`Browser zoom`}),(0,c.jsxs)(t.td,{children:[(0,c.jsx)(t.code,{children:`window`}),` и `,(0,c.jsx)(t.code,{children:`WheelEvent`}),`.`]})]})]})]}),`
+`,(0,c.jsx)(t.p,{children:`Не переносите hooks в Worker или Node tooling.`}),`
+`,(0,c.jsxs)(t.p,{children:[(0,c.jsx)(t.code,{children:`flush/cancel`}),` timer hooks стабильны; `,(0,c.jsx)(t.code,{children:`call`}),` меняется вместе с delay/interval. `,(0,c.jsx)(t.code,{children:`buildLink`}),` и большинство методов floating listbox создаются заново на render. Не рассчитывайте на identity без contract.`]}),`
+`,(0,c.jsx)(t.h2,{id:`тестирование`,children:`Тестирование`}),`
+`,(0,c.jsxs)(t.p,{children:[`Timer hooks тестируйте fake timers внутри React `,(0,c.jsx)(t.code,{children:`act`}),`:`]}),`
+`,(0,c.jsx)(t.pre,{children:(0,c.jsx)(t.code,{className:`language-tsx`,children:`vi.useFakeTimers();
+
+await act(async () => {
+	vi.advanceTimersByTime(300);
+});
+`})}),`
+`,(0,c.jsx)(t.p,{children:`Проверяйте leading/trailing, last-write-wins, flush, cancel, unmount, новую callback и nullable wrapper.`}),`
+`,(0,c.jsx)(t.p,{children:`Search hooks требуют test Router. Floating listbox требует DOM и проверок ARIA, keyboard, disabled options, dismiss, focus, dynamic options и size resolver.`}),`
+`,(0,c.jsx)(t.p,{children:`Repository test покрывает auto placement, update после изменения количества options и актуальный resolver после rerender.`}),`
+`,(0,c.jsx)(t.h2,{id:`частые-ошибки`,children:`Частые ошибки`}),`
+`,(0,c.jsxs)(t.table,{children:[(0,c.jsx)(t.thead,{children:(0,c.jsxs)(t.tr,{children:[(0,c.jsx)(t.th,{children:`Симптом`}),(0,c.jsx)(t.th,{children:`Причина / решение`})]})}),(0,c.jsxs)(t.tbody,{children:[(0,c.jsxs)(t.tr,{children:[(0,c.jsx)(t.td,{children:`Invalid hook call`}),(0,c.jsx)(t.td,{children:`Вызов вне component/custom hook или условно.`})]}),(0,c.jsxs)(t.tr,{children:[(0,c.jsxs)(t.td,{children:[`Callback не получил `,(0,c.jsx)(t.code,{children:`null`})]}),(0,c.jsxs)(t.td,{children:[`Передайте `,(0,c.jsx)(t.code,{children:`{ value: null }`}),`.`]})]}),(0,c.jsxs)(t.tr,{children:[(0,c.jsx)(t.td,{children:`Throttle ждёт после cancel`}),(0,c.jsx)(t.td,{children:`Cancel не сбрасывает timestamp.`})]}),(0,c.jsxs)(t.tr,{children:[(0,c.jsx)(t.td,{children:`Search allowedKeys не компилируется`}),(0,c.jsx)(t.td,{children:`Фильтруйте result явно до исправления generic.`})]}),(0,c.jsxs)(t.tr,{children:[(0,c.jsx)(t.td,{children:`Escape/outside click не работают`}),(0,c.jsxs)(t.td,{children:[`Не применён `,(0,c.jsx)(t.code,{children:`getFloatingProps`}),`.`]})]}),(0,c.jsxs)(t.tr,{children:[(0,c.jsx)(t.td,{children:`Active option не scroll-ится`}),(0,c.jsxs)(t.td,{children:[`Нет `,(0,c.jsx)(t.code,{children:`setOptionRef`}),`.`]})]}),(0,c.jsxs)(t.tr,{children:[(0,c.jsx)(t.td,{children:`Popup не фокусируется`}),(0,c.jsxs)(t.td,{children:[`Нет `,(0,c.jsx)(t.code,{children:`setFloating`}),` или `,(0,c.jsx)(t.code,{children:`tabIndex`}),`.`]})]}),(0,c.jsxs)(t.tr,{children:[(0,c.jsx)(t.td,{children:`Controlled popup не закрывается`}),(0,c.jsxs)(t.td,{children:[`Нужны и `,(0,c.jsx)(t.code,{children:`open`}),`, и `,(0,c.jsx)(t.code,{children:`onOpenChange`}),`.`]})]}),(0,c.jsxs)(t.tr,{children:[(0,c.jsx)(t.td,{children:`Lazy component remount-ится`}),(0,c.jsx)(t.td,{children:`Стабилизируйте loader/cacheKey.`})]}),(0,c.jsxs)(t.tr,{children:[(0,c.jsx)(t.td,{children:(0,c.jsx)(t.code,{children:`__DEV__ is not defined`})}),(0,c.jsx)(t.td,{children:`Настройте host bundler.`})]})]})]}),`
+`,(0,c.jsx)(t.h2,{id:`api-справочник`,children:`API-справочник`}),`
+`,(0,c.jsxs)(t.table,{children:[(0,c.jsx)(t.thead,{children:(0,c.jsxs)(t.tr,{children:[(0,c.jsx)(t.th,{children:`Экспорт`}),(0,c.jsx)(t.th,{children:`Contract`})]})}),(0,c.jsxs)(t.tbody,{children:[(0,c.jsxs)(t.tr,{children:[(0,c.jsx)(t.td,{children:(0,c.jsx)(t.code,{children:`useBlockBrowserZoom`})}),(0,c.jsxs)(t.td,{children:[`Global `,(0,c.jsx)(t.code,{children:`Ctrl + wheel`}),` prevention.`]})]}),(0,c.jsxs)(t.tr,{children:[(0,c.jsx)(t.td,{children:(0,c.jsx)(t.code,{children:`useDebounce`})}),(0,c.jsx)(t.td,{children:`Debounced value.`})]}),(0,c.jsxs)(t.tr,{children:[(0,c.jsx)(t.td,{children:(0,c.jsx)(t.code,{children:`useDebouncedCallback`})}),(0,c.jsx)(t.td,{children:`Trailing debounce.`})]}),(0,c.jsxs)(t.tr,{children:[(0,c.jsx)(t.td,{children:(0,c.jsx)(t.code,{children:`useDndSortableSensors`})}),(0,c.jsx)(t.td,{children:`Pointer/Keyboard sensors.`})]}),(0,c.jsxs)(t.tr,{children:[(0,c.jsx)(t.td,{children:(0,c.jsx)(t.code,{children:`useFloatingListbox`})}),(0,c.jsx)(t.td,{children:`Headless listbox.`})]}),(0,c.jsxs)(t.tr,{children:[(0,c.jsx)(t.td,{children:(0,c.jsx)(t.code,{children:`useLazyComponent`})}),(0,c.jsx)(t.td,{children:`Memoized lazy factory.`})]}),(0,c.jsxs)(t.tr,{children:[(0,c.jsx)(t.td,{children:(0,c.jsx)(t.code,{children:`useReferenceTrace`})}),(0,c.jsx)(t.td,{children:`Reference diagnostics.`})]}),(0,c.jsxs)(t.tr,{children:[(0,c.jsx)(t.td,{children:(0,c.jsx)(t.code,{children:`useSearchLink`})}),(0,c.jsx)(t.td,{children:`Link builder.`})]}),(0,c.jsxs)(t.tr,{children:[(0,c.jsx)(t.td,{children:(0,c.jsx)(t.code,{children:`useSearchParams`})}),(0,c.jsx)(t.td,{children:`Search read/replace navigation.`})]}),(0,c.jsxs)(t.tr,{children:[(0,c.jsx)(t.td,{children:(0,c.jsx)(t.code,{children:`useThrottledCallback`})}),(0,c.jsx)(t.td,{children:`Leading/trailing throttle.`})]}),(0,c.jsxs)(t.tr,{children:[(0,c.jsx)(t.td,{children:(0,c.jsx)(t.code,{children:`FloatingListboxPlacementStrategy`})}),(0,c.jsxs)(t.td,{children:[(0,c.jsx)(t.code,{children:`"flip" | "auto"`}),`.`]})]}),(0,c.jsxs)(t.tr,{children:[(0,c.jsx)(t.td,{children:(0,c.jsx)(t.code,{children:`FloatingListboxSizeContext`})}),(0,c.jsx)(t.td,{children:`Геометрия popup/reference/viewport.`})]}),(0,c.jsxs)(t.tr,{children:[(0,c.jsx)(t.td,{children:(0,c.jsx)(t.code,{children:`FloatingListboxSizeResolver`})}),(0,c.jsx)(t.td,{children:`Context → style.`})]}),(0,c.jsxs)(t.tr,{children:[(0,c.jsx)(t.td,{children:(0,c.jsx)(t.code,{children:`FloatingListboxSizeStyle`})}),(0,c.jsx)(t.td,{children:`Size fields и CSS properties.`})]}),(0,c.jsxs)(t.tr,{children:[(0,c.jsx)(t.td,{children:(0,c.jsx)(t.code,{children:`ThrottledCallback`})}),(0,c.jsxs)(t.td,{children:[(0,c.jsx)(t.code,{children:`call/flush/cancel`}),`.`]})]}),(0,c.jsxs)(t.tr,{children:[(0,c.jsx)(t.td,{children:(0,c.jsx)(t.code,{children:`UseDndSortableSensorsOptions`})}),(0,c.jsxs)(t.td,{children:[(0,c.jsx)(t.code,{children:`activationDistance`}),`.`]})]})]})]}),`
+`,(0,c.jsx)(t.h2,{id:`что-модуль-не-делает`,children:`Что модуль не делает`}),`
+`,(0,c.jsxs)(t.ul,{children:[`
+`,(0,c.jsx)(t.li,{children:`не выполняет requests и не хранит backend state;`}),`
+`,(0,c.jsx)(t.li,{children:`не создаёт route search schema;`}),`
+`,(0,c.jsx)(t.li,{children:`не рендерит готовый select или DnD UI;`}),`
+`,(0,c.jsx)(t.li,{children:`не валидирует intervals/distance;`}),`
+`,(0,c.jsx)(t.li,{children:`не гарантирует accessibility без JSX consumer-а;`}),`
+`,(0,c.jsx)(t.li,{children:`не экспортирует внутренние search types.`}),`
+`]}),`
+`,(0,c.jsx)(t.h2,{id:`связанные-документы`,children:`Связанные документы`}),`
+`,(0,c.jsxs)(t.ul,{children:[`
+`,(0,c.jsx)(t.li,{children:(0,c.jsx)(t.a,{href:`../../README.md`,children:`Обзор пакета`})}),`
+`,(0,c.jsx)(t.li,{children:(0,c.jsx)(t.a,{href:`../dom/README.mdx`,children:`DOM, focus и overlay helpers`})}),`
+`,(0,c.jsx)(t.li,{children:(0,c.jsx)(t.a,{href:`../copy/README.mdx`,children:`Clipboard hooks`})}),`
+`,(0,c.jsx)(t.li,{children:(0,c.jsx)(t.a,{href:`../utils/index.ts`,children:`Public utilities`})}),`
+`]})]})}function s(e={}){let{wrapper:t}={...n(),...e.components};return t?(0,c.jsx)(t,{...e,children:(0,c.jsx)(o,{...e})}):o(e)}var c;function l(){return(l=e((()=>{c=t(),r(),a()})))()}l();export{s as default};