@cloud-ru/ds-theme 1.0.0

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

@@ -0,0 +1,3 @@
+export * from './RootThemeProvider/index.js';
+export * from './ChildThemeProvider/index.js';
+export * from './ThemeProvider/index.js';

package/dist/esm/components/index.js

@@ -0,0 +1,3 @@
+export * from './RootThemeProvider/index.js';
+export * from './ChildThemeProvider/index.js';
+export * from './ThemeProvider/index.js';

package/dist/esm/constants/appearance.d.ts

@@ -0,0 +1,22 @@
+/** Плотность раскладки. Класс `sn-comfort` / `sn-compact` / `sn-spacious`. */
+export declare const DENSITY: {
+    readonly Comfort: "comfort";
+    readonly Compact: "compact";
+    readonly Spacious: "spacious";
+};
+/** Бренд. Класс `sn-brandA` / `sn-brandB` / `sn-brandC` / `sn-brandD` / `sn-brandE`. */
+export declare const BRAND: {
+    readonly A: "brandA";
+    readonly B: "brandB";
+    readonly C: "brandC";
+    readonly D: "brandD";
+    readonly E: "brandE";
+};
+/** Роль бренда (палитра). Класс `sn-main` / `sn-alter` … */
+export declare const BRAND_ROLE: {
+    readonly Main: "main";
+    readonly Alter: "alter";
+    readonly Alter2: "alter2";
+    readonly Alter3: "alter3";
+    readonly Alter4: "alter4";
+};

package/dist/esm/constants/appearance.js

@@ -0,0 +1,24 @@
+// Оси оформления дизайн-системы, спроецированные на классы `sn-*` из `@cloud-ru/figma-variables`.
+// Чистый модуль (без React/DOM) — реэкспортируется из `@cloud-ru/ds-theme/ssr` (RSC-safe).
+/** Плотность раскладки. Класс `sn-comfort` / `sn-compact` / `sn-spacious`. */
+export const DENSITY = {
+    Comfort: 'comfort',
+    Compact: 'compact',
+    Spacious: 'spacious',
+};
+/** Бренд. Класс `sn-brandA` / `sn-brandB` / `sn-brandC` / `sn-brandD` / `sn-brandE`. */
+export const BRAND = {
+    A: 'brandA',
+    B: 'brandB',
+    C: 'brandC',
+    D: 'brandD',
+    E: 'brandE',
+};
+/** Роль бренда (палитра). Класс `sn-main` / `sn-alter` … */
+export const BRAND_ROLE = {
+    Main: 'main',
+    Alter: 'alter',
+    Alter2: 'alter2',
+    Alter3: 'alter3',
+    Alter4: 'alter4',
+};

package/dist/esm/constants/colorScheme.d.ts

@@ -0,0 +1,17 @@
+/** Разрешённая цветовая схема (то, что реально применяется на корень). */
+export declare const COLOR_SCHEME: {
+    readonly Light: "light";
+    readonly Dark: "dark";
+};
+/** Пользовательский выбор: фиксированная схема или `system` (следовать `prefers-color-scheme`). */
+export declare const THEME_OVERRIDE: {
+    readonly Light: "light";
+    readonly Dark: "dark";
+    readonly System: "system";
+};
+/**
+ * Дефолтное имя ключа персиста override для опциональных адаптеров (cookie/localStorage) и
+ * SSR/bootstrap-хелперов. Namespace'нут под DS, чтобы не пересекаться с ключами хост-приложения.
+ * Конкретный адаптер может переопределить его через `storageKey`.
+ */
+export declare const THEME_OVERRIDE_STORAGE_KEY = "snack-uikit-theme";

package/dist/esm/constants/colorScheme.js

