@pixel-point/toolcraft 0.0.18 → 0.0.19

package/templates/runtime/react/app-shell/settings-transfer.test.ts

@@ -18,6 +18,12 @@ function createSettingsSchema() {
         sections: [
           {
             controls: {
+              fill: {
+                defaultValue: "#112233",
+                label: "Fill",
+                target: "appearance.fill",
+                type: "color",
+              },
               prompt: {
                 defaultValue: "Initial prompt",
                 label: "Prompt",
@@ -250,4 +256,19 @@ describe("settings transfer", () => {
 
     expect(state.values["style.opacity"]).toBe(75);
   });
+
+  it("canonicalizes legacy Color payloads during settings import", () => {
+    const schema = createSettingsSchema();
+    const initialState = createToolcraftState(schema);
+    const payload = {
+      ...createToolcraftSettingsPayload(initialState),
+      values: { "appearance.fill": { hex: "#abc" } },
+    };
+
+    const state = reduceWithCommands(initialState, (dispatch) => {
+      applyToolcraftSettingsPayload({ dispatch, state: initialState }, payload);
+    });
+
+    expect(state.values["appearance.fill"]).toBe("#AABBCC");
+  });
 });

package/templates/runtime/react/app-shell/toolcraft-app.scene-export.test.tsx

@@ -77,6 +77,51 @@ describe("ToolcraftApp scene export boundary", () => {
           schema={schema}
         />,
       ),
-    ).toThrow("Product-owned export actions require exportRenderer");
+    ).toThrow("Product-owned image/video export actions require exportRenderer");
+  });
+
+  it("requires typed SVG actions and SVG renderers to correspond", () => {
+    const schema = defineToolcraft({
+      canvas: { enabled: true },
+      panels: {
+        controls: {
+          sections: [
+            {
+              controls: {
+                footer: {
+                  actions: [
+                    {
+                      label: "Export SVG",
+                      role: "export-svg",
+                      value: "export.svg",
+                    },
+                  ],
+                  target: "actions.output",
+                  type: "panelActions",
+                },
+              },
+            },
+          ],
+          title: "Controls",
+        },
+      },
+      persistence: { storage: "none" },
+    });
+
+    expect(() => render(<ToolcraftApp schema={schema} />)).toThrow(
+      "A typed SVG export action requires svgExportRenderer",
+    );
+    expect(() =>
+      render(
+        <ToolcraftApp
+          schema={defineToolcraft({
+            canvas: { enabled: true },
+            panels: {},
+            persistence: { storage: "none" },
+          })}
+          svgExportRenderer={{ baseFileName: "vector", renderFrame: () => {} }}
+        />,
+      ),
+    ).toThrow("svgExportRenderer requires a typed SVG export action");
   });
 });

package/templates/runtime/react/app-shell/toolcraft-app.tsx

