@stisocial/ui 0.0.0-stage → 0.2.0

package/dist/maps/_internal/geo.js

@@ -0,0 +1,116 @@
+/** Web Mercator'ın gösterebildiği en yüksek enlem. */
+const MAX_LAT = 85.0511287798;
+const isFiniteNumber = (v) => typeof v === "number" && Number.isFinite(v);
+const isLatLng = (v) => typeof v === "object" && v !== null && isFiniteNumber(v.lat) && isFiniteNumber(v.lng) && Math.abs(v.lat) <= 90 && Math.abs(v.lng) <= 180;
+const clamp = (v, min, max) => Math.min(max, Math.max(min, v));
+/** Boylamı [−180, 180) aralığına sarar. */
+function wrapLng(lng) {
+	return ((lng + 180) % 360 + 360) % 360 - 180;
+}
+/** Bir zoom düzeyinde dünyanın piksel genişliği. */
+const worldSize = (zoom) => 256 * 2 ** zoom;
+/** Konumu, verilen zoom düzeyindeki dünya pikseline çevirir (sol üst köşe 0,0). */
+function project(p, zoom) {
+	const size = worldSize(zoom);
+	const lat = clamp(p.lat, -85.0511287798, MAX_LAT);
+	const sin = Math.sin(lat * Math.PI / 180);
+	return {
+		x: (p.lng + 180) / 360 * size,
+		y: (.5 - Math.log((1 + sin) / (1 - sin)) / (4 * Math.PI)) * size
+	};
+}
+/** `project`'in tersi. */
+function unproject(pt, zoom) {
+	const size = worldSize(zoom);
+	const n = Math.PI - 2 * Math.PI * pt.y / size;
+	return {
+		lat: clamp(180 / Math.PI * Math.atan(.5 * (Math.exp(n) - Math.exp(-n))), -85.0511287798, MAX_LAT),
+		lng: wrapLng(pt.x / size * 360 - 180)
+	};
+}
+/** Merkezi dünya pikseliyle kaydırır (ekran pikseli farkı verilir). */
+function panBy(center, zoom, dx, dy) {
+	const c = project(center, zoom);
+	const size = worldSize(zoom);
+	return unproject({
+		x: c.x + dx,
+		y: clamp(c.y + dy, 0, size)
+	}, zoom);
+}
+/** Görünümü (merkez, zoom, boyut) kaplayan karo aralığı. */
+function tileRange(center, zoom, width, height) {
+	const c = project(center, zoom);
+	const left = c.x - width / 2;
+	const top = c.y - height / 2;
+	const last = 2 ** zoom - 1;
+	return {
+		zoom,
+		left,
+		top,
+		x0: Math.floor(left / 256),
+		x1: Math.floor((left + width) / 256),
+		y0: clamp(Math.floor(top / 256), 0, last),
+		y1: clamp(Math.floor((top + height) / 256), 0, last)
+	};
+}
+/** Karo adresinin x değerini dünya içine sarar. */
+const wrapTileX = (x, zoom) => (x % 2 ** zoom + 2 ** zoom) % 2 ** zoom;
+/** İki konum arası büyük daire uzaklığı, kilometre. */
+function distanceKm(a, b) {
+	const rad = Math.PI / 180;
+	const dLat = (b.lat - a.lat) * rad;
+	const dLng = (b.lng - a.lng) * rad;
+	const h = Math.sin(dLat / 2) ** 2 + Math.cos(a.lat * rad) * Math.cos(b.lat * rad) * Math.sin(dLng / 2) ** 2;
+	return 12742.0176 * Math.atan2(Math.sqrt(h), Math.sqrt(1 - h));
+}
+/**
+* Noktaların hepsini boyuta sığdıran merkez ve (tam sayı) zoom düzeyi. Tek nokta için `single`
+* düzeyi kullanılır.
+*/
+function fitView(points, width, height, { padding = 48, minZoom = 1, maxZoom = 18, single = 14 } = {}) {
+	const pts = points.filter(isLatLng);
+	if (pts.length === 0 || width <= 0 || height <= 0) return null;
+	if (pts.length === 1) return {
+		center: pts[0],
+		zoom: clamp(single, minZoom, maxZoom)
+	};
+	const lats = pts.map((p) => p.lat);
+	const lngs = pts.map((p) => p.lng);
+	const center = {
+		lat: (Math.min(...lats) + Math.max(...lats)) / 2,
+		lng: (Math.min(...lngs) + Math.max(...lngs)) / 2
+	};
+	const w = Math.max(1, width - padding * 2);
+	const h = Math.max(1, height - padding * 2);
+	for (let z = maxZoom; z >= minZoom; z--) {
+		const a = project({
+			lat: Math.max(...lats),
+			lng: Math.min(...lngs)
+		}, z);
+		const b = project({
+			lat: Math.min(...lats),
+			lng: Math.max(...lngs)
+		}, z);
+		if (Math.abs(b.x - a.x) <= w && Math.abs(b.y - a.y) <= h) return {
+			center,
+			zoom: z
+		};
+	}
+	return {
+		center,
+		zoom: minZoom
+	};
+}
+/**
+* Koordinat metnini sayıya çevirir: "41,0082" ve "41.0082" kabul edilir, işaret ve boşluk
+* temizlenir. Geçersizse `null`. Binlik ayracı kabul edilmez (belirsizdir).
+*/
+function parseCoordinate(text) {
+	const t = text.trim().replace(/−/g, "-").replace(",", ".");
+	if (!/^[+-]?\d+(\.\d+)?$/.test(t) && !/^[+-]?\.\d+$/.test(t)) return null;
+	const n = Number(t);
+	return Number.isFinite(n) ? n : null;
+}
+/** Konumu eşleşen kısa metne çevirir; yaklaşık 10 santimetre doğruluk (6 ondalık). */
+const roundCoordinate = (v) => Math.round(v * 1e6) / 1e6;
+export { MAX_LAT, clamp, distanceKm, fitView, isFiniteNumber, isLatLng, panBy, parseCoordinate, project, roundCoordinate, tileRange, unproject, worldSize, wrapLng, wrapTileX };

