@burdenoff/microfe-tours 2026.510.112

package/dist/tours/pages/AnalyticsDashboardPage.js

@@ -0,0 +1,230 @@
+import { useToursPermissionAccess as e } from "../hooks/useToursPermissionAccess.js";
+import { TOUR_PERMISSIONS as t } from "../../constants/permissions.js";
+import { useTourAnalytics as n } from "../hooks/useTourAnalytics.js";
+import { formatDuration as r, formatNumber as i, formatPercentage as a } from "../utils/index.js";
+import { useCallback as o, useEffect as s } from "react";
+import { BarChart3 as c, Timer as l, TrendingUp as u, Users as d } from "lucide-react";
+import { jsx as f, jsxs as p } from "react/jsx-runtime";
+import { useParams as m } from "react-router-dom";
+import { useI18n as h } from "@burdenoff/fe-libs/shared/providers/shell/I18nProvider";
+//#region src/tours/pages/AnalyticsDashboardPage.tsx
+function g() {
+	let { t: g } = h(), _ = o((e, t) => {
+		let n = g(e);
+		return n === e ? t : n;
+	}, [g]), { tourId: v } = m(), { hasPermission: y, isLoading: b } = e(), x = y(t.TOUR_ANALYTICS_READ), { analytics: S, loading: C, fetchAnalytics: w, getCompletionRate: T, getSkipRate: E } = n(v);
+	return s(() => {
+		b || !x || w();
+	}, [
+		w,
+		b,
+		x
+	]), !b && !x ? /* @__PURE__ */ f("div", {
+		className: "flex items-center justify-center h-full p-6",
+		children: /* @__PURE__ */ p("div", {
+			className: "text-center",
+			children: [/* @__PURE__ */ f("h2", {
+				className: "text-lg font-semibold text-foreground mb-2",
+				children: _("analyticsDashboard.accessDenied", "Access Denied")
+			}), /* @__PURE__ */ f("p", {
+				className: "text-sm text-muted-foreground",
+				children: _("analyticsDashboard.noPermission", "You do not have permission to view tour analytics.")
+			})]
+		})
+	}) : C ? /* @__PURE__ */ f("div", {
+		className: "flex items-center justify-center h-full",
+		children: /* @__PURE__ */ f("p", {
+			className: "text-muted-foreground",
+			children: _("analyticsDashboard.loading", "Loading analytics...")
+		})
+	}) : S ? /* @__PURE__ */ p("div", {
+		className: "space-y-6 p-6",
+		children: [
+			/* @__PURE__ */ p("div", { children: [/* @__PURE__ */ f("h1", {
+				className: "text-2xl font-bold",
+				children: _("analyticsDashboard.title", "Tour Analytics")
+			}), /* @__PURE__ */ f("p", {
+				className: "text-sm text-muted-foreground",
+				children: _("analyticsDashboard.subtitle", "Performance metrics and insights")
+			})] }),
+			/* @__PURE__ */ p("div", {
+				className: "grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4",
+				children: [
+					/* @__PURE__ */ p("div", {
+						className: "border border-border rounded-md p-4 bg-card",
+						children: [/* @__PURE__ */ p("div", {
+							className: "flex items-center gap-3 mb-2",
+							children: [/* @__PURE__ */ f("div", {
+								className: "p-2 bg-primary/10 rounded-md",
+								children: /* @__PURE__ */ f(d, {
+									className: "text-primary",
+									size: 20
+								})
+							}), /* @__PURE__ */ f("span", {
+								className: "text-sm text-muted-foreground",
+								children: _("analyticsDashboard.totalViews", "Total Views")
+							})]
+						}), /* @__PURE__ */ f("div", {
+							className: "text-2xl font-bold",
+							children: i(S.totalViews)
+						})]
+					}),
+					/* @__PURE__ */ p("div", {
+						className: "border border-border rounded-md p-4 bg-card",
+						children: [/* @__PURE__ */ p("div", {
+							className: "flex items-center gap-3 mb-2",
+							children: [/* @__PURE__ */ f("div", {
+								className: "p-2 bg-success/10 rounded-md",
+								children: /* @__PURE__ */ f(u, {
+									className: "text-success",
+									size: 20
+								})
+							}), /* @__PURE__ */ f("span", {
+								className: "text-sm text-muted-foreground",
+								children: _("analyticsDashboard.completionRate", "Completion Rate")
+							})]
+						}), /* @__PURE__ */ f("div", {
+							className: "text-2xl font-bold",
+							children: a(T())
+						})]
+					}),
+					/* @__PURE__ */ p("div", {
+						className: "border border-border rounded-md p-4 bg-card",
+						children: [/* @__PURE__ */ p("div", {
+							className: "flex items-center gap-3 mb-2",
+							children: [/* @__PURE__ */ f("div", {
+								className: "p-2 bg-warning/10 rounded-md",
+								children: /* @__PURE__ */ f(c, {
+									className: "text-warning",
+									size: 20
+								})
+							}), /* @__PURE__ */ f("span", {
+								className: "text-sm text-muted-foreground",
+								children: _("analyticsDashboard.skipRate", "Skip Rate")
+							})]
+						}), /* @__PURE__ */ f("div", {
+							className: "text-2xl font-bold",
+							children: a(E())
+						})]
+					}),
+					/* @__PURE__ */ p("div", {
+						className: "border border-border rounded-md p-4 bg-card",
+						children: [/* @__PURE__ */ p("div", {
+							className: "flex items-center gap-3 mb-2",
+							children: [/* @__PURE__ */ f("div", {
+								className: "p-2 bg-info/10 rounded-md",
+								children: /* @__PURE__ */ f(l, {
+									className: "text-info",
+									size: 20
+								})
+							}), /* @__PURE__ */ f("span", {
+								className: "text-sm text-muted-foreground",
+								children: _("analyticsDashboard.avgDuration", "Avg Duration")
+							})]
+						}), /* @__PURE__ */ f("div", {
+							className: "text-2xl font-bold",
+							children: r(S.averageDuration)
+						})]
+					})
+				]
+			}),
+			/* @__PURE__ */ p("div", {
+				className: "border border-border rounded-md p-6 bg-card",
+				children: [/* @__PURE__ */ f("h2", {
+					className: "text-lg font-semibold mb-4",
+					children: _("analyticsDashboard.deviceBreakdown", "Device Breakdown")
+				}), /* @__PURE__ */ f("div", {
+					className: "space-y-3",
+					children: S.byDeviceType.map((e) => /* @__PURE__ */ p("div", { children: [/* @__PURE__ */ p("div", {
+						className: "flex items-center justify-between mb-2",
+						children: [/* @__PURE__ */ f("span", {
+							className: "text-sm capitalize",
+							children: e.deviceType
+						}), /* @__PURE__ */ p("span", {
+							className: "text-sm text-muted-foreground",
+							children: [
+								i(e.count),
+								" views (",
+								a(e.completionRate),
+								")"
+							]
+						})]
+					}), /* @__PURE__ */ f("div", {
+						className: "w-full bg-muted rounded-full h-2",
+						children: /* @__PURE__ */ f("div", {
+							className: "bg-primary h-2 rounded-full",
+							style: { width: `${e.completionRate}%` }
+						})
+					})] }, e.deviceType))
+				})]
+			}),
+			S.stepAnalytics && S.stepAnalytics.length > 0 && /* @__PURE__ */ p("div", {
+				className: "border border-border rounded-md p-6 bg-card",
+				children: [/* @__PURE__ */ f("h2", {
+					className: "text-lg font-semibold mb-4",
+					children: _("analyticsDashboard.stepPerformance", "Step Performance")
+				}), /* @__PURE__ */ f("div", {
+					className: "overflow-x-auto",
+					children: /* @__PURE__ */ p("table", {
+						className: "w-full",
+						children: [/* @__PURE__ */ f("thead", { children: /* @__PURE__ */ p("tr", {
+							className: "border-b border-border",
+							children: [
+								/* @__PURE__ */ f("th", {
+									className: "text-left py-2 px-4 text-sm font-medium",
+									children: _("analyticsDashboard.tableStep", "Step")
+								}),
+								/* @__PURE__ */ f("th", {
+									className: "text-right py-2 px-4 text-sm font-medium",
+									children: _("analyticsDashboard.tableViews", "Views")
+								}),
+								/* @__PURE__ */ f("th", {
+									className: "text-right py-2 px-4 text-sm font-medium",
+									children: _("analyticsDashboard.tableCompletions", "Completions")
+								}),
+								/* @__PURE__ */ f("th", {
+									className: "text-right py-2 px-4 text-sm font-medium",
+									children: _("analyticsDashboard.tableDropOffRate", "Drop-off Rate")
+								})
+							]
+						}) }), /* @__PURE__ */ f("tbody", { children: S.stepAnalytics.map((e) => /* @__PURE__ */ p("tr", {
+							className: "border-b border-border",
+							children: [
+								/* @__PURE__ */ p("td", {
+									className: "py-2 px-4 text-sm",
+									children: [
+										_("analyticsDashboard.stepLabel", "Step"),
+										" ",
+										e.stepOrder
+									]
+								}),
+								/* @__PURE__ */ f("td", {
+									className: "text-right py-2 px-4 text-sm",
+									children: i(e.views)
+								}),
+								/* @__PURE__ */ f("td", {
+									className: "text-right py-2 px-4 text-sm",
+									children: i(e.completions)
+								}),
+								/* @__PURE__ */ f("td", {
+									className: "text-right py-2 px-4 text-sm",
+									children: a(e.dropOffRate)
+								})
+							]
+						}, e.stepId)) })]
+					})
+				})]
+			})
+		]
+	}) : /* @__PURE__ */ f("div", {
+		className: "flex items-center justify-center h-full",
+		children: /* @__PURE__ */ f("p", {
+			className: "text-muted-foreground",
+			children: _("analyticsDashboard.noData", "No analytics data available")
+		})
+	});
+}
+//#endregion
+export { g as AnalyticsDashboardPage };
+
+//# sourceMappingURL=AnalyticsDashboardPage.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"AnalyticsDashboardPage.js","names":[],"sources":["../../../src/tours/pages/AnalyticsDashboardPage.tsx"],"sourcesContent":["import { useCallback, useEffect } from 'react';\nimport { useParams } from 'react-router-dom';\nimport { BarChart3, TrendingUp, Users, Timer } from 'lucide-react';\nimport { useI18n } from '@burdenoff/fe-libs/shared/providers/shell/I18nProvider';\nimport { useTourAnalytics } from '../hooks/useTourAnalytics';\nimport { useToursPermissionAccess } from '../hooks/useToursPermissionAccess';\nimport { TOUR_PERMISSIONS } from '../../constants/permissions';\nimport { formatNumber, formatPercentage, formatDuration } from '../utils';\n\n/**\n * Analytics dashboard page\n * Display tour performance metrics and charts\n */\nexport function AnalyticsDashboardPage() {\n  const { t } = useI18n();\n  const tr = useCallback(\n    (key: string, fallback: string): string => {\n      const value = t(key);\n      return value === key ? fallback : value;\n    },\n    [t]\n  );\n\n  const { tourId } = useParams();\n  const { hasPermission, isLoading: permissionsLoading } = useToursPermissionAccess();\n  const canViewAnalytics = hasPermission(TOUR_PERMISSIONS.TOUR_ANALYTICS_READ);\n\n  const { analytics, loading, fetchAnalytics, getCompletionRate, getSkipRate } =\n    useTourAnalytics(tourId);\n\n  useEffect(() => {\n    if (permissionsLoading || !canViewAnalytics) return;\n    fetchAnalytics();\n  }, [fetchAnalytics, permissionsLoading, canViewAnalytics]);\n\n  if (!permissionsLoading && !canViewAnalytics) {\n    return (\n      <div className=\"flex items-center justify-center h-full p-6\">\n        <div className=\"text-center\">\n          <h2 className=\"text-lg font-semibold text-foreground mb-2\">\n            {tr('analyticsDashboard.accessDenied', 'Access Denied')}\n          </h2>\n          <p className=\"text-sm text-muted-foreground\">\n            {tr(\n              'analyticsDashboard.noPermission',\n              'You do not have permission to view tour analytics.'\n            )}\n          </p>\n        </div>\n      </div>\n    );\n  }\n\n  if (loading) {\n    return (\n      <div className=\"flex items-center justify-center h-full\">\n        <p className=\"text-muted-foreground\">\n          {tr('analyticsDashboard.loading', 'Loading analytics...')}\n        </p>\n      </div>\n    );\n  }\n\n  if (!analytics) {\n    return (\n      <div className=\"flex items-center justify-center h-full\">\n        <p className=\"text-muted-foreground\">\n          {tr('analyticsDashboard.noData', 'No analytics data available')}\n        </p>\n      </div>\n    );\n  }\n\n  return (\n    <div className=\"space-y-6 p-6\">\n      {/* Header */}\n      <div>\n        <h1 className=\"text-2xl font-bold\">{tr('analyticsDashboard.title', 'Tour Analytics')}</h1>\n        <p className=\"text-sm text-muted-foreground\">\n          {tr('analyticsDashboard.subtitle', 'Performance metrics and insights')}\n        </p>\n      </div>\n\n      {/* Summary Cards */}\n      <div className=\"grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4\">\n        <div className=\"border border-border rounded-md p-4 bg-card\">\n          <div className=\"flex items-center gap-3 mb-2\">\n            <div className=\"p-2 bg-primary/10 rounded-md\">\n              <Users className=\"text-primary\" size={20} />\n            </div>\n            <span className=\"text-sm text-muted-foreground\">\n              {tr('analyticsDashboard.totalViews', 'Total Views')}\n            </span>\n          </div>\n          <div className=\"text-2xl font-bold\">{formatNumber(analytics.totalViews)}</div>\n        </div>\n\n        <div className=\"border border-border rounded-md p-4 bg-card\">\n          <div className=\"flex items-center gap-3 mb-2\">\n            <div className=\"p-2 bg-success/10 rounded-md\">\n              <TrendingUp className=\"text-success\" size={20} />\n            </div>\n            <span className=\"text-sm text-muted-foreground\">\n              {tr('analyticsDashboard.completionRate', 'Completion Rate')}\n            </span>\n          </div>\n          <div className=\"text-2xl font-bold\">{formatPercentage(getCompletionRate())}</div>\n        </div>\n\n        <div className=\"border border-border rounded-md p-4 bg-card\">\n          <div className=\"flex items-center gap-3 mb-2\">\n            <div className=\"p-2 bg-warning/10 rounded-md\">\n              <BarChart3 className=\"text-warning\" size={20} />\n            </div>\n            <span className=\"text-sm text-muted-foreground\">\n              {tr('analyticsDashboard.skipRate', 'Skip Rate')}\n            </span>\n          </div>\n          <div className=\"text-2xl font-bold\">{formatPercentage(getSkipRate())}</div>\n        </div>\n\n        <div className=\"border border-border rounded-md p-4 bg-card\">\n          <div className=\"flex items-center gap-3 mb-2\">\n            <div className=\"p-2 bg-info/10 rounded-md\">\n              <Timer className=\"text-info\" size={20} />\n            </div>\n            <span className=\"text-sm text-muted-foreground\">\n              {tr('analyticsDashboard.avgDuration', 'Avg Duration')}\n            </span>\n          </div>\n          <div className=\"text-2xl font-bold\">{formatDuration(analytics.averageDuration)}</div>\n        </div>\n      </div>\n\n      {/* Device Breakdown */}\n      <div className=\"border border-border rounded-md p-6 bg-card\">\n        <h2 className=\"text-lg font-semibold mb-4\">\n          {tr('analyticsDashboard.deviceBreakdown', 'Device Breakdown')}\n        </h2>\n        <div className=\"space-y-3\">\n          {analytics.byDeviceType.map((device) => (\n            <div key={device.deviceType}>\n              <div className=\"flex items-center justify-between mb-2\">\n                <span className=\"text-sm capitalize\">{device.deviceType}</span>\n                <span className=\"text-sm text-muted-foreground\">\n                  {formatNumber(device.count)} views ({formatPercentage(device.completionRate)})\n                </span>\n              </div>\n              <div className=\"w-full bg-muted rounded-full h-2\">\n                <div\n                  className=\"bg-primary h-2 rounded-full\"\n                  style={{ width: `${device.completionRate}%` }}\n                />\n              </div>\n            </div>\n          ))}\n        </div>\n      </div>\n\n      {/* Step Analytics */}\n      {analytics.stepAnalytics && analytics.stepAnalytics.length > 0 && (\n        <div className=\"border border-border rounded-md p-6 bg-card\">\n          <h2 className=\"text-lg font-semibold mb-4\">\n            {tr('analyticsDashboard.stepPerformance', 'Step Performance')}\n          </h2>\n          <div className=\"overflow-x-auto\">\n            <table className=\"w-full\">\n              <thead>\n                <tr className=\"border-b border-border\">\n                  <th className=\"text-left py-2 px-4 text-sm font-medium\">\n                    {tr('analyticsDashboard.tableStep', 'Step')}\n                  </th>\n                  <th className=\"text-right py-2 px-4 text-sm font-medium\">\n                    {tr('analyticsDashboard.tableViews', 'Views')}\n                  </th>\n                  <th className=\"text-right py-2 px-4 text-sm font-medium\">\n                    {tr('analyticsDashboard.tableCompletions', 'Completions')}\n                  </th>\n                  <th className=\"text-right py-2 px-4 text-sm font-medium\">\n                    {tr('analyticsDashboard.tableDropOffRate', 'Drop-off Rate')}\n                  </th>\n                </tr>\n              </thead>\n              <tbody>\n                {analytics.stepAnalytics.map((step) => (\n                  <tr key={step.stepId} className=\"border-b border-border\">\n                    <td className=\"py-2 px-4 text-sm\">\n                      {tr('analyticsDashboard.stepLabel', 'Step')} {step.stepOrder}\n                    </td>\n                    <td className=\"text-right py-2 px-4 text-sm\">{formatNumber(step.views)}</td>\n                    <td className=\"text-right py-2 px-4 text-sm\">\n                      {formatNumber(step.completions)}\n                    </td>\n                    <td className=\"text-right py-2 px-4 text-sm\">\n                      {formatPercentage(step.dropOffRate)}\n                    </td>\n                  </tr>\n                ))}\n              </tbody>\n            </table>\n          </div>\n        </div>\n      )}\n    </div>\n  );\n}\n"],"mappings":"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"}

