@stisocial/ui 0.2.1 → 0.3.0

package/dist/media/ImageCropper/ImageCropper.css

@@ -0,0 +1,139 @@
+@layer sti.reset, sti.tokens, sti.base, sti.components, sti.variants, sti.utilities;
+@layer sti.components {
+  .sti-ImageCropper-root-d568f {
+    --sti-crop-stage-h: 22rem;
+    gap: var(--sti-space-3);
+    box-sizing: border-box;
+    inline-size: 100%;
+    min-inline-size: 0;
+    font-family: var(--sti-font-text);
+    display: grid;
+  }
+
+  .sti-ImageCropper-root-d568f[data-height="sm"] {
+    --sti-crop-stage-h: 16rem;
+  }
+
+  .sti-ImageCropper-root-d568f[data-height="lg"] {
+    --sti-crop-stage-h: 30rem;
+  }
+
+  .sti-ImageCropper-stage-61ab2 {
+    block-size: var(--sti-crop-stage-h);
+    border-radius: var(--sti-radius-lg);
+    background: var(--sti-bg-subtle);
+    cursor: grab;
+    touch-action: none;
+    -webkit-user-select: none;
+    user-select: none;
+    outline: none;
+    position: relative;
+    overflow: hidden;
+  }
+
+  .sti-ImageCropper-stage-61ab2:active {
+    cursor: grabbing;
+  }
+
+  .sti-ImageCropper-stage-61ab2:focus-visible {
+    outline: var(--sti-focus-ring-width) solid var(--sti-focus-ring);
+    outline-offset: var(--sti-focus-ring-offset);
+  }
+
+  .sti-ImageCropper-image-e9abf {
+    inline-size: var(--sti-crop-w);
+    block-size: var(--sti-crop-h);
+    max-inline-size: none;
+    transform: translate(-50%, -50%) translate(var(--sti-crop-x), var(--sti-crop-y))
+      rotate(var(--sti-crop-r)) scale(var(--sti-crop-s));
+    pointer-events: none;
+    position: absolute;
+    inset-block-start: 50%;
+    inset-inline-start: 50%;
+  }
+
+  .sti-ImageCropper-image-e9abf:not([data-placed]), .sti-ImageCropper-window-a8714:not([data-placed]) {
+    visibility: hidden;
+  }
+
+  .sti-ImageCropper-window-a8714 {
+    inline-size: var(--sti-crop-ww);
+    block-size: var(--sti-crop-wh);
+    border: var(--sti-border-width-strong) solid var(--sti-bg-surface);
+    box-shadow: 0 0 0 100vmax var(--sti-scrim);
+    pointer-events: none;
+    position: absolute;
+    inset-block-start: 50%;
+    inset-inline-start: 50%;
+    translate: -50% -50%;
+  }
+
+  .sti-ImageCropper-root-d568f[data-shape="circle"] .sti-ImageCropper-window-a8714 {
+    border-radius: var(--sti-radius-pill);
+  }
+
+  .sti-ImageCropper-grid-7e368 {
+    background: linear-gradient(to right,
+        transparent 33.2%,
+        var(--sti-border) 33.2% 33.5%,
+        transparent 33.5% 66.5%,
+        var(--sti-border) 66.5% 66.8%,
+        transparent 66.8%),
+      linear-gradient(to bottom,
+        transparent 33.2%,
+        var(--sti-border) 33.2% 33.5%,
+        transparent 33.5% 66.5%,
+        var(--sti-border) 66.5% 66.8%,
+        transparent 66.8%);
+    border-radius: inherit;
+    opacity: 0;
+    transition: opacity var(--sti-duration-fast) var(--sti-ease-out);
+    position: absolute;
+    inset: 0;
+  }
+
+  .sti-ImageCropper-stage-61ab2:active .sti-ImageCropper-grid-7e368, .sti-ImageCropper-stage-61ab2:focus-visible .sti-ImageCropper-grid-7e368 {
+    opacity: 1;
+  }
+
+  .sti-ImageCropper-bar-43756 {
+    align-items: end;
+    gap: var(--sti-space-3) var(--sti-space-4);
+    flex-wrap: wrap;
+    display: flex;
+  }
+
+  .sti-ImageCropper-zoom-f12b9 {
+    flex: 14rem;
+    min-inline-size: 0;
+  }
+
+  .sti-ImageCropper-actions-f84ca {
+    gap: var(--sti-space-2);
+    flex: none;
+    display: flex;
+  }
+
+  .sti-ImageCropper-hint-52716 {
+    color: var(--sti-fg-muted);
+    font-size: var(--sti-font-size-xs);
+    line-height: var(--sti-line-height-xs);
+    margin: 0;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .sti-ImageCropper-grid-7e368 {
+      transition: none;
+    }
+  }
+
+  @media (forced-colors: active) {
+    .sti-ImageCropper-window-a8714 {
+      border-color: highlight;
+    }
+
+    .sti-ImageCropper-stage-61ab2:focus-visible {
+      outline-color: highlight;
+    }
+  }
+}

