tamga-ui 0.1.1 → 0.2.1

package/dist/lib/palette.d.ts

@@ -1,4 +1,4 @@
-import { acikligi, dL, gecerliHex, oran } from "./color.js";
+import { lightness, deltaL, isHex, contrast } from "./color.js";
 /**
  * Tek bir marka renginden iki temalık palet.
  *
@@ -17,7 +17,7 @@ import { acikligi, dL, gecerliHex, oran } from "./color.js";
  * `check-token-contrast` ile aynı aritmetikten geçiyor (bkz. `lib/color.ts`).
  */
 /** Bir temanın üreteceği token'lar. Adlar `theme.css`'teki kit ailesiyle birebir. */
-export type Palet = {
+export type Palette = {
     page: string;
     shell: string;
     hover: string;
@@ -42,24 +42,27 @@ export type Palet = {
     navHover: string;
     navHoverBg: string;
 };
-export type PaletCifti = {
-    light: Palet;
-    dark: Palet;
+export type PalettePair = {
+    light: Palette;
+    dark: Palette;
 };
 /**
  * Bir marka renginden iki tema.
  *
  * Geçersiz bir kodda FIRLATIYOR, sessizce griye düşmüyor: yarım yazılmış bir
- * hex'in ne anlama geldiğine çağıran karar veriyor (`gecerliHex`).
+ * hex'in ne anlama geldiğine çağıran karar veriyor (`isHex`).
  */
-export declare function paletUret(markaHex: string): PaletCifti;
-export { gecerliHex };
-export type Olcum = {
-    ad: string;
-    tur: "oran" | "dL";
-    deger: number;
-    esik: number;
-    gecti: boolean;
+export declare function makePalette(markaHex: string): PalettePair;
+export { isHex };
+/** Tek bir kontrast ölçümü. */
+export type Measurement = {
+    /** Neyin neye karşı ölçüldüğü: "ink · page". */
+    name: string;
+    /** `contrast` WCAG oranı, `deltaL` açıklık farkı. */
+    kind: "contrast" | "deltaL";
+    value: number;
+    threshold: number;
+    passed: boolean;
 };
 /**
  * Üretilen paleti `check-token-contrast` ile AYNI eşiklerden geçirir.
@@ -68,17 +71,33 @@ export type Olcum = {
  * yarın bir ton için yanlış olur. Marka rengi değiştiğinde bu liste yeniden
  * koşuyor, ve geçmeyen bir palet build'i kırıyor.
  */
-export declare function paletiOlc(p: Palet): Olcum[];
+export declare function measurePalette(p: Palette): Measurement[];
 /**
  * Bir paleti CSS değişkeni sözlüğüne çevirir: `{ "--color-accent": "#..." }`.
  *
- * NEDEN `paletCss` YETMİYOR: o bir STİL SAYFASI dizgisi üretiyor (`:root { … }`),
+ * NEDEN `paletteCss` YETMİYOR: o bir STİL SAYFASI dizgisi üretiyor (`:root { … }`),
  * ve bir stil sayfası ancak belgenin tamamına uygulanabiliyor. Bir paleti tek
  * bir kutuya uygulamak (bir önizleme, bir tema seçici) ya da köke çalışma
  * zamanında yazmak için gereken şey bir SÖZLÜK. Simge adları kalıtsal olduğu
  * için bir kutuya yazılan palet, içindeki her bileşeni birlikte döndürüyor.
  */
-export declare function paletStili(p: Palet): Record<string, string>;
-export declare function paletCss(cift: PaletCifti): string;
-export { acikligi, dL, oran };
+export declare function paletteVars(p: Palette): Record<string, string>;
+export declare function paletteCss(cift: PalettePair): string;
+export { lightness, deltaL, contrast };
+/** @deprecated `makePalette` kullan. 0.3.0'da kaldırılacak. */
+export declare const paletUret: typeof makePalette;
+/** @deprecated `measurePalette` kullan. 0.3.0'da kaldırılacak. */
+export declare const paletiOlc: typeof measurePalette;
+/** @deprecated `paletteVars` kullan. 0.3.0'da kaldırılacak. */
+export declare const paletStili: typeof paletteVars;
+/** @deprecated `paletteCss` kullan. 0.3.0'da kaldırılacak. */
+export declare const paletCss: typeof paletteCss;
+/** @deprecated `Palette` kullan. 0.3.0'da kaldırılacak. */
+export type Palet = Palette;
+/** @deprecated `PalettePair` kullan. 0.3.0'da kaldırılacak. */
+export type PaletCifti = PalettePair;
+/** @deprecated `Measurement` kullan. 0.3.0'da kaldırılacak. */
+export type Olcum = Measurement;
+/** @deprecated `isHex` kullan (tamga-ui/palette üzerinden). 0.3.0'da kaldırılacak. */
+export { gecerliHex, hexRgb, rgbHex, parlaklik, oran, acikligi, dL, hexOklch, oklchHex, oranaGoreAcikligi } from "./color.js";
 //# sourceMappingURL=palette.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"palette.d.ts","sourceRoot":"","sources":["../../src/lib/palette.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,EAAE,EAAE,UAAU,EAAsB,IAAI,EAAc,MAAM,YAAY,CAAC;AAE5F;;;;;;;;;;;;;;;;GAgBG;AAEH,qFAAqF;AACrF,MAAM,MAAM,KAAK,GAAG;IAClB,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,CAAC;IACb,SAAS,EAAE,MAAM,CAAC;IAClB,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,CAAC;IACb,GAAG,EAAE,MAAM,CAAC;IACZ,OAAO,EAAE,MAAM,CAAC;IAChB,QAAQ,EAAE,MAAM,CAAC;IACjB,MAAM,EAAE,MAAM,CAAC;IACf,WAAW,EAAE,MAAM,CAAC;IACpB,YAAY,EAAE,MAAM,CAAC;IACrB,SAAS,EAAE,MAAM,CAAC;IAClB,UAAU,EAAE,MAAM,CAAC;IACnB,QAAQ,EAAE,MAAM,CAAC;IACjB,YAAY,EAAE,MAAM,CAAC;IACrB,OAAO,EAAE,MAAM,CAAC;IAChB,QAAQ,EAAE,MAAM,CAAC;IACjB,UAAU,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,MAAM,MAAM,UAAU,GAAG;IAAE,KAAK,EAAE,KAAK,CAAC;IAAC,IAAI,EAAE,KAAK,CAAA;CAAE,CAAC;AAqHvD;;;;;GAKG;AACH,wBAAgB,SAAS,CAAC,QAAQ,EAAE,MAAM,GAAG,UAAU,CAItD;AAED,OAAO,EAAE,UAAU,EAAE,CAAC;AAItB,MAAM,MAAM,KAAK,GAAG;IAAE,EAAE,EAAE,MAAM,CAAC;IAAC,GAAG,EAAE,MAAM,GAAG,IAAI,CAAC;IAAC,KAAK,EAAE,MAAM,CAAC;IAAC,IAAI,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,OAAO,CAAA;CAAE,CAAC;AAEpG;;;;;;GAMG;AACH,wBAAgB,SAAS,CAAC,CAAC,EAAE,KAAK,GAAG,KAAK,EAAE,CAsB3C;AAwBD;;;;;;;;GAQG;AACH,wBAAgB,UAAU,CAAC,CAAC,EAAE,KAAK,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAI3D;AAED,wBAAgB,QAAQ,CAAC,IAAI,EAAE,UAAU,GAAG,MAAM,CAMjD;AAED,OAAO,EAAE,QAAQ,EAAE,EAAE,EAAE,IAAI,EAAE,CAAC"}
+{"version":3,"file":"palette.d.ts","sourceRoot":"","sources":["../../src/lib/palette.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,EAAE,KAAK,EAA0B,QAAQ,EAAc,MAAM,YAAY,CAAC;AAEpG;;;;;;;;;;;;;;;;GAgBG;AAEH,qFAAqF;AACrF,MAAM,MAAM,OAAO,GAAG;IACpB,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,CAAC;IACb,SAAS,EAAE,MAAM,CAAC;IAClB,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,CAAC;IACb,GAAG,EAAE,MAAM,CAAC;IACZ,OAAO,EAAE,MAAM,CAAC;IAChB,QAAQ,EAAE,MAAM,CAAC;IACjB,MAAM,EAAE,MAAM,CAAC;IACf,WAAW,EAAE,MAAM,CAAC;IACpB,YAAY,EAAE,MAAM,CAAC;IACrB,SAAS,EAAE,MAAM,CAAC;IAClB,UAAU,EAAE,MAAM,CAAC;IACnB,QAAQ,EAAE,MAAM,CAAC;IACjB,YAAY,EAAE,MAAM,CAAC;IACrB,OAAO,EAAE,MAAM,CAAC;IAChB,QAAQ,EAAE,MAAM,CAAC;IACjB,UAAU,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,MAAM,MAAM,WAAW,GAAG;IAAE,KAAK,EAAE,OAAO,CAAC;IAAC,IAAI,EAAE,OAAO,CAAA;CAAE,CAAC;AAqH5D;;;;;GAKG;AACH,wBAAgB,WAAW,CAAC,QAAQ,EAAE,MAAM,GAAG,WAAW,CAIzD;AAED,OAAO,EAAE,KAAK,EAAE,CAAC;AAIjB,+BAA+B;AAC/B,MAAM,MAAM,WAAW,GAAG;IACxB,gDAAgD;IAChD,IAAI,EAAE,MAAM,CAAC;IACb,qDAAqD;IACrD,IAAI,EAAE,UAAU,GAAG,QAAQ,CAAC;IAC5B,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,EAAE,MAAM,CAAC;IAClB,MAAM,EAAE,OAAO,CAAC;CACjB,CAAC;AAEF;;;;;;GAMG;AACH,wBAAgB,cAAc,CAAC,CAAC,EAAE,OAAO,GAAG,WAAW,EAAE,CAsBxD;AAwBD;;;;;;;;GAQG;AACH,wBAAgB,WAAW,CAAC,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAI9D;AAED,wBAAgB,UAAU,CAAC,IAAI,EAAE,WAAW,GAAG,MAAM,CAMpD;AAED,OAAO,EAAE,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAE,CAAC;AAKvC,+DAA+D;AAC/D,eAAO,MAAM,SAAS,oBAAc,CAAC;AACrC,kEAAkE;AAClE,eAAO,MAAM,SAAS,uBAAiB,CAAC;AACxC,+DAA+D;AAC/D,eAAO,MAAM,UAAU,oBAAc,CAAC;AACtC,8DAA8D;AAC9D,eAAO,MAAM,QAAQ,mBAAa,CAAC;AACnC,2DAA2D;AAC3D,MAAM,MAAM,KAAK,GAAG,OAAO,CAAC;AAC5B,+DAA+D;AAC/D,MAAM,MAAM,UAAU,GAAG,WAAW,CAAC;AACrC,+DAA+D;AAC/D,MAAM,MAAM,KAAK,GAAG,WAAW,CAAC;AAChC,sFAAsF;AACtF,OAAO,EAAE,UAAU,EAAE,MAAM,EAAE,MAAM,EAAE,SAAS,EAAE,IAAI,EAAE,QAAQ,EAAE,EAAE,EAAE,QAAQ,EAAE,QAAQ,EAAE,iBAAiB,EAAE,MAAM,YAAY,CAAC"}

package/dist/lib/palette.js

@@ -1,4 +1,4 @@
-import { acikligi, dL, gecerliHex, hexOklch, oklchHex, oran } from "./color.js";
+import { lightness, deltaL, isHex, hexToOklch, oklchToHex, contrast } from "./color.js";
 /**
  * Nötrlerin AÇIKLIK basamakları, iki temada.
  *
@@ -23,7 +23,7 @@ const BASAMAK = {
  * sabit, rengi değişken.
  */
 const NOTR_DOYUM = { zemin: 0.006, yuzey: 0, cizgi: 0.009, murekkep: 0.014 };
-const notr = (h, l, c) => oklchHex({ l, c, h });
+const notr = (h, l, c) => oklchToHex({ l, c, h });
 /**
  * Yüzün üstündeki mürekkep: beyaz mı koyu mu.
  *
@@ -32,7 +32,7 @@ const notr = (h, l, c) => oklchHex({ l, c, h });
  * markada okunmayan bir düğme üretiyor.
  */
 function yuzMurekkebi(yuz, acikNotr, koyuNotr) {
-    return oran(acikNotr, yuz) >= oran(koyuNotr, yuz) ? acikNotr : koyuNotr;
+    return contrast(acikNotr, yuz) >= contrast(koyuNotr, yuz) ? acikNotr : koyuNotr;
 }
 function temaUret(marka, koyu) {
     const h = marka.h;
@@ -57,25 +57,25 @@ function temaUret(marka, koyu) {
     const yuzL = Math.max(band.alt, Math.min(band.ust, marka.l));
     /* DOYUM KIRPILMIYOR. Bir süre `min(marka.c, 0.16)` vardı ve doygun bir marka
        kırmızısını (C 0.215) `#c74a4a`ya soldurup markayı gözle görülür şekilde
-       değiştiriyordu. Kırpma gereksizdi: `oklchHex` zaten gamut'a sığmayan bir
+       değiştiriyordu. Kırpma gereksizdi: `oklchToHex` zaten gamut'a sığmayan bir
        rengi ikili aramayla sığdırıyor ve TONU koruyor. Kırpmak, çözülmüş bir
        sorunu ikinci kez ve daha kötü çözmekti. */
     const kroma = marka.c;
-    let yuz = oklchHex({ l: yuzL, c: kroma, h });
+    let yuz = oklchToHex({ l: yuzL, c: kroma, h });
     let murekkep = yuzMurekkebi(yuz, shell, ink);
-    for (let i = 1; i <= 40 && oran(yuz, murekkep) < 4.5; i++) {
+    for (let i = 1; i <= 40 && contrast(yuz, murekkep) < 4.5; i++) {
         /* Mürekkep açıksa yüz koyulaşır, koyuysa açılır: mesafe hep açılıyor. */
-        const yon = acikligi(murekkep) > 50 ? -1 : 1;
-        yuz = oklchHex({ l: Math.max(0.2, Math.min(0.92, yuzL + yon * 0.01 * i)), c: kroma, h });
+        const yon = lightness(murekkep) > 50 ? -1 : 1;
+        yuz = oklchToHex({ l: Math.max(0.2, Math.min(0.92, yuzL + yon * 0.01 * i)), c: kroma, h });
         murekkep = yuzMurekkebi(yuz, shell, ink);
     }
-    const yuzOk = hexOklch(yuz);
-    const adim = (d) => oklchHex({ ...yuzOk, l: Math.max(0.06, Math.min(0.96, yuzOk.l + d)) });
+    const yuzOk = hexToOklch(yuz);
+    const adim = (d) => oklchToHex({ ...yuzOk, l: Math.max(0.06, Math.min(0.96, yuzOk.l + d)) });
     /* ÇİZGİ RENGİ (bağlantı, odak halkası) sayfada AA geçmek zorunda: bir
        bağlantı metindir. Yüz genelde geçmiyor, o yüzden ayrıca aranıyor. */
     let cizgi = koyu ? adim(0.08) : adim(-0.18);
-    for (let i = 0; i < 40 && oran(cizgi, page) < 4.5; i++) {
-        cizgi = oklchHex({ ...yuzOk, l: Math.max(0.08, Math.min(0.95, yuzOk.l + (koyu ? 1 : -1) * (0.18 + 0.01 * i))) });
+    for (let i = 0; i < 40 && contrast(cizgi, page) < 4.5; i++) {
+        cizgi = oklchToHex({ ...yuzOk, l: Math.max(0.08, Math.min(0.95, yuzOk.l + (koyu ? 1 : -1) * (0.18 + 0.01 * i))) });
     }
     return {
         page,
@@ -97,9 +97,9 @@ function temaUret(marka, koyu) {
         accentInk: murekkep,
         accentLine: cizgi,
         /* Seçili satır zemini: sayfaya çok yakın, ama ayrı okunuyor. */
-        accentBg: oklchHex({ l: koyu ? b.page + 0.06 : b.page - 0.035, c: 0.03, h }),
+        accentBg: oklchToHex({ l: koyu ? b.page + 0.06 : b.page - 0.035, c: 0.03, h }),
         /* Taban: yüzün ALTINDA duran koyu, doygun renk (13 Yasa 1). */
-        accentShadow: oklchHex({ l: koyu ? 0.42 : 0.28, c: Math.min(marka.c, 0.13), h }),
+        accentShadow: oklchToHex({ l: koyu ? 0.42 : 0.28, c: Math.min(marka.c, 0.13), h }),
         navIdle: notr(h, b.navIdle, NOTR_DOYUM.murekkep),
         navHover: notr(h, b.navHover, NOTR_DOYUM.murekkep),
         navHoverBg: notr(h, koyu ? b.hover : b.hover - 0.01, NOTR_DOYUM.zemin),
@@ -109,15 +109,15 @@ function temaUret(marka, koyu) {
  * Bir marka renginden iki tema.
  *
  * Geçersiz bir kodda FIRLATIYOR, sessizce griye düşmüyor: yarım yazılmış bir
- * hex'in ne anlama geldiğine çağıran karar veriyor (`gecerliHex`).
+ * hex'in ne anlama geldiğine çağıran karar veriyor (`isHex`).
  */
-export function paletUret(markaHex) {
-    if (!gecerliHex(markaHex))
+export function makePalette(markaHex) {
+    if (!isHex(markaHex))
         throw new Error(`Geçersiz marka rengi: ${JSON.stringify(markaHex)}`);
-    const marka = hexOklch(markaHex);
+    const marka = hexToOklch(markaHex);
     return { light: temaUret(marka, false), dark: temaUret(marka, true) };
 }
-export { gecerliHex };
+export { isHex };
 /**
  * Üretilen paleti `check-token-contrast` ile AYNI eşiklerden geçirir.
  *
@@ -125,14 +125,14 @@ export { gecerliHex };
  * yarın bir ton için yanlış olur. Marka rengi değiştiğinde bu liste yeniden
  * koşuyor, ve geçmeyen bir palet build'i kırıyor.
  */
-export function paletiOlc(p) {
-    const metin = (ad, a, b, esik = 4.5) => {
-        const deger = Number(oran(a, b).toFixed(2));
-        return { ad, tur: "oran", deger, esik, gecti: deger >= esik };
+export function measurePalette(p) {
+    const metin = (name, a, b, threshold = 4.5) => {
+        const value = Number(contrast(a, b).toFixed(2));
+        return { name, kind: "contrast", value, threshold, passed: value >= threshold };
     };
-    const yuzey = (ad, a, b, esik) => {
-        const deger = Number(dL(a, b).toFixed(1));
-        return { ad, tur: "dL", deger, esik, gecti: deger >= esik };
+    const yuzey = (name, a, b, threshold) => {
+        const value = Number(deltaL(a, b).toFixed(1));
+        return { name, kind: "deltaL", value, threshold, passed: value >= threshold };
     };
     return [
         metin("ink · page", p.ink, p.page),
@@ -150,9 +150,9 @@ export function paletiOlc(p) {
 }
 /** `:root` bloğuna yapıştırılabilir CSS. */
 /**
- * Palet alanı → CSS simge adı.
+ * Palette alanı → CSS simge adı.
  *
- * DIŞARI AÇIK, ÇÜNKÜ ÜÇÜNCÜ KOPYASI DOĞACAKTI. Bu eşleme `paletCss`in içinde
+ * DIŞARI AÇIK, ÇÜNKÜ ÜÇÜNCÜ KOPYASI DOĞACAKTI. Bu eşleme `paletteCss`in içinde
  * özeldi; bir ürün paneli aynısını kendi dosyasına elle yazmıştı (rengi
  * çalışma zamanında köke yazmak için), ve doküman sitesi de üçüncüsünü
  * yazacaktı. Aynı yirmi iki satırın üç kopyası, kite bir simge eklendiği gün
@@ -172,22 +172,34 @@ const AD = {
 /**
  * Bir paleti CSS değişkeni sözlüğüne çevirir: `{ "--color-accent": "#..." }`.
  *
- * NEDEN `paletCss` YETMİYOR: o bir STİL SAYFASI dizgisi üretiyor (`:root { … }`),
+ * NEDEN `paletteCss` YETMİYOR: o bir STİL SAYFASI dizgisi üretiyor (`:root { … }`),
  * ve bir stil sayfası ancak belgenin tamamına uygulanabiliyor. Bir paleti tek
  * bir kutuya uygulamak (bir önizleme, bir tema seçici) ya da köke çalışma
  * zamanında yazmak için gereken şey bir SÖZLÜK. Simge adları kalıtsal olduğu
  * için bir kutuya yazılan palet, içindeki her bileşeni birlikte döndürüyor.
  */
-export function paletStili(p) {
+export function paletteVars(p) {
     const stil = {};
     for (const alan of Object.keys(AD))
         stil[AD[alan]] = p[alan];
     return stil;
 }
-export function paletCss(cift) {
-    const blok = (p) => Object.entries(paletStili(p))
+export function paletteCss(cift) {
+    const blok = (p) => Object.entries(paletteVars(p))
         .map(([ad, deger]) => `  ${ad}: ${deger};`)
         .join("\n");
     return `:root {\n${blok(cift.light)}\n}\n\n.dark {\n${blok(cift.dark)}\n}\n`;
 }
-export { acikligi, dL, oran };
+export { lightness, deltaL, contrast };
+/* Eski Türkçe adlar, 0.3.0'a kadar. SİLME: 0.1.1 npm'de yayında ve bu adları
+   kullanan bir tüketici var. */
+/** @deprecated `makePalette` kullan. 0.3.0'da kaldırılacak. */
+export const paletUret = makePalette;
+/** @deprecated `measurePalette` kullan. 0.3.0'da kaldırılacak. */
+export const paletiOlc = measurePalette;
+/** @deprecated `paletteVars` kullan. 0.3.0'da kaldırılacak. */
+export const paletStili = paletteVars;
+/** @deprecated `paletteCss` kullan. 0.3.0'da kaldırılacak. */
+export const paletCss = paletteCss;
+/** @deprecated `isHex` kullan (tamga-ui/palette üzerinden). 0.3.0'da kaldırılacak. */
+export { gecerliHex, hexRgb, rgbHex, parlaklik, oran, acikligi, dL, hexOklch, oklchHex, oranaGoreAcikligi } from "./color.js";

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

@@ -10,21 +10,37 @@ import { type LinkComponent } from "./shared.js";
 export type NavEntry = {
     key: string;
     href: string;
-    /** Çevrilmiş etiket. Ray dar olduğu için ekranda değil, `title` ve etikette. */
+    /** The translated label. In the tooltip on a narrow rail, on the row itself on a wide one. TR: Çevrilmiş etiket. Dar rayda ipucunda, geniş rayda satırın kendisinde. */
     label: string;
     icon: ComponentProps<typeof Icon>["icon"];
 };
 export type AppShellProps = {
-    /** Rayın tepesindeki marka işareti; kendi bağlantısını çağıran veriyor. */
+    /** The brand mark at the top of the rail; the caller supplies its own link. TR: Rayın tepesindeki marka işareti; kendi bağlantısını çağıran veriyor. */
     brand?: ReactNode;
     nav: readonly NavEntry[];
-    /** Açık yol. Rota `usePathname()` geçiyor. */
+    /** The open path. The route passes `usePathname()`. TR: Açık yol. Rota `usePathname()` geçiyor. */
     activePath: string;
     /**
-     * Üst şerit KÜRESEL BAĞLAM, iş değil. İçerik çağıranın; şablon yalnız yerini
-     * garanti ediyor.
+     * How wide the rail is. TR: Rayın genişliği.
+     *
+     * `narrow` yalnız simge, etiket ipucunda; `wide` simge ve etiket yan yana.
+     * Dar ray ekranı içeriğe bırakıyor ve simgeleri tanıyan birine yetiyor;
+     * geniş ray yeni gelen birine menüyü okutuyor. Hangisinin doğru olduğu
+     * ürüne bağlı, o yüzden şablon karar vermiyor, soruyor.
+     *
+     * "Kullanıcı seçsin" diye bir üçüncü değer YOK ve olmamalı: o bir TERCİH,
+     * ve tercihin nerede saklandığını (oturum, hesap, tarayıcı) kit bilemez.
+     * Ürün tercihi okur, buraya `narrow` ya da `wide` geçer.
+     */
+    rail?: "narrow" | "wide";
+    /**
+     * The top bar is GLOBAL CONTEXT, not work. The content belongs to the caller; the template
+     * only guarantees its place. TR: Üst şerit KÜRESEL BAĞLAM, iş değil. İçerik çağıranın; şablon
+     * yalnız yerini garanti ediyor.
      */
     topbar?: ReactNode;
+    /** A control at the foot of the rail: an expand/collapse button, say. TR: Rayın dibine giren kontrol: genişlet/daralt düğmesi gibi. */
+    railFooter?: ReactNode;
     linkComponent?: LinkComponent;
     labels: {
         home: string;
@@ -32,5 +48,5 @@ export type AppShellProps = {
     };
     children: ReactNode;
 };
-export declare function AppShell({ brand, nav, activePath, topbar, linkComponent: Link, labels, children, }: AppShellProps): import("react").JSX.Element;
+export declare function AppShell({ brand, nav, activePath, rail, topbar, railFooter, linkComponent: Link, labels, children, }: AppShellProps): import("react").JSX.Element;
 //# sourceMappingURL=app-shell.d.ts.map

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;AAC7C,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,gFAAgF;IAChF,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,cAAc,CAAC,OAAO,IAAI,CAAC,CAAC,MAAM,CAAC,CAAC;CAC3C,CAAC;AAEF,MAAM,MAAM,aAAa,GAAG;IAC1B,2EAA2E;IAC3E,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,GAAG,EAAE,SAAS,QAAQ,EAAE,CAAC;IACzB,8CAA8C;IAC9C,UAAU,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB,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,MAAM,EACN,aAAa,EAAE,IAAgB,EAC/B,MAAM,EACN,QAAQ,GACT,EAAE,aAAa,+BAwDf"}
+{"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,14 +1,13 @@
 "use client";
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Icon } from "../components/icon.js";
+import { RailLink } from "../components/rail-link.js";
 import { PlainLink } from "./shared.js";
-export function AppShell({ brand, nav, activePath, topbar, linkComponent: Link = PlainLink, labels, children, }) {
+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`
        üzerinde de açık giriştir. Tam eşleşme yalnız kök yol için, yoksa kısa href
        altındaki her rotayı yutar. */
     const isCurrent = (href) => href === "/" ? activePath === href : activePath === href || activePath.startsWith(`${href}/`);
-    return (_jsxs("div", { className: "flex h-dvh w-full overflow-hidden bg-shell text-ink-soft", children: [_jsxs("aside", { className: "flex w-16 shrink-0 flex-col items-center gap-2 bg-shell px-1 py-4", children: [brand ? (_jsxs(_Fragment, { children: [_jsx("span", { "aria-label": labels.home, className: "mb-2 flex size-10 shrink-0 items-center justify-center text-ink", children: brand }), _jsx("span", { className: "h-0 w-6 border-t border-line" })] })) : null, _jsx("nav", { "aria-label": labels.primaryNav, className: "tamga-rail-scroll flex w-full flex-1 flex-col items-center gap-2 py-1", children: nav.map((entry) => {
-                            const current = isCurrent(entry.href);
-                            return (_jsx(Link, { href: entry.href, "aria-label": entry.label, title: 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" }) }, entry.key));
-                        }) })] }), _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 p-4 pt-0", children: _jsx("main", { className: "tamga-surface h-full min-h-0 overflow-y-auto", children: children }) })] })] }));
+    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) => (_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/auth-template.d.ts

@@ -6,17 +6,20 @@ import type { ReactNode } from "react";
  * Gerekçe: docs/adr/0004-sablon-katmani.md
  */
 export declare function AuthTemplate({ brand, title, subtitle, children, footer, aside, }: {
-    /** Markanın işareti. Sözcük markası değil işaret: bu ekranın işi tek alan ve tek düğme. */
+    /** The brand's mark. The mark, not the wordmark: this screen's job is one field and one button. TR: Markanın işareti. Sözcük markası değil işaret: bu ekranın işi tek alan ve tek düğme. */
     brand?: ReactNode;
     title: string;
     subtitle?: string;
     children: ReactNode;
     footer?: ReactNode;
     /**
-     * Ekranın öteki yarısındaki panel. Kayıtta var, girişte yok, ve asimetri
-     * kasıtlı: giriş yapan kişi acelesi olan, dönen bir kullanıcı; kaydolan kişi
-     * hâlâ karar veriyor. Birinciye bir şey satmak gürültü, ikinciye hiçbir şey
-     * dememek ekranı ziyan etmek.
+     * The panel on the screen's other half. Present on sign-up, absent on sign-in, and the
+     * asymmetry is deliberate: the person signing in is a returning user in a hurry; the person
+     * signing up is still deciding. Selling something to the first is noise; saying nothing to
+     * the second wastes the screen. TR: Ekranın öteki yarısındaki panel. Kayıtta var, girişte
+     * yok, ve asimetri kasıtlı: giriş yapan kişi acelesi olan, dönen bir kullanıcı; kaydolan kişi
+     * hâlâ karar veriyor. Birinciye bir şey satmak gürültü, ikinciye hiçbir şey dememek ekranı
+     * ziyan etmek.
      */
     aside?: ReactNode;
 }): import("react").JSX.Element;
@@ -30,7 +33,7 @@ export declare function AuthTemplate({ brand, title, subtitle, children, footer,
  */
 export declare function AuthProviders({ children, dividerLabel, }: {
     children: ReactNode;
-    /** Ayıracın üstündeki sözcük. */
+    /** The word sitting on the divider. TR: Ayıracın üstündeki sözcük. */
     dividerLabel: string;
 }): import("react").JSX.Element;
 //# sourceMappingURL=auth-template.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"auth-template.d.ts","sourceRoot":"","sources":["../../src/patterns/auth-template.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGvC;;;;;GAKG;AACH,wBAAgB,YAAY,CAAC,EAC3B,KAAK,EACL,KAAK,EACL,QAAQ,EACR,QAAQ,EACR,MAAM,EACN,KAAK,GACN,EAAE;IACD,2FAA2F;IAC3F,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,EAAE,SAAS,CAAC;IACpB,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB;;;;;OAKG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;CACnB,+BAyDA;AAED;;;;;;;GAOG;AACH,wBAAgB,aAAa,CAAC,EAC5B,QAAQ,EACR,YAAY,GACb,EAAE;IACD,QAAQ,EAAE,SAAS,CAAC;IACpB,iCAAiC;IACjC,YAAY,EAAE,MAAM,CAAC;CACtB,+BAWA"}
+{"version":3,"file":"auth-template.d.ts","sourceRoot":"","sources":["../../src/patterns/auth-template.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGvC;;;;;GAKG;AACH,wBAAgB,YAAY,CAAC,EAC3B,KAAK,EACL,KAAK,EACL,QAAQ,EACR,QAAQ,EACR,MAAM,EACN,KAAK,GACN,EAAE;IACD,4LAA4L;IAC5L,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,EAAE,SAAS,CAAC;IACpB,MAAM,CAAC,EAAE,SAAS,CAAC;IACnB;;;;;;;;OAQG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;CACnB,+BAyDA;AAED;;;;;;;GAOG;AACH,wBAAgB,aAAa,CAAC,EAC5B,QAAQ,EACR,YAAY,GACb,EAAE;IACD,QAAQ,EAAE,SAAS,CAAC;IACpB,sEAAsE;IACtE,YAAY,EAAE,MAAM,CAAC;CACtB,+BAWA"}

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

@@ -8,20 +8,20 @@ import { type ErrorLabels, type LinkComponent, type TemplateError } from "./shar
  */
 export type DetailState = "ready" | "loading" | "error";
 export type DetailTab = {
-    /** Kararlı kimlik; karşılaştırma ve testler bununla. */
+    /** A stable identity; comparisons and tests use this. TR: Kararlı kimlik; karşılaştırma ve testler bununla. */
     key: string;
-    /** Çevrilmiş etiket: şablon kendisine verilen sözcüğü çiziyor, aramıyor. */
+    /** The translated label: the template draws the word it is given, it does not look one up. TR: Çevrilmiş etiket: şablon kendisine verilen sözcüğü çiziyor, aramıyor. */
     label: string;
     href: string;
 };
 export type DetailTemplateProps = {
-    /** Başlığın üstündeki iz. Son öğe o anki nesnedir ve href almaz. */
+    /** The trail above the title. The last item is the current object and takes no href. TR: Başlığın üstündeki iz. Son öğe o anki nesnedir ve href almaz. */
     breadcrumb: {
         label: string;
         href?: string;
     }[];
     title: string;
-    /** Başlığın altı: nesnenin kimlik satırı. */
+    /** Under the title: the object's identity line. TR: Başlığın altı: nesnenin kimlik satırı. */
     subtitle?: string;
     actions?: ReactNode;
     /**
@@ -45,7 +45,7 @@ export type DetailTemplateProps = {
         breadcrumb: string;
         tabs: string;
     } & ErrorLabels;
-    /** Açık sekmenin gövdesi. Şablon hangi sekme olduğunu bilmiyor, bilmemeli. */
+    /** The body of the open tab. The template does not know which tab it is, and must not. TR: Açık sekmenin gövdesi. Şablon hangi sekme olduğunu bilmiyor, bilmemeli. */
     children?: ReactNode;
 };
 export declare function DetailTemplate({ breadcrumb, title, subtitle, actions, tabs, activeTab, state, error, linkComponent: Link, labels, children, }: DetailTemplateProps): import("react").JSX.Element;

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

@@ -1 +1 @@
-{"version":3,"file":"detail-template.d.ts","sourceRoot":"","sources":["../../src/patterns/detail-template.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGvC,OAAO,EAIL,KAAK,WAAW,EAChB,KAAK,aAAa,EAClB,KAAK,aAAa,EACnB,MAAM,aAAa,CAAC;AAErB;;;;;GAKG;AAEH,MAAM,MAAM,WAAW,GAAG,OAAO,GAAG,SAAS,GAAG,OAAO,CAAC;AAExD,MAAM,MAAM,SAAS,GAAG;IACtB,wDAAwD;IACxD,GAAG,EAAE,MAAM,CAAC;IACZ,4EAA4E;IAC5E,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;CACd,CAAC;AAEF,MAAM,MAAM,mBAAmB,GAAG;IAChC,oEAAoE;IACpE,UAAU,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,IAAI,CAAC,EAAE,MAAM,CAAA;KAAE,EAAE,CAAC;IAC/C,KAAK,EAAE,MAAM,CAAC;IACd,6CAA6C;IAC7C,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,OAAO,CAAC,EAAE,SAAS,CAAC;IAEpB;;;;;;;;;OASG;IACH,IAAI,CAAC,EAAE,SAAS,SAAS,EAAE,CAAC;IAC5B,8EAA8E;IAC9E,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,KAAK,CAAC,EAAE,WAAW,CAAC;IACpB,KAAK,CAAC,EAAE,aAAa,CAAC;IAEtB,aAAa,CAAC,EAAE,aAAa,CAAC;IAC9B,MAAM,EAAE;QAAE,OAAO,EAAE,MAAM,CAAC;QAAC,UAAU,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAA;KAAE,GAAG,WAAW,CAAC;IAE5E,8EAA8E;IAC9E,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB,CAAC;AAEF,wBAAgB,cAAc,CAAC,EAC7B,UAAU,EACV,KAAK,EACL,QAAQ,EACR,OAAO,EACP,IAAI,EACJ,SAAS,EACT,KAAe,EACf,KAAK,EACL,aAAa,EAAE,IAAgB,EAC/B,MAAM,EACN,QAAQ,GACT,EAAE,mBAAmB,+BA+CrB"}
+{"version":3,"file":"detail-template.d.ts","sourceRoot":"","sources":["../../src/patterns/detail-template.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGvC,OAAO,EAIL,KAAK,WAAW,EAChB,KAAK,aAAa,EAClB,KAAK,aAAa,EACnB,MAAM,aAAa,CAAC;AAErB;;;;;GAKG;AAEH,MAAM,MAAM,WAAW,GAAG,OAAO,GAAG,SAAS,GAAG,OAAO,CAAC;AAExD,MAAM,MAAM,SAAS,GAAG;IACtB,+GAA+G;IAC/G,GAAG,EAAE,MAAM,CAAC;IACZ,wKAAwK;IACxK,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;CACd,CAAC;AAEF,MAAM,MAAM,mBAAmB,GAAG;IAChC,0JAA0J;IAC1J,UAAU,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,IAAI,CAAC,EAAE,MAAM,CAAA;KAAE,EAAE,CAAC;IAC/C,KAAK,EAAE,MAAM,CAAC;IACd,8FAA8F;IAC9F,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,OAAO,CAAC,EAAE,SAAS,CAAC;IAEpB;;;;;;;;;OASG;IACH,IAAI,CAAC,EAAE,SAAS,SAAS,EAAE,CAAC;IAC5B,8EAA8E;IAC9E,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,KAAK,CAAC,EAAE,WAAW,CAAC;IACpB,KAAK,CAAC,EAAE,aAAa,CAAC;IAEtB,aAAa,CAAC,EAAE,aAAa,CAAC;IAC9B,MAAM,EAAE;QAAE,OAAO,EAAE,MAAM,CAAC;QAAC,UAAU,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAA;KAAE,GAAG,WAAW,CAAC;IAE5E,sKAAsK;IACtK,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB,CAAC;AAEF,wBAAgB,cAAc,CAAC,EAC7B,UAAU,EACV,KAAK,EACL,QAAQ,EACR,OAAO,EACP,IAAI,EACJ,SAAS,EACT,KAAe,EACf,KAAK,EACL,aAAa,EAAE,IAAgB,EAC/B,MAAM,EACN,QAAQ,GACT,EAAE,mBAAmB,+BA+CrB"}

package/dist/patterns/index.d.ts

@@ -6,7 +6,7 @@
  * dayatıyor, çünkü işleri o. Ayrı bir giriş, bir ürünün "yalnız bileşenleri
  * alayım" diyebilmesi demek.
  */
-export { PlainLink, ErrorSlot, Busy, errorDetail, type ErrorLabels, type LinkComponent, type TemplateError, } from "./shared.js";
+export { PlainLink, errorDetail, type ErrorLabels, type LinkComponent, type TemplateError, } from "./shared.js";
 export { ListTemplate, type ListState, type ListTemplateProps } from "./list-template.js";
 export { OverviewTemplate, type OverviewState, type OverviewTemplateProps, } from "./overview-template.js";
 export { DetailTemplate, type DetailState, type DetailTab, type DetailTemplateProps, } from "./detail-template.js";
@@ -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;AACH,OAAO,EACL,SAAS,EACT,SAAS,EACT,IAAI,EACJ,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

@@ -6,7 +6,11 @@
  * dayatıyor, çünkü işleri o. Ayrı bir giriş, bir ürünün "yalnız bileşenleri
  * alayım" diyebilmesi demek.
  */
-export { PlainLink, ErrorSlot, Busy, errorDetail, } from "./shared.js";
+/* `ErrorSlot` ve `Busy` DIŞA VURULMUYOR: şablonların iç makinesi. Hata ve
+   yükleme hâllerini şablonlar zaten kendileri çiziyor, ve ikisini ayrıca
+   sunmak "aynı hâli iki farklı yoldan çizme" davetiydi. Bir tüketici o
+   görünümü istiyorsa şablonu kullanıyor. */
+export { PlainLink, errorDetail, } from "./shared.js";
 export { ListTemplate } from "./list-template.js";
 export { OverviewTemplate, } from "./overview-template.js";
 export { DetailTemplate, } from "./detail-template.js";
@@ -15,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";