tamga-ui 0.1.0

package/dist/lib/cn.d.ts

@@ -0,0 +1,10 @@
+import { type ClassValue } from "clsx";
+/**
+ * Joins class names and lets a caller's utility win over the component's own.
+ *
+ * Without the merge, `<Button className="px-8">` produces "px-4 px-8" and which
+ * one applies depends on their order in the stylesheet, not on which the caller
+ * asked for. twMerge drops the loser, so an override is an override.
+ */
+export declare function cn(...inputs: ClassValue[]): string;
+//# sourceMappingURL=cn.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"cn.d.ts","sourceRoot":"","sources":["../../src/lib/cn.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,KAAK,UAAU,EAAE,MAAM,MAAM,CAAC;AAG7C;;;;;;GAMG;AACH,wBAAgB,EAAE,CAAC,GAAG,MAAM,EAAE,UAAU,EAAE,UAEzC"}

package/dist/lib/cn.js

@@ -0,0 +1,12 @@
+import { clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+/**
+ * Joins class names and lets a caller's utility win over the component's own.
+ *
+ * Without the merge, `<Button className="px-8">` produces "px-4 px-8" and which
+ * one applies depends on their order in the stylesheet, not on which the caller
+ * asked for. twMerge drops the loser, so an override is an override.
+ */
+export function cn(...inputs) {
+    return twMerge(clsx(inputs));
+}

package/dist/lib/color.d.ts

@@ -0,0 +1,68 @@
+/**
+ * Renk matematiği: sRGB · OKLab · WCAG oranı · CIE L*.
+ *
+ * Bir bağımlılık değil çünkü ihtiyaç küçük ve KAPI'ya bağlı: paletin doğru
+ * olup olmadığını `check-token-contrast` ölçüyor, ve ölçenle üretenin aynı
+ * aritmetiği kullanması gerekiyor. `lib/color.test.ts` ikisinin aynı sayıyı
+ * verdiğini kanıtlıyor.
+ *
+ * NEDEN OKLCH. Palet "aynı açıklıkta, başka renk" üretmek zorunda: mor bir
+ * markanın zemini ile mavi bir markanın zemini AYNI açıklıkta olmalı, yoksa
+ * biri ötekinden koyu görünür ve kontrast eşikleri kayar. HSL bunu yapamıyor
+ * (HSL'de %50 sarı ile %50 mavi bambaşka parlaklıkta); OKLab algısal olarak
+ * düzgün, yani L sabit tutulduğunda açıklık gerçekten sabit kalıyor.
+ */
+export type Oklch = {
+    l: number;
+    c: number;
+    h: number;
+};
+/** `#abc` ya da `#aabbcc`. Kısa biçim de sayılıyor, boşluk sayılmıyor. */
+export declare const gecerliHex: (v: string) => boolean;
+/**
+ * Hex → RGB, GEÇERSİZ GİRDİDE FIRLATARAK.
+ *
+ * Önce sessizce `NaN` üretiyordu ve palet gri bir şeye düşüyordu: bir kullanıcı
+ * hex kutusuna `#7c3aed` yazarken ara adımlarda (`#7`, `#7c`) panel griye
+ * dönüyor, sonra geri geliyordu. Hata vermeyen bir bozulma en pahalısı, çünkü
+ * sebebi rengin kendisinde aranıyor.
+ *
+ * Kit KATI, çağıran toleranslı: yarım yazılmış bir kodun ne anlama geldiği
+ * ekranın kararı (bkz. `gecerliHex`).
+ */
+export declare function hexRgb(hex: string): [number, number, number];
+export declare const rgbHex: (r: number, g: number, b: number) => string;
+/** WCAG bağıl parlaklık. Metin kontrastı bununla ölçülüyor. */
+export declare function parlaklik(hex: string): number;
+/** WCAG kontrast oranı. AA metin eşiği 4.5. */
+export declare function oran(a: string, b: string): number;
+/**
+ * CIE L* · algısal açıklık.
+ *
+ * İki YÜZEYİN ayrı okunup okunmadığı bununla ölçülüyor; kontrast oranı metin
+ * içindir, yüzey için değil. Bir kartın kenarı sayfadan ΔL* ≥ 10 ayrı olmalı.
+ */
+export declare function acikligi(hex: string): number;
+export declare const dL: (a: string, b: string) => number;
+export declare function hexOklch(hex: string): Oklch;
+/**
+ * OKLCH → hex, GAMUT DIŞINA TAŞMADAN.
+ *
+ * Bir renk sRGB'ye sığmıyorsa kanalları kırpmak TONU kaydırıyor: mor bir yüz
+ * kırpıldığında maviye dönüyor ve marka rengi olmaktan çıkıyor. Onun yerine
+ * doyum (C) ikili aramayla sığana kadar düşürülüyor; ton ve açıklık korunuyor,
+ * yalnız canlılık gerektiği kadar azalıyor.
+ */
+export declare function oklchHex({ l, c, h }: Oklch): string;
+/**
+ * Verilen ton ve doyumda, HEDEF ORANI tutturan açıklığı arar.
+ *
+ * Palet "şu formülle koyulaştır" demiyor, ÖLÇÜP arıyor: bir rengin beyaz
+ * mürekkebi 4.5'te taşıyıp taşımadığı tona göre değişiyor (sarı ile lacivert
+ * aynı L'de aynı oranı vermiyor). Formül tahmin eder, arama ölçer.
+ *
+ * `yon` "koyulaş" (-1) ya da "açıl" (+1): koyu temada aynı hedef ters yönden
+ * yakalanıyor.
+ */
+export declare function oranaGoreAcikligi(taban: Oklch, karsi: string, hedef: number, yon: -1 | 1): Oklch;
+//# sourceMappingURL=color.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"color.d.ts","sourceRoot":"","sources":["../../src/lib/color.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;GAaG;AAEH,MAAM,MAAM,KAAK,GAAG;IAAE,CAAC,EAAE,MAAM,CAAC;IAAC,CAAC,EAAE,MAAM,CAAC;IAAC,CAAC,EAAE,MAAM,CAAA;CAAE,CAAC;AAKxD,0EAA0E;AAC1E,eAAO,MAAM,UAAU,MAAO,MAAM,KAAG,OAA0D,CAAC;AAElG;;;;;;;;;;GAUG;AACH,wBAAgB,MAAM,CAAC,GAAG,EAAE,MAAM,GAAG,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,CAM5D;AAGD,eAAO,MAAM,MAAM,MAAO,MAAM,KAAK,MAAM,KAAK,MAAM,WACuB,CAAC;AAE9E,+DAA+D;AAC/D,wBAAgB,SAAS,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAG7C;AAED,+CAA+C;AAC/C,wBAAgB,IAAI,CAAC,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,GAAG,MAAM,CAGjD;AAED;;;;;GAKG;AACH,wBAAgB,QAAQ,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAG5C;AAED,eAAO,MAAM,EAAE,MAAO,MAAM,KAAK,MAAM,WAAwC,CAAC;AAIhF,wBAAgB,QAAQ,CAAC,GAAG,EAAE,MAAM,GAAG,KAAK,CAiB3C;AAED;;;;;;;GAOG;AACH,wBAAgB,QAAQ,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,EAAE,KAAK,GAAG,MAAM,CA6BnD;AAED;;;;;;;;;GASG;AACH,wBAAgB,iBAAiB,CAC/B,KAAK,EAAE,KAAK,EACZ,KAAK,EAAE,MAAM,EACb,KAAK,EAAE,MAAM,EACb,GAAG,EAAE,CAAC,CAAC,GAAG,CAAC,GACV,KAAK,CAQP"}

package/dist/lib/color.js

@@ -0,0 +1,134 @@
+/**
+ * Renk matematiği: sRGB · OKLab · WCAG oranı · CIE L*.
+ *
+ * Bir bağımlılık değil çünkü ihtiyaç küçük ve KAPI'ya bağlı: paletin doğru
+ * olup olmadığını `check-token-contrast` ölçüyor, ve ölçenle üretenin aynı
+ * aritmetiği kullanması gerekiyor. `lib/color.test.ts` ikisinin aynı sayıyı
+ * verdiğini kanıtlıyor.
+ *
+ * NEDEN OKLCH. Palet "aynı açıklıkta, başka renk" üretmek zorunda: mor bir
+ * markanın zemini ile mavi bir markanın zemini AYNI açıklıkta olmalı, yoksa
+ * biri ötekinden koyu görünür ve kontrast eşikleri kayar. HSL bunu yapamıyor
+ * (HSL'de %50 sarı ile %50 mavi bambaşka parlaklıkta); OKLab algısal olarak
+ * düzgün, yani L sabit tutulduğunda açıklık gerçekten sabit kalıyor.
+ */
+const srgbDoğrusal = (v) => (v <= 0.04045 ? v / 12.92 : ((v + 0.055) / 1.055) ** 2.4);
+const doğrusalSrgb = (v) => (v <= 0.0031308 ? v * 12.92 : 1.055 * v ** (1 / 2.4) - 0.055);
+/** `#abc` ya da `#aabbcc`. Kısa biçim de sayılıyor, boşluk sayılmıyor. */
+export const gecerliHex = (v) => /^#?([0-9a-f]{3}|[0-9a-f]{6})$/i.test(v.trim());
+/**
+ * Hex → RGB, GEÇERSİZ GİRDİDE FIRLATARAK.
+ *
+ * Önce sessizce `NaN` üretiyordu ve palet gri bir şeye düşüyordu: bir kullanıcı
+ * hex kutusuna `#7c3aed` yazarken ara adımlarda (`#7`, `#7c`) panel griye
+ * dönüyor, sonra geri geliyordu. Hata vermeyen bir bozulma en pahalısı, çünkü
+ * sebebi rengin kendisinde aranıyor.
+ *
+ * Kit KATI, çağıran toleranslı: yarım yazılmış bir kodun ne anlama geldiği
+ * ekranın kararı (bkz. `gecerliHex`).
+ */
+export function hexRgb(hex) {
+    if (!gecerliHex(hex))
+        throw new Error(`Geçersiz hex: ${JSON.stringify(hex)}`);
+    const s = hex.trim().replace("#", "");
+    const t = s.length === 3 ? [...s].map((c) => c + c).join("") : s;
+    const n = Number.parseInt(t, 16);
+    return [(n >> 16) & 255, (n >> 8) & 255, n & 255];
+}
+const kanal = (v) => Math.max(0, Math.min(255, Math.round(v * 255)));
+export const rgbHex = (r, g, b) => "#" + [r, g, b].map((v) => kanal(v).toString(16).padStart(2, "0")).join("");
+/** WCAG bağıl parlaklık. Metin kontrastı bununla ölçülüyor. */
+export function parlaklik(hex) {
+    const [r, g, b] = hexRgb(hex).map((v) => srgbDoğrusal(v / 255));
+    return 0.2126 * r + 0.7152 * g + 0.0722 * b;
+}
+/** WCAG kontrast oranı. AA metin eşiği 4.5. */
+export function oran(a, b) {
+    const [ust, alt] = [parlaklik(a), parlaklik(b)].sort((x, y) => y - x);
+    return (ust + 0.05) / (alt + 0.05);
+}
+/**
+ * CIE L* · algısal açıklık.
+ *
+ * İki YÜZEYİN ayrı okunup okunmadığı bununla ölçülüyor; kontrast oranı metin
+ * içindir, yüzey için değil. Bir kartın kenarı sayfadan ΔL* ≥ 10 ayrı olmalı.
+ */
+export function acikligi(hex) {
+    const y = parlaklik(hex);
+    return y > 216 / 24389 ? 116 * Math.cbrt(y) - 16 : (y * 24389) / 27;
+}
+export const dL = (a, b) => Math.abs(acikligi(a) - acikligi(b));
+/* ---- OKLab ---- */
+export function hexOklch(hex) {
+    const [r8, g8, b8] = hexRgb(hex);
+    const r = srgbDoğrusal(r8 / 255);
+    const g = srgbDoğrusal(g8 / 255);
+    const b = srgbDoğrusal(b8 / 255);
+    const l = Math.cbrt(0.4122214708 * r + 0.5363325363 * g + 0.0514459929 * b);
+    const m = Math.cbrt(0.2119034982 * r + 0.6806995451 * g + 0.1073969566 * b);
+    const s = Math.cbrt(0.0883024619 * r + 0.2817188376 * g + 0.6299787005 * b);
+    const L = 0.2104542553 * l + 0.793617785 * m - 0.0040720468 * s;
+    const A = 1.9779984951 * l - 2.428592205 * m + 0.4505937099 * s;
+    const B = 0.0259040371 * l + 0.7827717662 * m - 0.808675766 * s;
+    const c = Math.hypot(A, B);
+    const h = c < 1e-6 ? 0 : ((Math.atan2(B, A) * 180) / Math.PI + 360) % 360;
+    return { l: L, c, h };
+}
+/**
+ * OKLCH → hex, GAMUT DIŞINA TAŞMADAN.
+ *
+ * Bir renk sRGB'ye sığmıyorsa kanalları kırpmak TONU kaydırıyor: mor bir yüz
+ * kırpıldığında maviye dönüyor ve marka rengi olmaktan çıkıyor. Onun yerine
+ * doyum (C) ikili aramayla sığana kadar düşürülüyor; ton ve açıklık korunuyor,
+ * yalnız canlılık gerektiği kadar azalıyor.
+ */
+export function oklchHex({ l, c, h }) {
+    const dene = (kroma) => {
+        const hr = (h * Math.PI) / 180;
+        const A = Math.cos(hr) * kroma;
+        const B = Math.sin(hr) * kroma;
+        const l_ = (l + 0.3963377774 * A + 0.2158037573 * B) ** 3;
+        const m_ = (l - 0.1055613458 * A - 0.0638541728 * B) ** 3;
+        const s_ = (l - 0.0894841775 * A - 1.291485548 * B) ** 3;
+        return [
+            doğrusalSrgb(+4.0767416621 * l_ - 3.3077115913 * m_ + 0.2309699292 * s_),
+            doğrusalSrgb(-1.2684380046 * l_ + 2.6097574011 * m_ - 0.3413193965 * s_),
+            doğrusalSrgb(-0.0041960863 * l_ - 0.7034186147 * m_ + 1.707614701 * s_),
+        ];
+    };
+    const sigiyorMu = (v) => v.every((x) => x >= -0.001 && x <= 1.001);
+    let rgb = dene(c);
+    if (!sigiyorMu(rgb)) {
+        let alt = 0;
+        let ust = c;
+        for (let i = 0; i < 24; i++) {
+            const orta = (alt + ust) / 2;
+            if (sigiyorMu(dene(orta)))
+                alt = orta;
+            else
+                ust = orta;
+        }
+        rgb = dene(alt);
+    }
+    return rgbHex(...rgb);
+}
+/**
+ * Verilen ton ve doyumda, HEDEF ORANI tutturan açıklığı arar.
+ *
+ * Palet "şu formülle koyulaştır" demiyor, ÖLÇÜP arıyor: bir rengin beyaz
+ * mürekkebi 4.5'te taşıyıp taşımadığı tona göre değişiyor (sarı ile lacivert
+ * aynı L'de aynı oranı vermiyor). Formül tahmin eder, arama ölçer.
+ *
+ * `yon` "koyulaş" (-1) ya da "açıl" (+1): koyu temada aynı hedef ters yönden
+ * yakalanıyor.
+ */
+export function oranaGoreAcikligi(taban, karsi, hedef, yon) {
+    let en = { ...taban };
+    for (let i = 0; i < 60; i++) {
+        const aday = { ...taban, l: Math.max(0.02, Math.min(0.99, taban.l + yon * 0.01 * i)) };
+        en = aday;
+        if (oran(oklchHex(aday), karsi) >= hedef)
+            break;
+    }
+    return en;
+}

package/dist/lib/palette.d.ts

@@ -0,0 +1,84 @@
+import { acikligi, dL, gecerliHex, oran } from "./color.js";
+/**
+ * Tek bir marka renginden iki temalık palet.
+ *
+ * NEDEN ÜRETİLİYOR. Bugüne kadar bir müşterinin rengi elle geçiriliyordu: yüz,
+ * taban, mürekkep, seçili satır zemini ve koyu tema karşılıkları tek tek
+ * seçiliyordu. Beş token için makul, otuz altı token için değil, ve her seferinde
+ * kontrast eşiği elle kontrol ediliyordu.
+ *
+ * ZEMİN DE DÖNÜYOR. Bugünün zemini sıcak kâğıt (#f5f2ec) ve aksandan bağımsız;
+ * mor bir markanın yanında sarıya çalıyor. Nötrler markanın TONUNU çok düşük
+ * doyumla taşıyor: gri kalıyorlar ama markanın grisi oluyorlar.
+ *
+ * EŞİKLER TAHMİN DEĞİL ARAMA. Her renk "şu formülle koyulaştır" ile değil,
+ * hedef orana ulaşana kadar ÖLÇÜLEREK bulunuyor — çünkü bir tonun beyaz
+ * mürekkebi hangi açıklıkta taşıdığı tona göre değişiyor. Sonuç
+ * `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 = {
+    page: string;
+    shell: string;
+    hover: string;
+    band: string;
+    rail: string;
+    sunk: string;
+    chartFill: string;
+    line: string;
+    edge: string;
+    tick: string;
+    ink: string;
+    inkSoft: string;
+    inkFaint: string;
+    accent: string;
+    accentHover: string;
+    accentActive: string;
+    accentInk: string;
+    accentLine: string;
+    accentBg: string;
+    accentShadow: string;
+    navIdle: string;
+    navHover: string;
+    navHoverBg: string;
+};
+export type PaletCifti = {
+    light: Palet;
+    dark: Palet;
+};
+/**
+ * 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`).
+ */
+export declare function paletUret(markaHex: string): PaletCifti;
+export { gecerliHex };
+export type Olcum = {
+    ad: string;
+    tur: "oran" | "dL";
+    deger: number;
+    esik: number;
+    gecti: boolean;
+};
+/**
+ * Üretilen paleti `check-token-contrast` ile AYNI eşiklerden geçirir.
+ *
+ * Üreticiye güvenmek yerine ölçmek şart: bir formül bugün doğru olabilir ve
+ * 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[];
+/**
+ * Bir paleti CSS değişkeni sözlüğüne çevirir: `{ "--color-accent": "#..." }`.
+ *
+ * NEDEN `paletCss` 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 };
+//# sourceMappingURL=palette.d.ts.map

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

@@ -0,0 +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"}

package/dist/lib/palette.js

@@ -0,0 +1,193 @@
+import { acikligi, dL, gecerliHex, hexOklch, oklchHex, oran } from "./color.js";
+/**
+ * Nötrlerin AÇIKLIK basamakları, iki temada.
+ *
+ * Sayılar bugünkü paletten ölçüldü, uydurulmadı: `#f5f2ec` ile `#fdfcfa`
+ * arasındaki fark ne ise mor bir markada da o. Böylece marka değişince
+ * yüzeylerin BİRBİRİNE göre yeri sabit kalıyor, yalnız tonu dönüyor.
+ */
+const BASAMAK = {
+    light: { page: 0.962, shell: 0.991, hover: 0.933, sunk: 0.933, line: 0.891, edge: 0.845, tick: 0.771, ink: 0.246, inkSoft: 0.372, inkFaint: 0.516, navIdle: 0.523, navHover: 0.386 },
+    dark: { page: 0.166, shell: 0.212, hover: 0.262, sunk: 0.262, line: 0.302, edge: 0.372, tick: 0.409, ink: 0.951, inkSoft: 0.869, inkFaint: 0.643, navIdle: 0.606, navHover: 0.869 },
+};
+/**
+ * Nötrlerin doyumu: gri kalacak kadar az, markayı taşıyacak kadar çok.
+ *
+ * YÜKSELEN YÜZEY TONSUZ, ve bu bir tutarsızlık değil bir ayrım. Marka rengi
+ * ZEMİNE giriyor: sayfa, şerit, ray, satır vurgusu. Kart ise zeminin üstünde
+ * DURAN şey, ve beyaza yakın kalması onu her markada aynı yükseklikte
+ * tutuyor — kartın rengi değil kenarı yükseltiyor (13 Yasa 1).
+ *
+ * Pratik karşılığı: müşteri rengini değiştirdiğinde sayfanın zemini dönüyor
+ * ama kenar çubuğu, üst şerit ve kartlar yerinde kalıyor. Panelin iskeleti
+ * 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 });
+/**
+ * Yüzün üstündeki mürekkep: beyaz mı koyu mu.
+ *
+ * ÖLÇÜLEREK seçiliyor, kurala göre değil. Lacivert bir yüz beyaz mürekkep
+ * taşıyor, sarı bir yüz taşımıyor — ve "markalar koyu olur" varsayımı ilk sarı
+ * markada okunmayan bir düğme üretiyor.
+ */
+function yuzMurekkebi(yuz, acikNotr, koyuNotr) {
+    return oran(acikNotr, yuz) >= oran(koyuNotr, yuz) ? acikNotr : koyuNotr;
+}
+function temaUret(marka, koyu) {
+    const h = marka.h;
+    const b = koyu ? BASAMAK.dark : BASAMAK.light;
+    const page = notr(h, b.page, NOTR_DOYUM.zemin);
+    /* Kart · üst şerit · kenar çubuğu: markadan bağımsız. */
+    const shell = notr(h, b.shell, NOTR_DOYUM.yuzey);
+    const hover = notr(h, b.hover, NOTR_DOYUM.zemin);
+    const ink = notr(h, b.ink, NOTR_DOYUM.murekkep);
+    /* YÜZ: markanın KENDİ açıklığından başlıyor.
+     *
+     * İlk hâli sabit bir açıklıktan başlayıp beyaz mürekkep geçene kadar
+     * koyulaştırıyordu, ve sarı bir markayı `#8f6c00` yapıyordu: ölçüm geçiyor
+     * ama kimse ona sarı demiyor. Marka rengini tanınmaz hâle getiren bir palet
+     * üreticisi işini yapmıyor.
+     *
+     * Doğrusu: yüz markanın açıklığında kalıyor (kullanılabilir bir banda
+     * kırpılarak), MÜREKKEP ona göre seçiliyor. Lacivert bir yüz beyaz taşır,
+     * sarı bir yüz koyu taşır — ikisi de markasını koruyor. Yalnız hiçbir
+     * mürekkeple 4.5'e ulaşılamıyorsa yüz mürekkepten UZAĞA itiliyor. */
+    const band = koyu ? { alt: 0.58, ust: 0.82 } : { alt: 0.45, ust: 0.78 };
+    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
+       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 murekkep = yuzMurekkebi(yuz, shell, ink);
+    for (let i = 1; i <= 40 && oran(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 });
+        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)) });
+    /* Çİ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))) });
+    }
+    return {
+        page,
+        shell,
+        hover,
+        band: page,
+        rail: page,
+        sunk: hover,
+        chartFill: hover,
+        line: notr(h, b.line, NOTR_DOYUM.cizgi),
+        edge: notr(h, b.edge, NOTR_DOYUM.cizgi),
+        tick: notr(h, b.tick, NOTR_DOYUM.cizgi),
+        ink,
+        inkSoft: notr(h, b.inkSoft, NOTR_DOYUM.murekkep),
+        inkFaint: notr(h, b.inkFaint, NOTR_DOYUM.murekkep),
+        accent: yuz,
+        accentHover: adim(koyu ? 0.05 : -0.06),
+        accentActive: adim(koyu ? -0.04 : -0.11),
+        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 }),
+        /* 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 }),
+        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),
+    };
+}
+/**
+ * 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`).
+ */
+export function paletUret(markaHex) {
+    if (!gecerliHex(markaHex))
+        throw new Error(`Geçersiz marka rengi: ${JSON.stringify(markaHex)}`);
+    const marka = hexOklch(markaHex);
+    return { light: temaUret(marka, false), dark: temaUret(marka, true) };
+}
+export { gecerliHex };
+/**
+ * Üretilen paleti `check-token-contrast` ile AYNI eşiklerden geçirir.
+ *
+ * Üreticiye güvenmek yerine ölçmek şart: bir formül bugün doğru olabilir ve
+ * 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 };
+    };
+    const yuzey = (ad, a, b, esik) => {
+        const deger = Number(dL(a, b).toFixed(1));
+        return { ad, tur: "dL", deger, esik, gecti: deger >= esik };
+    };
+    return [
+        metin("ink · page", p.ink, p.page),
+        metin("ink · shell", p.ink, p.shell),
+        metin("inkSoft · page", p.inkSoft, p.page),
+        metin("inkFaint · page", p.inkFaint, p.page),
+        metin("inkFaint · sunk", p.inkFaint, p.sunk),
+        metin("accentInk · accent", p.accentInk, p.accent),
+        metin("accentLine · page", p.accentLine, p.page),
+        metin("navIdle · rail", p.navIdle, p.rail),
+        yuzey("edge · page", p.edge, p.page, 10),
+        yuzey("line · page", p.line, p.page, 4),
+        yuzey("accentBg · page", p.accentBg, p.page, 1.2),
+    ];
+}
+/** `:root` bloğuna yapıştırılabilir CSS. */
+/**
+ * Palet alanı → CSS simge adı.
+ *
+ * DIŞARI AÇIK, ÇÜNKÜ ÜÇÜNCÜ KOPYASI DOĞACAKTI. Bu eşleme `paletCss`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
+ * ikisinin sessizce eksik kalması demek.
+ */
+const AD = {
+    page: "--color-page", shell: "--color-shell", hover: "--color-hover", band: "--color-band",
+    rail: "--color-rail", sunk: "--color-sunk", chartFill: "--color-chart-fill",
+    line: "--color-line", edge: "--color-edge", tick: "--color-tick",
+    ink: "--color-ink", inkSoft: "--color-ink-soft", inkFaint: "--color-ink-faint",
+    accent: "--color-accent", accentHover: "--color-accent-hover",
+    accentActive: "--color-accent-active", accentInk: "--color-accent-ink",
+    accentLine: "--color-accent-line", accentBg: "--color-accent-bg",
+    accentShadow: "--color-accent-shadow", navIdle: "--color-nav-idle",
+    navHover: "--color-nav-hover", navHoverBg: "--color-nav-hover-bg",
+};
+/**
+ * Bir paleti CSS değişkeni sözlüğüne çevirir: `{ "--color-accent": "#..." }`.
+ *
+ * NEDEN `paletCss` 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) {
+    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))
+        .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 };

package/dist/lib/scroll-lock.d.ts

@@ -0,0 +1,19 @@
+/**
+ * Modal açıkken arkadaki sayfanın kaymasını durdurur.
+ *
+ * NEDEN VAR. `Sheet` ve `Dialog` odağı hapsediyordu ve Escape'i dinliyordu ama
+ * arkadaki sayfa kaymaya devam ediyordu. Kullanıcı panel açıkken tekerleği
+ * çevirdiğinde arkadaki liste kayıyor, panel kapandığında da kendini bambaşka
+ * bir yerde buluyordu. Odak zaten hapsedildiği için arkayla ETKİLEŞEMİYOR;
+ * kaydırabilmesi bir yetenek değil, bir kaçak.
+ *
+ * ÇUBUK GENİŞLİĞİ TELAFİ EDİLİYOR. `overflow: hidden` kaydırma çubuğunu
+ * kaldırıyor, ve çubuk kaybolunca sayfa o kadar genişleyip SIÇRIYOR. Kaybolan
+ * genişlik kadar sağdan dolgu veriliyor; kapanınca geri alınıyor.
+ *
+ * PANELİN KENDİSİ KAYAR. Bu kilit yalnız `body`ye bakıyor; panelin gövdesi
+ * kendi `overflow-y: auto` kabında, yani içeriği ekrandan uzunsa yine
+ * okunabiliyor. Her şeyi birden kilitlemek erişilebilirlik hatası olurdu.
+ */
+export declare function useScrollLock(active: boolean): void;
+//# sourceMappingURL=scroll-lock.d.ts.map

