@svgrid/grid 2.2.0 → 2.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 (114) hide show
  1. package/dist/FlexRender.svelte +96 -96
  2. package/dist/GridFooter.svelte +178 -178
  3. package/dist/SvCarousel.svelte +141 -141
  4. package/dist/SvColorInput.svelte +187 -187
  5. package/dist/SvContextMenu.svelte +116 -116
  6. package/dist/SvDrawer.svelte +250 -250
  7. package/dist/SvGrid.svelte +3131 -3131
  8. package/dist/SvGridBoard.svelte +2339 -2339
  9. package/dist/SvGridChart.svelte +1724 -1724
  10. package/dist/SvGridChartPanel.svelte +485 -485
  11. package/dist/SvGridDropdown.svelte +689 -689
  12. package/dist/SvGroupCell.svelte +109 -109
  13. package/dist/SvMenu.svelte +124 -124
  14. package/dist/SvMenuList.svelte +117 -117
  15. package/dist/SvNumberInput.svelte +131 -131
  16. package/dist/SvOtpInput.svelte +158 -158
  17. package/dist/SvPopover.svelte +139 -139
  18. package/dist/SvRowGroupPanel.svelte +170 -170
  19. package/dist/SvScrollArea.svelte +61 -61
  20. package/dist/SvTooltip.svelte +127 -127
  21. package/dist/SvTour.svelte +204 -204
  22. package/dist/SvTree.svelte +377 -377
  23. package/dist/SvTreeSelect.svelte +230 -230
  24. package/dist/cdn/svgrid.js +8 -8
  25. package/dist/cdn/svgrid.svelte-external.js +8 -8
  26. package/dist/chart-export.js +8 -8
  27. package/package.json +10 -10
  28. package/src/FlexRender.svelte +96 -96
  29. package/src/GridFooter.svelte +178 -178
  30. package/src/SvCarousel.svelte +141 -141
  31. package/src/SvColorInput.svelte +187 -187
  32. package/src/SvContextMenu.svelte +116 -116
  33. package/src/SvDrawer.svelte +250 -250
  34. package/src/SvGrid.controller.svelte.ts +3158 -3158
  35. package/src/SvGrid.svelte +3131 -3131
  36. package/src/SvGrid.types.ts +1489 -1489
  37. package/src/SvGridBoard.svelte +2339 -2339
  38. package/src/SvGridChart.svelte +1724 -1724
  39. package/src/SvGridChartPanel.svelte +485 -485
  40. package/src/SvGridDropdown.svelte +689 -689
  41. package/src/SvGroupCell.svelte +109 -109
  42. package/src/SvMenu.svelte +124 -124
  43. package/src/SvMenu.test.ts +97 -97
  44. package/src/SvMenuList.svelte +117 -117
  45. package/src/SvNumberInput.svelte +131 -131
  46. package/src/SvOtpInput.svelte +158 -158
  47. package/src/SvPopover.svelte +139 -139
  48. package/src/SvRowGroupPanel.svelte +170 -170
  49. package/src/SvScrollArea.svelte +61 -61
  50. package/src/SvTooltip.svelte +127 -127
  51. package/src/SvTour.svelte +204 -204
  52. package/src/SvTree.svelte +377 -377
  53. package/src/SvTreeSelect.svelte +230 -230
  54. package/src/a11y.contract.test.ts +49 -49
  55. package/src/a11y.test.ts +59 -59
  56. package/src/a11y.ts +61 -61
  57. package/src/build-api.ts +870 -870
  58. package/src/cell-formatting.ts +169 -169
  59. package/src/cell-render.ts +469 -469
  60. package/src/chart-export.ts +201 -201
  61. package/src/chart.ts +2296 -2296
  62. package/src/collaboration.test.ts +104 -104
  63. package/src/collaboration.ts +167 -167
  64. package/src/core.performance.test.ts +30 -30
  65. package/src/core.ts +1111 -1111
  66. package/src/createAutocomplete.svelte.ts +132 -132
  67. package/src/createCombobox.svelte.ts +179 -179
  68. package/src/createCountryInput.svelte.ts +157 -157
  69. package/src/createDropdownList.svelte.ts +162 -162
  70. package/src/createGrid.svelte.ts +42 -42
  71. package/src/createGrid.test.ts +10 -10
  72. package/src/createGridState.svelte.ts +17 -17
  73. package/src/createMenu.svelte.ts +202 -202
  74. package/src/createPopoverSelect.svelte.ts +206 -206
  75. package/src/createTree.svelte.ts +319 -319
  76. package/src/editing.test.ts +859 -859
  77. package/src/editing.ts +675 -675
  78. package/src/export-data-api.test.ts +126 -126
  79. package/src/export-format.test.ts +107 -107
  80. package/src/export-format.ts +598 -598
  81. package/src/flex-render.ts +3 -3
  82. package/src/index.ts +623 -623
  83. package/src/keyboard.test.ts +59 -59
  84. package/src/keyboard.ts +97 -97
  85. package/src/list-nav.test.ts +49 -49
  86. package/src/list-nav.ts +29 -29
  87. package/src/menus.ts +639 -639
  88. package/src/merge-objects.ts +48 -48
  89. package/src/overlays.test.ts +90 -90
  90. package/src/render-component.ts +28 -28
  91. package/src/selection.test.ts +754 -754
  92. package/src/selection.ts +600 -600
  93. package/src/server-data-source.test.ts +289 -289
  94. package/src/server-data-source.ts +413 -413
  95. package/src/sparkline.test.ts +68 -68
  96. package/src/sparkline.ts +169 -169
  97. package/src/spreadsheet.test.ts +489 -489
  98. package/src/spreadsheet.ts +312 -312
  99. package/src/static-functions.ts +11 -11
  100. package/src/subscribe.ts +38 -38
  101. package/src/svgrid-wrapper.types.ts +501 -501
  102. package/src/svgrid.behavior.test.ts +706 -706
  103. package/src/svgrid.charting.test.ts +527 -527
  104. package/src/svgrid.features.test.ts +157 -157
  105. package/src/svgrid.new-features.wrapper.test.ts +251 -251
  106. package/src/svgrid.wrapper.test.ts +40 -40
  107. package/src/test-setup.ts +62 -62
  108. package/src/themes/index.ts +159 -159
  109. package/src/virtualization/column-virtualizer.test.ts +27 -27
  110. package/src/virtualization/column-virtualizer.ts +30 -30
  111. package/src/virtualization/svelte-virtualizer.svelte.ts +26 -26
  112. package/src/virtualization/types.ts +30 -30
  113. package/src/virtualization/virtualizer.test.ts +47 -47
  114. package/src/virtualization/virtualizer.ts +296 -296
