@cloud-ru/ds-theme 1.0.0

package/dist/cjs/utils/customTheme/constants.d.ts

@@ -0,0 +1,31 @@
+/** Тон акцента (`--sn-brand-color-primary-55`) — им становится сам seed-цвет. */
+export declare const PRIMARY_ACCENT_TONE = "55";
+/** Near-white тон для текста на акценте (совпадает с дефолтом `onAccentLight` бренда `brandA`). */
+export declare const NEAR_WHITE_TONE = "99";
+/** Near-dark тон для текста на акценте (совпадает с дефолтом `onAccentDark` бренда `brandA`). */
+export declare const NEAR_DARK_TONE = "5";
+/** Все числовые тоны палитры `--sn-brand-color-primary-<tone>`. */
+export declare const BRAND_PRIMARY_TONES: readonly ["5", "10", "15", "25", "45", "55", "60", "65", "80", "90", "95", "99"];
+export type BrandPrimaryTone = (typeof BRAND_PRIMARY_TONES)[number];
+/** Опорные hex тонов бренда `brandA` — источник `L`/`C` для генерации по любому seed-цвету. */
+export declare const BASE_BRAND_PALETTE: Record<BrandPrimaryTone, string>;
+/** Префикс CSS-переменных бренд-палитры. */
+export declare const BRAND_PRIMARY_VAR_PREFIX = "--sn-brand-color-primary-";
+/** Alpha-суффикс для `--sn-brand-color-primary-transparent` (совпадает с дефолтом `#389f7424` бренда `brandA`). */
+export declare const TRANSPARENT_ALPHA_SUFFIX = "24";
+/**
+ * Тинты акцента для activated-состояний (`--sn-brand-color-state-activated-*-background`) — это
+ * акцентный тон с alpha. Суффиксы совпадают с дефолтами brandA (`#389f7426/59/73`). Без них
+ * activated-заливки (выбранная строка таблицы, active-состояния) не следуют за кастомным бренд-цветом.
+ */
+export declare const ACTIVATED_ALPHA_SUFFIX: {
+    readonly default: "26";
+    readonly hovered: "59";
+    readonly pressed: "73";
+};
+/** Имена CSS-переменных activated-заливок. */
+export declare const BRAND_ACTIVATED_VAR: {
+    readonly default: "--sn-brand-color-state-activated-default-background";
+    readonly hovered: "--sn-brand-color-state-activated-hovered-background";
+    readonly pressed: "--sn-brand-color-state-activated-pressed-background";
+};

package/dist/cjs/utils/customTheme/constants.js

@@ -0,0 +1,49 @@
+"use strict";
+// Опорная палитра и тон-константы для генерации кастомного бренд-цвета. Тоновый набор и дефолтные
+// hex совпадают с `--sn-brand-color-primary-<tone>` бренда `brandA` из `@cloud-ru/figma-variables`:
+// генератор держит `L`/`C` этих тонов и поворачивает hue к seed-цвету потребителя.
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.BRAND_ACTIVATED_VAR = exports.ACTIVATED_ALPHA_SUFFIX = exports.TRANSPARENT_ALPHA_SUFFIX = exports.BRAND_PRIMARY_VAR_PREFIX = exports.BASE_BRAND_PALETTE = exports.BRAND_PRIMARY_TONES = exports.NEAR_DARK_TONE = exports.NEAR_WHITE_TONE = exports.PRIMARY_ACCENT_TONE = void 0;
+/** Тон акцента (`--sn-brand-color-primary-55`) — им становится сам seed-цвет. */
+exports.PRIMARY_ACCENT_TONE = '55';
+/** Near-white тон для текста на акценте (совпадает с дефолтом `onAccentLight` бренда `brandA`). */
+exports.NEAR_WHITE_TONE = '99';
+/** Near-dark тон для текста на акценте (совпадает с дефолтом `onAccentDark` бренда `brandA`). */
+exports.NEAR_DARK_TONE = '5';
+/** Все числовые тоны палитры `--sn-brand-color-primary-<tone>`. */
+exports.BRAND_PRIMARY_TONES = ['5', '10', '15', '25', '45', '55', '60', '65', '80', '90', '95', '99'];
+/** Опорные hex тонов бренда `brandA` — источник `L`/`C` для генерации по любому seed-цвету. */
+exports.BASE_BRAND_PALETTE = {
+    '5': '#21372f',
+    '10': '#243e35',
+    '15': '#2b483c',
+    '25': '#2c5e49',
+    '45': '#22775b',
+    '55': '#389f74',
+    '60': '#5ebb91',
+    '65': '#85ceaa',
+    '80': '#caeadb',
+    '90': '#edf7f1',
+    '95': '#f5fdf8',
+    '99': '#fbfffc',
+};
+/** Префикс CSS-переменных бренд-палитры. */
+exports.BRAND_PRIMARY_VAR_PREFIX = '--sn-brand-color-primary-';
+/** Alpha-суффикс для `--sn-brand-color-primary-transparent` (совпадает с дефолтом `#389f7424` бренда `brandA`). */
+exports.TRANSPARENT_ALPHA_SUFFIX = '24';
+/**
+ * Тинты акцента для activated-состояний (`--sn-brand-color-state-activated-*-background`) — это
+ * акцентный тон с alpha. Суффиксы совпадают с дефолтами brandA (`#389f7426/59/73`). Без них
+ * activated-заливки (выбранная строка таблицы, active-состояния) не следуют за кастомным бренд-цветом.
+ */
+exports.ACTIVATED_ALPHA_SUFFIX = {
+    default: '26',
+    hovered: '59',
+    pressed: '73',
+};
+/** Имена CSS-переменных activated-заливок. */
+exports.BRAND_ACTIVATED_VAR = {
+    default: '--sn-brand-color-state-activated-default-background',
+    hovered: '--sn-brand-color-state-activated-hovered-background',
+    pressed: '--sn-brand-color-state-activated-pressed-background',
+};

