@pixel-point/toolcraft 0.0.13 → 0.0.15

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

@@ -0,0 +1,366 @@
+import { describe, expect, it } from "vitest";
+import {
+  defineToolcraft,
+  fireEvent,
+  renderControlsPanel,
+  renderControlsPanelWithSchema,
+  screen,
+  waitFor
+} from "../testing/controls-panel-test-utils";
+
+describe("ControlsPanel color layout controls", () => {
+  it("renders paired color controls as one compound color grid item", () => {
+    renderControlsPanel();
+
+    const fillInput = screen.getByLabelText("Fill hex");
+    const colorControlList = fillInput.closest("[data-control-list]");
+    const colorSection = fillInput.closest("section");
+
+    expect(colorSection?.textContent).toContain("Fill & Stroke");
+    expect(screen.getByLabelText("Stroke hex")).toBeTruthy();
+    expect(colorControlList?.children).toHaveLength(1);
+  });
+
+  it("keeps an odd trailing plain color half-width in a color bank", () => {
+    const schema = defineToolcraft({
+      canvas: { enabled: true },
+      panels: {
+        controls: {
+          sections: [
+            {
+              controls: {
+                accent1: {
+                  defaultValue: { hex: "#9CE6FF" },
+                  label: "Accent 1",
+                  target: "accent.shade1",
+                  type: "color",
+                },
+                accent2: {
+                  defaultValue: { hex: "#FF7A90" },
+                  label: "Accent 2",
+                  target: "accent.shade2",
+                  type: "color",
+                },
+                accent3: {
+                  defaultValue: { hex: "#FFD166" },
+                  label: "Accent 3",
+                  target: "accent.shade3",
+                  type: "color",
+                },
+                accent4: {
+                  defaultValue: { hex: "#8BF38B" },
+                  label: "Accent 4",
+                  target: "accent.shade4",
+                  type: "color",
+                },
+                accent5: {
+                  defaultValue: { hex: "#BDA8FF" },
+                  label: "Accent 5",
+                  target: "accent.shade5",
+                  type: "color",
+                },
+              },
+              title: "Accent Shades",
+            },
+          ],
+          title: "Generation Controls",
+        },
+      },
+    });
+
+    const { container } = renderControlsPanelWithSchema(schema);
+    const pairedColorRows = container.querySelectorAll('[data-slot="color-control-grid"]');
+    const trailingColorButtonGroup = screen
+      .getByLabelText("Accent 5 hex")
+      .closest('[data-slot="button-group"]');
+    const trailingColorWidthContainer = trailingColorButtonGroup?.parentElement;
+
+    expect(pairedColorRows).toHaveLength(2);
+    expect(trailingColorWidthContainer?.className).toContain("w-1/2");
+    expect(trailingColorWidthContainer?.className).not.toContain("w-full");
+  });
+
+  it("omits visible color field labels only inside color-only sections", () => {
+    const schema = defineToolcraft({
+      canvas: { enabled: true },
+      panels: {
+        controls: {
+          sections: [
+            {
+              controls: {
+                fillColor: {
+                  defaultValue: { hex: "#C1FF00" },
+                  label: "Fill",
+                  target: "shape.fill",
+                  type: "color",
+                },
+                strokeColor: {
+                  defaultValue: { hex: "#FF6A00" },
+                  label: "Stroke",
+                  target: "shape.stroke",
+                  type: "color",
+                },
+                shadowColor: {
+                  defaultValue: { hex: "#000000", opacity: 45 },
+                  label: "Shadow",
+                  target: "shape.shadow",
+                  type: "colorOpacity",
+                },
+              },
+              title: "Appearance",
+            },
+          ],
+          title: "Generation Controls",
+        },
+      },
+    });
+
+    const { container } = renderControlsPanelWithSchema(schema);
+    const labels = [...container.querySelectorAll("[data-control-field-label]")].map(
+      (label) => label.textContent,
+    );
+
+    expect(labels).not.toContain("Fill");
+    expect(labels).not.toContain("Stroke");
+    expect(labels).not.toContain("Shadow");
+    expect(screen.getByLabelText("Fill hex")).toBeTruthy();
+    expect(screen.getByLabelText("Shadow opacity")).toBeTruthy();
+  });
+
+  it("shows color field labels inside mixed semantic sections", () => {
+    const schema = defineToolcraft({
+      canvas: { enabled: true },
+      panels: {
+        controls: {
+          sections: [
+            {
+              controls: {
+                maskSize: {
+                  defaultValue: "180",
+                  label: "Mask size",
+                  target: "mask.size",
+                  type: "text",
+                },
+                maskColor: {
+                  defaultValue: { hex: "#0EA5E9" },
+                  label: "Color",
+                  target: "mask.color",
+                  type: "color",
+                },
+                glowColor: {
+                  defaultValue: { hex: "#C1FF00", opacity: 72 },
+                  label: "Glow",
+                  target: "mask.glow",
+                  type: "colorOpacity",
+                },
+              },
+              title: "Mask",
+            },
+          ],
+          title: "Generation Controls",
+        },
+      },
+    });
+
+    const { container } = renderControlsPanelWithSchema(schema);
+    const labels = [...container.querySelectorAll("[data-control-field-label]")].map(
+      (label) => label.textContent,
+    );
+
+    expect(labels).toContain("Color");
+    expect(labels).toContain("Glow");
+    expect(screen.getByLabelText("Color hex")).toBeTruthy();
+    expect(screen.getByLabelText("Glow opacity")).toBeTruthy();
+  });
+
+  it("renders color opacity as one compound color and opacity control", async () => {
+    const schema = defineToolcraft({
+      canvas: { enabled: true },
+      panels: {
+        controls: {
+          sections: [
+            {
+              controls: {
+                textColor: {
+                  defaultValue: { hex: "#C1FF00", opacity: 72 },
+                  label: "Text color",
+                  target: "text.color",
+                  type: "colorOpacity",
+                },
+              },
+              title: "Typography",
+            },
+          ],
+          title: "Generation Controls",
+        },
+      },
+    });
+
+    renderControlsPanelWithSchema(schema);
+
+    expect(screen.getByLabelText("Text color hex")).toBeTruthy();
+    expect(screen.getByLabelText("Text color opacity")).toBeTruthy();
+    expect((screen.getByLabelText("Text color opacity") as HTMLInputElement).value).toBe(
+      "72",
+    );
+
+    const textColorOpacityInput = screen.getByLabelText(
+      "Text color opacity",
+    ) as HTMLInputElement;
+
+    fireEvent.change(textColorOpacityInput, {
+      target: { value: "55" },
+    });
+    fireEvent.blur(textColorOpacityInput);
+
+    await waitFor(() => {
+      expect(JSON.parse(screen.getByTestId("text-color-value").textContent ?? "{}")).toEqual({
+        hex: "#C1FF00",
+        opacity: 55,
+      });
+    });
+  });
+
+  it("keeps two color opacity controls stacked even when an inline row is requested", () => {
+    const schema = defineToolcraft({
+      canvas: { enabled: true },
+      panels: {
+        controls: {
+          sections: [
+            {
+              controls: {
+                fillColor: {
+                  defaultValue: { hex: "#0EA5E9", opacity: 82 },
+                  label: "Fill",
+                  target: "shape.fill",
+                  type: "colorOpacity",
+                },
+                strokeColor: {
+                  defaultValue: { hex: "#111827", opacity: 100 },
+                  label: "Stroke",
+                  target: "shape.stroke",
+                  type: "colorOpacity",
+                },
+              },
+              layoutGroups: [
+                {
+                  columns: 2,
+                  controls: ["fillColor", "strokeColor"],
+                  layout: "inline",
+                },
+              ],
+              title: "Shape",
+            },
+          ],
+          title: "Generation Controls",
+        },
+      },
+    });
+
+    const { container } = renderControlsPanelWithSchema(schema);
+    const inlineGroup = container.querySelector<HTMLElement>(
+      '[data-control-layout="inline"][data-control-layout-columns="2"]',
+    );
+    const fillOpacityInput = screen.getByLabelText("Fill opacity");
+    const strokeOpacityInput = screen.getByLabelText("Stroke opacity");
+
+    expect(inlineGroup).toBeNull();
+    expect(fillOpacityInput).toBeTruthy();
+    expect(strokeOpacityInput).toBeTruthy();
+  });
+
+  it("keeps mixed plain color and color opacity controls stacked when opacity is present", () => {
+    const schema = defineToolcraft({
+      canvas: { enabled: true },
+      panels: {
+        controls: {
+          sections: [
+            {
+              controls: {
+                backgroundColor: {
+                  defaultValue: { hex: "#0E0E0E" },
+                  label: "Background",
+                  target: "background.color",
+                  type: "color",
+                },
+                textColor: {
+                  defaultValue: { hex: "#FFFFFF", opacity: 88 },
+                  label: "Text",
+                  target: "text.color",
+                  type: "colorOpacity",
+                },
+              },
+              layoutGroups: [
+                {
+                  columns: 2,
+                  controls: ["backgroundColor", "textColor"],
+                  layout: "inline",
+                },
+              ],
+              title: "Colors",
+            },
+          ],
+          title: "Generation Controls",
+        },
+      },
+    });
+
+    const { container } = renderControlsPanelWithSchema(schema);
+    const inlineGroup = container.querySelector<HTMLElement>(
+      '[data-control-layout="inline"][data-control-layout-columns="2"]',
+    );
+
+    expect(inlineGroup).toBeNull();
+    expect(screen.getByLabelText("Background hex")).toBeTruthy();
+    expect(screen.getByLabelText("Text opacity")).toBeTruthy();
+  });
+
+  it("keeps mixed numeric and color opacity controls stacked even when an inline row is requested", () => {
+    const schema = defineToolcraft({
+      canvas: { enabled: true },
+      panels: {
+        controls: {
+          sections: [
+            {
+              controls: {
+                maskSize: {
+                  defaultValue: "180",
+                  label: "Mask size",
+                  target: "mask.size",
+                  type: "text",
+                },
+                maskColor: {
+                  defaultValue: { hex: "#0EA5E9", opacity: 82 },
+                  label: "Color",
+                  target: "mask.color",
+                  type: "colorOpacity",
+                },
+              },
+              layoutGroups: [
+                {
+                  columns: 2,
+                  controls: ["maskSize", "maskColor"],
+                  layout: "inline",
+                },
+              ],
+              title: "Mask",
+            },
+          ],
+          title: "Generation Controls",
+        },
+      },
+    });
+
+    const { container } = renderControlsPanelWithSchema(schema);
+    const inlineGroup = container.querySelector<HTMLElement>(
+      '[data-control-layout="inline"][data-control-layout-columns="2"]',
+    );
+
+    expect(inlineGroup).toBeNull();
+    expect(container.textContent).toContain("Mask size");
+    expect(screen.getByLabelText("Color hex")).toBeTruthy();
+    expect((screen.getByLabelText("Color opacity") as HTMLInputElement).value).toBe(
+      "82",
+    );
+  });
+});

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

