@opendata-ai/openchart-vanilla 7.2.4 → 7.4.0

package/dist/index.js

@@ -41,6 +41,7 @@ function setupTableAnimationCleanup(wrapper) {
 }
 
 // src/barlist-renderer.ts
+import { textAscent } from "@opendata-ai/openchart-core";
 var SVG_NS = "http://www.w3.org/2000/svg";
 var XLINK_NS = "http://www.w3.org/1999/xlink";
 var BRAND_URL = "https://tryopendata.ai";
@@ -64,7 +65,7 @@ function renderChrome(parent, layout) {
     const text = createSVGElement("text");
     setAttrs(text, {
       x: el.x,
-      y: isBottom ? bottomOffset + el.y : el.y
+      y: (isBottom ? bottomOffset + el.y : el.y) + textAscent(el.style.fontSize)
     });
     text.setAttribute("class", `oc-${key}`);
     text.setAttribute("font-family", el.style.fontFamily);
@@ -467,7 +468,9 @@ function csvEscape(value) {
 }
 
 // src/measure-text.ts
-function createMeasureText() {
+import { estimateTextWidth } from "@opendata-ai/openchart-core";
+var DEFAULT_FONT_FAMILY = "Inter, sans-serif";
+function createMeasureText(fontFamily = DEFAULT_FONT_FAMILY) {
   let canvas = null;
   let ctx = null;
   return (text, fontSize, fontWeight) => {
@@ -476,10 +479,13 @@ function createMeasureText() {
       ctx = canvas.getContext("2d");
     }
     if (!ctx) {
-      return { width: text.length * fontSize * 0.6, height: fontSize * 1.2 };
+      return {
+        width: estimateTextWidth(text, fontSize, fontWeight ?? 400),
+        height: fontSize * 1.2
+      };
     }
     const weight = fontWeight ?? 400;
-    ctx.font = `${weight} ${fontSize}px Inter, sans-serif`;
+    ctx.font = `${weight} ${fontSize}px ${fontFamily}`;
     const metrics = ctx.measureText(text);
     return {
       width: metrics.width,
@@ -487,6 +493,57 @@ function createMeasureText() {
     };
   };
 }
+function resolveFontFamily(container) {
+  if (typeof window === "undefined" || typeof getComputedStyle !== "function") {
+    return DEFAULT_FONT_FAMILY;
+  }
+  try {
+    const style = getComputedStyle(container);
+    const custom = style.getPropertyValue("--oc-font-family").trim();
+    if (custom) return custom;
+    const computed = style.fontFamily?.trim();
+    if (computed) return computed;
+  } catch {
+  }
+  return DEFAULT_FONT_FAMILY;
+}
+function primaryFontName(fontFamily) {
+  const first = fontFamily.split(",")[0]?.trim() ?? "";
+  return first.replace(/^["']|["']$/g, "").trim();
+}
+function fontsPending(fontFamily) {
+  if (typeof document === "undefined") return false;
+  const fonts = document.fonts;
+  if (!fonts || typeof fonts.check !== "function") return false;
+  const name = primaryFontName(fontFamily);
+  if (!name) return false;
+  const generics = /* @__PURE__ */ new Set([
+    "sans-serif",
+    "serif",
+    "monospace",
+    "system-ui",
+    "cursive",
+    "fantasy",
+    "ui-sans-serif",
+    "ui-serif",
+    "ui-monospace"
+  ]);
+  if (generics.has(name.toLowerCase())) return false;
+  try {
+    return !fonts.check(`12px "${name}"`);
+  } catch {
+    return false;
+  }
+}
+function scheduleFontReload(fontFamily, isAlive, onReady) {
+  if (!fontsPending(fontFamily)) return false;
+  const fonts = document.fonts;
+  if (!fonts?.ready) return false;
+  fonts.ready.then(() => {
+    if (isAlive()) onReady();
+  });
+  return true;
+}
 
 // src/resize-observer.ts
 var DEBOUNCE_MS = 16;
@@ -623,7 +680,14 @@ function createBarList(container, spec, options) {
   let disconnectResize = null;
   let animationCleanup = null;
   let pendingResize = false;
-  const measureText = createMeasureText();
+  let fontsReloadPending = false;
+  container.classList.add("oc-barlist-root");
+  function resolveEffectiveFont() {
+    return options?.theme?.fonts?.family ?? currentSpec.theme?.fonts?.family ?? resolveFontFamily(container);
+  }
+  let fontFamily = resolveEffectiveFont();
+  let measureText = createMeasureText(fontFamily);
+  let renderGen = 0;
   function getContainerDimensions() {
     const rect = container.getBoundingClientRect();
     return {
@@ -743,9 +807,20 @@ function createBarList(container, spec, options) {
         }
       });
     }
+    renderGen += 1;
+    container.dataset.ocRenderGen = String(renderGen);
+    if (fontsReloadPending) {
+      fontsReloadPending = false;
+      container.dataset.ocFontsState = "ready";
+    }
   }
   function update(newSpec) {
     currentSpec = newSpec;
+    const nextFont = resolveEffectiveFont();
+    if (nextFont !== fontFamily) {
+      fontFamily = nextFont;
+      measureText = createMeasureText(fontFamily);
+    }
     currentLayout = compile();
     render();
   }
@@ -799,12 +874,20 @@ function createBarList(container, spec, options) {
     }
     container.classList.remove("oc-barlist-root", "oc-dark");
   }
-  container.classList.add("oc-barlist-root");
   if (resolveDarkMode(options?.darkMode)) {
     container.classList.add("oc-dark");
   }
   currentLayout = compile();
   render(true);
+  const fontsPending2 = scheduleFontReload(
+    fontFamily,
+    () => !destroyed,
+    () => {
+      fontsReloadPending = true;
+      resize();
+    }
+  );
+  container.dataset.ocFontsState = fontsPending2 ? "pending" : "ready";
   if (options?.responsive !== false) {
     disconnectResize = observeResize(container, () => resize());
   }
@@ -4993,7 +5076,6 @@ function resolveMarkFill(fill, gradientMap) {
 }
 
 // src/renderers/svg-dom.ts
-import { estimateTextWidth } from "@opendata-ai/openchart-core";
 var SVG_NS3 = "http://www.w3.org/2000/svg";
 var XLINK_NS2 = "http://www.w3.org/1999/xlink";
 function createSVGElement2(tag) {
@@ -5020,23 +5102,6 @@ function applyTextStyle(el, style) {
     el.setAttribute("font-variant", style.fontVariant);
   }
 }
-function computeXAxisExtent(layout) {
-  const xAxis = layout.axes.x;
-  if (!xAxis) return 0;
-  if (xAxis.tickAngle && Math.abs(xAxis.tickAngle) > 10) {
-    const fontSize = xAxis.tickLabelStyle.fontSize;
-    const fontWeight = xAxis.tickLabelStyle.fontWeight;
-    const angleRad = Math.abs(xAxis.tickAngle) * (Math.PI / 180);
-    let maxLabelWidth = 40;
-    for (const tick of xAxis.ticks) {
-      const w = estimateTextWidth(tick.label, fontSize, fontWeight);
-      if (w > maxLabelWidth) maxLabelWidth = w;
-    }
-    const rotatedHeight = Math.min(maxLabelWidth * Math.sin(angleRad) + 6, 120);
-    return xAxis.label ? rotatedHeight + 20 : rotatedHeight;
-  }
-  return xAxis.label ? 48 : 26;
-}
 
 // src/renderers/annotations.ts
 function renderCurvedArrow(parent, from, to, stroke) {
@@ -5198,10 +5263,6 @@ function renderAnnotation(parent, annotation, index2, bgColor) {
     const lineHeight = fontSize * (annotation.label.style.lineHeight ?? 1.3);
     const isMultiLine = lines.length > 1;
     if (isMultiLine) {
-      const isDropLine = annotation.label.connector?.style === "drop-line";
-      if (!isDropLine) {
-        text.setAttribute("text-anchor", "middle");
-      }
       for (let i = 0; i < lines.length; i++) {
         const tspan = createSVGElement2("tspan");
         setAttrs2(tspan, { x: annotation.label.x, dy: i === 0 ? 0 : lineHeight });
@@ -5212,18 +5273,33 @@ function renderAnnotation(parent, annotation, index2, bgColor) {
       text.textContent = annotation.label.text;
     }
     if (annotation.label.background) {
-      const charWidth = fontSize * 0.55;
-      const maxLineWidth = Math.max(...lines.map((l) => l.length)) * charWidth;
-      const totalHeight = lines.length * lineHeight;
       const pad = 3;
-      const bgX = isMultiLine ? annotation.label.x - maxLineWidth / 2 - pad : annotation.label.x - pad;
+      let bgX;
+      let bgY;
+      let bgW;
+      let bgH;
+      if (annotation.label.bounds) {
+        const b = annotation.label.bounds;
+        bgX = b.x - pad;
+        bgY = b.y - pad;
+        bgW = b.width + pad * 2;
+        bgH = b.height + pad * 2;
+      } else {
+        const charWidth = fontSize * 0.55;
+        const maxLineWidth = Math.max(...lines.map((l) => l.length)) * charWidth;
+        const totalHeight = lines.length * lineHeight;
+        bgX = isMultiLine ? annotation.label.x - maxLineWidth / 2 - pad : annotation.label.x - pad;
+        bgY = annotation.label.y - fontSize + (lineHeight - fontSize) / 2 - pad;
+        bgW = maxLineWidth + pad * 2;
+        bgH = totalHeight + pad * 2;
+      }
       const bgRect = createSVGElement2("rect");
       bgRect.setAttribute("class", "oc-annotation-bg");
       setAttrs2(bgRect, {
         x: bgX,
-        y: annotation.label.y - fontSize + (lineHeight - fontSize) / 2 - pad,
-        width: maxLineWidth + pad * 2,
-        height: totalHeight + pad * 2,
+        y: bgY,
+        width: bgW,
+        height: bgH,
         fill: annotation.label.background,
         rx: 2
       });
@@ -5262,7 +5338,8 @@ import {
   axisTitleOffset,
   estimateTextWidth as estimateTextWidth2,
   getAxisTitleOffset,
-  TICK_LABEL_OFFSET
+  TICK_LABEL_OFFSET,
+  textAscent as textAscent2
 } from "@opendata-ai/openchart-core";
 function appendCompoundLabel(parent, primaryText, subtitle, fontWeight) {
   const primarySpan = createSVGElement2("tspan");
@@ -5317,9 +5394,8 @@ function renderAxis(parent, axis, orientation, layout) {
         const xLabelPad = axis.labelPadding ?? layout.theme.spacing.xAxisLabelPadding;
         setAttrs2(label, {
           x: tick.position,
-          y: area.y + area.height + xLabelPad,
-          "text-anchor": "middle",
-          "dominant-baseline": "hanging"
+          y: area.y + area.height + xLabelPad + textAscent2(axis.tickLabelStyle.fontSize),
+          "text-anchor": "middle"
         });
       }
       applyTextStyle(label, axis.tickLabelStyle);
@@ -5446,7 +5522,18 @@ function renderAxis(parent, axis, orientation, layout) {
     axisLabel.setAttribute("class", "oc-axis-title");
     applyTextStyle(axisLabel, axis.labelStyle);
     axisLabel.textContent = axis.label;
-    if (orientation === "x") {
+    const tp = axis.titlePosition;
+    if (tp) {
+      const attrs = {
+        x: tp.x,
+        y: tp.y,
+        "text-anchor": "middle"
+      };
+      if (tp.angle) {
+        attrs.transform = `rotate(${tp.angle}, ${tp.x}, ${tp.y})`;
+      }
+      setAttrs2(axisLabel, attrs);
+    } else if (orientation === "x") {
       let titleY = area.y + area.height + 35;
       if (axis.tickAngle && Math.abs(axis.tickAngle) > 10) {
         const angleRad = Math.abs(axis.tickAngle) * (Math.PI / 180);
@@ -5514,7 +5601,7 @@ function renderAxes(parent, layout) {
 }
 
 // src/renderers/brand.ts
-import { BRAND_FONT_SIZE as BRAND_FONT_SIZE2, BRAND_MIN_WIDTH as BRAND_MIN_WIDTH2 } from "@opendata-ai/openchart-core";
+import { BRAND_FONT_SIZE as BRAND_FONT_SIZE2, BRAND_MIN_WIDTH as BRAND_MIN_WIDTH2, textAscent as textAscent3 } from "@opendata-ai/openchart-core";
 var BRAND_URL2 = "https://tryopendata.ai";
 function renderBrand(parent, layout) {
   if (layout.dimensions.width < BRAND_MIN_WIDTH2) return;
@@ -5523,8 +5610,7 @@ function renderBrand(parent, layout) {
   const rightEdge = width - padding;
   const fill = layout.theme.colors.axis;
   const { chrome } = layout;
-  const xAxisExtent = computeXAxisExtent(layout);
-  const bottomOffset = layout.area.y + layout.area.height + xAxisExtent;
+  const bottomOffset = chrome.bottomAnchorY ?? layout.area.y + layout.area.height;
   const firstBottom = chrome.source ?? chrome.byline ?? chrome.footer;
   const { legend } = layout;
   const bottomLegendOffset = legend.position === "bottom" && legend.bounds.height > 0 ? legend.bounds.height + 8 : 0;
@@ -5539,8 +5625,7 @@ function renderBrand(parent, layout) {
   const text = createSVGElement2("text");
   setAttrs2(text, {
     x: rightEdge,
-    y: chromeY,
-    "dominant-baseline": "hanging",
+    y: chromeY + textAscent3(BRAND_LARGE),
     "font-family": layout.theme.fonts.family,
     "font-size": BRAND_FONT_SIZE2,
     "text-anchor": "end",
@@ -5565,10 +5650,10 @@ function renderBrand(parent, layout) {
 }
 
 // src/renderers/chrome.ts
-import { estimateTextWidth as estimateTextWidth3, wrapText } from "@opendata-ai/openchart-core";
+import { estimateTextWidth as estimateTextWidth3, textAscent as textAscent4, wrapText } from "@opendata-ai/openchart-core";
 function renderChromeElement(parent, element, className, chromeKey, measureText, uppercase = false) {
   const text = createSVGElement2("text");
-  setAttrs2(text, { x: element.x, y: element.y });
+  setAttrs2(text, { x: element.x, y: element.y + textAscent4(element.style.fontSize) });
   applyTextStyle(text, element.style);
   text.setAttribute("class", className);
   text.setAttribute("data-chrome-key", chromeKey);
@@ -5620,8 +5705,7 @@ function renderChrome2(parent, layout) {
   if (chrome.subtitle) {
     renderChromeElement(g, chrome.subtitle, "oc-subtitle", "subtitle", measureText);
   }
-  const xAxisExtent = computeXAxisExtent(layout);
-  const bottomOffset = layout.area.y + layout.area.height + xAxisExtent;
+  const bottomOffset = layout.chrome.bottomAnchorY ?? layout.area.y + layout.area.height;
   if (chrome.source) {
     renderChromeElement(
       g,
@@ -5774,11 +5858,16 @@ function renderLegend(parent, legend) {
   g.setAttribute("role", "list");
   g.setAttribute("aria-label", "Chart legend");
   const isHorizontal = legend.position === "top" || legend.position === "bottom";
+  const positions = "entryPositions" in legend ? legend.entryPositions : void 0;
   let offsetX = legend.bounds.x;
   let offsetY = legend.bounds.y;
   for (let i = 0; i < legend.entries.length; i++) {
     const entry = legend.entries[i];
-    if (isHorizontal && i > 0) {
+    const pos = positions?.[i];
+    if (pos) {
+      offsetX = pos.x;
+      offsetY = pos.y;
+    } else if (isHorizontal && i > 0) {
       const labelWidth = estimateTextWidth4(
         entry.label,
         legend.labelStyle.fontSize,
@@ -5859,16 +5948,18 @@ function renderLegend(parent, legend) {
     label.textContent = entry.label;
     entryG.appendChild(label);
     g.appendChild(entryG);
-    if (isHorizontal) {
-      const labelWidth = estimateTextWidth4(
-        entry.label,
-        legend.labelStyle.fontSize,
-        legend.labelStyle.fontWeight
-      );
-      const entryWidth = legend.swatchSize + legend.swatchGap + labelWidth + legend.entryGap;
-      offsetX += entryWidth;
-    } else {
-      offsetY += legend.swatchSize + legend.entryGap;
+    if (!pos) {
+      if (isHorizontal) {
+        const labelWidth = estimateTextWidth4(
+          entry.label,
+          legend.labelStyle.fontSize,
+          legend.labelStyle.fontWeight
+        );
+        const entryWidth = legend.swatchSize + legend.swatchGap + labelWidth + legend.entryGap;
+        offsetX += entryWidth;
+      } else {
+        offsetY += "rowHeight" in legend && legend.rowHeight ? legend.rowHeight : legend.swatchSize + legend.entryGap;
+      }
     }
   }
   parent.appendChild(g);
@@ -6279,10 +6370,12 @@ function renderChartSVG(layout, container, opts) {
   setAttrs2(svg, {
     viewBox: `0 0 ${width} ${height}`,
     xmlns: SVG_NS3,
-    // WebKit/iOS Safari getBBox() bug: text with dominant-baseline:hanging
-    // reports bounding boxes extending above y=0. The SVG spec default
-    // overflow is "hidden", which clips this phantom extent. Setting
-    // overflow:visible prevents the clipping. Chart marks are already
+    // The SVG spec default is overflow:"hidden", which clips anything a hair
+    // outside the viewBox. We now position all text on the alphabetic/central
+    // baseline (dominant-baseline:hanging was dropped because WebKit computed
+    // it from different metrics), but WebKit/iOS still reports getBBox extents
+    // with a few pixels of slack around tspans, so text touching an edge can
+    // still get clipped. overflow:visible avoids that. Chart marks are already
     // constrained by a clipPath, so nothing bleeds out.
     overflow: "visible",
     // Hint browsers to enable sub-pixel font hinting and kerning for chart text.
@@ -6634,13 +6727,20 @@ function createChart(container, spec, options) {
   let isFirstRender = true;
   let cleanupAnimations = null;
   let pendingResize = false;
+  let fontsReloadPending = false;
   let selectedElement = options?.selectedElement ?? null;
   let overlayElement = null;
   let isTextEditingActive = false;
   const runtimeHiddenSeries = /* @__PURE__ */ new Set();
   const runtimeShownSeries = /* @__PURE__ */ new Set();
   let textEditCleanup = null;
-  const measureText = createMeasureText();
+  container.classList.add("oc-root");
+  function resolveEffectiveFont() {
+    return options?.theme?.fonts?.family ?? currentSpec.theme?.fonts?.family ?? resolveFontFamily(container);
+  }
+  let fontFamily = resolveEffectiveFont();
+  let measureText = createMeasureText(fontFamily);
+  let renderGen = 0;
   function compile() {
     const { width, height } = getContainerDimensions();
     const darkMode = resolveDarkMode3(options?.darkMode);
@@ -7088,6 +7188,12 @@ function createChart(container, spec, options) {
         }
       });
     }
+    renderGen += 1;
+    container.dataset.ocRenderGen = String(renderGen);
+    if (fontsReloadPending) {
+      fontsReloadPending = false;
+      container.dataset.ocFontsState = "ready";
+    }
     if (isFirstRender) {
       isFirstRender = false;
     }
@@ -7095,6 +7201,11 @@ function createChart(container, spec, options) {
   function update(newSpec, updateOpts) {
     if (destroyed) return;
     currentSpec = newSpec;
+    const nextFont = resolveEffectiveFont();
+    if (nextFont !== fontFamily) {
+      fontFamily = nextFont;
+      measureText = createMeasureText(fontFamily);
+    }
     runtimeHiddenSeries.clear();
     runtimeShownSeries.clear();
     if (updateOpts && "selectedElement" in updateOpts) {
@@ -7185,6 +7296,15 @@ function createChart(container, spec, options) {
     container.classList.remove("oc-root");
   }
   render();
+  const pending = scheduleFontReload(
+    fontFamily,
+    () => !destroyed,
+    () => {
+      fontsReloadPending = true;
+      resize();
+    }
+  );
+  container.dataset.ocFontsState = pending ? "pending" : "ready";
   if (options?.responsive !== false) {
     disconnectResize = observeResize(container, () => {
       resize();
@@ -7543,6 +7663,7 @@ import {
   BRAND_FONT_SIZE as BRAND_FONT_SIZE3,
   BRAND_MIN_WIDTH as BRAND_MIN_WIDTH3,
   estimateTextWidth as estimateTextWidth5,
+  textAscent as textAscent5,
   wrapText as wrapText2
 } from "@opendata-ai/openchart-core";
 import { clampStaggerDelay as clampStaggerDelay2 } from "@opendata-ai/openchart-engine";
@@ -7586,7 +7707,7 @@ function stampAnimationAttrs2(el, mark, fallbackIndex, animation) {
 }
 function renderChromeElement2(parent, element, className, chromeKey, measureText) {
   const text = createSVGElement3("text");
-  setAttrs3(text, { x: element.x, y: element.y });
+  setAttrs3(text, { x: element.x, y: element.y + textAscent5(element.style.fontSize) });
   applyTextStyle2(text, element.style);
   text.setAttribute("class", className);
   text.setAttribute("data-chrome-key", chromeKey);
@@ -7971,7 +8092,14 @@ function createSankey(container, spec, options) {
   let isFirstRender = true;
   let animationCleanup = null;
   let pendingResize = false;
-  const measureText = createMeasureText();
+  let fontsReloadPending = false;
+  container.classList.add("oc-sankey-root");
+  function resolveEffectiveFont() {
+    return options?.theme?.fonts?.family ?? currentSpec.theme?.fonts?.family ?? resolveFontFamily(container);
+  }
+  let fontFamily = resolveEffectiveFont();
+  let measureText = createMeasureText(fontFamily);
+  let renderGen = 0;
   function getContainerDimensions() {
     const rect = container.getBoundingClientRect();
     return {
@@ -8177,10 +8305,21 @@ function createSankey(container, spec, options) {
         }
       });
     }
+    renderGen += 1;
+    container.dataset.ocRenderGen = String(renderGen);
+    if (fontsReloadPending) {
+      fontsReloadPending = false;
+      container.dataset.ocFontsState = "ready";
+    }
   }
   function update(newSpec) {
     if (destroyed) return;
     currentSpec = newSpec;
+    const nextFont = resolveEffectiveFont();
+    if (nextFont !== fontFamily) {
+      fontFamily = nextFont;
+      measureText = createMeasureText(fontFamily);
+    }
     isFirstRender = true;
     render();
   }
@@ -8237,6 +8376,7 @@ function createSankey(container, spec, options) {
     }
     svgElement = null;
     container.classList.remove("oc-dark");
+    container.classList.remove("oc-sankey-root");
   }
   try {
     currentLayout = compile();
@@ -8264,10 +8404,21 @@ function createSankey(container, spec, options) {
         }
       });
     }
+    renderGen += 1;
+    container.dataset.ocRenderGen = String(renderGen);
   } catch (err) {
     console.error("[viz] Sankey mount failed:", err);
     throw err;
   }
+  const fontsPending2 = scheduleFontReload(
+    fontFamily,
+    () => !destroyed,
+    () => {
+      fontsReloadPending = true;
+      resize();
+    }
+  );
+  container.dataset.ocFontsState = fontsPending2 ? "pending" : "ready";
   if (options?.responsive !== false) {
     disconnectResize = observeResize(container, () => {
       resize();
@@ -9122,6 +9273,7 @@ function createTable(container, spec, options) {
 import { compileTileMap } from "@opendata-ai/openchart-engine";
 
 // src/tilemap-renderer.ts
+import { textAscent as textAscent6 } from "@opendata-ai/openchart-core";
 var SVG_NS5 = "http://www.w3.org/2000/svg";
 var XLINK_NS4 = "http://www.w3.org/1999/xlink";
 var BRAND_URL5 = "https://tryopendata.ai";
@@ -9145,7 +9297,10 @@ function renderChrome4(parent, layout) {
   const bottomOffset = layout.area.y + layout.area.height;
   if (chrome.title) {
     const text = createSVGElement4("text");
-    setAttrs4(text, { x: chrome.title.x, y: chrome.title.y });
+    setAttrs4(text, {
+      x: chrome.title.x,
+      y: chrome.title.y + textAscent6(chrome.title.style.fontSize)
+    });
     text.setAttribute("class", "oc-title");
     text.setAttribute("font-family", chrome.title.style.fontFamily);
     text.setAttribute("font-size", String(chrome.title.style.fontSize));
@@ -9156,7 +9311,10 @@ function renderChrome4(parent, layout) {
   }
   if (chrome.subtitle) {
     const text = createSVGElement4("text");
-    setAttrs4(text, { x: chrome.subtitle.x, y: chrome.subtitle.y });
+    setAttrs4(text, {
+      x: chrome.subtitle.x,
+      y: chrome.subtitle.y + textAscent6(chrome.subtitle.style.fontSize)
+    });
     text.setAttribute("class", "oc-subtitle");
     text.setAttribute("font-family", chrome.subtitle.style.fontFamily);
     text.setAttribute("font-size", String(chrome.subtitle.style.fontSize));
@@ -9170,7 +9328,10 @@ function renderChrome4(parent, layout) {
   }
   if (chrome.source) {
     const text = createSVGElement4("text");
-    setAttrs4(text, { x: chrome.source.x, y: bottomOffset + chrome.source.y });
+    setAttrs4(text, {
+      x: chrome.source.x,
+      y: bottomOffset + chrome.source.y + textAscent6(chrome.source.style.fontSize)
+    });
     text.setAttribute("class", "oc-source");
     text.setAttribute("font-family", chrome.source.style.fontFamily);
     text.setAttribute("font-size", String(chrome.source.style.fontSize));
@@ -9184,7 +9345,10 @@ function renderChrome4(parent, layout) {
   }
   if (chrome.byline) {
     const text = createSVGElement4("text");
-    setAttrs4(text, { x: chrome.byline.x, y: bottomOffset + chrome.byline.y });
+    setAttrs4(text, {
+      x: chrome.byline.x,
+      y: bottomOffset + chrome.byline.y + textAscent6(chrome.byline.style.fontSize)
+    });
     text.setAttribute("class", "oc-byline");
     text.setAttribute("font-family", chrome.byline.style.fontFamily);
     text.setAttribute("font-size", String(chrome.byline.style.fontSize));
@@ -9198,7 +9362,10 @@ function renderChrome4(parent, layout) {
   }
   if (chrome.footer) {
     const text = createSVGElement4("text");
-    setAttrs4(text, { x: chrome.footer.x, y: bottomOffset + chrome.footer.y });
+    setAttrs4(text, {
+      x: chrome.footer.x,
+      y: bottomOffset + chrome.footer.y + textAscent6(chrome.footer.style.fontSize)
+    });
     text.setAttribute("class", "oc-footer");
     text.setAttribute("font-family", chrome.footer.style.fontFamily);
     text.setAttribute("font-size", String(chrome.footer.style.fontSize));
@@ -9461,7 +9628,14 @@ function createTileMap(container, spec, options) {
   let disconnectResize = null;
   let animationCleanup = null;
   let pendingResize = false;
-  const measureText = createMeasureText();
+  let fontsReloadPending = false;
+  container.classList.add("oc-tilemap-root");
+  function resolveEffectiveFont() {
+    return options?.theme?.fonts?.family ?? currentSpec.theme?.fonts?.family ?? resolveFontFamily(container);
+  }
+  let fontFamily = resolveEffectiveFont();
+  let measureText = createMeasureText(fontFamily);
+  let renderGen = 0;
   function getContainerDimensions() {
     const rect = container.getBoundingClientRect();
     const width = Math.max(rect.width || 600, 100);
@@ -9574,9 +9748,20 @@ function createTileMap(container, spec, options) {
         }
       });
     }
+    renderGen += 1;
+    container.dataset.ocRenderGen = String(renderGen);
+    if (fontsReloadPending) {
+      fontsReloadPending = false;
+      container.dataset.ocFontsState = "ready";
+    }
   }
   function update(newSpec) {
     currentSpec = newSpec;
+    const nextFont = resolveEffectiveFont();
+    if (nextFont !== fontFamily) {
+      fontFamily = nextFont;
+      measureText = createMeasureText(fontFamily);
+    }
     currentLayout = compile();
     render();
   }
@@ -9630,12 +9815,20 @@ function createTileMap(container, spec, options) {
     }
     container.classList.remove("oc-tilemap-root", "oc-dark");
   }
-  container.classList.add("oc-tilemap-root");
   if (resolveDarkMode6(options?.darkMode)) {
     container.classList.add("oc-dark");
   }
   currentLayout = compile();
   render(true);
+  const fontsPending2 = scheduleFontReload(
+    fontFamily,
+    () => !destroyed,
+    () => {
+      fontsReloadPending = true;
+      resize();
+    }
+  );
+  container.dataset.ocFontsState = fontsPending2 ? "pending" : "ready";
   if (options?.responsive !== false) {
     disconnectResize = observeResize(container, () => {
       resize();