# Facility Layout Designer - Premium UX Specification

## 🎯 Design Vision

A **Figma-meets-SketchUp** experience for cannabis facility floor planning. Premium, intuitive, and powerful enough for compliance while beautiful enough for investor demos.

---

## 🏗️ Core Architecture

### Multi-Floor Support

```
PROPERTY
├── BUILDING 1 (Main Cultivation)
│   ├── FLOOR 1 (Ground)
│   │   ├── Veg Room A
│   │   ├── Veg Room B
│   │   └── Clone Room
│   └── FLOOR 2 (Upper)
│       ├── Flower Room A
│       ├── Flower Room B
│       └── Flower Room C
├── BUILDING 2 (Processing)
│   └── FLOOR 1
│       ├── Dry Room
│       ├── Cure Room
│       └── Trim Room
└── BUILDING 3 (Storage)
    └── FLOOR 1
        └── Vault
```

### Address Format with Floor

```
MAIN.GROW1.F2.FLOWER-A.LEFT.R3.C5.P1
         ↑
      Floor 2
```

---

## 🎨 UI Layout (Premium Dark Mode)

```
┌─────────────────────────────────────────────────────────────────────────────┐
│  ⚡ Layout Designer    [Building ▼] [Floor 1 ▼]  🔍 100%   ⊞ ⊟ ↺ ↻   💾 Save │
├───────────────┬─────────────────────────────────────────────┬───────────────┤
│               │                                             │               │
│  📁 LAYERS    │                                             │  📐 INSPECTOR │
│  ─────────    │                                             │  ─────────── │
│               │         [ CANVAS - FLOOR PLAN ]             │               │
│  ▼ Floor 1    │                                             │  Selected:    │
│    ├ Veg-A    │     ┌─────────────┐  ┌─────────────┐       │  VEG ROOM A   │
│    ├ Veg-B    │     │             │  │             │       │               │
│    └ Clones   │     │   VEG-A     │  │   VEG-B     │       │  Size: 40x30' │
│               │     │   🌱 234    │  │   🌱 189    │       │  Tables: 6    │
│  ▶ Floor 2    │     │             │  │             │       │  Capacity: 480│
│               │     └─────────────┘  └─────────────┘       │  Occupied: 423│
│  ─────────    │                                             │  ▓▓▓▓▓▓▓▓░░   │
│               │     ┌────────────────────────────┐          │  88% full     │
│  🧩 ELEMENTS  │     │                            │          │               │
│  ─────────    │     │      CLONE ROOM            │          │  ─────────── │
│               │     │      🌱 120                │          │  POSITIONS   │
│  ▢ Room       │     │                            │          │  [Grid View] │
│  ▦ Table      │     └────────────────────────────┘          │               │
│  ═ Rack       │                                             │  R1: ████████ │
│  ⊡ Position   │            [AISLE]                          │  R2: █████░░░ │
│               │                                             │  R3: ████████ │
│  🎨 STYLES    │                                             │  R4: ░░░░░░░░ │
│  ─────────    │                                             │               │
│  ● Veg        │                                             │  [+ Add Row]  │
│  ● Flower     │                                             │               │
│  ● Dry        │                                             │               │
│  ● Cure       │                                             │               │
│               │                                             │               │
└───────────────┴─────────────────────────────────────────────┴───────────────┘
```

---

## ✨ Premium UX Features

### 1. Canvas Interactions

| Gesture | Action |
|---------|--------|
| **Scroll** | Pan canvas |
| **Pinch/Scroll+Ctrl** | Zoom |
| **Click element** | Select |
| **Double-click** | Edit properties |
| **Drag** | Move element |
| **Drag corner** | Resize |
| **Shift+Drag** | Constrain proportions |
| **Alt+Drag** | Duplicate |
| **Delete/Backspace** | Remove |

### 2. Floor Selector

- Dropdown showing all floors
- 3D mini-map showing floor stack
- Shift+PageUp/Down to switch floors
- Floor comparison overlay (ghost previous floor)

### 3. Smart Snapping