@@ -0,0 +1,169 @@
+import { describe, expect, it } from "vitest";
+import {
+  DEFAULT_COLOR_FORMAT_MODE,
+  fireEvent,
+  getColorSurfaceModel,
+  getColorSurfaceSliderConfig,
+  getColorSurfaceStyle,
+  getColorSurfaceThumbPosition,
+  getSurfaceHsvColor,
+  render,
+  screen,
+  StyleGuideColorPicker,
+  vi,
+  waitFor
+} from "../testing/controls-panel-test-utils";
+
+describe("ControlsPanel color picker surface models", () => {
+  it("applies color picker slider changes while dragging", async () => {
+    const onChange = vi.fn();
+
+    render(<StyleGuideColorPicker value="#C1FF00" onChange={onChange} />);
+
+    const hueSlider = screen.getByRole("slider", { name: "Color hue" });
+    Object.defineProperty(hueSlider, "getBoundingClientRect", {
+      configurable: true,
+      value: () => ({
+        bottom: 18,
+        height: 18,
+        left: 0,
+        right: 360,
+        top: 0,
+        width: 360,
+        x: 0,
+        y: 0,
+        toJSON: () => ({}),
+      }),
+    });
+
+    fireEvent.pointerDown(hueSlider, { clientX: 0 });
+    fireEvent.pointerMove(window, { clientX: 180 });
+
+    await waitFor(() => {
+      expect(onChange).toHaveBeenLastCalledWith("#00ffff");
+    });
+  });
+
+  it("uses HSL as the default color field format with the Figma-style HSL surface", () => {
+    const defaultModel = getColorSurfaceModel(DEFAULT_COLOR_FORMAT_MODE);
+
+    expect(DEFAULT_COLOR_FORMAT_MODE).toBe("hsl");
+    expect(defaultModel).toBe("hsl");
+    expect(
+      getColorSurfaceSliderConfig({
+        colorModel: defaultModel,
+        currentColorHex: "#336699",
+        hueLabel: "Color hue",
+        optimisticColor: { h: 210, s: 0.67, v: 0.6 },
+      }),
+    ).toEqual({
+      label: "Color hue",
+      max: 360,
+      railBackground:
+        "linear-gradient(90deg, #ff0000 0%, #ffff00 16.67%, #00ff00 33.33%, #00ffff 50%, #0000ff 66.67%, #ff00ff 83.33%, #ff0000 100%)",
+      value: 210,
+    });
+  });
+
+  it("matches Figma color surface models for editable color formats", () => {
+    expect(getColorSurfaceModel("rgb")).toBe("hsb");
+    expect(getColorSurfaceModel("hsl")).toBe("hsl");
+    expect(getColorSurfaceModel("hsb")).toBe("hsb");
+    expect(getColorSurfaceModel("hex")).toBe("hsb");
+
+    const rgbStyle = getColorSurfaceStyle({
+      colorModel: getColorSurfaceModel("rgb"),
+      currentColorHex: "#336699",
+      hueColor: "#0088FF",
+    });
+    const hslStyle = getColorSurfaceStyle({
+      colorModel: getColorSurfaceModel("hsl"),
+      currentColorHex: "#336699",
+      hueColor: "#0088FF",
+    });
+    const hsbStyle = getColorSurfaceStyle({
+      colorModel: "hsb",
+      currentColorHex: "#336699",
+      hueColor: "#0088FF",
+    });
+
+    expect(rgbStyle.backgroundColor).toBe("#0088FF");
+    expect(String(hslStyle.backgroundImage)).toContain("hsl(210 100% 50%)");
+    expect(hsbStyle.backgroundColor).toBe("#0088FF");
+
+    expect(
+      getColorSurfaceSliderConfig({
+        colorModel: getColorSurfaceModel("rgb"),
+        currentColorHex: "#336699",
+        hueLabel: "Color hue",
+        optimisticColor: { h: 210, s: 0.67, v: 0.6 },
+      }),
+    ).toEqual({
+      label: "Color hue",
+      max: 360,
+      railBackground:
+        "linear-gradient(90deg, #ff0000 0%, #ffff00 16.67%, #00ff00 33.33%, #00ffff 50%, #0000ff 66.67%, #ff00ff 83.33%, #ff0000 100%)",
+      value: 210,
+    });
+    expect(
+      getColorSurfaceSliderConfig({
+        colorModel: getColorSurfaceModel("hsl"),
+        currentColorHex: "#336699",
+        hueLabel: "Color hue",
+        optimisticColor: { h: 210, s: 0.67, v: 0.6 },
+      }),
+    ).toEqual({
+      label: "Color hue",
+      max: 360,
+      railBackground:
+        "linear-gradient(90deg, #ff0000 0%, #ffff00 16.67%, #00ff00 33.33%, #00ffff 50%, #0000ff 66.67%, #ff00ff 83.33%, #ff0000 100%)",
+      value: 210,
+    });
+
+    expect(
+      getColorSurfaceThumbPosition({
+        colorModel: getColorSurfaceModel("rgb"),
+        currentColorHex: "#336699",
+        optimisticColor: { h: 210, s: 0.67, v: 0.6 },
+      }),
+    ).toEqual({ left: "67%", top: "40%" });
+    expect(
+      getColorSurfaceThumbPosition({
+        colorModel: getColorSurfaceModel("hsl"),
+        currentColorHex: "#336699",
+        optimisticColor: { h: 210, s: 0.67, v: 0.6 },
+      }),
+    ).toEqual({ left: "50%", top: "60%" });
+    expect(
+      getColorSurfaceThumbPosition({
+        colorModel: getColorSurfaceModel("hsl"),
+        currentColorHex: "#000000",
+        optimisticColor: { h: 210, s: 0.67, v: 0 },
+        surfacePosition: { x: 0.72, y: 1 },
+      }),
+    ).toEqual({ left: "72%", top: "100%" });
+  });
+
+  it("keeps hue fixed while dragging inside HSB and HSL color surfaces", () => {
+    const surfaceBounds = { height: 100, left: 0, top: 0, width: 100 };
+
+    expect(
+      getSurfaceHsvColor({
+        clientX: 5,
+        clientY: 95,
+        currentColor: { h: 133, s: 0.85, v: 0.85 },
+        surfaceBounds,
+        surfaceModel: "hsb",
+      }).h,
+    ).toBe(133);
+    expect(
+      getSurfaceHsvColor({
+        clientX: 5,
+        clientY: 95,
+        currentColor: { h: 133, s: 0.85, v: 0.85 },
+        surfaceBounds,
+        surfaceModel: "hsl",
+      }).h,
+    ).toBe(133);
+  });
+});

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

