adopt new import root import syntax "~/*"

app/(pages)/(components)/footer/index.js

@@ -1,4 +1,4 @@
-import { Link } from 'components/link'
+import { Link } from '~/components/link'
 import s from './footer.module.css'
 
 export function Footer() {

app/(pages)/(components)/navigation/index.js

@@ -1,8 +1,8 @@
 'use client'
 
 import cn from 'clsx'
-import { Link } from 'components/link'
 import { usePathname } from 'next/navigation'
+import { Link } from '~/components/link'
 import s from './navigation.module.css'
 
 const LINKS = [

app/(pages)/(components)/wrapper/index.js

@@ -1,5 +1,5 @@
 import cn from 'clsx'
-import { Canvas } from 'libs/webgl/components/canvas'
+import { Canvas } from '~/libs/webgl/components/canvas'
 import { Footer } from '../footer'
 import { Lenis } from '../lenis'
 import { Navigation } from '../navigation'

app/(pages)/hubspot/(components)/subscribe/index.js

@@ -1,7 +1,7 @@
 'use client'
 
 import cn from 'clsx'
-import { Messages, SubmitButton, useFormContext } from 'libs/form'
+import { Messages, SubmitButton, useFormContext } from '~/libs/form'
 import s from './subscribe.module.css'
 
 export const Subscribe = ({ idx = 0, form }) => {

app/(pages)/hubspot/page.js

@@ -1,5 +1,5 @@
-import { Form } from 'libs/form'
-import { getForm } from 'libs/hubspot-forms/fetch-form'
+import { Form } from '~/libs/form'
+import { getForm } from '~/libs/hubspot-forms/fetch-form'
 import { Wrapper } from '../(components)/wrapper'
 import { Subscribe } from './(components)/subscribe'
 import s from './hubspot.module.css'

app/(pages)/layout.js

@@ -1,12 +1,11 @@
 import { GoogleAnalytics, GoogleTagManager } from '@next/third-parties/google'
-import { Debug } from 'components/debug'
-import { GSAP } from 'components/gsap'
-import { RealViewport } from 'components/real-viewport'
-import { StyleVariables } from 'libs/style-variables'
-import { colors, themes } from 'styles/config.mjs'
+import { Debug } from '~/components/debug'
+import { GSAP } from '~/components/gsap'
+import { RealViewport } from '~/components/real-viewport'
+import { StyleVariables } from '~/libs/style-variables'
+import { colors, themes } from '~/styles/config.mjs'
+import '~/styles/global.css'
 import AppData from '../../package.json'
-
-import 'styles/global.css'
 import { fonts } from '../fonts'
 
 const APP_NAME = AppData.name

app/(pages)/r3f/(components)/box/index.js

@@ -1,14 +1,14 @@
 'use client'
 
 import { useRect } from '@darkroom.engineering/hamo'
-import { WebGLTunnel } from 'libs/webgl/components/tunnel'
 import dynamic from 'next/dynamic'
+import { WebGLTunnel } from '~/libs/webgl/components/tunnel'
 
 const WebGLBox = dynamic(
   () => import('./webgl').then(({ WebGLBox }) => WebGLBox),
   {
     ssr: false,
-  },
+  }
 )
 
 export function Box({ className }) {

app/(pages)/r3f/(components)/box/webgl.js

@@ -1,10 +1,10 @@
 'use client'
 
 import { useFrame } from '@react-three/fiber'
-import { useCurrentSheet } from 'libs/theatre'
-import { useTheatre } from 'libs/theatre/hooks/use-theatre'
-import { useWebGLRect } from 'libs/webgl/hooks/use-webgl-rect'
 import { useRef } from 'react'
+import { useCurrentSheet } from '~/libs/theatre'
+import { useTheatre } from '~/libs/theatre/hooks/use-theatre'
+import { useWebGLRect } from '~/libs/webgl/hooks/use-webgl-rect'
 
 export function WebGLBox({ theatreKey = 'box', rect }) {
   const meshRef = useRef()
@@ -30,7 +30,7 @@ export function WebGLBox({ theatreKey = 'box', rect }) {
       onValuesChange: ({ x, y, z }) => {
         meshRef.current.position.set(x, y, z)
       },
-    },
+    }
   )
 
   useWebGLRect(rect, ({ scale, position, rotation }) => {

app/(pages)/r3f/page.js

@@ -1,4 +1,4 @@
-import { TheatreProjectProvider } from 'libs/theatre'
+import { TheatreProjectProvider } from '~/libs/theatre'
 import { Wrapper } from '../(components)/wrapper'
 import { Box } from './(components)/box'
 import s from './r3f.module.css'

app/(pages)/shopify/(components)/customer/index.js

@@ -1,7 +1,7 @@
 'use client'
 
-import { Form, SubmitButton } from 'libs/form'
-import { InputField } from 'libs/form/fields'
+import { Form, SubmitButton } from '~/libs/form'
+import { InputField } from '~/libs/form/fields'
 
 // import {
 //   LoginCustomerAction,

app/(pages)/shopify/(components)/product/index.js

@@ -1,5 +1,5 @@
-import { Image } from 'components/image'
-import { getCollectionProducts } from 'libs/shopify'
+import { Image } from '~/components/image'
+import { getCollectionProducts } from '~/libs/shopify'
 import { SizeAndBuy } from '../size-and-buy'
 import s from './product.module.css'
 

app/(pages)/shopify/(components)/show-cart/index.js

@@ -1,7 +1,7 @@
 'use client'
 
 import cn from 'clsx'
-import { useCartModal } from 'libs/shopify/cart/modal'
+import { useCartModal } from '~/libs/shopify/cart/modal'
 
 export const ShowCart = ({ className }) => {
   const { openCart } = useCartModal()

app/(pages)/shopify/(components)/size-and-buy/index.js

@@ -1,8 +1,8 @@
 'use client'
 
-import { Dropdown } from 'components/dropdown'
-import { AddToCart } from 'libs/shopify/cart/add-to-cart'
 import { useState } from 'react'
+import { Dropdown } from '~/components/dropdown'
+import { AddToCart } from '~/libs/shopify/cart/add-to-cart'
 import s from './size-and-buy.module.css'
 
 export const SizeAndBuy = ({ product }) => {

app/(pages)/shopify/account/page.js

@@ -1,5 +1,5 @@
-import { getCustomer } from 'libs/shopify/customer/actions'
 import { Suspense } from 'react'
+import { getCustomer } from '~/libs/shopify/customer/actions'
 import { LoginForm, LogoutButton, RegisterForm } from '../(components)/customer'
 import { Wrapper } from '../../(components)/wrapper'
 import s from './account.module.css'

app/(pages)/shopify/page.js

@@ -1,4 +1,4 @@
-import { Cart } from 'libs/shopify/cart'
+import { Cart } from '~/libs/shopify/cart'
 import { Wrapper } from '../(components)/wrapper'
 import { Product } from './(components)/product'
 import { ShowCart } from './(components)/show-cart'

app/(pages)/storyblok/(component)/tutorial/index.js

@@ -1,7 +1,7 @@
 'use client'
 
 import { storyblokEditable } from '@storyblok/js'
-import { useStoryblokContext } from 'libs/storyblok/context'
+import { useStoryblokContext } from '~/libs/storyblok/context'
 import s from './tutorial.module.css'
 
 // TODO:

app/(pages)/storyblok/[slug]/(component)/article/index.js

@@ -1,7 +1,7 @@
 'use client'
 
 import { storyblokEditable } from '@storyblok/js'
-import { useStoryblokContext } from 'libs/storyblok/context'
+import { useStoryblokContext } from '~/libs/storyblok/context'
 import s from './article.module.css'
 
 export function Article() {

app/(pages)/storyblok/[slug]/page.js

@@ -1,8 +1,8 @@
-import { Wrapper } from 'app/(pages)/(components)/wrapper'
-import { StoryblokApi } from 'libs/storyblok'
-import { StoryblokContextProvider } from 'libs/storyblok/context'
 import { draftMode } from 'next/headers'
 import { notFound } from 'next/navigation'
+import { Wrapper } from '~/app/(pages)/(components)/wrapper'
+import { StoryblokApi } from '~/libs/storyblok'
+import { StoryblokContextProvider } from '~/libs/storyblok/context'
 import { Article } from './(component)/article'
 import s from './article-page.module.css'
 

app/(pages)/storyblok/page.js

@@ -1,7 +1,7 @@
-import { StoryblokApi } from 'libs/storyblok'
-import { StoryblokContextProvider } from 'libs/storyblok/context'
 import { draftMode } from 'next/headers'
 import { notFound } from 'next/navigation'
+import { StoryblokApi } from '~/libs/storyblok'
+import { StoryblokContextProvider } from '~/libs/storyblok/context'
 import { Wrapper } from '../(components)/wrapper'
 import { Tutorial } from './(component)/tutorial'
 import s from './storyblok.module.css'

app/debug/orchestra/page.js

@@ -1,6 +1,6 @@
 'use client'
 
-import { OrchestraToggle } from 'libs/orchestra/react'
+import { OrchestraToggle } from '~/libs/orchestra/react'
 import s from './orchestra.module.css'
 
 function OrchestraPage() {

app/opengraph-image.js

@@ -1,5 +1,5 @@
 import { ImageResponse } from 'next/og'
-import { themes } from 'styles/config.mjs'
+import { themes } from '~/styles/config.mjs'
 import AppData from '../package.json'
 
 export const runtime = 'edge'
@@ -15,7 +15,10 @@ export const contentType = 'image/png'
 
 const getFont = async () => {
   const res = await fetch(
-    new URL('public/fonts/ServerMono/ServerMono-Regular.woff2', import.meta.url)
+    new URL(
+      '../public/fonts/ServerMono/ServerMono-Regular.woff2',
+      import.meta.url
+    )
   )
   return await res.arrayBuffer()
 }

app/storyblok-sitemap.js

@@ -1,6 +1,6 @@
 // this file is used to generate the sitemap websites using storyblok
 
-import { StoryblokApi } from 'libs/storyblok'
+import { StoryblokApi } from '~/libs/storyblok'
 
 const storyblokApi = new StoryblokApi()
 

components/animated-gradient/index.tsx

@@ -1,9 +1,9 @@
 'use client'
 
 import { useRect } from '@darkroom.engineering/hamo'
-import { WebGLTunnel } from 'libs/webgl/components/tunnel'
 import dynamic from 'next/dynamic'
 import type { CSSProperties, ComponentProps } from 'react'
+import { WebGLTunnel } from '~/libs/webgl/components/tunnel'
 
 const WebGLAnimatedGradient = dynamic(
   () =>

components/animated-gradient/material.ts

@@ -1,10 +1,10 @@
-import { NOISE } from 'libs/webgl/utils/noise'
 import {
   MeshBasicMaterial,
   type Texture,
   Vector2,
   type WebGLProgramParametersWithUniforms,
 } from 'three'
+import { NOISE } from '~/libs/webgl/utils/noise'
 
 export class AnimatedGradientMaterial extends MeshBasicMaterial {
   private uniforms: {

components/animated-gradient/webgl.tsx

@@ -1,10 +1,13 @@
-import { type ExtendedDOMRect, useWindowSize } from '@darkroom.engineering/hamo'
+import {
+  type ExtendedDOMRect,
+  useObjectFit,
+  useWindowSize,
+} from '@darkroom.engineering/hamo'
 import { useFrame, useThree } from '@react-three/fiber'
-import { useObjectFit } from 'hooks/use-object-fit'
-import { useFlowmap } from 'libs/webgl/components/flowmap'
-import { useWebGLRect } from 'libs/webgl/hooks/use-webgl-rect'
 import { useEffect, useMemo, useRef, useState } from 'react'
 import { CanvasTexture, LinearFilter, type Mesh } from 'three'
+import { useFlowmap } from '~/libs/webgl/components/flowmap'
+import { useWebGLRect } from '~/libs/webgl/hooks/use-webgl-rect'
 import { AnimatedGradientMaterial } from './material'
 
 // @refresh reset

components/debug/index.tsx

@@ -1,23 +1,24 @@
 'use client'
 
-import { useOrchestra } from 'libs/orchestra/react'
 import dynamic from 'next/dynamic'
 import { useEffect } from 'react'
+import { useOrchestra } from '~/libs/orchestra/react'
 
 const Studio = dynamic(
-  () => import('libs/theatre/studio').then(({ Studio }) => Studio),
+  () => import('~/libs/theatre/studio').then(({ Studio }) => Studio),
   { ssr: false }
 )
 const Stats = dynamic(
-  () => import('libs/orchestra/stats').then(({ Stats }) => Stats),
+  () => import('~/libs/orchestra/stats').then(({ Stats }) => Stats),
   { ssr: false }
 )
 const GridDebugger = dynamic(
-  () => import('libs/orchestra/grid').then(({ GridDebugger }) => GridDebugger),
+  () =>
+    import('~/libs/orchestra/grid').then(({ GridDebugger }) => GridDebugger),
   { ssr: false }
 )
 const Minimap = dynamic(
-  () => import('libs/orchestra/minimap').then(({ Minimap }) => Minimap),
+  () => import('~/libs/orchestra/minimap').then(({ Minimap }) => Minimap),
   { ssr: false }
 )
 

components/fold/index.tsx

@@ -2,14 +2,14 @@
 
 import { useRect, useWindowSize } from '@darkroom.engineering/hamo'
 import cn from 'clsx'
-import { useScrollTrigger } from 'hooks/use-scroll-trigger'
 import {
   type HTMLAttributes,
   type ReactNode,
   createContext,
   useContext,
   useRef,
 } from 'react'
+import { useScrollTrigger } from '~/hooks/use-scroll-trigger'
 import s from './fold.module.css'
 
 const FoldContext = createContext(false)

components/image/index.tsx

@@ -6,12 +6,13 @@ import type { CSSProperties, Ref } from 'react'
 import { breakpoints } from '~/styles/config.mjs'
 import s from './image.module.css'
 
-type ImageProps = Omit<NextImageProps, 'objectFit'> & {
+export type ImageProps = Omit<NextImageProps, 'objectFit' | 'alt'> & {
   objectFit?: CSSProperties['objectFit']
   block?: boolean
   mobileSize?: `${number}vw`
   desktopSize?: `${number}vw`
   ref?: Ref<HTMLImageElement>
+  alt?: string
 }
 
 export function Image({

components/link/index.tsx

@@ -3,9 +3,11 @@
 import { useLenis } from 'lenis/react'
 import NextLink, { type LinkProps as NextLinkProps } from 'next/link'
 import { usePathname } from 'next/navigation'
-import type { ElementType, Ref } from 'react'
+import type { ElementType, HTMLAttributes, Ref } from 'react'
 
-type LinkProps = Omit<NextLinkProps, 'href'> & {
+interface LinkProps
+  extends HTMLAttributes<HTMLAnchorElement>,
+    Omit<NextLinkProps, 'href'> {
   href?: string
   fallback?: ElementType
   ref?: Ref<HTMLAnchorElement>

components/marquee/index.tsx

@@ -7,8 +7,8 @@ import {
 } from '@darkroom.engineering/hamo'
 import cn from 'clsx'
 import { useLenis } from 'lenis/react'
-import { modulo } from 'libs/maths'
 import { type HTMLAttributes, useRef } from 'react'
+import { modulo } from '~/libs/maths'
 import s from './marquee.module.css'
 
 interface MarqueeProps extends HTMLAttributes<HTMLDivElement> {

components/progress-text/index.tsx

@@ -2,12 +2,12 @@
 
 import { useRect } from '@darkroom.engineering/hamo'
 import cn from 'clsx'
+import { type CSSProperties, Fragment, type ReactNode, useRef } from 'react'
 import {
   type UseScrollTriggerOptions,
   useScrollTrigger,
-} from 'hooks/use-scroll-trigger'
-import { slugify } from 'libs/slugify'
-import { type CSSProperties, Fragment, type ReactNode, useRef } from 'react'
+} from '~/hooks/use-scroll-trigger'
+import { slugify } from '~/libs/slugify'
 import s from './progress-text.module.css'
 
 // TODO: add support for children as an array of strings and objects

components/scrollbar/index.tsx

@@ -2,8 +2,8 @@
 
 import { useRect } from '@darkroom.engineering/hamo'
 import { useLenis } from 'lenis/react'
-import { mapRange } from 'libs/maths'
 import { useEffect, useRef } from 'react'
+import { mapRange } from '~/libs/maths'
 import s from './scrollbar.module.css'
 
 export function Scrollbar() {

components/split-text/index.tsx

@@ -4,7 +4,6 @@ import { useResizeObserver } from '@darkroom.engineering/hamo'
 import cn from 'clsx'
 import { gsap } from 'gsap'
 import { SplitText as GSAPSplitText } from 'gsap/SplitText'
-import { useIsVisualEditor } from 'libs/storyblok/use-is-visual-editor'
 import {
   type Ref,
   useEffect,
@@ -13,6 +12,7 @@ import {
   useRef,
   useState,
 } from 'react'
+import { useIsVisualEditor } from '~/libs/storyblok/use-is-visual-editor'
 import s from './split-text.module.css'
 
 if (typeof window !== 'undefined') {