@opendata-ai/openchart-vanilla 8.0.0-rc.2 → 8.0.0-rc.21

package/src/renderers/axes.ts

@@ -1,351 +0,0 @@
-/**
- * Axis rendering: axis line, ticks, tick labels, gridlines, axis title.
- */
-
-import type { AxisLayout, ChartLayout } from '@opendata-ai/openchart-core';
-import {
-  axisTitleOffset,
-  estimateTextWidth,
-  getAxisTitleOffset,
-  TICK_LABEL_OFFSET,
-  textAscent,
-} from '@opendata-ai/openchart-core';
-import { serializeKeyValue } from '@opendata-ai/openchart-engine';
-import { applyTextStyle, createSVGElement, setAttrs } from './svg-dom';
-
-function appendCompoundLabel(
-  parent: SVGElement,
-  primaryText: string,
-  subtitle: string,
-  fontWeight: number,
-): void {
-  const primarySpan = createSVGElement('tspan');
-  primarySpan.setAttribute('font-weight', String(fontWeight));
-  primarySpan.textContent = primaryText;
-  parent.appendChild(primarySpan);
-
-  const subtitleSpan = createSVGElement('tspan');
-  subtitleSpan.setAttribute('dx', '0.5em');
-  subtitleSpan.textContent = subtitle;
-  subtitleSpan.setAttribute('font-weight', '400');
-  subtitleSpan.setAttribute('fill-opacity', '0.6');
-  parent.appendChild(subtitleSpan);
-}
-
-function renderAxis(
-  parent: SVGElement,
-  axis: AxisLayout,
-  orientation: 'x' | 'y',
-  layout: ChartLayout,
-): void {
-  const g = createSVGElement('g');
-  const isRight = orientation === 'y' && axis.orient === 'right';
-  const isInlineY = orientation === 'y' && axis.tickPosition === 'inline' && !isRight;
-  g.setAttribute(
-    'class',
-    `oc-axis oc-axis-${isRight ? 'y2' : orientation}${isInlineY ? ' oc-axis-inline' : ''}`,
-  );
-
-  const { area } = layout;
-
-  // Only draw axis line for x-axis (bottom baseline), unless explicitly disabled.
-  // Horizontal gridlines already guide y-values, so the vertical y-axis line is redundant.
-  if (orientation === 'x' && axis.domainLine !== false) {
-    const line = createSVGElement('line');
-    line.setAttribute('class', 'oc-axis-line');
-    setAttrs(line, {
-      x1: axis.start.x,
-      y1: axis.start.y,
-      x2: axis.end.x,
-      y2: axis.end.y,
-      stroke: layout.theme.colors.axis,
-      'stroke-width': 1,
-    });
-    g.appendChild(line);
-  }
-
-  // Ticks and labels
-  // Tick positions are absolute pixel coordinates from D3 scales whose range
-  // was set to [chartArea.x, chartArea.x + chartArea.width] (and similarly for y).
-  // Don't add area.x/area.y again or you'll double-offset everything.
-  for (const tick of axis.ticks) {
-    // Stable key for data-update transitions
-    const tickKey = serializeKeyValue(tick.value);
-
-    if (orientation === 'x') {
-      // Label (no tick marks -- gridlines provide sufficient reference)
-      const label = createSVGElement('text');
-      label.setAttribute('class', 'oc-axis-tick');
-      label.setAttribute('data-tick-key', tickKey);
-
-      if (axis.tickAngle && Math.abs(axis.tickAngle) > 10) {
-        // Rotated labels: anchor at the rotation pivot point
-        const labelX = tick.position;
-        const xLabelPad = axis.labelPadding ?? layout.theme.spacing.xAxisLabelPadding;
-        const labelY = area.y + area.height + xLabelPad;
-        setAttrs(label, {
-          x: labelX,
-          y: labelY,
-          'text-anchor': axis.tickAngle < 0 ? 'end' : 'start',
-          'dominant-baseline': 'central',
-          transform: `rotate(${axis.tickAngle}, ${labelX}, ${labelY})`,
-        });
-      } else {
-        const xLabelPad = axis.labelPadding ?? layout.theme.spacing.xAxisLabelPadding;
-        // xLabelPad is the literal gap between the axis line and the TOP of
-        // the label regardless of font size, so shift down by the ascent to
-        // land on the alphabetic baseline. (dominant-baseline:hanging would
-        // express this directly, but WebKit positions hanging from different
-        // font metrics than Blink, drifting labels on iOS Safari.)
-        setAttrs(label, {
-          x: tick.position,
-          y: area.y + area.height + xLabelPad + textAscent(axis.tickLabelStyle.fontSize),
-          'text-anchor': 'middle',
-        });
-      }
-
-      applyTextStyle(label, axis.tickLabelStyle);
-      label.textContent = tick.label;
-      // The engine ellipsizes rotated labels that would overflow the reserved
-      // band and stashes the original in `fullLabel`. Expose it as a <title> so
-      // the complete category is still reachable on hover and to a screen
-      // reader — truncation is a visual affordance, not data loss.
-      if (tick.fullLabel) {
-        const title = createSVGElement('title');
-        title.textContent = tick.fullLabel;
-        label.appendChild(title);
-      }
-      g.appendChild(label);
-    } else if (isInlineY) {
-      // Inline y-tick: label sits above its gridline at the chart-area left
-      // edge, no gutter reserved. The gridline itself is the visual axis.
-      const label = createSVGElement('text');
-      label.setAttribute('class', 'oc-axis-tick oc-axis-tick-inline');
-      label.setAttribute('data-tick-key', tickKey);
-      setAttrs(label, {
-        x: area.x,
-        y: tick.position - 6,
-        'text-anchor': 'start',
-      });
-      applyTextStyle(label, axis.tickLabelStyle);
-      label.textContent = tick.label;
-      g.appendChild(label);
-    } else {
-      const label = createSVGElement('text');
-      label.setAttribute('class', 'oc-axis-tick');
-      label.setAttribute('data-tick-key', tickKey);
-      setAttrs(label, {
-        x: isRight ? area.x + area.width + TICK_LABEL_OFFSET : area.x - TICK_LABEL_OFFSET,
-        y: tick.position,
-        'text-anchor': isRight ? 'start' : 'end',
-        'dominant-baseline': 'central',
-      });
-      applyTextStyle(label, axis.tickLabelStyle);
-      if (!isRight) {
-        // Truncate categorical left y-axis labels that exceed available space
-        const availableWidth = area.x - TICK_LABEL_OFFSET;
-        const fontSize = axis.tickLabelStyle.fontSize;
-        const fontWeight = axis.tickLabelStyle.fontWeight;
-
-        if (tick.subtitle) {
-          // Compound label: primary + gap + subtitle via tspan elements
-          const gapWidth = fontSize * 0.5;
-          const subtitleWidth = estimateTextWidth(tick.subtitle, fontSize, fontWeight);
-          const primaryWidth = estimateTextWidth(tick.label, fontSize, fontWeight);
-          const totalWidth = primaryWidth + gapWidth + subtitleWidth;
-
-          if (totalWidth > availableWidth && availableWidth > 20) {
-            const ellipsis = '…';
-            const ellipsisWidth = estimateTextWidth(ellipsis, fontSize, fontWeight);
-            const budgetForPrimary = availableWidth - gapWidth - subtitleWidth - ellipsisWidth;
-
-            let primaryText = tick.label;
-            if (budgetForPrimary > 0) {
-              let lo = 0;
-              let hi = tick.label.length;
-              while (lo < hi) {
-                const mid = (lo + hi + 1) >>> 1;
-                const candidate = tick.label.slice(0, mid);
-                if (estimateTextWidth(candidate, fontSize, fontWeight) <= budgetForPrimary) {
-                  lo = mid;
-                } else {
-                  hi = mid - 1;
-                }
-              }
-              primaryText = lo > 0 ? tick.label.slice(0, lo).trimEnd() + ellipsis : ellipsis;
-            } else {
-              primaryText = ellipsis;
-            }
-
-            appendCompoundLabel(label, primaryText, tick.subtitle, fontWeight);
-
-            const titleEl = createSVGElement('title');
-            titleEl.textContent = `${tick.label}  ${tick.subtitle}`;
-            label.appendChild(titleEl);
-          } else {
-            appendCompoundLabel(label, tick.label, tick.subtitle, fontWeight);
-          }
-        } else {
-          // Plain label (no subtitle)
-          const fullWidth = estimateTextWidth(tick.label, fontSize, fontWeight);
-          if (fullWidth > availableWidth && availableWidth > 20) {
-            const ellipsis = '…';
-            const ellipsisWidth = estimateTextWidth(ellipsis, fontSize, fontWeight);
-            let lo = 0;
-            let hi = tick.label.length;
-            while (lo < hi) {
-              const mid = (lo + hi + 1) >>> 1;
-              const candidate = tick.label.slice(0, mid);
-              if (
-                estimateTextWidth(candidate, fontSize, fontWeight) + ellipsisWidth <=
-                availableWidth
-              ) {
-                lo = mid;
-              } else {
-                hi = mid - 1;
-              }
-            }
-            label.textContent = lo > 0 ? tick.label.slice(0, lo).trimEnd() + ellipsis : ellipsis;
-            const titleEl = createSVGElement('title');
-            titleEl.textContent = tick.label;
-            label.appendChild(titleEl);
-          } else {
-            label.textContent = tick.label;
-          }
-        }
-      } else {
-        label.textContent = tick.label;
-      }
-      g.appendChild(label);
-    }
-  }
-
-  // Gridlines (positions are also absolute from the scales)
-  // Skip gridlines for right-side y-axis (left y-axis gridlines are sufficient)
-  if (!isRight) {
-    // Build position -> tick value map for keying gridlines
-    const posToTickKey = new Map<number, string>();
-    for (const tick of axis.ticks) {
-      posToTickKey.set(tick.position, serializeKeyValue(tick.value));
-    }
-
-    for (const gridline of axis.gridlines) {
-      const gl = createSVGElement('line');
-      gl.setAttribute('class', 'oc-gridline');
-      // Stamp data-tick-key for data-update transitions
-      const glKey = posToTickKey.get(gridline.position);
-      if (glKey) {
-        gl.setAttribute('data-tick-key', glKey);
-      }
-      if (orientation === 'y') {
-        setAttrs(gl, {
-          x1: area.x,
-          y1: gridline.position,
-          x2: area.x + area.width,
-          y2: gridline.position,
-          stroke: layout.theme.colors.gridline,
-          'stroke-width': 1,
-          'stroke-opacity': 0.6,
-        });
-      } else {
-        setAttrs(gl, {
-          x1: gridline.position,
-          y1: area.y,
-          x2: gridline.position,
-          y2: area.y + area.height,
-          stroke: layout.theme.colors.gridline,
-          'stroke-width': 1,
-          'stroke-opacity': 0.6,
-        });
-      }
-      g.appendChild(gl);
-    }
-  }
-
-  // Axis label
-  if (axis.label && axis.labelStyle) {
-    const axisLabel = createSVGElement('text');
-    axisLabel.setAttribute('class', 'oc-axis-title');
-    applyTextStyle(axisLabel, axis.labelStyle);
-    axisLabel.textContent = axis.label;
-
-    const tp = axis.titlePosition;
-    if (tp) {
-      const attrs: Record<string, string | number> = {
-        x: tp.x,
-        y: tp.y,
-        'text-anchor': 'middle',
-      };
-      if (tp.angle) {
-        attrs.transform = `rotate(${tp.angle}, ${tp.x}, ${tp.y})`;
-      }
-      setAttrs(axisLabel, attrs);
-    } else if (orientation === 'x') {
-      const tickFontSize = axis.tickLabelStyle.fontSize;
-      const tickBand = Math.max(26, 4 + tickFontSize + Math.max(11, Math.ceil(tickFontSize * 0.7)));
-      let titleY = area.y + area.height + tickBand + 9;
-      if (axis.tickAngle && Math.abs(axis.tickAngle) > 10) {
-        const angleRad = Math.abs(axis.tickAngle) * (Math.PI / 180);
-        let maxLabelWidth = 40;
-        for (const tick of axis.ticks) {
-          const w = estimateTextWidth(tick.label, tickFontSize, axis.tickLabelStyle.fontWeight);
-          if (w > maxLabelWidth) maxLabelWidth = w;
-        }
-        const rotatedHeight = Math.min(maxLabelWidth * Math.sin(angleRad) + 6, 120);
-        titleY = area.y + area.height + rotatedHeight + 14;
-      }
-      setAttrs(axisLabel, {
-        x: area.x + area.width / 2,
-        y: titleY,
-        'text-anchor': 'middle',
-      });
-    } else if (isRight) {
-      const titleOffset = getAxisTitleOffset(layout.dimensions.width);
-      const titleX = area.x + area.width + titleOffset;
-      setAttrs(axisLabel, {
-        x: titleX,
-        y: area.y + area.height / 2,
-        'text-anchor': 'middle',
-        transform: `rotate(90, ${titleX}, ${area.y + area.height / 2})`,
-      });
-    } else {
-      const maxTickLabelWidth = axis.ticks.reduce((max, t) => {
-        const w = estimateTextWidth(
-          t.label,
-          axis.tickLabelStyle.fontSize,
-          axis.tickLabelStyle.fontWeight ?? 400,
-        );
-        return Math.max(max, w);
-      }, 0);
-      // Inline y-ticks live inside the plot, so the title clears only the chart
-      // edge — mirror the engine's reservation (see axisTitleOffset).
-      const titleOffset = axisTitleOffset(
-        maxTickLabelWidth,
-        axis.labelStyle.fontSize,
-        layout.dimensions.width,
-        isInlineY,
-      );
-      setAttrs(axisLabel, {
-        x: area.x - titleOffset,
-        y: area.y + area.height / 2,
-        'text-anchor': 'middle',
-        transform: `rotate(-90, ${area.x - titleOffset}, ${area.y + area.height / 2})`,
-      });
-    }
-    g.appendChild(axisLabel);
-  }
-
-  parent.appendChild(g);
-}
-
-export function renderAxes(parent: SVGElement, layout: ChartLayout): void {
-  if (layout.axes.x) {
-    renderAxis(parent, layout.axes.x, 'x', layout);
-  }
-  if (layout.axes.y) {
-    renderAxis(parent, layout.axes.y, 'y', layout);
-  }
-  if (layout.axes.y2) {
-    renderAxis(parent, layout.axes.y2, 'y', layout);
-  }
-}

