@burdenoff/microfe-tours 2026.625.2 → 2026.626.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 (25) hide show
  1. package/dist/tours/i18n.js +19 -1
  2. package/dist/tours/i18n.js.map +1 -1
  3. package/dist/tours/pages/AnalyticsDashboardPage.js +43 -41
  4. package/dist/tours/pages/AnalyticsDashboardPage.js.map +1 -1
  5. package/dist/tours/pages/MediaLibraryPage.js +66 -59
  6. package/dist/tours/pages/MediaLibraryPage.js.map +1 -1
  7. package/dist/tours/pages/MyToursPage.js +75 -53
  8. package/dist/tours/pages/MyToursPage.js.map +1 -1
  9. package/dist/tours/pages/MyToursProgressPage.js +81 -74
  10. package/dist/tours/pages/MyToursProgressPage.js.map +1 -1
  11. package/dist/tours/pages/SchedulerPage.js +78 -78
  12. package/dist/tours/pages/SchedulerPage.js.map +1 -1
  13. package/dist/tours/pages/StepEditorPage.js +570 -575
  14. package/dist/tours/pages/StepEditorPage.js.map +1 -1
  15. package/dist/tours/pages/SystemAnalyticsPage.js +128 -118
  16. package/dist/tours/pages/SystemAnalyticsPage.js.map +1 -1
  17. package/dist/tours/pages/TemplateLibraryPage.js +54 -65
  18. package/dist/tours/pages/TemplateLibraryPage.js.map +1 -1
  19. package/dist/tours/pages/TourBuilderPage.js +307 -272
  20. package/dist/tours/pages/TourBuilderPage.js.map +1 -1
  21. package/dist/tours/pages/TourPreviewPage.js +114 -122
  22. package/dist/tours/pages/TourPreviewPage.js.map +1 -1
  23. package/dist/tours/pages/ToursListPage.js +148 -147
  24. package/dist/tours/pages/ToursListPage.js.map +1 -1
  25. package/package.json +2 -2
package/dist/tours/pages/TourPreviewPage.js CHANGED
@@ -6,128 +6,132 @@ import { useToursI18n as i } from "../i18n.js";
6
6
  import { useTourBuilder as a } from "../hooks/useTourBuilder.js";
7
7
  import { useTourPreview as o } from "../hooks/useTourPreview.js";
8
8
  import { useEffect as s } from "react";
9
- import { AlertCircle as c, ArrowLeft as l, CheckCircle as u, ChevronLeft as d, ChevronRight as f, Monitor as p, Smartphone as m, Tablet as h, X as g } from "lucide-react";
10
- import { jsx as _, jsxs as v } from "react/jsx-runtime";
11
- import { useNavigate as y, useParams as b } from "react-router-dom";
12
- import { Button as x, GlassCard as S } from "@burdenoff/fe-libs/ui";
9
+ import { AlertCircle as c, ArrowLeft as l, ChevronLeft as u, ChevronRight as d, Monitor as f, Smartphone as p, Tablet as m, X as h } from "lucide-react";
10
+ import { jsx as g, jsxs as _ } from "react/jsx-runtime";
11
+ import { useNavigate as v, useParams as y } from "react-router-dom";
12
+ import { Button as b, GlassCard as x, IllustratedEmptyState as S, PagePurpose as C } from "@burdenoff/fe-libs/ui";
13
13
  //#region src/tours/pages/TourPreviewPage.tsx
