fontdue-js 3.0.6 → 3.2.0

package/dist/__tests__/nextAdapter.test.js

@@ -48,17 +48,23 @@ vi.mock('next/navigation', () => ({
 const draft = vi.hoisted(() => ({
   enabled: false,
   token: undefined,
+  nodeAccess: undefined,
   cookiesError: undefined
 }));
 vi.mock('next/headers', () => ({
   draftMode: async () => ({
-    isEnabled: draft.enabled
+    isEnabled: draft.enabled,
+    enable: () => {
+      draft.enabled = true;
+    }
   }),
   cookies: async () => {
     if (draft.cookiesError) throw draft.cookiesError;
     return {
       get: name => name === 'fontdue_preview_token' && draft.token ? {
         value: draft.token
+      } : name === 'fontdue_node_access' && draft.nodeAccess ? {
+        value: draft.nodeAccess
       } : undefined
     };
   }
@@ -74,6 +80,7 @@ beforeEach(() => {
   vi.restoreAllMocks();
   draft.enabled = false;
   draft.token = undefined;
+  draft.nodeAccess = undefined;
   draft.cookiesError = undefined;
 });
 function stubSingleTenant() {
@@ -360,6 +367,113 @@ describe('single-tenant ambient resolver (no per-render call)', () => {
     expect(config === null || config === void 0 ? void 0 : (_config$headers5 = config.headers) === null || _config$headers5 === void 0 ? void 0 : _config$headers5.authorization).toBeUndefined();
   });
 });
+describe('nodeAccessHeaders', () => {
+  it('draft-mode bypass render: returns the forwarding header', async () => {
+    stubSingleTenant();
+    draft.enabled = true;
+    draft.nodeAccess = 'na-tok';
+    const {
+      nodeAccessHeaders
+    } = await importTenant();
+    expect(await nodeAccessHeaders()).toEqual({
+      'fontdue-node-access': 'na-tok'
+    });
+  });
+  it('draft-mode bypass render without the cookie: returns {}', async () => {
+    stubSingleTenant();
+    draft.enabled = true;
+    const {
+      nodeAccessHeaders
+    } = await importTenant();
+    expect(await nodeAccessHeaders()).toEqual({});
+  });
+
+  // Regression for FD-773: locked slugs are excluded from generateStaticParams,
+  // so a visitor's first request is an on-demand STATIC fill of the SSG route.
+  // Merely calling cookies() there flags the render as dynamic and Next 15
+  // 500s ("Page changed from static to dynamic at runtime") — catching the
+  // throw doesn't unpoison it. Off draft mode the hook must return "no token"
+  // WITHOUT touching cookies(), so the fill can prerender the password form.
+  // cookiesError guards the "without touching" half: any cookies() call would
+  // reject.
+  it('runtime static fill (no draft mode): no token, and cookies() is never called', async () => {
+    stubSingleTenant();
+    draft.cookiesError = Object.assign(new Error('Dynamic server usage'), {
+      digest: 'DYNAMIC_SERVER_USAGE'
+    });
+    const {
+      nodeAccessHeaders
+    } = await importTenant();
+    expect(await nodeAccessHeaders()).toEqual({});
+  });
+
+  // At build time the gate is skipped and the bailout keeps propagating: a
+  // static route whose own fetch touches a locked collection bails out to
+  // dynamic at build today, and the fix must not change build classification.
+  it('build-time prerender: still propagates the dynamic bailout', async () => {
+    stubSingleTenant();
+    vi.stubEnv('NEXT_PHASE', 'phase-production-build');
+    draft.cookiesError = Object.assign(new Error('Dynamic server usage'), {
+      digest: 'DYNAMIC_SERVER_USAGE'
+    });
+    const {
+      nodeAccessHeaders
+    } = await importTenant();
+    await expect(nodeAccessHeaders()).rejects.toBe(draft.cookiesError);
+  });
+  it('swallows a non-control-flow throw (no request scope)', async () => {
+    stubSingleTenant();
+    draft.enabled = true;
+    draft.cookiesError = new Error('no request scope');
+    const {
+      nodeAccessHeaders
+    } = await importTenant();
+    expect(await nodeAccessHeaders()).toEqual({});
+  });
+});
+describe('unlock route handler', () => {
+  async function importUnlock() {
+    return await import("../next/unlock.js");
+  }
+  function unlockRequest(body) {
+    return new Request('https://storefront.example/api/unlock', {
+      method: 'POST',
+      headers: {
+        'content-type': 'application/json'
+      },
+      body
+    });
+  }
+  it('POST with a token enables the draft-mode bypass', async () => {
+    const {
+      POST
+    } = await importUnlock();
+    const response = await POST(unlockRequest(JSON.stringify({
+      token: 'na-tok'
+    })));
+    expect(response.status).toBe(200);
+    expect(await response.json()).toEqual({
+      ok: true
+    });
+    expect(draft.enabled).toBe(true);
+  });
+  it('rejects a missing token without enabling the bypass', async () => {
+    const {
+      POST
+    } = await importUnlock();
+    const response = await POST(unlockRequest(JSON.stringify({})));
+    expect(response.status).toBe(400);
+    expect(draft.enabled).toBe(false);
+  });
+  it('rejects a malformed body without enabling the bypass', async () => {
+    const {
+      POST
+    } = await importUnlock();
+    const response = await POST(unlockRequest('not json'));
+    expect(response.status).toBe(400);
+    expect(draft.enabled).toBe(false);
+  });
+});
 
 // withFontdue detects the route-tree shape from the working directory; give
 // it one with or without src/app/[domain].

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

@@ -0,0 +1,30 @@
+import React from 'react';
+import { FeatureTesterCard_fontStyle$key } from '../../__generated__/FeatureTesterCard_fontStyle.graphql.js';
+export type ToggleMode = 'button' | 'hover';
+export interface FeatureTesterCardOptions {
+    feature: string;
+    content: string;
+    label?: string | null;
+    fontSize?: number | null;
+    lineHeight?: number | null;
+    letterSpacing?: number | null;
+    alignment?: 'left' | 'center' | 'right' | null;
+    defaultOn?: boolean;
+    highlightColor?: string | null;
+    showLabel?: boolean;
+    showTag?: boolean;
+    toggle?: ToggleMode;
+    autofit?: boolean;
+    changedRanges?: ReadonlyArray<{
+        readonly start: number;
+        readonly length: number;
+    }> | null;
+    variableSettings?: ReadonlyArray<{
+        readonly axis: string;
+        readonly value: number;
+    }> | null;
+}
+export type FeatureTesterCardProps = FeatureTesterCardOptions & {
+    fontStyle: FeatureTesterCard_fontStyle$key;
+};
+export default function FeatureTesterCard({ fontStyle: fontStyleKey, feature, content, label, fontSize, lineHeight, letterSpacing, alignment, defaultOn, highlightColor, showLabel, showTag, toggle, autofit, changedRanges, variableSettings, }: FeatureTesterCardProps): React.JSX.Element;

package/dist/components/FeatureTester/FeatureTesterCard.js

@@ -0,0 +1,167 @@
+'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 _FeatureTesterCard_fontStyle from "../../__generated__/FeatureTesterCard_fontStyle.graphql.js";
+import React, { useMemo, useState } from 'react';
+import { graphql, useFragment } from 'react-relay';
+import FontStyle from '../FontStyle/index.js';
+import useFeaturesData from '../TypeTester/useFeaturesData.js';
+import useFeatureTesterAutofit from '../../hooks/useFeatureTesterAutofit.js';
+import { sensitiveStringsForFeature, computeSensitivityFlags, segmentByFlags } from './highlight.js';
+const fragment = (_FeatureTesterCard_fontStyle.hash && _FeatureTesterCard_fontStyle.hash !== "687d8afca93d615ed0794f963702d082" && console.error("The definition of 'FeatureTesterCard_fontStyle' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _FeatureTesterCard_fontStyle);
+export default function FeatureTesterCard(_ref) {
+  let {
+    fontStyle: fontStyleKey,
+    feature,
+    content,
+    label,
+    fontSize = 72,
+    lineHeight = 1.2,
+    letterSpacing = 0,
+    alignment,
+    defaultOn = true,
+    highlightColor,
+    showLabel = true,
+    showTag = true,
+    toggle = 'button',
+    autofit = false,
+    changedRanges,
+    variableSettings
+  } = _ref;
+  // `data` carries the merged fragment spreads, so the child fragment hooks
+  // (FontStyle, useFeaturesData) read their refs off it rather than the raw key.
+  const data = useFragment(fragment, fontStyleKey);
+  const {
+    featureNames
+  } = useFeaturesData({
+    fontStyle: data
+  });
+  const [on, setOn] = useState(defaultOn);
+  const hover = toggle === 'hover';
+  const handleToggle = () => setOn(o => !o);
+
+  // The server's shaped diff (`changedRanges`) is exact for THIS string —
+  // context-free and contextual substitutions alike — so it wins whenever the
+  // collection materialized it. The static GSUB map is the fallback for cards
+  // with no shaped diff (no OpenType file server-side, or a hand-authored
+  // standalone embed); it only covers single + ligature substitutions, and for
+  // a mixed feature like frac it can hold just the slash while the real
+  // substitution is contextual over the digits — trusting it over the diff
+  // would highlight (and per-span apply) the wrong subset.
+  const staticStrings = useMemo(() => sensitiveStringsForFeature(data.glyphNames, feature), [data.glyphNames, feature]);
+  const contextFree = staticStrings.length > 0;
+  const changedMarks = useMemo(() => (changedRanges ?? []).map(r => ({
+    start: r.start,
+    end: r.start + r.length - 1
+  })), [changedRanges]);
+  const contextual = changedMarks.length > 0;
+  const segments = useMemo(() => segmentByFlags(content,
+  // A card with a shaped diff applies the feature container-wide (a
+  // per-span apply would sever the context contextual substitutions
+  // depend on), so the set that actually changes is exactly the diff —
+  // the highlight equals that set. The static-map fallback applies
+  // per-span.
+  contextual ? computeSensitivityFlags(content, {
+    addMarks: changedMarks
+  }) : computeSensitivityFlags(content, {
+    autoStrings: staticStrings
+  })), [contextual, content, staticStrings, changedMarks]);
+  const displayLabel = label || featureNames[feature] || feature;
+  const featureSetting = `"${feature}" ${on ? 1 : 0}`;
+
+  // The chosen variable instance's coordinates, as a font-variation-settings
+  // value. Applied to the sample and to the autofit measurement so both see
+  // the same glyph widths.
+  const fontVariationSettings = useMemo(() => variableSettings && variableSettings.length > 0 ? variableSettings.map(s => `"${s.axis}" ${s.value}`).join(', ') : undefined, [variableSettings]);
+
+  // A contextual feature with no shaped diff and no static entries (a
+  // hand-authored standalone embed) has nothing to tint, but the feature must
+  // still apply container-wide or the toggle would do nothing.
+  const anySensitive = segments.some(seg => seg.sensitive);
+  const containerWide = contextual || !contextFree && !anySensitive;
+
+  // Autofit measures the sample against the card's width in both toggle states
+  // and returns a size that fits the wider one; disabled, it returns `fontSize`.
+  const {
+    ref: rootRef,
+    fontSize: renderSize
+  } = useFeatureTesterAutofit({
+    enabled: autofit,
+    text: content,
+    fontFamily: `${data.cssFamily} ${data.name}`,
+    feature,
+    fontSize: fontSize ?? 72,
+    letterSpacing: letterSpacing ?? 0,
+    fontVariationSettings
+  });
+  return /*#__PURE__*/React.createElement("div", _extends({
+    ref: rootRef,
+    className: "fontdue-feature-tester",
+    "data-feature": feature,
+    "data-on": on,
+    "data-toggle": toggle
+    // Drives the muted-context styling: only a card with affected glyphs
+    // dims its surroundings, so an unmarked hand-authored sample stays at
+    // full text colour.
+    ,
+    "data-highlighted": anySensitive
+  }, hover ? {
+    onMouseEnter: () => setOn(!defaultOn),
+    onMouseLeave: () => setOn(defaultOn)
+  } : {}), showLabel && /*#__PURE__*/React.createElement("div", {
+    className: "fontdue-feature-tester__bar"
+  }, /*#__PURE__*/React.createElement("button", {
+    type: "button",
+    className: "fontdue-feature-tester__toggle",
+    role: "switch",
+    "aria-checked": on,
+    "aria-label": displayLabel,
+    onClick: handleToggle
+  }, /*#__PURE__*/React.createElement("span", {
+    className: "fontdue-feature-tester__switch",
+    "aria-hidden": "true"
+  })), /*#__PURE__*/React.createElement("span", {
+    className: "fontdue-feature-tester__label",
+    onClick: hover ? undefined : handleToggle
+  }, displayLabel), showTag && /*#__PURE__*/React.createElement("span", {
+    className: "fontdue-feature-tester__tag"
+  }, feature)), /*#__PURE__*/React.createElement(FontStyle, {
+    Component: "div",
+    fontStyle: data,
+    className: "fontdue-feature-tester__sample",
+    style: {
+      fontSize: `${renderSize}px`,
+      lineHeight: lineHeight ?? undefined,
+      letterSpacing: letterSpacing ? `${letterSpacing}em` : undefined,
+      textAlign: alignment ?? undefined,
+      fontVariationSettings,
+      // Contextual features must shape with full context, so the feature is
+      // applied to the whole line. The shaped diff guarantees only the
+      // highlighted characters actually change, so the highlight still
+      // means exactly "what changes".
+      ...(containerWide ? {
+        fontFeatureSettings: featureSetting
+      } : {})
+    }
+  }, segments.map((seg, i) => seg.sensitive ? /*#__PURE__*/React.createElement("span", {
+    key: i,
+    className: "fontdue-feature-tester__hit"
+    // Context-free features are applied per-highlighted-span, so
+    // toggling changes exactly what's tinted (and honours manual
+    // subsetting). `font-feature-settings` leaves unlisted (default)
+    // features alone, so default ligatures/kerning are preserved. The
+    // highlight colour comes from CSS (`--fontdue-feature-tester-
+    // highlight`); `highlightColor` forces it inline when set.
+    ,
+    style: {
+      ...(highlightColor ? {
+        color: highlightColor
+      } : {}),
+      ...(containerWide ? {} : {
+        fontFeatureSettings: featureSetting
+      })
+    }
+  }, seg.text) : /*#__PURE__*/React.createElement(React.Fragment, {
+    key: i
+  }, seg.text))));
+}

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

@@ -0,0 +1,19 @@
+import React from 'react';
+interface FeatureTesterElement_props {
+    familyName: string;
+    styleName: string;
+    feature: string;
+    content?: string;
+    label?: string;
+    fontSize?: string;
+    lineHeight?: string;
+    letterSpacing?: string;
+    defaultOn?: string;
+    highlightColor?: string;
+    showLabel?: string;
+    showTag?: string;
+    toggle?: string;
+    autofit?: string;
+}
+export declare const FeatureTesterElement: React.FC<FeatureTesterElement_props>;
+export default FeatureTesterElement;

package/dist/components/FeatureTester/FeatureTesterElement.js

@@ -0,0 +1,42 @@
+// Deliberately unexposed: this standalone element is not registered in the
+// Root custom-element registry and `fontdue-js/FeatureTester` is not in the
+// package exports. Only the collection-bound `<fontdue-feature-testers>`
+// ships for now; this file is kept for when the standalone is ready.
+import React from 'react';
+import FeatureTester from './index.js';
+const parseBool = (input, fallback) => input === undefined || input === '' ? fallback : input === 'true';
+export const FeatureTesterElement = _ref => {
+  let {
+    familyName,
+    styleName,
+    feature,
+    content,
+    label,
+    fontSize,
+    lineHeight,
+    letterSpacing,
+    defaultOn,
+    highlightColor,
+    showLabel,
+    showTag,
+    toggle,
+    autofit
+  } = _ref;
+  return /*#__PURE__*/React.createElement(FeatureTester, {
+    familyName: familyName,
+    styleName: styleName,
+    feature: feature,
+    content: content || 'Hamburgefonts',
+    label: label || undefined,
+    fontSize: fontSize ? parseFloat(fontSize) : undefined,
+    lineHeight: lineHeight ? parseFloat(lineHeight) : undefined,
+    letterSpacing: letterSpacing ? parseFloat(letterSpacing) : undefined,
+    defaultOn: parseBool(defaultOn, true),
+    highlightColor: highlightColor || undefined,
+    showLabel: parseBool(showLabel, true),
+    showTag: parseBool(showTag, true),
+    toggle: toggle === 'hover' ? 'hover' : 'button',
+    autofit: parseBool(autofit, false)
+  });
+};
+export default FeatureTesterElement;

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

@@ -0,0 +1,43 @@
+import React from 'react';
+import { Config } from '../ConfigContext.js';
+import { FeatureTestersIdQuery } from '../../__generated__/FeatureTestersIdQuery.graphql.js';
+import { FeatureTestersSlugQuery } from '../../__generated__/FeatureTestersSlugQuery.graphql.js';
+import { ToggleMode } from './FeatureTesterCard.js';
+import { SerializablePreloadedQuery, type LoadQueryOptions } from '../../relay/loadSerializableQuery.js';
+interface ListOptions {
+    highlightColor?: string;
+    toggle?: ToggleMode;
+    autofit?: boolean;
+}
+export type FeatureTestersPreloadedQuery = SerializablePreloadedQuery<FeatureTestersIdQuery> | SerializablePreloadedQuery<FeatureTestersSlugQuery>;
+export type LoadFeatureTestersQueryVariables = {
+    collectionId: string;
+    collectionSlug?: never;
+} | {
+    collectionId?: never;
+    collectionSlug: string;
+};
+export declare function loadFeatureTestersQuery(variables: LoadFeatureTestersQueryVariables, options?: LoadQueryOptions): Promise<FeatureTestersPreloadedQuery>;
+export declare function FeatureTestersPreloadedIDQueryRenderer({ preloadedQuery, ...options }: {
+    preloadedQuery: SerializablePreloadedQuery<FeatureTestersIdQuery>;
+} & ListOptions): React.JSX.Element | null;
+export declare function FeatureTestersPreloadedSlugQueryRenderer({ preloadedQuery, ...options }: {
+    preloadedQuery: SerializablePreloadedQuery<FeatureTestersSlugQuery>;
+} & ListOptions): React.JSX.Element | null;
+export type FeatureTestersProps = {
+    config?: Config;
+} & ListOptions & ({
+    preloadedQuery: FeatureTestersPreloadedQuery;
+    collectionId?: never;
+    collectionSlug?: never;
+} | {
+    preloadedQuery?: never;
+    collectionId: string;
+    collectionSlug?: never;
+} | {
+    preloadedQuery?: never;
+    collectionSlug: string;
+    collectionId?: never;
+});
+export default function FeatureTesters({ config, ...props }: FeatureTestersProps): React.JSX.Element;
+export {};

package/dist/components/FeatureTester/FeatureTesters.js

@@ -0,0 +1,156 @@
+'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 _FeatureTestersSlugQuery from "../../__generated__/FeatureTestersSlugQuery.graphql.js";
+import _FeatureTestersIdQuery from "../../__generated__/FeatureTestersIdQuery.graphql.js";
+import _FeatureTesters_collection from "../../__generated__/FeatureTesters_collection.graphql.js";
+import React from 'react';
+import { graphql, useFragment, useLazyLoadQuery, usePreloadedQuery } from 'react-relay';
+import FeatureTesterCard from './FeatureTesterCard.js';
+import { EnsureFontdueContext } from '../FontdueContextProvider/index.js';
+import FeatureTestersIdQueryNode from '../../__generated__/FeatureTestersIdQuery.graphql.js';
+import FeatureTestersSlugQueryNode from '../../__generated__/FeatureTestersSlugQuery.graphql.js';
+import loadSerializableQuery from '../../relay/loadSerializableQuery.js';
+import useSerializablePreloadedQuery from '../../relay/useSerializablePreloadedQuery.js';
+const collectionFragment = (_FeatureTesters_collection.hash && _FeatureTesters_collection.hash !== "933c122b193ca5df430509d87e9c4e1d" && console.error("The definition of 'FeatureTesters_collection' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _FeatureTesters_collection);
+function FeatureTestersList(_ref) {
+  let {
+    collection,
+    highlightColor,
+    toggle,
+    autofit
+  } = _ref;
+  const data = useFragment(collectionFragment, collection);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, data.featureTesters.map(ft => ft.fontStyle ? /*#__PURE__*/React.createElement(FeatureTesterCard, {
+    key: ft.id,
+    fontStyle: ft.fontStyle,
+    feature: ft.feature,
+    label: ft.label ?? undefined,
+    content: ft.content,
+    fontSize: ft.size != null ? Number(ft.size) : undefined,
+    lineHeight: ft.lineHeight != null ? Number(ft.lineHeight) : undefined,
+    alignment: ft.alignment === 'left' || ft.alignment === 'center' || ft.alignment === 'right' ? ft.alignment : undefined,
+    defaultOn: data.featureTesterDefaultOn,
+    changedRanges: ft.changedRanges,
+    variableSettings: ft.variableSettings,
+    highlightColor: highlightColor,
+    toggle: toggle,
+    autofit: autofit ?? ft.autofit,
+    showTag: data.featureTesterShowTag
+  }) : null));
+}
+const idQuery = (_FeatureTestersIdQuery.hash && _FeatureTestersIdQuery.hash !== "55f152ae85db4ebafd21ff7945f4079a" && console.error("The definition of 'FeatureTestersIdQuery' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _FeatureTestersIdQuery);
+const slugQuery = (_FeatureTestersSlugQuery.hash && _FeatureTestersSlugQuery.hash !== "726fca18c4a30ca9dd8f5aaf074c8139" && console.error("The definition of 'FeatureTestersSlugQuery' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _FeatureTestersSlugQuery);
+function ById(_ref2) {
+  let {
+    collectionId,
+    ...rest
+  } = _ref2;
+  const data = useLazyLoadQuery(idQuery, {
+    id: collectionId
+  });
+  return data.node ? /*#__PURE__*/React.createElement(FeatureTestersList, _extends({
+    collection: data.node
+  }, rest)) : null;
+}
+function BySlug(_ref3) {
+  var _data$viewer, _data$viewer$slug;
+  let {
+    collectionSlug,
+    ...rest
+  } = _ref3;
+  const data = useLazyLoadQuery(slugQuery, {
+    slug: collectionSlug
+  });
+  const coll = (_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;
+  return coll ? /*#__PURE__*/React.createElement(FeatureTestersList, _extends({
+    collection: coll
+  }, rest)) : null;
+}
+
+// ---- Server-preload path (RSC): the server awaits the query and hands the
+// serialized response to these client renderers, which commit it into the store
+// so `usePreloadedQuery` resolves synchronously on the client (no refetch on
+// hydration). Mirrors CharacterViewer.
+
+export async function loadFeatureTestersQuery(variables, options) {
+  if (variables.collectionId) {
+    return loadSerializableQuery(FeatureTestersIdQueryNode, {
+      id: variables.collectionId
+    }, options);
+  }
+  if (variables.collectionSlug) {
+    return loadSerializableQuery(FeatureTestersSlugQueryNode, {
+      slug: variables.collectionSlug
+    }, options);
+  }
+  throw new Error('loadFeatureTestersQuery expected either collectionId or collectionSlug');
+}
+export function FeatureTestersPreloadedIDQueryRenderer(_ref4) {
+  let {
+    preloadedQuery,
+    ...options
+  } = _ref4;
+  const queryRef = useSerializablePreloadedQuery(preloadedQuery, 'store-or-network', idQuery);
+  const data = usePreloadedQuery(idQuery, queryRef);
+  return data.node ? /*#__PURE__*/React.createElement(FeatureTestersList, _extends({
+    collection: data.node
+  }, options)) : null;
+}
+export function FeatureTestersPreloadedSlugQueryRenderer(_ref5) {
+  var _data$viewer2, _data$viewer2$slug;
+  let {
+    preloadedQuery,
+    ...options
+  } = _ref5;
+  const queryRef = useSerializablePreloadedQuery(preloadedQuery, 'store-or-network', slugQuery);
+  const data = usePreloadedQuery(slugQuery, queryRef);
+  const coll = (_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;
+  return coll ? /*#__PURE__*/React.createElement(FeatureTestersList, _extends({
+    collection: coll
+  }, options)) : null;
+}
+function FeatureTestersPreloadedRenderer(_ref6) {
+  let {
+    preloadedQuery,
+    ...options
+  } = _ref6;
+  if (preloadedQuery.params.name === 'FeatureTestersIdQuery') {
+    return /*#__PURE__*/React.createElement(FeatureTestersPreloadedIDQueryRenderer, _extends({
+      preloadedQuery: preloadedQuery
+    }, options));
+  }
+  return /*#__PURE__*/React.createElement(FeatureTestersPreloadedSlugQueryRenderer, _extends({
+    preloadedQuery: preloadedQuery
+  }, options));
+}
+
+// Renders every Feature Tester card a tenant has configured on a font
+// collection. Accepts a preloaded query (server-side preload path — Astro/RR7
+// frontmatter or a manual loader call) or `{collectionId}`/`{collectionSlug}`
+// for lazy fetch.
+export default function FeatureTesters(_ref7) {
+  let {
+    config,
+    ...props
+  } = _ref7;
+  const {
+    highlightColor,
+    toggle,
+    autofit
+  } = props;
+  const options = {
+    highlightColor,
+    toggle,
+    autofit
+  };
+  return /*#__PURE__*/React.createElement(EnsureFontdueContext, {
+    config: config
+  }, 'preloadedQuery' in props && props.preloadedQuery ? /*#__PURE__*/React.createElement(FeatureTestersPreloadedRenderer, _extends({
+    preloadedQuery: props.preloadedQuery
+  }, options)) : 'collectionId' in props && props.collectionId ? /*#__PURE__*/React.createElement(ById, _extends({
+    collectionId: props.collectionId
+  }, options)) : /*#__PURE__*/React.createElement(BySlug, _extends({
+    collectionSlug: props.collectionSlug
+  }, options)));
+}

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

@@ -0,0 +1,9 @@
+import React from 'react';
+import { FeatureTestersProps } from './FeatureTesters.js';
+export type { FeatureTestersPreloadedQuery } from './FeatureTesters.js';
+export declare function loadFeatureTestersQuery(): never;
+export default function FeatureTesters({ collectionId, collectionSlug, ...rest }: Extract<FeatureTestersProps, {
+    collectionId: string;
+} | {
+    collectionSlug: string;
+}>): Promise<React.JSX.Element | null>;

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

@@ -0,0 +1,40 @@
+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 { FeatureTestersPreloadedIDQueryRenderer, FeatureTestersPreloadedSlugQueryRenderer } from './FeatureTesters.js';
+import FeatureTestersIdQueryNode from '../../__generated__/FeatureTestersIdQuery.graphql.js';
+import FeatureTestersSlugQueryNode from '../../__generated__/FeatureTestersSlugQuery.graphql.js';
+// Stub for the RSC export condition. See FontdueProvider/index.server.tsx
+// for the rationale.
+export function loadFeatureTestersQuery() {
+  throw new Error("loadFeatureTestersQuery isn't needed in React Server Components — " + 'the <FeatureTesters> 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 `*PreloadedQueryRenderer`. Lets pages just write
+// `<FeatureTesters collectionSlug="..." />` in an RSC without manually invoking
+// `loadFeatureTestersQuery` + threading `preloadedQuery` through props.
+export default async function FeatureTesters(_ref) {
+  let {
+    collectionId,
+    collectionSlug,
+    ...rest
+  } = _ref;
+  if (collectionId) {
+    const preloadedQuery = await loadSerializableQuery(FeatureTestersIdQueryNode, {
+      id: collectionId
+    });
+    return /*#__PURE__*/React.createElement(FeatureTestersPreloadedIDQueryRenderer, _extends({
+      preloadedQuery: preloadedQuery
+    }, rest));
+  }
+  if (collectionSlug) {
+    const preloadedQuery = await loadSerializableQuery(FeatureTestersSlugQueryNode, {
+      slug: collectionSlug
+    });
+    return /*#__PURE__*/React.createElement(FeatureTestersPreloadedSlugQueryRenderer, _extends({
+      preloadedQuery: preloadedQuery
+    }, rest));
+  }
+  return null;
+}

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

@@ -0,0 +1,10 @@
+import React from 'react';
+interface FeatureTestersElement_props {
+    collectionId?: string;
+    collectionSlug?: string;
+    highlightColor?: string;
+    toggle?: string;
+    autofit?: string;
+}
+export declare const FeatureTestersElement: React.FC<FeatureTestersElement_props>;
+export default FeatureTestersElement;