fontdue-js 3.0.6 → 3.2.0

package/dist/components/FeatureTester/FeatureTestersElement.js

@@ -0,0 +1,27 @@
+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 FeatureTesters from './FeatureTesters.js';
+const parseBool = (input, fallback) => input === undefined || input === '' ? fallback : input === 'true';
+export const FeatureTestersElement = _ref => {
+  let {
+    collectionId,
+    collectionSlug,
+    highlightColor,
+    toggle,
+    autofit
+  } = _ref;
+  const shared = {
+    highlightColor: highlightColor || undefined,
+    // Only override the per-card dashboard settings when the attribute is
+    // actually present on the element; otherwise leave undefined so each card
+    // uses its own.
+    toggle: toggle === undefined ? undefined : toggle === 'hover' ? 'hover' : 'button',
+    autofit: autofit === undefined ? undefined : parseBool(autofit, false)
+  };
+  return collectionId ? /*#__PURE__*/React.createElement(FeatureTesters, _extends({
+    collectionId: collectionId
+  }, shared)) : /*#__PURE__*/React.createElement(FeatureTesters, _extends({
+    collectionSlug: collectionSlug || ''
+  }, shared));
+};
+export default FeatureTestersElement;

package/dist/components/FeatureTester/highlight.d.ts

@@ -0,0 +1,19 @@
+export interface GlyphNameEntry {
+    readonly characters: string;
+    readonly features?: readonly string[] | null;
+}
+export interface Segment {
+    text: string;
+    sensitive: boolean;
+}
+export interface Mark {
+    start: number;
+    end: number;
+}
+export declare function sensitiveStringsForFeature(glyphNames: readonly GlyphNameEntry[] | null | undefined, feature: string): string[];
+export interface SensitivityOptions {
+    autoStrings?: readonly string[];
+    addMarks?: readonly Mark[];
+}
+export declare function computeSensitivityFlags(content: string, opts: SensitivityOptions): boolean[];
+export declare function segmentByFlags(content: string, flags: readonly boolean[]): Segment[];

package/dist/components/FeatureTester/highlight.js

@@ -0,0 +1,71 @@
+// Decide which characters in a sample string are "sensitive" to an OpenType
+// feature.
+//
+// Auto-detection: `FontStyle.glyphNames` lists `{ characters, features }` where
+// `characters` is the INPUT string a feature substitutes (a single character
+// for single substitutions like ss03/smcp, or a sequence for ligatures like
+// dlig). "Which characters does feature X touch" is the set of `characters`
+// whose `features` includes X. That static map only covers single + ligature
+// substitutions; the exact set for any feature comes from the server's shaped
+// diff (`changedRanges`), which FeatureTesterCard passes in as marks.
+//
+// Everything is computed as a boolean-per-codepoint array so the sources
+// compose cleanly. A contiguous run of `true` becomes one highlight span, which
+// keeps ligature clusters whole (we never split a cluster across spans).
+
+// An inclusive code-point index range. FeatureTesterCard builds these from the
+// server-materialized `changedRanges`.
+
+// The de-duplicated set of input strings the feature substitutes.
+export function sensitiveStringsForFeature(glyphNames, feature) {
+  if (!glyphNames) return [];
+  const set = new Set();
+  for (const g of glyphNames) {
+    if (g.characters && g.features && g.features.includes(feature)) {
+      set.add(g.characters);
+    }
+  }
+  return Array.from(set);
+}
+
+// Set flags[i] = true for every occurrence of `value` (matched by code point).
+function applyText(chars, value, flags) {
+  const seq = Array.from(value);
+  if (seq.length === 0) return;
+  for (let i = 0; i + seq.length <= chars.length; i++) {
+    if (seq.every((c, k) => chars[i + k] === c)) {
+      for (let k = 0; k < seq.length; k++) flags[i + k] = true;
+    }
+  }
+}
+export function computeSensitivityFlags(content, opts) {
+  const chars = Array.from(content);
+  const flags = new Array(chars.length).fill(false);
+  if (opts.autoStrings) {
+    for (const value of opts.autoStrings) applyText(chars, value, flags);
+  }
+  if (opts.addMarks) {
+    for (const mark of opts.addMarks) {
+      for (let i = Math.max(0, mark.start); i <= mark.end && i < chars.length; i++) {
+        flags[i] = true;
+      }
+    }
+  }
+  return flags;
+}
+
+// Collapse a per-codepoint flag array into consecutive sensitive/non-sensitive
+// runs (one highlight span each).
+export function segmentByFlags(content, flags) {
+  const chars = Array.from(content);
+  const segments = [];
+  for (let i = 0; i < chars.length; i++) {
+    const sensitive = flags[i] ?? false;
+    const last = segments[segments.length - 1];
+    if (last && last.sensitive === sensitive) last.text += chars[i];else segments.push({
+      text: chars[i],
+      sensitive
+    });
+  }
+  return segments;
+}

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

