harden on formatting

.github/dependabot.yml

@@ -17,13 +17,12 @@ updates:
 
     # https://docs.github.com/en/code-security/dependabot/dependabot-version-updates/configuration-options-for-the-dependabot.yml-file#groups
     groups:
-
       # Always update react and react-dom together
       react-packages:
         patterns:
           - 'react'
           - 'react-dom'
-          
+
       #
       # pkg.json "dependencies"
       #

.github/workflows/stale.yml

@@ -1,10 +1,10 @@
 on:
   schedule:
-    - cron: "30 8 * * *"
+    - cron: '30 8 * * *'
   workflow_dispatch: # Allows manual triggering of the workflow
 
 permissions:
-  contents: write  # Necessary for delete-branch option
+  contents: write # Necessary for delete-branch option
   issues: write
   pull-requests: write
 
@@ -16,7 +16,7 @@ jobs:
         with:
           operations-per-run: 3000
           exempt-all-assignees: true
-          
+
           #
           # Issues
           #
@@ -26,7 +26,7 @@ jobs:
             Any activity, like adding an update or comment, will automatically remove the stale label so it stays on our radar.
 
             Feel free to reach out on [Discord](https://discord.com/channels/740090768164651008/741751532592038022) if you need support or feedback from the community. This issue will close automatically soon if there’s no further activity. Thank you for understanding and for being part of the project!
-          
+
           close-issue-message: |
             We’re closing this issue to keep our project manageable and make room for other active work, but we truly appreciate your effort and contribution.
 
@@ -41,7 +41,7 @@ jobs:
             Any update, comment, or change to the PR will automatically remove the stale label so it stays active in our workflow.
 
             If you need any help, don’t hesitate to connect with us on [Discord](https://discord.com/channels/740090768164651008/741751532592038022) for feedback and support. This PR will close automatically soon if there’s no further activity, but we’re here to help if you’re interested in getting it merged. Thank you for your contribution!
-          
+
           close-pr-message: |
             We’re closing this pull request to help manage our workload and focus on active contributions. We really appreciate the effort you put into this, and we’d be happy to revisit it anytime you’re ready.
 

.husky/pre-commit

@@ -1,3 +1,3 @@
 yarn pretty-quick --staged
-yarn eslint:ci --quiet
+yarn eslint:ci
 yarn typecheck

.prettierignore

@@ -1,3 +1,7 @@
 dist/
 storybook-static/
+public/
 *.typeface.json
+
+# waiting for mdx3 support some day (https://github.com/prettier/prettier/issues/12209)
+*.mdx

.storybook/stories/Line.stories.tsx

@@ -12,7 +12,7 @@ const points = GeometryUtils.hilbert3D(new Vector3(0), 5).map((p) => [p.x, p.y,
 const colors = new Array(points.length).fill(0).map(() => [Math.random(), Math.random(), Math.random()]) as [
   number,
   number,
-  number
+  number,
 ][]
 
 export default {

package.json

@@ -36,7 +36,7 @@
     "eslint:ci": "eslint .",
     "prettier": "prettier --check .",
     "prettier-fix": "prettier --write .",
-    "test": "yarn eslint:ci && (cd test/e2e; ./e2e.sh)",
+    "test": "yarn eslint:ci && yarn typecheck && yarn prettier && (cd test/e2e; ./e2e.sh)",
     "typecheck": "tsc --noEmit --emitDeclarationOnly false --strict --jsx react",
     "typegen": "tsc --emitDeclarationOnly",
     "storybook": "cross-env NODE_OPTIONS=\"--openssl-legacy-provider\" storybook dev -p 6006",

src/core/Cloud.tsx

@@ -261,7 +261,7 @@ export const CloudInstance = /* @__PURE__ */ React.forwardRef<Group, CloudProps>
             matrix: new Matrix4(),
             color: new Color(),
             rotation: index * (Math.PI / segments),
-          } as CloudState)
+          }) as CloudState
       )
     }, [segments, uuid])
 

src/core/GizmoHelper.tsx

