@pixel-point/toolcraft 0.0.15 → 0.0.16

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

@@ -0,0 +1,332 @@
+import { act, cleanup, fireEvent, render, screen } from "@testing-library/react";
+import * as React from "react";
+import { afterEach, describe, expect, it, vi } from "vitest";
+
+import { defineToolcraft } from "../../../schema/define-toolcraft";
+import {
+  getToolcraftCanvasSizeTargetDimension,
+  toolcraftRuntimeOwnedTargets,
+  toolcraftTimelinePanelExtendedTarget,
+  toolcraftTimelinePanelVisibleTarget,
+} from "../../../schema/runtime-targets";
+import type { ToolcraftExternalStore } from "../../../state/toolcraft-external-store";
+import { ToolcraftRoot } from "../../app-shell/toolcraft-root";
+import { useToolcraftStore } from "../../app-shell/toolcraft-store-context";
+import { ControlsPanel } from "../controls-panel";
+
+const counters = vi.hoisted(() => ({
+  commits: new Map<string, number>(),
+  executions: new Map<string, number>(),
+}));
+const settingsTransfer = vi.hoisted(() => ({
+  download: vi.fn(),
+  import: vi.fn(),
+}));
+
+function increment(counter: Map<string, number>, id: string): void {
+  counter.set(id, (counter.get(id) ?? 0) + 1);
+}
+
+function CommitProbe({ id }: { id: string }): null {
+  React.useLayoutEffect(() => {
+    increment(counters.commits, id);
+  });
+
+  return null;
+}
+
+vi.mock("../../app-shell/settings-transfer", () => ({
+  downloadToolcraftSettings: settingsTransfer.download,
+  importToolcraftSettings: settingsTransfer.import,
+}));
+
+vi.mock("../renderers/controls-panel-basic-renderers", async (importOriginal) => {
+  const actual = await importOriginal<
+    typeof import("../renderers/controls-panel-basic-renderers")
+  >();
+
+  return {
+    ...actual,
+    renderBasicControl: (
+      args: Parameters<typeof actual.renderBasicControl>[0],
+    ): React.ReactNode => {
+      increment(counters.executions, args.id);
+      return (
+        <>
+          <CommitProbe id={args.id} />
+          {actual.renderBasicControl(args)}
+        </>
+      );
+    },
+  };
+});
+
+vi.mock("../renderers/controls-panel-media-renderer", async (importOriginal) => {
+  const actual = await importOriginal<
+    typeof import("../renderers/controls-panel-media-renderer")
+  >();
+
+  return {
+    ...actual,
+    renderFileDropControl: (
+      args: Parameters<typeof actual.renderFileDropControl>[0],
+    ): React.ReactNode => {
+      increment(counters.executions, args.id);
+      return (
+        <>
+          <CommitProbe id={args.id} />
+          {actual.renderFileDropControl(args)}
+        </>
+      );
+    },
+  };
+});
+
+function CaptureStore({
+  capture,
+}: {
+  capture: (store: ToolcraftExternalStore) => void;
+}): null {
+  capture(useToolcraftStore());
+  return null;
+}
+
+function resetCounters(): void {
+  counters.commits.clear();
+  counters.executions.clear();
+}
+
+function count(id: string): { commits: number; executions: number } {
+  return {
+    commits: counters.commits.get(id) ?? 0,
+    executions: counters.executions.get(id) ?? 0,
+  };
+}
+
+function renderPanel(schema: ReturnType<typeof defineToolcraft>): ToolcraftExternalStore {
+  let store: ToolcraftExternalStore | undefined;
+
+  render(
+    <ToolcraftRoot schema={schema}>
+      <CaptureStore capture={(value) => { store = value; }} />
+      <ControlsPanel framed={false} />
+    </ToolcraftRoot>,
+  );
+
+  if (!store) {
+    throw new Error("Expected Toolcraft store to be captured.");
+  }
+
+  resetCounters();
+  return store;
+}
+
+const canvasWidthTarget = toolcraftRuntimeOwnedTargets.find(
+  (target) => getToolcraftCanvasSizeTargetDimension(target) === "width",
+);
+
+if (!canvasWidthTarget) {
+  throw new Error("Expected a runtime canvas width target.");
+}
+
+afterEach(() => {
+  cleanup();
+  resetCounters();
+  settingsTransfer.download.mockReset();
+  settingsTransfer.import.mockReset();
+  window.localStorage.clear();
+});
+
+describe("ControlsPanel dependency isolation", () => {
+  it("updates canvas size and timeline runtime-target controls independently", () => {
+    const schema = defineToolcraft({
+      canvas: {
+        enabled: true,
+        size: { height: 180, unit: "px", width: 320 },
+        sizing: { mode: "editable-output" },
+      },
+      panels: {
+        controls: {
+          sections: [
+            {
+              controls: {
+                timelineVisible: {
+                  defaultValue: true,
+                  label: "Timeline visible",
+                  target: toolcraftTimelinePanelVisibleTarget,
+                  type: "switch",
+                },
+              },
+              title: "Panel",
+            },
+          ],
+          title: "Controls",
+        },
+        timeline: { mode: "playback" },
+      },
+    });
+    const store = renderPanel(schema);
+
+    act(() => {
+      store.dispatch({
+        size: { height: 180, unit: "px", width: 640 },
+        type: "canvas.setSize",
+      });
+    });
+
+    expect(count("canvasWidth")).toEqual({ commits: 1, executions: 1 });
+    expect(count("timelineVisible")).toEqual({ commits: 0, executions: 0 });
+    expect(count("timelineExtended")).toEqual({ commits: 0, executions: 0 });
+    resetCounters();
+
+    act(() => {
+      store.dispatch({ hidden: true, panelId: "timeline", type: "panels.setHidden" });
+    });
+
+    expect(count("timelineVisible")).toEqual({ commits: 1, executions: 1 });
+    expect(count("canvasWidth")).toEqual({ commits: 0, executions: 0 });
+    expect(count("timelineExtended")).toEqual({ commits: 0, executions: 0 });
+    resetCounters();
+
+    act(() => {
+      store.dispatch({
+        target: toolcraftTimelinePanelExtendedTarget,
+        type: "controls.setValue",
+        value: true,
+      });
+    });
+
+    expect(count("timelineExtended")).toEqual({ commits: 1, executions: 1 });
+    expect(count("canvasWidth")).toEqual({ commits: 0, executions: 0 });
+    expect(count("timelineVisible")).toEqual({ commits: 0, executions: 0 });
+    expect(store.getState().canvas.size.width).toBe(640);
+    expect(canvasWidthTarget).toBe(
+      schema.panels.controls?.sections[0]?.controls.canvasWidth?.target,
+    );
+  });
+
+  it("updates a media renderer for media assets and canvas size only", () => {
+    const schema = defineToolcraft({
+      canvas: { enabled: true },
+      panels: {
+        controls: {
+          sections: [
+            {
+              controls: {
+                source: {
+                  label: "Source",
+                  target: "source.media",
+                  type: "fileDrop",
+                },
+                amount: {
+                  defaultValue: 1,
+                  label: "Amount",
+                  max: 10,
+                  min: 0,
+                  target: "effect.amount",
+                  type: "slider",
+                },
+              },
+              title: "Source",
+            },
+          ],
+          title: "Controls",
+        },
+      },
+    });
+    const sourceTarget = schema.panels.controls?.sections.find(
+      (section) => section.controls.source !== undefined,
+    )?.controls.source?.target;
+    const amountTarget = schema.panels.controls?.sections.find(
+      (section) => section.controls.amount !== undefined,
+    )?.controls.amount?.target;
+    const store = renderPanel(schema);
+
+    if (!sourceTarget || !amountTarget) {
+      throw new Error("Expected source and amount targets.");
+    }
+
+    act(() => {
+      store.dispatch({ target: amountTarget, type: "controls.setValue", value: 2 });
+    });
+
+    expect(count("amount")).toEqual({ commits: 1, executions: 1 });
+    expect(count("source")).toEqual({ commits: 0, executions: 0 });
+    resetCounters();
+
+    act(() => {
+      store.dispatch({
+        asset: {
+          dataUrl: "data:image/png;base64,test",
+          fileName: "source.png",
+          mimeType: "image/png",
+          position: { x: 0, y: 0 },
+          size: { height: 100, unit: "px", width: 100 },
+          sourceTarget,
+        },
+        type: "media.import",
+      });
+    });
+
+    expect(count("source")).toEqual({ commits: 1, executions: 1 });
+    expect(count("amount")).toEqual({ commits: 0, executions: 0 });
+    resetCounters();
+
+    act(() => {
+      store.dispatch({
+        size: { height: 360, unit: "px", width: 640 },
+        type: "canvas.setSize",
+      });
+    });
+
+    expect(count("source")).toEqual({ commits: 1, executions: 1 });
+    expect(count("amount")).toEqual({ commits: 0, executions: 0 });
+  });
+
+  it("reads the current live state when settings transfer is invoked", () => {
+    const schema = defineToolcraft({
+      canvas: { enabled: false },
+      panels: {
+        controls: {
+          sections: [
+            {
+              controls: {
+                prompt: {
+                  defaultValue: "Initial",
+                  label: "Prompt",
+                  target: "generation.prompt",
+                  type: "text",
+                },
+              },
+              title: "Prompt",
+            },
+          ],
+          title: "Controls",
+        },
+      },
+      settingsTransfer: true,
+    });
+    const promptTarget = schema.panels.controls?.sections.find(
+      (section) => section.title === "Prompt",
+    )?.controls.prompt?.target;
+    const store = renderPanel(schema);
+
+    if (!promptTarget) {
+      throw new Error("Expected prompt target.");
+    }
+
+    act(() => {
+      store.dispatch({
+        target: promptTarget,
+        type: "controls.setValue",
+        value: "Current",
+      });
+    });
+    fireEvent.click(screen.getByRole("button", { name: "Export Settings" }));
+
+    expect(settingsTransfer.download).toHaveBeenCalledTimes(1);
+    expect(settingsTransfer.download.mock.calls[0]?.[0].values[promptTarget]).toBe(
+      "Current",
+    );
+  });
+});