package/dist/cjs/utils/customTheme/generateBrandPalette.d.ts

@@ -0,0 +1,10 @@
+import { BrandPrimaryTone } from './constants';
+/** Сгенерированная бренд-палитра: тон → hex. */
+export type BrandPalette = Record<BrandPrimaryTone, string>;
+/**
+ * Строит бренд-палитру из одного seed-цвета: берёт `L`/`C` каждого опорного тона `BASE_BRAND_PALETTE`
+ * и поворачивает hue к hue seed-цвета (OKLCH). Тон акцента (`55`) становится самим seed-цветом.
+ * Так один цвет потребителя перекрашивает всю шкалу `--sn-brand-color-primary-<tone>`, сохраняя
+ * светлоту/насыщенность DS-палитры. Невалидный hex → `null`.
+ */
+export declare function generateBrandPalette(seedColor: string): BrandPalette | null;

package/dist/cjs/utils/customTheme/generateBrandPalette.js

@@ -0,0 +1,25 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.generateBrandPalette = generateBrandPalette;
+const color_1 = require("./color");
+const constants_1 = require("./constants");
+/**
+ * Строит бренд-палитру из одного seed-цвета: берёт `L`/`C` каждого опорного тона `BASE_BRAND_PALETTE`
+ * и поворачивает hue к hue seed-цвета (OKLCH). Тон акцента (`55`) становится самим seed-цветом.
+ * Так один цвет потребителя перекрашивает всю шкалу `--sn-brand-color-primary-<tone>`, сохраняя
+ * светлоту/насыщенность DS-палитры. Невалидный hex → `null`.
+ */
+function generateBrandPalette(seedColor) {
+    const seed = (0, color_1.hex2color)(seedColor);
+    if (!seed) {
+        return null;
+    }
+    const { h: hue } = seed;
+    const palette = {};
+    for (const tone of constants_1.BRAND_PRIMARY_TONES) {
+        const baseHex = tone === constants_1.PRIMARY_ACCENT_TONE ? seedColor : constants_1.BASE_BRAND_PALETTE[tone];
+        const base = (0, color_1.hex2color)(baseHex);
+        palette[tone] = base ? (0, color_1.lch2color)([base.l, base.c, hue]).hex : baseHex;
+    }
+    return palette;
+}

package/dist/cjs/utils/customTheme/index.d.ts

@@ -0,0 +1,4 @@
+export * from './constants';
+export * from './generateBrandPalette';
+export * from './buildBrandPaletteVars';
+export * from './buildBrandPaletteCss';

package/dist/cjs/utils/customTheme/index.js

@@ -0,0 +1,20 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./constants"), exports);
+__exportStar(require("./generateBrandPalette"), exports);
+__exportStar(require("./buildBrandPaletteVars"), exports);
+__exportStar(require("./buildBrandPaletteCss"), exports);

