@cloud-ru/ds-theme 1.0.0

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

@@ -0,0 +1,35 @@
+import { ThemeOverride } from '../types/colorScheme';
+/**
+ * Точка расширения персиста цветовой схемы. DS не «зашивает» хранилище: дефолт — in-memory
+ * (`createInMemoryColorSchemeStorage`, без персиста между перезагрузками). Персист подключает
+ * потребитель явным адаптером: `createCookieColorSchemeStorage` (no-flash SSR) или собственный
+ * (localStorage / бэкенд-сессия — `read()` возвращает `undefined`, начальное даёт `initialOverride`
+ * из server-сессии, `write()` шлёт POST, `subscribe()` — push через SSE/ws). Контракт намеренно про
+ * одну ось `override`; brand/density персистит сам апп. Модель `useColorScheme` при любом адаптере
+ * не меняется.
+ */
+export type ColorSchemeStorage = {
+    /** Синхронно прочитать сохранённый override. Для бэкенд-адаптера — `undefined` (см. `initialOverride`). */
+    read(): ThemeOverride | undefined;
+    /** Персистнуть выбор (cookie / POST на бэкенд). */
+    write(next: ThemeOverride): void;
+    /** Подписка на внешние изменения (кросс-таб / push). Возвращает отписку. */
+    subscribe(onChange: () => void): () => void;
+};
+/**
+ * Дефолтный storage-адаптер: держит выбор в памяти модуля на время жизни страницы. Переживает
+ * ремаунты и синхронит несколько хуков между собой, но НЕ персистит между перезагрузками — DS
+ * намеренно не пишет в cookie/localStorage без явного согласия потребителя. Для персиста подключите
+ * `createCookieColorSchemeStorage` (или свой адаптер) через проп `storage`.
+ */
+export declare function createInMemoryColorSchemeStorage(): ColorSchemeStorage;
+/**
+ * Cookie storage-адаптер (opt-in): cookie как источник истины (читается и на сервере, и inline-
+ * bootstrap'ом) + `BroadcastChannel` для живой кросс-таб синхронизации. Нужен для no-flash SSR —
+ * подключается потребителем через `useColorScheme({ storage: createCookieColorSchemeStorage() })`.
+ * Создание SSR-безопасно: DOM/Channel трогаются только при вызове методов, не в фабрике.
+ */
+export declare function createCookieColorSchemeStorage(options?: {
+    storageKey?: string;
+    channelName?: string;
+}): ColorSchemeStorage;

package/dist/cjs/utils/colorSchemeStorage.js