package/dist/maps/_internal/mapContext.js

@@ -0,0 +1,8 @@
+"use client";
+import { createContext, useContext } from "react";
+// src/maps/_internal/mapContext.ts
+const MapContext = createContext(null);
+function useMapContext() {
+	return useContext(MapContext);
+}
+export { MapContext, useMapContext };

package/dist/maps/_internal/useControllable.js

@@ -0,0 +1,24 @@
+import { useCallback, useRef, useState } from "react";
+// src/maps/_internal/useControllable.ts
+/**
+* Denetimli ya da denetimsiz değer: `value` verilirse (undefined değilse) o geçerlidir, yoksa
+* bileşenin kendi durumu. Değişiklik her iki durumda da `onChange`'e bildirilir.
+*/
+function useControllable(value, defaultValue, onChange) {
+	const [inner, setInner] = useState(defaultValue);
+	const controlled = value !== void 0;
+	const current = controlled ? value : inner;
+	const latest = useRef({
+		controlled,
+		onChange
+	});
+	latest.current = {
+		controlled,
+		onChange
+	};
+	return [current, useCallback((next) => {
+		if (!latest.current.controlled) setInner(next);
+		latest.current.onChange?.(next);
+	}, [])];
+}
+export { useControllable };

package/dist/maps/index.d.ts

