fontdue-js 3.0.3 → 3.0.5

package/CHANGELOG.md

@@ -1,3 +1,12 @@
+## 3.0.5
+
+- Fixed `StoreModal` showing a missing-glyph box or an oversized gap between the `Aa` previews of variable-font instances and bundle styles. The previews were separated by a thin space (U+2009) rendered in the foundry’s own font — fonts with no glyph for that character showed a `.notdef` box between every preview, and monospaced fonts rendered it at a full advance width. The previews are now spaced in CSS.
+- The `Consent Granted` event that `ConsentBanner` posts on “Accept all” now carries the entry page’s attribution — its URL, path, referrer, title, and any `utm_*`, `fbclid` or `gclid` parameters, plus a `context` object — captured when the page first loaded rather than at the moment consent was granted. Campaign attribution now survives a visitor navigating around the site before they accept.
+
+## 3.0.4
+
+- Fixed the `CharacterViewer` breaking its grid layout when a character set contains glyphs that need an OpenType feature. Each character set is wrapped in its own element so it can carry its own `font-feature-settings`; those wrappers are now `display: contents` so their cells flow through the block's single grid, rather than each wrapper being its own grid and forcing a row break at every feature boundary — an inserted `ss01`/`salt` alternate no longer lands alone on the next row.
+
 ## 3.0.3
 
 - Fixed misaligned style names in `StoreModal`. The feature-glyphs preview is no longer rendered when a style has nothing to show — a variable font with no named instances, or a non-variable style with no representative glyph for its languages — so its empty wrapper no longer indents the style name and rows in a family now line up.

package/dist/components/CharacterViewer/index.js

