@pixerate/editor 0.176.0 → 0.177.0

package/dist/{chunk-FKUKJ3XA.cjs → chunk-4XSBOGMK.cjs}

@@ -30,8 +30,9 @@ function fontHasWeight(font, weight) {
 }
 function filterFonts(fonts, filter = {}) {
   const q = _nullishCoalesce(_optionalChain([filter, 'access', _ => _.query, 'optionalAccess', _2 => _2.trim, 'call', _3 => _3(), 'access', _4 => _4.toLowerCase, 'call', _5 => _5()]), () => ( ""));
+  const wantedTags = (_nullishCoalesce(filter.tags, () => ( []))).map((t) => t.trim().toLowerCase().replace(/\s+/g, "-")).filter(Boolean);
   const kept = fonts.filter(
-    (f) => (!filter.category || f.category === filter.category) && (!filter.source || f.source === filter.source) && (filter.weight === void 0 || fontHasWeight(f, filter.weight)) && (!filter.style || f.styles.includes(filter.style)) && (filter.isVariable === void 0 || !!f.isVariable === filter.isVariable) && (!q || f.family.toLowerCase().includes(q))
+    (f) => (!filter.category || f.category === filter.category) && (!filter.source || f.source === filter.source) && (filter.weight === void 0 || fontHasWeight(f, filter.weight)) && (!filter.style || f.styles.includes(filter.style)) && (filter.isVariable === void 0 || !!f.isVariable === filter.isVariable) && (!wantedTags.length || wantedTags.every((t) => _optionalChain([f, 'access', _6 => _6.tags, 'optionalAccess', _7 => _7.includes, 'call', _8 => _8(t)]))) && (!q || f.family.toLowerCase().includes(q))
   );
   if (!q) return kept;
   const starts = kept.filter((f) => f.family.toLowerCase().startsWith(q));
@@ -217,7 +218,7 @@ function createSystemFontProvider(options = {}) {
       for (const e of entries) {
         const key = e.family.toLowerCase();
         const known = findFont(SYSTEM_FONT_CATALOG, e.family);
-        const entry = _nullishCoalesce(byFamily.get(key), () => ( { family: _nullishCoalesce(_optionalChain([known, 'optionalAccess', _6 => _6.family]), () => ( e.family)), category: _nullishCoalesce(_optionalChain([known, 'optionalAccess', _7 => _7.category]), () => ( guessFontCategory(e.family))), weights: [], styles: [], source: "system" }));
+        const entry = _nullishCoalesce(byFamily.get(key), () => ( { family: _nullishCoalesce(_optionalChain([known, 'optionalAccess', _9 => _9.family]), () => ( e.family)), category: _nullishCoalesce(_optionalChain([known, 'optionalAccess', _10 => _10.category]), () => ( guessFontCategory(e.family))), weights: [], styles: [], source: "system" }));
         const w = weightFromStyleName(e.style);
         if (!entry.weights.includes(w)) entry.weights.push(w);
         const st = /italic/i.test(_nullishCoalesce(e.style, () => ( ""))) ? "italic" : /oblique/i.test(_nullishCoalesce(e.style, () => ( ""))) ? "oblique" : "normal";
@@ -279,7 +280,7 @@ function createWebFontProvider(options) {
   const done = /* @__PURE__ */ new Set();
   const g = globalThis;
   const createFace = _nullishCoalesce(options.createFontFace, () => ( (g.FontFace ? (family, source, descriptors) => new g.FontFace(family, source, descriptors) : void 0)));
-  const set = () => _nullishCoalesce(options.fontFaceSet, () => ( _optionalChain([g, 'access', _8 => _8.document, 'optionalAccess', _9 => _9.fonts])));
+  const set = () => _nullishCoalesce(options.fontFaceSet, () => ( _optionalChain([g, 'access', _11 => _11.document, 'optionalAccess', _12 => _12.fonts])));
   const def = (family) => defs.find((d) => d.family.toLowerCase() === family.trim().toLowerCase());
   const key = (family, weight, style) => `${family.toLowerCase()}|${normalizeFontWeight(weight)}|${_nullishCoalesce(style, () => ( "normal"))}`;
   function pickSource(d, weight, style) {
@@ -314,7 +315,7 @@ function createWebFontProvider(options) {
         ...source.unicodeRange ? { unicodeRange: source.unicodeRange } : {}
       });
       const promise = face.load().then(() => {
-        _optionalChain([set, 'call', _10 => _10(), 'optionalAccess', _11 => _11.add, 'call', _12 => _12(face)]);
+        _optionalChain([set, 'call', _13 => _13(), 'optionalAccess', _14 => _14.add, 'call', _15 => _15(face)]);
         done.add(k);
         return true;
       }).catch(() => {

package/dist/{chunk-CJE5MOIS.js → chunk-N4ZXW3WB.js}

@@ -30,8 +30,9 @@ function fontHasWeight(font, weight) {
 }
 function filterFonts(fonts, filter = {}) {
   const q = filter.query?.trim().toLowerCase() ?? "";
+  const wantedTags = (filter.tags ?? []).map((t) => t.trim().toLowerCase().replace(/\s+/g, "-")).filter(Boolean);
   const kept = fonts.filter(
-    (f) => (!filter.category || f.category === filter.category) && (!filter.source || f.source === filter.source) && (filter.weight === void 0 || fontHasWeight(f, filter.weight)) && (!filter.style || f.styles.includes(filter.style)) && (filter.isVariable === void 0 || !!f.isVariable === filter.isVariable) && (!q || f.family.toLowerCase().includes(q))
+    (f) => (!filter.category || f.category === filter.category) && (!filter.source || f.source === filter.source) && (filter.weight === void 0 || fontHasWeight(f, filter.weight)) && (!filter.style || f.styles.includes(filter.style)) && (filter.isVariable === void 0 || !!f.isVariable === filter.isVariable) && (!wantedTags.length || wantedTags.every((t) => f.tags?.includes(t))) && (!q || f.family.toLowerCase().includes(q))
   );
   if (!q) return kept;
   const starts = kept.filter((f) => f.family.toLowerCase().startsWith(q));

package/dist/effects/index.cjs

@@ -1,6 +1,6 @@
 "use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _nullishCoalesce(lhs, rhsFn) { if (lhs != null) { return lhs; } else { return rhsFn(); } } function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]; let i = 1; while (i < ops.length) { const op = ops[i]; const fn = ops[i + 1]; i += 2; if ((op === 'optionalAccess' || op === 'optionalCall') && value == null) { return undefined; } if (op === 'access' || op === 'optionalAccess') { lastAccessLHS = value; value = fn(value); } else if (op === 'call' || op === 'optionalCall') { value = fn((...args) => value.call(lastAccessLHS, ...args)); lastAccessLHS = undefined; } } return value; }
 
-var _chunkFKUKJ3XAcjs = require('../chunk-FKUKJ3XA.cjs');
+var _chunk4XSBOGMKcjs = require('../chunk-4XSBOGMK.cjs');
 
 
 var _chunk6DUEV36Fcjs = require('../chunk-6DUEV36F.cjs');
@@ -621,7 +621,7 @@ function effectControlField(name, schema, fallback, options = {}) {
   }
   if (type === "boolean") return { ...base, type: "boolean", default: def === true };
   if (isEffectFontControl(schema)) {
-    const fonts = _nullishCoalesce(options.fonts, () => ( _chunkFKUKJ3XAcjs.SYSTEM_FONT_CATALOG));
+    const fonts = _nullishCoalesce(options.fonts, () => ( _chunk4XSBOGMKcjs.SYSTEM_FONT_CATALOG));
     const opts = fonts.map((f) => ({ value: f.family, label: f.family, description: f.category }));
     const current = typeof def === "string" && def ? def : _nullishCoalesce(_optionalChain([opts, 'access', _23 => _23[0], 'optionalAccess', _24 => _24.value]), () => ( "sans-serif"));
     if (!opts.some((o) => o.value.toLowerCase() === current.toLowerCase())) opts.unshift({ value: current, label: current, description: "current" });

package/dist/effects/index.js

@@ -1,6 +1,6 @@
 import {
   SYSTEM_FONT_CATALOG
-} from "../chunk-CJE5MOIS.js";
+} from "../chunk-N4ZXW3WB.js";
 import {
   createEffectAuthoringSession
 } from "../chunk-WMVEYSOA.js";

package/dist/typography/index.cjs

@@ -15,7 +15,7 @@
 
 
 
-var _chunkFKUKJ3XAcjs = require('../chunk-FKUKJ3XA.cjs');
+var _chunk4XSBOGMKcjs = require('../chunk-4XSBOGMK.cjs');
 
 
 var _chunkTFF2GTGNcjs = require('../chunk-TFF2GTGN.cjs');
@@ -312,6 +312,143 @@ function auditTextReadability(text, font = {}) {
   };
 }
 
+// src/typography/stylesheet.ts
+function linkStylesheet(url) {
+  const doc = globalThis.document;
+  if (!_optionalChain([doc, 'optionalAccess', _4 => _4.head])) return Promise.reject(new Error("No document to add a stylesheet to."));
+  return new Promise((resolve, reject) => {
+    const link = doc.createElement("link");
+    link.rel = "stylesheet";
+    link.href = url;
+    link.onload = () => resolve();
+    link.onerror = () => {
+      link.remove();
+      reject(new Error(`Stylesheet failed to load: ${url}`));
+    };
+    doc.head.appendChild(link);
+  });
+}
+var SAMPLE_TEXT = "AaBbZz09";
+var quoteFamily = (family) => `"${family.replace(/["\\]/g, "\\$&")}"`;
+function createStylesheetFontProvider(options) {
+  let catalog = null;
+  const fonts = () => {
+    catalog ??= Promise.resolve().then(options.listFonts).catch((error) => {
+      catalog = null;
+      throw error;
+    });
+    return catalog;
+  };
+  const addStylesheet = _nullishCoalesce(options.addStylesheet, () => ( linkStylesheet));
+  const fontSet = () => _nullishCoalesce(options.fontFaceSet, () => ( _optionalChain([globalThis, 'access', _5 => _5.document, 'optionalAccess', _6 => _6.fonts])));
+  const sheets = /* @__PURE__ */ new Map();
+  const faces = /* @__PURE__ */ new Map();
+  const done = /* @__PURE__ */ new Set();
+  const key = (family, weight, style) => `${family.toLowerCase()}|${_chunk4XSBOGMKcjs.normalizeFontWeight.call(void 0, weight)}|${_nullishCoalesce(style, () => ( "normal"))}`;
+  const sheet = (url) => {
+    let pending = sheets.get(url);
+    if (!pending) {
+      pending = addStylesheet(url).catch((error) => {
+        sheets.delete(url);
+        throw error;
+      });
+      sheets.set(url, pending);
+    }
+    return pending;
+  };
+  return {
+    id: _nullishCoalesce(options.id, () => ( "stylesheet")),
+    listFonts: async () => (await fonts()).map((f) => ({ ...f })),
+    hasFont: async (family) => !!_chunk4XSBOGMKcjs.findFont.call(void 0, await fonts(), family),
+    loaded: (family, weight, style) => done.has(key(family, weight, style)),
+    async loadFont(family, weight, style) {
+      const k = key(family, weight, style);
+      const cached = faces.get(k);
+      if (cached) return cached;
+      const promise = (async () => {
+        const listed = _chunk4XSBOGMKcjs.findFont.call(void 0, await fonts(), family);
+        const set = fontSet();
+        if (!listed || !set) return false;
+        const wanted = _chunk4XSBOGMKcjs.normalizeFontWeight.call(void 0, weight);
+        const w = listed.isVariable || !listed.weights.length ? wanted : _chunk4XSBOGMKcjs.nearestFontWeight.call(void 0, wanted, listed.weights);
+        const st = !listed.styles.length || listed.styles.includes(_nullishCoalesce(style, () => ( "normal"))) ? _nullishCoalesce(style, () => ( "normal")) : "normal";
+        await sheet(options.stylesheetUrl(listed.family, w, st));
+        const matched = await set.load(`${st === "normal" ? "" : `${st} `}${w} 1em ${quoteFamily(listed.family)}`, _nullishCoalesce(options.sampleText, () => ( SAMPLE_TEXT)));
+        if (!matched.length) throw new Error("No face matched.");
+        done.add(k);
+        return true;
+      })().catch(() => {
+        faces.delete(k);
+        return false;
+      });
+      faces.set(k, promise);
+      return promise;
+    }
+  };
+}
+var GOOGLE_CATEGORIES = {
+  "sans serif": "sans-serif",
+  serif: "serif",
+  display: "display",
+  handwriting: "handwriting",
+  monospace: "monospace"
+};
+var tagOf = (value) => value.trim().toLowerCase().replace(/\s+/g, "-");
+function googleFontsCatalog(metadata) {
+  let data = metadata;
+  if (typeof data === "string") data = JSON.parse(data.replace(/^\)\]\}'\s*/, ""));
+  const list = Array.isArray(data) ? data : _optionalChain([data, 'optionalAccess', _7 => _7.familyMetadataList]);
+  if (!Array.isArray(list)) throw new Error("Not Google Fonts metadata: expected familyMetadataList.");
+  const families = list.filter((f) => typeof _optionalChain([f, 'optionalAccess', _8 => _8.family]) === "string" && f.family);
+  return families.map((f, index) => ({ f, index })).sort((a, b) => (_nullishCoalesce(a.f.popularity, () => ( Infinity))) - (_nullishCoalesce(b.f.popularity, () => ( Infinity))) || a.index - b.index).map(({ f }) => {
+    const classes = (_nullishCoalesce(f.classifications, () => ( []))).map(tagOf);
+    const filed = _nullishCoalesce(GOOGLE_CATEGORIES[(_nullishCoalesce(f.category, () => ( ""))).toLowerCase()], () => ( "sans-serif"));
+    const category = _nullishCoalesce(["monospace", "handwriting", "display"].find((c) => classes.includes(c)), () => ( filed));
+    const weights = /* @__PURE__ */ new Set();
+    const styles = /* @__PURE__ */ new Set();
+    for (const face of Object.keys(_nullishCoalesce(f.fonts, () => ( {})))) {
+      const m = /^(\d{3})(i?)$/.exec(face);
+      if (!m) continue;
+      weights.add(_chunk4XSBOGMKcjs.normalizeFontWeight.call(void 0, Number(m[1])));
+      styles.add(m[2] ? "italic" : "normal");
+    }
+    const wght = _optionalChain([f, 'access', _9 => _9.axes, 'optionalAccess', _10 => _10.find, 'call', _11 => _11((a) => a.tag === "wght")]);
+    if (wght) {
+      for (const w of FONT_WEIGHTS) if (w >= wght.min && w <= wght.max) weights.add(w);
+    }
+    if (!weights.size) weights.add(400);
+    if (!styles.size) styles.add("normal");
+    const tags = [.../* @__PURE__ */ new Set([...f.category ? [tagOf(f.category)] : [], ...classes, ...f.stroke ? [tagOf(f.stroke)] : [], ...(_nullishCoalesce(f.axes, () => ( []))).map((a) => `variable-${a.tag.toLowerCase()}`)])];
+    return {
+      family: f.family,
+      category,
+      weights: [...weights].sort((a, b) => a - b),
+      styles: [...styles],
+      ...wght ? { isVariable: true } : {},
+      source: "web",
+      ...tags.length ? { tags } : {}
+    };
+  });
+}
+function googleFontsStylesheetUrl(family, weight = 400, style = "normal", options = {}) {
+  const base = _nullishCoalesce(options.baseUrl, () => ( "https://fonts.googleapis.com/css2"));
+  const name = encodeURIComponent(family.trim()).replace(/%20/g, "+");
+  return `${base}?family=${name}:ital,wght@${style === "normal" ? 0 : 1},${_chunk4XSBOGMKcjs.normalizeFontWeight.call(void 0, weight)}&display=${_nullishCoalesce(options.display, () => ( "swap"))}`;
+}
+function createGoogleFontsProvider(options) {
+  const { catalog, baseUrl, ...rest } = options;
+  return createStylesheetFontProvider({
+    id: "google-fonts",
+    ...rest,
+    listFonts: async () => {
+      const data = await catalog();
+      const built = Array.isArray(data) && data.every((f) => typeof _optionalChain([f, 'optionalAccess', _12 => _12.family]) === "string" && typeof _optionalChain([f, 'optionalAccess', _13 => _13.category]) === "string" && Array.isArray(_optionalChain([f, 'optionalAccess', _14 => _14.weights])));
+      return built ? data : googleFontsCatalog(data);
+    },
+    stylesheetUrl: (family, weight, style) => googleFontsStylesheetUrl(family, weight, style, { baseUrl })
+  });
+}
+
 // src/typography/stack.ts
 var GENERIC_FONT_FAMILIES = [
   "serif",
@@ -406,7 +543,7 @@ function resolveFontFallback(family, category) {
   const families = parseFontFamily(family);
   if (!families.length) throw new Error("family must name at least one font.");
   if (GENERIC.has(families[families.length - 1])) return formatFontFamily(families);
-  const cat = _nullishCoalesce(category, () => ( _chunkFKUKJ3XAcjs.guessFontCategory.call(void 0, families[0])));
+  const cat = _nullishCoalesce(category, () => ( _chunk4XSBOGMKcjs.guessFontCategory.call(void 0, families[0])));
   return formatFontFamily([...families, ...parseFontFamily(FONT_STACKS[CATEGORY_FALLBACK_STACK[cat]])]);
 }
 
@@ -414,7 +551,7 @@ function resolveFontFallback(family, category) {
 var LARGE_TEXT_PX = 24;
 var LARGE_BOLD_TEXT_PX = 14 * 4 / 3;
 function isLargeText(font) {
-  const bold = _chunkFKUKJ3XAcjs.normalizeFontWeight.call(void 0, font.weight) >= 700;
+  const bold = _chunk4XSBOGMKcjs.normalizeFontWeight.call(void 0, font.weight) >= 700;
   return font.size >= LARGE_TEXT_PX || bold && font.size >= LARGE_BOLD_TEXT_PX - 0.01;
 }
 function checkTypographyAccessibility(options) {
@@ -428,12 +565,12 @@ function checkTypographyAccessibility(options) {
   const ratio = Math.round(_chunk5UEFBM2Mcjs.contrastRatio.call(void 0, fg, bg) * 100) / 100;
   const level = _chunk5UEFBM2Mcjs.contrastLevel.call(void 0, ratio, { large });
   const passesAA = level !== "fail";
-  const bold = _chunkFKUKJ3XAcjs.normalizeFontWeight.call(void 0, font.weight) >= 700;
+  const bold = _chunk4XSBOGMKcjs.normalizeFontWeight.call(void 0, font.weight) >= 700;
   const issues = [];
   const required = large ? { AA: 3, AAA: 4.5 } : { AA: 4.5, AAA: 7 };
   if (!passesAA) issues.push(`Contrast ${ratio}:1 is below the ${required.AA}:1 AA minimum for ${large ? "large" : "normal"} text.`);
   if (font.size < 12) issues.push(`${font.size}px text is hard to read at any contrast; use 12px or more (16px for body text).`);
-  const weight = _chunkFKUKJ3XAcjs.normalizeFontWeight.call(void 0, font.weight);
+  const weight = _chunk4XSBOGMKcjs.normalizeFontWeight.call(void 0, font.weight);
   if (weight <= 300 && font.size < 24) issues.push(`Weight ${weight} at ${font.size}px has thin strokes that lower effective contrast; use 400 or heavier below 24px.`);
   const suggestion = passesAA ? void 0 : _chunkTFF2GTGNcjs.suggestAccessibleForeground.call(void 0, fg, bg, { large });
   return {
@@ -453,7 +590,7 @@ function checkTypographyAccessibility(options) {
 var ALL_WEIGHTS = [100, 200, 300, 400, 500, 600, 700, 800, 900];
 function offeredWeights(font) {
   if (!font || !font.weights.length) return [...ALL_WEIGHTS];
-  const ws = font.weights.map((w) => _chunkFKUKJ3XAcjs.normalizeFontWeight.call(void 0, w));
+  const ws = font.weights.map((w) => _chunk4XSBOGMKcjs.normalizeFontWeight.call(void 0, w));
   if (font.isVariable) return ALL_WEIGHTS.filter((w) => w >= Math.min(...ws) && w <= Math.max(...ws));
   return [...new Set(ws)].sort((a, b) => a - b);
 }
@@ -477,17 +614,17 @@ var FontPickerModel = (_class = class {
     this.recentFamilies = [..._nullishCoalesce(options.recent, () => ( []))];
     const fonts = [..._nullishCoalesce(options.fonts, () => ( []))];
     const v = _nullishCoalesce(options.value, () => ( {}));
-    const family = _nullishCoalesce(_nullishCoalesce(v.family, () => ( _optionalChain([fonts, 'access', _4 => _4[0], 'optionalAccess', _5 => _5.family]))), () => ( "system-ui"));
-    const known = _chunkFKUKJ3XAcjs.findFont.call(void 0, fonts, family);
+    const family = _nullishCoalesce(_nullishCoalesce(v.family, () => ( _optionalChain([fonts, 'access', _15 => _15[0], 'optionalAccess', _16 => _16.family]))), () => ( "system-ui"));
+    const known = _chunk4XSBOGMKcjs.findFont.call(void 0, fonts, family);
     this.state = this.derive({
       value: {
-        family: _nullishCoalesce(_optionalChain([known, 'optionalAccess', _6 => _6.family]), () => ( family)),
-        weight: _chunkFKUKJ3XAcjs.normalizeFontWeight.call(void 0, v.weight),
+        family: _nullishCoalesce(_optionalChain([known, 'optionalAccess', _17 => _17.family]), () => ( family)),
+        weight: _chunk4XSBOGMKcjs.normalizeFontWeight.call(void 0, v.weight),
         style: _nullishCoalesce(v.style, () => ( "normal")),
         size: _nullishCoalesce(v.size, () => ( 16)),
         lineHeight: _nullishCoalesce(v.lineHeight, () => ( 1.5)),
         letterSpacing: _nullishCoalesce(v.letterSpacing, () => ( 0)),
-        ..._nullishCoalesce(v.category, () => ( _optionalChain([known, 'optionalAccess', _7 => _7.category]))) ? { category: _nullishCoalesce(v.category, () => ( _optionalChain([known, 'optionalAccess', _8 => _8.category]))) } : {}
+        ..._nullishCoalesce(v.category, () => ( _optionalChain([known, 'optionalAccess', _18 => _18.category]))) ? { category: _nullishCoalesce(v.category, () => ( _optionalChain([known, 'optionalAccess', _19 => _19.category]))) } : {}
       },
       category: "all",
       query: "",
@@ -522,7 +659,7 @@ var FontPickerModel = (_class = class {
   }
   /** The selected family's summary, if it is in `fonts`. */
   get selectedFont() {
-    return _chunkFKUKJ3XAcjs.findFont.call(void 0, this.state.fonts, this.state.value.family);
+    return _chunk4XSBOGMKcjs.findFont.call(void 0, this.state.fonts, this.state.value.family);
   }
   /** Weights the selected family offers (all nine when unknown or variable). */
   get availableWeights() {
@@ -530,13 +667,13 @@ var FontPickerModel = (_class = class {
   }
   /** Styles the selected family offers (`normal` when unknown). */
   get availableStyles() {
-    return _optionalChain([this, 'access', _9 => _9.selectedFont, 'optionalAccess', _10 => _10.styles, 'access', _11 => _11.length]) ? [...this.selectedFont.styles] : ["normal", "italic"];
+    return _optionalChain([this, 'access', _20 => _20.selectedFont, 'optionalAccess', _21 => _21.styles, 'access', _22 => _22.length]) ? [...this.selectedFont.styles] : ["normal", "italic"];
   }
   /** CSS for the selection: a fallback-resolved `font-family` plus the other properties. */
   get css() {
     const v = this.state.value;
     return {
-      fontFamily: resolveFontFallback(v.family, _nullishCoalesce(v.category, () => ( _optionalChain([this, 'access', _12 => _12.selectedFont, 'optionalAccess', _13 => _13.category])))),
+      fontFamily: resolveFontFallback(v.family, _nullishCoalesce(v.category, () => ( _optionalChain([this, 'access', _23 => _23.selectedFont, 'optionalAccess', _24 => _24.category])))),
       fontWeight: String(v.weight),
       fontStyle: v.style,
       fontSize: `${v.size}px`,
@@ -555,7 +692,7 @@ var FontPickerModel = (_class = class {
     try {
       const fonts = await this.provider.listFonts();
       if (this.destroyed) return fonts;
-      const known = _chunkFKUKJ3XAcjs.findFont.call(void 0, fonts, this.state.value.family);
+      const known = _chunk4XSBOGMKcjs.findFont.call(void 0, fonts, this.state.value.family);
       this.set({ fonts, loading: false, value: known ? { ...this.state.value, family: known.family, category: known.category } : this.state.value });
       return fonts;
     } catch (e) {
@@ -580,11 +717,11 @@ var FontPickerModel = (_class = class {
    * the family has it, else picks the nearest one; keeps the style if offered, else `normal`.
    */
   selectFamily(family) {
-    const font = _chunkFKUKJ3XAcjs.findFont.call(void 0, this.state.fonts, family);
+    const font = _chunk4XSBOGMKcjs.findFont.call(void 0, this.state.fonts, family);
     if (!font && this.state.fonts.length) throw new Error(`Font "${family}" is not available; pick one of the listed families (search with a query).`);
-    const name = _nullishCoalesce(_optionalChain([font, 'optionalAccess', _14 => _14.family]), () => ( family.trim()));
+    const name = _nullishCoalesce(_optionalChain([font, 'optionalAccess', _25 => _25.family]), () => ( family.trim()));
     if (!name) throw new Error("family must not be empty.");
-    const weight = font ? _chunkFKUKJ3XAcjs.nearestFontWeight.call(void 0, this.state.value.weight, offeredWeights(font)) : this.state.value.weight;
+    const weight = font ? _chunk4XSBOGMKcjs.nearestFontWeight.call(void 0, this.state.value.weight, offeredWeights(font)) : this.state.value.weight;
     const style = !font || font.styles.includes(this.state.value.style) ? this.state.value.style : "normal";
     this.recentFamilies = [name, ...this.recentFamilies.filter((f) => f.toLowerCase() !== name.toLowerCase())].slice(0, this.maxRecent);
     const { category: _old, ...rest } = this.state.value;
@@ -593,7 +730,7 @@ var FontPickerModel = (_class = class {
   }
   /** Sets the weight; snaps to the nearest weight the family offers. */
   setWeight(weight) {
-    this.commit({ ...this.state.value, weight: _chunkFKUKJ3XAcjs.nearestFontWeight.call(void 0, _chunkFKUKJ3XAcjs.normalizeFontWeight.call(void 0, weight), this.availableWeights) });
+    this.commit({ ...this.state.value, weight: _chunk4XSBOGMKcjs.nearestFontWeight.call(void 0, _chunk4XSBOGMKcjs.normalizeFontWeight.call(void 0, weight), this.availableWeights) });
   }
   setStyle(style) {
     if (!["normal", "italic", "oblique"].includes(style)) throw new Error(`Unknown style "${style}"; use normal, italic or oblique.`);
@@ -618,15 +755,15 @@ var FontPickerModel = (_class = class {
   setValue(value) {
     const v = this.state.value;
     const family = _nullishCoalesce(value.family, () => ( v.family));
-    const known = _chunkFKUKJ3XAcjs.findFont.call(void 0, this.state.fonts, family);
+    const known = _chunk4XSBOGMKcjs.findFont.call(void 0, this.state.fonts, family);
     const next = {
-      family: _nullishCoalesce(_optionalChain([known, 'optionalAccess', _15 => _15.family]), () => ( family)),
-      weight: value.weight !== void 0 ? _chunkFKUKJ3XAcjs.normalizeFontWeight.call(void 0, value.weight) : v.weight,
+      family: _nullishCoalesce(_optionalChain([known, 'optionalAccess', _26 => _26.family]), () => ( family)),
+      weight: value.weight !== void 0 ? _chunk4XSBOGMKcjs.normalizeFontWeight.call(void 0, value.weight) : v.weight,
       style: _nullishCoalesce(value.style, () => ( v.style)),
       size: _nullishCoalesce(value.size, () => ( v.size)),
       lineHeight: _nullishCoalesce(value.lineHeight, () => ( v.lineHeight)),
       letterSpacing: _nullishCoalesce(value.letterSpacing, () => ( v.letterSpacing)),
-      ..._nullishCoalesce(_nullishCoalesce(value.category, () => ( _optionalChain([known, 'optionalAccess', _16 => _16.category]))), () => ( (family === v.family ? v.category : void 0))) ? { category: _nullishCoalesce(_nullishCoalesce(value.category, () => ( _optionalChain([known, 'optionalAccess', _17 => _17.category]))), () => ( v.category)) } : {}
+      ..._nullishCoalesce(_nullishCoalesce(value.category, () => ( _optionalChain([known, 'optionalAccess', _27 => _27.category]))), () => ( (family === v.family ? v.category : void 0))) ? { category: _nullishCoalesce(_nullishCoalesce(value.category, () => ( _optionalChain([known, 'optionalAccess', _28 => _28.category]))), () => ( v.category)) } : {}
     };
     if (JSON.stringify(next) === JSON.stringify(v)) return;
     this.set({ value: next });
@@ -682,7 +819,7 @@ var FontPickerModel = (_class = class {
   /** Loads a family's face through the provider (for previews) and tracks its status. */
   async loadFamily(family, weight, style) {
     const key = family.toLowerCase();
-    if (!_optionalChain([this, 'access', _18 => _18.provider, 'optionalAccess', _19 => _19.loadFont])) return false;
+    if (!_optionalChain([this, 'access', _29 => _29.provider, 'optionalAccess', _30 => _30.loadFont])) return false;
     if (this.state.loadStatus[key] === "loaded") return true;
     this.set({ loadStatus: { ...this.state.loadStatus, [key]: "loading" } });
     const ok = await this.provider.loadFont(family, _nullishCoalesce(weight, () => ( this.state.value.weight)), _nullishCoalesce(style, () => ( this.state.value.style))).catch(() => false);
@@ -701,12 +838,12 @@ var FontPickerModel = (_class = class {
     }
     this.set({ value });
     const spec = this.value;
-    _optionalChain([this, 'access', _20 => _20.onChange, 'optionalCall', _21 => _21(spec)]);
+    _optionalChain([this, 'access', _31 => _31.onChange, 'optionalCall', _32 => _32(spec)]);
     for (const l of [...this.valueListeners]) l(spec);
   }
   derive(state) {
-    const results = _chunkFKUKJ3XAcjs.filterFonts.call(void 0, state.fonts, { ...state.category !== "all" ? { category: state.category } : {}, query: state.query });
-    const recent = this.recentFamilies.map((f) => _chunkFKUKJ3XAcjs.findFont.call(void 0, state.fonts, f)).filter((f) => !!f);
+    const results = _chunk4XSBOGMKcjs.filterFonts.call(void 0, state.fonts, { ...state.category !== "all" ? { category: state.category } : {}, query: state.query });
+    const recent = this.recentFamilies.map((f) => _chunk4XSBOGMKcjs.findFont.call(void 0, state.fonts, f)).filter((f) => !!f);
     return { ...state, results, recent, highlighted: Math.min(state.highlighted, results.length - 1) };
   }
   set(patch) {
@@ -744,11 +881,11 @@ var rejectUnknownRatio = (ratio) => {
   if (typeof ratio === "string" || typeof ratio === "number") resolveScaleRatio(ratio);
 };
 function createTypographyToolProvider(options = {}) {
-  const fonts = _nullishCoalesce(options.provider, () => ( _chunkFKUKJ3XAcjs.createSystemFontProvider.call(void 0, )));
+  const fonts = _nullishCoalesce(options.provider, () => ( _chunk4XSBOGMKcjs.createSystemFontProvider.call(void 0, )));
   const listFonts = {
     name: "list_fonts",
     title: "List fonts",
-    description: "Lists the fonts the host offers, optionally filtered by category, source, weight, style or a name query (families starting with the query first). Returns { fonts: [{ family, category, weights, styles, isVariable?, source }], total, truncated }. Use a family from here with resolve_font_stack, load_font or set_font_selection.",
+    description: "Lists the fonts the host offers, optionally filtered by category, source, weight, style, tags or a name query (families starting with the query first), in the provider's order (web services list their most popular first). Returns { fonts: [{ family, category, weights, styles, isVariable?, source, tags? }], total, truncated, tags: [{ tag, count }] } where tags counts the classes of every font matched (display, slab-serif, variable-wdth\u2026), so you can narrow by them. Use a family from here with resolve_font_stack, load_font or set_font_selection.",
     inputSchema: {
       type: "object",
       properties: {
@@ -757,6 +894,7 @@ function createTypographyToolProvider(options = {}) {
         weight: WEIGHT_SCHEMA,
         style: STYLE_SCHEMA,
         query: { type: "string", description: "Case-insensitive part of the family name." },
+        tags: { type: "array", items: { type: "string", minLength: 1 }, maxItems: 8, description: "Only fonts carrying every one of these tags (from a previous result's tags)." },
         limit: { type: "integer", minimum: 1, maximum: 500, description: "Most fonts to return (default 50, max 500)." }
       },
       additionalProperties: false
@@ -764,9 +902,12 @@ function createTypographyToolProvider(options = {}) {
     annotations: { title: "List fonts", ...READ },
     handler: async (args) => {
       const all = await fonts.listFonts();
-      const kept = _chunkFKUKJ3XAcjs.filterFonts.call(void 0, all, { category: args.category, source: args.source, weight: args.weight, style: args.style, query: args.query });
+      const kept = _chunk4XSBOGMKcjs.filterFonts.call(void 0, all, { category: args.category, source: args.source, weight: args.weight, style: args.style, query: args.query, tags: args.tags });
       const limit = _nullishCoalesce(args.limit, () => ( 50));
-      return { fonts: kept.slice(0, limit), total: kept.length, truncated: kept.length > limit };
+      const counts = /* @__PURE__ */ new Map();
+      for (const f of kept) for (const t of _nullishCoalesce(f.tags, () => ( []))) counts.set(t, (_nullishCoalesce(counts.get(t), () => ( 0))) + 1);
+      const tags = [...counts].sort((a, b) => b[1] - a[1] || a[0].localeCompare(b[0])).map(([tag, count]) => ({ tag, count }));
+      return { fonts: kept.slice(0, limit), total: kept.length, truncated: kept.length > limit, tags };
     }
   };
   const resolveFontStack = {
@@ -787,8 +928,8 @@ function createTypographyToolProvider(options = {}) {
       const families = parseFontFamily(String(_nullishCoalesce(args.family, () => ( ""))));
       if (!families.length) throw new Error('family must name at least one font, e.g. "Inter".');
       const first = families[0];
-      const listed = _chunkFKUKJ3XAcjs.findFont.call(void 0, await fonts.listFonts(), first);
-      const category = _nullishCoalesce(_nullishCoalesce(args.category, () => ( _optionalChain([listed, 'optionalAccess', _22 => _22.category]))), () => ( _chunkFKUKJ3XAcjs.guessFontCategory.call(void 0, first)));
+      const listed = _chunk4XSBOGMKcjs.findFont.call(void 0, await fonts.listFonts(), first);
+      const category = _nullishCoalesce(_nullishCoalesce(args.category, () => ( _optionalChain([listed, 'optionalAccess', _33 => _33.category]))), () => ( _chunk4XSBOGMKcjs.guessFontCategory.call(void 0, first)));
       const stack = resolveFontFallback(args.family, category);
       return { stack, families: parseFontFamily(stack), category, available: !!listed || !!await fonts.hasFont(first) };
     }
@@ -943,9 +1084,9 @@ function createTypographyToolProvider(options = {}) {
     },
     annotations: { title: "Load font", readOnlyHint: false, destructiveHint: false, idempotentHint: true, openWorldHint: true },
     handler: async (args) => {
-      const listed = _chunkFKUKJ3XAcjs.findFont.call(void 0, await fonts.listFonts(), String(args.family));
+      const listed = _chunk4XSBOGMKcjs.findFont.call(void 0, await fonts.listFonts(), String(args.family));
       if (!listed) throw new Error(`Font "${args.family}" is not offered by this host; call list_fonts to see the families you can load.`);
-      const weight = _chunkFKUKJ3XAcjs.normalizeFontWeight.call(void 0, args.weight);
+      const weight = _chunk4XSBOGMKcjs.normalizeFontWeight.call(void 0, args.weight);
       const style = _nullishCoalesce(args.style, () => ( "normal"));
       const loaded = await fonts.loadFont(listed.family, weight, style);
       return { family: listed.family, weight, style, loaded };
@@ -988,15 +1129,15 @@ function createFontPickerToolProvider(model, options = {}) {
     },
     annotations: { title: "Set font selection", readOnlyHint: false, destructiveHint: false, idempotentHint: true, openWorldHint: false },
     handler: (args) => {
-      const reason = _optionalChain([options, 'access', _23 => _23.readOnly, 'optionalCall', _24 => _24()]);
+      const reason = _optionalChain([options, 'access', _34 => _34.readOnly, 'optionalCall', _35 => _35()]);
       if (reason) throw new Error(`The font picker is read-only: ${reason}`);
       if (!Object.keys(args).length) throw new Error("Pass at least one of family, weight, style, size, lineHeight or letterSpacing.");
       const { fonts } = model.getState();
-      if (args.family !== void 0 && fonts.length && !_chunkFKUKJ3XAcjs.findFont.call(void 0, fonts, args.family)) {
+      if (args.family !== void 0 && fonts.length && !_chunk4XSBOGMKcjs.findFont.call(void 0, fonts, args.family)) {
         throw new Error(`Font "${args.family}" is not in the picker; call list_fonts and pass one of its families.`);
       }
       if (args.style !== void 0) {
-        const font = args.family !== void 0 ? _chunkFKUKJ3XAcjs.findFont.call(void 0, fonts, args.family) : model.selectedFont;
+        const font = args.family !== void 0 ? _chunk4XSBOGMKcjs.findFont.call(void 0, fonts, args.family) : model.selectedFont;
         if (font && font.styles.length && !font.styles.includes(args.style)) throw new Error(`"${font.family}" has no ${args.style} style; it offers ${font.styles.join(", ")}.`);
       }
       if (args.family !== void 0) model.selectFamily(args.family);
@@ -1024,7 +1165,7 @@ function createFontPickerToolProvider(model, options = {}) {
     annotations: { title: "List picker fonts", ...READ },
     handler: (args) => {
       const state = model.getState();
-      const kept = _chunkFKUKJ3XAcjs.filterFonts.call(void 0, state.fonts, { category: args.category, query: args.query });
+      const kept = _chunk4XSBOGMKcjs.filterFonts.call(void 0, state.fonts, { category: args.category, query: args.query });
       const limit = _nullishCoalesce(args.limit, () => ( 50));
       return { fonts: kept.slice(0, limit), recent: state.recent.map((f) => f.family), total: kept.length, truncated: kept.length > limit };
     }
@@ -1098,4 +1239,8 @@ function createFontPickerToolProvider(model, options = {}) {
 
 
 
-exports.ASSUMED_NORMAL_LINE_HEIGHT = ASSUMED_NORMAL_LINE_HEIGHT; exports.CATEGORY_FALLBACK_STACK = CATEGORY_FALLBACK_STACK; exports.DEFAULT_PREVIEW_TEXT = DEFAULT_PREVIEW_TEXT; exports.FONT_CATEGORIES = FONT_CATEGORIES; exports.FONT_CATEGORY_LABELS = FONT_CATEGORY_LABELS; exports.FONT_PLATFORMS = _chunkFKUKJ3XAcjs.FONT_PLATFORMS; exports.FONT_STACKS = FONT_STACKS; exports.FONT_STACK_NAMES = FONT_STACK_NAMES; exports.FONT_STYLES = FONT_STYLES; exports.FONT_WEIGHTS = FONT_WEIGHTS; exports.FontPickerModel = FontPickerModel; exports.GENERIC_FONT_FAMILIES = GENERIC_FONT_FAMILIES; exports.LARGE_BOLD_TEXT_PX = LARGE_BOLD_TEXT_PX; exports.LARGE_TEXT_PX = LARGE_TEXT_PX; exports.MODULAR_SCALE_RATIOS = MODULAR_SCALE_RATIOS; exports.MODULAR_SCALE_RATIO_NAMES = MODULAR_SCALE_RATIO_NAMES; exports.OPTIMAL_MEASURE = OPTIMAL_MEASURE; exports.READING_WORDS_PER_MINUTE = READING_WORDS_PER_MINUTE; exports.RECOMMENDED_LINE_HEIGHT = RECOMMENDED_LINE_HEIGHT; exports.SYSTEM_FONT_CATALOG = _chunkFKUKJ3XAcjs.SYSTEM_FONT_CATALOG; exports.TYPE_HIERARCHY_STEPS = TYPE_HIERARCHY_STEPS; exports.auditTextReadability = auditTextReadability; exports.checkTypographyAccessibility = checkTypographyAccessibility; exports.combineFontProviders = _chunkFKUKJ3XAcjs.combineFontProviders; exports.computeFluidSize = computeFluidSize; exports.computeTypeScale = computeTypeScale; exports.countGraphemes = countGraphemes; exports.createCatalogFontProvider = _chunkFKUKJ3XAcjs.createCatalogFontProvider; exports.createFontPicker = createFontPicker; exports.createFontPickerToolProvider = createFontPickerToolProvider; exports.createSystemFontProvider = _chunkFKUKJ3XAcjs.createSystemFontProvider; exports.createTypographyToolProvider = createTypographyToolProvider; exports.createWebFontProvider = _chunkFKUKJ3XAcjs.createWebFontProvider; exports.ensureFontsLoaded = _chunkFKUKJ3XAcjs.ensureFontsLoaded; exports.estimateCharactersPerLine = estimateCharactersPerLine; exports.filterFonts = _chunkFKUKJ3XAcjs.filterFonts; exports.findFont = _chunkFKUKJ3XAcjs.findFont; exports.fontFaceCss = _chunkFKUKJ3XAcjs.fontFaceCss; exports.fontHasWeight = _chunkFKUKJ3XAcjs.fontHasWeight; exports.formatFontFamily = formatFontFamily; exports.generateTypeHierarchy = generateTypeHierarchy; exports.getScaleRatio = getScaleRatio; exports.graphemes = graphemes; exports.guessFontCategory = _chunkFKUKJ3XAcjs.guessFontCategory; exports.isFontWeight = _chunkFKUKJ3XAcjs.isFontWeight; exports.isLargeText = isLargeText; exports.nearestFontWeight = _chunkFKUKJ3XAcjs.nearestFontWeight; exports.normalizeFontWeight = _chunkFKUKJ3XAcjs.normalizeFontWeight; exports.offeredWeights = offeredWeights; exports.parseFontFamily = parseFontFamily; exports.quoteFontFamily = quoteFontFamily; exports.recommendedLetterSpacing = recommendedLetterSpacing; exports.recommendedLineHeight = recommendedLineHeight; exports.resolveFontFallback = resolveFontFallback; exports.resolveScaleRatio = resolveScaleRatio; exports.segmentText = segmentText; exports.typeHierarchyToCss = typeHierarchyToCss; exports.typeScaleStep = typeScaleStep; exports.webFontSummary = _chunkFKUKJ3XAcjs.webFontSummary;
+
+
+
+
+exports.ASSUMED_NORMAL_LINE_HEIGHT = ASSUMED_NORMAL_LINE_HEIGHT; exports.CATEGORY_FALLBACK_STACK = CATEGORY_FALLBACK_STACK; exports.DEFAULT_PREVIEW_TEXT = DEFAULT_PREVIEW_TEXT; exports.FONT_CATEGORIES = FONT_CATEGORIES; exports.FONT_CATEGORY_LABELS = FONT_CATEGORY_LABELS; exports.FONT_PLATFORMS = _chunk4XSBOGMKcjs.FONT_PLATFORMS; exports.FONT_STACKS = FONT_STACKS; exports.FONT_STACK_NAMES = FONT_STACK_NAMES; exports.FONT_STYLES = FONT_STYLES; exports.FONT_WEIGHTS = FONT_WEIGHTS; exports.FontPickerModel = FontPickerModel; exports.GENERIC_FONT_FAMILIES = GENERIC_FONT_FAMILIES; exports.LARGE_BOLD_TEXT_PX = LARGE_BOLD_TEXT_PX; exports.LARGE_TEXT_PX = LARGE_TEXT_PX; exports.MODULAR_SCALE_RATIOS = MODULAR_SCALE_RATIOS; exports.MODULAR_SCALE_RATIO_NAMES = MODULAR_SCALE_RATIO_NAMES; exports.OPTIMAL_MEASURE = OPTIMAL_MEASURE; exports.READING_WORDS_PER_MINUTE = READING_WORDS_PER_MINUTE; exports.RECOMMENDED_LINE_HEIGHT = RECOMMENDED_LINE_HEIGHT; exports.SYSTEM_FONT_CATALOG = _chunk4XSBOGMKcjs.SYSTEM_FONT_CATALOG; exports.TYPE_HIERARCHY_STEPS = TYPE_HIERARCHY_STEPS; exports.auditTextReadability = auditTextReadability; exports.checkTypographyAccessibility = checkTypographyAccessibility; exports.combineFontProviders = _chunk4XSBOGMKcjs.combineFontProviders; exports.computeFluidSize = computeFluidSize; exports.computeTypeScale = computeTypeScale; exports.countGraphemes = countGraphemes; exports.createCatalogFontProvider = _chunk4XSBOGMKcjs.createCatalogFontProvider; exports.createFontPicker = createFontPicker; exports.createFontPickerToolProvider = createFontPickerToolProvider; exports.createGoogleFontsProvider = createGoogleFontsProvider; exports.createStylesheetFontProvider = createStylesheetFontProvider; exports.createSystemFontProvider = _chunk4XSBOGMKcjs.createSystemFontProvider; exports.createTypographyToolProvider = createTypographyToolProvider; exports.createWebFontProvider = _chunk4XSBOGMKcjs.createWebFontProvider; exports.ensureFontsLoaded = _chunk4XSBOGMKcjs.ensureFontsLoaded; exports.estimateCharactersPerLine = estimateCharactersPerLine; exports.filterFonts = _chunk4XSBOGMKcjs.filterFonts; exports.findFont = _chunk4XSBOGMKcjs.findFont; exports.fontFaceCss = _chunk4XSBOGMKcjs.fontFaceCss; exports.fontHasWeight = _chunk4XSBOGMKcjs.fontHasWeight; exports.formatFontFamily = formatFontFamily; exports.generateTypeHierarchy = generateTypeHierarchy; exports.getScaleRatio = getScaleRatio; exports.googleFontsCatalog = googleFontsCatalog; exports.googleFontsStylesheetUrl = googleFontsStylesheetUrl; exports.graphemes = graphemes; exports.guessFontCategory = _chunk4XSBOGMKcjs.guessFontCategory; exports.isFontWeight = _chunk4XSBOGMKcjs.isFontWeight; exports.isLargeText = isLargeText; exports.nearestFontWeight = _chunk4XSBOGMKcjs.nearestFontWeight; exports.normalizeFontWeight = _chunk4XSBOGMKcjs.normalizeFontWeight; exports.offeredWeights = offeredWeights; exports.parseFontFamily = parseFontFamily; exports.quoteFontFamily = quoteFontFamily; exports.recommendedLetterSpacing = recommendedLetterSpacing; exports.recommendedLineHeight = recommendedLineHeight; exports.resolveFontFallback = resolveFontFallback; exports.resolveScaleRatio = resolveScaleRatio; exports.segmentText = segmentText; exports.typeHierarchyToCss = typeHierarchyToCss; exports.typeScaleStep = typeScaleStep; exports.webFontSummary = _chunk4XSBOGMKcjs.webFontSummary;

package/dist/typography/index.d.cts

@@ -10,6 +10,7 @@ export * from './segment.cjs';
 export * from './metrics.cjs';
 export * from './registry.cjs';
 export * from './catalog.cjs';
+export * from './stylesheet.cjs';
 export * from './stack.cjs';
 export * from './accessibility.cjs';
 export * from './picker.cjs';

package/dist/typography/index.d.ts

@@ -10,6 +10,7 @@ export * from './segment.js';
 export * from './metrics.js';
 export * from './registry.js';
 export * from './catalog.js';
+export * from './stylesheet.js';
 export * from './stack.js';
 export * from './accessibility.js';
 export * from './picker.js';

package/dist/typography/index.js

@@ -15,7 +15,7 @@ import {
   nearestFontWeight,
   normalizeFontWeight,
   webFontSummary
-} from "../chunk-CJE5MOIS.js";
+} from "../chunk-N4ZXW3WB.js";
 import {
   suggestAccessibleForeground
 } from "../chunk-YBAPT7NL.js";
@@ -312,6 +312,143 @@ function auditTextReadability(text, font = {}) {
   };
 }
 
+// src/typography/stylesheet.ts
+function linkStylesheet(url) {
+  const doc = globalThis.document;
+  if (!doc?.head) return Promise.reject(new Error("No document to add a stylesheet to."));
+  return new Promise((resolve, reject) => {
+    const link = doc.createElement("link");
+    link.rel = "stylesheet";
+    link.href = url;
+    link.onload = () => resolve();
+    link.onerror = () => {
+      link.remove();
+      reject(new Error(`Stylesheet failed to load: ${url}`));
+    };
+    doc.head.appendChild(link);
+  });
+}
+var SAMPLE_TEXT = "AaBbZz09";
+var quoteFamily = (family) => `"${family.replace(/["\\]/g, "\\$&")}"`;
+function createStylesheetFontProvider(options) {
+  let catalog = null;
+  const fonts = () => {
+    catalog ??= Promise.resolve().then(options.listFonts).catch((error) => {
+      catalog = null;
+      throw error;
+    });
+    return catalog;
+  };
+  const addStylesheet = options.addStylesheet ?? linkStylesheet;
+  const fontSet = () => options.fontFaceSet ?? globalThis.document?.fonts;
+  const sheets = /* @__PURE__ */ new Map();
+  const faces = /* @__PURE__ */ new Map();
+  const done = /* @__PURE__ */ new Set();
+  const key = (family, weight, style) => `${family.toLowerCase()}|${normalizeFontWeight(weight)}|${style ?? "normal"}`;
+  const sheet = (url) => {
+    let pending = sheets.get(url);
+    if (!pending) {
+      pending = addStylesheet(url).catch((error) => {
+        sheets.delete(url);
+        throw error;
+      });
+      sheets.set(url, pending);
+    }
+    return pending;
+  };
+  return {
+    id: options.id ?? "stylesheet",
+    listFonts: async () => (await fonts()).map((f) => ({ ...f })),
+    hasFont: async (family) => !!findFont(await fonts(), family),
+    loaded: (family, weight, style) => done.has(key(family, weight, style)),
+    async loadFont(family, weight, style) {
+      const k = key(family, weight, style);
+      const cached = faces.get(k);
+      if (cached) return cached;
+      const promise = (async () => {
+        const listed = findFont(await fonts(), family);
+        const set = fontSet();
+        if (!listed || !set) return false;
+        const wanted = normalizeFontWeight(weight);
+        const w = listed.isVariable || !listed.weights.length ? wanted : nearestFontWeight(wanted, listed.weights);
+        const st = !listed.styles.length || listed.styles.includes(style ?? "normal") ? style ?? "normal" : "normal";
+        await sheet(options.stylesheetUrl(listed.family, w, st));
+        const matched = await set.load(`${st === "normal" ? "" : `${st} `}${w} 1em ${quoteFamily(listed.family)}`, options.sampleText ?? SAMPLE_TEXT);
+        if (!matched.length) throw new Error("No face matched.");
+        done.add(k);
+        return true;
+      })().catch(() => {
+        faces.delete(k);
+        return false;
+      });
+      faces.set(k, promise);
+      return promise;
+    }
+  };
+}
+var GOOGLE_CATEGORIES = {
+  "sans serif": "sans-serif",
+  serif: "serif",
+  display: "display",
+  handwriting: "handwriting",
+  monospace: "monospace"
+};
+var tagOf = (value) => value.trim().toLowerCase().replace(/\s+/g, "-");
+function googleFontsCatalog(metadata) {
+  let data = metadata;
+  if (typeof data === "string") data = JSON.parse(data.replace(/^\)\]\}'\s*/, ""));
+  const list = Array.isArray(data) ? data : data?.familyMetadataList;
+  if (!Array.isArray(list)) throw new Error("Not Google Fonts metadata: expected familyMetadataList.");
+  const families = list.filter((f) => typeof f?.family === "string" && f.family);
+  return families.map((f, index) => ({ f, index })).sort((a, b) => (a.f.popularity ?? Infinity) - (b.f.popularity ?? Infinity) || a.index - b.index).map(({ f }) => {
+    const classes = (f.classifications ?? []).map(tagOf);
+    const filed = GOOGLE_CATEGORIES[(f.category ?? "").toLowerCase()] ?? "sans-serif";
+    const category = ["monospace", "handwriting", "display"].find((c) => classes.includes(c)) ?? filed;
+    const weights = /* @__PURE__ */ new Set();
+    const styles = /* @__PURE__ */ new Set();
+    for (const face of Object.keys(f.fonts ?? {})) {
+      const m = /^(\d{3})(i?)$/.exec(face);
+      if (!m) continue;
+      weights.add(normalizeFontWeight(Number(m[1])));
+      styles.add(m[2] ? "italic" : "normal");
+    }
+    const wght = f.axes?.find((a) => a.tag === "wght");
+    if (wght) {
+      for (const w of FONT_WEIGHTS) if (w >= wght.min && w <= wght.max) weights.add(w);
+    }
+    if (!weights.size) weights.add(400);
+    if (!styles.size) styles.add("normal");
+    const tags = [.../* @__PURE__ */ new Set([...f.category ? [tagOf(f.category)] : [], ...classes, ...f.stroke ? [tagOf(f.stroke)] : [], ...(f.axes ?? []).map((a) => `variable-${a.tag.toLowerCase()}`)])];
+    return {
+      family: f.family,
+      category,
+      weights: [...weights].sort((a, b) => a - b),
+      styles: [...styles],
+      ...wght ? { isVariable: true } : {},
+      source: "web",
+      ...tags.length ? { tags } : {}
+    };
+  });
+}
+function googleFontsStylesheetUrl(family, weight = 400, style = "normal", options = {}) {
+  const base = options.baseUrl ?? "https://fonts.googleapis.com/css2";
+  const name = encodeURIComponent(family.trim()).replace(/%20/g, "+");
+  return `${base}?family=${name}:ital,wght@${style === "normal" ? 0 : 1},${normalizeFontWeight(weight)}&display=${options.display ?? "swap"}`;
+}
+function createGoogleFontsProvider(options) {
+  const { catalog, baseUrl, ...rest } = options;
+  return createStylesheetFontProvider({
+    id: "google-fonts",
+    ...rest,
+    listFonts: async () => {
+      const data = await catalog();
+      const built = Array.isArray(data) && data.every((f) => typeof f?.family === "string" && typeof f?.category === "string" && Array.isArray(f?.weights));
+      return built ? data : googleFontsCatalog(data);
+    },
+    stylesheetUrl: (family, weight, style) => googleFontsStylesheetUrl(family, weight, style, { baseUrl })
+  });
+}
+
 // src/typography/stack.ts
 var GENERIC_FONT_FAMILIES = [
   "serif",
@@ -748,7 +885,7 @@ function createTypographyToolProvider(options = {}) {
   const listFonts = {
     name: "list_fonts",
     title: "List fonts",
-    description: "Lists the fonts the host offers, optionally filtered by category, source, weight, style or a name query (families starting with the query first). Returns { fonts: [{ family, category, weights, styles, isVariable?, source }], total, truncated }. Use a family from here with resolve_font_stack, load_font or set_font_selection.",
+    description: "Lists the fonts the host offers, optionally filtered by category, source, weight, style, tags or a name query (families starting with the query first), in the provider's order (web services list their most popular first). Returns { fonts: [{ family, category, weights, styles, isVariable?, source, tags? }], total, truncated, tags: [{ tag, count }] } where tags counts the classes of every font matched (display, slab-serif, variable-wdth\u2026), so you can narrow by them. Use a family from here with resolve_font_stack, load_font or set_font_selection.",
     inputSchema: {
       type: "object",
       properties: {
@@ -757,6 +894,7 @@ function createTypographyToolProvider(options = {}) {
         weight: WEIGHT_SCHEMA,
         style: STYLE_SCHEMA,
         query: { type: "string", description: "Case-insensitive part of the family name." },
+        tags: { type: "array", items: { type: "string", minLength: 1 }, maxItems: 8, description: "Only fonts carrying every one of these tags (from a previous result's tags)." },
         limit: { type: "integer", minimum: 1, maximum: 500, description: "Most fonts to return (default 50, max 500)." }
       },
       additionalProperties: false
@@ -764,9 +902,12 @@ function createTypographyToolProvider(options = {}) {
     annotations: { title: "List fonts", ...READ },
     handler: async (args) => {
       const all = await fonts.listFonts();
-      const kept = filterFonts(all, { category: args.category, source: args.source, weight: args.weight, style: args.style, query: args.query });
+      const kept = filterFonts(all, { category: args.category, source: args.source, weight: args.weight, style: args.style, query: args.query, tags: args.tags });
       const limit = args.limit ?? 50;
-      return { fonts: kept.slice(0, limit), total: kept.length, truncated: kept.length > limit };
+      const counts = /* @__PURE__ */ new Map();
+      for (const f of kept) for (const t of f.tags ?? []) counts.set(t, (counts.get(t) ?? 0) + 1);
+      const tags = [...counts].sort((a, b) => b[1] - a[1] || a[0].localeCompare(b[0])).map(([tag, count]) => ({ tag, count }));
+      return { fonts: kept.slice(0, limit), total: kept.length, truncated: kept.length > limit, tags };
     }
   };
   const resolveFontStack = {
@@ -1069,6 +1210,8 @@ export {
   createCatalogFontProvider,
   createFontPicker,
   createFontPickerToolProvider,
+  createGoogleFontsProvider,
+  createStylesheetFontProvider,
   createSystemFontProvider,
   createTypographyToolProvider,
   createWebFontProvider,
@@ -1081,6 +1224,8 @@ export {
   formatFontFamily,
   generateTypeHierarchy,
   getScaleRatio,
+  googleFontsCatalog,
+  googleFontsStylesheetUrl,
   graphemes,
   guessFontCategory,
   isFontWeight,

package/dist/typography/registry.d.cts

@@ -14,6 +14,8 @@ export interface FontSummary {
     source: FontSource;
     /** Platforms that ship it, for system fonts. */
     platforms?: FontPlatform[];
+    /** Lowercase, hyphenated classes from the provider, e.g. `display`, `slab-serif`, `variable-wdth`. */
+    tags?: string[];
 }
 export interface FontProvider {
     readonly id: string;
@@ -33,6 +35,8 @@ export interface FontFilter {
     /** Case-insensitive substring of the family name. */
     query?: string;
     isVariable?: boolean;
+    /** Keep fonts carrying every one of these tags (any case, spaces as hyphens). */
+    tags?: readonly string[];
 }
 /** Whether a font offers a weight (variable fonts offer every weight in their range). */
 export declare function fontHasWeight(font: FontSummary, weight: FontWeight): boolean;

package/dist/typography/registry.d.ts

@@ -14,6 +14,8 @@ export interface FontSummary {
     source: FontSource;
     /** Platforms that ship it, for system fonts. */
     platforms?: FontPlatform[];
+    /** Lowercase, hyphenated classes from the provider, e.g. `display`, `slab-serif`, `variable-wdth`. */
+    tags?: string[];
 }
 export interface FontProvider {
     readonly id: string;
@@ -33,6 +35,8 @@ export interface FontFilter {
     /** Case-insensitive substring of the family name. */
     query?: string;
     isVariable?: boolean;
+    /** Keep fonts carrying every one of these tags (any case, spaces as hyphens). */
+    tags?: readonly string[];
 }
 /** Whether a font offers a weight (variable fonts offer every weight in their range). */
 export declare function fontHasWeight(font: FontSummary, weight: FontWeight): boolean;

package/dist/typography/stylesheet.d.cts

@@ -0,0 +1,86 @@
+/**
+ * Font services that serve CSS (Google Fonts, Bunny Fonts, a self-hosted css2-compatible proxy):
+ * a provider that loads a family by adding the service's stylesheet and waiting for the face,
+ * and an adapter for the Google Fonts catalog and stylesheet URLs.
+ */
+import { type FontProvider, type FontSummary } from './registry.cjs';
+import { type FontStyle, type FontWeight } from './types.cjs';
+/** The parts of `document.fonts` the stylesheet provider uses. */
+export interface StylesheetFontSetLike {
+    load(font: string, text?: string): Promise<readonly unknown[]>;
+}
+export interface StylesheetFontProviderOptions {
+    id?: string;
+    /** The service's families; called once, on first use. */
+    listFonts: () => FontSummary[] | Promise<FontSummary[]>;
+    /** The stylesheet URL that declares one face. */
+    stylesheetUrl: (family: string, weight: FontWeight, style: FontStyle) => string;
+    /**
+     * Adds a stylesheet and resolves when it has loaded (default: a `<link rel="stylesheet">` in
+     * `document.head`). Inject a fake in tests: nothing then hits the network.
+     */
+    addStylesheet?: (url: string) => Promise<void>;
+    /** Where faces are waited for (default `document.fonts`). */
+    fontFaceSet?: StylesheetFontSetLike;
+    /**
+     * Characters the face must cover once loaded (default Latin letters and digits). Services split
+     * a family into `unicode-range` subsets, and `document.fonts.load` without text fetches none of
+     * the files a page needs for words.
+     */
+    sampleText?: string;
+}
+/**
+ * Fonts from a service that serves CSS. `loadFont` asks for the nearest weight and style the
+ * family offers, adds that face's stylesheet once, then resolves `true` when the browser has the face (`document.fonts.load` matched it), `false` when the family
+ * is not listed, the stylesheet fails or no face matches. Loads are cached per face; failures can
+ * be retried.
+ */
+export declare function createStylesheetFontProvider(options: StylesheetFontProviderOptions): FontProvider & {
+    loaded(family: string, weight?: FontWeight, style?: FontStyle): boolean;
+};
+/** One family in the Google Fonts metadata (`https://fonts.google.com/metadata/fonts`), as far as this module reads it. */
+export interface GoogleFontsFamilyMetadata {
+    family: string;
+    /** `Sans Serif`, `Serif`, `Display`, `Handwriting` or `Monospace`. */
+    category?: string;
+    /** Further classes, e.g. `Display`, `Handwriting`, `Monospace`, `Symbols`. */
+    classifications?: readonly string[];
+    /** Stroke class, e.g. `Sans Serif`, `Serif`, `Slab Serif`. */
+    stroke?: string | null;
+    /** Faces by weight, `i` for italic: `{ "400": …, "700i": … }`. */
+    fonts?: Record<string, unknown>;
+    axes?: ReadonlyArray<{
+        tag: string;
+        min: number;
+        max: number;
+    }>;
+    /** Rank, 1 = most popular. */
+    popularity?: number;
+    subsets?: readonly string[];
+}
+/**
+ * The families in a Google Fonts metadata response (the object, its `familyMetadataList`, or the
+ * raw text with its `)]}'` prefix), most popular first. A family classified as display,
+ * handwriting or monospace takes that category even when Google files it under sans serif or
+ * serif (Anton is a sans serif classified as display); its classes, stroke and axes become
+ * `tags` (`display`, `slab-serif`, `variable-wdth`…).
+ */
+export declare function googleFontsCatalog(metadata: unknown): FontSummary[];
+/** The Google Fonts css2 URL for one face, e.g. `…/css2?family=Space+Grotesk:ital,wght@0,700&display=swap`. */
+export declare function googleFontsStylesheetUrl(family: string, weight?: FontWeight, style?: FontStyle, options?: {
+    baseUrl?: string;
+    display?: string;
+}): string;
+export interface GoogleFontsProviderOptions extends Omit<StylesheetFontProviderOptions, 'listFonts' | 'stylesheetUrl'> {
+    /**
+     * The Google Fonts metadata, or the catalog already built from it. fonts.google.com does not
+     * allow cross-origin reads, so a browser host fetches it through its own server.
+     */
+    catalog: () => Promise<unknown>;
+    /** css2-compatible stylesheet endpoint (default `https://fonts.googleapis.com/css2`). */
+    baseUrl?: string;
+}
+/** Google Fonts (or a css2-compatible mirror): its catalog, loaded face by face through its stylesheets. */
+export declare function createGoogleFontsProvider(options: GoogleFontsProviderOptions): FontProvider & {
+    loaded(family: string, weight?: FontWeight, style?: FontStyle): boolean;
+};

package/dist/typography/stylesheet.d.ts

@@ -0,0 +1,86 @@
+/**
+ * Font services that serve CSS (Google Fonts, Bunny Fonts, a self-hosted css2-compatible proxy):
+ * a provider that loads a family by adding the service's stylesheet and waiting for the face,
+ * and an adapter for the Google Fonts catalog and stylesheet URLs.
+ */
+import { type FontProvider, type FontSummary } from './registry.js';
+import { type FontStyle, type FontWeight } from './types.js';
+/** The parts of `document.fonts` the stylesheet provider uses. */
+export interface StylesheetFontSetLike {
+    load(font: string, text?: string): Promise<readonly unknown[]>;
+}
+export interface StylesheetFontProviderOptions {
+    id?: string;
+    /** The service's families; called once, on first use. */
+    listFonts: () => FontSummary[] | Promise<FontSummary[]>;
+    /** The stylesheet URL that declares one face. */
+    stylesheetUrl: (family: string, weight: FontWeight, style: FontStyle) => string;
+    /**
+     * Adds a stylesheet and resolves when it has loaded (default: a `<link rel="stylesheet">` in
+     * `document.head`). Inject a fake in tests: nothing then hits the network.
+     */
+    addStylesheet?: (url: string) => Promise<void>;
+    /** Where faces are waited for (default `document.fonts`). */
+    fontFaceSet?: StylesheetFontSetLike;
+    /**
+     * Characters the face must cover once loaded (default Latin letters and digits). Services split
+     * a family into `unicode-range` subsets, and `document.fonts.load` without text fetches none of
+     * the files a page needs for words.
+     */
+    sampleText?: string;
+}
+/**
+ * Fonts from a service that serves CSS. `loadFont` asks for the nearest weight and style the
+ * family offers, adds that face's stylesheet once, then resolves `true` when the browser has the face (`document.fonts.load` matched it), `false` when the family
+ * is not listed, the stylesheet fails or no face matches. Loads are cached per face; failures can
+ * be retried.
+ */
+export declare function createStylesheetFontProvider(options: StylesheetFontProviderOptions): FontProvider & {
+    loaded(family: string, weight?: FontWeight, style?: FontStyle): boolean;
+};
+/** One family in the Google Fonts metadata (`https://fonts.google.com/metadata/fonts`), as far as this module reads it. */
+export interface GoogleFontsFamilyMetadata {
+    family: string;
+    /** `Sans Serif`, `Serif`, `Display`, `Handwriting` or `Monospace`. */
+    category?: string;
+    /** Further classes, e.g. `Display`, `Handwriting`, `Monospace`, `Symbols`. */
+    classifications?: readonly string[];
+    /** Stroke class, e.g. `Sans Serif`, `Serif`, `Slab Serif`. */
+    stroke?: string | null;
+    /** Faces by weight, `i` for italic: `{ "400": …, "700i": … }`. */
+    fonts?: Record<string, unknown>;
+    axes?: ReadonlyArray<{
+        tag: string;
+        min: number;
+        max: number;
+    }>;
+    /** Rank, 1 = most popular. */
+    popularity?: number;
+    subsets?: readonly string[];
+}
+/**
+ * The families in a Google Fonts metadata response (the object, its `familyMetadataList`, or the
+ * raw text with its `)]}'` prefix), most popular first. A family classified as display,
+ * handwriting or monospace takes that category even when Google files it under sans serif or
+ * serif (Anton is a sans serif classified as display); its classes, stroke and axes become
+ * `tags` (`display`, `slab-serif`, `variable-wdth`…).
+ */
+export declare function googleFontsCatalog(metadata: unknown): FontSummary[];
+/** The Google Fonts css2 URL for one face, e.g. `…/css2?family=Space+Grotesk:ital,wght@0,700&display=swap`. */
+export declare function googleFontsStylesheetUrl(family: string, weight?: FontWeight, style?: FontStyle, options?: {
+    baseUrl?: string;
+    display?: string;
+}): string;
+export interface GoogleFontsProviderOptions extends Omit<StylesheetFontProviderOptions, 'listFonts' | 'stylesheetUrl'> {
+    /**
+     * The Google Fonts metadata, or the catalog already built from it. fonts.google.com does not
+     * allow cross-origin reads, so a browser host fetches it through its own server.
+     */
+    catalog: () => Promise<unknown>;
+    /** css2-compatible stylesheet endpoint (default `https://fonts.googleapis.com/css2`). */
+    baseUrl?: string;
+}
+/** Google Fonts (or a css2-compatible mirror): its catalog, loaded face by face through its stylesheets. */
+export declare function createGoogleFontsProvider(options: GoogleFontsProviderOptions): FontProvider & {
+    loaded(family: string, weight?: FontWeight, style?: FontStyle): boolean;
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pixerate/editor",
-  "version": "0.176.0",
+  "version": "0.177.0",
   "description": "UI-agnostic rich text and media editing core library",
   "author": "Pixerate",
   "license": "MIT",

package/skills/pixerate-typography/SKILL.md

@@ -23,8 +23,12 @@ what this machine has.
 
 ## Working method
 
-1. **Find fonts.** `list_fonts` with `category`, `weight`, `style` or `query`. Only use families it
-   returns (or that the user names), and always ship them inside a stack from `resolve_font_stack`.
+1. **Find fonts.** `list_fonts` with `category`, `weight`, `style`, `tags` or `query`. Only use
+   families it returns (or that the user names), and always ship them inside a stack from
+   `resolve_font_stack`. When the host offers a web font service (`source: 'web'`, e.g. Google
+   Fonts), its catalog is far larger than the installed fonts and listed most popular first:
+   narrow it by `category` and by the `tags` the result counts (`display`, `slab-serif`,
+   `variable-wdth`…) to find faces with the character you want, rather than taking the top few.
 2. **Load before rendering.** `load_font` before drawing or capturing text in a web font, so the
    first frame does not use the fallback. `loaded: false` means the fallback will show.
 3. **Set up the scale.** `generate_type_hierarchy` for named tokens and ready CSS custom
@@ -62,7 +66,7 @@ what this machine has.
 
 | Tool | When to use | Returns |
 | --- | --- | --- |
-| `list_fonts` | Discover families the host offers; filter by `category`, `source`, `weight`, `style`, `query`; `limit` default 50 | `{ fonts: [{ family, category, weights, styles, isVariable?, source }], total, truncated }` |
+| `list_fonts` | Discover families the host offers; filter by `category`, `source`, `weight`, `style`, `tags`, `query`; `limit` default 50 | `{ fonts: [{ family, category, weights, styles, isVariable?, source, tags? }], total, truncated, tags: [{ tag, count }] }` |
 | `resolve_font_stack` | Turn a family (or stack) into a resilient `font-family` value for its category; also says if the provider lists it | `{ stack, families, category, available }` |
 | `suggest_type_scale` | Sizes for arbitrary integer `steps` (-12…12) from `baseSize` (px, default 16) and `ratio` (name or number, default major-third) | `{ ratio, baseSize, steps: [{ name, step, size, lineHeight, letterSpacing }] }` |
 | `generate_type_hierarchy` | Named tokens caption…display on one scale, with CSS custom properties (`prefix`, `selector`) | `{ ratio, ratioName?, baseSize, steps: { body, h1, … }, css }` |