package/dist/media/ImageCropper/ImageCropper.d.ts

@@ -0,0 +1,27 @@
+import { CropArea } from "./cropGeometry.js";
+export interface ImageCropperProps {
+  /** Görsel adresi (aynı kaynak, blob ya da CORS izinli; `cropToBlob` için). */
+  src: string;
+  /** Görselin metin karşılığı (zorunlu). */
+  alt: string;
+  /** Kırpma oranı (genişlik / yükseklik). Varsayılan 1 (kare). */
+  aspect?: number;
+  /** `circle`: yuvarlak pencere (profil fotoğrafı); sonuç yine kare bölgedir. */
+  shape?: "rect" | "circle";
+  /** En büyük yakınlaştırma (kat). */
+  maxZoom?: number;
+  /** Bölge her değiştiğinde (döndürülmüş görselin doğal piksellerinde). */
+  onCropChange?: (area: CropArea) => void;
+  /** Sahnenin yüksekliği. */
+  height?: "sm" | "md" | "lg";
+  className?: string;
+  id?: string;
+}
+/**
+ * Görsel kırpıcı (profil fotoğrafı, kapak görseli): sabit pencerenin ardında görsel sürüklenir,
+ * yakınlaştırılır ve 90 derece döndürülür; görsel pencereyi her zaman örter (boş kenar kalmaz).
+ * Klavyede oklar kaydırır, + / − yakınlaştırır; altta yakınlaştırma kaydırıcısı, döndürme ve
+ * sıfırlama. Sonuç `onCropChange` ile bölge olarak bildirilir; `cropToBlob` bölgeyi dosyaya çevirir.
+ * Dönüşüm CSSOM ile yazılır (CSP uyumlu).
+ */
+export declare function ImageCropper({ src, alt, aspect, shape, maxZoom, onCropChange, height, className, id }: ImageCropperProps): import("react").JSX.Element;

package/dist/media/ImageCropper/ImageCropper.js

