@burdenoff/microfe-tours 2026.624.1 → 2026.625.1

package/dist/tours/pages/MyToursPage.js

@@ -5,41 +5,42 @@ import { useEffect as r, useRef as i } from "react";
 import { CheckCircle2 as a, Circle as o, MinusCircle as s, Play as c } from "lucide-react";
 import { jsx as l, jsxs as u } from "react/jsx-runtime";
 import { useSearchParams as d } from "react-router-dom";
-import { useEventBus as f } from "@burdenoff/fe-libs/shared/events";
+import { GlassCard as f } from "@burdenoff/fe-libs/ui";
+import { useEventBus as p } from "@burdenoff/fe-libs/shared/events";
 //#region src/tours/pages/MyToursPage.tsx
-var p = /^[a-zA-Z0-9_-]+$/, m = /^[a-zA-Z0-9_\-/]+$/;
-function h(e, t) {
-	return e && p.test(e) ? e : t;
-}
+var m = /^[a-zA-Z0-9_-]+$/, h = /^[a-zA-Z0-9_\-/]+$/;
 function g(e, t) {
 	return e && m.test(e) ? e : t;
 }
-function _() {
-	let { tr: a } = n(), { productId: o, moduleId: s, pageId: c, workspaceId: p } = e(), [m] = d(), _ = f(), y = i(!1);
+function _(e, t) {
+	return e && h.test(e) ? e : t;
+}
+function v() {
+	let { tr: a } = n(), { productId: o, moduleId: s, pageId: c, workspaceId: m } = e(), [h] = d(), v = p(), b = i(!1);
 	r(() => {
-		y.current || (y.current = !0, _.emit("tours.page.viewed", {
+		b.current || (b.current = !0, v.emit("tours.page.viewed", {
 			page: "/tours",
 			productId: o,
 			moduleId: s,
 			pageId: c,
-			workspaceId: p
+			workspaceId: m
 		}));
 	}, [
-		_,
+		v,
 		o,
 		s,
 		c,
-		p
+		m
 	]);
-	let b = h(o, void 0) ?? h(m.get("productId"), void 0), x = h(s, void 0) ?? h(m.get("moduleId"), void 0), S = g(c, void 0) ?? g(m.get("pageId"), void 0), { data: C, loading: w } = t({
-		variables: b ? { context: {
-			productId: b,
-			moduleId: x,
-			pageId: S
+	let x = g(o, void 0) ?? g(h.get("productId"), void 0), S = g(s, void 0) ?? g(h.get("moduleId"), void 0), C = _(c, void 0) ?? _(h.get("pageId"), void 0), { data: w, loading: T } = t({
+		variables: x ? { context: {
+			productId: x,
+			moduleId: S,
+			pageId: C
 		} } : void 0,
-		skip: !b,
+		skip: !x,
 		fetchPolicy: "cache-and-network"
-	}), T = C?.toursForContext ?? [], E = w;
+	}), E = w?.toursForContext ?? [], D = T;
 	return /* @__PURE__ */ u("div", {
 		className: "space-y-4 sm:space-y-6 p-3 sm:p-6",
 		children: [/* @__PURE__ */ u("div", { children: [/* @__PURE__ */ l("h1", {
@@ -48,10 +49,10 @@ function _() {
 		}), /* @__PURE__ */ l("p", {
 			className: "text-sm sm:text-base text-text-secondary",
 			children: a("myTours.subtitle")
-		})] }), E && T.length === 0 ? /* @__PURE__ */ l("output", {
+		})] }), D && E.length === 0 ? /* @__PURE__ */ l("output", {
 			className: "text-sm text-text-secondary",
 			children: a("myTours.loading")
-		}) : T.length === 0 ? /* @__PURE__ */ l("div", {
+		}) : E.length === 0 ? /* @__PURE__ */ l("div", {
 			className: "rounded-lg border border-dashed border-border-subtle p-8 text-center",
 			children: /* @__PURE__ */ l("output", {
 				className: "block text-sm text-text-secondary",
@@ -59,14 +60,15 @@ function _() {
 			})
 		}) : /* @__PURE__ */ l("ul", {
 			className: "grid gap-3 grid-cols-1 sm:grid-cols-2 lg:grid-cols-3",
-			children: T.map((e) => /* @__PURE__ */ u("li", {
-				className: "rounded-lg border border-border-subtle bg-bg-surface p-4 flex flex-col gap-2",
+			children: E.map((e) => /* @__PURE__ */ l("li", { children: /* @__PURE__ */ u(f, {
+				treatment: "plain",
+				className: "h-full p-4 flex flex-col gap-2 border-border-seam shadow-[var(--shadow-pop)]",
 				children: [/* @__PURE__ */ u("div", {
 					className: "flex items-start justify-between gap-2",
 					children: [/* @__PURE__ */ l("h2", {
 						className: "font-semibold text-text-primary line-clamp-2",
 						children: e.name
-					}), /* @__PURE__ */ l(v, {
+					}), /* @__PURE__ */ l(y, {
 						status: e.myProgress?.status,
 						tr: a
 					})]
@@ -74,11 +76,11 @@ function _() {
 					className: "text-sm text-text-secondary line-clamp-3",
 					children: e.description
 				}) : null]
-			}, e.id))
+			}) }, e.id))
 		})]
 	});
 }
-function v({ status: e, tr: t }) {
+function y({ status: e, tr: t }) {
 	switch (e) {
 		case "COMPLETED": return /* @__PURE__ */ u("span", {
 			className: "inline-flex items-center gap-1 text-xs text-success",
@@ -100,6 +102,6 @@ function v({ status: e, tr: t }) {
 	}
 }
 //#endregion
-export { _ as MyToursPage };
+export { v as MyToursPage };
 
 //# sourceMappingURL=MyToursPage.js.map

package/dist/tours/pages/MyToursPage.js.map

@@ -1 +1 @@
-{"version":3,"file":"MyToursPage.js","names":[],"sources":["../../../src/tours/pages/MyToursPage.tsx"],"sourcesContent":["import { useEffect, useRef } from 'react';\nimport { useSearchParams } from 'react-router-dom';\nimport { CheckCircle2, Circle, MinusCircle, Play } from 'lucide-react';\nimport {\n  useGetToursForContextQuery,\n  type GetToursForContextQuery,\n} from '../../generated/global-operations';\nimport { useToursContext } from '../providers/ToursProvider';\nimport { useToursI18n, type ToursTranslationKey } from '../i18n';\nimport { useEventBus } from '@burdenoff/fe-libs/shared/events';\n\ntype TourSummary = GetToursForContextQuery['toursForContext'][number];\n\n// Plain slug validator for productId and moduleId.\nconst SLUG_PATTERN = /^[a-zA-Z0-9_-]+$/;\n\n// pageId is documented with path-style values like \"settings/team\" per\n// ToursRootProps — tighten to URL-safe characters only, but permit `/`.\nconst PAGE_PATH_PATTERN = /^[a-zA-Z0-9_\\-/]+$/;\n\nfunction safeSlug<T extends string | undefined>(\n  raw: string | null | undefined,\n  fallback: T\n): string | T {\n  if (raw && SLUG_PATTERN.test(raw)) return raw;\n  return fallback;\n}\n\nfunction safePageId<T extends string | undefined>(\n  raw: string | null | undefined,\n  fallback: T\n): string | T {\n  if (raw && PAGE_PATH_PATTERN.test(raw)) return raw;\n  return fallback;\n}\n\n/**\n * MyToursPage — user-facing browse for available tours.\n *\n * Lists tours returned by `toursForContext` (filtered to the current\n * product/module/page surface) and decorates each with the requesting\n * user's `TourUserProgress` status (Completed / In progress / Skipped /\n * Not started). Read-only — tours are actually played via the SDK overlay,\n * not via mutations on this page.\n */\nexport function MyToursPage() {\n  const { tr } = useToursI18n();\n  const {\n    productId: shellProductId,\n    moduleId: shellModuleId,\n    pageId: shellPageId,\n    workspaceId,\n  } = useToursContext();\n  const [searchParams] = useSearchParams();\n  const eventBus = useEventBus();\n\n  // Emit page view event exactly once per mount. A ref guard keeps the effect\n  // semantically mount-only while satisfying exhaustive-deps with the real\n  // dependency list, so we don't have to disable the lint rule.\n  const pageViewedRef = useRef(false);\n  useEffect(() => {\n    if (pageViewedRef.current) return;\n    pageViewedRef.current = true;\n    eventBus.emit('tours.page.viewed', {\n      page: '/tours',\n      productId: shellProductId,\n      moduleId: shellModuleId,\n      pageId: shellPageId,\n      workspaceId,\n    });\n  }, [eventBus, shellProductId, shellModuleId, shellPageId, workspaceId]);\n\n  // Preferred source is the shell's productId prop (the host app knows\n  // which product it is — \"workspaces\", \"vibecontrols\", \"bigconsole\", etc.).\n  // Fall back to a query-param override for deep-link scenarios, but only\n  // after passing a plain-slug validator so we never forward arbitrary\n  // strings into the GraphQL variables. No hardcoded product default —\n  // if neither source provides one, skip the query entirely so non-\n  // workspaces integrations don't get workspaces tours.\n  const productId =\n    safeSlug(shellProductId, undefined) ?? safeSlug(searchParams.get('productId'), undefined);\n  const moduleId =\n    safeSlug(shellModuleId, undefined) ?? safeSlug(searchParams.get('moduleId'), undefined);\n  const pageId =\n    safePageId(shellPageId, undefined) ?? safePageId(searchParams.get('pageId'), undefined);\n\n  const { data: toursData, loading: toursLoading } = useGetToursForContextQuery({\n    variables: productId ? { context: { productId, moduleId, pageId } } : undefined,\n    skip: !productId,\n    fetchPolicy: 'cache-and-network',\n  });\n\n  const tours = toursData?.toursForContext ?? [];\n  const isLoading = toursLoading;\n\n  return (\n    <div className=\"space-y-4 sm:space-y-6 p-3 sm:p-6\">\n      <div>\n        <h1 className=\"text-xl sm:text-2xl font-bold text-text-primary\">{tr('myTours.title')}</h1>\n        <p className=\"text-sm sm:text-base text-text-secondary\">{tr('myTours.subtitle')}</p>\n      </div>\n\n      {isLoading && tours.length === 0 ? (\n        <output className=\"text-sm text-text-secondary\">{tr('myTours.loading')}</output>\n      ) : tours.length === 0 ? (\n        <div className=\"rounded-lg border border-dashed border-border-subtle p-8 text-center\">\n          <output className=\"block text-sm text-text-secondary\">{tr('myTours.empty')}</output>\n        </div>\n      ) : (\n        <ul className=\"grid gap-3 grid-cols-1 sm:grid-cols-2 lg:grid-cols-3\">\n          {tours.map((tour: TourSummary) => (\n            <li\n              key={tour.id}\n              className=\"rounded-lg border border-border-subtle bg-bg-surface p-4 flex flex-col gap-2\"\n            >\n              <div className=\"flex items-start justify-between gap-2\">\n                <h2 className=\"font-semibold text-text-primary line-clamp-2\">{tour.name}</h2>\n                <ProgressBadge status={tour.myProgress?.status} tr={tr} />\n              </div>\n              {tour.description ? (\n                <p className=\"text-sm text-text-secondary line-clamp-3\">{tour.description}</p>\n              ) : null}\n            </li>\n          ))}\n        </ul>\n      )}\n    </div>\n  );\n}\n\nfunction ProgressBadge({\n  status,\n  tr,\n}: {\n  status: string | undefined;\n  tr: (key: ToursTranslationKey) => string;\n}) {\n  switch (status) {\n    case 'COMPLETED':\n      return (\n        <span className=\"inline-flex items-center gap-1 text-xs text-success\">\n          <CheckCircle2 size={14} />\n          {tr('myTours.status.completed')}\n        </span>\n      );\n    case 'IN_PROGRESS':\n      return (\n        <span className=\"inline-flex items-center gap-1 text-xs text-warning\">\n          <Play size={14} />\n          {tr('myTours.status.inProgress')}\n        </span>\n      );\n    case 'SKIPPED':\n    case 'DISMISSED':\n      return (\n        <span className=\"inline-flex items-center gap-1 text-xs text-text-secondary\">\n          <MinusCircle size={14} />\n          {tr('myTours.status.skipped')}\n        </span>\n      );\n    default:\n      return (\n        <span className=\"inline-flex items-center gap-1 text-xs text-text-secondary\">\n          <Circle size={14} />\n          {tr('myTours.status.notStarted')}\n        </span>\n      );\n  }\n}\n"],"mappings":"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"}
+{"version":3,"file":"MyToursPage.js","names":[],"sources":["../../../src/tours/pages/MyToursPage.tsx"],"sourcesContent":["import { useEffect, useRef } from 'react';\nimport { useSearchParams } from 'react-router-dom';\nimport { CheckCircle2, Circle, MinusCircle, Play } from 'lucide-react';\nimport {\n  useGetToursForContextQuery,\n  type GetToursForContextQuery,\n} from '../../generated/global-operations';\nimport { useToursContext } from '../providers/ToursProvider';\nimport { useToursI18n, type ToursTranslationKey } from '../i18n';\nimport { useEventBus } from '@burdenoff/fe-libs/shared/events';\nimport { GlassCard } from '@burdenoff/fe-libs/ui';\n\ntype TourSummary = GetToursForContextQuery['toursForContext'][number];\n\n// Plain slug validator for productId and moduleId.\nconst SLUG_PATTERN = /^[a-zA-Z0-9_-]+$/;\n\n// pageId is documented with path-style values like \"settings/team\" per\n// ToursRootProps — tighten to URL-safe characters only, but permit `/`.\nconst PAGE_PATH_PATTERN = /^[a-zA-Z0-9_\\-/]+$/;\n\nfunction safeSlug<T extends string | undefined>(\n  raw: string | null | undefined,\n  fallback: T\n): string | T {\n  if (raw && SLUG_PATTERN.test(raw)) return raw;\n  return fallback;\n}\n\nfunction safePageId<T extends string | undefined>(\n  raw: string | null | undefined,\n  fallback: T\n): string | T {\n  if (raw && PAGE_PATH_PATTERN.test(raw)) return raw;\n  return fallback;\n}\n\n/**\n * MyToursPage — user-facing browse for available tours.\n *\n * Lists tours returned by `toursForContext` (filtered to the current\n * product/module/page surface) and decorates each with the requesting\n * user's `TourUserProgress` status (Completed / In progress / Skipped /\n * Not started). Read-only — tours are actually played via the SDK overlay,\n * not via mutations on this page.\n */\nexport function MyToursPage() {\n  const { tr } = useToursI18n();\n  const {\n    productId: shellProductId,\n    moduleId: shellModuleId,\n    pageId: shellPageId,\n    workspaceId,\n  } = useToursContext();\n  const [searchParams] = useSearchParams();\n  const eventBus = useEventBus();\n\n  // Emit page view event exactly once per mount. A ref guard keeps the effect\n  // semantically mount-only while satisfying exhaustive-deps with the real\n  // dependency list, so we don't have to disable the lint rule.\n  const pageViewedRef = useRef(false);\n  useEffect(() => {\n    if (pageViewedRef.current) return;\n    pageViewedRef.current = true;\n    eventBus.emit('tours.page.viewed', {\n      page: '/tours',\n      productId: shellProductId,\n      moduleId: shellModuleId,\n      pageId: shellPageId,\n      workspaceId,\n    });\n  }, [eventBus, shellProductId, shellModuleId, shellPageId, workspaceId]);\n\n  // Preferred source is the shell's productId prop (the host app knows\n  // which product it is — \"workspaces\", \"vibecontrols\", \"bigconsole\", etc.).\n  // Fall back to a query-param override for deep-link scenarios, but only\n  // after passing a plain-slug validator so we never forward arbitrary\n  // strings into the GraphQL variables. No hardcoded product default —\n  // if neither source provides one, skip the query entirely so non-\n  // workspaces integrations don't get workspaces tours.\n  const productId =\n    safeSlug(shellProductId, undefined) ?? safeSlug(searchParams.get('productId'), undefined);\n  const moduleId =\n    safeSlug(shellModuleId, undefined) ?? safeSlug(searchParams.get('moduleId'), undefined);\n  const pageId =\n    safePageId(shellPageId, undefined) ?? safePageId(searchParams.get('pageId'), undefined);\n\n  const { data: toursData, loading: toursLoading } = useGetToursForContextQuery({\n    variables: productId ? { context: { productId, moduleId, pageId } } : undefined,\n    skip: !productId,\n    fetchPolicy: 'cache-and-network',\n  });\n\n  const tours = toursData?.toursForContext ?? [];\n  const isLoading = toursLoading;\n\n  return (\n    <div className=\"space-y-4 sm:space-y-6 p-3 sm:p-6\">\n      <div>\n        <h1 className=\"text-xl sm:text-2xl font-bold text-text-primary\">{tr('myTours.title')}</h1>\n        <p className=\"text-sm sm:text-base text-text-secondary\">{tr('myTours.subtitle')}</p>\n      </div>\n\n      {isLoading && tours.length === 0 ? (\n        <output className=\"text-sm text-text-secondary\">{tr('myTours.loading')}</output>\n      ) : tours.length === 0 ? (\n        <div className=\"rounded-lg border border-dashed border-border-subtle p-8 text-center\">\n          <output className=\"block text-sm text-text-secondary\">{tr('myTours.empty')}</output>\n        </div>\n      ) : (\n        <ul className=\"grid gap-3 grid-cols-1 sm:grid-cols-2 lg:grid-cols-3\">\n          {tours.map((tour: TourSummary) => (\n            <li key={tour.id}>\n              <GlassCard\n                treatment=\"plain\"\n                className=\"h-full p-4 flex flex-col gap-2 border-border-seam shadow-[var(--shadow-pop)]\"\n              >\n                <div className=\"flex items-start justify-between gap-2\">\n                  <h2 className=\"font-semibold text-text-primary line-clamp-2\">{tour.name}</h2>\n                  <ProgressBadge status={tour.myProgress?.status} tr={tr} />\n                </div>\n                {tour.description ? (\n                  <p className=\"text-sm text-text-secondary line-clamp-3\">{tour.description}</p>\n                ) : null}\n              </GlassCard>\n            </li>\n          ))}\n        </ul>\n      )}\n    </div>\n  );\n}\n\nfunction ProgressBadge({\n  status,\n  tr,\n}: {\n  status: string | undefined;\n  tr: (key: ToursTranslationKey) => string;\n}) {\n  switch (status) {\n    case 'COMPLETED':\n      return (\n        <span className=\"inline-flex items-center gap-1 text-xs text-success\">\n          <CheckCircle2 size={14} />\n          {tr('myTours.status.completed')}\n        </span>\n      );\n    case 'IN_PROGRESS':\n      return (\n        <span className=\"inline-flex items-center gap-1 text-xs text-warning\">\n          <Play size={14} />\n          {tr('myTours.status.inProgress')}\n        </span>\n      );\n    case 'SKIPPED':\n    case 'DISMISSED':\n      return (\n        <span className=\"inline-flex items-center gap-1 text-xs text-text-secondary\">\n          <MinusCircle size={14} />\n          {tr('myTours.status.skipped')}\n        </span>\n      );\n    default:\n      return (\n        <span className=\"inline-flex items-center gap-1 text-xs text-text-secondary\">\n          <Circle size={14} />\n          {tr('myTours.status.notStarted')}\n        </span>\n      );\n  }\n}\n"],"mappings":"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"}

package/dist/tours/pages/MyToursProgressPage.js

@@ -4,105 +4,109 @@ import { useToursI18n as n } from "../i18n.js";
 import { useEffect as r, useMemo as i, useRef as a } from "react";
 import { CheckCircle2 as o, HelpCircle as s, MinusCircle as c, Play as l } from "lucide-react";
 import { jsx as u, jsxs as d } from "react/jsx-runtime";
-import { useEventBus as f } from "@burdenoff/fe-libs/shared/events";
+import { EmphasisPanel as f } from "@burdenoff/fe-libs/ui";
+import { useEventBus as p } from "@burdenoff/fe-libs/shared/events";
 //#region src/tours/pages/MyToursProgressPage.tsx
-function p() {
-	let { tr: p } = n(), { currentUser: h, productId: g, moduleId: _, pageId: v, workspaceId: y } = e(), b = f(), x = a(!1);
+function m() {
+	let { tr: m } = n(), { currentUser: g, productId: _, moduleId: v, pageId: y, workspaceId: b } = e(), x = p(), S = a(!1);
 	r(() => {
-		x.current || (x.current = !0, b.emit("tours.page.viewed", {
+		S.current || (S.current = !0, x.emit("tours.page.viewed", {
 			page: "/tours/progress",
-			productId: g,
-			moduleId: _,
-			pageId: v,
-			workspaceId: y
+			productId: _,
+			moduleId: v,
+			pageId: y,
+			workspaceId: b
 		}));
 	}, [
-		b,
-		g,
+		x,
 		_,
 		v,
-		y
+		y,
+		b
 	]);
-	let { data: S, loading: C } = t({
+	let { data: C, loading: w } = t({
 		variables: {
-			userId: h?.id,
+			userId: g?.id,
 			pagination: {
 				limit: 100,
 				offset: 0
 			}
 		},
-		skip: !h?.id,
+		skip: !g?.id,
 		fetchPolicy: "cache-and-network"
-	}), w = i(() => {
+	}), T = i(() => {
 		let e = {
 			IN_PROGRESS: [],
 			COMPLETED: [],
 			SKIPPED: [],
 			OTHER: []
-		}, t = (S?.userTourProgresses ?? []).filter((e) => !(g && e.tour.productId !== g || _ && e.tour.moduleId && e.tour.moduleId !== _ || v && e.tour.pageId && e.tour.pageId !== v));
+		}, t = (C?.userTourProgresses ?? []).filter((e) => !(_ && e.tour.productId !== _ || v && e.tour.moduleId && e.tour.moduleId !== v || y && e.tour.pageId && e.tour.pageId !== y));
 		for (let n of t) n.status === "COMPLETED" ? e.COMPLETED.push(n) : n.status === "IN_PROGRESS" ? e.IN_PROGRESS.push(n) : n.status === "SKIPPED" || n.status === "DISMISSED" ? e.SKIPPED.push(n) : e.OTHER.push(n);
 		return e;
 	}, [
-		S,
-		g,
+		C,
 		_,
-		v
+		v,
+		y
 	]);
 	return /* @__PURE__ */ d("div", {
 		className: "space-y-4 sm:space-y-6 p-3 sm:p-6",
 		children: [/* @__PURE__ */ d("div", { children: [/* @__PURE__ */ u("h1", {
 			className: "text-xl sm:text-2xl font-bold text-text-primary",
-			children: p("myToursProgress.title")
+			children: m("myToursProgress.title")
 		}), /* @__PURE__ */ u("p", {
 			className: "text-sm sm:text-base text-text-secondary",
-			children: p("myToursProgress.subtitle")
-		})] }), C && (S?.userTourProgresses?.length ?? 0) === 0 ? /* @__PURE__ */ u("output", {
+			children: m("myToursProgress.subtitle")
+		})] }), w && (C?.userTourProgresses?.length ?? 0) === 0 ? /* @__PURE__ */ u("output", {
 			className: "text-sm text-text-secondary",
-			children: p("myToursProgress.loading")
+			children: m("myToursProgress.loading")
 		}) : /* @__PURE__ */ d("div", {
 			className: "space-y-6",
 			children: [
-				/* @__PURE__ */ u(m, {
-					title: p("myToursProgress.inProgress"),
-					icon: /* @__PURE__ */ u(l, {
-						size: 16,
-						className: "text-warning"
-					}),
-					rows: w.IN_PROGRESS,
-					emptyText: p("myToursProgress.emptyInProgress")
+				/* @__PURE__ */ u(f, {
+					className: "p-4 sm:p-5",
+					children: /* @__PURE__ */ u(h, {
+						title: m("myToursProgress.inProgress"),
+						icon: /* @__PURE__ */ u(l, {
+							size: 16,
+							className: "text-warning"
+						}),
+						rows: T.IN_PROGRESS,
+						emptyText: m("myToursProgress.emptyInProgress")
+					})
 				}),
-				/* @__PURE__ */ u(m, {
-					title: p("myToursProgress.completed"),
+				/* @__PURE__ */ u(h, {
+					title: m("myToursProgress.completed"),
 					icon: /* @__PURE__ */ u(o, {
 						size: 16,
 						className: "text-success"
 					}),
-					rows: w.COMPLETED,
-					emptyText: p("myToursProgress.emptyCompleted")
+					rows: T.COMPLETED,
+					emptyText: m("myToursProgress.emptyCompleted")
 				}),
-				/* @__PURE__ */ u(m, {
-					title: p("myToursProgress.skipped"),
+				/* @__PURE__ */ u(h, {
+					title: m("myToursProgress.skipped"),
 					icon: /* @__PURE__ */ u(c, {
 						size: 16,
 						className: "text-text-secondary"
 					}),
-					rows: w.SKIPPED,
-					emptyText: p("myToursProgress.emptySkipped")
+					rows: T.SKIPPED,
+					emptyText: m("myToursProgress.emptySkipped")
 				}),
-				w.OTHER.length > 0 ? /* @__PURE__ */ u(m, {
-					title: p("myToursProgress.other"),
+				T.OTHER.length > 0 ? /* @__PURE__ */ u(h, {
+					title: m("myToursProgress.other"),
 					icon: /* @__PURE__ */ u(s, {
 						size: 16,
 						className: "text-text-secondary"
 					}),
-					rows: w.OTHER,
-					emptyText: p("myToursProgress.emptyOther")
+					rows: T.OTHER,
+					emptyText: m("myToursProgress.emptyOther")
 				}) : null
 			]
 		})]
 	});
 }
-function m({ title: e, icon: t, rows: n, emptyText: r }) {
+function h({ title: e, icon: t, rows: n, emptyText: r }) {
 	return /* @__PURE__ */ d("section", {
 		className: "space-y-2",
 		children: [/* @__PURE__ */ d("h2", {
@@ -125,7 +129,7 @@ function m({ title: e, icon: t, rows: n, emptyText: r }) {
 			"aria-live": "polite",
 			children: r
 		}) : /* @__PURE__ */ u("ul", {
-			className: "divide-y divide-border rounded-md border border-border-subtle",
+			className: "divide-y divide-border-seam rounded-md border border-border-seam",
 			children: n.map((e) => /* @__PURE__ */ d("li", {
 				className: "flex items-center justify-between gap-3 p-3",
 				children: [/* @__PURE__ */ u("span", {
@@ -141,6 +145,6 @@ function m({ title: e, icon: t, rows: n, emptyText: r }) {
 	});
 }
 //#endregion
-export { p as MyToursProgressPage };
+export { m as MyToursProgressPage };
 
 //# sourceMappingURL=MyToursProgressPage.js.map

package/dist/tours/pages/MyToursProgressPage.js.map

@@ -1 +1 @@
-{"version":3,"file":"MyToursProgressPage.js","names":[],"sources":["../../../src/tours/pages/MyToursProgressPage.tsx"],"sourcesContent":["import { useMemo, useEffect, useRef } from 'react';\nimport { CheckCircle2, HelpCircle, MinusCircle, Play } from 'lucide-react';\nimport { useGetUserTourProgressesQuery } from '../../generated/global-operations';\nimport { useToursContext } from '../providers/ToursProvider';\nimport { useToursI18n } from '../i18n';\nimport { useEventBus } from '@burdenoff/fe-libs/shared/events';\n\ntype ProgressGroup = 'IN_PROGRESS' | 'COMPLETED' | 'SKIPPED' | 'OTHER';\n\ntype ProgressRow = {\n  id: string;\n  status: string;\n  tour: { id: string; name: string; productId?: string; moduleId?: string; pageId?: string };\n  lastViewedAt?: string | null;\n};\n\n/**\n * MyToursProgressPage — user-facing read-only view of the current user's\n * tour interactions, grouped by status (In progress / Completed / Skipped).\n */\nexport function MyToursProgressPage() {\n  const { tr } = useToursI18n();\n  const {\n    currentUser,\n    productId: shellProductId,\n    moduleId: shellModuleId,\n    pageId: shellPageId,\n    workspaceId,\n  } = useToursContext();\n  const eventBus = useEventBus();\n\n  // Emit page view event exactly once per mount. A ref guard keeps the effect\n  // semantically mount-only while satisfying exhaustive-deps with the real\n  // dependency list, so we don't have to disable the lint rule.\n  const pageViewedRef = useRef(false);\n  useEffect(() => {\n    if (pageViewedRef.current) return;\n    pageViewedRef.current = true;\n    eventBus.emit('tours.page.viewed', {\n      page: '/tours/progress',\n      productId: shellProductId,\n      moduleId: shellModuleId,\n      pageId: shellPageId,\n      workspaceId,\n    });\n  }, [eventBus, shellProductId, shellModuleId, shellPageId, workspaceId]);\n\n  const { data, loading } = useGetUserTourProgressesQuery({\n    variables: { userId: currentUser?.id, pagination: { limit: 100, offset: 0 } },\n    skip: !currentUser?.id,\n    fetchPolicy: 'cache-and-network',\n  });\n\n  const grouped = useMemo(() => {\n    const result: Record<ProgressGroup, NonNullable<typeof data>['userTourProgresses']> = {\n      IN_PROGRESS: [],\n      COMPLETED: [],\n      SKIPPED: [],\n      OTHER: [],\n    };\n    // Filter the raw progress list to the shell's product/module/page context\n    // so a user's vibecontrols session doesn't see workspaces / bigconsole\n    // progress rows. `userTourProgresses` returns everything scoped by userId;\n    // this MFE is mounted per-shell so we narrow to what the shell advertises.\n    // When the shell didn't supply a filter, the corresponding level is not\n    // checked (e.g., no shellModuleId → accept any moduleId).\n    const rows = (data?.userTourProgresses ?? []).filter((row: ProgressRow) => {\n      if (shellProductId && row.tour.productId !== shellProductId) return false;\n      if (shellModuleId && row.tour.moduleId && row.tour.moduleId !== shellModuleId) return false;\n      if (shellPageId && row.tour.pageId && row.tour.pageId !== shellPageId) return false;\n      return true;\n    });\n    for (const row of rows) {\n      if (row.status === 'COMPLETED') result.COMPLETED.push(row);\n      else if (row.status === 'IN_PROGRESS') result.IN_PROGRESS.push(row);\n      else if (row.status === 'SKIPPED' || row.status === 'DISMISSED') result.SKIPPED.push(row);\n      // Unknown / future status values fall through here so nothing is\n      // silently dropped if the backend introduces a new state.\n      else result.OTHER.push(row);\n    }\n    return result;\n  }, [data, shellProductId, shellModuleId, shellPageId]);\n\n  return (\n    <div className=\"space-y-4 sm:space-y-6 p-3 sm:p-6\">\n      <div>\n        <h1 className=\"text-xl sm:text-2xl font-bold text-text-primary\">\n          {tr('myToursProgress.title')}\n        </h1>\n        <p className=\"text-sm sm:text-base text-text-secondary\">\n          {tr('myToursProgress.subtitle')}\n        </p>\n      </div>\n\n      {loading && (data?.userTourProgresses?.length ?? 0) === 0 ? (\n        <output className=\"text-sm text-text-secondary\">{tr('myToursProgress.loading')}</output>\n      ) : (\n        <div className=\"space-y-6\">\n          <ProgressSection\n            title={tr('myToursProgress.inProgress')}\n            icon={<Play size={16} className=\"text-warning\" />}\n            rows={grouped.IN_PROGRESS}\n            emptyText={tr('myToursProgress.emptyInProgress')}\n          />\n          <ProgressSection\n            title={tr('myToursProgress.completed')}\n            icon={<CheckCircle2 size={16} className=\"text-success\" />}\n            rows={grouped.COMPLETED}\n            emptyText={tr('myToursProgress.emptyCompleted')}\n          />\n          <ProgressSection\n            title={tr('myToursProgress.skipped')}\n            icon={<MinusCircle size={16} className=\"text-text-secondary\" />}\n            rows={grouped.SKIPPED}\n            emptyText={tr('myToursProgress.emptySkipped')}\n          />\n          {grouped.OTHER.length > 0 ? (\n            <ProgressSection\n              title={tr('myToursProgress.other')}\n              icon={<HelpCircle size={16} className=\"text-text-secondary\" />}\n              rows={grouped.OTHER}\n              emptyText={tr('myToursProgress.emptyOther')}\n            />\n          ) : null}\n        </div>\n      )}\n    </div>\n  );\n}\n\nfunction ProgressSection({\n  title,\n  icon,\n  rows,\n  emptyText,\n}: {\n  title: string;\n  icon: React.ReactNode;\n  rows: Array<{ id: string; tour: { id: string; name: string }; lastViewedAt?: string | null }>;\n  emptyText: string;\n}) {\n  return (\n    <section className=\"space-y-2\">\n      <h2 className=\"flex items-center gap-2 text-sm font-semibold text-text-primary\">\n        {icon}\n        {title}\n        <span className=\"text-xs text-text-secondary font-normal\">({rows.length})</span>\n      </h2>\n      {rows.length === 0 ? (\n        <p className=\"text-sm text-text-secondary\" role=\"status\" aria-live=\"polite\">\n          {emptyText}\n        </p>\n      ) : (\n        <ul className=\"divide-y divide-border rounded-md border border-border-subtle\">\n          {rows.map((row) => (\n            <li key={row.id} className=\"flex items-center justify-between gap-3 p-3\">\n              <span className=\"text-sm text-text-primary line-clamp-1\">{row.tour.name}</span>\n              {row.lastViewedAt ? (\n                <time className=\"text-xs text-text-secondary\" dateTime={row.lastViewedAt}>\n                  {new Date(row.lastViewedAt).toLocaleDateString()}\n                </time>\n              ) : null}\n            </li>\n          ))}\n        </ul>\n      )}\n    </section>\n  );\n}\n"],"mappings":"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"}
+{"version":3,"file":"MyToursProgressPage.js","names":[],"sources":["../../../src/tours/pages/MyToursProgressPage.tsx"],"sourcesContent":["import { useMemo, useEffect, useRef } from 'react';\nimport { CheckCircle2, HelpCircle, MinusCircle, Play } from 'lucide-react';\nimport { useGetUserTourProgressesQuery } from '../../generated/global-operations';\nimport { useToursContext } from '../providers/ToursProvider';\nimport { useToursI18n } from '../i18n';\nimport { useEventBus } from '@burdenoff/fe-libs/shared/events';\nimport { EmphasisPanel } from '@burdenoff/fe-libs/ui';\n\ntype ProgressGroup = 'IN_PROGRESS' | 'COMPLETED' | 'SKIPPED' | 'OTHER';\n\ntype ProgressRow = {\n  id: string;\n  status: string;\n  tour: { id: string; name: string; productId?: string; moduleId?: string; pageId?: string };\n  lastViewedAt?: string | null;\n};\n\n/**\n * MyToursProgressPage — user-facing read-only view of the current user's\n * tour interactions, grouped by status (In progress / Completed / Skipped).\n */\nexport function MyToursProgressPage() {\n  const { tr } = useToursI18n();\n  const {\n    currentUser,\n    productId: shellProductId,\n    moduleId: shellModuleId,\n    pageId: shellPageId,\n    workspaceId,\n  } = useToursContext();\n  const eventBus = useEventBus();\n\n  // Emit page view event exactly once per mount. A ref guard keeps the effect\n  // semantically mount-only while satisfying exhaustive-deps with the real\n  // dependency list, so we don't have to disable the lint rule.\n  const pageViewedRef = useRef(false);\n  useEffect(() => {\n    if (pageViewedRef.current) return;\n    pageViewedRef.current = true;\n    eventBus.emit('tours.page.viewed', {\n      page: '/tours/progress',\n      productId: shellProductId,\n      moduleId: shellModuleId,\n      pageId: shellPageId,\n      workspaceId,\n    });\n  }, [eventBus, shellProductId, shellModuleId, shellPageId, workspaceId]);\n\n  const { data, loading } = useGetUserTourProgressesQuery({\n    variables: { userId: currentUser?.id, pagination: { limit: 100, offset: 0 } },\n    skip: !currentUser?.id,\n    fetchPolicy: 'cache-and-network',\n  });\n\n  const grouped = useMemo(() => {\n    const result: Record<ProgressGroup, NonNullable<typeof data>['userTourProgresses']> = {\n      IN_PROGRESS: [],\n      COMPLETED: [],\n      SKIPPED: [],\n      OTHER: [],\n    };\n    // Filter the raw progress list to the shell's product/module/page context\n    // so a user's vibecontrols session doesn't see workspaces / bigconsole\n    // progress rows. `userTourProgresses` returns everything scoped by userId;\n    // this MFE is mounted per-shell so we narrow to what the shell advertises.\n    // When the shell didn't supply a filter, the corresponding level is not\n    // checked (e.g., no shellModuleId → accept any moduleId).\n    const rows = (data?.userTourProgresses ?? []).filter((row: ProgressRow) => {\n      if (shellProductId && row.tour.productId !== shellProductId) return false;\n      if (shellModuleId && row.tour.moduleId && row.tour.moduleId !== shellModuleId) return false;\n      if (shellPageId && row.tour.pageId && row.tour.pageId !== shellPageId) return false;\n      return true;\n    });\n    for (const row of rows) {\n      if (row.status === 'COMPLETED') result.COMPLETED.push(row);\n      else if (row.status === 'IN_PROGRESS') result.IN_PROGRESS.push(row);\n      else if (row.status === 'SKIPPED' || row.status === 'DISMISSED') result.SKIPPED.push(row);\n      // Unknown / future status values fall through here so nothing is\n      // silently dropped if the backend introduces a new state.\n      else result.OTHER.push(row);\n    }\n    return result;\n  }, [data, shellProductId, shellModuleId, shellPageId]);\n\n  return (\n    <div className=\"space-y-4 sm:space-y-6 p-3 sm:p-6\">\n      <div>\n        <h1 className=\"text-xl sm:text-2xl font-bold text-text-primary\">\n          {tr('myToursProgress.title')}\n        </h1>\n        <p className=\"text-sm sm:text-base text-text-secondary\">\n          {tr('myToursProgress.subtitle')}\n        </p>\n      </div>\n\n      {loading && (data?.userTourProgresses?.length ?? 0) === 0 ? (\n        <output className=\"text-sm text-text-secondary\">{tr('myToursProgress.loading')}</output>\n      ) : (\n        <div className=\"space-y-6\">\n          <EmphasisPanel className=\"p-4 sm:p-5\">\n            <ProgressSection\n              title={tr('myToursProgress.inProgress')}\n              icon={<Play size={16} className=\"text-warning\" />}\n              rows={grouped.IN_PROGRESS}\n              emptyText={tr('myToursProgress.emptyInProgress')}\n            />\n          </EmphasisPanel>\n          <ProgressSection\n            title={tr('myToursProgress.completed')}\n            icon={<CheckCircle2 size={16} className=\"text-success\" />}\n            rows={grouped.COMPLETED}\n            emptyText={tr('myToursProgress.emptyCompleted')}\n          />\n          <ProgressSection\n            title={tr('myToursProgress.skipped')}\n            icon={<MinusCircle size={16} className=\"text-text-secondary\" />}\n            rows={grouped.SKIPPED}\n            emptyText={tr('myToursProgress.emptySkipped')}\n          />\n          {grouped.OTHER.length > 0 ? (\n            <ProgressSection\n              title={tr('myToursProgress.other')}\n              icon={<HelpCircle size={16} className=\"text-text-secondary\" />}\n              rows={grouped.OTHER}\n              emptyText={tr('myToursProgress.emptyOther')}\n            />\n          ) : null}\n        </div>\n      )}\n    </div>\n  );\n}\n\nfunction ProgressSection({\n  title,\n  icon,\n  rows,\n  emptyText,\n}: {\n  title: string;\n  icon: React.ReactNode;\n  rows: Array<{ id: string; tour: { id: string; name: string }; lastViewedAt?: string | null }>;\n  emptyText: string;\n}) {\n  return (\n    <section className=\"space-y-2\">\n      <h2 className=\"flex items-center gap-2 text-sm font-semibold text-text-primary\">\n        {icon}\n        {title}\n        <span className=\"text-xs text-text-secondary font-normal\">({rows.length})</span>\n      </h2>\n      {rows.length === 0 ? (\n        <p className=\"text-sm text-text-secondary\" role=\"status\" aria-live=\"polite\">\n          {emptyText}\n        </p>\n      ) : (\n        <ul className=\"divide-y divide-border-seam rounded-md border border-border-seam\">\n          {rows.map((row) => (\n            <li key={row.id} className=\"flex items-center justify-between gap-3 p-3\">\n              <span className=\"text-sm text-text-primary line-clamp-1\">{row.tour.name}</span>\n              {row.lastViewedAt ? (\n                <time className=\"text-xs text-text-secondary\" dateTime={row.lastViewedAt}>\n                  {new Date(row.lastViewedAt).toLocaleDateString()}\n                </time>\n              ) : null}\n            </li>\n          ))}\n        </ul>\n      )}\n    </section>\n  );\n}\n"],"mappings":"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"}