chore(format): consolidate prettier configs

.git-blame-ignore-revs

@@ -0,0 +1,6 @@
+# Bulk reformat commits — ignore in `git blame` to keep line history meaningful.
+# Configure once locally with:
+#   git config blame.ignoreRevsFile .git-blame-ignore-revs
+
+# chore(format): consolidate prettier configs — reformat sandboxes + __tests__ to root style
+397c97ec

.oxlintrc.json

@@ -0,0 +1,32 @@
+{
+  "$schema": "./node_modules/oxlint/configuration_schema.json",
+  "plugins": ["react", "react-hooks"],
+  "env": {
+    "browser": true,
+    "es2020": true,
+    "node": true
+  },
+  "settings": {
+    "react": { "version": "19.0" }
+  },
+  "rules": {
+    "prefer-const": "error",
+    "no-console": ["error", { "allow": ["warn", "error"] }],
+    "no-unused-vars": "off",
+    "no-sparse-arrays": "off",
+    "no-useless-escape": "off",
+    "typescript/no-unused-vars": [
+      "warn",
+      { "argsIgnorePattern": "^_", "varsIgnorePattern": "^_" }
+    ]
+  },
+  "ignorePatterns": [
+    "**/dist/**",
+    "**/node_modules/**",
+    "**/api/**",
+    "**/public/**",
+    "**/.turbo/**",
+    "**/coverage/**",
+    "**/build/**"
+  ]
+}

demo/package.json

@@ -9,7 +9,6 @@
   "scripts": {
     "dev": "vite",
     "clean": "rm -rf .turbo && rm -rf node_modules",
-    "lint": "TIMING=1 eslint \"src/**/*.ts*\"",
     "serve": "vite preview"
   },
   "dependencies": {

demo/src/sandboxes/animating-auto/src/App.tsx

@@ -13,7 +13,9 @@ export default function App() {
     <div className={styles.container}>
       <div ref={ref} className={styles.main} onClick={() => toggle(!open)}>
         <animated.div className={styles.fill} style={props} />
-        <animated.div className={styles.content}>{props.width.to(x => x.toFixed(0))}</animated.div>
+        <animated.div className={styles.content}>
+          {props.width.to(x => x.toFixed(0))}
+        </animated.div>
       </div>
     </div>
   )

demo/src/sandboxes/cards-stack/src/App.tsx

@@ -33,30 +33,32 @@ function Deck() {
     from: from(i),
   })) // Create a bunch of springs using the helpers above
   // Create a gesture, we're interested in down-state, delta (current-pos - click-pos), direction and velocity
-  const bind = useDrag(({ args: [index], down, movement: [mx], direction: [xDir], velocity }) => {
-    const trigger = velocity > 0.2 // If you flick hard enough it should trigger the card to fly out
-    const dir = xDir < 0 ? -1 : 1 // Direction should either point left or right
-    if (!down && trigger) gone.add(index) // If button/finger's up and trigger velocity is reached, we flag the card ready to fly out
-    api.start(i => {
-      if (index !== i) return // We're only interested in changing spring-data for the current spring
-      const isGone = gone.has(index)
-      const x = isGone ? (200 + window.innerWidth) * dir : down ? mx : 0 // When a card is gone it flys out left or right, otherwise goes back to zero
-      const rot = mx / 100 + (isGone ? dir * 10 * velocity : 0) // How much the card tilts, flicking it harder makes it rotate faster
-      const scale = down ? 1.1 : 1 // Active cards lift up a bit
-      return {
-        x,
-        rot,
-        scale,
-        delay: undefined,
-        config: { friction: 50, tension: down ? 800 : isGone ? 200 : 500 },
-      }
-    })
-    if (!down && gone.size === cards.length)
-      setTimeout(() => {
-        gone.clear()
-        api.start(i => to(i))
-      }, 600)
-  })
+  const bind = useDrag(
+    ({ args: [index], down, movement: [mx], direction: [xDir], velocity }) => {
+      const trigger = velocity > 0.2 // If you flick hard enough it should trigger the card to fly out
+      const dir = xDir < 0 ? -1 : 1 // Direction should either point left or right
+      if (!down && trigger) gone.add(index) // If button/finger's up and trigger velocity is reached, we flag the card ready to fly out
+      api.start(i => {
+        if (index !== i) return // We're only interested in changing spring-data for the current spring
+        const isGone = gone.has(index)
+        const x = isGone ? (200 + window.innerWidth) * dir : down ? mx : 0 // When a card is gone it flys out left or right, otherwise goes back to zero
+        const rot = mx / 100 + (isGone ? dir * 10 * velocity : 0) // How much the card tilts, flicking it harder makes it rotate faster
+        const scale = down ? 1.1 : 1 // Active cards lift up a bit
+        return {
+          x,
+          rot,
+          scale,
+          delay: undefined,
+          config: { friction: 50, tension: down ? 800 : isGone ? 200 : 500 },
+        }
+      })
+      if (!down && gone.size === cards.length)
+        setTimeout(() => {
+          gone.clear()
+          api.start(i => to(i))
+        }, 600)
+    }
+  )
   // Now we're just mapping the animated values to our view, that's it. Btw, this component only renders once. :-)
   return (
     <>

demo/src/sandboxes/css-gradients/src/App.tsx

@@ -1,6 +1,11 @@
 import * as React from 'react'
 import { cubicCoordinates, stepsCoordinates } from 'easing-coordinates'
-import { useSpring, animated, to as interpolate, createInterpolator } from '@react-spring/web'
+import {
+  useSpring,
+  animated,
+  to as interpolate,
+  createInterpolator,
+} from '@react-spring/web'
 import { useControls } from 'leva'
 
 import styles from './styles.module.css'
@@ -30,7 +35,14 @@ export default function App() {
     },
     easing: {
       value: 'ease-in-out',
-      options: ['linear', 'ease', 'ease-in', 'ease-out', 'ease-in-out', 'steps'],
+      options: [
+        'linear',
+        'ease',
+        'ease-in',
+        'ease-out',
+        'ease-in-out',
+        'steps',
+      ],
     },
     easeCustom: '',
   })
