@pixel-point/toolcraft 0.0.15 → 0.0.17

package/templates/runtime/state/control-value-normalization.test.ts

@@ -0,0 +1,141 @@
+import { describe, expect, it } from "vitest";
+
+import { defineToolcraft } from "../schema/define-toolcraft";
+import type { ResolvedToolcraftControlSchema } from "../schema/types";
+import { normalizeToolcraftControlValue } from "./control-value-normalization";
+
+const schema = defineToolcraft({
+  canvas: { enabled: true, sizing: { mode: "editable-output" } },
+  panels: {
+    controls: {
+      sections: [
+        {
+          controls: {
+            format: {
+              defaultValue: "png",
+              options: [
+                { label: "PNG", value: "png" },
+                { label: "JPEG", value: "jpeg" },
+              ],
+              target: "output.format",
+              type: "select",
+            },
+            opacity: {
+              defaultValue: 50,
+              max: 100,
+              min: 0,
+              target: "appearance.opacity",
+              type: "slider",
+            },
+            position: {
+              defaultValue: { x: "0.00", y: "0.00" },
+              target: "appearance.position",
+              type: "vector",
+            },
+            prompt: {
+              defaultValue: "Initial prompt",
+              target: "generation.prompt",
+              type: "text",
+            },
+            view: {
+              defaultValue: "simple",
+              label: "Template view",
+              options: [
+                { label: "Simple", value: "simple" },
+                { label: "Mega", value: "mega" },
+              ],
+              target: "template.view",
+              type: "tabs",
+            },
+          },
+          id: "appearance",
+          title: "Appearance",
+        },
+      ],
+      title: "Controls",
+    },
+  },
+});
+
+function getControl(id: string): ResolvedToolcraftControlSchema {
+  const control = schema.panels.controls?.sections
+    .map((section) => section.controls[id])
+    .find((candidate) => candidate !== undefined);
+
+  if (!control) {
+    throw new Error(`Missing test control ${id}`);
+  }
+
+  return control;
+}
+
+describe("normalizeToolcraftControlValue", () => {
+  it("restores canonical numeric canvas dimensions from text setup controls", () => {
+    const canvasWidth = getControl("canvasWidth");
+
+    expect(normalizeToolcraftControlValue(canvasWidth, 1919)).toEqual({
+      accepted: true,
+      value: 1919,
+    });
+    expect(normalizeToolcraftControlValue(canvasWidth, "640.4")).toEqual({
+      accepted: true,
+      value: 640,
+    });
+  });
+
+  it("accepts a finite slider value inside the schema range", () => {
+    expect(normalizeToolcraftControlValue(getControl("opacity"), 80)).toEqual({
+      accepted: true,
+      value: 80,
+    });
+  });
+
+  it("rejects a slider value outside its schema range", () => {
+    expect(normalizeToolcraftControlValue(getControl("opacity"), 200)).toEqual({
+      accepted: false,
+      fallback: 50,
+    });
+  });
+
+  it("accepts current options and rejects removed options", () => {
+    expect(normalizeToolcraftControlValue(getControl("format"), "jpeg")).toEqual({
+      accepted: true,
+      value: "jpeg",
+    });
+    expect(normalizeToolcraftControlValue(getControl("format"), "webp")).toEqual({
+      accepted: false,
+      fallback: "png",
+    });
+  });
+
+  it("normalizes tabs against their declared content views", () => {
+    expect(normalizeToolcraftControlValue(getControl("view"), "mega")).toEqual({
+      accepted: true,
+      value: "mega",
+    });
+    expect(
+      normalizeToolcraftControlValue(getControl("view"), "archive"),
+    ).toEqual({
+      accepted: false,
+      fallback: "simple",
+    });
+  });
+
+  it("rejects malformed compound vector values", () => {
+    expect(
+      normalizeToolcraftControlValue(getControl("position"), {
+        x: "0.25",
+        y: null,
+      }),
+    ).toEqual({
+      accepted: false,
+      fallback: { x: "0.00", y: "0.00" },
+    });
+  });
+
+  it("accepts values matching a text control", () => {
+    expect(
+      normalizeToolcraftControlValue(getControl("prompt"), "Restored prompt"),
+    ).toEqual({ accepted: true, value: "Restored prompt" });
+  });
+});

package/templates/runtime/state/control-value-normalization.ts

