@primeui/chart-core 0.0.1-alpha.1

package/dist/chunk-ZT2Z7ERM.mjs

@@ -0,0 +1,874 @@
+import { createDrawImage } from './chunk-7CMVDIOU.mjs';
+import { measureFontMetrics, measureTextWidth } from './chunk-XTVE4P3L.mjs';
+import { DEFAULT_HOVER_DIM_OPACITY, DEFAULT_HOVER_POINT_RADIUS_MULTIPLIER, DEFAULT_REFERENCE_LINE_STROKE, DEFAULT_REFERENCE_LINE_WIDTH, DEFAULT_REFERENCE_LABEL_OFFSET, DEFAULT_REFERENCE_BAND_FILL, DEFAULT_REFERENCE_BAND_OPACITY, resolveFontFamily, resolveFontSize, DEFAULT_REFERENCE_LABEL_FONT_SIZE, DEFAULT_REFERENCE_LABEL_FONT_WEIGHT } from './chunk-NKUYIWAP.mjs';
+import { resolveAccessor, makeItemContext, resolveSwatchColor, isGradientColor } from './chunk-O2X6FF45.mjs';
+import { createSvgGroup, appendChild, createSvgRect, createSvgText, createSvgLine, withCanvasState } from './chunk-SSLTFJ3U.mjs';
+import { shallowEqual } from './chunk-RQ3CKQOX.mjs';
+
+// src/utils/customRender.utils.ts
+function renderCustomMarkersCanvas(ctx, entries, hover, options) {
+  for (const entry of entries) {
+    const hasEffects = !!entry.effects;
+    const hoveredIndex = hover.datasetId === entry.dsId ? hover.index : null;
+    const anyHovered = hoveredIndex !== null && hasEffects;
+    const dimOpacity = entry.effects?.dimOpacity ?? DEFAULT_HOVER_DIM_OPACITY;
+    for (const pt of entry.visiblePoints) {
+      const isHovered = anyHovered && pt.dataIndex === hoveredIndex;
+      const opacity = anyHovered && !isHovered ? dimOpacity : 1;
+      const currentSize = isHovered ? entry.effects?.hoverPointRadius ?? entry.markerSize * DEFAULT_HOVER_POINT_RADIUS_MULTIPLIER : entry.markerSize;
+      const baseColor = entry.pointBackgroundColor != null ? String(entry.pointBackgroundColor) : entry.color;
+      const context = {
+        x: pt.x,
+        y: pt.y,
+        index: pt.dataIndex,
+        value: pt.value,
+        category: pt.category ?? "",
+        data: entry.data?.[pt.dataIndex],
+        color: baseColor,
+        size: currentSize,
+        isHovered,
+        opacity,
+        ctx,
+        drawImage: options?.onImageLoad ? createDrawImage(ctx, options.onImageLoad) : void 0,
+        animate: options?.createAnimate?.(entry.dsId, pt.dataIndex)
+      };
+      ctx.save();
+      ctx.translate(pt.x, pt.y);
+      ctx.globalAlpha = opacity;
+      entry.renderMarker(context);
+      ctx.restore();
+    }
+  }
+}
+function buildMarkerRenderItems(entries, hover) {
+  const items = [];
+  for (const entry of entries) {
+    const hasEffects = !!entry.effects;
+    const hoveredIndex = hover.datasetId === entry.dsId ? hover.index : null;
+    const anyHover = hoveredIndex !== null && hasEffects;
+    const dimOpacity = entry.effects?.dimOpacity ?? DEFAULT_HOVER_DIM_OPACITY;
+    for (const pt of entry.visiblePoints) {
+      const isHovered = anyHover && pt.dataIndex === hoveredIndex;
+      const opacity = anyHover && !isHovered ? dimOpacity : 1;
+      const currentSize = isHovered ? entry.effects?.hoverPointRadius ?? entry.markerSize * DEFAULT_HOVER_POINT_RADIUS_MULTIPLIER : entry.markerSize;
+      const baseColor = entry.pointBackgroundColor != null ? String(entry.pointBackgroundColor) : entry.color;
+      const context = {
+        x: pt.x,
+        y: pt.y,
+        index: pt.dataIndex,
+        value: pt.value,
+        category: pt.category ?? "",
+        data: entry.data?.[pt.dataIndex],
+        color: baseColor,
+        size: currentSize,
+        isHovered,
+        opacity
+      };
+      items.push({
+        key: `marker-${entry.dsId}-${pt.dataIndex}`,
+        dsId: entry.dsId,
+        x: pt.x,
+        y: pt.y,
+        opacity,
+        context,
+        renderMarker: entry.renderMarker
+      });
+    }
+  }
+  return items;
+}
+
+// src/utils/dir.utils.ts
+function resolveDirFromElement(target) {
+  if (!target) return "ltr";
+  const detected = target.closest("[dir]")?.getAttribute("dir");
+  return detected === "rtl" ? "rtl" : "ltr";
+}
+function observeDocumentDir(onChange) {
+  if (typeof document === "undefined" || typeof MutationObserver === "undefined") {
+    return () => {
+    };
+  }
+  const observer = new MutationObserver(onChange);
+  observer.observe(document.documentElement, { attributes: true, attributeFilter: ["dir"] });
+  return () => observer.disconnect();
+}
+
+// src/utils/legend.utils.ts
+function resolveLegendColor(props, index, item, theme, extras) {
+  return resolveSwatchColor(props, index, item, theme, extras);
+}
+function resolveLegendGradient(props, index, item, extras) {
+  if (props.color == null) return void 0;
+  const resolved = resolveAccessor(props.color, makeItemContext(item, index, extras));
+  return resolved != null && isGradientColor(resolved) ? resolved : void 0;
+}
+function buildLegendItems(options) {
+  const { datasets, datasetVisibility, hiddenItems, isCartesian, hasRadarDatasets, hasPolarDatasets, hasStackedPies, theme } = options;
+  const sortedDatasets = Array.from(datasets.entries()).sort(([, a], [, b]) => a.order - b.order);
+  if (isCartesian || hasRadarDatasets || hasPolarDatasets) {
+    const items2 = [];
+    for (const [datasetId, dataset] of sortedDatasets) {
+      const visible = datasetVisibility.get(datasetId) ?? true;
+      const props = dataset.props;
+      const firstItem = props.data?.[0];
+      const color = resolveLegendColor(props, dataset.order, firstItem, theme);
+      items2.push({
+        type: "dataset",
+        datasetId,
+        label: props.name ?? datasetId,
+        color,
+        colorGradient: resolveLegendGradient(props, dataset.order, firstItem),
+        visible
+      });
+    }
+    return items2;
+  }
+  const items = [];
+  for (const [datasetId, dataset] of sortedDatasets) {
+    const props = dataset.props;
+    const datasetVisible = datasetVisibility.get(datasetId) ?? true;
+    if (hasStackedPies) {
+      items.push({
+        type: "dataset",
+        datasetId,
+        label: props.name ?? datasetId,
+        color: "",
+        visible: datasetVisible
+      });
+    }
+    const data = props.data;
+    if (data) {
+      const borderColor = typeof props.borderColor === "string" ? props.borderColor : void 0;
+      const hasBorder = (typeof props.borderStrokeWidth === "number" ? props.borderStrokeWidth : 0) > 0 && borderColor !== void 0;
+      const borderRadiusRaw = props.borderRadius;
+      const borderRadius = typeof borderRadiusRaw === "number" ? borderRadiusRaw : typeof borderRadiusRaw === "object" && borderRadiusRaw !== null ? borderRadiusRaw.topLeft ?? borderRadiusRaw.topRight ?? borderRadiusRaw.bottomLeft ?? borderRadiusRaw.bottomRight ?? void 0 : void 0;
+      const hiddenSet = hiddenItems.get(datasetId);
+      const labelAccessor = props.categoryField ?? props.label;
+      const sortProp = props.sort;
+      const sortedIndices = Array.from({ length: data.length }, (_, i) => i);
+      if (sortProp) {
+        const valueAccessor = props.valueField;
+        sortedIndices.sort((a, b) => {
+          if (sortProp === "value-asc" || sortProp === "value-desc") {
+            const va = valueAccessor ? Number(resolveAccessor(valueAccessor, makeItemContext(data[a], a)) ?? 0) : 0;
+            const vb = valueAccessor ? Number(resolveAccessor(valueAccessor, makeItemContext(data[b], b)) ?? 0) : 0;
+            return sortProp === "value-asc" ? va - vb : vb - va;
+          }
+          const la = labelAccessor ? String(resolveAccessor(labelAccessor, makeItemContext(data[a], a)) ?? "") : "";
+          const lb = labelAccessor ? String(resolveAccessor(labelAccessor, makeItemContext(data[b], b)) ?? "") : "";
+          return sortProp === "label-asc" ? la.localeCompare(lb) : lb.localeCompare(la);
+        });
+      }
+      const valueAccessorForColor = props.valueField;
+      for (const i of sortedIndices) {
+        const item = data[i];
+        const itemValue = valueAccessorForColor ? resolveAccessor(valueAccessorForColor, makeItemContext(item, i)) ?? null : null;
+        const label = labelAccessor ? resolveAccessor(labelAccessor, makeItemContext(item, i)) : void 0;
+        const itemExtras = {
+          value: itemValue,
+          category: label != null ? String(label) : void 0,
+          seriesIndex: typeof props.order === "number" ? props.order : 0,
+          seriesId: datasetId
+        };
+        const color = resolveLegendColor(props, i, item, theme, itemExtras);
+        items.push({
+          type: "item",
+          datasetId,
+          index: i,
+          label: label ? String(label) : `Item ${i + 1}`,
+          color,
+          colorGradient: resolveLegendGradient(props, i, item, itemExtras),
+          visible: datasetVisible && !(hiddenSet?.has(i) ?? false),
+          borderColor,
+          hasBorder,
+          borderRadius
+        });
+      }
+    }
+  }
+  return items;
+}
+function buildSharedLegendItems(entries, mode, visibilityMap) {
+  const items = [];
+  if (mode === "dataset" || mode === "both") {
+    const seen = /* @__PURE__ */ new Set();
+    for (const ds of entries) {
+      if (ds.itemIndex !== void 0) continue;
+      if (seen.has(ds.label)) continue;
+      seen.add(ds.label);
+      items.push({
+        type: "dataset",
+        datasetId: ds.datasetId,
+        label: ds.label,
+        color: ds.color,
+        colorGradient: ds.colorGradient,
+        visible: visibilityMap.get(ds.datasetId) ?? true
+      });
+    }
+  }
+  if (mode === "category" || mode === "both") {
+    const seen = /* @__PURE__ */ new Set();
+    for (const ds of entries) {
+      if (ds.itemIndex === void 0) continue;
+      if (seen.has(ds.label)) continue;
+      seen.add(ds.label);
+      items.push({
+        type: "item",
+        datasetId: ds.datasetId,
+        itemLabel: ds.label,
+        label: ds.label,
+        color: ds.color,
+        colorGradient: ds.colorGradient,
+        visible: visibilityMap.get(`item:${ds.label}`) ?? true
+      });
+    }
+  }
+  const orderByLabel = /* @__PURE__ */ new Map();
+  for (const ds of entries) {
+    if (!orderByLabel.has(ds.label)) orderByLabel.set(ds.label, ds.order);
+  }
+  items.sort((a, b) => (orderByLabel.get(a.label) ?? 0) - (orderByLabel.get(b.label) ?? 0));
+  return items;
+}
+function computeLegendStyle(config, legendArea) {
+  const position = config.position ?? "bottom";
+  const layout = config.layout ?? (position === "left" || position === "right" ? "vertical" : "horizontal");
+  const isVertical = position === "left" || position === "right";
+  const align = config.align ?? (isVertical ? "start" : "center");
+  const baseStyle = {
+    position: "absolute",
+    display: "flex",
+    gap: `${config.itemGap ?? 8}px`,
+    padding: "8px",
+    flexWrap: "wrap",
+    boxSizing: "border-box"
+  };
+  const alignValue = align === "start" ? "flex-start" : align === "end" ? "flex-end" : "center";
+  const defaultMaxWidth = 150;
+  switch (position) {
+    case "top":
+    case "bottom":
+      return {
+        ...baseStyle,
+        top: legendArea.y,
+        left: legendArea.x,
+        width: legendArea.width,
+        height: config.height ?? "fit-content",
+        // Cap to the reserved strip and scroll the overflow (amCharts-style) so a tall
+        // legend never spills past the chart and clips its trailing items. legendArea
+        // already reflects any explicit height/maxHeight and the auto-reposition floor
+        // (see resolveReservedLegendHeight), so this stays in lockstep with what the
+        // layout carved out — mirrors the right/left legend's overflow handling.
+        maxHeight: legendArea.height,
+        overflowY: "auto",
+        justifyContent: alignValue,
+        alignItems: "center",
+        flexDirection: layout === "vertical" ? "column" : "row"
+      };
+    case "left":
+    case "right": {
+      const va = config.verticalAlign ?? "top";
+      const sideTop = va === "middle" ? legendArea.y + legendArea.height / 2 : va === "bottom" ? legendArea.y + legendArea.height : legendArea.y;
+      const sideTransform = va === "middle" ? "translateY(-50%)" : va === "bottom" ? "translateY(-100%)" : "none";
+      return {
+        ...baseStyle,
+        top: sideTop,
+        left: legendArea.x,
+        width: config.width ?? "fit-content",
+        maxWidth: config.maxWidth ?? (typeof config.width === "number" ? config.width : defaultMaxWidth),
+        height: "fit-content",
+        maxHeight: legendArea.height,
+        flexDirection: "column",
+        alignItems: alignValue,
+        overflowY: "auto",
+        transform: sideTransform
+      };
+    }
+    default:
+      return baseStyle;
+  }
+}
+function resolveLegendClickAction(item, ctx) {
+  if (ctx.isCartesian || ctx.isRect || ctx.hasRadarDatasets || ctx.hasPolarDatasets) {
+    return { kind: "toggleDataset", datasetId: item.datasetId };
+  }
+  if (item.type === "dataset") {
+    const dataset = ctx.datasets.get(item.datasetId);
+    const dataLength = dataset?.props?.data?.length ?? 0;
+    if (dataLength === 0) return { kind: "noop" };
+    const hidden = ctx.hiddenItems.get(item.datasetId);
+    let anyVisible = false;
+    for (let i = 0; i < dataLength; i++) {
+      if (!hidden?.has(i)) {
+        anyVisible = true;
+        break;
+      }
+    }
+    const newVisibility = !anyVisible;
+    const indices = [];
+    for (let i = 0; i < dataLength; i++) {
+      const currentlyVisible = !hidden?.has(i);
+      if (currentlyVisible !== newVisibility) indices.push(i);
+    }
+    return indices.length === 0 ? { kind: "noop" } : { kind: "toggleItems", datasetId: item.datasetId, indices };
+  }
+  if (item.index !== void 0) {
+    return { kind: "toggleItems", datasetId: item.datasetId, indices: [item.index] };
+  }
+  return { kind: "noop" };
+}
+function resolveLegendHoverTarget(item, ctx) {
+  if (!item) return null;
+  if (!item.visible) return null;
+  if (item.type === "dataset" && (ctx.isCartesian || ctx.hasRadarDatasets || ctx.hasPolarDatasets)) {
+    return { datasetId: item.datasetId, index: null };
+  }
+  if (item.type === "item" && item.index !== void 0) {
+    return { datasetId: item.datasetId, index: item.index };
+  }
+  return null;
+}
+
+// src/utils/itemCollector.ts
+var ItemCollector = class {
+  constructor() {
+    this.items = /* @__PURE__ */ new Map();
+    this.counter = 0;
+  }
+  registerItem(index, props) {
+    const existing = this.items.get(index);
+    if (existing && shallowEqual(existing, props)) return;
+    this.items.set(index, props);
+  }
+  unregisterItem(index) {
+    this.items.delete(index);
+  }
+  getNextIndex() {
+    return this.counter++;
+  }
+  getItems() {
+    return Array.from(this.items.entries()).sort(([a], [b]) => a - b).map(([, props]) => props);
+  }
+};
+
+// src/utils/plotReference/geometry.ts
+function parseDashArray(dash) {
+  if (!dash || !Array.isArray(dash) || dash.length === 0) return void 0;
+  if (dash.some((n) => typeof n !== "number" || isNaN(n))) return void 0;
+  return dash.slice();
+}
+function findValueScale(axisLayouts, yAxisId) {
+  for (const [, info] of axisLayouts) {
+    if (yAxisId) {
+      if (info.id === yAxisId && "invert" in info.scale) return info.scale;
+    } else if (info.axis === "y" && info.isPrimary && "invert" in info.scale) {
+      return info.scale;
+    }
+  }
+  return null;
+}
+function findXScale(axisLayouts) {
+  for (const [, info] of axisLayouts) {
+    if (info.axis === "x" && info.isPrimary && "invert" in info.scale) return info.scale;
+  }
+  return null;
+}
+function computeReferenceLines(referenceLines, axisLayouts, cartesianArea, categoryScale, orientation) {
+  const results = [];
+  for (const pl of referenceLines) {
+    const stroke = pl.stroke ?? DEFAULT_REFERENCE_LINE_STROKE;
+    const strokeWidth = pl.lineStrokeWidth ?? DEFAULT_REFERENCE_LINE_WIDTH;
+    const dashArray = parseDashArray(pl.strokeDasharray);
+    let geo = null;
+    if (pl.y != null) {
+      const scale = findValueScale(axisLayouts, pl.yAxisId);
+      if (!scale) continue;
+      const py = scale(pl.y);
+      if (orientation === "horizontal") {
+        geo = buildLineGeo(py, cartesianArea.y, py, cartesianArea.y + cartesianArea.height, stroke, strokeWidth, dashArray, pl, cartesianArea, "vertical-axis");
+      } else {
+        geo = buildLineGeo(cartesianArea.x, py, cartesianArea.x + cartesianArea.width, py, stroke, strokeWidth, dashArray, pl, cartesianArea, "horizontal");
+      }
+    } else if (pl.x != null) {
+      let px = null;
+      if (typeof pl.x === "string" && categoryScale) {
+        const catPos = categoryScale(pl.x);
+        if (catPos != null && !isNaN(catPos)) px = catPos + categoryScale.bandwidth() / 2;
+      } else if (typeof pl.x === "number") {
+        const xScale = findXScale(axisLayouts);
+        if (xScale) px = xScale(pl.x);
+      }
+      if (px == null) continue;
+      if (orientation === "horizontal") {
+        geo = buildLineGeo(cartesianArea.x, px, cartesianArea.x + cartesianArea.width, px, stroke, strokeWidth, dashArray, pl, cartesianArea, "horizontal");
+      } else {
+        geo = buildLineGeo(px, cartesianArea.y, px, cartesianArea.y + cartesianArea.height, stroke, strokeWidth, dashArray, pl, cartesianArea, "vertical");
+      }
+    }
+    if (geo) results.push(geo);
+  }
+  return results;
+}
+function buildLineGeo(x1, y1, x2, y2, stroke, strokeWidth, dashArray, pl, area, direction) {
+  const pos = pl.labelPosition ?? "end";
+  let labelX;
+  let labelY;
+  let labelAnchor;
+  let labelBaseline;
+  if (direction === "horizontal") {
+    labelY = y1 - DEFAULT_REFERENCE_LABEL_OFFSET;
+    labelBaseline = "auto";
+    if (pos === "start") {
+      labelX = area.x + DEFAULT_REFERENCE_LABEL_OFFSET;
+      labelAnchor = "start";
+    } else if (pos === "center") {
+      labelX = area.x + area.width / 2;
+      labelAnchor = "middle";
+    } else {
+      labelX = area.x + area.width - DEFAULT_REFERENCE_LABEL_OFFSET;
+      labelAnchor = "end";
+    }
+  } else if (direction === "vertical") {
+    labelX = x1 + DEFAULT_REFERENCE_LABEL_OFFSET;
+    labelAnchor = "start";
+    if (pos === "start") {
+      labelY = area.y + area.height - DEFAULT_REFERENCE_LABEL_OFFSET;
+      labelBaseline = "auto";
+    } else if (pos === "center") {
+      labelY = area.y + area.height / 2;
+      labelBaseline = "central";
+    } else {
+      labelY = area.y + DEFAULT_REFERENCE_LABEL_OFFSET;
+      labelBaseline = "hanging";
+    }
+  } else {
+    labelX = x1 + DEFAULT_REFERENCE_LABEL_OFFSET;
+    labelAnchor = "start";
+    if (pos === "start") {
+      labelY = area.y + area.height - DEFAULT_REFERENCE_LABEL_OFFSET;
+      labelBaseline = "auto";
+    } else if (pos === "center") {
+      labelY = area.y + area.height / 2;
+      labelBaseline = "central";
+    } else {
+      labelY = area.y + DEFAULT_REFERENCE_LABEL_OFFSET;
+      labelBaseline = "hanging";
+    }
+  }
+  return {
+    x1,
+    y1,
+    x2,
+    y2,
+    stroke,
+    lineStrokeWidth: strokeWidth,
+    dashArray,
+    label: pl.label,
+    labelX,
+    labelY,
+    labelAnchor,
+    labelBaseline,
+    labelColor: pl.labelColor,
+    labelFontSize: pl.labelFontSize,
+    labelFontWeight: pl.labelFontWeight,
+    labelBackground: pl.labelBackground,
+    labelBackgroundOpacity: pl.labelBackgroundOpacity,
+    labelPadding: pl.labelPadding,
+    labelBorderRadius: pl.labelBorderRadius
+  };
+}
+function computeReferenceBands(referenceBands, axisLayouts, cartesianArea, categoryScale, orientation) {
+  const results = [];
+  for (const pb of referenceBands) {
+    let fill;
+    let fillOpacity;
+    if (typeof pb.fill === "object" && pb.fill) {
+      fill = pb.fill.color;
+      fillOpacity = pb.fill.opacity ?? 1;
+    } else {
+      fill = pb.fill ?? DEFAULT_REFERENCE_BAND_FILL;
+      fillOpacity = pb.fillOpacity ?? DEFAULT_REFERENCE_BAND_OPACITY;
+    }
+    let geo = null;
+    if (pb.x1 != null && pb.x2 != null && pb.y1 != null && pb.y2 != null && typeof pb.x1 === "number" && typeof pb.x2 === "number") {
+      const yScale = findValueScale(axisLayouts, pb.yAxisId);
+      const xScale = findXScale(axisLayouts);
+      if (!yScale || !xScale) continue;
+      const py1 = yScale(pb.y1);
+      const py2 = yScale(pb.y2);
+      const px1 = xScale(pb.x1);
+      const px2 = xScale(pb.x2);
+      const left = Math.min(px1, px2);
+      const top = Math.min(py1, py2);
+      geo = buildBandGeo(left, top, Math.abs(px2 - px1), Math.abs(py2 - py1), fill, fillOpacity, pb, "box", cartesianArea);
+    } else if (pb.y1 != null && pb.y2 != null) {
+      const scale = findValueScale(axisLayouts, pb.yAxisId);
+      if (!scale) continue;
+      const py1 = scale(pb.y1);
+      const py2 = scale(pb.y2);
+      if (orientation === "horizontal") {
+        const left = Math.min(py1, py2);
+        const right = Math.max(py1, py2);
+        geo = buildBandGeo(left, cartesianArea.y, right - left, cartesianArea.height, fill, fillOpacity, pb, "vertical", cartesianArea);
+      } else {
+        const top = Math.min(py1, py2);
+        const bot = Math.max(py1, py2);
+        geo = buildBandGeo(cartesianArea.x, top, cartesianArea.width, bot - top, fill, fillOpacity, pb, "horizontal", cartesianArea);
+      }
+    } else if (pb.x1 != null && pb.x2 != null) {
+      if (typeof pb.x1 === "string" && typeof pb.x2 === "string" && categoryScale) {
+        const bw = categoryScale.bandwidth();
+        let c1 = categoryScale(pb.x1);
+        let c2 = categoryScale(pb.x2);
+        if (isNaN(c1) && isNaN(c2)) continue;
+        if (isNaN(c1)) c1 = orientation === "horizontal" ? cartesianArea.y : cartesianArea.x;
+        if (isNaN(c2)) c2 = (orientation === "horizontal" ? cartesianArea.y + cartesianArea.height : cartesianArea.x + cartesianArea.width) - bw;
+        if (c1 != null && c2 != null) {
+          const left1 = c1;
+          const right2 = c2 + bw;
+          if (left1 <= right2) {
+            if (orientation === "horizontal") {
+              geo = buildBandGeo(cartesianArea.x, left1, cartesianArea.width, right2 - left1, fill, fillOpacity, pb, "horizontal", cartesianArea);
+            } else {
+              geo = buildBandGeo(left1, cartesianArea.y, right2 - left1, cartesianArea.height, fill, fillOpacity, pb, "vertical", cartesianArea);
+            }
+          } else {
+            const areaEnd = orientation === "horizontal" ? cartesianArea.y + cartesianArea.height : cartesianArea.x + cartesianArea.width;
+            if (orientation === "horizontal") {
+              results.push(buildBandGeo(cartesianArea.x, left1, cartesianArea.width, areaEnd - left1, fill, fillOpacity, pb, "horizontal", cartesianArea));
+              results.push(buildBandGeo(cartesianArea.x, cartesianArea.y, cartesianArea.width, right2 - cartesianArea.y, fill, fillOpacity, { ...pb, label: void 0 }, "horizontal", cartesianArea));
+            } else {
+              results.push(buildBandGeo(left1, cartesianArea.y, areaEnd - left1, cartesianArea.height, fill, fillOpacity, pb, "vertical", cartesianArea));
+              results.push(buildBandGeo(cartesianArea.x, cartesianArea.y, right2 - cartesianArea.x, cartesianArea.height, fill, fillOpacity, { ...pb, label: void 0 }, "vertical", cartesianArea));
+            }
+            continue;
+          }
+        }
+      } else if (typeof pb.x1 === "number" && typeof pb.x2 === "number") {
+        const xScale = findXScale(axisLayouts);
+        if (xScale) {
+          const px1 = xScale(pb.x1);
+          const px2 = xScale(pb.x2);
+          const left = Math.min(px1, px2);
+          const right = Math.max(px1, px2);
+          if (orientation === "horizontal") {
+            geo = buildBandGeo(cartesianArea.x, left, cartesianArea.width, right - left, fill, fillOpacity, pb, "horizontal", cartesianArea);
+          } else {
+            geo = buildBandGeo(left, cartesianArea.y, right - left, cartesianArea.height, fill, fillOpacity, pb, "vertical", cartesianArea);
+          }
+        }
+      }
+    }
+    if (geo) results.push(geo);
+  }
+  return results;
+}
+function buildBandGeo(x, y, width, height, fill, fillOpacity, pb, bandDirection, area) {
+  const pos = pb.labelPosition ?? "center";
+  let labelX;
+  let labelY;
+  let labelAnchor;
+  let labelBaseline;
+  if (bandDirection === "box") {
+    if (pos === "start") {
+      labelX = x + DEFAULT_REFERENCE_LABEL_OFFSET;
+      labelY = y + DEFAULT_REFERENCE_LABEL_OFFSET;
+      labelAnchor = "start";
+      labelBaseline = "hanging";
+    } else if (pos === "end") {
+      labelX = x + width - DEFAULT_REFERENCE_LABEL_OFFSET;
+      labelY = y + height - DEFAULT_REFERENCE_LABEL_OFFSET;
+      labelAnchor = "end";
+      labelBaseline = "auto";
+    } else {
+      labelX = x + width / 2;
+      labelY = y + height / 2;
+      labelAnchor = "middle";
+      labelBaseline = "central";
+    }
+  } else if (bandDirection === "horizontal") {
+    labelY = y + height / 2;
+    labelBaseline = "central";
+    if (pos === "start") {
+      labelX = area.x + DEFAULT_REFERENCE_LABEL_OFFSET;
+      labelAnchor = "start";
+    } else if (pos === "center") {
+      labelX = x + width / 2;
+      labelAnchor = "middle";
+    } else {
+      labelX = area.x + area.width - DEFAULT_REFERENCE_LABEL_OFFSET;
+      labelAnchor = "end";
+    }
+  } else {
+    labelX = x + width / 2;
+    labelAnchor = "middle";
+    if (pos === "start") {
+      labelY = area.y + DEFAULT_REFERENCE_LABEL_OFFSET;
+      labelBaseline = "hanging";
+    } else if (pos === "center") {
+      labelY = y + height / 2;
+      labelBaseline = "central";
+    } else {
+      labelY = area.y + area.height - DEFAULT_REFERENCE_LABEL_OFFSET;
+      labelBaseline = "auto";
+    }
+  }
+  return {
+    x,
+    y,
+    width,
+    height,
+    fill,
+    fillOpacity,
+    stroke: pb.stroke,
+    label: pb.label,
+    labelX,
+    labelY,
+    labelAnchor,
+    labelBaseline,
+    labelColor: pb.labelColor,
+    labelFontSize: pb.labelFontSize,
+    labelFontWeight: pb.labelFontWeight
+  };
+}
+function computeLabelBgRect(labelX, baselineY, anchor, textWidth, fontSize, padding, topToAlpha) {
+  const ascent = topToAlpha;
+  const descent = fontSize - topToAlpha;
+  const w = textWidth + padding * 2;
+  const h = ascent + descent + padding * 2;
+  const y = baselineY - ascent - padding;
+  let x;
+  if (anchor === "middle") x = labelX - w / 2;
+  else if (anchor === "end") x = labelX + padding - w;
+  else x = labelX - padding;
+  return { x, y, w, h };
+}
+
+// src/utils/plotReference/svg.ts
+function renderReferenceBandsSvg(bands, globalFont) {
+  if (bands.length === 0) return null;
+  const group = createSvgGroup();
+  const fontFamily = resolveFontFamily(void 0, globalFont);
+  for (const b of bands) {
+    const attrs = { class: "p-chart-reference-band", fill: b.fill, "fill-opacity": b.fillOpacity };
+    if (b.stroke) attrs.stroke = b.stroke;
+    appendChild(group, createSvgRect(b.x, b.y, b.width, b.height, attrs));
+    if (b.label) {
+      const fontSize = resolveFontSize(b.labelFontSize ?? DEFAULT_REFERENCE_LABEL_FONT_SIZE, globalFont);
+      const weight = b.labelFontWeight != null ? String(b.labelFontWeight) : "normal";
+      const { topToAlpha, midToAlpha } = measureFontMetrics(fontSize, fontFamily, weight);
+      const dy = b.labelBaseline === "central" ? midToAlpha : b.labelBaseline === "hanging" ? topToAlpha : void 0;
+      const labelAttrs = {
+        "text-anchor": b.labelAnchor,
+        "dominant-baseline": "auto",
+        dy,
+        "font-size": fontSize,
+        "font-family": fontFamily,
+        "pointer-events": "none"
+      };
+      if (b.labelColor) labelAttrs.style = `fill:${b.labelColor}`;
+      else labelAttrs.class = "p-chart-annotation";
+      if (b.labelFontWeight != null) labelAttrs["font-weight"] = b.labelFontWeight;
+      appendChild(group, createSvgText(b.labelX, b.labelY, b.label, labelAttrs));
+    }
+  }
+  return group;
+}
+function renderReferenceLinesSvg(lines, globalFont) {
+  if (lines.length === 0) return null;
+  const group = createSvgGroup();
+  const fontFamily = resolveFontFamily(void 0, globalFont);
+  for (const l of lines) {
+    const attrs = {
+      class: "p-chart-reference-line",
+      stroke: l.stroke,
+      "stroke-width": l.lineStrokeWidth
+    };
+    if (l.dashArray) attrs["stroke-dasharray"] = l.dashArray.join(" ");
+    appendChild(group, createSvgLine(l.x1, l.y1, l.x2, l.y2, attrs));
+    if (l.label) {
+      const fontSize = resolveFontSize(l.labelFontSize ?? DEFAULT_REFERENCE_LABEL_FONT_SIZE, globalFont);
+      const weight = String(l.labelFontWeight ?? DEFAULT_REFERENCE_LABEL_FONT_WEIGHT);
+      const { topToAlpha, midToAlpha } = measureFontMetrics(fontSize, fontFamily, weight);
+      const dy = l.labelBaseline === "central" ? midToAlpha : l.labelBaseline === "hanging" ? topToAlpha : void 0;
+      if (l.labelBackground) {
+        const padding = l.labelPadding ?? 5;
+        const radius = l.labelBorderRadius ?? 4;
+        const textWidth = measureTextWidth(l.label, fontSize, weight, fontFamily);
+        const rect = computeLabelBgRect(l.labelX, l.labelY + (dy ?? 0), l.labelAnchor, textWidth, fontSize, padding, topToAlpha);
+        const bgAttrs = {
+          rx: radius,
+          ry: radius,
+          fill: l.labelBackground,
+          "pointer-events": "none"
+        };
+        if (l.labelBackgroundOpacity != null) bgAttrs["fill-opacity"] = l.labelBackgroundOpacity;
+        appendChild(group, createSvgRect(rect.x, rect.y, rect.w, rect.h, bgAttrs));
+      }
+      const explicitFill = l.labelColor ?? (l.stroke === "currentColor" ? void 0 : l.stroke);
+      const textAttrs = {
+        "text-anchor": l.labelAnchor,
+        "dominant-baseline": "auto",
+        dy,
+        "font-size": fontSize,
+        "font-family": fontFamily,
+        "font-weight": l.labelFontWeight ?? DEFAULT_REFERENCE_LABEL_FONT_WEIGHT,
+        "pointer-events": "none"
+      };
+      if (explicitFill) textAttrs.style = `fill:${explicitFill}`;
+      else textAttrs.class = "p-chart-annotation";
+      appendChild(group, createSvgText(l.labelX, l.labelY, l.label, textAttrs));
+    }
+  }
+  return group;
+}
+
+// src/utils/plotReference/canvas.ts
+function renderReferenceBandsCanvas(ctx, bands, globalFont, theme) {
+  const fontFamily = resolveFontFamily(void 0, globalFont);
+  for (const b of bands) {
+    withCanvasState(ctx, () => {
+      ctx.globalAlpha = b.fillOpacity;
+      ctx.fillStyle = b.fill;
+      ctx.fillRect(b.x, b.y, b.width, b.height);
+      if (b.stroke) {
+        ctx.globalAlpha = 1;
+        ctx.strokeStyle = b.stroke;
+        ctx.strokeRect(b.x, b.y, b.width, b.height);
+      }
+    });
+    if (b.label) {
+      withCanvasState(ctx, () => {
+        const labelFontSize = resolveFontSize(b.labelFontSize ?? DEFAULT_REFERENCE_LABEL_FONT_SIZE, globalFont);
+        const weight = b.labelFontWeight != null ? `${b.labelFontWeight} ` : "";
+        const { topToAlpha, midToAlpha } = measureFontMetrics(labelFontSize, fontFamily, weight.trim() || "normal");
+        const dy = b.labelBaseline === "central" ? midToAlpha : b.labelBaseline === "hanging" ? topToAlpha : 0;
+        ctx.font = `${weight}${labelFontSize}px ${fontFamily}`;
+        ctx.fillStyle = b.labelColor ?? theme.annotation;
+        ctx.textAlign = b.labelAnchor === "middle" ? "center" : b.labelAnchor;
+        ctx.textBaseline = "alphabetic";
+        ctx.fillText(b.label, b.labelX, b.labelY + dy);
+      });
+    }
+  }
+}
+function renderReferenceLinesCanvas(ctx, lines, globalFont, theme) {
+  const fontFamily = resolveFontFamily(void 0, globalFont);
+  for (const l of lines) {
+    withCanvasState(ctx, () => {
+      ctx.strokeStyle = l.stroke;
+      ctx.lineWidth = l.lineStrokeWidth;
+      if (l.dashArray) ctx.setLineDash(l.dashArray);
+      ctx.beginPath();
+      ctx.moveTo(l.x1, l.y1);
+      ctx.lineTo(l.x2, l.y2);
+      ctx.stroke();
+    });
+    if (l.label) {
+      withCanvasState(ctx, () => {
+        const labelFontSize = resolveFontSize(l.labelFontSize ?? DEFAULT_REFERENCE_LABEL_FONT_SIZE, globalFont);
+        const weight = l.labelFontWeight ?? DEFAULT_REFERENCE_LABEL_FONT_WEIGHT;
+        const { topToAlpha, midToAlpha } = measureFontMetrics(labelFontSize, fontFamily, String(weight));
+        const dy = l.labelBaseline === "central" ? midToAlpha : l.labelBaseline === "hanging" ? topToAlpha : 0;
+        ctx.font = `${weight} ${labelFontSize}px ${fontFamily}`;
+        if (l.labelBackground) {
+          const padding = l.labelPadding ?? 5;
+          const radius = l.labelBorderRadius ?? 4;
+          const textWidth = ctx.measureText(l.label).width;
+          const rect = computeLabelBgRect(l.labelX, l.labelY + dy, l.labelAnchor, textWidth, labelFontSize, padding, topToAlpha);
+          const prevAlpha = ctx.globalAlpha;
+          if (l.labelBackgroundOpacity != null) ctx.globalAlpha = prevAlpha * l.labelBackgroundOpacity;
+          ctx.fillStyle = l.labelBackground;
+          ctx.beginPath();
+          ctx.roundRect(rect.x, rect.y, rect.w, rect.h, radius);
+          ctx.fill();
+          ctx.globalAlpha = prevAlpha;
+        }
+        ctx.fillStyle = l.labelColor ?? (l.stroke === "currentColor" ? theme.annotation : l.stroke);
+        ctx.textAlign = l.labelAnchor === "middle" ? "center" : l.labelAnchor;
+        ctx.textBaseline = "alphabetic";
+        ctx.fillText(l.label, l.labelX, l.labelY + dy);
+      });
+    }
+  }
+}
+function extractReferenceFeatures(features) {
+  const referenceLines = [];
+  const referenceBands = [];
+  for (const [key, feat] of features) {
+    if (typeof key === "string" && key.startsWith("referenceLine:")) referenceLines.push(feat.props);
+    if (typeof key === "string" && key.startsWith("referenceBand:")) referenceBands.push(feat.props);
+  }
+  return { referenceLines, referenceBands };
+}
+function withReferenceFeatures(layout, features) {
+  const { referenceLines, referenceBands } = extractReferenceFeatures(features);
+  return {
+    ...layout,
+    referenceLines: referenceLines.length ? referenceLines : void 0,
+    referenceBands: referenceBands.length ? referenceBands : void 0
+  };
+}
+
+// src/utils/styles.ts
+var LEGEND_ITEM_BASE_STYLE = {
+  display: "flex",
+  alignItems: "center",
+  gap: "6px",
+  color: "var(--p-chart-legend-color, #374151)",
+  padding: "2px 4px",
+  borderRadius: "4px",
+  transition: "opacity 0.2s, background-color 0.2s"
+};
+var LEGEND_SWATCH_STYLE = {
+  width: "12px",
+  height: "12px",
+  borderRadius: "2px",
+  flexShrink: 0
+};
+var TOOLTIP_BASE_STYLE = {
+  position: "absolute",
+  pointerEvents: "none",
+  zIndex: 1e3
+};
+var TOOLTIP_DEFAULT_STYLE = {
+  display: "flex",
+  flexDirection: "column"
+};
+var TOOLTIP_COLOR_INDICATOR_STYLE = {
+  width: "10px",
+  height: "10px",
+  borderRadius: "2px"
+};
+
+// src/utils/annotation.utils.ts
+function buildAnnotationContext(params) {
+  const { width, height, chartArea, center, xScale, yScale, getScale, fontFamily, hiddenItems, datasetVisibility, hoveredItem, theme } = params;
+  return {
+    width,
+    height,
+    chartArea,
+    center,
+    xScale,
+    yScale,
+    getScale,
+    fontFamily,
+    textColor: theme.annotation,
+    isItemVisible: (dsId, idx) => !hiddenItems.get(dsId)?.has(idx),
+    isDatasetVisible: (dsId) => datasetVisibility.get(dsId) ?? true,
+    hoveredItem: hoveredItem ?? null
+  };
+}
+function renderAnnotationsCanvas(ctx, annotations, baseContext) {
+  if (annotations.size === 0) return;
+  const fullContext = { ...baseContext, ctx };
+  annotations.forEach((renderFn) => {
+    ctx.save();
+    ctx.fillStyle = baseContext.textColor;
+    renderFn(fullContext);
+    ctx.restore();
+  });
+}
+
+export { ItemCollector, LEGEND_ITEM_BASE_STYLE, LEGEND_SWATCH_STYLE, TOOLTIP_BASE_STYLE, TOOLTIP_COLOR_INDICATOR_STYLE, TOOLTIP_DEFAULT_STYLE, buildAnnotationContext, buildLegendItems, buildMarkerRenderItems, buildSharedLegendItems, computeLegendStyle, computeReferenceBands, computeReferenceLines, extractReferenceFeatures, observeDocumentDir, renderAnnotationsCanvas, renderCustomMarkersCanvas, renderReferenceBandsCanvas, renderReferenceBandsSvg, renderReferenceLinesCanvas, renderReferenceLinesSvg, resolveDirFromElement, resolveLegendClickAction, resolveLegendHoverTarget, withReferenceFeatures };