@primeui/chart-core 0.0.1-alpha.1

package/dist/chunk-TQ6S34QZ.mjs

@@ -0,0 +1,152 @@
+import { getHeatmapLabelInfo, resolveLabelMidToAlpha } from './chunk-3Z62EUJN.mjs';
+import { createDrawImage } from './chunk-7CMVDIOU.mjs';
+import { resolveFontFamily, DEFAULT_HOVER_DIM_OPACITY, DEFAULT_HOVER_BRIGHTNESS } from './chunk-NKUYIWAP.mjs';
+import { getContrastColor } from './chunk-QS76E3TD.mjs';
+import { resolveAccessor, makeItemContext, resolveDash } from './chunk-O2X6FF45.mjs';
+import { withCanvasState, adjustBrightness } from './chunk-SSLTFJ3U.mjs';
+
+// src/series/heatmap/canvas/index.ts
+function makeCellExtras(props, cell) {
+  return { value: cell.value, category: cell.xLabel, seriesIndex: props.order ?? 0, seriesId: props.id ?? "" };
+}
+function renderHeatmapCanvas(props, layout, ctx, context) {
+  const { cells } = layout;
+  const fontFamily = resolveFontFamily(void 0, context.font);
+  const borderRadius = props.borderRadius ?? 0;
+  const borderJoinStyle = props.borderJoinStyle;
+  const borderAlign = props.borderAlign ?? "center";
+  const hoveredIndex = props.interaction?.hoveredIndex ?? null;
+  const dimOpacity = props.effects?.dimOpacity ?? context.theme.dimOpacity ?? DEFAULT_HOVER_DIM_OPACITY;
+  const hoverBrightness = props.effects?.hoverBrightness ?? context.theme.hoverBrightness ?? DEFAULT_HOVER_BRIGHTNESS;
+  const hoverEnabled = props.effects !== void 0;
+  const anyHover = hoverEnabled && hoveredIndex !== null;
+  const showLabels = props.showLabels === true;
+  const dataArr = props.data;
+  const labelMidToAlpha = /* @__PURE__ */ new Map();
+  const resolveLabelColor = (cell) => {
+    const v = resolveAccessor(props.labelColor, makeItemContext(dataArr?.[cell.index], cell.index, makeCellExtras(props, cell)));
+    return typeof v === "string" ? v : void 0;
+  };
+  const resolveCellBorderDash = (cell) => resolveDash(props.borderDash, makeItemContext(dataArr?.[cell.index], cell.index, makeCellExtras(props, cell)));
+  const resolveCellBorderDashOffset = (cell) => resolveAccessor(props.borderDashOffset, makeItemContext(dataArr?.[cell.index], cell.index, makeCellExtras(props, cell)), { arrayMode: "clip" });
+  const resolveCellOpacity = (cell) => resolveAccessor(props.opacity, makeItemContext(dataArr?.[cell.index], cell.index, makeCellExtras(props, cell)), { arrayMode: "clip" });
+  const resolveCellBorderColor = (cell) => resolveAccessor(props.borderColor, makeItemContext(dataArr?.[cell.index], cell.index, makeCellExtras(props, cell)));
+  const resolveCellBorderWidth = (cell) => resolveAccessor(props.borderStrokeWidth, makeItemContext(dataArr?.[cell.index], cell.index, makeCellExtras(props, cell)), { arrayMode: "clip" });
+  const resolveCellHoverColor = (cell) => resolveAccessor(props.hoverColor, makeItemContext(dataArr?.[cell.index], cell.index, makeCellExtras(props, cell)), { arrayMode: "cycle" });
+  const resolveCellHoverBorderColor = (cell) => resolveAccessor(props.hoverBorderColor, makeItemContext(dataArr?.[cell.index], cell.index, makeCellExtras(props, cell)), { arrayMode: "cycle" });
+  withCanvasState(ctx, () => {
+    if (borderJoinStyle) ctx.lineJoin = borderJoinStyle;
+    let curFill = "";
+    let curAlpha = -1;
+    for (const cell of cells) {
+      if (cell.width <= 0 || cell.height <= 0) continue;
+      const isHovered = hoverEnabled && cell.index === hoveredIndex;
+      const hoverOpacity = anyHover && !isHovered ? dimOpacity : 1;
+      const userCellOpacity = resolveCellOpacity(cell);
+      const cellOpacity = (cell.opacity ?? 1) * hoverOpacity * (userCellOpacity ?? 1);
+      const hoverFill = isHovered ? resolveCellHoverColor(cell) : void 0;
+      const hoverBorder = isHovered ? resolveCellHoverBorderColor(cell) : void 0;
+      const cellBorderColor = hoverBorder ?? resolveCellBorderColor(cell);
+      const cellBorderColorStr = typeof cellBorderColor === "string" ? cellBorderColor : cellBorderColor !== void 0 ? String(cellBorderColor) : void 0;
+      const cellBorderWidth = resolveCellBorderWidth(cell);
+      const effectiveBW = cellBorderColorStr ? cellBorderWidth ?? 1 : cell.isEmpty ? 0.5 : 0;
+      const inset = cellBorderColorStr && borderAlign === "inner" && effectiveBW > 0 ? effectiveBW / 2 : 0;
+      const cellBorderDash = resolveCellBorderDash(cell);
+      const cellBorderDashOffset = resolveCellBorderDashOffset(cell);
+      const baseFill = isHovered && hoverBrightness ? adjustBrightness(cell.color, hoverBrightness) : cell.color;
+      const fillStr = hoverFill !== void 0 ? typeof hoverFill === "string" ? hoverFill : String(hoverFill) : baseFill;
+      const centreX = Math.round(cell.x + cell.width / 2);
+      const centreY = Math.round(cell.y + cell.height / 2);
+      const halfW = Math.round(cell.width / 2 - inset);
+      const halfH = Math.round(cell.height / 2 - inset);
+      const left = centreX - halfW;
+      const top = centreY - halfH;
+      const cw = Math.max(0, halfW * 2);
+      const ch = Math.max(0, halfH * 2);
+      if (curAlpha !== cellOpacity) {
+        ctx.globalAlpha = cellOpacity;
+        curAlpha = cellOpacity;
+      }
+      if (curFill !== fillStr) {
+        ctx.fillStyle = fillStr;
+        curFill = fillStr;
+      }
+      const drawsBorder = !!cellBorderColorStr || cell.isEmpty;
+      if (borderRadius > 0) {
+        const r = Math.min(borderRadius, cw / 2, ch / 2);
+        ctx.beginPath();
+        ctx.roundRect(left, top, cw, ch, r);
+        ctx.fill();
+      } else {
+        ctx.fillRect(left, top, cw, ch);
+      }
+      if (drawsBorder) {
+        ctx.strokeStyle = cellBorderColorStr ?? context.theme.heatEmpty;
+        ctx.lineWidth = effectiveBW;
+        ctx.setLineDash(cellBorderDash && cellBorderDash.length > 0 ? cellBorderDash : cell.isEmpty ? [2, 2] : []);
+        ctx.lineDashOffset = cellBorderDashOffset ?? 0;
+        if (borderRadius > 0) {
+          ctx.stroke();
+        } else {
+          ctx.strokeRect(left, top, cw, ch);
+        }
+      }
+      if (showLabels && !cell.isEmpty) {
+        const info = getHeatmapLabelInfo(cell);
+        if (info.show) {
+          const cx = Math.round(cell.x + cell.width / 2);
+          const cy = cell.y + cell.height / 2;
+          const textColor = resolveLabelColor(cell) ?? getContrastColor(cell.color);
+          const midToAlpha = resolveLabelMidToAlpha(labelMidToAlpha, info.fontSize, fontFamily);
+          const finalY = Math.round(cy + midToAlpha);
+          ctx.globalAlpha = 1;
+          ctx.fillStyle = textColor;
+          ctx.font = `600 ${info.fontSize}px ${fontFamily}`;
+          ctx.textAlign = "center";
+          ctx.textBaseline = "alphabetic";
+          ctx.fillText(cell.label, cx, finalY);
+          curAlpha = 1;
+          curFill = textColor;
+        }
+      }
+    }
+  });
+}
+function renderCanvasHeatmapContent(ctx, layouts, getProps, onImageLoad) {
+  const drawImage = createDrawImage(ctx, onImageLoad ?? (() => {
+  }));
+  for (const [dsId, hmLayout] of layouts) {
+    const dsProps = getProps(dsId);
+    const renderFn = dsProps?.renderContent;
+    if (!renderFn || !dsProps?.data) continue;
+    for (const cell of hmLayout.cells) {
+      if (cell.isEmpty) continue;
+      const dataItem = dsProps.data[cell.index];
+      if (!dataItem) continue;
+      ctx.save();
+      ctx.beginPath();
+      ctx.rect(cell.x, cell.y, cell.width, cell.height);
+      ctx.clip();
+      renderFn({
+        data: dataItem,
+        index: cell.index,
+        value: cell.value,
+        xLabel: cell.xLabel,
+        yLabel: cell.yLabel,
+        color: cell.color,
+        x: cell.x,
+        y: cell.y,
+        width: cell.width,
+        height: cell.height,
+        row: cell.row,
+        col: cell.col,
+        isEmpty: cell.isEmpty,
+        ctx,
+        drawImage
+      });
+      ctx.restore();
+    }
+  }
+}
+
+export { renderCanvasHeatmapContent, renderHeatmapCanvas };