@@ -0,0 +1,222 @@
+import {
+  getToolcraftCanvasSizeTargetDimension,
+  isToolcraftTimelinePanelRuntimeTarget,
+} from "../schema/runtime-targets";
+import type {
+  ResolvedToolcraftAppSchema,
+  ResolvedToolcraftControlSchema,
+} from "../schema/types";
+import { asToolcraftCanvasSizeDimension } from "./canvas-state";
+
+export type ToolcraftNormalizedControlValue =
+  | { accepted: true; value: unknown }
+  | { accepted: false; fallback: unknown };
+
+function accept(value: unknown): ToolcraftNormalizedControlValue {
+  return { accepted: true, value };
+}
+
+function reject(
+  control: ResolvedToolcraftControlSchema,
+): ToolcraftNormalizedControlValue {
+  return { accepted: false, fallback: control.defaultValue };
+}
+
+function isRecord(value: unknown): value is Record<string, unknown> {
+  return typeof value === "object" && value !== null && !Array.isArray(value);
+}
+
+function isFiniteNumber(value: unknown): value is number {
+  return typeof value === "number" && Number.isFinite(value);
+}
+
+function isBoundedNumber(
+  control: ResolvedToolcraftControlSchema,
+  value: unknown,
+): value is number {
+  return (
+    isFiniteNumber(value) &&
+    (control.min === undefined || value >= control.min) &&
+    (control.max === undefined || value <= control.max)
+  );
+}
+
+function isJsonValue(value: unknown): boolean {
+  if (
+    value === null ||
+    typeof value === "string" ||
+    typeof value === "boolean" ||
+    isFiniteNumber(value)
+  ) {
+    return true;
+  }
+
+  if (Array.isArray(value)) {
+    return value.every(isJsonValue);
+  }
+
+  return isRecord(value) && Object.values(value).every(isJsonValue);
+}
+
+function matchesDefaultContainer(
+  candidate: unknown,
+  defaultValue: unknown,
+): boolean {
+  if (defaultValue === undefined) {
+    return isJsonValue(candidate);
+  }
+
+  if (defaultValue === null || typeof defaultValue !== "object") {
+    return typeof candidate === typeof defaultValue && isJsonValue(candidate);
+  }
+
+  if (Array.isArray(defaultValue)) {
+    return Array.isArray(candidate) && candidate.every(isJsonValue);
+  }
+
+  return isRecord(candidate) && isJsonValue(candidate);
+}
+
+function isOptionValue(
+  control: ResolvedToolcraftControlSchema,
+  value: unknown,
+): value is string {
+  return (
+    typeof value === "string" &&
+    (control.options ?? []).some((option) => option.value === value)
+  );
+}
+
+function isImagePickerValue(
+  control: ResolvedToolcraftControlSchema,
+  value: unknown,
+): value is string {
+  return (
+    typeof value === "string" &&
+    (control.items ?? []).some((item) => item.value === value)
+  );
+}
+
+function isStringPair(
+  value: unknown,
+  first: string,
+  second: string,
+): boolean {
+  return (
+    isRecord(value) &&
+    typeof value[first] === "string" &&
+    typeof value[second] === "string"
+  );
+}
+
+function isFontPickerValue(value: unknown): boolean {
+  if (typeof value === "string") {
+    return value.length > 0;
+  }
+
+  if (!isRecord(value) || typeof value.fontId !== "string") {
+    return false;
+  }
+
+  return (
+    (value.color === undefined || typeof value.color === "string") &&
+    (value.fontSize === undefined || isFiniteNumber(value.fontSize)) &&
+    (value.fontWeight === undefined || typeof value.fontWeight === "string") &&
+    (value.opacity === undefined ||
+      (isFiniteNumber(value.opacity) && value.opacity >= 0 && value.opacity <= 100)) &&
+    isJsonValue(value)
+  );
+}
+
+export function normalizeToolcraftControlValue(
+  control: ResolvedToolcraftControlSchema,
+  candidate: unknown,
+): ToolcraftNormalizedControlValue {
+  if (getToolcraftCanvasSizeTargetDimension(control.target)) {
+    const dimension = asToolcraftCanvasSizeDimension(candidate);
+
+    return dimension === null ? reject(control) : accept(dimension);
+  }
+
+  let valid: boolean;
+
+  switch (control.type) {
+    case "slider":
+      valid = isBoundedNumber(control, candidate);
+      break;
+    case "rangeSlider":
+      valid =
+        Array.isArray(candidate) &&
+        candidate.length > 0 &&
+        candidate.every((value) => isBoundedNumber(control, value));
+      break;
+    case "switch":
+      valid = typeof candidate === "boolean";
+      break;
+    case "select":
+    case "segmented":
+    case "tabs":
+      valid = isOptionValue(control, candidate);
+      break;
+    case "imagePicker":
+      valid = isImagePickerValue(control, candidate);
+      break;
+    case "text":
+    case "code":
+    case "anchorGrid":
+      valid = typeof candidate === "string";
+      break;
+    case "rangeInput":
+      valid = isStringPair(candidate, "start", "end");
+      break;
+    case "vector":
+      valid = isStringPair(candidate, "x", "y");
+      break;
+    case "color":
+    case "palette":
+      valid =
+        typeof candidate === "string" ||
+        (isRecord(candidate) && typeof candidate.hex === "string");
+      break;
+    case "colorOpacity":
+      valid =
+        isRecord(candidate) &&
+        typeof candidate.hex === "string" &&
+        isFiniteNumber(candidate.opacity) &&
+        candidate.opacity >= 0 &&
+        candidate.opacity <= 100;
+      break;
+    case "fontPicker":
+      valid = isFontPickerValue(candidate);
+      break;
+    case "panelActions":
+    case "settingsTransfer":
+      valid = false;
+      break;
+    default:
+      valid = matchesDefaultContainer(candidate, control.defaultValue);
+      break;
+  }
+
+  return valid ? accept(candidate) : reject(control);
+}
+
+export function getToolcraftValueControls(
+  schema: ResolvedToolcraftAppSchema,
+): ReadonlyMap<string, ResolvedToolcraftControlSchema> {
+  const controls = new Map<string, ResolvedToolcraftControlSchema>();
+
+  for (const section of schema.panels.controls?.sections ?? []) {
+    for (const control of Object.values(section.controls)) {
+      if (
+        control.type !== "panelActions" &&
+        control.type !== "settingsTransfer" &&
+        !isToolcraftTimelinePanelRuntimeTarget(control.target)
+      ) {
+        controls.set(control.target, control);
+      }
+    }
+  }
+
+  return controls;
+}