@@ -207,9 +207,11 @@ function CharacterViewerComponent(_ref2) {
   const [cellWidth, setCellWidth] = useState(null);
   const measureCell = useCallback(() => {
     var _blocksRef$current;
-    const list = (_blocksRef$current = blocksRef.current) === null || _blocksRef$current === void 0 ? void 0 : _blocksRef$current.querySelector('.character-viewer__block__character-list');
-    if (!list) return;
-    const firstTrack = getComputedStyle(list).gridTemplateColumns.split(' ')[0];
+    // The grid container is the per-block characters element; the
+    // character-list wrappers inside it are display: contents (FD-810).
+    const grid = (_blocksRef$current = blocksRef.current) === null || _blocksRef$current === void 0 ? void 0 : _blocksRef$current.querySelector('.character-viewer__block__characters');
+    if (!grid) return;
+    const firstTrack = getComputedStyle(grid).gridTemplateColumns.split(' ')[0];
     const width = parseFloat(firstTrack);
     if (!Number.isNaN(width)) setCellWidth(width);
   }, []);

package/dist/components/ConsentBanner/consent.d.ts

@@ -1,5 +1,20 @@
 export declare function setClientAnonymousId(id: string): void;
 export declare function getClientAnonymousId(): string | undefined;
+/**
+ * The tracker captures the entry page view once on mount and stores its
+ * attribution here (url, referrer, fbclid, utm campaign). The consent banner
+ * reads it when the visitor grants consent so the `Consent Granted` event can
+ * carry the arrival attribution — preserving it even if the visitor has since
+ * navigated away from the landing URL. The server forwards that event; each
+ * destination decides how to represent it (Meta reads it as the entry
+ * PageView). Undefined until the tracker has mounted.
+ */
+export type EntryAttribution = {
+    properties: Record<string, unknown>;
+    context: Record<string, unknown>;
+};
+export declare function setEntryAttribution(body: EntryAttribution): void;
+export declare function getEntryAttribution(): EntryAttribution | undefined;
 /** Parse the _fontdue_cc cookie and check if it contains the given category. */
 export declare function hasConsent(category: string): boolean;
 /** Set the _fontdue_cc cookie with the given categories. */

package/dist/components/ConsentBanner/consent.js

@@ -11,6 +11,24 @@ export function getClientAnonymousId() {
   return clientAnonymousId;
 }
 
+/**
+ * The tracker captures the entry page view once on mount and stores its
+ * attribution here (url, referrer, fbclid, utm campaign). The consent banner
+ * reads it when the visitor grants consent so the `Consent Granted` event can
+ * carry the arrival attribution — preserving it even if the visitor has since
+ * navigated away from the landing URL. The server forwards that event; each
+ * destination decides how to represent it (Meta reads it as the entry
+ * PageView). Undefined until the tracker has mounted.
+ */
+
+let entryAttribution;
+export function setEntryAttribution(body) {
+  entryAttribution = body;
+}
+export function getEntryAttribution() {
+  return entryAttribution;
+}
+
 /** Parse the _fontdue_cc cookie and check if it contains the given category. */
 export function hasConsent(category) {
   const match = document.cookie.match(new RegExp('(?:^|;\\s*)' + CONSENT_COOKIE + '=([^;]*)'));

package/dist/components/ConsentBanner/index.js

@@ -1,7 +1,7 @@
 import React, { useContext, useEffect, useState } from 'react';
 import ConfigContext from '../ConfigContext.js';
 import { useFontdueUrl } from '../UrlContext.js';
-import { setConsent, activateScripts, getClientAnonymousId } from './consent.js';
+import { setConsent, activateScripts, getClientAnonymousId, getEntryAttribution } from './consent.js';
 const DEFAULT_MESSAGE = 'We use cookies to analyze site usage and improve your\u00A0experience.';
 const ConsentBanner = () => {
   const config = useContext(ConfigContext);
@@ -19,15 +19,21 @@ const ConsentBanner = () => {
   if (dismissed) return null;
   const message = config.tracking.consentMessage || DEFAULT_MESSAGE;
   const sendConsentEvent = categories => {
-    // Fire a tracking event so the server sets the _fontdue_state cookie
-    // on this response (rather than waiting for the next page load).
-    // Include the client anonymous_id so it gets synced to the cookie.
+    // Fire a normal tracking event on the existing pipeline. Because the consent
+    // cookie was just written, the server is now permitted to forward, sets the
+    // durable _fontdue_state cookie on this response (rather than waiting for the
+    // next page load), and syncs the client anonymous_id into it. Carry the
+    // captured entry-page attribution so destinations that read the grant as a
+    // page view (Meta) attribute it to the visitor's arrival (referrer, fbclid).
+    const entry = getEntryAttribution();
     const body = {
       event: 'Consent Granted',
       properties: {
+        ...((entry === null || entry === void 0 ? void 0 : entry.properties) ?? {}),
         categories: categories.join(',')
       }
     };
+    if (entry !== null && entry !== void 0 && entry.context) body.context = entry.context;
     const anonId = getClientAnonymousId();
     if (anonId) body.anonymous_id = anonId;
     fetch(`${url}/api/track`, {
@@ -40,6 +46,8 @@ const ConsentBanner = () => {
     }).catch(() => {});
   };
   const handleAcceptAll = () => {
+    // Write the consent cookie first, so the tracking request carries it and the
+    // server is permitted to forward.
     setConsent(['necessary', 'analytics']);
     activateScripts('analytics');
     if (config.tracking.enabled) {

package/dist/components/StoreModal/StoreModalBundleButton.js

@@ -8,7 +8,6 @@ import { PriceFormat } from '../Price/index.js';
 import FontStyle from '../FontStyle/index.js';
 import { isSelected } from '../../reducer.js';
 import StoreModalStyleButtonElement from '../elements/StoreModalStyleButton/index.js';
-const THIN_SPACE = '\u2009';
 export default function StoreModalBundleButton(_ref) {
   var _bundle$sku;
   let {
@@ -27,11 +26,11 @@ export default function StoreModalBundleButton(_ref) {
     onClick: handleSelect,
     selected: selected
   }), {
-    featureGlyphs: bundle.fontStyles.map((fontStyle, i) => /*#__PURE__*/React.createElement(FontStyle, {
+    featureGlyphs: bundle.fontStyles.map(fontStyle => /*#__PURE__*/React.createElement(FontStyle, {
       key: fontStyle.id,
       fontStyle: fontStyle,
       Component: "span"
-    }, i !== 0 && THIN_SPACE, "Aa")),
+    }, "Aa")),
     name: bundle.name,
     price: /*#__PURE__*/React.createElement(SKUPrice, {
       sku: bundle.sku,

package/dist/components/StoreModal/StoreModalStyleButton.js

@@ -9,7 +9,6 @@ import FontStyle from '../FontStyle/index.js';
 import { isSelected } from '../../reducer.js';
 import StoreModalStyleButtonElement from '../elements/StoreModalStyleButton/index.js';
 import { getFeatureGlyphs, variableInstanceCSS } from '../../utils.js';
-const THIN_SPACE = '\u2009';
 export default function StoreModalStyleButton(_ref) {
   var _fontStyle$variableIn, _fontStyle$variableIn2;
   let {
@@ -32,10 +31,10 @@ export default function StoreModalStyleButton(_ref) {
     featureGlyphs: hasFeatureGlyphs ? /*#__PURE__*/React.createElement(FontStyle, {
       fontStyle: fontStyle,
       Component: "span"
-    }, isVariableFont ? (_fontStyle$variableIn2 = fontStyle.variableInstances) === null || _fontStyle$variableIn2 === void 0 ? void 0 : _fontStyle$variableIn2.map((instance, i) => /*#__PURE__*/React.createElement("span", {
+    }, isVariableFont ? (_fontStyle$variableIn2 = fontStyle.variableInstances) === null || _fontStyle$variableIn2 === void 0 ? void 0 : _fontStyle$variableIn2.map(instance => /*#__PURE__*/React.createElement("span", {
       key: instance.name,
       style: variableInstanceCSS(instance)
-    }, i !== 0 && THIN_SPACE, getFeatureGlyphs(fontStyle.supportedLanguages))) : getFeatureGlyphs(fontStyle.supportedLanguages)) : null,
+    }, getFeatureGlyphs(fontStyle.supportedLanguages))) : getFeatureGlyphs(fontStyle.supportedLanguages)) : null,
     // for variable fonts, only show the name of the style if there are
     // multiple styles
     name: isVariableFont ? fontStyle.sku ? fontStyle.name : undefined : fontStyle.name,

package/dist/components/Tracking/index.js

@@ -3,7 +3,7 @@
 import { useContext, useEffect } from 'react';
 import ConfigContext from '../ConfigContext.js';
 import { useFontdueUrl } from '../UrlContext.js';
-import { hasConsent, onConsent, setClientAnonymousId } from '../ConsentBanner/consent.js';
+import { hasConsent, onConsent, setClientAnonymousId, setEntryAttribution } from '../ConsentBanner/consent.js';
 function getCampaignDataFromUrl() {
   const urlParams = new URLSearchParams(window.location.search);
   const campaign = {};
@@ -37,32 +37,41 @@ function getCampaignDataFromUrl() {
     properties: hasProperties ? properties : null
   };
 }
-async function sendPageView(baseUrl, anonymousId) {
+// Build the page-view payload from the current document. Captured once for the
+// entry page view so its attribution (referrer, fbclid, utm) can travel with the
+// consent grant, preserving arrival attribution even if the visitor has since
+// navigated.
+function buildPageViewBody() {
+  const {
+    campaign,
+    properties: clickIdProperties
+  } = getCampaignDataFromUrl();
+  const properties = {
+    url: window.location.href,
+    path: window.location.pathname,
+    referrer: document.referrer,
+    title: document.title,
+    search: window.location.search,
+    ...clickIdProperties
+  };
+  const context = {
+    userAgent: navigator.userAgent
+  };
+  if (campaign) {
+    context.campaign = campaign;
+  }
+  return {
+    properties,
+    context
+  };
+}
+async function postPageView(baseUrl, body, anonymousId) {
   try {
-    const {
-      campaign,
-      properties: clickIdProperties
-    } = getCampaignDataFromUrl();
-    const properties = {
-      url: window.location.href,
-      path: window.location.pathname,
-      referrer: document.referrer,
-      title: document.title,
-      search: window.location.search,
-      ...clickIdProperties
-    };
-    const context = {
-      userAgent: navigator.userAgent
-    };
-    if (campaign) {
-      context.campaign = campaign;
-    }
-    const body = {
-      properties,
-      context
+    const payload = {
+      ...body
     };
     if (anonymousId) {
-      body.anonymous_id = anonymousId;
+      payload.anonymous_id = anonymousId;
     }
     const response = await fetch(`${baseUrl}/api/track/page`, {
       method: 'POST',
@@ -70,7 +79,7 @@ async function sendPageView(baseUrl, anonymousId) {
         'Content-Type': 'application/json'
       },
       credentials: 'include',
-      body: JSON.stringify(body)
+      body: JSON.stringify(payload)
     });
     const data = await response.json();
     return data.anonymous_id || null;
@@ -79,6 +88,9 @@ async function sendPageView(baseUrl, anonymousId) {
     return null;
   }
 }
+async function sendPageView(baseUrl, anonymousId) {
+  return postPageView(baseUrl, buildPageViewBody(), anonymousId);
+}
 const Tracking = () => {
   const config = useContext(ConfigContext);
   const url = useFontdueUrl();
@@ -96,8 +108,20 @@ const Tracking = () => {
     const analyticsConsent = hasConsent('analytics');
     const effectiveAnonymousId = clientAnonymousId && config.tracking.consentRequired && !analyticsConsent ? clientAnonymousId : undefined;
 
-    // Send initial page view
-    const pageViewPromise = sendPageView(url, effectiveAnonymousId);
+    // Capture the entry page view once, then send it. Before consent the server
+    // records but does not forward it.
+    const entryBody = buildPageViewBody();
+    const pageViewPromise = postPageView(url, entryBody, effectiveAnonymousId);
+
+    // Publish this captured entry attribution so the consent banner can attach
+    // it to the `Consent Granted` event when the visitor grants consent. That
+    // event is a normal tracking event on the existing pipeline; the server
+    // forwards it and each destination decides how to represent it (Meta reads
+    // it as the attributed entry page view). Capturing once preserves the
+    // arrival attribution even if the visitor has since navigated.
+    if (config.tracking.consentRequired) {
+      setEntryAttribution(entryBody);
+    }
 
     // Segment SDK for device-mode integrations (e.g. Google Tag Manager)
     // The analytics factory is provided by the entry point — it calls AnalyticsBrowser.load()

package/dist/fontdue.css

@@ -1075,11 +1075,12 @@ fontdue-type-tester {
 .character-viewer__block__characters {
   font-size: 30px;
   margin-left: 1px;
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(60px, 1fr));
 }
 
 .character-viewer__block__character-list {
-  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(60px, 1fr));
+  display: contents;
 }
 .character-viewer__block__character-list > div {
   min-height: var(--cell-width, 60px);
@@ -2353,6 +2354,12 @@ input:checked + .checkbox__icon {
   margin-right: 10px;
   word-break: break-word;
 }
+.store-modal__style-button__feature-glyphs span {
+  display: inline-block;
+}
+.store-modal__style-button__feature-glyphs span:not(:last-child) {
+  margin-right: 0.2em;
+}
 
 .store-modal__style-button__price,
 .store-modal__style-button__checked {

package/dist/relay/environment.js

@@ -7,7 +7,7 @@ import { PREVIEW_HEADER, hasPreviewMarkerCookie } from '../preview/constants.js'
 // (defineVersionPlugin in .babelrc.cjs) with the literal package.json#version.
 // Exported so UI (the admin toolbar) can surface it without re-reading the
 // build-time global in a 'use client' module.
-export const version = "3.0.3";
+export const version = "3.0.5";
 const IS_SERVER = typeof window === typeof undefined;
 
 // Opt server fetches into Next's data cache only in production; dev stays

package/package.json

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