tamga-ui 0.1.0

package/dist/components/primitives.js

@@ -0,0 +1,81 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useRef, useState } from "react";
+import { toneOf } from "./tone.js";
+import { Icon } from "./icon.js";
+import { CaretRight, Check, Close } from "./icons.js";
+import { SkeletonOptions, SkeletonPanel } from "./skeleton.js";
+import { useScrollLock } from "../lib/scroll-lock.js";
+import { cn } from "../lib/cn.js";
+import { useFocusTrap, useListKeys } from "./a11y.js";
+import { useLiveClaim } from "./live-scope.js";
+import { Button, MiniButton } from "./button.js";
+export { Spinner } from "./spinner.js";
+/* ------------------------------------------------------------------ *
+ * Small primitives. Each one is the design language applied, not a new
+ * idea — if a component here needs a rule that Foundations does not
+ * already state, the rule is missing, not the component.
+ * ------------------------------------------------------------------ */
+export function Separator({ vertical = false }) {
+    return _jsx("span", { className: vertical ? "tamga-rule-v" : "tamga-rule-h", role: "separator" });
+}
+/** Running is not a deviation, so the live mark stays neutral — the pulse carries it. */
+export function Beacon({ live = true, label, severity = 50, }) {
+    const pulses = useLiveClaim(live ? severity : null);
+    return (_jsxs("span", { className: "inline-flex items-center gap-2", children: [_jsx("span", { className: "tamga-beacon", "data-live": pulses }), label ? _jsx("span", { className: "text-small text-ink-faint", children: label }) : null] }));
+}
+export function Alert({ state = "caution", title, children, action, }) {
+    const h = toneOf(state);
+    return (_jsxs("div", { className: "tamga-alert", style: { borderLeftColor: h.mark }, role: "status", children: [_jsxs("div", { className: "min-w-0 flex-1", children: [_jsx("p", { className: "text-body font-medium text-ink", children: title }), children ? (_jsx("div", { className: "mt-1 text-small leading-relaxed text-ink-soft", children: children })) : null] }), action ? _jsx("div", { className: "shrink-0", children: action }) : null] }));
+}
+export function Breadcrumb({ items, label, }) {
+    return (_jsx("nav", { "aria-label": label, children: _jsx("ol", { className: "flex flex-wrap items-center gap-2 text-body", children: items.map((item, i) => {
+                const last = i === items.length - 1;
+                return (_jsxs("li", { className: "flex items-center gap-2", children: [last ? (_jsx("span", { "aria-current": "page", className: "font-medium text-ink", children: item.label })) : (_jsx("a", { href: item.href ?? "#", className: "tamga-link", children: item.label })), last ? null : (_jsx(Icon, { icon: CaretRight, size: "xs", weight: "bold", className: "text-ink-faint" }))] }, item.label));
+            }) }) }));
+}
+export function Field({ label, description, error, children, htmlFor, }) {
+    return (_jsxs("div", { className: "flex flex-col gap-2", children: [_jsx("label", { htmlFor: htmlFor, className: "text-small font-medium text-ink", children: label }), children, error ? (_jsx("p", { className: "text-small", style: { color: toneOf("danger").fg }, children: error })) : description ? (_jsx("p", { className: "text-small text-ink-faint", children: description })) : null] }));
+}
+/** A plain select: the same overlay as the searchable one, without the search. */
+export function Select({ options, value, onChange, placeholder, loading = false, loadingRows = 4, className, }) {
+    const [open, setOpen] = useState(false);
+    const [inner, setInner] = useState(value ?? "");
+    const box = useRef(null);
+    const list = useRef(null);
+    const current = value ?? inner;
+    const close = useCallback(() => setOpen(false), []);
+    useListKeys({ open: open && !loading, containerRef: list, onClose: close });
+    useEffect(() => {
+        if (!open)
+            return;
+        const away = (e) => {
+            if (box.current && !box.current.contains(e.target))
+                setOpen(false);
+        };
+        document.addEventListener("mousedown", away);
+        return () => document.removeEventListener("mousedown", away);
+    }, [open]);
+    return (_jsxs("div", { ref: box, className: cn("relative w-56", className), children: [_jsxs(Button, { full: true, className: "justify-between", "aria-haspopup": "listbox", "aria-expanded": open, onClick: () => setOpen((o) => !o), children: [_jsx("span", { className: cn("min-w-0 truncate", current ? "" : "text-ink-faint"), children: current || placeholder }), _jsx(Icon, { icon: CaretRight, size: "xs", className: "shrink-0 rotate-90" })] }), open && (_jsxs("div", { ref: list, role: "listbox", className: "tamga-overlay absolute left-0 top-[var(--overlay-below)] z-40 w-full overflow-hidden py-1", "aria-busy": loading || undefined, children: [loading && _jsx(SkeletonOptions, { rows: loadingRows }), !loading && options.map((o) => (_jsxs("button", { role: "option", "aria-selected": o === current, "data-tamga-option": true, className: "tamga-option", "data-selected": o === current, onClick: () => {
+                            setInner(o);
+                            onChange?.(o);
+                            setOpen(false);
+                        }, children: [o, o === current && _jsx(Icon, { icon: Check, size: "xs", weight: "bold", className: "ml-auto" })] }, o)))] }))] }));
+}
+/** Side panel. Overlay plane, so it carries the 6px offset and a scrim. */
+export function Sheet({ open, onClose, title, children, footer, loading = false, closeLabel, }) {
+    /* the trap has to be called before any early return, so the hook lives here
+       and the null is returned after it */
+    const panel = useFocusTrap(open);
+    useScrollLock(open);
+    useEffect(() => {
+        if (!open)
+            return;
+        const esc = (e) => e.key === "Escape" && onClose();
+        document.addEventListener("keydown", esc);
+        return () => document.removeEventListener("keydown", esc);
+    }, [open, onClose]);
+    if (!open)
+        return null;
+    return (_jsxs("div", { className: "fixed inset-0 z-50 flex justify-end", children: [_jsx("div", { className: "tamga-scrim absolute inset-0", "aria-hidden": true, onClick: onClose }), _jsxs("aside", { ref: panel, role: "dialog", "aria-modal": true, "aria-label": title, className: "tamga-overlay relative z-10 flex h-full w-full max-w-md flex-col", style: { borderRadius: 0 }, "aria-busy": loading || undefined, children: [_jsxs("div", { className: "tamga-head tamga-gutter tamga-section", children: [_jsx("h3", { className: "text-subhead font-semibold", children: title }), _jsx(MiniButton, { onClick: onClose, "aria-label": closeLabel, className: "ml-auto", children: _jsx(Icon, { icon: Close, size: "xs" }) })] }), _jsx("div", { className: "tamga-gutter min-h-0 flex-1 overflow-y-auto py-6", children: loading ? _jsx(SkeletonPanel, { lines: 5, block: 120 }) : children }), footer ? (_jsx("div", { className: "tamga-gutter flex justify-end gap-2 border-t border-line py-4", children: footer })) : null] })] }));
+}