package/dist/chunk-UPRXABX5.mjs

@@ -0,0 +1,90 @@
+import { BASELINE_TO_CANVAS } from './chunk-66T4MRC5.mjs';
+import { formatDataLabelText } from './chunk-OXTFAWSK.mjs';
+import { svgAnchorToCanvasAlign } from './chunk-XTVE4P3L.mjs';
+import { DEFAULT_LABEL_SPACING } from './chunk-NKUYIWAP.mjs';
+import { makeItemContext, resolveAccessor } from './chunk-O2X6FF45.mjs';
+import { toRad } from './chunk-RQ3CKQOX.mjs';
+
+// src/radial/label.ts
+function resolvePolarLabels(bars, datasetTotal, center, config, data) {
+  const labels = [];
+  const offset = DEFAULT_LABEL_SPACING;
+  for (const bar of bars) {
+    if (bar.outerRadius <= bar.innerRadius) continue;
+    const percentage = datasetTotal > 0 ? Math.abs(bar.value) / datasetTotal * 100 : 0;
+    if (config.minPercentage > 0 && percentage < config.minPercentage) continue;
+    const text = formatDataLabelText(bar.value, percentage, config.display, config.formatter);
+    if (!text) continue;
+    const midAngleDeg = (bar.startAngle + bar.endAngle) / 2;
+    const midAngleRad = toRad(midAngleDeg);
+    const labelRadius = bar.outerRadius + offset;
+    const x = center.x + Math.cos(midAngleRad) * labelRadius;
+    const y = center.y + Math.sin(midAngleRad) * labelRadius;
+    const cosA = Math.cos(midAngleRad);
+    const textAnchor = cosA > 0.15 ? "start" : cosA < -0.15 ? "end" : "middle";
+    const labelCtx = makeItemContext(data?.[bar.dataIndex], bar.dataIndex);
+    const perLabelFontSize = config.fontSizeAccessor ? resolveAccessor(config.fontSizeAccessor, labelCtx, { arrayMode: "cycle" }) : void 0;
+    const perLabelColorRaw = config.colorAccessor ? resolveAccessor(config.colorAccessor, labelCtx, { arrayMode: "cycle" }) : void 0;
+    const perLabelColor = typeof perLabelColorRaw === "string" ? perLabelColorRaw : void 0;
+    labels.push({
+      dataIndex: bar.dataIndex,
+      value: bar.value,
+      percentage,
+      text,
+      category: bar.category,
+      color: config.color ?? "",
+      x,
+      y,
+      textAnchor,
+      baseline: "central",
+      canvasTextAlign: svgAnchorToCanvasAlign(textAnchor),
+      canvasTextBaseline: BASELINE_TO_CANVAS["central"] ?? "middle",
+      fontSize: perLabelFontSize,
+      textColor: perLabelColor
+    });
+  }
+  return labels;
+}
+function resolveRadarLabels(points, categories, seriesColor, datasetTotal, center, config, data) {
+  const labels = [];
+  const offset = DEFAULT_LABEL_SPACING;
+  for (const pt of points) {
+    if (pt.value == null || !isFinite(pt.x) || !isFinite(pt.y)) continue;
+    const percentage = datasetTotal > 0 ? Math.abs(pt.value) / datasetTotal * 100 : 0;
+    if (config.minPercentage > 0 && percentage < config.minPercentage) continue;
+    const text = formatDataLabelText(pt.value, percentage, config.display, config.formatter);
+    if (!text) continue;
+    const dx = pt.x - center.x;
+    const dy = pt.y - center.y;
+    const dist = Math.sqrt(dx * dx + dy * dy);
+    const nx = dist > 0 ? dx / dist : 0;
+    const ny = dist > 0 ? dy / dist : -1;
+    const x = pt.x + nx * offset;
+    const y = pt.y + ny * offset;
+    const textAnchor = nx > 0.15 ? "start" : nx < -0.15 ? "end" : "middle";
+    const baseline = ny > 0.15 ? "hanging" : ny < -0.15 ? "auto" : "central";
+    const labelCtx = makeItemContext(data?.[pt.categoryIndex], pt.categoryIndex);
+    const perLabelFontSize = config.fontSizeAccessor ? resolveAccessor(config.fontSizeAccessor, labelCtx, { arrayMode: "cycle" }) : void 0;
+    const perLabelColorRaw = config.colorAccessor ? resolveAccessor(config.colorAccessor, labelCtx, { arrayMode: "cycle" }) : void 0;
+    const perLabelColor = typeof perLabelColorRaw === "string" ? perLabelColorRaw : void 0;
+    labels.push({
+      dataIndex: pt.categoryIndex,
+      value: pt.value,
+      percentage,
+      text,
+      category: categories[pt.categoryIndex] ?? "",
+      color: seriesColor,
+      x,
+      y,
+      textAnchor,
+      baseline,
+      canvasTextAlign: svgAnchorToCanvasAlign(textAnchor),
+      canvasTextBaseline: BASELINE_TO_CANVAS[baseline] ?? "middle",
+      fontSize: perLabelFontSize,
+      textColor: perLabelColor
+    });
+  }
+  return labels;
+}
+
+export { resolvePolarLabels, resolveRadarLabels };