package/dist/cjs/utils/getThemeClassnames.d.ts

@@ -0,0 +1,17 @@
+import { ThemeAppearance } from '../types/appearance';
+/**
+ * Чистая функция: собирает **полный** набор `sn-*` классов из осей оформления списком токенов.
+ * Полный набор обязателен на каждой DOM-границе — токены `@cloud-ru/figma-variables` не
+ * переопределяются по одной оси через CSS-каскад (см. providers-standard.md). Базовые слои
+ * (`sn-base-styles`, `sn-figmaStyles`, `sn-components`) и материал (`sn-yes`/`sn-no`)
+ * — всегда; `density`/`colorScheme`/`brand`/`brandRole` — если заданы.
+ *
+ * Списочная форма — источник истины для `getThemeClassnames` (строка через `join`) и для
+ * `element.classList.add(...)`, которому нужны отдельные токены без промежуточного `split`.
+ */
+export declare function getThemeClassnameList(appearance?: ThemeAppearance): string[];
+/**
+ * Строковая форма набора `sn-*` (через `join`). Используется на SSR (строка класса на `<html>`) и
+ * как основа хука `useThemeClassnames`. Для `classList`-операций бери `getThemeClassnameList`.
+ */
+export declare function getThemeClassnames(appearance?: ThemeAppearance): string;

package/dist/cjs/utils/getThemeClassnames.js

@@ -0,0 +1,38 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getThemeClassnameList = getThemeClassnameList;
+exports.getThemeClassnames = getThemeClassnames;
+/**
+ * Чистая функция: собирает **полный** набор `sn-*` классов из осей оформления списком токенов.
+ * Полный набор обязателен на каждой DOM-границе — токены `@cloud-ru/figma-variables` не
+ * переопределяются по одной оси через CSS-каскад (см. providers-standard.md). Базовые слои
+ * (`sn-base-styles`, `sn-figmaStyles`, `sn-components`) и материал (`sn-yes`/`sn-no`)
+ * — всегда; `density`/`colorScheme`/`brand`/`brandRole` — если заданы.
+ *
+ * Списочная форма — источник истины для `getThemeClassnames` (строка через `join`) и для
+ * `element.classList.add(...)`, которому нужны отдельные токены без промежуточного `split`.
+ */
+function getThemeClassnameList(appearance = {}) {
+    const { density, colorScheme, brand, brandRole, acrylic } = appearance;
+    const classes = ['sn-base-styles', 'sn-figmaStyles', 'sn-components', acrylic ? 'sn-yes' : 'sn-no'];
+    if (density) {
+        classes.push(`sn-${density}`);
+    }
+    if (colorScheme) {
+        classes.push(`sn-${colorScheme}`);
+    }
+    if (brand) {
+        classes.push(`sn-${brand}`);
+    }
+    if (brandRole) {
+        classes.push(`sn-${brandRole}`);
+    }
+    return classes;
+}
+/**
+ * Строковая форма набора `sn-*` (через `join`). Используется на SSR (строка класса на `<html>`) и
+ * как основа хука `useThemeClassnames`. Для `classList`-операций бери `getThemeClassnameList`.
+ */
+function getThemeClassnames(appearance = {}) {
+    return getThemeClassnameList(appearance).join(' ');
+}

package/dist/cjs/utils/index.d.ts

@@ -0,0 +1,7 @@
+export * from './mergeAppearance';
+export * from './getThemeClassnames';
+export * from './resolveColorScheme';
+export * from './colorSchemeStorage';
+export * from './colorSchemeFromHeaders';
+export * from './themeBootstrap';
+export * from './customTheme';

package/dist/cjs/utils/index.js

@@ -0,0 +1,23 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./mergeAppearance"), exports);
+__exportStar(require("./getThemeClassnames"), exports);
+__exportStar(require("./resolveColorScheme"), exports);
+__exportStar(require("./colorSchemeStorage"), exports);
+__exportStar(require("./colorSchemeFromHeaders"), exports);
+__exportStar(require("./themeBootstrap"), exports);
+__exportStar(require("./customTheme"), exports);

package/dist/cjs/utils/mergeAppearance.d.ts

@@ -0,0 +1,7 @@
+import { ThemeAppearance } from '../types/appearance';
+/**
+ * Сливает оформление родителя с переопределениями: незаданные (`undefined`) оси `overrides` НЕ
+ * затирают унаследованные (`??` сохраняет, в т.ч. `acrylic: false`). Используется `ChildThemeProvider`
+ * для Figma-цепочки модификаторов.
+ */
+export declare function mergeAppearance(parent: ThemeAppearance, overrides: Partial<ThemeAppearance>): ThemeAppearance;