@@ -0,0 +1,85 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.createInMemoryColorSchemeStorage = createInMemoryColorSchemeStorage;
+exports.createCookieColorSchemeStorage = createCookieColorSchemeStorage;
+const colorScheme_1 = require("../constants/colorScheme");
+/* eslint-disable @cloud-ru/ssr-safe-react/domApi -- guarded by isBrowser(); адаптеры трогают DOM только при вызове методов */
+function isBrowser() {
+    return Boolean(typeof window !== 'undefined' && window.document && window.document.createElement);
+}
+function isOverride(value) {
+    return value === colorScheme_1.THEME_OVERRIDE.Light || value === colorScheme_1.THEME_OVERRIDE.Dark || value === colorScheme_1.THEME_OVERRIDE.System;
+}
+function readCookieOverride(storageKey) {
+    if (!isBrowser()) {
+        return undefined;
+    }
+    const match = document.cookie.match(new RegExp(`(?:^|; )${storageKey}=([^;]*)`));
+    const value = match ? decodeURIComponent(match[1]) : undefined;
+    return isOverride(value) ? value : undefined;
+}
+/**
+ * Дефолтный storage-адаптер: держит выбор в памяти модуля на время жизни страницы. Переживает
+ * ремаунты и синхронит несколько хуков между собой, но НЕ персистит между перезагрузками — DS
+ * намеренно не пишет в cookie/localStorage без явного согласия потребителя. Для персиста подключите
+ * `createCookieColorSchemeStorage` (или свой адаптер) через проп `storage`.
+ */
+function createInMemoryColorSchemeStorage() {
+    let value;
+    const listeners = new Set();
+    return {
+        read: () => value,
+        write: next => {
+            value = next;
+            listeners.forEach(listener => listener());
+        },
+        subscribe: onChange => {
+            listeners.add(onChange);
+            return () => {
+                listeners.delete(onChange);
+            };
+        },
+    };
+}
+/**
+ * Cookie storage-адаптер (opt-in): cookie как источник истины (читается и на сервере, и inline-
+ * bootstrap'ом) + `BroadcastChannel` для живой кросс-таб синхронизации. Нужен для no-flash SSR —
+ * подключается потребителем через `useColorScheme({ storage: createCookieColorSchemeStorage() })`.
+ * Создание SSR-безопасно: DOM/Channel трогаются только при вызове методов, не в фабрике.
+ */
+function createCookieColorSchemeStorage(options) {
+    const storageKey = options?.storageKey ?? colorScheme_1.THEME_OVERRIDE_STORAGE_KEY;
+    const channelName = options?.channelName ?? `${storageKey}-channel`;
+    let channel = null;
+    const getChannel = () => {
+        if (channel) {
+            return channel;
+        }
+        if (!isBrowser() || typeof BroadcastChannel === 'undefined') {
+            return null;
+        }
+        channel = new BroadcastChannel(channelName);
+        return channel;
+    };
+    return {
+        read: () => readCookieOverride(storageKey),
+        write: next => {
+            if (!isBrowser()) {
+                return;
+            }
+            // max-age ~1 год, lax — cookie уходит на сервер для SSR-резолва следующей загрузки.
+            document.cookie = `${storageKey}=${encodeURIComponent(next)};path=/;max-age=31536000;samesite=lax`;
+            getChannel()?.postMessage(next);
+        },
+        subscribe: onChange => {
+            const ch = getChannel();
+            if (!ch) {
+                return () => { };
+            }
+            const handler = () => onChange();
+            ch.addEventListener('message', handler);
+            return () => ch.removeEventListener('message', handler);
+        },
+    };
+}
+/* eslint-enable @cloud-ru/ssr-safe-react/domApi */

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

@@ -0,0 +1,11 @@
+/**
+ * Собирает текст CSS-правила, переопределяющего бренд-палитру из seed-цвета на бренд-классах.
+ *
+ * - Без `scope` — глобально (`:is(.sn-brandA,…){…}`), для white-label в корне приложения: побеждает
+ *   по source order на всех бренд-классах страницы, включая порталы.
+ * - Со `scope` (CSS-селектор корня поддерева) — ограничивает область потомками и самим корнем; выше
+ *   токенной специфичности, поэтому порядок не важен.
+ *
+ * Невалидный hex → `null`.
+ */
+export declare function buildBrandPaletteCss(seedColor: string, scope?: string): string | null;

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

@@ -0,0 +1,35 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.buildBrandPaletteCss = buildBrandPaletteCss;
+const appearance_1 = require("../../constants/appearance");
+const buildBrandPaletteVars_1 = require("./buildBrandPaletteVars");
+// Правило нацелено на сами бренд-классы (`.sn-brandA/B/C/D/E`), а не на один элемент inline: компоненты,
+// переэмитящие набор `sn-*` на своих обёртках (Table/Stepper/Alert через `useThemeClassnames`), заново
+// объявляют `--sn-brand-color-primary-*` из класса бренда — inline на предке они перекрыли бы, правило
+// на том же бренд-классе — нет.
+// Один seed переопределяет сразу все бренд-классы (потребитель не знает, в какой бренд-слот завернётся
+// его поддерево). TODO FF-8813: возможность задавать seed индивидуально для каждого бренда (brandA/B/C/D/E).
+const BRAND_CLASS_SELECTOR = `:is(${Object.values(appearance_1.BRAND)
+    .map(brand => `.sn-${brand}`)
+    .join(',')})`;
+/**
+ * Собирает текст CSS-правила, переопределяющего бренд-палитру из seed-цвета на бренд-классах.
+ *
+ * - Без `scope` — глобально (`:is(.sn-brandA,…){…}`), для white-label в корне приложения: побеждает
+ *   по source order на всех бренд-классах страницы, включая порталы.
+ * - Со `scope` (CSS-селектор корня поддерева) — ограничивает область потомками и самим корнем; выше
+ *   токенной специфичности, поэтому порядок не важен.
+ *
+ * Невалидный hex → `null`.
+ */
+function buildBrandPaletteCss(seedColor, scope) {
+    const vars = (0, buildBrandPaletteVars_1.buildBrandPaletteVars)(seedColor);
+    if (!vars) {
+        return null;
+    }
+    const declarations = Object.entries(vars)
+        .map(([name, value]) => `${name}:${value}`)
+        .join(';');
+    const selector = scope ? `${scope} ${BRAND_CLASS_SELECTOR},${scope}${BRAND_CLASS_SELECTOR}` : BRAND_CLASS_SELECTOR;
+    return `${selector}{${declarations}}`;
+}

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

