fontdue-js 2.22.0 → 2.22.1

package/dist-cjs/components/TypeTester/TypeTesterContext.js

@@ -0,0 +1,166 @@
+"use strict";
+'use client';
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.TypeTesterContext = void 0;
+var _draftJs = require("draft-js");
+var _react = _interopRequireWildcard(require("react"));
+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; }
+const TypeTesterContext = /*#__PURE__*/(0, _react.createContext)({});
+exports.TypeTesterContext = TypeTesterContext;
+const updateTester = (state, id, newState, propagate) => {
+  const testers = state.testers;
+  if (state.mode === 'local' || propagate === false) {
+    return {
+      ...state,
+      testers: {
+        ...testers,
+        [id]: {
+          ...testers[id],
+          ...newState
+        }
+      }
+    };
+  }
+  if (state.mode === 'group') {
+    // affect all testers
+    const newTesters = Object.keys(testers).reduce((acc, tid) => {
+      let content = testers[tid].content;
+      if (newState.content) {
+        if (id === tid) {
+          // for the currently edited tester, we need to use the new content
+          // as-is to maintain the selection state
+          content = newState.content;
+        } else {
+          if (testers[id].content?.getCurrentContent() !== newState.content.getCurrentContent()) {
+            // but we can't use the `content` state as-is for other testers, because
+            // the selection state seems to be globally tied to the browser selection,
+            // so the cursor jumps to the other tester. we have to make a new
+            // EditorState with a copy of the content
+            content = _draftJs.EditorState.createWithContent(newState.content.getCurrentContent());
+          }
+        }
+      }
+      acc[tid] = {
+        ...testers[tid],
+        ...newState,
+        content
+      };
+      return acc;
+    }, {});
+    return {
+      ...state,
+      testers: newTesters
+    };
+  }
+  return state;
+};
+const groupReducer = (state, action) => {
+  const {
+    testers
+  } = state;
+  switch (action.type) {
+    case 'TOGGLE_MODE':
+      return {
+        ...state,
+        mode: state.mode === 'group' ? 'local' : 'group'
+      };
+    case 'TOGGLE_GLOBAL_FEATURES_OPEN':
+      return {
+        ...state,
+        globalFeaturesOpen: !state.globalFeaturesOpen
+      };
+    case 'SET_CONTENT':
+      return updateTester(state, action.id, {
+        content: action.value,
+        contentEdited: true
+      });
+    case 'SET_SIZE':
+      return updateTester(state, action.id, {
+        size: action.value
+      }, action.propagate);
+    case 'SET_LETTER_SPACING':
+      return updateTester(state, action.id, {
+        letterSpacing: action.value
+      });
+    case 'SET_FEATURES':
+      return updateTester(state, action.id, {
+        features: action.value
+      });
+    case 'SET_LINE_HEIGHT':
+      return updateTester(state, action.id, {
+        lineHeight: action.value
+      });
+    case 'SET_ALIGNMENT':
+      return updateTester(state, action.id, {
+        alignment: action.value
+      });
+    case 'SET_VARIABLE_SETTINGS':
+      return updateTester(state, action.id, {
+        variableSettings: action.value
+      });
+    case 'SET_FOCUSED':
+      return {
+        ...state,
+        testers: {
+          ...testers,
+          [action.id]: {
+            ...testers[action.id],
+            focused: action.value
+          }
+        }
+      };
+    case 'SET_FEATURES_OPEN':
+      return {
+        ...state,
+        testers: {
+          ...testers,
+          [action.id]: {
+            ...testers[action.id],
+            featuresOpen: action.value
+          }
+        }
+      };
+  }
+};
+const TypeTesterContextComponent = ({
+  children,
+  testers: initialTestersState,
+  defaultMode = 'group'
+}) => {
+  const testers = Object.keys(initialTestersState).reduce((acc, id) => {
+    const initialState = initialTestersState[id];
+    const content = _draftJs.EditorState.createWithContent(_draftJs.ContentState.createFromText(initialState.content ?? ''));
+    acc[id] = {
+      content,
+      contentEdited: false,
+      size: initialState.size ?? 72,
+      letterSpacing: initialState.letterSpacing ?? 0,
+      lineHeight: initialState.lineHeight ?? 1,
+      autofit: initialState.autofit,
+      features: initialState.features ?? [],
+      featuresOpen: false,
+      focused: false,
+      alignment: initialState.alignment,
+      variableSettings: initialState.variableSettings,
+      direction: initialState.direction
+    };
+    return acc;
+  }, {});
+  const [value, dispatch] = (0, _react.useReducer)(groupReducer, {
+    mode: defaultMode,
+    globalFeaturesOpen: false,
+    testers
+  });
+  return /*#__PURE__*/_react.default.createElement(TypeTesterContext.Provider, {
+    value: {
+      ...value,
+      dispatch
+    }
+  }, children);
+};
+var _default = TypeTesterContextComponent;
+exports.default = _default;

