fontdue-js 3.0.0-alpha9 → 3.0.1

package/dist/__tests__/previewServer.test.js

@@ -0,0 +1,118 @@
+import { describe, it, expect, beforeEach, vi } from 'vitest';
+import { runWithPreview, isPreviewing, ambientPreviewHeaders } from '../preview/server.js';
+import { createFontdueFetch } from '../server/index.js';
+import { PREVIEW_TOKEN_COOKIE } from '../preview/constants.js';
+beforeEach(() => {
+  vi.unstubAllGlobals();
+});
+function req(token) {
+  return new Request('https://store.test/', {
+    headers: token ? {
+      cookie: `${PREVIEW_TOKEN_COOKIE}=${token}`
+    } : {}
+  });
+}
+describe('runWithPreview', () => {
+  it('passes public (no-token) requests through untouched and cacheable', async () => {
+    const response = await runWithPreview(req(), async () => {
+      expect(isPreviewing()).toBe(false);
+      return new Response('ok', {
+        headers: {
+          'Netlify-CDN-Cache-Control': 'public, durable, s-maxage=300'
+        }
+      });
+    });
+    expect(response.headers.get('Cache-Control')).toBeNull();
+    expect(response.headers.get('Netlify-CDN-Cache-Control')).toBe('public, durable, s-maxage=300');
+  });
+  it('exposes the token in ambient context while previewing', async () => {
+    await runWithPreview(req('tok123'), async () => {
+      expect(isPreviewing()).toBe(true);
+      expect(ambientPreviewHeaders()).toEqual({
+        authorization: 'Bearer tok123'
+      });
+      return new Response('ok');
+    });
+
+    // Context unwinds after the request.
+    expect(isPreviewing()).toBe(false);
+    expect(ambientPreviewHeaders()).toEqual({});
+  });
+  it('forces preview responses out of any shared/CDN cache', async () => {
+    const response = await runWithPreview(req('tok123'), async () => new Response('secret', {
+      headers: {
+        'Netlify-CDN-Cache-Control': 'public, durable, s-maxage=31536000',
+        'CDN-Cache-Control': 'public, s-maxage=300',
+        'Cache-Control': 'public, max-age=0, must-revalidate'
+      }
+    }));
+    expect(response.headers.get('Cache-Control')).toBe('private, no-store');
+    expect(response.headers.get('Netlify-CDN-Cache-Control')).toBeNull();
+    expect(response.headers.get('CDN-Cache-Control')).toBeNull();
+  });
+  it('isolates concurrent preview contexts (no cross-request leak)', async () => {
+    const seen = {};
+    await Promise.all([runWithPreview(req('tokA'), async () => {
+      await new Promise(r => setTimeout(r, 15));
+      seen.a = ambientPreviewHeaders().authorization;
+      return new Response('a');
+    }), runWithPreview(req('tokB'), async () => {
+      seen.b = ambientPreviewHeaders().authorization;
+      return new Response('b');
+    }), runWithPreview(req(), async () => {
+      seen.public = ambientPreviewHeaders().authorization;
+      return new Response('public');
+    })]);
+    expect(seen.a).toBe('Bearer tokA');
+    expect(seen.b).toBe('Bearer tokB');
+    expect(seen.public).toBeUndefined();
+  });
+});
+describe('createFontdueFetch + ambient preview', () => {
+  function mockFetch() {
+    const fetchMock = vi.fn(async () => ({
+      status: 200,
+      json: async () => ({
+        data: {}
+      })
+    }));
+    vi.stubGlobal('fetch', fetchMock);
+    return fetchMock;
+  }
+  it('a module-level fetcher forwards the ambient token, no per-call plumbing', async () => {
+    const fetchMock = mockFetch();
+    const fetchGraphql = createFontdueFetch({
+      url: 'https://acme.fontdue.com'
+    });
+    await runWithPreview(req('admin-tok'), async () => {
+      await fetchGraphql('Q', 'query Q { __typename }');
+      return new Response('ok');
+    });
+    const init = fetchMock.mock.calls[0][1];
+    expect(init.headers.authorization).toBe('Bearer admin-tok');
+  });
+  it('does not forward a token for public requests', async () => {
+    const fetchMock = mockFetch();
+    const fetchGraphql = createFontdueFetch({
+      url: 'https://acme.fontdue.com'
+    });
+    await fetchGraphql('Q', 'query Q { __typename }');
+    const init = fetchMock.mock.calls[0][1];
+    expect(init.headers.authorization).toBeUndefined();
+  });
+  it('explicit per-fetcher headers override the ambient context', async () => {
+    const fetchMock = mockFetch();
+    const fetchGraphql = createFontdueFetch({
+      url: 'https://acme.fontdue.com',
+      headers: {
+        authorization: 'Bearer explicit'
+      }
+    });
+    await runWithPreview(req('ambient-tok'), async () => {
+      await fetchGraphql('Q', 'query Q { __typename }');
+      return new Response('ok');
+    });
+    const init = fetchMock.mock.calls[0][1];
+    expect(init.headers.authorization).toBe('Bearer explicit');
+  });
+});

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/__tests__/serverConfig.test.js

