fontdue-js 3.0.0-alpha9 → 3.0.0

package/dist/components/FontdueAdminToolbar/index.js

@@ -0,0 +1,299 @@
+'use client';
+
+import _FontdueAdminToolbarTokenMutation from "../../__generated__/FontdueAdminToolbarTokenMutation.graphql.js";
+import _FontdueAdminToolbarQuery from "../../__generated__/FontdueAdminToolbarQuery.graphql.js";
+import React, { useContext, useEffect, useState } from 'react';
+import { commitMutation, fetchQuery, graphql, useRelayEnvironment } from 'react-relay';
+import ConfigContext from '../ConfigContext.js';
+import { useFontdueUrl } from '../UrlContext.js';
+import { PREVIEW_ENDPOINT, DEFAULT_PREVIEW_TTL_MS, setPreviewMarkerCookie } from '../../preview/constants.js';
+import { readPreviewState, expiresAtFromTokenResult, isSessionExpiredError } from './previewState.js';
+import { fontdueBaseUrl, version } from '../../relay/environment.js';
+// Admin-only affordance for logged-in foundry admins: reveal unpublished
+// ("hidden") fonts across the whole storefront. Storefront pages are
+// server-rendered sessionless and cached, and the provider's own query is
+// preloaded server-side without the session — so `adminUser` can't ride it.
+// Admin presence is detected here, client-side, where the request carries
+// the session; the public never sees this control.
+//
+// The reveal itself is not done here: entering preview brokers a short-lived
+// admin token and hands it to the framework's preview route, which switches
+// the whole app to a live, token-bearing render. Exiting clears it. Public
+// renders never touch any of this and stay static and cached.
+const adminQuery = (_FontdueAdminToolbarQuery.hash && _FontdueAdminToolbarQuery.hash !== "8660b45f086137d249eee82459ad648d" && console.error("The definition of 'FontdueAdminToolbarQuery' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _FontdueAdminToolbarQuery);
+
+// createAdminToken mints a short-lived, stateless admin token from the admin
+// session; it's handed to the preview route to enter draft mode.
+const tokenMutation = (_FontdueAdminToolbarTokenMutation.hash && _FontdueAdminToolbarTokenMutation.hash !== "2b82f195747c86d50fd5884d76f3b709" && console.error("The definition of 'FontdueAdminToolbarTokenMutation' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _FontdueAdminToolbarTokenMutation);
+export default function FontdueAdminToolbar() {
+  const environment = useRelayEnvironment();
+  const previewConfig = useContext(ConfigContext).preview;
+  // The preview entry/exit route is part of the portable preview contract (see
+  // fontdue-js/preview); it defaults to '/api/preview' but is configurable so
+  // non-Next apps can mount it where their router expects. The revalidate route
+  // is opt-in (no default) — see config.preview.revalidateEndpoint.
+  const previewEndpoint = (previewConfig === null || previewConfig === void 0 ? void 0 : previewConfig.endpoint) ?? PREVIEW_ENDPOINT;
+  const revalidateEndpoint = previewConfig === null || previewConfig === void 0 ? void 0 : previewConfig.revalidateEndpoint;
+  // Client-only embeds (the script-tag CDN bundle, a client SPA) have no server
+  // preview route to broker a token through, so they enter/exit preview by
+  // toggling the readable marker cookie directly — see setPreviewMarkerCookie.
+  const clientSidePreview = (previewConfig === null || previewConfig === void 0 ? void 0 : previewConfig.clientSide) ?? false;
+
+  // Where the admin is signed in: the configured Fontdue origin. Used for the
+  // "signed in at" line and the deep link back to the admin. Falls back to the
+  // URL the embed was initialized with (the script-tag bundle sets no
+  // FONTDUE_URL env); undefined (e.g. multi-tenant) drops both gracefully.
+  const contextUrl = useFontdueUrl();
+  const fontdueUrl = fontdueBaseUrl() ?? (contextUrl || undefined);
+  const fontdueHost = fontdueUrl ? safeHost(fontdueUrl) : null;
+  const adminUrl = fontdueUrl ? `${fontdueUrl.replace(/\/+$/, '')}/admin` : null;
+  const [adminName, setAdminName] = useState(null);
+  const [ready, setReady] = useState(false);
+  const [open, setOpen] = useState(false);
+  const [previewState, setPreviewState] = useState('off');
+  const [busy, setBusy] = useState(false);
+  const [error, setError] = useState(null);
+  const [notice, setNotice] = useState(null);
+  const previewing = previewState === 'active';
+  const expired = previewState === 'expired';
+  useEffect(() => {
+    setPreviewState(readPreviewState());
+    // network-only: the provider's preloaded query already wrote a sessionless
+    // `viewer` to the store, so we must go to the network (with the session)
+    // rather than read that cached, admin-blind copy.
+    const subscription = fetchQuery(environment, adminQuery, {}, {
+      fetchPolicy: 'network-only'
+    }).subscribe({
+      next: data => {
+        var _data$viewer;
+        const admin = (_data$viewer = data.viewer) === null || _data$viewer === void 0 ? void 0 : _data$viewer.adminUser;
+        if (admin) setAdminName(admin.name ?? 'admin');
+      },
+      error: () => setReady(true),
+      complete: () => setReady(true)
+    });
+    return () => subscription.unsubscribe();
+  }, [environment]);
+
+  // Re-derive the state when the tab regains focus or becomes visible. A tab
+  // left open past the token's expiry won't otherwise notice — there's no
+  // event when a cookie's encoded expiry passes — so the warning would never
+  // appear until the next reload. Recovery stays user-initiated; we only
+  // refresh what state is shown.
+  useEffect(() => {
+    if (typeof window === 'undefined') return;
+    const recheck = () => setPreviewState(readPreviewState());
+    window.addEventListener('focus', recheck);
+    document.addEventListener('visibilitychange', recheck);
+    return () => {
+      window.removeEventListener('focus', recheck);
+      document.removeEventListener('visibilitychange', recheck);
+    };
+  }, []);
+
+  // Hidden until we've confirmed an admin session. The public always lands here.
+  if (!ready || !adminName) return null;
+  async function startPreview(token, expiresAt) {
+    const res = await fetch(previewEndpoint, {
+      method: 'POST',
+      headers: {
+        'content-type': 'application/json'
+      },
+      body: JSON.stringify({
+        token,
+        expiresAt
+      })
+    });
+    if (res.ok) {
+      window.location.reload();
+    } else {
+      setBusy(false);
+      setError('Could not start preview.');
+    }
+  }
+  function enterPreview() {
+    setBusy(true);
+    setError(null);
+    setNotice(null);
+    // Client-only: no server render needs a token, so just mark preview on and
+    // reload — the admin's session cookie rides the next fetches and reveals
+    // hidden fonts now that the marker makes the client send `fontdue-preview`.
+    // There's no token to mint, so the marker just gets the default 1h expiry.
+    if (clientSidePreview) {
+      setPreviewMarkerCookie(Date.now() + DEFAULT_PREVIEW_TTL_MS);
+      window.location.reload();
+      return;
+    }
+    commitMutation(environment, {
+      mutation: tokenMutation,
+      variables: {},
+      onCompleted: (res, errors) => {
+        var _res$createAdminToken;
+        const token = (_res$createAdminToken = res.createAdminToken) === null || _res$createAdminToken === void 0 ? void 0 : _res$createAdminToken.token;
+        if (errors && errors.length > 0 || !token) {
+          setBusy(false);
+          // createAdminToken is gated on the admin session (current_user); a
+          // "Not authorized" error means the session itself has lapsed, which
+          // needs a fresh sign-in, not a retry. Surface that distinctly and
+          // clear the now-meaningless marker so the toolbar resets.
+          if (isSessionExpiredError(errors)) {
+            setPreviewMarkerCookie(false);
+            setPreviewState('off');
+            setError('Your session expired — sign in again.');
+          } else {
+            setError('Could not start preview.');
+          }
+          return;
+        }
+        startPreview(token, expiresAtFromTokenResult(res.createAdminToken));
+      },
+      onError: () => {
+        setBusy(false);
+        setError('Could not start preview.');
+      }
+    });
+  }
+  async function exitPreview() {
+    setBusy(true);
+    setError(null);
+    setNotice(null);
+    if (clientSidePreview) {
+      setPreviewMarkerCookie(false);
+    } else {
+      await fetch(previewEndpoint, {
+        method: 'DELETE'
+      });
+    }
+    window.location.reload();
+  }
+
+  // Recover from the expired state: mint a fresh token and re-enter. This is the
+  // same enter flow — a successful POST overwrites the stale token + marker
+  // cookies and reloads, so there's nothing to clear first. If the session has
+  // also lapsed, enterPreview surfaces the distinct "sign in again" message.
+  function reEnterPreview() {
+    enterPreview();
+  }
+
+  // Purge the cached storefront so public visitors see freshly published (or
+  // newly hidden) content. Targets the configured revalidate route as-is.
+  async function refreshCache() {
+    if (!revalidateEndpoint) return;
+    setBusy(true);
+    setError(null);
+    setNotice(null);
+    try {
+      const res = await fetch(revalidateEndpoint, {
+        method: 'POST'
+      });
+      if (!res.ok) throw new Error(`status ${res.status}`);
+      setNotice('Public cache refreshed.');
+    } catch {
+      setError('Could not refresh the cache.');
+    } finally {
+      setBusy(false);
+    }
+  }
+  return /*#__PURE__*/React.createElement("div", {
+    className: "fontdue-admin-toolbar",
+    "data-previewing": previewing,
+    "data-preview-state": previewState,
+    "data-testid": "fontdue-admin-toolbar"
+  }, open && /*#__PURE__*/React.createElement("div", {
+    className: "fontdue-admin-toolbar__panel"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "fontdue-admin-toolbar__header"
+  }, /*#__PURE__*/React.createElement("span", {
+    className: "fontdue-admin-toolbar__title"
+  }, "Fontdue"), /*#__PURE__*/React.createElement("span", {
+    className: "fontdue-admin-toolbar__user"
+  }, adminName)), expired ? /*#__PURE__*/React.createElement("div", {
+    className: "fontdue-admin-toolbar__expired",
+    role: "status",
+    "data-testid": "preview-expired"
+  }, /*#__PURE__*/React.createElement("p", {
+    className: "fontdue-admin-toolbar__expired-text"
+  }, /*#__PURE__*/React.createElement(WarningIcon, null), "Preview expired. Hidden fonts are no longer shown."), /*#__PURE__*/React.createElement("button", {
+    type: "button",
+    className: "fontdue-admin-toolbar__action",
+    onClick: reEnterPreview,
+    disabled: busy,
+    "data-testid": "reenter-preview-button"
+  }, "Re-enter preview")) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("label", {
+    className: "fontdue-admin-toolbar__toggle"
+  }, /*#__PURE__*/React.createElement("input", {
+    type: "checkbox",
+    checked: previewing,
+    disabled: busy,
+    onChange: e => e.target.checked ? enterPreview() : exitPreview(),
+    "data-testid": "preview-toggle"
+  }), /*#__PURE__*/React.createElement("span", null, "Preview hidden fonts")), /*#__PURE__*/React.createElement("p", {
+    className: "fontdue-admin-toolbar__hint"
+  }, previewing ? 'Unpublished fonts are visible across the site — only to you.' : 'Reveal unpublished fonts everywhere, only for you.')), (revalidateEndpoint || adminUrl) && /*#__PURE__*/React.createElement("div", {
+    className: "fontdue-admin-toolbar__actions"
+  }, revalidateEndpoint && /*#__PURE__*/React.createElement("button", {
+    type: "button",
+    className: "fontdue-admin-toolbar__action",
+    onClick: refreshCache,
+    disabled: busy,
+    "data-testid": "revalidate-button"
+  }, "Refresh public cache"), adminUrl && /*#__PURE__*/React.createElement("a", {
+    className: "fontdue-admin-toolbar__action",
+    href: adminUrl,
+    target: "_blank",
+    rel: "noreferrer",
+    "data-testid": "open-admin-link"
+  }, "Open Fontdue admin \u2197")), notice && /*#__PURE__*/React.createElement("p", {
+    className: "fontdue-admin-toolbar__notice"
+  }, notice), error && /*#__PURE__*/React.createElement("p", {
+    className: "fontdue-admin-toolbar__error"
+  }, error), /*#__PURE__*/React.createElement("p", {
+    className: "fontdue-admin-toolbar__meta"
+  }, fontdueHost ? `Shown because you’re signed in to Fontdue at ${fontdueHost}.` : 'Shown because you’re signed in to Fontdue.', /*#__PURE__*/React.createElement("span", {
+    className: "fontdue-admin-toolbar__version"
+  }, "fontdue-js ", version))), /*#__PURE__*/React.createElement("button", {
+    type: "button",
+    className: "fontdue-admin-toolbar__button",
+    onClick: () => setOpen(v => !v),
+    "aria-expanded": open,
+    "data-testid": "fontdue-admin-toolbar-button"
+  }, expired ? /*#__PURE__*/React.createElement(WarningIcon, null) : /*#__PURE__*/React.createElement("span", {
+    className: "fontdue-admin-toolbar__dot",
+    "aria-hidden": "true"
+  }), "Fontdue", previewing ? ' · previewing' : '', expired ? ' · preview expired' : ''));
+}
+
+// Small inline warning glyph (a triangle with an exclamation). Inherits the
+// surrounding text color so it stays monochrome with the toolbar chrome.
+function WarningIcon() {
+  return /*#__PURE__*/React.createElement("svg", {
+    className: "fontdue-admin-toolbar__warning-icon",
+    width: "13",
+    height: "13",
+    viewBox: "0 0 16 16",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: "1.4",
+    "aria-hidden": "true",
+    focusable: "false"
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M8 1.5 15 14H1L8 1.5Z",
+    strokeLinejoin: "miter"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M8 6v3.5",
+    strokeLinecap: "square"
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M8 11.5v.5",
+    strokeLinecap: "square"
+  }));
+}
+
+// Hostname of a base URL, or the raw value if it can't be parsed (so a
+// misconfigured URL still shows something rather than throwing).
+function safeHost(url) {
+  try {
+    return new URL(url).host;
+  } catch {
+    return url;
+  }
+}

package/dist/components/FontdueAdminToolbar/previewState.d.ts

@@ -0,0 +1,7 @@
+export type PreviewState = 'off' | 'active' | 'expired';
+export declare function derivePreviewState(hasMarker: boolean, expiresAt: number | undefined, now?: number): PreviewState;
+export declare function readPreviewState(): PreviewState;
+export declare function expiresAtFromTokenResult(result: unknown): number;
+export declare function isSessionExpiredError(errors: ReadonlyArray<{
+    message?: string | null;
+}> | null | undefined): boolean;

package/dist/components/FontdueAdminToolbar/previewState.js

@@ -0,0 +1,58 @@
+// Pure preview-state logic for the admin toolbar, split out from the component
+// so it can be unit-tested without a browser, a Relay environment, or the
+// `graphql` Babel transform (importing the .tsx triggers the tag at load).
+//
+// The preview token is a stateless, time-only-expiring Phoenix.Token. There is
+// no way to learn its validity client-side (it's httpOnly, and the toolbar's
+// admin check rides the longer-lived *session* cookie, not the token), so the
+// toolbar tracks the token's *expiry* instead and derives three states from the
+// readable marker cookie:
+//
+//   - 'off'      — no marker cookie: not previewing.
+//   - 'active'   — marker present and now < expiresAt: previewing.
+//   - 'expired'  — marker present and now >= expiresAt: the token has lapsed,
+//                  so server renders have silently fallen back to the public
+//                  catalog. Show a warning and offer "re-enter".
+
+import { DEFAULT_PREVIEW_TTL_MS, hasPreviewMarkerCookie, getPreviewExpiry } from '../../preview/constants.js';
+// Pure derivation. `hasMarker` and `expiresAt` come from the marker cookie;
+// `now` is injectable for tests.
+export function derivePreviewState(hasMarker, expiresAt) {
+  let now = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : Date.now();
+  if (!hasMarker) return 'off';
+  // A marker with no/garbled expiry (e.g. a stale legacy `=1` cookie) is
+  // treated as expired: safer to prompt a re-enter than to imply it's live.
+  if (expiresAt === undefined || now >= expiresAt) return 'expired';
+  return 'active';
+}
+
+// Read the current preview state straight off the document's cookies.
+export function readPreviewState() {
+  return derivePreviewState(hasPreviewMarkerCookie(), getPreviewExpiry());
+}
+
+// Pull an expiry out of the createAdminToken response. The backend will grow an
+// `expiresAt` field (ISO-8601 or epoch-ms); until it does, the field is absent
+// and we fall back to now + DEFAULT_PREVIEW_TTL_MS — the canonical 1h TTL lives
+// in the backend `token.ex` `:admin_token` `max_age`. Read defensively so the
+// client and backend halves can ship independently.
+export function expiresAtFromTokenResult(result) {
+  const value = result === null || result === void 0 ? void 0 : result.expiresAt;
+  if (typeof value === 'number' && Number.isFinite(value)) return value;
+  if (typeof value === 'string' && value !== '') {
+    const asNumber = Number(value);
+    if (Number.isFinite(asNumber)) return asNumber;
+    const asDate = Date.parse(value);
+    if (!Number.isNaN(asDate)) return asDate;
+  }
+  return Date.now() + DEFAULT_PREVIEW_TTL_MS;
+}
+
+// True when the createAdminToken mutation failed because the admin *session*
+// (not the preview token) has expired. The resolver returns a "Not authorized"
+// GraphQL error when current_user is nil, so we match that message rather than
+// treating every failure as a recoverable retry.
+export function isSessionExpiredError(errors) {
+  if (!errors) return false;
+  return errors.some(e => /not authoriz/i.test(e.message ?? ''));
+}

package/dist/components/FontdueContextProvider/index.js

@@ -8,7 +8,7 @@ import ConfigContext, { makeConfig, mergeConfig } from '../ConfigContext.js';
 import { createDefaultStore } from '../../reducer.js';
 import ComponentsContext from '../ComponentsContext.js';
 import UrlContext from '../UrlContext.js';
-import { setCorsModalEnabled } from '../../corsError.js';
+import { setConnectionErrorUiEnabled } from '../../corsError.js';
 import TypeTesterFamiliesProvider from '../TypeTester/TypeTesterFamilies.js';
 
 // Marker context used by self-wrapping components to detect a parent
@@ -126,7 +126,9 @@ export default function FontdueContextProvider(_ref3) {
     stripeIntegration
   });
   const configValue = makeConfig(config);
