tamga-ui 0.1.1 → 0.2.1

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 {
@@ -1659,6 +1664,14 @@
   .tamga-table tbody tr[data-selected="true"] td:first-child {
     box-shadow: inset 2px 0 0 var(--color-accent-line);
   }
+  /* SEÇİLİ SATIR İKİ ADLA GELEBİLİYOR, VE BİRİ BOYANMIYORDU.
+     `SettingsTemplate` menüsündeki açık bölümü `data-active` ile işaretliyor
+     (bir GEZİNME satırı: hangi sayfadasın), liste satırları ise `data-selected`
+     ile (bir SEÇİM: hangi kayıtları işaretledin). İkisi farklı anlam ama aynı
+     görünüm, ve kural yalnız ikincisi için yazılmıştı: ayarlar menüsünde
+     hangi bölümde olduğun hiç görünmüyordu. Hiçbir şey patlamadı, çünkü
+     tarayıcı bilmediği bir nitelik seçicisini sessizce atlıyor. */
+  .tamga-list-row[data-active="true"],
   .tamga-list-row[data-selected="true"] {
     background: var(--color-accent-bg);
     box-shadow: inset 2px 0 0 var(--color-accent-line);
@@ -1668,6 +1681,10 @@
     color: var(--color-accent-line);
     font-weight: 500;
     text-underline-offset: 3px;
+    /* `<a href>` pointer'ı tarayıcıdan alır; `href`siz bir `<a>`, bir `<span>`
+       ya da link gibi görünen bir `<button>` almaz ve imleç `auto` kalır. Sınıf
+       kendi imlecini söylemeli. */
+    cursor: pointer;
   }
   .tamga-link:hover {
     text-decoration: underline;
@@ -1791,6 +1808,218 @@
     }
   }
 
+  /* Çekmece kenardan kayarak girer; yön `side` ile aynı olmak zorunda, yoksa
+     kapatma hareketi ters öğretilir. Gerekçe: /docs/sheet */
+  .tamga-sheet-start {
+    animation: tamga-sheet-start var(--duration-base) var(--ease-standard);
+  }
+  .tamga-sheet-end {
+    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;
@@ -2105,6 +2334,24 @@
   }
 }
 
