feat: release design system engine, studio and component contracts

packages/ui/test/flow-canvas.test.ts

@@ -0,0 +1,42 @@
+import { test, expect } from "bun:test";
+import { readFileSync } from "node:fs";
+import { renderComponent, mountHtml } from "../../test/src/index.ts";
+const source = readFileSync(new URL("../components/FlowCanvas.wrn", import.meta.url), "utf8");
+test("canvas renders branch edges, saved positions and escaped node labels", async () => {
+  const nodes = [
+    {
+      id: "branch",
+      label: "<script>Condition</script>",
+      x: 40,
+      y: 60,
+      ports: [{ key: "yes", label: "Match", target: "end" }],
+    },
+    { id: "end", label: "Finish", x: 340, y: 100, ports: [] },
+  ];
+  const html = await renderComponent(source, { nodes });
+  const dom = mountHtml(html);
+  const root = dom.querySelector('[data-ui-component="FlowCanvas"]') as HTMLElement;
+  expect(root.querySelectorAll("path")).toHaveLength(1);
+  expect(root.querySelector("path")?.getAttribute("d")).toBe("M 270 122 C 340 122 270 125 340 125");
+  expect(root.querySelector(".wrn-flow-node")?.getAttribute("style")).toContain("left: 40px");
+  expect(root.querySelector(".wrn-flow-node-title")?.textContent).toContain(
+    "<script>Condition</script>",
+  );
+  expect(root.querySelector("script")).toBeNull();
+  expect(nodes[0].x).toBe(40);
+  const seen: any[] = [];
+  for (const name of ["connect", "select", "move"])
+    root.addEventListener(name, (e: any) => seen.push({ name, detail: e.detail }));
+  (root.querySelector(".wrn-flow-port") as HTMLButtonElement).click();
+  (root.querySelectorAll(".wrn-flow-node-title")[1] as HTMLButtonElement).click();
+  expect(seen.map((e) => e.name)).toEqual(["connect", "select"]);
+  const title = root.querySelectorAll(".wrn-flow-node-title")[1] as HTMLButtonElement;
+  title.dispatchEvent(
+    new (dom.window as { KeyboardEvent: typeof KeyboardEvent }).KeyboardEvent("keydown", {
+      key: "ArrowRight",
+      bubbles: true,
+    }),
+  );
+  expect(seen.at(-1).name).toBe("move");
+  expect(seen.at(-1).detail.nodes).toHaveLength(2);
+});