graphein 0.20.0 → 0.22.0

package/dist/axes/morph.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/axes/morph.ts"],
+  "sourcesContent": ["/**\n * Axis motion \u2014 gridlines, tick marks and tick labels glide with the scale.\n *\n * Each axis draw stashes what it drew (see render/chromeMotion). When a morph\n * redraws a chart on a tween view, the axis modules blend the outgoing frame\n * with the incoming one: a tick present in both glides between its positions,\n * a new tick slides in from where its value sat on the old scale while fading\n * in, and a tick that is gone slides toward where its value lands on the new\n * scale while fading out \u2014 so the axis moves exactly with the marks, which\n * interpolate between the same two pixel mappings.\n */\n\nimport type { Rect } from '../types';\nimport type { CartesianModel, Tick } from '../runtime/cartesian';\nimport type { Surface } from '../render/surface';\nimport { chromeMorph, stashChrome, visibleItems } from '../render/chromeMotion';\nimport { crisp } from '../util/math';\n\n/** Chrome stash names shared by the axis, annotation and trendline modules. */\nexport const AXIS_SCALES = 'axes:scales';\nexport const AXIS_UNDERLAY = 'axes:underlay';\nexport const AXIS_LABELS = 'axes:labels';\n\nexport type TickValue = Tick['value'];\n\n/** Value \u2192 pixel mappings of one drawn frame. */\nexport interface ScaleMaps {\n  xAt(value: unknown): number | undefined;\n  yAt(value: unknown): number | undefined;\n}\n\n/** A frame's plot rect and value \u2192 pixel mappings, for placing the other frame's ticks. */\nexport interface ScaleFrame extends ScaleMaps {\n  plot: Rect;\n  /**\n   * The static frames this one mixes, with weights summing to 1. However many\n   * morphs interrupt one another, a blend stays this flat list \u2014 never a chain\n   * of nested closures \u2014 and frames whose weight has decayed away are dropped.\n   */\n  parts: ReadonlyArray<{ weight: number; maps: ScaleMaps }>;\n}\n\n/** Outgoing frames below this weight are dropped from a blend. */\nconst MIN_PART_WEIGHT = 1e-3;\n/** Most static frames a blend mixes (rapid-fire updates keep the heaviest). */\nconst MAX_PARTS = 12;\n\n/** One drawn axis element, keyed by its tick value. */\nexport interface AxisItem {\n  key: string;\n  value: TickValue;\n  /** Pixel position along its axis. */\n  pos: number;\n  alpha: number;\n}\n\n/** The axis lines one frame drew (see drawAxesUnderlay). */\nexport interface UnderlayFrame {\n  orientation: 'vertical' | 'horizontal';\n  plot: Rect;\n  /** Gridlines at value (y) ticks: horizontal lines, or vertical ones for horizontal bars. */\n  valueGrid: AxisItem[];\n  /** Vertical gridlines at the labelled x ticks (vertical orientation). */\n  xGrid: AxisItem[];\n  /** Tick marks on the category/x axis. */\n  xMarks: AxisItem[];\n  /** Whether the x baseline (or the horizontal-bar spine) is drawn. */\n  axisLine: boolean;\n}\n\nexport const lerp = (a: number, b: number, t: number): number => a + (b - a) * t;\n\nexport function lerpRect(a: Rect, b: Rect, t: number): Rect {\n  return { x: lerp(a.x, b.x, t), y: lerp(a.y, b.y, t), width: lerp(a.width, b.width, t), height: lerp(a.height, b.height, t) };\n}\n\n/** A stable key for a tick value (numbers and strings never collide). */\nexport function tickKey(value: TickValue): string {\n  return `${typeof value === 'number' ? 'n' : 's'}:${value}`;\n}\n\nfunction finiteOr(value: number | undefined, fallback: number): number {\n  return value !== undefined && Number.isFinite(value) ? value : fallback;\n}\n\n/**\n * Blend two frames' items: shared ones (same key, and `same` agrees) glide and\n * keep the incoming item; new ones start where their value sat on the outgoing\n * scale and fade in; departing ones head to where their value lands on the\n * incoming scale and fade out. Departing items come first so they paint beneath.\n */\nexport function blendItems<T extends AxisItem>(\n  from: readonly T[],\n  to: readonly T[],\n  t: number,\n  fromAt: (value: TickValue) => number | undefined,\n  toAt: (value: TickValue) => number | undefined,\n  same: (a: T, b: T) => boolean = () => true,\n): Array<{ item: T; pos: number; alpha: number }> {\n  const byKey = new Map<string, T>();\n  for (const a of from) byKey.set(a.key, a);\n  const kept = new Set<T>();\n  const entering: Array<{ item: T; pos: number; alpha: number }> = [];\n  for (const b of to) {\n    const a = byKey.get(b.key);\n    if (a && !kept.has(a) && same(a, b)) {\n      kept.add(a);\n      entering.push({ item: b, pos: lerp(a.pos, b.pos, t), alpha: lerp(a.alpha, b.alpha, t) });\n    } else {\n      entering.push({ item: b, pos: lerp(finiteOr(fromAt(b.value), b.pos), b.pos, t), alpha: b.alpha * t });\n    }\n  }\n  const leaving = from\n    .filter((a) => !kept.has(a))\n    .map((a) => ({ item: a, pos: lerp(a.pos, finiteOr(toAt(a.value), a.pos), t), alpha: a.alpha * (1 - t) }));\n  return [...leaving, ...entering];\n}\n\n/**\n * A weighted mix of `parts`' mappings for one axis: every part that can place a\n * value contributes by weight; a value only some parts can place lands where\n * they put it, and one only weightless parts can place falls back to the newest.\n */\nfunction mixedAt(parts: ScaleFrame['parts'], axis: 'xAt' | 'yAt'): (value: unknown) => number | undefined {\n  if (parts.length === 1) return parts[0].maps[axis];\n  return (value) => {\n    let sum = 0;\n    let total = 0;\n    for (const { weight, maps } of parts) {\n      if (!(weight > 0)) continue;\n      const p = maps[axis](value);\n      if (p === undefined || !Number.isFinite(p)) continue;\n      sum += weight * p;\n      total += weight;\n    }\n    if (total > 0) return sum / total;\n    for (let i = parts.length - 1; i >= 0; i--) {\n      const p = parts[i].maps[axis](value);\n      if (p !== undefined && Number.isFinite(p)) return p;\n    }\n    return undefined;\n  };\n}\n\n/** The current frame's mappings, as stashed for the next morph. */\nexport function scaleFrameOf(model: CartesianModel): ScaleFrame {\n  const maps: ScaleMaps = { xAt: (v) => model.x.pixel(v), yAt: (v) => model.y.pixel(v) };\n  return { plot: model.plot, xAt: maps.xAt, yAt: maps.yAt, parts: [{ weight: 1, maps }] };\n}\n\n/** `from` mixed `t` of the way into `model`'s mappings. */\nexport function blendScales(from: ScaleFrame, model: CartesianModel, t: number): ScaleFrame {\n  const to = scaleFrameOf(model);\n  const w = Math.min(1, Math.max(0, t));\n  const incoming = { weight: w, maps: to.parts[0].maps };\n  let outgoing = from.parts\n    .map((part) => ({ weight: part.weight * (1 - w), maps: part.maps }))\n    .filter((part) => part.weight >= MIN_PART_WEIGHT);\n  if (outgoing.length > MAX_PARTS - 1) outgoing = outgoing.sort((a, b) => b.weight - a.weight).slice(0, MAX_PARTS - 1);\n  const total = outgoing.reduce((sum, part) => sum + part.weight, incoming.weight);\n  const parts = total > 0\n    ? [...outgoing, incoming].map((part) => ({ weight: part.weight / total, maps: part.maps }))\n    : [{ weight: 1, maps: incoming.maps }];\n  return { plot: lerpRect(from.plot, to.plot, t), xAt: mixedAt(parts, 'xAt'), yAt: mixedAt(parts, 'yAt'), parts };\n}\n\n/**\n * Stash this frame's mappings and return the outgoing ones while morphing (null\n * otherwise). Call once per axis draw, before anything uses {@link morphedModel}.\n * `name` lets a secondary axis (combo's right axis) track its own scale.\n */\nexport function trackScales(surface: Surface, model: CartesianModel, name = AXIS_SCALES): { from: ScaleFrame; t: number } | null {\n  const morph = chromeMorph<ScaleFrame>(surface, name);\n  stashChrome(surface, name, morph ? blendScales(morph.from, model, morph.t) : scaleFrameOf(model));\n  return morph;\n}\n\n/**\n * `model` with its plot and value \u2192 pixel mappings mixed from the outgoing\n * frame's while a morph is drawing (so annotations and trendlines move with the\n * axes); `model` itself otherwise.\n */\nexport function morphedModel(surface: Surface, model: CartesianModel): CartesianModel {\n  const morph = chromeMorph<ScaleFrame>(surface, AXIS_SCALES);\n  if (!morph) return model;\n  const blended = blendScales(morph.from, model, morph.t);\n  return {\n    ...model,\n    plot: blended.plot,\n    x: { ...model.x, pixel: blended.xAt },\n    y: {\n      ...model.y,\n      baseline: lerp(finiteOr(morph.from.yAt(0), model.y.baseline), model.y.baseline, morph.t),\n      pixel: (v) => blended.yAt(v) ?? NaN,\n    },\n  };\n}\n\n/** The axis lines a static draw of `model` produces (`xPlaced` = the labelled x ticks). */\nexport function underlayFrameOf(\n  model: CartesianModel,\n  xPlaced: ReadonlyArray<{ value: TickValue; pos: number }>,\n  grid: { x: boolean; y: boolean },\n): UnderlayFrame {\n  const item = (value: TickValue, pos: number): AxisItem => ({ key: tickKey(value), value, pos, alpha: 1 });\n  const axisLine = model.spec.axes?.x?.show !== false;\n  if (model.orientation === 'horizontal') {\n    return {\n      orientation: 'horizontal',\n      plot: model.plot,\n      valueGrid: grid.y ? model.yTicks.map((tick) => item(tick.value, tick.pos)) : [],\n      xGrid: [],\n      xMarks: axisLine ? model.xTicks.map((tick) => item(tick.value, tick.pos)) : [],\n      axisLine,\n    };\n  }\n  return {\n    orientation: 'vertical',\n    plot: model.plot,\n    valueGrid: grid.y ? model.yTicks.map((tick) => item(tick.value, tick.pos)) : [],\n    xGrid: grid.x ? xPlaced.map((p) => item(p.value, p.pos)) : [],\n    xMarks: axisLine ? xPlaced.map((p) => item(p.value, p.pos)) : [],\n    axisLine,\n  };\n}\n\n/** `to` blended from `from`: what a tween frame paints (and stashes). */\nexport function blendUnderlay(from: UnderlayFrame, to: UnderlayFrame, t: number, scales: ScaleFrame, model: CartesianModel): UnderlayFrame {\n  const xAt = (v: TickValue) => model.x.pixel(v);\n  const yAt = (v: TickValue) => model.y.pixel(v);\n  const settle = (items: Array<{ item: AxisItem; pos: number; alpha: number }>): AxisItem[] =>\n    visibleItems(items.map(({ item, pos, alpha }) => ({ ...item, pos, alpha })));\n  // A frame whose orientation flipped has nothing to glide from: cross-fade instead.\n  const flipped = from.orientation !== to.orientation;\n  const fromOf = (items: AxisItem[]) => (flipped ? [] : items);\n  return {\n    orientation: to.orientation,\n    plot: lerpRect(from.plot, to.plot, t),\n    valueGrid: settle(blendItems(fromOf(from.valueGrid), to.valueGrid, t, scales.yAt, yAt)),\n    xGrid: settle(blendItems(fromOf(from.xGrid), to.xGrid, t, scales.xAt, xAt)),\n    xMarks: settle(blendItems(fromOf(from.xMarks), to.xMarks, t, scales.xAt, xAt)),\n    axisLine: to.axisLine,\n  };\n}\n\n/**\n * Paint a blended underlay: gridlines clipped to the (moving) plot, each at its\n * own opacity, then the axis line and tick marks.\n */\nexport function paintUnderlay(ctx: CanvasRenderingContext2D, frame: UnderlayFrame, colors: { grid: string; axis: string }, tickSize: number): void {\n  const { plot } = frame;\n  const x0 = plot.x;\n  const x1 = plot.x + plot.width;\n  const y0 = plot.y;\n  const y1 = plot.y + plot.height;\n  const stroke = (alpha: number, color: string, path: () => void) => {\n    if (!(alpha > 0.002)) return;\n    ctx.globalAlpha = Math.min(1, alpha);\n    ctx.strokeStyle = color;\n    ctx.beginPath();\n    path();\n    ctx.stroke();\n  };\n  const horizontal = frame.orientation === 'horizontal';\n  ctx.save();\n  ctx.lineWidth = 1;\n  ctx.save();\n  ctx.beginPath();\n  ctx.rect(x0 - 0.5, y0 - 0.5, plot.width + 1, plot.height + 1);\n  ctx.clip();\n  for (const line of frame.valueGrid) {\n    stroke(line.alpha, colors.grid, () => {\n      if (horizontal) {\n        ctx.moveTo(crisp(line.pos), y0);\n        ctx.lineTo(crisp(line.pos), y1);\n      } else {\n        ctx.moveTo(x0, crisp(line.pos));\n        ctx.lineTo(x1, crisp(line.pos));\n      }\n    });\n  }\n  for (const line of frame.xGrid) {\n    stroke(line.alpha, colors.grid, () => {\n      ctx.moveTo(crisp(line.pos), y0);\n      ctx.lineTo(crisp(line.pos), y1);\n    });\n  }\n  ctx.restore();\n  if (frame.axisLine) {\n    stroke(1, colors.axis, () => {\n      if (horizontal) {\n        ctx.moveTo(crisp(x0), y0);\n        ctx.lineTo(crisp(x0), y1);\n      } else {\n        ctx.moveTo(x0, crisp(y1));\n        ctx.lineTo(x1, crisp(y1));\n      }\n    });\n    for (const mark of frame.xMarks) {\n      // Tick marks sit outside the plot; keep the ones that have left its span hidden.\n      const inside = horizontal ? mark.pos >= y0 - 1 && mark.pos <= y1 + 1 : mark.pos >= x0 - 1 && mark.pos <= x1 + 1;\n      if (!inside) continue;\n      stroke(mark.alpha, colors.axis, () => {\n        if (horizontal) {\n          ctx.moveTo(x0 - tickSize, crisp(mark.pos));\n          ctx.lineTo(x0, crisp(mark.pos));\n        } else {\n          ctx.moveTo(crisp(mark.pos), y1);\n          ctx.lineTo(crisp(mark.pos), y1 + tickSize);\n        }\n      });\n    }\n  }\n  ctx.restore();\n}\n"],
+  "mappings": "AAeA,SAAS,aAAa,aAAa,oBAAoB;AACvD,SAAS,aAAa;AAGf,MAAM,cAAc;AACpB,MAAM,gBAAgB;AACtB,MAAM,cAAc;AAsB3B,MAAM,kBAAkB;AAExB,MAAM,YAAY;AAyBX,MAAM,OAAO,CAAC,GAAW,GAAW,MAAsB,KAAK,IAAI,KAAK;AAExE,SAAS,SAAS,GAAS,GAAS,GAAiB;AAC1D,SAAO,EAAE,GAAG,KAAK,EAAE,GAAG,EAAE,GAAG,CAAC,GAAG,GAAG,KAAK,EAAE,GAAG,EAAE,GAAG,CAAC,GAAG,OAAO,KAAK,EAAE,OAAO,EAAE,OAAO,CAAC,GAAG,QAAQ,KAAK,EAAE,QAAQ,EAAE,QAAQ,CAAC,EAAE;AAC7H;AAGO,SAAS,QAAQ,OAA0B;AAChD,SAAO,GAAG,OAAO,UAAU,WAAW,MAAM,GAAG,IAAI,KAAK;AAC1D;AAEA,SAAS,SAAS,OAA2B,UAA0B;AACrE,SAAO,UAAU,UAAa,OAAO,SAAS,KAAK,IAAI,QAAQ;AACjE;AAQO,SAAS,WACd,MACA,IACA,GACA,QACA,MACA,OAAgC,MAAM,MACU;AAChD,QAAM,QAAQ,oBAAI,IAAe;AACjC,aAAW,KAAK,KAAM,OAAM,IAAI,EAAE,KAAK,CAAC;AACxC,QAAM,OAAO,oBAAI,IAAO;AACxB,QAAM,WAA2D,CAAC;AAClE,aAAW,KAAK,IAAI;AAClB,UAAM,IAAI,MAAM,IAAI,EAAE,GAAG;AACzB,QAAI,KAAK,CAAC,KAAK,IAAI,CAAC,KAAK,KAAK,GAAG,CAAC,GAAG;AACnC,WAAK,IAAI,CAAC;AACV,eAAS,KAAK,EAAE,MAAM,GAAG,KAAK,KAAK,EAAE,KAAK,EAAE,KAAK,CAAC,GAAG,OAAO,KAAK,EAAE,OAAO,EAAE,OAAO,CAAC,EAAE,CAAC;AAAA,IACzF,OAAO;AACL,eAAS,KAAK,EAAE,MAAM,GAAG,KAAK,KAAK,SAAS,OAAO,EAAE,KAAK,GAAG,EAAE,GAAG,GAAG,EAAE,KAAK,CAAC,GAAG,OAAO,EAAE,QAAQ,EAAE,CAAC;AAAA,IACtG;AAAA,EACF;AACA,QAAM,UAAU,KACb,OAAO,CAAC,MAAM,CAAC,KAAK,IAAI,CAAC,CAAC,EAC1B,IAAI,CAAC,OAAO,EAAE,MAAM,GAAG,KAAK,KAAK,EAAE,KAAK,SAAS,KAAK,EAAE,KAAK,GAAG,EAAE,GAAG,GAAG,CAAC,GAAG,OAAO,EAAE,SAAS,IAAI,GAAG,EAAE;AAC1G,SAAO,CAAC,GAAG,SAAS,GAAG,QAAQ;AACjC;AAOA,SAAS,QAAQ,OAA4B,MAA6D;AACxG,MAAI,MAAM,WAAW,EAAG,QAAO,MAAM,CAAC,EAAE,KAAK,IAAI;AACjD,SAAO,CAAC,UAAU;AAChB,QAAI,MAAM;AACV,QAAI,QAAQ;AACZ,eAAW,EAAE,QAAQ,KAAK,KAAK,OAAO;AACpC,UAAI,EAAE,SAAS,GAAI;AACnB,YAAM,IAAI,KAAK,IAAI,EAAE,KAAK;AAC1B,UAAI,MAAM,UAAa,CAAC,OAAO,SAAS,CAAC,EAAG;AAC5C,aAAO,SAAS;AAChB,eAAS;AAAA,IACX;AACA,QAAI,QAAQ,EAAG,QAAO,MAAM;AAC5B,aAAS,IAAI,MAAM,SAAS,GAAG,KAAK,GAAG,KAAK;AAC1C,YAAM,IAAI,MAAM,CAAC,EAAE,KAAK,IAAI,EAAE,KAAK;AACnC,UAAI,MAAM,UAAa,OAAO,SAAS,CAAC,EAAG,QAAO;AAAA,IACpD;AACA,WAAO;AAAA,EACT;AACF;AAGO,SAAS,aAAa,OAAmC;AAC9D,QAAM,OAAkB,EAAE,KAAK,CAAC,MAAM,MAAM,EAAE,MAAM,CAAC,GAAG,KAAK,CAAC,MAAM,MAAM,EAAE,MAAM,CAAC,EAAE;AACrF,SAAO,EAAE,MAAM,MAAM,MAAM,KAAK,KAAK,KAAK,KAAK,KAAK,KAAK,OAAO,CAAC,EAAE,QAAQ,GAAG,KAAK,CAAC,EAAE;AACxF;AAGO,SAAS,YAAY,MAAkB,OAAuB,GAAuB;AAC1F,QAAM,KAAK,aAAa,KAAK;AAC7B,QAAM,IAAI,KAAK,IAAI,GAAG,KAAK,IAAI,GAAG,CAAC,CAAC;AACpC,QAAM,WAAW,EAAE,QAAQ,GAAG,MAAM,GAAG,MAAM,CAAC,EAAE,KAAK;AACrD,MAAI,WAAW,KAAK,MACjB,IAAI,CAAC,UAAU,EAAE,QAAQ,KAAK,UAAU,IAAI,IAAI,MAAM,KAAK,KAAK,EAAE,EAClE,OAAO,CAAC,SAAS,KAAK,UAAU,eAAe;AAClD,MAAI,SAAS,SAAS,YAAY,EAAG,YAAW,SAAS,KAAK,CAAC,GAAG,MAAM,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,GAAG,YAAY,CAAC;AACnH,QAAM,QAAQ,SAAS,OAAO,CAAC,KAAK,SAAS,MAAM,KAAK,QAAQ,SAAS,MAAM;AAC/E,QAAM,QAAQ,QAAQ,IAClB,CAAC,GAAG,UAAU,QAAQ,EAAE,IAAI,CAAC,UAAU,EAAE,QAAQ,KAAK,SAAS,OAAO,MAAM,KAAK,KAAK,EAAE,IACxF,CAAC,EAAE,QAAQ,GAAG,MAAM,SAAS,KAAK,CAAC;AACvC,SAAO,EAAE,MAAM,SAAS,KAAK,MAAM,GAAG,MAAM,CAAC,GAAG,KAAK,QAAQ,OAAO,KAAK,GAAG,KAAK,QAAQ,OAAO,KAAK,GAAG,MAAM;AAChH;AAOO,SAAS,YAAY,SAAkB,OAAuB,OAAO,aAAqD;AAC/H,QAAM,QAAQ,YAAwB,SAAS,IAAI;AACnD,cAAY,SAAS,MAAM,QAAQ,YAAY,MAAM,MAAM,OAAO,MAAM,CAAC,IAAI,aAAa,KAAK,CAAC;AAChG,SAAO;AACT;AAOO,SAAS,aAAa,SAAkB,OAAuC;AACpF,QAAM,QAAQ,YAAwB,SAAS,WAAW;AAC1D,MAAI,CAAC,MAAO,QAAO;AACnB,QAAM,UAAU,YAAY,MAAM,MAAM,OAAO,MAAM,CAAC;AACtD,SAAO;AAAA,IACL,GAAG;AAAA,IACH,MAAM,QAAQ;AAAA,IACd,GAAG,EAAE,GAAG,MAAM,GAAG,OAAO,QAAQ,IAAI;AAAA,IACpC,GAAG;AAAA,MACD,GAAG,MAAM;AAAA,MACT,UAAU,KAAK,SAAS,MAAM,KAAK,IAAI,CAAC,GAAG,MAAM,EAAE,QAAQ,GAAG,MAAM,EAAE,UAAU,MAAM,CAAC;AAAA,MACvF,OAAO,CAAC,MAAM,QAAQ,IAAI,CAAC,KAAK;AAAA,IAClC;AAAA,EACF;AACF;AAGO,SAAS,gBACd,OACA,SACA,MACe;AACf,QAAM,OAAO,CAAC,OAAkB,SAA2B,EAAE,KAAK,QAAQ,KAAK,GAAG,OAAO,KAAK,OAAO,EAAE;AACvG,QAAM,WAAW,MAAM,KAAK,MAAM,GAAG,SAAS;AAC9C,MAAI,MAAM,gBAAgB,cAAc;AACtC,WAAO;AAAA,MACL,aAAa;AAAA,MACb,MAAM,MAAM;AAAA,MACZ,WAAW,KAAK,IAAI,MAAM,OAAO,IAAI,CAAC,SAAS,KAAK,KAAK,OAAO,KAAK,GAAG,CAAC,IAAI,CAAC;AAAA,MAC9E,OAAO,CAAC;AAAA,MACR,QAAQ,WAAW,MAAM,OAAO,IAAI,CAAC,SAAS,KAAK,KAAK,OAAO,KAAK,GAAG,CAAC,IAAI,CAAC;AAAA,MAC7E;AAAA,IACF;AAAA,EACF;AACA,SAAO;AAAA,IACL,aAAa;AAAA,IACb,MAAM,MAAM;AAAA,IACZ,WAAW,KAAK,IAAI,MAAM,OAAO,IAAI,CAAC,SAAS,KAAK,KAAK,OAAO,KAAK,GAAG,CAAC,IAAI,CAAC;AAAA,IAC9E,OAAO,KAAK,IAAI,QAAQ,IAAI,CAAC,MAAM,KAAK,EAAE,OAAO,EAAE,GAAG,CAAC,IAAI,CAAC;AAAA,IAC5D,QAAQ,WAAW,QAAQ,IAAI,CAAC,MAAM,KAAK,EAAE,OAAO,EAAE,GAAG,CAAC,IAAI,CAAC;AAAA,IAC/D;AAAA,EACF;AACF;AAGO,SAAS,cAAc,MAAqB,IAAmB,GAAW,QAAoB,OAAsC;AACzI,QAAM,MAAM,CAAC,MAAiB,MAAM,EAAE,MAAM,CAAC;AAC7C,QAAM,MAAM,CAAC,MAAiB,MAAM,EAAE,MAAM,CAAC;AAC7C,QAAM,SAAS,CAAC,UACd,aAAa,MAAM,IAAI,CAAC,EAAE,MAAM,KAAK,MAAM,OAAO,EAAE,GAAG,MAAM,KAAK,MAAM,EAAE,CAAC;AAE7E,QAAM,UAAU,KAAK,gBAAgB,GAAG;AACxC,QAAM,SAAS,CAAC,UAAuB,UAAU,CAAC,IAAI;AACtD,SAAO;AAAA,IACL,aAAa,GAAG;AAAA,IAChB,MAAM,SAAS,KAAK,MAAM,GAAG,MAAM,CAAC;AAAA,IACpC,WAAW,OAAO,WAAW,OAAO,KAAK,SAAS,GAAG,GAAG,WAAW,GAAG,OAAO,KAAK,GAAG,CAAC;AAAA,IACtF,OAAO,OAAO,WAAW,OAAO,KAAK,KAAK,GAAG,GAAG,OAAO,GAAG,OAAO,KAAK,GAAG,CAAC;AAAA,IAC1E,QAAQ,OAAO,WAAW,OAAO,KAAK,MAAM,GAAG,GAAG,QAAQ,GAAG,OAAO,KAAK,GAAG,CAAC;AAAA,IAC7E,UAAU,GAAG;AAAA,EACf;AACF;AAMO,SAAS,cAAc,KAA+B,OAAsB,QAAwC,UAAwB;AACjJ,QAAM,EAAE,KAAK,IAAI;AACjB,QAAM,KAAK,KAAK;AAChB,QAAM,KAAK,KAAK,IAAI,KAAK;AACzB,QAAM,KAAK,KAAK;AAChB,QAAM,KAAK,KAAK,IAAI,KAAK;AACzB,QAAM,SAAS,CAAC,OAAe,OAAe,SAAqB;AACjE,QAAI,EAAE,QAAQ,MAAQ;AACtB,QAAI,cAAc,KAAK,IAAI,GAAG,KAAK;AACnC,QAAI,cAAc;AAClB,QAAI,UAAU;AACd,SAAK;AACL,QAAI,OAAO;AAAA,EACb;AACA,QAAM,aAAa,MAAM,gBAAgB;AACzC,MAAI,KAAK;AACT,MAAI,YAAY;AAChB,MAAI,KAAK;AACT,MAAI,UAAU;AACd,MAAI,KAAK,KAAK,KAAK,KAAK,KAAK,KAAK,QAAQ,GAAG,KAAK,SAAS,CAAC;AAC5D,MAAI,KAAK;AACT,aAAW,QAAQ,MAAM,WAAW;AAClC,WAAO,KAAK,OAAO,OAAO,MAAM,MAAM;AACpC,UAAI,YAAY;AACd,YAAI,OAAO,MAAM,KAAK,GAAG,GAAG,EAAE;AAC9B,YAAI,OAAO,MAAM,KAAK,GAAG,GAAG,EAAE;AAAA,MAChC,OAAO;AACL,YAAI,OAAO,IAAI,MAAM,KAAK,GAAG,CAAC;AAC9B,YAAI,OAAO,IAAI,MAAM,KAAK,GAAG,CAAC;AAAA,MAChC;AAAA,IACF,CAAC;AAAA,EACH;AACA,aAAW,QAAQ,MAAM,OAAO;AAC9B,WAAO,KAAK,OAAO,OAAO,MAAM,MAAM;AACpC,UAAI,OAAO,MAAM,KAAK,GAAG,GAAG,EAAE;AAC9B,UAAI,OAAO,MAAM,KAAK,GAAG,GAAG,EAAE;AAAA,IAChC,CAAC;AAAA,EACH;AACA,MAAI,QAAQ;AACZ,MAAI,MAAM,UAAU;AAClB,WAAO,GAAG,OAAO,MAAM,MAAM;AAC3B,UAAI,YAAY;AACd,YAAI,OAAO,MAAM,EAAE,GAAG,EAAE;AACxB,YAAI,OAAO,MAAM,EAAE,GAAG,EAAE;AAAA,MAC1B,OAAO;AACL,YAAI,OAAO,IAAI,MAAM,EAAE,CAAC;AACxB,YAAI,OAAO,IAAI,MAAM,EAAE,CAAC;AAAA,MAC1B;AAAA,IACF,CAAC;AACD,eAAW,QAAQ,MAAM,QAAQ;AAE/B,YAAM,SAAS,aAAa,KAAK,OAAO,KAAK,KAAK,KAAK,OAAO,KAAK,IAAI,KAAK,OAAO,KAAK,KAAK,KAAK,OAAO,KAAK;AAC9G,UAAI,CAAC,OAAQ;AACb,aAAO,KAAK,OAAO,OAAO,MAAM,MAAM;AACpC,YAAI,YAAY;AACd,cAAI,OAAO,KAAK,UAAU,MAAM,KAAK,GAAG,CAAC;AACzC,cAAI,OAAO,IAAI,MAAM,KAAK,GAAG,CAAC;AAAA,QAChC,OAAO;AACL,cAAI,OAAO,MAAM,KAAK,GAAG,GAAG,EAAE;AAC9B,cAAI,OAAO,MAAM,KAAK,GAAG,GAAG,KAAK,QAAQ;AAAA,QAC3C;AAAA,MACF,CAAC;AAAA,IACH;AAAA,EACF;AACA,MAAI,QAAQ;AACd;",
+  "names": []
+}