@@ -0,0 +1,11 @@
+/**
+ * Собирает карту CSS-переменных `--sn-brand-color-primary-*` из seed-цвета для инъекции в DOM.
+ * Кроме числовых тонов задаёт `transparent` (акцент с alpha) и `onAccentLight`/`onAccentDark`
+ * (текст на светлой/тёмной акцентной заливке). Семантический слой `--sn-theme-color-primary-*`
+ * каскадит из этих тонов, поэтому одна карта красит и light, и dark. Невалидный hex → `null`.
+ *
+ * Текст на акценте: если белый на акценте контрастен (APCA ≥ 50) — светлая схема берёт near-white,
+ * тёмная near-dark; если акцент слишком светлый для белого — обе схемы инвертируются. Одно решение
+ * по контрасту seed-акцента с белым, зеркальное для схем.
+ */
+export declare function buildBrandPaletteVars(seedColor: string): Record<string, string> | null;

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

@@ -0,0 +1,42 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.buildBrandPaletteVars = buildBrandPaletteVars;
+const color_1 = require("./color");
+const constants_1 = require("./constants");
+const generateBrandPalette_1 = require("./generateBrandPalette");
+const WHITE_HEX = '#ffffff';
+// Порог APCA-контраста белого текста на акценте: ниже него акцент считается слишком светлым и текст
+// инвертируется на тёмный.
+const WHITE_ON_ACCENT_MIN_CONTRAST = 50;
+/**
+ * Собирает карту CSS-переменных `--sn-brand-color-primary-*` из seed-цвета для инъекции в DOM.
+ * Кроме числовых тонов задаёт `transparent` (акцент с alpha) и `onAccentLight`/`onAccentDark`
+ * (текст на светлой/тёмной акцентной заливке). Семантический слой `--sn-theme-color-primary-*`
+ * каскадит из этих тонов, поэтому одна карта красит и light, и dark. Невалидный hex → `null`.
+ *
+ * Текст на акценте: если белый на акценте контрастен (APCA ≥ 50) — светлая схема берёт near-white,
+ * тёмная near-dark; если акцент слишком светлый для белого — обе схемы инвертируются. Одно решение
+ * по контрасту seed-акцента с белым, зеркальное для схем.
+ */
+function buildBrandPaletteVars(seedColor) {
+    const palette = (0, generateBrandPalette_1.generateBrandPalette)(seedColor);
+    if (!palette) {
+        return null;
+    }
+    const vars = {};
+    for (const [tone, hex] of Object.entries(palette)) {
+        vars[`${constants_1.BRAND_PRIMARY_VAR_PREFIX}${tone}`] = hex;
+    }
+    const accent = palette[constants_1.PRIMARY_ACCENT_TONE];
+    const nearWhite = palette[constants_1.NEAR_WHITE_TONE];
+    const nearDark = palette[constants_1.NEAR_DARK_TONE];
+    const accentTooLightForWhite = (0, color_1.apcaContrast)(accent, WHITE_HEX) < WHITE_ON_ACCENT_MIN_CONTRAST;
+    vars[`${constants_1.BRAND_PRIMARY_VAR_PREFIX}transparent`] = `${accent}${constants_1.TRANSPARENT_ALPHA_SUFFIX}`;
+    vars[`${constants_1.BRAND_PRIMARY_VAR_PREFIX}onAccentLight`] = accentTooLightForWhite ? nearDark : nearWhite;
+    vars[`${constants_1.BRAND_PRIMARY_VAR_PREFIX}onAccentDark`] = accentTooLightForWhite ? nearWhite : nearDark;
+    // Activated-заливки = акцент с alpha (выбранная строка таблицы, active-состояния следуют за брендом).
+    vars[constants_1.BRAND_ACTIVATED_VAR.default] = `${accent}${constants_1.ACTIVATED_ALPHA_SUFFIX.default}`;
+    vars[constants_1.BRAND_ACTIVATED_VAR.hovered] = `${accent}${constants_1.ACTIVATED_ALPHA_SUFFIX.hovered}`;
+    vars[constants_1.BRAND_ACTIVATED_VAR.pressed] = `${accent}${constants_1.ACTIVATED_ALPHA_SUFFIX.pressed}`;
+    return vars;
+}