package/templates/runtime/react/controls-panel/__tests__/controls-panel.extensions-live-state.test.tsx

@@ -0,0 +1,135 @@
+import { act, cleanup, fireEvent, render, screen } from "@testing-library/react";
+import * as React from "react";
+import { afterEach, describe, expect, it, vi } from "vitest";
+
+import { defineToolcraft } from "../../../schema/define-toolcraft";
+import type { ToolcraftExternalStore } from "../../../state/toolcraft-external-store";
+import { ToolcraftRoot } from "../../app-shell/toolcraft-root";
+import { useToolcraftStore } from "../../app-shell/toolcraft-store-context";
+import type { ToolcraftCustomControlRendererProps } from "../control-renderers";
+import { ControlsPanel } from "../controls-panel";
+
+const extensionsSchema = defineToolcraft({
+  canvas: { enabled: true },
+  panels: {
+    controls: {
+      sections: [
+        {
+          controls: {
+            title: {
+              defaultValue: "Built in",
+              target: "document.title",
+              type: "text",
+            },
+            live: {
+              defaultValue: 10,
+              label: "Live",
+              target: "document.live",
+              type: "liveCustom",
+            },
+            export: {
+              actions: [{ label: "Export", value: "export" }],
+              target: "panel.actions",
+              type: "panelActions",
+            },
+          },
+          title: "Extensions",
+        },
+      ],
+      title: "Controls",
+    },
+  },
+});
+
+function CaptureStore({
+  capture,
+}: {
+  capture: (store: ToolcraftExternalStore) => void;
+}): null {
+  capture(useToolcraftStore());
+  return null;
+}
+
+afterEach(() => {
+  cleanup();
+  vi.restoreAllMocks();
+});
+
+describe("ControlsPanel extension live state", () => {
+  it("keeps built-in structure cold while a custom renderer receives effective state", () => {
+    const renderCustom = vi.fn(
+      ({ state, value }: ToolcraftCustomControlRendererProps) => (
+        <output data-testid="live-custom-state">
+          {state.timeline.currentTimeSeconds}:{state.canvas.offset.x}:
+          {state.canvas.offset.y}:{state.canvas.zoom}:{String(value)}
+        </output>
+      ),
+    );
+    let store: ToolcraftExternalStore | undefined;
+
+    render(
+      <ToolcraftRoot schema={extensionsSchema}>
+        <ControlsPanel
+          controlRenderers={{ liveCustom: renderCustom }}
+          framed={false}
+        />
+        <CaptureStore capture={(value) => { store = value; }} />
+      </ToolcraftRoot>,
+    );
+    const builtInInput = screen.getByDisplayValue("Built in");
+    const initialCustomRenders = renderCustom.mock.calls.length;
+
+    act(() => {
+      store?.dispatchTransient({
+        currentTimeSeconds: 3,
+        type: "timeline.setCurrentTime",
+      });
+      store?.dispatchTransient({
+        offset: { x: 24, y: -12 },
+        type: "canvas.setViewport",
+        zoom: 150,
+      });
+    });
+
+    expect(screen.getByDisplayValue("Built in")).toBe(builtInInput);
+    expect(screen.getByTestId("live-custom-state").textContent).toBe(
+      "3:24:-12:150:10",
+    );
+    expect(renderCustom.mock.calls.length).toBeGreaterThan(initialCustomRenders);
+  });
+
+  it("reads effective state when an app action starts", () => {
+    const onPanelAction = vi.fn();
+    let store: ToolcraftExternalStore | undefined;
+
+    render(
+      <ToolcraftRoot schema={extensionsSchema}>
+        <ControlsPanel
+          framed={false}
+          onPanelAction={onPanelAction}
+        />
+        <CaptureStore capture={(value) => { store = value; }} />
+      </ToolcraftRoot>,
+    );
+    act(() => {
+      store?.dispatchTransient({
+        currentTimeSeconds: 2.5,
+        type: "timeline.setCurrentTime",
+      });
+      store?.dispatchTransient({
+        offset: { x: 18, y: -9 },
+        type: "canvas.setViewport",
+        zoom: 125,
+      });
+    });
+
+    fireEvent.click(screen.getByRole("button", { name: "Export" }));
+
+    const actionState = onPanelAction.mock.calls[0]?.[0].state;
+    expect(actionState.timeline.currentTimeSeconds).toBe(2.5);
+    expect(actionState.canvas).toMatchObject({
+      offset: { x: 18, y: -9 },
+      zoom: 125,
+    });
+  });
+});

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

