fontdue-js 2.8.3 → 2.9.0

package/dist/components/CharacterViewer/index.js

@@ -9,16 +9,19 @@ exports.CharacterViewerPreloadedSlugQueryRenderer = CharacterViewerPreloadedSlug
 exports.default = CharacterViewer;
 var _CharacterViewerSlugQuery2 = _interopRequireDefault(require("../../__generated__/CharacterViewerSlugQuery.graphql"));
 var _CharacterViewerIDQuery2 = _interopRequireDefault(require("../../__generated__/CharacterViewerIDQuery.graphql"));
-var _CharacterViewer_family2 = _interopRequireDefault(require("../../__generated__/CharacterViewer_family.graphql"));
+var _CharacterViewer_style2 = _interopRequireDefault(require("../../__generated__/CharacterViewer_style.graphql"));
 var _CharacterViewer_collection2 = _interopRequireDefault(require("../../__generated__/CharacterViewer_collection.graphql"));
+var _CharacterViewer_family2 = _interopRequireDefault(require("../../__generated__/CharacterViewer_family.graphql"));
 var _react = _interopRequireWildcard(require("react"));
 var _reactRelay = require("react-relay");
 var _resizeObserver = _interopRequireDefault(require("@react-hook/resize-observer"));
 var _utils = require("../../utils");
-var _Select = _interopRequireDefault(require("../Select"));
 var _useFontStyle = _interopRequireDefault(require("../useFontStyle"));
 var _Stylesheet = _interopRequireDefault(require("../Stylesheet"));
 var _useSerializablePreloadedQuery = _interopRequireDefault(require("../../relay/useSerializablePreloadedQuery"));
+var _StyleSelect = _interopRequireDefault(require("./StyleSelect"));
+var _Checkbox = _interopRequireDefault(require("../Checkbox"));
+var _CharacterViewerStyleRefetchQuery = _interopRequireDefault(require("../../__generated__/CharacterViewerStyleRefetchQuery.graphql"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
@@ -37,75 +40,6 @@ function useSize() {
     height: size === null || size === void 0 ? void 0 : size.height
   };
 }
-const collectionInfo = collection => ({
-  id: collection.id,
-  name: collection.name,
-  fontStyles: collection.fontStyles,
-  isVariableFont: collection.isVariableFont,
-  cssUrl: collection.cssUrl,
-  collectionType: collection.collectionType
-});
-const StyleSelect = _ref => {
-  let {
-    collections,
-    value,
-    onChange
-  } = _ref;
-  const handleChange = e => {
-    const value = e.target.value;
-    if (value.includes(':::')) {
-      var _fontStyle$variableIn;
-      const [fontStyleId, variableInstanceName] = value.split(':::');
-      const fontStyle = collections.flatMap(coll => coll.fontStyles).find(style => style.id === fontStyleId);
-      const instance = fontStyle === null || fontStyle === void 0 ? void 0 : (_fontStyle$variableIn = fontStyle.variableInstances) === null || _fontStyle$variableIn === void 0 ? void 0 : _fontStyle$variableIn.find(_ref2 => {
-        let {
-          name
-        } = _ref2;
-        return name === variableInstanceName;
-      });
-      let variableSettings;
-      if (instance) variableSettings = (0, _utils.variableInstanceSettings)(instance);
-      onChange({
-        fontStyleId,
-        variableSettings
-      });
-    } else {
-      onChange({
-        fontStyleId: value
-      });
-    }
-  };
-  let selectValue = value.fontStyleId;
-  if (value.variableSettings) {
-    var _fontStyle$variableIn2;
-    const fontStyle = collections.flatMap(coll => coll.fontStyles).find(style => style.id === value.fontStyleId);
-    const instance = fontStyle === null || fontStyle === void 0 ? void 0 : (_fontStyle$variableIn2 = fontStyle.variableInstances) === null || _fontStyle$variableIn2 === void 0 ? void 0 : _fontStyle$variableIn2.find(instance => (0, _utils.compareVariableSettings)(instance, value.variableSettings));
-    if (instance) {
-      selectValue = `${value.fontStyleId}:::${instance.name}`;
-    }
-  }
-  return /*#__PURE__*/_react.default.createElement(_Select.default, {
-    options: collections.flatMap(coll => {
-      var _coll$fontStyles2;
-      if (coll.isVariableFont) {
-        var _coll$fontStyles;
-        return ((_coll$fontStyles = coll.fontStyles) === null || _coll$fontStyles === void 0 ? void 0 : _coll$fontStyles.flatMap(style => {
-          var _style$variableInstan;
-          return (_style$variableInstan = style.variableInstances) === null || _style$variableInstan === void 0 ? void 0 : _style$variableInstan.map(instance => ({
-            value: `${style.id}:::${instance.name}`,
-            text: `${coll.name} ${instance.name}`
-          })).filter(_utils.notEmpty);
-        }).filter(_utils.notEmpty)) ?? [];
-      }
-      return ((_coll$fontStyles2 = coll.fontStyles) === null || _coll$fontStyles2 === void 0 ? void 0 : _coll$fontStyles2.map(style => ({
-        value: style.id,
-        text: `${coll.name} ${style.name}`
-      })).filter(_utils.notEmpty)) ?? [];
-    }),
-    value: selectValue,
-    onChange: handleChange
-  });
-};
 function Character(props) {
   const ref = (0, _react.useRef)(null);
   const [size, setSize] = (0, _react.useState)(1);
@@ -120,6 +54,23 @@ function Character(props) {
     "data-size": size
   }));
 }
