fontdue-js 2.19.2 → 2.20.0

package/dist/components/useFontLoaded.d.ts

@@ -0,0 +1,24 @@
+import React from 'react';
+interface UseFontLoaded_props {
+    fontFamily: string;
+    /** @deprecated No longer used — kept for backward compatibility */
+    fontWeight?: string;
+    /** @deprecated No longer used — kept for backward compatibility */
+    fontStyle?: string;
+}
+/**
+ * Hook for external consumers (npm clients) to detect when a font is loaded.
+ *
+ * Fonts can be loaded by CSS @font-face rules (e.g. via PreloadWebfonts) or
+ * by fontdue-js components via the FontFace API. Uses document.fonts.load()
+ * to force the browser to load matching fonts even when no DOM text uses
+ * the font-family yet.
+ *
+ * Usage:
+ *   const { style, loaded } = useFontLoaded({ fontFamily: "Helvetica Now Regular" });
+ */
+declare const useFontLoaded: ({ fontFamily, }: UseFontLoaded_props) => {
+    style: React.CSSProperties;
+    loaded: boolean;
+};
+export default useFontLoaded;

package/dist/components/useFontLoaded.js

@@ -0,0 +1,60 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = require("react");
+const FALLBACK_FAMILY = 'Fallback';
+
+/**
+ * Hook for external consumers (npm clients) to detect when a font is loaded.
+ *
+ * Fonts can be loaded by CSS @font-face rules (e.g. via PreloadWebfonts) or
+ * by fontdue-js components via the FontFace API. Uses document.fonts.load()
+ * to force the browser to load matching fonts even when no DOM text uses
+ * the font-family yet.
+ *
+ * Usage:
+ *   const { style, loaded } = useFontLoaded({ fontFamily: "Helvetica Now Regular" });
+ */
+const useFontLoaded = _ref => {
+  let {
+    fontFamily
+  } = _ref;
+  const [loaded, setLoaded] = (0, _react.useState)(false);
+  (0, _react.useEffect)(() => {
+    let cancelled = false;
+    const tryLoad = () => {
+      document.fonts.load(`400 16px "${fontFamily}"`).then(fontFaces => {
+        if (!cancelled && fontFaces.length > 0) setLoaded(true);
+      }).catch(() => {});
+    };
+
+    // Try immediately (works if @font-face exists or FontFace already added)
+    tryLoad();
+
+    // Also listen for future font loads (e.g., fontdue-js component adds
+    // FontFace via API after this hook mounts)
+    document.fonts.addEventListener('loadingdone', tryLoad);
+    return () => {
+      cancelled = true;
+      document.fonts.removeEventListener('loadingdone', tryLoad);
+    };
+  }, [fontFamily]);
+  const cssStyle = loaded ? {
+    fontFamily: `"${fontFamily}", ${FALLBACK_FAMILY}`,
+    fontWeight: 400,
+    fontStyle: 'normal'
+  } : {
+    fontFamily: FALLBACK_FAMILY,
+    fontWeight: 'normal',
+    fontStyle: 'normal'
+  };
+  return {
+    style: cssStyle,
+    loaded
+  };
+};
+var _default = useFontLoaded;
+exports.default = _default;

package/dist/components/useFontStyle.d.ts

@@ -1,10 +1,9 @@
 import React from 'react';
+import { useFontStyle_fontStyle$key } from '../__generated__/useFontStyle_fontStyle.graphql';
 interface UseFontStyle_props {
-    fontFamily: string;
-    fontWeight?: string;
-    fontStyle?: string;
+    fontStyle: useFontStyle_fontStyle$key | null | undefined;
 }
