@pixel-point/toolcraft 0.0.8 → 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";
@@ -387,7 +388,7 @@ describe("ControlsPanel", () => {
     expect(inlineGroup?.textContent).toContain("Snap Y");
   });
 
-  it("keeps wrapped local action buttons left aligned below their label", () => {
+  it("renders local action buttons as a two-column grid below their label", () => {
     const schema = defineToolcraft({
       canvas: { enabled: false },
       panels: {
@@ -421,10 +422,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 +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))",
     );
@@ -616,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 },
@@ -677,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);
@@ -1529,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", () => {
@@ -1758,7 +2093,6 @@ describe("ControlsPanel", () => {
                   step: 0.1,
                   target: "animation.speed",
                   type: "slider",
-                  unit: "x",
                 },
               },
               layoutGroups: [
@@ -1785,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", () => {
@@ -2944,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 },
@@ -3416,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",
     );
   });
@@ -3948,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);
   });
 

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

@@ -47,6 +47,7 @@ import {
   type GradientStop,
   type GradientType,
   type ImagePickerItem,
+  type VectorPadCoordinateMode,
   type VectorPadVariant,
 } from "@repo/ui";
 
@@ -421,6 +422,17 @@ function asVectorPadVariant(value: string | undefined): VectorPadVariant {
   return "default";
 }
 
+function asVectorPadCoordinateMode(
+  value: string | undefined,
+  padVariant: VectorPadVariant,
+): VectorPadCoordinateMode {
+  if (value === "cartesian" || value === "screen") {
+    return value;
+  }
+
+  return padVariant === "default" ? "screen" : "cartesian";
+}
+
 function asCurveInterpolation(value: string | undefined): CurveInterpolation | undefined {
   return value === "monotone" || value === "smooth" ? value : undefined;
 }
@@ -1154,6 +1166,15 @@ function hasSliderControl(
   );
 }
 
