@liiift-studio/sanity-font-manager 2.4.0 → 2.5.0

package/src/utils/fontHelpers.js

@@ -0,0 +1,267 @@
+// Shared helpers for extracting data from lib-font parsed fonts — the ONLY code that touches font.opentype.tables.*
+
+/**
+ * Name record lookup cache — avoids repeated linear scans of nameRecords.
+ * Keyed by font instance (WeakMap), values are { [nameID]: string } maps.
+ * @type {WeakMap<object, Object.<number, string>>}
+ */
+const nameCache = new WeakMap();
+
+/**
+ * Get a name table string by numeric name ID.
+ * Prefers Windows/Unicode/English (platform 3, language 0x0409),
+ * falls back to Mac/Roman/English (platform 1, language 0),
+ * then first available record.
+ *
+ * @param {object} font - lib-font Font instance
+ * @param {number} nameID - OpenType name ID (0=copyright, 1=family, 2=subfamily, 4=fullName, 6=postscript, 16=prefFamily, 17=prefSubfamily)
+ * @returns {string} Decoded name string, or empty string if not found
+ */
+export function getNameString(font, nameID) {
+	if (!nameCache.has(font)) nameCache.set(font, {});
+	const cache = nameCache.get(font);
+	if (nameID in cache) return cache[nameID];
+
+	const records = font.opentype?.tables?.name?.nameRecords || [];
+
+	// Priority 1: Windows Unicode English
+	const win = records.find(r => r.nameID === nameID && r.platformID === 3 && r.languageID === 0x0409);
+	if (win?.string) { cache[nameID] = win.string; return win.string; }
+
+	// Priority 2: Mac Roman English
+	const mac = records.find(r => r.nameID === nameID && r.platformID === 1 && r.languageID === 0);
+	if (mac?.string) { cache[nameID] = mac.string; return mac.string; }
+
+	// Priority 3: First record with this nameID
+	const any = records.find(r => r.nameID === nameID);
+	const result = any?.string || '';
+	cache[nameID] = result;
+	return result;
+}
+
+/**
+ * Get all OpenType feature tags from GSUB and GPOS tables.
+ * Traverses scripts → langsys → features, deduplicates, and caches.
+ * Equivalent to fontkit's font.availableFeatures.
+ *
+ * @param {object} font - lib-font Font instance
+ * @returns {string[]} Array of unique 4-character feature tag strings (e.g. ['kern', 'liga', 'smcp'])
+ */
+export function getAllFeatureTags(font) {
+	const tags = new Set();
+	const tables = font.opentype?.tables;
+	for (const layoutTable of [tables?.GSUB, tables?.GPOS]) {
+		if (!layoutTable) continue;
+		try {
+			for (const scriptTag of layoutTable.getSupportedScripts()) {
+				const script = layoutTable.getScriptTable(scriptTag);
+				for (const langTag of layoutTable.getSupportedLangSys(script)) {
+					const langsys = layoutTable.getLangSysTable(script, langTag);
+					for (const feature of layoutTable.getFeatures(langsys)) {
+						tags.add(feature.featureTag.trim());
+					}
+				}
+			}
+		} catch (err) {
+			console.warn(`Error reading ${layoutTable === tables.GSUB ? 'GSUB' : 'GPOS'} features:`, err.message);
+		}
+	}
+	return [...tags];
+}
+
+/**
+ * Get character set as array of code points from the cmap table.
+ * Uses Windows/Unicode BMP subtable (platform 3, encoding 1).
+ *
+ * @param {object} font - lib-font Font instance
+ * @returns {number[]} Array of supported Unicode code points
+ */
+export function getCharacterSet(font) {
+	const cmap = font.opentype?.tables?.cmap;
+	if (!cmap) return [];
+	try {
+		return cmap.getSupportedCharCodes(3, 1);
+	} catch {
+		return [];
+	}
+}
+
+/**
+ * Build a variation axis map from fvar table.
+ * Filters out degenerate axes (min === max). Returns null if not a variable font.
+ *
+ * @param {object} font - lib-font Font instance
+ * @returns {{ [tag: string]: { min: number, max: number, default: number, name: string } } | null}
+ */
+export function getVariationAxes(font) {
+	const fvar = font.opentype?.tables?.fvar;
+	if (!fvar?.axes) return null;
+
+	const axes = {};
+	for (const axis of fvar.axes) {
+		if (axis.minValue === axis.maxValue) continue;
+		axes[axis.tag] = {
+			min: axis.minValue,
+			max: axis.maxValue,
+			default: axis.defaultValue,
+			name: getNameString(font, axis.axisNameID) || axis.tag,
+		};
+	}
+	return Object.keys(axes).length > 0 ? axes : null;
+}
+
+/**
+ * Get named instances from fvar table.
+ * Resolves subfamilyNameID and postScriptNameID via the name table.
+ *
+ * @param {object} font - lib-font Font instance
+ * @returns {Array<{ name: string, coordinates: number[], postScriptName: string }>}
+ */
+export function getNamedInstances(font) {
+	const fvar = font.opentype?.tables?.fvar;
+	if (!fvar?.instances) return [];
+	return fvar.instances.map(inst => ({
+		name: getNameString(font, inst.subfamilyNameID),
+		coordinates: inst.coordinates,
+		postScriptName: getNameString(font, inst.postScriptNameID || 0),
+	}));
+}
+
+/**
+ * Build font metrics object matching the Sanity document shape.
+ * Uses OS/2 typo metrics when USE_TYPO_METRICS bit is set, otherwise hhea.
+ *
+ * @param {object} font - lib-font Font instance
+ * @returns {{ unitsPerEm: number, ascender: number, descender: number, lineGap: number, underlinePosition: number, underlineThickness: number, italicAngle: number, capHeight: number, xHeight: number, boundingBox: { xMin: number, yMin: number, xMax: number, yMax: number } }}
+ */
+export function getFontMetrics(font) {
+	const tables = font.opentype?.tables;
+	const os2 = tables?.['OS/2'];
+	const head = tables?.head;
+	const post = tables?.post;
+	const hhea = tables?.hhea;
+
+	// USE_TYPO_METRICS flag (fsSelection bit 7) — when set, use OS/2 typo metrics
+	const useTypo = os2 ? (os2.fsSelection & 0x80) !== 0 : false;
+
+	return {
+		unitsPerEm: head?.unitsPerEm || 1000,
+		ascender: useTypo ? (os2?.sTypoAscender || 0) : (hhea?.ascender ?? os2?.sTypoAscender ?? 0),
+		descender: useTypo ? (os2?.sTypoDescender || 0) : (hhea?.descender ?? os2?.sTypoDescender ?? 0),
+		lineGap: useTypo ? (os2?.sTypoLineGap || 0) : (hhea?.lineGap ?? os2?.sTypoLineGap ?? 0),
+		underlinePosition: post?.underlinePosition || 0,
+		underlineThickness: post?.underlineThickness || 0,
+		italicAngle: post?.italicAngle || 0,
+		capHeight: (os2?.version >= 2) ? (os2?.sCapHeight || 0) : 0,
+		xHeight: (os2?.version >= 2) ? (os2?.sxHeight || 0) : 0,
+		boundingBox: {
+			xMin: head?.xMin || 0,
+			yMin: head?.yMin || 0,
+			xMax: head?.xMax || 0,
+			yMax: head?.yMax || 0,
+		},
+	};
+}
+
+/**
+ * Build font metadata object matching the Sanity document shape.
+ *
+ * @param {object} font - lib-font Font instance
+ * @returns {{ postscriptName: string, fullName: string, familyName: string, subfamilyName: string, copyright: string, version: string, genDate: string }}
+ */
+export function getFontMetadata(font) {
+	return {
+		postscriptName: getNameString(font, 6),
+		fullName: getNameString(font, 4),
+		familyName: getNameString(font, 1),
+		subfamilyName: getNameString(font, 2),
+		copyright: getNameString(font, 0),
+		version: getNameString(font, 5),
+		genDate: new Date().toISOString(),
+	};
+}
+
+/**
+ * Get the OS/2 usWeightClass value.
+ *
+ * @param {object} font - lib-font Font instance
+ * @returns {number|null} Weight class (1-1000) or null if OS/2 table is missing
+ */
+export function getWeightClass(font) {
+	return font.opentype?.tables?.['OS/2']?.usWeightClass || null;
+}
+
+/**
+ * Get the OS/2 fsSelection flags as a raw uint16.
+ *
+ * @param {object} font - lib-font Font instance
+ * @returns {number} fsSelection bitmask (0 if OS/2 table is missing)
+ */
+export function getFsSelection(font) {
+	return font.opentype?.tables?.['OS/2']?.fsSelection || 0;
+}
+
+/**
+ * Get the head macStyle flags as a uint16 bitmask.
+ * lib-font returns macStyle as a bit array (big-endian order: index 15 = bit 0).
+ * This helper converts it back to a standard uint16 for bitwise testing.
+ *
+ * @param {object} font - lib-font Font instance
+ * @returns {number} macStyle bitmask (0 if head table is missing)
+ */
+export function getMacStyle(font) {
+	const macStyle = font.opentype?.tables?.head?.macStyle;
+	if (!macStyle) return 0;
+	// lib-font returns a bit array or a number depending on version
+	if (typeof macStyle === 'number') return macStyle;
+	// Convert bit array (big-endian) to uint16: index 15 = bit 0, index 14 = bit 1, etc.
+	if (typeof macStyle === 'object') {
+		let value = 0;
+		for (let i = 0; i < 16; i++) {
+			if (macStyle[i]) value |= (1 << (15 - i));
+		}
+		return value;
+	}
+	return 0;
+}
+
+/**
+ * Get the post table italic angle.
+ *
+ * @param {object} font - lib-font Font instance
+ * @returns {number} Italic angle in degrees (0 for upright fonts)
+ */
+export function getItalicAngle(font) {
+	return font.opentype?.tables?.post?.italicAngle || 0;
+}
+
+/**
+ * Get glyph count from maxp table.
+ *
+ * @param {object} font - lib-font Font instance
+ * @returns {number} Number of glyphs
+ */
+export function getGlyphCount(font) {
+	return font.opentype?.tables?.maxp?.numGlyphs || 0;
+}
+
+/**
+ * Get the OS/2 sFamilyClass value for font category detection.
+ *
+ * @param {object} font - lib-font Font instance
+ * @returns {number} sFamilyClass value (0 if missing)
+ */
+export function getFamilyClass(font) {
+	return font.opentype?.tables?.['OS/2']?.sFamilyClass || 0;
+}
+
+/**
+ * Escape a font name for safe interpolation into CSS font-family declarations.
+ * Prevents CSS injection via crafted name table strings.
+ *
+ * @param {string} name - Raw font name from the name table
+ * @returns {string} Escaped name safe for CSS string context
+ */
+export function escapeCssFontName(name) {
+	return name.replace(/\\/g, '\\\\').replace(/'/g, "\\'").replace(/"/g, '\\"').replace(/;/g, '');
+}

