tamga-ui 0.2.0 → 0.2.1

package/CHANGELOG.md

@@ -5,6 +5,44 @@ Versions follow [semver](https://semver.org/). Through `0.x`, breaking changes m
 
 > 🇹🇷 Türkçe için [tamga.org.tr/tr](https://tamga.org.tr/tr).
 
+## 0.2.1
+
+### Added
+
+- **`AppearanceTemplate`** (`tamga-ui/patterns`) — the whole appearance screen: logo, mark, brand
+  colour, theme and sidebar width. This screen had been built twice, by hand, in two products, and
+  the second one came out bare: a hex field instead of swatches, three words instead of three
+  pictures, no logo area at all. Handing over the parts and saying "arrange them yourself" is what
+  let them drift; that is the job the pattern layer exists for (ADR-0004).
+
+  It stores NOTHING and applies NOTHING. `value` in, `onChange` and `onSave` out, every word from
+  `labels`. Where the preference lives (session, account, browser) is a product decision, and
+  turning the chosen colour into tokens stays the product's call too, because the root element is
+  its own.
+
+- **`ColorSwatches`, `ThemeCards`, `ImageField`** — the parts, for a screen that needs a different
+  arrangement. `ThemeCards` draws a miniature of each option rather than naming it; a theme is not
+  chosen by a word, it is chosen by seeing the result.
+- **`SquarePicker`** — dragging a square over an uploaded logo to cut a mark out of it. A mark
+  cannot be derived automatically, and this is the honest alternative: the human says where it is.
+- **`prepareImage` and `cropSquare`** (`tamga-ui`) — resize and square-crop an uploaded file, with
+  no library: a `<canvas>`. The ratio is kept and nothing is cropped silently; SVG passes through
+  untouched, because baking a vector into a 512px PNG stops it being sharp.
+- **`SettingsPanel.accent`** — a coloured left edge on a section block.
+
+### Fixed
+
+- **Completed steps were darker than everything else on the screen.** `StepStrip` filled them with
+  `--color-accent-line`, which is the accent's TEXT variant: it is derived by SEARCHING for 4.5
+  contrast against the page, so it is always darker than the face. Every button and badge on the
+  same screen used `--color-accent`, and the gap widened with each new brand colour. The ink on top
+  was measured against `accent`, never against `accent-line`, so that pairing was never checked at
+  all. Filled accent objects now follow the button's contract everywhere: `accent` for the fill,
+  `accent-shadow` for the edge, `accent-ink` for the ink.
+
+  Nothing errored here: the colours were valid and the contrast gates passed. `check-css` now
+  refuses `--color-accent-line` as a fill, so this class of mistake cannot pass silently again.
+
 ## 0.2.0
 
 Most of this release came out of gaps found by two people using the kit **from the outside**:

package/dist/components/appearance.d.ts

@@ -0,0 +1,78 @@
+import { type ReactNode } from "react";
+export type SwatchOption = {
+    /** The hex the swatch applies. TR: Kutunun uyguladığı hex. */
+    hex: string;
+    /** Its name, translated, used as the accessible label. TR: Çevrilmiş adı; erişilebilir ad olarak kullanılıyor. */
+    label: string;
+};
+/**
+ * Brand colour chosen from a few squares, or written by hand.
+ * TR: Birkaç kareden seçilen ya da elle yazılan marka rengi.
+ */
+export declare function ColorSwatches({ options, value, onChange, customLabel, custom, className, }: {
+    options: readonly SwatchOption[];
+    value: string;
+    onChange: (hex: string) => void;
+    /** Accessible name of the "my own colour" control. TR: "Kendi rengim" kontrolünün erişilebilir adı. */
+    customLabel: string;
+    /** Whether a free colour is offered at all. TR: Serbest rengin hiç sunulup sunulmadığı. */
+    custom?: boolean;
+    className?: string;
+}): import("react").JSX.Element;
+export type ThemeChoice = "light" | "dark" | "system";
+/**
+ * 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 declare function ThemeCards({ value, onChange, labels, className, }: {
+    value: ThemeChoice;
+    onChange: (next: ThemeChoice) => void;
+    /** The three names and the group's accessible name. TR: Üç ad ve kümenin erişilebilir adı. */
+    labels: {
+        light: string;
+        dark: string;
+        system: string;
+        group: string;
+    };
+    className?: string;
+}): import("react").JSX.Element;
+/**
+ * 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 declare function ImageField({ value, onChange, maxEdge, labels, preview, extra, className, }: {
+    value: string | null;
+    onChange: (next: string | null) => void;
+    /** Longest edge of the stored image, in pixels. TR: Saklanan görselin en uzun kenarı, piksel. */
+    maxEdge: number;
+    labels: {
+        /** "Logo", "Mark": used inside the buttons. TR: "Logo", "Amblem": düğmelerin içinde geçiyor. */
+        name: string;
+        upload: string;
+        replace: string;
+        remove: string;
+        empty: string;
+        errorType: string;
+        errorSize: string;
+        errorUnreadable: string;
+    };
+    /** The caller draws the preview: a logo is wide, a mark is square. TR: Önizlemeyi çağıran çiziyor: logo geniş, amblem kare. */
+    preview: (src: string) => ReactNode;
+    /** An extra control beside the buttons. TR: Düğmelerin yanına giren ek kontrol. */
+    extra?: ReactNode;
+    className?: string;
+}): import("react").JSX.Element;
+//# sourceMappingURL=appearance.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"appearance.d.ts","sourceRoot":"","sources":["../../src/components/appearance.tsx"],"names":[],"mappings":"AAEA,OAAO,EAA2B,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAchE,MAAM,MAAM,YAAY,GAAG;IACzB,8DAA8D;IAC9D,GAAG,EAAE,MAAM,CAAC;IACZ,kHAAkH;IAClH,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAEF;;;GAGG;AACH,wBAAgB,aAAa,CAAC,EAC5B,OAAO,EACP,KAAK,EACL,QAAQ,EACR,WAAW,EACX,MAAa,EACb,SAAS,GACV,EAAE;IACD,OAAO,EAAE,SAAS,YAAY,EAAE,CAAC;IACjC,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;IAChC,uGAAuG;IACvG,WAAW,EAAE,MAAM,CAAC;IACpB,2FAA2F;IAC3F,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,+BAqCA;AAED,MAAM,MAAM,WAAW,GAAG,OAAO,GAAG,MAAM,GAAG,QAAQ,CAAC;AAoBtD;;;;;;;;;;GAUG;AACH,wBAAgB,UAAU,CAAC,EACzB,KAAK,EACL,QAAQ,EACR,MAAM,EACN,SAAS,GACV,EAAE;IACD,KAAK,EAAE,WAAW,CAAC;IACnB,QAAQ,EAAE,CAAC,IAAI,EAAE,WAAW,KAAK,IAAI,CAAC;IACtC,8FAA8F;IAC9F,MAAM,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,CAAC;IACvE,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,+BA6BA;AAED;;;;;;;;;GASG;AACH,wBAAgB,UAAU,CAAC,EACzB,KAAK,EACL,QAAQ,EACR,OAAO,EACP,MAAM,EACN,OAAO,EACP,KAAK,EACL,SAAS,GACV,EAAE;IACD,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IACrB,QAAQ,EAAE,CAAC,IAAI,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;IACxC,iGAAiG;IACjG,OAAO,EAAE,MAAM,CAAC;IAChB,MAAM,EAAE;QACN,gGAAgG;QAChG,IAAI,EAAE,MAAM,CAAC;QACb,MAAM,EAAE,MAAM,CAAC;QACf,OAAO,EAAE,MAAM,CAAC;QAChB,MAAM,EAAE,MAAM,CAAC;QACf,KAAK,EAAE,MAAM,CAAC;QACd,SAAS,EAAE,MAAM,CAAC;QAClB,SAAS,EAAE,MAAM,CAAC;QAClB,eAAe,EAAE,MAAM,CAAC;KACzB,CAAC;IACF,+HAA+H;IAC/H,OAAO,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,SAAS,CAAC;IACpC,mFAAmF;IACnF,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,+BAoDA"}

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/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

