@burdenoff/fe-libs 2026.1018.1 → 2026.1019.2

package/dist/shared/tours/TourTooltip.js

@@ -1,8 +1,9 @@
-import { memo as e, useEffect as t, useLayoutEffect as n, useMemo as r, useRef as i, useState as a } from "react";
-import { jsx as o, jsxs as s } from "react/jsx-runtime";
+import { useShellLabel as e } from "../providers/shell/useShellLabel.js";
+import { memo as t, useEffect as n, useLayoutEffect as r, useMemo as i, useRef as a, useState as o } from "react";
+import { jsx as s, jsxs as c } from "react/jsx-runtime";
 //#region src/shared/tours/TourTooltip.tsx
-var c = 320, l = 16, u = 10, d = 18;
-function f() {
+var l = 320, u = 16, d = 10, f = 18;
+function p() {
 	return typeof window > "u" ? {
 		vw: 1024,
 		vh: 768
@@ -11,38 +12,38 @@ function f() {
 		vh: window.innerHeight
 	};
 }
-function p(e, t, n) {
-	let { vw: r, vh: i } = f(), { width: a, height: o } = n, s = Math.max(l, r - a - l), c = Math.max(l, i - o - l), p = (e) => Math.min(Math.max(e, l), s), m = (e) => Math.min(Math.max(e, l), c);
+function m(e, t, n) {
+	let { vw: r, vh: i } = p(), { width: a, height: o } = n, s = Math.max(u, r - a - u), c = Math.max(u, i - o - u), l = (e) => Math.min(Math.max(e, u), s), m = (e) => Math.min(Math.max(e, u), c);
 	if (!e) return {
 		top: m((i - o) / 2),
-		left: p((r - a) / 2),
+		left: l((r - a) / 2),
 		arrowPosition: "none",
 		arrowOffset: 0
 	};
-	let h = e.top, g = i - e.bottom, _ = e.left, v = r - e.right, y = o + u + l, b = a + u + l, x = g >= y, S = h >= y, C = v >= b, w = _ >= b, T = x ? "BOTTOM" : S ? "TOP" : C ? "RIGHT" : w ? "LEFT" : "BOTTOM", E = t;
+	let h = e.top, g = i - e.bottom, _ = e.left, v = r - e.right, y = o + d + u, b = a + d + u, x = g >= y, S = h >= y, C = v >= b, w = _ >= b, T = x ? "BOTTOM" : S ? "TOP" : C ? "RIGHT" : w ? "LEFT" : "BOTTOM", E = t;
 	t === "AUTO" || t === "CENTER" ? E = T : t === "BOTTOM" && x || t === "TOP" && S || t === "RIGHT" && C || t === "LEFT" && w || (E = T);
 	let D = e.left + e.width / 2, O = e.top + e.height / 2, k, A, j;
 	switch (E) {
 		case "TOP":
-			k = e.top - o - u - l, A = D - a / 2, j = "bottom";
+			k = e.top - o - d - u, A = D - a / 2, j = "bottom";
 			break;
 		case "LEFT":
-			k = O - o / 2, A = e.left - a - u - l, j = "right";
+			k = O - o / 2, A = e.left - a - d - u, j = "right";
 			break;
 		case "RIGHT":
-			k = O - o / 2, A = e.right + u + l, j = "left";
+			k = O - o / 2, A = e.right + d + u, j = "left";
 			break;
 		default:
-			k = e.bottom + u + l, A = D - a / 2, j = "top";
+			k = e.bottom + d + u, A = D - a / 2, j = "top";
 			break;
 	}
-	let M = p(A), N = m(k), P = 0;
+	let M = l(A), N = m(k), P = 0;
 	if (j === "top" || j === "bottom") {
 		let e = D - M;
-		e < 0 || e > a ? j = "none" : P = Math.min(Math.max(e, d), a - d);
+		e < 0 || e > a ? j = "none" : P = Math.min(Math.max(e, f), a - f);
 	} else {
 		let e = O - N;
-		e < 0 || e > o ? j = "none" : P = Math.min(Math.max(e, d), o - d);
+		e < 0 || e > o ? j = "none" : P = Math.min(Math.max(e, f), o - f);
 	}
 	return {
 		top: N,
@@ -51,79 +52,79 @@ function p(e, t, n) {
 		arrowOffset: P
 	};
 }
-var m = e(function({ step: e, stepIndex: d, totalSteps: m, onNext: h, onPrevious: g, onSkip: _, onComplete: v, canGoNext: y, canGoPrevious: b, isLastStep: x, placement: S, targetRect: C }) {
-	let [w, T] = a(!1), E = i(null), [D, O] = a(f), [k, A] = a({
-		width: c,
+var h = t(function({ step: t, stepIndex: f, totalSteps: h, onNext: g, onPrevious: _, onSkip: v, onComplete: y, canGoNext: b, canGoPrevious: x, isLastStep: S, placement: C, targetRect: w }) {
+	let T = e(), [E, D] = o(!1), O = a(null), [k, A] = o(p), [j, M] = o({
+		width: l,
 		height: 220
-	}), j = Math.min(c, D.vw - 2 * l), M = D.vh - 2 * l, N = Math.min(k.height, M);
-	t(() => {
-		T(!1);
-		let e = setTimeout(() => T(!0), 50);
+	}), N = Math.min(l, k.vw - 2 * u), P = k.vh - 2 * u, F = Math.min(j.height, P);
+	n(() => {
+		D(!1);
+		let e = setTimeout(() => D(!0), 50);
 		return () => clearTimeout(e);
-	}, [e.id]), n(() => {
+	}, [t.id]), r(() => {
 		let e = () => {
-			O(f());
-			let e = E.current;
+			A(p());
+			let e = O.current;
 			if (!e) return;
 			let t = e.getBoundingClientRect();
-			A((e) => Math.abs(e.width - t.width) > 1 || Math.abs(e.height - t.height) > 1 ? {
+			M((e) => Math.abs(e.width - t.width) > 1 || Math.abs(e.height - t.height) > 1 ? {
 				width: t.width,
 				height: t.height
 			} : e);
 		};
 		return e(), window.addEventListener("resize", e), () => window.removeEventListener("resize", e);
 	}, [
-		e.id,
-		e.title,
-		e.content,
-		j
+		t.id,
+		t.title,
+		t.content,
+		N
 	]);
-	let P = r(() => p(C, S, {
-		width: j,
-		height: N
+	let I = i(() => m(w, C, {
+		width: N,
+		height: F
 	}), [
+		w,
 		C,
-		S,
-		j,
 		N,
-		D.vw,
-		D.vh
-	]), F = e.media?.filter((e) => e.position === "HEADER") ?? [], I = e.media?.filter((e) => e.position === "INLINE" || e.position === "BODY") ?? [];
-	return /* @__PURE__ */ s("div", {
+		F,
+		k.vw,
+		k.vh
+	]), L = t.media?.filter((e) => e.position === "HEADER") ?? [], R = t.media?.filter((e) => e.position === "INLINE" || e.position === "BODY") ?? [];
+	return /* @__PURE__ */ c("div", {
 		className: "tour-tooltip",
 		style: {
 			position: "fixed",
-			top: P.top,
-			left: P.left,
-			width: j,
+			top: I.top,
+			left: I.left,
+			width: N,
 			zIndex: 1e4,
-			opacity: +!!w,
-			transform: w ? "translateY(0)" : "translateY(10px)",
+			opacity: +!!E,
+			transform: E ? "translateY(0)" : "translateY(10px)",
 			transition: "opacity 0.2s ease-out, transform 0.2s ease-out"
 		},
 		role: "dialog",
-		"aria-labelledby": `tour-step-title-${e.id}`,
-		"aria-describedby": `tour-step-content-${e.id}`,
-		children: [/* @__PURE__ */ s("div", {
-			ref: E,
+		"aria-labelledby": `tour-step-title-${t.id}`,
+		"aria-describedby": `tour-step-content-${t.id}`,
+		children: [/* @__PURE__ */ c("div", {
+			ref: O,
 			style: {
 				display: "flex",
 				flexDirection: "column",
-				maxHeight: M,
+				maxHeight: P,
 				backgroundColor: "var(--color-bg-surface)",
 				borderRadius: 12,
 				boxShadow: "0 10px 40px rgba(0, 0, 0, 0.2)",
 				overflow: "hidden"
 			},
 			children: [
-				F.length > 0 && /* @__PURE__ */ o("div", {
+				L.length > 0 && /* @__PURE__ */ s("div", {
 					style: {
 						width: "100%",
 						maxHeight: 160,
 						overflow: "hidden",
 						flexShrink: 0
 					},
-					children: F.map((e) => e.media.type === "IMAGE" ? /* @__PURE__ */ o("img", {
+					children: L.map((e) => e.media.type === "IMAGE" ? /* @__PURE__ */ s("img", {
 						src: e.media.cdnUrl,
 						alt: e.media.altText || e.media.name,
 						style: {
@@ -131,7 +132,7 @@ var m = e(function({ step: e, stepIndex: d, totalSteps: m, onNext: h, onPrevious
 							height: "auto",
 							display: "block"
 						}
-					}, e.id) : e.media.type === "VIDEO" ? /* @__PURE__ */ o("video", {
+					}, e.id) : e.media.type === "VIDEO" ? /* @__PURE__ */ s("video", {
 						src: e.media.cdnUrl,
 						controls: !0,
 						style: {
@@ -140,7 +141,7 @@ var m = e(function({ step: e, stepIndex: d, totalSteps: m, onNext: h, onPrevious
 						}
 					}, e.id) : null)
 				}),
-				/* @__PURE__ */ s("div", {
+				/* @__PURE__ */ c("div", {
 					style: {
 						flex: "1 1 auto",
 						minHeight: 0,
@@ -148,7 +149,7 @@ var m = e(function({ step: e, stepIndex: d, totalSteps: m, onNext: h, onPrevious
 						padding: 20
 					},
 					children: [
-						/* @__PURE__ */ s("div", {
+						/* @__PURE__ */ c("div", {
 							style: {
 								display: "flex",
 								alignItems: "center",
@@ -163,30 +164,28 @@ var m = e(function({ step: e, stepIndex: d, totalSteps: m, onNext: h, onPrevious
 									fontWeight: 500,
 									whiteSpace: "nowrap"
 								},
-								children: [
-									"Step ",
-									d + 1,
-									" of ",
-									m
-								]
-							}), /* @__PURE__ */ o("div", {
+								children: T("tours.stepProgress", "Step {{step}} of {{total}}", {
+									step: f + 1,
+									total: h
+								})
+							}), /* @__PURE__ */ s("div", {
 								style: {
 									display: "flex",
 									gap: 4,
 									flexWrap: "wrap",
 									justifyContent: "flex-end"
 								},
-								children: Array.from({ length: m }).map((e, t) => /* @__PURE__ */ o("div", { style: {
+								children: Array.from({ length: h }).map((e, t) => /* @__PURE__ */ s("div", { style: {
 									width: 8,
 									height: 8,
 									borderRadius: "50%",
-									backgroundColor: t <= d ? "var(--color-action-primary-bg)" : "var(--color-border-default)",
+									backgroundColor: t <= f ? "var(--color-action-primary-bg)" : "var(--color-border-default)",
 									transition: "background-color 0.2s"
 								} }, t))
 							})]
 						}),
-						/* @__PURE__ */ o("h3", {
-							id: `tour-step-title-${e.id}`,
+						/* @__PURE__ */ s("h3", {
+							id: `tour-step-title-${t.id}`,
 							style: {
 								fontSize: 18,
 								fontWeight: 600,
@@ -194,21 +193,21 @@ var m = e(function({ step: e, stepIndex: d, totalSteps: m, onNext: h, onPrevious
 								margin: "0 0 8px 0",
 								lineHeight: 1.3
 							},
-							children: e.title
+							children: t.title
 						}),
-						/* @__PURE__ */ o("p", {
-							id: `tour-step-content-${e.id}`,
+						/* @__PURE__ */ s("p", {
+							id: `tour-step-content-${t.id}`,
 							style: {
 								fontSize: 14,
 								color: "var(--color-text-secondary)",
 								margin: 0,
 								lineHeight: 1.6
 							},
-							children: e.content
+							children: t.content
 						}),
-						I.length > 0 && /* @__PURE__ */ o("div", {
+						R.length > 0 && /* @__PURE__ */ s("div", {
 							style: { marginTop: 12 },
-							children: I.map((e) => e.media.type === "IMAGE" ? /* @__PURE__ */ o("img", {
+							children: R.map((e) => e.media.type === "IMAGE" ? /* @__PURE__ */ s("img", {
 								src: e.media.cdnUrl,
 								alt: e.media.altText || e.media.name,
 								style: {
@@ -220,7 +219,7 @@ var m = e(function({ step: e, stepIndex: d, totalSteps: m, onNext: h, onPrevious
 						})
 					]
 				}),
-				/* @__PURE__ */ s("div", {
+				/* @__PURE__ */ c("div", {
 					style: {
 						display: "flex",
 						alignItems: "center",
@@ -231,9 +230,9 @@ var m = e(function({ step: e, stepIndex: d, totalSteps: m, onNext: h, onPrevious
 						flexShrink: 0,
 						gap: 8
 					},
-					children: [/* @__PURE__ */ o("button", {
+					children: [/* @__PURE__ */ s("button", {
 						type: "button",
-						onClick: _,
+						onClick: v,
 						style: {
 							padding: "8px 12px",
 							fontSize: 14,
@@ -247,15 +246,15 @@ var m = e(function({ step: e, stepIndex: d, totalSteps: m, onNext: h, onPrevious
 						},
 						onMouseEnter: (e) => e.currentTarget.style.color = "var(--color-text-primary)",
 						onMouseLeave: (e) => e.currentTarget.style.color = "var(--color-text-tertiary)",
-						children: "Skip tour"
-					}), /* @__PURE__ */ s("div", {
+						children: T("tours.skipTour", "Skip tour")
+					}), /* @__PURE__ */ c("div", {
 						style: {
 							display: "flex",
 							gap: 8
 						},
-						children: [b && /* @__PURE__ */ o("button", {
+						children: [x && /* @__PURE__ */ s("button", {
 							type: "button",
-							onClick: g,
+							onClick: _,
 							style: {
 								padding: "8px 16px",
 								fontSize: 14,
@@ -273,72 +272,72 @@ var m = e(function({ step: e, stepIndex: d, totalSteps: m, onNext: h, onPrevious
 							onMouseLeave: (e) => {
 								e.currentTarget.style.backgroundColor = "var(--color-bg-surface)";
 							},
-							children: "Previous"
-						}), /* @__PURE__ */ o("button", {
+							children: T("common.previous", "Previous")
+						}), /* @__PURE__ */ s("button", {
 							type: "button",
-							onClick: x ? v : h,
-							disabled: !y,
+							onClick: S ? y : g,
+							disabled: !b,
 							style: {
 								padding: "8px 16px",
 								fontSize: 14,
 								fontWeight: 500,
 								color: "var(--color-action-primary-text)",
-								backgroundColor: y ? "var(--color-action-primary-bg)" : "var(--color-action-primary-bgDisabled)",
+								backgroundColor: b ? "var(--color-action-primary-bg)" : "var(--color-action-primary-bgDisabled)",
 								border: "none",
 								borderRadius: 6,
-								cursor: y ? "pointer" : "not-allowed",
+								cursor: b ? "pointer" : "not-allowed",
 								transition: "background-color 0.2s",
 								whiteSpace: "nowrap"
 							},
 							onMouseEnter: (e) => {
-								y && (e.currentTarget.style.backgroundColor = "var(--color-action-primary-bgHover)");
+								b && (e.currentTarget.style.backgroundColor = "var(--color-action-primary-bgHover)");
 							},
 							onMouseLeave: (e) => {
-								e.currentTarget.style.backgroundColor = y ? "var(--color-action-primary-bg)" : "var(--color-action-primary-bgDisabled)";
+								e.currentTarget.style.backgroundColor = b ? "var(--color-action-primary-bg)" : "var(--color-action-primary-bgDisabled)";
 							},
-							children: x ? "Finish" : "Next"
+							children: S ? T("tourPreview.finish", "Finish") : T("common.next", "Next")
 						})]
 					})]
 				})
 			]
-		}), P.arrowPosition !== "none" && /* @__PURE__ */ o("div", { style: {
+		}), I.arrowPosition !== "none" && /* @__PURE__ */ s("div", { style: {
 			position: "absolute",
 			width: 0,
 			height: 0,
-			...P.arrowPosition === "top" && {
+			...I.arrowPosition === "top" && {
 				top: -10,
-				left: P.arrowOffset,
+				left: I.arrowOffset,
 				marginLeft: -10,
-				borderLeft: `${u}px solid transparent`,
-				borderRight: `${u}px solid transparent`,
-				borderBottom: `${u}px solid var(--color-bg-surface)`
+				borderLeft: `${d}px solid transparent`,
+				borderRight: `${d}px solid transparent`,
+				borderBottom: `${d}px solid var(--color-bg-surface)`
 			},
-			...P.arrowPosition === "bottom" && {
+			...I.arrowPosition === "bottom" && {
 				bottom: -10,
-				left: P.arrowOffset,
+				left: I.arrowOffset,
 				marginLeft: -10,
-				borderLeft: `${u}px solid transparent`,
-				borderRight: `${u}px solid transparent`,
-				borderTop: `${u}px solid var(--color-bg-surface)`
+				borderLeft: `${d}px solid transparent`,
+				borderRight: `${d}px solid transparent`,
+				borderTop: `${d}px solid var(--color-bg-surface)`
 			},
-			...P.arrowPosition === "left" && {
+			...I.arrowPosition === "left" && {
 				left: -10,
-				top: P.arrowOffset,
+				top: I.arrowOffset,
 				marginTop: -10,
-				borderTop: `${u}px solid transparent`,
-				borderBottom: `${u}px solid transparent`,
-				borderRight: `${u}px solid var(--color-bg-surface)`
+				borderTop: `${d}px solid transparent`,
+				borderBottom: `${d}px solid transparent`,
+				borderRight: `${d}px solid var(--color-bg-surface)`
 			},
-			...P.arrowPosition === "right" && {
+			...I.arrowPosition === "right" && {
 				right: -10,
-				top: P.arrowOffset,
+				top: I.arrowOffset,
 				marginTop: -10,
-				borderTop: `${u}px solid transparent`,
-				borderBottom: `${u}px solid transparent`,
-				borderLeft: `${u}px solid var(--color-bg-surface)`
+				borderTop: `${d}px solid transparent`,
+				borderBottom: `${d}px solid transparent`,
+				borderLeft: `${d}px solid var(--color-bg-surface)`
 			}
 		} })]
 	});
 });
 //#endregion
-export { m as TourTooltip };
+export { h as TourTooltip };

package/dist/shared/tours/tourTrigger/MobileTourSheet.js

@@ -1,95 +1,108 @@
-import { TourLoadError as e } from "./TourLoadError.js";
-import { TourListItemMobile as t } from "./TourListItemMobile.js";
-import { forwardRef as n } from "react";
-import { ExternalLink as r, HelpCircle as i, Sparkles as a, X as o } from "lucide-react";
-import { Fragment as s, jsx as c, jsxs as l } from "react/jsx-runtime";
-import { createPortal as u } from "react-dom";
+import { useShellLabel as e } from "../../providers/shell/useShellLabel.js";
+import { TourLoadError as t } from "./TourLoadError.js";
+import { TourListItemMobile as n } from "./TourListItemMobile.js";
+import { forwardRef as r } from "react";
+import { ExternalLink as i, HelpCircle as a, Sparkles as o, X as s } from "lucide-react";
+import { Fragment as c, jsx as l, jsxs as u } from "react/jsx-runtime";
+import { createPortal as d } from "react-dom";
 //#region src/shared/tours/tourTrigger/MobileTourSheet.tsx
-var d = n(function({ loading: n, error: d, onRetry: f, tours: p, onClose: m, onStartTour: h, actions: g, onAction: _ }, v) {
-	let y = !!(g && g.length > 0);
-	return u(/* @__PURE__ */ l(s, { children: [/* @__PURE__ */ c("div", {
+var f = r(function({ loading: e, error: t, onRetry: n, tours: r, onClose: i, onStartTour: a, actions: o, onAction: s }, f) {
+	return d(/* @__PURE__ */ u(c, { children: [/* @__PURE__ */ l("div", {
 		className: "fixed inset-0 bg-black/50 z-[100] animate-in fade-in duration-200",
-		onClick: m
+		onClick: i
 	}), /* @__PURE__ */ l("div", {
-		ref: v,
+		ref: f,
 		className: "fixed inset-x-0 bottom-0 z-[101] bg-bg-surface rounded-t-2xl shadow-xl animate-in slide-in-from-bottom duration-300 max-h-[80vh] flex flex-col",
-		children: [
-			/* @__PURE__ */ c("div", {
-				className: "flex justify-center pt-3 pb-2",
-				children: /* @__PURE__ */ c("div", { className: "w-10 h-1 bg-border-default rounded-full" })
-			}),
-			/* @__PURE__ */ l("div", {
-				className: "flex items-center justify-between px-4 pb-3 border-b border-border-subtle",
-				children: [/* @__PURE__ */ l("div", {
-					className: "flex items-center gap-2",
-					children: [/* @__PURE__ */ c(a, { className: "size-5 text-action-primary-bg" }), /* @__PURE__ */ c("h2", {
-						className: "text-lg font-semibold text-text-primary",
-						children: "Help & tours"
-					})]
-				}), /* @__PURE__ */ c("button", {
-					type: "button",
-					onClick: m,
-					className: "p-2 hover:bg-action-ghost-bg-hover rounded-full",
-					"aria-label": "Close",
-					children: /* @__PURE__ */ c(o, { className: "size-5" })
+		children: /* @__PURE__ */ l(p, {
+			loading: e,
+			error: t,
+			onRetry: n,
+			tours: r,
+			onClose: i,
+			onStartTour: a,
+			actions: o,
+			onAction: s
+		})
+	})] }), document.body);
+});
+function p({ loading: r, error: d, onRetry: f, tours: p, onClose: m, onStartTour: h, actions: g, onAction: _ }) {
+	let v = e(), y = !!(g && g.length > 0);
+	return /* @__PURE__ */ u(c, { children: [
+		/* @__PURE__ */ l("div", {
+			className: "flex justify-center pt-3 pb-2",
+			children: /* @__PURE__ */ l("div", { className: "w-10 h-1 bg-border-default rounded-full" })
+		}),
+		/* @__PURE__ */ u("div", {
+			className: "flex items-center justify-between px-4 pb-3 border-b border-border-subtle",
+			children: [/* @__PURE__ */ u("div", {
+				className: "flex items-center gap-2",
+				children: [/* @__PURE__ */ l(o, { className: "size-5 text-action-primary-bg" }), /* @__PURE__ */ l("h2", {
+					className: "text-lg font-semibold text-text-primary",
+					children: v("tours.helpTours", "Help & tours")
 				})]
-			}),
-			/* @__PURE__ */ l("div", {
-				className: "flex-1 overflow-y-auto p-4",
-				children: [n ? /* @__PURE__ */ c("div", {
-					className: "flex items-center justify-center py-8",
-					children: /* @__PURE__ */ c("div", { className: "animate-spin rounded-full size-6 border-2 border-action-primary-bg border-t-transparent" })
-				}) : d ? /* @__PURE__ */ c(e, { onRetry: f }) : p.length > 0 ? /* @__PURE__ */ l("div", {
-					className: "space-y-3",
-					children: [/* @__PURE__ */ c("p", {
-						className: "text-sm text-text-secondary mb-4",
-						children: "Take a guided tour. Current-page tours are shown first."
-					}), p.map((e) => /* @__PURE__ */ c(t, {
-						tour: e,
-						onStart: h
-					}, e.id))]
-				}) : /* @__PURE__ */ l("div", {
-					className: "text-center py-6",
-					children: [/* @__PURE__ */ c(i, { className: "size-10 mx-auto text-text-tertiary mb-2" }), /* @__PURE__ */ c("p", {
-						className: "text-text-secondary",
-						children: "No guided tours for this page yet"
-					})]
-				}), y && /* @__PURE__ */ c("div", {
-					className: "mt-4 border-t border-border-subtle pt-3 space-y-1",
-					children: g.map((e) => e.href ? /* @__PURE__ */ l("a", {
-						href: e.href,
-						target: "_blank",
-						rel: "noreferrer",
-						onClick: () => _?.(e),
-						className: "flex items-center gap-3 rounded-button px-3 py-3 text-sm text-text-secondary hover:bg-bg-sunken hover:text-text-primary transition-colors",
-						children: [
-							e.icon && /* @__PURE__ */ c("span", {
-								className: "flex size-5 items-center justify-center text-text-muted",
-								children: e.icon
-							}),
-							/* @__PURE__ */ c("span", {
-								className: "flex-1 truncate",
-								children: e.label
-							}),
-							/* @__PURE__ */ c(r, { className: "size-4 text-text-muted" })
-						]
-					}, e.id) : /* @__PURE__ */ l("button", {
-						type: "button",
-						onClick: () => _?.(e),
-						className: "flex w-full items-center gap-3 rounded-button px-3 py-3 text-left text-sm text-text-secondary hover:bg-bg-sunken hover:text-text-primary transition-colors",
-						children: [e.icon && /* @__PURE__ */ c("span", {
+			}), /* @__PURE__ */ l("button", {
+				type: "button",
+				onClick: m,
+				className: "p-2 hover:bg-action-ghost-bg-hover rounded-full",
+				"aria-label": v("common.close", "Close"),
+				children: /* @__PURE__ */ l(s, { className: "size-5" })
+			})]
+		}),
+		/* @__PURE__ */ u("div", {
+			className: "flex-1 overflow-y-auto p-4",
+			children: [r ? /* @__PURE__ */ l("div", {
+				className: "flex items-center justify-center py-8",
+				children: /* @__PURE__ */ l("div", { className: "animate-spin rounded-full size-6 border-2 border-action-primary-bg border-t-transparent" })
+			}) : d ? /* @__PURE__ */ l(t, { onRetry: f }) : p.length > 0 ? /* @__PURE__ */ u("div", {
+				className: "space-y-3",
+				children: [/* @__PURE__ */ l("p", {
+					className: "text-sm text-text-secondary mb-4",
+					children: v("tours.orderHint", "Take a guided tour. Current-page tours are shown first.")
+				}), p.map((e) => /* @__PURE__ */ l(n, {
+					tour: e,
+					onStart: h
+				}, e.id))]
+			}) : /* @__PURE__ */ u("div", {
+				className: "text-center py-6",
+				children: [/* @__PURE__ */ l(a, { className: "size-10 mx-auto text-text-tertiary mb-2" }), /* @__PURE__ */ l("p", {
+					className: "text-text-secondary",
+					children: v("tours.noGuidedToursForThisPageYet", "No guided tours for this page yet")
+				})]
+			}), y && /* @__PURE__ */ l("div", {
+				className: "mt-4 border-t border-border-subtle pt-3 space-y-1",
+				children: g.map((e) => e.href ? /* @__PURE__ */ u("a", {
+					href: e.href,
+					target: "_blank",
+					rel: "noreferrer",
+					onClick: () => _?.(e),
+					className: "flex items-center gap-3 rounded-button px-3 py-3 text-sm text-text-secondary hover:bg-bg-sunken hover:text-text-primary transition-colors",
+					children: [
+						e.icon && /* @__PURE__ */ l("span", {
 							className: "flex size-5 items-center justify-center text-text-muted",
 							children: e.icon
-						}), /* @__PURE__ */ c("span", {
+						}),
+						/* @__PURE__ */ l("span", {
 							className: "flex-1 truncate",
 							children: e.label
-						})]
-					}, e.id))
-				})]
-			}),
-			/* @__PURE__ */ c("div", { className: "h-safe-area-inset-bottom" })
-		]
-	})] }), document.body);
-});
+						}),
+						/* @__PURE__ */ l(i, { className: "size-4 text-text-muted" })
+					]
+				}, e.id) : /* @__PURE__ */ u("button", {
+					type: "button",
+					onClick: () => _?.(e),
+					className: "flex w-full items-center gap-3 rounded-button px-3 py-3 text-left text-sm text-text-secondary hover:bg-bg-sunken hover:text-text-primary transition-colors",
+					children: [e.icon && /* @__PURE__ */ l("span", {
+						className: "flex size-5 items-center justify-center text-text-muted",
+						children: e.icon
+					}), /* @__PURE__ */ l("span", {
+						className: "flex-1 truncate",
+						children: e.label
+					})]
+				}, e.id))
+			})]
+		}),
+		/* @__PURE__ */ l("div", { className: "h-safe-area-inset-bottom" })
+	] });
+}
 //#endregion
-export { d as MobileTourSheet };
+export { f as MobileTourSheet };