@@ -0,0 +1,62 @@
+import { describe, it, expect, beforeEach, afterEach, vi } from 'vitest';
+
+// The render-scoped slot and the ambient resolver are anchored on globalThis so
+// they survive this module being bundled into more than one Next.js server
+// chunk (the app/provider chunk vs. a per-embed chunk), which would otherwise
+// give each chunk its own copy of the module-level state. Re-importing the
+// module after vi.resetModules() faithfully simulates that second chunk: a
+// fresh module instance with its own scope but the same globalThis.
+const STORE_KEY = '__fontdueServerConfigStore__';
+function clearStore() {
+  delete globalThis[STORE_KEY];
+}
+beforeEach(() => {
+  vi.resetModules();
+  clearStore();
+});
+afterEach(clearStore);
+describe('serverConfig store (chunk-duplication safety, FD-712)', () => {
+  it('shares the ambient resolver across module instances', async () => {
+    var _await$a$resolveFontd, _await$a$resolveFontd2, _await$b$resolveFontd, _await$b$resolveFontd2;
+    // First "chunk": register a resolver (what fontdue-js/next does when
+    // <FontdueProvider> mounts in single-tenant mode).
+    const a = await import("../relay/serverConfig.js");
+    a.registerAmbientConfigResolver(async () => ({
+      url: 'https://acme.fontdue.com',
+      headers: {
+        authorization: 'Bearer admin-tok'
+      }
+    }));
+    expect((_await$a$resolveFontd = await a.resolveFontdueServerConfig()) === null || _await$a$resolveFontd === void 0 ? void 0 : (_await$a$resolveFontd2 = _await$a$resolveFontd.headers) === null || _await$a$resolveFontd2 === void 0 ? void 0 : _await$a$resolveFontd2.authorization).toBe('Bearer admin-tok');
+
+    // Second "chunk": a fresh module instance. Before the fix its module-level
+    // `ambientResolver` was undefined here, so an embed preloading from this
+    // chunk fetched without the preview token and a hidden-font reveal failed.
+    vi.resetModules();
+    const b = await import("../relay/serverConfig.js");
+    expect(b).not.toBe(a); // genuinely a re-evaluated module
+    expect((_await$b$resolveFontd = await b.resolveFontdueServerConfig()) === null || _await$b$resolveFontd === void 0 ? void 0 : (_await$b$resolveFontd2 = _await$b$resolveFontd.headers) === null || _await$b$resolveFontd2 === void 0 ? void 0 : _await$b$resolveFontd2.authorization).toBe('Bearer admin-tok');
+  });
+  it('reuses one shared store object across re-imports', async () => {
+    const a = await import("../relay/serverConfig.js");
+    // The store is created lazily on first use, not on import.
+    a.registerAmbientConfigResolver(() => undefined);
+    const first = globalThis[STORE_KEY];
+    expect(first).toBeDefined();
+    vi.resetModules();
+    const b = await import("../relay/serverConfig.js");
+    await b.resolveFontdueServerConfig();
+    const second = globalThis[STORE_KEY];
+
+    // Same store (slot factory + resolver), not a per-instance copy — so the
+    // React.cache-backed slot multi-tenant uses (setFontdueServerConfig via
+    // __prepareFontdueRender) is one shared cell every chunk reads/writes.
+    expect(second).toBe(first);
+  });
+  it('starts with no resolver (resolution unchanged until something registers)', async () => {
+    const {
+      resolveFontdueServerConfig
+    } = await import("../relay/serverConfig.js");
+    expect(await resolveFontdueServerConfig()).toBeUndefined();
+  });
+});

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

