> ## Documentation Index
> Fetch the complete documentation index at: https://mintlify.com/pascalorg/editor/llms.txt
> Use this file to discover all available pages before exploring further.

# ZoneNode

> Node representing a room or zone with polygon boundary and visual styling

## Overview

The `ZoneNode` represents a room, space, or designated zone within a level. Zones are defined by a polygon boundary and include visual styling (color) for rendering. They're used for space planning, room identification, and area calculations.

**Key features**:

* Polygon-based zone definition
* Named spaces for organization
* Color-coded visual representation
* Custom metadata support

## Type Signature

```typescript theme={null}
import { z } from 'zod'
import { BaseNode, nodeType, objectId } from '../base'

const ZoneNode = BaseNode.extend({
  id: objectId('zone'),
  type: nodeType('zone'),
  name: z.string(),
  polygon: z.array(z.tuple([z.number(), z.number()])),
  color: z.string().default('#3b82f6'),
  metadata: z.json().optional().default({}),
})

type ZoneNode = z.infer<typeof ZoneNode>
```

Source: `/home/daytona/workspace/source/packages/core/src/schema/nodes/zone.ts`

## Fields

### Inherited from BaseNode

<ParamField path="id" type="string" required>
  Unique zone identifier.

  **Format**: `zone_{randomString}`

  **Example**: `"zone_a1b2c3d4e5f6g7h8"`
</ParamField>

<ParamField path="type" type="string" required>
  Always set to `"zone"`.

  **Default**: `"zone"`
</ParamField>

<ParamField path="parentId" type="string | null" required>
  Reference to the parent level's ID.

  **Example**: `"level_abc123"`

  **Default**: `null`
</ParamField>

<ParamField path="visible" type="boolean">
  Controls zone visibility.

  **Default**: `true`
</ParamField>

<ParamField path="camera" type="CameraSchema">
  Optional camera viewpoint for the zone.
</ParamField>

### Zone-Specific Fields

<ParamField path="name" type="string" required>
  Name of the zone/room.

  **Required** for ZoneNode (overrides optional name in BaseNode)

  **Examples**:

  * `"Living Room"`
  * `"Master Bedroom"`
  * `"Kitchen"`
  * `"Conference Room A"`
  * `"Storage Area"`
</ParamField>

<ParamField path="polygon" type="Array<[number, number]>" required>
  Array of 2D points defining the zone boundary.

  **Format**: Array of `[x, z]` coordinates in meters

  **Example**:

  ```json theme={null}
  [
    [0, 0],
    [6, 0],
    [6, 8],
    [0, 8]
  ]
  ```

  The polygon defines the room boundary in the level coordinate system. The renderer will automatically close the polygon by connecting the last point to the first.
</ParamField>

<ParamField path="color" type="string" required>
  Hex color code for visual styling of the zone.

  **Default**: `"#3b82f6"` (blue)

  **Format**: Hex color string (e.g., `"#FF0000"`, `"#3b82f6"`)

  **Examples**:

  * `"#3b82f6"` - Blue (default)
  * `"#10b981"` - Green
  * `"#f59e0b"` - Orange
  * `"#ef4444"` - Red
  * `"#8b5cf6"` - Purple

  Used to differentiate zones visually in the 3D scene and floor plans.
</ParamField>

<ParamField path="metadata" type="any" required>
  Custom metadata for the zone.

  **Default**: `{}`

  **Common use cases**:

  * Room area calculations
  * Space type classification
  * Occupancy information
  * HVAC zone assignments
  * Custom properties

  **Example**:

  ```json theme={null}
  {
    "area": 48.5,
    "roomType": "living",
    "capacity": 12,
    "hvacZone": "zone-a"
  }
  ```
</ParamField>

## Example

```typescript theme={null}
import { ZoneNode } from '@pascal/core/schema/nodes/zone'

const zone: ZoneNode = {
  object: 'node',
  id: 'zone_abc123',
  type: 'zone',
  name: 'Living Room',
  parentId: 'level_xyz789',
  visible: true,
  polygon: [
    [0, 0],
    [8, 0],
    [8, 6],
    [0, 6],
  ],
  color: '#3b82f6',
  metadata: {
    area: 48,
    roomType: 'living',
    furnished: true,
    windows: 2,
  },
}
```