@@ -41,6 +41,9 @@ 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, 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":"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"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}

package/dist/index.js

@@ -54,6 +54,9 @@ export { Skeleton, SkeletonText, SkeletonRows, SkeletonKpi, SkeletonCard, Skelet
  * 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, 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 --------------------------------------------------- */

package/dist/kit.css

@@ -999,7 +999,7 @@
     min-width: 28px;
     height: 28px;
     padding: 0 6px;
-    border-radius: var(--radius-mark);
+    border-radius: var(--radius-sm);
     color: var(--color-ink-soft);
     font-size: var(--text-caption);
     cursor: pointer;
@@ -1283,9 +1283,14 @@
     color: var(--color-accent-line);
     box-shadow: 2px 2px 0 0 var(--color-accent-line);
   }
+  /* DOLGU `accent`, KENAR `accent-shadow` — düğmenin sözleşmesinin aynısı.
+     Burada dolgu `accent-line` idi: o bir METİN token'ı, sayfaya karşı 4.5
+     arayarak üretiliyor, yani yüzden hep daha koyu. Sonuç ekranda şuydu: biten
+     adımlar koyu, aynı ekrandaki her düğme ve rozet açık. Üstündeki mürekkep de
+     `accent`e göre ölçülüyordu, `accent-line`a göre değil. */
   .tamga-step-mark[data-state="done"] {
-    border-color: var(--color-accent-line);
-    background: var(--color-accent-line);
+    border-color: var(--color-accent-shadow);
+    background: var(--color-accent);
     color: var(--color-accent-ink);
   }
   .tamga-step-line {
@@ -1296,7 +1301,7 @@
     background: var(--color-edge);
   }
   .tamga-step-line[data-done="true"] {
-    background: var(--color-accent-line);
+    background: var(--color-accent);
   }
 
   .tamga-scrim {
@@ -1812,6 +1817,209 @@
     animation: tamga-sheet-end var(--duration-base) var(--ease-standard);
   }
 