@@ -0,0 +1,160 @@
+import { describe, expect, it } from "vitest";
+import {
+  defineToolcraft,
+  renderControlsPanelWithSchema,
+  screen
+} from "../testing/controls-panel-test-utils";
+
+describe("ControlsPanel sectioned compound layout", () => {
+  it("renders content-width dividers for sectioned compound controls only when a section has sibling controls", () => {
+    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",
+                },
+                font: {
+                  defaultValue: {
+                    color: "#FFFFFF",
+                    fontId: "inter",
+                    fontSize: 16,
+                    fontWeight: "400",
+                    letterSpacing: "normal",
+                    lineHeight: "normal",
+                    opacity: 100,
+                    textCase: "original",
+                  },
+                  label: "Font",
+                  target: "typography.font",
+                  type: "fontPicker",
+                },
+              },
+              title: "Appearance",
+            },
+          ],
+          title: "Generation Controls",
+        },
+      },
+    });
+
+    renderControlsPanelWithSchema(schema);
+
+    const stopsList = screen
+      .getByLabelText("Stop 1 position")
+      .closest('[data-slot="gradient-stops-list"]');
+    const gradientControlItem = stopsList?.closest(
+      "[data-control-item-compound-context]",
+    ) as HTMLElement | null | undefined;
+    const fontControlItem = screen
+      .getByText("Weight")
+      .closest("[data-control-item-compound-context]") as HTMLElement | null;
+
+    expect(stopsList?.className).not.toContain("border-y");
+    expect(gradientControlItem?.dataset.controlItemCompoundDividerPlacement).toBe(
+      "bottom",
+    );
+    expect(gradientControlItem?.className).not.toContain(
+      "has-data-[control-section-divider=compound]:py-[18px]",
+    );
+    expect(gradientControlItem?.className).not.toContain(
+      "has-data-[control-section-divider=compound]:pt-[18px]",
+    );
+    expect(gradientControlItem?.className).toContain(
+      "has-data-[control-section-divider=compound]:pb-[18px]",
+    );
+    expect(gradientControlItem?.className).not.toContain(
+      "has-data-[control-section-divider=compound]:before:inset-x-3",
+    );
+    expect(gradientControlItem?.className).toContain(
+      "has-data-[control-section-divider=compound]:after:inset-x-3",
+    );
+    expect(fontControlItem?.dataset.controlItemCompoundDividerPlacement).toBe("top");
+    expect(fontControlItem?.className).toContain(
+      "has-data-[control-section-divider=compound]:pt-[18px]",
+    );
+    expect(fontControlItem?.className).not.toContain(
+      "has-data-[control-section-divider=compound]:pb-[18px]",
+    );
+    expect(fontControlItem?.className).toContain(
+      "has-data-[control-section-divider=compound]:before:inset-x-3",
+    );
+    expect(fontControlItem?.className).not.toContain(
+      "has-data-[control-section-divider=compound]:after:inset-x-3",
+    );
+  });
+
+  it("splits sectioned compound controls out of mixed inline layout groups", () => {
+    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",
+                },
+                mode: {
+                  defaultValue: "normal",
+                  label: "Mode",
+                  options: [
+                    { label: "Normal", value: "normal" },
+                    { label: "Screen", value: "screen" },
+                  ],
+                  target: "style.mode",
+                  type: "select",
+                },
+              },
+              layoutGroups: [
+                {
+                  controls: ["gradient", "mode"],
+                  layout: "inline",
+                },
+              ],
+              title: "Appearance",
+            },
+          ],
+          title: "Generation Controls",
+        },
+      },
+    });
+    const { container } = renderControlsPanelWithSchema(schema);
+
+    const inlineGroup = container.querySelector(
+      '[data-control-layout="inline"][data-control-layout-group]',
+    );
+    const stopsList = screen
+      .getByLabelText("Stop 1 position")
+      .closest('[data-slot="gradient-stops-list"]');
+    const gradientSection = stopsList?.closest("section");
+    const modeSection = screen.getByText("Mode").closest("section");
+
+    expect(inlineGroup).toBeNull();
+    expect(stopsList?.closest("[data-control-item-compound-context]")).toBeNull();
+    expect(gradientSection).not.toBe(modeSection);
+  });
+});