npm - font-switcher - Versions diffs - 0.1.0 - Mend

font-switcher 0.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (20) hide show

package/dist/index.d.ts ADDED Viewed

@@ -0,0 +1,82 @@
+interface FontFeature {
+    tag: string;
+    label: string;
+    enabled: boolean;
+}
+interface FontMetrics {
+    capHeight: number;
+    ascent: number;
+    descent: number;
+    lineGap: number;
+    unitsPerEm: number;
+    xHeight: number;
+}
+interface FontConfig {
+    key: string;
+    label: string;
+    /** Value for CSS font-family — can be a var() ref or a literal stack */
+    cssFamily: string;
+    /** Raw font metrics. If @capsizecss/core is installed, trims are computed from these. */
+    metrics?: FontMetrics;
+    /** OpenType feature settings. If omitted, auto-detected from font file by the Vite plugin. */
+    features?: FontFeature[];
+}
+interface FontSwitcherConfig {
+    fonts: FontConfig[];
+    defaultFont: string;
+    /** Path to CSS file scanned for @font-face and --font-* declarations. Default: 'src/styles/index.css' */
+    cssFile?: string;
+    /** localStorage key for the active font. Default: 'font-switcher-active' */
+    storageKey?: string;
+    /** URL param that reveals the panel. Default: 'fonts' */
+    revealParam?: string;
+    /** Keyboard shortcut that toggles the panel. Default: 'ctrl+shift+f' */
+    revealShortcut?: string;
+    /** CSS selector for capsize elements. Set false to disable trim injection. Default: '.capsize' */
+    capsizeSelector?: string | false;
+    /** Font size in px used for capsize trim computation. Default: 16 */
+    fontSize?: number;
+    /** When set: locks the font, disables all switcher output. Set this when client decides, then remove the package. */
+    finalFont?: string;
+}
+interface DetectedFont {
+    family: string;
+    source: '@font-face' | '--font-var';
+    varName?: string;
+    /** First local src URL from the @font-face src: declaration. */
+    fontFileSrc?: string;
+}
+declare function defineConfig(config: FontSwitcherConfig): FontSwitcherConfig;
+declare function scanFontsFromCSS(cssFile: string): DetectedFont[];
+declare function validateFonts(fonts: FontConfig[], detected: DetectedFont[]): void;
+declare function generateFontCSS(config: FontSwitcherConfig): Promise<string>;
+/**
+ * Returns a small inline script string that applies the stored font before first paint,
+ * preventing a flash of the default font on reload.
+ *
+ * Inject into <head> before other content:
+ *   <script dangerouslySetInnerHTML={{ __html: getFOUCScript(config) }} />
+ */
+declare function getFOUCScript(config: FontSwitcherConfig): string;
+/**
+ * Computes capsize trim values for a font at a given size.
+ * Returns null if @capsizecss/core is not installed or computation fails.
+ */
+declare function computeTrims(metrics: FontMetrics, fontSize: number): Promise<{
+    capTrim: string;
+    baseTrim: string;
+} | null>;
+/** Synchronous check — only reliable in CJS/Node environments with require available. */
+declare function isCapsizeAvailable(): boolean;
+declare function detectFeaturesFromFile(fontFilePath: string): Promise<FontFeature[]>;
+declare const FEATURE_LABELS: Record<string, string>;
+declare function featuresFromTags(tags: string[]): FontFeature[];
+export { type DetectedFont, FEATURE_LABELS, type FontConfig, type FontFeature, type FontMetrics, type FontSwitcherConfig, computeTrims, defineConfig, detectFeaturesFromFile, featuresFromTags, generateFontCSS, getFOUCScript, isCapsizeAvailable, scanFontsFromCSS, validateFonts };

package/dist/index.js ADDED Viewed

