fontdue-js 3.0.1 → 3.0.3

package/CHANGELOG.md

@@ -1,3 +1,11 @@
+## 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.
+
+## 3.0.2
+
+- Fixed the `CharacterViewer` dropping character groups that have no OpenType feature (such as Uppercase, Lowercase, and Punctuation). The glyph matcher now treats an empty feature list, `null`, and `undefined` as the same “no feature” state, so a featureless group matches whether the API returns `[]` or `null` for it.
+
 ## 3.0.1
 
 - Fixed analytics tracking and consent events posting to the wrong address in non-Next.js frameworks. In Vite-based setups (Astro, React Router 7, TanStack Start) that configure the Fontdue URL through `PUBLIC_FONTDUE_URL` / `VITE_FONTDUE_URL` and pass a `preloadedQuery` to `<FontdueProvider>` (rather than an explicit `url` prop), the page-view and consent requests went to a relative `/api/track/page` on the site’s own origin instead of the configured Fontdue server. They now resolve the Fontdue URL the same way GraphQL requests do. Next.js sites were unaffected.

package/dist/__tests__/glyphMatch.test.js

@@ -0,0 +1,123 @@
+import { describe, it, expect } from 'vitest';
+import { compareGlyphs, flattenCharacterList } from "../components/CharacterViewer/glyphMatch.js";
+describe('compareGlyphs', () => {
+  it('treats an empty feature array and null as the same "no feature" state', () => {
+    // The regression: glyph groups save base sets as `[]`, but the font's
+    // glyphNames report base glyphs with `null`. These must match.
+    expect(compareGlyphs({
+      string: 'a',
+      features: []
+    }, {
+      string: 'a',
+      features: null
+    })).toBe(true);
+    expect(compareGlyphs({
+      string: 'a',
+      features: null
+    }, {
+      string: 'a',
+      features: []
+    })).toBe(true);
+    expect(compareGlyphs({
+      string: 'a',
+      features: undefined
+    }, {
+      string: 'a',
+      features: []
+    })).toBe(true);
+  });
+  it('matches identical single features', () => {
+    expect(compareGlyphs({
+      string: 'a',
+      features: ['ss01']
+    }, {
+      string: 'a',
+      features: ['ss01']
+    })).toBe(true);
+  });
+  it('does not match a feature-bearing set against a base glyph', () => {
+    expect(compareGlyphs({
+      string: 'a',
+      features: ['ss01']
+    }, {
+      string: 'a',
+      features: null
+    })).toBe(false);
+    expect(compareGlyphs({
+      string: 'a',
+      features: ['ss01']
+    }, {
+      string: 'a',
+      features: []
+    })).toBe(false);
+  });
+  it('does not match different features or different strings', () => {
+    expect(compareGlyphs({
+      string: 'a',
+      features: ['ss01']
+    }, {
+      string: 'a',
+      features: ['ss02']
+    })).toBe(false);
+    expect(compareGlyphs({
+      string: 'a',
+      features: []
+    }, {
+      string: 'b',
+      features: []
+    })).toBe(false);
+  });
+});
+describe('flattenCharacterList', () => {
+  // glyphNames as the backend reports them: base glyphs carry `features: null`.
+  const glyphNames = [{
+    characters: 'a',
+    features: null
+  }, {
+    characters: 'b',
+    features: null
+  }, {
+    characters: 'c',
+    features: null
+  }, {
+    characters: 'a',
+    features: ['ss01']
+  }];
+  it('keeps a no-feature range whose glyphs exist as base glyphs (the storefront regression)', () => {
+    const result = flattenCharacterList({
+      characters: [{
+        __typename: 'CharacterRange',
+        first: 'a',
+        last: 'c'
+      }],
+      features: [] // saved by the editor as an empty array
+    }, glyphNames);
+    // Previously this returned [] (every char dropped) and the group vanished.
+    expect(result === null || result === void 0 ? void 0 : result.characters).toEqual(['a', 'b', 'c']);
+  });
+  it('drops characters the font does not contain', () => {
+    const result = flattenCharacterList({
+      characters: [{
+        __typename: 'CharacterRange',
+        first: 'a',
+        last: 'd'
+      }],
+      features: []
+    }, glyphNames);
+    expect(result === null || result === void 0 ? void 0 : result.characters).toEqual(['a', 'b', 'c']); // 'd' is not in the font
+  });
+  it('matches feature sets only against glyphs reachable via that feature', () => {
+    const result = flattenCharacterList({
+      characters: [{
+        __typename: 'CharacterString',
+        string: 'a'
+      }, {
+        __typename: 'CharacterString',
+        string: 'b'
+      }],
+      features: ['ss01']
+    }, glyphNames);
+    // Only 'a' has an ss01 form; 'b' does not.
+    expect(result === null || result === void 0 ? void 0 : result.characters).toEqual(['a']);
+  });
+});