+function GlyphMeta(_ref) {
+  let {
+    glyph,
+    featuresChecked,
+    setFeaturesChecked,
+    getGlyphName,
+    getUnicodeName
+  } = _ref;
+  if (!glyph) return null;
+  const unicodeName = getUnicodeName(glyph);
+  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("span", null, "Glyph name"), /*#__PURE__*/_react.default.createElement("span", null, getGlyphName(glyph)), unicodeName && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("span", null, "Unicode name"), /*#__PURE__*/_react.default.createElement("span", {
+    title: unicodeName
+  }, unicodeName)), /*#__PURE__*/_react.default.createElement("span", null, "Unicode decimal"), /*#__PURE__*/_react.default.createElement("span", null, glyph.string.split('').map(str => str.charCodeAt(0).toString(10)).join(', ')), /*#__PURE__*/_react.default.createElement("span", null, "Unicode hex"), /*#__PURE__*/_react.default.createElement("span", null, glyph.string.split('').map(str => str.charCodeAt(0).toString(16).padStart(4, '0')).join(', ')), glyph.features && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("span", null, "OpenType feature", glyph.features.length > 1 ? 's' : ''), /*#__PURE__*/_react.default.createElement("span", null, /*#__PURE__*/_react.default.createElement("label", null, /*#__PURE__*/_react.default.createElement(_Checkbox.default, {
+    checked: featuresChecked,
+    onChange: e => setFeaturesChecked(e.target.checked)
+  }), glyph.features.join(', ')))));
+}
 function useUnicodeData() {
   const [data, setData] = (0, _react.useState)();
   (0, _react.useEffect)(() => {
@@ -136,26 +87,85 @@ function useUnicodeData() {
   }, []);
   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.charCodeAt(0);
+}
+function fromCharCode(code) {
+  return String.fromCharCode(code);
+}
+function flattenCharacterList(charSet, glyphNames) {
+  if (!glyphNames) 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_family2.default.hash && _CharacterViewer_family2.default.hash !== "02c42505dc4e330bb7c9034ba54e12f6" && 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_family2.default;
 function CharacterViewerComponent(_ref3) {
-  var _collection$children, _collection$fontStyle, _collection$children2, _collection$children3, _collection$children4, _fontStyle$glyphNames, _fontStyle$glyphNames2, _fontStyle$featureCha, _fontStyle$featureCha2, _fontStyle$featureCha3, _fontStyle$featureCha4, _fontStyle$glyphNames3, _fontStyle$glyphNames4, _fontStyle$featureCha5, _fontStyle$characterB, _fontStyle$featureCha6, _fontStyle$featureCha7, _fontStyle$featureCha8;
   let {
     collection: collectionKey
   } = _ref3;
-  const collection = (0, _reactRelay.useFragment)((_CharacterViewer_collection2.default.hash && _CharacterViewer_collection2.default.hash !== "2f49d241268129a888942889cad0bebb" && 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_collection2.default), collectionKey);
-  const allCollections = [collectionInfo(collection)].concat(((_collection$children = collection.children) === null || _collection$children === void 0 ? void 0 : _collection$children.map(collectionInfo)) ?? []);
+  const collection = (0, _reactRelay.useFragment)((_CharacterViewer_collection2.default.hash && _CharacterViewer_collection2.default.hash !== "806e33bb73206ac443c6880d2941131d" && 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_collection2.default), collectionKey);
+  const [fontStyle, refetchFontStyle] = (0, _reactRelay.useRefetchableFragment)((_CharacterViewer_style2.default.hash && _CharacterViewer_style2.default.hash !== "cd4bc4064dd23132ba3bf3d207fe6cb9" && 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_style2.default), collection.featureStyle);
+  let families = [];
+  if (collection.collectionType === 'family') families = [collection];
+  if (collection.collectionType === 'superfamily' && collection.children) families = collection.children;
   const unicodeData = useUnicodeData();
-  const initialFontStyle = collection.featureStyle ?? ((_collection$fontStyle = collection.fontStyles) === null || _collection$fontStyle === void 0 ? void 0 : _collection$fontStyle[0]) ?? ((_collection$children2 = collection.children) === null || _collection$children2 === void 0 ? void 0 : (_collection$children3 = _collection$children2[0]) === null || _collection$children3 === void 0 ? void 0 : (_collection$children4 = _collection$children3.fontStyles) === null || _collection$children4 === void 0 ? void 0 : _collection$children4[0]);
   let initialVariableSettings;
-  if (initialFontStyle && initialFontStyle.variableInstances) {
-    initialVariableSettings = (0, _utils.variableInstanceSettings)(initialFontStyle.variableInstances[0]);
+  if (fontStyle !== null && fontStyle !== void 0 && fontStyle.variableInstances) {
+    initialVariableSettings = (0, _utils.variableInstanceSettings)(fontStyle.variableInstances[0]);
   }
-  const [fontStyleId, setFontStyleId] = (0, _react.useState)((initialFontStyle === null || initialFontStyle === void 0 ? void 0 : initialFontStyle.id) ?? null);
   const [variableSettings, setVariableSettings] = (0, _react.useState)(initialVariableSettings);
+  const [featuresChecked, setFeaturesChecked] = (0, _react.useState)(true);
+  const environment = (0, _reactRelay.useRelayEnvironment)();
   const handleStyleSelect = value => {
-    setFontStyleId(value.fontStyleId);
-    setVariableSettings(value.variableSettings);
+    const variables = {
+      id: value.fontStyleId
+    };
+    // avoid Suspense using fetchQuery. future react may simplify this
+    (0, _reactRelay.fetchQuery)(environment, _CharacterViewerStyleRefetchQuery.default, variables).subscribe({
+      complete: () => {
+        refetchFontStyle(variables, {
+          fetchPolicy: 'store-only'
+        });
+        setVariableSettings(value.variableSettings);
+      }
+    });
   };
-  const fontStyle = allCollections.flatMap(coll => coll.fontStyles).find(style => style.id === fontStyleId);
   let {
     style
   } = (0, _useFontStyle.default)({
@@ -169,33 +179,31 @@ function CharacterViewerComponent(_ref3) {
       ...(0, _utils.variableSettingsCSS)(variableSettings)
     };
   }
-  const [selectedCharacter, setSelectedCharacter] = (0, _react.useState)('A');
-  const [activeCharacter, setActiveCharacter] = (0, _react.useState)('A');
-  const visibleCharacter = activeCharacter ?? selectedCharacter;
-  const visibleCharacterGlyphName = fontStyle === null || fontStyle === void 0 ? void 0 : (_fontStyle$glyphNames = fontStyle.glyphNames) === null || _fontStyle$glyphNames === void 0 ? void 0 : (_fontStyle$glyphNames2 = _fontStyle$glyphNames.find(_ref4 => {
-    let {
-      characters,
-      feature
-    } = _ref4;
-    return feature === null && visibleCharacter === characters;
-  })) === null || _fontStyle$glyphNames2 === void 0 ? void 0 : _fontStyle$glyphNames2.name;
-  const [selectedFeatureCharacter, setSelectedFeatureCharacter] = (0, _react.useState)();
-  const [activeFeatureCharacter, setActiveFeatureCharacter] = (0, _react.useState)([(fontStyle === null || fontStyle === void 0 ? void 0 : (_fontStyle$featureCha = fontStyle.featureCharacters) === null || _fontStyle$featureCha === void 0 ? void 0 : (_fontStyle$featureCha2 = _fontStyle$featureCha[0]) === null || _fontStyle$featureCha2 === void 0 ? void 0 : _fontStyle$featureCha2.characters[0]) ?? '', fontStyle === null || fontStyle === void 0 ? void 0 : (_fontStyle$featureCha3 = fontStyle.featureCharacters) === null || _fontStyle$featureCha3 === void 0 ? void 0 : (_fontStyle$featureCha4 = _fontStyle$featureCha3[0]) === null || _fontStyle$featureCha4 === void 0 ? void 0 : _fontStyle$featureCha4.feature]);
-  const visibleFeatureCharacter = activeFeatureCharacter ?? selectedFeatureCharacter;
-  const visibleFeatureCharacterGlyphName = fontStyle === null || fontStyle === void 0 ? void 0 : (_fontStyle$glyphNames3 = fontStyle.glyphNames) === null || _fontStyle$glyphNames3 === void 0 ? void 0 : (_fontStyle$glyphNames4 = _fontStyle$glyphNames3.find(_ref5 => {
-    let {
-      characters,
-      feature
-    } = _ref5;
-    return feature === (visibleFeatureCharacter === null || visibleFeatureCharacter === void 0 ? void 0 : visibleFeatureCharacter[1]) && (visibleFeatureCharacter === null || visibleFeatureCharacter === void 0 ? void 0 : visibleFeatureCharacter[0]) === characters;
-  })) === null || _fontStyle$glyphNames4 === void 0 ? void 0 : _fontStyle$glyphNames4.name;
-  const featureUnicodeDecimal = visibleFeatureCharacter === null || visibleFeatureCharacter === void 0 ? void 0 : visibleFeatureCharacter[0].split('').map(char => char.charCodeAt(0).toString(10)).join(', ');
-  const featureUnicodeHex = visibleFeatureCharacter === null || visibleFeatureCharacter === void 0 ? void 0 : visibleFeatureCharacter[0].split('').map(char => char.charCodeAt(0).toString(16).padStart(4, '0')).join(', ');
+  const [selectedGlyph, setSelectedGlyph] = (0, _react.useState)({
+    string: 'A'
+  });
+  const [activeGlyph, setActiveGlyph] = (0, _react.useState)({
+    string: 'A'
+  });
+  const visibleGlyph = activeGlyph ?? selectedGlyph;
+  const getGlyphName = (0, _react.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 => {
+      let {
+        characters,
+        features
+      } = _ref4;
+      return compareGlyphs(glyph, {
+        string: characters,
+        features
+      });
+    })) === null || _fontStyle$glyphNames2 === void 0 ? void 0 : _fontStyle$glyphNames2.name) ?? null;
+  }, [fontStyle, compareGlyphs]);
+  const getUnicodeName = (0, _react.useCallback)(glyph => {
+    return (unicodeData === null || unicodeData === void 0 ? void 0 : unicodeData[glyph.string.charCodeAt(0)]) ?? null;
+  }, [unicodeData]);
   const handleMouseLeave = () => {
-    if (selectedCharacter) setActiveCharacter(undefined);
-  };
-  const handleFeatureCharacterMouseLeave = () => {
-    if (selectedFeatureCharacter) setActiveFeatureCharacter(undefined);
+    if (selectedGlyph) setActiveGlyph(undefined);
   };
   const {
     ref: blocksRef,
@@ -206,12 +214,6 @@ function CharacterViewerComponent(_ref3) {
     width: monitorWidth
   } = useSize();
   if (!fontStyle) return null;
-  const characterVariants = (_fontStyle$featureCha5 = fontStyle.featureCharacters) === null || _fontStyle$featureCha5 === void 0 ? void 0 : _fontStyle$featureCha5.filter(_ref6 => {
-    let {
-      feature
-    } = _ref6;
-    return feature.startsWith('cv');
-  });
   const lines = /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("div", {
     className: "character-viewer__monitor__line",
     "data-name": "baseline"
@@ -248,6 +250,19 @@ function CharacterViewerComponent(_ref3) {
   }, "x-Height"), /*#__PURE__*/_react.default.createElement("span", {
     className: "character-viewer__monitor__line__value"
   }, fontStyle.verticalMetrics.xHeight)));
+  const groups = (0, _react.useMemo)(() => {
+    var _collection$glyphGrou;
+    return (_collection$glyphGrou = collection.glyphGroups) === null || _collection$glyphGrou === void 0 ? void 0 : _collection$glyphGrou.map(_ref5 => {
+      let {
+        name,
+        characterSets
+      } = _ref5;
+      return {
+        name,
+        characterSets: characterSets.map(set => flattenCharacterList(set, fontStyle.glyphNames)).filter(_utils.notEmpty)
+      };
+    });
+  }, [collection, fontStyle]);
   return /*#__PURE__*/_react.default.createElement("div", {
     className: "character-viewer",
     style: {
@@ -259,45 +274,50 @@ function CharacterViewerComponent(_ref3) {
       '--line-gap': fontStyle.verticalMetrics.lineGap ?? undefined,
       '--monitor-width': monitorWidth
     }
-  }, allCollections.filter(coll => coll.collectionType === 'family').map(coll => /*#__PURE__*/_react.default.createElement(_Stylesheet.default, {
+  }, families.filter(coll => coll.collectionType === 'family').map(coll => /*#__PURE__*/_react.default.createElement(_Stylesheet.default, {
     key: coll.id,
     href: coll.cssUrl
   })), /*#__PURE__*/_react.default.createElement("div", {
     className: "character-viewer__character-map"
   }, /*#__PURE__*/_react.default.createElement("div", {
     className: "character-viewer__monitor"
-  }, visibleCharacter && /*#__PURE__*/_react.default.createElement("div", {
+  }, visibleGlyph && /*#__PURE__*/_react.default.createElement("div", {
     className: "character-viewer__monitor__container"
   }, /*#__PURE__*/_react.default.createElement("div", {
-    className: "character-viewer__monitor__title"
-  }, "Character map"), /*#__PURE__*/_react.default.createElement("div", {
     className: "character-viewer__monitor__character-container"
   }, /*#__PURE__*/_react.default.createElement("div", {
     className: "character-viewer__monitor__character",
-    style: style,
+    style: {
+      ...style,
+      fontFeatureSettings: visibleGlyph.features && featuresChecked ? `${visibleGlyph.features.map(feature => `'${feature}' 1`).join(', ')}` : `'calt' off, 'liga' off`
+    },
     ref: monitorRef
-  }, /*#__PURE__*/_react.default.createElement("span", null, visibleCharacter)), lines), /*#__PURE__*/_react.default.createElement("div", {
+  }, /*#__PURE__*/_react.default.createElement("span", null, visibleGlyph.string)), lines), /*#__PURE__*/_react.default.createElement("div", {
     className: "character-viewer__monitor__details"
-  }, /*#__PURE__*/_react.default.createElement("span", null, "Font style"), /*#__PURE__*/_react.default.createElement("span", null, /*#__PURE__*/_react.default.createElement(StyleSelect, {
-    collections: allCollections,
+  }, /*#__PURE__*/_react.default.createElement("span", null, "Font style"), /*#__PURE__*/_react.default.createElement("span", null, /*#__PURE__*/_react.default.createElement(_StyleSelect.default, {
+    collections: families,
     onChange: handleStyleSelect,
     value: {
-      fontStyleId,
+      fontStyleId: fontStyle.id,
       variableSettings
     }
-  })), /*#__PURE__*/_react.default.createElement("span", null, "Glyph name"), /*#__PURE__*/_react.default.createElement("span", null, visibleCharacterGlyphName), /*#__PURE__*/_react.default.createElement("span", null, "Unicode name"), /*#__PURE__*/_react.default.createElement("span", {
-    title: (unicodeData === null || unicodeData === void 0 ? void 0 : unicodeData[visibleCharacter.charCodeAt(0)]) ?? ''
-  }, unicodeData ? unicodeData[visibleCharacter.charCodeAt(0)] ?? '' : 'Loading...'), /*#__PURE__*/_react.default.createElement("span", null, "Unicode decimal"), /*#__PURE__*/_react.default.createElement("span", null, visibleCharacter.charCodeAt(0).toString(10)), /*#__PURE__*/_react.default.createElement("span", null, "Unicode hex"), /*#__PURE__*/_react.default.createElement("span", null, visibleCharacter.charCodeAt(0).toString(16).padStart(4, '0'))))), /*#__PURE__*/_react.default.createElement("div", {
+  })), /*#__PURE__*/_react.default.createElement(GlyphMeta, {
+    glyph: visibleGlyph,
+    getGlyphName: getGlyphName,
+    getUnicodeName: getUnicodeName,
+    featuresChecked: featuresChecked,
+    setFeaturesChecked: setFeaturesChecked
+  })))), /*#__PURE__*/_react.default.createElement("div", {
     className: "character-viewer_blocks",
     ref: blocksRef,
     style: {
       '--width': blocksWidth ?? 600
     }
-  }, (_fontStyle$characterB = fontStyle.characterBlocks) === null || _fontStyle$characterB === void 0 ? void 0 : _fontStyle$characterB.map((_ref7, i) => {
+  }, groups === null || groups === void 0 ? void 0 : groups.map((_ref6, i) => {
     let {
       name,
-      characters
-    } = _ref7;
+      characterSets
+    } = _ref6;
     return /*#__PURE__*/_react.default.createElement("div", {
       className: "character-viewer__block",
       key: i,
@@ -308,126 +328,31 @@ function CharacterViewerComponent(_ref3) {
       className: "character-viewer__block__characters",
       style: style,
       onMouseLeave: handleMouseLeave
-    }, characters.map((chars, j) => /*#__PURE__*/_react.default.createElement(Character, {
-      key: j,
-      onClick: () => setSelectedCharacter(chars),
-      onMouseEnter: () => setActiveCharacter(chars),
-      "data-selected": selectedCharacter === chars
-    }, chars))));
-  }))), (_fontStyle$featureCha6 = fontStyle.featureCharacters) !== null && _fontStyle$featureCha6 !== void 0 && _fontStyle$featureCha6.length ? /*#__PURE__*/_react.default.createElement("div", {
-    className: "character-viewer__features-map"
-  }, /*#__PURE__*/_react.default.createElement("div", {
-    className: "character-viewer__feature-monitor"
-  }, visibleFeatureCharacter && /*#__PURE__*/_react.default.createElement("div", {
-    className: "character-viewer__feature-monitor__container"
-  }, /*#__PURE__*/_react.default.createElement("div", {
-    className: "character-viewer__feature-monitor__title"
-  }, "OpenType features"), /*#__PURE__*/_react.default.createElement("div", {
-    className: "character-viewer__feature-monitor__labels"
-  }, /*#__PURE__*/_react.default.createElement("span", {
-    className: "character-viewer__feature-monitor__label"
-  }, "OFF"), /*#__PURE__*/_react.default.createElement("span", {
-    className: "character-viewer__feature-monitor__label"
-  }, "ON")), /*#__PURE__*/_react.default.createElement("div", {
-    className: "character-viewer__feature-monitor__characters"
-  }, /*#__PURE__*/_react.default.createElement("div", {
-    className: "character-viewer__feature-monitor__characters__off"
-  }, /*#__PURE__*/_react.default.createElement("div", {
-    className: "character-viewer__feature-monitor__character",
-    style: {
-      ...style,
-      fontFeatureSettings: `'calt' off, 'liga' off, '${visibleFeatureCharacter[1]}' off`
-    }
-  }, visibleFeatureCharacter[0])), /*#__PURE__*/_react.default.createElement("div", {
-    className: "character-viewer__feature-monitor__characters__on"
-  }, /*#__PURE__*/_react.default.createElement("div", {
-    className: "character-viewer__feature-monitor__character",
-    style: {
-      ...style,
-      fontFeatureSettings: `'${visibleFeatureCharacter[1]}' on`
-    }
-  }, visibleFeatureCharacter[0])), lines), /*#__PURE__*/_react.default.createElement("div", {
-    className: "character-viewer__monitor__details"
-  }, /*#__PURE__*/_react.default.createElement("span", null, "Font style"), /*#__PURE__*/_react.default.createElement("span", null, /*#__PURE__*/_react.default.createElement(StyleSelect, {
-    collections: allCollections,
-    onChange: handleStyleSelect,
-    value: {
-      fontStyleId,
-      variableSettings
-    }
-  })), /*#__PURE__*/_react.default.createElement("span", null, "Glyph name"), /*#__PURE__*/_react.default.createElement("span", null, visibleFeatureCharacterGlyphName), /*#__PURE__*/_react.default.createElement("span", null, "Unicode decimal"), /*#__PURE__*/_react.default.createElement("span", {
-    title: featureUnicodeDecimal
-  }, featureUnicodeDecimal), /*#__PURE__*/_react.default.createElement("span", null, "Unicode hex"), /*#__PURE__*/_react.default.createElement("span", {
-    title: featureUnicodeHex
-  }, featureUnicodeHex), /*#__PURE__*/_react.default.createElement("span", null, "OpenType feature"), /*#__PURE__*/_react.default.createElement("span", null, visibleFeatureCharacter[1])))), /*#__PURE__*/_react.default.createElement("div", {
-    className: "character-viewer_blocks",
-    style: {
-      '--width': blocksWidth ?? 600
-    }
-  }, (_fontStyle$featureCha7 = fontStyle.featureCharacters) === null || _fontStyle$featureCha7 === void 0 ? void 0 : (_fontStyle$featureCha8 = _fontStyle$featureCha7.filter(_ref8 => {
-    let {
-      feature
-    } = _ref8;
-    return !feature.startsWith('cv');
-  })) === null || _fontStyle$featureCha8 === void 0 ? void 0 : _fontStyle$featureCha8.map((_ref9, i) => {
-    let {
-      name,
-      feature,
-      characters
-    } = _ref9;
-    return /*#__PURE__*/_react.default.createElement("div", {
-      className: "character-viewer__block",
-      key: i,
-      "data-feature": feature,
-      "data-name": name
-    }, /*#__PURE__*/_react.default.createElement("div", {
-      className: "character-viewer__block__name"
-    }, name), /*#__PURE__*/_react.default.createElement("div", {
-      className: "character-viewer__block__characters",
-      style: {
-        ...style,
-        fontFeatureSettings: `'${feature}' 1`
-      },
-      onMouseLeave: handleFeatureCharacterMouseLeave
-    }, characters.map((chars, j) => /*#__PURE__*/_react.default.createElement(Character, {
+    }, characterSets.map((set, j) => /*#__PURE__*/_react.default.createElement("div", {
       key: j,
-      onClick: () => setSelectedFeatureCharacter([chars, feature]),
-      onMouseEnter: () => setActiveFeatureCharacter([chars, feature]),
-      "data-selected": (selectedFeatureCharacter === null || selectedFeatureCharacter === void 0 ? void 0 : selectedFeatureCharacter[0]) === chars && (selectedFeatureCharacter === null || selectedFeatureCharacter === void 0 ? void 0 : selectedFeatureCharacter[1]) === feature
-    }, chars))));
-  }), characterVariants !== null && characterVariants !== void 0 && characterVariants.length ? /*#__PURE__*/_react.default.createElement("div", {
-    className: "character-viewer__block",
-    key: "cv"
-  }, /*#__PURE__*/_react.default.createElement("div", {
-    className: "character-viewer__block__name"
-  }, "Character Variants"), /*#__PURE__*/_react.default.createElement("div", {
-    className: "character-viewer__block__characters",
-    style: {
-      ...style
-    },
-    onMouseLeave: handleFeatureCharacterMouseLeave
-  }, characterVariants.flatMap((_ref10, i) => {
-    let {
-      feature,
-      characters
-    } = _ref10;
-    return characters.map((chars, j) => /*#__PURE__*/_react.default.createElement(Character, {
-      key: `${i}${j}`,
+      className: "character-viewer__block__character-list",
       style: {
-        fontFeatureSettings: `'${feature}' 1`
-      },
-      onClick: () => setSelectedFeatureCharacter([chars, feature]),
-      onMouseEnter: () => setActiveFeatureCharacter([chars, feature]),
-      "data-selected": (selectedFeatureCharacter === null || selectedFeatureCharacter === void 0 ? void 0 : selectedFeatureCharacter[0]) === chars && (selectedFeatureCharacter === null || selectedFeatureCharacter === void 0 ? void 0 : selectedFeatureCharacter[1]) === feature
-    }, chars));
-  }))) : null)) : null);
+        fontFeatureSettings: set.features ? `${set.features.map(feature => `'${feature}' 1`).join(', ')}` : undefined
+      }
+    }, set.characters.map((chars, k) => {
+      const selection = {
+        string: chars,
+        features: set.features
+      };
+      return /*#__PURE__*/_react.default.createElement(Character, {
+        key: k,
+        onClick: () => setSelectedGlyph(selection),
+        onMouseEnter: () => setActiveGlyph(selection),
+        "data-selected": compareGlyphs(selectedGlyph, selection)
+      }, chars);
+    })))));
+  }))));
 }
