gitmaps 1.1.0 → 1.1.2

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 (121) hide show
  1. package/README.md +267 -118
  2. package/app/[...slug]/page.client.tsx +1 -0
  3. package/app/[...slug]/page.tsx +6 -0
  4. package/app/analytics.db +0 -0
  5. package/app/api/analytics/route.ts +64 -0
  6. package/app/api/auth/positions/route.ts +95 -33
  7. package/app/api/build-info/route.ts +19 -0
  8. package/app/api/chat/route.ts +13 -2
  9. package/app/api/og-image/route.ts +14 -0
  10. package/app/api/repo/file-content/route.ts +73 -20
  11. package/app/api/repo/load/route.test.ts +62 -0
  12. package/app/api/repo/load/route.ts +41 -1
  13. package/app/api/repo/pdf-thumb/route.ts +127 -0
  14. package/app/api/repo/resolve-slug/route.ts +51 -0
  15. package/app/api/repo/tree/route.ts +188 -104
  16. package/app/api/version/route.ts +26 -0
  17. package/app/globals.css +5706 -4938
  18. package/app/layout.tsx +1279 -490
  19. package/app/lib/auto-arrange.test.ts +158 -0
  20. package/app/lib/auto-arrange.ts +147 -0
  21. package/app/lib/canvas-export.ts +358 -358
  22. package/app/lib/canvas.ts +625 -564
  23. package/app/lib/cards.tsx +1361 -916
  24. package/app/lib/chat.tsx +65 -9
  25. package/app/lib/code-editor.ts +86 -2
  26. package/app/lib/context.test.ts +32 -0
  27. package/app/lib/context.ts +19 -3
  28. package/app/lib/cursor-sharing.ts +34 -0
  29. package/app/lib/events.tsx +71 -93
  30. package/app/lib/export-canvas.ts +287 -0
  31. package/app/lib/file-card-plugin.ts +148 -148
  32. package/app/lib/file-modal.tsx +49 -0
  33. package/app/lib/file-preview.ts +486 -427
  34. package/app/lib/github-import.test.ts +424 -0
  35. package/app/lib/initial-route-hydration.test.ts +283 -0
  36. package/app/lib/initial-route-hydration.ts +202 -0
  37. package/app/lib/landing-reset.test.ts +99 -0
  38. package/app/lib/landing-reset.ts +106 -0
  39. package/app/lib/landing-shell.test.ts +75 -0
  40. package/app/lib/large-repo-optimization.ts +37 -0
  41. package/app/lib/layout-snapshots.ts +320 -0
  42. package/app/lib/loading.test.ts +69 -0
  43. package/app/lib/loading.tsx +160 -45
  44. package/app/lib/mount-cleanup.test.ts +52 -0
  45. package/app/lib/mount-cleanup.ts +34 -0
  46. package/app/lib/mount-init.test.ts +123 -0
  47. package/app/lib/mount-init.ts +107 -0
  48. package/app/lib/mount-lifecycle.test.ts +39 -0
  49. package/app/lib/mount-lifecycle.ts +12 -0
  50. package/app/lib/mount-route-wiring.test.ts +87 -0
  51. package/app/lib/mount-route-wiring.ts +84 -0
  52. package/app/lib/multi-repo.ts +14 -0
  53. package/app/lib/onboarding-tutorial.ts +278 -0
  54. package/app/lib/positions.ts +190 -121
  55. package/app/lib/recent-commits.test.ts +947 -0
  56. package/app/lib/recent-commits.ts +227 -0
  57. package/app/lib/repo-handoff.test.ts +23 -0
  58. package/app/lib/repo-handoff.ts +16 -0
  59. package/app/lib/repo-progressive.ts +119 -0
  60. package/app/lib/repo-select.test.ts +61 -0
  61. package/app/lib/repo-select.ts +74 -0
  62. package/app/lib/repo.tsx +1383 -987
  63. package/app/lib/role.ts +228 -0
  64. package/app/lib/route-catchall.test.ts +27 -0
  65. package/app/lib/route-repo-entry.test.ts +95 -0
  66. package/app/lib/route-repo-entry.ts +36 -0
  67. package/app/lib/router-contract.test.ts +22 -0
  68. package/app/lib/router-contract.ts +19 -0
  69. package/app/lib/shared-layout.test.ts +86 -0
  70. package/app/lib/shared-layout.ts +82 -0
  71. package/app/lib/status-bar.test.ts +118 -0
  72. package/app/lib/status-bar.ts +365 -128
  73. package/app/lib/sync-controls.test.ts +43 -0
  74. package/app/lib/sync-controls.tsx +303 -0
  75. package/app/lib/test-dom.ts +145 -0
  76. package/app/lib/test-fixtures/router-contract/[...slug]/page.tsx +3 -0
  77. package/app/lib/test-fixtures/router-contract/api/health/route.ts +3 -0
  78. package/app/lib/test-fixtures/router-contract/api/version/route.ts +3 -0
  79. package/app/lib/test-fixtures/router-contract/galaxy-canvas/page.tsx +3 -0
  80. package/app/lib/test-fixtures/router-contract/page.tsx +3 -0
  81. package/app/lib/transclusion-smoke.test.ts +163 -0
  82. package/app/lib/tutorial.ts +301 -0
  83. package/app/lib/version.ts +93 -0
  84. package/app/lib/viewport-culling.ts +740 -735
  85. package/app/lib/virtual-files.ts +456 -0
  86. package/app/lib/webgl-text.ts +189 -0
  87. package/app/lib/{galaxydraw-bridge.ts → xydraw-bridge.ts} +485 -482
  88. package/app/lib/{galaxydraw.test.ts → xydraw.test.ts} +228 -229
  89. package/app/og-image.png +0 -0
  90. package/app/page.client.tsx +70 -269
  91. package/app/page.tsx +15 -16
  92. package/app/state/machine.js +13 -0
  93. package/package.json +84 -75
  94. package/server.ts +10 -0
  95. package/app/[owner]/[repo]/page.tsx +0 -6
  96. package/app/[slug]/page.tsx +0 -6
  97. package/packages/galaxydraw/README.md +0 -296
  98. package/packages/galaxydraw/banner.png +0 -0
  99. package/packages/galaxydraw/demo/build-static.ts +0 -100
  100. package/packages/galaxydraw/demo/client.ts +0 -154
  101. package/packages/galaxydraw/demo/dist/client.js +0 -8
  102. package/packages/galaxydraw/demo/index.html +0 -256
  103. package/packages/galaxydraw/demo/server.ts +0 -96
  104. package/packages/galaxydraw/dist/index.js +0 -984
  105. package/packages/galaxydraw/dist/index.js.map +0 -16
  106. package/packages/galaxydraw/node_modules/.bin/tsc.bunx +0 -0
  107. package/packages/galaxydraw/node_modules/.bin/tsc.exe +0 -0
  108. package/packages/galaxydraw/node_modules/.bin/tsserver.bunx +0 -0
  109. package/packages/galaxydraw/node_modules/.bin/tsserver.exe +0 -0
  110. package/packages/galaxydraw/package.json +0 -49
  111. package/packages/galaxydraw/perf.test.ts +0 -284
  112. package/packages/galaxydraw/src/core/cards.ts +0 -435
  113. package/packages/galaxydraw/src/core/engine.ts +0 -339
  114. package/packages/galaxydraw/src/core/events.ts +0 -81
  115. package/packages/galaxydraw/src/core/layout.ts +0 -136
  116. package/packages/galaxydraw/src/core/minimap.ts +0 -216
  117. package/packages/galaxydraw/src/core/state.ts +0 -177
  118. package/packages/galaxydraw/src/core/viewport.ts +0 -106
  119. package/packages/galaxydraw/src/galaxydraw.css +0 -166
  120. package/packages/galaxydraw/src/index.ts +0 -40
  121. package/packages/galaxydraw/tsconfig.json +0 -30
