@stisocial/ui 0.2.0 → 0.3.0

package/dist/media/ZoomableImage/ZoomableImage.css

@@ -0,0 +1,122 @@
+@layer sti.reset, sti.tokens, sti.base, sti.components, sti.variants, sti.utilities;
+@layer sti.components {
+  .sti-ZoomableImage-root-ba32d {
+    --sti-zoom-ratio: 16 / 9;
+    box-sizing: border-box;
+    border: var(--sti-border-width) solid var(--sti-border-subtle);
+    border-radius: var(--sti-radius-lg);
+    background: var(--sti-bg-surface);
+    inline-size: 100%;
+    min-inline-size: 0;
+    color: var(--sti-fg);
+    font-family: var(--sti-font-text);
+    flex-direction: column;
+    display: flex;
+    overflow: hidden;
+  }
+
+  .sti-ZoomableImage-root-ba32d[data-ratio="4/3"] {
+    --sti-zoom-ratio: 4 / 3;
+  }
+
+  .sti-ZoomableImage-root-ba32d[data-ratio="1/1"] {
+    --sti-zoom-ratio: 1 / 1;
+  }
+
+  .sti-ZoomableImage-root-ba32d[data-ratio="3/4"] {
+    --sti-zoom-ratio: 3 / 4;
+  }
+
+  .sti-ZoomableImage-stage-85efe {
+    aspect-ratio: var(--sti-zoom-ratio);
+    background: var(--sti-bg-subtle);
+    cursor: zoom-in;
+    touch-action: pan-y;
+    outline: none;
+    position: relative;
+    overflow: hidden;
+  }
+
+  .sti-ZoomableImage-stage-85efe[data-zoomed] {
+    cursor: grab;
+    touch-action: none;
+  }
+
+  .sti-ZoomableImage-stage-85efe[data-zoomed]:active {
+    cursor: grabbing;
+  }
+
+  .sti-ZoomableImage-stage-85efe:focus-visible {
+    outline: var(--sti-focus-ring-width) solid var(--sti-focus-ring);
+    outline-offset: calc(var(--sti-focus-ring-width) * -1);
+  }
+
+  .sti-ZoomableImage-image-9e073 {
+    --sti-zoom: 1;
+    --sti-zoom-x: 0;
+    --sti-zoom-y: 0;
+    object-fit: contain;
+    block-size: 100%;
+    inline-size: 100%;
+    transform: translate(var(--sti-zoom-x), var(--sti-zoom-y)) scale(var(--sti-zoom));
+    transition: transform var(--sti-duration-fast) var(--sti-ease-out);
+    -webkit-user-select: none;
+    user-select: none;
+    pointer-events: none;
+    display: block;
+  }
+
+  .sti-ZoomableImage-stage-85efe[data-zoomed]:active .sti-ZoomableImage-image-9e073 {
+    transition: none;
+  }
+
+  .sti-ZoomableImage-bar-43c48 {
+    justify-content: space-between;
+    align-items: center;
+    gap: var(--sti-space-2);
+    padding: var(--sti-space-2) var(--sti-space-2) var(--sti-space-2) var(--sti-space-4);
+    border-block-start: var(--sti-border-width) solid var(--sti-border-subtle);
+    flex-wrap: wrap;
+    display: flex;
+  }
+
+  .sti-ZoomableImage-hint-55323 {
+    min-inline-size: 0;
+    color: var(--sti-fg-muted);
+    font-size: var(--sti-font-size-xs);
+    line-height: var(--sti-line-height-xs);
+    flex: 14rem;
+  }
+
+  .sti-ZoomableImage-tools-79a4d {
+    align-items: center;
+    gap: var(--sti-space-1);
+    flex: none;
+    display: flex;
+  }
+
+  .sti-ZoomableImage-level-fa640 {
+    min-inline-size: 3.5rem;
+    color: var(--sti-fg);
+    font-family: var(--sti-font-numeric);
+    font-size: var(--sti-font-size-sm);
+    font-variant-numeric: tabular-nums;
+    text-align: center;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .sti-ZoomableImage-image-9e073 {
+      transition: none;
+    }
+  }
+
+  @media (forced-colors: active) {
+    .sti-ZoomableImage-root-ba32d {
+      border-color: canvastext;
+    }
+
+    .sti-ZoomableImage-stage-85efe:focus-visible {
+      outline-color: highlight;
+    }
+  }
+}