@@ -0,0 +1,12 @@
+import { DirectionsLink, DirectionsLinkProps, DirectionsMode, DirectionsOptions, DirectionsPlace, DirectionsProvider, directionsUrl } from "./DirectionsLink/DirectionsLink.js";
+import "./DirectionsLink/index.js";
+import { MapView, MapViewProps, MapViewSize, OSM_TILE_URL, openStreetMapUrl, safeTileUrl, tileSrc } from "./MapView/MapView.js";
+import { LocationPicker, LocationPickerProps } from "./LocationPicker/LocationPicker.js";
+import "./LocationPicker/index.js";
+import { MapMarker, MapMarkerProps, MapMarkerSize, MapMarkerTone } from "./MapMarker/MapMarker.js";
+import "./MapMarker/index.js";
+import "./MapView/index.js";
+import { Store, StoreLocator, StoreLocatorProps } from "./StoreLocator/StoreLocator.js";
+import "./StoreLocator/index.js";
+import { TurkeyMap, TurkeyMapProps, TurkeyMapSelectionMode, neighbor, valueStep } from "./TurkeyMap/TurkeyMap.js";
+export { DirectionsLink, DirectionsLinkProps, DirectionsMode, DirectionsOptions, DirectionsPlace, DirectionsProvider, LocationPicker, LocationPickerProps, MapMarker, MapMarkerProps, MapMarkerSize, MapMarkerTone, MapView, MapViewProps, MapViewSize, OSM_TILE_URL, Store, StoreLocator, StoreLocatorProps, TurkeyMap, TurkeyMapProps, TurkeyMapSelectionMode, directionsUrl, neighbor, openStreetMapUrl, safeTileUrl, tileSrc, valueStep };

package/dist/maps/index.js

@@ -0,0 +1,7 @@
+import { DirectionsLink, directionsUrl } from "./DirectionsLink/DirectionsLink.js";
+import { MapMarker } from "./MapMarker/MapMarker.js";
+import { MapView, OSM_TILE_URL, openStreetMapUrl, safeTileUrl, tileSrc } from "./MapView/MapView.js";
+import { LocationPicker } from "./LocationPicker/LocationPicker.js";
+import { StoreLocator } from "./StoreLocator/StoreLocator.js";
+import { TurkeyMap, neighbor, valueStep } from "./TurkeyMap/TurkeyMap.js";
+export { DirectionsLink, LocationPicker, MapMarker, MapView, OSM_TILE_URL, StoreLocator, TurkeyMap, directionsUrl, neighbor, openStreetMapUrl, safeTileUrl, tileSrc, valueStep };

package/dist/media/AudioPlayer/AudioPlayer.css

@@ -0,0 +1,106 @@
+@layer sti.reset, sti.tokens, sti.base, sti.components, sti.variants, sti.utilities;
+@layer sti.components {
+  .sti-AudioPlayer-root-db6cc {
+    --sti-audio-radius: var(--sti-radius-lg);
+    --sti-audio-cover: 3.5rem;
+    gap: var(--sti-space-1);
+    box-sizing: border-box;
+    inline-size: 100%;
+    min-inline-size: 0;
+    padding: var(--sti-space-3) var(--sti-space-1) var(--sti-space-1);
+    border: var(--sti-border-width) solid var(--sti-border-subtle);
+    border-radius: var(--sti-audio-radius);
+    background: var(--sti-bg-surface);
+    color: var(--sti-fg);
+    font-family: var(--sti-font-text);
+    flex-direction: column;
+    display: flex;
+  }
+
+  .sti-AudioPlayer-root-db6cc[data-size="sm"] {
+    --sti-audio-cover: 2.5rem;
+  }
+
+  .sti-AudioPlayer-head-d678c {
+    align-items: center;
+    gap: var(--sti-space-4);
+    min-inline-size: 0;
+    padding-inline: var(--sti-space-3);
+    display: flex;
+  }
+
+  .sti-AudioPlayer-cover-7ba09 {
+    box-sizing: border-box;
+    inline-size: var(--sti-audio-cover);
+    block-size: var(--sti-audio-cover);
+    border: var(--sti-border-width) solid var(--sti-border-subtle);
+    border-radius: var(--sti-radius-md);
+    background: var(--sti-bg-subtle);
+    color: var(--sti-fg-muted);
+    flex: none;
+    justify-content: center;
+    align-items: center;
+    display: inline-flex;
+    overflow: hidden;
+  }
+
+  .sti-AudioPlayer-image-7cc8f {
+    object-fit: cover;
+    block-size: 100%;
+    inline-size: 100%;
+    display: block;
+  }
+
+  .sti-AudioPlayer-text-7488b {
+    flex: auto;
+    min-inline-size: 0;
+  }
+
+  .sti-AudioPlayer-title-07145, .sti-AudioPlayer-subtitle-90148 {
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    margin: 0;
+    overflow: hidden;
+  }
+
+  .sti-AudioPlayer-title-07145 {
+    font-size: var(--sti-font-size-body);
+    font-weight: var(--sti-font-weight-semibold);
+    line-height: var(--sti-line-height-body);
+  }
+
+  .sti-AudioPlayer-subtitle-90148 {
+    color: var(--sti-fg-muted);
+    font-size: var(--sti-font-size-sm);
+    line-height: var(--sti-line-height-sm);
+  }
+
+  .sti-AudioPlayer-actions-706a3 {
+    align-items: center;
+    gap: var(--sti-space-1);
+    flex: none;
+    display: flex;
+  }
+
+  .sti-AudioPlayer-audio-fa315 {
+    display: none;
+  }
+
+  .sti-AudioPlayer-error-ff218 {
+    padding: var(--sti-space-1) var(--sti-space-3) var(--sti-space-2);
+    color: var(--sti-fg-danger-strong);
+    font-size: var(--sti-font-size-sm);
+    line-height: var(--sti-line-height-sm);
+    margin: 0;
+  }
+
+  .sti-AudioPlayer-consent-ac10b {
+    padding-block: var(--sti-space-4);
+  }
+
+  @media (forced-colors: active) {
+    .sti-AudioPlayer-root-db6cc, .sti-AudioPlayer-cover-7ba09 {
+      border-color: canvastext;
+    }
+  }
+}

