@pixel-point/toolcraft 0.0.3 → 0.0.4

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

@@ -57,6 +57,10 @@ import type {
   ToolcraftControlSchema,
   ResolvedToolcraftAppSchema,
 } from "../schema/types";
+import {
+  getToolcraftCanvasAspectRatioPreset,
+  toolcraftCanvasAspectRatioPresets,
+} from "../schema/canvas-aspect-ratio-presets";
 import { getToolcraftControlKeyframeCapability } from "../schema/keyframe-capability";
 import { getToolcraftCanvasSizeTargetDimension } from "../schema/runtime-targets";
 import type {
@@ -112,9 +116,22 @@ type FooterActionProgressEntry = {
   id: number;
   progress: number | null;
 };
+type CanvasAspectRatioValue = {
+  height: number;
+  mode: "custom" | "preset";
+  value: string;
+  width: number;
+};
 
 const hiddenDiscreteMarkerCount = 2;
 const controlsPanelSectionCollapseStorageVersion = 1;
+const canvasAspectRatioOptions = [
+  ...toolcraftCanvasAspectRatioPresets.map((preset) => ({
+    label: preset.value,
+    value: preset.value,
+  })),
+  { label: "Custom...", value: "custom" },
+] as const;
 
 const sectionedCompoundControlTypes = new Set([
   "channelMixer",
@@ -257,6 +274,86 @@ function asString(value: unknown, fallback = ""): string {
   return typeof value === "number" && Number.isFinite(value) ? String(value) : fallback;
 }
 
+function parseCanvasAspectRatioOption(value: string): CanvasAspectRatioValue | null {
+  const preset = getToolcraftCanvasAspectRatioPreset(value);
+
+  if (preset) {
+    return {
+      height: preset.ratioHeight,
+      mode: "preset",
+      value: preset.value,
+      width: preset.ratioWidth,
+    };
+  }
+
+  const match = /^\s*(\d+(?:\.\d+)?)\s*:\s*(\d+(?:\.\d+)?)\s*$/u.exec(value);
+
+  if (!match) {
+    return null;
+  }
+
+  const width = Number.parseFloat(match[1] ?? "");
+  const height = Number.parseFloat(match[2] ?? "");
+
+  if (!Number.isFinite(width) || !Number.isFinite(height) || width <= 0 || height <= 0) {
+    return null;
+  }
+
+  return {
+    height: Math.round(height),
+    mode: "custom",
+    value: `${Math.round(width)}:${Math.round(height)}`,
+    width: Math.round(width),
+  };
+}
+
+function asCanvasAspectRatioValue(
+  value: unknown,
+  fallback: unknown,
+): CanvasAspectRatioValue {
+  if (isRecord(value)) {
+    const width = asNumber(value.width, NaN);
+    const height = asNumber(value.height, NaN);
+    const mode = value.mode === "preset" ? "preset" : "custom";
+
+    if (Number.isFinite(width) && Number.isFinite(height) && width > 0 && height > 0) {
+      return {
+        height: Math.round(height),
+        mode,
+        value:
+          typeof value.value === "string"
+            ? value.value
+            : `${Math.round(width)}:${Math.round(height)}`,
+        width: Math.round(width),
+      };
+    }
+  }
+
+  if (typeof value === "string") {
+    const parsed = parseCanvasAspectRatioOption(value);
+
+    if (parsed) {
+      return parsed;
+    }
+  }
+
+  if (fallback !== value) {
+    return asCanvasAspectRatioValue(fallback, {
+      height: 1,
+      mode: "preset",
+      value: "1:1",
+      width: 1,
+    });
+  }
+
+  return {
+    height: 1,
+    mode: "preset",
+    value: "1:1",
+    width: 1,
+  };
+}
+
 function asBoolean(value: unknown, fallback = false): boolean {
   return typeof value === "boolean" ? value : fallback;
 }
@@ -330,6 +427,8 @@ function formatControlValueLabel(
   }
 
   switch (control.type) {
+    case "aspectRatio":
+      return asCanvasAspectRatioValue(value, control.defaultValue).value;
     case "checkbox":
     case "switch":
       return asBoolean(value) ? "On" : "Off";
@@ -505,6 +604,111 @@ function asFontPickerValue(value: unknown): FontPickerValue {
   };
 }
 
+function CanvasAspectRatioControl({
+  defaultValue,
+  name,
+  onValueChange,
+  value,
+}: {
+  defaultValue: unknown;
+  name: string;
+  onValueChange?: (
+    value: CanvasAspectRatioValue,
+    meta?: ControlChangeMeta,
+  ) => void;
+  value: unknown;
+}): React.JSX.Element {
+  const ratio = asCanvasAspectRatioValue(value, defaultValue);
+  const selectedValue = ratio.mode === "custom" ? "custom" : ratio.value;
+
+  function commitRatio(
+    nextRatio: CanvasAspectRatioValue,
+    meta?: ControlChangeMeta,
+  ): void {
+    onValueChange?.(nextRatio, meta);
+  }
+
+  function updatePreset(nextValue: string): void {
+    if (nextValue === "custom") {
+      commitRatio({
+        height: ratio.height,
+        mode: "custom",
+        value: `${ratio.width}:${ratio.height}`,
+        width: ratio.width,
+      });
+      return;
+    }
+
+    const nextRatio = parseCanvasAspectRatioOption(nextValue);
+
+    if (nextRatio) {
+      commitRatio(nextRatio);
+    }
+  }
+
+  function updateCustomDimension(
+    dimension: "height" | "width",
+    nextValue: string,
+    meta?: ControlChangeMeta,
+  ): void {
+    const numberValue = Number.parseFloat(nextValue);
+
+    if (!Number.isFinite(numberValue) || numberValue <= 0) {
+      return;
+    }
+
+    const width =
+      dimension === "width" ? Math.max(1, Math.round(numberValue)) : ratio.width;
+    const height =
+      dimension === "height" ? Math.max(1, Math.round(numberValue)) : ratio.height;
+
+    commitRatio(
+      {
+        height,
+        mode: "custom",
+        value: `${width}:${height}`,
+        width,
+      },
+      meta,
+    );
+  }
+
+  return (
+    <div className="min-w-0 space-y-2" data-slot="canvas-aspect-ratio-control">
+      <Select
+        layout="stacked"
+        name={name}
+        onValueChange={updatePreset}
+        options={canvasAspectRatioOptions}
+        value={selectedValue}
+      />
+      {ratio.mode === "custom" ? (
+        <TextInput
+          inputs={[
+            {
+              commitOnBlur: true,
+              defaultValue: String(ratio.width),
+              name: "Width",
+              onValueChange: (nextValue, meta) =>
+                updateCustomDimension("width", nextValue, meta),
+              value: String(ratio.width),
+            },
+            {
+              commitOnBlur: true,
+              defaultValue: String(ratio.height),
+              name: "Height",
+              onValueChange: (nextValue, meta) =>
+                updateCustomDimension("height", nextValue, meta),
+              value: String(ratio.height),
+            },
+          ]}
+          inputsPerRow={2}
+        />
+      ) : null}
+    </div>
+  );
+}
+
 function asActionSchemas(
   actions: readonly (ToolcraftActionSchema | string)[] | undefined,
 ): readonly ToolcraftActionSchema[] {
@@ -690,6 +894,7 @@ function isRuntimeSetupSection(section: ToolcraftControlSectionSchema): boolean
   return Object.values(section.controls).some(
     (control) =>
       control.type === "settingsTransfer" ||
+      control.target === "canvas.aspectRatio" ||
       control.target === "canvas.size.width" ||
       control.target === "canvas.size.height",
   );
@@ -1765,6 +1970,17 @@ export function ControlsPanel({
                 );
               }
 
+              case "aspectRatio":
+                return (
+                  <CanvasAspectRatioControl
+                    defaultValue={control.defaultValue}
+                    key={id}
+                    name={name}
+                    onValueChange={commit}
+                    value={value}
+                  />
+                );
+
               case "anchorGrid":
                 return withKeyframeLabelAction({
                   children: (

package/templates/runtime/react/settings-transfer.test.ts

@@ -130,6 +130,12 @@ describe("settings transfer", () => {
 
     expect(state.values["generation.prompt"]).toBe("Imported prompt");
     expect(state.values["unknown.target"]).toBeUndefined();
+    expect(state.values["canvas.aspectRatio"]).toEqual({
+      height: 900,
+      mode: "custom",
+      value: "1600:900",
+      width: 1600,
+    });
     expect(state.canvas.size).toEqual({ height: 900, unit: "px", width: 1600 });
     expect(state.timeline).toMatchObject({
       currentTimeSeconds: 3,

package/templates/runtime/react/settings-transfer.ts

@@ -123,9 +123,33 @@ export function parseToolcraftSettingsPayload(
 }
 
 function applyCanvasSize(
-  dispatch: ToolcraftDispatch,
+  { dispatch, state }: ImportContext,
   size: ToolcraftSettingsTransferPayload["canvas"]["size"],
+  options: { deriveAspectRatio: boolean },
 ): void {
+  const importableTargets = getKnownValueTargets(state.schema);
+
+  if (
+    options.deriveAspectRatio &&
+    importableTargets.has("canvas.aspectRatio") &&
+    isFinitePositiveNumber(size.width) &&
+    isFinitePositiveNumber(size.height)
+  ) {
+    dispatch({
+      history: "merge",
+      historyGroup: settingsTransferImportHistoryGroup,
+      label: "Import settings",
+      target: "canvas.aspectRatio",
+      type: "controls.setValue",
+      value: {
+        height: size.height,
+        mode: "custom",
+        value: `${size.width}:${size.height}`,
+        width: size.width,
+      },
+    });
+  }
+
   if (isFinitePositiveNumber(size.width)) {
     dispatch({
       history: "merge",
@@ -211,7 +235,9 @@ export function applyToolcraftSettingsPayload(
     });
   }
 
-  applyCanvasSize(context.dispatch, payload.canvas.size);
+  applyCanvasSize(context, payload.canvas.size, {
+    deriveAspectRatio: !Object.hasOwn(payload.values, "canvas.aspectRatio"),
+  });
   applyTimeline(context, payload.timeline);
 }
 

package/templates/runtime/schema/canvas-aspect-ratio-presets.ts

@@ -0,0 +1,50 @@
+import type { ToolcraftCanvasSize } from "./types";
+
+export type ToolcraftCanvasAspectRatioPresetValue =
+  | "1:1"
+  | "3:2"
+  | "16:9"
+  | "3:4"
+  | "9:16"
+  | "2:3"
+  | "4:3";
+
+export type ToolcraftCanvasAspectRatioPreset = {
+  height: number;
+  ratioHeight: number;
+  ratioWidth: number;
+  value: ToolcraftCanvasAspectRatioPresetValue;
+  width: number;
+};
+
+export const toolcraftCanvasAspectRatioPresets = [
+  { height: 1080, ratioHeight: 1, ratioWidth: 1, value: "1:1", width: 1080 },
+  { height: 1080, ratioHeight: 2, ratioWidth: 3, value: "3:2", width: 1620 },
+  { height: 1080, ratioHeight: 9, ratioWidth: 16, value: "16:9", width: 1920 },
+  { height: 1440, ratioHeight: 4, ratioWidth: 3, value: "3:4", width: 1080 },
+  { height: 1920, ratioHeight: 16, ratioWidth: 9, value: "9:16", width: 1080 },
+  { height: 1620, ratioHeight: 3, ratioWidth: 2, value: "2:3", width: 1080 },
+  { height: 1080, ratioHeight: 3, ratioWidth: 4, value: "4:3", width: 1440 },
+] as const satisfies readonly ToolcraftCanvasAspectRatioPreset[];
+
+export const toolcraftCanvasAspectRatioPresetValues = new Set<string>(
+  toolcraftCanvasAspectRatioPresets.map((preset) => preset.value),
+);
+
+export function getToolcraftCanvasAspectRatioPreset(
+  value: string,
+): ToolcraftCanvasAspectRatioPreset | null {
+  return (
+    toolcraftCanvasAspectRatioPresets.find((preset) => preset.value === value) ?? null
+  );
+}
+
+export function getToolcraftCanvasAspectRatioPresetBySize(
+  size: ToolcraftCanvasSize,
+): ToolcraftCanvasAspectRatioPreset | null {
+  return (
+    toolcraftCanvasAspectRatioPresets.find(
+      (preset) => preset.width === size.width && preset.height === size.height,
+    ) ?? null
+  );
+}

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

@@ -10,6 +10,7 @@ import {
   toolcraftRuntimeOwnedTargets,
   getToolcraftCanvasSizeTargetDimension,
   isToolcraftReservedTarget,
+  isToolcraftRuntimeOwnedTarget,
 } from "./runtime-targets";
 
 describe("defineToolcraft", () => {
@@ -111,6 +112,10 @@ describe("defineToolcraft", () => {
       mode: "auto",
     });
     expect(app.panels.controls?.sections[0]?.title).toBe("Setup");
+    expect(app.panels.controls?.sections[0]?.controls.canvasAspectRatio).toMatchObject({
+      target: "canvas.aspectRatio",
+      type: "aspectRatio",
+    });
     expect(app.panels.controls?.sections[0]?.controls.canvasWidth).toBeTruthy();
   });
 
@@ -231,7 +236,7 @@ describe("defineToolcraft", () => {
     });
   });
 
-  it("ignores runtime canvas size controls in settings transfer eligibility", () => {
+  it("ignores runtime canvas setup controls in settings transfer eligibility", () => {
     const app = defineToolcraft({
       canvas: { enabled: true, size: { height: 720, unit: "px", width: 1280 } },
       panels: {
@@ -248,6 +253,7 @@ describe("defineToolcraft", () => {
       settingsTransfer: false,
     });
 
+    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({
@@ -326,9 +332,20 @@ describe("defineToolcraft", () => {
     expect(runtimeSettingsSection?.title).toBe("Setup");
     expect(Object.keys(runtimeSettingsSection?.controls ?? {})).toEqual([
       "settingsTransfer",
+      "canvasAspectRatio",
       "canvasWidth",
       "canvasHeight",
     ]);
+    expect(runtimeSettingsSection?.controls.canvasAspectRatio).toMatchObject({
+      defaultValue: {
+        height: 9,
+        mode: "preset",
+        value: "16:9",
+        width: 16,
+      },
+      target: "canvas.aspectRatio",
+      type: "aspectRatio",
+    });
     expect(runtimeSettingsSection?.controls.canvasWidth).toBeTruthy();
     expect(runtimeSettingsSection?.controls.canvasHeight).toBeTruthy();
     expect(runtimeSettingsSection?.controls.settingsTransfer?.type).toBe(
@@ -594,10 +611,12 @@ describe("defineToolcraft", () => {
 
   it("publishes reserved targets for AI assembly boundaries", () => {
     expect(toolcraftRuntimeOwnedTargets).toEqual([
+      "canvas.aspectRatio",
       "canvas.size.width",
       "canvas.size.height",
     ]);
     expect(toolcraftReservedTargets).toEqual([
+      "canvas.aspectRatio",
       "canvas.size.width",
       "canvas.size.height",
       "selectedLayer.opacity",
@@ -606,6 +625,7 @@ describe("defineToolcraft", () => {
     expect(getToolcraftCanvasSizeTargetDimension("canvas.size.width")).toBe("width");
     expect(getToolcraftCanvasSizeTargetDimension("canvas.size.height")).toBe("height");
     expect(getToolcraftCanvasSizeTargetDimension("generation.prompt")).toBeNull();
+    expect(isToolcraftRuntimeOwnedTarget("canvas.aspectRatio")).toBe(true);
     expect(isToolcraftReservedTarget("selectedLayer.opacity")).toBe(true);
     expect(isToolcraftReservedTarget("generation.prompt")).toBe(false);
   });
@@ -674,6 +694,18 @@ describe("defineToolcraft", () => {
     expect(app.canvas.sizeSource).toBe("app");
     expect(app.canvas.sizing).toEqual({ mode: "editable-output" });
     expect(app.panels.controls?.sections[0]?.title).toBe("Setup");
+    expect(app.panels.controls?.sections[0]?.controls.canvasAspectRatio).toMatchObject({
+      defaultValue: {
+        height: 256,
+        mode: "custom",
+        value: "455:256",
+        width: 455,
+      },
+      label: "Aspect ratio",
+      performanceRole: "workload",
+      target: "canvas.aspectRatio",
+      type: "aspectRatio",
+    });
     expect(app.panels.controls?.sections[0]?.controls.canvasWidth).toMatchObject({
       defaultValue: 1365,
       performanceRole: "workload",
@@ -724,6 +756,18 @@ describe("defineToolcraft", () => {
     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",

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

@@ -1,4 +1,8 @@
 import { TOOLCRAFT_COMPONENT_CONTRACTS } from "../contracts/component-contracts";
+import {
+  getToolcraftCanvasAspectRatioPreset,
+  getToolcraftCanvasAspectRatioPresetBySize,
+} from "./canvas-aspect-ratio-presets";
 import type {
   ToolcraftAssemblyCapability,
   ToolcraftAssemblyCommand,
@@ -41,6 +45,7 @@ const canvasSizeControlTargets = {
   height: "canvas.size.height",
   width: "canvas.size.width",
 } as const;
+const canvasAspectRatioTarget = "canvas.aspectRatio";
 const maxAutoInlineControlLabelLength = 18;
 const settingsTransferTarget = "runtime.settingsTransfer";
 const runtimeSetupSectionTitle = "Setup";
@@ -553,6 +558,7 @@ function isRuntimeOnlyActionControl(control: ToolcraftControlSchema): boolean {
 function isSettingsTransferEligibilityControl(control: ToolcraftControlSchema): boolean {
   return (
     !isRuntimeOnlyActionControl(control) &&
+    control.target !== canvasAspectRatioTarget &&
     control.target !== canvasSizeControlTargets.width &&
     control.target !== canvasSizeControlTargets.height
   );
@@ -699,25 +705,67 @@ function getCanvasSizeLayoutGroups(
     : undefined;
 }
 
+function getGreatestCommonDivisor(left: number, right: number): number {
+  let a = Math.abs(Math.round(left));
+  let b = Math.abs(Math.round(right));
+
+  while (b !== 0) {
+    const next = b;
+    b = a % b;
+    a = next;
+  }
+
+  return a || 1;
+}
+
+function getCanvasAspectRatioDefaultValue(size: ToolcraftCanvasSize): {
+  height: number;
+  mode: "custom" | "preset";
+  value: string;
+  width: number;
+} {
+  const divisor = getGreatestCommonDivisor(size.width, size.height);
+  const width = Math.max(1, Math.round(size.width / divisor));
+  const height = Math.max(1, Math.round(size.height / divisor));
+  const value = `${width}:${height}`;
+  const preset =
+    getToolcraftCanvasAspectRatioPreset(value) ??
+    getToolcraftCanvasAspectRatioPresetBySize(size);
+
+  return {
+    height: preset?.ratioHeight ?? height,
+    mode: preset ? "preset" : "custom",
+    value: preset?.value ?? value,
+    width: preset?.ratioWidth ?? width,
+  };
+}
+
 function createCanvasSizeSection({
+  aspectRatioControl,
   sizeControlIds,
   sizeControls,
 }: {
+  aspectRatioControl: ToolcraftControlSchema;
   sizeControlIds: readonly string[];
   sizeControls: ToolcraftControlSectionSchema["controls"];
 }): ToolcraftControlSectionSchema {
   return {
-    controls: sizeControls,
+    controls: {
+      canvasAspectRatio: aspectRatioControl,
+      ...sizeControls,
+    },
     layoutGroups: getCanvasSizeLayoutGroups(sizeControlIds),
     title: runtimeSetupSectionTitle,
   };
 }
 
 function mergeCanvasSizeControlsIntoSettingsTransferSection({
+  aspectRatioControl,
   settingsTransferSection,
   sizeControlIds,
   sizeControls,
 }: {
+  aspectRatioControl: ToolcraftControlSchema;
   settingsTransferSection: ToolcraftControlSectionSchema;
   sizeControlIds: readonly string[];
   sizeControls: ToolcraftControlSectionSchema["controls"];
@@ -728,6 +776,7 @@ function mergeCanvasSizeControlsIntoSettingsTransferSection({
     ...settingsTransferSection,
     controls: {
       ...settingsTransferSection.controls,
+      canvasAspectRatio: aspectRatioControl,
       ...sizeControls,
     },
     layoutGroups:
@@ -1275,6 +1324,14 @@ function normalizePanels({
 
   const sizeControls: ToolcraftControlSectionSchema["controls"] = {};
   const sizeControlIds: string[] = [];
+  const aspectRatioControl: ToolcraftControlSchema = {
+    defaultValue: getCanvasAspectRatioDefaultValue(canvas.size),
+    label: "Aspect ratio",
+    performanceReason: "Aspect ratio changes output dimensions and renderer workload.",
+    performanceRole: "workload",
+    target: canvasAspectRatioTarget,
+    type: "aspectRatio",
+  };
 
   if (!hasControlTarget(panels, canvasSizeControlTargets.width)) {
     sizeControls.canvasWidth = {
@@ -1315,11 +1372,12 @@ function normalizePanels({
 
   const runtimeSettingsSection = settingsTransferSection
     ? mergeCanvasSizeControlsIntoSettingsTransferSection({
+        aspectRatioControl,
         settingsTransferSection,
         sizeControlIds,
         sizeControls,
       })
-    : createCanvasSizeSection({ sizeControlIds, sizeControls });
+    : createCanvasSizeSection({ aspectRatioControl, sizeControlIds, sizeControls });
 
   return {
     ...normalizedPanels,

package/templates/runtime/schema/keyframe-capability.test.ts

@@ -51,6 +51,13 @@ describe("getToolcraftControlKeyframeCapability", () => {
   });
 
   it("blocks runtime-owned canvas size targets even when the visual type could otherwise animate", () => {
+    expect(
+      getToolcraftControlKeyframeCapability(control("slider", "canvas.aspectRatio")),
+    ).toEqual({
+      capable: false,
+      reason: "runtime-owned-target",
+    });
+
     expect(
       getToolcraftControlKeyframeCapability(control("text", "canvas.size.width")),
     ).toEqual({

package/templates/runtime/schema/keyframe-capability.ts

@@ -1,4 +1,4 @@
-import { getToolcraftCanvasSizeTargetDimension } from "./runtime-targets";
+import { isToolcraftRuntimeOwnedTarget } from "./runtime-targets";
 import type { ToolcraftControlSchema } from "./types";
 
 export type ToolcraftControlKeyframeCapabilityReason =
@@ -30,7 +30,7 @@ const keyframeCapableControlTypes = new Set([
 export function getToolcraftControlKeyframeCapability(
   control: ToolcraftControlSchema,
 ): ToolcraftControlKeyframeCapability {
-  if (getToolcraftCanvasSizeTargetDimension(control.target)) {
+  if (isToolcraftRuntimeOwnedTarget(control.target)) {
     return {
       capable: false,
       reason: "runtime-owned-target",

package/templates/runtime/schema/runtime-targets.ts

@@ -1,4 +1,5 @@
 export const toolcraftRuntimeOwnedTargets = [
+  "canvas.aspectRatio",
   "canvas.size.width",
   "canvas.size.height",
 ] as const;
@@ -27,6 +28,10 @@ export function getToolcraftCanvasSizeTargetDimension(
   }
 }
 
+export function isToolcraftCanvasAspectRatioTarget(target: string): boolean {
+  return target === "canvas.aspectRatio";
+}
+
 export function isToolcraftReservedTarget(
   target: string,
 ): target is ToolcraftReservedTarget {

package/templates/runtime/state/create-template-state.test.ts

@@ -54,6 +54,12 @@ describe("createToolcraftState", () => {
     const state = createToolcraftState(app);
 
     expect(state.values).toMatchObject({
+      "canvas.aspectRatio": {
+        height: 1,
+        mode: "preset",
+        value: "1:1",
+        width: 1,
+      },
       "canvas.size.height": 1024,
       "canvas.size.width": 1024,
     });