feat: release design system engine, studio and component contracts

packages/ui/COMPONENTS.md

@@ -1,6 +1,6 @@
 # WRNexus UI component reference
 
-This reference is generated from the 102 packaged `.wrn` component sources. Props marked required have no default; all others show their runtime default.
+This reference is generated from the 104 packaged `.wrn` component sources. Props marked required have no default; all others show their runtime default.
 
 ## Advanced-forms
 
@@ -323,6 +323,24 @@ Reusable auth split layout component.
 - Slots: `aside-extra`, `form`
 - Outputs: None
 
+### DrawflowCanvas
+
+Reusable drawflow canvas component.
+
+- Mount: `data-component="DrawflowCanvas"`
+- Props: `nodes: string = [] palette=[] activeNode="" label="Workflow" arrangeLabel="Arrange nodes" connectLabel="Connect" color="primary" size="default"`, `toolbar: boolean = true`, `class: string = ""`
+- Slots: None
+- Outputs: `select(object)`, `connect(object)`, `move(object)`, `add(object)`
+
+### FlowCanvas
+
+Reusable flow canvas component.
+
+- Mount: `data-component="FlowCanvas"`
+- Props: `nodes: string = []`, `palette: string = []`, `activeNode: string = ""`, `label: string = "Workflow"`, `arrangeLabel: string = "Arrange nodes"`, `connectLabel: string = "Connect"`, `color: string = "primary"`, `size: string = "default"`, `class: string = ""`
+- Slots: None
+- Outputs: `select(object)`, `connect(object)`, `move(object)`, `add(object)`
+
 ### PortalDashboard
 
 Reusable portal dashboard component.
@@ -467,7 +485,7 @@ Theme-aware, responsive select component.
 Theme-aware, responsive switch component.
 
 - Mount: `data-component="Switch"`
-- Props: `size: string = "default"`, `color: string = "primary"`, `id: string = ""`, `name: string = ""`, `label: string = "Switch"`, `hiddenLabel: boolean = false`, `placeholder: string = ""`, `variant: string = "normal"`, `icon: string = ""`, `iconPosition: string = "start"`, `value: string = "on"`, `checked: boolean = false`, `helperText: string = ""`, `cornerHint: string = ""`, `error: string = ""`, `inline: boolean = false`, `readonly: boolean = false`, `disabled: boolean = false`, `required: boolean = false`, `class: string = ""`
+- Props: `size: string = "default"`, `color: string = "primary"`, `id: string = ""`, `name: string = ""`, `label: string = "Switch"`, `hiddenLabel: boolean = false`, `placeholder: string = ""`, `variant: string = "normal"`, `icon: string = ""`, `iconPosition: string = "start"`, `value: string = "on"`, `checked: boolean | null = null`, `helperText: string = ""`, `cornerHint: string = ""`, `error: string = ""`, `inline: boolean = false`, `readonly: boolean = false`, `disabled: boolean = false`, `required: boolean = false`, `class: string = ""`
 - Slots: None
 - Outputs: `input({ value?: string | number | boolean | null; values?: Array<string | number | boolean | null | object>; sourceEvent?: Event; [key: string]: string | number | boolean | null | object } | string | number | boolean | null)`, `change({ value?: string | number | boolean | null; values?: Array<string | number | boolean | null | object>; sourceEvent?: Event; [key: string]: string | number | boolean | null | object } | string | number | boolean | null)`, `focus({ sourceEvent?: Event; [key: string]: string | number | boolean | null | object })`, `blur({ sourceEvent?: Event; [key: string]: string | number | boolean | null | object })`
 
@@ -496,9 +514,9 @@ Theme-aware, responsive time picker component.
 Theme-aware, responsive chart component.
 
 - Mount: `data-component="Chart"`
-- Props: `title: string = "Chart"`, `description: string = ""`, `items: unknown[] = []`, `data: unknown[] = []`, `type: string = ""`, `valueKey: string = "value"`, `labelKey: string = "label"`, `height: number = 240`, `showLegend: boolean = true`, `showValues: boolean = true`, `size: string = "default"`, `color: string = "primary"`, `variant: string = "bar"`, `class: string = ""`
+- Props: `title: string = "Chart"`, `description: string = ""`, `items: unknown[] = []`, `data: unknown = undefined`, `labels: unknown[] = []`, `datasets: unknown[] = []`, `options: object = {}`, `type: string = ""`, `valueKey: string = "value"`, `labelKey: string = "label"`, `height: number = 240`, `showLegend: boolean = true`, `showValues: boolean = true`, `size: string = "default"`, `color: string = "primary"`, `variant: string = "bar"`, `class: string = ""`
 - Slots: `default`
-- Outputs: `select({ item: object; index: number; sourceEvent?: Event })`, `dataPointClick({ item: object; index: number; sourceEvent?: Event })`, `legendToggle({ item: object; index: number; hidden: boolean; sourceEvent?: Event })`
+- Outputs: `select({ item: string | number | boolean | null | object; index: number; datasetIndex: number; sourceEvent?: Event })`, `dataPointClick({ item: string | number | boolean | null | object; index: number; datasetIndex: number; sourceEvent?: Event })`, `legendToggle({ item: string | number | boolean | null | object; index: number; datasetIndex?: number; hidden: boolean; sourceEvent?: Event })`
 
 ### Clipboard