@@ -0,0 +1,20 @@
+// Цветовая схема = класс `sn-light`/`sn-dark` на корне. Чистый модуль (RSC-safe), реэкспорт из `@cloud-ru/ds-theme/ssr`.
+// Персиста по умолчанию нет: `useColorScheme` держит выбор in-memory, а cookie/localStorage подключает
+// потребитель явным адаптером. Этот ключ — дефолтное имя для опциональных адаптеров и SSR/bootstrap-хелперов.
+/** Разрешённая цветовая схема (то, что реально применяется на корень). */
+export const COLOR_SCHEME = {
+    Light: 'light',
+    Dark: 'dark',
+};
+/** Пользовательский выбор: фиксированная схема или `system` (следовать `prefers-color-scheme`). */
+export const THEME_OVERRIDE = {
+    Light: 'light',
+    Dark: 'dark',
+    System: 'system',
+};
+/**
+ * Дефолтное имя ключа персиста override для опциональных адаптеров (cookie/localStorage) и
+ * SSR/bootstrap-хелперов. Namespace'нут под DS, чтобы не пересекаться с ключами хост-приложения.
+ * Конкретный адаптер может переопределить его через `storageKey`.
+ */
+export const THEME_OVERRIDE_STORAGE_KEY = 'snack-uikit-theme';

package/dist/esm/constants/index.d.ts

@@ -0,0 +1,2 @@
+export * from './appearance.js';
+export * from './colorScheme.js';

package/dist/esm/constants/index.js

@@ -0,0 +1,2 @@
+export * from './appearance.js';
+export * from './colorScheme.js';

package/dist/esm/context/appearanceContext.d.ts

@@ -0,0 +1,20 @@
+import { ExternalStore } from '@cloud-ru/ds-context-kit';
+import { ThemeAppearance } from '../types/appearance.js';
+/**
+ * Значение контекста оформления: слитые оси (`appearance`) + опциональный сеттер. Сеттер задаёт
+ * только корневой провайдер (`RootThemeProvider`) — у `ChildThemeProvider` он `undefined` (детям
+ * менять глобальное значение нельзя, они только локально переопределяют оси).
+ */
+export type ThemeAppearanceContextValue = {
+    appearance: ThemeAppearance;
+    setAppearance?: (patch: Partial<ThemeAppearance>) => void;
+};
+/** Внешний стор оформления (формат `useSyncExternalStore`). Mutable-global — см. `getGlobalThemeStore`. */
+export type ThemeAppearanceStore = ExternalStore<ThemeAppearanceContextValue>;
+declare const StoreProvider: ({ store, children }: {
+    store: ExternalStore<ThemeAppearanceContextValue>;
+    children: import("react").ReactNode;
+}) => import("react/jsx-runtime").JSX.Element;
+export { StoreProvider as ThemeAppearanceStoreProvider };
+/** Возвращает ближайшее (уже слитое по цепочке провайдеров) значение оформления. Реактивно к стору. */
+export declare function useThemeAppearance(): ThemeAppearanceContextValue;

package/dist/esm/context/appearanceContext.js

@@ -0,0 +1,18 @@
+import { createSharedStoreContext } from '@cloud-ru/ds-context-kit';
+import { THEME_KEYS } from '../keys.js';
+import { getGlobalThemeStore } from '../store/globalStore.js';
+// Отдельный домен `theme-appearance` — НЕ пересекается с `providerKey('theme', 1)` старого
+// `ThemeContext` (themeMap/changeTheme). Объект контекста — `Symbol.for`-синглтон, общий для всех
+// версий пакета, поэтому потребитель в микрофронте читает ближайший провайдер независимо от версии.
+//
+// Дефолт контекста = глобальный singleton-стор оформления. Поэтому компонент, вызывающий
+// `useThemeClassnames` (мобильная обёртка, `ChildThemeProvider`, портал вне `<body>`) БЕЗ
+// `RootThemeProvider` в своём корне, реэмитит полный набор `sn-*` не с пустым оформлением
+// (теряя `colorScheme`/`density`), а с тем, что shell выставил в `getGlobalThemeStore` из источника
+// истины. Так микрофронту не нужен провайдер. Явный `RootThemeProvider` затеняет дефолт (back-compat).
+const { StoreProvider, useStoreValue } = createSharedStoreContext(THEME_KEYS.context, getGlobalThemeStore().store);
+export { StoreProvider as ThemeAppearanceStoreProvider };
+/** Возвращает ближайшее (уже слитое по цепочке провайдеров) значение оформления. Реактивно к стору. */
+export function useThemeAppearance() {
+    return useStoreValue();
+}

package/dist/esm/context/index.d.ts

@@ -0,0 +1,4 @@
+export { useThemeAppearance } from './appearanceContext.js';
+export type { ThemeAppearanceContextValue, ThemeAppearanceStore } from './appearanceContext.js';
+export { useThemeContext } from './themeContext.js';
+export type { ThemeContextType } from './themeContext.js';