@@ -0,0 +1,239 @@
+"use client";
+import { useMessages } from "../../provider/UIProvider.js";
+import { template } from "../../text/text.js";
+import { Button } from "../../components/Button/Button.js";
+import { RotateIcon } from "../../icons/generated/RotateIcon.js";
+import { Slider } from "../../components/Slider/Slider.js";
+import { areaOf, clampOffset, coverScale, cropWindow, rotatedSize } from "./cropGeometry.js";
+import ImageCropper_module_default from "./ImageCropper.module.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useRef, useState } from "react";
+// src/media/ImageCropper/ImageCropper.tsx
+const KEY_STEP = 16;
+/**
+* Görsel kırpıcı (profil fotoğrafı, kapak görseli): sabit pencerenin ardında görsel sürüklenir,
+* yakınlaştırılır ve 90 derece döndürülür; görsel pencereyi her zaman örter (boş kenar kalmaz).
+* Klavyede oklar kaydırır, + / − yakınlaştırır; altta yakınlaştırma kaydırıcısı, döndürme ve
+* sıfırlama. Sonuç `onCropChange` ile bölge olarak bildirilir; `cropToBlob` bölgeyi dosyaya çevirir.
+* Dönüşüm CSSOM ile yazılır (CSP uyumlu).
+*/
+function ImageCropper({ src, alt, aspect = 1, shape = "rect", maxZoom = 3, onCropChange, height = "md", className, id }) {
+	const t = useMessages();
+	const stageRef = useRef(null);
+	const [stage, setStage] = useState({
+		width: 0,
+		height: 0
+	});
+	const [natural, setNatural] = useState(null);
+	const [zoom, setZoom] = useState(1);
+	const [rotation, setRotation] = useState(0);
+	const [offset, setOffset] = useState({
+		x: 0,
+		y: 0
+	});
+	const drag = useRef(null);
+	useEffect(() => {
+		const el = stageRef.current;
+		if (!el) return;
+		const measure = () => setStage({
+			width: el.clientWidth,
+			height: el.clientHeight
+		});
+		measure();
+		const ro = new ResizeObserver(measure);
+		ro.observe(el);
+		return () => ro.disconnect();
+	}, []);
+	const ready = natural !== null && stage.width > 0;
+	const win = cropWindow(stage, shape === "circle" ? 1 : aspect);
+	const image = natural ? rotatedSize(natural, rotation) : {
+		width: 1,
+		height: 1
+	};
+	const scale = ready ? coverScale(image, win) * zoom : 1;
+	const safeOffset = clampOffset(offset, image, win, scale);
+	const area = ready ? areaOf(image, win, scale, safeOffset, rotation) : null;
+	const areaKey = area ? `${area.x},${area.y},${area.width},${area.height},${area.rotation}` : "";
+	const latest = useRef({
+		area,
+		onCropChange
+	});
+	latest.current = {
+		area,
+		onCropChange
+	};
+	useEffect(() => {
+		const { area: current, onCropChange: notify } = latest.current;
+		if (areaKey && current) notify?.(current);
+	}, [areaKey]);
+	const placeImage = useCallback((el) => {
+		if (!el) return;
+		if (!natural) {
+			if (el.complete && el.naturalWidth > 0) setNatural({
+				width: el.naturalWidth,
+				height: el.naturalHeight
+			});
+			return;
+		}
+		el.style.setProperty("--sti-crop-w", `${natural.width}px`);
+		el.style.setProperty("--sti-crop-h", `${natural.height}px`);
+		el.style.setProperty("--sti-crop-x", `${safeOffset.x}px`);
+		el.style.setProperty("--sti-crop-y", `${safeOffset.y}px`);
+		el.style.setProperty("--sti-crop-r", `${rotation}deg`);
+		el.style.setProperty("--sti-crop-s", String(scale));
+		el.dataset.placed = "";
+	}, [
+		natural,
+		safeOffset.x,
+		safeOffset.y,
+		rotation,
+		scale
+	]);
+	const placeWindow = useCallback((el) => {
+		if (!el || !ready) return;
+		el.style.setProperty("--sti-crop-ww", `${win.width}px`);
+		el.style.setProperty("--sti-crop-wh", `${win.height}px`);
+		el.dataset.placed = "";
+	}, [
+		ready,
+		win.width,
+		win.height
+	]);
+	const changeZoom = (next) => setZoom(Math.min(maxZoom, Math.max(1, next)));
+	const onPointerDown = (e) => {
+		if (!ready) return;
+		e.currentTarget.setPointerCapture(e.pointerId);
+		drag.current = {
+			id: e.pointerId,
+			x: e.clientX,
+			y: e.clientY,
+			start: safeOffset
+		};
+	};
+	const onPointerMove = (e) => {
+		const d = drag.current;
+		if (!d || d.id !== e.pointerId) return;
+		setOffset(clampOffset({
+			x: d.start.x + e.clientX - d.x,
+			y: d.start.y + e.clientY - d.y
+		}, image, win, scale));
+	};
+	const onPointerUp = (e) => {
+		if (drag.current?.id === e.pointerId) drag.current = null;
+	};
+	const onKeyDown = (e) => {
+		const move = (dx, dy) => setOffset(clampOffset({
+			x: safeOffset.x + dx,
+			y: safeOffset.y + dy
+		}, image, win, scale));
+		switch (e.key) {
+			case "ArrowLeft":
+				move(KEY_STEP, 0);
+				break;
+			case "ArrowRight":
+				move(-16, 0);
+				break;
+			case "ArrowUp":
+				move(0, KEY_STEP);
+				break;
+			case "ArrowDown":
+				move(0, -16);
+				break;
+			case "+":
+			case "=":
+				changeZoom(zoom + .1);
+				break;
+			case "-":
+			case "_":
+				changeZoom(zoom - .1);
+				break;
+			default: return;
+		}
+		e.preventDefault();
+	};
+	const reset = () => {
+		setZoom(1);
+		setRotation(0);
+		setOffset({
+			x: 0,
+			y: 0
+		});
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		id,
+		className: [ImageCropper_module_default.root, className].filter(Boolean).join(" "),
+		"data-height": height,
+		"data-shape": shape,
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				ref: stageRef,
+				className: ImageCropper_module_default.stage,
+				role: "group",
+				"aria-roledescription": t.mediaCropRole,
+				"aria-label": template(t.mediaCropLabel, { alt }),
+				"aria-describedby": `${id ?? "crop"}-hint`,
+				tabIndex: 0,
+				"data-ready": ready ? "" : void 0,
+				onPointerDown,
+				onPointerMove,
+				onPointerUp,
+				onPointerCancel: onPointerUp,
+				onKeyDown,
+				children: [/* @__PURE__ */ jsx("img", {
+					ref: placeImage,
+					className: ImageCropper_module_default.image,
+					src,
+					alt,
+					draggable: false,
+					onLoad: (e) => setNatural({
+						width: e.currentTarget.naturalWidth,
+						height: e.currentTarget.naturalHeight
+					})
+				}), /* @__PURE__ */ jsx("span", {
+					ref: placeWindow,
+					className: ImageCropper_module_default.window,
+					"aria-hidden": "true",
+					children: /* @__PURE__ */ jsx("span", { className: ImageCropper_module_default.grid })
+				})]
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: ImageCropper_module_default.bar,
+				children: [/* @__PURE__ */ jsx(Slider, {
+					className: ImageCropper_module_default.zoom,
+					label: t.mediaCropZoom,
+					size: "sm",
+					minValue: 1,
+					maxValue: maxZoom,
+					step: .01,
+					value: zoom,
+					onChange: changeZoom,
+					formatOptions: {
+						style: "percent",
+						maximumFractionDigits: 0
+					}
+				}), /* @__PURE__ */ jsxs("div", {
+					className: ImageCropper_module_default.actions,
+					children: [/* @__PURE__ */ jsx(Button, {
+						variant: "secondary",
+						size: "sm",
+						iconStart: /* @__PURE__ */ jsx(RotateIcon, {}),
+						onPress: () => setRotation((rotation + 90) % 360),
+						children: t.mediaCropRotate
+					}), /* @__PURE__ */ jsx(Button, {
+						variant: "ghost",
+						size: "sm",
+						isDisabled: zoom === 1 && rotation === 0 && offset.x === 0 && offset.y === 0,
+						onPress: reset,
+						children: t.mediaCropReset
+					})]
+				})]
+			}),
+			/* @__PURE__ */ jsx("p", {
+				id: `${id ?? "crop"}-hint`,
+				className: ImageCropper_module_default.hint,
+				children: t.mediaCropHint
+			})
+		]
+	});
+}
+export { ImageCropper };

