tamga-ui 0.1.1 → 0.2.1

package/dist/components/appearance.js

@@ -0,0 +1,73 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useId, useRef, useState } from "react";
+import { cn } from "../lib/cn.js";
+import { IMAGE_ACCEPT, prepareImage } from "../lib/image.js";
+import { Alert } from "./primitives.js";
+import { Button } from "./button.js";
+/**
+ * Brand colour chosen from a few squares, or written by hand.
+ * TR: Birkaç kareden seçilen ya da elle yazılan marka rengi.
+ */
+export function ColorSwatches({ options, value, onChange, customLabel, custom = true, className, }) {
+    const secili = (hex) => hex.toLowerCase() === value.toLowerCase();
+    const hazirMi = options.some((o) => secili(o.hex));
+    return (_jsxs("span", { className: cn("flex flex-wrap items-center gap-3", className), children: [options.map((o) => (_jsx("button", { type: "button", className: "tamga-swatch", "data-selected": secili(o.hex), "aria-label": o.label, title: o.label, onClick: () => onChange(o.hex), children: _jsx("span", { "aria-hidden": true, style: { background: o.hex } }) }, o.hex))), custom ? (_jsxs("label", { className: "tamga-swatch", "data-selected": !hazirMi, title: customLabel, children: [_jsx("span", { className: "sr-only", children: customLabel }), _jsx("input", { type: "color", value: hazirMi ? options[0].hex : value, onChange: (e) => onChange(e.target.value), className: "tamga-color-input", "aria-label": customLabel })] })) : null] }));
+}
+function Yarim({ theme }) {
+    return (_jsxs("span", { className: "tamga-theme-half", "data-theme": theme, "aria-hidden": true, children: [_jsxs("span", { className: "tamga-theme-rail", children: [_jsx("span", { className: "tamga-theme-dot", "data-accent": "true" }), _jsx("span", { className: "tamga-theme-dot" }), _jsx("span", { className: "tamga-theme-dot" })] }), _jsxs("span", { className: "tamga-theme-body", children: [_jsx("span", { className: "tamga-theme-line", style: { width: "70%" } }), _jsx("span", { className: "tamga-theme-line", style: { width: "45%" } }), _jsx("span", { className: "tamga-theme-line", "data-accent": "true", style: { width: "30%" } }), _jsx("span", { className: "tamga-theme-line", style: { width: "60%" } })] })] }));
+}
+/**
+ * Theme picked from three little pictures of the panel.
+ * TR: Panelin üç küçük resminden seçilen tema.
+ *
+ * "Light · Dark · System" were three words, and a theme is not chosen with
+ * words: the person wants to see the result. "System" shows both halves in one
+ * frame, which is exactly what it means.
+ * TR: "Açık · Koyu · Sistem" üç kelimeydi, ve bir tema kelimeyle seçilmiyor:
+ * kullanıcı sonucu görmek istiyor. "Sistem" iki yarımı tek karede gösteriyor,
+ * anlamı tam olarak bu.
+ */
+export function ThemeCards({ value, onChange, labels, className, }) {
+    const secenekler = [
+        { deger: "light", ad: labels.light },
+        { deger: "dark", ad: labels.dark },
+        { deger: "system", ad: labels.system },
+    ];
+    return (_jsx("div", { role: "radiogroup", "aria-label": labels.group, className: cn("flex flex-wrap gap-3", className), children: secenekler.map((s) => (_jsxs("button", { type: "button", role: "radio", "aria-checked": value === s.deger, tabIndex: value === s.deger ? 0 : -1, "data-selected": value === s.deger, className: "tamga-theme-card", onClick: () => onChange(s.deger), children: [_jsxs("span", { className: "tamga-theme-box", children: [s.deger === "dark" ? _jsx(Yarim, { theme: "dark" }) : _jsx(Yarim, { theme: "light" }), s.deger === "system" ? _jsx(Yarim, { theme: "dark" }) : null] }), _jsx("span", { className: "tamga-theme-name", children: s.ad })] }, s.deger))) }));
+}
+/**
+ * One image with a preview, a replace and a remove.
+ * TR: Önizlemesi, değiştirmesi ve kaldırması olan tek bir görsel.
+ *
+ * NOT `FileUpload`: that one is a GALLERY (multi select, reorder arrows, a
+ * "cover" badge). Right for product photos, wrong for a single logo, where it
+ * offers reorder arrows with nothing to reorder.
+ * TR: `FileUpload` DEĞİL: o bir GALERİ (çoklu seçim, sıralama okları, "kapak"
+ * rozeti). Ürün fotoğrafları için doğru, tek bir logo için yanlış.
+ */
+export function ImageField({ value, onChange, maxEdge, labels, preview, extra, className, }) {
+    const id = useId();
+    const girdi = useRef(null);
+    const [hata, setHata] = useState(null);
+    async function al(file) {
+        if (!file)
+            return;
+        setHata(null);
+        try {
+            onChange(await prepareImage(file, maxEdge));
+        }
+        catch (e) {
+            const kod = e instanceof Error ? e.message : "unreadable";
+            setHata(kod === "type" ? labels.errorType : kod === "size" ? labels.errorSize : labels.errorUnreadable);
+        }
+        finally {
+            /* GİRDİ SIFIRLANIYOR: aynı dosya ikinci kez seçilince `change` hiç
+               çıkmıyor, çünkü değer değişmiyor. Kullanıcı için bu "ikinci denemede
+               çalışmıyor" demek. */
+            if (girdi.current)
+                girdi.current.value = "";
+        }
+    }
+    return (_jsxs("div", { className: cn("flex flex-col gap-3", className), children: [_jsx("input", { ref: girdi, id: id, type: "file", accept: IMAGE_ACCEPT, className: "sr-only", onChange: (e) => al(e.target.files?.[0]) }), _jsxs("div", { className: "flex flex-wrap items-center gap-4", children: [_jsx("span", { className: "tamga-image-field", "data-empty": value ? undefined : "true", children: value ? preview(value) : labels.empty }), _jsxs("span", { className: "flex flex-wrap items-center gap-2", children: [_jsx(Button, { type: "button", onClick: () => girdi.current?.click(), children: value ? labels.replace : labels.upload }), extra, value ? (_jsx(Button, { type: "button", variant: "ghost", onClick: () => onChange(null), children: labels.remove })) : null] })] }), hata ? _jsx(Alert, { state: "danger", title: hata }) : null] }));
+}

package/dist/components/chrome.d.ts

