@burdenoff/fe-libs 2026.527.3 → 2026.527.4

package/dist/shared/tours/TourTrigger.js

@@ -2,59 +2,35 @@ import { useSafeShellUi as e } from "../providers/shell/ShellUiProvider.js";
 import { usePlayTour as t } from "./TourPlayer.js";
 import { getTourContextRank as n, isTourVisibleForContext as r, normalizeTourPath as i, resolveTourTargetPath as a } from "./routeCatalog.js";
 import { useSafeToursContext as o } from "./ToursContext.js";
-import { useEffect as s, useMemo as c, useRef as l, useState as u } from "react";
-import { ChevronRight as d, HelpCircle as f, Play as p, Sparkles as m, X as h } from "lucide-react";
-import { Fragment as g, jsx as _, jsxs as v } from "react/jsx-runtime";
-import { useInRouterContext as y, useLocation as b, useNavigate as x } from "react-router-dom";
+import { TourTriggerButton as s } from "./tourTrigger/TourTriggerButton.js";
+import { MobileTourSheet as c } from "./tourTrigger/MobileTourSheet.js";
+import { DesktopTourDropdown as l } from "./tourTrigger/DesktopTourDropdown.js";
+import { useEffect as u, useMemo as d, useRef as f, useState as p } from "react";
+import { jsx as m, jsxs as h } from "react/jsx-runtime";
+import { useInRouterContext as g, useLocation as _, useNavigate as v } from "react-router-dom";
 //#region src/shared/tours/TourTrigger.tsx
