feat: release design system engine, studio and component contracts

packages/ui/components/DrawflowCanvas.wrn

@@ -0,0 +1,16 @@
+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; }
+  }
+}