@@ -66,6 +66,53 @@ describe("ControlsPanel footer actions and settings transfer", () => {
     expect(handledActions).toEqual(["download:Generation Controls"]);
   });
 
+  it("exposes the runtime model compositor to product export actions", async () => {
+    const schema = defineToolcraft({
+      canvas: { enabled: true },
+      panels: {
+        controls: {
+          sections: [
+            {
+              actionGroup: "secondary",
+              controls: {
+                footer: {
+                  actions: [
+                    {
+                      label: "Export PNG",
+                      value: "export-png",
+                      variant: "default",
+                    },
+                  ],
+                  target: "panel.actions",
+                  type: "panelActions",
+                },
+              },
+            },
+          ],
+          title: "Controls",
+        },
+      },
+    });
+    const canvas = {
+      getContext: vi.fn(() => ({ drawImage: vi.fn() })),
+      height: 1080,
+      width: 1920,
+    } as unknown as HTMLCanvasElement;
+    let renderedModels: Promise<number> | undefined;
+
+    renderControlsPanelWithSchema(schema, {
+      onPanelAction: ({ renderModelsToCanvas }) => {
+        renderedModels = renderModelsToCanvas(canvas);
+        return renderedModels;
+      },
+    });
+
+    fireEvent.click(screen.getByRole("button", { name: "Export PNG" }));
+
+    await expect(renderedModels).resolves.toBe(0);
+    expect(canvas.getContext).toHaveBeenCalledWith("2d");
+  });
+
   it("renders runtime settings transfer as a headerless body section instead of sticky footer actions", () => {
     const schema = defineToolcraft({
       canvas: { enabled: true, size: { height: 720, unit: "px", width: 1280 } },
@@ -134,6 +181,9 @@ describe("ControlsPanel footer actions and settings transfer", () => {
     expect(firstSection?.querySelector('[data-slot="panel-section-collapsible-body"]')).toBeNull();
     expect(firstSection?.getAttribute("data-collapsed")).toBeNull();
     expect(firstSection?.className).toContain("py-0");
+    expect(firstSection?.className).toContain(
+      "[&>[data-control-list]]:pt-3",
+    );
     expect(firstSection?.querySelector("[data-control-list]")?.className).toContain("pt-2");
     expect(firstSection?.querySelector("[data-control-list]")?.className).toContain("pb-6");
     expect(firstInlineGroup?.textContent).toContain("Canvas width");

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

@@ -92,9 +92,12 @@ describe("ControlsPanel inline layout", () => {
     expect(inlineGroup?.textContent).toContain("Snap Y");
   });
 
-  it("renders the managed background toggle plus unlabeled color row as equal-width inline columns", () => {
+  it("renders Background and Infinity inline with Background color below in runtime Setup", () => {
     const schema = defineToolcraft({
-      canvas: { enabled: false },
+      canvas: {
+        enabled: true,
+        sizing: { mode: "editable-output" },
+      },
       panels: {
         controls: {
           sections: [
@@ -131,18 +134,31 @@ describe("ControlsPanel inline layout", () => {
     });
 
     const { container } = renderControlsPanelWithSchema(schema);
-    const toggleParameterGroup = container.querySelector(
-      '[data-control-layout="inline"][data-control-layout-kind="toggleParameter"]',
+    const backgroundField = screen.getByText("Background").closest('[role="group"]');
+    const infinityField = screen
+      .getByText("Infinity canvas")
+      .closest('[role="group"]');
+    const modeGroup = backgroundField?.closest(
+      '[data-control-layout="inline"][data-control-layout-columns="2"]',
     );
 
     expect(screen.getAllByText("Background")).toHaveLength(1);
-    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(
+    expect(screen.getByText("Background color")).toBeTruthy();
+    expect(
+      screen.queryByRole("button", { name: "Background help" }),
+    ).toBeNull();
+    expect(screen.getAllByRole("switch")).toHaveLength(2);
+    expect(modeGroup).toBeTruthy();
+    expect(infinityField?.closest('[data-control-layout="inline"]')).toBe(modeGroup);
+    expect(modeGroup?.className).toContain("gap-x-2.5");
+    expect(modeGroup?.getAttribute("style")).toContain(
       "repeat(2, minmax(0, 1fr))",
     );
+    expect(
+      container.querySelector(
+        '[data-control-layout="inline"][data-control-layout-kind="toggleParameter"]',
+      ),
+    ).toBeNull();
   });
 
   it("renders short visible toggle plus parameter rows as equal-width toggle-parameter rows", () => {

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

@@ -7,6 +7,37 @@ import {
 } from "../testing/controls-panel-test-utils";
 
 describe("ControlsPanel media upload arbitrary files", () => {
+  it("offers folder selection only for model source packages", () => {
+    const schema = defineToolcraft({
+      canvas: { enabled: true, upload: true },
+      panels: {
+        controls: {
+          sections: [
+            {
+              controls: {
+                source: {
+                  assetKind: "model",
+                  label: "Model",
+                  target: "source.model",
+                  type: "fileDrop",
+                },
+              },
+              layout: "standalone",
+              title: "Source",
+            },
+          ],
+          title: "Generation Controls",
+        },
+      },
+    });
+
+    renderControlsPanelWithSchema(schema);
+
+    expect(screen.getByRole("button", { name: "Choose files" })).toBeTruthy();
+    expect(screen.getByRole("button", { name: "Choose folder" })).toBeTruthy();
+    expect(screen.getByLabelText("Click to upload a model folder")).toBeTruthy();
+  });
+
   it("renders arbitrary file uploads as a sortable file list", () => {
     const schema = defineToolcraft({
       canvas: { enabled: true, upload: true },
@@ -68,7 +99,7 @@ describe("ControlsPanel media upload arbitrary files", () => {
 
     expect(fileList).toBeTruthy();
     expect(fileRows).toHaveLength(2);
-    expect(fileDividers).toHaveLength(2);
+    expect(fileDividers).toHaveLength(1);
     expect(screen.getByText("one.txt")).toBeTruthy();
     expect(screen.getByText("two.json")).toBeTruthy();
     expect(screen.getByText("one.txt").className).toContain("text-xs");
@@ -79,8 +110,8 @@ describe("ControlsPanel media upload arbitrary files", () => {
     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");
+    expect(fileRows[0]?.getAttribute("role")).toBeNull();
+    expect(screen.getByRole("button", { name: "Reorder one.txt" })).toBeTruthy();
 
     fireEvent.click(screen.getByRole("button", { name: "Remove two.json" }));
 
@@ -117,5 +148,6 @@ describe("ControlsPanel media upload arbitrary files", () => {
     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();
+    expect(screen.queryByRole("button", { name: "Choose folder" })).toBeNull();
   });
 });