package/dist/components/progress.d.ts

@@ -0,0 +1,29 @@
+/**
+ * Progress — an instrument scale.
+ *
+ * Gerekçe: docs/gerekce/03-grafik-ve-olcum.md
+ */
+export declare function Progress({ value, label, showScale, ariaLabel, className, }: {
+    /**
+     * 0–100; clamped, so a bad number cannot paint outside the track TR: 0–100; sınırlanıyor,
+     * yani kötü bir sayı yolun dışına boyayamıyor
+     */
+    value: number;
+    /**
+     * the line under the bar; say the real counts, not just the percentage TR: çubuğun altındaki
+     * satır; yalnız yüzdeyi değil gerçek sayıları söyleyin
+     */
+    label?: string;
+    /**
+     * 0 · 50 · 100 under the track, for the rare case the bar stands alone TR: yolun altında 0 ·
+     * 50 · 100, çubuğun tek başına durduğu nadir durum için
+     */
+    showScale?: boolean;
+    /**
+     * the accessible name, when there is no visible label to borrow TR: ödünç alınacak görünür
+     * bir etiket yoksa erişilebilir ad
+     */
+    ariaLabel?: string;
+    className?: string;
+}): import("react").JSX.Element;
+//# sourceMappingURL=progress.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"progress.d.ts","sourceRoot":"","sources":["../../src/components/progress.tsx"],"names":[],"mappings":"AAAA;;;;GAIG;AAIH,wBAAgB,QAAQ,CAAC,EACvB,KAAK,EACL,KAAK,EACL,SAAiB,EACjB,SAAS,EACT,SAAc,GACf,EAAE;IACD;;;OAGG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,+BA4CA"}

