@pixel-point/toolcraft 0.0.7 → 0.0.9

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

@@ -7,6 +7,7 @@ import {
   getColorSurfaceStyle,
   getColorSurfaceThumbPosition,
   getSurfaceHsvColor,
+  StyleGuideColorPicker,
 } from "@repo/ui/controls";
 import * as React from "react";
 import { afterEach, beforeAll, describe, expect, it, vi } from "vitest";
@@ -248,6 +249,9 @@ function StateProbe() {
         {state.canvas.size.width},{state.canvas.size.height}
       </span>
       <span data-testid="media-count">{state.mediaAssets.length}</span>
+      <span data-testid="media-ids">
+        {state.mediaAssets.map((asset) => asset.id).join(",")}
+      </span>
       <span data-testid="timeline-expanded">{String(state.timeline.expanded)}</span>
       <span data-testid="timeline-keyframes">
         {JSON.stringify(state.timeline.keyframeGroups)}
@@ -384,6 +388,89 @@ describe("ControlsPanel", () => {
     expect(inlineGroup?.textContent).toContain("Snap Y");
   });
 
+  it("renders local action buttons as a two-column grid below their label", () => {
+    const schema = defineToolcraft({
+      canvas: { enabled: false },
+      panels: {
+        controls: {
+          sections: [
+            {
+              controls: {
+                masks: {
+                  actions: [
+                    { label: "Rect", value: "mask.add.rectangle" },
+                    { label: "Circle", value: "mask.add.circle" },
+                    { label: "Tri", value: "mask.add.triangle" },
+                    { label: "Delete", value: "mask.delete" },
+                  ],
+                  defaultValue: [],
+                  label: "Masks",
+                  target: "composition.masks",
+                  type: "actions",
+                },
+              },
+              title: "Composition",
+            },
+          ],
+          title: "Controls",
+        },
+      },
+    });
+    const { container } = renderControlsPanelWithSchema(schema);
+    const actionField = container.querySelector('[data-slot="actions-control"]');
+    const actionButtons = container.querySelector(
+      '[data-slot="actions-control-buttons"]',
+    );
+
+    expect(actionField?.getAttribute("data-orientation")).toBe("vertical");
+    expect(actionField?.className).not.toContain("justify-between");
+    expect(actionButtons?.className).toContain("grid");
+    expect(actionButtons?.className).toContain("w-full");
+    expect(actionButtons?.className).toContain("grid-cols-2");
+    expect(actionButtons?.className).not.toContain("justify-start");
+    expect(actionButtons?.className).not.toContain("ml-auto");
+    for (const label of ["Rect", "Circle", "Tri", "Delete"]) {
+      expect(screen.getByRole("button", { name: label }).className).toContain(
+        "w-full",
+      );
+    }
+  });
+
+  it("keeps a single local action button at half row width", () => {
+    const schema = defineToolcraft({
+      canvas: { enabled: false },
+      panels: {
+        controls: {
+          sections: [
+            {
+              controls: {
+                paletteActions: {
+                  actions: [{ label: "Randomize", value: "palette.randomize" }],
+                  defaultValue: null,
+                  label: "Actions",
+                  target: "palette.actions",
+                  type: "actions",
+                },
+              },
+              title: "Palette",
+            },
+          ],
+          title: "Controls",
+        },
+      },
+    });
+    const { container } = renderControlsPanelWithSchema(schema);
+    const actionButtons = container.querySelector<HTMLElement>(
+      '[data-slot="actions-control-buttons"]',
+    );
+    const button = screen.getByRole("button", { name: "Randomize" });
+
+    expect(actionButtons?.getAttribute("data-actions-count")).toBe("1");
+    expect(actionButtons?.className).toContain("w-1/2");
+    expect(actionButtons?.className).toContain("grid-cols-1");
+    expect(button.className).toContain("w-full");
+  });
+
   it("renders the managed background toggle plus unlabeled color row as equal-width inline columns", () => {
     const schema = defineToolcraft({
       canvas: { enabled: false },
@@ -431,6 +518,7 @@ describe("ControlsPanel", () => {
     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))",
     );
@@ -448,35 +536,35 @@ describe("ControlsPanel", () => {
                   defaultValue: { hex: "#DFFF1A" },
                   description: "Sets the first bead color.",
                   label: "Color 1",
-                  target: "beads.color1",
+                  target: "palette.accent1",
                   type: "color",
                 },
                 color2: {
                   defaultValue: { hex: "#8CFF3A" },
                   description: "Sets the second bead color.",
                   label: "Color 2",
-                  target: "beads.color2",
+                  target: "palette.accent2",
                   type: "color",
                 },
                 color3: {
                   defaultValue: { hex: "#F4FF5A" },
                   description: "Sets the third bead color.",
                   label: "Color 3",
-                  target: "beads.color3",
+                  target: "palette.accent3",
                   type: "color",
                 },
                 color4: {
                   defaultValue: { hex: "#B8FF2E" },
                   description: "Sets the fourth bead color.",
                   label: "Color 4",
-                  target: "beads.color4",
+                  target: "palette.accent4",
                   type: "color",
                 },
                 color5: {
                   defaultValue: { hex: "#ECFF68" },
                   description: "Sets the fifth bead color.",
                   label: "Color 5",
-                  target: "beads.color5",
+                  target: "palette.accent5",
                   type: "color",
                 },
                 colorSpread: {
@@ -486,7 +574,7 @@ describe("ControlsPanel", () => {
                   label: "Spread",
                   max: 100,
                   min: 0,
-                  target: "beads.colorSpread",
+                  target: "palette.spread",
                   type: "slider",
                   unit: "%",
                 },
@@ -503,7 +591,7 @@ describe("ControlsPanel", () => {
                   layout: "inline",
                 },
               ],
-              title: "Bead Colors",
+              title: "Accent Shades",
             },
             {
               controls: {
@@ -573,13 +661,62 @@ describe("ControlsPanel", () => {
     );
 
     expect(screen.getByText("Loop")).toBeTruthy();
-    expect(screen.getByText("Duration")).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("renders compact select pairs inline with stacked full-width fields", () => {
     const schema = defineToolcraft({
       canvas: { enabled: false },
@@ -634,6 +771,7 @@ describe("ControlsPanel", () => {
     );
 
     expect(inlineGroup).toBeTruthy();
+    expect(inlineGroup?.className).toContain("gap-x-2.5");
     expect(screen.getByText("Format")).toBeTruthy();
     expect(screen.getByText("Resolution")).toBeTruthy();
     expect(triggers).toHaveLength(2);
@@ -1102,7 +1240,6 @@ describe("ControlsPanel", () => {
               controls: {
                 font: {
                   defaultValue: {
-                    color: "#FFFFFF",
                     fontId: "inter",
                     fontSize: 16,
                     fontWeight: "400",
@@ -1487,6 +1624,246 @@ describe("ControlsPanel", () => {
       "toneBias",
       "default",
     ]);
+    expect(
+      [...container.querySelectorAll("[data-vector-pad-coordinate-mode]")].map((pad) =>
+        pad.getAttribute("data-vector-pad-coordinate-mode"),
+      ),
+    ).toEqual([
+      "cartesian",
+      "cartesian",
+      "cartesian",
+      "cartesian",
+      "screen",
+    ]);
+  });
+
+  it("maps default spatial vector pad movement to screen coordinates", () => {
+    const schema = defineToolcraft({
+      canvas: { enabled: true },
+      panels: {
+        controls: {
+          sections: [
+            {
+              controls: {
+                position: {
+                  defaultValue: { x: "0.00", y: "0.00" },
+                  label: "Position",
+                  target: "geometry.position",
+                  type: "vector",
+                },
+              },
+              title: "Geometry",
+            },
+          ],
+          title: "Controls",
+        },
+      },
+    });
+
+    renderControlsPanelWithSchema(schema);
+    const pad = screen.getByRole("button", { name: "Position X/Y pad" });
+
+    expect(pad.getAttribute("data-vector-pad-coordinate-mode")).toBe("screen");
+    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,
+    });
+
+    const values = JSON.parse(screen.getByTestId("values-json").textContent ?? "{}");
+    expect(values["geometry.position"]).toEqual({ x: "-1.00", y: "-1.00" });
+  });
+
+  it("locks vector pad movement to the dominant axis while shift is held", () => {
+    const schema = defineToolcraft({
+      canvas: { enabled: true },
+      panels: {
+        controls: {
+          sections: [
+            {
+              controls: {
+                position: {
+                  defaultValue: { x: "0.00", y: "0.00" },
+                  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: 50,
+      clientY: 50,
+      pointerId: 1,
+    });
+    fireEvent.pointerMove(pad, {
+      buttons: 1,
+      clientX: 90,
+      clientY: 70,
+      pointerId: 1,
+      shiftKey: true,
+    });
+
+    const values = JSON.parse(screen.getByTestId("values-json").textContent ?? "{}");
+    expect(values["geometry.position"]).toEqual({ x: "0.80", y: "0.00" });
+  });
+
+  it("locks vector pad movement vertically when shift drag is y-dominant", () => {
+    const schema = defineToolcraft({
+      canvas: { enabled: true },
+      panels: {
+        controls: {
+          sections: [
+            {
+              controls: {
+                position: {
+                  defaultValue: { x: "0.00", y: "0.00" },
+                  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: 50,
+      clientY: 50,
+      pointerId: 1,
+    });
+    fireEvent.pointerMove(pad, {
+      buttons: 1,
+      clientX: 70,
+      clientY: 90,
+      pointerId: 1,
+      shiftKey: true,
+    });
+
+    const values = JSON.parse(screen.getByTestId("values-json").textContent ?? "{}");
+    expect(values["geometry.position"]).toEqual({ x: "0.00", y: "0.80" });
+  });
+
+  it("allows cartesian vector pads when a product intentionally uses y-up math", () => {
+    const schema = defineToolcraft({
+      canvas: { enabled: true },
+      panels: {
+        controls: {
+          sections: [
+            {
+              controls: {
+                vector: {
+                  coordinateMode: "cartesian",
+                  defaultValue: { x: "0.00", y: "0.00" },
+                  label: "Vector",
+                  target: "math.vector",
+                  type: "vector",
+                },
+              },
+              title: "Math",
+            },
+          ],
+          title: "Controls",
+        },
+      },
+    });
+
+    renderControlsPanelWithSchema(schema);
+    const pad = screen.getByRole("button", { name: "Vector X/Y pad" });
+
+    expect(pad.getAttribute("data-vector-pad-coordinate-mode")).toBe("cartesian");
+    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,
+    });
+
+    const values = JSON.parse(screen.getByTestId("values-json").textContent ?? "{}");
+    expect(values["math.vector"]).toEqual({ x: "-1.00", y: "1.00" });
   });
 
   it("keeps explanatory label text in the native title instead of the visible label", () => {
@@ -1716,7 +2093,6 @@ describe("ControlsPanel", () => {
                   step: 0.1,
                   target: "animation.speed",
                   type: "slider",
-                  unit: "x",
                 },
               },
               layoutGroups: [
@@ -1743,7 +2119,7 @@ describe("ControlsPanel", () => {
     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");
+    expect(container.textContent).toContain("3.7");
   });
 
   it("passes schema disabled state into slider controls", () => {
@@ -2501,6 +2877,22 @@ 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");
+
+    const firstPreview = screen
+      .getByRole("img", { name: "one.svg" })
+      .closest<HTMLElement>('[data-slot="file-upload-preview-item"]');
+    const secondPreview = screen
+      .getByRole("img", { name: "two.svg" })
+      .closest<HTMLElement>('[data-slot="file-upload-preview-item"]');
+
+    if (!firstPreview || !secondPreview) {
+      throw new Error("Expected multi-image previews to render");
+    }
+
+    expect(firstPreview.getAttribute("role")).toBe("button");
+    expect(firstPreview.getAttribute("tabindex")).toBe("0");
+    expect(firstPreview.className).toContain("cursor-grab");
 
     fireEvent.click(screen.getByRole("button", { name: "Remove two.svg" }));
 
@@ -2508,6 +2900,118 @@ describe("ControlsPanel", () => {
     expect(screen.queryByRole("img", { name: "two.svg" })).toBeNull();
   });
 
+  it("renders arbitrary file uploads as a sortable file list", () => {
+    const schema = defineToolcraft({
+      canvas: { enabled: true, upload: true },
+      panels: {
+        controls: {
+          sections: [
+            {
+              controls: {
+                source: {
+                  assetKind: "file",
+                  label: "Files",
+                  multiple: true,
+                  target: "input.files",
+                  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: [
+        {
+          assetKind: "file",
+          dataUrl: "data:text/plain;base64,b25l",
+          fileName: "one.txt",
+          id: "media-1",
+          layerId: "layer-1",
+          mimeType: "text/plain",
+          position: { x: 0, y: 0 },
+          sourceTarget: "input.files",
+        },
+        {
+          assetKind: "file",
+          dataUrl: "data:application/json;base64,e30=",
+          fileName: "two.json",
+          id: "media-2",
+          layerId: "layer-2",
+          mimeType: "application/json",
+          position: { x: 0, y: 0 },
+          sourceTarget: "input.files",
+        },
+      ],
+      selectedLayerId: "layer-2",
+    });
+
+    const fileList = container.querySelector('[data-slot="file-upload-file-list"]');
+    const fileRows = container.querySelectorAll('[data-slot="file-upload-file-item"]');
+    const fileDividers = container.querySelectorAll('[data-slot="file-upload-file-divider"]');
+
+    expect(fileList).toBeTruthy();
+    expect(fileRows).toHaveLength(2);
+    expect(fileDividers).toHaveLength(2);
+    expect(screen.getByText("one.txt")).toBeTruthy();
+    expect(screen.getByText("two.json")).toBeTruthy();
+    expect(screen.getByText("one.txt").className).toContain("text-xs");
+    expect(screen.getByText("one.txt").className).not.toContain("truncate");
+    expect(screen.getByText("one.txt").className).toContain("mask-image");
+    expect(screen.getByRole("button", { name: "Remove one.txt" })).toBeTruthy();
+    expect(screen.getByRole("button", { name: "Add a new file" })).toBeTruthy();
+    expect(fileRows[0]?.className).not.toContain("border-b");
+    expect(fileRows[0]?.className).toContain("hover:bg");
+    expect(fileDividers[0]?.className).toContain("var(--border)_5%");
+    expect(fileRows[0]?.getAttribute("role")).toBe("button");
+    expect(fileRows[0]?.getAttribute("tabindex")).toBe("0");
+
+    fireEvent.click(screen.getByRole("button", { name: "Remove two.json" }));
+
+    expect(screen.getByTestId("media-count").textContent).toBe("1");
+    expect(screen.queryByText("two.json")).toBeNull();
+  });
+
+  it("renders the arbitrary file uploader empty state", () => {
+    const schema = defineToolcraft({
+      canvas: { enabled: true, upload: true },
+      panels: {
+        controls: {
+          sections: [
+            {
+              controls: {
+                source: {
+                  assetKind: "file",
+                  label: "Files",
+                  target: "input.files",
+                  type: "fileDrop",
+                },
+              },
+              layout: "standalone",
+              title: "Input",
+            },
+          ],
+          title: "Generation Controls",
+        },
+      },
+    });
+
+    renderControlsPanelWithSchema(schema);
+
+    expect(screen.getByText("Click to upload a file")).toBeTruthy();
+    expect(screen.getByText("or drag it onto the canvas")).toBeTruthy();
+    expect(screen.queryByText("Click to upload an image")).toBeNull();
+  });
+
   it("keeps file upload deletion in the layers panel for multi-layer apps", () => {
     const schema = defineToolcraft({
       canvas: { enabled: true, upload: true },
@@ -2574,6 +3078,65 @@ describe("ControlsPanel", () => {
     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 },
@@ -2715,6 +3278,35 @@ describe("ControlsPanel", () => {
     });
   });
 
+  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("keeps two color opacity controls stacked even when an inline row is requested", () => {
     const schema = defineToolcraft({
       canvas: { enabled: true },
@@ -3187,19 +3779,17 @@ describe("ControlsPanel", () => {
     expect(gradientControlItem?.className).toContain(
       "has-data-[control-section-divider=compound]:after:inset-x-3",
     );
-    expect(fontControlItem?.dataset.controlItemCompoundDividerPlacement).toBe(
-      "both",
-    );
+    expect(fontControlItem?.dataset.controlItemCompoundDividerPlacement).toBe("top");
     expect(fontControlItem?.className).toContain(
       "has-data-[control-section-divider=compound]:pt-[18px]",
     );
-    expect(fontControlItem?.className).toContain(
+    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).toContain(
+    expect(fontControlItem?.className).not.toContain(
       "has-data-[control-section-divider=compound]:after:inset-x-3",
     );
   });
@@ -3341,6 +3931,54 @@ describe("ControlsPanel", () => {
     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");
+  });
+
   it("renders collection actions as add/remove controls for runtime item arrays", () => {
     const schema = defineToolcraft({
       canvas: { enabled: false },
@@ -3449,6 +4087,101 @@ describe("ControlsPanel", () => {
     expect(screen.getByDisplayValue("New label")).toBeTruthy();
   });
 
+  it("keeps a collection font picker color popover open while editing its color surface", async () => {
+    const schema = defineToolcraft({
+      canvas: { enabled: false },
+      panels: {
+        controls: {
+          sections: [
+            {
+              controls: {
+                textStyles: {
+                  defaultValue: [
+                    {
+                      color: "#FFFFFF",
+                      fontId: "inter",
+                      fontSize: 16,
+                      fontWeight: "400",
+                      letterSpacing: "normal",
+                      lineHeight: "normal",
+                      opacity: 100,
+                      textCase: "original",
+                    },
+                  ],
+                  itemControl: {
+                    defaultValue: {
+                      color: "#FFFFFF",
+                      fontId: "inter",
+                      fontSize: 16,
+                      fontWeight: "400",
+                      letterSpacing: "normal",
+                      lineHeight: "normal",
+                      opacity: 100,
+                      textCase: "original",
+                    },
+                    label: "Font",
+                    type: "fontPicker",
+                  },
+                  label: "Text styles",
+                  minItems: 1,
+                  target: "text.styles",
+                  type: "collectionActions",
+                },
+              },
+              title: "Typography",
+            },
+          ],
+          title: "Controls",
+        },
+      },
+    });
+
+    const { container } = renderControlsPanelWithSchema(schema);
+
+    fireEvent.click(screen.getByRole("button", { name: "Pick Color" }));
+
+    const surface = await waitFor(() => {
+      const nextSurface = container.ownerDocument.body.querySelector<HTMLElement>(
+        '[data-slot="style-guide-color-surface"]',
+      );
+      if (!nextSurface) {
+        throw new Error("Expected color surface to be open.");
+      }
+      return nextSurface;
+    });
+
+    const surfaceRect = {
+      bottom: 100,
+      height: 100,
+      left: 0,
+      right: 100,
+      toJSON: () => ({}),
+      top: 0,
+      width: 100,
+      x: 0,
+      y: 0,
+    } as DOMRect;
+    Object.defineProperty(surface, "getBoundingClientRect", {
+      configurable: true,
+      value: () => surfaceRect,
+    });
+
+    fireEvent.pointerDown(surface, {
+      buttons: 1,
+      clientX: 72,
+      clientY: 28,
+      pointerId: 1,
+    });
+
+    expect(
+      container.ownerDocument.body.querySelector('[data-slot="style-guide-color-surface"]'),
+    ).toBeTruthy();
+
+    const values = JSON.parse(screen.getByTestId("values-json").textContent ?? "{}");
+
+    expect(values["text.styles"][0].color).not.toBe("#FFFFFF");
+  });
+
   it("commits canvas size controls to runtime state on blur or Enter", () => {
     const { container } = renderControlsPanel();
 
@@ -3576,7 +4309,7 @@ describe("ControlsPanel", () => {
     const values = JSON.parse(screen.getByTestId("values-json").textContent ?? "{}");
 
     expect(screen.getByText("Resolution scale")).toBeTruthy();
-    expect(screen.getByText("2x")).toBeTruthy();
+    expect(screen.getByText("2")).toBeTruthy();
     expect(values["canvas.renderScale"]).toBe(2);
   });
 
@@ -4017,6 +4750,30 @@ describe("ControlsPanel", () => {
     expect(container.querySelector('[data-slot="control-section-header"]')).toBeTruthy();
   });
 
+  it("suppresses child control transitions when a section re-expands", () => {
+    const schema = createSchema();
+    renderControlsPanelWithSchema(schema);
+    const basicTitle = screen.getByText("Basic");
+    const header = basicTitle.closest<HTMLElement>('[data-slot="control-section-header"]');
+    const section = basicTitle.closest("section");
+    const initialBody = section?.querySelector<HTMLElement>(
+      '[data-slot="panel-section-collapsible-body"]',
+    );
+
+    fireEvent.click(header!);
+    fireEvent.transitionEnd(initialBody!);
+    fireEvent.click(header!);
+
+    const expandedBody = section?.querySelector<HTMLElement>(
+      '[data-slot="panel-section-collapsible-body"]',
+    );
+    const innerControls = expandedBody?.firstElementChild as HTMLElement | null;
+
+    expect(expandedBody?.className).toContain("transition-[grid-template-rows,opacity]");
+    expect(expandedBody?.className).toContain("grid-rows-[1fr]");
+    expect(innerControls?.getAttribute("data-toolcraft-controls-mounting")).toBe("true");
+  });
+
   it("persists ordinary section collapse state as a UI preference across remounts", () => {
     const schema = createSchema();
     const { unmount } = renderControlsPanelWithSchema(schema);