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

# Shapes

> API reference for shape types and interfaces

## ShapeId

```typescript theme={null}
type ShapeId = string
```

Unique identifier for each shape, generated by the engine at creation time.

## Vec3

```typescript theme={null}
interface Vec3 {
  x: number
  y: number
  z?: number
}
```

A 2D point with optional pressure. The `z` field ranges from `0` to `1` and is present when drawn with a pressure-sensitive stylus.

## DrawSegment

```typescript theme={null}
interface DrawSegment {
  type: SegmentType
  path: string
}

type SegmentType = 'free' | 'straight'
```

A segment of a stroke. The `path` field is a base64-encoded buffer of `Vec3` points.

## DrawShape

```typescript theme={null}
interface DrawShape {
  id: ShapeId
  type: 'draw'
  x: number
  y: number
  props: {
    color: ColorStyle
    dash: DashStyle
    fill: FillStyle
    size: SizeStyle
    scale: number
    isPen: boolean
    isComplete: boolean
    segments: DrawSegment[]
    isClosed: boolean
  }
}
```

## Style types

```typescript theme={null}
type SizeStyle = 's' | 'm' | 'l' | 'xl'
type DashStyle = 'draw' | 'solid' | 'dashed' | 'dotted'
type FillStyle = 'none' | 'semi' | 'solid' | 'blank'
type ColorStyle = string
```

## Shape type union

```typescript theme={null}
type Shape = DrawShape
```

Currently, `DrawShape` is the only shape type. Additional types may be added in future versions.

## Constants

| Constant                | Value                            | Description                                          |
| ----------------------- | -------------------------------- | ---------------------------------------------------- |
| `STROKE_WIDTHS`         | `{ s: 2, m: 3.5, l: 5, xl: 10 }` | Pixel widths for each size                           |
| `DRAG_DISTANCE_SQUARED` | `36`                             | Threshold for click vs drag detection                |
| `MAX_POINTS_PER_SHAPE`  | `200`                            | Maximum points per shape before a new segment starts |
| `DEFAULT_COLORS`        | Record of 13 colors              | Built-in color palette                               |

## Path codec utilities

```typescript theme={null}
import { encodePoints, decodePoints, decodeFirstPoint, decodeLastPoint } from '@tsdraw/core'

const encoded = encodePoints(points: Vec3[]): string
const decoded = decodePoints(encoded: string): Vec3[]
const first = decodeFirstPoint(encoded: string): Vec3
const last = decodeLastPoint(encoded: string): Vec3
```