bubble-chart-js 1.0.19 → 2.0.0

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 (58) hide show
  1. package/README.md +1 -1
  2. package/demo/glassmorphism.html +323 -0
  3. package/demo/index.html +739 -0
  4. package/dist/bubbleChart.cjs.js +1 -1
  5. package/dist/bubbleChart.esm.js +1 -1
  6. package/dist/bubbleChart.umd.js +1 -1
  7. package/docs/documentation.html +438 -0
  8. package/docs/examples.html +689 -0
  9. package/docs/index.html +432 -0
  10. package/docs/landing_test.html +337 -0
  11. package/docs/playground.html +345 -0
  12. package/docs/process_html.js +105 -0
  13. package/docs/temp/5a86d.html +248 -0
  14. package/docs/temp/b0cbe.html +276 -0
  15. package/docs/temp/docs_desktop.html +341 -0
  16. package/docs/temp/docs_mobile.html +291 -0
  17. package/docs/temp/examples_desktop.html +372 -0
  18. package/docs/temp/examples_mobile.html +317 -0
  19. package/docs/temp/landing_desktop.html +337 -0
  20. package/docs/temp/landing_mobile.html +270 -0
  21. package/docs/temp/playground_desktop.html +283 -0
  22. package/docs/temp/playground_mobile.html +236 -0
  23. package/examples/test.html +194 -0
  24. package/examples/test2.html +103 -0
  25. package/package.json +7 -3
  26. package/scripts/generate-fixtures.ts +45 -0
  27. package/spec/config-defaults.json +16 -0
  28. package/spec/fixtures/3-bubbles.expected.json +27 -0
  29. package/spec/fixtures/3-bubbles.input.json +10 -0
  30. package/spec/fixtures/equal-values.expected.json +34 -0
  31. package/spec/fixtures/equal-values.input.json +11 -0
  32. package/spec/fixtures/many-bubbles.expected.json +76 -0
  33. package/spec/fixtures/many-bubbles.input.json +17 -0
  34. package/spec/fixtures/single-bubble.expected.json +13 -0
  35. package/spec/fixtures/single-bubble.input.json +8 -0
  36. package/spec/physics.json +11 -0
  37. package/tsconfig.scripts.json +8 -0
  38. package/dist/canvas.d.ts +0 -5
  39. package/dist/constants/app-constants.d.ts +0 -3
  40. package/dist/constants/physics.d.ts +0 -10
  41. package/dist/core/renderer.d.ts +0 -2
  42. package/dist/features/text-wrapper.d.ts +0 -2
  43. package/dist/features/tooltip.d.ts +0 -6
  44. package/dist/index.d.ts +0 -8
  45. package/dist/models/internal/data-item-info.d.ts +0 -7
  46. package/dist/models/public/bubble-chart.d.ts +0 -6
  47. package/dist/models/public/config/bubble-appearance.d.ts +0 -26
  48. package/dist/models/public/config/font-options.d.ts +0 -46
  49. package/dist/models/public/config/interaction-options.d.ts +0 -6
  50. package/dist/models/public/config/tooltip-config.d.ts +0 -4
  51. package/dist/models/public/config/tooltip-options.d.ts +0 -170
  52. package/dist/models/public/configuration.d.ts +0 -30
  53. package/dist/models/public/data-item.d.ts +0 -8
  54. package/dist/services/chart-service.d.ts +0 -5
  55. package/dist/services/render-service.d.ts +0 -3
  56. package/dist/utils/config.d.ts +0 -12
  57. package/dist/utils/helper.d.ts +0 -2
  58. package/dist/utils/validation.d.ts +0 -5