-_CharacterViewer_family2.default.hash && _CharacterViewer_family2.default.hash !== "d940cabe9ed658d5cbed547287f2de0e" && 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_family2.default;
 const idQuery = (_CharacterViewerIDQuery2.default.hash && _CharacterViewerIDQuery2.default.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."), _CharacterViewerIDQuery2.default);
-function CharacterViewerIdQueryRenderer(_ref11) {
+function CharacterViewerIdQueryRenderer(_ref7) {
   let {
     collectionId
-  } = _ref11;
+  } = _ref7;
   const data = (0, _reactRelay.useLazyLoadQuery)(idQuery, {
     collectionId
   });
@@ -436,11 +361,11 @@ function CharacterViewerIdQueryRenderer(_ref11) {
     collection: data.node
   });
 }
-function CharacterViewerPreloadedIDQueryRenderer(_ref12) {
+function CharacterViewerPreloadedIDQueryRenderer(_ref8) {
   let {
     preloadedQuery,
     ...rest
-  } = _ref12;
+  } = _ref8;
   const queryRef = (0, _useSerializablePreloadedQuery.default)(preloadedQuery);
   const data = (0, _reactRelay.usePreloadedQuery)(idQuery, queryRef);
   if (!data.node) return null;
@@ -448,11 +373,11 @@ function CharacterViewerPreloadedIDQueryRenderer(_ref12) {
     collection: data.node
   }));
 }
