feat: many updates (#2643)

* fix: bundle requires browser output in platform (#2608)

* fix: bundle requires browser output in platform

* fix: rolldown issues

* fix: finalize rollup

* chore: prettier

* chore: prettier

* fix: adjust root name for better local linking. Dist folder package confused pnpm

* fix: update lockfile for ci

* fix: update tests for unbuild

* fix: simplified canary

* fix: package name copying

* feat: cleaned up docs, please god trigger a push

* feat: actual push, I hate git

* feat: prettier changes

* feat: proper file endings (#2615)

* feat: add case-insensitive commit type handling to semantic-release

The commit analyzer was rejecting commits with capitalized types (Feat, Fix)
which caused releases to silently fail. This adds explicit release rules for
common case variations to prevent future release failures.

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

* V11 general fixes (#2640)

* fix: sandbox starter.
closes Bug report template starter is broken
Fixes #2553

* feat: minor fixes to dragControls and portal
closes #2097

* fix: fisheye events
closes #2165

* feat: Multi-type instances objects
closes: #2181

* feat: Native Eclusions List

* feat: PivotControls Enhanced.
Added object selection from old demo version.
Added Webgpu support for lines
Addded story for object attach mode

* feat: Add Blur listener for keyboard events if the wondow is exited

* Fix: transforms in html
closes #2506

* feat: Canvas Resize bugs with safari

* feat: onHover for PivotControls

* fix: Update types for segments.
closes: #2561

* chore: clean vanilla from webgpu

* Fix parallel plane in rotatior of PivotControls
closes #2406

* feat: add interactive priority

* fix: Scroll Controls React 19 issues.
Closes #2431

* feat: use external ktx loader

* feat: fix html
feat: fix reflector being crazy

* chore: fix types

* chore: linter

* chore: allow for alt versions of r3f

* chore: update lockfile

* fix: odd CI bug

* feat: pixelPerfect html handling. (#2642)

Solves subpixel bluring
closes #2380

---------

Co-authored-by: Claude Opus 4.5 <noreply@anthropic.com>

Author: DennisSmolek

.claude/settings.local.json

@@ -18,7 +18,9 @@
       "Bash(npx vitest:*)",
       "Bash(node test-debug.mjs:*)",
       "Bash(yarn test:bundles:*)",
-      "Bash(test:*)"
+      "Bash(test:*)",
+      "Bash(yarn typecheck:*)",
+      "Bash(yarn eslint:*)"
     ]
   }
 }

src/core/Controls/ScrollControls/ScrollControls.tsx

@@ -5,6 +5,7 @@ import { context as fiberContext, RootState, useFrame, useThree } from '@react-t
 import { DomEvent } from '@react-three/fiber/'
 import { easing } from 'maath'
 import { ForwardRefComponent } from '../../../utils/ts-utils'
+import { roundToPixelRatio } from '../../../utils/generic'
 
 export type ScrollControlsProps = {
   /** Precision, default 0.00001 */
@@ -27,6 +28,8 @@ export type ScrollControlsProps = {
   /** If true attaches the scroll container before the canvas */
   prepend?: boolean
   enabled?: boolean
+  /** Snaps translate3d values to physical device pixels to prevent subpixel blurriness, default true */
+  pixelPerfect?: boolean
   style?: React.CSSProperties
   children: React.ReactNode
 }
@@ -44,6 +47,7 @@ export type ScrollControlsState = {
   range(from: number, distance: number, margin?: number): number
   curve(from: number, distance: number, margin?: number): number
   visible(from: number, distance: number, margin?: number): boolean
+  pixelPerfect: boolean
 }
 
 const context = /* @__PURE__ */ React.createContext<ScrollControlsState>(null!)
@@ -91,6 +95,7 @@ export function ScrollControls({
   damping = 0.25,
   maxSpeed = Infinity,
   prepend = false,
+  pixelPerfect = true,
   style = {},
   children,
 }: ScrollControlsProps) {
@@ -113,6 +118,7 @@ export function ScrollControls({
       delta: 0,
       scroll,
       pages,
+      pixelPerfect,
       // 0-1 for a range between from -> from + distance
       range(from: number, distance: number, margin: number = 0) {
         const start = from - margin
@@ -131,7 +137,7 @@ export function ScrollControls({
       },
     }
     return state
-  }, [eps, damping, horizontal, pages])
+  }, [eps, damping, horizontal, pages, pixelPerfect])
 
   React.useEffect(() => {
     el.style.position = 'absolute'
@@ -275,9 +281,13 @@ const ScrollHtml: ForwardRefComponent<{ children?: React.ReactNode; style?: Reac
       }, [state.fixed])
       useFrame(() => {
         if (state.delta > state.eps) {
-          group.current.style.transform = `translate3d(${
-            state.horizontal ? -width * (state.pages - 1) * state.offset : 0
-          }px,${state.horizontal ? 0 : height * (state.pages - 1) * -state.offset}px,0)`
+          let x = state.horizontal ? -width * (state.pages - 1) * state.offset : 0
+          let y = state.horizontal ? 0 : height * (state.pages - 1) * -state.offset
+          if (state.pixelPerfect) {
+            x = roundToPixelRatio(x)
+            y = roundToPixelRatio(y)
+          }
+          group.current.style.transform = `translate3d(${x}px,${y}px,0)`
         }
       })
       root.render(

src/core/UI/Html/Html.tsx

@@ -17,6 +17,7 @@ import { Assign } from 'utility-types'
 import { ThreeElements, useFrame, useThree } from '@react-three/fiber'
 import { ForwardRefComponent } from '../../../utils/ts-utils'
 import { roundEven } from '../../../utils/roundEven'
+import { roundToPixelRatio } from '../../../utils/generic'
 
 const v1 = /* @__PURE__ */ new Vector3()
 const v2 = /* @__PURE__ */ new Vector3()
@@ -142,6 +143,8 @@ export interface HtmlProps extends Omit<Assign<React.HTMLAttributes<HTMLDivEleme
   geometry?: React.ReactNode // Material for occlusion plane
   castShadow?: boolean // Cast shadow for occlusion plane
   receiveShadow?: boolean // Receive shadow for occlusion plane
+  /** Snaps translate3d values to physical device pixels to prevent subpixel blurriness, default true */
+  pixelPerfect?: boolean
 }
 
 /**
@@ -187,6 +190,7 @@ export const Html: ForwardRefComponent<HtmlProps, HTMLDivElement> = /* @__PURE__
       as = 'div',
       wrapperClass,
       pointerEvents = 'auto',
+      pixelPerfect = true,
       ...props
     }: HtmlProps,
     ref: React.Ref<HTMLDivElement>
@@ -369,8 +373,12 @@ export const Html: ForwardRefComponent<HtmlProps, HTMLDivElement> = /* @__PURE__
           el.style.zIndex = `${objectZIndex(group.current, camera, zRange)}`
 
           if (transform) {
-            const widthHalf = forceEven ? roundEven(size.width / 2) : size.width / 2
-            const heightHalf = forceEven ? roundEven(size.height / 2) : size.height / 2
+            let widthHalf = forceEven ? roundEven(size.width / 2) : size.width / 2
+            let heightHalf = forceEven ? roundEven(size.height / 2) : size.height / 2
+            if (pixelPerfect) {
+              widthHalf = roundToPixelRatio(widthHalf)
+              heightHalf = roundToPixelRatio(heightHalf)
+            }
             const fov = camera.projectionMatrix.elements[5] * heightHalf
             const { isOrthographicCamera, top, left, bottom, right } = camera as OrthographicCamera
             const cameraMatrix = getCameraCSSMatrix(camera.matrixWorldInverse)
@@ -394,8 +402,12 @@ export const Html: ForwardRefComponent<HtmlProps, HTMLDivElement> = /* @__PURE__
             }
           } else {
             const scale = distanceFactor === undefined ? 1 : objectScale(group.current, camera) * distanceFactor
-            const x = forceEven ? roundEven(vec[0]) : vec[0]
-            const y = forceEven ? roundEven(vec[1]) : vec[1]
+            let x = forceEven ? roundEven(vec[0]) : vec[0]
+            let y = forceEven ? roundEven(vec[1]) : vec[1]
+            if (pixelPerfect) {
+              x = roundToPixelRatio(x)
+              y = roundToPixelRatio(y)
+            }
             el.style.transform = `translate3d(${x}px,${y}px,0) scale(${scale})`
           }
           oldPosition.current = vec

src/utils/generic.ts

@@ -0,0 +1,4 @@
+export function roundToPixelRatio(value: number) {
+  const ratio = window.devicePixelRatio || 1
+  return Math.round(value * ratio) / ratio
+}