+function hasSegmentedControl(
+  controlsById: Record<string, ToolcraftControlSchema>,
+  layoutGroup: ToolcraftControlLayoutGroupSchema,
+): boolean {
+  return layoutGroup.controls.some(
+    (controlId) => controlsById[controlId]?.type === "segmented",
+  );
+}
+
 function hasSectionedCompoundControl(
   controlsById: Record<string, ToolcraftControlSchema>,
   layoutGroup: ToolcraftControlLayoutGroupSchema,
@@ -1214,6 +1235,22 @@ function isToggleParameterLayoutGroup(
   return booleanControlCount === 1 && parameterControlCount === 1;
 }
 
+function shouldHideToggleParameterControlLabel({
+  control,
+  controlsById,
+  layoutGroup,
+}: {
+  control: ToolcraftControlSchema;
+  controlsById: Record<string, ToolcraftControlSchema>;
+  layoutGroup: ToolcraftControlLayoutGroupSchema | undefined;
+}): boolean {
+  return Boolean(
+    layoutGroup &&
+      isToggleParameterLayoutGroup(controlsById, layoutGroup) &&
+      !isBooleanControl(control),
+  );
+}
+
 function getControlTargetEntityKey(control: ToolcraftControlSchema): string | null {
   const parts = control.target.split(".");
 
@@ -1409,6 +1446,7 @@ function getInlineLayoutGroupByControlId({
     if (
       hasColorOpacityControl(controlsById, layoutGroup) ||
       hasSliderControl(controlsById, layoutGroup) ||
+      hasSegmentedControl(controlsById, layoutGroup) ||
       hasSectionedCompoundControl(controlsById, layoutGroup) ||
       hasUnsafeInlineSwitchLabels(controlsById, layoutGroup)
     ) {
@@ -1893,6 +1931,10 @@ export function ControlsPanel({
     providerKey: string;
     sectionTitle: string | undefined;
   }): React.ReactNode {
+    if (control.label === false) {
+      return children;
+    }
+
     const help = getControlHelpText({ control, label, sectionTitle });
 
     if (!help) {
@@ -2404,13 +2446,23 @@ export function ControlsPanel({
                 }
 
                 const [id, rawControl] = group.entry;
-                const isInInlineLayoutGroup = inlineLayoutGroupByControlId.has(id);
+                const inlineLayoutGroup = inlineLayoutGroupByControlId.get(id);
+                const isInInlineLayoutGroup = Boolean(inlineLayoutGroup);
                 const disabled = isControlDisabled(rawControl);
-                const control =
+                const resolvedControl =
                   disabled === Boolean(rawControl.disabled)
                     ? rawControl
                     : { ...rawControl, disabled };
-                const name = getControlName(id, control.label);
+                const shouldHideLabel = shouldHideToggleParameterControlLabel({
+                  control: resolvedControl,
+                  controlsById: visibleControls,
+                  layoutGroup: inlineLayoutGroup,
+                });
+                const control =
+                  shouldHideLabel && resolvedControl.label !== false
+                    ? { ...resolvedControl, label: false }
+                    : resolvedControl;
+                const name = getControlName(id, resolvedControl.label);
                 const value = getControlValue(control);
                 const usesHeaderKeyframeAction = control.target === headerKeyframeTarget;
                 const commitWithLabel =
@@ -2522,6 +2574,7 @@ export function ControlsPanel({
                       key={id}
                       name={name}
                       onValueChange={commit}
+                      showLabel={control.label !== false}
                       value={asString(value)}
                     />
                   ),
@@ -2863,6 +2916,7 @@ export function ControlsPanel({
                       key={id}
                       name={name}
                       onValueChange={commit}
+                      showLabel={control.label !== false}
                       start={rangeValue.start}
                     />
                   ),
@@ -2929,6 +2983,7 @@ export function ControlsPanel({
                     name={name}
                     onValueChange={commit}
                     options={control.options ?? []}
+                    showLabel={control.label !== false}
                     value={asString(value, control.options?.[0]?.value ?? "")}
                   />
                 );
@@ -3008,6 +3063,7 @@ export function ControlsPanel({
                       key={id}
                       name={name}
                       onValueChange={commit}
+                      showLabel={control.label !== false}
                       value={asString(value)}
                     />
                   ),
@@ -3020,6 +3076,7 @@ export function ControlsPanel({
 
               case "vector": {
                 const vectorValue = asVectorValue(value);
+                const padVariant = asVectorPadVariant(control.variant);
 
                 return withKeyframeLabelAction({
                   children: (
@@ -3028,8 +3085,12 @@ export function ControlsPanel({
                       key={id}
                       name={name}
                       onValueChange={commit}
+                      padCoordinateMode={asVectorPadCoordinateMode(
+                        control.coordinateMode,
+                        padVariant,
+                      )}
                       padShape={vectorPadShape}
-                      padVariant={asVectorPadVariant(control.variant)}
+                      padVariant={padVariant}
                       x={vectorValue.x}
                       xLabel={control.xLabel}
                       y={vectorValue.y}

package/templates/runtime/schema/define-toolcraft.test.ts

@@ -837,7 +837,6 @@ describe("defineToolcraft", () => {
       step: 0.25,
       target: "canvas.renderScale",
       type: "slider",
-      unit: "x",
       variant: "discrete",
     });
   });
@@ -1397,6 +1396,51 @@ describe("defineToolcraft", () => {
     ]);
   });
 
+  it("keeps mode-gated standalone controls inside their semantic section", () => {
+    const app = defineToolcraft({
+      canvas: { enabled: true },
+      panels: {
+        controls: {
+          sections: [
+            {
+              controls: {
+                sourceMode: {
+                  defaultValue: "preset",
+                  label: "Source",
+                  options: [
+                    { label: "Preset", value: "preset" },
+                    { label: "Image", value: "image" },
+                  ],
+                  target: "source.mode",
+                  type: "segmented",
+                },
+                sourceUpload: {
+                  accept: "image/*",
+                  assetKind: "image",
+                  defaultValue: null,
+                  label: "Image",
+                  target: "source.upload",
+                  type: "fileDrop",
+                  visibleWhen: { equals: "image", target: "source.mode" },
+                },
+              },
+              title: "Source",
+            },
+          ],
+          title: "Controls",
+        },
+      },
+    });
+
+    expect(app.panels.controls?.sections).toHaveLength(1);
+    expect(app.panels.controls?.sections[0]?.title).toBe("Source");
+    expect(app.panels.controls?.sections[0]?.layout).toBeUndefined();
+    expect(Object.keys(app.panels.controls?.sections[0]?.controls ?? {})).toEqual([
+      "sourceMode",
+      "sourceUpload",
+    ]);
+  });
+
   it("preserves controls panel action sections and render metadata", () => {
     const app = defineToolcraft({
       canvas: { enabled: true },