@pixel-point/toolcraft 0.0.14 → 0.0.15

package/templates/runtime/schema/define-toolcraft.control-layout.test.ts

@@ -0,0 +1,345 @@
+import { describe, expect, it } from "vitest";
+
+import { defineToolcraft } from "./define-toolcraft";
+import { getProductSections } from "./define-toolcraft-test-utils";
+
+describe("defineToolcraft control layout normalization", () => {
+  it("adds runtime layout groups only for compact numeric text pairs", () => {
+    const app = defineToolcraft({
+      canvas: { enabled: false },
+      panels: {
+        controls: {
+          sections: [
+            {
+              controls: {
+                format: {
+                  defaultValue: "png",
+                  label: "Format",
+                  options: [
+                    { label: "PNG", value: "png" },
+                    { label: "JPEG", value: "jpeg" },
+                  ],
+                  target: "export.format",
+                  type: "select",
+                },
+                quality: {
+                  defaultValue: "balanced",
+                  label: "Quality",
+                  options: [
+                    { label: "Balanced", value: "balanced" },
+                    { label: "High", value: "high" },
+                  ],
+                  target: "export.quality",
+                  type: "select",
+                },
+                width: {
+                  defaultValue: "1024",
+                  label: "Width",
+                  target: "export.width",
+                  type: "text",
+                },
+                height: {
+                  defaultValue: "768",
+                  label: "Height",
+                  target: "export.height",
+                  type: "text",
+                },
+                prompt: {
+                  defaultValue: "Describe the generated asset",
+                  label: "Prompt",
+                  target: "generation.prompt",
+                  type: "text",
+                },
+                seed: {
+                  defaultValue: "42",
+                  label: "Seed",
+                  target: "generation.seed",
+                  type: "text",
+                },
+              },
+              title: "Output",
+            },
+          ],
+          title: "Controls",
+        },
+      },
+    });
+
+    const [outputSection] = getProductSections(app);
+
+    expect(outputSection?.layoutGroups).toEqual([
+      {
+        columns: 2,
+        controls: ["width", "height"],
+        layout: "inline",
+      },
+    ]);
+  });
+
+  it("adds runtime layout groups for compact numeric and color opacity pairs", () => {
+    const app = defineToolcraft({
+      canvas: { enabled: false },
+      panels: {
+        controls: {
+          sections: [
+            {
+              controls: {
+                maskSize: {
+                  defaultValue: "180",
+                  label: "Mask size",
+                  target: "mask.size",
+                  type: "text",
+                },
+                maskColor: {
+                  defaultValue: { hex: "#0EA5E9", opacity: 82 },
+                  label: "Color",
+                  target: "mask.color",
+                  type: "colorOpacity",
+                },
+              },
+              title: "Mask",
+            },
+          ],
+          title: "Controls",
+        },
+      },
+    });
+
+    const [maskSection] = getProductSections(app);
+
+    expect(maskSection?.layoutGroups).toEqual([
+      {
+        columns: 2,
+        controls: ["maskSize", "maskColor"],
+        layout: "inline",
+      },
+    ]);
+  });
+
+  it("does not auto-pair mixed compact fields without visible labels", () => {
+    const app = defineToolcraft({
+      canvas: { enabled: false },
+      panels: {
+        controls: {
+          sections: [
+            {
+              controls: {
+                maskSize: {
+                  defaultValue: "180",
+                  label: "Mask size",
+                  target: "mask.size",
+                  type: "text",
+                },
+                maskColor: {
+                  defaultValue: { hex: "#0EA5E9", opacity: 82 },
+                  target: "mask.color",
+                  type: "colorOpacity",
+                },
+              },
+              title: "Mask",
+            },
+          ],
+          title: "Controls",
+        },
+      },
+    });
+
+    expect(app.panels.controls?.sections[0]?.layoutGroups).toBeUndefined();
+  });
+
+  it("preserves explicit inline select combinations without auto-pairing ordinary selects", () => {
+    const app = defineToolcraft({
+      canvas: { enabled: false },
+      panels: {
+        controls: {
+          sections: [
+            {
+              controls: {
+                colorSpace: {
+                  defaultValue: "srgb",
+                  label: "Color space",
+                  options: [
+                    { label: "sRGB", value: "srgb" },
+                    { label: "Display P3", value: "display-p3" },
+                  ],
+                  target: "export.colorSpace",
+                  type: "select",
+                },
+                bitDepth: {
+                  defaultValue: "8",
+                  label: "Bit depth",
+                  options: [
+                    { label: "8-bit", value: "8" },
+                    { label: "16-bit", value: "16" },
+                  ],
+                  target: "export.bitDepth",
+                  type: "select",
+                },
+              },
+              layoutGroups: [
+                {
+                  columns: 2,
+                  controls: ["colorSpace", "bitDepth"],
+                  layout: "inline",
+                },
+              ],
+              title: "Format Pair",
+            },
+            {
+              controls: {
+                format: {
+                  defaultValue: "png",
+                  label: "Format",
+                  options: [
+                    { label: "PNG", value: "png" },
+                    { label: "JPEG", value: "jpeg" },
+                  ],
+                  target: "export.format",
+                  type: "select",
+                },
+                quality: {
+                  defaultValue: "balanced",
+                  label: "Quality",
+                  options: [
+                    { label: "Balanced", value: "balanced" },
+                    { label: "High", value: "high" },
+                  ],
+                  target: "export.quality",
+                  type: "select",
+                },
+              },
+              title: "Output",
+            },
+          ],
+          title: "Controls",
+        },
+      },
+    });
+
+    const [formatPairSection, outputSection] = getProductSections(app);
+
+    expect(formatPairSection?.layoutGroups).toEqual([
+      {
+        columns: 2,
+        controls: ["colorSpace", "bitDepth"],
+        layout: "inline",
+      },
+    ]);
+    expect(outputSection?.layoutGroups).toBeUndefined();
+  });
+
+  it("splits standalone controls out of grouped control sections", () => {
+    const app = defineToolcraft({
+      canvas: { enabled: false },
+      panels: {
+        controls: {
+          sections: [
+            {
+              controls: {
+                opacity: {
+                  defaultValue: 75,
+                  label: "Opacity",
+                  target: "selectedLayer.opacity",
+                  type: "slider",
+                },
+                threshold: {
+                  defaultValue: 50,
+                  label: "Threshold",
+                  target: "selectedLayer.threshold",
+                  type: "slider",
+                },
+                anchor: {
+                  defaultValue: "center",
+                  label: "Anchor",
+                  target: "selectedLayer.anchor",
+                  type: "anchorGrid",
+                },
+              },
+              title: "Basic",
+            },
+          ],
+          title: "Controls",
+        },
+      },
+    });
+
+    const [basicSection, anchorSection] = getProductSections(app);
+
+    expect(Object.keys(basicSection?.controls ?? {})).toEqual(["opacity", "threshold"]);
+    expect(basicSection?.title).toBe("Basic");
+    expect(anchorSection?.layout).toBe("standalone");
+    expect(anchorSection?.title).toBe("Anchor");
+    expect(Object.keys(anchorSection?.controls ?? {})).toEqual(["anchor"]);
+  });
+
+  it("keeps stepped continuous sliders plain and normalizes explicit discrete markers", () => {
+    const app = defineToolcraft({
+      canvas: { enabled: true },
+      panels: {
+        controls: {
+          sections: [
+            {
+              controls: {
+                speed: {
+                  defaultValue: 118,
+                  label: "Reveal speed",
+                  markerCount: 6,
+                  max: 150,
+                  min: 0,
+                  step: 1,
+                  target: "ascii.speed",
+                  type: "slider",
+                },
+                toneSteps: {
+                  defaultValue: 2,
+                  label: "Tone steps",
+                  markerCount: 4,
+                  max: 4,
+                  min: 0,
+                  step: 1,
+                  target: "ascii.toneSteps",
+                  type: "slider",
+                  variant: "discrete",
+                },
+                duration: {
+                  defaultValue: 0.6,
+                  label: "Flip duration",
+                  markerCount: 6,
+                  max: 5,
+                  min: 0,
+                  step: 0.1,
+                  target: "ascii.flipDurationSec",
+                  type: "slider",
+                  variant: "continuous",
+                },
+                range: {
+                  defaultValue: [2, 8],
+                  label: "Range",
+                  markerCount: 3,
+                  max: 10,
+                  min: 0,
+                  step: 0.5,
+                  target: "ascii.range",
+                  type: "rangeSlider",
+                },
+              },
+              title: "Sliders",
+            },
+          ],
+          title: "Controls",
+        },
+      },
+    });
+
+    const controls = getProductSections(app)[0]?.controls;
+
+    expect(controls?.speed?.variant).toBeUndefined();
+    expect(controls?.speed?.markerCount).toBe(6);
+    expect(controls?.toneSteps?.variant).toBe("discrete");
+    expect(controls?.toneSteps?.markerCount).toBe(5);
+    expect(controls?.duration?.variant).toBe("continuous");
+    expect(controls?.duration?.markerCount).toBe(6);
+    expect(controls?.range?.variant).toBeUndefined();
+    expect(controls?.range?.markerCount).toBe(3);
+  });
+});