-declare const useFontStyle: ({ fontFamily, fontWeight, fontStyle, }: UseFontStyle_props) => {
+declare const useFontStyle: ({ fontStyle: fontStyleKey, }: UseFontStyle_props) => {
     style: React.CSSProperties;
     loaded: boolean;
 };

package/dist/components/useFontStyle.js

@@ -4,36 +4,44 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _fontfaceobserver = _interopRequireDefault(require("fontfaceobserver"));
+var _useFontStyle_fontStyle2 = _interopRequireDefault(require("../__generated__/useFontStyle_fontStyle.graphql"));
 var _react = require("react");
+var _reactRelay = require("react-relay");
+var _fontLoader = require("../fontLoader");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const FALLBACK_FAMILY = 'Fallback';
 const useFontStyle = _ref => {
   let {
-    fontFamily,
-    fontWeight,
-    fontStyle
+    fontStyle: fontStyleKey
   } = _ref;
+  const fontStyle = (0, _reactRelay.useFragment)((_useFontStyle_fontStyle2.default.hash && _useFontStyle_fontStyle2.default.hash !== "cc36ae8da5627792c27e9d3ad2b07258" && console.error("The definition of 'useFontStyle_fontStyle' appears to have changed. Run `relay-compiler` to update the generated files to receive the expected data."), _useFontStyle_fontStyle2.default), fontStyleKey ?? null);
+  const fontFamily = fontStyle ? `${fontStyle.cssFamily} ${fontStyle.name}` : null;
+  const sources = fontStyle === null || fontStyle === void 0 ? void 0 : fontStyle.webfontSources;
+  const verticalMetrics = fontStyle === null || fontStyle === void 0 ? void 0 : fontStyle.verticalMetrics;
+
+  // Always initialize as false to avoid SSR/client hydration mismatch.
+  // The effect below will detect already-loaded fonts on mount.
   const [loaded, setLoaded] = (0, _react.useState)(false);
   const mounted = (0, _react.useRef)(false);
-  (0, _react.useEffect)(() => {
-    setLoaded(false);
-    const observer = new _fontfaceobserver.default(fontFamily, {
-      weight: fontWeight,
-      style: fontStyle
-    });
-    observer.load(null, 90000).then(() => {
-      // since there's no easy way to cancel the promise...
-      if (mounted.current) setLoaded(true);
-    }).catch(console.error);
-  }, [fontFamily, fontWeight, fontStyle]);
   (0, _react.useEffect)(() => {
     mounted.current = true;
     return () => {
       mounted.current = false;
     };
   }, []);
-  const cssStyle = loaded ? {
+  (0, _react.useEffect)(() => {
+    if (!fontFamily) return;
+    if ((0, _fontLoader.isFontLoaded)(fontFamily)) {
+      setLoaded(true);
+      return;
+    }
+    if (!sources || sources.length === 0) return;
+    setLoaded(false);
+    (0, _fontLoader.loadFont)(fontFamily, sources, verticalMetrics).then(() => {
+      if (mounted.current) setLoaded(true);
+    }).catch(console.error);
+  }, [fontFamily]);
+  const cssStyle = loaded && fontFamily ? {
     fontFamily: `"${fontFamily}", ${FALLBACK_FAMILY}`,
     fontWeight: 400,
     fontStyle: 'normal'

package/dist/deepMerge.d.ts

@@ -0,0 +1,4 @@
+type Obj = Record<string, unknown>;
+/** Deep merge two objects. Properties from `overlay` take precedence. */
+export declare function deepMerge<T extends Obj>(base: Obj, overlay: Obj): T;
+export {};

package/dist/deepMerge.js

@@ -0,0 +1,24 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.deepMerge = deepMerge;
+function isPlainObject(value) {
+  return typeof value === 'object' && value !== null && !Array.isArray(value);
+}
+
+/** Deep merge two objects. Properties from `overlay` take precedence. */
+function deepMerge(base, overlay) {
+  const result = {
+    ...base
+  };
+  for (const key of Object.keys(overlay)) {
+    if (isPlainObject(result[key]) && isPlainObject(overlay[key])) {
+      result[key] = deepMerge(result[key], overlay[key]);
+    } else {
+      result[key] = overlay[key];
+    }
+  }
+  return result;
+}

package/dist/fontLoader.d.ts

@@ -0,0 +1,13 @@
+interface FontSource {
+    readonly url: string | null;
+    readonly format: string | null;
+}
+interface VerticalMetrics {
+    readonly unitsPerEm: number;
+    readonly ascender: number;
+    readonly descender: number;
+    readonly lineGap: number | null;
+}
+export declare function isFontLoaded(fontFamily: string): boolean;
+export declare function loadFont(fontFamily: string, sources: ReadonlyArray<FontSource | null>, verticalMetrics?: VerticalMetrics | null): Promise<FontFace | null>;
+export {};

package/dist/fontLoader.js

@@ -0,0 +1,55 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.isFontLoaded = isFontLoaded;
+exports.loadFont = loadFont;
+const cache = new Map();
+const loaded = new Set();
+function isFontLoaded(fontFamily) {
+  return loaded.has(fontFamily);
+}
+async function loadFont(fontFamily, sources, verticalMetrics) {
+  // Return cached promise if loading is in progress or complete
+  const existing = cache.get(fontFamily);
+  if (existing) return existing;
+  const promise = doLoadFont(fontFamily, sources, verticalMetrics);
+  cache.set(fontFamily, promise);
+  promise.catch(() => {
+    cache.delete(fontFamily);
+    loaded.delete(fontFamily);
+  });
+  return promise;
+}
+async function doLoadFont(fontFamily, sources, verticalMetrics) {
+  const validSources = sources.filter(s => s != null && s.url != null);
+  const source = validSources.find(s => s.format === 'woff2') ?? validSources[0];
+  if (!source || !source.url) throw new Error(`No font sources for ${fontFamily}`);
+  const response = await fetch(source.url);
+  if (!response.ok) throw new Error(`Failed to fetch font: ${response.status}`);
+  const buffer = await response.arrayBuffer();
+  const descriptors = {
+    weight: '400',
+    style: 'normal',
+    display: 'block'
+  };
+  if (verticalMetrics && verticalMetrics.unitsPerEm > 0) {
+    const {
+      unitsPerEm,
+      ascender,
+      descender,
+      lineGap
+    } = verticalMetrics;
+    descriptors.ascentOverride = `${ascender / unitsPerEm * 100}%`;
+    descriptors.descentOverride = `${descender / unitsPerEm * -100}%`;
+    if (lineGap != null) {
+      descriptors.lineGapOverride = `${lineGap / unitsPerEm * 100}%`;
+    }
+  }
+  const fontFace = new FontFace(fontFamily, buffer, descriptors);
+  await fontFace.load();
+  document.fonts.add(fontFace);
+  loaded.add(fontFamily);
+  return fontFace;
+}

package/dist/fontdue.css

@@ -876,6 +876,71 @@ div[data-component=TypeTesters] {
   opacity: 0.5;
 }
 
+.fontdue-consent-banner {
+  position: fixed;
+  bottom: 16px;
+  left: 16px;
+  z-index: 999999;
+  max-width: 420px;
+  background-color: var(--secondary_background_color, #fafafa);
+  color: var(--primary_text_color, #000);
+  font-family: inherit;
+  font-size: 14px;
+  line-height: 1.5;
+  border: 1px solid var(--horizontal_rule_color, #ccc);
+}
+@media (max-width: 480px) {
+  .fontdue-consent-banner {
+    left: 8px;
+    right: 8px;
+    max-width: none;
+  }
+}
+.fontdue-consent-banner__container {
+  padding: 20px 24px;
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+.fontdue-consent-banner__message {
+  margin: 0;
+}
+.fontdue-consent-banner__actions {
+  display: flex;
+  gap: 8px;
+}
+.fontdue-consent-banner__button {
+  appearance: none;
+  cursor: pointer;
+  font-family: inherit;
+  font-size: 14px;
+  line-height: 1;
+  padding: 10px 20px;
+  border-radius: 0;
+  white-space: nowrap;
+  transition: background-color 150ms ease, color 150ms ease;
+}
+.fontdue-consent-banner__button--primary {
+  background-color: var(--button_background_color, #000);
+  color: var(--button_text_color, #fff);
+  border: 1px solid var(--button_border_color, transparent);
+}
+.fontdue-consent-banner__button--primary:hover {
+  background-color: var(--button_hover_background_color, #333);
+  color: var(--button_hover_text_color, #fff);
+  border-color: var(--button_hover_border_color, transparent);
+}
+.fontdue-consent-banner__button--secondary {
+  background-color: transparent;
+  color: var(--primary_text_color, #000);
+  border: 1px solid var(--horizontal_rule_color, #ccc);
+}
+.fontdue-consent-banner__button--secondary:hover {
+  background-color: var(--button_hover_background_color, #333);
+  color: var(--button_hover_text_color, #fff);
+  border-color: var(--button_hover_border_color, transparent);
+}
+
 :root {
   --section_spacing: 60px;
 }

package/dist/hooks/useAutofit.d.ts

@@ -0,0 +1,20 @@
+export interface UseAutofitProps {
+    text: string;
+    fontFamily: string;
+    fontSize: number;
+    min?: number;
+    max?: number;
+    letterSpacing?: number;
+    fontWeight?: React.CSSProperties['fontWeight'];
+    fontStyle?: string;
+    fontVariationSettings?: string;
+    enabled?: boolean;
+    padding?: number;
+}
+export interface UseAutofitResult {
+    ref: React.RefObject<HTMLDivElement | null>;
+    fontSize: number;
+    ready: boolean;
+}
+declare const useAutofit: ({ text, fontFamily, fontSize: externalFontSize, min, max, letterSpacing, fontWeight, fontStyle, fontVariationSettings, enabled, padding, }: UseAutofitProps) => UseAutofitResult;
+export default useAutofit;

package/dist/hooks/useAutofit.js

@@ -0,0 +1,114 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = require("react");
+var _resizeObserver = _interopRequireDefault(require("@react-hook/resize-observer"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const REF_SIZE = 100;
+
+// Canvas measurement (fast path)
+let sharedCanvas = null;
+function getCanvasContext() {
+  if (!sharedCanvas) sharedCanvas = document.createElement('canvas');
+  return sharedCanvas.getContext('2d');
+}
+
+// DOM measurement (fallback for variable fonts)
+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 measureWithCanvas(text, fontFamily, fontWeight, fontStyleValue, letterSpacing) {
+  const ctx = getCanvasContext();
+  ctx.font = `${fontStyleValue} ${fontWeight} ${REF_SIZE}px ${fontFamily}`;
+  ctx.letterSpacing = `${letterSpacing}em`;
+  const width = ctx.measureText(text).width;
+  ctx.letterSpacing = '0px';
+  return width;
+}
+function measureWithDOM(text, fontFamily, fontWeight, fontStyleValue, letterSpacing, fontVariationSettings) {
+  const el = getMeasureElement();
+  el.style.fontFamily = fontFamily;
+  el.style.fontWeight = `${fontWeight}`;
+  el.style.fontStyle = fontStyleValue;
+  el.style.fontSize = `${REF_SIZE}px`;
+  el.style.letterSpacing = `${letterSpacing}em`;
+  el.style.fontVariationSettings = fontVariationSettings;
+  el.textContent = text;
+  return el.getBoundingClientRect().width;
+}
+const useAutofit = _ref => {
+  let {
+    text,
+    fontFamily,
+    fontSize: externalFontSize,
+    min = 8,
+    max = 999,
+    letterSpacing = 0,
+    fontWeight = 400,
+    fontStyle = 'normal',
+    fontVariationSettings,
+    enabled = true,
+    padding = 0
+  } = _ref;
+  const ref = (0, _react.useRef)(null);
+  const [fontSize, setFontSize] = (0, _react.useState)(externalFontSize);
+  const [containerWidth, setContainerWidth] = (0, _react.useState)(0);
+  const [fontVersion, setFontVersion] = (0, _react.useState)(0);
+  const [measured, setMeasured] = (0, _react.useState)(false);
+  (0, _resizeObserver.default)(ref, entry => {
+    setContainerWidth(entry.contentRect.width);
+  });
+
+  // Trigger re-measurement when the font becomes available.
+  // If already loaded (e.g. parent waited for font), the promise
+  // resolves as a microtask and the re-measurement is near-instant.
+  (0, _react.useLayoutEffect)(() => {
+    if (!enabled || !fontFamily) return;
+    const fontString = `${fontStyle} ${fontWeight} ${REF_SIZE}px ${fontFamily}`;
+    document.fonts.load(fontString).then(() => {
+      setFontVersion(v => v + 1);
+    });
+  }, [fontFamily, fontWeight, fontStyle, enabled]);
+  (0, _react.useLayoutEffect)(() => {
+    if (!enabled) return;
+    const availableWidth = containerWidth - padding;
+    if (availableWidth <= 0 || !text) return;
+
+    // Use DOM measurement when variable font settings are active
+    // (canvas doesn't support fontVariationSettings in most browsers).
+    // Otherwise use canvas for better performance (no layout reflow).
+    const refWidth = fontVariationSettings ? measureWithDOM(text, fontFamily, fontWeight, fontStyle, letterSpacing, fontVariationSettings) : measureWithCanvas(text, fontFamily, fontWeight, fontStyle, letterSpacing);
+    if (refWidth <= 0) return;
+
+    // Text width scales linearly with font size.
+    // Floor to avoid sub-pixel rounding that causes text to wrap.
+    const newSize = Math.min(Math.max(min, Math.floor(availableWidth / (refWidth / REF_SIZE))), max);
+    setFontSize(newSize);
+    if (!measured) setMeasured(true);
+  }, [text, fontFamily, fontWeight, fontStyle, fontVariationSettings, letterSpacing, containerWidth, enabled, min, max, padding, fontVersion]);
+  if (!enabled) return {
+    ref,
+    fontSize: externalFontSize,
+    ready: true
+  };
+  return {
+    ref,
+    fontSize,
+    ready: measured
+  };
+};
+var _default = useAutofit;
+exports.default = _default;

package/dist/react-ranger.js

@@ -165,7 +165,11 @@ function useRanger(_ref) {
     document.addEventListener('mouseup', handleRelease);
     document.addEventListener('touchend', handleRelease);
   }, [getLatest, handleDrag]);
-  const getPercentageForValue = _react.default.useCallback(val => interpolator.getPercentageForValue(val, min, max), [interpolator, max, min]);
+  const getPercentageForValue = _react.default.useCallback(val => {
+    const pct = interpolator.getPercentageForValue(val, min, max);
+    // Round to 4 decimal places for consistent SSR/client hydration
+    return Math.round(pct * 10000) / 10000;
+  }, [interpolator, max, min]);
 
   // Build the ticks
   const ticks = _react.default.useMemo(() => {

package/dist/reducer.d.ts

@@ -17,7 +17,6 @@ export interface OrderVariableSelectionState {
     countryCode?: string | null;
 }
 export interface FontdueState {
-    stylesheets: string[];
     cartOpen: boolean;
     precartOpen: boolean;
     selectedSkuIds: {
@@ -73,9 +72,6 @@ export type FontdueAction = {
     selected: boolean;
 } | {
     type: 'UNSELECT_SKUS';
-} | {
-    type: 'REGISTER_STYLESHEET';
-    href: string;
 } | {
     type: 'POPULATE_PRODUCT_STATE';
     data: productState_Query$data;

package/dist/reducer.js

@@ -248,16 +248,6 @@ const reducer = (state, action) => {
         ...state,
         cartOpen: false
       };
-    case 'REGISTER_STYLESHEET':
-      const existing = document.querySelector(`link[href="${action.href}"]`);
-      if (existing) return state;
-      return {
-        ...state,
-        stylesheets: state.stylesheets.filter(href => href !== action.href).concat(action.href).sort()
-
-        // sort is important here since moving stylesheets around causes them to
-        // get re-evaluated
-      };
     case 'STORE_MODAL_NAVIGATE':
       return storeModalNavigate(state, action);
     case 'STORE_MODAL_REPLACE':
@@ -286,7 +276,6 @@ function createDefaultStore(config) {
     collectionStyleSkus: {},
     skuPrices: {},
     collectionSkus: {},
-    stylesheets: [],
     fetchedCollectionIds: [],
     storeModalRoute: {
       name: 'index',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "fontdue-js",
-  "version": "2.19.2",
+  "version": "2.20.0",
   "scripts": {
     "build": "npm run relay && run-p build-js build-css build-ts",
     "build-js": "babel src --out-dir dist --extensions .ts,.tsx,.js,.jsx",
@@ -115,6 +115,9 @@
       "react-server": "./dist/components/TypeTesters/index.server.js",
       "default": "./dist/components/TypeTesters/index.js"
     },
-    "./useFontStyle": "./dist/components/useFontStyle.js"
+    "./useConsent": "./dist/components/useConsent.js",
+    "./useFont": "./dist/components/useFont.js",
+    "./useFontStyle": "./dist/components/useFont.js",
+    "./useAutofit": "./dist/hooks/useAutofit.js"
   }
 }