@pixel-point/toolcraft 0.0.15 → 0.0.17

package/templates/runtime/react/app-shell/settings-transfer-canvas.ts

@@ -0,0 +1,68 @@
+import { normalizeToolcraftCanvasAspectRatioValue } from "../../state/canvas-state";
+import type { ToolcraftCanvasAspectRatioValue } from "../../state/canvas-state";
+import { readCanvasSize } from "../../state/persistence-reader-primitives";
+import { isToolcraftPersistenceRecord } from "../../state/persistence-shared";
+import type {
+  ToolcraftCommand,
+  ToolcraftState,
+} from "../../state/types";
+
+export const settingsTransferImportHistoryGroup = "settings.import";
+
+export type ToolcraftSettingsCanvasPayload = Readonly<{
+  aspectRatio?: ToolcraftCanvasAspectRatioValue;
+  mode: ToolcraftState["canvas"]["mode"];
+  size: ToolcraftState["canvas"]["size"];
+}>;
+
+export type ToolcraftSettingsCanvasImportContext = Readonly<{
+  dispatch: (command: ToolcraftCommand) => void;
+}>;
+
+export function parseToolcraftSettingsCanvas(
+  input: Readonly<{ canvas: unknown; values: unknown; version: 1 | 2 }>,
+): ToolcraftSettingsCanvasPayload | null {
+  if (!isToolcraftPersistenceRecord(input.canvas)) {
+    return null;
+  }
+
+  const size = readCanvasSize(input.canvas.size);
+
+  if (!size) {
+    return null;
+  }
+
+  const values = isToolcraftPersistenceRecord(input.values) ? input.values : {};
+  const aspectCandidate =
+    input.version === 2 && "aspectRatio" in input.canvas
+      ? input.canvas.aspectRatio
+      : values["canvas.aspectRatio"];
+  const aspectRatio = aspectCandidate === undefined
+    ? undefined
+    : normalizeToolcraftCanvasAspectRatioValue(aspectCandidate, size);
+  const mode =
+    input.version === 2 && input.canvas.mode === "infinite"
+      ? "infinite"
+      : "finite";
+
+  return {
+    ...(aspectRatio ? { aspectRatio } : {}),
+    mode,
+    size,
+  };
+}
+
+export function applyToolcraftSettingsCanvas(
+  context: ToolcraftSettingsCanvasImportContext,
+  canvas: ToolcraftSettingsCanvasPayload,
+): void {
+  context.dispatch({
+    ...(canvas.aspectRatio ? { aspectRatio: canvas.aspectRatio } : {}),
+    history: "merge",
+    historyGroup: settingsTransferImportHistoryGroup,
+    label: "Import settings",
+    mode: canvas.mode,
+    size: canvas.size,
+    type: "canvas.applySettings",
+  });
+}

package/templates/runtime/react/app-shell/settings-transfer.test.ts

