@pixel-point/toolcraft 0.0.14 → 0.0.15

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

@@ -0,0 +1,139 @@
+import { describe, expect, it } from "vitest";
+import {
+  defineToolcraft,
+  fireEvent,
+  renderControlsPanelWithSchema,
+  screen
+} from "../testing/controls-panel-test-utils";
+
+describe("ControlsPanel gradient control", () => {
+  it.each([
+    ["linear", "Linear"],
+    ["radial", "Radial"],
+    ["angular", "Angular"],
+    ["diamond", "Diamond"],
+  ] as const)("preserves %s gradient type in the gradient select", (gradientType, label) => {
+    const schema = defineToolcraft({
+      canvas: { enabled: true },
+      panels: {
+        controls: {
+          sections: [
+            {
+              controls: {
+                gradient: {
+                  defaultValue: {
+                    angle: 138,
+                    gradientType,
+                    stops: [
+                      { color: "#111111", position: "0%" },
+                      { color: "#14B8FF", position: "45%" },
+                      { color: "#F472B6", position: "76%" },
+                    ],
+                  },
+                  label: "Gradient",
+                  target: "style.gradient",
+                  type: "gradient",
+                },
+              },
+              title: "Gradient",
+            },
+          ],
+          title: "Generation Controls",
+        },
+      },
+    });
+
+    const { container } = renderControlsPanelWithSchema(schema);
+    const gradientSelect = container.querySelector('[data-slot="select-trigger"]');
+
+    expect(gradientSelect?.textContent).toContain(label);
+  });
+
+  it("commits gradient stop position inputs on blur or Enter with a separated percent suffix", () => {
+    const schema = defineToolcraft({
+      canvas: { enabled: true },
+      panels: {
+        controls: {
+          sections: [
+            {
+              controls: {
+                gradient: {
+                  defaultValue: {
+                    angle: 90,
+                    gradientType: "linear",
+                    stops: [
+                      { color: "#111111", position: "0%" },
+                      { color: "#FFFFFF", position: "100%" },
+                    ],
+                  },
+                  label: "Gradient",
+                  target: "style.gradient",
+                  type: "gradient",
+                },
+              },
+              title: "Gradient",
+            },
+          ],
+          title: "Generation Controls",
+        },
+      },
+    });
+
+    renderControlsPanelWithSchema(schema);
+
+    const firstPositionInput = screen.getByLabelText(
+      "Stop 1 position",
+    ) as HTMLInputElement;
+    const secondPositionInput = screen.getByLabelText(
+      "Stop 2 position",
+    ) as HTMLInputElement;
+    const firstPositionGroup = firstPositionInput.closest('[data-slot="input-group"]');
+    const firstOpacityInput = screen.getByLabelText("Stop 1 opacity");
+    const stopsList = firstPositionInput.closest('[data-slot="gradient-stops-list"]');
+    const gradientControlItem = stopsList?.closest(
+      "[data-control-item-compound-context]",
+    );
+    const firstStopGrid = firstPositionInput.closest('[data-slot="field"]')
+      ?.querySelector('[data-slot="gradient-stop-row-grid"]');
+
+    expect(firstPositionInput.value).toBe("0");
+    expect(firstPositionGroup?.textContent).toContain("%");
+    expect(stopsList?.className).not.toContain("border-y");
+    expect(gradientControlItem).toBeNull();
+    expect(firstPositionInput.className.split(/\s+/)).toContain("pl-[5px]");
+    expect(firstOpacityInput.className.split(/\s+/)).toContain("pl-[5px]");
+    expect(firstStopGrid?.className).toContain("grid-cols-[3.5rem_minmax(0,1fr)_1.5rem]");
+
+    fireEvent.change(firstPositionInput, { target: { value: "25" } });
+    expect(JSON.parse(screen.getByTestId("gradient-value").textContent ?? "{}")).toMatchObject({
+      stops: [
+        { position: "0%" },
+        { position: "100%" },
+      ],
+    });
+
+    fireEvent.blur(firstPositionInput);
+    expect(JSON.parse(screen.getByTestId("gradient-value").textContent ?? "{}")).toMatchObject({
+      stops: [
+        { position: "25%" },
+        { position: "100%" },
+      ],
+    });
+
+    fireEvent.change(secondPositionInput, { target: { value: "75" } });
+    expect(JSON.parse(screen.getByTestId("gradient-value").textContent ?? "{}")).toMatchObject({
+      stops: [
+        { position: "25%" },
+        { position: "100%" },
+      ],
+    });
+
+    fireEvent.keyDown(secondPositionInput, { code: "Enter", key: "Enter" });
+    expect(JSON.parse(screen.getByTestId("gradient-value").textContent ?? "{}")).toMatchObject({
+      stops: [
+        { position: "25%" },
+        { position: "75%" },
+      ],
+    });
+  });
+});

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

