@ryuzaki13/react-foundation-ui 1.8.11 → 1.8.13

package/storybook-static/assets/README-Bx6fvSBE.js

@@ -0,0 +1,1282 @@
+import{n as e}from"./rolldown-runtime-DkW27tQK.js";import{n as t}from"./iframe-o7sH2IXC.js";import{i as n,r}from"./react-Bl2r1tuC.js";import{l as i,m as a}from"./blocks-BY40djCc.js";function o(e){let t={a:`a`,code:`code`,h1:`h1`,h2:`h2`,h3:`h3`,li:`li`,ol:`ol`,p:`p`,pre:`pre`,table:`table`,tbody:`tbody`,td:`td`,th:`th`,thead:`thead`,tr:`tr`,ul:`ul`,...n(),...e.components};return(0,c.jsxs)(c.Fragment,{children:[(0,c.jsx)(i,{title:`Foundation Lib/API/Media`}),`
+`,(0,c.jsxs)(t.h1,{id:`адаптивность-и-media-queries-через-ryuzaki13react-foundation-libmedia`,children:[`Адаптивность и media queries через `,(0,c.jsx)(t.code,{children:`@ryuzaki13/react-foundation-lib/media`})]}),`
+`,(0,c.jsxs)(t.p,{children:[`Модуль `,(0,c.jsx)(t.code,{children:`media`}),` содержит общий низкоуровневый контракт адаптивности для React-приложений:`]}),`
+`,(0,c.jsxs)(t.ul,{children:[`
+`,(0,c.jsxs)(t.li,{children:[`проектные брейкпоинты `,(0,c.jsx)(t.code,{children:`mobile`}),`, `,(0,c.jsx)(t.code,{children:`tablet`}),` и `,(0,c.jsx)(t.code,{children:`laptop`}),`;`]}),`
+`,(0,c.jsx)(t.li,{children:`React hook для произвольного CSS media query;`}),`
+`,(0,c.jsx)(t.li,{children:`React hook, который сообщает текущий проектный брейкпоинт;`}),`
+`,(0,c.jsxs)(t.li,{children:[`типы и функции для responsive-значений вида `,(0,c.jsx)(t.code,{children:`{ mobile, tablet, laptop }`}),`;`]}),`
+`,(0,c.jsxs)(t.li,{children:[`чтение вычисленных `,(0,c.jsx)(t.code,{children:`font-size`}),` и `,(0,c.jsx)(t.code,{children:`line-height`}),` из DOM;`]}),`
+`,(0,c.jsxs)(t.li,{children:[`преобразование количества пикселей относительно размера `,(0,c.jsx)(t.code,{children:`em`}),`;`]}),`
+`,(0,c.jsx)(t.li,{children:`расчёт проектной высоты control.`}),`
+`]}),`
+`,(0,c.jsx)(t.p,{children:`Документ рассчитан на разработчика, который использует опубликованный пакет без доступа к его исходному коду. Поэтому ниже отдельно объясняются базовые понятия CSS и React, точные значения, fallback-порядок, SSR, hydration, подписки, cleanup, ограничения и все публичные exports.`}),`
+`,(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%B3%D1%80%D0%B0%D0%BD%D0%B8%D1%86%D0%B0-%D0%BE%D1%82%D0%B2%D0%B5%D1%82%D1%81%D1%82%D0%B2%D0%B5%D0%BD%D0%BD%D0%BE%D1%81%D1%82%D0%B8`,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:`#%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%BF%D1%80%D0%BE%D0%B5%D0%BA%D1%82%D0%BD%D1%8B%D0%B5-%D0%B1%D1%80%D0%B5%D0%B9%D0%BA%D0%BF%D0%BE%D0%B8%D0%BD%D1%82%D1%8B`,children:`Проектные брейкпоинты`})}),`
+`,(0,c.jsx)(t.li,{children:(0,c.jsx)(t.a,{href:`#usemediaquery`,children:(0,c.jsx)(t.code,{children:`useMediaQuery`})})}),`
+`,(0,c.jsx)(t.li,{children:(0,c.jsx)(t.a,{href:`#usematchmedia`,children:(0,c.jsx)(t.code,{children:`useMatchMedia`})})}),`
+`,(0,c.jsx)(t.li,{children:(0,c.jsx)(t.a,{href:`#responsive-%D0%B7%D0%BD%D0%B0%D1%87%D0%B5%D0%BD%D0%B8%D1%8F`,children:`Responsive-значения`})}),`
+`,(0,c.jsx)(t.li,{children:(0,c.jsx)(t.a,{href:`#isresponsivemap`,children:(0,c.jsx)(t.code,{children:`isResponsiveMap`})})}),`
+`,(0,c.jsx)(t.li,{children:(0,c.jsx)(t.a,{href:`#resolveresponsivevalue`,children:(0,c.jsx)(t.code,{children:`resolveResponsiveValue`})})}),`
+`,(0,c.jsx)(t.li,{children:(0,c.jsx)(t.a,{href:`#resolveprops`,children:(0,c.jsx)(t.code,{children:`resolveProps`})})}),`
+`,(0,c.jsx)(t.li,{children:(0,c.jsx)(t.a,{href:`#%D0%BF%D0%BE%D0%BB%D0%BD%D1%8B%D0%B9-react-%D0%BF%D1%80%D0%B8%D0%BC%D0%B5%D1%80`,children:`Полный React-пример`})}),`
+`,(0,c.jsx)(t.li,{children:(0,c.jsx)(t.a,{href:`#dom-%D0%BC%D0%B5%D1%82%D1%80%D0%B8%D0%BA%D0%B8`,children:`DOM-метрики`})}),`
+`,(0,c.jsx)(t.li,{children:(0,c.jsx)(t.a,{href:`#pxtoem`,children:(0,c.jsx)(t.code,{children:`pxToEm`})})}),`
+`,(0,c.jsx)(t.li,{children:(0,c.jsx)(t.a,{href:`#css-%D0%B8%D0%BB%D0%B8-javascript`,children:`CSS или JavaScript`})}),`
+`,(0,c.jsx)(t.li,{children:(0,c.jsx)(t.a,{href:`#ssr-%D0%B8-hydration`,children:`SSR и hydration`})}),`
+`,(0,c.jsx)(t.li,{children:(0,c.jsx)(t.a,{href:`#%D0%B4%D0%BE%D1%81%D1%82%D1%83%D0%BF%D0%BD%D0%BE%D1%81%D1%82%D1%8C`,children:`Доступность`})}),`
+`,(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-%D0%B8-lifecycle`,children:`Производительность и lifecycle`})}),`
+`,(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:`#%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:`#api-%D1%81%D0%BF%D1%80%D0%B0%D0%B2%D0%BE%D1%87%D0%BD%D0%B8%D0%BA`,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.jsx)(t.h3,{id:`что-делает-модуль`,children:`Что делает модуль`}),`
+`,(0,c.jsxs)(t.ul,{children:[`
+`,(0,c.jsx)(t.li,{children:`хранит единый набор project breakpoints;`}),`
+`,(0,c.jsxs)(t.li,{children:[`преобразует breakpoints из `,(0,c.jsx)(t.code,{children:`em`}),` в browser media queries;`]}),`
+`,(0,c.jsx)(t.li,{children:`подписывает React-компонент на изменение media query;`}),`
+`,(0,c.jsxs)(t.li,{children:[`предоставляет стабильный snapshot через React `,(0,c.jsx)(t.code,{children:`useSyncExternalStore`}),`;`]}),`
+`,(0,c.jsx)(t.li,{children:`безопасно отдаёт заранее определённый snapshot во время server render;`}),`
+`,(0,c.jsx)(t.li,{children:`выбирает значение для текущего брейкпоинта с документированным fallback;`}),`
+`,(0,c.jsx)(t.li,{children:`поверхностно разрешает выбранные responsive props;`}),`
+`,(0,c.jsx)(t.li,{children:`читает несколько вычисленных CSS-метрик в браузере;`}),`
+`,(0,c.jsx)(t.li,{children:`освобождает media-query listeners и DOM observers после ухода последнего подписчика.`}),`
+`]}),`
+`,(0,c.jsx)(t.h3,{id:`чего-модуль-не-делает`,children:`Чего модуль не делает`}),`
+`,(0,c.jsxs)(t.ul,{children:[`
+`,(0,c.jsx)(t.li,{children:`не создаёт готовые React-компоненты layout;`}),`
+`,(0,c.jsx)(t.li,{children:`не генерирует CSS-классы и CSS custom properties;`}),`
+`,(0,c.jsxs)(t.li,{children:[`не заменяет CSS `,(0,c.jsx)(t.code,{children:`@media`}),` и container queries;`]}),`
+`,(0,c.jsxs)(t.li,{children:[`не определяет ориентацию, hover, pointer, color scheme или motion автоматически — для этого передайте собственный query в `,(0,c.jsx)(t.code,{children:`useMediaQuery`}),`;`]}),`
+`,(0,c.jsxs)(t.li,{children:[`не предоставляет брейкпоинт `,(0,c.jsx)(t.code,{children:`desktop`}),`;`]}),`
+`,(0,c.jsx)(t.li,{children:`не валидирует строку произвольного media query;`}),`
+`,(0,c.jsx)(t.li,{children:`не рекурсивно обходит вложенные объекты;`}),`
+`,(0,c.jsx)(t.li,{children:`не измеряет ширину конкретного компонента или контейнера;`}),`
+`,(0,c.jsx)(t.li,{children:`не предоставляет polyfill для browser APIs;`}),`
+`,(0,c.jsx)(t.li,{children:`не гарантирует одинаковую разметку для разных viewport на сервере;`}),`
+`,(0,c.jsx)(t.li,{children:`не является дизайн-системой.`}),`
+`]}),`
+`,(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:[`Готовые `,(0,c.jsx)(t.code,{children:`Flex`}),`, `,(0,c.jsx)(t.code,{children:`Grid`}),` и responsive UI primitives`]}),(0,c.jsx)(t.td,{children:(0,c.jsx)(t.code,{children:`@ryuzaki13/react-foundation-ui/<module>`})})]}),(0,c.jsxs)(t.tr,{children:[(0,c.jsx)(t.td,{children:`Общие media-query hooks и responsive resolver`}),(0,c.jsx)(t.td,{children:(0,c.jsx)(t.code,{children:`@ryuzaki13/react-foundation-lib/media`})})]}),(0,c.jsxs)(t.tr,{children:[(0,c.jsx)(t.td,{children:`Наблюдение за размером конкретного DOM-элемента`}),(0,c.jsxs)(t.td,{children:[(0,c.jsx)(t.code,{children:`@ryuzaki13/react-foundation-lib/dom`}),` или container query`]})]}),(0,c.jsxs)(t.tr,{children:[(0,c.jsx)(t.td,{children:`Touch/coarse-pointer capability`}),(0,c.jsxs)(t.td,{children:[(0,c.jsx)(t.code,{children:`useIsTouchDevice`}),` из `,(0,c.jsx)(t.code,{children:`@ryuzaki13/react-foundation-lib/dom`})]})]}),(0,c.jsxs)(t.tr,{children:[(0,c.jsx)(t.td,{children:`Debounce/throttle пользовательских callbacks`}),(0,c.jsx)(t.td,{children:(0,c.jsx)(t.code,{children:`@ryuzaki13/react-foundation-lib/hooks`})})]}),(0,c.jsxs)(t.tr,{children:[(0,c.jsx)(t.td,{children:`Бизнес-решение «что показывать пользователю»`}),(0,c.jsx)(t.td,{children:`entity/feature/widget host-приложения`})]})]})]}),`
+`,(0,c.jsx)(t.p,{children:`Если задача решается только стилями, сначала используйте CSS. JavaScript hook нужен, когда media query действительно влияет на вычисления, выбор поведения, параметры сторонней библиотеки или внешний store.`}),`
+`,(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 dependency:`}),`
+`,(0,c.jsx)(t.pre,{children:(0,c.jsx)(t.code,{className:`language-bash`,children:`npm install react
+`})}),`
+`,(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:[`Импортируйте runtime API только из опубликованного subpath `,(0,c.jsx)(t.code,{children:`/media`}),`:`]}),`
+`,(0,c.jsx)(t.pre,{children:(0,c.jsx)(t.code,{className:`language-ts`,children:`import {
+	BREAKPOINTS_EM,
+	getControlHeight,
+	getCurrentFontSize,
+	getCurrentLineHeight,
+	isResponsiveMap,
+	pxToEm,
+	resolveProps,
+	resolveResponsiveValue,
+	useMatchMedia,
+	useMediaQuery
+} from "@ryuzaki13/react-foundation-lib/media";
+`})}),`
+`,(0,c.jsxs)(t.p,{children:[`TypeScript-типы импортируйте через `,(0,c.jsx)(t.code,{children:`import type`}),`:`]}),`
+`,(0,c.jsx)(t.pre,{children:(0,c.jsx)(t.code,{className:`language-ts`,children:`import type {
+	Breakpoint,
+	MediaMatches,
+	ResolvedProps,
+	ResponsiveMap,
+	ResponsiveValue,
+	UnwrapResponsive
+} from "@ryuzaki13/react-foundation-lib/media";
+`})}),`
+`,(0,c.jsx)(t.p,{children:`Корневой и глубокий импорты не являются публичным контрактом:`}),`
+`,(0,c.jsx)(t.pre,{children:(0,c.jsx)(t.code,{className:`language-ts`,children:`// Неправильно: корневой entrypoint не опубликован.
+import { useMatchMedia } from "@ryuzaki13/react-foundation-lib";
+
+// Неправильно: внутреннее расположение файла может измениться.
+import { useMatchMedia } from "@ryuzaki13/react-foundation-lib/src/media/useMatchMedia";
+
+// Правильно.
+import { useMatchMedia } from "@ryuzaki13/react-foundation-lib/media";
+`})}),`
+`,(0,c.jsx)(t.p,{children:`Пакет поставляется как ESM.`}),`
+`,(0,c.jsx)(t.h2,{id:`минимальные-понятия`,children:`Минимальные понятия`}),`
+`,(0,c.jsx)(t.h3,{id:`viewport`,children:`Viewport`}),`
+`,(0,c.jsxs)(t.p,{children:[`Viewport — видимая область страницы в браузере. Media query `,(0,c.jsx)(t.code,{children:`width`}),` сравнивает условие с шириной viewport, а не с шириной конкретной карточки или `,(0,c.jsx)(t.code,{children:`div`}),`.`]}),`
+`,(0,c.jsx)(t.p,{children:`Если нужно реагировать на ширину отдельного контейнера, обычный viewport media query не подходит. Рассмотрите CSS container queries или измерение конкретного элемента.`}),`
+`,(0,c.jsx)(t.h3,{id:`css-pixel`,children:`CSS pixel`}),`
+`,(0,c.jsxs)(t.p,{children:[`CSS pixel — логическая единица браузерной раскладки. Она не обязана совпадать с одним физическим пикселем экрана. Значение `,(0,c.jsx)(t.code,{children:`window.innerWidth`}),` и границы media query выражаются в CSS pixels.`]}),`
+`,(0,c.jsx)(t.h3,{id:`em`,children:(0,c.jsx)(t.code,{children:`em`})}),`
+`,(0,c.jsxs)(t.p,{children:[(0,c.jsx)(t.code,{children:`em`}),` — относительная CSS-единица. В этом модуле константы брейкпоинтов хранятся в `,(0,c.jsx)(t.code,{children:`em`}),`, а `,(0,c.jsx)(t.code,{children:`useMatchMedia`}),` перед созданием query умножает их на текущий вычисленный `,(0,c.jsx)(t.code,{children:`font-size`}),` корневого элемента.`]}),`
+`,(0,c.jsxs)(t.p,{children:[`При корневом `,(0,c.jsx)(t.code,{children:`font-size: 16px`}),`:`]}),`
+`,(0,c.jsx)(t.pre,{children:(0,c.jsx)(t.code,{className:`language-text`,children:`48em × 16px = 768px
+72em × 16px = 1152px
+`})}),`
+`,(0,c.jsxs)(t.p,{children:[`При корневом `,(0,c.jsx)(t.code,{children:`font-size: 20px`}),`:`]}),`
+`,(0,c.jsx)(t.pre,{children:(0,c.jsx)(t.code,{className:`language-text`,children:`48em × 20px = 960px
+72em × 20px = 1440px
+`})}),`
+`,(0,c.jsx)(t.p,{children:`Это осознанно связывает адаптивность с настройкой базового размера текста.`}),`
+`,(0,c.jsx)(t.h3,{id:`media-query`,children:`Media query`}),`
+`,(0,c.jsx)(t.p,{children:`Media query — условие среды отображения:`}),`
+`,(0,c.jsx)(t.pre,{children:(0,c.jsx)(t.code,{className:`language-css`,children:`@media (width >= 768px) {
+	/* Стили для достаточно широкого viewport. */
+}
+`})}),`
+`,(0,c.jsxs)(t.p,{children:[`JavaScript получает результат условия через `,(0,c.jsx)(t.code,{children:`window.matchMedia`}),`:`]}),`
+`,(0,c.jsx)(t.pre,{children:(0,c.jsx)(t.code,{className:`language-ts`,children:`const result = window.matchMedia("(prefers-reduced-motion: reduce)");
+
+console.log(result.matches);
+`})}),`
+`,(0,c.jsxs)(t.p,{children:[(0,c.jsx)(t.code,{children:`result.matches`}),` — boolean: `,(0,c.jsx)(t.code,{children:`true`}),`, если условие сейчас выполняется, иначе `,(0,c.jsx)(t.code,{children:`false`}),`.`]}),`
+`,(0,c.jsx)(t.h3,{id:`react-hook`,children:`React hook`}),`
+`,(0,c.jsxs)(t.p,{children:[(0,c.jsx)(t.code,{children:`useMediaQuery`}),` и `,(0,c.jsx)(t.code,{children:`useMatchMedia`}),` являются React hooks. Вызывайте их:`]}),`
+`,(0,c.jsxs)(t.ul,{children:[`
+`,(0,c.jsx)(t.li,{children:`на верхнем уровне function component;`}),`
+`,(0,c.jsx)(t.li,{children:`на верхнем уровне другого custom hook;`}),`
+`,(0,c.jsx)(t.li,{children:`всегда в одинаковом порядке.`}),`
+`]}),`
+`,(0,c.jsx)(t.pre,{children:(0,c.jsx)(t.code,{className:`language-tsx`,children:`// Неправильно.
+if (enabled) {
+	const isMobile = useMediaQuery("(width < 768px)");
+}
+
+// Правильно.
+const isMobile = useMediaQuery("(width < 768px)");
+
+if (!enabled) {
+	return null;
+}
+`})}),`
+`,(0,c.jsx)(t.h3,{id:`что-такое-ssr-и-hydration`,children:`Что такое SSR и hydration`}),`
+`,(0,c.jsxs)(t.p,{children:[`SSR — создание HTML на сервере, где нет `,(0,c.jsx)(t.code,{children:`window`}),` и неизвестна реальная ширина экрана пользователя.`]}),`
+`,(0,c.jsx)(t.p,{children:`Hydration — подключение React к уже созданному серверному HTML в браузере. Начальный client snapshot должен быть согласован с server snapshot, иначе React может получить различающуюся разметку.`}),`
+`,(0,c.jsxs)(t.p,{children:[`Hooks модуля используют `,(0,c.jsx)(t.code,{children:`useSyncExternalStore`}),` и отдельный server snapshot. Это делает механизм подписки SSR-безопасным, но разработчик всё равно отвечает за UX при последующем изменении значения в браузере.`]}),`
+`,(0,c.jsx)(t.h3,{id:`breakpoint`,children:`Breakpoint`}),`
+`,(0,c.jsx)(t.p,{children:`Breakpoint — именованный диапазон ширины. В модуле их ровно три:`}),`
+`,(0,c.jsx)(t.pre,{children:(0,c.jsx)(t.code,{className:`language-ts`,children:`type Breakpoint = "mobile" | "tablet" | "laptop";
+`})}),`
+`,(0,c.jsxs)(t.p,{children:[(0,c.jsx)(t.code,{children:`laptop`}),` охватывает также более широкие desktop viewport. Отдельного `,(0,c.jsx)(t.code,{children:`desktop`}),` в публичном типе нет.`]}),`
+`,(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.jsxs)(t.td,{children:[`Проверить `,(0,c.jsx)(t.code,{children:`prefers-color-scheme`}),`, `,(0,c.jsx)(t.code,{children:`prefers-reduced-motion`}),`, `,(0,c.jsx)(t.code,{children:`orientation`}),` или собственную ширину`]}),(0,c.jsx)(t.td,{children:(0,c.jsx)(t.code,{children:`useMediaQuery(query, options?)`})})]}),(0,c.jsxs)(t.tr,{children:[(0,c.jsxs)(t.td,{children:[`Получить `,(0,c.jsx)(t.code,{children:`mobile`}),` / `,(0,c.jsx)(t.code,{children:`tablet`}),` / `,(0,c.jsx)(t.code,{children:`laptop`}),` по проектным границам`]}),(0,c.jsx)(t.td,{children:(0,c.jsx)(t.code,{children:`useMatchMedia()`})})]}),(0,c.jsxs)(t.tr,{children:[(0,c.jsx)(t.td,{children:`Описать prop как обычное или responsive-значение`}),(0,c.jsx)(t.td,{children:(0,c.jsx)(t.code,{children:`ResponsiveValue<T>`})})]}),(0,c.jsxs)(t.tr,{children:[(0,c.jsx)(t.td,{children:`Выбрать одно responsive-значение без React`}),(0,c.jsx)(t.td,{children:(0,c.jsx)(t.code,{children:`resolveResponsiveValue(value, breakpoint)`})})]}),(0,c.jsxs)(t.tr,{children:[(0,c.jsx)(t.td,{children:`Разрешить несколько выбранных props`}),(0,c.jsx)(t.td,{children:(0,c.jsx)(t.code,{children:`resolveProps(props, breakpoint, keys)`})})]}),(0,c.jsxs)(t.tr,{children:[(0,c.jsx)(t.td,{children:`Проверить runtime-объект на responsive keys`}),(0,c.jsx)(t.td,{children:(0,c.jsx)(t.code,{children:`isResponsiveMap(value)`})})]}),(0,c.jsxs)(t.tr,{children:[(0,c.jsxs)(t.td,{children:[`Прочитать вычисленный `,(0,c.jsx)(t.code,{children:`font-size`})]}),(0,c.jsx)(t.td,{children:(0,c.jsx)(t.code,{children:`getCurrentFontSize(element?)`})})]}),(0,c.jsxs)(t.tr,{children:[(0,c.jsxs)(t.td,{children:[`Прочитать нормализованный `,(0,c.jsx)(t.code,{children:`line-height`})]}),(0,c.jsx)(t.td,{children:(0,c.jsx)(t.code,{children:`getCurrentLineHeight(element?)`})})]}),(0,c.jsxs)(t.tr,{children:[(0,c.jsx)(t.td,{children:`Получить проектную высоту control`}),(0,c.jsx)(t.td,{children:(0,c.jsx)(t.code,{children:`getControlHeight()`})})]}),(0,c.jsxs)(t.tr,{children:[(0,c.jsxs)(t.td,{children:[`Разделить px на базовый размер `,(0,c.jsx)(t.code,{children:`em`})]}),(0,c.jsx)(t.td,{children:(0,c.jsx)(t.code,{children:`pxToEm(px, baseEm?)`})})]}),(0,c.jsxs)(t.tr,{children:[(0,c.jsx)(t.td,{children:`Изменить только внешний вид на разных ширинах`}),(0,c.jsxs)(t.td,{children:[`CSS `,(0,c.jsx)(t.code,{children:`@media`}),` или container query`]})]})]})]}),`
+`,(0,c.jsx)(t.h2,{id:`проектные-брейкпоинты`,children:`Проектные брейкпоинты`}),`
+`,(0,c.jsx)(t.h3,{id:`breakpoint-1`,children:(0,c.jsx)(t.code,{children:`Breakpoint`})}),`
+`,(0,c.jsxs)(t.p,{children:[(0,c.jsx)(t.code,{children:`Breakpoint`}),` — union type:`]}),`
+`,(0,c.jsx)(t.pre,{children:(0,c.jsx)(t.code,{className:`language-ts`,children:`type Breakpoint = "mobile" | "tablet" | "laptop";
+`})}),`
+`,(0,c.jsx)(t.pre,{children:(0,c.jsx)(t.code,{className:`language-ts`,children:`import type { Breakpoint } from "@ryuzaki13/react-foundation-lib/media";
+
+const valid: Breakpoint = "tablet";
+
+// Ошибка TypeScript.
+const invalid: Breakpoint = "desktop";
+`})}),`
+`,(0,c.jsx)(t.h3,{id:`breakpoints_em`,children:(0,c.jsx)(t.code,{children:`BREAKPOINTS_EM`})}),`
+`,(0,c.jsxs)(t.p,{children:[`Константа хранит числовые границы в `,(0,c.jsx)(t.code,{children:`em`}),`:`]}),`
+`,(0,c.jsx)(t.pre,{children:(0,c.jsx)(t.code,{className:`language-ts`,children:`const BREAKPOINTS_EM = {
+	mobileMax: 767.98 / 16,
+	tabletMin: 768 / 16,
+	tabletMax: 1151.98 / 16,
+	laptopMin: 1152 / 16
+} as const;
+`})}),`
+`,(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.jsxs)(t.th,{style:{textAlign:`right`},children:[`Значение в `,(0,c.jsx)(t.code,{children:`em`})]}),(0,c.jsxs)(t.th,{style:{textAlign:`right`},children:[`При базе `,(0,c.jsx)(t.code,{children:`16px`})]}),(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:`mobileMax`})}),(0,c.jsx)(t.td,{style:{textAlign:`right`},children:(0,c.jsx)(t.code,{children:`47.99875`})}),(0,c.jsx)(t.td,{style:{textAlign:`right`},children:(0,c.jsx)(t.code,{children:`767.98px`})}),(0,c.jsx)(t.td,{children:`верхняя граница mobile`})]}),(0,c.jsxs)(t.tr,{children:[(0,c.jsx)(t.td,{children:(0,c.jsx)(t.code,{children:`tabletMin`})}),(0,c.jsx)(t.td,{style:{textAlign:`right`},children:(0,c.jsx)(t.code,{children:`48`})}),(0,c.jsx)(t.td,{style:{textAlign:`right`},children:(0,c.jsx)(t.code,{children:`768px`})}),(0,c.jsx)(t.td,{children:`нижняя граница tablet`})]}),(0,c.jsxs)(t.tr,{children:[(0,c.jsx)(t.td,{children:(0,c.jsx)(t.code,{children:`tabletMax`})}),(0,c.jsx)(t.td,{style:{textAlign:`right`},children:(0,c.jsx)(t.code,{children:`71.99875`})}),(0,c.jsx)(t.td,{style:{textAlign:`right`},children:(0,c.jsx)(t.code,{children:`1151.98px`})}),(0,c.jsx)(t.td,{children:`верхняя граница tablet`})]}),(0,c.jsxs)(t.tr,{children:[(0,c.jsx)(t.td,{children:(0,c.jsx)(t.code,{children:`laptopMin`})}),(0,c.jsx)(t.td,{style:{textAlign:`right`},children:(0,c.jsx)(t.code,{children:`72`})}),(0,c.jsx)(t.td,{style:{textAlign:`right`},children:(0,c.jsx)(t.code,{children:`1152px`})}),(0,c.jsx)(t.td,{children:`нижняя граница laptop`})]})]})]}),`
+`,(0,c.jsxs)(t.p,{children:[(0,c.jsx)(t.code,{children:`BREAKPOINTS_EM`}),` имеет `,(0,c.jsx)(t.code,{children:`as const`}),`-тип. Не изменяйте его поля в consumer-коде.`]}),`
+`,(0,c.jsx)(t.h3,{id:`mediamatches`,children:(0,c.jsx)(t.code,{children:`MediaMatches`})}),`
+`,(0,c.jsxs)(t.p,{children:[(0,c.jsx)(t.code,{children:`MediaMatches`}),` хранит boolean для каждого breakpoint:`]}),`
+`,(0,c.jsx)(t.pre,{children:(0,c.jsx)(t.code,{className:`language-ts`,children:`type MediaMatches = Record<Breakpoint, boolean>;
+`})}),`
+`,(0,c.jsx)(t.p,{children:`Эквивалентная форма:`}),`
+`,(0,c.jsx)(t.pre,{children:(0,c.jsx)(t.code,{className:`language-ts`,children:`type MediaMatches = {
+	mobile: boolean;
+	tablet: boolean;
+	laptop: boolean;
+};
+`})}),`
+`,(0,c.jsx)(t.h3,{id:`как-границы-зависят-от-root-font-size`,children:`Как границы зависят от root font-size`}),`
+`,(0,c.jsxs)(t.p,{children:[(0,c.jsx)(t.code,{children:`useMatchMedia`}),` читает `,(0,c.jsx)(t.code,{children:`font-size`}),` у `,(0,c.jsx)(t.code,{children:`document.documentElement`}),` и строит query в пикселях:`]}),`
+`,(0,c.jsx)(t.pre,{children:(0,c.jsx)(t.code,{className:`language-text`,children:`граница в px = BREAKPOINTS_EM.<поле> × текущий root font-size
+`})}),`
+`,(0,c.jsxs)(t.table,{children:[(0,c.jsx)(t.thead,{children:(0,c.jsxs)(t.tr,{children:[(0,c.jsx)(t.th,{style:{textAlign:`right`},children:`Root font-size`}),(0,c.jsx)(t.th,{children:`Mobile`}),(0,c.jsx)(t.th,{children:`Tablet`}),(0,c.jsx)(t.th,{children:`Laptop`})]})}),(0,c.jsxs)(t.tbody,{children:[(0,c.jsxs)(t.tr,{children:[(0,c.jsx)(t.td,{style:{textAlign:`right`},children:(0,c.jsx)(t.code,{children:`16px`})}),(0,c.jsxs)(t.td,{children:[`до `,(0,c.jsx)(t.code,{children:`767.98px`})]}),(0,c.jsxs)(t.td,{children:[(0,c.jsx)(t.code,{children:`768px`}),` — `,(0,c.jsx)(t.code,{children:`1151.98px`})]}),(0,c.jsxs)(t.td,{children:[`от `,(0,c.jsx)(t.code,{children:`1152px`})]})]}),(0,c.jsxs)(t.tr,{children:[(0,c.jsx)(t.td,{style:{textAlign:`right`},children:(0,c.jsx)(t.code,{children:`18px`})}),(0,c.jsxs)(t.td,{children:[`до `,(0,c.jsx)(t.code,{children:`863.9775px`})]}),(0,c.jsxs)(t.td,{children:[(0,c.jsx)(t.code,{children:`864px`}),` — `,(0,c.jsx)(t.code,{children:`1295.9775px`})]}),(0,c.jsxs)(t.td,{children:[`от `,(0,c.jsx)(t.code,{children:`1296px`})]})]}),(0,c.jsxs)(t.tr,{children:[(0,c.jsx)(t.td,{style:{textAlign:`right`},children:(0,c.jsx)(t.code,{children:`20px`})}),(0,c.jsxs)(t.td,{children:[`до `,(0,c.jsx)(t.code,{children:`959.975px`})]}),(0,c.jsxs)(t.td,{children:[(0,c.jsx)(t.code,{children:`960px`}),` — `,(0,c.jsx)(t.code,{children:`1439.975px`})]}),(0,c.jsxs)(t.td,{children:[`от `,(0,c.jsx)(t.code,{children:`1440px`})]})]})]})]}),`
+`,(0,c.jsxs)(t.p,{children:[`Это отличается от жёстко записанного `,(0,c.jsx)(t.code,{children:`(width < 768px)`}),`: пользователь с увеличенным базовым шрифтом дольше остаётся в более компактном layout.`]}),`
+`,(0,c.jsx)(t.h3,{id:`микрозазоры-между-диапазонами`,children:`Микрозазоры между диапазонами`}),`
+`,(0,c.jsxs)(t.p,{children:[`Между `,(0,c.jsx)(t.code,{children:`mobileMax`}),` и `,(0,c.jsx)(t.code,{children:`tabletMin`}),`, а также между `,(0,c.jsx)(t.code,{children:`tabletMax`}),` и `,(0,c.jsx)(t.code,{children:`laptopMin`}),` есть разница `,(0,c.jsx)(t.code,{children:`0.02px`}),` при базе `,(0,c.jsx)(t.code,{children:`16px`}),`. Она предотвращает одновременное совпадение соседних диапазонов на общей границе.`]}),`
+`,(0,c.jsxs)(t.p,{children:[`При дробной ширине внутри такого очень узкого зазора все три `,(0,c.jsx)(t.code,{children:`matches`}),` теоретически могут быть `,(0,c.jsx)(t.code,{children:`false`}),`. В этом случае `,(0,c.jsx)(t.code,{children:`activeBreakpoint`}),` будет `,(0,c.jsx)(t.code,{children:`"laptop"`}),`, потому что это fallback алгоритма.`]}),`
+`,(0,c.jsxs)(t.p,{children:[`Не воспроизводите границы вручную. Используйте `,(0,c.jsx)(t.code,{children:`BREAKPOINTS_EM`}),` или `,(0,c.jsx)(t.code,{children:`useMatchMedia`}),`, чтобы разные компоненты не получили расходящиеся значения.`]}),`
+`,(0,c.jsx)(t.h2,{id:`usemediaquery`,children:(0,c.jsx)(t.code,{children:`useMediaQuery`})}),`
+`,(0,c.jsxs)(t.p,{children:[(0,c.jsx)(t.code,{children:`useMediaQuery`}),` подписывает React-компонент на один произвольный media query и возвращает boolean.`]}),`
+`,(0,c.jsx)(t.h3,{id:`сигнатура`,children:`Сигнатура`}),`
+`,(0,c.jsx)(t.pre,{children:(0,c.jsx)(t.code,{className:`language-ts`,children:`function useMediaQuery(
+	query: string,
+	options?: {
+		readonly ssrFallback?: boolean;
+	}
+): boolean;
+`})}),`
+`,(0,c.jsx)(t.p,{children:`Тип options является частью сигнатуры функции, но не экспортируется отдельным именем.`}),`
+`,(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:`query`})}),(0,c.jsx)(t.td,{children:(0,c.jsx)(t.code,{children:`string`})}),(0,c.jsx)(t.td,{children:`обязательный`}),(0,c.jsxs)(t.td,{children:[`условие для `,(0,c.jsx)(t.code,{children:`window.matchMedia`})]})]}),(0,c.jsxs)(t.tr,{children:[(0,c.jsx)(t.td,{children:(0,c.jsx)(t.code,{children:`options.ssrFallback`})}),(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:`false`})}),(0,c.jsx)(t.td,{children:`значение на сервере и начальной hydration-фазе`})]})]})]}),`
+`,(0,c.jsx)(t.h3,{id:`возвращаемое-значение`,children:`Возвращаемое значение`}),`
+`,(0,c.jsxs)(t.ul,{children:[`
+`,(0,c.jsxs)(t.li,{children:[(0,c.jsx)(t.code,{children:`true`}),` — query сейчас совпадает;`]}),`
+`,(0,c.jsxs)(t.li,{children:[(0,c.jsx)(t.code,{children:`false`}),` — query не совпадает или browser API недоступен и fallback равен `,(0,c.jsx)(t.code,{children:`false`}),`.`]}),`
+`]}),`
+`,(0,c.jsx)(t.h3,{id:`минимальный-пример`,children:`Минимальный пример`}),`
+`,(0,c.jsx)(t.pre,{children:(0,c.jsx)(t.code,{className:`language-tsx`,children:`import { useMediaQuery } from "@ryuzaki13/react-foundation-lib/media";
+
+export function ColorSchemeStatus() {
+	const prefersDark = useMediaQuery("(prefers-color-scheme: dark)");
+
+	return <p>Системная тема: {prefersDark ? "тёмная" : "светлая"}</p>;
+}
+`})}),`
+`,(0,c.jsxs)(t.p,{children:[`Передавайте только внутреннее условие. Не добавляйте CSS-директиву `,(0,c.jsx)(t.code,{children:`@media`}),`:`]}),`
+`,(0,c.jsx)(t.pre,{children:(0,c.jsx)(t.code,{className:`language-tsx`,children:`// Правильно.
+useMediaQuery("(prefers-reduced-motion: reduce)");
+
+// Неправильно.
+useMediaQuery("@media (prefers-reduced-motion: reduce)");
+`})}),`
+`,(0,c.jsx)(t.h3,{id:`доступность-reduced-motion`,children:`Доступность: reduced motion`}),`
+`,(0,c.jsx)(t.pre,{children:(0,c.jsx)(t.code,{className:`language-tsx`,children:`import { useMediaQuery } from "@ryuzaki13/react-foundation-lib/media";
+
+export function AnimatedProgress({ value }: { value: number }) {
+	const reduceMotion = useMediaQuery("(prefers-reduced-motion: reduce)");
+	const label = "Прогресс: " + value + "%";
+	const transform = "scaleX(" + value / 100 + ")";
+
+	return (
+		<div
+			aria-label={label}
+			style={{
+				transform,
+				transition: reduceMotion ? "none" : "transform 200ms ease"
+			}}
+		/>
+	);
+}
+`})}),`
+`,(0,c.jsx)(t.p,{children:`Preference должна улучшать доступность, но сам hook не добавляет ARIA и не изменяет CSS.`}),`
+`,(0,c.jsx)(t.h3,{id:`ssr-fallback`,children:`SSR fallback`}),`
+`,(0,c.jsxs)(t.p,{children:[`На сервере нельзя узнать `,(0,c.jsx)(t.code,{children:`window.matchMedia(...).matches`}),`. Поэтому hook возвращает `,(0,c.jsx)(t.code,{children:`ssrFallback`}),`:`]}),`
+`,(0,c.jsx)(t.pre,{children:(0,c.jsx)(t.code,{className:`language-tsx`,children:`const prefersDark = useMediaQuery("(prefers-color-scheme: dark)", {
+	ssrFallback: false
+});
+`})}),`
+`,(0,c.jsx)(t.p,{children:`Во время hydration React сначала использует то же fallback-значение, затем читает реальный query в браузере и при необходимости перерисовывает компонент.`}),`
+`,(0,c.jsx)(t.p,{children:`Выбирайте fallback по смыслу:`}),`
+`,(0,c.jsxs)(t.ul,{children:[`
+`,(0,c.jsxs)(t.li,{children:[(0,c.jsx)(t.code,{children:`false`}),` подходит для безопасного базового поведения;`]}),`
+`,(0,c.jsx)(t.li,{children:`значение из server cookie подходит, если сервер и клиент используют один источник;`}),`
+`,(0,c.jsxs)(t.li,{children:[`значение из заранее выставленного `,(0,c.jsx)(t.code,{children:`data-*`}),` атрибута можно передать, если оно согласовано с серверной разметкой;`]}),`
+`,(0,c.jsxs)(t.li,{children:[`не пытайтесь читать `,(0,c.jsx)(t.code,{children:`window`}),` прямо на сервере.`]}),`
+`]}),`
+`,(0,c.jsx)(t.pre,{children:(0,c.jsx)(t.code,{className:`language-tsx`,children:`type Scheme = "light" | "dark";
+
+function useSystemDarkScheme(serverScheme: Scheme) {
+	return useMediaQuery("(prefers-color-scheme: dark)", {
+		ssrFallback: serverScheme === "dark"
+	});
+}
+`})}),`
+`,(0,c.jsx)(t.h3,{id:`lifecycle-подписки`,children:`Lifecycle подписки`}),`
+`,(0,c.jsxs)(t.ol,{children:[`
+`,(0,c.jsxs)(t.li,{children:[`React читает snapshot через `,(0,c.jsx)(t.code,{children:`window.matchMedia(query).matches`}),`.`]}),`
+`,(0,c.jsxs)(t.li,{children:[`Hook подписывается на событие `,(0,c.jsx)(t.code,{children:`change`}),` соответствующего `,(0,c.jsx)(t.code,{children:`MediaQueryList`}),`.`]}),`
+`,(0,c.jsx)(t.li,{children:`При изменении browser вызывает listener.`}),`
+`,(0,c.jsxs)(t.li,{children:[(0,c.jsx)(t.code,{children:`useSyncExternalStore`}),` повторно читает snapshot.`]}),`
+`,(0,c.jsx)(t.li,{children:`React перерисовывает component, если boolean изменился.`}),`
+`,(0,c.jsxs)(t.li,{children:[`При изменении строки `,(0,c.jsx)(t.code,{children:`query`}),` старая подписка очищается и создаётся новая.`]}),`
+`,(0,c.jsx)(t.li,{children:`При unmount listener удаляется.`}),`
+`]}),`
+`,(0,c.jsxs)(t.p,{children:[`Современные браузеры используют `,(0,c.jsx)(t.code,{children:`addEventListener("change", ...)`}),`. Для legacy Safari предусмотрен fallback на `,(0,c.jsx)(t.code,{children:`addListener`}),` / `,(0,c.jsx)(t.code,{children:`removeListener`}),`.`]}),`
+`,(0,c.jsx)(t.h3,{id:`динамический-query`,children:`Динамический query`}),`
+`,(0,c.jsx)(t.pre,{children:(0,c.jsx)(t.code,{className:`language-tsx`,children:`import { useMemo } from "react";
+
+import { useMediaQuery } from "@ryuzaki13/react-foundation-lib/media";
+
+export function WidthStatus({ minWidth }: { minWidth: number }) {
+	const query = useMemo(() => "(width >= " + minWidth + "px)", [minWidth]);
+	const matches = useMediaQuery(query);
+
+	return <span>{matches ? "Достаточно места" : "Мало места"}</span>;
+}
+`})}),`
+`,(0,c.jsxs)(t.p,{children:[(0,c.jsx)(t.code,{children:`useMemo`}),` здесь не обязателен: React dependency сравнивается по строковому значению. Он только делает зависимость query от `,(0,c.jsx)(t.code,{children:`minWidth`}),` очевидной.`]}),`
+`,(0,c.jsxs)(t.h3,{id:`если-matchmedia-отсутствует`,children:[`Если `,(0,c.jsx)(t.code,{children:`matchMedia`}),` отсутствует`]}),`
+`,(0,c.jsxs)(t.p,{children:[`В Node.js или неполном test DOM `,(0,c.jsx)(t.code,{children:`window.matchMedia`}),` может отсутствовать. Тогда:`]}),`
+`,(0,c.jsxs)(t.ul,{children:[`
+`,(0,c.jsxs)(t.li,{children:[`snapshot равен `,(0,c.jsx)(t.code,{children:`ssrFallback`}),`;`]}),`
+`,(0,c.jsx)(t.li,{children:`фактическая подписка не создаётся;`}),`
+`,(0,c.jsx)(t.li,{children:`hook не устанавливает polyfill;`}),`
+`,(0,c.jsx)(t.li,{children:`результат не реагирует на изменение viewport в этой среде.`}),`
+`]}),`
+`,(0,c.jsx)(t.h3,{id:`когда-использовать`,children:`Когда использовать`}),`
+`,(0,c.jsx)(t.p,{children:`Подходящие случаи:`}),`
+`,(0,c.jsxs)(t.ul,{children:[`
+`,(0,c.jsxs)(t.li,{children:[(0,c.jsx)(t.code,{children:`prefers-color-scheme`}),`;`]}),`
+`,(0,c.jsxs)(t.li,{children:[(0,c.jsx)(t.code,{children:`prefers-reduced-motion`}),`;`]}),`
+`,(0,c.jsxs)(t.li,{children:[(0,c.jsx)(t.code,{children:`prefers-contrast`}),`;`]}),`
+`,(0,c.jsxs)(t.li,{children:[(0,c.jsx)(t.code,{children:`orientation`}),`;`]}),`
+`,(0,c.jsxs)(t.li,{children:[(0,c.jsx)(t.code,{children:`hover`}),` и `,(0,c.jsx)(t.code,{children:`pointer`}),`;`]}),`
+`,(0,c.jsx)(t.li,{children:`интеграция с API, которому нужен boolean;`}),`
+`,(0,c.jsx)(t.li,{children:`изменение вычислительного поведения, которое нельзя выразить CSS.`}),`
+`]}),`
+`,(0,c.jsxs)(t.p,{children:[`Для проектных `,(0,c.jsx)(t.code,{children:`mobile`}),` / `,(0,c.jsx)(t.code,{children:`tablet`}),` / `,(0,c.jsx)(t.code,{children:`laptop`}),` предпочтительнее `,(0,c.jsx)(t.code,{children:`useMatchMedia`}),`: он использует единые границы и отслеживает изменение базового размера шрифта.`]}),`
+`,(0,c.jsx)(t.h3,{id:`ограничения`,children:`Ограничения`}),`
+`,(0,c.jsxs)(t.ul,{children:[`
+`,(0,c.jsx)(t.li,{children:`строка query передаётся браузеру без валидации;`}),`
+`,(0,c.jsxs)(t.li,{children:[`hook не возвращает сам `,(0,c.jsx)(t.code,{children:`MediaQueryList`}),`;`]}),`
+`,(0,c.jsx)(t.li,{children:`hook не сообщает причину изменения;`}),`
+`,(0,c.jsx)(t.li,{children:`для каждого вызова создаётся отдельная подписка;`}),`
+`,(0,c.jsx)(t.li,{children:`browser определяет поддержку конкретной media feature;`}),`
+`,(0,c.jsx)(t.li,{children:`результат capability query не обязательно описывает текущий способ действия пользователя.`}),`
+`]}),`
+`,(0,c.jsx)(t.h2,{id:`usematchmedia`,children:(0,c.jsx)(t.code,{children:`useMatchMedia`})}),`
+`,(0,c.jsxs)(t.p,{children:[(0,c.jsx)(t.code,{children:`useMatchMedia`}),` возвращает проектный breakpoint и сырые boolean-совпадения для всех трёх диапазонов.`]}),`
+`,(0,c.jsx)(t.h3,{id:`сигнатура-результата`,children:`Сигнатура результата`}),`
+`,(0,c.jsx)(t.pre,{children:(0,c.jsx)(t.code,{className:`language-ts`,children:`function useMatchMedia(): {
+	matches: MediaMatches;
+	activeBreakpoint: Breakpoint;
+};
+`})}),`
+`,(0,c.jsxs)(t.p,{children:[`Тип объекта snapshot не экспортируется отдельным именем. Используйте `,(0,c.jsx)(t.code,{children:`Breakpoint`}),` и `,(0,c.jsx)(t.code,{children:`MediaMatches`}),` для своих контрактов либо выводите return type:`]}),`
+`,(0,c.jsx)(t.pre,{children:(0,c.jsx)(t.code,{className:`language-ts`,children:`import { useMatchMedia } from "@ryuzaki13/react-foundation-lib/media";
+
+type MatchMediaResult = ReturnType<typeof useMatchMedia>;
+`})}),`
+`,(0,c.jsx)(t.h3,{id:`минимальный-пример-1`,children:`Минимальный пример`}),`
+`,(0,c.jsx)(t.pre,{children:(0,c.jsx)(t.code,{className:`language-tsx`,children:`import { useMatchMedia } from "@ryuzaki13/react-foundation-lib/media";
+
+export function BreakpointBadge() {
+	const { activeBreakpoint, matches } = useMatchMedia();
+
+	return (
+		<p>
+			Активный диапазон: {activeBreakpoint}. Mobile query: {matches.mobile ? "совпадает" : "не совпадает"}.
+		</p>
+	);
+}
+`})}),`
+`,(0,c.jsxs)(t.p,{children:[`Для обычного выбора используйте `,(0,c.jsx)(t.code,{children:`activeBreakpoint`}),`. `,(0,c.jsx)(t.code,{children:`matches`}),` нужен для диагностики или когда важны исходные результаты каждого query.`]}),`
+`,(0,c.jsx)(t.h3,{id:`точные-query`,children:`Точные query`}),`
+`,(0,c.jsxs)(t.p,{children:[`При текущем root font-size `,(0,c.jsx)(t.code,{children:`E`}),` hook создаёт:`]}),`
+`,(0,c.jsx)(t.pre,{children:(0,c.jsx)(t.code,{className:`language-text`,children:`mobile: (width <= mobileMax × E px)
+tablet: (width >= tabletMin × E px) and (width <= tabletMax × E px)
+laptop: (width >= laptopMin × E px)
+`})}),`
+`,(0,c.jsxs)(t.p,{children:[`При `,(0,c.jsx)(t.code,{children:`E = 16`}),` итог примерно такой:`]}),`
+`,(0,c.jsx)(t.pre,{children:(0,c.jsx)(t.code,{className:`language-text`,children:`mobile: (width <= 767.98px)
+tablet: (width >= 768px) and (width <= 1151.98px)
+laptop: (width >= 1152px)
+`})}),`
+`,(0,c.jsxs)(t.p,{children:[`Hook использует современный range-синтаксис media features. Если поддерживаемый browser не понимает этот синтаксис, соответствующий `,(0,c.jsx)(t.code,{children:`MediaQueryList.matches`}),` останется `,(0,c.jsx)(t.code,{children:`false`}),`.`]}),`
+`,(0,c.jsxs)(t.h3,{id:`как-выбирается-activebreakpoint`,children:[`Как выбирается `,(0,c.jsx)(t.code,{children:`activeBreakpoint`})]}),`
+`,(0,c.jsx)(t.p,{children:`Приоритет:`}),`
+`,(0,c.jsxs)(t.ol,{children:[`
+`,(0,c.jsxs)(t.li,{children:[`если `,(0,c.jsx)(t.code,{children:`matches.mobile === true`}),`, результат `,(0,c.jsx)(t.code,{children:`"mobile"`}),`;`]}),`
+`,(0,c.jsxs)(t.li,{children:[`иначе, если `,(0,c.jsx)(t.code,{children:`matches.tablet === true`}),`, результат `,(0,c.jsx)(t.code,{children:`"tablet"`}),`;`]}),`
+`,(0,c.jsxs)(t.li,{children:[`иначе результат `,(0,c.jsx)(t.code,{children:`"laptop"`}),`.`]}),`
+`]}),`
+`,(0,c.jsx)(t.p,{children:`Следствия:`}),`
+`,(0,c.jsxs)(t.ul,{children:[`
+`,(0,c.jsx)(t.li,{children:`при нормальном диапазоне активен ровно один breakpoint;`}),`
+`,(0,c.jsxs)(t.li,{children:[`если по какой-либо причине совпали несколько, `,(0,c.jsx)(t.code,{children:`mobile`}),` имеет наивысший приоритет;`]}),`
+`,(0,c.jsxs)(t.li,{children:[`если не совпал ни один, используется `,(0,c.jsx)(t.code,{children:`laptop`}),`;`]}),`
+`,(0,c.jsxs)(t.li,{children:[(0,c.jsx)(t.code,{children:`activeBreakpoint`}),` никогда не равен `,(0,c.jsx)(t.code,{children:`undefined`}),`.`]}),`
+`]}),`
+`,(0,c.jsx)(t.h3,{id:`ssr-snapshot`,children:`SSR snapshot`}),`
+`,(0,c.jsx)(t.p,{children:`На сервере hook всегда возвращает стабильный default snapshot:`}),`
+`,(0,c.jsx)(t.pre,{children:(0,c.jsx)(t.code,{className:`language-ts`,children:`{
+	matches: {
+		mobile: false,
+		tablet: false,
+		laptop: false
+	},
+	activeBreakpoint: "laptop"
+}
+`})}),`
+`,(0,c.jsx)(t.p,{children:`Сервер не пытается угадать ширину по User-Agent. На hydration React сначала использует этот же snapshot, затем подписывается и публикует фактическое browser-состояние.`}),`
+`,(0,c.jsx)(t.p,{children:`Это предотвращает несогласованную первую hydration-проверку, но может дать короткий переход с laptop-разметки на mobile-разметку. Если такой переход заметен:`}),`
+`,(0,c.jsxs)(t.ul,{children:[`
+`,(0,c.jsx)(t.li,{children:`используйте CSS для визуального layout;`}),`
+`,(0,c.jsx)(t.li,{children:`не удаляйте важный контент по breakpoint;`}),`
+`,(0,c.jsx)(t.li,{children:`зарезервируйте размеры;`}),`
+`,(0,c.jsx)(t.li,{children:`используйте устойчивую базовую разметку;`}),`
+`,(0,c.jsxs)(t.li,{children:[`не пытайтесь исправить это прямым чтением `,(0,c.jsx)(t.code,{children:`window.innerWidth`}),` во время render.`]}),`
+`]}),`
+`,(0,c.jsx)(t.h3,{id:`singleton-external-store`,children:`Singleton external store`}),`
+`,(0,c.jsxs)(t.p,{children:[`Все mounted вызовы `,(0,c.jsx)(t.code,{children:`useMatchMedia`}),` используют один module-level store.`]}),`
+`,(0,c.jsx)(t.p,{children:`Для всего загруженного экземпляра entrypoint создаются:`}),`
+`,(0,c.jsxs)(t.ul,{children:[`
+`,(0,c.jsxs)(t.li,{children:[`три `,(0,c.jsx)(t.code,{children:`MediaQueryList`}),`;`]}),`
+`,(0,c.jsx)(t.li,{children:`по одному listener на каждый query;`}),`
+`,(0,c.jsxs)(t.li,{children:[`один `,(0,c.jsx)(t.code,{children:`MutationObserver`}),` для root attributes;`]}),`
+`,(0,c.jsxs)(t.li,{children:[`не более одного `,(0,c.jsx)(t.code,{children:`ResizeObserver`}),`;`]}),`
+`,(0,c.jsxs)(t.li,{children:[`один скрытый probe-элемент размером `,(0,c.jsx)(t.code,{children:`1em`}),`;`]}),`
+`,(0,c.jsx)(t.li,{children:`один общий immutable snapshot;`}),`
+`,(0,c.jsx)(t.li,{children:`набор React listeners.`}),`
+`]}),`
+`,(0,c.jsxs)(t.p,{children:[`Если hook используют 100 компонентов, модуль не создаёт 300 независимых `,(0,c.jsx)(t.code,{children:`MediaQueryList`}),`. Компоненты подписываются на общий snapshot.`]}),`
+`,(0,c.jsx)(t.h3,{id:`инициализация`,children:`Инициализация`}),`
+`,(0,c.jsx)(t.p,{children:`Store лениво инициализируется при первом реальном browser subscriber:`}),`
+`,(0,c.jsxs)(t.ol,{children:[`
+`,(0,c.jsxs)(t.li,{children:[`subscriber добавляется в общий `,(0,c.jsx)(t.code,{children:`Set`}),`;`]}),`
+`,(0,c.jsx)(t.li,{children:`читается root font-size;`}),`
+`,(0,c.jsx)(t.li,{children:`создаются три query;`}),`
+`,(0,c.jsx)(t.li,{children:`подключаются query listeners;`}),`
+`,(0,c.jsx)(t.li,{children:`вычисляется первый client snapshot;`}),`
+`,(0,c.jsxs)(t.li,{children:[`подключаются observers за изменением `,(0,c.jsx)(t.code,{children:`em`}),`.`]}),`
+`]}),`
+`,(0,c.jsx)(t.p,{children:`Один импорт модуля не добавляет DOM-элементы и listeners.`}),`
+`,(0,c.jsxs)(t.h3,{id:`отслеживание-root-em`,children:[`Отслеживание root `,(0,c.jsx)(t.code,{children:`em`})]}),`
+`,(0,c.jsx)(t.p,{children:`Изменение базового шрифта может изменить breakpoint даже при неизменной ширине viewport. Store наблюдает:`}),`
+`,(0,c.jsxs)(t.ul,{children:[`
+`,(0,c.jsxs)(t.li,{children:[`атрибуты `,(0,c.jsx)(t.code,{children:`style`}),`, `,(0,c.jsx)(t.code,{children:`class`}),` и `,(0,c.jsx)(t.code,{children:`data-font-size`}),` у `,(0,c.jsx)(t.code,{children:`document.documentElement`}),`;`]}),`
+`,(0,c.jsxs)(t.li,{children:[`размер скрытого probe-элемента `,(0,c.jsx)(t.code,{children:`width: 1em`}),` через `,(0,c.jsx)(t.code,{children:`ResizeObserver`}),`.`]}),`
+`]}),`
+`,(0,c.jsxs)(t.p,{children:[`Observer events объединяются debounce-интервалом `,(0,c.jsx)(t.code,{children:`80ms`}),`. Query перестраиваются, если root font-size изменился минимум на `,(0,c.jsx)(t.code,{children:`0.25px`}),`. Меньшие колебания игнорируются.`]}),`
+`,(0,c.jsx)(t.p,{children:`Например:`}),`
+`,(0,c.jsx)(t.pre,{children:(0,c.jsx)(t.code,{className:`language-ts`,children:`document.documentElement.style.fontSize = "20px";
+`})}),`
+`,(0,c.jsxs)(t.p,{children:[`Mutation observer планирует проверку. Если предыдущее значение было `,(0,c.jsx)(t.code,{children:`16px`}),`, query перестраиваются на границы `,(0,c.jsx)(t.code,{children:`960px`}),` и `,(0,c.jsx)(t.code,{children:`1440px`}),`.`]}),`
+`,(0,c.jsxs)(t.p,{children:[`Если `,(0,c.jsx)(t.code,{children:`ResizeObserver`}),` отсутствует, store продолжит работать с `,(0,c.jsx)(t.code,{children:`MutationObserver`}),` и media-query listeners, но не получит дополнительный сигнал через probe.`]}),`
+`,(0,c.jsx)(t.h3,{id:`cleanup`,children:`Cleanup`}),`
+`,(0,c.jsx)(t.p,{children:`Когда последний component отписывается:`}),`
+`,(0,c.jsxs)(t.ul,{children:[`
+`,(0,c.jsx)(t.li,{children:`удаляются три media-query listener;`}),`
+`,(0,c.jsx)(t.li,{children:`отменяется ожидающий debounce timer;`}),`
+`,(0,c.jsxs)(t.li,{children:[`отключаются `,(0,c.jsx)(t.code,{children:`MutationObserver`}),` и `,(0,c.jsx)(t.code,{children:`ResizeObserver`}),`;`]}),`
+`,(0,c.jsx)(t.li,{children:`probe удаляется из DOM;`}),`
+`,(0,c.jsxs)(t.li,{children:[`текущие `,(0,c.jsx)(t.code,{children:`MediaQueryList`}),` освобождаются;`]}),`
+`,(0,c.jsx)(t.li,{children:`store помечается неинициализированным.`}),`
+`]}),`
+`,(0,c.jsx)(t.p,{children:`Последний опубликованный snapshot остаётся в памяти модуля. При следующем subscriber store принудительно перечитает root font-size и query.`}),`
+`,(0,c.jsx)(t.h3,{id:`react-strict-mode`,children:`React Strict Mode`}),`
+`,(0,c.jsx)(t.p,{children:`В development React Strict Mode может выполнить дополнительный subscribe/unsubscribe cycle. Store поддерживает это: ресурсы создаются лениво и очищаются после ухода последнего listener.`}),`
+`,(0,c.jsx)(t.p,{children:`Не пишите код, который рассчитывает на единственную инициализацию component за всё время жизни приложения.`}),`
+`,(0,c.jsxs)(t.h3,{id:`когда-использовать-matches`,children:[`Когда использовать `,(0,c.jsx)(t.code,{children:`matches`})]}),`
+`,(0,c.jsx)(t.pre,{children:(0,c.jsx)(t.code,{className:`language-tsx`,children:`const { activeBreakpoint, matches } = useMatchMedia();
+
+// Основной consumer-код.
+const columns = activeBreakpoint === "laptop" ? 3 : 1;
+
+// Диагностический код.
+console.table(matches);
+`})}),`
+`,(0,c.jsxs)(t.p,{children:[`Не вычисляйте breakpoint повторно из `,(0,c.jsx)(t.code,{children:`matches`}),` без необходимости. `,(0,c.jsx)(t.code,{children:`activeBreakpoint`}),` уже применяет точный приоритет модуля.`]}),`
+`,(0,c.jsx)(t.h3,{id:`ограничения-1`,children:`Ограничения`}),`
+`,(0,c.jsxs)(t.ul,{children:[`
+`,(0,c.jsx)(t.li,{children:`пользовательские breakpoint values передать нельзя;`}),`
+`,(0,c.jsx)(t.li,{children:`SSR fallback настроить нельзя;`}),`
+`,(0,c.jsx)(t.li,{children:`границы зависят от root font-size;`}),`
+`,(0,c.jsxs)(t.li,{children:[`изменение stylesheet отслеживается через фактическое изменение probe, если доступен `,(0,c.jsx)(t.code,{children:`ResizeObserver`}),`;`]}),`
+`,(0,c.jsxs)(t.li,{children:[`частичная browser-like среда должна иметь `,(0,c.jsx)(t.code,{children:`MutationObserver`}),`;`]}),`
+`,(0,c.jsx)(t.li,{children:`hook отслеживает viewport, а не отдельный container;`}),`
+`,(0,c.jsx)(t.li,{children:`store один на загруженный экземпляр модуля, но две физические копии пакета создадут два store;`}),`
+`,(0,c.jsxs)(t.li,{children:[`очень узкие зазоры диапазонов получают fallback `,(0,c.jsx)(t.code,{children:`laptop`}),`.`]}),`
+`]}),`
+`,(0,c.jsx)(t.h2,{id:`responsive-значения`,children:`Responsive-значения`}),`
+`,(0,c.jsx)(t.p,{children:`Responsive-значение позволяет prop принимать либо одно значение для всех breakpoint, либо map с разными вариантами.`}),`
+`,(0,c.jsx)(t.h3,{id:`responsivemapt`,children:(0,c.jsx)(t.code,{children:`ResponsiveMap<T>`})}),`
+`,(0,c.jsx)(t.pre,{children:(0,c.jsx)(t.code,{className:`language-ts`,children:`type ResponsiveMap<T> = {
+	mobile?: T;
+	tablet?: T;
+	laptop?: T;
+};
+`})}),`
+`,(0,c.jsx)(t.p,{children:`Все поля optional. Допустимы полная и частичная map:`}),`
+`,(0,c.jsx)(t.pre,{children:(0,c.jsx)(t.code,{className:`language-ts`,children:`import type { ResponsiveMap } from "@ryuzaki13/react-foundation-lib/media";
+
+const full: ResponsiveMap<number> = {
+	mobile: 1,
+	tablet: 2,
+	laptop: 3
+};
+
+const partial: ResponsiveMap<number> = {
+	mobile: 1,
+	laptop: 3
+};
+`})}),`
+`,(0,c.jsx)(t.p,{children:`Для пропущенного поля resolver использует documented fallback, а не автоматически наследует строго «слева направо».`}),`
+`,(0,c.jsx)(t.h3,{id:`responsivevaluet`,children:(0,c.jsx)(t.code,{children:`ResponsiveValue<T>`})}),`
+`,(0,c.jsx)(t.pre,{children:(0,c.jsx)(t.code,{className:`language-ts`,children:`type ResponsiveValue<T> = T | ResponsiveMap<T>;
+`})}),`
+`,(0,c.jsx)(t.p,{children:`Пример component prop:`}),`
+`,(0,c.jsx)(t.pre,{children:(0,c.jsx)(t.code,{className:`language-ts`,children:`import type { ResponsiveValue } from "@ryuzaki13/react-foundation-lib/media";
+
+type PanelProps = {
+	gap?: ResponsiveValue<"small" | "medium" | "large">;
+};
+`})}),`
+`,(0,c.jsx)(t.p,{children:`Consumer может передать обычное значение:`}),`
+`,(0,c.jsx)(t.pre,{children:(0,c.jsx)(t.code,{className:`language-tsx`,children:`<Panel gap="medium" />
+`})}),`
+`,(0,c.jsx)(t.p,{children:`Оно применяется на всех breakpoint. Или map:`}),`
+`,(0,c.jsx)(t.pre,{children:(0,c.jsx)(t.code,{className:`language-tsx`,children:`<Panel
+	gap={{
+		mobile: "small",
+		tablet: "medium",
+		laptop: "large"
+	}}
+/>
+`})}),`
+`,(0,c.jsx)(t.h3,{id:`unwrapresponsivet`,children:(0,c.jsx)(t.code,{children:`UnwrapResponsive<T>`})}),`
+`,(0,c.jsxs)(t.p,{children:[`Conditional type снимает обёртку `,(0,c.jsx)(t.code,{children:`ResponsiveValue`}),`:`]}),`
+`,(0,c.jsx)(t.pre,{children:(0,c.jsx)(t.code,{className:`language-ts`,children:`type UnwrapResponsive<T> = T extends ResponsiveValue<infer U> ? U : T;
+`})}),`
+`,(0,c.jsx)(t.p,{children:`Концептуальные примеры:`}),`
+`,(0,c.jsx)(t.pre,{children:(0,c.jsx)(t.code,{className:`language-ts`,children:`type A = UnwrapResponsive<ResponsiveValue<number>>;
+// number
+
+type B = UnwrapResponsive<string>;
+// string
+`})}),`
+`,(0,c.jsxs)(t.p,{children:[`Это type-level операция. В runtime она ничего не вычисляет. Для реального выбора значения используйте `,(0,c.jsx)(t.code,{children:`resolveResponsiveValue`}),` или `,(0,c.jsx)(t.code,{children:`resolveProps`}),`.`]}),`
+`,(0,c.jsx)(t.h2,{id:`isresponsivemap`,children:(0,c.jsx)(t.code,{children:`isResponsiveMap`})}),`
+`,(0,c.jsxs)(t.p,{children:[(0,c.jsx)(t.code,{children:`isResponsiveMap`}),` проверяет runtime-значение и одновременно служит TypeScript type guard.`]}),`
+`,(0,c.jsx)(t.h3,{id:`сигнатура-1`,children:`Сигнатура`}),`
+`,(0,c.jsx)(t.pre,{children:(0,c.jsx)(t.code,{className:`language-ts`,children:`function isResponsiveMap<T>(value: ResponsiveValue<T>): value is ResponsiveMap<T>;
+`})}),`
+`,(0,c.jsxs)(t.p,{children:[`Функция возвращает `,(0,c.jsx)(t.code,{children:`true`}),`, если:`]}),`
+`,(0,c.jsxs)(t.ul,{children:[`
+`,(0,c.jsx)(t.li,{children:`значение является object;`}),`
+`,(0,c.jsxs)(t.li,{children:[`значение не равно `,(0,c.jsx)(t.code,{children:`null`}),`;`]}),`
+`,(0,c.jsxs)(t.li,{children:[`в нём присутствует хотя бы один собственный или унаследованный ключ `,(0,c.jsx)(t.code,{children:`mobile`}),`, `,(0,c.jsx)(t.code,{children:`tablet`}),`, `,(0,c.jsx)(t.code,{children:`laptop`}),` или `,(0,c.jsx)(t.code,{children:`desktop`}),`.`]}),`
+`]}),`
+`,(0,c.jsxs)(t.p,{children:[`Проверяется наличие ключа через оператор `,(0,c.jsx)(t.code,{children:`in`}),`, а не значение поля:`]}),`
+`,(0,c.jsx)(t.pre,{children:(0,c.jsx)(t.code,{className:`language-ts`,children:`isResponsiveMap({ mobile: "compact" }); // true
+isResponsiveMap({ mobile: undefined }); // true
+isResponsiveMap({ value: "compact" }); // false
+isResponsiveMap("compact"); // false
+isResponsiveMap(null); // false
+`})}),`
+`,(0,c.jsx)(t.h3,{id:`важная-коллизия-object-values`,children:`Важная коллизия object values`}),`
+`,(0,c.jsxs)(t.p,{children:[(0,c.jsx)(t.code,{children:`ResponsiveValue<T>`}),` может принимать обычный object `,(0,c.jsx)(t.code,{children:`T`}),`. Если у обычного business object есть поле `,(0,c.jsx)(t.code,{children:`mobile`}),`, `,(0,c.jsx)(t.code,{children:`tablet`}),`, `,(0,c.jsx)(t.code,{children:`laptop`}),` или `,(0,c.jsx)(t.code,{children:`desktop`}),`, функция ошибочно с точки зрения бизнес-смысла распознает его как responsive map:`]}),`
+`,(0,c.jsx)(t.pre,{children:(0,c.jsx)(t.code,{className:`language-ts`,children:`const contact = {
+	mobile: "+7 900 000-00-00",
+	name: "Анна"
+};
+
+isResponsiveMap(contact); // true
+`})}),`
+`,(0,c.jsx)(t.p,{children:`Не используйте responsive wrapper для object-типа с такими ключами. Измените форму данных или явно отделите значение:`}),`
+`,(0,c.jsx)(t.pre,{children:(0,c.jsx)(t.code,{className:`language-ts`,children:`type ContactValue = {
+	value: {
+		mobile: string;
+		name: string;
+	};
+};
+`})}),`
+`,(0,c.jsxs)(t.h3,{id:`почему-распознаётся-desktop`,children:[`Почему распознаётся `,(0,c.jsx)(t.code,{children:`desktop`})]}),`
+`,(0,c.jsxs)(t.p,{children:[`Runtime guard считает объект с ключом `,(0,c.jsx)(t.code,{children:`desktop`}),` responsive map, однако:`]}),`
+`,(0,c.jsxs)(t.ul,{children:[`
+`,(0,c.jsxs)(t.li,{children:[(0,c.jsx)(t.code,{children:`desktop`}),` не входит в `,(0,c.jsx)(t.code,{children:`ResponsiveMap<T>`}),`;`]}),`
+`,(0,c.jsxs)(t.li,{children:[(0,c.jsx)(t.code,{children:`desktop`}),` не входит в `,(0,c.jsx)(t.code,{children:`Breakpoint`}),`;`]}),`
+`,(0,c.jsxs)(t.li,{children:[`resolver не читает значение `,(0,c.jsx)(t.code,{children:`desktop`}),`.`]}),`
+`]}),`
+`,(0,c.jsx)(t.p,{children:`Поэтому не передавайте:`}),`
+`,(0,c.jsx)(t.pre,{children:(0,c.jsx)(t.code,{className:`language-ts`,children:`const legacyValue = {
+	desktop: "wide"
+};
+
+resolveResponsiveValue(legacyValue, "laptop");
+// undefined
+`})}),`
+`,(0,c.jsxs)(t.p,{children:[`Распознавание `,(0,c.jsx)(t.code,{children:`desktop`}),` следует считать защитой от смешения legacy-подобного объекта с обычным value, а не поддержкой четвёртого breakpoint.`]}),`
+`,(0,c.jsx)(t.h2,{id:`resolveresponsivevalue`,children:(0,c.jsx)(t.code,{children:`resolveResponsiveValue`})}),`
+`,(0,c.jsx)(t.p,{children:`Функция выбирает одно значение для переданного breakpoint. React и DOM ей не нужны.`}),`
+`,(0,c.jsx)(t.h3,{id:`сигнатура-2`,children:`Сигнатура`}),`
+`,(0,c.jsx)(t.pre,{children:(0,c.jsx)(t.code,{className:`language-ts`,children:`function resolveResponsiveValue<T>(value: ResponsiveValue<T> | undefined, breakpoint: Breakpoint): T | undefined;
+`})}),`
+`,(0,c.jsx)(t.h3,{id:`обычное-значение`,children:`Обычное значение`}),`
+`,(0,c.jsxs)(t.p,{children:[`Если `,(0,c.jsx)(t.code,{children:`value`}),` не является responsive map, оно возвращается без изменений:`]}),`
+`,(0,c.jsx)(t.pre,{children:(0,c.jsx)(t.code,{className:`language-ts`,children:`resolveResponsiveValue("medium", "mobile"); // "medium"
+resolveResponsiveValue(42, "tablet"); // 42
+resolveResponsiveValue(null, "laptop"); // null, если T допускает null
+resolveResponsiveValue(undefined, "mobile"); // undefined
+`})}),`
+`,(0,c.jsx)(t.h3,{id:`точный-fallback-порядок`,children:`Точный fallback-порядок`}),`
+`,(0,c.jsxs)(t.table,{children:[(0,c.jsx)(t.thead,{children:(0,c.jsxs)(t.tr,{children:[(0,c.jsx)(t.th,{children:`Текущий breakpoint`}),(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:`mobile`})}),(0,c.jsxs)(t.td,{children:[(0,c.jsx)(t.code,{children:`mobile`}),` → `,(0,c.jsx)(t.code,{children:`tablet`}),` → `,(0,c.jsx)(t.code,{children:`laptop`})]})]}),(0,c.jsxs)(t.tr,{children:[(0,c.jsx)(t.td,{children:(0,c.jsx)(t.code,{children:`tablet`})}),(0,c.jsxs)(t.td,{children:[(0,c.jsx)(t.code,{children:`tablet`}),` → `,(0,c.jsx)(t.code,{children:`mobile`}),` → `,(0,c.jsx)(t.code,{children:`laptop`})]})]}),(0,c.jsxs)(t.tr,{children:[(0,c.jsx)(t.td,{children:(0,c.jsx)(t.code,{children:`laptop`})}),(0,c.jsxs)(t.td,{children:[(0,c.jsx)(t.code,{children:`laptop`}),` → `,(0,c.jsx)(t.code,{children:`tablet`}),` → `,(0,c.jsx)(t.code,{children:`mobile`})]})]})]})]}),`
+`,(0,c.jsx)(t.p,{children:`Примеры:`}),`
+`,(0,c.jsx)(t.pre,{children:(0,c.jsx)(t.code,{className:`language-ts`,children:`resolveResponsiveValue(
+	{
+		tablet: "medium",
+		laptop: "large"
+	},
+	"mobile"
+);
+// "medium"
+
+resolveResponsiveValue(
+	{
+		mobile: "small",
+		laptop: "large"
+	},
+	"tablet"
+);
+// "small"
+
+resolveResponsiveValue(
+	{
+		mobile: "small",
+		tablet: "medium"
+	},
+	"laptop"
+);
+// "medium"
+`})}),`
+`,(0,c.jsxs)(t.p,{children:[`Для `,(0,c.jsx)(t.code,{children:`tablet`}),` сначала берётся точное значение, потом mobile, только затем laptop. Это важно: алгоритм не просто выбирает первое поле в object и не всегда движется к большему breakpoint.`]}),`
+`,(0,c.jsx)(t.h3,{id:`nullish-fallback`,children:`Nullish fallback`}),`
+`,(0,c.jsxs)(t.p,{children:[`Resolver использует оператор `,(0,c.jsx)(t.code,{children:`??`}),`. Отсутствующими считаются `,(0,c.jsx)(t.code,{children:`undefined`}),` и `,(0,c.jsx)(t.code,{children:`null`}),`. Значения `,(0,c.jsx)(t.code,{children:`false`}),`, `,(0,c.jsx)(t.code,{children:`0`}),` и пустая строка остаются полноценными:`]}),`
+`,(0,c.jsx)(t.pre,{children:(0,c.jsx)(t.code,{className:`language-ts`,children:`resolveResponsiveValue(
+	{
+		mobile: false,
+		tablet: true
+	},
+	"mobile"
+);
+// false
+
+resolveResponsiveValue(
+	{
+		mobile: 0,
+		tablet: 10
+	},
+	"mobile"
+);
+// 0
+
+resolveResponsiveValue(
+	{
+		mobile: "",
+		tablet: "fallback"
+	},
+	"mobile"
+);
+// ""
+`})}),`
+`,(0,c.jsxs)(t.p,{children:[`Но `,(0,c.jsx)(t.code,{children:`null`}),` внутри map запускает fallback:`]}),`
+`,(0,c.jsx)(t.pre,{children:(0,c.jsx)(t.code,{className:`language-ts`,children:`resolveResponsiveValue(
+	{
+		mobile: null,
+		tablet: "fallback"
+	},
+	"mobile"
+);
+// "fallback"
+`})}),`
+`,(0,c.jsxs)(t.p,{children:[`Если `,(0,c.jsx)(t.code,{children:`null`}),` должен быть отдельным осмысленным responsive-значением, текущий contract для этого не подходит.`]}),`
+`,(0,c.jsx)(t.h3,{id:`пустая-map`,children:`Пустая map`}),`
+`,(0,c.jsx)(t.pre,{children:(0,c.jsx)(t.code,{className:`language-ts`,children:`resolveResponsiveValue({}, "tablet"); // undefined
+`})}),`
+`,(0,c.jsxs)(t.p,{children:[`TypeScript разрешает пустой `,(0,c.jsx)(t.code,{children:`ResponsiveMap<T>`}),`, потому что все поля optional. Проверяйте обязательность на уровне props или validation host-приложения.`]}),`
+`,(0,c.jsx)(t.h3,{id:`функция-не-мутирует-данные`,children:`Функция не мутирует данные`}),`
+`,(0,c.jsxs)(t.p,{children:[(0,c.jsx)(t.code,{children:`resolveResponsiveValue`}),` только читает переданное значение. Она не дописывает отсутствующие поля и не изменяет map.`]}),`
+`,(0,c.jsx)(t.h2,{id:`resolveprops`,children:(0,c.jsx)(t.code,{children:`resolveProps`})}),`
+`,(0,c.jsxs)(t.p,{children:[(0,c.jsx)(t.code,{children:`resolveProps`}),` создаёт поверхностную копию object props и разрешает только явно перечисленные keys.`]}),`
+`,(0,c.jsx)(t.h3,{id:`сигнатура-3`,children:`Сигнатура`}),`
+`,(0,c.jsx)(t.pre,{children:(0,c.jsx)(t.code,{className:`language-ts`,children:`function resolveProps<T extends object>(props: T, breakpoint: Breakpoint, responsiveKeys: readonly (keyof T)[]): ResolvedProps<T>;
+`})}),`
+`,(0,c.jsx)(t.h3,{id:`resolvedpropst`,children:(0,c.jsx)(t.code,{children:`ResolvedProps<T>`})}),`
+`,(0,c.jsx)(t.pre,{children:(0,c.jsx)(t.code,{className:`language-ts`,children:`type ResolvedProps<T extends object> = {
+	[K in keyof T]: UnwrapResponsive<T[K]>;
+};
+`})}),`
+`,(0,c.jsx)(t.p,{children:`Тип сохраняет имена полей и снимает responsive wrapper с их типов.`}),`
+`,(0,c.jsx)(t.h3,{id:`базовый-пример`,children:`Базовый пример`}),`
+`,(0,c.jsx)(t.pre,{children:(0,c.jsx)(t.code,{className:`language-ts`,children:`import { resolveProps } from "@ryuzaki13/react-foundation-lib/media";
+import type { ResponsiveValue } from "@ryuzaki13/react-foundation-lib/media";
+
+type LayoutProps = {
+	direction?: ResponsiveValue<"row" | "column">;
+	gap?: ResponsiveValue<number>;
+	title: string;
+};
+
+const props: LayoutProps = {
+	direction: {
+		mobile: "column",
+		laptop: "row"
+	},
+	gap: {
+		mobile: 8,
+		tablet: 12,
+		laptop: 16
+	},
+	title: "Профиль"
+};
+
+const resolved = resolveProps(props, "tablet", ["direction", "gap"]);
+
+console.log(resolved);
+// {
+//   direction: "column",
+//   gap: 12,
+//   title: "Профиль"
+// }
+`})}),`
+`,(0,c.jsxs)(t.p,{children:[(0,c.jsx)(t.code,{children:`title`}),` не был перечислен, поэтому скопирован как есть.`]}),`
+`,(0,c.jsx)(t.h3,{id:`типобезопасный-список-keys`,children:`Типобезопасный список keys`}),`
+`,(0,c.jsx)(t.p,{children:`Объявляйте стабильный список рядом с component:`}),`
+`,(0,c.jsx)(t.pre,{children:(0,c.jsx)(t.code,{className:`language-ts`,children:`const RESPONSIVE_KEYS = ["direction", "gap"] as const satisfies readonly (keyof LayoutProps)[];
+`})}),`
+`,(0,c.jsxs)(t.p,{children:[(0,c.jsx)(t.code,{children:`satisfies`}),` проверит опечатку:`]}),`
+`,(0,c.jsx)(t.pre,{children:(0,c.jsx)(t.code,{className:`language-ts`,children:`const BAD_KEYS = ["direciton"] as const satisfies readonly (keyof LayoutProps)[];
+// Ошибка TypeScript: такого key нет.
+`})}),`
+`,(0,c.jsx)(t.h3,{id:`разрешаются-только-перечисленные-поля`,children:`Разрешаются только перечисленные поля`}),`
+`,(0,c.jsx)(t.pre,{children:(0,c.jsx)(t.code,{className:`language-ts`,children:`resolveProps(
+	{
+		gap: {
+			mobile: 8,
+			laptop: 16
+		},
+		padding: {
+			mobile: 4,
+			laptop: 12
+		}
+	},
+	"laptop",
+	["gap"]
+);
+// {
+//   gap: 16,
+//   padding: { mobile: 4, laptop: 12 }
+// }
+`})}),`
+`,(0,c.jsxs)(t.p,{children:[(0,c.jsx)(t.code,{children:`padding`}),` остаётся map. Тип результата предполагает развёрнутые responsive fields, поэтому consumer обязан правильно перечислить все поля, которые действительно имеют `,(0,c.jsx)(t.code,{children:`ResponsiveValue`}),`. TypeScript не может проверить semantic полноту списка.`]}),`
+`,(0,c.jsx)(t.h3,{id:`поверхностная-копия`,children:`Поверхностная копия`}),`
+`,(0,c.jsx)(t.p,{children:`Исходный object верхнего уровня не изменяется:`}),`
+`,(0,c.jsx)(t.pre,{children:(0,c.jsx)(t.code,{className:`language-ts`,children:`const original = {
+	size: {
+		mobile: "small",
+		laptop: "large"
+	},
+	meta: {
+		id: 1
+	}
+};
+
+const resolved = resolveProps(original, "laptop", ["size"]);
+
+console.log(resolved === original); // false
+console.log(resolved.meta === original.meta); // true
+`})}),`
+`,(0,c.jsx)(t.p,{children:`Вложенные обычные objects сохраняют reference. Это не deep clone.`}),`
+`,(0,c.jsx)(t.h3,{id:`отсутствующий-key`,children:`Отсутствующий key`}),`
+`,(0,c.jsxs)(t.p,{children:[`Если `,(0,c.jsx)(t.code,{children:`responsiveKeys`}),` содержит optional key, которого нет в `,(0,c.jsx)(t.code,{children:`props`}),`, результат получит это поле со значением `,(0,c.jsx)(t.code,{children:`undefined`}),`:`]}),`
+`,(0,c.jsx)(t.pre,{children:(0,c.jsx)(t.code,{className:`language-ts`,children:`const result = resolveProps(
+	{
+		title: "Карточка"
+	} as {
+		title: string;
+		gap?: ResponsiveValue<number>;
+	},
+	"mobile",
+	["gap"]
+);
+
+console.log("gap" in result); // true
+console.log(result.gap); // undefined
+`})}),`
+`,(0,c.jsxs)(t.p,{children:[`Это может иметь значение при `,(0,c.jsx)(t.code,{children:`Object.keys`}),`, spread или сериализации custom replacer.`]}),`
+`,(0,c.jsx)(t.h3,{id:`нет-рекурсивного-обхода`,children:`Нет рекурсивного обхода`}),`
+`,(0,c.jsx)(t.pre,{children:(0,c.jsx)(t.code,{className:`language-ts`,children:`const props = {
+	layout: {
+		gap: {
+			mobile: 8,
+			laptop: 16
+		}
+	}
+};
+
+resolveProps(props, "laptop", ["layout"]);
+`})}),`
+`,(0,c.jsxs)(t.p,{children:[(0,c.jsx)(t.code,{children:`layout`}),` — обычный object без breakpoint keys, поэтому возвращается целиком. Вложенный `,(0,c.jsx)(t.code,{children:`layout.gap`}),` не разрешается. Вызовите resolver на нужном уровне самостоятельно.`]}),`
+`,(0,c.jsx)(t.h2,{id:`полный-react-пример`,children:`Полный React-пример`}),`
+`,(0,c.jsx)(t.p,{children:`Ниже component принимает обычные или responsive props, получает текущий breakpoint и разрешает их перед созданием styles.`}),`
+`,(0,c.jsx)(t.pre,{children:(0,c.jsx)(t.code,{className:`language-tsx`,children:`import { useMemo } from "react";
+import type { CSSProperties, ReactNode } from "react";
+
+import { resolveProps, useMatchMedia } from "@ryuzaki13/react-foundation-lib/media";
+import type { ResponsiveValue } from "@ryuzaki13/react-foundation-lib/media";
+
+type AdaptiveCardProps = {
+	children: ReactNode;
+	direction?: ResponsiveValue<"row" | "column">;
+	gap?: ResponsiveValue<number>;
+};
+
+const RESPONSIVE_KEYS = ["direction", "gap"] as const satisfies readonly (keyof AdaptiveCardProps)[];
+
+export function AdaptiveCard({ children, direction = "column", gap = 12 }: AdaptiveCardProps) {
+	const { activeBreakpoint } = useMatchMedia();
+
+	const resolved = useMemo(
+		() =>
+			resolveProps(
+				{
+					children,
+					direction,
+					gap
+				},
+				activeBreakpoint,
+				RESPONSIVE_KEYS
+			),
+		[activeBreakpoint, children, direction, gap]
+	);
+
+	const style: CSSProperties = {
+		display: "flex",
+		flexDirection: resolved.direction,
+		gap: resolved.gap
+	};
+
+	return <section style={style}>{resolved.children}</section>;
+}
+`})}),`
+`,(0,c.jsx)(t.p,{children:`Использование:`}),`
+`,(0,c.jsx)(t.pre,{children:(0,c.jsx)(t.code,{className:`language-tsx`,children:`<AdaptiveCard
+	direction={{
+		mobile: "column",
+		laptop: "row"
+	}}
+	gap={{
+		mobile: 8,
+		tablet: 12,
+		laptop: 16
+	}}>
+	<div>Основная часть</div>
+	<aside>Дополнительная часть</aside>
+</AdaptiveCard>
+`})}),`
+`,(0,c.jsxs)(t.p,{children:[`На mobile результат `,(0,c.jsx)(t.code,{children:`column / 8`}),`. На tablet `,(0,c.jsx)(t.code,{children:`direction`}),` fallback-ится к mobile и получится `,(0,c.jsx)(t.code,{children:`column / 12`}),`. На laptop результат `,(0,c.jsx)(t.code,{children:`row / 16`}),`.`]}),`
+`,(0,c.jsxs)(t.h3,{id:`когда-usememo-действительно-полезен`,children:[`Когда `,(0,c.jsx)(t.code,{children:`useMemo`}),` действительно полезен`]}),`
+`,(0,c.jsxs)(t.p,{children:[(0,c.jsx)(t.code,{children:`resolveProps`}),` создаёт новый object при каждом вызове. Если результат передаётся в memoized child, используется как effect dependency или участвует в дорогом вычислении, `,(0,c.jsx)(t.code,{children:`useMemo`}),` сохраняет reference до изменения dependencies.`]}),`
+`,(0,c.jsx)(t.p,{children:`Если object сразу превращается в пару primitive и component простой, memoization может быть лишней. Не добавляйте её механически.`}),`
+`,(0,c.jsx)(t.h3,{id:`почему-styles-всё-равно-лучше-держать-в-css`,children:`Почему styles всё равно лучше держать в CSS`}),`
+`,(0,c.jsx)(t.p,{children:`Пример показывает runtime API, но responsive layout часто проще выразить так:`}),`
+`,(0,c.jsx)(t.pre,{children:(0,c.jsx)(t.code,{className:`language-css`,children:`.card {
+	display: flex;
+	flex-direction: column;
+	gap: 0.5rem;
+}
+
+@media (width >= 48em) {
+	.card {
+		gap: 0.75rem;
+	}
+}
+
+@media (width >= 72em) {
+	.card {
+		flex-direction: row;
+		gap: 1rem;
+	}
+}
+`})}),`
+`,(0,c.jsx)(t.p,{children:`CSS меняет layout без React render и начинает действовать до hydration. Runtime responsive props оправданы, когда это контракт общего UI primitive или значение нужно JavaScript-коду.`}),`
+`,(0,c.jsxs)(t.p,{children:[`Этот CSS-фрагмент показывает сам подход, но не обещает математически идентичные границы: семантику `,(0,c.jsx)(t.code,{children:`em`}),` внутри CSS media query определяет browser, а `,(0,c.jsx)(t.code,{children:`useMatchMedia`}),` явно умножает constants на текущий computed `,(0,c.jsx)(t.code,{children:`font-size`}),` корневого элемента. Если CSS и JavaScript обязаны совпадать до долей пикселя, используйте единый build-time token contract и отдельно проверьте его в поддерживаемых browsers.`]}),`
+`,(0,c.jsx)(t.h2,{id:`dom-метрики`,children:`DOM-метрики`}),`
+`,(0,c.jsx)(t.p,{children:`Модуль экспортирует три функции, которые читают computed styles. Они не являются hooks и могут вызываться в обычном TypeScript-коде, но реальное DOM-значение доступно только в браузере.`}),`
+`,(0,c.jsx)(t.h2,{id:`getcurrentfontsize`,children:(0,c.jsx)(t.code,{children:`getCurrentFontSize`})}),`
+`,(0,c.jsx)(t.h3,{id:`сигнатура-4`,children:`Сигнатура`}),`
+`,(0,c.jsx)(t.pre,{children:(0,c.jsx)(t.code,{className:`language-ts`,children:`function getCurrentFontSize(element?: HTMLElement | null): number;
+`})}),`
+`,(0,c.jsx)(t.h3,{id:`поведение`,children:`Поведение`}),`
+`,(0,c.jsxs)(t.ol,{children:[`
+`,(0,c.jsxs)(t.li,{children:[`Если `,(0,c.jsx)(t.code,{children:`window`}),` или `,(0,c.jsx)(t.code,{children:`document`}),` отсутствует, возвращается `,(0,c.jsx)(t.code,{children:`16`}),`.`]}),`
+`,(0,c.jsxs)(t.li,{children:[`Если `,(0,c.jsx)(t.code,{children:`element`}),` передан, читается его computed `,(0,c.jsx)(t.code,{children:`fontSize`}),`.`]}),`
+`,(0,c.jsxs)(t.li,{children:[`Если `,(0,c.jsx)(t.code,{children:`element`}),` отсутствует или равен `,(0,c.jsx)(t.code,{children:`null`}),`, используется `,(0,c.jsx)(t.code,{children:`document.documentElement`}),`.`]}),`
+`,(0,c.jsxs)(t.li,{children:[`Строка разбирается через `,(0,c.jsx)(t.code,{children:`Number.parseFloat`}),`.`]}),`
+`,(0,c.jsxs)(t.li,{children:[`Если результат не finite или меньше либо равен нулю, возвращается `,(0,c.jsx)(t.code,{children:`16`}),`.`]}),`
+`,(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:`import { getCurrentFontSize } from "@ryuzaki13/react-foundation-lib/media";
+
+const rootSize = getCurrentFontSize();
+
+const element = document.querySelector<HTMLElement>(".card");
+const cardSize = getCurrentFontSize(element);
+`})}),`
+`,(0,c.jsxs)(t.p,{children:[`Если browser вернул `,(0,c.jsx)(t.code,{children:`"20px"`}),`, функция вернёт `,(0,c.jsx)(t.code,{children:`20`}),`. Суффикс `,(0,c.jsx)(t.code,{children:`px`}),` в результате отсутствует.`]}),`
+`,(0,c.jsx)(t.h3,{id:`fallback`,children:`Fallback`}),`
+`,(0,c.jsxs)(t.table,{children:[(0,c.jsx)(t.thead,{children:(0,c.jsxs)(t.tr,{children:[(0,c.jsx)(t.th,{children:`Среда или computed value`}),(0,c.jsx)(t.th,{style:{textAlign:`right`},children:`Результат`})]})}),(0,c.jsxs)(t.tbody,{children:[(0,c.jsxs)(t.tr,{children:[(0,c.jsx)(t.td,{children:`SSR / Node.js`}),(0,c.jsx)(t.td,{style:{textAlign:`right`},children:(0,c.jsx)(t.code,{children:`16`})})]}),(0,c.jsxs)(t.tr,{children:[(0,c.jsx)(t.td,{children:(0,c.jsx)(t.code,{children:`"20px"`})}),(0,c.jsx)(t.td,{style:{textAlign:`right`},children:(0,c.jsx)(t.code,{children:`20`})})]}),(0,c.jsxs)(t.tr,{children:[(0,c.jsx)(t.td,{children:(0,c.jsx)(t.code,{children:`"16.5px"`})}),(0,c.jsx)(t.td,{style:{textAlign:`right`},children:(0,c.jsx)(t.code,{children:`16.5`})})]}),(0,c.jsxs)(t.tr,{children:[(0,c.jsx)(t.td,{children:(0,c.jsx)(t.code,{children:`"normal"`})}),(0,c.jsx)(t.td,{style:{textAlign:`right`},children:(0,c.jsx)(t.code,{children:`16`})})]}),(0,c.jsxs)(t.tr,{children:[(0,c.jsx)(t.td,{children:(0,c.jsx)(t.code,{children:`""`})}),(0,c.jsx)(t.td,{style:{textAlign:`right`},children:(0,c.jsx)(t.code,{children:`16`})})]}),(0,c.jsxs)(t.tr,{children:[(0,c.jsx)(t.td,{children:(0,c.jsx)(t.code,{children:`"0px"`})}),(0,c.jsx)(t.td,{style:{textAlign:`right`},children:(0,c.jsx)(t.code,{children:`16`})})]}),(0,c.jsxs)(t.tr,{children:[(0,c.jsx)(t.td,{children:`отрицательное значение`}),(0,c.jsx)(t.td,{style:{textAlign:`right`},children:(0,c.jsx)(t.code,{children:`16`})})]})]})]}),`
+`,(0,c.jsx)(t.p,{children:`Функция не проверяет, подключён ли element к DOM. Результат для detached element определяет browser/test environment.`}),`
+`,(0,c.jsx)(t.h2,{id:`getcurrentlineheight`,children:(0,c.jsx)(t.code,{children:`getCurrentLineHeight`})}),`
+`,(0,c.jsx)(t.h3,{id:`сигнатура-5`,children:`Сигнатура`}),`
+`,(0,c.jsx)(t.pre,{children:(0,c.jsx)(t.code,{className:`language-ts`,children:`function getCurrentLineHeight(element?: HTMLElement | null): number;
+`})}),`
+`,(0,c.jsx)(t.h3,{id:`точное-вычисление`,children:`Точное вычисление`}),`
+`,(0,c.jsxs)(t.ol,{children:[`
+`,(0,c.jsxs)(t.li,{children:[`Без `,(0,c.jsx)(t.code,{children:`window`}),` или `,(0,c.jsx)(t.code,{children:`document`}),` возвращается `,(0,c.jsx)(t.code,{children:`1.2`}),`.`]}),`
+`,(0,c.jsxs)(t.li,{children:[`Target выбирается так же, как в `,(0,c.jsx)(t.code,{children:`getCurrentFontSize`}),`.`]}),`
+`,(0,c.jsxs)(t.li,{children:[`Читается computed `,(0,c.jsx)(t.code,{children:`lineHeight`}),`.`]}),`
+`,(0,c.jsxs)(t.li,{children:[`Значение разбирается через `,(0,c.jsx)(t.code,{children:`Number.parseFloat`}),`.`]}),`
+`,(0,c.jsxs)(t.li,{children:[`Невалидное или неположительное значение даёт fallback `,(0,c.jsx)(t.code,{children:`1.2`}),`.`]}),`
+`,(0,c.jsxs)(t.li,{children:[`Валидное значение делится на константу `,(0,c.jsx)(t.code,{children:`16`}),`.`]}),`
+`]}),`
+`,(0,c.jsx)(t.pre,{children:(0,c.jsx)(t.code,{className:`language-text`,children:`result = parseFloat(computed line-height) / 16
+`})}),`
+`,(0,c.jsx)(t.p,{children:`Примеры:`}),`
+`,(0,c.jsx)(t.pre,{children:(0,c.jsx)(t.code,{className:`language-ts`,children:`// computed line-height: "24px"
+getCurrentLineHeight(element); // 1.5
+
+// computed line-height: "32px"
+getCurrentLineHeight(element); // 2
+
+// computed line-height: "normal"
+getCurrentLineHeight(element); // 1.2
+`})}),`
+`,(0,c.jsx)(t.h3,{id:`важное-ограничение`,children:`Важное ограничение`}),`
+`,(0,c.jsxs)(t.p,{children:[`Функция не делит `,(0,c.jsx)(t.code,{children:`line-height`}),` на фактический `,(0,c.jsx)(t.code,{children:`font-size`}),` переданного element. Делитель всегда равен `,(0,c.jsx)(t.code,{children:`16`}),`.`]}),`
+`,(0,c.jsxs)(t.p,{children:[`Если element имеет `,(0,c.jsx)(t.code,{children:`font-size: 20px`}),` и `,(0,c.jsx)(t.code,{children:`line-height: 24px`}),`, результат всё равно `,(0,c.jsx)(t.code,{children:`24 / 16 = 1.5`}),`, а не `,(0,c.jsx)(t.code,{children:`24 / 20 = 1.2`}),`.`]}),`
+`,(0,c.jsxs)(t.p,{children:[`Поэтому воспринимайте результат как проектную нормализацию относительно базовых `,(0,c.jsx)(t.code,{children:`16px`}),`, а не как универсальный CSS unitless line-height конкретного элемента.`]}),`
+`,(0,c.jsxs)(t.p,{children:[`Если computed style неожиданно возвращает unitless строку `,(0,c.jsx)(t.code,{children:`"1.5"`}),`, функция вычислит `,(0,c.jsx)(t.code,{children:`1.5 / 16 = 0.09375`}),`. В обычном браузере computed `,(0,c.jsx)(t.code,{children:`lineHeight`}),` чаще представлен в пикселях, но mocks должны возвращать контракт, близкий к browser.`]}),`
+`,(0,c.jsx)(t.h2,{id:`getcontrolheight`,children:(0,c.jsx)(t.code,{children:`getControlHeight`})}),`
+`,(0,c.jsx)(t.h3,{id:`сигнатура-6`,children:`Сигнатура`}),`
+`,(0,c.jsx)(t.pre,{children:(0,c.jsx)(t.code,{className:`language-ts`,children:`function getControlHeight(): number;
+`})}),`
+`,(0,c.jsx)(t.p,{children:`Функция не принимает element и использует root DOM-метрики:`}),`
+`,(0,c.jsx)(t.pre,{children:(0,c.jsx)(t.code,{className:`language-text`,children:`getControlHeight()
+= getCurrentFontSize()
+  + getCurrentLineHeight() × 10
+`})}),`
+`,(0,c.jsx)(t.p,{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:`Root computed styles`}),(0,c.jsx)(t.th,{children:`Расчёт`}),(0,c.jsx)(t.th,{style:{textAlign:`right`},children:`Результат`})]})}),(0,c.jsxs)(t.tbody,{children:[(0,c.jsxs)(t.tr,{children:[(0,c.jsx)(t.td,{children:`server fallback`}),(0,c.jsx)(t.td,{children:(0,c.jsx)(t.code,{children:`16 + 1.2 × 10`})}),(0,c.jsx)(t.td,{style:{textAlign:`right`},children:(0,c.jsx)(t.code,{children:`28`})})]}),(0,c.jsxs)(t.tr,{children:[(0,c.jsx)(t.td,{children:(0,c.jsx)(t.code,{children:`font-size: 16px; line-height: 19.2px`})}),(0,c.jsx)(t.td,{children:(0,c.jsx)(t.code,{children:`16 + 1.2 × 10`})}),(0,c.jsx)(t.td,{style:{textAlign:`right`},children:(0,c.jsx)(t.code,{children:`28`})})]}),(0,c.jsxs)(t.tr,{children:[(0,c.jsx)(t.td,{children:(0,c.jsx)(t.code,{children:`font-size: 20px; line-height: 24px`})}),(0,c.jsx)(t.td,{children:(0,c.jsx)(t.code,{children:`20 + 1.5 × 10`})}),(0,c.jsx)(t.td,{style:{textAlign:`right`},children:(0,c.jsx)(t.code,{children:`35`})})]})]})]}),`
+`,(0,c.jsxs)(t.p,{children:[(0,c.jsx)(t.code,{children:`getControlHeight`}),` только возвращает number. Он не устанавливает CSS custom property `,(0,c.jsx)(t.code,{children:`--control-height`}),` и не меняет DOM.`]}),`
+`,(0,c.jsx)(t.pre,{children:(0,c.jsx)(t.code,{className:`language-ts`,children:`import { getControlHeight } from "@ryuzaki13/react-foundation-lib/media";
+
+const controlHeight = getControlHeight();
+
+document.documentElement.style.setProperty("--control-height", controlHeight + "px");
+`})}),`
+`,(0,c.jsx)(t.p,{children:`Вызов во время React render прочитает computed styles синхронно. Если значение нужно после изменения DOM, читайте его в подходящем effect или внешнем layout-measurement слое.`}),`
+`,(0,c.jsx)(t.h2,{id:`pxtoem`,children:(0,c.jsx)(t.code,{children:`pxToEm`})}),`
+`,(0,c.jsxs)(t.p,{children:[(0,c.jsx)(t.code,{children:`pxToEm`}),` делит количество пикселей на базовый размер.`]}),`
+`,(0,c.jsx)(t.h3,{id:`сигнатура-7`,children:`Сигнатура`}),`
+`,(0,c.jsx)(t.pre,{children:(0,c.jsx)(t.code,{className:`language-ts`,children:`function pxToEm(px: number, baseEm?: number): string;
+`})}),`
+`,(0,c.jsx)(t.h3,{id:`формула`,children:`Формула`}),`
+`,(0,c.jsx)(t.pre,{children:(0,c.jsx)(t.code,{className:`language-text`,children:`result = String(px / (baseEm ?? getCurrentFontSize()))
+`})}),`
+`,(0,c.jsxs)(t.p,{children:[`Если `,(0,c.jsx)(t.code,{children:`baseEm`}),` передан, DOM не читается:`]}),`
+`,(0,c.jsx)(t.pre,{children:(0,c.jsx)(t.code,{className:`language-ts`,children:`import { pxToEm } from "@ryuzaki13/react-foundation-lib/media";
+
+pxToEm(24, 12); // "2"
+pxToEm(10, 20); // "0.5"
+`})}),`
+`,(0,c.jsxs)(t.p,{children:[`Если `,(0,c.jsx)(t.code,{children:`baseEm`}),` не передан, используется текущий root font-size:`]}),`
+`,(0,c.jsx)(t.pre,{children:(0,c.jsx)(t.code,{className:`language-ts`,children:`// При root font-size: 20px.
+pxToEm(10); // "0.5"
+`})}),`
+`,(0,c.jsxs)(t.h3,{id:`результат-не-содержит-em`,children:[`Результат не содержит `,(0,c.jsx)(t.code,{children:`em`})]}),`
+`,(0,c.jsx)(t.p,{children:`Несмотря на имя функции, возвращается только числовая строка:`}),`
+`,(0,c.jsx)(t.pre,{children:(0,c.jsx)(t.code,{className:`language-ts`,children:`pxToEm(32, 16); // "2", а не "2em"
+`})}),`
+`,(0,c.jsx)(t.p,{children:`Чтобы получить готовое CSS-значение, добавьте unit:`}),`
+`,(0,c.jsx)(t.pre,{children:(0,c.jsx)(t.code,{className:`language-ts`,children:`const padding = pxToEm(32, 16) + "em";
+// "2em"
+`})}),`
+`,(0,c.jsx)(t.p,{children:`Не добавляйте unit, если consumer ожидает unitless число в строковой форме.`}),`
+`,(0,c.jsx)(t.h3,{id:`нет-округления`,children:`Нет округления`}),`
+`,(0,c.jsx)(t.pre,{children:(0,c.jsx)(t.code,{className:`language-ts`,children:`pxToEm(10, 3);
+// "3.3333333333333335"
+`})}),`
+`,(0,c.jsx)(t.p,{children:`Если UI contract требует фиксированное количество знаков, округляйте результат отдельно и осознанно.`}),`
+`,(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:`pxToEm(10, 0); // "Infinity"
+pxToEm(-10, 20); // "-0.5"
+pxToEm(Number.NaN, 16); // "NaN"
+`})}),`
+`,(0,c.jsxs)(t.p,{children:[`Передавайте finite `,(0,c.jsx)(t.code,{children:`px`}),` и положительный finite `,(0,c.jsx)(t.code,{children:`baseEm`}),`. `,(0,c.jsx)(t.code,{children:`baseEm = 0`}),` не означает «использовать default», потому что оператор `,(0,c.jsx)(t.code,{children:`??`}),` считает ноль переданным значением.`]}),`
+`,(0,c.jsx)(t.h3,{id:`ssr`,children:`SSR`}),`
+`,(0,c.jsxs)(t.p,{children:[`Без `,(0,c.jsx)(t.code,{children:`window`}),` и `,(0,c.jsx)(t.code,{children:`document`}),` `,(0,c.jsx)(t.code,{children:`getCurrentFontSize`}),` возвращает `,(0,c.jsx)(t.code,{children:`16`}),`:`]}),`
+`,(0,c.jsx)(t.pre,{children:(0,c.jsx)(t.code,{className:`language-ts`,children:`// В Node.js.
+pxToEm(32); // "2"
+`})}),`
+`,(0,c.jsxs)(t.p,{children:[`Это делает вызов предсказуемым, но server result может отличаться от browser result, если root font-size в браузере не равен `,(0,c.jsx)(t.code,{children:`16px`}),`.`]}),`
+`,(0,c.jsx)(t.h2,{id:`css-или-javascript`,children:`CSS или JavaScript`}),`
+`,(0,c.jsx)(t.p,{children:`Выбор инструмента влияет на производительность, SSR и доступность.`}),`
+`,(0,c.jsx)(t.h3,{id:`используйте-css-когда`,children:`Используйте CSS, когда`}),`
+`,(0,c.jsxs)(t.ul,{children:[`
+`,(0,c.jsx)(t.li,{children:`меняется только display, spacing, grid/flex layout, typography или decoration;`}),`
+`,(0,c.jsx)(t.li,{children:`обе версии контента семантически одинаковы;`}),`
+`,(0,c.jsx)(t.li,{children:`адаптивность должна работать до загрузки JavaScript;`}),`
+`,(0,c.jsx)(t.li,{children:`условие относится к размеру конкретного container;`}),`
+`,(0,c.jsx)(t.li,{children:`не нужен boolean в TypeScript.`}),`
+`]}),`
+`,(0,c.jsx)(t.pre,{children:(0,c.jsx)(t.code,{className:`language-css`,children:`.navigation {
+	display: none;
+}
+
+@media (width >= 48em) {
+	.navigation {
+		display: flex;
+	}
+}
+`})}),`
+`,(0,c.jsxs)(t.h3,{id:`используйте-usemediaquery-когда`,children:[`Используйте `,(0,c.jsx)(t.code,{children:`useMediaQuery`}),`, когда`]}),`
+`,(0,c.jsxs)(t.ul,{children:[`
+`,(0,c.jsx)(t.li,{children:`нужен произвольный user preference;`}),`
+`,(0,c.jsx)(t.li,{children:`результат передаётся в JavaScript API;`}),`
+`,(0,c.jsx)(t.li,{children:`меняется алгоритм, а не только style;`}),`
+`,(0,c.jsx)(t.li,{children:`нужен один boolean, не связанный с project breakpoint;`}),`
+`,(0,c.jsx)(t.li,{children:`SSR fallback можно определить явно.`}),`
+`]}),`
+`,(0,c.jsxs)(t.h3,{id:`используйте-usematchmedia-когда`,children:[`Используйте `,(0,c.jsx)(t.code,{children:`useMatchMedia`}),`, когда`]}),`
+`,(0,c.jsxs)(t.ul,{children:[`
+`,(0,c.jsxs)(t.li,{children:[`нужен единый `,(0,c.jsx)(t.code,{children:`Breakpoint`}),`;`]}),`
+`,(0,c.jsxs)(t.li,{children:[`component принимает `,(0,c.jsx)(t.code,{children:`ResponsiveValue`}),`;`]}),`
+`,(0,c.jsx)(t.li,{children:`несколько foundation UI primitives должны использовать одинаковые границы;`}),`
+`,(0,c.jsx)(t.li,{children:`требуется динамическая привязка границ к root font-size.`}),`
+`]}),`
+`,(0,c.jsx)(t.h3,{id:`не-дублируйте-один-layout-без-необходимости`,children:`Не дублируйте один layout без необходимости`}),`
+`,(0,c.jsx)(t.pre,{children:(0,c.jsx)(t.code,{className:`language-tsx`,children:`// Рискованный вариант: две большие ветви DOM.
+return isMobile ? <MobileCheckout /> : <DesktopCheckout />;
+`})}),`
+`,(0,c.jsx)(t.p,{children:`Такой код может дать заметную замену после hydration, создаёт две реализации одного сценария, усложняет focus/state и требует тестировать обе ветви.`}),`
+`,(0,c.jsx)(t.p,{children:`Предпочтительнее одна семантическая разметка и CSS layout. Разделяйте component по breakpoint только когда поведение действительно различается.`}),`
+`,(0,c.jsx)(t.h2,{id:`ssr-и-hydration`,children:`SSR и hydration`}),`
+`,(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:`API`}),(0,c.jsx)(t.th,{children:`Server result`}),(0,c.jsx)(t.th,{children:`Первый hydration snapshot`}),(0,c.jsx)(t.th,{children:`Browser update`})]})}),(0,c.jsxs)(t.tbody,{children:[(0,c.jsxs)(t.tr,{children:[(0,c.jsx)(t.td,{children:(0,c.jsx)(t.code,{children:`useMediaQuery(query)`})}),(0,c.jsx)(t.td,{children:(0,c.jsx)(t.code,{children:`false`})}),(0,c.jsx)(t.td,{children:(0,c.jsx)(t.code,{children:`false`})}),(0,c.jsxs)(t.td,{children:[`реальный `,(0,c.jsx)(t.code,{children:`matches`})]})]}),(0,c.jsxs)(t.tr,{children:[(0,c.jsx)(t.td,{children:(0,c.jsx)(t.code,{children:`useMediaQuery(query, { ssrFallback: true })`})}),(0,c.jsx)(t.td,{children:(0,c.jsx)(t.code,{children:`true`})}),(0,c.jsx)(t.td,{children:(0,c.jsx)(t.code,{children:`true`})}),(0,c.jsxs)(t.td,{children:[`реальный `,(0,c.jsx)(t.code,{children:`matches`})]})]}),(0,c.jsxs)(t.tr,{children:[(0,c.jsx)(t.td,{children:(0,c.jsx)(t.code,{children:`useMatchMedia()`})}),(0,c.jsxs)(t.td,{children:[`все `,(0,c.jsx)(t.code,{children:`matches: false`}),`, active `,(0,c.jsx)(t.code,{children:`laptop`})]}),(0,c.jsx)(t.td,{children:`тот же default snapshot`}),(0,c.jsx)(t.td,{children:`реальный breakpoint`})]}),(0,c.jsxs)(t.tr,{children:[(0,c.jsx)(t.td,{children:(0,c.jsx)(t.code,{children:`getCurrentFontSize()`})}),(0,c.jsx)(t.td,{children:(0,c.jsx)(t.code,{children:`16`})}),(0,c.jsx)(t.td,{children:`не является hook`}),(0,c.jsx)(t.td,{children:`browser computed value при вызове`})]}),(0,c.jsxs)(t.tr,{children:[(0,c.jsx)(t.td,{children:(0,c.jsx)(t.code,{children:`getCurrentLineHeight()`})}),(0,c.jsx)(t.td,{children:(0,c.jsx)(t.code,{children:`1.2`})}),(0,c.jsx)(t.td,{children:`не является hook`}),(0,c.jsx)(t.td,{children:`browser computed value при вызове`})]}),(0,c.jsxs)(t.tr,{children:[(0,c.jsx)(t.td,{children:(0,c.jsx)(t.code,{children:`getControlHeight()`})}),(0,c.jsx)(t.td,{children:(0,c.jsx)(t.code,{children:`28`})}),(0,c.jsx)(t.td,{children:`не является hook`}),(0,c.jsx)(t.td,{children:`browser calculation при вызове`})]}),(0,c.jsxs)(t.tr,{children:[(0,c.jsx)(t.td,{children:(0,c.jsx)(t.code,{children:`pxToEm(px)`})}),(0,c.jsxs)(t.td,{children:[`база `,(0,c.jsx)(t.code,{children:`16`})]}),(0,c.jsx)(t.td,{children:`не является hook`}),(0,c.jsx)(t.td,{children:`текущая root-база при вызове`})]})]})]}),`
+`,(0,c.jsx)(t.h3,{id:`hook-безопасен-не-значит-ui-неизменен`,children:`Hook безопасен не значит UI неизменен`}),`
+`,(0,c.jsxs)(t.p,{children:[(0,c.jsx)(t.code,{children:`useSyncExternalStore`}),` согласует server snapshot с начальной hydration-фазой. После подключения browser snapshot может отличаться, и React выполнит обычный update:`]}),`
+`,(0,c.jsx)(t.pre,{children:(0,c.jsx)(t.code,{className:`language-text`,children:`server: laptop fallback
+hydration start: laptop fallback
+browser subscription: mobile
+React update: mobile UI
+`})}),`
+`,(0,c.jsx)(t.p,{children:`Hydration error не обязателен, но пользователь может увидеть layout shift. CSS обычно лучше для геометрии.`}),`
+`,(0,c.jsx)(t.h3,{id:`не-используйте-browser-api-в-module-scope`,children:`Не используйте browser API в module scope`}),`
+`,(0,c.jsx)(t.pre,{children:(0,c.jsx)(t.code,{className:`language-tsx`,children:`// Неправильно для SSR: выполняется при импорте module.
+const IS_MOBILE = window.matchMedia("(width < 768px)").matches;
+
+// Правильно внутри React component.
+function Component() {
+	const isMobile = useMediaQuery("(width < 768px)");
+	return <span>{isMobile ? "mobile" : "wide"}</span>;
+}
+`})}),`
+`,(0,c.jsxs)(t.p,{children:[`Server fallback должен быть детерминированным. Не используйте `,(0,c.jsx)(t.code,{children:`Math.random()`}),`, текущее время или другой нестабильный источник для `,(0,c.jsx)(t.code,{children:`ssrFallback`}),`.`]}),`
+`,(0,c.jsx)(t.h2,{id:`доступность`,children:`Доступность`}),`
+`,(0,c.jsx)(t.h3,{id:`user-preferences`,children:`User preferences`}),`
+`,(0,c.jsx)(t.pre,{children:(0,c.jsx)(t.code,{className:`language-tsx`,children:`const reduceMotion = useMediaQuery("(prefers-reduced-motion: reduce)");
+
+const highContrast = useMediaQuery("(prefers-contrast: more)");
+`})}),`
+`,(0,c.jsx)(t.p,{children:`Не заставляйте пользователя включать preference внутри приложения, если browser уже сообщает её. При наличии явной настройки приложения заранее определите приоритет: explicit user setting обычно важнее system preference.`}),`
+`,(0,c.jsx)(t.h3,{id:`не-удаляйте-смысловой-контент-по-ширине`,children:`Не удаляйте смысловой контент по ширине`}),`
+`,(0,c.jsxs)(t.p,{children:[`Mobile-пользователь должен получать ту же основную информацию и действия. Можно менять порядок и плотность, но нельзя делать ключевой action доступным только на `,(0,c.jsx)(t.code,{children:`laptop`}),`.`]}),`
+`,(0,c.jsx)(t.h3,{id:`focus-при-смене-breakpoint`,children:`Focus при смене breakpoint`}),`
+`,(0,c.jsx)(t.p,{children:`Если React ветка с focused element unmount-ится при изменении breakpoint, focus может потеряться. Для responsive overlay/navigation:`}),`
+`,(0,c.jsxs)(t.ul,{children:[`
+`,(0,c.jsx)(t.li,{children:`сохраняйте логическую action;`}),`
+`,(0,c.jsx)(t.li,{children:`восстанавливайте focus осознанно;`}),`
+`,(0,c.jsx)(t.li,{children:`используйте DOM focus helpers из соседнего модуля;`}),`
+`,(0,c.jsx)(t.li,{children:`тестируйте keyboard navigation до и после смены диапазона.`}),`
+`]}),`
+`,(0,c.jsx)(t.h3,{id:`query-не-доказывает-способ-ввода`,children:`Query не доказывает способ ввода`}),`
+`,(0,c.jsxs)(t.p,{children:[(0,c.jsx)(t.code,{children:`(pointer: coarse)`}),` или `,(0,c.jsx)(t.code,{children:`(hover: none)`}),` описывает возможности среды. Hybrid device может иметь touch, mouse и keyboard одновременно. Не отключайте keyboard behavior и доступные click targets на основании одного query.`]}),`
+`,(0,c.jsxs)(t.p,{children:[(0,c.jsx)(t.code,{children:`prefers-reduced-motion`}),` не означает «удалить всю обратную связь». Уберите декоративное перемещение и длительные переходы, но сохраните понятное состояние завершения действия.`]}),`
+`,(0,c.jsx)(t.h2,{id:`производительность-и-lifecycle`,children:`Производительность и lifecycle`}),`
+`,(0,c.jsx)(t.h3,{id:`usemediaquery-1`,children:(0,c.jsx)(t.code,{children:`useMediaQuery`})}),`
+`,(0,c.jsx)(t.p,{children:`Каждый вызов создаёт собственную subscription. Для нескольких разных preferences это нормально. Не создавайте сотни одинаковых calls в элементах большого списка.`}),`
+`,(0,c.jsx)(t.p,{children:`Поднимите общее значение выше:`}),`
+`,(0,c.jsx)(t.pre,{children:(0,c.jsx)(t.code,{className:`language-tsx`,children:`function Results({ items }: { items: Item[] }) {
+	const reduceMotion = useMediaQuery("(prefers-reduced-motion: reduce)");
+
+	return items.map((item) => <ResultRow key={item.id} item={item} reduceMotion={reduceMotion} />);
+}
+`})}),`
+`,(0,c.jsx)(t.h3,{id:`usematchmedia-1`,children:(0,c.jsx)(t.code,{children:`useMatchMedia`})}),`
+`,(0,c.jsx)(t.p,{children:`Hook уже разделяет singleton store между всеми consumers. Дополнительный React context только ради уменьшения числа browser listeners не нужен.`}),`
+`,(0,c.jsx)(t.p,{children:`Каждый subscriber всё равно получает React update при изменении общего snapshot. Не запускайте в render тяжёлый transformation.`}),`
+`,(0,c.jsx)(t.h3,{id:`responsive-resolvers`,children:`Responsive resolvers`}),`
+`,(0,c.jsxs)(t.ul,{children:[`
+`,(0,c.jsxs)(t.li,{children:[(0,c.jsx)(t.code,{children:`resolveResponsiveValue`}),` выполняет несколько сравнений и очень дешёв;`]}),`
+`,(0,c.jsxs)(t.li,{children:[(0,c.jsx)(t.code,{children:`resolveProps`}),` выполняет shallow spread и проходит только по `,(0,c.jsx)(t.code,{children:`responsiveKeys`}),`;`]}),`
+`,(0,c.jsxs)(t.li,{children:[(0,c.jsx)(t.code,{children:`resolveProps`}),` всегда создаёт новый top-level object;`]}),`
+`,(0,c.jsx)(t.li,{children:`вложенные references не клонируются;`}),`
+`,(0,c.jsx)(t.li,{children:`функция не кеширует результат.`}),`
+`]}),`
+`,(0,c.jsx)(t.h3,{id:`dom-reads`,children:`DOM reads`}),`
+`,(0,c.jsxs)(t.p,{children:[(0,c.jsx)(t.code,{children:`getCurrentFontSize`}),` и `,(0,c.jsx)(t.code,{children:`getCurrentLineHeight`}),` вызывают `,(0,c.jsx)(t.code,{children:`window.getComputedStyle`}),`. Это синхронный DOM read. В hot loop или для тысяч elements он может быть дорогим.`]}),`
+`,(0,c.jsx)(t.pre,{children:(0,c.jsx)(t.code,{className:`language-ts`,children:`// Не делайте так для большой коллекции.
+for (const element of thousandsOfElements) {
+	getCurrentFontSize(element);
+}
+`})}),`
+`,(0,c.jsx)(t.p,{children:`Если метрика одна и та же, прочитайте её один раз и переиспользуйте. Не смешивайте множество DOM writes и reads в цикле.`}),`
+`,(0,c.jsx)(t.h3,{id:`изменение-root-font-size`,children:`Изменение root font-size`}),`
+`,(0,c.jsxs)(t.p,{children:[(0,c.jsx)(t.code,{children:`useMatchMedia`}),` debounce-ит observer events на `,(0,c.jsx)(t.code,{children:`80ms`}),` и игнорирует изменение меньше `,(0,c.jsx)(t.code,{children:`0.25px`}),`. Поэтому update breakpoint после смены theme/class не обязан произойти синхронно в той же строке JavaScript.`]}),`
+`,(0,c.jsxs)(t.p,{children:[`После `,(0,c.jsx)(t.code,{children:`document.documentElement.classList.add("large-font")`}),` дождитесь React update.`]}),`
+`,(0,c.jsx)(t.h2,{id:`тестирование`,children:`Тестирование`}),`
+`,(0,c.jsx)(t.h3,{id:`pure-helpers`,children:`Pure helpers`}),`
+`,(0,c.jsxs)(t.p,{children:[(0,c.jsx)(t.code,{children:`resolveResponsiveValue`}),` и `,(0,c.jsx)(t.code,{children:`resolveProps`}),` тестируются без DOM:`]}),`
+`,(0,c.jsx)(t.pre,{children:(0,c.jsx)(t.code,{className:`language-ts`,children:`import { describe, expect, it } from "vitest";
+
+import { resolveProps, resolveResponsiveValue } from "@ryuzaki13/react-foundation-lib/media";
+
+describe("responsive layout", () => {
+	it("использует mobile fallback на tablet", () => {
+		expect(
+			resolveResponsiveValue(
+				{
+					mobile: "column",
+					laptop: "row"
+				},
+				"tablet"
+			)
+		).toBe("column");
+	});
+
+	it("разрешает только перечисленные props", () => {
+		expect(
+			resolveProps(
+				{
+					gap: {
+						mobile: 8,
+						laptop: 16
+					},
+					title: "Карточка"
+				},
+				"laptop",
+				["gap"]
+			)
+		).toEqual({
+			gap: 16,
+			title: "Карточка"
+		});
+	});
+});
+`})}),`
+`,(0,c.jsxs)(t.p,{children:[`Обязательно проверяйте exact match, fallback для каждого breakpoint, `,(0,c.jsx)(t.code,{children:`false`}),`, `,(0,c.jsx)(t.code,{children:`0`}),`, `,(0,c.jsx)(t.code,{children:`""`}),`, `,(0,c.jsx)(t.code,{children:`null`}),`, пустую map, обычный object и object с конфликтующим key.`]}),`
+`,(0,c.jsx)(t.h3,{id:`dom-metrics`,children:`DOM metrics`}),`
+`,(0,c.jsxs)(t.p,{children:[`В jsdom явно mock-айте `,(0,c.jsx)(t.code,{children:`getComputedStyle`}),`:`]}),`
+`,(0,c.jsx)(t.pre,{children:(0,c.jsx)(t.code,{className:`language-ts`,children:`import { afterEach, expect, it, vi } from "vitest";
+
+import { getCurrentFontSize, getCurrentLineHeight } from "@ryuzaki13/react-foundation-lib/media";
+
+afterEach(() => {
+	vi.restoreAllMocks();
+});
+
+it("читает font metrics", () => {
+	const element = document.createElement("div");
+
+	vi.spyOn(window, "getComputedStyle").mockReturnValue({
+		fontSize: "20px",
+		lineHeight: "24px"
+	} as CSSStyleDeclaration);
+
+	expect(getCurrentFontSize(element)).toBe(20);
+	expect(getCurrentLineHeight(element)).toBe(1.5);
+});
+`})}),`
+`,(0,c.jsx)(t.p,{children:`Не рассчитывайте, что jsdom сам выполнит полноценную CSS layout engine.`}),`
+`,(0,c.jsxs)(t.h3,{id:`mock-matchmedia`,children:[`Mock `,(0,c.jsx)(t.code,{children:`matchMedia`})]}),`
+`,(0,c.jsx)(t.p,{children:`Mock должен разделять состояние между всеми вызовами одного query. Реализация hook может отдельно запросить snapshot и отдельно создать subscription.`}),`
+`,(0,c.jsx)(t.p,{children:`Минимальный contract:`}),`
+`,(0,c.jsx)(t.pre,{children:(0,c.jsx)(t.code,{className:`language-ts`,children:`type ChangeListener = (event: MediaQueryListEvent) => void;
+
+const listeners = new Map<string, Set<ChangeListener>>();
+const matchesByQuery = new Map<string, boolean>();
+
+Object.defineProperty(window, "matchMedia", {
+	configurable: true,
+	value: vi.fn((query: string): MediaQueryList => {
+		const queryListeners = listeners.get(query) ?? new Set<ChangeListener>();
+
+		listeners.set(query, queryListeners);
+
+		return {
+			media: query,
+			get matches() {
+				return matchesByQuery.get(query) ?? false;
+			},
+			onchange: null,
+			addEventListener: (_type: "change", listener: ChangeListener) => {
+				queryListeners.add(listener);
+			},
+			removeEventListener: (_type: "change", listener: ChangeListener) => {
+				queryListeners.delete(listener);
+			},
+			addListener: (listener: ChangeListener) => {
+				queryListeners.add(listener);
+			},
+			removeListener: (listener: ChangeListener) => {
+				queryListeners.delete(listener);
+			},
+			dispatchEvent: () => true
+		} as MediaQueryList;
+	})
+});
+`})}),`
+`,(0,c.jsxs)(t.p,{children:[`Для переключения состояния обновите `,(0,c.jsx)(t.code,{children:`matchesByQuery`}),` и вызовите listeners внутри `,(0,c.jsx)(t.code,{children:`act`}),` вашей React test utility.`]}),`
+`,(0,c.jsxs)(t.h3,{id:`особенности-теста-usematchmedia`,children:[`Особенности теста `,(0,c.jsx)(t.code,{children:`useMatchMedia`})]}),`
+`,(0,c.jsxs)(t.ul,{children:[`
+`,(0,c.jsx)(t.li,{children:`hook создаёт три query с динамическими pixel values;`}),`
+`,(0,c.jsxs)(t.li,{children:[`перед тестом задайте ожидаемый root `,(0,c.jsx)(t.code,{children:`font-size`}),`;`]}),`
+`,(0,c.jsxs)(t.li,{children:[`jsdom обычно требует mock `,(0,c.jsx)(t.code,{children:`ResizeObserver`}),` либо его отсутствие;`]}),`
+`,(0,c.jsxs)(t.li,{children:[(0,c.jsx)(t.code,{children:`MutationObserver`}),` должен существовать в browser-like среде;`]}),`
+`,(0,c.jsx)(t.li,{children:`после теста unmount component, чтобы singleton store очистился;`}),`
+`,(0,c.jsxs)(t.li,{children:[`при проверке font-size учитывайте debounce `,(0,c.jsx)(t.code,{children:`80ms`}),`;`]}),`
+`,(0,c.jsxs)(t.li,{children:[`fake timers нужно продвинуть минимум на `,(0,c.jsx)(t.code,{children:`80ms`}),` внутри React `,(0,c.jsx)(t.code,{children:`act`}),`;`]}),`
+`,(0,c.jsx)(t.li,{children:`module-level snapshot может сохраняться между тестами.`}),`
+`]}),`
+`,(0,c.jsx)(t.p,{children:`В consumer component проверяйте server fallback, переходы между breakpoint, cleanup после unmount, изменение root font-size и focus при смене layout.`}),`
+`,(0,c.jsx)(t.h2,{id:`частые-ошибки`,children:`Частые ошибки`}),`
+`,(0,c.jsxs)(t.table,{children:[(0,c.jsx)(t.thead,{children:(0,c.jsxs)(t.tr,{children:[(0,c.jsx)(t.th,{children:`Ошибка`}),(0,c.jsx)(t.th,{children:`Фактическое поведение / исправление`})]})}),(0,c.jsxs)(t.tbody,{children:[(0,c.jsxs)(t.tr,{children:[(0,c.jsx)(t.td,{children:`Импорт из корня пакета`}),(0,c.jsxs)(t.td,{children:[`Используйте точный `,(0,c.jsx)(t.code,{children:`@ryuzaki13/react-foundation-lib/media`})]})]}),(0,c.jsxs)(t.tr,{children:[(0,c.jsxs)(t.td,{children:[`Hook внутри `,(0,c.jsx)(t.code,{children:`if (window)`})]}),(0,c.jsx)(t.td,{children:`SSR-защита встроена; условный hook нарушает Rules of Hooks`})]}),(0,c.jsxs)(t.tr,{children:[(0,c.jsxs)(t.td,{children:[(0,c.jsx)(t.code,{children:`desktop`}),` как breakpoint`]}),(0,c.jsxs)(t.td,{children:[`Публичное имя широкого диапазона — `,(0,c.jsx)(t.code,{children:`laptop`})]})]}),(0,c.jsxs)(t.tr,{children:[(0,c.jsx)(t.td,{children:`Ожидание другого tablet fallback`}),(0,c.jsxs)(t.td,{children:[`Порядок: `,(0,c.jsx)(t.code,{children:`tablet → mobile → laptop`})]})]}),(0,c.jsxs)(t.tr,{children:[(0,c.jsx)(t.td,{children:`Ожидание truthy fallback`}),(0,c.jsxs)(t.td,{children:[(0,c.jsx)(t.code,{children:`false`}),`, `,(0,c.jsx)(t.code,{children:`0`}),` и `,(0,c.jsx)(t.code,{children:`""`}),` сохраняются; используется `,(0,c.jsx)(t.code,{children:`??`})]})]}),(0,c.jsxs)(t.tr,{children:[(0,c.jsxs)(t.td,{children:[`Business object имеет key `,(0,c.jsx)(t.code,{children:`mobile`})]}),(0,c.jsx)(t.td,{children:`Он будет распознан как responsive map`})]}),(0,c.jsxs)(t.tr,{children:[(0,c.jsx)(t.td,{children:`Ожидание deep resolve`}),(0,c.jsxs)(t.td,{children:[(0,c.jsx)(t.code,{children:`resolveProps`}),` обрабатывает только перечисленные top-level keys`]})]}),(0,c.jsxs)(t.tr,{children:[(0,c.jsxs)(t.td,{children:[`Неполный `,(0,c.jsx)(t.code,{children:`responsiveKeys`})]}),(0,c.jsx)(t.td,{children:`Runtime не разрешит пропущенное responsive-поле`})]}),(0,c.jsxs)(t.tr,{children:[(0,c.jsxs)(t.td,{children:[`Ожидание `,(0,c.jsx)(t.code,{children:`"2em"`}),` от `,(0,c.jsx)(t.code,{children:`pxToEm`})]}),(0,c.jsxs)(t.td,{children:[`Функция вернёт `,(0,c.jsx)(t.code,{children:`"2"`}),`; unit добавляет consumer`]})]}),(0,c.jsxs)(t.tr,{children:[(0,c.jsx)(t.td,{children:(0,c.jsx)(t.code,{children:`pxToEm(10, 0)`})}),(0,c.jsxs)(t.td,{children:[`Получится `,(0,c.jsx)(t.code,{children:`"Infinity"`}),`; валидации нет`]})]}),(0,c.jsxs)(t.tr,{children:[(0,c.jsx)(t.td,{children:`Line-height делится на font-size element`}),(0,c.jsxs)(t.td,{children:[`Он всегда делится на `,(0,c.jsx)(t.code,{children:`16`})]})]}),(0,c.jsxs)(t.tr,{children:[(0,c.jsx)(t.td,{children:`Style-only layout сделан через hook`}),(0,c.jsx)(t.td,{children:`Предпочтите CSS и избегайте post-hydration render`})]}),(0,c.jsxs)(t.tr,{children:[(0,c.jsx)(t.td,{children:`Проверка сразу после смены root class`}),(0,c.jsxs)(t.td,{children:[`Observer path имеет debounce `,(0,c.jsx)(t.code,{children:`80ms`})]})]}),(0,c.jsxs)(t.tr,{children:[(0,c.jsx)(t.td,{children:`В jsdom нет mock`}),(0,c.jsxs)(t.td,{children:[`Предоставьте `,(0,c.jsx)(t.code,{children:`matchMedia`}),` и при необходимости observers`]})]})]})]}),`
+`,(0,c.jsx)(t.h2,{id:`api-справочник`,children:`API-справочник`}),`
+`,(0,c.jsx)(t.h3,{id:`runtime-exports`,children:`Runtime exports`}),`
+`,(0,c.jsxs)(t.table,{children:[(0,c.jsx)(t.thead,{children:(0,c.jsxs)(t.tr,{children:[(0,c.jsx)(t.th,{children:`Export`}),(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:`BREAKPOINTS_EM`})}),(0,c.jsx)(t.td,{children:`readonly object`}),(0,c.jsxs)(t.td,{children:[`четыре границы mobile/tablet/laptop в `,(0,c.jsx)(t.code,{children:`em`})]})]}),(0,c.jsxs)(t.tr,{children:[(0,c.jsx)(t.td,{children:(0,c.jsx)(t.code,{children:`getCurrentFontSize`})}),(0,c.jsx)(t.td,{children:(0,c.jsx)(t.code,{children:`(element?: HTMLElement | null) => number`})}),(0,c.jsxs)(t.td,{children:[`computed font-size или fallback `,(0,c.jsx)(t.code,{children:`16`})]})]}),(0,c.jsxs)(t.tr,{children:[(0,c.jsx)(t.td,{children:(0,c.jsx)(t.code,{children:`getCurrentLineHeight`})}),(0,c.jsx)(t.td,{children:(0,c.jsx)(t.code,{children:`(element?: HTMLElement | null) => number`})}),(0,c.jsxs)(t.td,{children:[`parsed line-height, делённый на `,(0,c.jsx)(t.code,{children:`16`}),`, либо `,(0,c.jsx)(t.code,{children:`1.2`})]})]}),(0,c.jsxs)(t.tr,{children:[(0,c.jsx)(t.td,{children:(0,c.jsx)(t.code,{children:`getControlHeight`})}),(0,c.jsx)(t.td,{children:(0,c.jsx)(t.code,{children:`() => number`})}),(0,c.jsx)(t.td,{children:`root font-size + нормализованный line-height × 10`})]}),(0,c.jsxs)(t.tr,{children:[(0,c.jsx)(t.td,{children:(0,c.jsx)(t.code,{children:`pxToEm`})}),(0,c.jsx)(t.td,{children:(0,c.jsx)(t.code,{children:`(px: number, baseEm?: number) => string`})}),(0,c.jsxs)(t.td,{children:[`числовая строка `,(0,c.jsx)(t.code,{children:`px / base`}),` без unit`]})]}),(0,c.jsxs)(t.tr,{children:[(0,c.jsx)(t.td,{children:(0,c.jsx)(t.code,{children:`isResponsiveMap`})}),(0,c.jsx)(t.td,{children:`type guard`}),(0,c.jsx)(t.td,{children:`проверка breakpoint keys в object`})]}),(0,c.jsxs)(t.tr,{children:[(0,c.jsx)(t.td,{children:(0,c.jsx)(t.code,{children:`resolveResponsiveValue`})}),(0,c.jsx)(t.td,{children:(0,c.jsx)(t.code,{children:`(value, breakpoint) => T | undefined`})}),(0,c.jsx)(t.td,{children:`выбор exact/fallback значения`})]}),(0,c.jsxs)(t.tr,{children:[(0,c.jsx)(t.td,{children:(0,c.jsx)(t.code,{children:`resolveProps`})}),(0,c.jsx)(t.td,{children:(0,c.jsx)(t.code,{children:`(props, breakpoint, keys) => ResolvedProps<T>`})}),(0,c.jsx)(t.td,{children:`shallow resolve выбранных top-level props`})]}),(0,c.jsxs)(t.tr,{children:[(0,c.jsx)(t.td,{children:(0,c.jsx)(t.code,{children:`useMediaQuery`})}),(0,c.jsx)(t.td,{children:(0,c.jsx)(t.code,{children:`(query, options?) => boolean`})}),(0,c.jsx)(t.td,{children:`React subscription на произвольный query`})]}),(0,c.jsxs)(t.tr,{children:[(0,c.jsx)(t.td,{children:(0,c.jsx)(t.code,{children:`useMatchMedia`})}),(0,c.jsx)(t.td,{children:(0,c.jsx)(t.code,{children:`() => { matches, activeBreakpoint }`})}),(0,c.jsx)(t.td,{children:`singleton subscription на project breakpoints`})]})]})]}),`
+`,(0,c.jsx)(t.h3,{id:`type-exports`,children:`Type exports`}),`
+`,(0,c.jsxs)(t.table,{children:[(0,c.jsx)(t.thead,{children:(0,c.jsxs)(t.tr,{children:[(0,c.jsx)(t.th,{children:`Export`}),(0,c.jsx)(t.th,{children:`Contract`})]})}),(0,c.jsxs)(t.tbody,{children:[(0,c.jsxs)(t.tr,{children:[(0,c.jsx)(t.td,{children:(0,c.jsx)(t.code,{children:`Breakpoint`})}),(0,c.jsx)(t.td,{children:(0,c.jsx)(t.code,{children:`"mobile" | "tablet" | "laptop"`})})]}),(0,c.jsxs)(t.tr,{children:[(0,c.jsx)(t.td,{children:(0,c.jsx)(t.code,{children:`MediaMatches`})}),(0,c.jsx)(t.td,{children:(0,c.jsx)(t.code,{children:`Record<Breakpoint, boolean>`})})]}),(0,c.jsxs)(t.tr,{children:[(0,c.jsx)(t.td,{children:(0,c.jsx)(t.code,{children:`ResponsiveMap<T>`})}),(0,c.jsxs)(t.td,{children:[`optional `,(0,c.jsx)(t.code,{children:`mobile`}),` / `,(0,c.jsx)(t.code,{children:`tablet`}),` / `,(0,c.jsx)(t.code,{children:`laptop`}),` values`]})]}),(0,c.jsxs)(t.tr,{children:[(0,c.jsx)(t.td,{children:(0,c.jsx)(t.code,{children:`ResponsiveValue<T>`})}),(0,c.jsx)(t.td,{children:(0,c.jsx)(t.code,{children:`T | ResponsiveMap<T>`})})]}),(0,c.jsxs)(t.tr,{children:[(0,c.jsx)(t.td,{children:(0,c.jsx)(t.code,{children:`UnwrapResponsive<T>`})}),(0,c.jsx)(t.td,{children:`conditional type, извлекающий inner value`})]}),(0,c.jsxs)(t.tr,{children:[(0,c.jsx)(t.td,{children:(0,c.jsx)(t.code,{children:`ResolvedProps<T>`})}),(0,c.jsxs)(t.td,{children:[`mapped type с `,(0,c.jsx)(t.code,{children:`UnwrapResponsive`}),` для каждого поля`]})]})]})]}),`
+`,(0,c.jsxs)(t.p,{children:[`Options `,(0,c.jsx)(t.code,{children:`useMediaQuery`}),` и snapshot `,(0,c.jsx)(t.code,{children:`useMatchMedia`}),` видны в сигнатурах, но не экспортируются отдельными type aliases. Используйте inline object type или `,(0,c.jsx)(t.code,{children:`ReturnType<typeof useMatchMedia>`}),`.`]}),`
+`,(0,c.jsx)(t.h2,{id:`вопросы-и-ответы`,children:`Вопросы и ответы`}),`
+`,(0,c.jsx)(t.h3,{id:`можно-ли-использовать-pure-helpers-без-react`,children:`Можно ли использовать pure helpers без React?`}),`
+`,(0,c.jsxs)(t.p,{children:[`Да, они не вызывают React. Но entrypoint содержит React hooks, поэтому package resolver host-приложения должен разрешить peer dependency `,(0,c.jsx)(t.code,{children:`react`}),`.`]}),`
+`,(0,c.jsxs)(t.h3,{id:`можно-ли-вызвать-usemediaquery-в-обычной-функции`,children:[`Можно ли вызвать `,(0,c.jsx)(t.code,{children:`useMediaQuery`}),` в обычной функции?`]}),`
+`,(0,c.jsx)(t.p,{children:`Нет. Это React hook. Создайте custom hook или передайте уже вычисленный boolean.`}),`
+`,(0,c.jsx)(t.h3,{id:`почему-server-breakpoint--laptop`,children:`Почему server breakpoint — laptop?`}),`
+`,(0,c.jsx)(t.p,{children:`Сервер не знает viewport. Default snapshot имеет все matches false, а fallback алгоритма выбирает laptop.`}),`
+`,(0,c.jsxs)(t.h3,{id:`можно-ли-настроить-ssr-fallback-у-usematchmedia`,children:[`Можно ли настроить SSR fallback у `,(0,c.jsx)(t.code,{children:`useMatchMedia`}),`?`]}),`
+`,(0,c.jsxs)(t.p,{children:[`Нет. Настраиваемый fallback есть только у `,(0,c.jsx)(t.code,{children:`useMediaQuery`}),`.`]}),`
+`,(0,c.jsx)(t.h3,{id:`можно-ли-добавить-четвёртый-breakpoint`,children:`Можно ли добавить четвёртый breakpoint?`}),`
+`,(0,c.jsxs)(t.p,{children:[`Через публичный API — нет. Используйте `,(0,c.jsx)(t.code,{children:`useMediaQuery`}),` либо расширяйте общий module contract, если новый breakpoint нужен всему пакету.`]}),`
+`,(0,c.jsxs)(t.h3,{id:`почему-breakpoints_em-если-query-строятся-в-px`,children:[`Почему `,(0,c.jsx)(t.code,{children:`BREAKPOINTS_EM`}),`, если query строятся в px?`]}),`
+`,(0,c.jsxs)(t.p,{children:[`Границы описаны относительно базового размера текста. `,(0,c.jsx)(t.code,{children:`useMatchMedia`}),` читает root font-size и конвертирует их в px перед `,(0,c.jsx)(t.code,{children:`matchMedia`}),`.`]}),`
+`,(0,c.jsxs)(t.h3,{id:`можно-ли-использовать-breakpoints_em-в-css`,children:[`Можно ли использовать `,(0,c.jsx)(t.code,{children:`BREAKPOINTS_EM`}),` в CSS?`]}),`
+`,(0,c.jsx)(t.p,{children:`TypeScript constant нельзя напрямую прочитать из статического CSS. Не копируйте числа в десятки мест; используйте единый styling build contract или design tokens проекта.`}),`
+`,(0,c.jsxs)(t.h3,{id:`возвращает-ли-pxtoem-css-unit`,children:[`Возвращает ли `,(0,c.jsx)(t.code,{children:`pxToEm`}),` CSS unit?`]}),`
+`,(0,c.jsx)(t.p,{children:`Нет. Она возвращает только числовую строку.`}),`
+`,(0,c.jsxs)(t.h3,{id:`что-произойдёт-с-null`,children:[`Что произойдёт с `,(0,c.jsx)(t.code,{children:`null`}),`?`]}),`
+`,(0,c.jsxs)(t.p,{children:[`Top-level `,(0,c.jsx)(t.code,{children:`null`}),` может вернуться как обычное value. `,(0,c.jsx)(t.code,{children:`null`}),` внутри responsive map считается отсутствующим и запускает fallback.`]}),`
+`,(0,c.jsxs)(t.h3,{id:`нужно-ли-memoize-результат-usematchmedia`,children:[`Нужно ли memoize результат `,(0,c.jsx)(t.code,{children:`useMatchMedia`}),`?`]}),`
+`,(0,c.jsx)(t.p,{children:`Нет. Store сохраняет snapshot reference, пока matches не изменились. Memoize может понадобиться для object, который consumer создаёт на его основе.`}),`
+`,(0,c.jsx)(t.h3,{id:`hook-отслеживает-browser-zoom`,children:`Hook отслеживает browser zoom?`}),`
+`,(0,c.jsxs)(t.p,{children:[`Store реагирует на фактическое изменение root `,(0,c.jsx)(t.code,{children:`em`}),` через observers. Конкретное влияние zoom на CSS pixels и computed font-size зависит от browser.`]}),`
+`,(0,c.jsx)(t.h3,{id:`что-выбрать-для-адаптивной-карточки`,children:`Что выбрать для адаптивной карточки?`}),`
+`,(0,c.jsxs)(t.p,{children:[`Сначала проверьте готовые Flex/Grid/layout primitives в `,(0,c.jsx)(t.code,{children:`@ryuzaki13/react-foundation-ui`}),`. Низкоуровневый `,(0,c.jsx)(t.code,{children:`media`}),` нужен при создании общего primitive или когда готового контракта недостаточно.`]}),`
+`,(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:`../foundationLib.mdx`,children:`Обзор foundation-lib`})}),`
+`,(0,c.jsx)(t.li,{children:(0,c.jsx)(t.a,{href:`../../README.md`,children:`Корневой README пакета`})}),`
+`,(0,c.jsx)(t.li,{children:(0,c.jsx)(t.a,{href:`../dom/README.mdx`,children:`DOM helpers`})}),`
+`,(0,c.jsx)(t.li,{children:(0,c.jsx)(t.a,{href:`../hooks/README.mdx`,children:`Общие React hooks`})}),`
+`]}),`
+`,(0,c.jsxs)(t.p,{children:[`Исходный публичный entrypoint — `,(0,c.jsx)(t.code,{children:`@ryuzaki13/react-foundation-lib/media`}),`. Внутренние файлы модуля не являются отдельными package subpaths.`]})]})}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};