14
- function C() {
15
- let { tr: C } = i(), { tourId: w } = b(), T = y(), { basePath: E = "/" } = e(), { hasPermission: D } = n(), O = D(r.TOUR_READ), { tour: k, loadTour: A } = a(w), { devicePreview: j } = t(), { isPreviewActive: M, currentStepIndex: N, currentStep: P, totalSteps: F, canGoNext: I, canGoPrevious: L, validationResults: R, startPreview: z, stopPreview: B, nextStep: V, previousStep: H, changeDevice: U, validateForPreview: W } = o(k || void 0);
14
+ function w() {
15
+ let { tr: w } = i(), { tourId: T } = y(), E = v(), { basePath: D = "/" } = e(), { hasPermission: O } = n(), k = O(r.TOUR_READ), { tour: A, loadTour: j } = a(T), { devicePreview: M } = t(), { isPreviewActive: N, currentStepIndex: P, currentStep: F, totalSteps: I, canGoNext: L, canGoPrevious: R, validationResults: z, startPreview: B, stopPreview: V, nextStep: H, previousStep: U, changeDevice: W, validateForPreview: G } = o(A || void 0);
16
16
  if (s(() => {
17
- w && A(w);
18
- }, [w, A]), s(() => {
19
- k && W();
17
+ T && j(T);
18
+ }, [T, j]), s(() => {
19
+ A && G();
20
20
  }, [
21
- k,
22
- j,
23
- W
24
- ]), !O) return /* @__PURE__ */ _("div", {
21
+ A,
22
+ M,
23
+ G
24
+ ]), !k) return /* @__PURE__ */ g("div", {
25
25
  className: "flex items-center justify-center h-screen bg-bg-sunken",
26
- children: /* @__PURE__ */ v("div", {
26
+ children: /* @__PURE__ */ _("div", {
27
27
  className: "text-center",
28
- children: [/* @__PURE__ */ _("h2", {
28
+ children: [/* @__PURE__ */ g("h2", {
29
29
  className: "text-lg font-semibold text-text-primary mb-2",
30
- children: C("tourPreview.accessDeniedTitle")
31
- }), /* @__PURE__ */ _("p", {
30
+ children: w("tourPreview.accessDeniedTitle")
31
+ }), /* @__PURE__ */ g("p", {
32
32
  className: "text-sm text-text-secondary",
33
- children: C("tourPreview.accessDeniedMessage")
33
+ children: w("tourPreview.accessDeniedMessage")
34
34
  })]
35
35
  })
36
36
  });
37
- if (!k) return /* @__PURE__ */ _("div", {
37
+ if (!A) return /* @__PURE__ */ g("div", {
38
38
  className: "flex items-center justify-center h-screen bg-bg-sunken",
39
- children: /* @__PURE__ */ _("p", {
39
+ children: /* @__PURE__ */ g("p", {
40
40
  className: "text-text-secondary",
41
- children: C("tourPreview.loading")
41
+ children: w("tourPreview.loading")
42
42
  })
43
43
  });
44
- let G = () => {
45
- T(`${E}/${w}/edit`);
46
- }, K = {
47
- mobile: /* @__PURE__ */ _(m, { size: 20 }),
48
- tablet: /* @__PURE__ */ _(h, { size: 20 }),
49
- desktop: /* @__PURE__ */ _(p, { size: 20 })
44
+ let K = () => {
45
+ E(`${D}/${T}/edit`);
46
+ }, q = {
47
+ mobile: /* @__PURE__ */ g(p, { size: 20 }),
48
+ tablet: /* @__PURE__ */ g(m, { size: 20 }),
49
+ desktop: /* @__PURE__ */ g(f, { size: 20 })
50
50
  };
51
- return /* @__PURE__ */ v("div", {
51
+ return /* @__PURE__ */ _("div", {
52
52
  className: "flex flex-col h-screen bg-bg-sunken",
53
53
  children: [
54
- /* @__PURE__ */ v("div", {
54
+ /* @__PURE__ */ _("div", {
55
55
  className: "border-b border-border-subtle bg-bg-surface p-3 sm:p-4 flex flex-wrap items-center gap-3 sm:gap-4",
56
56
  children: [
57
- /* @__PURE__ */ _("button", {
57
+ /* @__PURE__ */ g("button", {
58
58
  type: "button",
59
- onClick: G,
59
+ onClick: K,
60
60
  className: "p-2 min-h-[44px] min-w-[44px] hover:bg-accent rounded-md",
61
- "aria-label": C("tourBuilder.goBack"),
62
- children: /* @__PURE__ */ _(l, { size: 20 })
61
+ "aria-label": w("tourBuilder.goBack"),
62
+ children: /* @__PURE__ */ g(l, { size: 20 })
63
63
  }),
64
- /* @__PURE__ */ v("div", {
64
+ /* @__PURE__ */ _("div", {
65
65
  className: "flex-1 min-w-[12rem]",
66
- children: [/* @__PURE__ */ v("h1", {
66
+ children: [/* @__PURE__ */ _("h1", {
67
67
  className: "text-base sm:text-lg font-semibold truncate",
68
68
  children: [
69
- k?.name,
69
+ A?.name,
70
70
  " - ",
71
- C("tourPreview.previewSuffix")
71
+ w("tourPreview.previewSuffix")
72
72
  ]
73
- }), M && /* @__PURE__ */ v("p", {
73
+ }), N && /* @__PURE__ */ _("p", {
74
74
  className: "text-sm text-text-secondary",
75
75
  children: [
76
- C("tourPreview.stepOf"),
76
+ w("tourPreview.stepOf"),
77
77
  " ",
78
- N + 1,
78
+ P + 1,
79
79
  " ",
80
- C("tourPreview.stepOfConnector"),
80
+ w("tourPreview.stepOfConnector"),
81
81
  " ",
82
- F
82
+ I
83
83
  ]
84
84
  })]
85
85
  }),
86
- /* @__PURE__ */ _("div", {
86
+ /* @__PURE__ */ g("div", {
87
87
  className: "flex gap-2 border border-border-subtle rounded-md overflow-hidden",
88
88
  children: [
89
89
  "mobile",
90
90
  "tablet",
91
91
  "desktop"
92
- ].map((e) => /* @__PURE__ */ _("button", {
92
+ ].map((e) => /* @__PURE__ */ g("button", {
93
93
  type: "button",
94
- onClick: () => U(e),
95
- className: `px-3 py-2 min-h-[44px] min-w-[44px] ${j === e ? "bg-action-primary-bg text-action-primary-text" : "bg-bg-surface hover:bg-accent"}`,
96
- title: C(e === "mobile" ? "tourPreview.deviceMobile" : e === "tablet" ? "tourPreview.deviceTablet" : "tourPreview.deviceDesktop"),
97
- "aria-label": C(e === "mobile" ? "tourPreview.deviceMobile" : e === "tablet" ? "tourPreview.deviceTablet" : "tourPreview.deviceDesktop"),
98
- children: K[e]
94
+ onClick: () => W(e),
95
+ className: `px-3 py-2 min-h-[44px] min-w-[44px] ${M === e ? "bg-action-primary-bg text-action-primary-text" : "bg-bg-surface hover:bg-accent"}`,
96
+ title: w(e === "mobile" ? "tourPreview.deviceMobile" : e === "tablet" ? "tourPreview.deviceTablet" : "tourPreview.deviceDesktop"),
97
+ "aria-label": w(e === "mobile" ? "tourPreview.deviceMobile" : e === "tablet" ? "tourPreview.deviceTablet" : "tourPreview.deviceDesktop"),
98
+ children: q[e]
99
99
  }, e))
100
100
  }),
101
- M ? /* @__PURE__ */ v(x, {
101
+ N ? /* @__PURE__ */ _(b, {
102
102
  type: "button",
103
103
  variant: "outline",
104
- onClick: B,
104
+ onClick: V,
105
105
  className: "min-h-[44px]",
106
- children: [/* @__PURE__ */ _(g, { size: 20 }), C("tourPreview.stopPreview")]
107
- }) : /* @__PURE__ */ _(x, {
106
+ children: [/* @__PURE__ */ g(h, { size: 20 }), w("tourPreview.stopPreview")]
107
+ }) : /* @__PURE__ */ g(b, {
108
108
  type: "button",
109
- onClick: z,
110
- disabled: !R?.valid,
109
+ onClick: B,
110
+ disabled: !z?.valid,
111
111
  className: "min-h-[44px]",
112
- children: C("tourPreview.startPreview")
112
+ children: w("tourPreview.startPreview")
113
113
  })
114
114
  ]
115
115
  }),
116
- R && !R.valid && /* @__PURE__ */ _("div", {
116
+ /* @__PURE__ */ g("div", {
117
+ className: "px-3 sm:px-6 pt-3",
118
+ children: /* @__PURE__ */ g(C, { children: w("tourPreview.purpose") })
119
+ }),
120
+ z && !z.valid && /* @__PURE__ */ g("div", {
117
121
  className: "bg-status-error-bg/10 border-b border-status-error-border px-3 sm:px-6 py-3",
118
- children: /* @__PURE__ */ v("div", {
122
+ children: /* @__PURE__ */ _("div", {
119
123
  className: "flex items-start gap-3",
120
- children: [/* @__PURE__ */ _(c, {
124
+ children: [/* @__PURE__ */ g(c, {
121
125
  className: "text-status-error-text flex-shrink-0 mt-0.5",
122
126
  size: 20
123
- }), /* @__PURE__ */ v("div", {
127
+ }), /* @__PURE__ */ _("div", {
124
128
  className: "flex-1",
125
- children: [/* @__PURE__ */ _("h3", {
129
+ children: [/* @__PURE__ */ g("h3", {
126
130
  className: "font-semibold text-status-error-text mb-1",
127
- children: C("tourPreview.validationErrorsTitle")
128
- }), /* @__PURE__ */ _("ul", {
131
+ children: w("tourPreview.validationErrorsTitle")
132
+ }), /* @__PURE__ */ g("ul", {
129
133
  className: "list-disc list-inside space-y-1",
130
- children: R.errors.map((e) => /* @__PURE__ */ _("li", {
134
+ children: z.errors.map((e) => /* @__PURE__ */ g("li", {
131
135
  className: "text-sm text-status-error-text",
132
136
  children: e
133
137
  }, e))
@@ -135,21 +139,21 @@ function C() {
135
139
  })]
136
140
  })
137
141
  }),
138
- R && R.warnings.length > 0 && /* @__PURE__ */ _("div", {
142
+ z && z.warnings.length > 0 && /* @__PURE__ */ g("div", {
139
143
  className: "bg-warning/10 border-b border-warning px-3 sm:px-6 py-3",
140
- children: /* @__PURE__ */ v("div", {
144
+ children: /* @__PURE__ */ _("div", {
141
145
  className: "flex items-start gap-3",
142
- children: [/* @__PURE__ */ _(c, {
146
+ children: [/* @__PURE__ */ g(c, {
143
147
  className: "text-warning flex-shrink-0 mt-0.5",
144
148
  size: 20
145
- }), /* @__PURE__ */ v("div", {
149
+ }), /* @__PURE__ */ _("div", {
146
150
  className: "flex-1",
147
- children: [/* @__PURE__ */ _("h3", {
151
+ children: [/* @__PURE__ */ g("h3", {
148
152
  className: "font-semibold text-warning mb-1",
149
- children: C("tourPreview.warningsTitle")
150
- }), /* @__PURE__ */ _("ul", {
153
+ children: w("tourPreview.warningsTitle")
154
+ }), /* @__PURE__ */ g("ul", {
151
155
  className: "list-disc list-inside space-y-1",
152
- children: R.warnings.map((e) => /* @__PURE__ */ _("li", {
156
+ children: z.warnings.map((e) => /* @__PURE__ */ g("li", {
153
157
  className: "text-sm text-warning",
154
158
  children: e
155
159
  }, e))
@@ -157,89 +161,77 @@ function C() {
157
161
  })]
158
162
  })
159
163
  }),
160
- /* @__PURE__ */ _("div", {
164
+ /* @__PURE__ */ g("div", {
161
165
  className: "flex-1 flex items-center justify-center p-3 sm:p-6 overflow-auto",
162
- children: /* @__PURE__ */ _("div", {
163
- className: `bg-bg-surface border-2 rounded-lg shadow-xl overflow-hidden ${j === "mobile" ? "w-[min(375px,calc(100vw-1.5rem))] h-[667px] max-h-full" : j === "tablet" ? "w-[min(768px,calc(100vw-1.5rem))] h-[1024px] max-h-full" : "w-full max-w-[1920px] h-full max-h-[1080px]"}`,
164
- children: M && P ? /* @__PURE__ */ _("div", {
166
+ children: /* @__PURE__ */ g("div", {
167
+ className: `bg-bg-surface border-2 rounded-lg shadow-xl overflow-hidden ${M === "mobile" ? "w-[min(375px,calc(100vw-1.5rem))] h-[667px] max-h-full" : M === "tablet" ? "w-[min(768px,calc(100vw-1.5rem))] h-[1024px] max-h-full" : "w-full max-w-[1920px] h-full max-h-[1080px]"}`,
168
+ children: N && F ? /* @__PURE__ */ g("div", {
165
169
  className: "h-full flex flex-col items-center justify-center p-4 sm:p-8",
166
- children: /* @__PURE__ */ v(S, {
170
+ children: /* @__PURE__ */ _(x, {
167
171
  treatment: "glass",
168
172
  className: "max-w-md border-border-seam p-4 sm:p-6 shadow-[var(--shadow-pop)]",
169
173
  children: [
170
- /* @__PURE__ */ _("h3", {
174
+ /* @__PURE__ */ g("h3", {
171
175
  className: "text-lg font-semibold mb-3",
172
- children: P.title
176
+ children: F.title
173
177
  }),
174
- /* @__PURE__ */ _("p", {
178
+ /* @__PURE__ */ g("p", {
175
179
  className: "text-sm text-text-secondary mb-4 whitespace-pre-wrap",
176
- children: P.content
180
+ children: F.content
177
181
  }),
178
- /* @__PURE__ */ v("div", {
182
+ /* @__PURE__ */ _("div", {
179
183
  className: "flex gap-2",
180
- children: [/* @__PURE__ */ _("button", {
184
+ children: [/* @__PURE__ */ g("button", {
181
185
  type: "button",
182
- onClick: H,
183
- disabled: !L,
186
+ onClick: U,
187
+ disabled: !R,
184
188
  className: "px-3 py-2 min-h-[44px] min-w-[44px] border border-border-subtle rounded-md hover:bg-accent disabled:opacity-50 disabled:cursor-not-allowed",
185
- "aria-label": C("tourPreview.previous"),
186
- children: /* @__PURE__ */ _(d, { size: 16 })
187
- }), /* @__PURE__ */ _("button", {
189
+ "aria-label": w("tourPreview.previous"),
190
+ children: /* @__PURE__ */ g(u, { size: 16 })
191
+ }), /* @__PURE__ */ g("button", {
188
192
  type: "button",
189
- onClick: V,
190
- disabled: !I,
193
+ onClick: H,
194
+ disabled: !L,
191
195
  className: "flex-1 px-3 py-2 min-h-[44px] bg-action-primary-bg text-action-primary-text rounded-md hover:bg-action-primary-bg/90 disabled:opacity-50 disabled:cursor-not-allowed",
192
- children: C(I ? "tourPreview.next" : "tourPreview.finish")
196
+ children: w(L ? "tourPreview.next" : "tourPreview.finish")
193
197
  })]
194
198
  })
195
199
  ]
196
200
  })
197
- }) : /* @__PURE__ */ _("div", {
198
- className: "h-full flex items-center justify-center text-text-secondary",
199
- children: /* @__PURE__ */ v("div", {
200
- className: "text-center",
201
- children: [
202
- /* @__PURE__ */ _(u, {
203
- className: "mx-auto mb-4",
204
- size: 48
205
- }),
206
- /* @__PURE__ */ _("p", {
207
- className: "mb-2",
208
- children: C("tourPreview.readyTitle")
209
- }),
210
- /* @__PURE__ */ _("p", {
211
- className: "text-sm",
212
- children: C("tourPreview.readyHint")
213
- })
214
- ]
201
+ }) : /* @__PURE__ */ g("div", {
202
+ className: "h-full flex items-center justify-center p-4",
203
+ children: /* @__PURE__ */ g(S, {
204
+ illustration: "onboarding",
205
+ title: w("tourPreview.readyTitle"),
206
+ description: w("tourPreview.readyHint")
215
207
  })
216
208
  })
217
209
  })
218
210
  }),
219
- M && /* @__PURE__ */ v("div", {
211
+ N && /* @__PURE__ */ _("div", {
220
212
  className: "border-t border-border-subtle bg-bg-surface p-3 sm:p-4 flex items-center justify-center gap-3 sm:gap-4",
221
213
  children: [
222
- /* @__PURE__ */ v("button", {
214
+ /* @__PURE__ */ _("button", {
223
215
  type: "button",
224
- onClick: H,
225
- disabled: !L,
216
+ onClick: U,
217
+ disabled: !R,
226
218
  className: "px-4 py-2 min-h-[44px] border border-border-subtle rounded-md hover:bg-accent disabled:opacity-50 disabled:cursor-not-allowed flex items-center gap-2",
227
- children: [/* @__PURE__ */ _(d, { size: 20 }), C("tourPreview.previous")]
219
+ children: [/* @__PURE__ */ g(u, { size: 20 }), w("tourPreview.previous")]
228
220
  }),
229
- /* @__PURE__ */ v("div", {
221
+ /* @__PURE__ */ _("div", {
230
222
  className: "text-sm text-text-secondary",
231
223
  children: [
232
- N + 1,
224
+ P + 1,
233
225
  " / ",
234
- F
226
+ I
235
227
  ]
236
228
  }),
237
- /* @__PURE__ */ v("button", {
229
+ /* @__PURE__ */ _("button", {
238
230
  type: "button",
239
- onClick: V,
240
- disabled: !I,
231
+ onClick: H,
232
+ disabled: !L,
241
233
  className: "px-4 py-2 min-h-[44px] border border-border-subtle rounded-md hover:bg-accent disabled:opacity-50 disabled:cursor-not-allowed flex items-center gap-2",
242
- children: [C("tourPreview.nextFooter"), /* @__PURE__ */ _(f, { size: 20 })]
234
+ children: [w("tourPreview.nextFooter"), /* @__PURE__ */ g(d, { size: 20 })]
243
235
  })
244
236
  ]
245
237
  })
@@ -247,6 +239,6 @@ function C() {
247
239
  });
248
240
  }
249
241
  //#endregion
250
- export { C as TourPreviewPage };
242
+ export { w as TourPreviewPage };
251
243
 
252
244
  //# sourceMappingURL=TourPreviewPage.js.map
package/dist/tours/pages/TourPreviewPage.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"TourPreviewPage.js","names":[],"sources":["../../../src/tours/pages/TourPreviewPage.tsx"],"sourcesContent":["import { useEffect } from 'react';\nimport { useParams, useNavigate } from 'react-router-dom';\nimport {\n ArrowLeft,\n ChevronLeft,\n ChevronRight,\n X,\n Smartphone,\n Tablet,\n Monitor,\n CheckCircle,\n AlertCircle,\n} from 'lucide-react';\nimport { Button, GlassCard } from '@burdenoff/fe-libs/ui';\nimport { useTourPreview } from '../hooks/useTourPreview';\nimport { useTourBuilder } from '../hooks/useTourBuilder';\nimport { useToursPermissionAccess } from '../hooks/useToursPermissionAccess';\nimport { useToursContext } from '../providers/ToursProvider';\nimport { useToursStore } from '../store/toursStore';\nimport { TOUR_PERMISSIONS } from '../../constants/permissions';\nimport { useToursI18n } from '../i18n';\n\n/**\n * Tour preview page\n * Preview tour with device simulation and validation\n */\nexport function TourPreviewPage() {\n const { tr } = useToursI18n();\n const { tourId } = useParams();\n const navigate = useNavigate();\n const { basePath = '/' } = useToursContext();\n const { hasPermission } = useToursPermissionAccess();\n const canReadTour = hasPermission(TOUR_PERMISSIONS.TOUR_READ);\n const { tour, loadTour } = useTourBuilder(tourId);\n const { devicePreview } = useToursStore();\n\n const {\n isPreviewActive,\n currentStepIndex,\n currentStep,\n totalSteps,\n canGoNext,\n canGoPrevious,\n validationResults,\n startPreview,\n stopPreview,\n nextStep,\n previousStep,\n changeDevice,\n validateForPreview,\n } = useTourPreview(tour || undefined);\n\n useEffect(() => {\n if (tourId) {\n loadTour(tourId);\n }\n }, [tourId, loadTour]);\n\n useEffect(() => {\n if (tour) {\n validateForPreview();\n }\n }, [tour, devicePreview, validateForPreview]);\n\n if (!canReadTour) {\n return (\n <div className=\"flex items-center justify-center h-screen bg-bg-sunken\">\n <div className=\"text-center\">\n <h2 className=\"text-lg font-semibold text-text-primary mb-2\">\n {tr('tourPreview.accessDeniedTitle')}\n </h2>\n <p className=\"text-sm text-text-secondary\">{tr('tourPreview.accessDeniedMessage')}</p>\n </div>\n </div>\n );\n }\n\n if (!tour) {\n return (\n <div className=\"flex items-center justify-center h-screen bg-bg-sunken\">\n <p className=\"text-text-secondary\">{tr('tourPreview.loading')}</p>\n </div>\n );\n }\n\n const handleBack = () => {\n navigate(`${basePath}/${tourId}/edit`);\n };\n\n const deviceIcons = {\n mobile: <Smartphone size={20} />,\n tablet: <Tablet size={20} />,\n desktop: <Monitor size={20} />,\n };\n\n return (\n <div className=\"flex flex-col h-screen bg-bg-sunken\">\n {/* Header */}\n <div className=\"border-b border-border-subtle bg-bg-surface p-3 sm:p-4 flex flex-wrap items-center gap-3 sm:gap-4\">\n <button\n type=\"button\"\n onClick={handleBack}\n className=\"p-2 min-h-[44px] min-w-[44px] hover:bg-accent rounded-md\"\n aria-label={tr('tourBuilder.goBack')}\n >\n <ArrowLeft size={20} />\n </button>\n <div className=\"flex-1 min-w-[12rem]\">\n <h1 className=\"text-base sm:text-lg font-semibold truncate\">\n {tour?.name} - {tr('tourPreview.previewSuffix')}\n </h1>\n {isPreviewActive && (\n <p className=\"text-sm text-text-secondary\">\n {tr('tourPreview.stepOf')} {currentStepIndex + 1} {tr('tourPreview.stepOfConnector')}{' '}\n {totalSteps}\n </p>\n )}\n </div>\n\n {/* Device Selector */}\n <div className=\"flex gap-2 border border-border-subtle rounded-md overflow-hidden\">\n {(['mobile', 'tablet', 'desktop'] as const).map((device) => (\n <button\n type=\"button\"\n key={device}\n onClick={() => changeDevice(device)}\n className={`px-3 py-2 min-h-[44px] min-w-[44px] ${\n devicePreview === device\n ? 'bg-action-primary-bg text-action-primary-text'\n : 'bg-bg-surface hover:bg-accent'\n }`}\n title={\n device === 'mobile'\n ? tr('tourPreview.deviceMobile')\n : device === 'tablet'\n ? tr('tourPreview.deviceTablet')\n : tr('tourPreview.deviceDesktop')\n }\n aria-label={\n device === 'mobile'\n ? tr('tourPreview.deviceMobile')\n : device === 'tablet'\n ? tr('tourPreview.deviceTablet')\n : tr('tourPreview.deviceDesktop')\n }\n >\n {deviceIcons[device]}\n </button>\n ))}\n </div>\n\n {/* Preview Controls */}\n {!isPreviewActive ? (\n <Button\n type=\"button\"\n onClick={startPreview}\n disabled={!validationResults?.valid}\n className=\"min-h-[44px]\"\n >\n {tr('tourPreview.startPreview')}\n </Button>\n ) : (\n <Button\n type=\"button\"\n variant=\"outline\"\n onClick={stopPreview}\n className=\"min-h-[44px]\"\n >\n <X size={20} />\n {tr('tourPreview.stopPreview')}\n </Button>\n )}\n </div>\n\n {/* Validation Results */}\n {validationResults && !validationResults.valid && (\n <div className=\"bg-status-error-bg/10 border-b border-status-error-border px-3 sm:px-6 py-3\">\n <div className=\"flex items-start gap-3\">\n <AlertCircle className=\"text-status-error-text flex-shrink-0 mt-0.5\" size={20} />\n <div className=\"flex-1\">\n <h3 className=\"font-semibold text-status-error-text mb-1\">\n {tr('tourPreview.validationErrorsTitle')}\n </h3>\n <ul className=\"list-disc list-inside space-y-1\">\n {validationResults.errors.map((error) => (\n <li key={error} className=\"text-sm text-status-error-text\">\n {error}\n </li>\n ))}\n </ul>\n </div>\n </div>\n </div>\n )}\n\n {/* Warnings */}\n {validationResults && validationResults.warnings.length > 0 && (\n <div className=\"bg-warning/10 border-b border-warning px-3 sm:px-6 py-3\">\n <div className=\"flex items-start gap-3\">\n <AlertCircle className=\"text-warning flex-shrink-0 mt-0.5\" size={20} />\n <div className=\"flex-1\">\n <h3 className=\"font-semibold text-warning mb-1\">{tr('tourPreview.warningsTitle')}</h3>\n <ul className=\"list-disc list-inside space-y-1\">\n {validationResults.warnings.map((warning) => (\n <li key={warning} className=\"text-sm text-warning\">\n {warning}\n </li>\n ))}\n </ul>\n </div>\n </div>\n </div>\n )}\n\n {/* Preview Area */}\n <div className=\"flex-1 flex items-center justify-center p-3 sm:p-6 overflow-auto\">\n <div\n className={`bg-bg-surface border-2 rounded-lg shadow-xl overflow-hidden ${\n devicePreview === 'mobile'\n ? 'w-[min(375px,calc(100vw-1.5rem))] h-[667px] max-h-full'\n : devicePreview === 'tablet'\n ? 'w-[min(768px,calc(100vw-1.5rem))] h-[1024px] max-h-full'\n : 'w-full max-w-[1920px] h-full max-h-[1080px]'\n }`}\n >\n {isPreviewActive && currentStep ? (\n <div className=\"h-full flex flex-col items-center justify-center p-4 sm:p-8\">\n {/* Simulated Tour Tooltip */}\n <GlassCard\n treatment=\"glass\"\n className=\"max-w-md border-border-seam p-4 sm:p-6 shadow-[var(--shadow-pop)]\"\n >\n <h3 className=\"text-lg font-semibold mb-3\">{currentStep.title}</h3>\n <p className=\"text-sm text-text-secondary mb-4 whitespace-pre-wrap\">\n {currentStep.content}\n </p>\n <div className=\"flex gap-2\">\n <button\n type=\"button\"\n onClick={previousStep}\n disabled={!canGoPrevious}\n className=\"px-3 py-2 min-h-[44px] min-w-[44px] border border-border-subtle rounded-md hover:bg-accent disabled:opacity-50 disabled:cursor-not-allowed\"\n aria-label={tr('tourPreview.previous')}\n >\n <ChevronLeft size={16} />\n </button>\n <button\n type=\"button\"\n onClick={nextStep}\n disabled={!canGoNext}\n className=\"flex-1 px-3 py-2 min-h-[44px] bg-action-primary-bg text-action-primary-text rounded-md hover:bg-action-primary-bg/90 disabled:opacity-50 disabled:cursor-not-allowed\"\n >\n {canGoNext ? tr('tourPreview.next') : tr('tourPreview.finish')}\n </button>\n </div>\n </GlassCard>\n </div>\n ) : (\n <div className=\"h-full flex items-center justify-center text-text-secondary\">\n <div className=\"text-center\">\n <CheckCircle className=\"mx-auto mb-4\" size={48} />\n <p className=\"mb-2\">{tr('tourPreview.readyTitle')}</p>\n <p className=\"text-sm\">{tr('tourPreview.readyHint')}</p>\n </div>\n </div>\n )}\n </div>\n </div>\n\n {/* Footer Controls */}\n {isPreviewActive && (\n <div className=\"border-t border-border-subtle bg-bg-surface p-3 sm:p-4 flex items-center justify-center gap-3 sm:gap-4\">\n <button\n type=\"button\"\n onClick={previousStep}\n disabled={!canGoPrevious}\n className=\"px-4 py-2 min-h-[44px] border border-border-subtle rounded-md hover:bg-accent disabled:opacity-50 disabled:cursor-not-allowed flex items-center gap-2\"\n >\n <ChevronLeft size={20} />\n {tr('tourPreview.previous')}\n </button>\n <div className=\"text-sm text-text-secondary\">\n {currentStepIndex + 1} / {totalSteps}\n </div>\n <button\n type=\"button\"\n onClick={nextStep}\n disabled={!canGoNext}\n className=\"px-4 py-2 min-h-[44px] border border-border-subtle rounded-md hover:bg-accent disabled:opacity-50 disabled:cursor-not-allowed flex items-center gap-2\"\n >\n {tr('tourPreview.nextFooter')}\n <ChevronRight size={20} />\n </button>\n </div>\n )}\n </div>\n );\n}\n"],"mappings":"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"}
1
+ {"version":3,"file":"TourPreviewPage.js","names":[],"sources":["../../../src/tours/pages/TourPreviewPage.tsx"],"sourcesContent":["import { useEffect } from 'react';\nimport { useParams, useNavigate } from 'react-router-dom';\nimport {\n ArrowLeft,\n ChevronLeft,\n ChevronRight,\n X,\n Smartphone,\n Tablet,\n Monitor,\n AlertCircle,\n} from 'lucide-react';\nimport { Button, GlassCard, IllustratedEmptyState, PagePurpose } from '@burdenoff/fe-libs/ui';\nimport { useTourPreview } from '../hooks/useTourPreview';\nimport { useTourBuilder } from '../hooks/useTourBuilder';\nimport { useToursPermissionAccess } from '../hooks/useToursPermissionAccess';\nimport { useToursContext } from '../providers/ToursProvider';\nimport { useToursStore } from '../store/toursStore';\nimport { TOUR_PERMISSIONS } from '../../constants/permissions';\nimport { useToursI18n } from '../i18n';\n\n/**\n * Tour preview page\n * Preview tour with device simulation and validation\n */\nexport function TourPreviewPage() {\n const { tr } = useToursI18n();\n const { tourId } = useParams();\n const navigate = useNavigate();\n const { basePath = '/' } = useToursContext();\n const { hasPermission } = useToursPermissionAccess();\n const canReadTour = hasPermission(TOUR_PERMISSIONS.TOUR_READ);\n const { tour, loadTour } = useTourBuilder(tourId);\n const { devicePreview } = useToursStore();\n\n const {\n isPreviewActive,\n currentStepIndex,\n currentStep,\n totalSteps,\n canGoNext,\n canGoPrevious,\n validationResults,\n startPreview,\n stopPreview,\n nextStep,\n previousStep,\n changeDevice,\n validateForPreview,\n } = useTourPreview(tour || undefined);\n\n useEffect(() => {\n if (tourId) {\n loadTour(tourId);\n }\n }, [tourId, loadTour]);\n\n useEffect(() => {\n if (tour) {\n validateForPreview();\n }\n }, [tour, devicePreview, validateForPreview]);\n\n if (!canReadTour) {\n return (\n <div className=\"flex items-center justify-center h-screen bg-bg-sunken\">\n <div className=\"text-center\">\n <h2 className=\"text-lg font-semibold text-text-primary mb-2\">\n {tr('tourPreview.accessDeniedTitle')}\n </h2>\n <p className=\"text-sm text-text-secondary\">{tr('tourPreview.accessDeniedMessage')}</p>\n </div>\n </div>\n );\n }\n\n if (!tour) {\n return (\n <div className=\"flex items-center justify-center h-screen bg-bg-sunken\">\n <p className=\"text-text-secondary\">{tr('tourPreview.loading')}</p>\n </div>\n );\n }\n\n const handleBack = () => {\n navigate(`${basePath}/${tourId}/edit`);\n };\n\n const deviceIcons = {\n mobile: <Smartphone size={20} />,\n tablet: <Tablet size={20} />,\n desktop: <Monitor size={20} />,\n };\n\n return (\n <div className=\"flex flex-col h-screen bg-bg-sunken\">\n {/* Header */}\n <div className=\"border-b border-border-subtle bg-bg-surface p-3 sm:p-4 flex flex-wrap items-center gap-3 sm:gap-4\">\n <button\n type=\"button\"\n onClick={handleBack}\n className=\"p-2 min-h-[44px] min-w-[44px] hover:bg-accent rounded-md\"\n aria-label={tr('tourBuilder.goBack')}\n >\n <ArrowLeft size={20} />\n </button>\n <div className=\"flex-1 min-w-[12rem]\">\n <h1 className=\"text-base sm:text-lg font-semibold truncate\">\n {tour?.name} - {tr('tourPreview.previewSuffix')}\n </h1>\n {isPreviewActive && (\n <p className=\"text-sm text-text-secondary\">\n {tr('tourPreview.stepOf')} {currentStepIndex + 1} {tr('tourPreview.stepOfConnector')}{' '}\n {totalSteps}\n </p>\n )}\n </div>\n\n {/* Device Selector */}\n <div className=\"flex gap-2 border border-border-subtle rounded-md overflow-hidden\">\n {(['mobile', 'tablet', 'desktop'] as const).map((device) => (\n <button\n type=\"button\"\n key={device}\n onClick={() => changeDevice(device)}\n className={`px-3 py-2 min-h-[44px] min-w-[44px] ${\n devicePreview === device\n ? 'bg-action-primary-bg text-action-primary-text'\n : 'bg-bg-surface hover:bg-accent'\n }`}\n title={\n device === 'mobile'\n ? tr('tourPreview.deviceMobile')\n : device === 'tablet'\n ? tr('tourPreview.deviceTablet')\n : tr('tourPreview.deviceDesktop')\n }\n aria-label={\n device === 'mobile'\n ? tr('tourPreview.deviceMobile')\n : device === 'tablet'\n ? tr('tourPreview.deviceTablet')\n : tr('tourPreview.deviceDesktop')\n }\n >\n {deviceIcons[device]}\n </button>\n ))}\n </div>\n\n {/* Preview Controls */}\n {!isPreviewActive ? (\n <Button\n type=\"button\"\n onClick={startPreview}\n disabled={!validationResults?.valid}\n className=\"min-h-[44px]\"\n >\n {tr('tourPreview.startPreview')}\n </Button>\n ) : (\n <Button\n type=\"button\"\n variant=\"outline\"\n onClick={stopPreview}\n className=\"min-h-[44px]\"\n >\n <X size={20} />\n {tr('tourPreview.stopPreview')}\n </Button>\n )}\n </div>\n\n <div className=\"px-3 sm:px-6 pt-3\">\n <PagePurpose>{tr('tourPreview.purpose')}</PagePurpose>\n </div>\n\n {/* Validation Results */}\n {validationResults && !validationResults.valid && (\n <div className=\"bg-status-error-bg/10 border-b border-status-error-border px-3 sm:px-6 py-3\">\n <div className=\"flex items-start gap-3\">\n <AlertCircle className=\"text-status-error-text flex-shrink-0 mt-0.5\" size={20} />\n <div className=\"flex-1\">\n <h3 className=\"font-semibold text-status-error-text mb-1\">\n {tr('tourPreview.validationErrorsTitle')}\n </h3>\n <ul className=\"list-disc list-inside space-y-1\">\n {validationResults.errors.map((error) => (\n <li key={error} className=\"text-sm text-status-error-text\">\n {error}\n </li>\n ))}\n </ul>\n </div>\n </div>\n </div>\n )}\n\n {/* Warnings */}\n {validationResults && validationResults.warnings.length > 0 && (\n <div className=\"bg-warning/10 border-b border-warning px-3 sm:px-6 py-3\">\n <div className=\"flex items-start gap-3\">\n <AlertCircle className=\"text-warning flex-shrink-0 mt-0.5\" size={20} />\n <div className=\"flex-1\">\n <h3 className=\"font-semibold text-warning mb-1\">{tr('tourPreview.warningsTitle')}</h3>\n <ul className=\"list-disc list-inside space-y-1\">\n {validationResults.warnings.map((warning) => (\n <li key={warning} className=\"text-sm text-warning\">\n {warning}\n </li>\n ))}\n </ul>\n </div>\n </div>\n </div>\n )}\n\n {/* Preview Area */}\n <div className=\"flex-1 flex items-center justify-center p-3 sm:p-6 overflow-auto\">\n <div\n className={`bg-bg-surface border-2 rounded-lg shadow-xl overflow-hidden ${\n devicePreview === 'mobile'\n ? 'w-[min(375px,calc(100vw-1.5rem))] h-[667px] max-h-full'\n : devicePreview === 'tablet'\n ? 'w-[min(768px,calc(100vw-1.5rem))] h-[1024px] max-h-full'\n : 'w-full max-w-[1920px] h-full max-h-[1080px]'\n }`}\n >\n {isPreviewActive && currentStep ? (\n <div className=\"h-full flex flex-col items-center justify-center p-4 sm:p-8\">\n {/* Simulated Tour Tooltip */}\n <GlassCard\n treatment=\"glass\"\n className=\"max-w-md border-border-seam p-4 sm:p-6 shadow-[var(--shadow-pop)]\"\n >\n <h3 className=\"text-lg font-semibold mb-3\">{currentStep.title}</h3>\n <p className=\"text-sm text-text-secondary mb-4 whitespace-pre-wrap\">\n {currentStep.content}\n </p>\n <div className=\"flex gap-2\">\n <button\n type=\"button\"\n onClick={previousStep}\n disabled={!canGoPrevious}\n className=\"px-3 py-2 min-h-[44px] min-w-[44px] border border-border-subtle rounded-md hover:bg-accent disabled:opacity-50 disabled:cursor-not-allowed\"\n aria-label={tr('tourPreview.previous')}\n >\n <ChevronLeft size={16} />\n </button>\n <button\n type=\"button\"\n onClick={nextStep}\n disabled={!canGoNext}\n className=\"flex-1 px-3 py-2 min-h-[44px] bg-action-primary-bg text-action-primary-text rounded-md hover:bg-action-primary-bg/90 disabled:opacity-50 disabled:cursor-not-allowed\"\n >\n {canGoNext ? tr('tourPreview.next') : tr('tourPreview.finish')}\n </button>\n </div>\n </GlassCard>\n </div>\n ) : (\n <div className=\"h-full flex items-center justify-center p-4\">\n <IllustratedEmptyState\n illustration=\"onboarding\"\n title={tr('tourPreview.readyTitle')}\n description={tr('tourPreview.readyHint')}\n />\n </div>\n )}\n </div>\n </div>\n\n {/* Footer Controls */}\n {isPreviewActive && (\n <div className=\"border-t border-border-subtle bg-bg-surface p-3 sm:p-4 flex items-center justify-center gap-3 sm:gap-4\">\n <button\n type=\"button\"\n onClick={previousStep}\n disabled={!canGoPrevious}\n className=\"px-4 py-2 min-h-[44px] border border-border-subtle rounded-md hover:bg-accent disabled:opacity-50 disabled:cursor-not-allowed flex items-center gap-2\"\n >\n <ChevronLeft size={20} />\n {tr('tourPreview.previous')}\n </button>\n <div className=\"text-sm text-text-secondary\">\n {currentStepIndex + 1} / {totalSteps}\n </div>\n <button\n type=\"button\"\n onClick={nextStep}\n disabled={!canGoNext}\n className=\"px-4 py-2 min-h-[44px] border border-border-subtle rounded-md hover:bg-accent disabled:opacity-50 disabled:cursor-not-allowed flex items-center gap-2\"\n >\n {tr('tourPreview.nextFooter')}\n <ChevronRight size={20} />\n </button>\n </div>\n )}\n </div>\n );\n}\n"],"mappings":"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"}