@burdenoff/microfe-tours 2026.527.2 → 2026.527.4

package/dist/tours/pages/StepEditorPage.js

@@ -1,229 +1,244 @@
 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 ee } from "../hooks/useMediaLibrary.js";
-import { useStepSequencer as a } 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 ne, ChevronDown as re, ChevronLeft as l, ChevronRight as u, ChevronUp as d, Menu as f, Paperclip as p, Plus as m, Save as h, Trash2 as g, X as _ } from "lucide-react";
-import { jsx as v, jsxs as y } from "react/jsx-runtime";
-import { useNavigate as b, useParams as x } from "react-router-dom";
-import { useEventBus as ie } from "@burdenoff/fe-libs/shared/events";
+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 ie, ChevronLeft as ae, ChevronRight as c, ChevronUp as l, Menu as u, Paperclip as d, Plus as f, Save as p, Trash2 as m, X as h } from "lucide-react";
+import { jsx as g, jsxs as _ } from "react/jsx-runtime";
+import { useNavigate as v, useParams as y } from "react-router-dom";
+import { useEventBus as oe } from "@burdenoff/fe-libs/shared/events";
 //#region src/tours/pages/StepEditorPage.tsx
-function S() {
-	let { tr: S } = r(), { tourId: C, stepId: w } = x(), ae = b(), T = e(), { basePath: oe = "/" } = T, E = ie(), { 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 } = o(C), { steps: F, selectedStep: I, selectStep: L, createStep: R, deleteStep: z, updateStepField: B, moveStep: V } = a(), { media: se, fetchMedia: H, attachToStep: U, loading: W } = ee(), [G, K] = c(!1), [q, ce] = c(!1), [J, Y] = c(""), [X, Z] = c("body"), [le, Q] = c(!1);
-	s(() => {
+function b() {
+	let { tr: b } = ee(), { tourId: x, stepId: S } = y(), se = v(), C = e(), { basePath: ce = "/" } = C, w = oe(), { hasPermission: T } = t(), E = T(n.TOUR_STEP_CREATE), D = T(n.TOUR_STEP_UPDATE), O = T(n.TOUR_STEP_DELETE), { tour: k, loadTour: A, syncSteps: j, saving: M } = a(x), { steps: N, selectedStep: P, selectStep: F, createStep: I, deleteStep: L, updateStepField: R, moveStep: z } = i(), { media: B, fetchMedia: V, attachToStep: H, loading: U } = te(), [W, G] = s(!1), [K, le] = s(() => typeof window < "u" && window.innerWidth < 768), [q, J] = s(""), [Y, X] = s("body"), [ue, Z] = s(!1);
+	o(() => {
 		let e = () => {
 			let e = window.innerWidth < 768;
-			ce(e), e || K(!1);
+			le(e), e || G(!1);
 		};
-		return e(), window.addEventListener("resize", e), () => window.removeEventListener("resize", e);
-	}, []), s(() => {
-		C && M(C);
-	}, [C, M]), s(() => {
-		H();
-	}, [H]), s(() => {
-		let e = w || I?.id;
-		if (e && F.length > 0) {
-			let t = F.find((t) => t.id === e);
-			t && L(t);
+		return window.addEventListener("resize", e), () => window.removeEventListener("resize", e);
+	}, []), o(() => {
+		x && A(x);
+	}, [x, A]), o(() => {
+		V();
+	}, [V]), o(() => {
+		let e = S || P?.id;
+		if (e && N.length > 0) {
+			let t = N.find((t) => t.id === e);
+			t && F(t);
 		}
 	}, [
-		w,
+		S,
+		N,
 		F,
-		L,
-		I?.id
+		P?.id
 	]);
-	let $ = () => {
-		R();
-	}, ue = async () => {
-		if (C) try {
-			await N(C, F);
+	let Q = () => {
+		I();
+	}, de = async () => {
+		if (x) try {
+			await j(x, N);
 		} catch {
-			i(E, "step.save", T);
+			r(w, "step.save", C);
 		}
-	}, de = () => {
-		ae(`${oe}/${C}/edit`);
-	}, fe = async () => {
-		if (!(!I || !C || !J)) {
-			if (I.id.startsWith("temp_")) {
+	}, fe = () => {
+		se(`${ce}/${x}/edit`);
+	}, pe = async () => {
+		if (!(!P || !x || !q)) {
+			if (P.id.startsWith("temp_")) {
 				window.alert("Save your steps before attaching media to them.");
 				return;
 			}
 			try {
-				Q(!0), await U(I.id, J, X, (I.media?.length ?? 0) + 1), await M(C), Y("");
+				Z(!0), await H(P.id, q, Y, (P.media?.length ?? 0) + 1), await A(x), J("");
 			} catch {
-				i(E, "media.attach", T);
+				r(w, "media.attach", C);
 			} finally {
-				Q(!1);
+				Z(!1);
 			}
 		}
-	}, pe = (e) => {
-		L(e), q && K(!1);
+	}, $ = (e) => {
+		F(e), K && G(!1);
 	};
-	return /* @__PURE__ */ y("div", {
+	return /* @__PURE__ */ _("div", {
 		className: "flex flex-col h-full bg-background",
-		children: [/* @__PURE__ */ y("div", {
+		children: [/* @__PURE__ */ _("div", {
 			className: "border-b border-border p-3 sm:p-4 flex flex-col sm:flex-row sm:items-center gap-3 sm:gap-4 bg-card",
-			children: [/* @__PURE__ */ y("div", {
+			children: [/* @__PURE__ */ _("div", {
 				className: "flex items-center gap-3",
-				children: [/* @__PURE__ */ v("button", {
-					onClick: de,
+				children: [/* @__PURE__ */ g("button", {
+					type: "button",
+					onClick: fe,
 					className: "p-2 hover:bg-accent rounded-md shrink-0",
-					"aria-label": S("stepEditor.goBack"),
-					children: /* @__PURE__ */ v(ne, { size: 20 })
-				}), /* @__PURE__ */ y("div", {
+					"aria-label": b("stepEditor.goBack"),
+					children: /* @__PURE__ */ g(re, { size: 20 })
+				}), /* @__PURE__ */ _("div", {
 					className: "flex-1 min-w-0",
-					children: [/* @__PURE__ */ y("h1", {
+					children: [/* @__PURE__ */ _("h1", {
 						className: "text-base sm:text-lg font-semibold truncate",
 						children: [
-							j?.name || S("stepEditor.tourFallback"),
+							k?.name || b("stepEditor.tourFallback"),
 							" - ",
-							S("stepEditor.stepsLabel")
+							b("stepEditor.stepsLabel")
 						]
-					}), /* @__PURE__ */ y("p", {
+					}), /* @__PURE__ */ _("p", {
 						className: "text-xs sm:text-sm text-muted-foreground",
 						children: [
-							F.length,
+							N.length,
 							" ",
-							S("stepEditor.stepsCount")
+							b("stepEditor.stepsCount")
 						]
 					})]
 				})]
-			}), /* @__PURE__ */ y("div", {
+			}), /* @__PURE__ */ _("div", {
 				className: "flex items-center gap-2 sm:gap-3 ml-auto",
 				children: [
-					q && /* @__PURE__ */ y("button", {
-						onClick: () => K(!G),
+					K && /* @__PURE__ */ _("button", {
+						type: "button",
+						onClick: () => G(!W),
 						className: "px-3 py-2 border border-border rounded-md hover:bg-accent flex items-center gap-2 sm:hidden",
 						children: [
-							/* @__PURE__ */ v(f, { size: 18 }),
-							/* @__PURE__ */ v("span", {
+							/* @__PURE__ */ g(u, { size: 18 }),
+							/* @__PURE__ */ g("span", {
 								className: "text-sm",
-								children: S("stepEditor.steps")
+								children: b("stepEditor.steps")
 							}),
-							F.length > 0 && /* @__PURE__ */ v("span", {
+							N.length > 0 && /* @__PURE__ */ g("span", {
 								className: "px-1.5 py-0.5 text-xs bg-primary/20 rounded-full",
-								children: F.length
+								children: N.length
 							})
 						]
 					}),
-					O && /* @__PURE__ */ y("button", {
-						onClick: $,
+					E && /* @__PURE__ */ _("button", {
+						type: "button",
+						onClick: Q,
 						className: "px-3 sm:px-4 py-2 border border-border rounded-md hover:bg-accent flex items-center gap-2 text-sm sm:text-base",
-						children: [/* @__PURE__ */ v(m, { size: 18 }), /* @__PURE__ */ v("span", {
+						children: [/* @__PURE__ */ g(f, { size: 18 }), /* @__PURE__ */ g("span", {
 							className: "hidden xs:inline",
-							children: S("stepEditor.addStep")
+							children: b("stepEditor.addStep")
 						})]
 					}),
-					/* @__PURE__ */ v(te, {
+					/* @__PURE__ */ g(ne, {
 						permission: n.TOUR_STEP_UPDATE,
-						children: /* @__PURE__ */ y("button", {
-							onClick: ue,
-							disabled: P || !k,
+						children: /* @__PURE__ */ _("button", {
+							type: "button",
+							onClick: de,
+							disabled: M || !D,
 							className: "px-3 sm:px-4 py-2 bg-primary text-primary-foreground rounded-md hover:bg-primary/90 disabled:opacity-50 flex items-center gap-2 text-sm sm:text-base",
-							children: [/* @__PURE__ */ v(h, { size: 18 }), /* @__PURE__ */ v("span", {
+							children: [/* @__PURE__ */ g(p, { size: 18 }), /* @__PURE__ */ g("span", {
 								className: "hidden xs:inline",
-								children: S(P ? "stepEditor.saving" : "stepEditor.save")
+								children: b(M ? "stepEditor.saving" : "stepEditor.save")
 							})]
 						})
 					})
 				]
 			})]
-		}), /* @__PURE__ */ y("div", {
+		}), /* @__PURE__ */ _("div", {
 			className: "flex-1 flex overflow-hidden relative",
 			children: [
-				q && G && /* @__PURE__ */ v("div", {
+				K && W && /* @__PURE__ */ g("button", {
+					type: "button",
+					"aria-label": b("stepEditor.closeSteps"),
 					className: "fixed inset-0 bg-foreground/40 z-40 md:hidden",
-					onClick: () => K(!1)
+					onClick: () => G(!1)
 				}),
-				/* @__PURE__ */ y("div", {
+				/* @__PURE__ */ _("div", {
 					className: `
-            ${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"}
+            ${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"}
             border-r border-border overflow-y-auto bg-card
           `,
-					children: [q && /* @__PURE__ */ y("div", {
+					children: [K && /* @__PURE__ */ _("div", {
 						className: "flex items-center justify-between p-4 border-b border-border sticky top-0 bg-card z-10",
-						children: [/* @__PURE__ */ v("h2", {
+						children: [/* @__PURE__ */ g("h2", {
 							className: "font-semibold",
-							children: S("stepEditor.tourSteps")
-						}), /* @__PURE__ */ v("button", {
-							onClick: () => K(!1),
+							children: b("stepEditor.tourSteps")
+						}), /* @__PURE__ */ g("button", {
+							type: "button",
+							onClick: () => G(!1),
 							className: "p-2 min-h-[44px] min-w-[44px] hover:bg-accent rounded-md",
-							"aria-label": S("stepEditor.closeSteps"),
-							children: /* @__PURE__ */ v(_, { size: 20 })
+							"aria-label": b("stepEditor.closeSteps"),
+							children: /* @__PURE__ */ g(h, { size: 20 })
 						})]
-					}), /* @__PURE__ */ v("div", {
+					}), /* @__PURE__ */ g("div", {
 						className: "p-3 sm:p-4 space-y-2",
-						children: F.length === 0 ? /* @__PURE__ */ y("div", {
+						children: N.length === 0 ? /* @__PURE__ */ _("div", {
 							className: "text-center py-8 text-muted-foreground",
-							children: [/* @__PURE__ */ v("p", {
+							children: [/* @__PURE__ */ g("p", {
 								className: "text-sm",
-								children: S("stepEditor.noStepsYet")
-							}), /* @__PURE__ */ v("p", {
+								children: b("stepEditor.noStepsYet")
+							}), /* @__PURE__ */ g("p", {
 								className: "text-xs mt-1",
-								children: S("stepEditor.clickAddStep")
+								children: b("stepEditor.clickAddStep")
 							})]
-						}) : F.map((e, t) => /* @__PURE__ */ v("div", {
-							onClick: () => pe(e),
-							className: `p-3 border rounded-md cursor-pointer transition-colors ${I?.id === e.id ? "border-primary bg-primary/10" : "border-border hover:bg-accent"}`,
-							children: /* @__PURE__ */ y("div", {
+						}) : N.map((e, t) => /* @__PURE__ */ g("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 ${P?.id === e.id ? "border-primary bg-primary/10" : "border-border hover:bg-accent"}`,
+							children: /* @__PURE__ */ _("div", {
 								className: "flex items-start justify-between gap-2",
-								children: [/* @__PURE__ */ y("div", {
+								children: [/* @__PURE__ */ _("div", {
 									className: "flex-1 min-w-0",
 									children: [
-										/* @__PURE__ */ y("div", {
+										/* @__PURE__ */ _("div", {
 											className: "text-xs text-muted-foreground mb-1",
 											children: [
-												S("stepEditor.stepNumber"),
+												b("stepEditor.stepNumber"),
 												" ",
 												t + 1
 											]
 										}),
-										/* @__PURE__ */ v("div", {
+										/* @__PURE__ */ g("div", {
 											className: "font-medium text-sm truncate",
-											children: e.title || S("stepEditor.untitled")
+											children: e.title || b("stepEditor.untitled")
 										}),
-										e.targetSelector && /* @__PURE__ */ v("div", {
+										e.targetSelector && /* @__PURE__ */ g("div", {
 											className: "text-xs text-muted-foreground mt-1 truncate font-mono",
 											children: e.targetSelector
 										})
 									]
-								}), A && /* @__PURE__ */ y("div", {
+								}), O && /* @__PURE__ */ _("div", {
 									className: "flex items-center gap-1 shrink-0",
 									children: [
-										/* @__PURE__ */ v("button", {
+										/* @__PURE__ */ g("button", {
+											type: "button",
 											onClick: (e) => {
-												e.stopPropagation(), t > 0 && V(t, t - 1);
+												e.stopPropagation(), t > 0 && z(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__ */ v(d, { size: 14 })
+											children: /* @__PURE__ */ g(l, { size: 14 })
 										}),
-										/* @__PURE__ */ v("button", {
+										/* @__PURE__ */ g("button", {
+											type: "button",
 											onClick: (e) => {
-												e.stopPropagation(), t < F.length - 1 && V(t, t + 1);
+												e.stopPropagation(), t < N.length - 1 && z(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 === F.length - 1,
-											children: /* @__PURE__ */ v(re, { size: 14 })
+											disabled: t === N.length - 1,
+											children: /* @__PURE__ */ g(ie, { size: 14 })
 										}),
-										/* @__PURE__ */ v("button", {
+										/* @__PURE__ */ g("button", {
+											type: "button",
 											onClick: (t) => {
-												t.stopPropagation(), z(e.id);
+												t.stopPropagation(), L(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-destructive/10 rounded text-destructive",
-											title: S("stepEditor.deleteStep"),
-											"aria-label": S("stepEditor.deleteStep"),
-											children: /* @__PURE__ */ v(g, { size: 14 })
+											title: b("stepEditor.deleteStep"),
+											"aria-label": b("stepEditor.deleteStep"),
+											children: /* @__PURE__ */ g(m, { size: 14 })
 										})
 									]
 								})]
@@ -231,290 +246,327 @@ function S() {
 						}, e.id))
 					})]
 				}),
-				/* @__PURE__ */ v("div", {
+				/* @__PURE__ */ g("div", {
 					className: "flex-1 overflow-y-auto p-4 sm:p-6",
-					children: I ? /* @__PURE__ */ y("div", {
+					children: P ? /* @__PURE__ */ _("div", {
 						className: "max-w-2xl mx-auto space-y-4 sm:space-y-6",
 						children: [
-							q && F.length > 1 && /* @__PURE__ */ y("div", {
+							K && N.length > 1 && /* @__PURE__ */ _("div", {
 								className: "flex items-center justify-between bg-muted/50 rounded-lg p-2 mb-4",
 								children: [
-									/* @__PURE__ */ v("button", {
+									/* @__PURE__ */ g("button", {
+										type: "button",
 										onClick: () => {
-											let e = F.findIndex((e) => e.id === I.id);
-											e > 0 && L(F[e - 1]);
+											let e = N.findIndex((e) => e.id === P.id);
+											e > 0 && F(N[e - 1]);
 										},
-										disabled: F.findIndex((e) => e.id === I.id) === 0,
+										disabled: N.findIndex((e) => e.id === P.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__ */ v(l, { size: 20 })
+										"aria-label": b("stepEditor.previousStep"),
+										children: /* @__PURE__ */ g(ae, { size: 20 })
 									}),
-									/* @__PURE__ */ y("span", {
+									/* @__PURE__ */ _("span", {
 										className: "text-sm text-muted-foreground",
 										children: [
-											S("stepEditor.stepNumber"),
+											b("stepEditor.stepNumber"),
 											" ",
-											F.findIndex((e) => e.id === I.id) + 1,
+											N.findIndex((e) => e.id === P.id) + 1,
 											" ",
-											S("stepEditor.of"),
+											b("stepEditor.of"),
 											" ",
-											F.length
+											N.length
 										]
 									}),
-									/* @__PURE__ */ v("button", {
+									/* @__PURE__ */ g("button", {
+										type: "button",
 										onClick: () => {
-											let e = F.findIndex((e) => e.id === I.id);
-											e < F.length - 1 && L(F[e + 1]);
+											let e = N.findIndex((e) => e.id === P.id);
+											e < N.length - 1 && F(N[e + 1]);
 										},
-										disabled: F.findIndex((e) => e.id === I.id) === F.length - 1,
+										disabled: N.findIndex((e) => e.id === P.id) === N.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__ */ v(u, { size: 20 })
+										"aria-label": b("stepEditor.nextStep"),
+										children: /* @__PURE__ */ g(c, { size: 20 })
 									})
 								]
 							}),
-							/* @__PURE__ */ v("h2", {
+							/* @__PURE__ */ g("h2", {
 								className: "text-lg sm:text-xl font-semibold",
-								children: S("stepEditor.editStep")
+								children: b("stepEditor.editStep")
 							}),
-							/* @__PURE__ */ y("div", { children: [/* @__PURE__ */ y("label", {
+							/* @__PURE__ */ _("div", { children: [/* @__PURE__ */ _("label", {
 								className: "block text-sm font-medium mb-2",
-								children: [S("stepEditor.stepTitle"), " *"]
-							}), /* @__PURE__ */ v("input", {
+								htmlFor: "step-editor-title",
+								children: [b("stepEditor.stepTitle"), " *"]
+							}), /* @__PURE__ */ g("input", {
+								id: "step-editor-title",
 								type: "text",
-								value: I.title,
-								onChange: (e) => B(I.id, "title", e.target.value),
+								value: P.title,
+								onChange: (e) => R(P.id, "title", e.target.value),
 								className: "w-full px-3 py-2 border border-border rounded-md bg-background text-sm sm:text-base",
-								placeholder: S("stepEditor.stepTitlePlaceholder")
+								placeholder: b("stepEditor.stepTitlePlaceholder"),
+								"aria-label": b("stepEditor.stepTitle")
 							})] }),
-							/* @__PURE__ */ y("div", { children: [/* @__PURE__ */ y("label", {
+							/* @__PURE__ */ _("div", { children: [/* @__PURE__ */ _("label", {
 								className: "block text-sm font-medium mb-2",
-								children: [S("stepEditor.content"), " *"]
-							}), /* @__PURE__ */ v("textarea", {
-								value: I.content,
-								onChange: (e) => B(I.id, "content", e.target.value),
+								htmlFor: "step-editor-content",
+								children: [b("stepEditor.content"), " *"]
+							}), /* @__PURE__ */ g("textarea", {
+								id: "step-editor-content",
+								value: P.content,
+								onChange: (e) => R(P.id, "content", e.target.value),
 								rows: 4,
 								className: "w-full px-3 py-2 border border-border rounded-md bg-background text-sm sm:text-base resize-y min-h-[100px]",
-								placeholder: S("stepEditor.contentPlaceholder")
+								placeholder: b("stepEditor.contentPlaceholder"),
+								"aria-label": b("stepEditor.content")
 							})] }),
-							/* @__PURE__ */ y("div", { children: [
-								/* @__PURE__ */ y("label", {
+							/* @__PURE__ */ _("div", { children: [
+								/* @__PURE__ */ _("label", {
 									className: "block text-sm font-medium mb-2",
+									htmlFor: "step-editor-css-selector",
 									children: [
-										S("stepEditor.cssSelector"),
+										b("stepEditor.cssSelector"),
 										" *",
-										/* @__PURE__ */ y("span", {
+										/* @__PURE__ */ _("span", {
 											className: "text-muted-foreground font-normal ml-2",
 											children: [
 												"(",
-												S("stepEditor.targetElement"),
+												b("stepEditor.targetElement"),
 												")"
 											]
 										})
 									]
 								}),
-								/* @__PURE__ */ v("input", {
+								/* @__PURE__ */ g("input", {
+									id: "step-editor-css-selector",
 									type: "text",
-									value: I.targetSelector || "",
-									onChange: (e) => B(I.id, "targetSelector", e.target.value),
-									placeholder: S("stepEditor.cssSelectorPlaceholder"),
-									className: "w-full px-3 py-2 border border-border rounded-md bg-background font-mono text-sm"
+									value: P.targetSelector || "",
+									onChange: (e) => R(P.id, "targetSelector", e.target.value),
+									placeholder: b("stepEditor.cssSelectorPlaceholder"),
+									className: "w-full px-3 py-2 border border-border rounded-md bg-background font-mono text-sm",
+									"aria-label": "{tr('stepEditor.cssSelector')} *\n                  \n                    ({tr('stepEditor.targetElement')})"
 								}),
-								/* @__PURE__ */ v("p", {
+								/* @__PURE__ */ g("p", {
 									className: "text-xs text-muted-foreground mt-1",
-									children: S("stepEditor.dataTourHint")
+									children: b("stepEditor.dataTourHint")
 								})
 							] }),
-							/* @__PURE__ */ y("div", { children: [/* @__PURE__ */ v("label", {
+							/* @__PURE__ */ _("div", { children: [/* @__PURE__ */ g("label", {
 								className: "block text-sm font-medium mb-2",
-								children: S("stepEditor.tooltipPlacement")
-							}), /* @__PURE__ */ y("select", {
-								value: I.placement,
-								onChange: (e) => B(I.id, "placement", e.target.value),
+								htmlFor: "step-editor-placement",
+								children: b("stepEditor.tooltipPlacement")
+							}), /* @__PURE__ */ _("select", {
+								id: "step-editor-placement",
+								value: P.placement,
+								onChange: (e) => R(P.id, "placement", e.target.value),
 								className: "w-full px-3 py-2 border border-border rounded-md bg-background text-sm sm:text-base",
+								"aria-label": b("stepEditor.tooltipPlacement"),
 								children: [
-									/* @__PURE__ */ v("option", {
+									/* @__PURE__ */ g("option", {
 										value: "AUTO",
-										children: S("stepEditor.placementAuto")
+										children: b("stepEditor.placementAuto")
 									}),
-									/* @__PURE__ */ v("option", {
+									/* @__PURE__ */ g("option", {
 										value: "TOP",
-										children: S("stepEditor.placementTop")
+										children: b("stepEditor.placementTop")
 									}),
-									/* @__PURE__ */ v("option", {
+									/* @__PURE__ */ g("option", {
 										value: "BOTTOM",
-										children: S("stepEditor.placementBottom")
+										children: b("stepEditor.placementBottom")
 									}),
-									/* @__PURE__ */ v("option", {
+									/* @__PURE__ */ g("option", {
 										value: "LEFT",
-										children: S("stepEditor.placementLeft")
+										children: b("stepEditor.placementLeft")
 									}),
-									/* @__PURE__ */ v("option", {
+									/* @__PURE__ */ g("option", {
 										value: "RIGHT",
-										children: S("stepEditor.placementRight")
+										children: b("stepEditor.placementRight")
 									}),
-									/* @__PURE__ */ v("option", {
+									/* @__PURE__ */ g("option", {
 										value: "CENTER",
-										children: S("stepEditor.placementCenter")
+										children: b("stepEditor.placementCenter")
 									})
 								]
 							})] }),
-							/* @__PURE__ */ y("details", {
+							/* @__PURE__ */ _("details", {
 								className: "border border-border rounded-md",
-								children: [/* @__PURE__ */ v("summary", {
+								children: [/* @__PURE__ */ g("summary", {
 									className: "px-4 py-3 cursor-pointer font-medium text-sm hover:bg-accent/50 rounded-t-md",
-									children: S("stepEditor.deviceSpecificSelectors")
-								}), /* @__PURE__ */ y("div", {
+									children: b("stepEditor.deviceSpecificSelectors")
+								}), /* @__PURE__ */ _("div", {
 									className: "p-4 pt-0 space-y-3 border-t border-border",
 									children: [
-										/* @__PURE__ */ v("p", {
+										/* @__PURE__ */ g("p", {
 											className: "text-xs text-muted-foreground mb-3",
-											children: S("stepEditor.deviceSelectorHint")
+											children: b("stepEditor.deviceSelectorHint")
 										}),
-										/* @__PURE__ */ y("div", { children: [/* @__PURE__ */ v("label", {
+										/* @__PURE__ */ _("div", { children: [/* @__PURE__ */ g("label", {
 											className: "block text-xs font-medium mb-1",
-											children: S("stepEditor.mobileSelector")
-										}), /* @__PURE__ */ v("input", {
+											htmlFor: "step-editor-mobile-selector",
+											children: b("stepEditor.mobileSelector")
+										}), /* @__PURE__ */ g("input", {
+											id: "step-editor-mobile-selector",
 											type: "text",
-											value: I.targetSelectorMobile || "",
-											onChange: (e) => B(I.id, "targetSelectorMobile", e.target.value),
-											placeholder: S("stepEditor.leaveEmptyDefault"),
-											className: "w-full px-3 py-2 border border-border rounded-md bg-background text-sm font-mono"
+											value: P.targetSelectorMobile || "",
+											onChange: (e) => R(P.id, "targetSelectorMobile", e.target.value),
+											placeholder: b("stepEditor.leaveEmptyDefault"),
+											className: "w-full px-3 py-2 border border-border rounded-md bg-background text-sm font-mono",
+											"aria-label": b("stepEditor.mobileSelector")
 										})] }),
-										/* @__PURE__ */ y("div", { children: [/* @__PURE__ */ v("label", {
+										/* @__PURE__ */ _("div", { children: [/* @__PURE__ */ g("label", {
 											className: "block text-xs font-medium mb-1",
-											children: S("stepEditor.tabletSelector")
-										}), /* @__PURE__ */ v("input", {
+											htmlFor: "step-editor-tablet-selector",
+											children: b("stepEditor.tabletSelector")
+										}), /* @__PURE__ */ g("input", {
+											id: "step-editor-tablet-selector",
 											type: "text",
-											value: I.targetSelectorTablet || "",
-											onChange: (e) => B(I.id, "targetSelectorTablet", e.target.value),
-											placeholder: S("stepEditor.leaveEmptyDefault"),
-											className: "w-full px-3 py-2 border border-border rounded-md bg-background text-sm font-mono"
+											value: P.targetSelectorTablet || "",
+											onChange: (e) => R(P.id, "targetSelectorTablet", e.target.value),
+											placeholder: b("stepEditor.leaveEmptyDefault"),
+											className: "w-full px-3 py-2 border border-border rounded-md bg-background text-sm font-mono",
+											"aria-label": b("stepEditor.tabletSelector")
 										})] }),
-										/* @__PURE__ */ y("div", { children: [/* @__PURE__ */ v("label", {
+										/* @__PURE__ */ _("div", { children: [/* @__PURE__ */ g("label", {
 											className: "block text-xs font-medium mb-1",
-											children: S("stepEditor.desktopSelector")
-										}), /* @__PURE__ */ v("input", {
+											htmlFor: "step-editor-desktop-selector",
+											children: b("stepEditor.desktopSelector")
+										}), /* @__PURE__ */ g("input", {
+											id: "step-editor-desktop-selector",
 											type: "text",
-											value: I.targetSelectorDesktop || "",
-											onChange: (e) => B(I.id, "targetSelectorDesktop", e.target.value),
-											placeholder: S("stepEditor.leaveEmptyDefault"),
-											className: "w-full px-3 py-2 border border-border rounded-md bg-background text-sm font-mono"
+											value: P.targetSelectorDesktop || "",
+											onChange: (e) => R(P.id, "targetSelectorDesktop", e.target.value),
+											placeholder: b("stepEditor.leaveEmptyDefault"),
+											className: "w-full px-3 py-2 border border-border rounded-md bg-background text-sm font-mono",
+											"aria-label": b("stepEditor.desktopSelector")
 										})] })
 									]
 								})]
 							}),
-							/* @__PURE__ */ y("div", {
+							/* @__PURE__ */ _("div", {
 								className: "grid grid-cols-1 gap-4 sm:grid-cols-2",
-								children: [/* @__PURE__ */ y("label", {
+								children: [/* @__PURE__ */ _("label", {
 									className: "flex items-center gap-3 cursor-pointer rounded-md border border-border p-3",
-									children: [/* @__PURE__ */ v("input", {
+									children: [/* @__PURE__ */ g("input", {
 										type: "checkbox",
-										checked: I.requireInteraction ?? !1,
-										onChange: (e) => B(I.id, "requireInteraction", e.target.checked),
-										className: "w-4 h-4 rounded"
-									}), /* @__PURE__ */ y("div", { children: [/* @__PURE__ */ v("div", {
+										checked: P.requireInteraction ?? !1,
+										onChange: (e) => R(P.id, "requireInteraction", e.target.checked),
+										className: "size-4 rounded",
+										"aria-label": "Require interaction"
+									}), /* @__PURE__ */ _("div", { children: [/* @__PURE__ */ g("div", {
 										className: "text-sm font-medium",
 										children: "Require interaction"
-									}), /* @__PURE__ */ v("div", {
+									}), /* @__PURE__ */ g("div", {
 										className: "text-xs text-muted-foreground",
 										children: "User must interact with the highlighted element before advancing."
 									})] })]
-								}), /* @__PURE__ */ y("div", { children: [/* @__PURE__ */ v("label", {
+								}), /* @__PURE__ */ _("div", { children: [/* @__PURE__ */ g("label", {
 									className: "block text-sm font-medium mb-2",
+									htmlFor: "step-editor-wait-timeout",
 									children: "Wait for timeout (ms)"
-								}), /* @__PURE__ */ v("input", {
+								}), /* @__PURE__ */ g("input", {
+									id: "step-editor-wait-timeout",
 									type: "number",
 									min: "0",
-									value: I.waitForTimeout ?? "",
-									onChange: (e) => B(I.id, "waitForTimeout", e.target.value ? Number(e.target.value) : void 0),
+									value: P.waitForTimeout ?? "",
+									onChange: (e) => R(P.id, "waitForTimeout", e.target.value ? Number(e.target.value) : void 0),
 									className: "w-full px-3 py-2 border border-border rounded-md bg-background text-sm",
-									placeholder: "1500"
+									placeholder: "1500",
+									"aria-label": "Wait for timeout (ms)"
 								})] })]
 							}),
-							/* @__PURE__ */ y("div", {
+							/* @__PURE__ */ _("div", {
 								className: "grid grid-cols-1 gap-4 sm:grid-cols-2",
-								children: [/* @__PURE__ */ y("div", { children: [/* @__PURE__ */ v("label", {
+								children: [/* @__PURE__ */ _("div", { children: [/* @__PURE__ */ g("label", {
 									className: "block text-sm font-medium mb-2",
+									htmlFor: "step-editor-wait-selector",
 									children: "Wait for selector"
-								}), /* @__PURE__ */ v("input", {
+								}), /* @__PURE__ */ g("input", {
+									id: "step-editor-wait-selector",
 									type: "text",
-									value: I.waitForSelector || "",
-									onChange: (e) => B(I.id, "waitForSelector", e.target.value || void 0),
+									value: P.waitForSelector || "",
+									onChange: (e) => R(P.id, "waitForSelector", e.target.value || void 0),
 									className: "w-full px-3 py-2 border border-border rounded-md bg-background text-sm font-mono",
-									placeholder: "[data-tour='agents-tabs']"
-								})] }), /* @__PURE__ */ y("div", { children: [/* @__PURE__ */ v("label", {
+									placeholder: "[data-tour='agents-tabs']",
+									"aria-label": "Wait for selector"
+								})] }), /* @__PURE__ */ _("div", { children: [/* @__PURE__ */ g("label", {
 									className: "block text-sm font-medium mb-2",
+									htmlFor: "step-editor-wait-event",
 									children: "Wait for event"
-								}), /* @__PURE__ */ v("input", {
+								}), /* @__PURE__ */ g("input", {
+									id: "step-editor-wait-event",
 									type: "text",
-									value: I.waitForEvent || "",
-									onChange: (e) => B(I.id, "waitForEvent", e.target.value || void 0),
+									value: P.waitForEvent || "",
+									onChange: (e) => R(P.id, "waitForEvent", e.target.value || void 0),
 									className: "w-full px-3 py-2 border border-border rounded-md bg-background text-sm",
-									placeholder: "tour:ready"
+									placeholder: "tour:ready",
+									"aria-label": "Wait for event"
 								})] })]
 							}),
-							/* @__PURE__ */ y("div", { children: [/* @__PURE__ */ v("label", {
+							/* @__PURE__ */ _("div", { children: [/* @__PURE__ */ g("label", {
 								className: "block text-sm font-medium mb-2",
+								htmlFor: "step-editor-skip-conditions",
 								children: "Skip conditions (JSON)"
-							}), /* @__PURE__ */ v("textarea", {
-								value: I.skipConditions ? JSON.stringify(I.skipConditions, null, 2) : "",
+							}), /* @__PURE__ */ g("textarea", {
+								id: "step-editor-skip-conditions",
+								value: P.skipConditions ? JSON.stringify(P.skipConditions, null, 2) : "",
 								onChange: (e) => {
 									let t = e.target.value.trim();
 									if (!t) {
-										B(I.id, "skipConditions", void 0);
+										R(P.id, "skipConditions", void 0);
 										return;
 									}
 									try {
-										B(I.id, "skipConditions", JSON.parse(t));
+										R(P.id, "skipConditions", JSON.parse(t));
 									} catch {
-										B(I.id, "skipConditions", t);
+										R(P.id, "skipConditions", t);
 									}
 								},
 								rows: 4,
 								className: "w-full px-3 py-2 border border-border rounded-md bg-background text-sm font-mono",
-								placeholder: "{\"selectorMissing\":\"[data-tour=\\\"missing\\\"]\"}"
+								placeholder: "{\"selectorMissing\":\"[data-tour=\\\"missing\\\"]\"}",
+								"aria-label": "Skip conditions (JSON)"
 							})] }),
-							/* @__PURE__ */ y("div", {
+							/* @__PURE__ */ _("div", {
 								className: "border border-border rounded-md p-4 space-y-4",
 								children: [
-									/* @__PURE__ */ y("div", {
+									/* @__PURE__ */ _("div", {
 										className: "flex items-center gap-2",
-										children: [/* @__PURE__ */ v(p, { size: 18 }), /* @__PURE__ */ v("h3", {
+										children: [/* @__PURE__ */ g(d, { size: 18 }), /* @__PURE__ */ g("h3", {
 											className: "text-sm font-semibold",
 											children: "Step media"
 										})]
 									}),
-									I.media && I.media.length > 0 ? /* @__PURE__ */ v("div", {
+									P.media && P.media.length > 0 ? /* @__PURE__ */ g("div", {
 										className: "space-y-2",
-										children: I.media.map((e) => /* @__PURE__ */ y("div", {
+										children: P.media.map((e) => /* @__PURE__ */ _("div", {
 											className: "flex items-center justify-between rounded-md border border-border p-2 text-sm",
-											children: [/* @__PURE__ */ y("div", { children: [/* @__PURE__ */ v("div", {
+											children: [/* @__PURE__ */ _("div", { children: [/* @__PURE__ */ g("div", {
 												className: "font-medium",
 												children: e.media.name
-											}), /* @__PURE__ */ v("div", {
+											}), /* @__PURE__ */ g("div", {
 												className: "text-xs text-muted-foreground",
 												children: e.position
-											})] }), /* @__PURE__ */ v("span", {
+											})] }), /* @__PURE__ */ g("span", {
 												className: "text-xs text-muted-foreground",
 												children: e.media.type
 											})]
 										}, e.id))
-									}) : /* @__PURE__ */ v("p", {
+									}) : /* @__PURE__ */ g("p", {
 										className: "text-sm text-muted-foreground",
 										children: "No media attached to this step yet."
 									}),
-									/* @__PURE__ */ y("div", {
+									/* @__PURE__ */ _("div", {
 										className: "grid grid-cols-1 gap-3 sm:grid-cols-[minmax(0,1fr)_160px_auto]",
 										children: [
-											/* @__PURE__ */ y("select", {
-												value: J,
-												onChange: (e) => Y(e.target.value),
+											/* @__PURE__ */ _("select", {
+												value: q,
+												onChange: (e) => J(e.target.value),
 												className: "w-full px-3 py-2 border border-border rounded-md bg-background text-sm",
-												children: [/* @__PURE__ */ v("option", {
+												"aria-label": "Select media to attach",
+												children: [/* @__PURE__ */ g("option", {
 													value: "",
-													children: W ? "Loading media..." : "Select uploaded media"
-												}), se.map((e) => /* @__PURE__ */ y("option", {
+													children: U ? "Loading media..." : "Select uploaded media"
+												}), B.map((e) => /* @__PURE__ */ _("option", {
 													value: e.id,
 													children: [
 														e.name,
@@ -524,29 +576,30 @@ function S() {
 													]
 												}, e.id))]
 											}),
-											/* @__PURE__ */ y("select", {
-												value: X,
-												onChange: (e) => Z(e.target.value),
+											/* @__PURE__ */ _("select", {
+												value: Y,
+												onChange: (e) => X(e.target.value),
 												className: "w-full px-3 py-2 border border-border rounded-md bg-background text-sm",
+												"aria-label": "Attachment position",
 												children: [
-													/* @__PURE__ */ v("option", {
+													/* @__PURE__ */ g("option", {
 														value: "header",
 														children: "Header"
 													}),
-													/* @__PURE__ */ v("option", {
+													/* @__PURE__ */ g("option", {
 														value: "body",
 														children: "Body"
 													}),
-													/* @__PURE__ */ v("option", {
+													/* @__PURE__ */ g("option", {
 														value: "footer",
 														children: "Footer"
 													})
 												]
 											}),
-											/* @__PURE__ */ v("button", {
+											/* @__PURE__ */ g("button", {
 												type: "button",
-												onClick: fe,
-												disabled: le || !J,
+												onClick: pe,
+												disabled: ue || !q,
 												className: "px-4 py-2 min-h-[44px] border border-border rounded-md hover:bg-accent disabled:opacity-50",
 												children: "Attach"
 											})
@@ -555,28 +608,29 @@ function S() {
 								]
 							})
 						]
-					}) : /* @__PURE__ */ y("div", {
+					}) : /* @__PURE__ */ _("div", {
 						className: "flex flex-col items-center justify-center h-full text-center px-4",
 						children: [
-							/* @__PURE__ */ v("div", {
-								className: "w-16 h-16 bg-muted rounded-full flex items-center justify-center mb-4",
-								children: /* @__PURE__ */ v(m, {
+							/* @__PURE__ */ g("div", {
+								className: "size-16 bg-muted rounded-full flex items-center justify-center mb-4",
+								children: /* @__PURE__ */ g(f, {
 									size: 24,
 									className: "text-muted-foreground"
 								})
 							}),
-							/* @__PURE__ */ v("p", {
+							/* @__PURE__ */ g("p", {
 								className: "text-muted-foreground mb-2",
-								children: S("stepEditor.noStepSelected")
+								children: b("stepEditor.noStepSelected")
 							}),
-							/* @__PURE__ */ v("p", {
+							/* @__PURE__ */ g("p", {
 								className: "text-sm text-muted-foreground mb-4",
-								children: F.length > 0 ? S("stepEditor.selectStepToEdit") : S("stepEditor.createFirstStep")
+								children: N.length > 0 ? b("stepEditor.selectStepToEdit") : b("stepEditor.createFirstStep")
 							}),
-							F.length === 0 && O && /* @__PURE__ */ y("button", {
-								onClick: $,
+							N.length === 0 && E && /* @__PURE__ */ _("button", {
+								type: "button",
+								onClick: Q,
 								className: "px-4 py-2 min-h-[44px] bg-primary text-primary-foreground rounded-md hover:bg-primary/90 flex items-center gap-2",
-								children: [/* @__PURE__ */ v(m, { size: 18 }), S("stepEditor.addFirstStep")]
+								children: [/* @__PURE__ */ g(f, { size: 18 }), b("stepEditor.addFirstStep")]
 							})
 						]
 					})
@@ -586,6 +640,6 @@ function S() {
 	});
 }
 //#endregion
-export { S as StepEditorPage };
+export { b as StepEditorPage };
 
 //# sourceMappingURL=StepEditorPage.js.map