@@ -1,3 +1,4 @@
+import { type ComponentType, type ReactNode } from "react";
 /**
  * Açık/koyu tema düğmesi.
  *
@@ -21,15 +22,32 @@
  * ortada kayan bir anahtar — yani ikisi yan yana aynı satırda oturuyor.
  */
 export declare function ThemeToggle({ labels, variant, storageKey, className, }: {
+    /**
+     * `icon` and `switch` need ACTION words, `select` needs STATE words. TR: `icon` ve `switch`
+     * EYLEM sözcüğü ister, `select` DURUM sözcüğü.
+     *
+     * A button and a switch are pressed to DO something, so they are named by what pressing them
+     * does ("switch to dark"). A select shows what is currently CHOSEN, so it is named by the
+     * state ("Dark"). Reusing the action words in the select would put "Switch to dark theme" in
+     * the box while the theme is already light: the control would be announcing its own opposite.
+     * TR: Düğme ve anahtar bir şey YAPMAK için basılıyor, o yüzden basınca ne olacağıyla
+     * adlandırılıyorlar ("koyu temaya geç"). Seçim kutusu ise o an SEÇİLİ olanı gösteriyor, yani
+     * durumla adlandırılıyor ("Koyu"). Eylem sözcüklerini kutuda kullanmak, tema zaten açıkken
+     * kutuda "Koyu temaya geç" yazması demekti: kontrol kendi tersini duyurur.
+     */
     labels: {
         toLight: string;
         toDark: string;
+    } | {
+        light: string;
+        dark: string;
     };
     /**
-     * `icon` a square button · `switch` the same shape as a language toggle. TR: `icon` kare
-     * düğme · `switch` bir dil anahtarıyla aynı şekil.
+     * `icon` a square button · `switch` the same shape as a language toggle · `select` a box that
+     * says the current theme in words. TR: `icon` kare düğme · `switch` bir dil anahtarıyla aynı
+     * şekil · `select` o anki temayı sözcükle yazan bir kutu.
      */
-    variant?: "icon" | "switch";
+    variant?: "icon" | "switch" | "select";
     storageKey?: string;
     className?: string;
 }): import("react").JSX.Element;
@@ -84,4 +102,37 @@ export declare function LogoTile({ name, src, size, className, }: {
     size?: "base" | "sm";
     className?: string;
 }): import("react").JSX.Element;
+/**
+ * Şeridin sağ ucundaki hesap düğmesi.
+ *
+ * NEDEN BİR BİLEŞEN, VE SAYARAK. İki panelde de aynı şey elle kuruldu:
+ * `<button className="tamga-icon-btn"><Avatar bare …/></button>`. `Avatar`ın
+ * `bare` prop'u tam bu iş için var ve JSDoc'u bunu anlatıyor, ama bulunmadı;
+ * ikinci kurulumda avatar kendi çerçevesiyle kondu ve şeritteki öteki
+ * kontrollerden farklı boyda durdu. Bulunmayan bir prop, olmayan proptur.
+ *
+ * ÖLÇÜ ŞERİDİN ÖLÇÜSÜ. Kare `--control` (40px), yani tema anahtarı ve öteki
+ * simge düğmeleriyle birebir aynı. Bir araç çubuğunda yükseklik tek karardır;
+ * tek bir kontrolün farklı durması bütün şeridi hizasız gösteriyor.
+ *
+ * FOTOĞRAF YOKSA BAŞ HARFLER: `Avatar` zaten öyle davranıyor, ve bir hesabın
+ * fotoğrafı olmaması normal hâl.
+ */
+export declare function AccountButton({ name, src, label, onClick, href, linkComponent: Link, className, }: {
+    /** The name initials are taken from; shown when there is no photo. TR: Baş harflerin çıkarıldığı ad; fotoğraf yoksa görünen bu. */
+    name: string;
+    src?: string;
+    /** Accessible name: "Account menu", "Profile". The caller translates it. TR: Erişilebilir ad: "Hesap menüsü", "Profil". Çağıran çeviriyor. */
+    label: string;
+    onClick?: () => void;
+    /** Makes the control a link instead of a button; not used together with `onClick`. TR: Verilirse düğme bir bağlantı olur; `onClick` ile birlikte kullanılmaz. */
+    href?: string;
+    linkComponent?: ComponentType<{
+        href: string;
+        className?: string;
+        children?: ReactNode;
+        [k: string]: unknown;
+    }>;
+    className?: string;
+}): import("react").JSX.Element;
 //# sourceMappingURL=chrome.d.ts.map

package/dist/components/chrome.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"chrome.d.ts","sourceRoot":"","sources":["../../src/components/chrome.tsx"],"names":[],"mappings":"AA8BA;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,wBAAgB,WAAW,CAAC,EAC1B,MAAM,EACN,OAAgB,EAChB,UAA0B,EAC1B,SAAS,GACV,EAAE;IACD,MAAM,EAAE;QAAE,OAAO,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAA;KAAE,CAAC;IAC5C;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,GAAG,QAAQ,CAAC;IAC5B,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,+BAmDA;AAED;;;;;;;;;;;;;;GAcG;AACH,wBAAgB,cAAc,CAAC,EAC7B,OAAO,EACP,OAAO,EACP,QAAQ,EACR,KAAK,EACL,SAAS,GACV,EAAE;IACD;;;OAGG;IACH,OAAO,EAAE,SAAS;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,EAAE,CAAC;IACrD,OAAO,EAAE,MAAM,CAAC;IAChB,QAAQ,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACjC,mFAAmF;IACnF,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,+BAgCA;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,QAAQ,CAAC,EACvB,IAAI,EACJ,GAAG,EACH,IAAa,EACb,SAAS,GACV,EAAE;IACD;;;OAGG;IACH,IAAI,EAAE,MAAM,CAAC;IACb,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,+BAaA"}
+{"version":3,"file":"chrome.d.ts","sourceRoot":"","sources":["../../src/components/chrome.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAuB,KAAK,aAAa,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AA8BhF;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,wBAAgB,WAAW,CAAC,EAC1B,MAAM,EACN,OAAgB,EAChB,UAA0B,EAC1B,SAAS,GACV,EAAE;IACD;;;;;;;;;;;;OAYG;IACH,MAAM,EAAE;QAAE,OAAO,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAA;KAAE,GAAG;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAA;KAAE,CAAC;IAC9E;;;;OAIG;IACH,OAAO,CAAC,EAAE,MAAM,GAAG,QAAQ,GAAG,QAAQ,CAAC;IACvC,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,+BA4EA;AAED;;;;;;;;;;;;;;GAcG;AACH,wBAAgB,cAAc,CAAC,EAC7B,OAAO,EACP,OAAO,EACP,QAAQ,EACR,KAAK,EACL,SAAS,GACV,EAAE;IACD;;;OAGG;IACH,OAAO,EAAE,SAAS;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,EAAE,CAAC;IACrD,OAAO,EAAE,MAAM,CAAC;IAChB,QAAQ,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACjC,mFAAmF;IACnF,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,+BAgCA;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,QAAQ,CAAC,EACvB,IAAI,EACJ,GAAG,EACH,IAAa,EACb,SAAS,GACV,EAAE;IACD;;;OAGG;IACH,IAAI,EAAE,MAAM,CAAC;IACb,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,+BAaA;AAED;;;;;;;;;;;;;;;GAeG;AACH,wBAAgB,aAAa,CAAC,EAC5B,IAAI,EACJ,GAAG,EACH,KAAK,EACL,OAAO,EACP,IAAI,EACJ,aAAa,EAAE,IAAI,EACnB,SAAS,GACV,EAAE;IACD,mIAAmI;IACnI,IAAI,EAAE,MAAM,CAAC;IACb,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,8IAA8I;IAC9I,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,iKAAiK;IACjK,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,aAAa,CAAC,EAAE,aAAa,CAAC;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,SAAS,CAAC,EAAE,MAAM,CAAC;QAAC,QAAQ,CAAC,EAAE,SAAS,CAAC;QAAC,CAAC,CAAC,EAAE,MAAM,GAAG,OAAO,CAAA;KAAE,CAAC,CAAC;IAChH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,+BAyBA"}

package/dist/components/chrome.js

@@ -2,7 +2,9 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useState } from "react";
 import { cn } from "../lib/cn.js";
+import { Avatar } from "./avatar.js";
 import { Icon } from "./icon.js";
