gitmaps 1.0.0

package/cli.ts

@@ -0,0 +1,44 @@
+#!/usr/bin/env bun
+/**
+ * gitmaps CLI — run GitMaps locally on any repository
+ * Usage: npx gitmaps [path] [--port 3335]
+ */
+
+const args = process.argv.slice(2);
+let repoPath = process.cwd();
+let port = 3335;
+
+for (let i = 0; i < args.length; i++) {
+    if (args[i] === '--port' && args[i + 1]) {
+        port = parseInt(args[i + 1]);
+        i++;
+    } else if (args[i] === '--help' || args[i] === '-h') {
+        console.log(`
+🪐 GitMaps — Spatial Code Explorer
+
+Usage:
+  npx gitmaps                  # Open current directory
+  npx gitmaps /path/to/repo    # Open specific repo
+  npx gitmaps --port 4000      # Custom port
+
+Options:
+  --port <number>    Port to run on (default: 3335)
+  --help, -h         Show this help
+`);
+        process.exit(0);
+    } else if (!args[i].startsWith('-')) {
+        repoPath = args[i];
+    }
+}
+
+process.env.BUN_PORT = String(port);
+process.env.GITMAPS_REPO = repoPath;
+
+console.log(`🪐 GitMaps starting...`);
+console.log(`   Repo: ${repoPath}`);
+console.log(`   Port: ${port}`);
+console.log(`   URL:  http://localhost:${port}`);
+console.log();
+
+// Import and run the server
+import('./server.ts');

package/package.json

@@ -0,0 +1,75 @@
+{
+  "name": "gitmaps",
+  "version": "1.0.0",
+  "type": "module",
+  "bin": {
+    "gitmaps": "cli.ts"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/7flash/git-on-canvas"
+  },
+  "homepage": "https://gitmaps.xyz",
+  "workspaces": [
+    "packages/*"
+  ],
+  "scripts": {
+    "dev": "bun run server.ts",
+    "start": "bun run server.ts",
+    "test": "bun test app/lib/galaxydraw.test.ts packages/galaxydraw/perf.test.ts",
+    "prepublishOnly": "echo 'Publishing gitmaps to npm'"
+  },
+  "keywords": [
+    "git",
+    "canvas",
+    "visualization",
+    "code-review",
+    "spatial",
+    "infinite-canvas",
+    "diff",
+    "repository",
+    "minimap",
+    "codemirror"
+  ],
+  "author": "mements",
+  "license": "ISC",
+  "description": "Spatial code explorer — see every file at once on an infinite canvas with diffs, layers, and time-travel",
+  "files": [
+    "cli.ts",
+    "server.ts",
+    "app/",
+    "packages/galaxydraw/",
+    "README.md",
+    "banner.png"
+  ],
+  "dependencies": {
+    "@codemirror/autocomplete": "^6.20.1",
+    "@codemirror/commands": "^6.10.2",
+    "@codemirror/lang-css": "^6.3.1",
+    "@codemirror/lang-html": "^6.4.11",
+    "@codemirror/lang-javascript": "^6.2.5",
+    "@codemirror/lang-json": "^6.0.2",
+    "@codemirror/lang-markdown": "^6.5.0",
+    "@codemirror/lang-python": "^6.2.1",
+    "@codemirror/lang-yaml": "^6.1.2",
+    "@codemirror/language": "^6.12.2",
+    "@codemirror/lint": "^6.9.5",
+    "@codemirror/search": "^6.6.0",
+    "@codemirror/state": "^6.5.4",
+    "@codemirror/view": "^6.39.16",
+    "@lezer/highlight": "^1.2.3",
+    "galaxydraw": "0.2.0",
+    "jsx-ai": "0.1.2",
+    "measure-fn": "3.10.1",
+    "melina": "^2.5.0",
+    "simple-git": "^3.30.0",
+    "sqlite-zod-orm": "^3.26.0",
+    "xstate": "^5.26.0"
+  },
+  "devDependencies": {
+    "@types/bun": "^1.3.10"
+  },
+  "overrides": {
+    "measure-fn": "3.10.1"
+  }
+}

