@pixel-point/toolcraft 0.0.17 → 0.0.19

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

@@ -0,0 +1,134 @@
+import { describe, expect, it } from "vitest";
+
+import {
+  defineToolcraft,
+  fireEvent,
+  renderControlsPanelWithSchema,
+  screen,
+  waitFor,
+} from "../testing/controls-panel-test-utils";
+
+describe("ControlsPanel applicable color layout", () => {
+  it("pairs mixed-section colors only inside the same semantic group", async () => {
+    const schema = defineToolcraft({
+      canvas: { enabled: true },
+      panels: {
+        controls: {
+          sections: [
+            {
+              controls: {
+                trackEnabled: {
+                  defaultValue: true,
+                  label: "Track",
+                  target: "track.enabled",
+                  type: "switch",
+                },
+                trackColor: {
+                  applicability: {
+                    all: [{ equals: true, target: "track.enabled" }],
+                    mode: "conditional",
+                  },
+                  defaultValue: { hex: "#F1F1F1" },
+                  label: "Track color",
+                  semanticGroup: "track-line",
+                  target: "track.color",
+                  type: "color",
+                },
+                lowerColor: {
+                  defaultValue: { hex: "#7A9CBD" },
+                  label: "Lower",
+                  semanticGroup: "track-range",
+                  target: "track.lower",
+                  type: "color",
+                },
+                upperColor: {
+                  defaultValue: { hex: "#52AAFF" },
+                  label: "Upper",
+                  semanticGroup: "track-range",
+                  target: "track.upper",
+                  type: "color",
+                },
+              },
+              title: "Track Appearance",
+            },
+          ],
+          title: "Generation Controls",
+        },
+      },
+    });
+
+    const { container } = renderControlsPanelWithSchema(schema);
+    const colorRows = [
+      ...container.querySelectorAll('[data-slot="color-control-grid"]'),
+    ];
+
+    expect(colorRows).toHaveLength(1);
+    expect(colorRows[0]?.textContent).toContain("Lower");
+    expect(colorRows[0]?.textContent).toContain("Upper");
+    expect(colorRows[0]?.textContent).not.toContain("Track color");
+
+    const trackSwitch = container.querySelector<HTMLElement>(
+      '[data-toolcraft-control-id="trackEnabled"] [role="switch"]',
+    );
+    expect(trackSwitch).toBeTruthy();
+    fireEvent.click(trackSwitch as HTMLElement);
+
+    await waitFor(() => {
+      expect(screen.queryByLabelText("Track color hex")).toBeNull();
+      expect(screen.getByLabelText("Lower hex")).toBeTruthy();
+      expect(screen.getByLabelText("Upper hex")).toBeTruthy();
+    });
+  });
+
+  it("keeps visible members of an implicit color bank when a peer is hidden", () => {
+    const schema = defineToolcraft({
+      canvas: { enabled: true },
+      panels: {
+        controls: {
+          sections: [
+            {
+              controls: {
+                secondaryEnabled: {
+                  defaultValue: false,
+                  label: "Secondary",
+                  target: "palette.secondaryEnabled",
+                  type: "switch",
+                },
+              },
+              title: "Palette Options",
+            },
+            {
+              controls: {
+                primaryColor: {
+                  defaultValue: { hex: "#F1F1F1" },
+                  label: "Primary",
+                  target: "palette.primary",
+                  type: "color",
+                },
+                secondaryColor: {
+                  applicability: {
+                    all: [
+                      { equals: true, target: "palette.secondaryEnabled" },
+                    ],
+                    mode: "conditional",
+                  },
+                  defaultValue: { hex: "#7A9CBD" },
+                  label: "Secondary",
+                  target: "palette.secondary",
+                  type: "color",
+                },
+              },
+              title: "Palette Roles",
+            },
+          ],
+          title: "Generation Controls",
+        },
+      },
+    });
+
+    renderControlsPanelWithSchema(schema);
+
+    expect(screen.getByLabelText("Primary hex")).toBeTruthy();
+    expect(screen.queryByLabelText("Secondary hex")).toBeNull();
+  });
+});

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

