@soxa-ui/svelte 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,220 @@
-# Temporary Holding Version
+# @soxa-ui/svelte
 
-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 Svelte 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 Svelte's runes 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 Svelte's: slots
+are snippets, events arrive as callback props (`element:ready` → `onElementReady`), and the default
+slot is `children`.
+
+> **Status:** the Svelte adapter is in progress — Button, Icon, Label, Frame, ProgressSpinner,
+> Skeleton, the fields 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 and Switch, the form field `Field` (label, helper and error linked to the
+> control inside it), the collections ListBox, Tabs, Accordion, RadioGroup and Tags
+> (`<ListBox.Item>`, `<Tabs.Item>` with `<Tabs.Content>`, `<Accordion.Item>`,
+> `<RadioGroup.Item>`, `<Tags.Item>` or `items`; tags close, select by mode and either wrap or
+> scroll), Select (a combobox: `<Select.Item>` and `<Select.Group>` or `items`, `editable` with
+> search or filter, tags in the field in `multiple`), 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`), the
+> `DragAndDrop` wrapper that lets users reorder the items of Tabs, ListBox and Accordion by
+> dragging (`<DragAndDrop onMove={…}><ListBox items={…} /></DragAndDrop>`, `onMoveBefore` can
+> cancel),
+> Slider, Rating, ProgressLinear, Scroller, Pagination, the dates — DateInput (a date or a date
+> and time typed in parts in the locale's format, selected and copied as a whole), Calendar (month
+> grids with a month and year picker; a day is `Calendar.Item`, its content — the `item` snippet)
+> and DatePicker (a date field and a calendar in a panel: a single date or a range, with an optional
+> confirmation) — and the overlays — Popover (a panel at a trigger with any content), Tooltip,
+> Menu (an action menu at a button or on right click:
+> `<Menu.Item>`, `<Menu.CheckboxItem>`, `<Menu.RadioGroup>` with `<Menu.RadioItem>`,
+> `<Menu.Group>`, `<Menu.Separator>`, submenus `<Menu.Submenu>` and an item with its own panel
+> `<Menu.PopoverItem>`, or `items` — an item with nested `items` is a submenu), Dialog (a modal
+> window), Drawer (a panel that slides in at an edge) and Toasts (notifications shown from code
+> with `useToasts()`) — are ported, the rest of the set is on its way. Icon renders the `tag` it is
+> given: an element name, a Svelte component, or `roleIcon(role)` — the icon of that role from the
+> registered icon pack. Frame teleports its panel into `target` (`body` by default) on the client;
+> with `contained` it stays in place, on the server too. Dialog, Drawer, the region of Toasts, the
+> list panel of Select and the panels of Menu are teleported the same way, and `ref` of Dialog and
+> Drawer is the panel, of Toasts — the region. The server renders a Select from `items` with the
+> text of the selected option (with tags in `multiple`); options given as markup live in the panel
+> and join the collection on the client. The server renders a Menu as its trigger: the panel and
+> its items appear on the client. The server renders a DatePicker as its field with the calendar
+> button: the panel with the calendar appears on the client; a Calendar on its own the server
+> renders in full, its month and year picker in place and hidden. The date field, the calendar and
+> the DatePicker take their language from `LocaleProvider`: the order of parts, the first day of
+> the week, the month names. A field — and Select — gives its class and style to the root and
+> every other attribute to its `<input>` (a textarea — to its `<textarea>`); an item of a
+> collection — a menu item too — gives them to its row; a list box and tabs give them to the list
+> itself, `[role=listbox]` or `[role=tablist]`; a table gives them to the `<table>` itself, and its
+> class, style and `ref` to the scroll viewport around it; a menu, like a popover, gives them to
+> its root around the trigger. `Label` names the control it wraps; `LocaleProvider` gives a subtree
+> its language and library strings, such as the name of the clear button of `Input`. See
+> [the adapter table](https://github.com/youra-h/soxa-ui#components).
+
+## Install
+
+```bash
+npm install @soxa-ui/svelte @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/svelte`.
+
+Svelte `^5.55.10` is a peer dependency. The package ships its `.svelte` components uncompiled, so
+your app's bundler compiles them with its Svelte plugin (for Vite, `@sveltejs/vite-plugin-svelte`).
+A theme and an icon pack are separate packages — pick the ones you want.
+
+## Usage
+
+```svelte
+<script lang="ts">
+  import { Button } from '@soxa-ui/svelte'
+</script>
+
+<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:
+
+```svelte
+<script lang="ts">
+  import { TButton } from '@soxa-ui/core'
+  import { Button } from '@soxa-ui/svelte'
+
+  const btn = new TButton({ text: 'Save' })
+</script>
+
+<Button ctrl={btn} onActionPress={() => (btn.disabled = true)} />
+```
+
+An icon from the registered pack — the root of `Icon` is an `<svg>` of that role:
+
+```svelte
+<script lang="ts">
+  import { Icon, roleIcon } from '@soxa-ui/svelte'
+</script>
+
+<Icon tag={roleIcon('close')} aria_label="Close" />
+```
+
+A check box has no text of its own — its visible name is the `Label` around it:
+
+```svelte
+<script lang="ts">
+  import { CheckBox, Label } from '@soxa-ui/svelte'
+</script>
+
+<Label text="I agree">
+  <CheckBox onChangeValue={({ newValue }) => console.log(newValue)} />
+</Label>
+```
+
+A collection takes its items as markup parts or as data (`items`). Tabs keep their panels in the
+`content` snippet, next to the list of tabs rather than inside it:
+
+```svelte
+<script lang="ts">
+  import { Tabs } from '@soxa-ui/svelte'
+</script>
+
+<Tabs aria_label="Settings">
+  <Tabs.Item value="general" text="General" active />
+  <Tabs.Item value="privacy" text="Privacy" />
+  {#snippet content()}
+    <Tabs.Content value="general">General settings</Tabs.Content>
+    <Tabs.Content value="privacy">Privacy settings</Tabs.Content>
+  {/snippet}
+</Tabs>
+```
+
+Items given as data are drawn by the owner, and their slots are the owner's `item-<slot>` snippets,
+with the item in the scope. A snippet is opaque: an item cannot tell that it drew nothing, so a
+snippet given to the owner replaces the item's own content for every item — draw the default
+yourself where you need it.
+
+A popover and a tooltip take their trigger as the `trigger` snippet: the trigger is the element of
+the application, so the link to the panel (`aria-expanded`, `aria-controls`) and the pressed look
+come to it in the scope:
+
+```svelte
+<script lang="ts">
+  import { Button, Popover } from '@soxa-ui/svelte'
+</script>
+
+<Popover aria_label="Filters">
+  {#snippet trigger({ triggerAria, triggerDataset })}
+    <Button text="Filters" {...triggerAria} {...triggerDataset} />
+  {/snippet}
+  Any content: text, fields, buttons
+</Popover>
+```
+
+Toasts are shown from code. The manager wraps the application, and any component under it takes
+the API while it initializes; your own content of a toast is a Svelte component with a `toast`
+prop:
+
+```svelte
+<!-- App.svelte -->
+<Toasts>
+  <Page />
+</Toasts>
+
+<!-- Page.svelte -->
+<script lang="ts">
+  import { Button, useToasts } from '@soxa-ui/svelte'
+  import Undo from './Undo.svelte'
+
+  const { show } = useToasts()
+</script>
+
+<Button text="Delete" onclick={() => show({ text: 'Deleted', render: Undo })} />
+```
+
+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)).
+
+## 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/RoleIcon.svelte

