# 1.2 — Status Bar

**Previous Step:** ← [App Shell](../1.1-app-shell/1.1-app-shell.md)

---

## Page Metadata

| Property | Value |
|----------|-------|
| **Scenario** | 01 — Workspace Shell |
| **Page Number** | 1.2 |
| **Platform** | Web (PWA), portable to macOS/Windows |
| **Page Type** | Persistent UI Strip (embedded in App Shell) |
| **Viewport** | All breakpoints |

---

## Overview

**Page Purpose:** Provide at-a-glance contextual information about the current document, engine status, and workspace state. Acts as a persistent information bar at the bottom of the workspace.

**User Situation:** User is working in the editor and glances down for context — current line/column, whether the engine is ready, what theme is active, and document stats.

**Success Criteria:**
- Information readable at a glance without interrupting flow
- No interactive elements that accidentally trigger (info-only, with 2 clickable shortcuts)
- Consistent across all themes

---

## Layout Structure

```
┌──────────────────────────────────────────────────────────────┐
│  [Ln 12, Col 8]  [42 lines]  │  [Engine ● Ready]  [Dark 🎨] │
│  ← left-aligned info          │         right-aligned info →  │
└──────────────────────────────────────────────────────────────┘
```

Height: 24px. Full width. Background: var(--bg-secondary). Border-top: 1px solid var(--border).

---

## Spacing

| Property | Token | Pixels |
|----------|-------|--------|
| Height | — | 24px |
| Padding horizontal | space-md | 12px |
| Item gap | space-md | 12px |
| Dot size (engine status) | — | 6px |
| Dot margin-right | space-2xs | 4px |

---

## Typography

| Element | Size | Weight | Typeface | Color |
|---------|------|--------|----------|-------|
| All status text | text-3xs | 400 | system mono | var(--text) |
| Engine status (ready) | text-3xs | 400 | system mono | var(--success) |
| Engine status (loading) | text-3xs | 400 | system mono | var(--warning) |
| Theme name | text-3xs | 500 | system mono | var(--text) |

---

## Status Items

### Left Group

**OBJECT ID:** `statusbar-left`

| Item | Content | Update Trigger |
|------|---------|----------------|
| Cursor position | `Ln {line}, Col {col}` | Cursor movement |
| Line count | `{n} lines` | Document change |
| Selection (conditional) | `{n} selected` | When text selected |

### Right Group

**OBJECT ID:** `statusbar-right`

| Item | Content | Behavior |
|------|---------|----------|
| Engine status | `● Ready` (green dot) or `◌ Loading...` (amber, pulse) | Auto-updates on engine state change |
| Theme indicator | `{Theme Name} 🎨` | Click → opens theme picker (same as header button) |
| Offline (conditional) | `📡 Offline` | Only visible when offline |

---

## States

| State | Engine Indicator | Additional |
|-------|-----------------|------------|
| Ready | ● green dot, "Ready" | — |
| Loading | ◌ amber dot, pulse animation, "Loading..." | — |
| Error | ● red dot, "Engine error" | Tooltip with error message |
| Offline | ● green dot, "Ready" | + "📡 Offline" appended |

---

## Responsive

| Breakpoint | Behavior |
|------------|----------|
| >= 768px | Full status bar, all items visible |
| < 768px | Simplified: cursor position + engine dot only. Theme and line count hidden. |

---

## Technical Notes

- Status bar reads from editor state (cursor, selection, line count) and engine hook (ready, error)
- Theme indicator is the only clickable element — keeps status bar non-disruptive
- On macOS/Windows: maps to native status bar or window title bar info

---

**Previous Step:** ← [App Shell](../1.1-app-shell/1.1-app-shell.md)

---

_Created using Whiteport Design Studio (WDS) methodology_