package/templates/runtime/schema/define-toolcraft.control-sections.test.ts

@@ -0,0 +1,304 @@
+import { describe, expect, it } from "vitest";
+
+import { defineToolcraft } from "./define-toolcraft";
+import { getProductSections } from "./define-toolcraft-test-utils";
+
+describe("defineToolcraft control section semantics", () => {
+  it("preserves conditional visibility on sections and controls", () => {
+    const app = defineToolcraft({
+      canvas: { enabled: true },
+      panels: {
+        controls: {
+          sections: [
+            {
+              controls: {
+                partnerLogo: {
+                  target: "coBrand.partnerLogo",
+                  type: "fileDrop",
+                  visibleWhen: {
+                    equals: "logo",
+                    target: "coBrand.identityMode",
+                  },
+                },
+              },
+              title: "Partner Logo",
+              visibleWhen: {
+                equals: "co-brand",
+                target: "cover.templateId",
+              },
+            },
+          ],
+          title: "Controls",
+        },
+      },
+    });
+
+    const [section] = getProductSections(app);
+
+    expect(section?.visibleWhen).toEqual({
+      equals: "co-brand",
+      target: "cover.templateId",
+    });
+    expect(section?.controls.partnerLogo?.visibleWhen).toEqual({
+      equals: "logo",
+      target: "coBrand.identityMode",
+    });
+  });
+
+  it("adds an implicit title while preserving standalone section layout intent", () => {
+    const sections = [
+      {
+        controls: {
+          palette: {
+            target: "style.palette",
+            type: "palette",
+          },
+        },
+        layout: "standalone",
+      },
+    ] as const;
+
+    const app = defineToolcraft({
+      canvas: { enabled: true },
+      panels: {
+        controls: {
+          sections,
+          title: "Controls",
+        },
+      },
+    });
+
+    expect(getProductSections(app)[0]?.layout).toBe("standalone");
+    expect(getProductSections(app)[0]?.title).toBe("Palette");
+  });
+
+  it("adds semantic implicit titles to standalone color sections", () => {
+    const app = defineToolcraft({
+      canvas: { enabled: true },
+      panels: {
+        controls: {
+          sections: [
+            {
+              controls: {
+                fill: {
+                  defaultValue: { hex: "#C1FF00" },
+                  label: "Fill",
+                  target: "style.fill",
+                  type: "color",
+                },
+                stroke: {
+                  defaultValue: { hex: "#FF6A00" },
+                  label: "Stroke",
+                  target: "style.stroke",
+                  type: "color",
+                },
+              },
+              layout: "standalone",
+            },
+          ],
+          title: "Controls",
+        },
+      },
+    });
+
+    expect(getProductSections(app)[0]?.layout).toBe("standalone");
+    expect(getProductSections(app)[0]?.title).toBe("Fill & Stroke");
+
+    const inferredLayoutApp = defineToolcraft({
+      canvas: { enabled: true },
+      panels: {
+        controls: {
+          sections: [
+            {
+              controls: {
+                fill: {
+                  defaultValue: { hex: "#C1FF00" },
+                  label: "Fill",
+                  target: "style.fill",
+                  type: "color",
+                },
+              },
+            },
+          ],
+          title: "Controls",
+        },
+      },
+    });
+
+    expect(getProductSections(inferredLayoutApp)[0]?.title).toBe("Fill");
+  });
+
+  it("replaces generic color section titles with a semantic fallback", () => {
+    const genericColorApp = defineToolcraft({
+      canvas: { enabled: true },
+      panels: {
+        controls: {
+          sections: [
+            {
+              controls: {
+                color: {
+                  defaultValue: { hex: "#C1FF00" },
+                  label: "Color",
+                  target: "style.color",
+                  type: "color",
+                },
+              },
+              layout: "standalone",
+            },
+          ],
+          title: "Controls",
+        },
+      },
+    });
+
+    const genericColorsApp = defineToolcraft({
+      canvas: { enabled: true },
+      panels: {
+        controls: {
+          sections: [
+            {
+              controls: {
+                color: {
+                  defaultValue: { hex: "#C1FF00" },
+                  label: "Color",
+                  target: "style.color",
+                  type: "color",
+                },
+                colors: {
+                  defaultValue: { hex: "#FF6A00" },
+                  label: "Colors",
+                  target: "style.colors",
+                  type: "color",
+                },
+              },
+              layout: "standalone",
+            },
+          ],
+          title: "Controls",
+        },
+      },
+    });
+    const explicitGenericTitleApp = defineToolcraft({
+      canvas: { enabled: true },
+      panels: {
+        controls: {
+          sections: [
+            {
+              controls: {
+                accent: {
+                  defaultValue: { hex: "#C1FF00" },
+                  label: "Accent",
+                  target: "style.accent",
+                  type: "color",
+                },
+              },
+              layout: "standalone",
+              title: "Colors",
+            },
+          ],
+          title: "Controls",
+        },
+      },
+    });
+
+    expect(getProductSections(genericColorApp)[0]?.title).toBe("Appearance");
+    expect(getProductSections(genericColorsApp)[0]?.title).toBe("Appearance");
+    expect(getProductSections(explicitGenericTitleApp)[0]?.title).toBe("Appearance");
+  });
+
+  it("keeps color controls inside semantic mixed sections", () => {
+    const app = defineToolcraft({
+      canvas: { enabled: true },
+      panels: {
+        controls: {
+          sections: [
+            {
+              controls: {
+                connections: {
+                  defaultValue: 10,
+                  label: "Connections",
+                  target: "animation.square1.connections",
+                  type: "text",
+                },
+                hoverRadius: {
+                  defaultValue: 200,
+                  label: "Hover radius",
+                  max: 500,
+                  min: 50,
+                  target: "animation.square1.hoverRadius",
+                  type: "slider",
+                  unit: "px",
+                },
+                color: {
+                  defaultValue: { hex: "#DEF135" },
+                  label: "Color",
+                  target: "animation.square1.color",
+                  type: "color",
+                },
+              },
+              title: "Square 1 (Right)",
+            },
+          ],
+          title: "Controls",
+        },
+      },
+    });
+
+    const productSections = getProductSections(app);
+
+    expect(productSections).toHaveLength(1);
+    expect(productSections[0]?.title).toBe("Square 1 (Right)");
+    expect(Object.keys(productSections[0]?.controls ?? {})).toEqual([
+      "connections",
+      "hoverRadius",
+      "color",
+    ]);
+  });
+
+  it("keeps mode-gated standalone controls inside their semantic section", () => {
+    const app = defineToolcraft({
+      canvas: { enabled: true },
+      panels: {
+        controls: {
+          sections: [
+            {
+              controls: {
+                sourceMode: {
+                  defaultValue: "preset",
+                  label: "Source",
+                  options: [
+                    { label: "Preset", value: "preset" },
+                    { label: "Image", value: "image" },
+                  ],
+                  target: "source.mode",
+                  type: "segmented",
+                },
+                sourceUpload: {
+                  accept: "image/*",
+                  assetKind: "image",
+                  defaultValue: null,
+                  label: "Image",
+                  target: "source.upload",
+                  type: "fileDrop",
+                  visibleWhen: { equals: "image", target: "source.mode" },
+                },
+              },
+              title: "Source",
+            },
+          ],
+          title: "Controls",
+        },
+      },
+    });
+
+    const productSections = getProductSections(app);
+
+    expect(productSections).toHaveLength(1);
+    expect(productSections[0]?.title).toBe("Source");
+    expect(productSections[0]?.layout).toBeUndefined();
+    expect(Object.keys(productSections[0]?.controls ?? {})).toEqual([
+      "sourceMode",
+      "sourceUpload",
+    ]);
+  });
+});

