fontdue-js 3.8.0 → 3.10.0

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

@@ -1,14 +1,17 @@
 import React from 'react';
 import { TestFontsForm_Query } from '../../__generated__/TestFontsForm_Query.graphql.js';
 import { SerializablePreloadedQuery, type LoadQueryOptions } from '../../relay/loadSerializableQuery.js';
-import { Config } from '../ConfigContext.js';
-export interface TestFontsForm_props {
+import { Config, TestFontsFamilySelection } from '../ConfigContext.js';
+import { TestFontsFormCollectionProps } from './variables.js';
+export interface TestFontsForm_props extends TestFontsFormCollectionProps {
     agreementLabel?: string;
     downloadLabel?: string;
     newsletterCheckboxChecked?: boolean;
+    familySelection?: TestFontsFamilySelection;
 }
 export type TestFontsFormPreloadedQuery = SerializablePreloadedQuery<TestFontsForm_Query>;
-export declare function loadTestFontsFormQuery(options?: LoadQueryOptions): Promise<TestFontsFormPreloadedQuery>;
+export type LoadTestFontsFormQueryVariables = TestFontsFormCollectionProps;
+export declare function loadTestFontsFormQuery(variables?: LoadTestFontsFormQueryVariables | LoadQueryOptions, options?: LoadQueryOptions): Promise<TestFontsFormPreloadedQuery>;
 export declare function TestFontsFormPreloadedQueryRenderer({ preloadedQuery, ...rest }: TestFontsForm_props & {
     preloadedQuery: TestFontsFormPreloadedQuery;
 }): React.JSX.Element;

package/dist/components/TestFontsForm/index.js

@@ -3,7 +3,7 @@
 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 _TestFontsForm_Query from "../../__generated__/TestFontsForm_Query.graphql.js";
 import _TestFontsFormUpdateCustomerMutation from "../../__generated__/TestFontsFormUpdateCustomerMutation.graphql.js";
-import React, { useState, useRef, useCallback } from 'react';
+import React, { useState, useRef, useCallback, useContext, useId } from 'react';
 import { commitMutation, graphql, useRelayEnvironment, useLazyLoadQuery, usePreloadedQuery } from 'react-relay';
 // The script-injecting reCAPTCHA wrapper (loads Google's api.js). Importing the
 // package's barebone named export instead was the FD-917 root cause; see
@@ -16,8 +16,18 @@ import Checkbox from '../Checkbox/index.js';
 import loadSerializableQuery from '../../relay/loadSerializableQuery.js';
 import useSerializablePreloadedQuery from '../../relay/useSerializablePreloadedQuery.js';
 import { EnsureFontdueContext, LazyQueryBoundary } from '../FontdueContextProvider/index.js';
+import ConfigContext from '../ConfigContext.js';
+import { testFontsFormQueryVariables } from './variables.js';
 import { useRecaptchaTimeout, isRecaptchaScriptLoaded, RECAPTCHA_UNAVAILABLE_MESSAGE } from '../../hooks/useRecaptchaTimeout.js';
 const updateCustomerMutation = (_TestFontsFormUpdateCustomerMutation.hash && _TestFontsFormUpdateCustomerMutation.hash !== "ba56958399f0893bd667ff02c33a6975" && console.error("The definition of 'TestFontsFormUpdateCustomerMutation' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _TestFontsFormUpdateCustomerMutation);
+// The archive endpoint's family filter: `collection_ids[]` narrows the ZIP to
+// those families; none means every family.
+const COLLECTION_IDS_PARAM = 'collection_ids[]';
+const withCollectionIds = (archiveUrl, collectionIds) => {
+  if (collectionIds.length === 0) return archiveUrl;
+  const query = new URLSearchParams(collectionIds.map(id => [COLLECTION_IDS_PARAM, id]));
+  return `${archiveUrl}${archiveUrl.includes('?') ? '&' : '?'}${query}`;
+};
 const TestFontsDownloading = _ref => {
   let {
     archiveUrl
@@ -31,12 +41,15 @@ const TestFontsDownloading = _ref => {
   }, "here"), ".")));
 };
 const TestFontsFormComponent = _ref2 => {
-  var _data$viewer$settings, _data$viewer$settings2, _data$viewer$testFont;
+  var _data$viewer$testFont, _data$viewer$fontdueC, _data$viewer$settings, _data$viewer$settings2, _data$viewer$testFont2;
   let {
     data,
     agreementLabel,
     downloadLabel = 'Download test fonts',
-    newsletterCheckboxChecked = false
+    newsletterCheckboxChecked = false,
+    collectionId,
+    collectionSlug,
+    familySelection: familySelectionProp
   } = _ref2;
   const [email, setEmail] = useState('');
   const [name, setName] = useState('');
@@ -52,7 +65,28 @@ const TestFontsFormComponent = _ref2 => {
   const recaptchaRef = useRef(null);
   const recaptchaTimeout = useRecaptchaTimeout();
   const environment = useRelayEnvironment();
+  const config = useContext(ConfigContext);
+  const idPrefix = useId();
+  const [chosenIds, setChosenIds] = useState([]);
   if (!data.viewer) return null;
+  const families = ((_data$viewer$testFont = data.viewer.testFonts) === null || _data$viewer$testFont === void 0 ? void 0 : _data$viewer$testFont.families) ?? [];
+  const {
+    collectionIds,
+    collectionSlugs
+  } = testFontsFormQueryVariables({
+    collectionId,
+    collectionSlug
+  });
+  // A form for particular collections downloads exactly those families.
+  const limited = collectionIds != null || collectionSlugs != null;
+  // This form's prop, then code config (which, on the script-tag path, already
+  // has the dashboard setting merged beneath it), then the dashboard setting.
+  const familySelection = familySelectionProp ?? config.testFonts.familySelection ?? ((_data$viewer$fontdueC = data.viewer.fontdueConfig) === null || _data$viewer$fontdueC === void 0 ? void 0 : _data$viewer$fontdueC.testFonts.familySelection) ?? 'all';
+  // One family leaves nothing to choose.
+  const choosing = !limited && familySelection === 'choice' && families.length > 1;
+  const downloadIds = limited ? families.map(family => family.id) : choosing ? families.map(family => family.id).filter(id => chosenIds.includes(id)) : [];
+  const toggleFamily = (id, checked) => setChosenIds(ids => checked ? [...ids, id] : ids.filter(other => other !== id));
+  const allChosen = families.every(family => chosenIds.includes(family.id));
   const recaptchaEnabled = ((_data$viewer$settings = data.viewer.settings) === null || _data$viewer$settings === void 0 ? void 0 : _data$viewer$settings.recaptchaEnabled) ?? false;
   const recaptchaSiteKey = (_data$viewer$settings2 = data.viewer.settings) === null || _data$viewer$settings2 === void 0 ? void 0 : _data$viewer$settings2.recaptchaSiteKey;
   const submitForm = useCallback(token => {
@@ -151,23 +185,48 @@ const TestFontsFormComponent = _ref2 => {
     }
     submitForm(recaptchaToken);
   };
-
-  // Button is disabled only while actively submitting or waiting for reCAPTCHA
-  const disabled = !eulaAgreed || !email || !name;
+  const disabled = !eulaAgreed || !email || !name || choosing && downloadIds.length === 0;
   const settings = data.viewer.settings;
   const newsletterOptInLabel = settings === null || settings === void 0 ? void 0 : settings.newsletterOptInLabel;
   const eulaAgreementLabel = settings === null || settings === void 0 ? void 0 : settings.eulaAgreementLabel;
-  const archiveUrl = (_data$viewer$testFont = data.viewer.testFonts) === null || _data$viewer$testFont === void 0 ? void 0 : _data$viewer$testFont.archiveUrl;
+  const archiveUrl = (_data$viewer$testFont2 = data.viewer.testFonts) === null || _data$viewer$testFont2 === void 0 ? void 0 : _data$viewer$testFont2.archiveUrl;
+  if (limited && families.length === 0) {
+    return /*#__PURE__*/React.createElement("div", {
+      className: "test-fonts test-fonts--unavailable"
+    }, /*#__PURE__*/React.createElement("p", null, "Test fonts aren\u2019t available for this family."));
+  }
   return /*#__PURE__*/React.createElement("div", {
     className: "test-fonts"
   }, error && /*#__PURE__*/React.createElement("div", {
     className: "test-fonts__errors"
   }, error), submitted ? /*#__PURE__*/React.createElement(TestFontsDownloading, {
-    archiveUrl: archiveUrl
+    archiveUrl: withCollectionIds(archiveUrl, downloadIds)
   }) : /*#__PURE__*/React.createElement("form", {
     className: "test-fonts__form",
     onSubmit: handleSubmit
+  }, choosing && /*#__PURE__*/React.createElement("div", {
+    className: "test-fonts__section test-fonts__families",
+    role: "group",
+    "aria-label": "Families"
   }, /*#__PURE__*/React.createElement("div", {
+    className: "test-fonts__checkbox-field test-fonts__families__all"
+  }, /*#__PURE__*/React.createElement(Checkbox, {
+    id: `${idPrefix}-families-all`,
+    checked: allChosen,
+    onChange: event => setChosenIds(event.target.checked ? families.map(family => family.id) : [])
+  }), /*#__PURE__*/React.createElement("label", {
+    htmlFor: `${idPrefix}-families-all`
+  }, "Select all")), families.map((family, index) => /*#__PURE__*/React.createElement("div", {
+    className: "test-fonts__checkbox-field test-fonts__family",
+    key: family.id
+  }, /*#__PURE__*/React.createElement(Checkbox, {
+    id: `${idPrefix}-family-${index}`,
+    value: family.id,
+    checked: chosenIds.includes(family.id),
+    onChange: event => toggleFamily(family.id, event.target.checked)
+  }), /*#__PURE__*/React.createElement("label", {
+    htmlFor: `${idPrefix}-family-${index}`
+  }, family.name)))), /*#__PURE__*/React.createElement("div", {
     className: "test-fonts__section"
   }, /*#__PURE__*/React.createElement(TextField, {
     label: "Name *",
@@ -223,11 +282,21 @@ const TestFontsFormComponent = _ref2 => {
   }, " \u2192")))), /*#__PURE__*/React.createElement("form", {
     action: archiveUrl ?? undefined,
     ref: downloadForm
-  }));
+  }, downloadIds.map(id => /*#__PURE__*/React.createElement("input", {
+    key: id,
+    type: "hidden",
+    name: COLLECTION_IDS_PARAM,
+    value: id
+  }))));
 };
