stepsnap 0.2.0 → 0.2.1

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 (11) hide show
  1. package/LICENSE +661 -661
  2. package/README.md +257 -257
  3. package/dist/components/WalkthroughViewer.d.ts +2 -1
  4. package/dist/{index.es-dUY33K7W.js → index.es-RGorbUvo.js} +3 -3
  5. package/dist/{jspdf.es.min-COy_kolw.js → jspdf.es.min-CjXCOyq2.js} +1 -1
  6. package/dist/stepsnap.js +306 -233
  7. package/dist/stepsnap.umd.cjs +46 -46
  8. package/dist/types.d.ts +1 -0
  9. package/package.json +62 -62
  10. package/dist/favicon.svg +0 -1
  11. package/dist/icons.svg +0 -24
package/dist/stepsnap.js CHANGED
@@ -4,7 +4,19 @@ import { jsx as r, jsxs as i } from "react/jsx-runtime";
4
4
  function a() {
5
5
  return Math.random().toString(36).slice(2, 10);
6
6
  }
7
- var o = (e) => ({
7
+ async function o(e, t = 1920, n = .82) {
8
+ return new Promise((r) => {
9
+ let i = new Image(), a = URL.createObjectURL(e);
10
+ i.onload = () => {
11
+ URL.revokeObjectURL(a);
12
+ let o = Math.min(1, t / i.width), s = document.createElement("canvas");
13
+ s.width = Math.round(i.width * o), s.height = Math.round(i.height * o), s.getContext("2d").drawImage(i, 0, 0, s.width, s.height), s.toBlob((t) => r(t ? new File([t], e.name.replace(/\.[^.]+$/, ".jpg"), { type: "image/jpeg" }) : e), "image/jpeg", n);
14
+ }, i.onerror = () => {
15
+ URL.revokeObjectURL(a), r(e);
16
+ }, i.src = a;
17
+ });
18
+ }
19
+ var s = (e) => ({
8
20
  type: "circle",
9
21
  x: 50,
10
22
  y: 50,
@@ -12,7 +24,7 @@ var o = (e) => ({
12
24
  animated: !0,
13
25
  size: 40,
14
26
  zoom: !1
15
- }), s = () => /* @__PURE__ */ r("svg", {
27
+ }), c = () => /* @__PURE__ */ r("svg", {
16
28
  width: "13",
17
29
  height: "13",
18
30
  viewBox: "0 0 24 24",
@@ -20,7 +32,7 @@ var o = (e) => ({
20
32
  stroke: "currentColor",
21
33
  strokeWidth: "2.5",
22
34
  children: /* @__PURE__ */ r("path", { d: "M18 15l-6-6-6 6" })
23
- }), c = () => /* @__PURE__ */ r("svg", {
35
+ }), l = () => /* @__PURE__ */ r("svg", {
24
36
  width: "13",
25
37
  height: "13",
26
38
  viewBox: "0 0 24 24",
@@ -28,7 +40,7 @@ var o = (e) => ({
28
40
  stroke: "currentColor",
29
41
  strokeWidth: "2.5",
30
42
  children: /* @__PURE__ */ r("path", { d: "M6 9l6 6 6-6" })
31
- }), l = () => /* @__PURE__ */ r("svg", {
43
+ }), u = () => /* @__PURE__ */ r("svg", {
32
44
  width: "13",
33
45
  height: "13",
34
46
  viewBox: "0 0 24 24",
@@ -36,7 +48,7 @@ var o = (e) => ({
36
48
  stroke: "currentColor",
37
49
  strokeWidth: "2.5",
38
50
  children: /* @__PURE__ */ r("path", { d: "M18 6L6 18M6 6l12 12" })
39
- }), u = () => /* @__PURE__ */ r("svg", {
51
+ }), d = () => /* @__PURE__ */ r("svg", {
40
52
  width: "14",
41
53
  height: "14",
42
54
  viewBox: "0 0 24 24",
@@ -44,7 +56,7 @@ var o = (e) => ({
44
56
  stroke: "currentColor",
45
57
  strokeWidth: "2.5",
46
58
  children: /* @__PURE__ */ r("path", { d: "M12 5v14M5 12h14" })
47
- }), d = () => /* @__PURE__ */ i("svg", {
59
+ }), f = () => /* @__PURE__ */ i("svg", {
48
60
  width: "28",
49
61
  height: "28",
50
62
  viewBox: "0 0 24 24",
@@ -63,7 +75,7 @@ var o = (e) => ({
63
75
  y2: "15"
64
76
  })
65
77
  ]
66
- }), f = ({ color: e, size: t }) => /* @__PURE__ */ r("svg", {
78
+ }), p = ({ color: e, size: t }) => /* @__PURE__ */ r("svg", {
67
79
  width: t,
68
80
  height: t,
69
81
  viewBox: "0 0 24 24",
@@ -71,10 +83,10 @@ var o = (e) => ({
71
83
  style: { display: "block" },
72
84
  children: /* @__PURE__ */ r("path", { d: "M12 2L5 12h4.5v9h5v-9H19L12 2z" })
73
85
  });
74
- function p({ data: e, onChange: p, onUpload: h, accentColor: g = "#6366f1" }) {
75
- let [_, v] = n(null), [y, b] = n(!1), [x, S] = n(null), C = t({});
76
- function w(t, n) {
77
- p({
86
+ function m({ data: e, onChange: m, onUpload: g, accentColor: _ = "#6366f1" }) {
87
+ let [v, y] = n(null), [b, x] = n(!1), [S, C] = n(null), [w, T] = n(null), E = t({});
88
+ function D(t, n) {
89
+ m({
78
90
  ...e,
79
91
  steps: e.steps.map((e) => e.id === t ? {
80
92
  ...e,
@@ -82,144 +94,188 @@ function p({ data: e, onChange: p, onUpload: h, accentColor: g = "#6366f1" }) {
82
94
  } : e)
83
95
  });
84
96
  }
85
- function T() {
97
+ function O() {
86
98
  let t = {
87
99
  id: a(),
88
100
  imageUrl: "",
89
101
  caption: ""
90
102
  };
91
- p({
103
+ m({
92
104
  ...e,
93
105
  steps: [...e.steps, t]
94
- }), v(t.id), b(!1);
106
+ }), y(t.id), x(!1);
95
107
  }
96
- function E(t) {
97
- p({
108
+ function k(t) {
109
+ m({
98
110
  ...e,
99
111
  steps: e.steps.filter((e) => e.id !== t)
100
- }), _ === t && v(null);
112
+ }), v === t && y(null);
101
113
  }
102
- function D(t, n) {
114
+ function A(t, n) {
103
115
  let r = e.steps.findIndex((e) => e.id === t), i = r + n;
104
116
  if (i < 0 || i >= e.steps.length) return;
105
117
  let a = [...e.steps];
106
- [a[r], a[i]] = [a[i], a[r]], p({
118
+ [a[r], a[i]] = [a[i], a[r]], m({
107
119
  ...e,
108
120
  steps: a
109
121
  });
110
122
  }
111
- async function O(e, t) {
112
- S(e);
123
+ async function j(e, t) {
124
+ T(e);
125
+ let n = await o(t);
126
+ T(null), C(e);
113
127
  try {
114
- w(e, { imageUrl: await h(t) });
128
+ D(e, { imageUrl: await g(n) });
115
129
  } finally {
116
- S(null);
130
+ C(null);
117
131
  }
118
132
  }
119
- function k(e, t) {
120
- if (!y) return;
133
+ function M(e, t) {
134
+ if (!b) return;
121
135
  let n = e.currentTarget.getBoundingClientRect();
122
- w(t.id, { annotation: {
123
- ...t.annotation ?? o(g),
136
+ D(t.id, { annotation: {
137
+ ...t.annotation ?? s(_),
124
138
  x: Math.round((e.clientX - n.left) / n.width * 1e3) / 10,
125
139
  y: Math.round((e.clientY - n.top) / n.height * 1e3) / 10
126
- } }), b(!1);
140
+ } }), x(!1);
127
141
  }
128
142
  return /* @__PURE__ */ i("div", {
129
- style: m.root,
143
+ style: h.root,
130
144
  children: [
131
145
  /* @__PURE__ */ i("div", {
132
- style: m.field,
146
+ style: h.field,
133
147
  children: [/* @__PURE__ */ r("label", {
134
- style: m.label,
148
+ style: h.label,
135
149
  children: "Titre"
136
150
  }), /* @__PURE__ */ r("input", {
137
- style: m.input,
151
+ style: h.input,
138
152
  value: e.title,
139
- onChange: (t) => p({
153
+ onChange: (t) => m({
140
154
  ...e,
141
155
  title: t.target.value
142
156
  }),
143
157
  placeholder: "Comment créer un utilisateur…"
144
158
  })]
145
159
  }),
160
+ /* @__PURE__ */ i("div", {
161
+ style: h.field,
162
+ children: [/* @__PURE__ */ r("label", {
163
+ style: h.label,
164
+ children: "Hauteur des diapositives"
165
+ }), /* @__PURE__ */ r("div", {
166
+ style: h.segGroup,
167
+ children: [
168
+ {
169
+ label: "Compact",
170
+ value: 320
171
+ },
172
+ {
173
+ label: "Moyen",
174
+ value: 480
175
+ },
176
+ {
177
+ label: "Large",
178
+ value: 640
179
+ },
180
+ {
181
+ label: "Plein",
182
+ value: void 0
183
+ }
184
+ ].map(({ label: t, value: n }) => {
185
+ let i = n === void 0 ? e.maxHeight === void 0 : e.maxHeight === n;
186
+ return /* @__PURE__ */ r("button", {
187
+ style: {
188
+ ...h.seg,
189
+ flex: 1,
190
+ background: i ? _ : "transparent",
191
+ color: i ? "#fff" : "#666"
192
+ },
193
+ onClick: () => m({
194
+ ...e,
195
+ maxHeight: n
196
+ }),
197
+ children: t
198
+ }, t);
199
+ })
200
+ })]
201
+ }),
146
202
  e.steps.map((t, n) => {
147
- let a = _ === t.id, u = t.annotation?.size ?? 40;
203
+ let a = v === t.id, o = t.annotation?.size ?? 40;
148
204
  return /* @__PURE__ */ i("div", {
149
205
  style: {
150
- ...m.card,
151
- ...a ? m.cardOpen : {}
206
+ ...h.card,
207
+ ...a ? h.cardOpen : {}
152
208
  },
153
209
  children: [/* @__PURE__ */ i("div", {
154
- style: m.row,
210
+ style: h.row,
155
211
  onClick: () => {
156
- v(a ? null : t.id), b(!1);
212
+ y(a ? null : t.id), x(!1);
157
213
  },
158
214
  children: [
159
215
  /* @__PURE__ */ r("span", {
160
216
  style: {
161
- ...m.num,
162
- background: a ? g : "#1e1e2c",
217
+ ...h.num,
218
+ background: a ? _ : "#1e1e2c",
163
219
  color: a ? "#fff" : "#555"
164
220
  },
165
221
  children: n + 1
166
222
  }),
167
223
  t.imageUrl && /* @__PURE__ */ r("img", {
168
224
  src: t.imageUrl,
169
- style: m.thumb,
225
+ style: h.thumb,
170
226
  alt: ""
171
227
  }),
172
228
  /* @__PURE__ */ r("span", {
173
- style: m.rowLabel,
229
+ style: h.rowLabel,
174
230
  children: t.caption || "Sans légende"
175
231
  }),
176
232
  /* @__PURE__ */ i("div", {
177
- style: m.rowActions,
233
+ style: h.rowActions,
178
234
  onClick: (e) => e.stopPropagation(),
179
235
  children: [
180
236
  /* @__PURE__ */ r("button", {
181
- style: m.iconBtn,
182
- onClick: () => D(t.id, -1),
237
+ style: h.iconBtn,
238
+ onClick: () => A(t.id, -1),
183
239
  disabled: n === 0,
184
- children: /* @__PURE__ */ r(s, {})
240
+ children: /* @__PURE__ */ r(c, {})
185
241
  }),
186
242
  /* @__PURE__ */ r("button", {
187
- style: m.iconBtn,
188
- onClick: () => D(t.id, 1),
243
+ style: h.iconBtn,
244
+ onClick: () => A(t.id, 1),
189
245
  disabled: n === e.steps.length - 1,
190
- children: /* @__PURE__ */ r(c, {})
246
+ children: /* @__PURE__ */ r(l, {})
191
247
  }),
192
248
  /* @__PURE__ */ r("button", {
193
249
  style: {
194
- ...m.iconBtn,
250
+ ...h.iconBtn,
195
251
  color: "#ef4444"
196
252
  },
197
- onClick: () => E(t.id),
198
- children: /* @__PURE__ */ r(l, {})
253
+ onClick: () => k(t.id),
254
+ children: /* @__PURE__ */ r(u, {})
199
255
  })
200
256
  ]
201
257
  }),
202
258
  /* @__PURE__ */ r("div", {
203
259
  style: {
204
- ...m.chevron,
260
+ ...h.chevron,
205
261
  transform: a ? "rotate(180deg)" : "rotate(0deg)"
206
262
  },
207
- children: /* @__PURE__ */ r(c, {})
263
+ children: /* @__PURE__ */ r(l, {})
208
264
  })
209
265
  ]
210
266
  }), a && /* @__PURE__ */ i("div", {
211
- style: m.panel,
267
+ style: h.panel,
212
268
  children: [
213
269
  t.imageUrl ? /* @__PURE__ */ i("div", { children: [/* @__PURE__ */ i("div", {
214
270
  style: {
215
- ...m.imgWrap,
216
- cursor: y ? "crosshair" : "default"
271
+ ...h.imgWrap,
272
+ cursor: b ? "crosshair" : "default"
217
273
  },
218
- onClick: (e) => k(e, t),
274
+ onClick: (e) => M(e, t),
219
275
  children: [
220
276
  /* @__PURE__ */ r("img", {
221
277
  src: t.imageUrl,
222
- style: m.previewImg,
278
+ style: h.previewImg,
223
279
  alt: "",
224
280
  draggable: !1
225
281
  }),
@@ -229,8 +285,8 @@ function p({ data: e, onChange: p, onUpload: h, accentColor: g = "#6366f1" }) {
229
285
  borderRadius: "50%",
230
286
  border: "3px solid",
231
287
  borderColor: t.annotation.color,
232
- width: u,
233
- height: u,
288
+ width: o,
289
+ height: o,
234
290
  left: `${t.annotation.x}%`,
235
291
  top: `${t.annotation.y}%`,
236
292
  transform: "translate(-50%,-50%)",
@@ -240,8 +296,8 @@ function p({ data: e, onChange: p, onUpload: h, accentColor: g = "#6366f1" }) {
240
296
  justifyContent: "center"
241
297
  },
242
298
  children: /* @__PURE__ */ r("div", { style: {
243
- width: u * .22,
244
- height: u * .22,
299
+ width: o * .22,
300
+ height: o * .22,
245
301
  borderRadius: "50%",
246
302
  background: t.annotation.color,
247
303
  opacity: .85
@@ -254,106 +310,106 @@ function p({ data: e, onChange: p, onUpload: h, accentColor: g = "#6366f1" }) {
254
310
  transform: "translate(-50%,-50%)",
255
311
  pointerEvents: "none"
256
312
  },
257
- children: /* @__PURE__ */ r(f, {
313
+ children: /* @__PURE__ */ r(p, {
258
314
  color: t.annotation.color,
259
- size: u
315
+ size: o
260
316
  })
261
317
  })),
262
- y && /* @__PURE__ */ r("div", {
263
- style: m.placingOverlay,
318
+ b && /* @__PURE__ */ r("div", {
319
+ style: h.placingOverlay,
264
320
  children: "🎯 Cliquez pour placer l'annotation"
265
321
  })
266
322
  ]
267
323
  }), /* @__PURE__ */ r("button", {
268
- style: m.changeBtn,
324
+ style: h.changeBtn,
269
325
  onClick: () => {
270
- w(t.id, {
326
+ D(t.id, {
271
327
  imageUrl: "",
272
328
  annotation: void 0
273
- }), b(!1);
329
+ }), x(!1);
274
330
  },
275
331
  children: "Changer l'image"
276
332
  })] }) : /* @__PURE__ */ i("div", {
277
333
  style: {
278
- ...m.dropZone,
279
- borderColor: x === t.id ? g : "#2a2a38"
334
+ ...h.dropZone,
335
+ borderColor: w === t.id || S === t.id ? _ : "#2a2a38"
280
336
  },
281
- onClick: () => C.current[t.id]?.click(),
337
+ onClick: () => !(w === t.id || S === t.id) && E.current[t.id]?.click(),
282
338
  children: [
283
- /* @__PURE__ */ r(d, {}),
339
+ /* @__PURE__ */ r(f, {}),
284
340
  /* @__PURE__ */ r("span", {
285
- style: m.dropText,
286
- children: x === t.id ? "Upload…" : "Uploader un screenshot"
341
+ style: h.dropText,
342
+ children: w === t.id ? "Compression…" : S === t.id ? "Upload…" : "Uploader un screenshot"
287
343
  }),
288
344
  /* @__PURE__ */ r("span", {
289
- style: m.dropHint,
345
+ style: h.dropHint,
290
346
  children: "PNG · JPG · WebP"
291
347
  }),
292
348
  /* @__PURE__ */ r("input", {
293
349
  ref: (e) => {
294
- C.current[t.id] = e;
350
+ E.current[t.id] = e;
295
351
  },
296
352
  type: "file",
297
353
  accept: "image/*",
298
354
  style: { display: "none" },
299
- onChange: (e) => e.target.files?.[0] && O(t.id, e.target.files[0])
355
+ onChange: (e) => e.target.files?.[0] && j(t.id, e.target.files[0])
300
356
  })
301
357
  ]
302
358
  }),
303
359
  t.imageUrl && /* @__PURE__ */ i("div", {
304
- style: m.section,
360
+ style: h.section,
305
361
  children: [
306
362
  /* @__PURE__ */ r("label", {
307
- style: m.label,
363
+ style: h.label,
308
364
  children: "Annotation"
309
365
  }),
310
366
  /* @__PURE__ */ i("div", {
311
- style: m.annotRow,
367
+ style: h.annotRow,
312
368
  children: [
313
369
  /* @__PURE__ */ r("div", {
314
- style: m.segGroup,
370
+ style: h.segGroup,
315
371
  children: ["circle", "arrow"].map((e) => /* @__PURE__ */ r("button", {
316
372
  style: {
317
- ...m.seg,
318
- background: (t.annotation?.type ?? "circle") === e ? g : "transparent",
373
+ ...h.seg,
374
+ background: (t.annotation?.type ?? "circle") === e ? _ : "transparent",
319
375
  color: (t.annotation?.type ?? "circle") === e ? "#fff" : "#666"
320
376
  },
321
- onClick: () => w(t.id, { annotation: {
322
- ...t.annotation ?? o(g),
377
+ onClick: () => D(t.id, { annotation: {
378
+ ...t.annotation ?? s(_),
323
379
  type: e
324
380
  } }),
325
381
  children: e === "circle" ? "⭕ Cercle" : "↑ Flèche"
326
382
  }, e))
327
383
  }),
328
384
  /* @__PURE__ */ r("div", {
329
- style: m.colorBox,
385
+ style: h.colorBox,
330
386
  children: /* @__PURE__ */ r("input", {
331
387
  type: "color",
332
- style: m.colorInput,
333
- value: t.annotation?.color ?? g,
334
- onChange: (e) => w(t.id, { annotation: {
335
- ...t.annotation ?? o(g),
388
+ style: h.colorInput,
389
+ value: t.annotation?.color ?? _,
390
+ onChange: (e) => D(t.id, { annotation: {
391
+ ...t.annotation ?? s(_),
336
392
  color: e.target.value
337
393
  } })
338
394
  })
339
395
  }),
340
396
  /* @__PURE__ */ r("button", {
341
397
  style: {
342
- ...m.placeBtn,
343
- background: y ? "#fef3c7" : "transparent",
344
- color: y ? "#92400e" : "#aaa",
345
- borderColor: y ? "#f59e0b" : "#2a2a38"
398
+ ...h.placeBtn,
399
+ background: b ? "#fef3c7" : "transparent",
400
+ color: b ? "#92400e" : "#aaa",
401
+ borderColor: b ? "#f59e0b" : "#2a2a38"
346
402
  },
347
- onClick: () => b((e) => !e),
348
- children: y ? "✕" : t.annotation ? "↖ Repo." : "↖ Placer"
403
+ onClick: () => x((e) => !e),
404
+ children: b ? "✕" : t.annotation ? "↖ Repo." : "↖ Placer"
349
405
  })
350
406
  ]
351
407
  }),
352
408
  /* @__PURE__ */ i("div", {
353
- style: m.sizeRow,
409
+ style: h.sizeRow,
354
410
  children: [
355
411
  /* @__PURE__ */ r("span", {
356
- style: m.sizeLabel,
412
+ style: h.sizeLabel,
357
413
  children: "Taille"
358
414
  }),
359
415
  /* @__PURE__ */ r("input", {
@@ -364,21 +420,21 @@ function p({ data: e, onChange: p, onUpload: h, accentColor: g = "#6366f1" }) {
364
420
  value: t.annotation?.size ?? 40,
365
421
  style: {
366
422
  flex: 1,
367
- accentColor: g
423
+ accentColor: _
368
424
  },
369
- onChange: (e) => w(t.id, { annotation: {
370
- ...t.annotation ?? o(g),
425
+ onChange: (e) => D(t.id, { annotation: {
426
+ ...t.annotation ?? s(_),
371
427
  size: Number(e.target.value)
372
428
  } })
373
429
  }),
374
430
  /* @__PURE__ */ i("span", {
375
- style: m.sizeVal,
431
+ style: h.sizeVal,
376
432
  children: [t.annotation?.size ?? 40, "px"]
377
433
  })
378
434
  ]
379
435
  }),
380
436
  /* @__PURE__ */ r("div", {
381
- style: m.toggles,
437
+ style: h.toggles,
382
438
  children: [{
383
439
  key: "animated",
384
440
  label: "Animation"
@@ -386,21 +442,21 @@ function p({ data: e, onChange: p, onUpload: h, accentColor: g = "#6366f1" }) {
386
442
  key: "zoom",
387
443
  label: "Zoom auto"
388
444
  }].map(({ key: e, label: n }) => {
389
- let a = t.annotation?.[e] ?? !1, s = a ? g + "20" : "transparent", c = a ? g + "50" : "#2a2a38";
445
+ let a = t.annotation?.[e] ?? !1, o = a ? _ + "20" : "transparent", c = a ? _ + "50" : "#2a2a38";
390
446
  return /* @__PURE__ */ i("button", {
391
447
  style: {
392
- ...m.toggle,
393
- background: s,
394
- color: a ? g : "#555",
448
+ ...h.toggle,
449
+ background: o,
450
+ color: a ? _ : "#555",
395
451
  borderColor: c
396
452
  },
397
- onClick: () => w(t.id, { annotation: {
398
- ...t.annotation ?? o(g),
453
+ onClick: () => D(t.id, { annotation: {
454
+ ...t.annotation ?? s(_),
399
455
  [e]: !a
400
456
  } }),
401
457
  children: [/* @__PURE__ */ r("div", { style: {
402
- ...m.toggleDot,
403
- background: a ? g : "#333"
458
+ ...h.toggleDot,
459
+ background: a ? _ : "#333"
404
460
  } }), n]
405
461
  }, e);
406
462
  })
@@ -408,14 +464,14 @@ function p({ data: e, onChange: p, onUpload: h, accentColor: g = "#6366f1" }) {
408
464
  ]
409
465
  }),
410
466
  /* @__PURE__ */ i("div", {
411
- style: m.section,
467
+ style: h.section,
412
468
  children: [/* @__PURE__ */ r("label", {
413
- style: m.label,
469
+ style: h.label,
414
470
  children: "Légende"
415
471
  }), /* @__PURE__ */ r("input", {
416
- style: m.input,
472
+ style: h.input,
417
473
  value: t.caption ?? "",
418
- onChange: (e) => w(t.id, { caption: e.target.value }),
474
+ onChange: (e) => D(t.id, { caption: e.target.value }),
419
475
  placeholder: "Cliquez sur l'onglet Paramètres…"
420
476
  })]
421
477
  })
@@ -425,17 +481,17 @@ function p({ data: e, onChange: p, onUpload: h, accentColor: g = "#6366f1" }) {
425
481
  }),
426
482
  /* @__PURE__ */ i("button", {
427
483
  style: {
428
- ...m.addBtn,
429
- borderColor: `${g}40`,
430
- color: g
484
+ ...h.addBtn,
485
+ borderColor: `${_}40`,
486
+ color: _
431
487
  },
432
- onClick: T,
433
- children: [/* @__PURE__ */ r(u, {}), " Ajouter une étape"]
488
+ onClick: O,
489
+ children: [/* @__PURE__ */ r(d, {}), " Ajouter une étape"]
434
490
  })
435
491
  ]
436
492
  });
437
493
  }
438
- var m = {
494
+ var h = {
439
495
  root: {
440
496
  display: "flex",
441
497
  flexDirection: "column",
@@ -571,7 +627,10 @@ var m = {
571
627
  width: "100%",
572
628
  display: "block",
573
629
  borderRadius: 8,
574
- border: "1px solid #1e1e2a"
630
+ border: "1px solid #1e1e2a",
631
+ maxHeight: 380,
632
+ objectFit: "contain",
633
+ background: "#000"
575
634
  },
576
635
  placingOverlay: {
577
636
  position: "absolute",
@@ -698,7 +757,7 @@ var m = {
698
757
  fontWeight: 700,
699
758
  cursor: "pointer"
700
759
  }
701
- }, h = ({ color: e, size: t }) => /* @__PURE__ */ r("svg", {
760
+ }, g = ({ color: e, size: t }) => /* @__PURE__ */ r("svg", {
702
761
  width: t,
703
762
  height: t,
704
763
  viewBox: "0 0 24 24",
@@ -708,48 +767,48 @@ var m = {
708
767
  filter: `drop-shadow(0 2px 8px ${e}99)`
709
768
  },
710
769
  children: /* @__PURE__ */ r("path", { d: "M12 2L5 12h4.5v9h5v-9H19L12 2z" })
711
- }), g = 2.2, _ = 380;
712
- function v({ data: a, accentColor: o = "#6366f1" }) {
713
- let [s, c] = n(!1), [l, u] = n(0), [d, f] = n(!1), [p, m] = n("next"), [v, b] = n(!1), [x, S] = n(!1), [C, w] = n(!1), T = t(null), E = t(null), D = t(null), O = a.steps.length, k = a.steps[l], A = k?.annotation;
770
+ }), _ = 2.2, v = 380;
771
+ function y({ data: a, accentColor: o = "#6366f1", maxHeight: s }) {
772
+ let c = s ?? 480, [l, u] = n(!1), [d, f] = n(0), [p, m] = n(!1), [h, y] = n("next"), [x, S] = n(!1), [C, w] = n(!1), [T, E] = n(!1), D = t(null), O = t(null), k = t(null), A = a.steps.length, j = a.steps[d], M = j?.annotation;
714
773
  if (e(() => {
715
- if (s) return b(!1), E.current && clearTimeout(E.current), A?.zoom && (E.current = setTimeout(() => b(!0), _)), () => {
716
- E.current && clearTimeout(E.current);
774
+ if (l) return S(!1), O.current && clearTimeout(O.current), M?.zoom && (O.current = setTimeout(() => S(!0), v)), () => {
775
+ O.current && clearTimeout(O.current);
717
776
  };
718
- }, [l, s]), e(() => () => {
719
- T.current && clearTimeout(T.current), E.current && clearTimeout(E.current);
777
+ }, [d, l]), e(() => () => {
778
+ D.current && clearTimeout(D.current), O.current && clearTimeout(O.current);
720
779
  }, []), e(() => {
721
- if (!s) return;
780
+ if (!l) return;
722
781
  function e(e) {
723
- e.key === "ArrowRight" || e.key === " " ? (e.preventDefault(), P()) : e.key === "ArrowLeft" ? l > 0 && N("prev") : e.key === "Escape" && x && document.exitFullscreen();
782
+ e.key === "ArrowRight" || e.key === " " ? (e.preventDefault(), I()) : e.key === "ArrowLeft" ? d > 0 && F("prev") : e.key === "Escape" && C && document.exitFullscreen();
724
783
  }
725
784
  return window.addEventListener("keydown", e), () => window.removeEventListener("keydown", e);
726
785
  }, [
727
- s,
728
786
  l,
729
- x,
730
- d
787
+ d,
788
+ C,
789
+ p
731
790
  ]), e(() => {
732
791
  function e() {
733
- S(!!document.fullscreenElement);
792
+ w(!!document.fullscreenElement);
734
793
  }
735
794
  return document.addEventListener("fullscreenchange", e), () => document.removeEventListener("fullscreenchange", e);
736
- }, []), !O) return null;
737
- let j = l === 0, M = l === O - 1;
738
- function N(e) {
739
- d || (b(!1), m(e), f(!0), T.current = setTimeout(() => {
740
- u((t) => e === "next" ? Math.min(t + 1, O - 1) : Math.max(t - 1, 0)), f(!1);
795
+ }, []), !A) return null;
796
+ let N = d === 0, P = d === A - 1;
797
+ function F(e) {
798
+ p || (S(!1), y(e), m(!0), D.current = setTimeout(() => {
799
+ f((t) => e === "next" ? Math.min(t + 1, A - 1) : Math.max(t - 1, 0)), m(!1);
741
800
  }, 200));
742
801
  }
743
- function P() {
744
- M ? (c(!1), u(0)) : N("next");
802
+ function I() {
803
+ P ? (u(!1), f(0)) : F("next");
745
804
  }
746
- function F() {
747
- x ? document.exitFullscreen() : D.current?.requestFullscreen();
805
+ function L() {
806
+ C ? document.exitFullscreen() : k.current?.requestFullscreen();
748
807
  }
749
- async function I() {
750
- w(!0);
808
+ async function R() {
809
+ E(!0);
751
810
  try {
752
- let [{ default: e }] = await Promise.all([import("./jspdf.es.min-COy_kolw.js")]), t = new e({
811
+ let [{ default: e }] = await Promise.all([import("./jspdf.es.min-CjXCOyq2.js")]), t = new e({
753
812
  orientation: "landscape",
754
813
  unit: "pt",
755
814
  format: "a4"
@@ -770,40 +829,40 @@ function v({ data: a, accentColor: o = "#6366f1" }) {
770
829
  } catch (e) {
771
830
  console.error("PDF export failed", e);
772
831
  } finally {
773
- w(!1);
832
+ E(!1);
774
833
  }
775
834
  }
776
- if (!s) return /* @__PURE__ */ i("div", {
777
- style: y.intro,
835
+ if (!l) return /* @__PURE__ */ i("div", {
836
+ style: b.intro,
778
837
  children: [/* @__PURE__ */ r("div", { style: {
779
- ...y.introBar,
838
+ ...b.introBar,
780
839
  background: o
781
840
  } }), /* @__PURE__ */ i("div", {
782
- style: y.introPad,
841
+ style: b.introPad,
783
842
  children: [
784
843
  /* @__PURE__ */ i("span", {
785
844
  style: {
786
- ...y.introPill,
845
+ ...b.introPill,
787
846
  color: o,
788
847
  borderColor: `${o}40`,
789
848
  background: `${o}10`
790
849
  },
791
850
  children: [
792
- O,
851
+ A,
793
852
  " étape",
794
- O > 1 ? "s" : ""
853
+ A > 1 ? "s" : ""
795
854
  ]
796
855
  }),
797
856
  /* @__PURE__ */ r("h2", {
798
- style: y.introH,
857
+ style: b.introH,
799
858
  children: a.title
800
859
  }),
801
860
  /* @__PURE__ */ i("button", {
802
861
  style: {
803
- ...y.introBtn,
862
+ ...b.introBtn,
804
863
  background: o
805
864
  },
806
- onClick: () => c(!0),
865
+ onClick: () => u(!0),
807
866
  children: ["Commencer", /* @__PURE__ */ r("svg", {
808
867
  width: "16",
809
868
  height: "16",
@@ -817,164 +876,178 @@ function v({ data: a, accentColor: o = "#6366f1" }) {
817
876
  ]
818
877
  })]
819
878
  });
820
- let L = A?.size ?? 40, R = {
821
- opacity: d ? 0 : 1,
822
- transform: d ? `translateX(${p === "next" ? "-16px" : "16px"})` : "translateX(0)",
823
- transition: d ? "none" : "opacity 0.2s ease, transform 0.2s ease"
824
- }, z = A?.zoom && v ? {
825
- transform: `scale(${g})`,
826
- transformOrigin: `${A.x}% ${A.y}%`,
879
+ let z = M?.size ?? 40, B = {
880
+ opacity: p ? 0 : 1,
881
+ transform: p ? `translateX(${h === "next" ? "-16px" : "16px"})` : "translateX(0)",
882
+ transition: p ? "none" : "opacity 0.2s ease, transform 0.2s ease"
883
+ }, V = M?.zoom && x ? {
884
+ transform: `scale(${_})`,
885
+ transformOrigin: `${M.x}% ${M.y}%`,
827
886
  transition: "transform 0.65s cubic-bezier(0.4,0,0.2,1)"
828
887
  } : {
829
888
  transform: "scale(1)",
830
- transformOrigin: `${A?.x ?? 50}% ${A?.y ?? 50}%`,
889
+ transformOrigin: `${M?.x ?? 50}% ${M?.y ?? 50}%`,
831
890
  transition: "transform 0.45s cubic-bezier(0.4,0,0.2,1)"
832
891
  };
833
892
  return /* @__PURE__ */ i("div", {
834
- ref: D,
893
+ ref: k,
835
894
  style: {
836
- ...y.shell,
837
- ...x ? y.shellFullscreen : {}
895
+ ...b.shell,
896
+ ...C ? b.shellFullscreen : {}
838
897
  },
839
898
  children: [
840
899
  /* @__PURE__ */ i("div", {
841
- style: y.topBar,
900
+ style: b.topBar,
842
901
  children: [/* @__PURE__ */ i("div", {
843
- style: y.topLeft,
902
+ style: b.topLeft,
844
903
  children: [/* @__PURE__ */ r("div", { style: {
845
- ...y.dot,
904
+ ...b.dot,
846
905
  background: o
847
906
  } }), /* @__PURE__ */ r("span", {
848
- style: y.topTitle,
907
+ style: b.topTitle,
849
908
  children: a.title
850
909
  })]
851
910
  }), /* @__PURE__ */ i("div", {
852
- style: y.topRight,
911
+ style: b.topRight,
853
912
  children: [
854
913
  /* @__PURE__ */ i("span", {
855
- style: y.counter,
914
+ style: b.counter,
856
915
  children: [
857
- l + 1,
916
+ d + 1,
858
917
  /* @__PURE__ */ r("span", {
859
- style: y.counterSep,
918
+ style: b.counterSep,
860
919
  children: "/"
861
920
  }),
862
- O
921
+ A
863
922
  ]
864
923
  }),
865
924
  /* @__PURE__ */ r("button", {
866
- style: y.iconBtn,
925
+ style: b.iconBtn,
867
926
  title: "Export PDF",
868
- onClick: I,
869
- disabled: C,
870
- children: C ? "…" : "⬇"
927
+ onClick: R,
928
+ disabled: T,
929
+ children: T ? "…" : "⬇"
871
930
  }),
872
931
  /* @__PURE__ */ r("button", {
873
- style: y.iconBtn,
874
- title: x ? "Quitter le plein écran" : "Plein écran",
875
- onClick: F,
876
- children: x ? "⊡" : "⛶"
932
+ style: b.iconBtn,
933
+ title: C ? "Quitter le plein écran" : "Plein écran",
934
+ onClick: L,
935
+ children: C ? "⊡" : "⛶"
877
936
  })
878
937
  ]
879
938
  })]
880
939
  }),
881
940
  /* @__PURE__ */ i("div", {
882
- style: R,
941
+ style: B,
883
942
  children: [/* @__PURE__ */ i("div", {
884
943
  style: {
885
- ...y.imgWrap,
944
+ ...b.imgWrap,
886
945
  cursor: "pointer"
887
946
  },
888
- onClick: P,
947
+ onClick: I,
889
948
  children: [/* @__PURE__ */ r("div", {
890
- style: { overflow: "hidden" },
949
+ style: {
950
+ overflow: "hidden",
951
+ maxHeight: c,
952
+ background: "#000",
953
+ display: "flex",
954
+ alignItems: "center",
955
+ justifyContent: "center"
956
+ },
891
957
  children: /* @__PURE__ */ i("div", {
892
- style: z,
958
+ style: {
959
+ ...V,
960
+ width: "100%"
961
+ },
893
962
  children: [/* @__PURE__ */ r("img", {
894
- src: k.imageUrl,
963
+ src: j.imageUrl,
895
964
  alt: "",
896
- style: y.img,
965
+ style: {
966
+ ...b.img,
967
+ maxHeight: c,
968
+ objectFit: "contain"
969
+ },
897
970
  draggable: !1
898
- }), A && (A.type === "circle" ? /* @__PURE__ */ r("div", {
971
+ }), M && (M.type === "circle" ? /* @__PURE__ */ r("div", {
899
972
  style: {
900
973
  position: "absolute",
901
974
  borderRadius: "50%",
902
975
  border: "3px solid",
903
- borderColor: A.color,
904
- width: L,
905
- height: L,
906
- left: `${A.x}%`,
907
- top: `${A.y}%`,
976
+ borderColor: M.color,
977
+ width: z,
978
+ height: z,
979
+ left: `${M.x}%`,
980
+ top: `${M.y}%`,
908
981
  transform: "translate(-50%,-50%)",
909
982
  pointerEvents: "none",
910
983
  display: "flex",
911
984
  alignItems: "center",
912
985
  justifyContent: "center",
913
- animation: A.animated ? "vss-bounce .6s cubic-bezier(.36,.07,.19,.97) infinite alternate, vss-pulse 2s ease-out infinite" : "none"
986
+ animation: M.animated ? "vss-bounce .6s cubic-bezier(.36,.07,.19,.97) infinite alternate, vss-pulse 2s ease-out infinite" : "none"
914
987
  },
915
988
  children: /* @__PURE__ */ r("div", { style: {
916
- width: L * .22,
917
- height: L * .22,
989
+ width: z * .22,
990
+ height: z * .22,
918
991
  borderRadius: "50%",
919
- background: A.color,
992
+ background: M.color,
920
993
  opacity: .85
921
994
  } })
922
995
  }) : /* @__PURE__ */ r("div", {
923
996
  style: {
924
997
  position: "absolute",
925
- left: `${A.x}%`,
926
- top: `${A.y}%`,
998
+ left: `${M.x}%`,
999
+ top: `${M.y}%`,
927
1000
  transform: "translate(-50%,-50%)",
928
1001
  pointerEvents: "none",
929
- animation: A.animated ? "vss-bob 1.2s ease-in-out infinite alternate" : "none"
1002
+ animation: M.animated ? "vss-bob 1.2s ease-in-out infinite alternate" : "none"
930
1003
  },
931
- children: /* @__PURE__ */ r(h, {
932
- color: A.color,
933
- size: L
1004
+ children: /* @__PURE__ */ r(g, {
1005
+ color: M.color,
1006
+ size: z
934
1007
  })
935
1008
  }))]
936
1009
  })
937
1010
  }), /* @__PURE__ */ i("div", {
938
- style: y.hint,
939
- children: [M ? "Terminer" : "Suivant", " →"]
1011
+ style: b.hint,
1012
+ children: [P ? "Terminer" : "Suivant", " →"]
940
1013
  })]
941
- }), k.caption && /* @__PURE__ */ i("div", {
942
- style: y.caption,
1014
+ }), j.caption && /* @__PURE__ */ i("div", {
1015
+ style: b.caption,
943
1016
  children: [/* @__PURE__ */ r("div", { style: {
944
- ...y.captionLine,
1017
+ ...b.captionLine,
945
1018
  background: o
946
- } }), /* @__PURE__ */ r("span", { children: k.caption })]
1019
+ } }), /* @__PURE__ */ r("span", { children: j.caption })]
947
1020
  })]
948
1021
  }),
949
1022
  /* @__PURE__ */ i("div", {
950
- style: y.footer,
1023
+ style: b.footer,
951
1024
  children: [/* @__PURE__ */ r("div", {
952
- style: y.pills,
1025
+ style: b.pills,
953
1026
  children: a.steps.map((e, t) => /* @__PURE__ */ r("div", { style: {
954
1027
  height: 4,
955
- flex: t === l ? 2 : 1,
1028
+ flex: t === d ? 2 : 1,
956
1029
  borderRadius: 99,
957
1030
  transition: "all .35s ease",
958
- background: t < l || t === l ? o : "#2a2a35",
959
- opacity: t === l ? 1 : t < l ? .5 : .25
1031
+ background: t < d || t === d ? o : "#2a2a35",
1032
+ opacity: t === d ? 1 : t < d ? .5 : .25
960
1033
  } }, t))
961
1034
  }), /* @__PURE__ */ i("div", {
962
- style: y.navRow,
1035
+ style: b.navRow,
963
1036
  children: [/* @__PURE__ */ r("button", {
964
1037
  style: {
965
- ...y.navGhost,
966
- opacity: j ? .3 : 1
1038
+ ...b.navGhost,
1039
+ opacity: N ? .3 : 1
967
1040
  },
968
- disabled: j,
969
- onClick: () => N("prev"),
1041
+ disabled: N,
1042
+ onClick: () => F("prev"),
970
1043
  children: "← Précédent"
971
1044
  }), /* @__PURE__ */ r("button", {
972
1045
  style: {
973
- ...y.navSolid,
1046
+ ...b.navSolid,
974
1047
  background: o
975
1048
  },
976
- onClick: P,
977
- children: M ? "Terminer ✓" : "Suivant →"
1049
+ onClick: I,
1050
+ children: P ? "Terminer ✓" : "Suivant →"
978
1051
  })]
979
1052
  })]
980
1053
  }),
@@ -996,7 +1069,7 @@ function v({ data: a, accentColor: o = "#6366f1" }) {
996
1069
  ]
997
1070
  });
998
1071
  }
999
- var y = {
1072
+ var b = {
1000
1073
  intro: {
1001
1074
  borderRadius: 16,
1002
1075
  overflow: "hidden",
@@ -1191,4 +1264,4 @@ var y = {
1191
1264
  }
1192
1265
  };
1193
1266
  //#endregion
1194
- export { p as WalkthroughBuilder, v as WalkthroughViewer };
1267
+ export { m as WalkthroughBuilder, y as WalkthroughViewer };