feat(gui-v2): DraggableBlock §7.1 abstraction (PointerEvent drag, A2-reconciled) + CT + stories

apps/app/tests/playwright-ct/v2/draggableblock.ct.spec.ts

@@ -0,0 +1,39 @@
+import { expect, test } from '@playwright/experimental-ct-vue'
+import DraggableBlock from '@/components-v2/shared/DraggableBlock.vue'
+
+test('drag past threshold emits dragstart then dragend with delta @ct', async ({ mount }) => {
+  const events: string[] = []
+
+  const component = await mount(DraggableBlock, {
+    props: { line1Left: { text: 'DJ Foo' } },
+    on: {
+      dragstart: () => events.push('dragstart'),
+      dragend: (d: { x: number; y: number }) => events.push(`dragend:${d.x},${d.y}`),
+      click: () => events.push('click'),
+    },
+  })
+
+  const box = (await component.boundingBox())!
+
+  await component.page().mouse.move(box.x + 10, box.y + 10)
+  await component.page().mouse.down()
+  await component.page().mouse.move(box.x + 40, box.y + 22)
+  await component.page().mouse.up()
+  expect(events[0]).toBe('dragstart')
+  expect(events.some(e => e.startsWith('dragend:'))).toBe(true)
+  expect(events).not.toContain('click')
+})
+
+test('static states render for @visual baseline @visual', async ({ mount }) => {
+  const component = await mount(DraggableBlock, {
+    props: {
+      line1Left: { text: 'DJ Foo', tag: { label: 'confirmed', severity: 'success' } },
+      line1Right: { pill: 'Main' },
+      line2Left: '21:00–22:00',
+      line2Right: { progress: 60 },
+      selected: true,
+    },
+  })
+
+  await expect(component).toHaveScreenshot('draggableblock-selected.png')
+})