@svgrid/grid 2.2.27 → 2.2.28

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 (212) hide show
  1. package/README.md +199 -199
  2. package/dist/FlexRender.svelte +96 -96
  3. package/dist/GridFooter.svelte +179 -179
  4. package/dist/GridMenus.svelte +734 -734
  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 +254 -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 -2723
  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 +133 -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/cdn/{GridMenus-BzxEYNtW.js → GridMenus-BbzEvTYO.js} +2 -2
  51. package/dist/cdn/{GridMenus-Dr-nGEXn.js → GridMenus-E220X2kM.js} +2 -2
  52. package/dist/cdn/{SvDateTimePicker-B1sDc9Pz.js → SvDateTimePicker-B8GopjhC.js} +2 -2
  53. package/dist/cdn/{SvDateTimePicker-Bh0FTs1E.js → SvDateTimePicker-DB0aIEk8.js} +2 -2
  54. package/dist/cdn/{SvGridChart-Bgk4hDs8.js → SvGridChart-BcLCYvw9.js} +1 -1
  55. package/dist/cdn/{SvGridChart-BKQsO5fZ.js → SvGridChart-BhnFdLd0.js} +1 -1
  56. package/dist/cdn/{SvGridChartPanel-DkCc2Z7b.js → SvGridChartPanel-Cmx9DHAS.js} +1 -1
  57. package/dist/cdn/{SvGridChartPanel-DSkHIQDd.js → SvGridChartPanel-DvjwxLvK.js} +1 -1
  58. package/dist/cdn/{SvGridChartView-BrbVaELm.js → SvGridChartView-B40DTJSX.js} +1 -1
  59. package/dist/cdn/{SvGridChartView-i9rWvSKg.js → SvGridChartView-PwqI4s02.js} +1 -1
  60. package/dist/cdn/{SvGridDropdown-D08sVmAy.js → SvGridDropdown-DjALc_4f.js} +1 -1
  61. package/dist/cdn/{SvGridDropdown-CGxxopQ4.js → SvGridDropdown-hpnHvOGt.js} +1 -1
  62. package/dist/cdn/{src-cgs1wcUS.js → src-BxNEslEo.js} +25 -25
  63. package/dist/cdn/{src-Cw8d9U8j.js → src-C4yKQZ5t.js} +26 -26
  64. package/dist/cdn/svgrid.js +5 -5
  65. package/dist/cdn/svgrid.svelte-external.js +5 -5
  66. package/dist/chart-export.js +8 -8
  67. package/package.json +10 -10
  68. package/src/FlexRender.svelte +96 -96
  69. package/src/GridFooter.svelte +179 -179
  70. package/src/GridMenus.svelte +734 -734
  71. package/src/SvAutoComplete.svelte +165 -165
  72. package/src/SvCalendar.svelte +503 -503
  73. package/src/SvCalendar.test.ts +226 -226
  74. package/src/SvCarousel.svelte +141 -141
  75. package/src/SvCheckBox.svelte +101 -101
  76. package/src/SvColorInput.svelte +181 -181
  77. package/src/SvComboBox.svelte +275 -275
  78. package/src/SvContextMenu.svelte +116 -116
  79. package/src/SvCountryInput.svelte +160 -160
  80. package/src/SvDrawer.svelte +254 -250
  81. package/src/SvDrawer.test.ts +18 -1
  82. package/src/SvDropDownList.svelte +374 -374
  83. package/src/SvDurationInput.svelte +126 -126
  84. package/src/SvField.svelte +293 -293
  85. package/src/SvForm.svelte +437 -437
  86. package/src/SvForm.test.ts +411 -411
  87. package/src/SvGrid.controller.svelte.ts +3239 -3239
  88. package/src/SvGrid.css +2723 -2723
  89. package/src/SvGrid.svelte +3333 -3333
  90. package/src/SvGrid.types.ts +1613 -1613
  91. package/src/SvGridChart.svelte +1724 -1724
  92. package/src/SvGridChartPanel.svelte +485 -485
  93. package/src/SvGridChartView.svelte +70 -70
  94. package/src/SvGridDropdown.svelte +696 -696
  95. package/src/SvGridSelect.svelte +259 -259
  96. package/src/SvGroupCell.svelte +109 -109
  97. package/src/SvListBox.svelte +287 -287
  98. package/src/SvMaskedInput.svelte +122 -122
  99. package/src/SvMenu.svelte +124 -124
  100. package/src/SvMenu.test.ts +97 -97
  101. package/src/SvMenuList.svelte +146 -146
  102. package/src/SvMultiSelect.svelte +281 -281
  103. package/src/SvNavPane.test.ts +15 -4
  104. package/src/SvNumberInput.svelte +168 -168
  105. package/src/SvOtpInput.svelte +158 -158
  106. package/src/SvPasswordInput.svelte +151 -151
  107. package/src/SvPhoneInput.svelte +133 -131
  108. package/src/SvPopover.svelte +197 -197
  109. package/src/SvRadioGroup.svelte +107 -107
  110. package/src/SvRowGroupPanel.svelte +170 -170
  111. package/src/SvScrollArea.svelte +61 -61
  112. package/src/SvSlider.svelte +200 -200
  113. package/src/SvSwitchButton.svelte +107 -107
  114. package/src/SvTagsInput.svelte +112 -112
  115. package/src/SvTextInput.svelte +147 -147
  116. package/src/SvTimePicker.svelte +245 -245
  117. package/src/SvToaster.svelte +159 -159
  118. package/src/SvToaster.test.ts +95 -95
  119. package/src/SvToggleButton.svelte +85 -85
  120. package/src/SvTooltip.svelte +161 -161
  121. package/src/SvTour.svelte +204 -204
  122. package/src/SvTree.svelte +437 -437
  123. package/src/SvTreeSelect.svelte +233 -233
  124. package/src/a11y/dismissable.test.ts +119 -119
  125. package/src/a11y/dismissable.ts +114 -114
  126. package/src/a11y.contract.test.ts +49 -49
  127. package/src/a11y.test.ts +59 -59
  128. package/src/a11y.ts +61 -61
  129. package/src/ai.test.ts +502 -502
  130. package/src/ai.ts +1391 -1391
  131. package/src/build-api.coverage.test.ts +633 -633
  132. package/src/build-api.ts +895 -895
  133. package/src/builtin-editors.grid.test.ts +85 -85
  134. package/src/cell-formatting.ts +169 -169
  135. package/src/cell-render.ts +469 -469
  136. package/src/chart-export.ts +201 -201
  137. package/src/chart-view.svelte.ts +36 -36
  138. package/src/chart.ts +2296 -2296
  139. package/src/collaboration.test.ts +104 -104
  140. package/src/collaboration.ts +167 -167
  141. package/src/core.performance.test.ts +30 -30
  142. package/src/core.ts +1111 -1111
  143. package/src/createAutocomplete.svelte.ts +132 -132
  144. package/src/createCombobox.svelte.ts +191 -191
  145. package/src/createCountryInput.svelte.ts +157 -157
  146. package/src/createDropdownList.svelte.ts +168 -168
  147. package/src/createForm.svelte.ts +386 -386
  148. package/src/createGrid.svelte.ts +42 -42
  149. package/src/createGrid.test.ts +10 -10
  150. package/src/createGridState.svelte.ts +17 -17
  151. package/src/createMenu.svelte.ts +225 -225
  152. package/src/createPopoverSelect.svelte.ts +213 -213
  153. package/src/createSlider.svelte.ts +191 -191
  154. package/src/createTooltip.svelte.ts +144 -144
  155. package/src/createTree.svelte.ts +319 -319
  156. package/src/editing.test.ts +859 -859
  157. package/src/editing.ts +675 -675
  158. package/src/editor-contract.ts +157 -157
  159. package/src/export-data-api.test.ts +126 -126
  160. package/src/export-format.test.ts +107 -107
  161. package/src/export-format.ts +598 -598
  162. package/src/filter-operators.ts +157 -157
  163. package/src/flex-render.ts +3 -3
  164. package/src/form-field.ts +127 -127
  165. package/src/index.ts +713 -713
  166. package/src/js-scroller.svelte.ts +173 -173
  167. package/src/keyboard.test.ts +59 -59
  168. package/src/keyboard.ts +97 -97
  169. package/src/list-nav.test.ts +49 -49
  170. package/src/list-nav.ts +29 -29
  171. package/src/list-option.test.ts +56 -56
  172. package/src/list-option.ts +172 -172
  173. package/src/menus.test.ts +700 -700
  174. package/src/menus.ts +652 -652
  175. package/src/merge-objects.ts +48 -48
  176. package/src/overlays.test.ts +90 -90
  177. package/src/render-component.ts +28 -28
  178. package/src/scheduler-model.test.ts +562 -562
  179. package/src/scheduler-model.ts +872 -872
  180. package/src/selection.test.ts +754 -754
  181. package/src/selection.ts +600 -600
  182. package/src/server-data-source.test.ts +289 -289
  183. package/src/server-data-source.ts +413 -413
  184. package/src/sparkline.test.ts +68 -68
  185. package/src/sparkline.ts +169 -169
  186. package/src/spreadsheet.test.ts +489 -489
  187. package/src/spreadsheet.ts +312 -312
  188. package/src/static-functions.ts +11 -11
  189. package/src/subscribe.ts +38 -38
  190. package/src/svgrid-wrapper.types.ts +524 -524
  191. package/src/svgrid.behavior.test.ts +706 -706
  192. package/src/svgrid.charting.test.ts +534 -534
  193. package/src/svgrid.features.test.ts +157 -157
  194. package/src/svgrid.new-features.wrapper.test.ts +251 -251
  195. package/src/svgrid.wrapper.test.ts +40 -40
  196. package/src/test-setup.ts +62 -62
  197. package/src/themes/index.ts +215 -215
  198. package/src/toast-store.svelte.ts +246 -246
  199. package/src/toast-store.test.ts +147 -147
  200. package/src/ui-buttons.test.ts +144 -144
  201. package/src/ui-inputs.test.ts +118 -118
  202. package/src/ui-range.test.ts +70 -70
  203. package/src/ui-selection.test.ts +155 -155
  204. package/src/ui-tier1.test.ts +142 -142
  205. package/src/virtual.test.ts +88 -88
  206. package/src/virtualization/column-virtualizer.test.ts +27 -27
  207. package/src/virtualization/column-virtualizer.ts +30 -30
  208. package/src/virtualization/svelte-virtualizer.svelte.ts +26 -26
  209. package/src/virtualization/types.ts +30 -30
  210. package/src/virtualization/virtualizer.test.ts +47 -47
  211. package/src/virtualization/virtualizer.ts +296 -296
  212. package/themes/ember.css +71 -71
@@ -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
+ })