assets
# Assets Directory
Frontend CSS and JavaScript for Side-by-Side Blueprint sites. These files are copied into every generated site via the `assetsDir` field in `runway.json`.
## File Overview
| File | Purpose |
|------|---------|
| `common.css` | Design system: CSS custom properties, status dots, Lean syntax highlighting, tooltips, modals, theme toggle, rainbow brackets |
| `blueprint.css` | Blueprint pages: plasTeX base reset, sidebar, dashboard grid, side-by-side displays, chapter navigation, checks tile |
| `dep_graph.css` | Dependency graph: pan/zoom viewport, toolbar, legend, SVG node styling, modals, status filter bar, individual node pages |
| `paper.css` | Paper pages: ar5iv-style academic layout, verification badges, print styles |
| `faq.css` | FAQ page: collapsible sections, monospace content display |
| `verso-code.js` | Lean code interactivity: Tippy.js hover tooltips, token binding highlights, proof sync, pan/zoom, modal handling, status filtering, subgraph rendering |
| `plastex.js` | UI controls: dark/light theme toggle, proof expand/collapse with chevron animation, chapter list toggle, mobile sidebar |
All CSS files depend on `common.css` being loaded first for variable definitions.
## Theme System
Themes are controlled via the `data-theme` attribute on `<html>`. Light mode is the default; dark mode activates with `html[data-theme="dark"]`.
**How it works:**
1. `plastex.js` runs an IIFE on load that checks `localStorage('sbs-theme')`, then `prefers-color-scheme`, then defaults to light
2. User clicks the `.theme-toggle` element in the sidebar, which calls `window.toggleSbsTheme()`
3. The new preference is saved to `localStorage` under `sbs-theme`
4. All themed styles use CSS variables defined in `:root` (light) and overridden in `html[data-theme="dark"]`
**Key theme-aware variable groups:**
| Group | Light | Dark | Variables |
|-------|-------|------|-----------|
| Backgrounds | `#ebebeb` / `#ffffff` | `#252525` / `#1a1a1a` | `--sbs-bg-page`, `--sbs-bg-surface` |
| Text | `#000000` / `#333333` | `#ffffff` / `#cccccc` | `--sbs-text`, `--sbs-text-muted` |
| Links | `#0066cc` | `#60a5fa` | `--sbs-link`, `--sbs-link-hover` |
| Accent | `#396282` | `#4a7a9e` | `--sbs-accent` |
| Lean tokens | VS Code light colors | VS Code dark colors | `--sbs-lean-keyword`, `--sbs-lean-const`, etc. |
| Graph | white backgrounds | dark backgrounds | `--sbs-graph-bg`, `--sbs-graph-edge` |
| Tooltips | light tinted backgrounds | dark tinted backgrounds | `--sbs-tooltip-*-bg`, `--sbs-tooltip-*-border` |
To add a new themed component: define the light-mode value in `:root`, then override it inside `html[data-theme="dark"]` in `common.css`.
## 7-Status Color Model
Status colors are defined as CSS variables and must match the canonical Lean definitions in `Dress/Graph/Svg.lean` and `Dress/Render/SideBySide.lean`.
| Variable | Status | Hex |
|----------|--------|-----|
| `--sbs-status-not-ready` | notReady | `#E8820C` |
| `--sbs-status-ready` | ready | `#0097A7` |
| `--sbs-status-sorry` | sorry | `#C62828` |
| `--sbs-status-proven` | proven | `#66BB6A` |
| `--sbs-status-fully-proven` | fullyProven | `#1B5E20` |
| `--sbs-status-mathlib-ready` | mathlibReady | `#42A5F5` |
| `--sbs-status-axiom` | axiom | `#7E57C2` |
These variables are consumed by:
- `.status-dot` and `.status-dot-btn` classes (common.css) -- colored indicator dots in headers, lists, modals
- `.legend-swatch.*` classes (dep_graph.css) -- graph legend color swatches
- `.filter-swatch.*` classes (dep_graph.css) -- status filter bar toggles
- `.dg-stat-*` classes (dep_graph.css) -- dashboard stat card accent borders
- `.dg-status-*` classes (dep_graph.css) -- inline status badges in declaration tables
- Dark-mode SVG overrides (dep_graph.css) -- slightly muted fill colors for graph nodes on dark backgrounds
## CSS Architecture
### common.css
The design system foundation. Defines all CSS custom properties in `:root` and dark-mode overrides. Also contains:
- **Side-by-side layout**: `.sbs-container` is a 2-column, 5-row CSS grid (above, heading, statement/signature, proof-latex/proof-lean, below)
- **Proof toggle**: `.proof_wrapper`, `.proof_heading`, `.expand-proof` with chevron rotation via `.expanded` class
- **Lean syntax highlighting**: Token classes (`.lean-keyword`, `.lean-const`, `.lean-var`, etc.) mapped to `--sbs-lean-*` variables
- **Rainbow brackets**: `.lean-bracket-1` through `.lean-bracket-6` cycling through 6 colors
- **Tippy.js themes**: `lean`, `warning`, `error`, `info`, `tactic` -- each with themed backgrounds and borders
- **Modal base styles**: `.dep-modal-container`, `.dep-modal-content`, `.dep-closebtn`
- **Tactic state animation**: Smooth max-height transition for goal display
- **Dark mode toggle widget**: `.theme-toggle`, `.theme-toggle-switch` with sliding knob
- **Sidebar items**: `.sidebar-item.active` with `::before` pseudo-element for full-width highlight, blueprint chapter toggle with collapsible list
### blueprint.css
Blueprint-specific page layout. Includes a full plasTeX CSS reset, then adds:
- **Sidebar navigation**: `nav.toc` with accent-colored background, nested `.sub-toc-*` indentation levels
- **Dashboard grid**: `.dashboard-grid` with `.dashboard-row.top-row` (progress + key theorems) and `.bottom-row` (project notes)
- **Stats box**: Pie chart container, legend with status swatches, completion/attention columns
- **Key declaration previews**: Side-by-side LaTeX/Lean preview cards with status dots
- **Project notes**: Two-column layout (messages | blocked/issues/debt/misc)
- **Checks tile**: Pass/fail/warn items with colored left borders and icons
- **Chapter pages**: Serif typography (Georgia/Palatino), justified text, paper-like `[show]/[hide]` proof toggles
- **Content width constraint**: Non-node content (paragraphs, lists, math) constrained to `min(45%, 80ch)` matching the left column width
- **Subgraph viewport**: SVG container for per-node neighborhood graphs on individual node pages
### dep_graph.css
Dependency graph page and component styles:
- **Graph viewport**: `.dep-graph-viewport` with `cursor: grab/grabbing`, `touch-action: none`, `overflow: hidden`
- **Pan/zoom SVG container**: `.dep-graph-svg` with `transform-origin: 0 0` and `will-change: transform`
- **Controls layout**: `.dep-graph-wrapper` uses CSS grid (`auto 1fr`) for side-by-side legend + graph
- **Legend**: `.dep-graph-legend` with status color swatches, shape indicators (ellipse for theorems, box for definitions, diamond for axioms)
- **Toolbar**: Zoom in/out, fit, and directional pan buttons
- **Status filter bar**: Checkbox toggles per status with swatch colors, count display
- **Node modals**: Extended modal styles for graph node detail views with SBS containers
- **Individual node pages**: `.dg-node-page` layout, details panel, relations grid, subgraph section with depth slider and direction toggle
- **Dashboard integration**: `.dg-dashboard-page` stats grid, declaration tables, chapter-grouped collapsible sections
- **Dark mode SVG overrides**: CSS classes (`.graph-bg`, `.graph-edge`, `.node-shape`, `.status-*`, `.node-text`) override inline SVG attributes via `!important` for dark backgrounds
### paper.css
Academic paper styling (ar5iv conventions):
- **Container**: `.ar5iv-paper` with Computer Modern Serif font, justified text, centered layout
- **Paper header**: Centered title, authors, abstract with left border accent
- **Theorem environments**: `.paper-theorem`, `.paper-definition`, `.paper-lemma` with consistent spacing
- **Verification badges**: `.verification-badge.verified/.in-progress/.not-started` (hidden on paper pages in favor of status dots)
- **Proof toggle**: Same `[show]/[hide]` text pattern as chapter pages
- **Print styles**: Hides blueprint links and footer, removes max-width constraints
- **MathJax errors**: Toned-down styling so rendering errors don't dominate the page
### faq.css
FAQ page with nested collapsible sections:
- **Container**: `.faq-container` with max-width 900px
- **Categories**: `<details>` elements (`.faq-category`) with styled `<summary>` headers
- **Entries**: Nested `<details>` (`.faq-entry`) for individual Q&A items
- **Content**: `.faq-content` displayed in monospace font with `white-space: pre-wrap`
## JavaScript Modules
### verso-code.js
Lean code interactivity and graph features. Depends on Tippy.js; optionally uses marked.js for docstring rendering and jQuery for proof sync.
**Code highlighting features:**
- Token binding highlights: hovering a variable highlights all same-binding tokens within the same `data-lean-context`
- Tippy.js tooltips: Type signatures and docstrings from `data-lean-hovers` JSON, themed per token type
- Tactic state display: Checkbox toggle or tooltip showing proof goals
- Proof body sync: Lean proof visibility follows LaTeX proof toggle state via jQuery `slideUp`/`slideDown`
**Dependency graph features:**
- `initPanZoom(viewport, svgContainer, prefix, maxScale)`: Reusable pan/zoom with pointer events, mouse wheel zoom centered on cursor, scale clamped to 0.1-5x
- `fitToWindow()`: Centers graph using SVG `getBBox()` (requires viewBox origin at 0,0)
- `initNodeClickHandlers(container)`: Click graph nodes to open modals; safe for repeated calls
- `initModalCloseHandlers()`: Close via button, backdrop click, or Escape key
- `onModalOpen(modal)`: Initializes MathJax typesetting and Tippy tooltips in modal content
- Status filter: Checkbox-driven show/hide of graph nodes and their connected edges
- Subgraph renderer: Fetches pre-rendered SVG files per node/direction/depth from `subgraphs/` directory
### plastex.js
UI controls. Depends on jQuery.
- **Theme toggle**: IIFE applies theme before DOM ready (prevents flash); `window.toggleSbsTheme()` exposed globally
- **Proof expand/collapse**: Click `.proof_heading` to toggle `.expanded` class and `slideToggle()` on `.proof_content`; syncs Lean proof body visibility
- **Chapter list toggle**: `.sidebar-blueprint-group` auto-expands on pages with `data-blueprint-page` body attribute
- **Mobile sidebar**: `#toc-toggle` shows/hides `nav.toc`
- **Line comment styling**: Wraps plain `-- ` comments in `.line-comment` spans when code blocks lack syntax highlighting spans