@pixel-point/toolcraft 0.0.15 → 0.0.17

package/templates/runtime/schema/runtime-setup-section.ts

@@ -2,9 +2,19 @@ import {
   getToolcraftCanvasAspectRatioPreset,
   getToolcraftCanvasAspectRatioPresetBySize,
 } from "./canvas-aspect-ratio-presets";
+import { normalizeToolcraftAdditionalValueTargets } from "./additional-value-targets";
+import { registerToolcraftInternalControlSection } from "./controls-panel-section-id";
 import { toolcraftRuntimeSetupSectionTitle } from "./runtime-section-titles";
-import { toolcraftTimelinePanelExtendedTarget } from "./runtime-targets";
+import {
+  toolcraftCanvasInfinityTarget,
+  toolcraftTimelinePanelExtendedTarget,
+} from "./runtime-targets";
+import {
+  toolcraftOutputBackgroundToggleTarget,
+  type ToolcraftRuntimeSetupBackgroundControls,
+} from "./runtime-setup-background";
 import type {
+  ResolvedToolcraftAppIdentity,
   ResolvedToolcraftAppSchema,
   ResolvedToolcraftSettingsTransferSchema,
   ResolvedToolcraftTimelinePanelSchema,
@@ -13,9 +23,9 @@ import type {
   ToolcraftControlLayoutGroupSchema,
   ToolcraftControlSchema,
   ToolcraftControlSectionSchema,
-  ToolcraftControlsPanelSchema,
   ToolcraftSettingsTransferSchema,
 } from "./types";
+import { getToolcraftDefaultCanvasMode } from "../state/canvas-frame";
 
 const canvasSizeControlTargets = {
   height: "canvas.size.height",
@@ -24,16 +34,15 @@ const canvasSizeControlTargets = {
 const canvasAspectRatioTarget = "canvas.aspectRatio";
 const canvasRenderScaleTarget = "canvas.renderScale";
 const settingsTransferTarget = "runtime.settingsTransfer";
+const finiteCanvasCondition = Object.freeze({
+  equals: false,
+  target: toolcraftCanvasInfinityTarget,
+});
 
-function slugifySettingsTransferAppId(value: string | undefined): string {
-  const slug = value
-    ?.trim()
-    .toLowerCase()
-    .replace(/[^a-z0-9]+/g, "-")
-    .replace(/^-+|-+$/g, "");
-
-  return slug || "toolcraft-app";
-}
+type RuntimeSetupControlGroup = {
+  controls: ToolcraftControlSectionSchema["controls"];
+  layoutGroups: readonly ToolcraftControlLayoutGroupSchema[];
+};
 
 function getSettingsTransferMode(
   settingsTransfer: ToolcraftSettingsTransferSchema | undefined,
@@ -53,32 +62,6 @@ function getSettingsTransferObject(
     : undefined;
 }
 
-function getSettingsTransferAppId({
-  controls,
-  persistence,
-  settingsTransfer,
-}: {
-  controls: ToolcraftControlsPanelSchema | undefined;
-  persistence: ResolvedToolcraftAppSchema["persistence"];
-  settingsTransfer: ToolcraftSettingsTransferSchema | undefined;
-}): string {
-  const objectSchema = getSettingsTransferObject(settingsTransfer);
-
-  if (objectSchema?.appId) {
-    return slugifySettingsTransferAppId(objectSchema.appId);
-  }
-
-  if (persistence.storage === "localStorage") {
-    const match = /^toolcraft:(.+):state:v\d+$/u.exec(persistence.key);
-
-    if (match?.[1]) {
-      return slugifySettingsTransferAppId(match[1]);
-    }
-  }
-
-  return slugifySettingsTransferAppId(controls?.title);
-}
-
 function getSettingsTransferFileName({
   appId,
   settingsTransfer,
@@ -99,21 +82,20 @@ function getSettingsTransferFileName({
 
 export function resolveToolcraftSettingsTransfer({
   controls,
-  persistence,
+  identity,
   settingsTransfer,
 }: {
-  controls: ToolcraftControlsPanelSchema | undefined;
-  persistence: ResolvedToolcraftAppSchema["persistence"];
+  controls: ToolcraftAppSchema["panels"]["controls"];
+  identity: ResolvedToolcraftAppIdentity;
   settingsTransfer: ToolcraftSettingsTransferSchema | undefined;
 }): ResolvedToolcraftSettingsTransferSchema {
   const mode = getSettingsTransferMode(settingsTransfer);
-  const appId = getSettingsTransferAppId({
-    controls,
-    persistence,
-    settingsTransfer,
-  });
+  const appId = identity.id;
 
   return {
+    additionalValueTargets: normalizeToolcraftAdditionalValueTargets(
+      getSettingsTransferObject(settingsTransfer)?.additionalValueTargets,
+    ),
     appId,
     enabled: Boolean(controls),
     fileName: getSettingsTransferFileName({ appId, settingsTransfer }),
@@ -184,6 +166,31 @@ function createRenderScaleControl(
   };
 }
 
+function createInfinityCanvasControl(
+  canvas: ResolvedToolcraftAppSchema["canvas"],
+  background: ToolcraftRuntimeSetupBackgroundControls | undefined,
+): ToolcraftControlSchema | undefined {
+  if (!canvas.enabled || canvas.sizing.mode !== "editable-output") {
+    return undefined;
+  }
+
+  return {
+    defaultValue: getToolcraftDefaultCanvasMode(canvas) === "infinite",
+    ...(background
+      ? {
+          disabledWhen: {
+            equals: false,
+            target: toolcraftOutputBackgroundToggleTarget,
+          },
+        }
+      : {}),
+    label: "Infinity canvas",
+    orderRole: "input",
+    target: toolcraftCanvasInfinityTarget,
+    type: "switch",
+  };
+}
+
 function createTimelineExtendedControl(
   timeline: ResolvedToolcraftTimelinePanelSchema | undefined,
 ): ToolcraftControlSchema | undefined {
@@ -193,22 +200,63 @@ function createTimelineExtendedControl(
 
   return {
     defaultValue: false,
-    description:
-      "Shows the extended runtime timeline with scrubber, duration, loop, and keyframe controls; compact mode keeps only Play visible.",
     label: "Timeline",
     target: toolcraftTimelinePanelExtendedTarget,
     type: "switch",
   };
 }
 
-function createEditableCanvasControls(
+function createRuntimeSetupBackgroundControls({
+  background,
+  infinityCanvasControl,
+}: {
+  background: ToolcraftRuntimeSetupBackgroundControls | undefined;
+  infinityCanvasControl: ToolcraftControlSchema | undefined;
+}): RuntimeSetupControlGroup {
+  const includeBackgroundControl = background
+    ? {
+        ...background.include,
+        description: undefined,
+        label: "Background",
+      }
+    : undefined;
+  const backgroundColorControl = background
+    ? {
+        ...background.color,
+        label: "Background color",
+      }
+    : undefined;
+
+  return {
+    controls: {
+      ...(includeBackgroundControl
+        ? { includeBackground: includeBackgroundControl }
+        : {}),
+      ...(infinityCanvasControl
+        ? { infinityCanvas: infinityCanvasControl }
+        : {}),
+      ...(backgroundColorControl
+        ? { background: backgroundColorControl }
+        : {}),
+    },
+    layoutGroups:
+      includeBackgroundControl && infinityCanvasControl
+        ? [
+            {
+              columns: 2,
+              controls: ["includeBackground", "infinityCanvas"],
+              layout: "inline",
+            },
+          ]
+        : [],
+  };
+}
+
+function createFiniteCanvasControls(
   canvas: ResolvedToolcraftAppSchema["canvas"],
-): {
-  controls: ToolcraftControlSectionSchema["controls"];
-  layoutGroups?: readonly ToolcraftControlLayoutGroupSchema[];
-} {
+): RuntimeSetupControlGroup {
   if (!canvas.enabled || canvas.sizing.mode !== "editable-output") {
-    return { controls: {} };
+    return { controls: {}, layoutGroups: [] };
   }
 
   return {
@@ -221,6 +269,7 @@ function createEditableCanvasControls(
         performanceRole: "workload",
         target: canvasAspectRatioTarget,
         type: "aspectRatio",
+        visibleWhen: finiteCanvasCondition,
       },
       canvasWidth: {
         defaultValue: canvas.size.width,
@@ -230,6 +279,7 @@ function createEditableCanvasControls(
         performanceRole: "workload",
         target: canvasSizeControlTargets.width,
         type: "text",
+        visibleWhen: finiteCanvasCondition,
       },
       canvasHeight: {
         defaultValue: canvas.size.height,
@@ -239,6 +289,7 @@ function createEditableCanvasControls(
         performanceRole: "workload",
         target: canvasSizeControlTargets.height,
         type: "text",
+        visibleWhen: finiteCanvasCondition,
       },
     },
     layoutGroups: [
@@ -252,31 +303,45 @@ function createEditableCanvasControls(
 }
 
 export function createToolcraftRuntimeSetupSection({
+  background,
   canvas,
   settingsTransfer,
   timeline,
 }: {
+  background: ToolcraftRuntimeSetupBackgroundControls | undefined;
   canvas: ResolvedToolcraftAppSchema["canvas"];
   settingsTransfer: ResolvedToolcraftSettingsTransferSchema;
   timeline: ResolvedToolcraftTimelinePanelSchema | undefined;
 }): ToolcraftControlSectionSchema {
-  const editableCanvas = createEditableCanvasControls(canvas);
+  const infinityCanvasControl = createInfinityCanvasControl(canvas, background);
+  const backgroundControls = createRuntimeSetupBackgroundControls({
+    background,
+    infinityCanvasControl,
+  });
+  const finiteCanvas = createFiniteCanvasControls(canvas);
   const renderScaleControl = createRenderScaleControl(canvas);
   const timelineExtendedControl = createTimelineExtendedControl(timeline);
 
-  return {
+  const section: ToolcraftControlSectionSchema & { id: string } = {
     controls: {
       settingsTransfer: {
         label: false,
         target: settingsTransferTarget,
         type: "settingsTransfer",
       },
-      ...editableCanvas.controls,
+      ...backgroundControls.controls,
+      ...finiteCanvas.controls,
       ...(renderScaleControl ? { canvasRenderScale: renderScaleControl } : {}),
       ...(timelineExtendedControl ? { timelineExtended: timelineExtendedControl } : {}),
     },
+    id: "runtime.setup",
     layout: "standalone",
-    layoutGroups: editableCanvas.layoutGroups,
+    layoutGroups: [
+      ...backgroundControls.layoutGroups,
+      ...finiteCanvas.layoutGroups,
+    ],
     title: toolcraftRuntimeSetupSectionTitle,
   };
+
+  return registerToolcraftInternalControlSection(section);
 }

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

@@ -1,8 +1,10 @@
 export const toolcraftTimelinePanelVisibleTarget = "panels.timeline.visible";
 export const toolcraftTimelinePanelExtendedTarget = "panels.timeline.extended";
+export const toolcraftCanvasInfinityTarget = "canvas.infinity";
 
 export const toolcraftRuntimeOwnedTargets = [
   "canvas.aspectRatio",
+  toolcraftCanvasInfinityTarget,
   "canvas.renderScale",
   "canvas.size.width",
   "canvas.size.height",
@@ -39,6 +41,18 @@ export function isToolcraftCanvasAspectRatioTarget(target: string): boolean {
   return target === "canvas.aspectRatio";
 }
 
+export function isToolcraftCanvasSizingTarget(target: string): boolean {
+  return (
+    isToolcraftCanvasInfinityTarget(target) ||
+    isToolcraftCanvasAspectRatioTarget(target) ||
+    getToolcraftCanvasSizeTargetDimension(target) !== null
+  );
+}
+
+export function isToolcraftCanvasInfinityTarget(target: string): boolean {
+  return target === toolcraftCanvasInfinityTarget;
+}
+
 export function isToolcraftTimelinePanelVisibleTarget(target: string): boolean {
   return target === toolcraftTimelinePanelVisibleTarget;
 }

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

@@ -18,32 +18,6 @@ export const defaultToolcraftCanvasSize = {
   width: 1920,
 } satisfies ToolcraftCanvasSize;
 
-const defaultCanvasRenderScale = {
-  defaultValue: 2,
-  enabled: false,
-  max: 2,
-  min: 1,
-  step: 0.25,
-} satisfies ResolvedToolcraftAppSchema["canvas"]["renderScale"];
-
-function assertNever(value: never): never {
-  throw new Error(`Unsupported Toolcraft template persistence storage: ${String(value)}`);
-}
-
-export function resolveToolcraftPersistence(
-  persistence: ToolcraftAppSchema["persistence"],
-): ResolvedToolcraftAppSchema["persistence"] {
-  switch (persistence?.storage) {
-    case undefined:
-    case "none":
-      return { storage: "none" };
-    case "localStorage":
-      return persistence;
-    default:
-      return assertNever(persistence);
-  }
-}
-
 export function resolveToolcraftCanvasSizing(
   canvas: ToolcraftAppSchema["canvas"],
 ): ToolcraftCanvasSizingSchema {
@@ -62,54 +36,6 @@ export function resolveToolcraftCanvasSizing(
   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));
-}
-
-export function resolveToolcraftCanvasRenderScale(
-  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,
-  };
-}
-
 export function resolveToolcraftExport(
   exportSchema: ToolcraftAppSchema["export"],
 ): ResolvedToolcraftAppSchema["export"] {