Interfaces T–V

Import these from @grafloria/renderer.

Interfaces

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`

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

ts
interface Theme

Properties

Name	Type	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 theme

ts
interface Typography

Properties

Name	Type	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

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

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' }]
};

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