# Interfaces B–S

Import these from `@grafloria/renderer`.

## Interfaces

### `BooleanPropertyDefinition`

Also has every member of `PropertyDefinition`, listed on its own entry.

Boolean property definition

```ts
interface BooleanPropertyDefinition extends PropertyDefinition
```

**Properties**

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `editor` | `'boolean'` |  | Editor type to use for this property |
| `defaultValue?` | `boolean` |  | Default value if property is not set |

**Example**

```typescript
const prop: BooleanPropertyDefinition = {
  key: 'enabled',
  label: 'Enabled',
  editor: 'boolean',
  defaultValue: true
};
```

### `BoundingBox`

Bounding box result.

```ts
interface BoundingBox
```

**Properties**

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `x` | `number` |  |  |
| `y` | `number` |  |  |
| `width` | `number` |  |  |
| `height` | `number` |  |  |

### `CanvasRendererConfig`

Canvas Renderer Configuration

```ts
interface CanvasRendererConfig
```

**Properties**

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `enableHitDetection?` | `boolean` |  | Enable hit detection canvas Default: true |
| `hitCanvasScale?` | `number` |  | Scale factor for hit detection canvas Higher values = more accurate but slower Default: 1.0 |

### `ColorPalette`

Color palette for theme

```ts
interface ColorPalette
```

**Properties**

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `background` | `{ default: string; surface: string; elevated: string; }` |  | Background colors |
| `text` | `{ primary: string; secondary: string; disabled: string; inverse: string; }` |  | Text colors |
| `node` | `{ default: { fill: string; stroke: string; }; selected: { fill: string; stroke: string; }; highlighted: { fill: string; stroke: string; }; hovered: { fill: string; stroke: string; }; disabled: { fill: string; stroke: string; }; error: { fill: string; stroke: string; }; }` |  | State-based node colors |
| `link` | `{ default: string; selected: string; highlighted: string; hovered: string; disabled: string; }` |  | State-based link colors |
| `port` | `{ input: string; output: string; bi: string; }` |  | Port colors by type |
| `primary` | `string` |  | Semantic colors |
| `secondary` | `string` |  |  |
| `success` | `string` |  |  |
| `warning` | `string` |  |  |
| `error` | `string` |  |  |
| `info` | `string` |  |  |

### `ColorPropertyDefinition`

Also has every member of `PropertyDefinition`, listed on its own entry.

Color picker property definition

```ts
interface ColorPropertyDefinition extends PropertyDefinition
```

**Properties**

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `editor` | `'color'` |  | Editor type to use for this property |
| `defaultValue?` | `string` |  | Default value if property is not set |

**Example**

```typescript
const prop: ColorPropertyDefinition = {
  key: 'backgroundColor',
  label: 'Background Color',
  editor: 'color',
  defaultValue: '#FFFFFF'
};
```

### `ComplexPropertyCondition`

Complex condition combining multiple simple conditions

```ts
interface ComplexPropertyCondition
```

**Properties**

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `and?` | `PropertyCondition[]` |  | All conditions must be true (AND logic) |
| `or?` | `PropertyCondition[]` |  | At least one condition must be true (OR logic) |

**Example**

 AND condition
```typescript
const condition: ComplexPropertyCondition = {
  and: [
    { property: 'enabled', operator: '==', value: true },
    { property: 'nodeCount', operator: '>', value: 10 }
  ]
};
```

**Example**

 OR condition
```typescript
const condition: ComplexPropertyCondition = {
  or: [
    { property: 'type', operator: '==', value: 'table' },
    { property: 'type', operator: '==', value: 'view' }
  ]
};
```

### `DatePropertyDefinition`

Also has every member of `PropertyDefinition`, listed on its own entry.

Date picker property definition

```ts
interface DatePropertyDefinition extends PropertyDefinition
```

**Properties**

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `editor` | `'date'` |  | Editor type to use for this property |
| `defaultValue?` | `string \| Date` |  | Default value if property is not set |
| `validation?` | `{ required?: boolean; }` |  | Validation rules for this property |

**Example**

```typescript
const prop: DatePropertyDefinition = {
  key: 'birthDate',
  label: 'Birth Date',
  editor: 'date',
  validation: { required: true }
};
```

### `DateTimePropertyDefinition`

Also has every member of `PropertyDefinition`, listed on its own entry.

DateTime picker property definition