package/dist/media/ImageCropper/ImageCropper.module.js

@@ -0,0 +1,14 @@
+import './ImageCropper.css';
+// src/media/ImageCropper/ImageCropper.module.css
+var ImageCropper_module_default = {
+	"root": "sti-ImageCropper-root-d568f",
+	"stage": "sti-ImageCropper-stage-61ab2",
+	"image": "sti-ImageCropper-image-e9abf",
+	"window": "sti-ImageCropper-window-a8714",
+	"grid": "sti-ImageCropper-grid-7e368",
+	"bar": "sti-ImageCropper-bar-43756",
+	"zoom": "sti-ImageCropper-zoom-f12b9",
+	"actions": "sti-ImageCropper-actions-f84ca",
+	"hint": "sti-ImageCropper-hint-52716"
+};
+export { ImageCropper_module_default as default };

package/dist/media/ImageCropper/cropGeometry.d.ts

@@ -0,0 +1,41 @@
+/**
+ * Görsel kırpmanın saf geometrisi: sabit kırpma penceresinin ardında görsel kaydırılır,
+ * yakınlaştırılır ve 90 derece adımlarla döndürülür. Bütün değerler sahne pikselidir; sonuç
+ * döndürülmüş görselin doğal piksellerindedir.
+ */
+export type CropRotation = 0 | 90 | 180 | 270;
+export interface CropArea {
+  /** Döndürülmüş görselin doğal piksellerinde sol üst köşe ve boyut. */
+  x: number;
+  y: number;
+  width: number;
+  height: number;
+  rotation: CropRotation;
+}
+export interface Size {
+  width: number;
+  height: number;
+}
+export interface Point {
+  x: number;
+  y: number;
+}
+/** Döndürmeden sonraki doğal boyut (90 ve 270'te en ve boy yer değiştirir). */
+export declare function rotatedSize(natural: Size, rotation: CropRotation): Size;
+/** Sahne içinde ortalı, `aspect` oranlı, kenarlardan `inset` oranında içeride kırpma penceresi. */
+export declare function cropWindow(stage: Size, aspect: number, inset?: number): Size;
+/** Yakınlaştırma 1'de görselin pencereyi tam örttüğü ölçek. */
+export declare function coverScale(image: Size, window: Size): number;
+/** Kaydırmayı, görsel pencereyi her zaman örtecek biçimde sınırlar. */
+export declare function clampOffset(offset: Point, image: Size, window: Size, scale: number): Point;
+/** Pencerenin görseldeki karşılığı (döndürülmüş görselin doğal pikselleri, tam sayıya yuvarlı). */
+export declare function areaOf(image: Size, window: Size, scale: number, offset: Point, rotation: CropRotation): CropArea;
+/**
+ * Kırpılan bölgeyi tuvalde çizer ve Blob olarak döndürür (tarayıcıda). `maxWidth` verilirse sonuç
+ * oranı korunarak küçültülür. Görsel aynı kaynaktan ya da CORS izinli olmalıdır.
+ */
+export declare function cropToBlob(src: string, area: CropArea, { type, quality, maxWidth }?: {
+  type?: string;
+  quality?: number;
+  maxWidth?: number;
+}): Promise<Blob>;

