@weaverse/hydrogen 5.17.1 → 5.18.0

package/src/hooks/translation-context.tsx

@@ -0,0 +1,275 @@
+import { useSafeExternalStore } from '@weaverse/react'
+import { createContext, type ReactNode, useContext, useMemo } from 'react'
+import type { TranslationStore } from '../utils/translation-store'
+
+/**
+ * Traverse a nested object by dot-path.
+ *
+ * @example
+ * getNestedKey({ cart: { title: 'Cart' } }, 'cart.title') // => 'Cart'
+ * getNestedKey({}, 'cart.title', 'fallback')              // => 'fallback'
+ */
+export function getNestedKey(
+  obj: Record<string, unknown>,
+  path: string,
+  fallback?: string
+): string | undefined {
+  const keys = path.split('.')
+  let current: unknown = obj
+
+  for (const key of keys) {
+    if (current == null || typeof current !== 'object') {
+      return fallback
+    }
+    current = (current as Record<string, unknown>)[key]
+  }
+
+  if (typeof current === 'string') {
+    return current
+  }
+
+  return fallback
+}
+
+/**
+ * Replace `{{variable}}` patterns in a string with provided values.
+ *
+ * @example
+ * interpolate('Hello {{name}}!', { name: 'World' }) // => 'Hello World!'
+ * interpolate('-{{percentage}}% Off', { percentage: 15 }) // => '-15% Off'
+ */
+export function interpolate(
+  template: string,
+  variables?: Record<string, string | number>
+): string {
+  if (!variables) {
+    return template
+  }
+
+  return template.replace(/\{\{(\w+)\}\}/g, (match, key: string) => {
+    const value = variables[key]
+    return value === undefined ? match : String(value)
+  })
+}
+
+// ---------------------------------------------------------------------------
+// Context & Provider
+// ---------------------------------------------------------------------------
+
+/**
+ * Signature for a translation function.
+ */
+export type TranslateFunction = (
+  key: string,
+  variables?: Record<string, string | number>
+) => string
+
+/** Translation function, stores, and locale overrides exposed by the provider. */
+export type TranslationValue = {
+  /**
+   * Translate a key with optional variable interpolation.
+   *
+   * Priority chain (highest wins):
+   * 1. External `t`        (passed into `withWeaverse` / `TranslationProvider`)
+   * 2. `merchantOverrides` (DB overrides for the current locale + design overrides)
+   * 3. `staticContent`     (theme default JSON)
+   * 4. The key itself      (fallback)
+   *
+   * @example
+   * t('cart.title')                           // => "Cart"
+   * t('badge.sale', { percentage: 15 })       // => "-15% Off"
+   */
+  t: TranslateFunction
+  /** Exposed for useStudio to attach to weaverse.internal. Null in production. */
+  translationStore: TranslationStore | null
+  /**
+   * @deprecated Use {@link TranslationValue.translationStore} instead. Kept as a
+   * backward-compatible alias pointing at the same store instance.
+   */
+  themeTextStore: TranslationStore | null
+  /** Active-locale translated keys loaded from the storefront API. */
+  merchantOverrides: Record<string, unknown> | null
+}
+
+const TranslationContext = createContext<TranslationValue | null>(null)
+TranslationContext.displayName = 'WeaverseTranslationContext'
+
+/** Inputs accepted by {@link TranslationProvider}. */
+export type TranslationProviderProps = {
+  /** Theme-provided default-locale translation content. */
+  staticContent: Record<string, unknown>
+  /** Active-locale translations published by the merchant. */
+  merchantOverrides?: Record<string, unknown>
+  /**
+   * Optional external translation function.
+   * When provided it becomes the **highest-priority** source:
+   * if it returns a non-empty string that differs from the raw key,
+   * that value is used; otherwise the internal resolution chain continues.
+   */
+  t?: TranslateFunction
+  /** Optional store for live design-mode text overrides from the builder. */
+  translationStore?: TranslationStore | null
+  /**
+   * @deprecated Use {@link TranslationProviderProps.translationStore} instead.
+   * Still accepted for backward compatibility; ignored when `translationStore`
+   * is also provided.
+   */
+  themeTextStore?: TranslationStore | null
+  /** React content that can consume the translation context. */
+  children: ReactNode
+}
+
+/**
+ * Build the `t()` translation function over a fixed set of sources.
+ *
+ * Resolution order, highest priority first:
+ * 1. `externalT`         – host i18n (e.g. Shopify), unless it echoes the key
+ * 2. `designOverrides`   – live design-mode edits, flat dot-path keys
+ * 3. `merchantOverrides` – locale overrides from the API, nested
+ * 4. `staticContent`     – the theme's default locale JSON
+ * 5. the key itself
+ *
+ * Design overrides are looked up per-key (own properties only) rather than
+ * merged into `merchantOverrides`: a flat key like `cart.title` must override
+ * exactly that leaf without wiping sibling keys (`cart.subtitle`), and a
+ * per-key own-property lookup never builds nested objects from
+ * merchant-controlled keys, so it cannot pollute `Object.prototype`.
+ */
+export function createTranslate(sources: {
+  staticContent: Record<string, unknown>
+  merchantOverrides?: Record<string, unknown>
+  designOverrides?: Record<string, string>
+  externalT?: TranslateFunction
+}): TranslateFunction {
+  const { staticContent, merchantOverrides, designOverrides, externalT } =
+    sources
+  return (key, variables) => {
+    // Priority 1: external t (e.g. Shopify i18n, third-party library).
+    if (externalT) {
+      const external = externalT(key, variables)
+      // Accept the external value unless it echoed the key unchanged.
+      if (external && external !== key) {
+        return external
+      }
+    }
+
+    // Priority 2: live design-mode override (flat, keyed by exact dot-path,
+    // own properties only so inherited keys never resolve to functions).
+    const design =
+      designOverrides && Object.hasOwn(designOverrides, key)
+        ? designOverrides[key]
+        : undefined
+    // Priority 3: merchant overrides (nested). Priority 4: static content.
+    const override = merchantOverrides
+      ? getNestedKey(merchantOverrides, key)
+      : undefined
+    const staticValue = getNestedKey(staticContent, key)
+
+    // Priority 5: the key itself as the final fallback.
+    const raw = design ?? override ?? staticValue ?? key
+    return interpolate(raw, variables)
+  }
+}
+
+// No-op fallback for useSafeExternalStore when store is null (production).
+// Module-level constants — stable references, zero allocation per render.
+const EMPTY: Record<string, string> = {}
+const NOOP_SUBSCRIBE = () => () => {}
+const NOOP_SNAPSHOT = () => EMPTY
+
+/**
+ * Provider that wraps the app to expose the `t()` function.
+ *
+ * - `staticContent`      – the theme's default locale JSON (from themeSchema.i18n)
+ * - `merchantOverrides`  – locale-specific overrides fetched from the API
+ * - `translationStore`   – optional store for live design-mode text overrides
+ *   (the deprecated `themeTextStore` prop is accepted as a fallback)
+ */
+export function TranslationProvider({
+  staticContent,
+  merchantOverrides,
+  t: externalT,
+  translationStore,
+  themeTextStore,
+  children,
+}: TranslationProviderProps) {
+  // Canonical store, falling back to the deprecated `themeTextStore` prop.
+  const store = translationStore ?? themeTextStore ?? null
+
+  // Subscribe to design-mode overrides. No-op when store is null (production).
+  const designOverrides = useSafeExternalStore(
+    store?.subscribe ?? NOOP_SUBSCRIBE,
+    store?.getSnapshot ?? NOOP_SNAPSHOT,
+    store?.getServerSnapshot ?? NOOP_SNAPSHOT
+  )
+
+  const value = useMemo<TranslationValue>(
+    () => ({
+      t: createTranslate({
+        staticContent,
+        merchantOverrides,
+        designOverrides,
+        externalT,
+      }),
+      translationStore: store,
+      // Deprecated alias — same instance, kept for backward compatibility.
+      themeTextStore: store,
+      merchantOverrides: merchantOverrides ?? null,
+    }),
+    [staticContent, merchantOverrides, designOverrides, externalT, store]
+  )
+
+  return (
+    <TranslationContext.Provider value={value}>
+      {children}
+    </TranslationContext.Provider>
+  )
+}
+
+/**
+ * Hook to access the translation `t()` function.
+ *
+ * Must be used inside a component wrapped by `withWeaverse` or `TranslationProvider`.
+ *
+ * @example
+ * ```tsx
+ * function CartTitle() {
+ *   const { t } = useTranslation()
+ *   return <h2>{t('cart.title')}</h2>
+ * }
+ * ```
+ */
+export function useTranslation(): TranslationValue {
+  const ctx = useContext(TranslationContext)
+  if (!ctx) {
+    throw new Error(
+      'useTranslation must be used within <TranslationProvider>. Wrap your app with withWeaverse().'
+    )
+  }
+  return ctx
+}
+
+// ---------------------------------------------------------------------------
+// Deprecated aliases (backward compatibility — kept exported indefinitely)
+// ---------------------------------------------------------------------------
+
+/**
+ * Legacy name for {@link TranslationProvider}.
+ * @deprecated Use {@link TranslationProvider} instead.
+ */
+export const ThemeTextProvider = TranslationProvider
+/**
+ * Legacy name for {@link useTranslation}.
+ * @deprecated Use {@link useTranslation} instead.
+ */
+export const useThemeText = useTranslation
+/**
+ * Legacy name for {@link TranslationValue}.
+ * @deprecated Use {@link TranslationValue} instead.
+ */
+export type ThemeTextValue = TranslationValue
+/**
+ * Legacy name for {@link TranslationProviderProps}.
+ * @deprecated Use {@link TranslationProviderProps} instead.
+ */
+export type ThemeTextProviderProps = TranslationProviderProps