@@ -0,0 +1,25 @@
+<script lang="ts">
+	import { getIcon } from '@soxa-ui/setup'
+	import type { Attachment } from 'svelte/attachments'
+	import type { TRoleIcon } from './icon'
+	import type { TRootNodeAttributes } from './root'
+
+	type TRoleIconProps = {
+		icon: TRoleIcon
+		/** Атрибуты корня `Icon`, разложенные на узел. */
+		attributes: TRootNodeAttributes
+		/** Привязка корня; нет её — `<svg>` часть компонента (отметка CheckBox). */
+		attach?: Attachment<Element>
+	}
+
+	const { icon, attributes, attach }: TRoleIconProps = $props()
+
+	// Из реестра на отрисовке: `useIcons()` может прийти после `roleIcon`
+	const source = $derived(getIcon(icon.role))
+</script>
+
+<!--
+	`<svg>` иконки по роли: корень `Icon` с меткой роли в `tag` и отметка
+	CheckBox. `body` — доверенный источник из пакета иконок, поэтому `{@html}`.
+-->
+<svg {...attributes} viewBox={source.viewBox} {@attach attach}>{@html source.body}</svg>

package/dist/adapter/common/RoleIcon.svelte.d.ts

@@ -0,0 +1,13 @@
+import type { Attachment } from 'svelte/attachments';
+import type { TRoleIcon } from './icon';
+import type { TRootNodeAttributes } from './root';
+type TRoleIconProps = {
+    icon: TRoleIcon;
+    /** Атрибуты корня `Icon`, разложенные на узел. */
+    attributes: TRootNodeAttributes;
+    /** Привязка корня; нет её — `<svg>` часть компонента (отметка CheckBox). */
+    attach?: Attachment<Element>;
+};
+declare const RoleIcon: import("svelte").Component<TRoleIconProps, {}, "">;
+type RoleIcon = ReturnType<typeof RoleIcon>;
+export default RoleIcon;