package/dist/components/progress.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Progress — an instrument scale.
+ *
+ * Gerekçe: docs/gerekce/03-grafik-ve-olcum.md
+ */
+const TICKS = [10, 20, 30, 40, 50, 60, 70, 80, 90];
+export function Progress({ value, label, showScale = false, ariaLabel, className = "", }) {
+    const pct = Math.max(0, Math.min(100, value));
+    return (_jsxs("div", { className: className, children: [_jsxs("div", { className: "tamga-progress", role: "progressbar", "aria-valuenow": Math.round(pct), "aria-valuemin": 0, "aria-valuemax": 100, "aria-label": label ?? ariaLabel ?? "Progress", children: [_jsx("div", { className: "tamga-progress-fill", style: { width: `${pct}%` } }), TICKS.map((t) => (_jsx("span", { "aria-hidden": true, className: "tamga-progress-tick", style: {
+                            left: `${t}%`,
+                            /* a tick over the fill has to cut out of it, not sit on it */
+                            background: t <= pct ? "var(--color-page)" : "var(--color-tick)",
+                            opacity: t === 50 ? 1 : 0.55,
+                        } }, t)))] }), showScale ? (_jsxs("div", { className: "mt-1.5 flex justify-between font-mono text-micro text-ink-faint", children: [_jsx("span", { children: "0" }), _jsx("span", { children: "50" }), _jsx("span", { children: "100" })] })) : null, label ? (_jsx("p", { className: "mt-2 font-mono text-small text-ink-faint", children: label })) : null] }));
+}

package/dist/components/radio-group.d.ts

@@ -0,0 +1,17 @@
+import type { ReactNode } from "react";
+export declare function RadioGroup<T extends string>({ options, value, onChange, label, disabled, className, }: {
+    options: readonly {
+        value: T;
+        label: ReactNode;
+    }[];
+    value: T;
+    onChange?: (next: T) => void;
+    /**
+     * The group's accessible name: the answer to "one of which options". TR: Grubun erişilebilir
+     * adı: "hangi seçeneklerden biri" sorusunun cevabı.
+     */
+    label: string;
+    disabled?: boolean;
+    className?: string;
+}): import("react").JSX.Element;
+//# sourceMappingURL=radio-group.d.ts.map

package/dist/components/radio-group.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"radio-group.d.ts","sourceRoot":"","sources":["../../src/components/radio-group.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAUvC,wBAAgB,UAAU,CAAC,CAAC,SAAS,MAAM,EAAE,EAC3C,OAAO,EACP,KAAK,EACL,QAAQ,EACR,KAAK,EACL,QAAgB,EAChB,SAAS,GACV,EAAE;IACD,OAAO,EAAE,SAAS;QAAE,KAAK,EAAE,CAAC,CAAC;QAAC,KAAK,EAAE,SAAS,CAAA;KAAE,EAAE,CAAC;IACnD,KAAK,EAAE,CAAC,CAAC;IACT,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,IAAI,CAAC;IAC7B;;;OAGG;IACH,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,+BA6BA"}

package/dist/components/radio-group.js

@@ -0,0 +1,23 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from "../lib/cn.js";
+import { OFF } from "./control-base.js";
+/* ---------------------------------------------------------------- *
+ * RadioGroup — akranlar arasından TEK seçim.
+ *
+ * Grubun kendisi `role="radiogroup"`, satırlar `role="radio"`. İkisi birden
+ * olmadan ekran okuyucu "üç ayrı düğme" duyurur, "üç seçenekten biri" değil.
+ * ---------------------------------------------------------------- */
+export function RadioGroup({ options, value, onChange, label, disabled = false, className, }) {
+    return (_jsx("div", { role: "radiogroup", "aria-label": label, className: cn("flex flex-col gap-2", className), children: options.map((o) => (_jsxs("button", { type: "button", role: "radio", "aria-checked": value === o.value, "aria-disabled": disabled || undefined, onClick: () => !disabled && onChange?.(o.value), 
+            /* ÜSTTEN HİZALI VE TAM GENİŞLİK, ve ikisi de iki satırlık bir
+               seçenek yüzünden değişti.
+               `items-center` tek satırlık etiketlerde doğru duruyordu; altına
+               bir açıklama satırı eklenince işaret iki satırın ORTASINA kaçıyor
+               ve neyi işaretlediği belirsizleşiyor. İşaret ilk satıra ait.
+               `w-full` de aynı sebeple: düğme içeriği kadar genişken açıklama
+               erkenden sarıyor ve seçenekler farklı genişliklerde tırtıklı bir
+               sütun oluşturuyordu. Tam genişlik hepsini aynı sol kenara ve aynı
+               sarma noktasına oturtuyor. */
+            className: "flex w-full items-start gap-2 text-left text-body", style: disabled ? OFF : undefined, children: [_jsx("span", { className: "tamga-radio tamga-choice-mark", "data-checked": value === o.value }), _jsx("span", { className: "min-w-0 flex-1", children: o.label })] }, o.value))) }));
+}

package/dist/components/rail-link.d.ts