@@ -0,0 +1,26 @@
+import React from 'react';
+import { FeatureTesterCardOptions } from './FeatureTesterCard.js';
+import { Config } from '../ConfigContext.js';
+import { SerializablePreloadedQuery, type LoadQueryOptions } from '../../relay/loadSerializableQuery.js';
+import { FeatureTesterStandaloneQuery } from '../../__generated__/FeatureTesterStandaloneQuery.graphql.js';
+export type FeatureTesterPreloadedQuery = SerializablePreloadedQuery<FeatureTesterStandaloneQuery>;
+export interface LoadFeatureTesterQueryVariables {
+    familyName: string;
+    styleName: string;
+}
+export declare function loadFeatureTesterQuery(variables: LoadFeatureTesterQueryVariables, options?: LoadQueryOptions): Promise<FeatureTesterPreloadedQuery>;
+export declare function FeatureTesterPreloadedRenderer({ preloadedQuery, ...rest }: FeatureTesterCardOptions & {
+    preloadedQuery: FeatureTesterPreloadedQuery;
+}): React.JSX.Element;
+export type FeatureTesterProps = FeatureTesterCardOptions & {
+    config?: Config;
+} & ({
+    preloadedQuery: FeatureTesterPreloadedQuery;
+    familyName?: never;
+    styleName?: never;
+} | {
+    preloadedQuery?: never;
+    familyName: string;
+    styleName: string;
+});
+export default function FeatureTester(props: FeatureTesterProps): React.JSX.Element;

package/dist/components/FeatureTester/index.js

