fontdue-js 2.25.1 → 2.26.1

package/dist/fontLoader.js

@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.isFontLoaded = isFontLoaded;
 exports.loadFont = loadFont;
+exports.selectFontSource = selectFontSource;
 const cache = new Map();
 const loaded = new Set();
 function isFontLoaded(fontFamily) {
@@ -22,9 +23,43 @@ async function loadFont(fontFamily, sources, verticalMetrics) {
   });
   return promise;
 }
+
+/**
+ * Pick the best `FontSource` for the current browser from a list emitted by
+ * the backend's `webfontSources` field.
+ *
+ * The backend already returns sources in CSS `src:` priority order
+ * (dedicated COLRv1 → COLRv0 → SVG → sbix → bundled → outline-fallback,
+ * within format). The job here is to drop entries whose color tech the
+ * browser can't render — without this, fetching e.g. an SVG-in-OpenType
+ * file in Chrome pins a face Chrome can only render as outline.
+ *
+ * Sources with no `tech` tag are kept unconditionally (outline / universal).
+ * If every tech-tagged source is filtered out, falls back to the unfiltered
+ * list — the browser will at least try to render something rather than the
+ * fallback font.
+ *
+ * `techSupportCheck` is injectable for tests; defaults to
+ * `CSS.supports("font-tech(color-<tech>)")`.
+ */
+function selectFontSource(sources) {
+  let techSupportCheck = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : defaultTechSupport;
+  const valid = sources.filter(s => s != null && s.url != null);
+  const supported = valid.filter(s => !s.tech || techSupportCheck(s.tech));
+  const candidates = supported.length > 0 ? supported : valid;
+  return candidates.find(s => s.format === 'woff2') ?? candidates[0] ?? null;
+}
+function defaultTechSupport(tech) {
+  // SSR or very old browsers without CSS.supports: be optimistic, don't drop
+  // tech-tagged sources. Filtering exists to *prevent* loading a file the
+  // browser can't render, not to forbid sources we're unsure about.
+  if (typeof CSS === 'undefined' || typeof CSS.supports !== 'function') {
+    return true;
+  }
+  return CSS.supports(`font-tech(color-${tech})`);
+}
 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];
+  const source = selectFontSource(sources);
   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}`);

package/dist/fontdue.css

@@ -708,6 +708,7 @@ div[data-component=TypeTesters] {
   margin-left: 10px;
   margin-right: 16px;
   text-align: right;
+  font-feature-settings: "tnum" 1;
 }
 .type-tester__variable-axes__name {
   white-space: nowrap;

package/dist/hooks.d.ts

@@ -1 +1,2 @@
+export declare function useDebouncedValue<T>(value: T, delay: number): T;
 export declare const useNewPortalElement: () => import("react").RefObject<HTMLDivElement>;

package/dist/hooks.js

@@ -3,8 +3,22 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+exports.useDebouncedValue = useDebouncedValue;
 exports.useNewPortalElement = void 0;
 var _react = require("react");
+// Returns a copy of `value` that only updates `delay` ms after `value` stops
+// changing. Useful for trailing UI that shouldn't react to rapid changes mid
+// interaction (e.g. the variable-font instance name while a slider is dragged).
+// NOTE: detects changes by reference, so callers must update `value`
+// immutably — an object mutated in place won't trigger an update.
+function useDebouncedValue(value, delay) {
+  const [debounced, setDebounced] = (0, _react.useState)(value);
+  (0, _react.useEffect)(() => {
+    const timer = setTimeout(() => setDebounced(value), delay);
+    return () => clearTimeout(timer);
+  }, [value, delay]);
+  return debounced;
+}
 const useNewPortalElement = () => {
   const elementRef = (0, _react.useRef)(document.createElement('div'));
   (0, _react.useEffect)(() => {

package/fontdue.css

@@ -674,7 +674,8 @@ div[data-component='TypeTesters'] {
 .type-tester__variable-axes__value {
   margin-left: 10px;
   margin-right: 16px;
-  width: 3em;
+  /* width is reserved per-axis inline (in ch) for the widest value in range,
+     so the number changing never reflows the slider. */
   text-align: right;
   font-feature-settings: 'tnum' 1;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "fontdue-js",
-  "version": "2.25.1",
+  "version": "2.26.1",
   "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",