tamga-ui 0.4.3 → 0.5.0

package/dist/components/layout.js

@@ -17,57 +17,36 @@ export function Surface({ raised = false, className, children, ...props }) {
     return (_jsx("div", { className: cn(raised ? "tamga-raised" : "tamga-surface", className), ...props, children: children }));
 }
 /**
- * Yatay taşma kabı — ve bu bileşenin asıl işi erişilebilirlik.
+ * Yatay taşma kabı · asıl işi erişilebilirlik. `overflow-x: auto` tek başına
+ * yalnız FARE için çalışıyor; `tabIndex={0}` + `role="region"` + zorunlu bir ad
+ * o kutuyu klavyeye açıyor.
  *
- * `overflow-x: auto` tek başına FARE için çalışır. Klavye kullanan biri o
- * kutuya hiç giremez: kaydırılabilir bir alan odaklanabilir değilse içindeki
- * geniş tabloyu yana kaydırmanın yolu yoktur. Tarayıcılar bunu kendiliğinden
- * çözmüyor.
- *
- * `tabIndex={0}` + `role="region"` + bir ad, o kutuyu klavyeye açıyor. Ad
- * zorunlu: adsız bir `region` ekran okuyucunun landmark listesinde
- * "bölge, bölge, bölge" olarak birikir ve hiçbirinin ne olduğu bilinmez.
+ * Gerekçe: docs/gerekce/05-yuzey-ve-kabuk.md
  */
-export function ScrollX({ label, className, children, ...props }) {
-    return (_jsx("div", { className: cn("tamga-scroll-x", className), role: "region", "aria-label": label, tabIndex: 0, ...props, children: children }));
-}
 /**
- * Aşağıdan giren blok.
- *
- * `.tamga-rise` bir HOVER etkisi değil, bir GİRİŞ animasyonu: sekiz piksel
- * aşağıdan, sönükten. Azaltılmış harekette CSS onu tamamen kapatıyor.
+ * Aşağıdan giren blok · GİRİŞ animasyonu, hover etkisi değil.
  *
- * `delay` bir listeyi sırayla açmak için. Basamak küçük tutulmalı — otuz
- * satırlık bir listede 60ms'lik bir gecikme, sonuncuyu iki saniye sonra
- * gösterir ve bekleme hissi yaratır.
+ * Gerekçe: docs/gerekce/05-yuzey-ve-kabuk.md
  */
