@pixel-point/toolcraft 0.0.4 → 0.0.7

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

@@ -114,6 +114,75 @@ describe("TimelinePanel", () => {
     expect(screen.getByTestId("timeline-looping").textContent).toBe("false");
   });
 
+  it("keeps timeline playhead handles easy to grab without changing visual size", () => {
+    const { container } = renderTimelinePanel();
+
+    const compactHandle = container.querySelector<HTMLElement>(
+      '[data-slot="timeline-playback-handle"]',
+    );
+
+    expect(compactHandle?.className).toContain("size-2");
+    expect(compactHandle?.className).toContain("before:inset-[-4px]");
+
+    fireEvent.click(screen.getByRole("button", { name: "Expand timeline panel" }));
+
+    const expandedHitArea = container.querySelector<HTMLElement>(
+      '[data-slot="timeline-expanded-playhead-hit-area"]',
+    );
+    const expandedHandle = container.querySelector<HTMLElement>(
+      '[data-slot="timeline-expanded-playhead-handle"]',
+    );
+
+    expect(expandedHandle?.className).toContain("size-[9px]");
+    expect(expandedHitArea?.getAttribute("style")).toContain("width: 15px;");
+  });
+
+  it("edits timeline duration from the highlighted duration value in collapsed and expanded states", () => {
+    const { container } = renderTimelinePanel();
+
+    const durationDisplay = container.querySelector<HTMLElement>(
+      '[data-slot="timeline-duration-display"]',
+    );
+
+    expect(durationDisplay?.className).toContain("!cursor-text");
+    expect(durationDisplay?.className).toContain("group-hover/timeline-panel-header:bg");
+    expect(durationDisplay?.className).toContain("var(--foreground)_8%");
+    expect(durationDisplay?.className).toContain("px-1");
+    expect(container.querySelector('[data-slot="timeline-duration-edit-trigger"]')).toBeNull();
+    expect(screen.queryByRole("textbox", { name: "timeline duration" })).toBeNull();
+
+    fireEvent.click(screen.getByRole("button", { name: "Edit timeline duration" }));
+
+    const editor = screen.getByRole("textbox", { name: "timeline duration" });
+
+    expect(editor.className).toContain("var(--foreground)_8%");
+    expect(editor.className).toContain("px-1");
+    expect(editor.className).toContain("!cursor-text");
+    expect(screen.queryByRole("button", { name: "Edit timeline duration" })).toBeNull();
+
+    editor.textContent = "12s";
+    fireEvent.keyDown(editor, { key: "Enter" });
+
+    expect(screen.getByText("12s")).toBeTruthy();
+
+    fireEvent.click(screen.getByRole("button", { name: "Expand timeline panel" }));
+
+    const expandedDurationDisplay = container.querySelector<HTMLElement>(
+      '[data-slot="timeline-duration-display"]',
+    );
+
+    expect(expandedDurationDisplay?.className).toContain("!cursor-text");
+    expect(expandedDurationDisplay?.className).toContain("group-hover/timeline-panel-header:bg");
+    expect(expandedDurationDisplay?.className).toContain("var(--foreground)_8%");
+
+    fireEvent.click(screen.getByRole("button", { name: "Edit timeline duration" }));
+
+    const expandedEditor = screen.getByRole("textbox", { name: "timeline duration" });
+
+    expect(expandedEditor.className).toContain("var(--foreground)_8%");
+    expect(expandedEditor.className).toContain("!cursor-text");
+  });
+
   it("replays from the beginning when play is pressed at the non-looping end", () => {
     renderTimelinePanel(
       {},

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

@@ -11,7 +11,6 @@ import {
 } from 'react';
 import {
   Button,
-  EditableSliderValueLabel,
   PanelSurface,
   Popover,
   PopoverContent,
@@ -74,7 +73,7 @@ const timelineRulerRightInsetPx = timelineTrackColumnBorderWidthPx / 2;
 const timelineRowActionColumnWidthPx = 36;
 const timelineExpandedTrackEndOffsetPx =
   timelineTrackEndInsetPx + timelineRowActionColumnWidthPx + timelineTrackColumnBorderWidthPx;
-const timelinePlayheadSafeZonePx = 3;
+const timelinePlayheadSafeZonePx = 7;
 const timelinePlayheadHitAreaWidthPx =
   timelineTrackColumnBorderWidthPx + timelinePlayheadSafeZonePx * 2;
 const maxTimelineDurationSeconds = 60;
@@ -1667,7 +1666,7 @@ function TimelinePlaybackStrip({
       <span
         aria-hidden="true"
         className={cn(
-          'absolute bottom-px size-2 -translate-x-1/2 translate-y-1/2 rounded-full bg-[color:var(--link)] opacity-0 shadow-[0_2px_2px_color-mix(in_oklab,var(--background)_70%,transparent)] transition-[opacity,transform] duration-[120ms] ease-out group-hover/timeline-panel-surface:opacity-100 group-hover/timeline-strip:opacity-100 group-focus-visible/timeline-strip:opacity-100',
+          'absolute bottom-px size-2 -translate-x-1/2 translate-y-1/2 rounded-full bg-[color:var(--link)] opacity-0 shadow-[0_2px_2px_color-mix(in_oklab,var(--background)_70%,transparent)] transition-[opacity,transform] duration-[120ms] ease-out before:absolute before:inset-[-4px] before:content-[""] group-hover/timeline-panel-surface:opacity-100 group-hover/timeline-strip:opacity-100 group-focus-visible/timeline-strip:opacity-100',
           isScrubbing && 'scale-110 opacity-100',
         )}
         data-slot="timeline-playback-handle"
@@ -2498,6 +2497,99 @@ function useTimelineScrubber({
   };
 }
 
+function selectTimelineEditableText(node: HTMLElement): void {
+  const selection = window.getSelection();
+
+  if (!selection) {
+    return;
+  }
+
+  const range = document.createRange();
+  range.selectNodeContents(node);
+  selection.removeAllRanges();
+  selection.addRange(range);
+}
+
+function TimelineDurationValue({
+  durationSeconds,
+  onCommit,
+}: {
+  durationSeconds: number;
+  onCommit: (value: string) => void;
+}): React.JSX.Element {
+  const [isEditing, setIsEditing] = useState(false);
+  const editorRef = useRef<HTMLSpanElement>(null);
+  const valueLabel = formatDurationValueLabel(durationSeconds);
+
+  useEffect(() => {
+    if (!isEditing) {
+      return;
+    }
+
+    const editor = editorRef.current;
+
+    if (!editor) {
+      return;
+    }
+
+    editor.textContent = valueLabel;
+    editor.focus();
+    selectTimelineEditableText(editor);
+  }, [isEditing, valueLabel]);
+
+  function commitDraft(): void {
+    onCommit(editorRef.current?.textContent ?? valueLabel);
+    setIsEditing(false);
+  }
+
+  if (isEditing) {
+    return (
+      <span
+        aria-label="timeline duration"
+        className="block h-5 min-w-[3ch] !cursor-text overflow-hidden whitespace-nowrap rounded bg-[color:color-mix(in_oklab,var(--foreground)_8%,transparent)] px-1 font-sans text-xs leading-5 text-[color:var(--foreground)] outline-none tabular-nums"
+        contentEditable
+        data-slot="timeline-duration-editor"
+        key="duration-editor"
+        onBlur={commitDraft}
+        onFocus={(event) => selectTimelineEditableText(event.currentTarget)}
+        onKeyDown={(event) => {
+          if (event.key === 'Enter') {
+            event.preventDefault();
+            commitDraft();
+          }
+
+          if (event.key === 'Escape') {
+            event.preventDefault();
+            setIsEditing(false);
+          }
+        }}
+        onPointerDown={(event) => event.stopPropagation()}
+        ref={editorRef}
+        role="textbox"
+        suppressContentEditableWarning
+        tabIndex={0}
+      />
+    );
+  }
+
+  return (
+    <button
+      aria-label="Edit timeline duration"
+      className="block h-5 min-w-[3ch] shrink-0 !cursor-text overflow-hidden rounded px-1 font-sans text-xs leading-5 text-[color:var(--muted-foreground)] tabular-nums transition-colors duration-150 ease-out group-hover/timeline-panel-header:bg-[color:color-mix(in_oklab,var(--foreground)_8%,transparent)] focus-visible:bg-[color:color-mix(in_oklab,var(--foreground)_8%,transparent)] focus-visible:outline-none"
+      data-slot="timeline-duration-display"
+      key="duration-display"
+      onClick={(event) => {
+        event.stopPropagation();
+        setIsEditing(true);
+      }}
+      onPointerDown={(event) => event.stopPropagation()}
+      type="button"
+    >
+      {valueLabel}
+    </button>
+  );
+}
+
 function TimelinePanelHeader({
   canExpand,
   currentTimeSeconds,
@@ -2538,7 +2630,7 @@ function TimelinePanelHeader({
   return (
     <div
       className={cn(
-        'relative flex min-w-0 shrink-0 items-center gap-1',
+        'group/timeline-panel-header relative flex min-w-0 shrink-0 items-center gap-1',
         isExpanded
           ? 'h-9 border-b border-[color:color-mix(in_oklab,var(--border)_8%,transparent)] p-1'
           : 'h-full',
@@ -2566,13 +2658,9 @@ function TimelinePanelHeader({
       <TimelinePanelDivider />
       <div className="ml-2 inline-flex shrink-0 items-center gap-1 text-xs leading-5 text-[color:color-mix(in_oklab,var(--foreground)_90%,transparent)]">
         <span>{isExpanded ? 'Duration:' : 'Dur:'}</span>
-        <EditableSliderValueLabel
-          ariaLabel="timeline duration"
-          layout="content"
-          maxValueLabel={`${maxTimelineDurationSeconds}s`}
+        <TimelineDurationValue
+          durationSeconds={durationSeconds}
           onCommit={onDurationCommit}
-          textAlign="left"
-          valueLabel={formatDurationValueLabel(durationSeconds)}
         />
       </div>
       <span

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

@@ -92,25 +92,25 @@ describe("ToolbarPanel", () => {
   it("dispatches zoom commands", () => {
     renderToolbar();
 
-    expect(screen.getByText("70%")).toBeTruthy();
+    expect(screen.getByText("100%")).toBeTruthy();
 
     fireEvent.click(screen.getByRole("button", { name: "Zoom out" }));
-    expect(screen.getByText("60%")).toBeTruthy();
+    expect(screen.getByText("90%")).toBeTruthy();
 
     fireEvent.click(screen.getByRole("button", { name: "Zoom in" }));
     fireEvent.click(screen.getByRole("button", { name: "Zoom in" }));
-    expect(screen.getByText("80%")).toBeTruthy();
+    expect(screen.getByText("110%")).toBeTruthy();
   });
 
   it("resets zoom from the zoom label double click", () => {
     renderToolbar();
 
     fireEvent.click(screen.getByRole("button", { name: "Zoom in" }));
-    expect(screen.getByText("80%")).toBeTruthy();
+    expect(screen.getByText("110%")).toBeTruthy();
 
-    fireEvent.doubleClick(screen.getByText("80%"));
+    fireEvent.doubleClick(screen.getByText("110%"));
 
-    expect(screen.getByText("70%")).toBeTruthy();
+    expect(screen.getByText("100%")).toBeTruthy();
   });
 
   it("centers the canvas through the radar command", () => {

package/templates/runtime/react/toolcraft-app.integration.test.tsx

@@ -268,7 +268,7 @@ describe("assembled Toolcraft template runtime", () => {
     expect(screen.getByText("Layers")).toBeTruthy();
     expect(screen.getByText("Dur:")).toBeTruthy();
     expect(screen.queryByText("Duration:")).toBeNull();
-    expect(toolbar?.textContent).toContain("70%");
+    expect(toolbar?.textContent).toContain("100%");
     expect(screen.getByRole("button", { name: "Undo" })).toBeDisabled();
     expect(screen.getByRole("button", { name: "Redo" })).toBeDisabled();
     expect(themeScope?.dataset.toolcraftTheme).toBe("dark");
@@ -305,7 +305,7 @@ describe("assembled Toolcraft template runtime", () => {
     ).toBe("320px");
 
     fireEvent.click(screen.getByRole("button", { name: "Zoom in" }));
-    expect(screen.getByText("80%")).toBeTruthy();
+    expect(screen.getByText("110%")).toBeTruthy();
 
     const wheelEvent = new WheelEvent("wheel", {
       bubbles: true,

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

@@ -47,7 +47,7 @@ describe("defineToolcraft", () => {
     });
 
     expect(app.canvas.draggable).toBe(true);
-    expect(app.canvas.size).toEqual({ height: 1024, unit: "px", width: 1024 });
+    expect(app.canvas.size).toEqual({ height: 1080, unit: "px", width: 1920 });
     expect(app.canvas.sizeSource).toBe("runtime-default");
     expect(app.canvas.sizing).toEqual({ mode: "intrinsic-media" });
     expect(app.toolbar).toEqual({ history: true, radar: true, theme: true, zoom: true });
@@ -535,6 +535,7 @@ describe("defineToolcraft", () => {
     expect(app.assembly.commands).toEqual(
       expect.arrayContaining([
         "controls.reset",
+        "controls.resetTargets",
         "history.undo",
         "media.delete",
         "media.import",
@@ -612,11 +613,13 @@ describe("defineToolcraft", () => {
   it("publishes reserved targets for AI assembly boundaries", () => {
     expect(toolcraftRuntimeOwnedTargets).toEqual([
       "canvas.aspectRatio",
+      "canvas.renderScale",
       "canvas.size.width",
       "canvas.size.height",
     ]);
     expect(toolcraftReservedTargets).toEqual([
       "canvas.aspectRatio",
+      "canvas.renderScale",
       "canvas.size.width",
       "canvas.size.height",
       "selectedLayer.opacity",
@@ -792,6 +795,80 @@ describe("defineToolcraft", () => {
     expect(generationSection?.title).toBe("Generation");
   });
 
+  it("appends raster render scale to the technical setup controls when 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",
+        },
+      },
+    });
+
+    const setupSection = app.panels.controls?.sections[0];
+
+    expect(app.canvas.renderScale).toEqual({
+      defaultValue: 2,
+      enabled: true,
+      max: 2,
+      min: 1,
+      step: 0.25,
+    });
+    expect(app.assembly.capabilities).toContain("canvas.renderScale");
+    expect(Object.keys(setupSection?.controls ?? {})).toEqual([
+      "canvasAspectRatio",
+      "canvasWidth",
+      "canvasHeight",
+      "canvasRenderScale",
+    ]);
+    expect(setupSection?.controls.canvasRenderScale).toMatchObject({
+      defaultValue: 2,
+      label: "Resolution scale",
+      markerCount: 5,
+      max: 2,
+      min: 1,
+      step: 0.25,
+      target: "canvas.renderScale",
+      type: "slider",
+      unit: "x",
+      variant: "discrete",
+    });
+  });
+
+  it("can prepend render scale without editable output sizing", () => {
+    const app = defineToolcraft({
+      canvas: {
+        enabled: true,
+        renderScale: { defaultValue: 1.5 },
+        size: { height: 900, unit: "px", width: 1440 },
+        sizing: { mode: "fixed-output" },
+      },
+      panels: {
+        controls: {
+          sections: [],
+          title: "Controls",
+        },
+      },
+    });
+
+    expect(app.panels.controls?.sections[0]).toMatchObject({
+      controls: {
+        canvasRenderScale: {
+          defaultValue: 1.5,
+          target: "canvas.renderScale",
+          type: "slider",
+        },
+      },
+      title: "Setup",
+    });
+  });
+
   it("does not prepend canvas size controls for intrinsic media or explicitly fixed output", () => {
     const intrinsicApp = defineToolcraft({
       canvas: {

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

@@ -26,9 +26,9 @@ import type {
 } from "./types";
 
 const defaultCanvasSize = {
-  height: 1024,
+  height: 1080,
   unit: "px",
-  width: 1024,
+  width: 1920,
 } satisfies ToolcraftCanvasSize;
 
 type ResolvedCanvas = ResolvedToolcraftAppSchema["canvas"];
@@ -46,12 +46,21 @@ const canvasSizeControlTargets = {
   width: "canvas.size.width",
 } as const;
 const canvasAspectRatioTarget = "canvas.aspectRatio";
+const canvasRenderScaleTarget = "canvas.renderScale";
+const defaultCanvasRenderScale = {
+  defaultValue: 2,
+  enabled: false,
+  max: 2,
+  min: 1,
+  step: 0.25,
+} satisfies ResolvedToolcraftAppSchema["canvas"]["renderScale"];
 const maxAutoInlineControlLabelLength = 18;
 const settingsTransferTarget = "runtime.settingsTransfer";
 const runtimeSetupSectionTitle = "Setup";
 const settingsTransferHeavyControlTypes = new Set([
   "channelMixer",
   "code",
+  "collectionActions",
   "colorOpacity",
   "curves",
   "fileDrop",
@@ -190,6 +199,54 @@ function resolveCanvasSizing(
   return { mode: "intrinsic-media" };
 }
 
+function clampCanvasRenderScale(value: number | undefined, fallback: number): number {
+  if (typeof value !== "number" || !Number.isFinite(value)) {
+    return fallback;
+  }
+
+  return Math.max(1, Math.min(2, value));
+}
+
+function resolveCanvasRenderScale(
+  renderScale: ToolcraftAppSchema["canvas"]["renderScale"],
+): ResolvedToolcraftAppSchema["canvas"]["renderScale"] {
+  if (renderScale === true) {
+    return {
+      ...defaultCanvasRenderScale,
+      enabled: true,
+    };
+  }
+
+  if (!renderScale) {
+    return defaultCanvasRenderScale;
+  }
+
+  const min = clampCanvasRenderScale(renderScale.min, defaultCanvasRenderScale.min);
+  const max = Math.max(
+    min,
+    clampCanvasRenderScale(renderScale.max, defaultCanvasRenderScale.max),
+  );
+  const step =
+    typeof renderScale.step === "number" && Number.isFinite(renderScale.step)
+      ? Math.max(0.01, Math.min(1, renderScale.step))
+      : defaultCanvasRenderScale.step;
+  const defaultValue = Math.max(
+    min,
+    Math.min(
+      max,
+      clampCanvasRenderScale(renderScale.defaultValue, defaultCanvasRenderScale.defaultValue),
+    ),
+  );
+
+  return {
+    defaultValue,
+    enabled: renderScale.enabled ?? true,
+    max,
+    min,
+    step,
+  };
+}
+
 function resolveExport(
   exportSchema: ToolcraftAppSchema["export"],
 ): ResolvedExport {
@@ -264,6 +321,10 @@ function createToolcraftAssembly({
       commands.push("canvas.setSize");
     }
 
+    if (canvas.renderScale.enabled) {
+      capabilities.push("canvas.renderScale");
+    }
+
     if (canvas.draggable) {
       capabilities.push("canvas.draggable");
       commands.push("canvas.panBy", "canvas.setOffset", "canvas.setViewport");
@@ -278,7 +339,12 @@ function createToolcraftAssembly({
   const controlsPanel = panels.controls
     ? createPanelAssemblyContract({
         capabilities: ["controls.panel", "controls.defaults"],
-        commands: ["controls.apply", "controls.reset", "controls.setValue"],
+        commands: [
+          "controls.apply",
+          "controls.reset",
+          "controls.resetTargets",
+          "controls.setValue",
+        ],
         contract: TOOLCRAFT_COMPONENT_CONTRACTS.controlsPanel,
         enabled: true,
       })
@@ -742,10 +808,12 @@ function getCanvasAspectRatioDefaultValue(size: ToolcraftCanvasSize): {
 
 function createCanvasSizeSection({
   aspectRatioControl,
+  renderScaleControl,
   sizeControlIds,
   sizeControls,
 }: {
   aspectRatioControl: ToolcraftControlSchema;
+  renderScaleControl?: ToolcraftControlSchema;
   sizeControlIds: readonly string[];
   sizeControls: ToolcraftControlSectionSchema["controls"];
 }): ToolcraftControlSectionSchema {
@@ -753,19 +821,33 @@ function createCanvasSizeSection({
     controls: {
       canvasAspectRatio: aspectRatioControl,
       ...sizeControls,
+      ...(renderScaleControl ? { canvasRenderScale: renderScaleControl } : {}),
     },
     layoutGroups: getCanvasSizeLayoutGroups(sizeControlIds),
     title: runtimeSetupSectionTitle,
   };
 }
 
+function createCanvasRenderScaleSection(
+  renderScaleControl: ToolcraftControlSchema,
+): ToolcraftControlSectionSchema {
+  return {
+    controls: {
+      canvasRenderScale: renderScaleControl,
+    },
+    title: runtimeSetupSectionTitle,
+  };
+}
+
 function mergeCanvasSizeControlsIntoSettingsTransferSection({
   aspectRatioControl,
+  renderScaleControl,
   settingsTransferSection,
   sizeControlIds,
   sizeControls,
 }: {
   aspectRatioControl: ToolcraftControlSchema;
+  renderScaleControl?: ToolcraftControlSchema;
   settingsTransferSection: ToolcraftControlSectionSchema;
   sizeControlIds: readonly string[];
   sizeControls: ToolcraftControlSectionSchema["controls"];
@@ -778,6 +860,7 @@ function mergeCanvasSizeControlsIntoSettingsTransferSection({
       ...settingsTransferSection.controls,
       canvasAspectRatio: aspectRatioControl,
       ...sizeControls,
+      ...(renderScaleControl ? { canvasRenderScale: renderScaleControl } : {}),
     },
     layoutGroups:
       canvasSizeLayoutGroups.length > 0 || settingsTransferSection.layoutGroups?.length
@@ -789,6 +872,22 @@ function mergeCanvasSizeControlsIntoSettingsTransferSection({
   };
 }
 
+function mergeCanvasRenderScaleIntoSettingsTransferSection({
+  renderScaleControl,
+  settingsTransferSection,
+}: {
+  renderScaleControl: ToolcraftControlSchema;
+  settingsTransferSection: ToolcraftControlSectionSchema;
+}): ToolcraftControlSectionSchema {
+  return {
+    ...settingsTransferSection,
+    controls: {
+      ...settingsTransferSection.controls,
+      canvasRenderScale: renderScaleControl,
+    },
+  };
+}
+
 function isPrimaryPanelAction(action: ToolcraftControlActionSchema): boolean {
   return typeof action !== "string" && action.variant !== "outline";
 }
@@ -1308,14 +1407,46 @@ function normalizePanels({
 
   const controls = { ...panels.controls };
   const settingsTransferSection = createSettingsTransferSection(settingsTransfer);
+  const renderScaleControl: ToolcraftControlSchema | undefined =
+    canvas.renderScale.enabled && !hasControlTarget(panels, canvasRenderScaleTarget)
+      ? {
+          defaultValue: canvas.renderScale.defaultValue,
+          description:
+            "Increases raster canvas backing resolution without changing the visible output size.",
+          label: "Resolution scale",
+          markerCount:
+            Math.floor(
+              (canvas.renderScale.max - canvas.renderScale.min) / canvas.renderScale.step,
+            ) + 1,
+          max: canvas.renderScale.max,
+          min: canvas.renderScale.min,
+          performanceReason:
+            "Resolution scale changes raster, Canvas, WebGL, or WebGPU backing pixels.",
+          performanceRole: "workload",
+          step: canvas.renderScale.step,
+          target: canvasRenderScaleTarget,
+          type: "slider",
+          unit: "x",
+          variant: "discrete",
+        }
+      : undefined;
 
   if (!canvas.enabled || canvas.sizing.mode !== "editable-output") {
+    const runtimeSetupSection =
+      settingsTransferSection && renderScaleControl
+        ? mergeCanvasRenderScaleIntoSettingsTransferSection({
+            renderScaleControl,
+            settingsTransferSection,
+          })
+        : (settingsTransferSection ??
+          (renderScaleControl ? createCanvasRenderScaleSection(renderScaleControl) : null));
+
     return {
       ...normalizedPanels,
       controls: normalizeControlsPanelLayout({
         ...controls,
         sections: [
-          ...(settingsTransferSection ? [settingsTransferSection] : []),
+          ...(runtimeSetupSection ? [runtimeSetupSection] : []),
           ...controls.sections,
         ],
       }),
@@ -1357,7 +1488,7 @@ function normalizePanels({
     sizeControlIds.push("canvasHeight");
   }
 
-  if (Object.keys(sizeControls).length === 0) {
+  if (Object.keys(sizeControls).length === 0 && !renderScaleControl) {
     return {
       ...normalizedPanels,
       controls: normalizeControlsPanelLayout({
@@ -1373,11 +1504,17 @@ function normalizePanels({
   const runtimeSettingsSection = settingsTransferSection
     ? mergeCanvasSizeControlsIntoSettingsTransferSection({
         aspectRatioControl,
+        renderScaleControl,
         settingsTransferSection,
         sizeControlIds,
         sizeControls,
       })
-    : createCanvasSizeSection({ aspectRatioControl, sizeControlIds, sizeControls });
+    : createCanvasSizeSection({
+        aspectRatioControl,
+        renderScaleControl,
+        sizeControlIds,
+        sizeControls,
+      });
 
   return {
     ...normalizedPanels,
@@ -1453,6 +1590,7 @@ function assertPanelPersistenceContract({
 export function defineToolcraft(schema: ToolcraftAppSchema): ResolvedToolcraftAppSchema {
   const canvasEnabled = schema.canvas.enabled;
   const canvasSize = schema.canvas.size;
+  const canvasRenderScale = resolveCanvasRenderScale(schema.canvas.renderScale);
   const canvasSizing = resolveCanvasSizing(schema.canvas);
   const persistence = resolvePersistence(schema.persistence);
   const settingsTransfer = resolveSettingsTransfer({
@@ -1464,6 +1602,7 @@ export function defineToolcraft(schema: ToolcraftAppSchema): ResolvedToolcraftAp
   const canvas = {
     ...schema.canvas,
     draggable: canvasEnabled ? (schema.canvas.draggable ?? true) : false,
+    renderScale: canvasRenderScale,
     size: canvasSize ?? defaultCanvasSize,
     sizeSource: canvasSize ? ("app" as const) : ("runtime-default" as const),
     sizing: canvasSizing,

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

@@ -1,5 +1,6 @@
 export const toolcraftRuntimeOwnedTargets = [
   "canvas.aspectRatio",
+  "canvas.renderScale",
   "canvas.size.width",
   "canvas.size.height",
 ] as const;