tamga-ui 0.2.0 → 0.3.0

package/dist/components/square-picker.js

@@ -0,0 +1,90 @@
+"use client";
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useLayoutEffect, useRef, useState } from "react";
+import { Button } from "./button.js";
+import { Dialog } from "./overlay.js";
+import { Slider } from "./slider.js";
+import { Label } from "./surface.js";
+import { cropSquare } from "../lib/image.js";
+/**
+ * LOGODAN AMBLEM SEÇME — otomatik kesme DEĞİL.
+ *
+ * Sorulan soru şuydu: yüklenen logoyu ayırıp amblemi kendiliğinden çıkaramaz
+ * mıyız? Çıkaramayız, ve denememesi gerekiyor:
+ *
+ *   · Dosyada "amblem" diye işaretli bir şey yok. SVG'de bazen bir grup id'si
+ *     olur ama bu tasarımcının keyfine bağlı; PNG'de hiç yok.
+ *   · Konum sabit değil: amblem solda, üstte, sağda olabilir, yazının içine
+ *     gömülü olabilir, ya da hiç olmayabilir (yalnız kelime-logo).
+ *   · Hata SESSİZ ve KALICI olur. Yanlış kesim patlamaz; yarım bir harf
+ *     panelin her sayfasının sol üstünde durur ve kimse bunun otomatik
+ *     kesildiğini bilmez.
+ *
+ * Bu yüzden kesimi İNSAN yapıyor: kare bir çerçeve, sürüklenip boyutlanıyor.
+ * Sonuç tahmin değil karar.
+ *
+ * ÇERÇEVE ORANLA TUTULUYOR (0–1), piksel ile değil: önizleme ekrandan ekrana
+ * farklı ölçekte çiziliyor, oran her ölçekte aynı yeri gösteriyor. Ekrana
+ * çizilirken piksele dönüyor ve dönüşüm TEK YERDE (`kenarPx`): kesim
+ * matematiği ile çerçevenin CSS'i ayrı ayrı hesaplansaydı, kullanıcının
+ * gördüğü kare ile kesilen kare farklı olurdu — ve fark sessiz olurdu.
+ */
+export function SquarePicker({ open, source, onClose, onPick, maxEdge = 256, labels, }) {
+    const sahne = useRef(null);
+    const [olcu, setOlcu] = useState({ en: 0, boy: 0 });
+    const [x, setX] = useState(0);
+    const [y, setY] = useState(0);
+    const [oran, setOran] = useState(0.6);
+    const [suruyor, setSuruyor] = useState(false);
+    /* Her açılışta baştan: bir önceki logonun çerçevesini yeni logoya taşımak,
+       kullanıcıya alakasız bir yeri seçtirmenin en kolay yolu. */
+    useEffect(() => {
+        if (!open)
+            return;
+        setX(0);
+        setY(0);
+        setOran(0.6);
+    }, [open, source]);
+    /* Sahnenin gerçek boyu ÖLÇÜLÜYOR, tahmin edilmiyor: görsel yüklendikçe ve
+       pencere daraldıkça değişiyor, ve çerçevenin pikseli ona bağlı. */
+    useLayoutEffect(() => {
+        const el = sahne.current;
+        if (!el)
+            return;
+        const olc = () => setOlcu({ en: el.clientWidth, boy: el.clientHeight });
+        olc();
+        const gozcu = new ResizeObserver(olc);
+        gozcu.observe(el);
+        return () => gozcu.disconnect();
+    }, [open, source]);
+    /* KARE, SAHNENİN KISA KENARINA GÖRE. Bir logo 350×65 ise kare en fazla o 65
+       pikselin kadarı olabilir; uzun kenara göre ölçseydik çerçeve görselin
+       dışına taşardı. Kesim fonksiyonu da aynı kuralı kullanıyor. */
+    const kenarPx = Math.min(olcu.en, olcu.boy) * oran;
+    const tasi = useCallback((olay) => {
+        const el = sahne.current;
+        if (!suruyor || !el)
+            return;
+        const k = el.getBoundingClientRect();
+        const nx = (olay.clientX - k.left - kenarPx / 2) / k.width;
+        const ny = (olay.clientY - k.top - kenarPx / 2) / k.height;
+        setX(Math.max(0, Math.min(1 - kenarPx / k.width, nx)));
+        setY(Math.max(0, Math.min(1 - kenarPx / k.height, ny)));
+    }, [suruyor, kenarPx]);
+    async function onayla() {
+        onPick(await cropSquare(source, { x, y, size: oran }, maxEdge));
+        onClose();
+    }
+    return (_jsx(Dialog, { open: open, onClose: onClose, title: labels.title, closeLabel: labels.close, footer: _jsxs(_Fragment, { children: [_jsx(Button, { type: "button", onClick: onClose, children: labels.cancel }), _jsx(Button, { variant: "primary", type: "button", onClick: onayla, children: labels.confirm })] }), children: _jsxs("div", { className: "flex flex-col gap-4", children: [_jsx(Label, { children: labels.hint }), _jsx("div", { className: "rounded-[var(--radius-card)] border border-[var(--color-edge)] bg-[var(--color-shell)] p-4", children: _jsxs("div", { ref: sahne, onPointerDown: (e) => {
+                            setSuruyor(true);
+                            e.currentTarget.setPointerCapture(e.pointerId);
+                        }, onPointerMove: tasi, onPointerUp: () => setSuruyor(false), className: "relative cursor-crosshair touch-none select-none overflow-hidden", children: [_jsx("img", { src: source, alt: "", className: "pointer-events-none block w-full", draggable: false }), _jsx("span", { "aria-hidden": true, className: "pointer-events-none absolute border-2 border-[var(--color-accent-line)]", style: {
+                                    left: x * olcu.en,
+                                    top: y * olcu.boy,
+                                    width: kenarPx,
+                                    height: kenarPx,
+                                    /* Dışarısı karartılıyor: seçili kare kendi kenarlığından çok
+                                       çevresinin koyulmasıyla okunuyor. */
+                                    boxShadow: "0 0 0 9999px rgb(0 0 0 / 0.35)",
+                                } })] }) }), _jsx(Slider, { label: labels.size, value: Math.round(oran * 100), onChange: (v) => setOran(v / 100), min: 15, max: 100, suffix: "%" })] }) }));
+}

