feat: ECharts chart system with 11 gallery templates + Spaces feature

Charts:
- New {{Chart:}} DocGen tag — 7 declarative types + raw ECharts JS code mode
- chart-docgen.js (~720 lines): parser, builder, transformer, DOM binding
- chart-docgen.css + echarts.css: card layout, dark mode styling
- ECharts lazy-loaded from CDN via window.getECharts()
- 📊 Chart toolbar button, composer chip, mobile integration
- 11 gallery templates: Line, Bar, Pie, Scatter, Sunburst, Treemap, Advanced, Sankey, Parallel, Graph (~4,200 lines)
- New Charts template category with bi-bar-chart-line icon

Spaces:
- Personal document hub with email-based ownership + access key recovery
- space-manager.js (~760 lines): CRUD, Firestore sync, hub rendering
- spaces.css (~540 lines): glassmorphic modal UI, dark mode
- Firestore /spaces/{spaceId} rules: field validation, write-token, 50-item limit
- Spaces modal (create/recover/manage), share integration, #space=<slug> routing

Author: ijbo

README.md

@@ -538,6 +538,8 @@ TextAgent has undergone significant evolution since its inception. What started
 
 | Date | Commits | Feature / Update |
 |------|---------|-----------------:|
+| **2026-03-27** | | 📊 **ECharts Chart System** — new `{{Chart:}}` DocGen tag with 7 declarative chart types (bar, line, pie, scatter, radar, gauge, heatmap) and raw ECharts JS code mode; `chart-docgen.js` (~720 lines) parser/builder/transformer; `chart-docgen.css` + `echarts.css` styling; lazy-loaded ECharts CDN via `window.getECharts()`; 📊 Chart toolbar button, composer chip, mobile integration; 11 chart gallery templates (Line, Bar, Pie, Scatter, Sunburst, Treemap, Advanced, Sankey, Parallel, Graph) with ~4,200 lines of copy-paste-ready examples; new Charts template category |
+| **2026-03-27** | | 📂 **Spaces** — personal document hub with email-based ownership and access key recovery; `space-manager.js` (~760 lines) CRUD, Firestore sync, hub rendering; `spaces.css` (~540 lines) glassmorphic modal UI; Spaces modal with create/recover/manage views; "Add to Space" picker in share modal; `#space=<slug>` URL routing; Firestore `/spaces/{spaceId}` collection rules with field validation, write-token ownership, 50-item limit |
 | **2026-03-27** | | 📊 **Chart Bug Fixes** — fixed 6 bugs in `{{Chart:}}` DocGen: ECharts memory leak (old instances never disposed on re-render), `@code` brace-depth tracker desyncing on braces inside strings/comments, `stripTypeScript` regex mangling valid JS object values, fragile `- 2` insert offset in Add Series, confusing area-style default logic, and block index desync from re-parsing `fullMatch` substrings; extracted `parseConfigFromBody()` shared helper; added `M._activeCharts` disposal tracking |
 | **2026-03-26** | | 🔊 **Kokoro TTS Fixes** — patched Kokoro-JS `generate_from_ids` in `tts-worker.js` to manually slice Float32 arrays and explicitly construct `style` and `speed` Tensors, preventing runtime shape errors for non-English voices; added voice file fallback mechanism to automatically fetch from `onnx-community` if the primary `textagent` HuggingFace org is missing the binary |
 | **2026-03-26** | | 🎓 **Quiz DocGen** — new `{{@Quiz:}}` declarative tag for interactive quizzes in markdown; 9 question types (MCQ, True/False, Fill-in-blank, Match, Order, Short, Essay, Likert, Multi-select); dual modes: Practice (Duolingo-style instant feedback) and Test (free navigation, no answers revealed); user info screen with email format validation; gamified HUD (XP, hearts, progress bar, stars); response viewer with NEEDS REVIEW badges, ✅ Correct / ❌ Wrong grade toggle for manual grading, live score recalculation; mobile touch support for match and order drag-drop; 8 quiz templates across 7 domains (Maths, Science, History, English, CS, Geography, Biology); `quiz-docgen.js` (~1100 lines), `quiz-docgen.css` (~690 lines), `form-engine.js` response viewer enhancements |

changelogs/CHANGELOG-charts-and-spaces.md