package/dist/adapter/common/click-action.d.ts

@@ -0,0 +1,7 @@
+/**
+ * The action of a part on a click (activate a tab, choose an option, close a
+ * panel) — a native listener on the part's node, given as its attachment
+ * (`{@attach}`). AGENTS.md (Svelte), «Клик части».
+ */
+import type { Attachment } from 'svelte/attachments';
+export declare function clickAction(action: (event: Event) => void): Attachment<Element>;

package/dist/adapter/common/click-action.js

@@ -0,0 +1,11 @@
+/**
+ * The action of a part on a click (activate a tab, choose an option, close a
+ * panel) — a native listener on the part's node, given as its attachment
+ * (`{@attach}`). AGENTS.md (Svelte), «Клик части».
+ */
+export function clickAction(action) {
+    return (node) => {
+        node.addEventListener('click', action);
+        return () => node.removeEventListener('click', action);
+    };
+}

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

@@ -0,0 +1,12 @@
+import type { IAdapterContext, IAdapterContextConfig, IAdapterContextOptions, IComponentDescriptor, IPluginsContract, TContextContract } from '@soxa-ui/setup';
+/** Опции `createAdapterContext`, но id монтирования обязателен: забытый ловят типы. */
+export type TSvelteAdapterContextOptions<TInstance extends object> = IAdapterContextOptions<TInstance> & {
+    mountId: string;
+};
+/**
+ * Сборка компонента Svelte, как `createVueAdapterContext` у Vue: id
+ * монтирования — `$props.id()` компонента, локаль — ближайшего
+ * `LocaleProvider`. Зовётся при инициализации компонента.
+ * AGENTS.md (Svelte), «Сборка компонента».
+ */
+export declare function createSvelteAdapterContext<TInstance extends object, TPlugins extends IPluginsContract>(descriptor: IComponentDescriptor<TContextContract<TInstance, TPlugins>>, options: TSvelteAdapterContextOptions<TInstance>, config?: IAdapterContextConfig): IAdapterContext<TContextContract<TInstance, TPlugins>>;

package/dist/adapter/common/createSvelteAdapterContext.js

