@stisocial/ui 0.1.0 → 0.2.0

package/dist/maps/MapView/MapView.js

@@ -0,0 +1,495 @@
+"use client";
+import { 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 { Link } from "../../components/Link/Link.js";
+import { ArrowLink } from "../../components/ArrowLink/ArrowLink.js";
+import { MinusIcon } from "../../icons/generated/MinusIcon.js";
+import { PlusIcon } from "../../icons/generated/PlusIcon.js";
+import { MapPinIcon } from "../../icons/generated/MapPinIcon.js";
+import { clamp, fitView, panBy, project, tileRange, unproject, worldSize, wrapTileX } from "../_internal/geo.js";
+import { useControllable } from "../_internal/useControllable.js";
+import { MapContext } from "../_internal/mapContext.js";
+import MapView_module_default from "./MapView.module.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Children, useCallback, useEffect, useId, useLayoutEffect, useMemo, useRef, useState } from "react";
+// src/maps/MapView/MapView.tsx
+/** Varsayılan karo kaynağı: OpenStreetMap standart katmanı. */
+const OSM_TILE_URL = "https://tile.openstreetmap.org/{z}/{x}/{y}.png";
+/** Varsayılan görünüm: Türkiye'nin ortası, bütün ülke görünür. */
+const DEFAULT_CENTER = {
+	lat: 39,
+	lng: 35
+};
+const DEFAULT_ZOOM = 6;
+const join = (...names) => names.filter(Boolean).join(" ");
+/**
+* Karo adresi kuralı: `https://`, kök göreli (`/`) ya da `data:image/` (çevrimdışı örnek; görsel
+* adresi betik çalıştırmaz) ile başlar; `{z}`, `{x}`, `{y}` yer tutucularının üçü de bulunur.
+* Kural dışı adres varsayılana (OpenStreetMap) döner: `http://` ve `javascript:` asla istenmez.
+*/
+function safeTileUrl(url) {
+	if (!url) return OSM_TILE_URL;
+	return /^(https:\/\/|\/(?!\/)|data:image\/)/.test(url) && [
+		"{z}",
+		"{x}",
+		"{y}"
+	].every((p) => url.includes(p)) ? url : OSM_TILE_URL;
+}
+function tileSrc(url, z, x, y) {
+	return url.replace("{z}", String(z)).replace("{x}", String(x)).replace("{y}", String(y));
+}
+const PAN_STEP = 64;
+/**
+* Harita: karo tabanlı, kendi çizimiyle (üçüncü taraf betik yok). Gizlilik kipi: harita izin
+* verilene kadar yüklenmez; o zamana kadar konumlar metin listesi olarak gösterilir. Klavye: ok
+* tuşları kaydırır (Shift hızlı), `+` / `-` yakınlaştırır, Home ilk görünüme döner; fare: sürükleme,
+* çift tıklama, Ctrl/⌘ + tekerlek.
+*/
+function MapView(props) {
+	const messages = useMessages();
+	const [loaded, setLoaded] = useControllable(props.isLoaded, props.defaultLoaded ?? false, props.onLoadedChange);
+	const size = props.size ?? "md";
+	const root = join(MapView_module_default.root, props.className);
+	if (!loaded) {
+		const count = Children.toArray(props.children).length;
+		return /* @__PURE__ */ jsx("div", {
+			id: props.id,
+			ref: props.ref,
+			className: root,
+			"data-state": "consent",
+			"data-size": size,
+			children: /* @__PURE__ */ jsx("div", {
+				className: MapView_module_default.consent,
+				role: "group",
+				"aria-label": props.label,
+				children: /* @__PURE__ */ jsxs("div", {
+					className: MapView_module_default.consentCard,
+					children: [
+						/* @__PURE__ */ jsx("span", {
+							className: MapView_module_default.consentIcon,
+							"aria-hidden": "true",
+							children: /* @__PURE__ */ jsx(MapPinIcon, {})
+						}),
+						/* @__PURE__ */ jsx("h3", {
+							className: MapView_module_default.consentTitle,
+							children: messages.mapConsentTitle
+						}),
+						/* @__PURE__ */ jsx("p", {
+							className: MapView_module_default.consentText,
+							children: messages.mapConsentText
+						}),
+						/* @__PURE__ */ jsxs("div", {
+							className: MapView_module_default.consentActions,
+							children: [/* @__PURE__ */ jsx(Button, {
+								variant: "primary",
+								onPress: () => setLoaded(true),
+								children: messages.mapLoad
+							}), /* @__PURE__ */ jsx(ArrowLink, {
+								external: true,
+								size: "sm",
+								href: openStreetMapUrl(props.center ?? props.defaultCenter ?? DEFAULT_CENTER, props.zoom ?? props.defaultZoom ?? DEFAULT_ZOOM),
+								children: messages.mapOpenExternal
+							})]
+						}),
+						count > 0 && props.showMarkerList !== false ? /* @__PURE__ */ jsx(MapContext.Provider, {
+							value: LIST_CONTEXT,
+							children: /* @__PURE__ */ jsx("ul", {
+								className: MapView_module_default.list,
+								"aria-label": messages.mapMarkers,
+								children: props.children
+							})
+						}) : null
+					]
+				})
+			})
+		});
+	}
+	return /* @__PURE__ */ jsx(LoadedMap, {
+		...props,
+		size,
+		className: root
+	});
+}
+const LIST_CONTEXT = { mode: "list" };
+/** OpenStreetMap'te aynı yeri açan adres (yalnız kişi bağlantıya basınca istek gider). */
+function openStreetMapUrl(center, zoom) {
+	const lat = center.lat.toFixed(5);
+	const lng = center.lng.toFixed(5);
+	return `https://www.openstreetmap.org/?mlat=${lat}&mlon=${lng}#map=${Math.round(zoom)}/${lat}/${lng}`;
+}
+function LoadedMap(props) {
+	const messages = useMessages();
+	const { minZoom = 2, maxZoom = 18, fit, onPick, crosshair, children, id, ref, attribution } = props;
+	const [center, setCenter] = useControllable(props.center, props.defaultCenter ?? DEFAULT_CENTER, props.onCenterChange);
+	const [rawZoom, setZoomState] = useControllable(props.zoom, props.defaultZoom ?? DEFAULT_ZOOM, props.onZoomChange);
+	const zoom = clamp(Math.round(rawZoom), minZoom, maxZoom);
+	const urlTemplate = safeTileUrl(props.tileUrl);
+	const viewport = useRef(null);
+	const layer = useRef(null);
+	const [box, setBox] = useState({
+		width: 0,
+		height: 0
+	});
+	const [dragging, setDragging] = useState(false);
+	const [tiles, setTiles] = useState({
+		loaded: false,
+		failed: 0,
+		epoch: 0
+	});
+	const [announcement, setAnnouncement] = useState("");
+	const helpId = useId();
+	const initial = useRef({
+		center,
+		zoom
+	});
+	const drag = useRef(null);
+	const lastWheel = useRef(0);
+	useLayoutEffect(() => {
+		const el = viewport.current;
+		if (!el) return;
+		const measure = () => {
+			const r = el.getBoundingClientRect();
+			setBox((b) => b.width === Math.round(r.width) && b.height === Math.round(r.height) ? b : {
+				width: Math.round(r.width),
+				height: Math.round(r.height)
+			});
+		};
+		measure();
+		const ro = new ResizeObserver(measure);
+		ro.observe(el);
+		return () => ro.disconnect();
+	}, []);
+	const range = useMemo(() => box.width > 0 ? tileRange(center, zoom, box.width, box.height) : null, [
+		center,
+		zoom,
+		box.width,
+		box.height
+	]);
+	useLayoutEffect(() => {
+		const el = layer.current;
+		if (!el || !range) return;
+		el.style.setProperty("--sti-map-tile", `256px`);
+		el.style.setProperty("--sti-map-cols", String(range.x1 - range.x0 + 1));
+		el.style.setProperty("--sti-map-tiles-x", `${range.x0 * 256 - range.left}px`);
+		el.style.setProperty("--sti-map-tiles-y", `${range.y0 * 256 - range.top}px`);
+	});
+	const setZoom = useCallback((z) => setZoomState(clamp(Math.round(z), minZoom, maxZoom)), [
+		setZoomState,
+		minZoom,
+		maxZoom
+	]);
+	/** `delta` kadar yakınlaştırır; `at` (görünüm pikseli) verilirse o nokta yerinde kalır. */
+	const zoomBy = useCallback((delta, at) => {
+		const next = clamp(zoom + delta, minZoom, maxZoom);
+		if (next === zoom) return;
+		if (at && box.width > 0) {
+			const c = project(center, zoom);
+			const point = {
+				x: c.x + (at.x - box.width / 2),
+				y: c.y + (at.y - box.height / 2)
+			};
+			const geo = unproject(point, zoom);
+			const target = project(geo, next);
+			setCenter(unproject({
+				x: target.x - (at.x - box.width / 2),
+				y: clamp(target.y - (at.y - box.height / 2), 0, worldSize(next))
+			}, next));
+		}
+		setZoom(next);
+		setAnnouncement(template(messages.mapZoomLevel, { zoom: next }));
+	}, [
+		zoom,
+		minZoom,
+		maxZoom,
+		box,
+		center,
+		setCenter,
+		setZoom,
+		messages.mapZoomLevel
+	]);
+	/** Görünüm pikselindeki konum. */
+	const toLatLng = useCallback((px, py) => {
+		const c = project(center, zoom);
+		return unproject({
+			x: c.x + (px - box.width / 2),
+			y: clamp(c.y + (py - box.height / 2), 0, worldSize(zoom))
+		}, zoom);
+	}, [
+		center,
+		zoom,
+		box
+	]);
+	const fitKey = fit ? fit.map((p) => `${p.lat},${p.lng}`).join(";") : "";
+	const appliedFit = useRef("");
+	useEffect(() => {
+		if (!fit || !fitKey || box.width === 0 || appliedFit.current === fitKey) return;
+		appliedFit.current = fitKey;
+		const view = fitView(fit, box.width, box.height, {
+			minZoom,
+			maxZoom
+		});
+		if (view) {
+			setCenter(view.center);
+			setZoom(view.zoom);
+		}
+	}, [
+		fitKey,
+		box.width,
+		box.height
+	]);
+	useEffect(() => {
+		const el = viewport.current;
+		if (!el) return;
+		const onWheel = (e) => {
+			if (!(e.ctrlKey || e.metaKey)) return;
+			e.preventDefault();
+			const now = performance.now();
+			if (now - lastWheel.current < 160) return;
+			lastWheel.current = now;
+			const r = el.getBoundingClientRect();
+			zoomBy(e.deltaY < 0 ? 1 : -1, {
+				x: e.clientX - r.left,
+				y: e.clientY - r.top
+			});
+		};
+		el.addEventListener("wheel", onWheel, { passive: false });
+		return () => el.removeEventListener("wheel", onWheel);
+	}, [zoomBy]);
+	const onPointerDown = (e) => {
+		if (e.pointerType === "mouse" && e.button !== 0) return;
+		drag.current = {
+			id: e.pointerId,
+			x: e.clientX,
+			y: e.clientY,
+			origin: center,
+			moved: false
+		};
+		try {
+			e.currentTarget.setPointerCapture(e.pointerId);
+		} catch {}
+	};
+	const onPointerMove = (e) => {
+		const d = drag.current;
+		if (!d || d.id !== e.pointerId) return;
+		const dx = e.clientX - d.x;
+		const dy = e.clientY - d.y;
+		if (!d.moved && Math.hypot(dx, dy) < 5) return;
+		if (!d.moved) setDragging(true);
+		d.moved = true;
+		setCenter(panBy(d.origin, zoom, -dx, -dy));
+	};
+	const endDrag = (e, cancelled) => {
+		const d = drag.current;
+		if (!d || d.id !== e.pointerId) return;
+		drag.current = null;
+		setDragging(false);
+		if (!d.moved && !cancelled && onPick) {
+			const r = e.currentTarget.getBoundingClientRect();
+			onPick(toLatLng(e.clientX - r.left, e.clientY - r.top));
+		}
+	};
+	const onKeyDown = (e) => {
+		if (e.target !== e.currentTarget || e.altKey || e.ctrlKey || e.metaKey) return;
+		const step = e.shiftKey ? 256 : PAN_STEP;
+		const pan = (dx, dy) => {
+			e.preventDefault();
+			setCenter(panBy(center, zoom, dx, dy));
+		};
+		switch (e.key) {
+			case "ArrowLeft": return pan(-step, 0);
+			case "ArrowRight": return pan(step, 0);
+			case "ArrowUp": return pan(0, -step);
+			case "ArrowDown": return pan(0, step);
+			case "+":
+			case "=":
+				e.preventDefault();
+				return zoomBy(1);
+			case "-":
+			case "_":
+				e.preventDefault();
+				return zoomBy(-1);
+			case "Home":
+				e.preventDefault();
+				setCenter(initial.current.center);
+				setZoom(initial.current.zoom);
+				return;
+			case "Enter":
+			case " ":
+				if (onPick) {
+					e.preventDefault();
+					onPick(center);
+				}
+				return;
+		}
+	};
+	const toPixel = useCallback((p) => {
+		const size = worldSize(zoom);
+		const c = project(center, zoom);
+		const w = project(p, zoom);
+		let dx = w.x - c.x;
+		dx = ((dx + size / 2) % size + size) % size - size / 2;
+		return {
+			x: box.width / 2 + dx,
+			y: box.height / 2 + (w.y - c.y)
+		};
+	}, [
+		center,
+		zoom,
+		box.width,
+		box.height
+	]);
+	const context = useMemo(() => ({
+		mode: "map",
+		toPixel,
+		width: box.width,
+		height: box.height
+	}), [
+		toPixel,
+		box.width,
+		box.height
+	]);
+	const tileList = useMemo(() => {
+		if (!range) return [];
+		const out = [];
+		for (let y = range.y0; y <= range.y1; y++) for (let x = range.x0; x <= range.x1; x++) out.push({
+			key: `${range.zoom}/${x}/${y}`,
+			src: tileSrc(urlTemplate, range.zoom, wrapTileX(x, range.zoom), y)
+		});
+		return out;
+	}, [range, urlTemplate]);
+	const failed = tiles.failed > 0 && !tiles.loaded;
+	const zoomIn = () => zoomBy(1);
+	const zoomOut = () => zoomBy(-1);
+	return /* @__PURE__ */ jsxs("div", {
+		id,
+		ref,
+		className: props.className,
+		"data-state": "loaded",
+		"data-size": props.size,
+		"data-dragging": dragging ? "" : void 0,
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				ref: viewport,
+				className: MapView_module_default.viewport,
+				role: "group",
+				tabIndex: 0,
+				"aria-label": props.label,
+				"aria-roledescription": messages.mapRole,
+				"aria-describedby": helpId,
+				"data-crosshair": crosshair,
+				onKeyDown,
+				onPointerDown,
+				onPointerMove,
+				onPointerUp: (e) => endDrag(e, false),
+				onPointerCancel: (e) => endDrag(e, true),
+				onDoubleClick: (e) => {
+					const r = e.currentTarget.getBoundingClientRect();
+					zoomBy(1, {
+						x: e.clientX - r.left,
+						y: e.clientY - r.top
+					});
+				},
+				children: [
+					/* @__PURE__ */ jsx("div", {
+						ref: layer,
+						className: MapView_module_default.tiles,
+						"aria-hidden": "true",
+						"data-ready": range ? "" : void 0,
+						children: tileList.map((t) => /* @__PURE__ */ jsx("img", {
+							className: MapView_module_default.tile,
+							src: t.src,
+							alt: "",
+							width: 256,
+							height: 256,
+							draggable: false,
+							decoding: "async",
+							referrerPolicy: "strict-origin-when-cross-origin",
+							onLoad: () => setTiles((s) => s.loaded ? s : {
+								...s,
+								loaded: true
+							}),
+							onError: () => setTiles((s) => ({
+								...s,
+								failed: s.failed + 1
+							}))
+						}, t.key))
+					}, tiles.epoch),
+					/* @__PURE__ */ jsx("div", {
+						className: MapView_module_default.markers,
+						children: /* @__PURE__ */ jsx(MapContext.Provider, {
+							value: context,
+							children
+						})
+					}),
+					crosshair ? /* @__PURE__ */ jsx("span", {
+						className: MapView_module_default.crosshair,
+						"aria-hidden": "true"
+					}) : null
+				]
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: MapView_module_default.controls,
+				children: [/* @__PURE__ */ jsx(IconButton, {
+					variant: "ghost",
+					size: "sm",
+					label: messages.mapZoomIn,
+					icon: /* @__PURE__ */ jsx(PlusIcon, {}),
+					isDisabled: zoom >= maxZoom,
+					onPress: () => {
+						zoomIn();
+						if (zoom + 1 >= maxZoom) viewport.current?.focus();
+					}
+				}), /* @__PURE__ */ jsx(IconButton, {
+					variant: "ghost",
+					size: "sm",
+					label: messages.mapZoomOut,
+					icon: /* @__PURE__ */ jsx(MinusIcon, {}),
+					isDisabled: zoom <= minZoom,
+					onPress: () => {
+						zoomOut();
+						if (zoom - 1 <= minZoom) viewport.current?.focus();
+					}
+				})]
+			}),
+			/* @__PURE__ */ jsx("div", {
+				className: MapView_module_default.attribution,
+				children: attribution ?? /* @__PURE__ */ jsx(Link, {
+					variant: "subtle",
+					external: true,
+					href: "https://www.openstreetmap.org/copyright",
+					children: messages.mapAttribution
+				})
+			}),
+			failed ? /* @__PURE__ */ jsxs("div", {
+				className: MapView_module_default.failed,
+				role: "status",
+				children: [/* @__PURE__ */ jsx("p", {
+					className: MapView_module_default.failedText,
+					children: messages.mapTilesFailed
+				}), /* @__PURE__ */ jsx(Button, {
+					size: "sm",
+					onPress: () => setTiles((s) => ({
+						loaded: false,
+						failed: 0,
+						epoch: s.epoch + 1
+					})),
+					children: messages.mapReload
+				})]
+			}) : null,
+			/* @__PURE__ */ jsxs(VisuallyHidden, {
+				id: helpId,
+				children: [messages.mapKeyboardHelp, onPick ? ` ${messages.mapPickHelp}` : ""]
+			}),
+			/* @__PURE__ */ jsx("span", {
+				className: MapView_module_default.live,
+				role: "status",
+				"aria-live": "polite",
+				children: announcement
+			})
+		]
+	});
+}
+export { MapView, OSM_TILE_URL, openStreetMapUrl, safeTileUrl, tileSrc };