package/dist/media/AudioPlayer/AudioPlayer.d.ts

@@ -0,0 +1,38 @@
+import { ReactNode } from "react";
+export interface AudioSource {
+  src: string;
+  /** MIME türü ("audio/mpeg"). */
+  type?: string;
+}
+export interface AudioPlayerProps {
+  /** Ses adresi ya da (biçim yedekli) kaynak listesi. */
+  src: string | AudioSource[];
+  /** Parçanın adı (zorunlu): oynatıcının erişilebilir adı olur. */
+  title: string;
+  /** Sanatçı, program ya da kaynak. */
+  subtitle?: string;
+  /** Kapak görseli; verilmezse nota simgesi çizilir. Üçüncü taraf kaynakta izin verilmeden istenmez. */
+  cover?: string;
+  /** Geri ve ileri atlama süresi (saniye); varsayılan 10, 0 düğmeleri kaldırır. */
+  skip?: number;
+  /** Sondaki ek eylemler (indirme bağlantısı gibi). */
+  actions?: ReactNode;
+  size?: "sm" | "md";
+  loop?: boolean;
+  preload?: "none" | "metadata" | "auto";
+  /** Gizlilik modu (`VideoPlayer` ile aynı). */
+  consent?: "auto" | "granted";
+  onConsent?: () => void;
+  crossOrigin?: "anonymous" | "use-credentials";
+  onPlay?: () => void;
+  onPause?: () => void;
+  onEnded?: () => void;
+  className?: string;
+  id?: string;
+}
+/**
+ * Ses oynatıcı: kapak, ad, oynat/duraklat, ±10 sn atlama, konum, ses ve hız. Klavye (oynatıcı içinde
+ * odak varken): K oynat/duraklat, J L 10 sn, M sessiz, 0–9 konum yüzdesi, `<` `>` hız. Üçüncü taraf
+ * adreste kullanıcı izin verene kadar hiçbir istek yapılmaz.
+ */
+export declare function AudioPlayer({ src, title, subtitle, cover, skip, actions, size, loop, preload, consent, onConsent, crossOrigin, onPlay, onPause, onEnded, className, id }: AudioPlayerProps): import("react").JSX.Element;

package/dist/media/AudioPlayer/AudioPlayer.js

