component DrawflowCanvas {
 outputs { select(payload: object) connect(payload: object) move(payload: object) add(payload: object) }
 props { nodes=[] palette=[] activeNode="" label="Workflow" arrangeLabel="Arrange nodes" connectLabel="Connect" color="primary" size="default"
  toolbar=true
  class=""
 }
 view {
  <section {...attrs} class="wrn-drawflow {class}" data-wrnexus-runtime="drawflow" data-drawflow-editor data-flow-nodes="{JSON.stringify(nodes)}" data-active-node="{activeNode}" aria-label="{label}" @flowselect="output.select(event.detail)" @flowconnect="output.connect(event.detail)" @flowmove="output.move(event.detail)" @flowadd="output.add(event.detail)" data-wrn-owner="DrawflowCanvas" data-wrn-part="root" data-wrn-component="DrawflowCanvas" data-wrn-axis-color="{color}" data-wrn-axis-size="{size}">
   {#if toolbar}<div class="wrn-drawflow-toolbar" data-wrn-owner="DrawflowCanvas" data-wrn-part="toolbar" data-wrn-axis-color="{color}" data-wrn-axis-size="{size}">{#each palette as item}<button type="button" draggable="true" data-flow-kind="{item.kind}" @click="output.add({kind:item.kind,sourceEvent:event})" data-wrn-owner="DrawflowCanvas" data-wrn-part="button" data-wrn-axis-color="{color}" data-wrn-axis-size="{size}">{item.label}</button>{/each}<button type="button" data-flow-arrange data-wrn-owner="DrawflowCanvas" data-wrn-part="button" data-wrn-axis-color="{color}" data-wrn-axis-size="{size}">{arrangeLabel}</button><button type="button" data-flow-zoom="in" aria-label="Zoom in" data-wrn-owner="DrawflowCanvas" data-wrn-part="button" data-wrn-axis-color="{color}" data-wrn-axis-size="{size}">+</button><button type="button" data-flow-zoom="out" aria-label="Zoom out" data-wrn-owner="DrawflowCanvas" data-wrn-part="button" data-wrn-axis-color="{color}" data-wrn-axis-size="{size}">−</button><button type="button" data-flow-zoom="reset" aria-label="Reset zoom" data-wrn-owner="DrawflowCanvas" data-wrn-part="button" data-wrn-axis-color="{color}" data-wrn-axis-size="{size}">100%</button></div>{/if}
   <div data-drawflow-host role="group" aria-label="{label}" data-wrn-owner="DrawflowCanvas" data-wrn-part="viewport" data-wrn-axis-color="{color}" data-wrn-axis-size="{size}"></div>
  </section>
 }
  style {
    .wrn-drawflow { margin:0; border-radius:12px; }
  }
}