package/docs/temp/5a86d.html ADDED
@@ -0,0 +1,248 @@
1
+ <!DOCTYPE html>
2
+
3
+ <html class="dark" lang="en"><head>
4
+ <meta charset="utf-8"/>
5
+ <meta content="width=device-width, initial-scale=1.0" name="viewport"/>
6
+ <script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
7
+ <link href="https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;700;800&amp;family=Inter:wght@400;500;600&amp;family=Space+Grotesk:wght@400;500;700&amp;display=swap" rel="stylesheet"/>
8
+ <link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;display=swap" rel="stylesheet"/>
9
+ <link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;display=swap" rel="stylesheet"/>
10
+ <script id="tailwind-config">
11
+ tailwind.config = {
12
+ darkMode: "class",
13
+ theme: {
14
+ extend: {
15
+ colors: {
16
+ "on-tertiary-fixed": "#00461e",
17
+ "primary-container": "#00d2ff",
18
+ "on-secondary-fixed": "#580078",
19
+ "on-secondary-fixed-variant": "#792c97",
20
+ "surface-variant": "#1e253b",
21
+ "surface-tint": "#72dcff",
22
+ "tertiary": "#a6ffb5",
23
+ "primary": "#72dcff",
24
+ "on-error-container": "#ffa8a3",
25
+ "secondary-fixed-dim": "#ebadff",
26
+ "tertiary-fixed": "#49fb87",
27
+ "secondary-dim": "#ce7eec",
28
+ "outline-variant": "#434759",
29
+ "surface-container-lowest": "#000000",
30
+ "surface-container": "#13192b",
31
+ "on-surface": "#e1e4fa",
32
+ "primary-dim": "#00c3ed",
33
+ "error": "#ff716c",
34
+ "on-surface-variant": "#a6aabf",
35
+ "on-secondary": "#4c0068",
36
+ "secondary-container": "#6e208c",
37
+ "on-background": "#e1e4fa",
38
+ "surface-container-highest": "#1e253b",
39
+ "background": "#090e1c",
40
+ "surface-container-low": "#0d1323",
41
+ "surface": "#090e1c",
42
+ "tertiary-container": "#49fb87",
43
+ "on-primary-fixed-variant": "#004c5e",
44
+ "inverse-primary": "#00687f",
45
+ "error-container": "#9f0519",
46
+ "primary-fixed": "#00d2ff",
47
+ "on-primary-container": "#004253",
48
+ "on-primary-fixed": "#002c38",
49
+ "outline": "#707588",
50
+ "surface-container-high": "#181f33",
51
+ "inverse-on-surface": "#505466",
52
+ "on-primary": "#004c5e",
53
+ "secondary": "#dd8bfb",
54
+ "tertiary-fixed-dim": "#33ec7b",
55
+ "on-secondary-container": "#f1bfff",
56
+ "on-error": "#490006",
57
+ "primary-fixed-dim": "#00c3ed",
58
+ "on-tertiary-fixed-variant": "#00662e",
59
+ "secondary-fixed": "#f2c1ff",
60
+ "surface-dim": "#090e1c",
61
+ "surface-bright": "#242b43",
62
+ "on-tertiary": "#00652e",
63
+ "error-dim": "#d7383b",
64
+ "tertiary-dim": "#33ec7b",
65
+ "inverse-surface": "#faf8ff",
66
+ "on-tertiary-container": "#005b29"
67
+ },
68
+ fontFamily: {
69
+ "headline": ["Manrope"],
70
+ "body": ["Inter"],
71
+ "label": ["Space Grotesk"]
72
+ },
73
+ borderRadius: {"DEFAULT": "0.25rem", "lg": "0.5rem", "xl": "0.75rem", "full": "9999px"},
74
+ },
75
+ },
76
+ }
77
+ </script>
78
+ <style>
79
+ .material-symbols-outlined {
80
+ font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
81
+ }
82
+ .code-shadow {
83
+ box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
84
+ }
85
+ .syntax-keyword { color: #dd8bfb; }
86
+ .syntax-string { color: #a6ffb5; }
87
+ .syntax-function { color: #72dcff; }
88
+ .syntax-comment { color: #434759; }
89
+ .glass-panel {
90
+ background: rgba(30, 37, 59, 0.6);
91
+ backdrop-filter: blur(12px);
92
+ }
93
+ </style>
94
+ </head>
95
+ <body class="bg-background text-on-surface font-body selection:bg-primary-container/30">
96
+ <!-- Main Workspace Container -->
97
+ <div class="flex h-screen overflow-hidden">
98
+ <!-- Side Navigation (File Explorer) -->
99
+ <!-- Logic: SideNavBar component with "View Source" active intent -->
100
+ <aside class="w-64 flex-shrink-0 bg-surface-container-low flex flex-col py-6 gap-4 font-label text-xs uppercase tracking-widest">
101
+ <!-- Header Identity -->
102
+ <div class="px-6 flex flex-col gap-1 mb-4">
103
+ <div class="flex items-center gap-2">
104
+ <span class="material-symbols-outlined text-primary" data-icon="terminal">terminal</span>
105
+ <span class="text-primary font-bold">Component Lab</span>
106
+ </div>
107
+ <span class="text-on-surface-variant text-[10px]">v2.4.0</span>
108
+ </div>
109
+ <!-- Navigation Items -->
110
+ <nav class="flex-grow space-y-1">
111
+ <div class="px-4 py-2 flex items-center gap-3 text-on-surface-variant/50 hover:text-on-surface hover:bg-surface-variant/50 transition-all cursor-pointer group">
112
+ <span class="material-symbols-outlined text-sm" data-icon="grid_view">grid_view</span>
113
+ <span>All Components</span>
114
+ </div>
115
+ <div class="px-4 py-2 flex items-center gap-3 text-on-surface-variant/50 hover:text-on-surface hover:bg-surface-variant/50 transition-all cursor-pointer">
116
+ <span class="material-symbols-outlined text-sm" data-icon="layers">layers</span>
117
+ <span>Layouts</span>
118
+ </div>
119
+ <div class="px-4 py-2 flex items-center gap-3 text-on-surface-variant/50 hover:text-on-surface hover:bg-surface-variant/50 transition-all cursor-pointer">
120
+ <span class="material-symbols-outlined text-sm" data-icon="bar_chart">bar_chart</span>
121
+ <span>Data Viz</span>
122
+ </div>
123
+ <!-- File List Divider -->
124
+ <div class="pt-8 px-6 pb-2 text-[10px] text-outline opacity-40">Active Source</div>
125
+ <!-- Active File Item -->
126
+ <div class="px-4 py-2.5 flex items-center gap-3 text-primary bg-surface-variant rounded-r-lg border-l-4 border-primary shadow-lg shadow-primary/5">
127
+ <span class="material-symbols-outlined text-sm" data-icon="javascript">javascript</span>
128
+ <span class="normal-case font-medium font-body text-sm">bubble-chart.js</span>
129
+ </div>
130
+ <div class="px-4 py-2.5 flex items-center gap-3 text-on-surface-variant/50 hover:bg-surface-variant/30 transition-all cursor-pointer">
131
+ <span class="material-symbols-outlined text-sm" data-icon="physics">science</span>
132
+ <span class="normal-case font-medium font-body text-sm">physics.js</span>
133
+ </div>
134
+ <div class="px-4 py-2.5 flex items-center gap-3 text-on-surface-variant/50 hover:bg-surface-variant/30 transition-all cursor-pointer">
135
+ <span class="material-symbols-outlined text-sm" data-icon="monitoring">monitoring</span>
136
+ <span class="normal-case font-medium font-body text-sm">renderer.js</span>
137
+ </div>
138
+ </nav>
139
+ <!-- Footer Tabs -->
140
+ <div class="mt-auto px-4 space-y-1 border-t border-outline-variant/15 pt-4">
141
+ <div class="px-2 py-2 flex items-center gap-3 text-primary bg-surface-variant rounded-r-lg border-l-4 border-primary">
142
+ <span class="material-symbols-outlined text-sm" data-icon="terminal">terminal</span>
143
+ <span>View Source</span>
144
+ </div>
145
+ <div class="px-2 py-2 flex items-center gap-3 text-on-surface-variant/50 hover:text-on-surface transition-all">
146
+ <span class="material-symbols-outlined text-sm" data-icon="description">description</span>
147
+ <span>License</span>
148
+ </div>
149
+ </div>
150
+ </aside>
151
+ <!-- Main Content Area (The Editor) -->
152
+ <main class="flex-grow flex flex-col bg-background relative">
153
+ <!-- Editor Header (Simulated TopNavBar variant) -->
154
+ <header class="h-16 flex items-center justify-between px-8 bg-surface-container-high/60 backdrop-blur-xl border-b border-outline-variant/10 z-10">
155
+ <div class="flex items-center gap-4">
156
+ <span class="material-symbols-outlined text-on-surface-variant" data-icon="folder_open">folder_open</span>
157
+ <div class="flex items-center gap-2">
158
+ <h1 class="font-headline font-bold tracking-tight text-on-surface">Neon Observatory</h1>
159
+ <span class="text-outline-variant">/</span>
160
+ <span class="font-body text-sm text-primary">bubble-chart.js</span>
161
+ </div>
162
+ </div>
163
+ <div class="flex items-center gap-6">
164
+ <div class="flex items-center gap-2 bg-surface-container px-3 py-1.5 rounded-lg border border-outline-variant/15">
165
+ <span class="w-2 h-2 rounded-full bg-tertiary shadow-[0_0_8px_rgba(166,255,181,0.6)]"></span>
166
+ <span class="text-[10px] font-label uppercase tracking-widest text-on-surface-variant">Live Preview Sync</span>
167
+ </div>
168
+ <button class="flex items-center gap-2 bg-surface-variant/40 hover:bg-error/10 hover:text-error px-4 py-2 rounded-lg transition-all active:scale-95 group">
169
+ <span class="text-sm font-medium font-body">Close Editor</span>
170
+ <span class="material-symbols-outlined text-lg" data-icon="close">close</span>
171
+ </button>
172
+ </div>
173
+ </header>
174
+ <!-- Code Viewing Canvas -->
175
+ <div class="flex-grow overflow-auto bg-surface-container-lowest flex font-mono text-sm leading-relaxed p-0">
176
+ <!-- Line Numbers -->
177
+ <div class="w-16 flex-shrink-0 py-8 bg-surface-container-lowest/50 text-right pr-6 text-outline-variant/40 select-none border-r border-outline-variant/10">
178
+ <div>1</div><div>2</div><div>3</div><div>4</div><div>5</div><div>6</div><div>7</div><div>8</div><div>9</div><div>10</div><div>11</div><div>12</div><div>13</div><div>14</div><div>15</div><div>16</div><div>17</div><div>18</div><div>19</div><div>20</div><div>21</div><div>22</div><div>23</div><div>24</div><div>25</div><div>26</div><div>27</div><div>28</div><div>29</div><div>30</div>
179
+ </div>
180
+ <!-- Code Content -->
181
+ <div class="flex-grow py-8 px-10 relative">
182
+ <div class="absolute inset-0 bg-gradient-to-br from-primary/5 via-transparent to-secondary/5 pointer-events-none"></div>
183
+ <div class="relative">
184
+ <div class="mb-1"><span class="syntax-keyword">import</span> { <span class="syntax-function">CanvasRenderer</span>, <span class="syntax-function">PhysicsEngine</span> } <span class="syntax-keyword">from</span> <span class="syntax-string">'@luminous/core'</span>;</div>
185
+ <div class="mb-1"><span class="syntax-keyword">import</span> { <span class="syntax-function">AtmosphericDepth</span> } <span class="syntax-keyword">from</span> <span class="syntax-string">'./theme'</span>;</div>
186
+ <div class="mb-4"></div>
187
+ <div class="mb-1"><span class="syntax-comment">/**</span></div>
188
+ <div class="mb-1"><span class="syntax-comment"> * @class BubbleChart</span></div>
189
+ <div class="mb-1"><span class="syntax-comment"> * @description Implements the high-impact Neon Observatory aesthetics.</span></div>
190
+ <div class="mb-1"><span class="syntax-comment"> */</span></div>
191
+ <div class="mb-1"><span class="syntax-keyword">export default class</span> <span class="syntax-function">BubbleChart</span> {</div>
192
+ <div class="mb-1">  <span class="syntax-keyword">constructor</span>(options) {</div>
193
+ <div class="mb-1">    <span class="syntax-keyword">this</span>.engine = <span class="syntax-keyword">new</span> <span class="syntax-function">PhysicsEngine</span>({</div>
194
+ <div class="mb-1">      gravity: <span class="syntax-string">0.05</span>,</div>
195
+ <div class="mb-1">      friction: <span class="syntax-string">0.99</span>,</div>
196
+ <div class="mb-1">      theme: AtmosphericDepth.FOUNDATION</div>
197
+ <div class="mb-1">    });</div>
198
+ <div class="mb-1">  }</div>
199
+ <div class="mb-4"></div>
200
+ <div class="mb-1">  <span class="syntax-function">init</span>() {</div>
201
+ <div class="mb-1">    <span class="syntax-keyword">const</span> container = document.<span class="syntax-function">getElementById</span>(<span class="syntax-string">'observatory-root'</span>);</div>
202
+ <div class="mb-1">    <span class="syntax-keyword">this</span>.renderer = <span class="syntax-keyword">new</span> <span class="syntax-function">CanvasRenderer</span>(container);</div>
203
+ <div class="mb-4"></div>
204
+ <div class="mb-1">    <span class="syntax-comment">// Apply Neon Gradient Shaders</span></div>
205
+ <div class="mb-1">    <span class="syntax-keyword">this</span>.renderer.<span class="syntax-function">applyFilter</span>(<span class="syntax-string">'backdrop-blur'</span>, <span class="syntax-string">12</span>);</div>
206
+ <div class="mb-1">    <span class="syntax-keyword">this</span>.renderer.<span class="syntax-function">setAccentColor</span>(<span class="syntax-string">'#72dcff'</span>);</div>
207
+ <div class="mb-4"></div>
208
+ <div class="mb-1">    <span class="syntax-keyword">this</span>.engine.<span class="syntax-function">onUpdate</span>((data) =&gt; {</div>
209
+ <div class="mb-1">      <span class="syntax-keyword">this</span>.renderer.<span class="syntax-function">draw</span>(data);</div>
210
+ <div class="mb-1">    });</div>
211
+ <div class="mb-1">  }</div>
212
+ <div class="mb-1">}</div>
213
+ </div>
214
+ </div>
215
+ </div>
216
+ <!-- Editor Status Bar -->
217
+ <footer class="h-10 bg-surface-container flex items-center justify-between px-6 border-t border-outline-variant/5">
218
+ <div class="flex items-center gap-6">
219
+ <div class="flex items-center gap-2 text-on-surface-variant/60">
220
+ <span class="material-symbols-outlined text-sm" data-icon="git_branch">rebase</span>
221
+ <span class="font-label text-[10px] tracking-widest uppercase">main</span>
222
+ </div>
223
+ <div class="flex items-center gap-2 text-on-surface-variant/60">
224
+ <span class="material-symbols-outlined text-sm" data-icon="check_circle">check_circle</span>
225
+ <span class="font-label text-[10px] tracking-widest uppercase">No Errors</span>
226
+ </div>
227
+ </div>
228
+ <div class="flex items-center gap-6 font-label text-[10px] tracking-widest uppercase text-on-surface-variant/60">
229
+ <span>UTF-8</span>
230
+ <span>Javascript</span>
231
+ <div class="flex items-center gap-2 text-primary">
232
+ <span class="material-symbols-outlined text-sm" data-icon="cloud_done">cloud_done</span>
233
+ <span>Saved</span>
234
+ </div>
235
+ </div>
236
+ </footer>
237
+ <!-- Floating Tooling (Secondary Actions) -->
238
+ <div class="absolute bottom-16 right-8 flex flex-col gap-3">
239
+ <button class="w-12 h-12 rounded-full glass-panel flex items-center justify-center text-primary border border-primary/20 code-shadow hover:scale-110 transition-transform">
240
+ <span class="material-symbols-outlined" data-icon="search">search</span>
241
+ </button>
242
+ <button class="w-12 h-12 rounded-full bg-gradient-to-br from-primary to-primary-container flex items-center justify-center text-on-primary-fixed code-shadow hover:scale-110 transition-transform">
243
+ <span class="material-symbols-outlined" data-icon="play_arrow" style="font-variation-settings: 'FILL' 1;">play_arrow</span>
244
+ </button>
245
+ </div>
246
+ </main>
247
+ </div>
248
+ </body></html>
package/docs/temp/b0cbe.html ADDED
@@ -0,0 +1,276 @@
1
+ <!DOCTYPE html>
2
+
3
+ <html class="dark" lang="en"><head>
4
+ <meta charset="utf-8"/>
5
+ <meta content="width=device-width, initial-scale=1.0" name="viewport"/>
6
+ <title>Neon Observatory - Examples Gallery</title>
7
+ <script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
8
+ <link href="https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;700;800&amp;family=Inter:wght@400;500;600&amp;family=Space+Grotesk:wght@400;500;700&amp;display=swap" rel="stylesheet"/>
9
+ <link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;display=swap" rel="stylesheet"/>
10
+ <link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;display=swap" rel="stylesheet"/>
11
+ <script id="tailwind-config">
12
+ tailwind.config = {
13
+ darkMode: "class",
14
+ theme: {
15
+ extend: {
16
+ colors: {
17
+ "on-tertiary-fixed": "#00461e",
18
+ "primary-container": "#00d2ff",
19
+ "on-secondary-fixed": "#580078",
20
+ "on-secondary-fixed-variant": "#792c97",
21
+ "surface-variant": "#1e253b",
22
+ "surface-tint": "#72dcff",
23
+ "tertiary": "#a6ffb5",
24
+ "primary": "#72dcff",
25
+ "on-error-container": "#ffa8a3",
26
+ "secondary-fixed-dim": "#ebadff",
27
+ "tertiary-fixed": "#49fb87",
28
+ "secondary-dim": "#ce7eec",
29
+ "outline-variant": "#434759",
30
+ "surface-container-lowest": "#000000",
31
+ "surface-container": "#13192b",
32
+ "on-surface": "#e1e4fa",
33
+ "primary-dim": "#00c3ed",
34
+ "error": "#ff716c",
35
+ "on-surface-variant": "#a6aabf",
36
+ "on-secondary": "#4c0068",
37
+ "secondary-container": "#6e208c",
38
+ "on-background": "#e1e4fa",
39
+ "surface-container-highest": "#1e253b",
40
+ "background": "#090e1c",
41
+ "surface-container-low": "#0d1323",
42
+ "surface": "#090e1c",
43
+ "tertiary-container": "#49fb87",
44
+ "on-primary-fixed-variant": "#004c5e",
45
+ "inverse-primary": "#00687f",
46
+ "error-container": "#9f0519",
47
+ "primary-fixed": "#00d2ff",
48
+ "on-primary-container": "#004253",
49
+ "on-primary-fixed": "#002c38",
50
+ "outline": "#707588",
51
+ "surface-container-high": "#181f33",
52
+ "inverse-on-surface": "#505466",
53
+ "on-primary": "#004c5e",
54
+ "secondary": "#dd8bfb",
55
+ "tertiary-fixed-dim": "#33ec7b",
56
+ "on-secondary-container": "#f1bfff",
57
+ "on-error": "#490006",
58
+ "primary-fixed-dim": "#00c3ed",
59
+ "on-tertiary-fixed-variant": "#00662e",
60
+ "secondary-fixed": "#f2c1ff",
61
+ "surface-dim": "#090e1c",
62
+ "surface-bright": "#242b43",
63
+ "on-tertiary": "#00652e",
64
+ "error-dim": "#d7383b",
65
+ "tertiary-dim": "#33ec7b",
66
+ "inverse-surface": "#faf8ff",
67
+ "on-tertiary-container": "#005b29"
68
+ },
69
+ fontFamily: {
70
+ "headline": ["Manrope"],
71
+ "body": ["Inter"],
72
+ "label": ["Space Grotesk"]
73
+ },
74
+ borderRadius: { "DEFAULT": "0.25rem", "lg": "0.5rem", "xl": "0.75rem", "full": "9999px" },
75
+ },
76
+ },
77
+ }
78
+ </script>
79
+ <style>
80
+ .material-symbols-outlined {
81
+ font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
82
+ }
83
+ .glass-panel {
84
+ background: rgba(30, 37, 59, 0.6);
85
+ backdrop-filter: blur(12px);
86
+ }
87
+ .code-syntax-keyword { color: #dd8bfb; }
88
+ .code-syntax-string { color: #a6ffb5; }
89
+ .code-syntax-function { color: #72dcff; }
90
+ .code-syntax-comment { color: #707588; }
91
+ </style>
92
+ </head>
93
+ <body class="bg-surface text-on-surface font-body selection:bg-primary-container selection:text-on-primary-container">
94
+ <!-- Top Navigation Shell -->
95
+ <nav class="fixed top-0 w-full z-50 bg-[#090e1c]/60 backdrop-blur-xl shadow-[0_20px_40px_rgba(0,0,0,0.4)] flex justify-between items-center px-8 h-16 w-full font-headline font-medium tracking-tight">
96
+ <div class="flex items-center gap-8">
97
+ <span class="text-xl font-bold tracking-tighter text-[#72dcff]">Neon Observatory</span>
98
+ <div class="hidden md:flex gap-6">
99
+ <a class="text-[#72dcff] border-b-2 border-[#72dcff] pb-1 hover:text-[#dd8bfb] transition-colors duration-300" href="#">Gallery</a>
100
+ <a class="text-[#e1e4fa]/70 hover:text-[#dd8bfb] transition-colors duration-300" href="#">Docs</a>
101
+ <a class="text-[#e1e4fa]/70 hover:text-[#dd8bfb] transition-colors duration-300" href="#">API</a>
102
+ <a class="text-[#e1e4fa]/70 hover:text-[#dd8bfb] transition-colors duration-300" href="#">Showcase</a>
103
+ </div>
104
+ </div>
105
+ <div class="flex items-center gap-4">
106
+ <button class="material-symbols-outlined text-[#72dcff] hover:text-[#dd8bfb] transition-transform active:scale-95" data-icon="code">code</button>
107
+ <button class="material-symbols-outlined text-[#72dcff] hover:text-[#dd8bfb] transition-transform active:scale-95" data-icon="settings">settings</button>
108
+ <div class="w-8 h-8 rounded-full bg-surface-container-highest border border-outline-variant/15 overflow-hidden">
109
+ <img alt="Developer Profile" class="w-full h-full object-cover" data-alt="User avatar placeholder with abstract shape" src="https://lh3.googleusercontent.com/aida-public/AB6AXuAfed5y88HqzUSrI8CrDVfs3XExsrUjjEx8nXEz4XjmfpJDSH1mowpq5HYpUGtqHR8qxbFqX03CUIm8amQUCwRL4Pgs56lLT8olJV27VFwC-RHRap0plBWJ9j2s6mUrDPjqPU0Qi8UFxjcmAYTsJzaS99toJ7X4GGMPrO93PNx3HKD68O1V7NxcGPV_Y679Iy-hrOvLnMyMTBO38V33pNCN-gW2Ha12c0UHjQ6VXluAiDE02PaaTF2khN481a_WM36iCarA38aP3RQ"/>
110
+ </div>
111
+ </div>
112
+ </nav>
113
+ <!-- Sidebar Shell -->
114
+ <aside class="h-screen w-64 fixed left-0 top-0 pt-20 bg-[#0d1323] flex flex-col py-6 gap-4 z-40">
115
+ <div class="px-6 mb-4">
116
+ <div class="flex items-center gap-3">
117
+ <div class="w-8 h-8 bg-surface-container-high rounded flex items-center justify-center">
118
+ <span class="material-symbols-outlined text-primary" data-icon="grid_view">grid_view</span>
119
+ </div>
120
+ <div>
121
+ <p class="text-primary font-bold font-label text-xs uppercase tracking-widest">Component Lab</p>
122
+ <p class="text-on-surface-variant text-[10px]">v2.4.0</p>
123
+ </div>
124
+ </div>
125
+ </div>
126
+ <nav class="flex-1 space-y-1">
127
+ <a class="flex items-center gap-3 px-6 py-2 text-[#72dcff] bg-[#1e253b] rounded-r-lg border-l-4 border-[#72dcff] font-label text-xs uppercase tracking-widest hover:translate-x-1 duration-200" href="#">
128
+ <span class="material-symbols-outlined" data-icon="grid_view">grid_view</span> All Components
129
+ </a>
130
+ <a class="flex items-center gap-3 px-6 py-2 text-[#e1e4fa]/50 hover:text-[#e1e4fa] hover:bg-[#1e253b]/50 transition-all font-label text-xs uppercase tracking-widest hover:translate-x-1 duration-200" href="#">
131
+ <span class="material-symbols-outlined" data-icon="layers">layers</span> Layouts
132
+ </a>
133
+ <a class="flex items-center gap-3 px-6 py-2 text-[#e1e4fa]/50 hover:text-[#e1e4fa] hover:bg-[#1e253b]/50 transition-all font-label text-xs uppercase tracking-widest hover:translate-x-1 duration-200" href="#">
134
+ <span class="material-symbols-outlined" data-icon="bar_chart">bar_chart</span> Data Viz
135
+ </a>
136
+ <a class="flex items-center gap-3 px-6 py-2 text-[#e1e4fa]/50 hover:text-[#e1e4fa] hover:bg-[#1e253b]/50 transition-all font-label text-xs uppercase tracking-widest hover:translate-x-1 duration-200" href="#">
137
+ <span class="material-symbols-outlined" data-icon="edit_note">edit_note</span> Inputs
138
+ </a>
139
+ <a class="flex items-center gap-3 px-6 py-2 text-[#e1e4fa]/50 hover:text-[#e1e4fa] hover:bg-[#1e253b]/50 transition-all font-label text-xs uppercase tracking-widest hover:translate-x-1 duration-200" href="#">
140
+ <span class="material-symbols-outlined" data-icon="build">build</span> Utilities
141
+ </a>
142
+ </nav>
143
+ <div class="px-6 py-4 mt-auto space-y-4">
144
+ <button class="w-full py-2 bg-gradient-to-r from-primary to-primary-container text-on-primary-fixed rounded-md font-label text-xs font-bold uppercase tracking-wider hover:shadow-[0_0_12px_rgba(114,220,255,0.4)] transition-all">
145
+ Submit Example
146
+ </button>
147
+ <div class="space-y-2">
148
+ <a class="flex items-center gap-2 text-[#e1e4fa]/50 hover:text-primary transition-colors text-[10px] font-label uppercase" href="#">
149
+ <span class="material-symbols-outlined text-xs" data-icon="terminal">terminal</span> View Source
150
+ </a>
151
+ <a class="flex items-center gap-2 text-[#e1e4fa]/50 hover:text-primary transition-colors text-[10px] font-label uppercase" href="#">
152
+ <span class="material-symbols-outlined text-xs" data-icon="description">description</span> License
153
+ </a>
154
+ </div>
155
+ </div>
156
+ </aside>
157
+ <!-- Main Content Canvas (Blurred Background) -->
158
+ <main class="ml-64 pt-24 px-12 pb-20 filter blur-md pointer-events-none">
159
+ <header class="mb-12">
160
+ <div class="flex items-end gap-4 mb-2">
161
+ <h1 class="text-5xl font-extrabold font-headline tracking-tighter text-on-surface">Examples Gallery</h1>
162
+ <span class="font-label text-secondary text-sm mb-2 px-2 py-0.5 bg-secondary/10 rounded">32 MODULES</span>
163
+ </div>
164
+ <p class="text-on-surface-variant max-w-2xl font-body">Explore the immersive data visualization ecosystem of Neon Observatory. Pre-configured components ready for production deployment.</p>
165
+ </header>
166
+ <!-- Bento Grid Example -->
167
+ <div class="grid grid-cols-12 gap-8">
168
+ <!-- Card 1 -->
169
+ <div class="col-span-8 h-96 bg-surface-container-low rounded-xl relative overflow-hidden group">
170
+ <div class="absolute inset-0 bg-gradient-to-br from-primary/5 to-transparent"></div>
171
+ <div class="absolute bottom-0 left-0 right-0 p-8 z-10">
172
+ <p class="font-label text-primary uppercase tracking-widest text-xs mb-2">Real-time Stream</p>
173
+ <h3 class="text-2xl font-headline font-bold text-on-surface">Dynamic Force Directed Graph</h3>
174
+ </div>
175
+ <div class="absolute inset-0 flex items-center justify-center opacity-40">
176
+ <div class="w-64 h-64 border-2 border-primary/20 rounded-full animate-pulse"></div>
177
+ <div class="w-32 h-32 border-2 border-secondary/20 rounded-full absolute"></div>
178
+ </div>
179
+ </div>
180
+ <!-- Card 2 -->
181
+ <div class="col-span-4 h-96 bg-surface-container-highest rounded-xl p-8 flex flex-col justify-between">
182
+ <div>
183
+ <span class="material-symbols-outlined text-tertiary mb-4 scale-125" data-icon="bar_chart">bar_chart</span>
184
+ <h3 class="text-xl font-headline font-bold text-on-surface mb-2">Bubble Orchestrator</h3>
185
+ <p class="text-on-surface-variant text-sm font-body leading-relaxed">Multidimensional data clustering with automatic collision detection.</p>
186
+ </div>
187
+ <div class="space-y-3">
188
+ <div class="h-1 w-full bg-outline-variant/20 rounded-full overflow-hidden">
189
+ <div class="h-full w-3/4 bg-tertiary rounded-full"></div>
190
+ </div>
191
+ <div class="flex justify-between text-[10px] font-label text-on-surface-variant">
192
+ <span>DENSITY</span>
193
+ <span>75%</span>
194
+ </div>
195
+ </div>
196
+ </div>
197
+ </div>
198
+ </main>
199
+ <!-- Modal Overlay Container -->
200
+ <div class="fixed inset-0 z-[100] flex items-center justify-center bg-background/40 backdrop-blur-sm p-4">
201
+ <!-- View Code Modal -->
202
+ <div class="w-full max-w-4xl glass-panel rounded-xl shadow-[0_20px_40px_rgba(0,0,0,0.4)] overflow-hidden flex flex-col max-h-[870px]">
203
+ <!-- Modal Header -->
204
+ <div class="flex items-center justify-between px-8 py-5 bg-surface-container-high">
205
+ <div class="flex items-center gap-4">
206
+ <div class="flex gap-1.5">
207
+ <div class="w-3 h-3 rounded-full bg-error/50"></div>
208
+ <div class="w-3 h-3 rounded-full bg-secondary/50"></div>
209
+ <div class="w-3 h-3 rounded-full bg-tertiary/50"></div>
210
+ </div>
211
+ <div class="h-4 w-px bg-outline-variant/30 mx-2"></div>
212
+ <h2 class="font-headline font-bold text-lg flex items-center gap-2">
213
+ <span class="material-symbols-outlined text-primary text-sm" data-icon="code">code</span>
214
+ bubble_chart_basic.js
215
+ </h2>
216
+ </div>
217
+ <div class="flex items-center gap-3">
218
+ <button class="flex items-center gap-2 px-4 py-1.5 bg-surface-variant/40 hover:bg-surface-variant text-on-surface text-xs font-label uppercase tracking-widest rounded border border-outline-variant/20 transition-all">
219
+ <span class="material-symbols-outlined text-sm" data-icon="content_copy">content_copy</span>
220
+ Copy Code
221
+ </button>
222
+ <button class="w-8 h-8 flex items-center justify-center rounded-full hover:bg-error/20 text-on-surface-variant hover:text-error transition-colors">
223
+ <span class="material-symbols-outlined" data-icon="close">close</span>
224
+ </button>
225
+ </div>
226
+ </div>
227
+ <!-- Code Content Area -->
228
+ <div class="flex-1 overflow-y-auto p-8 bg-surface-container-lowest">
229
+ <pre class="font-mono text-sm leading-relaxed text-on-surface/90"><code><span class="code-syntax-keyword">import</span> { NeonObservatory } <span class="code-syntax-keyword">from</span> <span class="code-syntax-string">'@luminous/core'</span>;
230
+
231
+ <span class="code-syntax-comment">// Initialize the atmosphere engine</span>
232
+ <span class="code-syntax-keyword">const</span> observatory = <span class="code-syntax-keyword">new</span> <span class="code-syntax-function">NeonObservatory</span>({
233
+ container: <span class="code-syntax-string">'#chart-canvas'</span>,
234
+ theme: <span class="code-syntax-string">'neon-deep'</span>
235
+ });
236
+
237
+ <span class="code-syntax-comment">// Define bubble data schema</span>
238
+ <span class="code-syntax-keyword">const</span> bubbleConfig = {
239
+ type: <span class="code-syntax-string">'bubble-orchestrator'</span>,
240
+ data: [
241
+ { x: <span class="code-syntax-function">10</span>, y: <span class="code-syntax-function">30</span>, size: <span class="code-syntax-function">15</span>, label: <span class="code-syntax-string">'Alpha'</span> },
242
+ { x: <span class="code-syntax-function">45</span>, y: <span class="code-syntax-function">12</span>, size: <span class="code-syntax-function">25</span>, label: <span class="code-syntax-string">'Beta'</span> },
243
+ { x: <span class="code-syntax-function">70</span>, y: <span class="code-syntax-function">85</span>, size: <span class="code-syntax-function">20</span>, label: <span class="code-syntax-string">'Gamma'</span> }
244
+ ],
245
+ options: {
246
+ collision: <span class="code-syntax-keyword">true</span>,
247
+ bloom: <span class="code-syntax-function">0.45</span>,
248
+ responsive: <span class="code-syntax-keyword">true</span>
249
+ }
250
+ };
251
+
252
+ <span class="code-syntax-comment">// Mount and render</span>
253
+ observatory.<span class="code-syntax-function">mount</span>(bubbleConfig);
254
+ observatory.<span class="code-syntax-function">render</span>();</code></pre>
255
+ </div>
256
+ <!-- Modal Footer Info -->
257
+ <div class="px-8 py-4 bg-surface-container-high flex justify-between items-center text-[10px] font-label text-on-surface-variant uppercase tracking-widest">
258
+ <div class="flex gap-6">
259
+ <span class="flex items-center gap-1.5"><span class="w-1.5 h-1.5 rounded-full bg-primary"></span> JavaScript ES6</span>
260
+ <span class="flex items-center gap-1.5"><span class="w-1.5 h-1.5 rounded-full bg-tertiary"></span> 1.2 KB Gzipped</span>
261
+ </div>
262
+ <div>Line 24, Col 1</div>
263
+ </div>
264
+ </div>
265
+ </div>
266
+ <!-- Footer Shell -->
267
+ <footer class="w-full py-12 px-8 bg-[#090e1c] flex flex-col md:flex-row justify-between items-center border-t border-[#434759]/15 mt-20 font-body text-sm text-[#e1e4fa]/60">
268
+ <p>© 2024 Luminous DX. Built with Neon Observatory.</p>
269
+ <div class="flex gap-8 mt-6 md:mt-0">
270
+ <a class="hover:text-[#dd8bfb] transition-colors opacity-80 hover:opacity-100" href="#">Documentation</a>
271
+ <a class="hover:text-[#dd8bfb] transition-colors opacity-80 hover:opacity-100" href="#">GitHub</a>
272
+ <a class="hover:text-[#dd8bfb] transition-colors opacity-80 hover:opacity-100" href="#">Changelog</a>
273
+ <a class="hover:text-[#dd8bfb] transition-colors opacity-80 hover:opacity-100" href="#">Privacy</a>
274
+ </div>
275
+ </footer>
276
+ </body></html>