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

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Yuri Soldatov
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,3 +1,254 @@
-# Temporary Holding Version
+# @soxa-ui/react
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+**The React adapter: Soxa UI components rendered on the headless models of the core.**
+
+Part of [Soxa UI](https://github.com/youra-h/soxa-ui) — UI components with the logic written once: a
+framework-agnostic core and thin adapters that render it in Vue, React, Angular, Svelte, Solid and
+Web Components.
+
+The adapter is wiring, not behavior: it connects a core model to React's render cycle and renders
+the markup — BEM classes `so-*` and `data-*` state attributes. Props, events and slots come from the
+component descriptor, so they match the other five adapters; only the spelling is React's: events
+arrive as callback props (`element:ready` → `onElementReady`), and the default slot is `children`.
+
+> **Status:** the React adapter is in progress — Button, Icon, Label, Frame, Skeleton,
+> ProgressSpinner, ProgressLinear, Input, NumberInput (a number in the locale's format with − and +
+> step buttons; the form gets the number), Textarea (multi-line, growing with its text, with a
+> character counter), CheckBox, Switch, Slider, Rating, the form field `Field` (label, helper and
+> error linked to the control inside it), the dates — DateInput (a date, or a date and time with
+> `kind="datetime"`, typed in parts in the locale's format; the form gets the date as a string),
+> Calendar (month grids of `Calendar.Item` days; a month heading opens the month and year picker)
+> and DatePicker (a date field and a calendar in a panel: a single date or a range, with Cancel
+> and OK buttons under `confirmable`; the panel is teleported, so the server renders the field
+> and the calendar button, and the calendar appears on the client; every attribute of yours goes
+> to the root of a date component — a date field has no `<input>`, only its parts), the
+> collections ListBox, Tabs, Accordion and RadioGroup
+> (`<ListBox.Item>`, `<Tabs.Item>` with `<Tabs.Content>`, `<Accordion.Item>`, `<RadioGroup.Item>`
+> or `items`), the tag set Tags (`<Tags.Item>` or `items`, with close buttons and optional
+> selection), Select (a select field with a list in a panel: single selection, multiple selection
+> with tags in the field, typing with search or filtering, groups — `<Select.Item>`,
+> `<Select.Group>` or `items`; the options stand in the panel, so the server renders the field, and
+> options written as markup join the select on the client), Pagination, the `Scroller` strip, the
+> overlays Popover and Tooltip (the trigger in the `trigger` slot,
+> `trigger={({ triggerAria }) => <Button {...triggerAria} />}`), Menu (an
+> action menu at a button or a context menu on right click — `openOn="contextmenu"` — with
+> `<Menu.Item>`, `<Menu.CheckboxItem>`, `<Menu.RadioGroup>` with `<Menu.RadioItem>`,
+> `<Menu.Submenu>`, `<Menu.PopoverItem>`, `<Menu.Group>` and `<Menu.Separator>` or `items`, where
+> an item with nested `items` is a submenu; the items stand in its panel, so the server renders the
+> root with the trigger, and the items join the menu on the client), Dialog and
+> Drawer (open state in `visible`, user closing reported by `onChangeVisible`), Toasts
+> (notifications shown from code with `useToasts()`; the region is teleported into `target`, and
+> `ref` is the region), Table (columns and rows as data — `columns`, `items` — with sorting, row
+> selection, column resizing and reordering), the `Virtual` window for long lists
+> (`<Virtual><ListBox items={…} /></Virtual>`, the same with `Select` and `Table`) and the
+> `DragAndDrop` wrapper that lets users reorder the items of Tabs, ListBox and Accordion by dragging
+> (`<DragAndDrop onMove={…}><ListBox items={…} /></DragAndDrop>`, `onMoveBefore` can cancel) are
+> ported, the rest of the set is on its way. Icon renders the `tag` it is given; `roleIcon(role)`
+> makes that tag from the registered icon pack. See
+> [the adapter table](https://github.com/youra-h/soxa-ui#components).
+
+## Install
+
+```bash
+npm install @soxa-ui/react @soxa-ui/setup @soxa-ui/theme-oren @soxa-ui/icons-material
+```
+
+Install `@soxa-ui/setup` as a direct dependency for the `useIcons` and `useTheme` imports below.
+Keep it on the same version as `@soxa-ui/react`.
+
+React and React DOM `^19.3` are peer dependencies. A theme and an icon pack are separate packages —
+pick the ones you want.
+
+## Usage
+
+```tsx
+import { Button } from '@soxa-ui/react'
+
+export function Toolbar() {
+  return <Button text="Save" onActionPress={() => console.log('pressed')} />
+}
+```
+
+The same component can be driven from code — pass a core instance as `ctrl`, and both sides see the
+same state and events:
+
+```tsx
+import { TButton } from '@soxa-ui/core'
+import { Button } from '@soxa-ui/react'
+
+const btn = new TButton({ text: 'Save' })
+
+export function Toolbar() {
+  return <Button ctrl={btn} onActionPress={() => (btn.disabled = true)} />
+}
+```
+
+A menu takes its trigger in the `trigger` slot, like Popover: the link to the panel comes in the
+slot scope — `triggerAria` and `triggerDataset`. Choosing an action closes the menu and calls
+`onChoose`; a checkbox item and a radio item are checked in place, and the menu stays open:
+
+```tsx
+import { Button, Menu } from '@soxa-ui/react'
+
+export function Actions() {
+  return (
+    <Menu
+      trigger={({ triggerAria, triggerDataset }) => (
+        <Button text="Actions" {...triggerAria} {...triggerDataset} />
+      )}
+      onChoose={(item) => console.log(item.value)}
+    >
+      <Menu.Item value="edit" text="Edit" />
+      <Menu.Submenu value="share" text="Share">
+        <Menu.Item value="link" text="Copy link" />
+        <Menu.Item value="mail" text="Email" />
+      </Menu.Submenu>
+      <Menu.Separator />
+      <Menu.Item value="remove" text="Delete" />
+    </Menu>
+  )
+}
+```
+
+Toasts are shown from code. The manager wraps the application, and any component under it takes
+the API with the `useToasts()` hook — a component in a dialog under the manager too; your own
+content of a toast is a React component with a `toast` prop (`memo` and `forwardRef` components as
+well):
+
+```tsx
+import { Button, Toasts, useToasts, type TToastRender } from '@soxa-ui/react'
+
+const Undo: TToastRender = ({ toast }) => <Button text="Undo" onClick={() => toast.close()} />
+
+function Page() {
+  const { show } = useToasts()
+
+  return <Button text="Delete" onClick={() => show({ text: 'Deleted', render: Undo })} />
+}
+
+export function App() {
+  return (
+    <Toasts>
+      <Page />
+    </Toasts>
+  )
+}
+```
+
+The API belongs to the manager's assembly: a manager that React sets up again (StrictMode,
+`<Activity>`) without an `engine` of yours gives a new one, so an effect that shows a toast keeps
+`show` in its dependencies — `useEffect(() => { show('Saved') }, [show])`.
+
+The application plugs in a theme and an icon pack once, in its entry point:
+
+```ts
+import { useIcons, useTheme } from '@soxa-ui/setup'
+import * as material from '@soxa-ui/icons-material'
+import oren from '@soxa-ui/theme-oren/setup'
+
+import '@soxa-ui/theme-oren'
+
+useIcons(material)
+useTheme(oren)
+```
+
+`@soxa-ui/theme-oren` is the stylesheet of every component. To take only the components your
+pages use, import their stylesheets instead — `@soxa-ui/theme-oren/button.css`,
+`@soxa-ui/theme-oren/select.css`, one per component, each with the shared part of the theme
+(the theme's README, [Only the components you use](https://github.com/youra-h/soxa-ui/tree/main/packages/themes/oren#only-the-components-you-use)).
+
+## Server Components
+
+The components are Client Components: every module of the package that needs React opens with
+`'use client'`, so a Server Component — a page of the Next.js App Router — imports them as they
+are, without wrappers. The entry of the package is not a client module, so the types and the
+helpers without React import into a Server Component too.
+
+The parts hang on their owner in a Server Component as well, so it writes `Tabs.Item` the way a
+Client Component does — the flat names (`TabsItem`) work in both:
+
+```tsx
+// app/page.tsx — a Server Component
+import { Tabs } from '@soxa-ui/react'
+
+export default function Page() {
+  return (
+    <Tabs
+      aria_label="Settings"
+      content={
+        <>
+          <Tabs.Content value="general">General settings</Tabs.Content>
+          <Tabs.Content value="privacy">Privacy settings</Tabs.Content>
+        </>
+      }
+    >
+      <Tabs.Item value="general" text="General" active />
+      <Tabs.Item value="privacy" text="Privacy" />
+    </Tabs>
+  )
+}
+```
+
+In the App Router, call `useIcons` and `useTheme` in a client module — a file with `'use client'`
+that the root layout imports — and not in the layout itself. A Server Component runs with its own
+copy of `@soxa-ui/setup`, and what it registers never reaches the Client Components; a client
+module runs where they do — on the server for the HTML, and in the browser:
+
+```tsx
+// app/providers.tsx
+'use client'
+
+import type { ReactNode } from 'react'
+import { useIcons, useTheme } from '@soxa-ui/setup'
+import * as material from '@soxa-ui/icons-material'
+import oren from '@soxa-ui/theme-oren/setup'
+
+useIcons(material)
+useTheme(oren)
+
+export function Providers({ children }: { children: ReactNode }) {
+  return children
+}
+```
+
+```tsx
+// app/layout.tsx — a Server Component
+import type { ReactNode } from 'react'
+import { Providers } from './providers'
+
+import '@soxa-ui/theme-oren'
+
+export default function RootLayout({ children }: { children: ReactNode }) {
+  return (
+    <html lang="en">
+      <body>
+        <Providers>{children}</Providers>
+      </body>
+    </html>
+  )
+}
+```
+
+## Documentation
+
+- [Soxa UI README](https://github.com/youra-h/soxa-ui#readme) — the component set and what each
+  adapter implements so far.
+- [Architecture overview](https://github.com/youra-h/soxa-ui/blob/main/docs/architecture.md) —
+  layers, descriptors, plugins, collections, adapters.
+
+## Public API
+
+The package entry exports application components, their consumer types, the locale provider,
+and the supported icon and toast helpers. Component props, slots, events, refs and core models
+passed through `ctrl` remain the supported ways to customize the UI. Models come from
+`@soxa-ui/core`; theme, icon and external-plugin registration comes from `@soxa-ui/setup`.
+
+Assembly functions, adapter profiles, bindings, generated metadata and rendering templates
+are private implementation details. They are no longer exported from the package entry, and
+there is no public `/internal` entry. Code that imported them must use the component contract
+instead. Building a new adapter component from Soxa's assembly helpers is not a supported
+public SDK.
+
+## License
+
+[MIT](https://github.com/youra-h/soxa-ui/blob/main/LICENSE)

package/dist/adapter/common/aria.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Набор атрибутов ядра — в пропсы элемента: HTML-имена, которые у React
+ * другие (`tabindex` → `tabIndex`), переводятся, `null` — атрибута нет.
+ */
+import type { TAriaAttributes } from '@soxa-ui/core';
+export declare function toAriaProps(aria: TAriaAttributes | undefined): Record<string, unknown>;

package/dist/adapter/common/aria.js

@@ -0,0 +1,22 @@
+//#region src/adapter/common/aria.ts
+/** HTML-атрибут → имя пропа: только те, где имена расходятся. */
+var ATTRIBUTE_TO_PROP = {
+	tabindex: "tabIndex",
+	readonly: "readOnly",
+	for: "htmlFor",
+	inputmode: "inputMode",
+	contenteditable: "contentEditable",
+	spellcheck: "spellCheck",
+	autocorrect: "autoCorrect"
+};
+function toAriaProps(aria) {
+	if (!aria) return {};
+	const result = {};
+	for (const [name, value] of Object.entries(aria)) {
+		if (value === null) continue;
+		result[ATTRIBUTE_TO_PROP[name] ?? name] = value;
+	}
+	return result;
+}
+//#endregion
+export { toAriaProps };

package/dist/adapter/common/icon.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Иконка по роли из реестра — тег для `Icon` (аналог `roleIcon` у Vue): всё,
+ * что `Icon` кладёт на корень, ложится на `<svg>`. Компонент на роль один на
+ * модуль — новый тип на каждом рендере пересоздавал бы узел; роль резолвится
+ * на отрисовке — `useIcons()` может прийти позже.
+ */
+import type { ComponentType, SVGProps } from 'react';
+export type TRoleIconProps = SVGProps<SVGSVGElement>;
+export declare function roleIcon(role: string): ComponentType<TRoleIconProps>;

package/dist/adapter/common/icon.js

@@ -0,0 +1,22 @@
+"use client";
+import { getIcon } from "@soxa-ui/setup";
+import { jsx } from "react/jsx-runtime";
+//#region src/adapter/common/icon.tsx
+var icons = /* @__PURE__ */ new Map();
+function roleIcon(role) {
+	const known = icons.get(role);
+	if (known) return known;
+	function RoleIcon(props) {
+		const icon = getIcon(role);
+		return /* @__PURE__ */ jsx("svg", {
+			...props,
+			viewBox: icon.viewBox,
+			dangerouslySetInnerHTML: { __html: icon.body }
+		});
+	}
+	RoleIcon.displayName = `Icon_${role}`;
+	icons.set(role, RoleIcon);
+	return RoleIcon;
+}
+//#endregion
+export { roleIcon };

package/dist/adapter/common/index.d.ts

@@ -0,0 +1,6 @@
+export { ReactProfile } from './profile';
+export { toAriaProps } from './aria';
+export { toRootLayout, toRootProps, toRootForward, toWrappedRootProps, toControlAttrs, toPartClass, toReactStyle, type TRootState, type TRootStyle, type TRootForward, type TRootLayout, type TRootProps, type TWrappedRootProps, } from './root';
+export { renderSlot, hasSlot, relaySlot, type TSlotContent } from './slots';
+export { roleIcon, type TRoleIconProps } from './icon';
+export { ReactNaming } from './naming';

package/dist/adapter/common/naming.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Именование React: проп плагина `iconStyles_styles`, событие
+ * `element:ready` → колбэк `onElementReady`.
+ */
+import type { INamingStrategy } from '@soxa-ui/setup';
+export declare const ReactNaming: INamingStrategy;

package/dist/adapter/common/naming.js

@@ -0,0 +1,8 @@
+import { callbackEventNaming, underscorePropNaming } from "@soxa-ui/setup";
+//#region src/adapter/common/naming.ts
+var ReactNaming = {
+	prop: underscorePropNaming,
+	event: callbackEventNaming
+};
+//#endregion
+export { ReactNaming };

package/dist/adapter/common/profile.d.ts

@@ -0,0 +1,3 @@
+/** Профиль React для связки (`adapter.connect()`): имена и слот по умолчанию. */
+import type { IAdapterProfile } from '@soxa-ui/setup';
+export declare const ReactProfile: IAdapterProfile;

package/dist/adapter/common/profile.js

@@ -0,0 +1,8 @@
+import { ReactNaming } from "./naming.js";
+//#region src/adapter/common/profile.ts
+var ReactProfile = {
+	naming: ReactNaming,
+	defaultSlot: "children"
+};
+//#endregion
+export { ReactProfile };

package/dist/adapter/common/root.d.ts

@@ -0,0 +1,67 @@
+/**
+ * Раскладка корня: класс, стиль и атрибуты, которые сходятся на корне, — то,
+ * что у Vue делают привязки шаблона и слияние атрибутов. Порядок слоёв и
+ * дележ атрибутов потребителя — AGENTS.md (React), «Корень и `ref`
+ * потребителя».
+ */
+import type { CSSProperties } from 'react';
+import type { TAttributesMap } from '@soxa-ui/core';
+/** Стиль, как его отдают плагины и ядро: имена — как в CSS (`z-index`, `--*`). */
+export type TRootStyle = Readonly<Record<string, string | number>>;
+/** Что корню нужно из состояния компонента. */
+export type TRootState = {
+    readonly classes?: readonly string[];
+    /** Выход плагина раскладки. */
+    readonly layout_styles?: TRootStyle;
+    /** Место элемента коллекции во флекс-ряду; нет — своего места нет. */
+    readonly order?: number;
+    /** `false` прячет корень; нет — корень виден всегда. */
+    readonly visible?: boolean;
+};
+/** Класс и стиль потребителя. */
+export type TRootForward = {
+    readonly className?: string;
+    readonly style?: CSSProperties;
+};
+export type TRootLayout = {
+    className: string;
+    style: CSSProperties;
+};
+/** Корень целиком: атрибуты, раскладка и `ref` адаптера. */
+export type TRootProps = Record<string, unknown> & TRootLayout & {
+    ref: (element: Element | null) => void;
+};
+/** Обёртка корня и сам корень внутри неё — см. `toWrappedRootProps`. */
+export type TWrappedRootProps = {
+    readonly wrapper: Record<string, unknown> & TRootLayout;
+    readonly root: TRootProps;
+};
+/** Стиль плагинов и ядра — в объект стиля React. */
+export declare function toReactStyle(styles: TRootStyle | undefined): Record<string, string | number>;
+/** Класс и стиль корня; `style` — стиль-выход самого компонента (`fractionStyle`). */
+export declare function toRootLayout(state: TRootState, forward: TRootForward, style?: TRootStyle): TRootLayout;
+/**
+ * Пропсы корня: наборы ядра `sets`, поверх — атрибуты потребителя `forward`,
+ * раскладка, `ref` адаптера последним.
+ */
+export declare function toRootProps(ref: (element: Element | null) => void, state: TRootState, sets: readonly (TAttributesMap | undefined)[], forward: TRootForward, style?: TRootStyle): TRootProps;
+/**
+ * Атрибуты вложенного контрола: то, что компонент не съел, без класса, стиля
+ * и `ref` (аналог `useSplitAttrs` у Vue). Параметр типа — атрибуты компонента
+ * (`TDomAttributes`): входов дескриптора в `forwardProps` уже нет.
+ */
+export declare function toControlAttrs<TAttributes extends TRootForward & {
+    readonly ref?: unknown;
+}>(forward: Partial<TAttributes>): Omit<Partial<TAttributes>, keyof TRootForward | 'ref'>;
+/** Класс и стиль потребителя — то, что из его атрибутов остаётся корню. */
+export declare function toRootForward(forward: TRootForward): TRootForward;
+/** Классы части без своего экземпляра — строкой для `className` (панель Menu на Frame). */
+export declare function toPartClass(classes: readonly string[] | undefined): string;
+/**
+ * Корень внутри обёртки (окно таблицы вокруг `table`): обёртке — её класс,
+ * класс, стиль и `ref` потребителя, скрытие; корню — `toRootProps` с
+ * остальными атрибутами, ref корня — `bindRef`.
+ */
+export declare function toWrappedRootProps(ref: (element: Element | null) => void, state: TRootState, sets: readonly (TAttributesMap | undefined)[], forward: TRootForward & {
+    readonly ref?: unknown;
+}, className: string): TWrappedRootProps;

package/dist/adapter/common/root.js

@@ -0,0 +1,83 @@
+import { toAriaProps } from "./aria.js";
+//#region src/adapter/common/root.ts
+var HIDDEN = { display: "none" };
+/** `z-index` → `zIndex`; пользовательское свойство (`--*`) — как есть. */
+function toStyleName(name) {
+	if (name.startsWith("--")) return name;
+	return name.replace(/-([a-z])/g, (_, letter) => letter.toUpperCase());
+}
+/** Стиль плагинов и ядра — в объект стиля React. */
+function toReactStyle(styles) {
+	const result = {};
+	for (const [name, value] of Object.entries(styles ?? {})) result[toStyleName(name)] = value;
+	return result;
+}
+/** Класс и стиль корня; `style` — стиль-выход самого компонента (`fractionStyle`). */
+function toRootLayout(state, forward, style) {
+	return {
+		className: [state.classes?.join(" "), forward.className].filter(Boolean).join(" "),
+		style: {
+			...toReactStyle(state.layout_styles),
+			...toReactStyle(style),
+			...state.order !== void 0 ? { order: state.order } : void 0,
+			...forward.style,
+			...state.visible === false ? HIDDEN : void 0
+		}
+	};
+}
+/**
+* Пропсы корня: наборы ядра `sets`, поверх — атрибуты потребителя `forward`,
+* раскладка, `ref` адаптера последним.
+*/
+function toRootProps(ref, state, sets, forward, style) {
+	const attributes = {};
+	for (const set of sets) Object.assign(attributes, toAriaProps(set));
+	return {
+		...attributes,
+		...forward,
+		...toRootLayout(state, forward, style),
+		ref
+	};
+}
+/**
+* Атрибуты вложенного контрола: то, что компонент не съел, без класса, стиля
+* и `ref` (аналог `useSplitAttrs` у Vue). Параметр типа — атрибуты компонента
+* (`TDomAttributes`): входов дескриптора в `forwardProps` уже нет.
+*/
+function toControlAttrs(forward) {
+	const { className: _className, style: _style, ref: _ref, ...control } = forward;
+	return control;
+}
+/** Класс и стиль потребителя — то, что из его атрибутов остаётся корню. */
+function toRootForward(forward) {
+	return {
+		className: forward.className,
+		style: forward.style
+	};
+}
+/** Классы части без своего экземпляра — строкой для `className` (панель Menu на Frame). */
+function toPartClass(classes) {
+	return classes?.join(" ") ?? "";
+}
+/**
+* Корень внутри обёртки (окно таблицы вокруг `table`): обёртке — её класс,
+* класс, стиль и `ref` потребителя, скрытие; корню — `toRootProps` с
+* остальными атрибутами, ref корня — `bindRef`.
+*/
+function toWrappedRootProps(ref, state, sets, forward, className) {
+	const { visible, ...root } = state;
+	const own = toRootForward(forward);
+	return {
+		wrapper: {
+			ref: forward.ref,
+			className: [className, own.className].filter(Boolean).join(" "),
+			style: {
+				...own.style,
+				...visible === false ? HIDDEN : void 0
+			}
+		},
+		root: toRootProps(ref, root, sets, toControlAttrs(forward))
+	};
+}
+//#endregion
+export { toControlAttrs, toPartClass, toReactStyle, toRootForward, toRootLayout, toRootProps, toWrappedRootProps };

package/dist/adapter/common/slots.d.ts

@@ -0,0 +1,15 @@
+/**
+ * Содержимое слота: функция — вызвать со scope, остальное — как есть; пустое
+ * — `undefined`, и встаёт запасное. AGENTS.md (React), «Слоты».
+ */
+import type { ReactNode } from 'react';
+export type TSlotContent<TScope extends object = object> = ReactNode | ((scope: TScope) => ReactNode);
+export declare function renderSlot<TScope extends object = object>(content: TSlotContent<TScope> | undefined, scope?: TScope): ReactNode;
+/** Передан ли слот — аналог `$slots.x` у Vue; функция передана всегда. */
+export declare function hasSlot<TScope extends object>(content: TSlotContent<TScope> | undefined): boolean;
+/**
+ * Проброс слота владельца в слот элемента: к scope элемента добавляется
+ * `extra` — сам элемент. Слота нет — проброса нет. Scope элемента выводится
+ * из типа слота элемента (`NoInfer`).
+ */
+export declare function relaySlot<TScope extends object, TExtra extends object>(content: TSlotContent<NoInfer<TScope & TExtra>> | undefined, extra: TExtra): ((scope: TScope) => ReactNode) | undefined;

package/dist/adapter/common/slots.js

@@ -0,0 +1,23 @@
+//#region src/adapter/common/slots.ts
+function renderSlot(content, scope) {
+	const node = typeof content === "function" ? content(scope ?? {}) : content;
+	return hasSlot(node) ? node : void 0;
+}
+/** Передан ли слот — аналог `$slots.x` у Vue; функция передана всегда. */
+function hasSlot(content) {
+	return content !== void 0 && content !== null && typeof content !== "boolean";
+}
+/**
+* Проброс слота владельца в слот элемента: к scope элемента добавляется
+* `extra` — сам элемент. Слота нет — проброса нет. Scope элемента выводится
+* из типа слота элемента (`NoInfer`).
+*/
+function relaySlot(content, extra) {
+	if (!hasSlot(content)) return void 0;
+	return (scope) => renderSlot(content, {
+		...scope,
+		...extra
+	});
+}
+//#endregion
+export { hasSlot, relaySlot, renderSlot };

package/dist/adapter/elevator/Elevate.d.ts

@@ -0,0 +1,16 @@
+/**
+ * Elevate — отдаёт детям слой лифта компонента (`layer` сборки): аналог
+ * `provide` у Vue. AGENTS.md (React), «Срок жизни контекста».
+ */
+import type { ReactNode } from 'react';
+import { type TElevatorLayer } from './layer';
+export type TElevateProps = {
+    layer: TElevatorLayer;
+    children?: ReactNode;
+};
+export declare function Elevate({ layer, children }: TElevateProps): ReactNode;
+/**
+ * Содержимое слота под слоем лифта; пустой слот — как есть, чтобы встало
+ * запасное. Так контрол поля отдаёт слой только слотам, без лишних узлов.
+ */
+export declare function elevated(layer: TElevatorLayer, content: ReactNode): ReactNode;

package/dist/adapter/elevator/Elevate.js

@@ -0,0 +1,22 @@
+"use client";
+import { ElevatorContext } from "./layer.js";
+import { jsx } from "react/jsx-runtime";
+//#region src/adapter/elevator/Elevate.tsx
+function Elevate({ layer, children }) {
+	return /* @__PURE__ */ jsx(ElevatorContext, {
+		value: layer,
+		children
+	});
+}
+/**
+* Содержимое слота под слоем лифта; пустой слот — как есть, чтобы встало
+* запасное. Так контрол поля отдаёт слой только слотам, без лишних узлов.
+*/
+function elevated(layer, content) {
+	return content === void 0 ? void 0 : /* @__PURE__ */ jsx(Elevate, {
+		layer,
+		children: content
+	});
+}
+//#endregion
+export { Elevate, elevated };

package/dist/adapter/elevator/elevator.class.d.ts

@@ -0,0 +1,14 @@
+/**
+ * TReactElevator — лифт одного ключа поверх слоя сборки: `up()` читает
+ * родительский слой, `down()` пишет в слой компонента. `useContext` лифт не
+ * зовёт: сборка идёт и вне рендера. AGENTS.md (React), «Срок жизни
+ * контекста».
+ */
+import { TElevator } from '@soxa-ui/setup';
+import type { TReactElevatorScope } from './scope.class';
+export declare class TReactElevator<T = unknown> extends TElevator<T> {
+    private readonly _scope;
+    constructor(key: string | symbol, _scope: TReactElevatorScope);
+    down(value: T): void;
+    up(): T | undefined;
+}

package/dist/adapter/elevator/elevator.class.js

@@ -0,0 +1,23 @@
+import { TElevator } from "@soxa-ui/setup";
+//#region src/adapter/elevator/elevator.class.ts
+/**
+* TReactElevator — лифт одного ключа поверх слоя сборки: `up()` читает
+* родительский слой, `down()` пишет в слой компонента. `useContext` лифт не
+* зовёт: сборка идёт и вне рендера. AGENTS.md (React), «Срок жизни
+* контекста».
+*/
+var TReactElevator = class extends TElevator {
+	_scope;
+	constructor(key, _scope) {
+		super(key);
+		this._scope = _scope;
+	}
+	down(value) {
+		this._scope.write(this._key, value);
+	}
+	up() {
+		return this._scope.read(this._key);
+	}
+};
+//#endregion
+export { TReactElevator };

package/dist/adapter/elevator/index.d.ts

@@ -0,0 +1,3 @@
+export { TReactElevator } from './elevator.class';
+export { Elevate, elevated, type TElevateProps } from './Elevate';
+export type { TElevatorLayer } from './layer';