fontdue-js 3.0.0-alpha8 → 3.0.0

package/dist/components/ConfigContext.d.ts

@@ -23,13 +23,20 @@ interface TrackingConfig {
     consentMessage?: string;
     segment?: SegmentConfig;
 }
+interface PreviewConfig {
+    endpoint?: string;
+    revalidateEndpoint?: string;
+    clientSide?: boolean;
+}
 export interface Config {
     form?: FormConfig;
     storeModal?: StoreModalConfig;
     typeTester?: TypeTesterConfig;
     stripe?: StripeConfig;
     tracking?: TrackingConfig;
+    preview?: PreviewConfig;
     corsErrorModal?: boolean;
+    cdnUrl?: string;
 }
 export declare const mergeConfig: (base?: Config, override?: Config) => Config;
 export declare const makeConfig: (config?: Config) => {
@@ -45,7 +52,7 @@ export declare const makeConfig: (config?: Config) => {
         selectable: boolean;
         priceBar: boolean;
         textInput: boolean;
-        initialMode: "local" | "group";
+        initialMode: "group" | "local";
         groupEdit: boolean;
         bulletStyle: "round" | "square";
         openTypeFeatures: {
@@ -102,7 +109,13 @@ export declare const makeConfig: (config?: Config) => {
         consentMessage: string | undefined;
         segment: SegmentConfig | undefined;
     };
+    preview: {
+        endpoint: string;
+        revalidateEndpoint: string | undefined;
+        clientSide: boolean;
+    };
     corsErrorModal: boolean;
+    cdnUrl: string;
 };
 declare const _default: React.Context<{
     typeTester: {
@@ -117,7 +130,7 @@ declare const _default: React.Context<{
         selectable: boolean;
         priceBar: boolean;
         textInput: boolean;
-        initialMode: "local" | "group";
+        initialMode: "group" | "local";
         groupEdit: boolean;
         bulletStyle: "round" | "square";
         openTypeFeatures: {
@@ -174,6 +187,12 @@ declare const _default: React.Context<{
         consentMessage: string | undefined;
         segment: SegmentConfig | undefined;
     };
+    preview: {
+        endpoint: string;
+        revalidateEndpoint: string | undefined;
+        clientSide: boolean;
+    };
     corsErrorModal: boolean;
+    cdnUrl: string;
 }>;
 export default _default;

package/dist/components/ConfigContext.js

@@ -1,6 +1,8 @@
 'use client';
 
 import React from 'react';
+import { PREVIEW_ENDPOINT } from '../preview/constants.js';
+import { FONTDUE_CDN_URL } from '../data/unicodeNamesUrl.js';
 const makeTypeTesterConfig = config => {
   var _config$openTypeFeatu, _config$openTypeFeatu2, _config$openTypeFeatu3, _config$openTypeFeatu4, _config$size, _config$size2, _config$size3, _config$lineHeight, _config$lineHeight2, _config$lineHeight3, _config$letterSpacing, _config$letterSpacing2, _config$letterSpacing3, _config$columns, _config$columns2, _config$columns3;
   let shy = (config === null || config === void 0 ? void 0 : config.shy) ?? false;
@@ -79,7 +81,7 @@ export const mergeConfig = (base, override) => {
   return deepMerge(base, override);
 };
 export const makeConfig = config => {
-  var _config$form, _config$storeModal, _config$storeModal2, _config$storeModal3, _config$storeModal4, _config$stripe, _config$tracking, _config$tracking2, _config$tracking3, _config$tracking4;
+  var _config$form, _config$storeModal, _config$storeModal2, _config$storeModal3, _config$storeModal4, _config$stripe, _config$tracking, _config$tracking2, _config$tracking3, _config$tracking4, _config$preview, _config$preview2, _config$preview3;
   return {
     typeTester: makeTypeTesterConfig(config === null || config === void 0 ? void 0 : config.typeTester),
     form: {
@@ -101,7 +103,15 @@ export const makeConfig = config => {
       consentMessage: config === null || config === void 0 ? void 0 : (_config$tracking3 = config.tracking) === null || _config$tracking3 === void 0 ? void 0 : _config$tracking3.consentMessage,
       segment: config === null || config === void 0 ? void 0 : (_config$tracking4 = config.tracking) === null || _config$tracking4 === void 0 ? void 0 : _config$tracking4.segment
     },
-    corsErrorModal: (config === null || config === void 0 ? void 0 : config.corsErrorModal) ?? true
+    preview: {
+      endpoint: (config === null || config === void 0 ? void 0 : (_config$preview = config.preview) === null || _config$preview === void 0 ? void 0 : _config$preview.endpoint) ?? PREVIEW_ENDPOINT,
+      // No default: an unset revalidate endpoint hides the toolbar's refresh
+      // button (frameworks without a client-callable purge leave it unset).
+      revalidateEndpoint: config === null || config === void 0 ? void 0 : (_config$preview2 = config.preview) === null || _config$preview2 === void 0 ? void 0 : _config$preview2.revalidateEndpoint,
+      clientSide: (config === null || config === void 0 ? void 0 : (_config$preview3 = config.preview) === null || _config$preview3 === void 0 ? void 0 : _config$preview3.clientSide) ?? false
+    },
+    corsErrorModal: (config === null || config === void 0 ? void 0 : config.corsErrorModal) ?? true,
+    cdnUrl: (config === null || config === void 0 ? void 0 : config.cdnUrl) ?? FONTDUE_CDN_URL
   };
 };
 export default /*#__PURE__*/React.createContext(makeConfig());

package/dist/components/ConnectionErrorToolbar.d.ts

@@ -0,0 +1 @@
+export declare function renderConnectionErrorToolbar(origin: string, fontdueUrl: string): void;

package/dist/components/ConnectionErrorToolbar.js

@@ -0,0 +1,106 @@
+import React, { useState } from 'react';
+import { createRoot } from 'react-dom/client';
+
+// Connection-error status, mounted in its own React root (like the modal it
+// replaces) rather than inside the admin toolbar's component tree.
+//
+// A CORS/connection outage commonly makes the consumer's own Relay-driven
+// components throw, and their error boundary can replace the whole route
+// wholesale — which would take an in-tree status down with it (verified in a
+// single-tree framework: the page became an "Oops!" error page and the toolbar
+// vanished). An independent root keeps this status visible regardless, while
+// reusing the admin toolbar's restrained styling so it reads as the same small
+// platform chrome — not the old full-screen modal.
+//
+// It deliberately takes no contexts (Relay, config, url): a blocked connection
+// can't confirm an admin anyway, so this shows to whoever is on the page, with
+// just the origin + Fontdue URL the detector hands it.
+
+// Deep link to where an admin adds allowed origins, derived from the blocked
+// request's own URL. Null if it can't be parsed, so the link is simply omitted.
+function settingsUrl(fontdueUrl) {
+  try {
+    return `${new URL(fontdueUrl).origin}/admin/settings/integration`;
+  } catch {
+    return null;
+  }
+}
+function ConnectionErrorToolbar(_ref) {
+  let {
+    origin,
+    fontdueUrl
+  } = _ref;
+  const [open, setOpen] = useState(false);
+  const fixUrl = settingsUrl(fontdueUrl);
+  return /*#__PURE__*/React.createElement("div", {
+    className: "fontdue-admin-toolbar",
+    "data-connection-error": "true"
+  }, 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("div", {
+    className: "fontdue-admin-toolbar__error-status",
+    role: "alert"
+  }, /*#__PURE__*/React.createElement("p", {
+    className: "fontdue-admin-toolbar__error-status-text"
+  }, /*#__PURE__*/React.createElement(WarningIcon, null), "Fontdue couldn\u2019t be reached from this site."), /*#__PURE__*/React.createElement("p", {
+    className: "fontdue-admin-toolbar__hint"
+  }, "This is most likely a cross-origin (CORS) setting \u2014 ", origin, " isn\u2019t on Fontdue\u2019s allowed list. Add it under Settings \u2192 Integration and this page will reload automatically."), /*#__PURE__*/React.createElement("p", {
+    className: "fontdue-admin-toolbar__hint"
+  }, "If it\u2019s already listed, the connection may be failing for another reason \u2014 a network problem or a temporary Fontdue outage."), fixUrl && /*#__PURE__*/React.createElement("a", {
+    className: "fontdue-admin-toolbar__action",
+    href: fixUrl,
+    target: "_blank",
+    rel: "noreferrer"
+  }, "Open integration settings \u2197")), /*#__PURE__*/React.createElement("p", {
+    className: "fontdue-admin-toolbar__meta"
+  }, "Shown because Fontdue couldn\u2019t load on this page.")), /*#__PURE__*/React.createElement("button", {
+    type: "button",
+    className: "fontdue-admin-toolbar__button",
+    onClick: () => setOpen(v => !v),
+    "aria-expanded": open
+  }, /*#__PURE__*/React.createElement(WarningIcon, null), "Fontdue \xB7 connection issue"));
+}
+
+// Small inline warning glyph (a triangle with an exclamation), matching the
+// admin toolbar's. Inherits the surrounding text color via currentColor.
+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"
+  }));
+}
+function mount(origin, fontdueUrl) {
+  const container = document.createElement('div');
+  document.body.appendChild(container);
+  createRoot(container).render( /*#__PURE__*/React.createElement(ConnectionErrorToolbar, {
+    origin: origin,
+    fontdueUrl: fontdueUrl
+  }));
+}
+export function renderConnectionErrorToolbar(origin, fontdueUrl) {
+  if (document.body) {
+    mount(origin, fontdueUrl);
+  } else {
+    document.addEventListener('DOMContentLoaded', () => mount(origin, fontdueUrl));
+  }
+}

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

@@ -1,4 +1,5 @@
 import React, { type JSX } from 'react';
+import { VerticalMetrics } from '../useFontStyle.js';
 import { FontStyle_fontStyle$key } from '../../__generated__/FontStyle_fontStyle.graphql.js';
 interface FontStyleProps {
     fontStyle: FontStyle_fontStyle$key;
@@ -7,6 +8,7 @@ interface FontStyleProps {
     children: ((props: {
         loaded: boolean;
         style: React.CSSProperties;
+        verticalMetrics: VerticalMetrics | null;
     }) => React.ReactNode) | React.ReactNode;
 }
 export default function FontStyle({ Component, fontStyle: fontStyleKey, style, children, ...rest }: Omit<React.HTMLAttributes<HTMLDivElement | HTMLSpanElement>, 'children'> & FontStyleProps): JSX.Element;

package/dist/components/FontStyle/index.js

@@ -13,7 +13,8 @@ export default function FontStyle(_ref) {
   const fontStyle = useFragment((_FontStyle_fontStyle.hash && _FontStyle_fontStyle.hash !== "7891603bea1a3e40f40297bf1697eb3c" && console.error("The definition of 'FontStyle_fontStyle' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _FontStyle_fontStyle), fontStyleKey);
   const {
     style: fontStyleStyle,
-    loaded
+    loaded,
+    verticalMetrics
   } = useFontStyle({
     fontStyle
   });
@@ -26,6 +27,7 @@ export default function FontStyle(_ref) {
   };
   return /*#__PURE__*/React.createElement(Component, renderProps, typeof children === 'function' ? children({
     loaded,
-    style: fontStyleStyle
+    style: fontStyleStyle,
+    verticalMetrics
   }) : children);
 }

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

@@ -0,0 +1,2 @@
+import React from 'react';
+export default function FontdueAdminToolbar(): React.JSX.Element | null;

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;