Widget properties

Loading interactive example…Open in new tab ↗

Opening the live canvas…

The selected controls card advertises progress, mode, and count through its shape definition. DrawingInspector creates the corresponding property controls; the live widget reads the same values. There is no separate form model to synchronize.

Definition / API	Contract
NumberValueField	Numeric bounds and integer constraints are validated at canonical publication.
TextValueField.allowedValues	Declares the mode choices.
ShapeDefinition.valueFields	Supplies defaults and field grammar for both commands and inspector.
session.updateValues(id, values)	Changes registered values in one admitted edit.
DrawingInspector(session: session)	Edits selected elements through their declared capabilities and fields.

Change progress or mode in the inspector, then use the widget. Set ready updates both fields together; Undo restores both. Locking the card prevents edits through either surface. Text properties are absent because this node has no text capability. The inspector moves below the canvas on narrow example embeds.

Source

actions: {
  'Select card': (s) => s.selectElements(['controls']),
  'Set ready': (s) => s.updateValues('controls', {
    'mode': 'Ready',
    'progress': 100,
  }).requireAllowed(),
},

The fixture, registry and controls are shared with Widgets inside shapes.