npm - bubble-chart-js - Versions diffs - 1.0.19 → 2.0.0 - Mend

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

package/README.md +1 -1
package/demo/glassmorphism.html +323 -0
package/demo/index.html +739 -0
package/dist/bubbleChart.cjs.js +1 -1
package/dist/bubbleChart.esm.js +1 -1
package/dist/bubbleChart.umd.js +1 -1
package/docs/documentation.html +438 -0
package/docs/examples.html +689 -0
package/docs/index.html +432 -0
package/docs/landing_test.html +337 -0
package/docs/playground.html +345 -0
package/docs/process_html.js +105 -0
package/docs/temp/5a86d.html +248 -0
package/docs/temp/b0cbe.html +276 -0
package/docs/temp/docs_desktop.html +341 -0
package/docs/temp/docs_mobile.html +291 -0
package/docs/temp/examples_desktop.html +372 -0
package/docs/temp/examples_mobile.html +317 -0
package/docs/temp/landing_desktop.html +337 -0
package/docs/temp/landing_mobile.html +270 -0
package/docs/temp/playground_desktop.html +283 -0
package/docs/temp/playground_mobile.html +236 -0
package/examples/test.html +194 -0
package/examples/test2.html +103 -0
package/package.json +7 -3
package/scripts/generate-fixtures.ts +45 -0
package/spec/config-defaults.json +16 -0
package/spec/fixtures/3-bubbles.expected.json +27 -0
package/spec/fixtures/3-bubbles.input.json +10 -0
package/spec/fixtures/equal-values.expected.json +34 -0
package/spec/fixtures/equal-values.input.json +11 -0
package/spec/fixtures/many-bubbles.expected.json +76 -0
package/spec/fixtures/many-bubbles.input.json +17 -0
package/spec/fixtures/single-bubble.expected.json +13 -0
package/spec/fixtures/single-bubble.input.json +8 -0
package/spec/physics.json +11 -0
package/tsconfig.scripts.json +8 -0
package/dist/canvas.d.ts +0 -5
package/dist/constants/app-constants.d.ts +0 -3
package/dist/constants/physics.d.ts +0 -10
package/dist/core/renderer.d.ts +0 -2
package/dist/features/text-wrapper.d.ts +0 -2
package/dist/features/tooltip.d.ts +0 -6
package/dist/index.d.ts +0 -8
package/dist/models/internal/data-item-info.d.ts +0 -7
package/dist/models/public/bubble-chart.d.ts +0 -6
package/dist/models/public/config/bubble-appearance.d.ts +0 -26
package/dist/models/public/config/font-options.d.ts +0 -46
package/dist/models/public/config/interaction-options.d.ts +0 -6
package/dist/models/public/config/tooltip-config.d.ts +0 -4
package/dist/models/public/config/tooltip-options.d.ts +0 -170
package/dist/models/public/configuration.d.ts +0 -30
package/dist/models/public/data-item.d.ts +0 -8
package/dist/services/chart-service.d.ts +0 -5
package/dist/services/render-service.d.ts +0 -3
package/dist/utils/config.d.ts +0 -12
package/dist/utils/helper.d.ts +0 -2
package/dist/utils/validation.d.ts +0 -5

package/docs/temp/playground_desktop.html ADDED Viewed