package/dist/media/ZoomableImage/ZoomableImage.d.ts

@@ -0,0 +1,32 @@
+export interface ZoomableImageProps {
+  src: string;
+  /** Görselin metin karşılığı (zorunlu). */
+  alt: string;
+  /** Görüntüleme alanının en-boy oranı. */
+  aspectRatio?: "16/9" | "4/3" | "1/1" | "3/4";
+  /** En büyük yakınlaştırma (kat). */
+  maxZoom?: number;
+  /** Denetimli yakınlaştırma (1 = sığdır). */
+  zoom?: number;
+  defaultZoom?: number;
+  onZoomChange?: (zoom: number) => void;
+  /** Bölgenin adı; verilmezse "Yakınlaştırılabilir görsel: <alt>". */
+  label?: string;
+  className?: string;
+  id?: string;
+}
+interface Pan {
+  x: number;
+  y: number;
+}
+/** Kaydırmayı görselin sahneden taşan kısmıyla sınırlar (kenar boşluk kalmaz). */
+export declare function clampPan(pan: Pan, zoom: number, width: number, height: number): Pan;
+/**
+ * Sayfa içinde yakınlaştırılıp kaydırılabilen görsel (tasarım provası, kat planı, harita): araç
+ * çubuğunda uzaklaştırma, yakınlaştırma oranı, yakınlaştırma ve sığdırma. Fare ile sürükleyerek
+ * kaydırma, çift tıklamayla noktaya yakınlaştırma, Ctrl + tekerlek (ya da dokunmatik yüzey kıstırması)
+ * ve iki parmak kıstırması; klavyede + / − / 0 ve oklar. Tekerlek tek başına sayfayı kaydırır.
+ * Dönüşüm CSSOM ile yazılır (CSP uyumlu).
+ */
+export declare function ZoomableImage({ src, alt, aspectRatio, maxZoom, zoom, defaultZoom, onZoomChange, label, className, id }: ZoomableImageProps): import("react").JSX.Element;
+export {};

package/dist/media/ZoomableImage/ZoomableImage.js

