@moontra/moonui 6.24.0 → 6.26.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@moontra/moonui",
-  "version": "6.24.0",
+  "version": "6.26.0",
   "description": "Premium React component library with modern design and customization",
   "author": "MoonUI",
   "license": "MIT",

package/src/__tests__/issue-544-kontrast.test.tsx

@@ -49,21 +49,21 @@ import * as path from 'path'
 import { Badge } from '../components/ui/badge'
 import { Button } from '../components/ui/button'
 
-const PAKET = path.resolve(__dirname, '..')
+const PKG = path.resolve(__dirname, '..')
 const DEPO = path.resolve(__dirname, '../../../..')
-const tokens = fs.readFileSync(path.join(PAKET, 'styles/tokens.css'), 'utf8')
-const badgeSrc = fs.readFileSync(path.join(PAKET, 'components/ui/badge.tsx'), 'utf8')
-const buttonSrc = fs.readFileSync(path.join(PAKET, 'components/ui/button.tsx'), 'utf8')
+const tokens = fs.readFileSync(path.join(PKG, 'styles/tokens.css'), 'utf8')
+const badgeSrc = fs.readFileSync(path.join(PKG, 'components/ui/badge.tsx'), 'utf8')
+const buttonSrc = fs.readFileSync(path.join(PKG, 'components/ui/button.tsx'), 'utf8')
 
 type RGB = [number, number, number]
 type Blok = 'light' | 'dark'
 
 // ─── Renk aritmetiği (switch-variant-contrast.test.tsx ile birebir aynı yöntem) ───
 