@@ -0,0 +1,11 @@
+import { createAdapterContext } from '@soxa-ui/setup';
+import { nearestLocale } from '../locale/context';
+/**
+ * Сборка компонента Svelte, как `createVueAdapterContext` у Vue: id
+ * монтирования — `$props.id()` компонента, локаль — ближайшего
+ * `LocaleProvider`. Зовётся при инициализации компонента.
+ * AGENTS.md (Svelte), «Сборка компонента».
+ */
+export function createSvelteAdapterContext(descriptor, options, config) {
+    return createAdapterContext(descriptor, { ...options, locale: options.locale ?? nearestLocale() }, config);
+}

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

@@ -0,0 +1,6 @@
+/**
+ * Своё, затем обработчик потребителя — на одном событии разметки: обработчик
+ * события в Svelte — атрибут, и потребительский из спреда занял бы место
+ * своего. Как `chainHandler` у Solid.
+ */
+export declare function chainHandler<TEvent>(own: (event: TEvent) => void, consumer: ((event: TEvent) => unknown) | null | undefined): (event: TEvent) => void;

package/dist/adapter/common/handlers.js

@@ -0,0 +1,11 @@
+/**
+ * Своё, затем обработчик потребителя — на одном событии разметки: обработчик
+ * события в Svelte — атрибут, и потребительский из спреда занял бы место
+ * своего. Как `chainHandler` у Solid.
+ */
+export function chainHandler(own, consumer) {
+    return (event) => {
+        own(event);
+        consumer?.(event);
+    };
+}

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

@@ -0,0 +1,11 @@
+/**
+ * Иконка по роли — тег для `Icon`, как `roleIcon` у Vue. Компонент на лету
+ * Svelte не соберёт, поэтому это метка: по ней `Dynamic` рисует `RoleIcon`.
+ * Метка одна на роль — повторный вызов не меняет свойство `tag`. Ключа `tag`
+ * у неё нет: по нему `TIcon.getInstance` отличает пропсы иконки от тега.
+ */
+export declare class TRoleIcon {
+    readonly role: string;
+    constructor(role: string);
+}
+export declare function roleIcon(role: string): TRoleIcon;

package/dist/adapter/common/icon.js

@@ -0,0 +1,22 @@
+/**
+ * Иконка по роли — тег для `Icon`, как `roleIcon` у Vue. Компонент на лету
+ * Svelte не соберёт, поэтому это метка: по ней `Dynamic` рисует `RoleIcon`.
+ * Метка одна на роль — повторный вызов не меняет свойство `tag`. Ключа `tag`
+ * у неё нет: по нему `TIcon.getInstance` отличает пропсы иконки от тега.
+ */
+export class TRoleIcon {
+    role;
+    constructor(role) {
+        this.role = role;
+        Object.freeze(this);
+    }
+}
+const marks = new Map();
+export function roleIcon(role) {
+    const known = marks.get(role);
+    if (known)
+        return known;
+    const mark = new TRoleIcon(role);
+    marks.set(role, mark);
+    return mark;
+}

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

@@ -0,0 +1,8 @@
+export { SvelteProfile } from './profile';
+export { SvelteNaming } from './naming';
+export { createSvelteAdapterContext, type TSvelteAdapterContextOptions, } from './createSvelteAdapterContext';
+export { toControlAttrs, toRootForward, toRootLayout, toRootProps, toShownStyleText, toStyleText, toWrappedRootProps, type TRootAttributes, type TRootForward, type TRootLayout, type TRootNodeAttributes, type TRootState, type TRootStyle, type TRootStyleLayers, type TStyleProperties, type TWrappedRootAttributes, } from './root';
+export { chainHandler } from './handlers';
+export { clickAction } from './click-action';
+export { roleIcon, TRoleIcon } from './icon';
+export { default as RoleIcon } from './RoleIcon.svelte';

package/dist/adapter/common/index.js

@@ -0,0 +1,8 @@
+export { SvelteProfile } from './profile';
+export { SvelteNaming } from './naming';
+export { createSvelteAdapterContext, } from './createSvelteAdapterContext';
+export { toControlAttrs, toRootForward, toRootLayout, toRootProps, toShownStyleText, toStyleText, toWrappedRootProps, } from './root';
+export { chainHandler } from './handlers';
+export { clickAction } from './click-action';
+export { roleIcon, TRoleIcon } from './icon';
+export { default as RoleIcon } from './RoleIcon.svelte';

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