@@ -1,7 +1,7 @@
 import React from 'react';
 import { BuyButtonIDQuery } from '../../__generated__/BuyButtonIDQuery.graphql.js';
 import { BuyButtonSlugQuery } from '../../__generated__/BuyButtonSlugQuery.graphql.js';
-import { SerializablePreloadedQuery } from '../../relay/loadSerializableQuery.js';
+import { SerializablePreloadedQuery, type LoadQueryOptions } from '../../relay/loadSerializableQuery.js';
 import { Config } from '../ConfigContext.js';
 export interface BuyButton_props {
     collectionName?: string;
@@ -15,7 +15,7 @@ export type LoadBuyButtonQueryVariables = {
     collectionId?: never;
     collectionSlug: string;
 };
-export declare function loadBuyButtonQuery(variables: LoadBuyButtonQueryVariables): Promise<BuyButtonPreloadedQuery>;
+export declare function loadBuyButtonQuery(variables: LoadBuyButtonQueryVariables, options?: LoadQueryOptions): Promise<BuyButtonPreloadedQuery>;
 export declare function BuyButtonPreloadedIDQueryRenderer({ preloadedQuery, ...rest }: BuyButton_props & {
     preloadedQuery: SerializablePreloadedQuery<BuyButtonIDQuery>;
 }): React.JSX.Element;

package/dist/components/BuyButton/index.js

@@ -57,16 +57,16 @@ function BuyButtonComponent(_ref) {
 }
 const idQuery = (_BuyButtonIDQuery.hash && _BuyButtonIDQuery.hash !== "4fbf1dbf9e6c530a5d38c697b174d8b0" && console.error("The definition of 'BuyButtonIDQuery' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _BuyButtonIDQuery);
 const slugQuery = (_BuyButtonSlugQuery.hash && _BuyButtonSlugQuery.hash !== "6e750adea09698f7cb61f435cd88fd26" && console.error("The definition of 'BuyButtonSlugQuery' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _BuyButtonSlugQuery);
-export async function loadBuyButtonQuery(variables) {
+export async function loadBuyButtonQuery(variables, options) {
   if (variables.collectionId) {
     return loadSerializableQuery(BuyButtonIDQueryNode, {
       collectionId: variables.collectionId
-    });
+    }, options);
   }
   if (variables.collectionSlug) {
     return loadSerializableQuery(BuyButtonSlugQueryNode, {
       collectionSlug: variables.collectionSlug
-    });
+    }, options);
   }
   throw new Error('loadBuyButtonQuery expected either a collectionId or collectionSlug');
 }

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { SerializablePreloadedQuery } from '../../relay/loadSerializableQuery.js';
+import { SerializablePreloadedQuery, type LoadQueryOptions } from '../../relay/loadSerializableQuery.js';
 import { CharacterViewerIDQuery } from '../../__generated__/CharacterViewerIDQuery.graphql.js';
 import { CharacterViewerSlugQuery } from '../../__generated__/CharacterViewerSlugQuery.graphql.js';
 import { Config } from '../ConfigContext.js';
@@ -13,7 +13,7 @@ export type LoadCharacterViewerQueryVariables = {
     collectionId?: never;
     collectionSlug: string;
 };
-export declare function loadCharacterViewerQuery(variables: LoadCharacterViewerQueryVariables): Promise<CharacterViewerPreloadedQuery>;
+export declare function loadCharacterViewerQuery(variables: LoadCharacterViewerQueryVariables, options?: LoadQueryOptions): Promise<CharacterViewerPreloadedQuery>;
 export declare function CharacterViewerPreloadedIDQueryRenderer({ preloadedQuery, ...rest }: CharacterViewer_props & {
     preloadedQuery: SerializablePreloadedQuery<CharacterViewerIDQuery>;
 }): React.JSX.Element | null;

package/dist/components/CharacterViewer/index.js

@@ -6,7 +6,7 @@ import _CharacterViewerIDQuery from "../../__generated__/CharacterViewerIDQuery.
 import _CharacterViewer_style from "../../__generated__/CharacterViewer_style.graphql.js";
 import _CharacterViewer_collection from "../../__generated__/CharacterViewer_collection.graphql.js";
 import _CharacterViewer_family from "../../__generated__/CharacterViewer_family.graphql.js";
-import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import React, { useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react';
 import { fetchQuery, graphql, useFragment, useLazyLoadQuery, usePreloadedQuery, useRefetchableFragment, useRelayEnvironment } from 'react-relay';
 import useResizeObserver from '../../hooks/useResizeObserver.js';
 import retryImport from '../../retryImport.js';
@@ -20,6 +20,8 @@ import StyleSelect from './StyleSelect.js';
 import Checkbox from '../Checkbox/index.js';
 import CharacterViewerStyleRefetchQueryNode from '../../__generated__/CharacterViewerStyleRefetchQuery.graphql.js';
 import { EnsureFontdueContext } from '../FontdueContextProvider/index.js';
+import ConfigContext from '../ConfigContext.js';
+import { unicodeNamesUrl } from '../../data/unicodeNamesUrl.js';
 function useSize() {
   const ref = useRef(null);
   const [size, setSize] = React.useState();
@@ -74,20 +76,27 @@ function GlyphMeta(_ref) {
     onChange: e => setFeaturesChecked(e.target.checked)
   }), glyph.features.join(', ')))));
 }