@@ -0,0 +1,134 @@
+"use client";
+import { useMessages } from "../../provider/UIProvider.js";
+import { template } from "../../text/text.js";
+import { VisuallyHidden } from "../../components/VisuallyHidden/VisuallyHidden.js";
+import { ConsentNotice } from "../_internal/consent/ConsentNotice.js";
+import { MusicIcon } from "../_internal/icons.js";
+import { MediaTransport, SORTED_RATES } from "../_internal/transport/MediaTransport.js";
+import { hostOf } from "../_internal/url.js";
+import { useConsent } from "../_internal/useConsent.js";
+import { useMedia } from "../_internal/useMedia.js";
+import AudioPlayer_module_default from "./AudioPlayer.module.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useRef } from "react";
+// src/media/AudioPlayer/AudioPlayer.tsx
+const isEditable = (el) => el instanceof HTMLElement && (el.isContentEditable || /^(INPUT|TEXTAREA|SELECT)$/.test(el.tagName));
+/**
+* Ses oynatıcı: kapak, ad, oynat/duraklat, ±10 sn atlama, konum, ses ve hız. Klavye (oynatıcı içinde
+* odak varken): K oynat/duraklat, J L 10 sn, M sessiz, 0–9 konum yüzdesi, `<` `>` hız. Üçüncü taraf
+* adreste kullanıcı izin verene kadar hiçbir istek yapılmaz.
+*/
+function AudioPlayer({ src, title, subtitle, cover, skip = 10, actions, size = "md", loop, preload = "metadata", consent = "auto", onConsent, crossOrigin, onPlay, onPause, onEnded, className, id }) {
+	const t = useMessages();
+	const sources = typeof src === "string" ? [{ src }] : src;
+	const { origin, allowed, accept, thirdParty } = useConsent([...sources.map((x) => x.src), ...cover ? [cover] : []], consent, onConsent);
+	const { ref, state, actions: media } = useMedia();
+	const wasPaused = useRef(true);
+	useEffect(() => {
+		if (state.paused === wasPaused.current) return;
+		wasPaused.current = state.paused;
+		if (state.paused) onPause?.();
+		else onPlay?.();
+	}, [
+		state.paused,
+		onPause,
+		onPlay
+	]);
+	const wasEnded = useRef(false);
+	useEffect(() => {
+		if (state.ended && !wasEnded.current) onEnded?.();
+		wasEnded.current = state.ended;
+	}, [state.ended, onEnded]);
+	const onKeyDown = (e) => {
+		if (e.defaultPrevented || e.altKey || e.ctrlKey || e.metaKey || isEditable(e.target)) return;
+		const handled = (fn) => {
+			e.preventDefault();
+			fn();
+		};
+		const key = e.key.toLowerCase();
+		if (key === "k") return handled(media.toggle);
+		if (key === "j") return handled(() => media.seekBy(-10));
+		if (key === "l") return handled(() => media.seekBy(10));
+		if (key === "m") return handled(media.toggleMute);
+		if (/^[0-9]$/.test(e.key) && state.duration > 0) return handled(() => media.seek(state.duration * Number(e.key) / 10));
+		if (e.key === "<" || e.key === ">") {
+			const at = SORTED_RATES.findIndex((r) => r >= state.rate);
+			const step = e.key === ">" ? 1 : -1;
+			const next = SORTED_RATES[Math.min(SORTED_RATES.length - 1, Math.max(0, at + step))];
+			return handled(() => next && media.setRate(next));
+		}
+	};
+	const showCover = Boolean(cover) && (allowed || !thirdParty);
+	return /* @__PURE__ */ jsxs("div", {
+		id,
+		role: "group",
+		"aria-label": `${t.mediaAudioPlayer}: ${title}`,
+		className: [AudioPlayer_module_default.root, className].filter(Boolean).join(" "),
+		"data-size": size,
+		onKeyDown,
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: AudioPlayer_module_default.head,
+			children: [
+				/* @__PURE__ */ jsx("span", {
+					className: AudioPlayer_module_default.cover,
+					"aria-hidden": "true",
+					children: showCover ? /* @__PURE__ */ jsx("img", {
+						className: AudioPlayer_module_default.image,
+						src: cover,
+						alt: "",
+						loading: "lazy",
+						decoding: "async"
+					}) : /* @__PURE__ */ jsx(MusicIcon, { size: "md" })
+				}),
+				/* @__PURE__ */ jsxs("div", {
+					className: AudioPlayer_module_default.text,
+					children: [/* @__PURE__ */ jsx("p", {
+						className: AudioPlayer_module_default.title,
+						children: title
+					}), subtitle ? /* @__PURE__ */ jsx("p", {
+						className: AudioPlayer_module_default.subtitle,
+						children: subtitle
+					}) : null]
+				}),
+				actions ? /* @__PURE__ */ jsx("div", {
+					className: AudioPlayer_module_default.actions,
+					children: actions
+				}) : null
+			]
+		}), allowed ? /* @__PURE__ */ jsxs(Fragment, { children: [
+			/* @__PURE__ */ jsx("audio", {
+				ref,
+				className: AudioPlayer_module_default.audio,
+				preload,
+				loop,
+				crossOrigin,
+				src: sources.length === 1 ? sources[0]?.src : void 0,
+				children: sources.length > 1 ? sources.map((s) => /* @__PURE__ */ jsx("source", {
+					src: s.src,
+					type: s.type
+				}, s.src)) : null
+			}),
+			/* @__PURE__ */ jsx(MediaTransport, {
+				state,
+				actions: media,
+				size,
+				skip
+			}),
+			state.failed ? /* @__PURE__ */ jsx("p", {
+				className: AudioPlayer_module_default.error,
+				role: "alert",
+				children: t.errorMediaLoad
+			}) : null,
+			/* @__PURE__ */ jsx(VisuallyHidden, { children: /* @__PURE__ */ jsx("span", {
+				role: "status",
+				children: state.waiting ? t.mediaBuffering : ""
+			}) })
+		] }) : /* @__PURE__ */ jsx(ConsentNotice, {
+			className: AudioPlayer_module_default.consent,
+			text: template(t.mediaThirdParty, { host: hostOf(sources[0]?.src ?? "", origin) }),
+			actionLabel: t.mediaLoad,
+			onAccept: accept
+		})]
+	});
+}
+export { AudioPlayer };