@@ -0,0 +1,3 @@
+/** Имена поверхности: события — колбэк-пропы, как у React (`element:ready` → `onElementReady`). */
+import type { INamingStrategy } from '@soxa-ui/setup';
+export declare const SvelteNaming: INamingStrategy;

package/dist/adapter/common/naming.js

@@ -0,0 +1,6 @@
+/** Имена поверхности: события — колбэк-пропы, как у React (`element:ready` → `onElementReady`). */
+import { underscorePropNaming, callbackEventNaming } from '@soxa-ui/setup';
+export const SvelteNaming = {
+    prop: underscorePropNaming,
+    event: callbackEventNaming,
+};

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

@@ -0,0 +1,2 @@
+import type { IAdapterProfile } from '@soxa-ui/setup';
+export declare const SvelteProfile: IAdapterProfile;

package/dist/adapter/common/profile.js

@@ -0,0 +1,2 @@
+import { SvelteNaming } from './naming';
+export const SvelteProfile = { naming: SvelteNaming, defaultSlot: 'children' };

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

@@ -0,0 +1,77 @@
+/**
+ * Раскладка корня — класс, стиль и атрибуты, которые во Vue сливает шаблон,
+ * а здесь одна склейка на все компоненты, как `toRootProps` у React.
+ * AGENTS.md (Svelte), «Атрибуты корня».
+ */
+import type { ClassValue } from 'svelte/elements';
+import type { TAttributesMap } from '@soxa-ui/core';
+/** Стиль, как его отдают плагины и ядро: имена — как в CSS (`z-index`, `--*`). */
+export type TRootStyle = Readonly<Record<string, string | number>>;
+/** Свойства стиля: имена — как в CSS, значения — строкой, пустых значений нет. */
+export type TStyleProperties = Readonly<Record<string, string>>;
+/** Стиль корня по слоям снизу вверх: из одноимённых свойств действует верхнее. */
+export type TRootStyleLayers = {
+    /** Раскладка, стиль-выход компонента, место элемента коллекции. */
+    readonly below: TStyleProperties;
+    /** Стиль потребителя строкой, как он её написал. */
+    readonly forward: string | undefined;
+    /** `display: none` скрытого корня. */
+    readonly above: TStyleProperties;
+};
+/** Что корню нужно из состояния компонента. */
+export type TRootState = {
+    readonly classes?: readonly string[];
+    readonly layout_styles?: TRootStyle;
+    /** Место элемента коллекции (`order` фасада); нет — своего места нет. */
+    readonly order?: number;
+    /** `false` прячет корень; нет ключа — корень виден всегда (Skeleton). */
+    readonly visible?: boolean;
+};
+/** Класс и стиль от потребителя. */
+export type TRootForward = {
+    readonly class?: ClassValue | null;
+    readonly style?: string | null;
+};
+export type TRootLayout = {
+    class: ClassValue;
+    style: TRootStyleLayers;
+};
+/** Атрибуты корня целиком: наборы ядра, атрибуты потребителя и раскладка. */
+export type TRootAttributes = Record<string, unknown> & TRootLayout;
+/** Обёртка корня и сам корень внутри неё — см. `toWrappedRootProps`. */
+export type TWrappedRootAttributes = {
+    readonly wrapper: TRootAttributes;
+    readonly root: TRootAttributes;
+};
+/** Атрибуты на узле корня; `style` строкой — только в серверной разметке. */
+export type TRootNodeAttributes = Record<string, unknown> & {
+    class: ClassValue;
+    style?: string;
+};
+/** `style` — стиль-выход компонента, его имя называет разметка (`fractionStyle`). */
+export declare function toRootLayout(state: TRootState, forward: TRootForward, style?: TRootStyle): TRootLayout;
+/** Стиль корня строкой атрибута — для серверной разметки. */
+export declare function toStyleAttribute(style: TRootStyleLayers): string | undefined;
+/** Стиль узла, который целиком пишет ядро (распорка окна ListBox), — строкой. */
+export declare function toStyleText(styles: TRootStyle | undefined): string | undefined;
+/** То же, и `display: none`, пока компонент скрыт, — подложка окна и панели. */
+export declare function toShownStyleText(styles: TRootStyle | undefined, shown: boolean): string | undefined;
+/**
+ * Атрибуты корня: наборы ядра `sets` в порядке Vue, поверх них атрибуты
+ * потребителя `forward` (и его attachment-ы), класс и стиль — `toRootLayout`.
+ */
+export declare function toRootProps(state: TRootState, sets: readonly (TAttributesMap | undefined)[], forward: TRootForward, style?: TRootStyle): TRootAttributes;
+/**
+ * Корень внутри обёртки (окно таблицы вокруг `table`): обёртке — её класс,
+ * класс и стиль потребителя и скрытие, корню — остальное поверх его наборов.
+ * Состояние корню — поимённо: остаток деструктуризации прочёл бы все руны.
+ */
+export declare function toWrappedRootProps(state: TRootState, sets: readonly (TAttributesMap | undefined)[], forward: TRootForward, wrapper: string, style?: TRootStyle): TWrappedRootAttributes;
+/** Класс и стиль потребителя — корню поля и обёртке таблицы. */
+export declare function toRootForward(forward: TRootForward): TRootForward;
+/**
+ * Остальное от потребителя — вложенному контролу: `<input>` поля, строке
+ * элемента, узлу списка. Аналог `useSplitAttrs` у Vue. Тип — атрибуты
+ * компонента, а не все пропсы: остаток сверяется с атрибутами контрола.
+ */
+export declare function toControlAttrs<TAttributes extends TRootForward>(forward: Partial<TAttributes>): Omit<Partial<TAttributes>, keyof TRootForward>;