@@ -0,0 +1,73 @@
+# ECharts Chart System & Spaces Feature
+
+- New `{{Chart:}}` DocGen tag with 7 declarative chart types (bar, line, pie, scatter, radar, gauge, heatmap) and raw ECharts JS code mode
+- Added `chart-docgen.js` (~720 lines) — parser, builder, transformer, and DOM binding for interactive chart cards
+- Added `chart-docgen.css` (~130 lines) — card layout, badges, actions, Add Series dropdown, dark mode
+- Added `echarts.css` (~40 lines) — base container styling for ECharts instances
+- Added ECharts lazy-loader in `vendor-globals.js` (`window.getECharts()` — CDN script injection)
+- Added 📊 Chart toolbar button, composer chip, and mobile toolbar integration in `index.html`
+- New Charts template category (`bi-bar-chart-line` icon) in template modal and template system
+- 11 chart gallery templates: Line, Bar, Pie, Scatter, Sunburst, Treemap, Advanced (Radar/Gauge/Heatmap/Funnel), Sankey, Parallel, Graph — totaling ~4,200 lines of ECharts examples
+- Template loading pipeline updated in `src/main.js` and `js/templates.js` to register all chart galleries
+- New Spaces feature — personal document hub with email-based ownership and access key recovery
+- Added `space-manager.js` (~760 lines) — CRUD, Firestore sync, share integration, hub rendering
+- Added `spaces.css` (~540 lines) — modal UI, cards, glassmorphism, dark mode
+- Firestore rules updated with `/spaces/{spaceId}` collection (create/update/read with field validation, write-token ownership)
+- Spaces modal HTML added to `modal-templates.js` with create/recover/manage views
+- Spaces buttons in header toolbar, mobile menu, and QAB in `index.html`
+- "Add to Space" picker integrated into share result modal
+- Storage key `SPACES` added to `storage-keys.js`
+- Space hub routing via `#space=<slug>` in `cloud-share.js`
+
+---
+
+## Summary
+Two major features: (1) a complete ECharts `{{Chart:}}` DocGen tag system with declarative chart types, raw JS code mode, 11 gallery templates (~4,200 lines of examples), lazy-loaded ECharts CDN, and full toolbar/composer integration; (2) a Spaces feature providing personal document hubs with Firestore-backed ownership, email access key recovery, share integration, and hub rendering.
+
+---
+
+## 1. ECharts Chart DocGen System
+**Files:** `js/chart-docgen.js`, `css/chart-docgen.css`, `css/echarts.css`, `src/vendor-globals.js`, `index.html`, `js/templates.js`, `src/main.js`
+**What:** Full `{{Chart:}}` tag pipeline: parser extracts `@type`, `@xAxis`, `@series`, `@code` fields; builder produces ECharts option JSON; transformer converts tags into interactive preview cards with type badges, title, Add Series dropdown, and remove button. ECharts loaded lazily from CDN via `window.getECharts()`. Toolbar 📊 Chart button, composer chip, and mobile toolbar button wired in `index.html`.
+**Impact:** Users can create interactive ECharts visualizations using simple declarative syntax or raw JS code directly in markdown documents.
+
+## 2. Chart Gallery Templates
+**Files:** `js/templates/charts.js`, `js/templates/charts-line-gallery.js`, `js/templates/charts-bar-gallery.js`, `js/templates/charts-pie-gallery.js`, `js/templates/charts-scatter-gallery.js`, `js/templates/charts-sunburst-gallery.js`, `js/templates/charts-treemap-gallery.js`, `js/templates/charts-advanced-gallery.js`, `js/templates/charts-sankey-gallery.js`, `js/templates/charts-parallel-gallery.js`, `js/templates/charts-graph-gallery.js`
+**What:** 11 template files providing copy-paste-ready chart examples spanning all major ECharts visualization types. Each gallery contains 5-25+ variations (basic, styled, stacked, animated, etc.). New `charts` template category registered in `templates.js` with `bi-bar-chart-line` icon.
+**Impact:** Comprehensive chart template library enables zero-code chart creation for all common chart types.
+
+## 3. Spaces Feature
+**Files:** `js/space-manager.js`, `css/spaces.css`, `js/modal-templates.js`, `js/cloud-share.js`, `js/storage-keys.js`, `firestore.rules`, `index.html`, `src/main.js`
+**What:** Personal document hub system with CRUD operations backed by Firestore. Email-based ownership with access key recovery. Spaces modal with create/recover/manage views. "Add to Space" picker in share modal. Space hub rendering via `#space=<slug>` URL routing. Firestore rules enforce field validation, write-token ownership, 50-item limit, and delete protection.
+**Impact:** Users can organize and share curated collections of documents as browsable "Space" pages.
+
+---
+
+## Files Changed (20 total)
+
+| File | Lines Changed | Type |
+|------|:---:|------|
+| `js/chart-docgen.js` | +720 | New — chart parser/builder/transformer |
+| `css/chart-docgen.css` | +129 | New — chart card styling |
+| `css/echarts.css` | +38 | New — ECharts container base styling |
+| `js/templates/charts.js` | +701 | New — Chart overview templates |
+| `js/templates/charts-line-gallery.js` | +498 | New — Line chart gallery |
+| `js/templates/charts-bar-gallery.js` | +524 | New — Bar chart gallery |
+| `js/templates/charts-pie-gallery.js` | +510 | New — Pie chart gallery |
+| `js/templates/charts-scatter-gallery.js` | +464 | New — Scatter chart gallery |
+| `js/templates/charts-sunburst-gallery.js` | +312 | New — Sunburst chart gallery |
+| `js/templates/charts-treemap-gallery.js` | +314 | New — Treemap chart gallery |
+| `js/templates/charts-advanced-gallery.js` | +355 | New — Advanced chart gallery |
+| `js/templates/charts-sankey-gallery.js` | +267 | New — Sankey chart gallery |
+| `js/templates/charts-parallel-gallery.js` | +153 | New — Parallel chart gallery |
+| `js/templates/charts-graph-gallery.js` | +356 | New — Graph chart gallery |
+| `js/space-manager.js` | +763 | New — Spaces CRUD & rendering |
+| `css/spaces.css` | +544 | New — Spaces modal styling |
+| `index.html` | +16 | Modified — toolbar/chip/modal additions |
+| `js/templates.js` | +15 | Modified — chart gallery registration |
+| `src/main.js` | +21 | Modified — module imports |
+| `src/vendor-globals.js` | +12 | Modified — ECharts lazy-loader |
+| `js/modal-templates.js` | +116 | Modified — Spaces modal + Charts category |
+| `js/cloud-share.js` | +23 | Modified — Space hub routing |
+| `js/storage-keys.js` | +3 | Modified — SPACES key |
+| `firestore.rules` | +29 | Modified — Spaces collection rules |

