@pixel-point/toolcraft 0.0.14 → 0.0.15

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

@@ -0,0 +1,189 @@
+import { describe, expect, it } from "vitest";
+import {
+  defineToolcraft,
+  fireEvent,
+  renderControlsPanel,
+  renderControlsPanelWithSchema,
+  screen
+} from "../testing/controls-panel-test-utils";
+
+describe("ControlsPanel runtime setup controls", () => {
+  it("commits canvas size controls to runtime state on blur or Enter", () => {
+    const { container } = renderControlsPanel();
+
+    const canvasSizeGroup = container.querySelector(
+      '[data-control-layout="inline"][data-control-layout-columns="2"]',
+    );
+
+    expect(canvasSizeGroup).toBeTruthy();
+    expect(canvasSizeGroup?.textContent).toContain("Canvas width");
+    expect(canvasSizeGroup?.textContent).toContain("Canvas height");
+
+    const widthInput = screen.getByDisplayValue("320") as HTMLInputElement;
+
+    fireEvent.change(widthInput, { target: { value: "640" } });
+    expect(screen.getByTestId("canvas-size").textContent).toBe("320,180");
+    expect(widthInput.value).toBe("640");
+
+    fireEvent.blur(widthInput);
+    expect(screen.getByTestId("canvas-size").textContent).toBe("640,180");
+
+    const heightInput = screen.getByDisplayValue("180") as HTMLInputElement;
+
+    fireEvent.change(heightInput, { target: { value: "360" } });
+    expect(screen.getByTestId("canvas-size").textContent).toBe("640,180");
+
+    fireEvent.keyDown(heightInput, { code: "Enter", key: "Enter" });
+    expect(screen.getByTestId("canvas-size").textContent).toBe("640,360");
+
+    fireEvent.click(screen.getByRole("button", { name: "Reset controls" }));
+
+    expect(screen.getByTestId("canvas-size").textContent).toBe("320,180");
+  });
+
+  it("renders editable-output aspect ratio controls with the current canvas preset", () => {
+    const schema = defineToolcraft({
+      canvas: {
+        enabled: true,
+        size: { height: 1080, unit: "px", width: 1440 },
+        sizing: { mode: "editable-output" },
+      },
+      panels: {
+        controls: {
+          sections: [],
+          title: "Controls",
+        },
+      },
+    });
+    const { container } = renderControlsPanelWithSchema(schema);
+
+    expect(screen.getByTestId("canvas-size").textContent).toBe("1440,1080");
+
+    const aspectRatioControl = container.querySelector<HTMLElement>(
+      '[data-slot="canvas-aspect-ratio-control"]',
+    );
+
+    expect(screen.getByText("Aspect ratio")).toBeTruthy();
+    expect(aspectRatioControl?.textContent).toContain("4:3");
+    const values = JSON.parse(screen.getByTestId("values-json").textContent ?? "{}");
+
+    expect(values["canvas.aspectRatio"]).toEqual({
+      height: 3,
+      mode: "preset",
+      value: "4:3",
+      width: 4,
+    });
+    expect(values["canvas.size.width"]).toBe(1440);
+    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("2")).toBeTruthy();
+    expect(values["canvas.renderScale"]).toBe(2);
+  });
+
+  it("renders timeline extended mode as runtime panel state instead of product values", () => {
+    const schema = defineToolcraft({
+      canvas: {
+        enabled: true,
+        renderScale: true,
+        size: { height: 1080, unit: "px", width: 1920 },
+        sizing: { mode: "editable-output" },
+      },
+      panels: {
+        controls: {
+          sections: [],
+          title: "Controls",
+        },
+        timeline: { mode: "playback" },
+      },
+    });
+
+    renderControlsPanelWithSchema(schema, undefined, {
+      timeline: { currentTimeSeconds: 2, expanded: true, isPlaying: true },
+    });
+
+    const setupText = screen.getByText("Timeline").closest("section")?.textContent ?? "";
+
+    expect(setupText.indexOf("Resolution scale")).toBeLessThan(setupText.indexOf("Timeline"));
+    const timelineField = screen.getByText("Timeline").closest('[role="group"]');
+    const timelineSwitch = timelineField?.querySelector<HTMLElement>('[role="switch"]');
+
+    expect(timelineSwitch?.getAttribute("aria-checked")).toBe("false");
+    expect(screen.getByTestId("timeline-panel-extended").textContent).toBe("undefined");
+    expect(screen.getByTestId("timeline-panel-hidden").textContent).toBe("undefined");
+    expect(screen.getByTestId("timeline-expanded").textContent).toBe("true");
+
+    fireEvent.click(timelineSwitch as HTMLElement);
+
+    expect(timelineSwitch?.getAttribute("aria-checked")).toBe("true");
+    expect(screen.getByTestId("timeline-panel-extended").textContent).toBe("true");
+    expect(screen.getByTestId("timeline-panel-hidden").textContent).toBe("undefined");
+    expect(screen.getByTestId("timeline-expanded").textContent).toBe("true");
+    expect(JSON.parse(screen.getByTestId("values-json").textContent ?? "{}")).not.toHaveProperty(
+      "panels.timeline.extended",
+    );
+
+    fireEvent.click(screen.getByRole("button", { name: "Reset controls" }));
+
+    expect(timelineSwitch?.getAttribute("aria-checked")).toBe("true");
+    expect(screen.getByTestId("timeline-panel-extended").textContent).toBe("true");
+  });
+});