package/dist-cjs/components/TypeTester/TypeTesterEditAll.js

@@ -0,0 +1,36 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _TypeTesterContext = require("./TypeTesterContext");
+var _TypeTesterBullet = _interopRequireDefault(require("./TypeTesterBullet"));
+var _ConfigContext = _interopRequireDefault(require("../ConfigContext"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+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; }
+const TypeTesterEditAll = () => {
+  const {
+    typeTester: config
+  } = (0, _react.useContext)(_ConfigContext.default);
+  const {
+    mode,
+    dispatch
+  } = (0, _react.useContext)(_TypeTesterContext.TypeTesterContext);
+  return /*#__PURE__*/_react.default.createElement("button", {
+    className: "type-tester__edit-all",
+    onClick: () => dispatch({
+      type: 'TOGGLE_MODE'
+    }),
+    type: "button"
+  }, /*#__PURE__*/_react.default.createElement(_TypeTesterBullet.default, {
+    checked: mode === 'group',
+    config: config
+  }), ' ', /*#__PURE__*/_react.default.createElement("span", {
+    className: "type-tester__edit-all__text"
+  }, "Affect all styles"));
+};
+var _default = TypeTesterEditAll;
+exports.default = _default;

package/dist-cjs/components/TypeTester/TypeTesterFeatures.js

@@ -0,0 +1,133 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = TypeTesterFeatures;
+var _TypeTesterFeatures_fontStyle2 = _interopRequireDefault(require("../../__generated__/TypeTesterFeatures_fontStyle.graphql"));
+var _react = _interopRequireWildcard(require("react"));
+var _reactRelay = require("react-relay");
+var _TypeTesterBullet = _interopRequireDefault(require("../TypeTester/TypeTesterBullet"));
+var _TypeTesterState = _interopRequireDefault(require("./TypeTesterState"));
+var _Checkbox = _interopRequireDefault(require("../Checkbox"));
+var _ConfigContext = _interopRequireDefault(require("../ConfigContext"));
+var _useFeaturesData = _interopRequireDefault(require("./useFeaturesData"));
+var _TypeTesterVariableAxes = _interopRequireDefault(require("./TypeTesterVariableAxes"));
+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 }; }
+function useHeightAnimation(isOpen = false, duration = 350) {
+  const contentRef = (0, _react.useRef)(null);
+  const [height, setHeight] = (0, _react.useState)(isOpen ? 'auto' : 0);
+  const changed = (0, _react.useRef)(false);
+  (0, _react.useEffect)(() => {
+    const contentRect = contentRef.current?.getBoundingClientRect();
+    if (!contentRect) return;
+    if (changed.current === false) {
+      // don't run initially. couldn't think of a better solution
+      changed.current = true;
+      return;
+    }
+    setHeight(`${contentRect.height}px`);
+    const first = setTimeout(() => setHeight(isOpen ? `${contentRect.height}px` : 0));
+    const second = setTimeout(() => {
+      if (isOpen) {
+        setHeight('auto');
+      }
+    }, duration);
+    return () => {
+      clearTimeout(first);
+      clearTimeout(second);
+    };
+  }, [isOpen]);
+  return {
+    height,
+    contentRef
+  };
+}
+const shouldIncludeFeature = (supportedFeatures, feature) => {
+  if (!supportedFeatures) return false;
+  return supportedFeatures.indexOf(feature) >= 0;
+};
+function TypeTesterFeatures({
+  id,
+  fontStyle: fontStyleKey,
+  features: showFeatures,
+  axes
+}) {
+  const fontStyle = (0, _reactRelay.useFragment)((_TypeTesterFeatures_fontStyle2.default.hash && _TypeTesterFeatures_fontStyle2.default.hash !== "d0c693dadaa9ae68f5295f3fc69a7578" && console.error("The definition of 'TypeTesterFeatures_fontStyle' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _TypeTesterFeatures_fontStyle2.default), fontStyleKey);
+  const {
+    typeTester: config
+  } = (0, _react.useContext)(_ConfigContext.default);
+  const {
+    features: selectedFeatures,
+    toggleFeature,
+    featuresOpen
+  } = (0, _TypeTesterState.default)({
+    id
+  });
+  const selectionStyle = config.openTypeFeatures.selectionStyle;
+  const {
+    featureNames,
+    fontFeatures
+  } = (0, _useFeaturesData.default)({
+    fontStyle
+  });
+  const renderFeature = feature => {
+    const featureCode = typeof feature === 'string' ? feature : feature.code;
+    const featureName = typeof feature === 'string' ? featureNames[featureCode] : feature.name;
+    const checked = selectedFeatures.indexOf(featureCode) >= 0;
+    return /*#__PURE__*/_react.default.createElement("button", {
+      key: featureCode,
+      className: "type-tester__features__button",
+      type: "button",
+      onClick: () => toggleFeature(featureCode)
+    }, selectionStyle === 'bullet' && /*#__PURE__*/_react.default.createElement(_TypeTesterBullet.default, {
+      checked: checked,
+      config: config
+    }), selectionStyle === 'checkbox' && /*#__PURE__*/_react.default.createElement(_Checkbox.default, {
+      checked: checked,
+      readOnly: true
+    }), /*#__PURE__*/_react.default.createElement("span", {
+      className: "type-tester__features__name"
+    }, featureName));
+  };
+  let featuresColumns;
+  if (config.openTypeFeatures?.columns?.length) {
+    featuresColumns = /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, config.openTypeFeatures.columns.map((columnConfig, i) => /*#__PURE__*/_react.default.createElement("div", {
+      key: i,
+      "data-range": columnConfig.range,
+      className: "type-tester__features__column",
+      style: {
+        '--grid-range': columnConfig.range
+      }
+    }, columnConfig.features.filter(feature => shouldIncludeFeature(fontFeatures?.supportedFeatures, typeof feature === 'string' ? feature : feature.code)).map(renderFeature))));
+  } else {
+    const expanded = showFeatures?.includes('*') ? fontFeatures?.supportedFeatures ?? [] : (showFeatures ?? []).filter(feature => shouldIncludeFeature(fontFeatures?.supportedFeatures, feature));
+    featuresColumns = /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, expanded.map(renderFeature));
+  }
+  const {
+    height: featuresHeight,
+    contentRef: featuresContentRef
+  } = useHeightAnimation(featuresOpen, 300);
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: "type-tester__features-container",
+    onMouseDown: e => e.preventDefault(),
+    "data-open": featuresOpen,
+    style: {
+      height: featuresHeight,
+      overflow: featuresHeight === 'auto' ? 'visible' : 'hidden',
+      transition: `height 300ms ease-out`
+    }
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    ref: featuresContentRef
+  }, axes ? /*#__PURE__*/_react.default.createElement(_TypeTesterVariableAxes.default, {
+    id: id,
+    axes: axes,
+    fontStyle: fontStyle
+  }) : null, /*#__PURE__*/_react.default.createElement("div", {
+    className: "type-tester__features",
+    "data-selection-style": selectionStyle,
+    "data-columns": config.openTypeFeatures?.columns?.length ? 'set' : 'auto'
+  }, featuresColumns)));
+}