@@ -0,0 +1,282 @@
+var __require = /* @__PURE__ */ ((x) => typeof require !== "undefined" ? require : typeof Proxy !== "undefined" ? new Proxy(x, {
+  get: (a, b) => (typeof require !== "undefined" ? require : a)[b]
+}) : x)(function(x) {
+  if (typeof require !== "undefined") return require.apply(this, arguments);
+  throw Error('Dynamic require of "' + x + '" is not supported');
+});
+// src/define-config.ts
+function defineConfig(config) {
+  return config;
+}
+// src/scanner.ts
+import fs from "fs";
+import path from "path";
+var SYSTEM_FONTS = /* @__PURE__ */ new Set([
+  "helvetica",
+  "arial",
+  "georgia",
+  "times",
+  "courier",
+  "verdana",
+  "trebuchet",
+  "impact",
+  "tahoma",
+  "sans-serif",
+  "serif",
+  "monospace",
+  "system-ui"
+]);
+function scanFontsFromCSS(cssFile) {
+  const resolved = path.resolve(cssFile);
+  if (!fs.existsSync(resolved)) {
+    console.warn(`[font-switcher] cssFile not found: ${resolved}`);
+    return [];
+  }
+  const css = fs.readFileSync(resolved, "utf8");
+  const found = [];
+  const seen = /* @__PURE__ */ new Set();
+  const faceBlockRe = /@font-face\s*\{([^}]+)\}/g;
+  for (const m of css.matchAll(faceBlockRe)) {
+    const block = m[1];
+    const familyM = /font-family\s*:\s*['"]?([^'";,\n]+)['"]?/.exec(block);
+    if (!familyM) continue;
+    const family = familyM[1].trim().replace(/['"]/g, "");
+    const key = `face:${family.toLowerCase()}`;
+    if (seen.has(key)) continue;
+    seen.add(key);
+    const srcDecl = /src\s*:[^;}]*/.exec(block)?.[0] ?? "";
+    const urls = [...srcDecl.matchAll(/url\(['"]?([^'")\s]+)['"]?\)/g)].map((u) => u[1].trim());
+    const parseable = urls.find((u) => /\.(woff|ttf|otf)(\?|#|$)/i.test(u));
+    const fontFileSrc = parseable ?? urls[0];
+    found.push({ family, source: "@font-face", fontFileSrc });
+  }
+  const varRe = /(--font-[\w-]+)\s*:\s*['"]?([^'",;\n]+)['"]?/g;
+  const lengthLike = /^\d|^(normal|bold|italic|oblique|inherit|initial|unset)$/i;
+  for (const m of css.matchAll(varRe)) {
+    const varName = m[1].trim();
+    const family = m[2].trim().replace(/['"]/g, "");
+    if (lengthLike.test(family)) continue;
+    const key = `var:${varName}`;
+    if (!seen.has(key)) {
+      seen.add(key);
+      found.push({ family, source: "--font-var", varName });
+    }
+  }
+  return found;
+}
+function validateFonts(fonts, detected) {
+  const faceNames = new Set(
+    detected.filter((d) => d.source === "@font-face").map((d) => d.family.toLowerCase())
+  );
+  const varNames = new Set(
+    detected.filter((d) => d.source === "--font-var").map((d) => d.varName)
+  );
+  for (const font of fonts) {
+    if (font.cssFamily.includes("var(")) {
+      const m = font.cssFamily.match(/var\((--font-[\w-]+)/);
+      if (m && !varNames.has(m[1])) {
+        console.warn(
+          `[font-switcher] "${font.key}" references "${m[1]}" \u2014 not found in CSS file`
+        );
+      }
+    } else {
+      const first = font.cssFamily.split(",")[0].trim().replace(/['"]/g, "").toLowerCase();
+      if (!SYSTEM_FONTS.has(first) && !faceNames.has(first)) {
+        console.warn(
+          `[font-switcher] "${font.key}" family "${first}" not found in any @font-face declaration`
+        );
+      }
+    }
+  }
+}
+// src/capsize.ts
+async function computeTrims(metrics, fontSize) {
+  try {
+    const { createStyleObject } = await import("@capsizecss/core");
+    const style = createStyleObject({ fontSize, fontMetrics: metrics });
+    const capTrim = style["::before"].marginBottom;
+    const baseTrim = style["::after"].marginTop;
+    return { capTrim, baseTrim };
+  } catch {
+    return null;
+  }
+}
+function isCapsizeAvailable() {
+  try {
+    __require.resolve("@capsizecss/core");
+    return true;
+  } catch {
+    return false;
+  }
+}
+// src/css-gen.ts
+async function generateFontCSS(config) {
+  if (config.finalFont) return "";
+  const { fontSize = 16, capsizeSelector = ".capsize", fonts } = config;
+  const lines = [];
+  for (const font of fonts) {
+    lines.push(`html[data-font="${font.key}"] { --font-active: ${font.cssFamily}; }`);
+    if (capsizeSelector !== false && font.metrics) {
+      const trims = await computeTrims(font.metrics, fontSize);
+      if (trims) {
+        lines.push(
+          `html[data-font="${font.key}"] ${capsizeSelector} { --cap-trim: ${trims.capTrim}; --base-trim: ${trims.baseTrim}; }`
+        );
+      }
+    }
+  }
+  return lines.join("\n");
+}
+// src/script.ts
+function getFOUCScript(config) {
+  if (config.finalFont) return "";
+  const storageKey = config.storageKey ?? "font-switcher-active";
+  const validKeys = config.fonts.map((f) => f.key);
+  const featureDefaults = {};
+  for (const f of config.fonts) {
+    if (f.features?.length) {
+      featureDefaults[f.key] = Object.fromEntries(f.features.map((ft) => [ft.tag, ft.enabled]));
+    }
+  }
+  return `(function(){try{
+var SK=${JSON.stringify(storageKey)},VK=${JSON.stringify(validKeys)},FD=${JSON.stringify(featureDefaults)},DF=${JSON.stringify(config.defaultFont)};
+var k=localStorage.getItem(SK),af=(k&&VK.indexOf(k)!==-1)?k:DF;
+if(k&&VK.indexOf(k)!==-1){document.documentElement.dataset.font=k;}
+var tags=Object.assign({},FD[af]||{}),sf=localStorage.getItem(SK+'-features');
+if(sf){var pf=JSON.parse(sf);if(pf&&pf[af])Object.assign(tags,pf[af]);}
+var ks=Object.keys(tags),fs=ks.length?ks.map(function(t){return '"'+t+'" '+(tags[t]?1:0);}).join(', '):'normal';
+var rd={textRendering:'auto',webkitSmoothing:'auto',mozSmoothing:'auto'},sr=localStorage.getItem(SK+'-render');
+if(sr){var pr=JSON.parse(sr);for(var rk in pr){rd[rk]=pr[rk];}}
+var css='html {\\n  font-feature-settings: '+fs+';\\n  text-rendering: '+rd.textRendering+';\\n  -webkit-font-smoothing: '+rd.webkitSmoothing+';\\n  -moz-osx-font-smoothing: '+rd.mozSmoothing+';\\n}';
+var el=document.getElementById('font-switcher-rt');
+if(!el){el=document.createElement('style');el.id='font-switcher-rt';document.head.appendChild(el);}
+el.textContent=css;
+}catch(e){}})();`;
+}
+// src/font-features.ts
+import { existsSync } from "fs";
+// src/feature-labels.ts
+var BROWSER_DEFAULT_ON = /* @__PURE__ */ new Set(["liga", "clig", "calt", "kern", "locl", "mark", "mkmk"]);
+var SKIP_TAGS = /* @__PURE__ */ new Set([
+  "DFLT",
+  "dflt",
+  "locl",
+  "mark",
+  "mkmk",
+  "dist",
+  "rlig",
+  "curs",
+  "abvm",
+  "blwm",
+  "abvs",
+  "blws",
+  "pres",
+  "psts",
+  "haln",
+  "half",
+  "akhn",
+  "rphf",
+  "blwf",
+  "abvf",
+  "pref",
+  "rkrf",
+  "vatu",
+  "cjct",
+  "nukt",
+  "isol",
+  "init",
+  "medi",
+  "fina",
+  "med2",
+  "fin2",
+  "fin3",
+  "vert",
+  "vrt2",
+  "cfar"
+]);
+var FEATURE_LABELS = {
+  liga: "Standard Ligatures",
+  clig: "Contextual Ligatures",
+  dlig: "Discretionary Ligatures",
+  hlig: "Historical Ligatures",
+  calt: "Contextual Alternates",
+  kern: "Kerning",
+  swsh: "Swash",
+  case: "Case-Sensitive Forms",
+  onum: "Oldstyle Figures",
+  tnum: "Tabular Figures",
+  pnum: "Proportional Figures",
+  lnum: "Lining Figures",
+  frac: "Fractions",
+  afrc: "Alternative Fractions",
+  sups: "Superscript",
+  subs: "Subscript",
+  smcp: "Small Capitals",
+  c2sc: "Caps to Small Caps",
+  pcap: "Petite Capitals",
+  cpsp: "Capital Spacing",
+  zero: "Slashed Zero",
+  ordn: "Ordinals",
+  hist: "Historical Forms",
+  nalt: "Alternate Annotation",
+  salt: "Stylistic Alternates",
+  titl: "Titling",
+  ...Object.fromEntries(
+    Array.from({ length: 20 }, (_, i) => {
+      const n = String(i + 1).padStart(2, "0");
+      return [`ss${n}`, `Stylistic Set ${i + 1}`];
+    })
+  ),
+  ...Object.fromEntries(
+    Array.from({ length: 6 }, (_, i) => {
+      const n = String(i + 1).padStart(2, "0");
+      return [`cv${n}`, `Character Variant ${i + 1}`];
+    })
+  )
+};
+function featuresFromTags(tags) {
+  return tags.filter((tag) => !SKIP_TAGS.has(tag)).map((tag) => ({
+    tag,
+    label: FEATURE_LABELS[tag] ?? tag,
+    enabled: BROWSER_DEFAULT_ON.has(tag)
+  }));
+}
+// src/font-features.ts
+async function detectFeaturesFromFile(fontFilePath) {
+  if (!existsSync(fontFilePath)) return [];
+  try {
+    const mod = await import("opentype.js");
+    const loadSync = mod.loadSync ?? mod.default?.loadSync;
+    if (!loadSync) return [];
+    const font = loadSync(fontFilePath);
+    const tags = /* @__PURE__ */ new Set();
+    for (const table of [font.tables.gsub, font.tables.gpos]) {
+      for (const rec of table?.featureList?.featureRecords ?? []) {
+        if (rec?.featureTag) tags.add(rec.featureTag.trim());
+      }
+    }
+    return featuresFromTags([...tags]);
+  } catch {
+    return [];
+  }
+}
+export {
+  FEATURE_LABELS,
+  computeTrims,
+  defineConfig,
+  detectFeaturesFromFile,
+  featuresFromTags,
+  generateFontCSS,
+  getFOUCScript,
+  isCapsizeAvailable,
+  scanFontsFromCSS,
+  validateFonts
+};