@burdenoff/microfe-tours 2026.519.1 → 2026.523.2

package/dist/tours/pages/StepEditorPage.js

@@ -2,65 +2,67 @@ 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 { useMediaLibrary as i } from "../hooks/useMediaLibrary.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 ee } from "@burdenoff/fe-libs/shared/components";
-import { ArrowLeft as te, ChevronDown as l, ChevronLeft as u, ChevronRight as d, ChevronUp as f, Menu as p, Paperclip as m, Plus as h, Save as g, Trash2 as _, X as ne } from "lucide-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";
 //#region src/tours/pages/StepEditorPage.tsx
 function S() {
-	let { tr: S } = r(), { tourId: C, stepId: w } = x(), re = b(), { basePath: ie = "/" } = e(), { 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 } = o(C), { steps: N, selectedStep: P, selectStep: F, createStep: I, deleteStep: L, updateStepField: R, moveStep: z } = a(), { media: B, fetchMedia: V, attachToStep: H, loading: U } = i(), [W, G] = c(!1), [K, q] = c(!1), [J, Y] = c(""), [X, ae] = c("body"), [oe, Z] = c(!1);
+	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(() => {
 		let e = () => {
 			let e = window.innerWidth < 768;
-			q(e), e || G(!1);
+			ce(e), e || K(!1);
 		};
 		return e(), window.addEventListener("resize", e), () => window.removeEventListener("resize", e);
 	}, []), s(() => {
-		C && A(C);
-	}, [C, A]), s(() => {
-		V();
-	}, [V]), s(() => {
-		let e = w || P?.id;
-		if (e && N.length > 0) {
-			let t = N.find((t) => t.id === e);
-			t && F(t);
+		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);
 		}
 	}, [
 		w,
-		N,
 		F,
-		P?.id
+		L,
+		I?.id
 	]);
