@pixel-point/toolcraft 0.0.8 → 0.0.11

package/templates/runtime/schema/types.ts

@@ -110,7 +110,9 @@ export type ToolcraftAssemblyCommand =
   | "media.delete"
   | "media.import"
   | "media.reorder"
+  | "media.transform"
   | "panels.resetOffset"
+  | "panels.setHidden"
   | "panels.setOffset"
   | "timeline.changeKeyframeEasing"
   | "timeline.deleteControlKeyframes"
@@ -180,11 +182,13 @@ export type ToolcraftTimelineMode = "keyframes" | "playback";
 export type ToolcraftTimelinePanelSchema =
   | boolean
   | {
+      defaultDurationSeconds?: number;
       enabled?: boolean;
       mode?: ToolcraftTimelineMode;
     };
 
 export type ResolvedToolcraftTimelinePanelSchema = {
+  defaultDurationSeconds: number;
   enabled: boolean;
   mode: ToolcraftTimelineMode;
 };
@@ -192,6 +196,7 @@ export type ResolvedToolcraftTimelinePanelSchema = {
 export type ToolcraftPersistableStateSlice =
   | "canvas"
   | "layers"
+  | "media"
   | "panels"
   | "timeline"
   | "values";
@@ -247,6 +252,7 @@ export type ToolcraftActionSchema = {
     | "export"
     | "rotate-ccw"
     | "shuffle"
+    | "upload-simple"
     | "wand-sparkles";
   label?: string;
   value: string;
@@ -276,6 +282,39 @@ export type ToolcraftControlPerformanceRole =
 
 export type ToolcraftFileDropAssetKind = "file" | "image";
 
+export type ToolcraftMediaPositionSchema = {
+  x: number;
+  y: number;
+};
+
+export type ToolcraftMediaTransformSchema = {
+  flipHorizontal?: boolean;
+  flipVertical?: boolean;
+  rotationDeg?: 0 | 90 | 180 | 270;
+};
+
+export type ToolcraftDefaultMediaAssetSchema = {
+  assetKind?: ToolcraftFileDropAssetKind;
+  dataUrl: string;
+  fileName: string;
+  id?: string;
+  layerId?: string;
+  layerName?: string;
+  mimeType?: string;
+  position?: ToolcraftMediaPositionSchema;
+  size?: ToolcraftCanvasSize;
+  sourceTarget?: string;
+  transform?: ToolcraftMediaTransformSchema;
+};
+
+export type ToolcraftMediaSchema = {
+  defaultAssets?: readonly ToolcraftDefaultMediaAssetSchema[];
+};
+
+export type ResolvedToolcraftMediaSchema = {
+  defaultAssets: readonly ToolcraftDefaultMediaAssetSchema[];
+};
+
 export type ToolcraftControlConditionSchema = {
   equals?: unknown;
   greaterThan?: number;
@@ -323,12 +362,15 @@ export type ToolcraftFontPickerValueSchema = {
 
 export type ToolcraftCurveInterpolation = "monotone" | "smooth";
 
+export type ToolcraftVectorCoordinateMode = "cartesian" | "screen";
+
 export type ToolcraftControlSchema = {
   accept?: string;
   actions?: readonly (ToolcraftActionSchema | string)[];
   assetKind?: ToolcraftFileDropAssetKind;
   addLabel?: string;
   commitMode?: "content" | "setting";
+  coordinateMode?: ToolcraftVectorCoordinateMode;
   defaultValue?: unknown;
   description?: string;
   disabled?: boolean;
@@ -398,6 +440,7 @@ export type ResolvedToolcraftPanelsSchema = {
 export type ToolcraftAppSchema = {
   canvas: ToolcraftCanvasSchema;
   export?: ToolcraftExportSchema;
+  media?: ToolcraftMediaSchema;
   panels: ToolcraftPanelsSchema;
   persistence?: ToolcraftPersistenceSchema;
   settingsTransfer?: ToolcraftSettingsTransferSchema;
@@ -412,6 +455,7 @@ export type ResolvedToolcraftAppSchema = {
     sizeSource: ToolcraftCanvasSizeSource;
   };
   export: ResolvedToolcraftExportSchema;
+  media: ResolvedToolcraftMediaSchema;
   panels: ResolvedToolcraftPanelsSchema;
   persistence: ResolvedToolcraftPersistenceSchema;
   settingsTransfer: ResolvedToolcraftSettingsTransferSchema;

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,