package/dist-cjs/components/TypeTester/TypeTesterFeaturesButton.js

@@ -0,0 +1,82 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _TypeTesterFeaturesButton_fontStyle2 = _interopRequireDefault(require("../../__generated__/TypeTesterFeaturesButton_fontStyle.graphql"));
+var _react = _interopRequireWildcard(require("react"));
+var _ConfigContext = _interopRequireDefault(require("../ConfigContext"));
+var _CarrotDown = _interopRequireDefault(require("../Icons/CarrotDown"));
+var _CarrotUp = _interopRequireDefault(require("../Icons/CarrotUp"));
+var _Select = _interopRequireDefault(require("../Select"));
+var _TypeTesterState = _interopRequireDefault(require("./TypeTesterState"));
+var _useFeaturesData = _interopRequireDefault(require("./useFeaturesData"));
+var _reactRelay = require("react-relay");
+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 }; }
+const TypeTesterFeaturesButton = ({
+  id,
+  fontStyle: fontStyleKey,
+  onNeedsRefocus,
+  features: showFeatures
+}) => {
+  const {
+    typeTester: config
+  } = (0, _react.useContext)(_ConfigContext.default);
+  const {
+    featuresOpen,
+    toggleFeaturesOpen,
+    features,
+    setFeatures
+  } = (0, _TypeTesterState.default)({
+    id
+  });
+  const selectedFeature = features[0];
+  const fontStyle = (0, _reactRelay.useFragment)((_TypeTesterFeaturesButton_fontStyle2.default.hash && _TypeTesterFeaturesButton_fontStyle2.default.hash !== "bfda99c867db0b614314fc774911c4b0" && console.error("The definition of 'TypeTesterFeaturesButton_fontStyle' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _TypeTesterFeaturesButton_fontStyle2.default), fontStyleKey);
+  const {
+    featureNames,
+    fontFeatures
+  } = (0, _useFeaturesData.default)({
+    fontStyle
+  });
+  const effectiveFeatures = showFeatures?.includes('*') ? fontFeatures?.supportedFeatures ?? [] : showFeatures;
+  if (config.openTypeFeatures.interactionStyle === 'panel') {
+    return /*#__PURE__*/_react.default.createElement("div", {
+      className: "type-tester__features-button",
+      "data-features-open": featuresOpen,
+      "data-features-selected": features.length || 0
+    }, /*#__PURE__*/_react.default.createElement("button", {
+      className: "type-tester__features-button__button",
+      type: "button",
+      onClick: () => toggleFeaturesOpen()
+    }, /*#__PURE__*/_react.default.createElement("span", {
+      className: "type-tester__features-button__text"
+    }, config.openTypeFeatures.buttonLabel), ' ', featuresOpen ? /*#__PURE__*/_react.default.createElement(_CarrotUp.default, null) : /*#__PURE__*/_react.default.createElement(_CarrotDown.default, null)));
+  }
+  if (config.openTypeFeatures.interactionStyle === 'select') {
+    if (!effectiveFeatures || effectiveFeatures.length === 0) return null;
+    return /*#__PURE__*/_react.default.createElement("div", {
+      className: "type-tester__features-select"
+    }, /*#__PURE__*/_react.default.createElement(_Select.default, {
+      value: selectedFeature ?? '',
+      options: [{
+        value: '',
+        text: 'OT Features'
+      }].concat(effectiveFeatures.map(feature => ({
+        value: feature,
+        text: featureNames[feature]
+      }))),
+      onChange: e => {
+        setFeatures(e.target.value === '' ? [] : [e.target.value]);
+        onNeedsRefocus?.();
+      },
+      onClick: e => e.stopPropagation(),
+      onMouseDown: e => e.stopPropagation()
+    }));
+  }
+  return null;
+};
+var _default = TypeTesterFeaturesButton;
+exports.default = _default;

package/dist-cjs/components/TypeTester/TypeTesterFitter.js

@@ -0,0 +1,21 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _useTypeTesterStyler = _interopRequireDefault(require("./useTypeTesterStyler"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+const TypeTesterFitter = ({
+  children,
+  ...props
+}) => {
+  const style = (0, _useTypeTesterStyler.default)(props);
+  return /*#__PURE__*/_react.default.createElement("div", _extends({
+    className: "type-tester__text__container"
+  }, style), children);
+};
+var _default = TypeTesterFitter;
+exports.default = _default;

package/dist-cjs/components/TypeTester/TypeTesterFloatingToolbar.js

@@ -0,0 +1,79 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = TypeTesterFloatingToolbar;
+var _TypeTesterFloatingToolbar_testers2 = _interopRequireDefault(require("../../__generated__/TypeTesterFloatingToolbar_testers.graphql"));
+var _react = _interopRequireWildcard(require("react"));
+var _reactRelay = require("react-relay");
+var _TypeTesterContext = require("./TypeTesterContext");
+var _TypeTesterFeatures = _interopRequireDefault(require("./TypeTesterFeatures"));
+var _TypeTesterToolbar = _interopRequireDefault(require("./TypeTesterToolbar"));
+var _ConfigContext = _interopRequireDefault(require("../ConfigContext"));
+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 }; }
+function TypeTesterFloatingToolbar({
+  testers: testersKey,
+  features,
+  axes,
+  onToolbarOpenClose
+}) {
+  const testersData = (0, _reactRelay.useFragment)((_TypeTesterFloatingToolbar_testers2.default.hash && _TypeTesterFloatingToolbar_testers2.default.hash !== "5f037fca9e02cba8c202f17e08ff8db6" && console.error("The definition of 'TypeTesterFloatingToolbar_testers' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _TypeTesterFloatingToolbar_testers2.default), testersKey);
+  const {
+    testers
+  } = (0, _react.useContext)(_TypeTesterContext.TypeTesterContext);
+  const id = Object.keys(testers).find(id => testers[id].focused);
+  const [open, setOpen] = (0, _react.useState)(false);
+
+  // when focus is lost, we lose the latest id, but we don't want to immediately
+  // un-render the toolbar for that id because there's a transition to hide the
+  // toolbar. so this keeps the tools rendered with the last non-null id
+  const [activeId, setActiveId] = (0, _react.useState)(id);
+  (0, _react.useEffect)(() => {
+    if (id) {
+      setActiveId(id);
+      setOpen(true); // always open if we get a new id
+    }
+  }, [id]);
+  (0, _react.useEffect)(() => {
+    let observer = new IntersectionObserver(entries => {
+      const entry = entries[0];
+      if (!entry.isIntersecting) {
+        setOpen(false);
+        document.activeElement?.blur();
+      }
+    });
+    const typeTesterElement = document.querySelector(`[data-type-tester-id="${activeId}"]`);
+    if (!typeTesterElement) return;
+    observer.observe(typeTesterElement);
+    return () => {
+      observer.disconnect();
+    };
+  }, [activeId]);
+  (0, _react.useEffect)(() => {
+    onToolbarOpenClose?.(open);
+  }, [onToolbarOpenClose, open]);
+  const {
+    typeTester: config
+  } = (0, _react.useContext)(_ConfigContext.default);
+  const fontStyle = testersData.find(tester => tester.id === activeId)?.fontStyle;
+  const axesPosition = config.variableAxesPosition === 'auto' ? (axes?.length ?? 0) > 1 ? 'features-panel' : 'inline' : config.variableAxesPosition;
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: "type-tester__floating-toolbar",
+    onMouseDown: e => e.preventDefault(),
+    "data-open": activeId && open
+  }, activeId && fontStyle && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_TypeTesterToolbar.default, {
+    id: activeId,
+    features: features,
+    axes: axes,
+    axesPosition: axesPosition,
+    fontStyle: fontStyle
+  }), features && /*#__PURE__*/_react.default.createElement(_TypeTesterFeatures.default, {
+    id: activeId,
+    features: features,
+    axes: axes,
+    fontStyle: fontStyle
+  })));
+}

package/dist-cjs/components/TypeTester/TypeTesterInput.js

@@ -0,0 +1,72 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.TypeTesterInput = void 0;
+var _react = _interopRequireWildcard(require("react"));
+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; }
+const TypeTesterInput = ({
+  value,
+  onChange,
+  min,
+  max,
+  setFocused
+}) => {
+  const [localValue, setLocalValue] = (0, _react.useState)(value);
+  const [isError, setIsError] = (0, _react.useState)(false);
+  (0, _react.useEffect)(() => {
+    setLocalValue(Math.round(value));
+  }, [value]);
+  const propagateValue = (0, _react.useCallback)(() => {
+    if (localValue && localValue >= min && localValue <= max) {
+      setIsError(false);
+      onChange(localValue);
+    } else {
+      setIsError(true);
+    }
+  }, [localValue, onChange, setIsError]);
+  const handleChange = (0, _react.useCallback)(e => {
+    if (e.target.value === '') {
+      return setLocalValue(null);
+    }
+    const parsed = parseFloat(e.target.value);
+    if (!Number.isNaN(parsed)) {
+      setLocalValue(parsed);
+    }
+  }, []);
+  const handleKeyDown = (0, _react.useCallback)(e => {
+    if (e.key === 'Enter') propagateValue();
+    if (localValue) {
+      const distance = e.shiftKey ? 10 : 1;
+      if (e.key === 'ArrowUp') {
+        e.preventDefault();
+        onChange(Math.min(max, localValue + distance));
+      }
+      if (e.key === 'ArrowDown') {
+        e.preventDefault();
+        onChange(Math.max(min, localValue - distance));
+      }
+    }
+  }, [propagateValue, localValue]);
+  return /*#__PURE__*/_react.default.createElement("label", {
+    className: "type-tester__toolbar__label",
+    "data-label": "size-input",
+    "data-is-error": isError
+  }, /*#__PURE__*/_react.default.createElement("input", {
+    className: "type-tester__toolbar__input",
+    type: "text",
+    style: {
+      width: `${localValue?.toString().length ?? 2}ch`
+    },
+    value: localValue || '',
+    onChange: handleChange,
+    onKeyDown: handleKeyDown,
+    onFocus: () => setFocused(true),
+    onBlur: () => setFocused(false)
+  }), /*#__PURE__*/_react.default.createElement("span", null, "px"));
+};
+exports.TypeTesterInput = TypeTesterInput;
+var _default = TypeTesterInput;
+exports.default = _default;

package/dist-cjs/components/TypeTester/TypeTesterSlider.js

@@ -0,0 +1,76 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _reactRanger = require("../../react-ranger");
+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 _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
+const logInterpolator = {
+  getPercentageForValue: (val, min, max) => {
+    const minSign = Math.sign(min);
+    const maxSign = Math.sign(max);
+    if (minSign !== maxSign) {
+      throw new Error('Error: logarithmic interpolation does not support ranges that cross 0.');
+    }
+    let percent = 100 / (Math.log10(Math.abs(max)) - Math.log10(Math.abs(min))) * (Math.log10(Math.abs(val)) - Math.log10(Math.abs(min)));
+    if (minSign < 0) {
+      // negative range, means we need to invert our percent because of the Math.abs above
+      return 100 - percent;
+    }
+    return percent;
+  },
+  getValueForClientX: (clientX, trackDims, min, max) => {
+    const {
+      left,
+      width
+    } = trackDims; // FIXME
+    let value = clientX - left;
+    value *= Math.log10(max) - Math.log10(min);
+    value /= width;
+    value = Math.pow(10, Math.log10(min) + value);
+    return value;
+  }
+};
+const TypeTesterSlider = ({
+  min,
+  max,
+  stepSize,
+  value,
+  onChange,
+  interpolator
+}) => {
+  const handleChange = (0, _react.useCallback)(values => onChange(values[0]), [onChange]);
+  const {
+    getTrackProps,
+    handles
+  } = (0, _reactRanger.useRanger)({
+    min,
+    max,
+    stepSize,
+    values: [value],
+    onChange: handleChange,
+    onDrag: handleChange,
+    interpolator: interpolator === 'log10' ? logInterpolator : undefined
+  });
+  return /*#__PURE__*/_react.default.createElement("div", getTrackProps({
+    className: 'type-tester__slider__track'
+  }), handles.map(({
+    getHandleProps
+  }, index) => {
+    const {
+      key,
+      ...handleProps
+    } = getHandleProps({
+      className: 'type-tester__slider__handle'
+    });
+    return /*#__PURE__*/_react.default.createElement("button", _extends({
+      key: key ?? index
+    }, handleProps));
+  }));
+};
+var _default = TypeTesterSlider;
+exports.default = _default;