# 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