-function tokenOku(ad: string, blok: Blok): string | null {
-  const kaynak =
+function tokenOku(name: string, blok: Blok): string | null {
+  const source =
     blok === 'dark' ? tokens.slice(tokens.indexOf('.dark')) : tokens.slice(0, tokens.indexOf('.dark'))
-  return kaynak.match(new RegExp(`--${ad}:\\s*([^;]+);`))?.[1].trim() ?? null
+  return source.match(new RegExp(`--${name}:\\s*([^;]+);`))?.[1].trim() ?? null
 }
 
 function hslToRgb(h: number, s: number, l: number): RGB {
@@ -88,12 +88,12 @@ const rgbTokenRgb = (v: string): RGB => {
   return [p[0], p[1], p[2]]
 }
 /** Semantik token'ın ilgili temadaki değeri — `.dark` ezmesi YOKSA light'a düşer */
-const semantikRgb = (ad: string, blok: Blok): RGB =>
-  hslTokenRgb(tokenOku(ad, blok) ?? tokenOku(ad, 'light')!)
+const semanticRgb = (name: string, blok: Blok): RGB =>
+  hslTokenRgb(tokenOku(name, blok) ?? tokenOku(name, 'light')!)
 /** Skala kademeleri tema-BAĞIMSIZ: `.dark` bloğu onları ezmiyor (preset yorumu) */
-const skalaRgb = (ad: string): RGB => rgbTokenRgb(tokenOku(ad, 'light')!)
+const scaleRgb = (name: string): RGB => rgbTokenRgb(tokenOku(name, 'light')!)
 
-function bagilParlaklik([r, g, b]: RGB): number {
+function relativeLuminance([r, g, b]: RGB): number {
   const c = (v: number) => {
     const x = v / 255
     return x <= 0.03928 ? x / 12.92 : Math.pow((x + 0.055) / 1.055, 2.4)
@@ -101,8 +101,8 @@ function bagilParlaklik([r, g, b]: RGB): number {
   return 0.2126 * c(r) + 0.7152 * c(g) + 0.0722 * c(b)
 }
 function kontrast(a: RGB, b: RGB): number {
-  const la = bagilParlaklik(a)
-  const lb = bagilParlaklik(b)
+  const la = relativeLuminance(a)
+  const lb = relativeLuminance(b)
   const [hi, lo] = la > lb ? [la, lb] : [lb, la]
   return (hi + 0.05) / (lo + 0.05)
 }
@@ -114,94 +114,94 @@ const hex = ([r, g, b]: RGB): string =>
   '#' + [r, g, b].map((x) => Math.round(x).toString(16).padStart(2, '0')).join('')
 
 // ─── Zeminler — HER ÖLÇÜMDE ADIYLA ANILIR ───────────────────────────────────────
-const BEYAZ: RGB = [255, 255, 255]
+const WHITE: RGB = [255, 255, 255]
 /** Docs kabuğunda ölçülen GERÇEK koyu kart (#284/#368/#448/#454 konvansiyonu) */
-const KART_GERCEK_DARK: RGB = [17, 24, 39]
+const CARD_ACTUAL_DARK: RGB = [17, 24, 39]
 
-const AA_METIN = 4.5
-const AA_METIN_DISI = 3.0
+const AA_TEXT = 4.5
+const AA_NON_TEXT = 3.0
 
 // ─── Varyant sınıf dizgesini KAYNAKTAN çöz (renkler VARSAYILMAZ) ────────────────
 
 /** cva `variant` bloğundaki dizi biçimli varyant girdisini birleşik sınıf dizgesi olarak ver */
-function varyantSinifi(kaynak: string, varyant: string): string {
-  const m = kaynak.match(new RegExp(`\\n\\s*${varyant}:\\s*\\[([\\s\\S]*?)\\n\\s*\\]`))
-  if (!m) throw new Error(`${varyant} varyantı bulunamadı`)
+function variantClass(source: string, variantVal: string): string {
+  const m = source.match(new RegExp(`\\n\\s*${variantVal}:\\s*\\[([\\s\\S]*?)\\n\\s*\\]`))
+  if (!m) throw new Error(`${variantVal} varyantı bulunamadı`)
   return (m[1].match(/"([^"]*)"/g) ?? []).map((s) => s.slice(1, -1)).join(' ')
 }
 
 /** `bg-error-600` / `bg-error` / `bg-error/90` / `text-white` → RGB (alfa varsa zemine bindirir) */
-function sinifRengi(sinif: string, blok: Blok, zemin: RGB): RGB {
+function classColor(cls: string, blok: Blok, background: RGB): RGB {
   // ⚠️ `+` ŞART: `dark:hover:bg-error-700` gibi ÇOK önekli sınıflarda tek tur
   // soyma yetmez ve sınıf "çözülemez" diye PATLAR — testi kontrast ölçmeden
   // kırmızı gösterir (yanlış sebeple kırmızı = geçersiz ölçüm).
-  const g = sinif.replace(/^(?:(?:dark|hover|active|focus-visible|group-hover):)+/, '')
+  const g = cls.replace(/^(?:(?:dark|hover|active|focus-visible|group-hover):)+/, '')
   const m = g.match(/^(?:bg|text|border|ring)-([a-z-]+?)(?:-(\d{2,3}))?(?:\/(\d{1,3}))?$/)
-  if (!m) throw new Error(`çözülemeyen sınıf: ${sinif}`)
-  const [, ad, kademe, alfa] = m
-  if (ad === 'white') return alfa ? komposit(BEYAZ, zemin, Number(alfa) / 100) : BEYAZ
-  const taban = kademe ? skalaRgb(`${ad}-${kademe}`) : semantikRgb(ad, blok)
-  return alfa ? komposit(taban, zemin, Number(alfa) / 100) : taban
+  if (!m) throw new Error(`çözülemeyen sınıf: ${cls}`)
+  const [, name, kademe, alfa] = m
+  if (name === 'white') return alfa ? komposit(WHITE, background, Number(alfa) / 100) : WHITE
+  const base = kademe ? scaleRgb(`${name}-${kademe}`) : semanticRgb(name, blok)
+  return alfa ? komposit(base, background, Number(alfa) / 100) : base
 }
 
 /** Bir varyantın ilgili temadaki ETKİN dolgusu — `dark:` önekli sınıf dark'ta kazanır */
-function dolgu(kaynak: string, varyant: string, blok: Blok, zemin: RGB, onek = ''): RGB {
-  const adaylar = varyantSinifi(kaynak, varyant)
+function fill(source: string, variantVal: string, blok: Blok, background: RGB, onek = ''): RGB {
+  const adaylar = variantClass(source, variantVal)
     .split(/\s+/)
     .filter((s) => new RegExp(`^(?:dark:)?${onek}bg-`).test(s))
   const dark = adaylar.find((s) => s.startsWith('dark:'))
   const light = adaylar.find((s) => !s.startsWith('dark:'))
   const secilen = blok === 'dark' ? (dark ?? light) : light
-  if (!secilen) throw new Error(`${varyant}/${blok}${onek ? ` (${onek})` : ''}: dolgu sınıfı yok`)
-  return sinifRengi(secilen, blok, zemin)
+  if (!secilen) throw new Error(`${variantVal}/${blok}${onek ? ` (${onek})` : ''}: dolgu sınıfı yok`)
+  return classColor(secilen, blok, background)
 }
 
 /** Varyantın metin rengi (`text-*`), `bg-*` HARİÇ */
-function metin(kaynak: string, varyant: string, blok: Blok, zemin: RGB): RGB {
-  const adaylar = varyantSinifi(kaynak, varyant)
+function text(source: string, variantVal: string, blok: Blok, background: RGB): RGB {
+  const adaylar = variantClass(source, variantVal)
     .split(/\s+/)
     .filter((s) => /^(?:dark:)?text-/.test(s))
   const dark = adaylar.find((s) => s.startsWith('dark:'))
   const light = adaylar.find((s) => !s.startsWith('dark:'))
   const secilen = blok === 'dark' ? (dark ?? light) : light
-  if (!secilen) throw new Error(`${varyant}/${blok}: metin sınıfı yok`)
-  return sinifRengi(secilen, blok, zemin)
+  if (!secilen) throw new Error(`${variantVal}/${blok}: metin sınıfı yok`)
+  return classColor(secilen, blok, background)
 }
 
 /** Dolgu opaksa zeminden bağımsızdır; yarı saydamsa zemine göre değişir → ikisini de dene */
-function dolguMetinOrani(kaynak: string, varyant: string, blok: Blok, zemin: RGB) {
-  const d = dolgu(kaynak, varyant, blok, zemin)
-  return { oran: kontrast(d, metin(kaynak, varyant, blok, d)), dolguHex: hex(d) }
+function fillTextRatio(source: string, variantVal: string, blok: Blok, background: RGB) {
+  const d = fill(source, variantVal, blok, background)
+  return { oran: kontrast(d, text(source, variantVal, blok, d)), fillHex: hex(d) }
 }
 
 // ════════════════════════════════════════════════════════════════════════════════
 describe('#544/#545 — hesaplayıcı çapaları (sessiz-yeşil koruması)', () => {
   it('ÇAPA: tokens.css `--info-subtle` çifti belgelenen ~9.5 oranını veriyor', () => {
-    const oran = kontrast(semantikRgb('info-subtle', 'light'), semantikRgb('info-subtle-foreground', 'light'))
+    const oran = kontrast(semanticRgb('info-subtle', 'light'), semanticRgb('info-subtle-foreground', 'light'))
     expect(oran).toBeGreaterThan(9.3)
     expect(oran).toBeLessThan(9.7)
   })
 
   it('ÇAPA: siyah↔beyaz tam 21.00', () => {
-    expect(kontrast([0, 0, 0], BEYAZ)).toBeCloseTo(21, 2)
+    expect(kontrast([0, 0, 0], WHITE)).toBeCloseTo(21, 2)
   })
 
   it('ÇAPA: hesaplayıcı, issue #544 gövdesindeki GERÇEK TARAYICI ölçümlerini üretiyor', () => {
     // Bu tutmuyorsa aşağıdaki tüm oranlar anlamsızdır.
     // Badge light: zemin YOK (opak dolgu) — çift doğrudan #ffffff / #ef4343
-    expect(kontrast(semantikRgb('error', 'light'), BEYAZ)).toBeCloseTo(3.78, 2)
+    expect(kontrast(semanticRgb('error', 'light'), WHITE)).toBeCloseTo(3.78, 2)
     // Button dark: #f8fafc / #ef4343
     expect(
-      kontrast(semantikRgb('destructive', 'dark'), semantikRgb('destructive-foreground', 'dark'))
+      kontrast(semanticRgb('destructive', 'dark'), semanticRgb('destructive-foreground', 'dark'))
     ).toBeCloseTo(3.61, 2)
   })
 
   it('NEGATİF KONTROL: eşik mantığı ayrım yapıyor — eski değerler GERÇEKTEN kalıyor', () => {
     // "Her şey yeşil" tuzağına karşı: ölçüm başarısızlığı tespit edebiliyor mu?
-    expect(kontrast(semantikRgb('error', 'light'), BEYAZ)).toBeLessThan(AA_METIN)
-    expect(kontrast(skalaRgb('error-500'), BEYAZ)).toBeLessThan(AA_METIN)
+    expect(kontrast(semanticRgb('error', 'light'), WHITE)).toBeLessThan(AA_TEXT)
+    expect(kontrast(scaleRgb('error-500'), WHITE)).toBeLessThan(AA_TEXT)
     // ve gerçekten geçen bir değeri geçmiş sayıyor
-    expect(kontrast(skalaRgb('error-700'), BEYAZ)).toBeGreaterThan(AA_METIN)
+    expect(kontrast(scaleRgb('error-700'), WHITE)).toBeGreaterThan(AA_TEXT)
   })
 
   it('ÇAPA: skala token’ları tema-BAĞIMSIZ — `.dark` bloğu onları EZMİYOR', () => {
@@ -219,8 +219,8 @@ describe('#544 — KAPSAM KİLİDİ: token değerleri DEĞİŞMEDİ', () => {
     ['error', 'light', '0 84% 60%'],
     ['destructive', 'light', '0 84.2% 48%'],
     ['destructive', 'dark', '0 84% 60%'],
-  ])('--%s (%s) sabit: %s', (ad, blok, beklenen) => {
-    expect(tokenOku(ad, blok as Blok)).toBe(beklenen)
+  ])('--%s (%s) sabit: %s', (name, blok, expected) => {
+    expect(tokenOku(name, blok as Blok)).toBe(expected)
   })
 
   it('`--error` hâlâ `.dark` bloğunda EZİLMİYOR (#424/#442’nin kök-neden dayanağı)', () => {
@@ -232,27 +232,27 @@ describe('#544 — KABUL KRİTERİ: Badge destructive dolgusu ≥ 4.5:1', () =>
   // Badge `text-white` taşır. Dolgu bugün YARI SAYDAM (`dark:bg-error/90`) olduğu
   // için dark ölçümü ZEMİNE bağlı — iki gerçek zeminde birden ölçülür.
   it('LIGHT — zemin YOK (opak dolgu), çift: dolgu ↔ text-white', () => {
-    const { oran, dolguHex } = dolguMetinOrani(badgeSrc, 'destructive', 'light', BEYAZ)
-    expect(`${dolguHex}: ${oran >= AA_METIN ? 'geçer' : oran.toFixed(2)}`).toBe(`${dolguHex}: geçer`)
+    const { oran, fillHex } = fillTextRatio(badgeSrc, 'destructive', 'light', WHITE)
+    expect(`${fillHex}: ${oran >= AA_TEXT ? 'geçer' : oran.toFixed(2)}`).toBe(`${fillHex}: geçer`)
   })
 
   it.each([
     ['koyu sayfa --background', 'dark'],
     ['gerçek koyu kart #111827', 'kart'],
-  ])('DARK — zemin: %s', (zeminAdi, tur) => {
-    const zemin = tur === 'kart' ? KART_GERCEK_DARK : semantikRgb('background', 'dark')
-    const { oran, dolguHex } = dolguMetinOrani(badgeSrc, 'destructive', 'dark', zemin)
-    expect(`[${zeminAdi}] ${dolguHex}: ${oran >= AA_METIN ? 'geçer' : oran.toFixed(2)}`).toBe(
-      `[${zeminAdi}] ${dolguHex}: geçer`
+  ])('DARK — zemin: %s', (backgroundName, tur) => {
+    const background = tur === 'kart' ? CARD_ACTUAL_DARK : semanticRgb('background', 'dark')
+    const { oran, fillHex } = fillTextRatio(badgeSrc, 'destructive', 'dark', background)
+    expect(`[${backgroundName}] ${fillHex}: ${oran >= AA_TEXT ? 'geçer' : oran.toFixed(2)}`).toBe(
+      `[${backgroundName}] ${fillHex}: geçer`
     )
   })
 
   it('HOVER durumu da AA taşıyor (düzeltme tek duruma sıkışmasın)', () => {
     for (const blok of ['light', 'dark'] as const) {
-      const zemin = blok === 'dark' ? KART_GERCEK_DARK : BEYAZ
-      const d = dolgu(badgeSrc, 'destructive', blok, zemin, 'hover:')
-      const oran = kontrast(d, metin(badgeSrc, 'destructive', blok, d))
-      expect(`${blok} hover ${hex(d)}: ${oran >= AA_METIN ? 'geçer' : oran.toFixed(2)}`).toBe(
+      const background = blok === 'dark' ? CARD_ACTUAL_DARK : WHITE
+      const d = fill(badgeSrc, 'destructive', blok, background, 'hover:')
+      const oran = kontrast(d, text(badgeSrc, 'destructive', blok, d))
+      expect(`${blok} hover ${hex(d)}: ${oran >= AA_TEXT ? 'geçer' : oran.toFixed(2)}`).toBe(
         `${blok} hover ${hex(d)}: geçer`
       )
     }
@@ -264,22 +264,22 @@ describe('#544 — KABUL KRİTERİ: Button destructive dolgusu ≥ 4.5:1', () =>
     // Kırmızı fazda BİLEREK yeşil kalan test. İki işi var:
     // (1) düzeneğin topluca kırmızı olmadığını gösterir,
     // (2) #442'nin "geçen temayı oynatma, regresyon yüzeyini sıfır tut" kuralını kilitler.
-    const { oran } = dolguMetinOrani(buttonSrc, 'destructive', 'light', BEYAZ)
-    expect(oran).toBeGreaterThanOrEqual(AA_METIN)
+    const { oran } = fillTextRatio(buttonSrc, 'destructive', 'light', WHITE)
+    expect(oran).toBeGreaterThanOrEqual(AA_TEXT)
     expect(oran).toBeCloseTo(4.66, 1)
-    expect(varyantSinifi(buttonSrc, 'destructive')).toContain('bg-destructive text-destructive-foreground')
+    expect(variantClass(buttonSrc, 'destructive')).toContain('bg-destructive text-destructive-foreground')
   })
 
   it('DARK — zemin YOK (opak dolgu), çift: dolgu ↔ text-destructive-foreground', () => {
-    const { oran, dolguHex } = dolguMetinOrani(buttonSrc, 'destructive', 'dark', KART_GERCEK_DARK)
-    expect(`${dolguHex}: ${oran >= AA_METIN ? 'geçer' : oran.toFixed(2)}`).toBe(`${dolguHex}: geçer`)
+    const { oran, fillHex } = fillTextRatio(buttonSrc, 'destructive', 'dark', CARD_ACTUAL_DARK)
+    expect(`${fillHex}: ${oran >= AA_TEXT ? 'geçer' : oran.toFixed(2)}`).toBe(`${fillHex}: geçer`)
   })
 
   it('HOVER + ACTIVE durumları da AA taşıyor (dark)', () => {
     for (const onek of ['hover:', 'active:']) {
-      const d = dolgu(buttonSrc, 'destructive', 'dark', KART_GERCEK_DARK, onek)
-      const oran = kontrast(d, metin(buttonSrc, 'destructive', 'dark', d))
-      expect(`${onek}${hex(d)}: ${oran >= AA_METIN ? 'geçer' : oran.toFixed(2)}`).toBe(
+      const d = fill(buttonSrc, 'destructive', 'dark', CARD_ACTUAL_DARK, onek)
+      const oran = kontrast(d, text(buttonSrc, 'destructive', 'dark', d))
+      expect(`${onek}${hex(d)}: ${oran >= AA_TEXT ? 'geçer' : oran.toFixed(2)}`).toBe(
         `${onek}${hex(d)}: geçer`
       )
     }
@@ -296,8 +296,8 @@ describe('#544 — kimlik korunumu: “uyarı kırmızısı” algısı kayboldu
       const h = mx === r ? ((g - b) / d) % 6 : mx === g ? (b - r) / d + 2 : (r - g) / d + 4
       return Math.round((h * 60 + 360) % 360)
     }
-    expect(hue(dolgu(badgeSrc, 'destructive', 'light', BEYAZ))).toBe(0)
-    expect(hue(dolgu(buttonSrc, 'destructive', 'dark', KART_GERCEK_DARK))).toBe(0)
+    expect(hue(fill(badgeSrc, 'destructive', 'light', WHITE))).toBe(0)
+    expect(hue(fill(buttonSrc, 'destructive', 'dark', CARD_ACTUAL_DARK))).toBe(0)
   })
 })
 
@@ -306,43 +306,43 @@ describe('#544 — REGRESYON BEKÇİSİ: dokunulmayan varyantlar bit-bit aynı',
   // düzeltme kapsam dışına taşmış demektir.
   it('Badge: destructive DIŞINDAKİ varyant dizgeleri değişmedi', () => {
     // NOT: Badge'in VARSAYILAN varyantının adı `default` değil `primary`.
-    expect(varyantSinifi(badgeSrc, 'primary')).toContain('bg-primary text-primary-foreground')
-    expect(varyantSinifi(badgeSrc, 'secondary')).toContain('bg-secondary text-secondary-foreground')
-    expect(varyantSinifi(badgeSrc, 'outline')).toContain('bg-transparent text-foreground')
-    expect(varyantSinifi(badgeSrc, 'success')).toContain('bg-success text-success-foreground')
-    expect(varyantSinifi(badgeSrc, 'warning')).toContain('bg-warning text-warning-foreground')
+    expect(variantClass(badgeSrc, 'primary')).toContain('bg-primary text-primary-foreground')
+    expect(variantClass(badgeSrc, 'secondary')).toContain('bg-secondary text-secondary-foreground')
+    expect(variantClass(badgeSrc, 'outline')).toContain('bg-transparent text-foreground')
+    expect(variantClass(badgeSrc, 'success')).toContain('bg-success text-success-foreground')
+    expect(variantClass(badgeSrc, 'warning')).toContain('bg-warning text-warning-foreground')
   })
 
   it('Button: destructive DIŞINDAKİ varyant dizgeleri değişmedi', () => {
-    expect(varyantSinifi(buttonSrc, 'ghost')).toContain('text-gray-700')
-    expect(varyantSinifi(buttonSrc, 'success')).toContain('bg-success text-success-foreground')
-    expect(varyantSinifi(buttonSrc, 'outline')).toContain('border border-input')
+    expect(variantClass(buttonSrc, 'ghost')).toContain('text-gray-700')
+    expect(variantClass(buttonSrc, 'success')).toContain('bg-success text-success-foreground')
+    expect(variantClass(buttonSrc, 'outline')).toContain('border border-input')
   })
 
   it('KAPSAM KİLİDİ: `--error`/`--destructive` DEFAULT token’ının diğer tüketicileri etkilenmedi', () => {
     // Token değişmediği için `bg-error` yazan 35 başka yüzey ve `text-destructive`
     // yazan 94 yüzey bit-bit aynı kalır. Switch bunun canlı kanıtı.
-    const switchSrc = fs.readFileSync(path.join(PAKET, 'components/ui/switch.tsx'), 'utf8')
+    const switchSrc = fs.readFileSync(path.join(PKG, 'components/ui/switch.tsx'), 'utf8')
     expect(switchSrc).toContain('data-[state=checked]:bg-error')
     expect(switchSrc).not.toContain('bg-error-600')
   })
 })
 
 describe('#544 — render sözleşmesi (<Badge /> / <Button />)', () => {
-  const sinif = (jsx: React.ReactElement, sec: string) => {
+  const cls = (jsx: React.ReactElement, sec: string) => {
     const { container } = render(jsx)
     return (container.querySelector(sec) as HTMLElement).className
   }
 
   it('Badge destructive ARTIK yarı saydam `dark:bg-error/90` taşımıyor', () => {
     // Yarı saydam dolgu, kontrastı ZEMİNE bağımlı kılıyordu (gerçek kartta 4.43).
-    const c = sinif(<Badge variant="destructive">x</Badge>, 'div')
+    const c = cls(<Badge variant="destructive">x</Badge>, 'div')
     expect(c).not.toContain('dark:bg-error/90')
     expect(c).toContain('text-white')
   })
 
   it('Button destructive dark dolgusu opak bir skala kademesi', () => {
-    const c = sinif(<Button variant="destructive">x</Button>, 'button')
+    const c = cls(<Button variant="destructive">x</Button>, 'button')
     expect(c).not.toContain('dark:bg-destructive ')
     expect(c).toContain('text-destructive-foreground')
   })
@@ -350,11 +350,11 @@ describe('#544 — render sözleşmesi (<Badge /> / <Button />)', () => {
   it('TEK dolgu utility’si per durum — Tailwind sıra belirsizliği YOK', () => {
     // `dark:bg-destructive dark:bg-error-600` ikisi birden yazılırsa hangisinin
     // kazanacağı Tailwind'in İÇ sıralamasına kalır (sınıf dizgesi sırasına DEĞİL).
-    for (const [kaynak, ad] of [[badgeSrc, 'badge'], [buttonSrc, 'button']] as const) {
-      const siniflar = varyantSinifi(kaynak, 'destructive').split(/\s+/)
+    for (const [source, name] of [[badgeSrc, 'badge'], [buttonSrc, 'button']] as const) {
+      const classNames = variantClass(source, 'destructive').split(/\s+/)
       for (const onek of ['', 'dark:', 'hover:', 'dark:hover:', 'active:', 'dark:active:']) {
-        const n = siniflar.filter((s) => new RegExp(`^${onek}bg-(?!.*shadow)`).test(s)).length
-        expect(`${ad} "${onek}bg-*" adedi: ${n}`).toBe(`${ad} "${onek}bg-*" adedi: ${n > 1 ? 1 : n}`)
+        const n = classNames.filter((s) => new RegExp(`^${onek}bg-(?!.*shadow)`).test(s)).length
+        expect(`${name} "${onek}bg-*" adedi: ${n}`).toBe(`${name} "${onek}bg-*" adedi: ${n > 1 ? 1 : n}`)
       }
     }
   })
@@ -376,11 +376,11 @@ const CONFIGLER = {
   'error-boundary': 'src/docs-config/error-boundary.config.tsx',
   'pinch-zoom': 'src/docs-config/pinch-zoom.config.tsx',
 } as const
-const oku = (rel: string) => fs.readFileSync(path.join(DEPO, rel), 'utf8')
+const read = (rel: string) => fs.readFileSync(path.join(DEPO, rel), 'utf8')
 
 /** Bir sınıfın kaç kez geçtiği — "kaç düğüm" iddiasını SAYIYLA kilitler */
-const sayac = (src: string, sinif: string) =>
-  (src.match(new RegExp(`(?<![\\w-])${sinif.replace(/[/]/g, '\\/')}(?![\\w-])`, 'g')) ?? []).length
+const counter = (src: string, cls: string) =>
+  (src.match(new RegExp(`(?<![\\w-])${cls.replace(/[/]/g, '\\/')}(?![\\w-])`, 'g')) ?? []).length
 
 describe('#545 — hesaplayıcı çapası: issue’nun tarayıcı ölçümleri birebir üretiliyor', () => {
   it('Tailwind paleti beklenen sürümden ve beklenen hex’lerde', () => {
@@ -392,33 +392,33 @@ describe('#545 — hesaplayıcı çapası: issue’nun tarayıcı ölçümleri b
   })
 
   it('altı ripple butonu: issue’daki 1.91-3.95 aralığı yeniden üretiliyor (zemin: opak dolgu ↔ #ffffff metin)', () => {
-    const beklenen: Record<string, number> = {
+    const expected: Record<string, number> = {
       yellow: 1.92, green: 2.28, cyan: 2.43, blue: 3.68, red: 3.76, purple: 3.96,
     }
-    for (const [aile, oran] of Object.entries(beklenen)) {
-      expect(kontrast(hx(twColors[aile][500]), BEYAZ)).toBeCloseTo(oran, 1)
+    for (const [aile, oran] of Object.entries(expected)) {
+      expect(kontrast(hx(twColors[aile][500]), WHITE)).toBeCloseTo(oran, 1)
     }
   })
 
   it('ZEMİN DERSİ: `text-red-600` BEYAZA karşı geçer, GERÇEK zemininde (bg-red-50) KALIR', () => {
     // Issue'nun kaydettiği ölçüm hatası tam buydu; burası onu kalıcı kılar.
-    expect(kontrast(hx(twColors.red[600]), BEYAZ)).toBeCloseTo(4.83, 2)
+    expect(kontrast(hx(twColors.red[600]), WHITE)).toBeCloseTo(4.83, 2)
     expect(kontrast(hx(twColors.red[600]), hx(twColors.red[50]))).toBeCloseTo(4.41, 2)
-    expect(kontrast(hx(twColors.red[600]), hx(twColors.red[50]))).toBeLessThan(AA_METIN)
+    expect(kontrast(hx(twColors.red[600]), hx(twColors.red[50]))).toBeLessThan(AA_TEXT)
   })
 
   it('`text-green-600` beyaz zeminde 3.29 (issue’nun hiç ölçmediği kalem)', () => {
-    expect(kontrast(hx(twColors.green[600]), BEYAZ)).toBeCloseTo(3.30, 1)
+    expect(kontrast(hx(twColors.green[600]), WHITE)).toBeCloseTo(3.30, 1)
   })
 
   it('semantik skala sınıfları ÖLÜ DEĞİL — preset onları açıyor ve hex’ler ham palete eşit', () => {
     // #307/#529 ölü-sınıf tuzağı: `text-success-700` CSS üretmiyorsa düzeltme
     // sessizce hiçbir şey yapmaz. Token tanımı + ham palet eşitliği ikisi de kanıt.
-    const preset = fs.readFileSync(path.resolve(PAKET, '../tailwind-preset.js'), 'utf8')
+    const preset = fs.readFileSync(path.resolve(PKG, '../tailwind-preset.js'), 'utf8')
     for (const [aile, ham] of [['error', 'red'], ['success', 'green'], ['warning', 'yellow']] as const) {
       for (const k of [400, 700]) {
         expect(preset).toMatch(new RegExp(`\\b${aile}:\\s*\\{[^}]*\\b${k}:\\s*"rgb\\(var\\(--${aile}-${k}\\)`, 's'))
-        expect(hex(skalaRgb(`${aile}-${k}`))).toBe(twColors[ham][k])
+        expect(hex(scaleRgb(`${aile}-${k}`))).toBe(twColors[ham][k])
       }
     }
   })
@@ -426,11 +426,11 @@ describe('#545 — hesaplayıcı çapası: issue’nun tarayıcı ölçümleri b
 
 describe('#545 — KABUL KRİTERİ: kalan ham literal SAYISI sıfır', () => {
   it('click-animations: altı `bg-{aile}-500` ripple butonu KALMADI (bugün 6)', () => {
-    const src = oku(CONFIGLER['click-animations'])
-    const kalan = ['blue', 'purple', 'green', 'red', 'yellow', 'cyan']
-      .map((a) => [a, sayac(src, `bg-${a}-500`)] as const)
+    const src = read(CONFIGLER['click-animations'])
+    const remaining = ['blue', 'purple', 'green', 'red', 'yellow', 'cyan']
+      .map((a) => [a, counter(src, `bg-${a}-500`)] as const)
       .filter(([, n]) => n > 0)
-    expect(kalan).toEqual([])
+    expect(remaining).toEqual([])
   })
 
   it('error-boundary: METİN rolündeki `-600` tonları KALMADI (ikonlar bilerek DURUYOR)', () => {
@@ -443,23 +443,23 @@ describe('#545 — KABUL KRİTERİ: kalan ham literal SAYISI sıfır', () => {
      * Bunları -700'e çekmek dark'ı 2.76'ya düşürüp EŞİĞİN ALTINA indirirdi — yani
      * bir ihlali başkasıyla takas ederdi. Metin rolündekiler (4.5 eşiği) dönüştü.
      */
-    const src = oku(CONFIGLER['error-boundary'])
-    expect(sayac(src, 'text-yellow-600')).toBe(0) // hem ikon hem metin ihlaldi (2.84)
+    const src = read(CONFIGLER['error-boundary'])
+    expect(counter(src, 'text-yellow-600')).toBe(0) // hem ikon hem metin ihlaldi (2.84)
     // Kalan `-600`lar YALNIZ ikon üzerinde olmalı
-    const kalanKirmizi = [...src.matchAll(/text-red-600/g)].map((m) =>
+    const remainingRed = [...src.matchAll(/text-red-600/g)].map((m) =>
       src.slice(Math.max(0, m.index! - 90), m.index!)
     )
-    expect(kalanKirmizi).toHaveLength(2) // :109 canlı + :475 code ikizi
-    for (const once of kalanKirmizi) expect(once).toContain('<AlertTriangle')
-    const kalanYesil = [...src.matchAll(/text-green-600/g)].map((m) =>
+    expect(remainingRed).toHaveLength(2) // :109 canlı + :475 code ikizi
+    for (const entry of remainingRed) expect(entry).toContain('<AlertTriangle')
+    const remainingGreen = [...src.matchAll(/text-green-600/g)].map((m) =>
       src.slice(Math.max(0, m.index! - 90), m.index!)
     )
-    expect(kalanYesil).toHaveLength(1) // :158 ikon
-    expect(kalanYesil[0]).toContain('<CheckCircle')
+    expect(remainingGreen).toHaveLength(1) // :158 ikon
+    expect(remainingGreen[0]).toContain('<CheckCircle')
   })
 
   it('pinch-zoom: `text-green-600` KALMADI (bugün 2 — biri canlı JSX, biri code bloğu)', () => {
-    expect(sayac(oku(CONFIGLER['pinch-zoom']), 'text-green-600')).toBe(0)
+    expect(counter(read(CONFIGLER['pinch-zoom']), 'text-green-600')).toBe(0)
   })
 
   it('moonui-pro error-boundary: dark ikizi OLMAYAN `text-red-600` KALMADI (latent kalem)', () => {
@@ -473,12 +473,12 @@ describe('#545 — KABUL KRİTERİ: kalan ham literal SAYISI sıfır', () => {
 
 describe('#545 — KABUL KRİTERİ: yeni tonlar İKİ TEMADA da eşiği geçiyor', () => {
   it('altı ripple butonu ≥4.5 (zemin: opak dolgu ↔ #ffffff metin, tema-bağımsız)', () => {
-    const src = oku(CONFIGLER['click-animations'])
+    const src = read(CONFIGLER['click-animations'])
     for (const aile of ['blue', 'purple', 'green', 'red', 'yellow', 'cyan']) {
       const m = src.match(new RegExp(`bg-${aile}-(\\d{3})`))
       expect(`${aile}: sınıf var`).toBe(m ? `${aile}: sınıf var` : `${aile}: sınıf YOK`)
-      const oran = kontrast(hx(twColors[aile][Number(m![1])]), BEYAZ)
-      expect(`${aile}-${m![1]}: ${oran >= AA_METIN ? 'geçer' : oran.toFixed(2)}`).toBe(
+      const oran = kontrast(hx(twColors[aile][Number(m![1])]), WHITE)
+      expect(`${aile}-${m![1]}: ${oran >= AA_TEXT ? 'geçer' : oran.toFixed(2)}`).toBe(
         `${aile}-${m![1]}: geçer`
       )
     }
@@ -492,29 +492,29 @@ describe('#545 — KABUL KRİTERİ: yeni tonlar İKİ TEMADA da eşiği geçiyor
       [CONFIGLER['error-boundary'], 'text-warning-700'],
       [CONFIGLER['pinch-zoom'], 'text-success-700'],
     ]
-    for (const [rel, sinif] of hedefler) {
-      const src = oku(rel)
-      const n = sayac(src, sinif)
-      expect(`${rel} ${sinif} adedi > 0`).toBe(`${rel} ${sinif} adedi > ${n > 0 ? 0 : 'YOK'}`)
+    for (const [rel, cls] of hedefler) {
+      const src = read(rel)
+      const n = counter(src, cls)
+      expect(`${rel} ${cls} adedi > 0`).toBe(`${rel} ${cls} adedi > ${n > 0 ? 0 : 'YOK'}`)
       // her geçtiği yerde hemen ardından dark ikizi gelmeli
-      const ikizsiz = [...src.matchAll(new RegExp(`${sinif}(?![\\w-])(\\s+dark:text-\\S+)?`, 'g'))]
+      const ikizsiz = [...src.matchAll(new RegExp(`${cls}(?![\\w-])(\\s+dark:text-\\S+)?`, 'g'))]
         .filter((m) => !m[1])
-      expect(`${rel} ${sinif} ikizsiz: ${ikizsiz.length}`).toBe(`${rel} ${sinif} ikizsiz: 0`)
+      expect(`${rel} ${cls} ikizsiz: ${ikizsiz.length}`).toBe(`${rel} ${cls} ikizsiz: 0`)
     }
   })
 
   it('yeni tonların ölçülen oranları — zemin ADIYLA', () => {
-    const olcumler: Array<[string, RGB, RGB, number]> = [
-      ['error-700 · zemin bg-red-50 #fef2f2', hx(twColors.red[700]), hx(twColors.red[50]), AA_METIN],
-      ['success-700 · zemin kart #ffffff', hx(twColors.green[700]), BEYAZ, AA_METIN],
-      ['success-400 · zemin koyu kart #111827', hx(twColors.green[400]), KART_GERCEK_DARK, AA_METIN],
-      ['warning-700 · zemin bg-yellow-50 #fefce8', hx(twColors.yellow[700]), hx(twColors.yellow[50]), AA_METIN],
-      ['warning-400 · zemin koyu kart #111827', hx(twColors.yellow[400]), KART_GERCEK_DARK, AA_METIN],
-      ['error-400 · zemin koyu kart #111827', hx(twColors.red[400]), KART_GERCEK_DARK, AA_METIN],
+    const measurements: Array<[string, RGB, RGB, number]> = [
+      ['error-700 · zemin bg-red-50 #fef2f2', hx(twColors.red[700]), hx(twColors.red[50]), AA_TEXT],
+      ['success-700 · zemin kart #ffffff', hx(twColors.green[700]), WHITE, AA_TEXT],
+      ['success-400 · zemin koyu kart #111827', hx(twColors.green[400]), CARD_ACTUAL_DARK, AA_TEXT],
+      ['warning-700 · zemin bg-yellow-50 #fefce8', hx(twColors.yellow[700]), hx(twColors.yellow[50]), AA_TEXT],
+      ['warning-400 · zemin koyu kart #111827', hx(twColors.yellow[400]), CARD_ACTUAL_DARK, AA_TEXT],
+      ['error-400 · zemin koyu kart #111827', hx(twColors.red[400]), CARD_ACTUAL_DARK, AA_TEXT],
     ]
-    for (const [ad, renk, zemin, esik] of olcumler) {
-      const o = kontrast(renk, zemin)
-      expect(`${ad}: ${o >= esik ? 'geçer' : o.toFixed(2)}`).toBe(`${ad}: geçer`)
+    for (const [name, color, background, threshold] of measurements) {
+      const o = kontrast(color, background)
+      expect(`${name}: ${o >= threshold ? 'geçer' : o.toFixed(2)}`).toBe(`${name}: geçer`)
     }
   })
 })
@@ -525,17 +525,17 @@ describe('#545 — `code:` ↔ canlı `component:` TUTARLILIĞI', () => {
     ((src.slice(0, idx).match(/`/g) ?? []).length) % 2 === 1
 
   it('error-boundary: düzeltilen sınıf HEM canlı JSX’te HEM code bloğunda var', () => {
-    const src = oku(CONFIGLER['error-boundary'])
-    for (const sinif of ['text-error-700', 'text-warning-700']) {
-      const yerler = [...src.matchAll(new RegExp(`${sinif}(?![\\w-])`, 'g'))].map((m) => m.index!)
+    const src = read(CONFIGLER['error-boundary'])
+    for (const cls of ['text-error-700', 'text-warning-700']) {
+      const yerler = [...src.matchAll(new RegExp(`${cls}(?![\\w-])`, 'g'))].map((m) => m.index!)
       const canli = yerler.filter((i) => !codeBlogundaMi(src, i)).length
       const kod = yerler.filter((i) => codeBlogundaMi(src, i)).length
-      expect(`${sinif} canlı:${canli > 0} kod:${kod > 0}`).toBe(`${sinif} canlı:true kod:true`)
+      expect(`${cls} canlı:${canli > 0} kod:${kod > 0}`).toBe(`${cls} canlı:true kod:true`)
     }
   })
 
   it('pinch-zoom: iki `In Stock` (canlı + code) AYNI sınıfı taşıyor', () => {
-    const src = oku(CONFIGLER['pinch-zoom'])
+    const src = read(CONFIGLER['pinch-zoom'])
     const yerler = [...src.matchAll(/<span className="([^"]*)">In Stock<\/span>/g)].map((m) => m[1])
     expect(yerler).toHaveLength(2)
     expect(new Set(yerler).size).toBe(1)
@@ -545,20 +545,20 @@ describe('#545 — `code:` ↔ canlı `component:` TUTARLILIĞI', () => {
 
 describe('#545 — REGRESYON BEKÇİSİ: kapsam dışına taşma yok', () => {
   it('geçen tonlara DOKUNULMADI (ölçülen: eşiğin üstündeler)', () => {
-    const src = oku(CONFIGLER['error-boundary'])
+    const src = read(CONFIGLER['error-boundary'])
     // -800 başlıklar (#991b1b, bg-red-50 üstünde 7.6) korunur
-    expect(sayac(src, 'text-red-800')).toBeGreaterThan(0)
+    expect(counter(src, 'text-red-800')).toBeGreaterThan(0)
     // ikon rolündeki `text-red-600` (bg-red-50 üstünde 4.41 ≥ 3.0) metin eşiğine
     // tabi DEĞİL; dönüştürmemek bilinçli bir karardır
-    expect(kontrast(hx(twColors.red[600]), hx(twColors.red[50]))).toBeGreaterThanOrEqual(AA_METIN_DISI)
+    expect(kontrast(hx(twColors.red[600]), hx(twColors.red[50]))).toBeGreaterThanOrEqual(AA_NON_TEXT)
   })
 
   it('vokabüler dönüşümü PİKSEL-BEDAVA: `error-300` = ham `red-300`', () => {
     // `dark:text-red-300` → `dark:text-error-300` görünümü DEĞİŞTİRMEZ; yalnız
     // ham paletten semantik skalaya geçer. Eşit olmasalardı sessiz bir renk
     // kayması olurdu — bu yüzden ölçülür, varsayılmaz.
-    expect(hex(skalaRgb('error-300'))).toBe(twColors.red[300])
-    expect(sayac(oku(CONFIGLER['error-boundary']), 'dark:text-error-300')).toBeGreaterThan(0)
+    expect(hex(scaleRgb('error-300'))).toBe(twColors.red[300])
+    expect(counter(read(CONFIGLER['error-boundary']), 'dark:text-error-300')).toBeGreaterThan(0)
   })
 
   it('moonui-pro: dark ikizi OLAN ikon (`:256`) bilerek DOKUNULMADI', () => {
@@ -578,24 +578,32 @@ describe('#545 — REGRESYON BEKÇİSİ: kapsam dışına taşma yok', () => {
      * bırakıldı; burası onları DONDURUR (yeni ihlal eklenirse kırmızı olur)
      * ve click-animations'ın sıfırlandığını ayrıca kilitler.
      */
-    const TABAN: Record<string, number> = {
+    const BASELINE: Record<string, number> = {
       'bounce-effect.config.tsx': 16,
       'button.config.tsx': 1,
       'confetti.config.tsx': 1,
-      'focus-transitions.config.tsx': 6,
-      'glow-card.config.tsx': 1,
-      'slider.config.tsx': 4,
+      // focus-transitions.config.tsx: 6 → 0 (#663 — "Focus Colors" örneğindeki altı
+      //   düğme beyaz metni `-500` tonuna basıyordu: blue 3.68 · purple 3.96 ·
+      //   green 2.28 · red 3.76 · yellow 1.92 · cyan 2.43. Hue korunarak ton
+      //   koyulaştırıldı (blue/purple/red -600, green/cyan -700); sarı hiçbir tonda
+      //   beyazla 4.5'i geçmediği için tek istisna olarak polarite ters çevrildi
+      //   (`bg-yellow-400 text-gray-900`, 11.90:1). Hepsi tema-değişmez.)
+      // glow-card.config.tsx: 1 → 0 (#594 — `bg-red-500 text-white` 3.76:1 idi,
+      //   `bg-destructive` + `text-destructive-foreground` ile 4.66:1'e çekildi)
+      // slider.config.tsx: 4 → 0 (#661-15 — değer rozetleri: `bg-red-500`+beyaz
+      //   3.78:1 → `bg-red-600` 4.83:1; `bg-orange-500`+beyaz 2.80:1 →
+      //   `bg-orange-700` 5.18:1. İkisi de tema-bağımsız: rozet kendi zeminini taşır.)
       'sparkles.config.tsx': 2,
       // click-animations.config.tsx: 6 → 0 (bu issue'nun kapsamı)
     }
-    const dizin = path.join(DEPO, 'src/docs-config')
+    const dir = path.join(DEPO, 'src/docs-config')
     const bugun: Record<string, number> = {}
-    for (const f of fs.readdirSync(dizin).filter((x) => x.endsWith('.config.tsx'))) {
-      const src = fs.readFileSync(path.join(dizin, f), 'utf8')
+    for (const f of fs.readdirSync(dir).filter((x) => x.endsWith('.config.tsx'))) {
+      const src = fs.readFileSync(path.join(dir, f), 'utf8')
       const n = (src.match(/bg-(?:blue|purple|green|red|yellow|cyan|orange|pink|indigo)-500 text-white/g) ?? [])
         .length
       if (n > 0) bugun[f] = n
     }
-    expect(bugun).toEqual(TABAN)
+    expect(bugun).toEqual(BASELINE)
   })
 })