@@ -0,0 +1,24 @@
+import type { ReactNode } from "react";
+/**
+ * Kendi dosyasında, çünkü YENİ BİR KONTROL.
+ *
+ * Gerekçe: docs/gerekce/05-yuzey-ve-kabuk.md
+ */
+/** İkon raylı gezinme öğesi. */
+export declare function RailLink({ label, active, href, onClick, className, children, showLabel, }: {
+    label: string;
+    active?: boolean;
+    href?: string;
+    onClick?: () => void;
+    className?: string;
+    /** The icon. TR: İkon. */
+    children: ReactNode;
+    /**
+     * SHOW the label beside the icon. A narrow rail is the default (`false`) and the label lives
+     * only as the accessible name; `true` in a wide sidebar. TR: Etiketi ikonun yanında GÖSTER.
+     * Dar ray varsayılan (`false`) ve etiket yalnız erişilebilir ad olarak yaşar; geniş bir kenar
+     * çubuğunda `true`.
+     */
+    showLabel?: boolean;
+}): import("react").JSX.Element;
+//# sourceMappingURL=rail-link.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"rail-link.d.ts","sourceRoot":"","sources":["../../src/components/rail-link.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAGvC;;;;GAIG;AAEH,gCAAgC;AAChC,wBAAgB,QAAQ,CAAC,EACvB,KAAK,EACL,MAAc,EACd,IAAI,EACJ,OAAO,EACP,SAAS,EACT,QAAQ,EACR,SAAiB,GAClB,EAAE;IACD,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,0BAA0B;IAC1B,QAAQ,EAAE,SAAS,CAAC;IACpB;;;;;OAKG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB,+BAwBA"}

package/dist/components/rail-link.js

@@ -0,0 +1,24 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from "../lib/cn.js";
+/**
+ * Kendi dosyasında, çünkü YENİ BİR KONTROL.
+ *
+ * Gerekçe: docs/gerekce/05-yuzey-ve-kabuk.md
+ */
+/** İkon raylı gezinme öğesi. */
+export function RailLink({ label, active = false, href, onClick, className, children, showLabel = false, }) {
+    const shared = {
+        className: cn("tamga-rail-link", showLabel && "tamga-rail-link-wide", className),
+        "data-active": active,
+        "aria-label": label,
+        /* Etiket görünürken `title` yoktur: görünen bir metnin üstünde beliren
+           ipucu aynı şeyi ikinci kez söyler ve imleci geciktirir. */
+        title: showLabel ? undefined : label,
+        "aria-current": active ? "page" : undefined,
+    };
+    if (href) {
+        return (_jsxs("a", { href: href, ...shared, children: [children, showLabel && _jsx("span", { className: "truncate", children: label })] }));
+    }
+    return (_jsxs("button", { type: "button", onClick: onClick, ...shared, children: [children, showLabel && _jsx("span", { className: "truncate", children: label })] }));
+}

package/dist/components/rich-text.d.ts

@@ -0,0 +1,51 @@
+/**
+ * Biçimlendirilebilir metin.
+ *
+ * Gerekçe: docs/gerekce/01-form-ve-girdi.md
+ */
+export type RichTextFormat = "bold" | "italic" | "link" | "h3" | "h4" | "h5" | "ul" | "ol";
+export declare function RichText({ value, onChange, allow, labels, ariaLabel, rows, disabled, className, }: {
+    /**
+     * HTML. The kit does not sanitise it: which tags are valid is the product's rule. TR: HTML.
+     * Kit onu temizlemez: hangi etiketin geçerli olduğu ürünün kuralı.
+     */
+    value: string;
+    onChange: (next: string) => void;
+    /**
+     * The formats offered in the toolbar, in order. `bold` · `italic` · `link` · `h3` `h4` `h5`
+     * heading levels · `ul` bullet list · `ol` numbered list. TR: Araç çubuğunda sunulacak
+     * biçimler, sırasıyla. `bold` kalın · `italic` italik · `link` bağlantı · `h3` `h4` `h5`
+     * başlık seviyeleri · `ul` madde listesi · `ol` numaralı liste.
+     */
+    allow: readonly RichTextFormat[];
+    labels: {
+        bold: string;
+        italic: string;
+        link: string;
+        h3: string;
+        h4: string;
+        h5: string;
+        ul: string;
+        ol: string;
+        /**
+         * The label of the box that asks for the link address. TR: Bağlantı adresini soran kutunun
+         * etiketi.
+         */
+        linkUrl: string;
+        linkApply: string;
+        linkCancel: string;
+    };
+    /**
+     * The writing area's accessible name; needed even inside a `Field`. TR: Yazma alanının
+     * erişilebilir adı; `Field` içinde bile gerekiyor.
+     */
+    ariaLabel: string;
+    /**
+     * The writing area's opening height, in rows. TR: Yazma alanının açılış yüksekliği, satır
+     * olarak.
+     */
+    rows?: number;
+    disabled?: boolean;
+    className?: string;
+}): import("react").JSX.Element;
+//# sourceMappingURL=rich-text.d.ts.map

