@pixel-point/toolcraft 0.0.14 → 0.0.15

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

@@ -0,0 +1,175 @@
+import { describe, expect, it } from "vitest";
+import {
+  createSchema,
+  defineToolcraft,
+  fireEvent,
+  renderControlsPanel,
+  renderControlsPanelWithSchema,
+  screen,
+  waitFor,
+} from "../testing/controls-panel-test-utils";
+
+describe("ControlsPanel keyframe controls", () => {
+  it("renders keyframe actions for timeline-expanded keyframe-capable controls", () => {
+    renderControlsPanel(undefined, { timeline: { expanded: true, keyframeGroups: [] } });
+
+    expect(screen.getByRole("button", { name: "Add Anchor keyframe" })).toBeTruthy();
+    expect(screen.getByRole("button", { name: "Add Opacity keyframe" })).toBeTruthy();
+    expect(screen.getByRole("button", { name: "Add Static opacity keyframe" })).toBeTruthy();
+    expect(screen.getByRole("button", { name: "Add Output Mix keyframe" })).toBeTruthy();
+    expect(screen.getByRole("button", { name: "Add Curves keyframe" })).toBeTruthy();
+    expect(screen.queryByRole("button", { name: "Add Prompt keyframe" })).toBeNull();
+    expect(screen.queryByRole("button", { name: "Add Blend keyframe" })).toBeNull();
+    expect(screen.queryByRole("button", { name: "Add Channels keyframe" })).toBeNull();
+    expect(screen.queryByRole("button", { name: "Add Enabled keyframe" })).toBeNull();
+    expect(screen.queryByRole("button", { name: "Add Canvas width keyframe" })).toBeNull();
+    expect(
+      screen
+        .getByRole("button", { name: "Add Opacity keyframe" })
+        .closest("[data-control-field-label]"),
+    ).toBeTruthy();
+    expect(
+      screen
+        .getByRole("button", { name: "Add Output Mix keyframe" })
+        .closest("[data-control-field-label]"),
+    ).toBeTruthy();
+    expect(
+      screen
+        .getByRole("button", { name: "Add Curves keyframe" })
+        .closest("[data-control-field-label]"),
+    ).toBeTruthy();
+
+    fireEvent.click(screen.getByRole("button", { name: "Add Opacity keyframe" }));
+
+    expect(screen.getByTestId("timeline-expanded").textContent).toBe("true");
+    const opacityKeyframeButton = screen.getByRole("button", {
+      name: "Disable Opacity keyframes",
+    });
+
+    expect(opacityKeyframeButton.className).toContain(
+      "!text-[color:var(--link)]",
+    );
+    expect(opacityKeyframeButton.className).toContain(
+      "data-popup-open:!text-[color:var(--link)]",
+    );
+    expect(opacityKeyframeButton.className).toContain(
+      "[&_svg]:!fill-[color:var(--link)]",
+    );
+    expect(opacityKeyframeButton.style.color).toBe("var(--link)");
+    expect(screen.getByTestId("timeline-keyframes").textContent).toContain(
+      '"controlId":"selectedLayer.opacity"',
+    );
+    expect(screen.getByTestId("timeline-keyframes").textContent).toContain(
+      '"valueLabel":"75%"',
+    );
+    expect(screen.getByTestId("timeline-keyframes").textContent).toContain('"value":75');
+
+    expect(screen.queryByRole("button", { name: "Add Prompt keyframe" })).toBeNull();
+  });
+
+  it("updates the selected control keyframe instead of the current playhead time", () => {
+    const schema = defineToolcraft({
+      canvas: { enabled: true },
+      panels: {
+        controls: {
+          sections: [
+            {
+              controls: {
+                range: {
+                  defaultValue: { end: "100%", start: "0%" },
+                  label: "Range",
+                  target: "shape.range",
+                  type: "rangeInput",
+                },
+              },
+            },
+          ],
+          title: "Controls",
+        },
+        timeline: true,
+      },
+    });
+
+    renderControlsPanelWithSchema(schema, {}, {
+      timeline: {
+        currentTimeSeconds: 4,
+        expanded: true,
+        keyframeGroups: [
+          {
+            controlId: "shape.range",
+            keyframes: [
+              {
+                controlId: "shape.range",
+                controlLabel: "Range",
+                id: "shape.range::2",
+                timeSeconds: 2,
+                value: { end: "100%", start: "0%" },
+                valueLabel: "0% - 100%",
+              },
+            ],
+            label: "Range",
+          },
+        ],
+        selectedKeyframeId: "shape.range::2",
+      },
+    });
+
+    fireEvent.change(screen.getByLabelText("Range start"), {
+      target: { value: "25%" },
+    });
+    fireEvent.blur(screen.getByLabelText("Range start"));
+
+    const keyframeGroups = JSON.parse(
+      screen.getByTestId("timeline-keyframes").textContent ?? "[]",
+    ) as Array<{
+      keyframes: Array<{ id: string; timeSeconds: number; value: { end: string; start: string } }>;
+    }>;
+
+    expect(keyframeGroups[0]?.keyframes).toHaveLength(1);
+    expect(keyframeGroups[0]?.keyframes[0]).toMatchObject({
+      id: "shape.range::2",
+      timeSeconds: 2,
+      value: { end: "100%", start: "25%" },
+    });
+  });
+
+  it("keeps keyframe actions hidden while the timeline is collapsed", () => {
+    renderControlsPanel();
+
+    expect(screen.getByTestId("timeline-expanded").textContent).toBe("false");
+    expect(screen.queryByRole("button", { name: "Add Prompt keyframe" })).toBeNull();
+    expect(screen.queryByRole("button", { name: "Add Opacity keyframe" })).toBeNull();
+  });
+
+  it("keeps keyframe actions hidden for playback-only timeline apps", () => {
+    const schema = defineToolcraft({
+      canvas: { enabled: true },
+      panels: {
+        controls: createSchema().panels.controls,
+        timeline: { mode: "playback" },
+      },
+    });
+
+    renderControlsPanelWithSchema(schema, undefined, {
+      timeline: { expanded: true, keyframeGroups: [] },
+    });
+
+    expect(screen.getByTestId("timeline-expanded").textContent).toBe("true");
+    expect(screen.queryByRole("button", { name: "Add Prompt keyframe" })).toBeNull();
+    expect(screen.queryByRole("button", { name: "Add Opacity keyframe" })).toBeNull();
+  });
+
+  it("suppresses control transitions when keyframe controls appear", async () => {
+    const { container } = renderControlsPanel();
+    const content = () =>
+      container.querySelector('[data-slot="toolcraft-panel-content"]');
+
+    await waitFor(() => {
+      expect(content()?.getAttribute("data-toolcraft-controls-mounting")).toBeNull();
+    });
+
+    fireEvent.click(screen.getByRole("button", { name: "Expand timeline" }));
+
+    expect(content()?.getAttribute("data-toolcraft-controls-mounting")).toBe("true");
+  });
+});

