@graphcommerce/next-ui 9.1.0-canary.55 → 10.0.0-canary.57

package/ActionCard/ActionCardList.tsx

@@ -1,4 +1,4 @@
-import { Trans } from '@lingui/react'
+import { Trans } from '@lingui/react/macro'
 import type { SxProps, Theme } from '@mui/material'
 import { Alert } from '@mui/material'
 import React from 'react'
@@ -168,7 +168,7 @@ export const ActionCardList = React.forwardRef<HTMLDivElement, ActionCardListPro
             variant='text'
             onClick={() => setShow(!show)}
           >
-            {!show ? <Trans id='More options' /> : <Trans id='Less options' />}{' '}
+            {!show ? <Trans>More options</Trans> : <Trans>Less options</Trans>}{' '}
             <IconSvg
               sx={{
                 transform: show ? 'rotate(180deg)' : 'rotate(0deg)',

package/Breadcrumbs/Breadcrumbs.tsx

@@ -1,5 +1,5 @@
-import { i18n } from '@lingui/core'
-import { Trans } from '@lingui/react'
+import { t } from '@lingui/core/macro'
+import { Trans } from '@lingui/react/macro'
 import type {
   LinkProps,
   BreadcrumbsProps as MuiBreadcrumbProps,
@@ -71,7 +71,7 @@ export function Breadcrumbs(props: BreadcrumbsProps) {
   return (
     <MuiBreadcrumbs
       {...rest}
-      aria-label={i18n._(/* i18n*/ 'Breadcrumbs')}
+      aria-label={t`Breadcrumbs`}
       maxItems={maxItems}
       color='inherit'
       sx={[
@@ -167,7 +167,7 @@ export function Breadcrumbs(props: BreadcrumbsProps) {
           {...linkProps}
           sx={[...(Array.isArray(itemSx) ? itemSx : [itemSx])]}
         >
-          <Trans id='Home' />
+          <Trans>Home</Trans>
         </Link>
       )}
       {breadcrumbLinks.map((breadcrumb) => (

package/Breadcrumbs/BreadcrumbsList.tsx

@@ -1,4 +1,4 @@
-import { Trans } from '@lingui/react'
+import { Trans } from '@lingui/react/macro'
 import { alpha, Box, Link, useTheme } from '@mui/material'
 import type { KeyboardEvent } from 'react'
 import { useEffect, useRef } from 'react'
@@ -74,7 +74,7 @@ export function BreadcrumbsList(props: PopperBreadcrumbsListProps) {
           },
         }}
       >
-        <Trans id='Home' />
+        <Trans>Home</Trans>
       </Link>
       {breadcrumbs.slice(0, breadcrumbs.length).map((breadcrumb) => (
         <Link

package/CHANGELOG.md

@@ -1,5 +1,87 @@
 # Change Log
 
+## 10.0.0-canary.57
+
+## 10.0.0-canary.56
+
+### Major Changes
+
+- [#2546](https://github.com/graphcommerce-org/graphcommerce/pull/2546) [`ed9332a`](https://github.com/graphcommerce-org/graphcommerce/commit/ed9332a7f78966d932041d9a7725641edc92b28d) - ## GraphCommerce 10 - Turbopack Support
+
+  This major release brings full Turbopack compatibility, dramatically improving development speed.
+
+  ### 🚀 Turbopack-Compatible Interceptor System
+
+  The entire plugin/interceptor system has been rewritten to work with Turbopack:
+
+  - **No more Webpack plugins** - Removed `InterceptorPlugin` webpack plugin entirely
+  - **File-based interception** - Original files are moved to `.original.tsx` and replaced with interceptor content
+  - **Direct imports** - Interceptors import from `.original` files instead of embedding source
+  - **New CLI commands**:
+    - `graphcommerce codegen-interceptors` - Generate interceptor files
+    - `graphcommerce cleanup-interceptors` - Reset interceptor system, restore original files
+  - **Stable file hashing** - Deterministic interceptor generation for better caching
+
+  ### ⚙️ Treeshakable Configuration System
+
+  Replaced Webpack `DefinePlugin`-based `import.meta.graphCommerce` with a new generated configuration system:
+
+  - **New `codegen-config-values` command** - Generates TypeScript files with precise typing
+  - **Schema-driven** - Dynamically introspects Zod schemas to determine all available properties
+  - **Fully treeshakable** - Unused config values are eliminated from the bundle
+  - **Type-safe** - Uses `Get<GraphCommerceConfig, 'path'>` for nested property access
+  - **Separate files for nested objects** - Optimal treeshaking for complex configurations
+
+  ### 🔧 withGraphCommerce Changes
+
+  - **Removed** `InterceptorPlugin` - No longer needed with file-based interception
+  - **Removed** `DefinePlugin` for `import.meta.graphCommerce` - Replaced with generated config
+  - **Removed** `@mui/*` alias rewrites - No longer required
+  - **Added** Turbopack loader rules for `.yaml`, `.yml`, and `.po` files
+  - **Added** `serverExternalPackages` for all `@whatwg-node/*` packages
+  - **Added** `optimizePackageImports` for better bundle optimization
+  - **Added** `images.qualities: [52, 75]` for Next.js image optimization
+
+  ### 📦 Lingui Configuration
+
+  - **Renamed** `lingui.config.js` → `lingui.config.ts` with TypeScript support
+  - **Updated** `@graphcommerce/lingui-next/config` to TypeScript with proper exports
+  - **Simplified** formatter options
+
+  ### ⚛️ React 19 & Next.js 16 Compatibility
+
+  - Updated `RefObject<T>` types for React 19 (now includes `null` by default)
+  - Replaced deprecated `React.VFC` with `React.FC`
+  - Fixed `useRef` calls to require explicit initial values
+  - Updated `MutableRefObject` usage in `framer-scroller`
+
+  ### 📋 ESLint 9 Flat Config
+
+  - Migrated from legacy `.eslintrc` to new flat config format (`eslint.config.mjs`)
+  - Updated `@typescript-eslint/*` packages to v8
+  - Fixed AST selector for `SxProps` rule (`typeParameters` → `typeArguments`)
+
+  ### 🔄 Apollo Client
+
+  - Fixed deprecated `name` option → `clientAwareness: { name: 'ssr' }`
+  - Updated error handling types to accept `ApolloError | null | undefined`
+
+  ### ⚠️ Breaking Changes
+
+  - **Node.js 24.x not supported** - Restricted to `>=20 <24.0.0` due to [nodejs/undici#4290](https://github.com/nodejs/undici/issues/4290)
+  - **Interceptor files changed** - Original components now at `.original.tsx`
+  - **Config access changed** - Use generated config values instead of `import.meta.graphCommerce`
+  - **ESLint config format** - Must use flat config (`eslint.config.mjs`)
+  - **Lingui config** - Rename `lingui.config.js` to `lingui.config.ts`
+
+  ### 🗑️ Removed
+
+  - `InterceptorPlugin` webpack plugin
+  - `configToImportMeta` utility
+  - Webpack `DefinePlugin` usage for config
+  - `@mui/*` modern alias rewrites
+  - Debug plugins (`CircularDependencyPlugin`, `DuplicatesPlugin`) ([@paales](https://github.com/paales))
+
 ## 9.1.0-canary.55
 
 ### Patch Changes

package/FramerScroller/SidebarGallery.tsx

@@ -10,6 +10,7 @@ import {
   unstable_usePreventScroll as usePreventScroll,
 } from '@graphcommerce/framer-scroller'
 import { dvh } from '@graphcommerce/framer-utils'
+import { sidebarGallery } from '@graphcommerce/next-config/config'
 import type { SxProps, Theme } from '@mui/material'
 import { Box, Fab, styled, Unstable_TrapFocus as TrapFocus, useTheme } from '@mui/material'
 import { m, useDomEvent, useMotionValue } from 'framer-motion'
@@ -350,8 +351,7 @@ export function SidebarGallery(props: SidebarGalleryProps) {
                   },
                 }}
               >
-                {import.meta.graphCommerce.sidebarGallery?.paginationVariant ===
-                'THUMBNAILS_BOTTOM' ? (
+                {sidebarGallery?.paginationVariant === 'THUMBNAILS_BOTTOM' ? (
                   <ScrollerThumbnails layoutDependency={zoomed} images={images} />
                 ) : (
                   <ScrollerDots layout />

package/Layout/components/LayoutHeaderBack.tsx

@@ -4,7 +4,7 @@ import {
   usePrevUp,
   useUp,
 } from '@graphcommerce/framer-next-pages'
-import { i18n } from '@lingui/core'
+import { t } from '@lingui/core/macro'
 import type { SxProps, Theme } from '@mui/material'
 import { Box } from '@mui/material'
 import { useRouter } from 'next/router'
@@ -55,7 +55,7 @@ export function LayoutHeaderBack(props: BackProps) {
   const backIcon = <IconSvg src={iconChevronLeft} size='medium' />
   const canClickBack = backSteps > 0 && path !== prevUp?.href && !disableBackNavigation
 
-  let label = i18n._(/* i18n */ 'Back')
+  let label = t`Back`
   if (up?.href === path && up?.title) label = up.title
   if (prevUp?.href === path && prevUp?.title) label = prevUp.title
 

package/Layout/components/LayoutHeaderClose.tsx

@@ -1,5 +1,5 @@
 import { useGo, usePageContext } from '@graphcommerce/framer-next-pages'
-import { i18n } from '@lingui/core'
+import { t } from '@lingui/core/macro'
 import { Fab, type ButtonProps } from '@mui/material'
 import { useState } from 'react'
 import { Button } from '../../Button'
@@ -43,7 +43,7 @@ export function LayoutHeaderClose(props: LayoutHeaderCloseProps) {
       }}
       size={size}
       disabled={disabled}
-      aria-label={i18n._(/* i18n */ 'Close')}
+      aria-label={t`Close`}
     >
       <IconSvg src={iconClose} size='large' />
     </Fab>

package/Navigation/components/NavigationList.tsx

@@ -39,8 +39,8 @@ export const NavigationList = React.memo<NavigationItemsProps>((props) => {
       {items.map((item, idx) => (
         <NavigationItem
           NavigationList={NavigationList}
-          key={item.id}
           {...item}
+          key={item.id ?? idx}
           parentPath={parentPath}
           idx={idx}
           first={idx === 0}

package/Navigation/components/NavigationOverlay.tsx

@@ -1,5 +1,5 @@
 import { dvw, useMotionSelector, useMotionValueValue } from '@graphcommerce/framer-utils'
-import { i18n } from '@lingui/core'
+import { t } from '@lingui/core/macro'
 import type { SxProps, Theme } from '@mui/material'
 import { Box, Fab, styled, useEventCallback, useTheme } from '@mui/material'
 import { m } from 'framer-motion'
@@ -160,7 +160,7 @@ export const NavigationOverlay = React.memo((props: NavigationOverlayProps) => {
                   onClick={handleOnBack}
                   sx={{ boxShadow: 'none', my: fabMarginY }}
                   size='responsive'
-                  aria-label={i18n._(/* i18n */ 'Back')}
+                  aria-label={t`Back`}
                 >
                   <IconSvg src={iconChevronLeft} size='large' aria-hidden />
                 </Fab>
@@ -173,7 +173,7 @@ export const NavigationOverlay = React.memo((props: NavigationOverlayProps) => {
                 onClick={handleClose}
                 sx={{ boxShadow: 'none', my: fabMarginY }}
                 size='responsive'
-                aria-label={i18n._(/* i18n */ 'Close')}
+                aria-label={t`Close`}
                 ref={a11yFocusRef}
               >
                 <IconSvg src={iconClose} size='large' aria-hidden />

package/Navigation/components/NavigationTitle.tsx

@@ -1,5 +1,5 @@
 import { useMotionValueValue } from '@graphcommerce/framer-utils'
-import { Trans } from '@lingui/react'
+import { Trans } from '@lingui/react/macro'
 import type {
   NavigationNodeButton,
   NavigationNodeHref,
@@ -35,6 +35,6 @@ function findCurrent(
 export function NavigationTitle() {
   const { selection, items } = useNavigation()
   return (
-    <>{useMotionValueValue(selection, (v) => findCurrent(items, v))?.name ?? <Trans id='Menu' />}</>
+    <>{useMotionValueValue(selection, (v) => findCurrent(items, v))?.name ?? <Trans>Menu</Trans>}</>
   )
 }

package/Overlay/components/OverlayBase.tsx

@@ -160,7 +160,7 @@ export function OverlayBase(incomingProps: LayoutOverlayBaseProps) {
     () => (match.up('md') ? variantMd : variantSm),
     [match, variantMd, variantSm],
   )
-  const prevVariant = useRef<LayoutOverlayVariant>()
+  const prevVariant = useRef<LayoutOverlayVariant | null>(null)
 
   const openClosePositions = useCallback((): {
     open: [number, number]
@@ -418,7 +418,7 @@ export function OverlayBase(incomingProps: LayoutOverlayBaseProps) {
   return (
     <>
       <MotionDiv
-        inert={active ? undefined : ('true' as unknown as boolean)}
+        inert={active}
         className={classes.backdrop}
         style={{ opacity: positions.open.visible }}
         sx={[
@@ -440,7 +440,7 @@ export function OverlayBase(incomingProps: LayoutOverlayBaseProps) {
         ]}
       />
       <Scroller
-        inert={disableInert || active ? undefined : ('true' as unknown as boolean)}
+        inert={disableInert || active ? false : true}
         className={`${classes.scroller} ${className ?? ''}`}
         grid={false}
         onClick={onClickAway}

package/Overlay/components/OverlayCloseButton.tsx

@@ -1,5 +1,5 @@
 import { useGo, usePageContext } from '@graphcommerce/framer-next-pages'
-import { i18n } from '@lingui/core'
+import { t } from '@lingui/core/macro'
 import { useState } from 'react'
 import { Button, type ButtonProps } from '../../Button'
 
@@ -18,7 +18,7 @@ export function OverlayCloseButton(props: ButtonProps) {
     <Button
       onClick={onClick}
       disabled={isDisabled}
-      aria-label={i18n._(/* i18n */ 'Close overlay')}
+      aria-label={t`Close overlay`}
       {...buttonProps}
     />
   )

package/OverlayOrPopperChip/OverlayPanelActions.tsx

@@ -1,5 +1,5 @@
-import { i18n } from '@lingui/core'
-import { Trans } from '@lingui/react'
+import { t } from '@lingui/core/macro'
+import { Trans } from '@lingui/react/macro'
 import { Box, Button, Fab, Typography } from '@mui/material'
 import { iconClose } from '../icons'
 import { IconSvg, useIconSvgSize } from '../IconSvg'
@@ -30,7 +30,7 @@ export function OverlayPanelActions(props: PanelActionsProps) {
         primary={
           onReset && (
             <Button variant='inline' color='primary' onClick={onReset}>
-              <Trans id='Reset' />
+              <Trans>Reset</Trans>
             </Button>
           )
         }
@@ -43,7 +43,7 @@ export function OverlayPanelActions(props: PanelActionsProps) {
               ml: `calc((${fabSize} - ${svgSize}) * -0.5)`,
             }}
             size='small'
-            aria-label={i18n._(/* i18n */ 'Close')}
+            aria-label={t`Close`}
           >
             <IconSvg src={iconClose} size='large' aria-hidden />
           </Fab>
@@ -68,7 +68,7 @@ export function OverlayPanelActions(props: PanelActionsProps) {
           fullWidth
           // sx={(theme) => ({ mt: theme.spacings.md })}
         >
-          <Trans id='Apply' />
+          <Trans>Apply</Trans>
         </Button>
       </OverlayStickyBottom>
     </>

package/OverlayOrPopperChip/PopperPanelActions.tsx

@@ -1,5 +1,5 @@
-import { i18n } from '@lingui/core'
-import { Trans } from '@lingui/react'
+import { t } from '@lingui/core/macro'
+import { Trans } from '@lingui/react/macro'
 import { Box, Button, Fab, Typography } from '@mui/material'
 import { iconClose } from '../icons'
 import { IconSvg, useIconSvgSize } from '../IconSvg'
@@ -24,7 +24,7 @@ export function PopperPanelActions(props: PanelActionsProps) {
         primary={
           onReset && (
             <Button variant='text' color='primary' size='medium' onClick={onReset}>
-              <Trans id='Reset' />
+              <Trans>Reset</Trans>
             </Button>
           )
         }
@@ -37,7 +37,7 @@ export function PopperPanelActions(props: PanelActionsProps) {
               ml: `calc((${fabSize} - ${svgSize}) * -0.5)`,
             }}
             size='small'
-            aria-label={i18n._(/* i18n */ 'Close')}
+            aria-label={t`Close`}
           >
             <IconSvg src={iconClose} size='large' aria-hidden />
           </Fab>
@@ -68,7 +68,7 @@ export function PopperPanelActions(props: PanelActionsProps) {
           color='primary'
           fullWidth
         >
-          <Trans id='Apply' />
+          <Trans>Apply</Trans>
         </Button>
       </OverlayStickyBottom>
     </>

package/Page/types.ts

@@ -1,5 +1,5 @@
 import type { ParsedUrlQuery } from 'querystring'
-import type { UpPage } from '@graphcommerce/framer-next-pages/types'
+import type { UpPage } from '@graphcommerce/framer-next-pages'
 // todo: remove references to GraphQL
 // eslint-disable-next-line import/no-extraneous-dependencies
 import type { NormalizedCacheObject } from '@graphcommerce/graphql'

package/PageMeta/canonicalize.ts

@@ -1,4 +1,5 @@
 import type {} from '@graphcommerce/next-config'
+import { canonicalBaseUrl } from '@graphcommerce/next-config/config'
 import { addBasePath } from 'next/dist/client/add-base-path'
 import { addLocale } from 'next/dist/client/add-locale'
 import { getDomainLocale } from 'next/dist/client/get-domain-locale'
@@ -49,7 +50,7 @@ export function canonicalize(router: PartialNextRouter, incoming?: Canonical) {
         addLocale(as, curLocale, conf?.domain ? conf.locale : router.defaultLocale),
       )
 
-      let siteUrl = conf?.canonicalBaseUrl || import.meta.graphCommerce.canonicalBaseUrl
+      let siteUrl = conf?.canonicalBaseUrl || canonicalBaseUrl
 
       if (conf?.domain && !conf?.canonicalBaseUrl) siteUrl = `https://${conf.domain}`
 

package/Pagination/Pagination.tsx

@@ -1,4 +1,4 @@
-import { Trans } from '@lingui/react'
+import { Trans } from '@lingui/react/macro'
 import type { PaginationProps, SxProps, Theme } from '@mui/material'
 import { Box, IconButton } from '@mui/material'
 import type { UsePaginationItem } from '@mui/material/usePagination'
@@ -59,6 +59,7 @@ export function Pagination(props: PagePaginationProps) {
       <IconSvg src={iconChevronRight} className={classes.icon} size='medium' />
     </IconButton>
   )
+  const max = Math.max(1, count)
 
   return (
     <Box
@@ -82,7 +83,9 @@ export function Pagination(props: PagePaginationProps) {
       {page === 1 ? chevronLeft : renderLink(page - 1, chevronLeft, prevBtnProps)}
 
       <Box typography='body1'>
-        <Trans id='Page {page} of {count}' values={{ page, count: Math.max(1, count) }} />
+        <Trans>
+          Page {page} of {max}
+        </Trans>
       </Box>
 
       {page === count ? chevronRight : renderLink(page + 1, chevronRight, nextBtnProps)}

package/SkipLink/SkipLink.tsx

@@ -1,4 +1,4 @@
-import { Trans } from '@lingui/react'
+import { Trans } from '@lingui/react/macro'
 import { Link } from '@mui/material'
 
 export function SkipLink() {
@@ -32,7 +32,7 @@ export function SkipLink() {
         },
       })}
     >
-      <Trans id='Skip to main content' />
+      <Trans>Skip to main content</Trans>
     </Link>
   )
 }

package/Snackbar/ErrorSnackbar.tsx

@@ -1,4 +1,4 @@
-import { Trans } from '@lingui/react'
+import { Trans } from '@lingui/react/macro'
 import { Button } from '@mui/material'
 import { MessageSnackbar } from './MessageSnackbar'
 import type { MessageSnackbarProps } from './MessageSnackbarImpl'
@@ -15,7 +15,7 @@ export function ErrorSnackbar(props: ErrorSnackbarProps) {
       action={
         action ?? (
           <Button size='medium' variant='pill' color='secondary' fullWidth>
-            <Trans id='Ok' />
+            <Trans>Ok</Trans>
           </Button>
         )
       }

package/Snackbar/MessageSnackbarImpl.tsx

@@ -1,4 +1,4 @@
-import { i18n } from '@lingui/core'
+import { t } from '@lingui/core/macro'
 import type { SnackbarProps, SxProps, Theme } from '@mui/material'
 import { Box, Fab, lighten, Portal, Snackbar, SnackbarContent } from '@mui/material'
 import React, { useEffect, useState } from 'react'
@@ -190,7 +190,7 @@ export default function MessageSnackbarImpl(props: MessageSnackbarProps) {
               {!disableClose && (
                 <Fab
                   className={classes.close}
-                  aria-label={i18n._(/* i18n */ 'Close')}
+                  aria-label={t`Close`}
                   size='small'
                   onClick={hideSnackbar}
                   onMouseDown={preventAnimationBubble}

package/Styles/withEmotionCache.tsx

@@ -1,4 +1,3 @@
-import type { EmotionJSX } from '@emotion/react/types/jsx-namespace'
 import createEmotionServer from '@emotion/server/create-instance'
 import type { AppType } from 'next/app'
 // eslint-disable-next-line @next/next/no-document-import-in-page
@@ -8,7 +7,7 @@ import type { DocumentContext } from 'next/document'
 import { createEmotionCache } from './createEmotionCache'
 import type { EmotionProviderProps } from './EmotionProvider'
 
-export type EmotionCacheProps = { emotionStyleTags: EmotionJSX.Element[] }
+export type EmotionCacheProps = { emotionStyleTags: React.ReactNode[] }
 
 export function withEmotionCache(Document: typeof NextDocument): typeof NextDocument {
   return class DocumentWithEmotionCache extends Document {
@@ -32,7 +31,6 @@ export function withEmotionCache(Document: typeof NextDocument): typeof NextDocu
         <style
           data-emotion={`${style.key} ${style.ids.join(' ')}`}
           key={style.key}
-          // eslint-disable-next-line react/no-danger
           dangerouslySetInnerHTML={{ __html: style.css }}
         />
       ))

package/TextInputNumber/TextInputNumber.tsx

@@ -1,4 +1,4 @@
-import { i18n } from '@lingui/core'
+import { t } from '@lingui/core/macro'
 import type { IconButtonProps, SxProps, TextFieldProps, Theme } from '@mui/material'
 import {
   Box,
@@ -125,7 +125,7 @@ export function TextInputNumber(props: TextInputNumberProps) {
         startAdornment: (
           <Box>
             <Fab
-              aria-label={i18n._(/* i18n */ 'Decrease')}
+              aria-label={t`Decrease`}
               size='smaller'
               sx={{ boxShadow: variant === 'standard' ? 4 : 0, minHeight: '30px' }}
               onPointerDown={() => setDirection('down')}
@@ -141,7 +141,7 @@ export function TextInputNumber(props: TextInputNumberProps) {
         endAdornment: (
           <Box>
             <Fab
-              aria-label={i18n._(/* i18n */ 'Increase')}
+              aria-label={t`Increase`}
               size='smaller'
               sx={{ boxShadow: variant === 'standard' ? 4 : 0, minHeight: '30px' }}
               onPointerDown={() => setDirection('up')}
@@ -160,7 +160,7 @@ export function TextInputNumber(props: TextInputNumberProps) {
         updateDisabled(e.target)
       }}
       inputProps={{
-        'aria-label': i18n._(/* i18n */ 'Number'),
+        'aria-label': t`Number`,
         ...inputProps,
         sx: [
           {

package/Theme/DarkLightModeThemeProvider.tsx

@@ -1,4 +1,4 @@
-import { Trans } from '@lingui/react'
+import { Trans } from '@lingui/react/macro'
 import type { FabProps, ListItemButtonProps, Theme } from '@mui/material'
 import {
   Fab,
@@ -133,7 +133,7 @@ export function DarkLightModeMenuSecondaryItem(props: ListItemButtonProps) {
         <IconSvg src={currentMode === 'light' ? iconMoon : iconSun} size='medium' />
       </ListItemIcon>
       <ListItemText>
-        {currentMode === 'light' ? <Trans id='Dark Mode' /> : <Trans id='Light Mode' />}
+        {currentMode === 'light' ? <Trans>Dark Mode</Trans> : <Trans>Light Mode</Trans>}
       </ListItemText>
     </ListItemButton>
   )

package/Theme/NextLink.tsx

@@ -1,3 +1,4 @@
+import { canonicalBaseUrl } from '@graphcommerce/next-config/config'
 import type { LinkProps as NextLinkProps } from 'next/link'
 import Link from 'next/link'
 import { useRouter } from 'next/router'
@@ -30,8 +31,7 @@ export const NextLink = forwardRef<HTMLAnchorElement, LinkProps>((props, ref) =>
   let { href, target, relative, locale, ...rest } = props
 
   const router = useRouter()
-  const canonicalBaseUrl =
-    useStorefrontConfig().canonicalBaseUrl ?? import.meta.graphCommerce.canonicalBaseUrl
+  const canonical = useStorefrontConfig().canonicalBaseUrl ?? canonicalBaseUrl
 
   // The href is optional in a MUI link, but required in a Next.js link
   // When the href is not a string, we pass it through directly
@@ -44,14 +44,14 @@ export const NextLink = forwardRef<HTMLAnchorElement, LinkProps>((props, ref) =>
    * and make the URL relative without the locale. Prevents Next.js prefixing again with the current
    * locale.
    */
-  if (!locale && isFullUrl && href.startsWith(canonicalBaseUrl)) {
+  if (!locale && isFullUrl && href.startsWith(canonical)) {
     const url = new URL(href)
     locale = router.locales?.find((l) => url.pathname.startsWith(`/${l}/`))
     href = locale ? url.pathname.replace(`/${locale}/`, '/') : url.pathname
     href += url.search
   }
 
-  const isExternal = isFullUrl && !href.startsWith(canonicalBaseUrl)
+  const isExternal = isFullUrl && !href.startsWith(canonical)
   if (isExternal) target = target || '_blank'
 
   // Relative URL's cause more pain than they're worth

package/hooks/memoDeep.ts

@@ -1,5 +1,5 @@
 // eslint-disable-next-line import/no-extraneous-dependencies
-import diff from '@graphcommerce/react-hook-form/src/diff'
+import { diff } from '@graphcommerce/react-hook-form'
 // eslint-disable-next-line import/no-extraneous-dependencies
 import { equal } from '@wry/equality'
 import type { FunctionComponent, NamedExoticComponent } from 'react'

package/package.json

@@ -2,7 +2,7 @@
   "name": "@graphcommerce/next-ui",
   "homepage": "https://www.graphcommerce.org/",
   "repository": "github:graphcommerce-org/graphcommerce",
-  "version": "9.1.0-canary.55",
+  "version": "10.0.0-canary.57",
   "sideEffects": false,
   "prettier": "@graphcommerce/prettier-config-pwa",
   "eslintConfig": {
@@ -11,35 +11,53 @@
       "project": "./tsconfig.json"
     }
   },
+  "exports": {
+    ".": "./index.ts",
+    "./types": "./types.ts",
+    "./server": "./server.ts",
+    "./Layout/components/LayoutHeaderClose": "./Layout/components/LayoutHeaderClose.tsx",
+    "./LayoutOverlay/test/LayoutOverlayDemo": "./LayoutOverlay/test/LayoutOverlayDemo.tsx",
+    "./Styles/extendableComponent": "./Styles/extendableComponent.ts",
+    "./Styles": "./Styles/index.ts",
+    "./hooks/useMatchMedia": "./hooks/useMatchMedia.ts",
+    "./hooks/useStorefrontConfig": "./hooks/useStorefrontConfig.ts",
+    "./hooks/useIsSsr": "./hooks/useIsSsr.ts",
+    "./hooks/useMemoObject": "./hooks/useMemoObject.ts",
+    "./utils/cssFlags": "./utils/cssFlags.tsx",
+    "./Intl/DateTimeFormat/toDate": "./Intl/DateTimeFormat/toDate.ts",
+    "./Breadcrumbs/BreadcrumbsJsonLd": "./Breadcrumbs/BreadcrumbsJsonLd.tsx",
+    "./Breadcrumbs/jsonLdBreadcrumb": "./Breadcrumbs/jsonLdBreadcrumb.tsx",
+    "./RenderType/filterNonNullableKeys": "./RenderType/filterNonNullableKeys.ts"
+  },
   "dependencies": {
     "cookie": "^1.0.2",
-    "react-is": "^18.3.1"
+    "react-is": "^19.2.0"
   },
   "devDependencies": {
-    "@types/react-is": "^18.3.1",
-    "typescript": "5.7.2"
+    "@types/react-is": "^19.2.0",
+    "typescript": "5.9.3"
   },
   "peerDependencies": {
     "@emotion/cache": "^11",
     "@emotion/react": "^11",
     "@emotion/server": "^11",
     "@emotion/styled": "^11",
-    "@graphcommerce/eslint-config-pwa": "^9.1.0-canary.55",
-    "@graphcommerce/framer-next-pages": "^9.1.0-canary.55",
-    "@graphcommerce/framer-scroller": "^9.1.0-canary.55",
-    "@graphcommerce/framer-utils": "^9.1.0-canary.55",
-    "@graphcommerce/image": "^9.1.0-canary.55",
-    "@graphcommerce/prettier-config-pwa": "^9.1.0-canary.55",
-    "@graphcommerce/typescript-config-pwa": "^9.1.0-canary.55",
-    "@lingui/core": "^4.2.1",
-    "@lingui/macro": "^4.2.1",
-    "@lingui/react": "^4.2.1",
+    "@graphcommerce/eslint-config-pwa": "^10.0.0-canary.57",
+    "@graphcommerce/framer-next-pages": "^10.0.0-canary.57",
+    "@graphcommerce/framer-scroller": "^10.0.0-canary.57",
+    "@graphcommerce/framer-utils": "^10.0.0-canary.57",
+    "@graphcommerce/image": "^10.0.0-canary.57",
+    "@graphcommerce/prettier-config-pwa": "^10.0.0-canary.57",
+    "@graphcommerce/typescript-config-pwa": "^10.0.0-canary.57",
+    "@lingui/core": "^5",
+    "@lingui/macro": "^5",
+    "@lingui/react": "^5",
     "@mui/lab": "^5.0.0-alpha.68",
     "@mui/material": "^5.10.16",
     "framer-motion": "^11.0.0",
     "next": "*",
     "next-sitemap": "4.2.3",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0"
   }
 }

package/po.d.ts

@@ -0,0 +1,6 @@
+declare module '*.po' {
+  export const messages: Record<
+    string,
+    string | Array<string | Array<string | (string | undefined) | Record<string, unknown>>>
+  >
+}

package/{types.d.ts → types.ts}

@@ -5,12 +5,3 @@
 import './Theme/createTheme'
 // eslint-disable-next-line react/no-typos
 import 'react'
-
-declare module '*.po' {
-  const messages: Record<
-    string,
-    string | Array<string | Array<string | (string | undefined) | Record<string, unknown>>>
-  >
-
-  export const messages
-}

package/utils/storefrontConfig.ts

@@ -1,8 +1,10 @@
-export const storefrontAll = import.meta.graphCommerce.storefront
+import { storefront } from '@graphcommerce/next-config/config'
+
+export const storefrontAll = storefront
 
 /** Get the current storefront config based on the provided locale */
 export const storefrontConfig = (locale?: string | undefined) =>
-  storefrontAll.find((l) => l.locale === locale)
+  storefront.find((l) => l.locale === locale)
 
 export const storefrontConfigDefault = () =>
-  storefrontAll.find((l) => l.defaultLocale) ?? storefrontAll[0]
+  storefront.find((l) => l.defaultLocale) ?? storefrontAll[0]