package/templates/runtime/state/controls-reducer.ts

@@ -1,26 +1,16 @@
 import {
-  getToolcraftCanvasSizeTargetDimension,
-  isToolcraftCanvasAspectRatioTarget,
   isToolcraftTimelinePanelExtendedTarget,
   isToolcraftTimelinePanelVisibleTarget,
 } from "../schema/runtime-targets";
 import {
-  applyToolcraftCanvasAspectRatioToSize,
-  asToolcraftCanvasSizeDimension,
-  getToolcraftCanvasAspectRatioFromSize,
-  getToolcraftCanvasAspectRatioPresetSize,
-  getToolcraftResetCanvasSize,
-  normalizeToolcraftCanvasAspectRatioValue,
-  toolcraftCanvasAspectRatioTarget,
-  toolcraftCanvasAspectRatioValuesEqual,
-  toolcraftCanvasSizesEqual,
-  toolcraftCanvasSizeHeightTarget,
-  toolcraftCanvasSizeWidthTarget,
-} from "./canvas-state";
+  getToolcraftCanvasResetPatch,
+  reduceToolcraftCanvasControlValue,
+} from "./canvas-control-target-reducer";
+import { commitToolcraftStatePatch, commitToolcraftValuePatch } from "./history-patches";
 import {
-  commitToolcraftStatePatch,
-  commitToolcraftValuePatch,
-} from "./history-patches";
+  tagToolcraftCanvasStateHistoryPatch,
+  tagToolcraftControlsResetHistoryPatch,
+} from "./history-patch-metadata";
 import { getToolcraftResetMediaPatch } from "./media-state";
 import type {
   ToolcraftCommand,
@@ -40,7 +30,11 @@ export function reduceToolcraftControlsCommand(
 ): ToolcraftState {
   switch (command.type) {
     case "controls.setValue": {
-      const canvasSizeDimension = getToolcraftCanvasSizeTargetDimension(command.target);
+      const canvasReduction = reduceToolcraftCanvasControlValue(state, command);
+
+      if (canvasReduction.handled) {
+        return canvasReduction.state;
+      }
 
       if (isToolcraftTimelinePanelExtendedTarget(command.target)) {
         const extended = command.value === true;
@@ -80,104 +74,6 @@ export function reduceToolcraftControlsCommand(
         };
       }
 
-      if (isToolcraftCanvasAspectRatioTarget(command.target)) {
-        const ratio = normalizeToolcraftCanvasAspectRatioValue(
-          command.value,
-          state.canvas.size,
-        );
-        const size =
-          getToolcraftCanvasAspectRatioPresetSize(ratio) ??
-          applyToolcraftCanvasAspectRatioToSize({
-            anchor: "width",
-            ratio,
-            size: state.canvas.size,
-            value: state.canvas.size.width,
-          });
-
-        if (
-          state.canvas.size.width === size.width &&
-          state.canvas.size.height === size.height &&
-          toolcraftCanvasAspectRatioValuesEqual(state.values[command.target], ratio)
-        ) {
-          return state;
-        }
-
-        return commitToolcraftStatePatch(state, {
-          after: {
-            [toolcraftCanvasAspectRatioTarget]: ratio,
-            "canvas.size": size,
-            [toolcraftCanvasSizeWidthTarget]: size.width,
-            [toolcraftCanvasSizeHeightTarget]: size.height,
-          },
-          before: {
-            [toolcraftCanvasAspectRatioTarget]: state.values[command.target],
-            "canvas.size": state.canvas.size,
-            [toolcraftCanvasSizeWidthTarget]: state.values[toolcraftCanvasSizeWidthTarget],
-            [toolcraftCanvasSizeHeightTarget]: state.values[toolcraftCanvasSizeHeightTarget],
-          },
-          label: command.label ?? command.target,
-        }, {
-          group: command.historyGroup,
-          mode: command.history,
-        });
-      }
-
-      if (canvasSizeDimension) {
-        const dimensionValue = asToolcraftCanvasSizeDimension(command.value);
-
-        if (dimensionValue === null) {
-          return state;
-        }
-
-        const hasAspectRatioControl =
-          toolcraftCanvasAspectRatioTarget in state.values ||
-          toolcraftCanvasAspectRatioTarget in state.defaults;
-        const size = {
-          ...state.canvas.size,
-          [canvasSizeDimension]: dimensionValue,
-        };
-        const aspectRatio = getToolcraftCanvasAspectRatioFromSize(size);
-        const targetValue = size[canvasSizeDimension];
-        const otherTarget =
-          canvasSizeDimension === "width"
-            ? toolcraftCanvasSizeHeightTarget
-            : toolcraftCanvasSizeWidthTarget;
-        const otherValue = canvasSizeDimension === "width" ? size.height : size.width;
-
-        const sizeUnchanged =
-          state.canvas.size.width === size.width &&
-          state.canvas.size.height === size.height &&
-          state.values[command.target] === targetValue &&
-          state.values[otherTarget] === otherValue;
-
-        if (sizeUnchanged) {
-          return state;
-        }
-
-        return commitToolcraftStatePatch(state, {
-          after: {
-            ...(hasAspectRatioControl
-              ? { [toolcraftCanvasAspectRatioTarget]: aspectRatio }
-              : {}),
-            "canvas.size": size,
-            [command.target]: targetValue,
-            [otherTarget]: otherValue,
-          },
-          before: {
-            ...(hasAspectRatioControl
-              ? { [toolcraftCanvasAspectRatioTarget]: state.values[toolcraftCanvasAspectRatioTarget] }
-              : {}),
-            "canvas.size": state.canvas.size,
-            [command.target]: state.values[command.target],
-            [otherTarget]: state.values[otherTarget],
-          },
-          label: command.label ?? command.target,
-        }, {
-          group: command.historyGroup,
-          mode: command.history,
-        });
-      }
-
       if (Object.is(state.values[command.target], command.value)) {
         return state;
       }
@@ -201,32 +97,35 @@ export function reduceToolcraftControlsCommand(
       return state;
 
     case "controls.reset": {
-      const resetCanvasSize = getToolcraftResetCanvasSize(state);
+      const resetCanvasPatch = getToolcraftCanvasResetPatch(state);
       const resetMediaPatch = getToolcraftResetMediaPatch(state);
 
-      if (resetCanvasSize || resetMediaPatch) {
-        return commitToolcraftStatePatch(state, {
-          after: {
-            ...state.defaults,
-            ...(resetCanvasSize ? { "canvas.size": resetCanvasSize } : {}),
-            ...resetMediaPatch?.after,
-          },
-          before: {
-            ...state.values,
-            ...(resetCanvasSize ? { "canvas.size": state.canvas.size } : {}),
-            ...resetMediaPatch?.before,
-          },
-          label: "Reset controls",
-        });
+      if (resetCanvasPatch || resetMediaPatch) {
+        return commitToolcraftStatePatch(
+          state,
+          tagToolcraftControlsResetHistoryPatch({
+            after: {
+              ...state.defaults,
+              ...resetCanvasPatch?.after,
+              ...resetMediaPatch?.after,
+            },
+            before: {
+              ...state.values,
+              ...resetCanvasPatch?.before,
+              ...resetMediaPatch?.before,
+            },
+            label: "Reset controls",
+          }),
+        );
       }
 
       return commitToolcraftValuePatch(
         state,
-        {
+        tagToolcraftControlsResetHistoryPatch({
           after: { ...state.defaults },
           before: { ...state.values },
           label: "Reset controls",
-        },
+        }),
         { ...state.defaults },
       );
     }
@@ -235,6 +134,7 @@ export function reduceToolcraftControlsCommand(
       const targetSet = new Set(command.targets);
       const before: Record<string, unknown> = {};
       const after: Record<string, unknown> = {};
+      const resetCanvasPatch = getToolcraftCanvasResetPatch(state, targetSet);
       const resetMediaPatch = getToolcraftResetMediaPatch(state, targetSet);
 
       for (const target of targetSet) {
@@ -246,16 +146,9 @@ export function reduceToolcraftControlsCommand(
         after[target] = state.defaults[target];
       }
 
-      const resetCanvasSize = getToolcraftResetCanvasSize(state);
-      const shouldResetCanvasSize =
-        resetCanvasSize !== null &&
-        (targetSet.has(toolcraftCanvasSizeWidthTarget) ||
-          targetSet.has(toolcraftCanvasSizeHeightTarget)) &&
-        !toolcraftCanvasSizesEqual(state.canvas.size, resetCanvasSize);
-
-      if (shouldResetCanvasSize) {
-        before["canvas.size"] = state.canvas.size;
-        after["canvas.size"] = resetCanvasSize;
+      if (resetCanvasPatch) {
+        Object.assign(before, resetCanvasPatch.before);
+        Object.assign(after, resetCanvasPatch.after);
       }
 
       if (resetMediaPatch) {
@@ -267,11 +160,18 @@ export function reduceToolcraftControlsCommand(
         return state;
       }
 
-      return commitToolcraftStatePatch(state, {
+      const patch = {
         after,
         before,
         label: command.label ?? "Reset section",
-      });
+      };
+
+      return commitToolcraftStatePatch(
+        state,
+        resetCanvasPatch
+          ? tagToolcraftCanvasStateHistoryPatch(patch)
+          : patch,
+      );
     }
   }
 }

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

@@ -4,6 +4,45 @@ import { defineToolcraft } from "../schema/define-toolcraft";
 import { createToolcraftState } from "./create-template-state";
 
 describe("createToolcraftState", () => {
+  it("normalizes restored Infinity canvas to finite when Background is off", () => {
+    const app = defineToolcraft({
+      canvas: {
+        enabled: true,
+        sizing: { mode: "editable-output" },
+      },
+      panels: {
+        controls: {
+          sections: [
+            {
+              controls: {
+                includeBackground: {
+                  defaultValue: true,
+                  target: "export.includeBackground",
+                  type: "switch",
+                },
+                background: {
+                  defaultValue: "#D4CECA",
+                  target: "appearance.background",
+                  type: "color",
+                },
+              },
+              title: "Background",
+            },
+          ],
+          title: "Controls",
+        },
+      },
+    });
+
+    const state = createToolcraftState(app, {
+      canvas: { mode: "infinite" },
+      values: { "export.includeBackground": false },
+    });
+
+    expect(state.values["export.includeBackground"]).toBe(false);
+    expect(state.canvas.mode).toBe("finite");
+  });
+
   it("initializes values from control defaults by target", () => {
     const app = defineToolcraft({
       canvas: { enabled: true },
@@ -138,7 +177,7 @@ describe("createToolcraftState", () => {
     const state = createToolcraftState(app);
 
     expect(state.panels).toEqual({
-      controls: { offset: { x: 0, y: 0 } },
+      controls: { collapsedSections: {}, offset: { x: 0, y: 0 } },
       layers: { offset: { x: 0, y: 0 } },
       timeline: { offset: { x: 0, y: 0 } },
       toolbar: { offset: { x: 0, y: 0 } },
@@ -196,14 +235,16 @@ describe("createToolcraftState", () => {
 
     expect(state.mediaAssets).toEqual([
       expect.objectContaining({
-        dataUrl: "data:image/png;base64,AAAA",
         fileName: "background.png",
         id: "default-background",
         layerId: "default-background-layer",
         mimeType: "image/png",
+        lifecycle: "restoring",
+        resourceRef: expect.stringMatching(/^media:image:sha256:/u),
         sourceTarget: "media.background",
       }),
     ]);
+    expect(state.mediaAssets[0]).not.toHaveProperty("dataUrl");
     expect(state.layers).toEqual([
       expect.objectContaining({
         id: "default-background-layer",