package/dist/esm/context/index.js

@@ -0,0 +1,2 @@
+export { useThemeAppearance } from './appearanceContext.js';
+export { useThemeContext } from './themeContext.js';

package/dist/esm/context/themeContext.d.ts

@@ -0,0 +1,12 @@
+export type ThemeContextType = {
+    theme: string | undefined;
+    themeClassName: string | undefined;
+    changeTheme: ((theme: string) => void) | undefined;
+};
+export declare const ThemeValueProvider: {
+    ({ value, children }: {
+        value: ThemeContextType;
+        children: import("react").ReactNode;
+    }): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+}, useThemeContext: () => ThemeContextType;

package/dist/esm/context/themeContext.js

@@ -0,0 +1,11 @@
+import { createSharedContext, providerKey } from '@cloud-ru/ds-context-kit';
+// Общий контекст темы через @cloud-ru/ds-context-kit (Symbol.for-синглтон, SSR-safe). `ThemeValueProvider`
+// внутренний — публично доступны `ThemeProvider` (обёртка) и `useThemeContext`.
+export const { Provider: ThemeValueProvider, useValue: useThemeContext } = createSharedContext({
+    key: providerKey('theme', 1),
+    defaultValue: {
+        theme: undefined,
+        themeClassName: undefined,
+        changeTheme: undefined,
+    },
+});

package/dist/esm/hooks/index.d.ts

@@ -0,0 +1,4 @@
+export * from './useApplyCustomTheme.js';
+export * from './useColorScheme.js';
+export * from './useThemeClassnames.js';
+export * from './useThemeConfig.js';

package/dist/esm/hooks/index.js

@@ -0,0 +1,4 @@
+export * from './useApplyCustomTheme.js';
+export * from './useColorScheme.js';
+export * from './useThemeClassnames.js';
+export * from './useThemeConfig.js';

package/dist/esm/hooks/useApplyCustomTheme.d.ts

@@ -0,0 +1,27 @@
+export type UseApplyCustomThemeProps = {
+    /** Бренд-цвет потребителя (hex `#rrggbb`). Из него генерируется бренд-палитра. */
+    color: string;
+    /** Применять ли кастомную палитру. При `false` `<style>` не инжектится (а ранее добавленный снимается). */
+    enabled?: boolean;
+    /**
+     * CSS-скоуп — селектор корня поддерева (напр. `#app`, `[data-x]`). Без него правило глобальное:
+     * переопределяет бренд-классы на всей странице (white-label в корне приложения — покрывает и порталы,
+     * и переэмиченные внутренние обёртки). Со скоупом область ограничена его поддеревом.
+     */
+    scope?: string;
+    /** CSP-`nonce` для инжектируемого `<style>`. */
+    nonce?: string;
+};
+/**
+ * Применяет кастомный бренд-цвет: генерирует из `color` бренд-палитру и инжектит `<style>`,
+ * переопределяющий её на бренд-классах (`.sn-brandA/B/C/D/E`), а не inline на одном элементе — поэтому
+ * цвет переживает переэмиты `sn-*` вложенными компонентами и доходит до порталов. Семантический слой
+ * каскадит из палитры, красятся обе схемы.
+ *
+ * Императивная (обычно app-root) альтернатива декларативному пропу `brandColor` у `RootThemeProvider`.
+ *
+ * ```tsx
+ * useApplyCustomTheme({ color: brand.primaryColor, enabled: Boolean(brand), nonce });
+ * ```
+ */
+export declare function useApplyCustomTheme({ color, enabled, scope, nonce }: UseApplyCustomThemeProps): void;

package/dist/esm/hooks/useApplyCustomTheme.js

