# PortSpec

Import it from `@grafloria/renderer`.

A port on a node. Omit `id` to get the deterministic `<nodeId>__<side>` name.

Carries the whole port vocabulary through to the `PortModel`: glyph shapes,
port labels, the pluggable layout strategies, port groups, data types,
directional gating, link spots and link spreading. `Grafloria.render()`,
`<grafloria-flow>` and every framework component build their ports from this.

```ts
interface PortSpec
```

**Properties**

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `id?` | `string` |  |  |
| `side?` | `'top' \| 'right' \| 'bottom' \| 'left'` |  | Which edge of the node the port sits on. Optional when the port names a `group` that declares one — `PortModel.explicitSide` exists precisely so an inherited side is not clobbered by a default. |
| `type?` | `'input' \| 'output' \| 'bi'` |  |  |
| `index?` | `number` |  |  |
| `group?` | `string` |  | Named port group. Config is inherited from it; these fields override. |
| `shape?` | `PortShapeSpec` |  | Glyph: square / diamond / triangle / a custom SVG path. Default: circle. |
| `label?` | `PortLabelSpec` |  | Port label + its placement (inside / outside / orthogonal / radial). |
| `layout?` | `PortLayoutSpec` |  | Layout strategy (line / sideLinear / ellipse / …). Default: the shape anchor. |
| `gating?` | `PortGatingSpec` |  | Directional connectability + link caps + allowed types. |
| `dataType?` | `string` |  | Data-flow type. Drives glyph colour AND connection validity. |
| `fromSpot?` | `PortSpot` |  | Where links leave / land on the glyph box. |
| `toSpot?` | `PortSpot` |  |  |
| `spread?` | `PortSpreadSpec` |  | Fan several links out along the port's edge instead of piling them. |
| `style?` | `Record<string, unknown>` |  | Raw SVG presentation attributes merged onto the glyph. |
| `maxConnections?` | `number` |  | The legacy single cap. `gating` is the richer form. |
| `visible?` | `boolean` |  |  |