@pixel-point/toolcraft 0.0.14 → 0.0.15

package/templates/runtime/react/canvas/use-canvas-viewport-interactions.ts

@@ -0,0 +1,227 @@
+"use client";
+
+import * as React from "react";
+
+import { clampToolcraftCanvasZoom } from "../../state/canvas-zoom";
+import type {
+  ToolcraftCommand,
+  ToolcraftPoint,
+} from "../../state/types";
+
+type CanvasDragState = {
+  originX: number;
+  originY: number;
+  pointerId: number;
+  startX: number;
+  startY: number;
+};
+
+const wheelZoomSensitivity = 0.12;
+const wheelPinchZoomSensitivity = 0.5;
+
+function isEventTargetInsideElement(
+  target: EventTarget | null,
+  element: HTMLElement,
+): boolean {
+  return target instanceof Node && element.contains(target);
+}
+
+function getNextWheelZoom(
+  currentZoom: number,
+  event: Pick<WheelEvent, "ctrlKey" | "deltaY">,
+): number {
+  const sensitivity = event.ctrlKey
+    ? wheelPinchZoomSensitivity
+    : wheelZoomSensitivity;
+  const rawDelta = -event.deltaY * sensitivity;
+  const zoomDelta = Math.trunc(rawDelta) || Math.sign(rawDelta);
+
+  return clampToolcraftCanvasZoom(currentZoom + zoomDelta);
+}
+
+function getZoomedCanvasOffset({
+  clientX,
+  clientY,
+  currentZoom,
+  nextZoom,
+  offset,
+  viewportElement,
+}: {
+  clientX: number;
+  clientY: number;
+  currentZoom: number;
+  nextZoom: number;
+  offset: ToolcraftPoint;
+  viewportElement: HTMLElement;
+}): ToolcraftPoint {
+  const rect = viewportElement.getBoundingClientRect();
+  const currentScale = currentZoom / 100;
+  const nextScale = nextZoom / 100;
+  const pointerX = clientX - rect.left - rect.width / 2;
+  const pointerY = clientY - rect.top - rect.height / 2;
+  const worldX = (pointerX - offset.x) / currentScale;
+  const worldY = (pointerY - offset.y) / currentScale;
+
+  return {
+    x: pointerX - worldX * nextScale,
+    y: pointerY - worldY * nextScale,
+  };
+}
+
+export function useCanvasViewportInteractions({
+  dispatch,
+  draggable,
+  offset,
+  zoom,
+}: {
+  dispatch: React.Dispatch<ToolcraftCommand>;
+  draggable: boolean;
+  offset: ToolcraftPoint;
+  zoom: number;
+}): {
+  handlePointerDown: React.PointerEventHandler<HTMLDivElement>;
+  handlePointerMove: React.PointerEventHandler<HTMLDivElement>;
+  handlePointerUp: React.PointerEventHandler<HTMLDivElement>;
+  viewportRef: React.RefObject<HTMLDivElement | null>;
+} {
+  const dragRef = React.useRef<CanvasDragState | null>(null);
+  const viewportRef = React.useRef<HTMLDivElement | null>(null);
+
+  React.useEffect(() => {
+    const viewportElement = viewportRef.current;
+
+    if (!viewportElement) {
+      return undefined;
+    }
+
+    const workspaceElement =
+      viewportElement.closest<HTMLElement>(
+        '[data-slot="toolcraft-runtime-app"]',
+      ) ?? viewportElement;
+    const listenerOptions: AddEventListenerOptions = { capture: true, passive: false };
+    const handleWheel = (event: WheelEvent): void => {
+      const targetIsInsideCanvas = isEventTargetInsideElement(
+        event.target,
+        viewportElement,
+      );
+      if (!targetIsInsideCanvas) {
+        if (event.ctrlKey) {
+          event.preventDefault();
+          event.stopPropagation();
+        }
+
+        return;
+      }
+
+      event.preventDefault();
+      event.stopPropagation();
+
+      if (!event.ctrlKey) {
+        dispatch({
+          offset: {
+            x: offset.x - event.deltaX,
+            y: offset.y - event.deltaY,
+          },
+          type: "canvas.setOffset",
+        });
+        return;
+      }
+
+      const nextZoom = getNextWheelZoom(zoom, event);
+
+      if (nextZoom === zoom) {
+        return;
+      }
+
+      dispatch({
+        offset: getZoomedCanvasOffset({
+          clientX: event.clientX,
+          clientY: event.clientY,
+          currentZoom: zoom,
+          nextZoom,
+          offset,
+          viewportElement,
+        }),
+        type: "canvas.setViewport",
+        zoom: nextZoom,
+      });
+    };
+
+    workspaceElement.addEventListener("wheel", handleWheel, listenerOptions);
+
+    return () => {
+      workspaceElement.removeEventListener(
+        "wheel",
+        handleWheel,
+        listenerOptions,
+      );
+    };
+  }, [dispatch, offset, zoom]);
+
+  const handlePointerDown: React.PointerEventHandler<HTMLDivElement> = React.useCallback(
+    (event) => {
+      if (!draggable || event.button !== 0) {
+        return;
+      }
+
+      event.preventDefault();
+
+      if (typeof event.currentTarget.setPointerCapture === "function") {
+        event.currentTarget.setPointerCapture(event.pointerId);
+      }
+
+      dragRef.current = {
+        originX: offset.x,
+        originY: offset.y,
+        pointerId: event.pointerId,
+        startX: event.clientX,
+        startY: event.clientY,
+      };
+    },
+    [draggable, offset],
+  );
+
+  const handlePointerMove: React.PointerEventHandler<HTMLDivElement> = React.useCallback(
+    (event) => {
+      const drag = dragRef.current;
+
+      if (!drag || drag.pointerId !== event.pointerId) {
+        return;
+      }
+
+      dispatch({
+        offset: {
+          x: drag.originX + event.clientX - drag.startX,
+          y: drag.originY + event.clientY - drag.startY,
+        },
+        type: "canvas.setOffset",
+      });
+    },
+    [dispatch],
+  );
+
+  const handlePointerUp: React.PointerEventHandler<HTMLDivElement> = React.useCallback(
+    (event) => {
+      if (dragRef.current?.pointerId !== event.pointerId) {
+        return;
+      }
+
+      if (
+        typeof event.currentTarget.hasPointerCapture === "function" &&
+        event.currentTarget.hasPointerCapture(event.pointerId)
+      ) {
+        event.currentTarget.releasePointerCapture(event.pointerId);
+      }
+
+      dragRef.current = null;
+    },
+    [],
+  );
+
+  return {
+    handlePointerDown,
+    handlePointerMove,
+    handlePointerUp,
+    viewportRef,
+  };
+}

