@ryuzaki13/react-foundation-ui 1.8.5 → 1.8.7

package/storybook-static/assets/README-Cc-guFb0.js

@@ -0,0 +1,1487 @@
+import{n as e}from"./rolldown-runtime-DkW27tQK.js";import{n as t}from"./iframe-CViB2sFm.js";import{i as n,r}from"./react-Bl2r1tuC.js";import{l as i,m as a}from"./blocks-B8F5vBhs.js";function o(e){let t={a:`a`,code:`code`,h1:`h1`,h2:`h2`,h3:`h3`,h4:`h4`,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/DOM`}),`
+`,(0,c.jsxs)(t.h1,{id:`browser-dom-и-focus-helpers-через-ryuzaki13react-foundation-libdom`,children:[`Browser DOM и focus helpers через `,(0,c.jsx)(t.code,{children:`@ryuzaki13/react-foundation-lib/dom`})]}),`
+`,(0,c.jsxs)(t.p,{children:[`Модуль `,(0,c.jsx)(t.code,{children:`dom`}),` содержит небольшие browser helpers и React hooks для типовых инфраструктурных задач:`]}),`
+`,(0,c.jsxs)(t.ul,{children:[`
+`,(0,c.jsxs)(t.li,{children:[`скачать `,(0,c.jsx)(t.code,{children:`Blob`}),`, JSON или уже созданный object URL;`]}),`
+`,(0,c.jsx)(t.li,{children:`получить общий DOM-контейнер для React portal;`}),`
+`,(0,c.jsxs)(t.li,{children:[`отреагировать на `,(0,c.jsx)(t.code,{children:`mousedown`}),` за пределами одного или нескольких элементов;`]}),`
+`,(0,c.jsxs)(t.li,{children:[`закрыть активный overlay по `,(0,c.jsx)(t.code,{children:`Escape`}),`;`]}),`
+`,(0,c.jsxs)(t.li,{children:[`установить начальный фокус, зациклить `,(0,c.jsx)(t.code,{children:`Tab`}),` и восстановить прежний фокус;`]}),`
+`,(0,c.jsxs)(t.li,{children:[`узнать высоту элемента через `,(0,c.jsx)(t.code,{children:`ResizeObserver`}),`;`]}),`
+`,(0,c.jsx)(t.li,{children:`узнать, пересекается ли элемент с viewport или другим root;`}),`
+`,(0,c.jsx)(t.li,{children:`определить наличие touch/coarse-pointer возможностей.`}),`
+`]}),`
+`,(0,c.jsx)(t.p,{children:`Модуль является низкоуровневым browser foundation-слоем. Он не создаёт готовые кнопки, dialog, modal, popover, tooltip или download UI. Визуальный компонент по-прежнему отвечает за семантический HTML, ARIA, стили, анимацию, стек overlay, сообщения об ошибках и пользовательский сценарий.`}),`
+`,(0,c.jsx)(t.p,{children:`README рассчитан на разработчика, который использует опубликованный пакет без прямого доступа к исходному коду. Здесь объясняются базовые понятия DOM и React, все публичные функции, точный lifecycle, defaults, cleanup, ограничения доступности, тестирование и частые ошибки.`}),`
+`,(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:`#%D0%BD%D0%B0%D0%B7%D0%BD%D0%B0%D1%87%D0%B5%D0%BD%D0%B8%D0%B5-%D0%B8-%D0%B3%D1%80%D0%B0%D0%BD%D0%B8%D1%86%D1%8B-%D0%BC%D0%BE%D0%B4%D1%83%D0%BB%D1%8F`,children:`Назначение и границы модуля`})}),`
+`,(0,c.jsx)(t.li,{children:(0,c.jsx)(t.a,{href:`#%D1%83%D1%81%D1%82%D0%B0%D0%BD%D0%BE%D0%B2%D0%BA%D0%B0-%D0%B8-%D0%B8%D0%BC%D0%BF%D0%BE%D1%80%D1%82`,children:`Установка и импорт`})}),`
+`,(0,c.jsx)(t.li,{children:(0,c.jsx)(t.a,{href:`#runtime-%D0%B8-browser-boundary`,children:`Runtime и browser boundary`})}),`
+`,(0,c.jsx)(t.li,{children:(0,c.jsx)(t.a,{href:`#%D0%BC%D0%B8%D0%BD%D0%B8%D0%BC%D0%B0%D0%BB%D1%8C%D0%BD%D1%8B%D0%B5-%D0%BF%D0%BE%D0%BD%D1%8F%D1%82%D0%B8%D1%8F`,children:`Минимальные понятия`})}),`
+`,(0,c.jsx)(t.li,{children:(0,c.jsx)(t.a,{href:`#%D0%BA%D0%B0%D0%BA-%D0%B2%D1%8B%D0%B1%D1%80%D0%B0%D1%82%D1%8C-api`,children:`Как выбрать API`})}),`
+`,(0,c.jsx)(t.li,{children:(0,c.jsx)(t.a,{href:`#%D0%B1%D1%8B%D1%81%D1%82%D1%80%D1%8B%D0%B9-%D1%81%D1%82%D0%B0%D1%80%D1%82`,children:`Быстрый старт`})}),`
+`,(0,c.jsx)(t.li,{children:(0,c.jsx)(t.a,{href:`#%D1%81%D0%BA%D0%B0%D1%87%D0%B8%D0%B2%D0%B0%D0%BD%D0%B8%D0%B5-%D1%84%D0%B0%D0%B9%D0%BB%D0%BE%D0%B2`,children:`Скачивание файлов`})}),`
+`,(0,c.jsx)(t.li,{children:(0,c.jsx)(t.a,{href:`#getorcreateportalroot`,children:(0,c.jsx)(t.code,{children:`getOrCreatePortalRoot`})})}),`
+`,(0,c.jsx)(t.li,{children:(0,c.jsx)(t.a,{href:`#useclickoutside`,children:(0,c.jsx)(t.code,{children:`useClickOutside`})})}),`
+`,(0,c.jsx)(t.li,{children:(0,c.jsx)(t.a,{href:`#useescapedismiss`,children:(0,c.jsx)(t.code,{children:`useEscapeDismiss`})})}),`
+`,(0,c.jsx)(t.li,{children:(0,c.jsx)(t.a,{href:`#useelementheightobserver`,children:(0,c.jsx)(t.code,{children:`useElementHeightObserver`})})}),`
+`,(0,c.jsx)(t.li,{children:(0,c.jsx)(t.a,{href:`#useintersectionobserver`,children:(0,c.jsx)(t.code,{children:`useIntersectionObserver`})})}),`
+`,(0,c.jsx)(t.li,{children:(0,c.jsx)(t.a,{href:`#useistouchdevice`,children:(0,c.jsx)(t.code,{children:`useIsTouchDevice`})})}),`
+`,(0,c.jsx)(t.li,{children:(0,c.jsx)(t.a,{href:`#useoverlayfocus`,children:(0,c.jsx)(t.code,{children:`useOverlayFocus`})})}),`
+`,(0,c.jsx)(t.li,{children:(0,c.jsx)(t.a,{href:`#usefocustrap`,children:(0,c.jsx)(t.code,{children:`useFocusTrap`})})}),`
+`,(0,c.jsx)(t.li,{children:(0,c.jsx)(t.a,{href:`#%D1%81%D0%B1%D0%BE%D1%80%D0%BA%D0%B0-%D0%B4%D0%BE%D1%81%D1%82%D1%83%D0%BF%D0%BD%D0%BE%D0%B3%D0%BE-dialog`,children:`Сборка доступного dialog`})}),`
+`,(0,c.jsx)(t.li,{children:(0,c.jsx)(t.a,{href:`#%D0%BA%D0%BE%D0%BC%D0%BF%D0%BE%D0%B7%D0%B8%D1%86%D0%B8%D1%8F-overlay-hooks`,children:`Композиция overlay hooks`})}),`
+`,(0,c.jsx)(t.li,{children:(0,c.jsx)(t.a,{href:`#ssr-strict-mode-%D0%B8-lifecycle`,children:`SSR, Strict Mode и lifecycle`})}),`
+`,(0,c.jsx)(t.li,{children:(0,c.jsx)(t.a,{href:`#%D0%BF%D1%80%D0%BE%D0%B8%D0%B7%D0%B2%D0%BE%D0%B4%D0%B8%D1%82%D0%B5%D0%BB%D1%8C%D0%BD%D0%BE%D1%81%D1%82%D1%8C`,children:`Производительность`})}),`
+`,(0,c.jsx)(t.li,{children:(0,c.jsx)(t.a,{href:`#%D1%82%D0%B5%D1%81%D1%82%D0%B8%D1%80%D0%BE%D0%B2%D0%B0%D0%BD%D0%B8%D0%B5`,children:`Тестирование`})}),`
+`,(0,c.jsx)(t.li,{children:(0,c.jsx)(t.a,{href:`#%D0%BE%D0%B3%D1%80%D0%B0%D0%BD%D0%B8%D1%87%D0%B5%D0%BD%D0%B8%D1%8F-%D0%B8-%D1%87%D0%B0%D1%81%D1%82%D1%8B%D0%B5-%D0%BE%D1%88%D0%B8%D0%B1%D0%BA%D0%B8`,children:`Ограничения и частые ошибки`})}),`
+`,(0,c.jsx)(t.li,{children:(0,c.jsx)(t.a,{href:`#%D0%BA%D1%80%D0%B0%D1%82%D0%BA%D0%B8%D0%B9-%D1%81%D0%BF%D1%80%D0%B0%D0%B2%D0%BE%D1%87%D0%BD%D0%B8%D0%BA-api`,children:`Краткий справочник API`})}),`
+`,(0,c.jsx)(t.li,{children:(0,c.jsx)(t.a,{href:`#%D0%B2%D0%BE%D0%BF%D1%80%D0%BE%D1%81%D1%8B-%D0%B8-%D0%BE%D1%82%D0%B2%D0%B5%D1%82%D1%8B`,children:`Вопросы и ответы`})}),`
+`]}),`
+`,(0,c.jsx)(t.h2,{id:`назначение-и-границы-модуля`,children:`Назначение и границы модуля`}),`
+`,(0,c.jsxs)(t.h3,{id:`что-делает-dom`,children:[`Что делает `,(0,c.jsx)(t.code,{children:`dom`})]}),`
+`,(0,c.jsxs)(t.ul,{children:[`
+`,(0,c.jsxs)(t.li,{children:[`создаёт браузерную загрузку через временный `,(0,c.jsx)(t.code,{children:`<a download>`}),`;`]}),`
+`,(0,c.jsx)(t.li,{children:`берёт на себя создание и последующее освобождение object URL в download-сценариях;`}),`
+`,(0,c.jsx)(t.li,{children:`сериализует JSON с отступом в два пробела;`}),`
+`,(0,c.jsxs)(t.li,{children:[`создаёт или переиспользует `,(0,c.jsx)(t.code,{children:`HTMLElement`}),` в `,(0,c.jsx)(t.code,{children:`document.body`}),`;`]}),`
+`,(0,c.jsxs)(t.li,{children:[`подписывает React-компонент на глобальные `,(0,c.jsx)(t.code,{children:`mousedown`}),`, `,(0,c.jsx)(t.code,{children:`keydown`}),` и `,(0,c.jsx)(t.code,{children:`resize`}),`;`]}),`
+`,(0,c.jsxs)(t.li,{children:[`подключает `,(0,c.jsx)(t.code,{children:`ResizeObserver`}),` и `,(0,c.jsx)(t.code,{children:`IntersectionObserver`}),` с cleanup;`]}),`
+`,(0,c.jsx)(t.li,{children:`управляет начальными и возвратными переходами focus;`}),`
+`,(0,c.jsx)(t.li,{children:`предоставляет простую focus trap для modal-like overlay.`}),`
+`]}),`
+`,(0,c.jsx)(t.h3,{id:`чего-модуль-не-делает`,children:`Чего модуль не делает`}),`
+`,(0,c.jsxs)(t.ul,{children:[`
+`,(0,c.jsx)(t.li,{children:`не получает файл по HTTP/OData;`}),`
+`,(0,c.jsxs)(t.li,{children:[`не декодирует base64 в `,(0,c.jsx)(t.code,{children:`Blob`}),`;`]}),`
+`,(0,c.jsxs)(t.li,{children:[`не читает пользовательский `,(0,c.jsx)(t.code,{children:`File`}),`;`]}),`
+`,(0,c.jsx)(t.li,{children:`не проверяет MIME или содержимое скачиваемого файла;`}),`
+`,(0,c.jsx)(t.li,{children:`не показывает progress, toast или ошибку скачивания;`}),`
+`,(0,c.jsx)(t.li,{children:`не создаёт React portal самостоятельно;`}),`
+`,(0,c.jsx)(t.li,{children:`не удаляет portal root после использования;`}),`
+`,(0,c.jsx)(t.li,{children:`не реализует полноценный dialog/modal/popover;`}),`
+`,(0,c.jsxs)(t.li,{children:[`не назначает `,(0,c.jsx)(t.code,{children:`role`}),`, `,(0,c.jsx)(t.code,{children:`aria-modal`}),`, `,(0,c.jsx)(t.code,{children:`aria-labelledby`}),` или `,(0,c.jsx)(t.code,{children:`aria-describedby`}),`;`]}),`
+`,(0,c.jsx)(t.li,{children:`не блокирует прокрутку страницы;`}),`
+`,(0,c.jsxs)(t.li,{children:[`не делает фон `,(0,c.jsx)(t.code,{children:`inert`}),`;`]}),`
+`,(0,c.jsx)(t.li,{children:`не управляет стеком вложенных overlay;`}),`
+`,(0,c.jsx)(t.li,{children:`не блокирует программный уход фокуса;`}),`
+`,(0,c.jsx)(t.li,{children:`не предоставляет polyfill для observer APIs;`}),`
+`,(0,c.jsx)(t.li,{children:`не определяет фактический текущий способ ввода пользователя;`}),`
+`,(0,c.jsx)(t.li,{children:`не заменяет CSS media queries.`}),`
+`]}),`
+`,(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.jsxs)(t.td,{children:[`Base64/data URL → `,(0,c.jsx)(t.code,{children:`Blob`})]}),(0,c.jsx)(t.td,{children:(0,c.jsx)(t.code,{children:`@ryuzaki13/react-foundation-lib/binary`})})]}),(0,c.jsxs)(t.tr,{children:[(0,c.jsx)(t.td,{children:`Чтение выбранного пользователем файла`}),(0,c.jsx)(t.td,{children:(0,c.jsx)(t.code,{children:`@ryuzaki13/react-foundation-lib/file`})})]}),(0,c.jsxs)(t.tr,{children:[(0,c.jsxs)(t.td,{children:[`Скачивание готового `,(0,c.jsx)(t.code,{children:`Blob`})]}),(0,c.jsx)(t.td,{children:(0,c.jsx)(t.code,{children:`@ryuzaki13/react-foundation-lib/dom`})})]}),(0,c.jsxs)(t.tr,{children:[(0,c.jsx)(t.td,{children:`Готовый dialog/modal/popover`}),(0,c.jsx)(t.td,{children:`UI-пакет или UI-слой приложения`})]}),(0,c.jsxs)(t.tr,{children:[(0,c.jsx)(t.td,{children:`Низкоуровневый focus/outside/Escape contract`}),(0,c.jsx)(t.td,{children:(0,c.jsx)(t.code,{children:`@ryuzaki13/react-foundation-lib/dom`})})]}),(0,c.jsxs)(t.tr,{children:[(0,c.jsx)(t.td,{children:`Responsive styling`}),(0,c.jsxs)(t.td,{children:[`CSS и `,(0,c.jsx)(t.code,{children:`@ryuzaki13/react-foundation-lib/media`})]})]}),(0,c.jsxs)(t.tr,{children:[(0,c.jsx)(t.td,{children:`Копирование plain text в clipboard`}),(0,c.jsx)(t.td,{children:(0,c.jsx)(t.code,{children:`@ryuzaki13/react-foundation-lib/copy`})})]})]})]}),`
+`,(0,c.jsxs)(t.p,{children:[`Если приложению нужен готовый UI primitive, сначала ищите его в `,(0,c.jsx)(t.code,{children:`@ryuzaki13/react-foundation-ui`}),`. Модуль `,(0,c.jsx)(t.code,{children:`dom`}),` нужен авторам primitives и для специальных browser-сценариев, а не для повторной сборки локальных modal/dialog в каждом feature.`]}),`
+`,(0,c.jsx)(t.h2,{id:`установка-и-импорт`,children:`Установка и импорт`}),`
+`,(0,c.jsx)(t.p,{children:`Установите пакет:`}),`
+`,(0,c.jsx)(t.pre,{children:(0,c.jsx)(t.code,{className:`language-bash`,children:`npm install @ryuzaki13/react-foundation-lib
+`})}),`
+`,(0,c.jsx)(t.p,{children:`Entrypoint экспортирует React hooks, поэтому host-приложение должно предоставить совместимые peer-зависимости:`}),`
+`,(0,c.jsx)(t.pre,{children:(0,c.jsx)(t.code,{className:`language-bash`,children:`npm install react react-dom
+`})}),`
+`,(0,c.jsxs)(t.p,{children:[`Текущий контракт пакета требует React `,(0,c.jsx)(t.code,{children:`>=19.2.0 <20.0.0`}),`.`]}),`
+`,(0,c.jsxs)(t.p,{children:[`Импортируйте API только из опубликованного subpath `,(0,c.jsx)(t.code,{children:`/dom`}),`:`]}),`
+`,(0,c.jsx)(t.pre,{children:(0,c.jsx)(t.code,{className:`language-ts`,children:`import {
+	downloadFileFromBlob,
+	downloadFileFromJson,
+	downloadFileFromObjectURL,
+	getOrCreatePortalRoot,
+	useClickOutside,
+	useElementHeightObserver,
+	useEscapeDismiss,
+	useFocusTrap,
+	useIntersectionObserver,
+	useIsTouchDevice,
+	useOverlayFocus
+} from "@ryuzaki13/react-foundation-lib/dom";
+
+import type { UseOverlayFocusOptions } from "@ryuzaki13/react-foundation-lib/dom";
+`})}),`
+`,(0,c.jsx)(t.p,{children:`Корневой импорт пакета не поддерживается:`}),`
+`,(0,c.jsx)(t.pre,{children:(0,c.jsx)(t.code,{className:`language-ts`,children:`// Неправильно.
+import { useOverlayFocus } from "@ryuzaki13/react-foundation-lib";
+
+// Правильно.
+import { useOverlayFocus } from "@ryuzaki13/react-foundation-lib/dom";
+`})}),`
+`,(0,c.jsx)(t.p,{children:`Модуль поставляется как ESM.`}),`
+`,(0,c.jsx)(t.h2,{id:`runtime-и-browser-boundary`,children:`Runtime и browser boundary`}),`
+`,(0,c.jsx)(t.p,{children:`Почти весь модуль опирается на Web APIs:`}),`
+`,(0,c.jsxs)(t.ul,{children:[`
+`,(0,c.jsxs)(t.li,{children:[(0,c.jsx)(t.code,{children:`window`}),`;`]}),`
+`,(0,c.jsxs)(t.li,{children:[(0,c.jsx)(t.code,{children:`document`}),`;`]}),`
+`,(0,c.jsxs)(t.li,{children:[(0,c.jsx)(t.code,{children:`HTMLElement`}),` и `,(0,c.jsx)(t.code,{children:`Node`}),`;`]}),`
+`,(0,c.jsxs)(t.li,{children:[(0,c.jsx)(t.code,{children:`Blob`}),`;`]}),`
+`,(0,c.jsxs)(t.li,{children:[(0,c.jsx)(t.code,{children:`URL.createObjectURL`}),` и `,(0,c.jsx)(t.code,{children:`URL.revokeObjectURL`}),`;`]}),`
+`,(0,c.jsxs)(t.li,{children:[(0,c.jsx)(t.code,{children:`ResizeObserver`}),`;`]}),`
+`,(0,c.jsxs)(t.li,{children:[(0,c.jsx)(t.code,{children:`IntersectionObserver`}),`;`]}),`
+`,(0,c.jsxs)(t.li,{children:[(0,c.jsx)(t.code,{children:`matchMedia`}),`;`]}),`
+`,(0,c.jsx)(t.li,{children:`focus и keyboard events;`}),`
+`,(0,c.jsxs)(t.li,{children:[(0,c.jsx)(t.code,{children:`requestAnimationFrame`}),`.`]}),`
+`]}),`
+`,(0,c.jsxs)(t.p,{children:[(0,c.jsx)(t.code,{children:`getOrCreatePortalRoot`}),` имеет явную проверку отсутствующего `,(0,c.jsx)(t.code,{children:`document`}),` и возвращает `,(0,c.jsx)(t.code,{children:`null`}),`. Остальные helpers не превращаются в универсальный server API: вызывайте их на browser boundary.`]}),`
+`,(0,c.jsx)(t.p,{children:`React effects не выполняются во время обычного server render, но это не означает, что любой импорт или вызов автоматически безопасен в любой SSR/test среде. Для Node-only кода используйте соответствующий server API, а для тестов предоставляйте DOM и нужные mocks.`}),`
+`,(0,c.jsx)(t.h2,{id:`минимальные-понятия`,children:`Минимальные понятия`}),`
+`,(0,c.jsx)(t.h3,{id:`dom`,children:`DOM`}),`
+`,(0,c.jsx)(t.p,{children:`DOM — объектное представление HTML-документа. Браузер превращает разметку:`}),`
+`,(0,c.jsx)(t.pre,{children:(0,c.jsx)(t.code,{className:`language-html`,children:`<button type="button">Сохранить</button>
+`})}),`
+`,(0,c.jsxs)(t.p,{children:[`в объект `,(0,c.jsx)(t.code,{children:`HTMLButtonElement`}),`, у которого есть свойства, методы, focus и события.`]}),`
+`,(0,c.jsxs)(t.h3,{id:`window-и-document`,children:[(0,c.jsx)(t.code,{children:`window`}),` и `,(0,c.jsx)(t.code,{children:`document`})]}),`
+`,(0,c.jsxs)(t.ul,{children:[`
+`,(0,c.jsxs)(t.li,{children:[(0,c.jsx)(t.code,{children:`window`}),` представляет браузерное окно и глобальные browser APIs;`]}),`
+`,(0,c.jsxs)(t.li,{children:[(0,c.jsx)(t.code,{children:`document`}),` представляет текущий HTML-документ;`]}),`
+`,(0,c.jsxs)(t.li,{children:[(0,c.jsx)(t.code,{children:`document.body`}),` — элемент `,(0,c.jsx)(t.code,{children:`<body>`}),`.`]}),`
+`]}),`
+`,(0,c.jsx)(t.p,{children:`Эти объекты отсутствуют в обычном Node.js process и могут быть частично реализованы в тестовой DOM-среде.`}),`
+`,(0,c.jsx)(t.h3,{id:`react-ref`,children:`React ref`}),`
+`,(0,c.jsx)(t.p,{children:`Ref хранит ссылку на реальный DOM-элемент:`}),`
+`,(0,c.jsx)(t.pre,{children:(0,c.jsx)(t.code,{className:`language-tsx`,children:`const buttonRef = useRef<HTMLButtonElement>(null);
+
+return <button ref={buttonRef}>Кнопка</button>;
+`})}),`
+`,(0,c.jsxs)(t.p,{children:[`До commit/mount `,(0,c.jsx)(t.code,{children:`buttonRef.current`}),` равен `,(0,c.jsx)(t.code,{children:`null`}),`. После commit React помещает туда `,(0,c.jsx)(t.code,{children:`HTMLButtonElement`}),`. Читайте ref в event handler или effect, а не во время render.`]}),`
+`,(0,c.jsx)(t.h3,{id:`effect-и-cleanup`,children:`Effect и cleanup`}),`
+`,(0,c.jsx)(t.p,{children:`Effect синхронизирует компонент с внешней системой:`}),`
+`,(0,c.jsx)(t.pre,{children:(0,c.jsx)(t.code,{className:`language-tsx`,children:`useEffect(() => {
+	document.addEventListener("example", handler);
+
+	return () => {
+		document.removeEventListener("example", handler);
+	};
+}, [handler]);
+`})}),`
+`,(0,c.jsx)(t.p,{children:`Возвращаемая функция называется cleanup. React вызывает её перед повторной подпиской и при unmount. Hooks этого модуля сами очищают свои listeners и observers, если component lifecycle дошёл до cleanup.`}),`
+`,(0,c.jsx)(t.h3,{id:`event-bubbling-и-capture`,children:`Event bubbling и capture`}),`
+`,(0,c.jsx)(t.p,{children:`DOM-событие проходит несколько фаз:`}),`
+`,(0,c.jsxs)(t.ol,{children:[`
+`,(0,c.jsx)(t.li,{children:`capture — от документа к target;`}),`
+`,(0,c.jsx)(t.li,{children:`target;`}),`
+`,(0,c.jsx)(t.li,{children:`bubbling — от target обратно к документу.`}),`
+`]}),`
+`,(0,c.jsxs)(t.p,{children:[(0,c.jsx)(t.code,{children:`useEscapeDismiss`}),` слушает `,(0,c.jsx)(t.code,{children:`keydown`}),` в capture-фазе. `,(0,c.jsx)(t.code,{children:`useClickOutside`}),` слушает `,(0,c.jsx)(t.code,{children:`mousedown`}),` в обычной bubbling-фазе.`]}),`
+`,(0,c.jsx)(t.h3,{id:`portal`,children:`Portal`}),`
+`,(0,c.jsx)(t.p,{children:`React portal рендерит subtree в другом месте DOM:`}),`
+`,(0,c.jsx)(t.pre,{children:(0,c.jsx)(t.code,{className:`language-tsx`,children:`createPortal(<Dialog />, portalRoot);
+`})}),`
+`,(0,c.jsxs)(t.p,{children:[`Компонент остаётся частью того же React tree, но его DOM может находиться прямо в `,(0,c.jsx)(t.code,{children:`document.body`}),`, вне layout-контейнера приложения.`]}),`
+`,(0,c.jsx)(t.h3,{id:`blob`,children:(0,c.jsx)(t.code,{children:`Blob`})}),`
+`,(0,c.jsxs)(t.p,{children:[(0,c.jsx)(t.code,{children:`Blob`}),` хранит последовательность байтов и MIME:`]}),`
+`,(0,c.jsx)(t.pre,{children:(0,c.jsx)(t.code,{className:`language-ts`,children:`const blob = new Blob(["Пример"], {
+	type: "text/plain;charset=utf-8"
+});
+`})}),`
+`,(0,c.jsx)(t.p,{children:`Blob сам по себе не является URL. Для browser download из него создаётся временный object URL.`}),`
+`,(0,c.jsx)(t.h3,{id:`object-url`,children:`Object URL`}),`
+`,(0,c.jsxs)(t.p,{children:[`Object URL — временная browser-ссылка на `,(0,c.jsx)(t.code,{children:`Blob`}),`:`]}),`
+`,(0,c.jsx)(t.pre,{children:(0,c.jsx)(t.code,{className:`language-ts`,children:`const objectUrl = URL.createObjectURL(blob);
+`})}),`
+`,(0,c.jsx)(t.p,{children:`Примерный вид:`}),`
+`,(0,c.jsx)(t.pre,{children:(0,c.jsx)(t.code,{className:`language-text`,children:`blob:https://example.test/...
+`})}),`
+`,(0,c.jsxs)(t.p,{children:[`Object URL удерживает ресурс в памяти, пока не будет вызван `,(0,c.jsx)(t.code,{children:`URL.revokeObjectURL`}),` либо пока документ не будет выгружен.`]}),`
+`,(0,c.jsx)(t.h3,{id:`observer`,children:`Observer`}),`
+`,(0,c.jsxs)(t.p,{children:[(0,c.jsx)(t.code,{children:`ResizeObserver`}),` сообщает об изменении размера элемента. `,(0,c.jsx)(t.code,{children:`IntersectionObserver`}),` сообщает, пересекается ли элемент с viewport или заданным root.`]}),`
+`,(0,c.jsx)(t.p,{children:`Оба API работают асинхронно: первое значение hook может быть default, а реальное состояние приходит позднее через callback.`}),`
+`,(0,c.jsx)(t.h3,{id:`focus`,children:`Focus`}),`
+`,(0,c.jsxs)(t.p,{children:[`Focus определяет, какой элемент получает keyboard input. `,(0,c.jsx)(t.code,{children:`document.activeElement`}),` показывает текущий focus target.`]}),`
+`,(0,c.jsxs)(t.p,{children:[`Кнопки, ссылки и form controls обычно focusable сами. Обычный `,(0,c.jsx)(t.code,{children:`<div>`}),` не становится focusable автоматически. Для программного focus контейнеру часто нужен:`]}),`
+`,(0,c.jsx)(t.pre,{children:(0,c.jsx)(t.code,{className:`language-tsx`,children:`<div tabIndex={-1}>...</div>
+`})}),`
+`,(0,c.jsxs)(t.p,{children:[(0,c.jsx)(t.code,{children:`tabIndex={-1}`}),` разрешает `,(0,c.jsx)(t.code,{children:`.focus()`}),`, но не добавляет контейнер в обычный Tab-порядок.`]}),`
+`,(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:`API`})]})}),(0,c.jsxs)(t.tbody,{children:[(0,c.jsxs)(t.tr,{children:[(0,c.jsx)(t.td,{children:`Скачать уже созданный object URL и сразу передать ownership helper-у`}),(0,c.jsx)(t.td,{children:(0,c.jsx)(t.code,{children:`downloadFileFromObjectURL`})})]}),(0,c.jsxs)(t.tr,{children:[(0,c.jsxs)(t.td,{children:[`Скачать готовый `,(0,c.jsx)(t.code,{children:`Blob`})]}),(0,c.jsx)(t.td,{children:(0,c.jsx)(t.code,{children:`downloadFileFromBlob`})})]}),(0,c.jsxs)(t.tr,{children:[(0,c.jsx)(t.td,{children:`Сериализовать значение в readable JSON и скачать`}),(0,c.jsx)(t.td,{children:(0,c.jsx)(t.code,{children:`downloadFileFromJson`})})]}),(0,c.jsxs)(t.tr,{children:[(0,c.jsxs)(t.td,{children:[`Получить общий container для `,(0,c.jsx)(t.code,{children:`createPortal`})]}),(0,c.jsx)(t.td,{children:(0,c.jsx)(t.code,{children:`getOrCreatePortalRoot`})})]}),(0,c.jsxs)(t.tr,{children:[(0,c.jsxs)(t.td,{children:[`Закрыть UI по `,(0,c.jsx)(t.code,{children:`mousedown`}),` вне одного элемента`]}),(0,c.jsx)(t.td,{children:(0,c.jsx)(t.code,{children:`useClickOutside`})})]}),(0,c.jsxs)(t.tr,{children:[(0,c.jsx)(t.td,{children:`Считать trigger и portal content одной «внутренней» областью`}),(0,c.jsxs)(t.td,{children:[(0,c.jsx)(t.code,{children:`useClickOutside`}),` с массивом refs`]})]}),(0,c.jsxs)(t.tr,{children:[(0,c.jsxs)(t.td,{children:[`Закрыть активный overlay по `,(0,c.jsx)(t.code,{children:`Escape`})]}),(0,c.jsx)(t.td,{children:(0,c.jsx)(t.code,{children:`useEscapeDismiss`})})]}),(0,c.jsxs)(t.tr,{children:[(0,c.jsx)(t.td,{children:`Измерять высоту элемента`}),(0,c.jsx)(t.td,{children:(0,c.jsx)(t.code,{children:`useElementHeightObserver`})})]}),(0,c.jsxs)(t.tr,{children:[(0,c.jsx)(t.td,{children:`Узнать, пересекается ли элемент с viewport/root`}),(0,c.jsx)(t.td,{children:(0,c.jsx)(t.code,{children:`useIntersectionObserver`})})]}),(0,c.jsxs)(t.tr,{children:[(0,c.jsx)(t.td,{children:`Получить touch/coarse-pointer heuristic`}),(0,c.jsx)(t.td,{children:(0,c.jsx)(t.code,{children:`useIsTouchDevice`})})]}),(0,c.jsxs)(t.tr,{children:[(0,c.jsx)(t.td,{children:`Настроить initial focus и optional trap/restore`}),(0,c.jsx)(t.td,{children:(0,c.jsx)(t.code,{children:`useOverlayFocus`})})]}),(0,c.jsxs)(t.tr,{children:[(0,c.jsxs)(t.td,{children:[`Быстро подключить фиксированную focus trap для `,(0,c.jsx)(t.code,{children:`HTMLDivElement`})]}),(0,c.jsx)(t.td,{children:(0,c.jsx)(t.code,{children:`useFocusTrap`})})]}),(0,c.jsxs)(t.tr,{children:[(0,c.jsx)(t.td,{children:`Получить полностью доступный modal/dialog`}),(0,c.jsx)(t.td,{children:`Готовый UI primitive`})]})]})]}),`
+`,(0,c.jsx)(t.h2,{id:`быстрый-старт`,children:`Быстрый старт`}),`
+`,(0,c.jsxs)(t.h3,{id:`скачать-blob`,children:[`Скачать `,(0,c.jsx)(t.code,{children:`Blob`})]}),`
+`,(0,c.jsx)(t.pre,{children:(0,c.jsx)(t.code,{className:`language-tsx`,children:`import { downloadFileFromBlob } from "@ryuzaki13/react-foundation-lib/dom";
+
+export function DownloadTextButton() {
+	const handleDownload = () => {
+		const blob = new Blob(["Привет!"], {
+			type: "text/plain;charset=utf-8"
+		});
+
+		downloadFileFromBlob("hello.txt", blob);
+	};
+
+	return (
+		<button type="button" onClick={handleDownload}>
+			Скачать
+		</button>
+	);
+}
+`})}),`
+`,(0,c.jsx)(t.h3,{id:`скачать-json`,children:`Скачать JSON`}),`
+`,(0,c.jsx)(t.pre,{children:(0,c.jsx)(t.code,{className:`language-tsx`,children:`import { downloadFileFromJson } from "@ryuzaki13/react-foundation-lib/dom";
+
+const settings = {
+	theme: "dark",
+	pageSize: 50
+};
+
+export function ExportSettingsButton() {
+	return (
+		<button type="button" onClick={() => downloadFileFromJson("settings.json", settings)}>
+			Экспортировать настройки
+		</button>
+	);
+}
+`})}),`
+`,(0,c.jsx)(t.h3,{id:`создать-portal-root-во-время-browser-bootstrap`,children:`Создать portal root во время browser bootstrap`}),`
+`,(0,c.jsx)(t.pre,{children:(0,c.jsx)(t.code,{className:`language-tsx`,children:`import { createRoot } from "react-dom/client";
+import { getOrCreatePortalRoot } from "@ryuzaki13/react-foundation-lib/dom";
+
+const appRoot = document.getElementById("root");
+const overlayRoot = getOrCreatePortalRoot("app-overlay-root");
+
+if (!appRoot || !overlayRoot) {
+	throw new Error("Не удалось подготовить DOM roots приложения");
+}
+
+createRoot(appRoot).render(<App overlayRoot={overlayRoot} />);
+`})}),`
+`,(0,c.jsx)(t.p,{children:`Так DOM mutation выполняется на явной application boundary, а не скрывается внутри render компонента.`}),`
+`,(0,c.jsx)(t.h3,{id:`закрыть-popover-по-клику-снаружи`,children:`Закрыть popover по клику снаружи`}),`
+`,(0,c.jsx)(t.pre,{children:(0,c.jsx)(t.code,{className:`language-tsx`,children:`import { useCallback, useRef, useState } from "react";
+import { useClickOutside } from "@ryuzaki13/react-foundation-lib/dom";
+
+export function SimplePopover() {
+	const [open, setOpen] = useState(false);
+	const panelRef = useRef<HTMLDivElement>(null);
+
+	const close = useCallback(() => {
+		setOpen(false);
+	}, []);
+
+	useClickOutside(panelRef, close);
+
+	return (
+		<div>
+			<button type="button" onClick={() => setOpen(true)}>
+				Открыть
+			</button>
+			{open ? <div ref={panelRef}>Содержимое</div> : null}
+		</div>
+	);
+}
+`})}),`
+`,(0,c.jsxs)(t.p,{children:[`В этом упрощённом примере trigger не включён во внутреннюю область. `,(0,c.jsx)(t.code,{children:`mousedown`}),` по trigger может сначала вызвать outside handler, а затем его `,(0,c.jsx)(t.code,{children:`click`}),`. Для toggle/popover обычно передают два refs.`]}),`
+`,(0,c.jsx)(t.h3,{id:`наблюдать-пересечение`,children:`Наблюдать пересечение`}),`
+`,(0,c.jsx)(t.pre,{children:(0,c.jsx)(t.code,{className:`language-tsx`,children:`import { useMemo, useRef } from "react";
+import { useIntersectionObserver } from "@ryuzaki13/react-foundation-lib/dom";
+
+export function LazySection() {
+	const sectionRef = useRef<HTMLElement>(null);
+	const options = useMemo<IntersectionObserverInit>(
+		() => ({
+			rootMargin: "200px 0px",
+			threshold: 0.1
+		}),
+		[]
+	);
+	const { isIntersecting } = useIntersectionObserver(sectionRef, options);
+
+	return <section ref={sectionRef}>{isIntersecting ? <ExpensiveContent /> : <Placeholder />}</section>;
+}
+`})}),`
+`,(0,c.jsxs)(t.p,{children:[`Стабильный `,(0,c.jsx)(t.code,{children:`options`}),` не заставляет effect пересоздавать observer при каждом render.`]}),`
+`,(0,c.jsx)(t.h2,{id:`скачивание-файлов`,children:`Скачивание файлов`}),`
+`,(0,c.jsx)(t.p,{children:`Модуль экспортирует три синхронные функции:`}),`
+`,(0,c.jsx)(t.pre,{children:(0,c.jsx)(t.code,{className:`language-ts`,children:`declare function downloadFileFromObjectURL(filename: string, objectUrl: string): void;
+declare function downloadFileFromBlob(filename: string, blob: Blob): void;
+declare function downloadFileFromJson(filename: string, payload: unknown): void;
+`})}),`
+`,(0,c.jsxs)(t.p,{children:[`Они запускают browser download и ничего не возвращают. Результат `,(0,c.jsx)(t.code,{children:`void`}),` не означает, что пользователь сохранил файл: helper не получает подтверждение от download manager браузера.`]}),`
+`,(0,c.jsx)(t.h3,{id:`downloadfilefromobjecturl`,children:(0,c.jsx)(t.code,{children:`downloadFileFromObjectURL`})}),`
+`,(0,c.jsxs)(t.p,{children:[`Создаёт `,(0,c.jsx)(t.code,{children:`<a>`}),`, устанавливает:`]}),`
+`,(0,c.jsx)(t.pre,{children:(0,c.jsx)(t.code,{className:`language-ts`,children:`link.href = objectUrl;
+link.download = filename;
+`})}),`
+`,(0,c.jsxs)(t.p,{children:[`затем вызывает `,(0,c.jsx)(t.code,{children:`link.click()`}),`. Элемент не добавляется в `,(0,c.jsx)(t.code,{children:`document.body`}),`.`]}),`
+`,(0,c.jsxs)(t.p,{children:[`После вызова `,(0,c.jsx)(t.code,{children:`click`}),` helper планирует:`]}),`
+`,(0,c.jsx)(t.pre,{children:(0,c.jsx)(t.code,{className:`language-ts`,children:`window.setTimeout(() => {
+	window.URL.revokeObjectURL(objectUrl);
+}, 0);
+`})}),`
+`,(0,c.jsx)(t.h4,{id:`ownership-object-url`,children:`Ownership object URL`}),`
+`,(0,c.jsxs)(t.p,{children:[`Передавая URL в `,(0,c.jsx)(t.code,{children:`downloadFileFromObjectURL`}),`, считайте, что отдаёте helper-у ownership. Он освободит URL в следующем macrotask:`]}),`
+`,(0,c.jsx)(t.pre,{children:(0,c.jsx)(t.code,{className:`language-ts`,children:`const objectUrl = URL.createObjectURL(blob);
+downloadFileFromObjectURL("report.pdf", objectUrl);
+
+// Не используйте objectUrl для preview или второго download:
+// helper уже запланировал revokeObjectURL.
+`})}),`
+`,(0,c.jsx)(t.p,{children:`Если один URL нужен и для preview, и для download, создайте отдельный URL для каждой lifetime-задачи либо управляйте download самостоятельно.`}),`
+`,(0,c.jsxs)(t.h4,{id:`параметр-filename`,children:[`Параметр `,(0,c.jsx)(t.code,{children:`filename`})]}),`
+`,(0,c.jsxs)(t.p,{children:[(0,c.jsx)(t.code,{children:`filename`}),` передаётся в свойство `,(0,c.jsx)(t.code,{children:`download`}),` буквально:`]}),`
+`,(0,c.jsx)(t.pre,{children:(0,c.jsx)(t.code,{className:`language-ts`,children:`downloadFileFromObjectURL("Отчёт за август.pdf", objectUrl);
+`})}),`
+`,(0,c.jsx)(t.p,{children:`Helper:`}),`
+`,(0,c.jsxs)(t.ul,{children:[`
+`,(0,c.jsx)(t.li,{children:`не добавляет расширение;`}),`
+`,(0,c.jsx)(t.li,{children:`не удаляет path separators;`}),`
+`,(0,c.jsx)(t.li,{children:`не исправляет недопустимые для ОС символы;`}),`
+`,(0,c.jsx)(t.li,{children:`не проверяет MIME;`}),`
+`,(0,c.jsx)(t.li,{children:`не гарантирует точное финальное имя.`}),`
+`]}),`
+`,(0,c.jsx)(t.p,{children:`Браузер и ОС могут изменить или проигнорировать предложенное имя.`}),`
+`,(0,c.jsx)(t.h4,{id:`это-именно-object-url`,children:`Это именно object URL`}),`
+`,(0,c.jsxs)(t.p,{children:[`Функция вызывает `,(0,c.jsx)(t.code,{children:`URL.revokeObjectURL`}),`, поэтому предназначена для URL, созданного через `,(0,c.jsx)(t.code,{children:`URL.createObjectURL`}),`. Не используйте её как общий helper для произвольного HTTP URL.`]}),`
+`,(0,c.jsx)(t.h3,{id:`downloadfilefromblob`,children:(0,c.jsx)(t.code,{children:`downloadFileFromBlob`})}),`
+`,(0,c.jsxs)(t.p,{children:[`Принимает готовый `,(0,c.jsx)(t.code,{children:`Blob`}),`:`]}),`
+`,(0,c.jsx)(t.pre,{children:(0,c.jsx)(t.code,{className:`language-ts`,children:`downloadFileFromBlob("report.txt", blob);
+`})}),`
+`,(0,c.jsx)(t.p,{children:`Алгоритм:`}),`
+`,(0,c.jsxs)(t.ol,{children:[`
+`,(0,c.jsxs)(t.li,{children:[`создаёт object URL через `,(0,c.jsx)(t.code,{children:`window.URL.createObjectURL(blob)`}),`;`]}),`
+`,(0,c.jsxs)(t.li,{children:[`передаёт его в `,(0,c.jsx)(t.code,{children:`downloadFileFromObjectURL`}),`;`]}),`
+`,(0,c.jsx)(t.li,{children:`запускает click;`}),`
+`,(0,c.jsx)(t.li,{children:`планирует освобождение URL.`}),`
+`]}),`
+`,(0,c.jsxs)(t.p,{children:[`Это предпочтительный API, если вызывающий код уже имеет `,(0,c.jsx)(t.code,{children:`Blob`}),`.`]}),`
+`,(0,c.jsx)(t.h4,{id:`blob-не-уничтожается`,children:`Blob не уничтожается`}),`
+`,(0,c.jsxs)(t.p,{children:[(0,c.jsx)(t.code,{children:`revokeObjectURL`}),` освобождает связь URL с данными. Он не изменяет сам `,(0,c.jsx)(t.code,{children:`Blob`}),`:`]}),`
+`,(0,c.jsx)(t.pre,{children:(0,c.jsx)(t.code,{className:`language-ts`,children:`downloadFileFromBlob("first.bin", blob);
+
+// Сам blob можно передать повторно:
+downloadFileFromBlob("second.bin", blob);
+`})}),`
+`,(0,c.jsx)(t.p,{children:`Каждый вызов создаст собственный временный URL.`}),`
+`,(0,c.jsx)(t.h3,{id:`downloadfilefromjson`,children:(0,c.jsx)(t.code,{children:`downloadFileFromJson`})}),`
+`,(0,c.jsx)(t.p,{children:`Сериализует значение:`}),`
+`,(0,c.jsx)(t.pre,{children:(0,c.jsx)(t.code,{className:`language-ts`,children:`JSON.stringify(payload, null, 2);
+`})}),`
+`,(0,c.jsx)(t.p,{children:`Затем создаёт:`}),`
+`,(0,c.jsx)(t.pre,{children:(0,c.jsx)(t.code,{className:`language-ts`,children:`new Blob([serialized], {
+	type: "application/json;charset=utf-8"
+});
+`})}),`
+`,(0,c.jsxs)(t.p,{children:[`и делегирует скачивание `,(0,c.jsx)(t.code,{children:`downloadFileFromBlob`}),`.`]}),`
+`,(0,c.jsx)(t.h4,{id:`формат`,children:`Формат`}),`
+`,(0,c.jsxs)(t.ul,{children:[`
+`,(0,c.jsx)(t.li,{children:`отступ — два пробела;`}),`
+`,(0,c.jsx)(t.li,{children:`encoding Blob — UTF-8-compatible browser string;`}),`
+`,(0,c.jsxs)(t.li,{children:[`MIME — `,(0,c.jsx)(t.code,{children:`application/json;charset=utf-8`}),`;`]}),`
+`,(0,c.jsx)(t.li,{children:`BOM не добавляется;`}),`
+`,(0,c.jsx)(t.li,{children:`перевод строки в конец специально не добавляется.`}),`
+`]}),`
+`,(0,c.jsx)(t.p,{children:`Пример:`}),`
+`,(0,c.jsx)(t.pre,{children:(0,c.jsx)(t.code,{className:`language-ts`,children:`downloadFileFromJson("user.json", {
+	id: 42,
+	name: "Анна"
+});
+`})}),`
+`,(0,c.jsx)(t.p,{children:`Содержимое:`}),`
+`,(0,c.jsx)(t.pre,{children:(0,c.jsx)(t.code,{className:`language-json`,children:`{
+	"id": 42,
+	"name": "Анна"
+}
+`})}),`
+`,(0,c.jsxs)(t.h4,{id:`правила-jsonstringify`,children:[`Правила `,(0,c.jsx)(t.code,{children:`JSON.stringify`})]}),`
+`,(0,c.jsx)(t.p,{children:`Helper наследует стандартное поведение JavaScript:`}),`
+`,(0,c.jsxs)(t.ul,{children:[`
+`,(0,c.jsxs)(t.li,{children:[`object properties со значением `,(0,c.jsx)(t.code,{children:`undefined`}),`, function или `,(0,c.jsx)(t.code,{children:`symbol`}),` пропускаются;`]}),`
+`,(0,c.jsxs)(t.li,{children:[`такие значения внутри array превращаются в `,(0,c.jsx)(t.code,{children:`null`}),`;`]}),`
+`,(0,c.jsxs)(t.li,{children:[(0,c.jsx)(t.code,{children:`Date`}),` обычно превращается в ISO string через `,(0,c.jsx)(t.code,{children:`toJSON`}),`;`]}),`
+`,(0,c.jsxs)(t.li,{children:[`custom `,(0,c.jsx)(t.code,{children:`toJSON`}),` выполняется;`]}),`
+`,(0,c.jsxs)(t.li,{children:[`circular reference вызывает `,(0,c.jsx)(t.code,{children:`TypeError`}),`;`]}),`
+`,(0,c.jsxs)(t.li,{children:[(0,c.jsx)(t.code,{children:`BigInt`}),` без custom serialization вызывает `,(0,c.jsx)(t.code,{children:`TypeError`}),`;`]}),`
+`,(0,c.jsxs)(t.li,{children:[`для root `,(0,c.jsx)(t.code,{children:`undefined`}),`, function или symbol `,(0,c.jsx)(t.code,{children:`JSON.stringify`}),` возвращает `,(0,c.jsx)(t.code,{children:`undefined`}),`; browser преобразует этот BlobPart в текст `,(0,c.jsx)(t.code,{children:`"undefined"`}),`, то есть скачанный файл не будет корректным JSON.`]}),`
+`]}),`
+`,(0,c.jsx)(t.p,{children:`Ошибки сериализации не перехватываются:`}),`
+`,(0,c.jsx)(t.pre,{children:(0,c.jsx)(t.code,{className:`language-ts`,children:`const cyclic: Record<string, unknown> = {};
+cyclic.self = cyclic;
+
+downloadFileFromJson("cyclic.json", cyclic); // TypeError.
+`})}),`
+`,(0,c.jsx)(t.p,{children:`Если payload пришёл с внешней boundary, валидируйте и подготавливайте его до вызова.`}),`
+`,(0,c.jsx)(t.h3,{id:`пользовательское-действие`,children:`Пользовательское действие`}),`
+`,(0,c.jsx)(t.p,{children:`Браузер может блокировать автоматические downloads, не связанные с user activation. Предпочтительно вызывать helper из click/keyboard command:`}),`
+`,(0,c.jsx)(t.pre,{children:(0,c.jsx)(t.code,{className:`language-tsx`,children:`<button type="button" onClick={handleDownload}>
+	Скачать
+</button>
+`})}),`
+`,(0,c.jsx)(t.p,{children:`Не запускайте download во время render.`}),`
+`,(0,c.jsx)(t.h3,{id:`ошибки-download-helpers`,children:`Ошибки download helpers`}),`
+`,(0,c.jsxs)(t.p,{children:[`Функции не используют `,(0,c.jsx)(t.code,{children:`try/catch`}),` и не возвращают `,(0,c.jsx)(t.code,{children:`Promise`}),`. Ошибка доступа к DOM, создания URL, сериализации или синтетического click будет выброшена синхронно.`]}),`
+`,(0,c.jsxs)(t.p,{children:[`Если `,(0,c.jsx)(t.code,{children:`link.click()`}),` выбросит ошибку, timer освобождения URL ещё не будет запланирован. Вызывающий boundary должен обработать ошибку и cleanup, если это значимо для среды.`]}),`
+`,(0,c.jsx)(t.h2,{id:`getorcreateportalroot`,children:(0,c.jsx)(t.code,{children:`getOrCreatePortalRoot`})}),`
+`,(0,c.jsxs)(t.p,{children:[`Возвращает существующий `,(0,c.jsx)(t.code,{children:`HTMLElement`}),` с заданным ID либо создаёт новый `,(0,c.jsx)(t.code,{children:`<div>`}),` в `,(0,c.jsx)(t.code,{children:`document.body`}),`.`]}),`
+`,(0,c.jsx)(t.h3,{id:`сигнатура`,children:`Сигнатура`}),`
+`,(0,c.jsx)(t.pre,{children:(0,c.jsx)(t.code,{className:`language-ts`,children:`declare function getOrCreatePortalRoot(id: string): HTMLElement | null;
+`})}),`
+`,(0,c.jsx)(t.h3,{id:`алгоритм`,children:`Алгоритм`}),`
+`,(0,c.jsxs)(t.ol,{children:[`
+`,(0,c.jsxs)(t.li,{children:[`Если global `,(0,c.jsx)(t.code,{children:`document`}),` отсутствует, возвращает `,(0,c.jsx)(t.code,{children:`null`}),`.`]}),`
+`,(0,c.jsxs)(t.li,{children:[`Выполняет `,(0,c.jsx)(t.code,{children:`document.getElementById(id)`}),`.`]}),`
+`,(0,c.jsxs)(t.li,{children:[`Если результат является `,(0,c.jsx)(t.code,{children:`HTMLElement`}),`, возвращает его.`]}),`
+`,(0,c.jsxs)(t.li,{children:[`Иначе создаёт `,(0,c.jsx)(t.code,{children:`document.createElement("div")`}),`.`]}),`
+`,(0,c.jsxs)(t.li,{children:[`Устанавливает `,(0,c.jsx)(t.code,{children:`portalRoot.id = id`}),`.`]}),`
+`,(0,c.jsxs)(t.li,{children:[`Добавляет элемент в `,(0,c.jsx)(t.code,{children:`document.body`}),`.`]}),`
+`,(0,c.jsx)(t.li,{children:`Возвращает созданный element.`}),`
+`]}),`
+`,(0,c.jsx)(t.h3,{id:`повторное-использование`,children:`Повторное использование`}),`
+`,(0,c.jsx)(t.pre,{children:(0,c.jsx)(t.code,{className:`language-ts`,children:`const first = getOrCreatePortalRoot("dialog-root");
+const second = getOrCreatePortalRoot("dialog-root");
+
+console.log(first === second); // true в обычном browser document.
+`})}),`
+`,(0,c.jsx)(t.p,{children:`Idempotency действует, когда:`}),`
+`,(0,c.jsxs)(t.ul,{children:[`
+`,(0,c.jsx)(t.li,{children:`ID непустой и стабильный;`}),`
+`,(0,c.jsxs)(t.li,{children:[`существующий element является `,(0,c.jsx)(t.code,{children:`HTMLElement`}),`;`]}),`
+`,(0,c.jsx)(t.li,{children:`никто не удалил или не заменил element между вызовами.`}),`
+`]}),`
+`,(0,c.jsxs)(t.h3,{id:`использование-с-createportal`,children:[`Использование с `,(0,c.jsx)(t.code,{children:`createPortal`})]}),`
+`,(0,c.jsx)(t.pre,{children:(0,c.jsx)(t.code,{className:`language-tsx`,children:`import { createPortal } from "react-dom";
+
+function Overlay({ portalRoot }: { portalRoot: HTMLElement }) {
+	return createPortal(<div role="presentation">Overlay content</div>, portalRoot);
+}
+`})}),`
+`,(0,c.jsxs)(t.p,{children:[(0,c.jsx)(t.code,{children:`getOrCreatePortalRoot`}),` только возвращает container. Сам React portal создаётся функцией `,(0,c.jsx)(t.code,{children:`createPortal`}),` из `,(0,c.jsx)(t.code,{children:`react-dom`}),`.`]}),`
+`,(0,c.jsx)(t.h3,{id:`browser-bootstrap-предпочтительнее-render`,children:`Browser bootstrap предпочтительнее render`}),`
+`,(0,c.jsx)(t.p,{children:`Функция изменяет DOM. Render React-компонента должен оставаться чистым, поэтому предпочтительно:`}),`
+`,(0,c.jsxs)(t.ul,{children:[`
+`,(0,c.jsx)(t.li,{children:`объявить portal container в HTML shell;`}),`
+`,(0,c.jsx)(t.li,{children:`получить его во время application bootstrap;`}),`
+`,(0,c.jsx)(t.li,{children:`создать его на явной browser boundary;`}),`
+`,(0,c.jsx)(t.li,{children:`передать готовый element компонентам или provider.`}),`
+`]}),`
+`,(0,c.jsxs)(t.p,{children:[`Не вызывайте функцию в `,(0,c.jsx)(t.code,{children:`useMemo`}),`: memoization не предназначена для side effects.`]}),`
+`,(0,c.jsx)(t.h3,{id:`функция-не-удаляет-root`,children:`Функция не удаляет root`}),`
+`,(0,c.jsxs)(t.p,{children:[`Созданный element остаётся в `,(0,c.jsx)(t.code,{children:`document.body`}),`, даже если все portals закрыты. Это подходит для application-wide roots:`]}),`
+`,(0,c.jsx)(t.pre,{children:(0,c.jsx)(t.code,{className:`language-text`,children:`dialog-root
+popover-root
+notifications-root
+`})}),`
+`,(0,c.jsx)(t.p,{children:`Для временного root с ограниченным lifetime вызывающий код сам владеет удалением.`}),`
+`,(0,c.jsx)(t.h3,{id:`ограничения-id-и-body`,children:`Ограничения ID и body`}),`
+`,(0,c.jsxs)(t.ul,{children:[`
+`,(0,c.jsx)(t.li,{children:`ID не очищается и не валидируется;`}),`
+`,(0,c.jsx)(t.li,{children:`пустой ID не является безопасным application contract;`}),`
+`,(0,c.jsx)(t.li,{children:`пользовательский ввод не должен становиться ID без validation;`}),`
+`,(0,c.jsxs)(t.li,{children:[`если element с тем же ID существует, но не является `,(0,c.jsx)(t.code,{children:`HTMLElement`}),` (например, SVG element), helper создаст новый `,(0,c.jsx)(t.code,{children:`div`}),` с тем же ID;`]}),`
+`,(0,c.jsx)(t.li,{children:`duplicate IDs делают DOM невалидным и ломают однозначный поиск;`}),`
+`,(0,c.jsxs)(t.li,{children:[`если `,(0,c.jsx)(t.code,{children:`document`}),` существует, но `,(0,c.jsx)(t.code,{children:`document.body`}),` ещё не создан, append завершится ошибкой.`]}),`
+`]}),`
+`,(0,c.jsxs)(t.p,{children:[`Вызывайте helper после подготовки `,(0,c.jsx)(t.code,{children:`body`}),` и используйте контролируемый уникальный ID.`]}),`
+`,(0,c.jsx)(t.h3,{id:`ssr`,children:`SSR`}),`
+`,(0,c.jsx)(t.p,{children:`На server:`}),`
+`,(0,c.jsx)(t.pre,{children:(0,c.jsx)(t.code,{className:`language-ts`,children:`getOrCreatePortalRoot("dialog-root"); // null, если document отсутствует.
+`})}),`
+`,(0,c.jsxs)(t.p,{children:[`Не кешируйте этот `,(0,c.jsx)(t.code,{children:`null`}),` в server-loaded module и не ожидайте, что он автоматически станет HTMLElement на client. Portal target должен разрешаться на корректной browser lifecycle boundary.`]}),`
+`,(0,c.jsx)(t.h2,{id:`useclickoutside`,children:(0,c.jsx)(t.code,{children:`useClickOutside`})}),`
+`,(0,c.jsxs)(t.p,{children:[`Вызывает handler на `,(0,c.jsx)(t.code,{children:`mousedown`}),`, если target находится вне одного ref или вне всех refs из массива.`]}),`
+`,(0,c.jsx)(t.h3,{id:`сигнатура-1`,children:`Сигнатура`}),`
+`,(0,c.jsx)(t.pre,{children:(0,c.jsx)(t.code,{className:`language-ts`,children:`declare function useClickOutside(ref: RefObject<HTMLElement | null> | RefObject<HTMLElement | null>[], handler: () => void): void;
+`})}),`
+`,(0,c.jsx)(t.h3,{id:`один-ref`,children:`Один ref`}),`
+`,(0,c.jsx)(t.pre,{children:(0,c.jsx)(t.code,{className:`language-tsx`,children:`const panelRef = useRef<HTMLDivElement>(null);
+
+useClickOutside(panelRef, close);
+
+return <div ref={panelRef}>...</div>;
+`})}),`
+`,(0,c.jsx)(t.p,{children:`Handler вызывается, когда:`}),`
+`,(0,c.jsxs)(t.ul,{children:[`
+`,(0,c.jsxs)(t.li,{children:[(0,c.jsx)(t.code,{children:`panelRef.current`}),` существует;`]}),`
+`,(0,c.jsxs)(t.li,{children:[(0,c.jsx)(t.code,{children:`panelRef.current.contains(event.target)`}),` возвращает `,(0,c.jsx)(t.code,{children:`false`}),`.`]}),`
+`]}),`
+`,(0,c.jsxs)(t.p,{children:[`Если единственный ref равен `,(0,c.jsx)(t.code,{children:`null`}),`, handler не вызывается.`]}),`
+`,(0,c.jsx)(t.h3,{id:`несколько-refs`,children:`Несколько refs`}),`
+`,(0,c.jsx)(t.p,{children:`Массив нужен, когда несколько разнесённых DOM-subtrees считаются одной внутренней областью. Типичный popover:`}),`
+`,(0,c.jsxs)(t.ul,{children:[`
+`,(0,c.jsx)(t.li,{children:`trigger находится в обычном application tree;`}),`
+`,(0,c.jsx)(t.li,{children:`floating content находится в portal.`}),`
+`]}),`
+`,(0,c.jsx)(t.pre,{children:(0,c.jsx)(t.code,{className:`language-tsx`,children:`const triggerRef = useRef<HTMLButtonElement>(null);
+const panelRef = useRef<HTMLDivElement>(null);
+const insideRefs = useMemo<RefObject<HTMLElement | null>[]>(() => [triggerRef, panelRef], []);
+
+useClickOutside(insideRefs, close);
+`})}),`
+`,(0,c.jsxs)(t.p,{children:[(0,c.jsx)(t.code,{children:`mousedown`}),` внутри любого непустого ref не вызывает handler. Событие снаружи всех refs вызывает.`]}),`
+`,(0,c.jsx)(t.h3,{id:`важное-поведение-null-refs-в-массиве`,children:`Важное поведение null refs в массиве`}),`
+`,(0,c.jsx)(t.p,{children:`Для массива алгоритм начинает с предположения «снаружи» и проверяет только непустые refs. Поэтому:`}),`
+`,(0,c.jsxs)(t.ul,{children:[`
+`,(0,c.jsx)(t.li,{children:`null-элементы массива игнорируются;`}),`
+`,(0,c.jsxs)(t.li,{children:[`если все refs равны `,(0,c.jsx)(t.code,{children:`null`}),`, любой `,(0,c.jsx)(t.code,{children:`mousedown`}),` будет считаться внешним;`]}),`
+`,(0,c.jsx)(t.li,{children:`это отличается от single-ref режима, где null ref блокирует вызов.`}),`
+`]}),`
+`,(0,c.jsx)(t.p,{children:`Не передавайте массив refs до того, как жизненный цикл open/closed состояния продуман. Handler должен уметь безопасно проигнорировать событие, когда overlay закрыт.`}),`
+`,(0,c.jsxs)(t.h3,{id:`событие-mousedown`,children:[`Событие `,(0,c.jsx)(t.code,{children:`mousedown`})]}),`
+`,(0,c.jsx)(t.p,{children:`Hook слушает:`}),`
+`,(0,c.jsx)(t.pre,{children:(0,c.jsx)(t.code,{className:`language-ts`,children:`document.addEventListener("mousedown", handleClickOutside);
+`})}),`
+`,(0,c.jsx)(t.p,{children:`Следствия:`}),`
+`,(0,c.jsxs)(t.ul,{children:[`
+`,(0,c.jsxs)(t.li,{children:[`handler срабатывает раньше последующего `,(0,c.jsx)(t.code,{children:`click`}),`;`]}),`
+`,(0,c.jsx)(t.li,{children:`touch/pointer abstraction отдельно не используется;`}),`
+`,(0,c.jsxs)(t.li,{children:[`hook не передаёт исходный `,(0,c.jsx)(t.code,{children:`MouseEvent`}),` в callback;`]}),`
+`,(0,c.jsxs)(t.li,{children:[`hook не вызывает `,(0,c.jsx)(t.code,{children:`preventDefault`}),`;`]}),`
+`,(0,c.jsxs)(t.li,{children:[`hook не вызывает `,(0,c.jsx)(t.code,{children:`stopPropagation`}),`.`]}),`
+`]}),`
+`,(0,c.jsx)(t.p,{children:`Если продукту нужен единый pointer contract, right-click policy или event metadata, текущий API может быть недостаточен.`}),`
+`,(0,c.jsx)(t.h3,{id:`descendants-считаются-внутренними`,children:`Descendants считаются внутренними`}),`
+`,(0,c.jsxs)(t.p,{children:[(0,c.jsx)(t.code,{children:`HTMLElement.contains`}),` учитывает сам element и всех DOM-потомков:`]}),`
+`,(0,c.jsx)(t.pre,{children:(0,c.jsx)(t.code,{className:`language-tsx`,children:`<div ref={panelRef}>
+	<button type="button">Внутренняя кнопка</button>
+</div>
+`})}),`
+`,(0,c.jsxs)(t.p,{children:[(0,c.jsx)(t.code,{children:`mousedown`}),` по кнопке считается внутренним.`]}),`
+`,(0,c.jsxs)(t.p,{children:[`React ownership не влияет на `,(0,c.jsx)(t.code,{children:`contains`}),`. Portal content является отдельным DOM-subtree и требует отдельного ref.`]}),`
+`,(0,c.jsx)(t.h3,{id:`stable-handler-и-массив`,children:`Stable handler и массив`}),`
+`,(0,c.jsxs)(t.p,{children:[`Effect зависит от `,(0,c.jsx)(t.code,{children:`ref`}),` и `,(0,c.jsx)(t.code,{children:`handler`}),`. Новая ссылка приводит к remove/add listener.`]}),`
+`,(0,c.jsxs)(t.p,{children:[`Для handler используйте `,(0,c.jsx)(t.code,{children:`useCallback`}),`, когда referential stability важна:`]}),`
+`,(0,c.jsx)(t.pre,{children:(0,c.jsx)(t.code,{className:`language-tsx`,children:`const close = useCallback(() => {
+	setOpen(false);
+}, []);
+`})}),`
+`,(0,c.jsxs)(t.p,{children:[`Массив refs также следует стабилизировать через `,(0,c.jsx)(t.code,{children:`useMemo`}),` либо хранить вне частых renders.`]}),`
+`,(0,c.jsx)(t.h3,{id:`как-условно-отключить`,children:`Как условно отключить`}),`
+`,(0,c.jsx)(t.p,{children:`Hooks нельзя вызывать условно:`}),`
+`,(0,c.jsx)(t.pre,{children:(0,c.jsx)(t.code,{className:`language-tsx`,children:`// Неправильно.
+if (open) {
+	useClickOutside(panelRef, close);
+}
+`})}),`
+`,(0,c.jsxs)(t.p,{children:[`У `,(0,c.jsx)(t.code,{children:`useClickOutside`}),` нет параметра `,(0,c.jsx)(t.code,{children:`enabled`}),`. Сохраняйте вызов hook и проверяйте state внутри callback:`]}),`
+`,(0,c.jsx)(t.pre,{children:(0,c.jsx)(t.code,{className:`language-tsx`,children:`const closeOutside = useCallback(() => {
+	if (open) {
+		setOpen(false);
+	}
+}, [open]);
+
+useClickOutside(panelRef, closeOutside);
+`})}),`
+`,(0,c.jsx)(t.p,{children:`Либо монтируйте отдельный component с hook только на время жизни overlay.`}),`
+`,(0,c.jsx)(t.h3,{id:`cleanup`,children:`Cleanup`}),`
+`,(0,c.jsx)(t.p,{children:`При unmount или изменении dependencies удаляется тот же document listener.`}),`
+`,(0,c.jsxs)(t.p,{children:[`Hook всегда использует global `,(0,c.jsx)(t.code,{children:`document`}),`. Передать document iframe или другого realm нельзя.`]}),`
+`,(0,c.jsx)(t.h2,{id:`useescapedismiss`,children:(0,c.jsx)(t.code,{children:`useEscapeDismiss`})}),`
+`,(0,c.jsxs)(t.p,{children:[`Подписывает активный overlay на закрытие по клавише `,(0,c.jsx)(t.code,{children:`Escape`}),`.`]}),`
+`,(0,c.jsx)(t.h3,{id:`сигнатура-2`,children:`Сигнатура`}),`
+`,(0,c.jsx)(t.p,{children:`Публичная функция принимает объект:`}),`
+`,(0,c.jsx)(t.pre,{children:(0,c.jsx)(t.code,{className:`language-ts`,children:`declare function useEscapeDismiss(options: {
+	active: boolean;
+	onDismiss: () => void;
+	enabled?: boolean;
+	documentTarget?: Document | null;
+	containerRef?: RefObject<HTMLElement | null>;
+}): void;
+`})}),`
+`,(0,c.jsx)(t.p,{children:`Named type options отдельно не экспортируется текущим public API.`}),`
+`,(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.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:`active`})}),(0,c.jsx)(t.td,{children:(0,c.jsx)(t.code,{children:`boolean`})}),(0,c.jsx)(t.td,{children:`Обязательный`}),(0,c.jsx)(t.td,{children:`Подключать ли listener для текущего overlay.`})]}),(0,c.jsxs)(t.tr,{children:[(0,c.jsx)(t.td,{children:(0,c.jsx)(t.code,{children:`onDismiss`})}),(0,c.jsx)(t.td,{children:(0,c.jsx)(t.code,{children:`() => void`})}),(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:`enabled`})}),(0,c.jsx)(t.td,{children:(0,c.jsx)(t.code,{children:`boolean`})}),(0,c.jsx)(t.td,{children:(0,c.jsx)(t.code,{children:`true`})}),(0,c.jsx)(t.td,{children:`Разрешено ли закрытие по Escape.`})]}),(0,c.jsxs)(t.tr,{children:[(0,c.jsx)(t.td,{children:(0,c.jsx)(t.code,{children:`documentTarget`})}),(0,c.jsx)(t.td,{children:(0,c.jsx)(t.code,{children:`Document | null`})}),(0,c.jsx)(t.td,{children:`Global document`}),(0,c.jsx)(t.td,{children:`Document, на котором слушать keydown.`})]}),(0,c.jsxs)(t.tr,{children:[(0,c.jsx)(t.td,{children:(0,c.jsx)(t.code,{children:`containerRef`})}),(0,c.jsx)(t.td,{children:(0,c.jsx)(t.code,{children:`RefObject<HTMLElement | null>`})}),(0,c.jsx)(t.td,{children:`Не задан`}),(0,c.jsx)(t.td,{children:`Ограничить dismiss focus-областью container.`})]})]})]}),`
+`,(0,c.jsx)(t.h3,{id:`условия-подписки`,children:`Условия подписки`}),`
+`,(0,c.jsx)(t.p,{children:`Listener не устанавливается, если:`}),`
+`,(0,c.jsxs)(t.ul,{children:[`
+`,(0,c.jsxs)(t.li,{children:[(0,c.jsx)(t.code,{children:`active === false`}),`;`]}),`
+`,(0,c.jsxs)(t.li,{children:[(0,c.jsx)(t.code,{children:`enabled === false`}),`;`]}),`
+`,(0,c.jsx)(t.li,{children:`не удалось получить target document.`}),`
+`]}),`
+`,(0,c.jsx)(t.p,{children:`В остальных случаях подписка использует capture:`}),`
+`,(0,c.jsx)(t.pre,{children:(0,c.jsx)(t.code,{className:`language-ts`,children:`targetDocument.addEventListener("keydown", handleKeyDown, true);
+`})}),`
+`,(0,c.jsx)(t.h3,{id:`проверка-клавиши`,children:`Проверка клавиши`}),`
+`,(0,c.jsx)(t.p,{children:`Обрабатывается только:`}),`
+`,(0,c.jsx)(t.pre,{children:(0,c.jsx)(t.code,{className:`language-ts`,children:`event.key === "Escape";
+`})}),`
+`,(0,c.jsxs)(t.p,{children:[`Legacy значение `,(0,c.jsx)(t.code,{children:`"Esc"`}),` не обрабатывается.`]}),`
+`,(0,c.jsx)(t.p,{children:`При dismiss hook:`}),`
+`,(0,c.jsxs)(t.ol,{children:[`
+`,(0,c.jsxs)(t.li,{children:[`вызывает `,(0,c.jsx)(t.code,{children:`event.preventDefault()`}),`;`]}),`
+`,(0,c.jsxs)(t.li,{children:[`вызывает актуальный `,(0,c.jsx)(t.code,{children:`onDismiss`}),`.`]}),`
+`]}),`
+`,(0,c.jsxs)(t.p,{children:[`Он не вызывает `,(0,c.jsx)(t.code,{children:`stopPropagation`}),`.`]}),`
+`,(0,c.jsxs)(t.h3,{id:`ondismiss-всегда-актуален`,children:[(0,c.jsx)(t.code,{children:`onDismiss`}),` всегда актуален`]}),`
+`,(0,c.jsxs)(t.p,{children:[`Внутри используется React `,(0,c.jsx)(t.code,{children:`useEffectEvent`}),`. Listener не обязан пересоздаваться только потому, что callback получил новую ссылку: при событии вызывается последняя committed версия `,(0,c.jsx)(t.code,{children:`onDismiss`}),`.`]}),`
+`,(0,c.jsx)(t.p,{children:`Не передавайте Effect Event наружу и не вызывайте hook вне React-компонента/custom hook.`}),`
+`,(0,c.jsxs)(t.h3,{id:`ограничение-через-containerref`,children:[`Ограничение через `,(0,c.jsx)(t.code,{children:`containerRef`})]}),`
+`,(0,c.jsxs)(t.p,{children:[`Если container существует, Escape срабатывает только когда `,(0,c.jsx)(t.code,{children:`targetDocument.activeElement`}),`:`]}),`
+`,(0,c.jsxs)(t.ul,{children:[`
+`,(0,c.jsx)(t.li,{children:`равен самому container;`}),`
+`,(0,c.jsx)(t.li,{children:`является его DOM-потомком.`}),`
+`]}),`
+`,(0,c.jsx)(t.p,{children:`Если focus находится снаружи, dismiss игнорируется.`}),`
+`,(0,c.jsx)(t.pre,{children:(0,c.jsx)(t.code,{className:`language-tsx`,children:`const panelRef = useRef<HTMLDivElement>(null);
+
+useEscapeDismiss({
+	active: open,
+	onDismiss: close,
+	containerRef: panelRef
+});
+`})}),`
+`,(0,c.jsx)(t.p,{children:`Это помогает нескольким обычным overlay не реагировать на Escape, когда keyboard focus принадлежит другой области.`}),`
+`,(0,c.jsxs)(t.p,{children:[`Если `,(0,c.jsx)(t.code,{children:`containerRef.current`}),` равен `,(0,c.jsx)(t.code,{children:`null`}),`, focus scope не применяется и Escape может вызвать dismiss.`]}),`
+`,(0,c.jsxs)(t.h3,{id:`без-containerref`,children:[`Без `,(0,c.jsx)(t.code,{children:`containerRef`})]}),`
+`,(0,c.jsx)(t.p,{children:`Любой Escape в target document вызывает dismiss, пока hook active/enabled. Для нескольких активных hooks это может привести к нескольким вызовам.`}),`
+`,(0,c.jsxs)(t.p,{children:[`Вложенный overlay manager должен передавать `,(0,c.jsx)(t.code,{children:`active: true`}),` только верхнему слою.`]}),`
+`,(0,c.jsx)(t.h3,{id:`documenttarget`,children:(0,c.jsx)(t.code,{children:`documentTarget`})}),`
+`,(0,c.jsxs)(t.p,{children:[`Если параметр не передан, используется global `,(0,c.jsx)(t.code,{children:`document`}),`.`]}),`
+`,(0,c.jsx)(t.p,{children:`Реализация использует nullish fallback:`}),`
+`,(0,c.jsx)(t.pre,{children:(0,c.jsx)(t.code,{className:`language-ts`,children:`documentTarget ?? document;
+`})}),`
+`,(0,c.jsxs)(t.p,{children:[`Поэтому явный `,(0,c.jsx)(t.code,{children:`documentTarget: null`}),` при наличии global document не отключает hook. Для отключения используйте `,(0,c.jsx)(t.code,{children:`active: false`}),` или `,(0,c.jsx)(t.code,{children:`enabled: false`}),`.`]}),`
+`,(0,c.jsx)(t.p,{children:`Custom document полезен для специальных same-origin document scenarios, но container/focus elements должны принадлежать согласованной DOM-среде.`}),`
+`,(0,c.jsx)(t.h3,{id:`уже-отменённое-событие`,children:`Уже отменённое событие`}),`
+`,(0,c.jsxs)(t.p,{children:[`Текущий контракт не проверяет `,(0,c.jsx)(t.code,{children:`event.defaultPrevented`}),`. Даже если предыдущий capture listener уже вызвал `,(0,c.jsx)(t.code,{children:`preventDefault`}),`, hook всё равно может выполнить dismiss.`]}),`
+`,(0,c.jsxs)(t.p,{children:[`Если приложение требует приоритетов между overlay, задавайте их через `,(0,c.jsx)(t.code,{children:`active`}),`, а не только через `,(0,c.jsx)(t.code,{children:`preventDefault`}),`.`]}),`
+`,(0,c.jsx)(t.h3,{id:`hook-не-управляет-фокусом`,children:`Hook не управляет фокусом`}),`
+`,(0,c.jsxs)(t.p,{children:[(0,c.jsx)(t.code,{children:`useEscapeDismiss`}),` только вызывает callback. Начальный focus и restore выполняет `,(0,c.jsx)(t.code,{children:`useOverlayFocus`}),` либо UI-owner.`]}),`
+`,(0,c.jsx)(t.h2,{id:`useelementheightobserver`,children:(0,c.jsx)(t.code,{children:`useElementHeightObserver`})}),`
+`,(0,c.jsxs)(t.p,{children:[`Возвращает актуальную высоту element, полученную через `,(0,c.jsx)(t.code,{children:`ResizeObserver`}),`.`]}),`
+`,(0,c.jsx)(t.h3,{id:`сигнатура-3`,children:`Сигнатура`}),`
+`,(0,c.jsx)(t.pre,{children:(0,c.jsx)(t.code,{className:`language-ts`,children:`declare function useElementHeightObserver<TElement extends HTMLElement>(elementRef: RefObject<TElement | null>): number;
+`})}),`
+`,(0,c.jsx)(t.h3,{id:`начальное-значение`,children:`Начальное значение`}),`
+`,(0,c.jsx)(t.p,{children:`До первого observer callback возвращается:`}),`
+`,(0,c.jsx)(t.pre,{children:(0,c.jsx)(t.code,{className:`language-ts`,children:`0;
+`})}),`
+`,(0,c.jsxs)(t.p,{children:[`Hook не вызывает `,(0,c.jsx)(t.code,{children:`getBoundingClientRect`}),` синхронно при setup только для initial value. В обычном браузере ResizeObserver вскоре сообщает текущее измерение, но consumer должен корректно обработать `,(0,c.jsx)(t.code,{children:`0`}),`.`]}),`
+`,(0,c.jsx)(t.h3,{id:`источник-высоты`,children:`Источник высоты`}),`
+`,(0,c.jsx)(t.p,{children:`Callback выбирает:`}),`
+`,(0,c.jsx)(t.pre,{children:(0,c.jsx)(t.code,{className:`language-ts`,children:`entries[0]?.contentRect.height;
+`})}),`
+`,(0,c.jsx)(t.p,{children:`Если первая entry отсутствует, используется:`}),`
+`,(0,c.jsx)(t.pre,{children:(0,c.jsx)(t.code,{className:`language-ts`,children:`element.getBoundingClientRect().height;
+`})}),`
+`,(0,c.jsxs)(t.p,{children:[`Обычно `,(0,c.jsx)(t.code,{children:`contentRect.height`}),` описывает content box. Это не обязательно равно:`]}),`
+`,(0,c.jsxs)(t.ul,{children:[`
+`,(0,c.jsxs)(t.li,{children:[`CSS `,(0,c.jsx)(t.code,{children:`height`}),`;`]}),`
+`,(0,c.jsx)(t.li,{children:`border-box высоте;`}),`
+`,(0,c.jsxs)(t.li,{children:[(0,c.jsx)(t.code,{children:`offsetHeight`}),`;`]}),`
+`,(0,c.jsx)(t.li,{children:`визуальной высоте с transform;`}),`
+`,(0,c.jsx)(t.li,{children:`целому числу.`}),`
+`]}),`
+`,(0,c.jsx)(t.p,{children:`Результат может быть дробным.`}),`
+`,(0,c.jsx)(t.h3,{id:`пример`,children:`Пример`}),`
+`,(0,c.jsx)(t.pre,{children:(0,c.jsx)(t.code,{className:`language-tsx`,children:`function HeightLabel() {
+	const panelRef = useRef<HTMLDivElement>(null);
+	const height = useElementHeightObserver(panelRef);
+
+	return (
+		<div>
+			<div ref={panelRef}>Изменяемое содержимое</div>
+			<output>Высота content box: {height}px</output>
+		</div>
+	);
+}
+`})}),`
+`,(0,c.jsx)(t.h3,{id:`lifecycle`,children:`Lifecycle`}),`
+`,(0,c.jsxs)(t.p,{children:[`Hook использует `,(0,c.jsx)(t.code,{children:`useLayoutEffect`}),`:`]}),`
+`,(0,c.jsxs)(t.ol,{children:[`
+`,(0,c.jsxs)(t.li,{children:[`после DOM commit получает `,(0,c.jsx)(t.code,{children:`elementRef.current`}),`;`]}),`
+`,(0,c.jsx)(t.li,{children:`если element отсутствует, ничего не наблюдает;`}),`
+`,(0,c.jsxs)(t.li,{children:[`создаёт `,(0,c.jsx)(t.code,{children:`ResizeObserver`}),`;`]}),`
+`,(0,c.jsxs)(t.li,{children:[`вызывает `,(0,c.jsx)(t.code,{children:`observer.observe(element)`}),`;`]}),`
+`,(0,c.jsxs)(t.li,{children:[`при cleanup вызывает `,(0,c.jsx)(t.code,{children:`observer.disconnect()`}),`.`]}),`
+`]}),`
+`,(0,c.jsx)(t.h3,{id:`стабильный-ref-и-смена-элемента`,children:`Стабильный ref и смена элемента`}),`
+`,(0,c.jsxs)(t.p,{children:[`Hook рассчитан на React ref, установленный на актуальный element. Простое изменение `,(0,c.jsx)(t.code,{children:`ref.current`}),` само по себе не вызывает render. Для динамической замены target используйте понятную component boundary/key или обеспечьте render, на котором hook сможет переподключиться.`]}),`
+`,(0,c.jsx)(t.p,{children:`Не мутируйте ref вручную во время render.`}),`
+`,(0,c.jsxs)(t.h3,{id:`отсутствующий-resizeobserver`,children:[`Отсутствующий `,(0,c.jsx)(t.code,{children:`ResizeObserver`})]}),`
+`,(0,c.jsxs)(t.p,{children:[`Fallback/polyfill отсутствует. Если global `,(0,c.jsx)(t.code,{children:`ResizeObserver`}),` не определён, effect завершится runtime error.`]}),`
+`,(0,c.jsx)(t.p,{children:`Для старой browser/test среды подключите совместимый polyfill на уровне application environment либо mock в тесте.`}),`
+`,(0,c.jsx)(t.h3,{id:`не-создавайте-feedback-loop`,children:`Не создавайте feedback loop`}),`
+`,(0,c.jsx)(t.p,{children:`Осторожно с кодом, где измеренная высота сразу меняет CSS-высоту того же элемента. Это может создать цепочку:`}),`
+`,(0,c.jsx)(t.pre,{children:(0,c.jsx)(t.code,{className:`language-text`,children:`resize → setState → layout change → resize → ...
+`})}),`
+`,(0,c.jsx)(t.p,{children:`Используйте измерение только там, где оно действительно необходимо, и не дублируйте задачу, решаемую CSS.`}),`
+`,(0,c.jsx)(t.h2,{id:`useintersectionobserver`,children:(0,c.jsx)(t.code,{children:`useIntersectionObserver`})}),`
+`,(0,c.jsxs)(t.p,{children:[`Возвращает boolean `,(0,c.jsx)(t.code,{children:`isIntersecting`}),` для одного DOM `,(0,c.jsx)(t.code,{children:`Element`}),`.`]}),`
+`,(0,c.jsx)(t.h3,{id:`сигнатура-4`,children:`Сигнатура`}),`
+`,(0,c.jsx)(t.pre,{children:(0,c.jsx)(t.code,{className:`language-ts`,children:`declare function useIntersectionObserver(
+	ref: React.RefObject<Element | null>,
+	options?: IntersectionObserverInit
+): {
+	isIntersecting: boolean;
+};
+`})}),`
+`,(0,c.jsx)(t.h3,{id:`начальное-значение-1`,children:`Начальное значение`}),`
+`,(0,c.jsx)(t.pre,{children:(0,c.jsx)(t.code,{className:`language-ts`,children:`false;
+`})}),`
+`,(0,c.jsxs)(t.p,{children:[`Даже если element видим, первый render возвращает `,(0,c.jsx)(t.code,{children:`false`}),`, пока native observer не вызовет callback.`]}),`
+`,(0,c.jsxs)(t.p,{children:[`Не интерпретируйте initial `,(0,c.jsx)(t.code,{children:`false`}),` как доказательство, что element точно находится вне viewport.`]}),`
+`,(0,c.jsx)(t.h3,{id:`options`,children:`Options`}),`
+`,(0,c.jsxs)(t.p,{children:[(0,c.jsx)(t.code,{children:`IntersectionObserverInit`}),` — native browser contract:`]}),`
+`,(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:`root`})}),(0,c.jsxs)(t.td,{children:[`Scroll container; `,(0,c.jsx)(t.code,{children:`null`}),`/отсутствие означает viewport.`]})]}),(0,c.jsxs)(t.tr,{children:[(0,c.jsx)(t.td,{children:(0,c.jsx)(t.code,{children:`rootMargin`})}),(0,c.jsx)(t.td,{children:`Внешний/внутренний отступ области наблюдения в CSS-like формате.`})]}),(0,c.jsxs)(t.tr,{children:[(0,c.jsx)(t.td,{children:(0,c.jsx)(t.code,{children:`threshold`})}),(0,c.jsxs)(t.td,{children:[`Доля пересечения или массив порогов от `,(0,c.jsx)(t.code,{children:`0`}),` до `,(0,c.jsx)(t.code,{children:`1`}),`.`]})]})]})]}),`
+`,(0,c.jsx)(t.p,{children:`Пример preloading до появления в viewport:`}),`
+`,(0,c.jsx)(t.pre,{children:(0,c.jsx)(t.code,{className:`language-tsx`,children:`const options = useMemo<IntersectionObserverInit>(
+	() => ({
+		root: null,
+		rootMargin: "300px 0px",
+		threshold: 0
+	}),
+	[]
+);
+`})}),`
+`,(0,c.jsx)(t.h3,{id:`stable-options`,children:`Stable options`}),`
+`,(0,c.jsxs)(t.p,{children:[`Effect зависит от ссылки `,(0,c.jsx)(t.code,{children:`options`}),`. Такой код создаёт новый object на каждом render:`]}),`
+`,(0,c.jsx)(t.pre,{children:(0,c.jsx)(t.code,{className:`language-tsx`,children:`useIntersectionObserver(ref, {
+	rootMargin: "100px"
+});
+`})}),`
+`,(0,c.jsx)(t.p,{children:`Это приводит к disconnect и созданию нового observer после каждого render.`}),`
+`,(0,c.jsx)(t.p,{children:`Стабилизируйте options:`}),`
+`,(0,c.jsx)(t.pre,{children:(0,c.jsx)(t.code,{className:`language-tsx`,children:`const options = useMemo(
+	() => ({
+		rootMargin: "100px"
+	}),
+	[]
+);
+
+const { isIntersecting } = useIntersectionObserver(ref, options);
+`})}),`
+`,(0,c.jsx)(t.h3,{id:`lifecycle-1`,children:`Lifecycle`}),`
+`,(0,c.jsxs)(t.p,{children:[`Если `,(0,c.jsx)(t.code,{children:`ref.current`}),` существует:`]}),`
+`,(0,c.jsxs)(t.ol,{children:[`
+`,(0,c.jsxs)(t.li,{children:[`создаётся `,(0,c.jsx)(t.code,{children:`IntersectionObserver(callback, options)`}),`;`]}),`
+`,(0,c.jsxs)(t.li,{children:[`вызывается `,(0,c.jsx)(t.code,{children:`observe(element)`}),`;`]}),`
+`,(0,c.jsx)(t.li,{children:`callback берёт первую entry;`}),`
+`,(0,c.jsxs)(t.li,{children:[`state обновляется значением `,(0,c.jsx)(t.code,{children:`entry.isIntersecting`}),`;`]}),`
+`,(0,c.jsxs)(t.li,{children:[`cleanup вызывает `,(0,c.jsx)(t.code,{children:`unobserve(element)`}),`;`]}),`
+`,(0,c.jsxs)(t.li,{children:[`затем вызывает `,(0,c.jsx)(t.code,{children:`disconnect()`}),`.`]}),`
+`]}),`
+`,(0,c.jsx)(t.p,{children:`Если ref пустой во время effect, observer не создаётся.`}),`
+`,(0,c.jsx)(t.h3,{id:`возвращается-только-boolean`,children:`Возвращается только boolean`}),`
+`,(0,c.jsx)(t.p,{children:`Hook не возвращает:`}),`
+`,(0,c.jsxs)(t.ul,{children:[`
+`,(0,c.jsxs)(t.li,{children:[(0,c.jsx)(t.code,{children:`intersectionRatio`}),`;`]}),`
+`,(0,c.jsxs)(t.li,{children:[(0,c.jsx)(t.code,{children:`boundingClientRect`}),`;`]}),`
+`,(0,c.jsxs)(t.li,{children:[(0,c.jsx)(t.code,{children:`rootBounds`}),`;`]}),`
+`,(0,c.jsxs)(t.li,{children:[(0,c.jsx)(t.code,{children:`time`}),`;`]}),`
+`,(0,c.jsxs)(t.li,{children:[`саму `,(0,c.jsx)(t.code,{children:`IntersectionObserverEntry`}),`;`]}),`
+`,(0,c.jsxs)(t.li,{children:[(0,c.jsx)(t.code,{children:`observe/unobserve`}),` commands.`]}),`
+`]}),`
+`,(0,c.jsx)(t.p,{children:`Если они нужны, текущий API не подходит.`}),`
+`,(0,c.jsx)(t.h3,{id:`видимость-и-бизнес-истина`,children:`Видимость и бизнес-истина`}),`
+`,(0,c.jsxs)(t.p,{children:[(0,c.jsx)(t.code,{children:`isIntersecting`}),` является browser layout signal, а не security/business fact. Его можно использовать для:`]}),`
+`,(0,c.jsxs)(t.ul,{children:[`
+`,(0,c.jsx)(t.li,{children:`lazy rendering;`}),`
+`,(0,c.jsx)(t.li,{children:`предварительной загрузки;`}),`
+`,(0,c.jsx)(t.li,{children:`запуска/остановки лёгкой анимации;`}),`
+`,(0,c.jsx)(t.li,{children:`UI-оптимизации.`}),`
+`]}),`
+`,(0,c.jsx)(t.p,{children:`Нельзя использовать пересечение как authorization, подтверждение просмотра юридического текста или гарантию, что пользователь действительно увидел содержимое.`}),`
+`,(0,c.jsxs)(t.h3,{id:`отсутствующий-intersectionobserver`,children:[`Отсутствующий `,(0,c.jsx)(t.code,{children:`IntersectionObserver`})]}),`
+`,(0,c.jsx)(t.p,{children:`Hook не содержит fallback. В среде без API effect выбросит ошибку.`}),`
+`,(0,c.jsx)(t.h2,{id:`useistouchdevice`,children:(0,c.jsx)(t.code,{children:`useIsTouchDevice`})}),`
+`,(0,c.jsx)(t.p,{children:`Возвращает heuristic наличия touch/coarse-pointer возможностей.`}),`
+`,(0,c.jsx)(t.h3,{id:`сигнатура-5`,children:`Сигнатура`}),`
+`,(0,c.jsx)(t.pre,{children:(0,c.jsx)(t.code,{className:`language-ts`,children:`declare const useIsTouchDevice: () => boolean;
+`})}),`
+`,(0,c.jsx)(t.h3,{id:`алгоритм-1`,children:`Алгоритм`}),`
+`,(0,c.jsxs)(t.p,{children:[`Результат становится `,(0,c.jsx)(t.code,{children:`true`}),`, если выполняется хотя бы одно условие:`]}),`
+`,(0,c.jsx)(t.pre,{children:(0,c.jsx)(t.code,{className:`language-ts`,children:`window.matchMedia("(pointer: coarse)").matches || "ontouchstart" in window || navigator.maxTouchPoints > 0;
+`})}),`
+`,(0,c.jsx)(t.h3,{id:`начальное-значение-2`,children:`Начальное значение`}),`
+`,(0,c.jsx)(t.p,{children:`Первый render возвращает:`}),`
+`,(0,c.jsx)(t.pre,{children:(0,c.jsx)(t.code,{className:`language-ts`,children:`false;
+`})}),`
+`,(0,c.jsxs)(t.p,{children:[`После mount effect запускает detection и обновляет state. Поэтому возможен переход `,(0,c.jsx)(t.code,{children:`false → true`}),` и один дополнительный render.`]}),`
+`,(0,c.jsxs)(t.p,{children:[`Не используйте initial `,(0,c.jsx)(t.code,{children:`false`}),` для необратимой команды.`]}),`
+`,(0,c.jsx)(t.h3,{id:`обновление`,children:`Обновление`}),`
+`,(0,c.jsx)(t.p,{children:`Hook повторяет detection на событии:`}),`
+`,(0,c.jsx)(t.pre,{children:(0,c.jsx)(t.code,{className:`language-ts`,children:`window.addEventListener("resize", checkTouchDevice);
+`})}),`
+`,(0,c.jsx)(t.p,{children:`При unmount listener удаляется.`}),`
+`,(0,c.jsxs)(t.p,{children:[`Hook не подписывается напрямую на `,(0,c.jsx)(t.code,{children:`MediaQueryList.change`}),`, `,(0,c.jsx)(t.code,{children:`pointerchange`}),` или подключение внешнего устройства. Изменение обнаруживается при mount или следующем `,(0,c.jsx)(t.code,{children:`resize`}),`.`]}),`
+`,(0,c.jsxs)(t.h3,{id:`что-означает-true`,children:[`Что означает `,(0,c.jsx)(t.code,{children:`true`})]}),`
+`,(0,c.jsxs)(t.p,{children:[(0,c.jsx)(t.code,{children:`true`}),` означает, что среда выглядит touch-capable/coarse-pointer-capable. Это не гарантирует, что:`]}),`
+`,(0,c.jsxs)(t.ul,{children:[`
+`,(0,c.jsx)(t.li,{children:`пользователь сейчас касается экрана;`}),`
+`,(0,c.jsx)(t.li,{children:`touch является primary input;`}),`
+`,(0,c.jsx)(t.li,{children:`мыши нет;`}),`
+`,(0,c.jsx)(t.li,{children:`hover недоступен;`}),`
+`,(0,c.jsx)(t.li,{children:`viewport маленький;`}),`
+`,(0,c.jsx)(t.li,{children:`устройство является телефоном;`}),`
+`,(0,c.jsx)(t.li,{children:`пользователь не использует keyboard или assistive technology.`}),`
+`]}),`
+`,(0,c.jsx)(t.p,{children:`Hybrid laptop может одновременно поддерживать touch, mouse и keyboard.`}),`
+`,(0,c.jsx)(t.h3,{id:`не-скрывайте-функциональность`,children:`Не скрывайте функциональность`}),`
+`,(0,c.jsx)(t.p,{children:`Плохой пример:`}),`
+`,(0,c.jsx)(t.pre,{children:(0,c.jsx)(t.code,{className:`language-tsx`,children:`{
+	isTouchDevice ? null : <button>Важная команда</button>;
+}
+`})}),`
+`,(0,c.jsx)(t.p,{children:`Touch heuristic нельзя использовать, чтобы лишить пользователя функции. Адаптируйте удобство interaction, сохраняя keyboard/pointer доступность.`}),`
+`,(0,c.jsx)(t.p,{children:`Для responsive layout и hover styling предпочитайте CSS:`}),`
+`,(0,c.jsx)(t.pre,{children:(0,c.jsx)(t.code,{className:`language-css`,children:`@media (pointer: coarse) {
+	.target {
+		min-block-size: 44px;
+	}
+}
+`})}),`
+`,(0,c.jsx)(t.h3,{id:`runtime`,children:`Runtime`}),`
+`,(0,c.jsxs)(t.p,{children:[`Hook ожидает `,(0,c.jsx)(t.code,{children:`window.matchMedia`}),` и browser globals. В test environment их нужно mock.`]}),`
+`,(0,c.jsx)(t.h2,{id:`useoverlayfocus`,children:(0,c.jsx)(t.code,{children:`useOverlayFocus`})}),`
+`,(0,c.jsx)(t.p,{children:`Управляет focus lifecycle одного overlay:`}),`
+`,(0,c.jsxs)(t.ul,{children:[`
+`,(0,c.jsx)(t.li,{children:`запоминает ранее активный element;`}),`
+`,(0,c.jsx)(t.li,{children:`ждёт появления container ref;`}),`
+`,(0,c.jsx)(t.li,{children:`устанавливает initial focus;`}),`
+`,(0,c.jsxs)(t.li,{children:[`опционально зацикливает `,(0,c.jsx)(t.code,{children:`Tab`}),`;`]}),`
+`,(0,c.jsx)(t.li,{children:`опционально возвращает focus при cleanup.`}),`
+`]}),`
+`,(0,c.jsx)(t.h3,{id:`сигнатура-6`,children:`Сигнатура`}),`
+`,(0,c.jsx)(t.pre,{children:(0,c.jsx)(t.code,{className:`language-ts`,children:`export interface UseOverlayFocusOptions<T extends HTMLElement> {
+	active: boolean;
+	trapFocus?: boolean;
+	restoreFocus?: boolean;
+	initialFocus?: "auto" | "container" | ((container: T) => HTMLElement | null | undefined);
+	restoreFocusTarget?: () => HTMLElement | null | undefined;
+	containerRef?: RefObject<T | null>;
+}
+
+declare function useOverlayFocus<T extends HTMLElement>(options: UseOverlayFocusOptions<T>): RefObject<T | null>;
+`})}),`
+`,(0,c.jsx)(t.h3,{id:`options-1`,children:`Options`}),`
+`,(0,c.jsxs)(t.table,{children:[(0,c.jsx)(t.thead,{children:(0,c.jsxs)(t.tr,{children:[(0,c.jsx)(t.th,{children:`Option`}),(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:`active`})}),(0,c.jsx)(t.td,{children:`Required`}),(0,c.jsx)(t.td,{children:`Запускает focus lifecycle.`})]}),(0,c.jsxs)(t.tr,{children:[(0,c.jsx)(t.td,{children:(0,c.jsx)(t.code,{children:`trapFocus`})}),(0,c.jsx)(t.td,{children:(0,c.jsx)(t.code,{children:`false`})}),(0,c.jsx)(t.td,{children:`Зацикливает Tab на границах container.`})]}),(0,c.jsxs)(t.tr,{children:[(0,c.jsx)(t.td,{children:(0,c.jsx)(t.code,{children:`restoreFocus`})}),(0,c.jsx)(t.td,{children:(0,c.jsx)(t.code,{children:`true`})}),(0,c.jsx)(t.td,{children:`Возвращает focus при cleanup.`})]}),(0,c.jsxs)(t.tr,{children:[(0,c.jsx)(t.td,{children:(0,c.jsx)(t.code,{children:`initialFocus`})}),(0,c.jsx)(t.td,{children:(0,c.jsx)(t.code,{children:`"auto"`})}),(0,c.jsx)(t.td,{children:`Выбирает первый focus target.`})]}),(0,c.jsxs)(t.tr,{children:[(0,c.jsx)(t.td,{children:(0,c.jsx)(t.code,{children:`restoreFocusTarget`})}),(0,c.jsx)(t.td,{children:`Не задан`}),(0,c.jsx)(t.td,{children:`Позволяет вернуть focus в явно вычисленный element.`})]}),(0,c.jsxs)(t.tr,{children:[(0,c.jsx)(t.td,{children:(0,c.jsx)(t.code,{children:`containerRef`})}),(0,c.jsx)(t.td,{children:`Не задан`}),(0,c.jsx)(t.td,{children:`Позволяет передать существующий ref вместо внутреннего.`})]})]})]}),`
+`,(0,c.jsx)(t.p,{children:`Hook возвращает ref, который нужно установить на overlay container:`}),`
+`,(0,c.jsx)(t.pre,{children:(0,c.jsx)(t.code,{className:`language-tsx`,children:`const overlayRef = useOverlayFocus<HTMLDivElement>({
+	active: open
+});
+
+return open ? <div ref={overlayRef}>...</div> : null;
+`})}),`
+`,(0,c.jsx)(t.h3,{id:`internal-и-external-ref`,children:`Internal и external ref`}),`
+`,(0,c.jsxs)(t.p,{children:[`Если `,(0,c.jsx)(t.code,{children:`containerRef`}),` не передан, hook создаёт собственный `,(0,c.jsx)(t.code,{children:`useRef`}),`.`]}),`
+`,(0,c.jsx)(t.p,{children:`Если передан, используется и возвращается именно он:`}),`
+`,(0,c.jsx)(t.pre,{children:(0,c.jsx)(t.code,{className:`language-tsx`,children:`const existingRef = useRef<HTMLDivElement>(null);
+const overlayRef = useOverlayFocus({
+	active: open,
+	containerRef: existingRef
+});
+
+console.log(overlayRef === existingRef); // true.
+`})}),`
+`,(0,c.jsx)(t.p,{children:`Это полезно для объединения с Floating UI callback ref или другим imperative owner.`}),`
+`,(0,c.jsx)(t.h3,{id:`activation-lifecycle`,children:`Activation lifecycle`}),`
+`,(0,c.jsx)(t.p,{children:`При переходе в active effect:`}),`
+`,(0,c.jsxs)(t.ol,{children:[`
+`,(0,c.jsxs)(t.li,{children:[`сохраняет текущий `,(0,c.jsx)(t.code,{children:`document.activeElement`}),`, если это `,(0,c.jsx)(t.code,{children:`HTMLElement`}),`;`]}),`
+`,(0,c.jsxs)(t.li,{children:[`пытается прочитать `,(0,c.jsx)(t.code,{children:`overlayRef.current`}),`;`]}),`
+`,(0,c.jsxs)(t.li,{children:[`если ref ещё пустой, повторяет попытку через `,(0,c.jsx)(t.code,{children:`requestAnimationFrame`}),`;`]}),`
+`,(0,c.jsx)(t.li,{children:`когда container найден, вычисляет initial focus;`}),`
+`,(0,c.jsxs)(t.li,{children:[`вызывает `,(0,c.jsx)(t.code,{children:`.focus()`}),`, только если target — подключённый `,(0,c.jsx)(t.code,{children:`HTMLElement`}),`;`]}),`
+`,(0,c.jsxs)(t.li,{children:[`при `,(0,c.jsx)(t.code,{children:`trapFocus: true`}),` добавляет `,(0,c.jsx)(t.code,{children:`keydown`}),` listener на container.`]}),`
+`]}),`
+`,(0,c.jsxs)(t.p,{children:[`Если `,(0,c.jsx)(t.code,{children:`active: true`}),`, но container никогда не монтируется, requestAnimationFrame retry продолжается до cleanup. Всегда согласовывайте `,(0,c.jsx)(t.code,{children:`active`}),` с реальным mount overlay.`]}),`
+`,(0,c.jsx)(t.h3,{id:`initialfocus-auto`,children:(0,c.jsx)(t.code,{children:`initialFocus: "auto"`})}),`
+`,(0,c.jsx)(t.p,{children:`Это default. Hook собирает descendants по selector:`}),`
+`,(0,c.jsx)(t.pre,{children:(0,c.jsx)(t.code,{className:`language-css`,children:`button:not([disabled]),
+[href],
+input:not([disabled]),
+select:not([disabled]),
+textarea:not([disabled]),
+[tabindex]:not([tabindex="-1"]):not([disabled])
+`})}),`
+`,(0,c.jsx)(t.p,{children:`Затем:`}),`
+`,(0,c.jsxs)(t.ol,{children:[`
+`,(0,c.jsxs)(t.li,{children:[`удаляет elements, у которых на самом element есть `,(0,c.jsx)(t.code,{children:`aria-hidden`}),`;`]}),`
+`,(0,c.jsxs)(t.li,{children:[`ищет element с `,(0,c.jsx)(t.code,{children:`autofocus`}),`/`,(0,c.jsx)(t.code,{children:`autoFocus`}),` attribute;`]}),`
+`,(0,c.jsx)(t.li,{children:`иначе берёт первый focusable element в DOM-порядке;`}),`
+`,(0,c.jsx)(t.li,{children:`если candidates нет, использует container.`}),`
+`]}),`
+`,(0,c.jsx)(t.p,{children:`Пример:`}),`
+`,(0,c.jsx)(t.pre,{children:(0,c.jsx)(t.code,{className:`language-tsx`,children:`<div ref={overlayRef} tabIndex={-1}>
+	<button type="button" autoFocus>
+		Основное действие
+	</button>
+	<button type="button">Отмена</button>
+</div>
+`})}),`
+`,(0,c.jsxs)(t.p,{children:[`React `,(0,c.jsx)(t.code,{children:`autoFocus`}),` имеет собственное commit-поведение, а hook дополнительно ищет соответствующий DOM attribute. Для однозначного выбора initial target используйте callback.`]}),`
+`,(0,c.jsx)(t.h3,{id:`ограничения-auto-selector`,children:`Ограничения auto selector`}),`
+`,(0,c.jsx)(t.p,{children:`Это компактный selector, а не полноценный tabbability engine. Он:`}),`
+`,(0,c.jsxs)(t.ul,{children:[`
+`,(0,c.jsxs)(t.li,{children:[`не проверяет `,(0,c.jsx)(t.code,{children:`display: none`}),` или `,(0,c.jsx)(t.code,{children:`visibility: hidden`}),`;`]}),`
+`,(0,c.jsx)(t.li,{children:`не проверяет hidden/inert ancestors;`}),`
+`,(0,c.jsxs)(t.li,{children:[`не учитывает disabled `,(0,c.jsx)(t.code,{children:`fieldset`}),` полностью;`]}),`
+`,(0,c.jsx)(t.li,{children:`не проверяет фактический layout box;`}),`
+`,(0,c.jsx)(t.li,{children:`не включает все возможные focusable browser элементы;`}),`
+`,(0,c.jsxs)(t.li,{children:[`не исключает произвольный negative `,(0,c.jsx)(t.code,{children:`tabindex`}),`, кроме точного `,(0,c.jsx)(t.code,{children:`-1`}),`;`]}),`
+`,(0,c.jsxs)(t.li,{children:[`проверяет `,(0,c.jsx)(t.code,{children:`aria-hidden`}),` только на candidate, а не на ancestors.`]}),`
+`]}),`
+`,(0,c.jsx)(t.p,{children:`Для сложного accessibility primitive используйте проверенный UI-компонент или специализированный focus manager.`}),`
+`,(0,c.jsx)(t.h3,{id:`initialfocus-container`,children:(0,c.jsx)(t.code,{children:`initialFocus: "container"`})}),`
+`,(0,c.jsx)(t.p,{children:`Hook вызывает focus у container:`}),`
+`,(0,c.jsx)(t.pre,{children:(0,c.jsx)(t.code,{className:`language-tsx`,children:`const overlayRef = useOverlayFocus<HTMLDivElement>({
+	active: open,
+	initialFocus: "container"
+});
+
+return (
+	<div ref={overlayRef} tabIndex={-1}>
+		...
+	</div>
+);
+`})}),`
+`,(0,c.jsxs)(t.p,{children:[`Без `,(0,c.jsx)(t.code,{children:`tabIndex={-1}`}),` обычный `,(0,c.jsx)(t.code,{children:`div`}),` может не принять focus.`]}),`
+`,(0,c.jsx)(t.h3,{id:`custom-initial-focus`,children:`Custom initial focus`}),`
+`,(0,c.jsx)(t.pre,{children:(0,c.jsx)(t.code,{className:`language-tsx`,children:`const overlayRef = useOverlayFocus<HTMLDivElement>({
+	active: open,
+	initialFocus: (container) => container.querySelector<HTMLElement>("[data-initial-focus]")
+});
+`})}),`
+`,(0,c.jsxs)(t.p,{children:[`Если callback возвращает `,(0,c.jsx)(t.code,{children:`null`}),` или `,(0,c.jsx)(t.code,{children:`undefined`}),`, используется container.`]}),`
+`,(0,c.jsxs)(t.p,{children:[`Если callback возвращает подключённый `,(0,c.jsx)(t.code,{children:`HTMLElement`}),` вне container, hook всё равно сфокусирует его. Ответственность за корректность target лежит на consumer.`]}),`
+`,(0,c.jsxs)(t.p,{children:[`Если возвращён disconnected HTMLElement, focus не выполняется; дополнительного fallback после проверки `,(0,c.jsx)(t.code,{children:`isConnected`}),` нет.`]}),`
+`,(0,c.jsx)(t.h3,{id:`focus-trap`,children:`Focus trap`}),`
+`,(0,c.jsxs)(t.p,{children:[`При `,(0,c.jsx)(t.code,{children:`trapFocus: true`}),` container получает bubbling `,(0,c.jsx)(t.code,{children:`keydown`}),` listener.`]}),`
+`,(0,c.jsxs)(t.p,{children:[`На каждый `,(0,c.jsx)(t.code,{children:`Tab`}),` focusable elements вычисляются заново, поэтому динамически добавленные controls могут участвовать.`]}),`
+`,(0,c.jsx)(t.h4,{id:`обычный-tab`,children:`Обычный Tab`}),`
+`,(0,c.jsx)(t.p,{children:`Если focus находится на последнем candidate:`}),`
+`,(0,c.jsxs)(t.ol,{children:[`
+`,(0,c.jsxs)(t.li,{children:[`вызывается `,(0,c.jsx)(t.code,{children:`preventDefault()`}),`;`]}),`
+`,(0,c.jsx)(t.li,{children:`focus переходит на первый candidate.`}),`
+`]}),`
+`,(0,c.jsx)(t.h4,{id:`shifttab`,children:`Shift+Tab`}),`
+`,(0,c.jsx)(t.p,{children:`Если focus находится:`}),`
+`,(0,c.jsxs)(t.ul,{children:[`
+`,(0,c.jsx)(t.li,{children:`на первом candidate;`}),`
+`,(0,c.jsx)(t.li,{children:`на самом container;`}),`
+`]}),`
+`,(0,c.jsx)(t.p,{children:`то event отменяется и focus переходит на последний candidate.`}),`
+`,(0,c.jsx)(t.h4,{id:`нет-candidates`,children:`Нет candidates`}),`
+`,(0,c.jsx)(t.p,{children:`Hook отменяет Tab и вызывает:`}),`
+`,(0,c.jsx)(t.pre,{children:(0,c.jsx)(t.code,{className:`language-ts`,children:`container.focus();
+`})}),`
+`,(0,c.jsx)(t.p,{children:`Container должен быть программно focusable.`}),`
+`,(0,c.jsx)(t.h3,{id:`граница-focus-trap`,children:`Граница focus trap`}),`
+`,(0,c.jsx)(t.p,{children:`Это boundary wrap, а не абсолютная focus containment:`}),`
+`,(0,c.jsxs)(t.ul,{children:[`
+`,(0,c.jsx)(t.li,{children:`listener срабатывает только для keydown, прошедшего через container;`}),`
+`,(0,c.jsxs)(t.li,{children:[`программный `,(0,c.jsx)(t.code,{children:`.focus()`}),` снаружи не перехватывается;`]}),`
+`,(0,c.jsx)(t.li,{children:`mouse/pointer focus снаружи не возвращается;`}),`
+`,(0,c.jsx)(t.li,{children:`focus в другом portal не является descendant;`}),`
+`,(0,c.jsx)(t.li,{children:`iframe и shadow DOM требуют отдельного проектирования;`}),`
+`,(0,c.jsxs)(t.li,{children:[`background не становится `,(0,c.jsx)(t.code,{children:`inert`}),`;`]}),`
+`,(0,c.jsx)(t.li,{children:`browser chrome и assistive technology имеют собственное поведение.`}),`
+`]}),`
+`,(0,c.jsx)(t.p,{children:`Не используйте этот hook как единственную гарантию доступности или безопасности.`}),`
+`,(0,c.jsx)(t.h3,{id:`restore-focus`,children:`Restore focus`}),`
+`,(0,c.jsxs)(t.p,{children:[`При activation hook запоминает ранее активный `,(0,c.jsx)(t.code,{children:`HTMLElement`}),`.`]}),`
+`,(0,c.jsxs)(t.p,{children:[`При cleanup с `,(0,c.jsx)(t.code,{children:`restoreFocus: true`}),` выбирается:`]}),`
+`,(0,c.jsx)(t.pre,{children:(0,c.jsx)(t.code,{className:`language-ts`,children:`restoreFocusTarget?.() ?? previousActiveElement;
+`})}),`
+`,(0,c.jsxs)(t.p,{children:[`Focus возвращается, только если выбранный element всё ещё `,(0,c.jsx)(t.code,{children:`isConnected`}),`.`]}),`
+`,(0,c.jsx)(t.p,{children:`Типичный сценарий:`}),`
+`,(0,c.jsx)(t.pre,{children:(0,c.jsx)(t.code,{className:`language-tsx`,children:`const triggerRef = useRef<HTMLButtonElement>(null);
+
+const overlayRef = useOverlayFocus<HTMLDivElement>({
+	active: open,
+	restoreFocus: true,
+	restoreFocusTarget: () => triggerRef.current
+});
+`})}),`
+`,(0,c.jsxs)(t.p,{children:[`Если custom callback возвращает `,(0,c.jsx)(t.code,{children:`null`}),`/`,(0,c.jsx)(t.code,{children:`undefined`}),`, используется ранее активный element.`]}),`
+`,(0,c.jsxs)(t.p,{children:[`Если callback возвращает disconnected element, fallback к предыдущему element уже не выполняется: target был выбран, но проверку `,(0,c.jsx)(t.code,{children:`isConnected`}),` не прошёл.`]}),`
+`,(0,c.jsx)(t.h3,{id:`когда-выполняется-cleanup`,children:`Когда выполняется cleanup`}),`
+`,(0,c.jsx)(t.p,{children:`Restore может произойти:`}),`
+`,(0,c.jsxs)(t.ul,{children:[`
+`,(0,c.jsxs)(t.li,{children:[`при `,(0,c.jsx)(t.code,{children:`active: true → false`}),`;`]}),`
+`,(0,c.jsx)(t.li,{children:`при unmount;`}),`
+`,(0,c.jsxs)(t.li,{children:[`при изменении effect dependencies, например `,(0,c.jsx)(t.code,{children:`trapFocus`}),`, `,(0,c.jsx)(t.code,{children:`restoreFocus`}),` или ссылки `,(0,c.jsx)(t.code,{children:`containerRef`}),`.`]}),`
+`]}),`
+`,(0,c.jsx)(t.p,{children:`Не меняйте эти options без необходимости во время открытого overlay.`}),`
+`,(0,c.jsx)(t.h3,{id:`exit-animation`,children:`Exit animation`}),`
+`,(0,c.jsxs)(t.p,{children:[`Если DOM overlay остаётся видимым на время exit animation, но `,(0,c.jsx)(t.code,{children:`active`}),` уже стал `,(0,c.jsx)(t.code,{children:`false`}),`, hook восстановит focus при cleanup сразу, а не после окончания animation.`]}),`
+`,(0,c.jsx)(t.p,{children:`Для такого UI:`}),`
+`,(0,c.jsxs)(t.ul,{children:[`
+`,(0,c.jsxs)(t.li,{children:[`передайте `,(0,c.jsx)(t.code,{children:`restoreFocus: false`}),`;`]}),`
+`,(0,c.jsx)(t.li,{children:`сохраните trigger отдельно;`}),`
+`,(0,c.jsx)(t.li,{children:`восстановите focus в callback окончания exit animation;`}),`
+`,(0,c.jsx)(t.li,{children:`убедитесь, что background уже перестал быть inert.`}),`
+`]}),`
+`,(0,c.jsxs)(t.h3,{id:`изменение-initialfocus`,children:[`Изменение `,(0,c.jsx)(t.code,{children:`initialFocus`})]}),`
+`,(0,c.jsxs)(t.p,{children:[(0,c.jsx)(t.code,{children:`initialFocus`}),` читается через Effect Event и не входит в effect dependencies. Изменение option во время уже подключённого active overlay само по себе не запускает повторный initial focus. Initial focus — действие открытия, а не derived state каждого render.`]}),`
+`,(0,c.jsx)(t.h3,{id:`nested-overlays`,children:`Nested overlays`}),`
+`,(0,c.jsxs)(t.p,{children:[`Hook не знает о стеке modal/dialog/popover. Если несколько hooks имеют `,(0,c.jsx)(t.code,{children:`active: true`}),`, каждый управляет своей подпиской и restore lifecycle.`]}),`
+`,(0,c.jsx)(t.p,{children:`Application/UI manager должен:`}),`
+`,(0,c.jsxs)(t.ul,{children:[`
+`,(0,c.jsx)(t.li,{children:`определить top overlay;`}),`
+`,(0,c.jsx)(t.li,{children:`активировать Escape/trap только для него;`}),`
+`,(0,c.jsx)(t.li,{children:`согласовать inert и z-index;`}),`
+`,(0,c.jsx)(t.li,{children:`не позволить нижнему overlay восстановить focus поверх верхнего.`}),`
+`]}),`
+`,(0,c.jsx)(t.h2,{id:`usefocustrap`,children:(0,c.jsx)(t.code,{children:`useFocusTrap`})}),`
+`,(0,c.jsx)(t.p,{children:`Совместимый wrapper с фиксированными options.`}),`
+`,(0,c.jsx)(t.h3,{id:`сигнатура-7`,children:`Сигнатура`}),`
+`,(0,c.jsx)(t.pre,{children:(0,c.jsx)(t.code,{className:`language-ts`,children:`declare const useFocusTrap: (isOpen: boolean) => RefObject<HTMLDivElement | null>;
+`})}),`
+`,(0,c.jsx)(t.p,{children:`Эквивалентен:`}),`
+`,(0,c.jsx)(t.pre,{children:(0,c.jsx)(t.code,{className:`language-ts`,children:`useOverlayFocus<HTMLDivElement>({
+	active: isOpen,
+	trapFocus: true,
+	restoreFocus: true,
+	initialFocus: "auto"
+});
+`})}),`
+`,(0,c.jsx)(t.h3,{id:`пример-1`,children:`Пример`}),`
+`,(0,c.jsx)(t.pre,{children:(0,c.jsx)(t.code,{className:`language-tsx`,children:`function LegacyPanel({ open }: { open: boolean }) {
+	const panelRef = useFocusTrap(open);
+
+	return open ? (
+		<div ref={panelRef} tabIndex={-1}>
+			<button type="button">Подтвердить</button>
+			<button type="button">Отмена</button>
+		</div>
+	) : null;
+}
+`})}),`
+`,(0,c.jsx)(t.p,{children:`Wrapper не позволяет:`}),`
+`,(0,c.jsxs)(t.ul,{children:[`
+`,(0,c.jsx)(t.li,{children:`отключить restore;`}),`
+`,(0,c.jsx)(t.li,{children:`выбрать custom initial focus;`}),`
+`,(0,c.jsx)(t.li,{children:`передать existing ref;`}),`
+`,(0,c.jsx)(t.li,{children:`отключить trap при active panel;`}),`
+`,(0,c.jsx)(t.li,{children:`выбрать другой HTMLElement generic.`}),`
+`]}),`
+`,(0,c.jsxs)(t.p,{children:[`Для нового настраиваемого кода используйте `,(0,c.jsx)(t.code,{children:`useOverlayFocus`}),`.`]}),`
+`,(0,c.jsx)(t.h2,{id:`сборка-доступного-dialog`,children:`Сборка доступного dialog`}),`
+`,(0,c.jsxs)(t.p,{children:[(0,c.jsx)(t.code,{children:`useOverlayFocus`}),` и `,(0,c.jsx)(t.code,{children:`useEscapeDismiss`}),` решают только часть задачи. Минимальный dialog должен также иметь:`]}),`
+`,(0,c.jsxs)(t.ul,{children:[`
+`,(0,c.jsxs)(t.li,{children:[`семантический `,(0,c.jsx)(t.code,{children:`role="dialog"`}),`;`]}),`
+`,(0,c.jsxs)(t.li,{children:[(0,c.jsx)(t.code,{children:`aria-modal="true"`}),` только для действительно modal поведения;`]}),`
+`,(0,c.jsxs)(t.li,{children:[`accessible name через `,(0,c.jsx)(t.code,{children:`aria-labelledby`}),` или `,(0,c.jsx)(t.code,{children:`aria-label`}),`;`]}),`
+`,(0,c.jsxs)(t.li,{children:[`при необходимости description через `,(0,c.jsx)(t.code,{children:`aria-describedby`}),`;`]}),`
+`,(0,c.jsx)(t.li,{children:`доступную кнопку закрытия;`}),`
+`,(0,c.jsx)(t.li,{children:`focusable container fallback;`}),`
+`,(0,c.jsx)(t.li,{children:`top-layer policy;`}),`
+`,(0,c.jsx)(t.li,{children:`background/inert policy;`}),`
+`,(0,c.jsx)(t.li,{children:`scroll lock при необходимости;`}),`
+`,(0,c.jsx)(t.li,{children:`восстановление focus;`}),`
+`,(0,c.jsx)(t.li,{children:`keyboard и pointer способы закрытия;`}),`
+`,(0,c.jsx)(t.li,{children:`визуальный focus indicator.`}),`
+`]}),`
+`,(0,c.jsx)(t.p,{children:`Ниже учебный пример. Для production сначала ищите готовый UI primitive.`}),`
+`,(0,c.jsx)(t.pre,{children:(0,c.jsx)(t.code,{className:`language-tsx`,children:`import { useId } from "react";
+import { createPortal } from "react-dom";
+import { useEscapeDismiss, useOverlayFocus } from "@ryuzaki13/react-foundation-lib/dom";
+
+type ConfirmDialogProps = {
+	description: string;
+	onClose: () => void;
+	onConfirm: () => void;
+	open: boolean;
+	portalRoot: HTMLElement;
+	title: string;
+};
+
+export function ConfirmDialog({ description, onClose, onConfirm, open, portalRoot, title }: ConfirmDialogProps) {
+	const titleId = useId();
+	const descriptionId = useId();
+	const panelRef = useOverlayFocus<HTMLDivElement>({
+		active: open,
+		trapFocus: true,
+		restoreFocus: true,
+		initialFocus: (container) => container.querySelector<HTMLButtonElement>("[data-confirm]")
+	});
+
+	useEscapeDismiss({
+		active: open,
+		onDismiss: onClose,
+		containerRef: panelRef
+	});
+
+	if (!open) {
+		return null;
+	}
+
+	return createPortal(
+		<div className="dialogBackdrop">
+			<div ref={panelRef} role="dialog" aria-modal="true" aria-labelledby={titleId} aria-describedby={descriptionId} tabIndex={-1}>
+				<h2 id={titleId}>{title}</h2>
+				<p id={descriptionId}>{description}</p>
+				<button type="button" data-confirm onClick={onConfirm}>
+					Подтвердить
+				</button>
+				<button type="button" onClick={onClose}>
+					Отмена
+				</button>
+			</div>
+		</div>,
+		portalRoot
+	);
+}
+`})}),`
+`,(0,c.jsx)(t.p,{children:`Этот пример всё ещё не реализует inert/background manager, scroll lock, nested modal stack и animation exit coordination. Эти обязанности должны находиться у UI-owner.`}),`
+`,(0,c.jsxs)(t.h3,{id:`почему-нужен-useid`,children:[`Почему нужен `,(0,c.jsx)(t.code,{children:`useId`})]}),`
+`,(0,c.jsxs)(t.p,{children:[(0,c.jsx)(t.code,{children:`useId`}),` создаёт React ID для accessibility connections:`]}),`
+`,(0,c.jsx)(t.pre,{children:(0,c.jsx)(t.code,{className:`language-tsx`,children:`<h2 id={titleId}>...</h2>
+<div aria-labelledby={titleId}>...</div>
+`})}),`
+`,(0,c.jsx)(t.p,{children:`Не используйте случайный UUID на каждом render.`}),`
+`,(0,c.jsxs)(t.h3,{id:`почему-container-имеет-tabindex-1`,children:[`Почему container имеет `,(0,c.jsx)(t.code,{children:`tabIndex={-1}`})]}),`
+`,(0,c.jsx)(t.p,{children:`Если custom initial target отсутствует либо focusable elements нет, hook использует container. Без программной focusability fallback может ничего не сделать.`}),`
+`,(0,c.jsxs)(t.h3,{id:`почему-active-совпадает-с-mount`,children:[`Почему `,(0,c.jsx)(t.code,{children:`active`}),` совпадает с mount`]}),`
+`,(0,c.jsxs)(t.p,{children:[`Когда `,(0,c.jsx)(t.code,{children:`open === false`}),`, container не рендерится и hook inactive. Когда `,(0,c.jsx)(t.code,{children:`open === true`}),`, container появляется и hook может получить ref. Это предотвращает бесконечный requestAnimationFrame retry.`]}),`
+`,(0,c.jsx)(t.h2,{id:`композиция-overlay-hooks`,children:`Композиция overlay hooks`}),`
+`,(0,c.jsx)(t.h3,{id:`popover-trigger-и-panel-считаются-внутренними`,children:`Popover: trigger и panel считаются внутренними`}),`
+`,(0,c.jsx)(t.pre,{children:(0,c.jsx)(t.code,{className:`language-tsx`,children:`import { type RefObject, useCallback, useMemo, useRef, useState } from "react";
+import { useClickOutside, useEscapeDismiss, useOverlayFocus } from "@ryuzaki13/react-foundation-lib/dom";
+
+function Popover() {
+	const [open, setOpen] = useState(false);
+	const triggerRef = useRef<HTMLButtonElement>(null);
+	const panelRef = useOverlayFocus<HTMLDivElement>({
+		active: open,
+		initialFocus: "container",
+		restoreFocus: true
+	});
+	const insideRefs = useMemo<RefObject<HTMLElement | null>[]>(() => [triggerRef, panelRef], [panelRef]);
+
+	const close = useCallback(() => {
+		setOpen(false);
+	}, []);
+
+	const closeOutside = useCallback(() => {
+		if (open) {
+			close();
+		}
+	}, [close, open]);
+
+	useClickOutside(insideRefs, closeOutside);
+	useEscapeDismiss({
+		active: open,
+		onDismiss: close,
+		containerRef: panelRef
+	});
+
+	return (
+		<>
+			<button ref={triggerRef} type="button" aria-expanded={open} onClick={() => setOpen((current) => !current)}>
+				Открыть
+			</button>
+			{open ? (
+				<div ref={panelRef} tabIndex={-1}>
+					Содержимое
+				</div>
+			) : null}
+		</>
+	);
+}
+`})}),`
+`,(0,c.jsxs)(t.p,{children:[`Если panel находится в portal, логика refs не меняется: `,(0,c.jsx)(t.code,{children:`contains`}),` проверяет реальный DOM каждого ref.`]}),`
+`,(0,c.jsx)(t.h3,{id:`только-верхний-overlay-активен`,children:`Только верхний overlay активен`}),`
+`,(0,c.jsx)(t.pre,{children:(0,c.jsx)(t.code,{className:`language-tsx`,children:`useEscapeDismiss({
+	active: open && isTopOverlay,
+	onDismiss: close,
+	containerRef: panelRef
+});
+`})}),`
+`,(0,c.jsxs)(t.p,{children:[`Конкретная stack и focus policy принадлежит UI manager. Нельзя механически переключать `,(0,c.jsx)(t.code,{children:`useOverlayFocus.active`}),` у нижнего слоя при каждом открытии верхнего: cleanup нижнего hook может преждевременно восстановить focus. Менеджер должен согласовать activation, restore, inert и exit lifecycle всей стопки. Модуль `,(0,c.jsx)(t.code,{children:`dom`}),` не предоставляет store/registry overlay.`]}),`
+`,(0,c.jsx)(t.h3,{id:`non-modal-popover`,children:`Non-modal popover`}),`
+`,(0,c.jsx)(t.p,{children:`Не каждому popover нужна focus trap:`}),`
+`,(0,c.jsx)(t.pre,{children:(0,c.jsx)(t.code,{className:`language-tsx`,children:`const panelRef = useOverlayFocus<HTMLDivElement>({
+	active: open,
+	trapFocus: false,
+	restoreFocus: true,
+	initialFocus: "container"
+});
+`})}),`
+`,(0,c.jsxs)(t.p,{children:[(0,c.jsx)(t.code,{children:`aria-modal="true"`}),` также не следует ставить на non-modal UI автоматически.`]}),`
+`,(0,c.jsx)(t.h2,{id:`ssr-strict-mode-и-lifecycle`,children:`SSR, Strict Mode и lifecycle`}),`
+`,(0,c.jsx)(t.h3,{id:`browser-only-side-effects`,children:`Browser-only side effects`}),`
+`,(0,c.jsx)(t.p,{children:`Не вызывайте download helpers или DOM mutations:`}),`
+`,(0,c.jsxs)(t.ul,{children:[`
+`,(0,c.jsx)(t.li,{children:`во время render;`}),`
+`,(0,c.jsx)(t.li,{children:`в Node-only utility;`}),`
+`,(0,c.jsx)(t.li,{children:`в server loader;`}),`
+`,(0,c.jsxs)(t.li,{children:[`до появления `,(0,c.jsx)(t.code,{children:`document.body`}),`;`]}),`
+`,(0,c.jsx)(t.li,{children:`без проверки целевого browser runtime.`}),`
+`]}),`
+`,(0,c.jsx)(t.p,{children:`User-triggered effects выполняйте в handlers. Subscriptions и observers уже находятся внутри hooks.`}),`
+`,(0,c.jsx)(t.h3,{id:`первый-render-может-содержать-default`,children:`Первый render может содержать default`}),`
+`,(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:`Initial render`})]})}),(0,c.jsxs)(t.tbody,{children:[(0,c.jsxs)(t.tr,{children:[(0,c.jsx)(t.td,{children:(0,c.jsx)(t.code,{children:`useElementHeightObserver`})}),(0,c.jsx)(t.td,{children:(0,c.jsx)(t.code,{children:`0`})})]}),(0,c.jsxs)(t.tr,{children:[(0,c.jsx)(t.td,{children:(0,c.jsx)(t.code,{children:`useIntersectionObserver`})}),(0,c.jsx)(t.td,{children:(0,c.jsx)(t.code,{children:`false`})})]}),(0,c.jsxs)(t.tr,{children:[(0,c.jsx)(t.td,{children:(0,c.jsx)(t.code,{children:`useIsTouchDevice`})}),(0,c.jsx)(t.td,{children:(0,c.jsx)(t.code,{children:`false`})})]})]})]}),`
+`,(0,c.jsx)(t.p,{children:`После mount/observer callback state может измениться. UI должен выдерживать этот переход без опасного решения и сильного layout shift.`}),`
+`,(0,c.jsx)(t.h3,{id:`strict-mode`,children:`Strict Mode`}),`
+`,(0,c.jsx)(t.p,{children:`React development Strict Mode может выполнить setup → cleanup → setup для проверки симметрии effects.`}),`
+`,(0,c.jsx)(t.p,{children:`Hooks удаляют listeners и disconnect observers в cleanup. Consumer callbacks также должны быть безопасны при повторном lifecycle.`}),`
+`,(0,c.jsx)(t.p,{children:`Не используйте render для:`}),`
+`,(0,c.jsxs)(t.ul,{children:[`
+`,(0,c.jsx)(t.li,{children:`скачивания;`}),`
+`,(0,c.jsx)(t.li,{children:`создания случайного URL;`}),`
+`,(0,c.jsx)(t.li,{children:`focus;`}),`
+`,(0,c.jsx)(t.li,{children:`append в body;`}),`
+`,(0,c.jsx)(t.li,{children:`ручной мутации ref.`}),`
+`]}),`
+`,(0,c.jsx)(t.h3,{id:`conditional-hooks-запрещены`,children:`Conditional hooks запрещены`}),`
+`,(0,c.jsx)(t.p,{children:`Нельзя:`}),`
+`,(0,c.jsx)(t.pre,{children:(0,c.jsx)(t.code,{className:`language-tsx`,children:`if (open) {
+	useEscapeDismiss({ active: true, onDismiss: close });
+}
+`})}),`
+`,(0,c.jsx)(t.p,{children:`Правильно:`}),`
+`,(0,c.jsx)(t.pre,{children:(0,c.jsx)(t.code,{className:`language-tsx`,children:`useEscapeDismiss({
+	active: open,
+	onDismiss: close
+});
+`})}),`
+`,(0,c.jsx)(t.h3,{id:`ref-становится-доступен-после-commit`,children:`Ref становится доступен после commit`}),`
+`,(0,c.jsxs)(t.p,{children:[(0,c.jsx)(t.code,{children:`useOverlayFocus`}),` умеет ждать ref через requestAnimationFrame. Observer hooks читают ref в effect. Не пытайтесь читать `,(0,c.jsx)(t.code,{children:`ref.current`}),` во время render для условного вызова hook.`]}),`
+`,(0,c.jsx)(t.h2,{id:`производительность`,children:`Производительность`}),`
+`,(0,c.jsx)(t.h3,{id:`global-listeners`,children:`Global listeners`}),`
+`,(0,c.jsx)(t.p,{children:`Каждый экземпляр:`}),`
+`,(0,c.jsxs)(t.ul,{children:[`
+`,(0,c.jsxs)(t.li,{children:[(0,c.jsx)(t.code,{children:`useClickOutside`}),` добавляет свой `,(0,c.jsx)(t.code,{children:`document.mousedown`}),`;`]}),`
+`,(0,c.jsxs)(t.li,{children:[`активный `,(0,c.jsx)(t.code,{children:`useEscapeDismiss`}),` добавляет свой `,(0,c.jsx)(t.code,{children:`document.keydown`}),`;`]}),`
+`,(0,c.jsxs)(t.li,{children:[(0,c.jsx)(t.code,{children:`useIsTouchDevice`}),` добавляет свой `,(0,c.jsx)(t.code,{children:`window.resize`}),`.`]}),`
+`]}),`
+`,(0,c.jsx)(t.p,{children:`Для десятков/сотен экземпляров оцените общий owner или монтируйте interaction hook только в реально активном UI component.`}),`
+`,(0,c.jsx)(t.h3,{id:`stable-dependencies`,children:`Stable dependencies`}),`
+`,(0,c.jsxs)(t.ul,{children:[`
+`,(0,c.jsxs)(t.li,{children:[`стабилизируйте массив refs для `,(0,c.jsx)(t.code,{children:`useClickOutside`}),`;`]}),`
+`,(0,c.jsxs)(t.li,{children:[`используйте `,(0,c.jsx)(t.code,{children:`useCallback`}),` для handler, когда нужно избежать listener churn;`]}),`
+`,(0,c.jsxs)(t.li,{children:[`стабилизируйте `,(0,c.jsx)(t.code,{children:`IntersectionObserverInit`}),`;`]}),`
+`,(0,c.jsx)(t.li,{children:`не меняйте focus options без причины во время active overlay.`}),`
+`]}),`
+`,(0,c.jsx)(t.p,{children:`Не добавляйте memoization механически: она нужна там, где ссылка является effect contract.`}),`
+`,(0,c.jsx)(t.h3,{id:`observer-callbacks`,children:`Observer callbacks`}),`
+`,(0,c.jsxs)(t.p,{children:[(0,c.jsx)(t.code,{children:`ResizeObserver`}),` и `,(0,c.jsx)(t.code,{children:`IntersectionObserver`}),` могут вызывать state update много раз. Не выполняйте тяжёлую синхронную работу прямо во время каждого render, зависящего от observer state.`]}),`
+`,(0,c.jsx)(t.h3,{id:`css-прежде-измерений`,children:`CSS прежде измерений`}),`
+`,(0,c.jsxs)(t.p,{children:[`Если layout можно выразить через Grid, Flexbox, container queries, `,(0,c.jsx)(t.code,{children:`min/max/clamp`}),` или media queries, CSS обычно проще и дешевле `,(0,c.jsx)(t.code,{children:`ResizeObserver → state → render`}),`.`]}),`
+`,(0,c.jsx)(t.h3,{id:`object-url-1`,children:`Object URL`}),`
+`,(0,c.jsxs)(t.p,{children:[(0,c.jsx)(t.code,{children:`downloadFileFromBlob`}),` освобождает созданный URL автоматически. Не создавайте ещё один URL вокруг него:`]}),`
+`,(0,c.jsx)(t.pre,{children:(0,c.jsx)(t.code,{className:`language-ts`,children:`// Лишнее создание URL.
+const url = URL.createObjectURL(blob);
+downloadFileFromBlob("file.bin", blob);
+`})}),`
+`,(0,c.jsxs)(t.p,{children:[`Либо передайте Blob, либо создайте URL и передайте его в `,(0,c.jsx)(t.code,{children:`downloadFileFromObjectURL`}),`.`]}),`
+`,(0,c.jsx)(t.h2,{id:`тестирование`,children:`Тестирование`}),`
+`,(0,c.jsx)(t.p,{children:`DOM hooks требуют DOM test environment. Для Vitest файл может начинаться:`}),`
+`,(0,c.jsx)(t.pre,{children:(0,c.jsx)(t.code,{className:`language-ts`,children:`// @vitest-environment jsdom
+`})}),`
+`,(0,c.jsx)(t.h3,{id:`cleanup-react-root`,children:`Cleanup React root`}),`
+`,(0,c.jsx)(t.p,{children:`После каждого теста:`}),`
+`,(0,c.jsxs)(t.ul,{children:[`
+`,(0,c.jsx)(t.li,{children:`unmount React root;`}),`
+`,(0,c.jsx)(t.li,{children:`удаляйте container;`}),`
+`,(0,c.jsx)(t.li,{children:`восстанавливайте mocks;`}),`
+`,(0,c.jsx)(t.li,{children:`возвращайте real timers;`}),`
+`,(0,c.jsxs)(t.li,{children:[`удаляйте portal roots из `,(0,c.jsx)(t.code,{children:`document.body`}),`.`]}),`
+`]}),`
+`,(0,c.jsx)(t.h3,{id:`download-helpers`,children:`Download helpers`}),`
+`,(0,c.jsx)(t.p,{children:`Mock:`}),`
+`,(0,c.jsxs)(t.ul,{children:[`
+`,(0,c.jsxs)(t.li,{children:[(0,c.jsx)(t.code,{children:`document.createElement`}),`/anchor `,(0,c.jsx)(t.code,{children:`click`}),`;`]}),`
+`,(0,c.jsxs)(t.li,{children:[(0,c.jsx)(t.code,{children:`URL.createObjectURL`}),`;`]}),`
+`,(0,c.jsxs)(t.li,{children:[(0,c.jsx)(t.code,{children:`URL.revokeObjectURL`}),`;`]}),`
+`,(0,c.jsx)(t.li,{children:`timers.`}),`
+`]}),`
+`,(0,c.jsx)(t.pre,{children:(0,c.jsx)(t.code,{className:`language-ts`,children:`vi.useFakeTimers();
+
+const click = vi.fn();
+const revokeObjectURL = vi.fn();
+
+// После вызова helper:
+expect(click).toHaveBeenCalledOnce();
+
+vi.runAllTimers();
+expect(revokeObjectURL).toHaveBeenCalledWith("blob:test");
+`})}),`
+`,(0,c.jsx)(t.p,{children:`Проверяйте revoke после выполнения timer, а не сразу после функции.`}),`
+`,(0,c.jsx)(t.h3,{id:`resizeobserver`,children:(0,c.jsx)(t.code,{children:`ResizeObserver`})}),`
+`,(0,c.jsx)(t.p,{children:`JSDOM не выполняет реальный layout. Используйте controllable fake:`}),`
+`,(0,c.jsx)(t.pre,{children:(0,c.jsx)(t.code,{className:`language-ts`,children:`let resizeCallback: ResizeObserverCallback | undefined;
+
+class FakeResizeObserver {
+	constructor(callback: ResizeObserverCallback) {
+		resizeCallback = callback;
+	}
+
+	observe = vi.fn();
+	disconnect = vi.fn();
+}
+
+vi.stubGlobal("ResizeObserver", FakeResizeObserver);
+`})}),`
+`,(0,c.jsxs)(t.p,{children:[`Затем вызовите callback внутри React `,(0,c.jsx)(t.code,{children:`act`}),`:`]}),`
+`,(0,c.jsx)(t.pre,{children:(0,c.jsx)(t.code,{className:`language-ts`,children:`await act(async () => {
+	resizeCallback?.([{ contentRect: { height: 42 } } as ResizeObserverEntry], {} as ResizeObserver);
+});
+`})}),`
+`,(0,c.jsx)(t.h3,{id:`intersectionobserver`,children:(0,c.jsx)(t.code,{children:`IntersectionObserver`})}),`
+`,(0,c.jsx)(t.pre,{children:(0,c.jsx)(t.code,{className:`language-ts`,children:`let intersectionCallback: IntersectionObserverCallback | undefined;
+
+class FakeIntersectionObserver {
+	constructor(callback: IntersectionObserverCallback) {
+		intersectionCallback = callback;
+	}
+
+	observe = vi.fn();
+	unobserve = vi.fn();
+	disconnect = vi.fn();
+}
+
+vi.stubGlobal("IntersectionObserver", FakeIntersectionObserver);
+`})}),`
+`,(0,c.jsx)(t.p,{children:`Передавайте fake entry:`}),`
+`,(0,c.jsx)(t.pre,{children:(0,c.jsx)(t.code,{className:`language-ts`,children:`await act(async () => {
+	intersectionCallback?.([{ isIntersecting: true } as IntersectionObserverEntry], {} as IntersectionObserver);
+});
+`})}),`
+`,(0,c.jsx)(t.h3,{id:`useclickoutside-1`,children:(0,c.jsx)(t.code,{children:`useClickOutside`})}),`
+`,(0,c.jsxs)(t.p,{children:[`Dispatch именно `,(0,c.jsx)(t.code,{children:`mousedown`}),`, а не только `,(0,c.jsx)(t.code,{children:`click`}),`:`]}),`
+`,(0,c.jsx)(t.pre,{children:(0,c.jsx)(t.code,{className:`language-ts`,children:`outside.dispatchEvent(
+	new MouseEvent("mousedown", {
+		bubbles: true
+	})
+);
+`})}),`
+`,(0,c.jsx)(t.p,{children:`Проверьте:`}),`
+`,(0,c.jsxs)(t.ul,{children:[`
+`,(0,c.jsx)(t.li,{children:`inside одного ref;`}),`
+`,(0,c.jsx)(t.li,{children:`inside второго ref;`}),`
+`,(0,c.jsx)(t.li,{children:`outside всех refs;`}),`
+`,(0,c.jsx)(t.li,{children:`null refs;`}),`
+`,(0,c.jsx)(t.li,{children:`cleanup после unmount.`}),`
+`]}),`
+`,(0,c.jsx)(t.h3,{id:`useescapedismiss-1`,children:(0,c.jsx)(t.code,{children:`useEscapeDismiss`})}),`
+`,(0,c.jsx)(t.pre,{children:(0,c.jsx)(t.code,{className:`language-ts`,children:`const event = new KeyboardEvent("keydown", {
+	key: "Escape",
+	bubbles: true,
+	cancelable: true
+});
+
+document.dispatchEvent(event);
+
+expect(onDismiss).toHaveBeenCalledOnce();
+expect(event.defaultPrevented).toBe(true);
+`})}),`
+`,(0,c.jsx)(t.p,{children:`Отдельно проверьте focus внутри и снаружи container.`}),`
+`,(0,c.jsx)(t.h3,{id:`useoverlayfocus-1`,children:(0,c.jsx)(t.code,{children:`useOverlayFocus`})}),`
+`,(0,c.jsx)(t.p,{children:`JSDOM не имеет полноценной browser Tab navigation. Проверяйте управляемые boundary cases:`}),`
+`,(0,c.jsxs)(t.ul,{children:[`
+`,(0,c.jsx)(t.li,{children:`initial focus;`}),`
+`,(0,c.jsx)(t.li,{children:`Tab на последнем element;`}),`
+`,(0,c.jsx)(t.li,{children:`Shift+Tab на первом;`}),`
+`,(0,c.jsx)(t.li,{children:`container fallback без candidates;`}),`
+`,(0,c.jsx)(t.li,{children:`restore target;`}),`
+`,(0,c.jsx)(t.li,{children:`disconnected restore target;`}),`
+`,(0,c.jsx)(t.li,{children:`cleanup listener.`}),`
+`]}),`
+`,(0,c.jsxs)(t.p,{children:[(0,c.jsx)(t.code,{children:`requestAnimationFrame`}),` можно mock, но callback должен выполняться в контролируемом `,(0,c.jsx)(t.code,{children:`act`}),`.`]}),`
+`,(0,c.jsx)(t.h3,{id:`useistouchdevice-1`,children:(0,c.jsx)(t.code,{children:`useIsTouchDevice`})}),`
+`,(0,c.jsx)(t.p,{children:`Mock:`}),`
+`,(0,c.jsxs)(t.ul,{children:[`
+`,(0,c.jsxs)(t.li,{children:[(0,c.jsx)(t.code,{children:`window.matchMedia`}),`;`]}),`
+`,(0,c.jsxs)(t.li,{children:[(0,c.jsx)(t.code,{children:`navigator.maxTouchPoints`}),`;`]}),`
+`,(0,c.jsxs)(t.li,{children:[`при необходимости наличие `,(0,c.jsx)(t.code,{children:`ontouchstart`}),`;`]}),`
+`,(0,c.jsxs)(t.li,{children:[(0,c.jsx)(t.code,{children:`window.resize`}),`.`]}),`
+`]}),`
+`,(0,c.jsxs)(t.p,{children:[`Проверяйте initial `,(0,c.jsx)(t.code,{children:`false`}),` отдельно от состояния после effect.`]}),`
+`,(0,c.jsx)(t.h2,{id:`ограничения-и-частые-ошибки`,children:`Ограничения и частые ошибки`}),`
+`,(0,c.jsx)(t.h3,{id:`вызов-download-во-время-render`,children:`Вызов download во время render`}),`
+`,(0,c.jsx)(t.pre,{children:(0,c.jsx)(t.code,{className:`language-tsx`,children:`function BadComponent({ blob }: { blob: Blob }) {
+	downloadFileFromBlob("file.bin", blob);
+	return null;
+}
+`})}),`
+`,(0,c.jsx)(t.p,{children:`Render может выполняться повторно. Download является user-facing side effect и должен запускаться из command handler.`}),`
+`,(0,c.jsx)(t.h3,{id:`повторное-использование-отозванного-object-url`,children:`Повторное использование отозванного object URL`}),`
+`,(0,c.jsxs)(t.p,{children:[(0,c.jsx)(t.code,{children:`downloadFileFromObjectURL`}),` планирует revoke. Не сохраняйте переданный URL как долговечный preview source.`]}),`
+`,(0,c.jsx)(t.h3,{id:`ожидание-promise-или-подтверждения-download`,children:`Ожидание Promise или подтверждения download`}),`
+`,(0,c.jsxs)(t.p,{children:[`Helpers возвращают `,(0,c.jsx)(t.code,{children:`void`}),`. Они не знают, сохранил ли пользователь файл и куда.`]}),`
+`,(0,c.jsx)(t.h3,{id:`невалидный-json`,children:`Невалидный JSON`}),`
+`,(0,c.jsxs)(t.p,{children:[`Root `,(0,c.jsx)(t.code,{children:`undefined`}),`, circular data и `,(0,c.jsx)(t.code,{children:`BigInt`}),` не превращаются в надёжный JSON export автоматически. Подготавливайте serializable payload.`]}),`
+`,(0,c.jsx)(t.h3,{id:`portal-root-внутри-pure-render`,children:`Portal root внутри pure render`}),`
+`,(0,c.jsxs)(t.p,{children:[(0,c.jsx)(t.code,{children:`getOrCreatePortalRoot`}),` меняет `,(0,c.jsx)(t.code,{children:`document.body`}),`. Создавайте root на browser bootstrap или используйте element из HTML shell.`]}),`
+`,(0,c.jsx)(t.h3,{id:`случайныйпустой-portal-id`,children:`Случайный/пустой portal ID`}),`
+`,(0,c.jsx)(t.p,{children:`Это ломает reuse и может создать duplicate IDs. Используйте стабильную application constant.`}),`
+`,(0,c.jsx)(t.h3,{id:`trigger-не-включён-в-outside-refs`,children:`Trigger не включён в outside refs`}),`
+`,(0,c.jsxs)(t.p,{children:[`Для toggle popover `,(0,c.jsx)(t.code,{children:`mousedown`}),` по trigger может считаться внешним, а следующий `,(0,c.jsx)(t.code,{children:`click`}),` снова изменить state. Передайте trigger и panel refs как единую область.`]}),`
+`,(0,c.jsx)(t.h3,{id:`inline-refs-array`,children:`Inline refs array`}),`
+`,(0,c.jsx)(t.pre,{children:(0,c.jsx)(t.code,{className:`language-tsx`,children:`useClickOutside([triggerRef, panelRef], close);
+`})}),`
+`,(0,c.jsx)(t.p,{children:`Функционально понятно, но новая array reference пересоздаёт listener после каждого render. Для часто обновляемого компонента стабилизируйте массив.`}),`
+`,(0,c.jsx)(t.h3,{id:`условный-вызов-hook`,children:`Условный вызов hook`}),`
+`,(0,c.jsxs)(t.p,{children:[`Не помещайте hooks внутрь `,(0,c.jsx)(t.code,{children:`if (open)`}),`. Передавайте `,(0,c.jsx)(t.code,{children:`active`}),`/`,(0,c.jsx)(t.code,{children:`enabled`}),` либо выделите mounted overlay component.`]}),`
+`,(0,c.jsx)(t.h3,{id:`несколько-active-escape-hooks`,children:`Несколько active Escape hooks`}),`
+`,(0,c.jsxs)(t.p,{children:[(0,c.jsx)(t.code,{children:`preventDefault`}),` не останавливает другие listeners. Только top overlay должен быть active.`]}),`
+`,(0,c.jsx)(t.h3,{id:`container-без-focus`,children:`Container без focus`}),`
+`,(0,c.jsxs)(t.p,{children:[(0,c.jsx)(t.code,{children:`initialFocus: "container"`}),` и zero-candidate trap требуют `,(0,c.jsx)(t.code,{children:`tabIndex={-1}`}),` для обычного `,(0,c.jsx)(t.code,{children:`div`}),`.`]}),`
+`,(0,c.jsx)(t.h3,{id:`focus-trap-без-семантики`,children:`Focus trap без семантики`}),`
+`,(0,c.jsxs)(t.p,{children:[`Focus trap не добавляет `,(0,c.jsx)(t.code,{children:`role="dialog"`}),`, accessible name, inert background и close command.`]}),`
+`,(0,c.jsx)(t.h3,{id:`focus-trap-на-non-modal-ui`,children:`Focus trap на non-modal UI`}),`
+`,(0,c.jsx)(t.p,{children:`Не зацикливайте focus автоматически в tooltip или простом non-modal popover. Это может мешать keyboard navigation.`}),`
+`,(0,c.jsx)(t.h3,{id:`restore-до-завершения-animation`,children:`Restore до завершения animation`}),`
+`,(0,c.jsx)(t.p,{children:`Cleanup выполняется при деактивации hook. Если exit animation ещё идёт, управляйте restore отдельно.`}),`
+`,(0,c.jsx)(t.h3,{id:`active-overlay-без-mounted-ref`,children:`Active overlay без mounted ref`}),`
+`,(0,c.jsxs)(t.p,{children:[(0,c.jsx)(t.code,{children:`useOverlayFocus`}),` будет повторять requestAnimationFrame до появления element или cleanup.`]}),`
+`,(0,c.jsx)(t.h3,{id:`inline-observer-options`,children:`Inline observer options`}),`
+`,(0,c.jsxs)(t.p,{children:[`Новый object на каждом render пересоздаёт `,(0,c.jsx)(t.code,{children:`IntersectionObserver`}),`.`]}),`
+`,(0,c.jsx)(t.h3,{id:`observer-как-синхронное-измерение`,children:`Observer как синхронное измерение`}),`
+`,(0,c.jsx)(t.p,{children:`Initial height/visibility — defaults. Реальный callback приходит позднее.`}),`
+`,(0,c.jsx)(t.h3,{id:`отсутствующие-observer-apis`,children:`Отсутствующие observer APIs`}),`
+`,(0,c.jsx)(t.p,{children:`Hooks не предоставляют polyfills. Настройте target browsers и test environment.`}),`
+`,(0,c.jsx)(t.h3,{id:`touch-равен-mobile`,children:`Touch равен mobile`}),`
+`,(0,c.jsx)(t.p,{children:`Touch-capable laptop не обязательно mobile. Не связывайте бизнес/UI доступность только с результатом heuristic.`}),`
+`,(0,c.jsx)(t.h3,{id:`resizeobserver-вместо-css`,children:`ResizeObserver вместо CSS`}),`
+`,(0,c.jsx)(t.p,{children:`Не измеряйте layout через JavaScript, если задача полностью решается CSS.`}),`
+`,(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:`API`}),(0,c.jsx)(t.th,{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:`downloadFileFromObjectURL`})}),(0,c.jsx)(t.td,{children:`filename, object URL`}),(0,c.jsx)(t.td,{children:(0,c.jsx)(t.code,{children:`void`})}),(0,c.jsxs)(t.td,{children:[`revoke через `,(0,c.jsx)(t.code,{children:`setTimeout(0)`})]}),(0,c.jsx)(t.td,{children:`Принимает ownership URL; нет подтверждения download.`})]}),(0,c.jsxs)(t.tr,{children:[(0,c.jsx)(t.td,{children:(0,c.jsx)(t.code,{children:`downloadFileFromBlob`})}),(0,c.jsxs)(t.td,{children:[`filename, `,(0,c.jsx)(t.code,{children:`Blob`})]}),(0,c.jsx)(t.td,{children:(0,c.jsx)(t.code,{children:`void`})}),(0,c.jsx)(t.td,{children:`Сам создаёт/revokes URL`}),(0,c.jsx)(t.td,{children:`Browser-only, ошибки синхронные.`})]}),(0,c.jsxs)(t.tr,{children:[(0,c.jsx)(t.td,{children:(0,c.jsx)(t.code,{children:`downloadFileFromJson`})}),(0,c.jsxs)(t.td,{children:[`filename, `,(0,c.jsx)(t.code,{children:`unknown`})]}),(0,c.jsx)(t.td,{children:(0,c.jsx)(t.code,{children:`void`})}),(0,c.jsx)(t.td,{children:`JSON с 2 spaces, UTF-8 MIME`}),(0,c.jsxs)(t.td,{children:[`Наследует ошибки и потери `,(0,c.jsx)(t.code,{children:`JSON.stringify`}),`.`]})]}),(0,c.jsxs)(t.tr,{children:[(0,c.jsx)(t.td,{children:(0,c.jsx)(t.code,{children:`getOrCreatePortalRoot`})}),(0,c.jsx)(t.td,{children:(0,c.jsx)(t.code,{children:`id: string`})}),(0,c.jsx)(t.td,{children:(0,c.jsx)(t.code,{children:`HTMLElement | null`})}),(0,c.jsxs)(t.td,{children:[`Создаёт `,(0,c.jsx)(t.code,{children:`div`}),` в body`]}),(0,c.jsx)(t.td,{children:`DOM mutation; root не удаляется.`})]}),(0,c.jsxs)(t.tr,{children:[(0,c.jsx)(t.td,{children:(0,c.jsx)(t.code,{children:`useClickOutside`})}),(0,c.jsx)(t.td,{children:`один ref/массив refs, handler`}),(0,c.jsx)(t.td,{children:(0,c.jsx)(t.code,{children:`void`})}),(0,c.jsxs)(t.td,{children:[`Global bubbling `,(0,c.jsx)(t.code,{children:`mousedown`})]}),(0,c.jsx)(t.td,{children:`Нет enabled/event arg/custom document.`})]}),(0,c.jsxs)(t.tr,{children:[(0,c.jsx)(t.td,{children:(0,c.jsx)(t.code,{children:`useEscapeDismiss`})}),(0,c.jsx)(t.td,{children:`options object`}),(0,c.jsx)(t.td,{children:(0,c.jsx)(t.code,{children:`void`})}),(0,c.jsxs)(t.td,{children:[`enabled=true, capture `,(0,c.jsx)(t.code,{children:`keydown`})]}),(0,c.jsx)(t.td,{children:`Не управляет stack/focus; defaultPrevented игнорируется.`})]}),(0,c.jsxs)(t.tr,{children:[(0,c.jsx)(t.td,{children:(0,c.jsx)(t.code,{children:`useElementHeightObserver`})}),(0,c.jsx)(t.td,{children:`element ref`}),(0,c.jsx)(t.td,{children:(0,c.jsx)(t.code,{children:`number`})}),(0,c.jsxs)(t.td,{children:[`Initial `,(0,c.jsx)(t.code,{children:`0`})]}),(0,c.jsx)(t.td,{children:`ContentRect, требует ResizeObserver.`})]}),(0,c.jsxs)(t.tr,{children:[(0,c.jsx)(t.td,{children:(0,c.jsx)(t.code,{children:`useIntersectionObserver`})}),(0,c.jsx)(t.td,{children:`element ref, native options`}),(0,c.jsx)(t.td,{children:(0,c.jsx)(t.code,{children:`{ isIntersecting }`})}),(0,c.jsxs)(t.td,{children:[`Initial `,(0,c.jsx)(t.code,{children:`false`})]}),(0,c.jsx)(t.td,{children:`Только boolean, требует IntersectionObserver.`})]}),(0,c.jsxs)(t.tr,{children:[(0,c.jsx)(t.td,{children:(0,c.jsx)(t.code,{children:`useIsTouchDevice`})}),(0,c.jsx)(t.td,{children:`Нет`}),(0,c.jsx)(t.td,{children:(0,c.jsx)(t.code,{children:`boolean`})}),(0,c.jsx)(t.td,{children:`Initial false, update на mount/resize`}),(0,c.jsx)(t.td,{children:`Capability heuristic, не текущий input mode.`})]}),(0,c.jsxs)(t.tr,{children:[(0,c.jsx)(t.td,{children:(0,c.jsx)(t.code,{children:`useOverlayFocus`})}),(0,c.jsx)(t.td,{children:(0,c.jsx)(t.code,{children:`UseOverlayFocusOptions<T>`})}),(0,c.jsx)(t.td,{children:(0,c.jsx)(t.code,{children:`RefObject<T | null>`})}),(0,c.jsx)(t.td,{children:`auto focus, no trap, restore=true`}),(0,c.jsx)(t.td,{children:`Не полноценный accessibility/overlay manager.`})]}),(0,c.jsxs)(t.tr,{children:[(0,c.jsx)(t.td,{children:(0,c.jsx)(t.code,{children:`useFocusTrap`})}),(0,c.jsx)(t.td,{children:(0,c.jsx)(t.code,{children:`isOpen: boolean`})}),(0,c.jsx)(t.td,{children:(0,c.jsx)(t.code,{children:`RefObject<HTMLDivElement | null>`})}),(0,c.jsx)(t.td,{children:`auto + trap + restore`}),(0,c.jsx)(t.td,{children:`Фиксированный compatibility wrapper.`})]})]})]}),`
+`,(0,c.jsx)(t.h2,{id:`вопросы-и-ответы`,children:`Вопросы и ответы`}),`
+`,(0,c.jsx)(t.h3,{id:`как-скачать-base64`,children:`Как скачать base64?`}),`
+`,(0,c.jsxs)(t.p,{children:[`Сначала преобразуйте base64 в `,(0,c.jsx)(t.code,{children:`Blob`}),` через модуль `,(0,c.jsx)(t.code,{children:`/binary`}),`, затем передайте Blob:`]}),`
+`,(0,c.jsx)(t.pre,{children:(0,c.jsx)(t.code,{className:`language-ts`,children:`const blob = binaryToBlob(base64, "application/pdf", true);
+downloadFileFromBlob("report.pdf", blob);
+`})}),`
+`,(0,c.jsxs)(t.h3,{id:`нужно-ли-самостоятельно-вызывать-urlrevokeobjecturl-после-downloadfilefromblob`,children:[`Нужно ли самостоятельно вызывать `,(0,c.jsx)(t.code,{children:`URL.revokeObjectURL`}),` после `,(0,c.jsx)(t.code,{children:`downloadFileFromBlob`}),`?`]}),`
+`,(0,c.jsx)(t.p,{children:`Нет. Helper создаёт URL и планирует revoke самостоятельно.`}),`
+`,(0,c.jsxs)(t.h3,{id:`нужно-ли-вызывать-revoke-после-downloadfilefromobjecturl`,children:[`Нужно ли вызывать revoke после `,(0,c.jsx)(t.code,{children:`downloadFileFromObjectURL`}),`?`]}),`
+`,(0,c.jsx)(t.p,{children:`Нет, если URL передан этому helper: ownership уже отдан. Не используйте URL повторно.`}),`
+`,(0,c.jsx)(t.h3,{id:`можно-ли-передать-обычный-https-url`,children:`Можно ли передать обычный HTTPS URL?`}),`
+`,(0,c.jsxs)(t.p,{children:[`API предназначен для object URL и вызывает `,(0,c.jsx)(t.code,{children:`revokeObjectURL`}),`. Для навигации/скачивания remote URL используйте отдельный contract с учётом same-origin, headers и browser policy.`]}),`
+`,(0,c.jsx)(t.h3,{id:`почему-json-export-упал-на-объекте`,children:`Почему JSON export упал на объекте?`}),`
+`,(0,c.jsxs)(t.p,{children:[`Наиболее частые причины — circular reference, `,(0,c.jsx)(t.code,{children:`BigInt`}),` или исключение в custom `,(0,c.jsx)(t.code,{children:`toJSON`}),`.`]}),`
+`,(0,c.jsxs)(t.h3,{id:`создаёт-ли-getorcreateportalroot-react-portal`,children:[`Создаёт ли `,(0,c.jsx)(t.code,{children:`getOrCreatePortalRoot`}),` React portal?`]}),`
+`,(0,c.jsxs)(t.p,{children:[`Нет. Он создаёт только DOM container. Portal создаётся через `,(0,c.jsx)(t.code,{children:`createPortal`}),`.`]}),`
+`,(0,c.jsxs)(t.h3,{id:`почему-функция-вернула-null`,children:[`Почему функция вернула `,(0,c.jsx)(t.code,{children:`null`}),`?`]}),`
+`,(0,c.jsxs)(t.p,{children:[`Global `,(0,c.jsx)(t.code,{children:`document`}),` отсутствовал. Обычно это server/Node boundary.`]}),`
+`,(0,c.jsx)(t.h3,{id:`нужно-ли-удалять-portal-root-при-закрытии-dialog`,children:`Нужно ли удалять portal root при закрытии dialog?`}),`
+`,(0,c.jsx)(t.p,{children:`Обычно application-wide root оставляют до выгрузки страницы. Helper не удаляет его. Временный root должен очищать его owner.`}),`
+`,(0,c.jsx)(t.h3,{id:`почему-outside-handler-сработал-при-клике-по-popover`,children:`Почему outside handler сработал при клике по popover?`}),`
+`,(0,c.jsx)(t.p,{children:`Portal content или trigger мог не входить в refs. Передайте все DOM-subtrees, считающиеся внутренними.`}),`
+`,(0,c.jsx)(t.h3,{id:`почему-outside-handler-сработал-пока-elements-ещё-не-mounted`,children:`Почему outside handler сработал, пока elements ещё не mounted?`}),`
+`,(0,c.jsxs)(t.p,{children:[`В array mode все null refs считаются отсутствующими внутренними областями, поэтому событие является outside. Проверяйте `,(0,c.jsx)(t.code,{children:`open`}),` в callback или монтируйте hook вместе с overlay component.`]}),`
+`,(0,c.jsx)(t.h3,{id:`почему-escape-не-закрыл-overlay`,children:`Почему Escape не закрыл overlay?`}),`
+`,(0,c.jsx)(t.p,{children:`Проверьте:`}),`
+`,(0,c.jsxs)(t.ul,{children:[`
+`,(0,c.jsxs)(t.li,{children:[(0,c.jsx)(t.code,{children:`active`}),`;`]}),`
+`,(0,c.jsxs)(t.li,{children:[(0,c.jsx)(t.code,{children:`enabled`}),`;`]}),`
+`,(0,c.jsxs)(t.li,{children:[`точное `,(0,c.jsx)(t.code,{children:`event.key === "Escape"`}),`;`]}),`
+`,(0,c.jsx)(t.li,{children:`target document;`}),`
+`,(0,c.jsxs)(t.li,{children:[`focus внутри `,(0,c.jsx)(t.code,{children:`containerRef`}),`;`]}),`
+`,(0,c.jsx)(t.li,{children:`существует ли container.`}),`
+`]}),`
+`,(0,c.jsx)(t.h3,{id:`почему-escape-закрыл-несколько-overlay`,children:`Почему Escape закрыл несколько overlay?`}),`
+`,(0,c.jsxs)(t.p,{children:[`Несколько hooks были active. Модуль не управляет stack и не вызывает `,(0,c.jsx)(t.code,{children:`stopPropagation`}),`. Активируйте только top overlay.`]}),`
+`,(0,c.jsxs)(t.h3,{id:`можно-ли-отключить-escape-через-documenttarget-null`,children:[`Можно ли отключить Escape через `,(0,c.jsx)(t.code,{children:`documentTarget: null`}),`?`]}),`
+`,(0,c.jsxs)(t.p,{children:[`Нет при наличии global document: nullish fallback выберет его. Используйте `,(0,c.jsx)(t.code,{children:`active: false`}),` или `,(0,c.jsx)(t.code,{children:`enabled: false`}),`.`]}),`
+`,(0,c.jsx)(t.h3,{id:`почему-focus-не-установился-на-container`,children:`Почему focus не установился на container?`}),`
+`,(0,c.jsxs)(t.p,{children:[`Обычному `,(0,c.jsx)(t.code,{children:`div`}),` нужен `,(0,c.jsx)(t.code,{children:`tabIndex={-1}`}),`. Также target должен быть подключён к DOM.`]}),`
+`,(0,c.jsx)(t.h3,{id:`почему-focus-ушёл-из-trap-программно`,children:`Почему focus ушёл из trap программно?`}),`
+`,(0,c.jsxs)(t.p,{children:[`Hook зацикливает только keyboard Tab на boundary container. Он не перехватывает произвольный `,(0,c.jsx)(t.code,{children:`.focus()`}),`, pointer focus или другой portal.`]}),`
+`,(0,c.jsx)(t.h3,{id:`почему-focus-восстановился-до-окончания-анимации`,children:`Почему focus восстановился до окончания анимации?`}),`
+`,(0,c.jsx)(t.p,{children:`Restore выполняется в effect cleanup при деактивации. Для exit animation отключите встроенный restore и выполните его после фактического удаления overlay.`}),`
+`,(0,c.jsxs)(t.h3,{id:`почему-useelementheightobserver-сначала-вернул-0`,children:[`Почему `,(0,c.jsx)(t.code,{children:`useElementHeightObserver`}),` сначала вернул `,(0,c.jsx)(t.code,{children:`0`}),`?`]}),`
+`,(0,c.jsx)(t.p,{children:`Это initial state. Hook ждёт callback ResizeObserver.`}),`
+`,(0,c.jsx)(t.h3,{id:`какую-высоту-возвращает-observer`,children:`Какую высоту возвращает observer?`}),`
+`,(0,c.jsxs)(t.p,{children:[`В первую очередь `,(0,c.jsx)(t.code,{children:`ResizeObserverEntry.contentRect.height`}),`, обычно content box. Это не обязательно `,(0,c.jsx)(t.code,{children:`offsetHeight`}),` или визуальный border-box.`]}),`
+`,(0,c.jsxs)(t.h3,{id:`почему-useintersectionobserver-пересоздаётся`,children:[`Почему `,(0,c.jsx)(t.code,{children:`useIntersectionObserver`}),` пересоздаётся?`]}),`
+`,(0,c.jsxs)(t.p,{children:[`Вероятно, `,(0,c.jsx)(t.code,{children:`options`}),` создаётся inline и имеет новую ссылку на каждом render. Стабилизируйте object.`]}),`
+`,(0,c.jsxs)(t.h3,{id:`можно-ли-использовать-isintersecting-как-доказательство-просмотра`,children:[`Можно ли использовать `,(0,c.jsx)(t.code,{children:`isIntersecting`}),` как доказательство просмотра?`]}),`
+`,(0,c.jsx)(t.p,{children:`Нет. Это layout signal, а не гарантия человеческого внимания или бизнес-событие.`}),`
+`,(0,c.jsxs)(t.h3,{id:`почему-touch-hook-сначала-возвращает-false`,children:[`Почему touch hook сначала возвращает `,(0,c.jsx)(t.code,{children:`false`}),`?`]}),`
+`,(0,c.jsxs)(t.p,{children:[`Detection выполняется после mount в effect. Initial state равен `,(0,c.jsx)(t.code,{children:`false`}),`.`]}),`
+`,(0,c.jsxs)(t.h3,{id:`можно-ли-по-useistouchdevice-определить-телефон`,children:[`Можно ли по `,(0,c.jsx)(t.code,{children:`useIsTouchDevice`}),` определить телефон?`]}),`
+`,(0,c.jsx)(t.p,{children:`Нет. Результат означает touch/coarse capability heuristic. Он не определяет класс устройства, размер экрана или единственный input method.`}),`
+`,(0,c.jsxs)(t.h3,{id:`что-выбрать-для-modal-usefocustrap-или-useoverlayfocus`,children:[`Что выбрать для modal: `,(0,c.jsx)(t.code,{children:`useFocusTrap`}),` или `,(0,c.jsx)(t.code,{children:`useOverlayFocus`}),`?`]}),`
+`,(0,c.jsxs)(t.p,{children:[`Для нового кода обычно `,(0,c.jsx)(t.code,{children:`useOverlayFocus`}),`: у него есть явные options, custom initial/restore target и external ref. `,(0,c.jsx)(t.code,{children:`useFocusTrap`}),` — фиксированный compatibility wrapper.`]}),`
+`,(0,c.jsxs)(t.h3,{id:`достаточно-ли-useoverlayfocus-trapfocus-true--для-доступного-modal`,children:[`Достаточно ли `,(0,c.jsx)(t.code,{children:`useOverlayFocus({ trapFocus: true })`}),` для доступного modal?`]}),`
+`,(0,c.jsx)(t.p,{children:`Нет. Нужны semantic role, accessible name, close command, inert/background policy, stack management, scroll policy и проверка keyboard/screen-reader сценария.`})]})}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};