@pixel-point/toolcraft 0.0.15 → 0.0.17

package/templates/runtime/react/app-shell/toolcraft-root.tsx

@@ -2,22 +2,35 @@
 
 import * as React from "react";
 
-import type { ResolvedToolcraftAppSchema } from "../../schema/types";
+import type { AnyToolcraftRendererPipelineRegistration } from "../../rendering";
+import type {
+  ResolvedToolcraftAppSchema,
+} from "../../schema/types";
 import { createToolcraftState } from "../../state/create-template-state";
-import {
-  createToolcraftPersistenceSnapshot,
-  getToolcraftPersistenceKey,
-  mergeToolcraftInitialState,
-  parseToolcraftPersistenceSnapshot,
-} from "../../state/persistence";
-import { toolcraftReducer } from "../../state/reducer";
+import { mergeToolcraftInitialState } from "../../state/persistence";
+import { createToolcraftExternalStore } from "../../state/toolcraft-external-store";
 import type {
   ToolcraftCommand,
   ToolcraftInitialState,
   ToolcraftState,
 } from "../../state/types";
-import { readToolcraftLocalStorageValue } from "./storage-key-migration";
 import { ToolcraftThemeProvider } from "./theme-runtime";
+import { ToolcraftPipelineProvider } from "./toolcraft-pipeline-context";
+import { ToolcraftSourceAssetProvider } from "./toolcraft-source-asset-context";
+import { ToolcraftStoreContext } from "./toolcraft-store-context";
+import type { ToolcraftModelPresentationMode } from "../model-rendering/model-render-binding";
+import {
+  resolveToolcraftModelPresentationMode,
+  ToolcraftModelPresentationModeContext,
+} from "../model-rendering/model-presentation-mode";
+import {
+  ToolcraftPersistenceStatusProvider,
+  useToolcraftPersistence,
+} from "./use-toolcraft-persistence";
+import {
+  collectToolcraftBinaryMediaHydrationJobs,
+} from "../../source-assets/binary-media-hydration";
+import { readToolcraftPersistenceBootstrap } from "./toolcraft-persistence-bootstrap";
 
 export type ToolcraftContextValue = {
   dispatch: React.Dispatch<ToolcraftCommand>;
@@ -29,51 +42,25 @@ export const ToolcraftContext = React.createContext<ToolcraftContextValue | null
 export type ToolcraftRootProps = {
   children: React.ReactNode;
   initialState?: ToolcraftInitialState;
+  modelPresentation?: ToolcraftModelPresentationMode;
+  rendererPipelineRegistration?: AnyToolcraftRendererPipelineRegistration;
   schema: ResolvedToolcraftAppSchema;
 };
 
-function readPersistedInitialState(
-  schema: ResolvedToolcraftAppSchema,
-): ToolcraftInitialState | undefined {
-  const storageKey = getToolcraftPersistenceKey(schema.persistence);
-
-  if (!storageKey || typeof window === "undefined") {
-    return undefined;
-  }
-
-  try {
-    return parseToolcraftPersistenceSnapshot(
-      schema,
-      readToolcraftLocalStorageValue(storageKey),
-    );
-  } catch {
-    return undefined;
-  }
-}
-
-function writePersistedState(
-  schema: ResolvedToolcraftAppSchema,
-  state: ToolcraftState,
-): void {
-  const storageKey = getToolcraftPersistenceKey(schema.persistence);
-
-  if (!storageKey || typeof window === "undefined") {
-    return;
-  }
-
-  const snapshot = createToolcraftPersistenceSnapshot(state, schema.persistence);
-
-  if (!snapshot) {
-    return;
-  }
-
-  try {
-    window.localStorage.setItem(storageKey, JSON.stringify(snapshot));
-  } catch {
-    // Persistence is best-effort; runtime state stays authoritative when storage is unavailable.
-  }
-}
-
+const nativeTextEditingInputTypes = new Set([
+  "date",
+  "datetime-local",
+  "email",
+  "month",
+  "number",
+  "password",
+  "search",
+  "tel",
+  "text",
+  "time",
+  "url",
+  "week",
+]);
 function isEditableKeyboardTarget(target: EventTarget | null): boolean {
   if (!target || typeof target !== "object") {
     return false;
@@ -83,19 +70,30 @@ function isEditableKeyboardTarget(target: EventTarget | null): boolean {
     closest?: (selector: string) => Element | null;
     isContentEditable?: boolean;
     tagName?: string;
+    type?: string;
   };
 
   if (candidate.isContentEditable) {
     return true;
   }
 
-  if (typeof candidate.closest === "function" && candidate.closest("[contenteditable='true']")) {
+  if (
+    typeof candidate.closest === "function" &&
+    candidate.closest("[contenteditable='true']")
+  ) {
     return true;
   }
 
   const tagName = candidate.tagName?.toLowerCase();
 
-  return tagName === "input" || tagName === "textarea" || tagName === "select";
+  if (tagName === "textarea" || tagName === "select") {
+    return true;
+  }
+
+  return (
+    tagName === "input" &&
+    nativeTextEditingInputTypes.has(candidate.type?.toLowerCase() ?? "text")
+  );
 }
 
 function isUndoShortcut(event: KeyboardEvent): boolean {
@@ -120,23 +118,42 @@ function isRedoShortcut(event: KeyboardEvent): boolean {
 export function ToolcraftRoot({
   children,
   initialState,
+  modelPresentation,
+  rendererPipelineRegistration,
   schema,
 }: ToolcraftRootProps) {
-  const [state, dispatch] = React.useReducer(
-    toolcraftReducer,
-    { initialState, schema },
-    ({ initialState, schema }) =>
+  const [persistenceBootstrap] = React.useState(() =>
+    readToolcraftPersistenceBootstrap(schema),
+  );
+  const [store] = React.useState(() =>
+    createToolcraftExternalStore(
       createToolcraftState(
         schema,
-        mergeToolcraftInitialState(readPersistedInitialState(schema), initialState),
+        mergeToolcraftInitialState(persistenceBootstrap.initialState, initialState),
       ),
+    ),
+  );
+  const [binaryMediaHydrationJobs] = React.useState(() => [
+    ...persistenceBootstrap.mediaHydrationJobs,
+    ...collectToolcraftBinaryMediaHydrationJobs(initialState?.mediaAssets),
+  ]);
+  const state = React.useSyncExternalStore(
+    store.subscribe,
+    store.getState,
+    store.getState,
   );
-  const latestStateRef = React.useRef(state);
+  const dispatch: React.Dispatch<ToolcraftCommand> = store.dispatch;
+  const persistenceStatus = useToolcraftPersistence(schema, store, {
+    blockedReason: persistenceBootstrap.blockedReason,
+    cleanupStorageKeys: persistenceBootstrap.cleanupStorageKeys,
+    mediaMigrationResourceKeys:
+      persistenceBootstrap.mediaMigrationResourceKeys,
+  });
   const value = React.useMemo(() => ({ dispatch, state }), [dispatch, state]);
-
-  React.useEffect(() => {
-    latestStateRef.current = state;
-  }, [state]);
+  const resolvedModelPresentation = React.useMemo(
+    () => resolveToolcraftModelPresentationMode(schema, modelPresentation),
+    [modelPresentation, schema],
+  );
 
   React.useEffect(() => {
     if (!schema.toolbar.history || typeof document === "undefined") {
@@ -167,37 +184,32 @@ export function ToolcraftRoot({
     };
   }, [dispatch, schema.toolbar.history]);
 
-  React.useEffect(() => {
-    if (schema.persistence.storage !== "localStorage") {
-      return undefined;
-    }
-
-    const persistTimer = window.setTimeout(() => {
-      writePersistedState(schema, state);
-    }, 120);
-
-    return () => window.clearTimeout(persistTimer);
-  }, [schema, state]);
-
-  React.useEffect(() => {
-    if (schema.persistence.storage !== "localStorage") {
-      return undefined;
-    }
-
-    const handlePageHide = () => {
-      writePersistedState(schema, latestStateRef.current);
-    };
-
-    window.addEventListener("pagehide", handlePageHide);
-
-    return () => {
-      window.removeEventListener("pagehide", handlePageHide);
-    };
-  }, [schema]);
+  const content = (
+    <ToolcraftPersistenceStatusProvider status={persistenceStatus}>
+      <ToolcraftModelPresentationModeContext.Provider
+        value={resolvedModelPresentation}
+      >
+        <ToolcraftThemeProvider>
+          <ToolcraftStoreContext.Provider value={store}>
+            <ToolcraftSourceAssetProvider
+              binaryMediaHydrationJobs={binaryMediaHydrationJobs}
+              store={store}
+            >
+              <ToolcraftContext.Provider value={value}>
+                {children}
+              </ToolcraftContext.Provider>
+            </ToolcraftSourceAssetProvider>
+          </ToolcraftStoreContext.Provider>
+        </ToolcraftThemeProvider>
+      </ToolcraftModelPresentationModeContext.Provider>
+    </ToolcraftPersistenceStatusProvider>
+  );
 
-  return (
-    <ToolcraftThemeProvider>
-      <ToolcraftContext.Provider value={value}>{children}</ToolcraftContext.Provider>
-    </ToolcraftThemeProvider>
+  return rendererPipelineRegistration ? (
+    <ToolcraftPipelineProvider registration={rendererPipelineRegistration}>
+      {content}
+    </ToolcraftPipelineProvider>
+  ) : (
+    content
   );
 }

package/templates/runtime/react/app-shell/toolcraft-selector-lanes.test.tsx

@@ -0,0 +1,338 @@
+import { act, cleanup, render } from "@testing-library/react";
+import { afterEach, describe, expect, it, vi } from "vitest";
+
+import { defineToolcraft } from "../../schema/define-toolcraft";
+import { createToolcraftState } from "../../state/create-template-state";
+import { createState } from "../../state/reducer-test-utils";
+import { createToolcraftExternalStore } from "../../state/toolcraft-external-store";
+import type { ToolcraftExternalStore } from "../../state/toolcraft-external-store";
+import type { ToolcraftCommand } from "../../state/types";
+import { useToolcraftStoreSelector } from "./toolcraft-selectors";
+import { ToolcraftStoreContext } from "./toolcraft-store-context";
+
+const valueDependencies = [{ kind: "value", target: "value.first" }] as const;
+const otherValueDependencies = [
+  { kind: "value", target: "value.second" },
+] as const;
+const playbackDependencies = [{ kind: "playback" }] as const;
+const viewportDependencies = [{ kind: "viewport.zoom" }] as const;
+const firstKeyframeDependencies = [
+  { kind: "keyframeGroup", target: "value.first" },
+] as const;
+const secondKeyframeDependencies = [
+  { kind: "keyframeGroup", target: "value.second" },
+] as const;
+
+const keyframeEditCommands: Array<{
+  command: ToolcraftCommand;
+  label: string;
+}> = [
+  {
+    command: {
+      keyframeId: "value.first::1",
+      timeSeconds: 2,
+      type: "timeline.moveKeyframe",
+    },
+    label: "move",
+  },
+  {
+    command: {
+      keyframeId: "value.first::1",
+      type: "timeline.deleteKeyframe",
+    },
+    label: "delete",
+  },
+  {
+    command: {
+      easing: { type: "step" },
+      keyframeId: "value.first::1",
+      type: "timeline.changeKeyframeEasing",
+    },
+    label: "easing change",
+  },
+];
+
+function createSelectorLaneStore() {
+  const schema = defineToolcraft({
+    canvas: { enabled: true },
+    panels: {
+      controls: {
+        sections: [
+          {
+            controls: {
+              first: {
+                defaultValue: 1,
+                target: "value.first",
+                type: "slider",
+              },
+              second: {
+                defaultValue: 2,
+                target: "value.second",
+                type: "slider",
+              },
+            },
+          },
+        ],
+        title: "Controls",
+      },
+    },
+  });
+
+  return createToolcraftExternalStore(createToolcraftState(schema));
+}
+
+function createKeyframeLaneStore() {
+  return createToolcraftExternalStore(
+    createState({
+      timeline: {
+        keyframeGroups: [
+          {
+            controlId: "value.first",
+            keyframes: [
+              {
+                controlId: "value.first",
+                controlLabel: "First",
+                id: "value.first::1",
+                timeSeconds: 1,
+                value: 10,
+                valueLabel: "10",
+              },
+            ],
+            label: "First",
+          },
+          {
+            controlId: "value.second",
+            keyframes: [
+              {
+                controlId: "value.second",
+                controlLabel: "Second",
+                id: "value.second::1",
+                timeSeconds: 1,
+                value: 20,
+                valueLabel: "20",
+              },
+            ],
+            label: "Second",
+          },
+        ],
+      },
+    }),
+  );
+}
+
+function LaneProvider({
+  children,
+  store,
+}: {
+  children: React.ReactNode;
+  store: ToolcraftExternalStore;
+}) {
+  return (
+    <ToolcraftStoreContext.Provider value={store}>
+      {children}
+    </ToolcraftStoreContext.Provider>
+  );
+}
+
+afterEach(cleanup);
+
+describe("Toolcraft selector execution lanes", () => {
+  it("does not execute selectors outside their changed dependency fields", () => {
+    const store = createSelectorLaneStore();
+    const executions = {
+      playback: vi.fn(),
+      otherValue: vi.fn(),
+      value: vi.fn(),
+      viewport: vi.fn(),
+    };
+
+    function ValueProbe() {
+      useToolcraftStoreSelector(
+        (state) => {
+          executions.value();
+          return state.values["value.first"];
+        },
+        Object.is,
+        valueDependencies,
+      );
+      return null;
+    }
+
+    function PlaybackProbe() {
+      useToolcraftStoreSelector(
+        (state) => {
+          executions.playback();
+          return state.timeline.currentTimeSeconds;
+        },
+        Object.is,
+        playbackDependencies,
+      );
+      return null;
+    }
+
+    function OtherValueProbe() {
+      useToolcraftStoreSelector(
+        (state) => {
+          executions.otherValue();
+          return state.values["value.second"];
+        },
+        Object.is,
+        otherValueDependencies,
+      );
+      return null;
+    }
+
+    function ViewportProbe() {
+      useToolcraftStoreSelector(
+        (state) => {
+          executions.viewport();
+          return state.canvas.zoom;
+        },
+        Object.is,
+        viewportDependencies,
+      );
+      return null;
+    }
+
+    render(
+      <LaneProvider store={store}>
+        <ValueProbe />
+        <OtherValueProbe />
+        <PlaybackProbe />
+        <ViewportProbe />
+      </LaneProvider>,
+    );
+
+    const initial = {
+      playback: executions.playback.mock.calls.length,
+      otherValue: executions.otherValue.mock.calls.length,
+      value: executions.value.mock.calls.length,
+      viewport: executions.viewport.mock.calls.length,
+    };
+
+    act(() => {
+      store.dispatchTransient({
+        currentTimeSeconds: 1,
+        type: "timeline.setCurrentTime",
+      });
+    });
+
+    expect(executions.playback.mock.calls.length).toBeGreaterThan(
+      initial.playback,
+    );
+    expect(executions.value).toHaveBeenCalledTimes(initial.value);
+    expect(executions.otherValue).toHaveBeenCalledTimes(initial.otherValue);
+    expect(executions.viewport).toHaveBeenCalledTimes(initial.viewport);
+
+    const afterPlayback = {
+      playback: executions.playback.mock.calls.length,
+      otherValue: executions.otherValue.mock.calls.length,
+      value: executions.value.mock.calls.length,
+      viewport: executions.viewport.mock.calls.length,
+    };
+
+    act(() => {
+      store.dispatchTransient({
+        offset: { x: 0, y: 0 },
+        type: "canvas.setViewport",
+        zoom: 150,
+      });
+    });
+
+    expect(executions.viewport.mock.calls.length).toBeGreaterThan(
+      afterPlayback.viewport,
+    );
+    expect(executions.value).toHaveBeenCalledTimes(afterPlayback.value);
+    expect(executions.otherValue).toHaveBeenCalledTimes(
+      afterPlayback.otherValue,
+    );
+    expect(executions.playback).toHaveBeenCalledTimes(
+      afterPlayback.playback,
+    );
+
+    const afterViewport = {
+      playback: executions.playback.mock.calls.length,
+      otherValue: executions.otherValue.mock.calls.length,
+      value: executions.value.mock.calls.length,
+      viewport: executions.viewport.mock.calls.length,
+    };
+
+    act(() => {
+      store.dispatch({
+        target: "value.first",
+        type: "controls.setValue",
+        value: 10,
+      });
+    });
+
+    expect(executions.value.mock.calls.length).toBeGreaterThan(
+      afterViewport.value,
+    );
+    expect(executions.otherValue).toHaveBeenCalledTimes(
+      afterViewport.otherValue,
+    );
+    expect(executions.playback).toHaveBeenCalledTimes(
+      afterViewport.playback,
+    );
+    expect(executions.viewport).toHaveBeenCalledTimes(
+      afterViewport.viewport,
+    );
+  });
+
+  it.each(keyframeEditCommands)(
+    "does not execute target B selector for target A $label",
+    ({ command }) => {
+      const store = createKeyframeLaneStore();
+      const executions = { first: vi.fn(), second: vi.fn() };
+
+      function FirstKeyframeProbe() {
+        useToolcraftStoreSelector(
+          (state) => {
+            executions.first();
+            return state.timeline.keyframeGroups.find(
+              (group) => group.controlId === "value.first",
+            );
+          },
+          Object.is,
+          firstKeyframeDependencies,
+        );
+        return null;
+      }
+
+      function SecondKeyframeProbe() {
+        useToolcraftStoreSelector(
+          (state) => {
+            executions.second();
+            return state.timeline.keyframeGroups.find(
+              (group) => group.controlId === "value.second",
+            );
+          },
+          Object.is,
+          secondKeyframeDependencies,
+        );
+        return null;
+      }
+
+      render(
+        <LaneProvider store={store}>
+          <FirstKeyframeProbe />
+          <SecondKeyframeProbe />
+        </LaneProvider>,
+      );
+
+      const initialFirstExecutions = executions.first.mock.calls.length;
+      const initialSecondExecutions = executions.second.mock.calls.length;
+
+      act(() => {
+        store.dispatch(command);
+      });
+
+      expect(executions.first.mock.calls.length).toBeGreaterThan(
+        initialFirstExecutions,
+      );
+      expect(executions.second).toHaveBeenCalledTimes(
+        initialSecondExecutions,
+      );
+    },
+  );
+});