@pyreon/kinetic-presets 0.11.4 → 0.11.6

package/src/__tests__/presets.test.ts

@@ -1,4 +1,4 @@
-import { describe, expect, it } from "vitest"
+import { describe, expect, it } from 'vitest'
 import {
   backInDown,
   backInLeft,
@@ -123,8 +123,8 @@ import {
   zoomOutLeft,
   zoomOutRight,
   zoomOutUp,
-} from "../index"
-import type { Preset } from "../types"
+} from '../index'
+import type { Preset } from '../types'
 
 // ─── Helpers ────────────────────────────────────────────────────────
 
@@ -145,921 +145,921 @@ const assertSymmetric = (preset: Preset) => {
 
 // ─── Preset count ───────────────────────────────────────────────────
 
-describe("presets — count", () => {
-  it("exports 122 presets in the presets object", () => {
+describe('presets — count', () => {
+  it('exports 122 presets in the presets object', () => {
     expect(Object.keys(presets)).toHaveLength(122)
   })
 })
 
 // ─── All presets have correct shape ─────────────────────────────────
 
-describe("presets — shape", () => {
+describe('presets — shape', () => {
   const allPresets = Object.entries(presets)
 
-  it.each(allPresets)("%s has required style+transition fields", (_, preset) => {
+  it.each(allPresets)('%s has required style+transition fields', (_, preset) => {
     assertPresetShape(preset)
   })
 
-  it.each(allPresets)("%s is symmetric (leave reverses enter)", (_, preset) => {
+  it.each(allPresets)('%s is symmetric (leave reverses enter)', (_, preset) => {
     assertSymmetric(preset)
   })
 
-  it.each(allPresets)("%s has enter transition string", (_, preset) => {
+  it.each(allPresets)('%s has enter transition string', (_, preset) => {
     expect(preset.enterTransition).toMatch(/\d+m?s/)
   })
 
-  it.each(allPresets)("%s has leave transition string", (_, preset) => {
+  it.each(allPresets)('%s has leave transition string', (_, preset) => {
     expect(preset.leaveTransition).toMatch(/\d+m?s/)
   })
 })
 
 // ─── Fades ──────────────────────────────────────────────────────────
 
-describe("presets — fades", () => {
-  it("fade is pure opacity", () => {
+describe('presets — fades', () => {
+  it('fade is pure opacity', () => {
     expect(fade.enterStyle).toEqual({ opacity: 0 })
     expect(fade.enterToStyle).toEqual({ opacity: 1 })
   })
 
-  it("fadeUp translates from 16px below", () => {
+  it('fadeUp translates from 16px below', () => {
     expect(fadeUp.enterStyle).toEqual({
       opacity: 0,
-      transform: "translateY(16px)",
+      transform: 'translateY(16px)',
     })
   })
 
-  it("fadeDown translates from 16px above", () => {
+  it('fadeDown translates from 16px above', () => {
     expect(fadeDown.enterStyle).toEqual({
       opacity: 0,
-      transform: "translateY(-16px)",
+      transform: 'translateY(-16px)',
     })
   })
 
-  it("fadeLeft translates from 16px right", () => {
+  it('fadeLeft translates from 16px right', () => {
     expect(fadeLeft.enterStyle).toEqual({
       opacity: 0,
-      transform: "translateX(16px)",
+      transform: 'translateX(16px)',
     })
   })
 
-  it("fadeRight translates from 16px left", () => {
+  it('fadeRight translates from 16px left', () => {
     expect(fadeRight.enterStyle).toEqual({
       opacity: 0,
-      transform: "translateX(-16px)",
+      transform: 'translateX(-16px)',
     })
   })
 
-  it("big variants use 48px distance", () => {
+  it('big variants use 48px distance', () => {
     expect(fadeUpBig.enterStyle).toEqual({
       opacity: 0,
-      transform: "translateY(48px)",
+      transform: 'translateY(48px)',
     })
     expect(fadeDownBig.enterStyle).toEqual({
       opacity: 0,
-      transform: "translateY(-48px)",
+      transform: 'translateY(-48px)',
     })
     expect(fadeLeftBig.enterStyle).toEqual({
       opacity: 0,
-      transform: "translateX(48px)",
+      transform: 'translateX(48px)',
     })
     expect(fadeRightBig.enterStyle).toEqual({
       opacity: 0,
-      transform: "translateX(-48px)",
+      transform: 'translateX(-48px)',
     })
   })
 
-  it("fadeScale uses scale(0.95)", () => {
+  it('fadeScale uses scale(0.95)', () => {
     expect(fadeScale.enterStyle).toEqual({
       opacity: 0,
-      transform: "scale(0.95)",
+      transform: 'scale(0.95)',
     })
   })
 })
 
 // ─── Slides ─────────────────────────────────────────────────────────
 
-describe("presets — slides", () => {
-  it("slideUp translates from 16px below", () => {
+describe('presets — slides', () => {
+  it('slideUp translates from 16px below', () => {
     expect(slideUp.enterStyle).toEqual({
       opacity: 0,
-      transform: "translateY(16px)",
+      transform: 'translateY(16px)',
     })
   })
 
-  it("slideDown translates from 16px above", () => {
+  it('slideDown translates from 16px above', () => {
     expect(slideDown.enterStyle).toEqual({
       opacity: 0,
-      transform: "translateY(-16px)",
+      transform: 'translateY(-16px)',
     })
   })
 
-  it("slideLeft translates from 16px right", () => {
+  it('slideLeft translates from 16px right', () => {
     expect(slideLeft.enterStyle).toEqual({
       opacity: 0,
-      transform: "translateX(16px)",
+      transform: 'translateX(16px)',
     })
   })
 
-  it("slideRight translates from 16px left", () => {
+  it('slideRight translates from 16px left', () => {
     expect(slideRight.enterStyle).toEqual({
       opacity: 0,
-      transform: "translateX(-16px)",
+      transform: 'translateX(-16px)',
     })
   })
 
-  it("big variants use 48px", () => {
+  it('big variants use 48px', () => {
     expect(slideUpBig.enterStyle).toEqual({
       opacity: 0,
-      transform: "translateY(48px)",
+      transform: 'translateY(48px)',
     })
     expect(slideDownBig.enterStyle).toEqual({
       opacity: 0,
-      transform: "translateY(-48px)",
+      transform: 'translateY(-48px)',
     })
     expect(slideLeftBig.enterStyle).toEqual({
       opacity: 0,
-      transform: "translateX(48px)",
+      transform: 'translateX(48px)',
     })
     expect(slideRightBig.enterStyle).toEqual({
       opacity: 0,
-      transform: "translateX(-48px)",
+      transform: 'translateX(-48px)',
     })
   })
 })
 
 // ─── Scales ─────────────────────────────────────────────────────────
 
-describe("presets — scales", () => {
-  it("scaleIn from 0.9", () => {
+describe('presets — scales', () => {
+  it('scaleIn from 0.9', () => {
     expect(scaleIn.enterStyle).toEqual({
       opacity: 0,
-      transform: "scale(0.9)",
+      transform: 'scale(0.9)',
     })
   })
 
-  it("scaleOut from 1.1", () => {
+  it('scaleOut from 1.1', () => {
     expect(scaleOut.enterStyle).toEqual({
       opacity: 0,
-      transform: "scale(1.1)",
+      transform: 'scale(1.1)',
     })
   })
 
-  it("scaleUp from 0.5 (dramatic)", () => {
+  it('scaleUp from 0.5 (dramatic)', () => {
     expect(scaleUp.enterStyle).toEqual({
       opacity: 0,
-      transform: "scale(0.5)",
+      transform: 'scale(0.5)',
     })
   })
 
-  it("scaleDown from 1.5 (dramatic)", () => {
+  it('scaleDown from 1.5 (dramatic)', () => {
     expect(scaleDown.enterStyle).toEqual({
       opacity: 0,
-      transform: "scale(1.5)",
+      transform: 'scale(1.5)',
     })
   })
 
-  it("directional scales combine scale + translate", () => {
+  it('directional scales combine scale + translate', () => {
     expect(scaleInUp.enterStyle).toEqual({
       opacity: 0,
-      transform: "scale(0.9) translateY(16px)",
+      transform: 'scale(0.9) translateY(16px)',
     })
     expect(scaleInDown.enterStyle).toEqual({
       opacity: 0,
-      transform: "scale(0.9) translateY(-16px)",
+      transform: 'scale(0.9) translateY(-16px)',
     })
     expect(scaleInLeft.enterStyle).toEqual({
       opacity: 0,
-      transform: "scale(0.9) translateX(16px)",
+      transform: 'scale(0.9) translateX(16px)',
     })
     expect(scaleInRight.enterStyle).toEqual({
       opacity: 0,
-      transform: "scale(0.9) translateX(-16px)",
+      transform: 'scale(0.9) translateX(-16px)',
     })
   })
 })
 
 // ─── Zooms ──────────────────────────────────────────────────────────
 
-describe("presets — zooms", () => {
-  it("zoomIn starts at scale(0)", () => {
+describe('presets — zooms', () => {
+  it('zoomIn starts at scale(0)', () => {
     expect(zoomIn.enterStyle).toEqual({
       opacity: 0,
-      transform: "scale(0)",
+      transform: 'scale(0)',
     })
   })
 
-  it("zoomOut starts at scale(2)", () => {
+  it('zoomOut starts at scale(2)', () => {
     expect(zoomOut.enterStyle).toEqual({
       opacity: 0,
-      transform: "scale(2)",
+      transform: 'scale(2)',
     })
   })
 
-  it("directional zooms use 48px and scale(0.5)", () => {
+  it('directional zooms use 48px and scale(0.5)', () => {
     expect(zoomInUp.enterStyle).toEqual({
       opacity: 0,
-      transform: "scale(0.5) translateY(48px)",
+      transform: 'scale(0.5) translateY(48px)',
     })
     expect(zoomInDown.enterStyle).toEqual({
       opacity: 0,
-      transform: "scale(0.5) translateY(-48px)",
+      transform: 'scale(0.5) translateY(-48px)',
     })
     expect(zoomInLeft.enterStyle).toEqual({
       opacity: 0,
-      transform: "scale(0.5) translateX(48px)",
+      transform: 'scale(0.5) translateX(48px)',
     })
     expect(zoomInRight.enterStyle).toEqual({
       opacity: 0,
-      transform: "scale(0.5) translateX(-48px)",
+      transform: 'scale(0.5) translateX(-48px)',
     })
   })
 
-  it("zooms have longer duration (400ms)", () => {
-    expect(zoomIn.enterTransition).toContain("400ms")
+  it('zooms have longer duration (400ms)', () => {
+    expect(zoomIn.enterTransition).toContain('400ms')
   })
 })
 
 // ─── Flips ──────────────────────────────────────────────────────────
 
-describe("presets — flips", () => {
-  it("flipX uses perspective + rotateX", () => {
+describe('presets — flips', () => {
+  it('flipX uses perspective + rotateX', () => {
     expect(flipX.enterStyle).toEqual({
       opacity: 0,
-      transform: "perspective(600px) rotateX(90deg)",
+      transform: 'perspective(600px) rotateX(90deg)',
     })
     expect(flipX.enterToStyle).toEqual({
       opacity: 1,
-      transform: "perspective(600px) rotateX(0)",
+      transform: 'perspective(600px) rotateX(0)',
     })
   })
 
-  it("flipY uses perspective + rotateY", () => {
+  it('flipY uses perspective + rotateY', () => {
     expect(flipY.enterStyle).toEqual({
       opacity: 0,
-      transform: "perspective(600px) rotateY(90deg)",
+      transform: 'perspective(600px) rotateY(90deg)',
     })
   })
 
-  it("reverse variants use negative angles", () => {
+  it('reverse variants use negative angles', () => {
     expect(flipXReverse.enterStyle).toEqual({
       opacity: 0,
-      transform: "perspective(600px) rotateX(-90deg)",
+      transform: 'perspective(600px) rotateX(-90deg)',
     })
     expect(flipYReverse.enterStyle).toEqual({
       opacity: 0,
-      transform: "perspective(600px) rotateY(-90deg)",
+      transform: 'perspective(600px) rotateY(-90deg)',
     })
   })
 })
 
 // ─── Rotations ──────────────────────────────────────────────────────
 
-describe("presets — rotations", () => {
-  it("rotateIn uses -15deg", () => {
+describe('presets — rotations', () => {
+  it('rotateIn uses -15deg', () => {
     expect(rotateIn.enterStyle).toEqual({
       opacity: 0,
-      transform: "rotate(-15deg)",
+      transform: 'rotate(-15deg)',
     })
   })
 
-  it("rotateInReverse uses +15deg", () => {
+  it('rotateInReverse uses +15deg', () => {
     expect(rotateInReverse.enterStyle).toEqual({
       opacity: 0,
-      transform: "rotate(15deg)",
+      transform: 'rotate(15deg)',
     })
   })
 
-  it("directional rotations combine rotate + translate", () => {
+  it('directional rotations combine rotate + translate', () => {
     expect(rotateInUp.enterStyle).toEqual({
       opacity: 0,
-      transform: "rotate(-5deg) translateY(16px)",
+      transform: 'rotate(-5deg) translateY(16px)',
     })
     expect(rotateInDown.enterStyle).toEqual({
       opacity: 0,
-      transform: "rotate(5deg) translateY(-16px)",
+      transform: 'rotate(5deg) translateY(-16px)',
     })
   })
 
-  it("spins use 180deg", () => {
+  it('spins use 180deg', () => {
     expect(spinIn.enterStyle).toEqual({
       opacity: 0,
-      transform: "rotate(-180deg)",
+      transform: 'rotate(-180deg)',
     })
     expect(spinInReverse.enterStyle).toEqual({
       opacity: 0,
-      transform: "rotate(180deg)",
+      transform: 'rotate(180deg)',
     })
   })
 })
 
 // ─── Bounce / Spring ────────────────────────────────────────────────
 
-describe("presets — bounce/spring", () => {
-  it("bounceIn uses bounce easing", () => {
-    expect(bounceIn.enterTransition).toContain("cubic-bezier(0.68, -0.55, 0.265, 1.55)")
+describe('presets — bounce/spring', () => {
+  it('bounceIn uses bounce easing', () => {
+    expect(bounceIn.enterTransition).toContain('cubic-bezier(0.68, -0.55, 0.265, 1.55)')
   })
 
-  it("all bounce variants use bounce easing", () => {
+  it('all bounce variants use bounce easing', () => {
     const bouncePresets = [bounceIn, bounceInUp, bounceInDown, bounceInLeft, bounceInRight]
     for (const p of bouncePresets) {
-      expect(p.enterTransition).toContain("cubic-bezier(0.68, -0.55, 0.265, 1.55)")
+      expect(p.enterTransition).toContain('cubic-bezier(0.68, -0.55, 0.265, 1.55)')
     }
   })
 
-  it("springIn uses spring easing", () => {
-    expect(springIn.enterTransition).toContain("cubic-bezier(0.34, 1.56, 0.64, 1)")
+  it('springIn uses spring easing', () => {
+    expect(springIn.enterTransition).toContain('cubic-bezier(0.34, 1.56, 0.64, 1)')
   })
 
-  it("bounceIn scales from 0.5", () => {
+  it('bounceIn scales from 0.5', () => {
     expect(bounceIn.enterStyle).toEqual({
       opacity: 0,
-      transform: "scale(0.5)",
+      transform: 'scale(0.5)',
     })
   })
 
-  it("springIn scales from 0.8", () => {
+  it('springIn scales from 0.8', () => {
     expect(springIn.enterStyle).toEqual({
       opacity: 0,
-      transform: "scale(0.8)",
+      transform: 'scale(0.8)',
     })
   })
 })
 
 // ─── Blur ───────────────────────────────────────────────────────────
 
-describe("presets — blur", () => {
-  it("blurIn uses filter: blur(8px)", () => {
+describe('presets — blur', () => {
+  it('blurIn uses filter: blur(8px)', () => {
     expect(blurIn.enterStyle).toEqual({
       opacity: 0,
-      filter: "blur(8px)",
+      filter: 'blur(8px)',
     })
     expect(blurIn.enterToStyle).toEqual({
       opacity: 1,
-      filter: "blur(0px)",
+      filter: 'blur(0px)',
     })
   })
 
-  it("directional blurs combine blur + translate", () => {
+  it('directional blurs combine blur + translate', () => {
     expect(blurInUp.enterStyle).toEqual({
       opacity: 0,
-      filter: "blur(8px)",
-      transform: "translateY(16px)",
+      filter: 'blur(8px)',
+      transform: 'translateY(16px)',
     })
     expect(blurInDown.enterStyle).toEqual({
       opacity: 0,
-      filter: "blur(8px)",
-      transform: "translateY(-16px)",
+      filter: 'blur(8px)',
+      transform: 'translateY(-16px)',
     })
   })
 
-  it("blurScale combines blur + scale", () => {
+  it('blurScale combines blur + scale', () => {
     expect(blurScale.enterStyle).toEqual({
       opacity: 0,
-      filter: "blur(8px)",
-      transform: "scale(0.95)",
+      filter: 'blur(8px)',
+      transform: 'scale(0.95)',
     })
   })
 })
 
 // ─── Clip Path ──────────────────────────────────────────────────────
 
-describe("presets — clip path", () => {
-  it("clipTop reveals from top", () => {
+describe('presets — clip path', () => {
+  it('clipTop reveals from top', () => {
     expect(clipTop.enterStyle).toEqual({
-      clipPath: "inset(0 0 100% 0)",
+      clipPath: 'inset(0 0 100% 0)',
     })
     expect(clipTop.enterToStyle).toEqual({
-      clipPath: "inset(0 0 0 0)",
+      clipPath: 'inset(0 0 0 0)',
     })
   })
 
-  it("clipBottom reveals from bottom", () => {
+  it('clipBottom reveals from bottom', () => {
     expect(clipBottom.enterStyle).toEqual({
-      clipPath: "inset(100% 0 0 0)",
+      clipPath: 'inset(100% 0 0 0)',
     })
   })
 
-  it("clipLeft reveals from left", () => {
+  it('clipLeft reveals from left', () => {
     expect(clipLeft.enterStyle).toEqual({
-      clipPath: "inset(0 100% 0 0)",
+      clipPath: 'inset(0 100% 0 0)',
     })
   })
 
-  it("clipRight reveals from right", () => {
+  it('clipRight reveals from right', () => {
     expect(clipRight.enterStyle).toEqual({
-      clipPath: "inset(0 0 0 100%)",
+      clipPath: 'inset(0 0 0 100%)',
     })
   })
 
-  it("clip presets do NOT include opacity (pure reveal)", () => {
+  it('clip presets do NOT include opacity (pure reveal)', () => {
     const clips = [clipTop, clipBottom, clipLeft, clipRight]
     for (const c of clips) {
-      expect(c.enterStyle).not.toHaveProperty("opacity")
+      expect(c.enterStyle).not.toHaveProperty('opacity')
     }
   })
 })
 
 // ─── Perspective ────────────────────────────────────────────────────
 
-describe("presets — perspective", () => {
-  it("perspectiveUp tilts from above", () => {
+describe('presets — perspective', () => {
+  it('perspectiveUp tilts from above', () => {
     expect(perspectiveUp.enterStyle).toEqual({
       opacity: 0,
-      transform: "perspective(600px) rotateX(15deg)",
+      transform: 'perspective(600px) rotateX(15deg)',
     })
   })
 
-  it("perspectiveDown tilts from below", () => {
+  it('perspectiveDown tilts from below', () => {
     expect(perspectiveDown.enterStyle).toEqual({
       opacity: 0,
-      transform: "perspective(600px) rotateX(-15deg)",
+      transform: 'perspective(600px) rotateX(-15deg)',
     })
   })
 
-  it("perspectiveLeft tilts from left", () => {
+  it('perspectiveLeft tilts from left', () => {
     expect(perspectiveLeft.enterStyle).toEqual({
       opacity: 0,
-      transform: "perspective(600px) rotateY(-15deg)",
+      transform: 'perspective(600px) rotateY(-15deg)',
     })
   })
 
-  it("perspectiveRight tilts from right", () => {
+  it('perspectiveRight tilts from right', () => {
     expect(perspectiveRight.enterStyle).toEqual({
       opacity: 0,
-      transform: "perspective(600px) rotateY(15deg)",
+      transform: 'perspective(600px) rotateY(15deg)',
     })
   })
 })
 
 // ─── Expand / Skew / Drop / Rise ────────────────────────────────────
 
-describe("presets — expand", () => {
-  it("expandX uses scaleX(0)", () => {
+describe('presets — expand', () => {
+  it('expandX uses scaleX(0)', () => {
     expect(expandX.enterStyle).toEqual({
       opacity: 0,
-      transform: "scaleX(0)",
+      transform: 'scaleX(0)',
     })
   })
 
-  it("expandY uses scaleY(0)", () => {
+  it('expandY uses scaleY(0)', () => {
     expect(expandY.enterStyle).toEqual({
       opacity: 0,
-      transform: "scaleY(0)",
+      transform: 'scaleY(0)',
     })
   })
 })
 
-describe("presets — skew", () => {
-  it("skewIn uses skewX(-5deg)", () => {
+describe('presets — skew', () => {
+  it('skewIn uses skewX(-5deg)', () => {
     expect(skewIn.enterStyle).toEqual({
       opacity: 0,
-      transform: "skewX(-5deg)",
+      transform: 'skewX(-5deg)',
     })
   })
 
-  it("skewInReverse uses skewX(5deg)", () => {
+  it('skewInReverse uses skewX(5deg)', () => {
     expect(skewInReverse.enterStyle).toEqual({
       opacity: 0,
-      transform: "skewX(5deg)",
+      transform: 'skewX(5deg)',
     })
   })
 })
 
-describe("presets — drop/rise", () => {
-  it("drop uses translateY(-100%)", () => {
+describe('presets — drop/rise', () => {
+  it('drop uses translateY(-100%)', () => {
     expect(drop.enterStyle).toEqual({
       opacity: 0,
-      transform: "translateY(-100%)",
+      transform: 'translateY(-100%)',
     })
   })
 
-  it("rise uses translateY(100%)", () => {
+  it('rise uses translateY(100%)', () => {
     expect(rise.enterStyle).toEqual({
       opacity: 0,
-      transform: "translateY(100%)",
+      transform: 'translateY(100%)',
     })
   })
 })
 
 // ─── Diagonal fades ─────────────────────────────────────────────────
 
-describe("presets — diagonal fades", () => {
-  it("fadeUpLeft translates from 16px diagonal", () => {
+describe('presets — diagonal fades', () => {
+  it('fadeUpLeft translates from 16px diagonal', () => {
     expect(fadeUpLeft.enterStyle).toEqual({
       opacity: 0,
-      transform: "translate(16px, 16px)",
+      transform: 'translate(16px, 16px)',
     })
   })
 
-  it("fadeUpRight translates from -16px x, 16px y", () => {
+  it('fadeUpRight translates from -16px x, 16px y', () => {
     expect(fadeUpRight.enterStyle).toEqual({
       opacity: 0,
-      transform: "translate(-16px, 16px)",
+      transform: 'translate(-16px, 16px)',
     })
   })
 
-  it("fadeDownLeft translates from 16px x, -16px y", () => {
+  it('fadeDownLeft translates from 16px x, -16px y', () => {
     expect(fadeDownLeft.enterStyle).toEqual({
       opacity: 0,
-      transform: "translate(16px, -16px)",
+      transform: 'translate(16px, -16px)',
     })
   })
 
-  it("fadeDownRight translates from -16px diagonal", () => {
+  it('fadeDownRight translates from -16px diagonal', () => {
     expect(fadeDownRight.enterStyle).toEqual({
       opacity: 0,
-      transform: "translate(-16px, -16px)",
+      transform: 'translate(-16px, -16px)',
     })
   })
 })
 
 // ─── Zoom out directional ───────────────────────────────────────────
 
-describe("presets — zoom out directional", () => {
-  it("zoomOutUp uses scale(2) + translateY", () => {
+describe('presets — zoom out directional', () => {
+  it('zoomOutUp uses scale(2) + translateY', () => {
     expect(zoomOutUp.enterStyle).toEqual({
       opacity: 0,
-      transform: "scale(2) translateY(48px)",
+      transform: 'scale(2) translateY(48px)',
     })
   })
 
-  it("all zoom out variants have 400ms enter", () => {
+  it('all zoom out variants have 400ms enter', () => {
     for (const p of [zoomOutUp, zoomOutDown, zoomOutLeft, zoomOutRight]) {
-      expect(p.enterTransition).toContain("400ms")
+      expect(p.enterTransition).toContain('400ms')
     }
   })
 })
 
 // ─── Blur horizontal ────────────────────────────────────────────────
 
-describe("presets — blur horizontal", () => {
-  it("blurInLeft combines blur + translateX", () => {
+describe('presets — blur horizontal', () => {
+  it('blurInLeft combines blur + translateX', () => {
     expect(blurInLeft.enterStyle).toEqual({
       opacity: 0,
-      filter: "blur(8px)",
-      transform: "translateX(16px)",
+      filter: 'blur(8px)',
+      transform: 'translateX(16px)',
     })
   })
 
-  it("blurInRight combines blur + translateX", () => {
+  it('blurInRight combines blur + translateX', () => {
     expect(blurInRight.enterStyle).toEqual({
       opacity: 0,
-      filter: "blur(8px)",
-      transform: "translateX(-16px)",
+      filter: 'blur(8px)',
+      transform: 'translateX(-16px)',
     })
   })
 })
 
 // ─── Skew Y ─────────────────────────────────────────────────────────
 
-describe("presets — skew Y", () => {
-  it("skewInY uses skewY(-5deg)", () => {
+describe('presets — skew Y', () => {
+  it('skewInY uses skewY(-5deg)', () => {
     expect(skewInY.enterStyle).toEqual({
       opacity: 0,
-      transform: "skewY(-5deg)",
+      transform: 'skewY(-5deg)',
     })
   })
 
-  it("skewInYReverse uses skewY(5deg)", () => {
+  it('skewInYReverse uses skewY(5deg)', () => {
     expect(skewInYReverse.enterStyle).toEqual({
       opacity: 0,
-      transform: "skewY(5deg)",
+      transform: 'skewY(5deg)',
     })
   })
 })
 
 // ─── Back ───────────────────────────────────────────────────────────
 
-describe("presets — back", () => {
-  it("backInUp uses scale(0.7) + large translate", () => {
+describe('presets — back', () => {
+  it('backInUp uses scale(0.7) + large translate', () => {
     expect(backInUp.enterStyle).toEqual({
       opacity: 0,
-      transform: "scale(0.7) translateY(80px)",
+      transform: 'scale(0.7) translateY(80px)',
     })
   })
 
-  it("all back variants use 400ms enter", () => {
+  it('all back variants use 400ms enter', () => {
     for (const p of [backInUp, backInDown, backInLeft, backInRight]) {
-      expect(p.enterTransition).toContain("400ms")
+      expect(p.enterTransition).toContain('400ms')
     }
   })
 })
 
 // ─── Light speed ────────────────────────────────────────────────────
 
-describe("presets — light speed", () => {
-  it("lightSpeedInLeft uses translateX + skewX", () => {
+describe('presets — light speed', () => {
+  it('lightSpeedInLeft uses translateX + skewX', () => {
     expect(lightSpeedInLeft.enterStyle).toEqual({
       opacity: 0,
-      transform: "translateX(100%) skewX(-30deg)",
+      transform: 'translateX(100%) skewX(-30deg)',
     })
   })
 
-  it("lightSpeedInRight uses opposite direction", () => {
+  it('lightSpeedInRight uses opposite direction', () => {
     expect(lightSpeedInRight.enterStyle).toEqual({
       opacity: 0,
-      transform: "translateX(-100%) skewX(30deg)",
+      transform: 'translateX(-100%) skewX(30deg)',
     })
   })
 })
 
 // ─── Roll ───────────────────────────────────────────────────────────
 
-describe("presets — roll", () => {
-  it("rollInLeft uses translateX + rotate", () => {
+describe('presets — roll', () => {
+  it('rollInLeft uses translateX + rotate', () => {
     expect(rollInLeft.enterStyle).toEqual({
       opacity: 0,
-      transform: "translateX(-100%) rotate(-120deg)",
+      transform: 'translateX(-100%) rotate(-120deg)',
     })
   })
 
-  it("rollInRight uses opposite direction", () => {
+  it('rollInRight uses opposite direction', () => {
     expect(rollInRight.enterStyle).toEqual({
       opacity: 0,
-      transform: "translateX(100%) rotate(120deg)",
+      transform: 'translateX(100%) rotate(120deg)',
     })
   })
 })
 
 // ─── Clip path shapes ───────────────────────────────────────────────
 
-describe("presets — clip path shapes", () => {
-  it("clipCircle uses circle()", () => {
+describe('presets — clip path shapes', () => {
+  it('clipCircle uses circle()', () => {
     expect(clipCircle.enterStyle).toEqual({
-      clipPath: "circle(0% at 50% 50%)",
+      clipPath: 'circle(0% at 50% 50%)',
     })
   })
 
-  it("clipCenter uses inset from center", () => {
+  it('clipCenter uses inset from center', () => {
     expect(clipCenter.enterStyle).toEqual({
-      clipPath: "inset(50% 50% 50% 50%)",
+      clipPath: 'inset(50% 50% 50% 50%)',
     })
   })
 
-  it("clipDiamond uses polygon", () => {
+  it('clipDiamond uses polygon', () => {
     expect(clipDiamond.enterStyle).toEqual({
-      clipPath: "polygon(50% 50%, 50% 50%, 50% 50%, 50% 50%)",
+      clipPath: 'polygon(50% 50%, 50% 50%, 50% 50%, 50% 50%)',
     })
   })
 
-  it("clipCorner expands from corner", () => {
+  it('clipCorner expands from corner', () => {
     expect(clipCorner.enterStyle).toEqual({
-      clipPath: "polygon(0 0, 0 0, 0 0, 0 0)",
+      clipPath: 'polygon(0 0, 0 0, 0 0, 0 0)',
     })
   })
 
-  it("shape clips do NOT include opacity", () => {
+  it('shape clips do NOT include opacity', () => {
     for (const c of [clipCircle, clipCenter, clipDiamond, clipCorner]) {
-      expect(c.enterStyle).not.toHaveProperty("opacity")
+      expect(c.enterStyle).not.toHaveProperty('opacity')
     }
   })
 })
 
 // ─── Puff ───────────────────────────────────────────────────────────
 
-describe("presets — puff", () => {
-  it("puffIn uses blur + scale(1.5)", () => {
+describe('presets — puff', () => {
+  it('puffIn uses blur + scale(1.5)', () => {
     expect(puffIn.enterStyle).toEqual({
       opacity: 0,
-      filter: "blur(4px)",
-      transform: "scale(1.5)",
+      filter: 'blur(4px)',
+      transform: 'scale(1.5)',
     })
   })
 
-  it("puffOut uses blur + scale(0.5)", () => {
+  it('puffOut uses blur + scale(0.5)', () => {
     expect(puffOut.enterStyle).toEqual({
       opacity: 0,
-      filter: "blur(4px)",
-      transform: "scale(0.5)",
+      filter: 'blur(4px)',
+      transform: 'scale(0.5)',
     })
   })
 })
 
 // ─── Swing ──────────────────────────────────────────────────────────
 
-describe("presets — swing", () => {
-  it("swingInTop uses rotateX with transformOrigin top", () => {
+describe('presets — swing', () => {
+  it('swingInTop uses rotateX with transformOrigin top', () => {
     expect(swingInTop.enterStyle).toEqual({
       opacity: 0,
-      transform: "perspective(600px) rotateX(-90deg)",
-      transformOrigin: "top",
+      transform: 'perspective(600px) rotateX(-90deg)',
+      transformOrigin: 'top',
     })
   })
 
-  it("swingInLeft uses rotateY with transformOrigin left", () => {
+  it('swingInLeft uses rotateY with transformOrigin left', () => {
     expect(swingInLeft.enterStyle).toEqual({
       opacity: 0,
-      transform: "perspective(600px) rotateY(90deg)",
-      transformOrigin: "left",
+      transform: 'perspective(600px) rotateY(90deg)',
+      transformOrigin: 'left',
     })
   })
 
-  it("all swing variants have 500ms enter", () => {
+  it('all swing variants have 500ms enter', () => {
     for (const p of [swingInTop, swingInBottom, swingInLeft, swingInRight]) {
-      expect(p.enterTransition).toContain("500ms")
+      expect(p.enterTransition).toContain('500ms')
     }
   })
 })
 
 // ─── Slit ───────────────────────────────────────────────────────────
 
-describe("presets — slit", () => {
-  it("slitHorizontal uses rotateY + scaleX", () => {
+describe('presets — slit', () => {
+  it('slitHorizontal uses rotateY + scaleX', () => {
     expect(slitHorizontal.enterStyle).toEqual({
       opacity: 0,
-      transform: "perspective(600px) rotateY(90deg) scaleX(0)",
+      transform: 'perspective(600px) rotateY(90deg) scaleX(0)',
     })
   })
 
-  it("slitVertical uses rotateX + scaleY", () => {
+  it('slitVertical uses rotateX + scaleY', () => {
     expect(slitVertical.enterStyle).toEqual({
       opacity: 0,
-      transform: "perspective(600px) rotateX(90deg) scaleY(0)",
+      transform: 'perspective(600px) rotateX(90deg) scaleY(0)',
     })
   })
 })
 
 // ─── Swirl ──────────────────────────────────────────────────────────
 
-describe("presets — swirl", () => {
-  it("swirlIn uses -540deg rotation + scale(0)", () => {
+describe('presets — swirl', () => {
+  it('swirlIn uses -540deg rotation + scale(0)', () => {
     expect(swirlIn.enterStyle).toEqual({
       opacity: 0,
-      transform: "rotate(-540deg) scale(0)",
+      transform: 'rotate(-540deg) scale(0)',
     })
   })
 
-  it("swirlInReverse uses +540deg", () => {
+  it('swirlInReverse uses +540deg', () => {
     expect(swirlInReverse.enterStyle).toEqual({
       opacity: 0,
-      transform: "rotate(540deg) scale(0)",
+      transform: 'rotate(540deg) scale(0)',
     })
   })
 })
 
 // ─── Flip diagonal ─────────────────────────────────────────────────
 
-describe("presets — flip diagonal", () => {
-  it("flipDiagonal uses rotate3d(1,1,0)", () => {
+describe('presets — flip diagonal', () => {
+  it('flipDiagonal uses rotate3d(1,1,0)', () => {
     expect(flipDiagonal.enterStyle).toEqual({
       opacity: 0,
-      transform: "perspective(600px) rotate3d(1, 1, 0, 90deg)",
+      transform: 'perspective(600px) rotate3d(1, 1, 0, 90deg)',
     })
   })
 
-  it("flipDiagonalReverse uses rotate3d(1,-1,0)", () => {
+  it('flipDiagonalReverse uses rotate3d(1,-1,0)', () => {
     expect(flipDiagonalReverse.enterStyle).toEqual({
       opacity: 0,
-      transform: "perspective(600px) rotate3d(1, -1, 0, 90deg)",
+      transform: 'perspective(600px) rotate3d(1, -1, 0, 90deg)',
     })
   })
 })
 
 // ─── Tilt ───────────────────────────────────────────────────────────
 
-describe("presets — tilt", () => {
-  it("tiltInUp combines perspective rotateX + translateY", () => {
+describe('presets — tilt', () => {
+  it('tiltInUp combines perspective rotateX + translateY', () => {
     expect(tiltInUp.enterStyle).toEqual({
       opacity: 0,
-      transform: "perspective(600px) rotateX(15deg) translateY(24px)",
+      transform: 'perspective(600px) rotateX(15deg) translateY(24px)',
     })
   })
 
-  it("tiltInDown combines perspective rotateX + negative translateY", () => {
+  it('tiltInDown combines perspective rotateX + negative translateY', () => {
     expect(tiltInDown.enterStyle).toEqual({
       opacity: 0,
-      transform: "perspective(600px) rotateX(-15deg) translateY(-24px)",
+      transform: 'perspective(600px) rotateX(-15deg) translateY(-24px)',
     })
   })
 
-  it("tiltInLeft combines perspective rotateY + translateX", () => {
+  it('tiltInLeft combines perspective rotateY + translateX', () => {
     expect(tiltInLeft.enterStyle).toEqual({
       opacity: 0,
-      transform: "perspective(600px) rotateY(-15deg) translateX(24px)",
+      transform: 'perspective(600px) rotateY(-15deg) translateX(24px)',
     })
   })
 
-  it("tiltInRight combines perspective rotateY + negative translateX", () => {
+  it('tiltInRight combines perspective rotateY + negative translateX', () => {
     expect(tiltInRight.enterStyle).toEqual({
       opacity: 0,
-      transform: "perspective(600px) rotateY(15deg) translateX(-24px)",
+      transform: 'perspective(600px) rotateY(15deg) translateX(-24px)',
     })
   })
 })
 
 // ─── Fly ────────────────────────────────────────────────────────────
 
-describe("presets — fly", () => {
-  it("flyInUp uses 100vh", () => {
+describe('presets — fly', () => {
+  it('flyInUp uses 100vh', () => {
     expect(flyInUp.enterStyle).toEqual({
       opacity: 0,
-      transform: "translateY(100vh)",
+      transform: 'translateY(100vh)',
     })
   })
 
-  it("flyInDown uses -100vh", () => {
+  it('flyInDown uses -100vh', () => {
     expect(flyInDown.enterStyle).toEqual({
       opacity: 0,
-      transform: "translateY(-100vh)",
+      transform: 'translateY(-100vh)',
     })
   })
 
-  it("flyInLeft uses 100vw", () => {
+  it('flyInLeft uses 100vw', () => {
     expect(flyInLeft.enterStyle).toEqual({
       opacity: 0,
-      transform: "translateX(100vw)",
+      transform: 'translateX(100vw)',
     })
   })
 
-  it("flyInRight uses -100vw", () => {
+  it('flyInRight uses -100vw', () => {
     expect(flyInRight.enterStyle).toEqual({
       opacity: 0,
-      transform: "translateX(-100vw)",
+      transform: 'translateX(-100vw)',
     })
   })
 })
 
 // ─── Pop / Rubber / Squish ──────────────────────────────────────────
 
-describe("presets — pop/rubber/squish", () => {
-  it("popIn uses spring easing + scale(0.3)", () => {
+describe('presets — pop/rubber/squish', () => {
+  it('popIn uses spring easing + scale(0.3)', () => {
     expect(popIn.enterStyle).toEqual({
       opacity: 0,
-      transform: "scale(0.3)",
+      transform: 'scale(0.3)',
     })
-    expect(popIn.enterTransition).toContain("cubic-bezier(0.34, 1.56, 0.64, 1)")
+    expect(popIn.enterTransition).toContain('cubic-bezier(0.34, 1.56, 0.64, 1)')
   })
 
-  it("rubberIn uses elastic easing", () => {
-    expect(rubberIn.enterTransition).toContain("cubic-bezier(0.175, 0.885, 0.32, 1.275)")
+  it('rubberIn uses elastic easing', () => {
+    expect(rubberIn.enterTransition).toContain('cubic-bezier(0.175, 0.885, 0.32, 1.275)')
   })
 
-  it("squishX uses non-uniform scale", () => {
+  it('squishX uses non-uniform scale', () => {
     expect(squishX.enterStyle).toEqual({
       opacity: 0,
-      transform: "scaleX(1.4) scaleY(0.6)",
+      transform: 'scaleX(1.4) scaleY(0.6)',
     })
   })
 
-  it("squishY uses non-uniform scale (inverted)", () => {
+  it('squishY uses non-uniform scale (inverted)', () => {
     expect(squishY.enterStyle).toEqual({
       opacity: 0,
-      transform: "scaleX(0.6) scaleY(1.4)",
+      transform: 'scaleX(0.6) scaleY(1.4)',
     })
   })
 })
 
 // ─── Scale rotate / newspaper ───────────────────────────────────────
 
-describe("presets — scaleRotate/newspaper", () => {
-  it("scaleRotateIn uses scale(0) + rotate(-180deg)", () => {
+describe('presets — scaleRotate/newspaper', () => {
+  it('scaleRotateIn uses scale(0) + rotate(-180deg)', () => {
     expect(scaleRotateIn.enterStyle).toEqual({
       opacity: 0,
-      transform: "scale(0) rotate(-180deg)",
+      transform: 'scale(0) rotate(-180deg)',
     })
   })
 
-  it("newspaperIn uses scale(0) + rotate(-720deg)", () => {
+  it('newspaperIn uses scale(0) + rotate(-720deg)', () => {
     expect(newspaperIn.enterStyle).toEqual({
       opacity: 0,
-      transform: "scale(0) rotate(-720deg)",
+      transform: 'scale(0) rotate(-720deg)',
     })
-    expect(newspaperIn.enterTransition).toContain("700ms")
+    expect(newspaperIn.enterTransition).toContain('700ms')
   })
 })
 
 // ─── Float ──────────────────────────────────────────────────────────
 
-describe("presets — float", () => {
-  it("floatUp uses premium easing + translateY + scale", () => {
+describe('presets — float', () => {
+  it('floatUp uses premium easing + translateY + scale', () => {
     expect(floatUp.enterStyle).toEqual({
       opacity: 0,
-      transform: "translateY(32px) scale(0.97)",
+      transform: 'translateY(32px) scale(0.97)',
     })
-    expect(floatUp.enterTransition).toContain("cubic-bezier(0.23, 1, 0.32, 1)")
+    expect(floatUp.enterTransition).toContain('cubic-bezier(0.23, 1, 0.32, 1)')
   })
 
-  it("all float variants use premium easing", () => {
+  it('all float variants use premium easing', () => {
     for (const p of [floatUp, floatDown, floatLeft, floatRight]) {
-      expect(p.enterTransition).toContain("cubic-bezier(0.23, 1, 0.32, 1)")
+      expect(p.enterTransition).toContain('cubic-bezier(0.23, 1, 0.32, 1)')
     }
   })
 })
 
 // ─── Push ───────────────────────────────────────────────────────────
 
-describe("presets — push", () => {
-  it("pushInLeft uses translateX(-48px) + scale(0.9)", () => {
+describe('presets — push', () => {
+  it('pushInLeft uses translateX(-48px) + scale(0.9)', () => {
     expect(pushInLeft.enterStyle).toEqual({
       opacity: 0,
-      transform: "translateX(-48px) scale(0.9)",
+      transform: 'translateX(-48px) scale(0.9)',
     })
   })
 
-  it("pushInRight uses translateX(48px) + scale(0.9)", () => {
+  it('pushInRight uses translateX(48px) + scale(0.9)', () => {
     expect(pushInRight.enterStyle).toEqual({
       opacity: 0,
-      transform: "translateX(48px) scale(0.9)",
+      transform: 'translateX(48px) scale(0.9)',
     })
   })
 })