package/dist/cjs/utils/mergeAppearance.js

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.mergeAppearance = mergeAppearance;
+/**
+ * Сливает оформление родителя с переопределениями: незаданные (`undefined`) оси `overrides` НЕ
+ * затирают унаследованные (`??` сохраняет, в т.ч. `acrylic: false`). Используется `ChildThemeProvider`
+ * для Figma-цепочки модификаторов.
+ */
+function mergeAppearance(parent, overrides) {
+    return {
+        colorScheme: overrides.colorScheme ?? parent.colorScheme,
+        brand: overrides.brand ?? parent.brand,
+        brandRole: overrides.brandRole ?? parent.brandRole,
+        density: overrides.density ?? parent.density,
+        acrylic: overrides.acrylic ?? parent.acrylic,
+    };
+}

package/dist/cjs/utils/resolveColorScheme.d.ts

@@ -0,0 +1,7 @@
+import { ColorScheme, ThemeOverride } from '../types/colorScheme';
+/**
+ * Резолв итоговой схемы: явный override (`light`/`dark`) побеждает; `system`/отсутствие — по
+ * системному `prefers-color-scheme` (`systemPrefersDark`). Поэтому «всегда светлая» остаётся
+ * светлой даже на тёмном устройстве.
+ */
+export declare function resolveColorScheme(override: ThemeOverride | undefined, systemPrefersDark: boolean): ColorScheme;

package/dist/cjs/utils/resolveColorScheme.js

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.resolveColorScheme = resolveColorScheme;
+const colorScheme_1 = require("../constants/colorScheme");
+/**
+ * Резолв итоговой схемы: явный override (`light`/`dark`) побеждает; `system`/отсутствие — по
+ * системному `prefers-color-scheme` (`systemPrefersDark`). Поэтому «всегда светлая» остаётся
+ * светлой даже на тёмном устройстве.
+ */
+function resolveColorScheme(override, systemPrefersDark) {
+    if (override === colorScheme_1.THEME_OVERRIDE.Light || override === colorScheme_1.THEME_OVERRIDE.Dark) {
+        return override;
+    }
+    return systemPrefersDark ? colorScheme_1.COLOR_SCHEME.Dark : colorScheme_1.COLOR_SCHEME.Light;
+}

package/dist/cjs/utils/themeBootstrap.d.ts

@@ -0,0 +1,12 @@
+/**
+ * Возвращает строку синхронного inline-скрипта для `<head>` (до `<body>`): читает override из
+ * cookie + `prefers-color-scheme` и ставит `sn-light`/`sn-dark` на корень ДО первой отрисовки —
+ * устраняет «моргание» темы при перезагрузке. Вставляется через `<script dangerouslySetInnerHTML>`
+ * (Next) или статическим `<script>` в `<head>` (single-spa). Читает ту же cookie, что и SSR.
+ *
+ * `target` — CSS-селектор корня; по умолчанию `<html>` (`document.documentElement`).
+ */
+export declare function getThemeBootstrapScript(options?: {
+    storageKey?: string;
+    target?: string;
+}): string;

package/dist/cjs/utils/themeBootstrap.js

@@ -0,0 +1,19 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getThemeBootstrapScript = getThemeBootstrapScript;
+const colorScheme_1 = require("../constants/colorScheme");
+/**
+ * Возвращает строку синхронного inline-скрипта для `<head>` (до `<body>`): читает override из
+ * cookie + `prefers-color-scheme` и ставит `sn-light`/`sn-dark` на корень ДО первой отрисовки —
+ * устраняет «моргание» темы при перезагрузке. Вставляется через `<script dangerouslySetInnerHTML>`
+ * (Next) или статическим `<script>` в `<head>` (single-spa). Читает ту же cookie, что и SSR.
+ *
+ * `target` — CSS-селектор корня; по умолчанию `<html>` (`document.documentElement`).
+ */
+function getThemeBootstrapScript(options) {
+    const storageKey = JSON.stringify(options?.storageKey ?? colorScheme_1.THEME_OVERRIDE_STORAGE_KEY);
+    const target = options?.target
+        ? `document.querySelector(${JSON.stringify(options.target)})`
+        : 'document.documentElement';
+    return `(function(){try{var k=${storageKey},m=document.cookie.match(new RegExp('(?:^|; )'+k+'=([^;]*)')),o=m?decodeURIComponent(m[1]):null,d=(o==='dark')||((o==='system'||!o)&&matchMedia('(prefers-color-scheme: dark)').matches),el=${target};if(el){el.classList.toggle('sn-dark',d);el.classList.toggle('sn-light',!d);}}catch(e){}})();`;
+}

