tamga-ui 0.4.3 → 0.5.0

package/dist/components/empty-state.d.ts

@@ -1,4 +1,6 @@
 import type { ReactNode } from "react";
+import type { IconGlyph } from "./icons.js";
+import type { Tone } from "./tone.js";
 /**
  * BOŞ DURUM SİSTEMİ — dört slot, ve hiçbiri neyin eksik olduğunu bilmez.
  *
@@ -13,17 +15,14 @@ export type Art = (opts: {
     float: boolean;
 }) => ReactNode;
 /**
- * The speech bubble — the answer to "and the figure says …".
+ * ÇİZİMİN balonu · "ve figür şunu diyor" sorusunun cevabı. Adı bir ara
+ * `SaysBubble`dı ve tasarımda o ad KONUŞMA balonunun (04.14): müşteri
+ * mesajları, sipariş notları. İkisi aynı adı taşıyınca boş durum arayan da
+ * sohbet arayan da yanlış bileşeni buluyordu.
  *
- * It is the one part of the mascot that IS in the system: 1px edge plus a 2px
- * hard offset, exactly like every other raised object. That pairing is the
- * whole trick — it lets pixel art sit inside a strict interface without either
- * one looking lost.
- *
- * The line is real text, not decoration, so it is readable. Keep it to one
- * short sentence: the bubble is a voice, not a paragraph.
+ * Gerekçe: docs/gerekce/04-bos-ve-hata.md
  */