@@ -0,0 +1,103 @@
+import { describe, expect, it } from "vitest";
+import {
+  defineToolcraft,
+  renderControlsPanelWithSchema,
+  screen,
+} from "../testing/controls-panel-test-utils";
+
+describe("ControlsPanel help policy", () => {
+  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: "palette.accent1",
+                  type: "color",
+                },
+                color2: {
+                  defaultValue: { hex: "#8CFF3A" },
+                  description: "Sets the second bead color.",
+                  label: "Color 2",
+                  target: "palette.accent2",
+                  type: "color",
+                },
+                color3: {
+                  defaultValue: { hex: "#F4FF5A" },
+                  description: "Sets the third bead color.",
+                  label: "Color 3",
+                  target: "palette.accent3",
+                  type: "color",
+                },
+                color4: {
+                  defaultValue: { hex: "#B8FF2E" },
+                  description: "Sets the fourth bead color.",
+                  label: "Color 4",
+                  target: "palette.accent4",
+                  type: "color",
+                },
+                color5: {
+                  defaultValue: { hex: "#ECFF68" },
+                  description: "Sets the fifth bead color.",
+                  label: "Color 5",
+                  target: "palette.accent5",
+                  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: "palette.spread",
+                  type: "slider",
+                  unit: "%",
+                },
+              },
+              layoutGroups: [
+                {
+                  columns: 2,
+                  controls: ["color1", "color2"],
+                  layout: "inline",
+                },
+                {
+                  columns: 2,
+                  controls: ["color3", "color4"],
+                  layout: "inline",
+                },
+              ],
+              title: "Accent Shades",
+            },
+            {
+              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();
+  });
+});

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

@@ -0,0 +1,16 @@
+import { describe, expect, it } from "vitest";
+import {
+  fireEvent,
+  renderControlsPanel,
+  screen,
+} from "../testing/controls-panel-test-utils";
+
+describe("ControlsPanel image picker controls", () => {
+  it("binds image picker controls to runtime state", () => {
+    renderControlsPanel();
+
+    fireEvent.click(screen.getByRole("button", { name: "Image 2" }));
+
+    expect(screen.getByTestId("image-value").textContent).toBe("image-2");
+  });
+});

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