package/src/hooks/use-weaverse-data-context.ts

@@ -0,0 +1,69 @@
+import { type UIMatch, useMatches } from 'react-router'
+
+/** Loader data indexed by React Router's conventional route identifiers. */
+export interface RouteKeyedDataContext {
+  /** Root route loader data, when the root loader returned an object. */
+  root?: Record<string, unknown>
+  /** Loader data for a non-root route keyed by its route identifier. */
+  [routeKey: `routes/${string}`]: Record<string, unknown>
+}
+
+/**
+ * Flat loader-data map keyed by React Router route ID.
+ * Use route IDs such as `root` or `routes/products.$handle` in data bindings.
+ */
+export type WeaverseDataContext = RouteKeyedDataContext &
+  Record<string, unknown>
+
+/**
+ * Creates flat route-keyed structure from matches
+ * Target: {root: {...rootData}, "routes/product": {...productData}}
+ * Eliminates all duplication by using route IDs as keys
+ */
+function createFlatDataContext(
+  matches: UIMatch<unknown, unknown>[]
+): WeaverseDataContext {
+  const context: WeaverseDataContext = {}
+
+  // Process matches from root to leaf, creating route-keyed structure
+  for (const match of matches) {
+    if (match.data && typeof match.data === 'object') {
+      // Use route ID as key (e.g., "root", "routes/product")
+      context[match.id] = match.data
+    }
+  }
+
+  return context
+}
+
+/**
+ * Hook to get flat route-keyed data context from matches
+ * Returns: {root: {...}, "routes/xxx": {...}}
+ * No more useLoaderData dependency - everything comes from matches
+ */
+export function useWeaverseDataContext(): WeaverseDataContext {
+  const matches = useMatches()
+
+  // Create flat route-keyed structure - eliminates duplication
+  return createFlatDataContext(matches)
+}
+
+/**
+ * Helper function to create flat route-keyed data context from useMatches() result
+ * Returns: {root: {...}, "routes/xxx": {...}}
+ */
+export function createWeaverseDataContext(
+  matches: UIMatch<unknown, unknown>[]
+): WeaverseDataContext {
+  // Create flat route-keyed structure - clean and efficient
+  return createFlatDataContext(matches)
+}
+
+/**
+ * Type guard to check if data is WeaverseDataContext (simplified)
+ */
+export function isWeaverseDataContext(
+  data: unknown
+): data is WeaverseDataContext {
+  return data !== null && typeof data === 'object'
+}

