Add design folder and README

design/top_bar.md

@@ -0,0 +1,19 @@
+# Top Bar Feature
+
+**Purpose**: Persistent UI overlay providing cluster status, krate count, sync indicator, admin controls, and user roster.
+
+**Layout**:
+- `display: flex; align-items: center; padding: 13px 18px;` transparent over canvas.
+- **Left side**:
+  - **Logo pill** (`krates / yard`): background `rgba(14,18,25,.82)`, border `1px solid rgba(140,165,200,.18)`, border‑radius `9px`, padding `7px 12px`, backdrop‑filter `blur(6px)`. Diamond glyph with `clip-path: polygon(50% 0,100% 50%,50% 100%,0 50%)` in accent color.
+  - **Cluster pill**: shows cluster name, green health dot (`#4ad07a`) with `box-shadow: 0 0 8px #4ad07a`.
+  - **Krate count pill**: visible when krates exist.
+- **Right side**:
+  - **Synced pill**: pulsing accent dot + text "synced".
+  - **Admin button**: `◉ admin` – outlined when active, muted otherwise.
+  - **Roster avatars**: overlapping circles (`margin-left: -7px`), 30×30 px, colored per user, initials (★ for self).
+
+**Behavior**:
+- Stays fixed at top; does not scroll with canvas.
+- Clicking **Admin button** toggles the Admin Drawer.
+- Avatars show presence via Yjs awareness; hovering shows tooltip with username.