@pixel-point/toolcraft 0.0.2

package/templates/runtime/state/reducer.test.ts

@@ -0,0 +1,937 @@
+import { describe, expect, it } from "vitest";
+
+import { defineToolcraft } from "../schema/define-toolcraft";
+import { createToolcraftState } from "./create-template-state";
+import { toolcraftReducer } from "./reducer";
+
+function createState() {
+  const app = defineToolcraft({
+    canvas: {
+      enabled: true,
+      size: { width: 1024, height: 768, unit: "px" },
+    },
+    panels: {
+      controls: {
+        sections: [
+          {
+            controls: {
+              opacity: {
+                defaultValue: 75,
+                target: "selectedLayer.opacity",
+                type: "slider",
+              },
+            },
+          },
+        ],
+        title: "Controls",
+      },
+    },
+  });
+
+  return createToolcraftState(app);
+}
+
+describe("toolcraftReducer", () => {
+  it("resets controls to defaults and records history", () => {
+    const changed = toolcraftReducer(createState(), {
+      target: "selectedLayer.opacity",
+      type: "controls.setValue",
+      value: 12,
+    });
+
+    const state = toolcraftReducer(changed, { type: "controls.reset" });
+
+    expect(state.values["selectedLayer.opacity"]).toBe(75);
+    expect(state.history.undo.at(-1)?.label).toBe("Reset controls");
+  });
+
+  it("updates canvas size and records history", () => {
+    const size = { width: 1200, height: 900, unit: "px" } as const;
+
+    const state = toolcraftReducer(createState(), {
+      size,
+      type: "canvas.setSize",
+    });
+
+    expect(state.canvas.size).toEqual(size);
+    expect(state.history.undo.at(-1)?.label).toBe("Resize canvas");
+  });
+
+  it("preserves app-chosen canvas size changes below the app shell minimum", () => {
+    const state = toolcraftReducer(createState(), {
+      size: { width: 640, height: 900, unit: "px" },
+      type: "canvas.setSize",
+    });
+
+    expect(state.canvas.size).toEqual({ width: 640, height: 900, unit: "px" });
+    expect(state.history.undo.at(-1)?.after).toEqual({
+      "canvas.size": { width: 640, height: 900, unit: "px" },
+    });
+  });
+
+  it("routes canvas size control targets through canvas runtime state", () => {
+    const app = defineToolcraft({
+      canvas: {
+        enabled: true,
+        size: { width: 1200, height: 768, unit: "px" },
+      },
+      panels: {
+        controls: {
+          sections: [
+            {
+              controls: {
+                width: {
+                  defaultValue: 1200,
+                  target: "canvas.size.width",
+                  type: "text",
+                },
+              },
+            },
+          ],
+          title: "Controls",
+        },
+      },
+    });
+
+    const changed = toolcraftReducer(createToolcraftState(app), {
+      target: "canvas.size.width",
+      type: "controls.setValue",
+      value: "640",
+    });
+    const reset = toolcraftReducer(changed, { type: "controls.reset" });
+    const undone = toolcraftReducer(changed, { type: "history.undo" });
+    const redone = toolcraftReducer(undone, { type: "history.redo" });
+
+    expect(changed.canvas.size.width).toBe(640);
+    expect(changed.values["canvas.size.width"]).toBe(640);
+    expect(changed.history.undo.at(-1)?.label).toBe("canvas.size.width");
+    expect(reset.canvas.size.width).toBe(1200);
+    expect(reset.values["canvas.size.width"]).toBe(1200);
+    expect(reset.history.undo.at(-1)?.label).toBe("Reset controls");
+    expect(undone.canvas.size.width).toBe(1200);
+    expect(redone.canvas.size.width).toBe(640);
+  });
+
+  it("updates canvas offset without recording history", () => {
+    const state = createState();
+
+    const next = toolcraftReducer(state, {
+      offset: { x: 12, y: -8 },
+      type: "canvas.setOffset",
+    });
+
+    expect(next.canvas.offset).toEqual({ x: 12, y: -8 });
+    expect(next.history.undo).toHaveLength(0);
+  });
+
+  it("pans canvas by a delta", () => {
+    const moved = toolcraftReducer(createState(), {
+      offset: { x: 12, y: -8 },
+      type: "canvas.setOffset",
+    });
+
+    const next = toolcraftReducer(moved, {
+      delta: { x: 3, y: 10 },
+      type: "canvas.panBy",
+    });
+
+    expect(next.canvas.offset).toEqual({ x: 15, y: 2 });
+  });
+
+  it("undoes canvas size changes", () => {
+    const changed = toolcraftReducer(createState(), {
+      size: { width: 1200, height: 900, unit: "px" },
+      type: "canvas.setSize",
+    });
+
+    const state = toolcraftReducer(changed, { type: "history.undo" });
+
+    expect(state.canvas.size).toEqual({ width: 1024, height: 768, unit: "px" });
+    expect(state.values).not.toHaveProperty("canvas.size");
+  });
+
+  it("redoes canvas size changes", () => {
+    const changed = toolcraftReducer(createState(), {
+      size: { width: 1200, height: 900, unit: "px" },
+      type: "canvas.setSize",
+    });
+
+    const undone = toolcraftReducer(changed, { type: "history.undo" });
+    const state = toolcraftReducer(undone, { type: "history.redo" });
+
+    expect(state.canvas.size).toEqual({ width: 1200, height: 900, unit: "px" });
+    expect(state.values).not.toHaveProperty("canvas.size");
+  });
+
+  it("zooms in, out, and resets", () => {
+    let state = createState();
+
+    state = toolcraftReducer(state, { type: "canvas.zoomOut" });
+    state = toolcraftReducer(state, { type: "canvas.zoomOut" });
+    state = toolcraftReducer(state, { type: "canvas.zoomIn" });
+
+    expect(state.canvas.zoom).toBe(60);
+
+    state = toolcraftReducer(state, { type: "canvas.zoomReset" });
+
+    expect(state.canvas.zoom).toBe(70);
+  });
+
+  it("sets viewport zoom and offset for gesture zoom", () => {
+    const state = toolcraftReducer(createState(), {
+      offset: { x: -100, y: 24 },
+      type: "canvas.setViewport",
+      zoom: 999,
+    });
+
+    expect(state.canvas.offset).toEqual({ x: -100, y: 24 });
+    expect(state.canvas.zoom).toBe(400);
+  });
+
+  it("updates panel offsets without changing control values", () => {
+    const state = createState();
+
+    const next = toolcraftReducer(state, {
+      offset: { x: 24, y: -12 },
+      panelId: "controls",
+      type: "panels.setOffset",
+    });
+
+    expect(next.panels.controls.offset).toEqual({ x: 24, y: -12 });
+    expect(next.values).toBe(state.values);
+  });
+
+  it("resets a panel offset to its default position", () => {
+    const moved = toolcraftReducer(createState(), {
+      offset: { x: 40, y: 80 },
+      panelId: "controls",
+      type: "panels.setOffset",
+    });
+
+    const next = toolcraftReducer(moved, {
+      panelId: "controls",
+      type: "panels.resetOffset",
+    });
+
+    expect(next.panels.controls.offset).toEqual({ x: 0, y: 0 });
+  });
+
+  it("imports media as an editable-canvas-sized layer and records history", () => {
+    const state = createState();
+
+    const next = toolcraftReducer(state, {
+      asset: {
+        dataUrl: "data:image/png;base64,test",
+        fileName: "material.png",
+        mimeType: "image/png",
+        position: { x: 10, y: 20 },
+        size: state.canvas.size,
+      },
+      type: "media.import",
+    });
+
+    expect(next.layers).toEqual([
+      {
+        displayName: "material",
+        id: "layer-1",
+        kind: "layer",
+        name: "material",
+        visible: true,
+      },
+    ]);
+    expect(next.mediaAssets).toEqual([
+      {
+        dataUrl: "data:image/png;base64,test",
+        fileName: "material.png",
+        id: "media-1",
+        layerId: "layer-1",
+        mimeType: "image/png",
+        position: { x: 10, y: 20 },
+        size: state.canvas.size,
+      },
+    ]);
+    expect(next.selectedLayerId).toBe("layer-1");
+    expect(next.history.undo.at(-1)?.label).toBe("Import media");
+  });
+
+  it("deletes imported media without deleting the owning layer", () => {
+    const state = toolcraftReducer(createState(), {
+      asset: {
+        dataUrl: "data:image/png;base64,test",
+        fileName: "material.png",
+        mimeType: "image/png",
+        position: { x: 10, y: 20 },
+        size: { height: 512, unit: "px", width: 512 },
+      },
+      type: "media.import",
+    });
+
+    const next = toolcraftReducer(state, {
+      mediaId: "media-1",
+      type: "media.delete",
+    });
+
+    expect(next.layers).toEqual(state.layers);
+    expect(next.selectedLayerId).toBe("layer-1");
+    expect(next.mediaAssets).toEqual([]);
+    expect(next.history.undo.at(-1)?.label).toBe("Delete media");
+  });
+
+  it("sizes intrinsic media apps from the imported image and replaces single-layer media", () => {
+    const app = defineToolcraft({
+      canvas: { enabled: true, upload: true },
+      panels: {},
+    });
+    const state = createToolcraftState(app);
+    const first = toolcraftReducer(state, {
+      asset: {
+        dataUrl: "data:image/png;base64,first",
+        fileName: "first.png",
+        mimeType: "image/png",
+        position: { x: 42, y: 24 },
+        size: { height: 600, unit: "px", width: 800 },
+      },
+      type: "media.import",
+    });
+    const second = toolcraftReducer(first, {
+      asset: {
+        dataUrl: "data:image/png;base64,second",
+        fileName: "second.png",
+        mimeType: "image/png",
+        position: { x: -20, y: 10 },
+        size: { height: 720, unit: "px", width: 1280 },
+      },
+      type: "media.import",
+    });
+
+    expect(first.canvas.size).toEqual({ height: 600, unit: "px", width: 800 });
+    expect(first.mediaAssets[0]).toMatchObject({
+      fileName: "first.png",
+      position: { x: 0, y: 0 },
+      size: { height: 600, unit: "px", width: 800 },
+    });
+    expect(first.history.undo.at(-1)?.after).toMatchObject({
+      "canvas.size": { height: 600, unit: "px", width: 800 },
+    });
+    expect(second.canvas.size).toEqual({ height: 720, unit: "px", width: 1280 });
+    expect(second.layers).toHaveLength(1);
+    expect(second.mediaAssets).toHaveLength(1);
+    expect(second.mediaAssets[0]).toMatchObject({
+      fileName: "second.png",
+      id: "media-1",
+      layerId: "layer-1",
+      position: { x: 0, y: 0 },
+      size: { height: 720, unit: "px", width: 1280 },
+    });
+  });
+
+  it("adds and selects runtime layers and groups", () => {
+    const withGroup = toolcraftReducer(createState(), {
+      layer: {
+        displayName: "Scene Group",
+        id: "group-1",
+        kind: "group",
+        name: "scene-group",
+      },
+      type: "layers.add",
+    });
+    const state = toolcraftReducer(withGroup, {
+      insertIndex: 1,
+      layer: {
+        displayName: "Layer 1",
+        id: "layer-1",
+        name: "layer-1",
+        parentGroupId: "group-1",
+      },
+      type: "layers.add",
+    });
+
+    expect(state.layers).toEqual([
+      {
+        collapsed: false,
+        displayName: "Scene Group",
+        id: "group-1",
+        kind: "group",
+        name: "scene-group",
+        parentGroupId: undefined,
+        visible: true,
+      },
+      {
+        collapsed: undefined,
+        displayName: "Layer 1",
+        id: "layer-1",
+        kind: "layer",
+        name: "layer-1",
+        parentGroupId: "group-1",
+        visible: true,
+      },
+    ]);
+    expect(state.selectedLayerId).toBe("layer-1");
+  });
+
+  it("renames layers and toggles visibility and collapsed groups", () => {
+    const withGroup = toolcraftReducer(createState(), {
+      layer: { id: "group-1", kind: "group", name: "Scene Group" },
+      type: "layers.add",
+    });
+    const hidden = toolcraftReducer(withGroup, {
+      layerId: "group-1",
+      type: "layers.toggleVisibility",
+    });
+    const collapsed = toolcraftReducer(hidden, {
+      layerId: "group-1",
+      type: "layers.toggleCollapsed",
+    });
+    const renamed = toolcraftReducer(collapsed, {
+      layerId: "group-1",
+      name: "Main Scene",
+      type: "layers.rename",
+    });
+
+    expect(renamed.layers[0]).toMatchObject({
+      collapsed: true,
+      displayName: "Main Scene",
+      visible: false,
+    });
+    expect(renamed.history.undo.at(-1)?.label).toBe("Rename layer");
+  });
+
+  it("deletes groups with their children", () => {
+    const withGroup = toolcraftReducer(createState(), {
+      layer: { id: "group-1", kind: "group", name: "Group 1" },
+      type: "layers.add",
+    });
+    const withChild = toolcraftReducer(withGroup, {
+      layer: { id: "layer-1", name: "Layer 1", parentGroupId: "group-1" },
+      type: "layers.add",
+    });
+    const withSibling = toolcraftReducer(withChild, {
+      layer: { id: "layer-2", name: "Layer 2" },
+      type: "layers.add",
+    });
+
+    const state = toolcraftReducer(withSibling, {
+      layerId: "group-1",
+      type: "layers.delete",
+    });
+
+    expect(state.layers.map((layer) => layer.id)).toEqual(["layer-2"]);
+    expect(state.selectedLayerId).toBe("layer-2");
+  });
+
+  it("deletes nested groups with every descendant layer", () => {
+    let state = createState();
+
+    state = toolcraftReducer(state, {
+      layer: { id: "group-1", kind: "group", name: "Group 1" },
+      type: "layers.add",
+    });
+    state = toolcraftReducer(state, {
+      layer: { id: "group-2", kind: "group", name: "Group 2", parentGroupId: "group-1" },
+      type: "layers.add",
+    });
+    state = toolcraftReducer(state, {
+      layer: { id: "layer-1", name: "Layer 1", parentGroupId: "group-2" },
+      type: "layers.add",
+    });
+    state = toolcraftReducer(state, {
+      layer: { id: "layer-2", name: "Layer 2" },
+      type: "layers.add",
+    });
+
+    const deleted = toolcraftReducer(state, {
+      layerId: "group-1",
+      type: "layers.delete",
+    });
+
+    expect(deleted.layers.map((layer) => layer.id)).toEqual(["layer-2"]);
+    expect(deleted.selectedLayerId).toBe("layer-2");
+  });
+
+  it("deletes media assets attached to a layer", () => {
+    const imported = toolcraftReducer(createState(), {
+      asset: {
+        dataUrl: "data:image/png;base64,test",
+        fileName: "material.png",
+        mimeType: "image/png",
+        position: { x: 0, y: 0 },
+        size: { width: 1024, height: 768, unit: "px" },
+      },
+      type: "media.import",
+    });
+
+    const state = toolcraftReducer(imported, {
+      layerId: "layer-1",
+      type: "layers.delete",
+    });
+
+    expect(state.layers).toEqual([]);
+    expect(state.mediaAssets).toEqual([]);
+    expect(state.selectedLayerId).toBeNull();
+  });
+
+  it("moves layers into groups and back to root", () => {
+    const withGroup = toolcraftReducer(createState(), {
+      layer: { id: "group-1", kind: "group", name: "Group 1" },
+      type: "layers.add",
+    });
+    const withLayer = toolcraftReducer(withGroup, {
+      layer: { id: "layer-1", name: "Layer 1" },
+      type: "layers.add",
+    });
+
+    const grouped = toolcraftReducer(withLayer, {
+      layerIds: ["layer-1"],
+      parentGroupId: "group-1",
+      type: "layers.moveToGroup",
+    });
+    const rooted = toolcraftReducer(grouped, {
+      layerIds: ["layer-1"],
+      parentGroupId: null,
+      type: "layers.moveToGroup",
+    });
+
+    expect(grouped.layers.find((layer) => layer.id === "layer-1")?.parentGroupId).toBe("group-1");
+    expect(grouped.history.undo.at(-1)?.label).toBe("Move layers to group");
+    expect(rooted.layers.find((layer) => layer.id === "layer-1")?.parentGroupId).toBeUndefined();
+    expect(rooted.history.undo.at(-1)?.label).toBe("Move layers to root");
+  });
+
+  it("opens collapsed groups when moving layers into them", () => {
+    const withGroup = toolcraftReducer(createState(), {
+      layer: { id: "group-1", kind: "group", name: "Group 1" },
+      type: "layers.add",
+    });
+    const withCollapsedGroup = toolcraftReducer(withGroup, {
+      layerId: "group-1",
+      type: "layers.toggleCollapsed",
+    });
+    const withLayer = toolcraftReducer(withCollapsedGroup, {
+      layer: { id: "layer-1", name: "Layer 1" },
+      type: "layers.add",
+    });
+
+    const grouped = toolcraftReducer(withLayer, {
+      layerIds: ["layer-1"],
+      parentGroupId: "group-1",
+      type: "layers.moveToGroup",
+    });
+
+    expect(grouped.layers.find((layer) => layer.id === "group-1")?.collapsed).toBe(false);
+    expect(grouped.layers.find((layer) => layer.id === "layer-1")?.parentGroupId).toBe("group-1");
+  });
+
+  it("places moved layers directly under the target group", () => {
+    const withFirst = toolcraftReducer(createState(), {
+      layer: { id: "layer-1", name: "Layer 1" },
+      type: "layers.add",
+    });
+    const withGroup = toolcraftReducer(withFirst, {
+      layer: { id: "group-1", kind: "group", name: "Group 1" },
+      type: "layers.add",
+    });
+    const withExistingChild = toolcraftReducer(withGroup, {
+      layer: { id: "layer-2", name: "Layer 2", parentGroupId: "group-1" },
+      type: "layers.add",
+    });
+    const withDraggedLayer = toolcraftReducer(withExistingChild, {
+      layer: { id: "layer-3", name: "Layer 3" },
+      type: "layers.add",
+    });
+
+    const state = toolcraftReducer(withDraggedLayer, {
+      layerIds: ["layer-3"],
+      parentGroupId: "group-1",
+      type: "layers.moveToGroup",
+    });
+
+    expect(state.layers.map((layer) => layer.id)).toEqual([
+      "layer-1",
+      "group-1",
+      "layer-3",
+      "layer-2",
+    ]);
+    expect(state.layers.find((layer) => layer.id === "layer-3")?.parentGroupId).toBe("group-1");
+  });
+
+  it("does not move groups into their own descendants", () => {
+    const withParent = toolcraftReducer(createState(), {
+      layer: { id: "group-1", kind: "group", name: "Group 1" },
+      type: "layers.add",
+    });
+    const withChild = toolcraftReducer(withParent, {
+      layer: { id: "group-2", kind: "group", name: "Group 2", parentGroupId: "group-1" },
+      type: "layers.add",
+    });
+
+    const state = toolcraftReducer(withChild, {
+      layerIds: ["group-1"],
+      parentGroupId: "group-2",
+      type: "layers.moveToGroup",
+    });
+
+    expect(state).toBe(withChild);
+  });
+
+  it("reorders layers and supports undo and redo", () => {
+    const withFirst = toolcraftReducer(createState(), {
+      layer: { id: "layer-1", name: "Layer 1" },
+      type: "layers.add",
+    });
+    const withSecond = toolcraftReducer(withFirst, {
+      layer: { id: "layer-2", name: "Layer 2" },
+      type: "layers.add",
+    });
+    const reordered = toolcraftReducer(withSecond, {
+      layers: [withSecond.layers[1]!, withSecond.layers[0]!],
+      selectedLayerId: "layer-1",
+      type: "layers.reorder",
+    });
+    const undone = toolcraftReducer(reordered, { type: "history.undo" });
+    const redone = toolcraftReducer(undone, { type: "history.redo" });
+
+    expect(reordered.layers.map((layer) => layer.id)).toEqual(["layer-2", "layer-1"]);
+    expect(reordered.selectedLayerId).toBe("layer-1");
+    expect(undone.layers.map((layer) => layer.id)).toEqual(["layer-1", "layer-2"]);
+    expect(redone.layers.map((layer) => layer.id)).toEqual(["layer-2", "layer-1"]);
+  });
+
+  it("preserves nested move undo and redo", () => {
+    let state = createState();
+
+    state = toolcraftReducer(state, {
+      layer: { id: "group-1", kind: "group", name: "Group 1" },
+      type: "layers.add",
+    });
+    state = toolcraftReducer(state, {
+      layer: { id: "group-2", kind: "group", name: "Group 2" },
+      type: "layers.add",
+    });
+    state = toolcraftReducer(state, {
+      layer: { id: "layer-1", name: "Layer 1", parentGroupId: "group-1" },
+      type: "layers.add",
+    });
+
+    const moved = toolcraftReducer(state, {
+      layerIds: ["layer-1"],
+      parentGroupId: "group-2",
+      type: "layers.moveToGroup",
+    });
+    const undone = toolcraftReducer(moved, { type: "history.undo" });
+    const redone = toolcraftReducer(undone, { type: "history.redo" });
+
+    expect(moved.layers.find((layer) => layer.id === "layer-1")?.parentGroupId).toBe("group-2");
+    expect(undone.layers.find((layer) => layer.id === "layer-1")?.parentGroupId).toBe("group-1");
+    expect(redone.layers.find((layer) => layer.id === "layer-1")?.parentGroupId).toBe("group-2");
+  });
+
+  it("undoes and redoes media imports", () => {
+    const imported = toolcraftReducer(createState(), {
+      asset: {
+        dataUrl: "data:image/png;base64,test",
+        fileName: "material.png",
+        mimeType: "image/png",
+        position: { x: 10, y: 20 },
+        size: { width: 1024, height: 768, unit: "px" },
+      },
+      type: "media.import",
+    });
+
+    const undone = toolcraftReducer(imported, { type: "history.undo" });
+    const redone = toolcraftReducer(undone, { type: "history.redo" });
+
+    expect(undone.layers).toEqual([]);
+    expect(undone.mediaAssets).toEqual([]);
+    expect(undone.selectedLayerId).toBeNull();
+    expect(redone.layers).toHaveLength(1);
+    expect(redone.mediaAssets).toHaveLength(1);
+    expect(redone.selectedLayerId).toBe("layer-1");
+  });
+
+  it("undoes and redoes value changes", () => {
+    const changed = toolcraftReducer(createState(), {
+      target: "selectedLayer.opacity",
+      type: "controls.setValue",
+      value: 12,
+    });
+
+    const undone = toolcraftReducer(changed, { type: "history.undo" });
+    const redone = toolcraftReducer(undone, { type: "history.redo" });
+
+    expect(undone.values["selectedLayer.opacity"]).toBe(75);
+    expect(redone.values["selectedLayer.opacity"]).toBe(12);
+  });
+
+  it("merges live control changes from one editor gesture into one undo step", () => {
+    const base = createState();
+    const first = toolcraftReducer(base, {
+      history: "merge",
+      historyGroup: "opacity-drag-1",
+      target: "selectedLayer.opacity",
+      type: "controls.setValue",
+      value: 76,
+    });
+    const second = toolcraftReducer(first, {
+      history: "merge",
+      historyGroup: "opacity-drag-1",
+      target: "selectedLayer.opacity",
+      type: "controls.setValue",
+      value: 82,
+    });
+    const third = toolcraftReducer(second, {
+      history: "merge",
+      historyGroup: "opacity-drag-1",
+      target: "selectedLayer.opacity",
+      type: "controls.setValue",
+      value: 91,
+    });
+
+    expect(third.values["selectedLayer.opacity"]).toBe(91);
+    expect(third.history.undo).toHaveLength(1);
+    expect(third.history.undo[0]).toMatchObject({
+      after: { "selectedLayer.opacity": 91 },
+      before: { "selectedLayer.opacity": 75 },
+      group: "opacity-drag-1",
+    });
+
+    const undone = toolcraftReducer(third, { type: "history.undo" });
+    const redone = toolcraftReducer(undone, { type: "history.redo" });
+
+    expect(undone.values["selectedLayer.opacity"]).toBe(75);
+    expect(redone.values["selectedLayer.opacity"]).toBe(91);
+  });
+
+  it("starts a new undo step for a new live gesture on the same control", () => {
+    const firstGesture = toolcraftReducer(createState(), {
+      history: "merge",
+      historyGroup: "opacity-drag-1",
+      target: "selectedLayer.opacity",
+      type: "controls.setValue",
+      value: 82,
+    });
+    const secondGesture = toolcraftReducer(firstGesture, {
+      history: "merge",
+      historyGroup: "opacity-drag-2",
+      target: "selectedLayer.opacity",
+      type: "controls.setValue",
+      value: 64,
+    });
+
+    expect(secondGesture.history.undo).toHaveLength(2);
+    expect(secondGesture.history.undo[0]?.before).toEqual({
+      "selectedLayer.opacity": 75,
+    });
+    expect(secondGesture.history.undo[0]?.after).toEqual({
+      "selectedLayer.opacity": 82,
+    });
+    expect(secondGesture.history.undo[1]?.before).toEqual({
+      "selectedLayer.opacity": 82,
+    });
+    expect(secondGesture.history.undo[1]?.after).toEqual({
+      "selectedLayer.opacity": 64,
+    });
+  });
+
+  it("updates timeline playback state without recording history", () => {
+    const paused = toolcraftReducer(createState(), { type: "timeline.togglePlayback" });
+    const loopDisabled = toolcraftReducer(paused, { type: "timeline.toggleLoop" });
+    const scrubbed = toolcraftReducer(loopDisabled, {
+      currentTimeSeconds: 4.25,
+      type: "timeline.setCurrentTime",
+    });
+
+    expect(scrubbed.timeline.isPlaying).toBe(false);
+    expect(scrubbed.timeline.isLooping).toBe(false);
+    expect(scrubbed.timeline.currentTimeSeconds).toBe(4.25);
+    expect(scrubbed.history.undo).toHaveLength(0);
+  });
+
+  it("restarts playback from the beginning when play is pressed at the non-looping end", () => {
+    const paused = toolcraftReducer(createState(), { type: "timeline.togglePlayback" });
+    const loopDisabled = toolcraftReducer(paused, { type: "timeline.toggleLoop" });
+    const ended = toolcraftReducer(loopDisabled, {
+      currentTimeSeconds: loopDisabled.timeline.durationSeconds,
+      type: "timeline.setCurrentTime",
+    });
+    const replaying = toolcraftReducer(ended, { type: "timeline.togglePlayback" });
+
+    expect(replaying.timeline.currentTimeSeconds).toBe(0);
+    expect(replaying.timeline.isPlaying).toBe(true);
+    expect(replaying.history.undo).toHaveLength(0);
+  });
+
+  it("pauses and resets upload-dependent timeline playback when deleting the last media asset", () => {
+    const app = defineToolcraft({
+      canvas: {
+        enabled: true,
+        sizing: { mode: "intrinsic-media" },
+        upload: true,
+      },
+      panels: {
+        timeline: { mode: "playback" },
+      },
+    });
+    const state = createToolcraftState(app, {
+      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 },
+        },
+      ],
+      timeline: {
+        currentTimeSeconds: 3.5,
+        isPlaying: true,
+      },
+    });
+
+    const deleted = toolcraftReducer(state, {
+      mediaId: "media-1",
+      type: "media.delete",
+    });
+
+    expect(deleted.mediaAssets).toEqual([]);
+    expect(deleted.timeline.currentTimeSeconds).toBe(0);
+    expect(deleted.timeline.isPlaying).toBe(false);
+    expect(deleted.history.undo.at(-1)?.after).toMatchObject({
+      mediaAssets: [],
+      timeline: expect.objectContaining({
+        currentTimeSeconds: 0,
+        isPlaying: false,
+      }),
+    });
+  });
+
+  it("stores timeline expanded state without recording history", () => {
+    const expanded = toolcraftReducer(createState(), {
+      expanded: true,
+      type: "timeline.setExpanded",
+    });
+    const collapsed = toolcraftReducer(expanded, { type: "timeline.toggleExpanded" });
+
+    expect(expanded.timeline.expanded).toBe(true);
+    expect(expanded.history.undo).toHaveLength(0);
+    expect(collapsed.timeline.expanded).toBe(false);
+    expect(collapsed.history.undo).toHaveLength(0);
+  });
+
+  it("adds, updates, and removes control-owned timeline keyframes", () => {
+    const baseState = createState();
+    const emptyTimelineState = {
+      ...baseState,
+      timeline: {
+        ...baseState.timeline,
+        currentTimeSeconds: 2,
+        expanded: false,
+        keyframeGroups: [],
+        selectedKeyframeId: null,
+      },
+    };
+    const keyed = toolcraftReducer(emptyTimelineState, {
+      controlId: "selectedLayer.opacity",
+      controlLabel: "Opacity",
+      type: "timeline.toggleControlKeyframes",
+      value: 75,
+      valueLabel: "75%",
+    });
+
+    expect(keyed.timeline.expanded).toBe(true);
+    expect(keyed.timeline.selectedKeyframeId).toBe("selectedLayer.opacity::2");
+    expect(keyed.timeline.keyframeGroups).toEqual([
+      {
+        controlId: "selectedLayer.opacity",
+        keyframes: [
+          {
+            controlId: "selectedLayer.opacity",
+            controlLabel: "Opacity",
+            id: "selectedLayer.opacity::2",
+            timeSeconds: 2,
+            value: 75,
+            valueLabel: "75%",
+          },
+        ],
+        label: "Opacity",
+      },
+    ]);
+    expect(keyed.history.undo.at(-1)?.label).toBe("Add control keyframe");
+
+    const updated = toolcraftReducer(keyed, {
+      controlId: "selectedLayer.opacity",
+      controlLabel: "Opacity",
+      type: "timeline.upsertControlKeyframe",
+      value: 55,
+      valueLabel: "55%",
+    });
+
+    expect(updated.timeline.keyframeGroups[0]?.keyframes).toHaveLength(1);
+    expect(updated.timeline.keyframeGroups[0]?.keyframes[0]?.valueLabel).toBe("55%");
+    expect(updated.timeline.keyframeGroups[0]?.keyframes[0]?.value).toBe(55);
+    expect(updated.history.undo.at(-1)?.label).toBe("Set control keyframe");
+
+    const removed = toolcraftReducer(updated, {
+      controlId: "selectedLayer.opacity",
+      controlLabel: "Opacity",
+      type: "timeline.toggleControlKeyframes",
+      value: 55,
+      valueLabel: "55%",
+    });
+
+    expect(removed.timeline.keyframeGroups).toEqual([]);
+    expect(removed.timeline.selectedKeyframeId).toBeNull();
+    expect(removed.history.undo.at(-1)?.label).toBe("Delete control keyframes");
+  });
+
+  it("records timeline keyframe edits in history", () => {
+    const baseState = createState();
+    const stateWithKeyframe = {
+      ...baseState,
+      timeline: {
+        ...baseState.timeline,
+        keyframeGroups: [
+          {
+            controlId: "opacity",
+            keyframes: [
+              {
+                controlId: "opacity",
+                controlLabel: "Opacity",
+                id: "opacity-0.75",
+                timeSeconds: 0.75,
+                valueLabel: "Opacity 20%",
+              },
+            ],
+            label: "Opacity",
+          },
+        ],
+      },
+    };
+    const moved = toolcraftReducer(stateWithKeyframe, {
+      keyframeId: "opacity-0.75",
+      timeSeconds: 2,
+      type: "timeline.moveKeyframe",
+    });
+    const undone = toolcraftReducer(moved, { type: "history.undo" });
+    const redone = toolcraftReducer(undone, { type: "history.redo" });
+
+    expect(moved.timeline.selectedKeyframeId).toBe("opacity::2");
+    expect(
+      moved.timeline.keyframeGroups
+        .flatMap((group) => group.keyframes)
+        .find((keyframe) => keyframe.id === "opacity::2")?.timeSeconds,
+    ).toBe(2);
+    expect(moved.history.undo.at(-1)?.label).toBe("Move keyframe");
+    expect(
+      undone.timeline.keyframeGroups
+        .flatMap((group) => group.keyframes)
+        .some((keyframe) => keyframe.id === "opacity-0.75"),
+    ).toBe(true);
+    expect(
+      redone.timeline.keyframeGroups
+        .flatMap((group) => group.keyframes)
+        .some((keyframe) => keyframe.id === "opacity::2"),
+    ).toBe(true);
+  });
+});