+import { Select } from "./primitives.js";
 import { Switch } from "./switch.js";
 import { ThemeDark, ThemeLight } from "./icons.js";
 /**
@@ -65,10 +67,22 @@ export function ThemeToggle({ labels, variant = "icon", storageKey = "tamga-them
         document.documentElement.classList.toggle("dark", next);
         write(storageKey, next ? "dark" : "light");
     }
+    if (variant === "select") {
+        /* DURUM SÖZCÜKLERİ ŞART, ve verilmediyse bu bir hata. Sessizce eylem
+           sözcüklerine düşmek, kutuda kendi tersini yazan bir kontrol üretirdi. */
+        if (!("light" in labels)) {
+            throw new Error('ThemeToggle variant="select" için labels {light, dark} olmalı');
+        }
+        return (_jsx(Select, { options: [labels.light, labels.dark], value: dark ? labels.dark : labels.light, onChange: (v) => {
+                const next = v === labels.dark;
+                if (next !== dark)
+                    toggle();
+            }, placeholder: labels.light, "aria-label": labels.light + " / " + labels.dark, className: cn("w-28", className) }));
+    }
     if (variant === "switch") {
-        return (_jsxs("span", { className: cn("flex items-center gap-2", className), children: [_jsx(Icon, { icon: ThemeLight, size: "xs", "aria-hidden": true, className: dark ? "text-ink-faint" : "text-ink" }), _jsx(Switch, { on: dark, onChange: toggle, label: dark ? labels.toLight : labels.toDark }), _jsx(Icon, { icon: ThemeDark, size: "xs", "aria-hidden": true, className: dark ? "text-ink" : "text-ink-faint" })] }));
+        return (_jsxs("span", { className: cn("flex items-center gap-2", className), children: [_jsx(Icon, { icon: ThemeLight, size: "xs", "aria-hidden": true, className: dark ? "text-ink-faint" : "text-ink" }), _jsx(Switch, { on: dark, onChange: toggle, label: "toLight" in labels ? (dark ? labels.toLight : labels.toDark) : "" }), _jsx(Icon, { icon: ThemeDark, size: "xs", "aria-hidden": true, className: dark ? "text-ink" : "text-ink-faint" })] }));
     }
-    return (_jsx("button", { type: "button", onClick: toggle, className: cn("tamga-icon-btn", className), "aria-label": dark ? labels.toLight : labels.toDark, children: _jsx(Icon, { icon: dark ? ThemeLight : ThemeDark, size: "sm" }) }));
+    return (_jsx("button", { type: "button", onClick: toggle, className: cn("tamga-icon-btn", className), "aria-label": "toLight" in labels ? (dark ? labels.toLight : labels.toDark) : undefined, children: _jsx(Icon, { icon: dark ? ThemeLight : ThemeDark, size: "sm" }) }));
 }
 /**
  * Dil değiştirici.
@@ -105,3 +119,30 @@ export function LocaleSwitcher({ locales, current, onChange, label, className, }
 export function LogoTile({ name, src, size = "base", className, }) {
     return (_jsx("span", { className: cn("tamga-logo-tile", size === "sm" && "tamga-logo-tile-sm", className), children: src ? (_jsx("img", { src: src, alt: "", className: "h-full w-full object-contain p-1.5" })) : (_jsx("span", { "aria-hidden": true, className: "font-mono text-subhead font-semibold text-ink-faint", children: name.trim().charAt(0).toLocaleUpperCase() })) }));
 }
+/**
+ * Şeridin sağ ucundaki hesap düğmesi.
+ *
+ * NEDEN BİR BİLEŞEN, VE SAYARAK. İki panelde de aynı şey elle kuruldu:
+ * `<button className="tamga-icon-btn"><Avatar bare …/></button>`. `Avatar`ın
+ * `bare` prop'u tam bu iş için var ve JSDoc'u bunu anlatıyor, ama bulunmadı;
+ * ikinci kurulumda avatar kendi çerçevesiyle kondu ve şeritteki öteki
+ * kontrollerden farklı boyda durdu. Bulunmayan bir prop, olmayan proptur.
+ *
+ * ÖLÇÜ ŞERİDİN ÖLÇÜSÜ. Kare `--control` (40px), yani tema anahtarı ve öteki
+ * simge düğmeleriyle birebir aynı. Bir araç çubuğunda yükseklik tek karardır;
+ * tek bir kontrolün farklı durması bütün şeridi hizasız gösteriyor.
+ *
+ * FOTOĞRAF YOKSA BAŞ HARFLER: `Avatar` zaten öyle davranıyor, ve bir hesabın
+ * fotoğrafı olmaması normal hâl.
+ */
+export function AccountButton({ name, src, label, onClick, href, linkComponent: Link, className, }) {
+    const ic = (_jsx(Avatar, { name: name, src: src, size: 38, bare: true }));
+    const sinif = cn("tamga-icon-btn overflow-hidden p-0", className);
+    if (href && Link) {
+        return (_jsx(Link, { href: href, "aria-label": label, className: sinif, children: ic }));
+    }
+    if (href) {
+        return (_jsx("a", { href: href, "aria-label": label, className: sinif, children: ic }));
+    }
+    return (_jsx("button", { type: "button", onClick: onClick, "aria-label": label, className: sinif, children: ic }));
+}

package/dist/components/primitives.d.ts

@@ -38,7 +38,7 @@ export declare function Field({ label, description, error, children, htmlFor, }:
     htmlFor?: string;
 }): import("react").JSX.Element;
 /** A plain select: the same overlay as the searchable one, without the search. */