@@ -0,0 +1,36 @@
+import { useMemo } from 'react';
+import { buildBrandPaletteCss } from '../utils/customTheme/index.js';
+import { useIsomorphicLayoutEffect } from './useIsomorphicLayoutEffect.js';
+/**
+ * Применяет кастомный бренд-цвет: генерирует из `color` бренд-палитру и инжектит `<style>`,
+ * переопределяющий её на бренд-классах (`.sn-brandA/B/C/D/E`), а не inline на одном элементе — поэтому
+ * цвет переживает переэмиты `sn-*` вложенными компонентами и доходит до порталов. Семантический слой
+ * каскадит из палитры, красятся обе схемы.
+ *
+ * Императивная (обычно app-root) альтернатива декларативному пропу `brandColor` у `RootThemeProvider`.
+ *
+ * ```tsx
+ * useApplyCustomTheme({ color: brand.primaryColor, enabled: Boolean(brand), nonce });
+ * ```
+ */
+export function useApplyCustomTheme({ color, enabled = true, scope, nonce }) {
+    const css = useMemo(() => buildBrandPaletteCss(color, scope), [color, scope]);
+    // Layout-эффект (не `useEffect`): `<style>` добавляем в `head` синхронно до пейнта, иначе первый кадр
+    // успевает отрисоваться с дефолтным акцентом и виден проблеск старого цвета при смене бренд-цвета.
+    /* eslint-disable @cloud-ru/ssr-safe-react/domApi -- DOM трогаем только в layout-эффекте под guard `typeof document` */
+    useIsomorphicLayoutEffect(() => {
+        if (!enabled || !css || typeof document === 'undefined') {
+            return undefined;
+        }
+        const styleElement = document.createElement('style');
+        if (nonce) {
+            styleElement.setAttribute('nonce', nonce);
+        }
+        styleElement.textContent = css;
+        document.head.appendChild(styleElement);
+        return () => {
+            styleElement.remove();
+        };
+    }, [css, enabled, nonce]);
+    /* eslint-enable @cloud-ru/ssr-safe-react/domApi */
+}

package/dist/esm/hooks/useColorScheme.d.ts

@@ -0,0 +1,37 @@
+import { ColorScheme, ThemeOverride } from '../types/colorScheme.js';
+import { ColorSchemeStorage } from '../utils/colorSchemeStorage.js';
+export type UseColorSchemeOptions = {
+    /**
+     * Server-resolved начальный override (например, `getThemeOverrideFromHeaders(headers)` из cookie
+     * или из бэкенд-сессии). Делает первый рендер детерминированным и совпадающим с SSR — без
+     * hydration mismatch и без прыжка подсветки переключателя. Если не задан — старт с `system`.
+     */
+    initialOverride?: ThemeOverride;
+    /**
+     * Адаптер персиста. По умолчанию — in-memory (без персиста между перезагрузками): DS не пишет в
+     * cookie/localStorage сам. Подключите явно: `createCookieColorSchemeStorage()` (no-flash SSR) или
+     * собственный адаптер (localStorage / бэкенд-сессия).
+     */
+    storage?: ColorSchemeStorage;
+    /** Корень, на который вешается `sn-light`/`sn-dark`. По умолчанию `<html>`. */
+    target?: HTMLElement;
+};
+export type UseColorSchemeResult = {
+    /** Итоговая применённая схема (override ?? система). */
+    colorScheme: ColorScheme;
+    /** Текущий выбор пользователя: `light` / `dark` / `system`. */
+    override: ThemeOverride;
+    /** Системная тема (`prefers-color-scheme: dark`). */
+    systemPrefersDark: boolean;
+    /** Сменить выбор: персистит через `storage.write` (cookie / бэкенд). */
+    setOverride(next: ThemeOverride): void;
+};
+/**
+ * Управляет цветовой схемой DS: резолвит `override ?? prefers-color-scheme`, вешает `sn-light`/`sn-dark`
+ * на корень, реагирует на живое переключение темы ОС (`matchMedia`) и внешние изменения override
+ * (`storage.subscribe` — кросс-таб / бэкенд push). No-flash на reload обеспечивает inline
+ * `getThemeBootstrapScript` в `<head>` (а на SSR — корректный класс из `getColorSchemeFromHeaders`);
+ * хук синхронизирует состояние и переключатель override.
+ * @function React hook
+ */
+export declare function useColorScheme(options?: UseColorSchemeOptions): UseColorSchemeResult;

package/dist/esm/hooks/useColorScheme.js