package/dist/maps/MapView/MapView.module.js

@@ -0,0 +1,23 @@
+import './MapView.css';
+// src/maps/MapView/MapView.module.css
+var MapView_module_default = {
+	"root": "sti-MapView-root-2c464",
+	"viewport": "sti-MapView-viewport-32f46",
+	"tiles": "sti-MapView-tiles-41d91",
+	"tile": "sti-MapView-tile-09977",
+	"markers": "sti-MapView-markers-dba92",
+	"crosshair": "sti-MapView-crosshair-5acc9",
+	"controls": "sti-MapView-controls-f0b39",
+	"attribution": "sti-MapView-attribution-87cce",
+	"failed": "sti-MapView-failed-982bd",
+	"failedText": "sti-MapView-failedText-a25f1",
+	"live": "sti-MapView-live-ccdfb",
+	"consent": "sti-MapView-consent-892ea",
+	"consentCard": "sti-MapView-consentCard-8e1c2",
+	"consentIcon": "sti-MapView-consentIcon-44a5c",
+	"consentTitle": "sti-MapView-consentTitle-1514e",
+	"consentText": "sti-MapView-consentText-1b1db",
+	"consentActions": "sti-MapView-consentActions-e6536",
+	"list": "sti-MapView-list-86b6c"
+};
+export { MapView_module_default as default };

package/dist/maps/MapView/index.d.ts

@@ -0,0 +1,2 @@
+import { MapView, MapViewProps, MapViewSize, OSM_TILE_URL, openStreetMapUrl, safeTileUrl, tileSrc } from "./MapView.js";
+export { MapView, MapViewProps, MapViewSize, OSM_TILE_URL, openStreetMapUrl, safeTileUrl, tileSrc };