package/dist/components/rich-text.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"rich-text.d.ts","sourceRoot":"","sources":["../../src/components/rich-text.tsx"],"names":[],"mappings":"AAOA;;;;GAIG;AACH,MAAM,MAAM,cAAc,GAAG,MAAM,GAAG,QAAQ,GAAG,MAAM,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAuB3F,wBAAgB,QAAQ,CAAC,EACvB,KAAK,EACL,QAAQ,EACR,KAAK,EACL,MAAM,EACN,SAAS,EACT,IAAS,EACT,QAAQ,EACR,SAAS,GACV,EAAE;IACD;;;OAGG;IACH,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACjC;;;;;OAKG;IACH,KAAK,EAAE,SAAS,cAAc,EAAE,CAAC;IACjC,MAAM,EAAE;QACN,IAAI,EAAE,MAAM,CAAC;QACb,MAAM,EAAE,MAAM,CAAC;QACf,IAAI,EAAE,MAAM,CAAC;QACb,EAAE,EAAE,MAAM,CAAC;QACX,EAAE,EAAE,MAAM,CAAC;QACX,EAAE,EAAE,MAAM,CAAC;QACX,EAAE,EAAE,MAAM,CAAC;QACX,EAAE,EAAE,MAAM,CAAC;QACX;;;WAGG;QACH,OAAO,EAAE,MAAM,CAAC;QAChB,SAAS,EAAE,MAAM,CAAC;QAClB,UAAU,EAAE,MAAM,CAAC;KACpB,CAAC;IACF;;;OAGG;IACH,SAAS,EAAE,MAAM,CAAC;IAClB;;;OAGG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,+BA2LA"}

package/dist/components/rich-text.js

