@pixel-point/toolcraft 0.0.15 → 0.0.17

package/templates/runtime/state/toolcraft-external-store-history-boundary.test.ts

@@ -0,0 +1,243 @@
+import { describe, expect, it } from "vitest";
+
+import { defineToolcraft } from "../schema/define-toolcraft";
+import { createToolcraftState } from "./create-template-state";
+import { isToolcraftControlsResetHistoryPatch } from "./history-patch-metadata";
+import { createState } from "./reducer-test-utils";
+import { createToolcraftExternalStore } from "./toolcraft-external-store";
+
+function expectViewportOverlay(
+  store: ReturnType<typeof createToolcraftExternalStore>,
+): void {
+  expect(store.getCommittedState().canvas).toMatchObject({
+    offset: { x: 0, y: 0 },
+    zoom: 100,
+  });
+  expect(store.getState().canvas).toMatchObject({
+    offset: { x: 24, y: -12 },
+    zoom: 150,
+  });
+}
+
+function createIntrinsicMediaStateAt(timeSeconds: number) {
+  const schema = defineToolcraft({
+    canvas: {
+      enabled: true,
+      sizing: { mode: "intrinsic-media" },
+      upload: true,
+    },
+    panels: {
+      controls: {
+        sections: [
+          {
+            controls: {
+              source: {
+                defaultValue: null,
+                target: "media.source",
+                type: "fileDrop",
+              },
+            },
+            title: "Source",
+          },
+        ],
+        title: "Controls",
+      },
+      timeline: { mode: "playback" },
+    },
+  });
+
+  return createToolcraftState(schema, {
+    mediaAssets: [
+      {
+        dataUrl: "data:image/png;base64,AAAA",
+        fileName: "source.png",
+        id: "media-1",
+        layerId: "layer-1",
+        mimeType: "image/png",
+        position: { x: 0, y: 0 },
+        size: { height: 320, unit: "px", width: 512 },
+        sourceTarget: "media.source",
+      },
+    ],
+    timeline: {
+      currentTimeSeconds: timeSeconds,
+      isPlaying: false,
+    },
+  });
+}
+
+describe("Toolcraft external-store history boundary", () => {
+  it("preserves reset provenance while merging durable and effective lanes", () => {
+    const store = createToolcraftExternalStore(createState());
+
+    store.dispatch({
+      target: "selectedLayer.opacity",
+      type: "controls.setValue",
+      value: 12,
+    });
+    store.dispatchTransient({
+      currentTimeSeconds: 3,
+      type: "timeline.setCurrentTime",
+    });
+    store.dispatch({ type: "controls.reset" });
+
+    const patch = store.getCommittedState().history.undo.at(-1);
+
+    expect(isToolcraftControlsResetHistoryPatch(patch)).toBe(true);
+
+    store.dispatch({ type: "history.undo" });
+    expect(store.getCommittedState().history.redo.at(-1)).toBe(patch);
+
+    store.dispatch({ type: "history.redo" });
+    expect(store.getCommittedState().history.undo.at(-1)).toBe(patch);
+  });
+
+  it("treats canvas-shaped product targets as values across undo and redo", () => {
+    const baseState = createState();
+    const defaults = {
+      canvas: { offset: { x: 1, y: 2 }, zoom: 10 },
+      "canvas.offset": { x: 3, y: 4 },
+      "canvas.zoom": 20,
+    };
+    const changed = {
+      canvas: { offset: { x: 11, y: 12 }, zoom: 110 },
+      "canvas.offset": { x: 13, y: 14 },
+      "canvas.zoom": 120,
+    };
+    const store = createToolcraftExternalStore({
+      ...baseState,
+      defaults: { ...baseState.defaults, ...defaults },
+      values: { ...baseState.values, ...defaults },
+    });
+
+    for (const [target, value] of Object.entries(changed)) {
+      store.dispatch({ target, type: "controls.setValue", value });
+    }
+
+    store.dispatchTransient({
+      offset: { x: 24, y: -12 },
+      type: "canvas.setViewport",
+      zoom: 150,
+    });
+
+    for (let index = 0; index < 3; index += 1) {
+      store.dispatch({ type: "history.undo" });
+      expectViewportOverlay(store);
+    }
+
+    expect(store.getCommittedState().values).toMatchObject(defaults);
+
+    for (let index = 0; index < 3; index += 1) {
+      store.dispatch({ type: "history.redo" });
+      expectViewportOverlay(store);
+    }
+
+    expect(store.getCommittedState().values).toMatchObject(changed);
+  });
+
+  it("retains a committed-only timeline patch when deleting the last media", () => {
+    const store = createToolcraftExternalStore(createIntrinsicMediaStateAt(3));
+
+    store.dispatchTransient({
+      currentTimeSeconds: 0,
+      type: "timeline.setCurrentTime",
+    });
+    store.dispatchTransient({
+      offset: { x: 24, y: -12 },
+      type: "canvas.setViewport",
+      zoom: 150,
+    });
+    store.dispatch({ mediaId: "media-1", type: "media.delete" });
+
+    expect(store.getCommittedState()).toMatchObject({
+      mediaAssets: [],
+      timeline: { currentTimeSeconds: 0 },
+    });
+    expect(store.getCommittedState().history.undo.at(-1)).toMatchObject({
+      after: { timeline: { currentTimeSeconds: 0 } },
+      before: { timeline: { currentTimeSeconds: 3 } },
+    });
+    expectViewportOverlay(store);
+
+    store.dispatch({ type: "history.undo" });
+
+    expect(store.getCommittedState()).toMatchObject({
+      mediaAssets: [{ id: "media-1" }],
+      timeline: { currentTimeSeconds: 3 },
+    });
+    expect(store.getState()).toMatchObject({
+      canvas: { offset: { x: 24, y: -12 }, zoom: 150 },
+      timeline: { currentTimeSeconds: 3 },
+    });
+
+    store.dispatch({ type: "history.redo" });
+
+    expect(store.getCommittedState()).toMatchObject({
+      mediaAssets: [],
+      timeline: { currentTimeSeconds: 0 },
+    });
+    expect(store.getState().canvas).toMatchObject({
+      offset: { x: 24, y: -12 },
+      zoom: 150,
+    });
+  });
+
+  it("preserves untouched entries while merging a grouped value patch", () => {
+    const store = createToolcraftExternalStore(createState());
+
+    store.dispatch({ durationSeconds: 12, type: "timeline.setDuration" });
+    const untouchedTimelinePatch = store.getCommittedState().history.undo[0];
+
+    store.dispatch({
+      history: "merge",
+      historyGroup: "opacity-drag",
+      target: "selectedLayer.opacity",
+      type: "controls.setValue",
+      value: 60,
+    });
+    store.dispatchTransient({
+      currentTimeSeconds: 3,
+      type: "timeline.setCurrentTime",
+    });
+    store.dispatchTransient({
+      offset: { x: 24, y: -12 },
+      type: "canvas.setViewport",
+      zoom: 150,
+    });
+    store.dispatch({
+      history: "merge",
+      historyGroup: "opacity-drag",
+      target: "selectedLayer.opacity",
+      type: "controls.setValue",
+      value: 45,
+    });
+
+    const history = store.getCommittedState().history;
+
+    expect(history.undo).toHaveLength(2);
+    expect(history.undo[0]).toBe(untouchedTimelinePatch);
+    expect(history.undo[1]).toMatchObject({
+      after: { "selectedLayer.opacity": 45 },
+      before: { "selectedLayer.opacity": 75 },
+      group: "opacity-drag",
+    });
+
+    store.dispatch({ type: "history.undo" });
+
+    expect(store.getCommittedState().values["selectedLayer.opacity"]).toBe(75);
+    expect(store.getCommittedState().history.redo.at(-1)).toBe(history.undo[1]);
+    expect(store.getState()).toMatchObject({
+      canvas: { offset: { x: 24, y: -12 }, zoom: 150 },
+      timeline: { currentTimeSeconds: 3 },
+    });
+
+    store.dispatch({ type: "history.redo" });
+
+    expect(store.getCommittedState().values["selectedLayer.opacity"]).toBe(45);
+    expect(store.getCommittedState().history.undo.at(-1)).toBe(history.undo[1]);
+    expect(store.getState()).toMatchObject({
+      canvas: { offset: { x: 24, y: -12 }, zoom: 150 },
+      timeline: { currentTimeSeconds: 3 },
+    });
+  });
+});

