fix(design): persist pointer-driven layer reorders

templates/design/app/components/design/LayersPanel.spec.ts

@@ -0,0 +1,29 @@
+import { describe, expect, test } from "vitest";
+
+import {
+  canUseActiveDragStateForDrop,
+  type LayersPanelMoveIntent,
+} from "./LayersPanel";
+
+const dragState = { sourceId: "source", draggedIds: ["source"] };
+const intent: LayersPanelMoveIntent = {
+  draggedIds: ["source"],
+  targetId: "target",
+  placement: "inside",
+};
+
+describe("canUseActiveDragStateForDrop", () => {
+  test("requires a matching active drop intent for empty payload fallback", () => {
+    expect(canUseActiveDragStateForDrop(dragState, null, "target")).toBe(false);
+    expect(
+      canUseActiveDragStateForDrop(
+        dragState,
+        { ...intent, targetId: "other" },
+        "target",
+      ),
+    ).toBe(false);
+    expect(canUseActiveDragStateForDrop(dragState, intent, "target")).toBe(
+      true,
+    );
+  });
+});

templates/design/app/components/design/LayersPanel.tsx

@@ -153,7 +153,7 @@
   source: "keyboard" | "pointer";
 }
 
-export interface LayersPanelMoveIntent {
+interface LayersPanelMoveIntent {
   draggedIds: string[];
   targetId: string;
   placement: "before" | "after" | "inside";
@@ -319,6 +319,22 @@
 let activeDragState: { sourceId: string; draggedIds: string[] } | null = null;
 let activeDropIntent: LayersPanelMoveIntent | null = null;
 
+function canUseActiveDragStateForDrop(
+  dragState: { sourceId: string; draggedIds: string[] } | null,
+  dropIntent: LayersPanelMoveIntent | null,
+  targetId: string,
+): boolean {
+  return Boolean(
+    dragState &&
+    dragState.sourceId !== targetId &&
+    dragState.draggedIds.includes(dragState.sourceId) &&
+    dropIntent?.targetId === targetId,
+  );
+}
+
+export { canUseActiveDragStateForDrop };
+export type { LayersPanelMoveIntent };
+
 // Module-level continuous-toggle-drag state for the eye/lock icon
 // "click-drag across a run of rows" gesture (Figma parity, unique-paths.md
 // #13): a plain mousedown/up, not HTML5 DnD, so per-row React state can't
@@ -1411,7 +1427,7 @@
       });
     });
     return () => window.cancelAnimationFrame(frame);
   }, [activeScreenId, screenOverviewActive, screenRows]);
 
   const collapseLayers = useCallback(() => {
     onExpandedIdsChange(collapsedIds);
@@ -1555,8 +1571,8 @@
         ref={layersPanelRef}
         data-layers-panel
         className={cn(
           "[--design-baseline-unit:4px] [--design-control-height:20px] [--design-icon-size:12px] [--design-row-height:24px] [--design-section-height:28px]",
           "flex h-full min-h-0 w-full flex-col overflow-hidden bg-[var(--design-editor-panel-bg)] text-[11px] font-normal text-foreground",
           className,
         )}
         aria-label={labels.title}
@@ -1565,12 +1581,12 @@
           <div
             ref={screenSectionRef}
             data-screen-section
             className="flex min-h-0 shrink-0 flex-col overflow-hidden border-b border-[var(--design-editor-panel-divider-color)] pb-1"
             style={{
               maxHeight: "30%",
               ...(screenSectionHeight === null
                 ? {}
                 : { height: `${screenSectionHeight}px` }),
             }}
           >
             <div
@@ -2297,6 +2313,12 @@
     } catch {
       // Ignore malformed drag payloads and fall back to the primary id.
     }
+    if (
+      !draggedIds.some(Boolean) &&
+      canUseActiveDragStateForDrop(activeDragState, activeDropIntent, node.id)
+    ) {
+      draggedIds = activeDragState!.draggedIds;
+    }
     const cleanedIds = draggedIds.filter(
       (id) => id && id !== node.id && !id.startsWith("__"),
     );