Files
2026-06-16 08:31:55 -04:00

40 lines
1.8 KiB
Markdown
Raw Permalink Blame History

This file contains invisible Unicode characters
This file contains invisible Unicode characters that are indistinguishable to humans but may be processed differently by a computer. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
# 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 autofits to the bounding box of its windows plus 30px 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 2column grid.
- Column0 offset `dx:0`, column1 offset `dx:412`.
- Row height `416px`.
- 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.
- **Doubleclick header** → toggle collapse/expand.
- **Minimize button (—)** → collapse to overview card (230px wide) showing name, viewletter badges, status dot, window count, namespace.
- **Doubleclick collapsed card** → reexpand and fly camera to the krate.
- **Nonoverlapping placement**: on mouse release after a drag, the krate adjusts position to avoid overlapping other krates.
- **Camera flyto** 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
}
```