@@ -52,27 +64,41 @@ export default function App() {
         coordinates = cubicCoordinates(x1, y1, x2, y2, stops)
       }
     } else {
-      coordinates = cubicCoordinates(customBezier[0], customBezier[1], customBezier[2], customBezier[3], stops)
+      coordinates = cubicCoordinates(
+        customBezier[0],
+        customBezier[1],
+        customBezier[2],
+        customBezier[3],
+        stops
+      )
     }
 
     return coordinates
   }, [easing, easeCustom, stops])
 
-  const allStops = interpolate([colorFrom, colorMid, colorTo], (from, mid, to) => {
-    const blend = createInterpolator({ range: [0, 0.5, 1], output: [from, mid, to] })
+  const allStops = interpolate(
+    [colorFrom, colorMid, colorTo],
+    (from, mid, to) => {
+      const blend = createInterpolator({
+        range: [0, 0.5, 1],
+        output: [from, mid, to],
+      })
 
-    return coordinates.map(({ x, y }) => {
-      const color = blend(y)
+      return coordinates.map(({ x, y }) => {
+        const color = blend(y)
 
-      return `${color} ${x * 100}%`
-    })
-  })
+        return `${color} ${x * 100}%`
+      })
+    }
+  )
 
   return (
     <animated.div
       className={styles.container}
       style={{
-        backgroundImage: allStops.to((...args) => `linear-gradient(${angle}deg, ${args.join(', ')})`),
+        backgroundImage: allStops.to(
+          (...args) => `linear-gradient(${angle}deg, ${args.join(', ')})`
+        ),
       }}
     />
   )

demo/src/sandboxes/draggable-list/src/App.tsx

@@ -30,7 +30,11 @@ function DraggableList({ items }: { items: string[] }) {
   const [springs, api] = useSprings(items.length, fn(order.current)) // Create springs, each corresponds to an item, controlling its transform, scale, etc.
   const bind = useDrag(({ args: [originalIndex], active, movement: [, y] }) => {
     const curIndex = order.current.indexOf(originalIndex)
-    const curRow = clamp(Math.round((curIndex * 100 + y) / 100), 0, items.length - 1)
+    const curRow = clamp(
+      Math.round((curIndex * 100 + y) / 100),
+      0,
+      items.length - 1
+    )
     const newOrder = swap(order.current, curIndex, curRow)
     api.start(fn(newOrder, active, originalIndex, curIndex, y)) // Feed springs new style data, they'll animate the view without causing a single render
     if (!active) order.current = newOrder
@@ -43,7 +47,9 @@ function DraggableList({ items }: { items: string[] }) {
           key={i}
           style={{
             zIndex,
-            boxShadow: shadow.to(s => `rgba(0, 0, 0, 0.15) 0px ${s}px ${2 * s}px 0px`),
+            boxShadow: shadow.to(
+              s => `rgba(0, 0, 0, 0.15) 0px ${s}px ${2 * s}px 0px`
+            ),
             y,
             scale,
           }}