package/dist/axes/overlay.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"overlay.d.ts","sourceRoot":"","sources":["../../src/axes/overlay.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAC;AAGjD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAC;AAM3D,4EAA4E;AAC5E,wBAAgB,WAAW,CAAC,OAAO,EAAE,OAAO,EAAE,KAAK,EAAE,cAAc,GAAG,IAAI,CAOzE"}
+{"version":3,"file":"overlay.d.ts","sourceRoot":"","sources":["../../src/axes/overlay.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAC;AAIjD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAC;AAoB3D,4EAA4E;AAC5E,wBAAgB,WAAW,CAAC,OAAO,EAAE,OAAO,EAAE,KAAK,EAAE,cAAc,GAAG,IAAI,CAOzE"}

package/dist/axes/overlay.js

@@ -1,37 +1,85 @@
 import { fontString } from "../render/text.js";
 import { TICK_SIZE } from "../layout/index.js";
+import { CHROME_VISIBLE, chromeMorph, stashChrome, visibleItems } from "../render/chromeMotion.js";
 import { drawLegend } from "./legend.js";
 import { drawAxisTitles, drawTitle } from "./title.js";
 import { flatLabelBounds, placeXLabels, resolveXLabels, thinGutterTicks } from "./tickLabels.js";
 import { addText } from "./text.js";
+import { AXIS_LABELS, AXIS_SCALES, blendItems, lerpRect, morphedModel, tickKey } from "./morph.js";
 function drawOverlay(surface, model) {
-  drawGutterTickLabels(surface, model);
-  drawBottomTickLabels(surface, model);
-  drawAxisTitles(surface, model);
+  drawTickLabels(surface, model, [...gutterTickLabels(surface, model), ...bottomTickLabels(surface, model)]);
+  drawAxisTitles(surface, morphedModel(surface, model));
   drawTitle(surface, model.frame, model.spec, model.tokens);
   recordDroppedLegend(surface, model);
   if (model.frame.legendItems) drawLegend(surface, model.frame.legendItems, model);
 }
-function drawGutterTickLabels(surface, model) {
+function drawTickLabels(surface, model, items) {
+  const morph = model.sketch ? null : chromeMorph(surface, AXIS_LABELS);
+  const scales = morph ? chromeMorph(surface, AXIS_SCALES) : null;
+  if (!morph || !scales) {
+    for (const item of items) addText(surface, item.font, item.opts);
+    stashChrome(surface, AXIS_LABELS, items);
+    return;
+  }
+  const same = (a, b) => a.along === b.along && a.opts.text === b.opts.text;
+  const blendAxis = (axis) => blendItems(
+    morph.from.filter((item) => item.axis === axis),
+    items.filter((item) => item.axis === axis),
+    morph.t,
+    axis === "x" ? scales.from.xAt : scales.from.yAt,
+    axis === "x" ? (v) => model.x.pixel(v) : (v) => model.y.pixel(v),
+    same
+  );
+  const plot = lerpRect(scales.from.plot, model.plot, morph.t);
+  const within = (item, pos) => {
+    const [lo, hi] = item.along === "top" ? [plot.y, plot.y + plot.height] : [plot.x, plot.x + plot.width];
+    const outside = pos < lo ? lo - pos : pos > hi ? pos - hi : 0;
+    return Math.max(0, 1 - outside / 10);
+  };
+  const across = (item) => {
+    if (item.along === "left") return { top: (item.opts.top ?? 0) + (plot.y + plot.height) - (item.plot.y + item.plot.height) };
+    const shift = plot.x - item.plot.x;
+    return item.opts.align === "right" && item.opts.width !== void 0 ? { width: Math.max(0, item.opts.width + shift) } : { left: (item.opts.left ?? 0) + shift };
+  };
+  const drawn = visibleItems([...blendAxis("y"), ...blendAxis("x")].map(({ item, pos, alpha }) => ({
+    ...item,
+    pos,
+    alpha,
+    plot,
+    opts: { ...item.opts, ...across(item), [item.along]: (item.opts[item.along] ?? 0) + (pos - item.pos), opacity: alpha * within(item, pos) }
+  })));
+  for (const item of drawn) if ((item.opts.opacity ?? 1) > CHROME_VISIBLE) addText(surface, item.font, item.opts);
+  stashChrome(surface, AXIS_LABELS, drawn);
+}
+function gutterTickLabels(surface, model) {
   const { plot, tokens } = model;
   const f = tokens.font;
   const horizontal = model.orientation === "horizontal";
   const gutterTicks = horizontal ? model.xTicks : model.yTicks;
   const gutterLabelsOn = horizontal ? model.spec.axes?.x?.labels !== false && model.spec.axes?.x?.show !== false : model.spec.axes?.y?.labels !== false && model.spec.axes?.y?.show !== false;
-  if (!gutterLabelsOn) return;
+  if (!gutterLabelsOn) return [];
   const smallFont = fontString(f.size.small, f.family, f.weight.normal);
   const gutterRight = plot.x - TICK_SIZE - 4;
   const kept = thinGutterTicks(gutterTicks, f.size.small);
+  const axis = horizontal ? "x" : "y";
   surface.labels?.omit({
     role: "axis-label",
     reason: "collision",
     required: horizontal && model.x.kind === "band",
     count: gutterTicks.length - kept.length,
-    axis: horizontal ? "x" : "y",
+    axis,
     path: horizontal ? "/axes/x" : "/axes/y"
   });
-  for (const t of kept) {
-    addText(surface, smallFont, {
+  return kept.map((t) => ({
+    key: tickKey(t.value),
+    value: t.value,
+    pos: t.pos,
+    alpha: 1,
+    axis,
+    along: "top",
+    plot,
+    font: smallFont,
+    opts: {
       left: 0,
       top: t.pos,
       width: Math.max(0, gutterRight),
@@ -41,18 +89,17 @@ function drawGutterTickLabels(surface, model) {
       align: "right",
       transform: "translateY(-50%)",
       role: "axis-label",
-      axis: horizontal ? "x" : "y"
-    });
-  }
+      axis
+    }
+  }));
 }
-function drawBottomTickLabels(surface, model) {
+function bottomTickLabels(surface, model) {
   const horizontal = model.orientation === "horizontal";
   const bottomLabelsOn = horizontal ? model.spec.axes?.y?.labels !== false && model.spec.axes?.y?.show !== false : model.spec.axes?.x?.labels !== false && model.spec.axes?.x?.show !== false;
-  if (!bottomLabelsOn) return;
-  if (horizontal) drawHorizontalBottomLabels(surface, model);
-  else drawVerticalBottomLabels(surface, model);
+  if (!bottomLabelsOn) return [];
+  return horizontal ? horizontalBottomLabels(surface, model) : verticalBottomLabels(surface, model);
 }
-function drawHorizontalBottomLabels(surface, model) {
+function horizontalBottomLabels(surface, model) {
   const { plot, tokens, frame } = model;
   const f = tokens.font;
   const smallFont = fontString(f.size.small, f.family, f.weight.normal);
@@ -67,8 +114,16 @@ function drawHorizontalBottomLabels(surface, model) {
     axis: "y",
     path: "/axes/y"
   });
-  for (const p of placed) {
-    addText(surface, smallFont, {
+  return placed.map((p) => ({
+    key: tickKey(p.value),
+    value: p.value,
+    pos: p.pos,
+    alpha: 1,
+    axis: "y",
+    along: "left",
+    plot,
+    font: smallFont,
+    opts: {
       left: p.left,
       top,
       text: p.text,
@@ -78,10 +133,10 @@ function drawHorizontalBottomLabels(surface, model) {
       maxWidth: frame.xLabelMaxWidth,
       role: "axis-label",
       axis: "y"
-    });
-  }
+    }
+  }));
 }
-function drawVerticalBottomLabels(surface, model) {
+function verticalBottomLabels(surface, model) {
   const { plot, tokens, frame } = model;
   const f = tokens.font;
   const smallFont = fontString(f.size.small, f.family, f.weight.normal);
@@ -96,8 +151,16 @@ function drawVerticalBottomLabels(surface, model) {
     axis: "x",
     path: "/axes/x"
   });
-  for (const p of placed) {
-    addText(surface, smallFont, {
+  return placed.map((p) => ({
+    key: tickKey(p.value),
+    value: p.value,
+    pos: p.pos,
+    alpha: 1,
+    axis: "x",
+    along: "left",
+    plot,
+    font: smallFont,
+    opts: {
       left: p.left,
       top,
       text: p.text,
@@ -109,8 +172,8 @@ function drawVerticalBottomLabels(surface, model) {
       maxWidth: frame.xLabelMaxWidth,
       role: "axis-label",
       axis: "x"
-    });
-  }
+    }
+  }));
 }
 function recordDroppedLegend(surface, model) {
   const { frame } = model;

package/dist/axes/overlay.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/axes/overlay.ts"],
-  "sourcesContent": ["import type { Surface } from '../render/surface';\nimport { fontString } from '../render/text';\nimport { TICK_SIZE } from '../layout';\nimport type { CartesianModel } from '../runtime/cartesian';\nimport { drawLegend } from './legend';\nimport { drawAxisTitles, drawTitle } from './title';\nimport { flatLabelBounds, placeXLabels, resolveXLabels, thinGutterTicks } from './tickLabels';\nimport { addText } from './text';\n\n/** Draw all overlay text: tick labels, axis titles, chart title, legend. */\nexport function drawOverlay(surface: Surface, model: CartesianModel): void {\n  drawGutterTickLabels(surface, model);\n  drawBottomTickLabels(surface, model);\n  drawAxisTitles(surface, model);\n  drawTitle(surface, model.frame, model.spec, model.tokens);\n  recordDroppedLegend(surface, model);\n  if (model.frame.legendItems) drawLegend(surface, model.frame.legendItems, model);\n}\n\n/**\n * Draw the tick labels that live in the left gutter. Horizontal bar charts\n * swap category/value axes, so the required/axis metadata follows the model\n * orientation rather than a hard-coded x/y side.\n */\nfunction drawGutterTickLabels(surface: Surface, model: CartesianModel): void {\n  const { plot, tokens } = model;\n  const f = tokens.font;\n  const horizontal = model.orientation === 'horizontal';\n  // Axis tick labels. In horizontal bar mode the category axis runs down the left\n  // gutter and the value axis along the bottom, so the two label sets swap sides.\n  const gutterTicks = horizontal ? model.xTicks : model.yTicks;\n  const gutterLabelsOn = horizontal\n    ? model.spec.axes?.x?.labels !== false && model.spec.axes?.x?.show !== false\n    : model.spec.axes?.y?.labels !== false && model.spec.axes?.y?.show !== false;\n  if (!gutterLabelsOn) return;\n\n  const smallFont = fontString(f.size.small, f.family, f.weight.normal);\n  const gutterRight = plot.x - TICK_SIZE - 4;\n  const kept = thinGutterTicks(gutterTicks, f.size.small);\n  surface.labels?.omit({\n    role: 'axis-label',\n    reason: 'collision',\n    required: horizontal && model.x.kind === 'band',\n    count: gutterTicks.length - kept.length,\n    axis: horizontal ? 'x' : 'y',\n    path: horizontal ? '/axes/x' : '/axes/y',\n  });\n  for (const t of kept) {\n    addText(surface, smallFont, {\n      left: 0,\n      top: t.pos,\n      width: Math.max(0, gutterRight),\n      text: t.label,\n      color: tokens.color.textMuted,\n      size: f.size.small,\n      align: 'right',\n      transform: 'translateY(-50%)',\n      role: 'axis-label',\n      axis: horizontal ? 'x' : 'y',\n    });\n  }\n}\n\n/**\n * Draw bottom tick labels after resolving which scale occupies the bottom edge.\n * The horizontal path lays out value ticks, while the vertical path lays out\n * category/time ticks and preserves rotated-label behavior.\n */\nfunction drawBottomTickLabels(surface: Surface, model: CartesianModel): void {\n  const horizontal = model.orientation === 'horizontal';\n  // Bottom tick labels: category ticks (vertical) or value ticks (horizontal).\n  // Resolve each to a measured box, clamp the first/last so they never overflow\n  // the surface, then drop any that still collide \u00E2\u20AC\u201D always preserving the final\n  // (right-edge) label, which is the most informative on a time/linear axis.\n  const bottomLabelsOn = horizontal\n    ? model.spec.axes?.y?.labels !== false && model.spec.axes?.y?.show !== false\n    : model.spec.axes?.x?.labels !== false && model.spec.axes?.x?.show !== false;\n  if (!bottomLabelsOn) return;\n\n  if (horizontal) drawHorizontalBottomLabels(surface, model);\n  else drawVerticalBottomLabels(surface, model);\n}\n\n/** Bottom value-axis labels for horizontal bar charts. */\nfunction drawHorizontalBottomLabels(surface: Surface, model: CartesianModel): void {\n  const { plot, tokens, frame } = model;\n  const f = tokens.font;\n  const smallFont = fontString(f.size.small, f.family, f.weight.normal);\n  const top = plot.y + plot.height + TICK_SIZE + 3;\n  const bounds = flatLabelBounds(frame);\n  const placed = placeXLabels(model.yTicks, bounds.originX, bounds.width, smallFont);\n  surface.labels?.omit({\n    role: 'axis-label',\n    reason: 'collision',\n    required: false,\n    count: model.yTicks.length - placed.length,\n    axis: 'y',\n    path: '/axes/y',\n  });\n  for (const p of placed) {\n    addText(surface, smallFont, {\n      left: p.left,\n      top,\n      text: p.text,\n      color: tokens.color.textMuted,\n      size: f.size.small,\n      transform: p.transform,\n      maxWidth: frame.xLabelMaxWidth,\n      role: 'axis-label',\n      axis: 'y',\n    });\n  }\n}\n\n/** Bottom x-axis labels for the standard vertical cartesian orientation. */\nfunction drawVerticalBottomLabels(surface: Surface, model: CartesianModel): void {\n  const { plot, tokens, frame } = model;\n  const f = tokens.font;\n  const smallFont = fontString(f.size.small, f.family, f.weight.normal);\n  const top = plot.y + plot.height + TICK_SIZE + 3;\n  const rotated = frame.xLabelAngle > 0;\n  const placed = resolveXLabels(model);\n  surface.labels?.omit({\n    role: 'axis-label',\n    reason: 'collision',\n    required: model.x.kind === 'band',\n    count: model.xTicks.length - placed.length,\n    axis: 'x',\n    path: '/axes/x',\n  });\n  for (const p of placed) {\n    addText(surface, smallFont, {\n      left: p.left,\n      top,\n      text: p.text,\n      color: tokens.color.textMuted,\n      size: f.size.small,\n      align: rotated ? 'right' : undefined,\n      transform: p.transform,\n      transformOrigin: rotated ? '100% 0%' : undefined,\n      maxWidth: frame.xLabelMaxWidth,\n      role: 'axis-label',\n      axis: 'x',\n    });\n  }\n}\n\n/**\n * If frame compaction dropped the legend entirely, record that omission so\n * reports still explain why identifying series text is missing.\n */\nfunction recordDroppedLegend(surface: Surface, model: CartesianModel): void {\n  const { frame } = model;\n  if (\n    frame.dropped?.includes('legend') &&\n    model.spec.legend !== false &&\n    !(typeof model.spec.legend === 'object' && model.spec.legend.show === false)\n  ) {\n    surface.labels?.omit({\n      role: 'legend',\n      reason: 'frame',\n      required: true,\n      count: model.series.length,\n      path: '/legend',\n    });\n  }\n}\n"],
-  "mappings": "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",
+  "sourcesContent": ["import type { Surface } from '../render/surface';\nimport type { Rect } from '../types';\nimport { fontString } from '../render/text';\nimport { TICK_SIZE } from '../layout';\nimport type { CartesianModel } from '../runtime/cartesian';\nimport { CHROME_VISIBLE, chromeMorph, stashChrome, visibleItems } from '../render/chromeMotion';\nimport { drawLegend } from './legend';\nimport { drawAxisTitles, drawTitle } from './title';\nimport { flatLabelBounds, placeXLabels, resolveXLabels, thinGutterTicks } from './tickLabels';\nimport { addText, type TextOptions } from './text';\nimport { AXIS_LABELS, AXIS_SCALES, blendItems, lerpRect, morphedModel, tickKey, type AxisItem, type ScaleFrame } from './morph';\n\n/** A tick label as drawn, keyed by its tick value so a morph can carry it to its new place. */\ninterface LabelItem extends AxisItem {\n  /** The axis whose scale places the label's value. */\n  axis: 'x' | 'y';\n  /** The text-box coordinate that moves with the tick. */\n  along: 'left' | 'top';\n  /** The plot the label was laid out against (its gutter edge / baseline). */\n  plot: Rect;\n  font: string;\n  opts: TextOptions;\n}\n\n/** Draw all overlay text: tick labels, axis titles, chart title, legend. */\nexport function drawOverlay(surface: Surface, model: CartesianModel): void {\n  drawTickLabels(surface, model, [...gutterTickLabels(surface, model), ...bottomTickLabels(surface, model)]);\n  // While a morph draws, axis titles stay centred on the moving plot.\n  drawAxisTitles(surface, morphedModel(surface, model));\n  drawTitle(surface, model.frame, model.spec, model.tokens);\n  recordDroppedLegend(surface, model);\n  if (model.frame.legendItems) drawLegend(surface, model.frame.legendItems, model);\n}\n\n/**\n * Paint tick labels. While a morph is drawing, labels glide with their ticks:\n * shared labels move between positions, new ones slide in from where their value\n * sat on the outgoing scale while fading in, and gone ones fade out toward the\n * new scale. Across the axis they follow the moving plot edge, so a gutter that\n * widens (say \"3\" \u2192 \"3,000\") or a baseline that rises carries the labels along.\n */\nfunction drawTickLabels(surface: Surface, model: CartesianModel, items: LabelItem[]): void {\n  const morph = model.sketch ? null : chromeMorph<LabelItem[]>(surface, AXIS_LABELS);\n  const scales = morph ? chromeMorph<ScaleFrame>(surface, AXIS_SCALES) : null;\n  if (!morph || !scales) {\n    for (const item of items) addText(surface, item.font, item.opts);\n    stashChrome(surface, AXIS_LABELS, items);\n    return;\n  }\n  const same = (a: LabelItem, b: LabelItem) => a.along === b.along && a.opts.text === b.opts.text;\n  const blendAxis = (axis: 'x' | 'y') => blendItems(\n    morph.from.filter((item) => item.axis === axis),\n    items.filter((item) => item.axis === axis),\n    morph.t,\n    axis === 'x' ? scales.from.xAt : scales.from.yAt,\n    axis === 'x' ? (v) => model.x.pixel(v) : (v) => model.y.pixel(v),\n    same,\n  );\n  // Ticks sliding in from beyond the plot (or out past it) stay hidden there, as\n  // their clipped gridlines do, instead of drifting over the legend or title.\n  const plot = lerpRect(scales.from.plot, model.plot, morph.t);\n  const within = (item: LabelItem, pos: number): number => {\n    const [lo, hi] = item.along === 'top' ? [plot.y, plot.y + plot.height] : [plot.x, plot.x + plot.width];\n    const outside = pos < lo ? lo - pos : pos > hi ? pos - hi : 0;\n    return Math.max(0, 1 - outside / 10);\n  };\n  /** The label's cross-axis coordinate, moved from its own plot edge to the blended one. */\n  const across = (item: LabelItem): Partial<TextOptions> => {\n    if (item.along === 'left') return { top: (item.opts.top ?? 0) + (plot.y + plot.height) - (item.plot.y + item.plot.height) };\n    // Gutter labels are right-aligned against the plot's left edge.\n    const shift = plot.x - item.plot.x;\n    return item.opts.align === 'right' && item.opts.width !== undefined\n      ? { width: Math.max(0, item.opts.width + shift) }\n      : { left: (item.opts.left ?? 0) + shift };\n  };\n  const drawn = visibleItems([...blendAxis('y'), ...blendAxis('x')].map(({ item, pos, alpha }): LabelItem => ({\n    ...item,\n    pos,\n    alpha,\n    plot,\n    opts: { ...item.opts, ...across(item), [item.along]: (item.opts[item.along] ?? 0) + (pos - item.pos), opacity: alpha * within(item, pos) },\n  })));\n  for (const item of drawn) if ((item.opts.opacity ?? 1) > CHROME_VISIBLE) addText(surface, item.font, item.opts);\n  stashChrome(surface, AXIS_LABELS, drawn);\n}\n\n/**\n * The tick labels that live in the left gutter. Horizontal bar charts swap\n * category/value axes, so the required/axis metadata follows the model\n * orientation rather than a hard-coded x/y side.\n */\nfunction gutterTickLabels(surface: Surface, model: CartesianModel): LabelItem[] {\n  const { plot, tokens } = model;\n  const f = tokens.font;\n  const horizontal = model.orientation === 'horizontal';\n  // Axis tick labels. In horizontal bar mode the category axis runs down the left\n  // gutter and the value axis along the bottom, so the two label sets swap sides.\n  const gutterTicks = horizontal ? model.xTicks : model.yTicks;\n  const gutterLabelsOn = horizontal\n    ? model.spec.axes?.x?.labels !== false && model.spec.axes?.x?.show !== false\n    : model.spec.axes?.y?.labels !== false && model.spec.axes?.y?.show !== false;\n  if (!gutterLabelsOn) return [];\n\n  const smallFont = fontString(f.size.small, f.family, f.weight.normal);\n  const gutterRight = plot.x - TICK_SIZE - 4;\n  const kept = thinGutterTicks(gutterTicks, f.size.small);\n  const axis = horizontal ? 'x' : 'y';\n  surface.labels?.omit({\n    role: 'axis-label',\n    reason: 'collision',\n    required: horizontal && model.x.kind === 'band',\n    count: gutterTicks.length - kept.length,\n    axis,\n    path: horizontal ? '/axes/x' : '/axes/y',\n  });\n  return kept.map((t) => ({\n    key: tickKey(t.value),\n    value: t.value,\n    pos: t.pos,\n    alpha: 1,\n    axis,\n    along: 'top',\n    plot,\n    font: smallFont,\n    opts: {\n      left: 0,\n      top: t.pos,\n      width: Math.max(0, gutterRight),\n      text: t.label,\n      color: tokens.color.textMuted,\n      size: f.size.small,\n      align: 'right',\n      transform: 'translateY(-50%)',\n      role: 'axis-label',\n      axis,\n    },\n  }));\n}\n\n/**\n * Bottom tick labels after resolving which scale occupies the bottom edge.\n * The horizontal path lays out value ticks, while the vertical path lays out\n * category/time ticks and preserves rotated-label behavior.\n */\nfunction bottomTickLabels(surface: Surface, model: CartesianModel): LabelItem[] {\n  const horizontal = model.orientation === 'horizontal';\n  // Bottom tick labels: category ticks (vertical) or value ticks (horizontal).\n  // Resolve each to a measured box, clamp the first/last so they never overflow\n  // the surface, then drop any that still collide \u00E2\u20AC\u201D always preserving the final\n  // (right-edge) label, which is the most informative on a time/linear axis.\n  const bottomLabelsOn = horizontal\n    ? model.spec.axes?.y?.labels !== false && model.spec.axes?.y?.show !== false\n    : model.spec.axes?.x?.labels !== false && model.spec.axes?.x?.show !== false;\n  if (!bottomLabelsOn) return [];\n\n  return horizontal ? horizontalBottomLabels(surface, model) : verticalBottomLabels(surface, model);\n}\n\n/** Bottom value-axis labels for horizontal bar charts. */\nfunction horizontalBottomLabels(surface: Surface, model: CartesianModel): LabelItem[] {\n  const { plot, tokens, frame } = model;\n  const f = tokens.font;\n  const smallFont = fontString(f.size.small, f.family, f.weight.normal);\n  const top = plot.y + plot.height + TICK_SIZE + 3;\n  const bounds = flatLabelBounds(frame);\n  const placed = placeXLabels(model.yTicks, bounds.originX, bounds.width, smallFont);\n  surface.labels?.omit({\n    role: 'axis-label',\n    reason: 'collision',\n    required: false,\n    count: model.yTicks.length - placed.length,\n    axis: 'y',\n    path: '/axes/y',\n  });\n  return placed.map((p) => ({\n    key: tickKey(p.value),\n    value: p.value,\n    pos: p.pos,\n    alpha: 1,\n    axis: 'y',\n    along: 'left',\n    plot,\n    font: smallFont,\n    opts: {\n      left: p.left,\n      top,\n      text: p.text,\n      color: tokens.color.textMuted,\n      size: f.size.small,\n      transform: p.transform,\n      maxWidth: frame.xLabelMaxWidth,\n      role: 'axis-label',\n      axis: 'y',\n    },\n  }));\n}\n\n/** Bottom x-axis labels for the standard vertical cartesian orientation. */\nfunction verticalBottomLabels(surface: Surface, model: CartesianModel): LabelItem[] {\n  const { plot, tokens, frame } = model;\n  const f = tokens.font;\n  const smallFont = fontString(f.size.small, f.family, f.weight.normal);\n  const top = plot.y + plot.height + TICK_SIZE + 3;\n  const rotated = frame.xLabelAngle > 0;\n  const placed = resolveXLabels(model);\n  surface.labels?.omit({\n    role: 'axis-label',\n    reason: 'collision',\n    required: model.x.kind === 'band',\n    count: model.xTicks.length - placed.length,\n    axis: 'x',\n    path: '/axes/x',\n  });\n  return placed.map((p) => ({\n    key: tickKey(p.value),\n    value: p.value,\n    pos: p.pos,\n    alpha: 1,\n    axis: 'x',\n    along: 'left',\n    plot,\n    font: smallFont,\n    opts: {\n      left: p.left,\n      top,\n      text: p.text,\n      color: tokens.color.textMuted,\n      size: f.size.small,\n      align: rotated ? 'right' : undefined,\n      transform: p.transform,\n      transformOrigin: rotated ? '100% 0%' : undefined,\n      maxWidth: frame.xLabelMaxWidth,\n      role: 'axis-label',\n      axis: 'x',\n    },\n  }));\n}\n\n/**\n * If frame compaction dropped the legend entirely, record that omission so\n * reports still explain why identifying series text is missing.\n */\nfunction recordDroppedLegend(surface: Surface, model: CartesianModel): void {\n  const { frame } = model;\n  if (\n    frame.dropped?.includes('legend') &&\n    model.spec.legend !== false &&\n    !(typeof model.spec.legend === 'object' && model.spec.legend.show === false)\n  ) {\n    surface.labels?.omit({\n      role: 'legend',\n      reason: 'frame',\n      required: true,\n      count: model.series.length,\n      path: '/legend',\n    });\n  }\n}\n"],
+  "mappings": "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",
   "names": []
 }

package/dist/axes/text.d.ts

@@ -22,6 +22,8 @@ export interface TextOptions {
     role?: LabelRole;
     axis?: 'x' | 'y';
     path?: string;
+    /** Opacity while chrome glides between frames (unset for static text). */
+    opacity?: number;
 }
 export declare function addText(surface: Surface, font: string, o: TextOptions): void;
 //# sourceMappingURL=text.d.ts.map

package/dist/axes/text.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"text.d.ts","sourceRoot":"","sources":["../../src/axes/text.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAC;AAEjD,OAAO,EAAmC,KAAK,SAAS,EAAE,MAAM,uBAAuB,CAAC;AAExF,MAAM,WAAW,WAAW;IAC1B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,GAAG,QAAQ,GAAG,OAAO,CAAC;IACpC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,UAAU,CAAC,EAAE,QAAQ,GAAG,QAAQ,CAAC;IACjC;;;;OAIG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,mEAAmE;IACnE,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,IAAI,CAAC,EAAE,GAAG,GAAG,GAAG,CAAC;IACjB,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AAED,wBAAgB,OAAO,CAAC,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC,EAAE,WAAW,GAAG,IAAI,CA6D5E"}
+{"version":3,"file":"text.d.ts","sourceRoot":"","sources":["../../src/axes/text.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAC;AAEjD,OAAO,EAAmC,KAAK,SAAS,EAAE,MAAM,uBAAuB,CAAC;AAExF,MAAM,WAAW,WAAW;IAC1B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,GAAG,QAAQ,GAAG,OAAO,CAAC;IACpC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,UAAU,CAAC,EAAE,QAAQ,GAAG,QAAQ,CAAC;IACjC;;;;OAIG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,mEAAmE;IACnE,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,IAAI,CAAC,EAAE,GAAG,GAAG,GAAG,CAAC;IACjB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,0EAA0E;IAC1E,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAED,wBAAgB,OAAO,CAAC,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC,EAAE,WAAW,GAAG,IAAI,CA8D5E"}

package/dist/axes/text.js

@@ -51,6 +51,7 @@ function addText(surface, font, o) {
   }
   if (o.transform) el.style.transform = o.transform;
   if (o.transformOrigin) el.style.transformOrigin = o.transformOrigin;
+  if (o.opacity != null && o.opacity < 1) el.style.opacity = String(Math.max(0, o.opacity));
   el.style.pointerEvents = "none";
   overlay.appendChild(el);
 }

package/dist/axes/text.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/axes/text.ts"],
-  "sourcesContent": ["import type { Surface } from '../render/surface';\nimport { overlayTextToCanvasCmd, paintCanvasText } from '../render/overlayText';\nimport { fitLabel, labelBox, recordLabel, type LabelRole } from '../render/labelLedger';\n\nexport interface TextOptions {\n  left?: number;\n  top?: number;\n  width?: number;\n  text: string;\n  color: string;\n  size: number;\n  weight?: number;\n  align?: 'left' | 'center' | 'right';\n  transform?: string;\n  transformOrigin?: string;\n  whiteSpace?: 'nowrap' | 'normal';\n  /**\n   * Width the text must fit into, when that differs from the layout box `width`\n   * (rotated tick labels have no box but still have a band to stay inside).\n   * Text wider than the effective budget is ellipsized rather than overflowing.\n   */\n  maxWidth?: number;\n  /** Classification recorded in the label ledger for diagnostics. */\n  role?: LabelRole;\n  axis?: 'x' | 'y';\n  path?: string;\n}\n\nexport function addText(surface: Surface, font: string, o: TextOptions): void {\n  const budget = o.maxWidth ?? o.width;\n  const fitted = fitLabel(o.text, budget, font);\n  const geom = {\n    left: o.left ?? 0,\n    top: o.top ?? 0,\n    width: o.width,\n    text: fitted.text,\n    color: o.color,\n    size: o.size,\n    align: o.align,\n    transform: o.transform,\n  };\n  const { box, angle } = labelBox(geom, font);\n  recordLabel(surface.labels, {\n    role: o.role ?? 'other',\n    text: fitted.text,\n    fullText: o.text,\n    truncated: fitted.truncated,\n    box,\n    angle,\n    size: o.size,\n    budget,\n    axis: o.axis,\n    color: o.color,\n    opacity: 1,\n    background: surface.evidence?.background,\n    path:\n      o.path ??\n      (o.axis\n        ? `/axes/${o.axis}`\n        : o.role === 'title' || o.role === 'subtitle'\n          ? '/title'\n          : undefined),\n  });\n\n  if (surface.headless) {\n    paintCanvasText(surface.marks.ctx, overlayTextToCanvasCmd(geom, font));\n    return;\n  }\n  const overlay = surface.overlay;\n  const el = document.createElement('div');\n  el.textContent = fitted.text;\n  // Keep the untruncated string reachable on hover and to assistive tech.\n  if (fitted.truncated) el.title = o.text;\n  el.style.position = 'absolute';\n  el.style.font = font;\n  el.style.fontSize = `${o.size}px`;\n  if (o.weight) el.style.fontWeight = String(o.weight);\n  el.style.color = o.color;\n  el.style.whiteSpace = o.whiteSpace ?? 'nowrap';\n  if (o.left != null) el.style.left = `${o.left}px`;\n  if (o.top != null) el.style.top = `${o.top}px`;\n  if (o.width != null) {\n    el.style.width = `${o.width}px`;\n    el.style.textAlign = o.align ?? 'left';\n  }\n  if (o.transform) el.style.transform = o.transform;\n  if (o.transformOrigin) el.style.transformOrigin = o.transformOrigin;\n  el.style.pointerEvents = 'none';\n  overlay.appendChild(el);\n}\n\n"],
-  "mappings": "AACA,SAAS,wBAAwB,uBAAuB;AACxD,SAAS,UAAU,UAAU,mBAAmC;AA0BzD,SAAS,QAAQ,SAAkB,MAAc,GAAsB;AAC5E,QAAM,SAAS,EAAE,YAAY,EAAE;AAC/B,QAAM,SAAS,SAAS,EAAE,MAAM,QAAQ,IAAI;AAC5C,QAAM,OAAO;AAAA,IACX,MAAM,EAAE,QAAQ;AAAA,IAChB,KAAK,EAAE,OAAO;AAAA,IACd,OAAO,EAAE;AAAA,IACT,MAAM,OAAO;AAAA,IACb,OAAO,EAAE;AAAA,IACT,MAAM,EAAE;AAAA,IACR,OAAO,EAAE;AAAA,IACT,WAAW,EAAE;AAAA,EACf;AACA,QAAM,EAAE,KAAK,MAAM,IAAI,SAAS,MAAM,IAAI;AAC1C,cAAY,QAAQ,QAAQ;AAAA,IAC1B,MAAM,EAAE,QAAQ;AAAA,IAChB,MAAM,OAAO;AAAA,IACb,UAAU,EAAE;AAAA,IACZ,WAAW,OAAO;AAAA,IAClB;AAAA,IACA;AAAA,IACA,MAAM,EAAE;AAAA,IACR;AAAA,IACA,MAAM,EAAE;AAAA,IACR,OAAO,EAAE;AAAA,IACT,SAAS;AAAA,IACT,YAAY,QAAQ,UAAU;AAAA,IAC9B,MACE,EAAE,SACD,EAAE,OACC,SAAS,EAAE,IAAI,KACf,EAAE,SAAS,WAAW,EAAE,SAAS,aAC/B,WACA;AAAA,EACV,CAAC;AAED,MAAI,QAAQ,UAAU;AACpB,oBAAgB,QAAQ,MAAM,KAAK,uBAAuB,MAAM,IAAI,CAAC;AACrE;AAAA,EACF;AACA,QAAM,UAAU,QAAQ;AACxB,QAAM,KAAK,SAAS,cAAc,KAAK;AACvC,KAAG,cAAc,OAAO;AAExB,MAAI,OAAO,UAAW,IAAG,QAAQ,EAAE;AACnC,KAAG,MAAM,WAAW;AACpB,KAAG,MAAM,OAAO;AAChB,KAAG,MAAM,WAAW,GAAG,EAAE,IAAI;AAC7B,MAAI,EAAE,OAAQ,IAAG,MAAM,aAAa,OAAO,EAAE,MAAM;AACnD,KAAG,MAAM,QAAQ,EAAE;AACnB,KAAG,MAAM,aAAa,EAAE,cAAc;AACtC,MAAI,EAAE,QAAQ,KAAM,IAAG,MAAM,OAAO,GAAG,EAAE,IAAI;AAC7C,MAAI,EAAE,OAAO,KAAM,IAAG,MAAM,MAAM,GAAG,EAAE,GAAG;AAC1C,MAAI,EAAE,SAAS,MAAM;AACnB,OAAG,MAAM,QAAQ,GAAG,EAAE,KAAK;AAC3B,OAAG,MAAM,YAAY,EAAE,SAAS;AAAA,EAClC;AACA,MAAI,EAAE,UAAW,IAAG,MAAM,YAAY,EAAE;AACxC,MAAI,EAAE,gBAAiB,IAAG,MAAM,kBAAkB,EAAE;AACpD,KAAG,MAAM,gBAAgB;AACzB,UAAQ,YAAY,EAAE;AACxB;",
+  "sourcesContent": ["import type { Surface } from '../render/surface';\nimport { overlayTextToCanvasCmd, paintCanvasText } from '../render/overlayText';\nimport { fitLabel, labelBox, recordLabel, type LabelRole } from '../render/labelLedger';\n\nexport interface TextOptions {\n  left?: number;\n  top?: number;\n  width?: number;\n  text: string;\n  color: string;\n  size: number;\n  weight?: number;\n  align?: 'left' | 'center' | 'right';\n  transform?: string;\n  transformOrigin?: string;\n  whiteSpace?: 'nowrap' | 'normal';\n  /**\n   * Width the text must fit into, when that differs from the layout box `width`\n   * (rotated tick labels have no box but still have a band to stay inside).\n   * Text wider than the effective budget is ellipsized rather than overflowing.\n   */\n  maxWidth?: number;\n  /** Classification recorded in the label ledger for diagnostics. */\n  role?: LabelRole;\n  axis?: 'x' | 'y';\n  path?: string;\n  /** Opacity while chrome glides between frames (unset for static text). */\n  opacity?: number;\n}\n\nexport function addText(surface: Surface, font: string, o: TextOptions): void {\n  const budget = o.maxWidth ?? o.width;\n  const fitted = fitLabel(o.text, budget, font);\n  const geom = {\n    left: o.left ?? 0,\n    top: o.top ?? 0,\n    width: o.width,\n    text: fitted.text,\n    color: o.color,\n    size: o.size,\n    align: o.align,\n    transform: o.transform,\n  };\n  const { box, angle } = labelBox(geom, font);\n  recordLabel(surface.labels, {\n    role: o.role ?? 'other',\n    text: fitted.text,\n    fullText: o.text,\n    truncated: fitted.truncated,\n    box,\n    angle,\n    size: o.size,\n    budget,\n    axis: o.axis,\n    color: o.color,\n    opacity: 1,\n    background: surface.evidence?.background,\n    path:\n      o.path ??\n      (o.axis\n        ? `/axes/${o.axis}`\n        : o.role === 'title' || o.role === 'subtitle'\n          ? '/title'\n          : undefined),\n  });\n\n  if (surface.headless) {\n    paintCanvasText(surface.marks.ctx, overlayTextToCanvasCmd(geom, font));\n    return;\n  }\n  const overlay = surface.overlay;\n  const el = document.createElement('div');\n  el.textContent = fitted.text;\n  // Keep the untruncated string reachable on hover and to assistive tech.\n  if (fitted.truncated) el.title = o.text;\n  el.style.position = 'absolute';\n  el.style.font = font;\n  el.style.fontSize = `${o.size}px`;\n  if (o.weight) el.style.fontWeight = String(o.weight);\n  el.style.color = o.color;\n  el.style.whiteSpace = o.whiteSpace ?? 'nowrap';\n  if (o.left != null) el.style.left = `${o.left}px`;\n  if (o.top != null) el.style.top = `${o.top}px`;\n  if (o.width != null) {\n    el.style.width = `${o.width}px`;\n    el.style.textAlign = o.align ?? 'left';\n  }\n  if (o.transform) el.style.transform = o.transform;\n  if (o.transformOrigin) el.style.transformOrigin = o.transformOrigin;\n  if (o.opacity != null && o.opacity < 1) el.style.opacity = String(Math.max(0, o.opacity));\n  el.style.pointerEvents = 'none';\n  overlay.appendChild(el);\n}\n\n"],
+  "mappings": "AACA,SAAS,wBAAwB,uBAAuB;AACxD,SAAS,UAAU,UAAU,mBAAmC;AA4BzD,SAAS,QAAQ,SAAkB,MAAc,GAAsB;AAC5E,QAAM,SAAS,EAAE,YAAY,EAAE;AAC/B,QAAM,SAAS,SAAS,EAAE,MAAM,QAAQ,IAAI;AAC5C,QAAM,OAAO;AAAA,IACX,MAAM,EAAE,QAAQ;AAAA,IAChB,KAAK,EAAE,OAAO;AAAA,IACd,OAAO,EAAE;AAAA,IACT,MAAM,OAAO;AAAA,IACb,OAAO,EAAE;AAAA,IACT,MAAM,EAAE;AAAA,IACR,OAAO,EAAE;AAAA,IACT,WAAW,EAAE;AAAA,EACf;AACA,QAAM,EAAE,KAAK,MAAM,IAAI,SAAS,MAAM,IAAI;AAC1C,cAAY,QAAQ,QAAQ;AAAA,IAC1B,MAAM,EAAE,QAAQ;AAAA,IAChB,MAAM,OAAO;AAAA,IACb,UAAU,EAAE;AAAA,IACZ,WAAW,OAAO;AAAA,IAClB;AAAA,IACA;AAAA,IACA,MAAM,EAAE;AAAA,IACR;AAAA,IACA,MAAM,EAAE;AAAA,IACR,OAAO,EAAE;AAAA,IACT,SAAS;AAAA,IACT,YAAY,QAAQ,UAAU;AAAA,IAC9B,MACE,EAAE,SACD,EAAE,OACC,SAAS,EAAE,IAAI,KACf,EAAE,SAAS,WAAW,EAAE,SAAS,aAC/B,WACA;AAAA,EACV,CAAC;AAED,MAAI,QAAQ,UAAU;AACpB,oBAAgB,QAAQ,MAAM,KAAK,uBAAuB,MAAM,IAAI,CAAC;AACrE;AAAA,EACF;AACA,QAAM,UAAU,QAAQ;AACxB,QAAM,KAAK,SAAS,cAAc,KAAK;AACvC,KAAG,cAAc,OAAO;AAExB,MAAI,OAAO,UAAW,IAAG,QAAQ,EAAE;AACnC,KAAG,MAAM,WAAW;AACpB,KAAG,MAAM,OAAO;AAChB,KAAG,MAAM,WAAW,GAAG,EAAE,IAAI;AAC7B,MAAI,EAAE,OAAQ,IAAG,MAAM,aAAa,OAAO,EAAE,MAAM;AACnD,KAAG,MAAM,QAAQ,EAAE;AACnB,KAAG,MAAM,aAAa,EAAE,cAAc;AACtC,MAAI,EAAE,QAAQ,KAAM,IAAG,MAAM,OAAO,GAAG,EAAE,IAAI;AAC7C,MAAI,EAAE,OAAO,KAAM,IAAG,MAAM,MAAM,GAAG,EAAE,GAAG;AAC1C,MAAI,EAAE,SAAS,MAAM;AACnB,OAAG,MAAM,QAAQ,GAAG,EAAE,KAAK;AAC3B,OAAG,MAAM,YAAY,EAAE,SAAS;AAAA,EAClC;AACA,MAAI,EAAE,UAAW,IAAG,MAAM,YAAY,EAAE;AACxC,MAAI,EAAE,gBAAiB,IAAG,MAAM,kBAAkB,EAAE;AACpD,MAAI,EAAE,WAAW,QAAQ,EAAE,UAAU,EAAG,IAAG,MAAM,UAAU,OAAO,KAAK,IAAI,GAAG,EAAE,OAAO,CAAC;AACxF,KAAG,MAAM,gBAAgB;AACzB,UAAQ,YAAY,EAAE;AACxB;",
   "names": []
 }

package/dist/axes/tickLabels.d.ts

@@ -15,6 +15,8 @@ export declare function thinGutterTicks<T extends {
 }>(ticks: T[], fontSize: number): T[];
 interface PlacedLabel {
     text: string;
+    /** The tick value the label names (lets a morph re-project it through another scale). */
+    value: CartesianModel['xTicks'][number]['value'];
     pos: number;
     left: number;
     transform: string;

package/dist/axes/tickLabels.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tickLabels.d.ts","sourceRoot":"","sources":["../../src/axes/tickLabels.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,WAAW,CAAC;AACvC,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAC;AAE3D,4EAA4E;AAC5E,wBAAgB,UAAU,CAAC,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,GAAG,OAAO,KAAK,CAAC,MAAM,CASxF;AAED;;;;;;;GAOG;AACH,wBAAgB,eAAe,CAAC,CAAC,SAAS;IAAE,GAAG,EAAE,MAAM,CAAA;CAAE,EAAE,KAAK,EAAE,CAAC,EAAE,EAAE,QAAQ,EAAE,MAAM,GAAG,CAAC,EAAE,CAY5F;AAED,UAAU,WAAW;IACnB,IAAI,EAAE,MAAM,CAAC;IACb,GAAG,EAAE,MAAM,CAAC;IACZ,IAAI,EAAE,MAAM,CAAC;IACb,SAAS,EAAE,MAAM,CAAC;CACnB;AAED;;;;;;GAMG;AACH,wBAAgB,YAAY,CAC1B,KAAK,EAAE,cAAc,CAAC,QAAQ,CAAC,EAC/B,OAAO,EAAE,MAAM,EACf,UAAU,EAAE,MAAM,EAClB,IAAI,EAAE,MAAM,GACX,WAAW,EAAE,CAwCf;AAED,wBAAgB,eAAe,CAAC,KAAK,EAAE,KAAK,GAAG;IAAE,OAAO,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAA;CAAE,CAShF;AAED,iFAAiF;AACjF,wBAAgB,mBAAmB,CAAC,KAAK,EAAE,cAAc,EAAE,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,GAAG,WAAW,EAAE,CAqCrG;AAED;uDACuD;AACvD,wBAAgB,cAAc,CAAC,KAAK,EAAE,cAAc,GAAG,WAAW,EAAE,CAQnE"}
+{"version":3,"file":"tickLabels.d.ts","sourceRoot":"","sources":["../../src/axes/tickLabels.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,WAAW,CAAC;AACvC,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAC;AAE3D,4EAA4E;AAC5E,wBAAgB,UAAU,CAAC,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,GAAG,OAAO,KAAK,CAAC,MAAM,CASxF;AAED;;;;;;;GAOG;AACH,wBAAgB,eAAe,CAAC,CAAC,SAAS;IAAE,GAAG,EAAE,MAAM,CAAA;CAAE,EAAE,KAAK,EAAE,CAAC,EAAE,EAAE,QAAQ,EAAE,MAAM,GAAG,CAAC,EAAE,CAY5F;AAED,UAAU,WAAW;IACnB,IAAI,EAAE,MAAM,CAAC;IACb,yFAAyF;IACzF,KAAK,EAAE,cAAc,CAAC,QAAQ,CAAC,CAAC,MAAM,CAAC,CAAC,OAAO,CAAC,CAAC;IACjD,GAAG,EAAE,MAAM,CAAC;IACZ,IAAI,EAAE,MAAM,CAAC;IACb,SAAS,EAAE,MAAM,CAAC;CACnB;AAED;;;;;;GAMG;AACH,wBAAgB,YAAY,CAC1B,KAAK,EAAE,cAAc,CAAC,QAAQ,CAAC,EAC/B,OAAO,EAAE,MAAM,EACf,UAAU,EAAE,MAAM,EAClB,IAAI,EAAE,MAAM,GACX,WAAW,EAAE,CAwCf;AAED,wBAAgB,eAAe,CAAC,KAAK,EAAE,KAAK,GAAG;IAAE,OAAO,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAA;CAAE,CAShF;AAED,iFAAiF;AACjF,wBAAgB,mBAAmB,CAAC,KAAK,EAAE,cAAc,EAAE,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,GAAG,WAAW,EAAE,CAqCrG;AAED;uDACuD;AACvD,wBAAgB,cAAc,CAAC,KAAK,EAAE,cAAc,GAAG,WAAW,EAAE,CAQnE"}

package/dist/axes/tickLabels.js

@@ -46,7 +46,7 @@ function placeXLabels(ticks, originX, frameWidth, font) {
       br = hiEdge;
       bl = br - w;
     }
-    return { text: t.label, pos: t.pos, left, transform, bl, br };
+    return { text: t.label, value: t.value, pos: t.pos, left, transform, bl, br };
   });
   if (boxes.length <= 1) return boxes;
   const n = boxes.length;
@@ -106,7 +106,7 @@ function placeRotatedXLabels(model, angle, font) {
       angle: geometry.angle
     };
     if (previous && labelsOverlap(previous, record, 2)) continue;
-    placed.push({ text: tick.label, pos: tick.pos, left: tick.pos + shift, transform });
+    placed.push({ text: tick.label, value: tick.value, pos: tick.pos, left: tick.pos + shift, transform });
     previous = record;
   }
   return placed;

package/dist/axes/tickLabels.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../src/axes/tickLabels.ts"],
-  "sourcesContent": ["import { fontString, measureText } from '../render/text';\nimport { fitLabel, labelBox, labelsOverlap, type LabelRecord } from '../render/labelLedger';\nimport type { Frame } from '../layout';\nimport type { CartesianModel } from '../runtime/cartesian';\n\n/** Thin out x tick labels that would overlap, keeping a readable subset. */\nexport function thinXTicks(model: CartesianModel, avgCharPx: number): typeof model.xTicks {\n  const ticks = model.xTicks;\n  if (ticks.length <= 1) return ticks;\n  const longest = ticks.reduce((m, t) => Math.max(m, t.label.length), 0);\n  const needed = longest * avgCharPx + 10;\n  const available = model.plot.width / ticks.length;\n  if (available >= needed) return ticks;\n  const stride = Math.ceil(needed / available);\n  return ticks.filter((_, i) => i % stride === 0);\n}\n\n/**\n * Thin gutter (left-axis) tick labels that would overlap vertically.\n *\n * Unlike the x axis \u00E2\u20AC\u201D where label widths vary and a measured sweep decides what\n * to drop \u00E2\u20AC\u201D gutter ticks are evenly spaced and all one line tall, so a stride\n * yields a readable, regularly-spaced subset. The final tick is re-added when\n * there is room, so the axis still shows the top of its range.\n */\nexport function thinGutterTicks<T extends { pos: number }>(ticks: T[], fontSize: number): T[] {\n  if (ticks.length <= 2) return ticks;\n  const minGap = fontSize * 1.35;\n  const span = Math.abs(ticks[ticks.length - 1].pos - ticks[0].pos);\n  const gap = span / (ticks.length - 1);\n  if (gap >= minGap) return ticks;\n  const stride = Math.ceil(minGap / Math.max(gap, 1e-6));\n  const kept = ticks.filter((_, i) => i % stride === 0);\n  const last = ticks[ticks.length - 1];\n  const tail = kept[kept.length - 1];\n  if (tail !== last && Math.abs(last.pos - tail.pos) >= minGap) kept.push(last);\n  return kept;\n}\n\ninterface PlacedLabel {\n  text: string;\n  pos: number;\n  left: number;\n  transform: string;\n}\n\n/**\n * Resolve thinned x ticks into non-overlapping label boxes. Each label is\n * centered on its tick, except the first/last which are clamped to the surface\n * edges. A left\u00E2\u2020\u2019right sweep then drops any label whose box would collide with\n * the previous kept label or with the final label, so the right-edge label is\n * always preserved without overlap (fixes \"Aug 2023Sep 2023\" style run-ons).\n */\nexport function placeXLabels(\n  ticks: CartesianModel['xTicks'],\n  originX: number,\n  frameWidth: number,\n  font: string,\n): PlacedLabel[] {\n  const edgePad = 2;\n  const minGap = 6;\n  const loEdge = originX + edgePad;\n  const hiEdge = originX + frameWidth - edgePad;\n  const boxes = ticks.map((t) => {\n    const w = measureText(t.label, font).width;\n    const half = w / 2;\n    let left = t.pos;\n    let transform = 'translateX(-50%)';\n    let bl = t.pos - half;\n    let br = t.pos + half;\n    if (bl < loEdge) {\n      left = loEdge;\n      transform = 'none';\n      bl = loEdge;\n      br = loEdge + w;\n    } else if (br > hiEdge) {\n      left = hiEdge;\n      transform = 'translateX(-100%)';\n      br = hiEdge;\n      bl = br - w;\n    }\n    return { text: t.label, pos: t.pos, left, transform, bl, br };\n  });\n  if (boxes.length <= 1) return boxes;\n\n  const n = boxes.length;\n  const last = boxes[n - 1];\n  const keep = new Array<boolean>(n).fill(false);\n  keep[n - 1] = true;\n  let prevBr = -Infinity;\n  for (let i = 0; i < n - 1; i += 1) {\n    const b = boxes[i];\n    if (b.bl < prevBr + minGap) continue; // overlaps the previous kept label\n    if (b.br + minGap > last.bl) break; // would overlap the final label\n    keep[i] = true;\n    prevBr = b.br;\n  }\n  return boxes.filter((_, i) => keep[i]);\n}\n\nexport function flatLabelBounds(frame: Frame): { originX: number; width: number } {\n  let left = frame.originX;\n  let right = frame.originX + frame.width;\n  if (frame.legendRect && frame.legendPosition === 'left') {\n    left = Math.max(left, frame.legendRect.x + frame.legendRect.width);\n  } else if (frame.legendRect && frame.legendPosition === 'right') {\n    right = Math.min(right, frame.legendRect.x);\n  }\n  return { originX: left, width: Math.max(0, right - left) };\n}\n\n/** Rotation still needs a readable perpendicular gap and finite edge budgets. */\nexport function placeRotatedXLabels(model: CartesianModel, angle: number, font: string): PlacedLabel[] {\n  const size = model.tokens.font.size.small;\n  const radians = (angle * Math.PI) / 180;\n  let widest = 0;\n  for (const tick of model.xTicks) {\n    const text = fitLabel(tick.label, model.frame.xLabelMaxWidth, font).text;\n    widest = Math.max(widest, measureText(text, font).width);\n  }\n  const spacing = Math.min(size / Math.sin(radians), (widest + 6) / (Math.cos(radians) * 1.35));\n  const ticks = thinGutterTicks(model.xTicks, spacing);\n  const lo = model.frame.originX + 1;\n  const hi = model.frame.originX + model.frame.width - 1;\n  const transform = `translateX(-100%) rotate(-${angle}deg)`;\n  const placed: PlacedLabel[] = [];\n  let previous: LabelRecord | undefined;\n  for (const tick of ticks) {\n    const fitted = fitLabel(tick.label, model.frame.xLabelMaxWidth, font);\n    const geometry = labelBox(\n      { left: tick.pos, top: 0, text: fitted.text, color: '', size, transform },\n      font,\n    );\n    const { box } = geometry;\n    const shift = box.x < lo ? lo - box.x : Math.min(0, hi - box.x - box.width);\n    const record: LabelRecord = {\n      role: 'axis-label',\n      text: fitted.text,\n      fullText: tick.label,\n      truncated: fitted.truncated,\n      size,\n      box: { ...box, x: box.x + shift },\n      angle: geometry.angle,\n    };\n    if (previous && labelsOverlap(previous, record, 2)) continue;\n    placed.push({ text: tick.label, pos: tick.pos, left: tick.pos + shift, transform });\n    previous = record;\n  }\n  return placed;\n}\n\n/** Compute readable placed x labels for a model. Shared by the gridline/tick underlay and\n * the label overlay so they stay perfectly aligned. */\nexport function resolveXLabels(model: CartesianModel): PlacedLabel[] {\n  const f = model.tokens.font;\n  const angle = model.frame.xLabelAngle;\n  const smallFont = fontString(f.size.small, f.family, f.weight.normal);\n  if (angle > 0) return placeRotatedXLabels(model, angle, smallFont);\n  const thinned = thinXTicks(model, f.size.small * 0.58);\n  const bounds = flatLabelBounds(model.frame);\n  return placeXLabels(thinned, bounds.originX, bounds.width, smallFont);\n}\n\n"],
-  "mappings": "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",
+  "sourcesContent": ["import { fontString, measureText } from '../render/text';\nimport { fitLabel, labelBox, labelsOverlap, type LabelRecord } from '../render/labelLedger';\nimport type { Frame } from '../layout';\nimport type { CartesianModel } from '../runtime/cartesian';\n\n/** Thin out x tick labels that would overlap, keeping a readable subset. */\nexport function thinXTicks(model: CartesianModel, avgCharPx: number): typeof model.xTicks {\n  const ticks = model.xTicks;\n  if (ticks.length <= 1) return ticks;\n  const longest = ticks.reduce((m, t) => Math.max(m, t.label.length), 0);\n  const needed = longest * avgCharPx + 10;\n  const available = model.plot.width / ticks.length;\n  if (available >= needed) return ticks;\n  const stride = Math.ceil(needed / available);\n  return ticks.filter((_, i) => i % stride === 0);\n}\n\n/**\n * Thin gutter (left-axis) tick labels that would overlap vertically.\n *\n * Unlike the x axis \u00E2\u20AC\u201D where label widths vary and a measured sweep decides what\n * to drop \u00E2\u20AC\u201D gutter ticks are evenly spaced and all one line tall, so a stride\n * yields a readable, regularly-spaced subset. The final tick is re-added when\n * there is room, so the axis still shows the top of its range.\n */\nexport function thinGutterTicks<T extends { pos: number }>(ticks: T[], fontSize: number): T[] {\n  if (ticks.length <= 2) return ticks;\n  const minGap = fontSize * 1.35;\n  const span = Math.abs(ticks[ticks.length - 1].pos - ticks[0].pos);\n  const gap = span / (ticks.length - 1);\n  if (gap >= minGap) return ticks;\n  const stride = Math.ceil(minGap / Math.max(gap, 1e-6));\n  const kept = ticks.filter((_, i) => i % stride === 0);\n  const last = ticks[ticks.length - 1];\n  const tail = kept[kept.length - 1];\n  if (tail !== last && Math.abs(last.pos - tail.pos) >= minGap) kept.push(last);\n  return kept;\n}\n\ninterface PlacedLabel {\n  text: string;\n  /** The tick value the label names (lets a morph re-project it through another scale). */\n  value: CartesianModel['xTicks'][number]['value'];\n  pos: number;\n  left: number;\n  transform: string;\n}\n\n/**\n * Resolve thinned x ticks into non-overlapping label boxes. Each label is\n * centered on its tick, except the first/last which are clamped to the surface\n * edges. A left\u00E2\u2020\u2019right sweep then drops any label whose box would collide with\n * the previous kept label or with the final label, so the right-edge label is\n * always preserved without overlap (fixes \"Aug 2023Sep 2023\" style run-ons).\n */\nexport function placeXLabels(\n  ticks: CartesianModel['xTicks'],\n  originX: number,\n  frameWidth: number,\n  font: string,\n): PlacedLabel[] {\n  const edgePad = 2;\n  const minGap = 6;\n  const loEdge = originX + edgePad;\n  const hiEdge = originX + frameWidth - edgePad;\n  const boxes = ticks.map((t) => {\n    const w = measureText(t.label, font).width;\n    const half = w / 2;\n    let left = t.pos;\n    let transform = 'translateX(-50%)';\n    let bl = t.pos - half;\n    let br = t.pos + half;\n    if (bl < loEdge) {\n      left = loEdge;\n      transform = 'none';\n      bl = loEdge;\n      br = loEdge + w;\n    } else if (br > hiEdge) {\n      left = hiEdge;\n      transform = 'translateX(-100%)';\n      br = hiEdge;\n      bl = br - w;\n    }\n    return { text: t.label, value: t.value, pos: t.pos, left, transform, bl, br };\n  });\n  if (boxes.length <= 1) return boxes;\n\n  const n = boxes.length;\n  const last = boxes[n - 1];\n  const keep = new Array<boolean>(n).fill(false);\n  keep[n - 1] = true;\n  let prevBr = -Infinity;\n  for (let i = 0; i < n - 1; i += 1) {\n    const b = boxes[i];\n    if (b.bl < prevBr + minGap) continue; // overlaps the previous kept label\n    if (b.br + minGap > last.bl) break; // would overlap the final label\n    keep[i] = true;\n    prevBr = b.br;\n  }\n  return boxes.filter((_, i) => keep[i]);\n}\n\nexport function flatLabelBounds(frame: Frame): { originX: number; width: number } {\n  let left = frame.originX;\n  let right = frame.originX + frame.width;\n  if (frame.legendRect && frame.legendPosition === 'left') {\n    left = Math.max(left, frame.legendRect.x + frame.legendRect.width);\n  } else if (frame.legendRect && frame.legendPosition === 'right') {\n    right = Math.min(right, frame.legendRect.x);\n  }\n  return { originX: left, width: Math.max(0, right - left) };\n}\n\n/** Rotation still needs a readable perpendicular gap and finite edge budgets. */\nexport function placeRotatedXLabels(model: CartesianModel, angle: number, font: string): PlacedLabel[] {\n  const size = model.tokens.font.size.small;\n  const radians = (angle * Math.PI) / 180;\n  let widest = 0;\n  for (const tick of model.xTicks) {\n    const text = fitLabel(tick.label, model.frame.xLabelMaxWidth, font).text;\n    widest = Math.max(widest, measureText(text, font).width);\n  }\n  const spacing = Math.min(size / Math.sin(radians), (widest + 6) / (Math.cos(radians) * 1.35));\n  const ticks = thinGutterTicks(model.xTicks, spacing);\n  const lo = model.frame.originX + 1;\n  const hi = model.frame.originX + model.frame.width - 1;\n  const transform = `translateX(-100%) rotate(-${angle}deg)`;\n  const placed: PlacedLabel[] = [];\n  let previous: LabelRecord | undefined;\n  for (const tick of ticks) {\n    const fitted = fitLabel(tick.label, model.frame.xLabelMaxWidth, font);\n    const geometry = labelBox(\n      { left: tick.pos, top: 0, text: fitted.text, color: '', size, transform },\n      font,\n    );\n    const { box } = geometry;\n    const shift = box.x < lo ? lo - box.x : Math.min(0, hi - box.x - box.width);\n    const record: LabelRecord = {\n      role: 'axis-label',\n      text: fitted.text,\n      fullText: tick.label,\n      truncated: fitted.truncated,\n      size,\n      box: { ...box, x: box.x + shift },\n      angle: geometry.angle,\n    };\n    if (previous && labelsOverlap(previous, record, 2)) continue;\n    placed.push({ text: tick.label, value: tick.value, pos: tick.pos, left: tick.pos + shift, transform });\n    previous = record;\n  }\n  return placed;\n}\n\n/** Compute readable placed x labels for a model. Shared by the gridline/tick underlay and\n * the label overlay so they stay perfectly aligned. */\nexport function resolveXLabels(model: CartesianModel): PlacedLabel[] {\n  const f = model.tokens.font;\n  const angle = model.frame.xLabelAngle;\n  const smallFont = fontString(f.size.small, f.family, f.weight.normal);\n  if (angle > 0) return placeRotatedXLabels(model, angle, smallFont);\n  const thinned = thinXTicks(model, f.size.small * 0.58);\n  const bounds = flatLabelBounds(model.frame);\n  return placeXLabels(thinned, bounds.originX, bounds.width, smallFont);\n}\n\n"],
+  "mappings": "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",
   "names": []
 }

package/dist/charts/annotations.d.ts

@@ -9,14 +9,20 @@
  */
 import type { Surface } from '../render/surface.js';
 import type { CartesianModel } from '../runtime/cartesian.js';
+/** Stash name of the annotation labels (an entrance fades them in place; see chromeMotion's fadeChrome). */
+export declare const ANNOTATION_LABELS = "annotations:labels";
 /**
  * Paint reference lines and band/zone fills on the marks canvas, clipped to the
- * plot. Call after the chart's data marks so reference lines sit on top.
+ * plot. Call after the chart's data marks so reference lines sit on top. While a
+ * morph is drawing they move with the axes (see axes/morph.ts); during an
+ * entrance rules draw across, bands open out from their middle, and points pop
+ * in once the marks have mostly arrived.
  */
 export declare function drawAnnotations(surface: Surface, model: CartesianModel): void;
 /**
  * Append annotation labels to the HTML overlay. Call after `drawOverlay` so the
- * labels layer on top of axis text. No-op when there are no labeled annotations.
+ * labels layer on top of axis text. Returns the label elements (none when
+ * headless) so an entrance can hold them back until their marks have drawn in.
  */
-export declare function drawAnnotationLabels(surface: Surface, model: CartesianModel): void;
+export declare function drawAnnotationLabels(surface: Surface, model: CartesianModel): HTMLElement[];
 //# sourceMappingURL=annotations.d.ts.map

package/dist/charts/annotations.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"annotations.d.ts","sourceRoot":"","sources":["../../src/charts/annotations.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAEH,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAC;AAEjD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAC;AAgE3D;;;GAGG;AACH,wBAAgB,eAAe,CAAC,OAAO,EAAE,OAAO,EAAE,KAAK,EAAE,cAAc,GAAG,IAAI,CAkG7E;AAyCD;;;GAGG;AACH,wBAAgB,oBAAoB,CAAC,OAAO,EAAE,OAAO,EAAE,KAAK,EAAE,cAAc,GAAG,IAAI,CA4ElF"}
+{"version":3,"file":"annotations.d.ts","sourceRoot":"","sources":["../../src/charts/annotations.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAEH,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,mBAAmB,CAAC;AAEjD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAC;AAe3D,4GAA4G;AAC5G,eAAO,MAAM,iBAAiB,uBAA0B,CAAC;AAqGzD;;;;;;GAMG;AACH,wBAAgB,eAAe,CAAC,OAAO,EAAE,OAAO,EAAE,KAAK,EAAE,cAAc,GAAG,IAAI,CAmH7E;AAyCD;;;;GAIG;AACH,wBAAgB,oBAAoB,CAAC,OAAO,EAAE,OAAO,EAAE,KAAK,EAAE,cAAc,GAAG,WAAW,EAAE,CAqF3F"}