package/dist/cjs/utils/customTheme/color/apca.d.ts

@@ -0,0 +1,4 @@
+/**
+ * Абсолютный APCA-контраст `Lc` текста на фоне (оба — hex). Невалидный hex → `0`.
+ */
+export declare function apcaContrast(backgroundHex: string, textHex: string): number;

package/dist/cjs/utils/customTheme/color/apca.js

@@ -0,0 +1,62 @@
+"use strict";
+// APCA (Accessible Perceptual Contrast Algorithm), реализация SA98G (версия 0.0.98G-4g).
+// Используется только для выбора читаемого текста на акцентной заливке при генерации палитры.
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.apcaContrast = apcaContrast;
+const hex_1 = require("./hex");
+// Константы SA98G — менять нельзя, иначе разъедется с эталоном контраста APCA.
+const MAIN_TRC = 2.4;
+const S_RCO = 0.2126729;
+const S_GCO = 0.7151522;
+const S_BCO = 0.072175;
+const NORM_BG = 0.56;
+const NORM_TXT = 0.57;
+const REV_TXT = 0.62;
+const REV_BG = 0.65;
+const BLK_THRS = 0.022;
+const BLK_CLMP = 1.414;
+const SCALE_BOW = 1.14;
+const SCALE_WOB = 1.14;
+const LO_BOW_OFFSET = 0.027;
+const LO_WOB_OFFSET = 0.027;
+const DELTA_Y_MIN = 0.0005;
+const LO_CLIP = 0.1;
+/** sRGB-каналы 0–255 → относительная яркость `Y` для APCA. */
+function sRGBtoY([r, g, b]) {
+    const linearize = (channel) => Math.pow(channel / 255, MAIN_TRC);
+    return S_RCO * linearize(r) + S_GCO * linearize(g) + S_BCO * linearize(b);
+}
+/** Мягкий клэмп яркости у чёрного (soft black clamp). */
+function softClampBlack(y) {
+    return y > BLK_THRS ? y : y + Math.pow(BLK_THRS - y, BLK_CLMP);
+}
+/** Сырой APCA-контраст `Lc` между яркостью текста и фона. Полярность важна, не переставлять аргументы. */
+function apcaLc(txtY, bgY) {
+    if (Number.isNaN(txtY) || Number.isNaN(bgY) || Math.min(txtY, bgY) < 0 || Math.max(txtY, bgY) > 1.1) {
+        return 0;
+    }
+    const text = softClampBlack(txtY);
+    const bg = softClampBlack(bgY);
+    if (Math.abs(bg - text) < DELTA_Y_MIN) {
+        return 0;
+    }
+    if (bg > text) {
+        // Тёмный текст на светлом фоне (BoW).
+        const sapc = (Math.pow(bg, NORM_BG) - Math.pow(text, NORM_TXT)) * SCALE_BOW;
+        return sapc < LO_CLIP ? 0 : (sapc - LO_BOW_OFFSET) * 100;
+    }
+    // Светлый текст на тёмном фоне (WoB) — отрицательный по контракту APCA.
+    const sapc = (Math.pow(bg, REV_BG) - Math.pow(text, REV_TXT)) * SCALE_WOB;
+    return sapc > -LO_CLIP ? 0 : (sapc + LO_WOB_OFFSET) * 100;
+}
+/**
+ * Абсолютный APCA-контраст `Lc` текста на фоне (оба — hex). Невалидный hex → `0`.
+ */
+function apcaContrast(backgroundHex, textHex) {
+    const bg = (0, hex_1.parseHex)(backgroundHex);
+    const text = (0, hex_1.parseHex)(textHex);
+    if (!bg || !text) {
+        return 0;
+    }
+    return Math.round(Math.abs(apcaLc(sRGBtoY(text), sRGBtoY(bg))));
+}