@@ -0,0 +1,278 @@
+"use client";
+import { useMessages } from "../../provider/UIProvider.js";
+import { template } from "../../text/text.js";
+import { IconButton } from "../../components/IconButton/IconButton.js";
+import { MaximizeIcon } from "../../icons/generated/MaximizeIcon.js";
+import { ZoomInIcon } from "../../icons/generated/ZoomInIcon.js";
+import { ZoomOutIcon } from "../../icons/generated/ZoomOutIcon.js";
+import ZoomableImage_module_default from "./ZoomableImage.module.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useRef, useState } from "react";
+// src/media/ZoomableImage/ZoomableImage.tsx
+const STEP = 1.25;
+const PAN_STEP = 48;
+/** Kaydırmayı görselin sahneden taşan kısmıyla sınırlar (kenar boşluk kalmaz). */
+function clampPan(pan, zoom, width, height) {
+	const maxX = (zoom - 1) * width / 2;
+	const maxY = (zoom - 1) * height / 2;
+	return {
+		x: Math.min(maxX, Math.max(-maxX, pan.x)) + 0,
+		y: Math.min(maxY, Math.max(-maxY, pan.y)) + 0
+	};
+}
+/**
+* Sayfa içinde yakınlaştırılıp kaydırılabilen görsel (tasarım provası, kat planı, harita): araç
+* çubuğunda uzaklaştırma, yakınlaştırma oranı, yakınlaştırma ve sığdırma. Fare ile sürükleyerek
+* kaydırma, çift tıklamayla noktaya yakınlaştırma, Ctrl + tekerlek (ya da dokunmatik yüzey kıstırması)
+* ve iki parmak kıstırması; klavyede + / − / 0 ve oklar. Tekerlek tek başına sayfayı kaydırır.
+* Dönüşüm CSSOM ile yazılır (CSP uyumlu).
+*/
+function ZoomableImage({ src, alt, aspectRatio = "16/9", maxZoom = 4, zoom, defaultZoom = 1, onZoomChange, label, className, id }) {
+	const t = useMessages();
+	const stage = useRef(null);
+	const [inner, setInner] = useState(defaultZoom);
+	const level = Math.min(maxZoom, Math.max(1, zoom ?? inner));
+	const [pan, setPan] = useState({
+		x: 0,
+		y: 0
+	});
+	const drag = useRef(null);
+	const pointers = useRef(/* @__PURE__ */ new Map());
+	const pinch = useRef(null);
+	const size = useCallback(() => {
+		const el = stage.current;
+		return el ? {
+			w: el.clientWidth,
+			h: el.clientHeight
+		} : {
+			w: 0,
+			h: 0
+		};
+	}, []);
+	/** Yakınlaştırmayı değiştirir; `at` sahne merkezine göre nokta (o nokta yerinde kalır). */
+	const setZoom = useCallback((next, at) => {
+		const z = Math.min(maxZoom, Math.max(1, Math.round(next * 100) / 100));
+		const { w, h } = size();
+		setPan((p) => {
+			const point = at ?? {
+				x: 0,
+				y: 0
+			};
+			const ratio = z / level;
+			const moved = {
+				x: point.x - (point.x - p.x) * ratio,
+				y: point.y - (point.y - p.y) * ratio
+			};
+			return clampPan(z === 1 ? {
+				x: 0,
+				y: 0
+			} : moved, z, w, h);
+		});
+		if (zoom === void 0) setInner(z);
+		onZoomChange?.(z);
+	}, [
+		level,
+		maxZoom,
+		onZoomChange,
+		zoom,
+		size
+	]);
+	useEffect(() => {
+		const { w, h } = size();
+		setPan((p) => clampPan(p, level, w, h));
+	}, [level, size]);
+	const place = useCallback((el) => {
+		if (!el) return;
+		el.style.setProperty("--sti-zoom", String(level));
+		el.style.setProperty("--sti-zoom-x", `${pan.x}px`);
+		el.style.setProperty("--sti-zoom-y", `${pan.y}px`);
+		el.dataset.placed = "";
+	}, [
+		level,
+		pan.x,
+		pan.y
+	]);
+	const local = (clientX, clientY) => {
+		const r = stage.current?.getBoundingClientRect();
+		if (!r) return {
+			x: 0,
+			y: 0
+		};
+		return {
+			x: clientX - r.left - r.width / 2,
+			y: clientY - r.top - r.height / 2
+		};
+	};
+	const onWheel = (e) => {
+		if (!e.ctrlKey && !e.metaKey) return;
+		e.preventDefault();
+		setZoom(level * (e.deltaY < 0 ? STEP : 1 / STEP), local(e.clientX, e.clientY));
+	};
+	useEffect(() => {
+		const el = stage.current;
+		if (!el) return;
+		const stop = (e) => {
+			if (e.ctrlKey || e.metaKey) e.preventDefault();
+		};
+		el.addEventListener("wheel", stop, { passive: false });
+		return () => el.removeEventListener("wheel", stop);
+	}, []);
+	const onPointerDown = (e) => {
+		pointers.current.set(e.pointerId, {
+			x: e.clientX,
+			y: e.clientY
+		});
+		if (pointers.current.size === 2) {
+			const [a, b] = [...pointers.current.values()];
+			if (a && b) pinch.current = {
+				dist: Math.hypot(a.x - b.x, a.y - b.y),
+				zoom: level
+			};
+			drag.current = null;
+			return;
+		}
+		if (level === 1) return;
+		e.currentTarget.setPointerCapture(e.pointerId);
+		drag.current = {
+			id: e.pointerId,
+			x: e.clientX,
+			y: e.clientY,
+			pan
+		};
+	};
+	const onPointerMove = (e) => {
+		if (pointers.current.has(e.pointerId)) pointers.current.set(e.pointerId, {
+			x: e.clientX,
+			y: e.clientY
+		});
+		if (pinch.current && pointers.current.size === 2) {
+			const [a, b] = [...pointers.current.values()];
+			if (a && b) {
+				const dist = Math.hypot(a.x - b.x, a.y - b.y);
+				setZoom(pinch.current.zoom * (dist / pinch.current.dist), local((a.x + b.x) / 2, (a.y + b.y) / 2));
+			}
+			return;
+		}
+		const d = drag.current;
+		if (!d || d.id !== e.pointerId) return;
+		const { w, h } = size();
+		setPan(clampPan({
+			x: d.pan.x + e.clientX - d.x,
+			y: d.pan.y + e.clientY - d.y
+		}, level, w, h));
+	};
+	const onPointerEnd = (e) => {
+		pointers.current.delete(e.pointerId);
+		if (pointers.current.size < 2) pinch.current = null;
+		if (drag.current?.id === e.pointerId) drag.current = null;
+	};
+	const onKeyDown = (e) => {
+		const { w, h } = size();
+		const move = (dx, dy) => setPan((p) => clampPan({
+			x: p.x + dx,
+			y: p.y + dy
+		}, level, w, h));
+		switch (e.key) {
+			case "+":
+			case "=":
+				setZoom(level * STEP);
+				break;
+			case "-":
+			case "_":
+				setZoom(level / STEP);
+				break;
+			case "0":
+				setZoom(1);
+				break;
+			case "ArrowLeft":
+				if (level === 1) return;
+				move(PAN_STEP, 0);
+				break;
+			case "ArrowRight":
+				if (level === 1) return;
+				move(-48, 0);
+				break;
+			case "ArrowUp":
+				if (level === 1) return;
+				move(0, PAN_STEP);
+				break;
+			case "ArrowDown":
+				if (level === 1) return;
+				move(0, -48);
+				break;
+			default: return;
+		}
+		e.preventDefault();
+	};
+	const percent = Math.round(level * 100);
+	const name = label ?? template(t.mediaZoomableLabel, { alt });
+	return /* @__PURE__ */ jsxs("div", {
+		id,
+		className: [ZoomableImage_module_default.root, className].filter(Boolean).join(" "),
+		"data-ratio": aspectRatio,
+		children: [/* @__PURE__ */ jsx("div", {
+			ref: stage,
+			className: ZoomableImage_module_default.stage,
+			role: "group",
+			"aria-roledescription": t.mediaZoomableRole,
+			"aria-label": name,
+			"aria-describedby": `${id ?? "zoom"}-hint`,
+			tabIndex: 0,
+			"data-zoomed": level > 1 ? "" : void 0,
+			onWheel,
+			onDoubleClick: (e) => setZoom(level > 1 ? 1 : 2, local(e.clientX, e.clientY)),
+			onPointerDown,
+			onPointerMove,
+			onPointerUp: onPointerEnd,
+			onPointerCancel: onPointerEnd,
+			onKeyDown,
+			children: /* @__PURE__ */ jsx("img", {
+				ref: place,
+				className: ZoomableImage_module_default.image,
+				src,
+				alt,
+				draggable: false
+			})
+		}), /* @__PURE__ */ jsxs("div", {
+			className: ZoomableImage_module_default.bar,
+			children: [/* @__PURE__ */ jsx("span", {
+				id: `${id ?? "zoom"}-hint`,
+				className: ZoomableImage_module_default.hint,
+				children: t.mediaZoomableHint
+			}), /* @__PURE__ */ jsxs("div", {
+				className: ZoomableImage_module_default.tools,
+				role: "group",
+				"aria-label": t.mediaZoomableTools,
+				children: [
+					/* @__PURE__ */ jsx(IconButton, {
+						size: "sm",
+						label: t.mediaZoomOut,
+						icon: /* @__PURE__ */ jsx(ZoomOutIcon, {}),
+						isDisabled: level <= 1,
+						onPress: () => setZoom(level / STEP)
+					}),
+					/* @__PURE__ */ jsx("output", {
+						className: ZoomableImage_module_default.level,
+						"aria-live": "polite",
+						children: template(t.mediaZoomLevel, { percent })
+					}),
+					/* @__PURE__ */ jsx(IconButton, {
+						size: "sm",
+						label: t.mediaZoomIn,
+						icon: /* @__PURE__ */ jsx(ZoomInIcon, {}),
+						isDisabled: level >= maxZoom,
+						onPress: () => setZoom(level * STEP)
+					}),
+					/* @__PURE__ */ jsx(IconButton, {
+						size: "sm",
+						label: t.mediaZoomFit,
+						icon: /* @__PURE__ */ jsx(MaximizeIcon, {}),
+						isDisabled: level === 1,
+						onPress: () => setZoom(1)
+					})
+				]
+			})]
+		})]
+	});
+}
+export { ZoomableImage, clampPan };

