# Interfaces B–T

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 |

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

### `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'
};
```

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

### `SelectPropertyDefinition`

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

Select (dropdown) property definition with options

```ts
interface SelectPropertyDefinition extends PropertyDefinition
```

**Properties**

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

**Example**

```typescript
const prop: SelectPropertyDefinition = {
  key: 'nodeType',
  label: 'Node Type',
  editor: 'select',
  options: [
    { value: 'table', label: 'Table' },
    { value: 'view', label: 'View' },
    { value: 'procedure', label: 'Stored Procedure', disabled: true }
  ],
  validation: { required: true }
};
```

### `SemanticPalette`

The host's semantic colour vocabulary (see {@link Theme.categories}). Open-ended: the built-in themes ship the names below, and callers add theirs.

```ts
interface SemanticPalette
```

**Properties**

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `critical?` | `string` |  | Blocking / fatal — the strongest attention colour. |
| `warning?` | `string` |  | Non-blocking problem. |
| `success?` | `string` |  | Healthy / passing. |
| `info?` | `string` |  | Neutral information. |
| `neutral?` | `string` |  | De-emphasised / inactive. |
| `accent?` | `string` |  | The host's brand accent. |

### `SliderPropertyDefinition`

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

Slider (range) property definition

```ts
interface SliderPropertyDefinition extends PropertyDefinition
```

**Properties**

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `editor` | `'slider'` |  | Editor type to use for this property |
| `min` | `number` |  |  |
| `max` | `number` |  |  |
| `step?` | `number` |  |  |
| `defaultValue?` | `number` |  | Default value if property is not set |

**Example**

```typescript
const prop: SliderPropertyDefinition = {
  key: 'opacity',
  label: 'Opacity',
  editor: 'slider',
  min: 0,
  max: 100,
  step: 1,
  defaultValue: 100
};
```

### `Spacing`

Spacing theme (in pixels)

```ts
interface Spacing
```

**Properties**

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `xs` | `number` |  |  |
| `sm` | `number` |  |  |
| `md` | `number` |  |  |
| `lg` | `number` |  |  |
| `xl` | `number` |  |  |

### `StringPropertyDefinition`

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

String property definition with string-specific validation

```ts
interface StringPropertyDefinition extends PropertyDefinition
```

**Properties**

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `editor` | `'string'` |  | Editor type to use for this property |
| `validation?` | `{ required?: boolean; minLength?: number; maxLength?: number; pattern?: string; // Regex pattern }` |  | Validation rules for this property |

**Example**

```typescript
const prop: StringPropertyDefinition = {
  key: 'tableName',
  label: 'Table Name',
  editor: 'string',
  validation: {
    required: true,
    minLength: 3,
    maxLength: 50,
    pattern: '^[a-zA-Z][a-zA-Z0-9_]*$'
  }
};
```

### `TextAreaPropertyDefinition`

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

Textarea (multi-line text) property definition

```ts
interface TextAreaPropertyDefinition extends PropertyDefinition
```

**Properties**

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

**Example**

```typescript
const prop: TextAreaPropertyDefinition = {
  key: 'description',
  label: 'Description',
  editor: 'textarea',
  validation: {
    maxLength: 500
  }
};
```

### `TextMetrics`

Text measurement result.

```ts
interface TextMetrics
```

**Properties**

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `width` | `number` |  |  |
| `height` | `number` |  |  |
| `baseline` | `number` |  |  |