feat: release design system engine, studio and component contracts

packages/ui/drawflow.css

@@ -0,0 +1,76 @@
+.wrn-drawflow {
+  border: 1px solid var(--wrn-color-border);
+  border-radius: 12px;
+  overflow: hidden;
+  background: var(--wrn-color-surface);
+}
+.wrn-drawflow .drawflow {
+  transform-origin: 0 0;
+}
+.wrn-drawflow-toolbar {
+  display: flex;
+  gap: 8px;
+  padding: 12px;
+  flex-wrap: wrap;
+  border-bottom: 1px solid var(--wrn-color-border);
+}
+.wrn-drawflow-toolbar button {
+  padding: 8px 12px;
+  border: 1px solid var(--wrn-color-border);
+  border-radius: 8px;
+  background: var(--wrn-color-surface-muted);
+  color: var(--wrn-color-text);
+  cursor: pointer;
+}
+[data-drawflow-host] {
+  height: 460px;
+  max-height: 65vh;
+  background-image: radial-gradient(var(--wrn-color-border) 1px, transparent 1px);
+  background-size: 20px 20px;
+  position: relative;
+  overflow: hidden;
+}
+.wrn-drawflow .drawflow-node {
+  width: 230px;
+  padding: 0;
+  border: 1px solid var(--wrn-color-border);
+  border-radius: 12px;
+  background: var(--wrn-color-surface);
+  color: var(--wrn-color-text);
+}
+.wrn-drawflow .drawflow-node.selected {
+  border-color: var(--wrn-color-primary);
+  background: var(--wrn-color-surface);
+}
+.wrn-drawflow-title {
+  padding: 14px;
+  display: flex;
+  justify-content: space-between;
+  gap: 12px;
+}
+.wrn-drawflow-title small {
+  font-size: 11px;
+  color: var(--wrn-color-text-muted);
+}
+.wrn-drawflow-port-label {
+  padding: 7px 14px;
+  border-top: 1px solid var(--wrn-color-border);
+  color: var(--wrn-color-text-muted);
+}
+.wrn-drawflow .drawflow-node .input,
+.wrn-drawflow .drawflow-node .output {
+  background: var(--wrn-color-primary);
+  border: 0;
+  width: 10px;
+  height: 10px;
+}
+.wrn-drawflow .drawflow-node .output {
+  right: -5px;
+}
+.wrn-drawflow .drawflow-node .input {
+  left: -5px;
+}
+.wrn-drawflow .connection .main-path {
+  stroke: var(--wrn-color-primary);
+  stroke-width: 2px;
+}