@burdenoff/microfe-tours 2026.720.1 → 2026.720.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (13) hide show
  1. package/dist/tours/components/MarkdownEditor.js +144 -0
  2. package/dist/tours/components/MarkdownEditor.js.map +1 -0
  3. package/dist/tours/pages/MyToursPage.js +66 -63
  4. package/dist/tours/pages/MyToursPage.js.map +1 -1
  5. package/dist/tours/pages/StepEditorPage.js +219 -222
  6. package/dist/tours/pages/StepEditorPage.js.map +1 -1
  7. package/dist/tours/pages/TourBuilderPage.js +76 -79
  8. package/dist/tours/pages/TourBuilderPage.js.map +1 -1
  9. package/dist/tours/pages/TourPreviewPage.js +112 -111
  10. package/dist/tours/pages/TourPreviewPage.js.map +1 -1
  11. package/dist/tours/pages/ToursListPage.js +85 -84
  12. package/dist/tours/pages/ToursListPage.js.map +1 -1
  13. package/package.json +2 -2
package/dist/tours/pages/StepEditorPage.js CHANGED
@@ -3,186 +3,187 @@ import { useToursPermissionAccess as t } from "../hooks/useToursPermissionAccess
3
3
  import { TOUR_PERMISSIONS as n } from "../../constants/permissions.js";
4
4
  import { useToursI18n as ee } from "../i18n.js";
5
5
  import { emitToursApiFailed as r } from "../telemetry.js";
6
- import { useMediaLibrary as i } from "../hooks/useMediaLibrary.js";
6
+ import { useMediaLibrary as te } from "../hooks/useMediaLibrary.js";
7
+ import { MarkdownEditor as i } from "../components/MarkdownEditor.js";
7
8
  import { useStepSequencer as a } from "../hooks/useStepSequencer.js";
8
- import { useTourBuilder as te } from "../hooks/useTourBuilder.js";
9
+ import { useTourBuilder as ne } from "../hooks/useTourBuilder.js";
9
10
  import { useEffect as o, useState as s } from "react";
10
- import { PermissionGate as c } from "@burdenoff/fe-libs/shared/components";
11
- 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";
12
- import { jsx as _, jsxs as v } from "react/jsx-runtime";
13
- import { useNavigate as ae, useParams as y } from "react-router-dom";
14
- import { Button as b, GlassCard as x, IllustratedEmptyState as S, OptionalFields as oe, PagePurpose as se } from "@burdenoff/fe-libs/ui";
15
- import { useEventBus as ce } from "@burdenoff/fe-libs/shared/events";
11
+ import { PermissionGate as re } from "@burdenoff/fe-libs/shared/components";
12
+ import { ArrowLeft as c, ChevronDown as l, ChevronLeft as u, ChevronRight as d, ChevronUp as f, Menu as p, Paperclip as m, Plus as h, Save as g, Trash2 as _, X as v } from "lucide-react";
13
+ import { jsx as y, jsxs as b } from "react/jsx-runtime";
14
+ import { useNavigate as ie, useParams as ae } from "react-router-dom";
15
+ import { Button as x, GlassCard as oe, IllustratedEmptyState as se, OptionalFields as ce, PagePurpose as le } from "@burdenoff/fe-libs/ui";
16
+ import { useEventBus as ue } from "@burdenoff/fe-libs/shared/events";
16
17
  //#region src/tours/pages/StepEditorPage.tsx