-export function Rise({ delay = 0, className, children, ...props }) {
-    return (_jsx("div", { className: cn("tamga-rise", className), style: delay ? { animationDelay: `${delay}ms` } : undefined, ...props, children: children }));
+export function Reveal({ delay = 0, className, children, ...props }) {
+    return (_jsx("div", { className: cn("tamga-reveal", className), style: delay ? { animationDelay: `${delay}ms` } : undefined, ...props, children: children }));
 }
 /**
- * İki durumun aynı yerde durması.
- *
- * Bir düğmenin yazısı "Kaydet" iken "Kaydediliyor…" olduğunda düğme genişler
- * ve yanındaki her şey kayar. Swap ikisini de aynı ızgara hücresine koyuyor:
- * kutu her zaman UZUN olanın genişliğinde, yani hiçbir şey oynamıyor.
+ * İki durumun aynı yerde durması · kutu her zaman UZUN olanın genişliğinde,
+ * yani "Kaydet" → "Kaydediliyor…" yanındaki hiçbir şeyi kaydırmıyor. Gizlenen
+ * taraf `aria-hidden` alıyor.
  *
- * Gizlenen taraf `aria-hidden` alıyor. Almasaydı ekran okuyucu iki metni
- * arka arkaya okurdu — "Kaydet Kaydediliyor" — ve hangisinin geçerli olduğu
- * anlaşılmazdı.
+ * Gerekçe: docs/gerekce/05-yuzey-ve-kabuk.md
  */
 export function Swap({ showing, a, b, className, ...rest }) {
     return (_jsxs("span", { ...dataProps(rest), className: cn("tamga-swap", className), children: [_jsx("span", { "data-hidden": showing !== "a", "aria-hidden": showing !== "a", children: a }), _jsx("span", { "data-hidden": showing !== "b", "aria-hidden": showing !== "b", children: b })] }));
 }
 /**
- * Liste satırı — tablo olmayan listeler için.
+ * Liste satırı · tablo olmayan listeler için. `href` verilirse bağlantı,
+ * `onClick` verilirse düğme, ikisi de yoksa düz satır: tıklanabilir bir `<div>`
+ * klavyeyle erişilemiyor.
  *
- * Bir tabloya yetmeyen ama bir listeden fazlası olan şey: ayarlar satırı,
- * entegrasyon satırı, üye satırı. Sabit yükseklik ve alt kural, satırların
- * taranabilir kalmasını sağlıyor.
- *
- * `href` verilirse bir bağlantıya, `onClick` verilirse bir düğmeye döner —
- * ikisi de yoksa düz bir satır kalır. Bu ayrım önemli: tıklanabilir bir
- * `<div>` klavyeyle erişilemez ve ekran okuyucuya hiçbir şey söylemez.
+ * Gerekçe: docs/gerekce/05-yuzey-ve-kabuk.md
  */
 export function ListRow({ size = "base", href, onClick, className, children, ...rest }) {
     const cls = cn("tamga-list-row", size === "sm" && "tamga-list-row-sm", className);
@@ -80,18 +59,12 @@ export function ListRow({ size = "base", href, onClick, className, children, ...
     return _jsx("div", { className: cls, children: children });
 }
 /**
- * İçinde bir panel AÇILAN tablo hücresi.
+ * İçinde bir panel AÇILAN tablo hücresi. Tek işi kırpmayı kapatmak, ve
+ * unutulduğunda görünmeyen bir hata üretiyor: hücredeki menü hücre sınırında
+ * KESİLİYOR, konsol sessiz, ve ilk akla gelen z-index oluyor. Z-index bunu
+ * çözmez · hiçbir yığın sırası bir `overflow` kırpmasını aşamaz.
  *
- * Tek işi kırpmayı kapatmak — ve o tek iş, unutulduğunda görünmeyen bir hata
- * üretiyor: hücrenin içindeki bir menü, ipucu ya da açılır panel hücre
- * sınırında KESİLİYOR. Kontrol çalışıyor, tıklanıyor, ama yarısı yok. Hata
- * mesajı yok, konsol sessiz, ve ilk akla gelen z-index oluyor. Z-index bunu
- * çözmez: hiçbir yığın sırası bir `overflow` kırpmasını aşamaz.
- *
- * `align` VARSAYILAN OLARAK SAĞDA, çünkü en sık kullanımı satır sonundaki
- * eylem menüsü. Ama hiza ile kırpma AYRI iki karar: sola yaslı bir hücrede
- * ipucu barındırmak isteyen, hizasını feda etmek zorunda kalmasın diye
- * `align="start"` var. (Uzun süre tek parçaydı ve tam bu yüzden yakalandı.)
+ * `align` varsayılan olarak sağda: en sık kullanımı satır sonundaki eylem.
  */
 export function CellActions({ className, children, align = "end", ...props
 /* `Omit`: `<td>`in kendi `align` niteliği var (HTML 4'ten kalma, artık
@@ -100,37 +73,22 @@ export function CellActions({ className, children, align = "end", ...props
     return (_jsx("td", { className: cn("tamga-cell-open", align === "end" && "tamga-cell-actions", className), ...props, children: _jsx("span", { className: cn("flex items-center gap-1", align === "end" ? "justify-end" : "justify-start"), children: children }) }));
 }
 /**
- * Sayfa başlığı şeridi.
- *
- * Ürün bunu kendi yazmıştı (23 satır) ve doğru yazmıştı — ama her ekranın
- * tepesinde duran bir şeyin her projede yeniden yazılması, on panelde on
- * farklı boşluk demek.
+ * Sayfa başlığı şeridi. Eylem SAĞA yaslı ve başlığın taban çizgisinde.
  *
- * Eylem SAĞA yaslı ve başlığın taban çizgisinde. Başka yere koyan bir başlık
- * altındaki listeden kopmuş görünüyor — bu bir tercih değil, ölçülmüş bir şey.
+ * Doküman: /docs/page-band
  */
-export function PageBand({ title, subtitle, actions, className, ...rest }) {
-    return (_jsxs("div", { ...dataProps(rest), className: cn("tamga-section tamga-gutter flex flex-wrap items-center gap-4 py-4", className), children: [_jsxs("div", { className: "min-w-0", children: [_jsx("h2", { className: "text-title font-semibold text-ink", children: title }), subtitle ? _jsx("p", { className: "text-small text-ink-faint", children: subtitle }) : null] }), actions ? _jsx("div", { className: "ml-auto flex flex-wrap items-center gap-2", children: actions }) : null] }));
+export function PageBand({ eyebrow, title, subtitle, actions, className, ...rest }) {
+    return (_jsxs("div", { ...dataProps(rest), className: cn("flex flex-wrap items-end gap-4", className), children: [_jsxs("div", { className: "min-w-0 flex-1 basis-65", children: [eyebrow ? (_jsx("p", { className: "mb-1.5 text-small font-semibold text-ink-faint", children: eyebrow })) : null, _jsx("h1", { className: "font-display text-display-lg leading-tight font-extrabold text-ink", children: title }), subtitle ? _jsx("p", { className: "mt-1.5 text-body text-ink-soft", children: subtitle }) : null] }), actions ? _jsx("div", { className: "ml-auto flex flex-wrap items-center gap-2", children: actions }) : null] }));
 }
 /**
- * Gezinen bağlantı.
- *
- * `.tamga-link` sınıfı kitte yıllarca vardı, bileşeni yoktu — ve doküman
- * sitesi kendi sarmalayıcısını yazmak zorunda kaldı. Sınıfın olup bileşenin
- * olmaması, tam olarak checkbox'ın yaşadığı boşluk.
- *
- * NEDEN `Button variant="link"` DEĞİL. O bir `<button>`; bir bağlantı gibi
- * GÖRÜNÜR ama gezinmez. Orta tuşla yeni sekmede açılamaz, sağ tıkla
- * kopyalanamaz, ve ekran okuyucuya "düğme" der. Görünüm aynı, sözleşme
- * ters.
- *
- * `external` verilince `rel="noopener noreferrer"` geliyor. `noopener`
- * olmadan açılan sayfa `window.opener` üzerinden seninkini yönlendirebilir —
- * eski ve hâlâ geçerli bir açık.
+ * Gezinen bağlantı. `Button variant="link"` DEĞİL: o bir `<button>`, yani orta
+ * tuşla yeni sekmede açılmıyor, kopyalanmıyor, ve ekran okuyucuya "düğme"
+ * diyor. `external` verilince `rel="noopener noreferrer"` geliyor · `noopener`
+ * olmadan açılan sayfa `window.opener` ile seninkini yönlendirebilir.
  */
-export function Link({ external = false, className, children, href, linkComponent: Router, ...props }) {
+export function Link({ external = false, look = "inline", className, children, href, linkComponent: Router, ...props }) {
     const shared = {
-        className: cn("tamga-link", className),
+        className: cn("tamga-link", look === "standalone" && "tamga-link-standalone", look === "quiet" && "tamga-link-quiet", look === "marked" && "tamga-link-marked", className),
         target: external ? "_blank" : undefined,
         rel: external ? "noopener noreferrer" : undefined,
         ...props,

package/dist/components/link.d.ts

@@ -1,16 +1,11 @@
 import type { ComponentType, ReactNode } from "react";
 /**
- * Yönlendiricinin bağlantısı, dışarıdan verilir.
+ * Yönlendiricinin bağlantısı, dışarıdan verilir: kit hangi yönlendiricinin
+ * kullanıldığını bilmiyor ve bilmemeli. `components/` altında, çünkü bir
+ * BİLEŞEN de (`Kpi`) bağlantı olabiliyor ve şablondan import etmesi katmanı
+ * ters çevirirdi; `patterns/shared.tsx` tipi yeniden dışa vuruyor.
  *
- * NEDEN KİTİN İÇİNDE DEĞİL: kit hangi yönlendiricinin kullanıldığını
- * bilmiyor ve bilmemeli (`next/link`, `react-router`, ya da düz `a`).
- * Bileşen bir `href` alıp `a` yazsaydı her tıklama tam sayfa yüklerdi.
- *
- * NEDEN `components/` ALTINDA, `patterns/` ALTINDA DEĞİL: burada doğmuştu,
- * ama bir BİLEŞEN de (`Kpi`) bağlantı olabildiği için şablon katmanına
- * bağımlı olması gerekiyordu. Bir bileşenin şablondan import etmesi katmanı
- * ters çevirir; tip aşağı indi, `patterns/shared.tsx` onu yeniden dışa
- * vuruyor ve dışarıdan bakan API hiç değişmedi.
+ * Gerekçe: docs/gerekce/05-yuzey-ve-kabuk.md
  */
 export type LinkComponent = ComponentType<{
     href: string;

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

@@ -1 +1 @@
-{"version":3,"file":"link.d.ts","sourceRoot":"","sources":["../../src/components/link.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEtD;;;;;;;;;;;;GAYG;AACH,MAAM,MAAM,aAAa,GAAG,aAAa,CAAC;IACxC,IAAI,EAAE,MAAM,CAAC;IACb,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC;CACxB,CAAC,CAAC;AAEH,eAAO,MAAM,SAAS,EAAE,aAIvB,CAAC"}
+{"version":3,"file":"link.d.ts","sourceRoot":"","sources":["../../src/components/link.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEtD;;;;;;;GAOG;AACH,MAAM,MAAM,aAAa,GAAG,aAAa,CAAC;IACxC,IAAI,EAAE,MAAM,CAAC;IACb,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC;CACxB,CAAC,CAAC;AAEH,eAAO,MAAM,SAAS,EAAE,aAIvB,CAAC"}

package/dist/components/live-scope.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"live-scope.d.ts","sourceRoot":"","sources":["../../src/components/live-scope.tsx"],"names":[],"mappings":"AA0BA,wBAAgB,SAAS,CAAC,EAAE,QAAQ,EAAE,EAAE;IAAE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAAE,+BAuCpE;AAED;;;;;;;;;GASG;AACH,wBAAgB,YAAY,CAAC,QAAQ,EAAE,MAAM,GAAG,IAAI,GAAG,OAAO,CAe7D"}
+{"version":3,"file":"live-scope.d.ts","sourceRoot":"","sources":["../../src/components/live-scope.tsx"],"names":[],"mappings":"AA0BA,wBAAgB,SAAS,CAAC,EAAE,QAAQ,EAAE,EAAE;IAAE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAAE,+BAoCpE;AAED;;;;;;;;;GASG;AACH,wBAAgB,YAAY,CAAC,QAAQ,EAAE,MAAM,GAAG,IAAI,GAAG,OAAO,CAe7D"}

package/dist/components/live-scope.js

@@ -19,14 +19,11 @@ export function LiveScope({ children }) {
     const winner = useMemo(() => {
         let best = null;
         let bestSeverity = -Infinity;
-        /* Object key order is insertion order, and claims are registered in effect
-           order — which is tree order. So a strict `>` keeps the FIRST of equals,
-           and "first" means highest on the page. That is question 2's answer
-           (SETTLED 2026-08-19, Ercüment: first of equals wins), and it lives here
-           rather than in a doc nobody reads. The reasoning: the presence of the
-           signal matters more than which row carries it, and every alternative
-           (timestamp, domain priority) buys a nicer tie-break by making call sites
-           thread data they do not otherwise need. */
+        /* Insertion order is tree order, so a strict `>` keeps the FIRST of equals, and
+           "first" means highest on the page. (SETTLED 2026-08-19, Ercüment.) Every
+           alternative buys a nicer tie-break by making call sites thread data they do
+           not otherwise need.
+           Gerekçe: docs/gerekce/06-isaret-ve-ton.md */
         for (const [id, severity] of Object.entries(claims)) {
             if (severity > bestSeverity) {
                 best = id;

package/dist/components/log-view.d.ts

@@ -11,16 +11,47 @@ export type LogLine = {
      * bilmez.
      */
     time?: string;
+    /**
+     * The level badge's word: "INFO", "ERROR", "HATA". The kit draws the badge, the product
+     * writes it. TR: Seviye etiketinin sözcüğü: "INFO", "ERROR", "HATA". Rozeti kit çizer,
+     * sözcüğü ürün yazar.
+     */
+    level?: string;
     text: string;
     tone?: Tone;
 };
-export declare function LogView({ lines, label, height, follow, wrap, className, ...rest }: {
+export declare function LogView({ lines, label, labels, filters, height, follow, wrap, className, ...rest }: {
     lines: readonly LogLine[];
     /**
      * The region's name; it shows in the landmark list for keyboard navigation. TR: Bölgenin adı;
      * klavyeyle gezinende landmark listesinde görünür.
      */
     label: string;
+    /**
+     * `newLines` is the button that appears when lines arrive while you are reading further up:
+     * "↓ 12 new lines". TR: `newLines`, yukarıda okurken satır geldiğinde beliren düğme: "↓ 12
+     * yeni satır".
+     */
+    labels: {
+        newLines: (n: number) => string;
+    };
+    /**
+     * The level filter bar over the stream. The kit draws the bar and marks the chosen one; WHICH
+     * levels exist and what they are called is the product's vocabulary, and the filtering itself
+     * happens on the caller's side · a log view that filters its own lines would have to know what
+     * a level means. TR: Akışın üstündeki seviye filtresi. Çubuğu kit çiziyor ve seçili olanı
+     * işaretliyor; hangi seviyelerin olduğu ve adları ürünün sözlüğü, ve süzme çağıranın tarafında
+     * kalıyor · kendi satırlarını süzen bir günlük, bir seviyenin ne demek olduğunu bilmek
+     * zorunda kalırdı.
+     */
+    filters?: {
+        options: readonly ({
+            value: string;
+            label: string;
+        } & Record<string, unknown>)[];
+        value: string;
+        onChange: (value: string) => void;
+    };
     height?: number;
     /** Scroll to the bottom when a new line arrives. TR: Yeni satır geldiğinde en alta kay. */
     follow?: boolean;

package/dist/components/log-view.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"log-view.d.ts","sourceRoot":"","sources":["../../src/components/log-view.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAU,KAAK,IAAI,EAAE,MAAM,WAAW,CAAC;AAE9C;;;;GAIG;AAEH,MAAM,MAAM,OAAO,GAAG;IACpB,EAAE,EAAE,MAAM,CAAC;IACX;;;OAGG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,IAAI,CAAC;CACb,CAAC;AAEF,wBAAgB,OAAO,CAAC,EACtB,KAAK,EACL,KAAK,EACL,MAAY,EACZ,MAAa,EACb,IAAY,EACZ,SAAS,EACT,GAAG,IAAI,EACR,EAAE;IACD,KAAK,EAAE,SAAS,OAAO,EAAE,CAAC;IAC1B;;;OAGG;IACH,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,2FAA2F;IAC3F,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB;;;OAGG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,mEAAmE;IACnE,CAAC,CAAC,EAAE,QAAQ,MAAM,EAAE,GAAG,OAAO,CAAC;CAChC,+BAoDA"}
+{"version":3,"file":"log-view.d.ts","sourceRoot":"","sources":["../../src/components/log-view.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAU,KAAK,IAAI,EAAE,MAAM,WAAW,CAAC;AAE9C;;;;GAIG;AAEH,MAAM,MAAM,OAAO,GAAG;IACpB,EAAE,EAAE,MAAM,CAAC;IACX;;;OAGG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,IAAI,CAAC;CACb,CAAC;AAEF,wBAAgB,OAAO,CAAC,EACtB,KAAK,EACL,KAAK,EACL,MAAM,EACN,OAAO,EACP,MAAY,EACZ,MAAa,EACb,IAAY,EACZ,SAAS,EACT,GAAG,IAAI,EACR,EAAE;IACD,KAAK,EAAE,SAAS,OAAO,EAAE,CAAC;IAC1B;;;OAGG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;;;OAIG;IACH,MAAM,EAAE;QAAE,QAAQ,EAAE,CAAC,CAAC,EAAE,MAAM,KAAK,MAAM,CAAA;KAAE,CAAC;IAC5C;;;;;;;;OAQG;IACH,OAAO,CAAC,EAAE;QACR,OAAO,EAAE,SAAS,CAAC;YAAE,KAAK,EAAE,MAAM,CAAC;YAAC,KAAK,EAAE,MAAM,CAAA;SAAE,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC,EAAE,CAAC;QACjF,KAAK,EAAE,MAAM,CAAC;QACd,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;KACnC,CAAC;IACF,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,2FAA2F;IAC3F,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB;;;OAGG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,mEAAmE;IACnE,CAAC,CAAC,EAAE,QAAQ,MAAM,EAAE,GAAG,OAAO,CAAC;CAChC,+BAmHA"}

package/dist/components/log-view.js

@@ -1,31 +1,58 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect, useRef } from "react";
+import { createElement as _createElement } from "react";
+import { useEffect, useRef, useState } from "react";
 import { cn } from "../lib/cn.js";
 import { dataProps } from "../lib/data-props.js";
 import { toneOf } from "./tone.js";
-export function LogView({ lines, label, height = 320, follow = true, wrap = false, className, ...rest }) {
+export function LogView({ lines, label, labels, filters, height = 320, follow = true, wrap = false, className, ...rest }) {
     const box = useRef(null);
-    useEffect(() => {
-        if (!follow)
+    /* Okunmamış satırlar SAYILIYOR, sadece "yeni var mı" değil: sayı, aşağı
+       inmeye değer mi kararını veren şey. Son görülen uzunluk bir ref'te
+       tutuluyor çünkü render'ı tetiklemesi gereken şey sayı, uzunluk değil. */
+    const gorulen = useRef(lines.length);
+    const [yeni, setYeni] = useState(0);
+    function altta(el) {
+        /* 32px tolerans: tam altta olmayı beklemek, bir piksellik kaydırmada
+           takibi kapatıyor. */
+        return el.scrollHeight - el.scrollTop - el.clientHeight < 32;
+    }
+    function dibeGit() {
+        const el = box.current;
+        if (!el)
             return;
+        el.scrollTop = el.scrollHeight;
+        gorulen.current = lines.length;
+        setYeni(0);
+    }
+    useEffect(() => {
         const el = box.current;
         if (!el)
             return;
+        const eklenen = Math.max(0, lines.length - gorulen.current);
         /* SADECE ZATEN ALTTAYSA kaydır. Yukarıda bir şey okuyan kişiyi aşağı
            fırlatmak, bu bileşenin yapabileceği en can sıkıcı şey — ve "hep en
            alta git" davranışının varsayılan olduğu her log görüntüleyicide
-           yaşanır. 32px'lik tolerans, tam altta olmayı beklemeden çalışsın diye. */
-        const atBottom = el.scrollHeight - el.scrollTop - el.clientHeight < 32;
-        if (atBottom)
+           yaşanır. Fırlatmamanın bedeli, gelen satırın görünmemesi: düğme tam
+           onun için var. */
+        if (follow && altta(el)) {
             el.scrollTop = el.scrollHeight;
+            setYeni(0);
+        }
+        else if (eklenen > 0) {
+            setYeni((n) => n + eklenen);
+        }
+        gorulen.current = lines.length;
     }, [lines, follow]);
-    return (_jsx("div", { ...dataProps(rest), ref: box, className: cn("tamga-surface overflow-y-auto p-3 font-mono text-caption", className), style: { height }, 
-        /* `log` rolü: ekran okuyucu bunu bir günlük olarak tanır ve — kritik
-           olarak — `aria-live` OLMADAN sessiz kalır. Akan bir bölgeyi
-           duyurmak sesli okuyucuyu boğar; kullanıcı isterse kendisi okur. */
-        role: "log", "aria-label": label, tabIndex: 0, children: lines.map((l) => {
-            const c = l.tone ? toneOf(l.tone) : null;
-            return (_jsxs("div", { className: cn("flex gap-3 py-0.5", wrap ? "break-words" : "whitespace-nowrap"), children: [l.time ? (_jsx("span", { className: "w-20 shrink-0 text-ink-faint tabular-nums", children: l.time })) : null, _jsx("span", { className: "min-w-0", style: c ? { color: c.mark } : undefined, children: l.text })] }, l.id));
-        }) }));
+    return (_jsxs("div", { ...dataProps(rest), className: cn("tamga-log", className), style: { height }, children: [filters ? (_jsx("div", { className: "tamga-log-filtre", children: filters.options.map(({ value: v, label: etiket, ...kanca }) => (_createElement("button", { ...kanca, key: v, type: "button", className: `tamga-btn tamga-btn-sm ${v === filters.value ? "tamga-btn-primary" : ""}`, "aria-pressed": v === filters.value, onClick: () => filters.onChange(v) }, etiket))) })) : null, _jsx("div", { ref: box, className: "tamga-log-akis", "data-filtreli": filters ? true : undefined, 
+                /* `log` rolü: ekran okuyucu bunu bir günlük olarak tanır ve — kritik
+                   olarak — `aria-live` OLMADAN sessiz kalır. Akan bir bölgeyi
+                   duyurmak sesli okuyucuyu boğar; kullanıcı isterse kendisi okur. */
+                role: "log", "aria-label": label, tabIndex: 0, onScroll: (e) => {
+                    if (yeni > 0 && altta(e.currentTarget))
+                        setYeni(0);
+                }, children: lines.map((l) => {
+                    const c = l.tone ? toneOf(l.tone) : null;
+                    return (_jsxs("div", { className: "tamga-log-satir", "data-wrap": wrap || undefined, children: [l.time ? (_jsx("span", { className: "tamga-log-saat tabular-nums", children: l.time })) : null, l.level ? (_jsx("span", { className: "tamga-log-yuva", children: _jsx("span", { className: "tamga-log-seviye", style: c ? { background: c.bg, color: c.fg } : undefined, children: l.level }) })) : null, _jsx("span", { className: "tamga-log-metin", style: c && !l.level ? { color: c.mark } : undefined, children: l.text })] }, l.id));
+                }) }), yeni > 0 ? (_jsxs("button", { type: "button", className: "tamga-log-yeni", onClick: dibeGit, children: ["\u2193 ", labels.newLines(yeni)] })) : null] }));
 }

package/dist/components/number-input.d.ts

@@ -3,13 +3,23 @@
  *
  * Gerekçe: docs/gerekce/01-form-ve-girdi.md
  */
-export declare function NumberInput({ value, onChange, min, max, step, 
+export declare function NumberInput({ value, onChange, look, min, max, step, 
 /** Değerin sonuna yapışan birim: "₺", "kg", "%" */
 suffix, disabled, invalid, full, 
 /** Artır/azalt düğmelerinin erişilebilir adları. Kit çeviri çekmez. */
-labels, className, ...rest }: {
+labels, locale, className, ...rest }: {
     value: number | null;
     onChange?: (next: number | null) => void;
+    /**
+     * `field` a text field with the stepper on its right edge · for a threshold, a rate, a price:
+     * numbers that are TYPED and only nudged. `quantity` the joined control with the buttons
+     * flanking the value · for a count that is CLICKED into place ("3 adet"), where the number is
+     * small and the two buttons are the whole interaction. TR: `field` sağ kenarında sayaç olan
+     * metin alanı · eşik, oran, fiyat için: YAZILAN ve yalnız dürtülen sayılar. `quantity`
+     * düğmeleri değerin iki yanında duran birleşik kontrol · TIKLANARAK ayarlanan adet için
+     * ("3 adet"), sayı küçükken ve etkileşimin tamamı o iki düğmeyken.
+     */
+    look?: "field" | "quantity";
     min?: number;
     max?: number;
     step?: number;
@@ -21,6 +31,14 @@ labels, className, ...rest }: {
         increase: string;
         decrease: string;
     };
+    /**
+     * BCP-47 tag for how the number is SHOWN: "tr-TR" prints 249,9 and "en-US" prints 249.9. Not
+     * given, the number is shown as typed. This is formatting, not translation: the kit does not
+     * pick the tag, the caller does. TR: Sayının NASIL GÖSTERİLECEĞİ: "tr-TR" 249,9 yazar,
+     * "en-US" 249.9. Verilmezse sayı yazıldığı gibi görünür. Bu çeviri değil biçimleme: etiketi
+     * kit seçmiyor, çağıran veriyor.
+     */
+    locale?: string;
     className?: string;
     /** `data-*` hooks pass through. TR: `data-*` kancaları geçiyor. */
     [k: `data-${string}`]: unknown;

package/dist/components/number-input.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"number-input.d.ts","sourceRoot":"","sources":["../../src/components/number-input.tsx"],"names":[],"mappings":"AAQA;;;;GAIG;AAEH,wBAAgB,WAAW,CAAC,EAC1B,KAAK,EACL,QAAQ,EACR,GAAG,EACH,GAAG,EACH,IAAQ;AACR,mDAAmD;AACnD,MAAM,EACN,QAAgB,EAChB,OAAe,EACf,IAAY;AACZ,uEAAuE;AACvE,MAAM,EACN,SAAS,EACT,GAAG,IAAI,EACR,EAAE;IACD,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IACrB,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;IACzC,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,MAAM,EAAE;QAAE,QAAQ,EAAE,MAAM,CAAC;QAAC,QAAQ,EAAE,MAAM,CAAA;KAAE,CAAC;IAC/C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,mEAAmE;IACnE,CAAC,CAAC,EAAE,QAAQ,MAAM,EAAE,GAAG,OAAO,CAAC;CAChC,+BAoFA"}
+{"version":3,"file":"number-input.d.ts","sourceRoot":"","sources":["../../src/components/number-input.tsx"],"names":[],"mappings":"AAQA;;;;GAIG;AAEH,wBAAgB,WAAW,CAAC,EAC1B,KAAK,EACL,QAAQ,EACR,IAAc,EACd,GAAG,EACH,GAAG,EACH,IAAQ;AACR,mDAAmD;AACnD,MAAM,EACN,QAAgB,EAChB,OAAe,EACf,IAAY;AACZ,uEAAuE;AACvE,MAAM,EACN,MAAM,EACN,SAAS,EACT,GAAG,IAAI,EACR,EAAE;IACD,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;IACrB,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;IACzC;;;;;;;;OAQG;IACH,IAAI,CAAC,EAAE,OAAO,GAAG,UAAU,CAAC;IAC5B,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,MAAM,EAAE;QAAE,QAAQ,EAAE,MAAM,CAAC;QAAC,QAAQ,EAAE,MAAM,CAAA;KAAE,CAAC;IAC/C;;;;;;OAMG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,mEAAmE;IACnE,CAAC,CAAC,EAAE,QAAQ,MAAM,EAAE,GAAG,OAAO,CAAC;CAChC,+BAuIA"}

package/dist/components/number-input.js

@@ -1,21 +1,31 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useId } from "react";
+import { useId, useState } from "react";
 import { cn } from "../lib/cn.js";
 import { dataProps } from "../lib/data-props.js";
 import { Icon } from "./icon.js";
-import { CaretDown } from "./icons.js";
+import { CaretDown, Minus, Plus } from "./icons.js";
 /**
  * NumberInput — fiyat, stok, ağırlık.
  *
  * Gerekçe: docs/gerekce/01-form-ve-girdi.md
  */
-export function NumberInput({ value, onChange, min, max, step = 1, 
+export function NumberInput({ value, onChange, look = "field", min, max, step = 1, 
 /** Değerin sonuna yapışan birim: "₺", "kg", "%" */
 suffix, disabled = false, invalid = false, full = false, 
 /** Artır/azalt düğmelerinin erişilebilir adları. Kit çeviri çekmez. */
-labels, className, ...rest }) {
+labels, locale, className, ...rest }) {
     const id = useId();
+    /* YAZARKEN BİÇİMLENMİYOR, BIRAKINCA BİÇİMLENİYOR.
+       Her tuşta biçimlemek "249," yazan birinin virgülünü siliyor, yani ondalık
+       yazılamıyor. Taslak yalnız odaktayken yaşıyor; odak çıkınca değerin kendisi
+       yerel biçimde görünüyor. */
+    const [taslak, setTaslak] = useState(null);
+    const goster = (n) => {
+        if (n === null)
+            return "";
+        return locale ? n.toLocaleString(locale) : String(n);
+    };
     const clamp = (n) => {
         if (min !== undefined && n < min)
             return min;
@@ -34,14 +44,27 @@ labels, className, ...rest }) {
     };
     const atMin = min !== undefined && value !== null && value <= min;
     const atMax = max !== undefined && value !== null && value >= max;
-    return (_jsxs("span", { ...dataProps(rest), className: cn("relative inline-flex items-center", full && "w-full", className), children: [_jsx("input", { id: id, type: "text", inputMode: "decimal", value: value ?? "", disabled: disabled, "aria-invalid": invalid || undefined, onChange: (e) => {
-                    const raw = e.target.value.replace(",", ".").trim();
+    if (look === "quantity") {
+        /* DEĞER BİR GİRDİ DEĞİL BİR METİN: adet kontrolünde sayı tıklanarak
+           ayarlanıyor, ve yazılabilir bir alan burada klavyeyle girilen geçersiz
+           değerin kapısını açıyor. Yazmak gerekiyorsa `field` var. */
+        return (_jsxs("span", { ...dataProps(rest), className: cn("tamga-qty", full && "w-full", className), "data-disabled": disabled || undefined, children: [_jsx("button", { type: "button", "aria-label": labels.decrease, disabled: disabled || atMin, onClick: () => bump(-1), children: _jsx(Icon, { icon: Minus, size: "sm", weight: "bold" }) }), _jsxs("span", { className: "tamga-qty-deger tabular-nums", "aria-live": "polite", children: [goster(value), suffix ? _jsx("span", { className: "tamga-qty-birim", children: suffix }) : null] }), _jsx("button", { type: "button", "aria-label": labels.increase, disabled: disabled || atMax, onClick: () => bump(1), children: _jsx(Icon, { icon: Plus, size: "sm", weight: "bold" }) })] }));
+    }
+    return (_jsxs("span", { ...dataProps(rest), className: cn("relative inline-flex items-center", full && "w-full", className), children: [_jsx("input", { id: id, type: "text", inputMode: "decimal", value: taslak ?? goster(value), disabled: disabled, "aria-invalid": invalid || undefined, onChange: (e) => {
+                    setTaslak(e.target.value);
+                    /* Binlik ayracı temizleniyor, ondalık ayracı noktaya çevriliyor:
+                       kullanıcı "1.234,5" de yazabilir "1234.5" de. */
+                    const raw = e.target.value.replace(/\s/g, "").replace(/\.(?=\d{3}\b)/g, "").replace(",", ".");
                     if (raw === "")
                         return onChange?.(null);
                     const n = Number(raw);
                     if (!Number.isNaN(n))
                         onChange?.(n);
-                }, onBlur: () => value !== null && onChange?.(clamp(value)), onKeyDown: (e) => {
+                }, onBlur: () => {
+                    setTaslak(null);
+                    if (value !== null)
+                        onChange?.(clamp(value));
+                }, onKeyDown: (e) => {
                     if (e.key === "ArrowUp") {
                         e.preventDefault();
                         bump(1);
@@ -51,8 +74,8 @@ labels, className, ...rest }) {
                         bump(-1);
                     }
                 }, 
-                /* Sağ boşluk spinner'ın genişliği (22px) artı kenar payı; birim varsa
+                /* Sağ boşluk spinner'ın genişliği (38px) artı kenar payı; birim varsa
                    onun yeri de eklenir. Elle sayı yazmak yerine hesaplanıyor, çünkü
                    birim "₺" da olabilir "adet" de. */
-                className: cn("tamga-input w-full tabular-nums", invalid && "tamga-input-invalid"), style: { paddingRight: suffix ? 76 : 32 } }), suffix ? (_jsx("span", { className: "pointer-events-none absolute right-8 font-mono text-small text-ink-faint", children: suffix })) : null, _jsxs("span", { className: "tamga-stepper", children: [_jsx("button", { type: "button", "aria-label": labels.increase, "aria-controls": id, disabled: disabled || atMax, onClick: () => bump(1), children: _jsx(Icon, { icon: CaretDown, size: "xs", className: "rotate-180" }) }), _jsx("button", { type: "button", "aria-label": labels.decrease, "aria-controls": id, disabled: disabled || atMin, onClick: () => bump(-1), children: _jsx(Icon, { icon: CaretDown, size: "xs" }) })] })] }));
+                className: cn("tamga-input tamga-sayi w-full", invalid && "tamga-input-invalid"), style: { paddingRight: suffix ? 96 : 48 } }), suffix ? (_jsx("span", { className: "tamga-stepper-birim", children: suffix })) : null, _jsxs("span", { className: "tamga-stepper", children: [_jsx("button", { type: "button", "aria-label": labels.increase, "aria-controls": id, disabled: disabled || atMax, onClick: () => bump(1), children: _jsx(Icon, { icon: CaretDown, size: "xs", weight: "bold", className: "rotate-180" }) }), _jsx("button", { type: "button", "aria-label": labels.decrease, "aria-controls": id, disabled: disabled || atMin, onClick: () => bump(-1), children: _jsx(Icon, { icon: CaretDown, size: "xs", weight: "bold" }) })] })] }));
 }