package/dist/cjs/utils/customTheme/color/colorSpace.d.ts

@@ -0,0 +1,5 @@
+import { LCH, TColor } from './types';
+/** LCH → разобранный цвет. `hex` вычисляется лениво (с загонкой в гамму при выходе за неё). */
+export declare function lch2color(lch: LCH): TColor;
+/** hex → разобранный цвет (OKLCH-компоненты + sRGB-каналы). Невалидный hex → `null`. */
+export declare function hex2color(hex: string): TColor | null;

package/dist/cjs/utils/customTheme/color/colorSpace.js

@@ -0,0 +1,72 @@
+"use strict";
+// Разбор и синтез цветов в модели OKLCH. Алгоритм forceIntoGamut — CSS Color 4
+// (Chris Lilley, https://svgees.us/).
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.lch2color = lch2color;
+exports.hex2color = hex2color;
+const conversions_1 = require("./conversions");
+const hex_1 = require("./hex");
+const oklch_1 = require("./oklch");
+const clamp = (value, min, max) => Math.min(max, Math.max(min, value));
+const xyz2rgb = (xyz) => (0, conversions_1.gamSRGB)((0, conversions_1.xyzToLinSRGB)(xyz));
+const rgb2xyz = (rgb) => (0, conversions_1.linSRGBToXYZ)((0, conversions_1.linSRGB)(rgb));
+const lch2rgb = (lch) => xyz2rgb(oklch_1.oklch.lch2xyz(lch));
+const rgb2lch = (rgb) => oklch_1.oklch.xyz2lch(rgb2xyz(rgb));
+function isWithinGamut(rgb) {
+    const epsilon = 0.000005;
+    return rgb.every(channel => channel >= 0 - epsilon && channel <= 1 + epsilon);
+}
+/**
+ * Загоняет LCH-цвет в sRGB-гамму: держит `l` и `h`, бинарным поиском ужимает `c` до границы гаммы.
+ */
+function forceIntoGamut(lch) {
+    let rgb = lch2rgb(lch);
+    if (isWithinGamut(rgb)) {
+        return rgb;
+    }
+    const [l, , h] = lch;
+    let hiC = lch[1];
+    let loC = 0;
+    let c = lch[1] / 2;
+    const epsilon = 0.0001;
+    while (hiC - loC > epsilon) {
+        rgb = lch2rgb([l, c, h]);
+        if (isWithinGamut(rgb)) {
+            loC = c;
+        }
+        else {
+            hiC = c;
+        }
+        c = (hiC + loC) / 2;
+    }
+    return rgb;
+}
+/** LCH → разобранный цвет. `hex` вычисляется лениво (с загонкой в гамму при выходе за неё). */
+function lch2color(lch) {
+    const srgb = xyz2rgb(oklch_1.oklch.lch2xyz(lch));
+    const withinSRGB = isWithinGamut(srgb);
+    const [r, g, b] = srgb.map(channel => clamp(channel * 255, 0, 255));
+    const [l, c, h] = lch;
+    return {
+        l,
+        c,
+        h,
+        r,
+        g,
+        b,
+        get hex() {
+            return (0, hex_1.srgbToHex)(withinSRGB ? srgb : forceIntoGamut(lch));
+        },
+    };
+}
+/** hex → разобранный цвет (OKLCH-компоненты + sRGB-каналы). Невалидный hex → `null`. */
+function hex2color(hex) {
+    const parsed = (0, hex_1.parseHex)(hex);
+    if (!parsed) {
+        return null;
+    }
+    const normalized = parsed.map(channel => channel / 255);
+    const [l, c, h] = rgb2lch(normalized);
+    const [r, g, b] = parsed;
+    return { l, c, h, r, g, b, hex: (0, hex_1.srgbToHex)(normalized) };
+}

package/dist/cjs/utils/customTheme/color/conversions.d.ts

