fantasy-map-router 1.0.0

package/README.md

@@ -0,0 +1 @@
+React component for fantasy map with router

package/dist/fantasy-map-router.css

@@ -0,0 +1,2 @@
+.map-wrapper{background-color:#111;font-family:Cormorant Garamond,serif;position:relative;overflow:hidden}.map-container{background-color:#dcb88c;width:100%;height:100%}.parchment-overlay{pointer-events:none;z-index:400;mix-blend-mode:multiply;opacity:.9;background-color:#dcb88c;background-image:url(https://www.transparenttextures.com/patterns/aged-paper.png);position:absolute;inset:0}.burnt-edges{pointer-events:none;z-index:401;position:absolute;inset:0;box-shadow:inset 0 0 200px #2a1a0ef2}.l2-window{-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);z-index:1000;background-color:#0a0a0ad9;border:2px solid #5c4a33;width:20rem;padding:.25rem;transition:background-color .3s,-webkit-backdrop-filter .3s,backdrop-filter .3s;position:absolute;top:1.5rem;left:1.5rem;box-shadow:0 0 15px #000000e6}.l2-window-collapsed{-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background-color:#0a0a0a66}.l2-window-inner{border:1px solid #3a2e20;height:100%;padding:1.25rem}.l2-header{cursor:pointer;border-bottom:2px solid #5c4a33;justify-content:space-between;align-items:center;margin-bottom:1.25rem;padding-bottom:.75rem;transition:border-color .2s;display:flex}.l2-header:hover{border-bottom-color:#8c7853}.l2-header-collapsed{border-bottom:none;margin-bottom:0;padding-bottom:0}.l2-header-left{align-items:center;gap:.75rem;display:flex}.l2-toggle-btn{color:#8c7853;cursor:pointer;background:0 0;border:none;justify-content:center;align-items:center;padding:0;transition:color .2s;display:flex}.l2-header:hover .l2-toggle-btn{color:#fc0}.l2-collapsed-summary{cursor:pointer;border-top:1px dashed #5c4a33;margin-top:.5rem;padding-top:.5rem;transition:opacity .2s}.l2-collapsed-summary:hover{opacity:.8}.l2-summary-route{color:#d4c4a1;align-items:center;gap:.5rem;margin-bottom:.25rem;font-size:.95rem;display:flex}.l2-summary-point{color:#fc0;white-space:nowrap;text-overflow:ellipsis;max-width:110px;font-weight:600;overflow:hidden}.l2-summary-arrow{color:#8c7853;flex-shrink:0}.l2-summary-stats{color:#a89f91;font-size:.85rem;font-style:italic}.l2-header-icon{color:#fc0;width:1.5rem;height:1.5rem}.l2-title{color:#fc0;letter-spacing:.025em;text-transform:uppercase;filter:drop-shadow(0 1px 2px #000);margin:0;font-size:1.25rem;font-weight:700}.l2-form{flex-direction:column;gap:1.25rem;display:flex}.l2-form-group{flex-direction:column;display:flex}.l2-label{color:#8c7853;letter-spacing:.05em;margin-bottom:.25rem;font-size:.875rem;font-weight:700;display:block}.l2-input-wrapper{position:relative}.l2-input-icon{width:1rem;height:1rem;position:absolute;top:50%;left:.5rem;transform:translateY(-50%)}.l2-icon-blue{color:#06c}.l2-icon-red{color:#c00}.l2-input{color:#d4c4a1;box-sizing:border-box;background-color:#111;border:1px solid #5c4a33;width:100%;padding:.375rem .75rem .375rem 2rem;font-family:Cormorant Garamond,serif;font-size:1rem;transition:border-color .2s;box-shadow:inset 0 2px 4px #00000080}.l2-input:focus{border-color:#fc0;outline:none}.l2-input::placeholder{color:#4a3b29}.l2-error{color:#f66;text-align:center;background-color:#300c;border:1px solid #c00;padding:.5rem;font-size:.875rem;font-weight:700}.l2-button-group{gap:.5rem;padding-top:.5rem;display:flex}.l2-button{letter-spacing:.05em;cursor:pointer;border:1px solid #5c4a33;justify-content:center;align-items:center;gap:.5rem;padding:.375rem 1rem;font-size:.875rem;font-weight:700;transition:all .2s;display:flex;box-shadow:0 2px 5px #00000080}.l2-button:disabled{opacity:.5;cursor:not-allowed}.l2-button-primary{color:#fc0;background:linear-gradient(#3a2e20,#1a1510);flex:1}.l2-button-primary:hover:not(:disabled){background:linear-gradient(#4a3b29,#2a221a)}.l2-button-secondary{color:#8c7853;background:linear-gradient(#222,#000)}.l2-button-secondary:hover:not(:disabled){background:linear-gradient(#333,#111)}.l2-btn-icon{width:1rem;height:1rem}.l2-route-info{background-color:#11111180;border:1px solid #3a2e20;flex-direction:column;gap:.25rem;margin-top:1.25rem;padding:.75rem;display:flex}.l2-route-stat-row{justify-content:space-between;align-items:center;font-size:1rem;display:flex}.l2-stat-label{color:#8c7853;font-weight:700}.l2-stat-value{color:#d4c4a1;font-weight:700}.l2-marker-container{flex-direction:column;align-items:center;display:flex;position:relative}.l2-marker-dest-icon-wrapper{justify-content:center;align-items:center;width:2rem;height:2rem;display:flex}.l2-marker-dest-icon{background-color:#c00;border:3px solid #fc0;width:1rem;height:1rem;transform:rotate(45deg);box-shadow:0 0 15px #c00}.l2-marker-origin-icon-wrapper{justify-content:center;align-items:center;width:1.5rem;height:1.5rem;display:flex}.l2-marker-origin-icon{background-color:#06c;border:2px solid #fff;width:.75rem;height:.75rem;transform:rotate(45deg);box-shadow:0 0 10px #06c}.l2-marker-label{white-space:nowrap;filter:drop-shadow(0 2px 2px #000);font-weight:700;position:absolute}.l2-marker-label-dest{color:#fc0;font-size:1.125rem;top:2rem}.l2-marker-label-origin{color:#fff;font-size:.875rem;top:1.5rem}.l2-route-line{filter:drop-shadow(0 0 5px #fa0c)}
+/*$vite$:1*/

package/dist/fantasy-map.es.js

@@ -0,0 +1,434 @@
+import { useEffect as e, useState as t } from "react";
+import { MapContainer as n, Marker as r, Polyline as i, TileLayer as a, useMap as o } from "react-leaflet";
+import s from "leaflet";
+import { ChevronDown as c, ChevronUp as l, Crosshair as u, Map as d, MapPin as f, Navigation as p } from "lucide-react";
+//#region \0rolldown/runtime.js
+var m = (e, t) => () => (t || e((t = { exports: {} }).exports, t), t.exports), h = /* @__PURE__ */ ((e) => typeof require < "u" ? require : typeof Proxy < "u" ? new Proxy(e, { get: (e, t) => (typeof require < "u" ? require : e)[t] }) : e)(function(e) {
+	if (typeof require < "u") return require.apply(this, arguments);
+	throw Error("Calling `require` for \"" + e + "\" in an environment that doesn't expose the `require` function. See https://rolldown.rs/in-depth/bundling-cjs#require-external-modules for more details.");
+}), g = /* @__PURE__ */ m(((e) => {
+	var t = Symbol.for("react.transitional.element"), n = Symbol.for("react.fragment");
+	function r(e, n, r) {
+		var i = null;
+		if (r !== void 0 && (i = "" + r), n.key !== void 0 && (i = "" + n.key), "key" in n) for (var a in r = {}, n) a !== "key" && (r[a] = n[a]);
+		else r = n;
+		return n = r.ref, {
+			$$typeof: t,
+			type: e,
+			key: i,
+			ref: n === void 0 ? null : n,
+			props: r
+		};
+	}
+	e.Fragment = n, e.jsx = r, e.jsxs = r;
+})), _ = /* @__PURE__ */ m(((e) => {
+	process.env.NODE_ENV !== "production" && (function() {
+		function t(e) {
+			if (e == null) return null;
+			if (typeof e == "function") return e.$$typeof === k ? null : e.displayName || e.name || null;
+			if (typeof e == "string") return e;
+			switch (e) {
+				case v: return "Fragment";
+				case b: return "Profiler";
+				case y: return "StrictMode";
+				case w: return "Suspense";
+				case T: return "SuspenseList";
+				case O: return "Activity";
+			}
+			if (typeof e == "object") switch (typeof e.tag == "number" && console.error("Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."), e.$$typeof) {
+				case _: return "Portal";
+				case S: return e.displayName || "Context";
+				case x: return (e._context.displayName || "Context") + ".Consumer";
+				case C:
+					var n = e.render;
+					return e = e.displayName, e ||= (e = n.displayName || n.name || "", e === "" ? "ForwardRef" : "ForwardRef(" + e + ")"), e;
+				case E: return n = e.displayName || null, n === null ? t(e.type) || "Memo" : n;
+				case D:
+					n = e._payload, e = e._init;
+					try {
+						return t(e(n));
+					} catch {}
+			}
+			return null;
+		}
+		function n(e) {
+			return "" + e;
+		}
+		function r(e) {
+			try {
+				n(e);
+				var t = !1;
+			} catch {
+				t = !0;
+			}
+			if (t) {
+				t = console;
+				var r = t.error, i = typeof Symbol == "function" && Symbol.toStringTag && e[Symbol.toStringTag] || e.constructor.name || "Object";
+				return r.call(t, "The provided key is an unsupported type %s. This value must be coerced to a string before using it here.", i), n(e);
+			}
+		}
+		function i(e) {
+			if (e === v) return "<>";
+			if (typeof e == "object" && e && e.$$typeof === D) return "<...>";
+			try {
+				var n = t(e);
+				return n ? "<" + n + ">" : "<...>";
+			} catch {
+				return "<...>";
+			}
+		}
+		function a() {
+			var e = A.A;
+			return e === null ? null : e.getOwner();
+		}
+		function o() {
+			return Error("react-stack-top-frame");
+		}
+		function s(e) {
+			if (j.call(e, "key")) {
+				var t = Object.getOwnPropertyDescriptor(e, "key").get;
+				if (t && t.isReactWarning) return !1;
+			}
+			return e.key !== void 0;
+		}
+		function c(e, t) {
+			function n() {
+				P || (P = !0, console.error("%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://react.dev/link/special-props)", t));
+			}
+			n.isReactWarning = !0, Object.defineProperty(e, "key", {
+				get: n,
+				configurable: !0
+			});
+		}
+		function l() {
+			var e = t(this.type);
+			return F[e] || (F[e] = !0, console.error("Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release.")), e = this.props.ref, e === void 0 ? null : e;
+		}
+		function u(e, t, n, r, i, a) {
+			var o = n.ref;
+			return e = {
+				$$typeof: g,
+				type: e,
+				key: t,
+				props: n,
+				_owner: r
+			}, (o === void 0 ? null : o) === null ? Object.defineProperty(e, "ref", {
+				enumerable: !1,
+				value: null
+			}) : Object.defineProperty(e, "ref", {
+				enumerable: !1,
+				get: l
+			}), e._store = {}, Object.defineProperty(e._store, "validated", {
+				configurable: !1,
+				enumerable: !1,
+				writable: !0,
+				value: 0
+			}), Object.defineProperty(e, "_debugInfo", {
+				configurable: !1,
+				enumerable: !1,
+				writable: !0,
+				value: null
+			}), Object.defineProperty(e, "_debugStack", {
+				configurable: !1,
+				enumerable: !1,
+				writable: !0,
+				value: i
+			}), Object.defineProperty(e, "_debugTask", {
+				configurable: !1,
+				enumerable: !1,
+				writable: !0,
+				value: a
+			}), Object.freeze && (Object.freeze(e.props), Object.freeze(e)), e;
+		}
+		function d(e, n, i, o, l, d) {
+			var p = n.children;
+			if (p !== void 0) if (o) if (M(p)) {
+				for (o = 0; o < p.length; o++) f(p[o]);
+				Object.freeze && Object.freeze(p);
+			} else console.error("React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead.");
+			else f(p);
+			if (j.call(n, "key")) {
+				p = t(e);
+				var m = Object.keys(n).filter(function(e) {
+					return e !== "key";
+				});
+				o = 0 < m.length ? "{key: someKey, " + m.join(": ..., ") + ": ...}" : "{key: someKey}", R[p + o] || (m = 0 < m.length ? "{" + m.join(": ..., ") + ": ...}" : "{}", console.error("A props object containing a \"key\" prop is being spread into JSX:\n  let props = %s;\n  <%s {...props} />\nReact keys must be passed directly to JSX without using spread:\n  let props = %s;\n  <%s key={someKey} {...props} />", o, p, m, p), R[p + o] = !0);
+			}
+			if (p = null, i !== void 0 && (r(i), p = "" + i), s(n) && (r(n.key), p = "" + n.key), "key" in n) for (var h in i = {}, n) h !== "key" && (i[h] = n[h]);
+			else i = n;
+			return p && c(i, typeof e == "function" ? e.displayName || e.name || "Unknown" : e), u(e, p, i, a(), l, d);
+		}
+		function f(e) {
+			p(e) ? e._store && (e._store.validated = 1) : typeof e == "object" && e && e.$$typeof === D && (e._payload.status === "fulfilled" ? p(e._payload.value) && e._payload.value._store && (e._payload.value._store.validated = 1) : e._store && (e._store.validated = 1));
+		}
+		function p(e) {
+			return typeof e == "object" && !!e && e.$$typeof === g;
+		}
+		var m = h("react"), g = Symbol.for("react.transitional.element"), _ = Symbol.for("react.portal"), v = Symbol.for("react.fragment"), y = Symbol.for("react.strict_mode"), b = Symbol.for("react.profiler"), x = Symbol.for("react.consumer"), S = Symbol.for("react.context"), C = Symbol.for("react.forward_ref"), w = Symbol.for("react.suspense"), T = Symbol.for("react.suspense_list"), E = Symbol.for("react.memo"), D = Symbol.for("react.lazy"), O = Symbol.for("react.activity"), k = Symbol.for("react.client.reference"), A = m.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE, j = Object.prototype.hasOwnProperty, M = Array.isArray, N = console.createTask ? console.createTask : function() {
+			return null;
+		};
+		m = { react_stack_bottom_frame: function(e) {
+			return e();
+		} };
+		var P, F = {}, I = m.react_stack_bottom_frame.bind(m, o)(), L = N(i(o)), R = {};
+		e.Fragment = v, e.jsx = function(e, t, n) {
+			var r = 1e4 > A.recentlyCreatedOwnerStacks++;
+			return d(e, t, n, !1, r ? Error("react-stack-top-frame") : I, r ? N(i(e)) : L);
+		}, e.jsxs = function(e, t, n) {
+			var r = 1e4 > A.recentlyCreatedOwnerStacks++;
+			return d(e, t, n, !0, r ? Error("react-stack-top-frame") : I, r ? N(i(e)) : L);
+		};
+	})();
+})), v = (/* @__PURE__ */ m(((e, t) => {
+	process.env.NODE_ENV === "production" ? t.exports = g() : t.exports = _();
+})))(), y = s.divIcon({
+	className: "bg-transparent",
+	html: "<div class=\"l2-marker-container\">\n           <div class=\"l2-marker-dest-icon-wrapper\">\n             <div class=\"l2-marker-dest-icon\"></div>\n           </div>\n           <div class=\"l2-marker-label l2-marker-label-dest\">Target</div>\n         </div>",
+	iconSize: [32, 32],
+	iconAnchor: [16, 16]
+}), b = s.divIcon({
+	className: "bg-transparent",
+	html: "<div class=\"l2-marker-container\">\n           <div class=\"l2-marker-origin-icon-wrapper\">\n             <div class=\"l2-marker-origin-icon\"></div>\n           </div>\n           <div class=\"l2-marker-label l2-marker-label-origin\">You</div>\n         </div>",
+	iconSize: [24, 24],
+	iconAnchor: [12, 12]
+});
+function x({ route: t, origin: n, destination: r }) {
+	let i = o();
+	return e(() => {
+		t.length > 0 ? i.fitBounds(s.latLngBounds(t), {
+			padding: [50, 50],
+			animate: !0,
+			duration: 1.5
+		}) : n && r ? i.fitBounds(s.latLngBounds([n, r]), {
+			padding: [50, 50],
+			animate: !0,
+			duration: 1.5
+		}) : n ? i.setView(n, 10, { animate: !0 }) : r ? i.setView(r, 10, { animate: !0 }) : i.setView([50, 10], 4, { animate: !0 });
+	}, [
+		t,
+		n,
+		r,
+		i
+	]), null;
+}
+function S({ width: e = "100%", height: o = "100vh" }) {
+	let [s, m] = t(""), [h, g] = t(""), [_, S] = t(null), [C, w] = t(null), [T, E] = t([]), [D, O] = t(""), [k, A] = t(""), [j, M] = t(!1), [N, P] = t(""), [F, I] = t(!0), L = async (e, t) => {
+		let n = await (await fetch(`https://nominatim.openstreetmap.org/search?format=json&q=${encodeURIComponent(e)}`)).json();
+		if (n && n.length > 0) return [parseFloat(n[0].lat), parseFloat(n[0].lon)];
+		throw Error(`${t} not found`);
+	}, R = async (e, t) => {
+		let n = await (await fetch(`https://router.project-osrm.org/route/v1/driving/${e[1]},${e[0]};${t[1]},${t[0]}?overview=full&geometries=geojson`)).json();
+		if (n.code === "Ok") {
+			let e = n.routes[0].geometry.coordinates.map((e) => [e[1], e[0]]), t = (n.routes[0].distance / 1e3).toFixed(1), r = Math.round(n.routes[0].duration / 60), i = r > 60 ? `${Math.floor(r / 60)} h ${r % 60} m` : `${r} m`;
+			return {
+				coords: e,
+				distance: `${t} km`,
+				duration: i
+			};
+		}
+		throw Error("Route not found");
+	};
+	return /* @__PURE__ */ (0, v.jsxs)("div", {
+		className: "map-wrapper",
+		style: {
+			width: e,
+			height: o
+		},
+		children: [
+			/* @__PURE__ */ (0, v.jsxs)(n, {
+				center: [50, 10],
+				zoom: 4,
+				zoomControl: !1,
+				attributionControl: !1,
+				className: "map-container",
+				children: [
+					/* @__PURE__ */ (0, v.jsx)(a, {
+						url: "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
+						attribution: "© <a href=\"https://www.openstreetmap.org/copyright\">OpenStreetMap</a>",
+						className: "fantasy-tiles"
+					}),
+					/* @__PURE__ */ (0, v.jsx)(x, {
+						route: T,
+						origin: _,
+						destination: C
+					}),
+					C && /* @__PURE__ */ (0, v.jsx)(r, {
+						position: C,
+						icon: y
+					}),
+					_ && /* @__PURE__ */ (0, v.jsx)(r, {
+						position: _,
+						icon: b
+					}),
+					T.length > 0 && /* @__PURE__ */ (0, v.jsx)(i, {
+						positions: T,
+						pathOptions: {
+							color: "#ffaa00",
+							weight: 4,
+							opacity: .9,
+							dashArray: "8, 8",
+							lineCap: "round",
+							className: "l2-route-line"
+						}
+					})
+				]
+			}),
+			/* @__PURE__ */ (0, v.jsx)("div", { className: "parchment-overlay" }),
+			/* @__PURE__ */ (0, v.jsx)("div", { className: "burnt-edges" }),
+			/* @__PURE__ */ (0, v.jsx)("div", {
+				className: `l2-window ${F ? "" : "l2-window-collapsed"}`,
+				children: /* @__PURE__ */ (0, v.jsxs)("div", {
+					className: "l2-window-inner",
+					children: [
+						/* @__PURE__ */ (0, v.jsxs)("div", {
+							className: `l2-header ${F ? "" : "l2-header-collapsed"}`,
+							onClick: () => I(!F),
+							children: [/* @__PURE__ */ (0, v.jsxs)("div", {
+								className: "l2-header-left",
+								children: [/* @__PURE__ */ (0, v.jsx)(d, { className: "l2-header-icon" }), /* @__PURE__ */ (0, v.jsx)("h2", {
+									className: "l2-title",
+									children: "World Map"
+								})]
+							}), /* @__PURE__ */ (0, v.jsx)("button", {
+								className: "l2-toggle-btn",
+								type: "button",
+								children: F ? /* @__PURE__ */ (0, v.jsx)(l, { className: "w-5 h-5" }) : /* @__PURE__ */ (0, v.jsx)(c, { className: "w-5 h-5" })
+							})]
+						}),
+						!F && (s || h) && /* @__PURE__ */ (0, v.jsxs)("div", {
+							className: "l2-collapsed-summary",
+							onClick: () => I(!0),
+							children: [/* @__PURE__ */ (0, v.jsxs)("div", {
+								className: "l2-summary-route",
+								children: [
+									/* @__PURE__ */ (0, v.jsx)("span", {
+										className: "l2-summary-point",
+										title: s,
+										children: s || "..."
+									}),
+									/* @__PURE__ */ (0, v.jsx)("span", {
+										className: "l2-summary-arrow",
+										children: "→"
+									}),
+									/* @__PURE__ */ (0, v.jsx)("span", {
+										className: "l2-summary-point",
+										title: h,
+										children: h || "..."
+									})
+								]
+							}), D && k && /* @__PURE__ */ (0, v.jsxs)("div", {
+								className: "l2-summary-stats",
+								children: [
+									D,
+									" • ",
+									k
+								]
+							})]
+						}),
+						F && /* @__PURE__ */ (0, v.jsxs)("div", {
+							className: "l2-window-body",
+							children: [/* @__PURE__ */ (0, v.jsxs)("form", {
+								onSubmit: async (e) => {
+									if (e.preventDefault(), !(!s || !h)) {
+										M(!0), P("");
+										try {
+											let e = await L(s, "Origin"), t = await L(h, "Destination");
+											S(e), w(t);
+											let n = await R(e, t);
+											E(n.coords), O(n.distance), A(n.duration), I(!1);
+										} catch (e) {
+											console.error("Routing error:", e), P(e.message || "Failed to calculate route."), E([]);
+										} finally {
+											M(!1);
+										}
+									}
+								},
+								className: "l2-form",
+								children: [
+									/* @__PURE__ */ (0, v.jsxs)("div", {
+										className: "l2-form-group",
+										children: [/* @__PURE__ */ (0, v.jsx)("label", {
+											className: "l2-label",
+											children: "Current Location"
+										}), /* @__PURE__ */ (0, v.jsxs)("div", {
+											className: "l2-input-wrapper",
+											children: [/* @__PURE__ */ (0, v.jsx)(u, { className: "l2-input-icon l2-icon-blue" }), /* @__PURE__ */ (0, v.jsx)("input", {
+												type: "text",
+												value: s,
+												onChange: (e) => m(e.target.value),
+												placeholder: "Enter city...",
+												className: "l2-input"
+											})]
+										})]
+									}),
+									/* @__PURE__ */ (0, v.jsxs)("div", {
+										className: "l2-form-group",
+										children: [/* @__PURE__ */ (0, v.jsx)("label", {
+											className: "l2-label",
+											children: "Quest Target"
+										}), /* @__PURE__ */ (0, v.jsxs)("div", {
+											className: "l2-input-wrapper",
+											children: [/* @__PURE__ */ (0, v.jsx)(f, { className: "l2-input-icon l2-icon-red" }), /* @__PURE__ */ (0, v.jsx)("input", {
+												type: "text",
+												value: h,
+												onChange: (e) => g(e.target.value),
+												placeholder: "Enter destination...",
+												className: "l2-input"
+											})]
+										})]
+									}),
+									N && /* @__PURE__ */ (0, v.jsx)("div", {
+										className: "l2-error",
+										children: N
+									}),
+									/* @__PURE__ */ (0, v.jsxs)("div", {
+										className: "l2-button-group",
+										children: [/* @__PURE__ */ (0, v.jsxs)("button", {
+											type: "submit",
+											disabled: j || !s || !h,
+											className: "l2-button l2-button-primary",
+											children: [/* @__PURE__ */ (0, v.jsx)(p, { className: "l2-btn-icon" }), j ? "Searching..." : "Find Path"]
+										}), (T.length > 0 || _ || C) && /* @__PURE__ */ (0, v.jsx)("button", {
+											type: "button",
+											onClick: () => {
+												E([]), S(null), w(null), O(""), A(""), m(""), g(""), P("");
+											},
+											className: "l2-button l2-button-secondary",
+											children: "Clear"
+										})]
+									})
+								]
+							}), T.length > 0 && /* @__PURE__ */ (0, v.jsxs)("div", {
+								className: "l2-route-info",
+								children: [/* @__PURE__ */ (0, v.jsxs)("div", {
+									className: "l2-route-stat-row",
+									children: [/* @__PURE__ */ (0, v.jsx)("span", {
+										className: "l2-stat-label",
+										children: "Distance:"
+									}), /* @__PURE__ */ (0, v.jsx)("span", {
+										className: "l2-stat-value",
+										children: D
+									})]
+								}), /* @__PURE__ */ (0, v.jsxs)("div", {
+									className: "l2-route-stat-row",
+									children: [/* @__PURE__ */ (0, v.jsx)("span", {
+										className: "l2-stat-label",
+										children: "Travel Time:"
+									}), /* @__PURE__ */ (0, v.jsx)("span", {
+										className: "l2-stat-value",
+										children: k
+									})]
+								})]
+							})]
+						})
+					]
+				})
+			})
+		]
+	});
+}
+//#endregion
+//#region src/index.ts
+var C = S;
+//#endregion
+export { S as FantasyMap, C as default };

package/dist/fantasy-map.umd.js

@@ -0,0 +1,16 @@
+(function(e,t){typeof exports==`object`&&typeof module<`u`?t(exports,require(`react`),require(`react-leaflet`),require(`leaflet`),require(`lucide-react`)):typeof define==`function`&&define.amd?define([`exports`,`react`,`react-leaflet`,`leaflet`,`lucide-react`],t):(e=typeof globalThis<`u`?globalThis:e||self,t(e.FantasyMap={},e.React,e.ReactLeaflet,e.L,e.lucide_react))})(this,function(e,t,n,r,i){Object.defineProperties(e,{__esModule:{value:!0},[Symbol.toStringTag]:{value:`Module`}});var a=Object.create,o=Object.defineProperty,s=Object.getOwnPropertyDescriptor,c=Object.getOwnPropertyNames,l=Object.getPrototypeOf,u=Object.prototype.hasOwnProperty,d=(e,t)=>()=>(t||e((t={exports:{}}).exports,t),t.exports),f=(e,t,n,r)=>{if(t&&typeof t==`object`||typeof t==`function`)for(var i=c(t),a=0,l=i.length,d;a<l;a++)d=i[a],!u.call(e,d)&&d!==n&&o(e,d,{get:(e=>t[e]).bind(null,d),enumerable:!(r=s(t,d))||r.enumerable});return e},p=(e,t,n)=>(n=e==null?{}:a(l(e)),f(t||!e||!e.__esModule?o(n,`default`,{value:e,enumerable:!0}):n,e));t=p(t),r=p(r);var m=d((e=>{var t=Symbol.for(`react.transitional.element`),n=Symbol.for(`react.fragment`);function r(e,n,r){var i=null;if(r!==void 0&&(i=``+r),n.key!==void 0&&(i=``+n.key),`key`in n)for(var a in r={},n)a!==`key`&&(r[a]=n[a]);else r=n;return n=r.ref,{$$typeof:t,type:e,key:i,ref:n===void 0?null:n,props:r}}e.Fragment=n,e.jsx=r,e.jsxs=r})),h=d((e=>{process.env.NODE_ENV!==`production`&&(function(){function t(e){if(e==null)return null;if(typeof e==`function`)return e.$$typeof===O?null:e.displayName||e.name||null;if(typeof e==`string`)return e;switch(e){case _:return`Fragment`;case y:return`Profiler`;case v:return`StrictMode`;case C:return`Suspense`;case w:return`SuspenseList`;case D:return`Activity`}if(typeof e==`object`)switch(typeof e.tag==`number`&&console.error(`Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue.`),e.$$typeof){case g:return`Portal`;case x:return e.displayName||`Context`;case b:return(e._context.displayName||`Context`)+`.Consumer`;case S:var n=e.render;return e=e.displayName,e||=(e=n.displayName||n.name||``,e===``?`ForwardRef`:`ForwardRef(`+e+`)`),e;case T:return n=e.displayName||null,n===null?t(e.type)||`Memo`:n;case E:n=e._payload,e=e._init;try{return t(e(n))}catch{}}return null}function n(e){return``+e}function r(e){try{n(e);var t=!1}catch{t=!0}if(t){t=console;var r=t.error,i=typeof Symbol==`function`&&Symbol.toStringTag&&e[Symbol.toStringTag]||e.constructor.name||`Object`;return r.call(t,`The provided key is an unsupported type %s. This value must be coerced to a string before using it here.`,i),n(e)}}function i(e){if(e===_)return`<>`;if(typeof e==`object`&&e&&e.$$typeof===E)return`<...>`;try{var n=t(e);return n?`<`+n+`>`:`<...>`}catch{return`<...>`}}function a(){var e=k.A;return e===null?null:e.getOwner()}function o(){return Error(`react-stack-top-frame`)}function s(e){if(A.call(e,`key`)){var t=Object.getOwnPropertyDescriptor(e,`key`).get;if(t&&t.isReactWarning)return!1}return e.key!==void 0}function c(e,t){function n(){N||(N=!0,console.error("%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://react.dev/link/special-props)",t))}n.isReactWarning=!0,Object.defineProperty(e,`key`,{get:n,configurable:!0})}function l(){var e=t(this.type);return P[e]||(P[e]=!0,console.error(`Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release.`)),e=this.props.ref,e===void 0?null:e}function u(e,t,n,r,i,a){var o=n.ref;return e={$$typeof:h,type:e,key:t,props:n,_owner:r},(o===void 0?null:o)===null?Object.defineProperty(e,`ref`,{enumerable:!1,value:null}):Object.defineProperty(e,`ref`,{enumerable:!1,get:l}),e._store={},Object.defineProperty(e._store,`validated`,{configurable:!1,enumerable:!1,writable:!0,value:0}),Object.defineProperty(e,`_debugInfo`,{configurable:!1,enumerable:!1,writable:!0,value:null}),Object.defineProperty(e,`_debugStack`,{configurable:!1,enumerable:!1,writable:!0,value:i}),Object.defineProperty(e,`_debugTask`,{configurable:!1,enumerable:!1,writable:!0,value:a}),Object.freeze&&(Object.freeze(e.props),Object.freeze(e)),e}function d(e,n,i,o,l,d){var p=n.children;if(p!==void 0)if(o)if(j(p)){for(o=0;o<p.length;o++)f(p[o]);Object.freeze&&Object.freeze(p)}else console.error(`React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead.`);else f(p);if(A.call(n,`key`)){p=t(e);var m=Object.keys(n).filter(function(e){return e!==`key`});o=0<m.length?`{key: someKey, `+m.join(`: ..., `)+`: ...}`:`{key: someKey}`,L[p+o]||(m=0<m.length?`{`+m.join(`: ..., `)+`: ...}`:`{}`,console.error(`A props object containing a "key" prop is being spread into JSX:
+  let props = %s;
+  <%s {...props} />
+React keys must be passed directly to JSX without using spread:
+  let props = %s;
+  <%s key={someKey} {...props} />`,o,p,m,p),L[p+o]=!0)}if(p=null,i!==void 0&&(r(i),p=``+i),s(n)&&(r(n.key),p=``+n.key),`key`in n)for(var h in i={},n)h!==`key`&&(i[h]=n[h]);else i=n;return p&&c(i,typeof e==`function`?e.displayName||e.name||`Unknown`:e),u(e,p,i,a(),l,d)}function f(e){p(e)?e._store&&(e._store.validated=1):typeof e==`object`&&e&&e.$$typeof===E&&(e._payload.status===`fulfilled`?p(e._payload.value)&&e._payload.value._store&&(e._payload.value._store.validated=1):e._store&&(e._store.validated=1))}function p(e){return typeof e==`object`&&!!e&&e.$$typeof===h}var m=require(`react`),h=Symbol.for(`react.transitional.element`),g=Symbol.for(`react.portal`),_=Symbol.for(`react.fragment`),v=Symbol.for(`react.strict_mode`),y=Symbol.for(`react.profiler`),b=Symbol.for(`react.consumer`),x=Symbol.for(`react.context`),S=Symbol.for(`react.forward_ref`),C=Symbol.for(`react.suspense`),w=Symbol.for(`react.suspense_list`),T=Symbol.for(`react.memo`),E=Symbol.for(`react.lazy`),D=Symbol.for(`react.activity`),O=Symbol.for(`react.client.reference`),k=m.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE,A=Object.prototype.hasOwnProperty,j=Array.isArray,M=console.createTask?console.createTask:function(){return null};m={react_stack_bottom_frame:function(e){return e()}};var N,P={},F=m.react_stack_bottom_frame.bind(m,o)(),I=M(i(o)),L={};e.Fragment=_,e.jsx=function(e,t,n){var r=1e4>k.recentlyCreatedOwnerStacks++;return d(e,t,n,!1,r?Error(`react-stack-top-frame`):F,r?M(i(e)):I)},e.jsxs=function(e,t,n){var r=1e4>k.recentlyCreatedOwnerStacks++;return d(e,t,n,!0,r?Error(`react-stack-top-frame`):F,r?M(i(e)):I)}})()})),g=d(((e,t)=>{process.env.NODE_ENV===`production`?t.exports=m():t.exports=h()}))(),_=r.default.divIcon({className:`bg-transparent`,html:`<div class="l2-marker-container">
+           <div class="l2-marker-dest-icon-wrapper">
+             <div class="l2-marker-dest-icon"></div>
+           </div>
+           <div class="l2-marker-label l2-marker-label-dest">Target</div>
+         </div>`,iconSize:[32,32],iconAnchor:[16,16]}),v=r.default.divIcon({className:`bg-transparent`,html:`<div class="l2-marker-container">
+           <div class="l2-marker-origin-icon-wrapper">
+             <div class="l2-marker-origin-icon"></div>
+           </div>
+           <div class="l2-marker-label l2-marker-label-origin">You</div>
+         </div>`,iconSize:[24,24],iconAnchor:[12,12]});function y({route:e,origin:i,destination:a}){let o=(0,n.useMap)();return(0,t.useEffect)(()=>{e.length>0?o.fitBounds(r.default.latLngBounds(e),{padding:[50,50],animate:!0,duration:1.5}):i&&a?o.fitBounds(r.default.latLngBounds([i,a]),{padding:[50,50],animate:!0,duration:1.5}):i?o.setView(i,10,{animate:!0}):a?o.setView(a,10,{animate:!0}):o.setView([50,10],4,{animate:!0})},[e,i,a,o]),null}function b({width:e=`100%`,height:r=`100vh`}){let[a,o]=(0,t.useState)(``),[s,c]=(0,t.useState)(``),[l,u]=(0,t.useState)(null),[d,f]=(0,t.useState)(null),[p,m]=(0,t.useState)([]),[h,b]=(0,t.useState)(``),[x,S]=(0,t.useState)(``),[C,w]=(0,t.useState)(!1),[T,E]=(0,t.useState)(``),[D,O]=(0,t.useState)(!0),k=async(e,t)=>{let n=await(await fetch(`https://nominatim.openstreetmap.org/search?format=json&q=${encodeURIComponent(e)}`)).json();if(n&&n.length>0)return[parseFloat(n[0].lat),parseFloat(n[0].lon)];throw Error(`${t} not found`)},A=async(e,t)=>{let n=await(await fetch(`https://router.project-osrm.org/route/v1/driving/${e[1]},${e[0]};${t[1]},${t[0]}?overview=full&geometries=geojson`)).json();if(n.code===`Ok`){let e=n.routes[0].geometry.coordinates.map(e=>[e[1],e[0]]),t=(n.routes[0].distance/1e3).toFixed(1),r=Math.round(n.routes[0].duration/60),i=r>60?`${Math.floor(r/60)} h ${r%60} m`:`${r} m`;return{coords:e,distance:`${t} km`,duration:i}}throw Error(`Route not found`)};return(0,g.jsxs)(`div`,{className:`map-wrapper`,style:{width:e,height:r},children:[(0,g.jsxs)(n.MapContainer,{center:[50,10],zoom:4,zoomControl:!1,attributionControl:!1,className:`map-container`,children:[(0,g.jsx)(n.TileLayer,{url:`https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png`,attribution:`© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>`,className:`fantasy-tiles`}),(0,g.jsx)(y,{route:p,origin:l,destination:d}),d&&(0,g.jsx)(n.Marker,{position:d,icon:_}),l&&(0,g.jsx)(n.Marker,{position:l,icon:v}),p.length>0&&(0,g.jsx)(n.Polyline,{positions:p,pathOptions:{color:`#ffaa00`,weight:4,opacity:.9,dashArray:`8, 8`,lineCap:`round`,className:`l2-route-line`}})]}),(0,g.jsx)(`div`,{className:`parchment-overlay`}),(0,g.jsx)(`div`,{className:`burnt-edges`}),(0,g.jsx)(`div`,{className:`l2-window ${D?``:`l2-window-collapsed`}`,children:(0,g.jsxs)(`div`,{className:`l2-window-inner`,children:[(0,g.jsxs)(`div`,{className:`l2-header ${D?``:`l2-header-collapsed`}`,onClick:()=>O(!D),children:[(0,g.jsxs)(`div`,{className:`l2-header-left`,children:[(0,g.jsx)(i.Map,{className:`l2-header-icon`}),(0,g.jsx)(`h2`,{className:`l2-title`,children:`World Map`})]}),(0,g.jsx)(`button`,{className:`l2-toggle-btn`,type:`button`,children:D?(0,g.jsx)(i.ChevronUp,{className:`w-5 h-5`}):(0,g.jsx)(i.ChevronDown,{className:`w-5 h-5`})})]}),!D&&(a||s)&&(0,g.jsxs)(`div`,{className:`l2-collapsed-summary`,onClick:()=>O(!0),children:[(0,g.jsxs)(`div`,{className:`l2-summary-route`,children:[(0,g.jsx)(`span`,{className:`l2-summary-point`,title:a,children:a||`...`}),(0,g.jsx)(`span`,{className:`l2-summary-arrow`,children:`→`}),(0,g.jsx)(`span`,{className:`l2-summary-point`,title:s,children:s||`...`})]}),h&&x&&(0,g.jsxs)(`div`,{className:`l2-summary-stats`,children:[h,` • `,x]})]}),D&&(0,g.jsxs)(`div`,{className:`l2-window-body`,children:[(0,g.jsxs)(`form`,{onSubmit:async e=>{if(e.preventDefault(),!(!a||!s)){w(!0),E(``);try{let e=await k(a,`Origin`),t=await k(s,`Destination`);u(e),f(t);let n=await A(e,t);m(n.coords),b(n.distance),S(n.duration),O(!1)}catch(e){console.error(`Routing error:`,e),E(e.message||`Failed to calculate route.`),m([])}finally{w(!1)}}},className:`l2-form`,children:[(0,g.jsxs)(`div`,{className:`l2-form-group`,children:[(0,g.jsx)(`label`,{className:`l2-label`,children:`Current Location`}),(0,g.jsxs)(`div`,{className:`l2-input-wrapper`,children:[(0,g.jsx)(i.Crosshair,{className:`l2-input-icon l2-icon-blue`}),(0,g.jsx)(`input`,{type:`text`,value:a,onChange:e=>o(e.target.value),placeholder:`Enter city...`,className:`l2-input`})]})]}),(0,g.jsxs)(`div`,{className:`l2-form-group`,children:[(0,g.jsx)(`label`,{className:`l2-label`,children:`Quest Target`}),(0,g.jsxs)(`div`,{className:`l2-input-wrapper`,children:[(0,g.jsx)(i.MapPin,{className:`l2-input-icon l2-icon-red`}),(0,g.jsx)(`input`,{type:`text`,value:s,onChange:e=>c(e.target.value),placeholder:`Enter destination...`,className:`l2-input`})]})]}),T&&(0,g.jsx)(`div`,{className:`l2-error`,children:T}),(0,g.jsxs)(`div`,{className:`l2-button-group`,children:[(0,g.jsxs)(`button`,{type:`submit`,disabled:C||!a||!s,className:`l2-button l2-button-primary`,children:[(0,g.jsx)(i.Navigation,{className:`l2-btn-icon`}),C?`Searching...`:`Find Path`]}),(p.length>0||l||d)&&(0,g.jsx)(`button`,{type:`button`,onClick:()=>{m([]),u(null),f(null),b(``),S(``),o(``),c(``),E(``)},className:`l2-button l2-button-secondary`,children:`Clear`})]})]}),p.length>0&&(0,g.jsxs)(`div`,{className:`l2-route-info`,children:[(0,g.jsxs)(`div`,{className:`l2-route-stat-row`,children:[(0,g.jsx)(`span`,{className:`l2-stat-label`,children:`Distance:`}),(0,g.jsx)(`span`,{className:`l2-stat-value`,children:h})]}),(0,g.jsxs)(`div`,{className:`l2-route-stat-row`,children:[(0,g.jsx)(`span`,{className:`l2-stat-label`,children:`Travel Time:`}),(0,g.jsx)(`span`,{className:`l2-stat-value`,children:x})]})]})]})]})})]})}var x=b;e.FantasyMap=b,e.default=x});

package/dist/index.d.ts

@@ -0,0 +1 @@
+export {}

package/dist/src/App.d.ts

@@ -0,0 +1,5 @@
+/**
+ * @license
+ * SPDX-License-Identifier: Apache-2.0
+ */
+export default function App(): import("react/jsx-runtime").JSX.Element;

package/dist/src/components/FantasyMap.d.ts

@@ -0,0 +1,5 @@
+export interface FantasyMapProps {
+    width?: string | number;
+    height?: string | number;
+}
+export default function FantasyMap({ width, height }: FantasyMapProps): import("react/jsx-runtime").JSX.Element;

package/dist/src/index.d.ts

@@ -0,0 +1,3 @@
+import { default as FantasyMap, FantasyMapProps } from './components/FantasyMap';
+export { FantasyMap, FantasyMapProps };
+export default FantasyMap;

package/package.json

@@ -0,0 +1,44 @@
+{
+  "name": "fantasy-map-router",
+  "version": "1.0.0",
+  "description": "A Lineage II style fantasy map component for React",
+  "type": "module",
+  "main": "./dist/fantasy-map.umd.js",
+  "module": "./dist/fantasy-map.es.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/fantasy-map.es.js",
+      "require": "./dist/fantasy-map.umd.js"
+    },
+    "./style.css": "./dist/style.css"
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "tsc && vite build"
+  },
+  "peerDependencies": {
+    "leaflet": "^1.9.0",
+    "lucide-react": ">=0.546.0",
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0",
+    "react-leaflet": "^4.0.0"
+  },
+  "devDependencies": {
+    "@types/express": "^4.17.21",
+    "@types/leaflet": "^1.9.21",
+    "@types/node": "^22.14.0",
+    "@types/react": "^19.2.14",
+    "@types/react-dom": "^19.2.3",
+    "@vitejs/plugin-react": "^6.0.1",
+    "autoprefixer": "^10.4.21",
+    "lucide-react": "^1.7.0",
+    "react-leaflet": "^5.0.0",
+    "tsx": "^4.21.0",
+    "typescript": "^6.0.2",
+    "vite": "^8.0.3",
+    "vite-plugin-dts": "^4.5.4"
+  }
+}