-	let Q = () => {
-		I();
-	}, $ = async () => {
+	let $ = () => {
+		R();
+	}, ue = async () => {
 		if (C) try {
-			await j(C, N);
-		} catch (e) {
-			console.error("Failed to save steps:", e);
+			await N(C, F);
+		} catch {
+			i(E, "step.save", T);
 		}
-	}, se = () => {
-		re(`${ie}/${C}/edit`);
-	}, ce = async () => {
-		if (!(!P || !C || !J)) {
-			if (P.id.startsWith("temp_")) {
+	}, de = () => {
+		ae(`${oe}/${C}/edit`);
+	}, fe = async () => {
+		if (!(!I || !C || !J)) {
+			if (I.id.startsWith("temp_")) {
 				window.alert("Save your steps before attaching media to them.");
 				return;
 			}
 			try {
-				Z(!0), await H(P.id, J, X, (P.media?.length ?? 0) + 1), await A(C), Y("");
-			} catch (e) {
-				console.error("Failed to attach media:", e);
+				Q(!0), await U(I.id, J, X, (I.media?.length ?? 0) + 1), await M(C), Y("");
+			} catch {
+				i(E, "media.attach", T);
 			} finally {
-				Z(!1);
+				Q(!1);
 			}
 		}
-	}, le = (e) => {
-		F(e), K && G(!1);
+	}, pe = (e) => {
+		L(e), q && K(!1);
 	};
 	return /* @__PURE__ */ y("div", {
 		className: "flex flex-col h-full bg-background",
@@ -69,23 +71,23 @@ function S() {
 			children: [/* @__PURE__ */ y("div", {
 				className: "flex items-center gap-3",
 				children: [/* @__PURE__ */ v("button", {
-					onClick: se,
+					onClick: de,
 					className: "p-2 hover:bg-accent rounded-md shrink-0",
 					"aria-label": S("stepEditor.goBack"),
-					children: /* @__PURE__ */ v(te, { size: 20 })
+					children: /* @__PURE__ */ v(ne, { size: 20 })
 				}), /* @__PURE__ */ y("div", {
 					className: "flex-1 min-w-0",
 					children: [/* @__PURE__ */ y("h1", {
 						className: "text-base sm:text-lg font-semibold truncate",
 						children: [
-							k?.name || S("stepEditor.tourFallback"),
+							j?.name || S("stepEditor.tourFallback"),
 							" - ",
 							S("stepEditor.stepsLabel")
 						]
 					}), /* @__PURE__ */ y("p", {
 						className: "text-xs sm:text-sm text-muted-foreground",
 						children: [
-							N.length,
+							F.length,
 							" ",
 							S("stepEditor.stepsCount")
 						]
@@ -94,38 +96,38 @@ function S() {
 			}), /* @__PURE__ */ y("div", {
 				className: "flex items-center gap-2 sm:gap-3 ml-auto",
 				children: [
-					K && /* @__PURE__ */ y("button", {
-						onClick: () => G(!W),
+					q && /* @__PURE__ */ y("button", {
+						onClick: () => K(!G),
 						className: "px-3 py-2 border border-border rounded-md hover:bg-accent flex items-center gap-2 sm:hidden",
 						children: [
-							/* @__PURE__ */ v(p, { size: 18 }),
+							/* @__PURE__ */ v(f, { size: 18 }),
 							/* @__PURE__ */ v("span", {
 								className: "text-sm",
 								children: S("stepEditor.steps")
 							}),
-							N.length > 0 && /* @__PURE__ */ v("span", {
+							F.length > 0 && /* @__PURE__ */ v("span", {
 								className: "px-1.5 py-0.5 text-xs bg-primary/20 rounded-full",
-								children: N.length
+								children: F.length
 							})
 						]
 					}),
-					E && /* @__PURE__ */ y("button", {
-						onClick: Q,
+					O && /* @__PURE__ */ y("button", {
+						onClick: $,
 						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(h, { size: 18 }), /* @__PURE__ */ v("span", {
+						children: [/* @__PURE__ */ v(m, { size: 18 }), /* @__PURE__ */ v("span", {
 							className: "hidden xs:inline",
 							children: S("stepEditor.addStep")
 						})]
 					}),
-					/* @__PURE__ */ v(ee, {
+					/* @__PURE__ */ v(te, {
 						permission: n.TOUR_STEP_UPDATE,
 						children: /* @__PURE__ */ y("button", {
-							onClick: $,
-							disabled: M || !D,
+							onClick: ue,
+							disabled: P || !k,
 							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(g, { size: 18 }), /* @__PURE__ */ v("span", {
+							children: [/* @__PURE__ */ v(h, { size: 18 }), /* @__PURE__ */ v("span", {
 								className: "hidden xs:inline",
-								children: S(M ? "stepEditor.saving" : "stepEditor.save")
+								children: S(P ? "stepEditor.saving" : "stepEditor.save")
 							})]
 						})
 					})
@@ -134,29 +136,30 @@ function S() {
 		}), /* @__PURE__ */ y("div", {
 			className: "flex-1 flex overflow-hidden relative",
 			children: [
-				K && W && /* @__PURE__ */ v("div", {
-					className: "fixed inset-0 bg-black/50 z-40 md:hidden",
-					onClick: () => G(!1)
+				q && G && /* @__PURE__ */ v("div", {
+					className: "fixed inset-0 bg-foreground/40 z-40 md:hidden",
+					onClick: () => K(!1)
 				}),
 				/* @__PURE__ */ y("div", {
 					className: `
-            ${K ? "fixed inset-y-0 left-0 z-50 w-72 transform transition-transform duration-300" : "w-64 lg:w-80 shrink-0"}
-            ${K && !W ? "-translate-x-full" : "translate-x-0"}
+            ${q ? "fixed inset-y-0 left-0 z-50 w-[min(18rem,calc(100vw-2rem))] transform transition-transform duration-300" : "w-64 lg:w-80 shrink-0"}
+            ${q && !G ? "-translate-x-full" : "translate-x-0"}
             border-r border-border overflow-y-auto bg-card
           `,
-					children: [K && /* @__PURE__ */ y("div", {
+					children: [q && /* @__PURE__ */ y("div", {
 						className: "flex items-center justify-between p-4 border-b border-border sticky top-0 bg-card z-10",
 						children: [/* @__PURE__ */ v("h2", {
 							className: "font-semibold",
 							children: S("stepEditor.tourSteps")
 						}), /* @__PURE__ */ v("button", {
-							onClick: () => G(!1),
-							className: "p-2 hover:bg-accent rounded-md",
-							children: /* @__PURE__ */ v(ne, { size: 20 })
+							onClick: () => K(!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 })
 						})]
 					}), /* @__PURE__ */ v("div", {
 						className: "p-3 sm:p-4 space-y-2",
-						children: N.length === 0 ? /* @__PURE__ */ y("div", {
+						children: F.length === 0 ? /* @__PURE__ */ y("div", {
 							className: "text-center py-8 text-muted-foreground",
 							children: [/* @__PURE__ */ v("p", {
 								className: "text-sm",
@@ -165,9 +168,9 @@ function S() {
 								className: "text-xs mt-1",
 								children: S("stepEditor.clickAddStep")
 							})]
-						}) : N.map((e, t) => /* @__PURE__ */ v("div", {
-							onClick: () => le(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"}`,
+						}) : 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", {
 								className: "flex items-start justify-between gap-2",
 								children: [/* @__PURE__ */ y("div", {
@@ -190,37 +193,37 @@ function S() {
 											children: e.targetSelector
 										})
 									]
-								}), O && /* @__PURE__ */ y("div", {
+								}), A && /* @__PURE__ */ y("div", {
 									className: "flex items-center gap-1 shrink-0",
 									children: [
 										/* @__PURE__ */ v("button", {
 											onClick: (e) => {
-												e.stopPropagation(), t > 0 && z(t, t - 1);
+												e.stopPropagation(), t > 0 && V(t, t - 1);
 											},
-											className: "p-1.5 hover:bg-accent rounded",
+											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(f, { size: 14 })
+											children: /* @__PURE__ */ v(d, { size: 14 })
 										}),
 										/* @__PURE__ */ v("button", {
 											onClick: (e) => {
-												e.stopPropagation(), t < N.length - 1 && z(t, t + 1);
+												e.stopPropagation(), t < F.length - 1 && V(t, t + 1);
 											},
-											className: "p-1.5 hover:bg-accent rounded",
+											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 === N.length - 1,
-											children: /* @__PURE__ */ v(l, { size: 14 })
+											disabled: t === F.length - 1,
+											children: /* @__PURE__ */ v(re, { size: 14 })
 										}),
 										/* @__PURE__ */ v("button", {
 											onClick: (t) => {
-												t.stopPropagation(), L(e.id);
+												t.stopPropagation(), z(e.id);
 											},
-											className: "p-1.5 hover:bg-destructive/10 rounded text-destructive",
+											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(_, { size: 14 })
+											children: /* @__PURE__ */ v(g, { size: 14 })
 										})
 									]
 								})]
@@ -230,41 +233,43 @@ function S() {
 				}),
 				/* @__PURE__ */ v("div", {
 					className: "flex-1 overflow-y-auto p-4 sm:p-6",
-					children: P ? /* @__PURE__ */ y("div", {
+					children: I ? /* @__PURE__ */ y("div", {
 						className: "max-w-2xl mx-auto space-y-4 sm:space-y-6",
 						children: [
-							K && N.length > 1 && /* @__PURE__ */ y("div", {
+							q && F.length > 1 && /* @__PURE__ */ y("div", {
 								className: "flex items-center justify-between bg-muted/50 rounded-lg p-2 mb-4",
 								children: [
 									/* @__PURE__ */ v("button", {
 										onClick: () => {
-											let e = N.findIndex((e) => e.id === P.id);
-											e > 0 && F(N[e - 1]);
+											let e = F.findIndex((e) => e.id === I.id);
+											e > 0 && L(F[e - 1]);
 										},
-										disabled: N.findIndex((e) => e.id === P.id) === 0,
-										className: "p-2 hover:bg-accent rounded-md disabled:opacity-30",
-										children: /* @__PURE__ */ v(u, { size: 20 })
+										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": S("stepEditor.previousStep"),
+										children: /* @__PURE__ */ v(l, { size: 20 })
 									}),
 									/* @__PURE__ */ y("span", {
 										className: "text-sm text-muted-foreground",
 										children: [
 											S("stepEditor.stepNumber"),
 											" ",
-											N.findIndex((e) => e.id === P.id) + 1,
+											F.findIndex((e) => e.id === I.id) + 1,
 											" ",
 											S("stepEditor.of"),
 											" ",
-											N.length
+											F.length
 										]
 									}),
 									/* @__PURE__ */ v("button", {
 										onClick: () => {
-											let e = N.findIndex((e) => e.id === P.id);
-											e < N.length - 1 && F(N[e + 1]);
+											let e = F.findIndex((e) => e.id === I.id);
+											e < F.length - 1 && L(F[e + 1]);
 										},
-										disabled: N.findIndex((e) => e.id === P.id) === N.length - 1,
-										className: "p-2 hover:bg-accent rounded-md disabled:opacity-30",
-										children: /* @__PURE__ */ v(d, { size: 20 })
+										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": S("stepEditor.nextStep"),
+										children: /* @__PURE__ */ v(u, { size: 20 })
 									})
 								]
 							}),
@@ -277,8 +282,8 @@ function S() {
 								children: [S("stepEditor.stepTitle"), " *"]
 							}), /* @__PURE__ */ v("input", {
 								type: "text",
-								value: P.title,
-								onChange: (e) => R(P.id, "title", e.target.value),
+								value: I.title,
+								onChange: (e) => B(I.id, "title", e.target.value),
 								className: "w-full px-3 py-2 border border-border rounded-md bg-background text-sm sm:text-base",
 								placeholder: S("stepEditor.stepTitlePlaceholder")
 							})] }),
@@ -286,8 +291,8 @@ function S() {
 								className: "block text-sm font-medium mb-2",
 								children: [S("stepEditor.content"), " *"]
 							}), /* @__PURE__ */ v("textarea", {
-								value: P.content,
-								onChange: (e) => R(P.id, "content", e.target.value),
+								value: I.content,
+								onChange: (e) => B(I.id, "content", e.target.value),
 								rows: 4,
 								className: "w-full px-3 py-2 border border-border rounded-md bg-background text-sm sm:text-base resize-y min-h-[100px]",
 								placeholder: S("stepEditor.contentPlaceholder")
@@ -310,8 +315,8 @@ function S() {
 								}),
 								/* @__PURE__ */ v("input", {
 									type: "text",
-									value: P.targetSelector || "",
-									onChange: (e) => R(P.id, "targetSelector", e.target.value),
+									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"
 								}),
@@ -324,8 +329,8 @@ function S() {
 								className: "block text-sm font-medium mb-2",
 								children: S("stepEditor.tooltipPlacement")
 							}), /* @__PURE__ */ y("select", {
-								value: P.placement,
-								onChange: (e) => R(P.id, "placement", e.target.value),
+								value: I.placement,
+								onChange: (e) => B(I.id, "placement", e.target.value),
 								className: "w-full px-3 py-2 border border-border rounded-md bg-background text-sm sm:text-base",
 								children: [
 									/* @__PURE__ */ v("option", {
@@ -371,8 +376,8 @@ function S() {
 											children: S("stepEditor.mobileSelector")
 										}), /* @__PURE__ */ v("input", {
 											type: "text",
-											value: P.targetSelectorMobile || "",
-											onChange: (e) => R(P.id, "targetSelectorMobile", e.target.value),
+											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"
 										})] }),
@@ -381,8 +386,8 @@ function S() {
 											children: S("stepEditor.tabletSelector")
 										}), /* @__PURE__ */ v("input", {
 											type: "text",
-											value: P.targetSelectorTablet || "",
-											onChange: (e) => R(P.id, "targetSelectorTablet", e.target.value),
+											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"
 										})] }),
@@ -391,8 +396,8 @@ function S() {
 											children: S("stepEditor.desktopSelector")
 										}), /* @__PURE__ */ v("input", {
 											type: "text",
-											value: P.targetSelectorDesktop || "",
-											onChange: (e) => R(P.id, "targetSelectorDesktop", e.target.value),
+											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"
 										})] })
@@ -405,8 +410,8 @@ function S() {
 									className: "flex items-center gap-3 cursor-pointer rounded-md border border-border p-3",
 									children: [/* @__PURE__ */ v("input", {
 										type: "checkbox",
-										checked: P.requireInteraction ?? !1,
-										onChange: (e) => R(P.id, "requireInteraction", e.target.checked),
+										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", {
 										className: "text-sm font-medium",
@@ -421,8 +426,8 @@ function S() {
 								}), /* @__PURE__ */ v("input", {
 									type: "number",
 									min: "0",
-									value: P.waitForTimeout ?? "",
-									onChange: (e) => R(P.id, "waitForTimeout", e.target.value ? Number(e.target.value) : void 0),
+									value: I.waitForTimeout ?? "",
+									onChange: (e) => B(I.id, "waitForTimeout", e.target.value ? Number(e.target.value) : void 0),
 									className: "w-full px-3 py-2 border border-border rounded-md bg-background text-sm",
 									placeholder: "1500"
 								})] })]
@@ -434,8 +439,8 @@ function S() {
 									children: "Wait for selector"
 								}), /* @__PURE__ */ v("input", {
 									type: "text",
-									value: P.waitForSelector || "",
-									onChange: (e) => R(P.id, "waitForSelector", e.target.value || void 0),
+									value: I.waitForSelector || "",
+									onChange: (e) => B(I.id, "waitForSelector", e.target.value || void 0),
 									className: "w-full px-3 py-2 border border-border rounded-md bg-background text-sm font-mono",
 									placeholder: "[data-tour='agents-tabs']"
 								})] }), /* @__PURE__ */ y("div", { children: [/* @__PURE__ */ v("label", {
@@ -443,8 +448,8 @@ function S() {
 									children: "Wait for event"
 								}), /* @__PURE__ */ v("input", {
 									type: "text",
-									value: P.waitForEvent || "",
-									onChange: (e) => R(P.id, "waitForEvent", e.target.value || void 0),
+									value: I.waitForEvent || "",
+									onChange: (e) => B(I.id, "waitForEvent", e.target.value || void 0),
 									className: "w-full px-3 py-2 border border-border rounded-md bg-background text-sm",
 									placeholder: "tour:ready"
 								})] })]
@@ -453,17 +458,17 @@ function S() {
 								className: "block text-sm font-medium mb-2",
 								children: "Skip conditions (JSON)"
 							}), /* @__PURE__ */ v("textarea", {
-								value: P.skipConditions ? JSON.stringify(P.skipConditions, null, 2) : "",
+								value: I.skipConditions ? JSON.stringify(I.skipConditions, null, 2) : "",
 								onChange: (e) => {
 									let t = e.target.value.trim();
 									if (!t) {
-										R(P.id, "skipConditions", void 0);
+										B(I.id, "skipConditions", void 0);
 										return;
 									}
 									try {
-										R(P.id, "skipConditions", JSON.parse(t));
+										B(I.id, "skipConditions", JSON.parse(t));
 									} catch {
-										R(P.id, "skipConditions", t);
+										B(I.id, "skipConditions", t);
 									}
 								},
 								rows: 4,
@@ -475,14 +480,14 @@ function S() {
 								children: [
 									/* @__PURE__ */ y("div", {
 										className: "flex items-center gap-2",
-										children: [/* @__PURE__ */ v(m, { size: 18 }), /* @__PURE__ */ v("h3", {
+										children: [/* @__PURE__ */ v(p, { size: 18 }), /* @__PURE__ */ v("h3", {
 											className: "text-sm font-semibold",
 											children: "Step media"
 										})]
 									}),
-									P.media && P.media.length > 0 ? /* @__PURE__ */ v("div", {
+									I.media && I.media.length > 0 ? /* @__PURE__ */ v("div", {
 										className: "space-y-2",
-										children: P.media.map((e) => /* @__PURE__ */ y("div", {
+										children: I.media.map((e) => /* @__PURE__ */ y("div", {
 											className: "flex items-center justify-between rounded-md border border-border p-2 text-sm",
 											children: [/* @__PURE__ */ y("div", { children: [/* @__PURE__ */ v("div", {
 												className: "font-medium",
@@ -508,8 +513,8 @@ function S() {
 												className: "w-full px-3 py-2 border border-border rounded-md bg-background text-sm",
 												children: [/* @__PURE__ */ v("option", {
 													value: "",
-													children: U ? "Loading media..." : "Select uploaded media"
-												}), B.map((e) => /* @__PURE__ */ y("option", {
+													children: W ? "Loading media..." : "Select uploaded media"
+												}), se.map((e) => /* @__PURE__ */ y("option", {
 													value: e.id,
 													children: [
 														e.name,
@@ -521,7 +526,7 @@ function S() {
 											}),
 											/* @__PURE__ */ y("select", {
 												value: X,
-												onChange: (e) => ae(e.target.value),
+												onChange: (e) => Z(e.target.value),
 												className: "w-full px-3 py-2 border border-border rounded-md bg-background text-sm",
 												children: [
 													/* @__PURE__ */ v("option", {
@@ -540,9 +545,9 @@ function S() {
 											}),
 											/* @__PURE__ */ v("button", {
 												type: "button",
-												onClick: ce,
-												disabled: oe || !J,
-												className: "px-4 py-2 border border-border rounded-md hover:bg-accent disabled:opacity-50",
+												onClick: fe,
+												disabled: le || !J,
+												className: "px-4 py-2 min-h-[44px] border border-border rounded-md hover:bg-accent disabled:opacity-50",
 												children: "Attach"
 											})
 										]
@@ -555,7 +560,7 @@ function S() {
 						children: [
 							/* @__PURE__ */ v("div", {
 								className: "w-16 h-16 bg-muted rounded-full flex items-center justify-center mb-4",
-								children: /* @__PURE__ */ v(h, {
+								children: /* @__PURE__ */ v(m, {
 									size: 24,
 									className: "text-muted-foreground"
 								})
@@ -566,12 +571,12 @@ function S() {
 							}),
 							/* @__PURE__ */ v("p", {
 								className: "text-sm text-muted-foreground mb-4",
-								children: N.length > 0 ? S("stepEditor.selectStepToEdit") : S("stepEditor.createFirstStep")
+								children: F.length > 0 ? S("stepEditor.selectStepToEdit") : S("stepEditor.createFirstStep")
 							}),
-							N.length === 0 && E && /* @__PURE__ */ y("button", {
-								onClick: Q,
-								className: "px-4 py-2 bg-primary text-primary-foreground rounded-md hover:bg-primary/90 flex items-center gap-2",
-								children: [/* @__PURE__ */ v(h, { size: 18 }), S("stepEditor.addFirstStep")]
+							F.length === 0 && O && /* @__PURE__ */ y("button", {
+								onClick: $,
+								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")]
 							})
 						]
 					})