@moontra/moonui 6.16.0 → 6.18.0

package/package.json

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

package/src/components/ui/__tests__/dark-token-contrast.test.ts

@@ -0,0 +1,162 @@
+/**
+ * #368 — koyu tema token kontrast değişmezleri.
+ *
+ * BULGU: `--success` için yapılmış çift-rol denetimi (zemin mi metin mi?) üç
+ * token için atlanmıştı; üçü de koyu temada ölçülebilir biçimde kırıktı:
+ *
+ *   1. `--destructive` (0 63% 31%) metin rolünde gerçek kart zemini #111827
+ *      üstünde 1.79:1 veriyordu (AA 4.5 ister) → hata metinleri okunmuyordu.
+ *      Düzeltme: 0 84% 60% (= `:root --error`) → 4.69:1.
+ *   2. `--muted` (223 47% 11%) kart zemininden 1.01:1 ile ayrışmıyordu →
+ *      Skeleton barları görünmüyordu. Düzeltme: L 11→22 → 1.31:1 (aynı hue/sat).
+ *      Zincir etkisi: `--muted-foreground` 56.9% yeni muted üstünde 4.06'ya
+ *      düşecekti → 62% ile 4.80.
+ *   3. `--primary` vs `--foreground` 1.19:1 — BİLİNÇLİ bırakıldı: token'ın esas
+ *      rolü zemin (buton 19.81 taşır); vurgu ayrımı renk-dışı sinyallerle ve
+ *      `--primary-subtle(-foreground)` (#354) ile verilir. Buradaki testler o
+ *      kararın DAYANDIĞI değişmezleri kilitler.
+ *
+ * Kabul kriteri ayrıca: AÇIK tema değerleri DEĞİŞMEMELİ — ayrı blokta sabitlenir.
+ *
+ * Hesap yöntemi primary-subtle-token.test.ts ile birebir aynıdır (WCAG 2.x
+ * bağıl parlaklık); oradaki "hesaplayıcı doğru mu?" çapası burada da var.
+ */
+import * as fs from 'fs'
+import * as path from 'path'
+
+const KOK = path.resolve(__dirname, '../../..')
+const tokens = fs.readFileSync(path.join(KOK, 'styles/tokens.css'), 'utf8')
+
+/**
+ * Docs kabuğunda ölçülen GERÇEK kart zemini (#111827 = rgb(17,24,39)).
+ * #284 konvansiyonu: kenarlık/metin pratikte `--background` (4%) üstünde değil
+ * bu yüzeyde duruyor; kontrast gerçek zemine göre ölçülür (tokens.css --input notu).
+ */
+const KART_GERCEK: [number, number, number] = [17, 24, 39]
+
+/** "H S% L%" biçimindeki token değerini oku (light = :root, dark = .dark bloğu) */
+function tokenOku(ad: string, blok: 'light' | 'dark'): string | null {
+  const kaynak =
+    blok === 'dark'
+      ? tokens.slice(tokens.indexOf('.dark'))
+      : tokens.slice(0, tokens.indexOf('.dark'))
+  return kaynak.match(new RegExp(`--${ad}:\\s*([^;]+);`))?.[1].trim() ?? null
+}
+
+function hslToRgb(h: number, s: number, l: number): [number, number, number] {
+  h /= 360
+  s /= 100
+  l /= 100
+  const f = (n: number) => {
+    const k = (n + h * 12) % 12
+    const a = s * Math.min(l, 1 - l)
+    return l - a * Math.max(-1, Math.min(k - 3, Math.min(9 - k, 1)))
+  }
+  return [Math.round(255 * f(0)), Math.round(255 * f(8)), Math.round(255 * f(4))]
+}
+
+function bagilParlaklik([r, g, b]: [number, number, number]): 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)
+  }
+  return 0.2126 * c(r) + 0.7152 * c(g) + 0.0722 * c(b)
+}
+
+function rgbKontrast(a: [number, number, number], b: [number, number, number]): number {
+  const la = bagilParlaklik(a)
+  const lb = bagilParlaklik(b)
+  const [hi, lo] = la > lb ? [la, lb] : [lb, la]
+  return (hi + 0.05) / (lo + 0.05)
+}
+
+const ayrıştır = (v: string): [number, number, number] => {
+  const [h, s, l] = v.split(/\s+/).map((x) => parseFloat(x))
+  return hslToRgb(h, s, l)
+}
+
+/** İki token (veya token + sabit RGB yüzey) arasındaki kontrast oranı */
+function kontrast(a: string, b: string | [number, number, number]): number {
+  return rgbKontrast(ayrıştır(a), Array.isArray(b) ? b : ayrıştır(b))
+}
+
+const dark = (ad: string) => tokenOku(ad, 'dark')!
+
+describe('#368 koyu tema token kontrastları', () => {
+  it('hesaplayıcı DOĞRU — bilinen bir çift belgelenen oranı veriyor', () => {
+    // Sessiz-yeşil koruması: `--info-subtle` çifti tokens.css'te 9.52:1 diye
+    // belgelenmiş; hesaplayıcı bozulursa bu çapa kırmızı olur.
+    const oran = kontrast(tokenOku('info-subtle', 'light')!, tokenOku('info-subtle-foreground', 'light')!)
+    expect(oran).toBeGreaterThan(9.3)
+    expect(oran).toBeLessThan(9.7)
+  })
+
+  describe('--destructive: koyu temada METİN rolü (asıl bulgu, eski değer 1.79)', () => {
+    it('gerçek kart zemini (#111827) üstünde AA geçiyor (>=4.5)', () => {
+      expect(kontrast(dark('destructive'), KART_GERCEK)).toBeGreaterThanOrEqual(4.5)
+    })
+
+    it('--background üstünde AA geçiyor (>=4.5)', () => {
+      expect(kontrast(dark('destructive'), dark('background'))).toBeGreaterThanOrEqual(4.5)
+    })
+
+    it('hata kenarlığı rolünde 1.4.11 eşiğini geçiyor (>=3.0, eski değer 1.80)', () => {
+      expect(kontrast(dark('destructive'), KART_GERCEK)).toBeGreaterThanOrEqual(3.0)
+    })
+
+    it('dolgu rolü belgelenen trade-off tabanının altına DÜŞMÜYOR (fg ile >=3.0)', () => {
+      // Çift-rol uzlaşması: metin rolü AA alınırken dolgu rolü (bg-destructive +
+      // beyaz foreground) 3.61'e iner. 3.0 büyük-metin/UI tabanıdır; biri
+      // destructive'i daha da açarsa buton metni tamamen çökemesin diye kilitli.
+      expect(kontrast(dark('destructive'), dark('destructive-foreground'))).toBeGreaterThanOrEqual(3.0)
+    })
+  })
+
+  describe('--muted: koyu temada dekoratif YÜZEY rolü (eski değer kartla 1.01)', () => {
+    it('gerçek kart zemininden ayrışıyor (>=1.3 — Skeleton görünürlüğü)', () => {
+      expect(kontrast(dark('muted'), KART_GERCEK)).toBeGreaterThanOrEqual(1.3)
+    })
+
+    it('--background üstünde ayrışıyor (>=1.3)', () => {
+      expect(kontrast(dark('muted'), dark('background'))).toBeGreaterThanOrEqual(1.3)
+    })
+
+    it('AŞIRI açılmamış — subtle doğası korunuyor (kartla <=2.0)', () => {
+      // Muted "belli belirsiz" bir yüzeydir; 2.0 üstü artık vurgulu bir bloktur.
+      expect(kontrast(dark('muted'), KART_GERCEK)).toBeLessThanOrEqual(2.0)
+    })
+
+    it('--muted-foreground yeni muted zemini üstünde AA geçiyor (>=4.5, #284 deseni)', () => {
+      expect(kontrast(dark('muted-foreground'), dark('muted'))).toBeGreaterThanOrEqual(4.5)
+    })
+
+    it('--muted-foreground kart ve --background üstünde AA korunuyor (>=4.5)', () => {
+      expect(kontrast(dark('muted-foreground'), KART_GERCEK)).toBeGreaterThanOrEqual(4.5)
+      expect(kontrast(dark('muted-foreground'), dark('background'))).toBeGreaterThanOrEqual(4.5)
+    })
+  })
+
+  describe('--primary: koyu temada ZEMİN rolü esas (bilinçli near-white, #368 kararı)', () => {
+    it('buton bileşimi (bg-primary + primary-foreground) AA geçiyor (>=4.5)', () => {
+      // Bu değişmez, "--primary'yi maviye çekme" önerilerine karşı kararın
+      // dayanağıdır: zemin rolü 19.81 taşıyor; değer değişecekse bu test bilinçli
+      // olarak güncellenmelidir.
+      expect(kontrast(dark('primary'), dark('primary-foreground'))).toBeGreaterThanOrEqual(4.5)
+    })
+
+    it('vurgu metni alternatifi canlı: --primary-subtle-foreground kart üstünde AA (>=4.5)', () => {
+      expect(kontrast(dark('primary-subtle-foreground'), KART_GERCEK)).toBeGreaterThanOrEqual(4.5)
+    })
+  })
+
+  describe('kabul kriteri: AÇIK tema değerleri DEĞİŞMEDİ', () => {
+    it.each([
+      ['destructive', '0 84.2% 48%'],
+      ['muted', '217.2 32.6% 96%'],
+      ['muted-foreground', '215.4 16.3% 45%'],
+      ['primary', '217.2 91.2% 51%'],
+    ])('--%s açık temada sabit: %s', (ad, beklenen) => {
+      expect(tokenOku(ad, 'light')).toBe(beklenen)
+    })
+  })
+})