package/dist/media/ImageCropper/cropGeometry.js

@@ -0,0 +1,79 @@
+// src/media/ImageCropper/cropGeometry.ts
+/** Döndürmeden sonraki doğal boyut (90 ve 270'te en ve boy yer değiştirir). */
+function rotatedSize(natural, rotation) {
+	return rotation === 90 || rotation === 270 ? {
+		width: natural.height,
+		height: natural.width
+	} : natural;
+}
+/** Sahne içinde ortalı, `aspect` oranlı, kenarlardan `inset` oranında içeride kırpma penceresi. */
+function cropWindow(stage, aspect, inset = .88) {
+	const maxW = stage.width * inset;
+	const maxH = stage.height * inset;
+	return maxW / maxH > aspect ? {
+		width: maxH * aspect,
+		height: maxH
+	} : {
+		width: maxW,
+		height: maxW / aspect
+	};
+}
+/** Yakınlaştırma 1'de görselin pencereyi tam örttüğü ölçek. */
+function coverScale(image, window) {
+	return Math.max(window.width / image.width, window.height / image.height);
+}
+/** Kaydırmayı, görsel pencereyi her zaman örtecek biçimde sınırlar. */
+function clampOffset(offset, image, window, scale) {
+	const maxX = Math.max(0, (image.width * scale - window.width) / 2);
+	const maxY = Math.max(0, (image.height * scale - window.height) / 2);
+	return {
+		x: Math.min(maxX, Math.max(-maxX, offset.x)) + 0,
+		y: Math.min(maxY, Math.max(-maxY, offset.y)) + 0
+	};
+}
+/** Pencerenin görseldeki karşılığı (döndürülmüş görselin doğal pikselleri, tam sayıya yuvarlı). */
+function areaOf(image, window, scale, offset, rotation) {
+	const width = window.width / scale;
+	const height = window.height / scale;
+	const x = (image.width * scale - window.width) / 2 / scale - offset.x / scale;
+	const y = (image.height * scale - window.height) / 2 / scale - offset.y / scale;
+	const round = (v) => Math.max(0, Math.round(v));
+	return {
+		x: round(x),
+		y: round(y),
+		width: Math.min(round(width), image.width),
+		height: Math.min(round(height), image.height),
+		rotation
+	};
+}
+/**
+* Kırpılan bölgeyi tuvalde çizer ve Blob olarak döndürür (tarayıcıda). `maxWidth` verilirse sonuç
+* oranı korunarak küçültülür. Görsel aynı kaynaktan ya da CORS izinli olmalıdır.
+*/
+async function cropToBlob(src, area, { type = "image/jpeg", quality = .92, maxWidth } = {}) {
+	const img = new Image();
+	img.crossOrigin = "anonymous";
+	img.src = src;
+	await img.decode();
+	const rot = rotatedSize({
+		width: img.naturalWidth,
+		height: img.naturalHeight
+	}, area.rotation);
+	const rotated = document.createElement("canvas");
+	rotated.width = rot.width;
+	rotated.height = rot.height;
+	const rc = rotated.getContext("2d");
+	if (!rc) throw new Error("canvas");
+	rc.translate(rot.width / 2, rot.height / 2);
+	rc.rotate(area.rotation * Math.PI / 180);
+	rc.drawImage(img, -img.naturalWidth / 2, -img.naturalHeight / 2);
+	const ratio = maxWidth && area.width > maxWidth ? maxWidth / area.width : 1;
+	const out = document.createElement("canvas");
+	out.width = Math.round(area.width * ratio);
+	out.height = Math.round(area.height * ratio);
+	const oc = out.getContext("2d");
+	if (!oc) throw new Error("canvas");
+	oc.drawImage(rotated, area.x, area.y, area.width, area.height, 0, 0, out.width, out.height);
+	return new Promise((resolve, reject) => out.toBlob((b) => b ? resolve(b) : reject(/* @__PURE__ */ new Error("toBlob")), type, quality));
+}
+export { areaOf, clampOffset, coverScale, cropToBlob, cropWindow, rotatedSize };

package/dist/media/MediaCard/MediaCard.js

@@ -2,7 +2,7 @@
 import { useFormatter, useMessages } from "../../provider/UIProvider.js";
 import { template } from "../../text/text.js";
 import { FileTextIcon } from "../../icons/generated/FileTextIcon.js";
-import { Checkbox } from "../../components/Checkbox/Checkbox.js";
+import { Checkbox as Checkbox$1 } from "../../components/Checkbox/Checkbox.js";
 import { FileIcon } from "../../icons/generated/FileIcon.js";
 import { ImageIcon } from "../../icons/generated/ImageIcon.js";
 import { VideoIcon } from "../../icons/generated/VideoIcon.js";
@@ -87,7 +87,7 @@ function MediaCard({ kind, title, thumbnail, meta, duration, href, isSelectable,
 					}) : null,
 					selectable ? /* @__PURE__ */ jsx("span", {
 						className: MediaCard_module_default.select,
-						children: /* @__PURE__ */ jsx(Checkbox, {
+						children: /* @__PURE__ */ jsx(Checkbox$1, {
 							size: "md",
 							"aria-label": template(t.mediaSelectItem, { title }),
 							isSelected: selected,