+@keyframes tamga-sheet-start {
+  from {
+    transform: translateX(-100%);
+  }
+  to {
+    transform: none;
+  }
+}
+
+@keyframes tamga-sheet-end {
+  from {
+    transform: translateX(100%);
+  }
+  to {
+    transform: none;
+  }
+}
+
 @keyframes tamga-bar {
   0%,
   100% {
@@ -2185,6 +2432,12 @@
   .tamga-toast {
     animation: none;
   }
+  /* Duran bir çekmece yine de AÇIK olmalı: kayma gidiyor, panel yerinde
+     beliriyor. */
+  .tamga-sheet-start,
+  .tamga-sheet-end {
+    animation: none;
+  }
   /* a stopped spinner must still be a visible mark, never an empty box */
   .tamga-spin-part {
     animation: none !important;

package/dist/lib/color.d.ts

@@ -18,7 +18,7 @@ export type Oklch = {
     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;
+export declare const isHex: (v: string) => boolean;
 /**
  * Hex → RGB, GEÇERSİZ GİRDİDE FIRLATARAK.
  *
@@ -28,23 +28,23 @@ export declare const gecerliHex: (v: string) => boolean;
  * 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`).
+ * ekranın kararı (bkz. `isHex`).
  */
-export declare function hexRgb(hex: string): [number, number, number];
-export declare const rgbHex: (r: number, g: number, b: number) => string;
+export declare function hexToRgb(hex: string): [number, number, number];
+export declare const rgbToHex: (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;
+export declare function luminance(hex: string): number;
 /** WCAG kontrast oranı. AA metin eşiği 4.5. */
-export declare function oran(a: string, b: string): number;
+export declare function contrast(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;
+export declare function lightness(hex: string): number;
+export declare const deltaL: (a: string, b: string) => number;
+export declare function hexToOklch(hex: string): Oklch;
 /**
  * OKLCH → hex, GAMUT DIŞINA TAŞMADAN.
  *
@@ -53,7 +53,7 @@ export declare function hexOklch(hex: string): Oklch;
  * 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;
+export declare function oklchToHex({ l, c, h }: Oklch): string;
 /**
  * Verilen ton ve doyumda, HEDEF ORANI tutturan açıklığı arar.
  *
@@ -64,5 +64,25 @@ export declare function oklchHex({ l, c, h }: Oklch): string;
  * `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;
+export declare function lightnessForContrast(taban: Oklch, karsi: string, hedef: number, yon: -1 | 1): Oklch;
+/** @deprecated `isHex` kullan. 0.3.0'da kaldırılacak. */
+export declare const gecerliHex: typeof isHex;
+/** @deprecated `hexToRgb` kullan. 0.3.0'da kaldırılacak. */
+export declare const hexRgb: typeof hexToRgb;
+/** @deprecated `rgbToHex` kullan. 0.3.0'da kaldırılacak. */
+export declare const rgbHex: typeof rgbToHex;
+/** @deprecated `luminance` kullan. 0.3.0'da kaldırılacak. */
+export declare const parlaklik: typeof luminance;
+/** @deprecated `contrast` kullan. 0.3.0'da kaldırılacak. */
+export declare const oran: typeof contrast;
+/** @deprecated `lightness` kullan. 0.3.0'da kaldırılacak. */
+export declare const acikligi: typeof lightness;
+/** @deprecated `deltaL` kullan. 0.3.0'da kaldırılacak. */
+export declare const dL: typeof deltaL;
+/** @deprecated `hexToOklch` kullan. 0.3.0'da kaldırılacak. */
+export declare const hexOklch: typeof hexToOklch;
+/** @deprecated `oklchToHex` kullan. 0.3.0'da kaldırılacak. */
+export declare const oklchHex: typeof oklchToHex;
+/** @deprecated `lightnessForContrast` kullan. 0.3.0'da kaldırılacak. */
+export declare const oranaGoreAcikligi: typeof lightnessForContrast;
 //# sourceMappingURL=color.d.ts.map

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

@@ -1 +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"}
+{"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,KAAK,MAAO,MAAM,KAAG,OAA0D,CAAC;AAE7F;;;;;;;;;;GAUG;AACH,wBAAgB,QAAQ,CAAC,GAAG,EAAE,MAAM,GAAG,CAAC,MAAM,EAAE,MAAM,EAAE,MAAM,CAAC,CAM9D;AAGD,eAAO,MAAM,QAAQ,MAAO,MAAM,KAAK,MAAM,KAAK,MAAM,WACqB,CAAC;AAE9E,+DAA+D;AAC/D,wBAAgB,SAAS,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAG7C;AAED,+CAA+C;AAC/C,wBAAgB,QAAQ,CAAC,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,MAAM,GAAG,MAAM,CAGrD;AAED;;;;;GAKG;AACH,wBAAgB,SAAS,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAG7C;AAED,eAAO,MAAM,MAAM,MAAO,MAAM,KAAK,MAAM,WAA0C,CAAC;AAItF,wBAAgB,UAAU,CAAC,GAAG,EAAE,MAAM,GAAG,KAAK,CAiB7C;AAED;;;;;;;GAOG;AACH,wBAAgB,UAAU,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,EAAE,KAAK,GAAG,MAAM,CA6BrD;AAED;;;;;;;;;GASG;AACH,wBAAgB,oBAAoB,CAClC,KAAK,EAAE,KAAK,EACZ,KAAK,EAAE,MAAM,EACb,KAAK,EAAE,MAAM,EACb,GAAG,EAAE,CAAC,CAAC,GAAG,CAAC,GACV,KAAK,CAQP;AAKD,yDAAyD;AACzD,eAAO,MAAM,UAAU,cAAQ,CAAC;AAChC,4DAA4D;AAC5D,eAAO,MAAM,MAAM,iBAAW,CAAC;AAC/B,4DAA4D;AAC5D,eAAO,MAAM,MAAM,iBAAW,CAAC;AAC/B,6DAA6D;AAC7D,eAAO,MAAM,SAAS,kBAAY,CAAC;AACnC,4DAA4D;AAC5D,eAAO,MAAM,IAAI,iBAAW,CAAC;AAC7B,6DAA6D;AAC7D,eAAO,MAAM,QAAQ,kBAAY,CAAC;AAClC,0DAA0D;AAC1D,eAAO,MAAM,EAAE,eAAS,CAAC;AACzB,8DAA8D;AAC9D,eAAO,MAAM,QAAQ,mBAAa,CAAC;AACnC,8DAA8D;AAC9D,eAAO,MAAM,QAAQ,mBAAa,CAAC;AACnC,wEAAwE;AACxE,eAAO,MAAM,iBAAiB,6BAAuB,CAAC"}

package/dist/lib/color.js

@@ -15,7 +15,7 @@
 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());
+export const isHex = (v) => /^#?([0-9a-f]{3}|[0-9a-f]{6})$/i.test(v.trim());
 /**
  * Hex → RGB, GEÇERSİZ GİRDİDE FIRLATARAK.
  *
@@ -25,10 +25,10 @@ export const gecerliHex = (v) => /^#?([0-9a-f]{3}|[0-9a-f]{6})$/i.test(v.trim())
  * 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`).
+ * ekranın kararı (bkz. `isHex`).
  */
-export function hexRgb(hex) {
-    if (!gecerliHex(hex))
+export function hexToRgb(hex) {
+    if (!isHex(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;
@@ -36,15 +36,15 @@ export function hexRgb(hex) {
     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("");
+export const rgbToHex = (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));
+export function luminance(hex) {
+    const [r, g, b] = hexToRgb(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);
+export function contrast(a, b) {
+    const [ust, alt] = [luminance(a), luminance(b)].sort((x, y) => y - x);
     return (ust + 0.05) / (alt + 0.05);
 }
 /**
@@ -53,14 +53,14 @@ export function oran(a, b) {
  * İ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);
+export function lightness(hex) {
+    const y = luminance(hex);
     return y > 216 / 24389 ? 116 * Math.cbrt(y) - 16 : (y * 24389) / 27;
 }
-export const dL = (a, b) => Math.abs(acikligi(a) - acikligi(b));
+export const deltaL = (a, b) => Math.abs(lightness(a) - lightness(b));
 /* ---- OKLab ---- */
-export function hexOklch(hex) {
-    const [r8, g8, b8] = hexRgb(hex);
+export function hexToOklch(hex) {
+    const [r8, g8, b8] = hexToRgb(hex);
     const r = srgbDoğrusal(r8 / 255);
     const g = srgbDoğrusal(g8 / 255);
     const b = srgbDoğrusal(b8 / 255);
@@ -82,7 +82,7 @@ export function hexOklch(hex) {
  * 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 }) {
+export function oklchToHex({ l, c, h }) {
     const dene = (kroma) => {
         const hr = (h * Math.PI) / 180;
         const A = Math.cos(hr) * kroma;
@@ -110,7 +110,7 @@ export function oklchHex({ l, c, h }) {
         }
         rgb = dene(alt);
     }
-    return rgbHex(...rgb);
+    return rgbToHex(...rgb);
 }
 /**
  * Verilen ton ve doyumda, HEDEF ORANI tutturan açıklığı arar.
@@ -122,13 +122,35 @@ export function oklchHex({ l, c, h }) {
  * `yon` "koyulaş" (-1) ya da "açıl" (+1): koyu temada aynı hedef ters yönden
  * yakalanıyor.
  */
-export function oranaGoreAcikligi(taban, karsi, hedef, yon) {
+export function lightnessForContrast(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)
+        if (contrast(oklchToHex(aday), karsi) >= hedef)
             break;
     }
     return en;
 }
+/* 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. Gerekçe: ADR-0001. */
+/** @deprecated `isHex` kullan. 0.3.0'da kaldırılacak. */
+export const gecerliHex = isHex;
+/** @deprecated `hexToRgb` kullan. 0.3.0'da kaldırılacak. */
+export const hexRgb = hexToRgb;
+/** @deprecated `rgbToHex` kullan. 0.3.0'da kaldırılacak. */
+export const rgbHex = rgbToHex;
+/** @deprecated `luminance` kullan. 0.3.0'da kaldırılacak. */
+export const parlaklik = luminance;
+/** @deprecated `contrast` kullan. 0.3.0'da kaldırılacak. */
+export const oran = contrast;
+/** @deprecated `lightness` kullan. 0.3.0'da kaldırılacak. */
+export const acikligi = lightness;
+/** @deprecated `deltaL` kullan. 0.3.0'da kaldırılacak. */
+export const dL = deltaL;
+/** @deprecated `hexToOklch` kullan. 0.3.0'da kaldırılacak. */
+export const hexOklch = hexToOklch;
+/** @deprecated `oklchToHex` kullan. 0.3.0'da kaldırılacak. */
+export const oklchHex = oklchToHex;
+/** @deprecated `lightnessForContrast` kullan. 0.3.0'da kaldırılacak. */
+export const oranaGoreAcikligi = lightnessForContrast;

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;
+    });
+}