font-switcher 0.1.0

package/dist/vite-plugin.cjs

@@ -0,0 +1,377 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// vite-plugin.ts
+var vite_plugin_exports = {};
+__export(vite_plugin_exports, {
+  fontSwitcherPlugin: () => fontSwitcherPlugin
+});
+module.exports = __toCommonJS(vite_plugin_exports);
+var import_node_path2 = __toESM(require("path"), 1);
+
+// src/scanner.ts
+var import_node_fs = __toESM(require("fs"), 1);
+var import_node_path = __toESM(require("path"), 1);
+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 = import_node_path.default.resolve(cssFile);
+  if (!import_node_fs.default.existsSync(resolved)) {
+    console.warn(`[font-switcher] cssFile not found: ${resolved}`);
+    return [];
+  }
+  const css = import_node_fs.default.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;
+  }
+}
+
+// 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/font-features.ts
+var import_node_fs2 = require("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 (!(0, import_node_fs2.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 [];
+  }
+}
+
+// vite-plugin.ts
+var VIRTUAL_ID = "virtual:font-switcher/styles";
+var RESOLVED_ID = "\0virtual:font-switcher/styles";
+var PROD_WARNING = "\n[font-switcher] Overlay is included in this production build.\n  Set finalFont in your config when the client picks a font, then remove the package.\n";
+async function detectAllFeatures(config, root) {
+  const cssFile = import_node_path2.default.resolve(root, config.cssFile ?? "src/styles/index.css");
+  const detected = scanFontsFromCSS(cssFile);
+  const fontFaceMap = /* @__PURE__ */ new Map();
+  const varMap = /* @__PURE__ */ new Map();
+  for (const d of detected) {
+    if (d.source === "@font-face" && d.fontFileSrc) {
+      fontFaceMap.set(d.family.toLowerCase(), d.fontFileSrc);
+    }
+    if (d.source === "--font-var" && d.varName) {
+      varMap.set(d.varName, d.family);
+    }
+  }
+  const result = {};
+  for (const font of config.fonts) {
+    if (font.features?.length) {
+      result[font.key] = font.features;
+      continue;
+    }
+    let familyName;
+    if (font.cssFamily.includes("var(")) {
+      const m = font.cssFamily.match(/var\((--font-[\w-]+)/);
+      if (m) {
+        const resolved2 = varMap.get(m[1]);
+        familyName = resolved2?.split(",")[0].trim().replace(/['"]/g, "");
+      }
+    } else {
+      familyName = font.cssFamily.split(",")[0].trim().replace(/['"]/g, "");
+    }
+    if (!familyName) continue;
+    const fontFileSrc = fontFaceMap.get(familyName.toLowerCase());
+    if (!fontFileSrc || fontFileSrc.startsWith("http")) continue;
+    const resolved = import_node_path2.default.resolve(root, fontFileSrc.startsWith("/") ? fontFileSrc.slice(1) : fontFileSrc);
+    const features = await detectFeaturesFromFile(resolved);
+    if (features.length) result[font.key] = features;
+  }
+  return result;
+}
+function fontSwitcherPlugin(config) {
+  let cssCache = null;
+  let detectedFeatures = null;
+  let root = process.cwd();
+  async function buildCSS() {
+    if (config.finalFont) return "";
+    const cssFile = import_node_path2.default.resolve(root, config.cssFile ?? "src/styles/index.css");
+    const detected = scanFontsFromCSS(cssFile);
+    validateFonts(config.fonts, detected);
+    return generateFontCSS(config);
+  }
+  async function getDetectedFeatures() {
+    if (detectedFeatures === null) {
+      detectedFeatures = config.finalFont ? {} : await detectAllFeatures(config, root);
+    }
+    return detectedFeatures;
+  }
+  return {
+    name: "font-switcher",
+    configResolved(resolvedConfig) {
+      root = resolvedConfig.root;
+    },
+    resolveId(id) {
+      if (id === VIRTUAL_ID) return RESOLVED_ID;
+    },
+    async load(id) {
+      if (id !== RESOLVED_ID) return;
+      if (cssCache === null) cssCache = await buildCSS();
+      const features = await getDetectedFeatures();
+      const hasFeatures = Object.keys(features).length > 0;
+      const hasCSS = !!cssCache;
+      if (!hasCSS && !hasFeatures) return 'export default ""';
+      return `
+const css = ${JSON.stringify(cssCache ?? "")};
+const features = ${JSON.stringify(features)};
+if (typeof window !== 'undefined') {
+  window.__fontSwitcherFeatures = features;
+}
+if (typeof document !== 'undefined' && css) {
+  const el = document.createElement('style');
+  el.setAttribute('data-font-switcher', '');
+  el.textContent = css;
+  document.head.appendChild(el);
+}
+export default css;
+`;
+    },
+    async buildStart() {
+      cssCache = await buildCSS();
+      detectedFeatures = config.finalFont ? {} : await detectAllFeatures(config, root);
+    },
+    generateBundle() {
+      if (!config.finalFont) {
+        this.warn(PROD_WARNING);
+      }
+    },
+    configureServer(server) {
+      const cssFile = import_node_path2.default.resolve(root, config.cssFile ?? "src/styles/index.css");
+      server.watcher.add(cssFile);
+      server.watcher.on("change", async (file) => {
+        if (import_node_path2.default.resolve(file) !== cssFile) return;
+        cssCache = null;
+        detectedFeatures = null;
+        const mod = server.moduleGraph.getModuleById(RESOLVED_ID);
+        if (mod) server.moduleGraph.invalidateModule(mod);
+        server.ws.send({ type: "full-reload" });
+      });
+    }
+  };
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  fontSwitcherPlugin
+});

package/dist/vite-plugin.d.cts

@@ -0,0 +1,47 @@
+import { Plugin } from 'vite';
+
+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;
+}
+
+declare function fontSwitcherPlugin(config: FontSwitcherConfig): Plugin;
+
+export { type FontSwitcherConfig, fontSwitcherPlugin };

package/dist/vite-plugin.d.ts

@@ -0,0 +1,47 @@
+import { Plugin } from 'vite';
+
+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;
+}
+
+declare function fontSwitcherPlugin(config: FontSwitcherConfig): Plugin;
+
+export { type FontSwitcherConfig, fontSwitcherPlugin };