- **Snap to grid** (configurable: 1ft, 6", 1m)
- **Snap to edges** (align with adjacent rooms)
- **Snap to centers** (center alignment guides)
- **Smart dimensions** (show distances while dragging)

### 4. Element Library

```tsx
const ELEMENTS = {
  rooms: [
    { type: 'VEG', icon: '🌱', color: 'emerald' },
    { type: 'FLOWER', icon: '🌸', color: 'purple' },
    { type: 'CLONE', icon: '🧬', color: 'blue' },
    { type: 'DRY', icon: '🍂', color: 'amber' },
    { type: 'CURE', icon: '🫙', color: 'orange' },
    { type: 'TRIM', icon: '✂️', color: 'slate' },
    { type: 'VAULT', icon: '🔒', color: 'zinc' },
  ],
  fixtures: [
    { type: 'TABLE', icon: '▦', description: '4x8 grow table' },
    { type: 'RACK', icon: '═', description: 'Drying rack' },
    { type: 'TRAY', icon: '▢', description: 'Clone tray' },
    { type: 'HANGER', icon: '⌐', description: 'Vertical hanger' },
  ],
  infrastructure: [
    { type: 'DOOR', icon: '🚪' },
    { type: 'HVAC', icon: '❄️' },
    { type: 'ELECTRICAL', icon: '⚡' },
    { type: 'WATER', icon: '💧' },
  ],
};
```

### 5. Inspector Panel

#### Room Properties

```
┌─────────────────────────────┐
│  VEG ROOM A                 │
│  ─────────────────────────  │
│                             │
│  📍 Location                │
│  Building:  [Grow 1    ▼]   │
│  Floor:     [Floor 1   ▼]   │
│  Code:      [VEG-A      ]   │
│                             │
│  📐 Dimensions              │
│  Width:     [40] ft         │
│  Height:    [30] ft         │
│  Area:      1,200 sq ft     │
│                             │
│  🌱 Capacity                │
│  Tables:    [6 ]            │
│  Positions: 480             │
│  Occupied:  423 (88%)       │
│                             │
│  🎨 Appearance              │
│  Color:     [🟢 Emerald ▼]  │
│  Label:     [Vegetative A]  │
│                             │
│  [Delete Room]              │
└─────────────────────────────┘
```

#### Table/Section Properties

```
┌─────────────────────────────┐
│  TABLE T1                   │
│  ─────────────────────────  │
│                             │
│  📐 Grid Configuration      │
│  Rows:      [6 ]            │
│  Columns:   [8 ]            │
│  Spacing:   [12] in         │
│                             │
│  Total Positions: 48        │
│  Occupied: 42               │
│  Empty: 6                   │
│                             │
│  📊 Current Batch           │
│  [OG Kush #4] - 42 plants   │
│                             │
│  [View Grid] [Edit Grid]    │
└─────────────────────────────┘
```

---

## 🎨 Visual Design System

### Color Palette (Dark Mode)

```css
/* Background */
--bg-canvas: #0f172a;      /* Slate 900 */
--bg-sidebar: #1e293b;     /* Slate 800 */
--bg-panel: #334155;       /* Slate 700 */

/* Room Types */
--room-veg: #10b981;       /* Emerald */
--room-flower: #a855f7;    /* Purple */
--room-clone: #3b82f6;     /* Blue */
--room-dry: #f59e0b;       /* Amber */
--room-cure: #f97316;      /* Orange */
--room-trim: #64748b;      /* Slate */

/* Grid */
--grid-line: rgba(255,255,255,0.05);
--grid-major: rgba(255,255,255,0.1);

/* Selection */
--selection: #10b981;
--selection-glow: rgba(16,185,129,0.3);
```

### Typography

```css
--font-ui: 'Space Grotesk', system-ui;
--font-mono: 'JetBrains Mono', monospace;

/* Sizes */
--text-panel-title: 0.75rem; /* 12px */
--text-label: 0.875rem;      /* 14px */
--text-input: 1rem;          /* 16px */
```

### Glassmorphism Panels

```css
.panel {
  background: rgba(30, 41, 59, 0.8);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.3);
}
```

---

## 🖥️ Component Architecture

```
LayoutDesigner/
├── LayoutDesigner.tsx         # Main container
├── components/
│   ├── Canvas/
│   │   ├── Canvas.tsx         # react-konva stage
│   │   ├── Grid.tsx           # Background grid
│   │   ├── RoomShape.tsx      # Room polygon
│   │   ├── TableShape.tsx     # Table rectangle
│   │   ├── SelectionBox.tsx   # Multi-select
│   │   └── Guides.tsx         # Alignment guides
│   ├── Sidebar/
│   │   ├── Sidebar.tsx
│   │   ├── LayersPanel.tsx    # Floor/room hierarchy
│   │   ├── ElementsPanel.tsx  # Draggable elements
│   │   └── StylesPanel.tsx    # Color/appearance
│   ├── Inspector/
│   │   ├── Inspector.tsx
│   │   ├── RoomInspector.tsx
│   │   ├── TableInspector.tsx
│   │   └── GridEditor.tsx     # Position grid editor
│   ├── Toolbar/
│   │   ├── Toolbar.tsx
│   │   ├── ZoomControls.tsx
│   │   ├── FloorSelector.tsx
│   │   └── HistoryButtons.tsx
│   └── Modals/
│       ├── AddFloorModal.tsx
│       ├── AddBuildingModal.tsx
│       └── ImportExportModal.tsx
├── hooks/
│   ├── useCanvas.ts           # Canvas state
│   ├── useSelection.ts        # Selected elements
│   ├── useHistory.ts          # Undo/redo
│   └── useDragDrop.ts         # Element placement
├── stores/
│   └── layoutStore.ts         # Zustand state
└── utils/
    ├── geometry.ts            # Collision, bounds
    ├── addressGenerator.ts    # Create addresses
    └── exporters.ts           # PDF, image export
```

---

## 📱 Responsive Behavior

### Desktop (1200px+)

- 3-column layout: Sidebar | Canvas | Inspector
- Full feature set

### Tablet (768-1199px)

- 2-column: Collapsible sidebar | Canvas
- Inspector as slide-over panel
- Touch-friendly controls

### Mobile (< 768px)

- Full-screen canvas
- Bottom sheet for elements/inspector
- Simplified tools
- "View Only" mode recommended

---

## ⌨️ Keyboard Shortcuts

| Shortcut | Action |
|----------|--------|
| `Space + Drag` | Pan |
| `Cmd/Ctrl + +/-` | Zoom |
| `Cmd/Ctrl + 0` | Fit to screen |
| `Cmd/Ctrl + Z` | Undo |
| `Cmd/Ctrl + Shift + Z` | Redo |
| `Cmd/Ctrl + D` | Duplicate |
| `Cmd/Ctrl + G` | Group |
| `Delete` | Remove selected |
| `Escape` | Deselect |
| `Tab` | Cycle selection |
| `1-9` | Quick zoom levels |
| `F` | Fit selection |
| `G` | Toggle grid |
| `S` | Toggle snap |

---

## 🔄 State Management (Zustand)

```typescript
interface LayoutState {
  // Current context
  propertyId: string;
  buildingId: string;
  floorId: string;
  
  // Canvas
  zoom: number;
  pan: { x: number; y: number };
  showGrid: boolean;
  snapToGrid: boolean;
  gridSize: number; // feet
  
  // Selection
  selectedIds: string[];
  hoveredId: string | null;
  
  // Elements
  rooms: Room[];
  sections: Section[];
  positions: Position[];
  
  // History
  past: LayoutSnapshot[];
  future: LayoutSnapshot[];
  
  // Actions
  addRoom: (room: Partial<Room>) => void;
  updateRoom: (id: string, updates: Partial<Room>) => void;
  deleteRoom: (id: string) => void;
  undo: () => void;
  redo: () => void;
  // ... etc
}
```

---

## 📄 Export Options

1. **PDF Floor Plan** - Printable blueprint with dimensions
2. **PNG/SVG Image** - For presentations
3. **JSON Layout** - Backup/restore
4. **METRC Location Report** - All addresses in compliance format
5. **Position Labels** - Generate QR labels for all positions

---

## 🚀 Implementation Priority

### Week 1: Foundation

- [ ] Zustand store setup
- [ ] Basic canvas with react-konva
- [ ] Grid rendering
- [ ] Pan & zoom

### Week 2: Elements

- [ ] Room shapes (create, select, move, resize)
- [ ] Sidebar with element library
- [ ] Drag to canvas
- [ ] Inspector panel

### Week 3: Multi-Floor

- [ ] Floor selector
- [ ] Floor switching
- [ ] Ghost overlay of other floors
- [ ] Building/floor CRUD

### Week 4: Positions

- [ ] Table grid generator
- [ ] Position grid view
- [ ] Occupancy visualization
- [ ] Plant placement integration

### Week 5: Polish

- [ ] Snap guides
- [ ] Keyboard shortcuts
- [ ] Undo/redo history
- [ ] Export functions

### Week 6: Integration

- [ ] API integration
- [ ] Real-time updates
- [ ] METRC address mapping
- [ ] QR code generation