package/src/index.ts

@@ -0,0 +1,179 @@
+/**
+ * React and React Router integrations for rendering Weaverse content in
+ * Shopify Hydrogen storefronts.
+ *
+ * @packageDocumentation
+ */
+
+import { getSelectedProductOptions as hydrogen_getSelectedProductOptions } from '@shopify/hydrogen'
+import type { SelectedOptionInput } from '@shopify/hydrogen/storefront-api-types'
+import {
+  isBrowser,
+  isIframe,
+  useChildInstances,
+  useItemInstance,
+  useParentInstance,
+  useWeaverse,
+} from '@weaverse/react'
+
+/**
+ * Filter out Weaverse-specific query parameters from product options.
+ * Removes `isDesignMode` and any parameters starting with `weaverse` prefix.
+ *
+ * @param request - The incoming HTTP request
+ * @returns Filtered product options for Shopify Hydrogen
+ *
+ * @example
+ * ```typescript
+ * export async function loader({ request }: LoaderFunctionArgs) {
+ *   const selectedOptions = getSelectedProductOptions(request)
+ *   // Use selectedOptions for product queries without Weaverse params
+ * }
+ * ```
+ */
+export function getSelectedProductOptions(
+  request: Request
+): SelectedOptionInput[] {
+  let options = hydrogen_getSelectedProductOptions(request)
+  return options.filter(
+    ({ name }) => name !== 'isDesignMode' && !name.startsWith('weaverse')
+  )
+}
+
+/** Placeholder asset URLs for component schema defaults and theme previews. */
+export const IMAGES_PLACEHOLDERS = {
+  /** White Weaverse logo placeholder. */
+  logo_white:
+    'https://cdn.shopify.com/s/files/1/0838/0052/3057/files/fpo-logo-w-600x200.svg',
+  /** Black Weaverse logo placeholder. */
+  logo_black:
+    'https://cdn.shopify.com/s/files/1/0838/0052/3057/files/fpo-logo-k-600x200.svg',
+  /** Generic square image placeholder. */
+  image:
+    'https://cdn.shopify.com/s/files/1/0838/0052/3057/files/fpo-image-1024x1024.svg',
+  /** First landscape banner placeholder. */
+  banner_1:
+    'https://cdn.shopify.com/s/files/1/0838/0052/3057/files/fpo-lifestyle-1-1800x900.svg',
+  /** Second landscape banner placeholder. */
+  banner_2:
+    'https://cdn.shopify.com/s/files/1/0838/0052/3057/files/fpo-lifestyle-2-1800x900.svg',
+  /** Hats collection placeholder. */
+  collection_1:
+    'https://cdn.shopify.com/s/files/1/0838/0052/3057/files/fpo-collection-hats-1024x1024.svg',
+  /** Shoes collection placeholder. */
+  collection_2:
+    'https://cdn.shopify.com/s/files/1/0838/0052/3057/files/fpo-collection-shoes-1024x1024.svg',
+  /** Glasses collection placeholder. */
+  collection_3:
+    'https://cdn.shopify.com/s/files/1/0838/0052/3057/files/fpo-collection-glasses-1024x1024.svg',
+  /** Lamps collection placeholder. */
+  collection_4:
+    'https://cdn.shopify.com/s/files/1/0838/0052/3057/files/fpo-collection-lamps-1024x1024.svg',
+  /** Bags collection placeholder. */
+  collection_5:
+    'https://cdn.shopify.com/s/files/1/0838/0052/3057/files/fpo-collection-bags-1024x1024.svg',
+  /** Watches collection placeholder. */
+  collection_6:
+    'https://cdn.shopify.com/s/files/1/0838/0052/3057/files/fpo-collection-watches-1024x1024.svg',
+  /** Third watch product placeholder. */
+  product_1:
+    'https://cdn.shopify.com/s/files/1/0838/0052/3057/files/fpo-product-watch-3-1024x1024.svg',
+  /** Second bag product placeholder. */
+  product_2:
+    'https://cdn.shopify.com/s/files/1/0838/0052/3057/files/fpo-product-bag-2-1024x1024.svg',
+  /** First shoe product placeholder. */
+  product_3:
+    'https://cdn.shopify.com/s/files/1/0838/0052/3057/files/fpo-product-shoe-1-1024x1024.svg',
+  /** Second lamp product placeholder. */
+  product_4:
+    'https://cdn.shopify.com/s/files/1/0838/0052/3057/files/fpo-product-lamp-2-1024x1024.svg',
+  /** First glasses product placeholder. */
+  product_5:
+    'https://cdn.shopify.com/s/files/1/0838/0052/3057/files/fpo-product-glasses-1-1024x1024.svg',
+  /** First lamp product placeholder. */
+  product_6:
+    'https://cdn.shopify.com/s/files/1/0838/0052/3057/files/fpo-product-lamp-1-1024x1024.svg',
+  /** Second glasses product placeholder. */
+  product_7:
+    'https://cdn.shopify.com/s/files/1/0838/0052/3057/files/fpo-product-glasses-2-1024x1024.svg',
+  /** Third hat product placeholder. */
+  product_8:
+    'https://cdn.shopify.com/s/files/1/0838/0052/3057/files/fpo-product-hat-3-1024x1024.svg',
+  /** First bag product placeholder. */
+  product_9:
+    'https://cdn.shopify.com/s/files/1/0838/0052/3057/files/fpo-product-bag-1-1024x1024.svg',
+  /** Second shoe product placeholder. */
+  product_10:
+    'https://cdn.shopify.com/s/files/1/0838/0052/3057/files/fpo-product-shoe-2-1024x1024.svg',
+  /** Second hat product placeholder. */
+  product_11:
+    'https://cdn.shopify.com/s/files/1/0838/0052/3057/files/fpo-product-hat-2-1024x1024.svg',
+  /** Third glasses product placeholder. */
+  product_12:
+    'https://cdn.shopify.com/s/files/1/0838/0052/3057/files/fpo-product-glasses-3-1024x1024.svg',
+  /** Third shoe product placeholder. */
+  product_13:
+    'https://cdn.shopify.com/s/files/1/0838/0052/3057/files/fpo-product-shoe-3-1024x1024.svg',
+  /** Third bag product placeholder. */
+  product_14:
+    'https://cdn.shopify.com/s/files/1/0838/0052/3057/files/fpo-product-bag-3-1024x1024.svg',
+  /** First hat product placeholder. */
+  product_15:
+    'https://cdn.shopify.com/s/files/1/0838/0052/3057/files/fpo-product-hat-1-1024x1024.svg',
+  /** Third lamp product placeholder. */
+  product_16:
+    'https://cdn.shopify.com/s/files/1/0838/0052/3057/files/fpo-product-lamp-3-1024x1024.svg',
+  /** First watch product placeholder. */
+  product_17:
+    'https://cdn.shopify.com/s/files/1/0838/0052/3057/files/fpo-product-watch-1-1024x1024.svg',
+  /** Second watch product placeholder. */
+  product_18:
+    'https://cdn.shopify.com/s/files/1/0838/0052/3057/files/fpo-product-watch-2-1024x1024.svg',
+}
+
+// Re-export all types and utilities from schema package
+export * from '@weaverse/schema'
+export * from './components'
+export {
+  getNestedKey,
+  interpolate,
+  // Deprecated aliases — kept for backward compatibility.
+  ThemeTextProvider,
+  type ThemeTextProviderProps,
+  type ThemeTextValue,
+  type TranslateFunction,
+  // Canonical translation API.
+  TranslationProvider,
+  type TranslationProviderProps,
+  type TranslationValue,
+  useThemeText,
+  useTranslation,
+} from './hooks/translation-context'
+// Export Hydrogen-specific hooks
+export {
+  createWeaverseDataContext,
+  type RouteKeyedDataContext,
+  useWeaverseDataContext,
+  type WeaverseDataContext,
+} from './hooks/use-weaverse-data-context'
+// Export hydrogen-specific modules
+export * from './seo'
+export * from './types'
+export * from './utils'
+export type { WeaverseDataValue } from './utils/pick-weaverse-data'
+export { ThemeTextStore, TranslationStore } from './utils/translation-store'
+export type {
+  ThemeSettingsStore,
+  WeaverseThemeData,
+} from './utils/use-theme-settings-store'
+export * from './WeaverseHydrogenRoot'
+export * from './weaverse-client'
+// Re-export utilities from @weaverse/react
+export {
+  isBrowser,
+  isIframe,
+  useChildInstances,
+  useItemInstance,
+  useParentInstance,
+  useWeaverse,
+}