@@ -0,0 +1,76 @@
+'use client';
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import { COLOR_SCHEME, THEME_OVERRIDE } from '../constants/colorScheme.js';
+import { createInMemoryColorSchemeStorage } from '../utils/colorSchemeStorage.js';
+import { resolveColorScheme } from '../utils/resolveColorScheme.js';
+/* eslint-disable @cloud-ru/ssr-safe-react/domApi -- guarded by isBrowser(); хук помечен 'use client' */
+function isBrowser() {
+    return Boolean(typeof window !== 'undefined' && window.document && window.document.createElement);
+}
+const SYSTEM_DARK_QUERY = '(prefers-color-scheme: dark)';
+function getSystemPrefersDark() {
+    return isBrowser() && window.matchMedia(SYSTEM_DARK_QUERY).matches;
+}
+function applyColorScheme(target, colorScheme) {
+    target.classList.toggle('sn-dark', colorScheme === COLOR_SCHEME.Dark);
+    target.classList.toggle('sn-light', colorScheme === COLOR_SCHEME.Light);
+}
+// Общий синглтон in-memory-адаптера: несколько `useColorScheme` без своего `storage` смотрят в один
+// источник, поэтому переключатели в разных поддеревьях синхронны в пределах сессии.
+const defaultColorSchemeStorage = createInMemoryColorSchemeStorage();
+/**
+ * Управляет цветовой схемой DS: резолвит `override ?? prefers-color-scheme`, вешает `sn-light`/`sn-dark`
+ * на корень, реагирует на живое переключение темы ОС (`matchMedia`) и внешние изменения override
+ * (`storage.subscribe` — кросс-таб / бэкенд push). No-flash на reload обеспечивает inline
+ * `getThemeBootstrapScript` в `<head>` (а на SSR — корректный класс из `getColorSchemeFromHeaders`);
+ * хук синхронизирует состояние и переключатель override.
+ * @function React hook
+ */
+export function useColorScheme(options) {
+    const { initialOverride, target } = options ?? {};
+    const providedStorage = options?.storage;
+    // Дефолт — общий in-memory-адаптер: DS не пишет в cookie/localStorage без явного `storage`.
+    const storage = useMemo(() => providedStorage ?? defaultColorSchemeStorage, [providedStorage]);
+    // override инициализируется СИНХРОННО из источника правды, чтобы SegmentControl не «прыгал» с
+    // System на реальный выбор после mount: `initialOverride` (server-resolved — бэкенд-сессия / SSR
+    // cookie, authoritative) → синхронное чтение store (`storage.read`) → `system`.
+    // SSR-консистентность: на сервере `storage.read()` обязан вернуть undefined (in-memory- и cookie-
+    // адаптеры так и делают), поэтому и сервер, и первый клиентский рендер берут одно значение — мисматча
+    // нет. В чистом клиенте с персист-адаптером (cookie/localStorage) `read()` отдаёт сохранённый выбор
+    // сразу при первом рендере, без прыжка; дефолтный in-memory стартует с `system`.
+    const [override, setOverrideState] = useState(() => initialOverride ?? storage.read() ?? THEME_OVERRIDE.System);
+    const [systemPrefersDark, setSystemPrefersDark] = useState(false);
+    const [mounted, setMounted] = useState(false);
+    // matchMedia нельзя читать в initializer (на SSR-хосте рассинхронит colorScheme-readout) — системную
+    // тему добираем после mount. override уже корректен из initializer, его здесь перечитывать не нужно.
+    useEffect(() => {
+        setSystemPrefersDark(getSystemPrefersDark());
+        setMounted(true);
+    }, []);
+    const colorScheme = resolveColorScheme(override, systemPrefersDark);
+    // Применяем класс к корню ТОЛЬКО после mount: до этого корректный класс уже стоит из SSR/bootstrap,
+    // и детерминированный первый рендер не должен его перетереть (иначе моргание).
+    useEffect(() => {
+        if (!mounted || !isBrowser()) {
+            return;
+        }
+        applyColorScheme(target ?? document.documentElement, colorScheme);
+    }, [mounted, colorScheme, target]);
+    // Живое переключение темы ОС.
+    useEffect(() => {
+        if (!isBrowser()) {
+            return undefined;
+        }
+        const mql = window.matchMedia(SYSTEM_DARK_QUERY);
+        const onChange = (event) => setSystemPrefersDark(event.matches);
+        mql.addEventListener('change', onChange);
+        return () => mql.removeEventListener('change', onChange);
+    }, []);
+    // Внешняя синхронизация override (кросс-таб через BroadcastChannel / бэкенд push).
+    useEffect(() => storage.subscribe(() => setOverrideState(storage.read() ?? THEME_OVERRIDE.System)), [storage]);
+    const setOverride = useCallback((next) => {
+        setOverrideState(next);
+        storage.write(next);
+    }, [storage]);
+    return { colorScheme, override, systemPrefersDark, setOverride };
+}

