{/* Left: Palette + Node Tree + Node Props */}
-
+
{
+ test.beforeEach(async ({ page }) => {
+ await page.goto("/sandbox");
+ await page.getByTitle("Create custom component").click();
+ await expect(page.getByRole("dialog", { name: "Component builder" })).toBeVisible();
+ });
+
+ test("adds primitives into the selected container instead of the top level", async ({ page }) => {
+ const builder = page.getByRole("dialog", { name: "Component builder" });
+
+ await builder.getByRole("button", { name: "Container" }).click();
+ // Selecting the container retargets the palette.
+ await expect(builder.getByText("into selected container")).toBeVisible();
+
+ await builder.getByRole("button", { name: "Heading" }).click();
+ await builder.getByRole("button", { name: "Badge" }).click();
+
+ // Adding a node selects it, and a non-container selection retargets the palette
+ // back to the top level, so the destination is always stated rather than guessed.
+ await expect(builder.getByText("at top level")).toBeVisible();
+
+ // Re-selecting the container targets it again.
+ await builder.getByText("Container", { exact: true }).last().click();
+ await expect(builder.getByText("into selected container")).toBeVisible();
+ });
+
+ test("nested nodes can be reordered and deleted", async ({ page }) => {
+ const builder = page.getByRole("dialog", { name: "Component builder" });
+
+ await builder.getByRole("button", { name: "Container" }).click();
+ await builder.getByRole("button", { name: "Heading" }).click();
+ await builder.getByRole("button", { name: "Badge" }).click();
+
+ // Before this change the action buttons were hidden on nested rows entirely.
+ await expect(builder.getByTitle("Delete")).not.toHaveCount(0);
+ const deleteButtons = builder.getByTitle("Delete");
+ const countBefore = await deleteButtons.count();
+
+ await deleteButtons.last().click();
+
+ await expect(builder.getByTitle("Delete")).toHaveCount(countBefore - 1);
+ });
+
+ test("a nested node's own properties are editable", async ({ page }) => {
+ const builder = page.getByRole("dialog", { name: "Component builder" });
+
+ await builder.getByRole("button", { name: "Container" }).click();
+ await builder.getByRole("button", { name: "Heading" }).click();
+
+ // Selecting the nested heading must surface its props - previously selection only
+ // ever matched top-level nodes, so a nested node showed no editor at all.
+ await expect(builder.getByText("Node Properties", { exact: true })).toBeVisible();
+ // The heading's own fields, proving the selection resolved to the nested node.
+ await expect(builder.getByText("Level", { exact: true })).toBeVisible();
+ await expect(builder.getByText("Align", { exact: true })).toBeVisible();
+ });
+
+ test("saves a nested component and renders it on the page", async ({ page }) => {
+ const builder = page.getByRole("dialog", { name: "Component builder" });
+
+ await builder.getByRole("button", { name: "Container" }).click();
+ await builder.getByRole("button", { name: "Badge" }).click();
+ await builder.getByRole("textbox").first().fill("Nested Card");
+ await builder.getByRole("button", { name: "Save", exact: true }).click();
+
+ await expect(builder).toBeHidden();
+
+ // It is a real saved component: it appears in the library with a preview.
+ await page.getByTitle("Open component library").click();
+ const library = page.getByRole("dialog", { name: "Component library" });
+ await expect(library.getByRole("heading", { level: 3, name: "Nested Card" })).toBeVisible();
+
+ // And the saved definition actually has a nested child, not a flattened stack.
+ const stored = await page.evaluate(() => {
+ const raw = window.localStorage.getItem("sandy-composites");
+ return JSON.parse(raw || "[]");
+ });
+ const saved = stored.find((d: { name: string }) => d.name === "Nested Card");
+ expect(saved).toBeTruthy();
+ expect(saved.nodes).toHaveLength(1);
+ expect(saved.nodes[0].type).toBe("container");
+ expect(saved.nodes[0].children).toHaveLength(1);
+ expect(saved.nodes[0].children[0].type).toBe("badge");
+ });
+});
diff --git a/lib/composite/tree.ts b/lib/composite/tree.ts
new file mode 100644
index 0000000..a55f740
--- /dev/null
+++ b/lib/composite/tree.ts
@@ -0,0 +1,95 @@
+import type { PrimitiveNode } from "./types";
+
+/**
+ * Deepest nesting level the builder will create. The renderer refuses to draw anything
+ * deeper (MAX_DEPTH in components/composite/primitive-renderers.tsx), and a node the user
+ * can build but never see is worse than one they cannot build.
+ */
+export const MAX_NEST_DEPTH = 2;
+
+export function findNode(nodes: PrimitiveNode[], id: string): PrimitiveNode | null {
+ for (const node of nodes) {
+ if (node.id === id) return node;
+ if (node.children) {
+ const hit = findNode(node.children, id);
+ if (hit) return hit;
+ }
+ }
+ return null;
+}
+
+/** Nesting level of a node, 0 for top level, -1 when it isn't in the tree. */
+export function depthOf(nodes: PrimitiveNode[], id: string, depth = 0): number {
+ for (const node of nodes) {
+ if (node.id === id) return depth;
+ if (node.children) {
+ const hit = depthOf(node.children, id, depth + 1);
+ if (hit >= 0) return hit;
+ }
+ }
+ return -1;
+}
+
+/**
+ * Append `node` to the children of `parentId`, or to the top level when it is null.
+ * Only containers can take children; anything else is left untouched.
+ */
+export function insertNode(
+ nodes: PrimitiveNode[],
+ parentId: string | null,
+ node: PrimitiveNode,
+): PrimitiveNode[] {
+ if (parentId === null) return [...nodes, node];
+
+ return nodes.map((current) => {
+ if (current.id === parentId) {
+ if (current.type !== "container") return current;
+ return { ...current, children: [...(current.children ?? []), node] };
+ }
+ if (current.children) {
+ return { ...current, children: insertNode(current.children, parentId, node) };
+ }
+ return current;
+ });
+}
+
+export function removeNode(nodes: PrimitiveNode[], id: string): PrimitiveNode[] {
+ return nodes
+ .filter((node) => node.id !== id)
+ .map((node) => (node.children ? { ...node, children: removeNode(node.children, id) } : node));
+}
+
+/** Reorder a node among its own siblings. Moving across parents is not supported. */
+export function moveNode(
+ nodes: PrimitiveNode[],
+ id: string,
+ direction: "up" | "down",
+): PrimitiveNode[] {
+ const idx = nodes.findIndex((node) => node.id === id);
+
+ if (idx >= 0) {
+ const swapIdx = direction === "up" ? idx - 1 : idx + 1;
+ if (swapIdx < 0 || swapIdx >= nodes.length) return nodes;
+ const next = [...nodes];
+ [next[idx], next[swapIdx]] = [next[swapIdx], next[idx]];
+ return next;
+ }
+
+ return nodes.map((node) =>
+ node.children ? { ...node, children: moveNode(node.children, id, direction) } : node,
+ );
+}
+
+export function updateNodeProps(
+ nodes: PrimitiveNode[],
+ id: string,
+ props: Record,
+): PrimitiveNode[] {
+ return nodes.map((node) => {
+ if (node.id === id) return { ...node, props };
+ if (node.children) {
+ return { ...node, children: updateNodeProps(node.children, id, props) };
+ }
+ return node;
+ });
+}