@@ -0,0 +1,147 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from "react";
+import { cn } from "../lib/cn.js";
+import { Icon } from "./icon.js";
+import { Bold, BulletList, Check, Close, Italic, Link, NumberedList } from "./icons.js";
+const KOMUTLAR = {
+    bold: { command: "bold" },
+    italic: { command: "italic" },
+    link: { command: "createLink" },
+    h3: { command: "formatBlock", value: "h3" },
+    h4: { command: "formatBlock", value: "h4" },
+    h5: { command: "formatBlock", value: "h5" },
+    ul: { command: "insertUnorderedList" },
+    ol: { command: "insertOrderedList" },
+};
+const SIMGELER = {
+    bold: Bold,
+    italic: Italic,
+    link: Link,
+    ul: BulletList,
+    ol: NumberedList,
+};
+export function RichText({ value, onChange, allow, labels, ariaLabel, rows = 10, disabled, className, }) {
+    const alan = useRef(null);
+    const [aktif, setAktif] = useState({});
+    const [baglantiAcik, setBaglantiAcik] = useState(false);
+    const [adres, setAdres] = useState("");
+    const secim = useRef(null);
+    /*
+     * BİÇİM ETİKETLE VERİLİYOR, STİLLE DEĞİL.
+     *
+     * `styleWithCSS` açıkken tarayıcı kalın için `<span style="font-weight:
+     * bold">` yazıyor: hiçbir süzgeçten geçmeyen, hiçbir şey ifade etmeyen bir
+     * çıktı. Kapalıyken etiket üretiyor, ve etiketin anlamı var.
+     */
+    useEffect(() => {
+        try {
+            document.execCommand("styleWithCSS", false, "false");
+        }
+        catch {
+            /* Bazı tarayıcılar komutu tanımıyor; varsayılanları zaten etiket. */
+        }
+    }, []);
+    /* `value` YALNIZ DIŞARIDAN DEĞİŞTİĞİNDE DOM'a yazılıyor. Karşılaştırma
+       DOM'un kendi `innerHTML`i ile: eşitse dokunulmuyor, yoksa her tuş
+       vuruşunda alan yeniden kurulur ve imleç başa atlar. */
+    useEffect(() => {
+        const el = alan.current;
+        if (el && el.innerHTML !== value)
+            el.innerHTML = value;
+    }, [value]);
+    /**
+     * ÇIKTI: `<b>` YERİNE `<strong>`.
+     *
+     * Tarayıcının `bold` komutu `<b>` üretiyor, ve `<b>` modern HTML'de hiçbir
+     * anlam taşımayan bir sunum etiketi; kalın düğmesinin söylediği şey ise
+     * "bu önemli", yani `<strong>`. Fark akademik değil, ölçüldü: bir vitrinin
+     * etiket beyaz listesinde `<strong>` vardı, `<b>` yoktu, ve kalın yazılan
+     * her şey mağazada sessizce düz metne dönüyordu.
+     *
+     * `<i>` DOKUNULMADAN KALIYOR: onun aksine `<i>` hâlâ anlamı olan bir
+     * etiket (başka bir ses tonu, teknik terim, yabancı sözcük) ve tarayıcının
+     * doğal çıktısı.
+     */
+    function yayinla() {
+        const el = alan.current;
+        if (!el)
+            return;
+        onChange(el.innerHTML.replace(/<b>/g, "<strong>").replace(/<\/b>/g, "</strong>"));
+    }
+    /** Hangi biçimlerin şu an açık olduğunu tarayıcıdan sorar. */
+    function durumTazele() {
+        if (typeof document === "undefined")
+            return;
+        const d = {};
+        for (const f of allow) {
+            const k = KOMUTLAR[f];
+            if (k.command === "formatBlock") {
+                d[f] = document.queryCommandValue("formatBlock").toLowerCase() === k.value;
+            }
+            else if (k.command !== "createLink") {
+                try {
+                    d[f] = document.queryCommandState(k.command);
+                }
+                catch {
+                    d[f] = false;
+                }
+            }
+        }
+        setAktif(d);
+    }
+    function uygula(f) {
+        const k = KOMUTLAR[f];
+        if (k.command === "createLink") {
+            /* SEÇİM SAKLANIYOR. Adres kutusuna odak geçince `contenteditable`deki
+               seçim kayboluyor ve bağlantı boşluğa uygulanıyor. */
+            const s = window.getSelection();
+            secim.current = s && s.rangeCount > 0 ? s.getRangeAt(0).cloneRange() : null;
+            setBaglantiAcik(true);
+            return;
+        }
+        alan.current?.focus();
+        /* Başlık düğmesi AÇMA-KAPAMA: aynı seviyeye ikinci kez basmak paragrafa
+           döndürüyor. Tek yönlü bir düğme, geri almanın yolunu göstermiyor. */
+        const geriAl = k.command === "formatBlock" && aktif[f];
+        document.execCommand(k.command, false, geriAl ? "p" : k.value);
+        durumTazele();
+        yayinla();
+    }
+    function baglantiUygula() {
+        const el = alan.current;
+        if (!el)
+            return;
+        el.focus();
+        const s = window.getSelection();
+        if (secim.current && s) {
+            s.removeAllRanges();
+            s.addRange(secim.current);
+        }
+        const temiz = adres.trim();
+        if (temiz)
+            document.execCommand("createLink", false, temiz);
+        setBaglantiAcik(false);
+        setAdres("");
+        yayinla();
+    }
+    return (_jsxs("div", { className: cn("tamga-editor", disabled && "tamga-editor-disabled", className), children: [_jsx("div", { className: "tamga-editor-bar", role: "toolbar", "aria-label": ariaLabel, children: allow.map((f) => {
+                    const simge = SIMGELER[f];
+                    return (_jsx("button", { type: "button", disabled: disabled, title: labels[f], "aria-label": labels[f], "aria-pressed": KOMUTLAR[f].command === "createLink" ? undefined : (aktif[f] ?? false), "data-on": aktif[f] || undefined, 
+                        /* `mousedown`ta engelleniyor: tıklama odağı alandan almazsa
+                           seçim korunuyor ve komut seçili metne uygulanıyor. */
+                        onMouseDown: (e) => e.preventDefault(), onClick: () => uygula(f), className: "tamga-editor-btn", children: simge ? _jsx(Icon, { icon: simge, size: "sm" }) : _jsx("span", { className: "font-semibold", children: f.toUpperCase() }) }, f));
+                }) }), baglantiAcik && (_jsxs("div", { className: "tamga-editor-link", children: [_jsx("input", { autoFocus: true, value: adres, onChange: (e) => setAdres(e.target.value), onKeyDown: (e) => {
+                            if (e.key === "Enter") {
+                                e.preventDefault();
+                                baglantiUygula();
+                            }
+                            if (e.key === "Escape")
+                                setBaglantiAcik(false);
+                        }, placeholder: labels.linkUrl, "aria-label": labels.linkUrl, className: "tamga-input tamga-input-sm flex-1" }), _jsx("button", { type: "button", onClick: baglantiUygula, "aria-label": labels.linkApply, className: "tamga-editor-btn", children: _jsx(Icon, { icon: Check, size: "sm" }) }), _jsx("button", { type: "button", onClick: () => setBaglantiAcik(false), "aria-label": labels.linkCancel, className: "tamga-editor-btn", children: _jsx(Icon, { icon: Close, size: "sm" }) })] })), _jsx("div", { ref: alan, contentEditable: !disabled, suppressContentEditableWarning: true, role: "textbox", "aria-multiline": "true", "aria-label": ariaLabel, onInput: yayinla, onKeyUp: durumTazele, onMouseUp: durumTazele, onFocus: durumTazele, onPaste: (e) => {
+                    e.preventDefault();
+                    const metin = e.clipboardData.getData("text/plain");
+                    document.execCommand("insertText", false, metin);
+                    yayinla();
+                }, style: { minHeight: `calc(${rows} * 1.65em)` }, className: "tamga-editor-body tamga-prose" })] }));
+}

