UI Composition

SketchpadAppDefinition.ui describes product chrome with JSON-safe region and contribution records. Definitions select registered UI; they do not import Svelte, React, or other framework components.

Table of Contents

• Regions
• Hosted Product Regions
• Runtime Values

Regions

type SketchpadUiComposition = {
	regions?: Record<string, SketchpadUiContribution[]>
}

type SketchpadUiContribution = {
	type: string
	options?: Record<string, SketchpadJsonValue>
}

Array order is portable display-order metadata for adapters that support multiple contributions. A product catalog may validate both region ids and contribution types before mounting.

Hosted Product Regions

The maintained hosted product owns three executable regions:

• primary-toolbar renders the ordered tool groups and accepts position (top, right, bottom, or left) plus mirrorInRTL.
• floating-toolbar renders the active document’s contextual toolbar.
• tool-action-strip renders active-tool actions.

Omitting ui mounts all three with maintained defaults. Supplying regions turns the object into an explicit surface, so omitted regions are not mounted:

ui: {
	regions: {
		'primary-toolbar': [ {
			type: 'standard',
			options: { mirrorInRTL: true, position: 'bottom' }
		} ],
		'floating-toolbar': [ { type: 'standard' } ],
		'tool-action-strip': [ { type: 'standard' } ]
	}
}

Each maintained region requires exactly one standard contribution. The floating toolbar and action strip reject options. Other region and contribution ids require a hosted product that registers and owns their behavior; the maintained product fails unsupported values instead of silently dropping them.

Runtime Values

Portable UI configuration must not contain component references, constructors, module paths, DOM nodes, callbacks, credentials, or private service URLs. Put runtime behavior on the application side of the hosted API and keep the definition serializable.

See App Configuration for the complete definition boundary and API Reference for exact types.