@svgrid/grid 2.2.25 → 2.2.27

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 (218) hide show
  1. package/README.md +199 -145
  2. package/dist/FlexRender.svelte +96 -96
  3. package/dist/GridFooter.svelte +179 -179
  4. package/dist/GridMenus.svelte +734 -728
  5. package/dist/SvAutoComplete.svelte +165 -165
  6. package/dist/SvCalendar.svelte +503 -503
  7. package/dist/SvCarousel.svelte +141 -141
  8. package/dist/SvCheckBox.svelte +101 -101
  9. package/dist/SvColorInput.svelte +181 -181
  10. package/dist/SvComboBox.svelte +275 -275
  11. package/dist/SvContextMenu.svelte +116 -116
  12. package/dist/SvCountryInput.svelte +160 -160
  13. package/dist/SvDrawer.svelte +250 -250
  14. package/dist/SvDropDownList.svelte +374 -374
  15. package/dist/SvDurationInput.svelte +126 -126
  16. package/dist/SvField.svelte +293 -293
  17. package/dist/SvForm.svelte +437 -437
  18. package/dist/SvGrid.css +2723 -2719
  19. package/dist/SvGrid.svelte +3333 -3333
  20. package/dist/SvGridChart.svelte +1724 -1724
  21. package/dist/SvGridChartPanel.svelte +485 -485
  22. package/dist/SvGridChartView.svelte +70 -70
  23. package/dist/SvGridDropdown.svelte +696 -696
  24. package/dist/SvGridSelect.svelte +259 -259
  25. package/dist/SvGroupCell.svelte +109 -109
  26. package/dist/SvListBox.svelte +287 -287
  27. package/dist/SvMaskedInput.svelte +122 -122
  28. package/dist/SvMenu.svelte +124 -124
  29. package/dist/SvMenuList.svelte +146 -146
  30. package/dist/SvMultiSelect.svelte +281 -281
  31. package/dist/SvNumberInput.svelte +168 -168
  32. package/dist/SvOtpInput.svelte +158 -158
  33. package/dist/SvPasswordInput.svelte +151 -151
  34. package/dist/SvPhoneInput.svelte +131 -131
  35. package/dist/SvPopover.svelte +197 -197
  36. package/dist/SvRadioGroup.svelte +107 -107
  37. package/dist/SvRowGroupPanel.svelte +170 -170
  38. package/dist/SvScrollArea.svelte +61 -61
  39. package/dist/SvSlider.svelte +200 -200
  40. package/dist/SvSwitchButton.svelte +107 -107
  41. package/dist/SvTagsInput.svelte +112 -112
  42. package/dist/SvTextInput.svelte +147 -147
  43. package/dist/SvTimePicker.svelte +245 -245
  44. package/dist/SvToaster.svelte +159 -159
  45. package/dist/SvToggleButton.svelte +85 -85
  46. package/dist/SvTooltip.svelte +161 -161
  47. package/dist/SvTour.svelte +204 -204
  48. package/dist/SvTree.svelte +437 -437
  49. package/dist/SvTreeSelect.svelte +233 -233
  50. package/dist/a11y/dismissable.d.ts +11 -0
  51. package/dist/a11y/dismissable.js +21 -0
  52. package/dist/ai.js +3 -3
  53. package/dist/cdn/GridMenus-BzxEYNtW.js +421 -0
  54. package/dist/cdn/GridMenus-Dr-nGEXn.js +417 -0
  55. package/dist/cdn/{SvDateTimePicker-CYC7gRER.js → SvDateTimePicker-B1sDc9Pz.js} +451 -444
  56. package/dist/cdn/{SvDateTimePicker-DtQKd4Ns.js → SvDateTimePicker-Bh0FTs1E.js} +114 -107
  57. package/dist/cdn/{SvGridChart-BhnFdLd0.js → SvGridChart-BKQsO5fZ.js} +1 -1
  58. package/dist/cdn/{SvGridChart-BcLCYvw9.js → SvGridChart-Bgk4hDs8.js} +1 -1
  59. package/dist/cdn/{SvGridChartPanel-DvjwxLvK.js → SvGridChartPanel-DSkHIQDd.js} +1 -1
  60. package/dist/cdn/{SvGridChartPanel-Cmx9DHAS.js → SvGridChartPanel-DkCc2Z7b.js} +1 -1
  61. package/dist/cdn/{SvGridChartView-B40DTJSX.js → SvGridChartView-BrbVaELm.js} +1 -1
  62. package/dist/cdn/{SvGridChartView-PwqI4s02.js → SvGridChartView-i9rWvSKg.js} +1 -1
  63. package/dist/cdn/{SvGridDropdown-hpnHvOGt.js → SvGridDropdown-CGxxopQ4.js} +1 -1
  64. package/dist/cdn/{SvGridDropdown-DjALc_4f.js → SvGridDropdown-D08sVmAy.js} +1 -1
  65. package/dist/cdn/{src-DysW9qbk.js → src-Cw8d9U8j.js} +5753 -5753
  66. package/dist/cdn/{src-bYfr_7aR.js → src-cgs1wcUS.js} +8102 -8102
  67. package/dist/cdn/svgrid.js +9 -9
  68. package/dist/cdn/svgrid.svelte-external.js +9 -9
  69. package/dist/chart-export.js +8 -8
  70. package/dist/index.d.ts +1 -1
  71. package/dist/index.js +1 -1
  72. package/package.json +30 -13
  73. package/src/FlexRender.svelte +96 -96
  74. package/src/GridFooter.svelte +179 -179
  75. package/src/GridMenus.svelte +734 -728
  76. package/src/SvAutoComplete.svelte +165 -165
  77. package/src/SvCalendar.svelte +503 -503
  78. package/src/SvCalendar.test.ts +226 -226
  79. package/src/SvCarousel.svelte +141 -141
  80. package/src/SvCheckBox.svelte +101 -101
  81. package/src/SvColorInput.svelte +181 -181
  82. package/src/SvComboBox.svelte +275 -275
  83. package/src/SvContextMenu.svelte +116 -116
  84. package/src/SvCountryInput.svelte +160 -160
  85. package/src/SvDrawer.svelte +250 -250
  86. package/src/SvDropDownList.svelte +374 -374
  87. package/src/SvDurationInput.svelte +126 -126
  88. package/src/SvField.svelte +293 -293
  89. package/src/SvForm.svelte +437 -437
  90. package/src/SvForm.test.ts +411 -411
  91. package/src/SvGrid.controller.svelte.ts +3239 -3239
  92. package/src/SvGrid.css +2723 -2719
  93. package/src/SvGrid.svelte +3333 -3333
  94. package/src/SvGrid.types.ts +1613 -1613
  95. package/src/SvGridChart.svelte +1724 -1724
  96. package/src/SvGridChartPanel.svelte +485 -485
  97. package/src/SvGridChartView.svelte +70 -70
  98. package/src/SvGridDropdown.svelte +696 -696
  99. package/src/SvGridSelect.svelte +259 -259
  100. package/src/SvGroupCell.svelte +109 -109
  101. package/src/SvListBox.svelte +287 -287
  102. package/src/SvMaskedInput.svelte +122 -122
  103. package/src/SvMenu.svelte +124 -124
  104. package/src/SvMenu.test.ts +97 -97
  105. package/src/SvMenuList.svelte +146 -146
  106. package/src/SvMultiSelect.svelte +281 -281
  107. package/src/SvNumberInput.svelte +168 -168
  108. package/src/SvOtpInput.svelte +158 -158
  109. package/src/SvPasswordInput.svelte +151 -151
  110. package/src/SvPhoneInput.svelte +131 -131
  111. package/src/SvPopover.svelte +197 -197
  112. package/src/SvRadioGroup.svelte +107 -107
  113. package/src/SvRowGroupPanel.svelte +170 -170
  114. package/src/SvScrollArea.svelte +61 -61
  115. package/src/SvSlider.svelte +200 -200
  116. package/src/SvSwitchButton.svelte +107 -107
  117. package/src/SvTagsInput.svelte +112 -112
  118. package/src/SvTextInput.svelte +147 -147
  119. package/src/SvTimePicker.svelte +245 -245
  120. package/src/SvToaster.svelte +159 -159
  121. package/src/SvToaster.test.ts +95 -95
  122. package/src/SvToggleButton.svelte +85 -85
  123. package/src/SvTooltip.svelte +161 -161
  124. package/src/SvTour.svelte +204 -204
  125. package/src/SvTree.svelte +437 -437
  126. package/src/SvTreeSelect.svelte +233 -233
  127. package/src/a11y/dismissable.test.ts +119 -95
  128. package/src/a11y/dismissable.ts +114 -94
  129. package/src/a11y.contract.test.ts +49 -49
  130. package/src/a11y.test.ts +59 -59
  131. package/src/a11y.ts +61 -61
  132. package/src/ai.test.ts +502 -502
  133. package/src/ai.ts +1391 -1391
  134. package/src/build-api.coverage.test.ts +633 -633
  135. package/src/build-api.ts +895 -895
  136. package/src/builtin-editors.grid.test.ts +85 -85
  137. package/src/cell-formatting.ts +169 -169
  138. package/src/cell-render.ts +469 -469
  139. package/src/chart-export.ts +201 -201
  140. package/src/chart-view.svelte.ts +36 -36
  141. package/src/chart.ts +2296 -2296
  142. package/src/collaboration.test.ts +104 -104
  143. package/src/collaboration.ts +167 -167
  144. package/src/core.performance.test.ts +30 -30
  145. package/src/core.ts +1111 -1111
  146. package/src/createAutocomplete.svelte.ts +132 -132
  147. package/src/createCombobox.svelte.ts +191 -191
  148. package/src/createCountryInput.svelte.ts +157 -157
  149. package/src/createDropdownList.svelte.ts +168 -168
  150. package/src/createForm.svelte.ts +386 -386
  151. package/src/createGrid.svelte.ts +42 -42
  152. package/src/createGrid.test.ts +10 -10
  153. package/src/createGridState.svelte.ts +17 -17
  154. package/src/createMenu.svelte.ts +225 -225
  155. package/src/createPopoverSelect.svelte.ts +213 -213
  156. package/src/createSlider.svelte.ts +191 -191
  157. package/src/createTooltip.svelte.ts +144 -144
  158. package/src/createTree.svelte.ts +319 -319
  159. package/src/editing.test.ts +859 -859
  160. package/src/editing.ts +675 -675
  161. package/src/editor-contract.ts +157 -157
  162. package/src/export-data-api.test.ts +126 -126
  163. package/src/export-format.test.ts +107 -107
  164. package/src/export-format.ts +598 -598
  165. package/src/filter-operators.ts +157 -157
  166. package/src/flex-render.ts +3 -3
  167. package/src/form-field.ts +127 -127
  168. package/src/index.ts +713 -712
  169. package/src/js-scroller.svelte.ts +173 -173
  170. package/src/keyboard.test.ts +59 -59
  171. package/src/keyboard.ts +97 -97
  172. package/src/list-nav.test.ts +49 -49
  173. package/src/list-nav.ts +29 -29
  174. package/src/list-option.test.ts +56 -56
  175. package/src/list-option.ts +172 -172
  176. package/src/menus.test.ts +700 -700
  177. package/src/menus.ts +652 -652
  178. package/src/merge-objects.ts +48 -48
  179. package/src/overlays.test.ts +90 -90
  180. package/src/render-component.ts +28 -28
  181. package/src/scheduler-model.test.ts +562 -562
  182. package/src/scheduler-model.ts +872 -872
  183. package/src/selection.test.ts +754 -754
  184. package/src/selection.ts +600 -600
  185. package/src/server-data-source.test.ts +289 -289
  186. package/src/server-data-source.ts +413 -413
  187. package/src/sparkline.test.ts +68 -68
  188. package/src/sparkline.ts +169 -169
  189. package/src/spreadsheet.test.ts +489 -489
  190. package/src/spreadsheet.ts +312 -312
  191. package/src/static-functions.ts +11 -11
  192. package/src/subscribe.ts +38 -38
  193. package/src/svgrid-wrapper.types.ts +524 -524
  194. package/src/svgrid.behavior.test.ts +706 -706
  195. package/src/svgrid.charting.test.ts +534 -534
  196. package/src/svgrid.features.test.ts +157 -157
  197. package/src/svgrid.filter-menu-scroll.test.ts +102 -0
  198. package/src/svgrid.new-features.wrapper.test.ts +251 -251
  199. package/src/svgrid.wrapper.test.ts +40 -40
  200. package/src/test-setup.ts +62 -62
  201. package/src/themes/index.ts +215 -215
  202. package/src/toast-store.svelte.ts +246 -246
  203. package/src/toast-store.test.ts +147 -147
  204. package/src/ui-buttons.test.ts +144 -144
  205. package/src/ui-inputs.test.ts +118 -118
  206. package/src/ui-range.test.ts +70 -70
  207. package/src/ui-selection.test.ts +155 -155
  208. package/src/ui-tier1.test.ts +142 -142
  209. package/src/virtual.test.ts +88 -88
  210. package/src/virtualization/column-virtualizer.test.ts +27 -27
  211. package/src/virtualization/column-virtualizer.ts +30 -30
  212. package/src/virtualization/svelte-virtualizer.svelte.ts +26 -26
  213. package/src/virtualization/types.ts +30 -30
  214. package/src/virtualization/virtualizer.test.ts +47 -47
  215. package/src/virtualization/virtualizer.ts +296 -296
  216. package/themes/ember.css +71 -71
  217. package/dist/cdn/GridMenus-GfCAHgkZ.js +0 -420
  218. package/dist/cdn/GridMenus-GiVNSeDU.js +0 -416
