@pixel-point/toolcraft 0.0.6 → 0.0.8

package/templates/runtime/react/controls-panel.test.tsx

@@ -248,6 +248,9 @@ function StateProbe() {
         {state.canvas.size.width},{state.canvas.size.height}
       </span>
       <span data-testid="media-count">{state.mediaAssets.length}</span>
+      <span data-testid="media-ids">
+        {state.mediaAssets.map((asset) => asset.id).join(",")}
+      </span>
       <span data-testid="timeline-expanded">{String(state.timeline.expanded)}</span>
       <span data-testid="timeline-keyframes">
         {JSON.stringify(state.timeline.keyframeGroups)}
@@ -384,6 +387,46 @@ describe("ControlsPanel", () => {
     expect(inlineGroup?.textContent).toContain("Snap Y");
   });
 
+  it("keeps wrapped local action buttons left aligned below their label", () => {
+    const schema = defineToolcraft({
+      canvas: { enabled: false },
+      panels: {
+        controls: {
+          sections: [
+            {
+              controls: {
+                masks: {
+                  actions: [
+                    { label: "Rect", value: "mask.add.rectangle" },
+                    { label: "Circle", value: "mask.add.circle" },
+                    { label: "Tri", value: "mask.add.triangle" },
+                    { label: "Delete", value: "mask.delete" },
+                  ],
+                  defaultValue: [],
+                  label: "Masks",
+                  target: "composition.masks",
+                  type: "actions",
+                },
+              },
+              title: "Composition",
+            },
+          ],
+          title: "Controls",
+        },
+      },
+    });
+    const { container } = renderControlsPanelWithSchema(schema);
+    const actionField = container.querySelector('[data-slot="actions-control"]');
+    const actionButtons = container.querySelector(
+      '[data-slot="actions-control-buttons"]',
+    );
+
+    expect(actionField?.className).toContain("justify-between");
+    expect(actionField?.className).toContain("flex-wrap");
+    expect(actionButtons?.className).toContain("justify-start");
+    expect(actionButtons?.className).not.toContain("ml-auto");
+  });
+
   it("renders the managed background toggle plus unlabeled color row as equal-width inline columns", () => {
     const schema = defineToolcraft({
       canvas: { enabled: false },
@@ -448,35 +491,35 @@ describe("ControlsPanel", () => {
                   defaultValue: { hex: "#DFFF1A" },
                   description: "Sets the first bead color.",
                   label: "Color 1",
-                  target: "beads.color1",
+                  target: "palette.accent1",
                   type: "color",
                 },
                 color2: {
                   defaultValue: { hex: "#8CFF3A" },
                   description: "Sets the second bead color.",
                   label: "Color 2",
-                  target: "beads.color2",
+                  target: "palette.accent2",
                   type: "color",
                 },
                 color3: {
                   defaultValue: { hex: "#F4FF5A" },
                   description: "Sets the third bead color.",
                   label: "Color 3",
-                  target: "beads.color3",
+                  target: "palette.accent3",
                   type: "color",
                 },
                 color4: {
                   defaultValue: { hex: "#B8FF2E" },
                   description: "Sets the fourth bead color.",
                   label: "Color 4",
-                  target: "beads.color4",
+                  target: "palette.accent4",
                   type: "color",
                 },
                 color5: {
                   defaultValue: { hex: "#ECFF68" },
                   description: "Sets the fifth bead color.",
                   label: "Color 5",
-                  target: "beads.color5",
+                  target: "palette.accent5",
                   type: "color",
                 },
                 colorSpread: {
@@ -486,7 +529,7 @@ describe("ControlsPanel", () => {
                   label: "Spread",
                   max: 100,
                   min: 0,
-                  target: "beads.colorSpread",
+                  target: "palette.spread",
                   type: "slider",
                   unit: "%",
                 },
@@ -503,7 +546,7 @@ describe("ControlsPanel", () => {
                   layout: "inline",
                 },
               ],
-              title: "Bead Colors",
+              title: "Accent Shades",
             },
             {
               controls: {
@@ -1102,7 +1145,6 @@ describe("ControlsPanel", () => {
               controls: {
                 font: {
                   defaultValue: {
-                    color: "#FFFFFF",
                     fontId: "inter",
                     fontSize: 16,
                     fontWeight: "400",
@@ -1271,6 +1313,24 @@ describe("ControlsPanel", () => {
       });
     });
 
+    fireEvent.change(fontSizeInput, {
+      target: { value: "768" },
+    });
+    fireEvent.blur(fontSizeInput);
+
+    await waitFor(() => {
+      expect(JSON.parse(screen.getByTestId("font-value").textContent ?? "{}")).toEqual({
+        color: "#FFFFFF",
+        fontId: "roboto",
+        fontSize: 768,
+        fontWeight: "400",
+        letterSpacing: "wider",
+        lineHeight: "relaxed",
+        opacity: 100,
+        textCase: "uppercase",
+      });
+    });
+
     const colorHexInput = screen.getByLabelText("Color hex") as HTMLInputElement;
     fireEvent.change(colorHexInput, {
       target: { value: "#C1FF00" },
@@ -1286,7 +1346,7 @@ describe("ControlsPanel", () => {
       expect(JSON.parse(screen.getByTestId("font-value").textContent ?? "{}")).toEqual({
         color: "#C1FF00",
         fontId: "roboto",
-        fontSize: 24,
+        fontSize: 768,
         fontWeight: "400",
         letterSpacing: "wider",
         lineHeight: "relaxed",
@@ -2483,6 +2543,22 @@ describe("ControlsPanel", () => {
     );
     expect(screen.getByRole("img", { name: "one.svg" })).toBeTruthy();
     expect(screen.getByRole("img", { name: "two.svg" })).toBeTruthy();
+    expect(screen.getByTestId("media-ids").textContent).toBe("media-1,media-2");
+
+    const firstPreview = screen
+      .getByRole("img", { name: "one.svg" })
+      .closest<HTMLElement>('[data-slot="file-upload-preview-item"]');
+    const secondPreview = screen
+      .getByRole("img", { name: "two.svg" })
+      .closest<HTMLElement>('[data-slot="file-upload-preview-item"]');
+
+    if (!firstPreview || !secondPreview) {
+      throw new Error("Expected multi-image previews to render");
+    }
+
+    expect(firstPreview.getAttribute("role")).toBe("button");
+    expect(firstPreview.getAttribute("tabindex")).toBe("0");
+    expect(firstPreview.className).toContain("cursor-grab");
 
     fireEvent.click(screen.getByRole("button", { name: "Remove two.svg" }));
 
@@ -2490,6 +2566,118 @@ describe("ControlsPanel", () => {
     expect(screen.queryByRole("img", { name: "two.svg" })).toBeNull();
   });
 
+  it("renders arbitrary file uploads as a sortable file list", () => {
+    const schema = defineToolcraft({
+      canvas: { enabled: true, upload: true },
+      panels: {
+        controls: {
+          sections: [
+            {
+              controls: {
+                source: {
+                  assetKind: "file",
+                  label: "Files",
+                  multiple: true,
+                  target: "input.files",
+                  type: "fileDrop",
+                },
+              },
+              layout: "standalone",
+              title: "Input",
+            },
+          ],
+          title: "Generation Controls",
+        },
+      },
+    });
+
+    const { container } = renderControlsPanelWithSchema(schema, undefined, {
+      layers: [
+        { id: "layer-1", kind: "layer", name: "one", visible: true },
+        { id: "layer-2", kind: "layer", name: "two", visible: true },
+      ],
+      mediaAssets: [
+        {
+          assetKind: "file",
+          dataUrl: "data:text/plain;base64,b25l",
+          fileName: "one.txt",
+          id: "media-1",
+          layerId: "layer-1",
+          mimeType: "text/plain",
+          position: { x: 0, y: 0 },
+          sourceTarget: "input.files",
+        },
+        {
+          assetKind: "file",
+          dataUrl: "data:application/json;base64,e30=",
+          fileName: "two.json",
+          id: "media-2",
+          layerId: "layer-2",
+          mimeType: "application/json",
+          position: { x: 0, y: 0 },
+          sourceTarget: "input.files",
+        },
+      ],
+      selectedLayerId: "layer-2",
+    });
+
+    const fileList = container.querySelector('[data-slot="file-upload-file-list"]');
+    const fileRows = container.querySelectorAll('[data-slot="file-upload-file-item"]');
+    const fileDividers = container.querySelectorAll('[data-slot="file-upload-file-divider"]');
+
+    expect(fileList).toBeTruthy();
+    expect(fileRows).toHaveLength(2);
+    expect(fileDividers).toHaveLength(2);
+    expect(screen.getByText("one.txt")).toBeTruthy();
+    expect(screen.getByText("two.json")).toBeTruthy();
+    expect(screen.getByText("one.txt").className).toContain("text-xs");
+    expect(screen.getByText("one.txt").className).not.toContain("truncate");
+    expect(screen.getByText("one.txt").className).toContain("mask-image");
+    expect(screen.getByRole("button", { name: "Remove one.txt" })).toBeTruthy();
+    expect(screen.getByRole("button", { name: "Add a new file" })).toBeTruthy();
+    expect(fileRows[0]?.className).not.toContain("border-b");
+    expect(fileRows[0]?.className).toContain("hover:bg");
+    expect(fileDividers[0]?.className).toContain("var(--border)_5%");
+    expect(fileRows[0]?.getAttribute("role")).toBe("button");
+    expect(fileRows[0]?.getAttribute("tabindex")).toBe("0");
+
+    fireEvent.click(screen.getByRole("button", { name: "Remove two.json" }));
+
+    expect(screen.getByTestId("media-count").textContent).toBe("1");
+    expect(screen.queryByText("two.json")).toBeNull();
+  });
+
+  it("renders the arbitrary file uploader empty state", () => {
+    const schema = defineToolcraft({
+      canvas: { enabled: true, upload: true },
+      panels: {
+        controls: {
+          sections: [
+            {
+              controls: {
+                source: {
+                  assetKind: "file",
+                  label: "Files",
+                  target: "input.files",
+                  type: "fileDrop",
+                },
+              },
+              layout: "standalone",
+              title: "Input",
+            },
+          ],
+          title: "Generation Controls",
+        },
+      },
+    });
+
+    renderControlsPanelWithSchema(schema);
+
+    expect(screen.getByText("Click to upload a file")).toBeTruthy();
+    expect(screen.getByText("or drag it onto the canvas")).toBeTruthy();
+    expect(screen.queryByText("Click to upload an image")).toBeNull();
+  });
+
   it("keeps file upload deletion in the layers panel for multi-layer apps", () => {
     const schema = defineToolcraft({
       canvas: { enabled: true, upload: true },
@@ -2556,6 +2744,65 @@ describe("ControlsPanel", () => {
     expect(colorControlList?.children).toHaveLength(1);
   });
 
+  it("keeps an odd trailing plain color half-width in a color bank", () => {
+    const schema = defineToolcraft({
+      canvas: { enabled: true },
+      panels: {
+        controls: {
+          sections: [
+            {
+              controls: {
+                accent1: {
+                  defaultValue: { hex: "#9CE6FF" },
+                  label: "Accent 1",
+                  target: "accent.shade1",
+                  type: "color",
+                },
+                accent2: {
+                  defaultValue: { hex: "#FF7A90" },
+                  label: "Accent 2",
+                  target: "accent.shade2",
+                  type: "color",
+                },
+                accent3: {
+                  defaultValue: { hex: "#FFD166" },
+                  label: "Accent 3",
+                  target: "accent.shade3",
+                  type: "color",
+                },
+                accent4: {
+                  defaultValue: { hex: "#8BF38B" },
+                  label: "Accent 4",
+                  target: "accent.shade4",
+                  type: "color",
+                },
+                accent5: {
+                  defaultValue: { hex: "#BDA8FF" },
+                  label: "Accent 5",
+                  target: "accent.shade5",
+                  type: "color",
+                },
+              },
+              title: "Accent Shades",
+            },
+          ],
+          title: "Generation Controls",
+        },
+      },
+    });
+
+    const { container } = renderControlsPanelWithSchema(schema);
+    const pairedColorRows = container.querySelectorAll('[data-slot="color-control-grid"]');
+    const trailingColorButtonGroup = screen
+      .getByLabelText("Accent 5 hex")
+      .closest('[data-slot="button-group"]');
+    const trailingColorWidthContainer = trailingColorButtonGroup?.parentElement;
+
+    expect(pairedColorRows).toHaveLength(2);
+    expect(trailingColorWidthContainer?.className).toContain("w-1/2");
+    expect(trailingColorWidthContainer?.className).not.toContain("w-full");
+  });
+
   it("omits visible color field labels only inside color-only sections", () => {
     const schema = defineToolcraft({
       canvas: { enabled: true },
@@ -3264,6 +3511,316 @@ describe("ControlsPanel", () => {
     expect(screen.getByTestId("enabled-value").textContent).toBe("true");
   });
 
+  it("resets only controls from the selected section header action", () => {
+    const schema = defineToolcraft({
+      canvas: { enabled: false },
+      panels: {
+        controls: {
+          sections: [
+            {
+              controls: {
+                toneName: {
+                  defaultValue: "Soft",
+                  label: "Tone name",
+                  target: "tone.name",
+                  type: "text",
+                },
+              },
+              title: "Tone",
+            },
+            {
+              controls: {
+                prompt: {
+                  defaultValue: "Poster",
+                  label: "Prompt",
+                  target: "generation.prompt",
+                  type: "text",
+                },
+              },
+              title: "Output",
+            },
+          ],
+          title: "Controls",
+        },
+      },
+    });
+    const { container } = renderControlsPanelWithSchema(schema);
+
+    fireEvent.change(screen.getByDisplayValue("Soft"), {
+      target: { value: "Sharp" },
+    });
+    fireEvent.change(screen.getByDisplayValue("Poster"), {
+      target: { value: "Banner" },
+    });
+
+    const toneHeader = screen
+      .getByText("Tone")
+      .closest<HTMLElement>('[data-slot="control-section-header"]');
+    const headerButtons = toneHeader?.querySelectorAll("button");
+
+    expect(headerButtons?.[0]?.getAttribute("data-control-section-reset-button")).toBe("");
+    expect(headerButtons?.[1]?.getAttribute("data-control-section-collapse-button")).toBe("");
+
+    fireEvent.click(screen.getByRole("button", { name: "Reset Tone section" }));
+
+    const values = JSON.parse(screen.getByTestId("values-json").textContent ?? "{}");
+
+    expect(values["tone.name"]).toBe("Soft");
+    expect(values["generation.prompt"]).toBe("Banner");
+    expect(container.querySelector('[data-control-section-reset-button]')).toBeTruthy();
+  });
+
+  it("clears file upload previews from the selected section reset action", () => {
+    const schema = defineToolcraft({
+      canvas: { enabled: true, upload: true },
+      panels: {
+        controls: {
+          sections: [
+            {
+              controls: {
+                source: {
+                  defaultValue: null,
+                  label: "Image",
+                  target: "media.source",
+                  type: "fileDrop",
+                },
+              },
+              title: "Source Image",
+            },
+          ],
+          title: "Controls",
+        },
+      },
+    });
+
+    renderControlsPanelWithSchema(schema, {}, {
+      mediaAssets: [
+        {
+          dataUrl:
+            "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 3'/%3E",
+          fileName: "source.svg",
+          id: "media-1",
+          layerId: "layer-1",
+          mimeType: "image/svg+xml",
+          position: { x: 0, y: 0 },
+          size: { height: 300, unit: "px", width: 400 },
+          sourceTarget: "media.source",
+        },
+      ],
+    });
+
+    expect(screen.getByRole("img", { name: "source.svg" })).toBeTruthy();
+    expect(screen.getByTestId("media-count").textContent).toBe("1");
+
+    fireEvent.click(screen.getByRole("button", { name: "Reset Source Image section" }));
+
+    expect(screen.queryByRole("img", { name: "source.svg" })).toBeNull();
+    expect(screen.getByTestId("media-count").textContent).toBe("0");
+  });
+
+  it("renders collection actions as add/remove controls for runtime item arrays", () => {
+    const schema = defineToolcraft({
+      canvas: { enabled: false },
+      panels: {
+        controls: {
+          sections: [
+            {
+              controls: {
+                colors: {
+                  defaultValue: [{ hex: "#DFFF1A" }, { hex: "#8CFF3A" }],
+                  itemControl: {
+                    defaultValue: { hex: "#C1FF00" },
+                    label: "Color",
+                    type: "color",
+                  },
+                  label: "Colors",
+                  minItems: 1,
+                  recommendedMaxItems: 2,
+                  target: "bead.colors",
+                  type: "collectionActions",
+                },
+              },
+              title: "Bead Colors",
+            },
+          ],
+          title: "Controls",
+        },
+      },
+    });
+
+    const { container } = renderControlsPanelWithSchema(schema);
+
+    const addButton = screen.getByRole("button", { name: "Add Color" });
+    const removeButton = screen.getByRole("button", { name: "Remove Color" });
+    const collectionHeader = container.querySelector(
+      '[data-slot="collection-actions-control-header"]',
+    );
+    const colorGrid = container.querySelector(
+      '[data-slot="collection-actions-items-grid"]',
+    );
+
+    expect(collectionHeader?.textContent).toContain("Colors");
+    expect(collectionHeader?.lastElementChild?.contains(removeButton)).toBe(true);
+    expect(collectionHeader?.lastElementChild?.contains(addButton)).toBe(true);
+    expect(colorGrid).toBeTruthy();
+    expect(colorGrid?.children).toHaveLength(2);
+    expect(screen.queryByText("Color 1")).toBeNull();
+    expect(screen.queryByText("Color 2")).toBeNull();
+
+    fireEvent.click(addButton);
+    fireEvent.click(addButton);
+
+    let values = JSON.parse(screen.getByTestId("values-json").textContent ?? "{}");
+
+    expect(values["bead.colors"]).toHaveLength(4);
+    expect(screen.queryByText("Color 4")).toBeNull();
+    expect(colorGrid?.children).toHaveLength(4);
+    expect((addButton as HTMLButtonElement).disabled).toBe(false);
+
+    fireEvent.click(removeButton);
+    fireEvent.click(removeButton);
+    fireEvent.click(removeButton);
+
+    values = JSON.parse(screen.getByTestId("values-json").textContent ?? "{}");
+
+    expect(values["bead.colors"]).toHaveLength(1);
+    expect((removeButton as HTMLButtonElement).disabled).toBe(true);
+  });
+
+  it("renders collection item controls beyond color lists", () => {
+    const schema = defineToolcraft({
+      canvas: { enabled: false },
+      panels: {
+        controls: {
+          sections: [
+            {
+              controls: {
+                labels: {
+                  defaultValue: ["Alpha"],
+                  itemControl: {
+                    defaultValue: "New label",
+                    label: "Label",
+                    type: "text",
+                  },
+                  minItems: 1,
+                  target: "glyph.labels",
+                  type: "collectionActions",
+                },
+              },
+              title: "Glyph Labels",
+            },
+          ],
+          title: "Controls",
+        },
+      },
+    });
+
+    renderControlsPanelWithSchema(schema);
+
+    fireEvent.click(screen.getByRole("button", { name: "Add Label" }));
+
+    const values = JSON.parse(screen.getByTestId("values-json").textContent ?? "{}");
+
+    expect(values["glyph.labels"]).toEqual(["Alpha", "New label"]);
+    expect(screen.getByDisplayValue("Alpha")).toBeTruthy();
+    expect(screen.getByDisplayValue("New label")).toBeTruthy();
+  });
+
+  it("keeps a collection font picker color popover open while editing its color surface", async () => {
+    const schema = defineToolcraft({
+      canvas: { enabled: false },
+      panels: {
+        controls: {
+          sections: [
+            {
+              controls: {
+                textStyles: {
+                  defaultValue: [
+                    {
+                      color: "#FFFFFF",
+                      fontId: "inter",
+                      fontSize: 16,
+                      fontWeight: "400",
+                      letterSpacing: "normal",
+                      lineHeight: "normal",
+                      opacity: 100,
+                      textCase: "original",
+                    },
+                  ],
+                  itemControl: {
+                    defaultValue: {
+                      color: "#FFFFFF",
+                      fontId: "inter",
+                      fontSize: 16,
+                      fontWeight: "400",
+                      letterSpacing: "normal",
+                      lineHeight: "normal",
+                      opacity: 100,
+                      textCase: "original",
+                    },
+                    label: "Font",
+                    type: "fontPicker",
+                  },
+                  label: "Text styles",
+                  minItems: 1,
+                  target: "text.styles",
+                  type: "collectionActions",
+                },
+              },
+              title: "Typography",
+            },
+          ],
+          title: "Controls",
+        },
+      },
+    });
+
+    const { container } = renderControlsPanelWithSchema(schema);
+
+    fireEvent.click(screen.getByRole("button", { name: "Pick Color" }));
+
+    const surface = await waitFor(() => {
+      const nextSurface = container.ownerDocument.body.querySelector<HTMLElement>(
+        '[data-slot="style-guide-color-surface"]',
+      );
+      if (!nextSurface) {
+        throw new Error("Expected color surface to be open.");
+      }
+      return nextSurface;
+    });
+
+    const surfaceRect = {
+      bottom: 100,
+      height: 100,
+      left: 0,
+      right: 100,
+      toJSON: () => ({}),
+      top: 0,
+      width: 100,
+      x: 0,
+      y: 0,
+    } as DOMRect;
+    Object.defineProperty(surface, "getBoundingClientRect", {
+      configurable: true,
+      value: () => surfaceRect,
+    });
+
+    fireEvent.pointerDown(surface, {
+      buttons: 1,
+      clientX: 72,
+      clientY: 28,
+      pointerId: 1,
+    });
+
+    expect(
+      container.ownerDocument.body.querySelector('[data-slot="style-guide-color-surface"]'),
+    ).toBeTruthy();
+
+    const values = JSON.parse(screen.getByTestId("values-json").textContent ?? "{}");
+
+    expect(values["text.styles"][0].color).not.toBe("#FFFFFF");
+  });
+
   it("commits canvas size controls to runtime state on blur or Enter", () => {
     const { container } = renderControlsPanel();
 
@@ -3832,6 +4389,30 @@ describe("ControlsPanel", () => {
     expect(container.querySelector('[data-slot="control-section-header"]')).toBeTruthy();
   });
 
+  it("suppresses child control transitions when a section re-expands", () => {
+    const schema = createSchema();
+    renderControlsPanelWithSchema(schema);
+    const basicTitle = screen.getByText("Basic");
+    const header = basicTitle.closest<HTMLElement>('[data-slot="control-section-header"]');
+    const section = basicTitle.closest("section");
+    const initialBody = section?.querySelector<HTMLElement>(
+      '[data-slot="panel-section-collapsible-body"]',
+    );
+
+    fireEvent.click(header!);
+    fireEvent.transitionEnd(initialBody!);
+    fireEvent.click(header!);
+
+    const expandedBody = section?.querySelector<HTMLElement>(
+      '[data-slot="panel-section-collapsible-body"]',
+    );
+    const innerControls = expandedBody?.firstElementChild as HTMLElement | null;
+
+    expect(expandedBody?.className).toContain("transition-[grid-template-rows,opacity]");
+    expect(expandedBody?.className).toContain("grid-rows-[1fr]");
+    expect(innerControls?.getAttribute("data-toolcraft-controls-mounting")).toBe("true");
+  });
+
   it("persists ordinary section collapse state as a UI preference across remounts", () => {
     const schema = createSchema();
     const { unmount } = renderControlsPanelWithSchema(schema);