package/templates/runtime/react/controls-panel/__tests__/control-conditions.test.ts

@@ -0,0 +1,89 @@
+import { describe, expect, it } from "vitest";
+
+import { defineToolcraft } from "../../../schema/define-toolcraft";
+import { createToolcraftState } from "../../../state/create-template-state";
+import {
+  isToolcraftControlDisabled,
+  isToolcraftControlVisible,
+  isToolcraftSectionVisible,
+} from "../conditions/control-conditions";
+
+describe("Toolcraft control conditions", () => {
+  it("resolves timeline runtime targets through the canonical condition helpers", () => {
+    const schema = defineToolcraft({
+      canvas: { enabled: true, renderScale: true, sizing: { mode: "editable-output" } },
+      panels: {
+        controls: {
+          sections: [
+            {
+              controls: {
+                compactOnly: {
+                  defaultValue: 25,
+                  label: "Compact value",
+                  target: "demo.compact",
+                  type: "slider",
+                  visibleWhen: {
+                    equals: false,
+                    target: "panels.timeline.extended",
+                  },
+                },
+                extendedOnly: {
+                  defaultValue: 75,
+                  disabledWhen: {
+                    equals: false,
+                    target: "panels.timeline.extended",
+                  },
+                  label: "Extended value",
+                  target: "demo.extended",
+                  type: "slider",
+                  visibleWhen: {
+                    equals: true,
+                    target: "panels.timeline.extended",
+                  },
+                },
+              },
+              title: "Extended Timeline",
+              visibleWhen: {
+                equals: true,
+                target: "panels.timeline.visible",
+              },
+            },
+          ],
+          title: "Controls",
+        },
+        timeline: { mode: "playback" },
+      },
+    });
+    const section = schema.panels.controls?.sections.find(
+      (entry) => entry.title === "Extended Timeline",
+    );
+    const compactControl = section?.controls.compactOnly;
+    const extendedControl = section?.controls.extendedOnly;
+
+    expect(section).toBeTruthy();
+    expect(compactControl).toBeTruthy();
+    expect(extendedControl).toBeTruthy();
+
+    const compactState = createToolcraftState(schema);
+
+    expect(isToolcraftSectionVisible(compactState, section!)).toBe(true);
+    expect(isToolcraftControlVisible(compactState, compactControl!)).toBe(true);
+    expect(isToolcraftControlVisible(compactState, extendedControl!)).toBe(false);
+    expect(isToolcraftControlDisabled(compactState, extendedControl!)).toBe(true);
+
+    const extendedState = createToolcraftState(schema, {
+      panels: { timeline: { extended: true } },
+    });
+
+    expect(isToolcraftSectionVisible(extendedState, section!)).toBe(true);
+    expect(isToolcraftControlVisible(extendedState, compactControl!)).toBe(false);
+    expect(isToolcraftControlVisible(extendedState, extendedControl!)).toBe(true);
+    expect(isToolcraftControlDisabled(extendedState, extendedControl!)).toBe(false);
+
+    const hiddenState = createToolcraftState(schema, {
+      panels: { timeline: { hidden: true } },
+    });
+
+    expect(isToolcraftSectionVisible(hiddenState, section!)).toBe(false);
+  });
+});

package/templates/runtime/react/{controls-panel-filedrop-reorder.test.tsx → controls-panel/__tests__/controls-panel-filedrop-reorder.test.tsx}

@@ -2,11 +2,11 @@ import { cleanup, fireEvent, render, screen } from "@testing-library/react";
 import * as React from "react";
 import { afterEach, beforeAll, describe, expect, it, vi } from "vitest";
 
