font-switcher 0.1.0

package/dist/react/index.js

@@ -0,0 +1,405 @@
+"use client";
+
+// src/component.tsx
+import { useState, useEffect, useCallback } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var PANEL_STORAGE_KEY = "font-switcher-ui";
+var DEFAULT_RENDER = {
+  textRendering: "auto",
+  webkitSmoothing: "auto",
+  mozSmoothing: "auto"
+};
+var POSITIONS = {
+  "bottom-right": { bottom: "16px", right: "16px" },
+  "bottom-left": { bottom: "16px", left: "16px" },
+  "top-right": { top: "16px", right: "16px" },
+  "top-left": { top: "16px", left: "16px" }
+};
+function buildFeatureMeta(fonts, detected) {
+  const result = {};
+  for (const font of fonts) {
+    const fromConfig = font.features ?? [];
+    const fromDetected = detected[font.key] ?? [];
+    const configTags = new Set(fromConfig.map((f) => f.tag));
+    const merged = [...fromConfig, ...fromDetected.filter((f) => !configTags.has(f.tag))];
+    if (merged.length) result[font.key] = merged;
+  }
+  return result;
+}
+function applyRuntimeStyles(activeKey, featureEnabled, render) {
+  let el = document.getElementById("font-switcher-rt");
+  if (!el) {
+    el = document.createElement("style");
+    el.id = "font-switcher-rt";
+    document.head.appendChild(el);
+  }
+  const fontTags = featureEnabled[activeKey];
+  const featureStr = fontTags && Object.keys(fontTags).length ? Object.entries(fontTags).map(([tag, on]) => `"${tag}" ${on ? 1 : 0}`).join(", ") : "normal";
+  el.textContent = [
+    "html {",
+    `  font-feature-settings: ${featureStr};`,
+    `  text-rendering: ${render.textRendering};`,
+    `  -webkit-font-smoothing: ${render.webkitSmoothing};`,
+    `  -moz-osx-font-smoothing: ${render.mozSmoothing};`,
+    "}"
+  ].join("\n");
+}
+function FontSwitcher({ config, position = "bottom-right" }) {
+  const {
+    fonts,
+    defaultFont,
+    storageKey = "font-switcher-active",
+    revealParam = "fonts",
+    revealShortcut = "ctrl+shift+f",
+    finalFont
+  } = config;
+  const [visible, setVisible] = useState(false);
+  const [active, setActive] = useState(defaultFont);
+  const [featureMeta, setFeatureMeta] = useState({});
+  const [featureEnabled, setFeatureEnabled] = useState({});
+  const [renderSettings, setRenderSettings] = useState(DEFAULT_RENDER);
+  useEffect(() => {
+    if (finalFont) return;
+    try {
+      const stored = localStorage.getItem(storageKey);
+      if (stored && fonts.some((f) => f.key === stored)) setActive(stored);
+    } catch {
+    }
+    const params = new URLSearchParams(window.location.search);
+    if (params.has(revealParam)) {
+      setVisible(true);
+      try {
+        localStorage.setItem(PANEL_STORAGE_KEY, "on");
+      } catch {
+      }
+    } else {
+      try {
+        if (localStorage.getItem(PANEL_STORAGE_KEY) === "on") setVisible(true);
+      } catch {
+      }
+    }
+    const parts = revealShortcut.toLowerCase().split("+");
+    const targetKey = parts[parts.length - 1];
+    const mods = new Set(parts.slice(0, -1));
+    const onKey = (e) => {
+      if (e.key.toLowerCase() !== targetKey) return;
+      if (mods.has("ctrl") !== e.ctrlKey) return;
+      if (mods.has("shift") !== e.shiftKey) return;
+      if (mods.has("alt") !== e.altKey) return;
+      if (mods.has("meta") !== e.metaKey) return;
+      e.preventDefault();
+      setVisible((v) => {
+        const next = !v;
+        try {
+          localStorage.setItem(PANEL_STORAGE_KEY, next ? "on" : "off");
+        } catch {
+        }
+        return next;
+      });
+    };
+    window.addEventListener("keydown", onKey);
+    const detected = window.__fontSwitcherFeatures ?? {};
+    const meta = buildFeatureMeta(fonts, detected);
+    setFeatureMeta(meta);
+    const defaults = Object.fromEntries(
+      Object.entries(meta).map(([key, features]) => [
+        key,
+        Object.fromEntries(features.map((f) => [f.tag, f.enabled]))
+      ])
+    );
+    try {
+      const stored = localStorage.getItem(`${storageKey}-features`);
+      if (stored) {
+        const parsed = JSON.parse(stored);
+        for (const [fontKey, tags] of Object.entries(parsed)) {
+          if (defaults[fontKey]) Object.assign(defaults[fontKey], tags);
+        }
+      }
+    } catch {
+    }
+    setFeatureEnabled(defaults);
+    try {
+      const stored = localStorage.getItem(`${storageKey}-render`);
+      if (stored) setRenderSettings((r) => ({ ...r, ...JSON.parse(stored) }));
+    } catch {
+    }
+    return () => window.removeEventListener("keydown", onKey);
+  }, []);
+  useEffect(() => {
+    if (finalFont) return;
+    applyRuntimeStyles(active, featureEnabled, renderSettings);
+  }, [active, featureEnabled, renderSettings, finalFont]);
+  const switchFont = useCallback(
+    (key) => {
+      document.documentElement.dataset.font = key;
+      try {
+        localStorage.setItem(storageKey, key);
+      } catch {
+      }
+      setActive(key);
+    },
+    [storageKey]
+  );
+  const reset = useCallback(() => {
+    delete document.documentElement.dataset.font;
+    try {
+      localStorage.removeItem(storageKey);
+    } catch {
+    }
+    setActive(defaultFont);
+  }, [defaultFont, storageKey]);
+  const toggleFeature = useCallback(
+    (fontKey, tag) => {
+      setFeatureEnabled((prev) => {
+        const next = {
+          ...prev,
+          [fontKey]: { ...prev[fontKey], [tag]: !prev[fontKey]?.[tag] }
+        };
+        try {
+          localStorage.setItem(`${storageKey}-features`, JSON.stringify(next));
+        } catch {
+        }
+        return next;
+      });
+    },
+    [storageKey]
+  );
+  const updateRender = useCallback(
+    (key, value) => {
+      setRenderSettings((prev) => {
+        const next = { ...prev, [key]: value };
+        try {
+          localStorage.setItem(`${storageKey}-render`, JSON.stringify(next));
+        } catch {
+        }
+        return next;
+      });
+    },
+    [storageKey]
+  );
+  if (finalFont || !visible) return null;
+  const activeFeatures = featureMeta[active] ?? [];
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      style: {
+        position: "fixed",
+        zIndex: 9999,
+        background: "#fff",
+        border: "1px solid #e0e0e0",
+        padding: "6px",
+        minWidth: "200px",
+        maxWidth: "280px",
+        maxHeight: "80vh",
+        overflowY: "auto",
+        boxShadow: "0 2px 8px rgba(0,0,0,0.12)",
+        fontFamily: "system-ui, sans-serif",
+        ...POSITIONS[position]
+      },
+      children: [
+        fonts.map((font) => /* @__PURE__ */ jsxs(
+          "button",
+          {
+            onClick: () => switchFont(font.key),
+            style: {
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "space-between",
+              width: "100%",
+              padding: "5px 8px",
+              border: "none",
+              background: active === font.key ? "#f5f5f5" : "transparent",
+              cursor: "pointer",
+              fontFamily: font.cssFamily,
+              fontSize: "13px",
+              letterSpacing: 0,
+              textAlign: "left"
+            },
+            children: [
+              /* @__PURE__ */ jsx("span", { children: font.label }),
+              active === font.key && /* @__PURE__ */ jsx("span", { style: { fontSize: "8px", color: "#999", marginLeft: "8px" }, children: "\u25CF" })
+            ]
+          },
+          font.key
+        )),
+        /* @__PURE__ */ jsx("div", { style: { borderTop: "1px solid #e8e8e8", marginTop: "4px", paddingTop: "4px" }, children: /* @__PURE__ */ jsx(
+          "button",
+          {
+            onClick: reset,
+            style: {
+              display: "block",
+              width: "100%",
+              padding: "4px 8px",
+              border: "none",
+              background: "transparent",
+              cursor: "pointer",
+              fontSize: "11px",
+              color: "#aaa",
+              textAlign: "left",
+              letterSpacing: 0
+            },
+            children: "Reset"
+          }
+        ) }),
+        activeFeatures.length > 0 && /* @__PURE__ */ jsxs("div", { style: { borderTop: "1px solid #e8e8e8", marginTop: "4px", paddingTop: "4px" }, children: [
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              style: {
+                padding: "2px 8px 4px",
+                fontSize: "10px",
+                color: "#bbb",
+                textTransform: "uppercase",
+                letterSpacing: "0.06em"
+              },
+              children: "Features"
+            }
+          ),
+          activeFeatures.map((feat) => {
+            const on = featureEnabled[active]?.[feat.tag] ?? feat.enabled;
+            return /* @__PURE__ */ jsxs(
+              "button",
+              {
+                onClick: () => toggleFeature(active, feat.tag),
+                title: `font-feature-settings: "${feat.tag}" ${on ? 1 : 0}`,
+                style: {
+                  display: "flex",
+                  alignItems: "center",
+                  justifyContent: "space-between",
+                  width: "100%",
+                  padding: "4px 8px",
+                  border: "none",
+                  background: "transparent",
+                  cursor: "pointer",
+                  fontSize: "12px",
+                  textAlign: "left",
+                  color: on ? "#111" : "#ccc",
+                  fontFamily: "system-ui, sans-serif"
+                },
+                children: [
+                  /* @__PURE__ */ jsx("span", { children: feat.label }),
+                  /* @__PURE__ */ jsx(
+                    "span",
+                    {
+                      style: {
+                        fontSize: "9px",
+                        fontFamily: "monospace",
+                        color: on ? "#bbb" : "#ddd",
+                        marginLeft: "8px",
+                        flexShrink: 0
+                      },
+                      children: feat.tag
+                    }
+                  )
+                ]
+              },
+              feat.tag
+            );
+          })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { style: { borderTop: "1px solid #e8e8e8", marginTop: "4px", paddingTop: "4px" }, children: [
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              style: {
+                padding: "2px 8px 4px",
+                fontSize: "10px",
+                color: "#bbb",
+                textTransform: "uppercase",
+                letterSpacing: "0.06em"
+              },
+              children: "Rendering"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            RenderSelect,
+            {
+              label: "text-rendering",
+              title: "text-rendering",
+              value: renderSettings.textRendering,
+              options: ["auto", "optimizeLegibility", "optimizeSpeed", "geometricPrecision"],
+              onChange: (v) => updateRender("textRendering", v)
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            RenderSelect,
+            {
+              label: "webkit-smoothing",
+              title: "-webkit-font-smoothing",
+              value: renderSettings.webkitSmoothing,
+              options: ["auto", "none", "antialiased", "subpixel-antialiased"],
+              onChange: (v) => updateRender("webkitSmoothing", v)
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            RenderSelect,
+            {
+              label: "moz-osx-smoothing",
+              title: "-moz-osx-font-smoothing",
+              value: renderSettings.mozSmoothing,
+              options: ["auto", "grayscale"],
+              onChange: (v) => updateRender("mozSmoothing", v)
+            }
+          )
+        ] })
+      ]
+    }
+  );
+}
+function RenderSelect({
+  label,
+  title,
+  value,
+  options,
+  onChange
+}) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      style: {
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "space-between",
+        padding: "3px 8px",
+        gap: "8px"
+      },
+      children: [
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            title,
+            style: {
+              fontSize: "11px",
+              color: "#888",
+              fontFamily: "monospace",
+              flexShrink: 0,
+              cursor: "default"
+            },
+            children: label
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "select",
+          {
+            value,
+            onChange: (e) => onChange(e.target.value),
+            style: {
+              fontSize: "11px",
+              border: "1px solid #e0e0e0",
+              background: "#fafafa",
+              padding: "2px 4px",
+              cursor: "pointer",
+              minWidth: 0,
+              maxWidth: "130px",
+              color: "#444"
+            },
+            children: options.map((opt) => /* @__PURE__ */ jsx("option", { value: opt, children: opt }, opt))
+          }
+        )
+      ]
+    }
+  );
+}
+export {
+  FontSwitcher
+};

package/dist/script.cjs

@@ -0,0 +1,54 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+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 __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/script.ts
+var script_exports = {};
+__export(script_exports, {
+  getFOUCScript: () => getFOUCScript
+});
+module.exports = __toCommonJS(script_exports);
+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){}})();`;
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  getFOUCScript
+});

package/dist/script.d.cts

@@ -0,0 +1,52 @@
+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;
+}
+
+/**
+ * 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;
+
+export { getFOUCScript };

package/dist/script.d.ts

@@ -0,0 +1,52 @@
+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;
+}
+
+/**
+ * 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;
+
+export { getFOUCScript };

package/dist/script.js

@@ -0,0 +1,29 @@
+// 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){}})();`;
+}
+export {
+  getFOUCScript
+};