editor: drop into tagged slot dropzones ([data-cms-slot])

Templates mark visual edge slots with data-cms-slot/-parent. The drag
engine now resolves those zones first (slot-scoped index, acceptsSlot
filter), sorts within the dragged block's own slot, and the overlay
shows a slot add-button so empty zones are discoverable. dnd unit
tests cover slot hit/index/refusal/same-slot sort.

🤖 Generated with Codebuff
Co-Authored-By: Codebuff <noreply@codebuff.com>

test/dnd.test.ts

@@ -1,6 +1,6 @@
 import { describe, expect, it } from 'vitest'
-import { dropTarget } from '../src/page/dnd'
-import type { DndBlock } from '../src/page/dnd'
+import { dropTarget, moveTarget } from '../src/page/dnd'
+import type { DndBlock, DndSlot } from '../src/page/dnd'
 
 const r = (y: number, h = 100, x = 0, w = 600) => ({ x, y, w, h })
 // page: A (container: a1, a2) , B (container, empty), C (leaf)
@@ -36,3 +36,44 @@ describe('dropTarget', () => {
     expect(dropTarget(blocks, { x: 50, y: 900 }, 'a1')).toBeNull()
   })
 })
+
+describe('dropTarget with tagged slots ([data-cms-slot])', () => {
+  // PDP 'p1' (container) with an accessory slot zone holding g1; shop blurb 'C' is a leaf.
+  const pdp: DndBlock[] = [
+    { id: 'p1', container: true, depth: 0, rect: r(0, 400) },
+    { id: 'g1', parentId: 'p1', container: false, depth: 1, rect: r(200, 80, 10, 580) },
+    { id: 'C', container: false, depth: 0, rect: r(420, 100) },
+  ]
+  const slots: DndSlot[] = [{ handle: '3d-accessories', parentId: 'p1', rect: r(190, 150, 0, 600), kids: ['g1'] }]
+  const acc = (s: DndSlot) => s.handle === '3d-accessories'
+
+  it('lands in the slot with the handle, indexed among slot members only', () => {
+    expect(dropTarget(pdp, { x: 50, y: 195 }, 'C', undefined, slots, acc)).toMatchObject({ parentId: 'p1', handle: '3d-accessories', index: 0 })
+    expect(dropTarget(pdp, { x: 50, y: 270 }, 'C', undefined, slots, acc)).toMatchObject({ parentId: 'p1', handle: '3d-accessories', index: 1 })
+  })
+  it('drops into an empty slot at index 0', () => {
+    const empty: DndSlot[] = [{ handle: '3d-accessories', parentId: 'p1', rect: r(190, 60, 0, 600), kids: [] }]
+    const t = dropTarget(pdp, { x: 50, y: 200 }, 'C', undefined, empty, acc)!
+    expect(t).toMatchObject({ parentId: 'p1', handle: '3d-accessories', index: 0 })
+    expect(t.line.y).toBeGreaterThanOrEqual(190)
+  })
+  it('a refused slot falls back to the plain container', () => {
+    expect(dropTarget(pdp, { x: 50, y: 200 }, 'C', undefined, slots, () => false)).toMatchObject({ parentId: 'p1', index: 0 })
+  })
+  it('without an acceptsSlot filter the slot still wins over the container', () => {
+    expect(dropTarget(pdp, { x: 50, y: 200 }, 'C', undefined, slots)).toMatchObject({ parentId: 'p1', handle: '3d-accessories' })
+  })
+  it('moveTarget sorts within the dragged block\'s own slot', () => {
+    const two: DndBlock[] = [
+      { id: 'p1', container: true, depth: 0, rect: r(0, 400) },
+      { id: 'g1', parentId: 'p1', container: false, depth: 1, rect: r(200, 80, 10, 580) },
+      { id: 'g2', parentId: 'p1', container: false, depth: 1, rect: r(290, 80, 10, 580) },
+    ]
+    const s2: DndSlot[] = [{ handle: '3d-accessories', parentId: 'p1', rect: r(190, 200, 0, 600), kids: ['g1', 'g2'] }]
+    expect(moveTarget(two, { x: 50, y: 195 }, { id: 'g2', parentId: 'p1', handle: '3d-accessories' }, { slots: s2 })).toMatchObject({
+      parentId: 'p1',
+      handle: '3d-accessories',
+      index: 0,
+    })
+  })
+})