fontdue-js 2.26.0 → 2.28.0

package/dist/components/TypeTester/TypeTesterStyleSelectData.js

@@ -4,19 +4,18 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = TypeTesterStyleSelectData;
-var _TypeTesterStyleSelectData_viewer2 = _interopRequireDefault(require("../../__generated__/TypeTesterStyleSelectData_viewer.graphql"));
 var _TypeTesterStyleSelectData_fontStyle2 = _interopRequireDefault(require("../../__generated__/TypeTesterStyleSelectData_fontStyle.graphql"));
 var _TypeTesterStyleSelectData_fontStyleData2 = _interopRequireDefault(require("../../__generated__/TypeTesterStyleSelectData_fontStyleData.graphql"));
 var _react = _interopRequireWildcard(require("react"));
 var _reactRelay = require("react-relay");
+var _relayRuntime = require("relay-runtime");
 var _utils = require("../../utils");
 var _TypeTesterStyleSelect = _interopRequireDefault(require("./TypeTesterStyleSelect"));
-var _relayRuntime = require("relay-runtime");
+var _TypeTesterFamilies = require("./TypeTesterFamilies");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 _TypeTesterStyleSelectData_fontStyleData2.default.hash && _TypeTesterStyleSelectData_fontStyleData2.default.hash !== "fb09207ccab08c7e73677486469a3c95" && console.error("The definition of 'TypeTesterStyleSelectData_fontStyleData' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _TypeTesterStyleSelectData_fontStyleData2.default;
-
 // get a score for similarity between two styles
 // 0 < n <= 1
 // where 1 = exact match
@@ -37,77 +36,236 @@ const computeSimilarity = (left, right) => {
   const stretchSimilarity = left.cssStretch === right.cssStretch ? 1 : 0.9;
   return weightSimilarity * styleSimilarity * stretchSimilarity;
 };
-function TypeTesterStyleSelectData(_ref) {
-  var _viewer$families, _viewer$families$edge, _fontStyle$variableIn;
+
+// Build the `selectedFamily` shape the dropdown expects. Uses the lazily
+// fetched styles when available, otherwise stubs the current family with just
+// the current style so the collapsed selector still shows something meaningful.
+function buildSelectedFamily(selectedFamilyId, entry, fontStyle, families) {
+  var _fontStyle$family, _families$find, _fontStyle$family2;
+  const currentFamilyId = ((_fontStyle$family = fontStyle.family) === null || _fontStyle$family === void 0 ? void 0 : _fontStyle$family.id) ?? '';
+  const name = (families === null || families === void 0 ? void 0 : (_families$find = families.find(f => f.id === selectedFamilyId)) === null || _families$find === void 0 ? void 0 : _families$find.name) ?? (selectedFamilyId === currentFamilyId ? (_fontStyle$family2 = fontStyle.family) === null || _fontStyle$family2 === void 0 ? void 0 : _fontStyle$family2.name : undefined) ?? '';
+  if (entry !== null && entry !== void 0 && entry.styles) {
+    return {
+      id: selectedFamilyId,
+      name,
+      isVariableFont: entry.isVariableFont,
+      fontStyles: entry.styles.map(style => ({
+        id: style.id,
+        name: style.name,
+        variableInstances: style.variableInstances
+      }))
+    };
+  }
+  if (selectedFamilyId === currentFamilyId) {
+    var _fontStyle$variableIn;
+    return {
+      id: selectedFamilyId,
+      name,
+      isVariableFont: (((_fontStyle$variableIn = fontStyle.variableInstances) === null || _fontStyle$variableIn === void 0 ? void 0 : _fontStyle$variableIn.length) ?? 0) > 0,
+      fontStyles: [{
+        id: fontStyle.id,
+        name: fontStyle.name,
+        variableInstances: fontStyle.variableInstances ?? null
+      }]
+    };
+  }
+
+  // Switched to a family whose styles haven't arrived yet.
+  return {
+    id: selectedFamilyId,
+    name,
+    isVariableFont: false,
+    fontStyles: null
+  };
+}
+function TypeTesterStyleSelectSelectable(_ref) {
+  var _fontStyle$family3;
   let {
-    fontStyle: fontStyleKey,
-    viewer: viewerKey,
+    fontStyle,
+    variableSettings,
     onSelectFontStyleValue,
     onSelectVariableAxes,
-    config,
-    variableSettings,
-    includeVariableAxesOption
+    includeVariableAxesOption,
+    fallbackName
   } = _ref;
-  const fontStyle = (0, _reactRelay.useFragment)((_TypeTesterStyleSelectData_fontStyle2.default.hash && _TypeTesterStyleSelectData_fontStyle2.default.hash !== "187778816a910be9ab709431d1d818b3" && console.error("The definition of 'TypeTesterStyleSelectData_fontStyle' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _TypeTesterStyleSelectData_fontStyle2.default), fontStyleKey);
-  const viewer = (0, _reactRelay.useFragment)((_TypeTesterStyleSelectData_viewer2.default.hash && _TypeTesterStyleSelectData_viewer2.default.hash !== "5e5834d9202f90bdde5a0a7db49e8639" && console.error("The definition of 'TypeTesterStyleSelectData_viewer' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _TypeTesterStyleSelectData_viewer2.default), viewerKey);
-  const familyData = viewer === null || viewer === void 0 ? void 0 : (_viewer$families = viewer.families) === null || _viewer$families === void 0 ? void 0 : (_viewer$families$edge = _viewer$families.edges) === null || _viewer$families$edge === void 0 ? void 0 : _viewer$families$edge.map(edge => edge.node).filter(_utils.notEmpty).filter(family => {
-    var _family$featureStyle, _family$featureStyle$;
-    return (// make sure the family options' supportedLanguages intersect with the current selection's supportedLanuages.
-      // e.g. if the current font style only supports 'ar', only show families that include 'ar'
-      (_family$featureStyle = family.featureStyle) === null || _family$featureStyle === void 0 ? void 0 : (_family$featureStyle$ = _family$featureStyle.supportedLanguages) === null || _family$featureStyle$ === void 0 ? void 0 : _family$featureStyle$.some(lang => {
-        var _fontStyle$supportedL;
-        return (_fontStyle$supportedL = fontStyle.supportedLanguages) === null || _fontStyle$supportedL === void 0 ? void 0 : _fontStyle$supportedL.includes(lang);
-      })
-    );
-  });
+  const {
+    families,
+    loadingFamilies,
+    loadFamilies,
+    getFamilyStyles,
+    loadFamilyStyles
+  } = (0, _TypeTesterFamilies.useTypeTesterFamilies)();
+  const currentFamilyId = ((_fontStyle$family3 = fontStyle.family) === null || _fontStyle$family3 === void 0 ? void 0 : _fontStyle$family3.id) ?? '';
+
+  // The family the user has switched to but whose styles are still loading.
+  // We keep the style selector + font on the *current* family until this
+  // family's data is ready, then commit family + style + font together — so the
+  // toolbar never flashes a blank style selector mid-switch.
+  const [pendingFamilyId, setPendingFamilyId] = (0, _react.useState)(null);
+
+  // Tracks the family we've already submitted a style pick for, so the pick
+  // effect fires exactly once per switch (it stays mounted until the font
+  // commits, after which `fontStyle` would otherwise retrigger it).
+  const submittedFamilyRef = (0, _react.useRef)(null);
+
+  // While a switch is in flight the pick sets the live variableSettings ahead
+  // of the font committing; freezing to the last settled value keeps the style
+  // selector showing the active font's instance until they realign.
+  const frozenVariableSettingsRef = (0, _react.useRef)(variableSettings);
+  const handleOpen = (0, _react.useCallback)(() => {
+    loadFamilies();
+    loadFamilyStyles(currentFamilyId);
+  }, [loadFamilies, loadFamilyStyles, currentFamilyId]);
   const handleSelectFamilyId = (0, _react.useCallback)(id => {
-    const family = familyData && familyData.find(family => family.id === id);
-    if (!family) return;
+    if (id === currentFamilyId) {
+      // Re-selecting the active family cancels any in-flight switch.
+      setPendingFamilyId(null);
+      submittedFamilyRef.current = null;
+      return;
+    }
+    loadFamilyStyles(id);
+    setPendingFamilyId(id);
+  }, [loadFamilyStyles, currentFamilyId]);
+  const pendingEntry = pendingFamilyId ? getFamilyStyles(pendingFamilyId) : undefined;
+
+  // A switch is visibly in flight from the moment the user picks a new family
+  // until the font actually commits to it (currentFamilyId catches up).
+  const switchingToPending = !!pendingFamilyId && currentFamilyId !== pendingFamilyId;
+
+  // Once the picked family's styles arrive, choose a matching style and report
+  // it upward. We deliberately keep `pendingFamilyId` set (and the busy cue on)
+  // until the font actually switches — clearing it here would briefly revert the
+  // family dropdown during the changed-styles round-trip.
+  (0, _react.useEffect)(() => {
+    if (!pendingFamilyId || !pendingEntry || pendingEntry.loading || !pendingEntry.styles) {
+      return;
+    }
+    if (submittedFamilyRef.current === pendingFamilyId) return;
+    submittedFamilyRef.current = pendingFamilyId;
+    const styles = pendingEntry.styles;
     let fontStyleId = fontStyle.id;
-    let variableSettings;
-    if (family.isVariableFont) {
-      var _family$fontStyles;
-      const newFontStyle = (_family$fontStyles = family.fontStyles) === null || _family$fontStyles === void 0 ? void 0 : _family$fontStyles[0];
+    let newVariableSettings;
+    if (pendingEntry.isVariableFont) {
+      const newFontStyle = styles[0];
       if (newFontStyle) {
         var _newFontStyle$variabl;
         fontStyleId = newFontStyle.id;
         const instance = (_newFontStyle$variabl = newFontStyle.variableInstances) === null || _newFontStyle$variabl === void 0 ? void 0 : _newFontStyle$variabl[0];
-        if (instance) {
-          variableSettings = (0, _utils.variableInstanceSettings)(instance);
-        }
+        if (instance) newVariableSettings = (0, _utils.variableInstanceSettings)(instance);
       }
-    } else {
-      var _family$fontStyles2;
-      const styleWeightDifferences = ((_family$fontStyles2 = family.fontStyles) === null || _family$fontStyles2 === void 0 ? void 0 : _family$fontStyles2.map(right => {
-        return {
-          id: right.id,
-          similarity: computeSimilarity(fontStyle, right)
-        };
-      }).filter(_utils.notEmpty)) || [];
-      fontStyleId = styleWeightDifferences.reduce((closest, current) => {
-        if (current.similarity > closest.similarity) return current;
-        return closest;
-      }).id;
+    } else if (styles.length > 0) {
+      fontStyleId = styles.map(right => ({
+        id: right.id,
+        similarity: computeSimilarity(fontStyle, right)
+      })).reduce((closest, current) => current.similarity > closest.similarity ? current : closest).id;
     }
     onSelectFontStyleValue({
       fontStyleId,
-      variableSettings
+      variableSettings: newVariableSettings
     });
-  }, [familyData, fontStyle]);
-  const instance = variableSettings ? (_fontStyle$variableIn = fontStyle.variableInstances) === null || _fontStyle$variableIn === void 0 ? void 0 : _fontStyle$variableIn.find(instance => (0, _utils.compareVariableSettings)(instance, variableSettings)) : null;
-  return config.selectable && familyData !== null && familyData !== void 0 && familyData.length ? /*#__PURE__*/_react.default.createElement(_TypeTesterStyleSelect.default, {
-    families: familyData,
+  }, [pendingFamilyId, pendingEntry, fontStyle, onSelectFontStyleValue]);
+
+  // The font has actually switched to the picked family — drop the pending
+  // state, which lifts the busy cue and settles the family dropdown on it.
+  (0, _react.useEffect)(() => {
+    if (pendingFamilyId && currentFamilyId === pendingFamilyId) {
+      setPendingFamilyId(null);
+      submittedFamilyRef.current = null;
+    }
+  }, [currentFamilyId, pendingFamilyId]);
+
+  // Capture the variableSettings while settled so it can be held frozen for the
+  // duration of a switch (see `frozenVariableSettingsRef`).
+  (0, _react.useEffect)(() => {
+    if (!switchingToPending) frozenVariableSettingsRef.current = variableSettings;
+  }, [switchingToPending, variableSettings]);
+
+  // Family options, filtered so they intersect the current style's languages
+  // (e.g. an Arabic-only style only offers families that also support Arabic).
+  const familyOptions = (0, _react.useMemo)(() => {
+    if (!families) {
+      return fontStyle.family ? [{
+        id: fontStyle.family.id,
+        name: fontStyle.family.name
+      }] : [];
+    }
+    return families.filter(family => {
+      var _family$featureStyle, _family$featureStyle$;
+      return (_family$featureStyle = family.featureStyle) === null || _family$featureStyle === void 0 ? void 0 : (_family$featureStyle$ = _family$featureStyle.supportedLanguages) === null || _family$featureStyle$ === void 0 ? void 0 : _family$featureStyle$.some(lang => {
+        var _fontStyle$supportedL;
+        return (_fontStyle$supportedL = fontStyle.supportedLanguages) === null || _fontStyle$supportedL === void 0 ? void 0 : _fontStyle$supportedL.includes(lang);
+      });
+    }).map(family => ({
+      id: family.id,
+      name: family.name
+    }));
+  }, [families, fontStyle.family, fontStyle.supportedLanguages]);
+  if (!fontStyle.family) {
+    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, fallbackName);
+  }
+
+  // Once the list has loaded, a zero-language font (no family shares the current
+  // style's languages) falls back to the plain name, matching the
+  // non-selectable rendering. See FD-628.
+  if (families && familyOptions.length === 0) {
+    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, fallbackName);
+  }
+
+  // Style options always reflect the *active* font's family. When a pending
+  // switch commits, `fontStyle` updates and this moves to the new family — so
+  // the style selector + font transition together with no blank intermediate.
+  const selectedFamily = buildSelectedFamily(currentFamilyId, getFamilyStyles(currentFamilyId), fontStyle, families);
+
+  // Hold the displayed instance on the active font's value during a switch; once
+  // it commits, use the live (now-synced) value so axis drags etc. flow through.
+  const effectiveVariableSettings = switchingToPending ? frozenVariableSettingsRef.current : variableSettings;
+  return /*#__PURE__*/_react.default.createElement(_TypeTesterStyleSelect.default, {
+    families: familyOptions,
+    selectedFamily: selectedFamily
+    // Hold the displayed family on the active font's family until the switch
+    // commits, so both selectors + the font flip together. The busy cue is
+    // the only immediate feedback while the picked family's styles load.
+    ,
+    familyValue: currentFamilyId,
     selectedFontStyleId: fontStyle.id,
+    selectedVariableSettings: effectiveVariableSettings,
+    loadingFamilies: loadingFamilies && !families,
+    loading: switchingToPending,
+    onOpen: handleOpen,
+    onSelectFamilyId: handleSelectFamilyId,
     onSelectFontStyleValue: onSelectFontStyleValue,
     onSelectVariableAxes: onSelectVariableAxes,
-    onSelectFamilyId: handleSelectFamilyId,
-    selectedVariableSettings: variableSettings,
     includeVariableAxesOption: includeVariableAxesOption
-  }) : fontStyle.family && /*#__PURE__*/_react.default.createElement("div", {
+  });
+}
+function TypeTesterStyleSelectData(_ref2) {
+  var _fontStyle$variableIn2;
+  let {
+    fontStyle: fontStyleKey,
+    onSelectFontStyleValue,
+    onSelectVariableAxes,
+    config,
+    variableSettings,
+    includeVariableAxesOption
+  } = _ref2;
+  const fontStyle = (0, _reactRelay.useFragment)((_TypeTesterStyleSelectData_fontStyle2.default.hash && _TypeTesterStyleSelectData_fontStyle2.default.hash !== "368fd433966e05fc6ebecd2b60c71e3f" && console.error("The definition of 'TypeTesterStyleSelectData_fontStyle' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _TypeTesterStyleSelectData_fontStyle2.default), fontStyleKey);
+  const instance = variableSettings ? (_fontStyle$variableIn2 = fontStyle.variableInstances) === null || _fontStyle$variableIn2 === void 0 ? void 0 : _fontStyle$variableIn2.find(inst => (0, _utils.compareVariableSettings)(inst, variableSettings)) : null;
+  const name = fontStyle.family ? /*#__PURE__*/_react.default.createElement("div", {
     className: "type-tester__name"
   }, /*#__PURE__*/_react.default.createElement("span", {
     className: "type-tester__name__family"
   }, fontStyle.family.name), ' ', /*#__PURE__*/_react.default.createElement("span", {
     className: "type-tester__name__style"
-  }, variableSettings ? (instance === null || instance === void 0 ? void 0 : instance.name) ?? 'Custom' : fontStyle.name.replace(/ /g, '\xa0')));
+  }, variableSettings ? (instance === null || instance === void 0 ? void 0 : instance.name) ?? 'Custom' : fontStyle.name.replace(/ /g, '\xa0'))) : null;
+  if (!config.selectable) {
+    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, name);
+  }
+  return /*#__PURE__*/_react.default.createElement(TypeTesterStyleSelectSelectable, {
+    fontStyle: fontStyle,
+    variableSettings: variableSettings,
+    onSelectFontStyleValue: onSelectFontStyleValue,
+    onSelectVariableAxes: onSelectVariableAxes,
+    includeVariableAxesOption: includeVariableAxesOption,
+    fallbackName: name
+  });
 }

package/dist/components/TypeTester/TypeTesterVariableAxes.js

@@ -27,8 +27,10 @@ const TypeTesterVariableAxes = _ref => {
   if (!variableSettings) return null;
   if (!axes) return null;
   const handleChange = (axis, value) => {
-    variableSettings[axis] = value;
-    setVariableSettings(variableSettings);
+    setVariableSettings({
+      ...variableSettings,
+      [axis]: value
+    });
   };
   return /*#__PURE__*/_react.default.createElement("div", {
     className: "type-tester__variable-axes"
@@ -50,14 +52,25 @@ const TypeTesterVariableAxes = _ref => {
     } = _ref3;
     const isSmall = Math.abs(maxValue - minValue) <= 1;
     const value = variableSettings[axis];
+    const format = v => isSmall ? v.toFixed(2) : v.toFixed(0);
+
+    // Reserve enough room for the widest value the axis can show so the
+    // number changing (e.g. 99 → 100, or a decimal flipping sign) never
+    // reflows the slider beside it. The widest string is always at one of
+    // the endpoints — most digits plus any minus sign. With tabular
+    // figures (tnum, set in CSS) each character is a stable 1ch wide.
+    const valueWidth = Math.max(format(minValue).length, format(maxValue).length);
     return /*#__PURE__*/_react.default.createElement("div", {
       key: axis,
       className: "type-tester__variable-axes__axis"
     }, /*#__PURE__*/_react.default.createElement("span", {
       className: "type-tester__variable-axes__name"
     }, name), /*#__PURE__*/_react.default.createElement("span", {
-      className: "type-tester__variable-axes__value"
-    }, isSmall ? value.toFixed(2) : value.toFixed(0)), /*#__PURE__*/_react.default.createElement("div", {
+      className: "type-tester__variable-axes__value",
+      style: {
+        width: `${valueWidth}ch`
+      }
+    }, format(value)), /*#__PURE__*/_react.default.createElement("div", {
       className: "type-tester__variable-axes__slider"
     }, /*#__PURE__*/_react.default.createElement(_TypeTesterSlider.default, {
       value: value,

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

@@ -1,5 +1,4 @@
 import React from 'react';
-import { TypeTester_viewer$key } from '../../__generated__/TypeTester_viewer.graphql';
 import { TypeTester_fontStyle$key } from '../../__generated__/TypeTester_fontStyle.graphql';
 import { Alignment, TypeTesterAxesPosition } from './types';
 export interface TypeTesterConfig {
@@ -16,7 +15,7 @@ export interface TypeTesterConfig {
     toolsPosition?: 'inline' | 'floating';
     selectButtonStyle?: 'inline' | 'outlined';
     selectButtonLabel?: string;
-    truncate?: boolean;
+    truncate?: boolean | number;
     bulletStyle?: 'square' | 'round';
     priceText?: boolean;
     autofitOnChange?: boolean;
@@ -67,7 +66,6 @@ export interface TypeTesterBaseProps {
 }
 interface TypeTesterProps extends TypeTesterBaseProps {
     fontStyle: TypeTester_fontStyle$key | null;
-    viewer: TypeTester_viewer$key;
     onStyleSelect: (fontStyleId: string) => void;
     tags?: readonly string[] | null;
     isLoading?: boolean;

package/dist/components/TypeTester/index.js

@@ -4,7 +4,6 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _TypeTester_viewer2 = _interopRequireDefault(require("../../__generated__/TypeTester_viewer.graphql"));
 var _TypeTester_fontStyle2 = _interopRequireDefault(require("../../__generated__/TypeTester_fontStyle.graphql"));
 var _react = _interopRequireWildcard(require("react"));
 var _reactRelay = require("react-relay");
@@ -20,6 +19,7 @@ var _TypeTesterContent = _interopRequireDefault(require("./TypeTesterContent"));
 var _TypeTesterState = _interopRequireDefault(require("./TypeTesterState"));
 var _TypeTesterToolbar = _interopRequireDefault(require("./TypeTesterToolbar"));
 var _TypeTesterVariableAxes = _interopRequireDefault(require("./TypeTesterVariableAxes"));
+var _hooks = require("../../hooks");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
@@ -29,7 +29,6 @@ const TypeTester = _ref => {
     id,
     productId,
     fontStyle: fontStyleKey,
-    viewer: viewerKey,
     tags,
     onFocus,
     onBlur,
@@ -40,7 +39,6 @@ const TypeTester = _ref => {
     isLoading
   } = _ref;
   const fontStyle = (0, _reactRelay.useFragment)((_TypeTester_fontStyle2.default.hash && _TypeTester_fontStyle2.default.hash !== "bf89a32c8a0661f2102bbcf8c6bd1aa7" && console.error("The definition of 'TypeTester_fontStyle' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _TypeTester_fontStyle2.default), fontStyleKey);
-  const viewer = (0, _reactRelay.useFragment)((_TypeTester_viewer2.default.hash && _TypeTester_viewer2.default.hash !== "26c2b3145462407675ab9b202b0d1b4c" && console.error("The definition of 'TypeTester_viewer' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _TypeTester_viewer2.default), viewerKey);
   const contentRef = (0, _react.useRef)(null);
   const ref = (0, _react.useRef)(null);
   const [buyButtonIsHovered, setBuyButtonIsHovered] = (0, _react.useState)(false);
@@ -51,6 +49,14 @@ const TypeTester = _ref => {
   const props = (0, _TypeTesterState.default)({
     id
   });
+
+  // The instance name (e.g. "Regular" → "Custom") is a flex sibling of the
+  // inline axis slider, so updating it mid-drag changes its width and shifts
+  // the slider. Debounce the value used purely for the name display — the font
+  // preview and sliders keep reading the live `props.variableSettings`.
+  // Keyed on the font style id so switching fonts snaps the instance name
+  // immediately (in sync with the new style) rather than lagging the switch.
+  const nameVariableSettings = (0, _hooks.useDebouncedValue)(props.variableSettings, 200, fontStyle === null || fontStyle === void 0 ? void 0 : fontStyle.id);
   (0, _react.useEffect)(() => {
     if (onFocus && props.focused) onFocus();
     if (onBlur && !props.focused) onBlur();
@@ -86,8 +92,7 @@ const TypeTester = _ref => {
     className: "type-tester__toolbar"
   }, /*#__PURE__*/_react.default.createElement(_TypeTesterStyleSelectData.default, {
     fontStyle: fontStyle,
-    variableSettings: props.variableSettings,
-    viewer: viewer,
+    variableSettings: nameVariableSettings,
     onSelectFontStyleValue: _ref2 => {
       let {
         fontStyleId,
@@ -146,12 +151,14 @@ const TypeTester = _ref => {
   }, _ref3 => {
     let {
       loaded,
-      style
+      style,
+      verticalMetrics
     } = _ref3;
     if (loaded) {
       return /*#__PURE__*/_react.default.createElement(_TypeTesterContent.default, _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';
 import { VariableSettings } from '../../utils';
+import { VerticalMetrics } from '../useFontStyle';
 export type ColumnsConfig = false | {
     count: 'auto' | number;
     width: string;
@@ -19,15 +20,16 @@ export interface UseTypeTesterStylerProps {
     letterSpacing: number;
     features: string[];
     focused: boolean;
-    truncate: 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

@@ -21,6 +21,7 @@ const useTypeTesterStyler = _ref => {
     lineHeight,
     letterSpacing,
     fontStyles,
+    verticalMetrics,
     content,
     contentEdited,
     alignment,
@@ -57,23 +58,89 @@ const useTypeTesterStyler = _ref => {
       });
     }
   }, [autofitSize]);
-  const shouldTruncate = truncate && !focused;
+
+  // `truncate` is `true` (1 line), a positive number (that many lines), or
+  // falsy (off). Editing always shows the full paragraph, so only truncate
+  // when the tester is not focused.
+  const truncateLines = truncate === true ? 1 : typeof truncate === 'number' ? Math.max(0, Math.floor(truncate)) : 0;
+  const shouldTruncate = truncateLines > 0 && !focused;
+
+  // 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}`,
-    height: shouldTruncate ? `${size * lineHeight}px` : 'auto',
-    overflow: shouldTruncate ? 'hidden' : 'visible',
+    ...(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,