package/src/renderers/brand.ts

@@ -1,87 +0,0 @@
-/**
- * Brand rendering: the "tryOpenData.ai" watermark footer.
- */
-
-import type { ChartLayout } from '@opendata-ai/openchart-core';
-import { BRAND_FONT_SIZE, BRAND_MIN_WIDTH, textAscent } from '@opendata-ai/openchart-core';
-import { footnoteBandHeight } from './chrome';
-import { createSVGElement, setAttrs, XLINK_NS } from './svg-dom';
-
-const BRAND_URL = 'https://tryopendata.ai';
-
-/**
- * Render the "OpenData" brand as a footer-row element, right-aligned on the
- * same baseline as the first bottom chrome text (source/byline/footer).
- * Uses the same font size as chrome source text so it blends in as a subtle
- * footer item rather than occupying independent visual space.
- */
-export function renderBrand(parent: SVGElement, layout: ChartLayout): void {
-  if (layout.dimensions.width < BRAND_MIN_WIDTH) return;
-
-  const { width } = layout.dimensions;
-  const padding = layout.theme.spacing.padding;
-  const rightEdge = width - padding;
-  const fill = layout.theme.colors.axis;
-
-  // Vertically align with the first bottom chrome element.
-  const { chrome } = layout;
-  const bottomOffset = chrome.bottomAnchorY ?? layout.area.y + layout.area.height;
-  const firstBottom = chrome.source ?? chrome.byline ?? chrome.footer;
-  // When no bottom chrome items exist, derive a fallback offset that still
-  // clears any bottom-positioned legend so the brand watermark doesn't
-  // overlap legend swatches.
-  const { legend } = layout;
-  const bottomLegendOffset =
-    legend.position === 'bottom' && legend.bounds.height > 0 ? legend.bounds.height + 8 : 0;
-  // renderChrome pushes the whole footer row down past the footnote list; the
-  // brand shares that row, so it takes the same shift or the footnotes land on
-  // top of it.
-  const bandHeight = footnoteBandHeight(layout);
-  const chromeY = firstBottom
-    ? bottomOffset + firstBottom.y + bandHeight
-    : bottomOffset + layout.theme.spacing.chartToFooter + bottomLegendOffset + bandHeight;
-
-  const a = createSVGElement('a');
-  a.setAttribute('href', BRAND_URL);
-  a.setAttributeNS(XLINK_NS, 'xlink:href', BRAND_URL);
-  a.setAttribute('target', '_blank');
-  a.setAttribute('rel', 'noopener');
-  a.setAttribute('class', 'oc-chrome-ref');
-
-  // "try" in normal weight, "OpenData" in semibold, ".ai" in normal weight,
-  // rendered as a single right-aligned text element with three tspans.
-  // chromeY is the top edge shared with source/byline chrome text; anchor the
-  // shared alphabetic baseline from the largest tspan's ascent. (Hanging
-  // baseline is avoided: WebKit positions it differently and never inherits
-  // it into tspans, which scattered the three spans on iOS Safari.)
-  const BRAND_LARGE = 16;
-  const text = createSVGElement('text');
-  setAttrs(text, {
-    x: rightEdge,
-    y: chromeY + textAscent(BRAND_LARGE),
-    'font-family': layout.theme.fonts.family,
-    'font-size': BRAND_FONT_SIZE,
-    'text-anchor': 'end',
-    'fill-opacity': 0.55,
-  });
-  (text as SVGElement & ElementCSSInlineStyle).style.setProperty('fill', fill);
-
-  const trySpan = createSVGElement('tspan');
-  trySpan.setAttribute('font-weight', '500');
-  trySpan.textContent = 'try';
-  text.appendChild(trySpan);
-
-  const openDataSpan = createSVGElement('tspan');
-  openDataSpan.setAttribute('font-weight', '600');
-  openDataSpan.setAttribute('font-size', String(BRAND_LARGE));
-  openDataSpan.textContent = 'OpenData';
-  text.appendChild(openDataSpan);
-
-  const aiSpan = createSVGElement('tspan');
-  aiSpan.setAttribute('font-weight', '500');
-  aiSpan.textContent = '.ai';
-  text.appendChild(aiSpan);
-
-  a.appendChild(text);
-  parent.appendChild(a);
-}

