From 0dcc759c80cb12a382cc6874dcfbdc8704157c15 Mon Sep 17 00:00:00 2001
From: Your Name <your.email@example.com>
Date: Thu, 4 Jun 2026 11:22:12 +0800
Subject: [PATCH] fix: preserve psd clipped image layer order

---
 .../agents/AgentPsdTemplateEditorDialog.tsx   | 49 +++++++++++++-----
 lib/agents/psd-template-renderer.ts           | 50 +++----------------
 2 files changed, 45 insertions(+), 54 deletions(-)

diff --git a/components/agents/AgentPsdTemplateEditorDialog.tsx b/components/agents/AgentPsdTemplateEditorDialog.tsx
index e4e22e7fa..5d31778bb 100644
--- a/components/agents/AgentPsdTemplateEditorDialog.tsx
+++ b/components/agents/AgentPsdTemplateEditorDialog.tsx
@@ -1713,6 +1713,27 @@ function getAssignedImageFrameLayer(
   return layers.find((item) => item.id === layer.clipMaskLayerId) || layer;
 }
 
+function shouldRenderAssignedImageLayerPreview(params: {
+  layer: AgentPsdTemplateImageLayerSlot;
+  hiddenLayerIdSet: Set<string>;
+}) {
+  const { layer, hiddenLayerIdSet } = params;
+  if (hiddenLayerIdSet.has(layer.id)) {
+    return false;
+  }
+
+  if (
+    layer.forceClipMask &&
+    layer.clipMaskLayerId &&
+    layer.clipMaskLayerId !== layer.id &&
+    hiddenLayerIdSet.has(layer.clipMaskLayerId)
+  ) {
+    return false;
+  }
+
+  return true;
+}
+
 function hasEditedTextValue(
   layer: AgentPsdTemplateTextLayerSlot,
   value: string
@@ -2253,15 +2274,14 @@ export function AgentPsdTemplateEditorDialog({
       ])
     );
   }, [orderedPreviewLayers]);
