chore: update package dependencies and configurations

- Upgraded pnpm from version 10.18.1 to 10.19.0.
- Downgraded @uswriting/exiftool from version 1.0.5 to 1.0.3 in multiple package.json files.
- Updated various packages in pnpm-lock.yaml to their latest beta versions, including rolldown and related bindings.
- Adjusted TypeScript configuration in apps/ssr to change JSX setting from "react-jsx" to "preserve".
- Modified loading animations in UI components to include a duration of 1000ms for smoother transitions.

Signed-off-by: Innei <tukon479@gmail.com>

Author: Innei

apps/ssr/next-env.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="next" />
 /// <reference types="next/image-types/global" />
-import './.next/dev/types/routes.d.ts'
+/// <reference path="./.next/types/routes.d.ts" />
 
 // NOTE: This file should not be edited
 // see https://nextjs.org/docs/app/api-reference/config/typescript for more information.

apps/ssr/tsconfig.json

@@ -17,7 +17,7 @@
     "resolveJsonModule": true,
     "isolatedModules": true,
     "allowImportingTsExtensions": true,
-    "jsx": "react-jsx",
+    "jsx": "preserve",
     "plugins": [
       {
         "name": "next"

apps/web/package.json

@@ -41,7 +41,7 @@
     "@t3-oss/env-core": "catalog:",
     "@tanstack/react-query": "5.90.5",
     "@use-gesture/react": "10.3.1",
-    "@uswriting/exiftool": "1.0.5",
+    "@uswriting/exiftool": "1.0.3",
     "blurhash": "2.0.5",
     "clsx": "2.1.1",
     "consola": "3.4.2",
@@ -115,4 +115,4 @@
     "vite-plugin-html": "3.2.2",
     "vite-plugin-pwa": "1.1.0"
   }
-}
+}

apps/web/src/components/ui/button/Button.tsx

@@ -115,7 +115,7 @@ const Button = ({
         <span className="pointer-events-none inline-flex items-center justify-center gap-1.5">
           <i
             className={cx(
-              'shrink-0 animate-spin i-mingcute-loading-3-line',
+              'shrink-0 animate-spin i-mingcute-loading-3-line !duration-1000',
               size === 'xs' || size === 'sm' ? 'size-3' : 'size-4',
             )}
             aria-hidden="true"

apps/web/src/components/ui/dialog/dialog.tsx

@@ -5,6 +5,8 @@ import * as React from 'react'
 import { clsxm } from '~/lib/cn'
 import { Spring } from '~/lib/spring'
 
+import { useRootPortal } from '../portal/provider'
+
 const DialogContext = React.createContext<{ open: boolean }>({ open: false })
 
 const Dialog = ({
@@ -43,10 +45,11 @@ const DialogPortal = ({
   ...props
 }: React.ComponentProps<typeof DialogPrimitive.Portal>) => {
   const { open } = React.use(DialogContext)
+  const to = useRootPortal()
 
   return (
-    <DialogPrimitive.Portal forceMount {...props}>
-      <AnimatePresence>{open && children}</AnimatePresence>
+    <DialogPrimitive.Portal container={to} forceMount {...props}>
+      <AnimatePresence mode="wait">{open && children}</AnimatePresence>
     </DialogPrimitive.Portal>
   )
 }
@@ -95,7 +98,7 @@ const DialogContent = ({
       {...props}
     >
       <m.div
-        className="border-accent/20 relative gap-4 overflow-hidden rounded-2xl border p-6 backdrop-blur-2xl"
+        className="border-accent/20 gap-4 overflow-hidden rounded-2xl border p-6 backdrop-blur-2xl"
         style={{
           backgroundImage:
             'linear-gradient(to bottom right, color-mix(in srgb, var(--color-background) 98%, transparent), color-mix(in srgb, var(--color-background) 95%, transparent))',
@@ -123,7 +126,7 @@ const DialogContent = ({
         />
 
         {/* Content */}
-        <div className="relative">{children}</div>
+        <div className="relative flex h-0 flex-1 flex-col">{children}</div>
       </m.div>
     </DialogPrimitive.Content>
   </DialogPortal>

apps/web/src/components/ui/loading.tsx

@@ -14,6 +14,6 @@ export const LoadingCircle: Component<LoadingCircleProps> = ({
   size,
 }) => (
   <div className={clsxm(sizeMap[size], className)}>
-    <i className="i-mingcute-loading-3-line animate-spin" />
+    <i className="i-mingcute-loading-3-line animate-spin !duration-1000" />
   </div>
 )

apps/web/src/components/ui/photo-viewer/HistogramChart.tsx

@@ -258,7 +258,7 @@ export const HistogramChart: FC<{
     <div className={cx('relative grow w-full h-32 group', className)}>
       {loading && (
         <div className="bg-material-ultra-thin absolute inset-0 flex items-center justify-center rounded-sm backdrop-blur-xl">
-          <div className="i-mingcute-loading-3-line animate-spin text-xl" />
+          <div className="i-mingcute-loading-3-line animate-spin text-xl !duration-1000" />
         </div>
       )}
       {error && (

apps/web/src/components/ui/photo-viewer/LoadingIndicator.tsx

@@ -85,7 +85,7 @@ export const LoadingIndicator = ({
           {loadingState.isError ? (
             <div className="i-mingcute-warning-line text-lg text-red-400" />
           ) : (
-            <div className="i-mingcute-loading-3-line animate-spin text-lg" />
+            <div className="i-mingcute-loading-3-line animate-spin text-lg !duration-1000" />
           )}
         </div>
         <div className="flex min-w-0 flex-col gap-0.5">

apps/web/src/components/ui/photo-viewer/RawExifViewer.tsx

@@ -307,6 +307,7 @@ export const RawExifViewer: React.FC<RawExifViewerProps> = ({
       const response = await fetch(currentPhoto.originalUrl)
       const blob = await response.blob()
       const data = await ExifToolManager.parse(blob, currentPhoto.s3Key)
+
       setRawExifData(data || null)
       setIsOpen(true)
     } catch (error) {
@@ -347,7 +348,7 @@ export const RawExifViewer: React.FC<RawExifViewerProps> = ({
           className="cursor-pointer text-white/70 duration-200 hover:text-white disabled:cursor-not-allowed disabled:opacity-50"
         >
           {isLoading ? (
-            <i className="i-mingcute-loading-3-line animate-spin" />
+            <i className="i-mingcute-loading-3-line animate-spin !duration-1000" />
           ) : (
             <i className="i-mingcute-braces-line" />
           )}
@@ -368,7 +369,7 @@ export const RawExifViewer: React.FC<RawExifViewerProps> = ({
 
         {isLoading && (
           <div className="flex h-full grow flex-col items-center justify-center gap-4 text-white/70">
-            <i className="i-mingcute-loading-3-line animate-spin text-3xl" />
+            <i className="i-mingcute-loading-3-line animate-spin text-3xl !duration-1000" />
             <span className="text-sm">
               {t('exif.raw.loading', {
                 defaultValue: 'Loading EXIF data...',

apps/web/src/components/ui/sonner.tsx

@@ -72,7 +72,9 @@ const Toaster = ({ ...props }: ToasterProps) => {
         error: <i className="i-mingcute-close-circle-fill" />,
         warning: <i className="i-mingcute-warning-fill" />,
         info: <i className="i-mingcute-information-fill" />,
-        loading: <i className="i-mingcute-loading-3-fill animate-spin" />,
+        loading: (
+          <i className="i-mingcute-loading-3-fill animate-spin !duration-1000" />
+        ),
       }}
       {...props}
     />