@burdenoff/microfe-tours 2026.510.112

package/dist/tours/pages/StepEditorPage.js

@@ -0,0 +1,586 @@
+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 { 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 { jsx as v, jsxs as y } from "react/jsx-runtime";
+import { useNavigate as b, useParams as x } from "react-router-dom";
+//#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);
+	s(() => {
+		let e = () => {
+			let e = window.innerWidth < 768;
+			q(e), e || G(!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);
+		}
+	}, [
+		w,
+		N,
+		F,
+		P?.id
+	]);
+	let Q = () => {
+		I();
+	}, $ = async () => {
+		if (C) try {
+			await j(C, N);
+		} catch (e) {
+			console.error("Failed to save steps:", e);
+		}
+	}, se = () => {
+		re(`${ie}/${C}/edit`);
+	}, ce = async () => {
+		if (!(!P || !C || !J)) {
+			if (P.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);
+			} finally {
+				Z(!1);
+			}
+		}
+	}, le = (e) => {
+		F(e), K && G(!1);
+	};
+	return /* @__PURE__ */ y("div", {
+		className: "flex flex-col h-full bg-background",
+		children: [/* @__PURE__ */ y("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", {
+				className: "flex items-center gap-3",
+				children: [/* @__PURE__ */ v("button", {
+					onClick: se,
+					className: "p-2 hover:bg-accent rounded-md shrink-0",
+					"aria-label": S("stepEditor.goBack"),
+					children: /* @__PURE__ */ v(te, { 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"),
+							" - ",
+							S("stepEditor.stepsLabel")
+						]
+					}), /* @__PURE__ */ y("p", {
+						className: "text-xs sm:text-sm text-muted-foreground",
+						children: [
+							N.length,
+							" ",
+							S("stepEditor.stepsCount")
+						]
+					})]
+				})]
+			}), /* @__PURE__ */ y("div", {
+				className: "flex items-center gap-2 sm:gap-3 ml-auto",
+				children: [
+					K && /* @__PURE__ */ y("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(p, { size: 18 }),
+							/* @__PURE__ */ v("span", {
+								className: "text-sm",
+								children: S("stepEditor.steps")
+							}),
+							N.length > 0 && /* @__PURE__ */ v("span", {
+								className: "px-1.5 py-0.5 text-xs bg-primary/20 rounded-full",
+								children: N.length
+							})
+						]
+					}),
+					E && /* @__PURE__ */ y("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(h, { size: 18 }), /* @__PURE__ */ v("span", {
+							className: "hidden xs:inline",
+							children: S("stepEditor.addStep")
+						})]
+					}),
+					/* @__PURE__ */ v(ee, {
+						permission: n.TOUR_STEP_UPDATE,
+						children: /* @__PURE__ */ y("button", {
+							onClick: $,
+							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(g, { size: 18 }), /* @__PURE__ */ v("span", {
+								className: "hidden xs:inline",
+								children: S(M ? "stepEditor.saving" : "stepEditor.save")
+							})]
+						})
+					})
+				]
+			})]
+		}), /* @__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)
+				}),
+				/* @__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"}
+            border-r border-border overflow-y-auto bg-card
+          `,
+					children: [K && /* @__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 })
+						})]
+					}), /* @__PURE__ */ v("div", {
+						className: "p-3 sm:p-4 space-y-2",
+						children: N.length === 0 ? /* @__PURE__ */ y("div", {
+							className: "text-center py-8 text-muted-foreground",
+							children: [/* @__PURE__ */ v("p", {
+								className: "text-sm",
+								children: S("stepEditor.noStepsYet")
+							}), /* @__PURE__ */ v("p", {
+								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"}`,
+							children: /* @__PURE__ */ y("div", {
+								className: "flex items-start justify-between gap-2",
+								children: [/* @__PURE__ */ y("div", {
+									className: "flex-1 min-w-0",
+									children: [
+										/* @__PURE__ */ y("div", {
+											className: "text-xs text-muted-foreground mb-1",
+											children: [
+												S("stepEditor.stepNumber"),
+												" ",
+												t + 1
+											]
+										}),
+										/* @__PURE__ */ v("div", {
+											className: "font-medium text-sm truncate",
+											children: e.title || S("stepEditor.untitled")
+										}),
+										e.targetSelector && /* @__PURE__ */ v("div", {
+											className: "text-xs text-muted-foreground mt-1 truncate font-mono",
+											children: e.targetSelector
+										})
+									]
+								}), O && /* @__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);
+											},
+											className: "p-1.5 hover:bg-accent rounded",
+											title: "Move step up",
+											"aria-label": "Move step up",
+											disabled: t === 0,
+											children: /* @__PURE__ */ v(f, { size: 14 })
+										}),
+										/* @__PURE__ */ v("button", {
+											onClick: (e) => {
+												e.stopPropagation(), t < N.length - 1 && z(t, t + 1);
+											},
+											className: "p-1.5 hover:bg-accent rounded",
+											title: "Move step down",
+											"aria-label": "Move step down",
+											disabled: t === N.length - 1,
+											children: /* @__PURE__ */ v(l, { size: 14 })
+										}),
+										/* @__PURE__ */ v("button", {
+											onClick: (t) => {
+												t.stopPropagation(), L(e.id);
+											},
+											className: "p-1.5 hover:bg-destructive/10 rounded text-destructive",
+											title: S("stepEditor.deleteStep"),
+											"aria-label": S("stepEditor.deleteStep"),
+											children: /* @__PURE__ */ v(_, { size: 14 })
+										})
+									]
+								})]
+							})
+						}, e.id))
+					})]
+				}),
+				/* @__PURE__ */ v("div", {
+					className: "flex-1 overflow-y-auto p-4 sm:p-6",
+					children: P ? /* @__PURE__ */ y("div", {
+						className: "max-w-2xl mx-auto space-y-4 sm:space-y-6",
+						children: [
+							K && N.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]);
+										},
+										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 })
+									}),
+									/* @__PURE__ */ y("span", {
+										className: "text-sm text-muted-foreground",
+										children: [
+											S("stepEditor.stepNumber"),
+											" ",
+											N.findIndex((e) => e.id === P.id) + 1,
+											" ",
+											S("stepEditor.of"),
+											" ",
+											N.length
+										]
+									}),
+									/* @__PURE__ */ v("button", {
+										onClick: () => {
+											let e = N.findIndex((e) => e.id === P.id);
+											e < N.length - 1 && F(N[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 })
+									})
+								]
+							}),
+							/* @__PURE__ */ v("h2", {
+								className: "text-lg sm:text-xl font-semibold",
+								children: S("stepEditor.editStep")
+							}),
+							/* @__PURE__ */ y("div", { children: [/* @__PURE__ */ y("label", {
+								className: "block text-sm font-medium mb-2",
+								children: [S("stepEditor.stepTitle"), " *"]
+							}), /* @__PURE__ */ v("input", {
+								type: "text",
+								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")
+							})] }),
+							/* @__PURE__ */ y("div", { children: [/* @__PURE__ */ y("label", {
+								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),
+								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")
+							})] }),
+							/* @__PURE__ */ y("div", { children: [
+								/* @__PURE__ */ y("label", {
+									className: "block text-sm font-medium mb-2",
+									children: [
+										S("stepEditor.cssSelector"),
+										" *",
+										/* @__PURE__ */ y("span", {
+											className: "text-muted-foreground font-normal ml-2",
+											children: [
+												"(",
+												S("stepEditor.targetElement"),
+												")"
+											]
+										})
+									]
+								}),
+								/* @__PURE__ */ v("input", {
+									type: "text",
+									value: P.targetSelector || "",
+									onChange: (e) => R(P.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"
+								}),
+								/* @__PURE__ */ v("p", {
+									className: "text-xs text-muted-foreground mt-1",
+									children: S("stepEditor.dataTourHint")
+								})
+							] }),
+							/* @__PURE__ */ y("div", { children: [/* @__PURE__ */ v("label", {
+								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),
+								className: "w-full px-3 py-2 border border-border rounded-md bg-background text-sm sm:text-base",
+								children: [
+									/* @__PURE__ */ v("option", {
+										value: "AUTO",
+										children: S("stepEditor.placementAuto")
+									}),
+									/* @__PURE__ */ v("option", {
+										value: "TOP",
+										children: S("stepEditor.placementTop")
+									}),
+									/* @__PURE__ */ v("option", {
+										value: "BOTTOM",
+										children: S("stepEditor.placementBottom")
+									}),
+									/* @__PURE__ */ v("option", {
+										value: "LEFT",
+										children: S("stepEditor.placementLeft")
+									}),
+									/* @__PURE__ */ v("option", {
+										value: "RIGHT",
+										children: S("stepEditor.placementRight")
+									}),
+									/* @__PURE__ */ v("option", {
+										value: "CENTER",
+										children: S("stepEditor.placementCenter")
+									})
+								]
+							})] }),
+							/* @__PURE__ */ y("details", {
+								className: "border border-border rounded-md",
+								children: [/* @__PURE__ */ v("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", {
+									className: "p-4 pt-0 space-y-3 border-t border-border",
+									children: [
+										/* @__PURE__ */ v("p", {
+											className: "text-xs text-muted-foreground mb-3",
+											children: S("stepEditor.deviceSelectorHint")
+										}),
+										/* @__PURE__ */ y("div", { children: [/* @__PURE__ */ v("label", {
+											className: "block text-xs font-medium mb-1",
+											children: S("stepEditor.mobileSelector")
+										}), /* @__PURE__ */ v("input", {
+											type: "text",
+											value: P.targetSelectorMobile || "",
+											onChange: (e) => R(P.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"
+										})] }),
+										/* @__PURE__ */ y("div", { children: [/* @__PURE__ */ v("label", {
+											className: "block text-xs font-medium mb-1",
+											children: S("stepEditor.tabletSelector")
+										}), /* @__PURE__ */ v("input", {
+											type: "text",
+											value: P.targetSelectorTablet || "",
+											onChange: (e) => R(P.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"
+										})] }),
+										/* @__PURE__ */ y("div", { children: [/* @__PURE__ */ v("label", {
+											className: "block text-xs font-medium mb-1",
+											children: S("stepEditor.desktopSelector")
+										}), /* @__PURE__ */ v("input", {
+											type: "text",
+											value: P.targetSelectorDesktop || "",
+											onChange: (e) => R(P.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"
+										})] })
+									]
+								})]
+							}),
+							/* @__PURE__ */ y("div", {
+								className: "grid grid-cols-1 gap-4 sm:grid-cols-2",
+								children: [/* @__PURE__ */ y("label", {
+									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),
+										className: "w-4 h-4 rounded"
+									}), /* @__PURE__ */ y("div", { children: [/* @__PURE__ */ v("div", {
+										className: "text-sm font-medium",
+										children: "Require interaction"
+									}), /* @__PURE__ */ v("div", {
+										className: "text-xs text-muted-foreground",
+										children: "User must interact with the highlighted element before advancing."
+									})] })]
+								}), /* @__PURE__ */ y("div", { children: [/* @__PURE__ */ v("label", {
+									className: "block text-sm font-medium mb-2",
+									children: "Wait for timeout (ms)"
+								}), /* @__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),
+									className: "w-full px-3 py-2 border border-border rounded-md bg-background text-sm",
+									placeholder: "1500"
+								})] })]
+							}),
+							/* @__PURE__ */ y("div", {
+								className: "grid grid-cols-1 gap-4 sm:grid-cols-2",
+								children: [/* @__PURE__ */ y("div", { children: [/* @__PURE__ */ v("label", {
+									className: "block text-sm font-medium mb-2",
+									children: "Wait for selector"
+								}), /* @__PURE__ */ v("input", {
+									type: "text",
+									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", {
+									className: "block text-sm font-medium mb-2",
+									children: "Wait for event"
+								}), /* @__PURE__ */ v("input", {
+									type: "text",
+									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"
+								})] })]
+							}),
+							/* @__PURE__ */ y("div", { children: [/* @__PURE__ */ v("label", {
+								className: "block text-sm font-medium mb-2",
+								children: "Skip conditions (JSON)"
+							}), /* @__PURE__ */ v("textarea", {
+								value: P.skipConditions ? JSON.stringify(P.skipConditions, null, 2) : "",
+								onChange: (e) => {
+									let t = e.target.value.trim();
+									if (!t) {
+										R(P.id, "skipConditions", void 0);
+										return;
+									}
+									try {
+										R(P.id, "skipConditions", JSON.parse(t));
+									} catch {
+										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\\\"]\"}"
+							})] }),
+							/* @__PURE__ */ y("div", {
+								className: "border border-border rounded-md p-4 space-y-4",
+								children: [
+									/* @__PURE__ */ y("div", {
+										className: "flex items-center gap-2",
+										children: [/* @__PURE__ */ v(m, { size: 18 }), /* @__PURE__ */ v("h3", {
+											className: "text-sm font-semibold",
+											children: "Step media"
+										})]
+									}),
+									P.media && P.media.length > 0 ? /* @__PURE__ */ v("div", {
+										className: "space-y-2",
+										children: P.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",
+												children: e.media.name
+											}), /* @__PURE__ */ v("div", {
+												className: "text-xs text-muted-foreground",
+												children: e.position
+											})] }), /* @__PURE__ */ v("span", {
+												className: "text-xs text-muted-foreground",
+												children: e.media.type
+											})]
+										}, e.id))
+									}) : /* @__PURE__ */ v("p", {
+										className: "text-sm text-muted-foreground",
+										children: "No media attached to this step yet."
+									}),
+									/* @__PURE__ */ y("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),
+												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", {
+													value: e.id,
+													children: [
+														e.name,
+														" (",
+														e.type,
+														")"
+													]
+												}, e.id))]
+											}),
+											/* @__PURE__ */ y("select", {
+												value: X,
+												onChange: (e) => ae(e.target.value),
+												className: "w-full px-3 py-2 border border-border rounded-md bg-background text-sm",
+												children: [
+													/* @__PURE__ */ v("option", {
+														value: "header",
+														children: "Header"
+													}),
+													/* @__PURE__ */ v("option", {
+														value: "body",
+														children: "Body"
+													}),
+													/* @__PURE__ */ v("option", {
+														value: "footer",
+														children: "Footer"
+													})
+												]
+											}),
+											/* @__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",
+												children: "Attach"
+											})
+										]
+									})
+								]
+							})
+						]
+					}) : /* @__PURE__ */ y("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(h, {
+									size: 24,
+									className: "text-muted-foreground"
+								})
+							}),
+							/* @__PURE__ */ v("p", {
+								className: "text-muted-foreground mb-2",
+								children: S("stepEditor.noStepSelected")
+							}),
+							/* @__PURE__ */ v("p", {
+								className: "text-sm text-muted-foreground mb-4",
+								children: N.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")]
+							})
+						]
+					})
+				})
+			]
+		})]
+	});
+}
+//#endregion
+export { S as StepEditorPage };
+
+//# sourceMappingURL=StepEditorPage.js.map