@pixel-point/toolcraft 0.0.8 → 0.0.11

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

@@ -1,4 +1,4 @@
-import { act, cleanup, fireEvent, render, screen, waitFor } from "@testing-library/react";
+import { act, cleanup, createEvent, fireEvent, render, screen, waitFor } from "@testing-library/react";
 import { FileDrop, Panel } from "@repo/ui";
 import {
   DEFAULT_COLOR_FORMAT_MODE,
@@ -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";
@@ -53,18 +54,6 @@ function createSchema() {
         sections: [
           {
             controls: {
-              canvasHeight: {
-                defaultValue: 180,
-                label: "Canvas height",
-                target: "canvas.size.height",
-                type: "text",
-              },
-              canvasWidth: {
-                defaultValue: 320,
-                label: "Canvas width",
-                target: "canvas.size.width",
-                type: "text",
-              },
               prompt: {
                 defaultValue: "Initial prompt",
                 description: "Describe the generated result.",
@@ -108,13 +97,6 @@ function createSchema() {
                 type: "switch",
               },
             },
-            layoutGroups: [
-              {
-                columns: 2,
-                controls: ["canvasWidth", "canvasHeight"],
-                layout: "inline",
-              },
-            ],
             title: "Basic",
           },
           {
@@ -251,7 +233,19 @@ function StateProbe() {
       <span data-testid="media-ids">
         {state.mediaAssets.map((asset) => asset.id).join(",")}
       </span>
+      <span data-testid="media-sizes">
+        {state.mediaAssets
+          .map((asset) =>
+            asset.size ? `${asset.size.width}x${asset.size.height}` : "none",
+          )
+          .join(",")}
+      </span>
+      <span data-testid="media-transforms">
+        {JSON.stringify(state.mediaAssets.map((asset) => asset.transform ?? null))}
+      </span>
       <span data-testid="timeline-expanded">{String(state.timeline.expanded)}</span>
+      <span data-testid="timeline-panel-extended">{String(state.panels.timeline.extended)}</span>
+      <span data-testid="timeline-panel-hidden">{String(state.panels.timeline.hidden)}</span>
       <span data-testid="timeline-keyframes">
         {JSON.stringify(state.timeline.keyframeGroups)}
       </span>
@@ -387,7 +381,43 @@ describe("ControlsPanel", () => {
     expect(inlineGroup?.textContent).toContain("Snap Y");
   });
 
-  it("keeps wrapped local action buttons left aligned below their label", () => {
+  it("commits palette family and shade changes to runtime state immediately", () => {
+    const schema = defineToolcraft({
+      canvas: { enabled: false },
+      panels: {
+        controls: {
+          sections: [
+            {
+              controls: {
+                inkPalette: {
+                  defaultValue: { family: "Slate", shade: "900" },
+                  label: "Palette",
+                  target: "ink.palette",
+                  type: "palette",
+                },
+              },
+              title: "Ink",
+            },
+          ],
+          title: "Controls",
+        },
+      },
+    });
+
+    renderControlsPanelWithSchema(schema);
+
+    fireEvent.click(screen.getByRole("button", { name: "Primary family Red" }));
+    let values = JSON.parse(screen.getByTestId("values-json").textContent ?? "{}");
+
+    expect(values["ink.palette"]).toEqual({ family: "Red", shade: "900" });
+
+    fireEvent.click(screen.getByRole("button", { name: "Primary shade 500" }));
+    values = JSON.parse(screen.getByTestId("values-json").textContent ?? "{}");
+
+    expect(values["ink.palette"]).toEqual({ family: "Red", shade: "500" });
+  });
+
+  it("renders local action buttons as a two-column grid below their label", () => {
     const schema = defineToolcraft({
       canvas: { enabled: false },
       panels: {
@@ -421,10 +451,53 @@ describe("ControlsPanel", () => {
       '[data-slot="actions-control-buttons"]',
     );
 
-    expect(actionField?.className).toContain("justify-between");
-    expect(actionField?.className).toContain("flex-wrap");
-    expect(actionButtons?.className).toContain("justify-start");
+    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", () => {
@@ -474,6 +547,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))",
     );
@@ -616,13 +690,100 @@ 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 standalone select controls stacked full-width instead of compact side-label rows", () => {
+    const schema = defineToolcraft({
+      canvas: { enabled: false },
+      panels: {
+        controls: {
+          sections: [
+            {
+              controls: {
+                shape: {
+                  defaultValue: "pill",
+                  label: "Shape",
+                  options: [
+                    { label: "Pill", value: "pill" },
+                    { label: "Circle", value: "circle" },
+                  ],
+                  target: "glass.shape",
+                  type: "select",
+                },
+              },
+              title: "Glass",
+            },
+          ],
+          title: "Controls",
+        },
+      },
+    });
+
+    renderControlsPanelWithSchema(schema);
+    const trigger = screen.getByRole("combobox");
+    const field = trigger.closest<HTMLElement>('[data-slot="field"]');
+
+    expect(screen.getByText("Shape")).toBeTruthy();
+    expect(trigger.textContent).toContain("Pill");
+    expect(field?.dataset.orientation).toBe("vertical");
+    expect(field?.className).toContain("gap-2");
+    expect(trigger.closest("div")?.className).toContain("w-full");
+  });
+
   it("renders compact select pairs inline with stacked full-width fields", () => {
     const schema = defineToolcraft({
       canvas: { enabled: false },
@@ -677,6 +838,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);
@@ -1417,16 +1579,399 @@ describe("ControlsPanel", () => {
       },
     });
 
-    const { container } = renderControlsPanelWithSchema(schema);
+    const { container } = renderControlsPanelWithSchema(schema);
+
+    expect(
+      container
+        .querySelector('[aria-label="Position X/Y pad"]')
+        ?.getAttribute("data-vector-pad-shape"),
+    ).toBe("square");
+  });
+
+  it("keeps compact vector pads when the panel has multiple vector controls", () => {
+    const schema = defineToolcraft({
+      canvas: { enabled: true },
+      panels: {
+        controls: {
+          sections: [
+            {
+              controls: {
+                origin: {
+                  defaultValue: { x: "0.00", y: "0.00" },
+                  label: "Origin",
+                  target: "geometry.origin",
+                  type: "vector",
+                },
+                target: {
+                  defaultValue: { x: "0.50", y: "-0.50" },
+                  label: "Target",
+                  target: "geometry.target",
+                  type: "vector",
+                },
+              },
+              title: "Geometry",
+            },
+          ],
+          title: "Controls",
+        },
+      },
+    });
+
+    const { container } = renderControlsPanelWithSchema(schema);
+
+    expect(
+      [...container.querySelectorAll("[data-vector-pad-shape]")].map((pad) =>
+        pad.getAttribute("data-vector-pad-shape"),
+      ),
+    ).toEqual(["compact", "compact"]);
+  });
+
+  it("passes supported vector pad variants from schema to the vector pad", () => {
+    const schema = defineToolcraft({
+      canvas: { enabled: true },
+      panels: {
+        controls: {
+          sections: [
+            {
+              controls: {
+                whiteBalance: {
+                  defaultValue: { x: "0.00", y: "0.00" },
+                  label: "White Balance",
+                  target: "color.whiteBalance",
+                  type: "vector",
+                  variant: "whiteBalance",
+                },
+                colorBalance: {
+                  defaultValue: { x: "0.00", y: "0.00" },
+                  label: "Color Balance",
+                  target: "color.balance",
+                  type: "vector",
+                  variant: "colorBalance",
+                },
+                chromaOffset: {
+                  defaultValue: { x: "0.00", y: "0.00" },
+                  label: "Chroma Offset",
+                  target: "effect.chromaOffset",
+                  type: "vector",
+                  variant: "chromaOffset",
+                },
+                toneBias: {
+                  defaultValue: { x: "0.00", y: "0.00" },
+                  label: "Tone Bias",
+                  target: "tone.bias",
+                  type: "vector",
+                  variant: "toneBias",
+                },
+                unknown: {
+                  defaultValue: { x: "0.00", y: "0.00" },
+                  label: "Unknown",
+                  target: "effect.unknown",
+                  type: "vector",
+                  variant: "unknown",
+                },
+              },
+              title: "Color",
+            },
+          ],
+          title: "Controls",
+        },
+      },
+    });
+
+    const { container } = renderControlsPanelWithSchema(schema);
+
+    expect(
+      [...container.querySelectorAll("[data-vector-pad-variant]")].map((pad) =>
+        pad.getAttribute("data-vector-pad-variant"),
+      ),
+    ).toEqual([
+      "whiteBalance",
+      "colorBalance",
+      "chromaOffset",
+      "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("resets a vector pad to its default value on double click", () => {
+    const schema = defineToolcraft({
+      canvas: { enabled: true },
+      panels: {
+        controls: {
+          sections: [
+            {
+              controls: {
+                position: {
+                  defaultValue: { x: "0.48", y: "-0.34" },
+                  label: "Position",
+                  target: "geometry.position",
+                  type: "vector",
+                },
+              },
+              title: "Geometry",
+            },
+          ],
+          title: "Controls",
+        },
+      },
+    });
+
+    renderControlsPanelWithSchema(schema);
+    const pad = screen.getByRole("button", { name: "Position X/Y pad" });
+
+    vi.spyOn(pad, "getBoundingClientRect").mockReturnValue({
+      bottom: 100,
+      height: 100,
+      left: 0,
+      right: 100,
+      toJSON: () => undefined,
+      top: 0,
+      width: 100,
+      x: 0,
+      y: 0,
+    } as DOMRect);
+    Object.defineProperty(pad, "setPointerCapture", {
+      configurable: true,
+      value: vi.fn(),
+    });
+
+    fireEvent.pointerDown(pad, {
+      buttons: 1,
+      clientX: 0,
+      clientY: 0,
+      pointerId: 1,
+    });
+    expect(
+      JSON.parse(screen.getByTestId("values-json").textContent ?? "{}")[
+        "geometry.position"
+      ],
+    ).toEqual({ x: "-1.00", y: "-1.00" });
+
+    fireEvent.doubleClick(pad);
+
+    const values = JSON.parse(screen.getByTestId("values-json").textContent ?? "{}");
+    expect(values["geometry.position"]).toEqual({ x: "0.48", y: "-0.34" });
+    expect(screen.getByText("0.48, -0.34")).toBeTruthy();
+  });
+
+  it("locks vector pad movement to the dominant axis while shift is held", () => {
+    const schema = defineToolcraft({
+      canvas: { enabled: true },
+      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("renders vector pad values as compact rounded coordinates", () => {
+    const schema = defineToolcraft({
+      canvas: { enabled: true },
+      panels: {
+        controls: {
+          sections: [
+            {
+              controls: {
+                center: {
+                  defaultValue: {
+                    x: "-0.07070312499999998",
+                    y: "-0.00392795138",
+                  },
+                  label: "Center",
+                  target: "geometry.center",
+                  type: "vector",
+                },
+              },
+              title: "Geometry",
+            },
+          ],
+          title: "Controls",
+        },
+      },
+    });
+
+    renderControlsPanelWithSchema(schema);
 
-    expect(
-      container
-        .querySelector('[aria-label="Position X/Y pad"]')
-        ?.getAttribute("data-vector-pad-shape"),
-    ).toBe("square");
+    expect(screen.getByText("-0.07, 0.00")).toBeTruthy();
+    expect(screen.queryByText("-0.07070312499999998, -0.00392795138")).toBeNull();
   });
 
-  it("keeps compact vector pads when the panel has multiple vector controls", () => {
+  it("prevents native text selection while dragging a vector pad", () => {
     const schema = defineToolcraft({
       canvas: { enabled: true },
       panels: {
@@ -1434,16 +1979,10 @@ describe("ControlsPanel", () => {
           sections: [
             {
               controls: {
-                origin: {
+                center: {
                   defaultValue: { x: "0.00", y: "0.00" },
-                  label: "Origin",
-                  target: "geometry.origin",
-                  type: "vector",
-                },
-                target: {
-                  defaultValue: { x: "0.50", y: "-0.50" },
-                  label: "Target",
-                  target: "geometry.target",
+                  label: "Center",
+                  target: "geometry.center",
                   type: "vector",
                 },
               },
@@ -1455,16 +1994,39 @@ describe("ControlsPanel", () => {
       },
     });
 
-    const { container } = renderControlsPanelWithSchema(schema);
+    renderControlsPanelWithSchema(schema);
+    const pad = screen.getByRole("button", { name: "Center X/Y pad" });
 
-    expect(
-      [...container.querySelectorAll("[data-vector-pad-shape]")].map((pad) =>
-        pad.getAttribute("data-vector-pad-shape"),
-      ),
-    ).toEqual(["compact", "compact"]);
+    vi.spyOn(pad, "getBoundingClientRect").mockReturnValue({
+      bottom: 100,
+      height: 100,
+      left: 0,
+      right: 100,
+      toJSON: () => undefined,
+      top: 0,
+      width: 100,
+      x: 0,
+      y: 0,
+    } as DOMRect);
+    Object.defineProperty(pad, "setPointerCapture", {
+      configurable: true,
+      value: vi.fn(),
+    });
+
+    const pointerDown = createEvent.pointerDown(pad, {
+      buttons: 1,
+      clientX: 50,
+      clientY: 50,
+      pointerId: 1,
+    });
+
+    fireEvent(pad, pointerDown);
+
+    expect(pointerDown.defaultPrevented).toBe(true);
+    expect(pad.className).toContain("select-none");
   });
 
-  it("passes supported vector pad variants from schema to the vector pad", () => {
+  it("allows cartesian vector pads when a product intentionally uses y-up math", () => {
     const schema = defineToolcraft({
       canvas: { enabled: true },
       panels: {
@@ -1472,43 +2034,15 @@ describe("ControlsPanel", () => {
           sections: [
             {
               controls: {
-                whiteBalance: {
-                  defaultValue: { x: "0.00", y: "0.00" },
-                  label: "White Balance",
-                  target: "color.whiteBalance",
-                  type: "vector",
-                  variant: "whiteBalance",
-                },
-                colorBalance: {
-                  defaultValue: { x: "0.00", y: "0.00" },
-                  label: "Color Balance",
-                  target: "color.balance",
-                  type: "vector",
-                  variant: "colorBalance",
-                },
-                chromaOffset: {
-                  defaultValue: { x: "0.00", y: "0.00" },
-                  label: "Chroma Offset",
-                  target: "effect.chromaOffset",
-                  type: "vector",
-                  variant: "chromaOffset",
-                },
-                toneBias: {
-                  defaultValue: { x: "0.00", y: "0.00" },
-                  label: "Tone Bias",
-                  target: "tone.bias",
-                  type: "vector",
-                  variant: "toneBias",
-                },
-                unknown: {
+                vector: {
+                  coordinateMode: "cartesian",
                   defaultValue: { x: "0.00", y: "0.00" },
-                  label: "Unknown",
-                  target: "effect.unknown",
+                  label: "Vector",
+                  target: "math.vector",
                   type: "vector",
-                  variant: "unknown",
                 },
               },
-              title: "Color",
+              title: "Math",
             },
           ],
           title: "Controls",
@@ -1516,19 +2050,35 @@ describe("ControlsPanel", () => {
       },
     });
 
-    const { container } = renderControlsPanelWithSchema(schema);
+    renderControlsPanelWithSchema(schema);
+    const pad = screen.getByRole("button", { name: "Vector X/Y pad" });
 
-    expect(
-      [...container.querySelectorAll("[data-vector-pad-variant]")].map((pad) =>
-        pad.getAttribute("data-vector-pad-variant"),
-      ),
-    ).toEqual([
-      "whiteBalance",
-      "colorBalance",
-      "chromaOffset",
-      "toneBias",
-      "default",
-    ]);
+    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", () => {
@@ -1758,7 +2308,6 @@ describe("ControlsPanel", () => {
                   step: 0.1,
                   target: "animation.speed",
                   type: "slider",
-                  unit: "x",
                 },
               },
               layoutGroups: [
@@ -1785,7 +2334,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", () => {
@@ -2233,9 +2782,12 @@ describe("ControlsPanel", () => {
 
     for (const [draftValue, expectedValue, expectedLabel] of [
       ["0/1", '"shape.range":[0,1]', "0% – 1%"],
+      ["1-6", '"shape.range":[1,6]', "1% – 6%"],
       ["2-3", '"shape.range":[2,3]', "2% – 3%"],
       ["4 - 5", '"shape.range":[4,5]', "4% – 5%"],
       ["6–7", '"shape.range":[6,7]', "6% – 7%"],
+      ["7—8", '"shape.range":[7,8]', "7% – 8%"],
+      ["8−9", '"shape.range":[8,9]', "8% – 9%"],
     ] as const) {
       fireEvent.click(screen.getByRole("button", { name: "Edit Range value" }));
       const editor = screen.getByRole("textbox", { name: "Range value" });
@@ -2374,7 +2926,7 @@ describe("ControlsPanel", () => {
       },
     });
 
-    renderControlsPanelWithSchema(schema, undefined, {
+    const { container } = renderControlsPanelWithSchema(schema, undefined, {
       layers: [
         {
           id: "layer-1",
@@ -2399,9 +2951,66 @@ describe("ControlsPanel", () => {
     });
 
     expect(screen.getByRole("img", { name: "material.svg" })).toBeTruthy();
+    const transformActions = container.querySelector(
+      '[data-slot="actions-control"][aria-label="Image transforms"]',
+    );
+    const transformActionButtons = transformActions?.querySelector(
+      '[data-slot="actions-control-buttons"]',
+    );
+
+    expect(transformActions).toBeTruthy();
+    expect(transformActions?.parentElement?.style.gap).toBe("6px");
+    expect(transformActionButtons?.className).toContain("grid-cols-3");
+    expect(transformActionButtons?.getAttribute("data-actions-columns")).toBe("3");
+    expect(screen.queryByRole("button", { name: "90° Left" })).toBeNull();
+
+    for (const [name, visibleLabel] of [
+      ["90° Right", "90°"],
+      ["Flip horizontal", "Flip H"],
+      ["Flip vertical", "Flip V"],
+    ] as const) {
+      const button = screen.getByRole("button", { name });
+
+      expect(button).toBeTruthy();
+      expect(button.textContent).toContain(visibleLabel);
+    }
     expect(
       screen.queryByText("Click to upload an image"),
     ).toBeNull();
+    const initialPreviewFrameStyle = container
+      .querySelector('[data-slot="file-upload-preview-frame"]')
+      ?.getAttribute("style");
+
+    expect(initialPreviewFrameStyle).toBe(
+      "aspect-ratio: 96 / 64; max-height: 196px; width: 100%;",
+    );
+    expect(screen.getByRole("img", { name: "material.svg" }).getAttribute("style")).toBe(
+      "transform: translate(-50%, -50%);",
+    );
+
+    fireEvent.click(screen.getByRole("button", { name: "90° Right" }));
+    expect(screen.getByTestId("media-transforms").textContent).toBe(
+      '[{"rotationDeg":90}]',
+    );
+    expect(
+      container.querySelector('[data-slot="file-upload-preview-frame"]')?.getAttribute("style"),
+    ).toBe(initialPreviewFrameStyle);
+    expect(screen.getByRole("img", { name: "material.svg" }).getAttribute("style")).toBe(
+      "transform: translate(-50%, -50%) rotate(90deg); width: 66.6667%;",
+    );
+
+    fireEvent.click(screen.getByRole("button", { name: "Flip horizontal" }));
+    expect(screen.getByTestId("media-transforms").textContent).toBe(
+      '[{"rotationDeg":90,"flipHorizontal":true}]',
+    );
+    expect(screen.getByRole("img", { name: "material.svg" }).getAttribute("style")).toBe(
+      "transform: translate(-50%, -50%) rotate(90deg) scale(-1, 1); width: 66.6667%;",
+    );
+
+    fireEvent.click(screen.getByRole("button", { name: "Flip vertical" }));
+    expect(screen.getByTestId("media-transforms").textContent).toBe(
+      '[{"rotationDeg":90,"flipHorizontal":true,"flipVertical":true}]',
+    );
 
     fireEvent.click(screen.getByRole("button", { name: "Remove image" }));
 
@@ -2410,6 +3019,113 @@ describe("ControlsPanel", () => {
     expect(screen.getByText("Click to upload an image")).toBeTruthy();
   });
 
+  it("renders schema default media as a removable fileDrop attachment", () => {
+    const schema = defineToolcraft({
+      canvas: { enabled: true, upload: true },
+      media: {
+        defaultAssets: [
+          {
+            dataUrl:
+              "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='64' viewBox='0 0 96 64'%3E%3Crect width='96' height='64' fill='%23777'/%3E%3C/svg%3E",
+            fileName: "default-background.svg",
+            id: "default-background",
+            layerId: "default-background-layer",
+            mimeType: "image/svg+xml",
+            size: { height: 64, unit: "px", width: 96 },
+            sourceTarget: "input.source",
+          },
+        ],
+      },
+      panels: {
+        controls: {
+          sections: [
+            {
+              controls: {
+                source: {
+                  accept: "PNG, SVG",
+                  label: "Image",
+                  target: "input.source",
+                  type: "fileDrop",
+                },
+              },
+              layout: "standalone",
+              title: "Input",
+            },
+          ],
+          title: "Generation Controls",
+        },
+      },
+    });
+
+    renderControlsPanelWithSchema(schema);
+
+    expect(screen.getByRole("img", { name: "default-background.svg" })).toBeTruthy();
+    expect(screen.getByTestId("media-ids").textContent).toBe("default-background");
+
+    fireEvent.click(screen.getByRole("button", { name: "Remove image" }));
+
+    expect(screen.getByTestId("media-count").textContent).toBe("0");
+    expect(screen.queryByRole("img", { name: "default-background.svg" })).toBeNull();
+    expect(screen.getByText("Click to upload an image")).toBeTruthy();
+
+    fireEvent.click(screen.getByRole("button", { name: "Reset Input section" }));
+
+    expect(screen.getByRole("img", { name: "default-background.svg" })).toBeTruthy();
+    expect(screen.getByTestId("media-count").textContent).toBe("1");
+
+    fireEvent.click(screen.getByRole("button", { name: "Remove image" }));
+    fireEvent.click(screen.getByRole("button", { name: "Reset controls" }));
+
+    expect(screen.getByRole("img", { name: "default-background.svg" })).toBeTruthy();
+    expect(screen.getByTestId("media-count").textContent).toBe("1");
+  });
+
+  it("keeps the current editable canvas size when uploading an image through fileDrop", async () => {
+    const schema = defineToolcraft({
+      canvas: {
+        enabled: true,
+        size: { height: 720, unit: "px", width: 1280 },
+        upload: true,
+      },
+      panels: {
+        controls: {
+          sections: [
+            {
+              controls: {
+                source: {
+                  label: "Image",
+                  target: "input.source",
+                  type: "fileDrop",
+                },
+              },
+              layout: "standalone",
+              title: "Input",
+            },
+          ],
+          title: "Generation Controls",
+        },
+      },
+    });
+    const { container } = renderControlsPanelWithSchema(schema);
+    const input = container.querySelector<HTMLInputElement>('input[type="file"]');
+
+    expect(input).toBeTruthy();
+    expect(screen.getByTestId("canvas-size").textContent).toBe("1280,720");
+
+    fireEvent.change(input as HTMLInputElement, {
+      target: {
+        files: [new File(["image"], "wide.png", { type: "image/png" })],
+      },
+    });
+
+    await waitFor(() => {
+      expect(screen.getByTestId("media-count").textContent).toBe("1");
+    });
+
+    expect(screen.getByTestId("canvas-size").textContent).toBe("1280,720");
+    expect(screen.getByTestId("media-sizes").textContent).toBe("1280x720");
+  });
+
   it("removes single-layer file uploads from the canvas and returns the file control to empty", () => {
     const schema = defineToolcraft({
       canvas: { enabled: true, upload: true },
@@ -2544,6 +3260,7 @@ describe("ControlsPanel", () => {
     expect(screen.getByRole("img", { name: "one.svg" })).toBeTruthy();
     expect(screen.getByRole("img", { name: "two.svg" })).toBeTruthy();
     expect(screen.getByTestId("media-ids").textContent).toBe("media-1,media-2");
+    expect(screen.queryByRole("button", { name: "90° Left" })).toBeNull();
 
     const firstPreview = screen
       .getByRole("img", { name: "one.svg" })
@@ -2560,6 +3277,15 @@ describe("ControlsPanel", () => {
     expect(firstPreview.getAttribute("tabindex")).toBe("0");
     expect(firstPreview.className).toContain("cursor-grab");
 
+    fireEvent.click(firstPreview);
+    expect(firstPreview.getAttribute("data-selected")).toBe("true");
+    expect(screen.getByRole("button", { name: "90° Right" })).toBeTruthy();
+
+    fireEvent.click(screen.getByRole("button", { name: "90° Right" }));
+    expect(screen.getByTestId("media-transforms").textContent).toBe(
+      '[{"rotationDeg":90},null]',
+    );
+
     fireEvent.click(screen.getByRole("button", { name: "Remove two.svg" }));
 
     expect(screen.getByTestId("media-count").textContent).toBe("1");
@@ -2944,6 +3670,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 },
@@ -3416,19 +4171,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",
     );
   });
@@ -3502,7 +4255,10 @@ describe("ControlsPanel", () => {
     fireEvent.change(promptInput, { target: { value: "Updated prompt" } });
     expect(screen.getByTestId("prompt-value").textContent).toBe("Updated prompt");
 
-    fireEvent.click(screen.getByRole("switch"));
+    const enabledField = screen.getByText("Enabled").closest('[role="group"]');
+    const enabledSwitch = enabledField?.querySelector<HTMLElement>('[role="switch"]');
+
+    fireEvent.click(enabledSwitch as HTMLElement);
     expect(screen.getByTestId("enabled-value").textContent).toBe("false");
 
     fireEvent.click(screen.getByRole("button", { name: "Reset controls" }));
@@ -3948,10 +4704,58 @@ 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);
   });
 
+  it("renders timeline extended mode as runtime panel state instead of product values", () => {
+    const schema = defineToolcraft({
+      canvas: {
+        enabled: true,
+        renderScale: true,
+        size: { height: 1080, unit: "px", width: 1920 },
+        sizing: { mode: "editable-output" },
+      },
+      panels: {
+        controls: {
+          sections: [],
+          title: "Controls",
+        },
+        timeline: { mode: "playback" },
+      },
+    });
+
+    renderControlsPanelWithSchema(schema, undefined, {
+      timeline: { currentTimeSeconds: 2, expanded: true, isPlaying: true },
+    });
+
+    const setupText = screen.getByText("Timeline").closest("section")?.textContent ?? "";
+
+    expect(setupText.indexOf("Resolution scale")).toBeLessThan(setupText.indexOf("Timeline"));
+    const timelineField = screen.getByText("Timeline").closest('[role="group"]');
+    const timelineSwitch = timelineField?.querySelector<HTMLElement>('[role="switch"]');
+
+    expect(timelineSwitch?.getAttribute("aria-checked")).toBe("false");
+    expect(screen.getByTestId("timeline-panel-extended").textContent).toBe("undefined");
+    expect(screen.getByTestId("timeline-panel-hidden").textContent).toBe("undefined");
+    expect(screen.getByTestId("timeline-expanded").textContent).toBe("true");
+
+    fireEvent.click(timelineSwitch as HTMLElement);
+
+    expect(timelineSwitch?.getAttribute("aria-checked")).toBe("true");
+    expect(screen.getByTestId("timeline-panel-extended").textContent).toBe("true");
+    expect(screen.getByTestId("timeline-panel-hidden").textContent).toBe("undefined");
+    expect(screen.getByTestId("timeline-expanded").textContent).toBe("true");
+    expect(JSON.parse(screen.getByTestId("values-json").textContent ?? "{}")).not.toHaveProperty(
+      "panels.timeline.extended",
+    );
+
+    fireEvent.click(screen.getByRole("button", { name: "Reset controls" }));
+
+    expect(timelineSwitch?.getAttribute("aria-checked")).toBe("true");
+    expect(screen.getByTestId("timeline-panel-extended").textContent).toBe("true");
+  });
+
   it("applies empty text input values while typing and reset restores defaults", () => {
     renderControlsPanel();
 
@@ -4188,7 +4992,7 @@ describe("ControlsPanel", () => {
     expect(handledActions).toEqual(["download:Generation Controls"]);
   });
 
-  it("renders runtime settings transfer as a body section instead of sticky footer actions", () => {
+  it("renders runtime settings transfer as a headerless body section instead of sticky footer actions", () => {
     const schema = defineToolcraft({
       canvas: { enabled: true, size: { height: 720, unit: "px", width: 1280 } },
       panels: {
@@ -4252,10 +5056,12 @@ describe("ControlsPanel", () => {
     ).not.toContain("Setup");
     expect(firstSection?.querySelector('[data-slot="panel-title"]')).toBeNull();
     expect(firstSection?.querySelector("[data-control-section-collapse-button]")).toBeNull();
+    expect(firstSection?.querySelector('[data-slot="control-section-header"]')).toBeNull();
+    expect(firstSection?.querySelector('[data-slot="panel-section-collapsible-body"]')).toBeNull();
+    expect(firstSection?.getAttribute("data-collapsed")).toBeNull();
     expect(firstSection?.className).toContain("py-0");
-    expect(firstSection?.querySelector("[data-control-list]")?.className).toContain("py-3");
-    expect(firstSection?.querySelector("[data-control-list]")?.className).not.toContain("pt-2");
-    expect(firstSection?.querySelector("[data-control-list]")?.className).not.toContain("pb-5");
+    expect(firstSection?.querySelector("[data-control-list]")?.className).toContain("pt-2");
+    expect(firstSection?.querySelector("[data-control-list]")?.className).toContain("pb-6");
     expect(firstInlineGroup?.textContent).toContain("Canvas width");
     expect(firstInlineGroup?.textContent).toContain("Canvas height");
     expect(firstSection?.textContent).toContain("Aspect ratio");
@@ -4497,10 +5303,12 @@ describe("ControlsPanel", () => {
     const stickyFooter = container.querySelector(
       '[data-slot="toolcraft-panel-sticky-actions"]',
     );
+    const exportPngButton = screen.getByRole("button", { name: "Export PNG" });
 
     expect(stickyFooter?.getAttribute("data-sticky-footer-active")).toBeNull();
+    expect(exportPngButton.querySelector('[data-icon-name="upload-simple"]')).toBeTruthy();
 
-    fireEvent.click(screen.getByRole("button", { name: "Export PNG" }));
+    fireEvent.click(exportPngButton);
 
     expect(onPanelAction).toHaveBeenCalledTimes(1);
     await waitFor(() => {