@moontra/moonui 6.17.0 → 6.19.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@moontra/moonui",
-  "version": "6.17.0",
+  "version": "6.19.0",
   "description": "Premium React component library with modern design and customization",
   "author": "MoonUI",
   "license": "MIT",
@@ -15,8 +15,6 @@
   "main": "dist/index.js",
   "module": "dist/index.mjs",
   "types": "dist/index.d.ts",
-  "unpkg": "dist/index.global.js",
-  "jsdelivr": "dist/index.global.js",
   "sideEffects": [
     "**/*.css"
   ],
@@ -60,8 +58,8 @@
   "scripts": {
     "dev": "tsup src/index.tsx --format esm,cjs --dts --watch --sourcemap",
     "build": "npm run build:js && npm run build:dts && node scripts/postbuild.js",
-    "build:js": "tsup src/index.tsx src/lib/theme.tsx src/hooks/index.ts --format esm,cjs",
-    "build:dts": "tsup src/index.tsx src/lib/theme.tsx src/hooks/index.ts --format esm,cjs --dts-only",
+    "build:js": "tsup",
+    "build:dts": "tsup --dts-only",
     "lint": "eslint \"src/**/*.{ts,tsx}\" --fix",
     "clean": "rm -rf dist",
     "prepublishOnly": "npm run clean && npm run build",

package/src/__tests__/cdn-iife-removed.test.ts

@@ -0,0 +1,103 @@
+/**
+ * CDN (IIFE / `.global.js`) build'i KALDIRILDI — karar kilidi. Issue #399.
+ *
+ * Ne olmuştu: `tsup.config.ts` ikinci bir tanımda `format: ["iife"]` +
+ * `globalName: "MoonUI"` ilan ediyordu, ama `package.json`'daki `build:js`
+ * tsup'ı CLI argümanıyla çağırıyordu (`tsup src/... --format esm,cjs`).
+ * tsup'ta CLI argümanı config'i EZER → IIFE hiç üretilmedi; `.global.js`
+ * ADIYLA bir ES modülü yayımlandı. Dosya adı IIFE vaat ettiği için hata
+ * sessizdi: `window.MoonUI` hiçbir sürümde oluşmadı, buna rağmen her
+ * tarball 4.7 MB ölü `.global.*` artefaktı taşıdı.
+ *
+ * Neden "IIFE'yi gerçekten üretelim" seçilmedi (ölçüm, #399): CLI argümanı
+ * kaldırılıp gerçek IIFE üretildiğinde `window.MoonUI` oluşuyor, ama React
+ * bundle'ın içine giriyor (config her şeyi noExternal ile bundle'lıyordu) ve
+ * dışarı React API'si sunulmuyor → sayfa kendi React'ini yüklemek zorunda,
+ * yani çift React → hook
+ * kullanan her component çöküyor (Switch/Tooltip/Accordion: "Cannot read
+ * properties of null"). Ayrıca CDN için stil artefaktı yok. Gerçek bir CDN
+ * yolu ayrı bir ürün işidir; o gelene kadar yüzey tamamen kaldırıldı.
+ *
+ * Bu test üç katmanı birden kilitler: build config, paket metadata'sı ve
+ * (varsa) üretilmiş dist. Config + metadata katmanları BUILD GEREKTİRMEZ —
+ * `.global.*` ancak config onu ilan ederse üretilebileceği için asıl kapı
+ * onlardır; dist taraması build yapılmışsa çalışan EK doğrulamadır.
+ */
+import * as fs from 'fs';
+import * as path from 'path';
+
+const PACKAGE_ROOT = path.resolve(__dirname, '../..');
+const TSUP_CONFIG = path.join(PACKAGE_ROOT, 'tsup.config.ts');
+const PACKAGE_JSON = path.join(PACKAGE_ROOT, 'package.json');
+const DIST = path.join(PACKAGE_ROOT, 'dist');
+
+/** dist ağacındaki tüm dosyaları (alt dizinler dahil) paket köküne göreli döndürür. */
+function walk(dir: string, base = dir): string[] {
+    return fs.readdirSync(dir, { withFileTypes: true }).flatMap((entry) => {
+        const full = path.join(dir, entry.name);
+        return entry.isDirectory() ? walk(full, base) : [path.relative(base, full)];
+    });
+}
+
+describe('CDN/IIFE build yüzeyi kaldırıldı (#399)', () => {
+    describe('tsup.config.ts — IIFE tanımı geri gelmemeli', () => {
+        let config = '';
+        beforeAll(() => {
+            config = fs.readFileSync(TSUP_CONFIG, 'utf8');
+        });
+
+        it('hiçbir tanımda `format: ["iife"]` yok', () => {
+            // Yorum satırlarını ayıkla: karar gerekçesi metninde "iife" kelimesi geçiyor.
+            const code = config.replace(/\/\/.*$/gm, '').replace(/\/\*[\s\S]*?\*\//g, '');
+            expect(code).not.toMatch(/format\s*:\s*\[[^\]]*['"]iife['"]/);
+        });
+
+        it('`globalName` (window.X ataması) ilan edilmiyor', () => {
+            const code = config.replace(/\/\/.*$/gm, '').replace(/\/\*[\s\S]*?\*\//g, '');
+            expect(code).not.toMatch(/globalName\s*:/);
+        });
+
+        it('`.global.js` uzantısı üreten outExtension yok', () => {
+            const code = config.replace(/\/\/.*$/gm, '').replace(/\/\*[\s\S]*?\*\//g, '');
+            expect(code).not.toMatch(/\.global\.js/);
+        });
+    });
+
+    describe('package.json — CDN metadata ve config-ezen build argümanları yok', () => {
+        let pkg: Record<string, unknown> = {};
+        beforeAll(() => {
+            pkg = JSON.parse(fs.readFileSync(PACKAGE_JSON, 'utf8'));
+        });
+
+        it.each(['unpkg', 'jsdelivr'])('%s alanı yok (CDN çözümleyicileri ölü dosyaya bakmasın)', (field) => {
+            expect(pkg).not.toHaveProperty(field);
+        });
+
+        it('exports/files alanlarında `.global` atfı yok', () => {
+            expect(JSON.stringify({ exports: pkg.exports, files: pkg.files })).not.toContain('.global');
+        });
+
+        /**
+         * Kök nedenin kendisi: CLI argümanı tsup config'ini ezer. build script'leri
+         * entry/format'ı CLI'dan geçmediği sürece config tek kaynak kalır.
+         */
+        it.each(['build:js', 'build:dts'])('%s tsup config\'ini CLI argümanıyla ezmiyor', (script) => {
+            const scripts = pkg.scripts as Record<string, string>;
+            const command = scripts[script];
+            expect(command).toBeDefined();
+            expect(command).not.toMatch(/--format/);
+            expect(command).not.toMatch(/\bsrc\//);
+        });
+    });
+
+    describe('dist — üretilmiş çıktıda `.global.*` kalmamalı', () => {
+        const distExists = fs.existsSync(DIST);
+
+        // Build yapılmamışsa bu katman atlanır; asıl kapı yukarıdaki config +
+        // metadata testleridir (build olmadan da koşar ve regresyonu yakalar).
+        (distExists ? it : it.skip)('dist ağacında hiçbir `.global.*` dosyası yok', () => {
+            const globals = walk(DIST).filter((file) => path.basename(file).includes('.global.'));
+            expect(globals).toEqual([]);
+        });
+    });
+});

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()
+  })
+})