package/dist/media/ZoomableImage/ZoomableImage.module.js

@@ -0,0 +1,12 @@
+import './ZoomableImage.css';
+// src/media/ZoomableImage/ZoomableImage.module.css
+var ZoomableImage_module_default = {
+	"root": "sti-ZoomableImage-root-ba32d",
+	"stage": "sti-ZoomableImage-stage-85efe",
+	"image": "sti-ZoomableImage-image-9e073",
+	"bar": "sti-ZoomableImage-bar-43c48",
+	"hint": "sti-ZoomableImage-hint-55323",
+	"tools": "sti-ZoomableImage-tools-79a4d",
+	"level": "sti-ZoomableImage-level-fa640"
+};
+export { ZoomableImage_module_default as default };

package/dist/media/_internal/transport/MediaTransport.css

@@ -1,12 +1,12 @@
 @layer sti.reset, sti.tokens, sti.base, sti.components, sti.variants, sti.utilities;
 @layer sti.components {
-  .sti-MediaTransport-frame-b473a {
+  .sti-MediaTransport-frame-50de2 {
     inline-size: 100%;
     min-inline-size: 0;
     container-type: inline-size;
   }
 
-  .sti-MediaTransport-root-a64c1 {
+  .sti-MediaTransport-root-f74aa {
     align-items: center;
     gap: var(--sti-space-1) var(--sti-space-2);
     box-sizing: border-box;
@@ -17,18 +17,18 @@
     display: flex;
   }
 
-  .sti-MediaTransport-buttons-c6a8b, .sti-MediaTransport-tools-98728 {
+  .sti-MediaTransport-buttons-c42d6, .sti-MediaTransport-tools-d0f8c {
     align-items: center;
     gap: var(--sti-space-1);
     flex: none;
     display: flex;
   }
 
-  .sti-MediaTransport-tools-98728 {
+  .sti-MediaTransport-tools-d0f8c {
     margin-inline-start: auto;
   }
 
-  .sti-MediaTransport-seek-665b4 {
+  .sti-MediaTransport-seek-345dd {
     align-items: center;
     gap: var(--sti-space-3);
     min-inline-size: 0;
@@ -37,7 +37,7 @@
     display: flex;
   }
 
-  .sti-MediaTransport-time-02a86 {
+  .sti-MediaTransport-time-785b7 {
     min-inline-size: 3.25ch;
     color: var(--sti-fg-muted);
     font-family: var(--sti-font-numeric);
@@ -48,41 +48,47 @@
     flex: none;
   }
 
-  .sti-MediaTransport-volume-31287 {
+  .sti-MediaTransport-volume-50eb3 {
     inline-size: 5rem;
     padding-inline: var(--sti-space-1);
     display: flex;
   }
 
-  .sti-MediaTransport-speed-8ce1f {
+  .sti-MediaTransport-speed-78156 {
     min-inline-size: 3.25rem;
     padding-inline: var(--sti-space-2);
     font-variant-numeric: tabular-nums;
   }
 
-  .sti-MediaTransport-toggle-a83a4 {
+  .sti-MediaTransport-toggle-a390c {
     border-radius: var(--sti-radius-pill);
     display: inline-flex;
   }
 
-  .sti-MediaTransport-toggle-a83a4[data-on] {
+  .sti-MediaTransport-toggle-a390c[data-on] {
     background: var(--sti-bg-accent-subtle);
     color: var(--sti-fg-accent-strong);
   }
 
   @container (width <= 30rem) {
-    .sti-MediaTransport-seek-665b4 {
+    .sti-MediaTransport-seek-345dd {
       flex-basis: 100%;
       order: -1;
     }
 
-    .sti-MediaTransport-volume-31287 {
+    .sti-MediaTransport-volume-50eb3 {
+      display: none;
+    }
+  }
+
+  @container (width <= 18rem) {
+    .sti-MediaTransport-skip-19aab {
       display: none;
     }
   }
 
   @media (forced-colors: active) {
-    .sti-MediaTransport-toggle-a83a4[data-on] {
+    .sti-MediaTransport-toggle-a390c[data-on] {
       outline: var(--sti-border-width-strong) solid Highlight;
       outline-offset: calc(var(--sti-border-width-strong) * -1);
     }

package/dist/media/_internal/transport/MediaTransport.js

@@ -1,14 +1,14 @@
 "use client";
 import { useFormatter, useMessages } from "../../../provider/UIProvider.js";
 import { template } from "../../../text/text.js";
-import { IconButton } from "../../../components/IconButton/IconButton.js";
 import { VisuallyHidden } from "../../../components/VisuallyHidden/VisuallyHidden.js";
 import { Button } from "../../../components/Button/Button.js";
+import { IconButton } from "../../../components/IconButton/IconButton.js";
+import { PauseIcon } from "../../../icons/generated/PauseIcon.js";
+import { PlayIcon } from "../../../icons/generated/PlayIcon.js";
 import { RefreshIcon } from "../../../icons/generated/RefreshIcon.js";
 import { MaximizeIcon } from "../../../icons/generated/MaximizeIcon.js";
 import { MinimizeIcon } from "../../../icons/generated/MinimizeIcon.js";
-import { PauseIcon } from "../../../icons/generated/PauseIcon.js";
-import { PlayIcon } from "../../../icons/generated/PlayIcon.js";
 import { CaptionsIcon, SkipBackIcon, SkipForwardIcon, VolumeIcon, VolumeLowIcon, VolumeMutedIcon } from "../icons.js";
 import { formatClock } from "../clock.js";
 import { Range } from "../range/Range.js";
@@ -73,11 +73,13 @@ function MediaTransport({ state, actions, size = "md", skip = 0, showVolume = tr
 						onPress: actions.toggle
 					}), skip > 0 ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(IconButton, {
 						size: buttonSize,
+						className: MediaTransport_module_default.skip,
 						label: template(t.mediaRewind, { seconds: skip }),
 						icon: /* @__PURE__ */ jsx(SkipBackIcon, {}),
 						onPress: () => actions.seekBy(-skip)
 					}), /* @__PURE__ */ jsx(IconButton, {
 						size: buttonSize,
+						className: MediaTransport_module_default.skip,
 						label: template(t.mediaForward, { seconds: skip }),
 						icon: /* @__PURE__ */ jsx(SkipForwardIcon, {}),
 						onPress: () => actions.seekBy(skip)

package/dist/media/_internal/transport/MediaTransport.module.js

@@ -1,14 +1,15 @@
 import './MediaTransport.css';
 // src/media/_internal/transport/MediaTransport.module.css
 var MediaTransport_module_default = {
-	"frame": "sti-MediaTransport-frame-b473a",
-	"root": "sti-MediaTransport-root-a64c1",
-	"buttons": "sti-MediaTransport-buttons-c6a8b",
-	"tools": "sti-MediaTransport-tools-98728",
-	"seek": "sti-MediaTransport-seek-665b4",
-	"time": "sti-MediaTransport-time-02a86",
-	"volume": "sti-MediaTransport-volume-31287",
-	"speed": "sti-MediaTransport-speed-8ce1f",
-	"toggle": "sti-MediaTransport-toggle-a83a4"
+	"frame": "sti-MediaTransport-frame-50de2",
+	"root": "sti-MediaTransport-root-f74aa",
+	"buttons": "sti-MediaTransport-buttons-c42d6",
+	"tools": "sti-MediaTransport-tools-d0f8c",
+	"seek": "sti-MediaTransport-seek-345dd",
+	"time": "sti-MediaTransport-time-785b7",
+	"volume": "sti-MediaTransport-volume-50eb3",
+	"speed": "sti-MediaTransport-speed-78156",
+	"toggle": "sti-MediaTransport-toggle-a390c",
+	"skip": "sti-MediaTransport-skip-19aab"
 };
 export { MediaTransport_module_default as default };

package/dist/media/_internal/url.js

@@ -14,12 +14,14 @@ function safeMediaUrl(src, base) {
 }
 const ABSOLUTE = /^([a-z][a-z0-9+.-]*:|\/\/)/i;
 /**
-* Adres sayfanın kendi kaynağından değilse true. Göreli adresler ve blob adresleri yereldir. Sayfanın
+* Adres sayfanın kendi kaynağından değilse true. Göreli, blob ve veri (`data:`) adresleri yereldir
+* (ağ isteği yapılmaz). Sayfanın
 * kaynağı bilinmiyorsa (sunucu çıktısı) mutlak adres üçüncü taraf sayılır: sunucu ve ilk istemci
 * çıktısı aynı kalır, kaynak bilindikten sonra aynı kaynaktaki adres serbest kalır.
 */
 function isThirdParty(src, pageOrigin) {
-	if (!ABSOLUTE.test(src) || src.toLowerCase().startsWith("blob:")) return false;
+	const lower = src.trim().toLowerCase();
+	if (!ABSOLUTE.test(src) || lower.startsWith("blob:") || lower.startsWith("data:")) return false;
 	const url = safeMediaUrl(src, pageOrigin ?? "https://localhost/");
 	if (!url) return true;
 	return pageOrigin === void 0 ? true : url.origin !== pageOrigin;

package/dist/media/index.d.ts

@@ -2,8 +2,17 @@ import { AudioPlayer, AudioPlayerProps, AudioSource } from "./AudioPlayer/AudioP
 import "./AudioPlayer/index.js";
 import { AudioWaveform, AudioWaveformProps } from "./AudioWaveform/AudioWaveform.js";
 import { computePeaks, loadWaveformPeaks } from "./AudioWaveform/peaks.js";
+import { Embed, EmbedAspectRatio, EmbedProps } from "./Embed/Embed.js";
+import { EmbedProvider, EmbedTarget, PROVIDER_HOST, PROVIDER_NAME, embedSrc, parseEmbedUrl, watchUrl } from "./Embed/embedUrl.js";
+import { CompareImage, ImageCompare, ImageCompareProps } from "./ImageCompare/ImageCompare.js";
+import { CropArea, CropRotation, Point, Size, areaOf, clampOffset, coverScale, cropToBlob, cropWindow, rotatedSize } from "./ImageCropper/cropGeometry.js";
+import { ImageCropper, ImageCropperProps } from "./ImageCropper/ImageCropper.js";
 import { MediaCard, MediaCardProps, MediaKind } from "./MediaCard/MediaCard.js";
 import "./MediaCard/index.js";
+import { MockupDevice, MockupFrame, MockupFrameProps, displayUrl } from "./MockupFrame/MockupFrame.js";
+import "./MockupFrame/index.js";
+import { PdfViewer, PdfViewerProps } from "./PdfViewer/PdfViewer.js";
 import { VideoAspectRatio, VideoCaptionTrack, VideoPlayer, VideoPlayerProps, VideoSource } from "./VideoPlayer/VideoPlayer.js";
 import { VideoThumbnail, VideoThumbnailProps, VideoThumbnailRatio } from "./VideoThumbnail/VideoThumbnail.js";
-export { AudioPlayer, AudioPlayerProps, AudioSource, AudioWaveform, AudioWaveformProps, MediaCard, MediaCardProps, MediaKind, VideoAspectRatio, VideoCaptionTrack, VideoPlayer, VideoPlayerProps, VideoSource, VideoThumbnail, VideoThumbnailProps, VideoThumbnailRatio, computePeaks, loadWaveformPeaks };
+import { ZoomableImage, ZoomableImageProps, clampPan } from "./ZoomableImage/ZoomableImage.js";
+export { AudioPlayer, AudioPlayerProps, AudioSource, AudioWaveform, AudioWaveformProps, CompareImage, CropArea, CropRotation, Embed, EmbedAspectRatio, EmbedProps, EmbedProvider, EmbedTarget, ImageCompare, ImageCompareProps, ImageCropper, ImageCropperProps, MediaCard, MediaCardProps, MediaKind, MockupDevice, MockupFrame, MockupFrameProps, PROVIDER_HOST, PROVIDER_NAME, PdfViewer, PdfViewerProps, Point, Size, VideoAspectRatio, VideoCaptionTrack, VideoPlayer, VideoPlayerProps, VideoSource, VideoThumbnail, VideoThumbnailProps, VideoThumbnailRatio, ZoomableImage, ZoomableImageProps, areaOf, clampOffset, clampPan, computePeaks, coverScale, cropToBlob, cropWindow, displayUrl, embedSrc, loadWaveformPeaks, parseEmbedUrl, rotatedSize, watchUrl };

package/dist/media/index.js

@@ -1,7 +1,15 @@
 import { AudioPlayer } from "./AudioPlayer/AudioPlayer.js";
 import { AudioWaveform } from "./AudioWaveform/AudioWaveform.js";
 import { computePeaks, loadWaveformPeaks } from "./AudioWaveform/peaks.js";
+import { PROVIDER_HOST, PROVIDER_NAME, embedSrc, parseEmbedUrl, watchUrl } from "./Embed/embedUrl.js";
+import { Embed } from "./Embed/Embed.js";
+import { ImageCompare } from "./ImageCompare/ImageCompare.js";
+import { areaOf, clampOffset, coverScale, cropToBlob, cropWindow, rotatedSize } from "./ImageCropper/cropGeometry.js";
+import { ImageCropper } from "./ImageCropper/ImageCropper.js";
 import { MediaCard } from "./MediaCard/MediaCard.js";
+import { MockupFrame, displayUrl } from "./MockupFrame/MockupFrame.js";
+import { PdfViewer } from "./PdfViewer/PdfViewer.js";
 import { VideoPlayer } from "./VideoPlayer/VideoPlayer.js";
 import { VideoThumbnail } from "./VideoThumbnail/VideoThumbnail.js";
-export { AudioPlayer, AudioWaveform, MediaCard, VideoPlayer, VideoThumbnail, computePeaks, loadWaveformPeaks };
+import { ZoomableImage, clampPan } from "./ZoomableImage/ZoomableImage.js";
+export { AudioPlayer, AudioWaveform, Embed, ImageCompare, ImageCropper, MediaCard, MockupFrame, PROVIDER_HOST, PROVIDER_NAME, PdfViewer, VideoPlayer, VideoThumbnail, ZoomableImage, areaOf, clampOffset, clampPan, computePeaks, coverScale, cropToBlob, cropWindow, displayUrl, embedSrc, loadWaveformPeaks, parseEmbedUrl, rotatedSize, watchUrl };