package/templates/runtime/react/controls-panel/__tests__/controls-panel.media-upload-files.test.tsx

@@ -0,0 +1,121 @@
+import { describe, expect, it } from "vitest";
+import {
+  defineToolcraft,
+  fireEvent,
+  renderControlsPanelWithSchema,
+  screen,
+} from "../testing/controls-panel-test-utils";
+
+describe("ControlsPanel media upload arbitrary files", () => {
+  it("renders arbitrary file uploads as a sortable file list", () => {
+    const schema = defineToolcraft({
+      canvas: { enabled: true, upload: true },
+      panels: {
+        controls: {
+          sections: [
+            {
+              controls: {
+                source: {
+                  assetKind: "file",
+                  label: "Files",
+                  multiple: true,
+                  target: "input.files",
+                  type: "fileDrop",
+                },
+              },
+              layout: "standalone",
+              title: "Input",
+            },
+          ],
+          title: "Generation Controls",
+        },
+      },
+    });
+
+    const { container } = renderControlsPanelWithSchema(schema, undefined, {
+      layers: [
+        { id: "layer-1", kind: "layer", name: "one", visible: true },
+        { id: "layer-2", kind: "layer", name: "two", visible: true },
+      ],
+      mediaAssets: [
+        {
+          assetKind: "file",
+          dataUrl: "data:text/plain;base64,b25l",
+          fileName: "one.txt",
+          id: "media-1",
+          layerId: "layer-1",
+          mimeType: "text/plain",
+          position: { x: 0, y: 0 },
+          sourceTarget: "input.files",
+        },
+        {
+          assetKind: "file",
+          dataUrl: "data:application/json;base64,e30=",
+          fileName: "two.json",
+          id: "media-2",
+          layerId: "layer-2",
+          mimeType: "application/json",
+          position: { x: 0, y: 0 },
+          sourceTarget: "input.files",
+        },
+      ],
+      selectedLayerId: "layer-2",
+    });
+
+    const fileList = container.querySelector('[data-slot="file-upload-file-list"]');
+    const fileRows = container.querySelectorAll('[data-slot="file-upload-file-item"]');
+    const fileDividers = container.querySelectorAll('[data-slot="file-upload-file-divider"]');
+
+    expect(fileList).toBeTruthy();
+    expect(fileRows).toHaveLength(2);
+    expect(fileDividers).toHaveLength(2);
+    expect(screen.getByText("one.txt")).toBeTruthy();
+    expect(screen.getByText("two.json")).toBeTruthy();
+    expect(screen.getByText("one.txt").className).toContain("text-xs");
+    expect(screen.getByText("one.txt").className).not.toContain("truncate");
+    expect(screen.getByText("one.txt").className).toContain("mask-image");
+    expect(screen.getByRole("button", { name: "Remove one.txt" })).toBeTruthy();
+    expect(screen.getByRole("button", { name: "Add a new file" })).toBeTruthy();
+    expect(fileRows[0]?.className).not.toContain("border-b");
+    expect(fileRows[0]?.className).toContain("hover:bg");
+    expect(fileDividers[0]?.className).toContain("var(--border)_5%");
+    expect(fileRows[0]?.getAttribute("role")).toBe("button");
+    expect(fileRows[0]?.getAttribute("tabindex")).toBe("0");
+
+    fireEvent.click(screen.getByRole("button", { name: "Remove two.json" }));
+
+    expect(screen.getByTestId("media-count").textContent).toBe("1");
+    expect(screen.queryByText("two.json")).toBeNull();
+  });
+
+  it("renders the arbitrary file uploader empty state", () => {
+    const schema = defineToolcraft({
+      canvas: { enabled: true, upload: true },
+      panels: {
+        controls: {
+          sections: [
+            {
+              controls: {
+                source: {
+                  assetKind: "file",
+                  label: "Files",
+                  target: "input.files",
+                  type: "fileDrop",
+                },
+              },
+              layout: "standalone",
+              title: "Input",
+            },
+          ],
+          title: "Generation Controls",
+        },
+      },
+    });
+
+    renderControlsPanelWithSchema(schema);
+
+    expect(screen.getByText("Click to upload a file")).toBeTruthy();
+    expect(screen.getByText("or drag it onto the canvas")).toBeTruthy();
+    expect(screen.queryByText("Click to upload an image")).toBeNull();
+  });
+});