@@ -27,6 +27,8 @@ function createSettingsSchema() {
               opacity: {
                 defaultValue: 75,
                 label: "Opacity",
+                max: 100,
+                min: 0,
                 target: "style.opacity",
                 type: "slider",
               },
@@ -39,6 +41,7 @@ function createSettingsSchema() {
       timeline: { mode: "playback" },
     },
     settingsTransfer: {
+      additionalValueTargets: ["composition.layout"],
       appId: "Settings Test",
       enabled: true,
     },
@@ -63,10 +66,14 @@ describe("settings transfer", () => {
     const schema = createSettingsSchema();
     const state = createToolcraftState(schema, {
       values: {
+        "composition.layout": {
+          elements: [{ id: "title", x: 120, y: 80 }],
+        },
         "generation.prompt": "Exported prompt",
         "panels.timeline.extended": true,
         "panels.timeline.visible": false,
         "style.opacity": 24,
+        "unknown.target": "Ignored",
       },
     });
 
@@ -75,17 +82,22 @@ describe("settings transfer", () => {
     expect(payload).toMatchObject({
       appId: "settings-test",
       canvas: {
+        mode: "finite",
         size: { height: 720, unit: "px", width: 1280 },
       },
       source: "toolcraft-settings",
       values: {
+        "composition.layout": {
+          elements: [{ id: "title", x: 120, y: 80 }],
+        },
         "generation.prompt": "Exported prompt",
         "style.opacity": 24,
       },
-      version: 1,
+      version: 2,
     });
     expect(payload.values).not.toHaveProperty("panels.timeline.extended");
     expect(payload.values).not.toHaveProperty("panels.timeline.visible");
+    expect(payload.values).not.toHaveProperty("unknown.target");
     expect(parseToolcraftSettingsPayload(schema, payload)).toEqual(payload);
     expect(
       parseToolcraftSettingsPayload(
@@ -113,6 +125,7 @@ describe("settings transfer", () => {
     const payload = {
       ...createToolcraftSettingsPayload(initialState),
       canvas: {
+        mode: "finite" as const,
         size: { height: 900, unit: "px" as const, width: 1600 },
       },
       timeline: {
@@ -123,6 +136,9 @@ describe("settings transfer", () => {
         isPlaying: false as const,
       },
       values: {
+        "composition.layout": {
+          elements: [{ id: "title", x: 420, y: 280 }],
+        },
         "generation.prompt": "Imported prompt",
         "unknown.target": "Ignored",
       },
@@ -133,6 +149,9 @@ describe("settings transfer", () => {
     });
 
     expect(state.values["generation.prompt"]).toBe("Imported prompt");
+    expect(state.values["composition.layout"]).toEqual({
+      elements: [{ id: "title", x: 420, y: 280 }],
+    });
     expect(state.values["unknown.target"]).toBeUndefined();
     expect(state.values["canvas.aspectRatio"]).toEqual({
       height: 9,
@@ -157,4 +176,78 @@ describe("settings transfer", () => {
       ]),
     );
   });
+
+  it("normalizes v1 as finite and atomically imports v2 while already infinite", () => {
+    const schema = createSettingsSchema();
+    const finite = createToolcraftState(schema);
+    const infinite = toolcraftReducer(finite, {
+      target: "canvas.infinity",
+      type: "controls.setValue",
+      value: true,
+    });
+    const legacy = {
+      ...createToolcraftSettingsPayload(finite),
+      canvas: { size: { height: 600, unit: "px" as const, width: 800 } },
+      values: {
+        "canvas.aspectRatio": {
+          height: 3,
+          mode: "preset" as const,
+          value: "4:3",
+          width: 4,
+        },
+      },
+      version: 1 as const,
+    };
+    const parsedLegacy = parseToolcraftSettingsPayload(schema, legacy);
+
+    expect(parsedLegacy?.canvas).toMatchObject({
+      mode: "finite",
+      size: { height: 600, unit: "px", width: 800 },
+    });
+
+    const imported = reduceWithCommands(infinite, (dispatch) => {
+      applyToolcraftSettingsPayload(
+        { dispatch, state: infinite },
+        {
+          ...createToolcraftSettingsPayload(infinite),
+          canvas: {
+            mode: "infinite",
+            size: { height: 900, unit: "px", width: 1600 },
+          },
+        },
+      );
+    });
+
+    expect(imported.canvas).toMatchObject({
+      mode: "infinite",
+      size: { height: 900, unit: "px", width: 1600 },
+    });
+    expect(imported.values["canvas.size.width"]).toBe(1600);
+    expect(imported.values["canvas.size.height"]).toBe(900);
+    expect(imported.history.undo).toEqual(
+      expect.arrayContaining([
+        expect.objectContaining({
+          group: "settings.import",
+          label: "Import settings",
+        }),
+      ]),
+    );
+  });
+
+  it("uses schema defaults for invalid imported control values", () => {
+    const schema = createSettingsSchema();
+    const initialState = createToolcraftState(schema, {
+      values: { "style.opacity": 24 },
+    });
+    const payload = {
+      ...createToolcraftSettingsPayload(initialState),
+      values: { "style.opacity": 200 },
+    };
+
+    const state = reduceWithCommands(initialState, (dispatch) => {
+      applyToolcraftSettingsPayload({ dispatch, state: initialState }, payload);
+    });
+
+    expect(state.values["style.opacity"]).toBe(75);
+  });
 });

package/templates/runtime/react/app-shell/settings-transfer.ts

@@ -1,22 +1,30 @@
 import type { ResolvedToolcraftAppSchema } from "../../schema/types";
-import { isToolcraftTimelinePanelRuntimeTarget } from "../../schema/runtime-targets";
+import { isToolcraftCanvasSizingTarget } from "../../schema/runtime-targets";
+import { normalizeToolcraftCanvasAspectRatioValue } from "../../state/canvas-state";
+import {
+  getToolcraftValueControls,
+  normalizeToolcraftControlValue,
+} from "../../state/control-value-normalization";
 import type {
   ToolcraftCommand,
   ToolcraftState,
   ToolcraftTimelineState,
 } from "../../state/types";
+import {
+  applyToolcraftSettingsCanvas,
+  parseToolcraftSettingsCanvas,
+  settingsTransferImportHistoryGroup,
+  type ToolcraftSettingsCanvasPayload,
+} from "./settings-transfer-canvas";
 
 const settingsTransferPayloadSource = "toolcraft-settings";
-const settingsTransferPayloadVersion = 1;
-const settingsTransferImportHistoryGroup = "settings.import";
+const settingsTransferPayloadVersion = 2;
 
 type ToolcraftDispatch = (command: ToolcraftCommand) => void;
 
 export type ToolcraftSettingsTransferPayload = {
   appId: string;
-  canvas: {
-    size: ToolcraftState["canvas"]["size"];
-  };
+  canvas: ToolcraftSettingsCanvasPayload;
   exportedAt: string;
   source: typeof settingsTransferPayloadSource;
   timeline: Pick<
@@ -26,7 +34,7 @@ export type ToolcraftSettingsTransferPayload = {
     isPlaying: false;
   };
   values: Record<string, unknown>;
-  version: typeof settingsTransferPayloadVersion;
+  version: 1 | typeof settingsTransferPayloadVersion;
 };
 
 type ImportContext = {
@@ -46,29 +54,18 @@ function isFiniteNumber(value: unknown): value is number {
   return typeof value === "number" && Number.isFinite(value);
 }
 
-function getKnownValueTargets(schema: ResolvedToolcraftAppSchema): Set<string> {
-  const targets = new Set<string>();
-
-  for (const section of schema.panels.controls?.sections ?? []) {
-    for (const control of Object.values(section.controls)) {
-      if (
-        control.type !== "panelActions" &&
-        control.type !== "settingsTransfer" &&
-        !isToolcraftTimelinePanelRuntimeTarget(control.target)
-      ) {
-        targets.add(control.target);
-      }
-    }
-  }
-
-  return targets;
-}
-
 function pickTransferValues(state: ToolcraftState): Record<string, unknown> {
   const values: Record<string, unknown> = {};
-
-  for (const target of getKnownValueTargets(state.schema)) {
-    if (Object.hasOwn(state.values, target)) {
+  const targets = new Set([
+    ...getToolcraftValueControls(state.schema).keys(),
+    ...state.schema.settingsTransfer.additionalValueTargets,
+  ]);
+
+  for (const target of targets) {
+    if (
+      !isToolcraftCanvasSizingTarget(target) &&
+      Object.hasOwn(state.values, target)
+    ) {
       values[target] = state.values[target];
     }
   }
@@ -82,6 +79,15 @@ export function createToolcraftSettingsPayload(
   return {
     appId: state.schema.settingsTransfer.appId,
     canvas: {
+      ...(Object.hasOwn(state.values, "canvas.aspectRatio")
+        ? {
+            aspectRatio: normalizeToolcraftCanvasAspectRatioValue(
+              state.values["canvas.aspectRatio"],
+              state.canvas.size,
+            ),
+          }
+        : {}),
+      mode: state.canvas.mode,
       size: state.canvas.size,
     },
     exportedAt: new Date().toISOString(),
@@ -108,7 +114,7 @@ export function parseToolcraftSettingsPayload(
 
   if (
     value.source !== settingsTransferPayloadSource ||
-    value.version !== settingsTransferPayloadVersion ||
+    (value.version !== 1 && value.version !== settingsTransferPayloadVersion) ||
     value.appId !== schema.settingsTransfer.appId
   ) {
     return null;
@@ -118,64 +124,20 @@ export function parseToolcraftSettingsPayload(
     return null;
   }
 
-  const canvasSize = value.canvas.size;
+  const canvas = parseToolcraftSettingsCanvas({
+    canvas: value.canvas,
+    values: value.values,
+    version: value.version,
+  });
 
-  if (!isRecord(canvasSize)) {
+  if (!canvas) {
     return null;
   }
 
-  return value as ToolcraftSettingsTransferPayload;
-}
-
-function applyCanvasSize(
-  { dispatch, state }: ImportContext,
-  size: ToolcraftSettingsTransferPayload["canvas"]["size"],
-  options: { deriveAspectRatio: boolean },
-): void {
-  const importableTargets = getKnownValueTargets(state.schema);
-
-  if (
-    options.deriveAspectRatio &&
-    importableTargets.has("canvas.aspectRatio") &&
-    isFinitePositiveNumber(size.width) &&
-    isFinitePositiveNumber(size.height)
-  ) {
-    dispatch({
-      history: "merge",
-      historyGroup: settingsTransferImportHistoryGroup,
-      label: "Import settings",
-      target: "canvas.aspectRatio",
-      type: "controls.setValue",
-      value: {
-        height: size.height,
-        mode: "custom",
-        value: `${size.width}:${size.height}`,
-        width: size.width,
-      },
-    });
-  }
-
-  if (isFinitePositiveNumber(size.width)) {
-    dispatch({
-      history: "merge",
-      historyGroup: settingsTransferImportHistoryGroup,
-      label: "Import settings",
-      target: "canvas.size.width",
-      type: "controls.setValue",
-      value: size.width,
-    });
-  }
-
-  if (isFinitePositiveNumber(size.height)) {
-    dispatch({
-      history: "merge",
-      historyGroup: settingsTransferImportHistoryGroup,
-      label: "Import settings",
-      target: "canvas.size.height",
-      type: "controls.setValue",
-      value: size.height,
-    });
-  }
+  return {
+    ...(value as Omit<ToolcraftSettingsTransferPayload, "canvas">),
+    canvas,
+  };
 }
 
 function applyTimeline(
@@ -223,26 +185,36 @@ export function applyToolcraftSettingsPayload(
   context: ImportContext,
   payload: ToolcraftSettingsTransferPayload,
 ): void {
-  const importableTargets = getKnownValueTargets(context.state.schema);
+  const importableTargets = getToolcraftValueControls(context.state.schema);
+  const additionalTargets = new Set(
+    context.state.schema.settingsTransfer.additionalValueTargets,
+  );
 
   for (const [target, value] of Object.entries(payload.values)) {
-    if (!importableTargets.has(target)) {
+    const control = importableTargets.get(target);
+
+    if (
+      isToolcraftCanvasSizingTarget(target) ||
+      (!control && !additionalTargets.has(target))
+    ) {
       continue;
     }
 
+    const normalized = control
+      ? normalizeToolcraftControlValue(control, value)
+      : { accepted: true as const, value };
+
     context.dispatch({
       history: "merge",
       historyGroup: settingsTransferImportHistoryGroup,
       label: "Import settings",
       target,
       type: "controls.setValue",
-      value,
+      value: normalized.accepted ? normalized.value : normalized.fallback,
     });
   }
 
-  applyCanvasSize(context, payload.canvas.size, {
-    deriveAspectRatio: !Object.hasOwn(payload.values, "canvas.aspectRatio"),
-  });
+  applyToolcraftSettingsCanvas(context, payload.canvas);
   applyTimeline(context, payload.timeline);
 }
 

package/templates/runtime/react/app-shell/storage-key-migration.test.ts

@@ -0,0 +1,40 @@
+import { beforeEach, describe, expect, it } from "vitest";
+
+import {
+  getPreviousToolcraftStorageKey,
+  readToolcraftLocalStorageEntry,
+} from "./storage-key-migration";
+
+beforeEach(() => {
+  window.localStorage.clear();
+});
+
+describe("Toolcraft storage key migration", () => {
+  it("prefers the current key", () => {
+    const key = "toolcraft:example:state:v2";
+    const previousKey = getPreviousToolcraftStorageKey(key)!;
+
+    window.localStorage.setItem(key, "current");
+    window.localStorage.setItem(previousKey, "previous");
+
+    expect(readToolcraftLocalStorageEntry(key)).toEqual({
+      storageKey: key,
+      value: "current",
+    });
+  });
+
+  it("reads a previous identity key without copying or deleting it", () => {
+    const key = "toolcraft:example:state:v2";
+    const previousKey = getPreviousToolcraftStorageKey(key)!;
+    const newerPayload = JSON.stringify({ state: {}, version: 3 });
+
+    window.localStorage.setItem(previousKey, newerPayload);
+
+    expect(readToolcraftLocalStorageEntry(key)).toEqual({
+      storageKey: previousKey,
+      value: newerPayload,
+    });
+    expect(window.localStorage.getItem(key)).toBeNull();
+    expect(window.localStorage.getItem(previousKey)).toBe(newerPayload);
+  });
+});

package/templates/runtime/react/app-shell/storage-key-migration.ts

@@ -9,10 +9,21 @@ export function getPreviousToolcraftStorageKey(storageKey: string): string | nul
 }
 
 export function readToolcraftLocalStorageValue(storageKey: string): string | null {
+  return readToolcraftLocalStorageEntry(storageKey)?.value ?? null;
+}
+
+export type ToolcraftLocalStorageEntry = {
+  storageKey: string;
+  value: string;
+};
+
+export function readToolcraftLocalStorageEntry(
+  storageKey: string,
+): ToolcraftLocalStorageEntry | null {
   const currentValue = window.localStorage.getItem(storageKey);
 
   if (currentValue !== null) {
-    return currentValue;
+    return { storageKey, value: currentValue };
   }
 
   const previousStorageKey = getPreviousToolcraftStorageKey(storageKey);
@@ -27,14 +38,7 @@ export function readToolcraftLocalStorageValue(storageKey: string): string | nul
     return null;
   }
 
-  try {
-    window.localStorage.setItem(storageKey, previousValue);
-    window.localStorage.removeItem(previousStorageKey);
-  } catch {
-    // Migration is best-effort; the caller can still use the previous value.
-  }
-
-  return previousValue;
+  return { storageKey: previousStorageKey, value: previousValue };
 }
 
 export function removeToolcraftLocalStorageValue(storageKey: string): void {

package/templates/runtime/react/app-shell/toolbar-panel.tsx

@@ -11,11 +11,13 @@ import {
 } from "@repo/ui";
 import { Moon, Redo2, Sun, Undo2, ZoomIn, ZoomOut } from "lucide-react";
 
-import type { ToolcraftPanelState } from "../../state/types";
+import type { ToolcraftPanelState, ToolcraftState } from "../../state/types";
 import { PanelContainer } from "../panel-host/panel-host";
+import { useToolcraftPanelBinding } from "../panel-host/use-toolcraft-panel-binding";
 import type { PanelPlacement, PanelStateChange } from "../panel-host/panel-host-types";
 import { useToolcraftTheme } from "./theme-runtime";
-import { useToolcraft } from "./use-toolcraft";
+import { useToolcraftCommittedSelector } from "./toolcraft-selectors";
+import { useToolcraftDispatch } from "./use-toolcraft";
 
 export type ToolbarPanelProps = {
   className?: string;
@@ -36,6 +38,10 @@ type ToolbarIconButtonProps = {
 
 const toolbarIconButtonSize = "icon";
 const desktopToolbarTightButtonGapClassName = "-mr-px";
+const selectCanUndo = (state: ToolcraftState) => state.history.undo.length > 0;
+const selectCanRedo = (state: ToolcraftState) => state.history.redo.length > 0;
+const selectToolbar = (state: ToolcraftState) => state.schema.toolbar;
+const selectCommittedZoom = (state: ToolcraftState) => state.canvas.zoom;
 
 function cn(...classNames: Array<string | false | null | undefined>): string {
   return classNames.filter(Boolean).join(" ");
@@ -100,16 +106,28 @@ export function ToolbarPanel({
   onPanelStateChange,
   panelPlacement,
   panelState,
-}: ToolbarPanelProps): React.JSX.Element {
-  const { dispatch, state } = useToolcraft();
+}: ToolbarPanelProps): React.JSX.Element | null {
+  const dispatch = useToolcraftDispatch();
+  const panelBinding = useToolcraftPanelBinding({
+    onPanelStateChange,
+    panelId: "toolbar",
+    panelState,
+  });
+  const resolvedPanelState = panelBinding.panelState;
   const { resolvedTheme, toggleResolvedTheme } = useToolcraftTheme();
   const nextTheme = resolvedTheme === "dark" ? "light" : "dark";
-  const canUndo = state.history.undo.length > 0;
-  const canRedo = state.history.redo.length > 0;
-  const historyEnabled = state.schema.toolbar.history;
-  const radarEnabled = state.schema.toolbar.radar;
-  const themeEnabled = state.schema.toolbar.theme;
-  const zoomEnabled = state.schema.toolbar.zoom;
+  const canUndo = useToolcraftCommittedSelector(selectCanUndo);
+  const canRedo = useToolcraftCommittedSelector(selectCanRedo);
+  const toolbar = useToolcraftCommittedSelector(selectToolbar);
+  const zoom = useToolcraftCommittedSelector(selectCommittedZoom);
+  const historyEnabled = toolbar.history;
+  const radarEnabled = toolbar.radar;
+  const themeEnabled = toolbar.theme;
+  const zoomEnabled = toolbar.zoom;
+
+  if (resolvedPanelState.hidden) {
+    return null;
+  }
 
   const toolbarSurface = (
     <PanelSurface
@@ -158,7 +176,7 @@ export function ToolbarPanel({
               dispatch({ type: "canvas.zoomReset" });
             }}
           >
-            {state.canvas.zoom}%
+            {zoom}%
           </span>
           <ToolbarIconButton
             label="Zoom in"
@@ -194,8 +212,8 @@ export function ToolbarPanel({
 
   return (
     <PanelContainer
-      onPanelStateChange={onPanelStateChange}
-      panelState={panelState}
+      onPanelStateChange={panelBinding.onPanelStateChange}
+      panelState={resolvedPanelState}
       panelType="toolbar"
       placement={panelPlacement ?? (framed ? "frame" : "surface")}
     >