css/chart-docgen.css

@@ -0,0 +1,129 @@
+/* ============================================
+   Chart DocGen Tag Styles
+   ============================================ */
+.chart-dg-card {
+    margin: 16px 0;
+    border-radius: 12px;
+    overflow: hidden;
+    border: 1px solid var(--border-color, #334155);
+    background: var(--card-bg, #1e293b);
+}
+
+.chart-dg-header {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 12px 16px;
+    border-bottom: 1px solid rgba(255,255,255,0.06);
+    flex-wrap: wrap;
+}
+
+.chart-dg-icon {
+    font-size: 1.2em;
+}
+
+.chart-dg-title {
+    font-weight: 600;
+    color: #e2e8f0;
+    font-size: .95em;
+}
+
+.chart-dg-badges {
+    display: flex;
+    gap: 6px;
+    margin-left: auto;
+}
+
+.chart-dg-type-badge,
+.chart-dg-series-badge {
+    font-size: .72em;
+    padding: 2px 8px;
+    border-radius: 20px;
+    background: rgba(99,102,241,0.15);
+    color: #a5b4fc;
+    border: 1px solid rgba(99,102,241,0.3);
+    text-transform: capitalize;
+}
+
+.chart-dg-series-badge {
+    background: rgba(34,197,94,0.15);
+    color: #86efac;
+    border-color: rgba(34,197,94,0.3);
+}
+
+.chart-dg-actions {
+    display: flex;
+    gap: 6px;
+}
+
+.chart-dg-remove {
+    background: none;
+    border: none;
+    color: #64748b;
+    font-size: 1em;
+    cursor: pointer;
+    padding: 4px 8px;
+    border-radius: 6px;
+    transition: all .2s;
+}
+.chart-dg-remove:hover {
+    background: rgba(239,68,68,0.15);
+    color: #f87171;
+}
+
+/* ── Add Series button ── */
+.chart-dg-add-wrap {
+    padding: 8px 16px 12px;
+}
+
+.chart-dg-add-btn {
+    width: 100%;
+    padding: 8px;
+    background: rgba(99,102,241,0.08);
+    color: #a5b4fc;
+    border: 1px dashed rgba(99,102,241,0.3);
+    border-radius: 8px;
+    cursor: pointer;
+    font-size: .85em;
+    transition: all .2s;
+}
+.chart-dg-add-btn:hover {
+    background: rgba(99,102,241,0.15);
+    border-color: #6366f1;
+}
+
+.chart-dg-add-dropdown {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    gap: 6px;
+    margin-top: 8px;
+}
+
+.chart-dg-add-option {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 8px 12px;
+    background: rgba(255,255,255,0.04);
+    border: 1px solid rgba(255,255,255,0.08);
+    border-radius: 8px;
+    color: #cbd5e1;
+    cursor: pointer;
+    font-size: .82em;
+    transition: all .2s;
+}
+.chart-dg-add-option:hover {
+    background: rgba(99,102,241,0.12);
+    border-color: rgba(99,102,241,0.3);
+    color: #e2e8f0;
+}
+
+.chart-dg-add-icon { font-size: 1.2em; }
+.chart-dg-add-label { font-weight: 500; }
+
+/* Ensure echarts-container inside a chart-dg-card has no extra margin */
+.chart-dg-card > .echarts-container {
+    margin: 0;
+    border: none;
+    border-radius: 0;
+}

css/echarts.css

@@ -0,0 +1,38 @@
+/* ============================================
+   ECharts Container Styles
+   ============================================ */
+.echarts-container {
+    margin: 16px 0;
+    border-radius: 12px;
+    overflow: hidden;
+    border: 1px solid var(--border-color, #334155);
+    background: var(--card-bg, #1e293b);
+}
+
+.echarts-chart {
+    min-height: 300px;
+}
+
+.echarts-source {
+    padding: 0 12px 12px;
+}
+
+.echarts-source summary {
+    cursor: pointer;
+    font-size: .85em;
+    color: #94a3b8;
+    padding: 8px 0;
+    user-select: none;
+    transition: color .2s;
+}
+
+.echarts-source summary:hover {
+    color: #e2e8f0;
+}
+
+.echarts-source pre {
+    margin: 8px 0 0;
+    border-radius: 8px;
+    max-height: 300px;
+    overflow: auto;
+}