package/dist/components/section.d.ts

@@ -0,0 +1,15 @@
+/**
+ * A card header. It carries the card's own left line and is closed by the
+ * single rule weight used everywhere else.
+ */
+export declare function SectionHead({ title, meta, mono, action, }: {
+    title: string;
+    meta?: string;
+    /**
+     * set when the title is an identifier: a host, service or region TR: başlık bir
+     * tanımlayıcıysa verin: bir sunucu, servis ya da bölge adı
+     */
+    mono?: boolean;
+    action?: React.ReactNode;
+}): import("react").JSX.Element;
+//# sourceMappingURL=section.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"section.d.ts","sourceRoot":"","sources":["../../src/components/section.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AACH,wBAAgB,WAAW,CAAC,EAC1B,KAAK,EACL,IAAI,EACJ,IAAY,EACZ,MAAM,GACP,EAAE;IACD,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,CAAC;IACd;;;OAGG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC1B,+BAUA"}

package/dist/components/section.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * A card header. It carries the card's own left line and is closed by the
+ * single rule weight used everywhere else.
+ */
+export function SectionHead({ title, meta, mono = false, action, }) {
+    return (_jsxs("div", { className: "tamga-head tamga-gutter tamga-section", children: [_jsx("h3", { className: `text-subhead font-semibold ${mono ? "font-mono text-control font-bold" : ""}`, children: title }), meta ? _jsx("span", { className: "tamga-label", children: meta }) : null, action ? _jsx("div", { className: "ml-auto flex items-center gap-2", children: action }) : null] }));
+}

package/dist/components/segmented.d.ts

@@ -0,0 +1,13 @@
+import type { ReactNode } from "react";
+export declare function Segmented<T extends string>({ options, value, onChange, label, className, }: {
+    options: readonly {
+        value: T;
+        label: ReactNode;
+    }[];
+    value: T;
+    onChange?: (next: T) => void;
+    /** The group's accessible name. TR: Grubun erişilebilir adı. */
+    label: string;
+    className?: string;
+}): import("react").JSX.Element;
+//# sourceMappingURL=segmented.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"segmented.d.ts","sourceRoot":"","sources":["../../src/components/segmented.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AASvC,wBAAgB,SAAS,CAAC,CAAC,SAAS,MAAM,EAAE,EAC1C,OAAO,EACP,KAAK,EACL,QAAQ,EACR,KAAK,EACL,SAAS,GACV,EAAE;IACD,OAAO,EAAE,SAAS;QAAE,KAAK,EAAE,CAAC,CAAC;QAAC,KAAK,EAAE,SAAS,CAAA;KAAE,EAAE,CAAC;IACnD,KAAK,EAAE,CAAC,CAAC;IACT,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,IAAI,CAAC;IAC7B,gEAAgE;IAChE,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,+BAgBA"}

package/dist/components/segmented.js

@@ -0,0 +1,12 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { cn } from "../lib/cn.js";
+/* ---------------------------------------------------------------- *
+ * Segmented — akranlar arasından bir GÖRÜNÜM seçimi.
+ *
+ * Oturmuş (seated) fizik: seçili olan yükselmez, tam tersine yerine oturur.
+ * "Buradasın" bir eylem değildir, o yüzden dolgu almaz (Yasa 2).
+ * ---------------------------------------------------------------- */
+export function Segmented({ options, value, onChange, label, className, }) {
+    return (_jsx("div", { role: "group", "aria-label": label, className: cn("tamga-segment", className), children: options.map((o) => (_jsx("button", { type: "button", "aria-pressed": value === o.value, "data-active": value === o.value, onClick: () => onChange?.(o.value), children: o.label }, o.value))) }));
+}

package/dist/components/skeleton.d.ts