-export declare function SaysBubble({ children, art, size, float, className, ...rest }: {
+export declare function ArtSays({ children, art, size, float, className, ...rest }: {
     children: React.ReactNode;
     art: Art;
     size?: number;
@@ -42,43 +41,58 @@ export declare function SaysBubble({ children, art, size, float, className, ...r
  * No border of its own: it drops into a table body or a list that already has
  * one, and it inherits that list's row rhythm.
  */
-export declare function EmptyNote({ art, title, children, action, className, ...rest }: {
-    art: Art;
-    title: string;
+export declare function EmptyNote({ art, icon, title, children, action, className, ...rest }: {
+    /** The drawing. With `icon` instead, the note collapses to a single line. TR: Çizim. Yerine `icon` verilirse not tek satıra iniyor. */
+    art?: Art;
+    /**
+     * A glyph instead of the drawing · and with it the note becomes ONE LINE: a card that is empty
+     * inside an otherwise full screen does not deserve a picture, it deserves a sentence. TR:
+     * Çizim yerine bir glif · ve onunla birlikte not TEK SATIR oluyor: dolu bir ekranın içindeki
+     * boş bir kart resim değil bir cümle hak ediyor.
+     */
+    icon?: IconGlyph;
+    /** Omitted, the sentence stands alone · which is the one-line note's whole shape. TR: Verilmezse cümle tek başına duruyor · tek satırlık notun bütün biçimi bu. */
+    title?: string;
     children?: React.ReactNode;
     action?: React.ReactNode;
     className?: string;
     /** `data-*` hooks pass through. TR: `data-*` kancaları geçiyor. */
     [k: `data-${string}`]: unknown;
 }): import("react").JSX.Element;
-export type EmptyLayout = "banner" | "ticket" | "routes";
+export type EmptyLayout = "plain" | "banner" | "ticket" | "routes";
 export type EmptyRoute = {
     label: string;
     note?: string;
     onClick?: () => void;
 };
 /**
- * A surface that has nothing in it.
- *
- * Three layouts, one set of content. They are NOT three styles of the same
- * picture — each answers a different question about the screen underneath:
+ * A surface that has nothing in it · three layouts (banner · ticket · routes),
+ * one set of content. Not three styles of the same picture: each answers a
+ * different question about the screen underneath, and each wants its own
+ * drawing.
  *
- *   banner  wide and horizontal: art left, words centre, action at the far
- *           right edge, numbered base plate underneath. Reads as a strip
- *           across the top of a working screen.
- *   ticket  a narrow tag pinned to a big surface, with a perforation and one
- *           full-width action. For a single unambiguous next step.
- *   routes  the words and the figure on the left, a list of ways in on the right.
- *           Two buttons ask a yes/no question; a list answers "what can I even
- *           do here", which is what somebody arriving actually wants to know.
- *
- * Each one also wants a different drawing. The layout decides the shape; the
- * drawing decides what the emptiness FEELS like, and those are two choices,
- * not one.
+ * Gerekçe: docs/gerekce/04-bos-ve-hata.md
  */
-export declare function EmptyState({ layout, art, kicker, title, children, action, note, says, steps, routes, size, className, ...rest }: {
+export declare function EmptyState({ layout, art, icon, tone, kicker, title, children, action, note, says, steps, routes, routesLabel, size, className, ...rest }: {
+    /**
+     * `plain` the dashed card: an icon tile, a line and the first step · the shape most screens
+     * need. The other three carry the drawing. TR: `plain` kesik kenarlı kart: bir ikon karosu,
+     * bir satır ve ilk adım · çoğu ekranın ihtiyacı olan biçim. Ötekiler çizimi taşıyor.
+     */
     layout?: EmptyLayout;
-    art: Art;
+    /**
+     * The drawing, for the three layouts built around one. TR: Çizim, etrafında kurulan üç
+     * yerleşim için.
+     */
+    art?: Art;
+    /** `plain` only: the glyph in the tile. TR: yalnız `plain`: karodaki glif. */
+    icon?: IconGlyph;
+    /**
+     * `plain` only: the tile's wash. Left out it stays the accent's light tone, which is what an
+     * empty state is: an invitation, not a fault. TR: yalnız `plain`: karonun yıkaması.
+     * Verilmezse vurgunun açık tonunda kalıyor · bir boş durum bir davet, bir arıza değil.
+     */
+    tone?: Tone;
     /** what KIND of nothing this is: "no records", "no results" TR: bunun NE TÜR bir hiçlik olduğu: "kayıt yok", "sonuç yok" */
     kicker?: string;
     title: string;
@@ -99,24 +113,23 @@ export declare function EmptyState({ layout, art, kicker, title, children, actio
     steps?: string[];
     /** routes only: the ways in TR: yalnız rotalar: içeri giden yollar */
     routes?: EmptyRoute[];
+    /**
+     * routes only: the micro-label over the list. Omitted, the list stands on its
+     * own. TR: yalnız rotalar: listenin üstündeki mikro etiket. Verilmezse liste
+     * kendi başına duruyor.
+     */
+    routesLabel?: string;
     size?: number;
     className?: string;
     /** `data-*` hooks pass through. TR: `data-*` kancaları geçiyor. */
     [k: `data-${string}`]: unknown;
 }): import("react").JSX.Element;
 /**
- * A whole body with nothing in it — and no box drawn around the nothing.
- *
- * This is the one that goes straight onto the page, not inside a card. A
- * bordered panel needs content to bound; when the entire screen is empty there
- * is nothing to bound, and the border becomes a frame around a void. So there
- * is no border, no ground, no offset. The only structure is a hard floor rule
- * as wide as the figure — enough to say he is standing somewhere, not enough to be a
- * box.
+ * A whole body with nothing in it, and no box drawn around the nothing: no
+ * border, no ground, no offset, just a hard floor rule as wide as the figure.
+ * For an empty area INSIDE a working screen use EmptyState instead.
  *
- * Reach for it when somebody lands on a section they have never used. For an
- * empty area INSIDE a working screen, use EmptyState instead: that one has a
- * card around it because the rest of the screen does too.
+ * Gerekçe: docs/gerekce/04-bos-ve-hata.md
  */
 export declare function EmptyBlank({ art, kicker, title, children, action, says, size, className, ...rest }: {
     art: Art;
@@ -131,18 +144,23 @@ export declare function EmptyBlank({ art, kicker, title, children, action, says,
     [k: `data-${string}`]: unknown;
 }): import("react").JSX.Element;
 /**
- * A choice you are offering — a template, a starting point, a preset.
- *
- * It is a real button, so it obeys raised physics: 1px edge, 2px offset, lifts
- * under the cursor, presses flat when clicked. A template you cannot pick has
- * no business looking like a card.
+ * A choice you are offering · a template, a preset. A real button, so it obeys
+ * raised physics. The category colour is a 3px SPINE under the art, never a
+ * coloured banner behind it (Yasa 3).
  *
- * The category colour is a 3px SPINE under the art rather than a coloured
- * banner behind it. A wall of coloured banners would out-shout a real event
- * (Yasa 3); a rule carries the same grouping and outranks nothing.
+ * Gerekçe: docs/gerekce/04-bos-ve-hata.md
  */
-export declare function EmptyTile({ art, kicker, title, children, tone, onClick, className, ...rest }: {
-    art: Art;
+export declare function EmptyTile({ art, icon, kicker, title, children, tone, onClick, className, ...rest }: {
+    /** The drawing. With `icon` instead, the tile becomes the dashed ADD cell. TR: Çizim. Yerine `icon` verilirse karo kesik kenarlı EKLE hücresi oluyor. */
+    art?: Art;
+    /**
+     * A glyph instead of the drawing · and the tile turns into the grid's empty cell: dashed while
+     * it waits, solid and raised under the pointer. The dashed edge says "not content yet", the
+     * lift says "this is a control". TR: Çizim yerine bir glif · ve karo ızgaranın boş hücresine
+     * dönüşüyor: beklerken kesik, imleç altında kesiksiz ve yükselmiş. Kesik kenar "henüz içerik
+     * değil" diyor, yükselme "bu bir kontrol".
+     */
+    icon?: IconGlyph;
     /** the identifier-shaped line above the title TR: başlığın üstündeki tanımlayıcı biçimli satır */
     kicker?: string;
     title: string;

package/dist/components/empty-state.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"empty-state.d.ts","sourceRoot":"","sources":["../../src/components/empty-state.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"empty-state.d.ts","sourceRoot":"","sources":["../../src/components/empty-state.tsx"],"names":[],"mappings":"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"}

package/dist/components/empty-state.js

@@ -3,6 +3,7 @@ import { Icon } from "./icon.js";
 import { cn } from "../lib/cn.js";
 import { dataProps } from "../lib/data-props.js";
 import { CaretRight } from "./icons.js";
+import { toneOf } from "./tone.js";
 /**
  * The drawing standing on the ground.
  *
@@ -15,17 +16,14 @@ function ArtFigure({ art, size, float, ground = true, }) {
     return (_jsx("span", { className: "tamga-art-fig", "data-ground": ground, children: art({ size, float: Boolean(float) }) }));
 }
 /**
- * The speech bubble — the answer to "and the figure says …".
+ * ÇİZİMİN balonu · "ve figür şunu diyor" sorusunun cevabı. Adı bir ara
+ * `SaysBubble`dı ve tasarımda o ad KONUŞMA balonunun (04.14): müşteri
+ * mesajları, sipariş notları. İkisi aynı adı taşıyınca boş durum arayan da
+ * sohbet arayan da yanlış bileşeni buluyordu.
  *
- * It is the one part of the mascot that IS in the system: 1px edge plus a 2px
- * hard offset, exactly like every other raised object. That pairing is the
- * whole trick — it lets pixel art sit inside a strict interface without either
- * one looking lost.
- *
- * The line is real text, not decoration, so it is readable. Keep it to one
- * short sentence: the bubble is a voice, not a paragraph.
+ * Gerekçe: docs/gerekce/04-bos-ve-hata.md
  */
-export function SaysBubble({ children, art, size = 168, float = true, className, ...rest }) {
+export function ArtSays({ children, art, size = 168, float = true, className, ...rest }) {
     return (_jsxs("div", { ...dataProps(rest), className: cn("relative shrink-0 pt-11", float && "tamga-float", className), children: [_jsxs("div", { className: "absolute top-0 left-1/2 z-10 -translate-x-1/2 whitespace-nowrap", children: [_jsx("div", { className: "px-3 py-1.5 text-small font-medium text-ink", style: {
                             background: "var(--color-shell)",
                             border: "1px solid var(--color-edge)",
@@ -47,31 +45,29 @@ export function SaysBubble({ children, art, size = 168, float = true, className,
  * No border of its own: it drops into a table body or a list that already has
  * one, and it inherits that list's row rhythm.
  */
-export function EmptyNote({ art, title, children, action, className, ...rest }) {
-    return (_jsxs("div", { ...dataProps(rest), className: cn("tamga-gutter flex items-center gap-4 py-6", className), children: [_jsx("span", { className: "tamga-art-port tamga-art-well", children: _jsx(ArtFigure, { art: art, size: 56, ground: false }) }), _jsxs("div", { className: "min-w-0 flex-1", children: [_jsx("p", { className: "text-body font-medium text-ink", children: title }), children ? (_jsx("p", { className: "mt-1 max-w-[var(--measure)] text-small leading-relaxed text-ink-faint", children: children })) : null] }), action ? _jsx("div", { className: "shrink-0", children: action }) : null] }));
+export function EmptyNote({ art, icon, title, children, action, className, ...rest }) {
+    if (icon || !art) {
+        return (_jsxs("div", { ...dataProps(rest), className: cn("tamga-gutter flex items-center gap-2.5 py-4", className), children: [icon ? _jsx(Icon, { icon: icon, size: "sm", className: "shrink-0 text-ink-faint" }) : null, _jsxs("span", { className: "min-w-0 flex-1 text-body text-ink-faint", children: [title ? _jsxs("span", { className: "font-semibold text-ink", children: [title, " "] }) : null, children] }), action ? _jsx("div", { className: "shrink-0", children: action }) : null] }));
+    }
+    return (_jsxs("div", { ...dataProps(rest), className: cn("tamga-gutter flex items-center gap-4 py-6", className), children: [_jsx("span", { className: "tamga-art-port tamga-art-well", children: _jsx(ArtFigure, { art: art, size: 56, ground: false }) }), _jsxs("div", { className: "min-w-0 flex-1", children: [title ? _jsx("p", { className: "font-display text-subhead font-extrabold text-ink", children: title }) : null, children ? (_jsx("p", { className: "mt-1 max-w-[var(--measure)] text-small leading-relaxed text-ink-faint", children: children })) : null] }), action ? _jsx("div", { className: "shrink-0", children: action }) : null] }));
 }
 /**
- * A surface that has nothing in it.
- *
- * Three layouts, one set of content. They are NOT three styles of the same
- * picture — each answers a different question about the screen underneath:
- *
- *   banner  wide and horizontal: art left, words centre, action at the far
- *           right edge, numbered base plate underneath. Reads as a strip
- *           across the top of a working screen.
- *   ticket  a narrow tag pinned to a big surface, with a perforation and one
- *           full-width action. For a single unambiguous next step.
- *   routes  the words and the figure on the left, a list of ways in on the right.
- *           Two buttons ask a yes/no question; a list answers "what can I even
- *           do here", which is what somebody arriving actually wants to know.
+ * A surface that has nothing in it · three layouts (banner · ticket · routes),
+ * one set of content. Not three styles of the same picture: each answers a
+ * different question about the screen underneath, and each wants its own
+ * drawing.
  *
- * Each one also wants a different drawing. The layout decides the shape; the
- * drawing decides what the emptiness FEELS like, and those are two choices,
- * not one.
+ * Gerekçe: docs/gerekce/04-bos-ve-hata.md
  */
-export function EmptyState({ layout = "banner", art, kicker, title, children, action, note, says, steps, routes, size = 150, className, ...rest }) {
-    const figure = says !== undefined ? (_jsx(SaysBubble, { art: art, size: size, children: says })) : (_jsx(ArtFigure, { art: art, size: size, float: true }));
-    const words = (_jsxs(_Fragment, { children: [kicker ? _jsx("p", { className: "tamga-kicker mb-2", children: kicker }) : null, _jsx("h3", { ...dataProps(rest), className: "text-display-sm font-semibold tracking-tight text-ink", children: title }), children ? (_jsx("p", { className: "mt-3 max-w-[var(--measure)] text-control leading-relaxed text-ink-soft", children: children })) : null, note ? (_jsx("p", { className: "mt-2 max-w-[var(--measure)] text-small leading-relaxed text-ink-faint", children: note })) : null] }));
+export function EmptyState({ layout = "banner", art, icon, tone, kicker, title, children, action, note, says, steps, routes, routesLabel, size = 150, className, ...rest }) {
+    const figure = !art ? null : says !== undefined ? (_jsx(ArtSays, { art: art, size: size, children: says })) : (_jsx(ArtFigure, { art: art, size: size, float: true }));
+    const words = (_jsxs(_Fragment, { children: [kicker ? _jsx("p", { className: "tamga-kicker mb-2", children: kicker }) : null, _jsx("h3", { ...dataProps(rest), className: "font-display text-display-sm font-extrabold tracking-tight text-ink", children: title }), children ? (_jsx("p", { className: "mt-3 max-w-[var(--measure)] text-body leading-relaxed text-ink-soft", children: children })) : null, note ? (_jsx("p", { className: "mt-2 max-w-[var(--measure)] text-small leading-relaxed text-ink-faint", children: note })) : null] }));
+    if (layout === "plain") {
+        /* KESİK KENARLI KART: kitin her yerinde kesik çizgi "henüz gerçek içerik
+           değil" demek, ve boş bir bölüm tam olarak o. Dolu hâlinde aynı yerde
+           kesiksiz bir kart duruyor · ikisi aynı kutu, biri henüz dolmamış. */
+        return (_jsxs("div", { ...dataProps(rest), className: cn("tamga-empty-plain", className), children: [icon ? (_jsx("span", { "aria-hidden": true, className: "tamga-empty-tile", style: tone ? { background: toneOf(tone).bg, color: toneOf(tone).fg } : undefined, children: _jsx(Icon, { icon: icon, size: "xl", weight: "bold" }) })) : null, words, action ? _jsx("div", { className: "mt-2 flex flex-wrap justify-center gap-3", children: action }) : null] }));
+    }
     if (layout === "banner") {
         return (_jsxs("div", { className: cn("flex flex-col overflow-hidden", className), children: [_jsxs("div", { className: "flex flex-1 flex-col sm:flex-row sm:items-stretch", children: [_jsx("div", { className: "tamga-art-well tamga-art-stage tamga-art-floor sm:border-b-0", children: figure }), _jsxs("div", { className: "flex min-w-0 flex-1 flex-col gap-7 px-6 py-7 sm:flex-row sm:items-center sm:justify-between sm:gap-10 sm:px-9 sm:py-9", children: [_jsx("div", { className: "min-w-0", children: words }), action ? (_jsx("div", { className: "flex shrink-0 flex-wrap items-center gap-3", children: action })) : null] })] }), steps?.length ? (_jsx("ol", { className: "tamga-art-steps tamga-art-well", children: steps.map((step, i) => (_jsxs("li", { className: "tamga-art-step", children: [_jsx("span", { className: "tamga-art-step-n", children: String(i + 1).padStart(2, "0") }), _jsx("span", { className: "text-small leading-relaxed text-ink-soft", children: step })] }, step))) })) : null] }));
     }
@@ -79,36 +75,28 @@ export function EmptyState({ layout = "banner", art, kicker, title, children, ac
         return (_jsx("div", { className: cn("flex justify-center px-6 py-10", className), children: _jsxs("div", { className: "tamga-card w-full max-w-90 overflow-hidden", children: [_jsx("div", { className: "tamga-art-well tamga-art-band", children: figure }), _jsx("div", { className: "px-6 pt-6 pb-7 text-center [&_p]:mx-auto", children: words }), _jsx("div", { className: "tamga-art-divider" }), action ? (_jsx("div", { className: "flex flex-col gap-2 p-4 [&>*]:w-full [&>*]:justify-center", children: action })) : null] }) }));
     }
     /* routes — three columns on one line: the figure, the words, the ways in */
-    return (_jsxs("div", { className: cn("flex flex-col gap-8 px-6 py-9 sm:flex-row sm:items-center sm:gap-10 sm:px-10 sm:py-10", className), children: [_jsx("div", { className: "flex shrink-0 items-end", children: says !== undefined ? (_jsx(SaysBubble, { art: art, size: size, children: says })) : (_jsx(ArtFigure, { art: art, size: size, float: true })) }), _jsxs("div", { className: "min-w-0 flex-1", children: [words, action ? _jsx("div", { className: "mt-6 flex flex-wrap gap-3", children: action }) : null] }), _jsxs("div", { className: "flex w-full shrink-0 flex-col gap-2.5 sm:max-w-76", children: [_jsx("p", { className: "tamga-kicker mb-0.5", children: "ways in" }), routes?.map((r) => (_jsxs("button", { type: "button", onClick: r.onClick, className: "tamga-art-route", children: [_jsxs("span", { className: "min-w-0 flex-1", children: [_jsx("span", { className: "block text-body font-medium text-ink", children: r.label }), r.note ? _jsx("span", { className: "block text-small text-ink-faint", children: r.note }) : null] }), _jsx(Icon, { icon: CaretRight, size: "sm" })] }, r.label)))] })] }));
+    return (_jsxs("div", { className: cn("flex flex-col gap-8 px-6 py-9 sm:flex-row sm:items-center sm:gap-10 sm:px-10 sm:py-10", className), children: [_jsx("div", { className: "flex shrink-0 items-end", children: figure }), _jsxs("div", { className: "min-w-0 flex-1", children: [words, action ? _jsx("div", { className: "mt-6 flex flex-wrap gap-3", children: action }) : null] }), _jsxs("div", { className: "flex w-full shrink-0 flex-col gap-2.5 sm:max-w-76", children: [routesLabel ? _jsx("p", { className: "tamga-kicker mb-0.5", children: routesLabel }) : null, routes?.map((r) => (_jsxs("button", { type: "button", onClick: r.onClick, className: "tamga-art-route", children: [_jsxs("span", { className: "min-w-0 flex-1", children: [_jsx("span", { className: "block text-body font-medium text-ink", children: r.label }), r.note ? _jsx("span", { className: "block text-small text-ink-faint", children: r.note }) : null] }), _jsx(Icon, { icon: CaretRight, size: "sm" })] }, r.label)))] })] }));
 }
 /**
- * A whole body with nothing in it — and no box drawn around the nothing.
- *
- * This is the one that goes straight onto the page, not inside a card. A
- * bordered panel needs content to bound; when the entire screen is empty there
- * is nothing to bound, and the border becomes a frame around a void. So there
- * is no border, no ground, no offset. The only structure is a hard floor rule
- * as wide as the figure — enough to say he is standing somewhere, not enough to be a
- * box.
+ * A whole body with nothing in it, and no box drawn around the nothing: no
+ * border, no ground, no offset, just a hard floor rule as wide as the figure.
+ * For an empty area INSIDE a working screen use EmptyState instead.
  *
- * Reach for it when somebody lands on a section they have never used. For an
- * empty area INSIDE a working screen, use EmptyState instead: that one has a
- * card around it because the rest of the screen does too.
+ * Gerekçe: docs/gerekce/04-bos-ve-hata.md
  */
 export function EmptyBlank({ art, kicker, title, children, action, says, size = 230, className, ...rest }) {
-    return (_jsxs("div", { ...dataProps(rest), className: cn("flex w-full flex-col items-center justify-center px-6 py-16 text-center", className), children: [says !== undefined ? (_jsx(SaysBubble, { art: art, size: size, children: says })) : (_jsx(ArtFigure, { art: art, size: size, float: true, ground: false })), _jsx("span", { className: "tamga-art-blank-floor mt-1 mb-8", style: { width: size * 0.72 } }), kicker ? _jsx("p", { className: "tamga-kicker mb-2", children: kicker }) : null, _jsx("h3", { className: "text-display-sm font-semibold tracking-tight text-ink", children: title }), children ? (_jsx("p", { className: "mt-3 max-w-[var(--measure)] text-control leading-relaxed text-ink-soft", children: children })) : null, action ? (_jsx("div", { className: "mt-8 flex flex-wrap items-center justify-center gap-3", children: action })) : null] }));
+    return (_jsxs("div", { ...dataProps(rest), className: cn("flex w-full flex-col items-center justify-center px-6 py-16 text-center", className), children: [says !== undefined ? (_jsx(ArtSays, { art: art, size: size, children: says })) : (_jsx(ArtFigure, { art: art, size: size, float: true, ground: false })), _jsx("span", { className: "tamga-art-blank-floor mt-1 mb-8", style: { width: size * 0.72 } }), kicker ? _jsx("p", { className: "tamga-kicker mb-2", children: kicker }) : null, _jsx("h3", { className: "font-display text-display-sm font-extrabold tracking-tight text-ink", children: title }), children ? (_jsx("p", { className: "mt-3 max-w-[var(--measure)] text-body leading-relaxed text-ink-soft", children: children })) : null, action ? (_jsx("div", { className: "mt-8 flex flex-wrap items-center justify-center gap-3", children: action })) : null] }));
 }
 /**
- * A choice you are offering — a template, a starting point, a preset.
+ * A choice you are offering · a template, a preset. A real button, so it obeys
+ * raised physics. The category colour is a 3px SPINE under the art, never a
+ * coloured banner behind it (Yasa 3).
  *
- * It is a real button, so it obeys raised physics: 1px edge, 2px offset, lifts
- * under the cursor, presses flat when clicked. A template you cannot pick has
- * no business looking like a card.
- *
- * The category colour is a 3px SPINE under the art rather than a coloured
- * banner behind it. A wall of coloured banners would out-shout a real event
- * (Yasa 3); a rule carries the same grouping and outranks nothing.
+ * Gerekçe: docs/gerekce/04-bos-ve-hata.md
  */
-export function EmptyTile({ art, kicker, title, children, tone = 1, onClick, className, ...rest }) {
+export function EmptyTile({ art, icon, kicker, title, children, tone = 1, onClick, className, ...rest }) {
+    if (icon || !art) {
+        return (_jsxs("button", { ...dataProps(rest), type: "button", onClick: onClick, className: cn("tamga-empty-add", className), children: [icon ? (_jsx("span", { "aria-hidden": true, className: "tamga-empty-add-kare", children: _jsx(Icon, { icon: icon, size: "sm", weight: "bold" }) })) : null, _jsx("span", { className: "text-body font-bold", children: title })] }));
+    }
     return (_jsxs("button", { ...dataProps(rest), type: "button", onClick: onClick, className: cn("tamga-art-tile", className), children: [_jsx("span", { className: "tamga-art-well flex h-28 items-end justify-center pt-4", children: _jsx(ArtFigure, { art: art, size: 86 }) }), _jsx("span", { className: "tamga-art-spine", "data-tone": tone }), _jsxs("span", { className: "tamga-gutter flex min-w-0 flex-1 flex-col py-4", children: [kicker ? _jsx("span", { className: "tamga-kicker mb-1.5", children: kicker }) : null, _jsx("span", { className: "text-body font-semibold text-ink", children: title }), children ? (_jsx("span", { className: "mt-1 text-small leading-relaxed text-ink-faint", children: children })) : null] })] }));
 }

package/dist/components/error-state.d.ts

@@ -4,7 +4,16 @@
  * Gerekçe: docs/gerekce/04-bos-ve-hata.md
  */
 export declare function ErrorState({ title, description, detail, onRetry, retryLabel, compact, ...rest }: {
-    title?: string;
+    /**
+     * What failed, in the reader's language. Required, with no default: a
+     * default here would be an English sentence rendered inside every other
+     * language, and nobody notices a wrong default until a user reports it.
+     * TR: Neyin başarısız olduğu, okuyanın dilinde. Zorunlu ve varsayılansız:
+     * buradaki bir varsayılan, her dilin içinde çizilen bir İngilizce cümle
+     * olurdu, ve yanlış bir varsayılanı kimse bir kullanıcı bildirene kadar
+     * fark etmiyor.
+     */
+    title: string;
     /**
      * plain words: what the person cannot do right now TR: düz sözcüklerle: kişinin şu an ne
      * yapamadığı
@@ -20,8 +29,6 @@ export declare function ErrorState({ title, description, detail, onRetry, retryL
      * ürünün API sözleşmesinin kararı, bu bileşenin değil.
      */
     detail?: string;
-    onRetry?: () => void;
-    retryLabel?: string;
     /**
      * inside a card or a panel rather than a whole page TR: bütün bir sayfa yerine bir kartın ya
      * da panelin içinde
@@ -29,5 +36,15 @@ export declare function ErrorState({ title, description, detail, onRetry, retryL
     compact?: boolean;
     /** `data-*` hooks pass through. TR: `data-*` kancaları geçiyor. */
     [k: `data-${string}`]: unknown;
-}): import("react").JSX.Element;
+} & ({
+    onRetry?: undefined;
+    retryLabel?: undefined;
+} | {
+    onRetry: () => void;
+    /**
+     * The retry button's words, in the reader's language. TR: Yeniden dene
+     * düğmesinin sözcükleri, okuyanın dilinde.
+     */
+    retryLabel: string;
+})): import("react").JSX.Element;
 //# sourceMappingURL=error-state.d.ts.map

package/dist/components/error-state.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"error-state.d.ts","sourceRoot":"","sources":["../../src/components/error-state.tsx"],"names":[],"mappings":"AAKA;;;;GAIG;AACH,wBAAgB,UAAU,CAAC,EACzB,KAA6B,EAC7B,WAAW,EACX,MAAM,EACN,OAAO,EACP,UAAwB,EACxB,OAAe,EACf,GAAG,IAAI,EACR,EAAE;IACD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;;;;;;OAQG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,mEAAmE;IACnE,CAAC,CAAC,EAAE,QAAQ,MAAM,EAAE,GAAG,OAAO,CAAC;CAChC,+BAwCA"}
+{"version":3,"file":"error-state.d.ts","sourceRoot":"","sources":["../../src/components/error-state.tsx"],"names":[],"mappings":"AAKA;;;;GAIG;AACH,wBAAgB,UAAU,CAAC,EACzB,KAAK,EACL,WAAW,EACX,MAAM,EACN,OAAO,EACP,UAAU,EACV,OAAe,EACf,GAAG,IAAI,EACR,EAAE;IACD;;;;;;;;OAQG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;;;;;;OAQG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,mEAAmE;IACnE,CAAC,CAAC,EAAE,QAAQ,MAAM,EAAE,GAAG,OAAO,CAAC;CAChC,GAAG,CACA;IAAE,OAAO,CAAC,EAAE,SAAS,CAAC;IAAC,UAAU,CAAC,EAAE,SAAS,CAAA;CAAE,GAI/C;IACE,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB;;;OAGG;IACH,UAAU,EAAE,MAAM,CAAC;CACpB,CACJ,+BAgEA"}

package/dist/components/error-state.js

@@ -8,10 +8,20 @@ import { Button } from "./button.js";
  *
  * Gerekçe: docs/gerekce/04-bos-ve-hata.md
  */
-export function ErrorState({ title = "Could not load this", description, detail, onRetry, retryLabel = "Try again", compact = false, ...rest }) {
-    return (_jsxs("div", { ...dataProps(rest), role: "alert", "aria-live": "polite", className: `tamga-gutter flex flex-col items-start gap-4 ${compact ? "py-6" : "py-12"}`, children: [_jsx("span", { className: "flex size-10 items-center justify-center border", style: {
-                    borderRadius: "var(--radius-ctl)",
-                    borderColor: "var(--color-critical)",
-                    color: "var(--color-critical)",
-                }, children: _jsx(Icon, { icon: Warning, size: "base" }) }), _jsxs("div", { children: [_jsx("p", { className: "text-body font-medium text-ink", children: title }), description ? (_jsx("p", { className: "mt-1 max-w-[var(--measure)] text-small leading-relaxed text-ink-faint", children: description })) : null, detail ? (_jsx("p", { className: "mt-2 max-w-[var(--measure)] break-words font-mono text-caption text-ink-faint", children: detail })) : null] }), onRetry ? (_jsxs(Button, { onClick: onRetry, children: [_jsx(Icon, { icon: Refresh, size: "sm" }), " ", retryLabel] })) : null] }));
+export function ErrorState({ title, description, detail, onRetry, retryLabel, compact = false, ...rest }) {
+    return (_jsxs("div", { ...dataProps(rest), role: "alert", "aria-live": "polite", 
+        /* ORTALANMIŞ: hata bölümün YERİNİ alıyor, kenarına iliştirilmiyor ·
+           sola yaslı bir blok, boş kalan alanı hâlâ doldurulacak gibi
+           gösteriyordu. */
+        className: `tamga-gutter flex flex-col items-center gap-4 text-center ${compact ? "py-6" : "py-12"}`, children: [_jsx("span", { className: "flex size-13 items-center justify-center", style: {
+                    borderRadius: "var(--radius-card)",
+                    border: "1.5px solid var(--color-edge)",
+                    background: "var(--color-critical)",
+                    color: "var(--color-critical-ink)",
+                    boxShadow: "4px 4px 0 var(--color-edge)",
+                }, children: _jsx(Icon, { icon: Warning, size: "lg" }) }), _jsxs("div", { children: [_jsx("p", { className: "font-display text-title font-extrabold tracking-tight text-ink", children: title }), description ? (_jsx("p", { className: "mx-auto mt-1.5 max-w-[var(--measure)] text-body leading-relaxed text-ink-faint", children: description })) : null, detail ? (_jsx("p", { className: "mt-3 inline-block max-w-[var(--measure)] break-words px-2 py-0.5 font-mono text-caption text-ink-faint", style: {
+                            background: "var(--color-sunk)",
+                            border: "1px solid var(--color-line)",
+                            borderRadius: "var(--radius-chip)",
+                        }, children: detail })) : null] }), onRetry ? (_jsxs(Button, { variant: "primary", onClick: onRetry, children: [_jsx(Icon, { icon: Refresh, size: "sm" }), " ", retryLabel] })) : null] }));
 }

package/dist/components/file-upload.d.ts

@@ -3,6 +3,34 @@
  *
  * Gerekçe: docs/gerekce/01-form-ve-girdi.md
  */
+/**
+ * Yüklenmekte olan ya da yüklenmiş bir DOSYA · ızgaradaki görselden ayrı.
+ *
+ * Gerekçe: docs/gerekce/01-form-ve-girdi.md
+ */
+export type UploadFile = {
+    id: string;
+    name: string;
+    /**
+     * 0-100 while the file is still going up. Given, the row carries a bar and the percentage.
+     * TR: Dosya hâlâ giderken 0-100. Verilirse satır bir çubuk ve yüzde taşıyor.
+     */
+    progress?: number;
+    /**
+     * The finished file's size, written by the caller ("1,8 MB"): the kit formats no bytes, because
+     * the unit and the separator are a locale. TR: Biten dosyanın boyutu, çağıranın yazdığı gibi
+     * ("1,8 MB"): kit bayt biçimlemiyor, çünkü birim de ayraç da bir yerel.
+     */
+    size?: string;
+    /**
+     * What went wrong, in the caller's words. Given, the row turns critical · and the reason sits
+     * NEXT TO the file name rather than under it: a list of failures reads as a list, not as three
+     * paragraphs. TR: Neyin ters gittiği, çağıranın sözcükleriyle. Verilirse satır kritik oluyor ·
+     * ve sebep dosya adının ALTINDA değil YANINDA: arka arkaya gelen hatalar bir liste olarak
+     * okunmalı, üç paragraf olarak değil.
+     */
+    error?: string;
+} & Record<string, unknown>;
 export type UploadItem = {
     id: string;
     /**
@@ -12,17 +40,32 @@ export type UploadItem = {
     url: string;
     name: string;
 } & Record<string, unknown>;
-export declare function FileUpload({ items, onAdd, onRemove, onReorder, accept, multiple, disabled, labels, className, ...rest }: {
+export declare function FileUpload({ items, files, onAdd, onRemove, onReorder, accept, multiple, disabled, labels, className, ...rest }: {
     items: readonly UploadItem[];
+    /**
+     * The file ROWS under the well: what is going up right now, what arrived, what was refused.
+     * They are not the image grid · a row is a transfer, a tile is a product image, and the two
+     * answer different questions. TR: Kuyunun altındaki dosya SATIRLARI: şu anda ne gidiyor, ne
+     * geldi, ne reddedildi. Izgaradan ayrı · satır bir aktarım, karo bir ürün görseli.
+     */
+    files?: readonly UploadFile[];
     onAdd?: (files: File[]) => void;
     onRemove?: (id: string) => void;
-    onReorder?: (id: string, direction: -1 | 1) => void;
+    /**
+     * Places the dragged or stepped item at `target` in the list. TR: Sürüklenen ya da okla
+     * taşınan ögeyi listenin `hedef` sırasına koyar.
+     */
+    onReorder?: (id: string, hedef: number) => void;
     accept?: string;
     multiple?: boolean;
     disabled?: boolean;
     labels: {
         drop: string;
         browse: string;
+        /** The quiet line under the sentence: "PNG, JPG · max 10 MB". TR: Cümlenin altındaki sessiz satır. */
+        hint?: string;
+        /** The button that stops a transfer in flight. TR: Süren bir aktarımı durduran düğme. */
+        cancel?: string;
         remove: string;
         moveLeft: string;
         moveRight: string;

package/dist/components/file-upload.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"file-upload.d.ts","sourceRoot":"","sources":["../../src/components/file-upload.tsx"],"names":[],"mappings":"AAQA;;;;GAIG;AAEH,MAAM,MAAM,UAAU,GAAG;IACvB,EAAE,EAAE,MAAM,CAAC;IACX;;;OAGG;IACH,GAAG,EAAE,MAAM,CAAC;IACZ,IAAI,EAAE,MAAM,CAAC;CACd,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;AAE5B,wBAAgB,UAAU,CAAC,EACzB,KAAK,EACL,KAAK,EACL,QAAQ,EACR,SAAS,EACT,MAAkB,EAClB,QAAe,EACf,QAAgB,EAChB,MAAM,EACN,SAAS,EACT,GAAG,IAAI,EACR,EAAE;IACD,KAAK,EAAE,SAAS,UAAU,EAAE,CAAC;IAC7B,KAAK,CAAC,EAAE,CAAC,KAAK,EAAE,IAAI,EAAE,KAAK,IAAI,CAAC;IAChC,QAAQ,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAChC,SAAS,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,SAAS,EAAE,CAAC,CAAC,GAAG,CAAC,KAAK,IAAI,CAAC;IACpD,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,MAAM,EAAE;QACN,IAAI,EAAE,MAAM,CAAC;QACb,MAAM,EAAE,MAAM,CAAC;QACf,MAAM,EAAE,MAAM,CAAC;QACf,QAAQ,EAAE,MAAM,CAAC;QACjB,SAAS,EAAE,MAAM,CAAC;QAClB,4GAA4G;QAC5G,OAAO,EAAE,MAAM,CAAC;KACjB,CAAC;IACF,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,mEAAmE;IACnE,CAAC,CAAC,EAAE,QAAQ,MAAM,EAAE,GAAG,OAAO,CAAC;CAChC,+BA0GA"}
+{"version":3,"file":"file-upload.d.ts","sourceRoot":"","sources":["../../src/components/file-upload.tsx"],"names":[],"mappings":"AASA;;;;GAIG;AAEH;;;;GAIG;AACH,MAAM,MAAM,UAAU,GAAG;IACvB,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,MAAM,CAAC;IACb;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;;;OAIG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;;;;OAMG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;AAE5B,MAAM,MAAM,UAAU,GAAG;IACvB,EAAE,EAAE,MAAM,CAAC;IACX;;;OAGG;IACH,GAAG,EAAE,MAAM,CAAC;IACZ,IAAI,EAAE,MAAM,CAAC;CACd,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;AAE5B,wBAAgB,UAAU,CAAC,EACzB,KAAK,EACL,KAAK,EACL,KAAK,EACL,QAAQ,EACR,SAAS,EACT,MAAkB,EAClB,QAAe,EACf,QAAgB,EAChB,MAAM,EACN,SAAS,EACT,GAAG,IAAI,EACR,EAAE;IACD,KAAK,EAAE,SAAS,UAAU,EAAE,CAAC;IAC7B;;;;;OAKG;IACH,KAAK,CAAC,EAAE,SAAS,UAAU,EAAE,CAAC;IAC9B,KAAK,CAAC,EAAE,CAAC,KAAK,EAAE,IAAI,EAAE,KAAK,IAAI,CAAC;IAChC,QAAQ,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAChC;;;OAGG;IACH,SAAS,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAChD,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,MAAM,EAAE;QACN,IAAI,EAAE,MAAM,CAAC;QACb,MAAM,EAAE,MAAM,CAAC;QACf,sGAAsG;QACtG,IAAI,CAAC,EAAE,MAAM,CAAC;QACd,yFAAyF;QACzF,MAAM,CAAC,EAAE,MAAM,CAAC;QAChB,MAAM,EAAE,MAAM,CAAC;QACf,QAAQ,EAAE,MAAM,CAAC;QACjB,SAAS,EAAE,MAAM,CAAC;QAClB,4GAA4G;QAC5G,OAAO,EAAE,MAAM,CAAC;KACjB,CAAC;IACF,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,mEAAmE;IACnE,CAAC,CAAC,EAAE,QAAQ,MAAM,EAAE,GAAG,OAAO,CAAC;CAChC,+BAqMA"}

package/dist/components/file-upload.js

@@ -4,11 +4,17 @@ import { useId, useRef, useState } from "react";
 import { cn } from "../lib/cn.js";
 import { dataProps } from "../lib/data-props.js";
 import { Icon } from "./icon.js";
-import { Upload, Close, CaretLeft, CaretRight } from "./icons.js";
-export function FileUpload({ items, onAdd, onRemove, onReorder, accept = "image/*", multiple = true, disabled = false, labels, className, ...rest }) {
+import { Upload, Close, CaretLeft, CaretRight, Image as ImageGlyph, Success, Failure, Delete } from "./icons.js";
+import { toneOf } from "./tone.js";
+export function FileUpload({ items, files, onAdd, onRemove, onReorder, accept = "image/*", multiple = true, disabled = false, labels, className, ...rest }) {
     const id = useId();
     const input = useRef(null);
     const [over, setOver] = useState(false);
+    /* Sürüklenen ögenin kimliği state'te, `dataTransfer`de değil: Safari
+       `dragover` sırasında `getData`yı boş döndürüyor, dolayısıyla bırakma
+       hedefini oradan okuyup işaretlemek mümkün değil. */
+    const [tasinan, setTasinan] = useState(null);
+    const [hedef, setHedef] = useState(null);
     function take(list) {
         if (!list || disabled)
             return;
@@ -23,13 +29,32 @@ export function FileUpload({ items, onAdd, onRemove, onReorder, accept = "image/
                     e.preventDefault();
                     if (!disabled)
                         setOver(true);
-                }, onDragLeave: () => setOver(false), onDrop: onDrop, "data-over": over, className: "tamga-art-well flex flex-col items-center gap-3 px-6 py-10 text-center", style: {
-                    borderStyle: "dashed",
-                    borderColor: over ? "var(--color-accent-line)" : undefined,
-                }, children: [_jsx(Icon, { icon: Upload, size: "md", className: "text-ink-faint" }), _jsx("p", { className: "text-body text-ink-faint", children: labels.drop }), _jsx("button", { type: "button", className: "tamga-btn tamga-btn-sm", disabled: disabled, onClick: () => input.current?.click(), children: labels.browse }), _jsx("input", { ref: input, id: id, type: "file", accept: accept, multiple: multiple, disabled: disabled, className: "sr-only", onChange: (e) => {
+                }, onDragLeave: () => setOver(false), onDrop: onDrop, "data-over": over, className: "tamga-drop-well flex flex-col items-center gap-3 px-6 py-10 text-center", children: [_jsx("span", { "aria-hidden": true, className: "tamga-drop-tile", children: _jsx(Icon, { icon: Upload, size: "md", weight: "bold" }) }), _jsxs("p", { className: "text-body font-bold text-ink", children: [labels.drop, " ", _jsx("button", { type: "button", className: "tamga-link", disabled: disabled, onClick: () => input.current?.click(), children: labels.browse })] }), labels.hint ? _jsx("p", { className: "text-small text-ink-faint", children: labels.hint }) : null, _jsx("input", { ref: input, id: id, type: "file", accept: accept, multiple: multiple, disabled: disabled, className: "sr-only", onChange: (e) => {
                             take(e.target.files);
                             /* Aynı dosyayı ikinci kez seçebilmek için: aksi hâlde `change`
                                tetiklenmez ve kullanıcı "çalışmıyor" der. */
                             e.target.value = "";
-                        } })] }), items.length > 0 ? (_jsx("ul", { className: "grid grid-cols-2 gap-3 sm:grid-cols-4", children: items.map(({ id: oge, url, name, ...rest }, i) => (_jsxs("li", { ...rest, className: "tamga-card relative overflow-hidden", children: [_jsx("img", { src: url, alt: name, className: "aspect-square w-full object-cover" }), i === 0 ? (_jsx("span", { className: "tamga-chip absolute top-1.5 left-1.5", children: labels.primary })) : null, _jsxs("span", { className: "tamga-gutter flex items-center gap-1 py-1.5", children: [_jsx("button", { type: "button", className: "tamga-mini-btn", "aria-label": labels.moveLeft, disabled: i === 0, onClick: () => onReorder?.(oge, -1), children: _jsx(Icon, { icon: CaretLeft, size: "xs" }) }), _jsx("button", { type: "button", className: "tamga-mini-btn", "aria-label": labels.moveRight, disabled: i === items.length - 1, onClick: () => onReorder?.(oge, 1), children: _jsx(Icon, { icon: CaretRight, size: "xs" }) }), _jsx("button", { type: "button", className: "tamga-mini-btn ml-auto", "aria-label": labels.remove, onClick: () => onRemove?.(oge), children: _jsx(Icon, { icon: Close, size: "xs" }) })] })] }, oge))) })) : null] }));
+                        } })] }), files?.length ? (_jsx("ul", { className: "flex flex-col gap-2", children: files.map(({ id: dosya, name, progress, size, error, ...rest }) => (_jsxs("li", { ...rest, className: "tamga-file-row", "data-error": error ? true : undefined, children: [_jsx(Icon, { icon: error ? Failure : progress === undefined ? Success : ImageGlyph, size: "sm", weight: progress === undefined ? "fill" : "bold", className: "shrink-0", style: { color: error ? toneOf("danger").fg : "var(--color-accent)" } }), _jsxs("span", { className: "flex min-w-0 flex-1 flex-col gap-1.5", children: [_jsxs("span", { className: "flex items-center justify-between gap-3 text-small font-semibold", children: [_jsxs("span", { className: "min-w-0 truncate", children: [name, error ? (_jsxs("span", { className: "font-medium text-ink-faint", children: [" \u00B7 ", error] })) : null] }), progress !== undefined ? (_jsxs("span", { className: "shrink-0 font-mono text-caption tabular-nums text-ink-faint", children: [progress, "%"] })) : size ? (_jsx("span", { className: "shrink-0 font-mono text-caption text-ink-faint", children: size })) : null] }), progress !== undefined ? (_jsx("span", { className: "tamga-file-bar", children: _jsx("span", { style: { width: `${Math.max(0, Math.min(100, progress))}%` } }) })) : null] }), _jsx("button", { type: "button", className: "tamga-icon-btn tamga-icon-btn-sm tamga-icon-btn-ghost shrink-0", "aria-label": progress !== undefined ? (labels.cancel ?? labels.remove) : labels.remove, onClick: () => onRemove?.(dosya), children: _jsx(Icon, { icon: progress !== undefined ? Close : Delete, size: "xs" }) })] }, dosya))) })) : null, items.length > 0 ? (_jsx("ul", { className: "grid grid-cols-2 gap-3 sm:grid-cols-4", children: items.map(({ id: oge, url, name, ...rest }, i) => (_jsxs("li", { ...rest, draggable: !disabled && items.length > 1, onDragStart: (e) => {
+                        setTasinan(oge);
+                        /* Firefox bir yük olmadan sürüklemeyi hiç başlatmıyor. */
+                        e.dataTransfer.setData("text/plain", oge);
+                        e.dataTransfer.effectAllowed = "move";
+                    }, onDragEnd: () => {
+                        setTasinan(null);
+                        setHedef(null);
+                    }, onDragOver: (e) => {
+                        if (!tasinan || tasinan === oge)
+                            return;
+                        /* `preventDefault` olmadan `drop` hiç tetiklenmiyor: tarayıcının
+                           varsayılanı "buraya bırakılamaz". */
+                        e.preventDefault();
+                        e.dataTransfer.dropEffect = "move";
+                        setHedef(oge);
+                    }, onDrop: (e) => {
+                        e.preventDefault();
+                        if (tasinan && tasinan !== oge)
+                            onReorder?.(tasinan, i);
+                        setTasinan(null);
+                        setHedef(null);
+                    }, "data-tasinan": tasinan === oge || undefined, "data-hedef": hedef === oge || undefined, className: "tamga-card tamga-tasi relative overflow-hidden", children: [_jsx("img", { src: url, alt: name, className: "aspect-square w-full object-cover" }), i === 0 ? (_jsx("span", { className: "tamga-chip absolute top-1.5 left-1.5", children: labels.primary })) : null, _jsxs("span", { className: "tamga-gutter flex items-center gap-1 py-1.5", children: [_jsx("button", { type: "button", className: "tamga-mini-btn", "aria-label": labels.moveLeft, disabled: i === 0, onClick: () => onReorder?.(oge, i - 1), children: _jsx(Icon, { icon: CaretLeft, size: "xs" }) }), _jsx("button", { type: "button", className: "tamga-mini-btn", "aria-label": labels.moveRight, disabled: i === items.length - 1, onClick: () => onReorder?.(oge, i + 1), children: _jsx(Icon, { icon: CaretRight, size: "xs" }) }), _jsx("button", { type: "button", className: "tamga-mini-btn ml-auto", "aria-label": labels.remove, onClick: () => onRemove?.(oge), children: _jsx(Icon, { icon: Close, size: "xs" }) })] })] }, oge))) })) : null] }));
 }