@stisocial/ui 0.1.0 → 0.2.1

package/dist/media/_internal/range/Range.css

@@ -0,0 +1,187 @@
+@layer sti.reset, sti.tokens, sti.base, sti.components, sti.variants, sti.utilities;
+@layer sti.components {
+  .sti-Range-root-1e9da {
+    --sti-range-thumb: 1rem;
+    --sti-range-rail: 4px;
+    box-sizing: border-box;
+    block-size: var(--sti-range-thumb);
+    min-inline-size: 0;
+    margin-inline: calc(var(--sti-range-thumb) / 2);
+    cursor: pointer;
+    touch-action: none;
+    outline: none;
+    flex: auto;
+    display: block;
+    position: relative;
+  }
+
+  .sti-Range-root-1e9da[data-size="sm"] {
+    --sti-range-thumb: .75rem;
+    --sti-range-rail: 3px;
+  }
+
+  .sti-Range-root-1e9da[data-size="lg"] {
+    --sti-range-thumb: 1.25rem;
+    --sti-range-rail: 6px;
+  }
+
+  .sti-Range-rail-45c60, .sti-Range-buffer-9de02, .sti-Range-fill-52d18 {
+    block-size: var(--sti-range-rail);
+    border-radius: var(--sti-radius-pill);
+    position: absolute;
+    inset-block-start: 50%;
+    transform: translateY(-50%);
+  }
+
+  .sti-Range-rail-45c60 {
+    inset-inline: calc(var(--sti-range-thumb) / -2);
+    background: var(--sti-border-control);
+  }
+
+  .sti-Range-buffer-9de02 {
+    inline-size: calc(var(--sti-range-buffer, 0%) + var(--sti-range-thumb) / 2);
+    background: var(--sti-fg-muted);
+    opacity: .45;
+    inset-inline-start: calc(var(--sti-range-thumb) / -2);
+  }
+
+  .sti-Range-fill-52d18 {
+    inline-size: calc(var(--sti-range-pos, 0%) + var(--sti-range-thumb) / 2);
+    background: var(--sti-fill-accent);
+    inset-inline-start: calc(var(--sti-range-thumb) / -2);
+  }
+
+  .sti-Range-thumb-cd00a {
+    box-sizing: border-box;
+    inline-size: var(--sti-range-thumb);
+    block-size: var(--sti-range-thumb);
+    border: var(--sti-border-width-strong) solid var(--sti-fill-accent);
+    border-radius: var(--sti-radius-pill);
+    background: var(--sti-bg-canvas);
+    box-shadow: var(--sti-shadow-sm);
+    transition: box-shadow var(--sti-duration-fast) var(--sti-ease-snap),
+      transform var(--sti-duration-fast) var(--sti-ease-snap);
+    position: absolute;
+    inset-block-start: 50%;
+    inset-inline-start: var(--sti-range-pos, 0%);
+    transform: translate(-50%, -50%);
+  }
+
+  .sti-Range-thumb-cd00a:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
+    transform: translate(50%, -50%);
+  }
+
+  .sti-Range-root-1e9da[data-bare] {
+    block-size: auto;
+    margin-inline: 0;
+  }
+
+  .sti-Range-root-1e9da[data-bare] .sti-Range-thumb-cd00a {
+    border-radius: var(--sti-radius-pill);
+    background: var(--sti-fill-accent);
+    block-size: auto;
+    inline-size: 2px;
+    box-shadow: none;
+    border: 0;
+    inset-block: 0;
+    transform: translateX(-50%);
+  }
+
+  .sti-Range-root-1e9da[data-bare] .sti-Range-thumb-cd00a:is(:lang(ae), :lang(ar), :lang(arc), :lang(bcc), :lang(bqi), :lang(ckb), :lang(dv), :lang(fa), :lang(glk), :lang(he), :lang(ku), :lang(mzn), :lang(nqo), :lang(pnb), :lang(ps), :lang(sd), :lang(ug), :lang(ur), :lang(yi)) {
+    transform: translateX(50%);
+  }
+
+  .sti-Range-root-1e9da[data-bare][data-thumb="grip"] .sti-Range-thumb-cd00a {
+    inline-size: var(--sti-border-width-strong);
+    background: var(--sti-bg-canvas);
+    box-shadow: var(--sti-shadow-sm);
+  }
+
+  .sti-Range-root-1e9da[data-bare][data-thumb="grip"] .sti-Range-thumb-cd00a:after {
+    box-sizing: border-box;
+    inline-size: var(--sti-control-h-sm);
+    block-size: var(--sti-control-h-sm);
+    border: var(--sti-border-width) solid var(--sti-border-control);
+    border-radius: var(--sti-radius-pill);
+    background: var(--sti-bg-canvas);
+    box-shadow: var(--sti-shadow-md);
+    content: "";
+    position: absolute;
+    inset-block-start: 50%;
+    inset-inline-start: 50%;
+    transform: translate(-50%, -50%);
+  }
+
+  .sti-Range-root-1e9da[data-bare]:focus-visible .sti-Range-thumb-cd00a {
+    outline-offset: var(--sti-space-1);
+  }
+
+  .sti-Range-root-1e9da[data-bare][data-dragging] .sti-Range-thumb-cd00a, .sti-Range-root-1e9da[data-bare]:not([data-disabled]):hover .sti-Range-thumb-cd00a {
+    box-shadow: none;
+  }
+
+  @media (pointer: coarse) {
+    .sti-Range-root-1e9da:after {
+      inset-block: calc((var(--sti-control-h-md) - var(--sti-range-thumb)) / -2);
+      inset-inline: calc(var(--sti-range-thumb) / -2);
+      content: "";
+      position: absolute;
+    }
+  }
+
+  @media (hover: hover) {
+    .sti-Range-root-1e9da:not([data-disabled]):hover .sti-Range-thumb-cd00a {
+      box-shadow: var(--sti-shadow-sm),
+        0 0 0 6px color-mix(in oklab, var(--sti-fill-accent) 18%, transparent);
+    }
+  }
+
+  .sti-Range-root-1e9da[data-dragging] .sti-Range-thumb-cd00a {
+    box-shadow: var(--sti-shadow-sm),
+      0 0 0 8px color-mix(in oklab, var(--sti-fill-accent) 22%, transparent);
+  }
+
+  .sti-Range-root-1e9da:focus-visible .sti-Range-thumb-cd00a {
+    outline: var(--sti-focus-ring-width) solid var(--sti-focus-ring);
+    outline-offset: var(--sti-focus-ring-offset);
+  }
+
+  .sti-Range-root-1e9da[data-fill="none"] .sti-Range-rail-45c60 {
+    background: none;
+  }
+
+  .sti-Range-root-1e9da[data-disabled] {
+    cursor: not-allowed;
+    opacity: var(--sti-opacity-disabled);
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .sti-Range-thumb-cd00a {
+      transition: none;
+    }
+  }
+
+  @media (forced-colors: active) {
+    .sti-Range-rail-45c60 {
+      background: canvastext;
+    }
+
+    .sti-Range-fill-52d18 {
+      background: highlight;
+    }
+
+    .sti-Range-buffer-9de02 {
+      opacity: 1;
+      background: graytext;
+    }
+
+    .sti-Range-thumb-cd00a {
+      background: canvas;
+      border-color: highlight;
+    }
+
+    .sti-Range-root-1e9da:focus-visible .sti-Range-thumb-cd00a {
+      outline-color: highlight;
+    }
+  }
+}

