@pixel-point/toolcraft 0.0.3 → 0.0.6

package/templates/runtime/react/canvas-shell.test.tsx

@@ -226,7 +226,7 @@ describe("CanvasShell", () => {
     await waitFor(() => {
       expect(screen.getByTestId("canvas-offset").textContent).toBe("-8,12");
     });
-    expect(screen.getByTestId("canvas-zoom").textContent).toBe("70");
+    expect(screen.getByTestId("canvas-zoom").textContent).toBe("100");
   });
 
   it("zooms the canvas world from a trackpad pinch around the pointer", async () => {
@@ -243,7 +243,7 @@ describe("CanvasShell", () => {
     const world = canvas.querySelector("[data-toolcraft-canvas-world]") as HTMLElement;
     mockCanvasRect(canvas);
 
-    expect(world.style.transform).toBe("translate(-50%, -50%) translate(0px, 0px) scale(0.7)");
+    expect(world.style.transform).toBe("translate(-50%, -50%) translate(0px, 0px) scale(1)");
 
     const wheelEvent = new WheelEvent("wheel", {
       bubbles: true,
@@ -257,10 +257,10 @@ describe("CanvasShell", () => {
     expect(canvas.dispatchEvent(wheelEvent)).toBe(false);
     expect(wheelEvent.defaultPrevented).toBe(true);
     await waitFor(() => {
-      expect(screen.getByTestId("canvas-zoom").textContent).toBe("120");
+      expect(screen.getByTestId("canvas-zoom").textContent).toBe("150");
     });
-    expect(world.style.transform).toContain("translate(-142.857142857142");
-    expect(world.style.transform).toContain("scale(1.2)");
+    expect(world.style.transform).toContain("translate(-100px");
+    expect(world.style.transform).toContain("scale(1.5)");
   });
 
   it("prevents panel pinch gestures without moving the canvas viewport", async () => {
@@ -294,7 +294,7 @@ describe("CanvasShell", () => {
 
     expect(overlay.dispatchEvent(wheelEvent)).toBe(false);
     expect(wheelEvent.defaultPrevented).toBe(true);
-    expect(screen.getByTestId("canvas-zoom").textContent).toBe("70");
+    expect(screen.getByTestId("canvas-zoom").textContent).toBe("100");
     expect(screen.getByTestId("canvas-offset").textContent).toBe("0,0");
     expect(overlay.closest("[data-toolcraft-canvas-world]")).toBeNull();
 
@@ -306,7 +306,7 @@ describe("CanvasShell", () => {
 
     expect(overlay.dispatchEvent(scrollEvent)).toBe(true);
     expect(scrollEvent.defaultPrevented).toBe(false);
-    expect(screen.getByTestId("canvas-zoom").textContent).toBe("70");
+    expect(screen.getByTestId("canvas-zoom").textContent).toBe("100");
     expect(screen.getByTestId("canvas-offset").textContent).toBe("0,0");
   });
 

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

@@ -384,7 +384,7 @@ describe("ControlsPanel", () => {
     expect(inlineGroup?.textContent).toContain("Snap Y");
   });
 
-  it("renders hidden-label toggle plus parameter rows inline without duplicating section labels", () => {
+  it("renders the managed background toggle plus unlabeled color row as equal-width inline columns", () => {
     const schema = defineToolcraft({
       canvas: { enabled: false },
       panels: {
@@ -396,7 +396,7 @@ describe("ControlsPanel", () => {
                   defaultValue: true,
                   description:
                     "Controls PNG background transparency while preview and video keep the background.",
-                  label: false,
+                  label: "Include",
                   target: "export.includeBackground",
                   type: "switch",
                 },
@@ -428,12 +428,110 @@ describe("ControlsPanel", () => {
     );
 
     expect(screen.getAllByText("Background")).toHaveLength(1);
-    expect(screen.getByRole("switch", { name: "includeBackground" })).toBeTruthy();
+    expect(screen.getByText("Include")).toBeTruthy();
+    expect(screen.getByRole("switch")).toBeTruthy();
     expect(toggleParameterGroup).toBeTruthy();
-    expect(toggleParameterGroup?.getAttribute("style")).toContain("auto minmax(0, 1fr)");
+    expect(toggleParameterGroup?.getAttribute("style")).toContain(
+      "repeat(2, minmax(0, 1fr))",
+    );
   });
 
-  it("renders short visible toggle plus parameter rows as compact toggle-parameter rows", () => {
+  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 },
       panels: {
@@ -477,7 +575,9 @@ describe("ControlsPanel", () => {
     expect(screen.getByText("Loop")).toBeTruthy();
     expect(screen.getByText("Duration")).toBeTruthy();
     expect(toggleParameterGroup).toBeTruthy();
-    expect(toggleParameterGroup?.getAttribute("style")).toContain("auto minmax(0, 1fr)");
+    expect(toggleParameterGroup?.getAttribute("style")).toContain(
+      "repeat(2, minmax(0, 1fr))",
+    );
   });
 
   it("renders compact select pairs inline with stacked full-width fields", () => {
@@ -1529,6 +1629,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", () => {
@@ -1584,6 +1724,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", () => {
@@ -2278,6 +2420,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 },
@@ -3085,6 +3297,104 @@ describe("ControlsPanel", () => {
     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("2x")).toBeTruthy();
+    expect(values["canvas.renderScale"]).toBe(2);
+  });
+
   it("applies empty text input values while typing and reset restores defaults", () => {
     renderControlsPanel();
 
@@ -3391,11 +3701,18 @@ describe("ControlsPanel", () => {
     expect(firstSection?.querySelector("[data-control-list]")?.className).not.toContain("pb-5");
     expect(firstInlineGroup?.textContent).toContain("Canvas width");
     expect(firstInlineGroup?.textContent).toContain("Canvas height");
+    expect(firstSection?.textContent).toContain("Aspect ratio");
     expect(firstSection?.textContent).toContain("Canvas width");
     expect(firstSection?.textContent).toContain("Canvas height");
     expect(firstSection?.textContent).toContain("Export Settings");
     expect(firstSection?.textContent).toContain("Import Settings");
     expect((firstSection?.textContent ?? "").indexOf("Export Settings")).toBeLessThan(
+      (firstSection?.textContent ?? "").indexOf("Import Settings"),
+    );
+    expect((firstSection?.textContent ?? "").indexOf("Import Settings")).toBeLessThan(
+      (firstSection?.textContent ?? "").indexOf("Aspect ratio"),
+    );
+    expect((firstSection?.textContent ?? "").indexOf("Aspect ratio")).toBeLessThan(
       (firstSection?.textContent ?? "").indexOf("Canvas width"),
     );
     expect(scrollContent?.textContent).toContain("Import Settings");