@svgrid/grid 2.6.17 → 2.6.18

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 (253) hide show
  1. package/CHANGELOG.md +346 -346
  2. package/README.md +199 -199
  3. package/dist/FlexRender.svelte +96 -96
  4. package/dist/GridFooter.svelte +181 -181
  5. package/dist/GridMenus.svelte +705 -705
  6. package/dist/SvAutoComplete.svelte +165 -165
  7. package/dist/SvAvatar.svelte +75 -75
  8. package/dist/SvCalendar.svelte +503 -503
  9. package/dist/SvCarousel.svelte +141 -141
  10. package/dist/SvCheckBox.svelte +102 -102
  11. package/dist/SvCircularProgress.svelte +109 -109
  12. package/dist/SvColorInput.svelte +181 -181
  13. package/dist/SvComboBox.svelte +275 -275
  14. package/dist/SvContextMenu.svelte +116 -116
  15. package/dist/SvCountryInput.svelte +163 -163
  16. package/dist/SvDrawer.svelte +254 -254
  17. package/dist/SvDropDownList.svelte +374 -374
  18. package/dist/SvDurationInput.svelte +126 -126
  19. package/dist/SvField.svelte +293 -293
  20. package/dist/SvForm.svelte +437 -437
  21. package/dist/SvGrid.css +2896 -2896
  22. package/dist/SvGrid.svelte +2956 -2956
  23. package/dist/SvGridCellEditor.svelte +662 -662
  24. package/dist/SvGridChart.svelte +1716 -1716
  25. package/dist/SvGridChartPanel.svelte +485 -485
  26. package/dist/SvGridChartView.svelte +70 -70
  27. package/dist/SvGridDropdown.svelte +728 -728
  28. package/dist/SvGridSelect.svelte +266 -266
  29. package/dist/SvGroupCell.svelte +116 -116
  30. package/dist/SvListBox.svelte +326 -326
  31. package/dist/SvMaskedInput.svelte +122 -122
  32. package/dist/SvMenu.svelte +124 -124
  33. package/dist/SvMenuList.svelte +146 -146
  34. package/dist/SvMultiSelect.svelte +289 -289
  35. package/dist/SvNumberInput.svelte +168 -168
  36. package/dist/SvOtpInput.svelte +158 -158
  37. package/dist/SvPasswordInput.svelte +151 -151
  38. package/dist/SvPhoneInput.svelte +133 -133
  39. package/dist/SvPopover.svelte +197 -197
  40. package/dist/SvProgress.svelte +116 -116
  41. package/dist/SvRadioGroup.svelte +107 -107
  42. package/dist/SvRating.svelte +112 -112
  43. package/dist/SvResult.svelte +73 -73
  44. package/dist/SvRichText.svelte +211 -211
  45. package/dist/SvRowGroupPanel.svelte +170 -170
  46. package/dist/SvScrollArea.svelte +61 -61
  47. package/dist/SvSlider.svelte +203 -203
  48. package/dist/SvSwitchButton.svelte +108 -108
  49. package/dist/SvTagsInput.svelte +115 -115
  50. package/dist/SvTextInput.svelte +147 -147
  51. package/dist/SvTimePicker.svelte +245 -245
  52. package/dist/SvToaster.svelte +159 -159
  53. package/dist/SvToggleButton.svelte +85 -85
  54. package/dist/SvTooltip.svelte +161 -161
  55. package/dist/SvTour.svelte +208 -208
  56. package/dist/SvTree.svelte +444 -444
  57. package/dist/SvTreeSelect.svelte +235 -235
  58. package/dist/cdn/{GridMenus-3kKYmYOE.js → GridMenus-B0F9iBrG.js} +2 -2
  59. package/dist/cdn/{GridMenus-BcDiwQ9U.js → GridMenus-IHK_l7m6.js} +2 -2
  60. package/dist/cdn/{SvDateTimePicker-DSUhIta8.js → SvDateTimePicker-CHnUkWcH.js} +2 -2
  61. package/dist/cdn/{SvDateTimePicker-h9kPyszT.js → SvDateTimePicker-CRQH_U7E.js} +2 -2
  62. package/dist/cdn/{SvGridCellEditor-DkyQO6FV.js → SvGridCellEditor-BGUCzuPB.js} +1 -1
  63. package/dist/cdn/{SvGridCellEditor-JpJSRhDx.js → SvGridCellEditor-G8IMWIws.js} +1 -1
  64. package/dist/cdn/{SvGridChart-CwhFz7GV.js → SvGridChart-BEJmNNx9.js} +1 -1
  65. package/dist/cdn/{SvGridChart-Bs2GIR2Q.js → SvGridChart-BwVos976.js} +1 -1
  66. package/dist/cdn/{SvGridChartPanel-1WXuStzM.js → SvGridChartPanel-BOknOkrP.js} +1 -1
  67. package/dist/cdn/{SvGridChartPanel-e5_nqNP9.js → SvGridChartPanel-D2PjII4O.js} +1 -1
  68. package/dist/cdn/{SvGridChartView-SmPW10dI.js → SvGridChartView-00LPUHL1.js} +1 -1
  69. package/dist/cdn/{SvGridChartView-eSPuJE6g.js → SvGridChartView-BhUEJ5ki.js} +1 -1
  70. package/dist/cdn/{SvGridDropdown-B1ZcLpgs.js → SvGridDropdown-D0VdjeR8.js} +1 -1
  71. package/dist/cdn/{SvGridDropdown-CtdbHcIS.js → SvGridDropdown-D13MtJ2j.js} +1 -1
  72. package/dist/cdn/{src-DMZZVVFd.js → src-B1TdiyS8.js} +26 -26
  73. package/dist/cdn/{src-D79V6bCA.js → src-Cd0tearp.js} +27 -27
  74. package/dist/cdn/svgrid.js +5 -5
  75. package/dist/cdn/svgrid.svelte-external.js +5 -5
  76. package/dist/chart-export.js +8 -8
  77. package/package.json +11 -11
  78. package/src/FlexRender.svelte +96 -96
  79. package/src/GridFooter.svelte +181 -181
  80. package/src/GridMenus.svelte +705 -705
  81. package/src/SvAutoComplete.svelte +165 -165
  82. package/src/SvAvatar.svelte +75 -75
  83. package/src/SvCalendar.svelte +503 -503
  84. package/src/SvCalendar.test.ts +226 -226
  85. package/src/SvCarousel.svelte +141 -141
  86. package/src/SvCheckBox.svelte +102 -102
  87. package/src/SvCircularProgress.svelte +109 -109
  88. package/src/SvColorInput.svelte +181 -181
  89. package/src/SvComboBox.svelte +275 -275
  90. package/src/SvContextMenu.svelte +116 -116
  91. package/src/SvCountryInput.svelte +163 -163
  92. package/src/SvDrawer.svelte +254 -254
  93. package/src/SvDropDownList.svelte +374 -374
  94. package/src/SvDurationInput.svelte +126 -126
  95. package/src/SvField.svelte +293 -293
  96. package/src/SvForm.svelte +437 -437
  97. package/src/SvForm.test.ts +411 -411
  98. package/src/SvGrid.controller.svelte.ts +3974 -3974
  99. package/src/SvGrid.css +2896 -2896
  100. package/src/SvGrid.svelte +2956 -2956
  101. package/src/SvGrid.types.ts +1790 -1790
  102. package/src/SvGridCellEditor.svelte +662 -662
  103. package/src/SvGridChart.svelte +1716 -1716
  104. package/src/SvGridChartPanel.svelte +485 -485
  105. package/src/SvGridChartView.svelte +70 -70
  106. package/src/SvGridDropdown.svelte +728 -728
  107. package/src/SvGridSelect.svelte +266 -266
  108. package/src/SvGroupCell.svelte +116 -116
  109. package/src/SvListBox.svelte +326 -326
  110. package/src/SvMaskedInput.svelte +122 -122
  111. package/src/SvMenu.svelte +124 -124
  112. package/src/SvMenu.test.ts +97 -97
  113. package/src/SvMenuList.svelte +146 -146
  114. package/src/SvMultiSelect.svelte +289 -289
  115. package/src/SvNumberInput.svelte +168 -168
  116. package/src/SvOtpInput.svelte +158 -158
  117. package/src/SvPasswordInput.svelte +151 -151
  118. package/src/SvPhoneInput.svelte +133 -133
  119. package/src/SvPopover.svelte +197 -197
  120. package/src/SvProgress.svelte +116 -116
  121. package/src/SvRadioGroup.svelte +107 -107
  122. package/src/SvRating.svelte +112 -112
  123. package/src/SvResult.svelte +73 -73
  124. package/src/SvRichText.svelte +211 -211
  125. package/src/SvRowGroupPanel.svelte +170 -170
  126. package/src/SvScrollArea.svelte +61 -61
  127. package/src/SvSlider.svelte +203 -203
  128. package/src/SvSwitchButton.svelte +108 -108
  129. package/src/SvTagsInput.svelte +115 -115
  130. package/src/SvTextInput.svelte +147 -147
  131. package/src/SvTimePicker.svelte +245 -245
  132. package/src/SvToaster.svelte +159 -159
  133. package/src/SvToaster.test.ts +95 -95
  134. package/src/SvToggleButton.svelte +85 -85
  135. package/src/SvTooltip.svelte +161 -161
  136. package/src/SvTour.svelte +208 -208
  137. package/src/SvTree.svelte +444 -444
  138. package/src/SvTreeSelect.svelte +235 -235
  139. package/src/a11y/dismissable.test.ts +119 -119
  140. package/src/a11y/dismissable.ts +114 -114
  141. package/src/a11y.contract.test.ts +49 -49
  142. package/src/a11y.test.ts +59 -59
  143. package/src/a11y.ts +61 -61
  144. package/src/ai.test.ts +502 -502
  145. package/src/ai.ts +1391 -1391
  146. package/src/build-api.coverage.test.ts +633 -633
  147. package/src/build-api.ts +846 -846
  148. package/src/builtin-editors.grid.test.ts +83 -83
  149. package/src/cell-formatting.ts +169 -169
  150. package/src/cell-render.test.ts +513 -513
  151. package/src/cell-render.ts +496 -496
  152. package/src/cell-values.ts +118 -118
  153. package/src/chart-export.ts +201 -201
  154. package/src/chart-view.svelte.ts +36 -36
  155. package/src/chart.ts +2295 -2295
  156. package/src/collaboration.test.ts +104 -104
  157. package/src/collaboration.ts +167 -167
  158. package/src/core.performance.test.ts +30 -30
  159. package/src/core.ts +1261 -1261
  160. package/src/createAutocomplete.svelte.ts +132 -132
  161. package/src/createCombobox.svelte.ts +191 -191
  162. package/src/createCountryInput.svelte.ts +157 -157
  163. package/src/createDropdownList.svelte.ts +168 -168
  164. package/src/createForm.svelte.ts +386 -386
  165. package/src/createGrid.svelte.ts +42 -42
  166. package/src/createGrid.test.ts +10 -10
  167. package/src/createGridState.svelte.ts +17 -17
  168. package/src/createListbox.svelte.ts +250 -250
  169. package/src/createMenu.svelte.ts +224 -224
  170. package/src/createPopoverSelect.svelte.ts +213 -213
  171. package/src/createSlider.svelte.ts +191 -191
  172. package/src/createTooltip.svelte.ts +144 -144
  173. package/src/createTree.svelte.ts +319 -319
  174. package/src/editing.test.ts +949 -949
  175. package/src/editing.ts +606 -606
  176. package/src/editor-contract.ts +170 -170
  177. package/src/editor-registry.grid.test.ts +144 -144
  178. package/src/editor-registry.ts +122 -122
  179. package/src/export-data-api.test.ts +126 -126
  180. package/src/export-format.test.ts +107 -107
  181. package/src/export-format.ts +601 -601
  182. package/src/filter-operators.ts +160 -160
  183. package/src/flex-render.ts +3 -3
  184. package/src/form-field.ts +127 -127
  185. package/src/group-display.test.ts +167 -167
  186. package/src/group-display.ts +200 -200
  187. package/src/headless.ts +87 -87
  188. package/src/index.ts +754 -754
  189. package/src/js-scroller.svelte.ts +173 -173
  190. package/src/keyboard-handlers.ts +270 -270
  191. package/src/keyboard.test.ts +59 -59
  192. package/src/keyboard.ts +97 -97
  193. package/src/list-nav.test.ts +49 -49
  194. package/src/list-nav.ts +29 -29
  195. package/src/list-option.test.ts +56 -56
  196. package/src/list-option.ts +172 -172
  197. package/src/menus.ts +567 -567
  198. package/src/merge-objects.ts +48 -48
  199. package/src/overlays.test.ts +90 -90
  200. package/src/render-component.ts +28 -28
  201. package/src/row-drag-touch.ts +211 -211
  202. package/src/row-drag.test.ts +353 -353
  203. package/src/row-drag.ts +415 -415
  204. package/src/row-resize.ts +210 -210
  205. package/src/scheduler-model.test.ts +562 -562
  206. package/src/scheduler-model.ts +872 -872
  207. package/src/selection.test.ts +754 -754
  208. package/src/selection.ts +491 -491
  209. package/src/server-data-source.test.ts +383 -383
  210. package/src/server-data-source.ts +469 -469
  211. package/src/sparkline.test.ts +68 -68
  212. package/src/sparkline.ts +169 -169
  213. package/src/spreadsheet.test.ts +488 -488
  214. package/src/spreadsheet.ts +312 -312
  215. package/src/static-functions.ts +11 -11
  216. package/src/subscribe.ts +38 -38
  217. package/src/svgrid-wrapper.types.ts +558 -558
  218. package/src/svgrid.async-editor-options.test.ts +273 -273
  219. package/src/svgrid.auto-row-height.test.ts +204 -204
  220. package/src/svgrid.behavior.test.ts +910 -910
  221. package/src/svgrid.charting.test.ts +534 -534
  222. package/src/svgrid.comments-autocomplete.test.ts +127 -127
  223. package/src/svgrid.context-menu.test.ts +147 -147
  224. package/src/svgrid.features.test.ts +157 -157
  225. package/src/svgrid.filter-depth.test.ts +163 -163
  226. package/src/svgrid.filter-menu-listbox.svelte.test.ts +331 -331
  227. package/src/svgrid.filter-menu-scroll.test.ts +112 -112
  228. package/src/svgrid.grand-total.test.ts +188 -188
  229. package/src/svgrid.group-display-mode.test.ts +171 -171
  230. package/src/svgrid.group-footers.test.ts +121 -121
  231. package/src/svgrid.group-pagination.test.ts +153 -153
  232. package/src/svgrid.new-features.wrapper.test.ts +251 -251
  233. package/src/svgrid.tree-data.test.ts +186 -186
  234. package/src/svgrid.wrapper.test.ts +63 -63
  235. package/src/svgriddropdown.async-panel.svelte.test.ts +195 -195
  236. package/src/test-setup.ts +62 -62
  237. package/src/themes/index.ts +288 -288
  238. package/src/toast-store.svelte.ts +246 -246
  239. package/src/toast-store.test.ts +147 -147
  240. package/src/tree-row-model.test.ts +168 -168
  241. package/src/ui-buttons.test.ts +144 -144
  242. package/src/ui-inputs.test.ts +118 -118
  243. package/src/ui-localization.test.ts +113 -113
  244. package/src/ui-range.test.ts +70 -70
  245. package/src/ui-selection.test.ts +155 -155
  246. package/src/ui-tier1.test.ts +142 -142
  247. package/src/virtual.test.ts +88 -88
  248. package/src/virtualization/column-virtualizer.test.ts +27 -27
  249. package/src/virtualization/column-virtualizer.ts +30 -30
  250. package/src/virtualization/svelte-virtualizer.svelte.ts +26 -26
  251. package/src/virtualization/types.ts +30 -30
  252. package/src/virtualization/virtualizer.test.ts +47 -47
  253. package/src/virtualization/virtualizer.ts +322 -322