package/dist/tours/pages/MediaLibraryPage.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Media library page
+ * Browse, upload, and manage tour media
+ */
+export declare function MediaLibraryPage(): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=MediaLibraryPage.d.ts.map

package/dist/tours/pages/MediaLibraryPage.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MediaLibraryPage.d.ts","sourceRoot":"","sources":["../../../src/tours/pages/MediaLibraryPage.tsx"],"names":[],"mappings":"AAUA;;;GAGG;AACH,wBAAgB,gBAAgB,4CAyL/B"}

package/dist/tours/pages/MediaLibraryPage.js

@@ -0,0 +1,195 @@
+import { useToursPermissionAccess as e } from "../hooks/useToursPermissionAccess.js";
+import { TOUR_PERMISSIONS as t } from "../../constants/permissions.js";
+import { formatFileSize as n } from "../utils/index.js";
+import { useMediaLibrary as r } from "../hooks/useMediaLibrary.js";
+import { useCallback as i, useEffect as a, useState as o } from "react";
+import { PermissionGate as s } from "@burdenoff/fe-libs/shared/components";
+import { FileText as c, Image as l, Music as u, Search as d, Trash2 as f, Upload as p, Video as m } from "lucide-react";
+import { jsx as h, jsxs as g } from "react/jsx-runtime";
+import { useI18n as _ } from "@burdenoff/fe-libs/shared/providers/shell/I18nProvider";
+//#region src/tours/pages/MediaLibraryPage.tsx
+function v() {
+	let { t: v } = _(), y = i((e, t) => {
+		let n = v(e);
+		return n === e ? t : n;
+	}, [v]), { hasPermission: b, isLoading: x } = e(), S = b(t.TOUR_MEDIA_LIST);
+	b(t.TOUR_MEDIA_CREATE);
+	let C = b(t.TOUR_MEDIA_DELETE), { media: w, fetchMedia: T, uploadMedia: E, deleteMedia: D, uploadProgress: O } = r(), [k, A] = o(""), [j, M] = o("all");
+	a(() => {
+		x || !S || T(j === "all" ? void 0 : j, k);
+	}, [
+		T,
+		j,
+		k,
+		x,
+		S
+	]);
+	let N = async (e) => {
+		if (e) {
+			for (let t = 0; t < e.length; t++) try {
+				await E(e[t]);
+			} catch (e) {
+				console.error("Failed to upload file:", e);
+			}
+			T(j === "all" ? void 0 : j, k);
+		}
+	}, P = (e) => {
+		switch (e) {
+			case "IMAGE": return /* @__PURE__ */ h(l, { size: 20 });
+			case "VIDEO": return /* @__PURE__ */ h(m, { size: 20 });
+			case "AUDIO": return /* @__PURE__ */ h(u, { size: 20 });
+			case "DOCUMENT": return /* @__PURE__ */ h(c, { size: 20 });
+		}
+	};
+	return /* @__PURE__ */ g("div", {
+		className: "space-y-4 sm:space-y-6 p-3 sm:p-6",
+		children: [
+			/* @__PURE__ */ g("div", {
+				className: "flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3",
+				children: [/* @__PURE__ */ g("div", { children: [/* @__PURE__ */ h("h1", {
+					className: "text-xl sm:text-2xl font-bold",
+					children: y("mediaLibrary.title", "Media Library")
+				}), /* @__PURE__ */ h("p", {
+					className: "text-sm text-muted-foreground",
+					children: y("mediaLibrary.subtitle", "Upload and manage media for tour steps")
+				})] }), /* @__PURE__ */ h(s, {
+					permission: t.TOUR_MEDIA_CREATE,
+					children: /* @__PURE__ */ g("label", {
+						className: "w-full sm:w-auto px-4 py-2 bg-primary text-primary-foreground rounded-md hover:bg-primary/90 cursor-pointer flex items-center justify-center gap-2",
+						children: [
+							/* @__PURE__ */ h(p, { size: 20 }),
+							y("mediaLibrary.uploadMedia", "Upload Media"),
+							/* @__PURE__ */ h("input", {
+								type: "file",
+								multiple: !0,
+								accept: "image/*,video/*,audio/*,.pdf,.doc,.docx",
+								onChange: (e) => N(e.target.files),
+								className: "hidden"
+							})
+						]
+					})
+				})]
+			}),
+			/* @__PURE__ */ g("div", {
+				className: "flex flex-col sm:flex-row gap-3",
+				children: [/* @__PURE__ */ g("div", {
+					className: "flex-1 relative",
+					children: [/* @__PURE__ */ h(d, {
+						className: "absolute left-3 top-1/2 -translate-y-1/2 text-muted-foreground",
+						size: 20
+					}), /* @__PURE__ */ h("input", {
+						type: "text",
+						placeholder: y("mediaLibrary.searchPlaceholder", "Search media..."),
+						value: k,
+						onChange: (e) => A(e.target.value),
+						className: "w-full pl-[3.25rem] pr-4 py-2 border border-border rounded-md bg-background"
+					})]
+				}), /* @__PURE__ */ g("select", {
+					value: j,
+					onChange: (e) => M(e.target.value),
+					className: "px-4 py-2 border border-border rounded-md bg-background",
+					children: [
+						/* @__PURE__ */ h("option", {
+							value: "all",
+							children: y("mediaLibrary.allTypes", "All Types")
+						}),
+						/* @__PURE__ */ h("option", {
+							value: "IMAGE",
+							children: y("mediaLibrary.typeImages", "Images")
+						}),
+						/* @__PURE__ */ h("option", {
+							value: "VIDEO",
+							children: y("mediaLibrary.typeVideos", "Videos")
+						}),
+						/* @__PURE__ */ h("option", {
+							value: "AUDIO",
+							children: y("mediaLibrary.typeAudio", "Audio")
+						}),
+						/* @__PURE__ */ h("option", {
+							value: "DOCUMENT",
+							children: y("mediaLibrary.typeDocuments", "Documents")
+						})
+					]
+				})]
+			}),
+			Object.keys(O).length > 0 && /* @__PURE__ */ h("div", {
+				className: "space-y-2",
+				children: Object.entries(O).map(([e, t]) => /* @__PURE__ */ g("div", {
+					className: "border border-border rounded-md p-3",
+					children: [/* @__PURE__ */ g("div", {
+						className: "flex items-center justify-between mb-2",
+						children: [/* @__PURE__ */ h("span", {
+							className: "text-sm",
+							children: y("mediaLibrary.uploading", "Uploading...")
+						}), /* @__PURE__ */ g("span", {
+							className: "text-sm text-muted-foreground",
+							children: [t, "%"]
+						})]
+					}), /* @__PURE__ */ h("div", {
+						className: "w-full bg-muted rounded-full h-2",
+						children: /* @__PURE__ */ h("div", {
+							className: "bg-primary h-2 rounded-full transition-all",
+							style: { width: `${t}%` }
+						})
+					})]
+				}, e))
+			}),
+			w.length > 0 ? /* @__PURE__ */ h("div", {
+				className: "grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4",
+				children: w.map((e) => /* @__PURE__ */ g("div", {
+					className: "border border-border rounded-md overflow-hidden hover:shadow-md transition-shadow",
+					children: [/* @__PURE__ */ h("div", {
+						className: "aspect-video bg-muted flex items-center justify-center",
+						children: e.type === "IMAGE" ? /* @__PURE__ */ h("img", {
+							src: e.cdnUrl,
+							alt: e.altText || e.name,
+							className: "w-full h-full object-cover"
+						}) : /* @__PURE__ */ h("div", {
+							className: "text-muted-foreground",
+							children: P(e.type)
+						})
+					}), /* @__PURE__ */ g("div", {
+						className: "p-3",
+						children: [
+							/* @__PURE__ */ h("h3", {
+								className: "font-medium text-sm truncate",
+								children: e.name
+							}),
+							/* @__PURE__ */ g("div", {
+								className: "flex items-center justify-between mt-2 text-xs text-muted-foreground",
+								children: [/* @__PURE__ */ h("span", { children: e.type }), /* @__PURE__ */ h("span", { children: n(e.size) })]
+							}),
+							C && /* @__PURE__ */ g("button", {
+								onClick: () => {
+									window.confirm(y("mediaLibrary.deleteConfirm", "Delete this media?")) && D(e.id);
+								},
+								className: "mt-2 w-full px-2 py-1 text-xs text-destructive border border-destructive/30 rounded hover:bg-destructive/10 flex items-center justify-center gap-1",
+								children: [/* @__PURE__ */ h(f, { size: 12 }), y("mediaLibrary.delete", "Delete")]
+							})
+						]
+					})]
+				}, e.id))
+			}) : /* @__PURE__ */ g("div", {
+				className: "text-center py-12 border border-dashed border-border rounded-md",
+				children: [
+					/* @__PURE__ */ h(p, {
+						className: "mx-auto mb-4 text-muted-foreground",
+						size: 48
+					}),
+					/* @__PURE__ */ h("p", {
+						className: "text-muted-foreground mb-2",
+						children: y("mediaLibrary.noMedia", "No media files")
+					}),
+					/* @__PURE__ */ h("p", {
+						className: "text-sm text-muted-foreground",
+						children: y("mediaLibrary.uploadFirstMedia", "Upload your first media file to get started")
+					})
+				]
+			})
+		]
+	});
+}
+//#endregion
+export { v as MediaLibraryPage };
+
+//# sourceMappingURL=MediaLibraryPage.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"MediaLibraryPage.js","names":[],"sources":["../../../src/tours/pages/MediaLibraryPage.tsx"],"sourcesContent":["import { useCallback, useEffect, useState } from 'react';\nimport { Upload, Search, Image as ImageIcon, Video, Music, FileText, Trash2 } from 'lucide-react';\nimport { PermissionGate } from '@burdenoff/fe-libs/shared/components';\nimport { useI18n } from '@burdenoff/fe-libs/shared/providers/shell/I18nProvider';\nimport { useMediaLibrary } from '../hooks/useMediaLibrary';\nimport { useToursPermissionAccess } from '../hooks/useToursPermissionAccess';\nimport { TOUR_PERMISSIONS } from '../../constants/permissions';\nimport { formatFileSize } from '../utils';\nimport type { TourMediaType } from '../types';\n\n/**\n * Media library page\n * Browse, upload, and manage tour media\n */\nexport function MediaLibraryPage() {\n  const { t } = useI18n();\n  const tr = useCallback(\n    (key: string, fallback: string): string => {\n      const value = t(key);\n      return value === key ? fallback : value;\n    },\n    [t]\n  );\n\n  const { hasPermission, isLoading: permissionsLoading } = useToursPermissionAccess();\n  const canListMedia = hasPermission(TOUR_PERMISSIONS.TOUR_MEDIA_LIST);\n  const canUploadMedia = hasPermission(TOUR_PERMISSIONS.TOUR_MEDIA_CREATE);\n  const canDeleteMedia = hasPermission(TOUR_PERMISSIONS.TOUR_MEDIA_DELETE);\n\n  const { media, fetchMedia, uploadMedia, deleteMedia, uploadProgress } = useMediaLibrary();\n\n  const [searchQuery, setSearchQuery] = useState('');\n  const [typeFilter, setTypeFilter] = useState<TourMediaType | 'all'>('all');\n\n  useEffect(() => {\n    if (permissionsLoading || !canListMedia) return;\n    fetchMedia(typeFilter === 'all' ? undefined : typeFilter, searchQuery);\n  }, [fetchMedia, typeFilter, searchQuery, permissionsLoading, canListMedia]);\n\n  const handleFileUpload = async (files: FileList | null) => {\n    if (!files) return;\n\n    for (let i = 0; i < files.length; i++) {\n      try {\n        await uploadMedia(files[i]);\n      } catch (error) {\n        console.error('Failed to upload file:', error);\n      }\n    }\n\n    // Refresh media list\n    fetchMedia(typeFilter === 'all' ? undefined : typeFilter, searchQuery);\n  };\n\n  const getMediaIcon = (type: TourMediaType) => {\n    switch (type) {\n      case 'IMAGE':\n        return <ImageIcon size={20} />;\n      case 'VIDEO':\n        return <Video size={20} />;\n      case 'AUDIO':\n        return <Music size={20} />;\n      case 'DOCUMENT':\n        return <FileText size={20} />;\n    }\n  };\n\n  return (\n    <div className=\"space-y-4 sm:space-y-6 p-3 sm:p-6\">\n      {/* Header */}\n      <div className=\"flex flex-col sm:flex-row sm:items-center sm:justify-between gap-3\">\n        <div>\n          <h1 className=\"text-xl sm:text-2xl font-bold\">\n            {tr('mediaLibrary.title', 'Media Library')}\n          </h1>\n          <p className=\"text-sm text-muted-foreground\">\n            {tr('mediaLibrary.subtitle', 'Upload and manage media for tour steps')}\n          </p>\n        </div>\n        <PermissionGate permission={TOUR_PERMISSIONS.TOUR_MEDIA_CREATE}>\n          <label className=\"w-full sm:w-auto px-4 py-2 bg-primary text-primary-foreground rounded-md hover:bg-primary/90 cursor-pointer flex items-center justify-center gap-2\">\n            <Upload size={20} />\n            {tr('mediaLibrary.uploadMedia', 'Upload Media')}\n            <input\n              type=\"file\"\n              multiple\n              accept=\"image/*,video/*,audio/*,.pdf,.doc,.docx\"\n              onChange={(e) => handleFileUpload(e.target.files)}\n              className=\"hidden\"\n            />\n          </label>\n        </PermissionGate>\n      </div>\n\n      {/* Filters */}\n      <div className=\"flex flex-col sm:flex-row gap-3\">\n        <div className=\"flex-1 relative\">\n          <Search\n            className=\"absolute left-3 top-1/2 -translate-y-1/2 text-muted-foreground\"\n            size={20}\n          />\n          <input\n            type=\"text\"\n            placeholder={tr('mediaLibrary.searchPlaceholder', 'Search media...')}\n            value={searchQuery}\n            onChange={(e) => setSearchQuery(e.target.value)}\n            className=\"w-full pl-[3.25rem] pr-4 py-2 border border-border rounded-md bg-background\"\n          />\n        </div>\n        <select\n          value={typeFilter}\n          onChange={(e) => setTypeFilter(e.target.value as TourMediaType | 'all')}\n          className=\"px-4 py-2 border border-border rounded-md bg-background\"\n        >\n          <option value=\"all\">{tr('mediaLibrary.allTypes', 'All Types')}</option>\n          <option value=\"IMAGE\">{tr('mediaLibrary.typeImages', 'Images')}</option>\n          <option value=\"VIDEO\">{tr('mediaLibrary.typeVideos', 'Videos')}</option>\n          <option value=\"AUDIO\">{tr('mediaLibrary.typeAudio', 'Audio')}</option>\n          <option value=\"DOCUMENT\">{tr('mediaLibrary.typeDocuments', 'Documents')}</option>\n        </select>\n      </div>\n\n      {/* Upload Progress */}\n      {Object.keys(uploadProgress).length > 0 && (\n        <div className=\"space-y-2\">\n          {Object.entries(uploadProgress).map(([fileId, progress]) => (\n            <div key={fileId} className=\"border border-border rounded-md p-3\">\n              <div className=\"flex items-center justify-between mb-2\">\n                <span className=\"text-sm\">{tr('mediaLibrary.uploading', 'Uploading...')}</span>\n                <span className=\"text-sm text-muted-foreground\">{progress}%</span>\n              </div>\n              <div className=\"w-full bg-muted rounded-full h-2\">\n                <div\n                  className=\"bg-primary h-2 rounded-full transition-all\"\n                  style={{ width: `${progress}%` }}\n                />\n              </div>\n            </div>\n          ))}\n        </div>\n      )}\n\n      {/* Media Grid */}\n      {media.length > 0 ? (\n        <div className=\"grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4\">\n          {media.map((item) => (\n            <div\n              key={item.id}\n              className=\"border border-border rounded-md overflow-hidden hover:shadow-md transition-shadow\"\n            >\n              {/* Thumbnail */}\n              <div className=\"aspect-video bg-muted flex items-center justify-center\">\n                {item.type === 'IMAGE' ? (\n                  <img\n                    src={item.cdnUrl}\n                    alt={item.altText || item.name}\n                    className=\"w-full h-full object-cover\"\n                  />\n                ) : (\n                  <div className=\"text-muted-foreground\">{getMediaIcon(item.type)}</div>\n                )}\n              </div>\n\n              {/* Info */}\n              <div className=\"p-3\">\n                <h3 className=\"font-medium text-sm truncate\">{item.name}</h3>\n                <div className=\"flex items-center justify-between mt-2 text-xs text-muted-foreground\">\n                  <span>{item.type}</span>\n                  <span>{formatFileSize(item.size)}</span>\n                </div>\n                {canDeleteMedia && (\n                  <button\n                    onClick={() => {\n                      if (window.confirm(tr('mediaLibrary.deleteConfirm', 'Delete this media?')))\n                        deleteMedia(item.id);\n                    }}\n                    className=\"mt-2 w-full px-2 py-1 text-xs text-destructive border border-destructive/30 rounded hover:bg-destructive/10 flex items-center justify-center gap-1\"\n                  >\n                    <Trash2 size={12} />\n                    {tr('mediaLibrary.delete', 'Delete')}\n                  </button>\n                )}\n              </div>\n            </div>\n          ))}\n        </div>\n      ) : (\n        <div className=\"text-center py-12 border border-dashed border-border rounded-md\">\n          <Upload className=\"mx-auto mb-4 text-muted-foreground\" size={48} />\n          <p className=\"text-muted-foreground mb-2\">\n            {tr('mediaLibrary.noMedia', 'No media files')}\n          </p>\n          <p className=\"text-sm text-muted-foreground\">\n            {tr('mediaLibrary.uploadFirstMedia', 'Upload your first media file to get started')}\n          </p>\n        </div>\n      )}\n    </div>\n  );\n}\n"],"mappings":"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"}

