initial commit

2026-07-24 07:10:18 -05:00
commit 0434835762
14 changed files with 3065 additions and 0 deletions
--- a/samples/sample3-spec-sheet.md
+++ b/samples/sample3-spec-sheet.md
@@ -0,0 +1,106 @@
+# Design Specification: Sample 3 (Companion Layout)
+
+**Status:** Ready for Handoff  
+**Target Page:** `companion.html`  
+**Layout Type:** 50/50 Split Screen (Reactive Desktop, Stacked Mobile)  
+**Theme Vibe:** Hyper-minimalist terminal utility, clean information hierarchy, zero animation noise.
+
+---
+
+## 1. Design Philosophy & Guidelines
+
+This sample modifies the primary design spec by enforcing a strict **"interaction suppression"** policy. Dynamic decorations (such as border color transitions or card expansion effects) are completely disallowed. Contrast and active states are communicated solely through instantaneous typography color changes.
+
+The key feature is a persistent digital companion on the right half of the screen. The companion must feel like a quiet terminal process rather than an active distraction.
+
+---
+
+## 2. Layout Geometry & Grid
+
+The layout divides the viewport down the middle on desktop screens.
+
+### Desktop Layout (Width > 768px)
+- **Top Header:** Sticky `56px` navigation bar containing breadcrumbs/catalog links.
+- **Split Container:** Spans 100% viewport width and 100% viewport height minus header (`height: calc(100vh - 56px)`).
+- **Columns:** 
+  - **Left Pane (50%):** Scrollable container. Houses a single-column list of project cards.
+  - **Right Pane (50%):** Fixed/non-scrollable container. Houses the centered ASCII companion terminal widget.
+
+### Mobile Layout (Width <= 768px)
+- The layout collapses into a single vertical stack.
+- The ASCII companion pane moves to the top (fixed height: `300px`).
+- The content pane follows below, scrollable within the main document window.
+
+---
+
+## 3. Color Palette & Typography
+
+### Base Colors
+- **Canvas Background:** `#0d0f12` (Deep charcoal slate)
+- **Surface Background:** `#121417` (Slightly lighter dark surface)
+- **Static Borders:** `#2b303b` (1px solid, low contrast)
+- **Primary Text:** `#e0e6f0` (Off-white prose)
+- **Muted Text:** `#8a95a5` (Timestamp / status information)
+- **Active Accent:** `#00f0ff` (High-contrast Cyan)
+
+### Typography
+- **UI & ASCII Content:** Monospace (`JetBrains Mono` or `IBM Plex Mono`).
+- **Prose Content:** Sans-serif (`Inter` or `Geist Sans`) for high readability.
+
+---
+
+## 4. Content Cards (Left Column)
+
+Each card is a clean, structural text panel.
+
+### Structure
+- 1px static border (`#2b303b`) with `4px` border-radius.
+- No background color (inherits Canvas background) or a solid `#121417` surface background.
+- Elements:
+  1. **Header (`h3`):** Monospaced, bold, `#e0e6f0`.
+  2. **Description (`p`):** Sans-serif, `#8a95a5`, capped at `65ch` length.
+
+### Interactions (Ultra-Minimal)
+- **No Border Shifts:** Borders must remain `#2b303b` at all times.
+- **No Translation:** Hovering must not scale, shift, or offset the card.
+- **Instant Typography Snap:** Hovering or focusing the card snaps the text color of the Header (`h3`) from `#e0e6f0` to Cyan (`#00f0ff`) instantly.
+- **CSS Rule:** Use `transition: none;` on all hover effects.
+
+---
+
+## 5. ASCII Companion (Right Column)
+
+The companion is rendered as block-level ASCII text inside a simulated terminal panel.
+
+### Layout Widget
+- Sits centered in the right pane.
+- Styled to resemble a terminal output terminal: card box with a tab bar indicating the daemon name `sys-daemon`.
+
+### Animation & States
+The companion has two interactive states:
+
+#### State 1: IDLE
+- **Mascot Art:**
+  ```text
+      /\___/\
+     ( o   o )  sys-daemon
+     (  =^=  )  STATUS: IDLE
+      \__*__/   LOG: awaiting input█
+  ```
+- **Animation:** The terminal block cursor (`█`) blinks continuously at 1Hz (`opacity: 0` to `1` instantly). The rest of the mascot is static.
+
+#### State 2: READING (Triggered on Card Hover)
+- **Mascot Art:**
+  ```text
+      /\___/\
+     ( -   - )  sys-daemon
+     (  =o=  )  STATUS: READING
+      \__*__/   LOG: reading module_
+  ```
+- **Reaction Log:** Underneath the mascot, a mini status output log updates to display the title of the card currently hovered. For example:
+  `[sys-daemon] target: /dev/mesh-mesh-topology-builder`
+
+### Behavior Scripting Rules
+- Attach `mouseenter` and `mouseleave` event listeners to the cards in the left pane.
+- On hover, swap the inner HTML of the ASCII container to the `READING` frame and append the card's target name to the log output.
+- Revert back to the `IDLE` frame immediately when the cursor leaves the card.