@@ -146,13 +146,13 @@ export const GizmoHelper = ({
   const x = alignment.endsWith('-center')
     ? 0
     : alignment.endsWith('-left')
-    ? -size.width / 2 + marginX
-    : size.width / 2 - marginX
+      ? -size.width / 2 + marginX
+      : size.width / 2 - marginX
   const y = alignment.startsWith('center-')
     ? 0
     : alignment.startsWith('top-')
-    ? size.height / 2 - marginY
-    : -size.height / 2 + marginY
+      ? size.height / 2 - marginY
+      : -size.height / 2 + marginY
 
   return (
     <Hud renderPriority={renderPriority}>

src/core/Grid.tsx

@@ -33,7 +33,7 @@ export type GridMaterialType = {
   /** Fade strength, default: 1 */
   fadeStrength?: number
   /** Fade from camera (1) or origin (0), or somewhere in between, default: camera */
-  fadeFrom?: number;
+  fadeFrom?: number
   /** Material side, default: THREE.BackSide */
   side?: THREE.Side
 }

src/core/Line.tsx

@@ -37,12 +37,12 @@ export const Line: ForwardRefComponent<LineProps, Line2 | LineSegments2> = /* @_
       return p instanceof Vector3 || p instanceof Vector4
         ? [p.x, p.y, p.z]
         : p instanceof Vector2
-        ? [p.x, p.y, 0]
-        : isArray && p.length === 3
-        ? [p[0], p[1], p[2]]
-        : isArray && p.length === 2
-        ? [p[0], p[1], 0]
-        : p
+          ? [p.x, p.y, 0]
+          : isArray && p.length === 3
+            ? [p[0], p[1], p[2]]
+            : isArray && p.length === 2
+              ? [p[0], p[1], 0]
+              : p
     })
 
     geom.setPositions(pValues.flat())

src/core/StatsGl.tsx

@@ -5,51 +5,51 @@ import * as React from 'react'
 import Stats from 'stats-gl'
 
 type Props = Partial<Stats> & {
-    id?: string
-    clearStatsGlStyle?: boolean
-    showPanel?: number
-    className?: string
-    parent?: React.RefObject<HTMLElement>
-    ref?: React.RefObject<HTMLElement>
+  id?: string
+  clearStatsGlStyle?: boolean
+  showPanel?: number
+  className?: string
+  parent?: React.RefObject<HTMLElement>
+  ref?: React.RefObject<HTMLElement>
 }
 
 export const StatsGl: ForwardRefComponent<Props, HTMLDivElement> = /* @__PURE__ */ React.forwardRef(
-    ({ className, parent, id, clearStatsGlStyle, ...props }: Props, fref) => {
-        const gl: any = useThree((state) => state.gl)
-
-        const stats = React.useMemo(() => {
-            const stats = new Stats({
-                ...props,
-            })
-            stats.init(gl)
-            return stats
-        }, [gl])
-
-        React.useImperativeHandle(fref, () => stats.dom)
-
-        React.useEffect(() => {
-            if (stats) {
-                const node = (parent && parent.current) || document.body
-                node?.appendChild(stats.dom)
-                stats.dom.querySelectorAll('canvas').forEach((canvas) => {
-                    canvas.style.removeProperty('position')
-                })
-                if (id) stats.dom.id = id
-                if (clearStatsGlStyle) stats.dom.removeAttribute('style')
-                stats.dom.removeAttribute('style')
-                const classNames = (className ?? '').split(' ').filter((cls) => cls)
-                if (classNames.length) stats.dom.classList.add(...classNames)
-                const end = addAfterEffect(() => stats.update())
-                return () => {
-                    if (classNames.length) stats.dom.classList.remove(...classNames)
-                    node?.removeChild(stats.dom)
-                    end()
-                }
-            }
-        }, [parent, stats, className, id, clearStatsGlStyle])
-
-        return null
-    }
+  ({ className, parent, id, clearStatsGlStyle, ...props }: Props, fref) => {
+    const gl: any = useThree((state) => state.gl)
+
+    const stats = React.useMemo(() => {
+      const stats = new Stats({
+        ...props,
+      })
+      stats.init(gl)
+      return stats
+    }, [gl])
+
+    React.useImperativeHandle(fref, () => stats.dom)
+
+    React.useEffect(() => {
+      if (stats) {
+        const node = (parent && parent.current) || document.body
+        node?.appendChild(stats.dom)
+        stats.dom.querySelectorAll('canvas').forEach((canvas) => {
+          canvas.style.removeProperty('position')
+        })
+        if (id) stats.dom.id = id
+        if (clearStatsGlStyle) stats.dom.removeAttribute('style')
+        stats.dom.removeAttribute('style')
+        const classNames = (className ?? '').split(' ').filter((cls) => cls)
+        if (classNames.length) stats.dom.classList.add(...classNames)
+        const end = addAfterEffect(() => stats.update())
+        return () => {
+          if (classNames.length) stats.dom.classList.remove(...classNames)
+          node?.removeChild(stats.dom)
+          end()
+        }
+      }
+    }, [parent, stats, className, id, clearStatsGlStyle])
+
+    return null
+  }
 )
 
 StatsGl.displayName = 'StatsGl'

src/core/useEnvironment.tsx

@@ -91,8 +91,8 @@ export function useEnvironment({
 
   texture.mapping = isCubemap ? CubeReflectionMapping : EquirectangularReflectionMapping
 
-  if ('colorSpace' in texture) (texture as any).colorSpace = encoding ?? isCubemap ? 'srgb' : 'srgb-linear'
-  else (texture as any).encoding = encoding ?? isCubemap ? sRGBEncoding : LinearEncoding
+  if ('colorSpace' in texture) (texture as any).colorSpace = (encoding ?? isCubemap) ? 'srgb' : 'srgb-linear'
+  else (texture as any).encoding = (encoding ?? isCubemap) ? sRGBEncoding : LinearEncoding
 
   return texture
 }
@@ -175,14 +175,14 @@ function getExtension(files: string | string[]) {
   const extension: string | false | undefined = isCubemap
     ? 'cube'
     : isGainmap
-    ? 'webp'
-    : firstEntry.startsWith('data:application/exr')
-    ? 'exr'
-    : firstEntry.startsWith('data:application/hdr')
-    ? 'hdr'
-    : firstEntry.startsWith('data:image/jpeg')
-    ? 'jpg'
-    : firstEntry.split('.').pop()?.split('?')?.shift()?.toLowerCase()
+      ? 'webp'
+      : firstEntry.startsWith('data:application/exr')
+        ? 'exr'
+        : firstEntry.startsWith('data:application/hdr')
+          ? 'hdr'
+          : firstEntry.startsWith('data:image/jpeg')
+            ? 'jpg'
+            : firstEntry.split('.').pop()?.split('?')?.shift()?.toLowerCase()
 
   return { extension, isCubemap, isGainmap }
 }
@@ -192,14 +192,14 @@ function getLoader(extension: string | undefined) {
     extension === 'cube'
       ? CubeTextureLoader
       : extension === 'hdr'
-      ? RGBELoader
-      : extension === 'exr'
-      ? EXRLoader
-      : extension === 'jpg' || extension === 'jpeg'
-      ? (HDRJPGLoader as unknown as typeof Loader)
-      : extension === 'webp'
-      ? (GainMapLoader as unknown as typeof Loader)
-      : null
+        ? RGBELoader
+        : extension === 'exr'
+          ? EXRLoader
+          : extension === 'jpg' || extension === 'jpeg'
+            ? (HDRJPGLoader as unknown as typeof Loader)
+            : extension === 'webp'
+              ? (GainMapLoader as unknown as typeof Loader)
+              : null
 
   return loader
 }

src/web/KeyboardControls.tsx

@@ -48,7 +48,7 @@ type KeyboardControlsProps = {
 type KeyboardControlsApi<T extends string = string> = [
   StoreApiWithSubscribeWithSelector<KeyboardControlsState<T>>['subscribe'],
   StoreApiWithSubscribeWithSelector<KeyboardControlsState<T>>['getState'],
-  UseBoundStore<KeyboardControlsState<T>>
+  UseBoundStore<KeyboardControlsState<T>>,
 ]
 
 const context = /* @__PURE__ */ React.createContext<KeyboardControlsApi>(null!)
@@ -115,7 +115,7 @@ type Selector<T extends string = string> = (state: KeyboardControlsState<T>) =>
 
 export function useKeyboardControls<T extends string = string>(): [
   StoreApiWithSubscribeWithSelector<KeyboardControlsState<T>>['subscribe'],
-  StoreApiWithSubscribeWithSelector<KeyboardControlsState<T>>['getState']
+  StoreApiWithSubscribeWithSelector<KeyboardControlsState<T>>['getState'],
 ]
 export function useKeyboardControls<T extends string = string>(sel: Selector<T>): ReturnType<Selector<T>>
 export function useKeyboardControls<T extends string = string>(
@@ -124,7 +124,7 @@ export function useKeyboardControls<T extends string = string>(
   | ReturnType<Selector<T>>
   | [
       StoreApiWithSubscribeWithSelector<KeyboardControlsState<T>>['subscribe'],
-      StoreApiWithSubscribeWithSelector<KeyboardControlsState<T>>['getState']
+      StoreApiWithSubscribeWithSelector<KeyboardControlsState<T>>['getState'],
     ] {
   const [sub, get, store] = React.useContext<KeyboardControlsApi<T>>(context)
   if (sel) return store(sel)

src/web/pivotControls/PlaneSlider.tsx

@@ -10,8 +10,8 @@ const decomposeIntoBasis = (e1: THREE.Vector3, e2: THREE.Vector3, offset: THREE.
     Math.abs(e1.x) >= Math.abs(e1.y) && Math.abs(e1.x) >= Math.abs(e1.z)
       ? 0
       : Math.abs(e1.y) >= Math.abs(e1.x) && Math.abs(e1.y) >= Math.abs(e1.z)
-      ? 1
-      : 2
+        ? 1
+        : 2
   const e2DegrowthOrder = [0, 1, 2].sort((a, b) => Math.abs(e2.getComponent(b)) - Math.abs(e2.getComponent(a)))
   const i2 = i1 === e2DegrowthOrder[0] ? e2DegrowthOrder[1] : e2DegrowthOrder[0]
   const a1 = e1.getComponent(i1)