package/src/renderers/chrome.ts

@@ -1,196 +0,0 @@
-/**
- * Chrome rendering: title, subtitle, source, byline, footer.
- */
-
-import type {
-  ChartLayout,
-  MeasureTextFn,
-  ResolvedChromeElement,
-} from '@opendata-ai/openchart-core';
-import {
-  estimateTextWidth,
-  FOOTNOTE_LINE_HEIGHT,
-  footnoteBandHeight as footnoteBandHeightFor,
-  textAscent,
-  wrapText,
-} from '@opendata-ai/openchart-core';
-import { applyTextStyle, createSVGElement, setAttrs } from './svg-dom';
-
-/**
- * Vertical space the auto-thinning footnote list occupies below the plot.
- * Everything on the footer row (source, byline, footer, brand) shifts down by
- * this much so the footnotes don't land on top of it. Zero when there are no
- * footnotes. The brand watermark renders from a separate path
- * (`renderBrand`), so it has to read the same number from here rather than
- * recompute it.
- *
- * A `ChartLayout`-shaped adapter over the core helper -- deliberately not a
- * second implementation. The engine reserves this band in the bottom margin
- * from the same function, so a local copy of the arithmetic is a standing
- * invitation for the two to drift and drop the footnotes onto the watermark.
- */
-export function footnoteBandHeight(layout: ChartLayout): number {
-  return footnoteBandHeightFor(layout.chrome.footnotes?.length ?? 0, layout.theme);
-}
-
-export function renderChromeElement(
-  parent: SVGElement,
-  element: ResolvedChromeElement,
-  className: string,
-  chromeKey: string,
-  measureText?: MeasureTextFn,
-  uppercase = false,
-): void {
-  const text = createSVGElement('text');
-  // element.y is the TOP of the text box; convert to the alphabetic baseline
-  // here instead of relying on dominant-baseline:hanging, which WebKit
-  // positions from different font metrics and never inherits into tspans.
-  setAttrs(text, { x: element.x, y: element.y + textAscent(element.style.fontSize) });
-  applyTextStyle(text, element.style);
-  text.setAttribute('class', className);
-  text.setAttribute('data-chrome-key', chromeKey);
-
-  // happy-dom doesn't apply CSS text-transform inside SVG measurement, so
-  // pre-uppercase the rendered text for elements that style as uppercase.
-  // Browsers honor the CSS rule too, so this is double-applied harmlessly.
-  const renderedText = uppercase ? element.text.toUpperCase() : element.text;
-
-  const lines = wrapText(
-    renderedText,
-    element.style.fontSize,
-    element.style.fontWeight,
-    element.maxWidth,
-    measureText,
-  );
-
-  if (lines.length === 1) {
-    text.textContent = renderedText;
-  } else {
-    const lineHeight = element.style.fontSize * (element.style.lineHeight ?? 1.3);
-    for (let i = 0; i < lines.length; i++) {
-      const tspan = createSVGElement('tspan');
-      setAttrs(tspan, { x: element.x, dy: i === 0 ? 0 : lineHeight });
-      tspan.textContent = lines[i];
-      text.appendChild(tspan);
-    }
-  }
-
-  parent.appendChild(text);
-}
-
-export function renderChrome(parent: SVGElement, layout: ChartLayout): void {
-  const g = createSVGElement('g');
-  g.setAttribute('class', 'oc-chrome');
-
-  const { chrome, measureText } = layout;
-
-  // Top chrome: render at their stored y positions (already absolute)
-  if (chrome.eyebrow) {
-    // Leading accent dot — matches the editorial design system mock.
-    // eyebrow.y is the top of the text box. Visual center is roughly
-    // y + fontSize * 0.55 (cap height).
-    const eyebrow = chrome.eyebrow;
-    const dotR = 3;
-    const dotGap = 8;
-    const dotX = eyebrow.x + dotR;
-    const dotY = eyebrow.y + eyebrow.style.fontSize * 0.42;
-    const dot = createSVGElement('circle');
-    dot.setAttribute('class', 'oc-eyebrow-dot');
-    setAttrs(dot, { cx: dotX, cy: dotY, r: dotR });
-    dot.setAttribute('fill', eyebrow.style.fill ?? 'currentColor');
-    g.appendChild(dot);
-
-    const shifted: ResolvedChromeElement = {
-      ...eyebrow,
-      x: eyebrow.x + dotR * 2 + dotGap,
-    };
-    renderChromeElement(g, shifted, 'oc-eyebrow', 'eyebrow', measureText, true);
-  }
-  if (chrome.title) {
-    renderChromeElement(g, chrome.title, 'oc-title', 'title', measureText);
-  }
-  if (chrome.subtitle) {
-    renderChromeElement(g, chrome.subtitle, 'oc-subtitle', 'subtitle', measureText);
-  }
-
-  const bottomOffset = layout.chrome.bottomAnchorY ?? layout.area.y + layout.area.height;
-
-  // Footnotes from auto-thinned annotations, rendered above source/byline.
-  // Each footnote gets its own line to avoid horizontal overflow.
-  const bandHeight = footnoteBandHeight(layout);
-  if (chrome.footnotes && chrome.footnotes.length > 0) {
-    const fontSize = layout.theme.fonts.sizes.small;
-    const pad = layout.theme.spacing.padding;
-    const lineHeight = fontSize * FOOTNOTE_LINE_HEIGHT;
-    const style = {
-      fontFamily: layout.theme.fonts.family,
-      fontSize,
-      fontWeight: layout.theme.fonts.weights.normal,
-      fill: layout.theme.chrome.source.color,
-      lineHeight: FOOTNOTE_LINE_HEIGHT,
-      textAnchor: 'start' as const,
-    };
-
-    for (let i = 0; i < chrome.footnotes.length; i++) {
-      const f = chrome.footnotes[i];
-      const y =
-        bottomOffset + layout.theme.spacing.chartToFooter + textAscent(fontSize) + i * lineHeight;
-      const el = createSVGElement('text');
-      el.setAttribute('class', 'oc-footnotes');
-      setAttrs(el, { x: pad, y });
-      applyTextStyle(el, style);
-      el.textContent = `${f.index}. ${f.text}`;
-      g.appendChild(el);
-    }
-  }
-
-  if (chrome.source) {
-    renderChromeElement(
-      g,
-      { ...chrome.source, y: bottomOffset + chrome.source.y + bandHeight },
-      'oc-source',
-      'source',
-      measureText,
-    );
-  }
-  if (chrome.byline) {
-    renderChromeElement(
-      g,
-      { ...chrome.byline, y: bottomOffset + chrome.byline.y + bandHeight },
-      'oc-byline',
-      'byline',
-      measureText,
-    );
-  }
-  if (chrome.footer) {
-    renderChromeElement(
-      g,
-      { ...chrome.footer, y: bottomOffset + chrome.footer.y + bandHeight },
-      'oc-footer',
-      'footer',
-      measureText,
-    );
-  }
-  if (chrome.brand) {
-    const brandY = bottomOffset + chrome.brand.y + bandHeight;
-    renderChromeElement(g, { ...chrome.brand, y: brandY }, 'oc-brand', 'brand', measureText);
-    // Accent dot to the left of the brand text. text-anchor=end means
-    // brand.x is the right edge, so the dot sits 12px left of the measured
-    // text's leftmost glyph. Use estimateTextWidth (the same path the
-    // engine uses for label sizing) instead of a `length * 0.55em` fudge
-    // so wide glyphs (W, M) and narrow ones (i, l) land correctly.
-    const textWidth = estimateTextWidth(
-      chrome.brand.text,
-      chrome.brand.style.fontSize,
-      chrome.brand.style.fontWeight,
-    );
-    const dotX = chrome.brand.x - textWidth - 12;
-    const dotY = brandY + chrome.brand.style.fontSize / 2;
-    const dot = createSVGElement('circle');
-    dot.setAttribute('class', 'oc-brand-dot');
-    setAttrs(dot, { cx: dotX, cy: dotY, r: 3 });
-    g.appendChild(dot);
-  }
-
-  parent.appendChild(g);
-}