17
- function C() {
18
- 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);
18
+ function S() {
19
+ let { tr: S } = ee(), { tourId: C, stepId: w } = ae(), T = ie(), E = e(), { basePath: D = "/" } = E, O = ue(), { 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 } = ne(C), { steps: L, selectedStep: R, selectStep: z, createStep: de, deleteStep: B, updateStepField: V, moveStep: H } = a(), { media: fe, fetchMedia: U, attachToStep: pe, loading: me } = te(), [W, G] = s(!1), [K, he] = s(() => typeof window < "u" && window.innerWidth < 768), [q, J] = s(""), [Y, ge] = s("body"), [_e, X] = s(!1);
19
20
  o(() => {
20
21
  let e = () => {
21
22
  let e = window.innerWidth < 768;
22
- pe(e), e || K(!1);
23
+ he(e), e || G(!1);
23
24
  };
24
25
  return window.addEventListener("resize", e), () => window.removeEventListener("resize", e);
25
26
  }, []), o(() => {
26
- w && P(w);
27
- }, [w, P]), o(() => {
28
- W();
29
- }, [W]), o(() => {
30
- let e = T || R?.id;
27
+ C && P(C);
28
+ }, [C, P]), o(() => {
29
+ U();
30
+ }, [U]), o(() => {
31
+ let e = w || R?.id;
31
32
  if (e && L.length > 0) {
32
33
  let t = L.find((t) => t.id === e);
33
34
  t && z(t);
34
35
  }
35
36
  }, [
36
- T,
37
+ w,
37
38
  L,
38
39
  z,
39
40
  R?.id
40
41
  ]);
41
- let Q = () => {
42
- B();
43
- }, ge = async () => {
44
- if (w) try {
45
- await F(w, L);
42
+ let Z = () => {
43
+ de();
44
+ }, Q = async () => {
45
+ if (C) try {
46
+ await F(C, L);
46
47
  } catch {
47
48
  r(O, "step.save", E);
48
49
  }
49
- }, _e = () => {
50
- le(`${D}/${w}/edit`);
51
- }, ve = async () => {
52
- if (!(!R || !w || !J)) {
50
+ }, ve = () => {
51
+ T(`${D}/${C}/edit`);
52
+ }, ye = async () => {
53
+ if (!(!R || !C || !q)) {
53
54
  if (R.id.startsWith("temp_")) {
54
55
  window.alert("Save your steps before attaching media to them.");
55
56
  return;
56
57
  }
57
58
  try {
58
- Z(!0), await de(R.id, J, X, (R.media?.length ?? 0) + 1), await P(w), Y("");
59
+ X(!0), await pe(R.id, q, Y, (R.media?.length ?? 0) + 1), await P(C), J("");
59
60
  } catch {
60
61
  r(O, "media.attach", E);
61
62
  } finally {
62
- Z(!1);
63
+ X(!1);
63
64
  }
64
65
  }
65
66
  }, $ = (e) => {
66
- z(e), q && K(!1);
67
+ z(e), K && G(!1);
67
68
  };
68
- return /* @__PURE__ */ v("div", {
69
+ return /* @__PURE__ */ b("div", {
69
70
  className: "flex flex-col h-full bg-bg-surface",
70
71
  children: [
71
- /* @__PURE__ */ v("div", {
72
+ /* @__PURE__ */ b("div", {
72
73
  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",
73
- children: [/* @__PURE__ */ v("div", {
74
+ children: [/* @__PURE__ */ b("div", {
74
75
  className: "flex items-center gap-3",
75
- children: [/* @__PURE__ */ _("button", {
76
+ children: [/* @__PURE__ */ y("button", {
76
77
  type: "button",
77
- onClick: _e,
78
+ onClick: ve,
78
79
  className: "p-2 hover:bg-accent rounded-md shrink-0",
79
- "aria-label": C("stepEditor.goBack"),
80
- children: /* @__PURE__ */ _(l, { size: 20 })
81
- }), /* @__PURE__ */ v("div", {
80
+ "aria-label": S("stepEditor.goBack"),
81
+ children: /* @__PURE__ */ y(c, { size: 20 })
82
+ }), /* @__PURE__ */ b("div", {
82
83
  className: "flex-1 min-w-0",
83
- children: [/* @__PURE__ */ v("h1", {
84
+ children: [/* @__PURE__ */ b("h1", {
84
85
  className: "text-base sm:text-lg font-semibold truncate",
85
86
  children: [
86
- N?.name || C("stepEditor.tourFallback"),
87
+ N?.name || S("stepEditor.tourFallback"),
87
88
  " - ",
88
- C("stepEditor.stepsLabel")
89
+ S("stepEditor.stepsLabel")
89
90
  ]
90
- }), /* @__PURE__ */ v("p", {
91
+ }), /* @__PURE__ */ b("p", {
91
92
  className: "text-xs sm:text-sm text-text-secondary",
92
93
  children: [
93
94
  L.length,
94
95
  " ",
95
- C("stepEditor.stepsCount")
96
+ S("stepEditor.stepsCount")
96
97
  ]
97
98
  })]
98
99
  })]
99
- }), /* @__PURE__ */ v("div", {
100
+ }), /* @__PURE__ */ b("div", {
100
101
  className: "flex items-center gap-2 sm:gap-3 ml-auto",
101
102
  children: [
102
- q && /* @__PURE__ */ v("button", {
103
+ K && /* @__PURE__ */ b("button", {
103
104
  type: "button",
104
- onClick: () => K(!G),
105
+ onClick: () => G(!W),
105
106
  className: "px-3 py-2 border border-border-subtle rounded-md hover:bg-accent flex items-center gap-2 sm:hidden",
106
107
  children: [
107
- /* @__PURE__ */ _(m, { size: 18 }),
108
- /* @__PURE__ */ _("span", {
108
+ /* @__PURE__ */ y(p, { size: 18 }),
109
+ /* @__PURE__ */ y("span", {
109
110
  className: "text-sm",
110
- children: C("stepEditor.steps")
111
+ children: S("stepEditor.steps")
111
112
  }),
112
- L.length > 0 && /* @__PURE__ */ _("span", {
113
+ L.length > 0 && /* @__PURE__ */ y("span", {
113
114
  className: "px-1.5 py-0.5 text-xs bg-action-primary-bg/20 rounded-full",
114
115
  children: L.length
115
116
  })
116
117
  ]
117
118
  }),
118
- A && /* @__PURE__ */ v("button", {
119
+ A && /* @__PURE__ */ b("button", {
119
120
  type: "button",
120
- onClick: Q,
121
+ onClick: Z,
121
122
  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",
122
- children: [/* @__PURE__ */ _(h, { size: 18 }), /* @__PURE__ */ _("span", {
123
+ children: [/* @__PURE__ */ y(h, { size: 18 }), /* @__PURE__ */ y("span", {
123
124
  className: "hidden xs:inline",
124
- children: C("stepEditor.addStep")
125
+ children: S("stepEditor.addStep")
125
126
  })]
126
127
  }),
127
- /* @__PURE__ */ _(c, {
128
+ /* @__PURE__ */ y(re, {
128
129
  permission: n.TOUR_STEP_UPDATE,
129
- children: /* @__PURE__ */ v(b, {
130
+ children: /* @__PURE__ */ b(x, {
130
131
  type: "button",
131
- onClick: ge,
132
+ onClick: Q,
132
133
  disabled: I || !j,
133
134
  className: "min-h-[44px] text-sm sm:text-base",
134
- children: [/* @__PURE__ */ _(re, { size: 18 }), /* @__PURE__ */ _("span", {
135
+ children: [/* @__PURE__ */ y(g, { size: 18 }), /* @__PURE__ */ y("span", {
135
136
  className: "hidden xs:inline",
136
- children: C(I ? "stepEditor.saving" : "stepEditor.save")
137
+ children: S(I ? "stepEditor.saving" : "stepEditor.save")
137
138
  })]
138
139
  })
139
140
  })
140
141
  ]
141
142
  })]
142
143
  }),
143
- /* @__PURE__ */ _("div", {
144
+ /* @__PURE__ */ y("div", {
144
145
  className: "px-3 sm:px-4 pt-3 sm:pt-4",
145
- children: /* @__PURE__ */ _(se, { children: C("stepEditor.purpose") })
146
+ children: /* @__PURE__ */ y(le, { children: S("stepEditor.purpose") })
146
147
  }),
147
- /* @__PURE__ */ v("div", {
148
+ /* @__PURE__ */ b("div", {
148
149
  className: "flex-1 flex overflow-hidden relative",
149
150
  children: [
150
- q && G && /* @__PURE__ */ _("button", {
151
+ K && W && /* @__PURE__ */ y("button", {
151
152
  type: "button",
152
- "aria-label": C("stepEditor.closeSteps"),
153
+ "aria-label": S("stepEditor.closeSteps"),
153
154
  className: "fixed inset-0 bg-foreground/40 z-40 md:hidden",
154
- onClick: () => K(!1)
155
+ onClick: () => G(!1)
155
156
  }),
156
- /* @__PURE__ */ v("div", {
157
+ /* @__PURE__ */ b("div", {
157
158
  className: `
158
- ${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"}
159
- ${q && !G ? "-translate-x-full" : "translate-x-0"}
159
+ ${K ? "fixed inset-y-0 left-0 z-50 w-[min(18rem,calc(100vw-2rem))] transform transition-transform duration-300" : "w-64 lg:w-80 shrink-0"}
160
+ ${K && !W ? "-translate-x-full" : "translate-x-0"}
160
161
  border-r border-border-subtle overflow-y-auto bg-bg-surface
161
162
  `,
162
- children: [q && /* @__PURE__ */ v("div", {
163
+ children: [K && /* @__PURE__ */ b("div", {
163
164
  className: "flex items-center justify-between p-4 border-b border-border-subtle sticky top-0 bg-bg-surface z-10",
164
- children: [/* @__PURE__ */ _("h2", {
165
+ children: [/* @__PURE__ */ y("h2", {
165
166
  className: "font-semibold",
166
- children: C("stepEditor.tourSteps")
167
- }), /* @__PURE__ */ _("button", {
167
+ children: S("stepEditor.tourSteps")
168
+ }), /* @__PURE__ */ y("button", {
168
169
  type: "button",
169
- onClick: () => K(!1),
170
+ onClick: () => G(!1),
170
171
  className: "p-2 min-h-[44px] min-w-[44px] hover:bg-accent rounded-md",
171
- "aria-label": C("stepEditor.closeSteps"),
172
- children: /* @__PURE__ */ _(g, { size: 20 })
172
+ "aria-label": S("stepEditor.closeSteps"),
173
+ children: /* @__PURE__ */ y(v, { size: 20 })
173
174
  })]
174
- }), /* @__PURE__ */ _("div", {
175
+ }), /* @__PURE__ */ y("div", {
175
176
  className: "p-3 sm:p-4 space-y-2",
176
- children: L.length === 0 ? /* @__PURE__ */ v("div", {
177
+ children: L.length === 0 ? /* @__PURE__ */ b("div", {
177
178
  className: "text-center py-8 text-text-secondary",
178
- children: [/* @__PURE__ */ _("p", {
179
+ children: [/* @__PURE__ */ y("p", {
179
180
  className: "text-sm",
180
- children: C("stepEditor.noStepsYet")
181
- }), /* @__PURE__ */ _("p", {
181
+ children: S("stepEditor.noStepsYet")
182
+ }), /* @__PURE__ */ y("p", {
182
183
  className: "text-xs mt-1",
183
- children: C("stepEditor.clickAddStep")
184
+ children: S("stepEditor.clickAddStep")
184
185
  })]
185
- }) : L.map((e, t) => /* @__PURE__ */ _("div", {
186
+ }) : L.map((e, t) => /* @__PURE__ */ y("div", {
186
187
  role: "button",
187
188
  tabIndex: 0,
188
189
  onClick: () => $(e),
@@ -190,32 +191,32 @@ function C() {
190
191
  (t.key === "Enter" || t.key === " ") && (t.preventDefault(), $(e));
191
192
  },
192
193
  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"}`,
193
- children: /* @__PURE__ */ v("div", {
194
+ children: /* @__PURE__ */ b("div", {
194
195
  className: "flex items-start justify-between gap-2",
195
- children: [/* @__PURE__ */ v("div", {
196
+ children: [/* @__PURE__ */ b("div", {
196
197
  className: "flex-1 min-w-0",
197
198
  children: [
198
- /* @__PURE__ */ v("div", {
199
+ /* @__PURE__ */ b("div", {
199
200
  className: "text-xs text-text-secondary mb-1",
200
201
  children: [
201
- C("stepEditor.stepNumber"),
202
+ S("stepEditor.stepNumber"),
202
203
  " ",
203
204
  t + 1
204
205
  ]
205
206
  }),
206
- /* @__PURE__ */ _("div", {
207
+ /* @__PURE__ */ y("div", {
207
208
  className: "font-medium text-sm truncate",
208
- children: e.title || C("stepEditor.untitled")
209
+ children: e.title || S("stepEditor.untitled")
209
210
  }),
210
- e.targetSelector && /* @__PURE__ */ _("div", {
211
+ e.targetSelector && /* @__PURE__ */ y("div", {
211
212
  className: "text-xs text-text-secondary mt-1 truncate font-mono",
212
213
  children: e.targetSelector
213
214
  })
214
215
  ]
215
- }), M && /* @__PURE__ */ v("div", {
216
+ }), M && /* @__PURE__ */ b("div", {
216
217
  className: "flex items-center gap-1 shrink-0",
217
218
  children: [
218
- /* @__PURE__ */ _("button", {
219
+ /* @__PURE__ */ y("button", {
219
220
  type: "button",
220
221
  onClick: (e) => {
221
222
  e.stopPropagation(), t > 0 && H(t, t - 1);
@@ -224,9 +225,9 @@ function C() {
224
225
  title: "Move step up",
225
226
  "aria-label": "Move step up",
226
227
  disabled: t === 0,
227
- children: /* @__PURE__ */ _(p, { size: 14 })
228
+ children: /* @__PURE__ */ y(f, { size: 14 })
228
229
  }),
229
- /* @__PURE__ */ _("button", {
230
+ /* @__PURE__ */ y("button", {
230
231
  type: "button",
231
232
  onClick: (e) => {
232
233
  e.stopPropagation(), t < L.length - 1 && H(t, t + 1);
@@ -235,17 +236,17 @@ function C() {
235
236
  title: "Move step down",
236
237
  "aria-label": "Move step down",
237
238
  disabled: t === L.length - 1,
238
- children: /* @__PURE__ */ _(u, { size: 14 })
239
+ children: /* @__PURE__ */ y(l, { size: 14 })
239
240
  }),
240
- /* @__PURE__ */ _("button", {
241
+ /* @__PURE__ */ y("button", {
241
242
  type: "button",
242
243
  onClick: (t) => {
243
- t.stopPropagation(), ue(e.id);
244
+ t.stopPropagation(), B(e.id);
244
245
  },
245
246
  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",
246
- title: C("stepEditor.deleteStep"),
247
- "aria-label": C("stepEditor.deleteStep"),
248
- children: /* @__PURE__ */ _(ie, { size: 14 })
247
+ title: S("stepEditor.deleteStep"),
248
+ "aria-label": S("stepEditor.deleteStep"),
249
+ children: /* @__PURE__ */ y(_, { size: 14 })
249
250
  })
250
251
  ]
251
252
  })]
@@ -253,15 +254,15 @@ function C() {
253
254
  }, e.id))
254
255
  })]
255
256
  }),
256
- /* @__PURE__ */ _("div", {
257
+ /* @__PURE__ */ y("div", {
257
258
  className: "flex-1 overflow-y-auto p-4 sm:p-6",
258
- children: R ? /* @__PURE__ */ v("div", {
259
+ children: R ? /* @__PURE__ */ b("div", {
259
260
  className: "max-w-2xl mx-auto space-y-4 sm:space-y-6",
260
261
  children: [
261
- q && L.length > 1 && /* @__PURE__ */ v("div", {
262
+ K && L.length > 1 && /* @__PURE__ */ b("div", {
262
263
  className: "flex items-center justify-between bg-bg-sunken/50 rounded-lg p-2 mb-4",
263
264
  children: [
264
- /* @__PURE__ */ _("button", {
265
+ /* @__PURE__ */ y("button", {
265
266
  type: "button",
266
267
  onClick: () => {
267
268
  let e = L.findIndex((e) => e.id === R.id);
@@ -269,22 +270,22 @@ function C() {
269
270
  },
270
271
  disabled: L.findIndex((e) => e.id === R.id) === 0,
271
272
  className: "p-2 min-h-[44px] min-w-[44px] hover:bg-accent rounded-md disabled:opacity-30",
272
- "aria-label": C("stepEditor.previousStep"),
273
- children: /* @__PURE__ */ _(d, { size: 20 })
273
+ "aria-label": S("stepEditor.previousStep"),
274
+ children: /* @__PURE__ */ y(u, { size: 20 })
274
275
  }),
275
- /* @__PURE__ */ v("span", {
276
+ /* @__PURE__ */ b("span", {
276
277
  className: "text-sm text-text-secondary",
277
278
  children: [
278
- C("stepEditor.stepNumber"),
279
+ S("stepEditor.stepNumber"),
279
280
  " ",
280
281
  L.findIndex((e) => e.id === R.id) + 1,
281
282
  " ",
282
- C("stepEditor.of"),
283
+ S("stepEditor.of"),
283
284
  " ",
284
285
  L.length
285
286
  ]
286
287
  }),
287
- /* @__PURE__ */ _("button", {
288
+ /* @__PURE__ */ y("button", {
288
289
  type: "button",
289
290
  onClick: () => {
290
291
  let e = L.findIndex((e) => e.id === R.id);
@@ -292,185 +293,181 @@ function C() {
292
293
  },
293
294
  disabled: L.findIndex((e) => e.id === R.id) === L.length - 1,
294
295
  className: "p-2 min-h-[44px] min-w-[44px] hover:bg-accent rounded-md disabled:opacity-30",
295
- "aria-label": C("stepEditor.nextStep"),
296
- children: /* @__PURE__ */ _(f, { size: 20 })
296
+ "aria-label": S("stepEditor.nextStep"),
297
+ children: /* @__PURE__ */ y(d, { size: 20 })
297
298
  })
298
299
  ]
299
300
  }),
300
- /* @__PURE__ */ _("h2", {
301
+ /* @__PURE__ */ y("h2", {
301
302
  className: "text-lg sm:text-xl font-semibold",
302
- children: C("stepEditor.editStep")
303
+ children: S("stepEditor.editStep")
303
304
  }),
304
- /* @__PURE__ */ v("div", { children: [/* @__PURE__ */ v("label", {
305
+ /* @__PURE__ */ b("div", { children: [/* @__PURE__ */ b("label", {
305
306
  className: "block text-sm font-medium mb-2",
306
307
  htmlFor: "step-editor-title",
307
- children: [C("stepEditor.stepTitle"), " *"]
308
- }), /* @__PURE__ */ _("input", {
308
+ children: [S("stepEditor.stepTitle"), " *"]
309
+ }), /* @__PURE__ */ y("input", {
309
310
  id: "step-editor-title",
310
311
  type: "text",
311
312
  value: R.title,
312
313
  onChange: (e) => V(R.id, "title", e.target.value),
313
314
  className: "w-full px-3 py-2 border border-border-subtle rounded-md bg-bg-surface text-sm sm:text-base",
314
- placeholder: C("stepEditor.stepTitlePlaceholder"),
315
- "aria-label": C("stepEditor.stepTitle")
315
+ placeholder: S("stepEditor.stepTitlePlaceholder"),
316
+ "aria-label": S("stepEditor.stepTitle")
316
317
  })] }),
317
- /* @__PURE__ */ v("div", { children: [/* @__PURE__ */ v("label", {
318
- className: "block text-sm font-medium mb-2",
319
- htmlFor: "step-editor-content",
320
- children: [C("stepEditor.content"), " *"]
321
- }), /* @__PURE__ */ _("textarea", {
318
+ /* @__PURE__ */ y(i, {
322
319
  id: "step-editor-content",
320
+ label: `${S("stepEditor.content")} *`,
323
321
  value: R.content,
324
- onChange: (e) => V(R.id, "content", e.target.value),
322
+ onChange: (e) => V(R.id, "content", e),
325
323
  rows: 4,
326
- 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]",
327
- placeholder: C("stepEditor.contentPlaceholder"),
328
- "aria-label": C("stepEditor.content")
329
- })] }),
330
- /* @__PURE__ */ v("div", { children: [
331
- /* @__PURE__ */ v("label", {
324
+ placeholder: S("stepEditor.contentPlaceholder"),
325
+ "aria-label": S("stepEditor.content")
326
+ }),
327
+ /* @__PURE__ */ b("div", { children: [
328
+ /* @__PURE__ */ b("label", {
332
329
  className: "block text-sm font-medium mb-2",
333
330
  htmlFor: "step-editor-css-selector",
334
331
  children: [
335
- C("stepEditor.cssSelector"),
332
+ S("stepEditor.cssSelector"),
336
333
  " *",
337
- /* @__PURE__ */ v("span", {
334
+ /* @__PURE__ */ b("span", {
338
335
  className: "text-text-secondary font-normal ml-2",
339
336
  children: [
340
337
  "(",
341
- C("stepEditor.targetElement"),
338
+ S("stepEditor.targetElement"),
342
339
  ")"
343
340
  ]
344
341
  })
345
342
  ]
346
343
  }),
347
- /* @__PURE__ */ _("input", {
344
+ /* @__PURE__ */ y("input", {
348
345
  id: "step-editor-css-selector",
349
346
  type: "text",
350
347
  value: R.targetSelector || "",
351
348
  onChange: (e) => V(R.id, "targetSelector", e.target.value),
352
- placeholder: C("stepEditor.cssSelectorPlaceholder"),
349
+ placeholder: S("stepEditor.cssSelectorPlaceholder"),
353
350
  className: "w-full px-3 py-2 border border-border-subtle rounded-md bg-bg-surface font-mono text-sm",
354
351
  "aria-label": "{tr('stepEditor.cssSelector')} *\n \n ({tr('stepEditor.targetElement')})"
355
352
  }),
356
- /* @__PURE__ */ _("p", {
353
+ /* @__PURE__ */ y("p", {
357
354
  className: "text-xs text-text-secondary mt-1",
358
- children: C("stepEditor.dataTourHint")
355
+ children: S("stepEditor.dataTourHint")
359
356
  })
360
357
  ] }),
361
- /* @__PURE__ */ v("div", { children: [/* @__PURE__ */ _("label", {
358
+ /* @__PURE__ */ b("div", { children: [/* @__PURE__ */ y("label", {
362
359
  className: "block text-sm font-medium mb-2",
363
360
  htmlFor: "step-editor-placement",
364
- children: C("stepEditor.tooltipPlacement")
365
- }), /* @__PURE__ */ v("select", {
361
+ children: S("stepEditor.tooltipPlacement")
362
+ }), /* @__PURE__ */ b("select", {
366
363
  id: "step-editor-placement",
367
364
  value: R.placement,
368
365
  onChange: (e) => V(R.id, "placement", e.target.value),
369
366
  className: "w-full px-3 py-2 border border-border-subtle rounded-md bg-bg-surface text-sm sm:text-base",
370
- "aria-label": C("stepEditor.tooltipPlacement"),
367
+ "aria-label": S("stepEditor.tooltipPlacement"),
371
368
  children: [
372
- /* @__PURE__ */ _("option", {
369
+ /* @__PURE__ */ y("option", {
373
370
  value: "AUTO",
374
- children: C("stepEditor.placementAuto")
371
+ children: S("stepEditor.placementAuto")
375
372
  }),
376
- /* @__PURE__ */ _("option", {
373
+ /* @__PURE__ */ y("option", {
377
374
  value: "TOP",
378
- children: C("stepEditor.placementTop")
375
+ children: S("stepEditor.placementTop")
379
376
  }),
380
- /* @__PURE__ */ _("option", {
377
+ /* @__PURE__ */ y("option", {
381
378
  value: "BOTTOM",
382
- children: C("stepEditor.placementBottom")
379
+ children: S("stepEditor.placementBottom")
383
380
  }),
384
- /* @__PURE__ */ _("option", {
381
+ /* @__PURE__ */ y("option", {
385
382
  value: "LEFT",
386
- children: C("stepEditor.placementLeft")
383
+ children: S("stepEditor.placementLeft")
387
384
  }),
388
- /* @__PURE__ */ _("option", {
385
+ /* @__PURE__ */ y("option", {
389
386
  value: "RIGHT",
390
- children: C("stepEditor.placementRight")
387
+ children: S("stepEditor.placementRight")
391
388
  }),
392
- /* @__PURE__ */ _("option", {
389
+ /* @__PURE__ */ y("option", {
393
390
  value: "CENTER",
394
- children: C("stepEditor.placementCenter")
391
+ children: S("stepEditor.placementCenter")
395
392
  })
396
393
  ]
397
394
  })] }),
398
- /* @__PURE__ */ v("details", {
395
+ /* @__PURE__ */ b("details", {
399
396
  className: "border border-border-subtle rounded-md",
400
- children: [/* @__PURE__ */ _("summary", {
397
+ children: [/* @__PURE__ */ y("summary", {
401
398
  className: "px-4 py-3 cursor-pointer font-medium text-sm hover:bg-accent/50 rounded-t-md",
402
- children: C("stepEditor.deviceSpecificSelectors")
403
- }), /* @__PURE__ */ v("div", {
399
+ children: S("stepEditor.deviceSpecificSelectors")
400
+ }), /* @__PURE__ */ b("div", {
404
401
  className: "p-4 pt-0 space-y-3 border-t border-border-subtle",
405
402
  children: [
406
- /* @__PURE__ */ _("p", {
403
+ /* @__PURE__ */ y("p", {
407
404
  className: "text-xs text-text-secondary mb-3",
408
- children: C("stepEditor.deviceSelectorHint")
405
+ children: S("stepEditor.deviceSelectorHint")
409
406
  }),
410
- /* @__PURE__ */ v("div", { children: [/* @__PURE__ */ _("label", {
407
+ /* @__PURE__ */ b("div", { children: [/* @__PURE__ */ y("label", {
411
408
  className: "block text-xs font-medium mb-1",
412
409
  htmlFor: "step-editor-mobile-selector",
413
- children: C("stepEditor.mobileSelector")
414
- }), /* @__PURE__ */ _("input", {
410
+ children: S("stepEditor.mobileSelector")
411
+ }), /* @__PURE__ */ y("input", {
415
412
  id: "step-editor-mobile-selector",
416
413
  type: "text",
417
414
  value: R.targetSelectorMobile || "",
418
415
  onChange: (e) => V(R.id, "targetSelectorMobile", e.target.value),
419
- placeholder: C("stepEditor.leaveEmptyDefault"),
416
+ placeholder: S("stepEditor.leaveEmptyDefault"),
420
417
  className: "w-full px-3 py-2 border border-border-subtle rounded-md bg-bg-surface text-sm font-mono",
421
- "aria-label": C("stepEditor.mobileSelector")
418
+ "aria-label": S("stepEditor.mobileSelector")
422
419
  })] }),
423
- /* @__PURE__ */ v("div", { children: [/* @__PURE__ */ _("label", {
420
+ /* @__PURE__ */ b("div", { children: [/* @__PURE__ */ y("label", {
424
421
  className: "block text-xs font-medium mb-1",
425
422
  htmlFor: "step-editor-tablet-selector",
426
- children: C("stepEditor.tabletSelector")
427
- }), /* @__PURE__ */ _("input", {
423
+ children: S("stepEditor.tabletSelector")
424
+ }), /* @__PURE__ */ y("input", {
428
425
  id: "step-editor-tablet-selector",
429
426
  type: "text",
430
427
  value: R.targetSelectorTablet || "",
431
428
  onChange: (e) => V(R.id, "targetSelectorTablet", e.target.value),
432
- placeholder: C("stepEditor.leaveEmptyDefault"),
429
+ placeholder: S("stepEditor.leaveEmptyDefault"),
433
430
  className: "w-full px-3 py-2 border border-border-subtle rounded-md bg-bg-surface text-sm font-mono",
434
- "aria-label": C("stepEditor.tabletSelector")
431
+ "aria-label": S("stepEditor.tabletSelector")
435
432
  })] }),
436
- /* @__PURE__ */ v("div", { children: [/* @__PURE__ */ _("label", {
433
+ /* @__PURE__ */ b("div", { children: [/* @__PURE__ */ y("label", {
437
434
  className: "block text-xs font-medium mb-1",
438
435
  htmlFor: "step-editor-desktop-selector",
439
- children: C("stepEditor.desktopSelector")
440
- }), /* @__PURE__ */ _("input", {
436
+ children: S("stepEditor.desktopSelector")
437
+ }), /* @__PURE__ */ y("input", {
441
438
  id: "step-editor-desktop-selector",
442
439
  type: "text",
443
440
  value: R.targetSelectorDesktop || "",
444
441
  onChange: (e) => V(R.id, "targetSelectorDesktop", e.target.value),
445
- placeholder: C("stepEditor.leaveEmptyDefault"),
442
+ placeholder: S("stepEditor.leaveEmptyDefault"),
446
443
  className: "w-full px-3 py-2 border border-border-subtle rounded-md bg-bg-surface text-sm font-mono",
447
- "aria-label": C("stepEditor.desktopSelector")
444
+ "aria-label": S("stepEditor.desktopSelector")
448
445
  })] })
449
446
  ]
450
447
  })]
451
448
  }),
452
- /* @__PURE__ */ v("div", {
449
+ /* @__PURE__ */ b("div", {
453
450
  className: "grid grid-cols-1 gap-4 sm:grid-cols-2",
454
- children: [/* @__PURE__ */ v("label", {
451
+ children: [/* @__PURE__ */ b("label", {
455
452
  className: "flex items-center gap-3 cursor-pointer rounded-md border border-border-subtle p-3",
456
- children: [/* @__PURE__ */ _("input", {
453
+ children: [/* @__PURE__ */ y("input", {
457
454
  type: "checkbox",
458
455
  checked: R.requireInteraction ?? !1,
459
456
  onChange: (e) => V(R.id, "requireInteraction", e.target.checked),
460
457
  className: "size-4 rounded",
461
458
  "aria-label": "Require interaction"
462
- }), /* @__PURE__ */ v("div", { children: [/* @__PURE__ */ _("div", {
459
+ }), /* @__PURE__ */ b("div", { children: [/* @__PURE__ */ y("div", {
463
460
  className: "text-sm font-medium",
464
461
  children: "Require interaction"
465
- }), /* @__PURE__ */ _("div", {
462
+ }), /* @__PURE__ */ y("div", {
466
463
  className: "text-xs text-text-secondary",
467
464
  children: "User must interact with the highlighted element before advancing."
468
465
  })] })]
469
- }), /* @__PURE__ */ v("div", { children: [/* @__PURE__ */ _("label", {
466
+ }), /* @__PURE__ */ b("div", { children: [/* @__PURE__ */ y("label", {
470
467
  className: "block text-sm font-medium mb-2",
471
468
  htmlFor: "step-editor-wait-timeout",
472
469
  children: "Wait for timeout (ms)"
473
- }), /* @__PURE__ */ _("input", {
470
+ }), /* @__PURE__ */ y("input", {
474
471
  id: "step-editor-wait-timeout",
475
472
  type: "number",
476
473
  min: "0",
@@ -481,16 +478,16 @@ function C() {
481
478
  "aria-label": "Wait for timeout (ms)"
482
479
  })] })]
483
480
  }),
484
- /* @__PURE__ */ v(oe, {
481
+ /* @__PURE__ */ b(ce, {
485
482
  title: "Advanced settings",
486
483
  description: "Step-timing waits, skip conditions, and analytics tags.",
487
- children: [/* @__PURE__ */ v("div", {
484
+ children: [/* @__PURE__ */ b("div", {
488
485
  className: "grid grid-cols-1 gap-4 sm:grid-cols-2",
489
- children: [/* @__PURE__ */ v("div", { children: [/* @__PURE__ */ _("label", {
486
+ children: [/* @__PURE__ */ b("div", { children: [/* @__PURE__ */ y("label", {
490
487
  className: "block text-sm font-medium mb-2",
491
488
  htmlFor: "step-editor-wait-selector",
492
489
  children: "Wait for selector"
493
- }), /* @__PURE__ */ _("input", {
490
+ }), /* @__PURE__ */ y("input", {
494
491
  id: "step-editor-wait-selector",
495
492
  type: "text",
496
493
  value: R.waitForSelector || "",
@@ -498,11 +495,11 @@ function C() {
498
495
  className: "w-full px-3 py-2 border border-border-subtle rounded-md bg-bg-surface text-sm font-mono",
499
496
  placeholder: "[data-tour='agents-tabs']",
500
497
  "aria-label": "Wait for selector"
501
- })] }), /* @__PURE__ */ v("div", { children: [/* @__PURE__ */ _("label", {
498
+ })] }), /* @__PURE__ */ b("div", { children: [/* @__PURE__ */ y("label", {
502
499
  className: "block text-sm font-medium mb-2",
503
500
  htmlFor: "step-editor-wait-event",
504
501
  children: "Wait for event"
505
- }), /* @__PURE__ */ _("input", {
502
+ }), /* @__PURE__ */ y("input", {
506
503
  id: "step-editor-wait-event",
507
504
  type: "text",
508
505
  value: R.waitForEvent || "",
@@ -511,13 +508,13 @@ function C() {
511
508
  placeholder: "tour:ready",
512
509
  "aria-label": "Wait for event"
513
510
  })] })]
514
- }), /* @__PURE__ */ v("div", {
511
+ }), /* @__PURE__ */ b("div", {
515
512
  className: "mt-4",
516
- children: [/* @__PURE__ */ _("label", {
513
+ children: [/* @__PURE__ */ y("label", {
517
514
  className: "block text-sm font-medium mb-2",
518
515
  htmlFor: "step-editor-skip-conditions",
519
516
  children: "Skip conditions (JSON)"
520
- }), /* @__PURE__ */ _("textarea", {
517
+ }), /* @__PURE__ */ y("textarea", {
521
518
  id: "step-editor-skip-conditions",
522
519
  value: R.skipConditions ? JSON.stringify(R.skipConditions, null, 2) : "",
523
520
  onChange: (e) => {
@@ -539,48 +536,48 @@ function C() {
539
536
  })]
540
537
  })]
541
538
  }),
542
- /* @__PURE__ */ v(x, {
539
+ /* @__PURE__ */ b(oe, {
543
540
  treatment: "plain",
544
541
  className: "p-4 space-y-4 border-border-seam",
545
542
  children: [
546
- /* @__PURE__ */ v("div", {
543
+ /* @__PURE__ */ b("div", {
547
544
  className: "flex items-center gap-2",
548
- children: [/* @__PURE__ */ _(ne, { size: 18 }), /* @__PURE__ */ _("h3", {
545
+ children: [/* @__PURE__ */ y(m, { size: 18 }), /* @__PURE__ */ y("h3", {
549
546
  className: "text-sm font-semibold",
550
547
  children: "Step media"
551
548
  })]
552
549
  }),
553
- R.media && R.media.length > 0 ? /* @__PURE__ */ _("div", {
550
+ R.media && R.media.length > 0 ? /* @__PURE__ */ y("div", {
554
551
  className: "space-y-2",
555
- children: R.media.map((e) => /* @__PURE__ */ v("div", {
552
+ children: R.media.map((e) => /* @__PURE__ */ b("div", {
556
553
  className: "flex items-center justify-between rounded-md border border-border-subtle p-2 text-sm",
557
- children: [/* @__PURE__ */ v("div", { children: [/* @__PURE__ */ _("div", {
554
+ children: [/* @__PURE__ */ b("div", { children: [/* @__PURE__ */ y("div", {
558
555
  className: "font-medium",
559
556
  children: e.media.name
560
- }), /* @__PURE__ */ _("div", {
557
+ }), /* @__PURE__ */ y("div", {
561
558
  className: "text-xs text-text-secondary",
562
559
  children: e.position
563
- })] }), /* @__PURE__ */ _("span", {
560
+ })] }), /* @__PURE__ */ y("span", {
564
561
  className: "text-xs text-text-secondary",
565
562
  children: e.media.type
566
563
  })]
567
564
  }, e.id))
568
- }) : /* @__PURE__ */ _("p", {
565
+ }) : /* @__PURE__ */ y("p", {
569
566
  className: "text-sm text-text-secondary",
570
567
  children: "No media attached to this step yet."
571
568
  }),
572
- /* @__PURE__ */ v("div", {
569
+ /* @__PURE__ */ b("div", {
573
570
  className: "grid grid-cols-1 gap-3 sm:grid-cols-[minmax(0,1fr)_160px_auto]",
574
571
  children: [
575
- /* @__PURE__ */ v("select", {
576
- value: J,
577
- onChange: (e) => Y(e.target.value),
572
+ /* @__PURE__ */ b("select", {
573
+ value: q,
574
+ onChange: (e) => J(e.target.value),
578
575
  className: "w-full px-3 py-2 border border-border-subtle rounded-md bg-bg-surface text-sm",
579
576
  "aria-label": "Select media to attach",
580
- children: [/* @__PURE__ */ _("option", {
577
+ children: [/* @__PURE__ */ y("option", {
581
578
  value: "",
582
- children: fe ? "Loading media..." : "Select uploaded media"
583
- }), U.map((e) => /* @__PURE__ */ v("option", {
579
+ children: me ? "Loading media..." : "Select uploaded media"
580
+ }), fe.map((e) => /* @__PURE__ */ b("option", {
584
581
  value: e.id,
585
582
  children: [
586
583
  e.name,
@@ -590,30 +587,30 @@ function C() {
590
587
  ]
591
588
  }, e.id))]
592
589
  }),
593
- /* @__PURE__ */ v("select", {
594
- value: X,
595
- onChange: (e) => me(e.target.value),
590
+ /* @__PURE__ */ b("select", {
591
+ value: Y,
592
+ onChange: (e) => ge(e.target.value),
596
593
  className: "w-full px-3 py-2 border border-border-subtle rounded-md bg-bg-surface text-sm",
597
594
  "aria-label": "Attachment position",
598
595
  children: [
599
- /* @__PURE__ */ _("option", {
596
+ /* @__PURE__ */ y("option", {
600
597
  value: "header",
601
598
  children: "Header"
602
599
  }),
603
- /* @__PURE__ */ _("option", {
600
+ /* @__PURE__ */ y("option", {
604
601
  value: "body",
605
602
  children: "Body"
606
603
  }),
607
- /* @__PURE__ */ _("option", {
604
+ /* @__PURE__ */ y("option", {
608
605
  value: "footer",
609
606
  children: "Footer"
610
607
  })
611
608
  ]
612
609
  }),
613
- /* @__PURE__ */ _("button", {
610
+ /* @__PURE__ */ y("button", {
614
611
  type: "button",
615
- onClick: ve,
616
- disabled: he || !J,
612
+ onClick: ye,
613
+ disabled: _e || !q,
617
614
  className: "px-4 py-2 min-h-[44px] border border-border-subtle rounded-md hover:bg-accent disabled:opacity-50",
618
615
  children: "Attach"
619
616
  })
@@ -622,17 +619,17 @@ function C() {
622
619
  ]
623
620
  })
624
621
  ]
625
- }) : /* @__PURE__ */ _("div", {
622
+ }) : /* @__PURE__ */ y("div", {
626
623
  className: "flex items-center justify-center h-full",
627
- children: /* @__PURE__ */ _(S, {
624
+ children: /* @__PURE__ */ y(se, {
628
625
  illustration: L.length > 0 ? "empty-generic" : "onboarding",
629
- title: C("stepEditor.emptyTitle"),
630
- description: L.length > 0 ? C("stepEditor.selectStepToEdit") : C("stepEditor.createFirstStep"),
631
- action: L.length === 0 && A ? /* @__PURE__ */ v(b, {
626
+ title: S("stepEditor.emptyTitle"),
627
+ description: L.length > 0 ? S("stepEditor.selectStepToEdit") : S("stepEditor.createFirstStep"),
628
+ action: L.length === 0 && A ? /* @__PURE__ */ b(x, {
632
629
  type: "button",
633
- onClick: Q,
630
+ onClick: Z,
634
631
  className: "min-h-[44px]",
635
- children: [/* @__PURE__ */ _(h, { size: 18 }), C("stepEditor.addFirstStep")]
632
+ children: [/* @__PURE__ */ y(h, { size: 18 }), S("stepEditor.addFirstStep")]
636
633
  }) : void 0
637
634
  })
638
635
  })
@@ -643,6 +640,6 @@ function C() {
643
640
  });
644
641
  }
645
642
  //#endregion
646
- export { C as StepEditorPage };
643
+ export { S as StepEditorPage };
647
644
 
648
645
  //# sourceMappingURL=StepEditorPage.js.map