package/dist/chunk-VGLSBZDN.mjs

@@ -0,0 +1,71 @@
+import { clamp } from './chunk-RQ3CKQOX.mjs';
+
+// src/utils/layout/borderRadius.utils.ts
+function resolveBorderRadius(borderRadius) {
+  if (borderRadius === void 0 || borderRadius === 0) {
+    return { topLeft: 0, topRight: 0, bottomLeft: 0, bottomRight: 0 };
+  }
+  if (typeof borderRadius === "number") {
+    return {
+      topLeft: borderRadius,
+      topRight: borderRadius,
+      bottomLeft: borderRadius,
+      bottomRight: borderRadius
+    };
+  }
+  const config = borderRadius;
+  return {
+    topLeft: config.topLeft ?? 0,
+    topRight: config.topRight ?? 0,
+    bottomLeft: config.bottomLeft ?? 0,
+    bottomRight: config.bottomRight ?? 0
+  };
+}
+function hasBorderRadius(radius) {
+  return radius.topLeft > 0 || radius.topRight > 0 || radius.bottomLeft > 0 || radius.bottomRight > 0;
+}
+function isUniformBorderRadius(radius) {
+  return radius.topLeft === radius.topRight && radius.topRight === radius.bottomLeft && radius.bottomLeft === radius.bottomRight;
+}
+function clampRectBorderRadius(radius, width, height) {
+  const maxHorizontal = width / 2;
+  const maxVertical = height / 2;
+  return {
+    topLeft: Math.min(radius.topLeft, maxHorizontal, maxVertical),
+    topRight: Math.min(radius.topRight, maxHorizontal, maxVertical),
+    bottomLeft: Math.min(radius.bottomLeft, maxHorizontal, maxVertical),
+    bottomRight: Math.min(radius.bottomRight, maxHorizontal, maxVertical)
+  };
+}
+function resolveArcBorderRadius(borderRadius) {
+  const resolved = resolveBorderRadius(borderRadius);
+  return {
+    outerStart: resolved.topLeft,
+    outerEnd: resolved.topRight,
+    innerStart: resolved.bottomLeft,
+    innerEnd: resolved.bottomRight
+  };
+}
+function hasArcBorderRadius(radius) {
+  return radius.outerStart > 0 || radius.outerEnd > 0 || radius.innerStart > 0 || radius.innerEnd > 0;
+}
+function clampArcBorderRadius(borderRadius, innerRadius, outerRadius, angleDelta) {
+  const resolved = resolveArcBorderRadius(borderRadius);
+  if (outerRadius <= innerRadius || angleDelta <= 0) {
+    return { outerStart: 0, outerEnd: 0, innerStart: 0, innerEnd: 0 };
+  }
+  const halfThickness = (outerRadius - innerRadius) / 2;
+  const innerLimit = Math.min(halfThickness, angleDelta * innerRadius / 2);
+  const computeOuterLimit = (val) => {
+    const outerArcLimit = (outerRadius - Math.min(halfThickness, val)) * angleDelta / 2;
+    return clamp(val, 0, Math.min(halfThickness, outerArcLimit));
+  };
+  return {
+    outerStart: computeOuterLimit(resolved.outerStart),
+    outerEnd: computeOuterLimit(resolved.outerEnd),
+    innerStart: clamp(resolved.innerStart, 0, innerLimit),
+    innerEnd: clamp(resolved.innerEnd, 0, innerLimit)
+  };
+}
+
+export { clampArcBorderRadius, clampRectBorderRadius, hasArcBorderRadius, hasBorderRadius, isUniformBorderRadius, resolveArcBorderRadius, resolveBorderRadius };