package/src/SvTour.svelte CHANGED
@@ -1,204 +1,204 @@
1
- <script lang="ts" module>
2
- export type { TourStep } from './ui-app.types'
3
- </script>
4
-
5
- <script lang="ts">
6
- /**
7
- * SvTour - a guided product tour / onboarding: it spotlights each step's target
8
- * element (a dimmed backdrop with a cut-out), anchors a popover with the step's
9
- * title/content near it, and steps Back / Next / Done. Arrow keys navigate,
10
- * Escape skips. Portalled to <body>. Controlled via `open`.
11
- *
12
- * ```svelte
13
- * <SvTour bind:open steps={[
14
- * { target: '#new-btn', title: 'Create', content: 'Start here.' },
15
- * { target: '.grid', title: 'Your data', content: 'It shows up here.' },
16
- * ]} />
17
- * ```
18
- */
19
- import type { TourStep } from './ui-app.types'
20
- import { portalToBody } from './popover'
21
- import { createFocusTrap } from './a11y/focus-trap'
22
- import type { EditorDir } from './editor-contract'
23
-
24
- type Props = {
25
- steps: ReadonlyArray<TourStep>
26
- open?: boolean
27
- onFinish?: () => void
28
- onSkip?: () => void
29
- onStep?: (index: number) => void
30
- /** Text direction; under `'rtl'` the Left/Right advance/back keys swap. */
31
- dir?: EditorDir
32
- }
33
-
34
- let { steps, open = $bindable(false), onFinish, onSkip, onStep, dir }: Props = $props()
35
-
36
- let index = $state(0)
37
- let rect = $state<DOMRect | null>(null)
38
- let popEl = $state<HTMLDivElement | null>(null)
39
- const step = $derived(steps[index])
40
-
41
- function targetEl(): HTMLElement | null {
42
- const t = step?.target
43
- if (!t) return null
44
- return typeof t === 'string' ? document.querySelector<HTMLElement>(t) : t
45
- }
46
- function measure() {
47
- const el = targetEl()
48
- el?.scrollIntoView({ block: 'center', behavior: 'smooth' })
49
- rect = el ? el.getBoundingClientRect() : null
50
- }
51
- // Move focus into the popover on open + on every step change (its Next button
52
- // is the sensible default target); the Tab trap (below) keeps it there.
53
- function focusPopover() {
54
- const btn = popEl?.querySelector<HTMLElement>('.sv-tour__next')
55
- ;(btn ?? popEl)?.focus()
56
- }
57
- function goto(i: number) {
58
- index = Math.max(0, Math.min(i, steps.length - 1))
59
- onStep?.(index)
60
- queueMicrotask(() => { measure(); focusPopover() })
61
- }
62
- function next() { if (index >= steps.length - 1) finish(); else goto(index + 1) }
63
- function back() { goto(index - 1) }
64
- function finish() { open = false; onFinish?.() }
65
- function skip() { open = false; onSkip?.() }
66
-
67
- $effect(() => {
68
- if (!open) return
69
- index = 0
70
- queueMicrotask(() => { measure(); focusPopover() })
71
- const reflow = () => measure()
72
- window.addEventListener('resize', reflow)
73
- window.addEventListener('scroll', reflow, true)
74
- const rtl = dir === 'rtl'
75
- const onKey = (e: KeyboardEvent) => {
76
- if (e.key === 'Escape') { e.preventDefault(); skip() }
77
- else if (e.key === 'ArrowRight') { e.preventDefault(); (rtl ? back : next)() }
78
- else if (e.key === 'ArrowLeft') { e.preventDefault(); (rtl ? next : back)() }
79
- }
80
- window.addEventListener('keydown', onKey)
81
- return () => {
82
- window.removeEventListener('resize', reflow)
83
- window.removeEventListener('scroll', reflow, true)
84
- window.removeEventListener('keydown', onKey)
85
- }
86
- })
87
-
88
- // Focus trap for the duration the tour is open, from the shared primitive
89
- // (same one SvModal/SvDrawer use): traps Tab within the popover and restores
90
- // focus to whatever triggered the tour once it closes.
91
- $effect(() => {
92
- if (!open || !popEl) return
93
- const trap = createFocusTrap(popEl, {
94
- initialFocus: () => popEl?.querySelector<HTMLElement>('.sv-tour__next') ?? null,
95
- })
96
- trap.activate()
97
- return () => trap.release()
98
- })
99
-
100
- const POP_W = 300
101
- // Measured popover height, so placement can keep the WHOLE popover on-screen
102
- // (long content + tall targets used to push it off the top).
103
- let popH = $state(200)
104
- const pop = $derived.by(() => {
105
- if (typeof window === 'undefined' || !rect) {
106
- return { top: '50%', left: '50%', transform: 'translate(-50%, -50%)', place: 'center' as const }
107
- }
108
- const vw = window.innerWidth
109
- const vh = window.innerHeight
110
- const gap = 12
111
- const h = popH || 200
112
- const clampTop = (t: number) => Math.max(gap, Math.min(t, vh - h - gap))
113
- const clampLeft = (l: number) => Math.max(gap, Math.min(l, vw - POP_W - gap))
114
- // Prefer directly below the target, then directly above - but only when the
115
- // target is short enough to leave room for the whole popover.
116
- if (vh - rect.bottom >= h + gap) {
117
- return { top: `${rect.bottom + 10}px`, left: `${clampLeft(rect.left)}px`, transform: 'none', place: 'bottom' as const }
118
- }
119
- if (rect.top >= h + gap) {
120
- return { top: `${clampTop(rect.top - 10 - h)}px`, left: `${clampLeft(rect.left)}px`, transform: 'none', place: 'top' as const }
121
- }
122
- // Tall target (a full-height rail / canvas / inspector): sit BESIDE it,
123
- // vertically centred on the target, on whichever side has room.
124
- const top = clampTop(rect.top + rect.height / 2 - h / 2)
125
- if (vw - rect.right >= POP_W + gap) return { top: `${top}px`, left: `${rect.right + 10}px`, transform: 'none', place: 'center' as const }
126
- if (rect.left >= POP_W + gap) return { top: `${top}px`, left: `${rect.left - POP_W - 10}px`, transform: 'none', place: 'center' as const }
127
- // No side room either - centre horizontally (still fully visible).
128
- return { top: `${top}px`, left: `${clampLeft((vw - POP_W) / 2)}px`, transform: 'none', place: 'center' as const }
129
- })
130
- </script>
131
-
132
- {#if open && step}
133
- <div class="sv-tour" use:portalToBody>
134
- {#if rect}
135
- <div
136
- class="sv-tour__spot"
137
- style:top={`${rect.top - 6}px`}
138
- style:left={`${rect.left - 6}px`}
139
- style:width={`${rect.width + 12}px`}
140
- style:height={`${rect.height + 12}px`}
141
- ></div>
142
- {:else}
143
- <div class="sv-tour__backdrop"></div>
144
- {/if}
145
-
146
- <div
147
- bind:this={popEl}
148
- bind:clientHeight={popH}
149
- class="sv-tour__pop sv-tour__pop--{pop.place}"
150
- style:top={pop.top}
151
- style:left={pop.left}
152
- style:transform={pop.transform}
153
- role="dialog"
154
- aria-modal="true"
155
- aria-label={step.title ?? 'Tour step'}
156
- >
157
- {#if step.image}
158
- <div class="sv-tour__media">
159
- {#if /^(https?:|data:|\/)/.test(step.image)}<img class="sv-tour__img" src={step.image} alt="" />{:else}{@html step.image}{/if}
160
- </div>
161
- {/if}
162
- {#if step.title}<div class="sv-tour__title">{step.title}</div>{/if}
163
- <div class="sv-tour__body">{step.content}</div>
164
- <div class="sv-tour__foot">
165
- <span class="sv-tour__count">{index + 1} / {steps.length}</span>
166
- <div class="sv-tour__btns">
167
- <button type="button" class="sv-tour__skip" onclick={skip}>Skip</button>
168
- {#if index > 0}<button type="button" class="sv-tour__back" onclick={back}>Back</button>{/if}
169
- <button type="button" class="sv-tour__next" onclick={next}>{index === steps.length - 1 ? 'Done' : 'Next'}</button>
170
- </div>
171
- </div>
172
- </div>
173
- </div>
174
- {/if}
175
-
176
- <style>
177
- :global(.sv-tour) { position: fixed; inset: 0; z-index: 2147483000; }
178
- :global(.sv-tour__backdrop) { position: fixed; inset: 0; background: rgba(15, 23, 42, 0.55); }
179
- :global(.sv-tour__spot) {
180
- position: fixed; border-radius: 8px; pointer-events: none;
181
- box-shadow: 0 0 0 9999px rgba(15, 23, 42, 0.55); transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
182
- }
183
- :global(.sv-tour__pop) {
184
- position: fixed; z-index: 1; width: 300px; max-width: calc(100vw - 24px);
185
- background: var(--sg-bg, #fff); color: var(--sg-fg, #0f172a);
186
- border: 1px solid var(--sg-border, #e2e8f0); border-radius: 12px; padding: 14px 16px;
187
- box-shadow: 0 20px 48px -16px rgba(15, 23, 42, 0.5);
188
- animation: sv-tour-in 0.16s cubic-bezier(0.16, 1, 0.3, 1) both;
189
- }
190
- @keyframes sv-tour-in { from { opacity: 0; transform: translateY(4px) } }
191
- :global(.sv-tour__pop--top) { animation: none; }
192
- :global(.sv-tour__media) { margin: -2px -4px 12px; border-radius: 9px; overflow: hidden; line-height: 0; }
193
- :global(.sv-tour__media svg), :global(.sv-tour__img) { display: block; width: 100%; height: auto; }
194
- :global(.sv-tour__title) { font-size: 14.5px; font-weight: 650; margin-bottom: 4px; }
195
- :global(.sv-tour__body) { font-size: 13px; line-height: 1.55; color: var(--sg-fg, #334155); }
196
- :global(.sv-tour__foot) { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 14px; }
197
- :global(.sv-tour__count) { font-size: 12px; color: var(--sg-muted, #94a3b8); font-variant-numeric: tabular-nums; }
198
- :global(.sv-tour__btns) { display: flex; gap: 6px; }
199
- :global(.sv-tour__skip), :global(.sv-tour__back), :global(.sv-tour__next) {
200
- font: inherit; font-size: 12.5px; padding: 5px 12px; border-radius: 7px; cursor: pointer; border: 1px solid var(--sg-border, #cbd5e1); background: var(--sg-input-bg, #fff); color: var(--sg-fg, #0f172a);
201
- }
202
- :global(.sv-tour__skip) { border-color: transparent; background: none; color: var(--sg-muted, #64748b); }
203
- :global(.sv-tour__next) { background: var(--sg-accent, #2563eb); border-color: var(--sg-accent, #2563eb); color: var(--sg-on-accent, #fff); }
204
- </style>
1
+ <script lang="ts" module>
2
+ export type { TourStep } from './ui-app.types'
3
+ </script>
4
+
5
+ <script lang="ts">
6
+ /**
7
+ * SvTour - a guided product tour / onboarding: it spotlights each step's target
8
+ * element (a dimmed backdrop with a cut-out), anchors a popover with the step's
9
+ * title/content near it, and steps Back / Next / Done. Arrow keys navigate,
10
+ * Escape skips. Portalled to <body>. Controlled via `open`.
11
+ *
12
+ * ```svelte
13
+ * <SvTour bind:open steps={[
14
+ * { target: '#new-btn', title: 'Create', content: 'Start here.' },
15
+ * { target: '.grid', title: 'Your data', content: 'It shows up here.' },
16
+ * ]} />
17
+ * ```
18
+ */
19
+ import type { TourStep } from './ui-app.types'
20
+ import { portalToBody } from './popover'
21
+ import { createFocusTrap } from './a11y/focus-trap'
22
+ import type { EditorDir } from './editor-contract'
23
+
24
+ type Props = {
25
+ steps: ReadonlyArray<TourStep>
26
+ open?: boolean
27
+ onFinish?: () => void
28
+ onSkip?: () => void
29
+ onStep?: (index: number) => void
30
+ /** Text direction; under `'rtl'` the Left/Right advance/back keys swap. */
31
+ dir?: EditorDir
32
+ }
33
+
34
+ let { steps, open = $bindable(false), onFinish, onSkip, onStep, dir }: Props = $props()
35
+
36
+ let index = $state(0)
37
+ let rect = $state<DOMRect | null>(null)
38
+ let popEl = $state<HTMLDivElement | null>(null)
39
+ const step = $derived(steps[index])
40
+
41
+ function targetEl(): HTMLElement | null {
42
+ const t = step?.target
43
+ if (!t) return null
44
+ return typeof t === 'string' ? document.querySelector<HTMLElement>(t) : t
45
+ }
46
+ function measure() {
47
+ const el = targetEl()
48
+ el?.scrollIntoView({ block: 'center', behavior: 'smooth' })
49
+ rect = el ? el.getBoundingClientRect() : null
50
+ }
51
+ // Move focus into the popover on open + on every step change (its Next button
52
+ // is the sensible default target); the Tab trap (below) keeps it there.
53
+ function focusPopover() {
54
+ const btn = popEl?.querySelector<HTMLElement>('.sv-tour__next')
55
+ ;(btn ?? popEl)?.focus()
56
+ }
57
+ function goto(i: number) {
58
+ index = Math.max(0, Math.min(i, steps.length - 1))
59
+ onStep?.(index)
60
+ queueMicrotask(() => { measure(); focusPopover() })
61
+ }
62
+ function next() { if (index >= steps.length - 1) finish(); else goto(index + 1) }
63
+ function back() { goto(index - 1) }
64
+ function finish() { open = false; onFinish?.() }
65
+ function skip() { open = false; onSkip?.() }
66
+
67
+ $effect(() => {
68
+ if (!open) return
69
+ index = 0
70
+ queueMicrotask(() => { measure(); focusPopover() })
71
+ const reflow = () => measure()
72
+ window.addEventListener('resize', reflow)
73
+ window.addEventListener('scroll', reflow, true)
74
+ const rtl = dir === 'rtl'
75
+ const onKey = (e: KeyboardEvent) => {
76
+ if (e.key === 'Escape') { e.preventDefault(); skip() }
77
+ else if (e.key === 'ArrowRight') { e.preventDefault(); (rtl ? back : next)() }
78
+ else if (e.key === 'ArrowLeft') { e.preventDefault(); (rtl ? next : back)() }
79
+ }
80
+ window.addEventListener('keydown', onKey)
81
+ return () => {
82
+ window.removeEventListener('resize', reflow)
83
+ window.removeEventListener('scroll', reflow, true)
84
+ window.removeEventListener('keydown', onKey)
85
+ }
86
+ })
87
+
88
+ // Focus trap for the duration the tour is open, from the shared primitive
89
+ // (same one SvModal/SvDrawer use): traps Tab within the popover and restores
90
+ // focus to whatever triggered the tour once it closes.
91
+ $effect(() => {
92
+ if (!open || !popEl) return
93
+ const trap = createFocusTrap(popEl, {
94
+ initialFocus: () => popEl?.querySelector<HTMLElement>('.sv-tour__next') ?? null,
95
+ })
96
+ trap.activate()
97
+ return () => trap.release()
98
+ })
99
+
100
+ const POP_W = 300
101
+ // Measured popover height, so placement can keep the WHOLE popover on-screen
102
+ // (long content + tall targets used to push it off the top).
103
+ let popH = $state(200)
104
+ const pop = $derived.by(() => {
105
+ if (typeof window === 'undefined' || !rect) {
106
+ return { top: '50%', left: '50%', transform: 'translate(-50%, -50%)', place: 'center' as const }
107
+ }
108
+ const vw = window.innerWidth
109
+ const vh = window.innerHeight
110
+ const gap = 12
111
+ const h = popH || 200
112
+ const clampTop = (t: number) => Math.max(gap, Math.min(t, vh - h - gap))
113
+ const clampLeft = (l: number) => Math.max(gap, Math.min(l, vw - POP_W - gap))
114
+ // Prefer directly below the target, then directly above - but only when the
115
+ // target is short enough to leave room for the whole popover.
116
+ if (vh - rect.bottom >= h + gap) {
117
+ return { top: `${rect.bottom + 10}px`, left: `${clampLeft(rect.left)}px`, transform: 'none', place: 'bottom' as const }
118
+ }
119
+ if (rect.top >= h + gap) {
120
+ return { top: `${clampTop(rect.top - 10 - h)}px`, left: `${clampLeft(rect.left)}px`, transform: 'none', place: 'top' as const }
121
+ }
122
+ // Tall target (a full-height rail / canvas / inspector): sit BESIDE it,
123
+ // vertically centred on the target, on whichever side has room.
124
+ const top = clampTop(rect.top + rect.height / 2 - h / 2)
125
+ if (vw - rect.right >= POP_W + gap) return { top: `${top}px`, left: `${rect.right + 10}px`, transform: 'none', place: 'center' as const }
126
+ if (rect.left >= POP_W + gap) return { top: `${top}px`, left: `${rect.left - POP_W - 10}px`, transform: 'none', place: 'center' as const }
127
+ // No side room either - centre horizontally (still fully visible).
128
+ return { top: `${top}px`, left: `${clampLeft((vw - POP_W) / 2)}px`, transform: 'none', place: 'center' as const }
129
+ })
130
+ </script>
131
+
132
+ {#if open && step}
133
+ <div class="sv-tour" use:portalToBody>
134
+ {#if rect}
135
+ <div
136
+ class="sv-tour__spot"
137
+ style:top={`${rect.top - 6}px`}
138
+ style:left={`${rect.left - 6}px`}
139
+ style:width={`${rect.width + 12}px`}
140
+ style:height={`${rect.height + 12}px`}
141
+ ></div>
142
+ {:else}
143
+ <div class="sv-tour__backdrop"></div>
144
+ {/if}
145
+
146
+ <div
147
+ bind:this={popEl}
148
+ bind:clientHeight={popH}
149
+ class="sv-tour__pop sv-tour__pop--{pop.place}"
150
+ style:top={pop.top}
151
+ style:left={pop.left}
152
+ style:transform={pop.transform}
153
+ role="dialog"
154
+ aria-modal="true"
155
+ aria-label={step.title ?? 'Tour step'}
156
+ >
157
+ {#if step.image}
158
+ <div class="sv-tour__media">
159
+ {#if /^(https?:|data:|\/)/.test(step.image)}<img class="sv-tour__img" src={step.image} alt="" />{:else}{@html step.image}{/if}
160
+ </div>
161
+ {/if}
162
+ {#if step.title}<div class="sv-tour__title">{step.title}</div>{/if}
163
+ <div class="sv-tour__body">{step.content}</div>
164
+ <div class="sv-tour__foot">
165
+ <span class="sv-tour__count">{index + 1} / {steps.length}</span>
166
+ <div class="sv-tour__btns">
167
+ <button type="button" class="sv-tour__skip" onclick={skip}>Skip</button>
168
+ {#if index > 0}<button type="button" class="sv-tour__back" onclick={back}>Back</button>{/if}
169
+ <button type="button" class="sv-tour__next" onclick={next}>{index === steps.length - 1 ? 'Done' : 'Next'}</button>
170
+ </div>
171
+ </div>
172
+ </div>
173
+ </div>
174
+ {/if}
175
+
176
+ <style>
177
+ :global(.sv-tour) { position: fixed; inset: 0; z-index: 2147483000; }
178
+ :global(.sv-tour__backdrop) { position: fixed; inset: 0; background: rgba(15, 23, 42, 0.55); }
179
+ :global(.sv-tour__spot) {
180
+ position: fixed; border-radius: 8px; pointer-events: none;
181
+ box-shadow: 0 0 0 9999px rgba(15, 23, 42, 0.55); transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
182
+ }
183
+ :global(.sv-tour__pop) {
184
+ position: fixed; z-index: 1; width: 300px; max-width: calc(100vw - 24px);
185
+ background: var(--sg-bg, #fff); color: var(--sg-fg, #0f172a);
186
+ border: 1px solid var(--sg-border, #e2e8f0); border-radius: 12px; padding: 14px 16px;
187
+ box-shadow: 0 20px 48px -16px rgba(15, 23, 42, 0.5);
188
+ animation: sv-tour-in 0.16s cubic-bezier(0.16, 1, 0.3, 1) both;
189
+ }
190
+ @keyframes sv-tour-in { from { opacity: 0; transform: translateY(4px) } }
191
+ :global(.sv-tour__pop--top) { animation: none; }
192
+ :global(.sv-tour__media) { margin: -2px -4px 12px; border-radius: 9px; overflow: hidden; line-height: 0; }
193
+ :global(.sv-tour__media svg), :global(.sv-tour__img) { display: block; width: 100%; height: auto; }
194
+ :global(.sv-tour__title) { font-size: 14.5px; font-weight: 650; margin-bottom: 4px; }
195
+ :global(.sv-tour__body) { font-size: 13px; line-height: 1.55; color: var(--sg-fg, #334155); }
196
+ :global(.sv-tour__foot) { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 14px; }
197
+ :global(.sv-tour__count) { font-size: 12px; color: var(--sg-muted, #94a3b8); font-variant-numeric: tabular-nums; }
198
+ :global(.sv-tour__btns) { display: flex; gap: 6px; }
199
+ :global(.sv-tour__skip), :global(.sv-tour__back), :global(.sv-tour__next) {
200
+ font: inherit; font-size: 12.5px; padding: 5px 12px; border-radius: 7px; cursor: pointer; border: 1px solid var(--sg-border, #cbd5e1); background: var(--sg-input-bg, #fff); color: var(--sg-fg, #0f172a);
201
+ }
202
+ :global(.sv-tour__skip) { border-color: transparent; background: none; color: var(--sg-muted, #64748b); }
203
+ :global(.sv-tour__next) { background: var(--sg-accent, #2563eb); border-color: var(--sg-accent, #2563eb); color: var(--sg-on-accent, #fff); }
204
+ </style>