package/dist/media/AudioPlayer/AudioPlayer.module.js

@@ -0,0 +1,16 @@
+import './AudioPlayer.css';
+// src/media/AudioPlayer/AudioPlayer.module.css
+var AudioPlayer_module_default = {
+	"root": "sti-AudioPlayer-root-db6cc",
+	"head": "sti-AudioPlayer-head-d678c",
+	"cover": "sti-AudioPlayer-cover-7ba09",
+	"image": "sti-AudioPlayer-image-7cc8f",
+	"text": "sti-AudioPlayer-text-7488b",
+	"title": "sti-AudioPlayer-title-07145",
+	"subtitle": "sti-AudioPlayer-subtitle-90148",
+	"actions": "sti-AudioPlayer-actions-706a3",
+	"audio": "sti-AudioPlayer-audio-fa315",
+	"error": "sti-AudioPlayer-error-ff218",
+	"consent": "sti-AudioPlayer-consent-ac10b"
+};
+export { AudioPlayer_module_default as default };

package/dist/media/AudioPlayer/index.d.ts

@@ -0,0 +1,2 @@
+import { AudioPlayer, AudioPlayerProps, AudioSource } from "./AudioPlayer.js";
+export { AudioPlayer, AudioPlayerProps, AudioSource };

package/dist/media/AudioWaveform/AudioWaveform.css

