# Interfaces T–V

Import these from `@grafloria/renderer`.

## Interfaces

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