package/src/utils/generateCssFile.js

@@ -1,7 +1,8 @@
 // Builds a @font-face CSS file from a WOFF2 blob — URL or base64 src, variable font axis descriptors, metric-tuned fallback @font-face for CLS reduction
+
 import base64 from 'base-64';
-import { Buffer } from 'buffer';
-import * as fontkit from 'fontkit';
+import { parseFont } from './parseFont';
+import { getVariationAxes, getFontMetrics, getFamilyClass, escapeCssFontName } from './fontHelpers';
 
 function _arrayBufferToBase64(buffer) {
 	var binary = '';
@@ -14,88 +15,83 @@ function _arrayBufferToBase64(buffer) {
 }
 
 /**
- * Reads variable axes from a fontkit font object and returns:
- *   { descriptors, skipped }
- * where `descriptors` is the CSS string for the @font-face block and
- * `skipped` lists axis tags that have no CSS descriptor (opsz, custom axes, etc.)
- * so callers can surface them in comments.
+ * Builds CSS @font-face axis descriptors from a variation axis map.
+ * Accepts a pre-built axis map (from getVariationAxes) rather than a raw font object,
+ * so callers can share a single parse result.
  *
- * Edge cases handled:
- *  - Degenerate axes (min === max): skipped — no actual variation range
- *  - ital with max === 0: skipped — axis exists but font has no italic
- *  - slnt ordering: sorted ascending as CSS spec requires
- *  - ital + slnt coexistence: slnt takes priority (more expressive)
- *  - min > max from corrupt font data: clamped with Math.min/Math.max
- * @param {Object} font - fontkit font instance
+ * @param {object|null} axisMap - Keyed axis map { wght: { min, max, default }, ... } or null
  * @returns {{ descriptors: string, skipped: string[] }}
  */
-export function buildVFDescriptors(font) {
-	const cssAxes = {}
-	const skipped = []
-	try {
-		const va = font.variationAxes
-		if (!va) return { descriptors: '', skipped: [] }
+export function buildVFDescriptors(axisMap) {
+	const cssAxes = {};
+	const skipped = [];
 
-		for (const [tag, axis] of Object.entries(va)) {
-			const lo = Math.min(axis.min, axis.max)
-			const hi = Math.max(axis.min, axis.max)
+	if (!axisMap) return { descriptors: '', skipped: [] };
+
+	try {
+		for (const [tag, axis] of Object.entries(axisMap)) {
+			const lo = Math.min(axis.min, axis.max);
+			const hi = Math.max(axis.min, axis.max);
 
 			// Skip degenerate axes — no actual range
-			if (lo === hi) { skipped.push(tag); continue }
+			if (lo === hi) { skipped.push(tag); continue; }
 
 			if (tag === 'wght') {
-				cssAxes['font-weight'] = `${lo} ${hi}`
+				cssAxes['font-weight'] = `${lo} ${hi}`;
 			} else if (tag === 'wdth') {
-				cssAxes['font-stretch'] = `${lo}% ${hi}%`
+				// Clamp to CSS font-stretch range (50-200%)
+				cssAxes['font-stretch'] = `${Math.max(50, lo)}% ${Math.min(200, hi)}%`;
 			} else if (tag === 'slnt') {
-				// slnt: ascending order required by CSS Fonts Level 4
-				cssAxes['font-style'] = `oblique ${lo}deg ${hi}deg`
+				// OpenType slnt is counter-clockwise positive; CSS oblique is clockwise positive
+				// Negate values and ensure ascending order
+				cssAxes['font-style'] = `oblique ${-hi}deg ${-lo}deg`;
 			} else if (tag === 'ital' && !cssAxes['font-style']) {
-				// ital: only emit if font actually has italic range; slnt takes priority
-				if (hi > 0) cssAxes['font-style'] = 'italic'
-				else skipped.push(tag)
+				// ital: only note if font has italic range; slnt takes priority
+				if (hi > 0) cssAxes['font-style'] = 'italic';
+				else skipped.push(tag);
 			} else {
 				// opsz, GRAD, XTRA, XHGT and all other custom axes have no CSS @font-face descriptor
-				skipped.push(tag)
+				skipped.push(tag);
 			}
 		}
 	} catch (_) {
 		// axes unreadable — no descriptors
 	}
-	const descriptors = Object.entries(cssAxes).map(([k, v]) => `${k}:${v}`).join(';') + (Object.keys(cssAxes).length ? ';' : '')
-	return { descriptors, skipped }
+
+	const descriptors = Object.entries(cssAxes).map(([k, v]) => `${k}:${v}`).join(';') + (Object.keys(cssAxes).length ? ';' : '');
+	return { descriptors, skipped };
 }
 
 // Cross-platform fallback font stacks by category.
-// Multiple local() sources ensure the first available system font is used.
-// Liberation Sans covers Linux; Roboto covers Android; Georgia is universal for serifs.
 const FALLBACK_STACKS = {
 	'sans-serif': "local('Arial'), local('Helvetica Neue'), local('Roboto'), local('Liberation Sans')",
 	'serif':      "local('Georgia'), local('Times New Roman'), local('Times')",
 	'monospace':  "local('Courier New'), local('Courier'), local('Menlo'), local('Monaco')",
-	// Display and script fonts have no universally suitable system fallback; default to sans-serif
 	'default':    "local('Arial'), local('Helvetica Neue'), local('Roboto'), local('Liberation Sans')",
 };
 
 // OS/2 sFamilyClass high byte → FALLBACK_STACKS key.
-// Classes 1–5,7 = serif variants; 8 = sans-serif; 9 = ornamental; 10 = script; 12 = symbolic.
 const FAMILY_CLASS_MAP = {
 	1: 'serif', 2: 'serif', 3: 'serif', 4: 'serif', 5: 'serif', 7: 'serif',
 	8: 'sans-serif',
 };
 
-// Darden Studio fonts have sFamilyClass: 0 (No Classification) in their OS/2 table,
+// Darden Studio fonts have sFamilyClass: 0 in their OS/2 table,
 // so name-based matching is used as the primary signal.
 const SERIF_NAMES  = /jubilat|corundum|dapifer|birra|daith/i;
 const SANS_NAMES   = /halyard|gamay|omnes|kit/i;
 
-/** Detects font category from the font name first, then OS/2 sFamilyClass as fallback */
+/**
+ * Detects font category from the font name first, then OS/2 sFamilyClass as fallback.
+ * @param {object} font - lib-font Font instance
+ * @param {string} fontName
+ * @returns {string}
+ */
 function detectFontCategory(font, fontName) {
 	if (fontName && SERIF_NAMES.test(fontName)) return 'serif';
 	if (fontName && SANS_NAMES.test(fontName)) return 'sans-serif';
 	try {
-		// fontkit v2: font['OS/2'] exposes the parsed OS/2 table directly
-		const familyClass = font['OS/2']?.sFamilyClass ?? 0;
+		const familyClass = getFamilyClass(font);
 		const highByte = (familyClass >> 8) & 0xFF;
 		return FAMILY_CLASS_MAP[highByte] ?? 'default';
 	} catch {
@@ -103,17 +99,23 @@ function detectFontCategory(font, fontName) {
 	}
 }
 
-/** Extracts metric override percentages and detects the category fallback stack from a font ArrayBuffer */
-function calcFallbackData(arrayBuffer, fontName) {
+/**
+ * Extracts metric override percentages and detects the category fallback stack.
+ * Accepts a pre-parsed font to avoid double-parsing.
+ * @param {object} font - lib-font Font instance
+ * @param {string} fontName
+ * @returns {{ fallbackSrc: string, ascentOverride: string, descentOverride: string, lineGapOverride: string }}
+ */
+function calcFallbackData(font, fontName) {
 	try {
-		let font = fontkit.create(Buffer.from(arrayBuffer));
-		let upm = font.unitsPerEm;
-		let category = detectFontCategory(font, fontName);
+		const metrics = getFontMetrics(font);
+		const upm = metrics.unitsPerEm;
+		const category = detectFontCategory(font, fontName);
 		return {
 			fallbackSrc: FALLBACK_STACKS[category],
-			ascentOverride: `${(font.ascent / upm * 100).toFixed(2)}%`,
-			descentOverride: `${(Math.abs(font.descent) / upm * 100).toFixed(2)}%`,
-			lineGapOverride: `${(font.lineGap / upm * 100).toFixed(2)}%`,
+			ascentOverride: `${(metrics.ascender / upm * 100).toFixed(2)}%`,
+			descentOverride: `${(Math.abs(metrics.descender) / upm * 100).toFixed(2)}%`,
+			lineGapOverride: `${(metrics.lineGap / upm * 100).toFixed(2)}%`,
 		};
 	} catch (err) {
 		console.error('Failed to extract fallback font data:', err);
@@ -138,35 +140,38 @@ export default async function generateCssFile({
 	client,
 }) {
 	try {
-		// Read the file once; reuse the same buffer for base64 encoding and fontkit analysis
+		// Read the file once; reuse the same buffer for base64 and font analysis
 		let arrayBuffer = await woff2File.arrayBuffer();
 		let b64 = _arrayBufferToBase64(arrayBuffer);
-		let fontkitFont = fontkit.create(Buffer.from(arrayBuffer));
-		let { fallbackSrc, ascentOverride, descentOverride, lineGapOverride } = calcFallbackData(arrayBuffer, fontName);
+
+		// Parse once — share result between axis descriptors and fallback metrics
+		let font = await parseFont(arrayBuffer, fileName + '.woff2');
+		let { fallbackSrc, ascentOverride, descentOverride, lineGapOverride } = calcFallbackData(font, fontName);
+
+		// Escape font name for CSS injection prevention
+		const safeFontName = escapeCssFontName(fontName);
 
 		let cssString;
 		if (variableFont) {
-			let { descriptors, skipped } = buildVFDescriptors(fontkitFont);
-			// Axes with no CSS @font-face descriptor (opsz needs font-optical-sizing:auto on elements;
-			// custom axes like GRAD require CSS @font-face syntax not yet standardised).
+			const axisMap = getVariationAxes(font);
+			let { descriptors, skipped } = buildVFDescriptors(axisMap);
 			let skipComment = skipped.length
 				? `/* axes present but have no @font-face descriptor: ${skipped.join(', ')}` +
 				  (skipped.includes('opsz') ? ' — add font-optical-sizing:auto to your element CSS' : '') +
 				  ' */'
-				: ''
-			cssString = `${skipComment}@font-face{font-family:'${fontName}';src:url(data:application/font-woff2;charset=utf-8;base64,${b64})format('woff2-variations');${descriptors}font-display:swap;}`;
+				: '';
+			cssString = `${skipComment}@font-face{font-family:'${safeFontName}';src:url(data:application/font-woff2;charset=utf-8;base64,${b64})format('woff2');${descriptors}font-display:swap;}`;
 		} else {
 			let fontStyle = style === 'Italic' ? 'italic' : 'normal';
-			cssString = `@font-face{font-family:'${fontName}';src:url(data:application/font-woff2;charset=utf-8;base64,${b64})format('woff2');font-weight:${weight};font-style:${fontStyle};font-display:swap;}`;
+			cssString = `@font-face{font-family:'${safeFontName}';src:url(data:application/font-woff2;charset=utf-8;base64,${b64})format('woff2');font-weight:${weight};font-style:${fontStyle};font-display:swap;}`;
 		}
 
-		// Fallback @font-face: tunes a category-appropriate system font to match the custom font's
-		// line metrics (ascent/descent/lineGap), reducing layout shift while the custom font loads.
-		// Customers who reference fontSrc in their own projects get this fallback automatically.
-		let fallbackCssString = `@font-face{font-family:'${fontName} Fallback';src:${fallbackSrc};ascent-override:${ascentOverride};descent-override:${descentOverride};line-gap-override:${lineGapOverride};}`;
+		// Fallback @font-face: tunes a system font to match the custom font's metrics for CLS reduction
+		let fallbackCssString = `@font-face{font-family:'${safeFontName} Fallback';src:${fallbackSrc};ascent-override:${ascentOverride};descent-override:${descentOverride};line-gap-override:${lineGapOverride};}`;
 
-		let uploadBuffer = Buffer.from(cssString + fallbackCssString, 'utf-8');
-		let doc = await client.assets.upload('file', uploadBuffer, { filename: fileName + '.css' });
+		// Upload as a text buffer (no Buffer polyfill needed — TextEncoder is native)
+		const cssBytes = new TextEncoder().encode(cssString + fallbackCssString);
+		let doc = await client.assets.upload('file', new Blob([cssBytes]), { filename: fileName + '.css' });
 
 		let newFileInput = language == null ?
 			{
@@ -175,9 +180,9 @@ export default async function generateCssFile({
 					_type: 'file',
 					asset: {
 						_type: 'reference',
-						_ref: doc._id
-					}
-				}
+						_ref: doc._id,
+					},
+				},
 			}
 			:
 			{
@@ -188,18 +193,15 @@ export default async function generateCssFile({
 						_type: 'file',
 						asset: {
 							_type: 'reference',
-							_ref: doc._id
-						}
-					}
-				}
-			}
+							_ref: doc._id,
+						},
+					},
+				},
+			};
 
 		return newFileInput;
-
-	}
-	catch (err) {
+	} catch (err) {
 		console.error(err);
 		throw err;
 	}
-
 }