-var S = 5e3, C = 100, w = 150;
-function T(e, t) {
+var y = 5e3, b = 100, x = 150;
+function S(e, t) {
 	let n = t?.trim();
 	return !!(n && e.productId.trim() === n && e.isActive && e.steps?.length > 0);
 }
-function E(e, t) {
+function C(e, t) {
 	let n = a(e);
 	if (n) return i(t) === i(n) ? void 0 : n;
 }
-function D(e, t, n, i) {
-	let a = E(e, t);
+function w(e, t, n, i) {
+	let a = C(e, t);
 	return a ? i ? {
 		type: "navigate",
 		targetPath: a
 	} : { type: "ignore" } : r(e, n) ? { type: "play" } : { type: "ignore" };
 }
-var O = "bg-bg-muted text-text-tertiary", k = {
-	COMPLETED: {
-		label: "Completed",
-		className: "bg-status-success-bg-subtle text-status-success-text"
-	},
-	IN_PROGRESS: {
-		label: "In progress",
-		className: "bg-status-info-bg-subtle text-status-info-text"
-	},
-	SKIPPED: {
-		label: "Skipped",
-		className: O
-	},
-	DISMISSED: {
-		label: "Dismissed",
-		className: O
-	}
-};
-function A({ status: e }) {
-	if (!e) return null;
-	let t = k[e];
-	return t ? /* @__PURE__ */ _("span", {
-		className: `shrink-0 inline-flex items-center rounded-full px-2 py-0.5 text-xs font-medium ${t.className}`,
-		children: t.label
-	}) : null;
+function T() {
+	return g() ? /* @__PURE__ */ m(E, {}) : /* @__PURE__ */ m(D, { pathname: typeof window > "u" ? "/" : window.location.pathname });
 }
-function j() {
-	return y() ? /* @__PURE__ */ _(M, {}) : /* @__PURE__ */ _(N, { pathname: typeof window > "u" ? "/" : window.location.pathname });
-}
-function M() {
-	let e = b(), t = x();
-	return /* @__PURE__ */ _(N, {
+function E() {
+	let e = _(), t = v();
+	return /* @__PURE__ */ m(D, {
 		pathname: e.pathname,
 		navigateTo: (n) => t({
 			pathname: n,
@@ -62,268 +38,116 @@ function M() {
 		})
 	});
 }
-function N({ pathname: r, navigateTo: i }) {
-	let [a, y] = u(!1), [b, x] = u(!1), [E, O] = u(null), k = l(null), j = l(null), { pageTours: M, productId: N, moduleId: P, pageId: F, loading: I } = o(), L = t(), R = !!i, z = e()?.pageAccessDenied ?? !1;
-	s(() => {
+function D({ pathname: r, navigateTo: i }) {
+	let [a, g] = p(!1), [_, v] = p(!1), [C, T] = p(null), E = f(null), D = f(null), { pageTours: O, productId: k, moduleId: A, pageId: j, loading: M } = o(), N = t(), P = !!i, F = e()?.pageAccessDenied ?? !1;
+	u(() => {
 		let e = () => {
-			x(window.innerWidth < 768);
+			v(window.innerWidth < 768);
 		};
 		return e(), window.addEventListener("resize", e), () => window.removeEventListener("resize", e);
-	}, []), s(() => {
+	}, []), u(() => {
 		let e = (e) => {
-			j.current && !j.current.contains(e.target) && k.current && !k.current.contains(e.target) && y(!1);
+			D.current && !D.current.contains(e.target) && E.current && !E.current.contains(e.target) && g(!1);
 		};
-		return a && (document.addEventListener("mousedown", e), b && (document.body.style.overflow = "hidden")), () => {
+		return a && (document.addEventListener("mousedown", e), _ && (document.body.style.overflow = "hidden")), () => {
 			document.removeEventListener("mousedown", e), document.body.style.overflow = "";
 		};
-	}, [a, b]), s(() => {
+	}, [a, _]), u(() => {
 		let e = (e) => {
-			e.key === "Escape" && y(!1);
+			e.key === "Escape" && g(!1);
 		};
 		return a && document.addEventListener("keydown", e), () => document.removeEventListener("keydown", e);
 	}, [a]);
-	let B = (e) => {
-		y(!1);
-		let t = D(e, r, {
-			productId: N ?? "",
-			moduleId: P,
-			pageId: F
-		}, R);
+	let I = (e) => {
+		g(!1);
+		let t = w(e, r, {
+			productId: k ?? "",
+			moduleId: A,
+			pageId: j
+		}, P);
 		if (t.type === "navigate") {
-			O(e.id), i?.(t.targetPath);
+			T(e.id), i?.(t.targetPath);
 			return;
 		}
 		t.type !== "ignore" && window.setTimeout(() => {
-			L(e);
-		}, C);
-	}, V = c(() => ({
-		productId: N ?? "",
-		moduleId: P,
-		pageId: F
+			N(e);
+		}, b);
+	}, L = d(() => ({
+		productId: k ?? "",
+		moduleId: A,
+		pageId: j
 	}), [
-		P,
-		F,
-		N
-	]), H = c(() => M.filter((e) => T(e, N)).sort((e, t) => {
-		let r = n(e, V) - n(t, V);
+		A,
+		j,
+		k
+	]), R = d(() => O.filter((e) => S(e, k)).sort((e, t) => {
+		let r = n(e, L) - n(t, L);
 		if (r !== 0) return r;
 		let i = (t.priority ?? 0) - (e.priority ?? 0);
 		return i === 0 ? (e.displayOrder ?? 0) - (t.displayOrder ?? 0) : i;
 	}), [
-		V,
-		N,
-		M
+		L,
+		k,
+		O
 	]);
-	s(() => {
-		if (!E) return;
-		let e = H.find((e) => e.id === E);
+	u(() => {
+		if (!C) return;
+		let e = R.find((e) => e.id === C);
 		if (!e) {
-			O(null);
+			T(null);
 			return;
 		}
-		let t = D(e, r, V, R);
+		let t = w(e, r, L, P);
 		if (t.type === "navigate") return;
 		if (t.type === "ignore") {
-			O(null);
+			T(null);
 			return;
 		}
 		let n = window.setTimeout(() => {
-			L(e), O(null);
-		}, w);
+			N(e), T(null);
+		}, x);
 		return () => window.clearTimeout(n);
 	}, [
-		H,
 		R,
-		V,
+		P,
+		L,
 		r,
-		E,
-		L
-	]), s(() => {
-		if (!E) return;
+		C,
+		N
+	]), u(() => {
+		if (!C) return;
 		let e = window.setTimeout(() => {
-			O(null);
-		}, S);
+			T(null);
+		}, y);
 		return () => window.clearTimeout(e);
-	}, [E]);
-	let U = H.length > 0, W = z;
-	return s(() => {
-		W && a && y(!1);
-	}, [W, a]), W ? null : /* @__PURE__ */ v("div", {
+	}, [C]);
+	let z = R.length > 0, B = F;
+	return u(() => {
+		B && a && g(!1);
+	}, [B, a]), B ? null : /* @__PURE__ */ h("div", {
 		className: "relative",
 		children: [
-			/* @__PURE__ */ v("button", {
-				ref: k,
-				onClick: () => y(!a),
-				className: `
-          relative p-2 rounded-button transition-colors
-          ${a ? "bg-action-ghost-bg-hover" : "hover:bg-action-ghost-bg-hover"}
-          ${U ? "text-text-primary" : "text-text-tertiary"}
-        `,
-				"aria-label": "Help & Tours",
-				"aria-expanded": a,
-				"aria-haspopup": "true",
-				title: "Help & Tours",
-				children: [/* @__PURE__ */ _(f, { className: "size-5" }), U && /* @__PURE__ */ _("span", { className: "absolute top-1 right-1 size-2 bg-action-primary-bg rounded-full" })]
+			/* @__PURE__ */ m(s, {
+				ref: E,
+				isOpen: a,
+				hasTours: z,
+				onClick: () => g(!a)
+			}),
+			a && _ && /* @__PURE__ */ m(c, {
+				ref: D,
+				loading: M,
+				tours: R,
+				onClose: () => g(!1),
+				onStartTour: I
 			}),
-			a && b && /* @__PURE__ */ v(g, { children: [/* @__PURE__ */ _("div", {
-				className: "fixed inset-0 bg-black/50 z-[100] animate-in fade-in duration-200",
-				onClick: () => y(!1)
-			}), /* @__PURE__ */ v("div", {
-				ref: j,
-				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__ */ _("div", {
-						className: "flex justify-center pt-3 pb-2",
-						children: /* @__PURE__ */ _("div", { className: "w-10 h-1 bg-border-default rounded-full" })
-					}),
-					/* @__PURE__ */ v("div", {
-						className: "flex items-center justify-between px-4 pb-3 border-b border-border-subtle",
-						children: [/* @__PURE__ */ v("div", {
-							className: "flex items-center gap-2",
-							children: [/* @__PURE__ */ _(m, { className: "size-5 text-action-primary-bg" }), /* @__PURE__ */ _("h2", {
-								className: "text-lg font-semibold text-text-primary",
-								children: "Product Tours"
-							})]
-						}), /* @__PURE__ */ _("button", {
-							type: "button",
-							onClick: () => y(!1),
-							className: "p-2 hover:bg-action-ghost-bg-hover rounded-full",
-							"aria-label": "Close",
-							children: /* @__PURE__ */ _(h, { className: "size-5" })
-						})]
-					}),
-					/* @__PURE__ */ _("div", {
-						className: "flex-1 overflow-y-auto p-4",
-						children: I ? /* @__PURE__ */ _("div", {
-							className: "flex items-center justify-center py-8",
-							children: /* @__PURE__ */ _("div", { className: "animate-spin rounded-full size-6 border-2 border-action-primary-bg border-t-transparent" })
-						}) : H.length > 0 ? /* @__PURE__ */ v("div", {
-							className: "space-y-3",
-							children: [/* @__PURE__ */ _("p", {
-								className: "text-sm text-text-secondary mb-4",
-								children: "Take a guided tour. Current-page tours are shown first."
-							}), H.map((e) => /* @__PURE__ */ _("button", {
-								type: "button",
-								onClick: () => B(e),
-								className: "w-full p-4 bg-bg-muted hover:bg-action-ghost-bg-hover rounded-xl transition-colors text-left group",
-								children: /* @__PURE__ */ v("div", {
-									className: "flex items-center justify-between",
-									children: [/* @__PURE__ */ v("div", {
-										className: "flex-1 min-w-0",
-										children: [
-											/* @__PURE__ */ v("div", {
-												className: "flex items-center gap-2 min-w-0",
-												children: [/* @__PURE__ */ _("h3", {
-													className: "min-w-0 flex-1 font-medium text-text-primary truncate",
-													children: e.name
-												}), /* @__PURE__ */ _(A, { status: e.myProgress?.status })]
-											}),
-											e.description && /* @__PURE__ */ _("p", {
-												className: "text-sm text-text-secondary mt-1 line-clamp-2",
-												children: e.description
-											}),
-											/* @__PURE__ */ v("div", {
-												className: "flex items-center gap-3 mt-2 text-xs text-text-tertiary",
-												children: [
-													/* @__PURE__ */ v("span", { children: [e.steps?.length || 0, " steps"] }),
-													/* @__PURE__ */ _("span", { children: "•" }),
-													/* @__PURE__ */ v("span", { children: [
-														"~",
-														Math.ceil((e.steps?.length || 0) * .5),
-														" min"
-													] })
-												]
-											})
-										]
-									}), /* @__PURE__ */ _("div", {
-										className: "ml-3 p-2 bg-action-primary-bg rounded-full text-action-primary-text group-hover:scale-110 transition-transform",
-										children: /* @__PURE__ */ _(p, { className: "size-4" })
-									})]
-								})
-							}, e.id))]
-						}) : /* @__PURE__ */ v("div", {
-							className: "text-center py-8",
-							children: [
-								/* @__PURE__ */ _(f, { className: "size-12 mx-auto text-text-tertiary mb-3" }),
-								/* @__PURE__ */ _("p", {
-									className: "text-text-secondary",
-									children: "No tours available for this page"
-								}),
-								/* @__PURE__ */ _("p", {
-									className: "text-sm text-text-tertiary mt-1",
-									children: "Check back later or explore other pages"
-								})
-							]
-						})
-					}),
-					/* @__PURE__ */ _("div", { className: "h-safe-area-inset-bottom" })
-				]
-			})] }),
-			a && !b && /* @__PURE__ */ v("div", {
-				ref: j,
-				className: "absolute right-0 top-full mt-2 w-80 bg-bg-surface rounded-lg shadow-xl border border-border-subtle z-50 animate-in fade-in slide-in-from-top-2 duration-200",
-				children: [
-					/* @__PURE__ */ v("div", {
-						className: "flex items-center gap-2 px-4 py-3 border-b border-border-subtle",
-						children: [/* @__PURE__ */ _(m, { className: "size-4 text-action-primary-bg" }), /* @__PURE__ */ _("h3", {
-							className: "font-medium text-text-primary",
-							children: "Product Tours"
-						})]
-					}),
-					/* @__PURE__ */ _("div", {
-						className: "max-h-80 overflow-y-auto",
-						children: I ? /* @__PURE__ */ _("div", {
-							className: "flex items-center justify-center py-6",
-							children: /* @__PURE__ */ _("div", { className: "animate-spin rounded-full size-5 border-2 border-action-primary-bg border-t-transparent" })
-						}) : H.length > 0 ? /* @__PURE__ */ _("div", {
-							className: "p-2",
-							children: H.map((e) => /* @__PURE__ */ _("button", {
-								type: "button",
-								onClick: () => B(e),
-								className: "w-full p-3 hover:bg-action-ghost-bg-hover rounded-md transition-colors text-left group",
-								children: /* @__PURE__ */ v("div", {
-									className: "flex items-center justify-between",
-									children: [/* @__PURE__ */ v("div", {
-										className: "flex-1 min-w-0",
-										children: [
-											/* @__PURE__ */ v("div", {
-												className: "flex items-center gap-2 min-w-0",
-												children: [/* @__PURE__ */ _("h4", {
-													className: "min-w-0 flex-1 font-medium text-text-primary text-sm truncate",
-													children: e.name
-												}), /* @__PURE__ */ _(A, { status: e.myProgress?.status })]
-											}),
-											e.description && /* @__PURE__ */ _("p", {
-												className: "text-xs text-text-secondary mt-0.5 line-clamp-1",
-												children: e.description
-											}),
-											/* @__PURE__ */ _("div", {
-												className: "flex items-center gap-2 mt-1 text-xs text-text-tertiary",
-												children: /* @__PURE__ */ v("span", { children: [e.steps?.length || 0, " steps"] })
-											})
-										]
-									}), /* @__PURE__ */ _(d, { className: "size-4 text-text-tertiary group-hover:text-action-primary-bg group-hover:translate-x-0.5 transition-all" })]
-								})
-							}, e.id))
-						}) : /* @__PURE__ */ _("div", {
-							className: "text-center py-6 px-4",
-							children: /* @__PURE__ */ _("p", {
-								className: "text-sm text-text-secondary",
-								children: "No tours available for this page"
-							})
-						})
-					}),
-					H.length > 0 && /* @__PURE__ */ _("div", {
-						className: "px-4 py-2 border-t border-border-subtle bg-bg-muted/50 rounded-b-lg",
-						children: /* @__PURE__ */ _("p", {
-							className: "text-xs text-text-tertiary text-center",
-							children: "Click a tour to start the guided walkthrough"
-						})
-					})
-				]
+			a && !_ && /* @__PURE__ */ m(l, {
+				ref: D,
+				loading: M,
+				tours: R,
+				onStartTour: I
 			})
 		]
 	});
 }
 //#endregion
-export { j as TourTrigger };
+export { T as TourTrigger };