diff --git a/docs/design/wireframes/README.md b/docs/design/wireframes/README.md new file mode 100644 index 000000000..0d9e1e44f --- /dev/null +++ b/docs/design/wireframes/README.md @@ -0,0 +1,73 @@ +# UI Wireframes + +Wireframes for The Settled Reach UI, authored as JSON source files and rendered to PNG via Frame0. + +JSON files are the source of truth. PNGs are exports. `.idmap.json` files are ephemeral (gitignored). + +Wireframes are organized in two sets: +- **v01-** prefix: v0.1 critical path (minimal viable UI for first playable) +- **v10-** prefix: v1.0 evolution (discussion pieces for aspirational full design) + +--- + +## HUD / Neural Insert + +The player's primary gameplay interface — top-down view with perception overlays. + +| Wireframe | Version | Decision References | +|-----------|---------|-------------------| +| [v01-insert-basic](hud/v01-insert-basic.png) | v0.1 | [D-013](../../../decisions/scope.md#d-013-diegetic-insertpoi-navigation-system) (diegetic insert), [D-048](../../../decisions/perception.md#d-048-neural-insert-overlay--visual-design) (insert overlay design), [D-049](../../../decisions/perception.md#d-049-z-level-rendering-stack-8-layers) (z-stack layers 6-7), [D-015](../../../decisions/perception.md#d-015-camera-locked-to-character-rotation-as-future-option) (locked camera), [D-014](../../../decisions/scope.md#d-014-v01-map-specification) (v0.1 map spec) | +| [v10-insert-full](hud/v10-insert-full.png) | v1.0 | [D-017](../../../decisions/perception.md#d-017-perception-modes-as-character-build-system) (perception modes), [D-048](../../../decisions/perception.md#d-048-neural-insert-overlay--visual-design) (insert overlay), [D-059](../../../decisions/perception.md#d-059-fog--shader-based-five-layers-knowledge-graph-driven) (fog layers), [D-033](../../../decisions/perception.md#d-033-entity-color--relationship-to-player) (entity color) | + +## Dialogue + +Conversation system — NPC speaking, player choosing, overheard conversations. + +| Wireframe | Version | Decision References | +|-----------|---------|-------------------| +| [v01-dialogue-speaking](dialogue/v01-dialogue-speaking.png) | v0.1 | [D-061](../../../decisions/perception.md#d-061-dialogue-box--bottom-screen-max-20-height-no-portraits) (dialogue box spec), [D-076](../../../decisions/perception.md#d-076-dialogue-box-max-width--640px-oq-29-resolution) (max-width 1200px), [D-028](../../../decisions/content.md#d-028-dialogue-architecture--tagged-line-pools-with-four-relational-layers) (dialogue architecture) | +| [v01-dialogue-choosing](dialogue/v01-dialogue-choosing.png) | v0.1 | [D-061](../../../decisions/perception.md#d-061-dialogue-box--bottom-screen-max-20-height-no-portraits) (dialogue box), [D-062](../../../decisions/content.md#d-062-invisible-locked-dialogue-options) (invisible locked options), [D-063](../../../decisions/content.md#d-063-confrontation--same-box-different-weight) (confrontation weight) | +| [v01-dialogue-overheard](dialogue/v01-dialogue-overheard.png) | v0.1 | [D-078](../../../decisions/perception.md#d-078-overheard-npc-conversation--passive-dialogue-panel-with-occlusion-filter) (overheard conversation), [D-071](../../../decisions/perception.md#d-071-no-ambient-dip-for-eavesdropping--listeningfocus-boost) (eavesdropping), [D-072](../../../decisions/perception.md#d-072-universal-event-driven-conversation-murmur) (conversation murmur) | +| [v10-dialogue-full](dialogue/v10-dialogue-full.png) | v1.0 | [D-061](../../../decisions/perception.md#d-061-dialogue-box--bottom-screen-max-20-height-no-portraits) (dialogue box), [D-028](../../../decisions/content.md#d-028-dialogue-architecture--tagged-line-pools-with-four-relational-layers) (four relational layers), [D-075](../../../decisions/content.md#d-075-dialogue-filtering--layered-confidence-gate-on-trust-tier-oq-18-resolution) (confidence gating), [D-033](../../../decisions/perception.md#d-033-entity-color--relationship-to-player) (entity color as relationship) | + +## Internal Monologue + +Player character's thoughts — perception bridge, atmosphere, diegetic hints, unreliable narrator. + +| Wireframe | Version | Decision References | +|-----------|---------|-------------------| +| [v01-monologue-idle](monologue/v01-monologue-idle.png) | v0.1 | [D-016](../../../decisions/perception.md#d-016-internal-monologue-as-core-perceptionatmosphere-system) (monologue system), [D-032](../../../decisions/content.md#d-032-separate-monologue-pools-per-character) (separate pools per character), [D-049](../../../decisions/perception.md#d-049-z-level-rendering-stack-8-layers) (z-layer 7) | +| [v01-monologue-reaction](monologue/v01-monologue-reaction.png) | v0.1 | [D-016](../../../decisions/perception.md#d-016-internal-monologue-as-core-perceptionatmosphere-system) (monologue), [D-060](../../../decisions/perception.md#d-060-cognitive-delay-for-fog-recognition) (cognitive delay), [D-067](../../../decisions/perception.md#d-067-recognition-chime-fires-at-onset-of-cognitive-delay) (recognition chime timing) | +| [v10-monologue-threading](monologue/v10-monologue-threading.png) | v1.0 | [D-016](../../../decisions/perception.md#d-016-internal-monologue-as-core-perceptionatmosphere-system) (monologue), [D-035](../../../decisions/content.md#d-035-converged-tag-taxonomy-for-dialogue-and-monologue-line-pools) (monologue tags/triggers), [D-041](../../../decisions/architecture.md#d-041-knowledge-graph-data-model) (knowledge graph) | + +## Popups and Dialogs + +Confirmations, tooltips, interaction lists, notifications, context menus. + +| Wireframe | Version | Decision References | +|-----------|---------|-------------------| +| [v01-modal-confirm](popups/v01-modal-confirm.png) | v0.1 | [D-048](../../../decisions/perception.md#d-048-neural-insert-overlay--visual-design) (insert visual language), [D-049](../../../decisions/perception.md#d-049-z-level-rendering-stack-8-layers) (z-layer 7 UI) | +| [v01-tooltip](popups/v01-tooltip.png) | v0.1 | [D-056](../../../decisions/perception.md#d-056-cursor-states--insert-styled-geometric) (cursor states), [D-057](../../../decisions/perception.md#d-057-entity-interaction--vertical-list-insert-styled) (entity interaction list) | +| [v01-interaction-list](popups/v01-interaction-list.png) | v0.1 | [D-057](../../../decisions/perception.md#d-057-entity-interaction--vertical-list-insert-styled) (vertical list, insert-styled), [D-058](../../../decisions/perception.md#d-058-world-menu--radial-4-spokes) (world menu radial), [D-056](../../../decisions/perception.md#d-056-cursor-states--insert-styled-geometric) (cursor hover states) | +| [v10-context-menu](popups/v10-context-menu.png) | v1.0 | [D-057](../../../decisions/perception.md#d-057-entity-interaction--vertical-list-insert-styled) (entity interaction), [D-058](../../../decisions/perception.md#d-058-world-menu--radial-4-spokes) (world menu radial, 5-6 spokes) | +| [v10-notification-stack](popups/v10-notification-stack.png) | v1.0 | [D-013](../../../decisions/scope.md#d-013-diegetic-insertpoi-navigation-system) (diegetic insert), [D-048](../../../decisions/perception.md#d-048-neural-insert-overlay--visual-design) (insert overlay), [D-018](../../../decisions/perception.md#d-018-three-range-sound-model) (three-range sound — long-range alerts) | + +## Menus + +Main menu, pause, save/load, options. + +| Wireframe | Version | Decision References | +|-----------|---------|-------------------| +| [v01-main-menu](menus/v01-main-menu.png) | v0.1 | [D-043](../../../decisions/perception.md#d-043-art-direction--visual-style-functional-warmth) (functional warmth style), [D-027](../../../decisions/scope.md#d-027-vertical-slice--smuggler--detective-two-character-proof) (two-character proof — character select) | +| [v01-pause-menu](menus/v01-pause-menu.png) | v0.1 | [D-043](../../../decisions/perception.md#d-043-art-direction--visual-style-functional-warmth) (visual style) | +| [v01-save-load](menus/v01-save-load.png) | v0.1 | [D-027](../../../decisions/scope.md#d-027-vertical-slice--smuggler--detective-two-character-proof) (vertical slice), [D-043](../../../decisions/perception.md#d-043-art-direction--visual-style-functional-warmth) (visual style) | +| [v10-main-menu](menus/v10-main-menu.png) | v1.0 | [D-043](../../../decisions/perception.md#d-043-art-direction--visual-style-functional-warmth) (visual style), [D-036](../../../decisions/content.md#d-036-sova-transit-district--krenn-system-as-v01-setting) (setting — Sova Transit District), [D-013](../../../decisions/scope.md#d-013-diegetic-insertpoi-navigation-system) (diegetic insert — in-fiction menu) | +| [v10-options-full](menus/v10-options-full.png) | v1.0 | [D-043](../../../decisions/perception.md#d-043-art-direction--visual-style-functional-warmth) (visual style), [D-068](../../../decisions/architecture.md#d-068-5-bus-audio-architecture) (5-bus audio — per-bus volume controls), [D-069](../../../decisions/perception.md#d-069-audio-dip-profiles-for-dialogue-and-confrontation) (audio dip profiles) | + +--- + +## Workflow + +Wireframes are authored as JSON, rendered via Frame0, exported as PNG. See `.claude/skills/frame0-wireframe/SKILL.md` for the full workflow. + +Frame0 is treated as a renderer — push, export, clean up. Pull only when the user explicitly requests import of Frame0 edits. diff --git a/docs/design/wireframes/dialogue/v01-dialogue-choosing.json b/docs/design/wireframes/dialogue/v01-dialogue-choosing.json new file mode 100644 index 000000000..6a27c4341 --- /dev/null +++ b/docs/design/wireframes/dialogue/v01-dialogue-choosing.json @@ -0,0 +1,149 @@ +{ + "name": "v01-dialogue-choosing", + "shapes": { + "bg": { + "type": "Rectangle", + "left": 0, "top": 0, "width": 1140, "height": 760, + "fillColor": "#1a1e24", + "strokeColor": "#1a1e24" + }, + "bg-game-label": { + "type": "Text", + "left": 380, "top": 280, + "text": "GAME VIEW — KAEL DAVAN VISIBLE IN WORLD\n(entity color: amber — person of interest)", + "fontColor": "#333340", + "fontSize": 14 + }, + "monologue-area": { + "type": "Rectangle", + "left": 200, "top": 522, "width": 740, "height": 56, + "fillColor": "#00000000", + "strokeColor": "#00000000" + }, + "monologue-text": { + "type": "Text", + "left": 200, "top": 522, "width": 740, + "text": "This changes things. No taking it back.", + "fontColor": "#e0e8f8", + "fontSize": 13, + "wordWrap": true + }, + "monologue-note": { + "type": "Text", + "left": 200, "top": 543, + "text": "Pre-delivery monologue beat — fires before confrontation option is selected (D-063)", + "fontColor": "#3a4455", + "fontSize": 10 + }, + "dialogue-panel": { + "type": "Rectangle", + "left": 0, "top": 608, "width": 1140, "height": 152, + "fillColor": "#0d1018", + "strokeColor": "#333340" + }, + "dialogue-panel-accent": { + "type": "Rectangle", + "left": 0, "top": 608, "width": 1140, "height": 2, + "fillColor": "#333340", + "strokeColor": "#333340" + }, + "speaker-name": { + "type": "Text", + "left": 20, "top": 616, + "text": "KAEL DAVAN", + "fontColor": "#e8c547", + "fontSize": 14 + }, + "speaker-arrow": { + "type": "Text", + "left": 116, "top": 616, + "text": "→ you", + "fontColor": "#556677", + "fontSize": 14 + }, + "dialogue-text": { + "type": "Text", + "left": 20, "top": 638, "width": 1100, + "text": "Long shift. Just heading home. Nothing to report.", + "fontColor": "#e8eaf0", + "fontSize": 16, + "wordWrap": true + }, + "separator": { + "type": "Line", + "left": 20, "top": 676, "width": 1100, "height": 0, + "strokeColor": "#2a3040" + }, + "response-1": { + "type": "Text", + "left": 20, "top": 682, + "text": "▸ [1] Ask about the shift", + "fontColor": "#c0c8d8", + "fontSize": 14 + }, + "response-2": { + "type": "Text", + "left": 20, "top": 702, + "text": "▸ [2] Ask about Naia", + "fontColor": "#c0c8d8", + "fontSize": 14 + }, + "response-3-confrontation": { + "type": "Text", + "left": 20, "top": 722, + "text": " [3] I saw you in corridor B-7.", + "fontColor": "#e0e8f0", + "fontSize": 15 + }, + "confrontation-style-annotation": { + "type": "Text", + "left": 20, "top": 742, + "text": "Confrontation option: italicized first-person voice, heavier weight — same box, different register (D-063)", + "fontColor": "#3a4455", + "fontSize": 10 + }, + "invisible-lock-annotation": { + "type": "Text", + "left": 600, "top": 682, + "text": "More options may exist — player never sees locked options (D-062)", + "fontColor": "#3a4455", + "fontSize": 10 + }, + "skill-check-label": { + "type": "Text", + "left": 800, "top": 702, + "text": "skill checks: not shown in v0.1", + "fontColor": "#3a4455", + "fontSize": 10 + }, + "minimap-stub": { + "type": "Rectangle", + "left": 880, "top": 16, "width": 244, "height": 244, + "fillColor": "#12141a", + "strokeColor": "#333340", + "corners": [4, 4, 4, 4] + }, + "minimap-stub-label": { + "type": "Text", + "left": 900, "top": 124, + "text": "minimap", + "fontColor": "#333340", + "fontSize": 12 + }, + "annotation-title": { + "type": "Text", + "left": 16, "top": 16, + "text": "v0.1 DIALOGUE — PLAYER CHOOSING (CONFRONTATION AVAILABLE)", + "fontColor": "#556677", + "fontSize": 11 + }, + "annotation-notes": { + "type": "Text", + "left": 16, "top": 30, "width": 840, + "text": "Speaker name in D-033 amber (person of interest). 3 options. Option 3 = confrontation: first-person italic voice, heavier weight. No separate UI.", + "fontColor": "#3a4455", + "fontSize": 10, + "wordWrap": true + } + } +} diff --git a/docs/design/wireframes/dialogue/v01-dialogue-choosing.png b/docs/design/wireframes/dialogue/v01-dialogue-choosing.png new file mode 100644 index 000000000..007dc712b Binary files /dev/null and b/docs/design/wireframes/dialogue/v01-dialogue-choosing.png differ diff --git a/docs/design/wireframes/dialogue/v01-dialogue-overheard.json b/docs/design/wireframes/dialogue/v01-dialogue-overheard.json new file mode 100644 index 000000000..e1a7f6b60 --- /dev/null +++ b/docs/design/wireframes/dialogue/v01-dialogue-overheard.json @@ -0,0 +1,127 @@ +{ + "name": "v01-dialogue-overheard", + "shapes": { + "bg": { + "type": "Rectangle", + "left": 0, "top": 0, "width": 1140, "height": 760, + "fillColor": "#1a1e24", + "strokeColor": "#1a1e24" + }, + "bg-game-label": { + "type": "Text", + "left": 330, "top": 280, + "text": "GAME VIEW — TWO NPCS CONVERSING AT DISTANCE\n(player not in conversation, eavesdropping passively)", + "fontColor": "#333340", + "fontSize": 14 + }, + "dialogue-panel": { + "type": "Rectangle", + "left": 0, "top": 608, "width": 1140, "height": 152, + "fillColor": "#0d1018", + "strokeColor": "#333340" + }, + "dialogue-panel-accent": { + "type": "Rectangle", + "left": 0, "top": 608, "width": 1140, "height": 2, + "fillColor": "#252a35", + "strokeColor": "#252a35" + }, + "passive-indicator": { + "type": "Rectangle", + "left": 0, "top": 608, "width": 6, "height": 152, + "fillColor": "#333345", + "strokeColor": "#333345" + }, + "passive-label": { + "type": "Text", + "left": 14, "top": 612, + "text": "OVERHEARD", + "fontColor": "#556677", + "fontSize": 10 + }, + "speaker-name": { + "type": "Text", + "left": 14, "top": 626, + "text": "KAEL DAVAN", + "fontColor": "#6bc9a6", + "fontSize": 13 + }, + "speaker-arrow": { + "type": "Text", + "left": 116, "top": 626, + "text": "→ NAIA VOSS", + "fontColor": "#4a9ebb", + "fontSize": 13 + }, + "dialogue-text-occluded": { + "type": "Text", + "left": 14, "top": 646, "width": 1112, + "text": "... heard about the ... tomorrow. You need to ... before Torek finds ...", + "fontColor": "#9090a8", + "fontSize": 15, + "wordWrap": true + }, + "occlusion-annotation": { + "type": "Text", + "left": 14, "top": 682, + "text": "Per-word occlusion filter — server-computed. ... = dropped words. Same conversation, different fragments each playthrough. (D-078)", + "fontColor": "#3a4455", + "fontSize": 10 + }, + "separator": { + "type": "Line", + "left": 14, "top": 696, "width": 1112, "height": 0, + "strokeColor": "#222830" + }, + "no-response-label": { + "type": "Text", + "left": 14, "top": 704, + "text": "No response options — passive mode. Walk out of earshot to dismiss.", + "fontColor": "#444455", + "fontSize": 12 + }, + "listening-focus-label": { + "type": "Text", + "left": 600, "top": 718, + "text": "Stationary 30+ ticks = ListeningFocus boost — improves word visibility (D-071)", + "fontColor": "#3a4455", + "fontSize": 10 + }, + "distance-label": { + "type": "Text", + "left": 14, "top": 734, + "text": "Moderate distance / some noise zone → medium word probability", + "fontColor": "#3a4455", + "fontSize": 10 + }, + "minimap-stub": { + "type": "Rectangle", + "left": 880, "top": 16, "width": 244, "height": 244, + "fillColor": "#12141a", + "strokeColor": "#333340", + "corners": [4, 4, 4, 4] + }, + "minimap-stub-label": { + "type": "Text", + "left": 900, "top": 124, + "text": "minimap", + "fontColor": "#333340", + "fontSize": 12 + }, + "annotation-title": { + "type": "Text", + "left": 16, "top": 16, + "text": "v0.1 DIALOGUE — OVERHEARD (PASSIVE MODE)", + "fontColor": "#556677", + "fontSize": 11 + }, + "annotation-notes": { + "type": "Text", + "left": 16, "top": 30, "width": 840, + "text": "Same dialogue box, passive mode. Dimmed side accent. NPC names in D-033 colors. Occluded words as '...'. No response options. Unified log (D-061, D-078).", + "fontColor": "#3a4455", + "fontSize": 10, + "wordWrap": true + } + } +} diff --git a/docs/design/wireframes/dialogue/v01-dialogue-overheard.png b/docs/design/wireframes/dialogue/v01-dialogue-overheard.png new file mode 100644 index 000000000..252193f28 Binary files /dev/null and b/docs/design/wireframes/dialogue/v01-dialogue-overheard.png differ diff --git a/docs/design/wireframes/dialogue/v01-dialogue-speaking.json b/docs/design/wireframes/dialogue/v01-dialogue-speaking.json new file mode 100644 index 000000000..aa01b45d8 --- /dev/null +++ b/docs/design/wireframes/dialogue/v01-dialogue-speaking.json @@ -0,0 +1,135 @@ +{ + "name": "v01-dialogue-speaking", + "shapes": { + "bg": { + "type": "Rectangle", + "left": 0, "top": 0, "width": 1140, "height": 760, + "fillColor": "#1a1e24", + "strokeColor": "#1a1e24" + }, + "bg-game-label": { + "type": "Text", + "left": 380, "top": 280, + "text": "GAME VIEW — NPC ON SCREEN ABOVE DIALOGUE\n(no portrait — NPC is visible in world)", + "fontColor": "#333340", + "fontSize": 14 + }, + "monologue-area": { + "type": "Rectangle", + "left": 200, "top": 530, "width": 740, "height": 48, + "fillColor": "#00000000", + "strokeColor": "#00000000" + }, + "monologue-text": { + "type": "Text", + "left": 200, "top": 530, "width": 740, + "text": "She's choosing her words carefully. Something's off.", + "fontColor": "#d0d4e0", + "fontSize": 13, + "wordWrap": true + }, + "monologue-annotation": { + "type": "Text", + "left": 200, "top": 552, + "text": "Monologue — floats ABOVE dialogue box — z-layer 7", + "fontColor": "#3a4455", + "fontSize": 10 + }, + "dialogue-panel": { + "type": "Rectangle", + "left": 0, "top": 608, "width": 1140, "height": 152, + "fillColor": "#0d1018", + "strokeColor": "#333340" + }, + "dialogue-panel-accent": { + "type": "Rectangle", + "left": 0, "top": 608, "width": 1140, "height": 2, + "fillColor": "#333340", + "strokeColor": "#333340" + }, + "speaker-name": { + "type": "Text", + "left": 20, "top": 616, + "text": "SERA VENN", + "fontColor": "#c8d0e0", + "fontSize": 14 + }, + "speaker-arrow": { + "type": "Text", + "left": 108, "top": 616, + "text": "→ you", + "fontColor": "#556677", + "fontSize": 14 + }, + "dialogue-text": { + "type": "Text", + "left": 20, "top": 638, "width": 1100, + "text": "Heard there was a manifest audit this morning. Torek's been in a mood all shift. Nothing unusual, really — end of quarter, you know how it gets.", + "fontColor": "#e8eaf0", + "fontSize": 16, + "wordWrap": true + }, + "separator": { + "type": "Line", + "left": 20, "top": 698, "width": 1100, "height": 0, + "strokeColor": "#2a3040" + }, + "response-area-label": { + "type": "Text", + "left": 20, "top": 704, + "text": "▸ [1] Ask about the audit", + "fontColor": "#c0c8d8", + "fontSize": 14 + }, + "response-annotation": { + "type": "Text", + "left": 20, "top": 724, + "text": "Response options appear here (max 3 visible, locked options invisible per D-062)", + "fontColor": "#3a4455", + "fontSize": 10 + }, + "walk-away-hint": { + "type": "Text", + "left": 20, "top": 738, + "text": "[WASD] Walk away — fades over 300ms, no close button", + "fontColor": "#3a4455", + "fontSize": 10 + }, + "panel-width-annotation": { + "type": "Text", + "left": 0, "top": 596, + "text": "← max-width 1200px per D-076, centered — full width at 1140px test canvas →", + "fontColor": "#3a4455", + "fontSize": 10 + }, + "minimap-stub": { + "type": "Rectangle", + "left": 880, "top": 16, "width": 244, "height": 244, + "fillColor": "#12141a", + "strokeColor": "#333340", + "corners": [4, 4, 4, 4] + }, + "minimap-stub-label": { + "type": "Text", + "left": 900, "top": 124, + "text": "minimap", + "fontColor": "#333340", + "fontSize": 12 + }, + "annotation-title": { + "type": "Text", + "left": 16, "top": 16, + "text": "v0.1 DIALOGUE — NPC SPEAKING", + "fontColor": "#556677", + "fontSize": 11 + }, + "annotation-notes": { + "type": "Text", + "left": 16, "top": 30, "width": 840, + "text": "Bottom 20% of screen. No portrait. NPC is on screen above. Log shows Speaker → Target. Monologue floats above box.", + "fontColor": "#3a4455", + "fontSize": 10, + "wordWrap": true + } + } +} diff --git a/docs/design/wireframes/dialogue/v01-dialogue-speaking.png b/docs/design/wireframes/dialogue/v01-dialogue-speaking.png new file mode 100644 index 000000000..4444f662e Binary files /dev/null and b/docs/design/wireframes/dialogue/v01-dialogue-speaking.png differ diff --git a/docs/design/wireframes/dialogue/v10-dialogue-full.json b/docs/design/wireframes/dialogue/v10-dialogue-full.json new file mode 100644 index 000000000..0dac2e04d --- /dev/null +++ b/docs/design/wireframes/dialogue/v10-dialogue-full.json @@ -0,0 +1,222 @@ +{ + "name": "v10-dialogue-full", + "shapes": { + "bg": { + "type": "Rectangle", + "left": 0, "top": 0, "width": 1140, "height": 760, + "fillColor": "#1a1e24", + "strokeColor": "#1a1e24" + }, + "bg-game-label": { + "type": "Text", + "left": 370, "top": 270, + "text": "GAME VIEW — SERA VENN VISIBLE IN WORLD\n(entity color: amber, trust arc at peak doubt phase)", + "fontColor": "#333340", + "fontSize": 14 + }, + "monologue-area": { + "type": "Rectangle", + "left": 180, "top": 510, "width": 780, "height": 72, + "fillColor": "#00000000", + "strokeColor": "#00000000" + }, + "monologue-text": { + "type": "Text", + "left": 180, "top": 510, "width": 780, + "text": "She changed the subject. Fast.", + "fontColor": "#e0e8f8", + "fontSize": 13, + "wordWrap": true + }, + "monologue-subtext": { + "type": "Text", + "left": 180, "top": 530, "width": 780, + "text": "That's not how she normally answers. Something I said.", + "fontColor": "#a0aac0", + "fontSize": 12, + "wordWrap": true + }, + "monologue-note": { + "type": "Text", + "left": 180, "top": 552, + "text": "Chained monologue — second line arrives ~2s after first. Thought threading (v1.0).", + "fontColor": "#3a4455", + "fontSize": 10 + }, + "monologue-chain-line": { + "type": "Line", + "left": 178, "top": 510, "width": 0, "height": 48, + "strokeColor": "#333345" + }, + "dialogue-panel": { + "type": "Rectangle", + "left": 0, "top": 592, "width": 1140, "height": 168, + "fillColor": "#0d1018", + "strokeColor": "#333340" + }, + "dialogue-panel-accent": { + "type": "Rectangle", + "left": 0, "top": 592, "width": 1140, "height": 2, + "fillColor": "#333340", + "strokeColor": "#333340" + }, + "log-entry-prev": { + "type": "Text", + "left": 20, "top": 598, "width": 1000, + "text": "you → SERA VENN: Did you see who was with Kael last night?", + "fontColor": "#7788aa", + "fontSize": 13 + }, + "separator-log": { + "type": "Line", + "left": 20, "top": 618, "width": 1100, "height": 0, + "strokeColor": "#1e2430" + }, + "speaker-name": { + "type": "Text", + "left": 20, "top": 624, + "text": "SERA VENN", + "fontColor": "#e8c547", + "fontSize": 14 + }, + "speaker-arrow": { + "type": "Text", + "left": 110, "top": 624, + "text": "→ you", + "fontColor": "#556677", + "fontSize": 14 + }, + "relationship-indicator": { + "type": "Text", + "left": 900, "top": 624, + "text": "trust: REAL // phase: DOUBT", + "fontColor": "#e8c547", + "fontSize": 11 + }, + "dialogue-text": { + "type": "Text", + "left": 20, "top": 644, "width": 1100, + "text": "I didn't notice. You know how busy it gets at end of shift.", + "fontColor": "#e8eaf0", + "fontSize": 16, + "wordWrap": true + }, + "lie-detection-indicator": { + "type": "Rectangle", + "left": 1120, "top": 644, "width": 16, "height": 16, + "fillColor": "#e8c547", + "strokeColor": "#e8c547", + "corners": [2, 2, 2, 2] + }, + "lie-detection-label": { + "type": "Text", + "left": 1060, "top": 664, + "text": "stress marker", + "fontColor": "#e8c547", + "fontSize": 10 + }, + "lie-detection-note": { + "type": "Text", + "left": 900, "top": 676, + "text": "v1.0 feature — insert-based behavioral read", + "fontColor": "#3a4455", + "fontSize": 10 + }, + "separator": { + "type": "Line", + "left": 20, "top": 688, "width": 1100, "height": 0, + "strokeColor": "#2a3040" + }, + "response-1": { + "type": "Text", + "left": 20, "top": 696, + "text": "▸ [1] Ask about shift schedules", + "fontColor": "#c0c8d8", + "fontSize": 14 + }, + "response-2": { + "type": "Text", + "left": 20, "top": 716, + "text": "▸ [2] She's lying. Push harder.", + "fontColor": "#e0e8f0", + "fontSize": 15 + }, + "response-2-note": { + "type": "Text", + "left": 450, "top": 718, + "text": "confrontation weight", + "fontColor": "#3a4455", + "fontSize": 10 + }, + "response-3": { + "type": "Text", + "left": 20, "top": 736, + "text": "▸ [3] Let it go for now", + "fontColor": "#c0c8d8", + "fontSize": 14 + }, + "topic-sidebar": { + "type": "Rectangle", + "left": 1090, "top": 592, "width": 50, "height": 168, + "fillColor": "#0e1118", + "strokeColor": "#2a3040" + }, + "topic-label": { + "type": "Text", + "left": 1093, "top": 620, + "text": "KAEL", + "fontColor": "#e8c547", + "fontSize": 9 + }, + "topic-label-2": { + "type": "Text", + "left": 1093, "top": 645, + "text": "CARGO", + "fontColor": "#556677", + "fontSize": 9 + }, + "topic-label-3": { + "type": "Text", + "left": 1093, "top": 660, + "text": "SHIFT", + "fontColor": "#556677", + "fontSize": 9 + }, + "topic-sidebar-note": { + "type": "Text", + "left": 1050, "top": 762, + "text": "v1.0 topic tracker", + "fontColor": "#3a4455", + "fontSize": 9 + }, + "minimap-stub": { + "type": "Rectangle", + "left": 880, "top": 16, "width": 210, "height": 210, + "fillColor": "#12141a", + "strokeColor": "#333340", + "corners": [4, 4, 4, 4] + }, + "minimap-stub-label": { + "type": "Text", + "left": 940, "top": 100, + "text": "minimap", + "fontColor": "#333340", + "fontSize": 12 + }, + "annotation-title": { + "type": "Text", + "left": 16, "top": 16, + "text": "v1.0 DIALOGUE — FULL WITH OVERLAYS", + "fontColor": "#556677", + "fontSize": 11 + }, + "annotation-notes": { + "type": "Text", + "left": 16, "top": 30, "width": 840, + "text": "Unified log (previous exchange visible). Relationship status + trust phase. Lie detection / stress marker. Topic tracker sidebar. Chained monologue above.", + "fontColor": "#3a4455", + "fontSize": 10, + "wordWrap": true + } + } +} diff --git a/docs/design/wireframes/dialogue/v10-dialogue-full.png b/docs/design/wireframes/dialogue/v10-dialogue-full.png new file mode 100644 index 000000000..0e1d3f405 Binary files /dev/null and b/docs/design/wireframes/dialogue/v10-dialogue-full.png differ diff --git a/docs/design/wireframes/hud/v01-insert-basic.json b/docs/design/wireframes/hud/v01-insert-basic.json new file mode 100644 index 000000000..8d3a2e2b3 --- /dev/null +++ b/docs/design/wireframes/hud/v01-insert-basic.json @@ -0,0 +1,176 @@ +{ + "name": "v01-insert-basic", + "shapes": { + "bg": { + "type": "Rectangle", + "left": 0, "top": 0, "width": 1140, "height": 760, + "fillColor": "#1a1e24", + "strokeColor": "#1a1e24" + }, + "bg-label": { + "type": "Text", + "left": 430, "top": 330, + "text": "TOP-DOWN GAME VIEW\n(fog of perception, entities, tiles)", + "fontColor": "#333340", + "fontSize": 14 + }, + "minimap-frame": { + "type": "Rectangle", + "left": 880, "top": 16, "width": 244, "height": 244, + "fillColor": "#12141a", + "strokeColor": "#333340", + "corners": [4, 4, 4, 4] + }, + "minimap-inner": { + "type": "Rectangle", + "left": 892, "top": 28, "width": 220, "height": 220, + "fillColor": "#1a1e24", + "strokeColor": "#2a3040", + "corners": [2, 2, 2, 2] + }, + "minimap-player-dot": { + "type": "Ellipse", + "left": 994, "top": 130, "width": 8, "height": 8, + "fillColor": "#e0e8ff", + "strokeColor": "#c8d0e0" + }, + "minimap-poi-dot-1": { + "type": "Ellipse", + "left": 1040, "top": 100, "width": 6, "height": 6, + "fillColor": "#4a9ebb", + "strokeColor": "#4a9ebb" + }, + "minimap-poi-dot-2": { + "type": "Ellipse", + "left": 950, "top": 160, "width": 6, "height": 6, + "fillColor": "#6bc9a6", + "strokeColor": "#6bc9a6" + }, + "minimap-header": { + "type": "Text", + "left": 886, "top": 17, + "text": "INSERT // SOVA TRANSIT DISTRICT", + "fontColor": "#c8d0e0", + "fontSize": 11 + }, + "minimap-annotation": { + "type": "Text", + "left": 886, "top": 256, + "text": "Dots = known entities by relationship color", + "fontColor": "#556677", + "fontSize": 10 + }, + "time-display": { + "type": "Rectangle", + "left": 16, "top": 16, "width": 120, "height": 32, + "fillColor": "#12141a", + "strokeColor": "#333340", + "corners": [2, 2, 2, 2] + }, + "time-text": { + "type": "Text", + "left": 24, "top": 24, + "text": "07:42 // DAY 1", + "fontColor": "#c8d0e0", + "fontSize": 12 + }, + "stance-indicator": { + "type": "Rectangle", + "left": 16, "top": 56, "width": 80, "height": 24, + "fillColor": "#12141a", + "strokeColor": "#333340", + "corners": [2, 2, 2, 2] + }, + "stance-text": { + "type": "Text", + "left": 24, "top": 62, + "text": "WALK", + "fontColor": "#8899aa", + "fontSize": 11 + }, + "hint-bar": { + "type": "Rectangle", + "left": 0, "top": 728, "width": 1140, "height": 32, + "fillColor": "#0e1218", + "strokeColor": "#333340" + }, + "hint-interact": { + "type": "Text", + "left": 20, "top": 736, + "text": "[E] Interact", + "fontColor": "#8899aa", + "fontSize": 11 + }, + "hint-stance": { + "type": "Text", + "left": 140, "top": 736, + "text": "[Shift] Sprint [Alt] Careful [Ctrl] Crouch", + "fontColor": "#8899aa", + "fontSize": 11 + }, + "hint-insert": { + "type": "Text", + "left": 460, "top": 736, + "text": "[Tab] Toggle Insert", + "fontColor": "#8899aa", + "fontSize": 11 + }, + "hint-rmb": { + "type": "Text", + "left": 640, "top": 736, + "text": "[RMB] World Menu", + "fontColor": "#8899aa", + "fontSize": 11 + }, + "hint-pause": { + "type": "Text", + "left": 820, "top": 736, + "text": "[Esc] Pause", + "fontColor": "#8899aa", + "fontSize": 11 + }, + "hint-annotation": { + "type": "Text", + "left": 940, "top": 736, + "text": "v0.1 scope: hints bar", + "fontColor": "#3a4455", + "fontSize": 10 + }, + "monologue-area": { + "type": "Rectangle", + "left": 200, "top": 630, "width": 740, "height": 60, + "fillColor": "#0a0c10", + "strokeColor": "#222830", + "corners": [2, 2, 2, 2] + }, + "monologue-text": { + "type": "Text", + "left": 212, "top": 642, "width": 716, + "text": "Footsteps behind me. Two people, unhurried. Shift workers, probably.", + "fontColor": "#d0d4e0", + "fontSize": 13, + "wordWrap": true + }, + "monologue-annotation": { + "type": "Text", + "left": 200, "top": 696, + "text": "Monologue floats above dialogue box — z-layer 7 — no container chrome in full art", + "fontColor": "#3a4455", + "fontSize": 10 + }, + "annotation-title": { + "type": "Text", + "left": 16, "top": 700, + "text": "v0.1 BASIC INSERT HUD", + "fontColor": "#556677", + "fontSize": 11 + }, + "annotation-scope": { + "type": "Text", + "left": 16, "top": 715, + "text": "Minimal chrome: minimap, time, stance, monologue, hints", + "fontColor": "#3a4455", + "fontSize": 10 + } + } +} diff --git a/docs/design/wireframes/hud/v01-insert-basic.png b/docs/design/wireframes/hud/v01-insert-basic.png new file mode 100644 index 000000000..f2fc514f5 Binary files /dev/null and b/docs/design/wireframes/hud/v01-insert-basic.png differ diff --git a/docs/design/wireframes/hud/v10-insert-full.json b/docs/design/wireframes/hud/v10-insert-full.json new file mode 100644 index 000000000..2d1e50644 --- /dev/null +++ b/docs/design/wireframes/hud/v10-insert-full.json @@ -0,0 +1,328 @@ +{ + "name": "v10-insert-full", + "shapes": { + "bg": { + "type": "Rectangle", + "left": 0, "top": 0, "width": 1140, "height": 760, + "fillColor": "#1a1e24", + "strokeColor": "#1a1e24" + }, + "bg-label": { + "type": "Text", + "left": 400, "top": 310, + "text": "TOP-DOWN GAME VIEW\n(vision cone active, fog layers 1-5 visible,\nentity D-033 colors with bloom halos)", + "fontColor": "#333340", + "fontSize": 14 + }, + "minimap-frame": { + "type": "Rectangle", + "left": 880, "top": 16, "width": 244, "height": 244, + "fillColor": "#12141a", + "strokeColor": "#c8d0e0", + "corners": [4, 4, 4, 4] + }, + "minimap-inner": { + "type": "Rectangle", + "left": 892, "top": 28, "width": 220, "height": 220, + "fillColor": "#1a1e24", + "strokeColor": "#2a3040", + "corners": [2, 2, 2, 2] + }, + "minimap-player": { + "type": "Ellipse", + "left": 994, "top": 130, "width": 8, "height": 8, + "fillColor": "#e0e8ff", + "strokeColor": "#c8d0e0" + }, + "minimap-friendly": { + "type": "Ellipse", + "left": 1030, "top": 108, "width": 7, "height": 7, + "fillColor": "#6bc9a6", + "strokeColor": "#6bc9a6" + }, + "minimap-neutral": { + "type": "Ellipse", + "left": 950, "top": 90, "width": 7, "height": 7, + "fillColor": "#4a9ebb", + "strokeColor": "#4a9ebb" + }, + "minimap-poi": { + "type": "Ellipse", + "left": 965, "top": 160, "width": 7, "height": 7, + "fillColor": "#e8c547", + "strokeColor": "#e8c547" + }, + "minimap-header": { + "type": "Text", + "left": 886, "top": 17, + "text": "INSERT // SOVA TRANSIT", + "fontColor": "#c8d8f0", + "fontSize": 11 + }, + "minimap-zone-label": { + "type": "Text", + "left": 900, "top": 240, + "text": "THE TERMINAL // Z-LEVEL 1", + "fontColor": "#8899aa", + "fontSize": 10 + }, + "mode-panel": { + "type": "Rectangle", + "left": 880, "top": 268, "width": 244, "height": 160, + "fillColor": "#12141a", + "strokeColor": "#333340", + "corners": [4, 4, 4, 4] + }, + "mode-header": { + "type": "Text", + "left": 892, "top": 274, + "text": "PERCEPTION MODES", + "fontColor": "#8899aa", + "fontSize": 10 + }, + "mode-natural": { + "type": "Rectangle", + "left": 892, "top": 290, "width": 220, "height": 28, + "fillColor": "#1e2430", + "strokeColor": "#c8d8f0", + "corners": [2, 2, 2, 2] + }, + "mode-natural-label": { + "type": "Text", + "left": 900, "top": 298, + "text": "NATURAL VISION [active]", + "fontColor": "#c8d8f0", + "fontSize": 11 + }, + "mode-thermal": { + "type": "Rectangle", + "left": 892, "top": 324, "width": 220, "height": 28, + "fillColor": "#12141a", + "strokeColor": "#444455", + "corners": [2, 2, 2, 2] + }, + "mode-thermal-label": { + "type": "Text", + "left": 900, "top": 332, + "text": "THERMAL [locked — biononic req.]", + "fontColor": "#444455", + "fontSize": 11 + }, + "mode-camera": { + "type": "Rectangle", + "left": 892, "top": 358, "width": 220, "height": 28, + "fillColor": "#12141a", + "strokeColor": "#444455", + "corners": [2, 2, 2, 2] + }, + "mode-camera-label": { + "type": "Text", + "left": 900, "top": 366, + "text": "CAMERA FEEDS [3 available]", + "fontColor": "#444455", + "fontSize": 11 + }, + "mode-audio": { + "type": "Rectangle", + "left": 892, "top": 392, "width": 220, "height": 28, + "fillColor": "#12141a", + "strokeColor": "#555566", + "corners": [2, 2, 2, 2] + }, + "mode-audio-label": { + "type": "Text", + "left": 900, "top": 400, + "text": "AUDIO ANALYSIS [passive]", + "fontColor": "#6677aa", + "fontSize": 11 + }, + "mode-annotation": { + "type": "Text", + "left": 880, "top": 432, + "text": "v1.0: full mode panel — toggle-based", + "fontColor": "#3a4455", + "fontSize": 10 + }, + "density-panel": { + "type": "Rectangle", + "left": 880, "top": 448, "width": 244, "height": 64, + "fillColor": "#12141a", + "strokeColor": "#333340", + "corners": [4, 4, 4, 4] + }, + "density-header": { + "type": "Text", + "left": 892, "top": 454, + "text": "OVERLAY DENSITY", + "fontColor": "#8899aa", + "fontSize": 10 + }, + "density-bar-bg": { + "type": "Rectangle", + "left": 892, "top": 470, "width": 220, "height": 8, + "fillColor": "#2a3040", + "strokeColor": "#333340", + "corners": [2, 2, 2, 2] + }, + "density-bar-fill": { + "type": "Rectangle", + "left": 892, "top": 470, "width": 154, "height": 8, + "fillColor": "#c8d8f0", + "strokeColor": "#c8d8f0", + "corners": [2, 2, 2, 2] + }, + "density-label": { + "type": "Text", + "left": 892, "top": 482, + "text": "70% // AUGMENTED LATTICE", + "fontColor": "#6677aa", + "fontSize": 10 + }, + "time-display": { + "type": "Rectangle", + "left": 16, "top": 16, "width": 200, "height": 32, + "fillColor": "#12141a", + "strokeColor": "#333340", + "corners": [2, 2, 2, 2] + }, + "time-text": { + "type": "Text", + "left": 24, "top": 24, + "text": "07:42 // DAY 1 // EARLY SHIFT", + "fontColor": "#c8d0e0", + "fontSize": 12 + }, + "stance-row": { + "type": "Rectangle", + "left": 16, "top": 56, "width": 200, "height": 28, + "fillColor": "#12141a", + "strokeColor": "#333340", + "corners": [2, 2, 2, 2] + }, + "stance-text": { + "type": "Text", + "left": 24, "top": 64, + "text": "WALK // DETECTIVE", + "fontColor": "#8899aa", + "fontSize": 11 + }, + "insert-status": { + "type": "Rectangle", + "left": 16, "top": 92, "width": 200, "height": 24, + "fillColor": "#12141a", + "strokeColor": "#333340", + "corners": [2, 2, 2, 2] + }, + "insert-status-text": { + "type": "Text", + "left": 24, "top": 99, + "text": "INSERT ACTIVE // AUGMENTED", + "fontColor": "#c8d8f0", + "fontSize": 10 + }, + "case-panel": { + "type": "Rectangle", + "left": 16, "top": 124, "width": 200, "height": 120, + "fillColor": "#12141a", + "strokeColor": "#333340", + "corners": [4, 4, 4, 4] + }, + "case-header": { + "type": "Text", + "left": 24, "top": 130, + "text": "ACTIVE CASE", + "fontColor": "#8899aa", + "fontSize": 10 + }, + "case-entry-1": { + "type": "Text", + "left": 24, "top": 146, "width": 184, + "text": "Cargo discrepancy: manifest T-447 vs Bay 12 count", + "fontColor": "#c8d0e0", + "fontSize": 11, + "wordWrap": true + }, + "case-entry-2": { + "type": "Text", + "left": 24, "top": 186, + "text": "Kael Davan [amber — flagged]", + "fontColor": "#e8c547", + "fontSize": 11 + }, + "case-annotation": { + "type": "Text", + "left": 16, "top": 250, + "text": "Detective only — case file panel", + "fontColor": "#3a4455", + "fontSize": 10 + }, + "monologue-area": { + "type": "Rectangle", + "left": 220, "top": 610, "width": 700, "height": 72, + "fillColor": "#080a0d", + "strokeColor": "#1e2430", + "corners": [2, 2, 2, 2] + }, + "monologue-text": { + "type": "Text", + "left": 232, "top": 618, "width": 676, + "text": "Those footsteps... that's Kael's walk. What's he doing in this corridor at shift change?", + "fontColor": "#e0e8f8", + "fontSize": 13, + "wordWrap": true + }, + "monologue-urgent-indicator": { + "type": "Rectangle", + "left": 218, "top": 610, "width": 3, "height": 72, + "fillColor": "#c8d8f0", + "strokeColor": "#c8d8f0" + }, + "monologue-annotation": { + "type": "Text", + "left": 220, "top": 688, + "text": "Urgent monologue — full opacity + left accent bar. Chime fires at onset.", + "fontColor": "#3a4455", + "fontSize": 10 + }, + "hint-bar": { + "type": "Rectangle", + "left": 0, "top": 728, "width": 1140, "height": 32, + "fillColor": "#0e1218", + "strokeColor": "#333340" + }, + "hint-text": { + "type": "Text", + "left": 20, "top": 736, + "text": "[E] Interact [Shift] Sprint [Tab] Insert [M] Modes [J] Case File [RMB] World Menu [Esc] Pause", + "fontColor": "#6677aa", + "fontSize": 11 + }, + "glitch-bar-1": { + "type": "Rectangle", + "left": 0, "top": 330, "width": 870, "height": 1, + "fillColor": "#c8d8f0", + "strokeColor": "#c8d8f0" + }, + "glitch-label": { + "type": "Text", + "left": 16, "top": 318, + "text": "scan-line interference (diegetic overlay strain signal — 5% intensity)", + "fontColor": "#3a4455", + "fontSize": 10 + }, + "annotation-title": { + "type": "Text", + "left": 16, "top": 700, + "text": "v1.0 FULL INSERT HUD", + "fontColor": "#556677", + "fontSize": 11 + }, + "annotation-scope": { + "type": "Text", + "left": 16, "top": 714, + "text": "Perception modes, case panel, density control, glitch overlay, augmented lattice variant", + "fontColor": "#3a4455", + "fontSize": 10 + } + } +} diff --git a/docs/design/wireframes/hud/v10-insert-full.png b/docs/design/wireframes/hud/v10-insert-full.png new file mode 100644 index 000000000..527f8da88 Binary files /dev/null and b/docs/design/wireframes/hud/v10-insert-full.png differ diff --git a/docs/design/wireframes/menus/v01-main-menu.json b/docs/design/wireframes/menus/v01-main-menu.json new file mode 100644 index 000000000..3e3ca44cd --- /dev/null +++ b/docs/design/wireframes/menus/v01-main-menu.json @@ -0,0 +1,194 @@ +{ + "name": "v01-main-menu", + "shapes": { + "bg": { + "type": "Rectangle", + "left": 0, "top": 0, "width": 1140, "height": 760, + "fillColor": "#0e1218", + "strokeColor": "#0e1218" + }, + "bg-grid-h1": { + "type": "Line", + "left": 0, "top": 188, "width": 1140, "height": 0, + "strokeColor": "#13171e" + }, + "bg-grid-h2": { + "type": "Line", + "left": 0, "top": 376, "width": 1140, "height": 0, + "strokeColor": "#13171e" + }, + "bg-grid-h3": { + "type": "Line", + "left": 0, "top": 564, "width": 1140, "height": 0, + "strokeColor": "#13171e" + }, + "bg-grid-v1": { + "type": "Line", + "left": 380, "top": 0, "width": 0, "height": 760, + "strokeColor": "#13171e" + }, + "bg-grid-v2": { + "type": "Line", + "left": 760, "top": 0, "width": 0, "height": 760, + "strokeColor": "#13171e" + }, + "title-block": { + "type": "Rectangle", + "left": 350, "top": 200, "width": 440, "height": 120, + "fillColor": "#00000000", + "strokeColor": "#00000000" + }, + "title-line-top": { + "type": "Line", + "left": 350, "top": 200, "width": 440, "height": 0, + "strokeColor": "#333340" + }, + "title-line-bottom": { + "type": "Line", + "left": 350, "top": 320, "width": 440, "height": 0, + "strokeColor": "#333340" + }, + "title-text": { + "type": "Text", + "left": 360, "top": 220, + "text": "THE SETTLED REACH", + "fontColor": "#c8d0e0", + "fontSize": 28 + }, + "title-subtitle": { + "type": "Text", + "left": 360, "top": 262, + "text": "SOVA TRANSIT DISTRICT // KRENN SYSTEM", + "fontColor": "#556677", + "fontSize": 13 + }, + "title-version": { + "type": "Text", + "left": 360, "top": 292, + "text": "v0.1 // EARLY ACCESS BUILD", + "fontColor": "#3a4455", + "fontSize": 11 + }, + "menu-list": { + "type": "Rectangle", + "left": 400, "top": 360, "width": 340, "height": 220, + "fillColor": "#00000000", + "strokeColor": "#00000000" + }, + "btn-new": { + "type": "Rectangle", + "left": 400, "top": 360, "width": 340, "height": 40, + "fillColor": "#12161e", + "strokeColor": "#c8d0e0", + "corners": [2, 2, 2, 2] + }, + "btn-new-text": { + "type": "Text", + "left": 416, "top": 372, + "text": "NEW GAME", + "fontColor": "#c8d0e0", + "fontSize": 16 + }, + "btn-continue": { + "type": "Rectangle", + "left": 400, "top": 408, "width": 340, "height": 40, + "fillColor": "#0e1118", + "strokeColor": "#333340", + "corners": [2, 2, 2, 2] + }, + "btn-continue-text": { + "type": "Text", + "left": 416, "top": 420, + "text": "CONTINUE", + "fontColor": "#8899aa", + "fontSize": 16 + }, + "btn-load": { + "type": "Rectangle", + "left": 400, "top": 456, "width": 340, "height": 40, + "fillColor": "#0e1118", + "strokeColor": "#333340", + "corners": [2, 2, 2, 2] + }, + "btn-load-text": { + "type": "Text", + "left": 416, "top": 468, + "text": "LOAD GAME", + "fontColor": "#8899aa", + "fontSize": 16 + }, + "btn-options": { + "type": "Rectangle", + "left": 400, "top": 504, "width": 340, "height": 40, + "fillColor": "#0e1118", + "strokeColor": "#333340", + "corners": [2, 2, 2, 2] + }, + "btn-options-text": { + "type": "Text", + "left": 416, "top": 516, + "text": "OPTIONS", + "fontColor": "#8899aa", + "fontSize": 16 + }, + "btn-quit": { + "type": "Rectangle", + "left": 400, "top": 552, "width": 340, "height": 40, + "fillColor": "#0e1118", + "strokeColor": "#333340", + "corners": [2, 2, 2, 2] + }, + "btn-quit-text": { + "type": "Text", + "left": 416, "top": 564, + "text": "QUIT", + "fontColor": "#8899aa", + "fontSize": 16 + }, + "corner-tl": { + "type": "Line", + "left": 16, "top": 16, "width": 32, "height": 0, + "strokeColor": "#333340" + }, + "corner-tl-v": { + "type": "Line", + "left": 16, "top": 16, "width": 0, "height": 32, + "strokeColor": "#333340" + }, + "corner-br": { + "type": "Line", + "left": 1092, "top": 744, "width": 32, "height": 0, + "strokeColor": "#333340" + }, + "corner-br-v": { + "type": "Line", + "left": 1124, "top": 712, "width": 0, "height": 32, + "strokeColor": "#333340" + }, + "corner-tr": { + "type": "Line", + "left": 1092, "top": 16, "width": 32, "height": 0, + "strokeColor": "#333340" + }, + "corner-tr-v": { + "type": "Line", + "left": 1124, "top": 16, "width": 0, "height": 32, + "strokeColor": "#333340" + }, + "annotation-title": { + "type": "Text", + "left": 16, "top": 720, + "text": "v0.1 MAIN MENU", + "fontColor": "#556677", + "fontSize": 11 + }, + "annotation-notes": { + "type": "Text", + "left": 16, "top": 734, "width": 1100, + "text": "Dark bg with subtle grid. Title block. Vertical menu list. Corner chrome (insert visual language). Continue greyed if no save exists.", + "fontColor": "#3a4455", + "fontSize": 10, + "wordWrap": true + } + } +} diff --git a/docs/design/wireframes/menus/v01-main-menu.png b/docs/design/wireframes/menus/v01-main-menu.png new file mode 100644 index 000000000..34df7674e Binary files /dev/null and b/docs/design/wireframes/menus/v01-main-menu.png differ diff --git a/docs/design/wireframes/menus/v01-pause-menu.json b/docs/design/wireframes/menus/v01-pause-menu.json new file mode 100644 index 000000000..152477331 --- /dev/null +++ b/docs/design/wireframes/menus/v01-pause-menu.json @@ -0,0 +1,155 @@ +{ + "name": "v01-pause-menu", + "shapes": { + "bg": { + "type": "Rectangle", + "left": 0, "top": 0, "width": 1140, "height": 760, + "fillColor": "#08090c" + }, + "game-view-behind": { + "type": "Text", + "left": 380, "top": 340, + "text": "(game world visible behind — dimmed)", + "fontColor": "#222830", + "fontSize": 12 + }, + "sidebar": { + "type": "Rectangle", + "left": 0, "top": 0, "width": 280, "height": 760, + "fillColor": "#0d1018", + "strokeColor": "#333340" + }, + "sidebar-header": { + "type": "Text", + "left": 20, "top": 24, + "text": "PAUSED", + "fontColor": "#c8d0e0", + "fontSize": 20 + }, + "sidebar-sub": { + "type": "Text", + "left": 20, "top": 50, + "text": "SOVA TRANSIT // 07:42", + "fontColor": "#556677", + "fontSize": 11 + }, + "sidebar-divider": { + "type": "Line", + "left": 20, "top": 68, "width": 240, "height": 0, + "strokeColor": "#333340" + }, + "nav-resume": { + "type": "Rectangle", + "left": 16, "top": 80, "width": 248, "height": 40, + "fillColor": "#1a2030", + "strokeColor": "#c8d8f0", + "corners": [2, 2, 2, 2] + }, + "nav-resume-text": { + "type": "Text", + "left": 28, "top": 92, + "text": "RESUME [Esc]", + "fontColor": "#c8d8f0", + "fontSize": 14 + }, + "nav-journal": { + "type": "Rectangle", + "left": 16, "top": 128, "width": 248, "height": 40, + "fillColor": "#0d1018", + "strokeColor": "#333340", + "corners": [2, 2, 2, 2] + }, + "nav-journal-text": { + "type": "Text", + "left": 28, "top": 140, + "text": "CASE FILE / NOTES [J]", + "fontColor": "#8899aa", + "fontSize": 14 + }, + "nav-map": { + "type": "Rectangle", + "left": 16, "top": 176, "width": 248, "height": 40, + "fillColor": "#0d1018", + "strokeColor": "#333340", + "corners": [2, 2, 2, 2] + }, + "nav-map-text": { + "type": "Text", + "left": 28, "top": 188, + "text": "MAP [M]", + "fontColor": "#8899aa", + "fontSize": 14 + }, + "nav-save": { + "type": "Rectangle", + "left": 16, "top": 224, "width": 248, "height": 40, + "fillColor": "#0d1018", + "strokeColor": "#333340", + "corners": [2, 2, 2, 2] + }, + "nav-save-text": { + "type": "Text", + "left": 28, "top": 236, + "text": "SAVE GAME", + "fontColor": "#8899aa", + "fontSize": 14 + }, + "nav-options": { + "type": "Rectangle", + "left": 16, "top": 272, "width": 248, "height": 40, + "fillColor": "#0d1018", + "strokeColor": "#333340", + "corners": [2, 2, 2, 2] + }, + "nav-options-text": { + "type": "Text", + "left": 28, "top": 284, + "text": "OPTIONS", + "fontColor": "#8899aa", + "fontSize": 14 + }, + "nav-quit": { + "type": "Rectangle", + "left": 16, "top": 704, "width": 248, "height": 40, + "fillColor": "#0d1018", + "strokeColor": "#333340", + "corners": [2, 2, 2, 2] + }, + "nav-quit-text": { + "type": "Text", + "left": 28, "top": 716, + "text": "QUIT TO MAIN MENU", + "fontColor": "#8899aa", + "fontSize": 14 + }, + "content-area": { + "type": "Rectangle", + "left": 296, "top": 20, "width": 828, "height": 720, + "fillColor": "#0a0d12", + "strokeColor": "#222830", + "corners": [2, 2, 2, 2] + }, + "content-placeholder": { + "type": "Text", + "left": 560, "top": 360, + "text": "Content panel\n(journal / map / save / options)", + "fontColor": "#2a3040", + "fontSize": 14 + }, + "annotation-title": { + "type": "Text", + "left": 296, "top": 732, + "text": "v0.1 PAUSE MENU", + "fontColor": "#556677", + "fontSize": 11 + }, + "annotation-notes": { + "type": "Text", + "left": 296, "top": 746, "width": 800, + "text": "Dark overlay over game world. Left sidebar nav. Resume is default-selected. Content panel changes per selection. Quit requires confirm modal.", + "fontColor": "#3a4455", + "fontSize": 10, + "wordWrap": true + } + } +} diff --git a/docs/design/wireframes/menus/v01-pause-menu.png b/docs/design/wireframes/menus/v01-pause-menu.png new file mode 100644 index 000000000..43d2e1651 Binary files /dev/null and b/docs/design/wireframes/menus/v01-pause-menu.png differ diff --git a/docs/design/wireframes/menus/v01-save-load.json b/docs/design/wireframes/menus/v01-save-load.json new file mode 100644 index 000000000..60a39096c --- /dev/null +++ b/docs/design/wireframes/menus/v01-save-load.json @@ -0,0 +1,192 @@ +{ + "name": "v01-save-load", + "shapes": { + "bg": { + "type": "Rectangle", + "left": 0, "top": 0, "width": 1140, "height": 760, + "fillColor": "#0a0d12" + }, + "panel": { + "type": "Rectangle", + "left": 120, "top": 60, "width": 900, "height": 640, + "fillColor": "#0d1018", + "strokeColor": "#333340", + "corners": [4, 4, 4, 4] + }, + "panel-header": { + "type": "Rectangle", + "left": 120, "top": 60, "width": 900, "height": 48, + "fillColor": "#12161e", + "strokeColor": "#333340", + "corners": [4, 4, 0, 0] + }, + "panel-title": { + "type": "Text", + "left": 140, "top": 76, + "text": "SAVE / LOAD", + "fontColor": "#c8d0e0", + "fontSize": 18 + }, + "panel-close": { + "type": "Text", + "left": 984, "top": 76, + "text": "[Esc]", + "fontColor": "#556677", + "fontSize": 14 + }, + "tab-save": { + "type": "Rectangle", + "left": 140, "top": 116, "width": 120, "height": 32, + "fillColor": "#1a2030", + "strokeColor": "#c8d0e0", + "corners": [2, 2, 0, 0] + }, + "tab-save-text": { + "type": "Text", + "left": 156, "top": 125, + "text": "SAVE", + "fontColor": "#c8d0e0", + "fontSize": 13 + }, + "tab-load": { + "type": "Rectangle", + "left": 264, "top": 116, "width": 120, "height": 32, + "fillColor": "#0d1018", + "strokeColor": "#333340", + "corners": [2, 2, 0, 0] + }, + "tab-load-text": { + "type": "Text", + "left": 280, "top": 125, + "text": "LOAD", + "fontColor": "#556677", + "fontSize": 13 + }, + "save-slot-1-active": { + "type": "Rectangle", + "left": 140, "top": 156, "width": 860, "height": 72, + "fillColor": "#1a2030", + "strokeColor": "#c8d8f0", + "corners": [2, 2, 2, 2] + }, + "save-slot-1-accent": { + "type": "Rectangle", + "left": 140, "top": 156, "width": 3, "height": 72, + "fillColor": "#c8d8f0", + "strokeColor": "#c8d8f0" + }, + "slot-1-date": { + "type": "Text", + "left": 152, "top": 162, + "text": "AUTOSAVE // Day 1, 07:42", + "fontColor": "#c8d0e0", + "fontSize": 13 + }, + "slot-1-location": { + "type": "Text", + "left": 152, "top": 180, + "text": "The Terminal — morning shift // Detective", + "fontColor": "#8899aa", + "fontSize": 12 + }, + "slot-1-timestamp": { + "type": "Text", + "left": 152, "top": 198, + "text": "saved: 2026-02-23 14:31", + "fontColor": "#556677", + "fontSize": 11 + }, + "slot-1-actions": { + "type": "Text", + "left": 860, "top": 175, + "text": "[Enter] Overwrite / Load", + "fontColor": "#c8d8f0", + "fontSize": 12 + }, + "save-slot-2": { + "type": "Rectangle", + "left": 140, "top": 236, "width": 860, "height": 72, + "fillColor": "#0e1118", + "strokeColor": "#333340", + "corners": [2, 2, 2, 2] + }, + "slot-2-date": { + "type": "Text", + "left": 152, "top": 250, + "text": "SLOT 2 // Day 1, 06:15", + "fontColor": "#8899aa", + "fontSize": 13 + }, + "slot-2-location": { + "type": "Text", + "left": 152, "top": 268, + "text": "Arrival — entering Sova Transit // Detective", + "fontColor": "#556677", + "fontSize": 12 + }, + "slot-2-timestamp": { + "type": "Text", + "left": 152, "top": 286, + "text": "saved: 2026-02-23 13:10", + "fontColor": "#3a4455", + "fontSize": 11 + }, + "save-slot-3": { + "type": "Rectangle", + "left": 140, "top": 316, "width": 860, "height": 72, + "fillColor": "#0e1118", + "strokeColor": "#333340", + "corners": [2, 2, 2, 2] + }, + "slot-3-date": { + "type": "Text", + "left": 152, "top": 330, + "text": "SLOT 3 // Day 1, 07:30", + "fontColor": "#8899aa", + "fontSize": 13 + }, + "slot-3-location": { + "type": "Text", + "left": 152, "top": 348, + "text": "Corridor B-7 — Kael spotted // Smuggler", + "fontColor": "#556677", + "fontSize": 12 + }, + "slot-3-timestamp": { + "type": "Text", + "left": 152, "top": 366, + "text": "saved: 2026-02-23 12:48", + "fontColor": "#3a4455", + "fontSize": 11 + }, + "empty-slots-label": { + "type": "Text", + "left": 140, "top": 400, + "text": "SLOTS 4-8 — empty", + "fontColor": "#2a3040", + "fontSize": 12 + }, + "save-note": { + "type": "Text", + "left": 140, "top": 660, + "text": "Autosave on: zone transitions, conversation ends, significant events", + "fontColor": "#3a4455", + "fontSize": 11 + }, + "annotation-title": { + "type": "Text", + "left": 16, "top": 720, + "text": "v0.1 SAVE / LOAD SCREEN", + "fontColor": "#556677", + "fontSize": 11 + }, + "annotation-notes": { + "type": "Text", + "left": 16, "top": 734, "width": 1100, + "text": "Tab UI: Save / Load. Slots show: timestamp, in-game time+location, character. Autosave shown separately. Active slot has accent bar. No screenshots in v0.1.", + "fontColor": "#3a4455", + "fontSize": 10, + "wordWrap": true + } + } +} diff --git a/docs/design/wireframes/menus/v01-save-load.png b/docs/design/wireframes/menus/v01-save-load.png new file mode 100644 index 000000000..612bd791b Binary files /dev/null and b/docs/design/wireframes/menus/v01-save-load.png differ diff --git a/docs/design/wireframes/menus/v10-main-menu.json b/docs/design/wireframes/menus/v10-main-menu.json new file mode 100644 index 000000000..c41e9bba0 --- /dev/null +++ b/docs/design/wireframes/menus/v10-main-menu.json @@ -0,0 +1,270 @@ +{ + "name": "v10-main-menu", + "shapes": { + "bg": { + "type": "Rectangle", + "left": 0, "top": 0, "width": 1140, "height": 760, + "fillColor": "#08090c" + }, + "bg-insert-grid-h1": { + "type": "Line", + "left": 0, "top": 152, "width": 1140, "height": 0, + "strokeColor": "#0e1218" + }, + "bg-insert-grid-h2": { + "type": "Line", + "left": 0, "top": 304, "width": 1140, "height": 0, + "strokeColor": "#0e1218" + }, + "bg-insert-grid-h3": { + "type": "Line", + "left": 0, "top": 456, "width": 1140, "height": 0, + "strokeColor": "#0e1218" + }, + "bg-insert-grid-h4": { + "type": "Line", + "left": 0, "top": 608, "width": 1140, "height": 0, + "strokeColor": "#0e1218" + }, + "bg-insert-grid-v1": { + "type": "Line", + "left": 228, "top": 0, "width": 0, "height": 760, + "strokeColor": "#0e1218" + }, + "bg-insert-grid-v2": { + "type": "Line", + "left": 456, "top": 0, "width": 0, "height": 760, + "strokeColor": "#0e1218" + }, + "bg-insert-grid-v3": { + "type": "Line", + "left": 684, "top": 0, "width": 0, "height": 760, + "strokeColor": "#0e1218" + }, + "bg-insert-grid-v4": { + "type": "Line", + "left": 912, "top": 0, "width": 0, "height": 760, + "strokeColor": "#0e1218" + }, + "title-area": { + "type": "Rectangle", + "left": 60, "top": 130, "width": 580, "height": 200, + "fillColor": "#00000000", + "strokeColor": "#00000000" + }, + "title-main": { + "type": "Text", + "left": 60, "top": 130, + "text": "THE SETTLED REACH", + "fontColor": "#c8d0e0", + "fontSize": 36 + }, + "title-divider": { + "type": "Line", + "left": 60, "top": 180, "width": 420, "height": 0, + "strokeColor": "#c8d0e0" + }, + "title-sub-1": { + "type": "Text", + "left": 60, "top": 192, + "text": "SOVA TRANSIT DISTRICT", + "fontColor": "#8899aa", + "fontSize": 14 + }, + "title-sub-2": { + "type": "Text", + "left": 60, "top": 212, + "text": "Station Sova // Krenn System // ~180 years settled", + "fontColor": "#556677", + "fontSize": 12 + }, + "title-tagline": { + "type": "Text", + "left": 60, "top": 240, + "text": "Every character knows something you don't.", + "fontColor": "#3a5070", + "fontSize": 13 + }, + "menu-list": { + "type": "Rectangle", + "left": 60, "top": 320, "width": 380, "height": 280, + "fillColor": "#00000000", + "strokeColor": "#00000000" + }, + "btn-new": { + "type": "Rectangle", + "left": 60, "top": 320, "width": 380, "height": 48, + "fillColor": "#10181e", + "strokeColor": "#c8d0e0", + "corners": [2, 2, 2, 2] + }, + "btn-new-text": { + "type": "Text", + "left": 76, "top": 336, + "text": "NEW GAME", + "fontColor": "#c8d0e0", + "fontSize": 18 + }, + "btn-continue": { + "type": "Rectangle", + "left": 60, "top": 376, "width": 380, "height": 48, + "fillColor": "#0a0e14", + "strokeColor": "#333340", + "corners": [2, 2, 2, 2] + }, + "btn-continue-text": { + "type": "Text", + "left": 76, "top": 392, + "text": "CONTINUE", + "fontColor": "#8899aa", + "fontSize": 18 + }, + "btn-continue-detail": { + "type": "Text", + "left": 260, "top": 396, + "text": "Day 1 // 07:42", + "fontColor": "#556677", + "fontSize": 12 + }, + "btn-load": { + "type": "Rectangle", + "left": 60, "top": 432, "width": 380, "height": 48, + "fillColor": "#0a0e14", + "strokeColor": "#333340", + "corners": [2, 2, 2, 2] + }, + "btn-load-text": { + "type": "Text", + "left": 76, "top": 448, + "text": "LOAD GAME", + "fontColor": "#8899aa", + "fontSize": 18 + }, + "btn-options": { + "type": "Rectangle", + "left": 60, "top": 488, "width": 380, "height": 48, + "fillColor": "#0a0e14", + "strokeColor": "#333340", + "corners": [2, 2, 2, 2] + }, + "btn-options-text": { + "type": "Text", + "left": 76, "top": 504, + "text": "OPTIONS", + "fontColor": "#8899aa", + "fontSize": 18 + }, + "btn-credits": { + "type": "Rectangle", + "left": 60, "top": 536, "width": 380, "height": 48, + "fillColor": "#0a0e14", + "strokeColor": "#333340", + "corners": [2, 2, 2, 2] + }, + "btn-credits-text": { + "type": "Text", + "left": 76, "top": 552, + "text": "CREDITS", + "fontColor": "#8899aa", + "fontSize": 18 + }, + "character-preview-area": { + "type": "Rectangle", + "left": 700, "top": 80, "width": 420, "height": 600, + "fillColor": "#0a0e14", + "strokeColor": "#1a2030", + "corners": [2, 2, 2, 2] + }, + "char-preview-label": { + "type": "Text", + "left": 716, "top": 96, + "text": "CHARACTER SELECT PREVIEW", + "fontColor": "#556677", + "fontSize": 11 + }, + "char-tab-detective": { + "type": "Rectangle", + "left": 716, "top": 116, "width": 180, "height": 32, + "fillColor": "#1a2030", + "strokeColor": "#e0e8ff", + "corners": [2, 2, 0, 0] + }, + "char-tab-detective-text": { + "type": "Text", + "left": 730, "top": 124, + "text": "DETECTIVE", + "fontColor": "#e0e8ff", + "fontSize": 13 + }, + "char-tab-smuggler": { + "type": "Rectangle", + "left": 900, "top": 116, "width": 180, "height": 32, + "fillColor": "#0d1118", + "strokeColor": "#444455", + "corners": [2, 2, 0, 0] + }, + "char-tab-smuggler-text": { + "type": "Text", + "left": 918, "top": 124, + "text": "SMUGGLER", + "fontColor": "#444455", + "fontSize": 13 + }, + "char-entity-repr": { + "type": "Ellipse", + "left": 858, "top": 200, "width": 48, "height": 60, + "fillColor": "#e0e8ff", + "strokeColor": "#c8d0e0" + }, + "char-entity-label": { + "type": "Text", + "left": 844, "top": 268, + "text": "entity representation", + "fontColor": "#3a4455", + "fontSize": 10 + }, + "char-name": { + "type": "Text", + "left": 716, "top": 312, + "text": "Commission Field Detective", + "fontColor": "#c8d0e0", + "fontSize": 14 + }, + "char-description": { + "type": "Text", + "left": 716, "top": 336, "width": 384, + "text": "Analytical lattice hardware. Institutional authority. Case-file evidence presentation. You see connections others overlook.", + "fontColor": "#8899aa", + "fontSize": 12, + "wordWrap": true + }, + "char-starting-zone": { + "type": "Text", + "left": 716, "top": 400, + "text": "Starting zone: Commission kiosk, The Terminal", + "fontColor": "#6677aa", + "fontSize": 12 + }, + "char-perk-1": { + "type": "Text", + "left": 716, "top": 420, + "text": "Authority access // Analytical lattice // Case file", + "fontColor": "#556677", + "fontSize": 11 + }, + "version-text": { + "type": "Text", + "left": 16, "top": 740, + "text": "THE SETTLED REACH // v1.0 // build 2026", + "fontColor": "#2a3040", + "fontSize": 11 + }, + "annotation-title": { + "type": "Text", + "left": 16, "top": 726, + "text": "v1.0 MAIN MENU", + "fontColor": "#556677", + "fontSize": 11 + } + } +} diff --git a/docs/design/wireframes/menus/v10-main-menu.png b/docs/design/wireframes/menus/v10-main-menu.png new file mode 100644 index 000000000..f4d1c9039 Binary files /dev/null and b/docs/design/wireframes/menus/v10-main-menu.png differ diff --git a/docs/design/wireframes/menus/v10-options-full.json b/docs/design/wireframes/menus/v10-options-full.json new file mode 100644 index 000000000..f00068438 --- /dev/null +++ b/docs/design/wireframes/menus/v10-options-full.json @@ -0,0 +1,428 @@ +{ + "name": "v10-options-full", + "shapes": { + "bg": { + "type": "Rectangle", + "left": 0, "top": 0, "width": 1140, "height": 760, + "fillColor": "#0a0d12" + }, + "panel": { + "type": "Rectangle", + "left": 40, "top": 40, "width": 1060, "height": 680, + "fillColor": "#0d1018", + "strokeColor": "#333340", + "corners": [4, 4, 4, 4] + }, + "panel-header": { + "type": "Rectangle", + "left": 40, "top": 40, "width": 1060, "height": 52, + "fillColor": "#12161e", + "strokeColor": "#333340", + "corners": [4, 4, 0, 0] + }, + "panel-title": { + "type": "Text", + "left": 60, "top": 58, + "text": "INSERT SETTINGS // OPTIONS", + "fontColor": "#c8d0e0", + "fontSize": 18 + }, + "panel-close": { + "type": "Text", + "left": 1060, "top": 58, + "text": "[Esc]", + "fontColor": "#556677", + "fontSize": 14 + }, + "sidebar": { + "type": "Rectangle", + "left": 40, "top": 92, "width": 200, "height": 628, + "fillColor": "#0a0d12", + "strokeColor": "#1e2430" + }, + "nav-display": { + "type": "Rectangle", + "left": 48, "top": 100, "width": 184, "height": 36, + "fillColor": "#1a2030", + "strokeColor": "#c8d0e0", + "corners": [2, 2, 2, 2] + }, + "nav-display-text": { + "type": "Text", + "left": 60, "top": 111, + "text": "DISPLAY", + "fontColor": "#c8d0e0", + "fontSize": 13 + }, + "nav-audio": { + "type": "Rectangle", + "left": 48, "top": 144, "width": 184, "height": 36, + "fillColor": "#0a0d12", + "strokeColor": "#00000000", + "corners": [2, 2, 2, 2] + }, + "nav-audio-text": { + "type": "Text", + "left": 60, "top": 155, + "text": "AUDIO", + "fontColor": "#8899aa", + "fontSize": 13 + }, + "nav-insert": { + "type": "Rectangle", + "left": 48, "top": 188, "width": 184, "height": 36, + "fillColor": "#0a0d12", + "strokeColor": "#00000000", + "corners": [2, 2, 2, 2] + }, + "nav-insert-text": { + "type": "Text", + "left": 60, "top": 199, + "text": "INSERT / HUD", + "fontColor": "#8899aa", + "fontSize": 13 + }, + "nav-controls": { + "type": "Rectangle", + "left": 48, "top": 232, "width": 184, "height": 36, + "fillColor": "#0a0d12", + "strokeColor": "#00000000", + "corners": [2, 2, 2, 2] + }, + "nav-controls-text": { + "type": "Text", + "left": 60, "top": 243, + "text": "CONTROLS", + "fontColor": "#8899aa", + "fontSize": 13 + }, + "nav-access": { + "type": "Rectangle", + "left": 48, "top": 276, "width": 184, "height": 36, + "fillColor": "#0a0d12", + "strokeColor": "#00000000", + "corners": [2, 2, 2, 2] + }, + "nav-access-text": { + "type": "Text", + "left": 60, "top": 287, + "text": "ACCESSIBILITY", + "fontColor": "#8899aa", + "fontSize": 13 + }, + "content": { + "type": "Rectangle", + "left": 256, "top": 92, "width": 844, "height": 628, + "fillColor": "#00000000", + "strokeColor": "#00000000" + }, + "content-section-title": { + "type": "Text", + "left": 272, "top": 104, + "text": "DISPLAY", + "fontColor": "#c8d0e0", + "fontSize": 16 + }, + "content-divider": { + "type": "Line", + "left": 272, "top": 128, "width": 812, "height": 0, + "strokeColor": "#333340" + }, + "setting-1-label": { + "type": "Text", + "left": 272, "top": 140, + "text": "Resolution", + "fontColor": "#8899aa", + "fontSize": 14 + }, + "setting-1-value": { + "type": "Rectangle", + "left": 680, "top": 134, "width": 180, "height": 30, + "fillColor": "#1a2030", + "strokeColor": "#c8d0e0", + "corners": [2, 2, 2, 2] + }, + "setting-1-value-text": { + "type": "Text", + "left": 700, "top": 142, + "text": "1920 × 1080", + "fontColor": "#c8d0e0", + "fontSize": 13 + }, + "setting-2-label": { + "type": "Text", + "left": 272, "top": 178, + "text": "Fullscreen", + "fontColor": "#8899aa", + "fontSize": 14 + }, + "setting-2-toggle": { + "type": "Rectangle", + "left": 680, "top": 172, "width": 60, "height": 24, + "fillColor": "#1a2030", + "strokeColor": "#c8d8f0", + "corners": [12, 12, 12, 12] + }, + "setting-2-toggle-on": { + "type": "Ellipse", + "left": 716, "top": 176, "width": 16, "height": 16, + "fillColor": "#c8d8f0", + "strokeColor": "#c8d8f0" + }, + "audio-section-title": { + "type": "Text", + "left": 272, "top": 224, + "text": "AUDIO", + "fontColor": "#c8d0e0", + "fontSize": 16 + }, + "audio-divider": { + "type": "Line", + "left": 272, "top": 248, "width": 812, "height": 0, + "strokeColor": "#333340" + }, + "audio-master-label": { + "type": "Text", + "left": 272, "top": 260, + "text": "Master Volume", + "fontColor": "#8899aa", + "fontSize": 14 + }, + "audio-master-bar-bg": { + "type": "Rectangle", + "left": 560, "top": 264, "width": 400, "height": 8, + "fillColor": "#2a3040", + "strokeColor": "#333340", + "corners": [2, 2, 2, 2] + }, + "audio-master-bar-fill": { + "type": "Rectangle", + "left": 560, "top": 264, "width": 320, "height": 8, + "fillColor": "#c8d0e0", + "strokeColor": "#c8d0e0", + "corners": [2, 2, 0, 0] + }, + "audio-master-value": { + "type": "Text", + "left": 968, "top": 258, + "text": "80%", + "fontColor": "#c8d0e0", + "fontSize": 13 + }, + "audio-ambient-label": { + "type": "Text", + "left": 272, "top": 296, + "text": "Ambient", + "fontColor": "#8899aa", + "fontSize": 14 + }, + "audio-ambient-bar-bg": { + "type": "Rectangle", + "left": 560, "top": 300, "width": 400, "height": 8, + "fillColor": "#2a3040", + "strokeColor": "#333340", + "corners": [2, 2, 2, 2] + }, + "audio-ambient-bar-fill": { + "type": "Rectangle", + "left": 560, "top": 300, "width": 360, "height": 8, + "fillColor": "#8899aa", + "strokeColor": "#8899aa", + "corners": [2, 2, 0, 0] + }, + "audio-ambient-value": { + "type": "Text", + "left": 968, "top": 294, + "text": "90%", + "fontColor": "#8899aa", + "fontSize": 13 + }, + "audio-sfx-label": { + "type": "Text", + "left": 272, "top": 332, + "text": "Sound FX", + "fontColor": "#8899aa", + "fontSize": 14 + }, + "audio-sfx-bar-bg": { + "type": "Rectangle", + "left": 560, "top": 336, "width": 400, "height": 8, + "fillColor": "#2a3040", + "strokeColor": "#333340", + "corners": [2, 2, 2, 2] + }, + "audio-sfx-bar-fill": { + "type": "Rectangle", + "left": 560, "top": 336, "width": 300, "height": 8, + "fillColor": "#8899aa", + "strokeColor": "#8899aa", + "corners": [2, 2, 0, 0] + }, + "audio-sfx-value": { + "type": "Text", + "left": 968, "top": 330, + "text": "75%", + "fontColor": "#8899aa", + "fontSize": 13 + }, + "insert-section-title": { + "type": "Text", + "left": 272, "top": 380, + "text": "INSERT / HUD", + "fontColor": "#c8d0e0", + "fontSize": 16 + }, + "insert-divider": { + "type": "Line", + "left": 272, "top": 404, "width": 812, "height": 0, + "strokeColor": "#333340" + }, + "insert-density-label": { + "type": "Text", + "left": 272, "top": 416, + "text": "Overlay Density", + "fontColor": "#8899aa", + "fontSize": 14 + }, + "insert-density-bar-bg": { + "type": "Rectangle", + "left": 560, "top": 420, "width": 400, "height": 8, + "fillColor": "#2a3040", + "strokeColor": "#333340", + "corners": [2, 2, 2, 2] + }, + "insert-density-bar-fill": { + "type": "Rectangle", + "left": 560, "top": 420, "width": 280, "height": 8, + "fillColor": "#c8d8f0", + "strokeColor": "#c8d8f0", + "corners": [2, 2, 0, 0] + }, + "insert-density-value": { + "type": "Text", + "left": 968, "top": 414, + "text": "70%", + "fontColor": "#c8d8f0", + "fontSize": 13 + }, + "insert-monologue-label": { + "type": "Text", + "left": 272, "top": 452, + "text": "Monologue Frequency", + "fontColor": "#8899aa", + "fontSize": 14 + }, + "insert-mono-note": { + "type": "Text", + "left": 272, "top": 470, + "text": "Reduces frequency only — does not suppress urgent/critical monologue", + "fontColor": "#3a4455", + "fontSize": 11 + }, + "insert-mono-bar-bg": { + "type": "Rectangle", + "left": 560, "top": 456, "width": 400, "height": 8, + "fillColor": "#2a3040", + "strokeColor": "#333340", + "corners": [2, 2, 2, 2] + }, + "insert-mono-bar-fill": { + "type": "Rectangle", + "left": 560, "top": 456, "width": 400, "height": 8, + "fillColor": "#8899aa", + "strokeColor": "#8899aa", + "corners": [2, 2, 2, 2] + }, + "insert-mono-value": { + "type": "Text", + "left": 968, "top": 450, + "text": "100%", + "fontColor": "#8899aa", + "fontSize": 13 + }, + "access-section-title": { + "type": "Text", + "left": 272, "top": 508, + "text": "ACCESSIBILITY", + "fontColor": "#c8d0e0", + "fontSize": 16 + }, + "access-divider": { + "type": "Line", + "left": 272, "top": 532, "width": 812, "height": 0, + "strokeColor": "#333340" + }, + "access-text-size-label": { + "type": "Text", + "left": 272, "top": 544, + "text": "Text Size", + "fontColor": "#8899aa", + "fontSize": 14 + }, + "access-text-size-val": { + "type": "Rectangle", + "left": 680, "top": 538, "width": 180, "height": 30, + "fillColor": "#1a2030", + "strokeColor": "#333340", + "corners": [2, 2, 2, 2] + }, + "access-text-size-text": { + "type": "Text", + "left": 700, "top": 546, + "text": "NORMAL", + "fontColor": "#8899aa", + "fontSize": 13 + }, + "access-colorblind-label": { + "type": "Text", + "left": 272, "top": 582, + "text": "Colour-blind mode", + "fontColor": "#8899aa", + "fontSize": 14 + }, + "access-colorblind-val": { + "type": "Rectangle", + "left": 680, "top": 576, "width": 180, "height": 30, + "fillColor": "#1a2030", + "strokeColor": "#333340", + "corners": [2, 2, 2, 2] + }, + "access-colorblind-text": { + "type": "Text", + "left": 700, "top": 584, + "text": "OFF", + "fontColor": "#8899aa", + "fontSize": 13 + }, + "access-colorblind-note": { + "type": "Text", + "left": 272, "top": 614, "width": 760, + "text": "Remaps D-033 entity colors for protanopia / deuteranopia. All relationship states remain distinguishable.", + "fontColor": "#3a4455", + "fontSize": 11, + "wordWrap": true + }, + "footer-note": { + "type": "Text", + "left": 272, "top": 690, + "text": "All settings auto-save. [Esc] to return. Changes take effect immediately.", + "fontColor": "#3a4455", + "fontSize": 11 + }, + "annotation-title": { + "type": "Text", + "left": 16, "top": 728, + "text": "v1.0 OPTIONS SCREEN", + "fontColor": "#556677", + "fontSize": 11 + }, + "annotation-notes": { + "type": "Text", + "left": 16, "top": 742, "width": 1100, + "text": "Diegetic framing: 'Insert Settings'. Sidebar nav. Display, Audio (5-bus sliders), Insert/HUD density controls, Accessibility with D-033 remapping note.", + "fontColor": "#3a4455", + "fontSize": 10, + "wordWrap": true + } + } +} diff --git a/docs/design/wireframes/menus/v10-options-full.png b/docs/design/wireframes/menus/v10-options-full.png new file mode 100644 index 000000000..12d54a5f8 Binary files /dev/null and b/docs/design/wireframes/menus/v10-options-full.png differ diff --git a/docs/design/wireframes/monologue/v01-monologue-idle.json b/docs/design/wireframes/monologue/v01-monologue-idle.json new file mode 100644 index 000000000..14909967c --- /dev/null +++ b/docs/design/wireframes/monologue/v01-monologue-idle.json @@ -0,0 +1,107 @@ +{ + "name": "v01-monologue-idle", + "shapes": { + "bg": { + "type": "Rectangle", + "left": 0, "top": 0, "width": 1140, "height": 760, + "fillColor": "#1a1e24", + "strokeColor": "#1a1e24" + }, + "bg-game-label": { + "type": "Text", + "left": 380, "top": 340, + "text": "GAME VIEW — PLAYER IDLE IN CORRIDOR\n(no active conversation, no active threat)", + "fontColor": "#333340", + "fontSize": 14 + }, + "monologue-block": { + "type": "Rectangle", + "left": 200, "top": 598, "width": 740, "height": 64, + "fillColor": "#00000000", + "strokeColor": "#00000000" + }, + "monologue-line-1": { + "type": "Text", + "left": 200, "top": 598, "width": 740, + "text": "The station never really goes quiet. You just stop noticing.", + "fontColor": "#d0d4e0", + "fontSize": 13, + "wordWrap": true + }, + "monologue-trigger-label": { + "type": "Text", + "left": 200, "top": 618, + "text": "trigger: time_idle // mood: content // character: detective", + "fontColor": "#3a4455", + "fontSize": 10 + }, + "hint-bar": { + "type": "Rectangle", + "left": 0, "top": 728, "width": 1140, "height": 32, + "fillColor": "#0e1218", + "strokeColor": "#333340" + }, + "hint-text": { + "type": "Text", + "left": 20, "top": 736, + "text": "[E] Interact [Shift] Sprint [Tab] Insert [RMB] World Menu [Esc] Pause", + "fontColor": "#8899aa", + "fontSize": 11 + }, + "minimap-frame": { + "type": "Rectangle", + "left": 880, "top": 16, "width": 244, "height": 244, + "fillColor": "#12141a", + "strokeColor": "#333340", + "corners": [4, 4, 4, 4] + }, + "minimap-stub-label": { + "type": "Text", + "left": 975, "top": 124, + "text": "minimap", + "fontColor": "#333340", + "fontSize": 12 + }, + "positioning-note": { + "type": "Text", + "left": 200, "top": 670, + "text": "Position: lower center screen. Does NOT obstruct game view above ~60% height.", + "fontColor": "#3a4455", + "fontSize": 10 + }, + "fade-note": { + "type": "Text", + "left": 200, "top": 684, + "text": "Standard opacity 85%. No container — text floats freely on z-layer 7.", + "fontColor": "#3a4455", + "fontSize": 10 + }, + "dialogue-zone-label": { + "type": "Text", + "left": 200, "top": 700, + "text": "← dialogue box would appear BELOW this line (max 20% screen height from bottom) →", + "fontColor": "#2a3540", + "fontSize": 10 + }, + "dialogue-zone-line": { + "type": "Line", + "left": 0, "top": 608, "width": 1140, "height": 0, + "strokeColor": "#1e2830" + }, + "annotation-title": { + "type": "Text", + "left": 16, "top": 16, + "text": "v0.1 MONOLOGUE — IDLE OBSERVATION", + "fontColor": "#556677", + "fontSize": 11 + }, + "annotation-notes": { + "type": "Text", + "left": 16, "top": 30, "width": 840, + "text": "time_idle trigger. Single line. 85% opacity. No container chrome. Floats above dialogue zone. Standard chime on appearance.", + "fontColor": "#3a4455", + "fontSize": 10, + "wordWrap": true + } + } +} diff --git a/docs/design/wireframes/monologue/v01-monologue-idle.png b/docs/design/wireframes/monologue/v01-monologue-idle.png new file mode 100644 index 000000000..05ea52b89 Binary files /dev/null and b/docs/design/wireframes/monologue/v01-monologue-idle.png differ diff --git a/docs/design/wireframes/monologue/v01-monologue-reaction.json b/docs/design/wireframes/monologue/v01-monologue-reaction.json new file mode 100644 index 000000000..e6bbefbca --- /dev/null +++ b/docs/design/wireframes/monologue/v01-monologue-reaction.json @@ -0,0 +1,133 @@ +{ + "name": "v01-monologue-reaction", + "shapes": { + "bg": { + "type": "Rectangle", + "left": 0, "top": 0, "width": 1140, "height": 760, + "fillColor": "#1a1e24", + "strokeColor": "#1a1e24" + }, + "bg-game-label": { + "type": "Text", + "left": 340, "top": 320, + "text": "GAME VIEW — PLAYER OBSERVES KAEL IN WRONG LOCATION\n(entity blob in fog transitioning to amber silhouette — cognitive delay active)", + "fontColor": "#333340", + "fontSize": 14 + }, + "fog-entity-blob": { + "type": "Ellipse", + "left": 500, "top": 440, "width": 24, "height": 24, + "fillColor": "#555566", + "strokeColor": "#555566" + }, + "fog-entity-pulse-ring": { + "type": "Ellipse", + "left": 490, "top": 430, "width": 44, "height": 44, + "fillColor": "#00000000", + "strokeColor": "#e8c547" + }, + "fog-entity-note": { + "type": "Text", + "left": 450, "top": 476, + "text": "blob → color transition (0.3s)", + "fontColor": "#3a4455", + "fontSize": 10 + }, + "monologue-urgent-accent": { + "type": "Rectangle", + "left": 196, "top": 580, "width": 3, "height": 80, + "fillColor": "#c8d8f0", + "strokeColor": "#c8d8f0" + }, + "monologue-block": { + "type": "Rectangle", + "left": 200, "top": 580, "width": 740, "height": 80, + "fillColor": "#00000000", + "strokeColor": "#00000000" + }, + "monologue-line-1": { + "type": "Text", + "left": 200, "top": 580, "width": 740, + "text": "Those footsteps... that's Kael's walk.", + "fontColor": "#e0e8f8", + "fontSize": 13, + "wordWrap": true + }, + "monologue-line-2": { + "type": "Text", + "left": 200, "top": 602, "width": 740, + "text": "What's he doing in this corridor?", + "fontColor": "#c8d4ec", + "fontSize": 13, + "wordWrap": true + }, + "monologue-trigger-label": { + "type": "Text", + "left": 200, "top": 625, + "text": "trigger: observe_npc // mood: suspicious // chime: urgent variant at onset of cognitive delay (D-067)", + "fontColor": "#3a4455", + "fontSize": 10 + }, + "cognitive-delay-note": { + "type": "Text", + "left": 200, "top": 639, + "text": "0.6s cognitive delay — monologue fires DURING delay, not after. Text IS the recognition (D-060).", + "fontColor": "#3a4455", + "fontSize": 10 + }, + "full-opacity-note": { + "type": "Text", + "left": 200, "top": 653, + "text": "Urgent: 100% opacity, left accent bar (cyan). Standard monologue: 85% opacity, no bar.", + "fontColor": "#3a4455", + "fontSize": 10 + }, + "hint-bar": { + "type": "Rectangle", + "left": 0, "top": 728, "width": 1140, "height": 32, + "fillColor": "#0e1218", + "strokeColor": "#333340" + }, + "hint-text": { + "type": "Text", + "left": 20, "top": 736, + "text": "[E] Interact [Shift] Sprint [Tab] Insert [RMB] World Menu [Esc] Pause", + "fontColor": "#8899aa", + "fontSize": 11 + }, + "minimap-frame": { + "type": "Rectangle", + "left": 880, "top": 16, "width": 244, "height": 244, + "fillColor": "#12141a", + "strokeColor": "#333340", + "corners": [4, 4, 4, 4] + }, + "minimap-stub-label": { + "type": "Text", + "left": 975, "top": 124, + "text": "minimap", + "fontColor": "#333340", + "fontSize": 12 + }, + "dialogue-zone-line": { + "type": "Line", + "left": 0, "top": 608, "width": 1140, "height": 0, + "strokeColor": "#1e2830" + }, + "annotation-title": { + "type": "Text", + "left": 16, "top": 16, + "text": "v0.1 MONOLOGUE — REACTION (RECOGNITION EVENT)", + "fontColor": "#556677", + "fontSize": 11 + }, + "annotation-notes": { + "type": "Text", + "left": 16, "top": 30, "width": 840, + "text": "Urgent chime at onset of cognitive delay. Two-line monologue: first line names the recognition, second continues the thought. Accent bar left. Entity transitioning fog-blob to amber in game world above.", + "fontColor": "#3a4455", + "fontSize": 10, + "wordWrap": true + } + } +} diff --git a/docs/design/wireframes/monologue/v01-monologue-reaction.png b/docs/design/wireframes/monologue/v01-monologue-reaction.png new file mode 100644 index 000000000..49bc99d63 Binary files /dev/null and b/docs/design/wireframes/monologue/v01-monologue-reaction.png differ diff --git a/docs/design/wireframes/monologue/v10-monologue-threading.json b/docs/design/wireframes/monologue/v10-monologue-threading.json new file mode 100644 index 000000000..271e84fa2 --- /dev/null +++ b/docs/design/wireframes/monologue/v10-monologue-threading.json @@ -0,0 +1,200 @@ +{ + "name": "v10-monologue-threading", + "shapes": { + "bg": { + "type": "Rectangle", + "left": 0, "top": 0, "width": 1140, "height": 760, + "fillColor": "#1a1e24", + "strokeColor": "#1a1e24" + }, + "bg-game-label": { + "type": "Text", + "left": 370, "top": 300, + "text": "GAME VIEW — DEDUCTION SEQUENCE IN PROGRESS\n(player has observed contradiction, chain building)", + "fontColor": "#333340", + "fontSize": 14 + }, + "thread-container": { + "type": "Rectangle", + "left": 180, "top": 490, "width": 780, "height": 200, + "fillColor": "#00000000", + "strokeColor": "#00000000" + }, + "thread-line-connector": { + "type": "Line", + "left": 185, "top": 502, "width": 0, "height": 170, + "strokeColor": "#2a3550" + }, + "monologue-node-1": { + "type": "Rectangle", + "left": 192, "top": 490, "width": 740, "height": 36, + "fillColor": "#00000000", + "strokeColor": "#00000000" + }, + "monologue-text-1": { + "type": "Text", + "left": 200, "top": 492, "width": 720, + "text": "Kael's shift ended at 14:00. He was at the Terminal at 15:30.", + "fontColor": "#d0d4e0", + "fontSize": 13, + "wordWrap": true + }, + "monologue-meta-1": { + "type": "Text", + "left": 200, "top": 510, + "text": "observe_npc // 14s ago", + "fontColor": "#3a4455", + "fontSize": 9 + }, + "thread-node-dot-1": { + "type": "Ellipse", + "left": 183, "top": 499, "width": 5, "height": 5, + "fillColor": "#4a9ebb", + "strokeColor": "#4a9ebb" + }, + "monologue-node-2": { + "type": "Rectangle", + "left": 192, "top": 532, "width": 740, "height": 36, + "fillColor": "#00000000", + "strokeColor": "#00000000" + }, + "monologue-text-2": { + "type": "Text", + "left": 200, "top": 534, "width": 720, + "text": "That manifest I saw — Bay 12. The count was wrong.", + "fontColor": "#d0d4e0", + "fontSize": 13, + "wordWrap": true + }, + "monologue-meta-2": { + "type": "Text", + "left": 200, "top": 552, + "text": "discover_evidence // 2 min ago", + "fontColor": "#3a4455", + "fontSize": 9 + }, + "thread-node-dot-2": { + "type": "Ellipse", + "left": 183, "top": 541, "width": 5, "height": 5, + "fillColor": "#e8c547", + "strokeColor": "#e8c547" + }, + "monologue-node-3-active": { + "type": "Rectangle", + "left": 192, "top": 572, "width": 740, "height": 40, + "fillColor": "#00000000", + "strokeColor": "#00000000" + }, + "monologue-accent-3": { + "type": "Rectangle", + "left": 196, "top": 572, "width": 2, "height": 40, + "fillColor": "#c8d8f0", + "strokeColor": "#c8d8f0" + }, + "monologue-text-3": { + "type": "Text", + "left": 204, "top": 574, "width": 720, + "text": "He was supposed to be off-station. Which means he never left.", + "fontColor": "#e0e8f8", + "fontSize": 13, + "wordWrap": true + }, + "monologue-meta-3": { + "type": "Text", + "left": 204, "top": 595, + "text": "observe_anomaly // now // DEDUCTION", + "fontColor": "#4a6888", + "fontSize": 9 + }, + "thread-node-dot-3": { + "type": "Ellipse", + "left": 183, "top": 581, "width": 7, "height": 7, + "fillColor": "#c8d8f0", + "strokeColor": "#c8d8f0" + }, + "unreliable-hint": { + "type": "Rectangle", + "left": 200, "top": 618, "width": 480, "height": 20, + "fillColor": "#12141a", + "strokeColor": "#2a3040", + "corners": [2, 2, 2, 2] + }, + "unreliable-text": { + "type": "Text", + "left": 208, "top": 622, + "text": "v1.0: unreliable narrator hint — italics indicate character may be wrong", + "fontColor": "#556677", + "fontSize": 10 + }, + "connection-viz": { + "type": "Rectangle", + "left": 200, "top": 644, "width": 200, "height": 24, + "fillColor": "#12141a", + "strokeColor": "#2a3040", + "corners": [2, 2, 2, 2] + }, + "connection-viz-text": { + "type": "Text", + "left": 208, "top": 649, + "text": "KAEL ←→ BAY 12 ←→ MANIFEST", + "fontColor": "#6677aa", + "fontSize": 10 + }, + "connection-viz-note": { + "type": "Text", + "left": 408, "top": 650, + "text": "v1.0: knowledge connection visualization", + "fontColor": "#3a4455", + "fontSize": 10 + }, + "thread-scroll-note": { + "type": "Text", + "left": 200, "top": 672, + "text": "Thread scrolls upward as new thoughts arrive. Oldest fade out. Max 3-4 visible.", + "fontColor": "#3a4455", + "fontSize": 10 + }, + "hint-bar": { + "type": "Rectangle", + "left": 0, "top": 728, "width": 1140, "height": 32, + "fillColor": "#0e1218", + "strokeColor": "#333340" + }, + "hint-text": { + "type": "Text", + "left": 20, "top": 736, + "text": "[E] Interact [Shift] Sprint [Tab] Insert [J] Case File [RMB] World Menu [Esc] Pause", + "fontColor": "#6677aa", + "fontSize": 11 + }, + "minimap-frame": { + "type": "Rectangle", + "left": 880, "top": 16, "width": 244, "height": 244, + "fillColor": "#12141a", + "strokeColor": "#c8d0e0", + "corners": [4, 4, 4, 4] + }, + "minimap-stub-label": { + "type": "Text", + "left": 975, "top": 124, + "text": "minimap", + "fontColor": "#333340", + "fontSize": 12 + }, + "annotation-title": { + "type": "Text", + "left": 16, "top": 16, + "text": "v1.0 MONOLOGUE — THOUGHT THREADING (DEDUCTION CHAIN)", + "fontColor": "#556677", + "fontSize": 11 + }, + "annotation-notes": { + "type": "Text", + "left": 16, "top": 30, "width": 840, + "text": "Thread of 3 thoughts connected by vertical line. Each node has source trigger + timestamp. Active node has accent bar. Connection visualization. Unreliable narrator hints in italics.", + "fontColor": "#3a4455", + "fontSize": 10, + "wordWrap": true + } + } +} diff --git a/docs/design/wireframes/monologue/v10-monologue-threading.png b/docs/design/wireframes/monologue/v10-monologue-threading.png new file mode 100644 index 000000000..ddb8b6933 Binary files /dev/null and b/docs/design/wireframes/monologue/v10-monologue-threading.png differ diff --git a/docs/design/wireframes/popups/v01-interaction-list.json b/docs/design/wireframes/popups/v01-interaction-list.json new file mode 100644 index 000000000..ff877e101 --- /dev/null +++ b/docs/design/wireframes/popups/v01-interaction-list.json @@ -0,0 +1,197 @@ +{ + "name": "v01-interaction-list", + "shapes": { + "bg": { + "type": "Rectangle", + "left": 0, "top": 0, "width": 1140, "height": 760, + "fillColor": "#1a1e24", + "strokeColor": "#1a1e24" + }, + "bg-label": { + "type": "Text", + "left": 370, "top": 350, + "text": "GAME VIEW — right-click world menu open\n(radial menu, 2 spokes in v0.1)", + "fontColor": "#333340", + "fontSize": 14 + }, + "radial-center": { + "type": "Ellipse", + "left": 556, "top": 356, "width": 8, "height": 8, + "fillColor": "#c8d0e0", + "strokeColor": "#c8d0e0" + }, + "radial-spoke-up": { + "type": "Line", + "left": 560, "top": 280, "width": 0, "height": 76, + "strokeColor": "#c8d0e0" + }, + "radial-spoke-right": { + "type": "Line", + "left": 560, "top": 360, "width": 76, "height": 0, + "strokeColor": "#c8d0e0" + }, + "radial-spoke-left": { + "type": "Line", + "left": 484, "top": 360, "width": 76, "height": 0, + "strokeColor": "#444455" + }, + "radial-spoke-down": { + "type": "Line", + "left": 560, "top": 360, "width": 0, "height": 76, + "strokeColor": "#444455" + }, + "spoke-up-label": { + "type": "Rectangle", + "left": 506, "top": 248, "width": 108, "height": 28, + "fillColor": "#0e1118", + "strokeColor": "#c8d0e0", + "corners": [2, 2, 2, 2] + }, + "spoke-up-text": { + "type": "Text", + "left": 514, "top": 256, + "text": "[W] OBSERVE", + "fontColor": "#c8d0e0", + "fontSize": 12 + }, + "spoke-right-label": { + "type": "Rectangle", + "left": 640, "top": 344, "width": 100, "height": 28, + "fillColor": "#0e1118", + "strokeColor": "#c8d0e0", + "corners": [2, 2, 2, 2] + }, + "spoke-right-text": { + "type": "Text", + "left": 648, "top": 352, + "text": "[D] INSERT", + "fontColor": "#c8d0e0", + "fontSize": 12 + }, + "spoke-left-label": { + "type": "Rectangle", + "left": 374, "top": 344, "width": 104, "height": 28, + "fillColor": "#0e1118", + "strokeColor": "#444455", + "corners": [2, 2, 2, 2] + }, + "spoke-left-text": { + "type": "Text", + "left": 382, "top": 352, + "text": "[A] COMMS", + "fontColor": "#444455", + "fontSize": 12 + }, + "spoke-down-label": { + "type": "Rectangle", + "left": 506, "top": 440, "width": 100, "height": 28, + "fillColor": "#0e1118", + "strokeColor": "#444455", + "corners": [2, 2, 2, 2] + }, + "spoke-down-text": { + "type": "Text", + "left": 514, "top": 448, + "text": "[S] WAIT", + "fontColor": "#444455", + "fontSize": 12 + }, + "v01-scope-note": { + "type": "Text", + "left": 400, "top": 480, + "text": "v0.1: OBSERVE + INSERT only. COMMS + WAIT deferred (shown greyed).", + "fontColor": "#556677", + "fontSize": 11 + }, + "drag-release-note": { + "type": "Text", + "left": 400, "top": 496, + "text": "Drag-release for fast selection. Click-click for newcomers. (D-058)", + "fontColor": "#3a4455", + "fontSize": 10 + }, + "z-layer-note": { + "type": "Text", + "left": 400, "top": 510, + "text": "Rendered z-layer 6. Nearly transparent — geometric lines only.", + "fontColor": "#3a4455", + "fontSize": 10 + }, + "notification-section": { + "type": "Rectangle", + "left": 600, "top": 560, "width": 500, "height": 130, + "fillColor": "#12141a", + "strokeColor": "#2a3040", + "corners": [2, 2, 2, 2] + }, + "notification-title": { + "type": "Text", + "left": 616, "top": 568, + "text": "TOAST NOTIFICATION (v0.1 scope)", + "fontColor": "#556677", + "fontSize": 11 + }, + "toast-1": { + "type": "Rectangle", + "left": 616, "top": 586, "width": 468, "height": 32, + "fillColor": "#0e1118", + "strokeColor": "#333340", + "corners": [2, 2, 2, 2] + }, + "toast-1-accent": { + "type": "Rectangle", + "left": 616, "top": 586, "width": 2, "height": 32, + "fillColor": "#c8d8f0", + "strokeColor": "#c8d8f0" + }, + "toast-1-text": { + "type": "Text", + "left": 622, "top": 596, + "text": "INSERT // New POI added: Bay 12 cargo sector", + "fontColor": "#c8d0e0", + "fontSize": 12 + }, + "toast-2": { + "type": "Rectangle", + "left": 616, "top": 624, "width": 468, "height": 32, + "fillColor": "#0e1118", + "strokeColor": "#333340", + "corners": [2, 2, 2, 2] + }, + "toast-2-accent": { + "type": "Rectangle", + "left": 616, "top": 624, "width": 2, "height": 32, + "fillColor": "#e8c547", + "strokeColor": "#e8c547" + }, + "toast-2-text": { + "type": "Text", + "left": 622, "top": 634, + "text": "CASE // Kael Davan flagged as person of interest", + "fontColor": "#e8c547", + "fontSize": 12 + }, + "toast-note": { + "type": "Text", + "left": 616, "top": 664, + "text": "Top-right corner. Accent color = category. Auto-dismiss 5s. Stack max 2.", + "fontColor": "#3a4455", + "fontSize": 10 + }, + "annotation-title": { + "type": "Text", + "left": 16, "top": 16, + "text": "v0.1 WORLD MENU (RADIAL) + TOAST NOTIFICATIONS", + "fontColor": "#556677", + "fontSize": 11 + }, + "annotation-notes": { + "type": "Text", + "left": 16, "top": 30, "width": 840, + "text": "Radial: 4 spokes, 2 active in v0.1. Geometric lines, thin. Drag-release or click-click. Toast: accent bar = category color, top-right corner.", + "fontColor": "#3a4455", + "fontSize": 10, + "wordWrap": true + } + } +} diff --git a/docs/design/wireframes/popups/v01-interaction-list.png b/docs/design/wireframes/popups/v01-interaction-list.png new file mode 100644 index 000000000..3d32905b6 Binary files /dev/null and b/docs/design/wireframes/popups/v01-interaction-list.png differ diff --git a/docs/design/wireframes/popups/v01-modal-confirm.json b/docs/design/wireframes/popups/v01-modal-confirm.json new file mode 100644 index 000000000..93f96a60c --- /dev/null +++ b/docs/design/wireframes/popups/v01-modal-confirm.json @@ -0,0 +1,93 @@ +{ + "name": "v01-modal-confirm", + "shapes": { + "overlay": { + "type": "Rectangle", + "left": 0, "top": 0, "width": 1140, "height": 760, + "fillColor": "#08090c" + }, + "modal": { + "type": "Rectangle", + "left": 370, "top": 280, "width": 400, "height": 200, + "fillColor": "#1a1e24", + "strokeColor": "#333340", + "corners": [4, 4, 4, 4] + }, + "modal-accent": { + "type": "Rectangle", + "left": 370, "top": 280, "width": 400, "height": 2, + "fillColor": "#c8d0e0", + "strokeColor": "#c8d0e0" + }, + "title": { + "type": "Text", + "left": 386, "top": 294, + "text": "QUIT TO MAIN MENU?", + "fontColor": "#c8d0e0", + "fontSize": 16 + }, + "divider": { + "type": "Line", + "left": 386, "top": 320, "width": 368, "height": 0, + "strokeColor": "#333340" + }, + "body": { + "type": "Text", + "left": 386, "top": 332, "width": 368, + "text": "Unsaved progress will be lost.", + "fontColor": "#8899aa", + "fontSize": 14, + "wordWrap": true + }, + "btn-cancel": { + "type": "Rectangle", + "left": 386, "top": 424, "width": 168, "height": 36, + "fillColor": "#2a3040", + "strokeColor": "#c8d0e0", + "corners": [2, 2, 2, 2] + }, + "btn-cancel-label": { + "type": "Text", + "left": 430, "top": 434, + "text": "CANCEL", + "fontColor": "#c8d0e0", + "fontSize": 14 + }, + "btn-confirm": { + "type": "Rectangle", + "left": 566, "top": 424, "width": 168, "height": 36, + "fillColor": "#1e2430", + "strokeColor": "#c8d8f0", + "corners": [2, 2, 2, 2] + }, + "btn-confirm-label": { + "type": "Text", + "left": 610, "top": 434, + "text": "CONFIRM", + "fontColor": "#c8d8f0", + "fontSize": 14 + }, + "key-hint": { + "type": "Text", + "left": 386, "top": 476, + "text": "[Enter] Confirm [Esc] Cancel", + "fontColor": "#3a4455", + "fontSize": 10 + }, + "annotation-title": { + "type": "Text", + "left": 16, "top": 16, + "text": "v0.1 MODAL CONFIRM DIALOG", + "fontColor": "#556677", + "fontSize": 11 + }, + "annotation-notes": { + "type": "Text", + "left": 16, "top": 30, "width": 840, + "text": "Insert-styled chrome. Top accent bar. Dark overlay. Keyboard shortcuts. No icon — text-primary. Cancel default-focused.", + "fontColor": "#3a4455", + "fontSize": 10, + "wordWrap": true + } + } +} diff --git a/docs/design/wireframes/popups/v01-modal-confirm.png b/docs/design/wireframes/popups/v01-modal-confirm.png new file mode 100644 index 000000000..aaaf423fd Binary files /dev/null and b/docs/design/wireframes/popups/v01-modal-confirm.png differ diff --git a/docs/design/wireframes/popups/v01-tooltip.json b/docs/design/wireframes/popups/v01-tooltip.json new file mode 100644 index 000000000..02b4cce1d --- /dev/null +++ b/docs/design/wireframes/popups/v01-tooltip.json @@ -0,0 +1,175 @@ +{ + "name": "v01-tooltip", + "shapes": { + "bg": { + "type": "Rectangle", + "left": 0, "top": 0, "width": 1140, "height": 760, + "fillColor": "#1a1e24", + "strokeColor": "#1a1e24" + }, + "bg-label": { + "type": "Text", + "left": 380, "top": 360, + "text": "GAME VIEW — cursor hovering entity", + "fontColor": "#333340", + "fontSize": 14 + }, + "entity-box": { + "type": "Ellipse", + "left": 540, "top": 300, "width": 28, "height": 28, + "fillColor": "#4a9ebb", + "strokeColor": "#c8d8f0" + }, + "cursor-bracket-tl": { + "type": "Line", + "left": 530, "top": 290, "width": 10, "height": 0, + "strokeColor": "#c8d8f0" + }, + "cursor-bracket-tl-v": { + "type": "Line", + "left": 530, "top": 290, "width": 0, "height": 10, + "strokeColor": "#c8d8f0" + }, + "cursor-bracket-br": { + "type": "Line", + "left": 568, "top": 338, "width": 10, "height": 0, + "strokeColor": "#c8d8f0" + }, + "cursor-bracket-br-v": { + "type": "Line", + "left": 578, "top": 328, "width": 0, "height": 10, + "strokeColor": "#c8d8f0" + }, + "tooltip-entity-verb": { + "type": "Rectangle", + "left": 576, "top": 295, "width": 180, "height": 72, + "fillColor": "#0e1118", + "strokeColor": "#333340", + "corners": [2, 2, 2, 2] + }, + "tooltip-accent": { + "type": "Rectangle", + "left": 576, "top": 295, "width": 2, "height": 72, + "fillColor": "#4a9ebb", + "strokeColor": "#4a9ebb" + }, + "tooltip-name": { + "type": "Text", + "left": 582, "top": 300, + "text": "DOCK WORKER", + "fontColor": "#4a9ebb", + "fontSize": 12 + }, + "tooltip-status": { + "type": "Text", + "left": 582, "top": 316, + "text": "Unknown / Neutral", + "fontColor": "#8899aa", + "fontSize": 11 + }, + "tooltip-verb-1": { + "type": "Text", + "left": 582, "top": 334, + "text": "[E] Talk", + "fontColor": "#c8d0e0", + "fontSize": 12 + }, + "tooltip-verb-2": { + "type": "Text", + "left": 582, "top": 350, + "text": "[F] Observe", + "fontColor": "#c8d0e0", + "fontSize": 12 + }, + "tooltip-z-layer-note": { + "type": "Text", + "left": 576, "top": 372, + "text": "Rendered z-layer 6 (insert layer) — disappears if insert off", + "fontColor": "#3a4455", + "fontSize": 10 + }, + "object-hover-section": { + "type": "Rectangle", + "left": 300, "top": 440, "width": 540, "height": 100, + "fillColor": "#12141a", + "strokeColor": "#2a3040", + "corners": [2, 2, 2, 2] + }, + "object-hover-title": { + "type": "Text", + "left": 316, "top": 448, + "text": "OBJECT HOVER — cursor rotates to X-shape", + "fontColor": "#556677", + "fontSize": 11 + }, + "object-box": { + "type": "Rectangle", + "left": 316, "top": 466, "width": 48, "height": 32, + "fillColor": "#2a3040", + "strokeColor": "#8b8ba0" + }, + "object-box-label": { + "type": "Text", + "left": 322, "top": 478, + "text": "CRATE", + "fontColor": "#8b8ba0", + "fontSize": 10 + }, + "object-tooltip": { + "type": "Rectangle", + "left": 372, "top": 460, "width": 160, "height": 56, + "fillColor": "#0e1118", + "strokeColor": "#333340", + "corners": [2, 2, 2, 2] + }, + "object-tooltip-accent": { + "type": "Rectangle", + "left": 372, "top": 460, "width": 2, "height": 56, + "fillColor": "#8b8ba0", + "strokeColor": "#8b8ba0" + }, + "object-tooltip-name": { + "type": "Text", + "left": 378, "top": 464, + "text": "CARGO CRATE T-447", + "fontColor": "#8b8ba0", + "fontSize": 11 + }, + "object-tooltip-verb": { + "type": "Text", + "left": 378, "top": 482, + "text": "[E] Examine", + "fontColor": "#c8d0e0", + "fontSize": 12 + }, + "object-tooltip-verb-2": { + "type": "Text", + "left": 378, "top": 498, + "text": "[F] Scan", + "fontColor": "#c8d0e0", + "fontSize": 12 + }, + "object-amber-note": { + "type": "Text", + "left": 316, "top": 524, + "text": "If object flagged as POI: accent becomes amber #e8c547", + "fontColor": "#3a4455", + "fontSize": 10 + }, + "annotation-title": { + "type": "Text", + "left": 16, "top": 16, + "text": "v0.1 TOOLTIPS — ENTITY HOVER + OBJECT HOVER", + "fontColor": "#556677", + "fontSize": 11 + }, + "annotation-notes": { + "type": "Text", + "left": 16, "top": 30, "width": 840, + "text": "Entity hover: bracket cursor expands, vertical list of verbs, name in D-033 color. Object hover: X-cursor, grey accent. Both z-layer 6 — insert layer. D-057 vertical list spec.", + "fontColor": "#3a4455", + "fontSize": 10, + "wordWrap": true + } + } +} diff --git a/docs/design/wireframes/popups/v01-tooltip.png b/docs/design/wireframes/popups/v01-tooltip.png new file mode 100644 index 000000000..fdfcc15d0 Binary files /dev/null and b/docs/design/wireframes/popups/v01-tooltip.png differ diff --git a/docs/design/wireframes/popups/v10-context-menu.json b/docs/design/wireframes/popups/v10-context-menu.json new file mode 100644 index 000000000..2bcf84f84 --- /dev/null +++ b/docs/design/wireframes/popups/v10-context-menu.json @@ -0,0 +1,174 @@ +{ + "name": "v10-context-menu", + "shapes": { + "bg": { + "type": "Rectangle", + "left": 0, "top": 0, "width": 1140, "height": 760, + "fillColor": "#1a1e24", + "strokeColor": "#1a1e24" + }, + "bg-label": { + "type": "Text", + "left": 370, "top": 340, + "text": "GAME VIEW — entity context menu\n(knowledge-unlocked options, new option glow)", + "fontColor": "#333340", + "fontSize": 14 + }, + "entity-dot": { + "type": "Ellipse", + "left": 440, "top": 300, "width": 28, "height": 28, + "fillColor": "#e8c547", + "strokeColor": "#c8d8f0" + }, + "entity-bracket-tl": { + "type": "Line", + "left": 428, "top": 288, "width": 14, "height": 0, + "strokeColor": "#e8c547" + }, + "entity-bracket-tl-v": { + "type": "Line", + "left": 428, "top": 288, "width": 0, "height": 14, + "strokeColor": "#e8c547" + }, + "entity-bracket-br": { + "type": "Line", + "left": 466, "top": 340, "width": 14, "height": 0, + "strokeColor": "#e8c547" + }, + "entity-bracket-br-v": { + "type": "Line", + "left": 480, "top": 326, "width": 0, "height": 14, + "strokeColor": "#e8c547" + }, + "context-menu": { + "type": "Rectangle", + "left": 488, "top": 284, "width": 240, "height": 168, + "fillColor": "#0e1118", + "strokeColor": "#e8c547", + "corners": [2, 2, 2, 2] + }, + "context-menu-header": { + "type": "Text", + "left": 496, "top": 290, + "text": "KAEL DAVAN", + "fontColor": "#e8c547", + "fontSize": 13 + }, + "context-header-sub": { + "type": "Text", + "left": 496, "top": 306, + "text": "Person of Interest // Dock Worker", + "fontColor": "#8899aa", + "fontSize": 10 + }, + "context-divider": { + "type": "Line", + "left": 496, "top": 320, "width": 224, "height": 0, + "strokeColor": "#2a3040" + }, + "context-verb-1": { + "type": "Rectangle", + "left": 496, "top": 326, "width": 224, "height": 28, + "fillColor": "#12181e", + "strokeColor": "#00000000", + "corners": [2, 2, 2, 2] + }, + "context-verb-1-text": { + "type": "Text", + "left": 504, "top": 334, + "text": "[E] Talk", + "fontColor": "#c8d0e0", + "fontSize": 13 + }, + "context-verb-2": { + "type": "Rectangle", + "left": 496, "top": 358, "width": 224, "height": 28, + "fillColor": "#12181e", + "strokeColor": "#00000000", + "corners": [2, 2, 2, 2] + }, + "context-verb-2-text": { + "type": "Text", + "left": 504, "top": 366, + "text": "[F] Observe", + "fontColor": "#c8d0e0", + "fontSize": 13 + }, + "context-verb-3-new": { + "type": "Rectangle", + "left": 496, "top": 390, "width": 224, "height": 28, + "fillColor": "#1a2030", + "strokeColor": "#c8d8f0", + "corners": [2, 2, 2, 2] + }, + "context-verb-3-glow": { + "type": "Rectangle", + "left": 496, "top": 390, "width": 224, "height": 28, + "fillColor": "#0a1020", + "strokeColor": "#c8d8f0", + "corners": [2, 2, 2, 2] + }, + "context-verb-3-text": { + "type": "Text", + "left": 504, "top": 398, + "text": "[G] Confront", + "fontColor": "#c8d8f0", + "fontSize": 13 + }, + "context-verb-3-new-badge": { + "type": "Rectangle", + "left": 676, "top": 396, "width": 36, "height": 16, + "fillColor": "#c8d8f0", + "strokeColor": "#c8d8f0", + "corners": [2, 2, 2, 2] + }, + "context-verb-3-new-text": { + "type": "Text", + "left": 680, "top": 400, + "text": "NEW", + "fontColor": "#0e1118", + "fontSize": 9 + }, + "context-verb-4": { + "type": "Rectangle", + "left": 496, "top": 422, "width": 224, "height": 28, + "fillColor": "#12181e", + "strokeColor": "#00000000", + "corners": [2, 2, 2, 2] + }, + "context-verb-4-text": { + "type": "Text", + "left": 504, "top": 430, + "text": "[H] Follow", + "fontColor": "#c8d0e0", + "fontSize": 13 + }, + "new-option-note": { + "type": "Text", + "left": 488, "top": 456, + "text": "New option glow: gradient background + badge. Fires when knowledge threshold crossed. (D-057)", + "fontColor": "#3a4455", + "fontSize": 10 + }, + "connection-line": { + "type": "Line", + "left": 480, "top": 314, "width": 8, "height": 0, + "strokeColor": "#e8c547" + }, + "annotation-title": { + "type": "Text", + "left": 16, "top": 16, + "text": "v1.0 CONTEXT MENU — ENTITY WITH UNLOCKED CONFRONT", + "fontColor": "#556677", + "fontSize": 11 + }, + "annotation-notes": { + "type": "Text", + "left": 16, "top": 30, "width": 840, + "text": "Vertical list (D-057). 4 options. New option highlighted with glow + NEW badge — knowledge state changed, Confront became available. Frame brackets match D-033 entity color.", + "fontColor": "#3a4455", + "fontSize": 10, + "wordWrap": true + } + } +} diff --git a/docs/design/wireframes/popups/v10-context-menu.png b/docs/design/wireframes/popups/v10-context-menu.png new file mode 100644 index 000000000..6ad87aece Binary files /dev/null and b/docs/design/wireframes/popups/v10-context-menu.png differ diff --git a/docs/design/wireframes/popups/v10-notification-stack.json b/docs/design/wireframes/popups/v10-notification-stack.json new file mode 100644 index 000000000..75f40bcbe --- /dev/null +++ b/docs/design/wireframes/popups/v10-notification-stack.json @@ -0,0 +1,238 @@ +{ + "name": "v10-notification-stack", + "shapes": { + "bg": { + "type": "Rectangle", + "left": 0, "top": 0, "width": 1140, "height": 760, + "fillColor": "#1a1e24", + "strokeColor": "#1a1e24" + }, + "bg-label": { + "type": "Text", + "left": 350, "top": 400, + "text": "GAME VIEW — multiple notifications stacked top-right", + "fontColor": "#333340", + "fontSize": 14 + }, + "toast-1": { + "type": "Rectangle", + "left": 850, "top": 16, "width": 274, "height": 44, + "fillColor": "#0d1118", + "strokeColor": "#333340", + "corners": [2, 2, 2, 2] + }, + "toast-1-accent": { + "type": "Rectangle", + "left": 850, "top": 16, "width": 2, "height": 44, + "fillColor": "#c8d8f0", + "strokeColor": "#c8d8f0" + }, + "toast-1-category": { + "type": "Text", + "left": 858, "top": 20, + "text": "INSERT", + "fontColor": "#c8d8f0", + "fontSize": 9 + }, + "toast-1-text": { + "type": "Text", + "left": 858, "top": 33, "width": 258, + "text": "New POI: Bay 12 cargo sector added", + "fontColor": "#c8d0e0", + "fontSize": 12 + }, + "toast-1-timer": { + "type": "Rectangle", + "left": 850, "top": 58, "width": 180, "height": 2, + "fillColor": "#c8d8f0", + "strokeColor": "#c8d8f0" + }, + "toast-2": { + "type": "Rectangle", + "left": 850, "top": 66, "width": 274, "height": 44, + "fillColor": "#0d1118", + "strokeColor": "#333340", + "corners": [2, 2, 2, 2] + }, + "toast-2-accent": { + "type": "Rectangle", + "left": 850, "top": 66, "width": 2, "height": 44, + "fillColor": "#e8c547", + "strokeColor": "#e8c547" + }, + "toast-2-category": { + "type": "Text", + "left": 858, "top": 70, + "text": "CASE", + "fontColor": "#e8c547", + "fontSize": 9 + }, + "toast-2-text": { + "type": "Text", + "left": 858, "top": 83, "width": 258, + "text": "Kael Davan — relationship updated", + "fontColor": "#e8c547", + "fontSize": 12 + }, + "toast-2-timer": { + "type": "Rectangle", + "left": 850, "top": 108, "width": 240, "height": 2, + "fillColor": "#e8c547", + "strokeColor": "#e8c547" + }, + "toast-3": { + "type": "Rectangle", + "left": 850, "top": 116, "width": 274, "height": 44, + "fillColor": "#0d1118", + "strokeColor": "#333340", + "corners": [2, 2, 2, 2] + }, + "toast-3-accent": { + "type": "Rectangle", + "left": 850, "top": 116, "width": 2, "height": 44, + "fillColor": "#6bc9a6", + "strokeColor": "#6bc9a6" + }, + "toast-3-category": { + "type": "Text", + "left": 858, "top": 120, + "text": "COMMS", + "fontColor": "#6bc9a6", + "fontSize": 9 + }, + "toast-3-text": { + "type": "Text", + "left": 858, "top": 133, "width": 258, + "text": "Naia Voss sent a message", + "fontColor": "#c8d0e0", + "fontSize": 12 + }, + "toast-3-timer": { + "type": "Rectangle", + "left": 850, "top": 158, "width": 260, "height": 2, + "fillColor": "#6bc9a6", + "strokeColor": "#6bc9a6" + }, + "toast-4-faded": { + "type": "Rectangle", + "left": 850, "top": 166, "width": 274, "height": 36, + "fillColor": "#0a0d12", + "strokeColor": "#252a35", + "corners": [2, 2, 2, 2] + }, + "toast-4-text": { + "type": "Text", + "left": 858, "top": 180, "width": 258, + "text": "INSERT // Manifest scan complete", + "fontColor": "#445566", + "fontSize": 11 + }, + "stack-annotations": { + "type": "Text", + "left": 850, "top": 210, + "text": "Stack: newest at top, older slide down, fade out after 5s.\nColor-coded by category. Progress bar = time remaining.", + "fontColor": "#3a4455", + "fontSize": 10 + }, + "info-card-section": { + "type": "Rectangle", + "left": 16, "top": 340, "width": 480, "height": 280, + "fillColor": "#0d1118", + "strokeColor": "#333340", + "corners": [4, 4, 4, 4] + }, + "info-card-title": { + "type": "Text", + "left": 28, "top": 350, + "text": "INFORMATION CARD — v1.0 (hover on entity/object)", + "fontColor": "#556677", + "fontSize": 11 + }, + "info-card-inner": { + "type": "Rectangle", + "left": 28, "top": 372, "width": 456, "height": 236, + "fillColor": "#12161e", + "strokeColor": "#2a3040", + "corners": [2, 2, 2, 2] + }, + "info-card-accent-bar": { + "type": "Rectangle", + "left": 28, "top": 372, "width": 456, "height": 2, + "fillColor": "#e8c547", + "strokeColor": "#e8c547" + }, + "info-card-name": { + "type": "Text", + "left": 40, "top": 382, + "text": "KAEL DAVAN", + "fontColor": "#e8c547", + "fontSize": 16 + }, + "info-card-role": { + "type": "Text", + "left": 40, "top": 402, + "text": "Dock Worker, The Terminal // Day shift", + "fontColor": "#8899aa", + "fontSize": 12 + }, + "info-card-divider": { + "type": "Line", + "left": 40, "top": 420, "width": 432, "height": 0, + "strokeColor": "#2a3040" + }, + "info-card-known-label": { + "type": "Text", + "left": 40, "top": 428, + "text": "KNOWN:", + "fontColor": "#556677", + "fontSize": 11 + }, + "info-card-fact-1": { + "type": "Text", + "left": 40, "top": 446, "width": 432, + "text": "Cargo handling, Bay 7-12 // confidence: KnowsOf", + "fontColor": "#c8d0e0", + "fontSize": 12, + "wordWrap": true + }, + "info-card-fact-2": { + "type": "Text", + "left": 40, "top": 468, "width": 432, + "text": "Partner: Naia Voss // confidence: KnowsDetails", + "fontColor": "#c8d0e0", + "fontSize": 12, + "wordWrap": true + }, + "info-card-flagged": { + "type": "Text", + "left": 40, "top": 490, "width": 432, + "text": "Anomaly: corridor B-7 at 15:30 off-shift // flagged", + "fontColor": "#e8c547", + "fontSize": 12, + "wordWrap": true + }, + "info-card-note": { + "type": "Text", + "left": 40, "top": 520, "width": 432, + "text": "v1.0 feature — rich knowledge card on entity hover.\nDetective variant: case-file style. Smuggler: personal notes.", + "fontColor": "#3a4455", + "fontSize": 10, + "wordWrap": true + }, + "annotation-title": { + "type": "Text", + "left": 16, "top": 16, + "text": "v1.0 NOTIFICATION STACK + INFORMATION CARD", + "fontColor": "#556677", + "fontSize": 11 + }, + "annotation-notes": { + "type": "Text", + "left": 16, "top": 30, "width": 840, + "text": "Toast stack: top-right, newest first, progress bar per item, category accent colors. Info card: rich entity data card on hover, knowledge graph content.", + "fontColor": "#3a4455", + "fontSize": 10, + "wordWrap": true + } + } +} diff --git a/docs/design/wireframes/popups/v10-notification-stack.png b/docs/design/wireframes/popups/v10-notification-stack.png new file mode 100644 index 000000000..7f4d89934 Binary files /dev/null and b/docs/design/wireframes/popups/v10-notification-stack.png differ