@@ -0,0 +1,283 @@
+<!DOCTYPE html>
+<html class="dark" lang="en"><head>
+<meta charset="utf-8"/>
+<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
+<title>Playground | bubble-chart-js</title>
+<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
+<link href="https://fonts.googleapis.com/css2?family=Manrope:wght@400;700;800&amp;family=Inter:wght@400;500;600&amp;family=Space+Grotesk:wght@400;500;700&amp;display=swap" rel="stylesheet"/>
+<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;display=swap" rel="stylesheet"/>
+<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;display=swap" rel="stylesheet"/>
+<script id="tailwind-config">
+      tailwind.config = {
+        darkMode: "class",
+        theme: {
+          extend: {
+            colors: {
+              "surface": "#090e1c",
+              "on-tertiary-container": "#005b29",
+              "on-error": "#490006",
+              "on-surface-variant": "#a6aabf",
+              "outline-variant": "#434759",
+              "surface-tint": "#72dcff",
+              "on-secondary-fixed": "#580078",
+              "surface-container": "#13192b",
+              "tertiary-fixed-dim": "#33ec7b",
+              "surface-container-highest": "#1e253b",
+              "error-container": "#9f0519",
+              "on-primary-fixed-variant": "#004c5e",
+              "on-tertiary-fixed-variant": "#00662e",
+              "inverse-surface": "#faf8ff",
+              "on-secondary-container": "#f1bfff",
+              "primary-fixed": "#00d2ff",
+              "on-surface": "#e1e4fa",
+              "secondary": "#dd8bfb",
+              "surface-variant": "#1e253b",
+              "primary-fixed-dim": "#00c3ed",
+              "surface-bright": "#242b43",
+              "on-primary-fixed": "#002c38",
+              "error-dim": "#d7383b",
+              "surface-dim": "#090e1c",
+              "on-secondary": "#4c0068",
+              "tertiary-dim": "#33ec7b",
+              "background": "#090e1c",
+              "secondary-dim": "#ce7eec",
+              "inverse-on-surface": "#505466",
+              "secondary-fixed-dim": "#ebadff",
+              "inverse-primary": "#00687f",
+              "tertiary": "#a6ffb5",
+              "on-error-container": "#ffa8a3",
+              "on-tertiary-fixed": "#00461e",
+              "tertiary-container": "#49fb87",
+              "surface-container-high": "#181f33",
+              "error": "#ff716c",
+              "primary-dim": "#00c3ed",
+              "secondary-container": "#6e208c",
+              "on-tertiary": "#00652e",
+              "on-primary": "#004c5e",
+              "surface-container-low": "#0d1323",
+              "on-primary-container": "#004253",
+              "outline": "#707588",
+              "on-background": "#e1e4fa",
+              "surface-container-lowest": "#000000",
+              "primary-container": "#00d2ff",
+              "on-secondary-fixed-variant": "#792c97",
+              "primary": "#72dcff",
+              "tertiary-fixed": "#49fb87",
+              "secondary-fixed": "#f2c1ff"
+            },
+            fontFamily: {
+              "headline": ["Manrope"],
+              "body": ["Inter"],
+              "label": ["Space Grotesk"]
+            },
+            borderRadius: {"DEFAULT": "0.25rem", "lg": "0.5rem", "xl": "0.75rem", "full": "9999px"},
+          },
+        },
+      }
+    </script>
+<style>
+        .glass-panel {
+            background: rgba(30, 37, 59, 0.6);
+            backdrop-filter: blur(12px);
+        }
+        .material-symbols-outlined {
+            font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
+        }
+        .code-shadow {
+            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
+        }
+        /* Custom range slider styling */
+        input[type=range] {
+            -webkit-appearance: none;
+            background: transparent;
+        }
+        input[type=range]::-webkit-slider-runnable-track {
+            width: 100%;
+            height: 4px;
+            background: #434759;
+            border-radius: 2px;
+        }
+        input[type=range]::-webkit-slider-thumb {
+            -webkit-appearance: none;
+            height: 16px;
+            width: 16px;
+            border-radius: 50%;
+            background: #72dcff;
+            margin-top: -6px;
+            box-shadow: 0 0 10px rgba(114, 220, 255, 0.5);
+        }
+    </style>
+</head>
+<body class="bg-background text-on-surface font-body overflow-hidden">
+<!-- TopNavBar -->
+<header class="fixed top-0 w-full z-50 bg-[#090e1c]/60 backdrop-blur-xl shadow-[0_20px_40px_rgba(0,0,0,0.4)]">
+<nav class="flex justify-between items-center h-16 px-8 max-w-7xl mx-auto">
+<div class="flex items-center gap-8">
+<span class="text-xl font-black text-[#72dcff] tracking-tighter font-headline">bubble-chart-js</span>
+<div class="hidden md:flex gap-6 font-headline font-bold tracking-tight">
+<a class="text-[#e1e4fa] opacity-80 hover:text-[#dd8bfb] transition-colors duration-300" href="#">Docs</a>
+<a class="text-[#e1e4fa] opacity-80 hover:text-[#dd8bfb] transition-colors duration-300" href="#">Examples</a>
+<a class="text-[#72dcff] border-b-2 border-[#72dcff] pb-1 hover:text-[#dd8bfb] transition-colors duration-300" href="#">Playground</a>
+<a class="text-[#e1e4fa] opacity-80 hover:text-[#dd8bfb] transition-colors duration-300" href="#">GitHub</a>
+</div>
+</div>
+<div class="flex items-center gap-4">
+<button class="p-2 text-[#e1e4fa] hover:text-[#dd8bfb] transition-colors">
+<span class="material-symbols-outlined">dark_mode</span>
+</button>
+<button class="bg-gradient-to-br from-primary to-primary-fixed-variant px-5 py-2 rounded-lg text-on-primary-fixed font-headline font-bold text-sm hover:shadow-[0_0_15px_rgba(114,220,255,0.4)] transition-all active:scale-95 duration-200">
+                    Get Started
+                </button>
+</div>
+</nav>
+</header>
+<main class="pt-16 h-screen flex flex-col md:flex-row">
+<!-- Left: Config Editor -->
+<section class="w-full md:w-[450px] bg-surface-container border-r border-outline-variant/15 flex flex-col h-full z-10">
+<!-- Header/Tabs -->
+<div class="p-6 pb-2">
+<span class="font-label text-xs uppercase tracking-[0.2em] text-secondary font-bold">Workspace</span>
+<h1 class="text-2xl font-headline font-extrabold text-on-surface mt-1">Config Editor</h1>
+</div>
+<div class="flex-1 overflow-y-auto px-6 space-y-8 py-4 custom-scrollbar">
+<!-- JSON Code Area -->
+<div class="space-y-3">
+<div class="flex justify-between items-center">
+<span class="font-label text-[10px] uppercase text-on-surface-variant tracking-widest">chart-config.json</span>
+<span class="text-[10px] text-tertiary">Live Sync Active</span>
+</div>
+<div class="bg-surface-container-lowest rounded-xl p-4 code-shadow font-mono text-sm leading-relaxed border border-outline-variant/10">
+<div class="text-secondary">{</div>
+<div class="pl-4">
+<span class="text-primary">"renderer"</span>: <span class="text-tertiary">"canvas"</span>,
+                        </div>
+<div class="pl-4">
+<span class="text-primary">"count"</span>: <span class="text-tertiary">150</span>,
+                        </div>
+<div class="pl-4">
+<span class="text-primary">"physics"</span>: {
+                        </div>
+<div class="pl-8">
+<span class="text-primary">"gravity"</span>: <span class="text-tertiary">0.05</span>,
+                        </div>
+<div class="pl-8">
+<span class="text-primary">"friction"</span>: <span class="text-tertiary">0.98</span>
+</div>
+<div class="pl-4 text-secondary">}</div>
+<div class="text-secondary">}</div>
+</div>
+</div>
+<!-- Control Panel Forms -->
+<div class="glass-panel p-6 rounded-xl space-y-6">
+<!-- Renderer Toggle -->
+<div class="space-y-3">
+<label class="font-label text-xs uppercase text-on-surface-variant font-bold">Renderer toggle</label>
+<div class="grid grid-cols-2 bg-surface-container-highest p-1 rounded-lg">
+<button class="bg-primary text-on-primary-fixed text-xs font-bold py-2 rounded-md transition-all">SVG</button>
+<button class="text-on-surface-variant text-xs font-bold py-2 rounded-md hover:text-on-surface">Canvas</button>
+</div>
+</div>
+<!-- Bubble Count Slider -->
+<div class="space-y-3">
+<div class="flex justify-between items-center">
+<label class="font-label text-xs uppercase text-on-surface-variant font-bold">Bubble count</label>
+<span class="text-xs font-mono text-primary">150</span>
+</div>
+<input class="w-full" max="500" min="10" type="range" value="150"/>
+</div>
+<!-- Physics Toggle -->
+<div class="flex justify-between items-center">
+<label class="font-label text-xs uppercase text-on-surface-variant font-bold">Physics simulation</label>
+<button class="relative inline-flex h-6 w-11 items-center rounded-full bg-primary">
+<span class="inline-block h-4 w-4 translate-x-6 transform rounded-full bg-on-primary-fixed transition"></span>
+</button>
+</div>
+<!-- Theme Switch -->
+<div class="space-y-3">
+<label class="font-label text-xs uppercase text-on-surface-variant font-bold">Visual Theme</label>
+<select class="w-full bg-surface-container-highest border-none rounded-lg text-sm text-on-surface focus:ring-1 focus:ring-primary py-3">
+<option>Neon Observatory (Default)</option>
+<option>Atmospheric Depth</option>
+<option>Midnight Terminal</option>
+</select>
+</div>
+</div>
+<!-- Export Action -->
+<button class="w-full py-4 glass-panel border border-primary/20 rounded-xl text-primary font-headline font-bold text-sm flex items-center justify-center gap-2 hover:bg-primary/5 transition-all group">
+<span class="material-symbols-outlined text-sm group-hover:rotate-45 transition-transform">send</span>
+                    Export Implementation
+                </button>
+</div>
+</section>
+<!-- Right: Live Chart Preview -->
+<section class="flex-1 relative bg-surface-dim overflow-hidden flex items-center justify-center">
+<!-- Background Gradients -->
+<div class="absolute inset-0 overflow-hidden pointer-events-none">
+<div class="absolute -top-1/4 -right-1/4 w-1/2 h-1/2 bg-primary/10 blur-[120px] rounded-full"></div>
+<div class="absolute -bottom-1/4 -left-1/4 w-1/2 h-1/2 bg-secondary/10 blur-[120px] rounded-full"></div>
+</div>
+<!-- Floating Bubble Elements (Visual Mockup) -->
+<div class="absolute inset-0 flex items-center justify-center p-12">
+<div class="relative w-full h-full glass-panel rounded-3xl overflow-hidden border border-outline-variant/10 shadow-[0_40px_80px_rgba(0,0,0,0.6)] flex items-center justify-center">
+<!-- Decorative Mock Bubbles -->
+<div class="absolute w-24 h-24 rounded-full bg-gradient-to-br from-primary/40 to-transparent blur-sm border border-primary/30 top-[15%] left-[20%]"></div>
+<div class="absolute w-40 h-40 rounded-full bg-gradient-to-br from-secondary/30 to-transparent blur-md border border-secondary/20 bottom-[10%] right-[15%]"></div>
+<div class="absolute w-16 h-16 rounded-full bg-gradient-to-br from-tertiary/40 to-transparent blur-sm border border-tertiary/30 top-[60%] left-[45%]"></div>
+<div class="absolute w-12 h-12 rounded-full bg-on-surface/5 backdrop-blur-md border border-on-surface/20 top-[40%] right-[30%]"></div>
+<div class="absolute w-32 h-32 rounded-full bg-primary-fixed-dim/20 blur-xl bottom-[40%] left-[10%]"></div>
+<!-- Live Indicator -->
+<div class="absolute top-6 left-6 flex items-center gap-2 bg-surface-container-lowest/40 backdrop-blur-md px-3 py-1.5 rounded-full border border-outline-variant/10">
+<span class="w-2 h-2 rounded-full bg-tertiary animate-pulse"></span>
+<span class="font-label text-[10px] uppercase font-bold tracking-widest">Live Rendering</span>
+</div>
+<!-- Zoom Controls Overlay -->
+<div class="absolute bottom-6 right-6 flex flex-col gap-2">
+<button class="w-10 h-10 glass-panel rounded-lg flex items-center justify-center hover:bg-surface-bright transition-colors border border-outline-variant/10">
+<span class="material-symbols-outlined text-on-surface-variant">add</span>
+</button>
+<button class="w-10 h-10 glass-panel rounded-lg flex items-center justify-center hover:bg-surface-bright transition-colors border border-outline-variant/10">
+<span class="material-symbols-outlined text-on-surface-variant">remove</span>
+</button>
+<button class="w-10 h-10 glass-panel rounded-lg flex items-center justify-center hover:bg-surface-bright transition-colors border border-outline-variant/10">
+<span class="material-symbols-outlined text-on-surface-variant">refresh</span>
+</button>
+</div>
+<!-- Empty Space for "Simulation" -->
+<div class="text-center space-y-4">
+<div class="font-headline font-black text-6xl text-on-surface/5 pointer-events-none select-none">
+                            BUBBLE_CANVAS_v2
+                        </div>
+<p class="font-label text-on-surface-variant/40 tracking-[0.4em] uppercase text-xs">Awaiting data stream</p>
+</div>
+</div>
+</div>
+<!-- Tooltip Overlay (Interaction Mockup) -->
+<div class="absolute top-[25%] left-[60%] glass-panel p-4 rounded-xl border border-primary/30 shadow-2xl z-20 pointer-events-none">
+<div class="flex items-center gap-3">
+<div class="w-10 h-10 rounded-full bg-primary/20 flex items-center justify-center border border-primary/50">
+<span class="material-symbols-outlined text-primary" data-weight="fill">bubble_chart</span>
+</div>
+<div>
+<div class="text-[10px] font-label text-secondary font-bold uppercase tracking-widest">Node ID: 492</div>
+<div class="text-sm font-headline font-bold text-on-surface">Momentum: 0.84</div>
+</div>
+</div>
+</div>
+</section>
+</main>
+<!-- Footer Area (Condensed for Playground) -->
+<footer class="fixed bottom-0 left-0 right-0 z-50 bg-[#090e1c] border-t border-[#434759]/15">
+<div class="flex justify-between items-center h-10 px-6 max-w-7xl mx-auto">
+<div class="flex gap-4">
+<span class="font-label text-[10px] text-[#e1e4fa]/60 tracking-widest uppercase">FPS: 60.2</span>
+<span class="font-label text-[10px] text-[#e1e4fa]/60 tracking-widest uppercase">Nodes: 150</span>
+<span class="font-label text-[10px] text-[#e1e4fa]/60 tracking-widest uppercase">Heap: 12.4MB</span>
+</div>
+<div class="flex gap-6 items-center">
+<a class="text-[10px] font-label uppercase text-[#e1e4fa]/60 hover:text-[#dd8bfb] transition-colors" href="#">v2.4.0-alpha</a>
+<a class="text-[10px] font-label uppercase text-[#e1e4fa]/60 hover:text-[#dd8bfb] transition-colors" href="#">Report Issue</a>
+</div>
+</div>
+</footer>
+</body></html>

