fontdue-js 3.0.0-alpha15 → 3.0.0-alpha16

package/dist/__tests__/preview.test.js

@@ -1,5 +1,6 @@
-import { describe, it, expect } from 'vitest';
+import { describe, it, expect, vi, afterEach } from 'vitest';
 import { handlePreviewRequest, readPreviewToken, previewAuthHeaders, PREVIEW_TOKEN_COOKIE, PREVIEW_MARKER_COOKIE } from '../preview/index.js';
+import { setPreviewMarkerCookie, hasPreviewMarkerCookie, getPreviewExpiry } from '../preview/constants.js';
 function postPreview(token) {
   let url = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'https://site.test/api/preview';
   return handlePreviewRequest(new Request(url, {
@@ -14,12 +15,14 @@ function postPreview(token) {
 }
 describe('handlePreviewRequest', () => {
   it('enters preview: sets an httpOnly token cookie + a readable marker', async () => {
+    const before = Date.now();
     const res = await postPreview('admin.tok.123');
     expect(res.status).toBe(200);
-    expect(await res.json()).toEqual({
-      ok: true,
-      preview: true
-    });
+    const body = await res.json();
+    expect(body.ok).toBe(true);
+    expect(body.preview).toBe(true);
+    // No expiresAt in the body → defaults to now + the 1h TTL.
+    expect(body.expiresAt).toBeGreaterThanOrEqual(before + 60 * 60 * 1000 - 5_000);
     const cookies = res.headers.getSetCookie();
     const tokenCookie = cookies.find(c => c.startsWith(`${PREVIEW_TOKEN_COOKIE}=`));
     const markerCookie = cookies.find(c => c.startsWith(`${PREVIEW_MARKER_COOKIE}=`));
@@ -27,10 +30,42 @@ describe('handlePreviewRequest', () => {
     expect(tokenCookie).toContain('HttpOnly');
     expect(tokenCookie).toContain('SameSite=Lax');
     expect(tokenCookie).toContain('Path=/');
-    expect(markerCookie).toContain(`${PREVIEW_MARKER_COOKIE}=1`);
+
+    // The marker now carries the token's expiry (epoch-ms), and outlives the
+    // token via a grace window so the toolbar can reach the "expired" warning.
+    expect(markerCookie).toContain(`${PREVIEW_MARKER_COOKIE}=${body.expiresAt}`);
+    expect(markerCookie).toMatch(/Max-Age=\d+/);
     // The marker must be readable by the client toolbar.
     expect(markerCookie).not.toContain('HttpOnly');
   });
+  it('threads an explicit expiresAt (ISO + epoch-ms) into the marker + body', async () => {
+    const iso = '2030-01-01T00:00:00.000Z';
+    const epoch = Date.parse(iso);
+    const fromIso = await handlePreviewRequest(new Request('https://site.test/api/preview', {
+      method: 'POST',
+      headers: {
+        'content-type': 'application/json'
+      },
+      body: JSON.stringify({
+        token: 't',
+        expiresAt: iso
+      })
+    }));
+    expect((await fromIso.json()).expiresAt).toBe(epoch);
+    const fromEpoch = await handlePreviewRequest(new Request('https://site.test/api/preview', {
+      method: 'POST',
+      headers: {
+        'content-type': 'application/json'
+      },
+      body: JSON.stringify({
+        token: 't',
+        expiresAt: epoch
+      })
+    }));
+    expect((await fromEpoch.json()).expiresAt).toBe(epoch);
+    const marker = fromEpoch.headers.getSetCookie().find(c => c.startsWith(`${PREVIEW_MARKER_COOKIE}=`));
+    expect(marker).toContain(`${PREVIEW_MARKER_COOKIE}=${epoch}`);
+  });
   it('marks cookies Secure on https and not on http (local dev)', async () => {
     const httpsCookies = (await postPreview('t')).headers.getSetCookie();
     expect(httpsCookies.every(c => c.includes('Secure'))).toBe(true);
@@ -82,6 +117,64 @@ describe('readPreviewToken', () => {
     expect(readPreviewToken(undefined)).toBeUndefined();
   });
 });
+describe('setPreviewMarkerCookie (client-only embeds)', () => {
+  afterEach(() => vi.unstubAllGlobals());
+
+  // Captures the last `document.cookie = ...` write through a setter, the way
+  // the browser would receive it.
+  function stubBrowser(protocol) {
+    const state = {
+      written: ''
+    };
+    vi.stubGlobal('document', {
+      set cookie(value) {
+        state.written = value;
+      },
+      get cookie() {
+        return state.written;
+      }
+    });
+    vi.stubGlobal('location', {
+      protocol
+    });
+    return state;
+  }
+  it('is a no-op during server rendering (no document)', () => {
+    // The node test env has no `document`, so this must stay inert, not throw.
+    expect(() => setPreviewMarkerCookie(true)).not.toThrow();
+  });
+  it('sets a JS-readable marker carrying the expiry, Secure on https', () => {
+    const state = stubBrowser('https:');
+    const expiresAt = Date.now() + 60 * 60 * 1000;
+    setPreviewMarkerCookie(expiresAt);
+    expect(state.written).toContain(`${PREVIEW_MARKER_COOKIE}=${expiresAt}`);
+    expect(state.written).toContain('Path=/');
+    expect(state.written).toContain('SameSite=Lax');
+    expect(state.written).toContain('Secure');
+    // A positive Max-Age (not a clear) that outlives the token.
+    expect(state.written).toMatch(/Max-Age=\d+/);
+    expect(state.written).not.toContain('Max-Age=0');
+  });
+  it('defaults to the 1h TTL when passed a bare true', () => {
+    const state = stubBrowser('https:');
+    const before = Date.now();
+    setPreviewMarkerCookie(true);
+    const match = state.written.match(new RegExp(`${PREVIEW_MARKER_COOKIE}=(\\d+)`));
+    expect(match).not.toBeNull();
+    expect(Number(match[1])).toBeGreaterThanOrEqual(before + 60 * 60 * 1000 - 5_000);
+  });
+  it('omits Secure on http so it persists in local dev', () => {
+    const state = stubBrowser('http:');
+    setPreviewMarkerCookie(Date.now() + 60 * 60 * 1000);
+    expect(state.written).not.toContain('Secure');
+  });
+  it('clears the marker with Max-Age=0 on exit', () => {
+    const state = stubBrowser('https:');
+    setPreviewMarkerCookie(false);
+    expect(state.written).toContain(`${PREVIEW_MARKER_COOKIE}=`);
+    expect(state.written).toContain('Max-Age=0');
+  });
+});
 describe('previewAuthHeaders', () => {
   it('builds a Bearer header when a token is present', () => {
     expect(previewAuthHeaders('abc')).toEqual({
@@ -93,4 +186,32 @@ describe('previewAuthHeaders', () => {
     expect(previewAuthHeaders(null)).toEqual({});
     expect(previewAuthHeaders('')).toEqual({});
   });
+});
+describe('marker cookie readers (hasPreviewMarkerCookie / getPreviewExpiry)', () => {
+  afterEach(() => vi.unstubAllGlobals());
+  function stubCookies(cookie) {
+    vi.stubGlobal('document', {
+      cookie
+    });
+  }
+  it('reads presence + expiry from an expiry-encoded marker', () => {
+    stubCookies(`a=1; ${PREVIEW_MARKER_COOKIE}=1781700000000; b=2`);
+    expect(hasPreviewMarkerCookie()).toBe(true);
+    expect(getPreviewExpiry()).toBe(1781700000000);
+  });
+  it('treats a legacy `=1` marker as present, expiry 1ms (always expired)', () => {
+    stubCookies(`${PREVIEW_MARKER_COOKIE}=1`);
+    expect(hasPreviewMarkerCookie()).toBe(true);
+    expect(getPreviewExpiry()).toBe(1);
+  });
+  it('reports absent when the marker cookie is missing', () => {
+    stubCookies('a=1; b=2');
+    expect(hasPreviewMarkerCookie()).toBe(false);
+    expect(getPreviewExpiry()).toBeUndefined();
+  });
+  it('returns undefined expiry for a non-numeric marker value', () => {
+    stubCookies(`${PREVIEW_MARKER_COOKIE}=bogus`);
+    expect(hasPreviewMarkerCookie()).toBe(true);
+    expect(getPreviewExpiry()).toBeUndefined();
+  });
 });

package/dist/__tests__/previewState.test.js

@@ -0,0 +1,63 @@
+import { describe, it, expect } from 'vitest';
+import { derivePreviewState, expiresAtFromTokenResult, isSessionExpiredError } from '../components/FontdueAdminToolbar/previewState.js';
+
+// The three-state derivation is the heart of the expired-preview fix, so it's
+// tested in isolation (the full toolbar needs a browser + Relay environment +
+// admin session to render, which isn't available here).
+describe('derivePreviewState', () => {
+  const NOW = 1_000_000;
+  it('is "off" with no marker cookie', () => {
+    expect(derivePreviewState(false, undefined, NOW)).toBe('off');
+    expect(derivePreviewState(false, NOW + 1000, NOW)).toBe('off');
+  });
+  it('is "active" while the marker is present and the token is still valid', () => {
+    expect(derivePreviewState(true, NOW + 1, NOW)).toBe('active');
+  });
+  it('is "expired" once now has reached the stored expiry', () => {
+    expect(derivePreviewState(true, NOW, NOW)).toBe('expired');
+    expect(derivePreviewState(true, NOW - 1, NOW)).toBe('expired');
+  });
+  it('is "expired" for a marker with no/garbled expiry (stale legacy cookie)', () => {
+    expect(derivePreviewState(true, undefined, NOW)).toBe('expired');
+  });
+});
+describe('expiresAtFromTokenResult', () => {
+  it('accepts an epoch-ms number', () => {
+    expect(expiresAtFromTokenResult({
+      expiresAt: 123_456
+    })).toBe(123_456);
+  });
+  it('accepts an ISO-8601 string', () => {
+    const iso = '2030-01-01T00:00:00.000Z';
+    expect(expiresAtFromTokenResult({
+      expiresAt: iso
+    })).toBe(Date.parse(iso));
+  });
+  it('accepts a numeric string', () => {
+    expect(expiresAtFromTokenResult({
+      expiresAt: '987654321'
+    })).toBe(987654321);
+  });
+  it('falls back to now + 1h TTL when the field is absent (backend not yet shipped)', () => {
+    const before = Date.now();
+    expect(expiresAtFromTokenResult({
+      token: 'abc'
+    })).toBeGreaterThanOrEqual(before + 60 * 60 * 1000 - 5_000);
+    expect(expiresAtFromTokenResult(null)).toBeGreaterThanOrEqual(before + 60 * 60 * 1000 - 5_000);
+  });
+});
+describe('isSessionExpiredError', () => {
+  it('matches the resolver’s "Not authorized" message', () => {
+    expect(isSessionExpiredError([{
+      message: 'Not authorized: you must be signed in as an admin.'
+    }])).toBe(true);
+  });
+  it('is false for unrelated errors and empty/absent error lists', () => {
+    expect(isSessionExpiredError([{
+      message: 'Something else failed'
+    }])).toBe(false);
+    expect(isSessionExpiredError([])).toBe(false);
+    expect(isSessionExpiredError(null)).toBe(false);
+    expect(isSessionExpiredError(undefined)).toBe(false);
+  });
+});

package/dist/components/ConfigContext.d.ts

@@ -26,6 +26,7 @@ interface TrackingConfig {
 interface PreviewConfig {
     endpoint?: string;
     revalidateEndpoint?: string;
+    clientSide?: boolean;
 }
 export interface Config {
     form?: FormConfig;
@@ -111,6 +112,7 @@ export declare const makeConfig: (config?: Config) => {
     preview: {
         endpoint: string;
         revalidateEndpoint: string | undefined;
+        clientSide: boolean;
     };
     corsErrorModal: boolean;
     cdnUrl: string;
@@ -188,6 +190,7 @@ declare const _default: React.Context<{
     preview: {
         endpoint: string;
         revalidateEndpoint: string | undefined;
+        clientSide: boolean;
     };
     corsErrorModal: boolean;
     cdnUrl: string;

package/dist/components/ConfigContext.js

@@ -81,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, _config$preview, _config$preview2;
+  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: {
@@ -107,7 +107,8 @@ export const makeConfig = config => {
       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
+      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

package/dist/components/FontdueAdminToolbar/index.js

@@ -5,7 +5,9 @@ import _FontdueAdminToolbarQuery from "../../__generated__/FontdueAdminToolbarQu
 import React, { useContext, useEffect, useState } from 'react';
 import { commitMutation, fetchQuery, graphql, useRelayEnvironment } from 'react-relay';
 import ConfigContext from '../ConfigContext.js';
-import { PREVIEW_ENDPOINT, hasPreviewMarkerCookie } from '../../preview/constants.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
@@ -32,22 +34,30 @@ export default function FontdueAdminToolbar() {
   // 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. Undefined (e.g.
-  // multi-tenant) just drops both gracefully.
-  const fontdueUrl = fontdueBaseUrl();
+  // "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 [previewing, setPreviewing] = 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(() => {
-    setPreviewing(hasPreviewMarkerCookie());
+    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.
@@ -65,16 +75,33 @@ export default function FontdueAdminToolbar() {
     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) {
+  async function startPreview(token, expiresAt) {
     const res = await fetch(previewEndpoint, {
       method: 'POST',
       headers: {
         'content-type': 'application/json'
       },
       body: JSON.stringify({
-        token
+        token,
+        expiresAt
       })
     });
     if (res.ok) {
@@ -88,6 +115,15 @@ export default function FontdueAdminToolbar() {
     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: {},
@@ -96,10 +132,20 @@ export default function FontdueAdminToolbar() {
         const token = (_res$createAdminToken = res.createAdminToken) === null || _res$createAdminToken === void 0 ? void 0 : _res$createAdminToken.token;
         if (errors && errors.length > 0 || !token) {
           setBusy(false);
-          setError('Could not start preview.');
+          // 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);
+        startPreview(token, expiresAtFromTokenResult(res.createAdminToken));
       },
       onError: () => {
         setBusy(false);
@@ -111,12 +157,24 @@ export default function FontdueAdminToolbar() {
     setBusy(true);
     setError(null);
     setNotice(null);
-    await fetch(previewEndpoint, {
-      method: 'DELETE'
-    });
+    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() {
@@ -139,6 +197,7 @@ export default function FontdueAdminToolbar() {
   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"
@@ -148,7 +207,19 @@ export default function FontdueAdminToolbar() {
     className: "fontdue-admin-toolbar__title"
   }, "Fontdue"), /*#__PURE__*/React.createElement("span", {
     className: "fontdue-admin-toolbar__user"
-  }, adminName)), /*#__PURE__*/React.createElement("label", {
+  }, 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",
@@ -158,7 +229,7 @@ export default function FontdueAdminToolbar() {
     "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", {
+  }, 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",
@@ -186,10 +257,35 @@ export default function FontdueAdminToolbar() {
     onClick: () => setOpen(v => !v),
     "aria-expanded": open,
     "data-testid": "fontdue-admin-toolbar-button"
-  }, /*#__PURE__*/React.createElement("span", {
+  }, expired ? /*#__PURE__*/React.createElement(WarningIcon, null) : /*#__PURE__*/React.createElement("span", {
     className: "fontdue-admin-toolbar__dot",
     "aria-hidden": "true"
-  }), "Fontdue", previewing ? ' · previewing' : ''));
+  }), "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

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/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/fontdue.css

@@ -3424,6 +3424,27 @@ textarea.text-field__input {
   font-size: 12px;
 }
 
+.fontdue-admin-toolbar__expired {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.fontdue-admin-toolbar__expired-text {
+  display: flex;
+  align-items: flex-start;
+  gap: 8px;
+  margin: 0;
+  font-size: 12px;
+  color: rgba(255, 255, 255, 0.85);
+}
+
+.fontdue-admin-toolbar__warning-icon {
+  flex: none;
+  margin-top: 1px;
+  color: #e0a23c;
+}
+
 .fontdue-admin-toolbar__error {
   margin: 10px 0 0;
   color: #ff6b6b;

package/dist/preview/constants.d.ts

@@ -1,5 +1,9 @@
 export declare const PREVIEW_TOKEN_COOKIE = "fontdue_preview_token";
 export declare const PREVIEW_MARKER_COOKIE = "fontdue_preview";
 export declare const PREVIEW_ENDPOINT = "/api/preview";
+export declare const DEFAULT_PREVIEW_TTL_MS: number;
+export declare const PREVIEW_MARKER_GRACE_MS: number;
 export declare const PREVIEW_HEADER = "fontdue-preview";
 export declare function hasPreviewMarkerCookie(): boolean;
+export declare function getPreviewExpiry(): number | undefined;
+export declare function setPreviewMarkerCookie(on: boolean | number): void;