@a-type/ui 3.0.42 → 3.0.44

package/src/components/viewport/useViewportGestures.ts

@@ -51,7 +51,7 @@ export function useViewportGestureControls(
 				if (memo === undefined) return d;
 				const diff = d - memo;
 				if (diff !== 0) {
-					viewport.relativeZoom(diff / PINCH_GESTURE_DAMPING, {
+					viewport.setZoom((v) => v * (1 + diff / PINCH_GESTURE_DAMPING), {
 						origin: 'direct',
 						centroid: { x: origin[0], y: origin[1] },
 						gestureComplete: last,
@@ -62,7 +62,7 @@ export function useViewportGestureControls(
 			onWheel: ({ delta: [x, y], event, last, metaKey, ctrlKey }) => {
 				if (ctrlKey || metaKey) {
 					const { value, type } = dampenedWheelZoom(-y);
-					viewport.relativeZoom(value, {
+					viewport.setZoom((v) => v * (1 + value), {
 						origin: type === 'wheel' ? 'control' : 'direct',
 						centroid: { x: event.clientX, y: event.clientY },
 						gestureComplete: last,
@@ -147,7 +147,7 @@ const CONTROLLED_KEYS = [
 	'ArrowLeft',
 	'ArrowRight',
 ];
-const PAN_SPEED = 1;
+const PAN_SPEED = 0.5;
 const ZOOM_SPEED = 0.001;
 
 export function useKeyboardControls(viewport: ViewportState) {
@@ -195,9 +195,6 @@ export function useKeyboardControls(viewport: ViewportState) {
 	}, []);
 
 	useEffect(() => {
-		const { current: el } = elementRef;
-		if (!el) return;
-
 		// begin a loop which tracks delta time and applies it to
 		// pan velocity for smooth panning regardless of framerate
 		let lastFrameTime: number | null = null;
@@ -213,12 +210,12 @@ export function useKeyboardControls(viewport: ViewportState) {
 			lastFrameTime = now;
 
 			if (activeKeys.pressed.has('=') || activeKeys.pressed.has('+')) {
-				viewport.relativeZoom(delta * ZOOM_SPEED, {
+				viewport.setZoom((v) => v * (1 + delta * ZOOM_SPEED), {
 					origin: 'direct',
 					gestureComplete: true,
 				});
 			} else if (activeKeys.pressed.has('-')) {
-				viewport.relativeZoom(delta * -ZOOM_SPEED, {
+				viewport.setZoom((v) => v * (1 + delta * -ZOOM_SPEED), {
 					origin: 'direct',
 					gestureComplete: true,
 				});
@@ -233,8 +230,8 @@ export function useKeyboardControls(viewport: ViewportState) {
 				: activeKeys.pressed.has('ArrowDown')
 				? 1
 				: 0;
-			velocity.x = delta * xInput * PAN_SPEED;
-			velocity.y = delta * yInput * PAN_SPEED;
+			velocity.x = (delta * xInput * PAN_SPEED) / viewport.zoom;
+			velocity.y = (delta * yInput * PAN_SPEED) / viewport.zoom;
 			if (velocity.x !== 0 || velocity.y !== 0) {
 				viewport.setPanRelative(velocity, {
 					origin: 'direct',

package/src/hooks/useOverrideTheme.ts

@@ -3,7 +3,7 @@ import { PaletteName } from '../uno/index.js';
 
 export function useOverrideTheme(theme: PaletteName | null | undefined) {
 	useLayoutEffect(() => {
-		if (!theme) {
+		if (!theme || typeof document === 'undefined') {
 			return;
 		}
 		document.body.classList.add(`theme-override-${theme}`);

package/src/hooks/useSize.ts

@@ -107,7 +107,7 @@ export function useBounds<E extends HTMLElement>(
 
 export function useBoundsCssVars<E extends HTMLElement>(
 	debounceMs?: number,
-	applyToRef?: RefObject<HTMLElement>,
+	applyToRef?: RefObject<HTMLElement | null>,
 	propertyNames?: {
 		left: string;
 		top: string;

package/src/hooks/useTitleBarColor.ts

@@ -18,6 +18,9 @@ if (typeof document !== 'undefined') {
 }
 
 function changeThemeColor(color: string) {
+	if (typeof document === 'undefined') {
+		return;
+	}
 	// evaluate css var if necessary
 	if (color.startsWith('var(')) {
 		const root = document.documentElement;

package/src/hooks/useVisualViewportOffset.ts

@@ -6,32 +6,35 @@ import { useStableCallback } from './useStableCallback.js';
  * Applies bottom offset px as a CSS custom property to the document root.
  */
 export function useVisualViewportOffset(disable?: boolean) {
-	useReactToViewportChanges((viewport) => {
-		document.documentElement.style.setProperty(
-			'--viewport-bottom-offset',
-			`${window.innerHeight - viewport.height - viewport.offsetTop}px`,
-		);
-		document.documentElement.style.setProperty(
-			'--viewport-height',
-			`${viewport.height}px`,
-		);
-		document.documentElement.style.setProperty(
-			'--viewport-width',
-			`${viewport.width}px`,
-		);
-		document.documentElement.style.setProperty(
-			'--viewport-top-offset',
-			`${viewport.offsetTop}px`,
-		);
-		document.documentElement.style.setProperty(
-			'--viewport-left-offset',
-			`${viewport.offsetLeft}px`,
-		);
-		document.documentElement.style.setProperty(
-			'--keyboard-open',
-			viewport.height < window.innerHeight ? '1' : '0',
-		);
-	}, disable);
+	useReactToViewportChanges(
+		(viewport) => {
+			document.documentElement.style.setProperty(
+				'--viewport-bottom-offset',
+				`${window.innerHeight - viewport.height - viewport.offsetTop}px`,
+			);
+			document.documentElement.style.setProperty(
+				'--viewport-height',
+				`${viewport.height}px`,
+			);
+			document.documentElement.style.setProperty(
+				'--viewport-width',
+				`${viewport.width}px`,
+			);
+			document.documentElement.style.setProperty(
+				'--viewport-top-offset',
+				`${viewport.offsetTop}px`,
+			);
+			document.documentElement.style.setProperty(
+				'--viewport-left-offset',
+				`${viewport.offsetLeft}px`,
+			);
+			document.documentElement.style.setProperty(
+				'--keyboard-open',
+				viewport.height < window.innerHeight ? '1' : '0',
+			);
+		},
+		disable || typeof window === 'undefined',
+	);
 }
 
 export function useIsKeyboardOpen() {
@@ -49,6 +52,9 @@ export function useIsKeyboardOpen() {
 		boolean | undefined
 	>(undefined);
 	useEffect(() => {
+		if (typeof window === 'undefined') {
+			return;
+		}
 		function handleOpen() {
 			setSimulateKeyboardOpen(true);
 		}
@@ -65,6 +71,9 @@ export function useIsKeyboardOpen() {
 
 	const [isKeyboardOpen, setIsKeyboardOpen] = useState(false);
 	useEffect(() => {
+		if (typeof navigator === 'undefined' || typeof window === 'undefined') {
+			return;
+		}
 		if (!('virtualKeyboard' in navigator)) {
 			// no support
 			console.warn(
@@ -111,6 +120,9 @@ function useReactToViewportChanges(
 	const stableCb = useStableCallback(cb);
 	useEffect(() => {
 		if (disable) return;
+		if (typeof window === 'undefined') {
+			return;
+		}
 
 		const viewport = window.visualViewport;
 		if (!viewport) {