package/src/SvTour.svelte CHANGED
@@ -1,208 +1,208 @@
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
- <!-- A step's `image` is either a URL (rendered as an img above) or
160
- inline SVG markup the app author wrote for its own tour - never
161
- user input, so rendering it as markup is the intent. -->
162
- <!-- eslint-disable-next-line svelte/no-at-html-tags -->
163
- {#if /^(https?:|data:|\/)/.test(step.image)}<img class="sv-tour__img" src={step.image} alt="" />{:else}{@html step.image}{/if}
164
- </div>
165
- {/if}
166
- {#if step.title}<div class="sv-tour__title">{step.title}</div>{/if}
167
- <div class="sv-tour__body">{step.content}</div>
168
- <div class="sv-tour__foot">
169
- <span class="sv-tour__count">{index + 1} / {steps.length}</span>
170
- <div class="sv-tour__btns">
171
- <button type="button" class="sv-tour__skip" onclick={skip}>Skip</button>
172
- {#if index > 0}<button type="button" class="sv-tour__back" onclick={back}>Back</button>{/if}
173
- <button type="button" class="sv-tour__next" onclick={next}>{index === steps.length - 1 ? 'Done' : 'Next'}</button>
174
- </div>
175
- </div>
176
- </div>
177
- </div>
178
- {/if}
179
-
180
- <style>
181
- :global(.sv-tour) { position: fixed; inset: 0; z-index: 2147483000; }
182
- :global(.sv-tour__backdrop) { position: fixed; inset: 0; background: rgba(15, 23, 42, 0.55); }
183
- :global(.sv-tour__spot) {
184
- position: fixed; border-radius: 8px; pointer-events: none;
185
- box-shadow: 0 0 0 9999px rgba(15, 23, 42, 0.55); transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
186
- }
187
- :global(.sv-tour__pop) {
188
- position: fixed; z-index: 1; width: 300px; max-width: calc(100vw - 24px);
189
- background: var(--sg-bg, #fff); color: var(--sg-fg, #0f172a);
190
- border: 1px solid var(--sg-border, #e2e8f0); border-radius: 12px; padding: 14px 16px;
191
- box-shadow: 0 20px 48px -16px rgba(15, 23, 42, 0.5);
192
- animation: sv-tour-in 0.16s cubic-bezier(0.16, 1, 0.3, 1) both;
193
- }
194
- @keyframes sv-tour-in { from { opacity: 0; transform: translateY(4px) } }
195
- :global(.sv-tour__pop--top) { animation: none; }
196
- :global(.sv-tour__media) { margin: -2px -4px 12px; border-radius: 9px; overflow: hidden; line-height: 0; }
197
- :global(.sv-tour__media svg), :global(.sv-tour__img) { display: block; width: 100%; height: auto; }
198
- :global(.sv-tour__title) { font-size: 14.5px; font-weight: 650; margin-bottom: 4px; }
199
- :global(.sv-tour__body) { font-size: 13px; line-height: 1.55; color: var(--sg-fg, #334155); }
200
- :global(.sv-tour__foot) { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 14px; }
201
- :global(.sv-tour__count) { font-size: 12px; color: var(--sg-muted, #94a3b8); font-variant-numeric: tabular-nums; }
202
- :global(.sv-tour__btns) { display: flex; gap: 6px; }
203
- :global(.sv-tour__skip), :global(.sv-tour__back), :global(.sv-tour__next) {
204
- 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);
205
- }
206
- :global(.sv-tour__skip) { border-color: transparent; background: none; color: var(--sg-muted, #64748b); }
207
- :global(.sv-tour__next) { background: var(--sg-accent, #2563eb); border-color: var(--sg-accent, #2563eb); color: var(--sg-on-accent, #fff); }
208
- </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
+ <!-- A step's `image` is either a URL (rendered as an img above) or
160
+ inline SVG markup the app author wrote for its own tour - never
161
+ user input, so rendering it as markup is the intent. -->
162
+ <!-- eslint-disable-next-line svelte/no-at-html-tags -->
163
+ {#if /^(https?:|data:|\/)/.test(step.image)}<img class="sv-tour__img" src={step.image} alt="" />{:else}{@html step.image}{/if}
164
+ </div>
165
+ {/if}
166
+ {#if step.title}<div class="sv-tour__title">{step.title}</div>{/if}
167
+ <div class="sv-tour__body">{step.content}</div>
168
+ <div class="sv-tour__foot">
169
+ <span class="sv-tour__count">{index + 1} / {steps.length}</span>
170
+ <div class="sv-tour__btns">
171
+ <button type="button" class="sv-tour__skip" onclick={skip}>Skip</button>
172
+ {#if index > 0}<button type="button" class="sv-tour__back" onclick={back}>Back</button>{/if}
173
+ <button type="button" class="sv-tour__next" onclick={next}>{index === steps.length - 1 ? 'Done' : 'Next'}</button>
174
+ </div>
175
+ </div>
176
+ </div>
177
+ </div>
178
+ {/if}
179
+
180
+ <style>
181
+ :global(.sv-tour) { position: fixed; inset: 0; z-index: 2147483000; }
182
+ :global(.sv-tour__backdrop) { position: fixed; inset: 0; background: rgba(15, 23, 42, 0.55); }
183
+ :global(.sv-tour__spot) {
184
+ position: fixed; border-radius: 8px; pointer-events: none;
185
+ box-shadow: 0 0 0 9999px rgba(15, 23, 42, 0.55); transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
186
+ }
187
+ :global(.sv-tour__pop) {
188
+ position: fixed; z-index: 1; width: 300px; max-width: calc(100vw - 24px);
189
+ background: var(--sg-bg, #fff); color: var(--sg-fg, #0f172a);
190
+ border: 1px solid var(--sg-border, #e2e8f0); border-radius: 12px; padding: 14px 16px;
191
+ box-shadow: 0 20px 48px -16px rgba(15, 23, 42, 0.5);
192
+ animation: sv-tour-in 0.16s cubic-bezier(0.16, 1, 0.3, 1) both;
193
+ }
194
+ @keyframes sv-tour-in { from { opacity: 0; transform: translateY(4px) } }
195
+ :global(.sv-tour__pop--top) { animation: none; }
196
+ :global(.sv-tour__media) { margin: -2px -4px 12px; border-radius: 9px; overflow: hidden; line-height: 0; }
197
+ :global(.sv-tour__media svg), :global(.sv-tour__img) { display: block; width: 100%; height: auto; }
198
+ :global(.sv-tour__title) { font-size: 14.5px; font-weight: 650; margin-bottom: 4px; }
199
+ :global(.sv-tour__body) { font-size: 13px; line-height: 1.55; color: var(--sg-fg, #334155); }
200
+ :global(.sv-tour__foot) { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 14px; }
201
+ :global(.sv-tour__count) { font-size: 12px; color: var(--sg-muted, #94a3b8); font-variant-numeric: tabular-nums; }
202
+ :global(.sv-tour__btns) { display: flex; gap: 6px; }
203
+ :global(.sv-tour__skip), :global(.sv-tour__back), :global(.sv-tour__next) {
204
+ 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);
205
+ }
206
+ :global(.sv-tour__skip) { border-color: transparent; background: none; color: var(--sg-muted, #64748b); }
207
+ :global(.sv-tour__next) { background: var(--sg-accent, #2563eb); border-color: var(--sg-accent, #2563eb); color: var(--sg-on-accent, #fff); }
208
+ </style>