# Interfaces S–V

Import these from `@grafloria/renderer`.

## Interfaces

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

### `TextStyle`

Text styling for measurement.

```ts
interface TextStyle
```

**Properties**

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `fontFamily?` | `string` |  |  |
| `fontSize?` | `number` |  |  |
| `fontWeight?` | `string \| number` |  |  |
| `fontStyle?` | `string` |  |  |
| `letterSpacing?` | `number` |  |  |
| `lineHeight?` | `number` |  |  |

### `Theme`

Complete theme definition
Supports both CSS Variables (SVG+HTML) and Programmatic (Canvas)

```ts
interface Theme
```

**Properties**

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `name` | `string` |  | Theme name (e.g., "Light", "Dark", "High Contrast") |
| `version` | `string` |  | Theme version |
| `colors` | `ColorPalette` |  | Color palette |
| `typography` | `Typography` |  | Typography settings |
| `spacing` | `Spacing` |  | Spacing scale |
| `effects` | `Effects` |  | Visual effects (shadows, border radius, opacity) |
| `nodes` | `{ default: NodeStyleTheme; [nodeType: string]: Partial<NodeStyleTheme>; }` |  | Node type defaults - default: Base styles for all nodes - [nodeType]: Type-specific overrides |
| `links` | `{ default: LinkStyleTheme; [linkType: string]: Partial<LinkStyleTheme>; }` |  | Link type defaults - default: Base styles for all links - [linkType]: Type-specific overrides |
| `ports` | `PortThemeConfig` |  | Port configuration |
| `categories?` | `SemanticPalette` |  | SEMANTIC / CATEGORY PALETTE — the caller's OWN vocabulary of colours. |
| `numbers?` | `NumberScale` |  | NAMED NUMERIC SCALE — the numeric analogue of {@link categories}. |

### `Typography`

Typography theme

```ts
interface Typography
```

**Properties**

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `fontFamily` | `{ default: string; mono: string; }` |  | Font families |
| `fontSize` | `{ xs: number; sm: number; md: number; lg: number; xl: number; }` |  | Font sizes (in pixels) |
| `fontWeight` | `{ normal: number; medium: number; bold: number; }` |  | Font weights |
| `lineHeight` | `{ tight: number; normal: number; relaxed: number; }` |  | Line heights |

### `ValidationError`

Validation error returned from validation functions

```ts
interface ValidationError
```

**Properties**

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `message` | `string` |  | Human-readable error message |
| `code?` | `string` |  | Optional error code for programmatic handling |

**Example**

```typescript
const error: ValidationError = {
  message: 'Value must be positive',
  code: 'POSITIVE_VALUE_REQUIRED'
};
```

### `ValidationResult`

Result of running validation on a property value

```ts
interface ValidationResult
```

**Properties**

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `valid` | `boolean` |  | Whether the value is valid |
| `errors` | `ValidationError[]` |  | Array of validation errors (empty if valid) |

**Example**

```typescript
const result: ValidationResult = {
  valid: false,
  errors: [{ message: 'Required field is missing' }]
};
```

### `VNode`

Virtual Node - Abstract representation of visual element
Framework-agnostic, serializable, diffable

Supports both SVG and Canvas rendering modes, as well as HTML content
via foreignObject for embedding rich components.

```ts
interface VNode
```

**Properties**

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `type` | `VNodeType` |  | Element type: 'svg', 'g', 'rect', 'circle', 'path', 'text', 'foreignObject', etc. |
| `props` | `VNodeProps` |  | Element properties (attributes, styles, event handlers) |
| `children?` | `VNode[]` |  | Optional children VNodes (for hierarchical structures) |
| `key?` | `string` |  | Optional unique key for diffing optimization Used by renderers to efficiently update only changed nodes |