@@ -0,0 +1,66 @@
+'use client';
+
+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 _FeatureTesterStandaloneQuery from "../../__generated__/FeatureTesterStandaloneQuery.graphql.js";
+import React from 'react';
+import { graphql, useLazyLoadQuery, usePreloadedQuery } from 'react-relay';
+import FeatureTesterCard from './FeatureTesterCard.js';
+import { EnsureFontdueContext } from '../FontdueContextProvider/index.js';
+import loadSerializableQuery from '../../relay/loadSerializableQuery.js';
+import useSerializablePreloadedQuery from '../../relay/useSerializablePreloadedQuery.js';
+import FeatureTesterStandaloneQueryNode from '../../__generated__/FeatureTesterStandaloneQuery.graphql.js';
+const query = (_FeatureTesterStandaloneQuery.hash && _FeatureTesterStandaloneQuery.hash !== "eddba300b2fd5e283ab1f8f787edc518" && console.error("The definition of 'FeatureTesterStandaloneQuery' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _FeatureTesterStandaloneQuery);
+function FeatureTesterRender(_ref) {
+  var _data$viewer;
+  let {
+    data,
+    ...rest
+  } = _ref;
+  const fontStyle = (_data$viewer = data.viewer) === null || _data$viewer === void 0 ? void 0 : _data$viewer.fontStyle;
+  if (!fontStyle) {
+    console.log('[FeatureTester]: No FontStyle found');
+    return null;
+  }
+  return /*#__PURE__*/React.createElement(FeatureTesterCard, _extends({
+    fontStyle: fontStyle
+  }, rest));
+}
+export async function loadFeatureTesterQuery(variables, options) {
+  return loadSerializableQuery(FeatureTesterStandaloneQueryNode, {
+    familyName: variables.familyName,
+    styleName: variables.styleName
+  }, options);
+}
+export function FeatureTesterPreloadedRenderer(_ref2) {
+  let {
+    preloadedQuery,
+    ...rest
+  } = _ref2;
+  const queryRef = useSerializablePreloadedQuery(preloadedQuery, 'store-or-network', query);
+  const data = usePreloadedQuery(query, queryRef);
+  return /*#__PURE__*/React.createElement(FeatureTesterRender, _extends({
+    data: data
+  }, rest));
+}
+function FeatureTesterLazyRenderer(_ref3) {
+  let {
+    familyName,
+    styleName,
+    ...rest
+  } = _ref3;
+  const data = useLazyLoadQuery(query, {
+    familyName,
+    styleName
+  });
+  return /*#__PURE__*/React.createElement(FeatureTesterRender, _extends({
+    data: data
+  }, rest));
+}
+// Unified FeatureTester entry point. Accepts either a preloaded query
+// (server-side preload path) or `{familyName, styleName}` (lazy path, used by
+// the CDN custom element and inside an existing `<FontdueProvider>` tree).
+export default function FeatureTester(props) {
+  return /*#__PURE__*/React.createElement(EnsureFontdueContext, {
+    config: props.config
+  }, 'preloadedQuery' in props && props.preloadedQuery ? /*#__PURE__*/React.createElement(FeatureTesterPreloadedRenderer, props) : /*#__PURE__*/React.createElement(FeatureTesterLazyRenderer, props));
+}

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

@@ -0,0 +1,7 @@
+import React from 'react';
+import type { FeatureTesterProps } from './index.js';
+export type { FeatureTesterPreloadedQuery } from './index.js';
+export declare function loadFeatureTesterQuery(): never;
+export default function FeatureTester(props: Extract<FeatureTesterProps, {
+    familyName: string;
+}>): Promise<React.JSX.Element>;

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

@@ -0,0 +1,30 @@
+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 loadSerializableQuery from '../../relay/loadSerializableQuery.js';
+import { FeatureTesterPreloadedRenderer } from './index.js';
+import FeatureTesterStandaloneQueryNode from '../../__generated__/FeatureTesterStandaloneQuery.graphql.js';
+// Stub for the RSC export condition. See FontdueProvider/index.server.tsx
+// for the rationale.
+export function loadFeatureTesterQuery() {
+  throw new Error("loadFeatureTesterQuery isn't needed in React Server Components — " + 'the <FeatureTester> 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 `FeatureTesterPreloadedRenderer`. Lets pages just write
+// `<FeatureTester familyName="..." styleName="..." feature="..." content="..." />`
+// in an RSC without manually invoking `loadFeatureTesterQuery` + threading
+// `preloadedQuery` through props.
+export default async function FeatureTester(props) {
+  const {
+    familyName,
+    styleName,
+    ...rest
+  } = props;
+  const preloadedQuery = await loadSerializableQuery(FeatureTesterStandaloneQueryNode, {
+    familyName,
+    styleName
+  });
+  return /*#__PURE__*/React.createElement(FeatureTesterPreloadedRenderer, _extends({
+    preloadedQuery: preloadedQuery
+  }, rest));
+}

package/dist/components/NodePasswordForm/NodePasswordFormElement.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { NodePasswordForm_props } from './index.js';
+export default function NodePasswordFormElement({ collectionId, collectionSlug, ...rest }: NodePasswordForm_props): React.JSX.Element;

package/dist/components/NodePasswordForm/NodePasswordFormElement.js

@@ -0,0 +1,65 @@
+'use client';
+
+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 _NodePasswordFormElementSlugQuery from "../../__generated__/NodePasswordFormElementSlugQuery.graphql.js";
+import _NodePasswordFormElementIDQuery from "../../__generated__/NodePasswordFormElementIDQuery.graphql.js";
+import React from 'react';
+import { graphql, useLazyLoadQuery } from 'react-relay';
+import NodePasswordForm from './index.js';
+// Auto-detecting wrapper behind the <fontdue-node-password-form> custom element.
+// Unlike the presentational React component (the default export of ./index, used
+// when the server has already detected the lock), this queries the collection
+// itself and renders the form only when access is denied — so it works dropped
+// onto any page, hiding itself for a visitor who already has access.
+
+const idQuery = (_NodePasswordFormElementIDQuery.hash && _NodePasswordFormElementIDQuery.hash !== "213a61ae079e4f57b7b197b0d2f5256a" && console.error("The definition of 'NodePasswordFormElementIDQuery' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _NodePasswordFormElementIDQuery);
+function NodePasswordFormIDQueryRenderer(_ref) {
+  let {
+    collectionId,
+    ...rest
+  } = _ref;
+  const data = useLazyLoadQuery(idQuery, {
+    collectionId
+  });
+  // The @catch directive surfaces the password-protection error as ok:false; the
+  // node is only locked then, so only then do we render the form (we don't want
+  // to show it to a visitor who already has access).
+  if (data.collection.ok === false) return /*#__PURE__*/React.createElement(NodePasswordForm, _extends({}, rest, {
+    collectionId: collectionId
+  }));
+  return null;
+}
+const slugQuery = (_NodePasswordFormElementSlugQuery.hash && _NodePasswordFormElementSlugQuery.hash !== "200a33ca6a1f9e4e7e95b7100bbdd261" && console.error("The definition of 'NodePasswordFormElementSlugQuery' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _NodePasswordFormElementSlugQuery);
+function NodePasswordFormSlugQueryRenderer(_ref2) {
+  var _data$viewer$slug;
+  let {
+    collectionSlug,
+    ...rest
+  } = _ref2;
+  const data = useLazyLoadQuery(slugQuery, {
+    collectionSlug
+  });
+  // see note in NodePasswordFormIDQueryRenderer
+  if (((_data$viewer$slug = data.viewer.slug) === null || _data$viewer$slug === void 0 ? void 0 : _data$viewer$slug.collection.ok) === false) return /*#__PURE__*/React.createElement(NodePasswordForm, _extends({}, rest, {
+    collectionSlug: collectionSlug
+  }));
+  return null;
+}
+export default function NodePasswordFormElement(_ref3) {
+  let {
+    collectionId,
+    collectionSlug,
+    ...rest
+  } = _ref3;
+  if (collectionId) {
+    return /*#__PURE__*/React.createElement(NodePasswordFormIDQueryRenderer, _extends({
+      collectionId: collectionId
+    }, rest));
+  }
+  if (collectionSlug) {
+    return /*#__PURE__*/React.createElement(NodePasswordFormSlugQueryRenderer, _extends({
+      collectionSlug: collectionSlug
+    }, rest));
+  }
+  throw new Error('NodePasswordForm expected either a collectionId or collectionSlug prop');
+}

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

@@ -2,5 +2,31 @@ import React from 'react';
 export interface NodePasswordForm_props {
     collectionId?: string | null;
     collectionSlug?: string | null;
+    /**
+     * Path of the storefront's unlock route (see fontdue-js/next/unlock), e.g.
+     * "/api/unlock". On a successful unlock the form POSTs `{ token }` there
+     * before reloading. Required on statically-rendered Next storefronts: the
+     * route enables the draft-mode bypass that takes this visitor off the
+     * full-route cache, so the reload can actually render the unlocked
+     * collection instead of re-serving the cached password form. Omit on
+     * frameworks that render server responses per request (Astro, React Router,
+     * TanStack Start) — there the cookie alone is enough.
+     */
+    unlockEndpoint?: string | null;
 }
-export default function NodePasswordForm({ collectionId, collectionSlug, ...rest }: NodePasswordForm_props): React.JSX.Element;
+/**
+ * Password form for a collection you already know is locked. Render it when a
+ * collection comes back password-protected (see the per-framework guides): it
+ * commits the `accessNode` mutation, remembers the returned access token, and
+ * reloads so the now-unlocked collection renders.
+ *
+ * Unlike the `<fontdue-node-password-form>` custom element (which detects the
+ * locked state itself), this does no data fetching of its own, so it renders
+ * immediately on the server with no Suspense flash — the server already detected
+ * the lock.
+ *
+ * Self-wraps in `EnsureFontdueContext` so it works as a standalone island (e.g.
+ * an Astro `client:load`) without its own provider, and no-ops inside an outer
+ * `<FontdueProvider>` (Next/RR7/TanStack).
+ */
+export default function NodePasswordForm(props: NodePasswordForm_props): React.JSX.Element;

package/dist/components/NodePasswordForm/index.js

@@ -1,14 +1,54 @@
 'use client';
 
-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 _NodePasswordFormSlugQuery from "../../__generated__/NodePasswordFormSlugQuery.graphql.js";
-import _NodePasswordFormIDQuery from "../../__generated__/NodePasswordFormIDQuery.graphql.js";
 import _NodePasswordFormAccessNodeMutation from "../../__generated__/NodePasswordFormAccessNodeMutation.graphql.js";
 import React, { useState } from 'react';
-import { graphql, useLazyLoadQuery, useMutation } from 'react-relay';
+import { graphql, useMutation } from 'react-relay';
 import TextField from '../TextField/index.js';
-const accessNodeMutation = (_NodePasswordFormAccessNodeMutation.hash && _NodePasswordFormAccessNodeMutation.hash !== "d0beeb729c358ef4eebd1c8be47ec68e" && console.error("The definition of 'NodePasswordFormAccessNodeMutation' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _NodePasswordFormAccessNodeMutation);
-function NodePasswordFormComponent(props) {
+import { EnsureFontdueContext } from '../FontdueContextProvider/index.js';
+import { rememberNodeAccessToken } from '../../nodeAccess.js';
+const accessNodeMutation = (_NodePasswordFormAccessNodeMutation.hash && _NodePasswordFormAccessNodeMutation.hash !== "eb0d3828d65a52c727ef60caa67709a1" && console.error("The definition of 'NodePasswordFormAccessNodeMutation' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _NodePasswordFormAccessNodeMutation);
+/**
+ * Password form for a collection you already know is locked. Render it when a
+ * collection comes back password-protected (see the per-framework guides): it
+ * commits the `accessNode` mutation, remembers the returned access token, and
+ * reloads so the now-unlocked collection renders.
+ *
+ * Unlike the `<fontdue-node-password-form>` custom element (which detects the
+ * locked state itself), this does no data fetching of its own, so it renders
+ * immediately on the server with no Suspense flash — the server already detected
+ * the lock.
+ *
+ * Self-wraps in `EnsureFontdueContext` so it works as a standalone island (e.g.
+ * an Astro `client:load`) without its own provider, and no-ops inside an outer
+ * `<FontdueProvider>` (Next/RR7/TanStack).
+ */
+export default function NodePasswordForm(props) {
+  return /*#__PURE__*/React.createElement(EnsureFontdueContext, null, /*#__PURE__*/React.createElement(NodePasswordFormFields, props));
+}
+
+// Tell the storefront's unlock route (fontdue-js/next/unlock) about a
+// successful unlock so it can enable Next's draft-mode bypass — without it, a
+// statically-cached font page would keep serving this visitor the password
+// form after they unlocked (the full-route cache is visitor-blind). Always
+// resolves: the reload must happen even if the endpoint is absent or errors,
+// because on per-request-rendered frameworks the cookie alone unlocks.
+async function notifyUnlockEndpoint(endpoint, token) {
+  if (!endpoint || !token) return;
+  try {
+    await fetch(endpoint, {
+      method: 'POST',
+      headers: {
+        'content-type': 'application/json'
+      },
+      body: JSON.stringify({
+        token
+      })
+    });
+  } catch {
+    // Ignore: reload regardless, the cookie may still be enough.
+  }
+}
+function NodePasswordFormFields(props) {
   const [password, setPassword] = useState('');
   const [error, setError] = useState(null);
   const [commitMutation, submitting] = useMutation(accessNodeMutation);
@@ -27,7 +67,14 @@ function NodePasswordFormComponent(props) {
       onCompleted: res => {
         var _res$accessNode;
         if ((_res$accessNode = res.accessNode) !== null && _res$accessNode !== void 0 && _res$accessNode.success) {
-          location.reload();
+          // Persist the token so the next server render unlocks the collection:
+          // the Fontdue session cookie that does this for script-tag sites can't
+          // ride a proxied or cross-origin server fetch, so we forward this
+          // token as a header instead (see fontdue-js nodeAccess).
+          rememberNodeAccessToken(res.accessNode.token);
+          notifyUnlockEndpoint(props.unlockEndpoint, res.accessNode.token).then(() => location.reload());
+        } else {
+          setError('Incorrect password');
         }
       },
       onError: error => {
@@ -55,57 +102,4 @@ function NodePasswordFormComponent(props) {
     disabled: disabled,
     className: "submit-button"
   }, "Submit")));
-}
-const idQuery = (_NodePasswordFormIDQuery.hash && _NodePasswordFormIDQuery.hash !== "2af86f8f6df3d2e6061ea1c9dd777a26" && console.error("The definition of 'NodePasswordFormIDQuery' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _NodePasswordFormIDQuery);
-function NodePasswordFormIDQueryRenderer(_ref) {
-  let {
-    collectionId,
-    ...rest
-  } = _ref;
-  const data = useLazyLoadQuery(idQuery, {
-    collectionId
-  });
-  // this is counterintuitive, but we've added the @catch directive on the collection,
-  // and we're expecting it to respond with an error if the node is inaccessible due to being
-  // password-protected. so, when we encounter the error we're safe to render the password form.
-  // (we don't want to show the form if the user has already gained access)
-  if (data.collection.ok === false) return /*#__PURE__*/React.createElement(NodePasswordFormComponent, _extends({}, rest, {
-    collectionId: collectionId
-  }));
-}
-const slugQuery = (_NodePasswordFormSlugQuery.hash && _NodePasswordFormSlugQuery.hash !== "c40faf067007027fa9ba6673350c7202" && console.error("The definition of 'NodePasswordFormSlugQuery' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _NodePasswordFormSlugQuery);
-function NodePasswordFormSlugQueryRenderer(_ref2) {
-  var _data$viewer$slug;
-  let {
-    collectionSlug,
-    ...rest
-  } = _ref2;
-  const data = useLazyLoadQuery(slugQuery, {
-    collectionSlug
-  });
-  // see note in NodePasswordFormIDQueryRenderer
-  if (((_data$viewer$slug = data.viewer.slug) === null || _data$viewer$slug === void 0 ? void 0 : _data$viewer$slug.collection.ok) === false) return /*#__PURE__*/React.createElement(NodePasswordFormComponent, _extends({}, rest, {
-    collectionSlug: collectionSlug
-  }));
-  return null;
-}
-
-// default client export
-export default function NodePasswordForm(_ref3) {
-  let {
-    collectionId,
-    collectionSlug,
-    ...rest
-  } = _ref3;
-  if (collectionId) {
-    return /*#__PURE__*/React.createElement(NodePasswordFormIDQueryRenderer, _extends({
-      collectionId: collectionId
-    }, rest));
-  }
-  if (collectionSlug) {
-    return /*#__PURE__*/React.createElement(NodePasswordFormSlugQueryRenderer, _extends({
-      collectionSlug: collectionSlug
-    }, rest));
-  }
-  throw new Error('NodePasswordForm expected either a collectionId or collectionSlug prop');
 }

package/dist/components/Root/index.js

@@ -16,6 +16,7 @@ const customElementMap = {
   'fontdue-cart': /*#__PURE__*/lazy(() => retryImport(() => import('../Cart/index.js'))),
   'fontdue-cart-button': /*#__PURE__*/lazy(() => retryImport(() => import('../CartButton/index.js'))),
   'fontdue-character-viewer': /*#__PURE__*/lazy(() => retryImport(() => import('../CharacterViewer/index.js'))),
+  'fontdue-feature-testers': /*#__PURE__*/lazy(() => retryImport(() => import('../FeatureTester/FeatureTestersElement.js'))),
   // @ts-ignore
   'fontdue-collection-aa': /*#__PURE__*/lazy(() => retryImport(() => import('../CollectionAa/index.js'))),
   // @ts-ignore
@@ -23,7 +24,7 @@ const customElementMap = {
   'fontdue-font-families': /*#__PURE__*/lazy(() => retryImport(() => import('../FontFamilies/index.js'))),
   'fontdue-customer-login-form': /*#__PURE__*/lazy(() => retryImport(() => import('../CustomerLoginForm/index.js'))),
   'fontdue-newsletter-signup': /*#__PURE__*/lazy(() => retryImport(() => import('../NewsletterSignup/NewsletterSignupElement.js'))),
-  'fontdue-node-password-form': /*#__PURE__*/lazy(() => retryImport(() => import('../NodePasswordForm/index.js'))),
+  'fontdue-node-password-form': /*#__PURE__*/lazy(() => retryImport(() => import('../NodePasswordForm/NodePasswordFormElement.js'))),
   // @ts-ignore
   'fontdue-precart': /*#__PURE__*/lazy(() => retryImport(() => import('../Precart/index.js'))),
   // @ts-ignore

package/dist/fontdue.css

@@ -807,6 +807,151 @@ fontdue-type-tester {
   font-weight: inherit;
 }
 
+fontdue-feature-tester,
+fontdue-feature-testers {
+  display: block;
+  max-width: 100%;
+  min-width: 0;
+}
+
+.fontdue-feature-tester {
+  --_ft-text: var(--fontdue-feature-tester-text, var(--primary_text_color, currentColor));
+  --_ft-muted: var(
+    --fontdue-feature-tester-muted,
+    color-mix(in srgb, var(--_ft-text) 50%, transparent)
+  );
+  --_ft-highlight: var(--fontdue-feature-tester-highlight, var(--_ft-text));
+  --_ft-bg: var(--fontdue-feature-tester-bg, transparent);
+  --_ft-border: var(
+    --fontdue-feature-tester-border,
+    1px solid var(--horizontal_rule_color, color-mix(in srgb, currentColor 15%, transparent))
+  );
+  --_ft-radius: var(--fontdue-feature-tester-radius, 0);
+  --_ft-padding: var(--fontdue-feature-tester-padding, 18px 0 30px);
+  --_ft-align: var(--fontdue-feature-tester-align, left);
+  font-size: 1rem;
+  color: var(--_ft-text);
+  background: var(--_ft-bg);
+  border-top: var(--_ft-border);
+  border-radius: var(--_ft-radius);
+  padding: var(--_ft-padding);
+  min-width: 0;
+  max-width: 100%;
+}
+.fontdue-feature-tester__bar {
+  display: flex;
+  align-items: center;
+  gap: 14px;
+  margin-bottom: 16px;
+}
+.fontdue-feature-tester__toggle {
+  background: none;
+  color: inherit;
+  font: inherit;
+  text-decoration: inherit;
+  text-align: inherit;
+  border: 0;
+  border-radius: 0;
+  padding: 0;
+  margin: 0;
+  appearance: none;
+  text-transform: inherit;
+}
+.fontdue-feature-tester__toggle:active, .fontdue-feature-tester__toggle:focus {
+  outline: none;
+}
+.fontdue-feature-tester__toggle:not(:disabled) {
+  cursor: pointer;
+}
+.fontdue-feature-tester__toggle {
+  display: inline-flex;
+  align-items: center;
+  flex: none;
+  color: inherit;
+  font: inherit;
+}
+.fontdue-feature-tester__toggle:focus-visible .fontdue-feature-tester__switch {
+  outline: 1px solid currentcolor;
+  outline-offset: 2px;
+}
+.fontdue-feature-tester__switch {
+  --_sw-w: var(--fontdue-feature-tester-switch-width, 40px);
+  --_sw-h: var(--fontdue-feature-tester-switch-height, 20px);
+  --_sw-r: var(--fontdue-feature-tester-switch-radius, 0);
+  --_sw-p: var(--fontdue-feature-tester-switch-padding, 2px);
+  --_sw-b: var(--fontdue-feature-tester-switch-border-width, 1px);
+  --_sw-color: var(--fontdue-feature-tester-switch-color, currentColor);
+  --_sw-knob: var(--fontdue-feature-tester-switch-knob, var(--primary_background_color, canvas));
+  --_sw-track: var(--fontdue-feature-tester-switch-track, transparent);
+  --_sw-travel: calc(var(--_sw-w) - var(--_sw-h));
+  position: relative;
+  box-sizing: border-box;
+  width: var(--_sw-w);
+  height: var(--_sw-h);
+  flex: none;
+  border: var(--_sw-b) solid var(--_sw-color);
+  border-radius: var(--_sw-r);
+  background: var(--_sw-track);
+  transition: background 120ms ease-out;
+}
+.fontdue-feature-tester__switch::after {
+  content: "";
+  position: absolute;
+  box-sizing: border-box;
+  top: var(--_sw-p);
+  left: var(--_sw-p);
+  bottom: var(--_sw-p);
+  aspect-ratio: 1;
+  border: var(--_sw-b) solid var(--_sw-color);
+  border-radius: var(--_sw-r);
+  background: transparent;
+  transition: transform 120ms ease-out, background 120ms ease-out;
+}
+@media (hover: hover) {
+  .fontdue-feature-tester[data-on=false] .fontdue-feature-tester__toggle:hover .fontdue-feature-tester__switch::after {
+    background: var(--_sw-color);
+  }
+}
+.fontdue-feature-tester__label {
+  white-space: nowrap;
+}
+.fontdue-feature-tester[data-toggle=button] .fontdue-feature-tester__label {
+  cursor: pointer;
+}
+.fontdue-feature-tester__tag {
+  margin-left: auto;
+  color: inherit;
+}
+.fontdue-feature-tester[data-on=true] .fontdue-feature-tester__switch {
+  background: var(--_sw-color);
+}
+.fontdue-feature-tester[data-on=true] .fontdue-feature-tester__switch::after {
+  transform: translateX(var(--_sw-travel));
+  border-color: transparent;
+  background: var(--_sw-knob);
+}
+.fontdue-feature-tester[data-toggle=hover] .fontdue-feature-tester__switch,
+.fontdue-feature-tester[data-toggle=hover] .fontdue-feature-tester__toggle {
+  display: none;
+}
+@media (hover: none) {
+  .fontdue-feature-tester[data-toggle=hover] .fontdue-feature-tester__switch,
+  .fontdue-feature-tester[data-toggle=hover] .fontdue-feature-tester__toggle {
+    display: inline-flex;
+  }
+}
+.fontdue-feature-tester__sample {
+  white-space: pre-wrap;
+  text-align: var(--_ft-align);
+  color: var(--_ft-text);
+}
+.fontdue-feature-tester[data-highlighted=true] .fontdue-feature-tester__sample {
+  color: var(--_ft-muted);
+}
+.fontdue-feature-tester__hit {
+  color: var(--_ft-highlight);
+}
+
 .select-button {
   background: none;
   color: inherit;