@pixel-point/toolcraft 0.0.9 → 0.0.11

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

@@ -65,6 +65,42 @@ describe("createToolcraftState", () => {
     });
   });
 
+  it("keeps runtime timeline presentation out of product values and defaults", () => {
+    const app = defineToolcraft({
+      canvas: { enabled: true, renderScale: true, sizing: { mode: "editable-output" } },
+      panels: {
+        controls: {
+          sections: [],
+          title: "Controls",
+        },
+        timeline: { mode: "playback" },
+      },
+    });
+
+    const state = createToolcraftState(app);
+
+    expect(state.values).not.toHaveProperty("panels.timeline.extended");
+    expect(state.values).not.toHaveProperty("panels.timeline.visible");
+    expect(state.defaults).not.toHaveProperty("panels.timeline.extended");
+    expect(state.defaults).not.toHaveProperty("panels.timeline.visible");
+    expect(state.panels.timeline.extended).toBeUndefined();
+    expect(state.panels.timeline.hidden).toBeUndefined();
+  });
+
+  it("initializes timeline duration from the schema loop duration", () => {
+    const app = defineToolcraft({
+      canvas: { enabled: true },
+      panels: {
+        timeline: { defaultDurationSeconds: 14, mode: "playback" },
+      },
+    });
+
+    const state = createToolcraftState(app);
+
+    expect(state.timeline.durationSeconds).toBe(14);
+    expect(state.timeline.isLooping).toBe(true);
+  });
+
   it("initializes canvas state from resolved canvas size", () => {
     const size = { width: 1200, height: 900, unit: "px" } as const;
     const app = defineToolcraft({
@@ -122,6 +158,126 @@ describe("createToolcraftState", () => {
     expect(state.selectedLayerId).toBeNull();
   });
 
+  it("initializes predefined media files as runtime attachments", () => {
+    const app = defineToolcraft({
+      canvas: { enabled: true, upload: true },
+      media: {
+        defaultAssets: [
+          {
+            dataUrl: "data:image/png;base64,AAAA",
+            fileName: "background.png",
+            id: "default-background",
+            layerId: "default-background-layer",
+            mimeType: "image/png",
+            size: { height: 1080, unit: "px", width: 1920 },
+            sourceTarget: "media.background",
+          },
+        ],
+      },
+      panels: {
+        controls: {
+          sections: [
+            {
+              controls: {
+                background: {
+                  defaultValue: null,
+                  target: "media.background",
+                  type: "fileDrop",
+                },
+              },
+            },
+          ],
+          title: "Controls",
+        },
+      },
+    });
+
+    const state = createToolcraftState(app);
+
+    expect(state.mediaAssets).toEqual([
+      expect.objectContaining({
+        dataUrl: "data:image/png;base64,AAAA",
+        fileName: "background.png",
+        id: "default-background",
+        layerId: "default-background-layer",
+        mimeType: "image/png",
+        sourceTarget: "media.background",
+      }),
+    ]);
+    expect(state.layers).toEqual([
+      expect.objectContaining({
+        id: "default-background-layer",
+        name: "background",
+        visible: true,
+      }),
+    ]);
+    expect(state.selectedLayerId).toBe("default-background-layer");
+  });
+
+  it("lets persisted media state override schema default media", () => {
+    const app = defineToolcraft({
+      canvas: { enabled: true, upload: true },
+      media: {
+        defaultAssets: [
+          {
+            dataUrl: "data:image/png;base64,AAAA",
+            fileName: "background.png",
+            sourceTarget: "media.background",
+          },
+        ],
+      },
+      panels: {},
+    });
+
+    const state = createToolcraftState(app, { mediaAssets: [] });
+
+    expect(state.mediaAssets).toEqual([]);
+    expect(state.layers).toEqual([]);
+    expect(state.selectedLayerId).toBeNull();
+  });
+
+  it("restores default media layer names when persisted media omits layer state", () => {
+    const app = defineToolcraft({
+      canvas: { enabled: true, upload: true },
+      media: {
+        defaultAssets: [
+          {
+            dataUrl: "data:image/png;base64,AAAA",
+            fileName: "background.png",
+            id: "default-background",
+            layerId: "default-background-layer",
+            layerName: "Hero source",
+            sourceTarget: "media.background",
+          },
+        ],
+      },
+      panels: {},
+    });
+
+    const state = createToolcraftState(app, {
+      mediaAssets: [
+        {
+          dataUrl: "data:image/png;base64,AAAA",
+          fileName: "background.png",
+          id: "default-background",
+          layerId: "default-background-layer",
+          mimeType: "image/png",
+          position: { x: 0, y: 0 },
+          sourceTarget: "media.background",
+        },
+      ],
+    });
+
+    expect(state.layers).toEqual([
+      expect.objectContaining({
+        displayName: "Hero source",
+        id: "default-background-layer",
+        name: "Hero source",
+      }),
+    ]);
+    expect(state.selectedLayerId).toBe("default-background-layer");
+  });
+
   it("accepts seeded runtime layer state", () => {
     const app = defineToolcraft({
       canvas: { enabled: true },

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

@@ -1,4 +1,5 @@
 import type { ResolvedToolcraftAppSchema } from "../schema/types";
+import { isToolcraftTimelinePanelRuntimeTarget } from "../schema/runtime-targets";
 import type {
   ToolcraftInitialState,
   ToolcraftState,
@@ -6,6 +7,12 @@ import type {
   ToolcraftTimelineState,
 } from "./types";
 import { toolcraftCanvasZoomDefault } from "./canvas-zoom";
+import {
+  cloneToolcraftLayers,
+  cloneToolcraftMediaAssets,
+  createToolcraftDefaultMediaState,
+  createToolcraftLayersFromMediaAssets,
+} from "./media-defaults";
 import { getMediaReadyTimelineState } from "./timeline-readiness";
 
 function cloneTimelineKeyframeGroups(
@@ -26,12 +33,16 @@ function cloneTimelineKeyframeGroups(
   }));
 }
 
-function createDefaultTimelineState(
-  timeline?: Partial<ToolcraftTimelineState>,
-): ToolcraftTimelineState {
+function createDefaultTimelineState({
+  defaultDurationSeconds,
+  timeline,
+}: {
+  defaultDurationSeconds: number;
+  timeline?: Partial<ToolcraftTimelineState>;
+}): ToolcraftTimelineState {
   return {
     currentTimeSeconds: 0,
-    durationSeconds: 8,
+    durationSeconds: defaultDurationSeconds,
     expanded: false,
     isLooping: true,
     isPlaying: true,
@@ -46,15 +57,34 @@ export function createToolcraftState(
   initialState: ToolcraftInitialState = {},
 ): ToolcraftState {
   const defaults: Record<string, unknown> = {};
-  const mediaAssets = initialState.mediaAssets ?? [];
+  const defaultMediaState = createToolcraftDefaultMediaState(schema);
+  const hasInitialMediaAssets = Object.hasOwn(initialState, "mediaAssets");
+  const mediaAssets = hasInitialMediaAssets
+    ? cloneToolcraftMediaAssets(initialState.mediaAssets ?? [])
+    : cloneToolcraftMediaAssets(defaultMediaState.mediaAssets);
+  const layers =
+    initialState.layers ??
+    (hasInitialMediaAssets
+      ? createToolcraftLayersFromMediaAssets(mediaAssets, defaultMediaState.layers)
+      : cloneToolcraftLayers(defaultMediaState.layers));
+  const selectedLayerId =
+    initialState.selectedLayerId ??
+    (hasInitialMediaAssets ? (layers[0]?.id ?? null) : defaultMediaState.selectedLayerId);
   const timeline = getMediaReadyTimelineState(
     schema,
-    createDefaultTimelineState(initialState.timeline),
+    createDefaultTimelineState({
+      defaultDurationSeconds: schema.panels.timeline?.defaultDurationSeconds ?? 8,
+      timeline: initialState.timeline,
+    }),
     mediaAssets,
   );
 
   for (const section of schema.panels.controls?.sections ?? []) {
     for (const control of Object.values(section.controls)) {
+      if (isToolcraftTimelinePanelRuntimeTarget(control.target)) {
+        continue;
+      }
+
       defaults[control.target] = control.defaultValue;
     }
   }
@@ -79,7 +109,7 @@ export function createToolcraftState(
       redo: [],
       undo: [],
     },
-    layers: initialState.layers ?? [],
+    layers,
     mediaAssets,
     panels: {
       controls: { ...panels.controls, ...initialState.panels?.controls },
@@ -88,7 +118,7 @@ export function createToolcraftState(
       toolbar: { ...panels.toolbar, ...initialState.panels?.toolbar },
     },
     schema,
-    selectedLayerId: initialState.selectedLayerId ?? null,
+    selectedLayerId,
     timeline,
     values: { ...defaults, ...initialState.values },
   };

package/templates/runtime/state/media-defaults.ts

@@ -0,0 +1,105 @@
+import type { ResolvedToolcraftAppSchema } from "../schema/types";
+import type { ToolcraftLayer, ToolcraftMediaAsset } from "./types";
+
+export type ToolcraftDefaultMediaState = {
+  layers: ToolcraftLayer[];
+  mediaAssets: ToolcraftMediaAsset[];
+  selectedLayerId: string | null;
+};
+
+function getDefaultLayerName(fileName: string): string {
+  const baseName = fileName.replace(/\.[^.]+$/u, "").trim();
+
+  return baseName || "Media";
+}
+
+function cloneMediaAsset(asset: ToolcraftMediaAsset): ToolcraftMediaAsset {
+  return {
+    ...asset,
+    position: { ...asset.position },
+    ...(asset.size ? { size: { ...asset.size } } : {}),
+    ...(asset.transform ? { transform: { ...asset.transform } } : {}),
+  };
+}
+
+function cloneLayer(layer: ToolcraftLayer): ToolcraftLayer {
+  return { ...layer };
+}
+
+export function cloneToolcraftMediaAssets(
+  mediaAssets: readonly ToolcraftMediaAsset[],
+): ToolcraftMediaAsset[] {
+  return mediaAssets.map(cloneMediaAsset);
+}
+
+export function cloneToolcraftLayers(layers: readonly ToolcraftLayer[]): ToolcraftLayer[] {
+  return layers.map(cloneLayer);
+}
+
+export function createToolcraftLayersFromMediaAssets(
+  mediaAssets: readonly ToolcraftMediaAsset[],
+  defaultLayers: readonly ToolcraftLayer[] = [],
+): ToolcraftLayer[] {
+  const layers: ToolcraftLayer[] = [];
+  const defaultLayerById = new Map(defaultLayers.map((layer) => [layer.id, layer]));
+  const seenLayerIds = new Set<string>();
+
+  for (const asset of mediaAssets) {
+    if (seenLayerIds.has(asset.layerId)) {
+      continue;
+    }
+
+    seenLayerIds.add(asset.layerId);
+    layers.push(
+      cloneLayer(
+        defaultLayerById.get(asset.layerId) ?? {
+          displayName: getDefaultLayerName(asset.fileName),
+          id: asset.layerId,
+          kind: "layer",
+          name: getDefaultLayerName(asset.fileName),
+          visible: true,
+        },
+      ),
+    );
+  }
+
+  return layers;
+}
+
+export function createToolcraftDefaultMediaState(
+  schema: ResolvedToolcraftAppSchema,
+): ToolcraftDefaultMediaState {
+  const layers: ToolcraftLayer[] = [];
+  const mediaAssets: ToolcraftMediaAsset[] = [];
+
+  schema.media.defaultAssets.forEach((asset, index) => {
+    const layerId = asset.layerId ?? `default-media-layer-${index + 1}`;
+    const layerName = asset.layerName ?? getDefaultLayerName(asset.fileName);
+
+    layers.push({
+      displayName: layerName,
+      id: layerId,
+      kind: "layer",
+      name: layerName,
+      visible: true,
+    });
+    mediaAssets.push({
+      ...(asset.assetKind ? { assetKind: asset.assetKind } : {}),
+      dataUrl: asset.dataUrl,
+      fileName: asset.fileName,
+      id: asset.id ?? `default-media-${index + 1}`,
+      layerId,
+      mimeType: asset.mimeType ?? (asset.assetKind === "file" ? "application/octet-stream" : "image/*"),
+      position: asset.position ?? { x: 0, y: 0 },
+      ...(asset.size ? { size: asset.size } : {}),
+      ...(asset.sourceTarget ? { sourceTarget: asset.sourceTarget } : {}),
+      ...(asset.transform ? { transform: asset.transform } : {}),
+    });
+  });
+
+  return {
+    layers,
+    mediaAssets,
+    selectedLayerId: layers[0]?.id ?? null,
+  };
+}

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

@@ -77,6 +77,7 @@ describe("Toolcraft template state persistence", () => {
       ],
       panels: {
         controls: { offset: { x: 20, y: 10 } },
+        timeline: { hidden: true },
       },
       selectedLayerId: "layer-1",
       timeline: {
@@ -125,6 +126,7 @@ describe("Toolcraft template state persistence", () => {
         ],
         panels: {
           controls: { offset: { x: 20, y: 10 } },
+          timeline: { hidden: true },
         },
         selectedLayerId: "layer-1",
         timeline: {
@@ -146,10 +148,63 @@ describe("Toolcraft template state persistence", () => {
     expect(snapshot?.state.values).not.toHaveProperty("legacy.target");
   });
 
+  it("persists media state when the app opts into media persistence", () => {
+    const schema = defineToolcraft({
+      canvas: { enabled: true, upload: true },
+      media: {
+        defaultAssets: [
+          {
+            dataUrl: "data:image/png;base64,AAAA",
+            fileName: "background.png",
+            id: "default-background",
+            layerId: "default-background-layer",
+            mimeType: "image/png",
+            sourceTarget: "media.background",
+          },
+        ],
+      },
+      panels: {
+        controls: {
+          sections: [
+            {
+              controls: {
+                background: {
+                  defaultValue: null,
+                  target: "media.background",
+                  type: "fileDrop",
+                },
+              },
+            },
+          ],
+          title: "Controls",
+        },
+      },
+      persistence: {
+        include: ["values", "panels", "media"],
+        key: "toolcraft:media-persistence-test:state:v1",
+        storage: "localStorage",
+        version: 1,
+      },
+    });
+    const state = createToolcraftState(schema, { mediaAssets: [] });
+    const snapshot = createToolcraftPersistenceSnapshot(state, schema.persistence);
+    const parsed = parseToolcraftPersistenceSnapshot(
+      schema,
+      JSON.stringify(snapshot),
+    );
+
+    expect(snapshot?.state.mediaAssets).toEqual([]);
+    expect(parsed?.mediaAssets).toEqual([]);
+    expect(createToolcraftState(schema, parsed).mediaAssets).toEqual([]);
+  });
+
   it("parses matching versions and ignores stale targets or invalid versions", () => {
     const schema = createPersistentSchema();
     const rawValue = JSON.stringify({
       state: {
+        panels: {
+          timeline: { hidden: true },
+        },
         values: {
           "generation.prompt": "Restored prompt",
           "legacy.target": "remove me",
@@ -160,6 +215,9 @@ describe("Toolcraft template state persistence", () => {
     });
 
     expect(parseToolcraftPersistenceSnapshot(schema, rawValue)).toEqual({
+      panels: {
+        timeline: { hidden: true },
+      },
       values: {
         "generation.prompt": "Restored prompt",
         "selectedLayer.opacity": 55,

package/templates/runtime/state/persistence.ts

@@ -2,10 +2,12 @@ import type {
   ToolcraftLocalStoragePersistenceSchema,
   ResolvedToolcraftAppSchema,
 } from "../schema/types";
+import { isToolcraftTimelinePanelRuntimeTarget } from "../schema/runtime-targets";
 import type {
   ToolcraftCanvasState,
   ToolcraftInitialState,
   ToolcraftLayer,
+  ToolcraftMediaAsset,
   ToolcraftPanelId,
   ToolcraftPanelState,
   ToolcraftState,
@@ -92,6 +94,14 @@ function readPanel(value: unknown): Partial<ToolcraftPanelState> | undefined {
     panel.collapsed = value.collapsed;
   }
 
+  if (typeof value.extended === "boolean") {
+    panel.extended = value.extended;
+  }
+
+  if (typeof value.hidden === "boolean") {
+    panel.hidden = value.hidden;
+  }
+
   return Object.keys(panel).length > 0 ? panel : undefined;
 }
 
@@ -161,6 +171,85 @@ function readLayers(value: unknown): ToolcraftLayer[] | undefined {
   });
 }
 
+function readMediaAsset(value: unknown): ToolcraftMediaAsset | undefined {
+  if (
+    !isRecord(value) ||
+    typeof value.id !== "string" ||
+    typeof value.layerId !== "string" ||
+    typeof value.dataUrl !== "string" ||
+    typeof value.fileName !== "string" ||
+    typeof value.mimeType !== "string"
+  ) {
+    return undefined;
+  }
+
+  const position = readPoint(value.position);
+
+  if (!position) {
+    return undefined;
+  }
+
+  const mediaAsset: ToolcraftMediaAsset = {
+    dataUrl: value.dataUrl,
+    fileName: value.fileName,
+    id: value.id,
+    layerId: value.layerId,
+    mimeType: value.mimeType,
+    position,
+  };
+  const size = readCanvasSize(value.size);
+
+  if (value.assetKind === "file" || value.assetKind === "image") {
+    mediaAsset.assetKind = value.assetKind;
+  }
+
+  if (size) {
+    mediaAsset.size = size;
+  }
+
+  if (typeof value.sourceTarget === "string") {
+    mediaAsset.sourceTarget = value.sourceTarget;
+  }
+
+  if (isRecord(value.transform)) {
+    mediaAsset.transform = {};
+
+    if (typeof value.transform.flipHorizontal === "boolean") {
+      mediaAsset.transform.flipHorizontal = value.transform.flipHorizontal;
+    }
+
+    if (typeof value.transform.flipVertical === "boolean") {
+      mediaAsset.transform.flipVertical = value.transform.flipVertical;
+    }
+
+    if (
+      value.transform.rotationDeg === 0 ||
+      value.transform.rotationDeg === 90 ||
+      value.transform.rotationDeg === 180 ||
+      value.transform.rotationDeg === 270
+    ) {
+      mediaAsset.transform.rotationDeg = value.transform.rotationDeg;
+    }
+
+    if (Object.keys(mediaAsset.transform).length === 0) {
+      delete mediaAsset.transform;
+    }
+  }
+
+  return mediaAsset;
+}
+
+function readMediaAssets(value: unknown): ToolcraftMediaAsset[] | undefined {
+  if (!Array.isArray(value)) {
+    return undefined;
+  }
+
+  return value.flatMap((item) => {
+    const mediaAsset = readMediaAsset(item);
+    return mediaAsset ? [mediaAsset] : [];
+  });
+}
+
 function readBezierControlPoints(
   value: unknown,
 ): ToolcraftTimelineBezierControlPoints | undefined {
@@ -296,7 +385,10 @@ function getKnownValueTargets(schema: ResolvedToolcraftAppSchema): Set<string> {
 
   for (const section of schema.panels.controls?.sections ?? []) {
     for (const control of Object.values(section.controls)) {
-      if (control.type !== "panelActions") {
+      if (
+        control.type !== "panelActions" &&
+        !isToolcraftTimelinePanelRuntimeTarget(control.target)
+      ) {
         targets.add(control.target);
       }
     }
@@ -369,6 +461,10 @@ export function createToolcraftPersistenceSnapshot(
     initialState.selectedLayerId = state.selectedLayerId;
   }
 
+  if (included.has("media")) {
+    initialState.mediaAssets = state.mediaAssets;
+  }
+
   return {
     state: initialState,
     version: persistence.version,
@@ -450,6 +546,14 @@ export function parseToolcraftPersistenceSnapshot(
     }
   }
 
+  if (included.has("media")) {
+    const mediaAssets = readMediaAssets(persistedState.mediaAssets);
+
+    if (mediaAssets) {
+      initialState.mediaAssets = mediaAssets;
+    }
+  }
+
   return Object.keys(initialState).length > 0 ? initialState : undefined;
 }