package/dist/chunk-VN7CKCSE.mjs

@@ -0,0 +1,364 @@
+import { lerpColor } from './chunk-QS76E3TD.mjs';
+
+// src/animations/animated-element.ts
+function lerpNumber(from, to, t) {
+  return from + (to - from) * t;
+}
+var AnimatedElement = class {
+  constructor(id, initial, registry) {
+    this.phase = "idle";
+    this.tweens = /* @__PURE__ */ new Map();
+    this.overrides = /* @__PURE__ */ new Set();
+    /** Most recent PerGroupOptions — retained so releaseOverride can restart tweens. */
+    this._lastOpts = null;
+    /** Set to true when exit() completes, signalling scene to remove this element. */
+    this._readyForRemoval = false;
+    this.id = id;
+    this.current = { ...initial };
+    this.target = { ...initial };
+    this.registry = registry;
+  }
+  /**
+   * Target-write path. For each changed field in newTarget:
+   *   - if overridden: target is updated but no tween starts
+   *   - otherwise: tween captures current[field] as start, animates over the group's duration
+   */
+  setTarget(newTarget, opts) {
+    this._lastOpts = opts;
+    for (const key of Object.keys(newTarget)) {
+      const newValue = newTarget[key];
+      const hadTween = this.tweens.has(key);
+      this.target[key] = newValue;
+      if (this.overrides.has(key)) {
+        continue;
+      }
+      const currentValue = this.current[key];
+      if (Object.is(currentValue, newValue)) {
+        continue;
+      }
+      const groupOpts = this._groupOptsFor(key, opts);
+      if (!groupOpts || groupOpts.duration <= 0) {
+        if (hadTween && this.phase === "enter") continue;
+        this.current[key] = newValue;
+        this.tweens.delete(key);
+        continue;
+      }
+      const startValue = this.current[key];
+      const customFn = this.registry.custom?.[key];
+      const isColor = this.registry.color.includes(key);
+      const interpolator = customFn ?? (isColor ? lerpColor : lerpNumber);
+      this.tweens.set(key, {
+        start: startValue,
+        startTime: -1,
+        // set on first tick
+        duration: groupOpts.duration,
+        easing: groupOpts.easing,
+        interpolator
+      });
+    }
+    if (this.tweens.size > 0 && this.phase === "idle") {
+      this.phase = "update";
+    } else if (this.tweens.size === 0 && this.phase !== "idle") {
+      if (this.phase === "exit") this._readyForRemoval = true;
+      this.phase = "idle";
+    }
+  }
+  /** Direct-write path for explicit looping animations. */
+  overrideCurrent(prop, value) {
+    this.current[prop] = value;
+    this.overrides.add(prop);
+    this.tweens.delete(prop);
+  }
+  /** Release the override; tween (if any) resumes toward latest target. */
+  releaseOverride(prop) {
+    if (!this.overrides.has(prop)) return;
+    this.overrides.delete(prop);
+    if (this._lastOpts) {
+      const groupOpts = this._groupOptsFor(prop, this._lastOpts);
+      if (groupOpts && groupOpts.duration > 0) {
+        const startValue = this.current[prop];
+        const customFn = this.registry.custom?.[prop];
+        const isColor = this.registry.color.includes(prop);
+        const interpolator = customFn ?? (isColor ? lerpColor : lerpNumber);
+        this.tweens.set(prop, {
+          start: startValue,
+          startTime: -1,
+          duration: groupOpts.duration,
+          easing: groupOpts.easing,
+          interpolator
+        });
+        if (this.phase === "idle") {
+          this.phase = "update";
+        }
+      }
+    }
+  }
+  /** Enter animation: emptyState → target. */
+  enter(target, emptyState, opts) {
+    this.current = { ...emptyState };
+    this.target = { ...emptyState };
+    this.phase = "enter";
+    this.setTarget(target, opts);
+    if (this.tweens.size === 0) {
+      this.current = { ...target };
+      this.phase = "idle";
+    }
+  }
+  /** Exit animation: current → emptyState. After tick completes, marks ready for removal. */
+  exit(emptyState, opts) {
+    this.phase = "exit";
+    this.setTarget(emptyState, opts);
+    if (this.tweens.size === 0) {
+      this.current = { ...emptyState };
+      this._readyForRemoval = true;
+      this.phase = "idle";
+    }
+  }
+  /** Advance one frame. Returns true if any property is still tweening. */
+  tick(now) {
+    if (this.tweens.size === 0) {
+      return false;
+    }
+    const completed = [];
+    for (const [key, tween] of this.tweens) {
+      if (this.overrides.has(key)) {
+        completed.push(key);
+        continue;
+      }
+      if (tween.startTime === -1) {
+        tween.startTime = now;
+      }
+      const elapsed = now - tween.startTime;
+      const rawProgress = Math.max(0, Math.min(1, elapsed / tween.duration));
+      const easedProgress = tween.easing(rawProgress);
+      const targetValue = this.target[key];
+      const interpolated = tween.interpolator(tween.start, targetValue, easedProgress);
+      this.current[key] = interpolated;
+      if (rawProgress >= 1) {
+        completed.push(key);
+      }
+    }
+    for (const key of completed) {
+      this.tweens.delete(key);
+    }
+    if (this.tweens.size === 0) {
+      if (this.phase === "exit") {
+        this._readyForRemoval = true;
+      }
+      this.phase = "idle";
+      return false;
+    }
+    return true;
+  }
+  /** True if exit() has completed and this element should be removed from the scene. */
+  isReadyForRemoval() {
+    return this._readyForRemoval;
+  }
+  /**
+   * Cancel an in-progress exit. Called by AnimatedScene when an exit-phase element
+   * reappears in targets (e.g. quick legend toggle off → on).
+   */
+  resurrect() {
+    this._readyForRemoval = false;
+    if (this.phase === "exit") {
+      this.phase = "update";
+    }
+  }
+  _groupOptsFor(key, opts) {
+    const hasCustom = this.registry.custom?.[key] != null;
+    if (hasCustom) {
+      return opts.numbers ?? null;
+    }
+    const isColor = this.registry.color.includes(key);
+    if (isColor) {
+      return opts.colors ?? null;
+    }
+    const isNumber = this.registry.number.includes(key);
+    if (isNumber) {
+      return opts.numbers ?? null;
+    }
+    return null;
+  }
+};
+
+// src/animations/animated-scene.ts
+var NO_OPTS = { easing: (t) => t };
+var AnimatedScene = class {
+  constructor(opts) {
+    this.elements = /* @__PURE__ */ new Map();
+    this.activeElements = /* @__PURE__ */ new Set();
+    this.emptyState = opts.emptyState;
+    this.exitEmptyState = opts.exitEmptyState ?? opts.emptyState;
+    this.registry = opts.registry;
+    const respectReducedMotion = opts.respectReducedMotion ?? true;
+    this.reducedMotion = respectReducedMotion && typeof window !== "undefined" && typeof window.matchMedia === "function" && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+  }
+  /**
+   * D3-style data join. For each id in `targets`:
+   *   - not in scene → create element, enter from emptyState
+   *   - already in scene → setTarget (interrupts any in-flight tween)
+   * For each id in scene but not in targets:
+   *   - exit toward emptyState; pruned by tick() after completion
+   */
+  diff(targets, opts) {
+    const effectiveOpts = this.reducedMotion ? this._zeroDurationOpts(opts) : opts;
+    for (const [id, target] of targets) {
+      const existing = this.elements.get(id);
+      if (existing) {
+        if (existing.phase === "exit") existing.resurrect();
+        existing.setTarget(target, effectiveOpts);
+        this.activeElements.add(existing);
+      } else {
+        const empty = this.emptyState(target);
+        const el = new AnimatedElement(id, empty, this.registry);
+        el.enter(target, empty, effectiveOpts);
+        this.elements.set(id, el);
+        this.activeElements.add(el);
+      }
+    }
+    for (const [id, el] of this.elements) {
+      if (targets.has(id)) continue;
+      if (el.phase === "exit") continue;
+      const empty = this.exitEmptyState(el.target);
+      el.exit(empty, effectiveOpts);
+      this.activeElements.add(el);
+    }
+  }
+  /**
+   * Advance all active elements one frame. Auto-removes elements whose
+   * exit animation has completed.
+   */
+  tick(now) {
+    const toDeactivate = [];
+    const toRemove = [];
+    for (const el of this.activeElements) {
+      const stillAnimating = el.tick(now);
+      if (!stillAnimating) {
+        toDeactivate.push(el);
+      }
+      if (el.isReadyForRemoval()) {
+        toRemove.push(el);
+      }
+    }
+    for (const el of toDeactivate) {
+      this.activeElements.delete(el);
+    }
+    for (const el of toRemove) {
+      this.elements.delete(el.id);
+    }
+    return {
+      allIdle: this.activeElements.size === 0
+    };
+  }
+  getElements() {
+    return Array.from(this.elements.values());
+  }
+  getElement(id) {
+    return this.elements.get(id);
+  }
+  /** Clear all elements. Used by StrictMode reset / unmount. */
+  reset() {
+    this.elements.clear();
+    this.activeElements.clear();
+  }
+  _zeroDurationOpts(opts) {
+    return {
+      numbers: { duration: 0, easing: opts.numbers?.easing ?? NO_OPTS.easing },
+      colors: { duration: 0, easing: opts.colors?.easing ?? NO_OPTS.easing }
+    };
+  }
+};
+
+// src/animations/property-animations.ts
+var LINE_ANIMATABLE_PROPS = {
+  number: ["tension", "lineStrokeWidth", "markerSize", "fillOpacity", "lineDashOffset", "opacity"],
+  color: []
+};
+var BAR_ANIMATABLE_PROPS = {
+  number: ["opacity", "borderStrokeWidth", "borderRadius"],
+  color: []
+};
+var PIE_ANIMATABLE_PROPS = {
+  number: ["innerRadius", "outerRadius", "startAngle", "endAngle", "spacing", "cornerRadius", "offset", "opacity", "borderStrokeWidth"],
+  color: []
+};
+var POLAR_ANIMATABLE_PROPS = {
+  number: ["innerRadius", "outerRadius", "valueRadius", "startAngle", "endAngle", "spacing", "opacity", "borderStrokeWidth"],
+  color: []
+};
+var RADAR_ANIMATABLE_PROPS = {
+  number: ["tension", "lineStrokeWidth", "markerSize", "fillOpacity", "lineDashOffset", "opacity", "borderStrokeWidth"],
+  color: []
+};
+var SCATTER_ANIMATABLE_PROPS = {
+  number: ["markerSize", "borderStrokeWidth", "opacity", "rotation"],
+  color: []
+};
+var HEATMAP_ANIMATABLE_PROPS = {
+  number: ["opacity", "borderStrokeWidth"],
+  color: []
+};
+var CANDLESTICK_ANIMATABLE_PROPS = {
+  number: ["opacity", "borderStrokeWidth", "wickStrokeWidth"],
+  color: []
+};
+var TREEMAP_ANIMATABLE_PROPS = {
+  number: ["opacity", "borderStrokeWidth"],
+  color: []
+};
+function setupPropertyAnimations(configs, registry, store, onPropertyComplete) {
+  const cleanups = configs.map((config) => {
+    const storeKey = config.datasetId ? `${config.datasetId}:${config.property}` : config.chartType ? `${config.chartType}:${config.property}` : config.property;
+    return registry.register({
+      id: `prop:${storeKey}`,
+      key: config.property,
+      from: config.from,
+      to: config.to,
+      duration: config.duration,
+      easing: config.easing,
+      loops: config.loop ? Infinity : 1,
+      alternate: config.alternate,
+      delay: config.delay,
+      onTick: (value) => {
+        store.set(storeKey, value);
+      },
+      onComplete: () => {
+        store.delete(storeKey);
+        onPropertyComplete?.(storeKey);
+      }
+    });
+  });
+  return () => cleanups.forEach((fn) => fn());
+}
+function resolveAnimatedProps(store, chartType, datasetId, registry) {
+  const properties = Array.isArray(registry) ? registry : [...registry.number, ...registry.color];
+  const overrides = {};
+  for (const prop of properties) {
+    const value = store.get(`${datasetId}:${prop}`) ?? store.get(`${chartType}:${prop}`) ?? store.get(prop);
+    if (value !== void 0) overrides[prop] = value;
+  }
+  return overrides;
+}
+function normalizeAnimationsMap(map, scope = {}) {
+  if (!map) return [];
+  const out = [];
+  for (const entry of Object.values(map)) {
+    for (const property of entry.properties) {
+      out.push({
+        property,
+        ...scope.datasetId ? { datasetId: scope.datasetId } : {},
+        ...scope.chartType ? { chartType: scope.chartType } : {},
+        from: entry.from,
+        to: entry.to,
+        duration: entry.duration ?? 0,
+        easing: entry.easing,
+        loop: entry.loop,
+        alternate: entry.alternate,
+        delay: entry.delay
+      });
+    }
+  }
+  return out;
+}
+
+export { AnimatedElement, AnimatedScene, BAR_ANIMATABLE_PROPS, CANDLESTICK_ANIMATABLE_PROPS, HEATMAP_ANIMATABLE_PROPS, LINE_ANIMATABLE_PROPS, PIE_ANIMATABLE_PROPS, POLAR_ANIMATABLE_PROPS, RADAR_ANIMATABLE_PROPS, SCATTER_ANIMATABLE_PROPS, TREEMAP_ANIMATABLE_PROPS, normalizeAnimationsMap, resolveAnimatedProps, setupPropertyAnimations };