package/src/components/ui/__tests__/data-table-basic.test.tsx

@@ -1,4 +1,5 @@
 import { render, screen, fireEvent, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
 import { DataTableBasic } from '../data-table-basic';
 import { ColumnDef } from '@tanstack/react-table';
 import '@testing-library/jest-dom';
@@ -269,3 +270,111 @@ describe('DataTableBasic', () => {
     expect(container.querySelector('.custom-class')).toBeInTheDocument();
   });
 });
+
+/**
+ * #366 — sıralanabilir başlığın erişilebilirliği (#321'in `table.tsx` testinin ikizi).
+ *
+ * ÖNCESİ: sıralanabilir başlık yalnız `<div onClick>` idi — dosyada `aria-sort`,
+ * `tabIndex` ve `onKeyDown` grep'i 0. Klavye kullanıcısı sıralayamıyor, durum
+ * yardımcı teknolojiye hiç ulaşmıyordu. Aynı desen pro DataTable'da #291/#345,
+ * free `table.tsx`'te #321 ile kapatılmıştı; bu üçüncü dosyaydı.
+ *
+ * Çözüm table.tsx'in div-role taklidi DEĞİL, pro DataTable'ın #345 deseni:
+ * başlık içeriği flexRender ile TÜKETİCİDEN gelir (`createSortableHeader` zaten
+ * Button render eder) — sarmalayıcıya role="button" vermek buton-içinde-buton
+ * (nested-interactive) üretirdi. Bu yüzden <th aria-sort> + GERÇEK ikon
+ * <button> (native Tab + Enter/Space + focus-visible ring).
+ */
+describe('#366 — sıralama erişilebilirliği', () => {
+  it('sıralanabilir başlık aria-sort taşır ve none → ascending → descending → none döngüsünü izler', () => {
+    render(<DataTableBasic columns={mockColumns} data={mockData} />);
+
+    const nameHeader = screen.getByRole('columnheader', { name: /name/i });
+    expect(nameHeader).toHaveAttribute('aria-sort', 'none');
+
+    const sortButton = screen.getByRole('button', { name: 'Sort by Name' });
+
+    fireEvent.click(sortButton);
+    expect(nameHeader).toHaveAttribute('aria-sort', 'ascending');
+
+    fireEvent.click(sortButton);
+    expect(nameHeader).toHaveAttribute('aria-sort', 'descending');
+
+    fireEvent.click(sortButton);
+    expect(nameHeader).toHaveAttribute('aria-sort', 'none');
+  });
+
+  it('KLAVYEYLE sıralanabilir — gerçek <button>, Enter ve Space ile satır sırası değişir', async () => {
+    const user = userEvent.setup();
+    render(<DataTableBasic columns={mockColumns} data={mockData} />);
+
+    const sortButton = screen.getByRole('button', { name: 'Sort by Name' });
+
+    // Native button: Tab ile odaklanabilir (tabIndex taklidine gerek yok)
+    sortButton.focus();
+    expect(sortButton).toHaveFocus();
+
+    // Enter → ascending: alfabetik ilk kayıt Bob Johnson öne gelir
+    await user.keyboard('{Enter}');
+    let rows = screen.getAllByRole('row');
+    expect(rows[1]).toHaveTextContent('Bob Johnson');
+    expect(
+      screen.getByRole('columnheader', { name: /name/i })
+    ).toHaveAttribute('aria-sort', 'ascending');
+
+    // Space → descending: alfabetik son kayıt John Doe öne gelir
+    await user.keyboard(' ');
+    rows = screen.getAllByRole('row');
+    expect(rows[1]).toHaveTextContent('John Doe');
+    expect(
+      screen.getByRole('columnheader', { name: /name/i })
+    ).toHaveAttribute('aria-sort', 'descending');
+  });
+
+  it('enableSorting=false iken aria-sort HİÇ basılmaz ve sıralama butonu yoktur', () => {
+    render(
+      <DataTableBasic columns={mockColumns} data={mockData} enableSorting={false} />
+    );
+
+    for (const header of screen.getAllByRole('columnheader')) {
+      expect(header).not.toHaveAttribute('aria-sort');
+    }
+    expect(
+      screen.queryByRole('button', { name: /^Sort by/ })
+    ).not.toBeInTheDocument();
+  });
+
+  it('kolon düzeyinde enableSorting: false olan sütunda buton/aria-sort verilmez', () => {
+    const columns: ColumnDef<TestData>[] = [
+      { accessorKey: 'name', header: 'Name' },
+      { accessorKey: 'email', header: 'Email', enableSorting: false },
+    ];
+    render(<DataTableBasic columns={columns} data={mockData} />);
+
+    expect(
+      screen.getByRole('columnheader', { name: /name/i })
+    ).toHaveAttribute('aria-sort', 'none');
+    expect(
+      screen.getByRole('columnheader', { name: /email/i })
+    ).not.toHaveAttribute('aria-sort');
+    expect(
+      screen.getByRole('button', { name: 'Sort by Name' })
+    ).toBeInTheDocument();
+    expect(
+      screen.queryByRole('button', { name: 'Sort by Email' })
+    ).not.toBeInTheDocument();
+  });
+
+  it('başlığa tıklamak (fare kolaylığı) sıralamayı hâlâ değiştirir', () => {
+    render(<DataTableBasic columns={mockColumns} data={mockData} />);
+
+    // Butona değil, başlık METNİNE tıklanır — sarmalayıcı div onClick'i
+    fireEvent.click(screen.getByText('Name'));
+
+    const rows = screen.getAllByRole('row');
+    expect(rows[1]).toHaveTextContent('Bob Johnson');
+    expect(
+      screen.getByRole('columnheader', { name: /name/i })
+    ).toHaveAttribute('aria-sort', 'ascending');
+  });
+});

