@burdenoff/microfe-tours 2026.608.1 → 2026.625.1

package/dist/tours/pages/TourBuilderPage.js

@@ -7,15 +7,16 @@ import { useToursI18n as ee } from "../i18n.js";
 import { emitToursApiFailed as a } from "../telemetry.js";
 import { useTourBuilder as te } from "../hooks/useTourBuilder.js";
 import { useEffect as o, useMemo as s, useRef as ne, useState as c } from "react";
-import { PermissionGate as l } from "@burdenoff/fe-libs/shared/components";
-import { ArrowLeft as re, BarChart3 as ie, Calendar as ae, Eye as oe, LayoutTemplate as se, ListOrdered as ce, Save as le, Sparkles as ue } from "lucide-react";
-import { Fragment as de, jsx as u, jsxs as d } from "react/jsx-runtime";
+import { PermissionGate as re } from "@burdenoff/fe-libs/shared/components";
+import { ArrowLeft as ie, BarChart3 as ae, Calendar as oe, Eye as se, LayoutTemplate as ce, ListOrdered as le, Save as ue, Sparkles as de } from "lucide-react";
+import { jsx as l, jsxs as u } from "react/jsx-runtime";
 import { useNavigate as fe, useParams as pe } from "react-router-dom";
-import { useGatewayClient as me } from "@burdenoff/fe-libs/shared/graphql";
-import { useEventBus as he } from "@burdenoff/fe-libs/shared/events";
+import { Button as me, CTAOverflowMenu as he, EmphasisPanel as ge, GlassCard as d } from "@burdenoff/fe-libs/ui";
+import { useGatewayClient as _e } from "@burdenoff/fe-libs/shared/graphql";
+import { useEventBus as ve } from "@burdenoff/fe-libs/shared/events";
 import { gql as f } from "@apollo/client/core";
 //#region src/tours/pages/TourBuilderPage.tsx