@@ -0,0 +1,17 @@
+import { LAB, LCH, RGB, XYZ } from './types';
+/** XYZ (относительно D65) → OKLab. `L` в диапазоне `[0,1]`. */
+export declare function xyzToOklab(xyz: XYZ): LAB;
+/** OKLab → XYZ (относительно D65). */
+export declare function oklabToXyz(lab: LAB): XYZ;
+/** OKLab → OKLCH. Hue возвращается в градусах `[0,360)`. */
+export declare function oklabToOklch(lab: LAB): LCH;
+/** OKLCH → OKLab. */
+export declare function oklchToOklab(lch: LCH): LAB;
+/** sRGB → linear-light sRGB (обратная gamma-коррекция), расширенная функция для отрицательных значений. */
+export declare function linSRGB(rgb: RGB): RGB;
+/** linear-light sRGB → sRGB (gamma-коррекция), расширенная функция для отрицательных значений. */
+export declare function gamSRGB(rgb: RGB): RGB;
+/** linear-light sRGB → CIE XYZ (белая точка D65). */
+export declare function linSRGBToXYZ(rgb: RGB): XYZ;
+/** CIE XYZ → linear-light sRGB. */
+export declare function xyzToLinSRGB(xyz: XYZ): RGB;

package/dist/cjs/utils/customTheme/color/conversions.js

@@ -0,0 +1,101 @@
+"use strict";
+// Матрицы и формулы преобразований цветовых пространств — из CSS Color 4
+// (https://drafts.csswg.org/css-color-4/conversions.js) и работы Björn Ottosson по OKLab
+// (https://bottosson.github.io/posts/oklab/). Константы менять нельзя; тип-контракт 3×3-матрицы
+// фиксирован, чтобы обойтись без `any`/`@ts-ignore` в обобщённом умножении.
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.xyzToOklab = xyzToOklab;
+exports.oklabToXyz = oklabToXyz;
+exports.oklabToOklch = oklabToOklch;
+exports.oklchToOklab = oklchToOklab;
+exports.linSRGB = linSRGB;
+exports.gamSRGB = gamSRGB;
+exports.linSRGBToXYZ = linSRGBToXYZ;
+exports.xyzToLinSRGB = xyzToLinSRGB;
+/** Умножение матрицы 3×3 на вектор из трёх компонентов. */
+function mulV(m, v) {
+    return [
+        m[0][0] * v[0] + m[0][1] * v[1] + m[0][2] * v[2],
+        m[1][0] * v[0] + m[1][1] * v[1] + m[1][2] * v[2],
+        m[2][0] * v[0] + m[2][1] * v[1] + m[2][2] * v[2],
+    ];
+}
+const XYZ_TO_LMS = [
+    [0.8190224432164319, 0.3619062562801221, -0.12887378261216414],
+    [0.0329836671980271, 0.9292868468965546, 0.03614466816999844],
+    [0.048177199566046255, 0.26423952494422764, 0.6335478258136937],
+];
+const LMS_TO_OKLAB = [
+    [0.2104542553, 0.793617785, -0.0040720468],
+    [1.9779984951, -2.428592205, 0.4505937099],
+    [0.0259040371, 0.7827717662, -0.808675766],
+];
+const LMS_TO_XYZ = [
+    [1.2268798733741557, -0.5578149965554813, 0.28139105017721583],
+    [-0.04057576262431372, 1.1122868293970594, -0.07171106666151701],
+    [-0.07637294974672142, -0.4214933239627914, 1.5869240244272418],
+];
+// prettier-ignore
+const OKLAB_TO_LMS = [
+    // eslint-disable-next-line no-loss-of-precision
+    [0.99999999845051981432, 0.39633779217376785678, 0.21580375806075880339],
+    // eslint-disable-next-line no-loss-of-precision
+    [1.0000000088817607767, -0.1055613423236563494, -0.063854174771705903402],
+    // eslint-disable-next-line no-loss-of-precision
+    [1.0000000546724109177, -0.089484182094965759684, -1.2914855378640917399],
+];
+const LIN_SRGB_TO_XYZ = [
+    [0.41239079926595934, 0.357584339383878, 0.1804807884018343],
+    [0.21263900587151027, 0.715168678767756, 0.07219231536073371],
+    [0.01933081871559182, 0.11919477979462598, 0.9505321522496607],
+];
+const XYZ_TO_LIN_SRGB = [
+    [3.2409699419045226, -1.537383177570094, -0.4986107602930034],
+    [-0.9692436362808796, 1.8759675015077202, 0.04155505740717559],
+    [0.05563007969699366, -0.20397695888897652, 1.0569715142428786],
+];
+/** XYZ (относительно D65) → OKLab. `L` в диапазоне `[0,1]`. */
+function xyzToOklab(xyz) {
+    const lms = mulV(XYZ_TO_LMS, xyz);
+    const lmsCbrt = [Math.cbrt(lms[0]), Math.cbrt(lms[1]), Math.cbrt(lms[2])];
+    return mulV(LMS_TO_OKLAB, lmsCbrt);
+}
+/** OKLab → XYZ (относительно D65). */
+function oklabToXyz(lab) {
+    const lms = mulV(OKLAB_TO_LMS, lab);
+    const lmsCubed = [lms[0] ** 3, lms[1] ** 3, lms[2] ** 3];
+    return mulV(LMS_TO_XYZ, lmsCubed);
+}
+/** OKLab → OKLCH. Hue возвращается в градусах `[0,360)`. */
+function oklabToOklch(lab) {
+    const hue = (Math.atan2(lab[2], lab[1]) * 180) / Math.PI;
+    return [lab[0], Math.sqrt(lab[1] ** 2 + lab[2] ** 2), hue >= 0 ? hue : hue + 360];
+}
+/** OKLCH → OKLab. */
+function oklchToOklab(lch) {
+    return [lch[0], lch[1] * Math.cos((lch[2] * Math.PI) / 180), lch[1] * Math.sin((lch[2] * Math.PI) / 180)];
+}
+/** sRGB → linear-light sRGB (обратная gamma-коррекция), расширенная функция для отрицательных значений. */
+function linSRGB(rgb) {
+    return rgb.map(val => {
+        const sign = val < 0 ? -1 : 1;
+        const abs = Math.abs(val);
+        return abs < 0.04045 ? val / 12.92 : sign * Math.pow((abs + 0.055) / 1.055, 2.4);
+    });
+}
+/** linear-light sRGB → sRGB (gamma-коррекция), расширенная функция для отрицательных значений. */
+function gamSRGB(rgb) {
+    return rgb.map(val => {
+        const sign = val < 0 ? -1 : 1;
+        const abs = Math.abs(val);
+        return abs > 0.0031308 ? sign * (1.055 * Math.pow(abs, 1 / 2.4) - 0.055) : 12.92 * val;
+    });
+}
+/** linear-light sRGB → CIE XYZ (белая точка D65). */
+function linSRGBToXYZ(rgb) {
+    return mulV(LIN_SRGB_TO_XYZ, rgb);
+}
+/** CIE XYZ → linear-light sRGB. */
+function xyzToLinSRGB(xyz) {
+    return mulV(XYZ_TO_LIN_SRGB, xyz);
+}

