@pixel-point/toolcraft 0.0.7 → 0.0.8

package/templates/runtime/react/media-file.ts

@@ -5,6 +5,10 @@ export type ToolcraftImportedImageFile = {
   size: ToolcraftCanvasSize;
 };
 
+export type ToolcraftImportedFile = {
+  dataUrl: string;
+};
+
 function readFileDataUrl(file: File): Promise<string | null> {
   return new Promise((resolve) => {
     const reader = new FileReader();
@@ -65,6 +69,21 @@ function readImageDataUrlSize(dataUrl: string): Promise<ToolcraftCanvasSize | nu
   });
 }
 
+export function isToolcraftImageFile(file: File): boolean {
+  return (
+    file.type.startsWith("image/") ||
+    /\.(avif|gif|heic|heif|jpe?g|png|svg|tiff?|webp)$/i.test(file.name)
+  );
+}
+
+export async function readImportedFile(
+  file: File,
+): Promise<ToolcraftImportedFile | null> {
+  const dataUrl = await readFileDataUrl(file);
+
+  return dataUrl ? { dataUrl } : null;
+}
+
 export async function readImportedImageFile(
   file: File,
   fallbackSize: ToolcraftCanvasSize,

package/templates/runtime/schema/define-toolcraft.test.ts

@@ -539,6 +539,7 @@ describe("defineToolcraft", () => {
         "history.undo",
         "media.delete",
         "media.import",
+        "media.reorder",
         "layers.reorder",
         "timeline.setCurrentTime",
         "canvas.center",

package/templates/runtime/schema/define-toolcraft.ts

@@ -332,7 +332,7 @@ function createToolcraftAssembly({
 
     if (canvas.upload) {
       capabilities.push("canvas.upload");
-      commands.push("media.delete", "media.import");
+      commands.push("media.delete", "media.import", "media.reorder");
     }
   }
 
@@ -478,7 +478,9 @@ function createToolcraftAssembly({
               ...(canvas.draggable
                 ? (["canvas.panBy", "canvas.setOffset", "canvas.setViewport"] as const)
                 : []),
-              ...(canvas.upload ? (["media.delete", "media.import"] as const) : []),
+              ...(canvas.upload
+                ? (["media.delete", "media.import", "media.reorder"] as const)
+                : []),
             ])
           : [],
         enabled: canvas.enabled,

package/templates/runtime/schema/types.ts

@@ -109,6 +109,7 @@ export type ToolcraftAssemblyCommand =
   | "layers.toggleVisibility"
   | "media.delete"
   | "media.import"
+  | "media.reorder"
   | "panels.resetOffset"
   | "panels.setOffset"
   | "timeline.changeKeyframeEasing"
@@ -273,6 +274,8 @@ export type ToolcraftControlPerformanceRole =
   | "responsiveness"
   | "workload";
 
+export type ToolcraftFileDropAssetKind = "file" | "image";
+
 export type ToolcraftControlConditionSchema = {
   equals?: unknown;
   greaterThan?: number;
@@ -323,6 +326,7 @@ export type ToolcraftCurveInterpolation = "monotone" | "smooth";
 export type ToolcraftControlSchema = {
   accept?: string;
   actions?: readonly (ToolcraftActionSchema | string)[];
+  assetKind?: ToolcraftFileDropAssetKind;
   addLabel?: string;
   commitMode?: "content" | "setting";
   defaultValue?: unknown;

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

@@ -98,6 +98,207 @@ describe("toolcraftReducer", () => {
     });
   });
 
+  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;
 
@@ -511,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,66 @@ 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"],
@@ -697,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",
         });
@@ -727,6 +790,7 @@ export function toolcraftReducer(
       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])) {
@@ -748,6 +812,11 @@ export function toolcraftReducer(
         after["canvas.size"] = resetCanvasSize;
       }
 
+      if (resetMediaPatch) {
+        Object.assign(before, resetMediaPatch.before);
+        Object.assign(after, resetMediaPatch.after);
+      }
+
       if (Object.keys(after).length === 0) {
         return state;
       }
@@ -1077,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),
@@ -1095,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 } : {}),
@@ -1149,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,

package/templates/runtime/state/types.ts

@@ -1,4 +1,8 @@
-import type { ToolcraftCanvasSize, ResolvedToolcraftAppSchema } from "../schema/types";
+import type {
+  ToolcraftCanvasSize,
+  ToolcraftFileDropAssetKind,
+  ResolvedToolcraftAppSchema,
+} from "../schema/types";
 
 export type ToolcraftCommand =
   | {
@@ -44,6 +48,7 @@ export type ToolcraftCommand =
       type: "media.import";
     }
   | { mediaId: string; type: "media.delete" }
+  | { mediaIds: string[]; type: "media.reorder" }
   | { currentTimeSeconds: number; type: "timeline.setCurrentTime" }
   | { durationSeconds: number; type: "timeline.setDuration" }
   | { expanded: boolean; type: "timeline.setExpanded" }
@@ -104,6 +109,7 @@ export const toolcraftRuntimeCommandTypes = [
   "panels.resetOffset",
   "media.import",
   "media.delete",
+  "media.reorder",
   "timeline.setCurrentTime",
   "timeline.setDuration",
   "timeline.setExpanded",
@@ -156,13 +162,15 @@ export type ToolcraftLayerDraft = {
 };
 
 export type ToolcraftMediaAsset = {
+  assetKind?: ToolcraftFileDropAssetKind;
   dataUrl: string;
   fileName: string;
   id: string;
   layerId: string;
   mimeType: string;
   position: ToolcraftPoint;
-  size: ToolcraftCanvasSize;
+  size?: ToolcraftCanvasSize;
+  sourceTarget?: string;
 };
 
 export type ToolcraftHistoryPatch = {