+  const defaultSourceImageLayerId =
+    getDefaultSourceImageLayer(selectedTemplateLayers)?.id || "";
   const renderBaseZIndex = useMemo(() => {
-    const defaultSourceImageLayer = getDefaultSourceImageLayer(
-      selectedTemplateLayers
-    );
-    const defaultSourceImageZIndex = defaultSourceImageLayer
-      ? layerStackZIndexById.get(defaultSourceImageLayer.id) || 0
+    const defaultSourceImageZIndex = defaultSourceImageLayerId
+      ? layerStackZIndexById.get(defaultSourceImageLayerId) || 0
       : 0;
     return defaultSourceImageZIndex + PSD_RENDER_BASE_Z_INDEX_OFFSET;
-  }, [layerStackZIndexById, selectedTemplateLayers]);
+  }, [defaultSourceImageLayerId, layerStackZIndexById]);
   const shouldShowCompositeFallback = useMemo(
     () =>
       orderedVisiblePreviewLayers.length === 0 ||
@@ -4393,6 +4413,15 @@ export function AgentPsdTemplateEditorDialog({
                             if (isAgentPsdImageLayerSlot(layer)) {
                               const assignedUrl =
                                 effectiveImageAssignments[layer.id];
+                              if (
+                                assignedUrl &&
+                                !shouldRenderAssignedImageLayerPreview({
+                                  layer,
+                                  hiddenLayerIdSet,
+                                })
+                              ) {
+                                return null;
+                              }
                               const layerImageUrl =
                                 assignedUrl ||
                                 getPsdLayerPreviewSourceUrl(layer);
@@ -4429,14 +4458,10 @@ export function AgentPsdTemplateEditorDialog({
                                     ),
                                   }
                                 : layerBoxStyle;
-                              const assignedFrameBaseZIndex =
-                                layerStackZIndexById.get(
-                                  assignedFrameLayer.id
-                                ) || baseZIndex;
                               const previewZIndex = assignedUrl
-                                ? assignedFrameLayer.id === layer.id
+                                ? layer.id === defaultSourceImageLayerId
                                   ? Math.max(baseZIndex, renderBaseZIndex + 1)
-                                  : assignedFrameBaseZIndex + 1
+                                  : baseZIndex
                                 : baseZIndex;
 
                               return (
diff --git a/lib/agents/psd-template-renderer.ts b/lib/agents/psd-template-renderer.ts
index 71de72acf..09456cfbd 100644
--- a/lib/agents/psd-template-renderer.ts
+++ b/lib/agents/psd-template-renderer.ts
@@ -912,30 +912,6 @@ export async function renderAgentPsdTemplate(params: {
     }
   }
 
-  function getAssignedImageRenderFrameLayer(layer: AgentPsdTemplateImageLayerSlot) {
-    if (!layer.forceClipMask || !layer.clipMaskLayerId) {
-      return layer;
-    }
-
-    return layerMap.get(layer.clipMaskLayerId) || layer;
-  }
-
-  const assignedImageLayersByFrameId = new Map<string, AgentPsdTemplateImageLayerSlot[]>();
-  for (const layer of orderedTemplateLayers) {
-    if (
-      hiddenLayerIdSet.has(layer.id) ||
-      !isAgentPsdImageLayerSlot(layer) ||
-      !String(imageAssignments[layer.id] || "").trim()
-    ) {
-      continue;
-    }
-
-    const frameLayer = getAssignedImageRenderFrameLayer(layer);
-    const currentLayers = assignedImageLayersByFrameId.get(frameLayer.id) || [];
-    currentLayers.push(layer);
-    assignedImageLayersByFrameId.set(frameLayer.id, currentLayers);
-  }
-
   const appendedImageAssignmentLayerIds = new Set<string>();
   async function appendAssignedImageLayer(layer: AgentPsdTemplateImageLayerSlot) {
     if (appendedImageAssignmentLayerIds.has(layer.id)) {
@@ -954,6 +930,13 @@ export async function renderAgentPsdTemplate(params: {
       layer.forceClipMask && layer.clipMaskLayerId
         ? layerMap.get(layer.clipMaskLayerId)
         : null;
+    if (
+      clipMaskLayer &&
+      clipMaskLayer.id !== layer.id &&
+      hiddenLayerIdSet.has(clipMaskLayer.id)
+    ) {
+      return;
+    }
     const renderFrameLayer = clipMaskLayer || layer;
     const renderFrameContentBounds =
       clipMaskLayer && isAgentPsdImageLayerSlot(clipMaskLayer)
@@ -1093,14 +1076,6 @@ export async function renderAgentPsdTemplate(params: {
     });
   }
 
-  async function appendAssignedImagesForFrameLayer(frameLayerId: string) {
-    for (const assignedLayer of assignedImageLayersByFrameId.get(frameLayerId) || []) {
-      if (assignedLayer.id !== frameLayerId) {
-        await appendAssignedImageLayer(assignedLayer);
-      }
-    }
-  }
-
   if (
     shouldUseRenderBaseFallback &&
     (!defaultSourceImageLayerId || hiddenLayerIdSet.has(defaultSourceImageLayerId))
@@ -1119,11 +1094,9 @@ export async function renderAgentPsdTemplate(params: {
 
     if (!isAgentPsdTemplateLayerUserEditable(layer)) {
       if (shouldUseRenderBaseFallback || shouldUseRenderSegments) {
-        await appendAssignedImagesForFrameLayer(layer.id);
         continue;
       }
       await appendStoredLayer(layer, { optional: shouldUseRenderBaseFallback });
-      await appendAssignedImagesForFrameLayer(layer.id);
       continue;
     }
 
@@ -1137,15 +1110,10 @@ export async function renderAgentPsdTemplate(params: {
         if (isDefaultSourceImageLayer) {
           await appendRenderBaseOverlay();
         }
-        await appendAssignedImagesForFrameLayer(layer.id);
         continue;
       }
 
-      const renderFrameLayer = getAssignedImageRenderFrameLayer(layer);
-      if (renderFrameLayer.id === layer.id) {
-        await appendAssignedImageLayer(layer);
-      }
-      await appendAssignedImagesForFrameLayer(layer.id);
+      await appendAssignedImageLayer(layer);
       continue;
     }
 
@@ -1169,7 +1137,6 @@ export async function renderAgentPsdTemplate(params: {
             optional: shouldUseRenderBaseFallback,
           });
         }
-        await appendAssignedImagesForFrameLayer(layer.id);
         continue;
       }
       const textAlign = resolveAgentPsdTextLayerEffectiveAlign(layer);
@@ -1279,7 +1246,6 @@ export async function renderAgentPsdTemplate(params: {
         height: overlayFrame.height,
       });
       if (!didAppend) continue;
-      await appendAssignedImagesForFrameLayer(layer.id);
     }
   }