settled-reach/docs/diagrams/ui/hud-layout.d2

# HUD Layout and Z-Stack — D-049, D-048, D-061, D-076
# 8-layer z-stack, insert overlay, dialogue box constraints.
# Dual-scale grid context: 64x64px visual tiles (D-066).

vars: {
  color-screen: "#1a1e24"
  color-panel: "#2a3040"
  color-text: "#c8d0e0"
  color-nav: "#c8d8f0"
  color-stroke: "#333340"
}

direction: down

zstack: Rendering Z-Stack (D-049)\n8 layers — bottom to top {
  style.fill: ${color-screen}
  style.stroke: ${color-nav}
  style.font-color: ${color-text}

  l0: Layer 0 — Floor Tiles\n(zone identity · movement surface) {
    style.fill: ${color-panel}
    style.stroke: ${color-stroke}
    style.font-color: ${color-text}
  }
  l1: Layer 1 — Floor Objects\n(cosmetic · walked over) {
    style.fill: ${color-panel}
    style.stroke: ${color-stroke}
    style.font-color: ${color-text}
  }
  l2: Layer 2 — Furniture / Placed Objects\n(y-sorted with entities) {
    style.fill: ${color-panel}
    style.stroke: ${color-stroke}
    style.font-color: ${color-text}
  }
  l3: Layer 3 — Entity Sprites\n(y-sorted · D-033 relationship color\n24x32px footprint in 64x64 tile) {
    style.fill: ${color-panel}
    style.stroke: ${color-nav}
    style.font-color: ${color-text}
  }
  l4: Layer 4 — Overhead / Wall Tops\n(pipes · ducts · fixtures · signage\nsemi-transparent partial occlusion) {
    style.fill: ${color-panel}
    style.stroke: ${color-stroke}
    style.font-color: ${color-text}
  }
  l5: Layer 5 — Fog of Perception\n(vision cone mask · fog shader\naffects layers 0-4) {
    style.fill: ${color-panel}
    style.stroke: ${color-nav}
    style.font-color: ${color-text}
  }
  l6: Layer 6 — Insert Overlay\n(lattice HUD · bloom-rendered\nNOT affected by fog\nInteraction labels render here) {
    style.fill: ${color-panel}
    style.stroke: ${color-nav}
    style.font-color: ${color-text}
  }
  l7: Layer 7 — Monologue / UI\n(always visible · top of stack\nDialogue box and response options) {
    style.fill: ${color-panel}
    style.stroke: ${color-nav}
    style.font-color: ${color-text}
    style.bold: true
  }
}

insert_overlay: Insert Overlay Design (D-048) {
  style.fill: ${color-screen}
  style.stroke: ${color-nav}
  style.font-color: ${color-text}

  bloom: Soft bloom shader\n~2-3px gaussian · ~40% blend {
    style.fill: ${color-panel}
    style.stroke: ${color-stroke}
    style.font-color: ${color-text}
  }
  smuggler_overlay: Smuggler\nthinner · sparser (baseline lattice) {
    style.fill: ${color-panel}
    style.stroke: ${color-stroke}
    style.font-color: ${color-text}
  }
  detective_overlay: Detective\ndenser · crisper (augmented lattice) {
    style.fill: ${color-panel}
    style.stroke: ${color-nav}
    style.font-color: ${color-text}
  }
  insert_off: Insert OFF behavior (OQ-07)\nCursor shape changes\nInteraction labels hidden {
    style.fill: ${color-panel}
    style.stroke: ${color-stroke}
    style.font-color: ${color-text}
    style.stroke-dash: 4
  }
}

dialogue_box: Dialogue Box (D-061, D-076) {
  style.fill: ${color-screen}
  style.stroke: ${color-nav}
  style.font-color: ${color-text}

  position: Bottom of screen\nmax 20% height {
    style.fill: ${color-panel}
    style.stroke: ${color-stroke}
    style.font-color: ${color-text}
  }
  max_width: Max-width 1200px\n(centered · ~62% of 1920px) {
    style.fill: ${color-panel}
    style.stroke: ${color-stroke}
    style.font-color: ${color-text}
  }
  log: Unified conversation log\n(active + overheard — chronological) {
    style.fill: ${color-panel}
    style.stroke: ${color-nav}
    style.font-color: ${color-text}
  }
  speaker_format: Speaker to Target format\nper-character name colours {
    style.fill: ${color-panel}
    style.stroke: ${color-stroke}
    style.font-color: ${color-text}
  }
  responses: Response options below log\nmax 3 visible {
    style.fill: ${color-panel}
    style.stroke: ${color-stroke}
    style.font-color: ${color-text}
  }
  no_portraits: No portraits\n(NPC is on screen) {
    style.fill: ${color-panel}
    style.stroke: ${color-stroke}
    style.font-color: ${color-text}
  }
  timeout: Entry timeout\n15s + 3s fade (configurable) {
    style.fill: ${color-panel}
    style.stroke: ${color-stroke}
    style.font-color: ${color-text}
  }
}

monologue_position: Monologue floats ABOVE dialogue box\n(z-layer 7 — spatial separation\ncharacter thinks while NPC speaks) {
  style.fill: ${color-panel}
  style.stroke: ${color-nav}
  style.font-color: ${color-text}
  style.border-radius: 4
}

zstack.l5 -> insert_overlay: "does NOT affect" {
  style.stroke: ${color-nav}
  style.stroke-dash: 4
}
zstack.l6 -> insert_overlay: "rendered at" { style.stroke: ${color-nav} }
zstack.l7 -> dialogue_box: "rendered at" { style.stroke: ${color-nav} }
dialogue_box -> monologue_position: "monologue above" { style.stroke: ${color-nav} }