package/dist/cjs/utils/customTheme/color/hex.d.ts

@@ -0,0 +1,10 @@
+import { RGB } from './types';
+/**
+ * Разбирает hex-строку в sRGB-каналы `[r, g, b]` в диапазоне 0–255. Поддерживает `#rgb`, `#rgba`,
+ * `#rrggbb`, `#rrggbbaa` (с ведущим `#` и без). Alpha-канал игнорируется. Невалидная строка → `null`.
+ */
+export declare function parseHex(hex: string): RGB | null;
+/** Проверяет, что строка — валидный hex-цвет (`#rgb` / `#rgba` / `#rrggbb` / `#rrggbbaa`). */
+export declare function isValidHex(hex: string): boolean;
+/** sRGB-каналы 0–1 → hex-строка `#rrggbb`. Каналы клампятся в диапазон. */
+export declare function srgbToHex([r, g, b]: RGB): string;

package/dist/cjs/utils/customTheme/color/hex.js

@@ -0,0 +1,34 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.parseHex = parseHex;
+exports.isValidHex = isValidHex;
+exports.srgbToHex = srgbToHex;
+const SHORT_HEX = /^#?([\da-f])([\da-f])([\da-f])([\da-f])?$/i;
+const LONG_HEX = /^#?([\da-f]{2})([\da-f]{2})([\da-f]{2})([\da-f]{2})?$/i;
+/**
+ * Разбирает hex-строку в sRGB-каналы `[r, g, b]` в диапазоне 0–255. Поддерживает `#rgb`, `#rgba`,
+ * `#rrggbb`, `#rrggbbaa` (с ведущим `#` и без). Alpha-канал игнорируется. Невалидная строка → `null`.
+ */
+function parseHex(hex) {
+    const trimmed = hex.trim();
+    const short = SHORT_HEX.exec(trimmed);
+    if (short) {
+        return [parseInt(short[1] + short[1], 16), parseInt(short[2] + short[2], 16), parseInt(short[3] + short[3], 16)];
+    }
+    const long = LONG_HEX.exec(trimmed);
+    if (long) {
+        return [parseInt(long[1], 16), parseInt(long[2], 16), parseInt(long[3], 16)];
+    }
+    return null;
+}
+/** Проверяет, что строка — валидный hex-цвет (`#rgb` / `#rgba` / `#rrggbb` / `#rrggbbaa`). */
+function isValidHex(hex) {
+    return parseHex(hex) !== null;
+}
+/** sRGB-каналы 0–1 → hex-строка `#rrggbb`. Каналы клампятся в диапазон. */
+function srgbToHex([r, g, b]) {
+    const toHex = (channel) => Math.round(Math.min(255, Math.max(0, channel * 255)))
+        .toString(16)
+        .padStart(2, '0');
+    return `#${toHex(r)}${toHex(g)}${toHex(b)}`;
+}

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