```ts
interface DateTimePropertyDefinition extends PropertyDefinition
```

**Properties**

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `editor` | `'datetime'` |  | Editor type to use for this property |
| `defaultValue?` | `string \| Date` |  | Default value if property is not set |
| `validation?` | `{ required?: boolean; }` |  | Validation rules for this property |

**Example**

```typescript
const prop: DateTimePropertyDefinition = {
  key: 'createdAt',
  label: 'Created At',
  editor: 'datetime',
  defaultValue: new Date().toISOString()
};
```

### `Effects`

Effects theme (shadows, border radius, opacity)

```ts
interface Effects
```

**Properties**

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `shadow` | `{ none: string; sm: string; md: string; lg: string; }` |  | Shadow definitions (CSS box-shadow values) |
| `borderRadius` | `{ none: number; sm: number; md: number; lg: number; full: number; }` |  | Border radius values (in pixels) |
| `opacity` | `{ disabled: number; ghost: number; translucent: number; }` |  | Opacity values (0-1) |

### `FilePropertyDefinition`

Also has every member of `PropertyDefinition`, listed on its own entry.

File upload property definition

```ts
interface FilePropertyDefinition extends PropertyDefinition
```

**Properties**

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `editor` | `'file'` |  | Editor type to use for this property |
| `accept?` | `string` |  |  |
| `multiple?` | `boolean` |  |  |

**Example**

```typescript
const prop: FilePropertyDefinition = {
  key: 'avatar',
  label: 'Avatar Image',
  editor: 'file',
  accept: 'image/*',
  multiple: false
};
```

### `HighlightConnectedOptions`

How `highlightConnected` draws the selected nodes' lines. Every field is optional.

```ts
interface HighlightConnectedOptions
```

**Properties**

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `depth?` | `number` |  | How far the highlight follows the graph from the selected nodes. `1` (the default) marks only the lines that touch them; `2` also the lines one node further upstream and downstream; `Infinity` traces every path in and out. |
| `stroke?` | `string` |  | The colour of a highlighted line. Default: the theme's primary text colour. |
| `strokeWidth?` | `number` |  | The width of a highlighted line. Default 2.5 (a line is 2). |
| `outgoing?` | `'dashed' \| 'solid'` |  | How a line going OUT of the selection is drawn. Default `'solid'`, like the lines coming in; `'dashed'` adds a direction cue. (A line crossing a card is dashed either way.) |
| `dimOpacity?` | `number` |  | Opacity of every other line while a node is selected. Default 0.4 — faded, still legible; `1` leaves them alone. |

### `IRenderer`

Renderer interface — the contract for a DIAGRAM renderer: it turns the model
plus a viewport into a visual representation (a VNode tree in SVG mode).

This is the only renderer interface. Nothing in production implemented
it: the real VNode → DOM layer is the patcher in `vnode/patch.ts`. The stack
is deleted; the useful vocabulary it defined is kept below, as OPTIONAL
members here, so capability detection / export / hit-testing / text
measurement have a home when a renderer actually implements them.

```ts
interface IRenderer
```

**Properties**

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `mode` | `'svg' \| 'canvas'` |  | Renderer mode |
| `capabilities?` | `RendererCapabilities` |  | Optional: capability flags for runtime feature detection, so callers can ask instead of assuming (e.g. "can this renderer do foreignObject?"). |

**Members**

- `render(viewport: Rectangle, zoom: number): VNode | void` — Render diagram to visual representation
- `getPerformanceMetrics(): PerformanceMetrics` — Get performance metrics
- `dispose(): void` — Dispose renderer and clean up resources
- `hitTest?(x: number, y: number): VNode | null` — Optional: element at a coordinate (selection, hover, click routing).
- `measureText?(text: string, style: TextStyle): TextMetrics` — Optional: measure text for layout (wrapping, ellipsis, shape-fit). Implementations are expected to cache.
- `export?(format: ExportFormat, options?: ExportOptions): Promise<string>` — Optional: export the rendered diagram as an image or SVG string.

### `JsonPropertyDefinition`

Also has every member of `PropertyDefinition`, listed on its own entry.

JSON editor property definition

```ts
interface JsonPropertyDefinition extends PropertyDefinition
```

**Properties**

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `editor` | `'json'` |  | Editor type to use for this property |
| `defaultValue?` | `any` |  | Default value if property is not set |

