fontdue-js 3.0.0-alpha1 → 3.0.0-alpha2

package/dist/components/CharacterViewer/index.d.ts

@@ -1,15 +1,35 @@
 import React from 'react';
-import { SerializablePreloadedQuery } from '../../relay/loadSerializableQuery.js';
-import { CharacterViewerIDQuery } from '__generated__/CharacterViewerIDQuery.graphql.js';
-import { CharacterViewerSlugQuery } from '__generated__/CharacterViewerSlugQuery.graphql.js';
+import { LoadSerializableQueryOptions, SerializablePreloadedQuery } from '../../relay/loadSerializableQuery.js';
+import { CharacterViewerIDQuery } from '../../__generated__/CharacterViewerIDQuery.graphql.js';
+import { CharacterViewerSlugQuery } from '../../__generated__/CharacterViewerSlugQuery.graphql.js';
 export interface CharacterViewer_props {
-    collectionId?: string;
-    collectionSlug?: string;
 }
+export type CharacterViewerPreloadedQuery = SerializablePreloadedQuery<CharacterViewerIDQuery> | SerializablePreloadedQuery<CharacterViewerSlugQuery>;
+export type LoadCharacterViewerQueryVariables = {
+    collectionId: string;
+    collectionSlug?: never;
+} | {
+    collectionId?: never;
+    collectionSlug: string;
+};
+export declare function loadCharacterViewerQuery(variables: LoadCharacterViewerQueryVariables, options?: LoadSerializableQueryOptions): Promise<CharacterViewerPreloadedQuery>;
 export declare function CharacterViewerPreloadedIDQueryRenderer({ preloadedQuery, ...rest }: CharacterViewer_props & {
     preloadedQuery: SerializablePreloadedQuery<CharacterViewerIDQuery>;
 }): React.JSX.Element | null;
 export declare function CharacterViewerPreloadedSlugQueryRenderer({ preloadedQuery, ...rest }: CharacterViewer_props & {
     preloadedQuery: SerializablePreloadedQuery<CharacterViewerSlugQuery>;
 }): React.JSX.Element | null;
-export default function CharacterViewer({ collectionId, collectionSlug, }: CharacterViewer_props): React.JSX.Element;
+export type CharacterViewer_unifiedProps = CharacterViewer_props & ({
+    preloadedQuery: CharacterViewerPreloadedQuery;
+    collectionId?: never;
+    collectionSlug?: never;
+} | {
+    preloadedQuery?: never;
+    collectionId: string;
+    collectionSlug?: never;
+} | {
+    preloadedQuery?: never;
+    collectionId?: never;
+    collectionSlug: string;
+});
+export default function CharacterViewer(props: CharacterViewer_unifiedProps): React.JSX.Element;

package/dist/components/CharacterViewer/index.js

@@ -13,9 +13,13 @@ import retryImport from '../../retryImport.js';
 import { notEmpty, variableInstanceSettings, variableSettingsCSS } from '../../utils.js';
 import useFontStyle from '../useFontStyle.js';
 import useSerializablePreloadedQuery from '../../relay/useSerializablePreloadedQuery.js';
+import loadSerializableQuery from '../../relay/loadSerializableQuery.js';
+import CharacterViewerIDQueryNode from '../../__generated__/CharacterViewerIDQuery.graphql.js';
+import CharacterViewerSlugQueryNode from '../../__generated__/CharacterViewerSlugQuery.graphql.js';
 import StyleSelect from './StyleSelect.js';
 import Checkbox from '../Checkbox/index.js';
 import CharacterViewerStyleRefetchQueryNode from '../../__generated__/CharacterViewerStyleRefetchQuery.graphql.js';
