feat(canvas): add persistent node favorites with toolbar star and glow

components/canvas/__tests__/base-node-wrapper.test.tsx

@@ -0,0 +1,134 @@
+// @vitest-environment jsdom
+
+import React, { act } from "react";
+import { createRoot, type Root } from "react-dom/client";
+import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
+
+const mocks = vi.hoisted(() => ({
+  queueNodeDataUpdate: vi.fn(async () => undefined),
+  createNodeWithIntersection: vi.fn(async () => undefined),
+  getNode: vi.fn(),
+  getNodes: vi.fn(() => []),
+  getEdges: vi.fn(() => []),
+  setNodes: vi.fn(),
+  deleteElements: vi.fn(async () => undefined),
+}));
+
+vi.mock("@xyflow/react", () => ({
+  NodeToolbar: ({ children }: { children: React.ReactNode }) => (
+    <div data-testid="node-toolbar">{children}</div>
+  ),
+  NodeResizeControl: () => null,
+  Position: { Top: "top" },
+  useNodeId: () => "node-1",
+  useReactFlow: () => ({
+    getNode: mocks.getNode,
+    getNodes: mocks.getNodes,
+    getEdges: mocks.getEdges,
+    setNodes: mocks.setNodes,
+    deleteElements: mocks.deleteElements,
+  }),
+  getConnectedEdges: () => [],
+}));
+
+vi.mock("@/components/canvas/canvas-sync-context", () => ({
+  useCanvasSync: () => ({
+    queueNodeDataUpdate: mocks.queueNodeDataUpdate,
+  }),
+}));
+
+vi.mock("@/components/canvas/canvas-placement-context", () => ({
+  useCanvasPlacement: () => ({
+    createNodeWithIntersection: mocks.createNodeWithIntersection,
+  }),
+}));
+
+import BaseNodeWrapper from "@/components/canvas/nodes/base-node-wrapper";
+
+(globalThis as typeof globalThis & { IS_REACT_ACT_ENVIRONMENT?: boolean }).IS_REACT_ACT_ENVIRONMENT = true;
+
+describe("BaseNodeWrapper", () => {
+  let container: HTMLDivElement | null = null;
+  let root: Root | null = null;
+
+  beforeEach(() => {
+    mocks.queueNodeDataUpdate.mockClear();
+    mocks.createNodeWithIntersection.mockClear();
+    mocks.getNode.mockReset();
+    mocks.getNodes.mockClear();
+    mocks.getEdges.mockClear();
+    mocks.setNodes.mockClear();
+    mocks.deleteElements.mockClear();
+
+    container = document.createElement("div");
+    document.body.appendChild(container);
+    root = createRoot(container);
+  });
+
+  afterEach(async () => {
+    if (root) {
+      await act(async () => {
+        root?.unmount();
+      });
+    }
+    container?.remove();
+    container = null;
+    root = null;
+  });
+
+  async function renderWrapper(nodeData: Record<string, unknown>, selected = true) {
+    mocks.getNode.mockReturnValue({
+      id: "node-1",
+      type: "text",
+      data: nodeData,
+      position: { x: 0, y: 0 },
+      style: {},
+    });
+
+    await act(async () => {
+      root?.render(
+        <BaseNodeWrapper nodeType="text" selected={selected}>
+          <div>Inner node content</div>
+        </BaseNodeWrapper>,
+      );
+    });
+  }
+
+  it("shows favorite toggle with duplicate and delete controls for selected nodes", async () => {
+    await renderWrapper({ label: "Frame" }, true);
+
+    expect(container?.querySelector('button[title="Favorite"]')).toBeTruthy();
+    expect(container?.querySelector('button[title="Duplicate"]')).toBeTruthy();
+    expect(container?.querySelector('button[title="Delete"]')).toBeTruthy();
+  });
+
+  it("toggles favorite and queues merged node data update", async () => {
+    await renderWrapper({ label: "Frame" }, true);
+
+    const favoriteButton = container?.querySelector('button[title="Favorite"]');
+    if (!(favoriteButton instanceof HTMLButtonElement)) {
+      throw new Error("Favorite button not found");
+    }
+
+    await act(async () => {
+      favoriteButton.dispatchEvent(new MouseEvent("click", { bubbles: true }));
+    });
+
+    expect(mocks.queueNodeDataUpdate).toHaveBeenCalledWith({
+      nodeId: "node-1",
+      data: {
+        label: "Frame",
+        isFavorite: true,
+      },
+    });
+    expect(container?.querySelector('button[title="Duplicate"]')).toBeTruthy();
+    expect(container?.querySelector('button[title="Delete"]')).toBeTruthy();
+  });
+
+  it("applies favorite chrome marker on favorite nodes", async () => {
+    await renderWrapper({ label: "Frame", isFavorite: true }, true);
+
+    const rootElement = container?.firstElementChild;
+    expect(rootElement?.className).toContain("node-favorite-chrome");
+  });
+});

components/canvas/__tests__/use-canvas-sync-engine.test.ts