package/templates/runtime/react/controls-panel/__tests__/controls-panel.slider-rendering.test.tsx

@@ -0,0 +1,317 @@
+import { describe, expect, it } from "vitest";
+import {
+  defineToolcraft,
+  fireEvent,
+  renderControlsPanelWithSchema,
+  screen,
+} from "../testing/controls-panel-test-utils";
+
+describe("ControlsPanel slider rendering and layout", () => {
+  it("renders schema discrete sliders with Toolcraft variant and markers", () => {
+    const schema = defineToolcraft({
+      canvas: { enabled: true },
+      panels: {
+        controls: {
+          sections: [
+            {
+              controls: {
+                grain: {
+                  defaultValue: 3,
+                  label: "Grain",
+                  max: 5,
+                  min: 0,
+                  step: 1,
+                  target: "shader.grain",
+                  type: "slider",
+                  variant: "discrete",
+                },
+              },
+              title: "Texture",
+            },
+          ],
+          title: "Generation Controls",
+        },
+      },
+    });
+
+    const { container } = renderControlsPanelWithSchema(schema);
+    const slider = container.querySelector<HTMLElement>(
+      '[data-slot="slider"][data-variant="discrete"]',
+    );
+    const markers = Array.from(
+      container.querySelectorAll<HTMLElement>('[data-slot="slider-marker"]'),
+    );
+
+    expect(slider).toBeTruthy();
+    expect(markers).toHaveLength(4);
+
+    for (const marker of markers) {
+      expect(marker.className).toContain("group-hover/slider-control:opacity-100");
+      expect(marker.className.split(/\s+/)).not.toContain("opacity-100");
+    }
+
+    fireEvent.pointerDown(slider as HTMLElement, { button: 0 });
+
+    for (const marker of markers) {
+      expect(marker.className.split(/\s+/)).toContain("opacity-100");
+    }
+  });
+
+  it("renders one discrete slider marker for each fractional step", () => {
+    const schema = defineToolcraft({
+      canvas: { enabled: true },
+      panels: {
+        controls: {
+          sections: [
+            {
+              controls: {
+                duration: {
+                  defaultValue: 0.3,
+                  label: "Duration",
+                  markerCount: 3,
+                  max: 0.5,
+                  min: 0,
+                  step: 0.1,
+                  target: "animation.duration",
+                  type: "slider",
+                  variant: "discrete",
+                },
+              },
+              title: "Timing",
+            },
+          ],
+          title: "Generation Controls",
+        },
+      },
+    });
+
+    const { container } = renderControlsPanelWithSchema(schema);
+    const slider = container.querySelector<HTMLElement>(
+      '[data-slot="slider"][data-variant="discrete"]',
+    );
+    const markers = Array.from(
+      container.querySelectorAll<HTMLElement>('[data-slot="slider-marker"]'),
+    );
+
+    expect(slider).toBeTruthy();
+    expect(markers).toHaveLength(4);
+  });
+
+  it("keeps stepped continuous sliders free of discrete markers", () => {
+    const schema = defineToolcraft({
+      canvas: { enabled: true },
+      panels: {
+        controls: {
+          sections: [
+            {
+              controls: {
+                speed: {
+                  defaultValue: 118,
+                  label: "Reveal speed",
+                  max: 150,
+                  min: 0,
+                  step: 1,
+                  target: "animation.speed",
+                  type: "slider",
+                  unit: " cols/s",
+                },
+              },
+              title: "Reveal",
+            },
+          ],
+          title: "Generation Controls",
+        },
+      },
+    });
+
+    const { container } = renderControlsPanelWithSchema(schema);
+
+    expect(
+      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", () => {
+    const schema = defineToolcraft({
+      canvas: { enabled: true },
+      panels: {
+        controls: {
+          sections: [
+            {
+              controls: {
+                fps: {
+                  defaultValue: 17,
+                  label: "FPS",
+                  max: 30,
+                  min: 1,
+                  step: 1,
+                  target: "animation.fps",
+                  type: "slider",
+                  unit: "fps",
+                  variant: "discrete",
+                },
+                speed: {
+                  defaultValue: 3.7,
+                  label: "Speed",
+                  max: 4,
+                  min: 0.1,
+                  step: 0.1,
+                  target: "animation.speed",
+                  type: "slider",
+                },
+              },
+              layoutGroups: [
+                {
+                  columns: 2,
+                  controls: ["fps", "speed"],
+                  layout: "inline",
+                },
+              ],
+              title: "Pattern Animation",
+            },
+          ],
+          title: "Generation Controls",
+        },
+      },
+    });
+
+    const { container } = renderControlsPanelWithSchema(schema);
+    const fpsSlider = container.querySelector<HTMLElement>(
+      '[data-slot="slider"][data-variant="discrete"]',
+    );
+
+    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.7");
+  });
+
+  it("passes schema disabled state into slider controls", () => {
+    const schema = defineToolcraft({
+      canvas: { enabled: true },
+      panels: {
+        controls: {
+          sections: [
+            {
+              controls: {
+                opacity: {
+                  defaultValue: 70,
+                  disabled: true,
+                  label: "Opacity",
+                  max: 100,
+                  min: 0,
+                  step: 1,
+                  target: "shader.opacity",
+                  type: "slider",
+                },
+              },
+              title: "Output",
+            },
+          ],
+          title: "Generation Controls",
+        },
+      },
+    });
+
+    const { container } = renderControlsPanelWithSchema(schema);
+    const field = screen.getByText("Opacity").closest('[data-slot="field"]');
+    const slider = container.querySelector<HTMLElement>('[data-slot="slider"]');
+
+    expect(field?.getAttribute("data-disabled")).toBe("true");
+    expect(slider).toBeTruthy();
+    expect(slider?.hasAttribute("data-disabled")).toBe(true);
+  });
+
+  it("does not place any schema slider in inline layout rows", () => {
+    const schema = defineToolcraft({
+      canvas: { enabled: true },
+      panels: {
+        controls: {
+          sections: [
+            {
+              controls: {
+                range: {
+                  defaultValue: [20, 80],
+                  label: "Range",
+                  max: 100,
+                  min: 0,
+                  step: 1,
+                  target: "shape.range",
+                  type: "rangeSlider",
+                  unit: "%",
+                },
+                strength: {
+                  defaultValue: 50,
+                  label: "Strength",
+                  max: 100,
+                  min: 0,
+                  step: 1,
+                  target: "shape.strength",
+                  type: "slider",
+                  unit: "%",
+                },
+              },
+              layoutGroups: [
+                {
+                  columns: 2,
+                  controls: ["range", "strength"],
+                  layout: "inline",
+                },
+              ],
+              title: "Shape",
+            },
+          ],
+          title: "Controls",
+        },
+      },
+    });
+
+    const { container } = renderControlsPanelWithSchema(schema);
+
+    expect(container.querySelector('[data-control-layout="inline"]')).toBeNull();
+    expect(screen.getByText("Range")).toBeTruthy();
+    expect(screen.getByText("Strength")).toBeTruthy();
+  });
+});

package/templates/runtime/react/controls-panel/__tests__/controls-panel.state-reset.test.tsx

@@ -0,0 +1,137 @@
+import { describe, expect, it } from "vitest";
+import {
+  defineToolcraft,
+  fireEvent,
+  renderControlsPanel,
+  renderControlsPanelWithSchema,
+  screen,
+} from "../testing/controls-panel-test-utils";
+
+describe("ControlsPanel state and reset behavior", () => {
+  it("binds control changes and reset actions to runtime state", () => {
+    renderControlsPanel();
+
+    const promptInput = screen.getByDisplayValue("Initial prompt");
+
+    fireEvent.change(promptInput, { target: { value: "Updated prompt" } });
+    expect(screen.getByTestId("prompt-value").textContent).toBe("Updated prompt");
+
+    const enabledField = screen.getByText("Enabled").closest('[role="group"]');
+    const enabledSwitch = enabledField?.querySelector<HTMLElement>('[role="switch"]');
+
+    fireEvent.click(enabledSwitch as HTMLElement);
+    expect(screen.getByTestId("enabled-value").textContent).toBe("false");
+
+    fireEvent.click(screen.getByRole("button", { name: "Reset controls" }));
+
+    expect(screen.getByTestId("prompt-value").textContent).toBe("Initial prompt");
+    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");
+  });
+});