package/dist/esm/hooks/useIsomorphicLayoutEffect.d.ts

@@ -0,0 +1,7 @@
+import { useLayoutEffect } from 'react';
+/**
+ * `useLayoutEffect`, безопасный для SSR: на клиенте — настоящий `useLayoutEffect` (применяет эффект
+ * синхронно до пейнта, поэтому инъекция бренд-`<style>` не даёт кадра с дефолтным акцентом — «моргания»),
+ * на сервере — `useEffect` (сырой `useLayoutEffect` на сервере варнит и всё равно не выполняется).
+ */
+export declare const useIsomorphicLayoutEffect: typeof useLayoutEffect;

package/dist/esm/hooks/useIsomorphicLayoutEffect.js

@@ -0,0 +1,13 @@
+// eslint-disable-next-line no-restricted-imports -- единственная точка, где берём сырой useLayoutEffect
+import { useEffect, useLayoutEffect } from 'react';
+/* eslint-disable @cloud-ru/ssr-safe-react/domApi -- это и есть SSR-guard, DOM читается только для детекта браузера */
+function isBrowser() {
+    return Boolean(typeof window !== 'undefined' && window.document && window.document.createElement);
+}
+/* eslint-enable @cloud-ru/ssr-safe-react/domApi */
+/**
+ * `useLayoutEffect`, безопасный для SSR: на клиенте — настоящий `useLayoutEffect` (применяет эффект
+ * синхронно до пейнта, поэтому инъекция бренд-`<style>` не даёт кадра с дефолтным акцентом — «моргания»),
+ * на сервере — `useEffect` (сырой `useLayoutEffect` на сервере варнит и всё равно не выполняется).
+ */
+export const useIsomorphicLayoutEffect = isBrowser() ? useLayoutEffect : useEffect;

package/dist/esm/hooks/useThemeClassnames.d.ts

@@ -0,0 +1,11 @@
+import { ThemeAppearance } from '../types/appearance.js';
+/**
+ * Возвращает полный набор `sn-*` классов = ближайшее оформление из контекста (`RootThemeProvider` +
+ * цепочка `ChildThemeProvider`) ⊕ переданные `overrides`. Навешивается на DOM-границу компонента,
+ * который хочет переопределить ось (например, мобильная обёртка с `density: 'comfort'`).
+ *
+ * Поскольку набор включает текущий `colorScheme`/`brand`/`brandRole` из контекста, такая обёртка —
+ * самосогласованный scope и трекает переключение темы. Без провайдера в дереве оформление пустое,
+ * и поведение совпадает со старым `getThemeClassnames({ density })`.
+ */
+export declare function useThemeClassnames(overrides?: Partial<ThemeAppearance>): string;

package/dist/esm/hooks/useThemeClassnames.js

@@ -0,0 +1,15 @@
+import { useThemeAppearance } from '../context/appearanceContext.js';
+import { getThemeClassnames } from '../utils/getThemeClassnames.js';
+/**
+ * Возвращает полный набор `sn-*` классов = ближайшее оформление из контекста (`RootThemeProvider` +
+ * цепочка `ChildThemeProvider`) ⊕ переданные `overrides`. Навешивается на DOM-границу компонента,
+ * который хочет переопределить ось (например, мобильная обёртка с `density: 'comfort'`).
+ *
+ * Поскольку набор включает текущий `colorScheme`/`brand`/`brandRole` из контекста, такая обёртка —
+ * самосогласованный scope и трекает переключение темы. Без провайдера в дереве оформление пустое,
+ * и поведение совпадает со старым `getThemeClassnames({ density })`.
+ */
+export function useThemeClassnames(overrides) {
+    const { appearance } = useThemeAppearance();
+    return getThemeClassnames({ ...appearance, ...overrides });
+}

package/dist/esm/hooks/useThemeConfig.d.ts

