fontdue-js 2.22.4 → 3.0.0-alpha2

package/dist/components/CharacterViewer/index.js

@@ -1,39 +1,33 @@
-"use strict";
 'use client';
 
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.CharacterViewerPreloadedIDQueryRenderer = CharacterViewerPreloadedIDQueryRenderer;
-exports.CharacterViewerPreloadedSlugQueryRenderer = CharacterViewerPreloadedSlugQueryRenderer;
-exports.default = CharacterViewer;
-var _CharacterViewerSlugQuery2 = _interopRequireDefault(require("../../__generated__/CharacterViewerSlugQuery.graphql"));
-var _CharacterViewerIDQuery2 = _interopRequireDefault(require("../../__generated__/CharacterViewerIDQuery.graphql"));
-var _CharacterViewer_style2 = _interopRequireDefault(require("../../__generated__/CharacterViewer_style.graphql"));
-var _CharacterViewer_collection2 = _interopRequireDefault(require("../../__generated__/CharacterViewer_collection.graphql"));
-var _CharacterViewer_family2 = _interopRequireDefault(require("../../__generated__/CharacterViewer_family.graphql"));
-var _react = _interopRequireWildcard(require("react"));
-var _reactRelay = require("react-relay");
-var _resizeObserver = _interopRequireDefault(require("@react-hook/resize-observer"));
-var _retryImport = _interopRequireDefault(require("../../retryImport"));
-var _utils = require("../../utils");
-var _useFontStyle = _interopRequireDefault(require("../useFontStyle"));
-var _useSerializablePreloadedQuery = _interopRequireDefault(require("../../relay/useSerializablePreloadedQuery"));
-var _StyleSelect = _interopRequireDefault(require("./StyleSelect"));
-var _Checkbox = _interopRequireDefault(require("../Checkbox"));
-var _CharacterViewerStyleRefetchQuery = _interopRequireDefault(require("../../__generated__/CharacterViewerStyleRefetchQuery.graphql"));
-function _interopRequireDefault(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; }
 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 _CharacterViewerSlugQuery from "../../__generated__/CharacterViewerSlugQuery.graphql.js";