-  setCorsModalEnabled(configValue.corsErrorModal);
+  // `corsErrorModal` is the legacy config name; it now gates the toolbar's
+  // connection-error status rather than a modal.
+  setConnectionErrorUiEnabled(configValue.corsErrorModal);
   const sharedStore = useSharedStore(store, config);
   return /*#__PURE__*/React.createElement(FontdueContextMarker.Provider, {
     value: true

package/dist/components/FontdueProvider/index.js

@@ -13,6 +13,11 @@ 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')));
+// Admin-only; self-gates to an admin session and renders nothing otherwise, so
+// it's safe to mount for everyone. It detects admins client-side (storefront
+// renders are sessionless), so it needs no fragment on the provider query.
+// Lazy so it stays out of the provider's main chunk.
+const FontdueAdminToolbar = /*#__PURE__*/lazy(() => retryImport(() => import('../FontdueAdminToolbar/index.js')));
 
 // Single layout-level query that spreads every aux UI component's fragment.
 // Components declare their own data needs via fragments — adding a new aux
@@ -72,6 +77,6 @@ function AuxUI(_ref4) {
     codeConfig: codeConfig
   }, /*#__PURE__*/React.createElement(Suspense, {
     fallback: null
-  }, /*#__PURE__*/React.createElement(ConsentBanner, null), /*#__PURE__*/React.createElement(Tracking, null))));
+  }, /*#__PURE__*/React.createElement(ConsentBanner, null), /*#__PURE__*/React.createElement(Tracking, null), /*#__PURE__*/React.createElement(FontdueAdminToolbar, null))));
 }
 export default FontdueProvider;

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