@@ -5,10 +5,25 @@ import {
   renderControlsPanel,
   renderControlsPanelWithSchema,
   screen,
-  waitFor
+  waitFor,
 } from "../testing/controls-panel-test-utils";
 
 describe("ControlsPanel color layout controls", () => {
+  it("stores real Color edits in the canonical string shape", async () => {
+    renderControlsPanel();
+    const input = screen.getByLabelText("Fill hex") as HTMLInputElement;
+
+    fireEvent.change(input, { target: { value: "#E02067" } });
+    fireEvent.keyDown(input, { key: "Enter" });
+
+    await waitFor(() => {
+      const values = JSON.parse(
+        screen.getByTestId("values-json").textContent ?? "{}",
+      );
+      expect(values["style.fill"]).toBe("#E02067");
+    });
+  });
+
   it("renders paired color controls as one compound color grid item", () => {
     renderControlsPanel();
 

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

@@ -136,7 +136,7 @@ describe("ControlsPanel conditional control visibility", () => {
     ).toHaveLength(0);
   });
 
-  it("renders only controls that match the current visibleWhen mode", async () => {
+  it("renders only applicable controls and preserves hidden values", async () => {
     const schema = defineToolcraft({
       canvas: { enabled: true },
       panels: {
@@ -145,6 +145,7 @@ describe("ControlsPanel conditional control visibility", () => {
             {
               controls: {
                 identityMode: {
+                  applicability: { mode: "always" },
                   defaultValue: "text",
                   label: "Identity",
                   options: [
@@ -155,24 +156,30 @@ describe("ControlsPanel conditional control visibility", () => {
                   type: "segmented",
                 },
                 partnerName: {
+                  applicability: {
+                    all: [
+                      { equals: "text", target: "coBrand.identityMode" },
+                      { equals: true, target: "coBrand.partnerEnabled" },
+                    ],
+                    mode: "conditional",
+                  },
                   defaultValue: "tRPC",
                   label: "Partner",
                   target: "coBrand.partnerName",
                   type: "text",
-                  visibleWhen: {
-                    equals: "text",
-                    target: "coBrand.identityMode",
-                  },
                 },
                 partnerLogo: {
+                  applicability: {
+                    all: [
+                      { equals: "logo", target: "coBrand.identityMode" },
+                      { equals: true, target: "coBrand.partnerEnabled" },
+                    ],
+                    mode: "conditional",
+                  },
                   defaultValue: "logo.svg",
                   label: "Partner logo",
                   target: "coBrand.partnerLogo",
                   type: "text",
-                  visibleWhen: {
-                    equals: "logo",
-                    target: "coBrand.identityMode",
-                  },
                 },
               },
               title: "Partner Lockup",
@@ -183,7 +190,9 @@ describe("ControlsPanel conditional control visibility", () => {
       },
     });
 
-    renderControlsPanelWithSchema(schema);
+    renderControlsPanelWithSchema(schema, {}, {
+      values: { "coBrand.partnerEnabled": true },
+    });
 
     const partnerInput = screen.getByDisplayValue("tRPC");
 
@@ -208,7 +217,7 @@ describe("ControlsPanel conditional control visibility", () => {
     });
   });
 
-  it("renders count-dependent controls through numeric visibleWhen conditions", () => {
+  it("renders count-dependent controls through numeric applicability", () => {
     const schema = defineToolcraft({
       canvas: { enabled: true },
       panels: {
@@ -217,6 +226,7 @@ describe("ControlsPanel conditional control visibility", () => {
             {
               controls: {
                 shadeCount: {
+                  applicability: { mode: "always" },
                   defaultValue: 2,
                   label: "Shades",
                   max: 5,
@@ -227,30 +237,41 @@ describe("ControlsPanel conditional control visibility", () => {
                   variant: "discrete",
                 },
                 shade1: {
+                  applicability: { mode: "always" },
                   defaultValue: { hex: "#FFFFFF" },
                   label: "Shade 1",
                   target: "shapes.color1",
                   type: "color",
                 },
                 shade2: {
+                  applicability: {
+                    all: [
+                      {
+                        greaterThanOrEqual: 2,
+                        target: "shapes.shadeCount",
+                      },
+                    ],
+                    mode: "conditional",
+                  },
                   defaultValue: { hex: "#DDDDDD" },
                   label: "Shade 2",
                   target: "shapes.color2",
                   type: "color",
-                  visibleWhen: {
-                    greaterThanOrEqual: 2,
-                    target: "shapes.shadeCount",
-                  },
                 },
                 shade3: {
+                  applicability: {
+                    all: [
+                      {
+                        greaterThanOrEqual: 3,
+                        target: "shapes.shadeCount",
+                      },
+                    ],
+                    mode: "conditional",
+                  },
                   defaultValue: { hex: "#BBBBBB" },
                   label: "Shade 3",
                   target: "shapes.color3",
                   type: "color",
-                  visibleWhen: {
-                    greaterThanOrEqual: 3,
-                    target: "shapes.shadeCount",
-                  },
                 },
               },
               title: "Shapes",

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

@@ -443,12 +443,14 @@ describe("ControlsPanel render isolation", () => {
                 fill: {
                   defaultValue: { hex: "#000000" },
                   label: "Fill",
+                  semanticGroup: "shape-colors",
                   target: "shape.fill",
                   type: "color",
                 },
                 stroke: {
                   defaultValue: { hex: "#ffffff" },
                   label: "Stroke",
+                  semanticGroup: "shape-colors",
                   target: "shape.stroke",
                   type: "color",
                 },

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

@@ -1,4 +1,4 @@
-import { ToolcraftSceneExportError } from "../../../export";
+import { ToolcraftSceneExportError } from "../../../export/export-frame";
 import { defaultToolcraftRuntimeSceneVisibility } from "../../../scene";
 import type { ToolcraftActionSchema } from "../../../schema/types";
 import {
@@ -118,4 +118,43 @@ describe("ControlsPanel scene export actions", () => {
     );
     expect(alert.textContent).toBe("The cropped scene is too large to export.");
   });
+
+  it("routes typed SVG export through runtime and never through onPanelAction", async () => {
+    const onPanelAction = vi.fn();
+    const renderFrame = vi.fn();
+    renderControlsPanelWithSchema(
+      createExportSchema([
+        {
+          label: "Export SVG",
+          role: "export-svg",
+          value: "export.svg",
+          variant: "default",
+        },
+      ]),
+      {
+        onPanelAction,
+        sceneExport: {
+          productSceneRequired: false,
+          svgExportRenderer: {
+            baseFileName: "scene",
+            renderFrame,
+          },
+          visibility: defaultToolcraftRuntimeSceneVisibility,
+        },
+      },
+    );
+
+    const exportButton = screen.getByRole("button", { name: "Export SVG" });
+    expect(
+      exportButton.querySelector('[data-icon-name="upload-simple"]'),
+    ).toBeTruthy();
+    fireEvent.click(exportButton);
+
+    const alert = await screen.findByRole("alert");
+    expect(renderFrame).toHaveBeenCalledOnce();
+    expect(alert.getAttribute("data-panel-action-feedback-code")).toBe(
+      "svg-content-empty",
+    );
+    expect(onPanelAction).not.toHaveBeenCalled();
+  });
 });

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

@@ -100,9 +100,9 @@ describe("ControlsPanel runtime setup controls", () => {
     fireEvent.blur(widthInput);
 
     expect(screen.getByTestId("canvas-size").textContent).toBe("1600,1080");
-    expect(screen.getAllByText("Custom...").length).toBeGreaterThan(0);
-    expect(screen.getByDisplayValue("40")).toBeTruthy();
-    expect(screen.getByDisplayValue("27")).toBeTruthy();
+    expect(screen.getAllByText("Custom").length).toBeGreaterThan(0);
+    expect(screen.queryByDisplayValue("40")).toBeNull();
+    expect(screen.queryByDisplayValue("27")).toBeNull();
     expect(JSON.parse(screen.getByTestId("values-json").textContent ?? "{}")).toMatchObject({
       "canvas.aspectRatio": {
         height: 27,

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

@@ -0,0 +1,59 @@
+import { describe, expect, it } from "vitest";
+import {
+  defineToolcraft,
+  fireEvent,
+  renderControlsPanelWithSchema,
+  screen,
+} from "../testing/controls-panel-test-utils";
+
+describe("ControlsPanel source collection", () => {
+  it("renders source-sized built-in color controls without cardinality actions", () => {
+    const schema = defineToolcraft({
+      canvas: { enabled: false },
+      panels: {
+        controls: {
+          sections: [
+            {
+              controls: {
+                sections: {
+                  defaultValue: [{ hex: "#DFFF1A" }, { hex: "#8CFF3A" }],
+                  itemControl: {
+                    label: "Section",
+                    type: "color",
+                  },
+                  label: "Sections",
+                  target: "fills.sections",
+                  type: "sourceCollection",
+                },
+              },
+              title: "Fill Sections",
+            },
+          ],
+          title: "Controls",
+        },
+      },
+    });
+
+    const { container } = renderControlsPanelWithSchema(schema);
+
+    expect(screen.queryByRole("button", { name: /Add/u })).toBeNull();
+    expect(screen.queryByRole("button", { name: /Remove/u })).toBeNull();
+    expect(screen.getByRole("button", { name: "Pick Section 1" })).toBeTruthy();
+    expect(screen.getByRole("textbox", { name: "Section 2 hex" })).toBeTruthy();
+    expect(
+      container.querySelector('[data-slot="source-collection-items-grid"]')
+        ?.children,
+    ).toHaveLength(2);
+
+    const secondColor = screen.getByRole("textbox", { name: "Section 2 hex" });
+
+    fireEvent.change(secondColor, { target: { value: "#123456" } });
+    fireEvent.blur(secondColor);
+
+    const values = JSON.parse(
+      screen.getByTestId("values-json").textContent ?? "{}",
+    );
+
+    expect(values["fills.sections"]).toEqual(["#DFFF1A", "#123456"]);
+  });
+});

package/templates/runtime/react/controls-panel/__tests__/controls-panel.source-color-bank.test.tsx

@@ -0,0 +1,67 @@
+import { describe, expect, it } from "vitest";
+import {
+  defineToolcraft,
+  fireEvent,
+  renderControlsPanelWithSchema,
+  screen,
+} from "../testing/controls-panel-test-utils";
+
+const sourceColors = Array.from({ length: 19 }, (_, index) => ({
+  hex: index === 18 ? "#654321" : "#DFFF1A",
+}));
+
+describe("ControlsPanel source color bank", () => {
+  it("keeps a source-sized badge palette on built-in color controls", () => {
+    const schema = defineToolcraft({
+      canvas: { enabled: false },
+      panels: {
+        controls: {
+          sections: [
+            {
+              controls: {
+                sections: {
+                  defaultValue: sourceColors,
+                  itemControl: {
+                    label: "Section",
+                    type: "color",
+                  },
+                  label: "Sections",
+                  target: "fills.sections",
+                  type: "sourceCollection",
+                },
+              },
+              title: "Fill Sections",
+            },
+          ],
+          title: "Controls",
+        },
+      },
+    });
+
+    const { container } = renderControlsPanelWithSchema(schema);
+
+    expect(
+      screen.getAllByRole("button", { name: /^Pick Section \d+$/u }),
+    ).toHaveLength(19);
+    expect(screen.getByRole("button", { name: "Pick Section 19" })).toBeTruthy();
+    expect(screen.queryByRole("button", { name: "Pick Section 20" })).toBeNull();
+    expect(screen.queryByRole("button", { name: /Add/u })).toBeNull();
+    expect(screen.queryByRole("button", { name: /Remove/u })).toBeNull();
+    expect(
+      container.querySelector('[data-slot="source-collection-items-grid"]')
+        ?.children,
+    ).toHaveLength(19);
+
+    const lastColor = screen.getByRole("textbox", { name: "Section 19 hex" });
+    fireEvent.change(lastColor, { target: { value: "#123456" } });
+    fireEvent.blur(lastColor);
+
+    const values = JSON.parse(
+      screen.getByTestId("values-json").textContent ?? "{}",
+    );
+    expect(values["fills.sections"]).toEqual([
+      ...sourceColors.slice(0, 18).map(({ hex }) => hex),
+      "#123456",
+    ]);
+  });
+});

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

@@ -60,7 +60,7 @@ describe("ControlsPanel vector pad interactions", () => {
     });
 
     const values = JSON.parse(screen.getByTestId("values-json").textContent ?? "{}");
-    expect(values["geometry.position"]).toEqual({ x: "-1.00", y: "-1.00" });
+    expect(values["geometry.position"]).toEqual({ x: -1, y: -1 });
   });
 
   it("resets a vector pad to its default value on double click", () => {
@@ -115,12 +115,12 @@ describe("ControlsPanel vector pad interactions", () => {
       JSON.parse(screen.getByTestId("values-json").textContent ?? "{}")[
         "geometry.position"
       ],
-    ).toEqual({ x: "-1.00", y: "-1.00" });
+    ).toEqual({ x: -1, y: -1 });
 
     fireEvent.doubleClick(pad);
 
     const values = JSON.parse(screen.getByTestId("values-json").textContent ?? "{}");
-    expect(values["geometry.position"]).toEqual({ x: "0.48", y: "-0.34" });
+    expect(values["geometry.position"]).toEqual({ x: 0.48, y: -0.34 });
     expect(screen.getByText("0.48, -0.34")).toBeTruthy();
   });
 
@@ -181,7 +181,7 @@ describe("ControlsPanel vector pad interactions", () => {
     });
 
     const values = JSON.parse(screen.getByTestId("values-json").textContent ?? "{}");
-    expect(values["geometry.position"]).toEqual({ x: "0.80", y: "0.00" });
+    expect(values["geometry.position"]).toEqual({ x: 0.8, y: 0 });
   });
 
   it("locks vector pad movement vertically when shift drag is y-dominant", () => {
@@ -241,7 +241,7 @@ describe("ControlsPanel vector pad interactions", () => {
     });
 
     const values = JSON.parse(screen.getByTestId("values-json").textContent ?? "{}");
-    expect(values["geometry.position"]).toEqual({ x: "0.00", y: "0.80" });
+    expect(values["geometry.position"]).toEqual({ x: 0, y: 0.8 });
   });
 
   it("renders vector pad values as compact rounded coordinates", () => {
@@ -383,6 +383,6 @@ describe("ControlsPanel vector pad interactions", () => {
     });
 
     const values = JSON.parse(screen.getByTestId("values-json").textContent ?? "{}");
-    expect(values["math.vector"]).toEqual({ x: "-1.00", y: "1.00" });
+    expect(values["math.vector"]).toEqual({ x: -1, y: 1 });
   });
 });

package/templates/runtime/react/controls-panel/actions/controls-panel-actions.ts

@@ -2,16 +2,15 @@
 
 import * as React from "react";
 
-import {
-  ToolcraftArtifactExportError,
-  ToolcraftSceneExportError,
-} from "../../../export";
+import { ToolcraftArtifactExportError } from "../../../export/export-error";
+import { ToolcraftSceneExportError } from "../../../export/export-frame";
 import type { ToolcraftRendererPipelineClient } from "../../../rendering";
 import { defaultToolcraftRuntimeSceneVisibility } from "../../../scene";
 import type {
   ToolcraftActionCommand,
   ToolcraftActionSchema,
 } from "../../../schema/types";
+import { isToolcraftArtifactExportAction } from "../../../schema/artifact-export-actions";
 import type {
   ToolcraftCommand,
   ToolcraftState,
@@ -206,8 +205,7 @@ export function useControlsPanelActions({
         setPanelActionFeedback(feedback);
       }
     };
-    const runtimeOwnsExport =
-      action.role === "export-image" || action.role === "export-video";
+    const runtimeOwnsExport = isToolcraftArtifactExportAction(action);
     const command = runtimeOwnsExport
       ? null
       : action.command ?? (onPanelAction ? null : getActionCommand(action));

package/templates/runtime/react/controls-panel/actions/export-action-runner.ts

@@ -1,10 +1,14 @@
+import type { ToolcraftArtifactExportRequest } from "../../../export/artifact-export-request";
+import { ToolcraftArtifactExportError } from "../../../export/export-error";
+import type { ToolcraftExportFrame } from "../../../export/export-frame";
+import { exportToolcraftImageArtifact } from "../../../export/image-artifact-export";
+import type { ToolcraftProductExportRenderer } from "../../../export/product-export-renderer";
+import type { ToolcraftProductSvgExportRenderer } from "../../../export/product-svg-export-renderer";
 import {
-  exportToolcraftImageArtifact,
-  exportToolcraftVideoArtifact,
-  type ToolcraftArtifactExportRequest,
-  type ToolcraftExportFrame,
-  type ToolcraftProductExportRenderer,
-} from "../../../export";
+  exportToolcraftSvgArtifact,
+  type ToolcraftSvgArtifactExportRequest,
+} from "../../../export/svg-artifact-export";
+import { exportToolcraftVideoArtifact } from "../../../export/video-artifact-export";
 import type { ToolcraftRendererPipelineClient } from "../../../rendering";
 import type {
   ToolcraftProductSceneBoundsProvider,
@@ -17,6 +21,7 @@ export type ToolcraftControlsSceneExport = Readonly<{
   boundsProvider?: ToolcraftProductSceneBoundsProvider;
   exportRenderer?: ToolcraftProductExportRenderer;
   productSceneRequired: boolean;
+  svgExportRenderer?: ToolcraftProductSvgExportRenderer;
   visibility: ToolcraftRuntimeSceneVisibility;
 }>;
 
@@ -48,12 +53,42 @@ function createSharedArtifactRequest(
   };
 }
 
+function requireSvgExportRenderer(
+  renderer: ToolcraftProductSvgExportRenderer | undefined,
+): ToolcraftProductSvgExportRenderer {
+  if (!renderer) {
+    throw new ToolcraftArtifactExportError({
+      code: "svg-render-failed",
+      message: "SVG export requires svgExportRenderer.",
+    });
+  }
+  return renderer;
+}
+
+function createSvgArtifactRequest(
+  request: ToolcraftExportActionRequest,
+): ToolcraftSvgArtifactExportRequest {
+  return {
+    boundsProvider: request.sceneExport.boundsProvider,
+    productSceneRequired: request.sceneExport.productSceneRequired,
+    rendererPipeline: request.rendererPipeline,
+    reportProgress: request.reportProgress,
+    state: request.state,
+    svgExportRenderer: requireSvgExportRenderer(
+      request.sceneExport.svgExportRenderer,
+    ),
+    visibility: request.sceneExport.visibility,
+  };
+}
+
 export function runToolcraftExportAction(
   request: ToolcraftExportActionRequest,
 ): PromiseLike<unknown> | null {
   switch (request.action.role) {
     case "export-image":
       return exportToolcraftImageArtifact(createSharedArtifactRequest(request));
+    case "export-svg":
+      return exportToolcraftSvgArtifact(createSvgArtifactRequest(request));
     case "export-video":
       return exportToolcraftVideoArtifact(createSharedArtifactRequest(request));
     default: