@mesgflow/ui-kit 0.6.0

package/fesm2022/mesgflow-ui-kit-theming.mjs

@@ -0,0 +1,1016 @@
+import * as i0 from '@angular/core';
+import { InjectionToken, inject, DOCUMENT, signal, computed, DestroyRef, effect, Service } from '@angular/core';
+
+/**
+ * mesgflow — OKLCH renk matematigi (Bjorn Ottosson formulleri,
+ * https://bottosson.github.io/posts/oklab/). BAGIMSIZ (culori vb. bir
+ * kutuphane YOK, bkz. plan Faz 2) — yalnizca `theming/ramp.ts`'in ihtiyaci
+ * kadar: hex <-> OKLCH donusumu + basit gamut-kirpma. Bu dosya PUBLIC API
+ * DEGIL, `theming/index.ts` bunu re-export ETMEZ.
+ */
+function srgbToLinear(c8) {
+    const v = c8 / 255;
+    return v <= 0.04045 ? v / 12.92 : Math.pow((v + 0.055) / 1.055, 2.4);
+}
+function linearToSrgb8(v) {
+    const clamped = Math.min(1, Math.max(0, v));
+    const c = clamped <= 0.0031308 ? clamped * 12.92 : 1.055 * Math.pow(clamped, 1 / 2.4) - 0.055;
+    return Math.round(c * 255);
+}
+function linearRgbToOklab(r, g, b) {
+    const l = 0.4122214708 * r + 0.5363325363 * g + 0.0514459929 * b;
+    const m = 0.2119034982 * r + 0.6806995451 * g + 0.1073969566 * b;
+    const s = 0.0883024619 * r + 0.2817188376 * g + 0.6299787005 * b;
+    const l_ = Math.cbrt(l);
+    const m_ = Math.cbrt(m);
+    const s_ = Math.cbrt(s);
+    return [
+        0.2104542553 * l_ + 0.793617785 * m_ - 0.0040720468 * s_,
+        1.9779984951 * l_ - 2.428592205 * m_ + 0.4505937099 * s_,
+        0.0259040371 * l_ + 0.7827717662 * m_ - 0.808675766 * s_,
+    ];
+}
+function oklabToLinearRgb(L, a, b) {
+    const l_ = L + 0.3963377774 * a + 0.2158037573 * b;
+    const m_ = L - 0.1055613458 * a - 0.0638541728 * b;
+    const s_ = L - 0.0894841775 * a - 1.291485548 * b;
+    const l = l_ * l_ * l_;
+    const m = m_ * m_ * m_;
+    const s = s_ * s_ * s_;
+    return [
+        4.0767416621 * l - 3.3077115913 * m + 0.2309699292 * s,
+        -1.2684380046 * l + 2.6097574011 * m - 0.3413193965 * s,
+        -0.0041960863 * l - 0.7034186147 * m + 1.707614701 * s,
+    ];
+}
+/** `#rgb`/`#rrggbb` -> `[r,g,b]` (0-255). Gecersiz girdi icin `[0,0,0]` (cagiran `parseHex` ile once dogrular). */
+function hexToRgb(hex) {
+    const clean = hex.trim().replace('#', '');
+    const full = clean.length === 3
+        ? clean
+            .split('')
+            .map((c) => c + c)
+            .join('')
+        : clean;
+    const num = parseInt(full, 16);
+    if (Number.isNaN(num))
+        return [0, 0, 0];
+    return [(num >> 16) & 255, (num >> 8) & 255, num & 255];
+}
+function rgbToHex(r, g, b) {
+    const toHex = (n) => Math.round(Math.min(255, Math.max(0, n)))
+        .toString(16)
+        .padStart(2, '0');
+    return `#${toHex(r)}${toHex(g)}${toHex(b)}`;
+}
+/** `/^#([0-9a-f]{3}|[0-9a-f]{6})$/i` — `createAccentRamp`/`applyMfTheme`'in girdi dogrulamasi icin. */
+function isValidHex(hex) {
+    return /^#([0-9a-f]{3}|[0-9a-f]{6})$/i.test(hex.trim());
+}
+function hexToOklch(hex) {
+    const [r8, g8, b8] = hexToRgb(hex);
+    const r = srgbToLinear(r8);
+    const g = srgbToLinear(g8);
+    const b = srgbToLinear(b8);
+    const [L, a, bLab] = linearRgbToOklab(r, g, b);
+    const c = Math.sqrt(a * a + bLab * bLab);
+    let h = (Math.atan2(bLab, a) * 180) / Math.PI;
+    if (h < 0)
+        h += 360;
+    return { l: L, c, h };
+}
+/**
+ * OKLCH -> hex, basit gamut-kirpma ile: sRGB disina tasan L/C/H kombinasyonlari
+ * icin kroma kademeli olarak (%92 adimlarla) azaltilir ta ki her kanal [0,1]
+ * araligina girene kadar (en fazla 24 deneme — pratikte 5-6 yeter). Tam bir
+ * gamut-mapping algoritmasi DEGIL (ör. CSS Color 4'un "CSS Gamut Mapping"i)
+ * ama bir tema uretici icin yeterli: sonuc HER ZAMAN gecerli bir sRGB hex,
+ * ton hafifce kayabilir (asiri doygun girdilerde) ama asla clamp-artefact'i
+ * (yanlis renk) uretmez.
+ */
+function oklchToHex(l, c, h) {
+    const hRad = (h * Math.PI) / 180;
+    let chroma = c;
+    for (let i = 0; i < 24; i++) {
+        const a = chroma * Math.cos(hRad);
+        const b = chroma * Math.sin(hRad);
+        const [r, g, bl] = oklabToLinearRgb(l, a, b);
+        const inGamut = [r, g, bl].every((v) => v >= -0.001 && v <= 1.001);
+        if (inGamut || chroma <= 0.0001) {
+            return rgbToHex(linearToSrgb8(r), linearToSrgb8(g), linearToSrgb8(bl));
+        }
+        chroma *= 0.92;
+    }
+    const [r, g, bl] = oklabToLinearRgb(l, 0, 0);
+    return rgbToHex(linearToSrgb8(r), linearToSrgb8(g), linearToSrgb8(bl));
+}
+/** WCAG göreli parlaklık (0-1) — `pickForeground`'ın kontrast oranı hesabının temeli. (`npm run check:contrast`, `scripts/check-contrast.mjs`, kitten BAĞIMSIZ kendi kopyasını taşır — aynı formül, farklı dosya.) */
+function relativeLuminance(hex) {
+    const [r8, g8, b8] = hexToRgb(hex);
+    const lin = (c8) => {
+        const v = c8 / 255;
+        return v <= 0.03928 ? v / 12.92 : Math.pow((v + 0.055) / 1.055, 2.4);
+    };
+    return 0.2126 * lin(r8) + 0.7152 * lin(g8) + 0.0722 * lin(b8);
+}
+/** İki hex arası WCAG kontrast oranı (1-21). */
+function contrastRatio(hexA, hexB) {
+    const lA = relativeLuminance(hexA);
+    const lB = relativeLuminance(hexB);
+    const lighter = Math.max(lA, lB);
+    const darker = Math.min(lA, lB);
+    return (lighter + 0.05) / (darker + 0.05);
+}
+/** `background` üstünde `light`/`dark` metninden HANGİSİ daha kontrastlıysa onu döner — `fgOnAccent` bunu kullanır. */
+function pickForeground(background, light, dark) {
+    return contrastRatio(background, light) >= contrastRatio(background, dark) ? light : dark;
+}
+/** `a`/`b` hex'lerini `t` (0-1) oranında karıştırır — `neutralTint`'in ince renk katması için (OKLCH DEĞİL, düz sRGB lerp: küçük `t` değerlerinde (≤0.08) fark edilmez, 13 basamaklı nötr rampayı yeniden OKLCH'de üretmekten çok daha basit ve güvenli). */
+function mixHex(a, b, t) {
+    const [ar, ag, ab] = hexToRgb(a);
+    const [br, bg, bb] = hexToRgb(b);
+    const mix = (x, y) => x + (y - x) * t;
+    return rgbToHex(mix(ar, br), mix(ag, bg), mix(ab, bb));
+}
+
+/**
+ * Basamak bağımsız SABİT bir eğri — herhangi bir girdi hue'sunda "aynı ağırlık
+ * hissini" garanti eder (bkz. plan Faz 2: tüketici hangi accent'i seçerse
+ * seçsin ramp'in 600 basamağı HER ZAMAN "metin/kenarlık" ağırlığında olmalı,
+ * 950 basamağı HER ZAMAN "neredeyse siyah" olmalı). `color.css`'teki
+ * varsayılan "Deep Emerald" rampasıyla (primary-600 = #004d40, L≈0.38)
+ * TAM ÖRTÜŞMEZ — bu eğride 600 = L 0.50, kasıtlı: elle taşınan varsayılan
+ * rampa marka için özel olarak koyulaştırıldı. Ayrıca DOLU BLOK (`accent-fill`)
+ * artık `accent`/`accent-strong` (600/700 tabanlı) metin/kenarlık rolünden
+ * TAMAMEN AYRI bir basamak çifti kullanıyor — kitin varsayılan rampasında
+ * LIGHT 900 / DARK 400 (spec'in "Forest Emerald" CTA'sı + canlı zümrüt CTA'sı,
+ * kullanıcı kararı); tüketici aksanlarında ise (bkz. `theming/apply.ts`
+ * `accentRoleLines()`) bu eğrinin kendi 600/400 basamakları kullanılır —
+ * varsayılandan farklı bir "ağırlık" üretir, bu FARK belgelidir, hata değildir.
+ */
+const LIGHTNESS_BY_STEP = {
+    '50': 0.97,
+    '100': 0.94,
+    '200': 0.88,
+    '300': 0.79,
+    '400': 0.7,
+    '500': 0.6,
+    '600': 0.5,
+    '700': 0.42,
+    '800': 0.34,
+    '900': 0.27,
+    '950': 0.2,
+};
+/**
+ * Girdinin KENDİ kroması, uç basamaklarda (çok açık/çok koyu) doğal olarak
+ * azalır — aksi halde `950` basamağı "doygun ama neredeyse siyah" (gamut
+ * dışı, kirpma sonrası tonu kayan) bir renge dönüşür. `600` = girdinin TAM
+ * kroması (referans basamak).
+ */
+const CHROMA_MULTIPLIER_BY_STEP = {
+    '50': 0.05,
+    '100': 0.12,
+    '200': 0.25,
+    '300': 0.45,
+    '400': 0.7,
+    '500': 0.9,
+    '600': 1,
+    '700': 0.95,
+    '800': 0.85,
+    '900': 0.7,
+    '950': 0.55,
+};
+const RAMP_STEPS = [
+    '50',
+    '100',
+    '200',
+    '300',
+    '400',
+    '500',
+    '600',
+    '700',
+    '800',
+    '900',
+    '950',
+];
+/**
+ * `hex` bir accent'in "600 basamağı" gibi ele alınır (kitin kendi kuralı,
+ * bkz. `color.css` "Her rampada basamak 600 = LIGHT modda dolu/etkileşimli
+ * kullanım" notu) — girdinin hue'su + kroma karakteri korunur, tüm 11
+ * basamak `LIGHTNESS_BY_STEP`/`CHROMA_MULTIPLIER_BY_STEP` sabit eğrisiyle
+ * YENİDEN üretilir (girdinin TAM OLARAK 600'e denk gelen bir L'de olması
+ * ŞART DEĞİL — ör. çok açık bir hex verilse bile 950 basamağı yine
+ * "neredeyse siyah" çıkar, ramp her zaman tutarlı).
+ *
+ * @throws girdi `#rgb`/`#rrggbb` değilse.
+ */
+function createAccentRamp(hex) {
+    if (!isValidHex(hex)) {
+        throw new Error(`createAccentRamp: geçersiz hex "${hex}" — #rgb veya #rrggbb bekleniyor.`);
+    }
+    const { c, h } = hexToOklch(hex);
+    const ramp = {};
+    for (const step of RAMP_STEPS) {
+        ramp[step] = oklchToHex(LIGHTNESS_BY_STEP[step], c * CHROMA_MULTIPLIER_BY_STEP[step], h);
+    }
+    return ramp;
+}
+/**
+ * Bir rampa basamağının üstüne binecek metin rengi — `#ffffff` veya kitin
+ * `--mf-surface-inverse`'i (`#04110d`, `color.css`) arasından HANGİSİ WCAG
+ * kontrastı daha yüksekse. `theming/apply.ts`'teki `accentRoleLines()` bunu
+ * `ramp['600']` (LIGHT yarı) VE `ramp['400']` (DARK yarı) için AYRI AYRI
+ * çağırır — accent-fill artık İKİ basamak kullanıyor (kitin varsayılanında
+ * 900/400, tüketici aksanlarında 600/400), genelde çok farklı parlaklıkta,
+ * her biri kendi doğru metin rengini WCAG hesabıyla (sabit varsayım DEĞİL)
+ * bulur.
+ */
+function fgOnAccent(accentHex) {
+    return pickForeground(accentHex, '#ffffff', '#04110d');
+}
+/** `ramp`'in `600` basamağının kontrast oranını (beyaz metne karşı) döner — `ramp.spec.ts`/tüketici sağlık kontrolü için. */
+function accentContrastWithWhite(ramp) {
+    return contrastRatio(ramp['600'], '#ffffff');
+}
+
+/**
+ * Nötr rampa 13 basamaklı (`850`/`975` DAHİL) — diğer altı rampanın (primary/
+ * success/warning/danger/info/help) 11 basamaklık `RampStep`'inden AYRI bir
+ * tip (bkz. `color.css` "RENK — HAM RAMPALAR" notu, `NEUTRAL_STEPS` — `apply.ts`).
+ */
+const MF_NEUTRAL_RAMP_STEPS = [
+    '50',
+    '100',
+    '200',
+    '300',
+    '400',
+    '500',
+    '600',
+    '700',
+    '800',
+    '850',
+    '900',
+    '950',
+    '975',
+];
+/** `ramps.<tone>` altında elle geçilebilen altı 11-basamaklı rampa — `neutral` (13 basamak) AYRI ele alınır. */
+const MF_RAMP_TONES = ['primary', 'success', 'warning', 'danger', 'info', 'help'];
+/**
+ * `color.css`'in rol katmanındaki, bir RAMPA basamağına `var()` İLE
+ * BAĞLI OLMAYAN (yani `ramps.*` override'ıyla OTOMATİK takip ETMEYEN) TEK
+ * TEK yazılmış literal token'lar — `accent`/`ramps.*` DIŞINDA kalan, marka
+ * beyaz etiketlemesi için hâlâ ayarlanabilir olması gereken son katman.
+ * (`--mf-accent`, `--mf-success-fill`, `--mf-success-tint` vb. BURADA YOK —
+ * hepsi zaten `ramps.primary`/`ramps.success` override'ıyla otomatik
+ * güncellenir, bkz. `color.css`'teki `var(--color-X-NNN)` referansları.)
+ */
+const MF_ROLE_TOKENS = [
+    'surface',
+    'chrome',
+    'overlay',
+    'surface-inverse',
+    'glass',
+    'fg',
+    'fg-muted',
+    'fg-on-accent',
+    'fg-inverse',
+    'hairline',
+    'neutral-fill',
+    'neutral-fill-hover',
+    'neutral-fill-fg',
+    'success-fill-fg',
+    'warning-fill-fg',
+    'danger-fill-fg',
+    'info-fill-fg',
+    'help-fill-fg',
+    'chart-1',
+    'chart-2',
+    'chart-3',
+    'chart-4',
+    'chart-5',
+    'chart-6',
+    'chart-7',
+    'chart-8',
+    'chart-other',
+];
+
+const RADIUS_PX = {
+    sharp: { xs: 2, sm: 3, md: 4, lg: 6, xl: 8 },
+    default: { xs: 4, sm: 6, md: 8, lg: 12, xl: 16 },
+    soft: { xs: 6, sm: 10, md: 14, lg: 20, xl: 28 },
+};
+/** `radius.css`'teki `--control-h-*` ile AYNI değerler — `[data-density]` seçicileri de bunları kullanır. */
+const CONTROL_H_PX = {
+    compact: { sm: 28, md: 32, lg: 36 },
+    default: { sm: 32, md: 36, lg: 40 },
+    comfortable: { sm: 36, md: 40, lg: 44 },
+};
+const CONTROL_H_KEYS = ['sm', 'md', 'lg'];
+function densityLines(density) {
+    return CONTROL_H_KEYS.map((key) => [
+        `--control-h-${key}`,
+        `${CONTROL_H_PX[density][key] / 16}rem`,
+    ]);
+}
+/** `color.css`'teki 13 basamaklı nötr merdiven — tint karışımı bunların HEPSİNİ, moddan bağımsız (raw ramp) günceller. */
+const NEUTRAL_STEPS = MF_NEUTRAL_RAMP_STEPS;
+/** `ramps.<tone>` genel-amaçlı döngüsü için — `primary` kendi özel `accentRoleLines()` türetmesi yüzünden AYRI ele alınır (bkz. altta). */
+const OTHER_RAMP_TONES = MF_RAMP_TONES.filter((tone) => tone !== 'primary');
+/** Sabit, hue'ya dayalı iki tint ucu — accent'ten BAĞIMSIZ (bkz. plan Faz 2 "neutralTint"). `mixHex` küçük `t` ile çağrıldığı için nötrün kendi algısal parlaklığı korunur. */
+const TINT_HEX = {
+    cool: '#3b82f6',
+    warm: '#f59e0b',
+};
+const TINT_AMOUNT = 0.06;
+/**
+ * `--mf-fg-on-accent`/`--mf-accent-fill`/`--mf-accent-fill-hover` rol
+ * token'ları rampa basamağı gibi `--color-primary-*` ADI ALTINDA değil,
+ * kendi `--mf-*` isimleriyle yazılır (bkz. color.css rol katmanı) — bu
+ * yüzden `RAMP_STEPS` döngüsüne dahil DEĞİLLER, `accent: null` temizliğinin
+ * de bunları AYRICA silmesi gerekiyor.
+ */
+const ACCENT_ROLE_PROPS = [
+    '--mf-fg-on-accent',
+    '--mf-accent-fill',
+    '--mf-accent-fill-hover',
+];
+/**
+ * Bir accent ramp'inden üç rol token satırını üretir — `applyMfTheme` (runtime
+ * `setProperty`) ve `exportMfThemeCss` (statik string) İKİSİ de bunu kullanır,
+ * tek kaynak. Kitin KENDİ varsayılan rampasıyla AYNI desen (color.css): dolu
+ * blok LIGHT'ta 600, DARK'ta 400 (hover 700/500) — `light-dark()`'ın İKİ
+ * yarısı da AYRI hesaplanır, tek bir sabit değer DEĞİL. `fgOnAccent` her
+ * yarı için AYRI çağrılır çünkü 600 ile 400 basamağı genelde çok farklı
+ * parlaklıkta (600 koyu → genelde beyaz metin ister, 400 açık → genelde
+ * mürekkep ister) — tüketicinin verdiği HERHANGİ bir aksan renginde bu iki
+ * yarı FARKLI metin rengine ihtiyaç duyabilir (bkz. kitin varsayılan primary
+ * rampası: light `#062c22` + beyaz, dark `#10b981` + mürekkep — aynı asimetri).
+ * `ramp` EKSİK basamak taşıyorsa (ör. `ramps.primary` kısmi verildiyse,
+ * `resolvedPrimaryRamp`'in okunmuş/birleştirilmiş sonucu DEĞİLSE) `null`
+ * döner — çağıran bu durumda satırları YAZMAZ (bkz. `exportMfThemeCss`).
+ */
+function accentRoleLines(ramp) {
+    const c400 = ramp['400'];
+    const c500 = ramp['500'];
+    const c600 = ramp['600'];
+    const c700 = ramp['700'];
+    if (!c400 || !c500 || !c600 || !c700)
+        return null;
+    const fgLight = fgOnAccent(c600);
+    const fgDark = fgOnAccent(c400);
+    return [
+        ['--mf-fg-on-accent', `light-dark(${fgLight}, ${fgDark})`],
+        ['--mf-accent-fill', `light-dark(${c600}, ${c400})`],
+        ['--mf-accent-fill-hover', `light-dark(${c700}, ${c500})`],
+    ];
+}
+function isBrowser() {
+    return typeof document !== 'undefined';
+}
+/**
+ * `config.ramps.primary` (kısmi olabilir) ile `el`'in O ANKİ hesaplanmış
+ * `--color-primary-*` değerlerini BİRLEŞTİRİR — `accentRoleLines()`'ın TAM
+ * bir ramp'e (400/500/600/700) ihtiyacı var, tüketici SADECE birkaç basamağı
+ * override etse bile (ör. sadece `600`) doğru `--mf-accent-fill` vb.
+ * türetilsin diye (bkz. `neutralTint`'in AYNI "önce oku, sonra karıştır"
+ * ilkesi, altta).
+ */
+function resolvedPrimaryRamp(el, override) {
+    const computed = getComputedStyle(el);
+    const ramp = {};
+    for (const step of RAMP_STEPS) {
+        ramp[step] = override[step] ?? computed.getPropertyValue(`--color-primary-${step}`).trim();
+    }
+    return ramp;
+}
+/**
+ * `config.roles.light[key]`/`config.roles.dark[key]`'i TEK bir `light-dark()`
+ * CSS değerine çevirir — sadece BİRİ verilirse İKİ modda da AYNI değer
+ * kullanılır (bkz. `theme-json.ts`'teki `MfThemeJson.roles` doc'u — hangi
+ * modda olunduğunu PROBE etmek yerine BİLEREK basit/öngörülebilir).
+ */
+function roleLightDarkValue(light, dark) {
+    const resolvedLight = light ?? dark;
+    const resolvedDark = dark ?? light;
+    if (resolvedLight === undefined || resolvedDark === undefined)
+        return null;
+    return `light-dark(${resolvedLight}, ${resolvedDark})`;
+}
+/**
+ * `MfThemeJson`'ı CSS custom property'leri olarak `target`'a (varsayılan
+ * `document.documentElement`) YAZAR — sayfa YENİDEN YÜKLENMEDEN, hiçbir
+ * bileşen dosyasına dokunmadan tüm kit anında yeni temaya geçer. Bunun
+ * mümkün olmasının nedeni: Tailwind v4'ün ürettiği utility'ler (`bg-primary-600`,
+ * `rounded-md`, ...) derleme zamanında SABİT bir değere değil, doğrudan
+ * `var(--color-primary-600)`/`var(--radius-md)` REFERANSINA derleniyor (bkz.
+ * `docs/tr/mimari.md` "Token mimarisi") — CSS cascade'de bu satırlar
+ * `@theme`'in KENDİ tanımından SONRA (inline stil her zaman kazanır)
+ * çalıştığı için token'lar üzerinden TÜM bileşenler güncellenir. SADECE
+ * `config`'te VERİLEN alanlar yazılır ("delta-only") — bu fonksiyon kitin
+ * TÜM varsayılan token setini bilmek/üretmek ZORUNDA DEĞİL, bu yüzden
+ * kitin CSS kaynağıyla asla senkron dışı kalamaz.
+ *
+ * - `accent` verilirse: `createAccentRamp()` ile 11 basamaklı `--color-primary-*`
+ *   YENİDEN üretilir + `accentRoleLines()` (`--mf-fg-on-accent`/`-accent-fill`/
+ *   `-accent-fill-hover`, `light-dark()` literal değerleri — bkz. altta).
+ *   `:root`/`.dark` bunları zaten `var()` ile referans aldığı için (bkz.
+ *   `color.css` rol katmanı) `--mf-accent`/`--mf-accent-strong`/`--mf-focus-ring`/
+ *   `--mf-primary-tint(-fg)` AYRICA yazılmaz — otomatik takip eder.
+ * - `accent: null` verilirse: yukarıdaki override'ların HEPSİ temizlenir, kit
+ *   `color.css`'teki varsayılan "Deep Emerald" rampasına döner.
+ * - `ramps.primary` verilirse (`accent`'i EZER — aynı çağrıda ikisi de
+ *   verilirse `ramps.primary` kazanır): basamak başına TAM kontrol, kısmi
+ *   olabilir (`resolvedPrimaryRamp` ile O ANKİ değerlerle birleştirilir).
+ * - `ramps.success`/`warning`/`danger`/`info`/`help`/`neutral` verilirse:
+ *   verilen basamaklar DOĞRUDAN yazılır — bu tonların TÜM türetilmiş rol
+ *   token'ları (`--mf-X`, `--mf-X-fill`, `--mf-X-tint` vb.) `color.css`'te
+ *   zaten `var(--color-X-NNN)` ile bu rampaya bağlı, OTOMATİK güncellenir.
+ * - `roles.light`/`roles.dark` verilirse: rampaya BAĞLI OLMAYAN literal
+ *   token'lar (bkz. `MfRoleToken`) `light-dark()` ile yazılır.
+ * - `fonts`/`radius` verilirse: moddan bağımsız düz değerler yazılır —
+ *   `radius` `radiusScale`'İN ÜSTÜNE (aynı çağrıda ikisi de verilirse SONRA
+ *   uygulanır) basamak-bazlı ince ayar sağlar.
+ * - `radiusScale` verilirse: `--radius-{xs,sm,md,lg,xl}` nested ölçeği
+ *   KORUYARAK (bkz. `radius.css` doktrini) birlikte küçülür/büyür.
+ * - `density` verilirse: `--control-h-{sm,md,lg}` merdiveni yazılır — tüm
+ *   kontroller (Button/Input/Select/...) aynı hizada birlikte büyür/küçülür.
+ * - `neutralTint` verilirse: 13 basamaklı `--color-neutral-*` rampası ÇOK
+ *   düşük oranda (bkz. `color-math.ts` `mixHex`) soğuk/sıcak bir tona kayar
+ *   — `ramps.neutral` AYNI ÇAĞRIDA verildiyse ONUN ÜSTÜNE uygulanır (bu
+ *   fonksiyondaki sıra: ramps → neutralTint).
+ *
+ * SSR güvenli — `document` yoksa no-op.
+ */
+function applyMfTheme(config, target) {
+    if (!isBrowser())
+        return;
+    const el = target ?? document.documentElement;
+    if (config.accent === null && !config.ramps?.primary) {
+        for (const step of RAMP_STEPS) {
+            el.style.removeProperty(`--color-primary-${step}`);
+        }
+        for (const prop of ACCENT_ROLE_PROPS) {
+            el.style.removeProperty(prop);
+        }
+    }
+    else if (config.ramps?.primary) {
+        const ramp = resolvedPrimaryRamp(el, config.ramps.primary);
+        for (const step of RAMP_STEPS) {
+            el.style.setProperty(`--color-primary-${step}`, ramp[step]);
+        }
+        const lines = accentRoleLines(ramp);
+        if (lines) {
+            for (const [prop, value] of lines)
+                el.style.setProperty(prop, value);
+        }
+    }
+    else if (config.accent) {
+        const ramp = createAccentRamp(config.accent);
+        for (const step of RAMP_STEPS) {
+            el.style.setProperty(`--color-primary-${step}`, ramp[step]);
+        }
+        const lines = accentRoleLines(ramp);
+        if (lines) {
+            for (const [prop, value] of lines)
+                el.style.setProperty(prop, value);
+        }
+    }
+    for (const tone of OTHER_RAMP_TONES) {
+        const override = config.ramps?.[tone];
+        if (!override)
+            continue;
+        for (const step of RAMP_STEPS) {
+            const hex = override[step];
+            if (hex)
+                el.style.setProperty(`--color-${tone}-${step}`, hex);
+        }
+    }
+    if (config.ramps?.neutral) {
+        for (const step of NEUTRAL_STEPS) {
+            const hex = config.ramps.neutral[step];
+            if (hex)
+                el.style.setProperty(`--color-neutral-${step}`, hex);
+        }
+    }
+    if (config.roles) {
+        for (const key of MF_ROLE_TOKENS) {
+            const value = roleLightDarkValue(config.roles.light?.[key], config.roles.dark?.[key]);
+            if (value)
+                el.style.setProperty(`--mf-${key}`, value);
+        }
+    }
+    if (config.fonts?.sans)
+        el.style.setProperty('--font-sans', config.fonts.sans);
+    if (config.fonts?.display)
+        el.style.setProperty('--font-display', config.fonts.display);
+    if (config.fonts?.mono)
+        el.style.setProperty('--font-mono', config.fonts.mono);
+    if (config.radiusScale) {
+        const px = RADIUS_PX[config.radiusScale];
+        for (const [key, value] of Object.entries(px)) {
+            el.style.setProperty(`--radius-${key}`, `${value}px`);
+        }
+    }
+    if (config.radius) {
+        for (const [key, value] of Object.entries(config.radius)) {
+            if (value)
+                el.style.setProperty(`--radius-${key}`, value);
+        }
+    }
+    if (config.density) {
+        for (const [prop, value] of densityLines(config.density))
+            el.style.setProperty(prop, value);
+    }
+    if (config.neutralTint !== undefined) {
+        // ÖNCE inline override'ı TEMİZLE (`removeProperty`), SONRA (tint !=
+        // 'neutral' ise) `getComputedStyle`'ı yeniden oku — aksi halde art arda
+        // iki `applyMfTheme({ neutralTint: 'cool' })` çağrısı (ör. tema
+        // özelleştiricide kullanıcı aynı seçimi tekrar tetiklerse) İKİNCİ
+        // çağrıda ZATEN tint'lenmiş değerin üstüne BİR TINT DAHA karıştırırdı
+        // (`getComputedStyle` kendi az önce yazdığı inline değeri geri okur) —
+        // gerçek bulgu, kümülatif/katlanan bir renk kayması üretiyordu.
+        for (const step of NEUTRAL_STEPS) {
+            el.style.removeProperty(`--color-neutral-${step}`);
+        }
+        if (config.neutralTint !== 'neutral') {
+            const tint = TINT_HEX[config.neutralTint];
+            const computed = getComputedStyle(el);
+            for (const step of NEUTRAL_STEPS) {
+                const current = computed.getPropertyValue(`--color-neutral-${step}`).trim();
+                if (!current)
+                    continue;
+                el.style.setProperty(`--color-neutral-${step}`, mixHex(current, tint, TINT_AMOUNT));
+            }
+        }
+    }
+}
+/**
+ * `applyMfTheme()`'in YAZABİLECEĞİ HER inline override'ı temizler — bir
+ * tema özelleştiricideki "Varsayılana sıfırla" düğmesi için `accent: null`'ın
+ * genişletilmiş hali (o SADECE accent'i temizlerdi). Kit `color.css`'teki
+ * varsayılanlara TAMAMEN geri döner.
+ */
+function resetMfTheme(target) {
+    if (!isBrowser())
+        return;
+    const el = target ?? document.documentElement;
+    for (const step of RAMP_STEPS)
+        el.style.removeProperty(`--color-primary-${step}`);
+    for (const prop of ACCENT_ROLE_PROPS)
+        el.style.removeProperty(prop);
+    for (const tone of OTHER_RAMP_TONES) {
+        for (const step of RAMP_STEPS)
+            el.style.removeProperty(`--color-${tone}-${step}`);
+    }
+    for (const step of NEUTRAL_STEPS)
+        el.style.removeProperty(`--color-neutral-${step}`);
+    for (const key of MF_ROLE_TOKENS)
+        el.style.removeProperty(`--mf-${key}`);
+    el.style.removeProperty('--font-sans');
+    el.style.removeProperty('--font-display');
+    el.style.removeProperty('--font-mono');
+    for (const key of ['xs', 'sm', 'md', 'lg', 'xl'])
+        el.style.removeProperty(`--radius-${key}`);
+    for (const key of CONTROL_H_KEYS)
+        el.style.removeProperty(`--control-h-${key}`);
+}
+/**
+ * `applyMfTheme` ile AYNI hesaplamayı yapar ama runtime'da uygulamak yerine
+ * yapıştırılabilir bir `{ selector } { ... }` bloğu (varsayılan `:root`)
+ * döner — tüketici build-time'da kendi `styles.css`'ine ekleyebilir (docs
+ * sitesindeki tema özelleştiricinin "CSS'i kopyala" düğmesi bunu kullanır).
+ * `roles.*` İÇİN de (runtime'daki AYNI `light-dark()` deseni) tek blokla
+ * hem açık hem koyu mod kapsanır, AYRI bir `.dark` bloğu GEREKMEZ. `ramps.
+ * primary` KISMİ verilip 400/500/600/700'ün TAMAMI yoksa `--mf-accent-fill`
+ * vb. satırlar (canlı DOM'dan O ANKİ değeri okuyamadığı için) ATLANIR — bu
+ * durumda `applyMfTheme`'i (runtime, `resolvedPrimaryRamp` ile tamamlar)
+ * tercih edin. `neutralTint` BURADA desteklenmez — mevcut nötr değerleri
+ * okumak için canlı bir DOM/`getComputedStyle` gerekir, statik bir string
+ * üretici bunu bilemez (tüketici tint'i kendi `applyMfTheme()` çağrısıyla
+ * runtime'da uygulamalı).
+ */
+function exportMfThemeCss(config, options) {
+    const selector = options?.selector ?? ':root';
+    const lines = [`${selector} {`];
+    if (config.ramps?.primary) {
+        const ramp = config.ramps.primary;
+        for (const step of RAMP_STEPS) {
+            const hex = ramp[step];
+            if (hex)
+                lines.push(`  --color-primary-${step}: ${hex};`);
+        }
+        const roleLines = accentRoleLines(ramp);
+        if (roleLines) {
+            for (const [prop, value] of roleLines)
+                lines.push(`  ${prop}: ${value};`);
+        }
+    }
+    else if (config.accent) {
+        const ramp = createAccentRamp(config.accent);
+        for (const step of RAMP_STEPS) {
+            lines.push(`  --color-primary-${step}: ${ramp[step]};`);
+        }
+        const roleLines = accentRoleLines(ramp);
+        if (roleLines) {
+            for (const [prop, value] of roleLines)
+                lines.push(`  ${prop}: ${value};`);
+        }
+    }
+    for (const tone of OTHER_RAMP_TONES) {
+        const override = config.ramps?.[tone];
+        if (!override)
+            continue;
+        for (const step of RAMP_STEPS) {
+            const hex = override[step];
+            if (hex)
+                lines.push(`  --color-${tone}-${step}: ${hex};`);
+        }
+    }
+    if (config.ramps?.neutral) {
+        for (const step of NEUTRAL_STEPS) {
+            const hex = config.ramps.neutral[step];
+            if (hex)
+                lines.push(`  --color-neutral-${step}: ${hex};`);
+        }
+    }
+    if (config.roles) {
+        for (const key of MF_ROLE_TOKENS) {
+            const value = roleLightDarkValue(config.roles.light?.[key], config.roles.dark?.[key]);
+            if (value)
+                lines.push(`  --mf-${key}: ${value};`);
+        }
+    }
+    if (config.fonts?.sans)
+        lines.push(`  --font-sans: ${config.fonts.sans};`);
+    if (config.fonts?.display)
+        lines.push(`  --font-display: ${config.fonts.display};`);
+    if (config.fonts?.mono)
+        lines.push(`  --font-mono: ${config.fonts.mono};`);
+    if (config.radiusScale) {
+        const px = RADIUS_PX[config.radiusScale];
+        for (const [key, value] of Object.entries(px)) {
+            lines.push(`  --radius-${key}: ${value}px;`);
+        }
+    }
+    if (config.radius) {
+        for (const [key, value] of Object.entries(config.radius)) {
+            if (value)
+                lines.push(`  --radius-${key}: ${value};`);
+        }
+    }
+    if (config.density) {
+        for (const [prop, value] of densityLines(config.density))
+            lines.push(`  ${prop}: ${value};`);
+    }
+    lines.push('}');
+    return lines.join('\n');
+}
+
+/** `color.css`'in `--mf-surface-inverse`/`-fill-fg` literallerinde tekrarlanan "mürekkep" tonu — `X-fill-fg` HER ZAMAN bunun ya da beyazın arasından seçilir (bkz. rol katmanı). */
+const INK = '#04110d';
+const AA_NORMAL_TEXT = 4.5;
+function checkHex(path, value, issues) {
+    if (value === undefined)
+        return;
+    if (!isValidHex(value)) {
+        issues.push({
+            path,
+            message: `"${value}" geçerli bir #rgb/#rrggbb hex değeri değil.`,
+            severity: 'error',
+        });
+    }
+}
+/**
+ * `MfThemeJson`'ı iki açıdan denetler:
+ *
+ * 1. Her hex alanının GEÇERLİ bir `#rgb`/`#rrggbb` olup olmadığı.
+ * 2. `ramps.<tone>['600']` (kitin "dolu blok" LIGHT çapası, bkz. `color.css`
+ *    rol katmanı doktrini — `X-fill-fg` her zaman `#ffffff` ya da mürekkep
+ *    `#04110d`'den seçilir) verilen bir ton için NE beyaz NE mürekkep
+ *    üstünde WCAG AA (4.5:1) sağlayan okunaklı bir metin rengi bulunup
+ *    bulunamadığı — ikisi de başarısızsa bu basamak "çok orta tonlu", dolu
+ *    blok üstünde okunaklı metin GARANTİSİ yok demektir. `accent` (`ramps.
+ *    primary`/`createAccentRamp` + `fgOnAccent`) BU KONTROLE İHTİYAÇ
+ *    DUYMAZ — `pickForeground` HER ZAMAN iki adaydan daha iyisini seçtiği
+ *    için kontrast garantisi İNŞA GEREĞİ var (bkz. `apply.ts`
+ *    `accentRoleLines`).
+ *
+ * Şema/yapı hatalarını (bilinmeyen alan vb.) DENETLEMEZ — TypeScript
+ * derleme zamanında zaten yakalar; `MfThemeJson` harici bir kaynaktan (ör.
+ * `JSON.parse`, bir tema dosyası yükleme formu) geliyorsa bu fonksiyon
+ * SADECE değer-düzeyi sorunları (geçersiz hex, düşük kontrast) yakalar.
+ */
+function validateMfTheme(theme) {
+    const issues = [];
+    checkHex('accent', theme.accent ?? undefined, issues);
+    for (const tone of MF_RAMP_TONES) {
+        const ramp = theme.ramps?.[tone];
+        if (!ramp)
+            continue;
+        for (const step of RAMP_STEPS) {
+            checkHex(`ramps.${tone}.${step}`, ramp[step], issues);
+        }
+        if (tone === 'primary')
+            continue;
+        const fill = ramp['600'];
+        if (!fill || !isValidHex(fill))
+            continue;
+        const onWhite = contrastRatio(fill, '#ffffff');
+        const onInk = contrastRatio(fill, INK);
+        if (onWhite < AA_NORMAL_TEXT && onInk < AA_NORMAL_TEXT) {
+            issues.push({
+                path: `ramps.${tone}.600`,
+                message: `"${fill}" dolu blok üstünde ne beyaz (${onWhite.toFixed(2)}:1) ne mürekkep (${onInk.toFixed(2)}:1) WCAG AA (4.5:1) sağlıyor — daha koyu/açık bir basamak seçin.`,
+                severity: 'warning',
+            });
+        }
+    }
+    if (theme.ramps?.neutral) {
+        for (const [step, value] of Object.entries(theme.ramps.neutral)) {
+            checkHex(`ramps.neutral.${step}`, value, issues);
+        }
+    }
+    if (theme.roles) {
+        for (const [mode, values] of Object.entries(theme.roles)) {
+            if (!values)
+                continue;
+            for (const [key, value] of Object.entries(values)) {
+                checkHex(`roles.${mode}.${key}`, value, issues);
+            }
+        }
+    }
+    return issues;
+}
+
+/**
+ * `MfThemeJson`'ın JSON Schema (2020-12) tanımı — IDE otomatik tamamlama
+ * (`"$schema"` alanı) ve harici doğrulayıcılar (ajv vb.) için. Düz bir JS
+ * nesnesi olarak dışa açılıyor — kitin sıfır çalışma zamanı bağımlılığı
+ * ilkesi gereği (bkz. `projects/ui-kit/README.md` "Bağımlılık politikası")
+ * hiçbir şema doğrulama KÜTÜPHANESİ KULLANILMIYOR/GEREKTİRİLMİYOR; asıl
+ * DEĞER-düzeyi doğrulama (geçerli hex, WCAG kontrastı) `validateMfTheme()`
+ * (bkz. `validate.ts`) tarafında, bu şema SADECE YAPISAL/tip doğrulaması
+ * içindir — `@mesgflow/email-core`'un `EMAIL_DOCUMENT_JSON_SCHEMA`'sıyla
+ * AYNI desen.
+ */
+const HEX_PATTERN = '^#([0-9a-fA-F]{3}|[0-9a-fA-F]{6})$';
+const HEX = { type: 'string', pattern: HEX_PATTERN };
+const RAMP_11 = {
+    type: 'object',
+    additionalProperties: false,
+    properties: {
+        '50': HEX,
+        '100': HEX,
+        '200': HEX,
+        '300': HEX,
+        '400': HEX,
+        '500': HEX,
+        '600': HEX,
+        '700': HEX,
+        '800': HEX,
+        '900': HEX,
+        '950': HEX,
+    },
+};
+const RAMP_13 = {
+    type: 'object',
+    additionalProperties: false,
+    properties: {
+        ...RAMP_11.properties,
+        '850': HEX,
+        '975': HEX,
+    },
+};
+const ROLE_TOKEN_NAMES = [
+    'surface',
+    'chrome',
+    'overlay',
+    'surface-inverse',
+    'glass',
+    'fg',
+    'fg-muted',
+    'fg-on-accent',
+    'fg-inverse',
+    'hairline',
+    'neutral-fill',
+    'neutral-fill-hover',
+    'neutral-fill-fg',
+    'success-fill-fg',
+    'warning-fill-fg',
+    'danger-fill-fg',
+    'info-fill-fg',
+    'help-fill-fg',
+    'chart-1',
+    'chart-2',
+    'chart-3',
+    'chart-4',
+    'chart-5',
+    'chart-6',
+    'chart-7',
+    'chart-8',
+    'chart-other',
+];
+const ROLE_MAP = {
+    type: 'object',
+    additionalProperties: false,
+    properties: Object.fromEntries(ROLE_TOKEN_NAMES.map((key) => [key, { type: 'string' }])),
+};
+const MF_THEME_JSON_SCHEMA = {
+    $schema: 'https://json-schema.org/draft/2020-12/schema',
+    $id: 'https://hurdenizyener.github.io/mesgflow-ui-kit/schema/theme.json',
+    title: 'MesgFlow ui theme',
+    description: 'Tam beyaz etiket tema tanımı — applyMfTheme()/exportMfThemeCss()e verilir. Her alan opsiyonel.',
+    type: 'object',
+    additionalProperties: false,
+    properties: {
+        $schema: { type: 'string' },
+        name: { type: 'string' },
+        accent: { oneOf: [HEX, { type: 'null' }] },
+        radiusScale: { enum: ['sharp', 'default', 'soft'] },
+        density: { enum: ['compact', 'default', 'comfortable'] },
+        neutralTint: { enum: ['cool', 'neutral', 'warm'] },
+        ramps: {
+            type: 'object',
+            additionalProperties: false,
+            properties: {
+                primary: RAMP_11,
+                success: RAMP_11,
+                warning: RAMP_11,
+                danger: RAMP_11,
+                info: RAMP_11,
+                help: RAMP_11,
+                neutral: RAMP_13,
+            },
+        },
+        roles: {
+            type: 'object',
+            additionalProperties: false,
+            properties: {
+                light: ROLE_MAP,
+                dark: ROLE_MAP,
+            },
+        },
+        fonts: {
+            type: 'object',
+            additionalProperties: false,
+            properties: {
+                sans: { type: 'string' },
+                display: { type: 'string' },
+                mono: { type: 'string' },
+            },
+        },
+        radius: {
+            type: 'object',
+            additionalProperties: false,
+            properties: {
+                xs: { type: 'string' },
+                sm: { type: 'string' },
+                md: { type: 'string' },
+                lg: { type: 'string' },
+                xl: { type: 'string' },
+            },
+        },
+    },
+};
+
+/**
+ * Tema değişikliğini (`.dark` toggle'ı, `applyMfTheme()` çağrısı vb.) View
+ * Transitions API ile yumuşak bir çapraz geçişe sarar — sayfa her token'ı
+ * tek tek `transition` etmek yerine eski/yeni ekran görüntüsü arasında TEK
+ * bir kompozit geçiş yapar (yüzlerce `transition-colors`'ın aynı anda ve
+ * farklı sürelerle kayması yerine).
+ *
+ * `update` HER ZAMAN çağrılır — sadece NASIL çağrıldığı değişir. Geçiş
+ * atlanıp `update` doğrudan (senkron) çalıştırılır:
+ * - SSR / `document` yok,
+ * - tarayıcı `startViewTransition` desteklemiyor,
+ * - kullanıcı `prefers-reduced-motion: reduce` istiyor.
+ *
+ * ```ts
+ * transitionMfTheme(() => document.documentElement.classList.toggle('dark'));
+ * ```
+ */
+function transitionMfTheme(update) {
+    if (typeof document === 'undefined') {
+        update();
+        return;
+    }
+    const reducedMotion = typeof matchMedia !== 'undefined' && matchMedia('(prefers-reduced-motion: reduce)').matches;
+    // DOM lib tipi bunu zorunlu sayar, ama Firefox < 144 ve jsdom'da YOK.
+    if (typeof document.startViewTransition !== 'function' || reducedMotion) {
+        update();
+        return;
+    }
+    document.startViewTransition(update);
+}
+
+const MF_COLOR_MODE_CONFIG = new InjectionToken('mesgflow.color-mode-config', { factory: () => ({ storageKey: 'mf-color-mode', defaultMode: 'system' }) });
+/** `providers: [provideMfColorMode({ storageKey: 'app-theme' })]` */
+function provideMfColorMode(config) {
+    return {
+        provide: MF_COLOR_MODE_CONFIG,
+        useValue: { storageKey: 'mf-color-mode', defaultMode: 'system', ...config },
+    };
+}
+const DARK_QUERY = '(prefers-color-scheme: dark)';
+/**
+ * Açık / koyu / sistem modu — kitin TEK kaynağı (`<mf-theme-switcher>` bunu kullanır; kendi
+ * anahtarınızla da doğrudan enjekte edebilirsiniz).
+ *
+ * - `mode`: kullanıcının seçimi (kalıcı, `localStorage`); `resolved`: gerçekte uygulanan
+ *   `light`/`dark` — `system`'de işletim sistemi tercihini CANLI izler.
+ * - Uygulama: kökte `.dark` sınıfı + `color-scheme` (yerel kaydırma çubukları ve form
+ *   kontrolleri de temaya uyar); değişim `transitionMfTheme` ile yumuşak (azaltılmış harekette
+ *   anında). Sınıf zaten doğruysa (ilk boyamada `colorModeInitScript` uyguladı) dokunulmaz.
+ * - Depolama/`matchMedia` yoksa (gizli pencere, SSR, test) sessizce varsayılana düşer.
+ */
+class MfColorModeService {
+    config = inject(MF_COLOR_MODE_CONFIG);
+    document = inject(DOCUMENT);
+    media = this.document.defaultView?.matchMedia?.(DARK_QUERY) ?? null;
+    systemDark = signal(this.media?.matches ?? false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "systemDark" }] : /* istanbul ignore next */ []));
+    mode = signal(this.readStored(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "mode" }] : /* istanbul ignore next */ []));
+    resolved = computed(() => {
+        const mode = this.mode();
+        return mode === 'system' ? (this.systemDark() ? 'dark' : 'light') : mode;
+    }, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "resolved" }] : /* istanbul ignore next */ []));
+    constructor() {
+        const onChange = (event) => this.systemDark.set(event.matches);
+        this.media?.addEventListener?.('change', onChange);
+        inject(DestroyRef).onDestroy(() => this.media?.removeEventListener?.('change', onChange));
+        effect(() => {
+            const mode = this.mode();
+            try {
+                this.document.defaultView?.localStorage.setItem(this.config.storageKey, mode);
+            }
+            catch {
+                // Gizli pencere / engelli depolama — yalnızca bu oturumda.
+            }
+        });
+        effect(() => {
+            const dark = this.resolved() === 'dark';
+            const root = this.document.documentElement;
+            root.style.colorScheme = dark ? 'dark' : 'light';
+            if (root.classList.contains('dark') === dark)
+                return;
+            transitionMfTheme(() => root.classList.toggle('dark', dark));
+        });
+    }
+    setMode(mode) {
+        this.mode.set(mode);
+    }
+    /** light → dark → system → light (tek düğmeli değiştirici için). */
+    cycle() {
+        const order = ['light', 'dark', 'system'];
+        this.mode.set(order[(order.indexOf(this.mode()) + 1) % order.length]);
+    }
+    readStored() {
+        try {
+            const stored = this.document.defaultView?.localStorage.getItem(this.config.storageKey);
+            if (stored === 'light' || stored === 'dark' || stored === 'system')
+                return stored;
+        }
+        catch {
+            // Depolama erişilemez.
+        }
+        return this.config.defaultMode;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: MfColorModeService, deps: [], target: i0.ɵɵFactoryTarget.Service });
+    static ɵprov = i0.ɵɵngDeclareService({ minVersion: "22.0.0", version: "22.1.6", ngImport: i0, type: MfColorModeService });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.1.6", ngImport: i0, type: MfColorModeService, decorators: [{
+            type: Service
+        }], ctorParameters: () => [] });
+/**
+ * `index.html` `<head>`'ine satır içi konacak betik — Angular yüklenmeden ÖNCE `.dark`'ı uygular,
+ * koyu modda beyaz flaşı önler. Anahtar ve varsayılan servisle AYNI olmalı.
+ *
+ * ```html
+ * <script>/* colorModeInitScript('app-theme') çıktısı *\/</script>
+ * ```
+ */
+function colorModeInitScript(storageKey = 'mf-color-mode', defaultMode = 'system') {
+    return (`(function(){try{var m=localStorage.getItem(${JSON.stringify(storageKey)})||${JSON.stringify(defaultMode)};` +
+        `var d=m==='dark'||(m==='system'&&matchMedia('${DARK_QUERY}').matches);` +
+        `var r=document.documentElement;r.classList.toggle('dark',d);r.style.colorScheme=d?'dark':'light';}catch(e){}})();`);
+}
+
+/*
+ * `@mesgflow/ui-kit/theming` — ikincil giriş noktası. `i18n/tr` gibi BİLEREK
+ * birincil barrel'dan (`projects/ui-kit/index.ts`) re-export EDİLMEZ: tema
+ * özelleştirme her tüketicinin ihtiyacı değil, opt-in kalmalı (bkz.
+ * `docs/tr/mimari.md` "i18n mimarisi"nin aynı gerekçesi).
+ *
+ * `color-math.ts` BİLEREK burada export EDİLMEZ — iç uygulama detayı
+ * (hex<->OKLCH), public API `ramp.ts`/`apply.ts`'in üstünde.
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { MF_COLOR_MODE_CONFIG, MF_NEUTRAL_RAMP_STEPS, MF_RAMP_TONES, MF_ROLE_TOKENS, MF_THEME_JSON_SCHEMA, MfColorModeService, RAMP_STEPS, accentContrastWithWhite, applyMfTheme, colorModeInitScript, createAccentRamp, exportMfThemeCss, fgOnAccent, provideMfColorMode, resetMfTheme, transitionMfTheme, validateMfTheme };
+//# sourceMappingURL=mesgflow-ui-kit-theming.mjs.map