fontdue-js 3.0.0-alpha8 → 3.0.0-alpha9

package/CHANGELOG.md

@@ -1,3 +1,12 @@
+## 2.28.0
+
+- Checkout now captures the buyer's **analytics consent and ad attribution** on the order. When the cart or store-modal checkout opens, fontdue-js sends the consent-banner state, anonymous ID, Meta browser IDs (the `_fbp`/`_fbc` cookies), and the page URL to the server, where they're stored on the order. This lets Fontdue emit a server-side *purchase* conversion event (Facebook Conversions API, Google Ads) when the order completes — completion happens in a Stripe webhook, outside the browser — while respecting the buyer's cookie-consent choice: if consent was declined, no identifiers are sent and nothing is forwarded to ad platforms. The call is fire-and-forget and never affects checkout.
+
+## 2.27.0
+
+- The `TypeTester` `truncate` option now accepts a **number** to cap the sample paragraph at N lines (in addition to `false` = off and `true` = 1 line). Truncation is now ascender/descender-safe at any line-height — it reads the font's vertical metrics so accents and descenders are never clipped — and flows the clipped text into columns, so multi-column truncated specimens render correctly and side-by-side testers keep their toolbars aligned.
+- The `TypeTester` **family selector now lazy-loads its data**. The family list is fetched on first dropdown open (shared once per page) and per-family styles load on demand, instead of fetching the whole font library up front. This substantially speeds up the initial render of pages with type testers, especially with several standalone testers. The dropdown shows a “Loading…” state while data loads.
+
 ## 2.26.1
 
 - Fixed a jitter in the `TypeTester` variable-font axis sliders: dragging a slider no longer shifts the handle position as the instance name and value beside it change width. The instance name now settles shortly after dragging stops, and the value reserves a fixed width for its range.

package/README.md

@@ -53,7 +53,18 @@ The shape of step 3 and 4 is the only thing that changes between frameworks.
 <details>
 <summary><b>Next.js (App Router)</b></summary>
 