package/dist/adapter/common/root.js

@@ -0,0 +1,88 @@
+/**
+ * Раскладка корня — класс, стиль и атрибуты, которые во Vue сливает шаблон,
+ * а здесь одна склейка на все компоненты, как `toRootProps` у React.
+ * AGENTS.md (Svelte), «Атрибуты корня».
+ */
+const HIDDEN = { display: 'none' };
+const NONE = {};
+/** Значение — строкой; пустое свойства не задаёт. */
+function toProperties(styles) {
+    const properties = {};
+    for (const [name, value] of Object.entries(styles ?? {})) {
+        if (value !== '')
+            properties[name] = String(value);
+    }
+    return properties;
+}
+function toDeclarations(properties) {
+    return Object.entries(properties).map(([name, value]) => `${name}: ${value}`);
+}
+/** Нет объявлений — `undefined`: атрибута `style` нет. */
+function joinDeclarations(declarations) {
+    return declarations.length > 0 ? declarations.join('; ') : undefined;
+}
+/** `style` — стиль-выход компонента, его имя называет разметка (`fractionStyle`). */
+export function toRootLayout(state, forward, style) {
+    return {
+        class: [...(state.classes ?? []), forward.class],
+        style: {
+            below: {
+                ...toProperties(state.layout_styles),
+                ...toProperties(style),
+                ...toProperties(state.order !== undefined ? { order: state.order } : undefined),
+            },
+            forward: forward.style || undefined,
+            above: state.visible === false ? HIDDEN : NONE,
+        },
+    };
+}
+/** Стиль корня строкой атрибута — для серверной разметки. */
+export function toStyleAttribute(style) {
+    return joinDeclarations([
+        ...toDeclarations(style.below),
+        ...(style.forward ? [style.forward] : []),
+        ...toDeclarations(style.above),
+    ]);
+}
+/** Стиль узла, который целиком пишет ядро (распорка окна ListBox), — строкой. */
+export function toStyleText(styles) {
+    return joinDeclarations(toDeclarations(toProperties(styles)));
+}
+/** То же, и `display: none`, пока компонент скрыт, — подложка окна и панели. */
+export function toShownStyleText(styles, shown) {
+    return toStyleText({ ...styles, ...(shown ? NONE : HIDDEN) });
+}
+/**
+ * Атрибуты корня: наборы ядра `sets` в порядке Vue, поверх них атрибуты
+ * потребителя `forward` (и его attachment-ы), класс и стиль — `toRootLayout`.
+ */
+export function toRootProps(state, sets, forward, style) {
+    const attributes = {};
+    for (const set of sets)
+        Object.assign(attributes, set);
+    return { ...attributes, ...forward, ...toRootLayout(state, forward, style) };
+}
+/**
+ * Корень внутри обёртки (окно таблицы вокруг `table`): обёртке — её класс,
+ * класс и стиль потребителя и скрытие, корню — остальное поверх его наборов.
+ * Состояние корню — поимённо: остаток деструктуризации прочёл бы все руны.
+ */
+export function toWrappedRootProps(state, sets, forward, wrapper, style) {
+    return {
+        wrapper: toRootProps({ classes: [wrapper], visible: state.visible }, [], toRootForward(forward)),
+        root: toRootProps({ classes: state.classes, layout_styles: state.layout_styles, order: state.order }, sets, toControlAttrs(forward), style),
+    };
+}
+/** Класс и стиль потребителя — корню поля и обёртке таблицы. */
+export function toRootForward(forward) {
+    return { class: forward.class, style: forward.style };
+}
+/**
+ * Остальное от потребителя — вложенному контролу: `<input>` поля, строке
+ * элемента, узлу списка. Аналог `useSplitAttrs` у Vue. Тип — атрибуты
+ * компонента, а не все пропсы: остаток сверяется с атрибутами контрола.
+ */
+export function toControlAttrs(forward) {
+    const { class: _class, style: _style, ...control } = forward;
+    return control;
+}

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