package/templates/runtime/schema/define-toolcraft.setup-canvas.test.ts

@@ -0,0 +1,69 @@
+import { describe, expect, it } from "vitest";
+
+import { defineToolcraft } from "./define-toolcraft";
+
+describe("defineToolcraft runtime setup canvas controls", () => {
+  it("prepends canvas size controls to controls panels", () => {
+    const app = defineToolcraft({
+      canvas: {
+        enabled: true,
+        size: { height: 900, unit: "px", width: 1440 },
+        sizing: { mode: "editable-output" },
+      },
+      panels: {
+        controls: {
+          sections: [
+            {
+              controls: {
+                prompt: {
+                  target: "generation.prompt",
+                  type: "text",
+                },
+              },
+              title: "Generation",
+            },
+          ],
+          title: "Controls",
+        },
+      },
+    });
+
+    const [canvasSection, generationSection] = app.panels.controls?.sections ?? [];
+
+    expect(canvasSection?.title).toBe("Setup");
+    expect(canvasSection?.controls.canvasAspectRatio).toMatchObject({
+      defaultValue: {
+        height: 5,
+        mode: "custom",
+        value: "8:5",
+        width: 8,
+      },
+      label: "Aspect ratio",
+      performanceRole: "workload",
+      target: "canvas.aspectRatio",
+      type: "aspectRatio",
+    });
+    expect(canvasSection?.controls.canvasWidth).toMatchObject({
+      defaultValue: 1440,
+      label: "Canvas width",
+      performanceRole: "workload",
+      target: "canvas.size.width",
+      type: "text",
+    });
+    expect(canvasSection?.controls.canvasHeight).toMatchObject({
+      defaultValue: 900,
+      label: "Canvas height",
+      performanceRole: "workload",
+      target: "canvas.size.height",
+      type: "text",
+    });
+    expect(canvasSection?.layoutGroups).toEqual([
+      {
+        columns: 2,
+        controls: ["canvasWidth", "canvasHeight"],
+        layout: "inline",
+      },
+    ]);
+    expect(generationSection?.title).toBe("Generation");
+  });
+});