@@ -1,5 +1,6 @@
 import React from 'react';
 import type { FontdueProvider_props } from './index.js';
+import '../../next/registerSingleTenantResolver.js';
 export type { FontdueProvider_props } from './index.js';
 export type { FontdueProviderPreloadedQuery } from '../../loadFontdueProviderQuery.js';
 export type { FontdueServerConfig } from '../../relay/serverConfig.js';

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

@@ -3,6 +3,16 @@ import React from 'react';
 import FontdueProvider from './index.js';
 import loadFontdueProviderQueryImpl from '../../loadFontdueProviderQuery.js';
 import { setFontdueServerConfig } from '../../relay/serverConfig.js';
+// Side-effect import: registers the single-tenant ambient config resolver so a
+// single-tenant foundry that mounts <FontdueProvider> never has to call a
+// per-render setup function. The module statically pulls in only browser-safe
+// code and lazy-loads the Next request APIs (next/headers, next/navigation)
+// behind a dynamic import that runs only when the resolver resolves config —
+// keeping next/* off this react-server entrypoint's eager graph. The resolver
+// no-ops in multi-tenant mode (which drives config through the slot) and is
+// inert in the default build Astro/RR7 use. See
+// ../../next/registerSingleTenantResolver.ts.
+import '../../next/registerSingleTenantResolver.js';
 // Stub for the RSC export condition. The default `<FontdueProvider>` server
 // entrypoint (this file) awaits the query for consumers, so RSC users should
 // never call it manually. Re-exporting a throwing stub makes the mistake

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

