fix: show psd render base overlays

components/agents/AgentPsdTemplateEditorDialog.tsx

@@ -286,6 +286,8 @@ const PREVIEW_STAGE_TARGET_WIDTH = 760;
 const PREVIEW_STAGE_TARGET_HEIGHT = 760;
 const MIN_IMAGE_SCALE = 0.4;
 const MAX_IMAGE_SCALE = 3;
+const PSD_LAYER_Z_INDEX_STEP = 10;
+const PSD_RENDER_BASE_Z_INDEX_OFFSET = 5;
 const SELECTED_LAYER_INTERACTION_Z_BOOST = 1;
 const SELECTED_LAYER_CONTROLS_Z_BOOST = 1000;
 const MIN_TEXT_POSITION_OFFSET = -5000;
@@ -443,10 +445,12 @@ function TemplatePreviewImage({
   decoding = "async",
   fetchPriority,
   loading = "lazy",
+  style,
 }: {
   template: Pick<AgentPsdTemplate, "name" | "previewUrl" | "renderBaseUrl">;
   alt?: string;
   className?: string;
+  style?: CSSProperties;
   width?: number;
   quality?: number;
   preferRenderBase?: boolean;
@@ -479,7 +483,12 @@ function TemplatePreviewImage({
   const src = fallbackUrls[activeUrlIndex] || "";
   if (!src) {
     return (
-      <div aria-label={alt || template.name} className={className} role="img" />
+      <div
+        aria-label={alt || template.name}
+        className={className}
+        role="img"
+        style={style}
+      />
     );
   }
   const intrinsicSize = Math.max(1, Math.round(width || 1));
@@ -500,6 +509,7 @@ function TemplatePreviewImage({
         )
       }
       src={src}
+      style={style}
       width={intrinsicSize}
     />
   );
@@ -2034,9 +2044,21 @@ export function AgentPsdTemplateEditorDialog({
   );
   const layerStackZIndexById = useMemo(() => {
     return new Map(
-      orderedPreviewLayers.map((layer, index) => [layer.id, index + 1])
+      orderedPreviewLayers.map((layer, index) => [
+        layer.id,
+        (index + 1) * PSD_LAYER_Z_INDEX_STEP,
+      ])
     );
   }, [orderedPreviewLayers]);
+  const renderBaseZIndex = useMemo(() => {
+    const defaultSourceImageLayer = getDefaultSourceImageLayer(
+      selectedTemplateLayers
+    );
+    const defaultSourceImageZIndex = defaultSourceImageLayer
+      ? layerStackZIndexById.get(defaultSourceImageLayer.id) || 0
+      : 0;
+    return defaultSourceImageZIndex + PSD_RENDER_BASE_Z_INDEX_OFFSET;
+  }, [layerStackZIndexById, selectedTemplateLayers]);
   const shouldShowCompositeFallback = useMemo(
     () =>
       orderedVisiblePreviewLayers.length === 0 ||
@@ -4086,6 +4108,7 @@ export function AgentPsdTemplateEditorDialog({
                             loading="eager"
                             preferRenderBase
                             quality={68}
+                            style={{ zIndex: renderBaseZIndex }}
                             template={selectedTemplate}
                             width={960}
                           />