@@ -0,0 +1,24 @@
+type UseThemePropsWithDefaultTheme<T extends string> = {
+    themeMap: Record<T, string>;
+    defaultTheme: T;
+};
+type UseThemeProps<T extends string> = {
+    /**
+     * Объект с указанием соответсвия темы и css-класса
+     */
+    themeMap: Record<T, string>;
+};
+/**
+ * Хук для работы с темами
+ */
+export declare function useThemeConfig<T extends string>(props: UseThemeProps<T>): {
+    theme: T | undefined;
+    themeClassName: string | undefined;
+    changeTheme(theme: T): void;
+};
+export declare function useThemeConfig<T extends string>(props: UseThemePropsWithDefaultTheme<T>): {
+    theme: T;
+    themeClassName: string;
+    changeTheme(theme: T): void;
+};
+export {};

package/dist/esm/hooks/useThemeConfig.js

@@ -0,0 +1,12 @@
+import { useState } from 'react';
+function hasDefaultTheme(props) {
+    return Boolean(props.defaultTheme);
+}
+export function useThemeConfig(props) {
+    const [theme, setTheme] = useState(hasDefaultTheme(props) ? props.defaultTheme : undefined);
+    return {
+        theme,
+        themeClassName: theme ? props.themeMap[theme] : undefined,
+        changeTheme: setTheme,
+    };
+}

package/dist/esm/index.d.ts

@@ -0,0 +1,7 @@
+export * from './components/index.js';
+export * from './hooks/index.js';
+export * from './context/index.js';
+export * from './constants/index.js';
+export * from './types/index.js';
+export * from './utils/index.js';
+export * from './store/index.js';

package/dist/esm/index.js

@@ -0,0 +1,7 @@
+export * from './components/index.js';
+export * from './hooks/index.js';
+export * from './context/index.js';
+export * from './constants/index.js';
+export * from './types/index.js';
+export * from './utils/index.js';
+export * from './store/index.js';

package/dist/esm/keys.d.ts

@@ -0,0 +1,4 @@
+export declare const THEME_KEYS: {
+    readonly context: string;
+    readonly store: "@cloud-ru/ds:global-theme-store:v1";
+};

package/dist/esm/keys.js

@@ -0,0 +1,16 @@
+import { providerKey } from '@cloud-ru/ds-context-kit';
+/**
+ * `Symbol.for`-ключи домена theme-appearance — обе системы синглтонов в одном месте:
+ * - `context` — объект React-контекста оформления (через `providerKey` → dev-warn о смешанных версиях);
+ * - `store` — глобальный мутабельный стор оформления (кросс-root мост хост→MFE).
+ *
+ * Одна контракт-версия на домен бампается ТОЛЬКО при несовместимом сломе формы значения и двигает
+ * ОБА ключа вместе. Ортогонально мажору ПАКЕТА. Строки менять НЕЛЬЗЯ (форк синглтона = случайный
+ * `:v2`). НЕ путать с доменом `theme` старого `ThemeContext` (themeMap/changeTheme). См.
+ * providers-standard.md.
+ */
+const CONTRACT_VERSION = 1;
+export const THEME_KEYS = {
+    context: providerKey('theme-appearance', CONTRACT_VERSION),
+    store: `@cloud-ru/ds:global-theme-store:v${CONTRACT_VERSION}`,
+};

package/dist/esm/ssr.d.ts

@@ -0,0 +1,15 @@
+export { BRAND, BRAND_ROLE, DENSITY } from './constants/appearance.js';
+export { COLOR_SCHEME, THEME_OVERRIDE, THEME_OVERRIDE_STORAGE_KEY } from './constants/colorScheme.js';
+export type { Brand, BrandRole, Density, ThemeAppearance } from './types/appearance.js';
+export type { ColorScheme, ThemeOverride } from './types/colorScheme.js';
+export { mergeAppearance } from './utils/mergeAppearance.js';
+export { getThemeClassnameList, getThemeClassnames } from './utils/getThemeClassnames.js';
+export { resolveColorScheme } from './utils/resolveColorScheme.js';
+export { getColorSchemeFromHeaders, getThemeOverrideFromHeaders } from './utils/colorSchemeFromHeaders.js';
+export { getThemeBootstrapScript } from './utils/themeBootstrap.js';
+export { generateBrandPalette } from './utils/customTheme/generateBrandPalette.js';
+export type { BrandPalette } from './utils/customTheme/generateBrandPalette.js';
+export { buildBrandPaletteVars } from './utils/customTheme/buildBrandPaletteVars.js';
+export { buildBrandPaletteCss } from './utils/customTheme/buildBrandPaletteCss.js';
+export { BASE_BRAND_PALETTE, BRAND_PRIMARY_TONES, BRAND_PRIMARY_VAR_PREFIX, PRIMARY_ACCENT_TONE, } from './utils/customTheme/constants.js';
+export type { BrandPrimaryTone } from './utils/customTheme/constants.js';