## Usage

### Creating a Simple Zone

```typescript theme={null}
import { ZoneNode } from '@pascal/core/schema/nodes/zone'

const livingRoom = ZoneNode.parse({
  name: 'Living Room',
  polygon: [
    [0, 0],
    [8, 0],
    [8, 6],
    [0, 6],
  ],
})
// Uses default blue color
```

### Creating Zones with Different Colors

```typescript theme={null}
const bedroom = ZoneNode.parse({
  name: 'Master Bedroom',
  polygon: [
    [8, 0],
    [14, 0],
    [14, 6],
    [8, 6],
  ],
  color: '#10b981', // Green
})

const kitchen = ZoneNode.parse({
  name: 'Kitchen',
  polygon: [
    [0, 6],
    [6, 6],
    [6, 10],
    [0, 10],
  ],
  color: '#f59e0b', // Orange
})

const bathroom = ZoneNode.parse({
  name: 'Bathroom',
  polygon: [
    [6, 6],
    [8, 6],
    [8, 8],
    [6, 8],
  ],
  color: '#3b82f6', // Blue
})
```

### Creating an L-Shaped Zone

```typescript theme={null}
const lShapedRoom = ZoneNode.parse({
  name: 'Open Plan Living',
  polygon: [
    [0, 0],
    [10, 0],
    [10, 5],
    [5, 5],
    [5, 10],
    [0, 10],
  ],
  color: '#8b5cf6',
})
```

### Creating Zones with Metadata

```typescript theme={null}
const conferenceRoom = ZoneNode.parse({
  name: 'Conference Room A',
  polygon: [
    [0, 0],
    [12, 0],
    [12, 8],
    [0, 8],
  ],
  color: '#ef4444',
  metadata: {
    area: 96,
    capacity: 20,
    equipment: ['projector', 'whiteboard', 'video conference'],
    bookable: true,
    floor: 2,
  },
})
```

### Creating Multiple Zones for a Floor Plan

```typescript theme={null}
const apartmentZones = [
  ZoneNode.parse({
    name: 'Living Room',
    polygon: [[0, 0], [8, 0], [8, 6], [0, 6]],
    color: '#3b82f6',
  }),
  ZoneNode.parse({
    name: 'Kitchen',
    polygon: [[8, 0], [12, 0], [12, 6], [8, 6]],
    color: '#f59e0b',
  }),
  ZoneNode.parse({
    name: 'Bedroom 1',
    polygon: [[0, 6], [6, 6], [6, 12], [0, 12]],
    color: '#10b981',
  }),
  ZoneNode.parse({
    name: 'Bedroom 2',
    polygon: [[6, 6], [12, 6], [12, 12], [6, 12]],
    color: '#10b981',
  }),
  ZoneNode.parse({
    name: 'Bathroom',
    polygon: [[4, 12], [8, 12], [8, 14], [4, 14]],
    color: '#06b6d4',
  }),
]
```

## Zone Visualization

Zones are typically rendered in the 3D scene as:

* Colored overlay on the floor
* Semi-transparent fill with the specified color
* Labels showing the zone name
* Boundary outlines

```
Top View:
┌──────────┬──────┐
│          │      │
│  Living  │ Kit. │  ← Colored zones
│   Room   │      │
├──────┬───┴──────┤
│ Bed  │   Bed    │
│  1   │    2     │
└──────┴──────────┘
```

## Coordinate System

Zones use 2D coordinates in the level's XZ plane:

* X axis: horizontal (left-right)
* Z axis: horizontal (front-back)
* Y axis: implied by level elevation (zones are at floor level)

## Use Cases

* **Room definitions** for residential and commercial spaces
* **Space planning** and area allocation
* **Color-coded floor plans** for different room types
* **Area calculations** for real estate and construction
* **Functional zones** (public, private, service areas)
* **HVAC and building systems** zone assignment
* **Occupancy tracking** and space management

## Related

* [BaseNode](/api/nodes/base) - Inherited base fields
* [LevelNode](/api/nodes/level) - Parent node containing zones
* [SlabNode](/api/nodes/slab) - Floor slabs (similar polygon structure)


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.