# PortSpec

Import it from `@grafloria/renderer`.

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

`PortSpec` used to be `{ id, side, type, index }` and `buildNode()` passed
exactly those four fields to `new PortModel(...)`.

`Grafloria.render()`, `<grafloria-flow>` and `<GrafloriaFlow>` (React) ALL build their
ports here. So an entire wave of feature work — square/diamond/triangle/path
glyphs, `sideLinear`/`line`/`ellipse` layouts, typed data-flow ports, "this
port accepts at most one link" — could not be expressed by any embedder, from
any framework, through any public entry point. It had passing unit tests the
whole time, because the unit tests construct `PortModel` directly.

This is the demo gallery's canonical finding shape, and it is why the gallery
exists: a unit test proves a unit works; it never proves anything CALLS it.

```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` |  |  |