@@ -0,0 +1,290 @@
+import { describe, expect, it } from "vitest";
+import {
+  defineToolcraft,
+  renderControlsPanelWithSchema,
+  screen,
+} from "../testing/controls-panel-test-utils";
+
+describe("ControlsPanel inline layout", () => {
+  it("renders compact switch pairs inline", () => {
+    const schema = defineToolcraft({
+      canvas: { enabled: false },
+      panels: {
+        controls: {
+          sections: [
+            {
+              controls: {
+                glow: {
+                  defaultValue: true,
+                  label: "Glow",
+                  target: "style.glow",
+                  type: "switch",
+                },
+                loop: {
+                  defaultValue: false,
+                  label: "Loop",
+                  target: "animation.loop",
+                  type: "switch",
+                },
+              },
+              layoutGroups: [
+                {
+                  columns: 2,
+                  controls: ["glow", "loop"],
+                  layout: "inline",
+                },
+              ],
+              title: "Style",
+            },
+          ],
+          title: "Controls",
+        },
+      },
+    });
+
+    const { container } = renderControlsPanelWithSchema(schema);
+
+    expect(screen.getByText("Glow")).toBeTruthy();
+    expect(screen.getByText("Loop")).toBeTruthy();
+    expect(
+      container.querySelector('[data-control-layout="inline"][data-control-layout-columns="2"]'),
+    ).toBeTruthy();
+  });
+
+  it("automatically renders adjacent short switches for one entity inline", () => {
+    const schema = defineToolcraft({
+      canvas: { enabled: false },
+      panels: {
+        controls: {
+          sections: [
+            {
+              controls: {
+                snapX: {
+                  defaultValue: true,
+                  label: "Snap X",
+                  target: "icon.snapX",
+                  type: "switch",
+                },
+                snapY: {
+                  defaultValue: true,
+                  label: "Snap Y",
+                  target: "icon.snapY",
+                  type: "switch",
+                },
+              },
+              title: "Icon",
+            },
+          ],
+          title: "Controls",
+        },
+      },
+    });
+
+    const { container } = renderControlsPanelWithSchema(schema);
+    const inlineGroup = container.querySelector(
+      '[data-control-layout="inline"][data-control-layout-columns="2"]',
+    );
+
+    expect(screen.getByText("Snap X")).toBeTruthy();
+    expect(screen.getByText("Snap Y")).toBeTruthy();
+    expect(inlineGroup).toBeTruthy();
+    expect(inlineGroup?.textContent).toContain("Snap X");
+    expect(inlineGroup?.textContent).toContain("Snap Y");
+  });
+
+  it("renders the managed background toggle plus unlabeled color row as equal-width inline columns", () => {
+    const schema = defineToolcraft({
+      canvas: { enabled: false },
+      panels: {
+        controls: {
+          sections: [
+            {
+              controls: {
+                includeBackground: {
+                  defaultValue: true,
+                  description:
+                    "Controls PNG background transparency while preview and video keep the background.",
+                  label: "Include",
+                  target: "export.includeBackground",
+                  type: "switch",
+                },
+                background: {
+                  defaultValue: { hex: "#0F0F0F" },
+                  label: false,
+                  target: "appearance.background",
+                  type: "color",
+                },
+              },
+              layoutGroups: [
+                {
+                  columns: 2,
+                  controls: ["includeBackground", "background"],
+                  layout: "inline",
+                },
+              ],
+              title: "Background",
+            },
+          ],
+          title: "Controls",
+        },
+      },
+    });
+
+    const { container } = renderControlsPanelWithSchema(schema);
+    const toggleParameterGroup = container.querySelector(
+      '[data-control-layout="inline"][data-control-layout-kind="toggleParameter"]',
+    );
+
+    expect(screen.getAllByText("Background")).toHaveLength(1);
+    expect(screen.getByText("Include")).toBeTruthy();
+    expect(screen.getByRole("switch")).toBeTruthy();
+    expect(toggleParameterGroup).toBeTruthy();
+    expect(toggleParameterGroup?.className).toContain("gap-x-2.5");
+    expect(toggleParameterGroup?.getAttribute("style")).toContain(
+      "repeat(2, minmax(0, 1fr))",
+    );
+  });
+
+  it("renders short visible toggle plus parameter rows as equal-width toggle-parameter rows", () => {
+    const schema = defineToolcraft({
+      canvas: { enabled: false },
+      panels: {
+        controls: {
+          sections: [
+            {
+              controls: {
+                loop: {
+                  defaultValue: true,
+                  label: "Loop",
+                  target: "animation.loop",
+                  type: "switch",
+                },
+                duration: {
+                  defaultValue: "8",
+                  label: "Duration",
+                  target: "animation.duration",
+                  type: "text",
+                },
+              },
+              layoutGroups: [
+                {
+                  columns: 2,
+                  controls: ["loop", "duration"],
+                  layout: "inline",
+                },
+              ],
+              title: "Playback",
+            },
+          ],
+          title: "Controls",
+        },
+      },
+    });
+
+    const { container } = renderControlsPanelWithSchema(schema);
+    const toggleParameterGroup = container.querySelector(
+      '[data-control-layout="inline"][data-control-layout-kind="toggleParameter"]',
+    );
+
+    expect(screen.getByText("Loop")).toBeTruthy();
+    expect(screen.queryByText("Duration")).toBeNull();
+    expect(toggleParameterGroup).toBeTruthy();
+    expect(toggleParameterGroup?.className).toContain("gap-x-2.5");
+    expect(toggleParameterGroup?.getAttribute("style")).toContain(
+      "repeat(2, minmax(0, 1fr))",
+    );
+  });
+
+  it("keeps segmented controls full-width even when an inline row is requested", () => {
+    const schema = defineToolcraft({
+      canvas: { enabled: false },
+      panels: {
+        controls: {
+          sections: [
+            {
+              controls: {
+                includeText: {
+                  defaultValue: true,
+                  label: "Include",
+                  target: "text.enabled",
+                  type: "switch",
+                },
+                dragTarget: {
+                  defaultValue: "glass",
+                  label: "Drag",
+                  options: [
+                    { label: "Glass", value: "glass" },
+                    { label: "Text", value: "text" },
+                  ],
+                  target: "text.dragTarget",
+                  type: "segmented",
+                },
+              },
+              layoutGroups: [
+                {
+                  columns: 2,
+                  controls: ["includeText", "dragTarget"],
+                  layout: "inline",
+                },
+              ],
+              title: "Glass Text",
+            },
+          ],
+          title: "Controls",
+        },
+      },
+    });
+
+    const { container } = renderControlsPanelWithSchema(schema);
+
+    expect(screen.getByText("Include")).toBeTruthy();
+    expect(screen.getByText("Drag")).toBeTruthy();
+    expect(container.querySelector('[data-control-layout="inline"]')).toBeNull();
+    expect(container.querySelector('[data-slot="toggle-group"]')).toBeTruthy();
+  });
+
+  it("stacks switch pairs when an inline label would truncate", () => {
+    const schema = defineToolcraft({
+      canvas: { enabled: false },
+      panels: {
+        controls: {
+          sections: [
+            {
+              controls: {
+                background: {
+                  defaultValue: true,
+                  label: "Background",
+                  target: "output.background",
+                  type: "switch",
+                },
+                diagnosticOverlay: {
+                  defaultValue: false,
+                  label: "Diagnostic overlay",
+                  target: "debug.diagnosticOverlay",
+                  type: "switch",
+                },
+              },
+              layoutGroups: [
+                {
+                  columns: 2,
+                  controls: ["background", "diagnosticOverlay"],
+                  layout: "inline",
+                },
+              ],
+              title: "Output",
+            },
+          ],
+          title: "Controls",
+        },
+      },
+    });
+
+    const { container } = renderControlsPanelWithSchema(schema);
+
+    expect(screen.getByText("Background")).toBeTruthy();
+    expect(screen.getByText("Diagnostic overlay")).toBeTruthy();
+    expect(
+      container.querySelector('[data-control-layout="inline"][data-control-layout-columns="2"]'),
+    ).toBeNull();
+  });
+});