@pixel-point/toolcraft 0.0.6 → 0.0.8

package/templates/runtime/schema/types.ts

@@ -95,6 +95,7 @@ export type ToolcraftAssemblyCommand =
   | "canvas.zoomReset"
   | "controls.apply"
   | "controls.reset"
+  | "controls.resetTargets"
   | "controls.setValue"
   | "history.redo"
   | "history.undo"
@@ -108,6 +109,7 @@ export type ToolcraftAssemblyCommand =
   | "layers.toggleVisibility"
   | "media.delete"
   | "media.import"
+  | "media.reorder"
   | "panels.resetOffset"
   | "panels.setOffset"
   | "timeline.changeKeyframeEasing"
@@ -272,6 +274,8 @@ export type ToolcraftControlPerformanceRole =
   | "responsiveness"
   | "workload";
 
+export type ToolcraftFileDropAssetKind = "file" | "image";
+
 export type ToolcraftControlConditionSchema = {
   equals?: unknown;
   greaterThan?: number;
@@ -292,6 +296,20 @@ export type ToolcraftColorOpacityValueSchema = {
   opacity?: number;
 };
 
+export type ToolcraftCollectionItemControlSchema = {
+  commitMode?: "content" | "setting";
+  defaultValue?: unknown;
+  label?: boolean | string;
+  markerCount?: number;
+  max?: number;
+  min?: number;
+  options?: readonly { label: string; value: string }[];
+  step?: number;
+  type: string;
+  unit?: string;
+  variant?: string;
+};
+
 export type ToolcraftFontPickerValueSchema = {
   color?: string;
   fontId: string;
@@ -308,23 +326,32 @@ export type ToolcraftCurveInterpolation = "monotone" | "smooth";
 export type ToolcraftControlSchema = {
   accept?: string;
   actions?: readonly (ToolcraftActionSchema | string)[];
+  assetKind?: ToolcraftFileDropAssetKind;
+  addLabel?: string;
   commitMode?: "content" | "setting";
   defaultValue?: unknown;
   description?: string;
   disabled?: boolean;
   disabledWhen?: ToolcraftControlDisabledConditionSchema;
+  hardMaxItems?: number;
   interpolation?: ToolcraftCurveInterpolation;
   items?: readonly ToolcraftImagePickerItemSchema[];
+  itemControl?: ToolcraftCollectionItemControlSchema;
+  itemDefaultValue?: unknown;
+  itemLabel?: string;
   keyframeable?: boolean;
   label?: boolean | string;
   markerCount?: number;
   max?: number;
   min?: number;
+  minItems?: number;
   multiple?: boolean;
   orderRole?: ToolcraftControlOrderRole;
   performanceReason?: string;
   performanceRole?: ToolcraftControlPerformanceRole;
   options?: readonly { label: string; value: string }[];
+  recommendedMaxItems?: number;
+  removeLabel?: string;
   step?: number;
   target: string;
   type: string;

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

@@ -45,6 +45,260 @@ describe("toolcraftReducer", () => {
     expect(state.history.undo.at(-1)?.label).toBe("Reset controls");
   });
 
+  it("resets selected control targets to defaults and records one history patch", () => {
+    const app = defineToolcraft({
+      canvas: { enabled: false },
+      panels: {
+        controls: {
+          sections: [
+            {
+              controls: {
+                contrast: {
+                  defaultValue: 22,
+                  target: "style.contrast",
+                  type: "slider",
+                },
+                opacity: {
+                  defaultValue: 75,
+                  target: "selectedLayer.opacity",
+                  type: "slider",
+                },
+              },
+              title: "Tone",
+            },
+          ],
+          title: "Controls",
+        },
+      },
+    });
+    const changedOpacity = toolcraftReducer(createToolcraftState(app), {
+      target: "selectedLayer.opacity",
+      type: "controls.setValue",
+      value: 12,
+    });
+    const changedBoth = toolcraftReducer(changedOpacity, {
+      target: "style.contrast",
+      type: "controls.setValue",
+      value: 9,
+    });
+
+    const state = toolcraftReducer(changedBoth, {
+      label: "Reset Tone section",
+      targets: ["selectedLayer.opacity"],
+      type: "controls.resetTargets",
+    });
+
+    expect(state.values["selectedLayer.opacity"]).toBe(75);
+    expect(state.values["style.contrast"]).toBe(9);
+    expect(state.history.undo).toHaveLength(3);
+    expect(state.history.undo.at(-1)).toMatchObject({
+      after: { "selectedLayer.opacity": 75 },
+      before: { "selectedLayer.opacity": 12 },
+      label: "Reset Tone section",
+    });
+  });
+
+  it("clears single-layer fileDrop media on global reset", () => {
+    const app = defineToolcraft({
+      canvas: { enabled: true, upload: true },
+      panels: {
+        controls: {
+          sections: [
+            {
+              controls: {
+                source: {
+                  defaultValue: null,
+                  target: "media.source",
+                  type: "fileDrop",
+                },
+              },
+              title: "Source",
+            },
+          ],
+          title: "Controls",
+        },
+      },
+    });
+    const imported = toolcraftReducer(createToolcraftState(app), {
+      asset: {
+        dataUrl: "data:image/png;base64,test",
+        fileName: "source.png",
+        mimeType: "image/png",
+        position: { x: 0, y: 0 },
+        size: { height: 768, unit: "px", width: 1024 },
+        sourceTarget: "media.source",
+      },
+      type: "media.import",
+    });
+
+    const state = toolcraftReducer(imported, { type: "controls.reset" });
+    const undone = toolcraftReducer(state, { type: "history.undo" });
+    const redone = toolcraftReducer(undone, { type: "history.redo" });
+
+    expect(imported.mediaAssets).toHaveLength(1);
+    expect(state.mediaAssets).toEqual([]);
+    expect(state.values["media.source"]).toBeNull();
+    expect(undone.mediaAssets).toEqual(imported.mediaAssets);
+    expect(redone.mediaAssets).toEqual([]);
+    expect(state.history.undo.at(-1)).toMatchObject({
+      after: { mediaAssets: [] },
+      before: { mediaAssets: imported.mediaAssets },
+      label: "Reset controls",
+    });
+  });
+
+  it("stores arbitrary fileDrop media without image dimensions and clears it on reset", () => {
+    const app = defineToolcraft({
+      canvas: { enabled: true, upload: true },
+      panels: {
+        controls: {
+          sections: [
+            {
+              controls: {
+                source: {
+                  assetKind: "file",
+                  defaultValue: null,
+                  target: "files.source",
+                  type: "fileDrop",
+                },
+              },
+              title: "Files",
+            },
+          ],
+          title: "Controls",
+        },
+      },
+    });
+    const imported = toolcraftReducer(createToolcraftState(app), {
+      asset: {
+        assetKind: "file",
+        dataUrl: "data:text/plain;base64,aGVsbG8=",
+        fileName: "notes.txt",
+        mimeType: "text/plain",
+        position: { x: 0, y: 0 },
+        sourceTarget: "files.source",
+      },
+      type: "media.import",
+    });
+
+    const state = toolcraftReducer(imported, { type: "controls.reset" });
+
+    expect(imported.mediaAssets).toHaveLength(1);
+    expect(imported.mediaAssets[0]).toMatchObject({
+      assetKind: "file",
+      fileName: "notes.txt",
+      sourceTarget: "files.source",
+    });
+    expect(imported.mediaAssets[0]?.size).toBeUndefined();
+    expect(imported.canvas.size).toEqual(createToolcraftState(app).canvas.size);
+    expect(state.mediaAssets).toEqual([]);
+  });
+
+  it("clears only selected fileDrop media on section reset", () => {
+    const app = defineToolcraft({
+      canvas: { enabled: true, upload: true },
+      panels: {
+        controls: {
+          sections: [
+            {
+              controls: {
+                primary: {
+                  defaultValue: null,
+                  target: "media.primary",
+                  type: "fileDrop",
+                },
+                secondary: {
+                  defaultValue: null,
+                  target: "media.secondary",
+                  type: "fileDrop",
+                },
+              },
+              title: "Sources",
+            },
+          ],
+          title: "Controls",
+        },
+      },
+    });
+    const first = toolcraftReducer(createToolcraftState(app), {
+      asset: {
+        dataUrl: "data:image/png;base64,primary",
+        fileName: "primary.png",
+        mimeType: "image/png",
+        position: { x: 0, y: 0 },
+        size: { height: 768, unit: "px", width: 1024 },
+        sourceTarget: "media.primary",
+      },
+      replaceExisting: false,
+      type: "media.import",
+    });
+    const second = toolcraftReducer(first, {
+      asset: {
+        dataUrl: "data:image/png;base64,secondary",
+        fileName: "secondary.png",
+        mimeType: "image/png",
+        position: { x: 0, y: 0 },
+        size: { height: 768, unit: "px", width: 1024 },
+        sourceTarget: "media.secondary",
+      },
+      replaceExisting: false,
+      type: "media.import",
+    });
+
+    const state = toolcraftReducer(second, {
+      label: "Reset Primary section",
+      targets: ["media.primary"],
+      type: "controls.resetTargets",
+    });
+
+    expect(state.mediaAssets).toHaveLength(1);
+    expect(state.mediaAssets[0]?.fileName).toBe("secondary.png");
+    expect(state.history.undo.at(-1)).toMatchObject({
+      after: { mediaAssets: state.mediaAssets },
+      before: { mediaAssets: second.mediaAssets },
+      label: "Reset Primary section",
+    });
+  });
+
+  it("keeps layer-owned media on global reset", () => {
+    const app = defineToolcraft({
+      canvas: { enabled: true, upload: true },
+      panels: {
+        controls: {
+          sections: [
+            {
+              controls: {
+                source: {
+                  defaultValue: null,
+                  target: "media.source",
+                  type: "fileDrop",
+                },
+              },
+              title: "Source",
+            },
+          ],
+          title: "Controls",
+        },
+        layers: true,
+      },
+    });
+    const imported = toolcraftReducer(createToolcraftState(app), {
+      asset: {
+        dataUrl: "data:image/png;base64,test",
+        fileName: "source.png",
+        mimeType: "image/png",
+        position: { x: 0, y: 0 },
+        size: { height: 768, unit: "px", width: 1024 },
+        sourceTarget: "media.source",
+      },
+      type: "media.import",
+    });
+
+    const state = toolcraftReducer(imported, { type: "controls.reset" });
+
+    expect(state.mediaAssets).toEqual(imported.mediaAssets);
+  });
+
   it("updates canvas size and records history", () => {
     const size = { width: 1200, height: 900, unit: "px" } as const;
 
@@ -458,6 +712,109 @@ describe("toolcraftReducer", () => {
     expect(second.selectedLayerId).toBe("layer-2");
   });
 
+  it("reorders imported media assets and records undo history", () => {
+    const state = createState();
+    const first = toolcraftReducer(state, {
+      asset: {
+        dataUrl: "data:image/png;base64,first",
+        fileName: "first.png",
+        mimeType: "image/png",
+        position: { x: 0, y: 0 },
+        size: state.canvas.size,
+      },
+      replaceExisting: false,
+      type: "media.import",
+    });
+    const second = toolcraftReducer(first, {
+      asset: {
+        dataUrl: "data:image/png;base64,second",
+        fileName: "second.png",
+        mimeType: "image/png",
+        position: { x: 0, y: 0 },
+        size: state.canvas.size,
+      },
+      replaceExisting: false,
+      type: "media.import",
+    });
+    const third = toolcraftReducer(second, {
+      asset: {
+        dataUrl: "data:image/png;base64,third",
+        fileName: "third.png",
+        mimeType: "image/png",
+        position: { x: 0, y: 0 },
+        size: state.canvas.size,
+      },
+      replaceExisting: false,
+      type: "media.import",
+    });
+
+    const reordered = toolcraftReducer(third, {
+      mediaIds: ["media-3", "media-1", "media-2"],
+      type: "media.reorder",
+    });
+    const undone = toolcraftReducer(reordered, { type: "history.undo" });
+
+    expect(reordered.mediaAssets.map((asset) => asset.id)).toEqual([
+      "media-3",
+      "media-1",
+      "media-2",
+    ]);
+    expect(reordered.history.undo.at(-1)?.label).toBe("Reorder media");
+    expect(undone.mediaAssets.map((asset) => asset.id)).toEqual([
+      "media-1",
+      "media-2",
+      "media-3",
+    ]);
+  });
+
+  it("keeps omitted media assets after explicitly reordered media", () => {
+    const state = createState();
+    const first = toolcraftReducer(state, {
+      asset: {
+        dataUrl: "data:image/png;base64,first",
+        fileName: "first.png",
+        mimeType: "image/png",
+        position: { x: 0, y: 0 },
+        size: state.canvas.size,
+      },
+      replaceExisting: false,
+      type: "media.import",
+    });
+    const second = toolcraftReducer(first, {
+      asset: {
+        dataUrl: "data:image/png;base64,second",
+        fileName: "second.png",
+        mimeType: "image/png",
+        position: { x: 0, y: 0 },
+        size: state.canvas.size,
+      },
+      replaceExisting: false,
+      type: "media.import",
+    });
+    const third = toolcraftReducer(second, {
+      asset: {
+        dataUrl: "data:image/png;base64,third",
+        fileName: "third.png",
+        mimeType: "image/png",
+        position: { x: 0, y: 0 },
+        size: state.canvas.size,
+      },
+      replaceExisting: false,
+      type: "media.import",
+    });
+
+    const reordered = toolcraftReducer(third, {
+      mediaIds: ["media-2"],
+      type: "media.reorder",
+    });
+
+    expect(reordered.mediaAssets.map((asset) => asset.id)).toEqual([
+      "media-2",
+      "media-1",
+      "media-3",
+    ]);
+  });
+
   it("adds and selects runtime layers and groups", () => {
     const withGroup = toolcraftReducer(createState(), {
       layer: {

package/templates/runtime/state/reducer.ts

@@ -212,6 +212,77 @@ function getResetCanvasSize(
   };
 }
 
+function getFileDropResetTargets(
+  state: ToolcraftState,
+  targets?: ReadonlySet<string>,
+): Set<string> {
+  const fileDropTargets = new Set<string>();
+
+  for (const section of state.schema.panels.controls?.sections ?? []) {
+    for (const control of Object.values(section.controls)) {
+      if (control.type !== "fileDrop" || (targets && !targets.has(control.target))) {
+        continue;
+      }
+
+      fileDropTargets.add(control.target);
+    }
+  }
+
+  return fileDropTargets;
+}
+
+function getResetMediaPatch(
+  state: ToolcraftState,
+  targets?: ReadonlySet<string>,
+): Pick<ToolcraftHistoryPatch, "after" | "before"> | null {
+  if (state.schema.panels.layers || state.mediaAssets.length === 0) {
+    return null;
+  }
+
+  const fileDropTargets = getFileDropResetTargets(state, targets);
+
+  if (fileDropTargets.size === 0) {
+    return null;
+  }
+
+  const mediaAssets = state.mediaAssets.filter((asset) => {
+    if (asset.sourceTarget) {
+      return !fileDropTargets.has(asset.sourceTarget);
+    }
+
+    return false;
+  });
+
+  if (mediaAssets.length === state.mediaAssets.length) {
+    return null;
+  }
+
+  const timeline = getMediaReadyTimelineState(state.schema, state.timeline, mediaAssets);
+  const shouldCommitTimeline = timeline !== state.timeline;
+
+  return {
+    after: {
+      mediaAssets,
+      ...(shouldCommitTimeline ? { timeline } : {}),
+    },
+    before: {
+      mediaAssets: state.mediaAssets,
+      ...(shouldCommitTimeline ? { timeline: state.timeline } : {}),
+    },
+  };
+}
+
+function canvasSizesEqual(
+  first: ToolcraftState["canvas"]["size"],
+  second: ToolcraftState["canvas"]["size"],
+): boolean {
+  return (
+    first.height === second.height &&
+    first.unit === second.unit &&
+    first.width === second.width
+  );
+}
+
 function clampTimelineDuration(value: number): number {
   if (!Number.isFinite(value)) {
     return minTimelineDurationSeconds;
@@ -686,16 +757,19 @@ export function toolcraftReducer(
 
     case "controls.reset": {
       const resetCanvasSize = getResetCanvasSize(state);
+      const resetMediaPatch = getResetMediaPatch(state);
 
-      if (resetCanvasSize) {
+      if (resetCanvasSize || resetMediaPatch) {
         return commitStatePatch(state, {
           after: {
             ...state.defaults,
-            "canvas.size": resetCanvasSize,
+            ...(resetCanvasSize ? { "canvas.size": resetCanvasSize } : {}),
+            ...resetMediaPatch?.after,
           },
           before: {
             ...state.values,
-            "canvas.size": state.canvas.size,
+            ...(resetCanvasSize ? { "canvas.size": state.canvas.size } : {}),
+            ...resetMediaPatch?.before,
           },
           label: "Reset controls",
         });
@@ -712,6 +786,48 @@ export function toolcraftReducer(
       );
     }
 
+    case "controls.resetTargets": {
+      const targetSet = new Set(command.targets);
+      const before: Record<string, unknown> = {};
+      const after: Record<string, unknown> = {};
+      const resetMediaPatch = getResetMediaPatch(state, targetSet);
+
+      for (const target of targetSet) {
+        if (!(target in state.defaults) || Object.is(state.values[target], state.defaults[target])) {
+          continue;
+        }
+
+        before[target] = state.values[target];
+        after[target] = state.defaults[target];
+      }
+
+      const resetCanvasSize = getResetCanvasSize(state);
+      const shouldResetCanvasSize =
+        resetCanvasSize !== null &&
+        (targetSet.has(canvasSizeWidthTarget) || targetSet.has(canvasSizeHeightTarget)) &&
+        !canvasSizesEqual(state.canvas.size, resetCanvasSize);
+
+      if (shouldResetCanvasSize) {
+        before["canvas.size"] = state.canvas.size;
+        after["canvas.size"] = resetCanvasSize;
+      }
+
+      if (resetMediaPatch) {
+        Object.assign(before, resetMediaPatch.before);
+        Object.assign(after, resetMediaPatch.after);
+      }
+
+      if (Object.keys(after).length === 0) {
+        return state;
+      }
+
+      return commitStatePatch(state, {
+        after,
+        before,
+        label: command.label ?? "Reset section",
+      });
+    }
+
     case "layers.add": {
       const layer = createLayer(state, command.layer);
       const insertIndex = clampInsertIndex(state.layers.length, command.insertIndex);
@@ -1030,15 +1146,29 @@ export function toolcraftReducer(
     case "media.import": {
       const shouldReplaceSingleLayerMedia =
         !state.schema.panels.layers && command.replaceExisting !== false;
+      const assetKind = command.asset.assetKind ?? "image";
+      const sourceTarget = command.asset.sourceTarget;
+      const existingSourceMediaAsset =
+        shouldReplaceSingleLayerMedia && sourceTarget
+          ? state.mediaAssets.find((asset) => asset.sourceTarget === sourceTarget)
+          : undefined;
       const shouldResizeCanvas =
-        state.schema.canvas.sizing.mode === "intrinsic-media";
+        state.schema.canvas.sizing.mode === "intrinsic-media" &&
+        assetKind === "image" &&
+        command.asset.size !== undefined;
       const layerId =
         command.asset.layerId ??
-        (shouldReplaceSingleLayerMedia ? getSingleLayerImportId(state) : undefined) ??
+        existingSourceMediaAsset?.layerId ??
+        (shouldReplaceSingleLayerMedia && !sourceTarget
+          ? getSingleLayerImportId(state)
+          : undefined) ??
         getNextLayerId(state);
       const mediaId =
         command.asset.id ??
-        (shouldReplaceSingleLayerMedia ? getSingleMediaImportId(state) : undefined) ??
+        existingSourceMediaAsset?.id ??
+        (shouldReplaceSingleLayerMedia && !sourceTarget
+          ? getSingleMediaImportId(state)
+          : undefined) ??
         getNextMediaId(state);
       const layer = {
         displayName: command.asset.layerName ?? getImportedLayerName(command.asset.fileName),
@@ -1048,17 +1178,31 @@ export function toolcraftReducer(
         visible: true,
       };
       const mediaAsset = {
+        ...(command.asset.assetKind ? { assetKind: command.asset.assetKind } : {}),
         dataUrl: command.asset.dataUrl,
         fileName: command.asset.fileName,
         id: mediaId,
         layerId,
         mimeType: command.asset.mimeType,
         position: shouldResizeCanvas ? { x: 0, y: 0 } : command.asset.position,
-        size: command.asset.size,
+        ...(command.asset.size ? { size: command.asset.size } : {}),
+        ...(sourceTarget ? { sourceTarget } : {}),
       };
-      const layers = shouldReplaceSingleLayerMedia ? [layer] : [...state.layers, layer];
+      const layers = shouldReplaceSingleLayerMedia
+        ? sourceTarget
+          ? state.layers.some((entry) => entry.id === layerId)
+            ? state.layers.map((entry) => (entry.id === layerId ? layer : entry))
+            : [...state.layers, layer]
+          : [layer]
+        : [...state.layers, layer];
       const mediaAssets = shouldReplaceSingleLayerMedia
-        ? [mediaAsset]
+        ? sourceTarget
+          ? existingSourceMediaAsset
+            ? state.mediaAssets.map((asset) =>
+                asset.id === existingSourceMediaAsset.id ? mediaAsset : asset,
+              )
+            : [...state.mediaAssets, mediaAsset]
+          : [mediaAsset]
         : [...state.mediaAssets, mediaAsset];
       const after = {
         ...(shouldResizeCanvas ? { "canvas.size": command.asset.size } : {}),
@@ -1102,6 +1246,48 @@ export function toolcraftReducer(
       });
     }
 
+    case "media.reorder": {
+      if (state.mediaAssets.length < 2 || command.mediaIds.length === 0) {
+        return state;
+      }
+
+      const mediaById = new Map(state.mediaAssets.map((asset) => [asset.id, asset]));
+      const seenIds = new Set<string>();
+      const reorderedMediaAssets = command.mediaIds.flatMap((mediaId) => {
+        const mediaAsset = mediaById.get(mediaId);
+
+        if (!mediaAsset || seenIds.has(mediaId)) {
+          return [];
+        }
+
+        seenIds.add(mediaId);
+        return [mediaAsset];
+      });
+
+      if (reorderedMediaAssets.length === 0) {
+        return state;
+      }
+
+      for (const mediaAsset of state.mediaAssets) {
+        if (!seenIds.has(mediaAsset.id)) {
+          reorderedMediaAssets.push(mediaAsset);
+        }
+      }
+
+      if (
+        reorderedMediaAssets.length === state.mediaAssets.length &&
+        reorderedMediaAssets.every((asset, index) => asset.id === state.mediaAssets[index]?.id)
+      ) {
+        return state;
+      }
+
+      return commitStatePatch(state, {
+        after: { mediaAssets: reorderedMediaAssets },
+        before: { mediaAssets: state.mediaAssets },
+        label: "Reorder media",
+      });
+    }
+
     case "timeline.setCurrentTime": {
       return {
         ...state,