+
+// Glyph unicode names (~1.2 MB) are fetched lazily from the Fontdue CDN rather
+// than bundled — see data/unicodeNamesUrl.ts. Purely cosmetic (the “Unicode
+// name” label), so a failed fetch degrades silently. `retryImport` is reused
+// here as a generic retry wrapper for transient network blips.
 function useUnicodeData() {
+  const config = useContext(ConfigContext);
+  const url = unicodeNamesUrl(config.cdnUrl);
   const [data, setData] = useState();
   useEffect(() => {
-    function fetchData() {
-      retryImport(() => import('../../data/unicodeData.js')).then(data => {
-        if (!ignore) setData(data.default);
-      }).catch(() => {});
-    }
     let ignore = false;
-    fetchData();
+    retryImport(() => fetch(url).then(res => {
+      if (!res.ok) throw new Error(`unicode names request failed: ${res.status}`);
+      return res.json();
+    })).then(json => {
+      if (!ignore) setData(json);
+    }).catch(() => {});
     return () => {
       ignore = true;
     };
-  }, []);
+  }, [url]);
   return data;
 }
 function compareGlyphs(a, b) {
@@ -416,16 +425,16 @@ function CharacterViewerComponent(_ref3) {
 }
 const idQuery = (_CharacterViewerIDQuery.hash && _CharacterViewerIDQuery.hash !== "f90b09a4df6d95307b0a5d5fda487cdc" && console.error("The definition of 'CharacterViewerIDQuery' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _CharacterViewerIDQuery);
 const slugQuery = (_CharacterViewerSlugQuery.hash && _CharacterViewerSlugQuery.hash !== "afa08a8f050e0434308892fea6e3c267" && console.error("The definition of 'CharacterViewerSlugQuery' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _CharacterViewerSlugQuery);
-export async function loadCharacterViewerQuery(variables) {
+export async function loadCharacterViewerQuery(variables, options) {
   if (variables.collectionId) {
     return loadSerializableQuery(CharacterViewerIDQueryNode, {
       collectionId: variables.collectionId
-    });
+    }, options);
   }
   if (variables.collectionSlug) {
     return loadSerializableQuery(CharacterViewerSlugQueryNode, {
       collectionSlug: variables.collectionSlug
-    });
+    }, options);
   }
   throw new Error('loadCharacterViewerQuery expected either collectionId or collectionSlug');
 }

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/FontdueAdminToolbar/index.d.ts

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