Interaction & Alignment
╔═════════════════════════════════════════════════════════════════════════════╗
║ ║
║ THE CENTER ║
║ ║
║ "CodexMono is The Brick - the fundamental unit that enables ║
║ Monokinetics: unified Human + AI experience through predictable, ║
║ trustable visual alignment." ║
║ ║
║ Interaction extends this trust to user navigation: ║
║ Click, drag, keyboard - all methods respect the Brick's integrity. ║
║ ║
╚═════════════════════════════════════════════════════════════════════════════╝
Click-to-Expand System
When Does Expansion Trigger?
Only scaled-down content shows the expand popup:╔═════════════════════════════════════════════════════════════════════════════╗
║ ║
║ SCALE GATE: WHEN TO SHOW POPUP ║
║ ║
║ User Clicks ║
║ │ ║
║ ▼ ║
║ ┌─────────────────────┐ ║
║ │ Is content scaled │ ║
║ │ below 0.99? │ ║
║ └─────────┬───────────┘ ║
║ │ ║
║ ┌───────NO─────┴─────YES───────┐ ║
║ │ │ ║
║ ▼ ▼ ║
║ ┌──────────────┐ ┌─────────────────┐ ║
║ │ No action │ │ Show expanded │ ║
║ │ Content fits │ │ popup view │ ║
║ └──────────────┘ └─────────────────┘ ║
║ ║
║ Why 0.99 threshold? ║
║ Floating-point math: 800/800 can equal 0.9999... not 1.0 ║
║ 0.99 catches this edge case correctly. ║
║ ║
╚═════════════════════════════════════════════════════════════════════════════╝
Popup Design
Visual Presentation
╔═════════════════════════════════════════════════════════════════════════════╗
║ ║
║ POPUP: FULL-SIZE VIEW OF SCALED CONTENT ║
║ ║
║ ┌───────────────────────────────────────────────────────────────────┐ ║
║ │ │ ║
║ │ Position: Centered on screen (50%, 50%) │ ║
║ │ │ ║
║ │ Size Limits: │ ║
║ │ - Max width: 90% of screen │ ║
║ │ - Max height: 80% of screen │ ║
║ │ - Scrollable if content exceeds │ ║
║ │ │ ║
║ │ Visual Style: │ ║
║ │ - Dark background matching theme │ ║
║ │ - Soft shadow for depth │ ║
║ │ - Rounded corners │ ║
║ │ │ ║
║ │ Typography: │ ║
║ │ - CodexMono font (default) │ ║
║ │ - Preserved whitespace (pre formatting) │ ║
║ │ - Configurable line-height │ ║
║ │ │ ║
║ └───────────────────────────────────────────────────────────────────┘ ║
║ ║
╚═════════════════════════════════════════════════════════════════════════════╝
Three Ways to Close
╔═════════════════════════════════════════════════════════════════════════════╗
║ ║
║ CLOSING THE POPUP ║
║ ║
║ ┌───────────────────┐ ┌───────────────────┐ ┌───────────────────┐ ║
║ │ │ │ │ │ │ ║
║ │ Press ESC │ │ Click Outside │ │ Click Same Box │ ║
║ │ ___________ │ │ │ │ (Toggle) │ ║
║ │ │ Escape │ │ │ ┌───────┐ │ │ │ ║
║ │ ─────────── │ │ │ popup │ │ │ Click once: │ ║
║ │ │ │ └───────┘ │ │ → Opens │ ║
║ │ Quick dismiss │ │ X ←click │ │ Click again: │ ║
║ │ keyboard user │ │ anywhere here │ │ → Closes │ ║
║ │ │ │ │ │ │ ║
║ └───────────────────┘ └───────────────────┘ └───────────────────┘ ║
║ ║
╚═════════════════════════════════════════════════════════════════════════════╝
Keyboard Navigation
Navigation Keys in Popup
╔═════════════════════════════════════════════════════════════════════════════╗
║ ║
║ KEYBOARD CONTROLS ║
║ ║
║ Fine Movement (Line by Line) ║
║ ┌───────────────────────────────────────────────────────────────────┐ ║
║ │ │ ║
║ │ ▲ │ ║
║ │ │ Arrow Up - Move up ~2-3 lines │ ║
║ │ │ ║
║ │ │ Arrow Down - Move down ~2-3 lines │ ║
║ │ ▼ │ ║
║ │ │ ║
║ └───────────────────────────────────────────────────────────────────┘ ║
║ ║
║ Page Movement (Full Screen) ║
║ ┌───────────────────────────────────────────────────────────────────┐ ║
║ │ │ ║
║ │ Page Up - Jump up one screen │ ║
║ │ Page Down - Jump down one screen │ ║
║ │ │ ║
║ └───────────────────────────────────────────────────────────────────┘ ║
║ ║
║ Absolute Movement (Instant Jump) ║
║ ┌───────────────────────────────────────────────────────────────────┐ ║
║ │ │ ║
║ │ Home - Jump to top │ ║
║ │ End - Jump to bottom │ ║
║ │ │ ║
║ └───────────────────────────────────────────────────────────────────┘ ║
║ ║
║ The ~2-3 lines per arrow key matches terminal scrollback behavior, ║
║ providing a familiar experience for developers. ║
║ ║
╚═════════════════════════════════════════════════════════════════════════════╝
Mouse Wheel Scrolling
Scroll Capture Behavior
╔═════════════════════════════════════════════════════════════════════════════╗
║ ║
║ MOUSE WHEEL: DEDICATED POPUP SCROLLING ║
║ ║
║ While popup is open: ║
║ ┌───────────────────────────────────────────────────────────────────┐ ║
║ │ │ ║
║ │ All wheel events captured │ ║
║ │ │ │ ║
║ │ ▼ │ ║
║ │ Applied to popup only │ ║
║ │ │ │ ║
║ │ ▼ │ ║
║ │ Background page does NOT scroll │ ║
║ │ │ ║
║ └───────────────────────────────────────────────────────────────────┘ ║
║ ║
║ Why capture all wheel events? ║
║ ┌───────────────────────────────────────────────────────────────────┐ ║
║ │ │ ║
║ │ Without capture: │ ║
║ │ - Mouse over popup: popup scrolls │ ║
║ │ - Mouse outside popup: page scrolls (confusing!) │ ║
║ │ │ ║
║ │ With capture: │ ║
║ │ - Mouse anywhere: popup scrolls │ ║
║ │ - Consistent, predictable behavior │ ║
║ │ │ ║
║ └───────────────────────────────────────────────────────────────────┘ ║
║ ║
╚═════════════════════════════════════════════════════════════════════════════╝
Horizontal Drag Scrolling
Click-and-Drag Navigation
╔═════════════════════════════════════════════════════════════════════════════╗
║ ║
║ DRAG SCROLLING: WIDE CONTENT NAVIGATION ║
║ ║
║ Enabled when content overflows horizontally: ║
║ ┌───────────────────────────────────────────────────────────────────┐ ║
║ │ │ ║
║ │ Content narrower than viewport: │ ║
║ │ ┌────────────────────────┐ │ ║
║ │ │ Content fits │ Drag: DISABLED │ ║
║ │ └────────────────────────┘ │ ║
║ │ │ ║
║ │ Content wider than viewport: │ ║
║ │ ┌────────────────────────┬──────┐ │ ║
║ │ │ Visible │ Hidden... │ Drag: ENABLED │ ║
║ │ └────────────────────────┴──────┘ │ ║
║ │ │ ║
║ └───────────────────────────────────────────────────────────────────┘ ║
║ ║
║ How drag works: ║
║ ┌───────────────────────────────────────────────────────────────────┐ ║
║ │ │ ║
║ │ 1. Click and hold │ ║
║ │ 2. Drag left or right │ ║
║ │ 3. Content scrolls in opposite direction (natural feel) │ ║
║ │ 4. 2x acceleration for responsive movement │ ║
║ │ 5. Release to stop │ ║
║ │ │ ║
║ └───────────────────────────────────────────────────────────────────┘ ║
║ ║
║ Drag State: ║
║ ┌───────────────────────────────────────────────────────────────────┐ ║
║ │ │ ║
║ │ IDLE ────mousedown────→ DRAGGING ────mouseup────→ IDLE │ ║
║ │ │ │ ║
║ │ mousemove │ ║
║ │ │ │ ║
║ │ ▼ │ ║
║ │ Update scroll │ ║
║ │ │ ║
║ └───────────────────────────────────────────────────────────────────┘ ║
║ ║
╚═════════════════════════════════════════════════════════════════════════════╝
CodexMono: The Alignment Foundation
The 600-Unit Character Width
╔═════════════════════════════════════════════════════════════════════════════╗
║ ║
║ CODEXMONO: PERFECT MONOSPACE ALIGNMENT ║
║ ║
║ Every character occupies exactly 600 font units: ║
║ ┌───────────────────────────────────────────────────────────────────┐ ║
║ │ │ ║
║ │ 'A' = 600 units │ ║
║ │ '│' = 600 units │ ║
║ │ '─' = 600 units │ ║
║ │ '┌' = 600 units │ ║
║ │ ' ' = 600 units (space) │ ║
║ │ │ ║
║ │ No kerning. No variable spacing. │ ║
║ │ Every character is a perfect brick. │ ║
║ │ │ ║
║ └───────────────────────────────────────────────────────────────────┘ ║
║ ║
║ Result: Perfect ASCII Art ║
║ ┌───────────────────────────────────────────────────────────────────┐ ║
║ │ │ ║
║ │ ┌───┬───┬───┐ │ ║
║ │ │ A │ B │ C │ ← Lines connect perfectly │ ║
║ │ ├───┼───┼───┤ │ ║
║ │ │ D │ E │ F │ ← Vertical bars align exactly │ ║
║ │ └───┴───┴───┘ │ ║
║ │ │ ║
║ └───────────────────────────────────────────────────────────────────┘ ║
║ ║
╚═════════════════════════════════════════════════════════════════════════════╝
Whitespace Preservation
╔═════════════════════════════════════════════════════════════════════════════╗
║ ║
║ CSS WHITESPACE: PROTECTING ASCII ART ║
║ ║
║ ┌───────────────┬────────────┬────────────┬───────────┬──────────────┐ ║
║ │ Mode │ New Lines │ Spaces │ Text Wrap │ ASCII Safe? │ ║
║ ├───────────────┼────────────┼────────────┼───────────┼──────────────┤ ║
║ │ normal │ Collapse │ Collapse │ Yes │ NO │ ║
║ │ nowrap │ Collapse │ Collapse │ No │ NO │ ║
║ │ pre │ Preserve │ Preserve │ No │ YES │ ║
║ │ pre-wrap │ Preserve │ Preserve │ Yes │ MAYBE │ ║
║ │ pre-line │ Preserve │ Collapse │ Yes │ NO │ ║
║ └───────────────┴────────────┴────────────┴───────────┴──────────────┘ ║
║ ║
║ Only `white-space: pre` provides complete ASCII art protection. ║
║ ║
╚═════════════════════════════════════════════════════════════════════════════╝
The Complete Navigation Picture
╔═════════════════════════════════════════════════════════════════════════════╗
║ ║
║ BRICK NAVIGATION: ALL INPUT METHODS ║
║ ║
║ The Brick (Full ASCII Content): ║
║ ┌───────────────────────────────────────────────────────┐ ║
║ │ │ ║
║ │ ┌───────────────────────────────────────────────┐ │ ║
║ │ │ Header Section │ │ ║
║ │ ├───────────────────────────────────────────────┤ │ ║
║ │ │ │ │ ║
║ │ │ Content extends vertically │ │ ║
║ │ │ and horizontally beyond │ │ ║
║ │ │ what fits on screen │ │ ║
║ │ │ │ │ ║
║ │ └───────────────────────────────────────────────┘ │ ║
║ │ │ ║
║ └───────────────────────────────────────────────────────┘ ║
║ ║
║ ┌───────────────────┐ ║
║ │ Viewport │ ← What you see at any moment ║
║ └───────────────────┘ ║
║ ║
║ Navigation Methods: ║
║ ┌───────────────────────────────────────────────────────────────────┐ ║
║ │ │ ║
║ │ Keyboard │ Fine control (2-3 lines) and page jumps │ ║
║ │ Mouse Wheel │ Smooth continuous scrolling │ ║
║ │ Click + Drag │ Direct manipulation (2x responsive) │ ║
║ │ │ ║
║ └───────────────────────────────────────────────────────────────────┘ ║
║ ║
║ "Just as terminal users navigate scrollback history, ║
║ document users navigate the Brick space." ║
║ ║
╚═════════════════════════════════════════════════════════════════════════════╝
The Alignment Guarantee Chain
Five layers ensure perfect ASCII art at any scale:╔═════════════════════════════════════════════════════════════════════════════╗
║ ║
║ ALIGNMENT CHAIN: FROM FONT TO SCREEN ║
║ ║
║ 1. CodexMono Font ║
║ │ ║
║ │ 600 units per character ║
║ ▼ ║
║ 2. white-space: pre ║
║ │ ║
║ │ Preserve all whitespace and newlines ║
║ ▼ ║
║ 3. word-wrap: normal ║
║ │ ║
║ │ Prevent line breaks ║
║ ▼ ║
║ 4. line-height: 1.4 ║
║ │ ║
║ │ Consistent vertical spacing ║
║ ▼ ║
║ 5. transform: scale() ║
║ │ ║
║ │ Preserve internal proportions ║
║ ▼ ║
║ RESULT: Perfect alignment at any size ║
║ ║
╚═════════════════════════════════════════════════════════════════════════════╝
Key Principles
╔═════════════════════════════════════════════════════════════════════════════╗
║ ║
║ THREE INTERACTION PRINCIPLES ║
║ ║
║ 1. EXPANSION PRINCIPLE ║
║ ┌───────────────────────────────────────────────────────────────────┐ ║
║ │ "Scaling compresses the Brick; expansion reveals it │ ║
║ │ in complete form." │ ║
║ └───────────────────────────────────────────────────────────────────┘ ║
║ ║
║ 2. NAVIGATION PARALLELISM ║
║ ┌───────────────────────────────────────────────────────────────────┐ ║
║ │ "Just as terminal users navigate scrollback history, │ ║
║ │ document users navigate the Brick space." │ ║
║ └───────────────────────────────────────────────────────────────────┘ ║
║ ║
║ 3. ALIGNMENT IMPERATIVE ║
║ ┌───────────────────────────────────────────────────────────────────┐ ║
║ │ "Without perfect alignment, structure dissolves into chaos." │ ║
║ └───────────────────────────────────────────────────────────────────┘ ║
║ ║
╚═════════════════════════════════════════════════════════════════════════════╝
“The Brick is navigable in all dimensions - the user chooses the path.”