package/dist/lib/scroll-lock.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"scroll-lock.d.ts","sourceRoot":"","sources":["../../src/lib/scroll-lock.ts"],"names":[],"mappings":"AAEA;;;;;;;;;;;;;;;;GAgBG;AACH,wBAAgB,aAAa,CAAC,MAAM,EAAE,OAAO,QAc5C"}

package/dist/lib/scroll-lock.js

@@ -0,0 +1,33 @@
+import { useEffect } from "react";
+/**
+ * Modal açıkken arkadaki sayfanın kaymasını durdurur.
+ *
+ * NEDEN VAR. `Sheet` ve `Dialog` odağı hapsediyordu ve Escape'i dinliyordu ama
+ * arkadaki sayfa kaymaya devam ediyordu. Kullanıcı panel açıkken tekerleği
+ * çevirdiğinde arkadaki liste kayıyor, panel kapandığında da kendini bambaşka
+ * bir yerde buluyordu. Odak zaten hapsedildiği için arkayla ETKİLEŞEMİYOR;
+ * kaydırabilmesi bir yetenek değil, bir kaçak.
+ *
+ * ÇUBUK GENİŞLİĞİ TELAFİ EDİLİYOR. `overflow: hidden` kaydırma çubuğunu
+ * kaldırıyor, ve çubuk kaybolunca sayfa o kadar genişleyip SIÇRIYOR. Kaybolan
+ * genişlik kadar sağdan dolgu veriliyor; kapanınca geri alınıyor.
+ *
+ * PANELİN KENDİSİ KAYAR. Bu kilit yalnız `body`ye bakıyor; panelin gövdesi
+ * kendi `overflow-y: auto` kabında, yani içeriği ekrandan uzunsa yine
+ * okunabiliyor. Her şeyi birden kilitlemek erişilebilirlik hatası olurdu.
+ */
+export function useScrollLock(active) {
+    useEffect(() => {
+        if (!active)
+            return;
+        const { overflow, paddingRight } = document.body.style;
+        const bosluk = window.innerWidth - document.documentElement.clientWidth;
+        document.body.style.overflow = "hidden";
+        if (bosluk > 0)
+            document.body.style.paddingRight = `${bosluk}px`;
+        return () => {
+            document.body.style.overflow = overflow;
+            document.body.style.paddingRight = paddingRight;
+        };
+    }, [active]);
+}

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