-var ge = 250, _e = f`
+var ye = 250, be = f`
   mutation SeedVibeControlsUserTours {
     seedVibeControlsUserTours {
       productId
@@ -33,7 +34,7 @@ var ge = 250, _e = f`
     }
   }
 `;
-function ve(e) {
+function xe(e) {
 	if (!e || typeof e != "object") return null;
 	let t = e, n = t.error;
 	if (n instanceof Error) return n.message;
@@ -422,7 +423,7 @@ function h(e) {
 	let t = m(e);
 	return t ? p.filter((e) => e.productId === t) : [];
 }
-function ye(e) {
+function Se(e) {
 	let t = /* @__PURE__ */ new Map();
 	for (let n of h(e)) (!t.get(n.moduleId) || n.isModuleHome) && t.set(n.moduleId, {
 		moduleId: n.moduleId,
@@ -431,7 +432,7 @@ function ye(e) {
 	});
 	return [...t.values()];
 }
-function be(e, t) {
+function Ce(e, t) {
 	let n = m(t);
 	return n ? h(e).flatMap((e) => e.moduleId === n ? [{
 		pageId: e.pageId,
@@ -440,9 +441,9 @@ function be(e, t) {
 	}] : []) : [];
 }
 function g() {
-	let { tr: f } = ee(), { tourId: p } = pe(), m = fe(), h = e(), { basePath: g = "/" } = h, _ = he(), xe = me("global"), { hasPermission: v, isLoading: y } = r(), b = !p || p === "new", x = v(i.TOUR_CREATE), S = v(i.TOUR_UPDATE), Se = v(i.TOUR_TEMPLATE_CREATE), C = b ? x : S, w = x && S, { tour: T, loadTour: E, createTour: Ce, updateTour: we, saving: D, validationErrors: O, error: k } = te(p), { saveAsTemplate: Te } = n(), { data: A, loading: j } = t({
+	let { tr: f } = ee(), { tourId: p } = pe(), m = fe(), h = e(), { basePath: g = "/" } = h, _ = ve(), we = _e("global"), { hasPermission: v, isLoading: y } = r(), b = !p || p === "new", x = v(i.TOUR_CREATE), S = v(i.TOUR_UPDATE), Te = v(i.TOUR_TEMPLATE_CREATE), C = b ? x : S, w = x && S, { tour: T, loadTour: E, createTour: Ee, updateTour: De, saving: D, validationErrors: O, error: k } = te(p), { saveAsTemplate: Oe } = n(), { data: A, loading: j } = t({
 		variables: {
-			limit: ge,
+			limit: ye,
 			offset: 0
 		},
 		fetchPolicy: "cache-and-network",
@@ -460,7 +461,7 @@ function g() {
 		displayOrder: 1,
 		startDate: "",
 		endDate: ""
-	}), [P, F] = c(!1), [I, L] = c(!1), [R, z] = c(!1), [B, V] = c(!1), [H, U] = c(null), [W, G] = c(null), K = ne(!1), q = s(() => [...A?.platformProducts.items ?? []].sort((e, t) => e.name.localeCompare(t.name)), [A]), J = s(() => new Set(q.map((e) => e.slug)), [q]), Y = s(() => ye(M.productId), [M.productId]), X = s(() => new Set(Y.map((e) => e.moduleId)), [Y]), Z = s(() => be(M.productId, M.moduleId), [M.moduleId, M.productId]), Q = s(() => new Set(Z.map((e) => e.pageId)), [Z]);
+	}), [P, F] = c(!1), [I, L] = c(!1), [R, z] = c(!1), [B, V] = c(!1), [H, U] = c(null), [W, G] = c(null), K = ne(!1), q = s(() => [...A?.platformProducts.items ?? []].sort((e, t) => e.name.localeCompare(t.name)), [A]), J = s(() => new Set(q.map((e) => e.slug)), [q]), Y = s(() => Se(M.productId), [M.productId]), X = s(() => new Set(Y.map((e) => e.moduleId)), [Y]), Z = s(() => Ce(M.productId, M.moduleId), [M.moduleId, M.productId]), Q = s(() => new Set(Z.map((e) => e.pageId)), [Z]);
 	o(() => {
 		K.current || !y && C && p && p !== "new" && E(p);
 	}, [
@@ -504,26 +505,26 @@ function g() {
 		Q,
 		Z.length
 	]);
-	let Ee = !!(M.productId && !P && !J.has(M.productId)), De = !!(M.moduleId && !I && !X.has(M.moduleId)), Oe = !!(M.pageId && !R && !Q.has(M.pageId)), ke = async (e) => {
+	let ke = !!(M.productId && !P && !J.has(M.productId)), Ae = !!(M.moduleId && !I && !X.has(M.moduleId)), je = !!(M.pageId && !R && !Q.has(M.pageId)), Me = async (e) => {
 		e.preventDefault();
 		try {
-			p && p !== "new" ? await we(p, M) : await Ce(M);
+			p && p !== "new" ? await De(p, M) : await Ee(M);
 		} catch {
 			a(_, "tour.save", h);
 		}
-	}, Ae = () => {
+	}, Ne = () => {
 		m(`${g}/list`);
-	}, $ = (e) => {
+	}, Pe = (e) => {
 		if (!e) return "";
 		let t = new Date(e);
 		return Number.isNaN(t.getTime()) ? "" : (/* @__PURE__ */ new Date(t.getTime() - t.getTimezoneOffset() * 6e4)).toISOString().slice(0, 16);
-	}, je = async () => {
+	}, Fe = async () => {
 		if (!p || p === "new") return;
 		let e = `${M.name || T?.name || "Tour"} Template`, t = window.prompt("Template name", e);
 		if (!t) return;
 		let n = window.prompt("Template category (ONBOARDING, FEATURE_ANNOUNCEMENT, HELP, CUSTOM)", "ONBOARDING") || "ONBOARDING";
 		try {
-			await Te(p, {
+			await Oe(p, {
 				name: t,
 				description: M.description,
 				category: n,
@@ -532,11 +533,11 @@ function g() {
 		} catch {
 			a(_, "template.save", h);
 		}
-	}, Me = async () => {
+	}, Ie = async () => {
 		if (window.confirm(f("tourBuilder.seedVibeControls.confirm"))) {
 			V(!0), U(null), G(null);
 			try {
-				let e = await xe.mutate({ mutation: _e }), t = ve(e);
+				let e = await we.mutate({ mutation: be }), t = xe(e);
 				if (t) throw Error(t);
 				let n = e.data?.seedVibeControlsUserTours;
 				if (!n) throw Error("Seed mutation returned no result.");
@@ -554,67 +555,93 @@ function g() {
 				V(!1);
 			}
 		}
-	};
-	return y ? /* @__PURE__ */ u("div", {
+	}, $ = p && p !== "new" ? [
+		{
+			label: T?.steps && T.steps.length > 0 ? `${f("tourBuilder.editSteps")} (${T.steps.length})` : f("tourBuilder.editSteps"),
+			onSelect: () => m(`${g}/${p}/steps`),
+			icon: /* @__PURE__ */ l(le, { size: 16 })
+		},
+		{
+			label: f("tourBuilder.preview"),
+			onSelect: () => m(`${g}/${p}/preview`),
+			icon: /* @__PURE__ */ l(se, { size: 16 })
+		},
+		{
+			label: f("tourBuilder.analytics"),
+			onSelect: () => m(`${g}/${p}/analytics`),
+			icon: /* @__PURE__ */ l(ae, { size: 16 })
+		},
+		{
+			label: "Schedule",
+			onSelect: () => m(`${g}/${p}/schedule`),
+			icon: /* @__PURE__ */ l(oe, { size: 16 })
+		},
+		...Te ? [{
+			label: "Save as Template",
+			onSelect: () => void Fe(),
+			icon: /* @__PURE__ */ l(ce, { size: 16 })
+		}] : []
+	] : [];
+	return y ? /* @__PURE__ */ l("div", {
 		className: "flex h-full items-center justify-center p-3 sm:p-6",
-		children: /* @__PURE__ */ u("p", {
-			className: "text-sm text-muted-foreground",
+		children: /* @__PURE__ */ l("p", {
+			className: "text-sm text-text-secondary",
 			children: f("tourBuilder.loading")
 		})
-	}) : C ? /* @__PURE__ */ d("div", {
+	}) : C ? /* @__PURE__ */ u("div", {
 		className: "space-y-4 sm:space-y-6 p-3 sm:p-6 max-w-4xl mx-auto",
 		children: [
-			/* @__PURE__ */ d("div", {
+			/* @__PURE__ */ u("div", {
 				className: "flex items-center gap-4",
-				children: [/* @__PURE__ */ u("button", {
+				children: [/* @__PURE__ */ l("button", {
 					type: "button",
-					onClick: Ae,
+					onClick: Ne,
 					className: "p-2 hover:bg-accent rounded-md",
 					"aria-label": f("tourBuilder.goBack"),
-					children: /* @__PURE__ */ u(re, { size: 20 })
-				}), /* @__PURE__ */ d("div", {
+					children: /* @__PURE__ */ l(ie, { size: 20 })
+				}), /* @__PURE__ */ u("div", {
 					className: "flex-1",
-					children: [/* @__PURE__ */ u("h1", {
-						className: "text-xl sm:text-2xl font-bold text-foreground",
+					children: [/* @__PURE__ */ l("h1", {
+						className: "text-xl sm:text-2xl font-bold text-text-primary",
 						children: f(p && p !== "new" ? "tourBuilder.titleEdit" : "tourBuilder.titleCreate")
-					}), /* @__PURE__ */ u("p", {
-						className: "text-sm text-muted-foreground",
+					}), /* @__PURE__ */ l("p", {
+						className: "text-sm text-text-secondary",
 						children: f("tourBuilder.subtitle")
 					})]
 				})]
 			}),
-			b ? /* @__PURE__ */ d("div", {
-				className: "rounded-md border border-border bg-card p-4 sm:p-6",
+			b ? /* @__PURE__ */ u(ge, {
+				className: "p-4 sm:p-6",
 				children: [
-					/* @__PURE__ */ d("div", {
+					/* @__PURE__ */ u("div", {
 						className: "flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between",
-						children: [/* @__PURE__ */ d("div", {
+						children: [/* @__PURE__ */ u("div", {
 							className: "space-y-1",
-							children: [/* @__PURE__ */ u("h2", {
-								className: "text-lg font-semibold text-foreground",
+							children: [/* @__PURE__ */ l("h2", {
+								className: "text-lg font-semibold text-text-primary",
 								children: f("tourBuilder.seedVibeControls.title")
-							}), /* @__PURE__ */ u("p", {
-								className: "text-sm text-muted-foreground",
+							}), /* @__PURE__ */ l("p", {
+								className: "text-sm text-text-secondary",
 								children: f("tourBuilder.seedVibeControls.description")
 							})]
-						}), /* @__PURE__ */ d("button", {
+						}), /* @__PURE__ */ u("button", {
 							type: "button",
-							onClick: () => void Me(),
+							onClick: () => void Ie(),
 							disabled: B || !w,
-							className: "inline-flex min-h-11 items-center justify-center gap-2 rounded-md border border-border bg-secondary px-4 py-2 text-sm font-medium text-secondary-foreground hover:bg-secondary/80 disabled:cursor-not-allowed disabled:opacity-50",
-							children: [/* @__PURE__ */ u(ue, { size: 18 }), f(B ? "tourBuilder.seedVibeControls.loading" : "tourBuilder.seedVibeControls.button")]
+							className: "inline-flex min-h-11 items-center justify-center gap-2 rounded-md border border-border-subtle bg-secondary px-4 py-2 text-sm font-medium text-secondary-foreground hover:bg-secondary/80 disabled:cursor-not-allowed disabled:opacity-50",
+							children: [/* @__PURE__ */ l(de, { size: 18 }), f(B ? "tourBuilder.seedVibeControls.loading" : "tourBuilder.seedVibeControls.button")]
 						})]
 					}),
-					w ? null : /* @__PURE__ */ u("p", {
-						className: "mt-3 text-sm text-muted-foreground",
+					w ? null : /* @__PURE__ */ l("p", {
+						className: "mt-3 text-sm text-text-secondary",
 						children: f("tourBuilder.seedVibeControls.permissionHint")
 					}),
-					W ? /* @__PURE__ */ u("p", {
-						className: "mt-3 text-sm text-destructive",
+					W ? /* @__PURE__ */ l("p", {
+						className: "mt-3 text-sm text-status-error-text",
 						children: W
 					}) : null,
-					H ? /* @__PURE__ */ u("div", {
-						className: "mt-3 rounded-md border border-border bg-background p-3 text-sm text-muted-foreground",
+					H ? /* @__PURE__ */ l("div", {
+						className: "mt-3 rounded-md border border-border-seam bg-bg-surface p-3 text-sm text-text-secondary",
 						children: f("tourBuilder.seedVibeControls.result", {
 							totalCount: H.totalCount,
 							productId: H.productId,
@@ -625,23 +652,24 @@ function g() {
 					}) : null
 				]
 			}) : null,
-			/* @__PURE__ */ d("form", {
-				onSubmit: ke,
+			/* @__PURE__ */ u("form", {
+				onSubmit: Me,
 				className: "space-y-6",
 				children: [
-					/* @__PURE__ */ d("div", {
-						className: "border border-border rounded-md p-4 sm:p-6 bg-card",
-						children: [/* @__PURE__ */ u("h2", {
+					/* @__PURE__ */ u(d, {
+						treatment: "plain",
+						className: "p-4 sm:p-6 border-border-seam",
+						children: [/* @__PURE__ */ l("h2", {
 							className: "text-lg font-semibold mb-4",
 							children: f("tourBuilder.sectionBasicInfo")
-						}), /* @__PURE__ */ d("div", {
+						}), /* @__PURE__ */ u("div", {
 							className: "space-y-4",
 							children: [
-								/* @__PURE__ */ d("div", { children: [/* @__PURE__ */ u("label", {
+								/* @__PURE__ */ u("div", { children: [/* @__PURE__ */ l("label", {
 									className: "block text-sm font-medium mb-2",
 									htmlFor: "tour-name",
 									children: f("tourBuilder.labelName")
-								}), /* @__PURE__ */ u("input", {
+								}), /* @__PURE__ */ l("input", {
 									id: "tour-name",
 									type: "text",
 									value: M.name || "",
@@ -649,15 +677,15 @@ function g() {
 										...M,
 										name: e.target.value
 									}),
-									className: "w-full px-3 py-2 border border-border rounded-md bg-background text-foreground",
+									className: "w-full px-3 py-2 border border-border-subtle rounded-md bg-bg-surface text-text-primary",
 									required: !0,
 									"aria-label": f("tourBuilder.labelName")
 								})] }),
-								/* @__PURE__ */ d("div", { children: [/* @__PURE__ */ u("label", {
+								/* @__PURE__ */ u("div", { children: [/* @__PURE__ */ l("label", {
 									className: "block text-sm font-medium mb-2",
 									htmlFor: "tour-description",
 									children: f("tourBuilder.labelDescription")
-								}), /* @__PURE__ */ u("textarea", {
+								}), /* @__PURE__ */ l("textarea", {
 									id: "tour-description",
 									value: M.description || "",
 									onChange: (e) => N({
@@ -665,16 +693,16 @@ function g() {
 										description: e.target.value
 									}),
 									rows: 3,
-									className: "w-full px-3 py-2 border border-border rounded-md bg-background text-foreground",
+									className: "w-full px-3 py-2 border border-border-subtle rounded-md bg-bg-surface text-text-primary",
 									"aria-label": f("tourBuilder.labelDescription")
 								})] }),
-								/* @__PURE__ */ d("div", { children: [
-									/* @__PURE__ */ u("label", {
+								/* @__PURE__ */ u("div", { children: [
+									/* @__PURE__ */ l("label", {
 										className: "block text-sm font-medium mb-2",
 										htmlFor: "product-id",
 										children: f("tourBuilder.labelProductId")
 									}),
-									/* @__PURE__ */ d("select", {
+									/* @__PURE__ */ u("select", {
 										id: "product-id",
 										value: P ? "__custom__" : M.productId || "",
 										onChange: (e) => {
@@ -694,19 +722,19 @@ function g() {
 												pageId: void 0
 											});
 										},
-										className: "w-full px-3 py-2 border border-border rounded-md bg-background text-foreground",
+										className: "w-full px-3 py-2 border border-border-subtle rounded-md bg-bg-surface text-text-primary",
 										required: !0,
 										"aria-label": f("tourBuilder.labelProductId"),
 										children: [
-											/* @__PURE__ */ u("option", {
+											/* @__PURE__ */ l("option", {
 												value: "",
 												children: "Select product"
 											}),
-											j ? /* @__PURE__ */ u("option", {
+											j ? /* @__PURE__ */ l("option", {
 												disabled: !0,
 												children: "Loading products…"
 											}) : null,
-											q.map((e) => /* @__PURE__ */ d("option", {
+											q.map((e) => /* @__PURE__ */ u("option", {
 												value: e.slug,
 												children: [
 													e.name,
@@ -715,17 +743,17 @@ function g() {
 													")"
 												]
 											}, e.id)),
-											Ee ? /* @__PURE__ */ d("option", {
+											ke ? /* @__PURE__ */ u("option", {
 												value: M.productId,
 												children: ["Current: ", M.productId]
 											}) : null,
-											/* @__PURE__ */ u("option", {
+											/* @__PURE__ */ l("option", {
 												value: "__custom__",
 												children: "Custom product slug"
 											})
 										]
 									}),
-									P ? /* @__PURE__ */ u("input", {
+									P ? /* @__PURE__ */ l("input", {
 										id: "product-id-custom",
 										"aria-label": "Custom product slug",
 										type: "text",
@@ -736,20 +764,20 @@ function g() {
 											moduleId: void 0,
 											pageId: void 0
 										}),
-										className: "mt-2 w-full px-3 py-2 border border-border rounded-md bg-background text-foreground",
+										className: "mt-2 w-full px-3 py-2 border border-border-subtle rounded-md bg-bg-surface text-text-primary",
 										placeholder: "vibecontrols",
 										required: !0
 									}) : null
 								] }),
-								/* @__PURE__ */ d("div", {
+								/* @__PURE__ */ u("div", {
 									className: "grid grid-cols-1 gap-4 sm:grid-cols-2",
-									children: [/* @__PURE__ */ d("div", { children: [
-										/* @__PURE__ */ u("label", {
+									children: [/* @__PURE__ */ u("div", { children: [
+										/* @__PURE__ */ l("label", {
 											className: "block text-sm font-medium mb-2",
 											htmlFor: "module-id",
 											children: "Module ID"
 										}),
-										/* @__PURE__ */ d("select", {
+										/* @__PURE__ */ u("select", {
 											id: "module-id",
 											value: I ? "__custom__" : M.moduleId || "",
 											onChange: (e) => {
@@ -767,15 +795,15 @@ function g() {
 													pageId: void 0
 												});
 											},
-											className: "w-full px-3 py-2 border border-border rounded-md bg-background text-foreground",
+											className: "w-full px-3 py-2 border border-border-subtle rounded-md bg-bg-surface text-text-primary",
 											disabled: !M.productId,
 											"aria-label": "Module ID",
 											children: [
-												/* @__PURE__ */ u("option", {
+												/* @__PURE__ */ l("option", {
 													value: "",
 													children: "All modules"
 												}),
-												Y.map((e) => /* @__PURE__ */ d("option", {
+												Y.map((e) => /* @__PURE__ */ u("option", {
 													value: e.moduleId,
 													children: [
 														e.label,
@@ -784,17 +812,17 @@ function g() {
 														")"
 													]
 												}, e.moduleId)),
-												De ? /* @__PURE__ */ d("option", {
+												Ae ? /* @__PURE__ */ u("option", {
 													value: M.moduleId,
 													children: ["Current: ", M.moduleId]
 												}) : null,
-												/* @__PURE__ */ u("option", {
+												/* @__PURE__ */ l("option", {
 													value: "__custom__",
 													children: "Custom module ID"
 												})
 											]
 										}),
-										I ? /* @__PURE__ */ u("input", {
+										I ? /* @__PURE__ */ l("input", {
 											id: "module-id-custom",
 											"aria-label": "Custom module ID",
 											type: "text",
@@ -804,16 +832,16 @@ function g() {
 												moduleId: e.target.value || void 0,
 												pageId: void 0
 											}),
-											className: "mt-2 w-full px-3 py-2 border border-border rounded-md bg-background text-foreground",
+											className: "mt-2 w-full px-3 py-2 border border-border-subtle rounded-md bg-bg-surface text-text-primary",
 											placeholder: "vibecontrols"
 										}) : null
-									] }), /* @__PURE__ */ d("div", { children: [
-										/* @__PURE__ */ u("label", {
+									] }), /* @__PURE__ */ u("div", { children: [
+										/* @__PURE__ */ l("label", {
 											className: "block text-sm font-medium mb-2",
 											htmlFor: "page-id",
 											children: "Page ID"
 										}),
-										/* @__PURE__ */ d("select", {
+										/* @__PURE__ */ u("select", {
 											id: "page-id",
 											value: R ? "__custom__" : M.pageId || "",
 											onChange: (e) => {
@@ -829,15 +857,15 @@ function g() {
 													pageId: e.target.value || void 0
 												});
 											},
-											className: "w-full px-3 py-2 border border-border rounded-md bg-background text-foreground",
+											className: "w-full px-3 py-2 border border-border-subtle rounded-md bg-bg-surface text-text-primary",
 											disabled: !M.productId,
 											"aria-label": "Page ID",
 											children: [
-												/* @__PURE__ */ u("option", {
+												/* @__PURE__ */ l("option", {
 													value: "",
 													children: "All pages"
 												}),
-												Z.map((e) => /* @__PURE__ */ d("option", {
+												Z.map((e) => /* @__PURE__ */ u("option", {
 													value: e.pageId,
 													children: [
 														e.label,
@@ -846,17 +874,17 @@ function g() {
 														")"
 													]
 												}, e.pageId)),
-												Oe ? /* @__PURE__ */ d("option", {
+												je ? /* @__PURE__ */ u("option", {
 													value: M.pageId,
 													children: ["Current: ", M.pageId]
 												}) : null,
-												/* @__PURE__ */ u("option", {
+												/* @__PURE__ */ l("option", {
 													value: "__custom__",
 													children: "Custom page ID"
 												})
 											]
 										}),
-										R ? /* @__PURE__ */ u("input", {
+										R ? /* @__PURE__ */ l("input", {
 											id: "page-id-custom",
 											"aria-label": "Custom page ID",
 											type: "text",
@@ -865,14 +893,14 @@ function g() {
 												...M,
 												pageId: e.target.value || void 0
 											}),
-											className: "mt-2 w-full px-3 py-2 border border-border rounded-md bg-background text-foreground",
+											className: "mt-2 w-full px-3 py-2 border border-border-subtle rounded-md bg-bg-surface text-text-primary",
 											placeholder: "agents"
 										}) : null
 									] })]
 								}),
-								/* @__PURE__ */ d("label", {
+								/* @__PURE__ */ u("label", {
 									className: "flex items-center gap-3 cursor-pointer",
-									children: [/* @__PURE__ */ u("input", {
+									children: [/* @__PURE__ */ l("input", {
 										type: "checkbox",
 										checked: M.isActive ?? !0,
 										onChange: (e) => N({
@@ -881,7 +909,7 @@ function g() {
 										}),
 										className: "size-4 rounded",
 										"aria-label": "Active"
-									}), /* @__PURE__ */ u("span", {
+									}), /* @__PURE__ */ l("span", {
 										className: "text-sm font-medium",
 										children: "Active"
 									})]
@@ -889,55 +917,56 @@ function g() {
 							]
 						})]
 					}),
-					/* @__PURE__ */ d("div", {
-						className: "border border-border rounded-md p-4 sm:p-6 bg-card",
-						children: [/* @__PURE__ */ u("h2", {
+					/* @__PURE__ */ u(d, {
+						treatment: "plain",
+						className: "p-4 sm:p-6 border-border-seam",
+						children: [/* @__PURE__ */ l("h2", {
 							className: "text-lg font-semibold mb-4",
 							children: f("tourBuilder.sectionTriggerSettings")
-						}), /* @__PURE__ */ d("div", {
+						}), /* @__PURE__ */ u("div", {
 							className: "space-y-4",
 							children: [
-								/* @__PURE__ */ d("div", { children: [/* @__PURE__ */ u("label", {
+								/* @__PURE__ */ u("div", { children: [/* @__PURE__ */ l("label", {
 									className: "block text-sm font-medium mb-2",
 									htmlFor: "trigger-type",
 									children: f("tourBuilder.labelTriggerType")
-								}), /* @__PURE__ */ d("select", {
+								}), /* @__PURE__ */ u("select", {
 									id: "trigger-type",
 									value: M.triggerType || "MANUAL",
 									onChange: (e) => N({
 										...M,
 										triggerType: e.target.value
 									}),
-									className: "w-full px-3 py-2 border border-border rounded-md bg-background text-foreground",
+									className: "w-full px-3 py-2 border border-border-subtle rounded-md bg-bg-surface text-text-primary",
 									"aria-label": f("tourBuilder.labelTriggerType"),
 									children: [
-										/* @__PURE__ */ u("option", {
+										/* @__PURE__ */ l("option", {
 											value: "MANUAL",
 											children: f("tourBuilder.triggerManual")
 										}),
-										/* @__PURE__ */ u("option", {
+										/* @__PURE__ */ l("option", {
 											value: "AUTO_FIRST_VISIT",
 											children: f("tourBuilder.triggerAutoFirstVisit")
 										}),
-										/* @__PURE__ */ u("option", {
+										/* @__PURE__ */ l("option", {
 											value: "AUTO_ALWAYS",
 											children: f("tourBuilder.triggerAutoAlways")
 										}),
-										/* @__PURE__ */ u("option", {
+										/* @__PURE__ */ l("option", {
 											value: "ON_EVENT",
 											children: f("tourBuilder.triggerOnEvent")
 										}),
-										/* @__PURE__ */ u("option", {
+										/* @__PURE__ */ l("option", {
 											value: "SCHEDULED",
 											children: f("tourBuilder.triggerScheduled")
 										})
 									]
 								})] }),
-								/* @__PURE__ */ d("div", { children: [/* @__PURE__ */ u("label", {
+								/* @__PURE__ */ u("div", { children: [/* @__PURE__ */ l("label", {
 									className: "block text-sm font-medium mb-2",
 									htmlFor: "priority",
 									children: f("tourBuilder.labelPriority")
-								}), /* @__PURE__ */ u("input", {
+								}), /* @__PURE__ */ l("input", {
 									id: "priority",
 									type: "number",
 									min: "1",
@@ -950,138 +979,96 @@ function g() {
 											priority: t
 										});
 									},
-									className: "w-full px-3 py-2 border border-border rounded-md bg-background text-foreground",
+									className: "w-full px-3 py-2 border border-border-subtle rounded-md bg-bg-surface text-text-primary",
 									"aria-label": f("tourBuilder.labelPriority")
 								})] }),
-								/* @__PURE__ */ d("div", {
+								/* @__PURE__ */ u("div", {
 									className: "grid grid-cols-1 gap-4 sm:grid-cols-2",
-									children: [/* @__PURE__ */ d("div", { children: [/* @__PURE__ */ u("label", {
+									children: [/* @__PURE__ */ u("div", { children: [/* @__PURE__ */ l("label", {
 										className: "block text-sm font-medium mb-2",
 										htmlFor: "tour-start-date",
 										children: "Start Date"
-									}), /* @__PURE__ */ u("input", {
+									}), /* @__PURE__ */ l("input", {
 										id: "tour-start-date",
 										type: "datetime-local",
-										value: $(M.startDate),
+										value: Pe(M.startDate),
 										onChange: (e) => N({
 											...M,
 											startDate: e.target.value ? new Date(e.target.value).toISOString() : void 0
 										}),
-										className: "w-full px-3 py-2 border border-border rounded-md bg-background text-foreground",
+										className: "w-full px-3 py-2 border border-border-subtle rounded-md bg-bg-surface text-text-primary",
 										"aria-label": "Start Date"
-									})] }), /* @__PURE__ */ d("div", { children: [/* @__PURE__ */ u("label", {
+									})] }), /* @__PURE__ */ u("div", { children: [/* @__PURE__ */ l("label", {
 										className: "block text-sm font-medium mb-2",
 										htmlFor: "tour-end-date",
 										children: "End Date"
-									}), /* @__PURE__ */ u("input", {
+									}), /* @__PURE__ */ l("input", {
 										id: "tour-end-date",
 										type: "datetime-local",
-										value: $(M.endDate),
+										value: Pe(M.endDate),
 										onChange: (e) => N({
 											...M,
 											endDate: e.target.value ? new Date(e.target.value).toISOString() : void 0
 										}),
-										className: "w-full px-3 py-2 border border-border rounded-md bg-background text-foreground",
+										className: "w-full px-3 py-2 border border-border-subtle rounded-md bg-bg-surface text-text-primary",
 										"aria-label": "End Date"
 									})] })]
 								})
 							]
 						})]
 					}),
-					k && /* @__PURE__ */ d("div", {
-						className: "border border-destructive rounded-md p-4 bg-destructive/10",
-						children: [/* @__PURE__ */ u("h3", {
-							className: "font-semibold text-destructive mb-2",
+					k && /* @__PURE__ */ u("div", {
+						className: "border border-status-error-border rounded-md p-4 bg-status-error-bg/10",
+						children: [/* @__PURE__ */ l("h3", {
+							className: "font-semibold text-status-error-text mb-2",
 							children: f("tourBuilder.errorTitle")
-						}), /* @__PURE__ */ u("p", {
-							className: "text-sm text-destructive",
+						}), /* @__PURE__ */ l("p", {
+							className: "text-sm text-status-error-text",
 							children: k.message
 						})]
 					}),
-					O.length > 0 && /* @__PURE__ */ d("div", {
-						className: "border border-destructive rounded-md p-4 bg-destructive/10",
-						children: [/* @__PURE__ */ u("h3", {
-							className: "font-semibold text-destructive mb-2",
+					O.length > 0 && /* @__PURE__ */ u("div", {
+						className: "border border-status-error-border rounded-md p-4 bg-status-error-bg/10",
+						children: [/* @__PURE__ */ l("h3", {
+							className: "font-semibold text-status-error-text mb-2",
 							children: f("tourBuilder.validationErrorsTitle")
-						}), /* @__PURE__ */ u("ul", {
+						}), /* @__PURE__ */ l("ul", {
 							className: "list-disc list-inside space-y-1",
-							children: O.map((e) => /* @__PURE__ */ u("li", {
-								className: "text-sm text-destructive",
+							children: O.map((e) => /* @__PURE__ */ l("li", {
+								className: "text-sm text-status-error-text",
 								children: e.message
 							}, e.message))
 						})]
 					}),
-					/* @__PURE__ */ d("div", {
-						className: "flex flex-wrap gap-3",
-						children: [/* @__PURE__ */ u(l, {
+					/* @__PURE__ */ u("div", {
+						className: "flex flex-wrap items-center gap-3",
+						children: [/* @__PURE__ */ l(re, {
 							permission: b ? i.TOUR_CREATE : i.TOUR_UPDATE,
-							children: /* @__PURE__ */ d("button", {
+							children: /* @__PURE__ */ u(me, {
 								type: "submit",
 								disabled: D || !C,
-								className: "flex-1 min-w-[200px] px-4 py-2 bg-primary text-primary-foreground rounded-md hover:bg-primary/90 disabled:opacity-50 flex items-center justify-center gap-2",
-								children: [/* @__PURE__ */ u(le, { size: 20 }), f(D ? "tourBuilder.saving" : p && p !== "new" ? "tourBuilder.updateTour" : "tourBuilder.createAndAddSteps")]
-							})
-						}), p && p !== "new" && /* @__PURE__ */ d(de, { children: [
-							/* @__PURE__ */ d("button", {
-								type: "button",
-								onClick: () => m(`${g}/${p}/steps`),
-								className: "px-4 py-2 bg-secondary text-secondary-foreground rounded-md hover:bg-secondary/80 flex items-center gap-2",
-								children: [
-									/* @__PURE__ */ u(ce, { size: 20 }),
-									f("tourBuilder.editSteps"),
-									T?.steps && T.steps.length > 0 && /* @__PURE__ */ u("span", {
-										className: "ml-1 px-2 py-0.5 text-xs bg-primary/20 rounded-full",
-										children: T.steps.length
-									})
-								]
-							}),
-							/* @__PURE__ */ d("button", {
-								type: "button",
-								onClick: () => m(`${g}/${p}/preview`),
-								className: "px-4 py-2 border border-border rounded-md hover:bg-accent flex items-center gap-2",
-								children: [/* @__PURE__ */ u(oe, { size: 20 }), f("tourBuilder.preview")]
-							}),
-							/* @__PURE__ */ d("button", {
-								type: "button",
-								onClick: () => m(`${g}/${p}/analytics`),
-								className: "px-4 py-2 border border-border rounded-md hover:bg-accent flex items-center gap-2",
-								children: [/* @__PURE__ */ u(ie, { size: 20 }), f("tourBuilder.analytics")]
-							}),
-							/* @__PURE__ */ d("button", {
-								type: "button",
-								onClick: () => m(`${g}/${p}/schedule`),
-								className: "px-4 py-2 border border-border rounded-md hover:bg-accent flex items-center gap-2",
-								children: [/* @__PURE__ */ u(ae, { size: 20 }), "Schedule"]
-							}),
-							/* @__PURE__ */ u(l, {
-								permission: i.TOUR_TEMPLATE_CREATE,
-								children: /* @__PURE__ */ d("button", {
-									type: "button",
-									onClick: je,
-									disabled: !Se,
-									className: "px-4 py-2 border border-border rounded-md hover:bg-accent flex items-center gap-2 disabled:opacity-50",
-									children: [/* @__PURE__ */ u(se, { size: 20 }), "Save as Template"]
-								})
+								className: "flex-1 min-w-[200px] min-h-[44px]",
+								children: [/* @__PURE__ */ l(ue, { size: 20 }), f(D ? "tourBuilder.saving" : p && p !== "new" ? "tourBuilder.updateTour" : "tourBuilder.createAndAddSteps")]
 							})
-						] })]
+						}), p && p !== "new" && $.length > 0 && /* @__PURE__ */ l(he, { actions: $ })]
 					})
 				]
 			})
 		]
-	}) : /* @__PURE__ */ u("div", {
+	}) : /* @__PURE__ */ l("div", {
 		className: "flex h-full items-center justify-center p-3 sm:p-6",
-		children: /* @__PURE__ */ d("div", {
+		children: /* @__PURE__ */ u("div", {
 			className: "text-center space-y-4",
-			children: [/* @__PURE__ */ d("div", { children: [/* @__PURE__ */ u("h2", {
-				className: "text-lg font-semibold text-foreground mb-2",
+			children: [/* @__PURE__ */ u("div", { children: [/* @__PURE__ */ l("h2", {
+				className: "text-lg font-semibold text-text-primary mb-2",
 				children: f("tourBuilder.accessDeniedTitle")
-			}), /* @__PURE__ */ u("p", {
-				className: "text-sm text-muted-foreground",
+			}), /* @__PURE__ */ l("p", {
+				className: "text-sm text-text-secondary",
 				children: f(b ? "tourBuilder.createAccessDeniedMessage" : "tourBuilder.updateAccessDeniedMessage")
-			})] }), /* @__PURE__ */ u("button", {
+			})] }), /* @__PURE__ */ l("button", {
 				type: "button",
-				onClick: Ae,
-				className: "inline-flex items-center justify-center rounded-md border border-border px-4 py-2 text-sm font-medium text-foreground hover:bg-accent",
+				onClick: Ne,
+				className: "inline-flex items-center justify-center rounded-md border border-border-subtle px-4 py-2 text-sm font-medium text-text-primary hover:bg-accent",
 				children: f("tourBuilder.goBack")
 			})]
 		})