DECK Frontend v4.1 - Security & Accessibility Update

Changes:
- XSS protection with escapeHtml() utility
- Responsive CSS (3 mobile breakpoints)
- Full accessibility: aria-labels, roles, focus-visible
- GraphView memory leak fix
- Immutable state management

Files:
- deck-v4.1.html: Production-ready monolith
- CHANGELOG.md: Version history and documentation

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

deck-frontend/CHANGELOG.md

@@ -0,0 +1,109 @@
+# DECK Frontend - Changelog
+
+## v4.1 (2026-01-15) - Security & Accessibility Update
+
+### 🔴 Critical Fix
+- **XSS Protection**: Added `Utils.escapeHtml()` function to sanitize all user-generated content before rendering to DOM
+  - Applied in: DetailPanel, GridView, TreeView, GraphView sidebar
+  - Prevents script injection from malicious tag names, descriptions, or refs
+
+### 🟡 Important Fixes
+
+#### Responsive CSS
+Added 3 breakpoints for mobile compatibility:
+```css
+@media (max-width: 1024px) - Tablet adjustments
+@media (max-width: 768px)  - Mobile: hides left-panel, detail-panel fullwidth
+@media (max-width: 480px)  - Small screens: hides graph-sidebar
+```
+
+#### Accessibility (WCAG 2.1)
+- `aria-label` on all interactive elements (inputs, selects, buttons)
+- `aria-pressed` on toggle buttons (SEL, base buttons, view tabs)
+- `aria-expanded` on tree headers
+- `role` attributes: button, group, dialog, navigation, complementary
+- `tabindex="0"` on clickable non-button elements
+- `aria-live="polite"` on dynamic content areas
+
+#### Focus Styles
+```css
+.btn:focus-visible
+.base-btn:focus-visible
+.view-tab:focus-visible
+.group-btn:focus-visible
+.lang-select:focus-visible
+.lib-icon:focus-visible
+.card:focus-visible
+.tree-header:focus-visible
+.tree-item:focus-visible
+.tag-chip:focus-visible
+.detail-close:focus-visible
+.modal-close:focus-visible
+```
+
+#### Memory Leak Fix
+- `GraphView.unmount()` now properly cleans up:
+  - Stops D3 force simulation
+  - Removes SVG element from DOM
+  - Nullifies references
+- Called at start of `render()` to prevent accumulation
+
+#### State Management
+- Changed `State.set()` from `Object.assign()` to spread operator for immutability
+- Prevents mutation bugs with nested Sets (graphFilters)
+
+---
+
+## v4.0 (2026-01-15) - Clean Modular Architecture
+
+### Structure
+- Single HTML file with clear separation markers
+- CSS: lines 30-560 (CSS_START/CSS_END)
+- HTML: lines 560-680 (structure only)
+- JS: lines 680-1614 (JS_START/JS_END)
+
+### Extraction Commands
+```bash
+# Extract CSS (pure, without <style> tags)
+sed -n '/CSS_START/,/CSS_END/{//d;p}' deck.html > styles.css
+
+# Extract JS (pure, without <script> tags)
+sed -n '/JS_START/,/JS_END/{//d;p}' deck.html > app.js
+```
+
+### JavaScript Architecture
+```
+CONFIG (constants)     → API endpoints, schemas, colors
+STATE (reactive)       → Application state management
+UTILS (pure functions) → DOM helpers, escapeHtml, debounce
+API (client)          → PostgREST communication
+FILTER (declarative)  → Search, group, library filtering
+COMPONENTS            → GroupsBar, LibrariesPanel, DetailPanel
+VIEWS                 → GridView, TreeView, GraphView
+APP (controller)      → Main application logic
+```
+
+### CSS Architecture
+- BEM naming convention (.card__name, .btn--active)
+- CSS custom properties for theming
+- 6 organized sections: Variables, Reset, Layout, Components, Views, Utilities
+
+---
+
+## v3.1 (2026-01-15)
+
+### Fixes
+- Added `flex-shrink: 0` to `.lib-icon` to prevent compression
+- Fixed duplicate `$` function names (querySelector vs querySelectorAll)
+- Fixed `i` typo (should be `if`) in GroupsBar.render
+
+---
+
+## v3.0 (2026-01-15)
+
+### Initial Modular Version
+- Reorganized from legacy code
+- Added section markers for extraction
+- Implemented all 9 bases (HST, FLG, ITM, LOC, PLY, MTH, ATC, MAIL, CHAT)
+- D3.js lazy loading for graph view
+- PostgREST API integration with schema headers