fontdue-js 2.28.0 → 3.0.0-alpha10

package/dist/components/TypeTester/TypeTesterStandalone.js

@@ -1,26 +1,20 @@
-"use strict";
 'use client';
 
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.TypeTesterStandalonePreloadedQueryRenderer = TypeTesterStandalonePreloadedQueryRenderer;
-exports.default = TypeTesterStandalone;
-var _TypeTesterStandaloneQuery2 = _interopRequireDefault(require("../../__generated__/TypeTesterStandaloneQuery.graphql"));
-var _TypeTesterStandaloneChangedStylesQuery2 = _interopRequireDefault(require("../../__generated__/TypeTesterStandaloneChangedStylesQuery.graphql"));
-var _react = _interopRequireWildcard(require("react"));
-var _reactRelay = require("react-relay");
-var _index = _interopRequireDefault(require("./index"));
-var _TypeTesterContext = _interopRequireDefault(require("./TypeTesterContext"));
-var _types = require("./types");
-var _useSerializablePreloadedQuery = _interopRequireDefault(require("../../relay/useSerializablePreloadedQuery"));
-var _ConfigContext = _interopRequireDefault(require("../ConfigContext"));
-var _useLicenseAndOrderVariables = require("../../hooks/useLicenseAndOrderVariables");
-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 _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 changedStylesQuery = (_TypeTesterStandaloneChangedStylesQuery2.default.hash && _TypeTesterStandaloneChangedStylesQuery2.default.hash !== "98374227c6b2c3eceab5b48138e1a662" && console.error("The definition of 'TypeTesterStandaloneChangedStylesQuery' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _TypeTesterStandaloneChangedStylesQuery2.default);
+import _TypeTesterStandaloneQuery from "../../__generated__/TypeTesterStandaloneQuery.graphql.js";
+import _TypeTesterStandaloneChangedStylesQuery from "../../__generated__/TypeTesterStandaloneChangedStylesQuery.graphql.js";
+import React, { useCallback, useContext, useState } from 'react';
+import { fetchQuery, graphql, useLazyLoadQuery, usePreloadedQuery, useRelayEnvironment } from 'react-relay';
+import TypeTester from './index.js';
+import TypeTesterContextComponent from './TypeTesterContext.js';
+import { normalizeFeaturesProp } from './types.js';
+import loadSerializableQuery from '../../relay/loadSerializableQuery.js';
+import useSerializablePreloadedQuery from '../../relay/useSerializablePreloadedQuery.js';
+import TypeTesterStandaloneQueryNode from '../../__generated__/TypeTesterStandaloneQuery.graphql.js';
+import ConfigContext from '../ConfigContext.js';
+import { EnsureFontdueContext } from '../FontdueContextProvider/index.js';
+import { useLicenseAndOrderVariables } from '../../hooks/useLicenseAndOrderVariables.js';
+const changedStylesQuery = (_TypeTesterStandaloneChangedStylesQuery.hash && _TypeTesterStandaloneChangedStylesQuery.hash !== "98374227c6b2c3eceab5b48138e1a662" && console.error("The definition of 'TypeTesterStandaloneChangedStylesQuery' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _TypeTesterStandaloneChangedStylesQuery);
 function TypeTesterStandaloneComponent(_ref) {
   var _data$viewer, _data$viewer2, _data$viewer2$fontSty, _data$viewer2$fontSty2, _data$viewer2$fontSty3, _data$viewer3, _data$viewer3$fontSty, _data$viewer3$fontSty2;
   let {
@@ -42,18 +36,18 @@ function TypeTesterStandaloneComponent(_ref) {
   } = _ref;
   const {
     typeTester: config
-  } = (0, _react.useContext)(_ConfigContext.default);
+  } = useContext(ConfigContext);
   let defaultAlignment = config.initialAlignment;
   if (direction === 'rtl') defaultAlignment = 'right';
-  const environment = (0, _reactRelay.useRelayEnvironment)();
-  const [changedStyle, setChangedStyle] = (0, _react.useState)('');
-  const [changedStylesFetchKey, setChangedStylesFetchKey] = (0, _react.useState)(0);
+  const environment = useRelayEnvironment();
+  const [changedStyle, setChangedStyle] = useState('');
+  const [changedStylesFetchKey, setChangedStylesFetchKey] = useState(0);
   const {
     licenseOptionsSpecs,
     orderVariableSelections
-  } = (0, _useLicenseAndOrderVariables.useLicenseAndOrderVariables)();
-  const handleStyleSelect = (0, _react.useCallback)(fontStyleId => {
-    (0, _reactRelay.fetchQuery)(environment, changedStylesQuery, {
+  } = useLicenseAndOrderVariables();
+  const handleStyleSelect = useCallback(fontStyleId => {
+    fetchQuery(environment, changedStylesQuery, {
       id: fontStyleId,
       licenseOptions: licenseOptionsSpecs,
       orderVariables: orderVariableSelections
@@ -64,7 +58,7 @@ function TypeTesterStandaloneComponent(_ref) {
       }
     });
   }, [environment, changedStyle, licenseOptionsSpecs, orderVariableSelections]);
-  const changedStylesData = (0, _reactRelay.useLazyLoadQuery)(changedStylesQuery, {
+  const changedStylesData = useLazyLoadQuery(changedStylesQuery, {
     id: changedStyle,
     licenseOptions: licenseOptionsSpecs,
     orderVariables: orderVariableSelections
@@ -72,7 +66,7 @@ function TypeTesterStandaloneComponent(_ref) {
     fetchKey: changedStylesFetchKey,
     fetchPolicy: 'store-only'
   });
-  return /*#__PURE__*/_react.default.createElement(_TypeTesterContext.default, {
+  return /*#__PURE__*/React.createElement(TypeTesterContextComponent, {
     testers: {
       standalone: {
         content: content ?? 'The quick brown fox...',
@@ -93,38 +87,44 @@ function TypeTesterStandaloneComponent(_ref) {
         direction: direction ?? 'ltr'
       }
     }
-  }, /*#__PURE__*/_react.default.createElement(_index.default, {
+  }, /*#__PURE__*/React.createElement(TypeTester, {
     id: "standalone",
     fontStyle: changedStyle ? changedStylesData.node : (_data$viewer = data.viewer) === null || _data$viewer === void 0 ? void 0 : _data$viewer.fontStyle,
     onStyleSelect: handleStyleSelect,
     axes: axes,
-    features: (0, _types.normalizeFeaturesProp)(features),
+    features: normalizeFeaturesProp(features),
     productId: ((_data$viewer2 = data.viewer) === null || _data$viewer2 === void 0 ? void 0 : (_data$viewer2$fontSty = _data$viewer2.fontStyle) === null || _data$viewer2$fontSty === void 0 ? void 0 : (_data$viewer2$fontSty2 = _data$viewer2$fontSty.family) === null || _data$viewer2$fontSty2 === void 0 ? void 0 : (_data$viewer2$fontSty3 = _data$viewer2$fontSty2.parent) === null || _data$viewer2$fontSty3 === void 0 ? void 0 : _data$viewer2$fontSty3.id) ?? ((_data$viewer3 = data.viewer) === null || _data$viewer3 === void 0 ? void 0 : (_data$viewer3$fontSty = _data$viewer3.fontStyle) === null || _data$viewer3$fontSty === void 0 ? void 0 : (_data$viewer3$fontSty2 = _data$viewer3$fontSty.family) === null || _data$viewer3$fontSty2 === void 0 ? void 0 : _data$viewer3$fontSty2.id),
     groupEdit: false,
     onFocus: onFocus,
     onBlur: onBlur
   }));
 }
-const query = (_TypeTesterStandaloneQuery2.default.hash && _TypeTesterStandaloneQuery2.default.hash !== "951214eacb2370ea3ca0b19bebe7fbe7" && console.error("The definition of 'TypeTesterStandaloneQuery' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _TypeTesterStandaloneQuery2.default);
-function TypeTesterStandalonePreloadedQueryRenderer(_ref3) {
+const query = (_TypeTesterStandaloneQuery.hash && _TypeTesterStandaloneQuery.hash !== "951214eacb2370ea3ca0b19bebe7fbe7" && console.error("The definition of 'TypeTesterStandaloneQuery' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _TypeTesterStandaloneQuery);
+export async function loadTypeTesterQuery(variables) {
+  return loadSerializableQuery(TypeTesterStandaloneQueryNode, {
+    familyName: variables.familyName,
+    styleName: variables.styleName
+  });
+}
+export function TypeTesterStandalonePreloadedQueryRenderer(_ref3) {
   let {
     preloadedQuery,
     ...rest
   } = _ref3;
-  const queryRef = (0, _useSerializablePreloadedQuery.default)(preloadedQuery);
-  const data = (0, _reactRelay.usePreloadedQuery)(query, queryRef);
-  return /*#__PURE__*/_react.default.createElement(TypeTesterStandaloneComponent, _extends({
+  const queryRef = useSerializablePreloadedQuery(preloadedQuery, 'store-or-network', query);
+  const data = usePreloadedQuery(query, queryRef);
+  return /*#__PURE__*/React.createElement(TypeTesterStandaloneComponent, _extends({
     data: data
   }, rest));
 }
-function TypeTesterStandalone(_ref4) {
+function TypeTesterStandaloneLazyQueryRenderer(_ref4) {
   var _data$viewer4;
   let {
     familyName,
     styleName,
     ...rest
   } = _ref4;
-  const data = (0, _reactRelay.useLazyLoadQuery)(query, {
+  const data = useLazyLoadQuery(query, {
     familyName,
     styleName
   });
@@ -132,7 +132,17 @@ function TypeTesterStandalone(_ref4) {
   if (!fontStyle) {
     console.log(`[TypeTester]: No FontStyle found for {familyName: "${familyName}", styleName: "${styleName}"}`);
   }
-  return /*#__PURE__*/_react.default.createElement(TypeTesterStandaloneComponent, _extends({
+  return /*#__PURE__*/React.createElement(TypeTesterStandaloneComponent, _extends({
     data: data
   }, rest));
+}
+// Unified TypeTester entry point. Accepts either a preloaded query (server-side
+// preload path, used by Astro/Vike/etc.) or `{familyName, styleName}` (lazy
+// path, used inside an existing `<FontdueProvider>` tree like Next layouts).
+// `EnsureFontdueContext` only self-wraps with `FontdueContextProvider` when
+// no parent Fontdue context is present, seeding it with `config`.
+export default function TypeTesterStandalone(props) {
+  return /*#__PURE__*/React.createElement(EnsureFontdueContext, {
+    config: props.config
+  }, 'preloadedQuery' in props && props.preloadedQuery ? /*#__PURE__*/React.createElement(TypeTesterStandalonePreloadedQueryRenderer, props) : /*#__PURE__*/React.createElement(TypeTesterStandaloneLazyQueryRenderer, props));
 }

package/dist/components/TypeTester/TypeTesterStandalone.server.d.ts

@@ -1,3 +1,7 @@
 import React from 'react';
-import { TypeTesterStandalone_props } from './TypeTesterStandalone';
-export default function TypeTesterStandalone({ familyName, styleName, ...rest }: TypeTesterStandalone_props): Promise<React.JSX.Element>;
+import type { TypeTesterStandalone_props } from './TypeTesterStandalone.js';
+export type { TypeTesterPreloadedQuery } from './TypeTesterStandalone.js';
+export declare function loadTypeTesterQuery(): never;
+export default function TypeTesterStandalone(props: Extract<TypeTesterStandalone_props, {
+    familyName: string;
+}>): Promise<React.JSX.Element>;

package/dist/components/TypeTester/TypeTesterStandalone.server.js

@@ -1,26 +1,30 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = TypeTesterStandalone;
-var _react = _interopRequireDefault(require("react"));
-var _loadSerializableQuery = _interopRequireDefault(require("../../relay/loadSerializableQuery"));
-var _TypeTesterStandalone = require("./TypeTesterStandalone");
-var _TypeTesterStandaloneQuery = _interopRequireDefault(require("../../__generated__/TypeTesterStandaloneQuery.graphql"));
-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); }
-async function TypeTesterStandalone(_ref) {
-  let {
+import React from 'react';
+import loadSerializableQuery from '../../relay/loadSerializableQuery.js';
+import { TypeTesterStandalonePreloadedQueryRenderer } from './TypeTesterStandalone.js';
+import TypeTesterStandaloneQueryNode from '../../__generated__/TypeTesterStandaloneQuery.graphql.js';
+// Stub for the RSC export condition. See FontdueProvider/index.server.tsx
+// for the rationale.
+export function loadTypeTesterQuery() {
+  throw new Error("loadTypeTesterQuery isn't needed in React Server Components — " + 'the <TypeTester> server entrypoint awaits its query automatically. ' + 'Drop the manual call.');
+}
+
+// Next RSC variant: awaits the query on the server and hands the response to
+// the client `TypeTesterStandalonePreloadedQueryRenderer`. Lets pages just
+// write `<TypeTester familyName="..." styleName="..." />` in an RSC without
+// manually invoking `loadTypeTesterQuery` + threading `preloadedQuery`
+// through props.
+export default async function TypeTesterStandalone(props) {
+  const {
     familyName,
     styleName,
     ...rest
-  } = _ref;
-  const preloadedQuery = await (0, _loadSerializableQuery.default)(_TypeTesterStandaloneQuery.default, {
+  } = props;
+  const preloadedQuery = await loadSerializableQuery(TypeTesterStandaloneQueryNode, {
     familyName,
     styleName
   });
-  return /*#__PURE__*/_react.default.createElement(_TypeTesterStandalone.TypeTesterStandalonePreloadedQueryRenderer, _extends({
+  return /*#__PURE__*/React.createElement(TypeTesterStandalonePreloadedQueryRenderer, _extends({
     preloadedQuery: preloadedQuery
   }, rest));
 }

package/dist/components/TypeTester/TypeTesterStandaloneElement.js

@@ -1,14 +1,7 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports.TypeTesterStandaloneElement = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _TypeTesterStandalone = _interopRequireDefault(require("./TypeTesterStandalone"));
-var _utils = require("../../utils");
-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); }
+import React from 'react';
+import TypeTesterStandalone from './TypeTesterStandalone.js';
+import { notEmpty } from '../../utils.js';
 const isAlignment = str => {
   return str === 'left' || str === 'center' || str === 'right';
 };
@@ -31,9 +24,9 @@ function parseVariableSettings(input) {
     } else {
       console.warn(`fontdue-type-tester failed to parse variable-settings value: "${settingString}", ignoring`);
     }
-  }).filter(_utils.notEmpty);
+  }).filter(notEmpty);
 }
-const TypeTesterStandaloneElement = _ref => {
+export const TypeTesterStandaloneElement = _ref => {
   let {
     lineHeight,
     letterSpacing,
@@ -47,7 +40,7 @@ const TypeTesterStandaloneElement = _ref => {
     autofit,
     ...rest
   } = _ref;
-  return /*#__PURE__*/_react.default.createElement(_TypeTesterStandalone.default, _extends({
+  return /*#__PURE__*/React.createElement(TypeTesterStandalone, _extends({
     autofit: parseBool(autofit),
     lineHeight: lineHeight ? parseFloat(lineHeight) : undefined,
     letterSpacing: letterSpacing ? parseFloat(letterSpacing) : undefined,
@@ -63,6 +56,4 @@ const TypeTesterStandaloneElement = _ref => {
     variableSettings: parseVariableSettings(variableSettings)
   }, rest));
 };
-exports.TypeTesterStandaloneElement = TypeTesterStandaloneElement;
-var _default = TypeTesterStandaloneElement;
-exports.default = _default;
+export default TypeTesterStandaloneElement;

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

@@ -1,5 +1,5 @@
-import { Content, Size, LineHeight, Alignment, Direction } from './types';
-import { VariableSettings } from '../../utils';
+import { Content, Size, LineHeight, Alignment, Direction } from './types.js';
+import { VariableSettings } from '../../utils.js';
 interface TypeTesterStateProps {
     id: string;
 }

package/dist/components/TypeTester/TypeTesterState.js

@@ -1,23 +1,16 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _react = require("react");
-var _TypeTesterContext = require("./TypeTesterContext");
-var _ConfigContext = _interopRequireDefault(require("../ConfigContext"));
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+import { useContext } from 'react';
+import { TypeTesterContext } from './TypeTesterContext.js';
+import ConfigContext from '../ConfigContext.js';
 const useTypeTesterState = _ref => {
   let {
     id
   } = _ref;
-  const config = (0, _react.useContext)(_ConfigContext.default);
+  const config = useContext(ConfigContext);
   const {
     testers,
     globalFeaturesOpen,
     dispatch
-  } = (0, _react.useContext)(_TypeTesterContext.TypeTesterContext);
+  } = useContext(TypeTesterContext);
   const toolsPosition = config.typeTester.toolsPosition;
   const {
     content,
@@ -130,5 +123,4 @@ const useTypeTesterState = _ref => {
     direction
   };
 };
-var _default = useTypeTesterState;
-exports.default = _default;
+export default useTypeTesterState;

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { VariableInstance, VariableSettings } from '../../utils';
+import { VariableInstance, VariableSettings } from '../../utils.js';
 export interface SelectedFamily {
     id: string;
     name: string;

package/dist/components/TypeTester/TypeTesterStyleSelect.js

@@ -1,13 +1,6 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _react = _interopRequireDefault(require("react"));
-var _utils = require("../../utils");
-var _Select = _interopRequireDefault(require("../Select"));
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+import React from 'react';
+import { compareVariableSettings, variableInstanceSettings } from '../../utils.js';
+import Select from '../Select/index.js';
 const VARIABLE_AXES = 'VARIABLE_AXES';
 const LOADING = '__loading__';
 const TypeTesterStyleSelect = _ref => {
@@ -34,7 +27,7 @@ const TypeTesterStyleSelect = _ref => {
       const [fontStyleId, instanceName] = selection.split(':::');
       const instance = selectedFamily === null || selectedFamily === void 0 ? void 0 : (_selectedFamily$fontS = selectedFamily.fontStyles) === null || _selectedFamily$fontS === void 0 ? void 0 : (_selectedFamily$fontS2 = _selectedFamily$fontS.find(style => style.id === fontStyleId)) === null || _selectedFamily$fontS2 === void 0 ? void 0 : (_selectedFamily$fontS3 = _selectedFamily$fontS2.variableInstances) === null || _selectedFamily$fontS3 === void 0 ? void 0 : _selectedFamily$fontS3.find(inst => inst.name === instanceName);
       let variableSettings;
-      if (instance) variableSettings = (0, _utils.variableInstanceSettings)(instance);
+      if (instance) variableSettings = variableInstanceSettings(instance);
       onSelectFontStyleValue({
         fontStyleId,
         variableSettings
@@ -87,7 +80,7 @@ const TypeTesterStyleSelect = _ref => {
   let styleValue = selectedFontStyleId;
   if (selectedVariableSettings) {
     var _selectedFamily$fontS5, _selectedFamily$fontS6, _selectedFamily$fontS7;
-    const instance = selectedFamily === null || selectedFamily === void 0 ? void 0 : (_selectedFamily$fontS5 = selectedFamily.fontStyles) === null || _selectedFamily$fontS5 === void 0 ? void 0 : (_selectedFamily$fontS6 = _selectedFamily$fontS5.find(style => style.id === selectedFontStyleId)) === null || _selectedFamily$fontS6 === void 0 ? void 0 : (_selectedFamily$fontS7 = _selectedFamily$fontS6.variableInstances) === null || _selectedFamily$fontS7 === void 0 ? void 0 : _selectedFamily$fontS7.find(inst => (0, _utils.compareVariableSettings)(inst, selectedVariableSettings));
+    const instance = selectedFamily === null || selectedFamily === void 0 ? void 0 : (_selectedFamily$fontS5 = selectedFamily.fontStyles) === null || _selectedFamily$fontS5 === void 0 ? void 0 : (_selectedFamily$fontS6 = _selectedFamily$fontS5.find(style => style.id === selectedFontStyleId)) === null || _selectedFamily$fontS6 === void 0 ? void 0 : (_selectedFamily$fontS7 = _selectedFamily$fontS6.variableInstances) === null || _selectedFamily$fontS7 === void 0 ? void 0 : _selectedFamily$fontS7.find(inst => compareVariableSettings(inst, selectedVariableSettings));
     styleValue = instance ? `${selectedFontStyleId}:::${instance.name}` : null;
   }
 
@@ -96,7 +89,7 @@ const TypeTesterStyleSelect = _ref => {
     if (e.target.value === LOADING) return;
     cb(e.target.value);
   };
-  return /*#__PURE__*/_react.default.createElement("div", {
+  return /*#__PURE__*/React.createElement("div", {
     className: "type-tester-select",
     "data-loading": loading || undefined,
     "aria-busy": loading || undefined,
@@ -104,14 +97,14 @@ const TypeTesterStyleSelect = _ref => {
       opacity: loading ? 0.6 : 1,
       transition: 'opacity 120ms ease'
     }
-  }, /*#__PURE__*/_react.default.createElement(_Select.default, {
+  }, /*#__PURE__*/React.createElement(Select, {
     options: familyOptions,
     value: familyValue,
     onChange: ignoreLoading(onSelectFamilyId),
     onMouseDown: () => onOpen === null || onOpen === void 0 ? void 0 : onOpen(),
     onFocus: () => onOpen === null || onOpen === void 0 ? void 0 : onOpen(),
     onClick: e => e.stopPropagation()
-  }), styleOptions.length > 0 && /*#__PURE__*/_react.default.createElement(_Select.default, {
+  }), styleOptions.length > 0 && /*#__PURE__*/React.createElement(Select, {
     options: styleOptions,
     value: styleValue,
     nullText: "Custom",
@@ -121,5 +114,4 @@ const TypeTesterStyleSelect = _ref => {
     onClick: e => e.stopPropagation()
   }));
 };
-var _default = TypeTesterStyleSelect;
-exports.default = _default;
+export default TypeTesterStyleSelect;

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

@@ -1,7 +1,7 @@
 import React from 'react';
-import { VariableSettings } from '../../utils';
-import { TypeTesterStyleSelectData_fontStyle$key } from '../../__generated__/TypeTesterStyleSelectData_fontStyle.graphql';
-import { TypeTesterConfig } from '.';
+import { VariableSettings } from '../../utils.js';
+import { TypeTesterStyleSelectData_fontStyle$key } from '../../__generated__/TypeTesterStyleSelectData_fontStyle.graphql.js';
+import { TypeTesterConfig } from './index.js';
 interface TypeTesterStyleSelectDataProps {
     fontStyle: TypeTesterStyleSelectData_fontStyle$key;
     variableSettings: VariableSettings | null;

package/dist/components/TypeTester/TypeTesterStyleSelectData.js

@@ -1,21 +1,12 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = TypeTesterStyleSelectData;
-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 _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;
+import _TypeTesterStyleSelectData_fontStyle from "../../__generated__/TypeTesterStyleSelectData_fontStyle.graphql.js";
+import _TypeTesterStyleSelectData_fontStyleData from "../../__generated__/TypeTesterStyleSelectData_fontStyleData.graphql.js";
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { useFragment } from 'react-relay';
+import { graphql } from 'relay-runtime';
+import { variableInstanceSettings, compareVariableSettings } from '../../utils.js';
+import TypeTesterStyleSelect from './TypeTesterStyleSelect.js';
+import { useTypeTesterFamilies } from './TypeTesterFamilies.js';
+_TypeTesterStyleSelectData_fontStyleData.hash && _TypeTesterStyleSelectData_fontStyleData.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_fontStyleData;
 // get a score for similarity between two styles
 // 0 < n <= 1
 // where 1 = exact match
@@ -94,29 +85,29 @@ function TypeTesterStyleSelectSelectable(_ref) {
     loadFamilies,
     getFamilyStyles,
     loadFamilyStyles
-  } = (0, _TypeTesterFamilies.useTypeTesterFamilies)();
+  } = 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);
+  const [pendingFamilyId, setPendingFamilyId] = 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);
+  const submittedFamilyRef = 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)(() => {
+  const frozenVariableSettingsRef = useRef(variableSettings);
+  const handleOpen = useCallback(() => {
     loadFamilies();
     loadFamilyStyles(currentFamilyId);
   }, [loadFamilies, loadFamilyStyles, currentFamilyId]);
-  const handleSelectFamilyId = (0, _react.useCallback)(id => {
+  const handleSelectFamilyId = useCallback(id => {
     if (id === currentFamilyId) {
       // Re-selecting the active family cancels any in-flight switch.
       setPendingFamilyId(null);
@@ -136,7 +127,7 @@ function TypeTesterStyleSelectSelectable(_ref) {
   // 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)(() => {
+  useEffect(() => {
     if (!pendingFamilyId || !pendingEntry || pendingEntry.loading || !pendingEntry.styles) {
       return;
     }
@@ -151,7 +142,7 @@ function TypeTesterStyleSelectSelectable(_ref) {
         var _newFontStyle$variabl;
         fontStyleId = newFontStyle.id;
         const instance = (_newFontStyle$variabl = newFontStyle.variableInstances) === null || _newFontStyle$variabl === void 0 ? void 0 : _newFontStyle$variabl[0];
-        if (instance) newVariableSettings = (0, _utils.variableInstanceSettings)(instance);
+        if (instance) newVariableSettings = variableInstanceSettings(instance);
       }
     } else if (styles.length > 0) {
       fontStyleId = styles.map(right => ({
@@ -167,7 +158,7 @@ function TypeTesterStyleSelectSelectable(_ref) {
 
   // 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)(() => {
+  useEffect(() => {
     if (pendingFamilyId && currentFamilyId === pendingFamilyId) {
       setPendingFamilyId(null);
       submittedFamilyRef.current = null;
@@ -176,13 +167,13 @@ function TypeTesterStyleSelectSelectable(_ref) {
 
   // Capture the variableSettings while settled so it can be held frozen for the
   // duration of a switch (see `frozenVariableSettingsRef`).
-  (0, _react.useEffect)(() => {
+  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)(() => {
+  const familyOptions = useMemo(() => {
     if (!families) {
       return fontStyle.family ? [{
         id: fontStyle.family.id,
@@ -201,14 +192,14 @@ function TypeTesterStyleSelectSelectable(_ref) {
     }));
   }, [families, fontStyle.family, fontStyle.supportedLanguages]);
   if (!fontStyle.family) {
-    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, fallbackName);
+    return /*#__PURE__*/React.createElement(React.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);
+    return /*#__PURE__*/React.createElement(React.Fragment, null, fallbackName);
   }
 
   // Style options always reflect the *active* font's family. When a pending
@@ -219,7 +210,7 @@ function TypeTesterStyleSelectSelectable(_ref) {
   // 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, {
+  return /*#__PURE__*/React.createElement(TypeTesterStyleSelect, {
     families: familyOptions,
     selectedFamily: selectedFamily
     // Hold the displayed family on the active font's family until the switch
@@ -238,7 +229,7 @@ function TypeTesterStyleSelectSelectable(_ref) {
     includeVariableAxesOption: includeVariableAxesOption
   });
 }
-function TypeTesterStyleSelectData(_ref2) {
+export default function TypeTesterStyleSelectData(_ref2) {
   var _fontStyle$variableIn2;
   let {
     fontStyle: fontStyleKey,
@@ -248,19 +239,19 @@ function TypeTesterStyleSelectData(_ref2) {
     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", {
+  const fontStyle = useFragment((_TypeTesterStyleSelectData_fontStyle.hash && _TypeTesterStyleSelectData_fontStyle.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_fontStyle), fontStyleKey);
+  const instance = variableSettings ? (_fontStyle$variableIn2 = fontStyle.variableInstances) === null || _fontStyle$variableIn2 === void 0 ? void 0 : _fontStyle$variableIn2.find(inst => compareVariableSettings(inst, variableSettings)) : null;
+  const name = fontStyle.family ? /*#__PURE__*/React.createElement("div", {
     className: "type-tester__name"
-  }, /*#__PURE__*/_react.default.createElement("span", {
+  }, /*#__PURE__*/React.createElement("span", {
     className: "type-tester__name__family"
-  }, fontStyle.family.name), ' ', /*#__PURE__*/_react.default.createElement("span", {
+  }, fontStyle.family.name), ' ', /*#__PURE__*/React.createElement("span", {
     className: "type-tester__name__style"
   }, 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.createElement(React.Fragment, null, name);
   }
-  return /*#__PURE__*/_react.default.createElement(TypeTesterStyleSelectSelectable, {
+  return /*#__PURE__*/React.createElement(TypeTesterStyleSelectSelectable, {
     fontStyle: fontStyle,
     variableSettings: variableSettings,
     onSelectFontStyleValue: onSelectFontStyleValue,

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

@@ -1,6 +1,6 @@
 import React from 'react';
-import { TypeTesterAxesPosition } from './types';
-import { TypeTesterToolbar_fontStyle$key } from '__generated__/TypeTesterToolbar_fontStyle.graphql';
+import { TypeTesterAxesPosition } from './types.js';
+import { TypeTesterToolbar_fontStyle$key } from '__generated__/TypeTesterToolbar_fontStyle.graphql.js';
 interface TypeTesterToolbar_props {
     id: string;
     features?: ReadonlyArray<string> | null;