@@ -0,0 +1,36 @@
+import type { ComponentProps, ReactNode } from "react";
+import { Icon } from "../components/icon.js";
+import { type LinkComponent } from "./shared.js";
+/**
+ * Oturum açmış her ekranın içinde durduğu çerçeve: ray, üst şerit, yüzey.
+ *
+ * Menü ve açık giriş DIŞARIDAN gelir; kabuk hiçbir ürünün sözlüğünü ve hiçbir
+ * yönlendiriciyi tanımaz. Gerekçe: docs/adr/0004-sablon-katmani.md
+ */
+export type NavEntry = {
+    key: string;
+    href: string;
+    /** Çevrilmiş etiket. Ray dar olduğu için ekranda değil, `title` ve etikette. */
+    label: string;
+    icon: ComponentProps<typeof Icon>["icon"];
+};
+export type AppShellProps = {
+    /** 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. */
+    activePath: string;
+    /**
+     * Üst şerit KÜRESEL BAĞLAM, iş değil. İçerik çağıranın; şablon yalnız yerini
+     * garanti ediyor.
+     */
+    topbar?: ReactNode;
+    linkComponent?: LinkComponent;
+    labels: {
+        home: string;
+        primaryNav: string;
+    };
+    children: ReactNode;
+};
+export declare function AppShell({ brand, nav, activePath, topbar, linkComponent: Link, labels, children, }: AppShellProps): import("react").JSX.Element;
+//# sourceMappingURL=app-shell.d.ts.map

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

@@ -0,0 +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"}

package/dist/patterns/app-shell.js

@@ -0,0 +1,14 @@
+"use client";
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Icon } from "../components/icon.js";
+import { PlainLink } from "./shared.js";
+export function AppShell({ brand, nav, activePath, topbar, 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 }) })] })] }));
+}