package/dist/media/_internal/range/Range.js

@@ -0,0 +1,130 @@
+"use client";
+import { clamp } from "../clock.js";
+import Range_module_default from "./Range.module.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useRef } from "react";
+// src/media/_internal/range/Range.tsx
+/**
+* Medya bileşenlerinin ortak kaydırıcısı (APG Slider): oklar adım, PageUp/PageDown ve Shift+ok büyük
+* adım, Home/End uçlar; fare, dokunma ve kalem ile sürüklenir. Sağdan sola yazımda yön tersine döner.
+* Konum CSSOM ile (`--sti-range-pos`) yazılır; satır içi stil yoktur (CSP).
+*/
+function Range({ label, value, min = 0, max, step, largeStep, valueText, buffered, fill = "start", size = "md", track, thumb = "dot", isDisabled, onChange, onChangeEnd, className, id, "aria-describedby": describedBy }) {
+	const ref = useRef(null);
+	const dragging = useRef(false);
+	const span = max - min;
+	const small = step ?? span / 100;
+	const big = largeStep ?? span / 10;
+	const safe = clamp(Number.isFinite(value) ? value : min, min, max);
+	const ratio = span > 0 ? (safe - min) / span : 0;
+	const bufferRatio = buffered === void 0 ? 0 : clamp(buffered, 0, 1);
+	const at = (e) => {
+		const el = ref.current;
+		if (!el) return safe;
+		const rect = el.getBoundingClientRect();
+		const rtl = getComputedStyle(el).direction === "rtl";
+		const raw = rect.width > 0 ? (e.clientX - rect.left) / rect.width : 0;
+		return min + clamp(rtl ? 1 - raw : raw, 0, 1) * span;
+	};
+	const onPointerDown = (e) => {
+		if (isDisabled || e.pointerType === "mouse" && e.button !== 0) return;
+		dragging.current = true;
+		e.currentTarget.setPointerCapture(e.pointerId);
+		e.currentTarget.focus({ preventScroll: true });
+		e.currentTarget.setAttribute("data-dragging", "");
+		onChange(at(e));
+	};
+	const onPointerMove = (e) => {
+		if (dragging.current) onChange(at(e));
+	};
+	const end = (e) => {
+		if (!dragging.current) return;
+		dragging.current = false;
+		e.currentTarget.removeAttribute("data-dragging");
+		onChangeEnd?.(at(e));
+	};
+	const onKeyDown = (e) => {
+		if (isDisabled || e.altKey || e.ctrlKey || e.metaKey) return;
+		const rtl = getComputedStyle(e.currentTarget).direction === "rtl";
+		const amount = e.shiftKey ? big : small;
+		let next;
+		switch (e.key) {
+			case "ArrowRight":
+				next = safe + (rtl ? -amount : amount);
+				break;
+			case "ArrowLeft":
+				next = safe + (rtl ? amount : -amount);
+				break;
+			case "ArrowUp":
+				next = safe + amount;
+				break;
+			case "ArrowDown":
+				next = safe - amount;
+				break;
+			case "PageUp":
+				next = safe + big;
+				break;
+			case "PageDown":
+				next = safe - big;
+				break;
+			case "Home":
+				next = min;
+				break;
+			case "End":
+				next = max;
+				break;
+			default: return;
+		}
+		e.preventDefault();
+		e.stopPropagation();
+		const v = clamp(next, min, max);
+		onChange(v);
+		onChangeEnd?.(v);
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		id,
+		ref: (el) => {
+			ref.current = el;
+			el?.style.setProperty("--sti-range-pos", `${ratio * 100}%`);
+			el?.style.setProperty("--sti-range-buffer", `${bufferRatio * 100}%`);
+		},
+		role: "slider",
+		tabIndex: isDisabled ? -1 : 0,
+		"aria-label": label,
+		"aria-valuemin": min,
+		"aria-valuemax": max,
+		"aria-valuenow": Number(safe.toFixed(3)),
+		"aria-valuetext": valueText,
+		"aria-disabled": isDisabled || void 0,
+		"aria-describedby": describedBy,
+		className: [Range_module_default.root, className].filter(Boolean).join(" "),
+		"data-size": size,
+		"data-fill": fill,
+		"data-thumb": thumb,
+		"data-bare": track === void 0 ? void 0 : "",
+		"data-disabled": isDisabled ? "" : void 0,
+		onPointerDown,
+		onPointerMove,
+		onPointerUp: end,
+		onPointerCancel: end,
+		onKeyDown,
+		children: [track === void 0 ? /* @__PURE__ */ jsxs(Fragment, { children: [
+			/* @__PURE__ */ jsx("span", {
+				className: Range_module_default.rail,
+				"aria-hidden": "true"
+			}),
+			buffered === void 0 ? null : /* @__PURE__ */ jsx("span", {
+				className: Range_module_default.buffer,
+				"aria-hidden": "true"
+			}),
+			fill === "start" ? /* @__PURE__ */ jsx("span", {
+				className: Range_module_default.fill,
+				"aria-hidden": "true"
+			}) : null
+		] }) : track, /* @__PURE__ */ jsx("span", {
+			className: Range_module_default.thumb,
+			"aria-hidden": "true"
+		})]
+	});
+}
+export { Range };