+import { EnsureFontdueContext } from '../FontdueContextProvider/index.js';
 function useSize() {
   const ref = useRef(null);
   const [size, setSize] = React.useState();
@@ -394,6 +398,20 @@ function CharacterViewerComponent(_ref3) {
   }))));
 }
 const idQuery = (_CharacterViewerIDQuery.hash && _CharacterViewerIDQuery.hash !== "f90b09a4df6d95307b0a5d5fda487cdc" && console.error("The definition of 'CharacterViewerIDQuery' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _CharacterViewerIDQuery);
+const slugQuery = (_CharacterViewerSlugQuery.hash && _CharacterViewerSlugQuery.hash !== "afa08a8f050e0434308892fea6e3c267" && console.error("The definition of 'CharacterViewerSlugQuery' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _CharacterViewerSlugQuery);
+export async function loadCharacterViewerQuery(variables, options) {
+  if (variables.collectionId) {
+    return loadSerializableQuery(CharacterViewerIDQueryNode, {
+      collectionId: variables.collectionId
+    }, options);
+  }
+  if (variables.collectionSlug) {
+    return loadSerializableQuery(CharacterViewerSlugQueryNode, {
+      collectionSlug: variables.collectionSlug
+    }, options);
+  }
+  throw new Error('loadCharacterViewerQuery expected either collectionId or collectionSlug');
+}
 function CharacterViewerIdQueryRenderer(_ref7) {
   let {
     collectionId
@@ -423,7 +441,7 @@ function CharacterViewerSlugQueryRenderer(_ref9) {
   let {
     collectionSlug
   } = _ref9;
-  const data = useLazyLoadQuery((_CharacterViewerSlugQuery.hash && _CharacterViewerSlugQuery.hash !== "afa08a8f050e0434308892fea6e3c267" && console.error("The definition of 'CharacterViewerSlugQuery' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _CharacterViewerSlugQuery), {
+  const data = useLazyLoadQuery(slugQuery, {
     collectionSlug
   });
   const collection = data === null || data === void 0 ? void 0 : (_data$viewer = data.viewer) === null || _data$viewer === void 0 ? void 0 : (_data$viewer$slug = _data$viewer.slug) === null || _data$viewer$slug === void 0 ? void 0 : _data$viewer$slug.fontCollection;
@@ -439,27 +457,59 @@ export function CharacterViewerPreloadedSlugQueryRenderer(_ref10) {
     ...rest
   } = _ref10;
   const queryRef = useSerializablePreloadedQuery(preloadedQuery);
-  const data = usePreloadedQuery(idQuery, queryRef);
+  const data = usePreloadedQuery(slugQuery, queryRef);
   const collection = data === null || data === void 0 ? void 0 : (_data$viewer2 = data.viewer) === null || _data$viewer2 === void 0 ? void 0 : (_data$viewer2$slug = _data$viewer2.slug) === null || _data$viewer2$slug === void 0 ? void 0 : _data$viewer2$slug.fontCollection;
   if (!collection) return null;
   return /*#__PURE__*/React.createElement(CharacterViewerComponent, _extends({}, rest, {
     collection: collection
   }));
 }
-export default function CharacterViewer(_ref11) {
+function CharacterViewerPreloadedRenderer(_ref11) {
   let {
-    collectionId,
-    collectionSlug
+    preloadedQuery,
+    ...rest
   } = _ref11;
-  if (collectionId) {
-    return /*#__PURE__*/React.createElement(CharacterViewerIdQueryRenderer, {
-      collectionId: collectionId
-    });
+  if (preloadedQuery.params.name === 'CharacterViewerIDQuery') {
+    return /*#__PURE__*/React.createElement(CharacterViewerPreloadedIDQueryRenderer, _extends({
+      preloadedQuery: preloadedQuery
+    }, rest));
   }
-  if (collectionSlug) {
-    return /*#__PURE__*/React.createElement(CharacterViewerSlugQueryRenderer, {
+  return /*#__PURE__*/React.createElement(CharacterViewerPreloadedSlugQueryRenderer, _extends({
+    preloadedQuery: preloadedQuery
+  }, rest));
+}
+// Unified CharacterViewer entry. Accepts a preloaded query (server-side
+// preload path) or `{collectionId}`/`{collectionSlug}` for lazy fetch.
+// `EnsureFontdueContext` only self-wraps with `FontdueContextProvider` when
+// no parent Fontdue context is present.
+export default function CharacterViewer(props) {
+  let inner;
+  if ('preloadedQuery' in props && props.preloadedQuery) {
+    const {
+      preloadedQuery,
+      ...rest
+    } = props;
+    inner = /*#__PURE__*/React.createElement(CharacterViewerPreloadedRenderer, _extends({
+      preloadedQuery: preloadedQuery
+    }, rest));
+  } else if ('collectionId' in props && props.collectionId) {
+    const {
+      collectionId,
+      ...rest
+    } = props;
+    inner = /*#__PURE__*/React.createElement(CharacterViewerIdQueryRenderer, _extends({
+      collectionId: collectionId
+    }, rest));
+  } else if ('collectionSlug' in props && props.collectionSlug) {
+    const {
+      collectionSlug,
+      ...rest
+    } = props;
+    inner = /*#__PURE__*/React.createElement(CharacterViewerSlugQueryRenderer, _extends({
       collectionSlug: collectionSlug
-    });
+    }, rest));
+  } else {
+    throw new Error('CharacterViewer expected one of preloadedQuery, collectionId, or collectionSlug');
   }
-  throw new Error('CharacterViewer expected either a collectionId or collectionSlug prop');
+  return /*#__PURE__*/React.createElement(EnsureFontdueContext, null, inner);
 }

package/dist/components/CharacterViewer/index.server.d.ts

@@ -1,3 +1,6 @@
 import React from 'react';
 import { CharacterViewer_props } from './index.js';
-export default function CharacterViewer({ collectionId, collectionSlug, ...rest }: CharacterViewer_props): Promise<React.JSX.Element | null>;
+export default function CharacterViewer({ collectionId, collectionSlug, ...rest }: CharacterViewer_props & {
+    collectionId?: string | null;
+    collectionSlug?: string | null;
+}): Promise<React.JSX.Element | null>;

package/dist/components/CharacterViewer/index.server.js

@@ -4,6 +4,12 @@ import loadSerializableQuery from '../../relay/loadSerializableQuery.js';
 import { CharacterViewerPreloadedIDQueryRenderer, CharacterViewerPreloadedSlugQueryRenderer } from './index.js';
 import CharacterViewerIDQueryNode from '../../__generated__/CharacterViewerIDQuery.graphql.js';
 import CharacterViewerSlugQueryNode from '../../__generated__/CharacterViewerSlugQuery.graphql.js';
+
+// Next RSC variant: awaits the query on the server and hands the response to
+// the client `*PreloadedQueryRenderer`. Lets pages just write
+// `<CharacterViewer collectionId={id} />` in an RSC without manually
+// invoking `loadCharacterViewerQuery` + threading `preloadedQuery` through
+// props.
 export default async function CharacterViewer(_ref) {
   let {
     collectionId,

package/dist/components/FontdueContextProvider/index.d.ts

@@ -0,0 +1,17 @@
+import React from 'react';
+import { Store } from 'redux';
+import { Config } from '../ConfigContext.js';
+import { FontdueAction, FontdueState } from '../../reducer.js';
+import { Components } from '../ComponentsContext.js';
+export declare function EnsureFontdueContext({ children }: {
+    children: React.ReactNode;
+}): React.JSX.Element;
+export interface FontdueContextProvider_props {
+    children?: React.ReactNode;
+    url?: string;
+    stripeIntegration?: 'card-element' | 'dynamic';
+    config?: Config;
+    components?: Components;
+    store?: Store<FontdueState, FontdueAction>;
+}
+export default function FontdueContextProvider({ children, url, stripeIntegration, config, components, store, }: FontdueContextProvider_props): React.JSX.Element;

package/dist/components/FontdueContextProvider/index.js

@@ -0,0 +1,108 @@
+'use client';
+
+import React, { Suspense, createContext, useContext, useRef } from 'react';
+import { Provider } from 'react-redux';
+import { RelayEnvironmentProvider } from 'react-relay';
+import { useCurrentEnvironment } from '../../relay/environment.js';
+import ConfigContext, { makeConfig } from '../ConfigContext.js';
+import { createDefaultStore } from '../../reducer.js';
+import ComponentsContext from '../ComponentsContext.js';
+import UrlContext from '../UrlContext.js';
+import { setCorsModalEnabled } from '../../corsError.js';
+
+// Marker context used by self-wrapping components to detect a parent
+// FontdueContextProvider/FontdueProvider. When the marker is `true`, a
+// self-wrapping component skips its inner FontdueContextProvider so the
+// outer config/url/store/relay-env flow through. Internal — do not export
+// from the package.
+const FontdueContextMarker = /*#__PURE__*/createContext(false);
+
+// Wraps `children` in `FontdueContextProvider` only when no parent
+// FontdueContextProvider/FontdueProvider is present. Self-wrapping components
+// (`<TypeTester>`, `<StoreModal>`, etc.) use this so they Just Work as
+// standalone islands while staying lightweight inside an outer
+// `<FontdueProvider>` tree.
+export function EnsureFontdueContext(_ref) {
+  let {
+    children
+  } = _ref;
+  const isInsideContext = useContext(FontdueContextMarker);
+  if (isInsideContext) return /*#__PURE__*/React.createElement(React.Fragment, null, children);
+  return /*#__PURE__*/React.createElement(FontdueContextProvider, null, children);
+}
+const IS_SERVER = typeof window === typeof undefined;
+
+// === Multi-island state-sharing contract ===
+//
+// Frameworks that hydrate per-island (Astro, Vike, Qwik) mount one
+// `FontdueContextProvider` per fontdue-js component on the page. Each island
+// runs its own React reconciler and gets its own copy of every context, so
+// state that lives inside the component tree is duplicated — adding to the
+// cart in one island wouldn't update the CartButton in a different island.
+//
+// Any stateful client to be shared *across islands* (a Redux store, a Relay
+// Environment, or any future cache) must be a module-level singleton on the
+// client and per-render on the server. SSR has the opposite constraint: a
+// client-shared singleton would leak state between concurrent requests.
+//
+// The pattern (see also `relay/environment.ts → useCurrentEnvironment`):
+//
+//   let clientThing: Thing | null = null;
+//   function useSharedThing() {
+//     if (IS_SERVER) return createThing(); // per-render, no leakage
+//     if (clientThing == null) clientThing = createThing();
+//     return clientThing; // shared across islands
+//   }
+//
+// If you add a new context provider here that holds mutable client state,
+// follow this pattern. If it's purely deriving from props (no state), a
+// vanilla `Context.Provider` is fine — each island will compute the same
+// value.
+let clientStore = null;
+function useSharedStore(providedStore, config) {
+  const ref = useRef(null);
+  if (providedStore) return providedStore;
+  if (IS_SERVER) {
+    if (ref.current == null) ref.current = createDefaultStore(config);
+    return ref.current;
+  }
+  if (clientStore == null) clientStore = createDefaultStore(config);
+  return clientStore;
+}
+// Lightweight wrapper that sets up Fontdue's React contexts (Relay env,
+// Redux store, config, url, components) without rendering any aux UI.
+// `*Preloaded` self-wrapping components use this so they can stand alone
+// without claiming the page-level aux UI slot. Pages that need aux UI
+// (theme/test-mode/consent/tracking) wrap with `FontdueProvider` instead.
+export default function FontdueContextProvider(_ref2) {
+  let {
+    children,
+    url,
+    stripeIntegration,
+    config,
+    components,
+    store
+  } = _ref2;
+  const environment = useCurrentEnvironment({
+    url,
+    stripeIntegration
+  });
+  const configValue = makeConfig(config);
+  setCorsModalEnabled(configValue.corsErrorModal);
+  const sharedStore = useSharedStore(store, config);
+  return /*#__PURE__*/React.createElement(FontdueContextMarker.Provider, {
+    value: true
+  }, /*#__PURE__*/React.createElement(RelayEnvironmentProvider, {
+    environment: environment
+  }, /*#__PURE__*/React.createElement(Provider, {
+    store: sharedStore
+  }, /*#__PURE__*/React.createElement(Suspense, {
+    fallback: null
+  }, /*#__PURE__*/React.createElement(ConfigContext.Provider, {
+    value: configValue
+  }, /*#__PURE__*/React.createElement(UrlContext.Provider, {
+    value: url ?? (typeof process !== 'undefined' ? process.env.NEXT_PUBLIC_FONTDUE_URL : undefined) ?? ''
+  }, /*#__PURE__*/React.createElement(ComponentsContext.Provider, {
+    value: components ?? {}
+  }, children)))))));
+}

package/dist/components/FontdueContextProvider/index.server.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import type { FontdueContextProvider_props } from './index.js';
+export type { FontdueContextProvider_props } from './index.js';
+export default function FontdueContextProviderServer(props: FontdueContextProvider_props): Promise<React.JSX.Element>;

package/dist/components/FontdueContextProvider/index.server.js

@@ -0,0 +1,7 @@
+import React from 'react';
+import FontdueContextProvider from './index.js';
+// RSC entry. The client component does the work; this exists so the
+// `react-server` export condition resolves to a server-renderable file.
+export default async function FontdueContextProviderServer(props) {
+  return /*#__PURE__*/React.createElement(FontdueContextProvider, props);
+}

package/dist/components/FontdueProvider/index.d.ts

@@ -1,5 +1,11 @@
 import React from 'react';
-import type { FontdueProvider_props } from './FontdueProviderClientComponent.js';
-declare const FontdueProvider: ({ children, ...rest }: FontdueProvider_props) => React.JSX.Element;
-export type { FontdueProvider_props };
+import type { FontdueContextProvider_props } from '../FontdueContextProvider/index.js';
+import { SerializablePreloadedQuery } from '../../relay/loadSerializableQuery.js';
+import { FontdueProviderQuery } from '../../__generated__/FontdueProviderQuery.graphql.js';
+export declare const fontdueProviderQuery: import("react-relay").GraphQLTaggedNode;
+export type FontdueProviderPreloadedQuery = SerializablePreloadedQuery<FontdueProviderQuery>;
+export interface FontdueProvider_props extends FontdueContextProvider_props {
+    preloadedQuery?: FontdueProviderPreloadedQuery;
+}
+declare const FontdueProvider: ({ children, preloadedQuery, ...rest }: FontdueProvider_props) => React.JSX.Element;
 export default FontdueProvider;

package/dist/components/FontdueProvider/index.js

@@ -1,37 +1,75 @@
 'use client';
 
-function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
-import React, { Suspense } from 'react';
+import _FontdueProviderQuery from "../../__generated__/FontdueProviderQuery.graphql.js";
+import React, { Suspense, lazy } from 'react';
 import { ErrorBoundary } from 'react-error-boundary';
+import { graphql, useLazyLoadQuery, usePreloadedQuery } from 'react-relay';
 import TestModeBanner from '../TestModeBanner/index.js';
 import ThemeConfig from '../ThemeConfig/index.js';
-import FontdueProviderClientComponent from './FontdueProviderClientComponent.js';
-import useAuxUIOwner from './useAuxUIOwner.js';
+import ServerConfigProvider from '../ServerConfigProvider/index.js';
+import FontdueContextProvider from '../FontdueContextProvider/index.js';
+import retryImport from '../../retryImport.js';
+import useSerializablePreloadedQuery from '../../relay/useSerializablePreloadedQuery.js';
+const ConsentBanner = /*#__PURE__*/lazy(() => retryImport(() => import('../ConsentBanner/index.js')));
+const Tracking = /*#__PURE__*/lazy(() => retryImport(() => import('../Tracking/index.js')));
 
-// Wrap each aux UI component in its own Suspense + ErrorBoundary so that its
-// query suspending (useLazyLoadQuery fetches on first client render) or
-// failing (CORS / offline / etc.) can't blank out the consumer's rendered
-// children. Without this, TestModeBanner's TestModeBannerQuery suspends the
-// whole provider subtree on hydration and the user sees a visible
-// unmount/remount flash on the TypeTester.
-function IsolatedAuxUI(_ref) {
+// Single layout-level query that spreads every aux UI component's fragment.
+// Components declare their own data needs via fragments — adding a new aux
+// component is one fragment + one fragment spread, no duplicated selections.
+export const fontdueProviderQuery = (_FontdueProviderQuery.hash && _FontdueProviderQuery.hash !== "5cbd582990daa28a99839c20abbc8bda" && console.error("The definition of 'FontdueProviderQuery' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _FontdueProviderQuery);
+const FontdueProvider = _ref => {
   let {
-    children
+    children,
+    preloadedQuery,
+    ...rest
   } = _ref;
-  return /*#__PURE__*/React.createElement(ErrorBoundary, {
+  return /*#__PURE__*/React.createElement(FontdueContextProvider, rest, /*#__PURE__*/React.createElement(ErrorBoundary, {
     fallback: null
   }, /*#__PURE__*/React.createElement(Suspense, {
     fallback: null
-  }, children));
-}
-const FontdueProvider = _ref2 => {
+  }, preloadedQuery ? /*#__PURE__*/React.createElement(AuxUIPreloaded, {
+    preloadedQuery: preloadedQuery,
+    codeConfig: rest.config
+  }) : /*#__PURE__*/React.createElement(AuxUILazy, {
+    codeConfig: rest.config
+  }))), children);
+};
+function AuxUIPreloaded(_ref2) {
   let {
-    children,
-    ...rest
+    preloadedQuery,
+    codeConfig
   } = _ref2;
-  const isAuxOwner = useAuxUIOwner();
-  return /*#__PURE__*/React.createElement(FontdueProviderClientComponent, _extends({}, rest, {
-    renderAuxUI: isAuxOwner
-  }), isAuxOwner && /*#__PURE__*/React.createElement(IsolatedAuxUI, null, /*#__PURE__*/React.createElement(TestModeBanner, null)), isAuxOwner && /*#__PURE__*/React.createElement(IsolatedAuxUI, null, /*#__PURE__*/React.createElement(ThemeConfig, null)), children);
-};
+  const queryRef = useSerializablePreloadedQuery(preloadedQuery, undefined, fontdueProviderQuery);
+  const data = usePreloadedQuery(fontdueProviderQuery, queryRef);
+  return /*#__PURE__*/React.createElement(AuxUI, {
+    viewer: data.viewer,
+    codeConfig: codeConfig
+  });
+}
+function AuxUILazy(_ref3) {
+  let {
+    codeConfig
+  } = _ref3;
+  const data = useLazyLoadQuery(fontdueProviderQuery, {});
+  return /*#__PURE__*/React.createElement(AuxUI, {
+    viewer: data.viewer,
+    codeConfig: codeConfig
+  });
+}
+function AuxUI(_ref4) {
+  let {
+    viewer,
+    codeConfig
+  } = _ref4;
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ThemeConfig, {
+    viewer: viewer
+  }), /*#__PURE__*/React.createElement(TestModeBanner, {
+    viewer: viewer
+  }), /*#__PURE__*/React.createElement(ServerConfigProvider, {
+    viewer: viewer,
+    codeConfig: codeConfig
+  }, /*#__PURE__*/React.createElement(Suspense, {
+    fallback: null
+  }, /*#__PURE__*/React.createElement(ConsentBanner, null), /*#__PURE__*/React.createElement(Tracking, null))));
+}
 export default FontdueProvider;

package/dist/components/FontdueProvider/index.server.d.ts

@@ -1,4 +1,4 @@
 import React from 'react';
-import type { FontdueProvider_props } from './FontdueProviderClientComponent.js';
-export type { FontdueProvider_props } from './FontdueProviderClientComponent.js';
-export default function FontdueProvider({ children, ...rest }: FontdueProvider_props): Promise<React.JSX.Element>;
+import type { FontdueProvider_props } from './index.js';
+export type { FontdueProvider_props } from './index.js';
+export default function FontdueProviderServer({ preloadedQuery, ...rest }: FontdueProvider_props): Promise<React.JSX.Element>;

package/dist/components/FontdueProvider/index.server.js

@@ -1,28 +1,18 @@
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
-import React, { Suspense } from 'react';
-import { ErrorBoundary } from 'react-error-boundary';
-import TestModeBanner from '../TestModeBanner/index.js';
-import ThemeConfig from '../ThemeConfig/index.server.js';
-import FontdueProviderClientComponent from './FontdueProviderClientComponent.js';
-// Each aux UI component gets its own Suspense + ErrorBoundary so its query
-// suspending/failing can't blank out the consumer's rendered children during
-// hydration. See the non-RSC index.tsx for the same treatment.
-function IsolatedAuxUI(_ref) {
+import React from 'react';
+import FontdueProvider from './index.js';
+import loadFontdueProviderQuery from '../../loadFontdueProviderQuery.js';
+// RSC entry. When no preloadedQuery is passed, fetch one server-side so the
+// Next.js App Router path stays "drop the provider in your layout, done."
+export default async function FontdueProviderServer(_ref) {
   let {
-    children
-  } = _ref;
-  return /*#__PURE__*/React.createElement(ErrorBoundary, {
-    fallback: null
-  }, /*#__PURE__*/React.createElement(Suspense, {
-    fallback: null
-  }, children));
-}
-export default async function FontdueProvider(_ref2) {
-  let {
-    children,
+    preloadedQuery,
     ...rest
-  } = _ref2;
-  return /*#__PURE__*/React.createElement(FontdueProviderClientComponent, _extends({}, rest, {
-    renderAuxUI: true
-  }), /*#__PURE__*/React.createElement(IsolatedAuxUI, null, /*#__PURE__*/React.createElement(TestModeBanner, null)), /*#__PURE__*/React.createElement(IsolatedAuxUI, null, /*#__PURE__*/React.createElement(ThemeConfig, null)), children);
+  } = _ref;
+  const resolved = preloadedQuery ?? (await loadFontdueProviderQuery({
+    url: rest.url
+  }));
+  return /*#__PURE__*/React.createElement(FontdueProvider, _extends({}, rest, {
+    preloadedQuery: resolved
+  }));
 }

package/dist/components/NewsletterSignup/index.d.ts

@@ -1,7 +1,8 @@
 import React from 'react';
-import { SerializablePreloadedQuery } from '../../relay/loadSerializableQuery.js';
-import { NewsletterSignupQuery } from '__generated__/NewsletterSignupQuery.graphql.js';
-type PreloadedQuery = SerializablePreloadedQuery<NewsletterSignupQuery>;
+import { LoadSerializableQueryOptions, SerializablePreloadedQuery } from '../../relay/loadSerializableQuery.js';
+import { NewsletterSignupQuery } from '../../__generated__/NewsletterSignupQuery.graphql.js';
+export type NewsletterSignupPreloadedQuery = SerializablePreloadedQuery<NewsletterSignupQuery>;
+export declare function loadNewsletterSignupQuery(options?: LoadSerializableQueryOptions): Promise<NewsletterSignupPreloadedQuery>;
 export interface NewsletterSignup_props {
     optInLabel?: string;
     successLabel?: string;
@@ -11,7 +12,9 @@ export interface NewsletterSignup_props {
     intro?: string;
 }
 export declare function NewsletterSignupPreloadedQueryRenderer({ preloadedQuery, ...props }: {
-    preloadedQuery: PreloadedQuery;
+    preloadedQuery: NewsletterSignupPreloadedQuery;
 } & NewsletterSignup_props): React.JSX.Element;
-export default function NewsletterSignup(props: NewsletterSignup_props): React.JSX.Element;
-export {};
+export type NewsletterSignup_unifiedProps = NewsletterSignup_props & {
+    preloadedQuery?: NewsletterSignupPreloadedQuery;
+};
+export default function NewsletterSignup(props: NewsletterSignup_unifiedProps): React.JSX.Element;

package/dist/components/NewsletterSignup/index.js

@@ -8,8 +8,14 @@ import { graphql, commitMutation, useRelayEnvironment, useLazyLoadQuery, usePrel
 import { ReCAPTCHA } from 'react-google-recaptcha';
 import TextField from '../TextField/index.js';
 import Check from '../Icons/Check.js';
+import loadSerializableQuery from '../../relay/loadSerializableQuery.js';
 import useSerializablePreloadedQuery from '../../relay/useSerializablePreloadedQuery.js';
+import NewsletterSignupQueryNode from '../../__generated__/NewsletterSignupQuery.graphql.js';
+import { EnsureFontdueContext } from '../FontdueContextProvider/index.js';
 const updateCustomerMutation = (_NewsletterSignupUpdateCustomerMutation.hash && _NewsletterSignupUpdateCustomerMutation.hash !== "769087891b6f263122bbb630b3f2ca6c" && console.error("The definition of 'NewsletterSignupUpdateCustomerMutation' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _NewsletterSignupUpdateCustomerMutation);
+export async function loadNewsletterSignupQuery(options) {
+  return loadSerializableQuery(NewsletterSignupQueryNode, {}, options);
+}
 const query = (_NewsletterSignupQuery.hash && _NewsletterSignupQuery.hash !== "24b303198a6038318723fc0124548862" && console.error("The definition of 'NewsletterSignupQuery' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _NewsletterSignupQuery);
 function NewsletterSignupComponent(_ref) {
   var _data$viewer, _data$viewer$settings, _data$viewer2, _data$viewer2$setting, _data$viewer3, _data$viewer3$setting, _data$viewer4, _data$viewer4$setting;
@@ -182,9 +188,18 @@ export function NewsletterSignupPreloadedQueryRenderer(_ref3) {
     data: data
   }, props));
 }
-export default function NewsletterSignup(props) {
+function NewsletterSignupLazyQueryRenderer(props) {
   const data = useLazyLoadQuery(query, {});
   return /*#__PURE__*/React.createElement(NewsletterSignupComponent, _extends({}, props, {
     data: data
   }));
+}
+// Unified NewsletterSignup entry. Accepts an optional preloaded query
+// (server-side preload path) or fetches lazily on mount. `EnsureFontdueContext`
+// only self-wraps with `FontdueContextProvider` when no parent Fontdue
+// context is present.
+export default function NewsletterSignup(props) {
+  return /*#__PURE__*/React.createElement(EnsureFontdueContext, null, props.preloadedQuery ? /*#__PURE__*/React.createElement(NewsletterSignupPreloadedQueryRenderer, _extends({}, props, {
+    preloadedQuery: props.preloadedQuery
+  })) : /*#__PURE__*/React.createElement(NewsletterSignupLazyQueryRenderer, props));
 }

package/dist/components/NewsletterSignup/index.server.js

@@ -3,6 +3,11 @@ import React from 'react';
 import loadSerializableQuery from '../../relay/loadSerializableQuery.js';
 import { NewsletterSignupPreloadedQueryRenderer } from './index.js';
 import NewsletterSignupQueryNode from '../../__generated__/NewsletterSignupQuery.graphql.js';
+
+// Next RSC variant: awaits the query on the server and hands the response to
+// the client `NewsletterSignupPreloadedQueryRenderer`. Lets pages just write
+// `<NewsletterSignup />` in an RSC without manually invoking
+// `loadNewsletterSignupQuery` + threading `preloadedQuery` through props.
 export default async function NewsletterSignup(props) {
   const preloadedQuery = await loadSerializableQuery(NewsletterSignupQueryNode, {});
   return /*#__PURE__*/React.createElement(NewsletterSignupPreloadedQueryRenderer, _extends({}, props, {

package/dist/components/ServerConfigProvider/index.d.ts

@@ -1,8 +1,10 @@
 import React from 'react';
 import { Config } from '../ConfigContext.js';
+import type { ServerConfigProvider_viewer$key } from '../../__generated__/ServerConfigProvider_viewer.graphql.js';
 interface Props {
+    viewer: ServerConfigProvider_viewer$key;
     codeConfig?: Config;
     children: React.ReactNode;
 }
-declare const ServerConfigProvider: ({ codeConfig, children }: Props) => React.JSX.Element;
+declare const ServerConfigProvider: ({ viewer, codeConfig, children }: Props) => React.JSX.Element;
 export default ServerConfigProvider;

package/dist/components/ServerConfigProvider/index.js

@@ -1,18 +1,19 @@
 'use client';
 
-import _ServerConfigProviderQuery from "../../__generated__/ServerConfigProviderQuery.graphql.js";
+import _ServerConfigProvider_viewer from "../../__generated__/ServerConfigProvider_viewer.graphql.js";
 import React from 'react';
-import { graphql, useLazyLoadQuery } from 'react-relay';
+import { graphql, useFragment } from 'react-relay';
 import ConfigContext, { makeConfig } from '../ConfigContext.js';
-const query = (_ServerConfigProviderQuery.hash && _ServerConfigProviderQuery.hash !== "b20ad9bdada6a425ee660a8662a78840" && console.error("The definition of 'ServerConfigProviderQuery' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _ServerConfigProviderQuery);
+const fragment = (_ServerConfigProvider_viewer.hash && _ServerConfigProvider_viewer.hash !== "6afcb0c3813a418a470e48415f963064" && console.error("The definition of 'ServerConfigProvider_viewer' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _ServerConfigProvider_viewer);
 const ServerConfigProvider = _ref => {
-  var _data$viewer, _data$viewer$fontdueC;
+  var _data$fontdueConfig;
   let {
+    viewer,
     codeConfig,
     children
   } = _ref;
-  const data = useLazyLoadQuery(query, {});
-  const tracking = (_data$viewer = data.viewer) === null || _data$viewer === void 0 ? void 0 : (_data$viewer$fontdueC = _data$viewer.fontdueConfig) === null || _data$viewer$fontdueC === void 0 ? void 0 : _data$viewer$fontdueC.tracking;
+  const data = useFragment(fragment, viewer);
+  const tracking = (_data$fontdueConfig = data.fontdueConfig) === null || _data$fontdueConfig === void 0 ? void 0 : _data$fontdueConfig.tracking;
 
   // Server config is the base; code config overrides.
   const merged = {

package/dist/components/StoreModal/index.js

@@ -5,7 +5,8 @@ import StoreModalLoader from './StoreModalLoader.js';
 import StoreModalContainer from './StoreModalContainer.js';
 import StoreModalRouter from './StoreModalRouter.js';
 import { useDispatch } from 'react-redux';
-const StoreModal = () => {
+import { EnsureFontdueContext } from '../FontdueContextProvider/index.js';
+function StoreModalInner() {
   const dispatch = useDispatch();
 
   // Check for store-modal=open URL parameter and open cart automatically
@@ -26,5 +27,11 @@ const StoreModal = () => {
   return /*#__PURE__*/React.createElement(StoreModalLoader, null, /*#__PURE__*/React.createElement(Suspense, {
     fallback: null
   }, /*#__PURE__*/React.createElement(StoreModalContainer, null, /*#__PURE__*/React.createElement(StoreModalRouter, null))));
-};
+}
+
+// Self-wraps with FontdueContextProvider so it can stand alone as an island
+// (e.g. in Astro/Vike/etc.). When already inside a `<FontdueProvider>` tree
+// (e.g. Next layouts), `EnsureFontdueContext` skips the inner wrap so the
+// outer config/url/store flow through.
+const StoreModal = () => /*#__PURE__*/React.createElement(EnsureFontdueContext, null, /*#__PURE__*/React.createElement(StoreModalInner, null));
 export default StoreModal;