@@ -0,0 +1,43 @@
+@layer sti.reset, sti.tokens, sti.base, sti.components, sti.variants, sti.utilities;
+@layer sti.components {
+  .sti-AudioWaveform-root-2ccec {
+    --sti-waveform-h: 3rem;
+    box-sizing: border-box;
+    inline-size: 100%;
+    min-inline-size: 0;
+    color: var(--sti-fg);
+    display: block;
+  }
+
+  .sti-AudioWaveform-root-2ccec[data-size="sm"] {
+    --sti-waveform-h: 2rem;
+  }
+
+  .sti-AudioWaveform-root-2ccec[data-size="lg"] {
+    --sti-waveform-h: 4.5rem;
+  }
+
+  .sti-AudioWaveform-svg-253c8 {
+    inline-size: 100%;
+    block-size: var(--sti-waveform-h);
+    display: block;
+  }
+
+  .sti-AudioWaveform-bars-06086 {
+    fill: var(--sti-border-control);
+  }
+
+  .sti-AudioWaveform-played-b0943 {
+    fill: var(--sti-fill-accent);
+  }
+
+  @media (forced-colors: active) {
+    .sti-AudioWaveform-bars-06086 {
+      fill: graytext;
+    }
+
+    .sti-AudioWaveform-played-b0943 {
+      fill: highlight;
+    }
+  }
+}

package/dist/media/AudioWaveform/AudioWaveform.d.ts

@@ -0,0 +1,25 @@
+export interface AudioWaveformProps {
+  /** 0–1 arası genlik sütunları (`computePeaks` ya da `loadWaveformPeaks` üretir). */
+  peaks: readonly number[];
+  /** Toplam süre (saniye); konum kaydırıcısı için gerekir. */
+  duration?: number;
+  /** Oynatma konumu (saniye); çalınan bölüm turkuaz boyanır. */
+  currentTime?: number;
+  /**
+   * Verilirse dalga biçimi bir konum kaydırıcısı olur (APG Slider): tıklama ve sürükleme konuma
+   * gider; ← → 5 sn, Shift ile %10, Home/End uçlar.
+   */
+  onSeek?: (seconds: number) => void;
+  /** Erişilebilir ad; varsayılan "Ses dalga biçimi". */
+  label?: string;
+  /** Yükseklik: `sm` 32, `md` 48, `lg` 72 piksel. */
+  size?: "sm" | "md" | "lg";
+  isDisabled?: boolean;
+  className?: string;
+  id?: string;
+}
+/**
+ * Ses dalga biçimi: genlik sütunları, çalınan bölüm turkuaz. Yalnız gösterim olarak `img` rolünde,
+ * `onSeek` verilince konum kaydırıcısıdır. Çizim SVG özniteliklerindendir (satır içi stil yok).
+ */
+export declare function AudioWaveform({ peaks, duration, currentTime, onSeek, label, size, isDisabled, className, id }: AudioWaveformProps): import("react").JSX.Element;

package/dist/media/AudioWaveform/AudioWaveform.js