-const query = (_TestFontsForm_Query.hash && _TestFontsForm_Query.hash !== "cd43f0cacc4dcf01cf94fb1ff97197ca" && console.error("The definition of 'TestFontsForm_Query' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _TestFontsForm_Query);
-export async function loadTestFontsFormQuery(options) {
-  return loadSerializableQuery(TestFontsFormQueryNode, {}, options);
+const query = (_TestFontsForm_Query.hash && _TestFontsForm_Query.hash !== "da75e312a602ac0ee2dfb79271299c77" && console.error("The definition of 'TestFontsForm_Query' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _TestFontsForm_Query);
+// Pass the same `collectionId` / `collectionSlug` as the form's props.
+export async function loadTestFontsFormQuery(variables, options) {
+  // Before the collection variables existed this took `options` alone.
+  if (variables && ('url' in variables || 'headers' in variables)) {
+    return loadTestFontsFormQuery({}, variables);
+  }
+  return loadSerializableQuery(TestFontsFormQueryNode, testFontsFormQueryVariables(variables ?? {}), options);
 }
 export function TestFontsFormPreloadedQueryRenderer(_ref4) {
   let {
@@ -244,7 +313,7 @@ export function TestFontsFormPreloadedQueryRenderer(_ref4) {
   }, rest));
 }
 function TestFontsFormLazyQueryRenderer(props) {
-  const data = useLazyLoadQuery(query, {});
+  const data = useLazyLoadQuery(query, testFontsFormQueryVariables(props));
   return /*#__PURE__*/React.createElement(TestFontsFormComponent, _extends({
     data: data
   }, props));

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

@@ -2,6 +2,7 @@ function _extends() { return _extends = Object.assign ? Object.assign.bind() : f
 import React from 'react';
 import loadSerializableQuery from '../../relay/loadSerializableQuery.js';
 import { TestFontsFormPreloadedQueryRenderer } from './index.js';
+import { testFontsFormQueryVariables } from './variables.js';
 import TestFontsFormQueryNode from '../../__generated__/TestFontsForm_Query.graphql.js';
 // Stub for the RSC export condition. See FontdueProvider/index.server.tsx
 // for the rationale.
@@ -14,7 +15,7 @@ export function loadTestFontsFormQuery() {
 // `<TestFontsForm />` in an RSC without manually invoking
 // `loadTestFontsFormQuery` + threading `preloadedQuery` through props.
 export default async function TestFontsForm(props) {
-  const preloadedQuery = await loadSerializableQuery(TestFontsFormQueryNode, {});
+  const preloadedQuery = await loadSerializableQuery(TestFontsFormQueryNode, testFontsFormQueryVariables(props));
   return /*#__PURE__*/React.createElement(TestFontsFormPreloadedQueryRenderer, _extends({
     preloadedQuery: preloadedQuery
   }, props));

package/dist/components/TestFontsForm/variables.d.ts

@@ -0,0 +1,8 @@
+export interface TestFontsFormCollectionProps {
+    collectionId?: string | readonly string[];
+    collectionSlug?: string | readonly string[];
+}
+export declare const testFontsFormQueryVariables: ({ collectionId, collectionSlug, }: TestFontsFormCollectionProps) => {
+    collectionIds: string[] | null;
+    collectionSlugs: string[] | null;
+};

package/dist/components/TestFontsForm/variables.js

@@ -0,0 +1,22 @@
+// Shared by the client component and the RSC entry (index.server.tsx), so it
+// lives outside the 'use client' module: a server component can't call a
+// function imported from one.
+
+const toList = value => {
+  if (value == null) return null;
+  const list = (typeof value === 'string' ? value.split(',') : [...value]).map(item => item.trim()).filter(Boolean);
+  return list.length > 0 ? list : null;
+};
+
+// The query's variables for a form's collection props: null (no narrowing)
+// unless the form is limited to particular collections.
+export const testFontsFormQueryVariables = _ref => {
+  let {
+    collectionId,
+    collectionSlug
+  } = _ref;
+  return {
+    collectionIds: toList(collectionId),
+    collectionSlugs: toList(collectionSlug)
+  };
+};

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

@@ -10,3 +10,13 @@ export interface ResolvedTruncate {
 export declare const normalizeTruncate: (value?: TruncateOption) => ResolvedTruncate;
 export declare const shouldTruncate: ({ lines, expandOnFocus }: ResolvedTruncate, focused: boolean) => boolean;
 export declare const parseTruncateAttribute: (input: string | undefined, elementName: string) => TruncateOption | undefined;
+export type ColumnsConfig = false | {
+    count: 'auto' | number;
+    width: string;
+    gap: string;
+};
+export declare const truncateColumnStyle: (columns: ColumnsConfig) => {
+    columnCount: "auto" | number;
+    columnWidth?: string;
+    columnGap?: string;
+};

package/dist/components/TypeTester/truncate.js

@@ -92,4 +92,35 @@ export const parseTruncateAttribute = (input, elementName) => {
     lines,
     expandOnFocus
   };
+};
+// The column declarations of a capped paragraph. Truncation lays the paragraph
+// out as a single column whose overflow flows sideways, into clipped columns.
+// With columns off that is a bare `column-count: 1`; WebKit before Safari 26.1
+// builds no column for it, so the stylesheet adds the column-width those builds
+// need (`[data-truncated]` in _type-tester.scss, FD-191). A configured single
+// column with an auto width is written without its width for the same reason,
+// so the stylesheet can reach it; the count is read loosely because a
+// script-tag config arrives untyped. Everything else is written as configured,
+// and an auto count keeps its auto width: 1px there would mean one column per
+// pixel.
+export const truncateColumnStyle = columns => {
+  if (!columns) return {
+    columnCount: 1
+  };
+  const {
+    count,
+    width,
+    gap
+  } = columns;
+  if (Number(count) === 1 && (!width || width === 'auto')) {
+    return {
+      columnCount: 1,
+      columnGap: gap
+    };
+  }
+  return {
+    columnCount: count,
+    columnWidth: width,
+    columnGap: gap
+  };
 };

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

@@ -2,12 +2,7 @@ import { EditorState } from 'draft-js';
 import { Alignment } from './types.js';
 import { VariableSettings } from '../../utils.js';
 import { VerticalMetrics } from '../useFontStyle.js';
-import { TruncateOption } from './truncate.js';
-export type ColumnsConfig = false | {
-    count: 'auto' | number;
-    width: string;
-    gap: string;
-};
+import { ColumnsConfig, TruncateOption } from './truncate.js';
 export interface UseTypeTesterStylerProps {
     autofit: boolean;
     autofitOnChange: boolean;

package/dist/components/TypeTester/useTypeTesterStyler.js

@@ -1,7 +1,7 @@
 import "../../global-shim.js";
 import { useLayoutEffect } from 'react';
 import useAutofit from '../../hooks/useAutofit.js';
-import { normalizeTruncate, shouldTruncate as resolveShouldTruncate } from './truncate.js';
+import { normalizeTruncate, shouldTruncate as resolveShouldTruncate, truncateColumnStyle } from './truncate.js';
 const useTypeTesterStyler = _ref => {
   let {
     size,
@@ -86,12 +86,9 @@ const useTypeTesterStyler = _ref => {
   // is what lets the metric padding reveal descenders/ascenders cleanly, and it
   // means a multi-column tester (e.g. a 3-column specimen) truncates to
   // `truncateLines` lines *per column*. When truncating with columns disabled we
-  // still establish a single column so the clipped overflow behaves the same way.
-  const columnStyle = columns ? {
-    columnCount: columns.count,
-    columnWidth: columns.width,
-    columnGap: columns.gap
-  } : undefined;
+  // still establish a single column so the clipped overflow behaves the same way
+  // (truncateColumnStyle; WebKit before Safari 26.1 needs a stylesheet nudge to
+  // build that column, see `[data-truncated]` in _type-tester.scss, FD-191).
 
   // Outside truncation the columns apply to Draft's `[data-contents]` block
   // (via _type-tester.scss), which shrink-wraps — on the full-width container,
@@ -126,23 +123,35 @@ const useTypeTesterStyler = _ref => {
       // out to N lines of whitespace. Columns send the clipped overflow
       // sideways (into off-screen columns) rather than below, so the last
       // visible line of every column is never partially covered by the next
-      // one. That lets the symmetric `lineOverflowEm` padding fully reveal the
-      // first line's ascenders/accents and the last line's descenders at any
-      // line-height; the negative margins cancel that padding in layout so a
+      // one. That lets a `lineOverflowEm` allowance above the first line and
+      // below the last fully reveal ascenders/accents and descenders at any
+      // line-height; the negative margins cancel both in layout so a
       // collapsed paragraph still occupies exactly its line count.
       //
+      // Where the two allowances go depends on the engine, so the stylesheet
+      // places them from the custom property below (`[data-truncated]` in
+      // _type-tester.scss); nothing here writes a padding inline, so those
+      // rules win. Chromium and Firefox fit a line into a column by its line
+      // box, so the column must span exactly N line boxes and the allowances
+      // are this box's own top and bottom padding, outside the column.
+      // WebKit fits a line by its inline box extent (the font's ascent plus
+      // descent): the Nth line would overhang such a column and move to the
+      // hidden one, and a line pushed into a later column gets a strut that
+      // starts it one allowance down. So for WebKit both allowances are
+      // padding on Draft's content block, inside the column, and every
+      // column holds the same N lines (FD-191).
+      //
       // Everything is in `em` so it tracks the rendered font-size (including
       // the mobile `--type-tester--adjustment`); the `+ 2px` is slack that
       // keeps sub-pixel rounding from dropping the Nth line (the extra never
       // reveals line N+1 because that line is clipped out to the side).
       boxSizing: 'border-box',
       maxHeight: `calc(${truncateLines * lineHeight + 2 * lineOverflowEm}em + 2px)`,
-      paddingTop: `${lineOverflowEm}em`,
-      paddingBottom: `${lineOverflowEm}em`,
       paddingLeft: sideBearing,
       paddingRight: sideBearing,
       marginTop: `${-lineOverflowEm}em`,
       marginBottom: `${-lineOverflowEm}em`,
+      '--type-tester--line-overflow': `${lineOverflowEm}em`,
       // `clip`, not `hidden`, once the cap outlives focus. A hidden box is
       // still a scroll container, so the browser scrolls it to chase a
       // caret past line N, and the offset is unrecoverable because there is
@@ -167,9 +176,7 @@ const useTypeTesterStyler = _ref => {
       columnFill: 'auto',
       widows: 1,
       orphans: 1,
-      ...(columnStyle ?? {
-        columnCount: 1
-      })
+      ...truncateColumnStyle(columns)
     } : {
       height: 'auto',
       overflow: 'visible',

package/dist/fontdue.css

@@ -182,6 +182,9 @@
 .test-fonts__checkbox-field label p {
   margin: 0;
 }
+.test-fonts__families .test-fonts__checkbox-field {
+  margin-bottom: 10px;
+}
 .test-fonts__agreement[data-highlighted=true] {
   color: red;
 }
@@ -721,8 +724,6 @@ fontdue-type-tester {
 }
 .type-tester__features__button {
   display: flex;
-  --checkbox-size: 20px;
-  --checkbox-margin: 10px;
 }
 .type-tester__features[data-selection-style=checkbox] .type-tester__features__button {
   margin-bottom: 5px;
@@ -889,6 +890,19 @@ fontdue-type-tester {
 }
 .type-tester__text__container[data-truncated] {
   overflow: hidden;
+  padding-top: var(--type-tester--line-overflow, 0);
+  padding-bottom: var(--type-tester--line-overflow, 0);
+}
+@supports (font: -apple-system-body) or (-webkit-hyphenate-limit-lines: 1) {
+  .type-tester__text__container[data-truncated] {
+    column-width: 1px;
+    padding-top: 0;
+    padding-bottom: 0;
+  }
+  .type-tester__text__container[data-truncated] [data-contents=true] {
+    padding-top: var(--type-tester--line-overflow, 0);
+    padding-bottom: var(--type-tester--line-overflow, 0);
+  }
 }
 .type-tester__text__container [data-contents=true] {
   column-count: var(--type-tester--column-count, auto);
@@ -1293,8 +1307,6 @@ fontdue-feature-testers {
   grid-template-columns: max-content auto;
   grid-column-gap: 20px;
   line-height: 1.6;
-  --checkbox-size: 20px;
-  --checkbox-margin: 10px;
 }
 .character-viewer__monitor__details > span {
   white-space: nowrap;
@@ -1375,10 +1387,10 @@ fontdue-feature-testers {
 .checkbox {
   position: relative;
   flex-shrink: 0;
-  margin-right: var(--checkbox-margin, 20px);
-  width: var(--checkbox-size, 40px);
-  height: var(--checkbox-size, 40px);
-  font-size: calc(var(--checkbox-size, 40px) * 0.8);
+  margin-right: var(--checkbox-margin, 10px);
+  width: var(--checkbox-size, 20px);
+  height: var(--checkbox-size, 20px);
+  font-size: calc(var(--checkbox-size, 20px) * 0.8);
 }
 .checkbox input {
   background: none;
@@ -1402,8 +1414,8 @@ fontdue-feature-testers {
 .checkbox input {
   -webkit-appearance: none;
   vertical-align: top;
-  width: var(--checkbox-size, 40px);
-  height: var(--checkbox-size, 40px);
+  width: var(--checkbox-size, 20px);
+  height: var(--checkbox-size, 20px);
   border: 1px solid var(--checkbox-color, currentcolor);
 }
 .checkbox__icon {

package/dist/version.js

@@ -8,4 +8,4 @@
 // (Fontage.ClientVersions) to spot sites that need to upgrade before a
 // feature that depends on a newer client can work for them.
 export const CLIENT_VERSION_HEADER = 'fontdue-client-version';
-export const version = "3.8.0";
+export const version = "3.10.0";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "fontdue-js",
-  "version": "3.8.0",
+  "version": "3.10.0",
   "type": "module",
   "scripts": {
     "build": "npm run relay && run-p build-js build-css build-ts",