**Example**

```typescript
const prop: JsonPropertyDefinition = {
  key: 'metadata',
  label: 'Metadata',
  editor: 'json',
  defaultValue: { version: '1.0' }
};
```

### `LinkStyleTheme`

Link style from theme

```ts
interface LinkStyleTheme
```

**Properties**

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `stroke` | `string` |  |  |
| `strokeWidth` | `number` |  |  |
| `strokeDasharray?` | `string` |  |  |
| `opacity` | `number` |  |  |

### `MultiSelectPropertyDefinition`

Also has every member of `PropertyDefinition`, listed on its own entry.

Multi-select property definition with options

```ts
interface MultiSelectPropertyDefinition extends PropertyDefinition
```

**Properties**

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `editor` | `'multiselect'` |  | Editor type to use for this property |
| `options` | `SelectOption[]` |  |  |
| `validation?` | `{ required?: boolean; }` |  | Validation rules for this property |

**Example**

```typescript
const prop: MultiSelectPropertyDefinition = {
  key: 'tags',
  label: 'Tags',
  editor: 'multiselect',
  options: [
    { value: 'important', label: 'Important' },
    { value: 'urgent', label: 'Urgent' },
    { value: 'review', label: 'Needs Review' }
  ]
};
```

### `NodeStyleTheme`

Node style from theme

```ts
interface NodeStyleTheme
```

**Properties**

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `fill` | `string` |  |  |
| `stroke` | `string` |  |  |
| `strokeWidth` | `number` |  |  |
| `borderRadius` | `number` |  |  |
| `shadow` | `boolean` |  |  |
| `opacity` | `number` |  |  |
| `selection?` | `'both' \| 'border' \| 'ring'` |  | How a selected node shows it — 'both' (default), 'border' or 'ring'. |

### `NumberPropertyDefinition`

Also has every member of `PropertyDefinition`, listed on its own entry.

Number property definition with number-specific validation

```ts
interface NumberPropertyDefinition extends PropertyDefinition
```

**Properties**

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `editor` | `'number'` |  | Editor type to use for this property |
| `validation?` | `{ required?: boolean; min?: number; max?: number; step?: number; }` |  | Validation rules for this property |

**Example**

```typescript
const prop: NumberPropertyDefinition = {
  key: 'port',
  label: 'Port Number',
  editor: 'number',
  validation: {
    required: true,
    min: 1,
    max: 65535,
    step: 1
  }
};
```

### `NumberScale`

A named numeric scale (see {@link Theme.numbers}). Values are unitless — they
are consumed as SVG lengths (`stroke-width`), which accept plain numbers.

```ts
interface NumberScale
```

**Properties**

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `hairline?` | `number` |  |  |
| `regular?` | `number` |  |  |
| `emphasis?` | `number` |  |  |
| `heavy?` | `number` |  |  |

### `PerformanceMetrics`

Performance metrics returned by renderer

```ts
interface PerformanceMetrics
```

**Properties**

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `mode` | `'svg' \| 'canvas'` |  | Renderer mode |
| `nodeCount` | `number` |  | Number of nodes rendered |
| `linkCount` | `number` |  | Number of links rendered |
| `renderTime` | `number` |  | Last render time in milliseconds |
| `fps` | `number` |  | Current frames per second |
| `memoryUsage` | `number` |  | Estimated memory usage in bytes |

### `PortThemeConfig`

Port theme configuration

```ts
interface PortThemeConfig
```

**Properties**

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `size` | `number` |  |  |
| `strokeWidth` | `number` |  |  |
| `colors` | `{ input: string; output: string; bi: string; }` |  |  |

### `PropertyCondition`

Simple condition for property visibility

```ts
interface PropertyCondition
```

**Properties**

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `property` | `string` |  | Key of the property to check |
| `operator` | `ConditionOperator` |  | Comparison operator |
| `value` | `any` |  | Value to compare against |

**Example**

 Equality condition
```typescript
const condition: PropertyCondition = {
  property: 'useCustomColor',
  operator: '==',
  value: true
};
```

**Example**

 Comparison condition
```typescript
const condition: PropertyCondition = {
  property: 'nodeCount',
  operator: '>',
  value: 100
};
```

**Example**

 Contains condition
```typescript
const condition: PropertyCondition = {
  property: 'tags',
  operator: 'contains',
  value: 'important'
};
```

