# Interfaces

Import these from `@grafloria/element`.

## Interfaces

### `CardEditingHandle`

```ts
interface CardEditingHandle
```

**Members**

- `dispose(): void`

### `ErColumn`

```ts
interface ErColumn
```

**Properties**

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `name` | `string` |  |  |
| `type?` | `string` |  |  |
| `pk?` | `boolean` |  |  |
| `fk?` | `boolean` |  |  |

### `ErDiagramOptions`

```ts
interface ErDiagramOptions
```

**Properties**

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `entities` | `ErEntitySpec[]` |  |  |
| `relationships?` | `ErRelationshipSpec[]` |  |  |
| `rowSelection?` | `boolean` |  | Rows are selectable by default: click a column to select it (painted with .axk-row-selected; axk:row-click / axk:row-select CustomEvents fire on the container). Set false to opt out. |
| `editable?` | `boolean` |  | In-canvas editing (opt-in, default false — read-only diagrams are unchanged). When true the card grows editing chrome: double-click the header to rename the table, double-click a column name to rename it, an "add column" affordance and a per-row delete control. Every change routes through {@link updateEntity } as ONE undoable step. |

### `ErEntityDelta`

What an ER table edit can change. Omitted fields are left as they were.

```ts
interface ErEntityDelta
```

**Properties**

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `name?` | `string` |  |  |
| `width?` | `number` |  |  |
| `height?` | `number` |  |  |
| `columns?` | `ErColumn[]` |  | The NEW full column list. Survivors are matched to the old columns to move their ports (object identity → name → positional remainder), so a rename, a retype, a reorder, an insert and a delete are all understood without the caller preserving object references. See {@link matchColumns}. |

### `ErEntitySpec`

```ts
interface ErEntitySpec
```

**Properties**

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `id` | `string` |  |  |
| `name?` | `string` |  | Header text. Defaults to the id. |
| `columns` | `ErColumn[]` |  |  |
| `position?` | `{ x: number; y: number }` |  |  |
| `width?` | `number` |  |  |
| `height?` | `number` |  | Fixed card height. When smaller than the computed height the column list SCROLLS (the kit body is overflow-y:auto, and the canvas yields the wheel to it). Omit for auto-height from the column count. |

### `ErRelationshipSpec`

```ts
interface ErRelationshipSpec
```

**Properties**

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `from` | `string` |  | Entity id, or `ENTITY.column` to attach at that column's row. |
| `to` | `string` |  |  |
| `label?` | `string` |  |  |
| `cardinality?` | `ErCardinality \| { tail: string; head: string }` |  | Named cardinality (default one-to-many) or explicit marker types. |
| `fromSide?` | `ErSide` |  |  |
| `toSide?` | `ErSide` |  |  |
| `color?` | `string` |  |  |
| `id?` | `string` |  |  |

### `HandleApi`

The slice of DiagramInstance the handles need (same shape update.ts uses).

```ts
interface HandleApi
```

**Properties**

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `container` | `HTMLElement` |  |  |

**Members**

- `getModel(): { getNode(id: string): | { getMetadata?(key: string): unknown; size: { width: number; height: number }; state?: { selected?: boolean }; } | undefined; selectNode?(node: unknown): void; }`
- `getEngine?(): { undo(): Promise<void> | void; redo(): Promise<void> | void } | undefined`
- `renderNow?(): void`

### `JoinEnd`

One end of a candidate join: a table (node) and one of its columns.

```ts
interface JoinEnd
```

**Properties**

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `table` | `string` |  |  |
| `column` | `JoinColumn` |  |  |

### `JoinGuidanceApi`

The slice of DiagramInstance the binding needs (matches HandleApi's shape).

```ts
interface JoinGuidanceApi
```

**Properties**

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `container` | `HTMLElement` |  |  |

**Members**

- `getModel(): { getNode(id: string): NodeLike | undefined; getNodes?(): NodeLike[]; }`
- `getEngine?(): | { eventBus?: { on(event: string, handler: (data: unknown) => void): () => void } } | undefined`

### `JoinGuidanceHandle`

```ts
interface JoinGuidanceHandle
```

**Members**

- `activeTiers(): Map<string, Map<number, MatchTier>>` — nodeId → rowIndex → tier for the drag in progress (empty when idle).
- `dispose(): void`

### `JoinGuidanceOptions`

```ts
interface JoinGuidanceOptions
```

**Properties**

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `resolvePort?` | `(portId: string, nodeId: string \| undefined) => { nodeId: string; column: string } \| null` |  | Resolve a PORT id to its table column. The default understands both the ER kit's convention (`TABLE__col__side__n`) and the query-builder dot convention (`table.col-in` / `table.col-out`), checked against the node's actual `kitEntity` columns so an ambiguous name never mis-resolves. |
| `chipText?` | `string` |  | Text of the gold chip on the best row. Default `'★ BEST'`. |
| `portCss?` | `(tier: MatchTier, selector: string) => string` |  | Extra per-tier CSS for the target columns' PORT glyphs, injected per drag. Default paints the production glows (gold/green/blue drop-shadows). |

### `UmlClassDelta`

What a UML class edit can change.

```ts
interface UmlClassDelta
```

**Properties**

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `name?` | `string` |  |  |
| `stereotype?` | `string` |  |  |
| `abstract?` | `boolean` |  |  |
| `width?` | `number` |  |  |
| `height?` | `number` |  |  |
| `attributes?` | `string[]` |  |  |
| `methods?` | `string[]` |  |  |

### `UmlClassSpec`

```ts
interface UmlClassSpec
```

**Properties**

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `id` | `string` |  |  |
| `name?` | `string` |  | Displayed name. Defaults to the id. |
| `stereotype?` | `string` |  | Renders as «stereotype» above the name (e.g. 'interface', 'abstract', 'enum'). |
| `abstract?` | `boolean` |  | Italicises the name (also set automatically for stereotype 'abstract'/'interface'). |
| `attributes?` | `string[]` |  |  |
| `methods?` | `string[]` |  |  |
| `position?` | `{ x: number; y: number }` |  |  |
| `width?` | `number` |  |  |
| `height?` | `number` |  | Fixed card height — smaller than the content makes the compartments scroll. |

### `UmlDiagramOptions`

```ts
interface UmlDiagramOptions
```

**Properties**

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `classes` | `UmlClassSpec[]` |  |  |
| `relationships?` | `UmlRelationshipSpec[]` |  |  |
| `rowSelection?` | `boolean` |  | Members are selectable by default: click one to select it (painted with .axk-row-selected; axk:row-click / axk:row-select CustomEvents fire on the container). Set false to opt out. |
| `editable?` | `boolean` |  | In-canvas editing (opt-in, default false). When true: double-click the class name to rename it, double-click a member to rename it, an "add" affordance per compartment and a per-member delete control — all routed through {@link updateClass } as one undoable step. |

### `UmlRelationshipSpec`

```ts
interface UmlRelationshipSpec
```

**Properties**

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `from` | `string` |  |  |
| `to` | `string` |  |  |
| `kind?` | `UmlRelationKind` |  | Default 'association'. |
| `label?` | `string` |  |  |
| `multiplicity?` | `[string, string]` |  | Multiplicity / role chips at the [from, to] ends (e.g. ['0..*', '1']). |
| `fromSide?` | `UmlSide` |  |  |
| `toSide?` | `UmlSide` |  |  |
| `id?` | `string` |  |  |
