Gate ink bleed reduced-motion completion

Author: Chris0Jeky

frontend/taskdeck-web/src/components/paper/InkBleed.vue

@@ -298,12 +298,16 @@ const dropletData = computed<VisibleDroplet[]>(() =>
 .ink-bleed--bloom .ink-bleed__drop,
 .ink-bleed--compose .ink-bleed__drop,
 .ink-bleed--settle .ink-bleed__drop,
-.ink-bleed--stamp .ink-bleed__drop,
-.ink-bleed--dried .ink-bleed__drop {
+.ink-bleed--stamp .ink-bleed__drop {
   animation: ink-bleed-bloom 1400ms linear forwards,
     ink-bleed-grow 1000ms cubic-bezier(0.2, 0.65, 0.25, 1) forwards;
 }
 
+.ink-bleed--dried .ink-bleed__drop {
+  opacity: 0.78;
+  transform: translate(-50%, -50%) scale(1.4);
+}
+
 /* Settle: desaturate. Stamp / dried: hold the desaturated state with full blur. */
 .ink-bleed--drying .ink-bleed__drop {
   filter: blur(10px);

frontend/taskdeck-web/src/composables/useInkBleed.ts

@@ -12,7 +12,7 @@
  * - Singleton guard: at most one active bleed per view. Calling `start()` while
  *   one is already running cancels the previous and begins a new sequence.
  * - Reduced-motion users skip the timer pipeline entirely. `start()` resolves
- *   immediately to `dried` and `done` fires after one tick.
+ *   immediately to `dried`, but `done` still waits for `finish(runId)`.
  */
 import { onBeforeUnmount, readonly, ref } from 'vue'
 import {
@@ -90,14 +90,9 @@ export function useInkBleed(
     const runId = activeRunId
 
     if (isReducedMotion.value) {
-      // Short-circuit: skip the timer pipeline entirely.
+      // Short-circuit animation timers, but keep completion gated by the
+      // wrapped async work calling finish(runId).
       phase.value = 'dried'
-      // Defer done to next tick so callers can subscribe before it fires.
-      const id = (globalThis.setTimeout as typeof setTimeout)(() => {
-        if (!active || runId !== activeRunId) return
-        fireDone()
-      }, 0) as unknown as number
-      timers.push(id)
       return runId
     }
 

frontend/taskdeck-web/src/tests/components/paper/useInkBleed.spec.ts

@@ -165,7 +165,7 @@ describe('useInkBleed', () => {
 
   it('cancel() clears state without firing done', () => {
     const { exposed } = createHost()
-    exposed.bleed.start()
+    const run = exposed.bleed.start()
     vi.advanceTimersByTime(1000)
 
     exposed.bleed.cancel()
@@ -190,11 +190,14 @@ describe('useInkBleed', () => {
     const { exposed } = createHost()
     expect(exposed.bleed.isReducedMotion.value).toBe(true)
 
-    exposed.bleed.start()
+    const run = exposed.bleed.start()
     expect(exposed.bleed.phase.value).toBe('dried')
 
     // Advance one tick — done should fire deferred via setTimeout(0).
     vi.advanceTimersByTime(0)
+    expect(exposed.doneCount).toBe(0)
+
+    exposed.bleed.finish(run)
     expect(exposed.doneCount).toBe(1)
 
     // Advancing further does nothing — no per-phase timers were ever queued.