fontdue-js 3.0.5 → 3.1.0

package/dist/components/NodePasswordForm/index.js

@@ -1,14 +1,31 @@
 '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));
+}
+function NodePasswordFormFields(props) {
   const [password, setPassword] = useState('');
   const [error, setError] = useState(null);
   const [commitMutation, submitting] = useMutation(accessNodeMutation);
@@ -27,7 +44,14 @@ function NodePasswordFormComponent(props) {
       onCompleted: res => {
         var _res$accessNode;
         if ((_res$accessNode = res.accessNode) !== null && _res$accessNode !== void 0 && _res$accessNode.success) {
+          // 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);
           location.reload();
+        } else {
+          setError('Incorrect password');
         }
       },
       onError: error => {
@@ -55,57 +79,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/components/TypeTesters/index.js

@@ -75,7 +75,7 @@ function TypeTestersComponent(_ref) {
     licenseOptionsSpecs,
     orderVariableSelections
   } = useLicenseAndOrderVariables();
-  const [collection, refetch] = useRefetchableFragment((_TypeTesters_collection.hash && _TypeTesters_collection.hash !== "0f8422550dd500368594bfedc5f58bf4" && console.error("The definition of 'TypeTesters_collection' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _TypeTesters_collection), collectionKey);
+  const [collection, refetch] = useRefetchableFragment((_TypeTesters_collection.hash && _TypeTesters_collection.hash !== "b247a9b03142716823d36ec52dd965ff" && console.error("The definition of 'TypeTesters_collection' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _TypeTesters_collection), collectionKey);
   const handleStyleSelect = useCallback((testerId, fontStyleId) => {
     const newChangedStyles = {
       ...changedStyles,
@@ -119,6 +119,10 @@ function TypeTestersComponent(_ref) {
     const direction = node.direction === 'rtl' ? 'rtl' : 'ltr';
     let alignment = config.initialAlignment;
     if (direction === 'rtl') alignment = 'right';
+    // An explicit per-card alignment from the dashboard wins over both.
+    if (node.alignment === 'left' || node.alignment === 'center' || node.alignment === 'right') {
+      alignment = node.alignment;
+    }
     acc[node.id] = {
       content: node.content,
       size: node.size ? parseFloat(node.size) : 72,

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;

package/dist/hooks/useFeatureTesterAutofit.d.ts

@@ -0,0 +1,17 @@
+export interface UseFeatureTesterAutofitProps {
+    enabled: boolean;
+    text: string;
+    fontFamily: string | null;
+    feature: string;
+    fontSize: number;
+    min?: number;
+    max?: number;
+    letterSpacing?: number;
+    fontVariationSettings?: string;
+    padding?: number;
+}
+export interface UseFeatureTesterAutofitResult {
+    ref: React.RefObject<HTMLDivElement | null>;
+    fontSize: number;
+}
+export default function useFeatureTesterAutofit({ enabled, text, fontFamily, feature, fontSize, min, max, letterSpacing, fontVariationSettings, padding, }: UseFeatureTesterAutofitProps): UseFeatureTesterAutofitResult;

package/dist/hooks/useFeatureTesterAutofit.js

@@ -0,0 +1,106 @@
+import { useRef, useState, useLayoutEffect } from 'react';
+import useResizeObserver from './useResizeObserver.js';
+
+// Autofit for the Feature Tester. Unlike the plain type-tester autofit, the
+// rendered width depends on the toggle state — an alternate glyph is wider or
+// narrower, a ligature collapses, a fraction shrinks. So we measure the sample
+// in BOTH states (feature off and on) and size to fit the WIDER one. The size
+// is then fixed across toggles, so the tester never reflows or overflows when
+// the feature is switched.
+//
+// Measurement must use the DOM (not canvas): canvas `measureText` can't apply
+// `font-feature-settings`, which is exactly the thing that changes the width.
+// Measuring the whole string with the feature applied is exact here, not an
+// over-estimate: a character the feature doesn't touch renders identically
+// whether the feature is on or off, so the two measurements are precisely the
+// tester's two real states.
+
+const REF_SIZE = 100;
+let measureEl = null;
+function getMeasureElement() {
+  if (!measureEl) {
+    measureEl = document.createElement('span');
+    measureEl.style.position = 'absolute';
+    measureEl.style.top = '-9999px';
+    measureEl.style.left = '-9999px';
+    measureEl.style.whiteSpace = 'pre';
+    measureEl.style.visibility = 'hidden';
+    document.body.appendChild(measureEl);
+  }
+  return measureEl;
+}
+function measure(text, fontFamily, letterSpacing, fontFeatureSettings, fontVariationSettings) {
+  const el = getMeasureElement();
+  el.style.fontFamily = fontFamily;
+  el.style.fontSize = `${REF_SIZE}px`;
+  el.style.letterSpacing = `${letterSpacing}em`;
+  el.style.fontFeatureSettings = fontFeatureSettings;
+  el.style.fontVariationSettings = fontVariationSettings;
+  el.textContent = text;
+  return el.getBoundingClientRect().width;
+}
+export default function useFeatureTesterAutofit(_ref) {
+  let {
+    enabled,
+    text,
+    fontFamily,
+    feature,
+    fontSize,
+    min = 8,
+    max = 999,
+    letterSpacing = 0,
+    fontVariationSettings = '',
+    padding = 0
+  } = _ref;
+  const ref = useRef(null);
+  const [size, setSize] = useState(fontSize);
+  const [containerWidth, setContainerWidth] = useState(0);
+  const [fontVersion, setFontVersion] = useState(0);
+  useResizeObserver(ref, entry => setContainerWidth(entry.contentRect.width));
+
+  // Re-measure once the webfont is available (measuring the fallback would size
+  // to the wrong metrics). The font is often already cached — other cards on the
+  // page load the same family — so `document.fonts.load` can resolve in a
+  // microtask *before* a freshly-measured element reflects the loaded font in
+  // layout. Re-measuring on the next animation frame, when layout is font-ready,
+  // avoids sizing to a stale fallback measurement that then never gets corrected.
+  // Re-measure until the sizing lands on the real webfont metrics. A fresh DOM
+  // measurement can lag the font becoming available — the family is often
+  // already cached (other cards on the page load it), so `fonts.load`/
+  // `fonts.ready` can settle a frame or two before a measured element actually
+  // reflects it. Sizing to that stale fallback measurement would then stick.
+  // Re-measuring across a short schedule lets the size settle onto the real
+  // metrics whenever they land; the extra `fonts.ready` bump covers slow loads
+  // beyond the schedule.
+  useLayoutEffect(() => {
+    if (!enabled || !fontFamily) return;
+    let cancelled = false;
+    const bump = () => {
+      if (!cancelled) setFontVersion(v => v + 1);
+    };
+    const timers = [0, 80, 200, 500, 1000].map(ms => window.setTimeout(bump, ms));
+    document.fonts.ready.then(bump);
+    return () => {
+      cancelled = true;
+      timers.forEach(clearTimeout);
+    };
+  }, [enabled, fontFamily]);
+  useLayoutEffect(() => {
+    if (!enabled || !fontFamily) return;
+    const available = containerWidth - padding;
+    if (available <= 0 || !text) return;
+    const off = `"${feature}" 0`;
+    const on = `"${feature}" 1`;
+    // Widest line across both states — samples can carry authored newlines.
+    const refWidth = Math.max(...text.split('\n').flatMap(line => [measure(line, fontFamily, letterSpacing, off, fontVariationSettings), measure(line, fontFamily, letterSpacing, on, fontVariationSettings)]));
+    if (refWidth <= 0) return;
+
+    // Width scales linearly with font-size; floor to avoid a sub-pixel wrap.
+    const next = Math.min(Math.max(min, Math.floor(available / (refWidth / REF_SIZE))), max);
+    setSize(next);
+  }, [enabled, text, fontFamily, feature, letterSpacing, fontVariationSettings, containerWidth, min, max, padding, fontVersion]);
+  return {
+    ref,
+    fontSize: enabled ? size : fontSize
+  };
+}

package/dist/next/index.d.ts

@@ -1 +1,3 @@
 export { __prepareFontdueRender, type FontdueEndpoint } from './tenant.js';
+import { nodeAccessHeaders } from './tenant.js';
+export { nodeAccessHeaders };

package/dist/next/index.js

@@ -15,4 +15,19 @@
 // configureFontdueRender, setFontdueServerConfig) are deliberately not
 // re-exported here; the modules that need them import them directly from
 // './tenant.js' / '../relay/serverConfig.js'.
-export { __prepareFontdueRender } from './tenant.js';
+export { __prepareFontdueRender } from './tenant.js';
+import { registerNodeAccessRecovery } from '../relay/serverConfig.js';
+import { nodeAccessHeaders } from './tenant.js';
+
+// Wire up automatic node-access recovery: when a server fetch comes back
+// `password_protected`, createFontdueFetch calls this to read the visitor's
+// node-access cookie and (if they've unlocked the collection) fold the token
+// into the per-render config + retry — so the page fetch and the embedded server
+// components' preloads resolve, with no per-fetch plumbing in the app. Importing
+// this entry (the next-template does, via __prepareFontdueRender) registers it.
+registerNodeAccessRecovery(() => nodeAccessHeaders());
+
+// Escape hatch (rarely needed now recovery is automatic): the visitor's
+// per-collection node-access header for this request, or {} when none. See the
+// password-protected-collections guide.
+export { nodeAccessHeaders };

package/dist/next/registerSingleTenantResolver.js

@@ -15,7 +15,19 @@
 // stays safe for any non-Next RSC consumer. (Today only Next resolves the
 // react-server export condition, but the decoupling makes that a structural
 // invariant rather than an incidental one.)
-import { registerAmbientConfigResolver } from '../relay/serverConfig.js';
+import { registerAmbientConfigResolver, registerNodeAccessRecovery } from '../relay/serverConfig.js';
+
+// Automatic node-access recovery for single-tenant Next apps (the same hook the
+// multi-tenant entry registers). createFontdueFetch calls this when a fetch
+// comes back `password_protected`; it reads the visitor's node-access cookie via
+// Next's request APIs. Lazy-imported, for the same reason as the resolver below:
+// keep next/headers off this module's static graph.
+registerNodeAccessRecovery(async () => {
+  const {
+    nodeAccessHeaders
+  } = await import('./tenant.js');
+  return nodeAccessHeaders();
+});
 registerAmbientConfigResolver(async () => {
   // Loaded lazily so next/headers + next/navigation never enter the
   // provider's static graph; config is read per fetch from Next's request

package/dist/next/tenant.d.ts

@@ -23,4 +23,5 @@ interface RenderProps {
 }
 export declare function buildRenderConfig(domain: string): Promise<FontdueServerConfig>;
 export declare function __prepareFontdueRender(props: RenderProps): Promise<FontdueEndpoint>;
+export declare function nodeAccessHeaders(): Promise<Record<string, string>>;
 export {};

package/dist/next/tenant.js

@@ -29,6 +29,7 @@ import { notFound, unstable_rethrow } from 'next/navigation';
 import { cookies, draftMode } from 'next/headers';
 import { setFontdueServerConfig } from '../relay/serverConfig.js';
 import { PREVIEW_TOKEN_COOKIE, previewAuthHeaders } from '../preview/index.js';
+import { NODE_ACCESS_COOKIE, NODE_ACCESS_HEADER } from '../nodeAccess.js';
 export const isMultiTenant = process.env.FONTDUE_MULTI_TENANT === '1';
 export const singleTenantUrl = process.env.NEXT_PUBLIC_FONTDUE_URL;
 const internalOrigin = process.env.FONTDUE_ORIGIN;
@@ -155,6 +156,30 @@ export async function __prepareFontdueRender(props) {
   return endpointForDomain(domain);
 }
 
+// The visitor's per-collection node-access header for the current request, or {}
+// when they haven't unlocked anything. Reads the first-party cookie the password
+// form set and returns it as `{ 'fontdue-node-access': <tokens> }`, ready to
+// spread into a GraphQL fetch's headers so the unlocked collection resolves.
+//
+// Reading cookies() opts the route into dynamic rendering, so call this only
+// when it's actually needed — after a public fetch comes back
+// password-protected — to keep non-protected font pages static/cacheable. The
+// catch mirrors readPreviewHeaders: re-throw Next's control-flow bailout so a
+// protected page renders dynamically instead of being prerendered cookie-blind
+// (which would serve the locked form to a visitor who has unlocked it).
+export async function nodeAccessHeaders() {
+  try {
+    var _await$cookies$get;
+    const value = (_await$cookies$get = (await cookies()).get(NODE_ACCESS_COOKIE)) === null || _await$cookies$get === void 0 ? void 0 : _await$cookies$get.value;
+    return value ? {
+      [NODE_ACCESS_HEADER]: value
+    } : {};
+  } catch (error) {
+    unstable_rethrow(error);
+    return {};
+  }
+}
+
 // The admin preview token for this render, as Authorization headers, or
 // undefined when not previewing. Draft mode gates it: reading draftMode().
 // isEnabled is static-safe (it returns false during static generation and only
@@ -182,9 +207,9 @@ export async function __prepareFontdueRender(props) {
 //      so unstable_rethrow is a no-op and we fall through to "not previewing".
 async function readPreviewHeaders() {
   try {
-    var _await$cookies$get;
+    var _await$cookies$get2;
     if (!(await draftMode()).isEnabled) return undefined;
-    const token = (_await$cookies$get = (await cookies()).get(PREVIEW_TOKEN_COOKIE)) === null || _await$cookies$get === void 0 ? void 0 : _await$cookies$get.value;
+    const token = (_await$cookies$get2 = (await cookies()).get(PREVIEW_TOKEN_COOKIE)) === null || _await$cookies$get2 === void 0 ? void 0 : _await$cookies$get2.value;
     return token ? previewAuthHeaders(token) : undefined;
   } catch (error) {
     unstable_rethrow(error);

package/dist/nodeAccess.d.ts

@@ -0,0 +1,18 @@
+export declare const NODE_ACCESS_COOKIE = "fontdue_node_access";
+export declare const NODE_ACCESS_HEADER = "fontdue-node-access";
+/** The node-access cookie value from a Cookie header string, or undefined. */
+export declare function readNodeAccessCookie(cookieHeader: string | null | undefined): string | undefined;
+/**
+ * The node-access forwarding header for a Cookie header string, or {} when the
+ * cookie is absent. Spread into a server-side GraphQL fetch's headers so a
+ * collection the visitor unlocked resolves for them. Returns {} for public
+ * (no-cookie) requests, leaving them untouched and cacheable.
+ */
+export declare function nodeAccessHeadersFromCookie(cookieHeader: string | null | undefined): Record<string, string>;
+/**
+ * Remember a freshly minted access token in the browser's node-access cookie,
+ * preserving any collections already unlocked. First-party and JS-readable on
+ * purpose (see the module note); SameSite=Lax so it rides top-level navigations,
+ * Secure only on https so it still persists in local dev. No-op off the browser.
+ */
+export declare function rememberNodeAccessToken(token: string | null | undefined): void;

package/dist/nodeAccess.js

@@ -0,0 +1,84 @@
+// Per-collection node-access contract.
+//
+// When a visitor unlocks a password-protected collection (the `accessNode`
+// mutation), the server returns a signed token. The browser remembers it in a
+// first-party cookie, and a server-rendered storefront forwards that cookie to
+// GraphQL as a request header so the collection keeps resolving for this visitor.
+//
+// This mirrors the admin-preview token contract (see ./preview/constants), with
+// one deliberate difference: the node-access token is low sensitivity — it only
+// re-grants access the visitor already earned by entering the password — so it is
+// a plain, JS-readable first-party cookie the form sets directly in the browser,
+// not an httpOnly cookie brokered through a server route. That keeps the
+// template surface tiny: no `/api/...` route to mount, just the form plus the
+// transport every framework already runs for preview.
+//
+// Kept free of Web/Node APIs (only `document`, behind a guard) so it can be
+// imported from both server transport and the client component.
+
+// First-party cookie the browser carries after unlocking. Value is a
+// comma-separated list of signed tokens, one per unlocked collection.
+export const NODE_ACCESS_COOKIE = 'fontdue_node_access';
+
+// Request header a server-rendered storefront forwards the cookie value as, read
+// back by the Fontdue GraphQL server (see FontageWeb.Schema.Context).
+export const NODE_ACCESS_HEADER = 'fontdue-node-access';
+
+// ~30 days, matching the token's `max_age` on the server (Fontage.Token
+// `:node_access`). The cookie and the token expire together.
+const NODE_ACCESS_MAX_AGE_SECONDS = 60 * 60 * 24 * 30;
+
+// Cap on how many unlock tokens the cookie carries. The value is a
+// comma-separated list of ~150-byte signed tokens, so an unbounded list would
+// eventually pass the browser's ~4 KB per-cookie limit and be dropped whole —
+// silently losing every unlock. We keep the most recent few (oldest are also
+// the closest to their 30-day expiry, so the server would drop them anyway) and
+// evict from the front. A visitor unlocking more than this many collections is
+// well outside the intended "share a handful of drafts" use.
+const MAX_NODE_ACCESS_TOKENS = 16;
+
+/** The node-access cookie value from a Cookie header string, or undefined. */
+export function readNodeAccessCookie(cookieHeader) {
+  if (!cookieHeader) return undefined;
+  for (const part of cookieHeader.split(';')) {
+    const idx = part.indexOf('=');
+    if (idx === -1) continue;
+    if (part.slice(0, idx).trim() !== NODE_ACCESS_COOKIE) continue;
+    const value = part.slice(idx + 1).trim();
+    return value === '' ? undefined : value;
+  }
+  return undefined;
+}
+
+/**
+ * The node-access forwarding header for a Cookie header string, or {} when the
+ * cookie is absent. Spread into a server-side GraphQL fetch's headers so a
+ * collection the visitor unlocked resolves for them. Returns {} for public
+ * (no-cookie) requests, leaving them untouched and cacheable.
+ */
+export function nodeAccessHeadersFromCookie(cookieHeader) {
+  const value = readNodeAccessCookie(cookieHeader);
+  return value ? {
+    [NODE_ACCESS_HEADER]: value
+  } : {};
+}
+
+/**
+ * Remember a freshly minted access token in the browser's node-access cookie,
+ * preserving any collections already unlocked. First-party and JS-readable on
+ * purpose (see the module note); SameSite=Lax so it rides top-level navigations,
+ * Secure only on https so it still persists in local dev. No-op off the browser.
+ */
+export function rememberNodeAccessToken(token) {
+  if (typeof document === 'undefined' || !token) return;
+  const existing = readNodeAccessCookie(document.cookie);
+  const tokens = existing ? existing.split(',').filter(Boolean) : [];
+  if (!tokens.includes(token)) tokens.push(token);
+  // Keep the list bounded so it can't grow past the browser's cookie-size limit
+  // and get dropped wholesale; the newest unlock is always retained.
+  if (tokens.length > MAX_NODE_ACCESS_TOKENS) {
+    tokens.splice(0, tokens.length - MAX_NODE_ACCESS_TOKENS);
+  }
+  const secure = typeof location !== 'undefined' && location.protocol === 'https:' ? '; Secure' : '';
+  document.cookie = `${NODE_ACCESS_COOKIE}=${tokens.join(',')}; Path=/; SameSite=Lax${secure}; Max-Age=${NODE_ACCESS_MAX_AGE_SECONDS}`;
+}

package/dist/preview/server.d.ts

@@ -1,20 +1 @@
-/** Whether the current async context is an admin preview. */
-export declare function isPreviewing(): boolean;
-/**
- * Preview auth headers for the current async context, or {} when not previewing.
- * Spread into a hand-rolled fetch you make inside `runWithPreview`; the
- * fontdue-js fetch/preload helpers pick these up automatically and don't need
- * it.
- */
-export declare function ambientPreviewHeaders(): Record<string, string>;
-/**
- * Run `next` (your framework's render/loader chain) with the request's preview
- * token in ambient context, then return its Response. When the request is
- * previewing, the response's cache headers are rewritten so it is never stored
- * in a shared/CDN cache. Public (no-token) requests pass through untouched and
- * stay fully cacheable.
- *
- * `next` is your middleware's continuation — `next` in Astro, `next` in a React
- * Router 7 middleware. It must return (a promise of) the Response.
- */
-export declare function runWithPreview(request: Request, next: () => Response | Promise<Response>): Promise<Response>;
+export { runWithPreview, isPreviewing, ambientHeaders as ambientPreviewHeaders, } from '../server/middleware.js';