package/docs/temp/playground_mobile.html ADDED Viewed

@@ -0,0 +1,236 @@
+<!DOCTYPE html>
+<html class="dark" lang="en"><head>
+<meta charset="utf-8"/>
+<meta content="width=device-width, initial-scale=1.0" name="viewport"/>
+<title>Luminous Orbit | Interactive Playground</title>
+<script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script>
+<link href="https://fonts.googleapis.com/css2?family=Manrope:wght@400;700;800&amp;family=Inter:wght@400;500;600&amp;family=Space+Grotesk:wght@400;700&amp;display=swap" rel="stylesheet"/>
+<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;display=swap" rel="stylesheet"/>
+<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&amp;display=swap" rel="stylesheet"/>
+<script id="tailwind-config">
+      tailwind.config = {
+        darkMode: "class",
+        theme: {
+          extend: {
+            colors: {
+              "tertiary": "#a6ffb5",
+              "surface-container": "#13192b",
+              "on-background": "#e1e4fa",
+              "primary-dim": "#00c3ed",
+              "surface-container-highest": "#1e253b",
+              "on-secondary-fixed-variant": "#792c97",
+              "on-error-container": "#ffa8a3",
+              "secondary": "#dd8bfb",
+              "primary-container": "#00d2ff",
+              "outline-variant": "#434759",
+              "on-surface-variant": "#a6aabf",
+              "surface": "#090e1c",
+              "primary-fixed": "#00d2ff",
+              "inverse-surface": "#faf8ff",
+              "on-primary-fixed": "#002c38",
+              "secondary-container": "#6e208c",
+              "on-primary-container": "#004253",
+              "on-secondary-container": "#f1bfff",
+              "on-primary": "#004c5e",
+              "background": "#090e1c",
+              "on-tertiary-container": "#005b29",
+              "tertiary-fixed": "#49fb87",
+              "error-container": "#9f0519",
+              "secondary-dim": "#ce7eec",
+              "surface-container-high": "#181f33",
+              "inverse-on-surface": "#505466",
+              "error-dim": "#d7383b",
+              "tertiary-fixed-dim": "#33ec7b",
+              "tertiary-container": "#49fb87",
+              "on-surface": "#e1e4fa",
+              "on-tertiary": "#00652e",
+              "outline": "#707588",
+              "primary": "#72dcff",
+              "on-tertiary-fixed-variant": "#00662e",
+              "on-primary-fixed-variant": "#004c5e",
+              "secondary-fixed-dim": "#ebadff",
+              "secondary-fixed": "#f2c1ff",
+              "on-error": "#490006",
+              "error": "#ff716c",
+              "on-secondary-fixed": "#580078",
+              "surface-container-low": "#0d1323",
+              "surface-tint": "#72dcff",
+              "surface-variant": "#1e253b",
+              "surface-container-lowest": "#000000",
+              "on-tertiary-fixed": "#00461e",
+              "primary-fixed-dim": "#00c3ed",
+              "inverse-primary": "#00687f",
+              "surface-bright": "#242b43",
+              "tertiary-dim": "#33ec7b",
+              "surface-dim": "#090e1c",
+              "on-secondary": "#4c0068"
+            },
+            fontFamily: {
+              "headline": ["Manrope"],
+              "body": ["Inter"],
+              "label": ["Space Grotesk"]
+            },
+            borderRadius: {"DEFAULT": "0.25rem", "lg": "0.5rem", "xl": "0.75rem", "full": "9999px"},
+          },
+        },
+      }
+    </script>
+<style>
+        .material-symbols-outlined {
+            font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
+        }
+        body {
+            background-color: #090e1c;
+            color: #e1e4fa;
+        }
+        .glass-panel {
+            background: rgba(30, 37, 59, 0.6);
+            backdrop-filter: blur(12px);
+        }
+        .primary-gradient {
+            background: linear-gradient(135deg, #72dcff 0%, #00d2ff 100%);
+        }
+        .no-scrollbar::-webkit-scrollbar {
+            display: none;
+        }
+    </style>
+<style>
+    body {
+      min-height: max(884px, 100dvh);
+    }
+  </style>
+  </head>
+<body class="font-body selection:bg-secondary/30">
+<!-- TopAppBar -->
+<nav class="fixed top-0 w-full z-50 flex justify-between items-center px-6 h-16 bg-[#090e1c] shadow-[0_20px_40px_rgba(0,0,0,0.4)]">
+<div class="flex items-center gap-3">
+<span class="material-symbols-outlined text-[#72dcff]" data-icon="bubble_chart">bubble_chart</span>
+<span class="font-['Manrope'] font-bold tracking-tight text-xl font-black text-[#72dcff] tracking-tighter uppercase">Luminous Orbit</span>
+</div>
+<button class="text-[#e1e4fa]/60 hover:bg-[#72dcff]/10 hover:backdrop-blur-md transition-all active:scale-95 p-2 rounded-xl">
+<span class="material-symbols-outlined" data-icon="settings">settings</span>
+</button>
+</nav>
+<main class="pt-16 pb-32 px-4 flex flex-col gap-6">
+<!-- Live Chart Preview (Signature Component) -->
+<section class="mt-4">
+<div class="flex items-center justify-between mb-3 px-2">
+<span class="font-label text-[10px] uppercase tracking-widest text-secondary font-bold">Live Rendering Preview</span>
+<span class="flex items-center gap-1.5 text-[10px] text-tertiary">
+<span class="w-1.5 h-1.5 rounded-full bg-tertiary shadow-[0_0_8px_#a6ffb5]"></span>
+                    STABLE 60FPS
+                </span>
+</div>
+<div class="relative w-full aspect-square rounded-2xl overflow-hidden bg-surface-container-low shadow-2xl group">
+<div class="absolute inset-0 opacity-20 pointer-events-none" style="background-image: radial-gradient(circle at 2px 2px, #707588 1px, transparent 0); background-size: 24px 24px;"></div>
+<!-- Abstract Bubble Chart Visualization -->
+<div class="absolute inset-0 flex items-center justify-center p-8">
+<div class="relative w-full h-full">
+<!-- Simulated Bubbles -->
+<div class="absolute top-[20%] left-[30%] w-24 h-24 rounded-full bg-primary/20 backdrop-blur-md border border-primary/30 flex items-center justify-center shadow-[0_0_30px_rgba(114,220,255,0.2)]">
+<span class="text-[10px] font-label text-primary">ID: 082</span>
+</div>
+<div class="absolute top-[50%] left-[60%] w-32 h-32 rounded-full bg-secondary/20 backdrop-blur-md border border-secondary/30 flex items-center justify-center shadow-[0_0_40px_rgba(221,139,251,0.2)]">
+<span class="text-[10px] font-label text-secondary">ID: 114</span>
+</div>
+<div class="absolute top-[10%] left-[65%] w-16 h-16 rounded-full bg-tertiary/20 backdrop-blur-md border border-tertiary/30 flex items-center justify-center shadow-[0_0_20px_rgba(166,255,181,0.2)]">
+</div>
+<div class="absolute top-[70%] left-[15%] w-20 h-20 rounded-full bg-primary/10 backdrop-blur-sm border border-primary/20"></div>
+</div>
+</div>
+<div class="absolute bottom-4 left-4 glass-panel px-3 py-1.5 rounded-lg border border-outline-variant/15">
+<span class="font-label text-[10px] text-on-surface-variant uppercase tracking-tighter">Current: <span class="text-on-surface">Canvas-2D</span></span>
+</div>
+</div>
+</section>
+<!-- Simulation Controls Panel -->
+<section class="bg-surface-container-high rounded-2xl p-5 shadow-lg">
+<div class="flex items-center gap-2 mb-6">
+<span class="material-symbols-outlined text-primary text-xl" data-icon="tune">tune</span>
+<h2 class="font-headline text-lg font-bold">Simulation Controls</h2>
+</div>
+<div class="space-y-6">
+<!-- Segmented Control -->
+<div>
+<label class="font-label text-[10px] text-on-surface-variant uppercase tracking-widest block mb-3">Renderer Engine</label>
+<div class="flex p-1 bg-surface-container-highest rounded-xl border border-outline-variant/10">
+<button class="flex-1 py-2 text-sm font-medium rounded-lg bg-primary-container text-on-primary-container transition-all">SVG</button>
+<button class="flex-1 py-2 text-sm font-medium rounded-lg text-on-surface-variant hover:text-on-surface transition-all">Canvas</button>
+</div>
+</div>
+<!-- Bubble Count Slider -->
+<div>
+<div class="flex justify-between items-center mb-2">
+<label class="font-label text-[10px] text-on-surface-variant uppercase tracking-widest">Bubble Density</label>
+<span class="text-sm font-bold text-primary">124</span>
+</div>
+<input class="w-full h-1.5 bg-surface-container-highest rounded-full appearance-none accent-primary cursor-pointer" type="range"/>
+</div>
+<!-- Physics Toggle -->
+<div class="flex items-center justify-between py-2">
+<div>
+<span class="text-sm font-semibold block">Enable Global Physics</span>
+<span class="text-[11px] text-on-surface-variant">Collisions &amp; gravitational pull</span>
+</div>
+<button class="w-12 h-6 rounded-full bg-tertiary-container relative transition-colors">
+<span class="absolute right-1 top-1 w-4 h-4 bg-on-tertiary rounded-full"></span>
+</button>
+</div>
+</div>
+</section>
+<!-- Config Editor Section -->
+<section>
+<div class="flex items-center justify-between mb-3 px-2">
+<div class="flex items-center gap-2">
+<span class="material-symbols-outlined text-secondary text-xl" data-icon="code">code</span>
+<h2 class="font-headline text-lg font-bold">Config Editor</h2>
+</div>
+<button class="text-primary text-xs font-label uppercase tracking-wider flex items-center gap-1">
+                    Expand
+                    <span class="material-symbols-outlined text-sm" data-icon="unfold_more">unfold_more</span>
+</button>
+</div>
+<div class="bg-surface-container-lowest rounded-2xl border border-outline-variant/10 overflow-hidden font-mono text-[13px] leading-relaxed p-4 shadow-2xl">
+<div class="flex gap-4">
+<div class="text-outline-variant select-none">
+                        1<br/>2<br/>3<br/>4<br/>5<br/>6<br/>7
+                    </div>
+<div class="text-on-surface-variant no-scrollbar overflow-x-auto whitespace-nowrap">
+<span class="text-secondary">const</span> <span class="text-primary">config</span> = {<br/>
+                          <span class="text-tertiary">engine</span>: <span class="text-on-secondary-container">'canvas'</span>,<br/>
+                          <span class="text-tertiary">repulsion</span>: <span class="text-secondary">0.45</span>,<br/>
+                          <span class="text-tertiary">gravity</span>: <span class="text-secondary">0.02</span>,<br/>
+                          <span class="text-tertiary">blur</span>: <span class="text-primary">true</span>,<br/>
+                          <span class="text-tertiary">theme</span>: <span class="text-on-secondary-container">'neon'</span><br/>
+                        };
+                    </div>
+</div>
+</div>
+</section>
+</main>
+<!-- Floating Action Button: Export Implementation -->
+<button class="fixed bottom-24 right-6 primary-gradient p-4 rounded-2xl shadow-[0_10px_30px_rgba(0,210,255,0.4)] flex items-center justify-center text-on-primary-fixed hover:scale-105 active:scale-95 transition-transform z-50">
+<span class="material-symbols-outlined mr-2" data-icon="download">download</span>
+<span class="font-bold text-sm">Export Code</span>
+</button>
+<!-- BottomNavBar -->
+<nav class="fixed bottom-0 w-full z-50 flex justify-around items-center px-4 pb-6 pt-2 bg-[#1e253b]/60 backdrop-blur-xl shadow-[0_-10px_30px_rgba(0,0,0,0.3)] rounded-t-2xl">
+<a class="flex flex-col items-center justify-center text-[#e1e4fa]/50 hover:text-[#dd8bfb] transition-colors active:scale-90 duration-150" href="#">
+<span class="material-symbols-outlined" data-icon="visibility">visibility</span>
+<span class="font-['Space_Grotesk'] text-[10px] uppercase tracking-widest mt-1">Preview</span>
+</a>
+<a class="flex flex-col items-center justify-center text-[#72dcff] bg-[#72dcff]/10 rounded-xl py-1 px-3 active:scale-90 duration-150" href="#">
+<span class="material-symbols-outlined" data-icon="tune">tune</span>
+<span class="font-['Space_Grotesk'] text-[10px] uppercase tracking-widest mt-1">Simulate</span>
+</a>
+<a class="flex flex-col items-center justify-center text-[#e1e4fa]/50 hover:text-[#dd8bfb] transition-colors active:scale-90 duration-150" href="#">
+<span class="material-symbols-outlined" data-icon="code">code</span>
+<span class="font-['Space_Grotesk'] text-[10px] uppercase tracking-widest mt-1">Editor</span>
+</a>
+<a class="flex flex-col items-center justify-center text-[#e1e4fa]/50 hover:text-[#dd8bfb] transition-colors active:scale-90 duration-150" href="#">
+<span class="material-symbols-outlined" data-icon="menu_book">menu_book</span>
+<span class="font-['Space_Grotesk'] text-[10px] uppercase tracking-widest mt-1">Docs</span>
+</a>
+</nav>
+</body></html>