@pixel-point/toolcraft 0.0.2

package/templates/runtime/react/toolcraft-app.integration.test.tsx

@@ -0,0 +1,350 @@
+import {
+  cleanup,
+  fireEvent,
+  render,
+  screen,
+  waitFor,
+} from "@testing-library/react";
+import * as React from "react";
+import { afterEach, beforeAll, describe, expect, it } from "vitest";
+
+import { defineToolcraft } from "../schema/define-toolcraft";
+import { ToolcraftApp } from "./toolcraft-app";
+import { ToolcraftRoot } from "./toolcraft-root";
+import { LayersPanel } from "./layers-panel";
+import { TimelinePanel } from "./timeline-panel";
+import { ToolbarPanel } from "./toolbar-panel";
+
+declare module "vitest" {
+  interface Assertion<T = any> {
+    toBeDisabled(): void;
+  }
+}
+
+expect.extend({
+  toBeDisabled(received: HTMLElement) {
+    const pass =
+      received.matches(":disabled") ||
+      received.getAttribute("aria-disabled") === "true";
+
+    return {
+      message: () => `expected element ${pass ? "not " : ""}to be disabled`,
+      pass,
+    };
+  },
+});
+
+beforeAll(() => {
+  Object.defineProperty(window, "matchMedia", {
+    value: (query: string) => ({
+      addEventListener: () => undefined,
+      addListener: () => undefined,
+      dispatchEvent: () => false,
+      matches: query === "(prefers-reduced-motion: reduce)",
+      media: query,
+      onchange: null,
+      removeEventListener: () => undefined,
+      removeListener: () => undefined,
+    }),
+    writable: true,
+  });
+});
+
+afterEach(() => {
+  cleanup();
+  document.documentElement.classList.remove("dark");
+  document.documentElement.style.colorScheme = "";
+  window.localStorage.clear();
+});
+
+function createAssembledSchema() {
+  return defineToolcraft({
+    canvas: {
+      enabled: true,
+      size: { height: 180, unit: "px", width: 320 },
+      sizing: { mode: "editable-output" },
+      upload: true,
+    },
+    panels: {
+      controls: {
+        sections: [
+          {
+            controls: {
+              prompt: {
+                defaultValue: "Initial prompt",
+                label: "Prompt",
+                target: "generation.prompt",
+                type: "text",
+              },
+              opacity: {
+                defaultValue: 75,
+                label: "Opacity",
+                max: 100,
+                min: 0,
+                target: "selectedLayer.opacity",
+                type: "slider",
+                unit: "%",
+              },
+              enabled: {
+                defaultValue: true,
+                label: "Enabled",
+                target: "generation.enabled",
+                type: "switch",
+              },
+            },
+            title: "Basic",
+          },
+          {
+            actionGroup: "secondary",
+            controls: {
+              footer: {
+                actions: [
+                  {
+                    command: "controls.reset",
+                    label: "Reset",
+                    value: "reset",
+                    variant: "outline",
+                  },
+                  {
+                    command: "controls.apply",
+                    label: "Apply",
+                    value: "apply",
+                    variant: "default",
+                  },
+                ],
+                target: "panel.actions",
+                type: "panelActions",
+              },
+            },
+            layout: "standalone",
+          },
+        ],
+        title: "Master Controls",
+      },
+      layers: true,
+      timeline: true,
+    },
+  });
+}
+
+function renderAssembledEditor() {
+  return render(
+    <ToolcraftApp
+      schema={createAssembledSchema()}
+      style={{ height: 720, width: 960 }}
+    />,
+  );
+}
+
+describe("assembled Toolcraft template runtime", () => {
+  it("imports media into shared runtime state and lets toolbar history undo and redo it", async () => {
+    const { container } = renderAssembledEditor();
+
+    const canvas = screen.getByRole("application", { name: "Canvas viewport" });
+    const file = new File(["image"], "material.png", { type: "image/png" });
+
+    fireEvent.drop(canvas, {
+      clientX: 0,
+      clientY: 0,
+      dataTransfer: {
+        files: [file],
+      },
+    });
+
+    await waitFor(() => {
+      expect(
+        screen.getByRole("button", { name: "Select material.png" }),
+      ).toBeTruthy();
+    });
+
+    expect(
+      container.querySelector<HTMLElement>(
+        "[data-toolcraft-editable-canvas]",
+      )?.style.width,
+    ).toBe("320px");
+    expect(
+      (screen.getByRole("button", { name: "Undo" }) as HTMLButtonElement)
+        .disabled,
+    ).toBe(false);
+
+    fireEvent.click(screen.getByRole("button", { name: "Undo" }));
+
+    expect(
+      screen.queryByRole("button", { name: "Select material.png" }),
+    ).toBeNull();
+    expect(
+      (screen.getByRole("button", { name: "Redo" }) as HTMLButtonElement)
+        .disabled,
+    ).toBe(false);
+
+    fireEvent.click(screen.getByRole("button", { name: "Redo" }));
+
+    expect(
+      screen.getByRole("button", { name: "Select material.png" }),
+    ).toBeTruthy();
+  });
+
+  it("renders optional layers and timeline panels only when enabled by schema", () => {
+    renderAssembledEditor();
+
+    expect(screen.getByText("Layers")).toBeTruthy();
+    fireEvent.click(
+      screen.getByRole("button", { name: "Expand timeline panel" }),
+    );
+    expect(screen.getByText("Duration:")).toBeTruthy();
+    expect(
+      screen.getByText("Add your first keyframe from the properties panel."),
+    ).toBeTruthy();
+
+    cleanup();
+
+    render(
+      <ToolcraftRoot
+        schema={defineToolcraft({
+          canvas: { enabled: true },
+          panels: {},
+        })}
+      >
+        <LayersPanel framed={false} />
+        <TimelinePanel framed={false} />
+      </ToolcraftRoot>,
+    );
+
+    expect(screen.queryByText("Layers")).toBeNull();
+    expect(screen.queryByText("Duration:")).toBeNull();
+    expect(screen.queryByText("Dur:")).toBeNull();
+  });
+
+  it("uses schema-disabled toolbar features in assembled apps", () => {
+    render(
+      <ToolcraftRoot
+        schema={defineToolcraft({
+          canvas: { enabled: true },
+          panels: {},
+          toolbar: {
+            history: false,
+            radar: false,
+            theme: false,
+            zoom: false,
+          },
+        })}
+      >
+        <ToolbarPanel framed={false} />
+      </ToolcraftRoot>,
+    );
+
+    expect(screen.queryByRole("button", { name: "Undo" })).toBeNull();
+    expect(screen.queryByRole("button", { name: "Redo" })).toBeNull();
+    expect(screen.queryByRole("button", { name: "Center canvas" })).toBeNull();
+    expect(screen.queryByRole("button", { name: "Zoom in" })).toBeNull();
+    expect(screen.queryByRole("button", { name: "Light theme" })).toBeNull();
+    expect(screen.queryByText("70%")).toBeNull();
+  });
+
+  it("keeps schema-only apps wired through the full shared runtime base", async () => {
+    const { container } = renderAssembledEditor();
+
+    const canvas = screen.getByRole("application", { name: "Canvas viewport" });
+    const world = container.querySelector<HTMLElement>(
+      "[data-toolcraft-canvas-world]",
+    );
+    const grid = container.querySelector("[data-toolcraft-canvas-grid]");
+    const themeScope = container.querySelector<HTMLElement>(
+      "[data-toolcraft-theme-scope]",
+    );
+    const toolbar = container.querySelector<HTMLElement>(
+      "[data-toolcraft-inspect-toolbar]",
+    );
+
+    expect(canvas).toBeTruthy();
+    expect(world).toBeTruthy();
+    expect(grid).toBeNull();
+    expect(
+      container.querySelector<HTMLElement>(
+        "[data-toolcraft-editable-canvas]",
+      )?.style.width,
+    ).toBe("320px");
+    expect(screen.getByText("Master Controls")).toBeTruthy();
+    expect(screen.getByText("Layers")).toBeTruthy();
+    expect(screen.getByText("Dur:")).toBeTruthy();
+    expect(screen.queryByText("Duration:")).toBeNull();
+    expect(toolbar?.textContent).toContain("70%");
+    expect(screen.getByRole("button", { name: "Undo" })).toBeDisabled();
+    expect(screen.getByRole("button", { name: "Redo" })).toBeDisabled();
+    expect(themeScope?.dataset.toolcraftTheme).toBe("dark");
+
+    const canvasWidthInput = screen.getByDisplayValue("320");
+
+    fireEvent.change(canvasWidthInput, {
+      target: { value: "384" },
+    });
+    expect(
+      container.querySelector<HTMLElement>(
+        "[data-toolcraft-editable-canvas]",
+      )?.style.width,
+    ).toBe("320px");
+
+    fireEvent.blur(canvasWidthInput);
+    expect(
+      container.querySelector<HTMLElement>(
+        "[data-toolcraft-editable-canvas]",
+      )?.style.width,
+    ).toBe("384px");
+
+    fireEvent.change(screen.getByDisplayValue("Initial prompt"), {
+      target: { value: "Updated prompt" },
+    });
+    expect(screen.getByDisplayValue("Updated prompt")).toBeTruthy();
+
+    fireEvent.click(screen.getByRole("button", { name: "Reset" }));
+    expect(screen.getByDisplayValue("Initial prompt")).toBeTruthy();
+    expect(
+      container.querySelector<HTMLElement>(
+        "[data-toolcraft-editable-canvas]",
+      )?.style.width,
+    ).toBe("320px");
+
+    fireEvent.click(screen.getByRole("button", { name: "Zoom in" }));
+    expect(screen.getByText("80%")).toBeTruthy();
+
+    const wheelEvent = new WheelEvent("wheel", {
+      bubbles: true,
+      cancelable: true,
+      deltaX: 20,
+      deltaY: -10,
+    });
+    expect(canvas.dispatchEvent(wheelEvent)).toBe(false);
+    await waitFor(() => {
+      expect(world?.style.transform).toContain("translate(-20px, 10px)");
+    });
+
+    fireEvent.click(screen.getByRole("button", { name: "Center canvas" }));
+    expect(world?.style.transform).toContain("translate(0px, 0px)");
+
+    fireEvent.click(screen.getByRole("button", { name: "Light theme" }));
+    expect(themeScope?.dataset.toolcraftTheme).toBe("light");
+    expect(document.documentElement.classList.contains("dark")).toBe(false);
+
+    const file = new File(["image"], "ready.png", { type: "image/png" });
+    fireEvent.drop(canvas, {
+      clientX: 0,
+      clientY: 0,
+      dataTransfer: { files: [file] },
+    });
+
+    await waitFor(() => {
+      expect(
+        screen.getByRole("button", { name: "Select ready.png" }),
+      ).toBeTruthy();
+    });
+    expect(screen.getByRole("button", { name: "Undo" })).not.toBeDisabled();
+
+    fireEvent.click(
+      screen.getByRole("button", { name: "Expand timeline panel" }),
+    );
+    expect(screen.getByText("Duration:")).toBeTruthy();
+    expect(
+      screen.getByRole("button", { name: "Add Opacity keyframe" }),
+    ).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,339 @@
+import {
+  cleanup,
+  fireEvent,
+  render,
+  screen,
+  waitFor,
+} from "@testing-library/react";
+import * as React from "react";
+import { afterEach, beforeAll, describe, expect, it } from "vitest";
+
+import { defineToolcraft } from "../schema/define-toolcraft";
+import type { ToolcraftCustomControlRendererProps } from "./control-renderers";
+import { ToolcraftApp } from "./toolcraft-app";
+import { useToolcraft } from "./use-toolcraft";
+
+beforeAll(() => {
+  Object.defineProperty(window, "matchMedia", {
+    value: (query: string) => ({
+      addEventListener: () => undefined,
+      addListener: () => undefined,
+      dispatchEvent: () => false,
+      matches: query === "(prefers-reduced-motion: reduce)",
+      media: query,
+      onchange: null,
+      removeEventListener: () => undefined,
+      removeListener: () => undefined,
+    }),
+    writable: true,
+  });
+});
+
+afterEach(() => {
+  cleanup();
+  document.documentElement.classList.remove("dark");
+  document.documentElement.style.colorScheme = "";
+  window.localStorage.clear();
+});
+
+function createSchema() {
+  return defineToolcraft({
+    canvas: {
+      enabled: true,
+      size: { height: 180, unit: "px", width: 320 },
+      upload: true,
+    },
+    panels: {
+      controls: {
+        sections: [
+          {
+            controls: {
+              prompt: {
+                defaultValue: "Initial prompt",
+                label: "Prompt",
+                target: "generation.prompt",
+                type: "text",
+              },
+            },
+            title: "Basic",
+          },
+        ],
+        title: "Controls",
+      },
+      layers: true,
+      timeline: true,
+    },
+  });
+}
+
+function createCustomControlSchema() {
+  return defineToolcraft({
+    canvas: {
+      enabled: true,
+      size: { height: 180, unit: "px", width: 320 },
+    },
+    panels: {
+      controls: {
+        sections: [
+          {
+            controls: {
+              power: {
+                defaultValue: 10,
+                label: "Power",
+                target: "generation.power",
+                type: "customPower",
+              },
+            },
+            title: "Custom",
+          },
+        ],
+        title: "Controls",
+      },
+    },
+  });
+}
+
+function CanvasSlotProbe(): React.JSX.Element {
+  const { state } = useToolcraft();
+
+  return (
+    <span data-testid="canvas-slot-probe">
+      {state.canvas.size.width}:{state.mediaAssets.length}
+    </span>
+  );
+}
+
+function CustomValueProbe(): React.JSX.Element {
+  const { state } = useToolcraft();
+
+  return (
+    <span data-testid="custom-value-probe">
+      {String(state.values["generation.power"])}
+    </span>
+  );
+}
+
+describe("ToolcraftApp", () => {
+  it("renders enabled runtime surfaces from the app schema", () => {
+    const { container } = render(<ToolcraftApp schema={createSchema()} />);
+
+    expect(
+      screen.getByRole("application", { name: "Canvas viewport" }),
+    ).toBeTruthy();
+    expect(screen.getByText("Controls")).toBeTruthy();
+    expect(screen.getByText("Layers")).toBeTruthy();
+    expect(screen.getByText("Dur:")).toBeTruthy();
+    expect(screen.queryByText("Duration:")).toBeNull();
+    expect(screen.getByRole("button", { name: "Undo" })).toBeTruthy();
+    expect(screen.getByRole("button", { name: "Redo" })).toBeTruthy();
+    expect(screen.getByRole("button", { name: "Center canvas" })).toBeTruthy();
+    expect(screen.getByRole("button", { name: "Light theme" })).toBeTruthy();
+    expect(
+      container.querySelector('[data-slot="toolcraft-runtime-app"]'),
+    ).toBeTruthy();
+    expect(
+      container.querySelector<HTMLElement>('[data-slot="toolcraft-runtime-app"]')
+        ?.style.minWidth,
+    ).toBe("1024px");
+    expect(
+      container.querySelector('[data-panel-type="controls"]'),
+    ).toBeTruthy();
+    expect(container.querySelector('[data-panel-type="layers"]')).toBeTruthy();
+    expect(
+      container.querySelector('[data-panel-type="timeline"]'),
+    ).toBeTruthy();
+    expect(container.querySelector('[data-panel-type="toolbar"]')).toBeTruthy();
+  });
+
+  it("does not render disabled optional panels or toolbar features", () => {
+    const schema = defineToolcraft({
+      canvas: { enabled: true },
+      panels: {},
+      toolbar: {
+        history: false,
+        radar: false,
+        theme: false,
+        zoom: false,
+      },
+    });
+    const { container } = render(<ToolcraftApp schema={schema} />);
+
+    expect(
+      screen.getByRole("application", { name: "Canvas viewport" }),
+    ).toBeTruthy();
+    expect(screen.queryByText("Controls")).toBeNull();
+    expect(screen.queryByText("Layers")).toBeNull();
+    expect(screen.queryByText("Duration:")).toBeNull();
+    expect(screen.queryByText("Dur:")).toBeNull();
+    expect(screen.queryByRole("button", { name: "Undo" })).toBeNull();
+    expect(screen.queryByRole("button", { name: "Center canvas" })).toBeNull();
+    expect(container.querySelector('[data-panel-type="toolbar"]')).toBeNull();
+  });
+
+  it("renders app-specific canvas content inside the shared runtime canvas slot", () => {
+    const { container } = render(
+      <ToolcraftApp
+        canvasContent={<CanvasSlotProbe />}
+        renderDefaultCanvasMedia={false}
+        schema={createSchema()}
+      />,
+    );
+
+    const editableCanvas = container.querySelector<HTMLElement>(
+      "[data-toolcraft-editable-canvas]",
+    );
+    const canvasSlot = container.querySelector<HTMLElement>(
+      "[data-toolcraft-canvas-slot]",
+    );
+
+    expect(editableCanvas).toBeTruthy();
+    expect(canvasSlot?.parentElement).toBe(editableCanvas);
+    expect(screen.getByTestId("canvas-slot-probe").textContent).toBe("320:0");
+  });
+
+  it("lets app-specific canvas renderers replace default media rendering while keeping upload state", async () => {
+    render(
+      <ToolcraftApp
+        canvasContent={<CanvasSlotProbe />}
+        renderDefaultCanvasMedia={false}
+        schema={createSchema()}
+      />,
+    );
+
+    const canvas = screen.getByRole("application", { name: "Canvas viewport" });
+    const file = new File(["image"], "shader-input.png", {
+      type: "image/png",
+    });
+
+    fireEvent.drop(canvas, {
+      clientX: 0,
+      clientY: 0,
+      dataTransfer: {
+        files: [file],
+      },
+    });
+
+    await waitFor(() => {
+      expect(screen.getByTestId("canvas-slot-probe").textContent).toBe("320:1");
+    });
+    expect(
+      screen.queryByRole("button", { name: "Select shader-input.png" }),
+    ).toBeNull();
+  });
+
+  it("preserves reset, upload, and toolbar history without manual shell wiring", async () => {
+    render(<ToolcraftApp schema={createSchema()} />);
+
+    fireEvent.change(screen.getByDisplayValue("Initial prompt"), {
+      target: { value: "Updated prompt" },
+    });
+    expect(screen.getByDisplayValue("Updated prompt")).toBeTruthy();
+
+    fireEvent.click(screen.getByRole("button", { name: "Reset controls" }));
+    expect(screen.getByDisplayValue("Initial prompt")).toBeTruthy();
+
+    const canvas = screen.getByRole("application", { name: "Canvas viewport" });
+    const file = new File(["image"], "material.png", { type: "image/png" });
+
+    fireEvent.drop(canvas, {
+      clientX: 0,
+      clientY: 0,
+      dataTransfer: {
+        files: [file],
+      },
+    });
+
+    await waitFor(() => {
+      expect(
+        screen.getByRole("button", { name: "Select material.png" }),
+      ).toBeTruthy();
+    });
+
+    fireEvent.click(screen.getByRole("button", { name: "Undo" }));
+
+    expect(
+      screen.queryByRole("button", { name: "Select material.png" }),
+    ).toBeNull();
+    expect(
+      (screen.getByRole("button", { name: "Redo" }) as HTMLButtonElement)
+        .disabled,
+    ).toBe(false);
+  });
+
+  it("routes app-specific sticky footer actions from the assembled app shell", () => {
+    const handledActions: string[] = [];
+    const schema = defineToolcraft({
+      canvas: { enabled: true },
+      panels: {
+        controls: {
+          sections: [
+            {
+              controls: {
+                footer: {
+                  actions: [
+                    {
+                      icon: "export",
+                      label: "Export image",
+                      value: "export",
+                      variant: "default",
+                    },
+                  ],
+                  target: "panel.actions",
+                  type: "panelActions",
+                },
+              },
+              title: "Export",
+            },
+          ],
+          title: "Controls",
+        },
+      },
+    });
+
+    render(
+      <ToolcraftApp
+        onPanelAction={({ action }) => {
+          handledActions.push(action.value);
+        }}
+        schema={schema}
+      />,
+    );
+
+    fireEvent.click(screen.getByRole("button", { name: "Export image" }));
+
+    expect(handledActions).toEqual(["export"]);
+  });
+
+  it("renders registered custom controls through the shared runtime setter", async () => {
+    function CustomPowerControl({
+      name,
+      setValue,
+      value,
+    }: ToolcraftCustomControlRendererProps): React.JSX.Element {
+      return (
+        <button type="button" onClick={() => setValue(42)}>
+          {name}: {String(value)}
+        </button>
+      );
+    }
+
+    render(
+      <ToolcraftApp
+        canvasContent={<CustomValueProbe />}
+        controlRenderers={{
+          customPower: CustomPowerControl,
+        }}
+        schema={createCustomControlSchema()}
+      />,
+    );
+
+    expect(screen.getByRole("button", { name: "Power: 10" })).toBeTruthy();
+    expect(screen.getByTestId("custom-value-probe").textContent).toBe("10");
+
+    fireEvent.click(screen.getByRole("button", { name: "Power: 10" }));
+
+    await waitFor(() => {
+      expect(screen.getByTestId("custom-value-probe").textContent).toBe("42");
+    });
+  });
+});