-import { defineToolcraft } from "../schema/define-toolcraft";
+import { defineToolcraft } from "../../../schema/define-toolcraft";
 import type { FileDropPreview } from "@repo/ui";
-import { ControlsPanel } from "./controls-panel";
-import { ToolcraftRoot } from "./toolcraft-root";
-import { useToolcraft } from "./use-toolcraft";
+import { ControlsPanel } from "../controls-panel";
+import { ToolcraftRoot } from "../../app-shell/toolcraft-root";
+import { useToolcraft } from "../../app-shell/use-toolcraft";
 
 vi.mock("@repo/ui", async (importOriginal) => {
   const actual = await importOriginal<typeof import("@repo/ui")>();

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

@@ -0,0 +1,91 @@
+import { describe, expect, it } from "vitest";
+import {
+  defineToolcraft,
+  renderControlsPanelWithSchema,
+  screen,
+} from "../testing/controls-panel-test-utils";
+
+describe("ControlsPanel actions layout", () => {
+  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");
+  });
+});

package/templates/runtime/react/controls-panel/__tests__/controls-panel.collection-actions.test.tsx

@@ -0,0 +1,213 @@
+import { describe, expect, it } from "vitest";
+import {
+  defineToolcraft,
+  fireEvent,
+  renderControlsPanelWithSchema,
+  screen,
+  waitFor,
+} from "../testing/controls-panel-test-utils";
+
+describe("ControlsPanel collection actions", () => {
+  it("renders collection actions as add/remove controls for runtime item arrays", () => {
+    const schema = defineToolcraft({
+      canvas: { enabled: false },
+      panels: {
+        controls: {
+          sections: [
+            {
+              controls: {
+                colors: {
+                  defaultValue: [{ hex: "#DFFF1A" }, { hex: "#8CFF3A" }],
+                  itemControl: {
+                    defaultValue: { hex: "#C1FF00" },
+                    label: "Color",
+                    type: "color",
+                  },
+                  label: "Colors",
+                  minItems: 1,
+                  recommendedMaxItems: 2,
+                  target: "bead.colors",
+                  type: "collectionActions",
+                },
+              },
+              title: "Bead Colors",
+            },
+          ],
+          title: "Controls",
+        },
+      },
+    });
+
+    const { container } = renderControlsPanelWithSchema(schema);
+
+    const addButton = screen.getByRole("button", { name: "Add Color" });
+    const removeButton = screen.getByRole("button", { name: "Remove Color" });
+    const collectionHeader = container.querySelector(
+      '[data-slot="collection-actions-control-header"]',
+    );
+    const colorGrid = container.querySelector(
+      '[data-slot="collection-actions-items-grid"]',
+    );
+
+    expect(collectionHeader?.textContent).toContain("Colors");
+    expect(collectionHeader?.lastElementChild?.contains(removeButton)).toBe(true);
+    expect(collectionHeader?.lastElementChild?.contains(addButton)).toBe(true);
+    expect(colorGrid).toBeTruthy();
+    expect(colorGrid?.children).toHaveLength(2);
+    expect(screen.queryByText("Color 1")).toBeNull();
+    expect(screen.queryByText("Color 2")).toBeNull();
+
+    fireEvent.click(addButton);
+    fireEvent.click(addButton);
+
+    let values = JSON.parse(screen.getByTestId("values-json").textContent ?? "{}");
+
+    expect(values["bead.colors"]).toHaveLength(4);
+    expect(screen.queryByText("Color 4")).toBeNull();
+    expect(colorGrid?.children).toHaveLength(4);
+    expect((addButton as HTMLButtonElement).disabled).toBe(false);
+
+    fireEvent.click(removeButton);
+    fireEvent.click(removeButton);
+    fireEvent.click(removeButton);
+
+    values = JSON.parse(screen.getByTestId("values-json").textContent ?? "{}");
+
+    expect(values["bead.colors"]).toHaveLength(1);
+    expect((removeButton as HTMLButtonElement).disabled).toBe(true);
+  });
+
+  it("renders collection item controls beyond color lists", () => {
+    const schema = defineToolcraft({
+      canvas: { enabled: false },
+      panels: {
+        controls: {
+          sections: [
+            {
+              controls: {
+                labels: {
+                  defaultValue: ["Alpha"],
+                  itemControl: {
+                    defaultValue: "New label",
+                    label: "Label",
+                    type: "text",
+                  },
+                  minItems: 1,
+                  target: "glyph.labels",
+                  type: "collectionActions",
+                },
+              },
+              title: "Glyph Labels",
+            },
+          ],
+          title: "Controls",
+        },
+      },
+    });
+
+    renderControlsPanelWithSchema(schema);
+
+    fireEvent.click(screen.getByRole("button", { name: "Add Label" }));
+
+    const values = JSON.parse(screen.getByTestId("values-json").textContent ?? "{}");
+
+    expect(values["glyph.labels"]).toEqual(["Alpha", "New label"]);
+    expect(screen.getByDisplayValue("Alpha")).toBeTruthy();
+    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");
+  });
+});