@burdenoff/microfe-tours 2026.1014.1 → 2026.1109.1

package/dist/tours/pages/StepEditorPage.js

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