@pixel-point/toolcraft 0.0.3 → 0.0.4

package/templates/starter/src/app/starter-acceptance.test.ts

@@ -498,6 +498,14 @@ function getSchemaVideoExportSection(
   );
 }
 
+function getSchemaImageExportSection(
+  schema: ResolvedToolcraftAppSchema = starterSchema,
+): ResolvedControlsSection | undefined {
+  return (schema.panels.controls?.sections ?? []).find(
+    (section) => normalizeSectionTitle(section.title) === "image export",
+  );
+}
+
 function getSectionControlByTarget(
   section: ResolvedControlsSection | undefined,
   target: string,
@@ -524,6 +532,106 @@ function getControlOptionValues(control: ResolvedControl | undefined): string[]
   return control?.options?.map((option) => option.value.toLowerCase()) ?? [];
 }
 
+function makeBackgroundSection() {
+  return {
+    controls: {
+      includeBackground: {
+        defaultValue: true,
+        description:
+          "Controls PNG background transparency while preview and video keep the background.",
+        label: "Include",
+        target: "export.includeBackground",
+        type: "switch",
+      },
+      background: {
+        defaultValue: "#0F0F0F",
+        label: false,
+        target: "appearance.background",
+        type: "color",
+      },
+    },
+    layoutGroups: [
+      {
+        columns: 2,
+        controls: ["includeBackground", "background"],
+        layout: "inline",
+      },
+    ],
+    title: "Background",
+  } as const;
+}
+
+function makeImageExportSection() {
+  return {
+    controls: {
+      imageFormat: {
+        defaultValue: "png",
+        label: "Format",
+        options: [
+          { label: "PNG", value: "png" },
+          { label: "JPG", value: "jpg" },
+        ],
+        target: "export.image.format",
+        type: "select",
+      },
+      imageResolution: {
+        defaultValue: "4k",
+        label: "Resolution",
+        options: [
+          { label: "2K", value: "2k" },
+          { label: "4K", value: "4k" },
+          { label: "8K", value: "8k" },
+        ],
+        target: "export.image.resolution",
+        type: "select",
+      },
+    },
+    layoutGroups: [
+      {
+        columns: 2,
+        controls: ["imageFormat", "imageResolution"],
+        layout: "inline",
+      },
+    ],
+    title: "Image Export",
+  } as const;
+}
+
+function makeVideoExportSection() {
+  return {
+    controls: {
+      videoFormat: {
+        defaultValue: "mp4",
+        label: "Format",
+        options: [
+          { label: "MP4", value: "mp4" },
+          { label: "WebM", value: "webm" },
+        ],
+        target: "export.video.format",
+        type: "select",
+      },
+      videoResolution: {
+        defaultValue: "current",
+        label: "Resolution",
+        options: [
+          { label: "Current", value: "current" },
+          { label: "4K", value: "4k" },
+        ],
+        target: "export.video.resolution",
+        type: "select",
+      },
+    },
+    layoutGroups: [
+      {
+        columns: 2,
+        controls: ["videoFormat", "videoResolution"],
+        layout: "inline",
+      },
+    ],
+    title: "Video Export",
+  } as const;
+}
+
 function sourceHasVideoCapabilityCheck(source: string): boolean {
   return /\bMediaRecorder\.isTypeSupported\b|\bVideoEncoder\b|\bffmpeg\b|\bFFmpeg\b|\btranscoder\b|\bencoder\b/i.test(
     source,
@@ -574,6 +682,47 @@ function sourceHasCustomMovOrProResEncoder(source: string): boolean {
   );
 }
 
+function sourceHasImageExportDimensionCoverage(source: string): boolean {
+  const hasImageDecoder =
+    /\bcreateImageBitmap\b/.test(source) ||
+    /\bnew\s+Image\s*\(/.test(source) ||
+    /\bHTMLImageElement\b/.test(source);
+  const hasDimensionRead =
+    /\b(?:bitmap|image|img|png|exportedImage|decodedImage)\.(?:width|naturalWidth|videoWidth)\b/i.test(
+      source,
+    ) &&
+    /\b(?:bitmap|image|img|png|exportedImage|decodedImage)\.(?:height|naturalHeight|videoHeight)\b/i.test(
+      source,
+    );
+  const hasResolutionPreset =
+    /\b(?:2k|4k|8k|2048|4096|8192)\b/i.test(source) &&
+    /\b(?:export\.image\.resolution|image resolution|resolution)\b/i.test(source);
+
+  return hasImageDecoder && hasDimensionRead && hasResolutionPreset;
+}
+
+function sourcePassesImageResolutionToPngExport(source: string): boolean {
+  if (
+    /\bcreateToolcraftPngExportCanvas\s*\(\s*\{[\s\S]*\bresolution\s*:[\s\S]{0,320}\bexport\.image\.resolution\b/.test(
+      source,
+    )
+  ) {
+    return true;
+  }
+
+  const runtimeResolutionNames = Array.from(
+    source.matchAll(
+      /\b(?:const|let)\s+([A-Za-z_$][A-Za-z0-9_$]*(?:Resolution|resolution)[A-Za-z0-9_$]*)\s*=[\s\S]{0,220}\bexport\.image\.resolution\b/g,
+    ),
+  ).map((match) => match[1]);
+
+  return runtimeResolutionNames.some((name) =>
+    new RegExp(
+      `\\bcreateToolcraftPngExportCanvas\\s*\\(\\s*\\{[\\s\\S]*\\bresolution\\s*:\\s*${name}\\b`,
+    ).test(source),
+  );
+}
+
 function getProductImplementationSource(): string {
   return `${readSourceTree(routesDir)}\n${readSourceTree(appDir)}`;
 }
@@ -2194,7 +2343,7 @@ describe("Toolcraft template app acceptance coverage", () => {
     ).toBeGreaterThan(0);
     expect(
       backgroundToggleTargets.length,
-      "Every product app with Export PNG must expose a user-facing Include background / Transparent background control.",
+      'Every product app with Export PNG must expose export.includeBackground in the required "Background" section as a Switch labeled "Include".',
     ).toBeGreaterThan(0);
 
     for (const target of [...backgroundColorTargets, ...backgroundToggleTargets]) {
@@ -2204,6 +2353,93 @@ describe("Toolcraft template app acceptance coverage", () => {
       ).toContain(target);
     }
 
+    const imageExportSection = getSchemaImageExportSection();
+    const imageFormatControl = getSectionControlByTarget(
+      imageExportSection,
+      "export.image.format",
+    );
+    const imageResolutionControl = getSectionControlByTarget(
+      imageExportSection,
+      "export.image.resolution",
+    );
+    const imageFormatOptionValues = getControlOptionValues(imageFormatControl);
+    const imageResolutionOptionValues = getControlOptionValues(imageResolutionControl);
+    const imageFormatControlId = getSectionControlIdByTarget(
+      imageExportSection,
+      "export.image.format",
+    );
+    const imageResolutionControlId = getSectionControlIdByTarget(
+      imageExportSection,
+      "export.image.resolution",
+    );
+    const imageExportHasInlinePair =
+      imageFormatControlId === undefined || imageResolutionControlId === undefined
+        ? false
+        : imageExportSection?.layoutGroups?.some(
+            (group) =>
+              group.layout === "inline" &&
+              group.columns === 2 &&
+              group.controls.includes(imageFormatControlId) &&
+              group.controls.includes(imageResolutionControlId),
+          ) === true;
+
+    expect(
+      imageExportSection,
+      'Apps with Export PNG must expose image settings in a separate controls section titled "Image Export".',
+    ).toBeDefined();
+    expect(
+      imageFormatControl,
+      'The separate "Image Export" section must include a format control with target "export.image.format".',
+    ).toBeDefined();
+    expect(
+      imageFormatControl?.type,
+      "Image Export format must use the same Select/dropdown structure as Video Export.",
+    ).toBe("select");
+    expect(
+      imageFormatOptionValues,
+      'Image format options must include "png" and "jpg".',
+    ).toEqual(expect.arrayContaining(["png", "jpg"]));
+    expect(
+      imageFormatControl?.defaultValue,
+      'Image format must default to "png".',
+    ).toBe("png");
+    expect(
+      imageResolutionControl,
+      'The separate "Image Export" section must include a resolution control with target "export.image.resolution".',
+    ).toBeDefined();
+    expect(
+      imageResolutionControl?.type,
+      "Image Export resolution must use the same Select/dropdown structure as Video Export.",
+    ).toBe("select");
+    expect(
+      imageResolutionOptionValues,
+      'Image resolution options must include "2k", "4k", and "8k".',
+    ).toEqual(expect.arrayContaining(["2k", "4k", "8k"]));
+    expect(
+      imageResolutionControl?.defaultValue,
+      'Image resolution must default to "4k".',
+    ).toBe("4k");
+    expect(
+      imageExportHasInlinePair,
+      "Image Export format and resolution must render as a compact inline pair.",
+    ).toBe(true);
+    expect(
+      productRuntimeImplementationSource,
+      'Image export implementation must read "export.image.format" from runtime state; declaring the control is not enough.',
+    ).toContain("export.image.format");
+    expect(
+      productRuntimeImplementationSource,
+      'Image export implementation must read "export.image.resolution" from runtime state; declaring the control is not enough.',
+    ).toContain("export.image.resolution");
+    expect(
+      sourcePassesImageResolutionToPngExport(productImplementationSource),
+      "Image export must pass the selected image resolution to createToolcraftPngExportCanvas so 2K/4K/8K change the actual exported pixel dimensions.",
+    ).toBe(true);
+    expect(
+      sourceHasImageExportDimensionCoverage(browserTestSources),
+      "Image export browser coverage must decode the exported image and assert actual width/height for selected 2K/4K/8K resolution. Blob size or a clicked button alone does not prove export dimensions.",
+    ).toBe(true);
+
     if (!schemaHasAnimatedProductOutput()) {
       return;
     }
@@ -2434,13 +2670,13 @@ describe("Toolcraft template app acceptance coverage", () => {
     ).toEqual(
       expect.arrayContaining([
         expect.stringContaining("must expose a user-facing background color control"),
-        expect.stringContaining("must expose a user-facing Include background / Transparent background control"),
+        expect.stringContaining('must expose export.includeBackground inside the required "Background" section'),
       ]),
     );
   });
 
-  it("accepts png export apps that wire background controls into the schema", () => {
-    const schemaWithBackgroundControls = defineToolcraft({
+  it("rejects legacy output sections that mix background controls with export actions", () => {
+    const schemaWithLegacyBackgroundControls = defineToolcraft({
       canvas: {
         enabled: true,
         sizing: { mode: "editable-output" },
@@ -2481,6 +2717,72 @@ describe("Toolcraft template app acceptance coverage", () => {
         },
       },
     });
+
+    expect(
+      validateToolcraftAcceptanceCoverage(schemaWithLegacyBackgroundControls, [
+        makeControlAcceptance("appearance.background", "color"),
+        makeControlAcceptance("export.includeBackground", "switch"),
+        {
+          actionCoverage: ["export.png"],
+          automated: true,
+          automatedTestName: "exports png output",
+          browser: true,
+          browserTestName: "browser: exports png output",
+          componentType: "panelActions",
+          evidence: "exported-bytes",
+          expectedObservable: "Export PNG creates output bytes.",
+          fixture: "export fixture",
+          id: "actions.output",
+          kind: "control",
+          target: "actions.output",
+          userAction: "Click Export PNG.",
+        },
+      ]),
+    ).toEqual(
+      expect.arrayContaining([
+        expect.stringContaining('separate controls section titled "Background"'),
+        expect.stringContaining(
+          'The "Background" section must contain export.includeBackground as the Include switch.',
+        ),
+        expect.stringContaining(
+          'The "Background" section must contain the renderer-owned background color control',
+        ),
+      ]),
+    );
+  });
+
+  it("accepts png export apps that wire background controls into the schema", () => {
+    const schemaWithBackgroundControls = defineToolcraft({
+      canvas: {
+        enabled: true,
+        sizing: { mode: "editable-output" },
+      },
+      panels: {
+        controls: {
+          sections: [
+            makeBackgroundSection(),
+            makeImageExportSection(),
+            {
+              controls: {
+                outputActions: {
+                  actions: [
+                    {
+                      icon: "export",
+                      label: "Export PNG",
+                      value: "export.png",
+                    },
+                  ],
+                  target: "actions.output",
+                  type: "panelActions",
+                },
+              },
+              title: "Output",
+            },
+          ],
+          title: "Controls",
+        },
+      },
+    });
     const errors = validateToolcraftAcceptanceCoverage(schemaWithBackgroundControls, [
       makeControlAcceptance("appearance.background", "color"),
       {
@@ -2511,7 +2813,7 @@ describe("Toolcraft template app acceptance coverage", () => {
     expect(errors).not.toEqual(
       expect.arrayContaining([
         expect.stringContaining("must expose a user-facing background color control"),
-        expect.stringContaining("must expose a user-facing Include background / Transparent background control"),
+        expect.stringContaining('must expose export.includeBackground inside the required "Background" section'),
       ]),
     );
   });
@@ -2525,20 +2827,10 @@ describe("Toolcraft template app acceptance coverage", () => {
       panels: {
         controls: {
           sections: [
+            makeBackgroundSection(),
+            makeImageExportSection(),
             {
               controls: {
-                background: {
-                  defaultValue: "#ffffff",
-                  label: "Background",
-                  target: "appearance.background",
-                  type: "color",
-                },
-                includeBackground: {
-                  defaultValue: true,
-                  label: "Include background",
-                  target: "export.includeBackground",
-                  type: "switch",
-                },
                 outputActions: {
                   actions: [
                     {
@@ -2589,6 +2881,314 @@ describe("Toolcraft template app acceptance coverage", () => {
     );
   });
 
+  it("requires still-output apps to expose image export format and resolution settings", () => {
+    const schemaWithoutImageExportSettings = defineToolcraft({
+      canvas: {
+        enabled: true,
+        sizing: { mode: "editable-output" },
+      },
+      panels: {
+        controls: {
+          sections: [
+            makeBackgroundSection(),
+            {
+              actionGroup: "secondary",
+              controls: {
+                outputActions: {
+                  actions: [
+                    {
+                      icon: "export",
+                      label: "Export PNG",
+                      value: "export.png",
+                    },
+                  ],
+                  target: "actions.output",
+                  type: "panelActions",
+                },
+              },
+              title: "Export",
+            },
+          ],
+          title: "Controls",
+        },
+      },
+    });
+
+    expect(
+      validateToolcraftAcceptanceCoverage(schemaWithoutImageExportSettings, [
+        makeControlAcceptance("appearance.background", "color"),
+        makeControlAcceptance("export.includeBackground", "switch"),
+        {
+          actionCoverage: ["export.png"],
+          automated: true,
+          automatedTestName: "exports image output",
+          browser: true,
+          browserTestName: "browser: exports image output",
+          componentType: "panelActions",
+          evidence: "exported-bytes",
+          expectedObservable:
+            "Export PNG creates output bytes and reads image format, image resolution, background color, and include-background state.",
+          fixture: "export fixture",
+          id: "actions.output",
+          kind: "control",
+          target: "actions.output",
+          userAction:
+            "Toggle Include background off, export PNG, then verify the PNG has alpha while the live preview canvas still preserves the background.",
+        },
+      ]),
+    ).toEqual(
+      expect.arrayContaining([
+        'Apps with Export PNG must expose image export settings in a separate controls section titled "Image Export" directly above sticky footer export actions or directly before "Video Export" when video export also exists.',
+        'The separate "Image Export" section must include a format control with target "export.image.format".',
+        'The separate "Image Export" section must include a resolution control with target "export.image.resolution".',
+      ]),
+    );
+  });
+
+  it("accepts still-output apps with image export settings", () => {
+    const schemaWithImageExportSettings = defineToolcraft({
+      canvas: {
+        enabled: true,
+        sizing: { mode: "editable-output" },
+      },
+      panels: {
+        controls: {
+          sections: [
+            makeBackgroundSection(),
+            makeImageExportSection(),
+            {
+              actionGroup: "secondary",
+              controls: {
+                outputActions: {
+                  actions: [
+                    {
+                      icon: "export",
+                      label: "Export PNG",
+                      value: "export.png",
+                    },
+                  ],
+                  target: "actions.output",
+                  type: "panelActions",
+                },
+              },
+              title: "Export",
+            },
+          ],
+          title: "Controls",
+        },
+      },
+    });
+    const imageFormatAcceptance = makeControlAcceptance("export.image.format", "select");
+    imageFormatAcceptance.optionCoverage = ["png", "jpg"];
+    imageFormatAcceptance.expectedObservable =
+      "PNG and JPG choices change the exported image MIME/file extension.";
+    imageFormatAcceptance.userAction =
+      "Choose PNG and JPG, export the image, and verify the blob type or file extension changes.";
+    const imageResolutionAcceptance = makeControlAcceptance(
+      "export.image.resolution",
+      "select",
+    );
+    imageResolutionAcceptance.optionCoverage = ["2k", "4k", "8k"];
+    imageResolutionAcceptance.expectedObservable =
+      "Resolution choices change the actual exported image dimensions.";
+    imageResolutionAcceptance.userAction =
+      "Choose 2K and 8K, export each image, decode it, and compare actual pixel width/height.";
+
+    expect(
+      validateToolcraftAcceptanceCoverage(schemaWithImageExportSettings, [
+        makeControlAcceptance("appearance.background", "color"),
+        makeControlAcceptance("export.includeBackground", "switch"),
+        imageFormatAcceptance,
+        imageResolutionAcceptance,
+        {
+          actionCoverage: ["export.png"],
+          automated: true,
+          automatedTestName: "exports image output",
+          browser: true,
+          browserTestName: "browser: exports image output",
+          componentType: "panelActions",
+          evidence: "exported-bytes",
+          expectedObservable:
+            "Export PNG creates output bytes and reads image format, image resolution, background color, and include-background state. JPG changes file type; 8K changes exported pixel dimensions to an 8192px long edge.",
+          fixture: "export fixture",
+          id: "actions.output",
+          kind: "control",
+          target: "actions.output",
+          userAction:
+            "Set format to JPG and resolution to 8K, then export and decode the output image to verify file type and long-edge dimensions.",
+        },
+      ]),
+    ).not.toEqual(
+      expect.arrayContaining([
+        expect.stringContaining("Image Export"),
+        expect.stringContaining("export.image.format"),
+        expect.stringContaining("export.image.resolution"),
+      ]),
+    );
+  });
+
+  it("requires animated apps with PNG and video actions to expose Image Export before Video Export", () => {
+    const schemaWithoutImageSettings = defineToolcraft({
+      canvas: {
+        enabled: true,
+        sizing: { mode: "editable-output" },
+      },
+      panels: {
+        controls: {
+          sections: [
+            makeBackgroundSection(),
+            makeVideoExportSection(),
+            {
+              actionGroup: "secondary",
+              controls: {
+                outputActions: {
+                  actions: [
+                    {
+                      icon: "download",
+                      label: "Export Video",
+                      value: "export.video",
+                    },
+                    {
+                      icon: "export",
+                      label: "Export PNG",
+                      value: "export.png",
+                    },
+                  ],
+                  target: "actions.output",
+                  type: "panelActions",
+                },
+              },
+              title: "Export",
+            },
+          ],
+          title: "Controls",
+        },
+        timeline: { enabled: true, mode: "playback" },
+      },
+    });
+
+    expect(
+      validateToolcraftAcceptanceCoverage(schemaWithoutImageSettings, [
+        makeControlAcceptance("appearance.background", "color"),
+        makeControlAcceptance("export.includeBackground", "switch"),
+        makeControlAcceptance("export.video.format", "select"),
+        makeControlAcceptance("export.video.resolution", "select"),
+        {
+          actionCoverage: ["export.video", "export.png"],
+          automated: true,
+          automatedTestName: "exports animated and still output",
+          browser: true,
+          browserTestName: "browser: exports video and image output",
+          componentType: "panelActions",
+          evidence: "exported-bytes",
+          expectedObservable:
+            "Export Video and Export PNG both create output bytes and read their runtime export settings.",
+          fixture: "animated export fixture",
+          id: "actions.output",
+          kind: "control",
+          target: "actions.output",
+          userAction:
+            "Export video and PNG from the same timeline state, then verify both files exist.",
+        },
+      ]),
+    ).toEqual(
+      expect.arrayContaining([
+        'Apps with Export PNG must expose image export settings in a separate controls section titled "Image Export" directly above sticky footer export actions or directly before "Video Export" when video export also exists.',
+        'The separate "Image Export" section must include a format control with target "export.image.format".',
+        'The separate "Image Export" section must include a resolution control with target "export.image.resolution".',
+      ]),
+    );
+  });
+
+  it("accepts animated apps with Image Export immediately before Video Export", () => {
+    const schemaWithDualExportSettings = defineToolcraft({
+      canvas: {
+        enabled: true,
+        sizing: { mode: "editable-output" },
+      },
+      panels: {
+        controls: {
+          sections: [
+            makeBackgroundSection(),
+            makeImageExportSection(),
+            makeVideoExportSection(),
+            {
+              actionGroup: "secondary",
+              controls: {
+                outputActions: {
+                  actions: [
+                    {
+                      icon: "download",
+                      label: "Export Video",
+                      value: "export.video",
+                    },
+                    {
+                      icon: "export",
+                      label: "Export PNG",
+                      value: "export.png",
+                    },
+                  ],
+                  target: "actions.output",
+                  type: "panelActions",
+                },
+              },
+              title: "Export",
+            },
+          ],
+          title: "Controls",
+        },
+        timeline: { enabled: true, mode: "playback" },
+      },
+    });
+    const imageFormatAcceptance = makeControlAcceptance("export.image.format", "select");
+    imageFormatAcceptance.optionCoverage = ["png", "jpg"];
+    const imageResolutionAcceptance = makeControlAcceptance(
+      "export.image.resolution",
+      "select",
+    );
+    imageResolutionAcceptance.optionCoverage = ["2k", "4k", "8k"];
+    const videoFormatAcceptance = makeControlAcceptance("export.video.format", "select");
+    videoFormatAcceptance.optionCoverage = ["mp4", "webm"];
+    const videoResolutionAcceptance = makeControlAcceptance(
+      "export.video.resolution",
+      "select",
+    );
+    videoResolutionAcceptance.optionCoverage = ["current", "4k"];
+
+    expect(
+      validateToolcraftAcceptanceCoverage(schemaWithDualExportSettings, [
+        makeControlAcceptance("appearance.background", "color"),
+        makeControlAcceptance("export.includeBackground", "switch"),
+        imageFormatAcceptance,
+        imageResolutionAcceptance,
+        videoFormatAcceptance,
+        videoResolutionAcceptance,
+        {
+          actionCoverage: ["export.video", "export.png"],
+          automated: true,
+          automatedTestName: "exports animated and still output",
+          browser: true,
+          browserTestName: "browser: exports video and image output",
+          componentType: "panelActions",
+          evidence: "exported-bytes",
+          expectedObservable:
+            "Export Video and Export PNG both create output bytes and read their runtime export settings.",
+          fixture: "animated export fixture",
+          id: "actions.output",
+          kind: "control",
+          target: "actions.output",
+          userAction:
+            "Choose JPG and 8K, choose MP4 and Current, then export PNG and video and verify both outputs use their selected settings.",
+        },
+      ]),
+    ).not.toEqual(
+      expect.arrayContaining([
+        expect.stringContaining("Image Export"),
+        expect.stringContaining("Video Export"),
+      ]),
+    );
+  });
+
   it("requires disabledWhen controls to reference a real target and prove disabled behavior", () => {
     const schemaWithDisabledDependency = defineToolcraft({
       canvas: { enabled: true },
@@ -2923,13 +3523,13 @@ describe("Toolcraft template app acceptance coverage", () => {
     ).toEqual(
       expect.arrayContaining([
         expect.stringContaining(
-          'export.includeBackground) toggle label "Background" duplicates section title "Background". Use label false for a visual-only toggle or rename the toggle to a more specific setting.',
+          'export.includeBackground) toggle label "Background" duplicates section title "Background". Use a shorter contextual label such as "Include" or rename the toggle to a more specific setting.',
         ),
       ]),
     );
   });
 
-  it("allows hidden-label toggle plus one related parameter in a section-owned inline row", () => {
+  it("allows short Include toggle plus an unlabeled background color in the required row", () => {
     const schema = defineToolcraft({
       canvas: { enabled: true },
       panels: {
@@ -2941,7 +3541,7 @@ describe("Toolcraft template app acceptance coverage", () => {
                   defaultValue: true,
                   description:
                     "Controls PNG background transparency while preview and video keep the background.",
-                  label: false,
+                  label: "Include",
                   target: "export.includeBackground",
                   type: "switch",
                 },
@@ -2976,6 +3576,8 @@ describe("Toolcraft template app acceptance coverage", () => {
       expect.arrayContaining([
         expect.stringContaining("duplicates section title"),
         expect.stringContaining("too long for a two-column toggle row"),
+        expect.stringContaining("must use the short visible label"),
+        expect.stringContaining("must use label false"),
       ]),
     );
   });
@@ -5284,7 +5886,7 @@ describe("Toolcraft template app acceptance coverage", () => {
                   defaultValue: "uppercase",
                   label: "Case",
                   options: [
-                    { label: "Original", value: "original" },
+                    { label: "As typed", value: "original" },
                     { label: "Uppercase", value: "uppercase" },
                   ],
                   orderRole: "primary",