package/dist/esm/components/ChildThemeProvider/ChildThemeProvider.d.ts

@@ -0,0 +1,24 @@
+import { ReactNode, RefObject } from 'react';
+import { ThemeAppearance } from '../../types/appearance.js';
+export type ChildThemeProviderProps = {
+    /** Оси, переопределяемые в поддереве. Остальные наследуются от ближайшего родителя (слияние). */
+    value: Partial<ThemeAppearance>;
+    /**
+     * Внешний элемент для полного слитого набора `sn-*`. Если не задан — провайдер оборачивает
+     * children в `<div>` с этим набором.
+     */
+    rootRef?: RefObject<HTMLElement | null>;
+    /** Дополнительный класс на wrapper-`<div>` (паддинги/фон). Только в wrapper-режиме (без `rootRef`). */
+    className?: string;
+    children: ReactNode;
+};
+/**
+ * Вложенный провайдер оформления (Figma-цепочка модификаторов): читает ближайшее оформление, сливает
+ * свои `value`-переопределения и реэмитит полный слитый набор `sn-*` на границе. Потребители ниже
+ * читают уже слитое значение. Read-only — глобальное значение менять нельзя (это умеет только
+ * `RootThemeProvider`/`getGlobalThemeStore`).
+ */
+export declare function ChildThemeProvider({ value, rootRef, className, children }: ChildThemeProviderProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace ChildThemeProvider {
+    var displayName: string;
+}

package/dist/esm/components/ChildThemeProvider/ChildThemeProvider.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { staticStore } from '@cloud-ru/ds-context-kit';
+import { useMemo } from 'react';
+import { ThemeAppearanceStoreProvider, useThemeAppearance, } from '../../context/appearanceContext.js';
+import { mergeAppearance } from '../../utils/mergeAppearance.js';
+import { ThemeScope } from '../ThemeScope/index.js';
+/**
+ * Вложенный провайдер оформления (Figma-цепочка модификаторов): читает ближайшее оформление, сливает
+ * свои `value`-переопределения и реэмитит полный слитый набор `sn-*` на границе. Потребители ниже
+ * читают уже слитое значение. Read-only — глобальное значение менять нельзя (это умеет только
+ * `RootThemeProvider`/`getGlobalThemeStore`).
+ */
+export function ChildThemeProvider({ value, rootRef, className, children }) {
+    const { appearance: parent } = useThemeAppearance();
+    const { colorScheme, brand, brandRole, density, acrylic } = value;
+    const childStore = useMemo(() => staticStore({
+        appearance: mergeAppearance(parent, { colorScheme, brand, brandRole, density, acrylic }),
+        setAppearance: undefined,
+    }), [parent, colorScheme, brand, brandRole, density, acrylic]);
+    return (_jsx(ThemeAppearanceStoreProvider, { store: childStore, children: _jsx(ThemeScope, { rootRef: rootRef, className: className, children: children }) }));
+}
+ChildThemeProvider.displayName = 'ChildThemeProvider';

package/dist/esm/components/ChildThemeProvider/index.d.ts

@@ -0,0 +1 @@
+export * from './ChildThemeProvider.js';

package/dist/esm/components/ChildThemeProvider/index.js

@@ -0,0 +1 @@
+export * from './ChildThemeProvider.js';

package/dist/esm/components/RootThemeProvider/RootThemeProvider.d.ts

@@ -0,0 +1,49 @@
+import { ReactNode, RefObject } from 'react';
+import { ThemeAppearanceStore } from '../../context/appearanceContext.js';
+import { ThemeAppearance } from '../../types/appearance.js';
+export type RootThemeProviderProps = {
+    /**
+     * Оформление приложения. Используется в static-режиме (один React-корень: SSR — одно значение на
+     * запрос, либо CSR с собственным state, напр. `colorScheme` из `useColorScheme`). Для multi-root
+     * (single-spa) — см. `store`.
+     */
+    value?: ThemeAppearance;
+    /**
+     * Внешний реактивный стор оформления (`getGlobalThemeStore().store`). Если задан — приоритетнее
+     * `value`; подписанные провайдеры обновляются при смене темы без перерендера провайдера. Так один
+     * глобальный стор охватывает все микрофронты. Сеттер для shell — `getGlobalThemeStore().setAppearance`.
+     */
+    store?: ThemeAppearanceStore;
+    /**
+     * Внешний элемент для полного набора `sn-*` (обычно `<html>`/`<body>`). Если не задан — провайдер
+     * оборачивает children в `<div>` с этим набором.
+     */
+    rootRef?: RefObject<HTMLElement | null>;
+    /** Дополнительный класс на wrapper-`<div>` (паддинги/фон). Только в wrapper-режиме (без `rootRef`). */
+    className?: string;
+    /**
+     * Кастомный бренд-цвет потребителя (hex `#rrggbb`) для white-label. Генерирует бренд-палитру из
+     * seed-цвета и инжектит scoped `<style>` на бренд-классы этого поддерева. Правило на бренд-классе
+     * (а не inline на одном элементе) переживает переэмиты `sn-*` вложенными компонентами (Table и т.п.),
+     * поэтому кастомный цвет доходит до всей вложенности. Невалидный hex игнорируется. Глобальная
+     * (app-root) альтернатива для порталов — хук `useApplyCustomTheme`.
+     */
+    brandColor?: string;
+    /** CSP-`nonce` для инжектируемого `<style>` кастомного бренд-цвета. */
+    nonce?: string;
+    children: ReactNode;
+};
+/**
+ * Корневой провайдер оформления. Ставится один раз в корне приложения: задаёт контекст осей
+ * (`colorScheme`/`brand`/`brandRole`/`density`/`acrylic`) и эмитит полный набор `sn-*` на корень
+ * (`rootRef`) либо на собственный wrapper. Объект контекста — глобальный синглтон (`Symbol.for`),
+ * поэтому провайдер работает даже при нескольких версиях пакета в разных микрофронтах, а потребитель
+ * читает ближайший провайдер. Локальные переопределения осей в поддереве — через `ChildThemeProvider`.
+ *
+ * Этот провайдер НЕ управляет состоянием цветовой схемы (override/system/cross-tab) — это `useColorScheme`;
+ * результат передаётся в `value.colorScheme`. Не путать со старым `ThemeProvider` (themeMap/changeTheme).
+ */
+export declare function RootThemeProvider({ value, store, rootRef, className, brandColor, nonce, children, }: RootThemeProviderProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace RootThemeProvider {
+    var displayName: string;
+}

package/dist/esm/components/RootThemeProvider/RootThemeProvider.js

@@ -0,0 +1,27 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { staticStore } from '@cloud-ru/ds-context-kit';
+import { useMemo } from 'react';
+import { ThemeAppearanceStoreProvider, } from '../../context/appearanceContext.js';
+import { ThemeScope } from '../ThemeScope/index.js';
+/**
+ * Корневой провайдер оформления. Ставится один раз в корне приложения: задаёт контекст осей
+ * (`colorScheme`/`brand`/`brandRole`/`density`/`acrylic`) и эмитит полный набор `sn-*` на корень
+ * (`rootRef`) либо на собственный wrapper. Объект контекста — глобальный синглтон (`Symbol.for`),
+ * поэтому провайдер работает даже при нескольких версиях пакета в разных микрофронтах, а потребитель
+ * читает ближайший провайдер. Локальные переопределения осей в поддереве — через `ChildThemeProvider`.
+ *
+ * Этот провайдер НЕ управляет состоянием цветовой схемы (override/system/cross-tab) — это `useColorScheme`;
+ * результат передаётся в `value.colorScheme`. Не путать со старым `ThemeProvider` (themeMap/changeTheme).
+ */
+export function RootThemeProvider({ value, store, rootRef, className, brandColor, nonce, children, }) {
+    const { colorScheme, brand, brandRole, density, acrylic } = value ?? {};
+    // Мемо по значениям осей (не по идентичности объекта `value`): иначе литерал `value={{…}}` у
+    // потребителя пересоздавал бы стор на каждом рендере. Сеттер в static-режиме не нужен — значением
+    // владеет сам потребитель через проп `value`.
+    const staticThemeStore = useMemo(() => staticStore({
+        appearance: { colorScheme, brand, brandRole, density, acrylic },
+        setAppearance: undefined,
+    }), [colorScheme, brand, brandRole, density, acrylic]);
+    return (_jsx(ThemeAppearanceStoreProvider, { store: store ?? staticThemeStore, children: _jsx(ThemeScope, { rootRef: rootRef, className: className, brandColor: brandColor, nonce: nonce, children: children }) }));
+}
+RootThemeProvider.displayName = 'RootThemeProvider';

package/dist/esm/components/RootThemeProvider/index.d.ts

@@ -0,0 +1 @@
+export * from './RootThemeProvider.js';

package/dist/esm/components/RootThemeProvider/index.js

@@ -0,0 +1 @@
+export * from './RootThemeProvider.js';

package/dist/esm/components/ThemeProvider/ThemeProvider.d.ts

@@ -0,0 +1,28 @@
+import { ReactNode } from 'react';
+type UseThemePropsWithDefaultTheme = {
+    /**
+     * Объект с указанием соответсвия темы и css-класса
+     */
+    themeMap: Record<string, string>;
+    /**
+     * Значение темы по умолчанию
+     */
+    defaultTheme: string;
+};
+type UseThemeProps = {
+    /**
+     * Объект с указанием соответсвия темы и css-класса
+     */
+    themeMap: Record<string, string>;
+};
+export type ThemeProviderProps = {
+    /**
+     * Дети, которые будут обёрнуты в провайдер
+     */
+    children: ReactNode;
+} & (UseThemePropsWithDefaultTheme | UseThemeProps);
+/**
+ * Провайдер, предназначенный для работы с темами
+ */
+export declare function ThemeProvider({ children, ...props }: ThemeProviderProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/esm/components/ThemeProvider/ThemeProvider.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useMemo } from 'react';
+import { ThemeValueProvider } from '../../context/themeContext.js';
+import { useThemeConfig } from '../../hooks/useThemeConfig.js';
+/**
+ * Провайдер, предназначенный для работы с темами
+ */
+export function ThemeProvider({ children, ...props }) {
+    const { theme, themeClassName, changeTheme } = useThemeConfig(props);
+    // Мемоизируем объект значения (createSharedContext оборачивает его в staticStore по ссылке).
+    const value = useMemo(() => ({ theme, themeClassName, changeTheme }), [theme, themeClassName, changeTheme]);
+    return _jsx(ThemeValueProvider, { value: value, children: children });
+}

package/dist/esm/components/ThemeProvider/index.d.ts

@@ -0,0 +1 @@
+export * from './ThemeProvider.js';

package/dist/esm/components/ThemeProvider/index.js

@@ -0,0 +1 @@
+export * from './ThemeProvider.js';

package/dist/esm/components/ThemeScope/ThemeScope.d.ts

@@ -0,0 +1,32 @@
+import { ReactNode, RefObject } from 'react';
+export type ThemeScopeProps = {
+    /**
+     * Внешний элемент, на который ставится полный набор `sn-*` (обычно `<html>`/`<body>` для корня).
+     * Если не задан — `ThemeScope` рендерит собственный wrapper `<div>` с этим набором.
+     */
+    rootRef?: RefObject<HTMLElement | null>;
+    /**
+     * Дополнительный класс на wrapper-`<div>` (паддинги/фон вокруг темы). Действует только в wrapper-режиме;
+     * при `rootRef` игнорируется (внешним элементом владеет потребитель).
+     */
+    className?: string;
+    /**
+     * Кастомный бренд-цвет (hex). Инжектит scoped `<style>`, переопределяющий бренд-палитру на бренд-классах
+     * поддерева. В отличие от inline-переменных, правило на бренд-классе переживает переэмиты `sn-*` внутри
+     * (Table/Stepper и т.п.), поэтому кастомный цвет доходит до вложенных компонентов.
+     */
+    brandColor?: string;
+    /** CSP-`nonce` для инжектируемого `<style>`. */
+    nonce?: string;
+    children: ReactNode;
+};
+/**
+ * Внутренний помощник Root/Child-провайдеров: читает ближайшее оформление (= собственный стор
+ * провайдера, под которым отрендерен) и эмитит полный набор `sn-*`. Реактивен — при смене темы
+ * пересобирает и переустанавливает классы.
+ *
+ * - `rootRef` задан → классы добавляются на внешний элемент через эффект (без лишнего DOM-узла);
+ *   при смене набора старые классы снимаются, новые ставятся.
+ * - `rootRef` не задан → классы навешиваются на wrapper `<div>` (+ `className` потребителя).
+ */
+export declare function ThemeScope({ rootRef, className, brandColor, nonce, children }: ThemeScopeProps): import("react/jsx-runtime").JSX.Element;

package/dist/esm/components/ThemeScope/ThemeScope.js

@@ -0,0 +1,59 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import cn from 'classnames';
+import { useId, useMemo } from 'react';
+import { useThemeAppearance } from '../../context/appearanceContext.js';
+import { useIsomorphicLayoutEffect } from '../../hooks/useIsomorphicLayoutEffect.js';
+import { buildBrandPaletteCss } from '../../utils/customTheme/index.js';
+import { getThemeClassnameList } from '../../utils/getThemeClassnames.js';
+// Атрибут-маркер поддерева для scope кастомной палитры. Правило нацеливается на бренд-классы внутри
+// этого маркера (см. `buildBrandPaletteCss`), поэтому переживает переэмиты `sn-*` вложенными обёртками.
+const BRAND_SCOPE_ATTR = 'data-ds-brand-scope';
+/**
+ * Внутренний помощник Root/Child-провайдеров: читает ближайшее оформление (= собственный стор
+ * провайдера, под которым отрендерен) и эмитит полный набор `sn-*`. Реактивен — при смене темы
+ * пересобирает и переустанавливает классы.
+ *
+ * - `rootRef` задан → классы добавляются на внешний элемент через эффект (без лишнего DOM-узла);
+ *   при смене набора старые классы снимаются, новые ставятся.
+ * - `rootRef` не задан → классы навешиваются на wrapper `<div>` (+ `className` потребителя).
+ */
+export function ThemeScope({ rootRef, className, brandColor, nonce, children }) {
+    const { appearance } = useThemeAppearance();
+    // Список токенов — источник истины: `classList.add(...)` принимает их напрямую (без `split`),
+    // а wrapper-режим джойнит через `cn`. Мемо по `appearance` держит ссылку стабильной между
+    // рендерами, поэтому эффект переустанавливает классы только при реальной смене темы.
+    const themeClasses = useMemo(() => getThemeClassnameList(appearance), [appearance]);
+    const scopeId = useId();
+    const brandCss = useMemo(() => (brandColor ? buildBrandPaletteCss(brandColor, `[${BRAND_SCOPE_ATTR}="${scopeId}"]`) : null), [brandColor, scopeId]);
+    // Layout-эффект (не `useEffect`): классы/scope-маркер ставим на внешний элемент синхронно до пейнта,
+    // иначе первый кадр рендерится без набора `sn-*` (и без scoped бренд-правила) — видно моргание темы.
+    useIsomorphicLayoutEffect(() => {
+        const element = rootRef?.current;
+        if (!element) {
+            return undefined;
+        }
+        element.classList.add(...themeClasses);
+        return () => {
+            element.classList.remove(...themeClasses);
+        };
+    }, [rootRef, themeClasses]);
+    // В rootRef-режиме scope-маркер ставим на внешний элемент, чтобы scoped-правило достало его поддерево
+    // (в wrapper-режиме маркер — атрибут `div`а ниже).
+    useIsomorphicLayoutEffect(() => {
+        const element = rootRef?.current;
+        if (!element || !brandCss) {
+            return undefined;
+        }
+        element.setAttribute(BRAND_SCOPE_ATTR, scopeId);
+        return () => {
+            element.removeAttribute(BRAND_SCOPE_ATTR);
+        };
+    }, [rootRef, brandCss, scopeId]);
+    // `<style>` рендерится в дерево (React управляет монтированием/размонтированием, без ручной инъекции).
+    // В body он не имеет визуального бокса — только применяет правило по scoped-селектору.
+    const styleTag = brandCss ? _jsx("style", { nonce: nonce, children: brandCss }) : null;
+    if (rootRef) {
+        return (_jsxs(_Fragment, { children: [styleTag, children] }));
+    }
+    return (_jsxs("div", { className: cn(themeClasses, className), "data-ds-brand-scope": brandCss ? scopeId : undefined, children: [styleTag, children] }));
+}

package/dist/esm/components/ThemeScope/index.d.ts

@@ -0,0 +1 @@
+export * from './ThemeScope.js';

package/dist/esm/components/ThemeScope/index.js

@@ -0,0 +1 @@
+export * from './ThemeScope.js';