package/dist/esm/ssr.js

@@ -0,0 +1,15 @@
+// SSR-безопасный субпуть `@cloud-ru/ds-theme/ssr`: только чистые символы (без React-контекста/хуков),
+// чтобы импорт в React Server Components не тянул `createContext`. Зеркало `@cloud-ru/ds-adaptive/ssr`.
+export { BRAND, BRAND_ROLE, DENSITY } from './constants/appearance.js';
+export { COLOR_SCHEME, THEME_OVERRIDE, THEME_OVERRIDE_STORAGE_KEY } from './constants/colorScheme.js';
+export { mergeAppearance } from './utils/mergeAppearance.js';
+export { getThemeClassnameList, getThemeClassnames } from './utils/getThemeClassnames.js';
+export { resolveColorScheme } from './utils/resolveColorScheme.js';
+export { getColorSchemeFromHeaders, getThemeOverrideFromHeaders } from './utils/colorSchemeFromHeaders.js';
+export { getThemeBootstrapScript } from './utils/themeBootstrap.js';
+// Кастомный бренд-цвет — чистые (без React/DOM) генератор палитры и сборщик CSS-переменных, чтобы
+// SSR/RSC мог инжектить `--sn-brand-color-primary-*` строкой и убрать мигание до гидрации.
+export { generateBrandPalette } from './utils/customTheme/generateBrandPalette.js';
+export { buildBrandPaletteVars } from './utils/customTheme/buildBrandPaletteVars.js';
+export { buildBrandPaletteCss } from './utils/customTheme/buildBrandPaletteCss.js';
+export { BASE_BRAND_PALETTE, BRAND_PRIMARY_TONES, BRAND_PRIMARY_VAR_PREFIX, PRIMARY_ACCENT_TONE, } from './utils/customTheme/constants.js';

package/dist/esm/store/globalStore.d.ts

@@ -0,0 +1,29 @@
+import { ThemeAppearanceStore } from '../context/appearanceContext.js';
+import { ThemeAppearance } from '../types/appearance.js';
+export type GlobalThemeStore = {
+    /** Стор для `<RootThemeProvider store={...} />`. */
+    store: ThemeAppearanceStore;
+    /** Текущее оформление. */
+    getAppearance(): ThemeAppearance;
+    /** Слить патч в оформление и уведомить все подписанные провайдеры. */
+    setAppearance(patch: Partial<ThemeAppearance>): void;
+};
+/**
+ * Глобальный singleton-стор оформления, общий для всех React-корней процесса: микрофронтов
+ * single-spa, островков Astro и любых сценариев, где один `RootThemeProvider` нельзя поставить
+ * общим предком в одном дереве. Хранится в `globalThis` через `Symbol.for`, поэтому любой модуль
+ * получает один экземпляр без проброса по импортам и переживает несколько копий пакета.
+ *
+ * Shell контейнера меняет оформление через `setAppearance({ colorScheme, density, ... })` — все
+ * подписанные `RootThemeProvider` реэмитят полный набор `sn-*` классов. Когда у приложения один
+ * React-корень — используйте `<RootThemeProvider value={…} />`, этот хелпер нужен только для multi-root.
+ *
+ * ```tsx
+ * // там, где меняется тема (один раз):
+ * getGlobalThemeStore().setAppearance({ colorScheme });
+ *
+ * // в каждом независимом корне:
+ * <RootThemeProvider store={getGlobalThemeStore().store} rootRef={htmlRef}>{root}</RootThemeProvider>;
+ * ```
+ */
+export declare function getGlobalThemeStore(): GlobalThemeStore;