@@ -0,0 +1,13 @@
+/**
+ * Лифт одного ключа поверх контекста Svelte. `up()` отдаёт значение предка и
+ * после своего `down()` того же ключа: его до первой записи помнит слой
+ * сборки — общий для лифтов одной `useElevator()`. AGENTS.md (Svelte),
+ * «Контекст: лифт и локаль».
+ */
+import { TElevator } from '@soxa-ui/setup';
+export declare class TSvelteElevator<T = any> extends TElevator<T> {
+    private readonly _inherited;
+    constructor(key: string | symbol, _inherited: Map<symbol, unknown>);
+    down(value: T): void;
+    up(): T | undefined;
+}

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

@@ -0,0 +1,27 @@
+/**
+ * Лифт одного ключа поверх контекста Svelte. `up()` отдаёт значение предка и
+ * после своего `down()` того же ключа: его до первой записи помнит слой
+ * сборки — общий для лифтов одной `useElevator()`. AGENTS.md (Svelte),
+ * «Контекст: лифт и локаль».
+ */
+import { getContext, setContext } from 'svelte';
+import { TElevator } from '@soxa-ui/setup';
+export class TSvelteElevator extends TElevator {
+    _inherited;
+    constructor(key, _inherited) {
+        super(key);
+        this._inherited = _inherited;
+    }
+    down(value) {
+        if (!this._inherited.has(this._key)) {
+            this._inherited.set(this._key, getContext(this._key));
+        }
+        setContext(this._key, value);
+    }
+    up() {
+        if (!this._inherited.has(this._key))
+            return getContext(this._key);
+        // Тип значения задаёт ключ лифта: под этим ключом кладут только `T`
+        return this._inherited.get(this._key);
+    }
+}

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

@@ -0,0 +1,2 @@
+export { TSvelteElevator } from './elevator.class';
+export { useElevator } from './useElevator';

package/dist/adapter/elevator/index.js

@@ -0,0 +1,2 @@
+export { TSvelteElevator } from './elevator.class';
+export { useElevator } from './useElevator';