@pixel-point/toolcraft 0.0.2 → 0.0.4

package/templates/runtime/contracts/component-contracts.test.ts

@@ -191,7 +191,7 @@ describe("Toolcraft template component contracts", () => {
       "When the nearest section title already names the switch context, do not duplicate that title as the visible switch label. Use label false for a visual-only toggle and keep the meaning in target/description.",
     );
     expect(switchContract.aiUsageRules).toContain(
-      "A Switch may share an inline row with one related parameter control when the visible switch label is short enough to fit. Hide the switch label when the section title provides the visible context, such as Include background plus Background color inside Background.",
+      'A Switch may share an inline row with one related parameter control when the visible switch label is short enough to fit. That row uses equal-width columns; never shrink the switch column to intrinsic width. In section-owned rows, use a short visible label such as "Include" instead of repeating the section title, such as "Include background" inside Background.',
     );
     expect(checkboxContract.aiUsageRules).toContain(
       'Checkbox labels name the setting context only; do not prefix labels with "Enable" or "Disable" because the checkbox already communicates enabled/selected state.',
@@ -206,7 +206,7 @@ describe("Toolcraft template component contracts", () => {
       "Two adjacent Checkbox controls for the same product entity must share one inline row when every visible label fits without truncation. Keep paired labels to short one- or two-word names; the runtime auto-pairs safe adjacent checkboxes by target entity, and generated schemas should stack checkboxes only when any label would truncate.",
     );
     expect(checkboxContract.aiUsageRules).toContain(
-      "A Checkbox may share an inline row with one related parameter control when the visible checkbox label is short enough to fit. Hide the checkbox label when the section title provides the visible context.",
+      "A Checkbox may share an inline row with one related parameter control when the visible checkbox label is short enough to fit. That row uses equal-width columns; never shrink the checkbox column to intrinsic width. Hide the checkbox label when the section title provides the visible context.",
     );
   });
 
@@ -392,7 +392,7 @@ describe("Toolcraft template component contracts", () => {
       "A settings-transfer section with only Export Settings and Import Settings means canvas sizing is not editable-output or canvas size controls already exist elsewhere.",
     );
     expect(contract.aiUsageRules).toContain(
-      "When settings transfer and editable-output canvas sizing are both enabled, the first technical Setup runtime section contains Export Settings, Import Settings, Canvas width, and Canvas height in that order and renders without a visible section heading.",
+      "When settings transfer and editable-output canvas sizing are both enabled, the first technical Setup runtime section contains Export Settings, Import Settings, Aspect ratio, Canvas width, and Canvas height in that order and renders without a visible section heading.",
     );
   });
 