@@ -0,0 +1,69 @@
+/**
+ * Skeletons.
+ *
+ * Gerekçe: docs/gerekce/04-bos-ve-hata.md
+ */
+export declare function Skeleton({ className, index, style, }: {
+    className?: string;
+    index?: number;
+    style?: React.CSSProperties;
+}): import("react").JSX.Element;
+/** Paragraph copy. The last line is always short — real text ends mid-line. */
+export declare function SkeletonText({ lines, className, }: {
+    lines?: number;
+    className?: string;
+}): import("react").JSX.Element;
+/**
+ * A list row. Mirrors `.tamga-list-row` exactly, including the 56px height, so the
+ * skeleton list and the real list are the same object with the text removed.
+ */
+export declare function SkeletonRows({ rows, dense, }: {
+    rows?: number;
+    dense?: boolean;
+}): import("react").JSX.Element;
+/**
+ * The KPI tile: icon tile, label, big number.
+ *
+ * TR: İSKELET KARONUN KENDİSİYLE AYNI KALIPTA. `Kpi` ikon karosu alınca bu
+ * iskelet eski hâlinde kaldıysa yükleme bittiğinde içerik yana zıplıyor, ve
+ * bir iskeletin tek işi o zıplamayı önlemek. Bu yüzden ikisi aynı sınıfı
+ * (`tamga-kpi`) paylaşıyor: kalıp bir yerde değişince ikisi birden değişiyor.
+ */
+export declare function SkeletonKpi({ index }: {
+    index?: number;
+}): import("react").JSX.Element;
+/** A card with a section head and a body area of a given height. */
+export declare function SkeletonCard({ height, title, }: {
+    height?: number;
+    title?: boolean;
+}): import("react").JSX.Element;
+/** A table: header rule plus n body rows across the given column widths. */
+export declare function SkeletonTable({ rows, cols, }: {
+    rows?: number;
+    cols?: string[];
+}): import("react").JSX.Element;
+/**
+ * Panel contents.
+ *
+ * A panel that opens before its data arrives is the one place a spinner is most
+ * tempting and most wrong: the panel already has a known width and a known row
+ * height, so there is a real shape to hold. A spinner throws that away and then
+ * makes the whole panel jump when the rows land.
+ *
+ * Matches `.tamga-option` — 40px tall, 16px side padding, icon slot then label.
+ */
+export declare function SkeletonOptions({ rows }: {
+    rows?: number;
+}): import("react").JSX.Element;
+/** Free-form panel body — popover, dialog, sheet. */
+export declare function SkeletonPanel({ lines, block, }: {
+    lines?: number;
+    /**
+     * height of a leading block (a chart, a map, an avatar row) if the panel has one TR: panelde
+     * varsa baştaki bloğun (bir grafik, bir harita, bir avatar satırı) yüksekliği
+     */
+    block?: number;
+}): import("react").JSX.Element;
+/** Page band: title, subtitle, and the actions that sit on the right. */
+export declare function SkeletonPageBand(): import("react").JSX.Element;
+//# sourceMappingURL=skeleton.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"skeleton.d.ts","sourceRoot":"","sources":["../../src/components/skeleton.tsx"],"names":[],"mappings":"AAAA;;;;GAIG;AASH,wBAAgB,QAAQ,CAAC,EACvB,SAAc,EACd,KAAS,EACT,KAAK,GACN,EAAE;IACD,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAC7B,+BAIA;AAED,+EAA+E;AAC/E,wBAAgB,YAAY,CAAC,EAC3B,KAAS,EACT,SAAc,GACf,EAAE;IACD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,+BAcA;AAED;;;GAGG;AACH,wBAAgB,YAAY,CAAC,EAC3B,IAAQ,EACR,KAAa,GACd,EAAE;IACD,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB,+BAiBA;AAED;;;;;;;GAOG;AACH,wBAAgB,WAAW,CAAC,EAAE,KAAS,EAAE,EAAE;IAAE,KAAK,CAAC,EAAE,MAAM,CAAA;CAAE,+BAU5D;AAED,oEAAoE;AACpE,wBAAgB,YAAY,CAAC,EAC3B,MAAY,EACZ,KAAY,GACb,EAAE;IACD,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB,+BAiBA;AAED,4EAA4E;AAC5E,wBAAgB,aAAa,CAAC,EAC5B,IAAQ,EACR,IAAgD,GACjD,EAAE;IACD,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,MAAM,EAAE,CAAC;CACjB,+BA8BA;AAED;;;;;;;;;GASG;AACH,wBAAgB,eAAe,CAAC,EAAE,IAAQ,EAAE,EAAE;IAAE,IAAI,CAAC,EAAE,MAAM,CAAA;CAAE,+BAgB9D;AAED,qDAAqD;AACrD,wBAAgB,aAAa,CAAC,EAC5B,KAAS,EACT,KAAK,GACN,EAAE;IACD,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,+BAOA;AAED,yEAAyE;AACzE,wBAAgB,gBAAgB,gCAa/B"}