@@ -0,0 +1,101 @@
+"use client";
+import { useFormatter, useMessages } from "../../provider/UIProvider.js";
+import { template } from "../../text/text.js";
+import { Range } from "../_internal/range/Range.js";
+import AudioWaveform_module_default from "./AudioWaveform.module.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useId } from "react";
+// src/media/AudioWaveform/AudioWaveform.tsx
+const VIEW_HEIGHT = 100;
+const BAR = .62;
+/** Çok sessiz sütunlar da bir çizgi olarak görünsün diye en az yükseklik (görünüm birimi). */
+const MIN_BAR = 3;
+/**
+* Ses dalga biçimi: genlik sütunları, çalınan bölüm turkuaz. Yalnız gösterim olarak `img` rolünde,
+* `onSeek` verilince konum kaydırıcısıdır. Çizim SVG özniteliklerindendir (satır içi stil yok).
+*/
+function AudioWaveform({ peaks, duration = 0, currentTime = 0, onSeek, label, size = "md", isDisabled, className, id }) {
+	const t = useMessages();
+	const f = useFormatter();
+	const clipId = `waveform-${useId().replace(/[^a-zA-Z0-9_-]/g, "")}`;
+	const count = Math.max(1, peaks.length);
+	const ratio = duration > 0 ? Math.min(1, Math.max(0, currentTime / duration)) : 0;
+	const name = label ?? t.mediaWaveform;
+	const columns = peaks.map((p, i) => {
+		const h = Math.max(MIN_BAR, Math.min(1, Math.max(0, p)) * VIEW_HEIGHT);
+		return {
+			id: i,
+			x: i + .38 / 2,
+			y: (VIEW_HEIGHT - h) / 2,
+			h
+		};
+	});
+	const bars = /* @__PURE__ */ jsxs("svg", {
+		className: AudioWaveform_module_default.svg,
+		viewBox: `0 0 ${count} ${VIEW_HEIGHT}`,
+		preserveAspectRatio: "none",
+		"aria-hidden": "true",
+		focusable: "false",
+		children: [
+			/* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsx("clipPath", {
+				id: clipId,
+				children: /* @__PURE__ */ jsx("rect", {
+					x: "0",
+					y: "0",
+					width: ratio * count,
+					height: VIEW_HEIGHT
+				})
+			}) }),
+			/* @__PURE__ */ jsx("g", {
+				className: AudioWaveform_module_default.bars,
+				children: columns.map((c) => /* @__PURE__ */ jsx("rect", {
+					x: c.x,
+					y: c.y,
+					width: BAR,
+					height: c.h
+				}, c.id))
+			}),
+			/* @__PURE__ */ jsx("g", {
+				className: AudioWaveform_module_default.played,
+				clipPath: `url(#${clipId})`,
+				children: columns.map((c) => /* @__PURE__ */ jsx("rect", {
+					x: c.x,
+					y: c.y,
+					width: BAR,
+					height: c.h
+				}, c.id))
+			})
+		]
+	});
+	if (!onSeek) return /* @__PURE__ */ jsx("div", {
+		id,
+		className: [AudioWaveform_module_default.root, className].filter(Boolean).join(" "),
+		"data-size": size,
+		role: "img",
+		"aria-label": name,
+		children: bars
+	});
+	const spoken = (s) => f.duration(Math.round(s), { style: "long" });
+	return /* @__PURE__ */ jsx("div", {
+		id,
+		className: [AudioWaveform_module_default.root, className].filter(Boolean).join(" "),
+		"data-size": size,
+		"data-interactive": "",
+		children: /* @__PURE__ */ jsx(Range, {
+			label: name,
+			value: currentTime,
+			max: duration,
+			step: 5,
+			largeStep: Math.max(5, duration / 10),
+			valueText: template(t.mediaSeekValue, {
+				current: spoken(currentTime),
+				total: spoken(duration)
+			}),
+			track: bars,
+			thumb: "line",
+			isDisabled: isDisabled || !(duration > 0),
+			onChange: onSeek
+		})
+	});
+}
+export { AudioWaveform };

package/dist/media/AudioWaveform/AudioWaveform.module.js

@@ -0,0 +1,9 @@
+import './AudioWaveform.css';
+// src/media/AudioWaveform/AudioWaveform.module.css
+var AudioWaveform_module_default = {
+	"root": "sti-AudioWaveform-root-2ccec",
+	"svg": "sti-AudioWaveform-svg-253c8",
+	"bars": "sti-AudioWaveform-bars-06086",
+	"played": "sti-AudioWaveform-played-b0943"
+};
+export { AudioWaveform_module_default as default };

package/dist/media/AudioWaveform/peaks.d.ts

@@ -0,0 +1,14 @@
+/**
+ * Örnek dizisini `count` sütuna indirger: her sütun, kendi aralığındaki en büyük mutlak genliktir.
+ * Sonuç en büyük değere göre 0–1'e ölçeklenir (sessiz kayıtta tümü 0).
+ */
+export declare function computePeaks(samples: ArrayLike<number>, count: number): number[];
+/**
+ * Ses dosyasından dalga biçimi çıkarır (tarayıcıda; `fetch` ve `decodeAudioData`). Gizlilik: üçüncü
+ * taraf adrese istek yapılmaz; uygulama izin aldıktan sonra `allowThirdParty` verir. Çok kanallı sesin
+ * kanalları ortalanır.
+ */
+export declare function loadWaveformPeaks(src: string, count: number, options?: {
+  signal?: AbortSignal;
+  allowThirdParty?: boolean;
+}): Promise<number[]>;