package/templates/runtime/state/toolcraft-external-store-history.ts

@@ -0,0 +1,254 @@
+import { toolcraftTimelineKeyframeGroupListsEqual } from "./toolcraft-keyframe-equality";
+import {
+  getToolcraftHistoryPatchSource,
+  tagToolcraftHistoryPatchSource,
+} from "./history-patch-metadata";
+import type {
+  ToolcraftHistoryPatch,
+  ToolcraftState,
+  ToolcraftTimelineState,
+} from "./types";
+
+export type ToolcraftHotFieldTouches = {
+  offsetTouched: boolean;
+  playbackTouched: boolean;
+  zoomTouched: boolean;
+};
+
+const emptyPatchSide: Record<string, unknown> = {};
+
+function isRecord(value: unknown): value is Record<string, unknown> {
+  return typeof value === "object" && value !== null && !Array.isArray(value);
+}
+
+function readStructuralTimeline(
+  side: Record<string, unknown>,
+): ToolcraftTimelineState | undefined {
+  return isRecord(side.timeline)
+    ? (side.timeline as ToolcraftTimelineState)
+    : undefined;
+}
+
+function timelinesEqualWithoutCurrentTime(
+  previous: ToolcraftTimelineState,
+  next: ToolcraftTimelineState,
+): boolean {
+  return (
+    Object.is(previous.durationSeconds, next.durationSeconds) &&
+    previous.expanded === next.expanded &&
+    previous.isLooping === next.isLooping &&
+    previous.isPlaying === next.isPlaying &&
+    previous.selectedKeyframeId === next.selectedKeyframeId &&
+    toolcraftTimelineKeyframeGroupListsEqual(
+      previous.keyframeGroups,
+      next.keyframeGroups,
+    )
+  );
+}
+
+function selectStructuralTimeline(
+  effective: ToolcraftTimelineState | undefined,
+  committed: ToolcraftTimelineState | undefined,
+): ToolcraftTimelineState | undefined {
+  if (!effective) {
+    return committed;
+  }
+
+  if (!committed) {
+    return effective;
+  }
+
+  return timelinesEqualWithoutCurrentTime(effective, committed)
+    ? committed
+    : effective;
+}
+
+export function getToolcraftHistoryPatchHotFieldTouches(
+  patch: ToolcraftHistoryPatch,
+): ToolcraftHotFieldTouches {
+  const beforeTimeline = readStructuralTimeline(patch.before);
+  const afterTimeline = readStructuralTimeline(patch.after);
+
+  return {
+    offsetTouched: false,
+    playbackTouched:
+      Boolean(beforeTimeline || afterTimeline) &&
+      (!beforeTimeline ||
+        !afterTimeline ||
+        !Object.is(
+          beforeTimeline.currentTimeSeconds,
+          afterTimeline.currentTimeSeconds,
+        )),
+    zoomTouched: false,
+  };
+}
+
+export function getAppliedToolcraftHistoryPatch(
+  previous: ToolcraftState["history"],
+  next: ToolcraftState["history"],
+): ToolcraftHistoryPatch | undefined {
+  const undoPatch = previous.undo.at(-1);
+
+  if (
+    undoPatch &&
+    next.undo.length === previous.undo.length - 1 &&
+    next.redo.length === previous.redo.length + 1 &&
+    next.redo.at(-1) === undoPatch
+  ) {
+    return undoPatch;
+  }
+
+  const redoPatch = previous.redo.at(-1);
+
+  if (
+    redoPatch &&
+    next.redo.length === previous.redo.length - 1 &&
+    next.undo.length === previous.undo.length + 1 &&
+    next.undo.at(-1) === redoPatch
+  ) {
+    return redoPatch;
+  }
+
+  return undefined;
+}
+
+function mergePatchSideTimeline(
+  base: Record<string, unknown>,
+  effective: Record<string, unknown>,
+  committed: Record<string, unknown>,
+  currentTimeSeconds: number,
+): Record<string, unknown> {
+  const timeline = selectStructuralTimeline(
+    readStructuralTimeline(effective),
+    readStructuralTimeline(committed),
+  );
+
+  if (!timeline) {
+    return base;
+  }
+
+  const normalizedTimeline = Object.is(
+    timeline.currentTimeSeconds,
+    currentTimeSeconds,
+  )
+    ? timeline
+    : { ...timeline, currentTimeSeconds };
+
+  return readStructuralTimeline(base) === normalizedTimeline
+    ? base
+    : { ...base, timeline: normalizedTimeline };
+}
+
+function mergeChangedHistoryPatch(
+  effective: ToolcraftHistoryPatch | undefined,
+  committed: ToolcraftHistoryPatch | undefined,
+  beforeState: ToolcraftState,
+  afterState: ToolcraftState,
+): ToolcraftHistoryPatch | undefined {
+  const base = effective ?? committed;
+
+  if (!base) {
+    return undefined;
+  }
+
+  const effectiveBefore = effective?.before ?? emptyPatchSide;
+  const effectiveAfter = effective?.after ?? emptyPatchSide;
+  const committedBefore = committed?.before ?? emptyPatchSide;
+  const committedAfter = committed?.after ?? emptyPatchSide;
+  const source =
+    getToolcraftHistoryPatchSource(effective) ??
+    getToolcraftHistoryPatchSource(committed);
+  const baseSource = getToolcraftHistoryPatchSource(base);
+  const before = mergePatchSideTimeline(
+    base.before,
+    effectiveBefore,
+    committedBefore,
+    beforeState.timeline.currentTimeSeconds,
+  );
+  const after = mergePatchSideTimeline(
+    base.after,
+    effectiveAfter,
+    committedAfter,
+    afterState.timeline.currentTimeSeconds,
+  );
+
+  return before === base.before && after === base.after && source === baseSource
+    ? base
+    : tagToolcraftHistoryPatchSource(
+        {
+          ...base,
+          after,
+          before,
+        },
+        source,
+      );
+}
+
+function mergeHistoryStack(
+  effective: ToolcraftHistoryPatch[],
+  committed: ToolcraftHistoryPatch[],
+  previousPatches: ReadonlySet<ToolcraftHistoryPatch>,
+  beforeState: ToolcraftState,
+  afterState: ToolcraftState,
+): ToolcraftHistoryPatch[] {
+  const length = Math.max(effective.length, committed.length);
+  const merged: ToolcraftHistoryPatch[] = [];
+  let matchesEffective = effective.length === length;
+
+  for (let index = 0; index < length; index += 1) {
+    const effectivePatch = effective[index];
+    const committedPatch = committed[index];
+    const effectiveChanged =
+      effectivePatch !== undefined && !previousPatches.has(effectivePatch);
+    const committedChanged =
+      committedPatch !== undefined && !previousPatches.has(committedPatch);
+    const patch =
+      effectiveChanged || committedChanged
+        ? mergeChangedHistoryPatch(
+            effectiveChanged ? effectivePatch : undefined,
+            committedChanged ? committedPatch : undefined,
+            beforeState,
+            afterState,
+          )
+        : (effectivePatch ?? committedPatch);
+
+    if (!patch) {
+      continue;
+    }
+
+    merged.push(patch);
+    matchesEffective = matchesEffective && patch === effectivePatch;
+  }
+
+  return matchesEffective ? effective : merged;
+}
+
+export function mergeToolcraftDurableHistory(
+  effective: ToolcraftState["history"],
+  committed: ToolcraftState["history"],
+  beforeState: ToolcraftState,
+  afterState: ToolcraftState,
+): ToolcraftState["history"] {
+  const previousPatches = new Set([
+    ...beforeState.history.undo,
+    ...beforeState.history.redo,
+  ]);
+  const undo = mergeHistoryStack(
+    effective.undo,
+    committed.undo,
+    previousPatches,
+    beforeState,
+    afterState,
+  );
+  const redo = mergeHistoryStack(
+    effective.redo,
+    committed.redo,
+    previousPatches,
+    beforeState,
+    afterState,
+  );
+
+  return undo === effective.undo && redo === effective.redo
+    ? effective
+    : { redo, undo };
+}