package/packages/galaxydraw/demo/index.html DELETED
@@ -1,256 +0,0 @@
1
- <!DOCTYPE html>
2
- <html lang="en">
3
- <head>
4
- <meta charset="UTF-8">
5
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>galaxydraw — Interactive Demo</title>
7
- <meta name="description" content="Interactive demo of galaxydraw, a zero-dependency infinite canvas framework for spatial applications.">
8
- <link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>🌌</text></svg>">
9
- <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
10
- <style>
11
- * { margin: 0; padding: 0; box-sizing: border-box; }
12
- html, body { width: 100%; height: 100%; background: #060812; color: #e4e4e7; font-family: 'Inter', sans-serif; overflow: hidden; }
13
- #app { width: 100vw; height: 100vh; }
14
-
15
- .demo-toolbar {
16
- position: fixed;
17
- top: 16px;
18
- left: 50%;
19
- transform: translateX(-50%);
20
- z-index: 1000;
21
- display: flex;
22
- gap: 8px;
23
- padding: 8px 16px;
24
- border-radius: 12px;
25
- background: rgba(13, 15, 28, 0.85);
26
- backdrop-filter: blur(16px);
27
- border: 1px solid rgba(255, 255, 255, 0.08);
28
- }
29
-
30
- .demo-toolbar button {
31
- padding: 6px 14px;
32
- border-radius: 8px;
33
- border: 1px solid rgba(255, 255, 255, 0.08);
34
- background: transparent;
35
- color: rgba(255, 255, 255, 0.7);
36
- cursor: pointer;
37
- font-size: 12px;
38
- font-family: 'Inter', sans-serif;
39
- font-weight: 500;
40
- transition: all 0.15s ease;
41
- }
42
-
43
- .demo-toolbar button:hover {
44
- background: rgba(147, 130, 255, 0.15);
45
- border-color: rgba(147, 130, 255, 0.3);
46
- color: #fff;
47
- }
48
-
49
- .demo-toolbar button.active {
50
- background: rgba(147, 130, 255, 0.2);
51
- border-color: rgba(147, 130, 255, 0.4);
52
- color: #fff;
53
- }
54
-
55
- .demo-toolbar .mode-label {
56
- font-size: 11px;
57
- color: rgba(255, 255, 255, 0.4);
58
- display: flex;
59
- align-items: center;
60
- padding: 0 8px;
61
- }
62
-
63
- /* Responsive toolbar */
64
- @media (max-width: 640px) {
65
- .demo-toolbar {
66
- flex-wrap: wrap;
67
- max-width: 90vw;
68
- justify-content: center;
69
- }
70
- .demo-toolbar button {
71
- font-size: 11px;
72
- padding: 5px 10px;
73
- }
74
- }
75
-
76
- /* galaxydraw.css — Base styles for the infinite canvas */
77
-
78
- /* ─── Viewport & Canvas ─────────────────────────────────── */
79
- .gd-viewport {
80
- position: relative;
81
- width: 100%;
82
- height: 100%;
83
- overflow: hidden;
84
- background: radial-gradient(circle at 50% 50%, #0c0e1a 0%, #060812 100%);
85
- user-select: none;
86
- -webkit-user-select: none;
87
- }
88
-
89
- .gd-viewport.gd-space-pan {
90
- cursor: grab;
91
- }
92
-
93
- .gd-canvas {
94
- position: absolute;
95
- top: 0;
96
- left: 0;
97
- transform-origin: 0 0;
98
- will-change: transform;
99
- }
100
-
101
- /* ─── Dot grid background ───────────────────────────────── */
102
- .gd-viewport::before {
103
- content: '';
104
- position: absolute;
105
- inset: 0;
106
- background-image: radial-gradient(circle, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
107
- background-size: 24px 24px;
108
- pointer-events: none;
109
- z-index: 0;
110
- }
111
-
112
- /* ─── Cards ─────────────────────────────────────────────── */
113
- .gd-card {
114
- position: absolute;
115
- border-radius: 12px;
116
- border: 1px solid rgba(255, 255, 255, 0.08);
117
- background: rgba(13, 15, 28, 0.92);
118
- backdrop-filter: blur(8px);
119
- box-shadow: 0 4px 24px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.03);
120
- display: flex;
121
- flex-direction: column;
122
- overflow: hidden;
123
- transition: box-shadow 0.2s ease, border-color 0.2s ease;
124
- contain: layout style;
125
- }
126
-
127
- .gd-card--selected {
128
- border-color: rgba(147, 130, 255, 0.4);
129
- box-shadow: 0 4px 24px rgba(0, 0, 0, 0.4), 0 0 0 2px rgba(147, 130, 255, 0.25);
130
- }
131
-
132
- .gd-card--dragging {
133
- opacity: 0.9;
134
- transition: none;
135
- }
136
-
137
- .gd-card--resizing {
138
- transition: none;
139
- }
140
-
141
- .gd-card--collapsed .gd-card-body {
142
- display: none;
143
- }
144
-
145
- /* ─── Card header ───────────────────────────────────────── */
146
- .gd-card-header {
147
- display: flex;
148
- align-items: center;
149
- gap: 8px;
150
- padding: 10px 14px;
151
- border-bottom: 1px solid rgba(255, 255, 255, 0.06);
152
- cursor: grab;
153
- min-height: 40px;
154
- flex-shrink: 0;
155
- }
156
-
157
- .gd-card-header:active {
158
- cursor: grabbing;
159
- }
160
-
161
- .gd-card-header .title {
162
- font-size: 13px;
163
- font-weight: 600;
164
- color: rgba(255, 255, 255, 0.9);
165
- white-space: nowrap;
166
- overflow: hidden;
167
- text-overflow: ellipsis;
168
- flex: 1;
169
- font-family: 'Inter', sans-serif;
170
- }
171
-
172
- /* ─── Card body ─────────────────────────────────────────── */
173
- .gd-card-body {
174
- flex: 1;
175
- overflow: auto;
176
- min-height: 0;
177
- }
178
-
179
- /* ─── Resize handle ─────────────────────────────────────── */
180
- .gd-resize-handle {
181
- position: absolute;
182
- bottom: 0;
183
- right: 0;
184
- width: 20px;
185
- height: 20px;
186
- cursor: nw-resize;
187
- z-index: 1;
188
- }
189
-
190
- .gd-resize-handle::after {
191
- content: '';
192
- position: absolute;
193
- bottom: 4px;
194
- right: 4px;
195
- width: 8px;
196
- height: 8px;
197
- border-right: 2px solid rgba(255, 255, 255, 0.15);
198
- border-bottom: 2px solid rgba(255, 255, 255, 0.15);
199
- border-radius: 0 0 2px 0;
200
- }
201
-
202
- .gd-card:hover .gd-resize-handle::after {
203
- border-color: rgba(255, 255, 255, 0.3);
204
- }
205
-
206
- /* ─── Minimap ───────────────────────────────────────────── */
207
- .gd-minimap {
208
- position: absolute;
209
- bottom: 12px;
210
- right: 12px;
211
- border-radius: 8px;
212
- overflow: hidden;
213
- backdrop-filter: blur(12px);
214
- background: rgba(0, 0, 0, 0.5);
215
- border: 1px solid rgba(255, 255, 255, 0.1);
216
- cursor: pointer;
217
- z-index: 999;
218
- transition: opacity 0.2s ease;
219
- }
220
-
221
- .gd-minimap:hover {
222
- opacity: 1;
223
- }
224
-
225
- /* ─── Scrollbar styling ─────────────────────────────────── */
226
- .gd-card-body::-webkit-scrollbar {
227
- width: 4px;
228
- }
229
-
230
- .gd-card-body::-webkit-scrollbar-track {
231
- background: transparent;
232
- }
233
-
234
- .gd-card-body::-webkit-scrollbar-thumb {
235
- background: rgba(255, 255, 255, 0.1);
236
- border-radius: 2px;
237
- }
238
-
239
- .gd-card-body::-webkit-scrollbar-thumb:hover {
240
- background: rgba(255, 255, 255, 0.2);
241
- }
242
- </style>
243
- </head>
244
- <body>
245
- <div id="app"></div>
246
- <script type="module">class F{zoom=1;offsetX=0;offsetY=0;viewportEl=null;contentEl=null;listeners=new Set;MIN_ZOOM=0.05;MAX_ZOOM=5;constructor(E,K){this.viewportEl=E??null,this.contentEl=K??null}bind(E,K){this.viewportEl=E,this.contentEl=K,this.applyTransform()}snapshot(){return{zoom:this.zoom,offsetX:this.offsetX,offsetY:this.offsetY}}subscribe(E){return this.listeners.add(E),()=>this.listeners.delete(E)}notify(){for(let E of this.listeners)E()}applyTransform(){if(!this.contentEl)return;this.contentEl.style.transform=`translate(${this.offsetX}px, ${this.offsetY}px) scale(${this.zoom})`}set(E,K,D){this.zoom=Math.max(this.MIN_ZOOM,Math.min(this.MAX_ZOOM,E)),this.offsetX=K,this.offsetY=D,this.applyTransform(),this.notify()}pan(E,K){this.offsetX+=E,this.offsetY+=K,this.applyTransform(),this.notify()}panTo(E,K){if(!this.viewportEl)return;let D=this.viewportEl.clientWidth,G=this.viewportEl.clientHeight;this.offsetX=D/2-E*this.zoom,this.offsetY=G/2-K*this.zoom,this.applyTransform(),this.notify()}zoomToward(E,K,D){let G=Math.max(this.MIN_ZOOM,Math.min(this.MAX_ZOOM,this.zoom*D));if(G===this.zoom)return;let k=this.viewportEl?.getBoundingClientRect(),$=E-(k?.left??0),j=K-(k?.top??0),J=($-this.offsetX)/this.zoom,q=(j-this.offsetY)/this.zoom;this.zoom=G,this.offsetX=$-J*G,this.offsetY=j-q*G,this.applyTransform(),this.notify()}screenToWorld(E,K){let D=this.viewportEl?.getBoundingClientRect(),G=E-(D?.left??0),k=K-(D?.top??0);return{x:(G-this.offsetX)/this.zoom,y:(k-this.offsetY)/this.zoom}}worldToScreen(E,K){let D=this.viewportEl?.getBoundingClientRect();return{x:E*this.zoom+this.offsetX+(D?.left??0),y:K*this.zoom+this.offsetY+(D?.top??0)}}getVisibleWorldRect(E=0){if(!this.viewportEl)return null;let K=this.viewportEl.clientWidth,D=this.viewportEl.clientHeight,G=(-this.offsetX-E)/this.zoom,k=(-this.offsetY-E)/this.zoom,$=(K-this.offsetX+E)/this.zoom,j=(D-this.offsetY+E)/this.zoom;return{left:G,top:k,right:$,bottom:j,width:$-G,height:j-k}}fitRect(E,K,D,G,k=60){if(!this.viewportEl)return;let $=this.viewportEl.clientWidth,j=this.viewportEl.clientHeight,J=D-E+k*2,q=G-K+k*2,Q=Math.min($/J,j/q,this.MAX_ZOOM);this.set(Q,($-J*Q)/2-(E-k)*Q,(j-q*Q)/2-(K-k)*Q)}}var A={defaultWidth:400,defaultHeight:300,minWidth:200,minHeight:150,gridSize:0,cornerSize:40};class L{state;bus;canvas;cards=new Map;deferred=new Map;selected=new Set;topZ=10;plugins=new Map;opts;constructor(E,K,D,G){this.state=E;this.bus=K;this.canvas=D;this.opts={...A,...G}}registerPlugin(E){this.plugins.set(E.type,E)}create(E,K){let D=this.plugins.get(E);if(!D)return console.warn(`[galaxydraw] No plugin registered for card type "${E}"`),null;let G={x:K.x??0,y:K.y??0,width:K.width??this.opts.defaultWidth,height:K.height??this.opts.defaultHeight,collapsed:K.collapsed??!1,meta:K.meta??{},...K},k=D.render(G);if(k.classList.add("gd-card"),k.dataset.cardId=G.id,k.dataset.cardType=E,k.style.left=`${G.x}px`,k.style.top=`${G.y}px`,k.style.width=`${G.width}px`,!G.collapsed)k.style.height=`${G.height}px`;return this.canvas.appendChild(k),this.cards.set(G.id,k),this.bringToFront(k),this.setupDrag(k),this.setupResize(k,E),this.bus.emit("card:create",{id:G.id,x:G.x,y:G.y}),k}remove(E){let K=this.cards.get(E);if(!K){this.deferred.delete(E);return}let D=K.dataset.cardType;if(D)this.plugins.get(D)?.onDestroy?.(K);K.remove(),this.cards.delete(E),this.selected.delete(E),this.bus.emit("card:remove",{id:E})}defer(E,K){this.deferred.set(K.id,{...K,plugin:E})}materializeInRect(E){let K=0,D=[];for(let[G,k]of this.deferred){let{x:$,y:j,width:J,height:q,plugin:Q}=k,V=J||this.opts.defaultWidth,_=q||this.opts.defaultHeight;if($+V>E.left&&$<E.right&&j+_>E.top&&j<E.bottom){if(Q)this.create(Q,k);D.push(G),K++}}for(let G of D)this.deferred.delete(G);return K}clear(){for(let[E,K]of this.cards){let D=K.dataset.cardType;if(D)this.plugins.get(D)?.onDestroy?.(K);K.remove()}this.cards.clear(),this.deferred.clear(),this.selected.clear()}bringToFront(E){this.topZ++,E.style.zIndex=String(this.topZ)}select(E,K=!1){if(!K)this.deselectAll();this.selected.add(E),this.cards.get(E)?.classList.add("gd-card--selected"),this.bus.emit("card:select",{ids:[...this.selected]})}deselect(E){this.selected.delete(E),this.cards.get(E)?.classList.remove("gd-card--selected"),this.bus.emit("card:deselect",{ids:[E]})}deselectAll(){for(let K of this.selected)this.cards.get(K)?.classList.remove("gd-card--selected");let E=[...this.selected];if(this.selected.clear(),E.length>0)this.bus.emit("card:deselect",{ids:E})}toggleCollapse(E){let K=this.cards.get(E);if(!K)return;let D=K.classList.toggle("gd-card--collapsed");this.bus.emit("card:collapse",{id:E,collapsed:D})}setupDrag(E){let K=E.querySelector(".gd-card-header"),D=K||E,G=!1,k=0,$=0,j=0,J=0;D.addEventListener("mousedown",(q)=>{if(q.button!==0)return;if(K&&q.target!==K&&!K.contains(q.target))return;q.preventDefault(),G=!0,this.bringToFront(E);let Q=this.state.screenToWorld(q.clientX,q.clientY);j=parseFloat(E.style.left)||0,J=parseFloat(E.style.top)||0,k=Q.x,$=Q.y,E.classList.add("gd-card--dragging");let V=(x)=>{if(!G)return;let O=this.state.screenToWorld(x.clientX,x.clientY),P=j+(O.x-k),z=J+(O.y-$);if(this.opts.gridSize>0&&x.shiftKey)P=Math.round(P/this.opts.gridSize)*this.opts.gridSize,z=Math.round(z/this.opts.gridSize)*this.opts.gridSize;E.style.left=`${P}px`,E.style.top=`${z}px`},_=()=>{G=!1,E.classList.remove("gd-card--dragging"),window.removeEventListener("mousemove",V),window.removeEventListener("mouseup",_);let x=parseFloat(E.style.left)||0,O=parseFloat(E.style.top)||0;this.bus.emit("card:move",{id:E.dataset.cardId,x,y:O})};window.addEventListener("mousemove",V),window.addEventListener("mouseup",_)})}setupResize(E,K){let D=document.createElement("div");D.className="gd-resize-handle",E.appendChild(D);let G=!1,k=0,$=0,j=0,J=0;D.addEventListener("mousedown",(q)=>{q.preventDefault(),q.stopPropagation(),G=!0,k=E.offsetWidth,$=E.offsetHeight,j=q.clientX,J=q.clientY,E.classList.add("gd-card--resizing");let Q=(_)=>{if(!G)return;let x=(_.clientX-j)/this.state.zoom,O=(_.clientY-J)/this.state.zoom,P=Math.max(this.opts.minWidth,k+x),z=Math.max(this.opts.minHeight,$+O);E.style.width=`${P}px`,E.style.height=`${z}px`,this.plugins.get(K)?.onResize?.(E,P,z)},V=()=>{G=!1,E.classList.remove("gd-card--resizing"),window.removeEventListener("mousemove",Q),window.removeEventListener("mouseup",V),this.bus.emit("card:resize",{id:E.dataset.cardId,width:E.offsetWidth,height:E.offsetHeight})};window.addEventListener("mousemove",Q),window.addEventListener("mouseup",V)})}consumesWheel(E){let K=E.closest(".gd-card")||E.closest("[data-card-type]");if(!K)return!1;let D=K.dataset.cardType;if(!D)return!1;return this.plugins.get(D)?.consumesWheel?.(E)??!1}consumesMouse(E){let K=E.closest(".gd-card")||E.closest("[data-card-type]");if(!K)return!1;let D=K.dataset.cardType;if(!D)return!1;return this.plugins.get(D)?.consumesMouse?.(E)??!1}}class M{state;cards;bus;rafPending=!1;enabled=!0;margin=500;constructor(E,K,D){this.state=E;this.cards=K;this.bus=D}setEnabled(E){this.enabled=E}schedule(){if(this.rafPending||!this.enabled)return;this.rafPending=!0,requestAnimationFrame(()=>{this.rafPending=!1,this.perform()})}perform(){let E={shown:0,culled:0,materialized:0,total:0};if(!this.enabled)return E;let K=this.state.getVisibleWorldRect(this.margin);if(!K)return E;for(let[D,G]of this.cards.cards){let k=this.isCardInRect(G,K),$=G.dataset.culled==="true";if(k&&$)G.style.contentVisibility="",G.style.visibility="",G.dataset.culled="false",E.shown++;else if(!k&&!$)G.style.contentVisibility="hidden",G.style.visibility="hidden",G.dataset.culled="true",E.culled++;else if(k)E.shown++;else E.culled++}if(this.cards.deferred.size>0)E.materialized=this.cards.materializeInRect(K);if(E.total=this.cards.cards.size+this.cards.deferred.size,E.materialized>0)this.bus.emit("viewport:cull",E);return E}uncullAll(){for(let[,E]of this.cards.cards)E.style.contentVisibility="",E.style.visibility="",E.dataset.culled="false"}isCardInRect(E,K){let D=parseFloat(E.style.left)||0,G=parseFloat(E.style.top)||0,k=E.offsetWidth||400,$=E.offsetHeight||300;return D+k>K.left&&D<K.right&&G+$>K.top&&G<K.bottom}}class U{handlers=new Map;on(E,K){if(!this.handlers.has(E))this.handlers.set(E,new Set);return this.handlers.get(E).add(K),()=>{this.handlers.get(E)?.delete(K)}}once(E,K){let D=(k)=>{G(),K(k)},G=this.on(E,D);return G}emit(E,K){let D=this.handlers.get(E);if(!D)return;for(let G of D)try{G(K)}catch(k){console.error(`[galaxydraw] Event handler error for "${E}":`,k)}}off(E,K){if(K)this.handlers.get(E)?.delete(K);else this.handlers.delete(E)}clear(){this.handlers.clear()}}class h{state;cards;culler;bus;mode;viewport;canvas;spaceHeld=!1;isDragging=!1;dragStartX=0;dragStartY=0;cleanupFns=[];touchStartX=0;touchStartY=0;lastPinchDist=0;constructor(E,K){if(this.mode=K?.mode??"simple",this.bus=new U,this.viewport=document.createElement("div"),this.viewport.className=`gd-viewport ${K?.className??""}`.trim(),this.viewport.style.cssText="position:relative;width:100%;height:100%;overflow:hidden;",this.canvas=document.createElement("div"),this.canvas.className="gd-canvas",this.canvas.style.cssText="position:absolute;top:0;left:0;transform-origin:0 0;will-change:transform;",this.viewport.appendChild(this.canvas),E.appendChild(this.viewport),this.state=new F,this.state.bind(this.viewport,this.canvas),this.cards=new L(this.state,this.bus,this.canvas,K?.cards),this.culler=new M(this.state,this.cards,this.bus),K?.cullMargin)this.culler.margin=K.cullMargin;this.setupWheel(),this.setupMouse(),this.setupTouch(),this.setupKeyboard();let D=this.state.subscribe(()=>this.culler.schedule());this.cleanupFns.push(D)}setMode(E){this.mode=E,this.bus.emit("mode:change",{mode:E})}getMode(){return this.mode}registerPlugin(E){this.cards.registerPlugin(E)}fitAll(E=60){if(this.culler.uncullAll(),this.cards.cards.size===0)return;let K=1/0,D=1/0,G=-1/0,k=-1/0;for(let[,$]of this.cards.cards){let j=parseFloat($.style.left)||0,J=parseFloat($.style.top)||0,q=$.offsetWidth||400,Q=$.offsetHeight||300;K=Math.min(K,j),D=Math.min(D,J),G=Math.max(G,j+q),k=Math.max(k,J+Q)}this.state.fitRect(K,D,G,k,E)}getViewport(){return this.viewport}getCanvas(){return this.canvas}destroy(){this.cleanupFns.forEach((E)=>E()),this.cleanupFns=[],this.cards.clear(),this.bus.clear(),this.viewport.remove()}setupWheel(){this.viewport.addEventListener("wheel",(E)=>{let K=E.target;if(this.cards.consumesWheel(K))return;if(K.closest(".gd-card")||K.closest("[data-card-type]")){let k=K.closest(".gd-card-body")||K.closest(".wm-container-body");if(k&&k.scrollHeight>k.clientHeight){let $=k.scrollTop<=0&&E.deltaY<0,j=k.scrollTop+k.clientHeight>=k.scrollHeight-1&&E.deltaY>0;if(!$&&!j)return}}E.preventDefault();let G=E.deltaY<0?1.08:0.9259259259259258;this.state.zoomToward(E.clientX,E.clientY,G)},{passive:!1})}setupMouse(){this.viewport.addEventListener("mousedown",(E)=>{let K=E.target;if(this.cards.consumesMouse(K))return;if(K.closest(".gd-card-header")||K.closest(".wm-container-header")||K.closest(".gd-resize-handle"))return;let D=K.closest(".gd-card")||K.closest("[data-card-type]");if(D&&E.button===0){let k=D.dataset.cardId;if(k)this.cards.bringToFront(D),this.cards.select(k,E.shiftKey);if(this.mode==="advanced")return}if(E.button===1||this.mode==="simple"&&E.button===0&&!D||this.mode==="advanced"&&this.spaceHeld)this.isDragging=!0,this.dragStartX=E.clientX-this.state.offsetX,this.dragStartY=E.clientY-this.state.offsetY,this.viewport.style.cursor="grabbing",E.preventDefault()}),window.addEventListener("mousemove",(E)=>{if(this.isDragging)this.state.set(this.state.zoom,E.clientX-this.dragStartX,E.clientY-this.dragStartY)}),window.addEventListener("mouseup",()=>{if(this.isDragging)this.isDragging=!1,this.viewport.style.cursor=""})}setupTouch(){let E=(G)=>{let k=G.touches[0]?.target;if(!k)return;if(this.cards.consumesMouse(k))return;if(G.touches.length===1){let $=G.touches[0],j=k.closest(".gd-card")||k.closest("[data-card-type]");if(this.mode==="simple"&&!j||this.mode==="advanced"&&this.spaceHeld)this.isDragging=!0,this.touchStartX=$.clientX-this.state.offsetX,this.touchStartY=$.clientY-this.state.offsetY,G.preventDefault()}else if(G.touches.length===2){this.isDragging=!1;let $=G.touches[0].clientX-G.touches[1].clientX,j=G.touches[0].clientY-G.touches[1].clientY;this.lastPinchDist=Math.sqrt($*$+j*j),G.preventDefault()}},K=(G)=>{if(this.isDragging&&G.touches.length===1){let k=G.touches[0];this.state.set(this.state.zoom,k.clientX-this.touchStartX,k.clientY-this.touchStartY),G.preventDefault()}if(G.touches.length===2){let k=G.touches[0].clientX-G.touches[1].clientX,$=G.touches[0].clientY-G.touches[1].clientY,j=Math.sqrt(k*k+$*$);if(this.lastPinchDist>0){let J=(G.touches[0].clientX+G.touches[1].clientX)/2,q=(G.touches[0].clientY+G.touches[1].clientY)/2,Q=j/this.lastPinchDist;this.state.zoomToward(J,q,Q)}this.lastPinchDist=j,G.preventDefault()}},D=()=>{this.isDragging=!1,this.lastPinchDist=0};this.viewport.addEventListener("touchstart",E,{passive:!1}),this.viewport.addEventListener("touchmove",K,{passive:!1}),this.viewport.addEventListener("touchend",D),this.cleanupFns.push(()=>{this.viewport.removeEventListener("touchstart",E),this.viewport.removeEventListener("touchmove",K),this.viewport.removeEventListener("touchend",D)})}setupKeyboard(){let E=(D)=>{if(D.code==="Space"&&!D.repeat){let G=D.target.tagName;if(G==="INPUT"||G==="TEXTAREA")return;D.preventDefault(),this.spaceHeld=!0,this.viewport.classList.add("gd-space-pan")}},K=(D)=>{if(D.code==="Space"){if(this.spaceHeld=!1,this.viewport.classList.remove("gd-space-pan"),this.isDragging)this.isDragging=!1,this.viewport.style.cursor=""}};window.addEventListener("keydown",E),window.addEventListener("keyup",K),this.cleanupFns.push(()=>{window.removeEventListener("keydown",E),window.removeEventListener("keyup",K)})}}var W={type:"text",render(E){let K=document.createElement("div"),D=document.createElement("div");D.className="gd-card-header",D.innerHTML=`<span class="title">${E.meta?.title||E.id}</span>`;let G=document.createElement("div");return G.className="gd-card-body",G.style.cssText="padding:12px; font-size:13px; color:rgba(255,255,255,0.6); line-height:1.6;",G.innerHTML=E.meta?.content||"Drag by the header, resize from the corner.",K.appendChild(D),K.appendChild(G),K}},S={type:"note",render(E){let K=["#22c55e","#eab308","#ef4444","#3b82f6","#a855f7"],D=K[Math.floor(Math.random()*K.length)],G=document.createElement("div"),k=document.createElement("div");k.className="gd-card-header",k.style.borderLeft=`3px solid ${D}`,k.innerHTML=`
247
- <span class="title">${E.meta?.title||"Note"}</span>
248
- <span style="font-size:10px; color:${D}; text-transform:uppercase; letter-spacing:0.05em;">Note</span>
249
- `;let $=document.createElement("div");return $.className="gd-card-body",$.style.padding="16px",$.innerHTML=`
250
- <div contenteditable="true" style="font-size:13px; color:rgba(255,255,255,0.7); outline:none; min-height:60px; line-height:1.6;">
251
- ${E.meta?.text||"Click to edit..."}
252
- </div>
253
- `,G.appendChild(k),G.appendChild($),G},consumesMouse(E){return E.closest("[contenteditable]")!==null}},T=document.getElementById("app"),I=new h(T,{mode:"simple",cards:{defaultWidth:320,defaultHeight:240}});I.registerPlugin(W);I.registerPlugin(S);var R=[{type:"text",id:"welcome",x:100,y:100,width:380,height:220,meta:{title:"galaxydraw",content:'<div style="font-size:20px; font-weight:600; color:#fff; margin-bottom:8px;">Infinite Canvas Framework</div><div>The engine behind <strong>GitMaps</strong> and <strong>WARMAPS</strong>.</div><br/><div style="font-size:11px; color:rgba(255,255,255,0.35);">Pan: drag empty space | Zoom: scroll | Drag cards by headers</div>'}},{type:"note",id:"note1",x:550,y:80,width:280,height:200,meta:{title:"Architecture",text:"EventBus > CanvasState > CardManager > ViewportCuller"}},{type:"text",id:"features",x:100,y:380,width:350,height:280,meta:{title:"Features",content:'<ul style="padding-left:16px;"><li>Virtualized rendering</li><li>Card plugins for custom content</li><li>Dual control modes (Simple / Advanced)</li><li>Viewport culling</li><li>Layout persistence</li><li>Minimap</li><li>Type-safe EventBus</li></ul>'}},{type:"note",id:"note2",x:550,y:340,width:280,height:180,meta:{title:"Performance",text:"React repo: 6833 files, only 9 DOM cards created. 6824 deferred. Over 300x speedup."}},{type:"text",id:"modes",x:900,y:100,width:300,height:200,meta:{title:"Control Modes",content:"<div><strong>Simple</strong> (WARMAPS): Drag = pan canvas<br/><strong>Advanced</strong> (GitMaps): Space+Drag = pan, Click = select</div>"}},{type:"note",id:"note3",x:900,y:360,width:280,height:160,meta:{title:"In Production",text:"Powering GitMaps (repo visualization) and WARMAPS (geopolitical intelligence dashboard). Touch support included."}}];for(let E of R)I.cards.create(E.type,E);var N=document.createElement("div");N.className="demo-toolbar";var C=document.createElement("span");C.className="mode-label";C.textContent="Mode:";N.appendChild(C);var H=document.createElement("button");H.textContent="Simple (WARMAPS)";H.className="active";H.id="modeSimple";N.appendChild(H);var Z=document.createElement("button");Z.textContent="Advanced (GitMaps)";Z.id="modeAdvanced";N.appendChild(Z);var B=document.createElement("button");B.textContent="+ Card";N.appendChild(B);var s=document.createElement("button");s.textContent="Fit All";N.appendChild(s);document.body.appendChild(N);H.onclick=()=>{I.setMode("simple"),H.classList.add("active"),Z.classList.remove("active")};Z.onclick=()=>{I.setMode("advanced"),Z.classList.add("active"),H.classList.remove("active")};B.onclick=()=>{let E="card-"+Date.now();I.cards.create("note",{id:E,x:200+Math.random()*600,y:200+Math.random()*400,width:260,height:180,meta:{title:"New Note",text:"Click to edit..."}})};s.onclick=()=>I.fitAll();window.gd=I;
254
- </script>
255
- </body>
256
- </html>
package/packages/galaxydraw/demo/server.ts DELETED
@@ -1,96 +0,0 @@
1
- /**
2
- * galaxydraw demo server
3
- * Run: bun run demo/server.ts
4
- */
5
-
6
- // We'll bundle the client code and serve it inline
7
- const clientCode = await Bun.build({
8
- entrypoints: [import.meta.dir + '/client.ts'],
9
- target: 'browser',
10
- format: 'esm',
11
- minify: false,
12
- });
13
-
14
- const clientJS = await clientCode.outputs[0].text();
15
-
16
- // Read CSS
17
- const cssFile = Bun.file(import.meta.dir + '/../src/galaxydraw.css');
18
- const css = await cssFile.text();
19
-
20
- const html = `<!DOCTYPE html>
21
- <html lang="en">
22
- <head>
23
- <meta charset="UTF-8">
24
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
25
- <title>galaxydraw - Demo</title>
26
- <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
27
- <style>
28
- * { margin: 0; padding: 0; box-sizing: border-box; }
29
- html, body { width: 100%; height: 100%; background: #060812; color: #e4e4e7; font-family: 'Inter', sans-serif; }
30
- #app { width: 100vw; height: 100vh; }
31
-
32
- .demo-toolbar {
33
- position: fixed;
34
- top: 16px;
35
- left: 50%;
36
- transform: translateX(-50%);
37
- z-index: 1000;
38
- display: flex;
39
- gap: 8px;
40
- padding: 8px 16px;
41
- border-radius: 12px;
42
- background: rgba(13, 15, 28, 0.85);
43
- backdrop-filter: blur(16px);
44
- border: 1px solid rgba(255, 255, 255, 0.08);
45
- }
46
-
47
- .demo-toolbar button {
48
- padding: 6px 14px;
49
- border-radius: 8px;
50
- border: 1px solid rgba(255, 255, 255, 0.08);
51
- background: transparent;
52
- color: rgba(255, 255, 255, 0.7);
53
- cursor: pointer;
54
- font-size: 12px;
55
- font-family: 'Inter', sans-serif;
56
- font-weight: 500;
57
- transition: all 0.15s ease;
58
- }
59
-
60
- .demo-toolbar button:hover {
61
- background: rgba(147, 130, 255, 0.15);
62
- border-color: rgba(147, 130, 255, 0.3);
63
- color: #fff;
64
- }
65
-
66
- .demo-toolbar button.active {
67
- background: rgba(147, 130, 255, 0.2);
68
- border-color: rgba(147, 130, 255, 0.4);
69
- color: #fff;
70
- }
71
-
72
- .demo-toolbar .mode-label {
73
- font-size: 11px;
74
- color: rgba(255, 255, 255, 0.4);
75
- display: flex;
76
- align-items: center;
77
- padding: 0 8px;
78
- }
79
-
80
- ${css}
81
- </style>
82
- </head>
83
- <body>
84
- <div id="app"></div>
85
- <script type="module">${clientJS}</script>
86
- </body>
87
- </html>`;
88
-
89
- const server = Bun.serve({
90
- port: 3400,
91
- fetch() {
92
- return new Response(html, { headers: { 'Content-Type': 'text/html' } });
93
- },
94
- });
95
-
96
- console.log(`[galaxydraw] demo running at http://localhost:${server.port}`);