package/dist/tours/pages/MyToursPage.d.ts

@@ -0,0 +1,11 @@
+/**
+ * MyToursPage — user-facing browse for available tours.
+ *
+ * Lists tours returned by `toursForContext` (filtered to the current
+ * product/module/page surface) and decorates each with the requesting
+ * user's `TourUserProgress` status (Completed / In progress / Skipped /
+ * Not started). Read-only — tours are actually played via the SDK overlay,
+ * not via mutations on this page.
+ */
+export declare function MyToursPage(): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=MyToursPage.d.ts.map

package/dist/tours/pages/MyToursPage.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MyToursPage.d.ts","sourceRoot":"","sources":["../../../src/tours/pages/MyToursPage.tsx"],"names":[],"mappings":"AAoCA;;;;;;;;GAQG;AACH,wBAAgB,WAAW,4CAkF1B"}

package/dist/tours/pages/MyToursPage.js

@@ -0,0 +1,103 @@
+import { useToursContext as e } from "../providers/ToursProvider.js";
+import { useGetToursForContextQuery as t } from "../../generated/global-operations.js";
+import { useToursI18n as n } from "../i18n.js";
+import { useEffect as r } from "react";
+import { CheckCircle2 as i, Circle as a, MinusCircle as o, Play as s } from "lucide-react";
+import { jsx as c, jsxs as l } from "react/jsx-runtime";
+import { useSearchParams as u } from "react-router-dom";
+import { useEventBus as d } from "@burdenoff/fe-libs/shared/events";
+//#region src/tours/pages/MyToursPage.tsx
+var f = /^[a-zA-Z0-9_-]+$/, p = /^[a-zA-Z0-9_\-/]+$/;
+function m(e, t) {
+	return e && f.test(e) ? e : t;
+}
+function h(e, t) {
+	return e && p.test(e) ? e : t;
+}
+function g() {
+	let { tr: i } = n(), { productId: a, moduleId: o, pageId: s, workspaceId: f } = e(), [p] = u(), g = d();
+	r(() => {
+		g.emit("tours.page.viewed", {
+			page: "/tours",
+			productId: a,
+			moduleId: o,
+			pageId: s,
+			workspaceId: f
+		});
+	}, []);
+	let v = m(a, void 0) ?? m(p.get("productId"), void 0), y = m(o, void 0) ?? m(p.get("moduleId"), void 0), b = h(s, void 0) ?? h(p.get("pageId"), void 0), { data: x, loading: S } = t({
+		variables: v ? { context: {
+			productId: v,
+			moduleId: y,
+			pageId: b
+		} } : void 0,
+		skip: !v,
+		fetchPolicy: "cache-and-network"
+	}), C = x?.toursForContext ?? [], w = S;
+	return /* @__PURE__ */ l("div", {
+		className: "space-y-4 sm:space-y-6 p-3 sm:p-6",
+		children: [/* @__PURE__ */ l("div", { children: [/* @__PURE__ */ c("h1", {
+			className: "text-xl sm:text-2xl font-bold text-foreground",
+			children: i("myTours.title")
+		}), /* @__PURE__ */ c("p", {
+			className: "text-sm sm:text-base text-muted-foreground",
+			children: i("myTours.subtitle")
+		})] }), w && C.length === 0 ? /* @__PURE__ */ c("div", {
+			className: "text-sm text-muted-foreground",
+			role: "status",
+			"aria-live": "polite",
+			children: i("myTours.loading")
+		}) : C.length === 0 ? /* @__PURE__ */ c("div", {
+			className: "rounded-lg border border-dashed border-border p-8 text-center",
+			children: /* @__PURE__ */ c("p", {
+				className: "text-sm text-muted-foreground",
+				role: "status",
+				"aria-live": "polite",
+				children: i("myTours.empty")
+			})
+		}) : /* @__PURE__ */ c("ul", {
+			className: "grid gap-3 grid-cols-1 sm:grid-cols-2 lg:grid-cols-3",
+			children: C.map((e) => /* @__PURE__ */ l("li", {
+				className: "rounded-lg border border-border bg-card p-4 flex flex-col gap-2",
+				children: [/* @__PURE__ */ l("div", {
+					className: "flex items-start justify-between gap-2",
+					children: [/* @__PURE__ */ c("h2", {
+						className: "font-semibold text-foreground line-clamp-2",
+						children: e.name
+					}), /* @__PURE__ */ c(_, {
+						status: e.myProgress?.status,
+						tr: i
+					})]
+				}), e.description ? /* @__PURE__ */ c("p", {
+					className: "text-sm text-muted-foreground line-clamp-3",
+					children: e.description
+				}) : null]
+			}, e.id))
+		})]
+	});
+}
+function _({ status: e, tr: t }) {
+	switch (e) {
+		case "COMPLETED": return /* @__PURE__ */ l("span", {
+			className: "inline-flex items-center gap-1 text-xs text-success",
+			children: [/* @__PURE__ */ c(i, { size: 14 }), t("myTours.status.completed")]
+		});
+		case "IN_PROGRESS": return /* @__PURE__ */ l("span", {
+			className: "inline-flex items-center gap-1 text-xs text-warning",
+			children: [/* @__PURE__ */ c(s, { size: 14 }), t("myTours.status.inProgress")]
+		});
+		case "SKIPPED":
+		case "DISMISSED": return /* @__PURE__ */ l("span", {
+			className: "inline-flex items-center gap-1 text-xs text-muted-foreground",
+			children: [/* @__PURE__ */ c(o, { size: 14 }), t("myTours.status.skipped")]
+		});
+		default: return /* @__PURE__ */ l("span", {
+			className: "inline-flex items-center gap-1 text-xs text-muted-foreground",
+			children: [/* @__PURE__ */ c(a, { size: 14 }), t("myTours.status.notStarted")]
+		});
+	}
+}
+//#endregion
+export { g as MyToursPage };
+
+//# sourceMappingURL=MyToursPage.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"MyToursPage.js","names":[],"sources":["../../../src/tours/pages/MyToursPage.tsx"],"sourcesContent":["import { useEffect } 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 on mount\n  useEffect(() => {\n    eventBus.emit('tours.page.viewed', {\n      page: '/tours',\n      productId: shellProductId,\n      moduleId: shellModuleId,\n      pageId: shellPageId,\n      workspaceId,\n    });\n  }, []); // eslint-disable-line react-hooks/exhaustive-deps\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-foreground\">{tr('myTours.title')}</h1>\n        <p className=\"text-sm sm:text-base text-muted-foreground\">{tr('myTours.subtitle')}</p>\n      </div>\n\n      {isLoading && tours.length === 0 ? (\n        <div className=\"text-sm text-muted-foreground\" role=\"status\" aria-live=\"polite\">\n          {tr('myTours.loading')}\n        </div>\n      ) : tours.length === 0 ? (\n        <div className=\"rounded-lg border border-dashed border-border p-8 text-center\">\n          <p className=\"text-sm text-muted-foreground\" role=\"status\" aria-live=\"polite\">\n            {tr('myTours.empty')}\n          </p>\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 bg-card p-4 flex flex-col gap-2\"\n            >\n              <div className=\"flex items-start justify-between gap-2\">\n                <h2 className=\"font-semibold text-foreground 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-muted-foreground 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-muted-foreground\">\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-muted-foreground\">\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.d.ts

@@ -0,0 +1,6 @@
+/**
+ * MyToursProgressPage — user-facing read-only view of the current user's
+ * tour interactions, grouped by status (In progress / Completed / Skipped).
+ */
+export declare function MyToursProgressPage(): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=MyToursProgressPage.d.ts.map

package/dist/tours/pages/MyToursProgressPage.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MyToursProgressPage.d.ts","sourceRoot":"","sources":["../../../src/tours/pages/MyToursProgressPage.tsx"],"names":[],"mappings":"AAgBA;;;GAGG;AACH,wBAAgB,mBAAmB,4CAyGlC"}