package/packages/galaxydraw/README.md

@@ -0,0 +1,296 @@
+<p align="center">
+  <img src="banner.png" alt="galaxydraw" width="100%" />
+</p>
+
+<p align="center">
+  <b>Infinite canvas framework for spatial applications. Zero dependencies, ~31KB.</b>
+</p>
+
+<p align="center">
+  <a href="https://7flash.github.io/git-on-canvas/"><img src="https://img.shields.io/badge/🌌_Live_Demo-galaxydraw-9382ff?style=flat-square" alt="Live Demo"></a>
+  <a href="https://www.npmjs.com/package/galaxydraw"><img src="https://img.shields.io/npm/v/galaxydraw.svg?style=flat-square" alt="npm version"></a>
+  <a href="https://www.npmjs.com/package/galaxydraw"><img src="https://img.shields.io/npm/dm/galaxydraw.svg?style=flat-square" alt="npm downloads"></a>
+  <a href="LICENSE"><img src="https://img.shields.io/badge/license-MIT-green.svg?style=flat-square" alt="License"></a>
+</p>
+
+---
+
+**Before** — 760 lines of custom pan/zoom/drag/touch/minimap/resize code per project:
+
+```ts
+let state = { zoom: 1, offsetX: 0, offsetY: 0 };
+viewport.addEventListener('wheel', (e) => {
+    e.preventDefault();
+    const zoomFactor = e.deltaY < 0 ? 1.08 : 1 / 1.08;
+    const newZoom = Math.max(0.15, Math.min(3, state.zoom * zoomFactor));
+    const rect = viewport.getBoundingClientRect();
+    const mouseX = e.clientX - rect.left;
+    const mouseY = e.clientY - rect.top;
+    const worldX = (mouseX - state.offsetX) / state.zoom;
+    const worldY = (mouseY - state.offsetY) / state.zoom;
+    state.zoom = newZoom;
+    state.offsetX = mouseX - worldX * newZoom;
+    state.offsetY = mouseY - worldY * newZoom;
+    content.style.transform = `translate(${state.offsetX}px,${state.offsetY}px) scale(${state.zoom})`;
+});
+// + 700 more lines for mouse pan, touch, drag, resize, minimap, z-order...
+```
+
+**After** — galaxydraw handles all of it:
+
+```ts
+import { GalaxyDraw } from 'galaxydraw';
+
+const gd = new GalaxyDraw(document.getElementById('app'), { mode: 'simple' });
+// → Pan, zoom, touch, keyboard shortcuts — all working.
+// → Cards, viewport culling, minimap — opt-in via plugins.
+```
+
+## Installation
+
+```sh
+bun add galaxydraw
+# or: npm install galaxydraw
+```
+
+For local development across repos, use a `file:` dependency:
+
+```json
+"galaxydraw": "file:../galaxy-canvas/packages/galaxydraw"
+```
+
+## ✨ What You Get
+
+Every `new GalaxyDraw()` automatically:
+
+- 🖱️ **Mouse pan/zoom** → wheel zoom toward cursor, click-drag pan
+- 📱 **Touch support** → single-finger pan, pinch-to-zoom (native, no libraries)
+- ⌨️ **Keyboard** → Space+drag pan (advanced mode), input element passthrough
+- 🃏 **Card system** → drag, resize, z-order, selection via plugins
+- 🔍 **Viewport culling** → only visible cards stay in DOM, deferred lazy-creation
+- 🗺️ **Minimap** → optional overview with click-to-navigate
+- 📐 **Layout persistence** → save/restore positions (localStorage or custom)
+- 🎛️ **Dual control modes** → Simple (dashboard-style) or Advanced (design-tool-style)
+- 🔌 **Plugin architecture** → custom card types with event passthrough
+
+## ⚙️ Constructor Options
+
+```ts
+const gd = new GalaxyDraw(containerEl, {
+    mode: 'simple',     // or 'advanced'
+    minimap: true,       // render overview panel
+    cullMargin: 200,     // px beyond viewport to keep cards alive
+    className: 'my-canvas', // custom CSS class on root
+    cards: {
+        defaultWidth: 400,
+        defaultHeight: 300,
+        minWidth: 200,
+        minHeight: 150,
+        gridSize: 20,    // snap-to-grid resolution (0 = off)
+        cornerSize: 40,  // resize handle hit area
+    },
+});
+```
+
+| Option | Type | Default | Description |
+|--------|------|---------|-------------|
+| `mode` | `'simple' \| 'advanced'` | `'simple'` | Control scheme |
+| `minimap` | `boolean` | `false` | Render overview panel |
+| `cullMargin` | `number` | `200` | Viewport buffer in px |
+| `className` | `string` | — | Custom root CSS class |
+| `cards.defaultWidth` | `number` | `400` | Initial card width |
+| `cards.defaultHeight` | `number` | `300` | Initial card height |
+| `cards.minWidth` | `number` | `200` | Minimum resize width |
+| `cards.minHeight` | `number` | `150` | Minimum resize height |
+| `cards.gridSize` | `number` | `0` | Shift+drag snap grid (0 = off) |
+| `cards.cornerSize` | `number` | `40` | Resize handle hit area |
+
+## 🎛️ Control Modes
+
+| Mode | Left-click on canvas | Left-click on card | Space+drag |
+|------|---------------------|--------------------|------------|
+| `simple` | Pan | — | Pan |
+| `advanced` | — | Select | Pan |
+
+```ts
+gd.setMode('advanced');
+console.log(gd.getMode()); // → 'advanced'
+```
+
+## 🔌 Card Plugins
+
+Cards are rendered by plugins. Each plugin handles one card type:
+
+```ts
+import { GalaxyDraw } from 'galaxydraw';
+import type { CardPlugin, CardData } from 'galaxydraw';
+
+const widgetPlugin: CardPlugin = {
+    type: 'widget',
+
+    render(data: CardData): HTMLElement {
+        const el = document.createElement('div');
+        el.innerHTML = `
+            <div class="gd-card-header">${data.meta?.title || 'Widget'}</div>
+            <div class="gd-card-body">Content here</div>
+        `;
+        return el;
+    },
+
+    // Optional: claim mouse/wheel events for interactive content
+    consumesWheel(target) {
+        return !!target.closest('.maplibregl-map');
+    },
+    consumesMouse(target) {
+        return !!target.closest('.maplibregl-map');
+    },
+
+    onResize(el, w, h) { /* handle resize */ },
+    onDestroy(el) { /* cleanup */ },
+};
+
+const gd = new GalaxyDraw(containerEl, { mode: 'simple' });
+gd.registerPlugin(widgetPlugin);
+```
+
+### CardPlugin Interface
+
+| Method | Required | Description |
+|--------|----------|-------------|
+| `type` | Yes | Unique string identifier |
+| `render(data)` | Yes | Returns the card's DOM element |
+| `consumesWheel(target)` | No | Return `true` to let the card handle wheel events (e.g., maps) |
+| `consumesMouse(target)` | No | Return `true` to let the card handle mouse events |
+| `onResize(el, w, h)` | No | Called after card resize |
+| `onDestroy(el)` | No | Cleanup callback |
+
+### Creating Cards
+
+```ts
+// Immediate creation (visible cards)
+const el = gd.cards.create('widget', {
+    id: 'w1', x: 100, y: 100,
+    meta: { title: 'Map' },
+});
+// → HTMLElement appended to canvas at (100, 100)
+
+// Deferred creation (off-screen cards, lazy-materialized on scroll)
+gd.cards.defer('widget', {
+    id: 'w2', x: 3000, y: 3000, width: 400, height: 300,
+    meta: { title: 'Far Away' },
+});
+// → Stored in memory, created when user scrolls near (3000, 3000)
+
+// Remove
+gd.cards.remove('w1');
+// → Calls onDestroy, removes from DOM
+
+// Clear all
+gd.cards.clear();
+```
+
+## 📡 Event Bus
+
+Subscribe to card and engine events:
+
+```ts
+gd.bus.on('card:move', ({ id, x, y }) => {
+    console.log(`Card ${id} moved to (${x}, ${y})`);
+    // → "Card w1 moved to (250, 180)"
+});
+
+gd.bus.on('card:resize', ({ id, width, height }) => {
+    console.log(`Card ${id} resized: ${width}x${height}`);
+    // → "Card w1 resized: 500x400"
+});
+
+gd.bus.on('card:select', ({ ids }) => {
+    console.log(`Selected: ${ids.join(', ')}`);
+    // → "Selected: w1, w2"
+});
+
+gd.bus.on('card:collapse', ({ id, collapsed }) => {
+    console.log(`Card ${id} ${collapsed ? 'collapsed' : 'expanded'}`);
+});
+
+gd.bus.on('mode:change', ({ mode }) => {
+    console.log(`Switched to ${mode} mode`);
+});
+```
+
+| Event | Payload | When |
+|-------|---------|------|
+| `card:create` | `{ id, x, y }` | Card added to canvas |
+| `card:move` | `{ id, x, y }` | Card drag ended |
+| `card:resize` | `{ id, width, height }` | Card resize ended |
+| `card:select` | `{ ids: string[] }` | Selection changed |
+| `card:deselect` | `{ ids: string[] }` | Cards deselected |
+| `card:collapse` | `{ id, collapsed }` | Collapse toggled |
+| `card:remove` | `{ id }` | Card removed |
+| `mode:change` | `{ mode }` | Control mode switched |
+
+## 🧭 Canvas State
+
+Direct access to pan/zoom state:
+
+```ts
+// Read current state
+const { zoom, offsetX, offsetY } = gd.state.getSnapshot();
+// → { zoom: 1.2, offsetX: -340, offsetY: -120 }
+
+// Programmatic control
+gd.state.set(1.5, -200, -100);       // set zoom, offsetX, offsetY
+gd.state.zoomToward(400, 300, 1.2);  // zoom toward screen point
+gd.state.pan(50, 0);                 // delta pan
+
+// Subscribe to changes
+const unsub = gd.state.subscribe(() => {
+    console.log('Zoom:', gd.state.zoom); // → "Zoom: 1.5"
+});
+
+// Coordinate conversion
+const worldPt = gd.state.screenToWorld(e.clientX, e.clientY);
+// → { x: 842, y: 316 }
+
+// Fit all content into view
+gd.fitAll(60); // 60px padding
+```
+
+## 🏗️ Architecture
+
+```
+src/
+├── index.ts           # Package entry — re-exports everything
+└── core/
+    ├── engine.ts      # GalaxyDraw class (337 lines)
+    ├── state.ts       # CanvasState — zoom/offset/transform
+    ├── cards.ts       # CardManager — create/defer/drag/resize/z-order
+    ├── viewport.ts    # ViewportCuller — show/hide by visibility
+    ├── events.ts      # EventBus — typed pub/sub
+    ├── layout.ts      # LayoutManager — save/restore positions
+    └── minimap.ts     # Minimap — overview with click navigation
+```
+
+Total: ~1,200 lines of engine code. Zero dependencies.
+
+## 🚀 Used By
+
+- **[GitMaps](https://github.com/7flash/git-on-canvas)** — Repository visualization on an infinite canvas. Uses `advanced` mode with FileCardPlugin + DiffCardPlugin. Renders 6,800+ file cards with viewport culling (~35ms).
+- **[WARMAPS](https://github.com/7flash/starwar)** — Real-time geopolitical intelligence dashboard. Uses `simple` mode with WarmapsContainerPlugin for MapLibre/WebSocket feed passthrough.
+
+## 🧪 Testing
+
+24 unit tests covering the core engine:
+
+```sh
+bun test
+```
+
+| Suite | Tests | Coverage |
+|-------|-------|----------|
+| CanvasState | 14 | zoom, pan, clamp, screenToWorld, subscribe, fitAll |
+| EventBus | 10 | on/off, emit, multi-listener, wildcard, once |
+
+## License
+
+MIT

package/packages/galaxydraw/demo/build-static.ts

@@ -0,0 +1,100 @@
+/**
+ * Build a standalone static index.html demo for GitHub Pages
+ */
+const css = await Bun.file(import.meta.dir + '/../src/galaxydraw.css').text();
+
+// Bundle the client code
+const buildResult = await Bun.build({
+    entrypoints: [import.meta.dir + '/client.ts'],
+    target: 'browser',
+    format: 'esm',
+    minify: true,
+});
+const js = await buildResult.outputs[0].text();
+
+const html = `<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>galaxydraw — Interactive Demo</title>
+    <meta name="description" content="Interactive demo of galaxydraw, a zero-dependency infinite canvas framework for spatial applications.">
+    <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>">
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
+    <style>
+        * { margin: 0; padding: 0; box-sizing: border-box; }
+        html, body { width: 100%; height: 100%; background: #060812; color: #e4e4e7; font-family: 'Inter', sans-serif; overflow: hidden; }
+        #app { width: 100vw; height: 100vh; }
+
+        .demo-toolbar {
+            position: fixed;
+            top: 16px;
+            left: 50%;
+            transform: translateX(-50%);
+            z-index: 1000;
+            display: flex;
+            gap: 8px;
+            padding: 8px 16px;
+            border-radius: 12px;
+            background: rgba(13, 15, 28, 0.85);
+            backdrop-filter: blur(16px);
+            border: 1px solid rgba(255, 255, 255, 0.08);
+        }
+
+        .demo-toolbar button {
+            padding: 6px 14px;
+            border-radius: 8px;
+            border: 1px solid rgba(255, 255, 255, 0.08);
+            background: transparent;
+            color: rgba(255, 255, 255, 0.7);
+            cursor: pointer;
+            font-size: 12px;
+            font-family: 'Inter', sans-serif;
+            font-weight: 500;
+            transition: all 0.15s ease;
+        }
+
+        .demo-toolbar button:hover {
+            background: rgba(147, 130, 255, 0.15);
+            border-color: rgba(147, 130, 255, 0.3);
+            color: #fff;
+        }
+
+        .demo-toolbar button.active {
+            background: rgba(147, 130, 255, 0.2);
+            border-color: rgba(147, 130, 255, 0.4);
+            color: #fff;
+        }
+
+        .demo-toolbar .mode-label {
+            font-size: 11px;
+            color: rgba(255, 255, 255, 0.4);
+            display: flex;
+            align-items: center;
+            padding: 0 8px;
+        }
+
+        /* Responsive toolbar */
+        @media (max-width: 640px) {
+            .demo-toolbar {
+                flex-wrap: wrap;
+                max-width: 90vw;
+                justify-content: center;
+            }
+            .demo-toolbar button {
+                font-size: 11px;
+                padding: 5px 10px;
+            }
+        }
+
+        ${css}
+    </style>
+</head>
+<body>
+    <div id="app"></div>
+    <script type="module">${js}</script>
+</body>
+</html>`;
+
+await Bun.write(import.meta.dir + '/index.html', html);
+console.log(`✓ demo/index.html created (${(html.length / 1024).toFixed(1)}KB)`);

package/packages/galaxydraw/demo/client.ts

@@ -0,0 +1,154 @@
+/**
+ * galaxydraw demo — client entry point
+ */
+import { GalaxyDraw } from '../src/core/engine';
+import type { CardPlugin } from '../src/core/cards';
+
+// ─── Text card plugin ─────────────────────────────────────
+const TextCardPlugin: CardPlugin = {
+    type: 'text',
+    render(data) {
+        const card = document.createElement('div');
+        const header = document.createElement('div');
+        header.className = 'gd-card-header';
+        header.innerHTML = `<span class="title">${data.meta?.title || data.id}</span>`;
+
+        const body = document.createElement('div');
+        body.className = 'gd-card-body';
+        body.style.cssText = 'padding:12px; font-size:13px; color:rgba(255,255,255,0.6); line-height:1.6;';
+        body.innerHTML = data.meta?.content || 'Drag by the header, resize from the corner.';
+
+        card.appendChild(header);
+        card.appendChild(body);
+        return card;
+    }
+};
+
+// ─── Note card plugin ─────────────────────────────────────
+const NoteCardPlugin: CardPlugin = {
+    type: 'note',
+    render(data) {
+        const colors = ['#22c55e', '#eab308', '#ef4444', '#3b82f6', '#a855f7'];
+        const color = colors[Math.floor(Math.random() * colors.length)];
+        const card = document.createElement('div');
+
+        const header = document.createElement('div');
+        header.className = 'gd-card-header';
+        header.style.borderLeft = `3px solid ${color}`;
+        header.innerHTML = `
+            <span class="title">${data.meta?.title || 'Note'}</span>
+            <span style="font-size:10px; color:${color}; text-transform:uppercase; letter-spacing:0.05em;">Note</span>
+        `;
+
+        const body = document.createElement('div');
+        body.className = 'gd-card-body';
+        body.style.padding = '16px';
+        body.innerHTML = `
+            <div contenteditable="true" style="font-size:13px; color:rgba(255,255,255,0.7); outline:none; min-height:60px; line-height:1.6;">
+                ${data.meta?.text || 'Click to edit...'}
+            </div>
+        `;
+
+        card.appendChild(header);
+        card.appendChild(body);
+        return card;
+    },
+    consumesMouse(target: HTMLElement) {
+        return target.closest('[contenteditable]') !== null;
+    }
+};
+
+// ─── Init ─────────────────────────────────────────────────
+const container = document.getElementById('app')!;
+const gd = new GalaxyDraw(container, {
+    mode: 'simple',
+    cards: { defaultWidth: 320, defaultHeight: 240 },
+});
+
+gd.registerPlugin(TextCardPlugin);
+gd.registerPlugin(NoteCardPlugin);
+
+// ─── Create demo cards ────────────────────────────────────
+const items = [
+    {
+        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 (const c of items) {
+    gd.cards.create(c.type, c);
+}
+
+// ─── Toolbar ──────────────────────────────────────────────
+const toolbar = document.createElement('div');
+toolbar.className = 'demo-toolbar';
+
+const label = document.createElement('span');
+label.className = 'mode-label';
+label.textContent = 'Mode:';
+toolbar.appendChild(label);
+
+const btnSimple = document.createElement('button');
+btnSimple.textContent = 'Simple (WARMAPS)';
+btnSimple.className = 'active';
+btnSimple.id = 'modeSimple';
+toolbar.appendChild(btnSimple);
+
+const btnAdvanced = document.createElement('button');
+btnAdvanced.textContent = 'Advanced (GitMaps)';
+btnAdvanced.id = 'modeAdvanced';
+toolbar.appendChild(btnAdvanced);
+
+const btnAdd = document.createElement('button');
+btnAdd.textContent = '+ Card';
+toolbar.appendChild(btnAdd);
+
+const btnFit = document.createElement('button');
+btnFit.textContent = 'Fit All';
+toolbar.appendChild(btnFit);
+
+document.body.appendChild(toolbar);
+
+btnSimple.onclick = () => {
+    gd.setMode('simple');
+    btnSimple.classList.add('active');
+    btnAdvanced.classList.remove('active');
+};
+
+btnAdvanced.onclick = () => {
+    gd.setMode('advanced');
+    btnAdvanced.classList.add('active');
+    btnSimple.classList.remove('active');
+};
+
+btnAdd.onclick = () => {
+    const id = 'card-' + Date.now();
+    gd.cards.create('note', {
+        id, x: 200 + Math.random() * 600, y: 200 + Math.random() * 400,
+        width: 260, height: 180,
+        meta: { title: 'New Note', text: 'Click to edit...' }
+    });
+};
+
+btnFit.onclick = () => gd.fitAll();
+
+// Global debug access
+(window as any).gd = gd;