@pixerate/editor 0.161.0 → 0.162.1

package/dist/typography/index.js

@@ -0,0 +1,1099 @@
+import {
+  FONT_PLATFORMS,
+  SYSTEM_FONT_CATALOG,
+  combineFontProviders,
+  createCatalogFontProvider,
+  createSystemFontProvider,
+  createWebFontProvider,
+  ensureFontsLoaded,
+  filterFonts,
+  findFont,
+  fontFaceCss,
+  fontHasWeight,
+  guessFontCategory,
+  isFontWeight,
+  nearestFontWeight,
+  normalizeFontWeight,
+  webFontSummary
+} from "../chunk-CJE5MOIS.js";
+import {
+  contrastLevel,
+  contrastRatio,
+  parseColor,
+  suggestAccessibleForeground
+} from "../chunk-4VU4CP7R.js";
+import "../chunk-6ONMQ6WF.js";
+
+// src/typography/types.ts
+var FONT_CATEGORIES = ["sans-serif", "serif", "monospace", "display", "handwriting"];
+var FONT_CATEGORY_LABELS = {
+  all: "All",
+  "sans-serif": "Sans serif",
+  serif: "Serif",
+  monospace: "Monospace",
+  display: "Display",
+  handwriting: "Handwriting"
+};
+var FONT_WEIGHTS = [100, 200, 300, 400, 500, 600, 700, 800, 900];
+var FONT_STYLES = ["normal", "italic", "oblique"];
+
+// src/typography/scale.ts
+var MODULAR_SCALE_RATIOS = {
+  "minor-second": 1.067,
+  "major-second": 1.125,
+  "minor-third": 1.2,
+  "major-third": 1.25,
+  "perfect-fourth": 1.333,
+  "augmented-fourth": 1.414,
+  "perfect-fifth": 1.5,
+  "golden-ratio": 1.618
+};
+var MODULAR_SCALE_RATIO_NAMES = Object.keys(MODULAR_SCALE_RATIOS);
+var TYPE_HIERARCHY_STEPS = {
+  caption: -2,
+  "body-sm": -1,
+  body: 0,
+  h4: 1,
+  h3: 2,
+  h2: 3,
+  h1: 4,
+  display: 5
+};
+var round = (n, places = 2) => {
+  const f = 10 ** places;
+  return Math.round(n * f) / f;
+};
+function getScaleRatio(name) {
+  const ratio = MODULAR_SCALE_RATIOS[name];
+  if (ratio === void 0) throw new Error(`Unknown scale ratio "${name}"; use one of ${MODULAR_SCALE_RATIO_NAMES.join(", ")} or a number above 1.`);
+  return ratio;
+}
+function resolveScaleRatio(ratio) {
+  if (typeof ratio === "string") return getScaleRatio(ratio);
+  if (!Number.isFinite(ratio) || ratio <= 1 || ratio > 4) throw new Error(`Scale ratio ${ratio} is out of range; use a number above 1 and at most 4 (1.25 is a common choice).`);
+  return ratio;
+}
+function recommendedLineHeight(size) {
+  if (size <= 16) return 1.5;
+  if (size >= 64) return 1.1;
+  const t = (size - 16) / 48;
+  return Math.round((1.5 - 0.4 * t) * 20) / 20;
+}
+function recommendedLetterSpacing(size) {
+  if (size < 14) return 0.01;
+  if (size < 24) return 0;
+  if (size < 40) return -0.01;
+  if (size < 64) return -0.02;
+  return -0.03;
+}
+function typeScaleStep(baseSize, ratio, step, name = `step-${step}`) {
+  const size = round(baseSize * ratio ** step);
+  return { name, step, size, lineHeight: recommendedLineHeight(size), letterSpacing: recommendedLetterSpacing(size) };
+}
+function requireBase(baseSize) {
+  if (!Number.isFinite(baseSize) || baseSize <= 0 || baseSize > 512) throw new Error(`Base size ${baseSize} is out of range; use a size in px above 0 and at most 512 (16 is the browser default).`);
+  return baseSize;
+}
+function computeTypeScale(baseSize, ratio, steps = [-2, -1, 0, 1, 2, 3, 4, 5]) {
+  requireBase(baseSize);
+  const r = resolveScaleRatio(ratio);
+  return steps.map((step) => {
+    if (!Number.isInteger(step) || Math.abs(step) > 12) throw new Error(`Step ${step} must be an integer from -12 to 12.`);
+    return typeScaleStep(baseSize, r, step);
+  });
+}
+function generateTypeHierarchy(options = {}) {
+  const baseSize = requireBase(options.baseSize ?? 16);
+  const ratioOption = options.ratio ?? "major-third";
+  const ratio = resolveScaleRatio(ratioOption);
+  const steps = {};
+  for (const [name, step] of Object.entries(TYPE_HIERARCHY_STEPS)) steps[name] = typeScaleStep(baseSize, ratio, step, name);
+  return { ratio, ...typeof ratioOption === "string" ? { ratioName: ratioOption } : {}, baseSize, steps };
+}
+function typeHierarchyToCss(hierarchy, options = {}) {
+  const prefix = options.prefix ?? "font";
+  const root = options.rootFontSize ?? 16;
+  const lines = Object.values(hierarchy.steps).flatMap((s) => [
+    `  --${prefix}-${s.name}-size: ${round(s.size / root, 4)}rem;`,
+    `  --${prefix}-${s.name}-line-height: ${s.lineHeight};`,
+    `  --${prefix}-${s.name}-letter-spacing: ${s.letterSpacing}em;`
+  ]);
+  return `${options.selector ?? ":root"} {
+${lines.join("\n")}
+}`;
+}
+function computeFluidSize(options) {
+  const { minSize, maxSize, minViewport, maxViewport } = options;
+  const root = options.rootFontSize ?? 16;
+  for (const [k, v] of Object.entries({ minSize, maxSize, minViewport, maxViewport, rootFontSize: root })) {
+    if (!Number.isFinite(v) || v <= 0) throw new Error(`${k} must be a positive number of px (got ${v}).`);
+  }
+  if (maxViewport <= minViewport) throw new Error(`maxViewport (${maxViewport}) must be larger than minViewport (${minViewport}).`);
+  const slope = (maxSize - minSize) / (maxViewport - minViewport);
+  const intercept = minSize - slope * minViewport;
+  const lo = Math.min(minSize, maxSize);
+  const hi = Math.max(minSize, maxSize);
+  const rem = (px) => `${round(px / root, 4)}rem`;
+  const sign = intercept < 0 ? "-" : "+";
+  const clampCss = `clamp(${rem(lo)}, ${round(slope * 100, 4)}vw ${sign} ${rem(Math.abs(intercept))}, ${rem(hi)})`;
+  return {
+    clampCss,
+    slope: round(slope, 6),
+    intercept: round(intercept, 4),
+    evaluateAt: (viewport) => round(Math.min(hi, Math.max(lo, intercept + slope * viewport)), 4)
+  };
+}
+
+// src/typography/segment.ts
+function segmenter(granularity, locale) {
+  const Ctor = Intl.Segmenter;
+  return Ctor ? new Ctor(locale, { granularity }) : null;
+}
+function graphemes(text, locale) {
+  const seg = segmenter("grapheme", locale);
+  return seg ? Array.from(seg.segment(text), (s) => s.segment) : Array.from(text);
+}
+function countGraphemes(text, locale) {
+  return graphemes(text, locale).length;
+}
+function rawSegments(text, granularity, locale) {
+  const seg = segmenter(granularity, locale);
+  if (seg) {
+    return Array.from(seg.segment(text), (s) => ({
+      text: s.segment,
+      start: s.index,
+      end: s.index + s.segment.length,
+      ...granularity === "word" ? { isWordLike: !!s.isWordLike } : {}
+    }));
+  }
+  const out = [];
+  if (granularity === "grapheme") {
+    let i = 0;
+    for (const ch of text) {
+      out.push({ text: ch, start: i, end: i + ch.length });
+      i += ch.length;
+    }
+    return out;
+  }
+  const re = granularity === "word" ? /[\p{L}\p{N}\p{M}'’_-]+|\s+|[^\p{L}\p{N}\p{M}\s]/gu : /[^.!?]*(?:[.!?]+|$)\s*/g;
+  for (const m of text.matchAll(re)) {
+    if (!m[0]) continue;
+    out.push({
+      text: m[0],
+      start: m.index,
+      end: m.index + m[0].length,
+      ...granularity === "word" ? { isWordLike: /[\p{L}\p{N}]/u.test(m[0]) } : {}
+    });
+  }
+  return out;
+}
+function lineSegments(text, maxCharacters, locale) {
+  const out = [];
+  const re = /\r\n|\n|\r|\u2028|\u2029/g;
+  let lineStart = 0;
+  const hardLines = [];
+  for (const m of text.matchAll(re)) {
+    hardLines.push({ start: lineStart, end: m.index });
+    lineStart = m.index + m[0].length;
+  }
+  hardLines.push({ start: lineStart, end: text.length });
+  for (const { start, end } of hardLines) {
+    const line = text.slice(start, end);
+    if (!maxCharacters || countGraphemes(line, locale) <= maxCharacters) {
+      out.push({ text: line, start, end });
+      continue;
+    }
+    const words = rawSegments(line, "word", locale);
+    let segStart = 0;
+    let length = 0;
+    let lastEnd = 0;
+    for (const w of words) {
+      const n = countGraphemes(w.text, locale);
+      const isSpace = !w.isWordLike && /^\s+$/.test(w.text);
+      if (!isSpace && length > 0 && length + n > maxCharacters) {
+        out.push({ text: line.slice(segStart, w.start), start: start + segStart, end: start + w.start });
+        segStart = w.start;
+        length = 0;
+      }
+      length += n;
+      lastEnd = w.end;
+    }
+    out.push({ text: line.slice(segStart, lastEnd), start: start + segStart, end: start + lastEnd });
+  }
+  return out;
+}
+function segmentText(text, granularity, options = {}) {
+  if (typeof text !== "string") throw new Error("text must be a string.");
+  let segments;
+  if (granularity === "line") {
+    if (options.maxCharacters !== void 0 && (!Number.isInteger(options.maxCharacters) || options.maxCharacters < 1)) {
+      throw new Error(`maxCharacters must be a positive integer (got ${options.maxCharacters}).`);
+    }
+    segments = lineSegments(text, options.maxCharacters, options.locale);
+  } else if (granularity === "grapheme" || granularity === "word" || granularity === "sentence") {
+    segments = rawSegments(text, granularity, options.locale);
+    if (granularity === "word" && options.wordsOnly) segments = segments.filter((s) => s.isWordLike);
+  } else {
+    throw new Error(`Unknown granularity "${String(granularity)}"; use grapheme, word, sentence or line.`);
+  }
+  return segments.map((s, index) => ({ ...s, index }));
+}
+
+// src/typography/metrics.ts
+var OPTIMAL_MEASURE = { min: 45, max: 75 };
+var RECOMMENDED_LINE_HEIGHT = 1.5;
+var READING_WORDS_PER_MINUTE = 238;
+var ASSUMED_NORMAL_LINE_HEIGHT = 1.2;
+var CHARACTER_WIDTH = {
+  "sans-serif": 0.5,
+  serif: 0.47,
+  monospace: 0.6,
+  display: 0.55,
+  handwriting: 0.5
+};
+var round2 = (n, places = 1) => Math.round(n * 10 ** places) / 10 ** places;
+function estimateCharactersPerLine(width, font) {
+  if (!(width > 0) || !(font.size > 0)) throw new Error("width and size must be positive numbers of px.");
+  const advance = font.size * (CHARACTER_WIDTH[font.category ?? "sans-serif"] + (font.letterSpacing ?? 0));
+  return Math.max(1, Math.floor(width / advance));
+}
+var WORD = /[\p{L}\p{N}][\p{L}\p{N}\p{M}'’-]*/gu;
+function auditTextReadability(text, font = {}) {
+  if (typeof text !== "string") throw new Error("text must be a string.");
+  const issues = [];
+  const words = text.match(WORD) ?? [];
+  const lines = text.split(/\r\n|\n|\r/).map((l) => l.trim()).filter(Boolean);
+  let characters;
+  let wordsPerLine;
+  let source;
+  if (font.width !== void 0 && font.size !== void 0) {
+    source = "width";
+    characters = estimateCharactersPerLine(font.width, { size: font.size, category: font.category, letterSpacing: font.letterSpacing });
+    const avgWordLength = words.length ? countGraphemes(words.join(" ")) / words.length : 5;
+    wordsPerLine = round2(characters / (avgWordLength + 1));
+  } else {
+    source = "lines";
+    characters = lines.length ? round2(lines.reduce((n, l) => n + countGraphemes(l), 0) / lines.length) : 0;
+    wordsPerLine = lines.length ? round2(lines.reduce((n, l) => n + (l.match(WORD)?.length ?? 0), 0) / lines.length) : 0;
+  }
+  const status = characters < OPTIMAL_MEASURE.min ? "too-short" : characters > OPTIMAL_MEASURE.max ? "too-long" : "optimal";
+  let lineRecommendation;
+  if (status === "too-long") {
+    lineRecommendation = `Lines average ${characters} characters; keep body text to ${OPTIMAL_MEASURE.min}\u2013${OPTIMAL_MEASURE.max} (about 66 is ideal) by narrowing the column, e.g. max-width: 66ch.`;
+    issues.push(lineRecommendation);
+  } else if (status === "too-short" && source === "width") {
+    lineRecommendation = `Lines fit about ${characters} characters; short lines break reading rhythm. Widen the column or reduce the font size to reach ${OPTIMAL_MEASURE.min}\u2013${OPTIMAL_MEASURE.max}.`;
+    issues.push(lineRecommendation);
+  } else if (status === "too-short" && lines.length > 1) {
+    lineRecommendation = `Lines average ${characters} characters; for body text aim for ${OPTIMAL_MEASURE.min}\u2013${OPTIMAL_MEASURE.max}. Short lines are fine for headings, captions and lists.`;
+    issues.push(lineRecommendation);
+  } else if (status === "too-short") {
+    lineRecommendation = `A single line of ${characters} characters: the ${OPTIMAL_MEASURE.min}\u2013${OPTIMAL_MEASURE.max} range applies to wrapped paragraphs; pass width and size to estimate their measure.`;
+  }
+  const assumed = font.lineHeight === void 0;
+  const ratio = font.lineHeight ?? ASSUMED_NORMAL_LINE_HEIGHT;
+  const meetsRecommended = ratio >= RECOMMENDED_LINE_HEIGHT;
+  const spacingRecommendation = meetsRecommended ? void 0 : `Line height ${ratio}${assumed ? " (assumed browser normal)" : ""} is below ${RECOMMENDED_LINE_HEIGHT}; set at least ${RECOMMENDED_LINE_HEIGHT} for paragraphs (WCAG 1.4.8), and make sure the layout survives 1.5 line height, 0.12em letter spacing and 0.16em word spacing (WCAG 1.4.12).`;
+  if (spacingRecommendation && (lines.length > 1 || source === "width" || words.length > 12)) issues.push(spacingRecommendation);
+  const letters = text.match(/\p{L}/gu) ?? [];
+  const allCaps = letters.length >= 2 && !/\p{Ll}/u.test(text) && /\p{Lu}/u.test(text);
+  if (allCaps && words.length > 5) issues.push("Long runs of capitals are slower to read; set body text in sentence case and use text-transform or small caps only for short labels.");
+  if (font.size !== void 0 && font.size < 12) issues.push(`Font size ${font.size}px is below 12px; most body text should be 16px or more.`);
+  if (font.letterSpacing !== void 0 && font.letterSpacing < -0.05) issues.push(`Letter spacing ${font.letterSpacing}em is very tight; letters may collide below -0.05em.`);
+  return {
+    lineLength: { characters, words: wordsPerLine, source, status, ...lineRecommendation ? { recommendation: lineRecommendation } : {} },
+    lineSpacing: { ratio, assumed, meetsRecommended, ...spacingRecommendation ? { recommendation: spacingRecommendation } : {} },
+    allCaps,
+    wordCount: words.length,
+    estimatedReadingTimeSeconds: Math.round(words.length / READING_WORDS_PER_MINUTE * 60),
+    issues
+  };
+}
+
+// src/typography/stack.ts
+var GENERIC_FONT_FAMILIES = [
+  "serif",
+  "sans-serif",
+  "monospace",
+  "cursive",
+  "fantasy",
+  "system-ui",
+  "ui-serif",
+  "ui-sans-serif",
+  "ui-monospace",
+  "ui-rounded",
+  "math",
+  "emoji",
+  "fangsong"
+];
+var FONT_STACKS = {
+  "system-ui": 'system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif',
+  "humanist-sans": 'Optima, Candara, Calibri, "Trebuchet MS", "Noto Sans", sans-serif',
+  "geometric-sans": '"Century Gothic", Futura, "Avenir Next", Avenir, "URW Gothic L", sans-serif',
+  "editorial-serif": 'Charter, "Bitstream Charter", "Sitka Text", Cambria, Georgia, serif',
+  "transitional-serif": 'Baskerville, "Baskerville Old Face", "Hoefler Text", Garamond, "Times New Roman", Times, serif',
+  "code-mono": 'ui-monospace, "SFMono-Regular", "Cascadia Code", Menlo, Consolas, "DejaVu Sans Mono", monospace',
+  handwriting: '"Segoe Print", "Bradley Hand", Chilanka, "Comic Sans MS", cursive',
+  display: 'Impact, Haettenschweiler, "Arial Narrow Bold", "Franklin Gothic Bold", sans-serif'
+};
+var FONT_STACK_NAMES = Object.keys(FONT_STACKS);
+var CATEGORY_FALLBACK_STACK = {
+  "sans-serif": "system-ui",
+  serif: "editorial-serif",
+  monospace: "code-mono",
+  display: "system-ui",
+  handwriting: "handwriting"
+};
+var GENERIC = new Set(GENERIC_FONT_FAMILIES);
+function parseFontFamily(stack) {
+  const out = [];
+  let current = "";
+  let quote = null;
+  let quoted = false;
+  const push = () => {
+    const name = quoted ? current : current.trim().replace(/\s+/g, " ");
+    if (name) out.push(name);
+    current = "";
+    quoted = false;
+  };
+  for (let i = 0; i < stack.length; i++) {
+    const ch = stack[i];
+    if (ch === "\\" && i + 1 < stack.length) {
+      current += stack[++i];
+      continue;
+    }
+    if (quote) {
+      if (ch === quote) quote = null;
+      else current += ch;
+      continue;
+    }
+    if (ch === '"' || ch === "'") {
+      quote = ch;
+      quoted = true;
+      current = "";
+      continue;
+    }
+    if (ch === ",") {
+      push();
+      continue;
+    }
+    if (quoted) continue;
+    current += ch;
+  }
+  push();
+  return out;
+}
+function quoteFontFamily(name) {
+  if (GENERIC.has(name)) return name;
+  const ident = /^-?[_a-zA-Z\u00a0-\uffff][_a-zA-Z0-9\u00a0-\uffff-]*$/;
+  if (!name.includes(" ") && ident.test(name)) return name;
+  return `"${name.replace(/\\/g, "\\\\").replace(/"/g, '\\"')}"`;
+}
+function formatFontFamily(families) {
+  const seen = /* @__PURE__ */ new Set();
+  const out = [];
+  for (const f of families) {
+    const key = f.toLowerCase();
+    if (!f || seen.has(key)) continue;
+    seen.add(key);
+    out.push(quoteFontFamily(f));
+  }
+  return out.join(", ");
+}
+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 = category ?? guessFontCategory(families[0]);
+  return formatFontFamily([...families, ...parseFontFamily(FONT_STACKS[CATEGORY_FALLBACK_STACK[cat]])]);
+}
+
+// src/typography/accessibility.ts
+var LARGE_TEXT_PX = 24;
+var LARGE_BOLD_TEXT_PX = 14 * 4 / 3;
+function isLargeText(font) {
+  const bold = normalizeFontWeight(font.weight) >= 700;
+  return font.size >= LARGE_TEXT_PX || bold && font.size >= LARGE_BOLD_TEXT_PX - 0.01;
+}
+function checkTypographyAccessibility(options) {
+  const { font } = options;
+  if (!Number.isFinite(font.size) || font.size <= 0) throw new Error(`Font size ${font.size} must be a positive number of px.`);
+  const fg = parseColor(options.foreground);
+  if (!fg) throw new Error(`"${options.foreground}" is not a colour I can read; use hex (#2a4b8d), rgb(), hsl(), oklch() or a CSS colour name.`);
+  const bg = parseColor(options.background);
+  if (!bg) throw new Error(`"${options.background}" is not a colour I can read; use hex (#ffffff), rgb(), hsl(), oklch() or a CSS colour name.`);
+  const large = isLargeText(font);
+  const ratio = Math.round(contrastRatio(fg, bg) * 100) / 100;
+  const level = contrastLevel(ratio, { large });
+  const passesAA = level !== "fail";
+  const bold = normalizeFontWeight(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 = normalizeFontWeight(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 : suggestAccessibleForeground(fg, bg, { large });
+  return {
+    ratio,
+    large,
+    level,
+    passesAA,
+    passesAAA: level === "AAA",
+    required,
+    ...suggestion ? { suggestion } : {},
+    largeTextMinSize: Math.round((bold ? LARGE_BOLD_TEXT_PX : LARGE_TEXT_PX) * 100) / 100,
+    issues
+  };
+}
+
+// src/typography/picker.ts
+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) => normalizeFontWeight(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);
+}
+var DEFAULT_PREVIEW_TEXT = "The quick brown fox jumps over the lazy dog";
+var clamp = (n, lo, hi) => Math.min(hi, Math.max(lo, n));
+var FontPickerModel = class {
+  state;
+  listeners = /* @__PURE__ */ new Set();
+  valueListeners = /* @__PURE__ */ new Set();
+  recentFamilies;
+  destroyed = false;
+  provider;
+  maxRecent;
+  loadOnSelect;
+  onChange;
+  constructor(options = {}) {
+    this.provider = options.provider;
+    this.maxRecent = options.maxRecent ?? 8;
+    this.loadOnSelect = options.loadOnSelect ?? true;
+    this.onChange = options.onChange;
+    this.recentFamilies = [...options.recent ?? []];
+    const fonts = [...options.fonts ?? []];
+    const v = options.value ?? {};
+    const family = v.family ?? fonts[0]?.family ?? "system-ui";
+    const known = findFont(fonts, family);
+    this.state = this.derive({
+      value: {
+        family: known?.family ?? family,
+        weight: normalizeFontWeight(v.weight),
+        style: v.style ?? "normal",
+        size: v.size ?? 16,
+        lineHeight: v.lineHeight ?? 1.5,
+        letterSpacing: v.letterSpacing ?? 0,
+        ...v.category ?? known?.category ? { category: v.category ?? known?.category } : {}
+      },
+      category: "all",
+      query: "",
+      fonts,
+      results: [],
+      recent: [],
+      highlighted: -1,
+      previewText: options.previewText ?? DEFAULT_PREVIEW_TEXT,
+      loading: false,
+      loadStatus: {}
+    });
+  }
+  /** The current state. The same object is returned until something changes. */
+  getState = () => this.state;
+  /** Calls `listener` after every change; returns an unsubscribe function. */
+  subscribe = (listener) => {
+    this.listeners.add(listener);
+    return () => this.listeners.delete(listener);
+  };
+  /**
+   * Calls `listener` when the value changes through the picker or its agent tools (not through
+   * `setValue`, so a controlled component does not echo its own updates). Returns an unsubscribe.
+   */
+  onValueChange = (listener) => {
+    this.valueListeners.add(listener);
+    return () => this.valueListeners.delete(listener);
+  };
+  /** The selected value as a {@link FontSpec}. */
+  get value() {
+    const { category, ...rest } = this.state.value;
+    return { ...rest, ...category ? { category } : {} };
+  }
+  /** The selected family's summary, if it is in `fonts`. */
+  get selectedFont() {
+    return findFont(this.state.fonts, this.state.value.family);
+  }
+  /** Weights the selected family offers (all nine when unknown or variable). */
+  get availableWeights() {
+    return offeredWeights(this.selectedFont);
+  }
+  /** Styles the selected family offers (`normal` when unknown). */
+  get availableStyles() {
+    return this.selectedFont?.styles.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, v.category ?? this.selectedFont?.category),
+      fontWeight: String(v.weight),
+      fontStyle: v.style,
+      fontSize: `${v.size}px`,
+      lineHeight: String(v.lineHeight),
+      letterSpacing: `${v.letterSpacing}em`
+    };
+  }
+  /** A `font-family` value for previewing any family in a list. */
+  familyCss(font) {
+    return typeof font === "string" ? resolveFontFallback(font) : resolveFontFallback(font.family, font.category);
+  }
+  /** Fetches fonts from the provider. Keeps the current list when it fails. */
+  async refresh() {
+    if (!this.provider) return this.state.fonts;
+    this.set({ loading: true, error: void 0 });
+    try {
+      const fonts = await this.provider.listFonts();
+      if (this.destroyed) return fonts;
+      const known = findFont(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) {
+      this.set({ loading: false, error: e instanceof Error ? e.message : String(e) });
+      return this.state.fonts;
+    }
+  }
+  setQuery(query) {
+    this.set({ query, highlighted: -1 });
+  }
+  setCategory(category) {
+    if (category !== "all" && !["sans-serif", "serif", "monospace", "display", "handwriting"].includes(category)) {
+      throw new Error(`Unknown category "${category}"; use all, sans-serif, serif, monospace, display or handwriting.`);
+    }
+    this.set({ category, highlighted: -1 });
+  }
+  setPreviewText(previewText) {
+    this.set({ previewText });
+  }
+  /**
+   * Selects a family. Throws when `fonts` is non-empty and does not list it. Keeps the weight if
+   * the family has it, else picks the nearest one; keeps the style if offered, else `normal`.
+   */
+  selectFamily(family) {
+    const font = findFont(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 = font?.family ?? family.trim();
+    if (!name) throw new Error("family must not be empty.");
+    const weight = font ? nearestFontWeight(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;
+    this.commit({ ...rest, family: name, weight, style, ...font ? { category: font.category } : {} });
+    if (this.loadOnSelect) void this.loadFamily(name);
+  }
+  /** Sets the weight; snaps to the nearest weight the family offers. */
+  setWeight(weight) {
+    this.commit({ ...this.state.value, weight: nearestFontWeight(normalizeFontWeight(weight), this.availableWeights) });
+  }
+  setStyle(style) {
+    if (!["normal", "italic", "oblique"].includes(style)) throw new Error(`Unknown style "${style}"; use normal, italic or oblique.`);
+    this.commit({ ...this.state.value, style });
+  }
+  /** Font size in px, clamped to 1–1000. */
+  setSize(size) {
+    if (!Number.isFinite(size)) return;
+    this.commit({ ...this.state.value, size: clamp(Math.round(size * 100) / 100, 1, 1e3) });
+  }
+  /** Unitless line-height, clamped to 0.5–4. */
+  setLineHeight(lineHeight) {
+    if (!Number.isFinite(lineHeight)) return;
+    this.commit({ ...this.state.value, lineHeight: clamp(Math.round(lineHeight * 100) / 100, 0.5, 4) });
+  }
+  /** Tracking in em, clamped to -0.5–1. */
+  setLetterSpacing(letterSpacing) {
+    if (!Number.isFinite(letterSpacing)) return;
+    this.commit({ ...this.state.value, letterSpacing: clamp(Math.round(letterSpacing * 1e3) / 1e3, -0.5, 1) });
+  }
+  /** Replaces the value (for controlled components). Does not call `onChange` or touch recents. */
+  setValue(value) {
+    const v = this.state.value;
+    const family = value.family ?? v.family;
+    const known = findFont(this.state.fonts, family);
+    const next = {
+      family: known?.family ?? family,
+      weight: value.weight !== void 0 ? normalizeFontWeight(value.weight) : v.weight,
+      style: value.style ?? v.style,
+      size: value.size ?? v.size,
+      lineHeight: value.lineHeight ?? v.lineHeight,
+      letterSpacing: value.letterSpacing ?? v.letterSpacing,
+      ...value.category ?? known?.category ?? (family === v.family ? v.category : void 0) ? { category: value.category ?? known?.category ?? v.category } : {}
+    };
+    if (JSON.stringify(next) === JSON.stringify(v)) return;
+    this.set({ value: next });
+  }
+  /** Moves the highlight through `results` (wraps around). */
+  moveHighlight(delta) {
+    const n = this.state.results.length;
+    if (!n) return;
+    const current = this.state.highlighted;
+    const next = current < 0 ? delta > 0 ? 0 : n - 1 : ((current + delta) % n + n) % n;
+    this.set({ highlighted: next });
+  }
+  setHighlight(index) {
+    this.set({ highlighted: clamp(Math.trunc(index), -1, this.state.results.length - 1) });
+  }
+  /** Selects the highlighted result. Returns whether there was one. */
+  commitHighlight() {
+    const font = this.state.results[this.state.highlighted];
+    if (!font) return false;
+    this.selectFamily(font.family);
+    return true;
+  }
+  /**
+   * Handles combobox keys (ArrowDown/ArrowUp/Home/End/Enter/Escape). Returns whether the key was
+   * handled, so the caller can `preventDefault`.
+   */
+  handleKey(key) {
+    switch (key) {
+      case "ArrowDown":
+        this.moveHighlight(1);
+        return true;
+      case "ArrowUp":
+        this.moveHighlight(-1);
+        return true;
+      case "Home":
+        if (!this.state.results.length) return false;
+        this.setHighlight(0);
+        return true;
+      case "End":
+        if (!this.state.results.length) return false;
+        this.setHighlight(this.state.results.length - 1);
+        return true;
+      case "Enter":
+        return this.commitHighlight();
+      case "Escape":
+        if (!this.state.query && this.state.highlighted < 0) return false;
+        this.set({ query: "", highlighted: -1 });
+        return true;
+      default:
+        return false;
+    }
+  }
+  /** Loads a family's face through the provider (for previews) and tracks its status. */
+  async loadFamily(family, weight, style) {
+    const key = family.toLowerCase();
+    if (!this.provider?.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, weight ?? this.state.value.weight, style ?? this.state.value.style).catch(() => false);
+    if (!this.destroyed) this.set({ loadStatus: { ...this.state.loadStatus, [key]: ok ? "loaded" : "failed" } });
+    return ok;
+  }
+  destroy() {
+    this.destroyed = true;
+    this.listeners.clear();
+    this.valueListeners.clear();
+  }
+  commit(value) {
+    if (JSON.stringify(value) === JSON.stringify(this.state.value)) {
+      this.set({});
+      return;
+    }
+    this.set({ value });
+    const spec = this.value;
+    this.onChange?.(spec);
+    for (const l of [...this.valueListeners]) l(spec);
+  }
+  derive(state) {
+    const results = filterFonts(state.fonts, { ...state.category !== "all" ? { category: state.category } : {}, query: state.query });
+    const recent = this.recentFamilies.map((f) => findFont(state.fonts, f)).filter((f) => !!f);
+    return { ...state, results, recent, highlighted: Math.min(state.highlighted, results.length - 1) };
+  }
+  set(patch) {
+    if (this.destroyed) return;
+    const next = { ...this.state, ...patch };
+    if (patch.error === void 0 && "error" in patch) delete next.error;
+    this.state = this.derive(next);
+    for (const l of [...this.listeners]) l(this.state);
+  }
+};
+function createFontPicker(options = {}) {
+  return new FontPickerModel(options);
+}
+
+// src/typography/tools.ts
+var READ = { readOnlyHint: true, destructiveHint: false, idempotentHint: true, openWorldHint: false };
+var CATEGORY_SCHEMA = { type: "string", enum: FONT_CATEGORIES, description: "Font category: sans-serif, serif, monospace, display or handwriting." };
+var WEIGHT_SCHEMA = {
+  oneOf: [
+    { type: "integer", enum: FONT_WEIGHTS, description: "Numeric weight 100\u2013900 in steps of 100." },
+    { type: "string", enum: ["normal", "bold"], description: "normal (400) or bold (700)." }
+  ],
+  description: "Font weight: 100\u2013900 in steps of 100, or normal / bold. Default 400."
+};
+var STYLE_SCHEMA = { type: "string", enum: FONT_STYLES, description: "Font style: normal, italic or oblique. Default normal." };
+var RATIO_SCHEMA = {
+  oneOf: [
+    { type: "string", enum: MODULAR_SCALE_RATIO_NAMES, description: "Named ratio." },
+    { type: "number", exclusiveMinimum: 1, maximum: 4, description: "Custom ratio above 1 and at most 4." }
+  ],
+  description: `Scale ratio: a name (${MODULAR_SCALE_RATIO_NAMES.join(", ")}) or a number above 1 and at most 4. Default major-third (1.25).`
+};
+var rejectUnknownRatio = (ratio) => {
+  if (ratio === void 0) return;
+  if (typeof ratio === "string" || typeof ratio === "number") resolveScaleRatio(ratio);
+};
+function createTypographyToolProvider(options = {}) {
+  const fonts = options.provider ?? createSystemFontProvider();
+  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.",
+    inputSchema: {
+      type: "object",
+      properties: {
+        category: CATEGORY_SCHEMA,
+        source: { type: "string", enum: ["system", "web", "custom"], description: "Only fonts from this source: system (installed), web (loaded over the network) or custom (host-supplied)." },
+        weight: WEIGHT_SCHEMA,
+        style: STYLE_SCHEMA,
+        query: { type: "string", description: "Case-insensitive part of the family name." },
+        limit: { type: "integer", minimum: 1, maximum: 500, description: "Most fonts to return (default 50, max 500)." }
+      },
+      additionalProperties: false
+    },
+    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 limit = args.limit ?? 50;
+      return { fonts: kept.slice(0, limit), total: kept.length, truncated: kept.length > limit };
+    }
+  };
+  const resolveFontStack = {
+    name: "resolve_font_stack",
+    title: "Resolve font stack",
+    description: "Builds a resilient CSS font-family value for a family (or an existing stack): the family, then a tested cross-platform fallback stack for its category, ending in a generic family. Returns { stack, families, category, available } where available says whether the font provider lists the first family.",
+    inputSchema: {
+      type: "object",
+      properties: {
+        family: { type: "string", description: 'A family name (Inter) or a CSS font-family value ("Inter", Arial).' },
+        category: { ...CATEGORY_SCHEMA, description: `${CATEGORY_SCHEMA.description} Default: from the catalog, or guessed from the name.` }
+      },
+      required: ["family"],
+      additionalProperties: false
+    },
+    annotations: { title: "Resolve font stack", ...READ },
+    handler: async (args) => {
+      const families = parseFontFamily(String(args.family ?? ""));
+      if (!families.length) throw new Error('family must name at least one font, e.g. "Inter".');
+      const first = families[0];
+      const listed = findFont(await fonts.listFonts(), first);
+      const category = args.category ?? listed?.category ?? guessFontCategory(first);
+      const stack = resolveFontFallback(args.family, category);
+      return { stack, families: parseFontFamily(stack), category, available: !!listed || !!await fonts.hasFont(first) };
+    }
+  };
+  const suggestTypeScale = {
+    name: "suggest_type_scale",
+    title: "Suggest type scale",
+    description: "Computes a modular type scale: size = baseSize \xD7 ratio^step for each step, with a recommended unitless line-height and tracking (em) per size. Returns { ratio, baseSize, steps: [{ name, step, size, lineHeight, letterSpacing }] }. For named heading tokens use generate_type_hierarchy instead.",
+    inputSchema: {
+      type: "object",
+      properties: {
+        baseSize: { type: "number", exclusiveMinimum: 0, maximum: 512, description: "Size of step 0 in px (default 16)." },
+        ratio: RATIO_SCHEMA,
+        steps: { type: "array", items: { type: "integer", minimum: -12, maximum: 12, description: "Step exponent." }, minItems: 1, maxItems: 25, description: "Integer steps to compute, -12 to 12 (default -2 to 5)." }
+      },
+      additionalProperties: false
+    },
+    annotations: { title: "Suggest type scale", ...READ },
+    handler: (args) => {
+      const baseSize = args.baseSize ?? 16;
+      const ratio = resolveScaleRatio(args.ratio ?? "major-third");
+      return { ratio, baseSize, steps: computeTypeScale(baseSize, ratio, args.steps) };
+    }
+  };
+  const generateHierarchy = {
+    name: "generate_type_hierarchy",
+    title: "Generate type hierarchy",
+    description: "Generates typographic tokens caption, body-sm, body, h4, h3, h2, h1 and display on one modular scale, with line-heights (1.5 for body sizes, tighter for headings) and tracking. Returns { ratio, ratioName?, baseSize, steps: { <name>: { size, lineHeight, letterSpacing, step } }, css } where css declares --<prefix>-<name>-size / -line-height / -letter-spacing custom properties.",
+    inputSchema: {
+      type: "object",
+      properties: {
+        baseSize: { type: "number", exclusiveMinimum: 0, maximum: 512, description: "Body size in px (default 16)." },
+        ratio: RATIO_SCHEMA,
+        prefix: { type: "string", pattern: "^[a-z][a-z0-9-]*$", description: 'Custom property prefix (default "font").' },
+        selector: { type: "string", description: 'CSS selector for the custom properties (default ":root").' }
+      },
+      additionalProperties: false
+    },
+    annotations: { title: "Generate type hierarchy", ...READ },
+    handler: (args) => {
+      rejectUnknownRatio(args.ratio);
+      const hierarchy = generateTypeHierarchy({ baseSize: args.baseSize, ratio: args.ratio });
+      return { ...hierarchy, css: typeHierarchyToCss(hierarchy, { prefix: args.prefix, selector: args.selector }) };
+    }
+  };
+  const fluidSize = {
+    name: "compute_fluid_type_size",
+    title: "Compute fluid type size",
+    description: "Computes a font size that scales linearly with viewport width between two breakpoints, as a CSS clamp() with rem bounds (so browser zoom and font settings still apply). Returns { clampCss, slope, intercept, samples: [{ viewport, size }] } with sizes at both breakpoints and the midpoint.",
+    inputSchema: {
+      type: "object",
+      properties: {
+        minSize: { type: "number", exclusiveMinimum: 0, description: "Size in px at minViewport and below." },
+        maxSize: { type: "number", exclusiveMinimum: 0, description: "Size in px at maxViewport and above." },
+        minViewport: { type: "number", exclusiveMinimum: 0, description: "Viewport width in px where scaling starts (e.g. 375)." },
+        maxViewport: { type: "number", exclusiveMinimum: 0, description: "Viewport width in px where scaling stops (e.g. 1440)." },
+        rootFontSize: { type: "number", exclusiveMinimum: 0, description: "Root font size in px for rem values (default 16)." }
+      },
+      required: ["minSize", "maxSize", "minViewport", "maxViewport"],
+      additionalProperties: false
+    },
+    annotations: { title: "Compute fluid type size", ...READ },
+    handler: (args) => {
+      const fluid = computeFluidSize(args);
+      const mid = (args.minViewport + args.maxViewport) / 2;
+      return {
+        clampCss: fluid.clampCss,
+        slope: fluid.slope,
+        intercept: fluid.intercept,
+        samples: [args.minViewport, mid, args.maxViewport].map((viewport) => ({ viewport, size: fluid.evaluateAt(viewport) }))
+      };
+    }
+  };
+  const auditReadability = {
+    name: "audit_text_readability",
+    title: "Audit text readability",
+    description: "Audits body text for line length (45\u201375 characters per line), line spacing (at least 1.5, WCAG 1.4.8), long runs of capitals, tiny sizes and tight tracking, and estimates reading time. Line length comes from the text's own line breaks, or is estimated from width and fontSize when both are given. Returns { lineLength: { characters, words, source, status, recommendation? }, lineSpacing: { ratio, assumed, meetsRecommended, recommendation? }, allCaps, wordCount, estimatedReadingTimeSeconds, issues }.",
+    inputSchema: {
+      type: "object",
+      properties: {
+        text: { type: "string", maxLength: 1e5, description: "The text as it is set, with its line breaks." },
+        fontSize: { type: "number", exclusiveMinimum: 0, description: "Font size in px." },
+        lineHeight: { type: "number", exclusiveMinimum: 0, description: "Unitless line-height (1.5 = 150 %). Default: assumed 1.2 (browser normal)." },
+        letterSpacing: { type: "number", description: "Tracking in em (default 0)." },
+        width: { type: "number", exclusiveMinimum: 0, description: "Column width in px; with fontSize, estimates characters per line." },
+        category: { ...CATEGORY_SCHEMA, description: `${CATEGORY_SCHEMA.description} Used to estimate character width (default sans-serif).` }
+      },
+      required: ["text"],
+      additionalProperties: false
+    },
+    annotations: { title: "Audit text readability", ...READ },
+    handler: (args) => {
+      if (args.width !== void 0 && args.fontSize === void 0) throw new Error("width needs fontSize to estimate characters per line; pass both, or neither to measure the text's own lines.");
+      return auditTextReadability(args.text, { size: args.fontSize, lineHeight: args.lineHeight, letterSpacing: args.letterSpacing, width: args.width, category: args.category });
+    }
+  };
+  const checkAccessibility = {
+    name: "check_typography_accessibility",
+    title: "Check typography accessibility",
+    description: "Checks text colour against its background with the real font size and weight: decides WCAG 2 large text (24px, or 18.67px bold) itself, reports the ratio, level and required AA / AAA ratios, flags tiny or thin type, and suggests a passing foreground (same hue, nearest OKLCH lightness) when AA fails. Returns { ratio, large, level, passesAA, passesAAA, required: { AA, AAA }, suggestion?, largeTextMinSize, issues }.",
+    inputSchema: {
+      type: "object",
+      properties: {
+        foreground: { type: "string", description: "Text colour: hex, rgb(), hsl(), oklch() or a CSS colour name." },
+        background: { type: "string", description: "Surface colour behind the text, same formats." },
+        fontSize: { type: "number", exclusiveMinimum: 0, description: "Font size in CSS px (12pt = 16px)." },
+        fontWeight: WEIGHT_SCHEMA
+      },
+      required: ["foreground", "background", "fontSize"],
+      additionalProperties: false
+    },
+    annotations: { title: "Check typography accessibility", ...READ },
+    handler: (args) => checkTypographyAccessibility({ font: { size: args.fontSize, weight: args.fontWeight }, foreground: args.foreground, background: args.background })
+  };
+  const segment = {
+    name: "segment_text",
+    title: "Segment text",
+    description: "Splits text into graphemes (letters as people see them, emoji included), words, sentences or lines, with UTF-16 start/end offsets, for staggering live text in animation without converting it to outlines. Returns { segments: [{ text, start, end, index, isWordLike? }], count }.",
+    inputSchema: {
+      type: "object",
+      properties: {
+        text: { type: "string", maxLength: 1e5, description: "Text to split." },
+        granularity: { type: "string", enum: ["grapheme", "word", "sentence", "line"], description: "grapheme, word, sentence or line (line breaks, plus wrapping with maxCharacters)." },
+        locale: { type: "string", description: "BCP 47 locale for word and sentence rules (default: the runtime locale)." },
+        wordsOnly: { type: "boolean", description: "For word: drop spaces and punctuation (default false)." },
+        maxCharacters: { type: "integer", minimum: 1, description: "For line: wrap lines longer than this many characters at word boundaries." }
+      },
+      required: ["text", "granularity"],
+      additionalProperties: false
+    },
+    annotations: { title: "Segment text", ...READ },
+    handler: (args) => {
+      if (args.wordsOnly !== void 0 && args.granularity !== "word") throw new Error('wordsOnly only applies to granularity "word".');
+      if (args.maxCharacters !== void 0 && args.granularity !== "line") throw new Error('maxCharacters only applies to granularity "line".');
+      const segments = segmentText(args.text, args.granularity, { locale: args.locale, wordsOnly: args.wordsOnly, maxCharacters: args.maxCharacters });
+      return { segments, count: segments.length };
+    }
+  };
+  const loadFont = {
+    name: "load_font",
+    title: "Load font",
+    description: "Loads a font face through the host so it can render (web fonts are fetched; installed fonts are ready at once). Call it before rendering or capturing text in a family from list_fonts. Returns { family, weight, style, loaded }; loaded false means the face could not be loaded and a fallback will show.",
+    inputSchema: {
+      type: "object",
+      properties: {
+        family: { type: "string", description: "Family name from list_fonts." },
+        weight: WEIGHT_SCHEMA,
+        style: STYLE_SCHEMA
+      },
+      required: ["family"],
+      additionalProperties: false
+    },
+    annotations: { title: "Load font", readOnlyHint: false, destructiveHint: false, idempotentHint: true, openWorldHint: true },
+    handler: async (args) => {
+      const listed = findFont(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 = normalizeFontWeight(args.weight);
+      const style = args.style ?? "normal";
+      const loaded = await fonts.loadFont(listed.family, weight, style);
+      return { family: listed.family, weight, style, loaded };
+    }
+  };
+  return {
+    id: options.id ?? "typography",
+    namespace: options.namespace ?? "typography",
+    title: "Typography",
+    description: "List and load fonts, build fallback stacks, generate type scales and hierarchies, compute fluid sizes, audit readability and type-aware contrast, and split text for animation.",
+    skill: "pixerate-typography",
+    tools: [listFonts, resolveFontStack, suggestTypeScale, generateHierarchy, fluidSize, auditReadability, checkAccessibility, segment, ...fonts.loadFont ? [loadFont] : []]
+  };
+}
+function createFontPickerToolProvider(model, options = {}) {
+  const snapshot = () => ({ value: model.value, css: model.css, availableWeights: model.availableWeights, availableStyles: model.availableStyles });
+  const getSelection = {
+    name: "get_font_selection",
+    title: "Get font selection",
+    description: "Returns the font picker's current value and what the chosen family offers: { value: { family, weight, style, size, lineHeight, letterSpacing, category? }, css: { fontFamily, fontWeight, fontStyle, fontSize, lineHeight, letterSpacing }, availableWeights, availableStyles }.",
+    inputSchema: { type: "object", properties: {}, additionalProperties: false },
+    annotations: { title: "Get font selection", ...READ },
+    handler: () => snapshot()
+  };
+  const setSelection = {
+    name: "set_font_selection",
+    title: "Set font selection",
+    description: "Changes the font picker in one step: any of family (from list_fonts), weight, style, size, lineHeight and letterSpacing. A weight the family lacks snaps to the nearest one it has. Everything is validated before anything changes. Returns the new selection, as get_font_selection does.",
+    inputSchema: {
+      type: "object",
+      properties: {
+        family: { type: "string", description: "Family name the picker lists (see list_fonts)." },
+        weight: WEIGHT_SCHEMA,
+        style: STYLE_SCHEMA,
+        size: { type: "number", minimum: 1, maximum: 1e3, description: "Font size in px, 1\u20131000." },
+        lineHeight: { type: "number", minimum: 0.5, maximum: 4, description: "Unitless line-height, 0.5\u20134." },
+        letterSpacing: { type: "number", minimum: -0.5, maximum: 1, description: "Tracking in em, -0.5\u20131." }
+      },
+      additionalProperties: false
+    },
+    annotations: { title: "Set font selection", readOnlyHint: false, destructiveHint: false, idempotentHint: true, openWorldHint: false },
+    handler: (args) => {
+      const reason = options.readOnly?.();
+      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 && !findFont(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 ? findFont(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);
+      if (args.weight !== void 0) model.setWeight(args.weight);
+      if (args.style !== void 0) model.setStyle(args.style);
+      if (args.size !== void 0) model.setSize(args.size);
+      if (args.lineHeight !== void 0) model.setLineHeight(args.lineHeight);
+      if (args.letterSpacing !== void 0) model.setLetterSpacing(args.letterSpacing);
+      return snapshot();
+    }
+  };
+  const listPickerFonts = {
+    name: "list_picker_fonts",
+    title: "List picker fonts",
+    description: "Lists the families this font picker offers, optionally filtered by category and a name query, newest recent families first in recent. Returns { fonts: [{ family, category, weights, styles, isVariable?, source }], recent: [family], total, truncated }.",
+    inputSchema: {
+      type: "object",
+      properties: {
+        category: CATEGORY_SCHEMA,
+        query: { type: "string", description: "Case-insensitive part of the family name." },
+        limit: { type: "integer", minimum: 1, maximum: 500, description: "Most fonts to return (default 50, max 500)." }
+      },
+      additionalProperties: false
+    },
+    annotations: { title: "List picker fonts", ...READ },
+    handler: (args) => {
+      const state = model.getState();
+      const kept = filterFonts(state.fonts, { category: args.category, query: args.query });
+      const limit = args.limit ?? 50;
+      return { fonts: kept.slice(0, limit), recent: state.recent.map((f) => f.family), total: kept.length, truncated: kept.length > limit };
+    }
+  };
+  return {
+    id: options.id ?? "font-picker",
+    namespace: options.namespace ?? "fontpicker",
+    title: "Font picker",
+    description: "Read and change the font picker on screen: family, weight, style, size, line height and letter spacing.",
+    skill: "pixerate-typography",
+    tools: [getSelection, listPickerFonts, setSelection]
+  };
+}
+export {
+  ASSUMED_NORMAL_LINE_HEIGHT,
+  CATEGORY_FALLBACK_STACK,
+  DEFAULT_PREVIEW_TEXT,
+  FONT_CATEGORIES,
+  FONT_CATEGORY_LABELS,
+  FONT_PLATFORMS,
+  FONT_STACKS,
+  FONT_STACK_NAMES,
+  FONT_STYLES,
+  FONT_WEIGHTS,
+  FontPickerModel,
+  GENERIC_FONT_FAMILIES,
+  LARGE_BOLD_TEXT_PX,
+  LARGE_TEXT_PX,
+  MODULAR_SCALE_RATIOS,
+  MODULAR_SCALE_RATIO_NAMES,
+  OPTIMAL_MEASURE,
+  READING_WORDS_PER_MINUTE,
+  RECOMMENDED_LINE_HEIGHT,
+  SYSTEM_FONT_CATALOG,
+  TYPE_HIERARCHY_STEPS,
+  auditTextReadability,
+  checkTypographyAccessibility,
+  combineFontProviders,
+  computeFluidSize,
+  computeTypeScale,
+  countGraphemes,
+  createCatalogFontProvider,
+  createFontPicker,
+  createFontPickerToolProvider,
+  createSystemFontProvider,
+  createTypographyToolProvider,
+  createWebFontProvider,
+  ensureFontsLoaded,
+  estimateCharactersPerLine,
+  filterFonts,
+  findFont,
+  fontFaceCss,
+  fontHasWeight,
+  formatFontFamily,
+  generateTypeHierarchy,
+  getScaleRatio,
+  graphemes,
+  guessFontCategory,
+  isFontWeight,
+  isLargeText,
+  nearestFontWeight,
+  normalizeFontWeight,
+  offeredWeights,
+  parseFontFamily,
+  quoteFontFamily,
+  recommendedLetterSpacing,
+  recommendedLineHeight,
+  resolveFontFallback,
+  resolveScaleRatio,
+  segmentText,
+  typeHierarchyToCss,
+  typeScaleStep,
+  webFontSummary
+};