-export declare function Select({ options, value, onChange, placeholder, loading, loadingRows, className, }: {
+export declare function Select({ options, value, onChange, placeholder, loading, loadingRows, "aria-label": ariaLabel, className, }: {
     options: string[];
     value?: string;
     onChange?: (v: string) => void;
@@ -71,17 +71,47 @@ export declare function Select({ options, value, onChange, placeholder, loading,
      * hatadır.
      */
     loadingRows?: number;
+    /**
+     * Accessible name when the control has no visible label. TR: Görünür etiketi
+     * olmayan kontrolün erişilebilir adı.
+     *
+     * WHY IT EXISTS. Inside a `Field` the label is already wired and this is not
+     * needed. But a select can also sit alone in a toolbar (a language picker, a
+     * page-size chooser) where there is no room for a label, and there it was
+     * announced as just "button": a screen reader user heard the current value
+     * and no clue what changing it would do. TR: NEDEN VAR. Bir `Field` içinde
+     * etiket zaten bağlı ve bu gerekmiyor. Ama bir seçim kutusu bir araç
+     * çubuğunda tek başına da durabiliyor (dil seçici, sayfa boyu) ve orada
+     * etikete yer yok; o hâliyle yalnız "düğme" diye duyuruluyordu: ekran
+     * okuyucu kullanıcısı o anki değeri duyuyor, değiştirince ne olacağına dair
+     * hiçbir şey duymuyordu.
+     */
+    "aria-label"?: string;
     /** Genişlik ve konum çağıranın. Varsayılan `w-56`; `w-full` verildiğinde
      *  tailwind-merge onu ezer, yani kontrol kabına uyar. */
     className?: string;
 }): import("react").JSX.Element;
 /** Side panel. Overlay plane, so it carries the 6px offset and a scrim. */
-export declare function Sheet({ open, onClose, title, children, footer, loading, closeLabel, }: {
+export declare function Sheet({ open, onClose, title, children, footer, loading, closeLabel, side, }: {
     open: boolean;
     onClose: () => void;
     title: string;
     children: React.ReactNode;
     footer?: React.ReactNode;
+    /**
+     * Which edge the panel enters from. TR: Panelin hangi kenardan girdiği.
+     *
+     * NOT A TASTE, A MEANING. `end` is for detail about the thing you were
+     * looking at: it opens beside the record, on the side the eye already ended
+     * on. `start` is for NAVIGATION, because a menu lives on the left in every
+     * panel this kit builds, and a menu that slides in from the opposite side
+     * reads as a different kind of thing. TR: Zevk değil, ANLAM. `end` bakılan
+     * şeyin ayrıntısı için: kaydın yanında, gözün zaten bittiği tarafta
+     * açılıyor. `start` GEZİNME için, çünkü bu kitin kurduğu her panelde menü
+     * solda yaşıyor, ve ters taraftan giren bir menü başka bir şey gibi
+     * okunuyor.
+     */
+    side?: "start" | "end";
     /**
      * Accessible name for the close control, supplied by the caller (docs/08 rule 5). TR: Kapatma
      * kontrolünün erişilebilir adı, çağıran veriyor (docs/08 kural 5).

package/dist/components/primitives.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"primitives.d.ts","sourceRoot":"","sources":["../../src/components/primitives.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,WAAW,CAAC;AAWtC,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC;AAQvC,wBAAgB,SAAS,CAAC,EAAE,QAAgB,EAAE,EAAE;IAAE,QAAQ,CAAC,EAAE,OAAO,CAAA;CAAE,+BAErE;AAED,yFAAyF;AACzF,wBAAgB,MAAM,CAAC,EACrB,IAAW,EACX,KAAK,EACL,QAAa,GACd,EAAE;IACD,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;CAC1B,+BAQA;AAED,wBAAgB,KAAK,CAAC,EACpB,KAAiB,EACjB,KAAK,EACL,QAAQ,EACR,MAAM,GACP,EAAE;IACD,KAAK,CAAC,EAAE,IAAI,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC1B,+BAoBA;AAED,wBAAgB,UAAU,CAAC,EACzB,KAAK,EACL,KAAK,GACN,EAAE;IACD,KAAK,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,IAAI,CAAC,EAAE,MAAM,CAAA;KAAE,EAAE,CAAC;IAC1C;;;OAGG;IACH,KAAK,EAAE,MAAM,CAAC;CACf,+BA0BA;AAED,wBAAgB,KAAK,CAAC,EACpB,KAAK,EACL,WAAW,EACX,KAAK,EACL,QAAQ,EACR,OAAO,GACR,EAAE;IACD,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB,+BAgBA;AAED,kFAAkF;AAClF,wBAAgB,MAAM,CAAC,EACrB,OAAO,EACP,KAAK,EACL,QAAQ,EACR,WAAW,EACX,OAAe,EACf,WAAe,EACf,SAAS,GACV,EAAE;IACD,OAAO,EAAE,MAAM,EAAE,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;IAC/B;;;OAGG;IACH,WAAW,EAAE,MAAM,CAAC;IACpB;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;;;;;;;;;;;;;;;OAiBG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;6DACyD;IACzD,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,+BAyEA;AAED,2EAA2E;AAC3E,wBAAgB,KAAK,CAAC,EACpB,IAAI,EACJ,OAAO,EACP,KAAK,EACL,QAAQ,EACR,MAAM,EACN,OAAe,EACf,UAAU,GACX,EAAE;IACD,IAAI,EAAE,OAAO,CAAC;IACd,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB;;;OAGG;IACH,UAAU,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,sCA2CA"}
+{"version":3,"file":"primitives.d.ts","sourceRoot":"","sources":["../../src/components/primitives.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,IAAI,EAAE,MAAM,WAAW,CAAC;AAWtC,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC;AAQvC,wBAAgB,SAAS,CAAC,EAAE,QAAgB,EAAE,EAAE;IAAE,QAAQ,CAAC,EAAE,OAAO,CAAA;CAAE,+BAErE;AAED,yFAAyF;AACzF,wBAAgB,MAAM,CAAC,EACrB,IAAW,EACX,KAAK,EACL,QAAa,GACd,EAAE;IACD,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;CAC1B,+BAQA;AAED,wBAAgB,KAAK,CAAC,EACpB,KAAiB,EACjB,KAAK,EACL,QAAQ,EACR,MAAM,GACP,EAAE;IACD,KAAK,CAAC,EAAE,IAAI,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC1B,+BAoBA;AAED,wBAAgB,UAAU,CAAC,EACzB,KAAK,EACL,KAAK,GACN,EAAE;IACD,KAAK,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,IAAI,CAAC,EAAE,MAAM,CAAA;KAAE,EAAE,CAAC;IAC1C;;;OAGG;IACH,KAAK,EAAE,MAAM,CAAC;CACf,+BA0BA;AAED,wBAAgB,KAAK,CAAC,EACpB,KAAK,EACL,WAAW,EACX,KAAK,EACL,QAAQ,EACR,OAAO,GACR,EAAE;IACD,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB,+BAgBA;AAED,kFAAkF;AAClF,wBAAgB,MAAM,CAAC,EACrB,OAAO,EACP,KAAK,EACL,QAAQ,EACR,WAAW,EACX,OAAe,EACf,WAAe,EACf,YAAY,EAAE,SAAS,EACvB,SAAS,GACV,EAAE;IACD,OAAO,EAAE,MAAM,EAAE,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;IAC/B;;;OAGG;IACH,WAAW,EAAE,MAAM,CAAC;IACpB;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB;;;;;;;;;;;;;;;;;OAiBG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;;;;;;;;;;;;OAcG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;6DACyD;IACzD,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,+BA0EA;AAED,2EAA2E;AAC3E,wBAAgB,KAAK,CAAC,EACpB,IAAI,EACJ,OAAO,EACP,KAAK,EACL,QAAQ,EACR,MAAM,EACN,OAAe,EACf,UAAU,EACV,IAAY,GACb,EAAE;IACD,IAAI,EAAE,OAAO,CAAC;IACd,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB;;;;;;;;;;;;OAYG;IACH,IAAI,CAAC,EAAE,OAAO,GAAG,KAAK,CAAC;IACvB;;;OAGG;IACH,UAAU,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,sCAoDA"}

package/dist/components/primitives.js

@@ -38,7 +38,7 @@ export function Field({ label, description, error, children, htmlFor, }) {
     return (_jsxs("div", { className: "flex flex-col gap-2", children: [_jsx("label", { htmlFor: htmlFor, className: "text-small font-medium text-ink", children: label }), children, error ? (_jsx("p", { className: "text-small", style: { color: toneOf("danger").fg }, children: error })) : description ? (_jsx("p", { className: "text-small text-ink-faint", children: description })) : null] }));
 }
 /** A plain select: the same overlay as the searchable one, without the search. */
-export function Select({ options, value, onChange, placeholder, loading = false, loadingRows = 4, className, }) {
+export function Select({ options, value, onChange, placeholder, loading = false, loadingRows = 4, "aria-label": ariaLabel, className, }) {
     const [open, setOpen] = useState(false);
     const [inner, setInner] = useState(value ?? "");
     const box = useRef(null);
@@ -56,14 +56,14 @@ export function Select({ options, value, onChange, placeholder, loading = false,
         document.addEventListener("mousedown", away);
         return () => document.removeEventListener("mousedown", away);
     }, [open]);
-    return (_jsxs("div", { ref: box, className: cn("relative w-56", className), children: [_jsxs(Button, { full: true, className: "justify-between", "aria-haspopup": "listbox", "aria-expanded": open, onClick: () => setOpen((o) => !o), children: [_jsx("span", { className: cn("min-w-0 truncate", current ? "" : "text-ink-faint"), children: current || placeholder }), _jsx(Icon, { icon: CaretRight, size: "xs", className: "shrink-0 rotate-90" })] }), open && (_jsxs("div", { ref: list, role: "listbox", className: "tamga-overlay absolute left-0 top-[var(--overlay-below)] z-40 w-full overflow-hidden py-1", "aria-busy": loading || undefined, children: [loading && _jsx(SkeletonOptions, { rows: loadingRows }), !loading && options.map((o) => (_jsxs("button", { role: "option", "aria-selected": o === current, "data-tamga-option": true, className: "tamga-option", "data-selected": o === current, onClick: () => {
+    return (_jsxs("div", { ref: box, className: cn("relative w-56", className), children: [_jsxs(Button, { full: true, className: "justify-between", "aria-haspopup": "listbox", "aria-expanded": open, "aria-label": ariaLabel, onClick: () => setOpen((o) => !o), children: [_jsx("span", { className: cn("min-w-0 truncate", current ? "" : "text-ink-faint"), children: current || placeholder }), _jsx(Icon, { icon: CaretRight, size: "xs", className: "shrink-0 rotate-90" })] }), open && (_jsxs("div", { ref: list, role: "listbox", className: "tamga-overlay absolute left-0 top-[var(--overlay-below)] z-40 w-full overflow-hidden py-1", "aria-busy": loading || undefined, children: [loading && _jsx(SkeletonOptions, { rows: loadingRows }), !loading && options.map((o) => (_jsxs("button", { role: "option", "aria-selected": o === current, "data-tamga-option": true, className: "tamga-option", "data-selected": o === current, onClick: () => {
                             setInner(o);
                             onChange?.(o);
                             setOpen(false);
                         }, children: [o, o === current && _jsx(Icon, { icon: Check, size: "xs", weight: "bold", className: "ml-auto" })] }, o)))] }))] }));
 }
 /** Side panel. Overlay plane, so it carries the 6px offset and a scrim. */
-export function Sheet({ open, onClose, title, children, footer, loading = false, closeLabel, }) {
+export function Sheet({ open, onClose, title, children, footer, loading = false, closeLabel, side = "end", }) {
     /* the trap has to be called before any early return, so the hook lives here
        and the null is returned after it */
     const panel = useFocusTrap(open);
@@ -77,5 +77,12 @@ export function Sheet({ open, onClose, title, children, footer, loading = false,
     }, [open, onClose]);
     if (!open)
         return null;
-    return (_jsxs("div", { className: "fixed inset-0 z-50 flex justify-end", children: [_jsx("div", { className: "tamga-scrim absolute inset-0", "aria-hidden": true, onClick: onClose }), _jsxs("aside", { ref: panel, role: "dialog", "aria-modal": true, "aria-label": title, className: "tamga-overlay relative z-10 flex h-full w-full max-w-md flex-col", style: { borderRadius: 0 }, "aria-busy": loading || undefined, children: [_jsxs("div", { className: "tamga-head tamga-gutter tamga-section", children: [_jsx("h3", { className: "text-subhead font-semibold", children: title }), _jsx(MiniButton, { onClick: onClose, "aria-label": closeLabel, className: "ml-auto", children: _jsx(Icon, { icon: Close, size: "xs" }) })] }), _jsx("div", { className: "tamga-gutter min-h-0 flex-1 overflow-y-auto py-6", children: loading ? _jsx(SkeletonPanel, { lines: 5, block: 120 }) : children }), footer ? (_jsx("div", { className: "tamga-gutter flex justify-end gap-2 border-t border-line py-4", children: footer })) : null] })] }));
+    return (_jsxs("div", { className: cn("fixed inset-0 z-50 flex", side === "start" ? "justify-start" : "justify-end"), children: [_jsx("div", { className: "tamga-scrim absolute inset-0", "aria-hidden": true, onClick: onClose }), _jsxs("aside", { ref: panel, role: "dialog", "aria-modal": true, "aria-label": title, 
+                /* PANEL KAYARAK GİRİYOR, VE GİRDİĞİ KENARDAN.
+                   Animasyonsuz hâli bir kare içinde beliriyordu: nereden geldiği,
+                   dolayısıyla nereye geri gideceği okunmuyordu. Kayma yönü `side` ile
+                   aynı; ters yönden kayan bir panel, kapatma hareketini de ters
+                   öğretiyor. `prefers-reduced-motion` açıksa kayma yok, panel yerinde
+                   beliriyor. */
+                className: cn("tamga-overlay relative z-10 flex h-full w-full max-w-md flex-col", side === "start" ? "tamga-sheet-start" : "tamga-sheet-end"), style: { borderRadius: 0 }, "aria-busy": loading || undefined, children: [_jsxs("div", { className: "tamga-head tamga-gutter tamga-section", children: [_jsx("h3", { className: "text-subhead font-semibold", children: title }), _jsx(MiniButton, { onClick: onClose, "aria-label": closeLabel, className: "ml-auto", children: _jsx(Icon, { icon: Close, size: "xs" }) })] }), _jsx("div", { className: "tamga-gutter min-h-0 flex-1 overflow-y-auto py-6", children: loading ? _jsx(SkeletonPanel, { lines: 5, block: 120 }) : children }), footer ? (_jsx("div", { className: "tamga-gutter flex justify-end gap-2 border-t border-line py-4", children: footer })) : null] })] }));
 }

package/dist/components/rail-link.d.ts

@@ -1,11 +1,11 @@
-import type { ReactNode } from "react";
+import type { ComponentType, ReactNode } from "react";
 /**
  * Kendi dosyasında, çünkü YENİ BİR KONTROL.
  *
  * Gerekçe: docs/gerekce/05-yuzey-ve-kabuk.md
  */
 /** İkon raylı gezinme öğesi. */
-export declare function RailLink({ label, active, href, onClick, className, children, showLabel, }: {
+export declare function RailLink({ label, active, href, onClick, className, children, showLabel, linkComponent: Link, }: {
     label: string;
     active?: boolean;
     href?: string;
@@ -20,5 +20,18 @@ export declare function RailLink({ label, active, href, onClick, className, chil
      * çubuğunda `true`.
      */
     showLabel?: boolean;
+    /**
+     * The router's link, so the rail does not force a full page load. Without it this component
+     * can only draw a plain `<a>`, and a shell that needs client routing ends up writing its own
+     * rail link instead of using this one. TR: Yönlendiricinin bağlantısı, ray tam sayfa
+     * yüklemeye zorlamasın diye. Olmadığında bu bileşen yalnız düz bir `<a>` çizebiliyor, ve
+     * istemci yönlendirmesi isteyen bir kabuk bunu kullanmak yerine kendi ray bağlantısını
+     * yazıyor.
+     */
+    linkComponent?: ComponentType<{
+        href: string;
+        children?: ReactNode;
+        [k: string]: unknown;
+    }>;
 }): import("react").JSX.Element;
 //# sourceMappingURL=rail-link.d.ts.map

package/dist/components/rail-link.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"rail-link.d.ts","sourceRoot":"","sources":["../../src/components/rail-link.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGvC;;;;GAIG;AAEH,gCAAgC;AAChC,wBAAgB,QAAQ,CAAC,EACvB,KAAK,EACL,MAAc,EACd,IAAI,EACJ,OAAO,EACP,SAAS,EACT,QAAQ,EACR,SAAiB,GAClB,EAAE;IACD,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,0BAA0B;IAC1B,QAAQ,EAAE,SAAS,CAAC;IACpB;;;;;OAKG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB,+BAwBA"}
+{"version":3,"file":"rail-link.d.ts","sourceRoot":"","sources":["../../src/components/rail-link.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAItD;;;;GAIG;AAEH,gCAAgC;AAChC,wBAAgB,QAAQ,CAAC,EACvB,KAAK,EACL,MAAc,EACd,IAAI,EACJ,OAAO,EACP,SAAS,EACT,QAAQ,EACR,SAAiB,EACjB,aAAa,EAAE,IAAI,GACpB,EAAE;IACD,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,0BAA0B;IAC1B,QAAQ,EAAE,SAAS,CAAC;IACpB;;;;;OAKG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;;;;;OAOG;IACH,aAAa,CAAC,EAAE,aAAa,CAAC;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,QAAQ,CAAC,EAAE,SAAS,CAAC;QAAC,CAAC,CAAC,EAAE,MAAM,GAAG,OAAO,CAAA;KAAE,CAAC,CAAC;CAC7F,+BA2CA"}

package/dist/components/rail-link.js

@@ -1,24 +1,26 @@
 "use client";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { cn } from "../lib/cn.js";
+import { Tooltip } from "./overlay.js";
 /**
  * Kendi dosyasında, çünkü YENİ BİR KONTROL.
  *
  * Gerekçe: docs/gerekce/05-yuzey-ve-kabuk.md
  */
 /** İkon raylı gezinme öğesi. */
-export function RailLink({ label, active = false, href, onClick, className, children, showLabel = false, }) {
+export function RailLink({ label, active = false, href, onClick, className, children, showLabel = false, linkComponent: Link, }) {
     const shared = {
         className: cn("tamga-rail-link", showLabel && "tamga-rail-link-wide", className),
         "data-active": active,
         "aria-label": label,
-        /* Etiket görünürken `title` yoktur: görünen bir metnin üstünde beliren
-           ipucu aynı şeyi ikinci kez söyler ve imleci geciktirir. */
-        title: showLabel ? undefined : label,
         "aria-current": active ? "page" : undefined,
     };
-    if (href) {
-        return (_jsxs("a", { href: href, ...shared, children: [children, showLabel && _jsx("span", { className: "truncate", children: label })] }));
-    }
-    return (_jsxs("button", { type: "button", onClick: onClick, ...shared, children: [children, showLabel && _jsx("span", { className: "truncate", children: label })] }));
+    const govde = (_jsxs(_Fragment, { children: [children, showLabel && _jsx("span", { className: "min-w-0 truncate", children: label })] }));
+    const kontrol = href ? (Link ? (_jsx(Link, { href: href, ...shared, children: govde })) : (_jsx("a", { href: href, ...shared, children: govde }))) : (_jsx("button", { type: "button", onClick: onClick, ...shared, children: govde }));
+    /* İPUCU BİLEŞENİN KENDİ İŞİ, ÇAĞIRANIN DEĞİL.
+       Burada `title={label}` vardı: tarayıcının gecikmeli gri balonu, kitin her
+       yerdeki ipucundan başka türlü görünüyor. Çağıranlar bu yüzden bir de elle
+       `Tooltip` sarıyordu ve ikisi üst üste biniyordu. Etiket görünürken ipucu
+       yok: görünen bir metnin üstünde beliren ipucu aynı şeyi ikinci kez söyler. */
+    return showLabel ? (kontrol) : (_jsx(Tooltip, { label: label, placement: "right", children: kontrol }));
 }

package/dist/components/square-picker.d.ts

@@ -0,0 +1,41 @@
+/**
+ * LOGODAN AMBLEM SEÇME — otomatik kesme DEĞİL.
+ *
+ * Sorulan soru şuydu: yüklenen logoyu ayırıp amblemi kendiliğinden çıkaramaz
+ * mıyız? Çıkaramayız, ve denememesi gerekiyor:
+ *
+ *   · Dosyada "amblem" diye işaretli bir şey yok. SVG'de bazen bir grup id'si
+ *     olur ama bu tasarımcının keyfine bağlı; PNG'de hiç yok.
+ *   · Konum sabit değil: amblem solda, üstte, sağda olabilir, yazının içine
+ *     gömülü olabilir, ya da hiç olmayabilir (yalnız kelime-logo).
+ *   · Hata SESSİZ ve KALICI olur. Yanlış kesim patlamaz; yarım bir harf
+ *     panelin her sayfasının sol üstünde durur ve kimse bunun otomatik
+ *     kesildiğini bilmez.
+ *
+ * Bu yüzden kesimi İNSAN yapıyor: kare bir çerçeve, sürüklenip boyutlanıyor.
+ * Sonuç tahmin değil karar.
+ *
+ * ÇERÇEVE ORANLA TUTULUYOR (0–1), piksel ile değil: önizleme ekrandan ekrana
+ * farklı ölçekte çiziliyor, oran her ölçekte aynı yeri gösteriyor. Ekrana
+ * çizilirken piksele dönüyor ve dönüşüm TEK YERDE (`kenarPx`): kesim
+ * matematiği ile çerçevenin CSS'i ayrı ayrı hesaplansaydı, kullanıcının
+ * gördüğü kare ile kesilen kare farklı olurdu — ve fark sessiz olurdu.
+ */
+export declare function SquarePicker({ open, source, onClose, onPick, maxEdge, labels, }: {
+    open: boolean;
+    /** The image the square is cut out of. TR: Üzerinden kesilecek görsel. */
+    source: string;
+    onClose: () => void;
+    onPick: (square: string) => void;
+    /** Edge of the produced square, in pixels. TR: Üretilen karenin kenarı, piksel. */
+    maxEdge?: number;
+    labels: {
+        title: string;
+        hint: string;
+        size: string;
+        cancel: string;
+        confirm: string;
+        close: string;
+    };
+}): import("react").JSX.Element;
+//# sourceMappingURL=square-picker.d.ts.map

package/dist/components/square-picker.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"square-picker.d.ts","sourceRoot":"","sources":["../../src/components/square-picker.tsx"],"names":[],"mappings":"AASA;;;;;;;;;;;;;;;;;;;;;;GAsBG;AACH,wBAAgB,YAAY,CAAC,EAC3B,IAAI,EACJ,MAAM,EACN,OAAO,EACP,MAAM,EACN,OAAa,EACb,MAAM,GACP,EAAE;IACD,IAAI,EAAE,OAAO,CAAC;IACd,0EAA0E;IAC1E,MAAM,EAAE,MAAM,CAAC;IACf,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,MAAM,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IACjC,mFAAmF;IACnF,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,MAAM,EAAE;QACN,KAAK,EAAE,MAAM,CAAC;QACd,IAAI,EAAE,MAAM,CAAC;QACb,IAAI,EAAE,MAAM,CAAC;QACb,MAAM,EAAE,MAAM,CAAC;QACf,OAAO,EAAE,MAAM,CAAC;QAChB,KAAK,EAAE,MAAM,CAAC;KACf,CAAC;CACH,+BAmHA"}

package/dist/components/square-picker.js

@@ -0,0 +1,90 @@
+"use client";
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useLayoutEffect, useRef, useState } from "react";
+import { Button } from "./button.js";
+import { Dialog } from "./overlay.js";
+import { Slider } from "./slider.js";
+import { Label } from "./surface.js";
+import { cropSquare } from "../lib/image.js";
+/**
+ * LOGODAN AMBLEM SEÇME — otomatik kesme DEĞİL.
+ *
+ * Sorulan soru şuydu: yüklenen logoyu ayırıp amblemi kendiliğinden çıkaramaz
+ * mıyız? Çıkaramayız, ve denememesi gerekiyor:
+ *
+ *   · Dosyada "amblem" diye işaretli bir şey yok. SVG'de bazen bir grup id'si
+ *     olur ama bu tasarımcının keyfine bağlı; PNG'de hiç yok.
+ *   · Konum sabit değil: amblem solda, üstte, sağda olabilir, yazının içine
+ *     gömülü olabilir, ya da hiç olmayabilir (yalnız kelime-logo).
+ *   · Hata SESSİZ ve KALICI olur. Yanlış kesim patlamaz; yarım bir harf
+ *     panelin her sayfasının sol üstünde durur ve kimse bunun otomatik
+ *     kesildiğini bilmez.
+ *
+ * Bu yüzden kesimi İNSAN yapıyor: kare bir çerçeve, sürüklenip boyutlanıyor.
+ * Sonuç tahmin değil karar.
+ *
+ * ÇERÇEVE ORANLA TUTULUYOR (0–1), piksel ile değil: önizleme ekrandan ekrana
+ * farklı ölçekte çiziliyor, oran her ölçekte aynı yeri gösteriyor. Ekrana
+ * çizilirken piksele dönüyor ve dönüşüm TEK YERDE (`kenarPx`): kesim
+ * matematiği ile çerçevenin CSS'i ayrı ayrı hesaplansaydı, kullanıcının
+ * gördüğü kare ile kesilen kare farklı olurdu — ve fark sessiz olurdu.
+ */
+export function SquarePicker({ open, source, onClose, onPick, maxEdge = 256, labels, }) {
+    const sahne = useRef(null);
+    const [olcu, setOlcu] = useState({ en: 0, boy: 0 });
+    const [x, setX] = useState(0);
+    const [y, setY] = useState(0);
+    const [oran, setOran] = useState(0.6);
+    const [suruyor, setSuruyor] = useState(false);
+    /* Her açılışta baştan: bir önceki logonun çerçevesini yeni logoya taşımak,
+       kullanıcıya alakasız bir yeri seçtirmenin en kolay yolu. */
+    useEffect(() => {
+        if (!open)
+            return;
+        setX(0);
+        setY(0);
+        setOran(0.6);
+    }, [open, source]);
+    /* Sahnenin gerçek boyu ÖLÇÜLÜYOR, tahmin edilmiyor: görsel yüklendikçe ve
+       pencere daraldıkça değişiyor, ve çerçevenin pikseli ona bağlı. */
+    useLayoutEffect(() => {
+        const el = sahne.current;
+        if (!el)
+            return;
+        const olc = () => setOlcu({ en: el.clientWidth, boy: el.clientHeight });
+        olc();
+        const gozcu = new ResizeObserver(olc);
+        gozcu.observe(el);
+        return () => gozcu.disconnect();
+    }, [open, source]);
+    /* KARE, SAHNENİN KISA KENARINA GÖRE. Bir logo 350×65 ise kare en fazla o 65
+       pikselin kadarı olabilir; uzun kenara göre ölçseydik çerçeve görselin
+       dışına taşardı. Kesim fonksiyonu da aynı kuralı kullanıyor. */
+    const kenarPx = Math.min(olcu.en, olcu.boy) * oran;
+    const tasi = useCallback((olay) => {
+        const el = sahne.current;
+        if (!suruyor || !el)
+            return;
+        const k = el.getBoundingClientRect();
+        const nx = (olay.clientX - k.left - kenarPx / 2) / k.width;
+        const ny = (olay.clientY - k.top - kenarPx / 2) / k.height;
+        setX(Math.max(0, Math.min(1 - kenarPx / k.width, nx)));
+        setY(Math.max(0, Math.min(1 - kenarPx / k.height, ny)));
+    }, [suruyor, kenarPx]);
+    async function onayla() {
+        onPick(await cropSquare(source, { x, y, size: oran }, maxEdge));
+        onClose();
+    }
+    return (_jsx(Dialog, { open: open, onClose: onClose, title: labels.title, closeLabel: labels.close, footer: _jsxs(_Fragment, { children: [_jsx(Button, { type: "button", onClick: onClose, children: labels.cancel }), _jsx(Button, { variant: "primary", type: "button", onClick: onayla, children: labels.confirm })] }), children: _jsxs("div", { className: "flex flex-col gap-4", children: [_jsx(Label, { children: labels.hint }), _jsx("div", { className: "rounded-[var(--radius-card)] border border-[var(--color-edge)] bg-[var(--color-shell)] p-4", children: _jsxs("div", { ref: sahne, onPointerDown: (e) => {
+                            setSuruyor(true);
+                            e.currentTarget.setPointerCapture(e.pointerId);
+                        }, onPointerMove: tasi, onPointerUp: () => setSuruyor(false), className: "relative cursor-crosshair touch-none select-none overflow-hidden", children: [_jsx("img", { src: source, alt: "", className: "pointer-events-none block w-full", draggable: false }), _jsx("span", { "aria-hidden": true, className: "pointer-events-none absolute border-2 border-[var(--color-accent-line)]", style: {
+                                    left: x * olcu.en,
+                                    top: y * olcu.boy,
+                                    width: kenarPx,
+                                    height: kenarPx,
+                                    /* Dışarısı karartılıyor: seçili kare kendi kenarlığından çok
+                                       çevresinin koyulmasıyla okunuyor. */
+                                    boxShadow: "0 0 0 9999px rgb(0 0 0 / 0.35)",
+                                } })] }) }), _jsx(Slider, { label: labels.size, value: Math.round(oran * 100), onChange: (v) => setOran(v / 100), min: 15, max: 100, suffix: "%" })] }) }));
+}

package/dist/index.d.ts

@@ -40,7 +40,10 @@ export { ErrorState } from "./components/error-state.js";
 export { LiveScope, useLiveClaim } from "./components/live-scope.js";
 export { Skeleton, SkeletonText, SkeletonRows, SkeletonKpi, SkeletonCard, SkeletonTable, SkeletonOptions, SkeletonPanel, SkeletonPageBand, } from "./components/skeleton.js";
 export { Surface, ScrollX, Rise, Swap, ListRow, CellActions, PageBand, Link, } from "./components/layout.js";
-export { ThemeToggle, LocaleSwitcher, LogoTile } from "./components/chrome.js";
+export { ThemeToggle, LocaleSwitcher, LogoTile, AccountButton } from "./components/chrome.js";
+export { ColorSwatches, ThemeCards, ImageField, type SwatchOption, type ThemeChoice, } from "./components/appearance.js";
+export { SquarePicker } from "./components/square-picker.js";
+export { prepareImage, cropSquare, IMAGE_ACCEPT, type ImageError } from "./lib/image.js";
 export { RailLink } from "./components/rail-link.js";
 export { Slider } from "./components/slider.js";
 export { Accordion, Collapsible } from "./components/disclosure.js";

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAGH,OAAO,EAAE,EAAE,EAAE,MAAM,aAAa,CAAC;AACjC,OAAO,EACL,KAAK,IAAI,EACT,KAAK,SAAS,EACd,KAAK,EACL,MAAM,EACN,SAAS,EACT,MAAM,EACN,OAAO,EACP,MAAM,GACP,MAAM,sBAAsB,CAAC;AAC9B,OAAO,EAAE,YAAY,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAGjE,OAAO,EACL,MAAM,EACN,cAAc,EACd,KAAK,WAAW,EAChB,UAAU,EACV,kBAAkB,EAClB,UAAU,GACX,MAAM,wBAAwB,CAAC;AAChC,OAAO,EAAE,KAAK,EAAE,aAAa,EAAE,KAAK,UAAU,EAAE,QAAQ,EAAE,KAAK,aAAa,EAAE,MAAM,uBAAuB,CAAC;AAG5G,OAAO,EAAE,QAAQ,EAAE,MAAM,0BAA0B,CAAC;AACpD,OAAO,EAAE,UAAU,EAAE,MAAM,6BAA6B,CAAC;AACzD,OAAO,EAAE,MAAM,EAAE,MAAM,wBAAwB,CAAC;AAChD,OAAO,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAC;AACtD,OAAO,EAAE,IAAI,EAAE,KAAK,OAAO,EAAE,MAAM,sBAAsB,CAAC;AAC1D,OAAO,EAAE,QAAQ,EAAE,KAAK,cAAc,EAAE,MAAM,2BAA2B,CAAC;AAC1E,OAAO,EAAE,UAAU,EAAE,KAAK,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AAGxE,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,QAAQ,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,yBAAyB,CAAC;AAGjF,OAAO,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,4BAA4B,CAAC;AACpE,OAAO,EAAE,UAAU,EAAE,SAAS,EAAE,SAAS,EAAE,YAAY,EAAE,KAAK,aAAa,EAAE,MAAM,4BAA4B,CAAC;AAChH,OAAO,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAC;AACtD,OAAO,EAAE,aAAa,EAAE,MAAM,gCAAgC,CAAC;AAG/D,OAAO,EAAE,WAAW,EAAE,MAAM,8BAA8B,CAAC;AAC3D,OAAO,EAAE,QAAQ,EAAE,KAAK,WAAW,EAAE,MAAM,0BAA0B,CAAC;AACtE,OAAO,EAAE,UAAU,EAAE,KAAK,UAAU,EAAE,MAAM,6BAA6B,CAAC;AAC1E,OAAO,EAAE,UAAU,EAAE,QAAQ,EAAE,KAAK,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,6BAA6B,CAAC;AAGjG,OAAO,EAAE,MAAM,EAAE,WAAW,EAAE,MAAM,wBAAwB,CAAC;AAC7D,OAAO,EAAE,UAAU,EAAE,KAAK,EAAE,GAAG,EAAE,MAAM,uBAAuB,CAAC;AAC/D,OAAO,EAAE,IAAI,EAAE,KAAK,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AAC3D,OAAO,EAAE,QAAQ,EAAE,MAAM,0BAA0B,CAAC;AACpD,OAAO,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AACtD,OAAO,EAAE,OAAO,EAAE,MAAM,yBAAyB,CAAC;AAClD,OAAO,EAAE,SAAS,EAAE,UAAU,EAAE,WAAW,EAAE,KAAK,UAAU,EAAE,MAAM,uBAAuB,CAAC;AAG5F,OAAO,EACL,SAAS,EACT,MAAM,EACN,KAAK,EACL,UAAU,EACV,KAAK,EACL,MAAM,EACN,KAAK,GACN,MAAM,4BAA4B,CAAC;AACpC,OAAO,EACL,YAAY,EACZ,KAAK,QAAQ,EACb,OAAO,EACP,OAAO,EACP,KAAK,EACL,KAAK,SAAS,EACd,aAAa,EACb,aAAa,EACb,MAAM,GACP,MAAM,yBAAyB,CAAC;AAGjC,OAAO,EACL,KAAK,GAAG,EACR,KAAK,WAAW,EAChB,KAAK,UAAU,EACf,UAAU,EACV,SAAS,EACT,UAAU,EACV,SAAS,EACT,UAAU,GACX,MAAM,6BAA6B,CAAC;AAGrC,OAAO,EAAE,UAAU,EAAE,MAAM,6BAA6B,CAAC;AACzD,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,MAAM,4BAA4B,CAAC;AACrE,OAAO,EACL,QAAQ,EACR,YAAY,EACZ,YAAY,EACZ,WAAW,EACX,YAAY,EACZ,aAAa,EACb,eAAe,EACf,aAAa,EACb,gBAAgB,GACjB,MAAM,0BAA0B,CAAC;AAKlC,OAAO,EACL,OAAO,EACP,OAAO,EACP,IAAI,EACJ,IAAI,EACJ,OAAO,EACP,WAAW,EACX,QAAQ,EACR,IAAI,GACL,MAAM,wBAAwB,CAAC;AAChC,OAAO,EAAE,WAAW,EAAE,cAAc,EAAE,QAAQ,EAAE,MAAM,wBAAwB,CAAC;AAC/E,OAAO,EAAE,QAAQ,EAAE,MAAM,2BAA2B,CAAC;AACrD,OAAO,EAAE,MAAM,EAAE,MAAM,wBAAwB,CAAC;AAGhD,OAAO,EAAE,SAAS,EAAE,WAAW,EAAE,MAAM,4BAA4B,CAAC;AAGpE,OAAO,EAAE,YAAY,EAAE,GAAG,EAAE,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,yBAAyB,CAAC;AAG9F,OAAO,EACL,aAAa,EACb,WAAW,EACX,SAAS,EACT,WAAW,EACX,aAAa,GACd,MAAM,gCAAgC,CAAC;AAGxC,OAAO,EAAE,SAAS,EAAE,KAAK,MAAM,EAAE,MAAM,uBAAuB,CAAC;AAC/D,OAAO,EAAE,QAAQ,EAAE,KAAK,QAAQ,EAAE,MAAM,qBAAqB,CAAC;AAC9D,OAAO,EAAE,QAAQ,EAAE,KAAK,GAAG,EAAE,MAAM,qBAAqB,CAAC;AACzD,OAAO,EAAE,eAAe,EAAE,KAAK,WAAW,EAAE,MAAM,6BAA6B,CAAC;AAChF,OAAO,EAAE,OAAO,EAAE,KAAK,OAAO,EAAE,MAAM,0BAA0B,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}

package/dist/index.js

@@ -53,7 +53,10 @@ export { Skeleton, SkeletonText, SkeletonRows, SkeletonKpi, SkeletonCard, Skelet
  * Buradan aşağısı, sınıfı olup bileşeni olmayan şeylerin kapandığı yer.
  * Gerekçesi `components/layout.tsx`'in başında. */
 export { Surface, ScrollX, Rise, Swap, ListRow, CellActions, PageBand, Link, } from "./components/layout.js";
-export { ThemeToggle, LocaleSwitcher, LogoTile } from "./components/chrome.js";
+export { ThemeToggle, LocaleSwitcher, LogoTile, AccountButton } from "./components/chrome.js";
+export { ColorSwatches, ThemeCards, ImageField, } from "./components/appearance.js";
+export { SquarePicker } from "./components/square-picker.js";
+export { prepareImage, cropSquare, IMAGE_ACCEPT } from "./lib/image.js";
 export { RailLink } from "./components/rail-link.js";
 export { Slider } from "./components/slider.js";
 /* --- açılır bölümler --------------------------------------------------- */