package/src/seo.ts

@@ -0,0 +1,125 @@
+import type { PageSEOData } from '@weaverse/schema'
+import type { MetaDescriptor } from 'react-router'
+import type { HydrogenPageData, WeaverseLoaderData } from './types'
+
+/** Object containing an optional Weaverse page for SEO extraction. */
+export interface WeaverseSeoPageContainer {
+  /** Page whose published SEO fields should be formatted. */
+  page?: HydrogenPageData | null
+}
+
+/** Input accepted by {@link getWeaverseSeoMeta}. */
+export type WeaverseSeoInput =
+  | WeaverseLoaderData
+  | HydrogenPageData
+  | WeaverseSeoPageContainer
+  | null
+  | undefined
+
+/**
+ * Convert a Weaverse page-level SEO payload into React Router
+ * `MetaDescriptor[]`. Pure, synchronous, tree-shakeable — does not fetch.
+ *
+ * Behavior:
+ * - `title` → top-level `{ title }` descriptor.
+ * - `description` / `keywords` → `<meta name="...">`.
+ * - `canonicalUrl` → `<link rel="canonical">`.
+ * - `openGraph.*` → `<meta property="og:*">`. `og:type` defaults to
+ *   `'website'` when any other OG field is present.
+ * - `twitter.*` → `<meta name="twitter:*">`. `twitter:card` defaults to
+ *   `'summary'` when any other Twitter field is present.
+ * - `robots` is always emitted (defaults to `'index,follow'`) so themes
+ *   stacking multiple SEO sources have a deterministic last word on
+ *   indexing for Weaverse-managed pages.
+ * - Empty strings / missing fields are filtered before return so empty
+ *   descriptors don't override earlier sources (e.g. Hydrogen
+ *   `getSeoMeta`).
+ */
+export function formatMetaDescriptors(
+  seo: PageSEOData | null | undefined
+): MetaDescriptor[] {
+  if (!seo) {
+    return [{ name: 'robots', content: 'index,follow' }]
+  }
+
+  let descriptors: MetaDescriptor[] = []
+
+  if (seo.title) {
+    descriptors.push({ title: seo.title })
+  }
+  if (seo.description) {
+    descriptors.push({ name: 'description', content: seo.description })
+  }
+  if (seo.keywords) {
+    descriptors.push({ name: 'keywords', content: seo.keywords })
+  }
+  if (seo.canonicalUrl) {
+    descriptors.push({
+      tagName: 'link',
+      rel: 'canonical',
+      href: seo.canonicalUrl,
+    })
+  }
+
+  let og = seo.openGraph
+  if (og && (og.title || og.description || og.image || og.type)) {
+    if (og.title) {
+      descriptors.push({ property: 'og:title', content: og.title })
+    }
+    if (og.description) {
+      descriptors.push({ property: 'og:description', content: og.description })
+    }
+    if (og.image) {
+      descriptors.push({ property: 'og:image', content: og.image })
+    }
+    descriptors.push({ property: 'og:type', content: og.type || 'website' })
+  }
+
+  let tw = seo.twitter
+  if (tw && (tw.title || tw.description || tw.image || tw.cardType)) {
+    descriptors.push({
+      name: 'twitter:card',
+      content: tw.cardType || 'summary',
+    })
+    if (tw.title) {
+      descriptors.push({ name: 'twitter:title', content: tw.title })
+    }
+    if (tw.description) {
+      descriptors.push({ name: 'twitter:description', content: tw.description })
+    }
+    if (tw.image) {
+      descriptors.push({ name: 'twitter:image', content: tw.image })
+    }
+  }
+
+  let index = seo.robots?.index !== false
+  let follow = seo.robots?.follow !== false
+  descriptors.push({
+    name: 'robots',
+    content: `${index ? 'index' : 'noindex'},${follow ? 'follow' : 'nofollow'}`,
+  })
+
+  return descriptors
+}
+
+/**
+ * Convenience accessor: pull `page.seo` out of a `WeaverseLoaderData`
+ * (or `HydrogenPageData`) and emit `MetaDescriptor[]`. Null-safe.
+ *
+ * @example
+ * ```ts
+ * export const meta: MetaFunction<typeof loader> = ({ data }) => {
+ *   return getWeaverseSeoMeta(data?.weaverseData)
+ * }
+ * ```
+ */
+export function getWeaverseSeoMeta(data: WeaverseSeoInput): MetaDescriptor[] {
+  if (!data) {
+    return formatMetaDescriptors(null)
+  }
+  let page =
+    'items' in data && 'id' in data
+      ? (data as HydrogenPageData)
+      : ((data as WeaverseSeoPageContainer).page ?? null)
+  return formatMetaDescriptors(page?.seo ?? null)
+}