@pixel-point/toolcraft 0.0.9 → 0.0.12

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

@@ -1,4 +1,4 @@
-import { act, cleanup, fireEvent, render, screen, waitFor } from "@testing-library/react";
+import { act, cleanup, createEvent, fireEvent, render, screen, waitFor } from "@testing-library/react";
 import { FileDrop, Panel } from "@repo/ui";
 import {
   DEFAULT_COLOR_FORMAT_MODE,
@@ -54,18 +54,6 @@ function createSchema() {
         sections: [
           {
             controls: {
-              canvasHeight: {
-                defaultValue: 180,
-                label: "Canvas height",
-                target: "canvas.size.height",
-                type: "text",
-              },
-              canvasWidth: {
-                defaultValue: 320,
-                label: "Canvas width",
-                target: "canvas.size.width",
-                type: "text",
-              },
               prompt: {
                 defaultValue: "Initial prompt",
                 description: "Describe the generated result.",
@@ -109,13 +97,6 @@ function createSchema() {
                 type: "switch",
               },
             },
-            layoutGroups: [
-              {
-                columns: 2,
-                controls: ["canvasWidth", "canvasHeight"],
-                layout: "inline",
-              },
-            ],
             title: "Basic",
           },
           {
@@ -252,7 +233,19 @@ function StateProbe() {
       <span data-testid="media-ids">
         {state.mediaAssets.map((asset) => asset.id).join(",")}
       </span>
+      <span data-testid="media-sizes">
+        {state.mediaAssets
+          .map((asset) =>
+            asset.size ? `${asset.size.width}x${asset.size.height}` : "none",
+          )
+          .join(",")}
+      </span>
+      <span data-testid="media-transforms">
+        {JSON.stringify(state.mediaAssets.map((asset) => asset.transform ?? null))}
+      </span>
       <span data-testid="timeline-expanded">{String(state.timeline.expanded)}</span>
+      <span data-testid="timeline-panel-extended">{String(state.panels.timeline.extended)}</span>
+      <span data-testid="timeline-panel-hidden">{String(state.panels.timeline.hidden)}</span>
       <span data-testid="timeline-keyframes">
         {JSON.stringify(state.timeline.keyframeGroups)}
       </span>
@@ -388,6 +381,42 @@ describe("ControlsPanel", () => {
     expect(inlineGroup?.textContent).toContain("Snap Y");
   });
 
+  it("commits palette family and shade changes to runtime state immediately", () => {
+    const schema = defineToolcraft({
+      canvas: { enabled: false },
+      panels: {
+        controls: {
+          sections: [
+            {
+              controls: {
+                inkPalette: {
+                  defaultValue: { family: "Slate", shade: "900" },
+                  label: "Palette",
+                  target: "ink.palette",
+                  type: "palette",
+                },
+              },
+              title: "Ink",
+            },
+          ],
+          title: "Controls",
+        },
+      },
+    });
+
+    renderControlsPanelWithSchema(schema);
+
+    fireEvent.click(screen.getByRole("button", { name: "Primary family Red" }));
+    let values = JSON.parse(screen.getByTestId("values-json").textContent ?? "{}");
+
+    expect(values["ink.palette"]).toEqual({ family: "Red", shade: "900" });
+
+    fireEvent.click(screen.getByRole("button", { name: "Primary shade 500" }));
+    values = JSON.parse(screen.getByTestId("values-json").textContent ?? "{}");
+
+    expect(values["ink.palette"]).toEqual({ family: "Red", shade: "500" });
+  });
+
   it("renders local action buttons as a two-column grid below their label", () => {
     const schema = defineToolcraft({
       canvas: { enabled: false },
@@ -717,6 +746,44 @@ describe("ControlsPanel", () => {
     expect(container.querySelector('[data-slot="toggle-group"]')).toBeTruthy();
   });
 
+  it("renders standalone select controls stacked full-width instead of compact side-label rows", () => {
+    const schema = defineToolcraft({
+      canvas: { enabled: false },
+      panels: {
+        controls: {
+          sections: [
+            {
+              controls: {
+                shape: {
+                  defaultValue: "pill",
+                  label: "Shape",
+                  options: [
+                    { label: "Pill", value: "pill" },
+                    { label: "Circle", value: "circle" },
+                  ],
+                  target: "glass.shape",
+                  type: "select",
+                },
+              },
+              title: "Glass",
+            },
+          ],
+          title: "Controls",
+        },
+      },
+    });
+
+    renderControlsPanelWithSchema(schema);
+    const trigger = screen.getByRole("combobox");
+    const field = trigger.closest<HTMLElement>('[data-slot="field"]');
+
+    expect(screen.getByText("Shape")).toBeTruthy();
+    expect(trigger.textContent).toContain("Pill");
+    expect(field?.dataset.orientation).toBe("vertical");
+    expect(field?.className).toContain("gap-2");
+    expect(trigger.closest("div")?.className).toContain("w-full");
+  });
+
   it("renders compact select pairs inline with stacked full-width fields", () => {
     const schema = defineToolcraft({
       canvas: { enabled: false },
@@ -1691,6 +1758,67 @@ describe("ControlsPanel", () => {
     expect(values["geometry.position"]).toEqual({ x: "-1.00", y: "-1.00" });
   });
 
+  it("resets a vector pad to its default value on double click", () => {
+    const schema = defineToolcraft({
+      canvas: { enabled: true },
+      panels: {
+        controls: {
+          sections: [
+            {
+              controls: {
+                position: {
+                  defaultValue: { x: "0.48", y: "-0.34" },
+                  label: "Position",
+                  target: "geometry.position",
+                  type: "vector",
+                },
+              },
+              title: "Geometry",
+            },
+          ],
+          title: "Controls",
+        },
+      },
+    });
+
+    renderControlsPanelWithSchema(schema);
+    const pad = screen.getByRole("button", { name: "Position X/Y pad" });
+
+    vi.spyOn(pad, "getBoundingClientRect").mockReturnValue({
+      bottom: 100,
+      height: 100,
+      left: 0,
+      right: 100,
+      toJSON: () => undefined,
+      top: 0,
+      width: 100,
+      x: 0,
+      y: 0,
+    } as DOMRect);
+    Object.defineProperty(pad, "setPointerCapture", {
+      configurable: true,
+      value: vi.fn(),
+    });
+
+    fireEvent.pointerDown(pad, {
+      buttons: 1,
+      clientX: 0,
+      clientY: 0,
+      pointerId: 1,
+    });
+    expect(
+      JSON.parse(screen.getByTestId("values-json").textContent ?? "{}")[
+        "geometry.position"
+      ],
+    ).toEqual({ x: "-1.00", y: "-1.00" });
+
+    fireEvent.doubleClick(pad);
+
+    const values = JSON.parse(screen.getByTestId("values-json").textContent ?? "{}");
+    expect(values["geometry.position"]).toEqual({ x: "0.48", y: "-0.34" });
+    expect(screen.getByText("0.48, -0.34")).toBeTruthy();
+  });
+
   it("locks vector pad movement to the dominant axis while shift is held", () => {
     const schema = defineToolcraft({
       canvas: { enabled: true },
@@ -1811,6 +1939,93 @@ describe("ControlsPanel", () => {
     expect(values["geometry.position"]).toEqual({ x: "0.00", y: "0.80" });
   });
 
+  it("renders vector pad values as compact rounded coordinates", () => {
+    const schema = defineToolcraft({
+      canvas: { enabled: true },
+      panels: {
+        controls: {
+          sections: [
+            {
+              controls: {
+                center: {
+                  defaultValue: {
+                    x: "-0.07070312499999998",
+                    y: "-0.00392795138",
+                  },
+                  label: "Center",
+                  target: "geometry.center",
+                  type: "vector",
+                },
+              },
+              title: "Geometry",
+            },
+          ],
+          title: "Controls",
+        },
+      },
+    });
+
+    renderControlsPanelWithSchema(schema);
+
+    expect(screen.getByText("-0.07, 0.00")).toBeTruthy();
+    expect(screen.queryByText("-0.07070312499999998, -0.00392795138")).toBeNull();
+  });
+
+  it("prevents native text selection while dragging a vector pad", () => {
+    const schema = defineToolcraft({
+      canvas: { enabled: true },
+      panels: {
+        controls: {
+          sections: [
+            {
+              controls: {
+                center: {
+                  defaultValue: { x: "0.00", y: "0.00" },
+                  label: "Center",
+                  target: "geometry.center",
+                  type: "vector",
+                },
+              },
+              title: "Geometry",
+            },
+          ],
+          title: "Controls",
+        },
+      },
+    });
+
+    renderControlsPanelWithSchema(schema);
+    const pad = screen.getByRole("button", { name: "Center X/Y pad" });
+
+    vi.spyOn(pad, "getBoundingClientRect").mockReturnValue({
+      bottom: 100,
+      height: 100,
+      left: 0,
+      right: 100,
+      toJSON: () => undefined,
+      top: 0,
+      width: 100,
+      x: 0,
+      y: 0,
+    } as DOMRect);
+    Object.defineProperty(pad, "setPointerCapture", {
+      configurable: true,
+      value: vi.fn(),
+    });
+
+    const pointerDown = createEvent.pointerDown(pad, {
+      buttons: 1,
+      clientX: 50,
+      clientY: 50,
+      pointerId: 1,
+    });
+
+    fireEvent(pad, pointerDown);
+
+    expect(pointerDown.defaultPrevented).toBe(true);
+    expect(pad.className).toContain("select-none");
+  });
+
   it("allows cartesian vector pads when a product intentionally uses y-up math", () => {
     const schema = defineToolcraft({
       canvas: { enabled: true },
@@ -2567,9 +2782,16 @@ describe("ControlsPanel", () => {
 
     for (const [draftValue, expectedValue, expectedLabel] of [
       ["0/1", '"shape.range":[0,1]', "0% – 1%"],
+      ["3/5", '"shape.range":[3,5]', "3% – 5%"],
+      ["1-6", '"shape.range":[1,6]', "1% – 6%"],
       ["2-3", '"shape.range":[2,3]', "2% – 3%"],
       ["4 - 5", '"shape.range":[4,5]', "4% – 5%"],
+      ["30%-150%", '"shape.range":[30,100]', "30% – 100%"],
+      ["30% - 90%", '"shape.range":[30,90]', "30% – 90%"],
+      ["30 % - 90 %", '"shape.range":[30,90]', "30% – 90%"],
       ["6–7", '"shape.range":[6,7]', "6% – 7%"],
+      ["7—8", '"shape.range":[7,8]', "7% – 8%"],
+      ["8−9", '"shape.range":[8,9]', "8% – 9%"],
     ] as const) {
       fireEvent.click(screen.getByRole("button", { name: "Edit Range value" }));
       const editor = screen.getByRole("textbox", { name: "Range value" });
@@ -2708,7 +2930,7 @@ describe("ControlsPanel", () => {
       },
     });
 
-    renderControlsPanelWithSchema(schema, undefined, {
+    const { container } = renderControlsPanelWithSchema(schema, undefined, {
       layers: [
         {
           id: "layer-1",
@@ -2733,9 +2955,66 @@ describe("ControlsPanel", () => {
     });
 
     expect(screen.getByRole("img", { name: "material.svg" })).toBeTruthy();
+    const transformActions = container.querySelector(
+      '[data-slot="actions-control"][aria-label="Image transforms"]',
+    );
+    const transformActionButtons = transformActions?.querySelector(
+      '[data-slot="actions-control-buttons"]',
+    );
+
+    expect(transformActions).toBeTruthy();
+    expect(transformActions?.parentElement?.style.gap).toBe("6px");
+    expect(transformActionButtons?.className).toContain("grid-cols-3");
+    expect(transformActionButtons?.getAttribute("data-actions-columns")).toBe("3");
+    expect(screen.queryByRole("button", { name: "90° Left" })).toBeNull();
+
+    for (const [name, visibleLabel] of [
+      ["90° Right", "90°"],
+      ["Flip horizontal", "Flip H"],
+      ["Flip vertical", "Flip V"],
+    ] as const) {
+      const button = screen.getByRole("button", { name });
+
+      expect(button).toBeTruthy();
+      expect(button.textContent).toContain(visibleLabel);
+    }
     expect(
       screen.queryByText("Click to upload an image"),
     ).toBeNull();
+    const initialPreviewFrameStyle = container
+      .querySelector('[data-slot="file-upload-preview-frame"]')
+      ?.getAttribute("style");
+
+    expect(initialPreviewFrameStyle).toBe(
+      "aspect-ratio: 96 / 64; max-height: 196px; width: 100%;",
+    );
+    expect(screen.getByRole("img", { name: "material.svg" }).getAttribute("style")).toBe(
+      "transform: translate(-50%, -50%);",
+    );
+
+    fireEvent.click(screen.getByRole("button", { name: "90° Right" }));
+    expect(screen.getByTestId("media-transforms").textContent).toBe(
+      '[{"rotationDeg":90}]',
+    );
+    expect(
+      container.querySelector('[data-slot="file-upload-preview-frame"]')?.getAttribute("style"),
+    ).toBe(initialPreviewFrameStyle);
+    expect(screen.getByRole("img", { name: "material.svg" }).getAttribute("style")).toBe(
+      "transform: translate(-50%, -50%) rotate(90deg); width: 66.6667%;",
+    );
+
+    fireEvent.click(screen.getByRole("button", { name: "Flip horizontal" }));
+    expect(screen.getByTestId("media-transforms").textContent).toBe(
+      '[{"rotationDeg":90,"flipHorizontal":true}]',
+    );
+    expect(screen.getByRole("img", { name: "material.svg" }).getAttribute("style")).toBe(
+      "transform: translate(-50%, -50%) rotate(90deg) scale(-1, 1); width: 66.6667%;",
+    );
+
+    fireEvent.click(screen.getByRole("button", { name: "Flip vertical" }));
+    expect(screen.getByTestId("media-transforms").textContent).toBe(
+      '[{"rotationDeg":90,"flipHorizontal":true,"flipVertical":true}]',
+    );
 
     fireEvent.click(screen.getByRole("button", { name: "Remove image" }));
 
@@ -2744,6 +3023,113 @@ describe("ControlsPanel", () => {
     expect(screen.getByText("Click to upload an image")).toBeTruthy();
   });
 
+  it("renders schema default media as a removable fileDrop attachment", () => {
+    const schema = defineToolcraft({
+      canvas: { enabled: true, upload: true },
+      media: {
+        defaultAssets: [
+          {
+            dataUrl:
+              "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='64' viewBox='0 0 96 64'%3E%3Crect width='96' height='64' fill='%23777'/%3E%3C/svg%3E",
+            fileName: "default-background.svg",
+            id: "default-background",
+            layerId: "default-background-layer",
+            mimeType: "image/svg+xml",
+            size: { height: 64, unit: "px", width: 96 },
+            sourceTarget: "input.source",
+          },
+        ],
+      },
+      panels: {
+        controls: {
+          sections: [
+            {
+              controls: {
+                source: {
+                  accept: "PNG, SVG",
+                  label: "Image",
+                  target: "input.source",
+                  type: "fileDrop",
+                },
+              },
+              layout: "standalone",
+              title: "Input",
+            },
+          ],
+          title: "Generation Controls",
+        },
+      },
+    });
+
+    renderControlsPanelWithSchema(schema);
+
+    expect(screen.getByRole("img", { name: "default-background.svg" })).toBeTruthy();
+    expect(screen.getByTestId("media-ids").textContent).toBe("default-background");
+
+    fireEvent.click(screen.getByRole("button", { name: "Remove image" }));
+
+    expect(screen.getByTestId("media-count").textContent).toBe("0");
+    expect(screen.queryByRole("img", { name: "default-background.svg" })).toBeNull();
+    expect(screen.getByText("Click to upload an image")).toBeTruthy();
+
+    fireEvent.click(screen.getByRole("button", { name: "Reset Input section" }));
+
+    expect(screen.getByRole("img", { name: "default-background.svg" })).toBeTruthy();
+    expect(screen.getByTestId("media-count").textContent).toBe("1");
+
+    fireEvent.click(screen.getByRole("button", { name: "Remove image" }));
+    fireEvent.click(screen.getByRole("button", { name: "Reset controls" }));
+
+    expect(screen.getByRole("img", { name: "default-background.svg" })).toBeTruthy();
+    expect(screen.getByTestId("media-count").textContent).toBe("1");
+  });
+
+  it("keeps the current editable canvas size when uploading an image through fileDrop", async () => {
+    const schema = defineToolcraft({
+      canvas: {
+        enabled: true,
+        size: { height: 720, unit: "px", width: 1280 },
+        upload: true,
+      },
+      panels: {
+        controls: {
+          sections: [
+            {
+              controls: {
+                source: {
+                  label: "Image",
+                  target: "input.source",
+                  type: "fileDrop",
+                },
+              },
+              layout: "standalone",
+              title: "Input",
+            },
+          ],
+          title: "Generation Controls",
+        },
+      },
+    });
+    const { container } = renderControlsPanelWithSchema(schema);
+    const input = container.querySelector<HTMLInputElement>('input[type="file"]');
+
+    expect(input).toBeTruthy();
+    expect(screen.getByTestId("canvas-size").textContent).toBe("1280,720");
+
+    fireEvent.change(input as HTMLInputElement, {
+      target: {
+        files: [new File(["image"], "wide.png", { type: "image/png" })],
+      },
+    });
+
+    await waitFor(() => {
+      expect(screen.getByTestId("media-count").textContent).toBe("1");
+    });
+
+    expect(screen.getByTestId("canvas-size").textContent).toBe("1280,720");
+    expect(screen.getByTestId("media-sizes").textContent).toBe("1280x720");
+  });
+
   it("removes single-layer file uploads from the canvas and returns the file control to empty", () => {
     const schema = defineToolcraft({
       canvas: { enabled: true, upload: true },
@@ -2878,6 +3264,7 @@ 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");
+    expect(screen.queryByRole("button", { name: "90° Left" })).toBeNull();
 
     const firstPreview = screen
       .getByRole("img", { name: "one.svg" })
@@ -2894,6 +3281,15 @@ describe("ControlsPanel", () => {
     expect(firstPreview.getAttribute("tabindex")).toBe("0");
     expect(firstPreview.className).toContain("cursor-grab");
 
+    fireEvent.click(firstPreview);
+    expect(firstPreview.getAttribute("data-selected")).toBe("true");
+    expect(screen.getByRole("button", { name: "90° Right" })).toBeTruthy();
+
+    fireEvent.click(screen.getByRole("button", { name: "90° Right" }));
+    expect(screen.getByTestId("media-transforms").textContent).toBe(
+      '[{"rotationDeg":90},null]',
+    );
+
     fireEvent.click(screen.getByRole("button", { name: "Remove two.svg" }));
 
     expect(screen.getByTestId("media-count").textContent).toBe("1");
@@ -3863,7 +4259,10 @@ describe("ControlsPanel", () => {
     fireEvent.change(promptInput, { target: { value: "Updated prompt" } });
     expect(screen.getByTestId("prompt-value").textContent).toBe("Updated prompt");
 
-    fireEvent.click(screen.getByRole("switch"));
+    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" }));
@@ -4313,6 +4712,54 @@ describe("ControlsPanel", () => {
     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");
+  });
+
   it("applies empty text input values while typing and reset restores defaults", () => {
     renderControlsPanel();
 
@@ -4549,7 +4996,7 @@ describe("ControlsPanel", () => {
     expect(handledActions).toEqual(["download:Generation Controls"]);
   });
 
-  it("renders runtime settings transfer as a body section instead of sticky footer actions", () => {
+  it("renders runtime settings transfer as a headerless body section instead of sticky footer actions", () => {
     const schema = defineToolcraft({
       canvas: { enabled: true, size: { height: 720, unit: "px", width: 1280 } },
       panels: {
@@ -4613,10 +5060,12 @@ describe("ControlsPanel", () => {
     ).not.toContain("Setup");
     expect(firstSection?.querySelector('[data-slot="panel-title"]')).toBeNull();
     expect(firstSection?.querySelector("[data-control-section-collapse-button]")).toBeNull();
+    expect(firstSection?.querySelector('[data-slot="control-section-header"]')).toBeNull();
+    expect(firstSection?.querySelector('[data-slot="panel-section-collapsible-body"]')).toBeNull();
+    expect(firstSection?.getAttribute("data-collapsed")).toBeNull();
     expect(firstSection?.className).toContain("py-0");
-    expect(firstSection?.querySelector("[data-control-list]")?.className).toContain("py-3");
-    expect(firstSection?.querySelector("[data-control-list]")?.className).not.toContain("pt-2");
-    expect(firstSection?.querySelector("[data-control-list]")?.className).not.toContain("pb-5");
+    expect(firstSection?.querySelector("[data-control-list]")?.className).toContain("pt-2");
+    expect(firstSection?.querySelector("[data-control-list]")?.className).toContain("pb-6");
     expect(firstInlineGroup?.textContent).toContain("Canvas width");
     expect(firstInlineGroup?.textContent).toContain("Canvas height");
     expect(firstSection?.textContent).toContain("Aspect ratio");
@@ -4858,10 +5307,12 @@ describe("ControlsPanel", () => {
     const stickyFooter = container.querySelector(
       '[data-slot="toolcraft-panel-sticky-actions"]',
     );
+    const exportPngButton = screen.getByRole("button", { name: "Export PNG" });
 
     expect(stickyFooter?.getAttribute("data-sticky-footer-active")).toBeNull();
+    expect(exportPngButton.querySelector('[data-icon-name="upload-simple"]')).toBeTruthy();
 
-    fireEvent.click(screen.getByRole("button", { name: "Export PNG" }));
+    fireEvent.click(exportPngButton);
 
     expect(onPanelAction).toHaveBeenCalledTimes(1);
     await waitFor(() => {