@burdenoff/microfe-tours 2026.624.1 → 2026.625.1

package/dist/tours/pages/StepEditorPage.js

@@ -1,195 +1,195 @@
 import { useToursContext as e } from "../providers/ToursProvider.js";
 import { useToursPermissionAccess as t } from "../hooks/useToursPermissionAccess.js";
 import { TOUR_PERMISSIONS as n } from "../../constants/permissions.js";
-import { useToursI18n as r } from "../i18n.js";
-import { emitToursApiFailed as i } from "../telemetry.js";
-import { useMediaLibrary as a } from "../hooks/useMediaLibrary.js";
-import { useStepSequencer as ee } from "../hooks/useStepSequencer.js";
-import { useTourBuilder as o } from "../hooks/useTourBuilder.js";
-import { useEffect as s, useState as c } from "react";
-import { PermissionGate as te } from "@burdenoff/fe-libs/shared/components";
-import { ArrowLeft as l, ChevronDown as u, ChevronLeft as d, ChevronRight as f, ChevronUp as p, Menu as m, Paperclip as h, Plus as g, Save as ne, Trash2 as re, X as ie } from "lucide-react";
-import { jsx as _, jsxs as v } from "react/jsx-runtime";
-import { useNavigate as y, useParams as ae } from "react-router-dom";
-import { useEventBus as oe } from "@burdenoff/fe-libs/shared/events";
-import { OptionalFields as b } from "@burdenoff/fe-libs/ui";
+import { useToursI18n as ee } from "../i18n.js";
+import { emitToursApiFailed as r } from "../telemetry.js";
+import { useMediaLibrary as te } from "../hooks/useMediaLibrary.js";
+import { useStepSequencer as i } from "../hooks/useStepSequencer.js";
+import { useTourBuilder as a } from "../hooks/useTourBuilder.js";
+import { useEffect as o, useState as s } from "react";
+import { PermissionGate as ne } from "@burdenoff/fe-libs/shared/components";
+import { ArrowLeft as re, ChevronDown as c, ChevronLeft as l, ChevronRight as u, ChevronUp as d, Menu as f, Paperclip as ie, Plus as p, Save as ae, Trash2 as oe, X as se } from "lucide-react";
+import { jsx as m, jsxs as h } from "react/jsx-runtime";
+import { useNavigate as ce, useParams as g } from "react-router-dom";
+import { Button as _, GlassCard as v, OptionalFields as y } from "@burdenoff/fe-libs/ui";
+import { useEventBus as b } from "@burdenoff/fe-libs/shared/events";
 //#region src/tours/pages/StepEditorPage.tsx
 function x() {
-	let { tr: x } = r(), { tourId: S, stepId: C } = ae(), se = y(), w = e(), { basePath: ce = "/" } = w, T = oe(), { hasPermission: E } = t(), D = E(n.TOUR_STEP_CREATE), O = E(n.TOUR_STEP_UPDATE), k = E(n.TOUR_STEP_DELETE), { tour: A, loadTour: j, syncSteps: M, saving: N } = o(S), { steps: P, selectedStep: F, selectStep: I, createStep: L, deleteStep: R, updateStepField: z, moveStep: B } = ee(), { media: le, fetchMedia: V, attachToStep: H, loading: U } = a(), [W, G] = c(!1), [K, q] = c(() => typeof window < "u" && window.innerWidth < 768), [J, Y] = c(""), [X, ue] = c("body"), [de, Z] = c(!1);
-	s(() => {
+	let { tr: x } = ee(), { tourId: S, stepId: C } = g(), le = ce(), w = e(), { basePath: T = "/" } = w, E = b(), { hasPermission: D } = t(), O = D(n.TOUR_STEP_CREATE), k = D(n.TOUR_STEP_UPDATE), A = D(n.TOUR_STEP_DELETE), { tour: j, loadTour: M, syncSteps: N, saving: P } = a(S), { steps: F, selectedStep: I, selectStep: L, createStep: R, deleteStep: z, updateStepField: B, moveStep: V } = i(), { media: H, fetchMedia: U, attachToStep: W, loading: ue } = te(), [G, K] = s(!1), [q, de] = s(() => typeof window < "u" && window.innerWidth < 768), [J, Y] = s(""), [X, fe] = s("body"), [pe, Z] = s(!1);
+	o(() => {
 		let e = () => {
 			let e = window.innerWidth < 768;
-			q(e), e || G(!1);
+			de(e), e || K(!1);
 		};
 		return window.addEventListener("resize", e), () => window.removeEventListener("resize", e);
-	}, []), s(() => {
-		S && j(S);
-	}, [S, j]), s(() => {
-		V();
-	}, [V]), s(() => {
-		let e = C || F?.id;
-		if (e && P.length > 0) {
-			let t = P.find((t) => t.id === e);
-			t && I(t);
+	}, []), o(() => {
+		S && M(S);
+	}, [S, M]), o(() => {
+		U();
+	}, [U]), o(() => {
+		let e = C || I?.id;
+		if (e && F.length > 0) {
+			let t = F.find((t) => t.id === e);
+			t && L(t);
 		}
 	}, [
 		C,
-		P,
-		I,
-		F?.id
+		F,
+		L,
+		I?.id
 	]);
 	let Q = () => {
-		L();
-	}, fe = async () => {
+		R();
+	}, me = async () => {
 		if (S) try {
-			await M(S, P);
+			await N(S, F);
 		} catch {
-			i(T, "step.save", w);
+			r(E, "step.save", w);
 		}
-	}, pe = () => {
-		se(`${ce}/${S}/edit`);
-	}, me = async () => {
-		if (!(!F || !S || !J)) {
-			if (F.id.startsWith("temp_")) {
+	}, he = () => {
+		le(`${T}/${S}/edit`);
+	}, ge = async () => {
+		if (!(!I || !S || !J)) {
+			if (I.id.startsWith("temp_")) {
 				window.alert("Save your steps before attaching media to them.");
 				return;
 			}
 			try {
-				Z(!0), await H(F.id, J, X, (F.media?.length ?? 0) + 1), await j(S), Y("");
+				Z(!0), await W(I.id, J, X, (I.media?.length ?? 0) + 1), await M(S), Y("");
 			} catch {
-				i(T, "media.attach", w);
+				r(E, "media.attach", w);
 			} finally {
 				Z(!1);
 			}
 		}
 	}, $ = (e) => {
-		I(e), K && G(!1);
+		L(e), q && K(!1);
 	};
-	return /* @__PURE__ */ v("div", {
+	return /* @__PURE__ */ h("div", {
 		className: "flex flex-col h-full bg-bg-surface",
-		children: [/* @__PURE__ */ v("div", {
+		children: [/* @__PURE__ */ h("div", {
 			className: "border-b border-border-subtle p-3 sm:p-4 flex flex-col sm:flex-row sm:items-center gap-3 sm:gap-4 bg-bg-surface",
-			children: [/* @__PURE__ */ v("div", {
+			children: [/* @__PURE__ */ h("div", {
 				className: "flex items-center gap-3",
-				children: [/* @__PURE__ */ _("button", {
+				children: [/* @__PURE__ */ m("button", {
 					type: "button",
-					onClick: pe,
+					onClick: he,
 					className: "p-2 hover:bg-accent rounded-md shrink-0",
 					"aria-label": x("stepEditor.goBack"),
-					children: /* @__PURE__ */ _(l, { size: 20 })
-				}), /* @__PURE__ */ v("div", {
+					children: /* @__PURE__ */ m(re, { size: 20 })
+				}), /* @__PURE__ */ h("div", {
 					className: "flex-1 min-w-0",
-					children: [/* @__PURE__ */ v("h1", {
+					children: [/* @__PURE__ */ h("h1", {
 						className: "text-base sm:text-lg font-semibold truncate",
 						children: [
-							A?.name || x("stepEditor.tourFallback"),
+							j?.name || x("stepEditor.tourFallback"),
 							" - ",
 							x("stepEditor.stepsLabel")
 						]
-					}), /* @__PURE__ */ v("p", {
+					}), /* @__PURE__ */ h("p", {
 						className: "text-xs sm:text-sm text-text-secondary",
 						children: [
-							P.length,
+							F.length,
 							" ",
 							x("stepEditor.stepsCount")
 						]
 					})]
 				})]
-			}), /* @__PURE__ */ v("div", {
+			}), /* @__PURE__ */ h("div", {
 				className: "flex items-center gap-2 sm:gap-3 ml-auto",
 				children: [
-					K && /* @__PURE__ */ v("button", {
+					q && /* @__PURE__ */ h("button", {
 						type: "button",
-						onClick: () => G(!W),
+						onClick: () => K(!G),
 						className: "px-3 py-2 border border-border-subtle rounded-md hover:bg-accent flex items-center gap-2 sm:hidden",
 						children: [
-							/* @__PURE__ */ _(m, { size: 18 }),
-							/* @__PURE__ */ _("span", {
+							/* @__PURE__ */ m(f, { size: 18 }),
+							/* @__PURE__ */ m("span", {
 								className: "text-sm",
 								children: x("stepEditor.steps")
 							}),
-							P.length > 0 && /* @__PURE__ */ _("span", {
+							F.length > 0 && /* @__PURE__ */ m("span", {
 								className: "px-1.5 py-0.5 text-xs bg-action-primary-bg/20 rounded-full",
-								children: P.length
+								children: F.length
 							})
 						]
 					}),
-					D && /* @__PURE__ */ v("button", {
+					O && /* @__PURE__ */ h("button", {
 						type: "button",
 						onClick: Q,
 						className: "px-3 sm:px-4 py-2 border border-border-subtle rounded-md hover:bg-accent flex items-center gap-2 text-sm sm:text-base",
-						children: [/* @__PURE__ */ _(g, { size: 18 }), /* @__PURE__ */ _("span", {
+						children: [/* @__PURE__ */ m(p, { size: 18 }), /* @__PURE__ */ m("span", {
 							className: "hidden xs:inline",
 							children: x("stepEditor.addStep")
 						})]
 					}),
-					/* @__PURE__ */ _(te, {
+					/* @__PURE__ */ m(ne, {
 						permission: n.TOUR_STEP_UPDATE,
-						children: /* @__PURE__ */ v("button", {
+						children: /* @__PURE__ */ h(_, {
 							type: "button",
-							onClick: fe,
-							disabled: N || !O,
-							className: "px-3 sm:px-4 py-2 bg-action-primary-bg text-action-primary-text rounded-md hover:bg-action-primary-bg/90 disabled:opacity-50 flex items-center gap-2 text-sm sm:text-base",
-							children: [/* @__PURE__ */ _(ne, { size: 18 }), /* @__PURE__ */ _("span", {
+							onClick: me,
+							disabled: P || !k,
+							className: "min-h-[44px] text-sm sm:text-base",
+							children: [/* @__PURE__ */ m(ae, { size: 18 }), /* @__PURE__ */ m("span", {
 								className: "hidden xs:inline",
-								children: x(N ? "stepEditor.saving" : "stepEditor.save")
+								children: x(P ? "stepEditor.saving" : "stepEditor.save")
 							})]
 						})
 					})
 				]
 			})]
-		}), /* @__PURE__ */ v("div", {
+		}), /* @__PURE__ */ h("div", {
 			className: "flex-1 flex overflow-hidden relative",
 			children: [
-				K && W && /* @__PURE__ */ _("button", {
+				q && G && /* @__PURE__ */ m("button", {
 					type: "button",
 					"aria-label": x("stepEditor.closeSteps"),
 					className: "fixed inset-0 bg-foreground/40 z-40 md:hidden",
-					onClick: () => G(!1)
+					onClick: () => K(!1)
 				}),
-				/* @__PURE__ */ v("div", {
+				/* @__PURE__ */ h("div", {
 					className: `
-            ${K ? "fixed inset-y-0 left-0 z-50 w-[min(18rem,calc(100vw-2rem))] transform transition-transform duration-300" : "w-64 lg:w-80 shrink-0"}
-            ${K && !W ? "-translate-x-full" : "translate-x-0"}
+            ${q ? "fixed inset-y-0 left-0 z-50 w-[min(18rem,calc(100vw-2rem))] transform transition-transform duration-300" : "w-64 lg:w-80 shrink-0"}
+            ${q && !G ? "-translate-x-full" : "translate-x-0"}
             border-r border-border-subtle overflow-y-auto bg-bg-surface
           `,
-					children: [K && /* @__PURE__ */ v("div", {
+					children: [q && /* @__PURE__ */ h("div", {
 						className: "flex items-center justify-between p-4 border-b border-border-subtle sticky top-0 bg-bg-surface z-10",
-						children: [/* @__PURE__ */ _("h2", {
+						children: [/* @__PURE__ */ m("h2", {
 							className: "font-semibold",
 							children: x("stepEditor.tourSteps")
-						}), /* @__PURE__ */ _("button", {
+						}), /* @__PURE__ */ m("button", {
 							type: "button",
-							onClick: () => G(!1),
+							onClick: () => K(!1),
 							className: "p-2 min-h-[44px] min-w-[44px] hover:bg-accent rounded-md",
 							"aria-label": x("stepEditor.closeSteps"),
-							children: /* @__PURE__ */ _(ie, { size: 20 })
+							children: /* @__PURE__ */ m(se, { size: 20 })
 						})]
-					}), /* @__PURE__ */ _("div", {
+					}), /* @__PURE__ */ m("div", {
 						className: "p-3 sm:p-4 space-y-2",
-						children: P.length === 0 ? /* @__PURE__ */ v("div", {
+						children: F.length === 0 ? /* @__PURE__ */ h("div", {
 							className: "text-center py-8 text-text-secondary",
-							children: [/* @__PURE__ */ _("p", {
+							children: [/* @__PURE__ */ m("p", {
 								className: "text-sm",
 								children: x("stepEditor.noStepsYet")
-							}), /* @__PURE__ */ _("p", {
+							}), /* @__PURE__ */ m("p", {
 								className: "text-xs mt-1",
 								children: x("stepEditor.clickAddStep")
 							})]
-						}) : P.map((e, t) => /* @__PURE__ */ _("div", {
+						}) : F.map((e, t) => /* @__PURE__ */ m("div", {
 							role: "button",
 							tabIndex: 0,
 							onClick: () => $(e),
 							onKeyDown: (t) => {
 								(t.key === "Enter" || t.key === " ") && (t.preventDefault(), $(e));
 							},
-							className: `p-3 border rounded-md cursor-pointer transition-colors ${F?.id === e.id ? "border-primary bg-action-primary-bg/10" : "border-border-subtle hover:bg-accent"}`,
-							children: /* @__PURE__ */ v("div", {
+							className: `p-3 border rounded-md cursor-pointer transition-colors ${I?.id === e.id ? "border-primary bg-action-primary-bg/10 shadow-[var(--shadow-pop)]" : "border-border-seam hover:bg-accent"}`,
+							children: /* @__PURE__ */ h("div", {
 								className: "flex items-start justify-between gap-2",
-								children: [/* @__PURE__ */ v("div", {
+								children: [/* @__PURE__ */ h("div", {
 									className: "flex-1 min-w-0",
 									children: [
-										/* @__PURE__ */ v("div", {
+										/* @__PURE__ */ h("div", {
 											className: "text-xs text-text-secondary mb-1",
 											children: [
 												x("stepEditor.stepNumber"),
@@ -197,49 +197,49 @@ function x() {
 												t + 1
 											]
 										}),
-										/* @__PURE__ */ _("div", {
+										/* @__PURE__ */ m("div", {
 											className: "font-medium text-sm truncate",
 											children: e.title || x("stepEditor.untitled")
 										}),
-										e.targetSelector && /* @__PURE__ */ _("div", {
+										e.targetSelector && /* @__PURE__ */ m("div", {
 											className: "text-xs text-text-secondary mt-1 truncate font-mono",
 											children: e.targetSelector
 										})
 									]
-								}), k && /* @__PURE__ */ v("div", {
+								}), A && /* @__PURE__ */ h("div", {
 									className: "flex items-center gap-1 shrink-0",
 									children: [
-										/* @__PURE__ */ _("button", {
+										/* @__PURE__ */ m("button", {
 											type: "button",
 											onClick: (e) => {
-												e.stopPropagation(), t > 0 && B(t, t - 1);
+												e.stopPropagation(), t > 0 && V(t, t - 1);
 											},
 											className: "p-1.5 sm:p-2 min-h-[32px] min-w-[32px] sm:min-h-[40px] sm:min-w-[40px] hover:bg-accent rounded",
 											title: "Move step up",
 											"aria-label": "Move step up",
 											disabled: t === 0,
-											children: /* @__PURE__ */ _(p, { size: 14 })
+											children: /* @__PURE__ */ m(d, { size: 14 })
 										}),
-										/* @__PURE__ */ _("button", {
+										/* @__PURE__ */ m("button", {
 											type: "button",
 											onClick: (e) => {
-												e.stopPropagation(), t < P.length - 1 && B(t, t + 1);
+												e.stopPropagation(), t < F.length - 1 && V(t, t + 1);
 											},
 											className: "p-1.5 sm:p-2 min-h-[32px] min-w-[32px] sm:min-h-[40px] sm:min-w-[40px] hover:bg-accent rounded",
 											title: "Move step down",
 											"aria-label": "Move step down",
-											disabled: t === P.length - 1,
-											children: /* @__PURE__ */ _(u, { size: 14 })
+											disabled: t === F.length - 1,
+											children: /* @__PURE__ */ m(c, { size: 14 })
 										}),
-										/* @__PURE__ */ _("button", {
+										/* @__PURE__ */ m("button", {
 											type: "button",
 											onClick: (t) => {
-												t.stopPropagation(), R(e.id);
+												t.stopPropagation(), z(e.id);
 											},
 											className: "p-1.5 sm:p-2 min-h-[32px] min-w-[32px] sm:min-h-[40px] sm:min-w-[40px] hover:bg-status-error-bg/10 rounded text-status-error-text",
 											title: x("stepEditor.deleteStep"),
 											"aria-label": x("stepEditor.deleteStep"),
-											children: /* @__PURE__ */ _(re, { size: 14 })
+											children: /* @__PURE__ */ m(oe, { size: 14 })
 										})
 									]
 								})]
@@ -247,88 +247,88 @@ function x() {
 						}, e.id))
 					})]
 				}),
-				/* @__PURE__ */ _("div", {
+				/* @__PURE__ */ m("div", {
 					className: "flex-1 overflow-y-auto p-4 sm:p-6",
-					children: F ? /* @__PURE__ */ v("div", {
+					children: I ? /* @__PURE__ */ h("div", {
 						className: "max-w-2xl mx-auto space-y-4 sm:space-y-6",
 						children: [
-							K && P.length > 1 && /* @__PURE__ */ v("div", {
+							q && F.length > 1 && /* @__PURE__ */ h("div", {
 								className: "flex items-center justify-between bg-bg-sunken/50 rounded-lg p-2 mb-4",
 								children: [
-									/* @__PURE__ */ _("button", {
+									/* @__PURE__ */ m("button", {
 										type: "button",
 										onClick: () => {
-											let e = P.findIndex((e) => e.id === F.id);
-											e > 0 && I(P[e - 1]);
+											let e = F.findIndex((e) => e.id === I.id);
+											e > 0 && L(F[e - 1]);
 										},
-										disabled: P.findIndex((e) => e.id === F.id) === 0,
+										disabled: F.findIndex((e) => e.id === I.id) === 0,
 										className: "p-2 min-h-[44px] min-w-[44px] hover:bg-accent rounded-md disabled:opacity-30",
 										"aria-label": x("stepEditor.previousStep"),
-										children: /* @__PURE__ */ _(d, { size: 20 })
+										children: /* @__PURE__ */ m(l, { size: 20 })
 									}),
-									/* @__PURE__ */ v("span", {
+									/* @__PURE__ */ h("span", {
 										className: "text-sm text-text-secondary",
 										children: [
 											x("stepEditor.stepNumber"),
 											" ",
-											P.findIndex((e) => e.id === F.id) + 1,
+											F.findIndex((e) => e.id === I.id) + 1,
 											" ",
 											x("stepEditor.of"),
 											" ",
-											P.length
+											F.length
 										]
 									}),
-									/* @__PURE__ */ _("button", {
+									/* @__PURE__ */ m("button", {
 										type: "button",
 										onClick: () => {
-											let e = P.findIndex((e) => e.id === F.id);
-											e < P.length - 1 && I(P[e + 1]);
+											let e = F.findIndex((e) => e.id === I.id);
+											e < F.length - 1 && L(F[e + 1]);
 										},
-										disabled: P.findIndex((e) => e.id === F.id) === P.length - 1,
+										disabled: F.findIndex((e) => e.id === I.id) === F.length - 1,
 										className: "p-2 min-h-[44px] min-w-[44px] hover:bg-accent rounded-md disabled:opacity-30",
 										"aria-label": x("stepEditor.nextStep"),
-										children: /* @__PURE__ */ _(f, { size: 20 })
+										children: /* @__PURE__ */ m(u, { size: 20 })
 									})
 								]
 							}),
-							/* @__PURE__ */ _("h2", {
+							/* @__PURE__ */ m("h2", {
 								className: "text-lg sm:text-xl font-semibold",
 								children: x("stepEditor.editStep")
 							}),
-							/* @__PURE__ */ v("div", { children: [/* @__PURE__ */ v("label", {
+							/* @__PURE__ */ h("div", { children: [/* @__PURE__ */ h("label", {
 								className: "block text-sm font-medium mb-2",
 								htmlFor: "step-editor-title",
 								children: [x("stepEditor.stepTitle"), " *"]
-							}), /* @__PURE__ */ _("input", {
+							}), /* @__PURE__ */ m("input", {
 								id: "step-editor-title",
 								type: "text",
-								value: F.title,
-								onChange: (e) => z(F.id, "title", e.target.value),
+								value: I.title,
+								onChange: (e) => B(I.id, "title", e.target.value),
 								className: "w-full px-3 py-2 border border-border-subtle rounded-md bg-bg-surface text-sm sm:text-base",
 								placeholder: x("stepEditor.stepTitlePlaceholder"),
 								"aria-label": x("stepEditor.stepTitle")
 							})] }),
-							/* @__PURE__ */ v("div", { children: [/* @__PURE__ */ v("label", {
+							/* @__PURE__ */ h("div", { children: [/* @__PURE__ */ h("label", {
 								className: "block text-sm font-medium mb-2",
 								htmlFor: "step-editor-content",
 								children: [x("stepEditor.content"), " *"]
-							}), /* @__PURE__ */ _("textarea", {
+							}), /* @__PURE__ */ m("textarea", {
 								id: "step-editor-content",
-								value: F.content,
-								onChange: (e) => z(F.id, "content", e.target.value),
+								value: I.content,
+								onChange: (e) => B(I.id, "content", e.target.value),
 								rows: 4,
 								className: "w-full px-3 py-2 border border-border-subtle rounded-md bg-bg-surface text-sm sm:text-base resize-y min-h-[100px]",
 								placeholder: x("stepEditor.contentPlaceholder"),
 								"aria-label": x("stepEditor.content")
 							})] }),
-							/* @__PURE__ */ v("div", { children: [
-								/* @__PURE__ */ v("label", {
+							/* @__PURE__ */ h("div", { children: [
+								/* @__PURE__ */ h("label", {
 									className: "block text-sm font-medium mb-2",
 									htmlFor: "step-editor-css-selector",
 									children: [
 										x("stepEditor.cssSelector"),
 										" *",
-										/* @__PURE__ */ v("span", {
+										/* @__PURE__ */ h("span", {
 											className: "text-text-secondary font-normal ml-2",
 											children: [
 												"(",
@@ -338,104 +338,104 @@ function x() {
 										})
 									]
 								}),
-								/* @__PURE__ */ _("input", {
+								/* @__PURE__ */ m("input", {
 									id: "step-editor-css-selector",
 									type: "text",
-									value: F.targetSelector || "",
-									onChange: (e) => z(F.id, "targetSelector", e.target.value),
+									value: I.targetSelector || "",
+									onChange: (e) => B(I.id, "targetSelector", e.target.value),
 									placeholder: x("stepEditor.cssSelectorPlaceholder"),
 									className: "w-full px-3 py-2 border border-border-subtle rounded-md bg-bg-surface font-mono text-sm",
 									"aria-label": "{tr('stepEditor.cssSelector')} *\n                  \n                    ({tr('stepEditor.targetElement')})"
 								}),
-								/* @__PURE__ */ _("p", {
+								/* @__PURE__ */ m("p", {
 									className: "text-xs text-text-secondary mt-1",
 									children: x("stepEditor.dataTourHint")
 								})
 							] }),
-							/* @__PURE__ */ v("div", { children: [/* @__PURE__ */ _("label", {
+							/* @__PURE__ */ h("div", { children: [/* @__PURE__ */ m("label", {
 								className: "block text-sm font-medium mb-2",
 								htmlFor: "step-editor-placement",
 								children: x("stepEditor.tooltipPlacement")
-							}), /* @__PURE__ */ v("select", {
+							}), /* @__PURE__ */ h("select", {
 								id: "step-editor-placement",
-								value: F.placement,
-								onChange: (e) => z(F.id, "placement", e.target.value),
+								value: I.placement,
+								onChange: (e) => B(I.id, "placement", e.target.value),
 								className: "w-full px-3 py-2 border border-border-subtle rounded-md bg-bg-surface text-sm sm:text-base",
 								"aria-label": x("stepEditor.tooltipPlacement"),
 								children: [
-									/* @__PURE__ */ _("option", {
+									/* @__PURE__ */ m("option", {
 										value: "AUTO",
 										children: x("stepEditor.placementAuto")
 									}),
-									/* @__PURE__ */ _("option", {
+									/* @__PURE__ */ m("option", {
 										value: "TOP",
 										children: x("stepEditor.placementTop")
 									}),
-									/* @__PURE__ */ _("option", {
+									/* @__PURE__ */ m("option", {
 										value: "BOTTOM",
 										children: x("stepEditor.placementBottom")
 									}),
-									/* @__PURE__ */ _("option", {
+									/* @__PURE__ */ m("option", {
 										value: "LEFT",
 										children: x("stepEditor.placementLeft")
 									}),
-									/* @__PURE__ */ _("option", {
+									/* @__PURE__ */ m("option", {
 										value: "RIGHT",
 										children: x("stepEditor.placementRight")
 									}),
-									/* @__PURE__ */ _("option", {
+									/* @__PURE__ */ m("option", {
 										value: "CENTER",
 										children: x("stepEditor.placementCenter")
 									})
 								]
 							})] }),
-							/* @__PURE__ */ v("details", {
+							/* @__PURE__ */ h("details", {
 								className: "border border-border-subtle rounded-md",
-								children: [/* @__PURE__ */ _("summary", {
+								children: [/* @__PURE__ */ m("summary", {
 									className: "px-4 py-3 cursor-pointer font-medium text-sm hover:bg-accent/50 rounded-t-md",
 									children: x("stepEditor.deviceSpecificSelectors")
-								}), /* @__PURE__ */ v("div", {
+								}), /* @__PURE__ */ h("div", {
 									className: "p-4 pt-0 space-y-3 border-t border-border-subtle",
 									children: [
-										/* @__PURE__ */ _("p", {
+										/* @__PURE__ */ m("p", {
 											className: "text-xs text-text-secondary mb-3",
 											children: x("stepEditor.deviceSelectorHint")
 										}),
-										/* @__PURE__ */ v("div", { children: [/* @__PURE__ */ _("label", {
+										/* @__PURE__ */ h("div", { children: [/* @__PURE__ */ m("label", {
 											className: "block text-xs font-medium mb-1",
 											htmlFor: "step-editor-mobile-selector",
 											children: x("stepEditor.mobileSelector")
-										}), /* @__PURE__ */ _("input", {
+										}), /* @__PURE__ */ m("input", {
 											id: "step-editor-mobile-selector",
 											type: "text",
-											value: F.targetSelectorMobile || "",
-											onChange: (e) => z(F.id, "targetSelectorMobile", e.target.value),
+											value: I.targetSelectorMobile || "",
+											onChange: (e) => B(I.id, "targetSelectorMobile", e.target.value),
 											placeholder: x("stepEditor.leaveEmptyDefault"),
 											className: "w-full px-3 py-2 border border-border-subtle rounded-md bg-bg-surface text-sm font-mono",
 											"aria-label": x("stepEditor.mobileSelector")
 										})] }),
-										/* @__PURE__ */ v("div", { children: [/* @__PURE__ */ _("label", {
+										/* @__PURE__ */ h("div", { children: [/* @__PURE__ */ m("label", {
 											className: "block text-xs font-medium mb-1",
 											htmlFor: "step-editor-tablet-selector",
 											children: x("stepEditor.tabletSelector")
-										}), /* @__PURE__ */ _("input", {
+										}), /* @__PURE__ */ m("input", {
 											id: "step-editor-tablet-selector",
 											type: "text",
-											value: F.targetSelectorTablet || "",
-											onChange: (e) => z(F.id, "targetSelectorTablet", e.target.value),
+											value: I.targetSelectorTablet || "",
+											onChange: (e) => B(I.id, "targetSelectorTablet", e.target.value),
 											placeholder: x("stepEditor.leaveEmptyDefault"),
 											className: "w-full px-3 py-2 border border-border-subtle rounded-md bg-bg-surface text-sm font-mono",
 											"aria-label": x("stepEditor.tabletSelector")
 										})] }),
-										/* @__PURE__ */ v("div", { children: [/* @__PURE__ */ _("label", {
+										/* @__PURE__ */ h("div", { children: [/* @__PURE__ */ m("label", {
 											className: "block text-xs font-medium mb-1",
 											htmlFor: "step-editor-desktop-selector",
 											children: x("stepEditor.desktopSelector")
-										}), /* @__PURE__ */ _("input", {
+										}), /* @__PURE__ */ m("input", {
 											id: "step-editor-desktop-selector",
 											type: "text",
-											value: F.targetSelectorDesktop || "",
-											onChange: (e) => z(F.id, "targetSelectorDesktop", e.target.value),
+											value: I.targetSelectorDesktop || "",
+											onChange: (e) => B(I.id, "targetSelectorDesktop", e.target.value),
 											placeholder: x("stepEditor.leaveEmptyDefault"),
 											className: "w-full px-3 py-2 border border-border-subtle rounded-md bg-bg-surface text-sm font-mono",
 											"aria-label": x("stepEditor.desktopSelector")
@@ -443,87 +443,87 @@ function x() {
 									]
 								})]
 							}),
-							/* @__PURE__ */ v("div", {
+							/* @__PURE__ */ h("div", {
 								className: "grid grid-cols-1 gap-4 sm:grid-cols-2",
-								children: [/* @__PURE__ */ v("label", {
+								children: [/* @__PURE__ */ h("label", {
 									className: "flex items-center gap-3 cursor-pointer rounded-md border border-border-subtle p-3",
-									children: [/* @__PURE__ */ _("input", {
+									children: [/* @__PURE__ */ m("input", {
 										type: "checkbox",
-										checked: F.requireInteraction ?? !1,
-										onChange: (e) => z(F.id, "requireInteraction", e.target.checked),
+										checked: I.requireInteraction ?? !1,
+										onChange: (e) => B(I.id, "requireInteraction", e.target.checked),
 										className: "size-4 rounded",
 										"aria-label": "Require interaction"
-									}), /* @__PURE__ */ v("div", { children: [/* @__PURE__ */ _("div", {
+									}), /* @__PURE__ */ h("div", { children: [/* @__PURE__ */ m("div", {
 										className: "text-sm font-medium",
 										children: "Require interaction"
-									}), /* @__PURE__ */ _("div", {
+									}), /* @__PURE__ */ m("div", {
 										className: "text-xs text-text-secondary",
 										children: "User must interact with the highlighted element before advancing."
 									})] })]
-								}), /* @__PURE__ */ v("div", { children: [/* @__PURE__ */ _("label", {
+								}), /* @__PURE__ */ h("div", { children: [/* @__PURE__ */ m("label", {
 									className: "block text-sm font-medium mb-2",
 									htmlFor: "step-editor-wait-timeout",
 									children: "Wait for timeout (ms)"
-								}), /* @__PURE__ */ _("input", {
+								}), /* @__PURE__ */ m("input", {
 									id: "step-editor-wait-timeout",
 									type: "number",
 									min: "0",
-									value: F.waitForTimeout ?? "",
-									onChange: (e) => z(F.id, "waitForTimeout", e.target.value ? Number(e.target.value) : void 0),
+									value: I.waitForTimeout ?? "",
+									onChange: (e) => B(I.id, "waitForTimeout", e.target.value ? Number(e.target.value) : void 0),
 									className: "w-full px-3 py-2 border border-border-subtle rounded-md bg-bg-surface text-sm",
 									placeholder: "1500",
 									"aria-label": "Wait for timeout (ms)"
 								})] })]
 							}),
-							/* @__PURE__ */ v(b, {
+							/* @__PURE__ */ h(y, {
 								title: "Advanced settings",
 								description: "Step-timing waits, skip conditions, and analytics tags.",
-								children: [/* @__PURE__ */ v("div", {
+								children: [/* @__PURE__ */ h("div", {
 									className: "grid grid-cols-1 gap-4 sm:grid-cols-2",
-									children: [/* @__PURE__ */ v("div", { children: [/* @__PURE__ */ _("label", {
+									children: [/* @__PURE__ */ h("div", { children: [/* @__PURE__ */ m("label", {
 										className: "block text-sm font-medium mb-2",
 										htmlFor: "step-editor-wait-selector",
 										children: "Wait for selector"
-									}), /* @__PURE__ */ _("input", {
+									}), /* @__PURE__ */ m("input", {
 										id: "step-editor-wait-selector",
 										type: "text",
-										value: F.waitForSelector || "",
-										onChange: (e) => z(F.id, "waitForSelector", e.target.value || void 0),
+										value: I.waitForSelector || "",
+										onChange: (e) => B(I.id, "waitForSelector", e.target.value || void 0),
 										className: "w-full px-3 py-2 border border-border-subtle rounded-md bg-bg-surface text-sm font-mono",
 										placeholder: "[data-tour='agents-tabs']",
 										"aria-label": "Wait for selector"
-									})] }), /* @__PURE__ */ v("div", { children: [/* @__PURE__ */ _("label", {
+									})] }), /* @__PURE__ */ h("div", { children: [/* @__PURE__ */ m("label", {
 										className: "block text-sm font-medium mb-2",
 										htmlFor: "step-editor-wait-event",
 										children: "Wait for event"
-									}), /* @__PURE__ */ _("input", {
+									}), /* @__PURE__ */ m("input", {
 										id: "step-editor-wait-event",
 										type: "text",
-										value: F.waitForEvent || "",
-										onChange: (e) => z(F.id, "waitForEvent", e.target.value || void 0),
+										value: I.waitForEvent || "",
+										onChange: (e) => B(I.id, "waitForEvent", e.target.value || void 0),
 										className: "w-full px-3 py-2 border border-border-subtle rounded-md bg-bg-surface text-sm",
 										placeholder: "tour:ready",
 										"aria-label": "Wait for event"
 									})] })]
-								}), /* @__PURE__ */ v("div", {
+								}), /* @__PURE__ */ h("div", {
 									className: "mt-4",
-									children: [/* @__PURE__ */ _("label", {
+									children: [/* @__PURE__ */ m("label", {
 										className: "block text-sm font-medium mb-2",
 										htmlFor: "step-editor-skip-conditions",
 										children: "Skip conditions (JSON)"
-									}), /* @__PURE__ */ _("textarea", {
+									}), /* @__PURE__ */ m("textarea", {
 										id: "step-editor-skip-conditions",
-										value: F.skipConditions ? JSON.stringify(F.skipConditions, null, 2) : "",
+										value: I.skipConditions ? JSON.stringify(I.skipConditions, null, 2) : "",
 										onChange: (e) => {
 											let t = e.target.value.trim();
 											if (!t) {
-												z(F.id, "skipConditions", void 0);
+												B(I.id, "skipConditions", void 0);
 												return;
 											}
 											try {
-												z(F.id, "skipConditions", JSON.parse(t));
+												B(I.id, "skipConditions", JSON.parse(t));
 											} catch {
-												z(F.id, "skipConditions", t);
+												B(I.id, "skipConditions", t);
 											}
 										},
 										rows: 4,
@@ -533,47 +533,48 @@ function x() {
 									})]
 								})]
 							}),
-							/* @__PURE__ */ v("div", {
-								className: "border border-border-subtle rounded-md p-4 space-y-4",
+							/* @__PURE__ */ h(v, {
+								treatment: "plain",
+								className: "p-4 space-y-4 border-border-seam",
 								children: [
-									/* @__PURE__ */ v("div", {
+									/* @__PURE__ */ h("div", {
 										className: "flex items-center gap-2",
-										children: [/* @__PURE__ */ _(h, { size: 18 }), /* @__PURE__ */ _("h3", {
+										children: [/* @__PURE__ */ m(ie, { size: 18 }), /* @__PURE__ */ m("h3", {
 											className: "text-sm font-semibold",
 											children: "Step media"
 										})]
 									}),
-									F.media && F.media.length > 0 ? /* @__PURE__ */ _("div", {
+									I.media && I.media.length > 0 ? /* @__PURE__ */ m("div", {
 										className: "space-y-2",
-										children: F.media.map((e) => /* @__PURE__ */ v("div", {
+										children: I.media.map((e) => /* @__PURE__ */ h("div", {
 											className: "flex items-center justify-between rounded-md border border-border-subtle p-2 text-sm",
-											children: [/* @__PURE__ */ v("div", { children: [/* @__PURE__ */ _("div", {
+											children: [/* @__PURE__ */ h("div", { children: [/* @__PURE__ */ m("div", {
 												className: "font-medium",
 												children: e.media.name
-											}), /* @__PURE__ */ _("div", {
+											}), /* @__PURE__ */ m("div", {
 												className: "text-xs text-text-secondary",
 												children: e.position
-											})] }), /* @__PURE__ */ _("span", {
+											})] }), /* @__PURE__ */ m("span", {
 												className: "text-xs text-text-secondary",
 												children: e.media.type
 											})]
 										}, e.id))
-									}) : /* @__PURE__ */ _("p", {
+									}) : /* @__PURE__ */ m("p", {
 										className: "text-sm text-text-secondary",
 										children: "No media attached to this step yet."
 									}),
-									/* @__PURE__ */ v("div", {
+									/* @__PURE__ */ h("div", {
 										className: "grid grid-cols-1 gap-3 sm:grid-cols-[minmax(0,1fr)_160px_auto]",
 										children: [
-											/* @__PURE__ */ v("select", {
+											/* @__PURE__ */ h("select", {
 												value: J,
 												onChange: (e) => Y(e.target.value),
 												className: "w-full px-3 py-2 border border-border-subtle rounded-md bg-bg-surface text-sm",
 												"aria-label": "Select media to attach",
-												children: [/* @__PURE__ */ _("option", {
+												children: [/* @__PURE__ */ m("option", {
 													value: "",
-													children: U ? "Loading media..." : "Select uploaded media"
-												}), le.map((e) => /* @__PURE__ */ v("option", {
+													children: ue ? "Loading media..." : "Select uploaded media"
+												}), H.map((e) => /* @__PURE__ */ h("option", {
 													value: e.id,
 													children: [
 														e.name,
@@ -583,30 +584,30 @@ function x() {
 													]
 												}, e.id))]
 											}),
-											/* @__PURE__ */ v("select", {
+											/* @__PURE__ */ h("select", {
 												value: X,
-												onChange: (e) => ue(e.target.value),
+												onChange: (e) => fe(e.target.value),
 												className: "w-full px-3 py-2 border border-border-subtle rounded-md bg-bg-surface text-sm",
 												"aria-label": "Attachment position",
 												children: [
-													/* @__PURE__ */ _("option", {
+													/* @__PURE__ */ m("option", {
 														value: "header",
 														children: "Header"
 													}),
-													/* @__PURE__ */ _("option", {
+													/* @__PURE__ */ m("option", {
 														value: "body",
 														children: "Body"
 													}),
-													/* @__PURE__ */ _("option", {
+													/* @__PURE__ */ m("option", {
 														value: "footer",
 														children: "Footer"
 													})
 												]
 											}),
-											/* @__PURE__ */ _("button", {
+											/* @__PURE__ */ m("button", {
 												type: "button",
-												onClick: me,
-												disabled: de || !J,
+												onClick: ge,
+												disabled: pe || !J,
 												className: "px-4 py-2 min-h-[44px] border border-border-subtle rounded-md hover:bg-accent disabled:opacity-50",
 												children: "Attach"
 											})
@@ -615,29 +616,29 @@ function x() {
 								]
 							})
 						]
-					}) : /* @__PURE__ */ v("div", {
+					}) : /* @__PURE__ */ h("div", {
 						className: "flex flex-col items-center justify-center h-full text-center px-4",
 						children: [
-							/* @__PURE__ */ _("div", {
+							/* @__PURE__ */ m("div", {
 								className: "size-16 bg-bg-sunken rounded-full flex items-center justify-center mb-4",
-								children: /* @__PURE__ */ _(g, {
+								children: /* @__PURE__ */ m(p, {
 									size: 24,
 									className: "text-text-secondary"
 								})
 							}),
-							/* @__PURE__ */ _("p", {
+							/* @__PURE__ */ m("p", {
 								className: "text-text-secondary mb-2",
 								children: x("stepEditor.noStepSelected")
 							}),
-							/* @__PURE__ */ _("p", {
+							/* @__PURE__ */ m("p", {
 								className: "text-sm text-text-secondary mb-4",
-								children: P.length > 0 ? x("stepEditor.selectStepToEdit") : x("stepEditor.createFirstStep")
+								children: F.length > 0 ? x("stepEditor.selectStepToEdit") : x("stepEditor.createFirstStep")
 							}),
-							P.length === 0 && D && /* @__PURE__ */ v("button", {
+							F.length === 0 && O && /* @__PURE__ */ h("button", {
 								type: "button",
 								onClick: Q,
 								className: "px-4 py-2 min-h-[44px] bg-action-primary-bg text-action-primary-text rounded-md hover:bg-action-primary-bg/90 flex items-center gap-2",
-								children: [/* @__PURE__ */ _(g, { size: 18 }), x("stepEditor.addFirstStep")]
+								children: [/* @__PURE__ */ m(p, { size: 18 }), x("stepEditor.addFirstStep")]
 							})
 						]
 					})