@@ -11,8 +11,9 @@ import {
 import type { ToolcraftState } from "../../state/types";
 import {
   getToolcraftExportRendererCoverageErrors,
-  type ToolcraftProductExportRenderer,
-} from "../../export/product-export-renderer";
+} from "../../export/export-renderer-coverage";
+import type { ToolcraftProductExportRenderer } from "../../export/product-export-renderer";
+import type { ToolcraftProductSvgExportRenderer } from "../../export/product-svg-export-renderer";
 import { CanvasShell } from "../canvas/canvas-shell";
 import { ToolcraftProductSceneBoundsBoundary } from "../canvas/product-scene-surface";
 import {
@@ -41,6 +42,7 @@ export type ToolcraftAppComposition = {
   rendererPipelineRegistration?: AnyToolcraftRendererPipelineRegistration;
   sceneBoundsProvider?: ToolcraftProductSceneBoundsProvider;
   schema: ResolvedToolcraftAppSchema;
+  svgExportRenderer?: ToolcraftProductSvgExportRenderer;
 };
 
 export type ToolcraftAppProps = ToolcraftAppComposition & {
@@ -139,6 +141,7 @@ export function ToolcraftApp({
   rendererPipelineRegistration,
   sceneBoundsProvider,
   schema,
+  svgExportRenderer,
   ...props
 }: ToolcraftAppProps): React.JSX.Element {
   const suppressedModelTargets = modelPresentation?.mode === "custom"
@@ -152,6 +155,7 @@ export function ToolcraftApp({
     exportRenderer,
     productSceneRequired,
     schema,
+    svgExportRenderer,
   });
   if (exportRendererErrors.length > 0) {
     throw new Error(
@@ -162,6 +166,7 @@ export function ToolcraftApp({
     ...(sceneBoundsProvider ? { boundsProvider: sceneBoundsProvider } : {}),
     ...(exportRenderer ? { exportRenderer } : {}),
     productSceneRequired,
+    ...(svgExportRenderer ? { svgExportRenderer } : {}),
     visibility: createToolcraftRuntimeSceneVisibility({
       renderDefaultImages: renderDefaultCanvasMedia,
       suppressedModelTargets,

package/templates/runtime/react/canvas/canvas-shell-interactions.test.tsx

@@ -35,6 +35,23 @@ function CaptureStore({
   return null;
 }
 
+function createGestureEvent(
+  type: "gesturechange" | "gestureend" | "gesturestart",
+  properties: { clientX?: number; clientY?: number; scale?: number } = {},
+): Event {
+  const event = new Event(type, { bubbles: true, cancelable: true });
+  Object.defineProperties(
+    event,
+    Object.fromEntries(
+      Object.entries(properties).map(([key, value]) => [
+        key,
+        { configurable: true, value },
+      ]),
+    ),
+  );
+  return event;
+}
+
 describe("CanvasShell viewport interactions", () => {
   it("updates runtime canvas offset while panning", () => {
     let store: ToolcraftExternalStore | undefined;
@@ -238,6 +255,19 @@ describe("CanvasShell viewport interactions", () => {
     expect(screen.getByTestId("canvas-offset").textContent).toBe("0,0");
     expect(overlay.closest("[data-toolcraft-canvas-world]")).toBeNull();
 
+    const gestureStart = createGestureEvent("gesturestart", { scale: 1 });
+    const gestureChange = createGestureEvent("gesturechange", { scale: 1.5 });
+    const gestureEnd = createGestureEvent("gestureend");
+
+    expect(overlay.dispatchEvent(gestureStart)).toBe(false);
+    expect(overlay.dispatchEvent(gestureChange)).toBe(false);
+    expect(overlay.dispatchEvent(gestureEnd)).toBe(false);
+    expect(gestureStart.defaultPrevented).toBe(true);
+    expect(gestureChange.defaultPrevented).toBe(true);
+    expect(gestureEnd.defaultPrevented).toBe(true);
+    expect(screen.getByTestId("canvas-zoom").textContent).toBe("100");
+    expect(screen.getByTestId("canvas-offset").textContent).toBe("0,0");
+
     const scrollEvent = new WheelEvent("wheel", {
       bubbles: true,
       cancelable: true,

package/templates/runtime/react/canvas/canvas-shell-pinch-interactions.test.tsx

@@ -0,0 +1,155 @@
+import { cleanup, fireEvent, screen, waitFor } from "@testing-library/react";
+import type * as React from "react";
+import { afterEach, describe, expect, it, vi } from "vitest";
+
+import type { ToolcraftExternalStore } from "../../state/toolcraft-external-store";
+import { useToolcraftStore } from "../app-shell/toolcraft-store-context";
+import {
+  CanvasStateProbe,
+  mockCanvasRect,
+  renderCanvasShell,
+} from "./canvas-shell-test-utils";
+
+afterEach(() => {
+  cleanup();
+  vi.restoreAllMocks();
+});
+
+function CaptureStore({
+  capture,
+}: {
+  capture: (store: ToolcraftExternalStore) => void;
+}): null {
+  capture(useToolcraftStore());
+  return null;
+}
+
+function createGestureEvent(
+  type: "gesturechange" | "gestureend" | "gesturestart",
+  properties: { clientX?: number; clientY?: number; scale?: number } = {},
+): Event {
+  const event = new Event(type, { bubbles: true, cancelable: true });
+  Object.defineProperties(
+    event,
+    Object.fromEntries(
+      Object.entries(properties).map(([key, value]) => [
+        key,
+        { configurable: true, value },
+      ]),
+    ),
+  );
+  return event;
+}
+
+describe("CanvasShell pinch interactions", () => {
+  it("keeps a native browser gesture pinch inside the canvas viewport", async () => {
+    let store: ToolcraftExternalStore | undefined;
+    renderCanvasShell({
+      afterCanvas: (
+        <>
+          <CaptureStore capture={(value) => { store = value; }} />
+          <CanvasStateProbe />
+        </>
+      ),
+      frameProps: {
+        "data-slot": "toolcraft-runtime-app",
+      } as React.HTMLAttributes<HTMLDivElement>,
+    });
+
+    const canvas = screen.getByRole("application", { name: "Canvas viewport" });
+    const world = canvas.querySelector("[data-toolcraft-canvas-world]") as HTMLElement;
+    mockCanvasRect(canvas);
+    const gestureStart = createGestureEvent("gesturestart", {
+      clientX: 600,
+      clientY: 300,
+      scale: 1,
+    });
+    const gestureChange = createGestureEvent("gesturechange", {
+      clientX: 600,
+      clientY: 300,
+      scale: 1.5,
+    });
+
+    expect(canvas.dispatchEvent(gestureStart)).toBe(false);
+    expect(gestureStart.defaultPrevented).toBe(true);
+    expect(canvas.dispatchEvent(gestureChange)).toBe(false);
+    expect(gestureChange.defaultPrevented).toBe(true);
+    expect(store?.getState().canvas).toMatchObject({
+      offset: { x: -100, y: 0 },
+      zoom: 150,
+    });
+    expect(store?.getCommittedState().canvas.zoom).toBe(100);
+    await waitFor(() => {
+      expect(world.style.transform).toContain("translate(-100px");
+      expect(world.style.transform).toContain("scale(1.5)");
+    });
+
+    const gestureEnd = createGestureEvent("gestureend");
+    expect(canvas.dispatchEvent(gestureEnd)).toBe(false);
+    expect(gestureEnd.defaultPrevented).toBe(true);
+    expect(store?.getCommittedState().canvas).toMatchObject({
+      offset: { x: -100, y: 0 },
+      zoom: 150,
+    });
+  });
+
+  it("zooms and pans the canvas from a two-touch pinch gesture", () => {
+    let store: ToolcraftExternalStore | undefined;
+    renderCanvasShell({
+      afterCanvas: (
+        <>
+          <CaptureStore capture={(value) => { store = value; }} />
+          <CanvasStateProbe />
+        </>
+      ),
+      children: (
+        <div
+          data-testid="touch-owned-product"
+          onPointerDown={(event) => event.stopPropagation()}
+        />
+      ),
+    });
+
+    const canvas = screen.getByRole("application", { name: "Canvas viewport" });
+    const touchSurface = screen.getByTestId("touch-owned-product");
+    mockCanvasRect(canvas);
+    fireEvent.pointerDown(touchSurface, {
+      button: 0,
+      clientX: 300,
+      clientY: 300,
+      pointerId: 1,
+      pointerType: "touch",
+    });
+    fireEvent.pointerDown(touchSurface, {
+      button: 0,
+      clientX: 500,
+      clientY: 300,
+      pointerId: 2,
+      pointerType: "touch",
+    });
+    fireEvent.pointerMove(touchSurface, {
+      clientX: 700,
+      clientY: 300,
+      pointerId: 2,
+      pointerType: "touch",
+    });
+
+    expect(store?.getState().canvas).toMatchObject({
+      offset: { x: 100, y: 0 },
+      zoom: 200,
+    });
+    expect(store?.getCommittedState().canvas).toMatchObject({
+      offset: { x: 0, y: 0 },
+      zoom: 100,
+    });
+    fireEvent.pointerUp(touchSurface, { pointerId: 2, pointerType: "touch" });
+    fireEvent.pointerUp(touchSurface, { pointerId: 1, pointerType: "touch" });
+
+    expect(screen.getByTestId("canvas-offset").textContent).toBe("100,0");
+    expect(screen.getByTestId("canvas-zoom").textContent).toBe("200");
+    expect(store?.getCommittedState().canvas).toMatchObject({
+      offset: { x: 100, y: 0 },
+      zoom: 200,
+    });
+  });
+});

package/templates/runtime/react/canvas/canvas-shell-rendering.test.tsx

@@ -163,7 +163,7 @@ describe("CanvasShell rendering", () => {
     ).toBeNull();
   });
 
-  it("fills the infinite viewport from the live structured color value", () => {
+  it("normalizes structured color ingress before filling the infinite viewport", () => {
     const { container } = renderCanvasShell({
       initialState: {
         canvas: {

package/templates/runtime/react/canvas/canvas-shell.tsx

@@ -115,11 +115,18 @@ export function CanvasShell({
     uploadPresentation.feedback ??
     (uploadPresentation.directOperation ? (directCanvasPresentation?.feedback ?? null) : null);
   const uploadEnabled = canvasSchema.upload;
-  const { handlePointerDown, handlePointerMove, handlePointerUp, viewportRef } =
-    useCanvasViewportInteractions({
-      draggable: canvasSchema.draggable,
-      store,
-    });
+  const {
+    handlePointerDown,
+    handlePointerDownCapture,
+    handlePointerMove,
+    handlePointerMoveCapture,
+    handlePointerUp,
+    handlePointerUpCapture,
+    viewportRef,
+  } = useCanvasViewportInteractions({
+    draggable: canvasSchema.draggable,
+    store,
+  });
   const handleDrop = useCanvasDropImport({
     coordinator: sourceAssetCoordinator,
     onPresentationChange: setUploadPresentation,
@@ -162,9 +169,13 @@ export function CanvasShell({
       onDragOver={beginDragOver}
       onDrop={handleDrop}
       onPointerCancel={handlePointerUp}
+      onPointerCancelCapture={handlePointerUpCapture}
       onPointerDown={handlePointerDown}
+      onPointerDownCapture={handlePointerDownCapture}
       onPointerMove={handlePointerMove}
+      onPointerMoveCapture={handlePointerMoveCapture}
       onPointerUp={handlePointerUp}
+      onPointerUpCapture={handlePointerUpCapture}
       ref={viewportRef}
       role="application"
       style={

package/templates/runtime/react/canvas/canvas-viewport-geometry.ts

@@ -0,0 +1,133 @@
+import { clampToolcraftCanvasZoom } from "../../state/canvas-zoom";
+import type { ToolcraftPoint } from "../../state/types";
+
+type CanvasPointerPosition = ToolcraftPoint & {
+  pointerId: number;
+};
+
+export type CanvasPinchState = {
+  pointerIds: readonly [number, number];
+  startCenter: ToolcraftPoint;
+  startDistance: number;
+  startOffset: ToolcraftPoint;
+  startZoom: number;
+};
+
+export 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 getCanvasPointerCenter(
+  first: CanvasPointerPosition,
+  second: CanvasPointerPosition,
+): ToolcraftPoint {
+  return {
+    x: (first.x + second.x) / 2,
+    y: (first.y + second.y) / 2,
+  };
+}
+
+export function getCanvasPointerDistance(
+  first: CanvasPointerPosition,
+  second: CanvasPointerPosition,
+): number {
+  return Math.hypot(second.x - first.x, second.y - first.y);
+}
+
+function getFirstTouchPair(
+  pointers: ReadonlyMap<number, ToolcraftPoint>,
+): readonly [CanvasPointerPosition, CanvasPointerPosition] | null {
+  const entries = Array.from(pointers.entries()).slice(0, 2);
+
+  if (entries.length < 2) {
+    return null;
+  }
+
+  return [
+    { pointerId: entries[0][0], ...entries[0][1] },
+    { pointerId: entries[1][0], ...entries[1][1] },
+  ];
+}
+
+export function createCanvasPinchState(
+  pointers: ReadonlyMap<number, ToolcraftPoint>,
+  offset: ToolcraftPoint,
+  zoom: number,
+): CanvasPinchState | null {
+  const pair = getFirstTouchPair(pointers);
+
+  if (!pair) {
+    return null;
+  }
+
+  const startDistance = getCanvasPointerDistance(pair[0], pair[1]);
+
+  if (startDistance <= 0) {
+    return null;
+  }
+
+  return {
+    pointerIds: [pair[0].pointerId, pair[1].pointerId],
+    startCenter: getCanvasPointerCenter(pair[0], pair[1]),
+    startDistance,
+    startOffset: offset,
+    startZoom: zoom,
+  };
+}
+
+export function getPinchedCanvasViewport({
+  currentCenter,
+  currentDistance,
+  pinch,
+  viewportElement,
+}: {
+  currentCenter: ToolcraftPoint;
+  currentDistance: number;
+  pinch: CanvasPinchState;
+  viewportElement: HTMLElement;
+}): { offset: ToolcraftPoint; zoom: number } {
+  const zoom = clampToolcraftCanvasZoom(
+    pinch.startZoom * (currentDistance / pinch.startDistance),
+  );
+  const anchoredOffset = getZoomedCanvasOffset({
+    clientX: pinch.startCenter.x,
+    clientY: pinch.startCenter.y,
+    currentZoom: pinch.startZoom,
+    nextZoom: zoom,
+    offset: pinch.startOffset,
+    viewportElement,
+  });
+
+  return {
+    offset: {
+      x: anchoredOffset.x + currentCenter.x - pinch.startCenter.x,
+      y: anchoredOffset.y + currentCenter.y - pinch.startCenter.y,
+    },
+    zoom,
+  };
+}