package/src/components/ui/__tests__/file-upload.issue-378.test.tsx

@@ -0,0 +1,226 @@
+/**
+ * FileUpload (free) testleri — issue #378.
+ *
+ * Kapsam:
+ * 1. accept matrisi — HTML `input[accept]` semantiği:
+ *    - uzantı token'ı (`.pdf`)          → dosya ADI son ekiyle eşleşir (harf duyarsız)
+ *    - MIME token'ı (`application/pdf`) → `File.type` ile birebir eşleşir
+ *    - wildcard (`image/*`)             → MIME prefix'iyle eşleşir
+ *    - karışık liste / boşluklu liste / `*` ve `*∕*` tam-geçirgen token'lar
+ *    Eski mantık uzantı token'ını da MIME ile karşılaştırdığı için
+ *    `accept=".pdf"` altında batch komple reddediliyordu (docs snippet'i kırıktı).
+ * 2. Simüle progress / error yarışı: onUpload reddedince simülasyon interval'i
+ *    temizlenmeli ve 'error' state'i sonraki tick'lerce 'success'/"Done" ile
+ *    EZİLMEMELİ (0/300 ms reddetme gecikmeleriyle ölçülen K1 bulgusu).
+ */
+import * as React from "react"
+import { render, screen, fireEvent, act } from "@testing-library/react"
+import { FileUpload } from "../file-upload"
+
+// jsdom URL.createObjectURL/revokeObjectURL sağlamaz — image önizlemesi için stub
+beforeAll(() => {
+  Object.defineProperty(global.URL, "createObjectURL", {
+    value: jest.fn(() => "blob:mock"),
+    writable: true,
+  })
+  Object.defineProperty(global.URL, "revokeObjectURL", {
+    value: jest.fn(),
+    writable: true,
+  })
+})
+
+const makeFile = (name: string, type: string, content = "moonui"): File =>
+  new File([content], name, { type })
+
+const getInput = () => screen.getByLabelText(/choose files to upload/i)
+
+const uploadFiles = (...files: File[]) => {
+  fireEvent.change(getInput(), { target: { files } })
+}
+
+/** Kabul edilen dosya listede görünür, tür hatası görünmez. */
+const expectAccepted = (fileName: string) => {
+  expect(screen.getByText(fileName)).toBeInTheDocument()
+  expect(screen.queryByText(/File type not supported/)).not.toBeInTheDocument()
+}
+
+/** Reddedilen dosya listeye girmez, dosya-adıyla tür hatası görünür. */
+const expectRejected = (fileName: string) => {
+  expect(
+    screen.getByText(
+      new RegExp(`${fileName.replace(/\./g, "\\.")}: File type not supported`)
+    )
+  ).toBeInTheDocument()
+  expect(screen.queryByText(/^Uploaded Files/)).not.toBeInTheDocument()
+}
+
+describe("FileUpload accept matrisi (#378)", () => {
+  beforeEach(() => {
+    jest.useFakeTimers()
+  })
+
+  afterEach(() => {
+    jest.clearAllTimers()
+    jest.useRealTimers()
+  })
+
+  it('uzantı token\'ı: accept=".pdf" PDF dosyasını kabul eder (docs snippet senaryosu)', () => {
+    render(<FileUpload accept=".pdf" />)
+    uploadFiles(makeFile("report.pdf", "application/pdf"))
+    expectAccepted("report.pdf")
+  })
+
+  it('uzantı eşleşmesi harf duyarsızdır: ".pdf" + REPORT.PDF', () => {
+    render(<FileUpload accept=".pdf" />)
+    uploadFiles(makeFile("REPORT.PDF", "application/pdf"))
+    expectAccepted("REPORT.PDF")
+  })
+
+  it("uzantı token'ı MIME'den bağımsız çalışır (boş File.type)", () => {
+    // OS/tarayıcı kombinasyonları drag-drop'ta type'ı boş bırakabilir
+    render(<FileUpload accept=".pdf" />)
+    uploadFiles(makeFile("contract.pdf", ""))
+    expectAccepted("contract.pdf")
+  })
+
+  it('uzantı token\'ı eşleşmeyen dosyayı reddeder: ".pdf" + notes.txt', () => {
+    render(<FileUpload accept=".pdf" />)
+    uploadFiles(makeFile("notes.txt", "text/plain"))
+    expectRejected("notes.txt")
+  })
+
+  it('MIME token\'ı: "application/pdf" type ile birebir eşleşir', () => {
+    render(<FileUpload accept="application/pdf" />)
+    uploadFiles(makeFile("report.pdf", "application/pdf"))
+    expectAccepted("report.pdf")
+  })
+
+  it('MIME token\'ı eşleşmeyeni reddeder: "application/pdf" + text/plain', () => {
+    render(<FileUpload accept="application/pdf" />)
+    uploadFiles(makeFile("notes.txt", "text/plain"))
+    expectRejected("notes.txt")
+  })
+
+  it('wildcard: "image/*" image/png\'yi kabul eder', () => {
+    render(<FileUpload accept="image/*" />)
+    uploadFiles(makeFile("photo.png", "image/png"))
+    expectAccepted("photo.png")
+  })
+
+  it('wildcard: "image/*" video/mp4\'ü reddeder', () => {
+    render(<FileUpload accept="image/*" />)
+    uploadFiles(makeFile("clip.mp4", "video/mp4"))
+    expectRejected("clip.mp4")
+  })
+
+  it('karışık liste: "image/*,.pdf,.docx" — png, pdf ve docx kabul; exe red', () => {
+    render(<FileUpload accept="image/*,.pdf,.docx" maxFiles={5} />)
+    uploadFiles(
+      makeFile("photo.png", "image/png"),
+      makeFile("report.pdf", "application/pdf"),
+      makeFile(
+        "spec.docx",
+        "application/vnd.openxmlformats-officedocument.wordprocessingml.document"
+      )
+    )
+    expectAccepted("photo.png")
+    expect(screen.getByText("report.pdf")).toBeInTheDocument()
+    expect(screen.getByText("spec.docx")).toBeInTheDocument()
+
+    uploadFiles(makeFile("app.exe", "application/x-msdownload"))
+    expect(
+      screen.getByText(/app\.exe: File type not supported/)
+    ).toBeInTheDocument()
+    // exe listeye girmedi (hata satırındaki metin liste satırı değil)
+    expect(screen.queryByText("app.exe", { exact: true })).not.toBeInTheDocument()
+  })
+
+  it('varsayılan "*" her dosyayı kabul eder', () => {
+    render(<FileUpload />)
+    uploadFiles(makeFile("anything.bin", "application/octet-stream"))
+    expectAccepted("anything.bin")
+  })
+
+  it('"*/*" tam-geçirgen token olarak kabul eder', () => {
+    render(<FileUpload accept="*/*" />)
+    uploadFiles(makeFile("anything.bin", "application/octet-stream"))
+    expectAccepted("anything.bin")
+  })
+
+  it('boşluklu liste tolere edilir: " image/* , .pdf "', () => {
+    render(<FileUpload accept=" image/* , .pdf " />)
+    uploadFiles(makeFile("report.pdf", "application/pdf"))
+    expectAccepted("report.pdf")
+  })
+})
+
+describe("FileUpload simüle progress / error yarışı (#378)", () => {
+  let consoleErrorSpy: jest.SpyInstance
+
+  beforeEach(() => {
+    jest.useFakeTimers()
+    // Component catch'te console.error('Upload failed:', ...) loglar — çıktıyı sustur
+    consoleErrorSpy = jest.spyOn(console, "error").mockImplementation(() => {})
+  })
+
+  afterEach(() => {
+    jest.clearAllTimers()
+    jest.useRealTimers()
+    consoleErrorSpy.mockRestore()
+  })
+
+  it("anında reddeden onUpload'da error korunur — son tick 'Done' yazamaz", async () => {
+    const onUpload = jest.fn().mockRejectedValue(new Error("backend rejected"))
+    render(<FileUpload onUpload={onUpload} />)
+
+    uploadFiles(makeFile("data.bin", "application/octet-stream"))
+    // Reddin microtask'ı işlensin → catch 'error' state'ini yazar
+    await act(async () => {})
+    expect(screen.getByText("Error")).toBeInTheDocument()
+
+    // Simülasyonun fazlasıyla tamamlanacağı süreyi geç — 'error' EZİLMEMELİ
+    await act(async () => {
+      jest.advanceTimersByTime(5000)
+    })
+    expect(screen.getByText("Error")).toBeInTheDocument()
+    expect(screen.queryByText("Done")).not.toBeInTheDocument()
+    expect(onUpload).toHaveBeenCalledTimes(1)
+  })
+
+  it("geç (300ms) reddeden onUpload'da da error korunur", async () => {
+    const onUpload = jest.fn(
+      () =>
+        new Promise<void>((_, reject) => {
+          setTimeout(() => reject(new Error("late fail")), 300)
+        })
+    )
+    render(<FileUpload onUpload={onUpload} />)
+
+    uploadFiles(makeFile("data.bin", "application/octet-stream"))
+    // 300 ms: red tetiklenir (arada 200 ms'lik ilk simülasyon tick'i de işler)
+    await act(async () => {
+      jest.advanceTimersByTime(300)
+    })
+    await act(async () => {})
+    expect(screen.getByText("Error")).toBeInTheDocument()
+
+    await act(async () => {
+      jest.advanceTimersByTime(5000)
+    })
+    expect(screen.getByText("Error")).toBeInTheDocument()
+    expect(screen.queryByText("Done")).not.toBeInTheDocument()
+  })
+
+  it("başarılı onUpload'da simülasyon 'Done'a ulaşır (regresyon koruması)", async () => {
+    const onUpload = jest.fn().mockResolvedValue(undefined)
+    render(<FileUpload onUpload={onUpload} />)
+
+    uploadFiles(makeFile("data.bin", "application/octet-stream"))
+    await act(async () => {})
+    await act(async () => {
+      jest.advanceTimersByTime(5000)
+    })
+    expect(screen.getByText("Done")).toBeInTheDocument()
+    expect(screen.queryByText("Error")).not.toBeInTheDocument()
+  })
+})

