@pixel-point/toolcraft 0.0.4 → 0.0.7

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

@@ -436,6 +436,101 @@ describe("ControlsPanel", () => {
     );
   });
 
+  it("suppresses obvious help icons in sequential color sections", () => {
+    const schema = defineToolcraft({
+      canvas: { enabled: false },
+      panels: {
+        controls: {
+          sections: [
+            {
+              controls: {
+                color1: {
+                  defaultValue: { hex: "#DFFF1A" },
+                  description: "Sets the first bead color.",
+                  label: "Color 1",
+                  target: "beads.color1",
+                  type: "color",
+                },
+                color2: {
+                  defaultValue: { hex: "#8CFF3A" },
+                  description: "Sets the second bead color.",
+                  label: "Color 2",
+                  target: "beads.color2",
+                  type: "color",
+                },
+                color3: {
+                  defaultValue: { hex: "#F4FF5A" },
+                  description: "Sets the third bead color.",
+                  label: "Color 3",
+                  target: "beads.color3",
+                  type: "color",
+                },
+                color4: {
+                  defaultValue: { hex: "#B8FF2E" },
+                  description: "Sets the fourth bead color.",
+                  label: "Color 4",
+                  target: "beads.color4",
+                  type: "color",
+                },
+                color5: {
+                  defaultValue: { hex: "#ECFF68" },
+                  description: "Sets the fifth bead color.",
+                  label: "Color 5",
+                  target: "beads.color5",
+                  type: "color",
+                },
+                colorSpread: {
+                  defaultValue: 34,
+                  description:
+                    "Controls how often beads use colors 2-5 instead of Color 1.",
+                  label: "Spread",
+                  max: 100,
+                  min: 0,
+                  target: "beads.colorSpread",
+                  type: "slider",
+                  unit: "%",
+                },
+              },
+              layoutGroups: [
+                {
+                  columns: 2,
+                  controls: ["color1", "color2"],
+                  layout: "inline",
+                },
+                {
+                  columns: 2,
+                  controls: ["color3", "color4"],
+                  layout: "inline",
+                },
+              ],
+              title: "Bead Colors",
+            },
+            {
+              controls: {
+                includeBackground: {
+                  defaultValue: true,
+                  description:
+                    "Controls PNG background transparency while preview and video keep the background.",
+                  label: "Include",
+                  target: "export.includeBackground",
+                  type: "switch",
+                },
+              },
+              title: "Background",
+            },
+          ],
+          title: "Controls",
+        },
+      },
+    });
+
+    renderControlsPanelWithSchema(schema);
+
+    expect(screen.queryByRole("button", { name: "Color 5 help" })).toBeNull();
+    expect(screen.queryByRole("button", { name: "Spread help" })).toBeNull();
+    expect(screen.getByRole("button", { name: "Include help" })).toBeTruthy();
+  });
+
   it("renders short visible toggle plus parameter rows as equal-width toggle-parameter rows", () => {
     const schema = defineToolcraft({
       canvas: { enabled: false },
@@ -1176,6 +1271,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" },
@@ -1191,7 +1304,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",
@@ -1534,6 +1647,46 @@ describe("ControlsPanel", () => {
       container.querySelector('[data-slot="slider"][data-variant="discrete"]'),
     ).toBeNull();
     expect(container.querySelectorAll('[data-slot="slider-marker"]')).toHaveLength(0);
+    expect(container.textContent).toContain("118 cols/s");
+  });
+
+  it("keeps textual slider value labels non-editable", () => {
+    const schema = defineToolcraft({
+      canvas: { enabled: true },
+      panels: {
+        controls: {
+          sections: [
+            {
+              controls: {
+                letterSpacing: {
+                  defaultValue: 2,
+                  label: "Letter spacing",
+                  max: 4,
+                  min: 0,
+                  step: 1,
+                  target: "text.letterSpacing",
+                  type: "slider",
+                  valueLabel: "Normal",
+                },
+              },
+              title: "Text",
+            },
+          ],
+          title: "Generation Controls",
+        },
+      },
+    });
+
+    renderControlsPanelWithSchema(schema);
+
+    const valueLabel = screen
+      .getAllByText("Normal")
+      .find((node) => node.getAttribute("aria-hidden") !== "true");
+
+    expect(screen.queryByRole("button", { name: "Edit Letter spacing value" })).toBeNull();
+    expect(valueLabel).toBeTruthy();
+    expect(valueLabel?.className).toContain("cursor-default");
+    expect(valueLabel?.className).not.toContain("cursor-text");
   });
 
   it("keeps schema sliders stacked even when a layout group asks for an inline row", () => {
@@ -1589,6 +1742,8 @@ describe("ControlsPanel", () => {
     expect(container.querySelector('[data-control-layout="inline"]')).toBeNull();
     expect(fpsSlider).toBeTruthy();
     expect(container.querySelectorAll('[data-slot="slider-marker"]').length).toBeGreaterThan(0);
+    expect(container.textContent).toContain("17 fps");
+    expect(container.textContent).toContain("3.7x");
   });
 
   it("passes schema disabled state into slider controls", () => {
@@ -2283,6 +2438,76 @@ describe("ControlsPanel", () => {
     expect(screen.getByTestId("media-count").textContent).toBe("0");
   });
 
+  it("renders multi-image file uploads as an add-last thumbnail grid", () => {
+    const schema = defineToolcraft({
+      canvas: { enabled: true, upload: true },
+      panels: {
+        controls: {
+          sections: [
+            {
+              controls: {
+                source: {
+                  accept: "PNG, SVG",
+                  label: "Images",
+                  multiple: true,
+                  target: "input.sources",
+                  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: [
+        {
+          dataUrl:
+            "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96' viewBox='0 0 96 96'%3E%3Crect width='96' height='96' fill='%23777'/%3E%3C/svg%3E",
+          fileName: "one.svg",
+          id: "media-1",
+          layerId: "layer-1",
+          mimeType: "image/svg+xml",
+          position: { x: 0, y: 0 },
+          size: { height: 96, unit: "px", width: 96 },
+        },
+        {
+          dataUrl:
+            "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96' viewBox='0 0 96 96'%3E%3Crect width='96' height='96' fill='%23999'/%3E%3C/svg%3E",
+          fileName: "two.svg",
+          id: "media-2",
+          layerId: "layer-2",
+          mimeType: "image/svg+xml",
+          position: { x: 0, y: 0 },
+          size: { height: 96, unit: "px", width: 96 },
+        },
+      ],
+      selectedLayerId: "layer-2",
+    });
+
+    expect(screen.getByRole("button", { name: "Add image files" })).toBeTruthy();
+    const previewGrid = container.querySelector('[data-slot="file-upload-preview-grid"]');
+    expect(previewGrid?.className).toContain("grid-cols-4");
+    expect(previewGrid?.lastElementChild?.getAttribute("data-slot")).toBe(
+      "file-upload-add-preview",
+    );
+    expect(screen.getByRole("img", { name: "one.svg" })).toBeTruthy();
+    expect(screen.getByRole("img", { name: "two.svg" })).toBeTruthy();
+
+    fireEvent.click(screen.getByRole("button", { name: "Remove two.svg" }));
+
+    expect(screen.getByTestId("media-count").textContent).toBe("1");
+    expect(screen.queryByRole("img", { name: "two.svg" })).toBeNull();
+  });
+
   it("keeps file upload deletion in the layers panel for multi-layer apps", () => {
     const schema = defineToolcraft({
       canvas: { enabled: true, upload: true },
@@ -3057,6 +3282,173 @@ 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("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("commits canvas size controls to runtime state on blur or Enter", () => {
     const { container } = renderControlsPanel();
 
@@ -3126,6 +3518,68 @@ describe("ControlsPanel", () => {
     expect(values["canvas.size.height"]).toBe(1080);
   });
 
+  it("switches editable-output aspect ratio to custom after manual size edits", () => {
+    const schema = defineToolcraft({
+      canvas: {
+        enabled: true,
+        size: { height: 1080, unit: "px", width: 1920 },
+        sizing: { mode: "editable-output" },
+      },
+      panels: {
+        controls: {
+          sections: [],
+          title: "Controls",
+        },
+      },
+    });
+
+    renderControlsPanelWithSchema(schema);
+
+    const widthInput = screen.getByDisplayValue("1920") as HTMLInputElement;
+
+    fireEvent.change(widthInput, { target: { value: "1600" } });
+    fireEvent.blur(widthInput);
+
+    expect(screen.getByTestId("canvas-size").textContent).toBe("1600,1080");
+    expect(screen.getAllByText("Custom...").length).toBeGreaterThan(0);
+    expect(screen.getByDisplayValue("40")).toBeTruthy();
+    expect(screen.getByDisplayValue("27")).toBeTruthy();
+    expect(JSON.parse(screen.getByTestId("values-json").textContent ?? "{}")).toMatchObject({
+      "canvas.aspectRatio": {
+        height: 27,
+        mode: "custom",
+        value: "40:27",
+        width: 40,
+      },
+      "canvas.size.height": 1080,
+      "canvas.size.width": 1600,
+    });
+  });
+
+  it("renders raster render scale as the last technical setup control", () => {
+    const schema = defineToolcraft({
+      canvas: {
+        enabled: true,
+        renderScale: true,
+        size: { height: 1080, unit: "px", width: 1920 },
+        sizing: { mode: "editable-output" },
+      },
+      panels: {
+        controls: {
+          sections: [],
+          title: "Controls",
+        },
+      },
+    });
+    renderControlsPanelWithSchema(schema);
+
+    const values = JSON.parse(screen.getByTestId("values-json").textContent ?? "{}");
+
+    expect(screen.getByText("Resolution scale")).toBeTruthy();
+    expect(screen.getByText("2x")).toBeTruthy();
+    expect(values["canvas.renderScale"]).toBe(2);
+  });
+
   it("applies empty text input values while typing and reset restores defaults", () => {
     renderControlsPanel();