@@ -1,104 +1,104 @@
1
- import { describe, expect, it, vi } from 'vitest'
2
- import {
3
- broadcastChannelTransport,
4
- createCollaboration,
5
- type CollabMessage,
6
- type CollabTransport,
7
- } from './collaboration'
8
-
9
- /** An in-memory bus so two controllers can talk in a test. */
10
- function makeBus() {
11
- const handlers = new Set<(m: CollabMessage) => void>()
12
- const transportFor = (): CollabTransport => ({
13
- post: (msg) => {
14
- // deliver async-ish to every subscriber except none (real channels echo
15
- // to other tabs, not self; our controllers ignore their own id anyway).
16
- for (const h of [...handlers]) h(msg)
17
- },
18
- subscribe: (h) => {
19
- handlers.add(h)
20
- return () => handlers.delete(h)
21
- },
22
- })
23
- return { transportFor }
24
- }
25
-
26
- const userA = { id: 'a', name: 'Ada', color: '#f00' }
27
- const userB = { id: 'b', name: 'Bob', color: '#00f' }
28
-
29
- describe('createCollaboration', () => {
30
- it('peers see each other after hello', () => {
31
- const bus = makeBus()
32
- const a = createCollaboration({ user: userA, transport: bus.transportFor() })
33
- const b = createCollaboration({ user: userB, transport: bus.transportFor() })
34
- // A is announced; B's hello reaches A; A replies presence.
35
- expect(a.peers().map((p) => p.id)).toEqual(['b'])
36
- expect(b.peers().map((p) => p.id)).toEqual(['a'])
37
- a.dispose()
38
- b.dispose()
39
- })
40
-
41
- it('closes the transport channel on dispose (#82)', () => {
42
- // The controller now forwards dispose to the transport...
43
- const disposeSpy = vi.fn()
44
- const collab = createCollaboration({
45
- user: userA,
46
- transport: { post: vi.fn(), subscribe: () => () => {}, dispose: disposeSpy },
47
- })
48
- collab.dispose()
49
- expect(disposeSpy).toHaveBeenCalledTimes(1)
50
-
51
- // ...and broadcastChannelTransport.dispose() closes the BroadcastChannel.
52
- const close = vi.fn()
53
- class FakeBroadcastChannel {
54
- postMessage = vi.fn()
55
- addEventListener = vi.fn()
56
- removeEventListener = vi.fn()
57
- close = close
58
- constructor(public name: string) {}
59
- }
60
- const Orig = (globalThis as { BroadcastChannel?: unknown }).BroadcastChannel
61
- ;(globalThis as { BroadcastChannel?: unknown }).BroadcastChannel = FakeBroadcastChannel
62
- try {
63
- broadcastChannelTransport('room').dispose?.()
64
- expect(close).toHaveBeenCalledTimes(1)
65
- } finally {
66
- ;(globalThis as { BroadcastChannel?: unknown }).BroadcastChannel = Orig
67
- }
68
- })
69
-
70
- it('setCell propagates a remote cursor', () => {
71
- const bus = makeBus()
72
- const onPeers = vi.fn()
73
- const a = createCollaboration({ user: userA, transport: bus.transportFor(), onPeersChange: onPeers })
74
- const b = createCollaboration({ user: userB, transport: bus.transportFor() })
75
- b.setCell({ rowId: 'r1', columnId: 'salary' })
76
- const peerB = a.peers().find((p) => p.id === 'b')
77
- expect(peerB?.cell).toEqual({ rowId: 'r1', columnId: 'salary' })
78
- a.dispose()
79
- b.dispose()
80
- })
81
-
82
- it('sendEdit fires onRemoteEdit on the other peer only', () => {
83
- const bus = makeBus()
84
- const aEdits = vi.fn()
85
- const bEdits = vi.fn()
86
- const a = createCollaboration({ user: userA, transport: bus.transportFor(), onRemoteEdit: aEdits })
87
- const b = createCollaboration({ user: userB, transport: bus.transportFor(), onRemoteEdit: bEdits })
88
- a.sendEdit('r2', 'name', 'Grace')
89
- expect(bEdits).toHaveBeenCalledWith(expect.objectContaining({ rowId: 'r2', columnId: 'name', value: 'Grace' }))
90
- expect(aEdits).not.toHaveBeenCalled() // not echoed to self
91
- a.dispose()
92
- b.dispose()
93
- })
94
-
95
- it('bye removes a peer', () => {
96
- const bus = makeBus()
97
- const a = createCollaboration({ user: userA, transport: bus.transportFor() })
98
- const b = createCollaboration({ user: userB, transport: bus.transportFor() })
99
- expect(a.peers()).toHaveLength(1)
100
- b.dispose()
101
- expect(a.peers()).toHaveLength(0)
102
- a.dispose()
103
- })
104
- })
1
+ import { describe, expect, it, vi } from 'vitest'
2
+ import {
3
+ broadcastChannelTransport,
4
+ createCollaboration,
5
+ type CollabMessage,
6
+ type CollabTransport,
7
+ } from './collaboration'
8
+
9
+ /** An in-memory bus so two controllers can talk in a test. */
10
+ function makeBus() {
11
+ const handlers = new Set<(m: CollabMessage) => void>()
12
+ const transportFor = (): CollabTransport => ({
13
+ post: (msg) => {
14
+ // deliver async-ish to every subscriber except none (real channels echo
15
+ // to other tabs, not self; our controllers ignore their own id anyway).
16
+ for (const h of [...handlers]) h(msg)
17
+ },
18
+ subscribe: (h) => {
19
+ handlers.add(h)
20
+ return () => handlers.delete(h)
21
+ },
22
+ })
23
+ return { transportFor }
24
+ }
25
+
26
+ const userA = { id: 'a', name: 'Ada', color: '#f00' }
27
+ const userB = { id: 'b', name: 'Bob', color: '#00f' }
28
+
29
+ describe('createCollaboration', () => {
30
+ it('peers see each other after hello', () => {
31
+ const bus = makeBus()
32
+ const a = createCollaboration({ user: userA, transport: bus.transportFor() })
33
+ const b = createCollaboration({ user: userB, transport: bus.transportFor() })
34
+ // A is announced; B's hello reaches A; A replies presence.
35
+ expect(a.peers().map((p) => p.id)).toEqual(['b'])
36
+ expect(b.peers().map((p) => p.id)).toEqual(['a'])
37
+ a.dispose()
38
+ b.dispose()
39
+ })
40
+
41
+ it('closes the transport channel on dispose (#82)', () => {
42
+ // The controller now forwards dispose to the transport...
43
+ const disposeSpy = vi.fn()
44
+ const collab = createCollaboration({
45
+ user: userA,
46
+ transport: { post: vi.fn(), subscribe: () => () => {}, dispose: disposeSpy },
47
+ })
48
+ collab.dispose()
49
+ expect(disposeSpy).toHaveBeenCalledTimes(1)
50
+
51
+ // ...and broadcastChannelTransport.dispose() closes the BroadcastChannel.
52
+ const close = vi.fn()
53
+ class FakeBroadcastChannel {
54
+ postMessage = vi.fn()
55
+ addEventListener = vi.fn()
56
+ removeEventListener = vi.fn()
57
+ close = close
58
+ constructor(public name: string) {}
59
+ }
60
+ const Orig = (globalThis as { BroadcastChannel?: unknown }).BroadcastChannel
61
+ ;(globalThis as { BroadcastChannel?: unknown }).BroadcastChannel = FakeBroadcastChannel
62
+ try {
63
+ broadcastChannelTransport('room').dispose?.()
64
+ expect(close).toHaveBeenCalledTimes(1)
65
+ } finally {
66
+ ;(globalThis as { BroadcastChannel?: unknown }).BroadcastChannel = Orig
67
+ }
68
+ })
69
+
70
+ it('setCell propagates a remote cursor', () => {
71
+ const bus = makeBus()
72
+ const onPeers = vi.fn()
73
+ const a = createCollaboration({ user: userA, transport: bus.transportFor(), onPeersChange: onPeers })
74
+ const b = createCollaboration({ user: userB, transport: bus.transportFor() })
75
+ b.setCell({ rowId: 'r1', columnId: 'salary' })
76
+ const peerB = a.peers().find((p) => p.id === 'b')
77
+ expect(peerB?.cell).toEqual({ rowId: 'r1', columnId: 'salary' })
78
+ a.dispose()
79
+ b.dispose()
80
+ })
81
+
82
+ it('sendEdit fires onRemoteEdit on the other peer only', () => {
83
+ const bus = makeBus()
84
+ const aEdits = vi.fn()
85
+ const bEdits = vi.fn()
86
+ const a = createCollaboration({ user: userA, transport: bus.transportFor(), onRemoteEdit: aEdits })
87
+ const b = createCollaboration({ user: userB, transport: bus.transportFor(), onRemoteEdit: bEdits })
88
+ a.sendEdit('r2', 'name', 'Grace')
89
+ expect(bEdits).toHaveBeenCalledWith(expect.objectContaining({ rowId: 'r2', columnId: 'name', value: 'Grace' }))
90
+ expect(aEdits).not.toHaveBeenCalled() // not echoed to self
91
+ a.dispose()
92
+ b.dispose()
93
+ })
94
+
95
+ it('bye removes a peer', () => {
96
+ const bus = makeBus()
97
+ const a = createCollaboration({ user: userA, transport: bus.transportFor() })
98
+ const b = createCollaboration({ user: userB, transport: bus.transportFor() })
99
+ expect(a.peers()).toHaveLength(1)
100
+ b.dispose()
101
+ expect(a.peers()).toHaveLength(0)
102
+ a.dispose()
103
+ })
104
+ })
@@ -1,167 +1,167 @@
1
- /**
2
- * Real-time collaboration. Presence (who else is here + where their cursor
3
- * is) and live edits (a change in one client lands in every other), over a
4
- * pluggable transport. The transport is the only thing tied to infrastructure
5
- * - swap `broadcastChannelTransport` (same-browser tabs, zero backend) for a
6
- * WebSocket / WebRTC / CRDT adapter and the controller is unchanged.
7
- *
8
- * This is also the natural "multiple agents on one grid" substrate: an AI
9
- * agent is just another peer posting `edit` messages.
10
- */
11
- export type CollabUser = {
12
- id: string
13
- name: string
14
- /** A CSS color for this user's cursor / avatar. */
15
- color: string
16
- }
17
-
18
- export type CollabCell = { rowId: string; columnId: string }
19
-
20
- export type CollabPresence = CollabUser & {
21
- cell: CollabCell | null
22
- /** Last time we heard from this peer (ms). Used to prune the gone. */
23
- ts: number
24
- }
25
-
26
- export type CollabMessage =
27
- | { kind: 'hello'; user: CollabUser }
28
- | { kind: 'presence'; user: CollabUser; cell: CollabCell | null }
29
- | { kind: 'edit'; user: CollabUser; rowId: string; columnId: string; value: unknown }
30
- | { kind: 'bye'; userId: string }
31
-
32
- export type CollabTransport = {
33
- post(msg: CollabMessage): void
34
- subscribe(handler: (msg: CollabMessage) => void): () => void
35
- /** Release any underlying resource (e.g. a BroadcastChannel). Optional. */
36
- dispose?(): void
37
- }
38
-
39
- export type Collaboration = {
40
- /** Broadcast where this user's cursor is (or null when it leaves). */
41
- setCell(cell: CollabCell | null): void
42
- /** Broadcast a cell edit to every peer. */
43
- sendEdit(rowId: string, columnId: string, value: unknown): void
44
- /** The peers currently present (excludes self). */
45
- peers(): CollabPresence[]
46
- dispose(): void
47
- }
48
-
49
- export type CollaborationOptions = {
50
- user: CollabUser
51
- transport: CollabTransport
52
- /** Fired (with self excluded) whenever the peer set or a cursor changes. */
53
- onPeersChange?: (peers: CollabPresence[]) => void
54
- /** Fired when another user edits a cell - apply it to your data. */
55
- onRemoteEdit?: (edit: {
56
- rowId: string
57
- columnId: string
58
- value: unknown
59
- user: CollabUser
60
- }) => void
61
- /** Drop peers we haven't heard from in this many ms. Default 15000. */
62
- peerTimeoutMs?: number
63
- }
64
-
65
- /** BroadcastChannel transport - live across tabs of the same browser, no
66
- * backend. No-ops where BroadcastChannel is unavailable (SSR / old env). */
67
- export function broadcastChannelTransport(name: string): CollabTransport {
68
- const available = typeof BroadcastChannel !== 'undefined'
69
- const channel = available ? new BroadcastChannel(name) : null
70
- return {
71
- post(msg) {
72
- channel?.postMessage(msg)
73
- },
74
- subscribe(handler) {
75
- if (!channel) return () => {}
76
- const listener = (e: MessageEvent) => handler(e.data as CollabMessage)
77
- channel.addEventListener('message', listener)
78
- return () => channel.removeEventListener('message', listener)
79
- },
80
- dispose() {
81
- channel?.close()
82
- },
83
- }
84
- }
85
-
86
- export function createCollaboration(options: CollaborationOptions): Collaboration {
87
- const { user, transport } = options
88
- const timeout = options.peerTimeoutMs ?? 15_000
89
- const peers = new Map<string, CollabPresence>()
90
- let ownCell: CollabCell | null = null
91
- let disposed = false
92
-
93
- const list = () => [...peers.values()].sort((a, b) => a.name.localeCompare(b.name))
94
- const notify = () => options.onPeersChange?.(list())
95
-
96
- function upsert(u: CollabUser, cell: CollabCell | null) {
97
- if (u.id === user.id) return
98
- peers.set(u.id, { ...u, cell, ts: Date.now() })
99
- notify()
100
- }
101
-
102
- const unsubscribe = transport.subscribe((msg) => {
103
- if (disposed) return
104
- switch (msg.kind) {
105
- case 'hello':
106
- upsert(msg.user, null)
107
- // Let the newcomer know we're here (and where our cursor is).
108
- transport.post({ kind: 'presence', user, cell: ownCell })
109
- break
110
- case 'presence':
111
- upsert(msg.user, msg.cell)
112
- break
113
- case 'edit':
114
- upsert(msg.user, { rowId: msg.rowId, columnId: msg.columnId })
115
- if (msg.user.id !== user.id) {
116
- options.onRemoteEdit?.({
117
- rowId: msg.rowId,
118
- columnId: msg.columnId,
119
- value: msg.value,
120
- user: msg.user,
121
- })
122
- }
123
- break
124
- case 'bye':
125
- if (peers.delete(msg.userId)) notify()
126
- break
127
- }
128
- })
129
-
130
- // Prune peers that went silent (closed tab without a `bye`).
131
- const pruneTimer =
132
- typeof setInterval !== 'undefined'
133
- ? setInterval(() => {
134
- const now = Date.now()
135
- let changed = false
136
- for (const [id, p] of peers) {
137
- if (now - p.ts > timeout) {
138
- peers.delete(id)
139
- changed = true
140
- }
141
- }
142
- if (changed) notify()
143
- }, Math.max(1000, timeout / 3))
144
- : null
145
-
146
- // Announce ourselves.
147
- transport.post({ kind: 'hello', user })
148
-
149
- return {
150
- setCell(cell) {
151
- ownCell = cell
152
- transport.post({ kind: 'presence', user, cell })
153
- },
154
- sendEdit(rowId, columnId, value) {
155
- transport.post({ kind: 'edit', user, rowId, columnId, value })
156
- },
157
- peers: list,
158
- dispose() {
159
- if (disposed) return
160
- disposed = true
161
- transport.post({ kind: 'bye', userId: user.id })
162
- unsubscribe()
163
- if (pruneTimer) clearInterval(pruneTimer)
164
- transport.dispose?.() // release the channel (BroadcastChannel etc.)
165
- },
166
- }
167
- }
1
+ /**
2
+ * Real-time collaboration. Presence (who else is here + where their cursor
3
+ * is) and live edits (a change in one client lands in every other), over a
4
+ * pluggable transport. The transport is the only thing tied to infrastructure
5
+ * - swap `broadcastChannelTransport` (same-browser tabs, zero backend) for a
6
+ * WebSocket / WebRTC / CRDT adapter and the controller is unchanged.
7
+ *
8
+ * This is also the natural "multiple agents on one grid" substrate: an AI
9
+ * agent is just another peer posting `edit` messages.
10
+ */
11
+ export type CollabUser = {
12
+ id: string
13
+ name: string
14
+ /** A CSS color for this user's cursor / avatar. */
15
+ color: string
16
+ }
17
+
18
+ export type CollabCell = { rowId: string; columnId: string }
19
+
20
+ export type CollabPresence = CollabUser & {
21
+ cell: CollabCell | null
22
+ /** Last time we heard from this peer (ms). Used to prune the gone. */
23
+ ts: number
24
+ }
25
+
26
+ export type CollabMessage =
27
+ | { kind: 'hello'; user: CollabUser }
28
+ | { kind: 'presence'; user: CollabUser; cell: CollabCell | null }
29
+ | { kind: 'edit'; user: CollabUser; rowId: string; columnId: string; value: unknown }
30
+ | { kind: 'bye'; userId: string }
31
+
32
+ export type CollabTransport = {
33
+ post(msg: CollabMessage): void
34
+ subscribe(handler: (msg: CollabMessage) => void): () => void
35
+ /** Release any underlying resource (e.g. a BroadcastChannel). Optional. */
36
+ dispose?(): void
37
+ }
38
+
39
+ export type Collaboration = {
40
+ /** Broadcast where this user's cursor is (or null when it leaves). */
41
+ setCell(cell: CollabCell | null): void
42
+ /** Broadcast a cell edit to every peer. */
43
+ sendEdit(rowId: string, columnId: string, value: unknown): void
44
+ /** The peers currently present (excludes self). */
45
+ peers(): CollabPresence[]
46
+ dispose(): void
47
+ }
48
+
49
+ export type CollaborationOptions = {
50
+ user: CollabUser
51
+ transport: CollabTransport
52
+ /** Fired (with self excluded) whenever the peer set or a cursor changes. */
53
+ onPeersChange?: (peers: CollabPresence[]) => void
54
+ /** Fired when another user edits a cell - apply it to your data. */
55
+ onRemoteEdit?: (edit: {
56
+ rowId: string
57
+ columnId: string
58
+ value: unknown
59
+ user: CollabUser
60
+ }) => void
61
+ /** Drop peers we haven't heard from in this many ms. Default 15000. */
62
+ peerTimeoutMs?: number
63
+ }
64
+
65
+ /** BroadcastChannel transport - live across tabs of the same browser, no
66
+ * backend. No-ops where BroadcastChannel is unavailable (SSR / old env). */
67
+ export function broadcastChannelTransport(name: string): CollabTransport {
68
+ const available = typeof BroadcastChannel !== 'undefined'
69
+ const channel = available ? new BroadcastChannel(name) : null
70
+ return {
71
+ post(msg) {
72
+ channel?.postMessage(msg)
73
+ },
74
+ subscribe(handler) {
75
+ if (!channel) return () => {}
76
+ const listener = (e: MessageEvent) => handler(e.data as CollabMessage)
77
+ channel.addEventListener('message', listener)
78
+ return () => channel.removeEventListener('message', listener)
79
+ },
80
+ dispose() {
81
+ channel?.close()
82
+ },
83
+ }
84
+ }
85
+
86
+ export function createCollaboration(options: CollaborationOptions): Collaboration {
87
+ const { user, transport } = options
88
+ const timeout = options.peerTimeoutMs ?? 15_000
89
+ const peers = new Map<string, CollabPresence>()
90
+ let ownCell: CollabCell | null = null
91
+ let disposed = false
92
+
93
+ const list = () => [...peers.values()].sort((a, b) => a.name.localeCompare(b.name))
94
+ const notify = () => options.onPeersChange?.(list())
95
+
96
+ function upsert(u: CollabUser, cell: CollabCell | null) {
97
+ if (u.id === user.id) return
98
+ peers.set(u.id, { ...u, cell, ts: Date.now() })
99
+ notify()
100
+ }
101
+
102
+ const unsubscribe = transport.subscribe((msg) => {
103
+ if (disposed) return
104
+ switch (msg.kind) {
105
+ case 'hello':
106
+ upsert(msg.user, null)
107
+ // Let the newcomer know we're here (and where our cursor is).
108
+ transport.post({ kind: 'presence', user, cell: ownCell })
109
+ break
110
+ case 'presence':
111
+ upsert(msg.user, msg.cell)
112
+ break
113
+ case 'edit':
114
+ upsert(msg.user, { rowId: msg.rowId, columnId: msg.columnId })
115
+ if (msg.user.id !== user.id) {
116
+ options.onRemoteEdit?.({
117
+ rowId: msg.rowId,
118
+ columnId: msg.columnId,
119
+ value: msg.value,
120
+ user: msg.user,
121
+ })
122
+ }
123
+ break
124
+ case 'bye':
125
+ if (peers.delete(msg.userId)) notify()
126
+ break
127
+ }
128
+ })
129
+
130
+ // Prune peers that went silent (closed tab without a `bye`).
131
+ const pruneTimer =
132
+ typeof setInterval !== 'undefined'
133
+ ? setInterval(() => {
134
+ const now = Date.now()
135
+ let changed = false
136
+ for (const [id, p] of peers) {
137
+ if (now - p.ts > timeout) {
138
+ peers.delete(id)
139
+ changed = true
140
+ }
141
+ }
142
+ if (changed) notify()
143
+ }, Math.max(1000, timeout / 3))
144
+ : null
145
+
146
+ // Announce ourselves.
147
+ transport.post({ kind: 'hello', user })
148
+
149
+ return {
150
+ setCell(cell) {
151
+ ownCell = cell
152
+ transport.post({ kind: 'presence', user, cell })
153
+ },
154
+ sendEdit(rowId, columnId, value) {
155
+ transport.post({ kind: 'edit', user, rowId, columnId, value })
156
+ },
157
+ peers: list,
158
+ dispose() {
159
+ if (disposed) return
160
+ disposed = true
161
+ transport.post({ kind: 'bye', userId: user.id })
162
+ unsubscribe()
163
+ if (pruneTimer) clearInterval(pruneTimer)
164
+ transport.dispose?.() // release the channel (BroadcastChannel etc.)
165
+ },
166
+ }
167
+ }
@@ -1,30 +1,30 @@
1
- import { describe, expect, it } from 'vitest'
2
- import { createCoreRowModel, createSortedRowModel, createSvGrid, sortFns, tableFeatures } from './index'
3
-
4
- describe('core performance smoke', () => {
5
- it('handles large synthetic shape with bounded row model call', () => {
6
- const columns = Array.from({ length: 50 }, (_, index) => ({
7
- field: `c${index}`,
8
- editorType: 'number' as const,
9
- }))
10
- const data = Array.from({ length: 5000 }, (_, rowIndex) => {
11
- const row: Record<string, number> = {}
12
- for (let col = 0; col < 50; col += 1) row[`c${col}`] = rowIndex + col
13
- return row
14
- })
15
- const grid = createSvGrid({
16
- _features: tableFeatures({}),
17
- _rowModels: {
18
- coreRowModel: createCoreRowModel(),
19
- sortedRowModel: createSortedRowModel(sortFns),
20
- },
21
- columns,
22
- data,
23
- state: { sorting: [{ id: 'c0', desc: true }, { id: 'c1', desc: false }] },
24
- })
25
-
26
- const rows = grid.getRowModel().rows
27
- expect(rows.length).toBe(5000)
28
- expect(rows[0]?.getCellValueByColumnId('c0')).toBe(4999)
29
- })
30
- })
1
+ import { describe, expect, it } from 'vitest'
2
+ import { createCoreRowModel, createSortedRowModel, createSvGrid, sortFns, tableFeatures } from './index'
3
+
4
+ describe('core performance smoke', () => {
5
+ it('handles large synthetic shape with bounded row model call', () => {
6
+ const columns = Array.from({ length: 50 }, (_, index) => ({
7
+ field: `c${index}`,
8
+ editorType: 'number' as const,
9
+ }))
10
+ const data = Array.from({ length: 5000 }, (_, rowIndex) => {
11
+ const row: Record<string, number> = {}
12
+ for (let col = 0; col < 50; col += 1) row[`c${col}`] = rowIndex + col
13
+ return row
14
+ })
15
+ const grid = createSvGrid({
16
+ _features: tableFeatures({}),
17
+ _rowModels: {
18
+ coreRowModel: createCoreRowModel(),
19
+ sortedRowModel: createSortedRowModel(sortFns),
20
+ },
21
+ columns,
22
+ data,
23
+ state: { sorting: [{ id: 'c0', desc: true }, { id: 'c1', desc: false }] },
24
+ })
25
+
26
+ const rows = grid.getRowModel().rows
27
+ expect(rows.length).toBe(5000)
28
+ expect(rows[0]?.getCellValueByColumnId('c0')).toBe(4999)
29
+ })
30
+ })