@@ -1,4 +1,6 @@
 import { describe, expect, it, vi } from "vitest";
+import { readFileSync } from "node:fs";
+import { resolve } from "node:path";
 
 import type { Id } from "@/convex/_generated/dataModel";
 import { createCanvasSyncEngineController } from "@/components/canvas/use-canvas-sync-engine";
@@ -75,6 +77,67 @@ describe("useCanvasSyncEngine", () => {
     expect(controller.pendingDataAfterCreateRef.current.has("req-2")).toBe(false);
   });
 
+  it("keeps favorite fields in pinned and deferred optimistic data updates", async () => {
+    const enqueueSyncMutation = vi.fn(async () => undefined);
+
+    const controller = createCanvasSyncEngineController({
+      canvasId: asCanvasId("canvas-1"),
+      isSyncOnline: true,
+      getEnqueueSyncMutation: () => enqueueSyncMutation,
+      getRunBatchRemoveNodes: () => vi.fn(async () => undefined),
+      getRunSplitEdgeAtExistingNode: () => vi.fn(async () => undefined),
+    });
+
+    const favoritePayload = {
+      storageId: "storage-next",
+      filename: "hero.png",
+      isFavorite: true,
+    };
+
+    await controller.queueNodeDataUpdate({
+      nodeId: asNodeId("optimistic_req-favorite"),
+      data: favoritePayload,
+    });
+
+    expect(
+      controller.pendingLocalNodeDataUntilConvexMatchesRef.current.get(
+        "optimistic_req-favorite",
+      ),
+    ).toEqual(favoritePayload);
+
+    await controller.syncPendingMoveForClientRequest(
+      "req-favorite",
+      asNodeId("node-favorite"),
+    );
+
+    expect(enqueueSyncMutation).toHaveBeenCalledWith("updateData", {
+      nodeId: asNodeId("node-favorite"),
+      data: favoritePayload,
+    });
+    expect(
+      controller.pendingLocalNodeDataUntilConvexMatchesRef.current.get("node-favorite"),
+    ).toEqual(favoritePayload);
+  });
+
+  it("uses favorite-preserving payloads in media replacement write paths", () => {
+    const imageNodeSource = readFileSync(
+      resolve(process.cwd(), "components/canvas/nodes/image-node.tsx"),
+      "utf8",
+    );
+    const assetBrowserSource = readFileSync(
+      resolve(process.cwd(), "components/canvas/asset-browser-panel.tsx"),
+      "utf8",
+    );
+    const videoBrowserSource = readFileSync(
+      resolve(process.cwd(), "components/canvas/video-browser-panel.tsx"),
+      "utf8",
+    );
+
+    expect(imageNodeSource).toContain("preserveNodeFavorite(");
+    expect(assetBrowserSource).toContain("preserveNodeFavorite(");
+    expect(videoBrowserSource).toContain("preserveNodeFavorite(");
+  });
+
 
   it("pins local node data immediately when queueing an update", async () => {
     const enqueueSyncMutation = vi.fn(async () => undefined);

components/canvas/__tests__/use-node-local-data.test.tsx

@@ -2,6 +2,7 @@
 
 import React, { act, useEffect } from "react";
 import { createRoot, type Root } from "react-dom/client";
+import { renderToStaticMarkup } from "react-dom/server";
 import { afterEach, describe, expect, it, vi } from "vitest";
 
 import {
@@ -10,6 +11,7 @@ import {
   useCanvasGraphPreviewOverrides,
 } from "@/components/canvas/canvas-graph-context";
 import { useNodeLocalData } from "@/components/canvas/nodes/use-node-local-data";
+import { readNodeFavorite } from "@/lib/canvas-node-favorite";
 
 type AdjustmentData = {
   exposure: number;
@@ -582,3 +584,159 @@ describe("useNodeLocalData preview overrides", () => {
     vi.useRealTimers();
   });
 });
+
+describe("favorite retention in strict local node flows", () => {
+  type LocalDataConfig = {
+    normalize: (value: unknown) => unknown;
+    onSave: (value: unknown) => Promise<void> | void;
+    data: unknown;
+  };
+
+  const createNodeProps = (data: Record<string, unknown>) =>
+    ({
+      id: "node-1",
+      data,
+      selected: false,
+      width: 320,
+      height: 240,
+      dragging: false,
+      zIndex: 0,
+      isConnectable: true,
+      type: "curves",
+      xPos: 0,
+      yPos: 0,
+      positionAbsoluteX: 0,
+      positionAbsoluteY: 0,
+    }) as const;
+
+  const setupNodeHarness = async (modulePath: string) => {
+    vi.resetModules();
+
+    let capturedConfig: LocalDataConfig | null = null;
+    const queueNodeDataUpdate = vi.fn(async () => undefined);
+
+    vi.doMock("@/components/canvas/canvas-sync-context", () => ({
+      useCanvasSync: () => ({
+        queueNodeDataUpdate,
+        queueNodeResize: vi.fn(async () => undefined),
+        status: { isOffline: false },
+      }),
+    }));
+
+    vi.doMock("@/components/canvas/canvas-graph-context", () => ({
+      useCanvasGraph: () => ({ nodes: [], edges: [], previewNodeDataOverrides: new Map() }),
+    }));
+
+    vi.doMock("@/components/canvas/canvas-presets-context", () => ({
+      useCanvasAdjustmentPresets: () => [],
+      useSaveCanvasAdjustmentPreset: () => vi.fn(async () => undefined),
+    }));
+
+    vi.doMock("@/components/canvas/nodes/base-node-wrapper", () => ({
+      default: ({ children }: { children: React.ReactNode }) => <div>{children}</div>,
+    }));
+
+    vi.doMock("@/components/canvas/nodes/adjustment-preview", () => ({
+      default: () => null,
+    }));
+
+    vi.doMock("@/components/ui/select", () => ({
+      Select: ({ children }: { children: React.ReactNode }) => <>{children}</>,
+      SelectContent: ({ children }: { children: React.ReactNode }) => <>{children}</>,
+      SelectItem: ({ children }: { children: React.ReactNode }) => <>{children}</>,
+      SelectTrigger: ({ children }: { children: React.ReactNode }) => <>{children}</>,
+      SelectValue: () => null,
+    }));
+
+    vi.doMock("@/src/components/tool-ui/parameter-slider", () => ({
+      ParameterSlider: () => null,
+    }));
+
+    vi.doMock("@/hooks/use-pipeline-preview", () => ({
+      usePipelinePreview: () => ({
+        canvasRef: { current: null },
+        hasSource: false,
+        isRendering: false,
+        previewAspectRatio: 1,
+        histogram: null,
+        error: null,
+      }),
+    }));
+
+    vi.doMock("@/lib/canvas-render-preview", () => ({
+      collectPipelineFromGraph: () => [],
+      getSourceImageFromGraph: () => null,
+      shouldFastPathPreviewPipeline: () => false,
+      findSourceNodeFromGraph: () => null,
+      resolveRenderPreviewInputFromGraph: () => ({ sourceUrl: null, steps: [] }),
+    }));
+
+    vi.doMock("@/components/ui/dialog", () => ({
+      Dialog: ({ children }: { children: React.ReactNode }) => <>{children}</>,
+      DialogContent: ({ children }: { children: React.ReactNode }) => <>{children}</>,
+      DialogTitle: ({ children }: { children: React.ReactNode }) => <>{children}</>,
+    }));
+
+    vi.doMock("@/components/canvas/nodes/use-node-local-data", () => ({
+      useNodeLocalData: (config: LocalDataConfig) => {
+        capturedConfig = config;
+        return {
+          localData: config.normalize(config.data),
+          applyLocalData: vi.fn(),
+          updateLocalData: vi.fn(),
+        };
+      },
+    }));
+
+    vi.doMock("next-intl", () => ({
+      useTranslations: () => () => "",
+    }));
+
+    vi.doMock("@/lib/toast", () => ({
+      toast: { success: vi.fn() },
+    }));
+
+    vi.doMock("@xyflow/react", () => ({
+      Handle: () => null,
+      Position: { Left: "left", Right: "right" },
+    }));
+
+    const importedModule = (await import(modulePath)) as {
+      default: React.ComponentType<Record<string, unknown>>;
+    };
+    renderToStaticMarkup(React.createElement(importedModule.default, createNodeProps({ isFavorite: true })));
+
+    if (capturedConfig === null) {
+      throw new Error("useNodeLocalData config was not captured");
+    }
+
+    const resolvedConfig = capturedConfig as LocalDataConfig;
+    return { capturedConfig: resolvedConfig, queueNodeDataUpdate };
+  };
+
+  it("preserves isFavorite in normalized local data and saved payloads", async () => {
+    const targets = [
+      "@/components/canvas/nodes/crop-node",
+      "@/components/canvas/nodes/curves-node",
+      "@/components/canvas/nodes/color-adjust-node",
+      "@/components/canvas/nodes/light-adjust-node",
+      "@/components/canvas/nodes/detail-adjust-node",
+    ];
+
+    for (const modulePath of targets) {
+      const { capturedConfig, queueNodeDataUpdate } = await setupNodeHarness(modulePath);
+
+      const normalizedWithFavorite = capturedConfig.normalize({ isFavorite: true });
+      expect(readNodeFavorite(normalizedWithFavorite)).toBe(true);
+
+      const strictNextData = capturedConfig.normalize({});
+      expect(readNodeFavorite(strictNextData)).toBe(false);
+
+      await capturedConfig.onSave(strictNextData);
+      const queueCalls = (queueNodeDataUpdate as unknown as { mock: { calls: Array<Array<unknown>> } })
+        .mock.calls;
+      const queuedPayload = queueCalls[0]?.[0] as { data?: unknown } | undefined;
+      expect(readNodeFavorite(queuedPayload?.data)).toBe(true);
+    }
+  });
+});