package/dist/index.d.ts

@@ -41,6 +41,9 @@ export { LiveScope, useLiveClaim } from "./components/live-scope.js";
 export { Skeleton, SkeletonText, SkeletonRows, SkeletonKpi, SkeletonCard, SkeletonTable, SkeletonOptions, SkeletonPanel, SkeletonPageBand, } from "./components/skeleton.js";
 export { Surface, ScrollX, Rise, Swap, ListRow, CellActions, PageBand, Link, } from "./components/layout.js";
 export { ThemeToggle, LocaleSwitcher, LogoTile, AccountButton } from "./components/chrome.js";
+export { ColorSwatches, ThemeCards, ImageField, type SwatchOption, type ThemeChoice, } from "./components/appearance.js";
+export { SquarePicker } from "./components/square-picker.js";
+export { prepareImage, cropSquare, IMAGE_ACCEPT, type ImageError } from "./lib/image.js";
 export { RailLink } from "./components/rail-link.js";
 export { Slider } from "./components/slider.js";
 export { Accordion, Collapsible } from "./components/disclosure.js";

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}

package/dist/index.js

@@ -54,6 +54,9 @@ export { Skeleton, SkeletonText, SkeletonRows, SkeletonKpi, SkeletonCard, Skelet
  * Gerekçesi `components/layout.tsx`'in başında. */
 export { Surface, ScrollX, Rise, Swap, ListRow, CellActions, PageBand, Link, } from "./components/layout.js";
 export { ThemeToggle, LocaleSwitcher, LogoTile, AccountButton } from "./components/chrome.js";
+export { ColorSwatches, ThemeCards, ImageField, } from "./components/appearance.js";
+export { SquarePicker } from "./components/square-picker.js";
+export { prepareImage, cropSquare, IMAGE_ACCEPT } from "./lib/image.js";
 export { RailLink } from "./components/rail-link.js";
 export { Slider } from "./components/slider.js";
 /* --- açılır bölümler --------------------------------------------------- */