+import _CharacterViewerIDQuery from "../../__generated__/CharacterViewerIDQuery.graphql.js";
+import _CharacterViewer_style from "../../__generated__/CharacterViewer_style.graphql.js";
+import _CharacterViewer_collection from "../../__generated__/CharacterViewer_collection.graphql.js";
+import _CharacterViewer_family from "../../__generated__/CharacterViewer_family.graphql.js";
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { fetchQuery, graphql, useFragment, useLazyLoadQuery, usePreloadedQuery, useRefetchableFragment, useRelayEnvironment } from 'react-relay';
+import useResizeObserver from '../../hooks/useResizeObserver.js';
+import retryImport from '../../retryImport.js';
+import { notEmpty, variableInstanceSettings, variableSettingsCSS } from '../../utils.js';
+import useFontStyle from '../useFontStyle.js';
+import useSerializablePreloadedQuery from '../../relay/useSerializablePreloadedQuery.js';
+import loadSerializableQuery from '../../relay/loadSerializableQuery.js';
+import CharacterViewerIDQueryNode from '../../__generated__/CharacterViewerIDQuery.graphql.js';
+import CharacterViewerSlugQueryNode from '../../__generated__/CharacterViewerSlugQuery.graphql.js';
+import StyleSelect from './StyleSelect.js';
+import Checkbox from '../Checkbox/index.js';
+import CharacterViewerStyleRefetchQueryNode from '../../__generated__/CharacterViewerStyleRefetchQuery.graphql.js';
+import { EnsureFontdueContext } from '../FontdueContextProvider/index.js';
 function useSize() {
-  const ref = (0, _react.useRef)(null);
-  const [size, setSize] = _react.default.useState();
-  (0, _react.useEffect)(() => {
+  const ref = useRef(null);
+  const [size, setSize] = React.useState();
+  useEffect(() => {
     if (!ref.current) return;
     setSize(ref.current.getBoundingClientRect());
   }, [ref]);
-  (0, _resizeObserver.default)(ref, entry => setSize(entry.contentRect), {
+  useResizeObserver(ref, entry => setSize(entry.contentRect), {
     polyfill: typeof window === 'undefined' ? ServerSideResizeObserverPolyfill : null
   });
   return {
@@ -48,16 +42,16 @@ class ServerSideResizeObserverPolyfill {
   unobserve(_target) {}
 }
 function Character(props) {
-  const ref = (0, _react.useRef)(null);
-  const [size, setSize] = (0, _react.useState)(1);
-  (0, _resizeObserver.default)(ref, entry => {
+  const ref = useRef(null);
+  const [size, setSize] = useState(1);
+  useResizeObserver(ref, entry => {
     if (entry.target.scrollWidth > entry.target.clientWidth) {
       setSize(size + 1);
     }
   }, {
     polyfill: typeof window === 'undefined' ? ServerSideResizeObserverPolyfill : null
   });
-  return /*#__PURE__*/_react.default.createElement("div", _extends({
+  return /*#__PURE__*/React.createElement("div", _extends({
     ref: ref
   }, props, {
     "data-size": size
@@ -73,18 +67,18 @@ function GlyphMeta(_ref) {
   } = _ref;
   if (!glyph) return null;
   const unicodeName = getUnicodeName(glyph);
-  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("span", null, "Glyph name"), /*#__PURE__*/_react.default.createElement("span", null, getGlyphName(glyph)), unicodeName && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("span", null, "Unicode name"), /*#__PURE__*/_react.default.createElement("span", {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", null, "Glyph name"), /*#__PURE__*/React.createElement("span", null, getGlyphName(glyph)), unicodeName && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", null, "Unicode name"), /*#__PURE__*/React.createElement("span", {
     title: unicodeName
-  }, unicodeName)), /*#__PURE__*/_react.default.createElement("span", null, "Unicode decimal"), /*#__PURE__*/_react.default.createElement("span", null, glyph.string.split('').map(str => str.charCodeAt(0).toString(10)).join(', ')), /*#__PURE__*/_react.default.createElement("span", null, "Unicode hex"), /*#__PURE__*/_react.default.createElement("span", null, glyph.string.split('').map(str => str.charCodeAt(0).toString(16).padStart(4, '0')).join(', ')), glyph.features && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement("span", null, "OpenType feature", glyph.features.length > 1 ? 's' : ''), /*#__PURE__*/_react.default.createElement("span", null, /*#__PURE__*/_react.default.createElement("label", null, /*#__PURE__*/_react.default.createElement(_Checkbox.default, {
+  }, unicodeName)), /*#__PURE__*/React.createElement("span", null, "Unicode decimal"), /*#__PURE__*/React.createElement("span", null, glyph.string.split('').map(str => str.charCodeAt(0).toString(10)).join(', ')), /*#__PURE__*/React.createElement("span", null, "Unicode hex"), /*#__PURE__*/React.createElement("span", null, glyph.string.split('').map(str => str.charCodeAt(0).toString(16).padStart(4, '0')).join(', ')), glyph.features && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", null, "OpenType feature", glyph.features.length > 1 ? 's' : ''), /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement("label", null, /*#__PURE__*/React.createElement(Checkbox, {
     checked: featuresChecked,
     onChange: e => setFeaturesChecked(e.target.checked)
   }), glyph.features.join(', ')))));
 }
 function useUnicodeData() {
-  const [data, setData] = (0, _react.useState)();
-  (0, _react.useEffect)(() => {
+  const [data, setData] = useState();
+  useEffect(() => {
     function fetchData() {
-      (0, _retryImport.default)(() => Promise.resolve().then(() => _interopRequireWildcard(require('../../data/unicodeData')))).then(data => {
+      retryImport(() => import('../../data/unicodeData.js')).then(data => {
         if (!ignore) setData(data.default);
       }).catch(() => {});
     }
@@ -143,7 +137,7 @@ function flattenCharacterList(charSet, glyphNames) {
     }))
   };
 }
-_CharacterViewer_family2.default.hash && _CharacterViewer_family2.default.hash !== "162b1a99fe187b20ee8560018cd5b3ce" && console.error("The definition of 'CharacterViewer_family' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _CharacterViewer_family2.default;
+_CharacterViewer_family.hash && _CharacterViewer_family.hash !== "162b1a99fe187b20ee8560018cd5b3ce" && console.error("The definition of 'CharacterViewer_family' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _CharacterViewer_family;
 function areCombiningChars(input) {
   for (const char of input) {
     const codePoint = char.codePointAt(0);
@@ -171,25 +165,25 @@ function CharacterViewerComponent(_ref3) {
   let {
     collection: collectionKey
   } = _ref3;
-  const collection = (0, _reactRelay.useFragment)((_CharacterViewer_collection2.default.hash && _CharacterViewer_collection2.default.hash !== "c2116c3c2c795e5306c3a2a0ecd60137" && console.error("The definition of 'CharacterViewer_collection' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _CharacterViewer_collection2.default), collectionKey);
-  const [fontStyle, refetchFontStyle] = (0, _reactRelay.useRefetchableFragment)((_CharacterViewer_style2.default.hash && _CharacterViewer_style2.default.hash !== "8cbf3328030930b88b3ec3601aaf7c45" && console.error("The definition of 'CharacterViewer_style' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _CharacterViewer_style2.default), collection.featureStyle);
+  const collection = useFragment((_CharacterViewer_collection.hash && _CharacterViewer_collection.hash !== "c2116c3c2c795e5306c3a2a0ecd60137" && console.error("The definition of 'CharacterViewer_collection' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _CharacterViewer_collection), collectionKey);
+  const [fontStyle, refetchFontStyle] = useRefetchableFragment((_CharacterViewer_style.hash && _CharacterViewer_style.hash !== "8cbf3328030930b88b3ec3601aaf7c45" && console.error("The definition of 'CharacterViewer_style' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _CharacterViewer_style), collection.featureStyle);
   let families = [];
   if (collection.collectionType === 'family') families = [collection];
   if (collection.collectionType === 'superfamily' && collection.children) families = collection.children;
   const unicodeData = useUnicodeData();
   let initialVariableSettings;
   if (fontStyle !== null && fontStyle !== void 0 && fontStyle.variableInstances) {
-    initialVariableSettings = (0, _utils.variableInstanceSettings)(fontStyle.variableInstances[0]);
+    initialVariableSettings = variableInstanceSettings(fontStyle.variableInstances[0]);
   }
-  const [variableSettings, setVariableSettings] = (0, _react.useState)(initialVariableSettings);
-  const [featuresChecked, setFeaturesChecked] = (0, _react.useState)(true);
-  const environment = (0, _reactRelay.useRelayEnvironment)();
+  const [variableSettings, setVariableSettings] = useState(initialVariableSettings);
+  const [featuresChecked, setFeaturesChecked] = useState(true);
+  const environment = useRelayEnvironment();
   const handleStyleSelect = value => {
     const variables = {
       id: value.fontStyleId
     };
     // avoid Suspense using fetchQuery. future react may simplify this
-    (0, _reactRelay.fetchQuery)(environment, _CharacterViewerStyleRefetchQuery.default, variables).subscribe({
+    fetchQuery(environment, CharacterViewerStyleRefetchQueryNode, variables).subscribe({
       complete: () => {
         refetchFontStyle(variables, {
           fetchPolicy: 'store-only'
@@ -200,23 +194,23 @@ function CharacterViewerComponent(_ref3) {
   };
   let {
     style
-  } = (0, _useFontStyle.default)({
+  } = useFontStyle({
     fontStyle: fontStyle
   });
   if (variableSettings) {
     style = {
       ...style,
-      ...(0, _utils.variableSettingsCSS)(variableSettings)
+      ...variableSettingsCSS(variableSettings)
     };
   }
-  const [selectedGlyph, setSelectedGlyph] = (0, _react.useState)({
+  const [selectedGlyph, setSelectedGlyph] = useState({
     string: 'A'
   });
-  const [activeGlyph, setActiveGlyph] = (0, _react.useState)({
+  const [activeGlyph, setActiveGlyph] = useState({
     string: 'A'
   });
   const visibleGlyph = activeGlyph ?? selectedGlyph;
-  const getGlyphName = (0, _react.useCallback)(glyph => {
+  const getGlyphName = useCallback(glyph => {
     var _fontStyle$glyphNames, _fontStyle$glyphNames2;
     return (fontStyle === null || fontStyle === void 0 ? void 0 : (_fontStyle$glyphNames = fontStyle.glyphNames) === null || _fontStyle$glyphNames === void 0 ? void 0 : (_fontStyle$glyphNames2 = _fontStyle$glyphNames.find(_ref4 => {
       let {
@@ -229,7 +223,7 @@ function CharacterViewerComponent(_ref3) {
       });
     })) === null || _fontStyle$glyphNames2 === void 0 ? void 0 : _fontStyle$glyphNames2.name) ?? null;
   }, [fontStyle, compareGlyphs]);
-  const getUnicodeName = (0, _react.useCallback)(glyph => {
+  const getUnicodeName = useCallback(glyph => {
     return (unicodeData === null || unicodeData === void 0 ? void 0 : unicodeData[glyph.string.charCodeAt(0)]) ?? null;
   }, [unicodeData]);
   const handleMouseLeave = () => {
@@ -288,7 +282,7 @@ function CharacterViewerComponent(_ref3) {
   // Skip this line if it's within the threshold of any already-accepted
   // higher-priority line — otherwise accept it
   threshold > 0 && visible.some(v => Math.abs(v.position - line.position) < threshold) ? visible : [...visible, line], []);
-  const groups = (0, _react.useMemo)(() => {
+  const groups = useMemo(() => {
     var _collection$glyphGrou;
     return (_collection$glyphGrou = collection.glyphGroups) === null || _collection$glyphGrou === void 0 ? void 0 : _collection$glyphGrou.map(_ref5 => {
       var _characterSets$filter;
@@ -307,13 +301,13 @@ function CharacterViewerComponent(_ref3) {
         === void 0 ? void 0 : (_characterSets$filter = characterSets
         // Filter out character sets with Arabic positional features (init, medi, fina)
         // These don't render correctly in Safari due to text shaping limitations
-        .filter(charSet => !hasUnsupportedPositionalFeatures(charSet.features))) === null || _characterSets$filter === void 0 ? void 0 : _characterSets$filter.map(charSet => flattenCharacterList(charSet, fontStyle.glyphNames)).filter(_utils.notEmpty)
+        .filter(charSet => !hasUnsupportedPositionalFeatures(charSet.features))) === null || _characterSets$filter === void 0 ? void 0 : _characterSets$filter.map(charSet => flattenCharacterList(charSet, fontStyle.glyphNames)).filter(notEmpty)
       };
     })
     // Filter out groups that have no character sets left after filtering
     .filter(group => group.characterSets && group.characterSets.length > 0);
   }, [collection, fontStyle]);
-  return /*#__PURE__*/_react.default.createElement("div", {
+  return /*#__PURE__*/React.createElement("div", {
     className: "character-viewer",
     style: {
       '--units-per-em': fontStyle.verticalMetrics.unitsPerEm,
@@ -324,45 +318,45 @@ function CharacterViewerComponent(_ref3) {
       '--line-gap': fontStyle.verticalMetrics.lineGap ?? undefined,
       '--monitor-width': monitorWidth
     }
-  }, /*#__PURE__*/_react.default.createElement("div", {
+  }, /*#__PURE__*/React.createElement("div", {
     className: "character-viewer__character-map"
-  }, /*#__PURE__*/_react.default.createElement("div", {
+  }, /*#__PURE__*/React.createElement("div", {
     className: "character-viewer__monitor"
-  }, visibleGlyph && /*#__PURE__*/_react.default.createElement("div", {
+  }, visibleGlyph && /*#__PURE__*/React.createElement("div", {
     className: "character-viewer__monitor__container"
-  }, /*#__PURE__*/_react.default.createElement("div", {
+  }, /*#__PURE__*/React.createElement("div", {
     className: "character-viewer__monitor__character-container"
-  }, /*#__PURE__*/_react.default.createElement("div", {
+  }, /*#__PURE__*/React.createElement("div", {
     className: "character-viewer__monitor__character",
     style: {
       ...style,
       fontFeatureSettings: visibleGlyph.features && featuresChecked ? `${visibleGlyph.features.map(feature => `'${feature}' 1`).join(', ')}` : `'calt' off, 'liga' off`
     },
     ref: monitorRef
-  }, /*#__PURE__*/_react.default.createElement("span", null, visibleGlyph.string)), lines.map(line => /*#__PURE__*/_react.default.createElement("div", {
+  }, /*#__PURE__*/React.createElement("span", null, visibleGlyph.string)), lines.map(line => /*#__PURE__*/React.createElement("div", {
     className: "character-viewer__monitor__line",
     "data-name": line.name,
     key: line.name
-  }, /*#__PURE__*/_react.default.createElement("span", {
+  }, /*#__PURE__*/React.createElement("span", {
     className: "character-viewer__monitor__line__label"
-  }, line.label), /*#__PURE__*/_react.default.createElement("span", {
+  }, line.label), /*#__PURE__*/React.createElement("span", {
     className: "character-viewer__monitor__line__value"
-  }, line.value)))), /*#__PURE__*/_react.default.createElement("div", {
+  }, line.value)))), /*#__PURE__*/React.createElement("div", {
     className: "character-viewer__monitor__details"
-  }, /*#__PURE__*/_react.default.createElement("span", null, "Font style"), /*#__PURE__*/_react.default.createElement("span", null, /*#__PURE__*/_react.default.createElement(_StyleSelect.default, {
+  }, /*#__PURE__*/React.createElement("span", null, "Font style"), /*#__PURE__*/React.createElement("span", null, /*#__PURE__*/React.createElement(StyleSelect, {
     collections: families,
     onChange: handleStyleSelect,
     value: {
       fontStyleId: fontStyle.id,
       variableSettings
     }
-  })), /*#__PURE__*/_react.default.createElement(GlyphMeta, {
+  })), /*#__PURE__*/React.createElement(GlyphMeta, {
     glyph: visibleGlyph,
     getGlyphName: getGlyphName,
     getUnicodeName: getUnicodeName,
     featuresChecked: featuresChecked,
     setFeaturesChecked: setFeaturesChecked
-  })))), /*#__PURE__*/_react.default.createElement("div", {
+  })))), /*#__PURE__*/React.createElement("div", {
     className: "character-viewer_blocks",
     ref: blocksRef,
     style: {
@@ -373,17 +367,17 @@ function CharacterViewerComponent(_ref3) {
       name,
       characterSets
     } = _ref6;
-    return /*#__PURE__*/_react.default.createElement("div", {
+    return /*#__PURE__*/React.createElement("div", {
       className: "character-viewer__block",
       key: i,
       "data-name": name
-    }, /*#__PURE__*/_react.default.createElement("div", {
+    }, /*#__PURE__*/React.createElement("div", {
       className: "character-viewer__block__name"
-    }, name), /*#__PURE__*/_react.default.createElement("div", {
+    }, name), /*#__PURE__*/React.createElement("div", {
       className: "character-viewer__block__characters",
       style: style,
       onMouseLeave: handleMouseLeave
-    }, characterSets === null || characterSets === void 0 ? void 0 : characterSets.map((set, j) => /*#__PURE__*/_react.default.createElement("div", {
+    }, characterSets === null || characterSets === void 0 ? void 0 : characterSets.map((set, j) => /*#__PURE__*/React.createElement("div", {
       key: j,
       className: "character-viewer__block__character-list",
       style: {
@@ -394,37 +388,51 @@ function CharacterViewerComponent(_ref3) {
         string: chars,
         features: set.features
       };
-      return /*#__PURE__*/_react.default.createElement(Character, {
+      return /*#__PURE__*/React.createElement(Character, {
         key: k,
         onClick: () => setSelectedGlyph(selection),
         onMouseEnter: () => setActiveGlyph(selection),
         "data-selected": compareGlyphs(selectedGlyph, selection)
-      }, areCombiningChars(chars) ? /*#__PURE__*/_react.default.createElement("span", null, '\u200C', chars) : chars);
+      }, areCombiningChars(chars) ? /*#__PURE__*/React.createElement("span", null, '\u200C', chars) : chars);
     })))));
   }))));
 }
-const idQuery = (_CharacterViewerIDQuery2.default.hash && _CharacterViewerIDQuery2.default.hash !== "f90b09a4df6d95307b0a5d5fda487cdc" && console.error("The definition of 'CharacterViewerIDQuery' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _CharacterViewerIDQuery2.default);
+const idQuery = (_CharacterViewerIDQuery.hash && _CharacterViewerIDQuery.hash !== "f90b09a4df6d95307b0a5d5fda487cdc" && console.error("The definition of 'CharacterViewerIDQuery' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _CharacterViewerIDQuery);
+const slugQuery = (_CharacterViewerSlugQuery.hash && _CharacterViewerSlugQuery.hash !== "afa08a8f050e0434308892fea6e3c267" && console.error("The definition of 'CharacterViewerSlugQuery' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _CharacterViewerSlugQuery);
+export async function loadCharacterViewerQuery(variables, options) {
+  if (variables.collectionId) {
+    return loadSerializableQuery(CharacterViewerIDQueryNode, {
+      collectionId: variables.collectionId
+    }, options);
+  }
+  if (variables.collectionSlug) {
+    return loadSerializableQuery(CharacterViewerSlugQueryNode, {
+      collectionSlug: variables.collectionSlug
+    }, options);
+  }
+  throw new Error('loadCharacterViewerQuery expected either collectionId or collectionSlug');
+}
 function CharacterViewerIdQueryRenderer(_ref7) {
   let {
     collectionId
   } = _ref7;
-  const data = (0, _reactRelay.useLazyLoadQuery)(idQuery, {
+  const data = useLazyLoadQuery(idQuery, {
     collectionId
   });
   if (!data.node) return null;
-  return /*#__PURE__*/_react.default.createElement(CharacterViewerComponent, {
+  return /*#__PURE__*/React.createElement(CharacterViewerComponent, {
     collection: data.node
   });
 }
-function CharacterViewerPreloadedIDQueryRenderer(_ref8) {
+export function CharacterViewerPreloadedIDQueryRenderer(_ref8) {
   let {
     preloadedQuery,
     ...rest
   } = _ref8;
-  const queryRef = (0, _useSerializablePreloadedQuery.default)(preloadedQuery);
-  const data = (0, _reactRelay.usePreloadedQuery)(idQuery, queryRef);
+  const queryRef = useSerializablePreloadedQuery(preloadedQuery);
+  const data = usePreloadedQuery(idQuery, queryRef);
   if (!data.node) return null;
-  return /*#__PURE__*/_react.default.createElement(CharacterViewerComponent, _extends({}, rest, {
+  return /*#__PURE__*/React.createElement(CharacterViewerComponent, _extends({}, rest, {
     collection: data.node
   }));
 }
@@ -433,43 +441,75 @@ function CharacterViewerSlugQueryRenderer(_ref9) {
   let {
     collectionSlug
   } = _ref9;
-  const data = (0, _reactRelay.useLazyLoadQuery)((_CharacterViewerSlugQuery2.default.hash && _CharacterViewerSlugQuery2.default.hash !== "afa08a8f050e0434308892fea6e3c267" && console.error("The definition of 'CharacterViewerSlugQuery' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _CharacterViewerSlugQuery2.default), {
+  const data = useLazyLoadQuery(slugQuery, {
     collectionSlug
   });
   const collection = data === null || data === void 0 ? void 0 : (_data$viewer = data.viewer) === null || _data$viewer === void 0 ? void 0 : (_data$viewer$slug = _data$viewer.slug) === null || _data$viewer$slug === void 0 ? void 0 : _data$viewer$slug.fontCollection;
   if (!collection) return null;
-  return /*#__PURE__*/_react.default.createElement(CharacterViewerComponent, {
+  return /*#__PURE__*/React.createElement(CharacterViewerComponent, {
     collection: collection
   });
 }
-function CharacterViewerPreloadedSlugQueryRenderer(_ref10) {
+export function CharacterViewerPreloadedSlugQueryRenderer(_ref10) {
   var _data$viewer2, _data$viewer2$slug;
   let {
     preloadedQuery,
     ...rest
   } = _ref10;
-  const queryRef = (0, _useSerializablePreloadedQuery.default)(preloadedQuery);
-  const data = (0, _reactRelay.usePreloadedQuery)(idQuery, queryRef);
+  const queryRef = useSerializablePreloadedQuery(preloadedQuery);
+  const data = usePreloadedQuery(slugQuery, queryRef);
   const collection = data === null || data === void 0 ? void 0 : (_data$viewer2 = data.viewer) === null || _data$viewer2 === void 0 ? void 0 : (_data$viewer2$slug = _data$viewer2.slug) === null || _data$viewer2$slug === void 0 ? void 0 : _data$viewer2$slug.fontCollection;
   if (!collection) return null;
-  return /*#__PURE__*/_react.default.createElement(CharacterViewerComponent, _extends({}, rest, {
+  return /*#__PURE__*/React.createElement(CharacterViewerComponent, _extends({}, rest, {
     collection: collection
   }));
 }
-function CharacterViewer(_ref11) {
+function CharacterViewerPreloadedRenderer(_ref11) {
   let {
-    collectionId,
-    collectionSlug
+    preloadedQuery,
+    ...rest
   } = _ref11;
-  if (collectionId) {
-    return /*#__PURE__*/_react.default.createElement(CharacterViewerIdQueryRenderer, {
-      collectionId: collectionId
-    });
+  if (preloadedQuery.params.name === 'CharacterViewerIDQuery') {
+    return /*#__PURE__*/React.createElement(CharacterViewerPreloadedIDQueryRenderer, _extends({
+      preloadedQuery: preloadedQuery
+    }, rest));
   }
-  if (collectionSlug) {
-    return /*#__PURE__*/_react.default.createElement(CharacterViewerSlugQueryRenderer, {
+  return /*#__PURE__*/React.createElement(CharacterViewerPreloadedSlugQueryRenderer, _extends({
+    preloadedQuery: preloadedQuery
+  }, rest));
+}
+// Unified CharacterViewer entry. Accepts a preloaded query (server-side
+// preload path) or `{collectionId}`/`{collectionSlug}` for lazy fetch.
+// `EnsureFontdueContext` only self-wraps with `FontdueContextProvider` when
+// no parent Fontdue context is present.
+export default function CharacterViewer(props) {
+  let inner;
+  if ('preloadedQuery' in props && props.preloadedQuery) {
+    const {
+      preloadedQuery,
+      ...rest
+    } = props;
+    inner = /*#__PURE__*/React.createElement(CharacterViewerPreloadedRenderer, _extends({
+      preloadedQuery: preloadedQuery
+    }, rest));
+  } else if ('collectionId' in props && props.collectionId) {
+    const {
+      collectionId,
+      ...rest
+    } = props;
+    inner = /*#__PURE__*/React.createElement(CharacterViewerIdQueryRenderer, _extends({
+      collectionId: collectionId
+    }, rest));
+  } else if ('collectionSlug' in props && props.collectionSlug) {
+    const {
+      collectionSlug,
+      ...rest
+    } = props;
+    inner = /*#__PURE__*/React.createElement(CharacterViewerSlugQueryRenderer, _extends({
       collectionSlug: collectionSlug
-    });
+    }, rest));
+  } else {
+    throw new Error('CharacterViewer expected one of preloadedQuery, collectionId, or collectionSlug');
   }
-  throw new Error('CharacterViewer expected either a collectionId or collectionSlug prop');
+  return /*#__PURE__*/React.createElement(EnsureFontdueContext, null, inner);
 }

package/dist/components/CharacterViewer/index.server.d.ts

@@ -1,3 +1,6 @@
 import React from 'react';
-import { CharacterViewer_props } from './index';
-export default function CharacterViewer({ collectionId, collectionSlug, ...rest }: CharacterViewer_props): Promise<React.JSX.Element | null>;
+import { CharacterViewer_props } from './index.js';
+export default function CharacterViewer({ collectionId, collectionSlug, ...rest }: CharacterViewer_props & {
+    collectionId?: string | null;
+    collectionSlug?: string | null;
+}): Promise<React.JSX.Element | null>;

package/dist/components/CharacterViewer/index.server.js

@@ -1,35 +1,34 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = CharacterViewer;
-var _react = _interopRequireDefault(require("react"));
-var _loadSerializableQuery = _interopRequireDefault(require("../../relay/loadSerializableQuery"));
-var _index = require("./index");
-var _CharacterViewerIDQuery = _interopRequireDefault(require("../../__generated__/CharacterViewerIDQuery.graphql"));
-var _CharacterViewerSlugQuery = _interopRequireDefault(require("../../__generated__/CharacterViewerSlugQuery.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 CharacterViewer(_ref) {
+import React from 'react';
+import loadSerializableQuery from '../../relay/loadSerializableQuery.js';
+import { CharacterViewerPreloadedIDQueryRenderer, CharacterViewerPreloadedSlugQueryRenderer } from './index.js';
+import CharacterViewerIDQueryNode from '../../__generated__/CharacterViewerIDQuery.graphql.js';
+import CharacterViewerSlugQueryNode from '../../__generated__/CharacterViewerSlugQuery.graphql.js';
+
+// Next RSC variant: awaits the query on the server and hands the response to
+// the client `*PreloadedQueryRenderer`. Lets pages just write
+// `<CharacterViewer collectionId={id} />` in an RSC without manually
+// invoking `loadCharacterViewerQuery` + threading `preloadedQuery` through
+// props.
+export default async function CharacterViewer(_ref) {
   let {
     collectionId,
     collectionSlug,
     ...rest
   } = _ref;
   if (collectionId) {
-    const preloadedQuery = await (0, _loadSerializableQuery.default)(_CharacterViewerIDQuery.default, {
+    const preloadedQuery = await loadSerializableQuery(CharacterViewerIDQueryNode, {
       collectionId
     });
-    return /*#__PURE__*/_react.default.createElement(_index.CharacterViewerPreloadedIDQueryRenderer, _extends({
+    return /*#__PURE__*/React.createElement(CharacterViewerPreloadedIDQueryRenderer, _extends({
       preloadedQuery: preloadedQuery
     }, rest));
   }
   if (collectionSlug) {
-    const preloadedQuery = await (0, _loadSerializableQuery.default)(_CharacterViewerSlugQuery.default, {
+    const preloadedQuery = await loadSerializableQuery(CharacterViewerSlugQueryNode, {
       collectionSlug
     });
-    return /*#__PURE__*/_react.default.createElement(_index.CharacterViewerPreloadedSlugQueryRenderer, _extends({
+    return /*#__PURE__*/React.createElement(CharacterViewerPreloadedSlugQueryRenderer, _extends({
       preloadedQuery: preloadedQuery
     }, rest));
   }

package/dist/components/Checkbox/index.js

@@ -1,27 +1,17 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _react = _interopRequireWildcard(require("react"));
-var _ConfigContext = _interopRequireDefault(require("../ConfigContext"));
-var _Icons = require("../Icons");
-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; }
 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, { useContext } from 'react';
+import ConfigContext from '../ConfigContext.js';
+import { Check, X } from '../Icons/index.js';
 const Checkbox = props => {
   const {
     form: config
-  } = (0, _react.useContext)(_ConfigContext.default);
-  return /*#__PURE__*/_react.default.createElement("div", {
+  } = useContext(ConfigContext);
+  return /*#__PURE__*/React.createElement("div", {
     className: "checkbox"
-  }, /*#__PURE__*/_react.default.createElement("input", _extends({
+  }, /*#__PURE__*/React.createElement("input", _extends({
     type: "checkbox"
-  }, props)), /*#__PURE__*/_react.default.createElement("div", {
+  }, props)), /*#__PURE__*/React.createElement("div", {
     className: "checkbox__icon"
-  }, config.checkboxStyle === 'check' ? /*#__PURE__*/_react.default.createElement(_Icons.Check, null) : /*#__PURE__*/_react.default.createElement(_Icons.X, null)));
+  }, config.checkboxStyle === 'check' ? /*#__PURE__*/React.createElement(Check, null) : /*#__PURE__*/React.createElement(X, null)));
 };
-var _default = Checkbox;
-exports.default = _default;
+export default Checkbox;

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { CollectionAa_product$key } from '__generated__/CollectionAa_product.graphql';
+import { CollectionAa_product$key } from '__generated__/CollectionAa_product.graphql.js';
 interface CollectionAa_props {
     product: CollectionAa_product$key | null;
 }

package/dist/components/CollectionAa/index.js

@@ -1,20 +1,13 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports.CollectionAa = void 0;
-var _CollectionAa_Query2 = _interopRequireDefault(require("../../__generated__/CollectionAa_Query.graphql"));
-var _CollectionAa_product2 = _interopRequireDefault(require("../../__generated__/CollectionAa_product.graphql"));
-var _react = _interopRequireDefault(require("react"));
-var _reactRelay = require("react-relay");
-var _FontStyle = _interopRequireDefault(require("../FontStyle"));
-function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-const CollectionAa = _ref => {
+import _CollectionAa_Query from "../../__generated__/CollectionAa_Query.graphql.js";
+import _CollectionAa_product from "../../__generated__/CollectionAa_product.graphql.js";
+import React from 'react';
+import { graphql, useFragment, useLazyLoadQuery } from 'react-relay';
+import FontStyle from '../FontStyle/index.js';
+export const CollectionAa = _ref => {
   let {
     product: productKey
   } = _ref;
-  const product = (0, _reactRelay.useFragment)((_CollectionAa_product2.default.hash && _CollectionAa_product2.default.hash !== "c6b0113fe8474166dab3649c41880d84" && console.error("The definition of 'CollectionAa_product' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _CollectionAa_product2.default), productKey);
+  const product = useFragment((_CollectionAa_product.hash && _CollectionAa_product.hash !== "c6b0113fe8474166dab3649c41880d84" && console.error("The definition of 'CollectionAa_product' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _CollectionAa_product), productKey);
   let fontStyle;
   if ((product === null || product === void 0 ? void 0 : product.__typename) === 'Bundle') {
     var _product$fontStyles;
@@ -23,19 +16,17 @@ const CollectionAa = _ref => {
     fontStyle = product.featureStyle;
   }
   if (!fontStyle) return null;
-  return /*#__PURE__*/_react.default.createElement(_FontStyle.default, {
+  return /*#__PURE__*/React.createElement(FontStyle, {
     fontStyle: fontStyle
-  }, /*#__PURE__*/_react.default.createElement("span", null, "A"), /*#__PURE__*/_react.default.createElement("span", null, "a"));
+  }, /*#__PURE__*/React.createElement("span", null, "A"), /*#__PURE__*/React.createElement("span", null, "a"));
 };
-exports.CollectionAa = CollectionAa;
 function CollectionAaQueryRenderer(_ref2) {
   let {
     collectionId
   } = _ref2;
-  const data = (0, _reactRelay.useLazyLoadQuery)((_CollectionAa_Query2.default.hash && _CollectionAa_Query2.default.hash !== "fbe1f59d074d964464c71ea00d2bd90f" && console.error("The definition of 'CollectionAa_Query' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _CollectionAa_Query2.default), {
+  const data = useLazyLoadQuery((_CollectionAa_Query.hash && _CollectionAa_Query.hash !== "fbe1f59d074d964464c71ea00d2bd90f" && console.error("The definition of 'CollectionAa_Query' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _CollectionAa_Query), {
     collectionId
   });
-  return /*#__PURE__*/_react.default.createElement(CollectionAa, data);
+  return /*#__PURE__*/React.createElement(CollectionAa, data);
 }
-var _default = CollectionAaQueryRenderer;
-exports.default = _default;
+export default CollectionAaQueryRenderer;

package/dist/components/ComponentsContext.d.ts

@@ -1,5 +1,5 @@
 import React, { type JSX } from 'react';
-import { Download_order$data } from '../__generated__/Download_order.graphql';
+import { Download_order$data } from '../__generated__/Download_order.graphql.js';
 export interface Download_moduleProps {
     open: boolean;
     dismiss: () => void;