Add design folder and README

design/krate.md

@@ -0,0 +1,39 @@
+# Krate Feature
+
+**Purpose**: Named group of windows for a single Kubernetes object (or a collection) placed on the canvas.
+
+**Visual Container**:
+- Dashed border frame around all its windows: `border: 1px dashed rgba(color, .3); border-radius: 18px; background: rgba(color, .04)`.
+- Frame auto‑fits to the bounding box of its windows plus 30 px padding.
+- Header bar above the frame shows object name, status badge, window count, a drag handle, and a close (×) button.
+
+**Layout of Windows**:
+- Tiled in a 2‑column grid.
+- Column 0 offset `dx:0`, column 1 offset `dx:412`.
+- Row height `416 px`.
+- When a window is resized, sibling windows resize proportionally within the same column/row.
+- Windows never overlap – on drag release the krate checks other krate bounding boxes and nudges to avoid overlap (gentle snap).
+
+**Interactions**:
+- **Drag header** → move entire krate.
+- **Double‑click header** → toggle collapse/expand.
+- **Minimize button (—)** → collapse to overview card (230 px wide) showing name, view‑letter badges, status dot, window count, namespace.
+- **Double‑click collapsed card** → re‑expand and fly camera to the krate.
+- **Non‑overlapping placement**: on mouse release after a drag, the krate adjusts position to avoid overlapping other krates.
+- **Camera fly‑to** after summon: animates to centre the krate at `zoom: 0.92`.
+
+**State** (`Krate` interface in design docs):
+```typescript
+interface Krate {
+  id: string;
+  objId: string | null;        // null for collection krates
+  collScope?: { kind: 'namespace' | 'category', value: string };
+  label: string;
+  status: string;
+  color: string;               // derived from namespace palette
+  wx: number; wy: number;      // world position
+  minimized: boolean;
+  windows: Window[];
+  seq: number;                 // for generating window IDs
+}
+```