-function CharacterViewerSlugQueryRenderer(_ref13) {
+function CharacterViewerSlugQueryRenderer(_ref9) {
   var _data$viewer, _data$viewer$slug;
   let {
     collectionSlug
-  } = _ref13;
+  } = _ref9;
   const data = (0, _reactRelay.useLazyLoadQuery)((_CharacterViewerSlugQuery2.default.hash && _CharacterViewerSlugQuery2.default.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."), _CharacterViewerSlugQuery2.default), {
     collectionSlug
   });
@@ -462,12 +387,12 @@ function CharacterViewerSlugQueryRenderer(_ref13) {
     collection: collection
   });
 }
-function CharacterViewerPreloadedSlugQueryRenderer(_ref14) {
+function CharacterViewerPreloadedSlugQueryRenderer(_ref10) {
   var _data$viewer2, _data$viewer2$slug;
   let {
     preloadedQuery,
     ...rest
-  } = _ref14;
+  } = _ref10;
   const queryRef = (0, _useSerializablePreloadedQuery.default)(preloadedQuery);
   const data = (0, _reactRelay.usePreloadedQuery)(idQuery, queryRef);
   const collection = data === null || data === void 0 ? void 0 : (_data$viewer2 = data.viewer) === null || _data$viewer2 === void 0 ? void 0 : (_data$viewer2$slug = _data$viewer2.slug) === null || _data$viewer2$slug === void 0 ? void 0 : _data$viewer2$slug.fontCollection;
@@ -476,11 +401,11 @@ function CharacterViewerPreloadedSlugQueryRenderer(_ref14) {
     collection: collection
   }));
 }