package/dist/components/CartButton/index.js

@@ -24,7 +24,7 @@ const openCart = () => ({
 function CartButtonComponent(_ref) {
   let {
     label,
-    buttonStyle,
+    buttonStyle = 'inline',
     order: orderKey,
     children,
     suffix

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

@@ -0,0 +1,29 @@
+export interface Glyph {
+    string: string;
+    features?: readonly string[] | null;
+}
+export type CharacterRange = {
+    __typename: 'CharacterRange';
+    first: string;
+    last: string;
+};
+export type CharacterString = {
+    __typename: 'CharacterString';
+    string: string;
+};
+export type CharacterItem = CharacterRange | CharacterString | {
+    __typename: '%other';
+};
+export declare function charCode(c: string): number;
+export declare function fromCharCode(code: number): string;
+export declare function compareGlyphs(a: Glyph | undefined, b: Glyph | undefined): boolean;
+export declare function flattenCharacterList(charSet: {
+    characters: readonly CharacterItem[] | null;
+    features: readonly string[] | null;
+} | null, glyphNames: readonly {
+    characters: string;
+    features: readonly string[] | null;
+}[] | null): {
+    characters: string[];
+    features?: readonly string[] | null;
+} | null;

package/dist/components/CharacterViewer/glyphMatch.js

@@ -0,0 +1,56 @@
+// Glyph matching for the character viewer.
+//
+// A glyph group's character set is matched against the font's `glyphNames` so
+// only characters the font actually contains are rendered. The subtle part is
+// the OpenType `features` array: a base glyph ("no feature") is expressed as
+// `null` in `glyphNames` (and in the backend's auto-generated default groups),
+// but the glyph-group editor saves base sets with an empty array `[]`. These
+// must be treated as the same "no features" state — otherwise every no-feature
+// group (Uppercase, Lowercase, Punctuation, …) renders empty and is dropped.
+
+export function charCode(c) {
+  return c.codePointAt(0) ?? 0;
+}
+export function fromCharCode(code) {
+  return String.fromCodePoint(code);
+}
+export function compareGlyphs(a, b) {
+  if (!a || !b) return false;
+  if (a.string !== b.string) return false;
+  // Normalize missing/empty features to a single representation. Comparing the
+  // raw arrays' lengths treated `[]` (length 0) and `null`/`undefined` (no
+  // length) as different, so a base group saved as `[]` never matched a base
+  // glyph reported as `null` and the group disappeared on the storefront.
+  const fa = a.features ?? [];
+  const fb = b.features ?? [];
+  if (fa.length !== fb.length) return false;
+  return fa.every(feature => fb.includes(feature));
+}
+export function flattenCharacterList(charSet, glyphNames) {
+  if (!glyphNames || !charSet || !charSet.characters) return null;
+  return {
+    features: charSet.features,
+    characters: charSet.characters.reduce((acc, item) => {
+      if (item.__typename === 'CharacterString') {
+        acc.push(item.string);
+      } else if (item.__typename === 'CharacterRange') {
+        for (let code = charCode(item.first); code <= charCode(item.last); code++) {
+          acc.push(fromCharCode(code));
+        }
+      }
+      return acc;
+    }, []).filter(string => glyphNames.some(_ref => {
+      let {
+        characters,
+        features
+      } = _ref;
+      return compareGlyphs({
+        string,
+        features: charSet.features
+      }, {
+        string: characters,
+        features
+      });
+    }))
+  };
+}

package/dist/components/CharacterViewer/index.js

@@ -22,6 +22,7 @@ import CharacterViewerStyleRefetchQueryNode from '../../__generated__/CharacterV
 import { EnsureFontdueContext } from '../FontdueContextProvider/index.js';
 import ConfigContext from '../ConfigContext.js';
 import { unicodeNamesUrl } from '../../data/unicodeNamesUrl.js';
+import { compareGlyphs, flattenCharacterList } from './glyphMatch.js';
 function useSize() {
   const ref = useRef(null);
   const [size, setSize] = React.useState();
@@ -99,53 +100,6 @@ function useUnicodeData() {
   }, [url]);
   return data;
 }
-function compareGlyphs(a, b) {
-  var _a$features, _b$features;
-  if (!a || !b) return false;
-  if (a.string !== b.string) return false;
-  if (((_a$features = a.features) === null || _a$features === void 0 ? void 0 : _a$features.length) !== ((_b$features = b.features) === null || _b$features === void 0 ? void 0 : _b$features.length)) return false;
-  if (a.features && b.features) {
-    return a.features.every(feature => {
-      var _b$features2;
-      return (_b$features2 = b.features) === null || _b$features2 === void 0 ? void 0 : _b$features2.includes(feature);
-    });
-  }
-  return true;
-}
-function charCode(c) {
-  return c.codePointAt(0) ?? 0;
-}
-function fromCharCode(code) {
-  return String.fromCodePoint(code);
-}
-function flattenCharacterList(charSet, glyphNames) {
-  if (!glyphNames || !charSet || !charSet.characters) return null;
-  return {
-    features: charSet.features,
-    characters: charSet.characters.reduce((acc, item) => {
-      if (item.__typename === 'CharacterString') {
-        acc.push(item.string);
-      } else if (item.__typename === 'CharacterRange') {
-        for (let code = charCode(item.first); code <= charCode(item.last); code++) {
-          acc.push(fromCharCode(code));
-        }
-      }
-      return acc;
-    }, []).filter(string => glyphNames.some(_ref2 => {
-      let {
-        characters,
-        features
-      } = _ref2;
-      return compareGlyphs({
-        string,
-        features: charSet.features
-      }, {
-        string: characters,
-        features
-      });
-    }))
-  };
-}
 _CharacterViewer_family.hash && _CharacterViewer_family.hash !== "162b1a99fe187b20ee8560018cd5b3ce" && console.error("The definition of 'CharacterViewer_family' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _CharacterViewer_family;
 function areCombiningChars(input) {
   for (const char of input) {
@@ -170,10 +124,10 @@ function hasUnsupportedPositionalFeatures(features) {
   if (!features) return false;
   return features.some(f => UNSUPPORTED_POSITIONAL_FEATURES.includes(f));
 }
-function CharacterViewerComponent(_ref3) {
+function CharacterViewerComponent(_ref2) {
   let {
     collection: collectionKey
-  } = _ref3;
+  } = _ref2;
   const collection = useFragment((_CharacterViewer_collection.hash && _CharacterViewer_collection.hash !== "c2116c3c2c795e5306c3a2a0ecd60137" && console.error("The definition of 'CharacterViewer_collection' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _CharacterViewer_collection), collectionKey);
   const [fontStyle, refetchFontStyle] = useRefetchableFragment((_CharacterViewer_style.hash && _CharacterViewer_style.hash !== "8cbf3328030930b88b3ec3601aaf7c45" && console.error("The definition of 'CharacterViewer_style' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _CharacterViewer_style), collection.featureStyle);
   let families = [];
@@ -221,11 +175,11 @@ function CharacterViewerComponent(_ref3) {
   const visibleGlyph = activeGlyph ?? selectedGlyph;
   const getGlyphName = useCallback(glyph => {
     var _fontStyle$glyphNames, _fontStyle$glyphNames2;
-    return (fontStyle === null || fontStyle === void 0 ? void 0 : (_fontStyle$glyphNames = fontStyle.glyphNames) === null || _fontStyle$glyphNames === void 0 ? void 0 : (_fontStyle$glyphNames2 = _fontStyle$glyphNames.find(_ref4 => {
+    return (fontStyle === null || fontStyle === void 0 ? void 0 : (_fontStyle$glyphNames = fontStyle.glyphNames) === null || _fontStyle$glyphNames === void 0 ? void 0 : (_fontStyle$glyphNames2 = _fontStyle$glyphNames.find(_ref3 => {
       let {
         characters,
         features
-      } = _ref4;
+      } = _ref3;
       return compareGlyphs(glyph, {
         string: characters,
         features
@@ -310,12 +264,12 @@ function CharacterViewerComponent(_ref3) {
   threshold > 0 && visible.some(v => Math.abs(v.position - line.position) < threshold) ? visible : [...visible, line], []);
   const groups = useMemo(() => {
     var _collection$glyphGrou;
-    return (_collection$glyphGrou = collection.glyphGroups) === null || _collection$glyphGrou === void 0 ? void 0 : _collection$glyphGrou.map(_ref5 => {
+    return (_collection$glyphGrou = collection.glyphGroups) === null || _collection$glyphGrou === void 0 ? void 0 : _collection$glyphGrou.map(_ref4 => {
       var _characterSets$filter;
       let {
         name,
         characterSets
-      } = _ref5;
+      } = _ref4;
       return {
         name,
         characterSets: characterSets
@@ -388,11 +342,11 @@ function CharacterViewerComponent(_ref3) {
     style: cellWidth ? {
       '--cell-width': `${cellWidth}px`
     } : undefined
-  }, groups === null || groups === void 0 ? void 0 : groups.map((_ref6, i) => {
+  }, groups === null || groups === void 0 ? void 0 : groups.map((_ref5, i) => {
     let {
       name,
       characterSets
-    } = _ref6;
+    } = _ref5;
     return /*#__PURE__*/React.createElement("div", {
       className: "character-viewer__block",
       key: i,
@@ -438,10 +392,10 @@ export async function loadCharacterViewerQuery(variables, options) {
   }
   throw new Error('loadCharacterViewerQuery expected either collectionId or collectionSlug');
 }
-function CharacterViewerIdQueryRenderer(_ref7) {
+function CharacterViewerIdQueryRenderer(_ref6) {
   let {
     collectionId
-  } = _ref7;
+  } = _ref6;
   const data = useLazyLoadQuery(idQuery, {
     collectionId
   });
@@ -450,11 +404,11 @@ function CharacterViewerIdQueryRenderer(_ref7) {
     collection: data.node
   });
 }
-export function CharacterViewerPreloadedIDQueryRenderer(_ref8) {
+export function CharacterViewerPreloadedIDQueryRenderer(_ref7) {
   let {
     preloadedQuery,
     ...rest
-  } = _ref8;
+  } = _ref7;
   // The query node lets the hook commit the payload into the store, so
   // usePreloadedQuery resolves synchronously during SSR instead of
   // refetching (the response cache only exists in the browser).
@@ -465,11 +419,11 @@ export function CharacterViewerPreloadedIDQueryRenderer(_ref8) {
     collection: data.node
   }));
 }
-function CharacterViewerSlugQueryRenderer(_ref9) {
+function CharacterViewerSlugQueryRenderer(_ref8) {
   var _data$viewer, _data$viewer$slug;
   let {
     collectionSlug
-  } = _ref9;
+  } = _ref8;
   const data = useLazyLoadQuery(slugQuery, {
     collectionSlug
   });
@@ -479,12 +433,12 @@ function CharacterViewerSlugQueryRenderer(_ref9) {
     collection: collection
   });
 }
-export function CharacterViewerPreloadedSlugQueryRenderer(_ref10) {
+export function CharacterViewerPreloadedSlugQueryRenderer(_ref9) {
   var _data$viewer2, _data$viewer2$slug;
   let {
     preloadedQuery,
     ...rest
-  } = _ref10;
+  } = _ref9;
   // The query node lets the hook commit the payload into the store, so
   // usePreloadedQuery resolves synchronously during SSR instead of
   // refetching (the response cache only exists in the browser).
@@ -496,11 +450,11 @@ export function CharacterViewerPreloadedSlugQueryRenderer(_ref10) {
     collection: collection
   }));
 }
-function CharacterViewerPreloadedRenderer(_ref11) {
+function CharacterViewerPreloadedRenderer(_ref10) {
   let {
     preloadedQuery,
     ...rest
-  } = _ref11;
+  } = _ref10;
   if (preloadedQuery.params.name === 'CharacterViewerIDQuery') {
     return /*#__PURE__*/React.createElement(CharacterViewerPreloadedIDQueryRenderer, _extends({
       preloadedQuery: preloadedQuery

package/dist/components/StoreModal/StoreModalStyleButton.js

@@ -11,7 +11,7 @@ import StoreModalStyleButtonElement from '../elements/StoreModalStyleButton/inde
 import { getFeatureGlyphs, variableInstanceCSS } from '../../utils.js';
 const THIN_SPACE = '\u2009';
 export default function StoreModalStyleButton(_ref) {
-  var _fontStyle$variableIn;
+  var _fontStyle$variableIn, _fontStyle$variableIn2;
   let {
     fontStyle: fontStyleKey,
     onSelectSku,
@@ -24,17 +24,18 @@ export default function StoreModalStyleButton(_ref) {
     if (!fontStyle.sku) return;
     onSelectSku(fontStyle.sku.id, !selected);
   };
+  const hasFeatureGlyphs = isVariableFont ? Boolean((_fontStyle$variableIn = fontStyle.variableInstances) === null || _fontStyle$variableIn === void 0 ? void 0 : _fontStyle$variableIn.length) : getFeatureGlyphs(fontStyle.supportedLanguages) != null;
   return /*#__PURE__*/React.createElement(StoreModalStyleButtonElement, _extends({}, rest, {
     onClick: fontStyle.sku ? handleSelect : undefined,
     selected: selected
   }), {
-    featureGlyphs: /*#__PURE__*/React.createElement(FontStyle, {
+    featureGlyphs: hasFeatureGlyphs ? /*#__PURE__*/React.createElement(FontStyle, {
       fontStyle: fontStyle,
       Component: "span"
-    }, isVariableFont ? (_fontStyle$variableIn = fontStyle.variableInstances) === null || _fontStyle$variableIn === void 0 ? void 0 : _fontStyle$variableIn.map((instance, i) => /*#__PURE__*/React.createElement("span", {
+    }, isVariableFont ? (_fontStyle$variableIn2 = fontStyle.variableInstances) === null || _fontStyle$variableIn2 === void 0 ? void 0 : _fontStyle$variableIn2.map((instance, i) => /*#__PURE__*/React.createElement("span", {
       key: instance.name,
       style: variableInstanceCSS(instance)
-    }, i !== 0 && THIN_SPACE, getFeatureGlyphs(fontStyle.supportedLanguages))) : getFeatureGlyphs(fontStyle.supportedLanguages)),
+    }, i !== 0 && THIN_SPACE, 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/elements/StoreModalStyleButton/index.js

@@ -17,9 +17,9 @@ const StoreModalStyleButton = _ref => {
     "data-clickable": Boolean(rest.onClick)
   }), /*#__PURE__*/React.createElement("div", {
     className: "store-modal__style-button__container"
-  }, /*#__PURE__*/React.createElement("span", {
+  }, featureGlyphs && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", {
     className: "store-modal__style-button__feature-glyphs"
-  }, featureGlyphs), ' ', /*#__PURE__*/React.createElement("span", {
+  }, featureGlyphs), ' '), /*#__PURE__*/React.createElement("span", {
     className: "store-modal__style-button__style-name"
   }, name), selected ? /*#__PURE__*/React.createElement("div", {
     className: "store-modal__style-button__checked"

package/dist/corsError.js

@@ -51,7 +51,7 @@ async function isCorsBlocked(fetchUrl) {
   }
 }
 function publishConnectionError(origin, fetchUrl) {
-  console.error(`[Fontdue] Cross-origin request to ${fetchUrl} was blocked.\n\n` + `Your website (${origin}) is most likely not listed as an allowed ` + `origin in your Fontdue settings.\n\n` + `To fix this:\n` + `1. Log in to your Fontdue dashboard\n` + `2. Go to Settings → Integration\n` + `3. Add "${origin}" to your allowed origins\n` + `4. Save — this page will reload automatically\n\n` + `If "${origin}" is already listed, the connection may be failing for ` + `another reason (a network problem or a temporary Fontdue outage).`);
+  console.error(`[Fontdue] Cross-origin request to ${fetchUrl} was blocked.\n\n` + `Your website (${origin}) is most likely not listed as an allowed ` + `origin in your Fontdue settings.\n\n` + `To fix this:\n` + `1. Log in to your Fontdue dashboard\n` + `2. Go to Settings \u2192 Integration\n` + `3. Add "${origin}" to the "Cross-origin API access" field\n` + `4. Save \u2014 this page will reload automatically\n\n` + `If "${origin}" is already listed, the connection may be failing for ` + `another reason (a network problem or a temporary Fontdue outage).`);
 
   // Surface the connection status as a compact, toolbar-styled widget (red
   // button + alert glyph) rather than the old full-screen modal. It mounts in

package/dist/fontdue.css

@@ -397,11 +397,20 @@ div[data-component=TypeTesters] {
   width: 100%;
 }
 
+fontdue-type-testers,
+fontdue-type-tester {
+  display: block;
+  max-width: 100%;
+  min-width: 0;
+}
+
 .type-tester {
   margin-bottom: 20px;
   font-size: 1rem;
   border-top: 1px solid var(--horizontal_rule_color);
   color: var(--primary_text_color);
+  min-width: 0;
+  max-width: 100%;
 }
 @media (max-width: 899px) {
   .type-tester {
@@ -586,7 +595,7 @@ div[data-component=TypeTesters] {
   cursor: pointer;
 }
 .type-tester__slider__handle {
-  background-color: var(--primary_background_color);
+  background-color: var(--primary_background_color, canvas);
   border: 1px solid currentcolor;
   border-radius: 50%;
   height: 15px;
@@ -1728,6 +1737,7 @@ input:checked + .checkbox__icon {
   padding-left: 0;
   padding-right: 0;
   box-shadow: none;
+  background: transparent;
 }
 
 .store-modal__family-button__container {

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.1";
+export const version = "3.0.3";
 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.1",
+  "version": "3.0.3",
   "type": "module",
   "scripts": {
     "build": "npm run relay && run-p build-js build-css build-ts",
@@ -123,9 +123,9 @@
       "react-server": "./dist/components/TypeTesters/index.server.js",
       "default": "./dist/components/TypeTesters/index.js"
     },
+    "./useAutofit": "./dist/hooks/useAutofit.js",
     "./useConsent": "./dist/components/useConsent.js",
     "./useFont": "./dist/components/useFont.js",
-    "./useFontStyle": "./dist/components/useFont.js",
-    "./useAutofit": "./dist/hooks/useAutofit.js"
+    "./useFontStyle": "./dist/components/useFont.js"
   }
 }