package/templates/runtime/react/controls-panel/__tests__/controls-panel.media-upload-image.test.tsx

@@ -0,0 +1,363 @@
+import { describe, expect, it } from "vitest";
+import {
+  CanvasShell,
+  ControlsPanel,
+  defineToolcraft,
+  fireEvent,
+  render,
+  renderControlsPanelWithSchema,
+  screen,
+  StateProbe,
+  ToolcraftRoot,
+  waitFor,
+} from "../testing/controls-panel-test-utils";
+
+describe("ControlsPanel media upload image attachments", () => {
+  it("renders single-layer file uploads as a removable preview", () => {
+    const schema = defineToolcraft({
+      canvas: { enabled: true, upload: true },
+      panels: {
+        controls: {
+          sections: [
+            {
+              controls: {
+                source: {
+                  accept: "PNG, SVG",
+                  label: "Image",
+                  target: "input.source",
+                  type: "fileDrop",
+                },
+              },
+              layout: "standalone",
+              title: "Input",
+            },
+          ],
+          title: "Generation Controls",
+        },
+      },
+    });
+
+    const { container } = renderControlsPanelWithSchema(schema, undefined, {
+      layers: [
+        {
+          id: "layer-1",
+          kind: "layer",
+          name: "material",
+          visible: true,
+        },
+      ],
+      mediaAssets: [
+        {
+          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: "material.svg",
+          id: "media-1",
+          layerId: "layer-1",
+          mimeType: "image/svg+xml",
+          position: { x: 0, y: 0 },
+          size: { height: 64, unit: "px", width: 96 },
+        },
+      ],
+      selectedLayerId: "layer-1",
+    });
+
+    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" }));
+
+    expect(screen.getByTestId("media-count").textContent).toBe("0");
+    expect(screen.queryByRole("img", { name: "material.svg" })).toBeNull();
+    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 },
+      panels: {
+        controls: {
+          sections: [
+            {
+              controls: {
+                source: {
+                  accept: "PNG, SVG",
+                  label: "Image",
+                  target: "input.source",
+                  type: "fileDrop",
+                },
+              },
+              layout: "standalone",
+              title: "Input",
+            },
+          ],
+          title: "Generation Controls",
+        },
+      },
+    });
+
+    render(
+      <ToolcraftRoot
+        initialState={{
+          layers: [
+            {
+              id: "layer-1",
+              kind: "layer",
+              name: "material",
+              visible: true,
+            },
+          ],
+          mediaAssets: [
+            {
+              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: "material.svg",
+              id: "media-1",
+              layerId: "layer-1",
+              mimeType: "image/svg+xml",
+              position: { x: 0, y: 0 },
+              size: { height: 64, unit: "px", width: 96 },
+            },
+          ],
+          selectedLayerId: "layer-1",
+        }}
+        schema={schema}
+      >
+        <div style={{ height: 320, position: "relative", width: 320 }}>
+          <CanvasShell />
+        </div>
+        <ControlsPanel framed={false} />
+        <StateProbe />
+      </ToolcraftRoot>,
+    );
+
+    expect(screen.getByRole("button", { name: "Select material.svg" })).toBeTruthy();
+    expect(screen.getAllByRole("img", { name: "material.svg" })).toHaveLength(2);
+
+    fireEvent.click(screen.getByRole("button", { name: "Remove image" }));
+
+    expect(screen.queryByRole("button", { name: "Select material.svg" })).toBeNull();
+    expect(screen.queryAllByRole("img", { name: "material.svg" })).toHaveLength(0);
+    expect(screen.getByText("Click to upload an image")).toBeTruthy();
+    expect(screen.getByTestId("media-count").textContent).toBe("0");
+  });
+
+  it("keeps file upload deletion in the layers panel for multi-layer apps", () => {
+    const schema = defineToolcraft({
+      canvas: { enabled: true, upload: true },
+      panels: {
+        controls: {
+          sections: [
+            {
+              controls: {
+                source: {
+                  accept: "PNG, SVG",
+                  label: "Image",
+                  target: "input.source",
+                  type: "fileDrop",
+                },
+              },
+              layout: "standalone",
+              title: "Input",
+            },
+          ],
+          title: "Generation Controls",
+        },
+        layers: true,
+      },
+    });
+
+    renderControlsPanelWithSchema(schema, undefined, {
+      layers: [
+        {
+          id: "layer-1",
+          kind: "layer",
+          name: "material",
+          visible: true,
+        },
+      ],
+      mediaAssets: [
+        {
+          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: "material.svg",
+          id: "media-1",
+          layerId: "layer-1",
+          mimeType: "image/svg+xml",
+          position: { x: 0, y: 0 },
+          size: { height: 64, unit: "px", width: 96 },
+        },
+      ],
+      selectedLayerId: "layer-1",
+    });
+
+    expect(screen.queryByRole("img", { name: "material.svg" })).toBeNull();
+    expect(screen.queryByRole("button", { name: "Remove image" })).toBeNull();
+    expect(screen.getByText("Click to upload an image")).toBeTruthy();
+  });
+});