fontdue-js 3.0.2 → 3.0.4

package/CHANGELOG.md

@@ -1,3 +1,11 @@
+## 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.
+
 ## 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.

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/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/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);
@@ -1737,6 +1738,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.2";
+export const version = "3.0.4";
 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.2",
+  "version": "3.0.4",
   "type": "module",
   "scripts": {
     "build": "npm run relay && run-p build-js build-css build-ts",