@primeui/chart-core 0.0.1-alpha.1

package/dist/chunk-NHRK5KU2.mjs

@@ -0,0 +1,890 @@
+import { computeDrillOutOrigin, computeZoomTransform } from './chunk-AGU3NG6D.mjs';
+import { AnimatedScene, resolveAnimatedProps, TREEMAP_ANIMATABLE_PROPS } from './chunk-VN7CKCSE.mjs';
+import { getCellLabelInfo } from './chunk-XIHBK5D3.mjs';
+import { calculateTreemapLayout } from './chunk-VVI3OBPJ.mjs';
+import { reconcileSvgChildren } from './chunk-KP2TWD4Z.mjs';
+import { parseAnimationConfig, getEasing } from './chunk-3WEMHXZI.mjs';
+import { raf, cancelRaf } from './chunk-EDAKJLNA.mjs';
+import { buildAccessibilityRenderContext, generateSeriesDescription } from './chunk-OGJ6IIBW.mjs';
+import { CHAR_WIDTH_RATIO } from './chunk-XTVE4P3L.mjs';
+import { buildAncestorChain } from './chunk-WA3OVISZ.mjs';
+import { configureCanvasHiDPI, materializeSvgNode, setAttr } from './chunk-SSLTFJ3U.mjs';
+
+// src/series/treemap/controller/helpers.ts
+function buildTreemapDataFingerprint(layouts) {
+  const parts = [];
+  for (const [id, { layout }] of layouts) {
+    const cellsDigest = layout.cells.map((c) => `${c.nodeId ?? c.index}=${c.value}`).join(",");
+    parts.push(`${id}:${layout.cells.length}:${cellsDigest}`);
+  }
+  return parts.join("|");
+}
+function buildTreemapChartAreaKey(chartArea) {
+  return `${chartArea.x},${chartArea.y},${chartArea.width},${chartArea.height}`;
+}
+function buildCellSceneTargets(layouts) {
+  const targets = /* @__PURE__ */ new Map();
+  for (const [datasetId, layout] of layouts) {
+    for (const cell of layout.cells) {
+      if (!cell.nodeId) continue;
+      const id = `${datasetId}::${cell.nodeId}`;
+      targets.set(id, {
+        x: cell.x,
+        y: cell.y,
+        width: cell.width,
+        height: cell.height,
+        color: cell.color,
+        label: cell.label,
+        secondaryLabel: cell.secondaryLabel,
+        value: cell.value,
+        index: cell.index,
+        nodeId: cell.nodeId,
+        hasChildren: cell.hasChildren ?? false,
+        depth: cell.depth ?? 0,
+        parentId: cell.parentId,
+        // Snap-only styling carriers — populated by renderer-time
+        // derivation, defaulted here since TreemapCell does not
+        // carry these fields directly.
+        opacity: 1,
+        borderColor: "",
+        borderStroke: 0,
+        borderDash: void 0
+      });
+    }
+  }
+  return targets;
+}
+function buildGroupBgSceneTargets(layouts) {
+  const targets = /* @__PURE__ */ new Map();
+  for (const [datasetId, layout] of layouts) {
+    for (const bg of layout.groupBackgrounds) {
+      const id = `${datasetId}::${bg.nodeId}`;
+      targets.set(id, {
+        x: bg.x,
+        y: bg.y,
+        width: bg.width,
+        height: bg.height,
+        color: bg.color,
+        label: bg.label,
+        value: bg.value,
+        index: bg.index,
+        nodeId: bg.nodeId,
+        depth: bg.depth
+      });
+    }
+  }
+  return targets;
+}
+function projectTreemapSceneFrame(cellScene, groupBgScene, targetLayouts) {
+  const targetCellByDataset = /* @__PURE__ */ new Map();
+  const targetBgByDataset = /* @__PURE__ */ new Map();
+  for (const [datasetId, layout] of targetLayouts) {
+    const cellMap = /* @__PURE__ */ new Map();
+    for (const c of layout.cells) {
+      if (c.nodeId) cellMap.set(c.nodeId, c);
+    }
+    targetCellByDataset.set(datasetId, cellMap);
+    const bgMap = /* @__PURE__ */ new Map();
+    for (const b of layout.groupBackgrounds) bgMap.set(b.nodeId, b);
+    targetBgByDataset.set(datasetId, bgMap);
+  }
+  const cellsByDataset = /* @__PURE__ */ new Map();
+  for (const el of cellScene.getElements()) {
+    const s = el.current;
+    const sep = el.id.indexOf("::");
+    if (sep < 0) continue;
+    const datasetId = el.id.slice(0, sep);
+    const targetCell = targetCellByDataset.get(datasetId)?.get(s.nodeId);
+    const cell = {
+      ...targetCell ?? {},
+      x: s.x,
+      y: s.y,
+      width: s.width,
+      height: s.height,
+      color: s.color,
+      label: s.label,
+      secondaryLabel: s.secondaryLabel,
+      value: s.value,
+      index: s.index,
+      nodeId: s.nodeId,
+      hasChildren: s.hasChildren,
+      depth: s.depth,
+      parentId: s.parentId
+    };
+    let arr = cellsByDataset.get(datasetId);
+    if (!arr) {
+      arr = [];
+      cellsByDataset.set(datasetId, arr);
+    }
+    arr.push(cell);
+  }
+  const bgsByDataset = /* @__PURE__ */ new Map();
+  for (const el of groupBgScene.getElements()) {
+    const s = el.current;
+    const sep = el.id.indexOf("::");
+    if (sep < 0) continue;
+    const datasetId = el.id.slice(0, sep);
+    const targetBg = targetBgByDataset.get(datasetId)?.get(s.nodeId);
+    const bg = {
+      ...targetBg ?? {},
+      x: s.x,
+      y: s.y,
+      width: s.width,
+      height: s.height,
+      color: s.color,
+      label: s.label,
+      value: s.value,
+      index: s.index,
+      nodeId: s.nodeId,
+      depth: s.depth
+    };
+    let arr = bgsByDataset.get(datasetId);
+    if (!arr) {
+      arr = [];
+      bgsByDataset.set(datasetId, arr);
+    }
+    arr.push(bg);
+  }
+  const frameLayouts = /* @__PURE__ */ new Map();
+  const datasetIds = /* @__PURE__ */ new Set([...targetLayouts.keys(), ...cellsByDataset.keys(), ...bgsByDataset.keys()]);
+  for (const datasetId of datasetIds) {
+    const targetLayout = targetLayouts.get(datasetId);
+    if (!targetLayout) continue;
+    const liveCells = cellsByDataset.get(datasetId) ?? [];
+    const liveBgs = bgsByDataset.get(datasetId) ?? [];
+    liveCells.sort((a, b) => a.index - b.index);
+    liveBgs.sort((a, b) => a.depth - b.depth);
+    frameLayouts.set(datasetId, {
+      ...targetLayout,
+      cells: liveCells,
+      groupBackgrounds: liveBgs
+    });
+  }
+  return frameLayouts;
+}
+
+// src/series/treemap/controller/types.ts
+var CELL_REGISTRY = {
+  number: ["x", "y", "width", "height"],
+  color: ["color"]
+};
+var GROUP_BG_REGISTRY = {
+  number: ["x", "y", "width", "height"],
+  color: ["color"]
+};
+
+// src/series/treemap/controller/ids.ts
+function assignStableIds(ctx, props) {
+  if (!props.data || props.data.length === 0) return props;
+  const categoryField = props.categoryField ?? "label";
+  const nodeIdField = props.nodeId;
+  const annotated = props.data.map((item, itemIndex) => {
+    const src = item;
+    const id = resolveId(ctx, src, categoryField, nodeIdField, itemIndex);
+    return { ...src, id };
+  });
+  return { ...props, data: annotated };
+}
+function resolveId(ctx, item, categoryField, nodeIdField, itemIndex) {
+  if (nodeIdField) {
+    const userId = item[nodeIdField];
+    if (userId != null) return String(userId);
+  }
+  const label = item[categoryField];
+  const key = label != null && label !== "" ? String(label) : `__anon_pos_${itemIndex}`;
+  let id = ctx._syntheticIds.get(key);
+  if (!id) {
+    id = typeof crypto !== "undefined" && typeof crypto.randomUUID === "function" ? crypto.randomUUID() : `__synthetic_${++ctx._syntheticIdCounter}`;
+    ctx._syntheticIds.set(key, id);
+  }
+  ctx._syntheticIdLastSeenTick.set(key, ctx._syntheticIdTickCounter);
+  return id;
+}
+
+// src/series/treemap/controller/paint.ts
+function buildTreemapSvgChildren(params) {
+  const children = [];
+  for (const [dsId, { props, layout }] of params.layoutMap) {
+    const node = params.paint.renderSvg(props, layout, { ...params.fontContext, interaction: params.interaction });
+    setAttr(node, "data-dataset", dsId);
+    if (params.accessibility?.enabled && params.accessibility.landmarkVerbosity === "all") {
+      setAttr(node, "role", "region");
+      setAttr(node, "aria-label", generateSeriesDescription(props.name ?? dsId, "treemap", layout.cells.length));
+    }
+    children.push(node);
+  }
+  return children;
+}
+function renderSvgGroup(ctx, group, layoutMap, fontContext, interaction, accessibility) {
+  const children = buildTreemapSvgChildren({ paint: ctx._paint, layoutMap, fontContext, interaction, accessibility });
+  group.replaceChildren(...children.map(materializeSvgNode));
+}
+function renderAllCanvas(ctx, c2d, layoutMap, fontContext, interaction) {
+  for (const [, { props, layout }] of layoutMap) {
+    ctx._paint.renderCanvas(props, layout, c2d, { ...fontContext, interaction });
+  }
+  renderCanvasCustomContent(ctx, c2d);
+}
+function renderCanvasCustomContent(ctx, c2d) {
+  ctx._paint.renderCanvasContent(c2d, ctx._layouts, ctx.onImageLoad ?? (() => {
+  }));
+}
+function renderSceneFrame(ctx, targetLayouts) {
+  const frameLayouts = projectTreemapSceneFrame(ctx._cellScene, ctx._groupBgScene, targetLayouts);
+  ctx._lastRenderedLayout = frameLayouts;
+  return frameLayouts;
+}
+function repaintCanvas(ctx, input, layoutMap, fontContext, interaction) {
+  const c2d = ctx.canvasEl?.getContext("2d");
+  if (!c2d) return;
+  c2d.clearRect(0, 0, input.width, input.height);
+  renderAllCanvas(ctx, c2d, layoutMap, fontContext, interaction);
+  const groupNodeId = ctx.hoveredGroupNodeId;
+  if (groupNodeId) {
+    for (const [, { layout }] of layoutMap) {
+      const bg = layout.groupBackgrounds.find((b) => b.nodeId === groupNodeId);
+      if (!bg) continue;
+      c2d.save();
+      c2d.fillStyle = "rgba(0,0,0,0.15)";
+      c2d.beginPath();
+      c2d.roundRect(bg.x, bg.y, bg.width, bg.height, 2);
+      c2d.fill();
+      c2d.strokeStyle = "rgba(255,255,255,0.6)";
+      c2d.lineWidth = 2;
+      c2d.beginPath();
+      c2d.roundRect(bg.x, bg.y, bg.width, bg.height, 2);
+      c2d.stroke();
+      c2d.restore();
+      break;
+    }
+  }
+}
+function applyHover(ctx, hover) {
+  const newIndex = hover.index;
+  if (newIndex === ctx._hoveredIndex) return;
+  ctx._hoveredIndex = newIndex;
+  const input = ctx.lastInput;
+  if (!input || ctx._layouts.size === 0) return;
+  const fontContext = { ...input.globalFont && { font: input.globalFont }, theme: input.theme };
+  const interaction = newIndex != null ? { hoveredIndex: newIndex } : void 0;
+  const liveLayoutMap = /* @__PURE__ */ new Map();
+  for (const [id, entry] of ctx._layouts) {
+    const liveLayout = ctx._lastRenderedLayout?.get(id) ?? entry.layout;
+    const overrides = ctx._propertyOverrides.get(id);
+    const mergedProps = overrides ? { ...entry.props, ...overrides } : entry.props;
+    liveLayoutMap.set(id, { props: mergedProps, layout: liveLayout });
+  }
+  if (input.renderer === "svg" && ctx.svgGroup) {
+    const children = buildTreemapSvgChildren({ paint: ctx._paint, layoutMap: liveLayoutMap, fontContext, interaction });
+    reconcileSvgChildren(ctx.svgGroup, children);
+    return;
+  }
+  if (input.renderer === "canvas") {
+    repaintCanvas(ctx, input, liveLayoutMap, fontContext, interaction);
+  }
+}
+function updateHoverOverlayCanvas(ctx, hit) {
+  if (ctx.lastInput?.renderer !== "canvas") return;
+  const groupNodeId = hit?.isGroupHit ? hit.nodeId ?? null : null;
+  if (ctx.hoveredGroupNodeId === groupNodeId) return;
+  ctx.hoveredGroupNodeId = groupNodeId;
+  const input = ctx.lastInput;
+  if (!input) return;
+  const fontContext = { ...input.globalFont && { font: input.globalFont }, theme: input.theme };
+  const interaction = ctx._hoveredIndex != null ? { hoveredIndex: ctx._hoveredIndex } : void 0;
+  const liveLayoutMap = /* @__PURE__ */ new Map();
+  for (const [id, entry] of ctx._layouts) {
+    const liveLayout = ctx._lastRenderedLayout?.get(id) ?? entry.layout;
+    const overrides = ctx._propertyOverrides.get(id);
+    const mergedProps = overrides ? { ...entry.props, ...overrides } : entry.props;
+    liveLayoutMap.set(id, { props: mergedProps, layout: liveLayout });
+  }
+  repaintCanvas(ctx, input, liveLayoutMap, fontContext, interaction);
+}
+function renderCurrentFrame(ctx) {
+  const input = ctx.lastInput;
+  if (!input || ctx._layouts.size === 0) return;
+  const fontContext = { ...input.globalFont && { font: input.globalFont }, theme: input.theme };
+  const targetLayouts = /* @__PURE__ */ new Map();
+  for (const [id, entry] of ctx._layouts) targetLayouts.set(id, entry.layout);
+  const frameLayouts = renderSceneFrame(ctx, targetLayouts);
+  const sceneLayoutMap = /* @__PURE__ */ new Map();
+  for (const [id, entry] of ctx._layouts) {
+    const live = frameLayouts.get(id) ?? entry.layout;
+    const overrides = ctx._propertyOverrides.get(id);
+    const mergedProps = overrides ? { ...entry.props, ...overrides } : entry.props;
+    sceneLayoutMap.set(id, { props: mergedProps, layout: live });
+  }
+  if (input.renderer === "svg" && ctx.svgGroup) {
+    renderSvgGroup(ctx, ctx.svgGroup, sceneLayoutMap, fontContext);
+  } else if (input.renderer === "canvas") {
+    const c2d = ctx.canvasEl?.getContext("2d");
+    if (!c2d) return;
+    c2d.clearRect(0, 0, input.width, input.height);
+    renderAllCanvas(ctx, c2d, sceneLayoutMap, fontContext);
+  }
+  ctx.onFrame?.();
+}
+
+// src/series/treemap/controller/index.ts
+var TreemapRendererController = class {
+  constructor(paint) {
+    // Animation lifecycle — local raf clock + fingerprint for phase detection.
+    this._animRafId = null;
+    this._isInitial = true;
+    this._lastFingerprint = "";
+    // Geometry fingerprint (chartArea bounds) from the last update. A chartArea
+    // change — initial-mount layout settling (title/caption/breadcrumb heights
+    // measured after first paint) or a later resize — leaves the data
+    // fingerprint unchanged (cells keep the same `nodeId=value`), so it reads as
+    // a `static` re-fire even though the geometry moved. Tracked separately so
+    // the static early-return can tell a true no-op re-fire (skip, preserve the
+    // running animation) from a geometry change (must re-diff so `setTarget`
+    // retargets the in-flight entrance toward the corrected layout — otherwise
+    // the rendered scene settles at the stale geometry while hit-test/hover read
+    // the fresh `_layouts`, drawing groups as rows but hovering them as columns).
+    this._lastChartAreaKey = "";
+    // Per-dataset property-animation overrides resolved from AnimatedPropertyStore.
+    // Set by `applyPropertyAnimations()` each property-animation tick and merged
+    // into the rendered cell props uniformly across all cells of the dataset at
+    // every paint site (update's paint(), applyHover, updateHoverOverlayCanvas).
+    // Cleared by `destroy()`.
+    //
+    // Treemap's animatable registry is `{ number: ['opacity', 'borderStrokeWidth'], color: [] }`
+    // — both fields are FieldAccessor<unknown, number> on TreemapRenderProps, so
+    // a scalar override satisfies the prop type and the renderer's accessor
+    // resolution treats it as a uniform per-cell value.
+    //
+    // Step 10 keeps this per-dataset only. Per-cell granularity is Step 14.
+    //
+    // Dual-scene note: the override applies only to the cell scene's render
+    // props. Group backgrounds (`_groupBgScene`) are auto-styled from their
+    // parent containers and don't expose user-facing animatable properties,
+    // so they're intentionally left untouched.
+    this._propertyOverrides = /* @__PURE__ */ new Map();
+    this._layouts = /* @__PURE__ */ new Map();
+    // Synthetic-ID cache for flat data without user-supplied nodeIds. Keyed by
+    // content (label, or `__anon_${value}` fallback) so identity survives across
+    // value-only updates. Hierarchical nodes with user-provided nodeIds bypass
+    // this cache.
+    //
+    // Limitation: two items sharing a label collide on a single cache entry and
+    // both receive the same synthetic ID. Users with ambiguous labels should
+    // provide an explicit `nodeId` field.
+    this._syntheticIds = /* @__PURE__ */ new Map();
+    this._syntheticIdCounter = 0;
+    // Per-update tick counter + last-seen map so entries unused for N consecutive
+    // updates are evicted. Prevents unbounded growth in long-lived dashboards
+    // with rotating data.
+    this._syntheticIdLastSeenTick = /* @__PURE__ */ new Map();
+    this._syntheticIdTickCounter = 0;
+    // Per-dataset cache of the previous top-level squarify rects (with `_row`
+    // metadata). Threaded back into `calculateTreemapLayout` on the next
+    // update so `resquarify` can preserve row partitioning across value-only,
+    // rank-preserving updates. Only the top-level layout is cached today;
+    // hierarchical (recursive) subtrees fall back to plain squarify.
+    // TODO(Step 7): per-subtree resquarify for hierarchical data.
+    this._lastSquarifyLayouts = /* @__PURE__ */ new Map();
+    this.lastInput = null;
+    this.svgGroup = null;
+    this.svgWrapper = null;
+    this.canvasEl = null;
+    this.drillZoom = null;
+    this.hoveredGroupNodeId = null;
+    this._hoveredIndex = null;
+    this._interactByLeaf = true;
+    this._hasRenderContent = false;
+    this._dataFingerprint = "";
+    this._lastRenderedLayout = null;
+    this.onFrame = null;
+    /** Called when image finishes loading in canvas renderContent — wrappers set this */
+    this.onImageLoad = null;
+    this._paint = paint;
+    this._cellScene = new AnimatedScene({
+      // ENTER: cell grows from zero size at its target center (grow-from-center).
+      emptyState: (target) => ({
+        ...target,
+        x: target.x + target.width / 2,
+        y: target.y + target.height / 2,
+        width: 0,
+        height: 0
+      }),
+      // EXIT: cell shrinks to zero size at its current center.
+      exitEmptyState: (target) => ({
+        ...target,
+        x: target.x + target.width / 2,
+        y: target.y + target.height / 2,
+        width: 0,
+        height: 0
+      }),
+      registry: CELL_REGISTRY
+    });
+    this._groupBgScene = new AnimatedScene({
+      emptyState: (target) => ({
+        ...target,
+        x: target.x + target.width / 2,
+        y: target.y + target.height / 2,
+        width: 0,
+        height: 0
+      }),
+      exitEmptyState: (target) => ({
+        ...target,
+        x: target.x + target.width / 2,
+        y: target.y + target.height / 2,
+        width: 0,
+        height: 0
+      }),
+      registry: GROUP_BG_REGISTRY
+    });
+  }
+  // ================================================================
+  // PUBLIC API
+  // ================================================================
+  update(input) {
+    this.lastInput = input;
+    this.svgGroup = input.svgGroup ?? null;
+    this.svgWrapper = input.svgWrapper ?? null;
+    this.canvasEl = input.canvasEl ?? null;
+    const { datasets, datasetVisibility, chartArea, renderer, width, height, features, globalFont, theme } = input;
+    const fontContext = { ...globalFont && { font: globalFont }, theme };
+    const accessibility = buildAccessibilityRenderContext(features);
+    const layouts = /* @__PURE__ */ new Map();
+    for (const [id, ds] of datasets) {
+      if (ds.type !== "treemap" || !(datasetVisibility.get(id) ?? true)) continue;
+      const baseProps = ds.props;
+      const propsWithIds = this._assignStableIds(baseProps);
+      const props = input.drilldownEnabled ? { ...propsWithIds, drilldownParentId: input.drilldownParentId ?? void 0 } : propsWithIds;
+      const prevRects = this._lastSquarifyLayouts.get(id) ?? null;
+      const layout = calculateTreemapLayout(props, chartArea, input.theme, prevRects);
+      if (layout._squarifyRects) {
+        this._lastSquarifyLayouts.set(id, layout._squarifyRects);
+      } else {
+        this._lastSquarifyLayouts.delete(id);
+      }
+      layouts.set(id, { props, layout });
+    }
+    this._layouts = layouts;
+    this._interactByLeaf = true;
+    this._hasRenderContent = false;
+    for (const [, { props }] of layouts) {
+      if (props.interactByLeaf !== void 0) {
+        this._interactByLeaf = props.interactByLeaf;
+        break;
+      }
+    }
+    for (const [, { props }] of layouts) {
+      if (props.renderContent != null) {
+        this._hasRenderContent = true;
+        break;
+      }
+    }
+    this._dataFingerprint = buildTreemapDataFingerprint(layouts);
+    let totalCells = 0;
+    for (const [, { layout }] of layouts) totalCells += layout.cells.length;
+    if (layouts.size === 0 || totalCells === 0) {
+      this._cancelRaf();
+      this._cellScene.reset();
+      this._groupBgScene.reset();
+      this._lastFingerprint = "";
+      this._isInitial = true;
+      this._lastRenderedLayout = null;
+      if (renderer === "svg" && this.svgGroup) this.svgGroup.innerHTML = "";
+      return;
+    }
+    if (renderer === "canvas" && this.canvasEl && width > 0 && height > 0) {
+      configureCanvasHiDPI(this.canvasEl, width, height);
+    }
+    const animConfig = features.get("animation")?.props;
+    const { duration: animDuration, easing: animEasing } = parseAnimationConfig(animConfig);
+    const phase = this.drillZoom ? "entrance" : this._isInitial ? "entrance" : this._lastFingerprint !== "" && this._dataFingerprint !== "" && this._dataFingerprint !== this._lastFingerprint ? "update" : "static";
+    const chartAreaKey = buildTreemapChartAreaKey(chartArea);
+    const geometryChanged = chartAreaKey !== this._lastChartAreaKey;
+    this._lastChartAreaKey = chartAreaKey;
+    const resumeAnimation = phase === "static" && geometryChanged && this._animRafId !== null;
+    const targetLayouts = /* @__PURE__ */ new Map();
+    for (const [id, entry] of layouts) targetLayouts.set(id, entry.layout);
+    const cellTargets = buildCellSceneTargets(targetLayouts);
+    const bgTargets = buildGroupBgSceneTargets(targetLayouts);
+    const shouldAnimate = phase !== "static" && animDuration > 0;
+    const numbersDuration = shouldAnimate ? animDuration : 0;
+    const opts = {
+      numbers: { duration: numbersDuration, easing: animEasing },
+      colors: { duration: numbersDuration, easing: animEasing }
+    };
+    if (phase === "static" && this._animRafId !== null && !geometryChanged) {
+      this._commit(this._dataFingerprint);
+      this._syntheticIdTickCounter++;
+      const PRUNE_AGE2 = 10;
+      const cutoff2 = this._syntheticIdTickCounter - PRUNE_AGE2;
+      for (const [key, lastSeen] of this._syntheticIdLastSeenTick) {
+        if (lastSeen < cutoff2) {
+          this._syntheticIds.delete(key);
+          this._syntheticIdLastSeenTick.delete(key);
+        }
+      }
+      return;
+    }
+    this._cancelRaf();
+    this._cellScene.diff(cellTargets, opts);
+    this._groupBgScene.diff(bgTargets, opts);
+    const zoomInfo = this.drillZoom;
+    const zoomDuration = 400;
+    const zoomEasing = getEasing("easeOutCubic");
+    const zoomStartAt = shouldAnimate && zoomInfo ? performance.now() : 0;
+    const wantsSvgClipWipe = renderer === "svg" && this.svgWrapper && phase === "entrance" && !zoomInfo && shouldAnimate;
+    const wantsCanvasClipWipe = renderer === "canvas" && phase === "entrance" && !zoomInfo && shouldAnimate;
+    const wantsClipWipe = wantsSvgClipWipe || wantsCanvasClipWipe;
+    const wipeStartAt = wantsClipWipe ? performance.now() : 0;
+    const isZoomActive = (now) => zoomInfo !== null && shouldAnimate && now - zoomStartAt < zoomDuration;
+    const isWipeActive = (now) => wantsClipWipe && now - wipeStartAt < animDuration;
+    const wrapperBusy = (now) => isZoomActive(now) || isWipeActive(now);
+    if (renderer === "svg" && this.svgWrapper) {
+      this.svgWrapper.style.clipPath = "";
+      this.svgWrapper.removeAttribute("transform");
+      this.svgWrapper.style.opacity = "";
+    }
+    const paint = () => {
+      const frameLayouts = this._renderSceneFrame(targetLayouts);
+      const sceneLayoutMap = /* @__PURE__ */ new Map();
+      for (const [id, entry] of layouts) {
+        const live = frameLayouts.get(id) ?? entry.layout;
+        const overrides = this._propertyOverrides.get(id);
+        const mergedProps = overrides ? { ...entry.props, ...overrides } : entry.props;
+        sceneLayoutMap.set(id, { props: mergedProps, layout: live });
+      }
+      const hoverInteraction = this._hoveredIndex != null ? { hoveredIndex: this._hoveredIndex } : void 0;
+      if (renderer === "svg" && this.svgGroup) {
+        this.renderSvgGroup(this.svgGroup, sceneLayoutMap, fontContext, hoverInteraction, accessibility);
+      } else if (renderer === "canvas") {
+        const c = this.canvasEl?.getContext("2d");
+        if (!c) return;
+        const liveWidth = this.lastInput?.width ?? width;
+        const liveHeight = this.lastInput?.height ?? height;
+        c.clearRect(0, 0, liveWidth, liveHeight);
+        if (zoomInfo) {
+          const liveArea = this.lastInput?.chartArea ?? chartArea;
+          const elapsed = performance.now() - zoomStartAt;
+          const rawProgress = Math.min(1, Math.max(0, elapsed / zoomDuration)) ;
+          const zoomProgress = zoomEasing(rawProgress);
+          const { tx, ty, sx, sy } = computeZoomTransform(zoomInfo.cellRect, liveArea, zoomProgress);
+          c.save();
+          c.beginPath();
+          c.rect(liveArea.x, liveArea.y, liveArea.width, liveArea.height);
+          c.clip();
+          c.translate(tx, ty);
+          c.scale(sx, sy);
+          if (zoomInfo.direction === "out") c.globalAlpha = zoomProgress;
+          this.renderAllCanvas(c, sceneLayoutMap, fontContext, hoverInteraction);
+          c.restore();
+        } else if (wantsCanvasClipWipe) {
+          const liveArea = this.lastInput?.chartArea ?? chartArea;
+          const elapsed = performance.now() - wipeStartAt;
+          const rawProgress = animDuration > 0 ? Math.min(1, Math.max(0, elapsed / animDuration)) : 1;
+          const wipeProgress = animEasing(rawProgress);
+          c.save();
+          c.beginPath();
+          c.rect(liveArea.x, liveArea.y, liveArea.width * wipeProgress, liveArea.height);
+          c.clip();
+          this.renderAllCanvas(c, sceneLayoutMap, fontContext, hoverInteraction);
+          c.restore();
+        } else {
+          this.renderAllCanvas(c, sceneLayoutMap, fontContext, hoverInteraction);
+        }
+      }
+    };
+    const applyWrapperEffects = () => {
+      if (renderer !== "svg" || !this.svgWrapper) return;
+      const wrapper = this.svgWrapper;
+      if (zoomInfo) {
+        const area = this.lastInput?.chartArea ?? chartArea;
+        const elapsed = performance.now() - zoomStartAt;
+        const rawProgress = Math.min(1, Math.max(0, elapsed / zoomDuration)) ;
+        const zoomProgress = zoomEasing(rawProgress);
+        const { tx, ty, sx, sy } = computeZoomTransform(zoomInfo.cellRect, area, zoomProgress);
+        wrapper.setAttribute("transform", `translate(${tx},${ty}) scale(${sx},${sy})`);
+        if (zoomInfo.direction === "out") wrapper.style.opacity = String(zoomProgress);
+        return;
+      }
+      if (wantsSvgClipWipe) {
+        const elapsed = performance.now() - wipeStartAt;
+        const rawProgress = animDuration > 0 ? Math.min(1, Math.max(0, elapsed / animDuration)) : 1;
+        const wipeProgress = animEasing(rawProgress);
+        wrapper.style.clipPath = `inset(0 ${(1 - wipeProgress) * 100}% 0 0)`;
+      }
+    };
+    const clearWrapperEffects = () => {
+      if (zoomInfo) this.drillZoom = null;
+      if (renderer !== "svg" || !this.svgWrapper) return;
+      const wrapper = this.svgWrapper;
+      if (zoomInfo) {
+        wrapper.removeAttribute("transform");
+        wrapper.style.opacity = "";
+      }
+      if (wantsSvgClipWipe) {
+        wrapper.style.clipPath = "";
+      }
+    };
+    if (shouldAnimate || resumeAnimation) {
+      applyWrapperEffects();
+      paint();
+      const tick = (now) => {
+        this._animRafId = null;
+        const { allIdle: cellsIdle } = this._cellScene.tick(now);
+        const { allIdle: bgsIdle } = this._groupBgScene.tick(now);
+        applyWrapperEffects();
+        paint();
+        if (!cellsIdle || !bgsIdle || wrapperBusy(now)) {
+          this._animRafId = raf(tick);
+        } else {
+          clearWrapperEffects();
+          paint();
+        }
+      };
+      this._animRafId = raf(tick);
+    } else {
+      this._cellScene.tick(performance.now());
+      this._groupBgScene.tick(performance.now());
+      clearWrapperEffects();
+      paint();
+    }
+    this._commit(this._dataFingerprint);
+    this._syntheticIdTickCounter++;
+    const PRUNE_AGE = 10;
+    const cutoff = this._syntheticIdTickCounter - PRUNE_AGE;
+    for (const [key, lastSeen] of this._syntheticIdLastSeenTick) {
+      if (lastSeen < cutoff) {
+        this._syntheticIds.delete(key);
+        this._syntheticIdLastSeenTick.delete(key);
+      }
+    }
+  }
+  /** Set drilldown zoom animation state before calling update() */
+  setDrillZoom(cellRect, direction) {
+    this.drillZoom = { cellRect, direction };
+    this._resetPhase();
+  }
+  /** Prepare zoom-out (called before breadcrumb navigation) */
+  prepareDrillOut(chartArea) {
+    this.drillZoom = { cellRect: computeDrillOutOrigin(chartArea), direction: "out" };
+    this._resetPhase();
+  }
+  /** Find cell/header bounds by nodeId */
+  findCellRect(nodeId) {
+    for (const [, { layout }] of this._layouts) {
+      for (const cell of layout.cells) {
+        if (cell.nodeId === nodeId) return { x: cell.x, y: cell.y, width: cell.width, height: cell.height };
+      }
+      for (const header of layout.groupHeaders) {
+        if (header.nodeId === nodeId) return { x: header.x, y: header.y, width: header.width, height: header.height };
+      }
+    }
+    return null;
+  }
+  /**
+   * Handle a drilldown click: set zoom animation state and compute ancestor chain.
+   * Returns the data needed by framework wrappers to call drilldownState.drillInto().
+   * Returns null when drilldown is not applicable (no nodeId or no children).
+   */
+  buildDrillInto(hit, currentParentId) {
+    if (!hit.nodeId || !hit.hasChildren) return null;
+    const cellRect = this.findCellRect(hit.nodeId);
+    if (cellRect) this.setDrillZoom(cellRect, "in");
+    const ancestors = buildAncestorChain(hit.nodeId, this._layouts, currentParentId);
+    return { nodeId: hit.nodeId, label: hit.label, ancestors };
+  }
+  hitTest(x, y) {
+    for (const [datasetId, { layout }] of this._layouts) {
+      const isFlat = layout.groupBackgrounds.length === 0 && layout.groupHeaders.length === 0;
+      if (this._interactByLeaf || isFlat) {
+        for (const cell of layout.cells) {
+          if (x < cell.x || x > cell.x + cell.width || y < cell.y || y > cell.y + cell.height) continue;
+          if (isFlat) {
+            return { datasetId, index: cell.index, label: cell.label, value: cell.value, color: cell.color, nodeId: cell.nodeId, hasChildren: cell.hasChildren };
+          }
+          if (this._hasRenderContent && !cell.hasChildren) {
+            const LEAF_CONTENT_BAND_PX = 60;
+            if (y <= cell.y + Math.min(cell.height, LEAF_CONTENT_BAND_PX)) {
+              return { datasetId, index: cell.index, label: cell.label, value: cell.value, color: cell.color, nodeId: cell.nodeId, hasChildren: cell.hasChildren };
+            }
+          }
+          const info = this._hasRenderContent ? null : getCellLabelInfo(cell);
+          if (info && info.showPrimary) {
+            const cx = cell.x + cell.width / 2;
+            const cy = cell.y + cell.height / 2;
+            const textW = cell.label.length * CHAR_WIDTH_RATIO * info.fontSize;
+            const primaryY = info.showSecondary ? cy - info.fontSize * 0.4 : cy;
+            const halfH = info.fontSize * 0.6;
+            const blockTop = primaryY - halfH;
+            let blockBottom = primaryY + halfH;
+            if (info.showSecondary && cell.secondaryLabel) {
+              const secY = cy + info.fontSize * 0.6;
+              const secHalfH = info.secondaryFontSize * 0.6;
+              const secW = cell.secondaryLabel.length * CHAR_WIDTH_RATIO * info.secondaryFontSize;
+              blockBottom = secY + secHalfH;
+              if (x >= cx - secW / 2 && x <= cx + secW / 2 && y >= secY - secHalfH && y <= secY + secHalfH) {
+                return { datasetId, index: cell.index, label: cell.label, value: cell.value, color: cell.color, nodeId: cell.nodeId, hasChildren: cell.hasChildren };
+              }
+            }
+            if (x >= cx - textW / 2 && x <= cx + textW / 2 && y >= blockTop && y <= blockBottom) {
+              return { datasetId, index: cell.index, label: cell.label, value: cell.value, color: cell.color, nodeId: cell.nodeId, hasChildren: cell.hasChildren };
+            }
+          }
+          const sortedBgs2 = [...layout.groupBackgrounds].sort((a, b) => b.depth - a.depth);
+          const parentBg = sortedBgs2.find((bg) => x >= bg.x && x <= bg.x + bg.width && y >= bg.y && y <= bg.y + bg.height);
+          if (parentBg) {
+            return { datasetId, index: parentBg.index, label: parentBg.label, value: parentBg.value, color: parentBg.color, nodeId: parentBg.nodeId, hasChildren: true, isGroupHit: true };
+          }
+          return { datasetId, index: cell.index, label: cell.label, value: cell.value, color: cell.color, nodeId: cell.nodeId, hasChildren: cell.hasChildren };
+        }
+      }
+      for (const header of layout.groupHeaders) {
+        if (header.nodeId && x >= header.x && x <= header.x + header.width && y >= header.y && y <= header.y + header.height) {
+          return { datasetId, index: header.index, label: header.label, value: header.value, color: header.color, nodeId: header.nodeId, hasChildren: true };
+        }
+      }
+      const sortedBgs = [...layout.groupBackgrounds].sort((a, b) => b.depth - a.depth);
+      for (const bg of sortedBgs) {
+        if (x >= bg.x && x <= bg.x + bg.width && y >= bg.y && y <= bg.y + bg.height) {
+          return { datasetId, index: bg.index, label: bg.label, value: bg.value, color: bg.color, nodeId: bg.nodeId, hasChildren: true, isGroupHit: true };
+        }
+      }
+    }
+    return null;
+  }
+  /** Apply cell-level hover — lightweight repaint without full re-layout */
+  applyHover(hover) {
+    applyHover(this, hover);
+  }
+  /** Update hover overlay on canvas — for SVG, wrappers handle DOM overlay */
+  updateHoverOverlayCanvas(hit) {
+    updateHoverOverlayCanvas(this, hit);
+  }
+  get layouts() {
+    return this._layouts;
+  }
+  get hasData() {
+    return this._layouts.size > 0;
+  }
+  getColorScaleInfo() {
+    const first = this._layouts.values().next().value;
+    if (!first) return null;
+    const { resolvedColorScale, resolvedColorRange, valueRange } = first.layout;
+    if (!resolvedColorScale || !resolvedColorRange || !valueRange) return null;
+    return { colorScale: resolvedColorScale, colorRange: resolvedColorRange, min: valueRange[0], max: valueRange[1] };
+  }
+  destroy() {
+    this._cancelRaf();
+    this._cellScene.reset();
+    this._groupBgScene.reset();
+    this._lastRenderedLayout = null;
+    this._isInitial = true;
+    this._lastFingerprint = "";
+    this._syntheticIds.clear();
+    this._syntheticIdCounter = 0;
+    this._syntheticIdLastSeenTick.clear();
+    this._syntheticIdTickCounter = 0;
+    this._lastSquarifyLayouts.clear();
+    this._propertyOverrides.clear();
+  }
+  /**
+   * Apply animated property values without triggering a full layout cycle.
+   * Called from the property-animation framework wrapper each animation tick.
+   *
+   * Per-dataset: writes overrides into `_propertyOverrides` (or deletes the
+   * entry when the store has no live values for it), then triggers a
+   * frame re-render so the merged props paint into SVG/canvas. The overrides
+   * apply uniformly to all cells of the dataset — per-cell granularity is
+   * Step 14.
+   *
+   * Dual-scene note: only the cell scene's render props are affected. The
+   * `_groupBgScene` (group backgrounds) is intentionally untouched — group
+   * backgrounds are auto-styled from their parent containers and don't
+   * expose user-facing animatable properties.
+   */
+  applyPropertyAnimations(store) {
+    if (!this.lastInput || this._layouts.size === 0) return;
+    let appliedAny = false;
+    for (const datasetId of this._layouts.keys()) {
+      const overrides = resolveAnimatedProps(store, "treemap", datasetId, TREEMAP_ANIMATABLE_PROPS);
+      if (Object.keys(overrides).length === 0) {
+        if (this._propertyOverrides.delete(datasetId)) appliedAny = true;
+        continue;
+      }
+      appliedAny = true;
+      this._propertyOverrides.set(datasetId, overrides);
+    }
+    if (!appliedAny) return;
+    this._renderCurrentFrame();
+  }
+  /**
+   * Full re-render of the current scene state.
+   *
+   * Used by the property-animation framework wrapper: when a property
+   * animation completes and its override is released from the store,
+   * `renderFrameCycle()` re-paints from the now-cleared `_propertyOverrides`
+   * so SVG attributes / canvas paints snap back to base values (which can
+   * drift during in-place property patching).
+   */
+  renderFrameCycle() {
+    this._renderCurrentFrame();
+  }
+  /**
+   * Re-render the current scene state with the active property overrides
+   * merged into per-dataset props. Mirrors the static branch of `update()`'s
+   * `paint()` closure without re-running layout or scene diff.
+   */
+  _renderCurrentFrame() {
+    renderCurrentFrame(this);
+  }
+  // ================================================================
+  // PRIVATE
+  // ================================================================
+  /**
+   * Return a shallow-copied TreemapRenderProps whose `data` array contains
+   * `id`-populated clones of each item. User-provided `nodeId` values are
+   * preserved verbatim; flat-data items without one get a synthetic ID drawn
+   * from `_syntheticIds`, cached by content (label/value) so identity holds
+   * across value-only updates.
+   */
+  _assignStableIds(props) {
+    return assignStableIds(this, props);
+  }
+  _resolveId(item, categoryField, nodeIdField, itemIndex) {
+    return resolveId(this, item, categoryField, nodeIdField, itemIndex);
+  }
+  /** Cancel any in-flight raf. */
+  _cancelRaf() {
+    if (this._animRafId !== null) {
+      cancelRaf(this._animRafId);
+      this._animRafId = null;
+    }
+  }
+  /** Commit fingerprint for next-frame phase detection. */
+  _commit(fingerprint) {
+    this._isInitial = false;
+    this._lastFingerprint = fingerprint;
+  }
+  /** Reset phase state — used when drill-zoom/drill-out changes the data set. */
+  _resetPhase() {
+    this._isInitial = true;
+    this._lastFingerprint = "";
+    this._cancelRaf();
+  }
+  renderSvgGroup(group, layoutMap, fontContext, interaction, accessibility) {
+    renderSvgGroup(this, group, layoutMap, fontContext, interaction, accessibility);
+  }
+  renderAllCanvas(ctx, layoutMap, fontContext, interaction) {
+    renderAllCanvas(this, ctx, layoutMap, fontContext, interaction);
+  }
+  renderCanvasCustomContent(ctx) {
+    renderCanvasCustomContent(this, ctx);
+  }
+  _renderSceneFrame(targetLayouts) {
+    return renderSceneFrame(this, targetLayouts);
+  }
+  repaintCanvas(input, layoutMap, fontContext, interaction) {
+    repaintCanvas(this, input, layoutMap, fontContext, interaction);
+  }
+};
+
+export { TreemapRendererController };