fix(web): register token-backed duration and easing scales with tailwind-merge

tailwind.config.js defines transitionDuration (fast|normal|slow) and
transitionTimingFunction (standard|accelerate|decelerate) as CSS-var-backed
custom keys. twMerge's built-in `duration` and `ease` groups only recognise
numeric/known values, so these fell through as unrecognised classes and were
never de-duplicated:

  cn('duration-fast', 'duration-normal') => "duration-fast duration-normal"
  cn('ease-standard', 'ease-linear')     => "ease-standard ease-linear"

Both classes survived and CSS source order silently decided the winner, so a
component prop could not reliably override a base motion class. Register both
scales in extendTailwindMerge so they resolve last-wins like every other group.

Adds an it.each regression block covering both scales in each direction
(13 -> 21 tests) to lock the behaviour, since the failure mode is invisible
in review and only shows up as a subtly wrong animation speed.

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

Author: atulmgupta

web/src/lib/cn.test.ts

@@ -88,4 +88,27 @@ describe('cn — tailwind-merge conflict resolution (last wins)', () => {
     const result = cn('p-2', useLargePadding && 'p-8', false && 'p-0')
     expect(result).toBe('p-8')
   })
+
+  /**
+   * Every token-backed scale declared in tailwind.config.js uses a custom
+   * (non-numeric, non-keyword) key, which twMerge does NOT recognise out of
+   * the box — both classes survive and CSS source order silently decides the
+   * winner. Each scale must therefore be registered in cn.ts. This test is
+   * the guard: adding a new custom scale to tailwind.config.js without
+   * registering it here will fail.
+   */
+  describe('token-backed custom scales resolve last-wins', () => {
+    it.each([
+      ['duration-fast', 'duration-normal'],
+      ['duration-fast', 'duration-200'],
+      ['ease-standard', 'ease-linear'],
+      ['ease-accelerate', 'ease-decelerate'],
+      ['rounded-panel', 'rounded-lg'],
+      ['rounded-shape-md', 'rounded-full'],
+      ['shadow-panel', 'shadow-e1'],
+      ['shadow-e2', 'shadow-none'],
+    ])('%s then %s keeps only the last', (base, override) => {
+      expect(cn(base, override)).toBe(override)
+    })
+  })
 })

web/src/lib/cn.ts

@@ -4,9 +4,10 @@ import { extendTailwindMerge } from 'tailwind-merge'
 /**
  * tailwind-merge only resolves conflicts between utilities it recognises. The
  * token-backed scales registered in tailwind.config.js (`rounded-shape-*`,
- * `rounded-panel`, `rounded-pill`, `shadow-e*`, `shadow-panel*`) use custom
- * keys, so out of the box twMerge treats them as unrelated classes: a caller
- * passing `className="rounded-lg"` to a primitive whose base is
+ * `rounded-panel`, `rounded-pill`, `shadow-e*`, `shadow-panel*`,
+ * `duration-fast|normal|slow`, `ease-standard|accelerate|decelerate`) use
+ * custom keys, so out of the box twMerge treats them as unrelated classes: a
+ * caller passing `className="rounded-lg"` to a primitive whose base is
  * `rounded-panel` would end up with BOTH classes surviving, leaving the CSS
  * source order to silently pick the winner.
  *
@@ -31,6 +32,8 @@ const twMerge = extendTailwindMerge({
         },
       ],
       'shadow': [{ shadow: ['e1', 'e2', 'e3', 'panel', 'panel-hover'] }],
+      'duration': [{ duration: ['fast', 'normal', 'slow'] }],
+      'ease': [{ ease: ['standard', 'accelerate', 'decelerate'] }],
     },
   },
 })