package/src/components/ui/__tests__/primary-subtle-token.test.ts

@@ -0,0 +1,95 @@
+/**
+ * #354 — `--primary-subtle` token çifti ve kontrast değişmezi.
+ *
+ * BULGU: pro Sidebar'ın aktif öğesi `bg-primary/10 text-primary` kullanıyordu.
+ * Light temada bu bileşim **4.28:1** veriyor (WCAG AA metin için 4.5 ister) ve
+ * docs kabuğu bu Sidebar'ı kullandığı için ihlal HER sayfada basılıyordu.
+ * Dark tarafta `--primary` neredeyse beyaz olduğu için sorun yoktu (15.73:1).
+ *
+ * KÖK NEDEN: #313/#314/#323'te kurulan `--*-subtle` ailesi (yumuşak tint + koyu
+ * metin) `destructive/success/warning/info` için vardı ama **primary EKSİKTİ** —
+ * bu yüzden Sidebar ham `primary/10` kompozisyonuna düşmüştü.
+ *
+ * Bu test hem token'ların VARLIĞINI hem de KONTRAST oranlarını sabitler: değer
+ * değiştirilirse ve oran 4.5'in altına düşerse kırmızı olur.
+ */
+import * as fs from 'fs'
+import * as path from 'path'
+
+const KOK = path.resolve(__dirname, '../../..')
+const tokens = fs.readFileSync(path.join(KOK, 'styles/tokens.css'), 'utf8')
+const preset = fs.readFileSync(path.resolve(KOK, '../tailwind-preset.js'), 'utf8')
+
+/** "H S% L%" biçimindeki token değerini oku (light = :root, dark = .dark bloğu) */
+function tokenOku(ad: string, blok: 'light' | 'dark'): string | null {
+  const kaynak =
+    blok === 'dark'
+      ? tokens.slice(tokens.indexOf('.dark'))
+      : tokens.slice(0, tokens.indexOf('.dark'))
+  return kaynak.match(new RegExp(`--${ad}:\\s*([^;]+);`))?.[1].trim() ?? null
+}
+
+function hslToRgb(h: number, s: number, l: number): [number, number, number] {
+  h /= 360
+  s /= 100
+  l /= 100
+  const f = (n: number) => {
+    const k = (n + h * 12) % 12
+    const a = s * Math.min(l, 1 - l)
+    return l - a * Math.max(-1, Math.min(k - 3, Math.min(9 - k, 1)))
+  }
+  return [Math.round(255 * f(0)), Math.round(255 * f(8)), Math.round(255 * f(4))]
+}
+
+function bagilParlaklik([r, g, b]: [number, number, number]): 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)
+  }
+  return 0.2126 * c(r) + 0.7152 * c(g) + 0.0722 * c(b)
+}
+
+function kontrast(a: string, b: string): number {
+  const ayrıştır = (v: string): [number, number, number] => {
+    const [h, s, l] = v.split(/\s+/).map((x) => parseFloat(x))
+    return hslToRgb(h, s, l)
+  }
+  const la = bagilParlaklik(ayrıştır(a))
+  const lb = bagilParlaklik(ayrıştır(b))
+  const [hi, lo] = la > lb ? [la, lb] : [lb, la]
+  return (hi + 0.05) / (lo + 0.05)
+}
+
+describe('#354 --primary-subtle token çifti', () => {
+  it('hesaplayıcı DOĞRU — bilinen bir çift beklenen oranı veriyor', () => {
+    // Sessiz-yeşil koruması: kontrast fonksiyonu bozulursa aşağıdaki testler
+    // anlamsız sayılarla yeşil geçebilir. `--info-subtle` çifti tokens.css'te
+    // 9.52:1 diye belgelenmiş; hesaplayıcı onu yeniden üretmeli.
+    const oran = kontrast(tokenOku('info-subtle', 'light')!, tokenOku('info-subtle-foreground', 'light')!)
+    expect(oran).toBeGreaterThan(9.3)
+    expect(oran).toBeLessThan(9.7)
+  })
+
+  it.each(['light', 'dark'] as const)('%s temada token çifti TANIMLI', (blok) => {
+    expect(tokenOku('primary-subtle', blok)).toBeTruthy()
+    expect(tokenOku('primary-subtle-foreground', blok)).toBeTruthy()
+  })
+
+  it.each(['light', 'dark'] as const)('%s temada kontrast WCAG AA (4.5:1) geçiyor', (blok) => {
+    const oran = kontrast(tokenOku('primary-subtle', blok)!, tokenOku('primary-subtle-foreground', blok)!)
+    expect(oran).toBeGreaterThanOrEqual(4.5)
+  })
+
+  it('light zemin, bugünkü `primary/10` görünümünü KORUYOR', () => {
+    // Zemin değişirse aktif öğenin görünümü değişir; bu bilinçli bir karar olmalı.
+    // #e7f0fe = beyaz üstüne %10 primary.
+    expect(tokenOku('primary-subtle', 'light')).toBe('217 92% 95%')
+  })
+
+  it('preset sınıfları ÜRETİYOR (token tanımlamak yetmez)', () => {
+    // Bu oturumda `theme.extend.borderColor`ın nested renkleri GÖLGELEDİĞİ ve
+    // sınıfın sessizce hiç CSS üretmediği görülmüştü (#313/#314/#323).
+    expect(preset).toContain('hsl(var(--primary-subtle) / <alpha-value>)')
+    expect(preset).toContain('hsl(var(--primary-subtle-foreground) / <alpha-value>)')
+  })
+})