-No Vite plugin needed. The simplest setup omits the layout preload — with React Server Components, each fontdue-js component preloads its own query internally on the server and streams to the client.
+No Vite plugin needed — wrap your Next config with [`withFontdue`](#nextjs-adapter) instead:
+
+```js
+// next.config.mjs
+import { withFontdue } from "fontdue-js/next/config";
+
+export default withFontdue({
+  // your Next config
+});
+```
+
+The simplest setup omits the layout preload — with React Server Components, each fontdue-js component preloads its own query internally on the server and streams to the client.
 
 ```tsx
 // app/layout.tsx
@@ -84,6 +95,8 @@ export default function FontPage() {
 }
 ```
 
+Beyond the components, Next.js projects get a few extra entry points — config wrapping, cache revalidation, and helpers for your own GraphQL fetches. See [Next.js adapter](#nextjs-adapter).
+
 Example repo: [`fontdue/fontdue-example-next`](https://github.com/fontdue/fontdue-example-next)
 
 </details>
@@ -356,6 +369,76 @@ export default function App() {
 
 </details>
 
+## Next.js adapter
+
+Next.js App Router projects get a few extra entry points beyond the components. The [example repo](https://github.com/fontdue/fontdue-example-next) wires up all of them.
+
+### `withFontdue` — next.config wrapper
+
+```js
+// next.config.mjs
+import { withFontdue } from "fontdue-js/next/config";
+
+export default withFontdue({
+  // your Next config
+});
+```
+
+What it installs:
+
+- **Image settings** — `images.remotePatterns` entries for Fontdue's image hosts (plus `dangerouslyAllowSVG`, since font specimens are often SVGs), merged with your own `images` config.
+- **Correct 404 statuses** — Next's streamed metadata locks in a `200` response before a `notFound()` thrown during `generateMetadata` can take effect ([vercel/next.js#82041](https://github.com/vercel/next.js/issues/82041)). `withFontdue` sets `htmlLimitedBots` to match every user agent so metadata rendering blocks the response and missing pages come out as real 404s.
+
+The rest of your config — `rewrites` included — passes through unchanged.
+
+#### Optional: image optimization on Cloudflare
+
+If you have a Cloudflare zone with [image transformations](https://developers.cloudflare.com/images/transform-images/) enabled, set:
+
+```shell
+NEXT_PUBLIC_FONTDUE_IMAGE_HOST=img.your-domain.com
+NEXT_PUBLIC_FONTDUE_IMAGE_ORIGINS=cdn.fontdue.com
+```
+
+`next/image` optimization then moves to the Cloudflare edge, and your deployment needs neither the `/_next/image` endpoint nor sharp. `NEXT_PUBLIC_FONTDUE_IMAGE_ORIGINS` (comma-separated hostnames) should mirror the transformation host's allowed source origins — sources on other hosts are served as originals rather than as transform URLs Cloudflare would refuse. Both variables must be present when `next build` runs (the loader is inlined into the client bundle), not just at serve time.
+
+### Updating content: `/api/revalidate`
+
+fontdue-js's server-side fetches are cached by Next and tagged `graphql`. Re-export the deploy-hook route handler:
+
+```ts
+// app/api/revalidate/route.ts
+export { POST } from "fontdue-js/next/revalidate";
+```
+
+and set the Deploy hook URL in your Fontdue admin (Settings → Website settings) to `https://your-site.example/api/revalidate`. Fontdue calls it whenever your site's content changes, purging everything tagged `graphql` so the next request renders fresh.
+
+fontdue-js's own server-side fetches opt into Next's data cache (and the `graphql` tag) automatically — static pages revalidated by the deploy hook is the intended way to run a Fontdue site, not dynamic rendering. Give your own fetches the same treatment; `currentFontdueEndpoint()` below shows how.
+
+### Your own GraphQL fetches
+
+`currentFontdueEndpoint()` (from `fontdue-js/next`) describes the endpoint your own server-side [GraphQL](https://docs.fontdue.com/graphql-api) fetches should use — the base origin, required headers, and the cache tags that tie them into `/api/revalidate`:
+
+```ts
+import { currentFontdueEndpoint } from "fontdue-js/next";
+
+export async function fetchGraphql(query: string, variables?: unknown) {
+  const endpoint = currentFontdueEndpoint();
+  const response = await fetch(`${endpoint.origin}/graphql`, {
+    method: "POST",
+    body: JSON.stringify({ query, variables }),
+    headers: { "content-type": "application/json", ...endpoint.headers },
+    // Cache explicitly (Next 15 doesn't cache fetch by default), tagged so
+    // the deploy hook purges this too.
+    cache: "force-cache",
+    next: { tags: endpoint.tags },
+  });
+  return (await response.json()).data;
+}
+```
+
+The shape is exported as `type FontdueEndpoint`.
+
 ## UI config
 
 Most components accept a `config` object that controls UI behavior — type-tester options (`selectable`, `priceBar`, size ranges, OpenType-feature UI…), store-modal layout, form styling, analytics tracking, and more. See the [full config reference](https://docs.fontdue.com/fontduejs#b3dec49aa08240bba2b4c71a67c08333).

package/dist/__generated__/orderTrackingUpdateOrderTrackingMutation.graphql.js

@@ -1,9 +1,3 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
 /**
  * @generated SignedSource<<017a8a724b3a0fd0918153ce04d07f68>>
  * @lightSyntaxTransform
@@ -68,5 +62,4 @@ const node = function () {
   };
 }();
 node.hash = "d59a127a7f140424f507ae549731bac7";
-var _default = node;
-exports.default = _default;
+export default node;

package/dist/__tests__/networkFetch.test.js

@@ -0,0 +1,66 @@
+import { describe, it, expect, beforeEach, vi } from 'vitest';
+// environment.ts reads env at module load, so stub env and re-import fresh.
+beforeEach(() => {
+  vi.resetModules();
+  vi.unstubAllEnvs();
+  vi.unstubAllGlobals();
+});
+const request = {
+  name: 'TestQuery',
+  text: 'query TestQuery { viewer { id } }'
+};
+describe('createNetworkFetch (server)', () => {
+  it('opts fetches into the Next data cache, tagged for revalidation', async () => {
+    vi.stubEnv('FONTDUE_URL', 'https://acme.fontdue.com');
+    const fetchMock = vi.fn(async () => ({
+      json: async () => ({
+        data: {}
+      })
+    }));
+    vi.stubGlobal('fetch', fetchMock);
+    const {
+      createNetworkFetch
+    } = await import("../relay/environment.js");
+    await createNetworkFetch()(request, {});
+    expect(fetchMock).toHaveBeenCalledTimes(1);
+    const [url, options] = fetchMock.mock.calls[0];
+    expect(url).toBe('https://acme.fontdue.com/graphql?queryName=TestQuery');
+    // Without an explicit cache option Next 15 treats the fetch as no-store
+    // and silently makes every page fully dynamic — the static + revalidate
+    // pattern depends on this.
+    expect(options.cache).toBe('force-cache');
+    expect(options.next.tags).toContain('graphql');
+    expect(options.next.tags).toContain('operation:TestQuery');
+  });
+  it('applies the per-render server config tags and headers', async () => {
+    vi.stubEnv('FONTDUE_URL', 'https://acme.fontdue.com');
+    const fetchMock = vi.fn(async () => ({
+      json: async () => ({
+        data: {}
+      })
+    }));
+    vi.stubGlobal('fetch', fetchMock);
+
+    // React.cache doesn't memoize outside a React render, so the store is
+    // mocked rather than set through setFontdueServerConfig.
+    vi.doMock('../relay/serverConfig', async importActual => ({
+      ...(await importActual()),
+      getFontdueServerConfig: () => ({
+        url: 'http://app:4000',
+        headers: {
+          'x-forwarded-host': 'acme.fontdue.com'
+        },
+        cacheTags: ['graphql:acme.fontdue.com']
+      })
+    }));
+    const {
+      createNetworkFetch
+    } = await import("../relay/environment.js");
+    await createNetworkFetch()(request, {});
+    vi.doUnmock('../relay/serverConfig');
+    const [url, options] = fetchMock.mock.calls[0];
+    expect(url).toBe('http://app:4000/graphql?queryName=TestQuery');
+    expect(options.headers['x-forwarded-host']).toBe('acme.fontdue.com');
+    expect(options.next.tags).toContain('graphql:acme.fontdue.com');
+  });
+});

package/dist/__tests__/nextAdapter.test.js

@@ -1,4 +1,7 @@
 import { describe, it, expect, beforeEach, vi } from 'vitest';
+import fs from 'node:fs';
+import os from 'node:os';
+import path from 'node:path';
 
 // The next adapter modules read process.env at module load, so each test
 // group stubs the env and re-imports them fresh.
@@ -15,10 +18,19 @@ const revalidateTag = vi.fn();
 vi.mock('next/cache', () => ({
   revalidateTag: tag => revalidateTag(tag)
 }));
+
+// Next's notFound() throws a sentinel the framework catches; the mock does
+// the same so tests can assert on it.
+vi.mock('next/navigation', () => ({
+  notFound: () => {
+    throw new Error('NEXT_NOT_FOUND');
+  }
+}));
 beforeEach(() => {
   vi.resetModules();
   revalidateTag.mockClear();
   vi.unstubAllEnvs();
+  vi.restoreAllMocks();
 });
 function stubSingleTenant() {
   let url = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'https://acme.fontdue.com';
@@ -59,6 +71,7 @@ describe('fontdueEndpoint', () => {
       fontdueEndpoint
     } = await importTenant();
     expect(fontdueEndpoint('acme.fontdue.com')).toEqual({
+      domain: 'acme.fontdue.com',
       origin: 'https://acme.fontdue.com',
       headers: {},
       tags: ['graphql', 'graphql:acme.fontdue.com']
@@ -81,6 +94,7 @@ describe('fontdueEndpoint', () => {
       fontdueEndpoint
     } = await importTenant();
     expect(fontdueEndpoint('acme.fontdue.com')).toEqual({
+      domain: 'acme.fontdue.com',
       origin: 'http://app:4000',
       headers: {
         'x-forwarded-host': 'acme.fontdue.com',
@@ -147,11 +161,107 @@ describe('configureFontdueRender', () => {
         'x-forwarded-host': 'acme.fontdue.com',
         'x-fontdue-proxy-secret': 's3cret'
       },
-      cacheTags: ['graphql:acme.fontdue.com']
+      cacheTags: ['graphql:acme.fontdue.com'],
+      domain: 'acme.fontdue.com'
     });
   });
 });
+describe('prepareFontdueRender', () => {
+  const props = params => ({
+    params: Promise.resolve(params)
+  });
+  it('configures the render and returns the endpoint', async () => {
+    stubMultiTenant({
+      origin: 'http://app:4000'
+    });
+    const {
+      prepareFontdueRender
+    } = await importTenant();
+    const endpoint = await prepareFontdueRender(props({
+      domain: 'acme.fontdue.com',
+      slug: 'sans'
+    }));
+    expect(endpoint.origin).toBe('http://app:4000');
+    expect(endpoint.tags).toContain('graphql:acme.fontdue.com');
+  });
+  it('404s invalid or missing domains', async () => {
+    stubMultiTenant();
+    const {
+      prepareFontdueRender
+    } = await importTenant();
+    await expect(prepareFontdueRender(props({
+      domain: 'not a domain'
+    }))).rejects.toThrow('NEXT_NOT_FOUND');
+    await expect(prepareFontdueRender(props({
+      slug: 'sans'
+    }))).rejects.toThrow('NEXT_NOT_FOUND');
+  });
+});
+describe('currentFontdueEndpoint', () => {
+  it('multi-tenant: throws when no render config was set', async () => {
+    stubMultiTenant({
+      origin: 'http://app:4000'
+    });
+    const {
+      currentFontdueEndpoint
+    } = await importTenant();
+    expect(() => currentFontdueEndpoint()).toThrow(/prepareFontdueRender/);
+  });
+  it('single-tenant: derives the endpoint from NEXT_PUBLIC_FONTDUE_URL', async () => {
+    stubSingleTenant('https://acme.fontdue.com');
+    const {
+      currentFontdueEndpoint
+    } = await importTenant();
+    expect(currentFontdueEndpoint()).toEqual({
+      domain: 'acme.fontdue.com',
+      origin: 'https://acme.fontdue.com',
+      headers: {},
+      tags: ['graphql', 'graphql:acme.fontdue.com']
+    });
+  });
+  it('uses the render-configured domain when set', async () => {
+    stubMultiTenant({
+      origin: 'http://app:4000'
+    });
+    vi.doMock('../relay/serverConfig', async importActual => ({
+      ...(await importActual()),
+      getFontdueServerConfig: () => ({
+        domain: 'acme.fontdue.com'
+      })
+    }));
+    const {
+      currentFontdueEndpoint
+    } = await importTenant();
+    expect(currentFontdueEndpoint().headers['x-forwarded-host']).toBe('acme.fontdue.com');
+    vi.doUnmock('../relay/serverConfig');
+  });
+});
+describe('generateStaticParams', () => {
+  it('returns no build-time params (everything renders on demand)', async () => {
+    stubMultiTenant();
+    const {
+      generateStaticParams
+    } = await importTenant();
+    await expect(generateStaticParams()).resolves.toEqual([]);
+  });
+});
+
+// withFontdue detects the route-tree shape from the working directory; give
+// it one with or without src/app/[domain].
+function mockAppDir(_ref) {
+  let {
+    domainTree
+  } = _ref;
+  const dir = fs.mkdtempSync(path.join(os.tmpdir(), 'fontdue-app-'));
+  fs.mkdirSync(path.join(dir, domainTree ? 'src/app/[domain]' : 'src/app'), {
+    recursive: true
+  });
+  vi.spyOn(process, 'cwd').mockReturnValue(dir);
+}
 describe('withFontdue', () => {
+  beforeEach(() => mockAppDir({
+    domainTree: true
+  }));
   it('throws when neither mode is configured', async () => {
     vi.stubEnv('NEXT_PUBLIC_FONTDUE_URL', '');
     vi.stubEnv('FONTDUE_MULTI_TENANT', '');
@@ -267,6 +377,36 @@ describe('withFontdue', () => {
       htmlLimitedBots: /Googlebot/
     }).htmlLimitedBots).toEqual(/Googlebot/);
   });
+  it('single-tenant flat tree: installs no tenant rewrites', async () => {
+    mockAppDir({
+      domainTree: false
+    });
+    stubSingleTenant('https://acme.fontdue.com');
+    const {
+      withFontdue
+    } = await importConfig();
+    const userRule = {
+      source: '/old',
+      destination: '/new'
+    };
+    const rewrites = await withFontdue({
+      rewrites: async () => ({
+        beforeFiles: [userRule]
+      })
+    }).rewrites();
+    expect(rewrites.beforeFiles).toEqual([userRule]);
+    expect(rewrites.afterFiles).toEqual([]);
+  });
+  it('multi-tenant flat tree: refuses to start', async () => {
+    mockAppDir({
+      domainTree: false
+    });
+    stubMultiTenant();
+    const {
+      withFontdue
+    } = await importConfig();
+    expect(() => withFontdue({})).toThrow(/\[domain\]/);
+  });
 });
 describe('revalidate POST', () => {
   it('multi-tenant: purges only the tenant tag', async () => {

package/dist/components/Cart/CartOrder.js

@@ -4,7 +4,7 @@ import _CartOrderRemoveDiscountMutation from "../../__generated__/CartOrderRemov
 import _CartOrderUpdateMutation from "../../__generated__/CartOrderUpdateMutation.graphql.js";
 import _CartOrder_UpdateErrors from "../../__generated__/CartOrder_UpdateErrors.graphql.js";
 import _CartOrderCompleteOrderMutation from "../../__generated__/CartOrderCompleteOrderMutation.graphql.js";
-import React, { Fragment, useRef, useState } from 'react';
+import React, { Fragment, useEffect, useRef, useState } from 'react';
 import { commitMutation, graphql, useFragment, useRelayEnvironment } from 'react-relay';
 import Checkout from './Checkout.js';
 import CheckoutSteps from './CheckoutSteps.js';
@@ -21,6 +21,7 @@ import { textVariablesAllHaveText } from './utils.js';
 import { useStripe } from '@stripe/react-stripe-js';
 import { useDispatch } from 'react-redux';
 import CartState from './CartState.js';
+import { sendOrderTracking } from './orderTracking.js';
 
 // note here we're only updating the order (by id).
 // careful not to update the current customer's reference
@@ -44,6 +45,13 @@ const CartOrder = _ref => {
   const environment = useRelayEnvironment();
   const stripe = useStripe();
   const dispatch = useDispatch();
+
+  // Capture analytics consent + attribution on the order for the purchase
+  // event the server emits on completion (from a Stripe webhook, where no
+  // browser context exists).
+  useEffect(() => {
+    if (open) sendOrderTracking(environment);
+  }, [open, environment]);
   const order = useFragment((_CartOrder_order.hash && _CartOrder_order.hash !== "25ef000c40000c4f76f973ac6ac7f593" && console.error("The definition of 'CartOrder_order' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _CartOrder_order), orderKey);
   const viewer = useFragment((_CartOrder_viewer.hash && _CartOrder_viewer.hash !== "8cf5ab5a33a474483a6c231cc44b0df1" && console.error("The definition of 'CartOrder_viewer' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _CartOrder_viewer), viewerKey);
 

package/dist/components/Cart/orderTracking.js

@@ -1,13 +1,6 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.sendOrderTracking = sendOrderTracking;
-var _orderTrackingUpdateOrderTrackingMutation2 = _interopRequireDefault(require("../../__generated__/orderTrackingUpdateOrderTrackingMutation.graphql"));
-var _reactRelay = require("react-relay");
-var _consent = require("../ConsentBanner/consent");
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+import _orderTrackingUpdateOrderTrackingMutation from "../../__generated__/orderTrackingUpdateOrderTrackingMutation.graphql.js";
+import { commitMutation, graphql } from 'react-relay';
+import { hasConsent, getClientAnonymousId } from '../ConsentBanner/consent.js';
 function readCookie(name) {
   const match = document.cookie.match(new RegExp('(?:^|;\\s*)' + name + '=([^;]*)'));
   return match ? decodeURIComponent(match[1]) : undefined;
@@ -21,14 +14,14 @@ function readCookie(name) {
  *
  * Fire-and-forget: tracking must never break checkout.
  */
-function sendOrderTracking(environment) {
+export function sendOrderTracking(environment) {
   try {
-    (0, _reactRelay.commitMutation)(environment, {
-      mutation: (_orderTrackingUpdateOrderTrackingMutation2.default.hash && _orderTrackingUpdateOrderTrackingMutation2.default.hash !== "d59a127a7f140424f507ae549731bac7" && console.error("The definition of 'orderTrackingUpdateOrderTrackingMutation' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _orderTrackingUpdateOrderTrackingMutation2.default),
+    commitMutation(environment, {
+      mutation: (_orderTrackingUpdateOrderTrackingMutation.hash && _orderTrackingUpdateOrderTrackingMutation.hash !== "d59a127a7f140424f507ae549731bac7" && console.error("The definition of 'orderTrackingUpdateOrderTrackingMutation' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _orderTrackingUpdateOrderTrackingMutation),
       variables: {
         input: {
-          analyticsConsent: (0, _consent.hasConsent)('analytics'),
-          anonymousId: (0, _consent.getClientAnonymousId)(),
+          analyticsConsent: hasConsent('analytics'),
+          anonymousId: getClientAnonymousId(),
           fbp: readCookie('_fbp'),
           fbc: readCookie('_fbc'),
           url: window.location.href

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/TypeTester/index.js

@@ -142,12 +142,14 @@ const TypeTester = _ref => {
   }, _ref3 => {
     let {
       loaded,
-      style
+      style,
+      verticalMetrics
     } = _ref3;
     if (loaded) {
       return /*#__PURE__*/React.createElement(TypeTesterContent, _extends({}, props, {
         ref: contentRef,
         fontStyles: style,
+        verticalMetrics: verticalMetrics,
         truncate: config.truncate,
         direction: props.direction,
         min: config.size.min,

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

@@ -1,6 +1,7 @@
 import { EditorState } from 'draft-js';
 import { Alignment } from './types.js';
 import { VariableSettings } from '../../utils.js';
+import { VerticalMetrics } from '../useFontStyle.js';
 export type ColumnsConfig = false | {
     count: 'auto' | number;
     width: string;
@@ -21,13 +22,14 @@ export interface UseTypeTesterStylerProps {
     focused: boolean;
     truncate: boolean | number;
     fontStyles: React.CSSProperties;
+    verticalMetrics?: VerticalMetrics | null;
     content: EditorState;
     contentEdited: boolean;
     alignment: Alignment;
     variableSettings: VariableSettings | null;
     columns: ColumnsConfig;
 }
-declare const useTypeTesterStyler: ({ size, autofit, autofitOnChange, features, setSize, min, max, truncate, focused, lineHeight, letterSpacing, fontStyles, content, contentEdited, alignment, variableSettings, columns, }: UseTypeTesterStylerProps) => {
+declare const useTypeTesterStyler: ({ size, autofit, autofitOnChange, features, setSize, min, max, truncate, focused, lineHeight, letterSpacing, fontStyles, verticalMetrics, content, contentEdited, alignment, variableSettings, columns, }: UseTypeTesterStylerProps) => {
     ref: import("react").RefObject<HTMLDivElement | null>;
     style: import("react").CSSProperties;
 };

package/dist/components/TypeTester/useTypeTesterStyler.js

@@ -15,6 +15,7 @@ const useTypeTesterStyler = _ref => {
     lineHeight,
     letterSpacing,
     fontStyles,
+    verticalMetrics,
     content,
     contentEdited,
     alignment,
@@ -58,33 +59,82 @@ const useTypeTesterStyler = _ref => {
   const truncateLines = truncate === true ? 1 : typeof truncate === 'number' ? Math.max(0, Math.floor(truncate)) : 0;
   const shouldTruncate = truncateLines > 0 && !focused;
 
-  // The trailing ellipsis needs `-webkit-line-clamp`, which can't coexist with
-  // CSS multi-column. `columns` is set by default, so the ellipsis is only
-  // available in single-column mode; otherwise the text is hard-clipped.
-  const ellipsis = shouldTruncate && !columns;
+  // How far a line's ink spills past its line-box, top and bottom, as a fraction
+  // of the font-size (em). `fontLoader` feeds these exact metrics into the
+  // @font-face as ascent/descent-override, so this matches the browser's line
+  // geometry precisely. It is 0 once the line-height is at least the font's
+  // natural content height ((ascender − descender) / unitsPerEm) — i.e. for any
+  // normal reading line-height — and only grows for tight, overlapping setting.
+  // Kept in em (not px) so it scales with the *rendered* size, including the
+  // `--type-tester--adjustment` that shrinks the preview on mobile.
+  const lineOverflowEm = shouldTruncate && verticalMetrics && verticalMetrics.unitsPerEm > 0 ? Math.max(0, ((verticalMetrics.ascender - verticalMetrics.descender) / verticalMetrics.unitsPerEm - lineHeight) / 2) : 0;
+
+  // Columns are what make truncation overflow flow sideways — into clipped,
+  // off-screen columns — instead of stacking below the last visible line. That
+  // is what lets the metric padding reveal descenders/ascenders cleanly, and it
+  // means a multi-column tester (e.g. a 3-column specimen) truncates to
+  // `truncateLines` lines *per column*. When truncating with columns disabled we
+  // still establish a single column so the clipped overflow behaves the same way.
+  const columnStyle = columns ? {
+    columnCount: columns.count,
+    columnWidth: columns.width,
+    columnGap: columns.gap
+  } : undefined;
+
+  // A glyph's side bearings — ink that sits outside its advance width, like a
+  // leading lowercase 'j' or an italic overhang — would be shorn by the inline
+  // clip. Per-glyph bearings aren't in the font metrics, so reserve a flat 0.1em
+  // on each inline edge and cancel it with a negative margin so
+  // wrapping and text position stay put.
+  const sideBearing = shouldTruncate ? '0.1em' : '0px';
   const style = {
     fontSize: autofit ? `${size}px` : `calc(var(--type-tester--adjustment, 1) * ${size}px)`,
     lineHeight: `${lineHeight}`,
-    // Reserve exactly `truncateLines` lines so the height is predictable and
-    // side-by-side testers keep their toolbars aligned, then clip the overflow.
-    height: shouldTruncate ? `${size * lineHeight * truncateLines}px` : 'auto',
-    overflow: shouldTruncate ? 'hidden' : 'visible',
-    ...(ellipsis && {
-      display: '-webkit-box',
-      WebkitBoxOrient: 'vertical',
-      WebkitLineClamp: truncateLines
+    ...(shouldTruncate ? {
+      // Cap each column at `truncateLines` lines. `max-height` (not `height`)
+      // lets shorter paragraphs collapse to their content instead of padding
+      // out to N lines of whitespace. Columns send the clipped overflow
+      // sideways (into off-screen columns) rather than below, so the last
+      // visible line of every column is never partially covered by the next
+      // one. That lets the symmetric `lineOverflowEm` padding fully reveal the
+      // first line's ascenders/accents and the last line's descenders at any
+      // line-height; the negative margins cancel that padding in layout so a
+      // collapsed paragraph still occupies exactly its line count.
+      //
+      // Everything is in `em` so it tracks the rendered font-size (including
+      // the mobile `--type-tester--adjustment`); the `+ 2px` is slack that
+      // keeps sub-pixel rounding from dropping the Nth line (the extra never
+      // reveals line N+1 because that line is clipped out to the side).
+      boxSizing: 'border-box',
+      maxHeight: `calc(${truncateLines * lineHeight + 2 * lineOverflowEm}em + 2px)`,
+      paddingTop: `${lineOverflowEm}em`,
+      paddingBottom: `${lineOverflowEm}em`,
+      paddingLeft: sideBearing,
+      paddingRight: sideBearing,
+      marginTop: `${-lineOverflowEm}em`,
+      marginBottom: `${-lineOverflowEm}em`,
+      overflow: 'hidden',
+      // Fill each column to its full N lines before spilling to the next, and
+      // allow a final column with a single line — otherwise the default
+      // `widows: 2` / `column-fill: balance` rebalance a 4-line paragraph into
+      // two columns of 2, showing N−1 lines instead of N.
+      columnFill: 'auto',
+      widows: 1,
+      orphans: 1,
+      ...(columnStyle ?? {
+        columnCount: 1
+      })
+    } : {
+      height: 'auto',
+      overflow: 'visible',
+      ...columnStyle
     }),
     fontFeatureSettings,
-    marginRight: alignment !== 'right' ? -sideBuffer : 0,
-    marginLeft: alignment === 'right' ? -sideBuffer : 0,
+    marginRight: `calc(${alignment !== 'right' ? -sideBuffer : 0}px - ${sideBearing})`,
+    marginLeft: `calc(${alignment === 'right' ? -sideBuffer : 0}px - ${sideBearing})`,
     letterSpacing: `${letterSpacing}em`,
     fontVariationSettings,
-    textAlign: alignment,
-    ...(columns && {
-      columnCount: columns.count,
-      columnWidth: columns.width,
-      columnGap: columns.gap
-    })
+    textAlign: alignment
   };
   return {
     ref,

package/dist/components/elements/StoreModalUnifiedCheckout.js

@@ -75,6 +75,7 @@ import StripeLogo from '../StripeLogo.js';
 import { Check, X } from '../Icons/index.js';
 import ConfigContext from '../ConfigContext.js';
 import { Price } from '../Price/index.js';
+import { sendOrderTracking } from '../Cart/orderTracking.js';
 
 /* const LICENSEE_REQUIRED_FIELDS = ['organization', 'country'] as (keyof Identity)[]; */
 
@@ -274,6 +275,13 @@ export default function StoreModalUnifiedCheckout(_ref2) {
     }));
   }, [setLicenseeIdentity]);
   const environment = useRelayEnvironment();
+
+  // Capture analytics consent + attribution on the order for the purchase
+  // event the server emits on completion (from a Stripe webhook, where no
+  // browser context exists).
+  useEffect(() => {
+    sendOrderTracking(environment);
+  }, [environment]);
   const [error, setError] = useState(null);
   const [errorsObject, setErrorsObject] = useState(null);
   const [customerErrorsObject, setCustomerErrorsObject] = useState(null);

package/dist/components/useFontStyle.d.ts

@@ -3,8 +3,15 @@ import { useFontStyle_fontStyle$key } from '../__generated__/useFontStyle_fontSt
 interface UseFontStyle_props {
     fontStyle: useFontStyle_fontStyle$key | null | undefined;
 }
+export type VerticalMetrics = {
+    readonly unitsPerEm: number;
+    readonly ascender: number;
+    readonly descender: number;
+    readonly lineGap: number | null;
+};
 declare const useFontStyle: ({ fontStyle: fontStyleKey, }: UseFontStyle_props) => {
     style: React.CSSProperties;
     loaded: boolean;
+    verticalMetrics: VerticalMetrics | null;
 };
 export default useFontStyle;

package/dist/components/useFontStyle.js

@@ -45,7 +45,8 @@ const useFontStyle = _ref => {
   };
   return {
     style: cssStyle,
-    loaded
+    loaded,
+    verticalMetrics: verticalMetrics ?? null
   };
 };
 export default useFontStyle;

package/dist/next/config.d.ts

@@ -25,11 +25,7 @@ interface NextConfigLike {
 }
 export declare function tenantRewrites(): Rewrite[];
 export declare function withFontdue<C extends NextConfigLike>(nextConfig?: C): C & {
-    rewrites(): Promise<{
-        beforeFiles: Rewrite[];
-        afterFiles: Rewrite[];
-        fallback: Rewrite[];
-    }>;
+    rewrites(): Promise<RewriteGroups>;
     images: {
         remotePatterns: unknown[];
         dangerouslyAllowSVG: boolean;

package/dist/next/config.js

@@ -9,9 +9,17 @@
 // This module is evaluated at config-load time, so it must not import React,
 // Relay, or anything else from the component tree.
 
-import { relative } from 'node:path';
+import { existsSync } from 'node:fs';
+import { join, relative } from 'node:path';
 import { fileURLToPath } from 'node:url';
 
+// The tenant rewrites only make sense when the app routes live under the
+// /[domain]/... tree. A single-tenant app with a flat tree (the ejected
+// fontdue/example-next shape) routes normally and needs none of them.
+function hasDomainTree() {
+  return ['src/app/[domain]', 'app/[domain]'].some(dir => existsSync(join(process.cwd(), dir)));
+}
+
 // Minimal structural types so this module doesn't need `next` installed to
 // type-check; the shapes match next/dist/lib/load-custom-routes.
 
@@ -121,11 +129,16 @@ export function withFontdue() {
   if (!isMultiTenant && !fontdueUrl) {
     throw new Error('Set NEXT_PUBLIC_FONTDUE_URL (single-tenant) or FONTDUE_MULTI_TENANT=1 (multi-tenant).');
   }
+  const domainTree = hasDomainTree();
+  if (isMultiTenant && !domainTree) {
+    throw new Error('FONTDUE_MULTI_TENANT=1 requires the app routes to live under src/app/[domain]/ (one cache entry per domain).');
+  }
   const userImages = nextConfig.images ?? {};
   return {
     ...nextConfig,
     async rewrites() {
       const user = await resolveRewrites(nextConfig.rewrites);
+      if (!domainTree) return user;
       return {
         // App rules run first, against the public (pre-tenant) path; because
         // beforeFiles rules chain, a dotless path they produce is then

package/dist/next/index.d.ts

@@ -1,2 +1,2 @@
-export { isMultiTenant, isValidDomain, fontdueEndpoint, fallbackSiteUrl, fontdueServerConfig, configureFontdueRender, type FontdueEndpoint, } from './tenant.js';
+export { isMultiTenant, isValidDomain, fontdueEndpoint, fontdueServerConfig, configureFontdueRender, prepareFontdueRender, currentFontdueEndpoint, generateStaticParams, type FontdueEndpoint, } from './tenant.js';
 export { setFontdueServerConfig, getFontdueServerConfig, type FontdueServerConfig, } from '../relay/serverConfig.js';

package/dist/next/index.js

@@ -2,7 +2,7 @@
 // The config-time wrapper lives in 'fontdue-js/next/config' and the deploy
 // hook route handler in 'fontdue-js/next/revalidate'.
 
-export { isMultiTenant, isValidDomain, fontdueEndpoint, fallbackSiteUrl, fontdueServerConfig, configureFontdueRender } from './tenant.js';
+export { isMultiTenant, isValidDomain, fontdueEndpoint, fontdueServerConfig, configureFontdueRender, prepareFontdueRender, currentFontdueEndpoint, generateStaticParams } from './tenant.js';
 
 // The per-render config store consumed by fontdue-js's own server-side
 // fetches. configureFontdueRender covers the common case; these are exported

package/dist/next/tenant.d.ts

@@ -2,6 +2,8 @@ import { type FontdueServerConfig } from '../relay/serverConfig.js';
 export declare const isMultiTenant: boolean;
 export declare function isValidDomain(domain: string): boolean;
 export interface FontdueEndpoint {
+    /** The site domain this endpoint resolves. */
+    domain: string;
     /** Base URL the app's own GraphQL fetches should target. */
     origin: string;
     /** Headers the Fontdue server needs to resolve the tenant. */
@@ -13,6 +15,12 @@ export interface FontdueEndpoint {
     tags: string[];
 }
 export declare function fontdueEndpoint(domain: string): FontdueEndpoint;
-export declare function fallbackSiteUrl(domain: string): string;
 export declare function fontdueServerConfig(domain: string): FontdueServerConfig;
 export declare function configureFontdueRender(domain: string): FontdueEndpoint | null;
+interface RenderProps {
+    params: Promise<Record<string, string | string[] | undefined>>;
+}
+export declare function prepareFontdueRender(props: RenderProps): Promise<FontdueEndpoint>;
+export declare function currentFontdueEndpoint(): FontdueEndpoint;
+export declare function generateStaticParams(): Promise<never[]>;
+export {};

package/dist/next/tenant.js

@@ -24,7 +24,8 @@
 // /graphql on the page's own origin — so multi-tenant mode needs no
 // NEXT_PUBLIC_FONTDUE_URL at all.
 
-import { setFontdueServerConfig } from '../relay/serverConfig.js';
+import { notFound } from 'next/navigation';
+import { setFontdueServerConfig, getFontdueServerConfig } from '../relay/serverConfig.js';
 export const isMultiTenant = process.env.FONTDUE_MULTI_TENANT === '1';
 const singleTenantUrl = process.env.NEXT_PUBLIC_FONTDUE_URL;
 const internalOrigin = process.env.FONTDUE_ORIGIN;
@@ -41,17 +42,16 @@ export function isValidDomain(domain) {
 export function fontdueEndpoint(domain) {
   const tags = ['graphql', `graphql:${domain}`];
   if (!isMultiTenant) {
-    if (!singleTenantUrl) {
-      throw new Error('fontdue-js/next: set NEXT_PUBLIC_FONTDUE_URL (single-tenant) or FONTDUE_MULTI_TENANT=1 (multi-tenant).');
-    }
     return {
-      origin: singleTenantUrl,
+      domain,
+      origin: requireSingleTenantUrl(),
       headers: {},
       tags
     };
   }
   if (internalOrigin) {
     return {
+      domain,
       origin: internalOrigin,
       headers: {
         'x-forwarded-host': domain,
@@ -63,15 +63,17 @@ export function fontdueEndpoint(domain) {
     };
   }
   return {
+    domain,
     origin: `https://${domain}`,
     headers: {},
     tags
   };
 }
-
-// metadataBase / sitemap fallback when the site URL setting is empty.
-export function fallbackSiteUrl(domain) {
-  return isMultiTenant ? `https://${domain}` : 'http://localhost:3000';
+function requireSingleTenantUrl() {
+  if (!singleTenantUrl) {
+    throw new Error('fontdue-js/next: set NEXT_PUBLIC_FONTDUE_URL (single-tenant) or FONTDUE_MULTI_TENANT=1 (multi-tenant).');
+  }
+  return singleTenantUrl;
 }
 
 // Per-render config for fontdue-js's own server-side fetches: same endpoint
@@ -86,7 +88,8 @@ export function fontdueServerConfig(domain) {
   return {
     url: origin,
     headers,
-    cacheTags: [`graphql:${domain}`]
+    cacheTags: [`graphql:${domain}`],
+    domain
   };
 }
 
@@ -102,4 +105,65 @@ export function configureFontdueRender(domain) {
   if (!isValidDomain(domain)) return null;
   setFontdueServerConfig(fontdueServerConfig(domain));
   return fontdueEndpoint(domain);
+}
+
+// The props every page, layout and generateMetadata receives. Any params
+// object is structurally compatible; only `domain` is read.
+
+// The one line at the top of every page, layout and generateMetadata body
+// in the [domain] route tree:
+//
+//   await prepareFontdueRender(props);
+//
+// Reads the request's site from the [domain] route param, 404s anything
+// that isn't a plain hostname (stray paths can reach the catch-all route
+// with their first segment as the "domain"), and points every Fontdue fetch
+// in the rest of this render pass — the app's fetches via
+// currentFontdueEndpoint and fontdue-js's embedded-component preloads — at
+// that site.
+//
+// It must run per entry point, not only in the layout: a soft navigation
+// re-renders just the page segment, and the per-render store starts empty
+// on every pass. Forgetting it is loud, not subtle: currentFontdueEndpoint
+// throws in multi-tenant mode when no render config was set.
+//
+// Route handlers are not React renders — the render-scoped store doesn't
+// exist there, so use the returned endpoint explicitly instead of relying
+// on currentFontdueEndpoint.
+export async function prepareFontdueRender(props) {
+  const {
+    domain
+  } = await props.params;
+  const endpoint = typeof domain === 'string' ? configureFontdueRender(domain) : null;
+  if (!endpoint) notFound();
+  return endpoint;
+}
+
+// Endpoint for the app's own GraphQL fetches in this render pass: whatever
+// prepareFontdueRender configured, or — in a single-tenant app without the
+// [domain] tree, where prepareFontdueRender is never called — the
+// NEXT_PUBLIC_FONTDUE_URL site. Throwing rather than guessing in
+// multi-tenant mode turns a forgotten prepareFontdueRender into an
+// unmissable error instead of a silent wrong-site fetch on soft
+// navigations.
+export function currentFontdueEndpoint() {
+  var _getFontdueServerConf;
+  const domain = (_getFontdueServerConf = getFontdueServerConfig()) === null || _getFontdueServerConf === void 0 ? void 0 : _getFontdueServerConf.domain;
+  if (domain) return fontdueEndpoint(domain);
+  if (isMultiTenant) {
+    throw new Error('fontdue-js/next: no render config set — call prepareFontdueRender(props) at the top of every page, layout and generateMetadata that fetches.');
+  }
+  return fontdueEndpoint(new URL(requireSingleTenantUrl()).host);
+}
+
+// Re-export from routes in the [domain] tree:
+//
+//   export { generateStaticParams } from 'fontdue-js/next';
+//
+// Domains aren't known at build time, so nothing is prerendered — but
+// providing generateStaticParams is what opts a dynamic route into
+// static-on-demand rendering (generated on first request, then cached until
+// revalidated) instead of fully dynamic rendering.
+export async function generateStaticParams() {
+  return [];
 }

package/dist/relay/environment.js

@@ -4,7 +4,7 @@ import { getFontdueServerConfig } from './serverConfig.js';
 
 // `__FONTDUE_JS_VERSION__` is replaced by an inline babel plugin
 // (defineVersionPlugin in .babelrc.cjs) with the literal package.json#version.
-const version = "3.0.0-alpha8";
+const version = "3.0.0-alpha9";
 const IS_SERVER = typeof window === typeof undefined;
 
 // Read env from either process.env (Node/Next.js) or import.meta.env (Vite/Astro).
@@ -63,6 +63,16 @@ export function createNetworkFetch(options) {
             query: request.text,
             variables
           }),
+          // Server-side fetches are all site content (per-session data is
+          // fetched client-side only), so opt them into Next's data cache —
+          // without this, Next 15 treats them as no-store and silently makes
+          // every page fully dynamic. The tags below let the revalidate
+          // handler purge them when content changes. Inert outside Next:
+          // Node's fetch accepts and ignores this cache mode, and the
+          // browser path doesn't set it.
+          ...(IS_SERVER ? {
+            cache: 'force-cache'
+          } : {}),
           // @ts-ignore
           next: {
             tags: ['graphql', ...((serverConfig === null || serverConfig === void 0 ? void 0 : serverConfig.cacheTags) ?? []), `operation:${request.name}`]

package/dist/relay/serverConfig.d.ts

@@ -5,6 +5,12 @@ export interface FontdueServerConfig {
     headers?: Record<string, string>;
     /** Extra Next.js fetch cache tags applied to every server-side GraphQL fetch. */
     cacheTags?: string[];
+    /**
+     * The site domain this render is for, when known. Set by
+     * fontdue-js/next's prepareFontdueRender so render-scoped helpers
+     * (currentFontdueEndpoint) can recover it.
+     */
+    domain?: string;
 }
 export declare function setFontdueServerConfig(config: FontdueServerConfig): void;
 export declare function getFontdueServerConfig(): FontdueServerConfig | undefined;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "fontdue-js",
-  "version": "3.0.0-alpha8",
+  "version": "3.0.0-alpha9",
   "type": "module",
   "scripts": {
     "build": "npm run relay && run-p build-js build-css build-ts",

package/types/next-navigation.d.ts

@@ -0,0 +1,6 @@
+// Minimal declaration so src/next/tenant.ts type-checks without `next`
+// installed (it's the host app's dependency; this package only ever runs the
+// import inside a Next.js server).
+declare module 'next/navigation' {
+  export function notFound(): never;
+}

package/vitest.config.ts

@@ -2,6 +2,10 @@ import { defineConfig } from 'vitest/config';
 import path from 'path';
 
 export default defineConfig({
+  // Stand-in for the babel define plugin that inlines the package version.
+  define: {
+    __FONTDUE_JS_VERSION__: JSON.stringify('0.0.0-test'),
+  },
   test: {
     alias: {
       '__generated__': path.resolve(__dirname, 'src/__generated__'),