@@ -1,9 +1,9 @@
 import React from 'react';
-import { SerializablePreloadedQuery } from '../../relay/loadSerializableQuery.js';
+import { SerializablePreloadedQuery, type LoadQueryOptions } from '../../relay/loadSerializableQuery.js';
 import { NewsletterSignupQuery } from '../../__generated__/NewsletterSignupQuery.graphql.js';
 import { Config } from '../ConfigContext.js';
 export type NewsletterSignupPreloadedQuery = SerializablePreloadedQuery<NewsletterSignupQuery>;
-export declare function loadNewsletterSignupQuery(): Promise<NewsletterSignupPreloadedQuery>;
+export declare function loadNewsletterSignupQuery(options?: LoadQueryOptions): Promise<NewsletterSignupPreloadedQuery>;
 export interface NewsletterSignup_props {
     optInLabel?: string;
     successLabel?: string;

package/dist/components/NewsletterSignup/index.js

@@ -13,8 +13,8 @@ import useSerializablePreloadedQuery from '../../relay/useSerializablePreloadedQ
 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() {
-  return loadSerializableQuery(NewsletterSignupQueryNode, {});
+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) {

package/dist/components/Root/index.js

@@ -71,11 +71,25 @@ const getInitialElements = () => {
   return map;
 };
 const Root = props => {
+  var _props$config;
+  // The script-tag integration is client-only — there is no server render to
+  // forward a preview token to — so the admin toolbar must enter/exit preview
+  // by toggling the marker cookie in the browser. Force it on here, where the
+  // integration is unambiguously client-side. (The admin's Fontdue session
+  // rides the credentialed cross-origin GraphQL fetch and gates the reveal.)
+  const config = {
+    ...props.config,
+    preview: {
+      ...((_props$config = props.config) === null || _props$config === void 0 ? void 0 : _props$config.preview),
+      clientSide: true
+    }
+  };
+
   // use a Map here instead of an array in case we register the same element
   // more than once (otherwise we run into issues rendering the component
   // twice into the same element). this also gives us a way to set unique keys.
   const [elements, setElements] = useState(getInitialElements());
-  const store = useRef(createDefaultStore(props.config));
+  const store = useRef(createDefaultStore(config));
   useEffect(() => {
     // watch for any new or removed fontdue elements
 
@@ -190,7 +204,7 @@ const Root = props => {
   return /*#__PURE__*/React.createElement(FontdueProvider, {
     url: props.url,
     stripeIntegration: props.stripeIntegration,
-    config: props.config,
+    config: config,
     components: props.components,
     store: store.current
   }, /*#__PURE__*/React.createElement(React.Fragment, null, Array.from(elements).map(_ref => {

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import { TestFontsForm_Query } from '../../__generated__/TestFontsForm_Query.graphql.js';
-import { SerializablePreloadedQuery } from '../../relay/loadSerializableQuery.js';
+import { SerializablePreloadedQuery, type LoadQueryOptions } from '../../relay/loadSerializableQuery.js';
 import { Config } from '../ConfigContext.js';
 export interface TestFontsForm_props {
     agreementLabel?: string;
@@ -8,7 +8,7 @@ export interface TestFontsForm_props {
     newsletterCheckboxChecked?: boolean;
 }
 export type TestFontsFormPreloadedQuery = SerializablePreloadedQuery<TestFontsForm_Query>;
-export declare function loadTestFontsFormQuery(): Promise<TestFontsFormPreloadedQuery>;
+export declare function loadTestFontsFormQuery(options?: LoadQueryOptions): Promise<TestFontsFormPreloadedQuery>;
 export declare function TestFontsFormPreloadedQueryRenderer({ preloadedQuery, ...rest }: TestFontsForm_props & {
     preloadedQuery: TestFontsFormPreloadedQuery;
 }): React.JSX.Element;

package/dist/components/TestFontsForm/index.js

@@ -194,8 +194,8 @@ const TestFontsFormComponent = _ref2 => {
   }));
 };
 const query = (_TestFontsForm_Query.hash && _TestFontsForm_Query.hash !== "cd43f0cacc4dcf01cf94fb1ff97197ca" && console.error("The definition of 'TestFontsForm_Query' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _TestFontsForm_Query);
-export async function loadTestFontsFormQuery() {
-  return loadSerializableQuery(TestFontsFormQueryNode, {});
+export async function loadTestFontsFormQuery(options) {
+  return loadSerializableQuery(TestFontsFormQueryNode, {}, options);
 }
 export function TestFontsFormPreloadedQueryRenderer(_ref4) {
   let {

package/dist/components/TypeTester/TypeTesterStandalone.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import { Alignment, Direction, FeaturesProp } from './types.js';
-import { SerializablePreloadedQuery } from '../../relay/loadSerializableQuery.js';
+import { SerializablePreloadedQuery, type LoadQueryOptions } from '../../relay/loadSerializableQuery.js';
 import { TypeTesterStandaloneQuery } from '../../__generated__/TypeTesterStandaloneQuery.graphql.js';
 import { Config } from '../ConfigContext.js';
 interface TypeTesterStandaloneComponent_props {
@@ -30,7 +30,7 @@ export interface LoadTypeTesterQueryVariables {
     familyName: string;
     styleName: string;
 }
-export declare function loadTypeTesterQuery(variables: LoadTypeTesterQueryVariables): Promise<TypeTesterPreloadedQuery>;
+export declare function loadTypeTesterQuery(variables: LoadTypeTesterQueryVariables, options?: LoadQueryOptions): Promise<TypeTesterPreloadedQuery>;
 export declare function TypeTesterStandalonePreloadedQueryRenderer({ preloadedQuery, ...rest }: TypeTesterStandaloneComponent_props & {
     preloadedQuery: TypeTesterPreloadedQuery;
 }): React.JSX.Element;

package/dist/components/TypeTester/TypeTesterStandalone.js

@@ -100,11 +100,11 @@ function TypeTesterStandaloneComponent(_ref) {
   }));
 }
 const query = (_TypeTesterStandaloneQuery.hash && _TypeTesterStandaloneQuery.hash !== "951214eacb2370ea3ca0b19bebe7fbe7" && console.error("The definition of 'TypeTesterStandaloneQuery' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _TypeTesterStandaloneQuery);
-export async function loadTypeTesterQuery(variables) {
+export async function loadTypeTesterQuery(variables, options) {
   return loadSerializableQuery(TypeTesterStandaloneQueryNode, {
     familyName: variables.familyName,
     styleName: variables.styleName
-  });
+  }, options);
 }
 export function TypeTesterStandalonePreloadedQueryRenderer(_ref3) {
   let {

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

@@ -3,7 +3,7 @@ import { TypeTestersIDQuery } from '../../__generated__/TypeTestersIDQuery.graph
 import { TypeTestersSlugQuery } from '../../__generated__/TypeTestersSlugQuery.graphql.js';
 import { Config } from '../ConfigContext.js';
 import { FeaturesProp } from '../TypeTester/types.js';
-import { SerializablePreloadedQuery } from '../../relay/loadSerializableQuery.js';
+import { SerializablePreloadedQuery, type LoadQueryOptions } from '../../relay/loadSerializableQuery.js';
 export interface TypeTesters_props {
     collectionId?: string;
     collectionSlug?: string;
@@ -33,7 +33,7 @@ export type LoadTypeTestersQueryVariables = ({
     tags?: string[] | null;
     excludeTags?: string[] | null;
 };
-export declare function loadTypeTestersQuery(variables: LoadTypeTestersQueryVariables): Promise<TypeTestersPreloadedQuery>;
+export declare function loadTypeTestersQuery(variables: LoadTypeTestersQueryVariables, options?: LoadQueryOptions): Promise<TypeTestersPreloadedQuery>;
 export type TypeTesters_unifiedProps = TypeTesters_props & {
     preloadedQuery?: TypeTestersPreloadedQuery;
     config?: Config;

package/dist/components/TypeTesters/index.js

@@ -251,7 +251,7 @@ function TypeTestersSlugQueryRenderer(_ref6) {
     excludeTags: excludeTags
   }));
 }
-export async function loadTypeTestersQuery(variables) {
+export async function loadTypeTestersQuery(variables, options) {
   const tags = variables.tags ?? null;
   const excludeTags = variables.excludeTags ?? null;
   if (variables.collectionId) {
@@ -259,14 +259,14 @@ export async function loadTypeTestersQuery(variables) {
       collectionId: variables.collectionId,
       tags,
       excludeTags
-    });
+    }, options);
   }
   if (variables.collectionSlug) {
     return loadSerializableQuery(TypeTestersSlugQueryNode, {
       collectionSlug: variables.collectionSlug,
       tags,
       excludeTags
-    });
+    }, options);
   }
   throw new Error('loadTypeTestersQuery expected either collectionId or collectionSlug');
 }

package/dist/components/useFontStyle.d.ts

@@ -8,6 +8,7 @@ export type VerticalMetrics = {
     readonly ascender: number;
     readonly descender: number;
     readonly lineGap: number | null;
+    readonly avgCharWidth: number | null;
 };
 declare const useFontStyle: ({ fontStyle: fontStyleKey, }: UseFontStyle_props) => {
     style: React.CSSProperties;