@burdenoff/microfe-tours 2026.625.1 → 2026.626.1

package/dist/tours/pages/StepEditorPage.js

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