@@ -0,0 +1,4 @@
+export * from './types';
+export * from './hex';
+export * from './colorSpace';
+export * from './apca';

package/dist/cjs/utils/customTheme/color/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("./types"), exports);
+__exportStar(require("./hex"), exports);
+__exportStar(require("./colorSpace"), exports);
+__exportStar(require("./apca"), exports);

package/dist/cjs/utils/customTheme/color/oklch.d.ts

@@ -0,0 +1,3 @@
+import { TLchModel } from './types';
+/** Модель OKLCH: перевод LCH↔XYZ через OKLab. `L` наружу — в процентах. */
+export declare const oklch: TLchModel;

package/dist/cjs/utils/customTheme/color/oklch.js

@@ -0,0 +1,21 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.oklch = void 0;
+const conversions_1 = require("./conversions");
+// L компонента OKLCH хранится наружу в процентах [0–100], внутри модели — в [0–1].
+function toDisplayOKLCH([l, c, h]) {
+    return [l * 100, c, h];
+}
+function fromDisplayOKLCH([l, c, h]) {
+    return [l / 100, c, h];
+}
+/** Модель OKLCH: перевод LCH↔XYZ через OKLab. `L` наружу — в процентах. */
+exports.oklch = {
+    lch2xyz: (lch) => (0, conversions_1.oklabToXyz)((0, conversions_1.oklchToOklab)(fromDisplayOKLCH(lch))),
+    xyz2lch: (xyz) => toDisplayOKLCH((0, conversions_1.oklabToOklch)((0, conversions_1.xyzToOklab)(xyz))),
+    ranges: {
+        l: { min: 0, max: 100, step: 0.5 },
+        c: { min: 0, max: 0.33, step: 0.005 },
+        h: { min: 0, max: 360, step: 0.5 },
+    },
+};

package/dist/cjs/utils/customTheme/color/types.d.ts

@@ -0,0 +1,40 @@
+/** Вектор из трёх чисел — канал цвета в любом из пространств (RGB/XYZ/LAB/LCH). */
+export type Vec3 = [number, number, number];
+/** Матрица 3×3 для линейных преобразований цветовых пространств. */
+export type Mat3 = [Vec3, Vec3, Vec3];
+export type XYZ = Vec3;
+export type LAB = Vec3;
+export type LCH = Vec3;
+export type RGB = Vec3;
+/** Разобранный цвет: OKLCH-компоненты (`l`,`c`,`h`), sRGB-каналы 0–255 (`r`,`g`,`b`) и hex. */
+export type TColor = {
+    l: number;
+    c: number;
+    h: number;
+    r: number;
+    g: number;
+    b: number;
+    hex: string;
+};
+/** Модель цветового пространства LCH: конвертеры в/из XYZ и диапазоны компонентов. */
+export type TLchModel = {
+    ranges: {
+        l: {
+            min: number;
+            max: number;
+            step: number;
+        };
+        c: {
+            min: number;
+            max: number;
+            step: number;
+        };
+        h: {
+            min: number;
+            max: number;
+            step: number;
+        };
+    };
+    xyz2lch(xyz: XYZ): LCH;
+    lch2xyz(lch: LCH): XYZ;
+};

package/dist/cjs/utils/customTheme/color/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });