@pixel-point/toolcraft 0.0.8 → 0.0.11

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

@@ -1,10 +1,7 @@
 import { describe, expect, it } from "vitest";
 
 import { toolcraftRuntimeCommandTypes } from "../state/types";
-import {
-  defineToolcraft,
-  getToolcraftSettingsTransferEligibility,
-} from "./define-toolcraft";
+import { defineToolcraft } from "./define-toolcraft";
 import {
   toolcraftReservedTargets,
   toolcraftRuntimeOwnedTargets,
@@ -27,17 +24,8 @@ describe("defineToolcraft", () => {
     );
   }
 
-  function createSections(count: number) {
-    return Array.from({ length: count }, (_, index) => ({
-      controls: {
-        opacity: {
-          defaultValue: index,
-          target: `section${index}.opacity`,
-          type: "slider",
-        },
-      },
-      title: `Section ${index + 1}`,
-    }));
+  function getProductSections(app: ReturnType<typeof defineToolcraft>) {
+    return app.panels.controls?.sections.filter((section) => section.title !== "Setup") ?? [];
   }
 
   it("defaults enabled canvas to draggable with canvas toolbar features", () => {
@@ -53,6 +41,30 @@ describe("defineToolcraft", () => {
     expect(app.toolbar).toEqual({ history: true, radar: true, theme: true, zoom: true });
   });
 
+  it("defaults upload canvases to editable output unless intrinsic media is explicit", () => {
+    const app = defineToolcraft({
+      canvas: { enabled: true, upload: true },
+      panels: {},
+    });
+
+    expect(app.canvas.size).toEqual({ height: 1080, unit: "px", width: 1920 });
+    expect(app.canvas.sizeSource).toBe("runtime-default");
+    expect(app.canvas.sizing).toEqual({ mode: "editable-output" });
+    expect(app.assembly.capabilities).toContain("canvas.editableSize");
+    expect(app.assembly.commands).toContain("canvas.setSize");
+  });
+
+  it("preserves explicit intrinsic media sizing for source-native upload apps", () => {
+    const app = defineToolcraft({
+      canvas: { enabled: true, sizing: { mode: "intrinsic-media" }, upload: true },
+      panels: {},
+    });
+
+    expect(app.canvas.sizing).toEqual({ mode: "intrinsic-media" });
+    expect(app.assembly.capabilities).not.toContain("canvas.editableSize");
+    expect(app.assembly.commands).not.toContain("canvas.setSize");
+  });
+
   it("disables app state persistence by default", () => {
     const app = defineToolcraft({
       canvas: { enabled: true },
@@ -82,7 +94,7 @@ describe("defineToolcraft", () => {
     });
   });
 
-  it("keeps settings transfer disabled for small auto schemas", () => {
+  it("keeps settings transfer visible for small auto schemas", () => {
     const app = defineToolcraft({
       canvas: { enabled: true, size: { height: 320, unit: "px", width: 320 } },
       panels: {
@@ -107,11 +119,15 @@ describe("defineToolcraft", () => {
 
     expect(app.settingsTransfer).toMatchObject({
       appId: "mini-app",
-      enabled: false,
+      enabled: true,
       fileName: "mini-app-settings.json",
       mode: "auto",
     });
     expect(app.panels.controls?.sections[0]?.title).toBe("Setup");
+    expect(app.panels.controls?.sections[0]?.controls.settingsTransfer).toMatchObject({
+      target: "runtime.settingsTransfer",
+      type: "settingsTransfer",
+    });
     expect(app.panels.controls?.sections[0]?.controls.canvasAspectRatio).toMatchObject({
       target: "canvas.aspectRatio",
       type: "aspectRatio",
@@ -119,124 +135,7 @@ describe("defineToolcraft", () => {
     expect(app.panels.controls?.sections[0]?.controls.canvasWidth).toBeTruthy();
   });
 
-  it("reports settings transfer eligibility from control count, sections, and weighted score", () => {
-    const small = getToolcraftSettingsTransferEligibility({
-      panels: {
-        controls: {
-          sections: [
-            {
-              controls: createSliderControls(1),
-              title: "Small",
-            },
-          ],
-          title: "Small App",
-        },
-      },
-    });
-    const manyControls = getToolcraftSettingsTransferEligibility({
-      panels: {
-        controls: {
-          sections: [
-            {
-              controls: createSliderControls(12),
-              title: "Many Controls",
-            },
-          ],
-          title: "Many Controls App",
-        },
-      },
-    });
-    const manySections = getToolcraftSettingsTransferEligibility({
-      panels: {
-        controls: {
-          sections: createSections(5),
-          title: "Many Sections App",
-        },
-      },
-    });
-    const heavyControls = getToolcraftSettingsTransferEligibility({
-      panels: {
-        controls: {
-          sections: [
-            {
-              controls: Object.fromEntries(
-                Array.from({ length: 6 }, (_, index) => [
-                  `gradient${index}`,
-                  {
-                    label: `Gradient ${index + 1}`,
-                    target: `gradient${index}`,
-                    type: "gradient",
-                  },
-                ]),
-              ),
-              title: "Gradients",
-            },
-          ],
-          title: "Heavy Controls App",
-        },
-      },
-    });
-    const timelineLayersScore = getToolcraftSettingsTransferEligibility({
-      panels: {
-        controls: {
-          sections: [
-            {
-              controls: Object.fromEntries(
-                Array.from({ length: 5 }, (_, index) => [
-                  `gradient${index}`,
-                  {
-                    label: `Gradient ${index + 1}`,
-                    target: `gradient${index}`,
-                    type: "gradient",
-                  },
-                ]),
-              ),
-              title: "Gradients",
-            },
-          ],
-          title: "Timeline Layers App",
-        },
-        layers: true,
-        timeline: { mode: "playback" },
-      },
-    });
-
-    expect(small).toEqual({
-      controlCount: 1,
-      eligible: false,
-      reasons: [],
-      score: 1,
-      sectionCount: 1,
-    });
-    expect(manyControls).toMatchObject({
-      controlCount: 12,
-      eligible: true,
-      reasons: ["control-count"],
-      sectionCount: 1,
-    });
-    expect(manySections).toMatchObject({
-      controlCount: 5,
-      eligible: true,
-      reasons: ["section-count"],
-      sectionCount: 5,
-    });
-    expect(heavyControls).toMatchObject({
-      controlCount: 6,
-      eligible: true,
-      reasons: ["score"],
-      score: 18,
-      sectionCount: 1,
-    });
-    expect(timelineLayersScore).toMatchObject({
-      controlCount: 5,
-      eligible: true,
-      reasons: ["score"],
-      score: 19,
-      sectionCount: 1,
-    });
-  });
-
-  it("ignores runtime canvas setup controls in settings transfer eligibility", () => {
+  it("keeps runtime setup controls outside product sections", () => {
     const app = defineToolcraft({
       canvas: { enabled: true, size: { height: 720, unit: "px", width: 1280 } },
       panels: {
@@ -253,16 +152,16 @@ describe("defineToolcraft", () => {
       settingsTransfer: false,
     });
 
+    expect(app.settingsTransfer.enabled).toBe(true);
+    expect(app.panels.controls?.sections[0]?.controls.settingsTransfer).toMatchObject({
+      target: "runtime.settingsTransfer",
+      type: "settingsTransfer",
+    });
     expect(app.panels.controls?.sections[0]?.controls.canvasAspectRatio).toBeTruthy();
     expect(app.panels.controls?.sections[0]?.controls.canvasWidth).toBeTruthy();
     expect(app.panels.controls?.sections[0]?.controls.canvasHeight).toBeTruthy();
-    expect(getToolcraftSettingsTransferEligibility({ panels: app.panels })).toEqual({
-      controlCount: 10,
-      eligible: false,
-      reasons: [],
-      score: 10,
-      sectionCount: 1,
-    });
+    expect(getProductSections(app)).toHaveLength(1);
+    expect(getProductSections(app)[0]?.title).toBe("Product Controls");
   });
 
   it("injects settings transfer as the first section for complex auto schemas", () => {
@@ -335,6 +234,7 @@ describe("defineToolcraft", () => {
       "canvasAspectRatio",
       "canvasWidth",
       "canvasHeight",
+      "timelineExtended",
     ]);
     expect(runtimeSettingsSection?.controls.canvasAspectRatio).toMatchObject({
       defaultValue: {
@@ -362,7 +262,7 @@ describe("defineToolcraft", () => {
     expect(firstProductSection?.title).toBe("Text");
   });
 
-  it("respects explicit settings transfer overrides", () => {
+  it("uses explicit settings transfer naming while keeping the setup controls mandatory", () => {
     const forced = defineToolcraft({
       canvas: { enabled: false },
       panels: {
@@ -410,10 +310,13 @@ describe("defineToolcraft", () => {
     expect(forced.panels.controls?.sections[0]?.controls.settingsTransfer?.type).toBe(
       "settingsTransfer",
     );
-    expect(disabled.settingsTransfer.enabled).toBe(false);
-    expect(
-      disabled.panels.controls?.sections.some((section) => section.controls.settingsTransfer),
-    ).toBe(false);
+    expect(disabled.settingsTransfer).toMatchObject({
+      enabled: true,
+      mode: false,
+    });
+    expect(disabled.panels.controls?.sections[0]?.controls.settingsTransfer?.type).toBe(
+      "settingsTransfer",
+    );
   });
 
   it("preserves conditional visibility on sections and controls", () => {
@@ -445,7 +348,7 @@ describe("defineToolcraft", () => {
       },
     });
 
-    const [section] = app.panels.controls?.sections ?? [];
+    const [section] = getProductSections(app);
 
     expect(section?.visibleWhen).toEqual({
       equals: "co-brand",
@@ -540,6 +443,7 @@ describe("defineToolcraft", () => {
         "media.delete",
         "media.import",
         "media.reorder",
+        "media.transform",
         "layers.reorder",
         "timeline.setCurrentTime",
         "canvas.center",
@@ -548,7 +452,11 @@ describe("defineToolcraft", () => {
     );
     expect(app.assembly.surfaces.panels.layers?.defaultPlacement).toBe("left");
     expect(app.assembly.surfaces.panels.timeline?.snapEdges).toEqual(["top", "bottom"]);
-    expect(app.panels.timeline).toEqual({ enabled: true, mode: "keyframes" });
+    expect(app.panels.timeline).toEqual({
+      defaultDurationSeconds: 8,
+      enabled: true,
+      mode: "keyframes",
+    });
     expect(app.assembly.surfaces.panels.toolbar.enabled).toBe(true);
   });
 
@@ -560,7 +468,11 @@ describe("defineToolcraft", () => {
       },
     });
 
-    expect(app.panels.timeline).toEqual({ enabled: true, mode: "playback" });
+    expect(app.panels.timeline).toEqual({
+      defaultDurationSeconds: 8,
+      enabled: true,
+      mode: "playback",
+    });
     expect(app.assembly.components).toContain("timelinePanel");
     expect(app.assembly.capabilities).toEqual(
       expect.arrayContaining([
@@ -584,6 +496,30 @@ describe("defineToolcraft", () => {
     expect(app.assembly.commands).not.toContain("timeline.moveKeyframe");
   });
 
+  it("uses schema timeline default duration as the animation loop duration", () => {
+    const app = defineToolcraft({
+      canvas: { enabled: true },
+      panels: {
+        timeline: {
+          defaultDurationSeconds: 12,
+          mode: "playback",
+        },
+      },
+    });
+    const clamped = defineToolcraft({
+      canvas: { enabled: true },
+      panels: {
+        timeline: {
+          defaultDurationSeconds: 120,
+          mode: "playback",
+        },
+      },
+    });
+
+    expect(app.panels.timeline?.defaultDurationSeconds).toBe(12);
+    expect(clamped.panels.timeline?.defaultDurationSeconds).toBe(60);
+  });
+
   it("only publishes commands supported by the runtime command bus", () => {
     const app = defineToolcraft({
       canvas: { enabled: true, upload: true },
@@ -617,12 +553,18 @@ describe("defineToolcraft", () => {
       "canvas.renderScale",
       "canvas.size.width",
       "canvas.size.height",
+      "runtime.settingsTransfer",
+      "panels.timeline.extended",
+      "panels.timeline.visible",
     ]);
     expect(toolcraftReservedTargets).toEqual([
       "canvas.aspectRatio",
       "canvas.renderScale",
       "canvas.size.width",
       "canvas.size.height",
+      "runtime.settingsTransfer",
+      "panels.timeline.extended",
+      "panels.timeline.visible",
       "selectedLayer.opacity",
       "selectedLayer.visible",
     ]);
@@ -630,6 +572,9 @@ describe("defineToolcraft", () => {
     expect(getToolcraftCanvasSizeTargetDimension("canvas.size.height")).toBe("height");
     expect(getToolcraftCanvasSizeTargetDimension("generation.prompt")).toBeNull();
     expect(isToolcraftRuntimeOwnedTarget("canvas.aspectRatio")).toBe(true);
+    expect(isToolcraftRuntimeOwnedTarget("runtime.settingsTransfer")).toBe(true);
+    expect(isToolcraftRuntimeOwnedTarget("panels.timeline.extended")).toBe(true);
+    expect(isToolcraftRuntimeOwnedTarget("panels.timeline.visible")).toBe(true);
     expect(isToolcraftReservedTarget("selectedLayer.opacity")).toBe(true);
     expect(isToolcraftReservedTarget("generation.prompt")).toBe(false);
   });
@@ -823,6 +768,7 @@ describe("defineToolcraft", () => {
     });
     expect(app.assembly.capabilities).toContain("canvas.renderScale");
     expect(Object.keys(setupSection?.controls ?? {})).toEqual([
+      "settingsTransfer",
       "canvasAspectRatio",
       "canvasWidth",
       "canvasHeight",
@@ -837,11 +783,107 @@ describe("defineToolcraft", () => {
       step: 0.25,
       target: "canvas.renderScale",
       type: "slider",
-      unit: "x",
       variant: "discrete",
     });
   });
 
+  it("appends timeline visibility to the bottom of setup controls when timeline is enabled", () => {
+    const app = defineToolcraft({
+      canvas: {
+        enabled: true,
+        renderScale: true,
+        size: { height: 900, unit: "px", width: 1440 },
+        sizing: { mode: "editable-output" },
+      },
+      panels: {
+        controls: {
+          sections: [],
+          title: "Controls",
+        },
+        timeline: { mode: "playback" },
+      },
+    });
+
+    const setupSection = app.panels.controls?.sections[0];
+
+    expect(Object.keys(setupSection?.controls ?? {})).toEqual([
+      "settingsTransfer",
+      "canvasAspectRatio",
+      "canvasWidth",
+      "canvasHeight",
+      "canvasRenderScale",
+      "timelineExtended",
+    ]);
+    expect(setupSection?.controls.timelineExtended).toMatchObject({
+      defaultValue: false,
+      description:
+        "Shows the extended runtime timeline with scrubber, duration, loop, and keyframe controls; compact mode keeps only Play visible.",
+      label: "Timeline",
+      target: "panels.timeline.extended",
+      type: "switch",
+    });
+  });
+
+  it("does not let app-authored runtime targets suppress mandatory setup controls", () => {
+    const app = defineToolcraft({
+      canvas: {
+        enabled: true,
+        renderScale: true,
+        size: { height: 1080, unit: "px", width: 1920 },
+        sizing: { mode: "editable-output" },
+      },
+      panels: {
+        controls: {
+          sections: [
+            {
+              controls: {
+                manualWidth: {
+                  defaultValue: 1280,
+                  label: "Width",
+                  target: "canvas.size.width",
+                  type: "text",
+                },
+                manualRenderScale: {
+                  defaultValue: 1,
+                  label: "Scale",
+                  max: 2,
+                  min: 1,
+                  target: "canvas.renderScale",
+                  type: "slider",
+                },
+                manualTimeline: {
+                  defaultValue: true,
+                  label: "Timeline",
+                  target: "panels.timeline.extended",
+                  type: "switch",
+                },
+              },
+              title: "Manual Runtime Duplicates",
+            },
+          ],
+          title: "Controls",
+        },
+        timeline: { mode: "playback" },
+      },
+    });
+
+    const [setupSection, duplicateSection] = app.panels.controls?.sections ?? [];
+
+    expect(Object.keys(setupSection?.controls ?? {})).toEqual([
+      "settingsTransfer",
+      "canvasAspectRatio",
+      "canvasWidth",
+      "canvasHeight",
+      "canvasRenderScale",
+      "timelineExtended",
+    ]);
+    expect(duplicateSection?.controls.manualWidth?.target).toBe("canvas.size.width");
+    expect(duplicateSection?.controls.manualRenderScale?.target).toBe("canvas.renderScale");
+    expect(duplicateSection?.controls.manualTimeline?.target).toBe(
+      "panels.timeline.extended",
+    );
+  });
+
   it("can prepend render scale without editable output sizing", () => {
     const app = defineToolcraft({
       canvas: {
@@ -874,6 +916,7 @@ describe("defineToolcraft", () => {
     const intrinsicApp = defineToolcraft({
       canvas: {
         enabled: true,
+        sizing: { mode: "intrinsic-media" },
         upload: true,
       },
       panels: {
@@ -904,10 +947,14 @@ describe("defineToolcraft", () => {
 
     expect(intrinsicApp.canvas.sizing).toEqual({ mode: "intrinsic-media" });
     expect(fixedApp.canvas.sizing).toEqual({ mode: "fixed-output" });
-    expect(intrinsicApp.panels.controls?.sections[0]?.title).toBe("Generation");
-    expect(fixedApp.panels.controls?.sections[0]?.title).toBe("Generation");
+    expect(intrinsicApp.panels.controls?.sections[0]?.title).toBe("Setup");
+    expect(fixedApp.panels.controls?.sections[0]?.title).toBe("Setup");
+    expect(intrinsicApp.panels.controls?.sections[1]?.title).toBe("Generation");
+    expect(fixedApp.panels.controls?.sections.at(-1)?.title).toBe("Generation");
     expect(intrinsicApp.panels.controls?.sections[0]?.controls.canvasWidth).toBeUndefined();
     expect(fixedApp.panels.controls?.sections[0]?.controls.canvasWidth).toBeUndefined();
+    expect(intrinsicApp.panels.controls?.sections[0]?.controls.settingsTransfer).toBeTruthy();
+    expect(fixedApp.panels.controls?.sections[0]?.controls.settingsTransfer).toBeTruthy();
   });
 
   it("adds runtime layout groups only for compact numeric text pairs", () => {
@@ -971,7 +1018,7 @@ describe("defineToolcraft", () => {
       },
     });
 
-    const outputSection = app.panels.controls?.sections[0];
+    const [outputSection] = getProductSections(app);
 
     expect(outputSection?.layoutGroups).toEqual([
       {
@@ -1011,7 +1058,7 @@ describe("defineToolcraft", () => {
       },
     });
 
-    const maskSection = app.panels.controls?.sections[0];
+    const [maskSection] = getProductSections(app);
 
     expect(maskSection?.layoutGroups).toEqual([
       {
@@ -1122,7 +1169,7 @@ describe("defineToolcraft", () => {
       },
     });
 
-    const [formatPairSection, outputSection] = app.panels.controls?.sections ?? [];
+    const [formatPairSection, outputSection] = getProductSections(app);
 
     expect(formatPairSection?.layoutGroups).toEqual([
       {
@@ -1169,7 +1216,7 @@ describe("defineToolcraft", () => {
       },
     });
 
-    const [basicSection, anchorSection] = app.panels.controls?.sections ?? [];
+    const [basicSection, anchorSection] = getProductSections(app);
 
     expect(Object.keys(basicSection?.controls ?? {})).toEqual(["opacity", "threshold"]);
     expect(basicSection?.title).toBe("Basic");
@@ -1212,8 +1259,8 @@ describe("defineToolcraft", () => {
       },
     });
 
-    expect(app.panels.controls?.sections[0]?.layout).toBe("standalone");
-    expect(app.panels.controls?.sections[0]?.title).toBe("Palette");
+    expect(getProductSections(app)[0]?.layout).toBe("standalone");
+    expect(getProductSections(app)[0]?.title).toBe("Palette");
   });
 
   it("adds semantic implicit titles to standalone color sections", () => {
@@ -1245,8 +1292,8 @@ describe("defineToolcraft", () => {
       },
     });
 
-    expect(app.panels.controls?.sections[0]?.layout).toBe("standalone");
-    expect(app.panels.controls?.sections[0]?.title).toBe("Fill & Stroke");
+    expect(getProductSections(app)[0]?.layout).toBe("standalone");
+    expect(getProductSections(app)[0]?.title).toBe("Fill & Stroke");
 
     const inferredLayoutApp = defineToolcraft({
       canvas: { enabled: true },
@@ -1269,7 +1316,7 @@ describe("defineToolcraft", () => {
       },
     });
 
-    expect(inferredLayoutApp.panels.controls?.sections[0]?.title).toBe("Fill");
+    expect(getProductSections(inferredLayoutApp)[0]?.title).toBe("Fill");
   });
 
   it("replaces generic color section titles with a semantic fallback", () => {
@@ -1345,9 +1392,9 @@ describe("defineToolcraft", () => {
       },
     });
 
-    expect(genericColorApp.panels.controls?.sections[0]?.title).toBe("Appearance");
-    expect(genericColorsApp.panels.controls?.sections[0]?.title).toBe("Appearance");
-    expect(explicitGenericTitleApp.panels.controls?.sections[0]?.title).toBe("Appearance");
+    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", () => {
@@ -1388,15 +1435,64 @@ describe("defineToolcraft", () => {
       },
     });
 
-    expect(app.panels.controls?.sections).toHaveLength(1);
-    expect(app.panels.controls?.sections[0]?.title).toBe("Square 1 (Right)");
-    expect(Object.keys(app.panels.controls?.sections[0]?.controls ?? {})).toEqual([
+    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",
+    ]);
+  });
+
   it("preserves controls panel action sections and render metadata", () => {
     const app = defineToolcraft({
       canvas: { enabled: true },
@@ -1449,7 +1545,7 @@ describe("defineToolcraft", () => {
       },
     });
 
-    const [slidersSection, actionsSection] = app.panels.controls?.sections ?? [];
+    const [slidersSection, actionsSection] = getProductSections(app);
 
     expect(slidersSection?.controls.opacity?.markerCount).toBe(101);
     expect(slidersSection?.controls.opacity?.variant).toBe("discrete");
@@ -1519,7 +1615,7 @@ describe("defineToolcraft", () => {
       },
     });
 
-    const controls = app.panels.controls?.sections[0]?.controls;
+    const controls = getProductSections(app)[0]?.controls;
 
     expect(controls?.speed?.variant).toBeUndefined();
     expect(controls?.speed?.markerCount).toBe(6);