-function CharacterViewer(_ref15) {
+function CharacterViewer(_ref11) {
   let {
     collectionId,
     collectionSlug
-  } = _ref15;
+  } = _ref11;
   if (collectionId) {
     return /*#__PURE__*/_react.default.createElement(CharacterViewerIdQueryRenderer, {
       collectionId: collectionId

package/dist/components/StoreModal/StoreModalFamilyButton.js

@@ -44,14 +44,12 @@ function FamilyButton(_ref) {
   } = (0, _useTotalStyles.default)({
     fontCollection: collection
   });
-  let label;
-  if (collection.isVariableFont) {
-    label = 'Variable font';
-  } else {
-    label = (0, _utils.pluralize)(totalStyles, 'style');
-    if (variableFonts) {
-      label += ', ' + (0, _utils.pluralize)(variableFonts, 'variable font');
-    }
+  let label = [];
+  if (totalStyles > 0) {
+    label.push((0, _utils.pluralize)(totalStyles, 'style'));
+  }
+  if (variableFonts > 0) {
+    label.push((0, _utils.pluralize)(variableFonts, 'variable font'));
   }
   return /*#__PURE__*/_react.default.createElement(_StoreModalFamilyButton.default, _extends({
     selected: selected,
@@ -61,7 +59,7 @@ function FamilyButton(_ref) {
       Component: "span",
       fontStyle: collection.featureStyle
     }, collection.name, getSuffix(collection)),
-    label,
+    label: label.join(', '),
     price: collection.sku && /*#__PURE__*/_react.default.createElement(_SKUPrice.default, {
       sku: collection.sku,
       format: _Price.PriceFormat.Truncated

package/dist/components/StoreModal/StoreModalIndexItem.js

@@ -42,14 +42,12 @@ const StoreModalIndexItem = _ref => {
   } = (0, _useTotalStyles.default)({
     fontCollection: data
   });
-  let label;
-  if (data.isVariableFont) {
-    label = 'Variable font';
-  } else {
-    label = (0, _utils.pluralize)(totalStyles, 'style');
-    if (variableFonts) {
-      label += ', ' + (0, _utils.pluralize)(variableFonts, 'variable font');
-    }
+  let label = [];
+  if (totalStyles > 0) {
+    label.push((0, _utils.pluralize)(totalStyles, 'style'));
+  }
+  if (variableFonts > 0) {
+    label.push((0, _utils.pluralize)(variableFonts, 'variable font'));
   }
   return /*#__PURE__*/_react.default.createElement(_StoreModalIndexItem.default, {
     key: data.id,
@@ -65,7 +63,7 @@ const StoreModalIndexItem = _ref => {
     }), /*#__PURE__*/_react.default.createElement(_FontStyle.default, {
       fontStyle: data.featureStyle
     }, data.name)) : data.name,
-    label
+    label: label.join(', ')
   });
 };
 var _default = StoreModalIndexItem;

package/dist/components/useTotalStyles.d.ts

@@ -4,6 +4,6 @@ interface useTotalStyles_props {
 }
 declare const useTotalStyles: ({ fontCollection }: useTotalStyles_props) => {
     totalStyles: number;
-    variableFonts: number | undefined;
+    variableFonts: number;
 };
 export default useTotalStyles;