package/dist/media/_internal/range/Range.module.js

@@ -0,0 +1,10 @@
+import './Range.css';
+// src/media/_internal/range/Range.module.css
+var Range_module_default = {
+	"root": "sti-Range-root-1e9da",
+	"rail": "sti-Range-rail-45c60",
+	"buffer": "sti-Range-buffer-9de02",
+	"fill": "sti-Range-fill-52d18",
+	"thumb": "sti-Range-thumb-cd00a"
+};
+export { Range_module_default as default };

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

@@ -0,0 +1,90 @@
+@layer sti.reset, sti.tokens, sti.base, sti.components, sti.variants, sti.utilities;
+@layer sti.components {
+  .sti-MediaTransport-frame-b473a {
+    inline-size: 100%;
+    min-inline-size: 0;
+    container-type: inline-size;
+  }
+
+  .sti-MediaTransport-root-a64c1 {
+    align-items: center;
+    gap: var(--sti-space-1) var(--sti-space-2);
+    box-sizing: border-box;
+    padding: var(--sti-space-2) var(--sti-space-3);
+    color: var(--sti-fg);
+    font-family: var(--sti-font-text);
+    flex-wrap: wrap;
+    display: flex;
+  }
+
+  .sti-MediaTransport-buttons-c6a8b, .sti-MediaTransport-tools-98728 {
+    align-items: center;
+    gap: var(--sti-space-1);
+    flex: none;
+    display: flex;
+  }
+
+  .sti-MediaTransport-tools-98728 {
+    margin-inline-start: auto;
+  }
+
+  .sti-MediaTransport-seek-665b4 {
+    align-items: center;
+    gap: var(--sti-space-3);
+    min-inline-size: 0;
+    padding-inline: var(--sti-space-1);
+    flex: 12rem;
+    display: flex;
+  }
+
+  .sti-MediaTransport-time-02a86 {
+    min-inline-size: 3.25ch;
+    color: var(--sti-fg-muted);
+    font-family: var(--sti-font-numeric);
+    font-size: var(--sti-font-size-xs);
+    font-variant-numeric: tabular-nums;
+    line-height: var(--sti-line-height-xs);
+    text-align: center;
+    flex: none;
+  }
+
+  .sti-MediaTransport-volume-31287 {
+    inline-size: 5rem;
+    padding-inline: var(--sti-space-1);
+    display: flex;
+  }
+
+  .sti-MediaTransport-speed-8ce1f {
+    min-inline-size: 3.25rem;
+    padding-inline: var(--sti-space-2);
+    font-variant-numeric: tabular-nums;
+  }
+
+  .sti-MediaTransport-toggle-a83a4 {
+    border-radius: var(--sti-radius-pill);
+    display: inline-flex;
+  }
+
+  .sti-MediaTransport-toggle-a83a4[data-on] {
+    background: var(--sti-bg-accent-subtle);
+    color: var(--sti-fg-accent-strong);
+  }
+
+  @container (width <= 30rem) {
+    .sti-MediaTransport-seek-665b4 {
+      flex-basis: 100%;
+      order: -1;
+    }
+
+    .sti-MediaTransport-volume-31287 {
+      display: none;
+    }
+  }
+
+  @media (forced-colors: active) {
+    .sti-MediaTransport-toggle-a83a4[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

@@ -0,0 +1,172 @@
+"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 { 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";
+import MediaTransport_module_default from "./MediaTransport.module.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+// src/media/_internal/transport/MediaTransport.tsx
+/** Oynatma hızı basamakları; hız düğmesi bunlar arasında döner. */
+const PLAYBACK_RATES = [
+	1,
+	1.25,
+	1.5,
+	2,
+	.75
+];
+/** Hız basamakları küçükten büyüğe (klavyedeki `<` ve `>` için). */
+const SORTED_RATES = [
+	.75,
+	1,
+	1.25,
+	1.5,
+	2
+];
+/**
+* Oynatıcıların ortak denetim çubuğu: oynat/duraklat, (atlama), süre ve konum kaydırıcısı, ses,
+* hız, altyazı, tam ekran. Video ve ses oynatıcı aynı çubuğu kullanır. 30 rem'den dar kapta konum
+* kaydırıcısı üst satıra çıkar, ses kaydırıcısı gizlenir.
+*/
+function MediaTransport({ state, actions, size = "md", skip = 0, showVolume = true, showSpeed = true, captions, fullscreen, trailing, className }) {
+	const t = useMessages();
+	const f = useFormatter();
+	const [scrub, setScrub] = useState(null);
+	const hasDuration = state.duration > 0;
+	const time = scrub ?? state.currentTime;
+	const spoken = (s) => f.duration(Math.round(s), { style: "long" });
+	const valueText = hasDuration ? template(t.mediaSeekValue, {
+		current: spoken(time),
+		total: spoken(state.duration)
+	}) : spoken(time);
+	const volumeValue = state.muted ? 0 : state.volume;
+	const buttonSize = size === "sm" ? "sm" : "md";
+	const rate = state.rate;
+	const nextRate = (() => {
+		const i = PLAYBACK_RATES.indexOf(rate);
+		return PLAYBACK_RATES[(i + 1) % PLAYBACK_RATES.length] ?? 1;
+	})();
+	const playLabel = state.ended ? t.mediaReplay : state.paused ? t.mediaPlay : t.mediaPause;
+	const silent = state.muted || state.volume === 0;
+	const VolumeGlyph = silent ? VolumeMutedIcon : state.volume < .5 ? VolumeLowIcon : VolumeIcon;
+	return /* @__PURE__ */ jsx("div", {
+		className: [MediaTransport_module_default.frame, className].filter(Boolean).join(" "),
+		"data-size": size,
+		children: /* @__PURE__ */ jsxs("div", {
+			className: MediaTransport_module_default.root,
+			children: [
+				/* @__PURE__ */ jsxs("div", {
+					className: MediaTransport_module_default.buttons,
+					children: [/* @__PURE__ */ jsx(IconButton, {
+						size: buttonSize,
+						label: playLabel,
+						icon: state.ended ? /* @__PURE__ */ jsx(RefreshIcon, {}) : state.paused ? /* @__PURE__ */ jsx(PlayIcon, {}) : /* @__PURE__ */ jsx(PauseIcon, {}),
+						onPress: actions.toggle
+					}), skip > 0 ? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(IconButton, {
+						size: buttonSize,
+						label: template(t.mediaRewind, { seconds: skip }),
+						icon: /* @__PURE__ */ jsx(SkipBackIcon, {}),
+						onPress: () => actions.seekBy(-skip)
+					}), /* @__PURE__ */ jsx(IconButton, {
+						size: buttonSize,
+						label: template(t.mediaForward, { seconds: skip }),
+						icon: /* @__PURE__ */ jsx(SkipForwardIcon, {}),
+						onPress: () => actions.seekBy(skip)
+					})] }) : null]
+				}),
+				/* @__PURE__ */ jsxs("div", {
+					className: MediaTransport_module_default.seek,
+					children: [
+						/* @__PURE__ */ jsx("span", {
+							className: MediaTransport_module_default.time,
+							"aria-hidden": "true",
+							children: formatClock(time)
+						}),
+						/* @__PURE__ */ jsx(Range, {
+							label: t.mediaSeek,
+							value: time,
+							max: hasDuration ? state.duration : 0,
+							step: 5,
+							largeStep: Math.max(10, state.duration / 10),
+							valueText,
+							buffered: state.buffered,
+							size: "md",
+							isDisabled: !hasDuration,
+							onChange: (v) => {
+								setScrub(v);
+								actions.seek(v);
+							},
+							onChangeEnd: () => setScrub(null)
+						}),
+						/* @__PURE__ */ jsx("span", {
+							className: MediaTransport_module_default.time,
+							"aria-hidden": "true",
+							children: formatClock(state.duration)
+						})
+					]
+				}),
+				/* @__PURE__ */ jsxs("div", {
+					className: MediaTransport_module_default.tools,
+					children: [
+						/* @__PURE__ */ jsx(IconButton, {
+							size: buttonSize,
+							label: silent ? t.mediaUnmute : t.mediaMute,
+							icon: /* @__PURE__ */ jsx(VolumeGlyph, {}),
+							onPress: actions.toggleMute
+						}),
+						showVolume ? /* @__PURE__ */ jsx("div", {
+							className: MediaTransport_module_default.volume,
+							children: /* @__PURE__ */ jsx(Range, {
+								label: t.mediaVolume,
+								value: volumeValue,
+								max: 1,
+								step: .05,
+								largeStep: .25,
+								valueText: f.percent(volumeValue),
+								size: "sm",
+								onChange: actions.setVolume
+							})
+						}) : null,
+						showSpeed ? /* @__PURE__ */ jsxs(Button, {
+							size: buttonSize,
+							variant: "ghost",
+							className: MediaTransport_module_default.speed,
+							onPress: () => actions.setRate(nextRate),
+							children: [/* @__PURE__ */ jsx("span", {
+								"aria-hidden": "true",
+								children: `${f.number(rate)}×`
+							}), /* @__PURE__ */ jsx(VisuallyHidden, { children: template(t.mediaSpeed, { rate: `${f.number(rate)}×` }) })]
+						}) : null,
+						captions ? /* @__PURE__ */ jsx("span", {
+							className: MediaTransport_module_default.toggle,
+							"data-on": captions.isOn ? "" : void 0,
+							children: /* @__PURE__ */ jsx(IconButton, {
+								size: buttonSize,
+								label: captions.label,
+								icon: /* @__PURE__ */ jsx(CaptionsIcon, {}),
+								onPress: captions.onPress
+							})
+						}) : null,
+						fullscreen ? /* @__PURE__ */ jsx(IconButton, {
+							size: buttonSize,
+							label: fullscreen.isOn ? t.mediaExitFullscreen : t.mediaFullscreen,
+							icon: fullscreen.isOn ? /* @__PURE__ */ jsx(MinimizeIcon, {}) : /* @__PURE__ */ jsx(MaximizeIcon, {}),
+							onPress: fullscreen.onPress
+						}) : null,
+						trailing
+					]
+				})
+			]
+		})
+	});
+}
+export { MediaTransport, PLAYBACK_RATES, SORTED_RATES };

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