+  /* ------------------------------------------------------------------ *
+   * GÖRÜNÜM AYARLARININ PARÇALARI.
+   *
+   * Üçü de bir üründe doğdu ve kite AYNI GEREKÇEYLE taşındı: her panelin bir
+   * görünüm ayarı oluyor, ve kit onu vermediğinde her ürün kendi hex kutusunu
+   * çiziyor. Kiti kuran bir ekip "renk seçimi" deyince altı hazır
+   * kutuyu değil, çıplak bir metin girdisi elde ediyordu.
+   * ------------------------------------------------------------------ */
+
+  /* Marka rengi kutusu. Seçili olan kitin fiziğiyle işaretli: 1px kenar artı
+     2px sert kaydırma. Kutunun İÇİNE çentik konmuyor, çentiğin kontrastı
+     seçilen renge göre değişiyor ve açık bir renkte kayboluyor. */
+  .tamga-swatch {
+    display: inline-flex;
+    width: var(--control);
+    height: var(--control);
+    align-items: center;
+    justify-content: center;
+    border: 1px solid var(--color-edge);
+    border-radius: var(--radius-ctl);
+    background: var(--color-shell);
+    cursor: pointer;
+    transition:
+      transform var(--duration-press) var(--ease-standard),
+      box-shadow var(--duration-press) var(--ease-standard);
+  }
+  .tamga-swatch > span {
+    width: 20px;
+    height: 20px;
+    border-radius: var(--radius-mark);
+  }
+  .tamga-swatch:hover {
+    transform: translate(-1px, -1px);
+    box-shadow: 3px 3px 0 var(--color-edge);
+  }
+  .tamga-swatch[data-selected="true"] {
+    border-color: var(--color-accent-line);
+    box-shadow: 2px 2px 0 var(--color-accent-line);
+  }
+  .tamga-swatch:active {
+    transform: translate(2px, 2px);
+    box-shadow: 0 0 0 var(--color-edge);
+  }
+
+  /* Tarayıcının kendi renk kutusu, kitin kenarlığıyla. */
+  .tamga-color-input {
+    width: 36px;
+    height: 36px;
+    padding: 2px;
+    border: 1px solid var(--color-edge);
+    border-radius: var(--radius-ctl);
+    background: var(--color-shell);
+    cursor: pointer;
+  }
+
+  /* ------------------------------------------------------------------ *
+   * TEMA KARTI — panelin minyatürü.
+   *
+   * "Açık · Koyu · Sistem" üç kelimeydi, ve bir tema seçimi kelimeyle
+   * yapılmıyor: kullanıcı sonucu görmek istiyor. Her seçenek panelin
+   * minyatürünü çiziyor (ray, gövde, satırlar) ve "Sistem" ikisini bir karede
+   * yan yana gösteriyor, çünkü anlamı tam olarak bu.
+   *
+   * MİNYATÜR SABİT RENKLERLE, ve kitin tek istisnası bu. Seçenekler o an
+   * yürürlükteki temayı değil SEÇİLİRSE ne olacağını gösteriyor; token
+   * kullanılsaydı üçü de aynı görünürdü. Tek token: marka vurgusu, çünkü
+   * önizlemenin yarısı o.
+   * ------------------------------------------------------------------ */
+  .tamga-theme-card {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    padding: 0;
+    border: 0;
+    background: none;
+    cursor: pointer;
+    text-align: center;
+  }
+  .tamga-theme-box {
+    position: relative;
+    display: flex;
+    overflow: hidden;
+    width: 112px;
+    height: 72px;
+    border: 1px solid var(--color-edge);
+    border-radius: var(--radius-card);
+    box-shadow: 2px 2px 0 var(--color-edge);
+    transition:
+      transform var(--duration-press) var(--ease-standard),
+      box-shadow var(--duration-press) var(--ease-standard),
+      border-color var(--duration-press) var(--ease-standard);
+  }
+  .tamga-theme-card:hover .tamga-theme-box {
+    transform: translate(-1px, -1px);
+    box-shadow: 3px 3px 0 var(--color-edge);
+  }
+  .tamga-theme-card:active .tamga-theme-box {
+    transform: translate(2px, 2px);
+    box-shadow: 0 0 0 var(--color-edge);
+  }
+  .tamga-theme-card[data-selected="true"] .tamga-theme-box {
+    border-color: var(--color-accent-line);
+    box-shadow: 2px 2px 0 var(--color-accent-line);
+  }
+  .tamga-theme-name {
+    font-size: var(--text-small);
+    color: var(--color-ink-faint);
+  }
+  .tamga-theme-card[data-selected="true"] .tamga-theme-name {
+    font-weight: 500;
+    color: var(--color-ink);
+  }
+
+  .tamga-theme-half {
+    display: flex;
+    min-width: 0;
+    flex: 1;
+    gap: 4px;
+    padding: 6px;
+  }
+  .tamga-theme-half[data-theme="light"] { background: #f4f2ee; }
+  .tamga-theme-half[data-theme="dark"] { background: #16161a; }
+
+  .tamga-theme-rail {
+    display: flex;
+    width: 12px;
+    flex-shrink: 0;
+    flex-direction: column;
+    gap: 3px;
+    border-radius: 3px;
+    padding: 3px;
+  }
+  .tamga-theme-half[data-theme="light"] .tamga-theme-rail { background: #fcfcfc; }
+  .tamga-theme-half[data-theme="dark"] .tamga-theme-rail { background: #232327; }
+
+  .tamga-theme-body {
+    display: flex;
+    min-width: 0;
+    flex: 1;
+    flex-direction: column;
+    gap: 3px;
+    border-radius: 3px;
+    padding: 4px;
+  }
+  .tamga-theme-half[data-theme="light"] .tamga-theme-body { background: #fcfcfc; }
+  .tamga-theme-half[data-theme="dark"] .tamga-theme-body { background: #232327; }
+
+  .tamga-theme-line {
+    height: 3px;
+    border-radius: 2px;
+  }
+  .tamga-theme-half[data-theme="light"] .tamga-theme-line { background: #d8d4cf; }
+  .tamga-theme-half[data-theme="dark"] .tamga-theme-line { background: #3a3a42; }
+  /* Vurgu tema kuralını YENMEK ZORUNDA: daha düşük özgüllükte yazıldığında
+     `[data-theme] .tamga-theme-line` onu eziyor ve marka rengi önizlemede hiç
+     görünmüyor. */
+  .tamga-theme-half .tamga-theme-line[data-accent="true"] {
+    background: var(--color-accent);
+  }
+
+  .tamga-theme-dot {
+    height: 5px;
+    width: 5px;
+    border-radius: 2px;
+  }
+  .tamga-theme-half[data-theme="light"] .tamga-theme-dot { background: #d8d4cf; }
+  .tamga-theme-half[data-theme="dark"] .tamga-theme-dot { background: #3a3a42; }
+  .tamga-theme-half .tamga-theme-dot[data-accent="true"] {
+    background: var(--color-accent);
+  }
+
+  /* Yüklenen görselin durduğu kutu. Çıplak duran bir logo "buraya yüklendi"
+     demiyor, "burada unutulmuş" diyor. Yükseklik sabit: logo geniş, amblem
+     kare, ve ikisi farklı yükseklikte kutularda dursaydı bloklar hizasız
+     görünürdü. */
+  .tamga-image-field {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 72px;
+    min-width: 96px;
+    padding: 10px 14px;
+    border: 1px solid var(--color-edge);
+    border-radius: var(--radius-card);
+    background: var(--color-shell);
+    box-shadow: 2px 2px 0 var(--color-edge);
+  }
+  /* Boş hâl: kesik çizgi "burası dolabilir" diyor, düz kenar "burası boş
+     kaldı" diyor. */
+  .tamga-image-field[data-empty] {
+    border-style: dashed;
+    box-shadow: none;
+    color: var(--color-ink-faint);
+    font-size: var(--text-small);
+  }
+
+  /* Ayar bölümü, sol kenarında marka rengi. `SettingsPanel`in `accent`
+     varyantı: bir görünüm ekranında bloklar birbirinden ayrılmalı ve ayıran
+     şey rengin kendisi olmalı, çünkü ekranın konusu o. */
+  .tamga-settings-panel-accent {
+    border-left: 4px solid var(--color-accent);
+  }
+
   .tamga-label {
     font-size: var(--text-caption);
     font-weight: 500;

package/dist/lib/image.d.ts

@@ -0,0 +1,46 @@
+/**
+ * Turning an uploaded file into something a panel can carry.
+ *
+ * NO LIBRARY, and none is needed: a `<canvas>` and `drawImage`.
+ *
+ * A DATA URI, NOT AN OBJECT URL. `URL.createObjectURL` dies with the tab, so a
+ * logo chosen today would be gone tomorrow. A data URI survives in storage and
+ * goes straight into `<img src>`. When a server arrives this file becomes an
+ * upload call and nothing else changes: screens already hold a STRING and do
+ * not care whether it is a data URI or an `https://` address.
+ *
+ * WHY IT IS RESIZED. `localStorage` holds about 5 MB per browser and a phone
+ * photo alone is 4 MB. Writing one unresized throws `QuotaExceeded`, and the
+ * thing that gets lost may not be the logo but whatever else was being saved
+ * at that moment.
+ *
+ * THE RATIO IS KEPT, NOTHING IS CROPPED. Cropping to fit a square is the most
+ * common and most silent mistake: the logo looks fine and its edge is gone.
+ * The long side is pulled to the limit, the short side follows.
+ *
+ * PNG, NOT JPEG. Logos are flat and transparent; JPEG turns transparency into
+ * solid black and rings the edges.
+ */
+export type ImageError = "type" | "size" | "unreadable";
+export declare const IMAGE_ACCEPT = "image/png,image/jpeg,image/svg+xml,image/webp";
+/**
+ * Resizes so the longest side is `maxEdge` pixels and returns a data URI.
+ *
+ * SVG PASSES THROUGH UNTOUCHED. Drawing a vector onto a canvas and writing PNG
+ * stops it being scalable: a logo baked at 512px is blurry on a 4K screen. SVG
+ * is already small and already sharp at every size.
+ */
+export declare function prepareImage(file: File, maxEdge: number): Promise<string>;
+/**
+ * Cuts a SQUARE piece out of an image: for a mark or a profile photo.
+ *
+ * `area` is given in RATIOS (0 to 1), not in the image's own pixels, because
+ * the picker runs on a preview whose scale changes from screen to screen. A
+ * ratio points at the same place at every scale.
+ */
+export declare function cropSquare(source: string, area: {
+    x: number;
+    y: number;
+    size: number;
+}, maxEdge: number): Promise<string>;
+//# sourceMappingURL=image.d.ts.map

package/dist/lib/image.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"image.d.ts","sourceRoot":"","sources":["../../src/lib/image.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;GAsBG;AAEH,MAAM,MAAM,UAAU,GAAG,MAAM,GAAG,MAAM,GAAG,YAAY,CAAC;AAKxD,eAAO,MAAM,YAAY,kDAAkD,CAAC;AAE5E;;;;;;GAMG;AACH,wBAAsB,YAAY,CAAC,IAAI,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,GAAG,OAAO,CAAC,MAAM,CAAC,CAoB/E;AAED;;;;;;GAMG;AACH,wBAAsB,UAAU,CAC9B,MAAM,EAAE,MAAM,EACd,IAAI,EAAE;IAAE,CAAC,EAAE,MAAM,CAAC;IAAC,CAAC,EAAE,MAAM,CAAC;IAAC,IAAI,EAAE,MAAM,CAAA;CAAE,EAC5C,OAAO,EAAE,MAAM,GACd,OAAO,CAAC,MAAM,CAAC,CAcjB"}

package/dist/lib/image.js

@@ -0,0 +1,95 @@
+/**
+ * Turning an uploaded file into something a panel can carry.
+ *
+ * NO LIBRARY, and none is needed: a `<canvas>` and `drawImage`.
+ *
+ * A DATA URI, NOT AN OBJECT URL. `URL.createObjectURL` dies with the tab, so a
+ * logo chosen today would be gone tomorrow. A data URI survives in storage and
+ * goes straight into `<img src>`. When a server arrives this file becomes an
+ * upload call and nothing else changes: screens already hold a STRING and do
+ * not care whether it is a data URI or an `https://` address.
+ *
+ * WHY IT IS RESIZED. `localStorage` holds about 5 MB per browser and a phone
+ * photo alone is 4 MB. Writing one unresized throws `QuotaExceeded`, and the
+ * thing that gets lost may not be the logo but whatever else was being saved
+ * at that moment.
+ *
+ * THE RATIO IS KEPT, NOTHING IS CROPPED. Cropping to fit a square is the most
+ * common and most silent mistake: the logo looks fine and its edge is gone.
+ * The long side is pulled to the limit, the short side follows.
+ *
+ * PNG, NOT JPEG. Logos are flat and transparent; JPEG turns transparency into
+ * solid black and rings the edges.
+ */
+/** Raw file limit, before resizing. Over 8 MB is not a logo, it is an accident. */
+const RAW_LIMIT = 8 * 1024 * 1024;
+export const IMAGE_ACCEPT = "image/png,image/jpeg,image/svg+xml,image/webp";
+/**
+ * Resizes so the longest side is `maxEdge` pixels and returns a data URI.
+ *
+ * SVG PASSES THROUGH UNTOUCHED. Drawing a vector onto a canvas and writing PNG
+ * stops it being scalable: a logo baked at 512px is blurry on a 4K screen. SVG
+ * is already small and already sharp at every size.
+ */
+export async function prepareImage(file, maxEdge) {
+    if (!file.type.startsWith("image/"))
+        throw new Error("type");
+    if (file.size > RAW_LIMIT)
+        throw new Error("size");
+    const raw = await readFile(file);
+    if (file.type === "image/svg+xml")
+        return raw;
+    const image = await loadImage(raw);
+    const scale = Math.min(1, maxEdge / Math.max(image.width, image.height));
+    if (scale >= 1)
+        return raw;
+    const canvas = document.createElement("canvas");
+    canvas.width = Math.round(image.width * scale);
+    canvas.height = Math.round(image.height * scale);
+    const ctx = canvas.getContext("2d");
+    if (!ctx)
+        return raw;
+    /* The browser's own smoothing: better than a hand-written resampler, and free. */
+    ctx.imageSmoothingQuality = "high";
+    ctx.drawImage(image, 0, 0, canvas.width, canvas.height);
+    return canvas.toDataURL("image/png");
+}
+/**
+ * Cuts a SQUARE piece out of an image: for a mark or a profile photo.
+ *
+ * `area` is given in RATIOS (0 to 1), not in the image's own pixels, because
+ * the picker runs on a preview whose scale changes from screen to screen. A
+ * ratio points at the same place at every scale.
+ */
+export async function cropSquare(source, area, maxEdge) {
+    const image = await loadImage(source);
+    /* The square is measured against the SHORT side: a 350x65 logo can hold a
+       square of at most 65px. Measured against the long side the frame would
+       fall outside the image. */
+    const edge = Math.min(image.width, image.height) * area.size;
+    const canvas = document.createElement("canvas");
+    canvas.width = maxEdge;
+    canvas.height = maxEdge;
+    const ctx = canvas.getContext("2d");
+    if (!ctx)
+        return source;
+    ctx.imageSmoothingQuality = "high";
+    ctx.drawImage(image, area.x * image.width, area.y * image.height, edge, edge, 0, 0, maxEdge, maxEdge);
+    return canvas.toDataURL("image/png");
+}
+function readFile(file) {
+    return new Promise((resolve, reject) => {
+        const reader = new FileReader();
+        reader.onload = () => resolve(String(reader.result));
+        reader.onerror = () => reject(new Error("unreadable"));
+        reader.readAsDataURL(file);
+    });
+}
+function loadImage(src) {
+    return new Promise((resolve, reject) => {
+        const img = new Image();
+        img.onload = () => resolve(img);
+        img.onerror = () => reject(new Error("unreadable"));
+        img.src = src;
+    });
+}

package/dist/patterns/app-shell.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"app-shell.d.ts","sourceRoot":"","sources":["../../src/patterns/app-shell.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvD,OAAO,EAAE,IAAI,EAAE,MAAM,uBAAuB,CAAC;AAE7C,OAAO,EAAa,KAAK,aAAa,EAAE,MAAM,aAAa,CAAC;AAE5D;;;;;GAKG;AAEH,MAAM,MAAM,QAAQ,GAAG;IACrB,GAAG,EAAE,MAAM,CAAC;IACZ,IAAI,EAAE,MAAM,CAAC;IACb,wKAAwK;IACxK,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,cAAc,CAAC,OAAO,IAAI,CAAC,CAAC,MAAM,CAAC,CAAC;CAC3C,CAAC;AAEF,MAAM,MAAM,aAAa,GAAG;IAC1B,wJAAwJ;IACxJ,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,GAAG,EAAE,SAAS,QAAQ,EAAE,CAAC;IACzB,mGAAmG;IACnG,UAAU,EAAE,MAAM,CAAC;IACnB;;;;;;;;;;;OAWG;IACH,IAAI,CAAC,EAAE,QAAQ,GAAG,MAAM,CAAC;IACzB;;;;OAIG;IACH,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,uIAAuI;IACvI,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB,aAAa,CAAC,EAAE,aAAa,CAAC;IAC9B,MAAM,EAAE;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,UAAU,EAAE,MAAM,CAAA;KAAE,CAAC;IAC7C,QAAQ,EAAE,SAAS,CAAC;CACrB,CAAC;AAEF,wBAAgB,QAAQ,CAAC,EACvB,KAAK,EACL,GAAG,EACH,UAAU,EACV,IAAe,EACf,MAAM,EACN,UAAU,EACV,aAAa,EAAE,IAAgB,EAC/B,MAAM,EACN,QAAQ,GACT,EAAE,aAAa,+BAkFf"}
+{"version":3,"file":"app-shell.d.ts","sourceRoot":"","sources":["../../src/patterns/app-shell.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACvD,OAAO,EAAE,IAAI,EAAE,MAAM,uBAAuB,CAAC;AAE7C,OAAO,EAAa,KAAK,aAAa,EAAE,MAAM,aAAa,CAAC;AAE5D;;;;;GAKG;AAEH,MAAM,MAAM,QAAQ,GAAG;IACrB,GAAG,EAAE,MAAM,CAAC;IACZ,IAAI,EAAE,MAAM,CAAC;IACb,wKAAwK;IACxK,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,cAAc,CAAC,OAAO,IAAI,CAAC,CAAC,MAAM,CAAC,CAAC;CAC3C,CAAC;AAEF,MAAM,MAAM,aAAa,GAAG;IAC1B,wJAAwJ;IACxJ,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,GAAG,EAAE,SAAS,QAAQ,EAAE,CAAC;IACzB,mGAAmG;IACnG,UAAU,EAAE,MAAM,CAAC;IACnB;;;;;;;;;;;OAWG;IACH,IAAI,CAAC,EAAE,QAAQ,GAAG,MAAM,CAAC;IACzB;;;;OAIG;IACH,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,uIAAuI;IACvI,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB,aAAa,CAAC,EAAE,aAAa,CAAC;IAC9B,MAAM,EAAE;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,UAAU,EAAE,MAAM,CAAA;KAAE,CAAC;IAC7C,QAAQ,EAAE,SAAS,CAAC;CACrB,CAAC;AAEF,wBAAgB,QAAQ,CAAC,EACvB,KAAK,EACL,GAAG,EACH,UAAU,EACV,IAAe,EACf,MAAM,EACN,UAAU,EACV,aAAa,EAAE,IAAgB,EAC/B,MAAM,EACN,QAAQ,GACT,EAAE,aAAa,+BAuEf"}

package/dist/patterns/app-shell.js

@@ -1,7 +1,7 @@
 "use client";
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Icon } from "../components/icon.js";
-import { Tooltip } from "../components/overlay.js";
+import { RailLink } from "../components/rail-link.js";
 import { PlainLink } from "./shared.js";
 export function AppShell({ brand, nav, activePath, rail = "narrow", topbar, railFooter, linkComponent: Link = PlainLink, labels, children, }) {
     /* Bir giriş kendi alt ağacına sahip: `/urunler`, `/urunler/42/fotograflar`
@@ -9,15 +9,5 @@ export function AppShell({ brand, nav, activePath, rail = "narrow", topbar, rail
        altındaki her rotayı yutar. */
     const isCurrent = (href) => href === "/" ? activePath === href : activePath === href || activePath.startsWith(`${href}/`);
     const wide = rail === "wide";
-    return (_jsxs("div", { className: "flex h-dvh w-full overflow-hidden bg-shell text-ink-soft", children: [_jsxs("aside", { className: `flex shrink-0 flex-col gap-2 bg-shell py-4 ${wide ? "w-60 px-3" : "w-20 items-center px-1"}`, "data-rail": rail, children: [brand ? (_jsxs(_Fragment, { children: [_jsx("span", { "aria-label": labels.home, className: `mb-2 flex h-10 shrink-0 items-center text-ink ${wide ? "px-2" : "w-10 justify-center"}`, children: brand }), _jsx("span", { className: `h-0 w-6 border-t border-line ${wide ? "ml-2" : ""}` })] })) : null, _jsx("nav", { "aria-label": labels.primaryNav, className: `tamga-rail-scroll flex w-full flex-1 flex-col gap-2 py-1 ${wide ? "" : "items-center"}`, children: nav.map((entry) => {
-                            const current = isCurrent(entry.href);
-                            const link = (_jsxs(Link, { href: entry.href, "aria-label": wide ? undefined : entry.label, "aria-current": current ? "page" : undefined, "data-active": current, "data-nav": entry.key, className: "tamga-rail-link", children: [_jsx(Icon, { icon: entry.icon, size: "base" }), wide ? _jsx("span", { className: "min-w-0 truncate", children: entry.label }) : null] }, entry.key));
-                            /* DAR RAYDA KİTİN İPUCU, `title` DEĞİL.
-                               Burada `title={entry.label}` vardı: tarayıcının kendi gecikmeli
-                               gri balonu. Kullanan kişi bunu "ipucu yok" diye okuyor, çünkü
-                               kitin her yerdeki ipucu başka türlü görünüyor ve hemen çıkıyor.
-                               Geniş rayda etiket zaten yazılı; orada ipucu aynı sözcüğü ikinci
-                               kez söylemek olurdu. */
-                            return wide ? (link) : (_jsx(Tooltip, { label: entry.label, placement: "right", children: link }, entry.key));
-                        }) }), railFooter ? _jsx("div", { className: "shrink-0", children: railFooter }) : null] }), _jsxs("div", { className: "flex min-w-0 flex-1 flex-col", children: [_jsx("header", { className: "tamga-gutter flex items-center gap-4 py-4", children: topbar }), _jsx("div", { className: "min-h-0 flex-1 overflow-hidden pr-4 pb-4", children: _jsx("main", { className: "tamga-surface h-full min-h-0 overflow-y-auto", children: children }) })] })] }));
+    return (_jsxs("div", { className: "flex h-dvh w-full overflow-hidden bg-shell text-ink-soft", children: [_jsxs("aside", { className: `flex shrink-0 flex-col gap-2 bg-shell py-4 ${wide ? "w-60 px-3" : "w-20 items-center px-1"}`, "data-rail": rail, children: [brand ? (_jsxs(_Fragment, { children: [_jsx("span", { "aria-label": labels.home, className: `mb-2 flex h-10 shrink-0 items-center text-ink ${wide ? "px-2" : "w-10 justify-center"}`, children: brand }), _jsx("span", { className: `h-0 w-6 border-t border-line ${wide ? "ml-2" : ""}` })] })) : null, _jsx("nav", { "aria-label": labels.primaryNav, className: `tamga-rail-scroll flex w-full flex-1 flex-col gap-2 py-1 ${wide ? "" : "items-center"}`, children: nav.map((entry) => (_jsx(RailLink, { href: entry.href, label: entry.label, active: isCurrent(entry.href), showLabel: wide, linkComponent: Link, "data-nav": entry.key, children: _jsx(Icon, { icon: entry.icon, size: "base" }) }, entry.key))) }), railFooter ? _jsx("div", { className: "shrink-0", children: railFooter }) : null] }), _jsxs("div", { className: "flex min-w-0 flex-1 flex-col", children: [_jsx("header", { className: "tamga-gutter flex items-center gap-4 py-4", children: topbar }), _jsx("div", { className: "min-h-0 flex-1 overflow-hidden pr-4 pb-4", children: _jsx("main", { className: "tamga-surface h-full min-h-0 overflow-y-auto", children: children }) })] })] }));
 }

package/dist/patterns/appearance-template.d.ts

@@ -0,0 +1,105 @@
+import { type ReactNode } from "react";
+import { type SwatchOption, type ThemeChoice } from "../components/appearance.js";
+/**
+ * The Appearance screen: logo, mark, brand colour, theme, sidebar.
+ *
+ * WHY A WHOLE SCREEN AND NOT FIVE PARTS. Every panel grows an appearance
+ * setting, and the kit not giving one is why two products drew their own hex
+ * box. Handing over the parts would not have fixed it: each product arranges
+ * them differently and they drift apart again, which is the thing this layer
+ * exists to prevent (ADR-0004).
+ *
+ * IT STORES NOTHING. `value` comes in, `onChange` goes out, `onSave` belongs
+ * to the caller. Where the preference lives (session, account, browser) is a
+ * product decision and a template that learns it stops being a template.
+ *
+ * THE PALETTE IS NOT APPLIED HERE EITHER. This screen reports the chosen
+ * colour; turning it into tokens is `makePalette` plus `paletteVars`, and the
+ * product decides when that happens, because the product owns the root
+ * element.
+ */
+export type Appearance = {
+    brand: string;
+    theme: ThemeChoice;
+    /** `free` means each user decides. TR: `free`, her kullanıcı kendi seçer demek. */
+    rail: "narrow" | "wide" | "free";
+    logo: string | null;
+    mark: string | null;
+};
+export type AppearanceLabels = {
+    title: string;
+    description: string;
+    logo: {
+        title: string;
+        description: string;
+        field: ImageLabels;
+        pickMark: string;
+    };
+    mark: {
+        title: string;
+        description: string;
+        field: ImageLabels;
+        fallbackNote: string;
+    };
+    brand: {
+        title: string;
+        description: string;
+        swatches: readonly SwatchOption[];
+        custom: string;
+    };
+    theme: {
+        title: string;
+        description: string;
+        light: string;
+        dark: string;
+        system: string;
+        group: string;
+    };
+    rail: {
+        title: string;
+        description: string;
+        narrow: string;
+        wide: string;
+        free: string;
+        group: string;
+    };
+    picker: {
+        title: string;
+        hint: string;
+        size: string;
+        cancel: string;
+        confirm: string;
+        close: string;
+    };
+    save: string;
+    saving: string;
+    reset: string;
+    clean: string;
+    dirty: string;
+};
+type ImageLabels = {
+    name: string;
+    upload: string;
+    replace: string;
+    remove: string;
+    empty: string;
+    errorType: string;
+    errorSize: string;
+    errorUnreadable: string;
+};
+export declare function AppearanceTemplate({ value, onChange, saved, onSave, onReset, saving, fallbackName, labels, extra, }: {
+    value: Appearance;
+    onChange: (next: Appearance) => void;
+    /** The stored version; "is anything unsaved" is answered by comparing with it. TR: Kayıtlı hâli; "kaydedilmemiş bir şey var mı" sorusu bununla cevaplanıyor. */
+    saved: Appearance;
+    onSave: () => void;
+    onReset: () => void;
+    saving?: boolean;
+    /** The name a tile is drawn from when there is no mark. TR: Amblem yokken karonun çizildiği ad. */
+    fallbackName: string;
+    labels: AppearanceLabels;
+    /** Extra panels the product adds, after the built-in ones. TR: Ürünün eklediği ek bölümler, hazır olanlardan sonra. */
+    extra?: ReactNode;
+}): import("react").JSX.Element;
+export {};
+//# sourceMappingURL=appearance-template.d.ts.map

package/dist/patterns/appearance-template.d.ts.map

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

package/dist/patterns/appearance-template.js

@@ -0,0 +1,23 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { ColorSwatches, ImageField, ThemeCards } from "../components/appearance.js";
+import { LogoTile } from "../components/chrome.js";
+import { Segmented } from "../components/segmented.js";
+import { SquarePicker } from "../components/square-picker.js";
+import { Button } from "../components/button.js";
+import { Label } from "../components/surface.js";
+import { SettingsPanel } from "./settings-template.js";
+export function AppearanceTemplate({ value, onChange, saved, onSave, onReset, saving = false, fallbackName, labels, extra, }) {
+    const [picking, setPicking] = useState(false);
+    const dirty = JSON.stringify(value) !== JSON.stringify(saved);
+    return (_jsxs("form", { className: "flex flex-col gap-5", onSubmit: (e) => {
+            e.preventDefault();
+            if (dirty && !saving)
+                onSave();
+        }, children: [_jsxs("div", { className: "flex flex-col gap-1", children: [_jsx("h1", { className: "text-display-sm font-semibold text-ink", children: labels.title }), _jsx("p", { className: "w-full text-control leading-relaxed text-ink-soft", children: labels.description })] }), _jsx(SettingsPanel, { accent: true, title: labels.logo.title, description: labels.logo.description, children: _jsx(ImageField, { value: value.logo, onChange: (v) => onChange({ ...value, logo: v }), maxEdge: 512, labels: labels.logo.field, preview: (src) => (_jsx("img", { src: src, alt: "", className: "max-h-full w-auto max-w-56 object-contain" })), extra: value.logo ? (_jsx(Button, { type: "button", onClick: () => setPicking(true), children: labels.logo.pickMark })) : undefined }) }), _jsxs(SettingsPanel, { accent: true, title: labels.mark.title, description: labels.mark.description, children: [_jsx(ImageField, { value: value.mark, onChange: (v) => onChange({ ...value, mark: v }), maxEdge: 256, labels: labels.mark.field, preview: (src) => (_jsx("img", { src: src, alt: "", className: "size-12 object-contain" })) }), !value.mark ? (_jsxs("span", { className: "mt-4 flex items-center gap-3", children: [_jsx(LogoTile, { name: fallbackName }), _jsx(Label, { children: labels.mark.fallbackNote })] })) : null] }), _jsx(SettingsPanel, { accent: true, title: labels.brand.title, description: labels.brand.description, children: _jsx(ColorSwatches, { options: labels.brand.swatches, value: value.brand, onChange: (hex) => onChange({ ...value, brand: hex }), customLabel: labels.brand.custom }) }), _jsx(SettingsPanel, { accent: true, title: labels.theme.title, description: labels.theme.description, children: _jsx(ThemeCards, { value: value.theme, onChange: (t) => onChange({ ...value, theme: t }), labels: labels.theme }) }), _jsx(SettingsPanel, { accent: true, title: labels.rail.title, description: labels.rail.description, children: _jsx(Segmented, { label: labels.rail.group, value: value.rail, onChange: (r) => onChange({ ...value, rail: r }), options: [
+                        { value: "narrow", label: labels.rail.narrow },
+                        { value: "wide", label: labels.rail.wide },
+                        { value: "free", label: labels.rail.free },
+                    ] }) }), extra, value.logo ? (_jsx(SquarePicker, { open: picking, source: value.logo, onClose: () => setPicking(false), onPick: (square) => onChange({ ...value, mark: square }), labels: labels.picker })) : null, _jsxs("div", { className: "flex flex-wrap items-center justify-between gap-3", children: [_jsxs("span", { className: "flex flex-wrap items-center gap-3", children: [_jsx(Button, { variant: "primary", type: "submit", disabled: !dirty, busy: saving, busyLabel: labels.saving, children: labels.save }), _jsx(Button, { type: "button", disabled: saving, onClick: onReset, children: labels.reset })] }), _jsx(Label, { children: dirty ? labels.dirty : labels.clean })] })] }));
+}

package/dist/patterns/index.d.ts

@@ -15,4 +15,5 @@ export { AuthTemplate, AuthProviders } from "./auth-template.js";
 export { WizardTemplate, type WizardStep, type WizardTemplateProps } from "./wizard-template.js";
 export { PublicTemplate, type PublicState, type PublicTemplateProps } from "./public-template.js";
 export { AppShell, type NavEntry, type AppShellProps } from "./app-shell.js";
+export { AppearanceTemplate, type Appearance, type AppearanceLabels, } from "./appearance-template.js";
 //# sourceMappingURL=index.d.ts.map

package/dist/patterns/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/patterns/index.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAKH,OAAO,EACL,SAAS,EACT,WAAW,EACX,KAAK,WAAW,EAChB,KAAK,aAAa,EAClB,KAAK,aAAa,GACnB,MAAM,aAAa,CAAC;AACrB,OAAO,EAAE,YAAY,EAAE,KAAK,SAAS,EAAE,KAAK,iBAAiB,EAAE,MAAM,oBAAoB,CAAC;AAC1F,OAAO,EACL,gBAAgB,EAChB,KAAK,aAAa,EAClB,KAAK,qBAAqB,GAC3B,MAAM,wBAAwB,CAAC;AAChC,OAAO,EACL,cAAc,EACd,KAAK,WAAW,EAChB,KAAK,SAAS,EACd,KAAK,mBAAmB,GACzB,MAAM,sBAAsB,CAAC;AAC9B,OAAO,EACL,gBAAgB,EAChB,aAAa,EACb,KAAK,aAAa,EAClB,KAAK,eAAe,EACpB,KAAK,aAAa,EAClB,KAAK,qBAAqB,GAC3B,MAAM,wBAAwB,CAAC;AAChC,OAAO,EAAE,YAAY,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AACjE,OAAO,EAAE,cAAc,EAAE,KAAK,UAAU,EAAE,KAAK,mBAAmB,EAAE,MAAM,sBAAsB,CAAC;AACjG,OAAO,EAAE,cAAc,EAAE,KAAK,WAAW,EAAE,KAAK,mBAAmB,EAAE,MAAM,sBAAsB,CAAC;AAClG,OAAO,EAAE,QAAQ,EAAE,KAAK,QAAQ,EAAE,KAAK,aAAa,EAAE,MAAM,gBAAgB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/patterns/index.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAKH,OAAO,EACL,SAAS,EACT,WAAW,EACX,KAAK,WAAW,EAChB,KAAK,aAAa,EAClB,KAAK,aAAa,GACnB,MAAM,aAAa,CAAC;AACrB,OAAO,EAAE,YAAY,EAAE,KAAK,SAAS,EAAE,KAAK,iBAAiB,EAAE,MAAM,oBAAoB,CAAC;AAC1F,OAAO,EACL,gBAAgB,EAChB,KAAK,aAAa,EAClB,KAAK,qBAAqB,GAC3B,MAAM,wBAAwB,CAAC;AAChC,OAAO,EACL,cAAc,EACd,KAAK,WAAW,EAChB,KAAK,SAAS,EACd,KAAK,mBAAmB,GACzB,MAAM,sBAAsB,CAAC;AAC9B,OAAO,EACL,gBAAgB,EAChB,aAAa,EACb,KAAK,aAAa,EAClB,KAAK,eAAe,EACpB,KAAK,aAAa,EAClB,KAAK,qBAAqB,GAC3B,MAAM,wBAAwB,CAAC;AAChC,OAAO,EAAE,YAAY,EAAE,aAAa,EAAE,MAAM,oBAAoB,CAAC;AACjE,OAAO,EAAE,cAAc,EAAE,KAAK,UAAU,EAAE,KAAK,mBAAmB,EAAE,MAAM,sBAAsB,CAAC;AACjG,OAAO,EAAE,cAAc,EAAE,KAAK,WAAW,EAAE,KAAK,mBAAmB,EAAE,MAAM,sBAAsB,CAAC;AAClG,OAAO,EAAE,QAAQ,EAAE,KAAK,QAAQ,EAAE,KAAK,aAAa,EAAE,MAAM,gBAAgB,CAAC;AAC7E,OAAO,EACL,kBAAkB,EAClB,KAAK,UAAU,EACf,KAAK,gBAAgB,GACtB,MAAM,0BAA0B,CAAC"}

package/dist/patterns/index.js

@@ -19,3 +19,4 @@ export { AuthTemplate, AuthProviders } from "./auth-template.js";
 export { WizardTemplate } from "./wizard-template.js";
 export { PublicTemplate } from "./public-template.js";
 export { AppShell } from "./app-shell.js";
+export { AppearanceTemplate, } from "./appearance-template.js";

package/dist/patterns/settings-template.d.ts

@@ -40,9 +40,20 @@ export declare function SettingsTemplate({ sections, activeSection, title, subti
  * Bir değer üst bir düzeyden miras alınıyorsa, bunu bilmeden değiştirmek üç
  * ekran açıp "bu alan neden böyle yazıyor" diye aramak demek.
  */
-export declare function SettingsPanel({ title, description, inheritedFrom, children, }: {
+export declare function SettingsPanel({ title, description, inheritedFrom, accent, children, }: {
     title: string;
     description?: string;
+    /**
+     * A brand-coloured edge down the left of the panel. TR: Panelin sol kenarında marka renginde
+     * bir şerit.
+     *
+     * For screens whose SUBJECT is the brand: on an appearance screen the blocks have to separate
+     * from one another, and the thing that separates them should be the colour itself. Elsewhere
+     * it would be decoration. TR: Konusu MARKANIN KENDİSİ olan ekranlar için: bir görünüm
+     * ekranında bloklar birbirinden ayrılmalı ve ayıran şey rengin kendisi olmalı. Başka yerde
+     * süs olurdu.
+     */
+    accent?: boolean;
     /** Like "inherited from the workspace": a full sentence written by the caller. TR: "çalışma alanından geliyor" gibi, çağıran tarafından yazılmış tam cümle. */
     inheritedFrom?: string;
     children: ReactNode;

package/dist/patterns/settings-template.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"settings-template.d.ts","sourceRoot":"","sources":["../../src/patterns/settings-template.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,OAAO,EAIL,KAAK,WAAW,EAChB,KAAK,aAAa,EAClB,KAAK,aAAa,EACnB,MAAM,aAAa,CAAC;AAErB;;;;;GAKG;AAEH,MAAM,MAAM,aAAa,GAAG,OAAO,GAAG,SAAS,GAAG,OAAO,CAAC;AAE1D,kCAAkC;AAClC,MAAM,MAAM,aAAa,GAAG,UAAU,GAAG,WAAW,GAAG,OAAO,CAAC;AAE/D,MAAM,MAAM,eAAe,GAAG;IAC5B,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,aAAa,CAAC;CACtB,CAAC;AAEF,MAAM,MAAM,qBAAqB,GAAG;IAClC,QAAQ,EAAE,SAAS,eAAe,EAAE,CAAC;IACrC,6EAA6E;IAC7E,aAAa,EAAE,MAAM,CAAC;IACtB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,gHAAgH;IAChH,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,aAAa,CAAC,EAAE,aAAa,CAAC;IAC9B,MAAM,EAAE;QACN,OAAO,EAAE,MAAM,CAAC;QAChB,QAAQ,EAAE,MAAM,CAAC;QACjB,KAAK,EAAE,MAAM,CAAC,aAAa,EAAE,MAAM,CAAC,CAAC;KACtC,GAAG,WAAW,CAAC;IAChB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB,CAAC;AAEF,wBAAgB,gBAAgB,CAAC,EAC/B,QAAQ,EACR,aAAa,EACb,KAAK,EACL,QAAQ,EACR,OAAO,EACP,KAAe,EACf,KAAK,EACL,aAAa,EAAE,IAAgB,EAC/B,MAAM,EACN,QAAQ,GACT,EAAE,qBAAqB,+BAsDvB;AA0BD;;;;;GAKG;AACH,wBAAgB,aAAa,CAAC,EAC5B,KAAK,EACL,WAAW,EACX,aAAa,EACb,QAAQ,GACT,EAAE;IACD,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,+JAA+J;IAC/J,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,QAAQ,EAAE,SAAS,CAAC;CACrB,+BA0BA"}
+{"version":3,"file":"settings-template.d.ts","sourceRoot":"","sources":["../../src/patterns/settings-template.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,OAAO,EAIL,KAAK,WAAW,EAChB,KAAK,aAAa,EAClB,KAAK,aAAa,EACnB,MAAM,aAAa,CAAC;AAErB;;;;;GAKG;AAEH,MAAM,MAAM,aAAa,GAAG,OAAO,GAAG,SAAS,GAAG,OAAO,CAAC;AAE1D,kCAAkC;AAClC,MAAM,MAAM,aAAa,GAAG,UAAU,GAAG,WAAW,GAAG,OAAO,CAAC;AAE/D,MAAM,MAAM,eAAe,GAAG;IAC5B,GAAG,EAAE,MAAM,CAAC;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,aAAa,CAAC;CACtB,CAAC;AAEF,MAAM,MAAM,qBAAqB,GAAG;IAClC,QAAQ,EAAE,SAAS,eAAe,EAAE,CAAC;IACrC,6EAA6E;IAC7E,aAAa,EAAE,MAAM,CAAC;IACtB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,gHAAgH;IAChH,OAAO,CAAC,EAAE,SAAS,CAAC;IACpB,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,aAAa,CAAC,EAAE,aAAa,CAAC;IAC9B,MAAM,EAAE;QACN,OAAO,EAAE,MAAM,CAAC;QAChB,QAAQ,EAAE,MAAM,CAAC;QACjB,KAAK,EAAE,MAAM,CAAC,aAAa,EAAE,MAAM,CAAC,CAAC;KACtC,GAAG,WAAW,CAAC;IAChB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB,CAAC;AAEF,wBAAgB,gBAAgB,CAAC,EAC/B,QAAQ,EACR,aAAa,EACb,KAAK,EACL,QAAQ,EACR,OAAO,EACP,KAAe,EACf,KAAK,EACL,aAAa,EAAE,IAAgB,EAC/B,MAAM,EACN,QAAQ,GACT,EAAE,qBAAqB,+BAsDvB;AA0BD;;;;;GAKG;AACH,wBAAgB,aAAa,CAAC,EAC5B,KAAK,EACL,WAAW,EACX,aAAa,EACb,MAAc,EACd,QAAQ,GACT,EAAE;IACD,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;;;;;;;OASG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,+JAA+J;IAC/J,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,QAAQ,EAAE,SAAS,CAAC;CACrB,+BA6BA"}

package/dist/patterns/settings-template.js

@@ -28,6 +28,6 @@ function ScopeMark({ scope, label }) {
  * Bir değer üst bir düzeyden miras alınıyorsa, bunu bilmeden değiştirmek üç
  * ekran açıp "bu alan neden böyle yazıyor" diye aramak demek.
  */
-export function SettingsPanel({ title, description, inheritedFrom, children, }) {
-    return (_jsxs("section", { className: "tamga-card tamga-card-open tamga-gutter py-4", "data-panel": title, children: [_jsxs("div", { className: "flex flex-wrap items-baseline gap-2", children: [_jsx("h3", { className: "text-subhead font-semibold text-ink", children: title }), inheritedFrom ? (_jsx("span", { className: "text-caption text-ink-faint", "data-inherited-from": true, children: inheritedFrom })) : null] }), description ? (_jsx("p", { className: "mt-1 text-small leading-relaxed text-ink-soft", children: description })) : null, _jsx("div", { className: "mt-4", children: children })] }));
+export function SettingsPanel({ title, description, inheritedFrom, accent = false, children, }) {
+    return (_jsxs("section", { className: `tamga-card tamga-card-open tamga-gutter py-4${accent ? " tamga-settings-panel-accent" : ""}`, "data-panel": title, children: [_jsxs("div", { className: "flex flex-wrap items-baseline gap-2", children: [_jsx("h3", { className: "text-subhead font-semibold text-ink", children: title }), inheritedFrom ? (_jsx("span", { className: "text-caption text-ink-faint", "data-inherited-from": true, children: inheritedFrom })) : null] }), description ? (_jsx("p", { className: "mt-1 text-small leading-relaxed text-ink-soft", children: description })) : null, _jsx("div", { className: "mt-4", children: children })] }));
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tamga-ui",
-  "version": "0.2.0",
+  "version": "0.2.1",
   "description": "Mantıksal's shared interface library: tokens, physics and components.",
   "license": "MIT",
   "type": "module",