### `PropertyDisplayOptions`

Display options for property editors

```ts
interface PropertyDisplayOptions
```

**Properties**

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `variant?` | `string` |  | Variant of the editor (e.g., 'toggle' for boolean) |
| `rows?` | `number` |  | Number of rows for textarea/json editors |
| `autoResize?` | `boolean` |  | Auto-resize for textarea |
| `showLabels?` | `boolean` |  | Show labels on slider (min/max) |

### `PropertyGroup`

Property group for organizing related properties

Groups allow properties to be organized into collapsible sections
in the UI. Each group has a name (used for referencing in property
definitions) and a label (displayed to the user).

```ts
interface PropertyGroup
```

**Properties**

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `name` | `string` |  | Unique group identifier (used in PropertyDefinition.group) |
| `label` | `string` |  | Display label shown in UI |
| `description?` | `string` |  | Optional description or help text |
| `collapsed?` | `boolean` |  | Initial collapse state (default: false/expanded) |
| `order?` | `number` |  | Display order (groups with lower order appear first) |
| `icon?` | `string` |  | Optional icon identifier |

**Example**

 Basic group
```typescript
const group: PropertyGroup = {
  name: 'appearance',
  label: 'Appearance'
};
```

**Example**

 Group with all options
```typescript
const group: PropertyGroup = {
  name: 'advanced',
  label: 'Advanced Settings',
  description: 'Advanced configuration options',
  collapsed: true,
  order: 10,
  icon: 'settings'
};
```

### `PropertySchema`

Complete property schema for a node type

A property schema defines how all properties of a node type should
be edited in the UI. It includes:
- Property definitions (what to edit and how)
- Optional groups (for organization)
- Optional metadata (versioning, documentation)

```ts
interface PropertySchema
```

**Properties**

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `properties` | `PropertyDefinition[]` |  | List of property definitions |
| `groups?` | `PropertyGroup[]` |  | Optional property groups for organization |
| `metadata?` | `{ version?: string; author?: string; description?: string; }` |  | Schema metadata |

**Example**

 Simple schema
```typescript
const schema: PropertySchema = {
  properties: [
    {
      key: 'name',
      label: 'Name',
      editor: 'string',
      validation: { required: true }
    },
    {
      key: 'enabled',
      label: 'Enabled',
      editor: 'boolean'
    }
  ]
};
```

**Example**

 Complete schema with groups
```typescript
const schema: PropertySchema = {
  properties: [
    {
      key: 'tableName',
      label: 'Table Name',
      editor: 'string',
      validation: { required: true },
      group: 'basic'
    },
    {
      key: 'columns',
      label: 'Columns',
      editor: 'json',
      group: 'schema'
    },
    {
      key: 'primaryKey',
      label: 'Primary Key',
      editor: 'select',
      options: [],
      group: 'schema'
    }
  ],
  groups: [
    { name: 'basic', label: 'Basic Information', order: 1 },
    { name: 'schema', label: 'Schema Definition', order: 2 }
  ],
  metadata: {
    version: '1.0.0',
    author: 'System',
    description: 'Property schema for database tables'
  }
};
```

### `Rectangle`

Rectangle defined by position and size
Used for viewport queries and rendering bounds

```ts
interface Rectangle
```

**Properties**

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `x` | `number` |  |  |
| `y` | `number` |  |  |
| `width` | `number` |  |  |
| `height` | `number` |  |  |

### `RendererCapabilities`

Renderer capability flags for runtime feature detection.

```ts
interface RendererCapabilities
```

**Properties**

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `supportsHitTest` | `boolean` |  | Can perform hit testing (element at coordinate) |
| `supportsBatching` | `boolean` |  | Can batch multiple render operations |
| `supportsExport` | `boolean` |  | Can export as image/SVG |
| `supportsMeasurement` | `boolean` |  | Can measure text/elements accurately |
| `supportsForeignObject` | `boolean` |  | Can render foreignObject (HTML inside SVG) |
| `supportsFilters` | `boolean` |  | Can apply filters/effects |
| `supportsOffscreen` | `boolean` |  | Can render to an offscreen buffer |

### `SelectOption`

Select option for dropdown editors

```ts
interface SelectOption
```

**Properties**

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `value` | `any` |  | The value of the option |
| `label` | `string` |  | Display label for the option |
| `disabled?` | `boolean` |  | Whether this option is disabled |