Interaction & Alignment
Copy
+=============================================================================+
| |
| 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:Copy
+=============================================================================+
| |
| SCALE GATE: WHEN TO SHOW POPUP |
| |
| User Clicks |
| | |
| v |
| +---------------------+ |
| | Is content scaled | |
| | below 0.99? | |
| +---------+-----------+ |
| | |
| +-------NO-----+-----YES---------+ |
| | | |
| v v |
| +--------------+ +-----------------+ |
| | 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
Copy
+=============================================================================+
| |
| 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
Copy
+=============================================================================+
| |
| 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
Copy
+=============================================================================+
| |
| KEYBOARD CONTROLS |
| |
| Fine Movement (Line by Line) |
| +-------------------------------------------------------------------+ |
| | | |
| | ^ | |
| | | Arrow Up - Move up ~2-3 lines | |
| | | |
| | | Arrow Down - Move down ~2-3 lines | |
| | v | |
| | | |
| +-------------------------------------------------------------------+ |
| |
| 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
Copy
+=============================================================================+
| |
| MOUSE WHEEL: DEDICATED POPUP SCROLLING |
| |
| While popup is open: |
| +-------------------------------------------------------------------+ |
| | | |
| | All wheel events captured | |
| | | | |
| | v | |
| | Applied to popup only | |
| | | | |
| | v | |
| | 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
Copy
+=============================================================================+
| |
| 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 | |
| | | | |
| | v | |
| | Update scroll | |
| | | |
| +-------------------------------------------------------------------+ |
| |
+=============================================================================+
CodexMono: The Alignment Foundation
The 600-Unit Character Width
Copy
+=============================================================================+
| |
| 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
Copy
+=============================================================================+
| |
| 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
Copy
+=============================================================================+
| |
| 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:Copy
+=============================================================================+
| |
| ALIGNMENT CHAIN: FROM FONT TO SCREEN |
| |
| 1. CodexMono Font |
| | |
| | 600 units per character |
| v |
| 2. white-space: pre |
| | |
| | Preserve all whitespace and newlines |
| v |
| 3. word-wrap: normal |
| | |
| | Prevent line breaks |
| v |
| 4. line-height: 1.4 |
| | |
| | Consistent vertical spacing |
| v |
| 5. transform: scale() |
| | |
| | Preserve internal proportions |
| v |
| RESULT: Perfect alignment at any size |
| |
+=============================================================================+
Key Principles
Copy
+=============================================================================+
| |
| 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.”