package/templates/runtime/state/toolcraft-external-store-publication.test.ts

@@ -0,0 +1,135 @@
+import { describe, expect, it, vi } from "vitest";
+
+import { createState } from "./reducer-test-utils";
+import { createToolcraftExternalStore } from "./toolcraft-external-store";
+
+const opacityTarget = "selectedLayer.opacity";
+
+describe("Toolcraft external-store publication atomicity", () => {
+  it("commits without throwing and continues after throwing listeners", () => {
+    const store = createToolcraftExternalStore(createState());
+    const listenerError = new Error("listener failed");
+    const dependencyListenerError = new Error("dependency listener failed");
+    const throwingListener = vi.fn(() => {
+      throw listenerError;
+    });
+    const healthyListener = vi.fn();
+    const throwingDependencyListener = vi.fn(() => {
+      throw dependencyListenerError;
+    });
+    const healthyDependencyListener = vi.fn();
+
+    store.subscribe(throwingListener);
+    store.subscribe(healthyListener);
+    store.subscribeDependencies(
+      [{ kind: "value", target: opacityTarget }],
+      throwingDependencyListener,
+    );
+    store.subscribeDependencies(
+      [{ kind: "value", target: opacityTarget }],
+      healthyDependencyListener,
+    );
+
+    expect(() =>
+      store.dispatch({
+        target: opacityTarget,
+        type: "controls.setValue",
+        value: 40,
+      }),
+    ).not.toThrow();
+
+    expect(store.getCommittedState().values[opacityTarget]).toBe(40);
+    expect(store.getState().values[opacityTarget]).toBe(40);
+    expect(throwingListener).toHaveBeenCalledOnce();
+    expect(healthyListener).toHaveBeenCalledOnce();
+    expect(throwingDependencyListener).toHaveBeenCalledOnce();
+    expect(healthyDependencyListener).toHaveBeenCalledOnce();
+  });
+
+  it("isolates throwing selectors, equalities, and selector listeners", () => {
+    const store = createToolcraftExternalStore(createState());
+    const selectorError = new Error("selector failed");
+    const equalityError = new Error("equality failed");
+    const selectorListenerError = new Error("selector listener failed");
+    const throwingSelectorListener = vi.fn();
+    const throwingEquality = vi.fn(() => {
+      throw equalityError;
+    });
+    const throwingEqualityListener = vi.fn();
+    const throwingSelectorCallback = vi.fn(() => {
+      throw selectorListenerError;
+    });
+    const healthySelectorListener = vi.fn();
+    const unrelatedSelectorListener = vi.fn();
+
+    store.subscribeSelector((state) => {
+      if (state.values[opacityTarget] === 40) {
+        throw selectorError;
+      }
+
+      return state.values[opacityTarget];
+    }, throwingSelectorListener);
+    store.subscribeSelector(
+      (state) => state.values[opacityTarget],
+      throwingEqualityListener,
+      throwingEquality,
+    );
+    store.subscribeSelector(
+      (state) => state.values[opacityTarget],
+      throwingSelectorCallback,
+    );
+    store.subscribeSelector(
+      (state) => state.values[opacityTarget],
+      healthySelectorListener,
+    );
+    store.subscribeSelector(
+      (state) => state.canvas.zoom,
+      unrelatedSelectorListener,
+    );
+
+    expect(() =>
+      store.dispatch({
+        target: opacityTarget,
+        type: "controls.setValue",
+        value: 40,
+      }),
+    ).not.toThrow();
+
+    expect(store.getCommittedState().values[opacityTarget]).toBe(40);
+    expect(throwingSelectorListener).not.toHaveBeenCalled();
+    expect(throwingEquality).toHaveBeenCalledOnce();
+    expect(throwingEqualityListener).not.toHaveBeenCalled();
+    expect(throwingSelectorCallback).toHaveBeenCalledOnce();
+    expect(healthySelectorListener).toHaveBeenCalledOnce();
+    expect(unrelatedSelectorListener).not.toHaveBeenCalled();
+  });
+
+  it("still propagates reducer-side errors before commit", () => {
+    const reducerError = new Error("reducer failed");
+    const baseState = createState();
+    const initialState = {
+      ...baseState,
+      values: new Proxy(baseState.values, {
+        get() {
+          throw reducerError;
+        },
+      }),
+    };
+    const store = createToolcraftExternalStore(initialState);
+    const listener = vi.fn();
+
+    store.subscribe(listener);
+
+    expect(() =>
+      store.dispatch({
+        target: opacityTarget,
+        type: "controls.setValue",
+        value: 40,
+      }),
+    ).toThrow(reducerError);
+
+    expect(store.getCommittedState()).toBe(initialState);
+    expect(store.getState()).toBe(initialState);
+    expect(listener).not.toHaveBeenCalled();
+  });
+});