@@ -493,7 +493,7 @@ describe("Toolcraft template component contracts", () => {
       "Product-output apps always expose renderer-owned output background color as a schema color target such as appearance.background or scene.background.",
     );
     expect(color.aiUsageRules).toContain(
-      "Pair renderer-owned output background color with export.includeBackground in one Background section. Prefer an inline hidden-label toggle plus color parameter row when the section title supplies the Background context.",
+      'Pair renderer-owned output background color with export.includeBackground in one Background section directly before export settings. Use an equal-width inline row with the export.includeBackground Switch labeled "Include" on the left and the background Color parameter with label false on the right; each control occupies one half of the row.',
     );
     expect(color.aiUsageRules).toContain(
       "Preview, PNG export, and video export must read the runtime background color value instead of hardcoding that background in CSS, Canvas fillStyle, or WebGL clearColor. export.includeBackground controls only PNG alpha; it must not make live preview, workspace canvas backing, or video transparent.",
@@ -502,7 +502,7 @@ describe("Toolcraft template component contracts", () => {
       "When one short numeric/text field and one Color field configure the same entity, keep them in one two-column inline layout group.",
     );
     expect(color.aiUsageRules).toContain(
-      "Mixed inline rows require visible labels on both controls except for section-title-owned hidden-label toggle plus parameter rows. Color fields in other mixed rows must not be unlabeled.",
+      'Mixed inline rows require visible labels on both controls. The required Background row is the only section-title-owned exception: use the Switch label "Include" and set the background Color control label to false. Color fields in other mixed rows must not be unlabeled.',
     );
     expect(color.aiUsageRules).toContain(
       "Plain Color popovers must not show opacity controls. If opacity is editable, use ColorOpacity instead.",
@@ -1005,12 +1005,30 @@ describe("Toolcraft template component contracts", () => {
     expect(contract.aiUsageRules).toContain(
       "Static or still-output apps include Export PNG as the primary footer action.",
     );
+    expect(contract.aiUsageRules).toContain(
+      'Every app with Export PNG must expose a separate "Image Export" controls section.',
+    );
+    expect(contract.aiUsageRules).toContain(
+      'The Image Export section must include "export.image.format" as a Select control with PNG and JPG choices, defaulting to "png".',
+    );
+    expect(contract.aiUsageRules).toContain(
+      'The Image Export section must include "export.image.resolution" as a Select control with 2K, 4K, and 8K choices, defaulting to "4k".',
+    );
+    expect(contract.aiUsageRules).toContain(
+      "Image Export format and resolution render as one compact two-column inline Select pair, matching the Video Export settings structure.",
+    );
+    expect(contract.aiUsageRules).toContain(
+      "Image Export resolution controls the actual exported image long edge: 2K = 2048px, 4K = 4096px, 8K = 8192px. Pass the selected runtime value to createToolcraftPngExportCanvas resolution and prove decoded image width/height in browser acceptance.",
+    );
     expect(contract.aiUsageRules).toContain(
       "Animated apps include Export Video as the primary footer action and Export PNG as a secondary footer action.",
     );
     expect(contract.aiUsageRules).toContain(
       'Animated apps with Export Video must expose a separate "Video Export" controls section.',
     );
+    expect(contract.aiUsageRules).toContain(
+      'Animated apps with both Export PNG and Export Video must expose both "Image Export" and "Video Export"; Image Export sits immediately before Video Export.',
+    );
     expect(contract.aiUsageRules).toContain(
       'The Video Export section must include format and resolution controls such as targets "export.video.format" and "export.video.resolution".',
     );
@@ -1048,10 +1066,13 @@ describe("Toolcraft template component contracts", () => {
       "Video export must report frame-based progress through reportProgress during render/encode steps. PNG export should report phase progress for render, blob, and handoff when those phases are asynchronous.",
     );
     expect(contract.aiUsageRules).toContain(
-      "Product-output apps must expose user-facing Background color and Include background controls, then pass the includeBackground runtime value to createToolcraftPngExportCanvas only for PNG alpha.",
+      'Product-output apps must expose a dedicated "Background" section directly before the first export settings section. With PNG export that first section is Image Export; with video-only export it is Video Export.',
+    );
+    expect(contract.aiUsageRules).toContain(
+      "Product-output apps must pass the includeBackground runtime value to createToolcraftPngExportCanvas only for PNG alpha.",
     );
     expect(contract.aiUsageRules).toContain(
-      "PNG export must use createToolcraftPngExportCanvas so background transparency and retina sizing are applied consistently without making live preview, workspace canvas backing, or video transparent.",
+      "PNG export must use createToolcraftPngExportCanvas so background transparency and selected image dimensions or retina fallback are applied consistently without making live preview, workspace canvas backing, or video transparent.",
     );
     expect(contract.aiUsageRules).toContain(
       "Video export must keep product background and use getToolcraftRetinaExportSize for retina dimensions.",

package/templates/runtime/contracts/component-contracts.ts

@@ -204,7 +204,7 @@ export const TOOLCRAFT_COMPONENT_CONTRACTS = {
       'Use labels such as "CRT", "Background", "Glow", or "Loop" instead of "Enable CRT" or "Disable background".',
       "Two adjacent Switch controls for the same product entity must share one inline row when every visible label fits without truncation. Keep paired labels to short one- or two-word names; the runtime auto-pairs safe adjacent switches by target entity, and generated schemas should stack switches only when any label would truncate.",
       "When the nearest section title already names the switch context, do not duplicate that title as the visible switch label. Use label false for a visual-only toggle and keep the meaning in target/description.",
-      "A Switch may share an inline row with one related parameter control when the visible switch label is short enough to fit. Hide the switch label when the section title provides the visible context, such as Include background plus Background color inside Background.",
+      'A Switch may share an inline row with one related parameter control when the visible switch label is short enough to fit. That row uses equal-width columns; never shrink the switch column to intrinsic width. In section-owned rows, use a short visible label such as "Include" instead of repeating the section title, such as "Include background" inside Background.',
     ],
   },
   checkbox: {
@@ -239,7 +239,7 @@ export const TOOLCRAFT_COMPONENT_CONTRACTS = {
       'Use labels such as "Transparent background", "Guides", or "Loop" instead of "Enable transparent background".',
       "When the nearest section title already names the checkbox context, do not duplicate that title as the visible checkbox label. Use label false for a visual-only checkbox and keep the meaning in target/description.",
       "Two adjacent Checkbox controls for the same product entity must share one inline row when every visible label fits without truncation. Keep paired labels to short one- or two-word names; the runtime auto-pairs safe adjacent checkboxes by target entity, and generated schemas should stack checkboxes only when any label would truncate.",
-      "A Checkbox may share an inline row with one related parameter control when the visible checkbox label is short enough to fit. Hide the checkbox label when the section title provides the visible context.",
+      "A Checkbox may share an inline row with one related parameter control when the visible checkbox label is short enough to fit. That row uses equal-width columns; never shrink the checkbox column to intrinsic width. Hide the checkbox label when the section title provides the visible context.",
     ],
   },
   colorOpacity: {
@@ -423,8 +423,14 @@ export const TOOLCRAFT_COMPONENT_CONTRACTS = {
       "defineToolcraft hoists panelActions into the controls panel sticky footer automatically.",
       "Product-output apps must always include export in panelActions.",
       "Static or still-output apps include Export PNG as the primary footer action.",
+      'Every app with Export PNG must expose a separate "Image Export" controls section.',
+      'The Image Export section must include "export.image.format" as a Select control with PNG and JPG choices, defaulting to "png".',
+      'The Image Export section must include "export.image.resolution" as a Select control with 2K, 4K, and 8K choices, defaulting to "4k".',
+      "Image Export format and resolution render as one compact two-column inline Select pair, matching the Video Export settings structure.",
+      "Image Export resolution controls the actual exported image long edge: 2K = 2048px, 4K = 4096px, 8K = 8192px. Pass the selected runtime value to createToolcraftPngExportCanvas resolution and prove decoded image width/height in browser acceptance.",
       "Animated apps include Export Video as the primary footer action and Export PNG as a secondary footer action.",
       'Animated apps with Export Video must expose a separate "Video Export" controls section.',
+      'Animated apps with both Export PNG and Export Video must expose both "Image Export" and "Video Export"; Image Export sits immediately before Video Export.',
       'The Video Export section must include format and resolution controls such as targets "export.video.format" and "export.video.resolution".',
       "Use Select controls for Video Export format and resolution; do not use Segmented unless the product has a deliberately tiny fixed output menu and browser tests prove every cell keeps padding.",
       'Place the Video Export section as the final controls section directly above sticky footer panelActions.',
@@ -437,8 +443,9 @@ export const TOOLCRAFT_COMPONENT_CONTRACTS = {
       'Video resolution must control exported dimensions. Use "current" output size by default; "4K" is an export resolution target, not a hardcoded 3840x2160 canvas lock.',
       "Video export browser coverage must load the exported blob metadata and prove video.duration matches the edited runtime timeline duration; blobSize/blobType checks alone are not enough.",
       "Video export must report frame-based progress through reportProgress during render/encode steps. PNG export should report phase progress for render, blob, and handoff when those phases are asynchronous.",
-      "Product-output apps must expose user-facing Background color and Include background controls, then pass the includeBackground runtime value to createToolcraftPngExportCanvas only for PNG alpha.",
-      "PNG export must use createToolcraftPngExportCanvas so background transparency and retina sizing are applied consistently without making live preview, workspace canvas backing, or video transparent.",
+      'Product-output apps must expose a dedicated "Background" section directly before the first export settings section. With PNG export that first section is Image Export; with video-only export it is Video Export.',
+      "Product-output apps must pass the includeBackground runtime value to createToolcraftPngExportCanvas only for PNG alpha.",
+      "PNG export must use createToolcraftPngExportCanvas so background transparency and selected image dimensions or retina fallback are applied consistently without making live preview, workspace canvas backing, or video transparent.",
       "Video export must keep product background and use getToolcraftRetinaExportSize for retina dimensions.",
       "Copy PNG can be a secondary action when clipboard output is useful, but copy does not replace export.",
       "Add Copy PNG as a secondary action only when the prompt/reference includes clipboard output or the product clearly benefits from paste/share workflows.",
@@ -575,10 +582,10 @@ export const TOOLCRAFT_COMPONENT_CONTRACTS = {
       "Never use generic Color or Colors as a generated section title. If no meaningful color role exists and the colors are just basic colors, use a neutral section title such as Appearance instead of omitting the title.",
       "Do not split a grouped object section into a separate generated Color section; if the color role is unclear, ask the user before implementation.",
       "When one short numeric/text field and one Color field configure the same entity, keep them in one two-column inline layout group.",
-      "Mixed inline rows require visible labels on both controls except for section-title-owned hidden-label toggle plus parameter rows. Color fields in other mixed rows must not be unlabeled.",
+      'Mixed inline rows require visible labels on both controls. The required Background row is the only section-title-owned exception: use the Switch label "Include" and set the background Color control label to false. Color fields in other mixed rows must not be unlabeled.',
       "Plain Color popovers must not show opacity controls. If opacity is editable, use ColorOpacity instead.",
       "Product-output apps always expose renderer-owned output background color as a schema color target such as appearance.background or scene.background.",
-      "Pair renderer-owned output background color with export.includeBackground in one Background section. Prefer an inline hidden-label toggle plus color parameter row when the section title supplies the Background context.",
+      'Pair renderer-owned output background color with export.includeBackground in one Background section directly before export settings. Use an equal-width inline row with the export.includeBackground Switch labeled "Include" on the left and the background Color parameter with label false on the right; each control occupies one half of the row.',
       "Preview, PNG export, and video export must read the runtime background color value instead of hardcoding that background in CSS, Canvas fillStyle, or WebGL clearColor. export.includeBackground controls only PNG alpha; it must not make live preview, workspace canvas backing, or video transparent.",
       "Render multiple related color fields in one section with at most two colors per row.",
     ],
@@ -986,7 +993,7 @@ export const TOOLCRAFT_COMPONENT_CONTRACTS = {
       "Do not hand-roll settings import/export through app routes, hidden file inputs, or panelActions.",
       "Settings transfer appears as the first technical Setup controls-panel section when enabled and renders without a visible section heading; it imports and exports control values, canvas size, and timeline state.",
       "A settings-transfer section with only Export Settings and Import Settings means canvas sizing is not editable-output or canvas size controls already exist elsewhere.",
-      "When settings transfer and editable-output canvas sizing are both enabled, the first technical Setup runtime section contains Export Settings, Import Settings, Canvas width, and Canvas height in that order and renders without a visible section heading.",
+      "When settings transfer and editable-output canvas sizing are both enabled, the first technical Setup runtime section contains Export Settings, Import Settings, Aspect ratio, Canvas width, and Canvas height in that order and renders without a visible section heading.",
       "Keep sticky footer panelActions for product delivery actions only, such as Export PNG, Export Video, Copy, Generate, Apply, or Download.",
     ],
     capabilities: ["settings-import-export"],

package/templates/runtime/contracts/decision-contracts.ts

@@ -177,7 +177,7 @@ export const TOOLCRAFT_DECISION_CONTRACT = [
     currentConstraint:
       "Product-output apps expose final output delivery through sticky footer panelActions.",
     desiredBehavior:
-      "Static products include Export PNG; animated products include Export Video and Export PNG. Copy can be secondary, but it does not replace export. Product apps expose Background and Include background controls; standard export helpers own runtime PNG transparency and retina dimensions, while live preview, workspace canvas backing, and video keep the background.",
+      'Static products include Export PNG plus an "Image Export" section for format and 2K/4K/8K resolution; animated products include Export Video and Export PNG plus "Video Export" settings. Copy can be secondary, but it does not replace export. Product apps expose a required "Background" section directly before export settings, with a Switch labeled "Include" and a background color control with label false in one equal-width row. Standard export helpers own runtime PNG transparency and selected image dimensions or retina fallback, while live preview, workspace canvas backing, and video keep the background.',
     enforcement: ["acceptance-validator", "performance-validator", "browser-helper", "starter-agents"],
     id: "output-export-required",
     level: "invariant",

package/templates/runtime/export/export.test.ts

@@ -4,6 +4,7 @@ import { defineToolcraft } from "../schema/define-toolcraft";
 import type { ToolcraftState } from "../state/types";
 import {
   createToolcraftPngExportCanvas,
+  getToolcraftImageExportSize,
   getToolcraftRetinaExportPixelRatio,
   getToolcraftRetinaExportSize,
   shouldIncludeToolcraftExportBackground,
@@ -105,6 +106,54 @@ describe("Toolcraft export helpers", () => {
     });
   });
 
+  it("resolves image export resolution presets from canvas aspect ratio", () => {
+    const state = createState();
+
+    expect(getToolcraftImageExportSize({ resolution: "2k", state })).toEqual({
+      height: 1024,
+      pixelRatio: 10.24,
+      width: 2048,
+    });
+    expect(getToolcraftImageExportSize({ resolution: "4k", state })).toEqual({
+      height: 2048,
+      pixelRatio: 20.48,
+      width: 4096,
+    });
+    expect(getToolcraftImageExportSize({ resolution: "8k", state })).toEqual({
+      height: 4096,
+      pixelRatio: 40.96,
+      width: 8192,
+    });
+  });
+
+  it("preserves portrait aspect ratio for image export resolution presets", () => {
+    const state = createState();
+    state.canvas.size = { height: 200, unit: "px", width: 100 };
+
+    expect(getToolcraftImageExportSize({ resolution: "4k", state })).toEqual({
+      height: 4096,
+      pixelRatio: 20.48,
+      width: 2048,
+    });
+  });
+
+  it("falls back to retina sizing for current or unknown image export resolution", () => {
+    const state = createState();
+
+    expect(getToolcraftImageExportSize({ devicePixelRatio: 2, resolution: "current", state }))
+      .toEqual({
+        height: 200,
+        pixelRatio: 2,
+        width: 400,
+      });
+    expect(getToolcraftImageExportSize({ devicePixelRatio: 2, resolution: "source", state }))
+      .toEqual({
+        height: 200,
+        pixelRatio: 2,
+        width: 400,
+      });
+  });
+
   it("creates a transparent retina png canvas when png background is disabled", () => {
     const schema = defineToolcraft({
       canvas: { enabled: true },
@@ -159,6 +208,22 @@ describe("Toolcraft export helpers", () => {
     expect(context.fillRect).toHaveBeenCalledWith(0, 0, 400, 200);
   });
 
+  it("creates a png canvas at the selected image export resolution", () => {
+    const state = createState();
+    const { canvas, context } = createMockCanvas();
+
+    createToolcraftPngExportCanvas({
+      canvasFactory: () => canvas,
+      render: vi.fn(),
+      resolution: "4k",
+      state,
+    });
+
+    expect(canvas.width).toBe(4096);
+    expect(canvas.height).toBe(2048);
+    expect(context.scale).toHaveBeenCalledWith(20.48, 20.48);
+  });
+
   it("allows runtime controls to disable the png background", () => {
     const state = createState();
     const { canvas, context } = createMockCanvas();

package/templates/runtime/export/export.ts

@@ -3,6 +3,8 @@ import type { ToolcraftState } from "../state/types";
 
 export type ToolcraftExportFormat = "png" | "video";
 
+export type ToolcraftImageExportResolution = "current" | "2k" | "4k" | "8k";
+
 export type ToolcraftRetinaExportSize = {
   height: number;
   pixelRatio: number;
@@ -19,6 +21,10 @@ export type ToolcraftExportSizeOptions = {
   state: ToolcraftState;
 };
 
+export type ToolcraftImageExportSizeOptions = ToolcraftExportSizeOptions & {
+  resolution?: ToolcraftImageExportResolution | string;
+};
+
 export type ToolcraftPngRenderContext = {
   canvas: HTMLCanvasElement;
   context: CanvasRenderingContext2D;
@@ -36,9 +42,19 @@ export type ToolcraftPngExportCanvasOptions = {
   devicePixelRatio?: number;
   includeBackground?: boolean;
   render: (context: ToolcraftPngRenderContext) => void;
+  resolution?: ToolcraftImageExportResolution | string;
   state: ToolcraftState;
 };
 
+const toolcraftImageExportLongEdges: Record<
+  Exclude<ToolcraftImageExportResolution, "current">,
+  number
+> = {
+  "2k": 2048,
+  "4k": 4096,
+  "8k": 8192,
+};
+
 export function getToolcraftRetinaExportPixelRatio(devicePixelRatio?: number): number {
   const globalPixelRatio = (globalThis as typeof globalThis & { devicePixelRatio?: number })
     .devicePixelRatio;
@@ -67,6 +83,41 @@ export function getToolcraftRetinaExportSize({
   };
 }
 
+export function getToolcraftImageExportSize({
+  devicePixelRatio,
+  resolution,
+  state,
+}: ToolcraftImageExportSizeOptions): ToolcraftRetinaExportSize {
+  const normalizedResolution = String(resolution ?? "current").toLowerCase();
+  const targetLongEdge =
+    toolcraftImageExportLongEdges[
+      normalizedResolution as Exclude<ToolcraftImageExportResolution, "current">
+    ];
+
+  if (!targetLongEdge) {
+    return getToolcraftRetinaExportSize({ devicePixelRatio, state });
+  }
+
+  const cssWidth = Math.max(1, state.canvas.size.width);
+  const cssHeight = Math.max(1, state.canvas.size.height);
+  const dominantSize = Math.max(cssWidth, cssHeight);
+  const pixelRatio = targetLongEdge / dominantSize;
+
+  if (cssWidth >= cssHeight) {
+    return {
+      height: Math.max(1, Math.round(cssHeight * pixelRatio)),
+      pixelRatio,
+      width: targetLongEdge,
+    };
+  }
+
+  return {
+    height: targetLongEdge,
+    pixelRatio,
+    width: Math.max(1, Math.round(cssWidth * pixelRatio)),
+  };
+}
+
 export function shouldIncludeToolcraftExportBackground({
   format,
   schema,
@@ -84,11 +135,13 @@ export function createToolcraftPngExportCanvas({
   devicePixelRatio,
   includeBackground: includeBackgroundOverride,
   render,
+  resolution,
   state,
 }: ToolcraftPngExportCanvasOptions): HTMLCanvasElement {
   const canvas = canvasFactory();
-  const { height, pixelRatio, width } = getToolcraftRetinaExportSize({
+  const { height, pixelRatio, width } = getToolcraftImageExportSize({
     devicePixelRatio,
+    resolution,
     state,
   });
   const includeBackground =

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

@@ -384,7 +384,7 @@ describe("ControlsPanel", () => {
     expect(inlineGroup?.textContent).toContain("Snap Y");
   });
 
-  it("renders hidden-label toggle plus parameter rows inline without duplicating section labels", () => {
+  it("renders the managed background toggle plus unlabeled color row as equal-width inline columns", () => {
     const schema = defineToolcraft({
       canvas: { enabled: false },
       panels: {
@@ -396,7 +396,7 @@ describe("ControlsPanel", () => {
                   defaultValue: true,
                   description:
                     "Controls PNG background transparency while preview and video keep the background.",
-                  label: false,
+                  label: "Include",
                   target: "export.includeBackground",
                   type: "switch",
                 },
@@ -428,12 +428,15 @@ describe("ControlsPanel", () => {
     );
 
     expect(screen.getAllByText("Background")).toHaveLength(1);
-    expect(screen.getByRole("switch", { name: "includeBackground" })).toBeTruthy();
+    expect(screen.getByText("Include")).toBeTruthy();
+    expect(screen.getByRole("switch")).toBeTruthy();
     expect(toggleParameterGroup).toBeTruthy();
-    expect(toggleParameterGroup?.getAttribute("style")).toContain("auto minmax(0, 1fr)");
+    expect(toggleParameterGroup?.getAttribute("style")).toContain(
+      "repeat(2, minmax(0, 1fr))",
+    );
   });
 
-  it("renders short visible toggle plus parameter rows as compact toggle-parameter rows", () => {
+  it("renders short visible toggle plus parameter rows as equal-width toggle-parameter rows", () => {
     const schema = defineToolcraft({
       canvas: { enabled: false },
       panels: {
@@ -477,7 +480,9 @@ describe("ControlsPanel", () => {
     expect(screen.getByText("Loop")).toBeTruthy();
     expect(screen.getByText("Duration")).toBeTruthy();
     expect(toggleParameterGroup).toBeTruthy();
-    expect(toggleParameterGroup?.getAttribute("style")).toContain("auto minmax(0, 1fr)");
+    expect(toggleParameterGroup?.getAttribute("style")).toContain(
+      "repeat(2, minmax(0, 1fr))",
+    );
   });
 
   it("renders compact select pairs inline with stacked full-width fields", () => {
@@ -3085,6 +3090,42 @@ describe("ControlsPanel", () => {
     expect(screen.getByTestId("canvas-size").textContent).toBe("320,180");
   });
 
+  it("renders editable-output aspect ratio controls with the current canvas preset", () => {
+    const schema = defineToolcraft({
+      canvas: {
+        enabled: true,
+        size: { height: 1080, unit: "px", width: 1440 },
+        sizing: { mode: "editable-output" },
+      },
+      panels: {
+        controls: {
+          sections: [],
+          title: "Controls",
+        },
+      },
+    });
+    const { container } = renderControlsPanelWithSchema(schema);
+
+    expect(screen.getByTestId("canvas-size").textContent).toBe("1440,1080");
+
+    const aspectRatioControl = container.querySelector<HTMLElement>(
+      '[data-slot="canvas-aspect-ratio-control"]',
+    );
+
+    expect(screen.getByText("Aspect ratio")).toBeTruthy();
+    expect(aspectRatioControl?.textContent).toContain("4:3");
+    const values = JSON.parse(screen.getByTestId("values-json").textContent ?? "{}");
+
+    expect(values["canvas.aspectRatio"]).toEqual({
+      height: 3,
+      mode: "preset",
+      value: "4:3",
+      width: 4,
+    });
+    expect(values["canvas.size.width"]).toBe(1440);
+    expect(values["canvas.size.height"]).toBe(1080);
+  });
+
   it("applies empty text input values while typing and reset restores defaults", () => {
     renderControlsPanel();
 
@@ -3391,11 +3432,18 @@ describe("ControlsPanel", () => {
     expect(firstSection?.querySelector("[data-control-list]")?.className).not.toContain("pb-5");
     expect(firstInlineGroup?.textContent).toContain("Canvas width");
     expect(firstInlineGroup?.textContent).toContain("Canvas height");
+    expect(firstSection?.textContent).toContain("Aspect ratio");
     expect(firstSection?.textContent).toContain("Canvas width");
     expect(firstSection?.textContent).toContain("Canvas height");
     expect(firstSection?.textContent).toContain("Export Settings");
     expect(firstSection?.textContent).toContain("Import Settings");
     expect((firstSection?.textContent ?? "").indexOf("Export Settings")).toBeLessThan(
+      (firstSection?.textContent ?? "").indexOf("Import Settings"),
+    );
+    expect((firstSection?.textContent ?? "").indexOf("Import Settings")).toBeLessThan(
+      (firstSection?.textContent ?? "").indexOf("Aspect ratio"),
+    );
+    expect((firstSection?.textContent ?? "").indexOf("Aspect ratio")).toBeLessThan(
       (firstSection?.textContent ?? "").indexOf("Canvas width"),
     );
     expect(scrollContent?.textContent).toContain("Import Settings");