@@ -0,0 +1,14 @@
+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"
+};
+export { MediaTransport_module_default as default };

package/dist/media/_internal/url.js

@@ -0,0 +1,31 @@
+// src/media/_internal/url.ts
+/**
+* Dış içerik adresi yardımcıları (gizlilik modu). Üçüncü taraf, sayfanın kendi kaynağı dışındaki
+* her adrestir; böyle bir adrese yalnız kullanıcının izniyle istek yapılır.
+*/
+/** Yalnız http, https, blob ve göreli adreslere izin verilir (`javascript:` ve `data:` reddedilir). */
+function safeMediaUrl(src, base) {
+	try {
+		const url = new URL(src, base ?? (typeof location !== "undefined" ? location.href : "https://localhost/"));
+		return url.protocol === "http:" || url.protocol === "https:" || url.protocol === "blob:" ? url : null;
+	} catch {
+		return null;
+	}
+}
+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
+* 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 url = safeMediaUrl(src, pageOrigin ?? "https://localhost/");
+	if (!url) return true;
+	return pageOrigin === void 0 ? true : url.origin !== pageOrigin;
+}
+/** Adresin alan adı ("cdn.example.com"); çözülemezse boş metin. */
+function hostOf(src, base) {
+	return safeMediaUrl(src, base)?.host ?? "";
+}
+export { hostOf, isThirdParty, safeMediaUrl };

package/dist/media/_internal/useConsent.js

@@ -0,0 +1,28 @@
+"use client";
+import { isThirdParty } from "./url.js";
+import { useEffect, useState } from "react";
+// src/media/_internal/useConsent.ts
+/**
+* Gizlilik modu durumu: adreslerden biri sayfanın kendi kaynağı dışındaysa kullanıcı izin verene
+* kadar `allowed` yanlıştır. Sayfanın kaynağı bağlandıktan sonra bilinir (sunucu ve ilk istemci
+* çıktısı aynı kalır).
+*/
+function useConsent(urls, consent = "auto", onConsent) {
+	const [origin, setOrigin] = useState(void 0);
+	const [granted, setGranted] = useState(consent === "granted");
+	useEffect(() => setOrigin(location.origin), []);
+	useEffect(() => {
+		if (consent === "granted") setGranted(true);
+	}, [consent]);
+	const thirdParty = urls.some((u) => isThirdParty(u, origin));
+	return {
+		origin,
+		thirdParty,
+		allowed: granted || !thirdParty,
+		accept: () => {
+			setGranted(true);
+			onConsent?.();
+		}
+	};
+}
+export { useConsent };